diff --git a/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index e5b535f0c7..10282125ea 100644
--- a/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3e0da5eb9b275fe3cb431033c1413ec2",
-  "translation_date": "2025-10-22T14:08:04+00:00",
+  "original_hash": "d45ddcc54eb9232a76d08328b09d792e",
+  "translation_date": "2025-11-03T12:28:46+00:00",
   "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
   "language_code": "ar"
 }
@@ -11,31 +11,48 @@ CO_OP_TRANSLATOR_METADATA:
 
 مرحبًا أيها المطور المستقبلي! 👋 هل يمكنني أن أخبرك بشيء يجعلني أشعر بالحماس كل يوم؟ أنت على وشك اكتشاف أن البرمجة ليست مجرد التعامل مع أجهزة الكمبيوتر – إنها امتلاك قوى خارقة حقيقية لتحويل أفكارك الأكثر جنونًا إلى واقع!
 
-تعرف ذلك الشعور عندما تستخدم تطبيقك المفضل وكل شيء يعمل بسلاسة؟ عندما تضغط على زر ويحدث شيء سحري يجعلك تقول "واو، كيف فعلوا ذلك؟" حسنًا، شخص مثلك تمامًا – ربما جالس في مقهىه المفضل في الساعة الثانية صباحًا مع كوبه الثالث من الإسبريسو – كتب الكود الذي صنع تلك السحرية. وهنا ما سيذهلك: بنهاية هذا الدرس، لن تفهم فقط كيف فعلوا ذلك، بل ستشعر بالحماس لتجربته بنفسك!
+تعرف ذلك الشعور عندما تستخدم تطبيقك المفضل وكل شيء يعمل بسلاسة؟ عندما تضغط على زر ويحدث شيء سحري يجعلك تقول "واو، كيف فعلوا ذلك؟" حسنًا، شخص مثلك تمامًا – ربما جالس في مقهىه المفضل في الساعة الثانية صباحًا مع كوبه الثالث من الإسبريسو – كتب الكود الذي صنع تلك السحرية. وهنا ما سيذهلك: بنهاية هذا الدرس، لن تفهم فقط كيف فعلوا ذلك، بل ستكون متحمسًا لتجربته بنفسك!
 
-انظر، أنا أفهم تمامًا إذا كانت البرمجة تبدو مخيفة الآن. عندما بدأت لأول مرة، كنت أعتقد بصدق أنك بحاجة إلى أن تكون عبقريًا في الرياضيات أو أن تكون قد بدأت البرمجة منذ أن كنت في الخامسة من عمرك. لكن ما غير وجهة نظري تمامًا هو أن البرمجة تشبه تمامًا تعلم التحدث بلغة جديدة. تبدأ بـ "مرحبًا" و"شكرًا"، ثم تتقدم إلى طلب القهوة، وقبل أن تدرك ذلك، تكون قادرًا على إجراء مناقشات فلسفية عميقة! إلا أن الأمر هنا يتعلق بإجراء محادثات مع أجهزة الكمبيوتر، وبصراحة؟ إنها أكثر الشركاء صبرًا في المحادثة – لا تحكم على أخطائك ودائمًا متحمسة لتجربة مرة أخرى!
+انظر، أنا أفهم تمامًا إذا كانت البرمجة تبدو مخيفة الآن. عندما بدأت لأول مرة، كنت أعتقد بصراحة أنك بحاجة إلى أن تكون عبقريًا في الرياضيات أو أن تكون قد بدأت البرمجة منذ أن كنت في الخامسة من عمرك. لكن ما غير وجهة نظري تمامًا هو أن البرمجة تشبه تمامًا تعلم التحدث بلغة جديدة. تبدأ بـ "مرحبًا" و"شكرًا"، ثم تتقدم إلى طلب القهوة، وقبل أن تدرك، تجد نفسك تخوض مناقشات فلسفية عميقة! إلا أن الأمر هنا يتعلق بالتحدث مع أجهزة الكمبيوتر، وبصراحة؟ إنها أكثر شركاء المحادثة صبرًا – لا تحكم على أخطائك أبدًا ودائمًا متحمسة لتجربة مرة أخرى!
 
 اليوم، سنستكشف الأدوات الرائعة التي تجعل تطوير الويب الحديث ليس فقط ممكنًا، بل ممتعًا للغاية. أنا أتحدث عن نفس المحررات والمتصفحات وطرق العمل التي يستخدمها المطورون في Netflix وSpotify واستوديوهات التطبيقات المستقلة المفضلة لديك كل يوم. وهنا الجزء الذي سيجعلك ترقص فرحًا: معظم هذه الأدوات الاحترافية والمعتمدة في الصناعة مجانية تمامًا!
 
 ![مقدمة البرمجة](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ar.png)
 > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
 
-## لنرى ما تعرفه بالفعل!
+```mermaid
+journey
+    title Your Programming Journey Today
+    section Discover
+      What is Programming: 5: You
+      Programming Languages: 4: You
+      Tools Overview: 5: You
+    section Explore
+      Code Editors: 4: You
+      Browsers & DevTools: 5: You
+      Command Line: 3: You
+    section Practice
+      Language Detective: 4: You
+      Tool Exploration: 5: You
+      Community Connection: 5: You
+```
+
+## دعنا نرى ما تعرفه بالفعل!
 
-قبل أن نبدأ في الأمور الممتعة، أنا فضولي – ماذا تعرف بالفعل عن عالم البرمجة هذا؟ وإذا كنت تنظر إلى هذه الأسئلة وتفكر "ليس لدي أي فكرة عن أي من هذا"، فهذا ليس فقط مقبولًا، بل مثالي! هذا يعني أنك في المكان المناسب تمامًا. فكر في هذا الاختبار كتمرين إحماء قبل التمرين – نحن فقط ندفئ عضلات الدماغ!
+قبل أن نبدأ في الأمور الممتعة، أنا فضولي – ماذا تعرف بالفعل عن عالم البرمجة هذا؟ وإذا كنت تنظر إلى هذه الأسئلة وتفكر "ليس لدي أي فكرة عن أي من هذا"، فهذا ليس فقط مقبولًا، بل مثالي! هذا يعني أنك في المكان الصحيح تمامًا. فكر في هذا الاختبار كتمرين تمدد قبل التمرين – نحن فقط نقوم بتسخين عضلات الدماغ!
 
 [خذ اختبار ما قبل الدرس](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
 
 ## المغامرة التي سنخوضها معًا
 
-حسنًا، أنا متحمس جدًا لما سنستكشفه اليوم! بجدية، أتمنى أن أرى وجهك عندما تفهم بعض هذه المفاهيم. إليك الرحلة الرائعة التي سنخوضها معًا:
+حسنًا، أنا متحمس جدًا لما سنستكشفه اليوم! بصراحة، أتمنى أن أرى وجهك عندما تفهم بعض هذه المفاهيم. إليك الرحلة الرائعة التي سنخوضها معًا:
 
 - **ما هي البرمجة حقًا (ولماذا هي أروع شيء على الإطلاق!)** – سنكتشف كيف أن الكود هو السحر الخفي الذي يشغل كل شيء حولك، من المنبه الذي يعرف بطريقة ما أنه صباح يوم الاثنين إلى الخوارزمية التي تختار لك توصيات Netflix المثالية.
-- **لغات البرمجة وشخصياتها المذهلة** – تخيل أنك تدخل حفلة حيث كل شخص لديه قوى خارقة مختلفة تمامًا وطرق لحل المشكلات. هذا هو عالم لغات البرمجة، وستحب التعرف عليها!
-- **الأسس التي تجعل السحر الرقمي يحدث** – فكر في هذه كأروع مجموعة LEGO إبداعية. بمجرد أن تفهم كيف تتناسب هذه القطع معًا، ستدرك أنك تستطيع بناء أي شيء تحلم به.
-- **الأدوات الاحترافية التي ستجعلك تشعر وكأنك حصلت على عصا سحرية** – أنا لا أبالغ هنا – هذه الأدوات ستجعلك تشعر وكأن لديك قوى خارقة، والجزء الأفضل؟ إنها نفس الأدوات التي يستخدمها المحترفون!
+- **لغات البرمجة وشخصياتها المذهلة** – تخيل أنك تدخل حفلة حيث لكل شخص قوى خارقة مختلفة وطرق لحل المشكلات. هذا هو عالم لغات البرمجة، وستحب التعرف عليها!
+- **الأسس التي تجعل السحر الرقمي يحدث** – فكر في هذه كأروع مجموعة LEGO إبداعية. بمجرد أن تفهم كيف تتناسب هذه القطع معًا، ستدرك أنه يمكنك بناء أي شيء تحلم به.
+- **أدوات احترافية ستجعلك تشعر وكأنك حصلت على عصا سحرية** – أنا لا أبالغ هنا – هذه الأدوات ستجعلك تشعر حقًا وكأن لديك قوى خارقة، والجزء الأفضل؟ إنها نفس الأدوات التي يستخدمها المحترفون!
 
-> 💡 **إليك الأمر**: لا تفكر حتى في محاولة حفظ كل شيء اليوم! الآن، أريدك فقط أن تشعر بتلك الشرارة من الحماس حول ما هو ممكن. التفاصيل ستلتصق بشكل طبيعي عندما نتدرب معًا – هكذا يحدث التعلم الحقيقي!
+> 💡 **إليك الأمر**: لا تفكر حتى في محاولة حفظ كل شيء اليوم! الآن، أريدك فقط أن تشعر بتلك الشرارة من الحماس حول ما هو ممكن. التفاصيل ستبقى بشكل طبيعي عندما نتدرب معًا – هكذا يحدث التعلم الحقيقي!
 
 > يمكنك أخذ هذا الدرس على [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
 
@@ -43,59 +60,128 @@ CO_OP_TRANSLATOR_METADATA:
 
 حسنًا، دعونا نتناول السؤال الذي يساوي مليون دولار: ما هي البرمجة حقًا؟
 
-سأعطيك قصة غيرت تمامًا كيف أفكر في هذا. الأسبوع الماضي، كنت أحاول شرح كيفية استخدام جهاز التحكم عن بعد الجديد للتلفزيون الذكي لوالدتي. وجدت نفسي أقول أشياء مثل "اضغط على الزر الأحمر، لكن ليس الزر الأحمر الكبير، الزر الأحمر الصغير على اليسار... لا، يسارك الآخر... حسنًا، الآن اضغط عليه لمدة ثانيتين، ليس واحدة، وليس ثلاث..." يبدو مألوفًا؟ 😅
+سأخبرك بقصة غيرت تمامًا طريقة تفكيري حول هذا الموضوع. الأسبوع الماضي، كنت أحاول شرح كيفية استخدام جهاز التحكم عن بعد الجديد للتلفزيون الذكي لوالدتي. وجدت نفسي أقول أشياء مثل "اضغط على الزر الأحمر، ولكن ليس الزر الأحمر الكبير، الزر الأحمر الصغير على اليسار... لا، يسارك الآخر... حسنًا، الآن اضغط عليه لمدة ثانيتين، ليس واحدة، وليس ثلاث..." يبدو مألوفًا؟ 😅
+
+هذه هي البرمجة! إنها فن إعطاء تعليمات مفصلة للغاية، خطوة بخطوة، لشيء قوي جدًا ولكنه يحتاج إلى كل شيء مكتوب بشكل مثالي. إلا أنك بدلاً من شرح ذلك لوالدتك (التي يمكنها أن تسأل "أي زر أحمر؟!")، تشرحه لجهاز كمبيوتر (الذي يفعل بالضبط ما تقوله، حتى لو لم يكن ما قلته هو ما كنت تقصده).
+
+إليك ما أدهشني عندما تعلمت هذا لأول مرة: أجهزة الكمبيوتر في الواقع بسيطة جدًا في جوهرها. إنها تفهم حرفيًا شيئين فقط – 1 و0، وهو ما يعني ببساطة "نعم" و"لا" أو "تشغيل" و"إيقاف". هذا كل شيء! ولكن هنا يأتي السحر – لا يتعين علينا التحدث بلغة 1 و0 كما لو كنا في فيلم ماتريكس. هنا تأتي **لغات البرمجة** لإنقاذنا. إنها مثل وجود أفضل مترجم في العالم يأخذ أفكارك البشرية العادية ويحولها إلى لغة الكمبيوتر.
+
+وهنا ما يجعلني أشعر بالحماس كل صباح عندما أستيقظ: كل شيء رقمي في حياتك بدأ بشخص مثلك تمامًا، ربما جالسًا في بيجامته مع كوب قهوة، يكتب الكود على جهاز الكمبيوتر المحمول الخاص به. ذلك الفلتر في إنستغرام الذي يجعلك تبدو رائعًا؟ شخص ما برمجه. التوصية التي قادتك إلى أغنيتك المفضلة الجديدة؟ مطور بنى تلك الخوارزمية. التطبيق الذي يساعدك على تقسيم فاتورة العشاء مع أصدقائك؟ نعم، شخص ما فكر "هذا مزعج، أراهن أنني أستطيع إصلاح هذا" ثم... فعل ذلك!
 
-هذه هي البرمجة! إنها فن إعطاء تعليمات مفصلة للغاية، خطوة بخطوة، لشيء قوي جدًا ولكنه يحتاج إلى كل شيء مكتوب بدقة. إلا أنك بدلًا من شرح ذلك لوالدتك (التي يمكنها أن تسأل "أي زر أحمر؟!")، تشرحه لجهاز كمبيوتر (الذي يفعل بالضبط ما تقوله، حتى لو لم يكن ما قلته هو ما كنت تقصده).
+عندما تتعلم البرمجة، فأنت لا تكتسب مهارة جديدة فقط – بل تصبح جزءًا من مجتمع رائع من حلّال المشاكل الذين يقضون أيامهم في التفكير، "ماذا لو استطعت بناء شيء يجعل يوم شخص ما أفضل قليلاً؟" بصراحة، هل هناك شيء أكثر روعة من ذلك؟
 
-ما أذهلني عندما تعلمت هذا لأول مرة هو أن أجهزة الكمبيوتر في الواقع بسيطة جدًا في جوهرها. إنها تفهم حرفيًا شيئين فقط – 1 و0، وهو في الأساس "نعم" و"لا" أو "تشغيل" و"إيقاف". هذا كل شيء! لكن هنا يأتي السحر – لا يتعين علينا التحدث بلغة 1 و0 كما لو كنا في فيلم The Matrix. هنا تأتي **لغات البرمجة** للإنقاذ. إنها مثل وجود أفضل مترجم في العالم يأخذ أفكارك البشرية العادية ويحولها إلى لغة الكمبيوتر.
+✅ **معلومة ممتعة للبحث عنها**: إليك شيء رائع يمكنك البحث عنه عندما يكون لديك وقت فراغ – من تعتقد أنه كان أول مبرمج كمبيوتر في العالم؟ سأعطيك تلميحًا: قد لا يكون الشخص الذي تتوقعه! قصة هذا الشخص رائعة حقًا وتظهر أن البرمجة كانت دائمًا تدور حول حل المشكلات الإبداعي والتفكير خارج الصندوق.
 
-وهنا ما يجعلني أشعر بالقشعريرة كل صباح عندما أستيقظ: كل شيء رقمي في حياتك بدأ بشخص مثلك تمامًا، ربما جالسًا في بيجامته مع كوب قهوة، يكتب الكود على جهازه المحمول. ذلك الفلتر في Instagram الذي يجعلك تبدو رائعًا؟ شخص ما برمج ذلك. التوصية التي قادتك إلى أغنيتك المفضلة الجديدة؟ مطور بنى تلك الخوارزمية. التطبيق الذي يساعدك على تقسيم فاتورة العشاء مع أصدقائك؟ نعم، شخص ما فكر "هذا مزعج، أراهن أنني أستطيع إصلاح هذا" ثم... فعل ذلك!
+### 🧠 **وقت التحقق: كيف تشعر؟**
 
-عندما تتعلم البرمجة، فأنت لا تكتسب مهارة جديدة فقط – بل تصبح جزءًا من مجتمع رائع من حل المشكلات الذين يقضون أيامهم في التفكير، "ماذا لو استطعت بناء شيء يجعل يوم شخص ما أفضل قليلاً؟" بصراحة، هل هناك شيء أكثر روعة من ذلك؟
+**خذ لحظة للتفكير:**
+- هل فكرة "إعطاء تعليمات لأجهزة الكمبيوتر" أصبحت واضحة لك الآن؟
+- هل يمكنك التفكير في مهمة يومية ترغب في أتمتتها باستخدام البرمجة؟
+- ما هي الأسئلة التي تدور في ذهنك حول هذا الشيء المسمى البرمجة؟
 
-✅ **بحث عن حقيقة ممتعة**: إليك شيء رائع للبحث عنه عندما يكون لديك لحظة فراغ – من تعتقد أنه كان أول مبرمج كمبيوتر في العالم؟ سأعطيك تلميحًا: قد لا يكون الشخص الذي تتوقعه! قصة هذا الشخص رائعة للغاية وتظهر أن البرمجة كانت دائمًا تدور حول حل المشكلات الإبداعي والتفكير خارج الصندوق.
+> **تذكر**: من الطبيعي تمامًا إذا كانت بعض المفاهيم لا تزال غامضة الآن. تعلم البرمجة يشبه تعلم لغة جديدة – يستغرق وقتًا حتى يبني عقلك تلك الروابط العصبية. أنت تقوم بعمل رائع!
 
 ## لغات البرمجة مثل نكهات مختلفة من السحر
 
-حسنًا، هذا قد يبدو غريبًا، لكن تحمل معي – لغات البرمجة تشبه كثيرًا أنواع الموسيقى المختلفة. فكر في الأمر: لديك الجاز، الذي يتميز بالسلاسة والارتجال، والروك الذي يتميز بالقوة والبساطة، والكلاسيكية التي تتميز بالأناقة والبنية، والهيب هوب الذي يتميز بالإبداع والتعبير. كل نمط له طابعه الخاص، ومجتمع من المعجبين المتحمسين، وكل واحد مثالي لمزاج ومناسبة مختلفة.
+حسنًا، هذا قد يبدو غريبًا، لكن ابق معي – لغات البرمجة تشبه كثيرًا أنواع الموسيقى المختلفة. فكر في الأمر: لديك الجاز، الذي يتميز بالسلاسة والارتجال، والروك الذي يتميز بالقوة والبساطة، والكلاسيكية التي تتميز بالأناقة والتنظيم، والهيب هوب الذي يتميز بالإبداع والتعبير. كل نوع له طابعه الخاص، ومجتمعه الخاص من المعجبين المتحمسين، وكل واحد مثالي لمزاج ومناسبة مختلفة.
 
-لغات البرمجة تعمل بنفس الطريقة تمامًا! لن تستخدم نفس اللغة لبناء لعبة موبايل ممتعة كما تستخدم لتحليل كميات ضخمة من بيانات المناخ، تمامًا كما لن تعزف موسيقى الميتال في صف يوغا (حسنًا، معظم صفوف اليوغا على أي حال! 😄).
+لغات البرمجة تعمل بنفس الطريقة تمامًا! لن تستخدم نفس اللغة لبناء لعبة هاتف ممتعة كما تستخدم لتحليل كميات هائلة من بيانات المناخ، تمامًا كما لن تشغل موسيقى الميتال الصاخبة في صف يوغا (حسنًا، ربما ليس في معظم صفوف اليوغا! 😄).
 
-لكن هنا ما يذهلني كل مرة أفكر فيه: هذه اللغات مثل وجود مترجم صبور وعبقري بجانبك. يمكنك التعبير عن أفكارك بطريقة تبدو طبيعية لعقلك البشري، وهم يتعاملون مع كل العمل المعقد لتحويل ذلك إلى 1 و0 التي تتحدث بها أجهزة الكمبيوتر. إنه مثل وجود صديق يتحدث بطلاقة في "الإبداع البشري" و"منطق الكمبيوتر" – ولا يتعب أبدًا، ولا يحتاج إلى استراحات قهوة، ولا يحكم عليك لطرح نفس السؤال مرتين!
+لكن هنا ما يدهشني كل مرة أفكر فيه: هذه اللغات تشبه وجود مترجم رائع وصبور بجانبك. يمكنك التعبير عن أفكارك بطريقة طبيعية لعقلك البشري، وهم يتولون كل العمل المعقد لتحويل ذلك إلى لغة 1 و0 التي تتحدثها أجهزة الكمبيوتر. إنه مثل وجود صديق يتحدث بطلاقة "الإبداع البشري" و"منطق الكمبيوتر" – ولا يتعب أبدًا، ولا يحتاج إلى استراحة قهوة، ولا يحكم عليك إذا سألت نفس السؤال مرتين!
 
 ### لغات البرمجة الشهيرة واستخداماتها
 
+```mermaid
+mindmap
+  root((Programming Languages))
+    Web Development
+      JavaScript
+        Frontend Magic
+        Interactive Websites
+      TypeScript
+        JavaScript + Types
+        Enterprise Apps
+    Data & AI
+      Python
+        Data Science
+        Machine Learning
+        Automation
+      R
+        Statistics
+        Research
+    Mobile Apps
+      Java
+        Android
+        Enterprise
+      Swift
+        iOS
+        Apple Ecosystem
+      Kotlin
+        Modern Android
+        Cross-platform
+    Systems & Performance
+      C++
+        Games
+        Performance Critical
+      Rust
+        Memory Safety
+        System Programming
+      Go
+        Cloud Services
+        Scalable Backend
+```
+
 | اللغة | الأفضل لـ | لماذا هي شائعة |
-|-------|-----------|----------------|
+|-------|------------|----------------|
 | **JavaScript** | تطوير الويب، واجهات المستخدم | تعمل في المتصفحات وتشغل المواقع التفاعلية |
 | **Python** | علم البيانات، الأتمتة، الذكاء الاصطناعي | سهلة القراءة والتعلم، مكتبات قوية |
 | **Java** | التطبيقات المؤسسية، تطبيقات أندرويد | مستقلة عن المنصة، قوية للأنظمة الكبيرة |
 | **C#** | تطبيقات ويندوز، تطوير الألعاب | دعم قوي من نظام مايكروسوفت |
-| **Go** | خدمات السحابة، الأنظمة الخلفية | سريعة، بسيطة، مصممة للحوسبة الحديثة |
+| **Go** | خدمات السحابة، أنظمة الخلفية | سريعة، بسيطة، مصممة للحوسبة الحديثة |
 
 ### لغات عالية المستوى مقابل لغات منخفضة المستوى
 
-حسنًا، هذا كان المفهوم الذي أربكني عندما بدأت التعلم، لذا سأشارك التشبيه الذي جعلني أفهمه أخيرًا – وآمل أن يساعدك أيضًا!
-
-تخيل أنك تزور بلدًا لا تتحدث لغته، وتحتاج بشدة إلى العثور على أقرب حمام (كلنا مررنا بذلك، أليس كذلك؟ 😅):
-
-- **البرمجة منخفضة المستوى** تشبه تعلم اللهجة المحلية جيدًا بحيث يمكنك التحدث مع الجدة التي تبيع الفاكهة على الزاوية باستخدام المراجع الثقافية، واللغة العامية، والنكات الداخلية التي لا يفهمها إلا من نشأ هناك. مثير للإعجاب للغاية وفعال جدًا... إذا كنت تجيد اللغة! لكن مرهق جدًا عندما تحاول فقط العثور على حمام.
-
-- **البرمجة عالية المستوى** تشبه وجود ذلك الصديق المحلي الرائع الذي يفهمك تمامًا. يمكنك أن تقول "أحتاج حقًا إلى العثور على حمام" باللغة الإنجليزية العادية، وهم يتعاملون مع كل الترجمة الثقافية ويعطونك الاتجاهات بطريقة منطقية لعقلك غير المحلي.
-
-في مصطلحات البرمجة:
-- **اللغات منخفضة المستوى** (مثل Assembly أو C) تتيح لك إجراء محادثات مفصلة للغاية مع أجهزة الكمبيوتر، لكنك تحتاج إلى التفكير مثل الآلة، وهو... حسنًا، دعنا نقول إنه تغيير عقلي كبير!
-- **اللغات عالية المستوى** (مثل JavaScript، Python، أو C#) تتيح لك التفكير مثل الإنسان بينما تتعامل هي مع كل لغة الآلة خلف الكواليس. بالإضافة إلى ذلك، لديها مجتمعات مرحبة مليئة بالأشخاص الذين يتذكرون كيف كان الأمر عندما كانوا مبتدئين ويريدون حقًا مساعدتك!
-
-تخمين أي منها سأقترح عليك أن تبدأ به؟ 😉 اللغات عالية المستوى تشبه وجود عجلات تدريب لا تريد أبدًا إزالتها لأنها تجعل التجربة بأكملها أكثر متعة!
+حسنًا، هذا كان المفهوم الذي أربك عقلي عندما بدأت التعلم لأول مرة، لذا سأشاركك التشبيه الذي جعلني أفهمه أخيرًا – وأتمنى أن يساعدك أيضًا!
+
+تخيل أنك تزور بلدًا لا تتحدث لغته، وتحتاج بشدة إلى العثور على أقرب حمام (كلنا مررنا بهذا، أليس كذلك؟ 😅):
+
+- **البرمجة منخفضة المستوى** تشبه تعلم اللهجة المحلية بشكل جيد جدًا بحيث يمكنك التحدث مع الجدة التي تبيع الفاكهة في الزاوية باستخدام إشارات ثقافية، وعبارات محلية، ونكات داخلية لا يفهمها إلا من نشأ هناك. مثير للإعجاب للغاية وفعال جدًا... إذا كنت تتحدث بطلاقة! ولكن قد يكون الأمر مربكًا جدًا عندما تحاول فقط العثور على حمام.
+
+- **البرمجة عالية المستوى** تشبه وجود ذلك الصديق المحلي الرائع الذي يفهمك تمامًا. يمكنك أن تقول "أنا بحاجة ماسة للعثور على حمام" بلغة بسيطة، وهم يتولون كل الترجمة الثقافية ويعطونك الاتجاهات بطريقة منطقية لعقلك غير المحلي.
+
+بمصطلحات البرمجة:
+- **اللغات منخفضة المستوى** (مثل Assembly أو C) تتيح لك إجراء محادثات مفصلة للغاية مع الأجهزة الفعلية للكمبيوتر، ولكن عليك التفكير مثل الآلة، وهو... حسنًا، دعنا نقول إنه تغيير عقلي كبير!
+- **اللغات عالية المستوى** (مثل JavaScript، Python، أو C#) تتيح لك التفكير كإنسان بينما تتولى هي كل الحديث بلغة الآلة خلف الكواليس. بالإضافة إلى ذلك، لديها مجتمعات مرحبة مليئة بأشخاص يتذكرون كيف كان الأمر عندما كانوا مبتدئين ويريدون حقًا مساعدتك!
+
+تخيل أي منها سأقترح عليك أن تبدأ به؟ 😉 اللغات عالية المستوى تشبه وجود عجلات تدريب لا تريد أبدًا إزالتها لأنها تجعل التجربة بأكملها أكثر متعة!
+
+```mermaid
+flowchart TB
+    A["👤 Human Thought:<br/>'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level}
+    
+    B -->|High-Level| C["🌟 JavaScript/Python<br/>Easy to read and write"]
+    B -->|Low-Level| D["⚙️ Assembly/C<br/>Direct hardware control"]
+    
+    C --> E["📝 Write: fibonacci(10)"]
+    D --> F["📝 Write: mov r0,#00<br/>sub r0,r0,#01"]
+    
+    E --> G["🤖 Computer Understanding:<br/>Translator handles complexity"]
+    F --> G
+    
+    G --> H["💻 Same Result:<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
+    
+    style C fill:#e1f5fe
+    style D fill:#fff3e0
+    style H fill:#e8f5e8
+```
 
 ### دعني أريك لماذا اللغات عالية المستوى أكثر ودية
 
-حسنًا، سأريك شيئًا يوضح تمامًا لماذا وقعت في حب اللغات عالية المستوى، لكن أولاً – أحتاجك أن تعدني بشيء. عندما ترى المثال الأول للكود، لا تفزع! من المفترض أن يبدو مخيفًا. هذا هو النقطة التي أريد توضيحها!
+حسنًا، سأريك شيئًا يوضح تمامًا لماذا وقعت في حب اللغات عالية المستوى، ولكن أولاً – أحتاجك أن تعدني بشيء. عندما ترى المثال الأول للكود، لا تفزع! من المفترض أن يبدو مخيفًا. هذا هو النقطة التي أريد توضيحها!
 
-سننظر إلى نفس المهمة مكتوبة بأسلوبين مختلفين تمامًا. كلاهما ينشئ ما يسمى تسلسل فيبوناتشي – إنه نمط رياضي جميل حيث كل رقم هو مجموع الرقمين السابقين له: 0، 1، 1، 2، 3، 5، 8، 13... (معلومة ممتعة: ستجد هذا النمط في كل مكان في الطبيعة – دوامات بذور عباد الشمس، أنماط أكواز الصنوبر، حتى طريقة تشكيل المجرات!)
+سننظر إلى نفس المهمة مكتوبة بأسلوبين مختلفين تمامًا. كلاهما ينشئ ما يسمى تسلسل فيبوناتشي – إنه نمط رياضي جميل حيث كل رقم هو مجموع الرقمين السابقين: 0، 1، 1، 2، 3، 5، 8، 13... (معلومة ممتعة: ستجد هذا النمط في كل مكان في الطبيعة – دوامات بذور عباد الشمس، أنماط مخروط الصنوبر، وحتى طريقة تشكل المجرات!)
 
-مستعد لرؤية الفرق؟ لنبدأ!
+جاهز لرؤية الفرق؟ لنبدأ!
 
 **لغة عالية المستوى (JavaScript) – صديقة للإنسان:**
 
@@ -109,10 +195,10 @@ console.log('Fibonacci sequence:');
 ```
 
 **ما يفعله هذا الكود:**
-- **تعريف** ثابت لتحديد عدد أرقام فيبوناتشي التي نريد إنشاؤها
+- **تعريف** ثابت لتحديد عدد أرقام فيبوناتشي التي نريد إنشائها
 - **تهيئة** متغيرين لتتبع الرقم الحالي والرقم التالي في التسلسل
-- **إعداد** القيم الابتدائية (0 و1) التي تحدد نمط فيبوناتشي
-- **عرض** رسالة رأسية لتحديد الناتج الخاص بنا
+- **إعداد** القيم الأولية (0 و1) التي تحدد نمط فيبوناتشي
+- **عرض** رسالة تعريفية لتحديد الناتج
 
 ```javascript
 // Step 2: Generate the sequence with a loop
@@ -129,7 +215,7 @@ for (let i = 0; i < fibonacciCount; i++) {
 **تفصيل ما يحدث هنا:**
 - **التكرار** عبر كل موقع في التسلسل باستخدام حلقة `for`
 - **عرض** كل رقم مع موقعه باستخدام تنسيق القالب النصي
-- **حساب** الرقم التالي في فيبوناتشي بإضافة القيم الحالية والتالية
+- **حساب** الرقم التالي في تسلسل فيبوناتشي بإضافة القيم الحالية والتالية
 - **تحديث** متغيرات التتبع للانتقال إلى التكرار التالي
 
 ```javascript
@@ -149,11 +235,11 @@ const fibSequence = generateFibonacci(10);
 console.log(fibSequence);
 ```
 
-**فيما سبق، قمنا بـ:**
-- **إنشاء** وظيفة قابلة لإعادة الاستخدام باستخدام صياغة السهم الحديثة
-- **بناء** مصفوفة لتخزين التسلسل الكامل بدلاً من العرض واحدًا تلو الآخر
+**في المثال أعلاه، قمنا بـ:**
+- **إنشاء** وظيفة قابلة لإعادة الاستخدام باستخدام صياغة وظيفة السهم الحديثة
+- **بناء** مصفوفة لتخزين التسلسل الكامل بدلاً من عرضه رقمًا برقم
 - **استخدام** فهرسة المصفوفة لحساب كل رقم جديد من القيم السابقة
-- **إرجاع** التسلسل الكامل للاستخدام المرن في أجزاء أخرى من البرنامج
+- **إرجاع** التسلسل الكامل لاستخدامه بشكل مرن في أجزاء أخرى من البرنامج
 
 **لغة منخفضة المستوى (ARM Assembly) – صديقة للكمبيوتر:**
 
@@ -182,20 +268,21 @@ back add r0,r1
  end
 ```
 
-لاحظ كيف أن نسخة JavaScript تقرأ تقريبًا كتعليمات باللغة الإنجليزية، بينما تستخدم نسخة Assembly أوامر غامضة تتحكم مباشرة في معالج الكمبيوتر. كلاهما ينجز نفس المهمة، لكن اللغة عالية المستوى أسهل بكثير لفهم البشر وكتابتها وصيانتها.
+لاحظ كيف أن نسخة JavaScript تُقرأ تقريبًا كتعليمات باللغة الإنجليزية، بينما تستخدم نسخة Assembly أوامر غامضة تتحكم مباشرة في معالج الكمبيوتر. كلاهما ينجز نفس المهمة، لكن اللغة عالية المستوى أسهل بكثير للفهم والكتابة والصيانة.
 
 **الاختلافات الرئيسية التي ستلاحظها:**
-- **الوضوح**: JavaScript تستخدم أسماء وصفية مثل `fibonacciCount` بينما Assembly تستخدم تسميات غامضة مثل `r0`، `r1`
-- **التعليقات**: اللغات عالية المستوى تشجع على التعليقات التوضيحية التي تجعل الكود ذاتي التوثيق
-- **الهيكل**: تدفق JavaScript المنطقي يتطابق مع كيفية تفكير البشر في المشكلات خطوة بخطوة
-- **الصيانة**: تحديث نسخة JavaScript لمتطلبات مختلفة أمر بسيط وواضح
-✅ **عن سلسلة فيبوناتشي**: هذا النمط الرقمي الرائع (حيث يساوي كل رقم مجموع الرقمين السابقين: 0، 1، 1، 2، 3، 5، 8...) يظهر حرفيًا *في كل مكان* في الطبيعة! ستجده في دوامات عباد الشمس، أنماط أكواز الصنوبر، طريقة انحناء أصداف النوتيلوس، وحتى في كيفية نمو فروع الأشجار. إنه أمر مذهل كيف يمكن للرياضيات والبرمجة مساعدتنا في فهم وإعادة إنشاء الأنماط التي تستخدمها الطبيعة لخلق الجمال!
+- **الوضوح**: JavaScript تستخدم أسماء وصفية مثل `fibonacciCount` بينما Assembly تستخدم تسميات غامضة مثل `r0`, `r1`
+- **التعليقات**: اللغات عالية المستوى تشجع على كتابة تعليقات توضيحية تجعل الكود واضحًا وسهل الفهم.
+- **الهيكل**: التدفق المنطقي للغة JavaScript يتماشى مع الطريقة التي يفكر بها البشر في حل المشكلات خطوة بخطوة.
+- **الصيانة**: تحديث إصدار JavaScript لتلبية متطلبات مختلفة أمر بسيط وواضح.
+
+✅ **حول تسلسل فيبوناتشي**: هذا النمط الرقمي الرائع (حيث يساوي كل رقم مجموع الرقمين السابقين له: 0، 1، 1، 2، 3، 5، 8...) يظهر حرفيًا *في كل مكان* في الطبيعة! ستجده في دوامات عباد الشمس، أنماط أكواز الصنوبر، طريقة انحناء أصداف النوتيلوس، وحتى في كيفية نمو فروع الأشجار. إنه أمر مذهل كيف يمكن للرياضيات والبرمجة مساعدتنا في فهم وإعادة إنشاء الأنماط التي تستخدمها الطبيعة لخلق الجمال!
 
 ## اللبنات الأساسية التي تصنع السحر
 
-حسنًا، الآن بعد أن رأيت كيف تبدو لغات البرمجة أثناء العمل، دعنا نحلل العناصر الأساسية التي تشكل كل برنامج تم كتابته على الإطلاق. فكر في هذه العناصر كالمكونات الأساسية لوصفتك المفضلة – بمجرد أن تفهم ما يفعله كل عنصر، ستتمكن من قراءة وكتابة الكود في أي لغة تقريبًا!
+حسنًا، الآن بعد أن رأيت كيف تبدو لغات البرمجة أثناء العمل، دعنا نحلل العناصر الأساسية التي تشكل كل برنامج تم كتابته على الإطلاق. فكر في هذه العناصر كالمكونات الأساسية لوصفتك المفضلة – بمجرد أن تفهم وظيفة كل منها، ستتمكن من قراءة وكتابة الكود في أي لغة تقريبًا!
 
-هذا يشبه تعلم قواعد البرمجة. تذكر عندما كنت في المدرسة وتعلمت عن الأسماء والأفعال وكيفية تكوين الجمل؟ البرمجة لها نسختها الخاصة من القواعد، وبصراحة، إنها أكثر منطقية وتسامحًا من قواعد اللغة الإنجليزية! 😄
+هذا يشبه تعلم قواعد البرمجة. تذكر عندما كنت في المدرسة وتعلمت عن الأسماء والأفعال وكيفية تكوين الجمل؟ البرمجة لديها نسختها الخاصة من القواعد، وبصراحة، إنها أكثر منطقية وتسامحًا من قواعد اللغة الإنجليزية! 😄
 
 ### العبارات: التعليمات خطوة بخطوة
 
@@ -227,13 +314,13 @@ document.body.style.backgroundColor = "lightblue";
 
 ### المتغيرات: نظام ذاكرة البرنامج الخاص بك
 
-حسنًا، **المتغيرات** هي واحدة من مفاهيمي المفضلة على الإطلاق للتدريس لأنها تشبه الأشياء التي تستخدمها بالفعل كل يوم!
+حسنًا، **المتغيرات** هي واحدة من مفاهيمي المفضلة للتدريس لأنها تشبه الأشياء التي تستخدمها بالفعل كل يوم!
 
-فكر في قائمة جهات الاتصال على هاتفك للحظة. أنت لا تحفظ أرقام الجميع – بدلاً من ذلك، تحفظ "أمي"، "أفضل صديق"، أو "مكان البيتزا الذي يوصل حتى الساعة 2 صباحًا" وتترك هاتفك يتذكر الأرقام الفعلية. المتغيرات تعمل بنفس الطريقة تمامًا! إنها مثل حاويات ذات علامات حيث يمكن لبرنامجك تخزين المعلومات واسترجاعها لاحقًا باستخدام اسم منطقي.
+فكر في قائمة جهات الاتصال على هاتفك للحظة. أنت لا تحفظ أرقام الجميع – بدلاً من ذلك، تحفظ "أمي"، "أفضل صديق"، أو "مطعم البيتزا الذي يوصل حتى الساعة 2 صباحًا" وتترك هاتفك يتذكر الأرقام الفعلية. المتغيرات تعمل بنفس الطريقة تمامًا! إنها مثل حاويات مُعلمة حيث يمكن لبرنامجك تخزين المعلومات واسترجاعها لاحقًا باستخدام اسم منطقي.
 
-ما هو رائع حقًا: يمكن أن تتغير المتغيرات أثناء تشغيل البرنامج (ومن هنا جاء اسم "متغير" – هل ترى ما فعلوه هنا؟). تمامًا كما قد تقوم بتحديث جهة اتصال مكان البيتزا عندما تكتشف مكانًا أفضل، يمكن تحديث المتغيرات عندما يتعلم برنامجك معلومات جديدة أو عندما تتغير الظروف!
+ما هو رائع حقًا: يمكن أن تتغير المتغيرات أثناء تشغيل البرنامج (ومن هنا جاء اسم "متغير" – هل ترى ما فعلوه هنا؟). تمامًا كما قد تقوم بتحديث جهة اتصال مطعم البيتزا عندما تكتشف مكانًا أفضل، يمكن تحديث المتغيرات عندما يتعلم برنامجك معلومات جديدة أو تتغير الظروف!
 
-دعني أريك كيف يمكن أن يكون هذا بسيطًا بشكل جميل:
+دعني أريك كيف يمكن أن يكون هذا بسيطًا وجميلًا:
 
 ```javascript
 // Step 1: Creating basic variables
@@ -245,8 +332,8 @@ let isRaining = false;
 
 **فهم هذه المفاهيم:**
 - **تخزين** القيم الثابتة في متغيرات `const` (مثل اسم الموقع)
-- **استخدام** `let` للقيم التي يمكن أن تتغير خلال البرنامج
-- **تعيين** أنواع بيانات مختلفة: النصوص، الأرقام، والقيم المنطقية (صحيح/خطأ)
+- **استخدام** `let` للقيم التي يمكن أن تتغير أثناء تشغيل البرنامج
+- **تعيين** أنواع بيانات مختلفة: نصوص، أرقام، وقيم منطقية (صحيح/خطأ)
 - **اختيار** أسماء وصفية تشرح ما يحتويه كل متغير
 
 ```javascript
@@ -260,8 +347,8 @@ const weatherData = {
 
 **في المثال أعلاه، قمنا بـ:**
 - **إنشاء** كائن لتجميع معلومات الطقس ذات الصلة معًا
-- **تنظيم** قطع متعددة من البيانات تحت اسم متغير واحد
-- **استخدام** أزواج المفتاح والقيمة لتسمية كل قطعة من المعلومات بوضوح
+- **تنظيم** عدة أجزاء من البيانات تحت اسم متغير واحد
+- **استخدام** أزواج المفتاح والقيمة لتسمية كل جزء من المعلومات بوضوح
 
 ```javascript
 // Step 3: Using and updating variables
@@ -273,11 +360,11 @@ currentWeather = "cloudy";
 temperature = 68;                          
 ```
 
-**لنقم بفهم كل جزء:**
+**دعنا نفهم كل جزء:**
 - **عرض** المعلومات باستخدام القوالب النصية مع صيغة `${}`
 - **الوصول** إلى خصائص الكائن باستخدام التدوين النقطي (`weatherData.windSpeed`)
 - **تحديث** المتغيرات المعلنة باستخدام `let` لتعكس الظروف المتغيرة
-- **دمج** متغيرات متعددة لإنشاء رسائل ذات معنى
+- **دمج** عدة متغيرات لإنشاء رسائل ذات معنى
 
 ```javascript
 // Step 4: Modern destructuring for cleaner code
@@ -286,7 +373,7 @@ console.log(`${location} humidity: ${humidity}%`);
 ```
 
 **ما تحتاج إلى معرفته:**
-- **استخراج** خصائص محددة من الكائنات باستخدام التعيين الهيكلي
+- **استخراج** خصائص محددة من الكائنات باستخدام التعيين التفكيكي
 - **إنشاء** متغيرات جديدة تلقائيًا بنفس أسماء مفاتيح الكائن
 - **تبسيط** الكود عن طريق تجنب التدوين النقطي المتكرر
 
@@ -296,7 +383,7 @@ console.log(`${location} humidity: ${humidity}%`);
 
 تخيل هذا: هذا الصباح ربما مررت بشيء مثل "إذا كان الجو ممطرًا، سأحمل مظلة. إذا كان الجو باردًا، سأرتدي معطفًا. إذا كنت متأخرًا، سأترك الإفطار وأحصل على قهوة في الطريق." عقلك يتبع هذه المنطقية الشرطية عشرات المرات كل يوم!
 
-هذا ما يجعل البرامج تبدو ذكية وحيوية بدلاً من مجرد اتباع نص ممل ومتوقع. يمكنها بالفعل النظر إلى موقف، تقييم ما يحدث، والاستجابة بشكل مناسب. إنه مثل إعطاء برنامجك عقلًا يمكنه التكيف واتخاذ الخيارات!
+هذا ما يجعل البرامج تبدو ذكية وحيوية بدلاً من مجرد اتباع نص ممل ومتوقع. يمكنها بالفعل النظر في الموقف، وتقييم ما يحدث، والاستجابة بشكل مناسب. إنه مثل إعطاء برنامجك عقلًا يمكنه التكيف واتخاذ الخيارات!
 
 هل تريد أن ترى كيف يعمل هذا بشكل جميل؟ دعني أريك:
 
@@ -333,8 +420,8 @@ if (userAge >= 18 && hasPermission) {
 ```
 
 **تفصيل ما يحدث هنا:**
-- **دمج** شروط متعددة باستخدام عامل `&&` (و)
-- **إنشاء** تسلسل هرمي للشروط باستخدام `else if` لسيناريوهات متعددة
+- **دمج** شروط متعددة باستخدام المشغل `&&` (و)
+- **إنشاء** تسلسل هرمي للشروط باستخدام `else if` لعدة سيناريوهات
 - **التعامل** مع جميع الحالات الممكنة باستخدام عبارة `else` النهائية
 - **تقديم** ملاحظات واضحة وقابلة للتنفيذ لكل حالة مختلفة
 
@@ -344,8 +431,8 @@ const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
 console.log(`Status: ${votingStatus}`);
 ```
 
-**ما تحتاج إلى تذكره:**
-- **استخدام** العامل الثلاثي (`? :`) للشروط ذات الخيارين البسيطين
+**ما يجب أن تتذكره:**
+- **استخدام** المشغل الثلاثي (`? :`) للشروط ذات الخيارين البسيطين
 - **كتابة** الشرط أولاً، متبوعًا بـ `?`، ثم النتيجة الصحيحة، ثم `:`، ثم النتيجة الخاطئة
 - **تطبيق** هذا النمط عندما تحتاج إلى تعيين قيم بناءً على الشروط
 
@@ -370,50 +457,87 @@ switch (dayOfWeek) {
 }
 ```
 
-**هذا الكود يحقق التالي:**
-- **مطابقة** قيمة المتغير مع حالات محددة متعددة
+**هذا الكود يحقق ما يلي:**
+- **مطابقة** قيمة المتغير مع عدة حالات محددة
 - **تجميع** الحالات المتشابهة معًا (أيام الأسبوع مقابل عطلات نهاية الأسبوع)
 - **تنفيذ** كتلة الكود المناسبة عند العثور على تطابق
 - **تضمين** حالة `default` للتعامل مع القيم غير المتوقعة
 - **استخدام** عبارات `break` لمنع الكود من الاستمرار إلى الحالة التالية
 
-> 💡 **تشبيه واقعي**: فكر في تدفق التحكم كأنك تمتلك نظام GPS الأكثر صبرًا في العالم يقدم لك التوجيهات. قد يقول "إذا كان هناك ازدحام في شارع الرئيسي، خذ الطريق السريع بدلاً من ذلك. إذا كان هناك بناء يحجب الطريق السريع، جرب الطريق ذو المناظر الخلابة." تستخدم البرامج نفس النوع من المنطق الشرطي للاستجابة بذكاء لمواقف مختلفة وتقديم أفضل تجربة ممكنة للمستخدمين.
+> 💡 **تشبيه واقعي**: فكر في تدفق التحكم كأنك تمتلك نظام GPS الأكثر صبرًا في العالم يقدم لك التوجيهات. قد يقول "إذا كان هناك ازدحام في شارع رئيسي، خذ الطريق السريع بدلاً من ذلك. إذا كان البناء يغلق الطريق السريع، جرب الطريق ذو المناظر الخلابة." البرامج تستخدم نفس النوع من المنطق الشرطي للاستجابة بذكاء لمواقف مختلفة وتقديم أفضل تجربة ممكنة للمستخدمين.
 
-✅ **ما القادم**: سنستمتع كثيرًا بالغوص أعمق في هذه المفاهيم بينما نواصل هذه الرحلة الرائعة معًا! الآن، ركز فقط على الشعور بالإثارة حول كل الإمكانيات المذهلة التي تنتظرك. المهارات والتقنيات المحددة ستترسخ بشكل طبيعي بينما نتدرب معًا – أعدك أن هذا سيكون أكثر متعة مما تتوقع!
+### 🎯 **اختبار المفاهيم: إتقان اللبنات الأساسية**
 
+**دعنا نرى كيف تسير الأمور مع الأساسيات:**
+- هل يمكنك شرح الفرق بين المتغير والعبارة بكلماتك الخاصة؟
+- فكر في سيناريو واقعي حيث ستستخدم قرارًا إذا-ثم (مثل مثال التصويت لدينا)
+- ما هو الشيء الذي فاجأك بشأن منطق البرمجة؟
 
-## أدوات العمل
-
-حسنًا، هذا هو الجزء الذي يجعلني متحمسًا لدرجة أنني بالكاد أستطيع التحكم في نفسي! 🚀 نحن على وشك الحديث عن الأدوات الرائعة التي ستجعلك تشعر وكأنك حصلت للتو على مفاتيح سفينة فضائية رقمية.
+**تعزيز سريع للثقة:**
+```mermaid
+flowchart LR
+    A["📝 Statements<br/>(Instructions)"] --> B["📦 Variables<br/>(Storage)"] --> C["🔀 Control Flow<br/>(Decisions)"] --> D["🎉 Working Program!"]
+    
+    style A fill:#ffeb3b
+    style B fill:#4caf50
+    style C fill:#2196f3
+    style D fill:#ff4081
+```
 
-تعرف كيف يمتلك الطاهي تلك السكاكين المتوازنة تمامًا التي تبدو وكأنها امتداد لأيديهم؟ أو كيف يمتلك الموسيقي تلك الجيتار التي تبدو وكأنها تغني بمجرد لمسها؟ حسنًا، المطورون لديهم نسختهم الخاصة من هذه الأدوات السحرية، وهنا ما سيذهلك تمامًا – معظمها مجاني تمامًا!
+✅ **ما القادم**: سنستمتع كثيرًا بالغوص أعمق في هذه المفاهيم بينما نواصل هذه الرحلة الرائعة معًا! الآن، ركز فقط على الشعور بالإثارة بشأن كل الإمكانيات المذهلة التي تنتظرك. المهارات والتقنيات المحددة ستترسخ بشكل طبيعي مع الممارسة – أعدك أن هذا سيكون أكثر متعة مما تتوقع!
 
-أنا متحمس جدًا لمشاركة هذه الأدوات معك لأنها غيرت تمامًا طريقة بناء البرمجيات. نحن نتحدث عن مساعدي البرمجة المدعومين بالذكاء الاصطناعي الذين يمكنهم المساعدة في كتابة الكود (أنا لا أمزح!)، بيئات السحابة حيث يمكنك بناء تطبيقات كاملة من أي مكان مع اتصال واي فاي، وأدوات تصحيح الأخطاء متطورة جدًا لدرجة أنها تشبه امتلاك رؤية بالأشعة السينية لبرامجك.
+## أدوات العمل
 
-وهنا الجزء الذي لا يزال يجعلني أشعر بالقشعريرة: هذه ليست "أدوات للمبتدئين" التي ستتجاوزها. هذه هي نفس الأدوات الاحترافية التي يستخدمها المطورون في Google وNetflix واستوديوهات التطبيقات المستقلة التي تحبها في هذه اللحظة. ستشعر وكأنك محترف حقيقي أثناء استخدامها!
+حسنًا، هذا هو الجزء الذي يجعلني متحمسًا لدرجة أنني بالكاد أستطيع التحكم في نفسي! 🚀 نحن على وشك الحديث عن الأدوات الرائعة التي ستجعلك تشعر وكأنك حصلت للتو على مفاتيح سفينة فضائية رقمية.
 
+تعرف كيف يمتلك الطاهي تلك السكاكين المتوازنة تمامًا التي تبدو وكأنها امتداد لأيديهم؟ أو كيف يمتلك الموسيقي تلك الجيتار التي تبدو وكأنها تغني بمجرد لمسها؟ حسنًا، المطورون لديهم نسختهم الخاصة من هذه الأدوات السحرية، وإليك ما سيذهلك تمامًا – معظمها مجاني تمامًا!
+
+أنا تقريبًا أقفز من الكرسي وأنا أفكر في مشاركة هذه الأدوات معك لأنها أحدثت ثورة كاملة في كيفية بناء البرمجيات. نحن نتحدث عن مساعدات برمجية مدعومة بالذكاء الاصطناعي يمكنها المساعدة في كتابة الكود الخاص بك (لست أمزح!)، بيئات سحابية حيث يمكنك بناء تطبيقات كاملة من أي مكان به اتصال واي فاي، وأدوات تصحيح الأخطاء متطورة لدرجة أنها تشبه امتلاك رؤية بالأشعة السينية لبرامجك.
+
+وهنا الجزء الذي لا يزال يجعلني أشعر بالقشعريرة: هذه ليست "أدوات للمبتدئين" التي ستتجاوزها. هذه هي نفس الأدوات الاحترافية التي يستخدمها المطورون في Google وNetflix واستوديو التطبيقات المستقل الذي تحبه في هذه اللحظة بالذات. ستشعر وكأنك محترف تمامًا أثناء استخدامها!
+
+```mermaid
+graph TD
+    A["💡 Your Idea"] --> B["⌨️ Code Editor<br/>(VS Code)"] 
+    B --> C["🌐 Browser DevTools<br/>(Testing & Debugging)"]
+    C --> D["⚡ Command Line<br/>(Automation & Tools)"]
+    D --> E["📚 Documentation<br/>(Learning & Reference)"]
+    E --> F["🚀 Amazing Web App!"]
+    
+    B -.-> G["🤖 AI Assistant<br/>(GitHub Copilot)"]
+    C -.-> H["📱 Device Testing<br/>(Responsive Design)"]
+    D -.-> I["📦 Package Managers<br/>(npm, yarn)"]
+    E -.-> J["👥 Community<br/>(Stack Overflow)"]
+    
+    style A fill:#fff59d
+    style F fill:#c8e6c9
+    style G fill:#e1f5fe
+    style H fill:#f3e5f5
+    style I fill:#ffccbc
+    style J fill:#e8eaf6
+```
 
 ### محررات الكود وبيئات التطوير المتكاملة: أصدقاؤك الرقميون الجدد
 
-دعنا نتحدث عن محررات الكود – هذه ستصبح حقًا أماكنك المفضلة للتواجد! فكر فيها كملاذك الشخصي للبرمجة حيث ستقضي معظم وقتك في صياغة وإتقان إبداعاتك الرقمية.
+دعنا نتحدث عن محررات الكود – هذه ستصبح حقًا أماكنك المفضلة الجديدة! فكر فيها كملاذك الشخصي للبرمجة حيث ستقضي معظم وقتك في صياغة وإتقان إبداعاتك الرقمية.
 
-لكن هنا ما هو سحري تمامًا بشأن المحررات الحديثة: إنها ليست مجرد محررات نصوص فاخرة. إنها مثل وجود أفضل مرشد برمجة بجانبك على مدار الساعة طوال أيام الأسبوع. إنها تلتقط أخطائك الإملائية قبل أن تلاحظها، تقترح تحسينات تجعلك تبدو وكأنك عبقري، تساعدك على فهم ما يفعله كل جزء من الكود، وبعضها يمكنه حتى التنبؤ بما ستكتبه وتعرض إنهاء أفكارك!
+لكن إليك ما هو سحري تمامًا بشأن المحررات الحديثة: إنها ليست مجرد محررات نصوص فاخرة. إنها مثل وجود أفضل مرشد برمجة بجانبك على مدار الساعة طوال أيام الأسبوع. إنها تلتقط أخطائك الإملائية قبل أن تلاحظها، تقترح تحسينات تجعلك تبدو كعبقري، تساعدك على فهم ما يفعله كل جزء من الكود، وبعضها يمكنه حتى التنبؤ بما ستكتبه وتقديم اقتراحات لإكمال أفكارك!
 
-أتذكر عندما اكتشفت الإكمال التلقائي لأول مرة – شعرت حرفيًا وكأنني أعيش في المستقبل. تبدأ بكتابة شيء، ويقول محررك، "مرحبًا، هل كنت تفكر في هذه الوظيفة التي تفعل بالضبط ما تحتاجه؟" إنه مثل وجود قارئ أفكار كرفيق برمجة!
+أتذكر عندما اكتشفت الإكمال التلقائي لأول مرة – شعرت حرفيًا وكأنني أعيش في المستقبل. تبدأ بكتابة شيء، ومحررك يقول، "مرحبًا، هل كنت تفكر في هذه الوظيفة التي تفعل بالضبط ما تحتاجه؟" إنه مثل وجود قارئ أفكار كرفيق برمجة!
 
 **ما الذي يجعل هذه المحررات مذهلة للغاية؟**
 
-محررات الكود الحديثة تقدم مجموعة مذهلة من الميزات المصممة لتعزيز إنتاجيتك:
+محررات الكود الحديثة تقدم مجموعة رائعة من الميزات المصممة لتعزيز إنتاجيتك:
 
 | الميزة | ما تفعله | لماذا تساعد |
-|--------|----------|-------------|
+|---------|--------------|--------------|
 | **تمييز الصياغة** | تلوين أجزاء مختلفة من الكود | يجعل الكود أسهل للقراءة واكتشاف الأخطاء |
-| **الإكمال التلقائي** | اقتراح الكود أثناء الكتابة | يسرع البرمجة ويقلل الأخطاء الإملائية |
+| **الإكمال التلقائي** | اقتراح الكود أثناء الكتابة | يسرع البرمجة ويقلل الأخطاء |
 | **أدوات التصحيح** | تساعدك على العثور على الأخطاء وإصلاحها | توفر ساعات من وقت استكشاف الأخطاء |
 | **الإضافات** | إضافة ميزات متخصصة | تخصيص المحرر لأي تقنية |
-| **مساعدي الذكاء الاصطناعي** | اقتراح الكود والتفسيرات | تسريع التعلم والإنتاجية |
+| **مساعدات الذكاء الاصطناعي** | اقتراح الكود والتفسيرات | تسريع التعلم والإنتاجية |
 
-> 🎥 **مصدر فيديو**: هل تريد رؤية هذه الأدوات أثناء العمل؟ تحقق من [فيديو أدوات العمل](https://youtube.com/watch?v=69WJeXGBdxg) للحصول على نظرة شاملة.
+> 🎥 **مصدر فيديو**: هل تريد رؤية هذه الأدوات أثناء العمل؟ تحقق من هذا [فيديو أدوات العمل](https://youtube.com/watch?v=69WJeXGBdxg) للحصول على نظرة شاملة.
 
 #### المحررات الموصى بها لتطوير الويب
 
@@ -421,7 +545,7 @@ switch (dayOfWeek) {
 - الأكثر شعبية بين مطوري الويب
 - نظام إضافات ممتاز
 - محطة مدمجة وتكامل Git
-- **الإضافات الضرورية**:
+- **الإضافات التي يجب أن تمتلكها**:
   - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - اقتراحات الكود المدعومة بالذكاء الاصطناعي
   - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - التعاون في الوقت الفعلي
   - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - تنسيق الكود تلقائيًا
@@ -437,52 +561,50 @@ switch (dayOfWeek) {
 - [Replit](https://replit.com/) - رائع للتعلم ومشاركة الكود
 - [StackBlitz](https://stackblitz.com/) - تطوير ويب كامل وفوري
 
-> 💡 **نصيحة للبدء**: ابدأ بـ Visual Studio Code – إنه مجاني، مستخدم على نطاق واسع في الصناعة، وله مجتمع ضخم يقدم دروسًا وإضافات مفيدة.
-
+> 💡 **نصيحة للبدء**: ابدأ بـ Visual Studio Code – إنه مجاني، يستخدم على نطاق واسع في الصناعة، ولديه مجتمع ضخم يقدم دروسًا وإضافات مفيدة.
 
-### متصفحات الويب: مختبرك السري للتطوير
+### متصفحات الويب: مختبرك السري لتطوير البرمجيات
 
-حسنًا، استعد لتكون مذهولًا تمامًا! تعرف كيف كنت تستخدم المتصفحات لتصفح وسائل التواصل الاجتماعي ومشاهدة الفيديوهات؟ حسنًا، اتضح أنها كانت تخفي مختبرًا سريًا مذهلًا للمطورين طوال الوقت، فقط في انتظارك لاكتشافه!
+حسنًا، استعد لتفاجأ تمامًا! هل تعلم كيف كنت تستخدم المتصفحات لتصفح وسائل التواصل الاجتماعي ومشاهدة الفيديوهات؟ حسنًا، اتضح أنها كانت تخفي مختبرًا سريًا للمطورين مذهلًا طوال الوقت، فقط في انتظار أن تكتشفه!
 
-كل مرة تنقر بزر الماوس الأيمن على صفحة ويب وتختار "Inspect Element"، فإنك تفتح عالمًا مخفيًا من أدوات المطورين التي هي بصراحة أكثر قوة من بعض البرامج المكلفة التي كنت أدفع مئات الدولارات للحصول عليها. إنه مثل اكتشاف أن مطبخك العادي كان يخفي مختبرًا للطهاة المحترفين خلف لوحة سرية!
+كل مرة تنقر بزر الفأرة الأيمن على صفحة ويب وتختار "Inspect Element"، فإنك تفتح عالمًا مخفيًا من أدوات المطورين التي هي بصراحة أكثر قوة من بعض البرامج المكلفة التي كنت أدفع مئات الدولارات للحصول عليها. إنه مثل اكتشاف أن مطبخك العادي كان يخفي مختبرًا للطهاة المحترفين خلف لوحة سرية!
+أول مرة أظهر لي أحدهم أدوات المطور في المتصفح، قضيت حوالي ثلاث ساعات فقط أضغط هنا وهناك وأقول: "انتظر، هل يمكنها فعل ذلك أيضًا؟!" يمكنك حرفيًا تعديل أي موقع في الوقت الفعلي، رؤية مدى سرعة تحميل كل شيء، اختبار كيف يبدو موقعك على أجهزة مختلفة، وحتى تصحيح أخطاء JavaScript مثل محترف حقيقي. إنه أمر مذهل للغاية!
 
-أول مرة أظهر لي أحدهم أدوات المطور في المتصفح، قضيت حوالي ثلاث ساعات فقط أنقر وأقول "انتظر، يمكنه فعل ذلك أيضًا؟!" يمكنك حرفيًا تعديل أي موقع في الوقت الفعلي، رؤية مدى سرعة تحميل كل شيء، اختبار كيف يبدو موقعك على أجهزة مختلفة، وحتى تصحيح JavaScript مثل محترف حقيقي. إنه مذهل تمامًا!
-
-**لماذا المتصفحات هي سلاحك السري:**
+**إليك لماذا المتصفحات هي سلاحك السري:**
 
 عندما تنشئ موقعًا أو تطبيقًا ويب، تحتاج إلى رؤية كيف يبدو ويتصرف في العالم الحقيقي. المتصفحات لا تعرض عملك فقط، بل تقدم أيضًا ملاحظات تفصيلية حول الأداء، إمكانية الوصول، والمشكلات المحتملة.
 
 #### أدوات المطور في المتصفح (DevTools)
 
-المتصفحات الحديثة تحتوي على مجموعات تطوير شاملة:
+تتضمن المتصفحات الحديثة مجموعات تطوير شاملة:
 
-| فئة الأدوات | ما تفعله | مثال على الاستخدام |
-|-------------|----------|--------------------|
+| فئة الأداة | ما تقوم به | مثال على الاستخدام |
+|------------|------------|--------------------|
 | **مفتش العناصر** | عرض وتعديل HTML/CSS في الوقت الفعلي | تعديل التصميم لرؤية النتائج فورًا |
-| **وحدة التحكم (Console)** | عرض رسائل الخطأ واختبار JavaScript | تصحيح المشكلات وتجربة الأكواد |
-| **مراقب الشبكة (Network Monitor)** | تتبع كيفية تحميل الموارد | تحسين الأداء وأوقات التحميل |
-| **مدقق الوصول (Accessibility Checker)** | اختبار التصميم الشامل | ضمان عمل موقعك لجميع المستخدمين |
-| **محاكي الأجهزة (Device Simulator)** | معاينة على أحجام شاشات مختلفة | اختبار التصميم المتجاوب دون الحاجة إلى أجهزة متعددة |
+| **الكونسول** | عرض رسائل الخطأ واختبار JavaScript | تصحيح المشكلات وتجربة الكود |
+| **مراقب الشبكة** | تتبع كيفية تحميل الموارد | تحسين الأداء وأوقات التحميل |
+| **مدقق إمكانية الوصول** | اختبار التصميم الشامل | ضمان عمل موقعك لجميع المستخدمين |
+| **محاكي الأجهزة** | معاينة على أحجام شاشات مختلفة | اختبار التصميم المتجاوب دون الحاجة إلى أجهزة متعددة |
 
 #### المتصفحات الموصى بها للتطوير
 
-- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - أدوات تطوير قياسية مع توثيق واسع النطاق
+- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - أدوات DevTools معيار الصناعة مع وثائق شاملة
 - **[Firefox](https://developer.mozilla.org/docs/Tools)** - أدوات ممتازة لشبكة CSS وإمكانية الوصول
 - **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - مبني على Chromium مع موارد تطوير من Microsoft
 
-> ⚠️ **نصيحة مهمة للاختبار**: قم دائمًا باختبار مواقعك على متصفحات متعددة! ما يعمل بشكل مثالي في Chrome قد يبدو مختلفًا في Safari أو Firefox. المطورون المحترفون يختبرون عبر جميع المتصفحات الرئيسية لضمان تجربة مستخدم متسقة.
+> ⚠️ **نصيحة اختبار مهمة**: اختبر دائمًا مواقعك في متصفحات متعددة! ما يعمل بشكل مثالي في Chrome قد يبدو مختلفًا في Safari أو Firefox. المطورون المحترفون يختبرون عبر جميع المتصفحات الرئيسية لضمان تجربة مستخدم متسقة.
 
 ### أدوات سطر الأوامر: بوابتك إلى قوى المطور الخارقة
 
-حسنًا، دعونا نكون صادقين تمامًا هنا بشأن سطر الأوامر، لأنني أريدك أن تسمع هذا من شخص يفهمه حقًا. عندما رأيته لأول مرة – مجرد شاشة سوداء مخيفة مع نص يومض – فكرت حرفيًا، "لا، بالتأكيد لا! يبدو هذا وكأنه شيء من فيلم هاكرز من الثمانينيات، وأنا بالتأكيد لست ذكيًا بما يكفي لهذا!" 😅
+حسنًا، دعونا نكون صادقين تمامًا هنا بشأن سطر الأوامر، لأنني أريدك أن تسمع هذا من شخص يفهم الأمر حقًا. عندما رأيته لأول مرة – مجرد شاشة سوداء مخيفة مع نص يومض – فكرت حرفيًا: "لا، بالتأكيد لا! يبدو هذا وكأنه شيء من فيلم هاكرز في الثمانينيات، وأنا بالتأكيد لست ذكيًا بما يكفي لهذا!" 😅
 
-لكن إليك ما كنت أتمنى أن يخبرني به أحد في ذلك الوقت، وما أقوله لك الآن: سطر الأوامر ليس مخيفًا – إنه في الواقع مثل إجراء محادثة مباشرة مع جهاز الكمبيوتر الخاص بك. فكر فيه كالفارق بين طلب الطعام عبر تطبيق فاخر مع صور وقوائم (وهو أمر لطيف وسهل) مقابل الذهاب إلى مطعمك المحلي المفضل حيث يعرف الطاهي بالضبط ما تحب ويمكنه إعداد شيء مثالي بمجرد أن تقول "فاجئني بشيء رائع."
+لكن إليك ما كنت أتمنى أن يخبرني به أحدهم حينها، وما سأخبرك به الآن: سطر الأوامر ليس مخيفًا – إنه في الواقع مثل إجراء محادثة مباشرة مع جهاز الكمبيوتر الخاص بك. فكر فيه كأنه الفرق بين طلب الطعام عبر تطبيق فاخر مع صور وقوائم (وهو لطيف وسهل) مقابل الدخول إلى مطعمك المحلي المفضل حيث يعرف الطاهي بالضبط ما تحب ويمكنه إعداد شيء مثالي بمجرد أن تقول "فاجئني بشيء رائع."
 
-سطر الأوامر هو المكان الذي يذهب إليه المطورون ليشعروا وكأنهم سحرة حقيقيون. تكتب بضع كلمات تبدو سحرية (حسنًا، إنها مجرد أوامر، لكنها تبدو سحرية!)، تضغط على Enter، وها أنت ذا – لقد أنشأت هيكل مشروع كامل، أو قمت بتثبيت أدوات قوية من جميع أنحاء العالم، أو نشرت تطبيقك على الإنترنت ليشاهده الملايين. بمجرد أن تتذوق هذه القوة لأول مرة، يصبح الأمر إدمانيًا بصراحة!
+سطر الأوامر هو المكان الذي يذهب إليه المطورون ليشعروا وكأنهم سحرة حقيقيون. تكتب بضع كلمات تبدو سحرية (حسنًا، إنها مجرد أوامر، لكنها تبدو سحرية!)، تضغط على Enter، وبوم – لقد أنشأت هياكل مشاريع كاملة، قمت بتثبيت أدوات قوية من جميع أنحاء العالم، أو نشرت تطبيقك على الإنترنت ليشاهده الملايين. بمجرد أن تحصل على أول طعم لهذه القوة، يصبح الأمر إدمانًا بصراحة!
 
 **لماذا سيصبح سطر الأوامر أداتك المفضلة:**
 
-بينما تعد الواجهات الرسومية رائعة للعديد من المهام، يتفوق سطر الأوامر في الأتمتة والدقة والسرعة. تعمل العديد من أدوات التطوير بشكل أساسي من خلال واجهات سطر الأوامر، وتعلم استخدامها بكفاءة يمكن أن يحسن إنتاجيتك بشكل كبير.
+بينما تعتبر الواجهات الرسومية رائعة للعديد من المهام، يتفوق سطر الأوامر في الأتمتة، الدقة، والسرعة. تعمل العديد من أدوات التطوير بشكل أساسي من خلال واجهات سطر الأوامر، وتعلم استخدامها بكفاءة يمكن أن يحسن إنتاجيتك بشكل كبير.
 
 ```bash
 # Step 1: Create and navigate to project directory
@@ -491,7 +613,7 @@ cd my-awesome-website
 ```
 
 **ما يفعله هذا الكود:**
-- **إنشاء** دليل جديد باسم "my-awesome-website" لمشروعك
+- **إنشاء** دليل جديد يسمى "my-awesome-website" لمشروعك
 - **التنقل** إلى الدليل الذي تم إنشاؤه حديثًا لبدء العمل
 
 ```bash
@@ -504,10 +626,10 @@ npm install --save-dev @eslint/js
 ```
 
 **خطوة بخطوة، ما يحدث هنا:**
-- **تهيئة** مشروع جديد لـ Node.js بإعدادات افتراضية باستخدام `npm init -y`
+- **تهيئة** مشروع Node.js جديد بإعدادات افتراضية باستخدام `npm init -y`
 - **تثبيت** Vite كأداة بناء حديثة للتطوير السريع وبناء الإنتاج
-- **إضافة** Prettier لتنسيق الأكواد تلقائيًا وESLint لفحص جودة الأكواد
-- **استخدام** العلامة `--save-dev` لتحديد هذه الأدوات كاعتماديات خاصة بالتطوير فقط
+- **إضافة** Prettier لتنسيق الكود تلقائيًا وESLint لفحص جودة الكود
+- **استخدام** العلامة `--save-dev` لتحديد هذه كاعتماديات خاصة بالتطوير فقط
 
 ```bash
 # Step 3: Create project structure and files
@@ -518,85 +640,105 @@ echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello Wo
 npx vite
 ```
 
-**في المثال أعلاه، قمنا بـ:**
+**في ما سبق، قمنا بـ:**
 - **تنظيم** مشروعنا بإنشاء مجلدات منفصلة للكود المصدري والموارد
-- **إنشاء** ملف HTML أساسي مع هيكل وثيقة صحيح
-- **تشغيل** خادم تطوير Vite لإعادة التحميل المباشر واستبدال الوحدات الساخنة
+- **إنشاء** ملف HTML أساسي مع هيكل وثيقة مناسب
+- **بدء** خادم تطوير Vite لإعادة التحميل المباشر واستبدال الوحدات الساخنة
 
 #### أدوات سطر الأوامر الأساسية لتطوير الويب
 
 | الأداة | الغرض | لماذا تحتاجها |
-|-------|-------|---------------|
-| **[Git](https://git-scm.com/)** | التحكم في الإصدارات | تتبع التغييرات، التعاون مع الآخرين، نسخ عملك احتياطيًا |
+|--------|-------|---------------|
+| **[Git](https://git-scm.com/)** | التحكم في الإصدارات | تتبع التغييرات، التعاون مع الآخرين، نسخ احتياطي لعملك |
 | **[Node.js & npm](https://nodejs.org/)** | بيئة تشغيل JavaScript وإدارة الحزم | تشغيل JavaScript خارج المتصفحات، تثبيت أدوات التطوير الحديثة |
 | **[Vite](https://vitejs.dev/)** | أداة بناء وخادم تطوير | تطوير سريع للغاية مع استبدال الوحدات الساخنة |
-| **[ESLint](https://eslint.org/)** | جودة الأكواد | العثور على المشكلات في JavaScript وإصلاحها تلقائيًا |
-| **[Prettier](https://prettier.io/)** | تنسيق الأكواد | الحفاظ على تنسيق الأكواد بشكل متسق وقابل للقراءة |
+| **[ESLint](https://eslint.org/)** | جودة الكود | العثور على المشكلات في JavaScript وإصلاحها تلقائيًا |
+| **[Prettier](https://prettier.io/)** | تنسيق الكود | الحفاظ على تنسيق الكود بشكل متسق وقابل للقراءة |
 
-#### خيارات خاصة بالأنظمة
+#### خيارات خاصة بالمنصات
 
 **Windows:**
 - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - محطة حديثة وغنية بالميزات
-- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - بيئة برمجة نصية قوية
-- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - سطر الأوامر التقليدي لنظام Windows
+- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - بيئة برمجة قوية
+- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - سطر أوامر Windows التقليدي
 
 **macOS:**
 - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - تطبيق المحطة المدمج
-- **[iTerm2](https://iterm2.com/)** - محطة محسنة بميزات متقدمة
+- **[iTerm2](https://iterm2.com/)** - محطة محسنة مع ميزات متقدمة
 
 **Linux:**
-- **[Bash](https://www.gnu.org/software/bash/)** 💻 - القشرة القياسية لنظام Linux
+- **[Bash](https://www.gnu.org/software/bash/)** 💻 - الصدفة القياسية لنظام Linux
 - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - محاكي محطة متقدم
 
 > 💻 = مثبت مسبقًا على نظام التشغيل
 
-> 🎯 **مسار التعلم**: ابدأ بالأوامر الأساسية مثل `cd` (تغيير الدليل)، `ls` أو `dir` (عرض الملفات)، و`mkdir` (إنشاء مجلد). تدرب على أوامر سير العمل الحديثة مثل `npm install`، `git status`، و`code .` (يفتح الدليل الحالي في VS Code). مع زيادة راحتك، ستتعلم بشكل طبيعي المزيد من الأوامر المتقدمة وتقنيات الأتمتة.
+> 🎯 **مسار التعلم**: ابدأ بالأوامر الأساسية مثل `cd` (تغيير الدليل)، `ls` أو `dir` (عرض الملفات)، و`mkdir` (إنشاء مجلد). تدرب على أوامر سير العمل الحديثة مثل `npm install`، `git status`، و`code .` (يفتح الدليل الحالي في VS Code). مع تقدمك في الراحة، ستتعلم بشكل طبيعي المزيد من الأوامر المتقدمة وتقنيات الأتمتة.
 
-### التوثيق: معلمك المتاح دائمًا
+### الوثائق: معلمك المتاح دائمًا للتعلم
 
-حسنًا، دعني أشاركك سرًا صغيرًا سيجعلك تشعر بتحسن كبير بشأن كونك مبتدئًا: حتى أكثر المطورين خبرة يقضون جزءًا كبيرًا من وقتهم في قراءة التوثيق. وهذا ليس لأنهم لا يعرفون ما يفعلونه – بل هو في الواقع علامة على الحكمة!
+حسنًا، دعني أشاركك سرًا صغيرًا سيجعلك تشعر بتحسن كبير بشأن كونك مبتدئًا: حتى أكثر المطورين خبرة يقضون جزءًا كبيرًا من وقتهم في قراءة الوثائق. وليس لأنهم لا يعرفون ما يفعلونه – بل لأن ذلك علامة على الحكمة!
 
-فكر في التوثيق كأنك تمتلك معلمين صبورين ومطلعين متاحين على مدار الساعة. عالق في مشكلة الساعة 2 صباحًا؟ التوثيق موجود ليمنحك عناقًا افتراضيًا دافئًا والإجابة التي تحتاجها بالضبط. تريد معرفة ميزة جديدة رائعة يتحدث عنها الجميع؟ التوثيق يدعمك بأمثلة خطوة بخطوة. تحاول فهم سبب عمل شيء ما بالطريقة التي يعمل بها؟ نعم، التوثيق جاهز لشرح ذلك بطريقة تجعلك تفهمها أخيرًا!
+فكر في الوثائق كأنك تمتلك وصولًا إلى أكثر المعلمين صبرًا ومعرفة الذين يتوفرون على مدار الساعة. عالق في مشكلة الساعة 2 صباحًا؟ الوثائق موجودة مع عناق افتراضي دافئ والإجابة التي تحتاجها بالضبط. تريد تعلم ميزة جديدة رائعة يتحدث عنها الجميع؟ الوثائق تدعمك بأمثلة خطوة بخطوة. تحاول فهم لماذا يعمل شيء ما بالطريقة التي يعمل بها؟ نعم، الوثائق جاهزة لتشرح لك بطريقة تجعلك تفهمها أخيرًا!
 
-**إليك المكان الذي يحدث فيه السحر الحقيقي:**
+إليك شيء غير وجهة نظري تمامًا: عالم تطوير الويب يتحرك بسرعة كبيرة، ولا أحد (أعني لا أحد على الإطلاق!) يحتفظ بكل شيء في ذاكرته. لقد شاهدت مطورين كبار لديهم خبرة تزيد عن 15 عامًا يبحثون عن بناء جملة أساسي، وتعلم ماذا؟ هذا ليس محرجًا – إنه ذكي! الأمر لا يتعلق بامتلاك ذاكرة مثالية؛ بل يتعلق بمعرفة أين تجد الإجابات الموثوقة بسرعة وفهم كيفية تطبيقها.
 
-يقضي المطورون المحترفون جزءًا كبيرًا من وقتهم في قراءة التوثيق – ليس لأنهم لا يعرفون ما يفعلونه، ولكن لأن عالم تطوير الويب يتطور بسرعة كبيرة لدرجة أن البقاء على اطلاع يتطلب تعلمًا مستمرًا. يساعدك التوثيق الجيد على فهم ليس فقط *كيفية* استخدام شيء ما، ولكن *لماذا* و*متى* تستخدمه.
+**إليك أين يحدث السحر الحقيقي:**
 
-#### موارد التوثيق الأساسية
+يقضي المطورون المحترفون جزءًا كبيرًا من وقتهم في قراءة الوثائق – ليس لأنهم لا يعرفون ما يفعلونه، بل لأن مشهد تطوير الويب يتطور بسرعة كبيرة بحيث يتطلب البقاء على اطلاع مستمر التعلم المستمر. تساعدك الوثائق الجيدة على فهم ليس فقط *كيف* تستخدم شيئًا ما، بل *لماذا* و*متى* تستخدمه.
+
+#### موارد الوثائق الأساسية
 
 **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
-- المعيار الذهبي لتوثيق تقنيات الويب
-- أدلة شاملة لـ HTML وCSS وJavaScript
-- يتضمن معلومات توافق المتصفحات
-- يحتوي على أمثلة عملية وعروض تفاعلية
+- المعيار الذهبي لوثائق تقنيات الويب
+- أدلة شاملة لـ HTML، CSS، وJavaScript
+- تتضمن معلومات توافق المتصفح
+- تحتوي على أمثلة عملية وعروض تفاعلية
 
 **[Web.dev](https://web.dev)** (من Google)
 - أفضل ممارسات تطوير الويب الحديث
 - أدلة تحسين الأداء
 - مبادئ التصميم الشامل وإمكانية الوصول
-- دراسات حالة من مشاريع حقيقية
+- دراسات حالة من مشاريع العالم الحقيقي
 
 **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
 - موارد تطوير متصفح Edge
 - أدلة تطبيقات الويب التقدمية
-- رؤى حول التطوير عبر الأنظمة الأساسية
+- رؤى تطوير عبر الأنظمة الأساسية
 
 **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
 - مناهج تعليمية منظمة
 - دورات فيديو من خبراء الصناعة
 - تمارين برمجة عملية
 
-> 📚 **استراتيجية الدراسة**: لا تحاول حفظ التوثيق – بدلاً من ذلك، تعلم كيفية التنقل فيه بكفاءة. ضع إشارة مرجعية على المراجع التي تستخدمها بشكل متكرر وتدرب على استخدام وظائف البحث للعثور على معلومات محددة بسرعة.
+> 📚 **استراتيجية الدراسة**: لا تحاول حفظ الوثائق – بدلاً من ذلك، تعلم كيفية التنقل فيها بكفاءة. ضع إشارات مرجعية للمراجع المستخدمة بشكل متكرر وتدرب على استخدام وظائف البحث للعثور على معلومات محددة بسرعة.
+
+### 🔧 **اختبار إتقان الأدوات: ما الذي يثير اهتمامك؟**
+
+**خذ لحظة للتفكير:**
+- أي أداة أنت متحمس لتجربتها أولاً؟ (لا توجد إجابة خاطئة!)
+- هل لا يزال سطر الأوامر يبدو مخيفًا، أم أنك فضولي بشأنه؟
+- هل يمكنك تخيل استخدام أدوات المطور في المتصفح لاستكشاف ما وراء الكواليس لمواقعك المفضلة؟
+
+```mermaid
+pie title "Developer Time Spent With Tools"
+    "Code Editor" : 40
+    "Browser Testing" : 25
+    "Command Line" : 15
+    "Reading Docs" : 15
+    "Debugging" : 5
+```
 
-✅ **فكرة للتفكير**: إليك شيء مثير للتفكير – كيف تعتقد أن الأدوات المستخدمة لبناء المواقع (التطوير) تختلف عن الأدوات المستخدمة لتصميم شكلها (التصميم)؟ إنه مثل الفرق بين أن تكون مهندسًا معماريًا يصمم منزلًا جميلًا والمقاول الذي يبنيه فعليًا. كلاهما ضروري، لكنهما يحتاجان إلى صناديق أدوات مختلفة! هذا النوع من التفكير سيساعدك حقًا على رؤية الصورة الأكبر لكيفية ظهور المواقع إلى الحياة.
+> **معلومة ممتعة**: يقضي معظم المطورين حوالي 40% من وقتهم في محرر الكود الخاص بهم، لكن لاحظ كم من الوقت يُخصص للاختبار، التعلم، وحل المشكلات. البرمجة ليست فقط كتابة الكود – إنها صناعة تجارب!
+
+✅ **فكرة للتفكير**: إليك شيء مثير للتفكير – كيف تعتقد أن الأدوات لبناء المواقع (التطوير) قد تختلف عن الأدوات لتصميم كيف تبدو (التصميم)؟ إنه مثل الفرق بين أن تكون مهندسًا معماريًا يصمم منزلًا جميلًا والمقاول الذي يبنيه فعليًا. كلاهما ضروري، لكنهما يحتاجان إلى صناديق أدوات مختلفة! هذا النوع من التفكير سيساعدك حقًا على رؤية الصورة الأكبر لكيفية ظهور المواقع إلى الحياة.
 
 ## تحدي GitHub Copilot Agent 🚀
 
 استخدم وضع الوكيل لإكمال التحدي التالي:
 
-**الوصف:** استكشف ميزات محرر أكواد حديث أو بيئة تطوير متكاملة (IDE) ووضح كيف يمكن أن تحسن سير عملك كمطور ويب.
+**الوصف:** استكشف ميزات محرر الكود الحديث أو بيئة التطوير المتكاملة (IDE) وأظهر كيف يمكن أن تحسن سير عملك كمطور ويب.
 
-**المهمة:** اختر محرر أكواد أو بيئة تطوير متكاملة (مثل Visual Studio Code أو WebStorm أو IDE قائم على السحابة). قم بسرد ثلاث ميزات أو إضافات تساعدك على كتابة الأكواد أو تصحيحها أو صيانتها بكفاءة أكبر. لكل ميزة، قدم شرحًا موجزًا عن كيفية تحسينها لسير عملك.
+**المهمة:** اختر محرر كود أو بيئة تطوير متكاملة (مثل Visual Studio Code، WebStorm، أو IDE قائم على السحابة). قم بتحديد ثلاث ميزات أو إضافات تساعدك على كتابة، تصحيح، أو صيانة الكود بكفاءة أكبر. لكل منها، قدم شرحًا موجزًا عن كيفية تحسينها لسير عملك.
 
 ---
 
@@ -604,61 +746,118 @@ npx vite
 
 **حسنًا، أيها المحقق، هل أنت مستعد لأول قضية لك؟**
 
-الآن بعد أن حصلت على هذه الأساسيات الرائعة، لدي مغامرة ستساعدك على رؤية مدى تنوع وروعة عالم البرمجة. وتذكر – هذا ليس عن كتابة الأكواد بعد، لذا لا ضغط هنا! فكر في نفسك كمحقق لغات برمجة في أول قضية مثيرة لك!
+الآن بعد أن حصلت على هذه الأساسيات الرائعة، لدي مغامرة ستساعدك على رؤية مدى تنوع وجاذبية عالم البرمجة حقًا. واستمع – هذا ليس عن كتابة الكود بعد، لذا لا يوجد ضغط هنا! فكر في نفسك كمحقق لغات برمجة في أول قضية مثيرة لك!
 
 **مهمتك، إذا اخترت قبولها:**
-1. **كن مستكشفًا للغات البرمجة**: اختر ثلاث لغات برمجة من عوالم مختلفة تمامًا – ربما واحدة تبني مواقع الويب، وأخرى تنشئ تطبيقات الجوال، وثالثة تحلل البيانات للعلماء. ابحث عن أمثلة لنفس المهمة البسيطة مكتوبة بكل لغة. أعدك أنك ستندهش تمامًا من مدى اختلافها أثناء القيام بنفس الشيء!
+1. **كن مستكشفًا للغات**: اختر ثلاث لغات برمجة من عوالم مختلفة تمامًا – ربما واحدة تبني مواقع، واحدة تنشئ تطبيقات جوال، وواحدة تحلل البيانات للعلماء. ابحث عن أمثلة لنفس المهمة البسيطة مكتوبة بكل لغة. أعدك أنك ستندهش تمامًا من مدى اختلافها أثناء القيام بنفس الشيء!
 
-2. **اكتشف قصص نشأتها**: ما الذي يجعل كل لغة مميزة؟ إليك حقيقة رائعة – كل لغة برمجة تم إنشاؤها لأن شخصًا ما فكر، "تعرف ماذا؟ يجب أن يكون هناك طريقة أفضل لحل هذه المشكلة المحددة." هل يمكنك معرفة ما كانت تلك المشكلات؟ بعض هذه القصص مثيرة للاهتمام حقًا!
+2. **اكتشف قصص أصلها**: ما الذي يجعل كل لغة مميزة؟ إليك حقيقة رائعة – كل لغة برمجة تم إنشاؤها لأن شخصًا ما فكر، "تعرف ماذا؟ يجب أن يكون هناك طريقة أفضل لحل هذه المشكلة المحددة." هل يمكنك معرفة ما كانت تلك المشكلات؟ بعض هذه القصص مثيرة للاهتمام حقًا!
 
-3. **تعرف على مجتمعاتها**: تحقق من مدى ترحيب وشغف مجتمع كل لغة. البعض لديه ملايين المطورين الذين يشاركون المعرفة ويساعدون بعضهم البعض، والبعض الآخر أصغر ولكنه مترابط وداعم للغاية. ستحب رؤية الشخصيات المختلفة لهذه المجتمعات!
+3. **تعرف على المجتمعات**: تحقق من مدى ترحيب وشغف مجتمع كل لغة. البعض لديه ملايين المطورين الذين يشاركون المعرفة ويساعدون بعضهم البعض، والبعض الآخر أصغر ولكن مترابط للغاية وداعم. ستعجبك رؤية الشخصيات المختلفة لهذه المجتمعات!
 
-4. **اتبع شعورك الداخلي**: أي لغة تبدو أكثر سهولة بالنسبة لك الآن؟ لا تقلق بشأن اتخاذ "الاختيار المثالي" – فقط استمع إلى غرائزك! لا توجد إجابة خاطئة هنا، ويمكنك دائمًا استكشاف لغات أخرى لاحقًا.
+4. **اتبع شعورك الداخلي**: أي لغة تبدو أكثر سهولة بالنسبة لك الآن؟ لا تقلق بشأن اتخاذ الخيار "المثالي" – فقط استمع إلى حدسك! لا توجد إجابة خاطئة هنا، ويمكنك دائمًا استكشاف الآخرين لاحقًا.
 
-**عمل تحري إضافي**: اكتشف ما إذا كان بإمكانك معرفة المواقع أو التطبيقات الرئيسية التي تم بناؤها بكل لغة. أضمن أنك ستتفاجأ عندما تعرف ما الذي يشغل Instagram أو Netflix أو تلك اللعبة التي لا تستطيع التوقف عن لعبها!
+**عمل تحري إضافي**: حاول اكتشاف ما هي المواقع أو التطبيقات الرئيسية التي تم بناؤها بكل لغة. أضمن أنك ستُصدم عندما تعرف ما الذي يشغل Instagram، Netflix، أو تلك اللعبة الجوالة التي لا تستطيع التوقف عن لعبها!
 
-> 💡 **تذكر**: لست بحاجة إلى أن تصبح خبيرًا في أي من هذه اللغات اليوم. أنت فقط تتعرف على الحي قبل أن تقرر أين تريد أن تستقر. خذ وقتك، استمتع بالأمر، ودع فضولك يقودك!
+> 💡 **تذكر**: أنت لا تحاول أن تصبح خبيرًا في أي من هذه اللغات اليوم. أنت فقط تتعرف على الحي قبل أن تقرر أين تريد أن تستقر. خذ وقتك، استمتع بالأمر، ودع فضولك يقودك!
 
 ## لنحتفل بما اكتشفته!
 
-يا إلهي، لقد استوعبت الكثير من المعلومات الرائعة اليوم! أنا متحمس حقًا لرؤية مدى استيعابك لهذه الرحلة المذهلة. وتذكر – هذا ليس اختبارًا تحتاج فيه إلى الحصول على كل شيء بشكل مثالي. هذا أشبه بالاحتفال بكل الأشياء الرائعة التي تعلمتها عن هذا العالم المثير الذي أنت على وشك الغوص فيه!
+يا إلهي، لقد استوعبت الكثير من المعلومات الرائعة اليوم! أنا متحمس حقًا لرؤية مدى تأثير هذه الرحلة المذهلة عليك. وتذكر – هذا ليس اختبارًا تحتاج فيه إلى أن تكون مثاليًا. هذا أشبه بالاحتفال بكل الأشياء الرائعة التي تعلمتها عن هذا العالم المثير الذي أنت على وشك الغوص فيه!
 
 [خذ اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/web/)
-
 ## المراجعة والدراسة الذاتية
 
-**خذ وقتك لاستكشاف الأمر واستمتع به!**
+**خذ وقتك للاستكشاف واستمتع بذلك!**
 
-لقد غطيت الكثير اليوم، وهذا شيء يجب أن تفخر به! الآن يأتي الجزء الممتع – استكشاف المواضيع التي أثارت فضولك. تذكر، هذا ليس واجبًا منزليًا – إنها مغامرة!
+لقد قطعت شوطًا كبيرًا اليوم، وهذا شيء تفخر به! الآن يأتي الجزء الممتع – استكشاف المواضيع التي أثارت فضولك. تذكر، هذا ليس واجبًا منزليًا – إنها مغامرة!
 
-**تعمق في ما يثير حماسك:**
+**استكشف ما يثير حماسك بعمق:**
 
 **تفاعل مع لغات البرمجة:**
-- قم بزيارة المواقع الرسمية لـ 2-3 لغات أثارت اهتمامك. لكل منها شخصيتها وقصتها!
+- قم بزيارة المواقع الرسمية لـ 2-3 لغات أثارت اهتمامك. لكل منها شخصيتها وقصتها الخاصة!
 - جرب بعض منصات البرمجة عبر الإنترنت مثل [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/)، أو [Replit](https://replit.com/). لا تخف من التجربة – لن تكسر شيئًا!
-- اقرأ عن كيفية نشأة لغتك المفضلة. بجدية، بعض هذه القصص مثيرة وستساعدك على فهم سبب عمل اللغات بالطريقة التي تعمل بها.
+- اقرأ عن كيفية نشأة لغتك المفضلة. صدقني، بعض هذه القصص الأصلية مثيرة للاهتمام وستساعدك على فهم سبب عمل اللغات بالطريقة التي تعمل بها.
 
 **تعرف على أدواتك الجديدة:**
-- قم بتنزيل Visual Studio Code إذا لم تكن قد فعلت ذلك بالفعل – إنه مجاني وستحبه!
-- اقض بضع دقائق في تصفح سوق الإضافات. إنه مثل متجر التطبيقات لمحرر الأكواد الخاص بك!
-- افتح أدوات المطور في متصفحك وانقر فقط. لا تقلق بشأن فهم كل شيء – فقط تعود على ما هو موجود.
+- قم بتنزيل Visual Studio Code إذا لم تقم بذلك بالفعل – إنه مجاني وستحبه!
+- اقضِ بضع دقائق في تصفح سوق الإضافات. إنه مثل متجر التطبيقات لمحرر الكود الخاص بك!
+- افتح أدوات المطور في متصفحك وانقر هنا وهناك. لا تقلق بشأن فهم كل شيء – فقط تعرّف على ما هو موجود.
 
 **انضم إلى المجتمع:**
 - تابع بعض مجتمعات المطورين على [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/)، أو [GitHub](https://github.com/). مجتمع البرمجة مرحب جدًا بالمبتدئين!
-- شاهد بعض مقاطع الفيديو التعليمية للمبتدئين على YouTube. هناك العديد من المبدعين الرائعين الذين يتذكرون تمامًا كيف كان الأمر عندما بدأوا في تعلم البرمجة.
+- شاهد بعض الفيديوهات التعليمية للمبتدئين على YouTube. هناك العديد من المبدعين الرائعين الذين يتذكرون كيف كان الأمر عندما بدأوا.
 - فكر في الانضمام إلى لقاءات محلية أو مجتمعات عبر الإنترنت. صدقني، المطورون يحبون مساعدة المبتدئين!
 
-> 🎯 **اسمع، هذا ما أريدك أن تتذكره**: لا يُتوقع منك أن تصبح خبيرًا في البرمجة بين ليلة وضحاها! في الوقت الحالي، أنت فقط تتعرف على هذا العالم الجديد الرائع الذي ستصبح جزءًا منه. خذ وقتك، استمتع بالرحلة، وتذكر – كل مطور تعجب به كان يجلس في نفس مكانك الآن، يشعر بالحماس وربما ببعض التوتر. هذا أمر طبيعي تمامًا، ويعني أنك تسير في الطريق الصحيح!
-
-
+> 🎯 **اسمع، هذا ما أريدك أن تتذكره**: لا يُتوقع منك أن تصبح خبيرًا في البرمجة بين ليلة وضحاها! الآن، أنت فقط تتعرف على هذا العالم الجديد الرائع الذي ستصبح جزءًا منه. خذ وقتك، استمتع بالرحلة، وتذكر – كل مطور تعجب به كان يجلس في مكانك تمامًا، يشعر بالحماس وربما قليلًا من الارتباك. هذا طبيعي تمامًا، ويعني أنك تسير في الطريق الصحيح.
 
 ## المهمة
 
 [قراءة الوثائق](assignment.md)
 
-> 💡 **تلميح صغير لمهمتك**: سأكون سعيدًا جدًا برؤيتك تستكشف بعض الأدوات التي لم نتحدث عنها بعد! تجاوز المحررات، المتصفحات، وأدوات سطر الأوامر التي ناقشناها بالفعل – هناك عالم مذهل مليء بأدوات التطوير الرائعة ينتظر أن تكتشفه. ابحث عن الأدوات التي يتم تحديثها بانتظام ولديها مجتمعات نشطة وداعمة (هذه عادةً ما تحتوي على أفضل الشروحات وأشخاص داعمين جدًا عندما تواجه صعوبة وتحتاج إلى مساعدة ودية).
+> 💡 **تلميح صغير لمهمتك**: سأكون سعيدًا جدًا برؤية أنك تستكشف بعض الأدوات التي لم نتحدث عنها بعد! تجاوز المحررات، المتصفحات، وأدوات سطر الأوامر التي تحدثنا عنها – هناك عالم مذهل من أدوات التطوير الرائعة ينتظر أن يتم اكتشافه. ابحث عن الأدوات التي يتم تحديثها بانتظام ولديها مجتمعات نشطة وداعمة (عادةً ما تكون هذه الأدوات لديها أفضل الشروحات وأكثر الأشخاص دعمًا عندما تواجه مشكلة وتحتاج إلى يد مساعدة ودية).
+
+---
+
+## 🚀 جدول رحلتك البرمجية
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] ضع إشارة مرجعية على مواقع 2-3 لغات برمجة أثارت اهتمامك
+- [ ] قم بتنزيل Visual Studio Code إذا لم تقم بذلك بالفعل
+- [ ] افتح أدوات المطور في متصفحك (F12) وانقر هنا وهناك على أي موقع
+- [ ] انضم إلى مجتمع برمجي واحد (Dev.to، Reddit r/webdev، أو Stack Overflow)
+
+### ⏰ **ما يمكنك إنجازه خلال الساعة القادمة**
+- [ ] أكمل اختبار ما بعد الدرس وفكر في إجاباتك
+- [ ] قم بإعداد VS Code مع إضافة GitHub Copilot
+- [ ] جرب مثال "Hello World" في لغتين برمجيتين مختلفتين عبر الإنترنت
+- [ ] شاهد فيديو "يوم في حياة مطور" على YouTube
+- [ ] ابدأ تحقيقك في لغات البرمجة (من التحدي)
+
+### 📅 **مغامرتك لمدة أسبوع**
+- [ ] أكمل المهمة واستكشف 3 أدوات تطوير جديدة
+- [ ] تابع 5 مطورين أو حسابات برمجية على وسائل التواصل الاجتماعي
+- [ ] حاول بناء شيء صغير على CodePen أو Replit (حتى لو كان مجرد "مرحبًا، [اسمك]!")
+- [ ] اقرأ منشور مدونة لمطور عن رحلته البرمجية
+- [ ] انضم إلى لقاء افتراضي أو شاهد حديثًا عن البرمجة
+- [ ] ابدأ تعلم اللغة التي اخترتها من خلال الدروس عبر الإنترنت
+
+### 🗓️ **تحولك خلال شهر**
+- [ ] قم ببناء أول مشروع صغير لك (حتى لو كان مجرد صفحة ويب بسيطة!)
+- [ ] ساهم في مشروع مفتوح المصدر (ابدأ بإصلاحات الوثائق)
+- [ ] قم بتوجيه شخص بدأ للتو رحلته البرمجية
+- [ ] أنشئ موقع محفظة المطور الخاص بك
+- [ ] تواصل مع مجتمعات المطورين المحلية أو مجموعات الدراسة
+- [ ] ابدأ التخطيط لمرحلة التعلم التالية
+
+### 🎯 **التأمل النهائي**
+
+**قبل أن تنتقل، خذ لحظة للاحتفال:**
+- ما الشيء الذي أثار حماسك بشأن البرمجة اليوم؟
+- ما الأداة أو المفهوم الذي تريد استكشافه أولاً؟
+- كيف تشعر بشأن بدء رحلتك البرمجية؟
+- ما السؤال الذي ترغب في طرحه على مطور الآن؟
+
+```mermaid
+journey
+    title Your Confidence Building Journey
+    section Today
+      Curious: 3: You
+      Overwhelmed: 4: You
+      Excited: 5: You
+    section This Week
+      Exploring: 4: You
+      Learning: 5: You
+      Connecting: 4: You
+    section Next Month
+      Building: 5: You
+      Confident: 5: You
+      Helping Others: 5: You
+```
+
+> 🌟 **تذكر**: كل خبير كان يومًا ما مبتدئًا. كل مطور كبير شعر تمامًا كما تشعر الآن – بالحماس، وربما قليلًا من الارتباك، وبالتأكيد فضوليًا بشأن ما هو ممكن. أنت في صحبة رائعة، وهذه الرحلة ستكون مذهلة. مرحبًا بك في عالم البرمجة الرائع! 🎉
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/1-getting-started-lessons/2-github-basics/README.md b/translations/ar/1-getting-started-lessons/2-github-basics/README.md
index 655fda9945..d8829ebd9e 100644
--- a/translations/ar/1-getting-started-lessons/2-github-basics/README.md
+++ b/translations/ar/1-getting-started-lessons/2-github-basics/README.md
@@ -1,33 +1,50 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "acad15f3164cd6348e065ff38619aae9",
-  "translation_date": "2025-10-22T14:10:55+00:00",
+  "original_hash": "0fe3ff66299b447f1c8cb34dcbf0c5ef",
+  "translation_date": "2025-11-03T12:31:42+00:00",
   "source_file": "1-getting-started-lessons/2-github-basics/README.md",
   "language_code": "ar"
 }
 -->
 # مقدمة إلى GitHub
 
-مرحبًا أيها المطور المستقبلي! 👋 هل أنت مستعد للانضمام إلى ملايين المبرمجين حول العالم؟ أنا متحمس جدًا لتعريفك بـ GitHub – فكر فيه كمنصة التواصل الاجتماعي للمبرمجين، ولكن بدلاً من مشاركة صور الغداء، نحن نشارك الأكواد ونبني أشياء مذهلة معًا!
+مرحبًا بك، أيها المطور المستقبلي! 👋 هل أنت مستعد للانضمام إلى ملايين المبرمجين حول العالم؟ أنا متحمس جدًا لتعريفك بـ GitHub – فكر فيه كأنه منصة التواصل الاجتماعي للمبرمجين، ولكن بدلاً من مشاركة صور الغداء، نحن نشارك الأكواد ونبني أشياء مذهلة معًا!
 
-ما يذهلني حقًا هو أن كل تطبيق على هاتفك، وكل موقع تزوره، ومعظم الأدوات التي ستتعلم استخدامها تم بناؤها بواسطة فرق من المطورين الذين يتعاونون على منصات مثل GitHub. تطبيق الموسيقى الذي تحبه؟ شخص مثلك ساهم في بنائه. اللعبة التي لا تستطيع التوقف عن لعبها؟ نعم، ربما تم بناؤها بالتعاون عبر GitHub. والآن أنت ستتعلم كيف تكون جزءًا من هذه المجتمع الرائع!
+ما يدهشني حقًا هو أن كل تطبيق على هاتفك، وكل موقع تزوره، ومعظم الأدوات التي ستتعلم استخدامها تم إنشاؤها بواسطة فرق من المطورين الذين يتعاونون على منصات مثل GitHub. تطبيق الموسيقى الذي تحبه؟ شخص مثلك ساهم فيه. اللعبة التي لا تستطيع التوقف عن لعبها؟ نعم، ربما تم بناؤها بالتعاون عبر GitHub. والآن ستتعلم كيف تكون جزءًا من هذا المجتمع الرائع!
 
-أعلم أن هذا قد يبدو كثيرًا في البداية – أذكر تمامًا عندما نظرت لأول مرة إلى صفحة GitHub الخاصة بي وقلت "ما الذي يعنيه كل هذا؟" لكن إليك الأمر: كل مطور بدأ تمامًا من حيث أنت الآن. بنهاية هذا الدرس، سيكون لديك مستودع GitHub خاص بك (فكر فيه كعرض لمشاريعك الشخصية في السحابة)، وستعرف كيف تحفظ عملك، تشاركه مع الآخرين، وحتى تساهم في مشاريع يستخدمها الملايين من الناس.
+أعلم أن هذا قد يبدو كثيرًا في البداية – أذكر تمامًا عندما نظرت إلى صفحتي الأولى على GitHub وقلت "ما هذا بحق السماء؟". ولكن إليك الأمر: كل مطور بدأ تمامًا من حيث أنت الآن. بنهاية هذا الدرس، سيكون لديك مستودع GitHub خاص بك (فكر فيه كأنه معرض مشاريعك الشخصي في السحابة)، وستعرف كيف تحفظ عملك، وتشاركه مع الآخرين، وحتى تساهم في مشاريع يستخدمها الملايين.
 
 سنخوض هذه الرحلة معًا، خطوة بخطوة. لا استعجال، لا ضغط – فقط أنت وأنا وبعض الأدوات الرائعة التي ستصبح أصدقائك الجدد!
 
 ![مقدمة إلى GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ar.png)
 > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your GitHub Adventure Today
+    section Setup
+      Install Git: 4: You
+      Create Account: 5: You
+      First Repository: 5: You
+    section Master Git
+      Local Changes: 4: You
+      Commits & Pushes: 5: You
+      Branching: 4: You
+    section Collaborate
+      Fork Projects: 4: You
+      Pull Requests: 5: You
+      Open Source: 5: You
+```
+
 ## اختبار ما قبل المحاضرة
 [اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app)
 
 ## المقدمة
 
-قبل أن نغوص في الأمور المثيرة حقًا، دعنا نجهز جهاز الكمبيوتر الخاص بك لبعض السحر مع GitHub! فكر في هذا كتنظيم أدواتك الفنية قبل إنشاء تحفة فنية – وجود الأدوات المناسبة يجعل كل شيء أكثر سلاسة ومتعة.
+قبل أن نغوص في الأمور المثيرة حقًا، دعنا نجهز جهاز الكمبيوتر الخاص بك لبعض السحر مع GitHub! فكر في هذا كأنه تنظيم أدواتك الفنية قبل إنشاء تحفة فنية – وجود الأدوات المناسبة يجعل كل شيء أكثر سلاسة ومتعة.
 
-سأرشدك خلال كل خطوة من خطوات الإعداد شخصيًا، وأعدك أنها ليست مخيفة كما قد تبدو في البداية. إذا لم تفهم شيئًا على الفور، فهذا طبيعي تمامًا! أذكر تمامًا عندما كنت أعد بيئة التطوير الأولى لي وشعرت وكأنني أحاول قراءة الهيروغليفية القديمة. كل مطور كان في نفس مكانك الآن، يتساءل إذا كان يفعل الأمور بشكل صحيح. مفاجأة: إذا كنت هنا تتعلم، فأنت بالفعل تفعل الأمور بشكل صحيح! 🌟
+سأرشدك شخصيًا خلال كل خطوة من خطوات الإعداد، وأعدك أن الأمر ليس مخيفًا كما قد يبدو للوهلة الأولى. إذا لم تفهم شيئًا على الفور، فهذا طبيعي تمامًا! أذكر عندما كنت أعد بيئة التطوير الأولى لي وشعرت وكأنني أحاول قراءة رموز هيروغليفية قديمة. كل مطور كان في مكانك تمامًا، يتساءل عما إذا كان يفعل ذلك بشكل صحيح. مفاجأة: إذا كنت هنا تتعلم، فأنت بالفعل تفعل ذلك بشكل صحيح! 🌟
 
 في هذا الدرس، سنتناول:
 
@@ -39,53 +56,53 @@ CO_OP_TRANSLATOR_METADATA:
 
 دعنا نجهز جهاز الكمبيوتر الخاص بك لبعض السحر مع GitHub! لا تقلق – هذا الإعداد شيء تحتاج إلى القيام به مرة واحدة فقط، وبعدها ستكون جاهزًا طوال رحلتك البرمجية.
 
-حسنًا، لنبدأ بالأساسيات! أولاً، نحتاج إلى التحقق مما إذا كان Git موجودًا بالفعل على جهاز الكمبيوتر الخاص بك. Git يشبه وجود مساعد ذكي جدًا يتذكر كل تغيير تقوم به في الكود – أفضل بكثير من الضغط على Ctrl+S كل ثانيتين (كلنا مررنا بذلك!).
+حسنًا، لنبدأ بالأساسيات! أولاً، نحتاج إلى التحقق مما إذا كان Git مثبتًا بالفعل على جهازك. Git يشبه وجود مساعد ذكي جدًا يتذكر كل تغيير تقوم به في الكود الخاص بك – أفضل بكثير من الضغط على Ctrl+S كل ثانيتين (كلنا كنا هناك!).
 
-دعنا نرى إذا كان Git مثبتًا بالفعل عن طريق كتابة هذا الأمر السحري في الطرفية:
+دعنا نرى ما إذا كان Git مثبتًا بالفعل عن طريق كتابة هذا الأمر السحري في الطرفية الخاصة بك:
 `git --version`
 
-إذا لم يكن Git موجودًا بعد، لا تقلق! فقط توجه إلى [تحميل Git](https://git-scm.com/downloads) وقم بتنزيله. بمجرد تثبيته، نحتاج إلى تعريف Git بك بشكل صحيح:
+إذا لم يكن Git موجودًا بعد، لا تقلق! فقط توجه إلى [تنزيل Git](https://git-scm.com/downloads) وقم بتحميله. بمجرد تثبيته، نحتاج إلى تعريف Git بك بشكل صحيح:
 
-> 💡 **الإعداد لأول مرة**: هذه الأوامر تخبر Git من أنت. سيتم إرفاق هذه المعلومات بكل عملية حفظ تقوم بها، لذا اختر اسمًا وبريدًا إلكترونيًا تشعر بالراحة بمشاركته علنًا.
+> 💡 **الإعداد لأول مرة**: هذه الأوامر تخبر Git من أنت. سيتم إرفاق هذه المعلومات بكل عملية حفظ تقوم بها، لذا اختر اسمًا وبريدًا إلكترونيًا تشعر بالراحة في مشاركتهما علنًا.
 
 ```bash
 git config --global user.name "your-name"
 git config --global user.email "your-email"
 ```
 
-للتحقق مما إذا كان Git قد تم تكوينه بالفعل يمكنك كتابة:
+للتحقق مما إذا كان Git قد تم تكوينه بالفعل، يمكنك كتابة:
 ```bash
 git config --list
 ```
 
-ستحتاج أيضًا إلى حساب GitHub، محرر أكواد (مثل Visual Studio Code)، وستحتاج إلى فتح الطرفية (أو: موجه الأوامر).
+ستحتاج أيضًا إلى حساب GitHub، ومحرر أكواد (مثل Visual Studio Code)، وستحتاج إلى فتح الطرفية (أو: موجه الأوامر).
 
 توجه إلى [github.com](https://github.com/) وأنشئ حسابًا إذا لم تكن قد فعلت ذلك بالفعل، أو قم بتسجيل الدخول واملأ ملفك الشخصي.
 
 💡 **نصيحة حديثة**: فكر في إعداد [مفاتيح SSH](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) أو استخدام [GitHub CLI](https://cli.github.com/) لتسهيل المصادقة بدون كلمات مرور.
 
-✅ GitHub ليس مستودع الأكواد الوحيد في العالم؛ هناك آخرون، لكن GitHub هو الأكثر شهرة.
+✅ GitHub ليس مستودع الأكواد الوحيد في العالم؛ هناك غيره، لكن GitHub هو الأكثر شهرة.
 
 ### التحضير
 
-ستحتاج إلى مجلد يحتوي على مشروع كود على جهازك المحلي (اللاب توب أو الكمبيوتر الشخصي)، ومستودع عام على GitHub، والذي سيكون بمثابة مثال لكيفية المساهمة في مشاريع الآخرين.
+ستحتاج إلى مجلد يحتوي على مشروع كود على جهازك المحلي (الكمبيوتر المحمول أو المكتبي)، ومستودع عام على GitHub، والذي سيعمل كمثال على كيفية المساهمة في مشاريع الآخرين.
 
 ### الحفاظ على أمان الكود الخاص بك
 
-دعنا نتحدث عن الأمان للحظة – لكن لا تقلق، لن نغرقك بأشياء مخيفة! فكر في هذه الممارسات الأمنية مثل قفل سيارتك أو منزلك. إنها عادات بسيطة تصبح طبيعية وتحافظ على عملك الشاق محميًا.
+دعنا نتحدث عن الأمان للحظة – ولكن لا تقلق، لن نثقل عليك بأشياء مخيفة! فكر في هذه الممارسات الأمنية كأنها قفل سيارتك أو منزلك. إنها عادات بسيطة تصبح طبيعية وتحافظ على عملك الشاق محميًا.
 
-سنوضح لك الطرق الحديثة والآمنة للعمل مع GitHub من البداية. بهذه الطريقة، ستطور عادات جيدة ستخدمك جيدًا طوال حياتك البرمجية.
+سنوضح لك الطرق الحديثة والآمنة للعمل مع GitHub منذ البداية. بهذه الطريقة، ستطور عادات جيدة ستخدمك طوال مسيرتك البرمجية.
 
-عند العمل مع GitHub، من المهم اتباع أفضل الممارسات الأمنية:
+عند العمل مع GitHub، من المهم اتباع أفضل ممارسات الأمان:
 
-| مجال الأمان | أفضل ممارسة | لماذا يهم |
-|-------------|-------------|-----------|
+| مجال الأمان | أفضل الممارسات | لماذا هو مهم |
+|-------------|----------------|---------------|
 | **المصادقة** | استخدم مفاتيح SSH أو رموز الوصول الشخصية | كلمات المرور أقل أمانًا ويتم التخلص منها تدريجيًا |
-| **المصادقة الثنائية** | قم بتمكين المصادقة الثنائية على حساب GitHub الخاص بك | تضيف طبقة إضافية من حماية الحساب |
-| **أمان المستودع** | لا تقم أبدًا بحفظ معلومات حساسة | يجب ألا تكون مفاتيح API وكلمات المرور في المستودعات العامة |
+| **المصادقة الثنائية** | قم بتمكين المصادقة الثنائية (2FA) على حساب GitHub الخاص بك | تضيف طبقة إضافية من الحماية للحساب |
+| **أمان المستودع** | لا تقم أبدًا بحفظ معلومات حساسة | لا يجب أن تكون مفاتيح API وكلمات المرور في المستودعات العامة |
 | **إدارة التبعيات** | قم بتمكين Dependabot للتحديثات | يحافظ على تبعياتك آمنة ومحدثة |
 
-> ⚠️ **تذكير أمني مهم**: لا تقم أبدًا بحفظ مفاتيح API أو كلمات المرور أو أي معلومات حساسة في أي مستودع. استخدم المتغيرات البيئية وملفات `.gitignore` لحماية البيانات الحساسة.
+> ⚠️ **تذكير أمني حرج**: لا تقم أبدًا بحفظ مفاتيح API أو كلمات المرور أو أي معلومات حساسة في أي مستودع. استخدم المتغيرات البيئية وملفات `.gitignore` لحماية البيانات الحساسة.
 
 **إعداد المصادقة الحديثة:**
 
@@ -101,40 +118,64 @@ git remote set-url origin git@github.com:username/repository.git
 
 ---
 
-## إدارة الكود الخاص بك مثل المحترفين
-
-حسنًا، هنا تبدأ الأمور في أن تصبح مثيرة حقًا! 🎉 نحن على وشك تعلم كيفية تتبع وإدارة الكود الخاص بك مثل المحترفين، وبصراحة، هذا أحد الأشياء المفضلة لدي لتعليمها لأنه يغير اللعبة تمامًا.
-
-تخيل هذا: أنت تكتب قصة مذهلة، وتريد تتبع كل مسودة، وكل تعديل رائع، وكل لحظة "انتظر، هذا عبقري!" على طول الطريق. هذا بالضبط ما يفعله Git لكودك! إنه مثل وجود دفتر ملاحظات مذهل يسافر عبر الزمن ويتذكر كل شيء – كل ضغطة مفتاح، كل تغيير، كل لحظة "أوه، هذا كسر كل شيء" التي يمكنك التراجع عنها فورًا.
-
-سأكون صادقًا – قد يبدو هذا مربكًا في البداية. عندما بدأت، كنت أفكر "لماذا لا يمكنني فقط حفظ ملفاتي بشكل طبيعي؟" لكن ثق بي في هذا: بمجرد أن تفهم Git (وستفهمه!)، ستحصل على تلك اللحظة المضيئة حيث تفكر "كيف كنت أبرمج بدون هذا؟" إنه مثل اكتشاف أنك تستطيع الطيران عندما كنت تمشي في كل مكان طوال حياتك!
-
-لنفترض أن لديك مجلدًا محليًا يحتوي على مشروع كود وتريد البدء في تتبع تقدمك باستخدام Git - نظام التحكم في الإصدارات. بعض الناس يقارنون استخدام Git بكتابة رسالة حب لنفسك المستقبلية. قراءة رسائل الحفظ الخاصة بك بعد أيام أو أسابيع أو أشهر ستتيح لك استرجاع سبب اتخاذك قرارًا معينًا، أو "التراجع" عن تغيير – هذا إذا كنت تكتب رسائل حفظ جيدة.
+## إدارة الكود الخاص بك كمحترف
+
+حسنًا، هنا تبدأ الأمور في أن تصبح مثيرة حقًا! 🎉 نحن على وشك تعلم كيفية تتبع وإدارة الكود الخاص بك مثل المحترفين، وبصراحة، هذا أحد الأشياء المفضلة لدي لتعليمها لأنها تغير اللعبة تمامًا.
+
+تخيل هذا: أنت تكتب قصة مذهلة، وتريد تتبع كل مسودة، وكل تعديل رائع، وكل لحظة "انتظر، هذا عبقري!" على طول الطريق. هذا بالضبط ما يفعله Git لكودك! إنه مثل وجود دفتر ملاحظات مذهل يسافر عبر الزمن ويتذكر كل شيء – كل ضغطة مفتاح، كل تغيير، كل لحظة "أوه، لقد أفسدت كل شيء" التي يمكنك التراجع عنها فورًا.
+
+سأكون صريحًا – قد يبدو هذا مربكًا في البداية. عندما بدأت، كنت أفكر "لماذا لا يمكنني فقط حفظ ملفاتي بشكل طبيعي؟" ولكن ثق بي في هذا: بمجرد أن تفهم Git (وستفهمه!)، ستحصل على تلك اللحظة المضيئة حيث تفكر "كيف كنت أبرمج بدون هذا؟" إنه مثل اكتشاف أنك تستطيع الطيران بعد أن كنت تمشي طوال حياتك!
+
+لنفترض أن لديك مجلدًا محليًا يحتوي على مشروع كود وتريد البدء في تتبع تقدمك باستخدام Git - نظام التحكم في الإصدارات. بعض الناس يقارنون استخدام Git بكتابة رسالة حب لنفسك المستقبلية. عند قراءة رسائل الحفظ الخاصة بك بعد أيام أو أسابيع أو أشهر، ستتمكن من تذكر سبب اتخاذك لقرار معين، أو "التراجع" عن تغيير – بالطبع، عندما تكتب رسائل حفظ جيدة.
+
+```mermaid
+flowchart TD
+    A[📁 Your Project Files] --> B{Is it a Git Repository?}
+    B -->|No| C[git init]
+    B -->|Yes| D[Make Changes]
+    C --> D
+    D --> E[git add .]
+    E --> F["git commit -m 'message'"]
+    F --> G[git push]
+    G --> H[🌟 Code on GitHub!]
+    
+    H --> I{Want to collaborate?}
+    I -->|Yes| J[Fork & Clone]
+    I -->|No| D
+    J --> K[Create Branch]
+    K --> L[Make Changes]
+    L --> M[Pull Request]
+    M --> N[🎉 Contributing!]
+    
+    style A fill:#fff59d
+    style H fill:#c8e6c9
+    style N fill:#ff4081,color:#fff
+```
 
-### المهمة: إنشاء أول مستودع لك!
+### المهمة: إنشاء مستودعك الأول!
 
-> 🎯 **مهمتك (وأنا متحمس جدًا لك!)**: سنقوم بإنشاء أول مستودع GitHub لك معًا! بحلول الوقت الذي ننتهي فيه هنا، سيكون لديك ركن صغير خاص بك على الإنترنت حيث يعيش كودك، وستكون قد قمت بأول "حفظ" (هذا هو مصطلح المطورين لحفظ عملك بطريقة ذكية جدًا).
+> 🎯 **مهمتك (وأنا متحمس جدًا لك!)**: سنقوم بإنشاء مستودع GitHub الأول الخاص بك معًا! بحلول الوقت الذي ننتهي فيه هنا، سيكون لديك ركن صغير خاص بك على الإنترنت حيث يعيش كودك، وستكون قد قمت بأول "حفظ" (هذا هو المصطلح الذي يستخدمه المطورون لحفظ عملهم بطريقة ذكية جدًا).
 >
-> هذه لحظة خاصة جدًا – أنت على وشك الانضمام رسميًا إلى مجتمع المطورين العالمي! لا زلت أتذكر الإثارة عند إنشاء أول مستودع لي والتفكير "واو، أنا أفعل هذا حقًا!"
+> هذه لحظة خاصة جدًا – أنت على وشك الانضمام رسميًا إلى المجتمع العالمي للمطورين! ما زلت أتذكر الإثارة عند إنشاء مستودعي الأول والتفكير "واو، أنا أفعل هذا حقًا!"
 
-دعنا نمر بهذه المغامرة معًا، خطوة بخطوة. خذ وقتك مع كل جزء – لا يوجد جائزة للسرعة، وأعدك أن كل خطوة ستصبح منطقية. تذكر، كل نجم برمجي تعجب به كان يجلس تمامًا حيث أنت الآن، على وشك إنشاء أول مستودع له. كم هذا رائع؟
+دعنا نخوض هذه المغامرة معًا، خطوة بخطوة. خذ وقتك مع كل جزء – لا توجد جائزة للاستعجال، وأعدك أن كل خطوة ستصبح منطقية. تذكر، كل نجم برمجي تعجب به كان يومًا ما جالسًا في مكانك تمامًا، على وشك إنشاء مستودعه الأول. كم هذا رائع؟
 
 > شاهد الفيديو
 > 
-> [![فيديو أساسيات Git و GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+> [![فيديو أساسيات Git وGitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
 
 **لنقم بذلك معًا:**
 
-1. **إنشاء مستودعك على GitHub**. توجه إلى GitHub.com وابحث عن الزر الأخضر اللامع **جديد** (أو علامة **+** في الزاوية اليمنى العليا). اضغط عليه واختر **مستودع جديد**.
+1. **إنشاء مستودعك على GitHub**. توجه إلى GitHub.com وابحث عن الزر الأخضر اللامع **جديد** (أو علامة **+** في الزاوية العلوية اليمنى). انقر عليه واختر **مستودع جديد**.
 
    إليك ما يجب فعله:
    1. امنح مستودعك اسمًا – اجعله شيئًا ذا معنى بالنسبة لك!
    1. أضف وصفًا إذا أردت (هذا يساعد الآخرين على فهم مشروعك)
-   1. قرر إذا كنت تريد أن يكون عامًا (يمكن للجميع رؤيته) أو خاصًا (فقط لك)
+   1. قرر ما إذا كنت تريد أن يكون عامًا (يمكن للجميع رؤيته) أو خاصًا (فقط لك)
    1. أوصي بتحديد المربع لإضافة ملف README – إنه مثل الصفحة الأولى لمشروعك
-   1. اضغط على **إنشاء مستودع** واحتفل – لقد أنشأت أول مستودع لك! 🎉
+   1. انقر على **إنشاء مستودع** واحتفل – لقد أنشأت مستودعك الأول! 🎉
 
-2. **انتقل إلى مجلد مشروعك**. الآن دعنا نفتح الطرفية (لا تقلق، إنها ليست مخيفة كما تبدو!). نحتاج إلى إخبار جهاز الكمبيوتر الخاص بك بمكان ملفات مشروعك. اكتب هذا الأمر:
+2. **انتقل إلى مجلد مشروعك**. الآن دعنا نفتح الطرفية الخاصة بك (لا تقلق، ليست مخيفة كما تبدو!). نحتاج إلى إخبار جهاز الكمبيوتر الخاص بك بمكان ملفات مشروعك. اكتب هذا الأمر:
 
    ```bash
    cd [name of your folder]
@@ -142,10 +183,10 @@ git remote set-url origin git@github.com:username/repository.git
 
    **ما الذي نفعله هنا:**
    - نحن نقول لجهاز الكمبيوتر "مرحبًا، خذني إلى مجلد مشروعي"
-   - هذا يشبه فتح مجلد معين على سطح المكتب، لكننا نفعل ذلك بأوامر نصية
-   - استبدل `[اسم مجلدك]` باسم مجلد مشروعك الفعلي
+   - هذا يشبه فتح مجلد معين على سطح المكتب، ولكننا نقوم بذلك باستخدام أوامر نصية
+   - استبدل `[name of your folder]` باسم مجلد مشروعك الفعلي
 
-3. **حول مجلدك إلى مستودع Git**. هنا يحدث السحر! اكتب:
+3. **حوّل مجلدك إلى مستودع Git**. هنا يحدث السحر! اكتب:
 
    ```bash
    git init
@@ -154,7 +195,7 @@ git remote set-url origin git@github.com:username/repository.git
    **ما الذي حدث للتو (أشياء رائعة جدًا!):**
    - قام Git بإنشاء مجلد مخفي `.git` في مشروعك – لن تراه، لكنه موجود!
    - أصبح مجلدك العادي الآن "مستودعًا" يمكنه تتبع كل تغيير تقوم به
-   - فكر فيه كإعطاء مجلدك قوى خارقة لتذكر كل شيء
+   - فكر في الأمر كأنه يمنح مجلدك قوى خارقة لتذكر كل شيء
 
 4. **تحقق مما يحدث**. دعنا نرى ما الذي يعتقده Git عن مشروعك الآن:
 
@@ -162,9 +203,9 @@ git remote set-url origin git@github.com:username/repository.git
    git status
    ```
 
-   **فهم ما يقوله Git لك:**
+   **فهم ما يقوله Git:**
    
-   قد ترى شيئًا يبدو مثل هذا:
+   قد ترى شيئًا يبدو هكذا:
 
    ```output
    Changes not staged for commit:
@@ -175,14 +216,14 @@ git remote set-url origin git@github.com:username/repository.git
         modified:   file2.txt
    ```
 
-   **لا تقلق! إليك ما يعنيه هذا:**
+   **لا تقلق! هذا ما يعنيه:**
    - الملفات باللون **الأحمر** هي ملفات بها تغييرات لكنها ليست جاهزة للحفظ بعد
    - الملفات باللون **الأخضر** (عندما تراها) جاهزة للحفظ
    - Git يساعدك بإخبارك بالضبط بما يمكنك فعله بعد ذلك
 
    > 💡 **نصيحة احترافية**: أمر `git status` هو أفضل صديق لك! استخدمه في أي وقت تشعر فيه بالارتباك بشأن ما يحدث. إنه مثل سؤال Git "مرحبًا، ما الوضع الآن؟"
 
-5. **جهز ملفاتك للحفظ** (هذا يسمى "التجهيز"):
+5. **جهّز ملفاتك للحفظ** (هذا يسمى "التجهيز"):
 
    ```bash
    git add .
@@ -190,10 +231,10 @@ git remote set-url origin git@github.com:username/repository.git
 
    **ما الذي فعلناه للتو:**
    - أخبرنا Git "مرحبًا، أريد تضمين جميع ملفاتي في الحفظ التالي"
-   - النقطة `.` تشبه قول "كل شيء في هذا المجلد"
-   - الآن ملفاتك "مجهزة" وجاهزة للخطوة التالية
+   - النقطة `.` تعني "كل شيء في هذا المجلد"
+   - الآن ملفاتك "جاهزة" للخطوة التالية
 
-   **هل تريد أن تكون أكثر انتقائية؟** يمكنك إضافة ملفات محددة فقط:
+   **تريد أن تكون أكثر انتقائية؟** يمكنك إضافة ملفات محددة فقط:
 
    ```bash
    git add [file or folder name]
@@ -204,7 +245,7 @@ git remote set-url origin git@github.com:username/repository.git
    - يساعدك على تنظيم عملك في أجزاء منطقية
    - يجعل من السهل فهم ما تغير ومتى
 
-   **غيرت رأيك؟** لا تقلق! يمكنك إزالة تجهيز الملفات مثل هذا:
+   **غيرت رأيك؟** لا تقلق! يمكنك إزالة الملفات من التجهيز هكذا:
 
    ```bash
    # Unstage everything
@@ -225,240 +266,309 @@ git remote set-url origin git@github.com:username/repository.git
    **🎉 تهانينا! لقد قمت بأول عملية حفظ!**
    
    **ما الذي حدث للتو:**
-   - قام Git بأخذ "لقطة" لجميع الملفات المجهزة في هذه اللحظة بالضبط
-   - رسالة الحفظ الخاصة بك "الحفظ الأول" تشرح ما يتعلق به نقطة الحفظ هذه
-   - أعطى Git هذه اللقطة معرفًا فريدًا حتى تتمكن دائمًا من العثور عليها لاحقًا
+   - أخذ Git "لقطة" لجميع الملفات الجاهزة في هذه اللحظة بالضبط
+   - رسالة الحفظ "first commit" تشرح ما يدور حوله هذا الحفظ
+   - أعطى Git لهذه اللقطة معرفًا فريدًا حتى تتمكن دائمًا من العثور عليها لاحقًا
    - لقد بدأت رسميًا في تتبع تاريخ مشروعك!
 
-   > 💡 **رسائل الحفظ المستقبلية**: بالنسبة لعمليات الحفظ القادمة، كن أكثر وصفًا! بدلًا من "تحديث الأشياء"، جرب "إضافة نموذج الاتصال إلى الصفحة الرئيسية" أو "إصلاح خطأ في قائمة التنقل". نفسك المستقبلية ستشكرك!
+   > 💡 **رسائل الحفظ المستقبلية**: بالنسبة للحفظات القادمة، كن أكثر وصفًا! بدلاً من "تحديث الأشياء"، جرب "إضافة نموذج الاتصال إلى الصفحة الرئيسية" أو "إصلاح خطأ في قائمة التنقل". ستشكر نفسك في المستقبل!
 
 7. **ربط مشروعك المحلي بـ GitHub**. الآن، مشروعك موجود فقط على جهاز الكمبيوتر الخاص بك. دعنا نربطه بمستودع GitHub الخاص بك حتى تتمكن من مشاركته مع العالم!
 
-   أولاً، توجه إلى صفحة مستودع GitHub الخاص بك ونسخ الرابط. ثم عد إلى هنا واكتب:
+   أولاً، انتقل إلى صفحة مستودع GitHub الخاص بك ونسخ الرابط. ثم عد إلى هنا واكتب:
 
    ```bash
    git remote add origin https://github.com/username/repository_name.git
    ```
    
    (استبدل هذا الرابط برابط مستودعك الفعلي!)
+**ما قمنا به للتو:**
+- أنشأنا اتصالاً بين مشروعك المحلي ومستودع GitHub الخاص بك.
+- "Origin" هو مجرد اسم مستعار لمستودع GitHub الخاص بك – يشبه إضافة جهة اتصال إلى هاتفك.
+- الآن يعرف Git المحلي الخاص بك أين يرسل الكود الخاص بك عندما تكون جاهزًا لمشاركته.
 
-   **ما الذي فعلناه للتو:**
-- قمنا بإنشاء اتصال بين مشروعك المحلي ومستودع GitHub الخاص بك  
-- "Origin" هو مجرد اسم مستعار لمستودع GitHub الخاص بك – يشبه إضافة جهة اتصال إلى هاتفك  
-- الآن يعرف Git المحلي الخاص بك أين يرسل الكود الخاص بك عندما تكون جاهزًا لمشاركته  
-
-💡 **طريقة أسهل**: إذا كان لديك GitHub CLI مثبتًا، يمكنك القيام بذلك بأمر واحد:  
+💡 **طريقة أسهل**: إذا كان لديك GitHub CLI مثبتًا، يمكنك القيام بذلك بأمر واحد:
    ```bash
    gh repo create my-repo --public --push --source=.
    ```
-  
-8. **أرسل الكود الخاص بك إلى GitHub** (اللحظة الكبيرة!):  
+
+8. **أرسل الكود الخاص بك إلى GitHub** (اللحظة الحاسمة!):
 
    ```bash
    git push -u origin main
    ```
-  
-**🚀 هذه هي اللحظة! أنت تقوم برفع الكود الخاص بك إلى GitHub!**  
 
-**ما الذي يحدث:**  
-- التغييرات التي قمت بها تنتقل من جهاز الكمبيوتر الخاص بك إلى GitHub  
-- العلم `-u` يقوم بإعداد اتصال دائم لتسهيل عمليات الدفع المستقبلية  
-- "main" هو اسم الفرع الأساسي الخاص بك (مثل المجلد الرئيسي)  
-- بعد ذلك، يمكنك فقط كتابة `git push` للرفع في المستقبل!  
+**🚀 هذا هو! أنت تقوم برفع الكود الخاص بك إلى GitHub!**
+
+**ما يحدث:**
+- تنتقل التغييرات التي أجريتها من جهاز الكمبيوتر الخاص بك إلى GitHub.
+- العلم `-u` يقوم بإعداد اتصال دائم لتسهيل عمليات الدفع المستقبلية.
+- "main" هو اسم الفرع الرئيسي الخاص بك (مثل المجلد الرئيسي).
+- بعد ذلك، يمكنك فقط كتابة `git push` لعمليات الرفع المستقبلية!
 
-💡 **ملاحظة سريعة**: إذا كان اسم الفرع الخاص بك مختلفًا (مثل "master")، استخدم هذا الاسم بدلاً من ذلك. يمكنك التحقق باستخدام `git branch --show-current`.  
+💡 **ملاحظة سريعة**: إذا كان اسم الفرع الخاص بك مختلفًا (مثل "master")، فاستخدم هذا الاسم بدلاً من ذلك. يمكنك التحقق باستخدام `git branch --show-current`.
 
-9. **إيقاع البرمجة اليومي الجديد الخاص بك** (هنا يصبح الأمر ممتعًا!):  
+9. **إيقاعك اليومي الجديد في البرمجة** (هنا يصبح الأمر ممتعًا!):
 
-من الآن فصاعدًا، كلما أجريت تغييرات على مشروعك، لديك هذه الخطوات الثلاث البسيطة:  
+من الآن فصاعدًا، كلما أجريت تغييرات على مشروعك، لديك هذه الخطوات الثلاث البسيطة:
 
    ```bash
    git add .
    git commit -m "describe what you changed"
    git push
    ```
-  
-**هذا يصبح نبض البرمجة الخاص بك:**  
-- قم بإجراء تغييرات رائعة على الكود الخاص بك ✨  
-- قم بتجهيزها باستخدام `git add` ("مرحبًا Git، انتبه لهذه التغييرات!")  
-- احفظها باستخدام `git commit` ورسالة وصفية (ستشكر نفسك في المستقبل!)  
-- شاركها مع العالم باستخدام `git push` 🚀  
-- كرر العملية – بجدية، هذا يصبح طبيعيًا مثل التنفس!  
-
-أحب هذا التدفق لأنه يشبه وجود نقاط حفظ متعددة في لعبة فيديو. أجريت تغييرًا تحبه؟ قم بحفظه! تريد تجربة شيء محفوف بالمخاطر؟ لا مشكلة – يمكنك دائمًا العودة إلى آخر حفظ إذا ساءت الأمور!  
 
-> 💡 **نصيحة**: قد ترغب أيضًا في اعتماد ملف `.gitignore` لمنع ظهور الملفات التي لا تريد تتبعها على GitHub - مثل ملف الملاحظات الذي تخزنه في نفس المجلد ولكنه ليس له مكان في مستودع عام. يمكنك العثور على قوالب لملفات `.gitignore` في [.gitignore templates](https://github.com/github/gitignore) أو إنشاء واحد باستخدام [gitignore.io](https://www.toptal.com/developers/gitignore).  
+**هذا يصبح نبض البرمجة الخاص بك:**
+- قم بإجراء تغييرات رائعة على الكود الخاص بك ✨
+- قم بتهيئتها باستخدام `git add` ("مرحبًا Git، انتبه لهذه التغييرات!")
+- احفظها باستخدام `git commit` ورسالة وصفية (ستشكر نفسك في المستقبل!)
+- شاركها مع العالم باستخدام `git push` 🚀
+- كرر العملية – بجدية، هذا يصبح طبيعيًا مثل التنفس!
+
+أحب هذا الأسلوب لأنه يشبه وجود نقاط حفظ متعددة في لعبة فيديو. أجريت تغييرًا تحبه؟ قم بحفظه! تريد تجربة شيء محفوف بالمخاطر؟ لا مشكلة – يمكنك دائمًا العودة إلى آخر حفظ إذا حدث خطأ ما!
+
+> 💡 **نصيحة**: قد ترغب أيضًا في اعتماد ملف `.gitignore` لمنع ظهور الملفات التي لا تريد تتبعها على GitHub - مثل ملف الملاحظات الذي تخزنه في نفس المجلد ولكنه ليس له مكان في مستودع عام. يمكنك العثور على قوالب لملفات `.gitignore` في [.gitignore templates](https://github.com/github/gitignore) أو إنشاء واحد باستخدام [gitignore.io](https://www.toptal.com/developers/gitignore).
+
+### 🧠 **أول تسجيل في المستودع: كيف كان شعورك؟**
+
+**خذ لحظة للاحتفال والتفكير:**
+- كيف كان شعورك عندما رأيت الكود الخاص بك يظهر على GitHub لأول مرة؟
+- أي خطوة شعرت بأنها الأكثر إرباكًا، وأي خطوة كانت سهلة بشكل مفاجئ؟
+- هل يمكنك شرح الفرق بين `git add`، `git commit`، و `git push` بكلماتك الخاصة؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> LocalFiles: Create project
+    LocalFiles --> Staged: git add .
+    Staged --> Committed: git commit
+    Committed --> GitHub: git push
+    GitHub --> [*]: Success! 🎉
+    
+    note right of Staged
+        Files ready to save
+    end note
+    
+    note right of Committed
+        Snapshot created
+    end note
+```
 
-#### تدفقات Git الحديثة  
+> **تذكر**: حتى المطورين ذوي الخبرة ينسون أحيانًا الأوامر الدقيقة. جعل هذا الأسلوب يصبح ذاكرة عضلية يتطلب ممارسة - أنت تقوم بعمل رائع!
 
-فكر في اعتماد هذه الممارسات الحديثة:  
+#### أساليب Git الحديثة
 
-- **التزامات تقليدية**: استخدم تنسيقًا موحدًا لرسائل الالتزام مثل `feat:`، `fix:`، `docs:`، إلخ. تعرف على المزيد في [conventionalcommits.org](https://www.conventionalcommits.org/)  
-- **التزامات ذرية**: اجعل كل التزام يمثل تغييرًا منطقيًا واحدًا  
-- **التزامات متكررة**: قم بالالتزام بشكل متكرر مع رسائل وصفية بدلاً من الالتزامات الكبيرة وغير المتكررة  
+فكر في تبني هذه الممارسات الحديثة:
 
-#### رسائل الالتزام  
+- **التزامات تقليدية**: استخدم تنسيقًا قياسيًا لرسائل الالتزام مثل `feat:`، `fix:`، `docs:`، إلخ. تعرف على المزيد في [conventionalcommits.org](https://www.conventionalcommits.org/)
+- **التزامات ذرية**: اجعل كل التزام يمثل تغييرًا منطقيًا واحدًا.
+- **التزامات متكررة**: قم بالالتزام بشكل متكرر مع رسائل وصفية بدلاً من الالتزامات الكبيرة وغير المتكررة.
 
-سطر موضوع الالتزام الجيد يكمل الجملة التالية:  
-إذا تم تطبيقه، فإن هذا الالتزام سيقوم بـ <سطر الموضوع الخاص بك هنا>  
+#### رسائل الالتزام
 
-استخدم صيغة الأمر، الزمن الحاضر: "تغيير" وليس "تم تغييره" ولا "يغير".  
-كما هو الحال في الموضوع، في النص (اختياري) أيضًا استخدم صيغة الأمر، الزمن الحاضر. يجب أن يتضمن النص الدافع للتغيير ويقارن ذلك بالسلوك السابق. أنت تشرح `لماذا`، وليس `كيف`.  
+سطر موضوع الالتزام الجيد يكمل الجملة التالية:
+إذا تم تطبيقه، فإن هذا الالتزام سي <سطر الموضوع الخاص بك هنا>
 
-✅ خذ بضع دقائق لتصفح GitHub. هل يمكنك العثور على رسالة التزام رائعة حقًا؟ هل يمكنك العثور على واحدة بسيطة جدًا؟ ما المعلومات التي تعتقد أنها الأكثر أهمية وفائدة لتوصيلها في رسالة الالتزام؟  
+بالنسبة للموضوع، استخدم صيغة الأمر، الزمن الحاضر: "تغيير" وليس "تم تغييره" ولا "تغييرات". كما هو الحال في الموضوع، في النص (اختياري) استخدم أيضًا صيغة الأمر، الزمن الحاضر. يجب أن يتضمن النص الدافع للتغيير ويقارن ذلك بالسلوك السابق. أنت تشرح "لماذا"، وليس "كيف".
 
-## العمل مع الآخرين (الجزء الممتع!)  
+✅ خذ بضع دقائق لتصفح GitHub. هل يمكنك العثور على رسالة التزام رائعة حقًا؟ هل يمكنك العثور على رسالة بسيطة جدًا؟ ما المعلومات التي تعتقد أنها الأكثر أهمية وفائدة لنقلها في رسالة الالتزام؟
 
-تمسك بقبعتك لأن هذا هو المكان الذي يصبح فيه GitHub سحريًا تمامًا! 🪄 لقد أتقنت إدارة الكود الخاص بك، ولكن الآن نحن نغوص في الجزء المفضل لدي – التعاون مع أشخاص رائعين من جميع أنحاء العالم.  
+## العمل مع الآخرين (الجزء الممتع!)
 
-تخيل هذا: تستيقظ غدًا وترى أن شخصًا في طوكيو قد حسّن الكود الخاص بك أثناء نومك. ثم يقوم شخص في برلين بإصلاح خطأ كنت عالقًا فيه. وبحلول فترة الظهيرة، يضيف مطور في ساو باولو ميزة لم تفكر فيها أبدًا. هذا ليس خيالًا علميًا – هذا مجرد يوم عادي في عالم GitHub!  
+تمسك بقبعتك لأن هذا هو المكان الذي يصبح فيه GitHub سحريًا تمامًا! 🪄 لقد أتقنت إدارة الكود الخاص بك، ولكن الآن نحن نغوص في الجزء المفضل لدي – التعاون مع أشخاص رائعين من جميع أنحاء العالم.
 
-ما يثيرني حقًا هو أن مهارات التعاون التي ستتعلمها؟ هذه هي نفس التدفقات التي تستخدمها الفرق في Google وMicrosoft وأفضل الشركات الناشئة كل يوم. أنت لا تتعلم مجرد أداة رائعة – أنت تتعلم اللغة السرية التي تجعل عالم البرمجيات بأكمله يعمل معًا.  
+تخيل هذا: تستيقظ غدًا وترى أن شخصًا في طوكيو قام بتحسين الكود الخاص بك أثناء نومك. ثم شخص في برلين يصلح خطأ كنت عالقًا فيه. بحلول فترة الظهيرة، يضيف مطور في ساو باولو ميزة لم تفكر فيها حتى. هذا ليس خيالًا علميًا – هذا مجرد يوم عادي في عالم GitHub!
 
-بجدية، بمجرد أن تختبر شعور شخص ما بدمج أول طلب سحب لك، ستفهم لماذا يصبح المطورون متحمسين جدًا للمصادر المفتوحة. إنه مثل أن تكون جزءًا من أكبر مشروع فريق إبداعي في العالم!  
+ما يثيرني حقًا هو أن مهارات التعاون التي ستتعلمها؟ هذه هي نفس الأساليب التي تستخدمها الفرق في Google وMicrosoft وأفضل الشركات الناشئة كل يوم. أنت لا تتعلم مجرد أداة رائعة – أنت تتعلم اللغة السرية التي تجعل عالم البرمجيات بأكمله يعمل معًا.
 
-> شاهد الفيديو  
->  
-> [![فيديو أساسيات Git وGitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)  
+بجدية، بمجرد أن تختبر شعور أن يقوم شخص ما بدمج أول طلب سحب لك، ستفهم لماذا يصبح المطورون متحمسين جدًا للمصدر المفتوح. إنه مثل أن تكون جزءًا من أكبر مشروع فريق إبداعي في العالم!
 
-السبب الرئيسي لوضع الأشياء على GitHub هو جعل التعاون مع المطورين الآخرين ممكنًا.  
+> شاهد الفيديو
+>
+> [![فيديو أساسيات Git وGitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+السبب الرئيسي لوضع الأشياء على GitHub هو جعل التعاون مع المطورين الآخرين ممكنًا.
+
+```mermaid
+flowchart LR
+    A[🔍 Find Project] --> B[🍴 Fork Repository]
+    B --> C[📥 Clone to Local]
+    C --> D[🌿 Create Branch]
+    D --> E[✏️ Make Changes]
+    E --> F[💾 Commit Changes]
+    F --> G[📤 Push Branch]
+    G --> H[🔄 Create Pull Request]
+    H --> I{Maintainer Review}
+    I -->|✅ Approved| J[🎉 Merge!]
+    I -->|❓ Changes Requested| K[📝 Make Updates]
+    K --> F
+    J --> L[🧹 Clean Up Branches]
+    
+    style A fill:#e3f2fd
+    style J fill:#e8f5e8
+    style L fill:#fff3e0
+```
 
-في مستودعك، انتقل إلى `Insights > Community` لترى كيف يقارن مشروعك بمعايير المجتمع الموصى بها.  
+في مستودعك، انتقل إلى `Insights > Community` لترى كيف يقارن مشروعك بمعايير المجتمع الموصى بها.
 
-هل تريد أن يبدو مستودعك احترافيًا ومرحبًا؟ توجه إلى مستودعك وانقر على `Insights > Community`. هذه الميزة الرائعة تظهر لك كيف يقارن مشروعك بما يعتبره مجتمع GitHub "ممارسات مستودع جيدة".  
+هل تريد جعل مستودعك يبدو احترافيًا ومرحبًا؟ توجه إلى مستودعك وانقر على `Insights > Community`. هذه الميزة الرائعة تظهر لك كيف يقارن مشروعك بما يعتبره مجتمع GitHub "ممارسات مستودع جيدة".
 
-> 🎯 **جعل مشروعك يلمع**: مستودع منظم جيدًا مع وثائق جيدة يشبه وجود واجهة متجر نظيفة ومرحبة. إنه يخبر الناس أنك تهتم بعملك ويجعل الآخرين يرغبون في المساهمة!  
+> 🎯 **جعل مشروعك يلمع**: المستودع المنظم جيدًا مع وثائق جيدة يشبه وجود واجهة متجر نظيفة ومرحبة. إنه يخبر الناس أنك تهتم بعملك ويجعل الآخرين يرغبون في المساهمة!
 
-**إليك ما يجعل المستودع رائعًا:**  
+**إليك ما يجعل المستودع رائعًا:**
 
-| ما يجب إضافته | لماذا هو مهم | ماذا يفعل لك |  
-|-------------|-------------------|---------------------|  
-| **الوصف** | الانطباع الأول مهم! | يعرف الناس فورًا ما يفعله مشروعك |  
-| **README** | الصفحة الرئيسية لمشروعك | مثل دليل سياحي ودود للزوار الجدد |  
-| **إرشادات المساهمة** | يظهر أنك ترحب بالمساعدة | يعرف الناس بالضبط كيف يمكنهم مساعدتك |  
-| **مدونة السلوك** | يخلق مساحة ودية | يشعر الجميع بالترحيب للمشاركة |  
-| **الرخصة** | وضوح قانوني | يعرف الآخرون كيف يمكنهم استخدام الكود الخاص بك |  
-| **سياسة الأمان** | يظهر أنك مسؤول | يوضح ممارسات احترافية |  
+| ما يجب إضافته | لماذا هو مهم | ماذا يفعل لك |
+|-------------|-------------------|---------------------|
+| **الوصف** | الانطباع الأول مهم! | يعرف الناس فورًا ما يفعله مشروعك |
+| **README** | الصفحة الرئيسية لمشروعك | مثل دليل سياحي ودود للزوار الجدد |
+| **إرشادات المساهمة** | يظهر أنك ترحب بالمساعدة | يعرف الناس بالضبط كيف يمكنهم مساعدتك |
+| **مدونة السلوك** | يخلق بيئة ودية | يشعر الجميع بالترحيب للمشاركة |
+| **الرخصة** | وضوح قانوني | يعرف الآخرون كيف يمكنهم استخدام الكود الخاص بك |
+| **سياسة الأمان** | يظهر أنك مسؤول | يوضح الممارسات المهنية |
 
-> 💡 **نصيحة احترافية**: يوفر GitHub قوالب لجميع هذه الملفات. عند إنشاء مستودع جديد، تحقق من المربعات لإنشاء هذه الملفات تلقائيًا.  
+> 💡 **نصيحة احترافية**: يوفر GitHub قوالب لجميع هذه الملفات. عند إنشاء مستودع جديد، تحقق من المربعات لإنشاء هذه الملفات تلقائيًا.
 
-**ميزات GitHub الحديثة لاستكشافها:**  
+**ميزات GitHub الحديثة لاستكشافها:**
 
-🤖 **الأتمتة وCI/CD:**  
-- **GitHub Actions** للاختبار والنشر التلقائي  
-- **Dependabot** لتحديث التبعيات تلقائيًا  
+🤖 **الأتمتة وCI/CD:**
+- **GitHub Actions** للاختبار والنشر التلقائي.
+- **Dependabot** لتحديث التبعيات تلقائيًا.
 
-💬 **المجتمع وإدارة المشاريع:**  
-- **GitHub Discussions** للمحادثات المجتمعية خارج نطاق القضايا  
-- **GitHub Projects** لإدارة المشاريع بأسلوب كانبان  
-- **قواعد حماية الفروع** لفرض معايير جودة الكود  
+💬 **إدارة المجتمع والمشاريع:**
+- **GitHub Discussions** للمحادثات المجتمعية خارج نطاق القضايا.
+- **GitHub Projects** لإدارة المشاريع بأسلوب كانبان.
+- **قواعد حماية الفروع** لفرض معايير جودة الكود.
 
-كل هذه الموارد ستفيد في استيعاب أعضاء الفريق الجدد. وهذه هي عادةً الأشياء التي ينظر إليها المساهمون الجدد قبل حتى النظر إلى الكود الخاص بك، لمعرفة ما إذا كان مشروعك هو المكان المناسب لقضاء وقتهم.  
+كل هذه الموارد ستفيد في استيعاب أعضاء الفريق الجدد. وهذه هي عادةً الأشياء التي ينظر إليها المساهمون الجدد قبل حتى النظر إلى الكود الخاص بك، لمعرفة ما إذا كان مشروعك هو المكان المناسب لهم لقضاء وقتهم.
 
-✅ ملفات README، على الرغم من أنها تستغرق وقتًا لإعدادها، غالبًا ما يتم تجاهلها من قبل المسؤولين المشغولين. هل يمكنك العثور على مثال لواحد وصفي بشكل خاص؟ ملاحظة: هناك بعض [الأدوات للمساعدة في إنشاء ملفات README جيدة](https://www.makeareadme.com/) قد ترغب في تجربتها.  
+✅ ملفات README، على الرغم من أنها تستغرق وقتًا للإعداد، غالبًا ما يتم تجاهلها من قبل المسؤولين المشغولين. هل يمكنك العثور على مثال لملف وصف مفصل بشكل خاص؟ ملاحظة: هناك بعض [الأدوات التي تساعد في إنشاء ملفات README جيدة](https://www.makeareadme.com/) قد ترغب في تجربتها.
 
-### المهمة: دمج بعض الكود  
+### المهمة: دمج بعض الكود
 
-تساعد وثائق المساهمة الأشخاص على المساهمة في المشروع. إنها تشرح أنواع المساهمات التي تبحث عنها وكيفية عمل العملية. سيحتاج المساهمون إلى المرور بسلسلة من الخطوات ليتمكنوا من المساهمة في مستودعك على GitHub:  
+تساعد وثائق المساهمة الأشخاص على المساهمة في المشروع. تشرح أنواع المساهمات التي تبحث عنها وكيفية عمل العملية. سيحتاج المساهمون إلى المرور بسلسلة من الخطوات ليتمكنوا من المساهمة في مستودعك على GitHub:
 
-1. **تفرع مستودعك** ربما تريد أن يقوم الناس بـ _تفرع_ مشروعك. التفرع يعني إنشاء نسخة طبق الأصل من مستودعك على ملف تعريف GitHub الخاص بهم.  
-1. **الاستنساخ**. من هناك سيقومون باستنساخ المشروع إلى جهازهم المحلي.  
-1. **إنشاء فرع**. سترغب في أن تطلب منهم إنشاء _فرع_ لعملهم.  
-1. **تركيز التغيير على منطقة واحدة**. اطلب من المساهمين التركيز على مساهماتهم في شيء واحد في كل مرة - بهذه الطريقة تكون فرصك في _دمج_ عملهم أعلى. تخيل أنهم كتبوا إصلاح خطأ، أضافوا ميزة جديدة، وقاموا بتحديث عدة اختبارات - ماذا لو كنت تريد، أو يمكنك فقط تنفيذ 2 من 3، أو 1 من 3 تغييرات؟  
+1. **نسخ مستودعك** ربما تريد أن يقوم الناس بـ _نسخ_ مشروعك. النسخ يعني إنشاء نسخة من مستودعك على ملف تعريف GitHub الخاص بهم.
+1. **الاستنساخ**. من هناك سيقومون باستنساخ المشروع إلى جهازهم المحلي.
+1. **إنشاء فرع**. ستطلب منهم إنشاء _فرع_ لعملهم.
+1. **تركيز التغيير على منطقة واحدة**. اطلب من المساهمين التركيز على مساهماتهم في شيء واحد في كل مرة - بهذه الطريقة تكون فرص أن تتمكن من _دمج_ عملهم أعلى. تخيل أنهم كتبوا إصلاح خطأ، أضافوا ميزة جديدة، وقاموا بتحديث عدة اختبارات - ماذا لو كنت تريد، أو يمكنك فقط تنفيذ 2 من 3، أو 1 من 3 تغييرات؟
 
-✅ تخيل موقفًا تكون فيه الفروع مهمة بشكل خاص لكتابة الكود الجيد وشحنه. ما هي حالات الاستخدام التي يمكنك التفكير فيها؟  
+✅ تخيل موقفًا تكون فيه الفروع ضرورية بشكل خاص لكتابة الكود الجيد وشحنه. ما هي حالات الاستخدام التي يمكنك التفكير فيها؟
 
-> ملاحظة، كن التغيير الذي تريد رؤيته في العالم، وقم بإنشاء فروع لعملك الخاص أيضًا. أي التزامات تقوم بها سيتم إجراؤها على الفرع الذي "تم التحقق منه" حاليًا. استخدم `git status` لمعرفة الفرع الذي تعمل عليه.  
+> ملاحظة، كن التغيير الذي تريد رؤيته في العالم، وقم بإنشاء فروع لعملك الخاص أيضًا. أي التزامات تقوم بها ستتم على الفرع الذي "تم التحقق منه" حاليًا. استخدم `git status` لمعرفة أي فرع هو.
 
-لنمر عبر تدفق عمل المساهم. افترض أن المساهم قد قام بالفعل بـ _تفرع_ و _استنساخ_ المستودع بحيث يكون لديه مستودع Git جاهز للعمل عليه، على جهازه المحلي:  
+لنمر عبر سير عمل المساهم. افترض أن المساهم قد قام بالفعل بـ _نسخ_ و _استنساخ_ المستودع بحيث يكون لديه مستودع Git جاهز للعمل عليه، على جهازه المحلي:
 
-1. **إنشاء فرع**. استخدم الأمر `git branch` لإنشاء فرع يحتوي على التغييرات التي يعتزم المساهمة بها:  
+1. **إنشاء فرع**. استخدم الأمر `git branch` لإنشاء فرع يحتوي على التغييرات التي يعتزم المساهمة بها:
 
    ```bash
    git branch [branch-name]
    ```
-  
-   > 💡 **نهج حديث**: يمكنك أيضًا إنشاء الفرع الجديد والتبديل إليه في أمر واحد:  
+
+   > 💡 **نهج حديث**: يمكنك أيضًا إنشاء والتبديل إلى الفرع الجديد في أمر واحد:
    ```bash
    git switch -c [branch-name]
    ```
-  
-1. **التبديل إلى الفرع العامل**. قم بالتبديل إلى الفرع المحدد وقم بتحديث الدليل العامل باستخدام `git switch`:  
+
+1. **التبديل إلى فرع العمل**. قم بالتبديل إلى الفرع المحدد وقم بتحديث الدليل العامل باستخدام `git switch`:
 
    ```bash
    git switch [branch-name]
    ```
-  
-   > 💡 **ملاحظة حديثة**: `git switch` هو البديل الحديث لـ `git checkout` عند تغيير الفروع. إنه أكثر وضوحًا وأمانًا للمبتدئين.  
 
-1. **قم بالعمل**. في هذه المرحلة تريد إضافة تغييراتك. لا تنس إخبار Git عنها باستخدام الأوامر التالية:  
+   > 💡 **ملاحظة حديثة**: `git switch` هو البديل الحديث لـ `git checkout` عند تغيير الفروع. إنه أكثر وضوحًا وأمانًا للمبتدئين.
+
+1. **قم بالعمل**. في هذه المرحلة، تريد إضافة تغييراتك. لا تنس إخبار Git بذلك باستخدام الأوامر التالية:
 
    ```bash
    git add .
    git commit -m "my changes"
    ```
-  
-   > ⚠️ **جودة رسالة الالتزام**: تأكد من إعطاء الالتزام اسمًا جيدًا، سواء من أجلك أو من أجل المسؤول عن المستودع الذي تساعد فيه. كن محددًا بشأن ما قمت بتغييره!  
 
-1. **دمج عملك مع فرع `main`**. في مرحلة ما تكون قد انتهيت من العمل وتريد دمج عملك مع عمل فرع `main`. قد يكون فرع `main` قد تغير في هذه الأثناء لذا تأكد من تحديثه أولاً إلى أحدث إصدار باستخدام الأوامر التالية:  
+   > ⚠️ **جودة رسالة الالتزام**: تأكد من إعطاء الالتزام اسمًا جيدًا، سواء من أجلك أو من أجل المسؤول عن المستودع الذي تساعد فيه. كن محددًا بشأن ما قمت بتغييره!
+
+1. **دمج عملك مع فرع `main`**. في مرحلة ما تكون قد انتهيت من العمل وتريد دمج عملك مع عمل فرع `main`. قد يكون فرع `main` قد تغير في هذه الأثناء لذا تأكد أولاً من تحديثه إلى أحدث إصدار باستخدام الأوامر التالية:
 
    ```bash
    git switch main
    git pull
    ```
-  
-   في هذه المرحلة تريد التأكد من أن أي _تعارضات_، وهي حالات لا يستطيع Git بسهولة _دمج_ التغييرات، تحدث في فرع العمل الخاص بك. لذلك قم بتشغيل الأوامر التالية:  
+
+   في هذه المرحلة تريد التأكد من أن أي _تعارضات_، وهي الحالات التي لا يستطيع Git بسهولة _دمج_ التغييرات، تحدث في فرع العمل الخاص بك. لذلك قم بتشغيل الأوامر التالية:
 
    ```bash
    git switch [branch_name]
    git merge main
    ```
-  
-   الأمر `git merge main` سيجلب جميع التغييرات من `main` إلى فرعك. نأمل أن تتمكن من المتابعة فقط. إذا لم يكن الأمر كذلك، سيخبرك VS Code بالمكان الذي يكون فيه Git _مرتبكًا_ وتقوم فقط بتعديل الملفات المتأثرة لتحديد المحتوى الأكثر دقة.  
 
-   💡 **بديل حديث**: فكر في استخدام `git rebase` للحصول على تاريخ أنظف:  
+   أمر `git merge main` سيجلب جميع التغييرات من `main` إلى فرعك. نأمل أن تتمكن من المتابعة بسهولة. إذا لم يكن الأمر كذلك، سيخبرك VS Code بالمكان الذي يكون فيه Git _مرتبكًا_ وستقوم بتعديل الملفات المتأثرة لتحديد المحتوى الأكثر دقة.
+
+   💡 **بديل حديث**: فكر في استخدام `git rebase` للحصول على تاريخ أنظف:
    ```bash
    git rebase main
    ```
-  
-   هذا يعيد تشغيل التزاماتك على أحدث فرع رئيسي، مما يخلق تاريخًا خطيًا.  
+   هذا يعيد تشغيل التزاماتك على أحدث فرع رئيسي، مما يخلق تاريخًا خطيًا.
 
-1. **أرسل عملك إلى GitHub**. إرسال عملك إلى GitHub يعني شيئين. دفع فرعك إلى مستودعك ثم فتح طلب سحب.  
+1. **أرسل عملك إلى GitHub**. إرسال عملك إلى GitHub يعني شيئين. دفع فرعك إلى مستودعك ثم فتح طلب سحب.
 
    ```bash
    git push --set-upstream origin [branch-name]
    ```
-  
-   الأمر أعلاه ينشئ الفرع على مستودعك المتفرع.  
 
-1. **افتح طلب سحب**. بعد ذلك، تريد فتح طلب سحب. تقوم بذلك عن طريق الانتقال إلى المستودع المتفرع على GitHub. سترى مؤشرًا على GitHub يسألك ما إذا كنت تريد إنشاء طلب سحب جديد، تضغط عليه ويتم نقلك إلى واجهة حيث يمكنك تغيير عنوان رسالة الالتزام، وإعطائها وصفًا أكثر ملاءمة. الآن سيرى المسؤول عن المستودع الذي قمت بتفرعه هذا الطلب و _أصابعك متقاطعة_ سيقدرون ويقومون بـ _دمج_ طلب السحب الخاص بك. أنت الآن مساهم، ياي :)  
+   الأمر أعلاه ينشئ الفرع على مستودعك المنسوخ.
+
+### 🤝 **اختبار مهارات التعاون: هل أنت جاهز للعمل مع الآخرين؟**
+
+**لنرى كيف تشعر بشأن التعاون:**
+- هل فكرة النسخ وطلبات السحب أصبحت واضحة لك الآن؟
+- ما هو الشيء الذي تريد ممارسته أكثر بشأن العمل مع الفروع؟
+- ما مدى راحتك في المساهمة في مشروع شخص آخر؟
+
+```mermaid
+mindmap
+  root((Git Collaboration))
+    Branching
+      Feature branches
+      Bug fix branches
+      Experimental work
+    Pull Requests
+      Code review
+      Discussion
+      Testing
+    Best Practices
+      Clear commit messages
+      Small focused changes
+      Good documentation
+```
+
+> **تعزيز الثقة**: كل مطور تعجب به كان يومًا ما متوترًا بشأن أول طلب سحب له. مجتمع GitHub مرحب جدًا بالمبتدئين!
+
+1. **افتح طلب سحب**. بعد ذلك، تريد فتح طلب سحب. تقوم بذلك عن طريق التنقل إلى المستودع المنسوخ على GitHub. سترى مؤشرًا على GitHub يسأل ما إذا كنت تريد إنشاء طلب سحب جديد، تضغط على ذلك وستنتقل إلى واجهة حيث يمكنك تغيير عنوان رسالة الالتزام، وإعطائها وصفًا أكثر ملاءمة. الآن سيرى المسؤول عن المستودع الذي نسخته هذا الطلب و _بإذن الله_ سيقدر ويقوم بـ _دمج_ طلب السحب الخاص بك. أنت الآن مساهم، تهانينا :)
 
-   💡 **نصيحة حديثة**: يمكنك أيضًا إنشاء طلبات السحب باستخدام GitHub CLI:  
+   💡 **نصيحة حديثة**: يمكنك أيضًا إنشاء طلبات السحب باستخدام GitHub CLI:
    ```bash
    gh pr create --title "Your PR title" --body "Description of changes"
    ```
-  
-   🔧 **أفضل الممارسات لطلبات السحب**:  
-   - قم بربط القضايا ذات الصلة باستخدام كلمات مثل "Fixes #123"  
-   - أضف لقطات شاشة للتغييرات في واجهة المستخدم  
-   - اطلب مراجعين محددين  
-   - استخدم طلبات السحب المؤقتة للعمل الجاري  
-   - تأكد من اجتياز جميع فحوصات CI قبل طلب المراجعة  
 
-1. **تنظيف**. يعتبر تنظيف الفروع بعد دمج طلب السحب بنجاح ممارسة جيدة. تريد تنظيف الفرع المحلي والفرع الذي دفعته إلى GitHub. أولاً دعنا نحذفه محليًا باستخدام الأمر التالي:  
+   🔧 **أفضل الممارسات لطلبات السحب**:
+   - قم بربط القضايا ذات الصلة باستخدام كلمات مثل "Fixes #123".
+   - أضف لقطات شاشة للتغييرات في واجهة المستخدم.
+   - اطلب مراجعين محددين.
+   - استخدم طلبات السحب المؤقتة للعمل الجاري.
+   - تأكد من اجتياز جميع فحوصات CI قبل طلب المراجعة.
+1. **تنظيف العمل**. يُعتبر من الممارسات الجيدة أن تقوم بـ _تنظيف العمل_ بعد دمج طلب السحب بنجاح. يجب عليك تنظيف كل من الفرع المحلي والفرع الذي قمت بدفعه إلى GitHub. أولاً، دعنا نحذفه محليًا باستخدام الأمر التالي:
 
    ```bash
    git branch -d [branch-name]
    ```
   
-   تأكد من الانتقال إلى صفحة GitHub للمستودع المتفرع بعد ذلك وإزالة الفرع البعيد الذي دفعته إليه.  
+تأكد من الذهاب إلى صفحة GitHub للمستودع المشتق بعد ذلك وإزالة الفرع البعيد الذي قمت بدفعه إليه.
+
+`طلب السحب` يبدو كأنه مصطلح غريب لأنك في الواقع تريد دفع تغييراتك إلى المشروع. ولكن يجب على المسؤول (مالك المشروع) أو الفريق الأساسي أن ينظر في تغييراتك قبل دمجها مع الفرع "الرئيسي" للمشروع، لذا فأنت في الواقع تطلب قرار تغيير من المسؤول.
 
-`طلب السحب` يبدو وكأنه مصطلح غريب لأنك في الواقع تريد دفع تغييراتك إلى المشروع. لكن المسؤول (مالك المشروع) أو الفريق الأساسي يحتاج إلى النظر في تغييراتك قبل دمجها مع فرع "main" الخاص بالمشروع، لذا فأنت في الواقع تطلب قرار تغيير من المسؤول.  
+طلب السحب هو المكان الذي يتم فيه مقارنة ومناقشة الفروقات التي تم إدخالها على فرع معين مع المراجعات، التعليقات، الاختبارات المدمجة، والمزيد. طلب السحب الجيد يتبع تقريبًا نفس قواعد رسالة الالتزام. يمكنك إضافة مرجع إلى مشكلة في متتبع المشاكل، عندما يكون عملك على سبيل المثال يحل مشكلة. يتم ذلك باستخدام `#` متبوعًا برقم المشكلة. على سبيل المثال `#97`.
 
-طلب السحب هو المكان الذي يتم فيه مقارنة ومناقشة الفروقات التي تم إدخالها على فرع مع المراجعات، التعليقات، الاختبارات المدمجة، والمزيد. يتبع طلب السحب الجيد تقريبًا نفس قواعد رسالة الالتزام. يمكنك إضافة مرجع إلى قضية في متتبع القضايا، عندما يكون عملك على سبيل المثال يحل قضية. يتم ذلك باستخدام `#` متبوعًا برقم القضية الخاصة بك. على سبيل المثال `#97`.  
-🤞أصابعك متشابكة على أمل أن تمر جميع الفحوصات ويتم دمج تغييراتك في المشروع من قبل مالكي المشروع🤞
+🤞نتمنى أن تمر جميع الفحوصات بنجاح وأن يقوم مالك المشروع بدمج تغييراتك في المشروع🤞
 
-قم بتحديث الفرع المحلي الحالي الخاص بك بجميع الالتزامات الجديدة من الفرع البعيد المقابل على GitHub:
+قم بتحديث الفرع المحلي الحالي الذي تعمل عليه بجميع الالتزامات الجديدة من الفرع البعيد المقابل على GitHub:
 
 `git pull`
 
@@ -466,23 +576,43 @@ git remote set-url origin git@github.com:username/repository.git
 
 هل أنت مستعد لشيء سيذهلك تمامًا؟ 🤯 دعنا نتحدث عن المساهمة في مشاريع المصادر المفتوحة – وأنا أشعر بالقشعريرة فقط من التفكير في مشاركة هذا معك!
 
-هذه فرصتك لتكون جزءًا من شيء استثنائي حقًا. تخيل تحسين الأدوات التي يستخدمها ملايين المطورين يوميًا، أو إصلاح خطأ في تطبيق يحبه أصدقاؤك. هذا ليس مجرد حلم – هذا هو جوهر المساهمة في المصادر المفتوحة!
-
-ما يجعلني أشعر بالإثارة كل مرة أفكر في الأمر: كل أداة كنت تتعلم بها – محرر الكود الخاص بك، الأطر التي سنستكشفها، وحتى المتصفح الذي تقرأ فيه هذا – بدأت بشخص مثلك تمامًا يقوم بأول مساهمة له. ذلك المطور الرائع الذي أنشأ امتداد VS Code المفضل لديك؟ كان يومًا ما مبتدئًا ينقر على "إنشاء طلب سحب" بأيدٍ مرتجفة، تمامًا كما أنت على وشك القيام به.
-
-وهنا الجزء الأكثر جمالًا: مجتمع المصادر المفتوحة يشبه أكبر عناق جماعي على الإنترنت. معظم المشاريع تبحث بنشاط عن القادمين الجدد وتضع قضايا موسومة بـ "good first issue" خصيصًا لأشخاص مثلك! المشرفون يشعرون بالحماس عندما يرون مساهمين جدد لأنهم يتذكرون خطواتهم الأولى.
-
+هذه فرصتك لتكون جزءًا من شيء استثنائي حقًا. تخيل تحسين الأدوات التي يستخدمها ملايين المطورين يوميًا، أو إصلاح خطأ في تطبيق يحبه أصدقاؤك. هذا ليس مجرد حلم – هذا هو ما تدور حوله مساهمة المصادر المفتوحة!
+
+ما يجعلني أشعر بالإثارة في كل مرة أفكر في ذلك: كل أداة كنت تتعلم بها – محرر الكود الخاص بك، الأطر التي سنستكشفها، حتى المتصفح الذي تقرأ فيه هذا – بدأت بشخص مثلك تمامًا يقوم بأول مساهمة له. ذلك المطور الرائع الذي بنى امتداد VS Code المفضل لديك؟ كان يومًا ما مبتدئًا ينقر على "إنشاء طلب سحب" بأيدٍ مرتجفة، تمامًا كما أنت على وشك القيام به.
+
+وهنا الجزء الأكثر جمالًا: مجتمع المصادر المفتوحة يشبه أكبر عناق جماعي على الإنترنت. معظم المشاريع تبحث بنشاط عن القادمين الجدد ولديها مشاكل موسومة بـ "good first issue" خصيصًا للأشخاص مثلك! المسؤولون يشعرون بالحماس عندما يرون مساهمين جدد لأنهم يتذكرون خطواتهم الأولى.
+
+```mermaid
+flowchart TD
+    A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
+    B --> C[📖 Read Contributing Guidelines]
+    C --> D[🍴 Fork Repository]
+    D --> E[💻 Set Up Local Environment]
+    E --> F[🌿 Create Feature Branch]
+    F --> G[✨ Make Your Contribution]
+    G --> H[🧪 Test Your Changes]
+    H --> I[📝 Write Clear Commit]
+    I --> J[📤 Push & Create PR]
+    J --> K[💬 Engage with Feedback]
+    K --> L[🎉 Merged! You're a Contributor!]
+    L --> M[🌟 Find Next Issue]
+    
+    style A fill:#e1f5fe
+    style L fill:#c8e6c9
+    style M fill:#fff59d
+```
+  
 أنت لا تتعلم البرمجة فقط هنا – أنت تستعد للانضمام إلى عائلة عالمية من البنائين الذين يستيقظون كل يوم وهم يفكرون "كيف يمكننا جعل العالم الرقمي أفضل قليلاً؟" مرحبًا بك في النادي! 🌟
 
-أولاً، دعنا نجد مستودعًا (أو **repo**) على GitHub يثير اهتمامك وترغب في المساهمة فيه. ستحتاج إلى نسخ محتوياته إلى جهازك.
+أولاً، دعنا نجد مستودعًا (أو **repo**) على GitHub يثير اهتمامك وترغب في المساهمة بتغيير فيه. ستحتاج إلى نسخ محتوياته إلى جهازك.
 
-✅ طريقة جيدة للعثور على مستودعات "مناسبة للمبتدئين" هي [البحث باستخدام الوسم 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+✅ طريقة جيدة للعثور على مستودعات مناسبة للمبتدئين هي [البحث باستخدام الوسم 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
 
 ![نسخ مستودع محليًا](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ar.png)
 
-هناك عدة طرق لنسخ الكود. إحدى الطرق هي "استنساخ" محتويات المستودع باستخدام HTTPS أو SSH أو باستخدام GitHub CLI (واجهة سطر الأوامر).
+هناك عدة طرق لنسخ الكود. إحدى الطرق هي "استنساخ" محتويات المستودع باستخدام HTTPS، SSH، أو باستخدام GitHub CLI (واجهة سطر الأوامر).
 
-افتح الطرفية الخاصة بك واستنسخ المستودع كالتالي:
+افتح الطرفية الخاصة بك واستنسخ المستودع كالتالي:  
 ```bash
 # Using HTTPS
 git clone https://github.com/ProjectURL
@@ -493,96 +623,155 @@ git clone git@github.com:username/repository.git
 # Using GitHub CLI
 gh repo clone username/repository
 ```
-
-للعمل على المشروع، انتقل إلى المجلد الصحيح:
+  
+للعمل على المشروع، انتقل إلى المجلد الصحيح:  
 `cd ProjectURL`
 
-يمكنك أيضًا فتح المشروع بالكامل باستخدام:
-- **[GitHub Codespaces](https://github.com/features/codespaces)** - بيئة تطوير سحابية من GitHub مع VS Code في المتصفح
-- **[GitHub Desktop](https://desktop.github.com/)** - تطبيق واجهة مستخدم لعمليات Git  
-- **[GitHub.dev](https://github.dev)** - اضغط على المفتاح `.` في أي مستودع GitHub لفتح VS Code في المتصفح
-- **VS Code** مع امتداد طلبات السحب من GitHub
+يمكنك أيضًا فتح المشروع بالكامل باستخدام:  
+- **[GitHub Codespaces](https://github.com/features/codespaces)** - بيئة تطوير سحابية من GitHub مع VS Code في المتصفح  
+- **[GitHub Desktop](https://desktop.github.com/)** - تطبيق واجهة المستخدم الرسومية لعمليات Git  
+- **[GitHub.dev](https://github.dev)** - اضغط على المفتاح `.` على أي مستودع GitHub لفتح VS Code في المتصفح  
+- **VS Code** مع امتداد طلبات السحب من GitHub  
 
 أخيرًا، يمكنك تنزيل الكود في مجلد مضغوط.
 
 ### بعض الأشياء المثيرة للاهتمام حول GitHub
 
-يمكنك وضع نجمة أو متابعة أو "استنساخ" أي مستودع عام على GitHub. يمكنك العثور على المستودعات التي وضعت لها نجمة في القائمة المنسدلة في الزاوية العلوية اليمنى. إنه مثل الإشارات المرجعية، ولكن للكود.
+يمكنك وضع نجمة، متابعة و/أو "استنساخ" أي مستودع عام على GitHub. يمكنك العثور على المستودعات التي وضعت لها نجمة في القائمة المنسدلة في الزاوية العلوية اليمنى. إنه مثل الإشارات المرجعية، ولكن للكود.
 
-المشاريع لديها متتبع قضايا، غالبًا على GitHub في علامة التبويب "Issues" ما لم يُذكر خلاف ذلك، حيث يناقش الناس القضايا المتعلقة بالمشروع. وعلامة التبويب Pull Requests هي المكان الذي يناقش فيه الناس ويستعرضون التغييرات التي قيد التنفيذ.
+المشاريع لديها متتبع مشاكل، غالبًا على GitHub في علامة التبويب "Issues" ما لم يُذكر خلاف ذلك، حيث يناقش الناس المشاكل المتعلقة بالمشروع. وعلامة التبويب طلبات السحب هي المكان الذي يناقش فيه الناس ويستعرضون التغييرات التي قيد التنفيذ.
 
-قد يكون للمشاريع أيضًا مناقشات في المنتديات أو قوائم البريد أو قنوات الدردشة مثل Slack أو Discord أو IRC.
+قد يكون للمشاريع أيضًا مناقشات في المنتديات، قوائم البريد الإلكتروني، أو قنوات الدردشة مثل Slack، Discord أو IRC.
 
-🔧 **ميزات GitHub الحديثة**:
-- **GitHub Discussions** - منتدى مدمج للمحادثات المجتمعية
-- **GitHub Sponsors** - دعم المشرفين ماليًا  
-- **علامة التبويب Security** - تقارير الثغرات والنصائح الأمنية
-- **علامة التبويب Actions** - عرض سير العمل الآلي وخطوط CI/CD
-- **علامة التبويب Insights** - تحليلات حول المساهمين والالتزامات وصحة المشروع
-- **علامة التبويب Projects** - أدوات إدارة المشاريع المدمجة من GitHub
+🔧 **ميزات GitHub الحديثة**:  
+- **GitHub Discussions** - منتدى مدمج للمحادثات المجتمعية  
+- **GitHub Sponsors** - دعم المسؤولين ماليًا  
+- **علامة التبويب الأمنية** - تقارير الثغرات والنصائح الأمنية  
+- **علامة التبويب الإجراءات** - عرض سير العمل الآلي وخطوط أنابيب CI/CD  
+- **علامة التبويب الإحصاءات** - تحليلات حول المساهمين، الالتزامات، وصحة المشروع  
+- **علامة التبويب المشاريع** - أدوات إدارة المشاريع المدمجة من GitHub  
 
-✅ ألقِ نظرة حول مستودع GitHub الجديد الخاص بك وجرب بعض الأشياء، مثل تعديل الإعدادات، إضافة معلومات إلى المستودع، إنشاء مشروع (مثل لوحة Kanban)، وإعداد GitHub Actions للتشغيل الآلي. هناك الكثير يمكنك القيام به!
+✅ ألقِ نظرة حول مستودع GitHub الجديد الخاص بك وجرب بعض الأشياء، مثل تعديل الإعدادات، إضافة معلومات إلى المستودع، إنشاء مشروع (مثل لوحة Kanban)، وإعداد إجراءات GitHub للتشغيل الآلي. هناك الكثير مما يمكنك القيام به!
 
 ---
 
-## 🚀 التحدي 
+## 🚀 التحدي
 
 حسنًا، حان الوقت لاختبار مهاراتك الجديدة في GitHub! 🚀 إليك تحديًا سيجعل كل شيء يتضح بطريقة مرضية للغاية:
 
-اجلب صديقًا (أو أحد أفراد العائلة الذي يسأل دائمًا عما تفعله بكل هذا "الأشياء المتعلقة بالحاسوب") وانطلقا في مغامرة برمجية تعاونية معًا! هنا تحدث السحر الحقيقي – أنشئ مشروعًا، دعهم يستنسخونه، أنشئ بعض الفروع، وادمج التغييرات مثل المحترفين الذين أصبحتما عليه.
+اجلب صديقًا (أو أحد أفراد العائلة الذي يسأل دائمًا عما تفعله بكل هذا "الأشياء المتعلقة بالحاسوب") وانطلقا في مغامرة برمجية تعاونية معًا! هنا حيث يحدث السحر الحقيقي – أنشئ مشروعًا، دعهم يستنسخونه، أنشئ بعض الفروع، وادمج التغييرات مثل المحترفين الذين أصبحتما عليه.
 
-لن أكذب – ربما تضحكان في مرحلة ما (خاصة عندما تحاولان تغيير نفس السطر)، وربما تحكان رأسيكما في حيرة، لكن بالتأكيد ستحظيان بلحظات "آها!" المذهلة التي تجعل كل التعلم يستحق العناء. بالإضافة إلى ذلك، هناك شيء خاص حول مشاركة أول دمج ناجح مع شخص آخر – إنه مثل احتفال صغير بمدى تقدمكما!
+لن أكذب – ربما ستضحكون في مرحلة ما (خاصة عندما تحاولان تغيير نفس السطر)، ربما تخدشان رأسيكما في حيرة، لكن بالتأكيد ستحصلان على تلك اللحظات الرائعة "آها!" التي تجعل كل التعلم يستحق العناء. بالإضافة إلى ذلك، هناك شيء خاص حول مشاركة أول دمج ناجح مع شخص آخر – إنه مثل احتفال صغير بمدى تقدمكما!
 
 ليس لديك شريك برمجة بعد؟ لا تقلق على الإطلاق! مجتمع GitHub مليء بأشخاص مرحبين للغاية يتذكرون كيف كان الأمر عندما كانوا جددًا. ابحث عن مستودعات تحمل وسوم "good first issue" – إنها تقول أساسًا "مرحبًا بالمبتدئين، تعالوا تعلموا معنا!" كم هذا رائع؟
 
-## اختبار ما بعد المحاضرة
+## اختبار ما بعد المحاضرة  
 [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/en/)
 
 ## المراجعة ومواصلة التعلم
 
-واو! 🎉 انظر إليك – لقد تغلبت للتو على أساسيات GitHub مثل بطل حقيقي! إذا شعرت أن عقلك ممتلئ قليلاً الآن، فهذا طبيعي تمامًا وبصراحة علامة جيدة. لقد تعلمت للتو أدوات استغرقني أسابيع لأشعر بالراحة معها عندما بدأت.
+واو! 🎉 انظر إليك – لقد تغلبت على أساسيات GitHub مثل بطل حقيقي! إذا شعرت أن عقلك ممتلئ قليلاً الآن، فهذا طبيعي تمامًا وبصراحة علامة جيدة. لقد تعلمت أدوات استغرقني أسابيع لأشعر بالراحة معها عندما بدأت.
 
-Git وGitHub قويان للغاية (بجدية، قويان جدًا)، وكل مطور أعرفه – بما في ذلك أولئك الذين يبدو أنهم سحرة الآن – كان عليهم أن يمارسوا ويتعثروا قليلاً قبل أن يتضح كل شيء. حقيقة أنك اجتزت هذا الدرس تعني أنك بالفعل في طريقك لإتقان بعض من أهم الأدوات في مجموعة أدوات المطور.
+Git وGitHub قويان للغاية (بجدية قويان)، وكل مطور أعرفه – بما في ذلك أولئك الذين يبدو أنهم سحرة الآن – كان عليهم أن يمارسوا ويتعثروا قليلاً قبل أن ينقر كل شيء. حقيقة أنك أكملت هذا الدرس تعني أنك بالفعل في طريقك لإتقان بعض من أهم الأدوات في مجموعة أدوات المطور.
 
-إليك بعض الموارد الرائعة لمساعدتك على الممارسة وتصبح أكثر روعة:
+إليك بعض الموارد الرائعة لمساعدتك على الممارسة وتصبح أكثر روعة:  
+- [دليل المساهمة في برامج المصادر المفتوحة](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – خارطة طريقك لإحداث فرق  
+- [ورقة الغش لـ Git](https://training.github.com/downloads/github-git-cheat-sheet/) – احتفظ بها في متناول يدك للرجوع السريع!  
 
-- [دليل المساهمة في برامج المصادر المفتوحة](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – خارطة طريقك لإحداث فرق
-- [ورقة غش Git](https://training.github.com/downloads/github-git-cheat-sheet/) – احتفظ بها في متناول يدك للرجوع السريع!
+وتذكر: الممارسة تصنع التقدم، وليس الكمال! كلما استخدمت Git وGitHub، أصبح الأمر طبيعيًا أكثر. لقد أنشأت GitHub بعض الدورات التفاعلية الرائعة التي تتيح لك الممارسة في بيئة آمنة:
 
-وتذكر: الممارسة تصنع التقدم، وليس الكمال! كلما استخدمت Git وGitHub، أصبح الأمر طبيعيًا أكثر. لقد أنشأت GitHub بعض الدورات التفاعلية المذهلة التي تتيح لك الممارسة في بيئة آمنة:
-
-- [مقدمة إلى GitHub](https://github.com/skills/introduction-to-github)
+- [مقدمة إلى GitHub](https://github.com/skills/introduction-to-github)  
 - [التواصل باستخدام Markdown](https://github.com/skills/communicate-using-markdown)  
-- [صفحات GitHub](https://github.com/skills/github-pages)
-- [إدارة تعارضات الدمج](https://github.com/skills/resolve-merge-conflicts)
+- [صفحات GitHub](https://github.com/skills/github-pages)  
+- [إدارة تعارضات الدمج](https://github.com/skills/resolve-merge-conflicts)  
 
-**تشعر بالمغامرة؟ تحقق من هذه الأدوات الحديثة:**
-- [وثائق GitHub CLI](https://cli.github.com/manual/) – عندما تريد أن تشعر وكأنك ساحر سطر الأوامر
-- [وثائق GitHub Codespaces](https://docs.github.com/en/codespaces) – البرمجة في السحابة!
-- [وثائق GitHub Actions](https://docs.github.com/en/actions) – أتمتة كل شيء
-- [أفضل ممارسات Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – ارتقِ بمستوى سير العمل الخاص بك 
+**تشعر بالمغامرة؟ تحقق من هذه الأدوات الحديثة:**  
+- [وثائق GitHub CLI](https://cli.github.com/manual/) – عندما تريد أن تشعر وكأنك ساحر سطر الأوامر  
+- [وثائق GitHub Codespaces](https://docs.github.com/en/codespaces) – البرمجة في السحابة!  
+- [وثائق GitHub Actions](https://docs.github.com/en/actions) – أتمتة كل شيء  
+- [أفضل ممارسات Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – ارتقِ بمستوى سير العمل الخاص بك  
 
 ## تحدي GitHub Copilot Agent 🚀
 
-استخدم وضع Agent لإكمال التحدي التالي:
+استخدم وضع الوكيل لإكمال التحدي التالي:
+
+**الوصف:** أنشئ مشروع تطوير ويب تعاوني يعرض سير العمل الكامل لـ GitHub الذي تعلمته في هذا الدرس. سيساعدك هذا التحدي على ممارسة إنشاء المستودعات، ميزات التعاون، وسير العمل الحديث لـ Git في سيناريو واقعي.
+
+**المهمة:** أنشئ مستودع GitHub عام جديد لمشروع بسيط "موارد تطوير الويب". يجب أن يتضمن المستودع ملف README.md منظمًا بشكل جيد يسرد أدوات وموارد تطوير الويب المفيدة، مصنفة حسب الفئات (HTML، CSS، JavaScript، إلخ). قم بإعداد المستودع بمعايير المجتمع المناسبة بما في ذلك الترخيص، إرشادات المساهمة، ومدونة السلوك. أنشئ على الأقل فرعين للميزات: واحد لإضافة موارد CSS وآخر لموارد JavaScript. قم بعمل التزامات لكل فرع مع رسائل التزام وصفية، ثم أنشئ طلبات سحب لدمج التغييرات مرة أخرى إلى الفرع الرئيسي. قم بتمكين ميزات GitHub مثل المشاكل، المناقشات، وقم بإعداد سير عمل أساسي لـ GitHub Actions لفحوصات تلقائية.
 
-**الوصف:** أنشئ مشروع تطوير ويب تعاوني يوضح سير العمل الكامل لـ GitHub الذي تعلمته في هذا الدرس. سيساعدك هذا التحدي على ممارسة إنشاء المستودعات، ميزات التعاون، وسير العمل الحديث لـ Git في سيناريو واقعي.
+## المهمة
 
-**المهمة:** أنشئ مستودع GitHub عام جديد لمشروع بسيط بعنوان "موارد تطوير الويب". يجب أن يتضمن المستودع ملف README.md منظمًا جيدًا يسرد أدوات وموارد تطوير الويب المفيدة، مصنفة حسب الفئات (HTML، CSS، JavaScript، إلخ). قم بإعداد المستودع بمعايير المجتمع المناسبة بما في ذلك ترخيص، إرشادات المساهمة، ومدونة سلوك. أنشئ على الأقل فرعين للميزات: واحد لإضافة موارد CSS وآخر لموارد JavaScript. قم بعمل التزامات لكل فرع مع رسائل التزام وصفية، ثم أنشئ طلبات سحب لدمج التغييرات مرة أخرى إلى الفرع الرئيسي. قم بتمكين ميزات GitHub مثل القضايا، المناقشات، وإعداد سير عمل GitHub Actions الأساسي لفحوصات آلية.
+مهمتك، إذا اخترت قبولها: أكمل دورة [مقدمة إلى GitHub](https://github.com/skills/introduction-to-github) على GitHub Skills. ستتيح لك هذه الدورة التفاعلية ممارسة كل ما تعلمته في بيئة آمنة وموجهة. بالإضافة إلى ذلك، ستحصل على شارة رائعة عند الانتهاء! 🏅
 
-## المهمة 
+**تشعر بالاستعداد لمزيد من التحديات؟**  
+- قم بإعداد مصادقة SSH لحساب GitHub الخاص بك (لا مزيد من كلمات المرور!)  
+- جرب استخدام GitHub CLI لعمليات Git اليومية  
+- أنشئ مستودعًا مع سير عمل GitHub Actions  
+- استكشف GitHub Codespaces بفتح هذا المستودع نفسه في محرر قائم على السحابة  
 
-مهمتك، إذا اخترت قبولها: أكمل دورة [مقدمة إلى GitHub](https://github.com/skills/introduction-to-github) على مهارات GitHub. ستتيح لك هذه الدورة التفاعلية ممارسة كل ما تعلمته في بيئة آمنة وموجهة. بالإضافة إلى ذلك، ستحصل على شارة رائعة عند الانتهاء! 🏅
+---
 
-**تشعر بالاستعداد لمزيد من التحديات؟**
-- قم بإعداد مصادقة SSH لحساب GitHub الخاص بك (لا مزيد من كلمات المرور!)
-- جرب استخدام GitHub CLI لعمليات Git اليومية الخاصة بك
-- أنشئ مستودعًا مع سير عمل GitHub Actions
-- استكشف GitHub Codespaces بفتح هذا المستودع نفسه في محرر قائم على السحابة
+## 🚀 جدول زمني لإتقان GitHub الخاص بك
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] ضع نجمة لهذا المستودع و3 مشاريع أخرى تثير اهتمامك  
+- [ ] قم بإعداد المصادقة الثنائية على حساب GitHub الخاص بك  
+- [ ] أنشئ README بسيط لأول مستودع لك  
+- [ ] تابع 5 مطورين يلهمك عملهم  
+
+### 🎯 **ما يمكنك إنجازه خلال هذه الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وفكر في رحلتك مع GitHub  
+- [ ] قم بإعداد مفاتيح SSH لمصادقة GitHub بدون كلمات مرور  
+- [ ] أنشئ أول التزام ذو معنى مع رسالة التزام رائعة  
+- [ ] استكشف علامة التبويب "استكشاف" في GitHub لاكتشاف المشاريع الرائجة  
+- [ ] مارس استنساخ مستودع وإجراء تغيير صغير  
+
+### 📅 **مغامرتك الأسبوعية مع GitHub**
+- [ ] أكمل دورات مهارات GitHub (مقدمة إلى GitHub، Markdown)  
+- [ ] قم بإنشاء أول طلب سحب لمشروع مفتوح المصدر  
+- [ ] أنشئ موقع GitHub Pages لعرض عملك  
+- [ ] انضم إلى مناقشات GitHub حول المشاريع التي تهمك  
+- [ ] أنشئ مستودعًا بمعايير المجتمع المناسبة (README، الترخيص، إلخ)  
+- [ ] جرب GitHub Codespaces للتطوير السحابي  
+
+### 🌟 **تحولك خلال شهر**
+- [ ] ساهم في 3 مشاريع مفتوحة المصدر مختلفة  
+- [ ] قم بتوجيه شخص جديد إلى GitHub (رد الجميل!)  
+- [ ] قم بإعداد سير عمل تلقائي باستخدام GitHub Actions  
+- [ ] أنشئ محفظة تعرض مساهماتك في GitHub  
+- [ ] شارك في Hacktoberfest أو أحداث مجتمعية مشابهة  
+- [ ] كن مسؤولًا عن مشروعك الخاص الذي يساهم فيه الآخرون  
+
+### 🎓 **التحقق النهائي من إتقان GitHub**
+
+**احتفل بمدى تقدمك:**  
+- ما هو الشيء المفضل لديك في استخدام GitHub؟  
+- ما هي ميزة التعاون التي تثير حماسك أكثر؟  
+- ما مدى ثقتك في المساهمة في المصادر المفتوحة الآن؟  
+- ما هو أول مشروع تريد المساهمة فيه؟
+
+```mermaid
+journey
+    title Your GitHub Confidence Journey
+    section Today
+      Nervous: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Contributing: 5: You
+      Connecting: 5: You
+    section Next Month
+      Collaborating: 5: You
+      Leading: 5: You
+      Inspiring Others: 5: You
+```
+  
+> 🌍 **مرحبًا بك في مجتمع المطورين العالمي!** لديك الآن الأدوات اللازمة للتعاون مع ملايين المطورين حول العالم. قد تبدو مساهمتك الأولى صغيرة، لكن تذكر - كل مشروع مفتوح المصدر كبير بدأ بشخص يقوم بأول التزام له. السؤال ليس إذا كنت ستحدث تأثيرًا، بل ما هو المشروع الرائع الذي سيستفيد من وجهة نظرك الفريدة أولاً! 🚀
 
 تذكر: كل خبير كان يومًا ما مبتدئًا. أنت قادر على ذلك! 💪
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/1-getting-started-lessons/3-accessibility/README.md b/translations/ar/1-getting-started-lessons/3-accessibility/README.md
index 672df9095f..3910315110 100644
--- a/translations/ar/1-getting-started-lessons/3-accessibility/README.md
+++ b/translations/ar/1-getting-started-lessons/3-accessibility/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90b19cde5b79b29e91babd3138cd8035",
-  "translation_date": "2025-10-22T14:09:35+00:00",
+  "original_hash": "7f2c48e04754724123ea100a822765e5",
+  "translation_date": "2025-11-03T12:30:15+00:00",
   "source_file": "1-getting-started-lessons/3-accessibility/README.md",
   "language_code": "ar"
 }
@@ -12,20 +12,62 @@ CO_OP_TRANSLATOR_METADATA:
 ![كل شيء عن إمكانية الوصول](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ar.png)
 > رسم توضيحي بواسطة [تومومي إيمورا](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your Accessibility Learning Adventure
+    section Foundation
+      Understanding Users: 5: You
+      Testing Tools: 4: You
+      POUR Principles: 5: You
+    section Build Skills
+      Semantic HTML: 4: You
+      Visual Design: 5: You
+      ARIA Techniques: 4: You
+    section Master Practice
+      Keyboard Navigation: 5: You
+      Form Accessibility: 4: You
+      Real-world Testing: 5: You
+```
+
 ## اختبار ما قبل المحاضرة
 [اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/)
 
 > قوة الويب تكمن في عالميته. الوصول للجميع بغض النظر عن الإعاقة هو جانب أساسي.
 >
-> \- السير تيموثي بيرنرز لي، مدير W3C ومخترع شبكة الويب العالمية
+> \- السير تيموثي بيرنرز لي، مدير W3C ومخترع شبكة الإنترنت العالمية
 
-إليك شيئًا قد يفاجئك: عندما تقوم بإنشاء مواقع ويب ميسرة، فأنت لا تساعد فقط الأشخاص ذوي الإعاقة - بل تجعل الويب أفضل للجميع!
+إليك شيئًا قد يفاجئك: عندما تقوم ببناء مواقع ويب ميسرة، فأنت لا تساعد فقط الأشخاص ذوي الإعاقة - بل تجعل الويب أفضل للجميع!
 
 هل لاحظت تلك المنحدرات عند زوايا الشوارع؟ تم تصميمها في الأصل للكراسي المتحركة، لكنها الآن تساعد الأشخاص الذين يستخدمون عربات الأطفال، وعمال التوصيل الذين يستخدمون العربات، والمسافرين الذين يحملون حقائب بعجلات، وحتى راكبي الدراجات. هذا بالضبط ما تفعله تصميمات الويب الميسرة - الحلول التي تساعد مجموعة واحدة غالبًا ما تفيد الجميع. رائع، أليس كذلك؟
 
-في هذه الدرس، سنستكشف كيفية إنشاء مواقع ويب تعمل حقًا للجميع، بغض النظر عن كيفية تصفحهم للويب. ستتعرف على تقنيات عملية مدمجة بالفعل في معايير الويب، وستجرب أدوات الاختبار بنفسك، وسترى كيف تجعل إمكانية الوصول مواقعك أكثر سهولة لجميع المستخدمين.
+في هذه الدرس، سنستكشف كيفية إنشاء مواقع ويب تعمل حقًا للجميع، بغض النظر عن كيفية تصفحهم للويب. ستكتشف تقنيات عملية مدمجة بالفعل في معايير الويب، وستتعرف على أدوات الاختبار، وسترى كيف تجعل إمكانية الوصول مواقعك أكثر سهولة لجميع المستخدمين.
 
-بحلول نهاية هذا الدرس، ستكون لديك الثقة لجعل إمكانية الوصول جزءًا طبيعيًا من سير عمل التطوير الخاص بك. مستعد لاستكشاف كيف يمكن للاختيارات التصميمية المدروسة أن تفتح الويب لمليارات المستخدمين؟ لنبدأ!
+بنهاية هذا الدرس، ستكون لديك الثقة لجعل إمكانية الوصول جزءًا طبيعيًا من سير عمل التطوير الخاص بك. جاهز لاستكشاف كيف يمكن للاختيارات التصميمية المدروسة أن تفتح الويب لمليارات المستخدمين؟ لنبدأ!
+
+```mermaid
+mindmap
+  root((Web Accessibility))
+    Users
+      Screen readers
+      Keyboard navigation
+      Voice control
+      Magnification
+    Technologies
+      HTML semantics
+      ARIA attributes
+      CSS focus indicators
+      Keyboard events
+    Benefits
+      Wider audience
+      Better SEO
+      Legal compliance
+      Universal design
+    Testing
+      Automated tools
+      Manual testing
+      User feedback
+      Real assistive tech
+```
 
 > يمكنك أخذ هذا الدرس على [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
 
@@ -33,15 +75,15 @@ CO_OP_TRANSLATOR_METADATA:
 
 قبل أن نبدأ في البرمجة، دعونا نأخذ لحظة لفهم كيف يتفاعل الأشخاص ذوو القدرات المختلفة مع الويب. هذا ليس مجرد نظرية - فهم أنماط التنقل الواقعية هذه سيجعلك مطورًا أفضل بكثير!
 
-تقنيات المساعدة هي أدوات مذهلة تساعد الأشخاص ذوي الإعاقة على التفاعل مع مواقع الويب بطرق قد تفاجئك. بمجرد أن تفهم كيفية عمل هذه التقنيات، يصبح إنشاء تجارب ويب ميسرة أكثر سهولة. إنه مثل تعلم رؤية الكود الخاص بك من خلال عيون شخص آخر.
+تقنيات المساعدة هي أدوات مذهلة تساعد الأشخاص ذوي الإعاقة على التفاعل مع مواقع الويب بطرق قد تفاجئك. بمجرد أن تتقن كيفية عمل هذه التقنيات، يصبح إنشاء تجارب ويب ميسرة أكثر سهولة. إنه مثل تعلم رؤية الكود الخاص بك من خلال عيون شخص آخر.
 
 ### قارئات الشاشة
 
 [قارئات الشاشة](https://en.wikipedia.org/wiki/Screen_reader) هي تقنيات متقدمة تحول النص الرقمي إلى صوت أو إخراج بطريقة برايل. بينما تُستخدم بشكل أساسي من قبل الأشخاص ذوي الإعاقات البصرية، فهي مفيدة أيضًا للمستخدمين الذين يعانون من صعوبات التعلم مثل عسر القراءة.
 
-أحب أن أفكر في قارئ الشاشة كأنه راوي ذكي يقرأ كتابًا لك. يقرأ المحتوى بصوت عالٍ بترتيب منطقي، ويعلن عن العناصر التفاعلية مثل "زر" أو "رابط"، ويوفر اختصارات لوحة المفاتيح للتنقل في الصفحة. ولكن هنا الأمر - يمكن لقارئات الشاشة أن تعمل بسحرها فقط إذا قمنا ببناء مواقع ويب ذات هيكل مناسب ومحتوى ذو معنى. وهنا يأتي دورك كمطور!
+أحب أن أفكر في قارئ الشاشة كأنه راوي ذكي يقرأ كتابًا لك. يقرأ المحتوى بصوت عالٍ بترتيب منطقي، ويعلن عن العناصر التفاعلية مثل "زر" أو "رابط"، ويوفر اختصارات لوحة المفاتيح للتنقل في الصفحة. ولكن هناك شيء مهم - يمكن لقارئات الشاشة أن تعمل بسحرها فقط إذا قمنا ببناء مواقع ويب ذات هيكل مناسب ومحتوى ذو معنى. وهنا يأتي دورك كمطور!
 
-**أشهر قارئات الشاشة عبر المنصات:**
+**قارئات الشاشة الشهيرة عبر المنصات:**
 - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (مجاني والأكثر شعبية)، [JAWS](https://webaim.org/articles/jaws/)، [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (مضمن)
 - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (مضمن وقوي جدًا)
 - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (مضمن)
@@ -56,72 +98,80 @@ CO_OP_TRANSLATOR_METADATA:
 - **قوائم الروابط**: إنشاء قائمة بجميع الروابط للوصول السريع
 - **عناصر التحكم في النماذج**: التنقل مباشرة بين حقول الإدخال والأزرار
 
-> 💡 **إليك شيئًا أدهشني**: 68% من مستخدمي قارئات الشاشة يتنقلون بشكل أساسي عبر العناوين ([استطلاع WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). هذا يعني أن هيكل العناوين الخاص بك يشبه خارطة طريق للمستخدمين - عندما تقوم بذلك بشكل صحيح، فإنك تساعد الناس حرفيًا في العثور على طريقهم حول المحتوى الخاص بك بشكل أسرع!
+> 💡 **شيء أذهلني**: 68% من مستخدمي قارئات الشاشة يتنقلون بشكل أساسي عبر العناوين ([استطلاع WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). هذا يعني أن هيكل العناوين الخاص بك يشبه خارطة طريق للمستخدمين - عندما تقوم بذلك بشكل صحيح، فإنك تساعد الناس حرفيًا في العثور على طريقهم حول المحتوى الخاص بك بشكل أسرع!
 
 ### بناء سير عمل الاختبار الخاص بك
 
-إليك بعض الأخبار الجيدة - لا يجب أن يكون اختبار إمكانية الوصول فعالًا أمرًا مربكًا! ستحتاج إلى الجمع بين الأدوات الآلية (فهي رائعة في اكتشاف المشكلات الواضحة) وبعض الاختبارات اليدوية. إليك نهجًا منهجيًا وجدته يكتشف معظم المشكلات دون أن يستهلك يومك بالكامل:
+إليك بعض الأخبار الجيدة - اختبار إمكانية الوصول الفعال لا يجب أن يكون مرهقًا! سترغب في الجمع بين الأدوات الآلية (فهي رائعة في اكتشاف المشكلات الواضحة) وبعض الاختبارات اليدوية. إليك نهجًا منهجيًا وجدته يكتشف معظم المشكلات دون أن يستهلك يومك بالكامل:
 
 **سير عمل الاختبار اليدوي الأساسي:**
 
 ```mermaid
-graph TD
-    A[Start Testing] --> B{Keyboard Navigation}
+flowchart TD
+    A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation}
     B --> C[Tab through all interactive elements]
-    C --> D{Screen Reader Testing}
+    C --> D{🎧 Screen Reader Testing}
     D --> E[Test with NVDA/VoiceOver]
-    E --> F{Zoom Testing}
+    E --> F{🔍 Zoom Testing}
     F --> G[Zoom to 200% and test functionality]
-    G --> H{Color/Contrast Check}
+    G --> H{🎨 Color/Contrast Check}
     H --> I[Verify all text meets contrast ratios]
-    I --> J{Focus Management}
+    I --> J{👁️ Focus Management}
     J --> K[Ensure focus indicators are visible]
-    K --> L[Testing Complete]
+    K --> L[✅ Testing Complete]
+    
+    style A fill:#e3f2fd
+    style L fill:#e8f5e8
+    style B fill:#fff3e0
+    style D fill:#f3e5f5
+    style F fill:#e0f2f1
+    style H fill:#fce4ec
+    style J fill:#e8eaf6
 ```
 
 **قائمة التحقق خطوة بخطوة للاختبار:**
 1. **التنقل باستخدام لوحة المفاتيح**: استخدم فقط Tab، Shift+Tab، Enter، Space، ومفاتيح الأسهم
-2. **اختبار قارئ الشاشة**: قم بتفعيل NVDA أو VoiceOver أو Narrator وتصفح مع إغلاق عينيك
+2. **اختبار قارئ الشاشة**: قم بتشغيل NVDA أو VoiceOver أو Narrator وتصفح مع إغلاق عينيك
 3. **اختبار التكبير**: اختبر عند مستويات تكبير 200% و400%
 4. **التحقق من تباين الألوان**: تحقق من جميع النصوص ومكونات واجهة المستخدم
-5. **اختبار مؤشر التركيز**: تأكد من أن جميع العناصر التفاعلية لها حالات تركيز مرئية
+5. **اختبار مؤشر التركيز**: تأكد من أن جميع العناصر التفاعلية لديها حالات تركيز مرئية
 
-✅ **ابدأ بـ Lighthouse**: افتح أدوات المطور في متصفحك، قم بتشغيل تدقيق إمكانية الوصول في Lighthouse، ثم استخدم النتائج لتوجيه تركيزك في الاختبار اليدوي.
+✅ **ابدأ بـ Lighthouse**: افتح أدوات المطور في متصفحك، قم بتشغيل تدقيق إمكانية الوصول في Lighthouse، ثم استخدم النتائج لتوجيه مناطق التركيز في الاختبار اليدوي.
 
 ### أدوات التكبير والتصغير
 
-تعرف كيف تقوم أحيانًا بتكبير الشاشة على هاتفك عندما يكون النص صغيرًا جدًا، أو تحاول قراءة شاشة الكمبيوتر المحمول في ضوء الشمس الساطع؟ العديد من المستخدمين يعتمدون على أدوات التكبير لجعل المحتوى قابلاً للقراءة كل يوم. يشمل ذلك الأشخاص ذوي الرؤية الضعيفة، كبار السن، وأي شخص حاول قراءة موقع ويب في الهواء الطلق.
+تعرف كيف تقوم أحيانًا بتكبير النص على هاتفك عندما يكون صغيرًا جدًا، أو تحاول قراءة شاشة الكمبيوتر المحمول في ضوء الشمس الساطع؟ يعتمد العديد من المستخدمين على أدوات التكبير لجعل المحتوى قابلاً للقراءة كل يوم. يشمل ذلك الأشخاص ذوي الرؤية الضعيفة، وكبار السن، وأي شخص حاول قراءة موقع ويب في الهواء الطلق.
 
-تطورت تقنيات التكبير الحديثة لتتجاوز مجرد تكبير الأشياء. فهم كيفية عمل هذه الأدوات سيساعدك على إنشاء تصميمات متجاوبة تظل وظيفية وجذابة عند أي مستوى من التكبير.
+تطورت تقنيات التكبير الحديثة إلى ما هو أبعد من مجرد جعل الأشياء أكبر. فهم كيفية عمل هذه الأدوات سيساعدك على إنشاء تصميمات متجاوبة تظل وظيفية وجذابة عند أي مستوى تكبير.
 
 **قدرات التكبير الحديثة في المتصفحات:**
 - **تكبير الصفحة**: يوسع كل المحتوى بشكل متناسب (النصوص، الصور، التخطيط) - هذه هي الطريقة المفضلة
 - **تكبير النص فقط**: يزيد حجم الخط مع الحفاظ على التخطيط الأصلي
-- **التكبير بالقرص**: دعم إيماءات الهاتف المحمول للتكبير المؤقت
-- **دعم المتصفح**: جميع المتصفحات الحديثة تدعم التكبير حتى 500% دون كسر الوظائف
+- **التكبير بالقرص**: دعم الإيماءات على الأجهزة المحمولة للتكبير المؤقت
+- **دعم المتصفحات**: جميع المتصفحات الحديثة تدعم التكبير حتى 500% دون كسر الوظائف
 
 **برامج التكبير المتخصصة:**
 - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (مضمن)، [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
 - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (مضمن مع ميزات متقدمة)
 
-> ⚠️ **اعتبار التصميم**: تتطلب WCAG أن يظل المحتوى وظيفيًا عند تكبيره إلى 200%. عند هذا المستوى، يجب أن يكون التمرير الأفقي محدودًا، ويجب أن تظل جميع العناصر التفاعلية قابلة للوصول.
+> ⚠️ **اعتبار التصميم**: يتطلب WCAG أن يظل المحتوى وظيفيًا عند تكبيره إلى 200%. عند هذا المستوى، يجب أن يكون التمرير الأفقي محدودًا، ويجب أن تظل جميع العناصر التفاعلية قابلة للوصول.
 
-✅ **اختبر تصميمك المتجاوب**: قم بتكبير متصفحك إلى 200% و400%. هل يتكيف تخطيطك بشكل جيد؟ هل لا يزال بإمكانك الوصول إلى جميع الوظائف دون تمرير مفرط؟
+✅ **اختبر تصميمك المتجاوب**: قم بتكبير متصفحك إلى 200% و400%. هل يتكيف التخطيط الخاص بك بشكل جيد؟ هل يمكنك الوصول إلى جميع الوظائف دون تمرير مفرط؟
 
 ## أدوات اختبار إمكانية الوصول الحديثة
 
 الآن بعد أن فهمت كيف يتنقل الناس في الويب باستخدام تقنيات المساعدة، دعونا نستكشف الأدوات التي تساعدك في بناء واختبار مواقع ويب ميسرة.
 
-فكر في الأمر بهذه الطريقة: الأدوات الآلية رائعة في اكتشاف المشكلات الواضحة (مثل النصوص البديلة المفقودة)، بينما يساعدك الاختبار اليدوي في ضمان أن موقعك يشعر بالراحة عند الاستخدام في العالم الحقيقي. معًا، يمنحك الثقة بأن مواقعك تعمل للجميع.
+فكر في الأمر بهذه الطريقة: الأدوات الآلية رائعة في اكتشاف المشكلات الواضحة (مثل النصوص البديلة المفقودة)، بينما يساعدك الاختبار اليدوي في ضمان أن موقعك يشعر بالراحة في الاستخدام في العالم الحقيقي. معًا، يمنحك الثقة بأن مواقعك تعمل للجميع.
 
 ### اختبار تباين الألوان
 
-إليك بعض الأخبار الجيدة: تباين الألوان هو أحد أكثر مشكلات إمكانية الوصول شيوعًا، ولكنه أيضًا من أسهل المشكلات التي يمكن حلها. التباين الجيد يفيد الجميع - من المستخدمين ذوي الإعاقات البصرية إلى الأشخاص الذين يحاولون قراءة هواتفهم على الشاطئ.
+إليك بعض الأخبار الجيدة: تباين الألوان هو أحد أكثر مشكلات إمكانية الوصول شيوعًا، ولكنه أيضًا من أسهل المشكلات التي يمكن إصلاحها. التباين الجيد يفيد الجميع - من المستخدمين ذوي الإعاقات البصرية إلى الأشخاص الذين يحاولون قراءة هواتفهم على الشاطئ.
 
 **متطلبات تباين WCAG:**
 
 | نوع النص | WCAG AA (الحد الأدنى) | WCAG AAA (المعزز) |
-|----------|-----------------------|-------------------|
+|-----------|-------------------|---------------------|
 | **النص العادي** (أقل من 18pt) | نسبة تباين 4.5:1 | نسبة تباين 7:1 |
 | **النص الكبير** (18pt+ أو 14pt+ بخط عريض) | نسبة تباين 3:1 | نسبة تباين 4.5:1 |
 | **مكونات واجهة المستخدم** (الأزرار، حدود النماذج) | نسبة تباين 3:1 | نسبة تباين 3:1 |
@@ -132,13 +182,13 @@ graph TD
 - [Stark](https://www.getstark.co/) - إضافة أدوات التصميم لـ Figma، Sketch، Adobe XD
 - [Accessible Colors](https://accessible-colors.com/) - العثور على لوحات ألوان ميسرة
 
-✅ **قم ببناء لوحات ألوان أفضل**: ابدأ بألوان علامتك التجارية واستخدم أدوات التباين لإنشاء تنويعات ميسرة. وثق هذه كرموز ألوان ميسرة في نظام التصميم الخاص بك.
+✅ **قم ببناء لوحات ألوان أفضل**: ابدأ بألوان العلامة التجارية الخاصة بك واستخدم أدوات التباين لإنشاء تنويعات ميسرة. قم بتوثيق هذه كرموز ألوان ميسرة لنظام التصميم الخاص بك.
 
 ### التدقيق الشامل لإمكانية الوصول
 
 أكثر طرق اختبار إمكانية الوصول فعالية تجمع بين عدة أساليب. لا توجد أداة واحدة تكتشف كل شيء، لذا فإن بناء روتين اختبار باستخدام طرق متنوعة يضمن تغطية شاملة.
 
-**اختبار المستعرض (مضمن في أدوات المطور):**
+**اختبار قائم على المتصفح (مضمن في أدوات المطور):**
 - **Chrome/Edge**: تدقيق إمكانية الوصول في Lighthouse + لوحة إمكانية الوصول
 - **Firefox**: مفتش إمكانية الوصول مع عرض شجرة مفصل
 - **Safari**: علامة التدقيق في Web Inspector مع محاكاة VoiceOver
@@ -151,21 +201,54 @@ graph TD
 **التكامل مع سطر الأوامر وCI/CD:**
 - [axe-core](https://github.com/dequelabs/axe-core) - مكتبة JavaScript للاختبار الآلي
 - [Pa11y](https://pa11y.org/) - أداة اختبار إمكانية الوصول عبر سطر الأوامر
-- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - تسجيل إمكانية الوصول الآلي
+- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - تسجيل نقاط إمكانية الوصول تلقائيًا
 
 > 🎯 **هدف الاختبار**: استهدف الحصول على درجة إمكانية الوصول في Lighthouse تبلغ 95+ كخط أساس. تذكر، الأدوات الآلية تكتشف حوالي 30-40% فقط من مشكلات إمكانية الوصول - الاختبار اليدوي لا يزال ضروريًا!
 
+### 🧠 **اختبار المهارات: هل أنت جاهز لاكتشاف المشكلات؟**
+
+**لنرى كيف تشعر بشأن اختبار إمكانية الوصول:**
+- أي طريقة اختبار تبدو أكثر سهولة بالنسبة لك الآن؟
+- هل يمكنك تخيل استخدام التنقل بلوحة المفاتيح فقط ليوم كامل؟
+- ما هي إحدى حواجز إمكانية الوصول التي واجهتها شخصيًا عبر الإنترنت؟
+
+```mermaid
+pie title "Accessibility Issues Caught by Different Methods"
+    "Automated Tools" : 35
+    "Manual Testing" : 40
+    "User Feedback" : 25
+```
+
+> **تعزيز الثقة**: يستخدم مختبرو إمكانية الوصول المحترفون هذا المزيج بالضبط من الأساليب. أنت تتعلم ممارسات قياسية في الصناعة!
+
 ## بناء إمكانية الوصول من البداية
 
-مفتاح النجاح في إمكانية الوصول هو تضمينه في الأساس منذ اليوم الأول. أعلم أنه من المغري التفكير "سأضيف إمكانية الوصول لاحقًا"، لكن هذا يشبه محاولة إضافة منحدر إلى منزل بعد بنائه بالفعل. هل يمكن؟ نعم. هل هو سهل؟ ليس حقًا.
+المفتاح لنجاح إمكانية الوصول هو تضمينها في الأساس منذ اليوم الأول. أعلم أنه من المغري التفكير "سأضيف إمكانية الوصول لاحقًا"، لكن هذا يشبه محاولة إضافة منحدر إلى منزل بعد بنائه بالفعل. ممكن؟ نعم. سهل؟ ليس حقًا.
 
 فكر في إمكانية الوصول كالتخطيط لمنزل - من الأسهل بكثير تضمين إمكانية الوصول للكراسي المتحركة في خططك المعمارية الأولية بدلاً من تعديل كل شيء لاحقًا.
 
 ### مبادئ POUR: أساس إمكانية الوصول الخاص بك
 
-تستند إرشادات محتوى الويب (WCAG) إلى أربعة مبادئ أساسية تُعرف باسم POUR. لا تقلق - هذه ليست مفاهيم أكاديمية مملة! إنها في الواقع إرشادات عملية لإنشاء محتوى يعمل للجميع.
+تستند إرشادات محتوى الويب (WCAG) إلى أربعة مبادئ أساسية تُعرف بـ POUR. لا تقلق - هذه ليست مفاهيم أكاديمية مملة! إنها في الواقع إرشادات عملية لجعل المحتوى يعمل للجميع.
 
-بمجرد أن تفهم POUR، يصبح اتخاذ قرارات إمكانية الوصول أكثر سهولة. إنه مثل وجود قائمة تحقق ذهنية توجه اختياراتك التصميمية. دعونا نوضحها:
+بمجرد أن تتقن POUR، يصبح اتخاذ قرارات إمكانية الوصول أكثر سهولة. إنه مثل وجود قائمة تحقق ذهنية توجه اختياراتك التصميمية. دعونا نوضحها:
+
+```mermaid
+flowchart LR
+    A[🔍 PERCEIVABLE<br/>Can users sense it?] --> B[🎮 OPERABLE<br/>Can users use it?]
+    B --> C[📖 UNDERSTANDABLE<br/>Can users get it?]
+    C --> D[💪 ROBUST<br/>Does it work everywhere?]
+    
+    A1[Alt text<br/>Captions<br/>Contrast] --> A
+    B1[Keyboard access<br/>No seizures<br/>Time limits] --> B
+    C1[Clear language<br/>Predictable<br/>Error help] --> C
+    D1[Valid code<br/>Compatible<br/>Future-proof] --> D
+    
+    style A fill:#e1f5fe
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
 
 **🔍 قابل للإدراك**: يجب تقديم المعلومات بطرق يمكن للمستخدمين إدراكها من خلال حواسهم المتاحة
 
@@ -177,11 +260,11 @@ graph TD
 
 **🎮 قابل للتشغيل**: يجب أن تكون جميع مكونات الواجهة قابلة للتشغيل من خلال طرق الإدخال المتاحة
 
-- جعل جميع الوظائف قابلة للوصول عبر التنقل باستخدام لوحة المفاتيح
+- جعل جميع الوظائف قابلة للوصول عبر التنقل بلوحة المفاتيح
 - توفير وقت كافٍ للمستخدمين لقراءة والتفاعل مع المحتوى
 - تجنب المحتوى الذي يسبب نوبات أو اضطرابات في الجهاز الدهليزي
 - مساعدة المستخدمين على التنقل بكفاءة من خلال هيكل واضح ومعالم
-- ضمان أن تكون العناصر التفاعلية ذات أحجام مستهدفة كافية (44px كحد أدنى)
+- ضمان أن العناصر التفاعلية لديها أحجام أهداف كافية (44px كحد أدنى)
 
 **📖 مفهوم**: يجب أن تكون المعلومات وتشغيل واجهة المستخدم واضحة ومفهومة
 
@@ -193,29 +276,57 @@ graph TD
 
 **💪 قوي**: يجب أن يعمل المحتوى بشكل موثوق عبر التقنيات المختلفة والأجهزة المساعدة
 
-- استخدام HTML صالح ودلالي كأساس
-- ضمان التوافق مع التقنيات المساعدة الحالية والمستقبلية
-- اتباع معايير الويب وأفضل الممارسات للعلامات
-- اختبار عبر المتصفحات المختلفة والأجهزة والأدوات المساعدة
-- هيكلة المحتوى بحيث يتحلل بشكل جيد عندما لا تكون الميزات المتقدمة مدعومة
+- **استخدام HTML صالح ودلالي كأساس**
+- **ضمان التوافق مع التقنيات المساعدة الحالية والمستقبلية**
+- **اتباع معايير الويب وأفضل الممارسات للترميز**
+- **اختبر عبر متصفحات وأجهزة وأدوات مساعدة مختلفة**
+- **هيكل المحتوى بحيث يتدهور بشكل سلس عندما لا تكون الميزات المتقدمة مدعومة**
+
+### 🎯 **مراجعة مبادئ POUR: اجعلها ثابتة**
+
+**تفكير سريع في الأساسيات:**
+- هل يمكنك التفكير في ميزة موقع ويب تفشل في كل مبدأ من مبادئ POUR؟
+- أي مبدأ يبدو أكثر طبيعية بالنسبة لك كمطور؟
+- كيف يمكن لهذه المبادئ تحسين التصميم للجميع، وليس فقط للمستخدمين ذوي الإعاقة؟
+
+```mermaid
+quadrantChart
+    title POUR Principles Impact Matrix
+    x-axis Low Effort --> High Effort
+    y-axis Low Impact --> High Impact
+    quadrant-1 Quick Wins
+    quadrant-2 Major Projects
+    quadrant-3 Consider Later
+    quadrant-4 Strategic Focus
+    
+    Alt Text: [0.2, 0.9]
+    Color Contrast: [0.3, 0.8]
+    Semantic HTML: [0.4, 0.9]
+    Keyboard Nav: [0.6, 0.8]
+    ARIA Complex: [0.8, 0.7]
+    Screen Reader Testing: [0.7, 0.6]
+```
+
+> **تذكر**: ابدأ بتحسينات ذات تأثير كبير وجهد منخفض. يمنحك HTML الدلالي والنص البديل أكبر دفعة في إمكانية الوصول بأقل جهد!
 
-## إنشاء تصميم بصري ميسر
+## إنشاء تصميم بصري يمكن الوصول إليه
 
 التصميم البصري الجيد وإمكانية الوصول يسيران جنبًا إلى جنب. عندما تصمم مع مراعاة إمكانية الوصول، غالبًا ما تكتشف أن هذه القيود تؤدي إلى حلول أنظف وأكثر أناقة تفيد جميع المستخدمين.
 
 دعونا نستكشف كيفية إنشاء تصميمات جذابة بصريًا تعمل للجميع، بغض النظر عن قدراتهم البصرية أو الظروف التي يشاهدون فيها المحتوى الخاص بك.
 
 ### استراتيجيات اللون وإمكانية الوصول البصري
-اللون أداة قوية للتواصل، لكنه لا يجب أن يكون الطريقة الوحيدة لنقل المعلومات المهمة. التصميم الذي يتجاوز اللون يخلق تجارب أكثر شمولية وقوة تعمل في مختلف الظروف.
 
-**التصميم لمراعاة اختلافات رؤية الألوان:**
+اللون قوي للتواصل، لكنه لا يجب أن يكون الطريقة الوحيدة التي تنقل بها المعلومات المهمة. التصميم بما يتجاوز اللون يخلق تجارب أكثر قوة وشمولية تعمل في المزيد من المواقف.
+
+**التصميم للاختلافات في رؤية الألوان:**
 
-حوالي 8% من الرجال و0.5% من النساء يعانون من نوع من اختلافات رؤية الألوان (غالبًا ما يُطلق عليه "عمى الألوان"). الأنواع الأكثر شيوعًا هي:
+حوالي 8% من الرجال و0.5% من النساء لديهم نوع من اختلاف رؤية الألوان (غالبًا ما يُطلق عليه "عمى الألوان"). الأنواع الأكثر شيوعًا هي:
 - **Deuteranopia**: صعوبة في التمييز بين الأحمر والأخضر
-- **Protanopia**: يظهر اللون الأحمر بشكل باهت
-- **Tritanopia**: صعوبة في التمييز بين الأزرق والأصفر (نادر)
+- **Protanopia**: يظهر اللون الأحمر أكثر خفوتًا
+- **Tritanopia**: صعوبة مع الأزرق والأصفر (نادر)
 
-**استراتيجيات شاملة للألوان:**
+**استراتيجيات اللون الشاملة:**
 
 ```css
 /* ❌ Bad: Using only color to indicate status */
@@ -242,17 +353,17 @@ graph TD
 }
 ```
 
-**ما يتجاوز متطلبات التباين الأساسية:**
+**ما وراء متطلبات التباين الأساسية:**
 - اختبر اختياراتك للألوان باستخدام محاكيات عمى الألوان
-- استخدم الأنماط أو القوام أو الأشكال بجانب الترميز اللوني
-- تأكد من أن الحالات التفاعلية تظل مميزة بدون الاعتماد على اللون
+- استخدم الأنماط أو القوام أو الأشكال بجانب ترميز الألوان
+- تأكد من أن الحالات التفاعلية تظل قابلة للتمييز بدون اللون
 - فكر في كيفية ظهور تصميمك في وضع التباين العالي
 
-✅ **اختبر إمكانية الوصول للألوان**: استخدم أدوات مثل [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) لمعرفة كيف يظهر موقعك للمستخدمين الذين يعانون من أنواع مختلفة من رؤية الألوان.
+✅ **اختبر إمكانية الوصول للألوان**: استخدم أدوات مثل [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) لترى كيف يظهر موقعك للمستخدمين الذين لديهم أنواع مختلفة من رؤية الألوان.
 
 ### مؤشرات التركيز وتصميم التفاعل
 
-مؤشرات التركيز هي المكافئ الرقمي للمؤشر—تُظهر لمستخدمي لوحة المفاتيح مكان وجودهم على الصفحة. مؤشرات التركيز المصممة جيدًا تعزز التجربة للجميع من خلال جعل التفاعلات واضحة وقابلة للتنبؤ.
+مؤشرات التركيز هي المكافئ الرقمي للمؤشر - فهي تظهر للمستخدمين الذين يستخدمون لوحة المفاتيح مكان وجودهم على الصفحة. تعزز مؤشرات التركيز المصممة جيدًا التجربة للجميع من خلال جعل التفاعلات واضحة ويمكن التنبؤ بها.
 
 **أفضل ممارسات مؤشرات التركيز الحديثة:**
 
@@ -285,19 +396,41 @@ button:focus:not(:focus-visible) {
 
 **متطلبات مؤشرات التركيز:**
 - **الرؤية**: يجب أن يكون لها نسبة تباين لا تقل عن 3:1 مع العناصر المحيطة
-- **العرض**: سمك لا يقل عن 2px حول العنصر بالكامل
+- **العرض**: سمك لا يقل عن 2 بكسل حول العنصر بالكامل
 - **الاستمرارية**: يجب أن تظل مرئية حتى ينتقل التركيز إلى مكان آخر
 - **التمييز**: يجب أن تكون مختلفة بصريًا عن حالات واجهة المستخدم الأخرى
 
-> 💡 **نصيحة تصميم**: غالبًا ما تستخدم مؤشرات التركيز الرائعة مزيجًا من الخطوط الخارجية، الظلال، وتغييرات اللون لضمان الرؤية عبر خلفيات وسياقات مختلفة.
+> 💡 **نصيحة تصميم**: غالبًا ما تستخدم مؤشرات التركيز الرائعة مزيجًا من الخطوط الخارجية، الظل، وتغييرات اللون لضمان الرؤية عبر خلفيات وسياقات مختلفة.
 
-✅ **راجع مؤشرات التركيز**: تنقل عبر موقعك باستخدام لوحة المفاتيح ولاحظ العناصر التي تحتوي على مؤشرات تركيز واضحة. هل هناك أي عناصر يصعب رؤيتها أو مفقودة تمامًا؟
+✅ **قم بمراجعة مؤشرات التركيز**: تنقل عبر موقعك باستخدام لوحة المفاتيح ولاحظ العناصر التي تحتوي على مؤشرات تركيز واضحة. هل هناك أي عناصر يصعب رؤيتها أو مفقودة تمامًا؟
 
-### HTML الدلالي: أساس الوصول
+### HTML الدلالي: أساس إمكانية الوصول
 
-HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام GPS لموقعك. عندما تستخدم عناصر HTML الصحيحة لغرضها المقصود، فإنك تقدم لقارئات الشاشة ولوحات المفاتيح وغيرها من الأدوات خارطة طريق مفصلة لمساعدة المستخدمين على التنقل بفعالية.
+HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام GPS لموقعك على الويب. عندما تستخدم العناصر الصحيحة لـ HTML لغرضها المقصود، فإنك تقدم للقراء الشاشة ولوحات المفاتيح والأدوات الأخرى خارطة طريق مفصلة لمساعدة المستخدمين على التنقل بفعالية.
 
-إليك تشبيهًا أحببته: HTML الدلالي هو الفرق بين مكتبة منظمة جيدًا بها فئات واضحة ولافتات مفيدة مقابل مستودع حيث الكتب متناثرة بشكل عشوائي. كلا المكانين يحتويان على نفس الكتب، لكن أيهما تفضل البحث فيه؟ بالضبط!
+إليك تشبيهًا حقًا أثر فيني: HTML الدلالي هو الفرق بين مكتبة منظمة جيدًا مع فئات واضحة ولافتات مفيدة مقابل مستودع حيث الكتب متناثرة بشكل عشوائي. كلا المكانين يحتويان على نفس الكتب، ولكن أيهما تفضل أن تحاول العثور على شيء فيه؟ بالضبط!
+
+```mermaid
+flowchart TD
+    A[🏠 HTML Document] --> B[📰 header]
+    A --> C[🧭 nav]
+    A --> D[📄 main]
+    A --> E[📋 footer]
+    
+    B --> B1[h1: Site Name<br/>Logo & branding]
+    C --> C1[ul: Navigation<br/>Primary links]
+    D --> D1[article: Content<br/>section: Subsections]
+    D --> D2[aside: Sidebar<br/>Related content]
+    E --> E1[nav: Footer links<br/>Copyright info]
+    
+    D1 --> D1a[h1: Page title<br/>h2: Major sections<br/>h3: Subsections]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 **أسس هيكل الصفحة القابل للوصول:**
 
@@ -356,14 +489,14 @@ HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام G
 
 **لماذا يحول HTML الدلالي إمكانية الوصول:**
 
-| العنصر الدلالي | الغرض | فائدة لقارئ الشاشة |
+| العنصر الدلالي | الغرض | فائدة قارئ الشاشة |
 |------------------|---------|----------------------|
 | `<header>` | رأس الصفحة أو القسم | "معلم البانر" - التنقل السريع إلى الأعلى |
 | `<nav>` | روابط التنقل | "معلم التنقل" - قائمة أقسام التنقل |
 | `<main>` | المحتوى الأساسي للصفحة | "معلم الرئيسي" - الانتقال مباشرة إلى المحتوى |
 | `<article>` | محتوى مستقل | يعلن حدود المقالة |
-| `<section>` | مجموعات محتوى ذات موضوع | يوفر هيكلًا للمحتوى |
-| `<aside>` | محتوى الشريط الجانبي ذو الصلة | "معلم تكميلي" |
+| `<section>` | مجموعات محتوى ذات موضوع | يوفر هيكل المحتوى |
+| `<aside>` | محتوى الشريط الجانبي ذي الصلة | "معلم تكميلي" |
 | `<footer>` | تذييل الصفحة أو القسم | "معلم معلومات المحتوى" |
 
 **قدرات قارئ الشاشة مع HTML الدلالي:**
@@ -372,18 +505,45 @@ HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام G
 - **قوائم العناصر**: إنشاء قوائم بجميع الروابط، الأزرار، أو عناصر التحكم في النماذج
 - **وعي السياق**: فهم العلاقات بين أقسام المحتوى
 
-> 🎯 **اختبار سريع**: حاول التنقل في موقعك باستخدام قارئ شاشة باستخدام اختصارات المعالم (D للمعلم، H للعناوين، K للرابط في NVDA/JAWS). هل التنقل منطقي؟
+> 🎯 **اختبار سريع**: حاول التنقل في موقعك باستخدام قارئ الشاشة باستخدام اختصارات المعالم (D للمعلم، H للعنوان، K للرابط في NVDA/JAWS). هل التنقل منطقي؟
 
-✅ **راجع هيكلك الدلالي**: استخدم لوحة إمكانية الوصول في أدوات المطور في متصفحك لعرض شجرة إمكانية الوصول والتأكد من أن الترميز الخاص بك يخلق هيكلًا منطقيًا.
+### 🏗️ **مراجعة إتقان HTML الدلالي: بناء أساس قوي**
+
+**دعونا نقيم فهمك الدلالي:**
+- هل يمكنك تحديد المعالم على صفحة ويب بمجرد النظر إلى HTML؟
+- كيف تشرح الفرق بين `<section>` و `<div>` لصديق؟
+- ما هو أول شيء ستتحقق منه إذا أبلغ مستخدم قارئ الشاشة عن مشاكل في التنقل؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> UnsementicHTML: div soup
+    UnsementicHTML --> SemanticHTML: Add landmarks
+    SemanticHTML --> AccessibleHTML: Test with AT
+    AccessibleHTML --> [*]: User success!
+    
+    note right of UnsementicHTML
+        Screen readers lost
+        Keyboard nav broken
+    end note
+    
+    note right of AccessibleHTML
+        Clear navigation
+        Efficient browsing
+    end note
+```
+
+> **نصيحة احترافية**: HTML الدلالي الجيد يحل حوالي 70% من مشاكل إمكانية الوصول تلقائيًا. أتقن هذا الأساس وستكون في طريقك الصحيح!
+
+✅ **قم بمراجعة هيكلك الدلالي**: استخدم لوحة إمكانية الوصول في أدوات المطور في متصفحك لعرض شجرة إمكانية الوصول والتأكد من أن الترميز الخاص بك يخلق هيكلًا منطقيًا.
 
 ### تسلسل العناوين: إنشاء مخطط محتوى منطقي
 
-العناوين ضرورية للغاية للمحتوى القابل للوصول—إنها مثل العمود الفقري الذي يربط كل شيء معًا. يعتمد مستخدمو قارئات الشاشة بشكل كبير على العناوين لفهم المحتوى والتنقل فيه. فكر في الأمر كأنك تقدم جدول محتويات لصفحتك.
+العناوين ضرورية للغاية للمحتوى القابل للوصول - إنها مثل العمود الفقري الذي يربط كل شيء معًا. يعتمد مستخدمو قارئ الشاشة بشكل كبير على العناوين لفهم المحتوى والتنقل فيه. فكر في الأمر كأنك تقدم جدول محتويات لصفحتك.
 
 **إليك القاعدة الذهبية للعناوين:**
-لا تتخطى المستويات. تقدم دائمًا بشكل منطقي من `<h1>` إلى `<h2>` إلى `<h3>`، وهكذا. تذكر إنشاء المخططات في المدرسة؟ إنها نفس المبدأ تمامًا—لن تقفز من "I. النقطة الرئيسية" مباشرة إلى "C. النقطة الفرعية الفرعية" دون وجود "A. النقطة الفرعية" بينهما، أليس كذلك؟
+لا تتخطى المستويات. تقدم دائمًا بشكل منطقي من `<h1>` إلى `<h2>` إلى `<h3>`، وهكذا. تذكر إنشاء مخططات في المدرسة؟ إنها نفس المبدأ تمامًا - لن تقفز من "I. النقطة الرئيسية" مباشرة إلى "C. النقطة الفرعية الفرعية" دون وجود "A. النقطة الفرعية" بينهما، أليس كذلك؟
 
-**مثال على هيكل عناوين مثالي:**
+**مثال على هيكل العناوين المثالي:**
 
 ```html
 <!-- ✅ Excellent: Logical, hierarchical progression -->
@@ -423,31 +583,31 @@ HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام G
 ```
 
 **أفضل ممارسات العناوين:**
-- **عنوان واحد `<h1>` لكل صفحة**: عادةً ما يكون عنوان الصفحة الرئيسي أو عنوان المحتوى الأساسي
+- **واحد `<h1>` لكل صفحة**: عادةً عنوان الصفحة الرئيسي أو عنوان المحتوى الأساسي
 - **تقدم منطقي**: لا تتخطى المستويات (h1 → h2 → h3، وليس h1 → h3)
 - **محتوى وصفي**: اجعل العناوين ذات معنى عند قراءتها خارج السياق
 - **تنسيق بصري باستخدام CSS**: استخدم CSS للمظهر، ومستويات HTML للهيكل
 
 **إحصائيات التنقل باستخدام قارئ الشاشة:**
-- 68% من مستخدمي قارئات الشاشة يتنقلون باستخدام العناوين ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding))
+- 68% من مستخدمي قارئ الشاشة يتنقلون باستخدام العناوين ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding))
 - يتوقع المستخدمون العثور على مخطط عناوين منطقي
 - توفر العناوين أسرع طريقة لفهم هيكل الصفحة
 
 > 💡 **نصيحة احترافية**: استخدم إضافات المتصفح مثل "HeadingsMap" لتصور هيكل العناوين الخاص بك. يجب أن يقرأ مثل جدول محتويات منظم جيدًا.
 
-✅ **اختبر هيكل العناوين الخاص بك**: استخدم التنقل بالعناوين في قارئ الشاشة (مفتاح H في NVDA) للتنقل عبر العناوين. هل التقدم يروي قصة المحتوى بشكل منطقي؟
+✅ **اختبر هيكل العناوين الخاص بك**: استخدم التنقل بالعناوين في قارئ الشاشة (مفتاح H في NVDA) للتنقل عبر العناوين. هل التقدم يروي قصة المحتوى الخاص بك بشكل منطقي؟
 
-### تقنيات متقدمة لإمكانية الوصول البصري
+### تقنيات إمكانية الوصول البصرية المتقدمة
 
-ما يتجاوز أساسيات التباين واللون، هناك تقنيات متطورة تساعد في إنشاء تجارب بصرية شاملة حقًا. تضمن هذه الأساليب أن يعمل المحتوى الخاص بك عبر ظروف المشاهدة المختلفة وتقنيات المساعدة.
+ما وراء أساسيات التباين واللون، هناك تقنيات متطورة تساعد في إنشاء تجارب بصرية شاملة حقًا. تضمن هذه الأساليب أن يعمل المحتوى الخاص بك عبر ظروف المشاهدة المختلفة وتقنيات المساعدة.
 
 **استراتيجيات التواصل البصري الأساسية:**
 
-- **التغذية الراجعة متعددة الوسائط**: اجمع بين الإشارات البصرية والنصية وأحيانًا الصوتية
-- **الإفصاح التدريجي**: قدم المعلومات على شكل أجزاء قابلة للهضم
-- **أنماط التفاعل المتسقة**: استخدم اتفاقيات واجهة المستخدم المألوفة
-- **الطباعة المتجاوبة**: قم بتوسيع النص بشكل مناسب عبر الأجهزة
-- **حالات التحميل والخطأ**: قدم تغذية راجعة واضحة لجميع الإجراءات
+- **ردود الفعل متعددة الوسائط**: الجمع بين الإشارات البصرية والنصية وأحيانًا الصوتية
+- **الإفصاح التدريجي**: تقديم المعلومات في أجزاء قابلة للهضم
+- **أنماط التفاعل المتسقة**: استخدام تقاليد واجهة المستخدم المألوفة
+- **الطباعة المستجيبة**: ضبط حجم النص بشكل مناسب عبر الأجهزة
+- **حالات التحميل والخطأ**: تقديم ردود فعل واضحة لجميع الإجراءات
 
 **أدوات CSS لتحسين إمكانية الوصول:**
 
@@ -505,28 +665,28 @@ HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام G
 }
 ```
 
-> 🎯 **نمط إمكانية الوصول**: "رابط التخطي" ضروري لمستخدمي لوحة المفاتيح. يجب أن يكون العنصر الأول القابل للتركيز على صفحتك ويقفز مباشرة إلى منطقة المحتوى الرئيسي.
+> 🎯 **نمط إمكانية الوصول**: "رابط التخطي" ضروري لمستخدمي لوحة المفاتيح. يجب أن يكون العنصر الأول القابل للتركيز على صفحتك وينتقل مباشرة إلى منطقة المحتوى الرئيسي.
 
 ✅ **قم بتنفيذ تخطي التنقل**: أضف روابط التخطي إلى صفحاتك واختبرها بالضغط على Tab بمجرد تحميل الصفحة. يجب أن تظهر وتسمح لك بالقفز إلى المحتوى الرئيسي.
 
 ## صياغة نصوص روابط ذات معنى
 
-الروابط هي بمثابة الطرق السريعة للويب، لكن النصوص المكتوبة بشكل سيئ للروابط تشبه وجود علامات طريق تقول فقط "مكان" بدلًا من "وسط مدينة شيكاغو". ليس مفيدًا جدًا، أليس كذلك؟
+الروابط هي الطرق السريعة للويب، لكن النصوص الروابط المكتوبة بشكل سيء تشبه وجود علامات طرق تقول فقط "مكان" بدلاً من "وسط مدينة شيكاغو". ليست مفيدة جدًا، أليس كذلك؟
 
-إليك شيء أدهشني عندما تعلمته لأول مرة: يمكن لقارئات الشاشة استخراج جميع الروابط من الصفحة وعرضها كقائمة كبيرة واحدة. تخيل لو أعطاك أحدهم دليلًا لكل رابط على صفحتك. هل سيبدو كل واحد منطقيًا بمفرده؟ هذا هو الاختبار الذي يجب أن يجتازه نص الرابط الخاص بك!
+إليك شيء أدهشني عندما علمت به لأول مرة: يمكن لقارئات الشاشة استخراج جميع الروابط من صفحة وعرضها كقائمة كبيرة واحدة. تخيل لو أعطاك شخص دليلًا لكل رابط على صفحتك. هل كل واحد منهم منطقي بمفرده؟ هذا هو الاختبار الذي يجب أن يجتازه نص الرابط الخاص بك!
 
 ### فهم أنماط التنقل عبر الروابط
 
 توفر قارئات الشاشة ميزات تنقل قوية تعتمد على نصوص الروابط المكتوبة جيدًا:
 
 **طرق التنقل عبر الروابط:**
-- **القراءة المتسلسلة**: تُقرأ الروابط في سياقها كجزء من تدفق المحتوى
-- **إنشاء قائمة الروابط**: جميع روابط الصفحة تُجمع في دليل قابل للبحث
+- **القراءة المتسلسلة**: يتم قراءة الروابط في السياق كجزء من تدفق المحتوى
+- **إنشاء قائمة الروابط**: جميع روابط الصفحة مجمعة في دليل قابل للبحث
 - **التنقل السريع**: الانتقال بين الروابط باستخدام اختصارات لوحة المفاتيح (K في NVDA)
 - **وظيفة البحث**: العثور على روابط محددة عن طريق كتابة نص جزئي
 
 **لماذا السياق مهم:**
-عندما يقوم مستخدمو قارئات الشاشة بإنشاء قائمة روابط، يرون شيئًا مثل هذا:
+عندما يقوم مستخدمو قارئ الشاشة بإنشاء قائمة روابط، فإنهم يرون شيئًا مثل هذا:
 - "تحميل التقرير"
 - "تعرف على المزيد"
 - "اضغط هنا"
@@ -535,13 +695,13 @@ HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام G
 
 فقط اثنان من هذه الروابط يوفران معلومات مفيدة عند قراءتها خارج السياق!
 
-> 📊 **تأثير المستخدم**: يقوم مستخدمو قارئات الشاشة بمسح قوائم الروابط لفهم محتوى الصفحة بسرعة. النصوص العامة للروابط تجبرهم على العودة إلى سياق كل رابط، مما يبطئ تجربة التصفح بشكل كبير.
+> 📊 **تأثير المستخدم**: يقوم مستخدمو قارئ الشاشة بمسح قوائم الروابط لفهم محتوى الصفحة بسرعة. النصوص الروابط العامة تجبرهم على العودة إلى سياق كل رابط، مما يبطئ تجربتهم بشكل كبير.
 
 ### أخطاء شائعة في نصوص الروابط يجب تجنبها
 
-فهم ما لا يعمل يساعدك على التعرف على مشكلات إمكانية الوصول وإصلاحها في المحتوى الحالي.
+فهم ما لا يعمل يساعدك على التعرف على مشاكل إمكانية الوصول وإصلاحها في المحتوى الحالي.
 
-**❌ نصوص روابط عامة لا توفر سياقًا:**
+**❌ نصوص الروابط العامة التي لا توفر سياقًا:**
 
 ```html
 <!-- Meaningless when read from a link list -->
@@ -569,15 +729,15 @@ HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام G
 
 **لماذا تفشل هذه الأنماط:**
 - **"اضغط هنا"** لا تخبر المستخدمين شيئًا عن الوجهة
-- **"اقرأ المزيد"** المكررة عدة مرات تسبب ارتباكًا
+- **"اقرأ المزيد"** مكرر عدة مرات يسبب الارتباك
 - **عناوين URL الخام** يصعب على قارئات الشاشة نطقها بوضوح
 - **كلمات فردية** مثل "اذهب" أو "شاهد" تفتقر إلى السياق الوصفي
 
 ### كتابة نصوص روابط ممتازة
 
-نصوص الروابط الوصفية تفيد الجميع—يمكن للمستخدمين المبصرين مسح الروابط بسرعة، ومستخدمو قارئات الشاشة يفهمون الوجهات فورًا.
+نصوص الروابط الوصفية تفيد الجميع - يمكن للمستخدمين المبصرين مسح الروابط بسرعة، ومستخدمو قارئات الشاشة يفهمون الوجهات فورًا.
 
-**✅ أمثلة على نصوص روابط واضحة ووصفية:**
+**✅ أمثلة على نصوص الروابط الواضحة والوصفية:**
 
 ```html
 <!-- Descriptive text that explains the destination -->
@@ -609,11 +769,11 @@ HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام G
 - **تضمين نوع الملف والحجم**: "(PDF، 1.2MB)" للملفات القابلة للتنزيل
 - **ذكر إذا كانت الروابط تفتح خارجيًا**: "(تفتح في نافذة جديدة)" عند الاقتضاء
 - **استخدام لغة نشطة**: "اتصل بنا" مقابل "صفحة الاتصال"
-- **اجعلها موجزة**: حاول أن تكون بين 2-8 كلمات عند الإمكان
+- **اجعلها موجزة**: حاول أن تكون بين 2-8 كلمات إن أمكن
 
-### أنماط متقدمة لإمكانية الوصول للروابط
+### أنماط إمكانية الوصول المتقدمة للروابط
 
-أحيانًا تتطلب قيود التصميم البصري أو المتطلبات التقنية حلولًا خاصة. إليك تقنيات متطورة لسيناريوهات شائعة صعبة:
+في بعض الأحيان، تتطلب قيود التصميم البصري أو المتطلبات التقنية حلولًا خاصة. إليك تقنيات متطورة لسيناريوهات شائعة صعبة:
 
 **استخدام ARIA للسياق المحسن:**
 
@@ -684,50 +844,49 @@ HTML الدلالي يشبه إعطاء تقنيات المساعدة نظام G
 }
 ```
 
-> ⚠️ **مهم**: عند استخدام `target="_blank"`، دائمًا أبلغ المستخدمين أن الرابط يفتح في نافذة أو علامة تبويب جديدة. التغييرات غير المتوقعة في التنقل يمكن أن تكون مربكة.
+> ⚠️ **هام**: عند استخدام `target="_blank"`، أبلغ المستخدمين دائمًا أن الرابط يفتح في نافذة أو علامة تبويب جديدة. يمكن أن تكون تغييرات التنقل غير المتوقعة مربكة.
 
-✅ **اختبر سياق الروابط الخاصة بك**: استخدم أدوات المطور في متصفحك لإنشاء قائمة بجميع الروابط على صفحتك. هل يمكنك فهم غرض كل رابط بدون أي سياق محيط؟
+✅ **اختبر سياق الرابط الخاص بك**: استخدم أدوات المطور في متصفحك لإنشاء قائمة بجميع الروابط على صفحتك. هل يمكنك فهم الغرض من كل رابط دون أي سياق محيط؟
 
 ## ARIA: تعزيز إمكانية الوصول لـ HTML
 
-[تطبيقات الإنترنت الغنية القابلة للوصول (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) تشبه وجود مترجم عالمي بين تطبيقات الويب المعقدة وتقنيات المساعدة. عندما لا يستطيع HTML وحده التعبير عن كل ما تفعله مكوناتك التفاعلية، تتدخل ARIA لملء تلك الفجوات.
+[تطبيقات الإنترنت الغنية القابلة للوصول (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) تشبه وجود مترجم عالمي بين تطبيقات الويب المعقدة وتقنيات المساعدة. عندما لا يستطيع HTML وحده التعبير عن كل ما تفعله مكوناتك التفاعلية، يتدخل ARIA لسد هذه الفجوات.
 
-أحب أن أفكر في ARIA كإضافة تعليقات مفيدة إلى HTML الخاص بك—مثل تعليمات المسرح في نص مسرحي تساعد الممثلين على فهم أدوارهم وعلاقاتهم.
+أحب أن أفكر في ARIA كإضافة تعليقات مفيدة إلى HTML الخاص بك - مثل تعليمات المسرح في نص مسرحي تساعد الممثلين على فهم أدوارهم وعلاقاتهم.
 
-**إليك القاعدة الأهم حول ARIA**: استخدم دائمًا HTML الدلالي أولاً، ثم أضف ARIA لتعزيزه. فكر في ARIA كالتوابل، وليس الطبق الرئيسي. يجب أن توضح وتعزز هيكل HTML الخاص بك، ولا تحل محله أبدًا. احصل على الأساس الصحيح أولاً!
+**إليك القاعدة الأهم حول ARIA**: استخدم دائمًا HTML الدلالي أولاً، ثم أضف ARIA لتعزيزه. فكر في ARIA كالتوابل، وليس الطبق الرئيسي. يجب أن يوضح ويعزز هيكل HTML الخاص بك، ولا يحل محله أبدًا. احصل على هذا الأساس بشكل صحيح أولاً!
 
-### تنفيذ استراتيجي لـ ARIA
+### تنفيذ ARIA بشكل استراتيجي
 
-ARIA قوية، ولكن مع القوة تأتي المسؤولية. يمكن أن تجعل ARIA غير الصحيحة إمكانية الوصول أسوأ من عدم وجودها على الإطلاق. إليك متى وكيف تستخدمها بفعالية:
+ARIA قوي، ولكن مع القوة تأتي المسؤولية. يمكن أن يجعل ARIA غير الصحيح إمكانية الوصول أسوأ من عدم وجوده على الإطلاق. إليك متى وكيفية استخدامه بفعالية:
 
 **✅ استخدم ARIA عندما:**
-- إنشاء عناصر واجهة مستخدم تفاعلية مخصصة (الأكورديونات، علامات التبويب، الكاروسيل)
+- إنشاء أدوات واجهة تفاعلية مخصصة (الأكورديونات، علامات التبويب، الكاروسيل)
 - بناء محتوى ديناميكي يتغير دون إعادة تحميل الصفحة
 - توفير سياق إضافي للعلاقات المعقدة في واجهة المستخدم
 - الإشارة إلى حالات التحميل أو تحديثات المحتوى الحية
-- إنشاء واجهات تشبه التطبيقات بعناصر تحكم مخصصة
+- إنشاء واجهات تشبه التطبيقات مع عناصر تحكم مخصصة
 
 **❌ تجنب ARIA عندما:**
-- توفر عناصر HTML القياسية بالفعل الدلالات المطلوبة
-- لست متأكدًا من كيفية تنفيذها بشكل صحيح
-- تكرر المعلومات التي توفرها HTML الدلالي بالفعل
-- لم تختبرها باستخدام تقنيات المساعدة الفعلية
-
-> 🎯 **القاعدة الذهبية لـ ARIA**: "لا تغير الدلالات إلا إذا كنت مضطرًا تمامًا، تأكد دائمًا من إمكانية الوصول عبر لوحة المفاتيح، واختبر باستخدام تقنيات المساعدة الحقيقية."
+- توفر عناصر HTML القياسية الدلالات المطلوبة بالفعل
+- لست متأكدًا من كيفية تنفيذه بشكل صحيح
+- يكرر المعلومات التي توفرها بالفعل HTML الدلالي
+- لم تقم باختباره باستخدام تقنية مساعدة فعلية
 
+> 🎯 **قاعدة ARIA الذهبية**: "لا تغير الدلالات إلا إذا كنت مضطرًا تمامًا، تأكد دائمًا من إمكانية الوصول باستخدام لوحة المفاتيح، واختبر باستخدام تقنية مساعدة حقيقية."
 **الفئات الخمس لـ ARIA:**
 
 1. **الأدوار**: ما هو هذا العنصر؟ (`button`, `tab`, `dialog`)
 2. **الخصائص**: ما هي ميزاته؟ (`aria-required`, `aria-haspopup`)
 3. **الحالات**: ما هي حالته الحالية؟ (`aria-expanded`, `aria-checked`)
-4. **المعالم**: أين هو في هيكل الصفحة؟ (`banner`, `navigation`, `main`)
+4. **المعالم**: أين يقع في هيكل الصفحة؟ (`banner`, `navigation`, `main`)
 5. **المناطق الحية**: كيف يجب الإعلان عن التغييرات؟ (`aria-live`, `aria-atomic`)
 
 ### أنماط ARIA الأساسية لتطبيقات الويب الحديثة
 
-تساعد هذه الأنماط في حل التحديات الأكثر شيوعًا في تطبيقات الويب التفاعلية:
+هذه الأنماط تحل أكثر تحديات الوصول شيوعًا في تطبيقات الويب التفاعلية:
 
-**تسمية ووصف العناصر:**
+**تسمية العناصر ووصفها:**
 
 ```html
 <!-- aria-label: Provides accessible name when visible text isn't sufficient -->
@@ -773,7 +932,7 @@ ARIA قوية، ولكن مع القوة تأتي المسؤولية. يمكن 
 </div>
 ```
 
-**مثال على عنصر واجهة مستخدم تفاعلي (الأكورديون):**
+**مثال على عنصر واجهة تفاعلي (الأكورديون):**
 
 ```html
 <div class="accordion">
@@ -812,15 +971,37 @@ function toggleAccordion(trigger) {
 
 ### أفضل ممارسات تنفيذ ARIA
 
-ARIA قوية ولكنها تتطلب تنفيذًا دقيقًا. يساعد اتباع هذه الإرشادات في ضمان أن ARIA تعزز إمكانية الوصول بدلاً من أن تعيقها:
+ARIA قوية ولكن تتطلب تنفيذًا دقيقًا. اتباع هذه الإرشادات يساعد في ضمان أن ARIA تعزز الوصول بدلاً من أن تعيقه:
 
 **🛡️ المبادئ الأساسية:**
 
-1. **HTML الدلالي أولاً**: اختر دائمًا `<button>` بدلاً من `<div role="button">`
-2. **لا تكسر الدلالات**: لا تتجاوز المعنى الموجود بالفعل في HTML (تجنب `<h1 role="button">`)
+```mermaid
+flowchart TD
+    A[🚀 Start with semantic HTML] --> B{Does HTML provide needed semantics?}
+    B -->|Yes| C[✅ Use HTML only]
+    B -->|No| D[Consider ARIA enhancement]
+    D --> E{Can you achieve it with simpler means?}
+    E -->|Yes| F[🔄 Simplify approach]
+    E -->|No| G[📝 Implement ARIA carefully]
+    G --> H[🧪 Test with real AT]
+    H --> I{Works as expected?}
+    I -->|No| J[🔧 Debug and fix]
+    I -->|Yes| K[✅ Success!]
+    J --> H
+    F --> C
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style K fill:#e8f5e8
+    style G fill:#fff3e0
+    style H fill:#f3e5f5
+```
+
+1. **استخدام HTML الدلالي أولاً**: يفضل دائمًا استخدام `<button>` بدلاً من `<div role="button">`
+2. **لا تكسر الدلالات**: لا تتجاوز معنى HTML الموجود (تجنب `<h1 role="button">`)
 3. **الحفاظ على إمكانية الوصول عبر لوحة المفاتيح**: يجب أن تكون جميع عناصر ARIA التفاعلية قابلة للوصول بالكامل عبر لوحة المفاتيح
-4. **اختبر مع المستخدمين الحقيقيين**: دعم ARIA يختلف بشكل كبير بين تقنيات المساعدة
-5. **ابدأ ببساطة**: تنفيذات ARIA المعقدة أكثر عرضة للأخطاء
+4. **اختبار مع المستخدمين الحقيقيين**: دعم ARIA يختلف بشكل كبير بين تقنيات المساعدة
+5. **ابدأ ببساطة**: تنفيذ ARIA المعقد أكثر عرضة للأخطاء
 
 **🔍 سير عمل الاختبار:**
 
@@ -836,27 +1017,44 @@ graph TD
     G --> B
 ```
 
-**🚫 أخطاء شائعة في ARIA يجب تجنبها:**
+**🚫 أخطاء ARIA الشائعة التي يجب تجنبها:**
 
 - **معلومات متضاربة**: لا تتناقض مع دلالات HTML
 - **الإفراط في التسمية**: الكثير من معلومات ARIA يربك المستخدمين
 - **ARIA ثابتة**: نسيان تحديث حالات ARIA عند تغيير المحتوى
-- **تنفيذات غير مختبرة**: ARIA تعمل نظريًا ولكنها تفشل عمليًا
-- **غياب دعم لوحة المفاتيح**: أدوار ARIA بدون تفاعلات لوحة المفاتيح المناسبة
+- **تنفيذ غير مختبر**: ARIA التي تعمل نظريًا ولكن تفشل عمليًا
+- **غياب دعم لوحة المفاتيح**: أدوار ARIA بدون تفاعلات لوحة المفاتيح المقابلة
 
-> 💡 **موارد الاختبار**: استخدم أدوات مثل [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) للتحقق التلقائي من ARIA، ولكن اختبر دائمًا باستخدام قارئات الشاشة الحقيقية للحصول على تجربة كاملة.
+> 💡 **موارد الاختبار**: استخدم أدوات مثل [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) للتحقق التلقائي من صحة ARIA، ولكن اختبر دائمًا باستخدام قارئات الشاشة الحقيقية للحصول على تجربة كاملة.
 
-✅ **تعلم من الخبراء**: ادرس [دليل ممارسات تأليف ARIA](https://w3c.github.io/aria-practices/) للحصول على أنماط وتنفيذات مجربة لعناصر واجهة تفاعلية معقدة.
+### 🎭 **اختبار مهارات ARIA: هل أنت جاهز للتفاعلات المعقدة؟**
+
+**قيّم ثقتك بـ ARIA:**
+- متى تختار ARIA بدلاً من HTML الدلالي؟ (تلميح: نادرًا جدًا!)
+- هل يمكنك شرح لماذا `<div role="button">` عادة أسوأ من `<button>`؟
+- ما هو أهم شيء يجب تذكره حول اختبار ARIA؟
+
+```mermaid
+pie title "Common ARIA Usage Patterns"
+    "Labels & Descriptions" : 40
+    "Live Regions" : 25
+    "Widget States" : 20
+    "Complex Controls" : 15
+```
+
+> **رؤية أساسية**: معظم استخدامات ARIA هي لتسمية العناصر ووصفها. أنماط عناصر واجهة المستخدم المعقدة أقل شيوعًا مما قد تعتقد!
+
+✅ **تعلم من الخبراء**: ادرس [دليل ممارسات تأليف ARIA](https://w3c.github.io/aria-practices/) للحصول على أنماط واختبارات مجربة لعناصر واجهة المستخدم التفاعلية المعقدة.
 
 ## جعل الصور والوسائط قابلة للوصول
 
-المحتوى البصري والصوتي جزء أساسي من تجارب الويب الحديثة، ولكنه قد يخلق حواجز إذا لم يتم تنفيذه بعناية. الهدف هو ضمان وصول المعلومات والتأثير العاطفي لوسائطك إلى كل مستخدم. بمجرد أن تتقن ذلك، يصبح الأمر طبيعيًا.
+المحتوى المرئي والصوتي جزء أساسي من تجارب الويب الحديثة، ولكنه يمكن أن يخلق حواجز إذا لم يتم تنفيذه بعناية. الهدف هو ضمان وصول المعلومات والتأثير العاطفي لوسائطك إلى كل مستخدم. بمجرد أن تتقن ذلك، يصبح الأمر طبيعيًا.
 
-أنواع الوسائط المختلفة تحتاج إلى نهج وصول مختلف. الأمر يشبه الطهي - لن تتعامل مع سمكة حساسة بنفس الطريقة التي تتعامل بها مع شريحة لحم قوية. فهم هذه الفروقات يساعدك في اختيار الحل المناسب لكل حالة.
+تحتاج أنواع مختلفة من الوسائط إلى نهج وصول مختلف. الأمر يشبه الطهي - لن تعامل سمكة حساسة بنفس الطريقة التي تعامل بها شريحة لحم قوية. فهم هذه الفروقات يساعدك على اختيار الحل المناسب لكل حالة.
 
 ### استراتيجية الوصول إلى الصور
 
-كل صورة على موقعك تخدم غرضًا. فهم هذا الغرض يساعدك في كتابة نص بديل أفضل وخلق تجارب أكثر شمولية.
+كل صورة على موقعك تخدم غرضًا. فهم هذا الغرض يساعدك على كتابة نص بديل أفضل وخلق تجارب أكثر شمولية.
 
 **أنواع الصور الأربعة واستراتيجيات النص البديل الخاصة بها:**
 
@@ -889,8 +1087,8 @@ graph TD
 
 **متطلبات الفيديو:**
 - **التسميات التوضيحية**: نسخة نصية للمحتوى المنطوق والمؤثرات الصوتية
-- **الوصف الصوتي**: سرد العناصر البصرية للمستخدمين المكفوفين
-- **النصوص**: نسخة نصية كاملة لكل المحتوى الصوتي والبصري
+- **الوصف الصوتي**: سرد العناصر المرئية للمستخدمين المكفوفين
+- **النصوص**: نسخة نصية كاملة لجميع المحتويات الصوتية والمرئية
 
 ```html
 <video controls>
@@ -901,7 +1099,7 @@ graph TD
 ```
 
 **متطلبات الصوت:**
-- **النصوص**: نسخة نصية لكل المحتوى المنطوق
+- **النصوص**: نسخة نصية لجميع المحتويات المنطوقة
 - **مؤشرات بصرية**: للمحتوى الصوتي فقط، قدم إشارات بصرية
 
 ### تقنيات الصور الحديثة
@@ -914,7 +1112,7 @@ graph TD
 }
 ```
 
-**الصور المستجيبة مع إمكانية الوصول:**
+**الصور المستجيبة مع الوصول:**
 ```html
 <picture>
   <source media="(min-width: 800px)" srcset="large-chart.png">
@@ -923,20 +1121,39 @@ graph TD
 </picture>
 ```
 
-✅ **اختبر إمكانية الوصول إلى الصور**: استخدم قارئ شاشة للتنقل في صفحة تحتوي على صور. هل تحصل على معلومات كافية لفهم المحتوى؟
+✅ **اختبر وصول الصور**: استخدم قارئ الشاشة للتنقل في صفحة تحتوي على صور. هل تحصل على معلومات كافية لفهم المحتوى؟
 
-## التنقل باستخدام لوحة المفاتيح وإدارة التركيز
+## التنقل عبر لوحة المفاتيح وإدارة التركيز
 
-العديد من المستخدمين يتنقلون في الويب باستخدام لوحات المفاتيح فقط. يشمل ذلك الأشخاص ذوي الإعاقات الحركية، والمستخدمين المحترفين الذين يجدون لوحات المفاتيح أسرع من الفأرة، وأي شخص توقفت فأرته عن العمل. ضمان عمل موقعك بشكل جيد مع إدخال لوحة المفاتيح أمر ضروري وغالبًا ما يجعل موقعك أكثر كفاءة للجميع.
+يستخدم العديد من المستخدمين لوحة المفاتيح فقط للتنقل في الويب. يشمل ذلك الأشخاص ذوي الإعاقات الحركية، والمستخدمين المحترفين الذين يجدون لوحة المفاتيح أسرع من الفأرة، وأي شخص توقفت فأرته عن العمل. ضمان عمل موقعك بشكل جيد مع إدخال لوحة المفاتيح أمر ضروري وغالبًا ما يجعل موقعك أكثر كفاءة للجميع.
+
+```mermaid
+flowchart LR
+    A[⌨️ Keyboard Navigation] --> B[Tab Order]
+    A --> C[Focus Indicators]
+    A --> D[Skip Links]
+    A --> E[Keyboard Shortcuts]
+    
+    B --> B1[Logical sequence<br/>All interactive elements<br/>No tab traps]
+    C --> C1[Visible outlines<br/>High contrast<br/>Clear boundaries]
+    D --> D1[Skip to main<br/>Skip to nav<br/>Bypass repetitive]
+    E --> E1[Escape to close<br/>Enter to activate<br/>Arrows in groups]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-### أنماط التنقل الأساسية باستخدام لوحة المفاتيح
+### أنماط التنقل الأساسية عبر لوحة المفاتيح
 
-**تفاعلات لوحة المفاتيح القياسية:**
+**التفاعلات القياسية عبر لوحة المفاتيح:**
 - **Tab**: نقل التركيز للأمام عبر العناصر التفاعلية
 - **Shift + Tab**: نقل التركيز للخلف
 - **Enter**: تفعيل الأزرار والروابط
 - **Space**: تفعيل الأزرار، تحديد مربعات الاختيار
-- **مفاتيح الأسهم**: التنقل داخل مجموعات المكونات (أزرار الراديو، القوائم)
+- **Arrow keys**: التنقل داخل مجموعات المكونات (أزرار الراديو، القوائم)
 - **Escape**: إغلاق النوافذ المنبثقة، القوائم المنسدلة، أو إلغاء العمليات
 
 ### أفضل ممارسات إدارة التركيز
@@ -968,7 +1185,7 @@ button:focus-visible {
 </main>
 ```
 
-**ترتيب علامات التبويب المناسب:**
+**ترتيب علامات التبويب الصحيح:**
 ```html
 <!-- Use semantic HTML for natural tab order -->
 <form>
@@ -1017,13 +1234,13 @@ function trapFocus(element) {
 }
 ```
 
-✅ **اختبر التنقل باستخدام لوحة المفاتيح**: حاول التنقل في موقعك باستخدام مفتاح Tab فقط. هل يمكنك الوصول إلى كل العناصر التفاعلية؟ هل ترتيب التركيز منطقي؟ هل مؤشرات التركيز واضحة؟
+✅ **اختبر التنقل عبر لوحة المفاتيح**: حاول التنقل في موقعك باستخدام مفتاح Tab فقط. هل يمكنك الوصول إلى جميع العناصر التفاعلية؟ هل ترتيب التركيز منطقي؟ هل مؤشرات التركيز واضحة؟
 
-## إمكانية الوصول إلى النماذج
+## الوصول إلى النماذج
 
-النماذج ضرورية لتفاعل المستخدم وتتطلب اهتمامًا خاصًا بإمكانية الوصول.
+النماذج ضرورية لتفاعل المستخدم وتتطلب اهتمامًا خاصًا للوصول.
 
-### ارتباط التسمية وعناصر التحكم بالنموذج
+### ارتباط التسمية وعناصر التحكم في النموذج
 
 **كل عنصر تحكم في النموذج يحتاج إلى تسمية:**
 ```html
@@ -1062,7 +1279,7 @@ function trapFocus(element) {
 
 ### المجموعات والحقول
 
-**جمع عناصر التحكم ذات الصلة بالنموذج:**
+**جمع عناصر التحكم ذات الصلة في النموذج:**
 ```html
 <fieldset>
   <legend>Shipping Address</legend>
@@ -1083,72 +1300,73 @@ function trapFocus(element) {
 </fieldset>
 ```
 
-## رحلتك في إمكانية الوصول: النقاط الرئيسية
+## رحلتك في الوصول: النقاط الرئيسية
 
-تهانينا! لقد اكتسبت الآن المعرفة الأساسية لإنشاء تجارب ويب شاملة حقًا. هذا أمر مثير للغاية! إمكانية الوصول إلى الويب ليست مجرد التزام بمعايير الامتثال - إنها تتعلق بفهم الطرق المتنوعة التي يتفاعل بها الناس مع المحتوى الرقمي وتصميم تلك التعقيدات الرائعة.
+تهانينا! لقد اكتسبت الآن المعرفة الأساسية لإنشاء تجارب ويب شاملة حقًا. هذا أمر مثير للغاية! الوصول إلى الويب ليس مجرد التحقق من الامتثال - إنه يتعلق بفهم الطرق المتنوعة التي يتفاعل بها الناس مع المحتوى الرقمي وتصميم تلك التعقيدات الرائعة.
 
-أنت الآن جزء من مجتمع متنامٍ من المطورين الذين يفهمون أن التصميم الرائع يعمل للجميع. مرحبًا بك في النادي!
+أنت الآن جزء من مجتمع متنامٍ من المطورين الذين يفهمون أن التصميم الجيد يعمل للجميع. مرحبًا بك في النادي!
 
-**🎯 أدواتك لإمكانية الوصول الآن تشمل:**
+**🎯 أدوات الوصول الخاصة بك الآن تشمل:**
 
 | المبدأ الأساسي | التنفيذ | التأثير |
 |----------------|----------------|---------|
 | **أساس HTML الدلالي** | استخدم عناصر HTML المناسبة لغرضها المقصود | يمكن لقارئات الشاشة التنقل بكفاءة، تعمل لوحات المفاتيح تلقائيًا |
 | **تصميم بصري شامل** | تباين كافٍ، استخدام الألوان بشكل هادف، مؤشرات التركيز المرئية | واضح للجميع في أي ظروف إضاءة |
 | **محتوى وصفي** | نصوص روابط ذات معنى، نصوص بديلة، عناوين | يفهم المستخدمون المحتوى بدون سياق بصري |
-| **إمكانية الوصول باستخدام لوحة المفاتيح** | ترتيب علامات التبويب، اختصارات لوحة المفاتيح، إدارة التركيز | إمكانية الوصول الحركية وكفاءة المستخدم المحترف |
-| **تعزيز ARIA** | استخدام استراتيجي لسد الفجوات الدلالية | التطبيقات المعقدة تعمل مع تقنيات المساعدة |
+| **إمكانية الوصول عبر لوحة المفاتيح** | ترتيب علامات التبويب، اختصارات لوحة المفاتيح، إدارة التركيز | الوصول الحركي وكفاءة المستخدمين المحترفين |
+| **تعزيز ARIA** | استخدام استراتيجي لسد الفجوات الدلالية | تعمل التطبيقات المعقدة مع تقنيات المساعدة |
 | **اختبار شامل** | أدوات تلقائية + تحقق يدوي + اختبار المستخدم الحقيقي | اكتشاف المشكلات قبل أن تؤثر على المستخدمين |
 
 **🚀 خطواتك التالية:**
 
-1. **دمج إمكانية الوصول في سير عملك**: اجعل الاختبار جزءًا طبيعيًا من عملية التطوير
-2. **تعلم من المستخدمين الحقيقيين**: ابحث عن ملاحظات من الأشخاص الذين يستخدمون تقنيات المساعدة
-3. **ابقَ على اطلاع**: تتطور تقنيات إمكانية الوصول مع التقنيات والمعايير الجديدة
-4. **الدعوة إلى الشمولية**: شارك معرفتك واجعل إمكانية الوصول أولوية الفريق
+1. **دمج الوصول في سير عملك**: اجعل الاختبار جزءًا طبيعيًا من عملية التطوير الخاصة بك
+2. **تعلم من المستخدمين الحقيقيين**: ابحث عن تعليقات من الأشخاص الذين يستخدمون تقنيات المساعدة
+3. **ابقَ على اطلاع**: تتطور تقنيات الوصول مع التقنيات والمعايير الجديدة
+4. **الدعوة إلى الشمولية**: شارك معرفتك واجعل الوصول أولوية الفريق
 
-> 💡 **تذكر**: قيود إمكانية الوصول غالبًا ما تؤدي إلى حلول مبتكرة وأنيقة تفيد الجميع. المنحدرات، التسميات التوضيحية، وعناصر التحكم الصوتية بدأت كميزات إمكانية الوصول وأصبحت تحسينات رئيسية.
+> 💡 **تذكر**: قيود الوصول غالبًا ما تؤدي إلى حلول مبتكرة وأنيقة تفيد الجميع. المنحدرات، التسميات التوضيحية، وعناصر التحكم الصوتية بدأت جميعها كميزات وصول وأصبحت تحسينات رئيسية.
 
-**الحجة التجارية واضحة تمامًا**: مواقع الويب القابلة للوصول تصل إلى المزيد من المستخدمين، تحتل مرتبة أفضل في محركات البحث، تكلفتها أقل في الصيانة، وتتجنب المخاطر القانونية. ولكن بصراحة؟ السبب الحقيقي للاهتمام بإمكانية الوصول أعمق بكثير. مواقع الويب القابلة للوصول تجسد أفضل قيم الويب - الانفتاح، الشمولية، وفكرة أن الجميع يستحقون الوصول المتساوي إلى المعلومات.
+**الحجة التجارية واضحة تمامًا**: مواقع الويب القابلة للوصول تصل إلى المزيد من المستخدمين، تحتل مرتبة أفضل في محركات البحث، تكلفتها أقل في الصيانة، وتتجنب المخاطر القانونية. ولكن بصراحة؟ السبب الحقيقي للاهتمام بالوصول أعمق بكثير. مواقع الويب القابلة للوصول تجسد أفضل قيم الويب - الانفتاح، الشمولية، وفكرة أن الجميع يستحقون الوصول المتساوي إلى المعلومات.
 
-أنت الآن مجهز لبناء مستقبل ويب شامل. كل موقع قابل للوصول تقوم بإنشائه يجعل الإنترنت مكانًا أكثر ترحيبًا للجميع. هذا أمر مذهل حقًا عندما تفكر فيه!
+أنت الآن مجهز لبناء مستقبل ويب شامل. كل موقع قابل للوصول تقوم بإنشائه يجعل الإنترنت مكانًا أكثر ترحيبًا للجميع. هذا أمر مذهل عندما تفكر فيه!
 
 ## موارد إضافية
 
-واصل رحلتك التعليمية في إمكانية الوصول باستخدام هذه الموارد الأساسية:
+واصل رحلتك التعليمية في الوصول باستخدام هذه الموارد الأساسية:
 
 **📚 المعايير والإرشادات الرسمية:**
-- [إرشادات WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/) - المعيار الرسمي لإمكانية الوصول مع مرجع سريع
-- [دليل ممارسات تأليف ARIA](https://w3c.github.io/aria-practices/) - أنماط شاملة لعناصر واجهة تفاعلية
-- [إرشادات WebAIM](https://webaim.org/) - إرشادات عملية وسهلة للمبتدئين حول إمكانية الوصول
+- [إرشادات WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/) - المعيار الرسمي للوصول مع مرجع سريع
+- [دليل ممارسات تأليف ARIA](https://w3c.github.io/aria-practices/) - أنماط شاملة لعناصر واجهة المستخدم التفاعلية
+- [إرشادات WebAIM](https://webaim.org/) - إرشادات وصول عملية وسهلة للمبتدئين
 
 **🛠️ أدوات وموارد الاختبار:**
-- [axe DevTools](https://www.deque.com/axe/devtools/) - أداة اختبار إمكانية الوصول القياسية في الصناعة
-- [قائمة التحقق من مشروع A11y](https://www.a11yproject.com/checklist/) - تحقق خطوة بخطوة من إمكانية الوصول
-- [Accessibility Insights](https://accessibilityinsights.io/) - مجموعة اختبار شاملة من Microsoft
+- [axe DevTools](https://www.deque.com/axe/devtools/) - اختبار الوصول القياسي في الصناعة
+- [قائمة التحقق من مشروع A11y](https://www.a11yproject.com/checklist/) - تحقق خطوة بخطوة من الوصول
+- [رؤى الوصول](https://accessibilityinsights.io/) - مجموعة اختبار شاملة من مايكروسوفت
 - [Color Oracle](https://colororacle.org/) - محاكي عمى الألوان لاختبار التصميم
 
 **🎓 التعلم والمجتمع:**
-- [استطلاع قارئ الشاشة WebAIM](https://webaim.org/projects/screenreadersurvey9/) - تفضيلات وسلوكيات المستخدمين الحقيقيين
+- [استطلاع قارئ الشاشة WebAIM](https://webaim.org/projects/screenreadersurvey9/) - تفضيلات وسلوكيات المستخدمين الحقيقية
 - [مكونات شاملة](https://inclusive-components.design/) - أنماط مكونات حديثة قابلة للوصول
-- [A11y Coffee](https://a11y.coffee/) - نصائح ورؤى سريعة حول إمكانية الوصول
-- [مبادرة إمكانية الوصول إلى الويب (WAI)](https://www.w3.org/WAI/) - موارد شاملة لإمكانية الوصول من W3C
+- [قهوة A11y](https://a11y.coffee/) - نصائح ورؤى سريعة حول الوصول
+- [مبادرة الوصول إلى الويب (WAI)](https://www.w3.org/WAI/) - موارد شاملة للوصول من W3C
 
 **🎥 التعلم العملي:**
-- [دليل مطور إمكانية الوصول](https://www.accessibility-developer-guide.com/) - إرشادات عملية للتنفيذ
-- [جامعة Deque](https://dequeuniversity.com/) - دورات تدريبية احترافية حول إمكانية الوصول
+- [دليل مطور الوصول](https://www.accessibility-developer-guide.com/) - إرشادات تنفيذ عملية
+- [جامعة Deque](https://dequeuniversity.com/) - دورات تدريبية احترافية حول الوصول
 
 ## تحدي GitHub Copilot Agent 🚀
 
 استخدم وضع الوكيل لإكمال التحدي التالي:
 
-**الوصف:** قم بإنشاء مكون نافذة منبثقة قابلة للوصول توضح إدارة التركيز المناسبة، سمات ARIA، وأنماط التنقل باستخدام لوحة المفاتيح.
+**الوصف:** قم بإنشاء مكون نافذة منبثقة قابلة للوصول توضح إدارة التركيز المناسبة، سمات ARIA، وأنماط التنقل عبر لوحة المفاتيح.
+
+**المهمة:** قم ببناء مكون نافذة منبثقة كاملة باستخدام HTML، CSS، وJavaScript يتضمن: حصر التركيز بشكل صحيح، مفتاح ESC للإغلاق، النقر خارج النافذة للإغلاق، سمات ARIA لقارئات الشاشة، ومؤشرات تركيز مرئية. يجب أن تحتوي النافذة على نموذج مع تسميات مناسبة ومعالجة الأخطاء. تأكد من أن المكون يلبي معايير WCAG 2.1 AA.
 
-**المهمة:** قم ببناء مكون نافذة منبثقة كاملة باستخدام HTML، CSS، وJavaScript يتضمن: حصر التركيز بشكل صحيح، مفتاح ESC للإغلاق، النقر خارج النافذة للإغلاق، سمات ARIA لقارئات الشاشة، ومؤشرات تركيز مرئية. يجب أن تحتوي النافذة على نموذج مع تسميات مناسبة ومعالجة الأخطاء. تأكد من أن المكون يفي بمعايير WCAG 2.1 AA.
 
 ## 🚀 التحدي
 
-خذ هذا HTML وأعد كتابته ليكون قابلاً للوصول قدر الإمكان، بناءً على الاستراتيجيات التي تعلمتها.
+خذ هذا HTML وأعد كتابته ليكون قابلاً للوصول قدر الإمكان، باستخدام الاستراتيجيات التي تعلمتها.
 
 ```html
 <!DOCTYPE html>
@@ -1209,10 +1427,10 @@ function trapFocus(element) {
 **التحسينات الرئيسية التي تم إجراؤها:**
 - إضافة هيكل HTML دلالي مناسب
 - إصلاح تسلسل العناوين (عنوان h1 واحد، تقدم منطقي)
-- استبدال نصوص الروابط بمعنى بدلاً من "اضغط هنا"
+- إضافة نصوص روابط ذات معنى بدلاً من "اضغط هنا"
 - تضمين تسميات ARIA المناسبة للتنقل
 - إضافة سمة lang وعلامات meta المناسبة
-- استخدام عنصر الزر للعناصر التفاعلية
+- استخدام عنصر button للعناصر التفاعلية
 - هيكلة محتوى التذييل بمعالم مناسبة
 
 ## اختبار ما بعد المحاضرة
@@ -1220,13 +1438,73 @@ function trapFocus(element) {
 
 ## المراجعة والدراسة الذاتية
 
-لدى العديد من الحكومات قوانين بشأن متطلبات إمكانية الوصول. اقرأ عن قوانين إمكانية الوصول في بلدك. ما الذي يتم تغطيته، وما الذي لا يتم تغطيته؟ مثال على ذلك [هذا الموقع الحكومي](https://accessibility.blog.gov.uk/).
+تفرض العديد من الحكومات قوانين بشأن متطلبات الوصول. اقرأ عن قوانين الوصول في بلدك. ما الذي يتم تغطيته، وما الذي لا يتم تغطيته؟ مثال على ذلك [هذا الموقع الحكومي](https://accessibility.blog.gov.uk/).
 
 ## المهمة
 
 [تحليل موقع ويب غير قابل للوصول](assignment.md)
 
-الحقوق: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) بواسطة Instrument
+الاعتمادات: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) بواسطة Instrument
+
+---
+
+## 🚀 جدول زمني لإتقان الوصول
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] تثبيت امتداد axe DevTools في متصفحك
+- [ ] تشغيل تدقيق الوصول في Lighthouse على موقعك المفضل
+- [ ] حاول التنقل في أي موقع باستخدام مفتاح Tab فقط
+- [ ] اختبار قارئ الشاشة المدمج في متصفحك (Narrator/VoiceOver)
+
+### 🎯 **ما يمكنك تحقيقه خلال هذه الساعة**
+- [ ] إكمال اختبار ما بعد الدرس والتفكير في رؤى الوصول
+- [ ] ممارسة كتابة نصوص بديلة ذات معنى لـ 10 صور مختلفة
+- [ ] تدقيق هيكل العناوين لموقع باستخدام امتداد HeadingsMap
+- [ ] إصلاح مشكلات الوصول التي تم العثور عليها في HTML التحدي
+- [ ] اختبار تباين الألوان في مشروعك الحالي باستخدام أداة WebAIM
+
+### 📅 **رحلة الوصول الخاصة بك لمدة أسبوع**
+- [ ] إكمال المهمة بتحليل موقع ويب غير قابل للوصول
+- [ ] إعداد بيئة التطوير الخاصة بك بأدوات اختبار الوصول
+- [ ] ممارسة التنقل باستخدام لوحة المفاتيح على 5 مواقع معقدة مختلفة  
+- [ ] إنشاء نموذج بسيط مع تسميات صحيحة، معالجة الأخطاء، و ARIA  
+- [ ] الانضمام إلى مجتمع يهتم بإمكانية الوصول (مثل A11y Slack، منتدى WebAIM)  
+- [ ] مشاهدة مستخدمين حقيقيين من ذوي الإعاقة يتنقلون عبر المواقع (يوتيوب يحتوي على أمثلة رائعة)  
+
+### 🌟 **تحولك خلال الشهر**  
+- [ ] دمج اختبار إمكانية الوصول في سير عمل التطوير الخاص بك  
+- [ ] المساهمة في مشروع مفتوح المصدر عن طريق إصلاح مشكلات إمكانية الوصول  
+- [ ] إجراء اختبار قابلية الاستخدام مع شخص يستخدم التكنولوجيا المساعدة  
+- [ ] بناء مكتبة مكونات قابلة للوصول لفريقك  
+- [ ] الدعوة لإمكانية الوصول في مكان عملك أو مجتمعك  
+- [ ] توجيه شخص جديد إلى مفاهيم إمكانية الوصول  
+
+### 🏆 **التحقق النهائي لبطل إمكانية الوصول**  
+
+**احتفل برحلتك في إمكانية الوصول:**  
+- ما أكثر شيء فاجأك حول كيفية استخدام الناس للويب؟  
+- أي مبدأ من مبادئ إمكانية الوصول يتماشى أكثر مع أسلوبك في التطوير؟  
+- كيف غيّر تعلمك عن إمكانية الوصول وجهة نظرك حول التصميم؟  
+- ما أول تحسين لإمكانية الوصول تريد تنفيذه في مشروع حقيقي؟  
+
+```mermaid
+journey
+    title Your Accessibility Confidence Evolution
+    section Today
+      Overwhelmed: 3: You
+      Curious: 4: You
+      Motivated: 5: You
+    section This Week
+      Practicing: 4: You
+      Testing: 5: You
+      Understanding: 5: You
+    section Next Month
+      Advocating: 5: You
+      Leading: 5: You
+      Inclusive by Default: 5: You
+```
+  
+> 🌍 **أنت الآن بطل إمكانية الوصول!** أنت تفهم أن تجارب الويب الرائعة تعمل للجميع، بغض النظر عن كيفية وصولهم إلى الويب. كل ميزة قابلة للوصول تقوم ببنائها تجعل الإنترنت أكثر شمولاً. الويب يحتاج إلى مطورين مثلك يرون إمكانية الوصول ليس كقيد، بل كفرصة لخلق تجارب أفضل لجميع المستخدمين. مرحبًا بك في الحركة! 🎉  
 
 ---
 
diff --git a/translations/ar/10-ai-framework-project/README.md b/translations/ar/10-ai-framework-project/README.md
index 92074bb315..4f39d6743c 100644
--- a/translations/ar/10-ai-framework-project/README.md
+++ b/translations/ar/10-ai-framework-project/README.md
@@ -1,33 +1,71 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e2c4ae5688e34b4b8b09d52aec56c79e",
-  "translation_date": "2025-10-22T14:12:12+00:00",
+  "original_hash": "3925b6a1c31c60755eaae4d578232c25",
+  "translation_date": "2025-11-03T12:33:00+00:00",
   "source_file": "10-ai-framework-project/README.md",
   "language_code": "ar"
 }
 -->
 # إطار الذكاء الاصطناعي
 
-هل شعرت يومًا بالإرهاق أثناء محاولة بناء تطبيقات الذكاء الاصطناعي من الصفر؟ لست وحدك! أطر الذكاء الاصطناعي تشبه السكين السويسري لتطوير الذكاء الاصطناعي - إنها أدوات قوية توفر عليك الوقت والجهد عند بناء التطبيقات الذكية. فكر في إطار الذكاء الاصطناعي كأنه مكتبة منظمة جيدًا: يوفر مكونات جاهزة، واجهات برمجية قياسية، وتجريدات ذكية لتتمكن من التركيز على حل المشكلات بدلاً من الانشغال بالتفاصيل التقنية.
+هل شعرت يومًا بالإرهاق عند محاولة بناء تطبيقات ذكاء اصطناعي من الصفر؟ لست وحدك! تُعتبر أطر الذكاء الاصطناعي مثل السكين السويسري لتطوير الذكاء الاصطناعي - أدوات قوية يمكن أن توفر لك الوقت وتجنبك المتاعب عند بناء التطبيقات الذكية. فكر في إطار الذكاء الاصطناعي كأنه مكتبة منظمة جيدًا: يوفر مكونات جاهزة، وواجهات برمجة تطبيقات موحدة، وتجريدات ذكية حتى تتمكن من التركيز على حل المشكلات بدلاً من الانشغال بتفاصيل التنفيذ.
 
-في هذا الدرس، سنستكشف كيف يمكن لأطر مثل LangChain تحويل مهام دمج الذكاء الاصطناعي المعقدة إلى أكواد نظيفة وسهلة القراءة. ستتعلم كيفية التعامل مع تحديات العالم الحقيقي مثل تتبع المحادثات، تنفيذ استدعاء الأدوات، والتعامل مع نماذج الذكاء الاصطناعي المختلفة من خلال واجهة موحدة.
+في هذا الدرس، سنستكشف كيف يمكن للأطر مثل LangChain تحويل المهام المعقدة لدمج الذكاء الاصطناعي إلى أكواد نظيفة وسهلة القراءة. ستكتشف كيفية التعامل مع التحديات الواقعية مثل تتبع المحادثات، وتنفيذ استدعاء الأدوات، والتعامل مع نماذج الذكاء الاصطناعي المختلفة من خلال واجهة موحدة واحدة.
 
-بحلول نهاية الدرس، ستعرف متى تستخدم الأطر بدلاً من استدعاءات API الخام، وكيفية استخدام تجريداتها بفعالية، وكيفية بناء تطبيقات ذكاء اصطناعي جاهزة للاستخدام في العالم الحقيقي. دعونا نستكشف ما يمكن أن تقدمه أطر الذكاء الاصطناعي لمشاريعك.
+بحلول نهاية هذا الدرس، ستعرف متى تلجأ إلى الأطر بدلاً من استدعاءات واجهات برمجة التطبيقات الخام، وكيفية استخدام تجريداتها بفعالية، وكيفية بناء تطبيقات ذكاء اصطناعي جاهزة للاستخدام في العالم الحقيقي. دعنا نستكشف ما يمكن أن تقدمه أطر الذكاء الاصطناعي لمشاريعك.
 
-## لماذا تختار إطار عمل؟
+## ⚡ ما يمكنك فعله في الدقائق الخمس القادمة
 
-إذا كنت مستعدًا لبناء تطبيق ذكاء اصطناعي - رائع! ولكن إليك الأمر: لديك عدة طرق يمكنك اتباعها، وكل واحدة لها مزاياها وعيوبها. الأمر يشبه اختيار المشي، ركوب الدراجة، أو القيادة للوصول إلى مكان ما - جميعها توصلك إلى وجهتك، لكن التجربة (والجهد) ستكون مختلفة تمامًا.
+**مسار سريع للمطورين المشغولين**
 
-لنقم بتقسيم الطرق الثلاثة الرئيسية التي يمكنك من خلالها دمج الذكاء الاصطناعي في مشاريعك:
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Install LangChain]
+    B --> C[Create ChatOpenAI client]
+    C --> D[Send first prompt]
+    D --> E[See framework power]
+```
+
+- **الدقيقة الأولى**: قم بتثبيت LangChain: `pip install langchain langchain-openai`
+- **الدقيقة الثانية**: قم بإعداد رمز GitHub الخاص بك واستورد عميل ChatOpenAI
+- **الدقيقة الثالثة**: أنشئ محادثة بسيطة مع رسائل النظام والإنسان
+- **الدقيقة الرابعة**: أضف أداة أساسية (مثل وظيفة الجمع) وشاهد استدعاء الأدوات بواسطة الذكاء الاصطناعي
+- **الدقيقة الخامسة**: اختبر الفرق بين استدعاءات واجهات برمجة التطبيقات الخام وتجريدات الإطار
+
+**كود اختبار سريع**:
+```python
+from langchain_openai import ChatOpenAI
+from langchain_core.messages import SystemMessage, HumanMessage
+
+llm = ChatOpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="openai/gpt-4o-mini"
+)
+
+response = llm.invoke([
+    SystemMessage(content="You are a helpful coding assistant"),
+    HumanMessage(content="Explain Python functions briefly")
+])
+print(response.content)
+```
+
+**لماذا هذا مهم**: في غضون 5 دقائق، ستختبر كيف تحول أطر الذكاء الاصطناعي التكامل المعقد للذكاء الاصطناعي إلى استدعاءات طرق بسيطة. هذا هو الأساس الذي يدعم تطبيقات الذكاء الاصطناعي الإنتاجية.
+
+## لماذا تختار إطارًا؟
+
+إذن أنت مستعد لبناء تطبيق ذكاء اصطناعي - رائع! ولكن إليك الأمر: لديك عدة مسارات مختلفة يمكنك اتخاذها، ولكل منها مزايا وعيوب. إنه يشبه اختيار المشي أو ركوب الدراجة أو القيادة للوصول إلى مكان ما - كلها ستوصلك، لكن التجربة (والجهد) ستكون مختلفة تمامًا.
+
+دعنا نوضح الطرق الثلاثة الرئيسية التي يمكنك من خلالها دمج الذكاء الاصطناعي في مشاريعك:
 
 | النهج | المزايا | الأفضل لـ | الاعتبارات |
 |-------|---------|-----------|-------------|
-| **طلبات HTTP المباشرة** | التحكم الكامل، بدون تبعيات | الاستفسارات البسيطة، تعلم الأساسيات | أكواد أكثر تفصيلًا، معالجة الأخطاء يدويًا |
-| **دمج SDK** | تقليل الكود المتكرر، تحسين النموذج المحدد | التطبيقات ذات النموذج الواحد | محدودية لمزودي الخدمة المحددين |
-| **أطر الذكاء الاصطناعي** | واجهة موحدة، تجريدات مدمجة | التطبيقات متعددة النماذج، سير العمل المعقد | منحنى تعلم، احتمال التجريد الزائد |
+| **طلبات HTTP المباشرة** | تحكم كامل، بدون تبعيات | استفسارات بسيطة، تعلم الأساسيات | كود أكثر تفصيلاً، معالجة أخطاء يدوية |
+| **تكامل SDK** | تقليل الكود المتكرر، تحسين خاص بالنموذج | تطبيقات النموذج الواحد | يقتصر على مزودي خدمات محددين |
+| **أطر الذكاء الاصطناعي** | واجهة موحدة، تجريدات مدمجة | تطبيقات متعددة النماذج، سير عمل معقد | منحنى تعلم، احتمال التجريد الزائد |
 
-### فوائد الأطر في الممارسة العملية
+### فوائد الأطر في الممارسة
 
 ```mermaid
 graph TD
@@ -45,31 +83,109 @@ graph TD
 ```
 
 **لماذا الأطر مهمة:**
-- **توحد** مزودي الذكاء الاصطناعي المختلفين تحت واجهة واحدة
+- **توحد** مزودي الذكاء الاصطناعي المتعددين تحت واجهة واحدة
 - **تتعامل** مع ذاكرة المحادثة تلقائيًا
 - **توفر** أدوات جاهزة للمهام الشائعة مثل التضمينات واستدعاء الوظائف
 - **تدير** معالجة الأخطاء ومنطق إعادة المحاولة
 - **تحول** سير العمل المعقد إلى استدعاءات طرق قابلة للقراءة
 
-> 💡 **نصيحة احترافية**: استخدم الأطر عند التبديل بين نماذج الذكاء الاصطناعي المختلفة أو بناء ميزات معقدة مثل الوكلاء، الذاكرة، أو استدعاء الأدوات. التزم بـ APIs المباشرة عند تعلم الأساسيات أو بناء تطبيقات بسيطة ومركزة.
+> 💡 **نصيحة احترافية**: استخدم الأطر عند التبديل بين نماذج الذكاء الاصطناعي المختلفة أو بناء ميزات معقدة مثل الوكلاء، الذاكرة، أو استدعاء الأدوات. التزم بواجهات برمجة التطبيقات المباشرة عند تعلم الأساسيات أو بناء تطبيقات بسيطة ومركزة.
+
+**الخلاصة**: مثل الاختيار بين أدوات متخصصة للحرفي وورشة عمل كاملة، الأمر يتعلق بمطابقة الأداة مع المهمة. الأطر تتفوق في التطبيقات المعقدة والغنية بالميزات، بينما تعمل واجهات برمجة التطبيقات المباشرة بشكل جيد للحالات البسيطة.
 
-**الخلاصة**: مثل اختيار بين أدوات الحرفي المتخصصة وورشة عمل كاملة، الأمر يتعلق بمطابقة الأداة مع المهمة. الأطر تتفوق في التطبيقات المعقدة والغنية بالميزات، بينما تعمل APIs المباشرة بشكل جيد للحالات البسيطة.
+## 🗺️ رحلتك التعليمية لإتقان أطر الذكاء الاصطناعي
+
+```mermaid
+journey
+    title From Raw APIs to Production AI Applications
+    section Framework Foundations
+      Understand abstraction benefits: 4: You
+      Master LangChain basics: 6: You
+      Compare approaches: 7: You
+    section Conversation Systems
+      Build chat interfaces: 5: You
+      Implement memory patterns: 7: You
+      Handle streaming responses: 8: You
+    section Advanced Features
+      Create custom tools: 6: You
+      Master structured output: 8: You
+      Build document systems: 8: You
+    section Production Applications
+      Combine all features: 7: You
+      Handle error scenarios: 8: You
+      Deploy complete systems: 9: You
+```
+
+**وجهة رحلتك**: بحلول نهاية هذا الدرس، ستكون قد أتقنت تطوير أطر الذكاء الاصطناعي وستكون قادرًا على بناء تطبيقات ذكاء اصطناعي متطورة وجاهزة للإنتاج تنافس المساعدين الذكاء الاصطناعي التجاريين.
 
 ## المقدمة
 
 في هذا الدرس، سنتعلم:
 
-- استخدام إطار عمل ذكاء اصطناعي شائع.
+- استخدام إطار ذكاء اصطناعي شائع.
 - معالجة المشكلات الشائعة مثل محادثات الدردشة، استخدام الأدوات، الذاكرة والسياق.
 - الاستفادة من ذلك لبناء تطبيقات ذكاء اصطناعي.
 
+## 🧠 نظام تطوير أطر الذكاء الاصطناعي
+
+```mermaid
+mindmap
+  root((AI Frameworks))
+    Abstraction Benefits
+      Code Simplification
+        Unified APIs
+        Built-in Error Handling
+        Consistent Patterns
+        Reduced Boilerplate
+      Multi-Model Support
+        Provider Agnostic
+        Easy Switching
+        Fallback Options
+        Cost Optimization
+    Core Components
+      Conversation Management
+        Message Types
+        Memory Systems
+        Context Tracking
+        History Persistence
+      Tool Integration
+        Function Calling
+        API Connections
+        Custom Tools
+        Workflow Automation
+    Advanced Features
+      Structured Output
+        Pydantic Models
+        JSON Schemas
+        Type Safety
+        Validation Rules
+      Document Processing
+        Embeddings
+        Vector Stores
+        Similarity Search
+        RAG Systems
+    Production Patterns
+      Application Architecture
+        Modular Design
+        Error Boundaries
+        Async Operations
+        State Management
+      Deployment Strategies
+        Scalability
+        Monitoring
+        Performance
+        Security
+```
+
+**المبدأ الأساسي**: أطر الذكاء الاصطناعي تبسط التعقيد مع توفير تجريدات قوية لإدارة المحادثات، تكامل الأدوات، ومعالجة المستندات، مما يمكن المطورين من بناء تطبيقات ذكاء اصطناعي متطورة بكود نظيف وقابل للصيانة.
+
 ## أول طلب ذكاء اصطناعي لك
 
-لنبدأ بالأساسيات من خلال إنشاء أول تطبيق ذكاء اصطناعي يرسل سؤالًا ويحصل على إجابة. مثلما اكتشف أرخميدس مبدأ الطفو في حمامه، أحيانًا تكون الملاحظات البسيطة هي التي تؤدي إلى أكثر الأفكار قوة - والأطر تجعل هذه الأفكار في متناول اليد.
+لنبدأ بالأساسيات من خلال إنشاء أول تطبيق ذكاء اصطناعي يرسل سؤالاً ويحصل على إجابة. مثلما اكتشف أرخميدس مبدأ الإزاحة في حمامه، أحيانًا تكون الملاحظات البسيطة هي التي تؤدي إلى أقوى الأفكار - والأطر تجعل هذه الأفكار في متناول اليد.
 
 ### إعداد LangChain مع نماذج GitHub
 
-سنستخدم LangChain للاتصال بنماذج GitHub، وهو أمر رائع لأنه يمنحك وصولًا مجانيًا إلى نماذج ذكاء اصطناعي متنوعة. الجزء الأفضل؟ تحتاج فقط إلى بعض معلمات التكوين البسيطة للبدء:
+سنستخدم LangChain للاتصال بنماذج GitHub، وهو أمر رائع لأنه يمنحك وصولاً مجانيًا إلى نماذج ذكاء اصطناعي متنوعة. أفضل جزء؟ تحتاج فقط إلى بعض معلمات التكوين البسيطة للبدء:
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -86,16 +202,16 @@ response = llm.invoke("What's the capital of France?")
 print(response.content)
 ```
 
-**لنقم بتفصيل ما يحدث هنا:**
+**دعنا نوضح ما يحدث هنا:**
 - **إنشاء** عميل LangChain باستخدام فئة `ChatOpenAI` - هذا هو بوابتك إلى الذكاء الاصطناعي!
 - **تكوين** الاتصال بنماذج GitHub باستخدام رمز المصادقة الخاص بك
-- **تحديد** النموذج الذي تريد استخدامه (`gpt-4o-mini`) - فكر في هذا كاختيار مساعد الذكاء الاصطناعي الخاص بك
+- **تحديد** النموذج الذكاء الاصطناعي الذي تريد استخدامه (`gpt-4o-mini`) - فكر في هذا كاختيار مساعد الذكاء الاصطناعي الخاص بك
 - **إرسال** سؤالك باستخدام طريقة `invoke()` - هنا يحدث السحر
 - **استخراج** وعرض الإجابة - وها أنت تتحدث مع الذكاء الاصطناعي!
 
 > 🔧 **ملاحظة الإعداد**: إذا كنت تستخدم GitHub Codespaces، فأنت محظوظ - تم إعداد `GITHUB_TOKEN` بالفعل لك! تعمل محليًا؟ لا تقلق، ستحتاج فقط إلى إنشاء رمز وصول شخصي مع الأذونات المناسبة.
 
-**الناتج المتوقع:**
+**الإخراج المتوقع:**
 ```text
 The capital of France is Paris.
 ```
@@ -117,13 +233,13 @@ sequenceDiagram
 
 ## بناء ذكاء اصطناعي محادثي
 
-المثال الأول يوضح الأساسيات، لكنه مجرد تبادل واحد - تسأل سؤالًا، تحصل على إجابة، وهذا كل شيء. في التطبيقات الحقيقية، تريد أن يتذكر الذكاء الاصطناعي ما كنت تناقشه، مثلما بنى واتسون وهولمز محادثاتهم التحقيقية بمرور الوقت.
+المثال الأول يوضح الأساسيات، لكنه مجرد تبادل واحد - تسأل سؤالاً، تحصل على إجابة، وهذا كل شيء. في التطبيقات الحقيقية، تريد أن يتذكر الذكاء الاصطناعي ما كنت تناقشه، مثلما بنى واتسون وهولمز محادثاتهم التحقيقية بمرور الوقت.
 
-هنا يصبح LangChain مفيدًا بشكل خاص. يوفر أنواع رسائل مختلفة تساعد في هيكلة المحادثات وتتيح لك إعطاء الذكاء الاصطناعي شخصية. ستقوم ببناء تجارب دردشة تحافظ على السياق والشخصية.
+هنا يصبح LangChain مفيدًا بشكل خاص. فهو يوفر أنواعًا مختلفة من الرسائل التي تساعد في هيكلة المحادثات وتتيح لك إعطاء الذكاء الاصطناعي شخصية. ستقوم ببناء تجارب دردشة تحافظ على السياق والشخصية.
 
 ### فهم أنواع الرسائل
 
-فكر في هذه الأنواع من الرسائل كقبعات مختلفة يرتديها المشاركون في المحادثة. يستخدم LangChain فئات رسائل مختلفة لتتبع من يقول ماذا:
+فكر في هذه الأنواع من الرسائل كأنها "قبعات" مختلفة يرتديها المشاركون في المحادثة. يستخدم LangChain فئات رسائل مختلفة لتتبع من يقول ماذا:
 
 | نوع الرسالة | الغرض | مثال على الاستخدام |
 |-------------|-------|---------------------|
@@ -133,7 +249,7 @@ sequenceDiagram
 
 ### إنشاء أول محادثة لك
 
-لنقم بإنشاء محادثة حيث يتولى الذكاء الاصطناعي دورًا معينًا. سنجعله يجسد شخصية الكابتن بيكارد - شخصية معروفة بحكمتها الدبلوماسية وقيادتها:
+دعنا ننشئ محادثة حيث يتبنى الذكاء الاصطناعي دورًا معينًا. سنجعله يجسد شخصية الكابتن بيكارد - شخصية معروفة بحكمته الدبلوماسية وقيادته:
 
 ```python
 messages = [
@@ -145,7 +261,7 @@ messages = [
 **تفصيل إعداد هذه المحادثة:**
 - **تحديد** دور وشخصية الذكاء الاصطناعي من خلال `SystemMessage`
 - **تقديم** استفسار المستخدم الأولي عبر `HumanMessage`
-- **إنشاء** أساس للمحادثة متعددة الأدوار
+- **إنشاء** أساس لمحادثة متعددة الأدوار
 
 الكود الكامل لهذا المثال يبدو كالتالي:
 
@@ -181,7 +297,7 @@ I believe in the importance of diplomacy, reason, and the pursuit of knowledge.
 I hold the ideals of the Federation close to my heart, believing in the importance of cooperation, understanding, and respect for all sentient beings. My experiences have shaped my leadership style, and I strive to be a thoughtful and just captain. How may I assist you further?
 ```
 
-للحفاظ على استمرارية المحادثة (بدلاً من إعادة تعيين السياق في كل مرة)، تحتاج إلى الاستمرار في إضافة الردود إلى قائمة الرسائل الخاصة بك. مثل التقاليد الشفوية التي حافظت على القصص عبر الأجيال، هذا النهج يبني ذاكرة دائمة:
+للحفاظ على استمرارية المحادثة (بدلاً من إعادة تعيين السياق في كل مرة)، تحتاج إلى الاستمرار في إضافة الردود إلى قائمة الرسائل. مثل التقاليد الشفوية التي حافظت على القصص عبر الأجيال، هذا النهج يبني ذاكرة دائمة:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -216,9 +332,9 @@ print(response.content)
 
 ```
 
-رائع، أليس كذلك؟ ما يحدث هنا هو أننا نستدعي LLM مرتين - أولاً مع رسائلنا الأولية فقط، ثم مرة أخرى مع سجل المحادثة الكامل. الأمر يشبه أن الذكاء الاصطناعي يتابع بالفعل محادثتنا!
+رائع، أليس كذلك؟ ما يحدث هنا هو أننا نستدعي LLM مرتين - أولاً مع رسائلنا الأولية فقط، ثم مرة أخرى مع تاريخ المحادثة الكامل. إنه يشبه أن الذكاء الاصطناعي يتابع محادثتنا بالفعل!
 
-عند تشغيل هذا الكود، ستحصل على رد ثانٍ يبدو شيئًا مثل:
+عند تشغيل هذا الكود، ستحصل على استجابة ثانية تبدو كالتالي:
 
 ```text
 Welcome aboard, Chris! It's always a pleasure to meet those who share a passion for exploration and discovery. While I cannot formally offer you a position on the Enterprise right now, I encourage you to pursue your aspirations. We are always in need of talented individuals with diverse skills and backgrounds. 
@@ -226,13 +342,37 @@ Welcome aboard, Chris! It's always a pleasure to meet those who share a passion
 If you are interested in space exploration, consider education and training in the sciences, engineering, or diplomacy. The values of curiosity, resilience, and teamwork are crucial in Starfleet. Should you ever find yourself on a starship, remember to uphold the principles of the Federation: peace, understanding, and respect for all beings. Your journey can lead you to remarkable adventures, whether in the stars or on the ground. Engage!
 ```
 
-سأعتبر ذلك ربما ;)
+```mermaid
+sequenceDiagram
+    participant User
+    participant App
+    participant LangChain
+    participant AI
+    
+    User->>App: "Tell me about you"
+    App->>LangChain: [SystemMessage, HumanMessage]
+    LangChain->>AI: Formatted conversation
+    AI->>LangChain: Captain Picard response
+    LangChain->>App: AIMessage object
+    App->>User: Display response
+    
+    Note over App: Add AIMessage to conversation
+    
+    User->>App: "Can I join your crew?"
+    App->>LangChain: [SystemMessage, HumanMessage, AIMessage, HumanMessage]
+    LangChain->>AI: Full conversation context
+    AI->>LangChain: Contextual response
+    LangChain->>App: New AIMessage
+    App->>User: Display contextual response
+```
 
-## الردود المتدفقة
+سأعتبر ذلك كـ "ربما" ;)
 
-هل لاحظت كيف يبدو أن ChatGPT "يكتب" ردوده في الوقت الفعلي؟ هذا هو التدفق أثناء العمل. مثل مشاهدة خطاط ماهر يعمل - رؤية الحروف تظهر ضربة بضربة بدلاً من أن تتجسد فجأة - التدفق يجعل التفاعل يبدو أكثر طبيعية ويوفر ردود فعل فورية.
+## استجابات البث
 
-### تنفيذ التدفق مع LangChain
+هل لاحظت كيف يبدو أن ChatGPT "يكتب" استجاباته في الوقت الفعلي؟ هذا هو البث أثناء العمل. مثل مشاهدة خطاط ماهر يعمل - رؤية الحروف تظهر ضربة بضربة بدلاً من أن تظهر فجأة - يجعل البث التفاعل يبدو أكثر طبيعية ويوفر ردود فعل فورية.
+
+### تنفيذ البث مع LangChain
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -250,19 +390,32 @@ for chunk in llm.stream("Write a short story about a robot learning to code"):
     print(chunk.content, end="", flush=True)
 ```
 
-**لماذا التدفق رائع:**
+**لماذا البث رائع:**
 - **يعرض** المحتوى أثناء إنشائه - لا مزيد من الانتظار المحرج!
 - **يجعل** المستخدمين يشعرون بأن شيئًا ما يحدث بالفعل
 - **يبدو** أسرع، حتى عندما لا يكون كذلك تقنيًا
-- **يسمح** للمستخدمين ببدء القراءة بينما الذكاء الاصطناعي لا يزال "يفكر"
+- **يسمح** للمستخدمين ببدء القراءة بينما لا يزال الذكاء الاصطناعي "يفكر"
+
+> 💡 **نصيحة لتجربة المستخدم**: البث يبرز حقًا عند التعامل مع الردود الطويلة مثل شروحات الأكواد، الكتابة الإبداعية، أو الدروس التفصيلية. سيحب المستخدمون رؤية التقدم بدلاً من التحديق في شاشة فارغة!
+
+### 🎯 مراجعة تربوية: فوائد تجريد الإطار
+
+**توقف وتأمل**: لقد اختبرت للتو قوة تجريدات أطر الذكاء الاصطناعي. قارن ما تعلمته باستدعاءات واجهات برمجة التطبيقات الخام من الدروس السابقة.
 
-> 💡 **نصيحة تجربة المستخدم**: التدفق يبرز حقًا عند التعامل مع الردود الطويلة مثل شرح الأكواد، الكتابة الإبداعية، أو الشروحات التفصيلية. سيحب المستخدمون رؤية التقدم بدلاً من التحديق في شاشة فارغة!
+**تقييم ذاتي سريع**:
+- هل يمكنك شرح كيف يبسط LangChain إدارة المحادثات مقارنة بتتبع الرسائل يدويًا؟
+- ما الفرق بين طريقتي `invoke()` و `stream()`، ومتى تستخدم كل منهما؟
+- كيف يحسن نظام أنواع الرسائل في الإطار تنظيم الكود؟
+
+**صلة بالعالم الواقعي**: أنماط التجريد التي تعلمتها (أنواع الرسائل، واجهات البث، ذاكرة المحادثة) تُستخدم في كل تطبيق ذكاء اصطناعي رئيسي - من واجهة ChatGPT إلى مساعدة الأكواد في GitHub Copilot. أنت تتقن نفس الأنماط المعمارية التي تستخدمها فرق تطوير الذكاء الاصطناعي المحترفة.
+
+**سؤال التحدي**: كيف ستصمم تجريد إطار للتعامل مع مزودي نماذج الذكاء الاصطناعي المختلفين (OpenAI، Anthropic، Google) بواجهة واحدة؟ فكر في الفوائد والمقايضات.
 
 ## قوالب الطلبات
 
-قوالب الطلبات تعمل مثل الهياكل البلاغية المستخدمة في الخطابة الكلاسيكية - فكر في كيفية تكييف شيشرون أنماط خطابه لجماهير مختلفة مع الحفاظ على نفس الإطار الإقناعي. إنها تتيح لك إنشاء طلبات قابلة لإعادة الاستخدام حيث يمكنك تبديل أجزاء مختلفة من المعلومات دون إعادة كتابة كل شيء من البداية. بمجرد إعداد القالب، تقوم فقط بملء المتغيرات بالقيم التي تحتاجها.
+تعمل قوالب الطلبات مثل الهياكل البلاغية المستخدمة في الخطابة الكلاسيكية - فكر في كيفية تعديل شيشرون لأنماط خطابه لجماهير مختلفة مع الحفاظ على نفس الإطار الإقناعي. إنها تتيح لك إنشاء طلبات قابلة لإعادة الاستخدام حيث يمكنك استبدال أجزاء مختلفة من المعلومات دون إعادة كتابة كل شيء من البداية. بمجرد إعداد القالب، ما عليك سوى ملء المتغيرات بالقيم التي تحتاجها.
 
-### إنشاء طلبات قابلة لإعادة الاستخدام
+### إنشاء قوالب قابلة لإعادة الاستخدام
 
 ```python
 from langchain_core.prompts import ChatPromptTemplate
@@ -287,16 +440,16 @@ for question in questions:
 ```
 
 **لماذا ستحب استخدام القوالب:**
-- **تحافظ** على طلباتك متسقة عبر تطبيقك بالكامل
+- **تحافظ** على اتساق طلباتك عبر تطبيقك بالكامل
 - **لا مزيد** من تجميع النصوص الفوضوي - فقط متغيرات نظيفة وبسيطة
-- **ذكاءك الاصطناعي** يتصرف بشكل متوقع لأن الهيكل يبقى كما هو
+- **يتصرف الذكاء الاصطناعي** بشكل متوقع لأن الهيكل يظل كما هو
 - **التحديثات** سهلة - قم بتغيير القالب مرة واحدة، ويتم إصلاحه في كل مكان
 
-## المخرجات المنظمة
+## الإخراج المنظم
 
-هل شعرت بالإحباط أثناء محاولة تحليل ردود الذكاء الاصطناعي التي تعود كنص غير منظم؟ المخرجات المنظمة تشبه تعليم الذكاء الاصطناعي اتباع النهج المنهجي الذي استخدمه لينيوس لتصنيف الكائنات الحية - منظم، قابل للتنبؤ، وسهل التعامل معه. يمكنك طلب JSON، هياكل بيانات محددة، أو أي تنسيق تحتاجه.
+هل شعرت بالإحباط من محاولة تحليل استجابات الذكاء الاصطناعي التي تعود كنص غير منظم؟ الإخراج المنظم يشبه تعليم الذكاء الاصطناعي اتباع النهج المنهجي الذي استخدمه لينيوس لتصنيف الكائنات الحية - منظم، يمكن التنبؤ به، وسهل التعامل معه. يمكنك طلب JSON، هياكل بيانات محددة، أو أي تنسيق تحتاجه.
 
-### تعريف مخططات المخرجات
+### تحديد مخططات الإخراج
 
 ```python
 from langchain_core.prompts import ChatPromptTemplate
@@ -336,11 +489,11 @@ print(f"Score: {result['score']}")
 print(f"Strengths: {', '.join(result['strengths'])}")
 ```
 
-**لماذا المخرجات المنظمة تغير اللعبة:**
-- **لا مزيد** من التخمين حول التنسيق الذي ستحصل عليه - إنه ثابت في كل مرة
-- **يتصل** مباشرة بقواعد بياناتك وواجهات برمجية التطبيقات دون عمل إضافي
-- **يكتشف** ردود الذكاء الاصطناعي الغريبة قبل أن تكسر تطبيقك
-- **يجعل** الكود الخاص بك أنظف لأنك تعرف بالضبط ما تعمل معه
+**لماذا الإخراج المنظم يغير اللعبة:**
+- **لا مزيد** من التخمين حول التنسيق الذي ستحصل عليه - إنه متسق في كل مرة
+- **يتصل** مباشرة بقواعد البيانات وواجهات برمجة التطبيقات الخاصة بك دون عمل إضافي
+- **يكتشف** استجابات الذكاء الاصطناعي الغريبة قبل أن تعطل تطبيقك
+- **يجعل** كودك أنظف لأنك تعرف بالضبط ما تعمل معه
 
 ## استدعاء الأدوات
 
@@ -348,7 +501,7 @@ print(f"Strengths: {', '.join(result['strengths'])}")
 
 ### استخدام Python
 
-لنقم بإضافة بعض الأدوات كما يلي:
+دعنا نضيف بعض الأدوات كالتالي:
 
 ```python
 from typing_extensions import Annotated, TypedDict
@@ -367,9 +520,9 @@ functions = {
 }
 ```
 
-ما الذي يحدث هنا؟ نحن ننشئ مخططًا لأداة تسمى `add`. من خلال الوراثة من `TypedDict` واستخدام تلك الأنواع `Annotated` الأنيقة لـ `a` و `b`، نحن نقدم للـ LLM صورة واضحة عما تفعله هذه الأداة وما تحتاجه. قاموس `functions` يشبه صندوق الأدوات الخاص بنا - يخبر الكود الخاص بنا بالضبط ماذا يفعل عندما يقرر الذكاء الاصطناعي استخدام أداة معينة.
+ما الذي يحدث هنا؟ نحن ننشئ مخططًا لأداة تسمى `add`. من خلال الوراثة من `TypedDict` واستخدام أنواع `Annotated` الأنيقة لـ `a` و `b`، نحن نقدم للـ LLM صورة واضحة عما تفعله هذه الأداة وما تحتاجه. قاموس `functions` يشبه صندوق الأدوات الخاص بنا - يخبر كودنا بالضبط ما يجب فعله عندما يقرر الذكاء الاصطناعي استخدام أداة معينة.
 
-لنرى كيف نستدعي LLM بهذه الأداة بعد ذلك:
+دعنا نرى كيف نستدعي LLM بهذه الأداة بعد ذلك:
 
 ```python
 llm = ChatOpenAI(
@@ -381,7 +534,7 @@ llm = ChatOpenAI(
 llm_with_tools = llm.bind_tools(tools)
 ```
 
-هنا نستدعي `bind_tools` مع مصفوفة `tools` الخاصة بنا وبالتالي أصبح LLM `llm_with_tools` الآن لديه معرفة بهذه الأداة.
+هنا نستدعي `bind_tools` مع مصفوفة `tools` الخاصة بنا وبالتالي فإن LLM `llm_with_tools` لديه الآن معرفة بهذه الأداة.
 
 لاستخدام هذا LLM الجديد، يمكننا كتابة الكود التالي:
 
@@ -395,7 +548,7 @@ if(res.tool_calls):
 print("CONTENT: ",res.content)
 ```
 
-الآن عندما نستدعي `invoke` على هذا LLM الجديد، الذي يحتوي على أدوات، قد يتم تعبئة الخاصية `tool_calls`. إذا كان الأمر كذلك، فإن أي أدوات تم تحديدها تحتوي على خاصية `name` و `args` التي تحدد الأداة التي يجب استدعاؤها ومع الوسائط. الكود الكامل يبدو كالتالي:
+الآن عند استدعاء `invoke` على هذا LLM الجديد، الذي يحتوي على أدوات، قد يتم تعبئة الخاصية `tool_calls`. إذا كان الأمر كذلك، فإن أي أدوات محددة تحتوي على خاصية `name` و `args` التي تحدد الأداة التي يجب استدعاؤها ومع الوسائط. الكود الكامل يبدو كالتالي:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -433,22 +586,21 @@ if(res.tool_calls):
 print("CONTENT: ",res.content)
 ```
 
-عند تشغيل هذا الكود، يجب أن ترى ناتجًا مشابهًا لـ:
+عند تشغيل هذا الكود، يجب أن ترى إخراجًا مشابهًا لـ:
 
 ```text
 TOOL CALL:  15
 CONTENT: 
 ```
 
-قام الذكاء الاصطناعي بفحص "ما هو 3 + 12" وتعرف على هذا كعمل للأداة `add`. مثلما يعرف أمين المكتبة الماهر المرجع الذي يجب استشارته بناءً على نوع السؤال المطروح، قام بهذا التحديد من اسم الأداة، وصفها، ومواصفات الحقول. النتيجة 15 تأتي من قاموس `functions` الخاص بنا الذي ينفذ الأداة:
+قام الذكاء الاصطناعي بفحص "ما هو 3 + 12" وتعرف على ذلك كمهام لأداة `add`. مثلما يعرف أمين مكتبة ماهر المرجع الذي يجب استشارته بناءً على نوع السؤال المطروح، قام بتحديد ذلك من اسم الأداة، وصفها، ومواصفات الحقول. النتيجة 15 تأتي من قاموس `functions` الخاص بنا الذي ينفذ الأداة:
 
 ```python
 print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
 ```
 
-### أداة أكثر إثارة للاهتمام تستدعي واجهة برمجية ويب
-
-إضافة الأرقام توضح المفهوم، لكن الأدوات الحقيقية عادةً ما تؤدي عمليات أكثر تعقيدًا، مثل استدعاء واجهات برمجية ويب. لنقم بتوسيع مثالنا ليجعل الذكاء الاصطناعي يجلب محتوى من الإنترنت - مشابهًا لكيفية اتصال مشغلي التلغراف بالمواقع البعيدة:
+### أداة أكثر إثارة للاهتمام تستدعي واجهة برمجة تطبيقات ويب
+إضافة الأرقام يوضح المفهوم، ولكن الأدوات الحقيقية عادةً ما تقوم بعمليات أكثر تعقيدًا، مثل استدعاء واجهات برمجة التطبيقات على الويب. دعونا نوسع مثالنا ليقوم الذكاء الاصطناعي بجلب المحتوى من الإنترنت - تمامًا كما كان مشغلو التلغراف يربطون المواقع البعيدة:
 
 ```python
 class joke(TypedDict):
@@ -473,13 +625,40 @@ query = "Tell me a joke about animals"
 # the rest of the code is the same
 ```
 
-الآن إذا قمت بتشغيل هذا الكود، ستحصل على رد يقول شيئًا مثل:
+الآن إذا قمت بتشغيل هذا الكود، ستحصل على استجابة تقول شيئًا مثل:
 
 ```text
 TOOL CALL:  Chuck Norris once rode a nine foot grizzly bear through an automatic car wash, instead of taking a shower.
 CONTENT:  
 ```
 
+```mermaid
+flowchart TD
+    A[User Query: "Tell me a joke about animals"] --> B[LangChain Analysis]
+    B --> C{Tool Available?}
+    C -->|Yes| D[Select joke tool]
+    C -->|No| E[Generate direct response]
+    
+    D --> F[Extract Parameters]
+    F --> G[Call joke(category="animals")]
+    G --> H[API Request to chucknorris.io]
+    H --> I[Return joke content]
+    I --> J[Display to user]
+    
+    E --> K[AI-generated response]
+    K --> J
+    
+    subgraph "Tool Definition Layer"
+        L[TypedDict Schema]
+        M[Function Implementation]
+        N[Parameter Validation]
+    end
+    
+    D --> L
+    F --> N
+    G --> M
+```
+
 إليك الكود بالكامل:
 
 ```python
@@ -534,7 +713,7 @@ print("CONTENT: ",res.content)
 
 ## التضمينات ومعالجة المستندات
 
-التضمينات تمثل واحدة من أكثر الحلول أناقة في الذكاء الاصطناعي الحديث. تخيل أنك تستطيع أخذ أي قطعة نص وتحويلها إلى إحداثيات رقمية تعبر عن معناها. هذا بالضبط ما تفعله التضمينات - تحول النص إلى نقاط في فضاء متعدد الأبعاد حيث تتجمع المفاهيم المتشابهة معًا. إنه يشبه وجود نظام إحداثيات للأفكار، يشبه كيف نظم مندلييف الجدول الدوري بناءً على الخصائص الذرية.
+التضمينات تمثل واحدة من أكثر الحلول أناقة في الذكاء الاصطناعي الحديث. تخيل لو كان بإمكانك أخذ أي قطعة نص وتحويلها إلى إحداثيات رقمية تعبر عن معناها. هذا بالضبط ما تفعله التضمينات - فهي تحول النصوص إلى نقاط في فضاء متعدد الأبعاد حيث تتجمع المفاهيم المتشابهة معًا. إنه مثل وجود نظام إحداثيات للأفكار، يشبه الطريقة التي نظم بها مندلييف الجدول الدوري بناءً على الخصائص الذرية.
 
 ### إنشاء واستخدام التضمينات
 
@@ -569,7 +748,7 @@ for doc in similar_docs:
     print(f"Relevant content: {doc.page_content[:200]}...")
 ```
 
-### محملات المستندات لأنواع مختلفة من التنسيقات
+### محملات المستندات لمختلف الصيغ
 
 ```python
 from langchain_community.document_loaders import (
@@ -593,14 +772,39 @@ for loader in [pdf_loader, csv_loader, json_loader, web_loader]:
 ```
 
 **ما يمكنك فعله بالتضمينات:**
-- **بناء** بحث يفهم ما تعنيه فعليًا، وليس فقط مطابقة الكلمات الرئيسية
-- **إنشاء** ذكاء اصطناعي يمكنه الإجابة عن أسئلة حول مستنداتك
-- **صنع** أنظمة توصية تقترح محتوى ذا صلة حقيقية
+- **إنشاء** بحث يفهم ما تعنيه، وليس فقط مطابقة الكلمات المفتاحية
+- **تطوير** ذكاء اصطناعي يمكنه الإجابة على الأسئلة المتعلقة بمستنداتك
+- **تصميم** أنظمة توصية تقترح محتوى ذو صلة حقيقية
 - **تنظيم وتصنيف** المحتوى الخاص بك تلقائيًا
 
+```mermaid
+flowchart LR
+    A[Documents] --> B[Text Splitter]
+    B --> C[Create Embeddings]
+    C --> D[Vector Store]
+    
+    E[User Query] --> F[Query Embedding]
+    F --> G[Similarity Search]
+    G --> D
+    D --> H[Relevant Documents]
+    H --> I[AI Response]
+    
+    subgraph "Vector Space"
+        J[Document A: [0.1, 0.8, 0.3...]]
+        K[Document B: [0.2, 0.7, 0.4...]]
+        L[Query: [0.15, 0.75, 0.35...]]
+    end
+    
+    C --> J
+    C --> K
+    F --> L
+    G --> J
+    G --> K
+```
+
 ## بناء تطبيق ذكاء اصطناعي كامل
 
-الآن سنقوم بدمج كل ما تعلمته في تطبيق شامل - مساعد برمجة يمكنه الإجابة عن الأسئلة، استخدام الأدوات، والحفاظ على ذاكرة المحادثة. مثلما جمعت الطباعة بين تقنيات موجودة (الحروف المتحركة، الحبر، الورق، والضغط) في شيء تحولي، سنجمع مكونات الذكاء الاصطناعي الخاصة بنا في شيء عملي ومفيد.
+الآن سنقوم بدمج كل ما تعلمته في تطبيق شامل - مساعد برمجي يمكنه الإجابة على الأسئلة، استخدام الأدوات، والحفاظ على ذاكرة المحادثة. كما أن الطباعة جمعت بين تقنيات موجودة (الحروف المتحركة، الحبر، الورق، والضغط) في شيء تحولي، سنقوم بدمج مكونات الذكاء الاصطناعي لدينا في شيء عملي ومفيد.
 
 ### مثال على تطبيق كامل
 
@@ -708,57 +912,71 @@ graph TD
 ```
 
 **الميزات الرئيسية التي قمنا بتنفيذها:**
-- **يتذكر** محادثتك بالكامل لاستمرارية السياق
+- **يتذكر** المحادثة بأكملها لاستمرارية السياق
 - **يقوم بالإجراءات** من خلال استدعاء الأدوات، وليس فقط المحادثة
-- **يتبع** أنماط تفاعل قابلة للتنبؤ
+- **يتبع** أنماط تفاعل متوقعة
 - **يدير** معالجة الأخطاء وسير العمل المعقد تلقائيًا
 
+### 🎯 مراجعة تعليمية: هيكلية الذكاء الاصطناعي للإنتاج
+
+**فهم الهيكلية**: لقد قمت ببناء تطبيق ذكاء اصطناعي كامل يجمع بين إدارة المحادثة، استدعاء الأدوات، وسير العمل المنظم. هذا يمثل تطوير تطبيق ذكاء اصطناعي على مستوى الإنتاج.
+
+**المفاهيم الرئيسية التي تم إتقانها**:
+- **هيكلية قائمة على الفئات**: هيكلية منظمة وقابلة للصيانة لتطبيقات الذكاء الاصطناعي
+- **دمج الأدوات**: وظائف مخصصة تتجاوز المحادثة
+- **إدارة الذاكرة**: سياق المحادثة المستمر
+- **معالجة الأخطاء**: سلوك التطبيق القوي
+
+**اتصال بالصناعة**: أنماط الهيكلية التي قمت بتنفيذها (فئات المحادثة، أنظمة الأدوات، إدارة الذاكرة) هي نفس الأنماط المستخدمة في تطبيقات الذكاء الاصطناعي المؤسسية مثل مساعد Slack الذكي، GitHub Copilot، وMicrosoft Copilot. أنت تبني بتفكير هيكلي على مستوى احترافي.
+
+**سؤال للتفكير**: كيف يمكنك توسيع هذا التطبيق للتعامل مع مستخدمين متعددين، تخزين دائم، أو التكامل مع قواعد بيانات خارجية؟ فكر في تحديات التوسع وإدارة الحالة.
+
 ## المهمة: بناء مساعد دراسي مدعوم بالذكاء الاصطناعي
 
-**الهدف**: إنشاء تطبيق ذكاء اصطناعي يساعد الطلاب على تعلم مفاهيم البرمجة من خلال تقديم شروحات، أمثلة على الأكواد، واختبارات تفاعلية.
+**الهدف**: إنشاء تطبيق ذكاء اصطناعي يساعد الطلاب على تعلم مفاهيم البرمجة من خلال تقديم الشروحات، أمثلة الكود، والاختبارات التفاعلية.
 
 ### المتطلبات
 
 **الميزات الأساسية (مطلوبة):**
-1. **واجهة محادثة**: تنفيذ نظام دردشة يحافظ على السياق عبر الأسئلة المتعددة
+1. **واجهة محادثة**: تنفيذ نظام دردشة يحافظ على السياق عبر أسئلة متعددة
 2. **أدوات تعليمية**: إنشاء أداتين على الأقل تساعدان في التعلم:
-   - أداة شرح الأكواد
+   - أداة شرح الكود
    - مولد اختبارات المفاهيم
-3. **التعلم المخصص**: استخدم رسائل النظام لتكييف الردود مع مستويات المهارة المختلفة  
-4. **تنسيق الردود**: قم بتنفيذ إخراج منظم للأسئلة الاختبارية  
+3. **تعلم شخصي**: استخدام رسائل النظام لتكييف الردود مع مستويات المهارة المختلفة
+4. **تنسيق الردود**: تنفيذ إخراج منظم لأسئلة الاختبار
 
-### خطوات التنفيذ  
+### خطوات التنفيذ
 
-**الخطوة 1: إعداد البيئة الخاصة بك**  
+**الخطوة 1: إعداد البيئة**
 ```bash
 pip install langchain langchain-openai
 ```
-  
-**الخطوة 2: وظيفة الدردشة الأساسية**  
-- قم بإنشاء فئة `StudyAssistant`  
-- نفذ ذاكرة المحادثة  
-- أضف إعدادات الشخصية لدعم التعليم  
 
-**الخطوة 3: إضافة أدوات تعليمية**  
-- **شرح الكود**: تفصيل الكود إلى أجزاء مفهومة  
-- **مولد الاختبارات**: إنشاء أسئلة حول مفاهيم البرمجة  
-- **متتبع التقدم**: متابعة المواضيع التي تم تغطيتها  
+**الخطوة 2: وظيفة الدردشة الأساسية**
+- إنشاء فئة `StudyAssistant`
+- تنفيذ ذاكرة المحادثة
+- إضافة تكوين الشخصية لدعم التعليم
+
+**الخطوة 3: إضافة الأدوات التعليمية**
+- **شارح الكود**: يشرح الكود إلى أجزاء مفهومة
+- **مولد الاختبارات**: ينشئ أسئلة حول مفاهيم البرمجة
+- **متعقب التقدم**: يتابع المواضيع التي تم تغطيتها
 
-**الخطوة 4: ميزات محسنة (اختياري)**  
-- تنفيذ ردود متدفقة لتحسين تجربة المستخدم  
-- إضافة تحميل المستندات لدمج مواد الدورة  
-- إنشاء تضمينات لاسترجاع المحتوى بناءً على التشابه  
+**الخطوة 4: ميزات محسنة (اختياري)**
+- تنفيذ ردود متدفقة لتحسين تجربة المستخدم
+- إضافة تحميل المستندات لدمج مواد الدورة
+- إنشاء تضمينات لاسترجاع المحتوى بناءً على التشابه
 
-### معايير التقييم  
+### معايير التقييم
 
-| الميزة | ممتاز (4) | جيد (3) | مرضي (2) | يحتاج إلى تحسين (1) |  
-|--------|-----------|---------|-----------|---------------------|  
-| **تدفق المحادثة** | ردود طبيعية وواعية للسياق | احتفاظ جيد بالسياق | محادثة أساسية | لا توجد ذاكرة بين التبادلات |  
-| **دمج الأدوات** | أدوات متعددة تعمل بسلاسة | تنفيذ صحيح لأكثر من أداة | 1-2 أدوات أساسية | الأدوات غير وظيفية |  
-| **جودة الكود** | نظيف، موثق جيدًا، معالجة الأخطاء | هيكل جيد، بعض التوثيق | الوظائف الأساسية تعمل | هيكل ضعيف، لا توجد معالجة أخطاء |  
-| **القيمة التعليمية** | مفيد جدًا للتعلم، متكيف | دعم تعليمي جيد | تفسيرات أساسية | فائدة تعليمية محدودة |  
+| الميزة | ممتاز (4) | جيد (3) | مرضي (2) | يحتاج إلى تحسين (1) |
+|--------|-----------|---------|----------|----------------------|
+| **تدفق المحادثة** | ردود طبيعية وواعية للسياق | احتفاظ جيد بالسياق | محادثة أساسية | لا توجد ذاكرة بين التبادلات |
+| **دمج الأدوات** | أدوات متعددة مفيدة تعمل بسلاسة | تنفيذ صحيح لأكثر من أداتين | 1-2 أدوات أساسية | الأدوات غير وظيفية |
+| **جودة الكود** | نظيف، موثق جيدًا، معالجة الأخطاء | هيكل جيد، بعض التوثيق | الوظائف الأساسية تعمل | هيكل ضعيف، لا توجد معالجة أخطاء |
+| **القيمة التعليمية** | مفيد جدًا للتعلم، متكيف | دعم جيد للتعلم | شروحات أساسية | فائدة تعليمية محدودة |
 
-### هيكل الكود النموذجي  
+### هيكل عينة للكود
 
 ```python
 class StudyAssistant:
@@ -782,42 +1000,101 @@ class StudyAssistant:
 assistant = StudyAssistant(skill_level="intermediate")
 response = assistant.chat("Explain how Python functions work")
 ```
-  
-**تحديات إضافية:**  
-- إضافة قدرات الإدخال/الإخراج الصوتي  
-- تنفيذ واجهة ويب باستخدام Streamlit أو Flask  
-- إنشاء قاعدة معرفة من مواد الدورة باستخدام التضمينات  
-- إضافة تتبع التقدم ومسارات تعلم مخصصة  
 
-## الملخص  
+**تحديات إضافية:**
+- إضافة قدرات الإدخال/الإخراج الصوتي
+- تنفيذ واجهة ويب باستخدام Streamlit أو Flask
+- إنشاء قاعدة معرفة من مواد الدورة باستخدام التضمينات
+- إضافة تتبع التقدم ومسارات تعلم شخصية
 
-🎉 لقد أتقنت الآن أساسيات تطوير إطار عمل الذكاء الاصطناعي وتعلمت كيفية بناء تطبيقات ذكاء اصطناعي متطورة باستخدام LangChain. مثل إكمال تدريب شامل، اكتسبت مجموعة كبيرة من المهارات. دعنا نراجع ما أنجزته.  
+## 📈 جدول زمني لإتقان تطوير إطار عمل الذكاء الاصطناعي الخاص بك
 
-### ما تعلمته  
+```mermaid
+timeline
+    title Production AI Framework Development Journey
+    
+    section Framework Foundations
+        Understanding Abstractions
+            : Master framework vs API decisions
+            : Learn LangChain core concepts
+            : Implement message type systems
+        
+        Basic Integration
+            : Connect to AI providers
+            : Handle authentication
+            : Manage configuration
+    
+    section Conversation Systems
+        Memory Management
+            : Build conversation history
+            : Implement context tracking
+            : Handle session persistence
+        
+        Advanced Interactions
+            : Master streaming responses
+            : Create prompt templates
+            : Implement structured output
+    
+    section Tool Integration
+        Custom Tool Development
+            : Design tool schemas
+            : Implement function calling
+            : Handle external APIs
+        
+        Workflow Automation
+            : Chain multiple tools
+            : Create decision trees
+            : Build agent behaviors
+    
+    section Production Applications
+        Complete System Architecture
+            : Combine all framework features
+            : Implement error boundaries
+            : Create maintainable code
+        
+        Enterprise Readiness
+            : Handle scalability concerns
+            : Implement monitoring
+            : Build deployment strategies
+```
+
+**🎓 معلم التخرج**: لقد أتقنت بنجاح تطوير إطار عمل الذكاء الاصطناعي باستخدام نفس الأدوات والأنماط التي تدعم تطبيقات الذكاء الاصطناعي الحديثة. هذه المهارات تمثل أحدث ما توصل إليه تطوير تطبيقات الذكاء الاصطناعي وتعدك لبناء أنظمة ذكية على مستوى المؤسسات.
+
+**🔄 قدرات المستوى التالي**:
+- جاهز لاستكشاف هيكليات الذكاء الاصطناعي المتقدمة (الوكلاء، أنظمة الوكلاء المتعددة)
+- مستعد لبناء أنظمة RAG باستخدام قواعد بيانات المتجهات
+- مجهز لإنشاء تطبيقات ذكاء اصطناعي متعددة الوسائط
+- الأساس جاهز لتوسيع وتحسين تطبيقات الذكاء الاصطناعي
 
-**مفاهيم الإطار الأساسية:**  
-- **فوائد الإطار**: فهم متى تختار الإطارات بدلاً من استدعاءات API المباشرة  
-- **أساسيات LangChain**: إعداد وتكوين اتصالات نموذج الذكاء الاصطناعي  
-- **أنواع الرسائل**: استخدام `SystemMessage`، `HumanMessage`، و`AIMessage` للمحادثات المنظمة  
+## الملخص
 
-**ميزات متقدمة:**  
-- **استدعاء الأدوات**: إنشاء ودمج أدوات مخصصة لتعزيز قدرات الذكاء الاصطناعي  
-- **ذاكرة المحادثة**: الحفاظ على السياق عبر عدة دورات محادثة  
-- **ردود متدفقة**: تنفيذ تسليم الردود في الوقت الفعلي  
-- **قوالب التوجيه**: بناء توجيهات قابلة لإعادة الاستخدام وديناميكية  
-- **إخراج منظم**: ضمان ردود الذكاء الاصطناعي المتسقة والقابلة للتحليل  
-- **التضمينات**: إنشاء بحث دلالي وقدرات معالجة المستندات  
+🎉 لقد أتقنت الآن أساسيات تطوير إطار عمل الذكاء الاصطناعي وتعلمت كيفية بناء تطبيقات ذكاء اصطناعي متطورة باستخدام LangChain. مثل إكمال تدريب شامل، لقد اكتسبت مجموعة أدوات مهارات كبيرة. دعونا نراجع ما أنجزته.
 
-**تطبيقات عملية:**  
-- **بناء تطبيقات كاملة**: دمج ميزات متعددة في تطبيقات جاهزة للإنتاج  
-- **معالجة الأخطاء**: تنفيذ إدارة أخطاء قوية والتحقق  
-- **دمج الأدوات**: إنشاء أدوات مخصصة توسع قدرات الذكاء الاصطناعي  
+### ما تعلمته
 
-### النقاط الرئيسية  
+**مفاهيم إطار العمل الأساسية:**
+- **فوائد الإطار**: فهم متى تختار الإطارات بدلاً من استدعاءات واجهات برمجة التطبيقات المباشرة
+- **أساسيات LangChain**: إعداد وتكوين اتصالات نموذج الذكاء الاصطناعي
+- **أنواع الرسائل**: استخدام `SystemMessage`، `HumanMessage`، و`AIMessage` للمحادثات المنظمة
 
-> 🎯 **تذكر**: الإطارات مثل LangChain هي في الأساس أصدقاؤك المليئون بالميزات التي تخفي التعقيد. إنها مثالية عندما تحتاج إلى ذاكرة محادثة، استدعاء الأدوات، أو العمل مع نماذج ذكاء اصطناعي متعددة دون فقدان عقلك.  
+**الميزات المتقدمة:**
+- **استدعاء الأدوات**: إنشاء ودمج أدوات مخصصة لتعزيز قدرات الذكاء الاصطناعي
+- **ذاكرة المحادثة**: الحفاظ على السياق عبر عدة تبادلات للمحادثة
+- **ردود متدفقة**: تنفيذ تسليم الردود في الوقت الفعلي
+- **قوالب المطالبات**: بناء مطالبات قابلة لإعادة الاستخدام وديناميكية
+- **إخراج منظم**: ضمان ردود منظمة وقابلة للتحليل من الذكاء الاصطناعي
+- **التضمينات**: إنشاء بحث دلالي وقدرات معالجة المستندات
 
-**إطار اتخاذ القرار لدمج الذكاء الاصطناعي:**  
+**التطبيقات العملية:**
+- **بناء تطبيقات كاملة**: دمج ميزات متعددة في تطبيقات جاهزة للإنتاج
+- **معالجة الأخطاء**: تنفيذ إدارة أخطاء قوية والتحقق
+- **دمج الأدوات**: إنشاء أدوات مخصصة توسع قدرات الذكاء الاصطناعي
+
+### النقاط الرئيسية
+
+> 🎯 **تذكر**: الإطارات مثل LangChain هي أساسًا أصدقاؤك المليئين بالميزات التي تخفي التعقيد. إنها مثالية عندما تحتاج إلى ذاكرة المحادثة، استدعاء الأدوات، أو ترغب في العمل مع نماذج ذكاء اصطناعي متعددة دون فقدان عقلك.
+
+**إطار اتخاذ القرار لتكامل الذكاء الاصطناعي:**
 
 ```mermaid
 flowchart TD
@@ -834,45 +1111,45 @@ flowchart TD
     G --> K[LangChain basic chat]
     H --> L[LangChain with tools, memory, agents]
 ```
-  
-### إلى أين تذهب من هنا؟  
 
-**ابدأ البناء الآن:**  
-- خذ هذه المفاهيم وابنِ شيئًا يثير حماسك!  
-- جرب نماذج ذكاء اصطناعي مختلفة عبر LangChain - إنها مثل ملعب نماذج الذكاء الاصطناعي  
-- أنشئ أدوات تحل مشاكل فعلية تواجهها في عملك أو مشاريعك  
+### إلى أين تذهب من هنا؟
+
+**ابدأ البناء الآن:**
+- خذ هذه المفاهيم وابدأ في بناء شيء يثير حماسك!
+- جرب نماذج ذكاء اصطناعي مختلفة من خلال LangChain - إنه مثل وجود ملعب لنماذج الذكاء الاصطناعي
+- أنشئ أدوات تحل مشاكل فعلية تواجهها في عملك أو مشاريعك
 
-**جاهز للمستوى التالي؟**  
-- **وكلاء الذكاء الاصطناعي**: بناء أنظمة ذكاء اصطناعي يمكنها التخطيط وتنفيذ مهام معقدة بمفردها  
-- **RAG (توليد معزز بالاسترجاع)**: دمج الذكاء الاصطناعي مع قواعد المعرفة الخاصة بك لتطبيقات فائقة القوة  
-- **الذكاء الاصطناعي متعدد الوسائط**: العمل مع النصوص، الصور، والصوت معًا - الاحتمالات لا حدود لها!  
-- **نشر الإنتاج**: تعلم كيفية توسيع تطبيقات الذكاء الاصطناعي ومراقبتها في العالم الحقيقي  
+**جاهز للمستوى التالي؟**
+- **وكلاء الذكاء الاصطناعي**: بناء أنظمة ذكاء اصطناعي يمكنها التخطيط وتنفيذ المهام المعقدة بمفردها
+- **RAG (توليد معزز بالاسترجاع)**: دمج الذكاء الاصطناعي مع قواعد المعرفة الخاصة بك لتطبيقات فائقة القوة
+- **الذكاء الاصطناعي متعدد الوسائط**: العمل مع النصوص، الصور، والصوت معًا - الإمكانيات لا حدود لها!
+- **نشر الإنتاج**: تعلم كيفية توسيع تطبيقات الذكاء الاصطناعي ومراقبتها في العالم الحقيقي
 
-**انضم إلى المجتمع:**  
-- مجتمع LangChain رائع للبقاء على اطلاع وتعلم أفضل الممارسات  
-- GitHub Models يمنحك الوصول إلى قدرات الذكاء الاصطناعي المتطورة - مثالي للتجربة  
-- استمر في الممارسة مع حالات استخدام مختلفة - كل مشروع سيعلمك شيئًا جديدًا  
+**انضم إلى المجتمع:**
+- مجتمع LangChain رائع للبقاء على اطلاع وتعلم أفضل الممارسات
+- GitHub Models يمنحك الوصول إلى قدرات الذكاء الاصطناعي المتقدمة - مثالي للتجربة
+- استمر في الممارسة مع حالات استخدام مختلفة - كل مشروع سيعلمك شيئًا جديدًا
 
-لديك الآن المعرفة لبناء تطبيقات محادثة ذكية يمكنها مساعدة الناس في حل مشاكل حقيقية. مثل الحرفيين في عصر النهضة الذين جمعوا بين الرؤية الفنية والمهارة التقنية، يمكنك الآن دمج قدرات الذكاء الاصطناعي مع التطبيق العملي. السؤال هو: ماذا ستصنع؟ 🚀  
+لديك الآن المعرفة لبناء تطبيقات محادثة ذكية يمكنها مساعدة الناس في حل مشاكل حقيقية. مثل الحرفيين في عصر النهضة الذين جمعوا بين الرؤية الفنية والمهارة التقنية، يمكنك الآن دمج قدرات الذكاء الاصطناعي مع التطبيق العملي. السؤال هو: ماذا ستصنع؟ 🚀
 
-## تحدي وكيل GitHub Copilot 🚀  
+## تحدي وكيل GitHub Copilot 🚀
 
-استخدم وضع الوكيل لإكمال التحدي التالي:  
+استخدم وضع الوكيل لإكمال التحدي التالي:
 
-**الوصف:** قم ببناء مساعد مراجعة كود متقدم مدعوم بالذكاء الاصطناعي يجمع بين ميزات LangChain المتعددة بما في ذلك استدعاء الأدوات، الإخراج المنظم، وذاكرة المحادثة لتقديم ملاحظات شاملة حول تقديمات الكود.  
+**الوصف:** قم ببناء مساعد مراجعة كود متقدم مدعوم بالذكاء الاصطناعي يجمع بين ميزات LangChain المتعددة بما في ذلك استدعاء الأدوات، الإخراج المنظم، وذاكرة المحادثة لتقديم ملاحظات شاملة حول تقديمات الكود.
 
-**التوجيه:** قم بإنشاء فئة `CodeReviewAssistant` التي تنفذ:  
-1. أداة لتحليل تعقيد الكود واقتراح تحسينات  
-2. أداة لفحص الكود وفقًا لأفضل الممارسات  
-3. إخراج منظم باستخدام نماذج Pydantic لتنسيق مراجعة متسق  
-4. ذاكرة محادثة لتتبع جلسات المراجعة  
-5. واجهة دردشة رئيسية يمكنها التعامل مع تقديمات الكود وتقديم ملاحظات تفصيلية وقابلة للتنفيذ  
+**المهمة:** قم بإنشاء فئة CodeReviewAssistant التي تنفذ:
+1. أداة لتحليل تعقيد الكود واقتراح تحسينات
+2. أداة لفحص الكود وفقًا لأفضل الممارسات
+3. إخراج منظم باستخدام نماذج Pydantic لتنسيق مراجعة متسق
+4. ذاكرة محادثة لتتبع جلسات المراجعة
+5. واجهة دردشة رئيسية يمكنها التعامل مع تقديمات الكود وتقديم ملاحظات تفصيلية وقابلة للتنفيذ
 
-يجب أن يكون المساعد قادرًا على مراجعة الكود بلغات برمجة متعددة، الحفاظ على السياق عبر تقديمات الكود المتعددة في جلسة واحدة، وتقديم درجات ملخصة واقتراحات تحسين تفصيلية.  
+يجب أن يكون المساعد قادرًا على مراجعة الكود بلغات برمجة متعددة، الحفاظ على السياق عبر تقديمات الكود المتعددة في جلسة واحدة، وتقديم درجات ملخصة واقتراحات تحسين تفصيلية.
 
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.  
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/2-js-basics/1-data-types/README.md b/translations/ar/2-js-basics/1-data-types/README.md
index d02639dece..98886548ca 100644
--- a/translations/ar/2-js-basics/1-data-types/README.md
+++ b/translations/ar/2-js-basics/1-data-types/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d0092f6533ae3ec3adad5b5ece68efaf",
-  "translation_date": "2025-10-22T14:03:55+00:00",
+  "original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
+  "translation_date": "2025-11-03T12:25:34+00:00",
   "source_file": "2-js-basics/1-data-types/README.md",
   "language_code": "ar"
 }
@@ -12,9 +12,26 @@ CO_OP_TRANSLATOR_METADATA:
 ![أساسيات JavaScript - أنواع البيانات](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ar.png)
 > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
 
-أنواع البيانات هي واحدة من المفاهيم الأساسية في JavaScript التي ستواجهها في كل برنامج تكتبه. فكر في أنواع البيانات مثل نظام التصنيف الذي استخدمه أمناء المكتبات القدامى في الإسكندرية – حيث كان لديهم أماكن محددة لللفائف التي تحتوي على الشعر، الرياضيات، والسجلات التاريخية. JavaScript تنظم المعلومات بطريقة مشابهة مع فئات مختلفة لأنواع البيانات المختلفة.
+```mermaid
+journey
+    title Your JavaScript Data Types Adventure
+    section Foundation
+      Variables & Constants: 5: You
+      Declaration Syntax: 4: You
+      Assignment Concepts: 5: You
+    section Core Types
+      Numbers & Math: 4: You
+      Strings & Text: 5: You
+      Booleans & Logic: 4: You
+    section Apply Knowledge
+      Type Conversion: 4: You
+      Real-world Examples: 5: You
+      Best Practices: 5: You
+```
+
+أنواع البيانات هي واحدة من المفاهيم الأساسية في JavaScript التي ستواجهها في كل برنامج تكتبه. فكر في أنواع البيانات كنظام تصنيف استخدمه أمناء المكتبات القدامى في الإسكندرية – حيث كان لديهم أماكن محددة لللفائف التي تحتوي على الشعر، الرياضيات، والسجلات التاريخية. JavaScript تنظم المعلومات بطريقة مشابهة مع فئات مختلفة لأنواع البيانات المختلفة.
 
-في هذا الدرس، سنستكشف أنواع البيانات الأساسية التي تجعل JavaScript تعمل. ستتعلم كيفية التعامل مع الأرقام، النصوص، القيم الصحيحة/الخاطئة، وستفهم لماذا يعد اختيار النوع الصحيح أمرًا ضروريًا لبرامجك. قد تبدو هذه المفاهيم مجردة في البداية، ولكن مع الممارسة، ستصبح طبيعية بالنسبة لك.
+في هذا الدرس، سنستكشف أنواع البيانات الأساسية التي تجعل JavaScript تعمل. ستتعلم كيفية التعامل مع الأرقام، النصوص، القيم الصحيحة/الخاطئة، وفهم لماذا اختيار النوع الصحيح ضروري لبرامجك. قد تبدو هذه المفاهيم مجردة في البداية، ولكن مع الممارسة، ستصبح طبيعية بالنسبة لك.
 
 فهم أنواع البيانات سيجعل كل شيء آخر في JavaScript أكثر وضوحًا. تمامًا كما يحتاج المهندسون المعماريون إلى فهم مواد البناء المختلفة قبل بناء الكاتدرائية، فإن هذه الأساسيات ستدعم كل ما تبنيه في المستقبل.
 
@@ -31,11 +48,43 @@ CO_OP_TRANSLATOR_METADATA:
 
 > 🎥 انقر على الصور أعلاه لمشاهدة فيديوهات حول المتغيرات وأنواع البيانات
 
-لنبدأ مع المتغيرات وأنواع البيانات التي تملأها!
+لنبدأ مع المتغيرات وأنواع البيانات التي تملؤها!
+
+```mermaid
+mindmap
+  root((JavaScript Data))
+    Variables
+      let myVar
+      const PI = 3.14
+      var oldStyle
+    Primitive Types
+      number
+        42
+        3.14
+        -5
+      string
+        "Hello"
+        'World'
+        `Template`
+      boolean
+        true
+        false
+      undefined
+      null
+    Operations
+      Arithmetic
+        + - * / %
+      String Methods
+        concatenation
+        template literals
+      Type Conversion
+        implicit
+        explicit
+```
 
 ## المتغيرات
 
-المتغيرات هي اللبنات الأساسية في البرمجة. مثل الجرار المسمى التي استخدمها الكيميائيون في العصور الوسطى لتخزين المواد المختلفة، تتيح لك المتغيرات تخزين المعلومات وإعطائها اسمًا وصفيًا حتى تتمكن من الرجوع إليها لاحقًا. هل تحتاج إلى تذكر عمر شخص ما؟ خزنه في متغير يسمى `age`. هل تريد تتبع اسم المستخدم؟ احتفظ به في متغير يسمى `userName`.
+المتغيرات هي اللبنات الأساسية في البرمجة. مثل الجرار المسمّاة التي استخدمها الكيميائيون في العصور الوسطى لتخزين المواد المختلفة، تتيح لك المتغيرات تخزين المعلومات وإعطائها اسمًا وصفيًا حتى تتمكن من الرجوع إليها لاحقًا. هل تحتاج إلى تذكر عمر شخص ما؟ خزّنه في متغير يسمى `age`. هل تريد تتبع اسم المستخدم؟ احتفظ به في متغير يسمى `userName`.
 
 سنركز على النهج الحديث لإنشاء المتغيرات في JavaScript. تمثل التقنيات التي ستتعلمها هنا سنوات من تطور اللغة وأفضل الممارسات التي طورها مجتمع البرمجة.
 
@@ -48,7 +97,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### المهمة - العمل مع المتغيرات
 
-1. **تصريح عن متغير**. لنبدأ بإنشاء أول متغير لنا:
+1. **صرّح عن متغير**. لنبدأ بإنشاء أول متغير لدينا:
 
     ```javascript
     let myVariable;
@@ -56,53 +105,81 @@ CO_OP_TRANSLATOR_METADATA:
 
    **ما الذي يحققه هذا:**
    - هذا يخبر JavaScript بإنشاء موقع تخزين يسمى `myVariable`
-   - JavaScript تخصص مساحة في الذاكرة لهذا المتغير
-   - المتغير حاليًا ليس له قيمة (غير معرف)
+   - تخصص JavaScript مساحة في الذاكرة لهذا المتغير
+   - المتغير حاليًا ليس له قيمة (غير معرّف)
 
-2. **إعطائه قيمة**. الآن دعنا نضع شيئًا في متغيرنا:
+2. **امنحه قيمة**. الآن لنضع شيئًا في متغيرنا:
 
     ```javascript
     myVariable = 123;
     ```
 
-   **كيف تعمل التخصيص:**
-   - يقوم المشغل `=` بتخصيص القيمة 123 لمتغيرنا
-   - المتغير الآن يحتوي على هذه القيمة بدلاً من أن يكون غير معرف
+   **كيف تعمل عملية الإسناد:**
+   - يقوم المشغل `=` بإسناد القيمة 123 إلى متغيرنا
+   - يحتوي المتغير الآن على هذه القيمة بدلاً من أن يكون غير معرّف
    - يمكنك الرجوع إلى هذه القيمة في جميع أنحاء الكود باستخدام `myVariable`
 
-   > ملاحظة: استخدام `=` في هذا الدرس يعني أننا نستخدم "مشغل التخصيص"، المستخدم لتعيين قيمة لمتغير. لا يدل على المساواة.
+   > ملاحظة: استخدام `=` في هذا الدرس يعني أننا نستخدم "مشغل الإسناد"، الذي يُستخدم لتعيين قيمة لمتغير. لا يشير إلى المساواة.
 
-3. **افعلها بالطريقة الذكية**. في الواقع، دعنا نجمع بين هاتين الخطوتين:
+3. **افعلها بطريقة ذكية**. في الواقع، دعنا نجمع بين الخطوتين:
 
     ```javascript
     let myVariable = 123;
     ```
 
     **هذا النهج أكثر كفاءة:**
-    - تقوم بتصريح المتغير وتخصيص قيمة في بيان واحد
-    - هذا هو الممارسة القياسية بين المطورين
+    - تقوم بتصريح المتغير وتعيين قيمة في بيان واحد
+    - هذه هي الممارسة القياسية بين المطورين
     - يقلل من طول الكود مع الحفاظ على الوضوح
 
-4. **غير رأيك**. ماذا لو أردنا تخزين رقم مختلف؟
+4. **غيّر رأيك**. ماذا لو أردنا تخزين رقم مختلف؟
 
    ```javascript
    myVariable = 321;
    ```
 
-   **فهم إعادة التخصيص:**
-   - المتغير الآن يحتوي على 321 بدلاً من 123
+   **فهم إعادة الإسناد:**
+   - يحتوي المتغير الآن على 321 بدلاً من 123
    - يتم استبدال القيمة السابقة – المتغيرات تخزن قيمة واحدة فقط في كل مرة
-   - هذه القابلية للتغيير هي السمة الرئيسية للمتغيرات المصرح بها باستخدام `let`
+   - هذه القابلية للتغيير هي السمة الرئيسية للمتغيرات التي يتم التصريح عنها باستخدام `let`
+
+   ✅ جرّبها! يمكنك كتابة JavaScript مباشرة في متصفحك. افتح نافذة المتصفح وانتقل إلى أدوات المطور. في وحدة التحكم، ستجد موجهًا؛ اكتب `let myVariable = 123`، اضغط على زر الإدخال، ثم اكتب `myVariable`. ماذا يحدث؟ لاحظ، ستتعلم المزيد عن هذه المفاهيم في الدروس اللاحقة.
+
+### 🧠 **اختبار إتقان المتغيرات: الشعور بالراحة**
+
+**لنرى كيف تشعر بشأن المتغيرات:**
+- هل يمكنك شرح الفرق بين التصريح والإسناد لمتغير؟
+- ماذا يحدث إذا حاولت استخدام متغير قبل التصريح عنه؟
+- متى تختار `let` بدلاً من `const` لمتغير؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> Declared: let myVar
+    Declared --> Assigned: myVar = 123
+    Assigned --> Reassigned: myVar = 456
+    Assigned --> [*]: Variable ready!
+    Reassigned --> [*]: Updated value
+    
+    note right of Declared
+        Variable exists but
+        has no value (undefined)
+    end note
+    
+    note right of Assigned
+        Variable contains
+        the value 123
+    end note
+```
 
-   ✅ جربها! يمكنك كتابة JavaScript مباشرة في متصفحك. افتح نافذة المتصفح وانتقل إلى أدوات المطور. في وحدة التحكم، ستجد موجهًا؛ اكتب `let myVariable = 123`، اضغط على العودة، ثم اكتب `myVariable`. ماذا يحدث؟ لاحظ، ستتعلم المزيد عن هذه المفاهيم في الدروس اللاحقة.
+> **نصيحة سريعة**: فكر في المتغيرات كصناديق تخزين مسماة. تقوم بإنشاء الصندوق (`let`)، وضع شيء فيه (`=`)، ويمكنك لاحقًا استبدال المحتويات إذا لزم الأمر!
 
 ## الثوابت
 
-أحيانًا تحتاج إلى تخزين معلومات يجب ألا تتغير أبدًا أثناء تنفيذ البرنامج. فكر في الثوابت مثل المبادئ الرياضية التي وضعها إقليدس في اليونان القديمة – بمجرد إثباتها وتوثيقها، ظلت ثابتة لجميع المراجع المستقبلية.
+في بعض الأحيان تحتاج إلى تخزين معلومات يجب ألا تتغير أبدًا أثناء تنفيذ البرنامج. فكر في الثوابت مثل المبادئ الرياضية التي وضعها إقليدس في اليونان القديمة – بمجرد إثباتها وتوثيقها، ظلت ثابتة لجميع المراجع المستقبلية.
 
-تعمل الثوابت بشكل مشابه للمتغيرات، ولكن مع قيد مهم: بمجرد تخصيص قيمتها، لا يمكن تغييرها. تساعد هذه الخاصية في منع التعديلات العرضية على القيم الحرجة في برنامجك.
+الثوابت تعمل بشكل مشابه للمتغيرات، ولكن مع قيد مهم: بمجرد إسناد قيمتها، لا يمكن تغييرها. تساعد هذه الخاصية في منع التعديلات العرضية على القيم الحرجة في برنامجك.
 
-تصريح وتهيئة الثابت يتبع نفس مفاهيم المتغير، باستثناء الكلمة المفتاحية `const`. عادةً ما يتم التصريح عن الثوابت بأحرف كبيرة.
+تصريح وتخصيص الثابت يتبع نفس مفاهيم المتغير، مع استثناء الكلمة المفتاحية `const`. عادةً ما يتم التصريح عن الثوابت بأحرف كبيرة.
 
 ```javascript
 const MY_VARIABLE = 123;
@@ -116,7 +193,7 @@ const MY_VARIABLE = 123;
 الثوابت لها قاعدتان رئيسيتان:
 
 - **يجب أن تعطيها قيمة فورًا** – لا يُسمح بالثوابت الفارغة!
-- **لا يمكنك أبدًا تغيير تلك القيمة** – ستقوم JavaScript بإلقاء خطأ إذا حاولت. دعنا نرى ما أعنيه:
+- **لا يمكنك أبدًا تغيير تلك القيمة** – ستقوم JavaScript بإلقاء خطأ إذا حاولت. لنرى ما أعنيه:
 
    **قيمة بسيطة** - ما يلي غير مسموح به:
    
@@ -126,9 +203,9 @@ const MY_VARIABLE = 123;
       ```
 
    **ما تحتاج إلى تذكره:**
-   - **محاولات** إعادة تخصيص ثابت ستسبب خطأ
-   - **يحمي** القيم المهمة من التغييرات العرضية
-   - **يضمن** أن تبقى القيمة ثابتة طوال برنامجك
+   - **محاولات** إعادة إسناد ثابت ستسبب خطأ
+   - **تحمي** القيم المهمة من التغييرات العرضية
+   - **تضمن** أن القيمة تبقى ثابتة طوال برنامجك
  
    **مرجع الكائن محمي** - ما يلي غير مسموح به:
    
@@ -139,7 +216,7 @@ const MY_VARIABLE = 123;
 
    **فهم هذه المفاهيم:**
    - **يمنع** استبدال الكائن بالكامل بآخر جديد
-   - **يحمي** المرجع إلى الكائن الأصلي
+   - **يحمي** المرجع للكائن الأصلي
    - **يحافظ** على هوية الكائن في الذاكرة
 
     **قيمة الكائن غير محمية** - ما يلي مسموح به:
@@ -154,23 +231,23 @@ const MY_VARIABLE = 123;
       - **يحافظ** على نفس مرجع الكائن
       - **يوضح** أن محتويات الكائن يمكن أن تتغير بينما يبقى المرجع ثابتًا
 
-   > ملاحظة، `const` تعني أن المرجع محمي من إعادة التخصيص. القيمة ليست _غير قابلة للتغيير_ ومع ذلك يمكن أن تتغير، خاصة إذا كانت بنية معقدة مثل الكائن.
+   > ملاحظة، تعني `const` أن المرجع محمي من إعادة الإسناد. القيمة ليست _غير قابلة للتغيير_ ومع ذلك يمكن أن تتغير، خاصة إذا كانت بنية معقدة مثل الكائن.
 
 ## أنواع البيانات
 
-JavaScript تنظم المعلومات في فئات مختلفة تسمى أنواع البيانات. هذا المفهوم يشبه كيف صنف العلماء القدامى المعرفة – أرسطو ميز بين أنواع مختلفة من التفكير، مدركًا أن المبادئ المنطقية لا يمكن تطبيقها بشكل موحد على الشعر، الرياضيات، والفلسفة الطبيعية.
+JavaScript تنظم المعلومات في فئات مختلفة تسمى أنواع البيانات. هذا المفهوم يشبه كيف صنف العلماء القدامى المعرفة – ميز أرسطو بين أنواع مختلفة من التفكير، مع العلم أن المبادئ المنطقية لا يمكن تطبيقها بشكل موحد على الشعر، الرياضيات، والفلسفة الطبيعية.
 
 أنواع البيانات مهمة لأن العمليات المختلفة تعمل مع أنواع مختلفة من المعلومات. تمامًا كما لا يمكنك إجراء العمليات الحسابية على اسم شخص أو ترتيب معادلة رياضية أبجديًا، تتطلب JavaScript النوع المناسب من البيانات لكل عملية. فهم هذا يمنع الأخطاء ويجعل الكود الخاص بك أكثر موثوقية.
 
-المتغيرات يمكنها تخزين أنواع مختلفة من القيم، مثل الأرقام والنصوص. هذه الأنواع المختلفة من القيم تُعرف باسم **نوع البيانات**. أنواع البيانات هي جزء مهم من تطوير البرمجيات لأنها تساعد المطورين على اتخاذ قرارات حول كيفية كتابة الكود وكيفية تشغيل البرنامج. علاوة على ذلك، بعض أنواع البيانات لها ميزات فريدة تساعد في تحويل أو استخراج معلومات إضافية من القيمة.
+يمكن للمتغيرات تخزين أنواع مختلفة من القيم، مثل الأرقام والنصوص. تُعرف هذه الأنواع المختلفة من القيم باسم **نوع البيانات**. أنواع البيانات هي جزء مهم من تطوير البرمجيات لأنها تساعد المطورين على اتخاذ قرارات حول كيفية كتابة الكود وكيفية تشغيل البرنامج. علاوة على ذلك، بعض أنواع البيانات لها ميزات فريدة تساعد في تحويل أو استخراج معلومات إضافية من قيمة.
 
-✅ أنواع البيانات تُعرف أيضًا باسم البدائيات في JavaScript، لأنها أدنى أنواع البيانات التي توفرها اللغة. هناك 7 أنواع بيانات بدائية: string، number، bigint، boolean، undefined، null، وsymbol. خذ دقيقة لتصور ما قد يمثله كل من هذه البدائيات. ما هو `zebra`؟ ماذا عن `0`؟ `true`؟
+✅ تُعرف أنواع البيانات أيضًا باسم البدائيات في JavaScript، لأنها أنواع البيانات ذات المستوى الأدنى التي توفرها اللغة. هناك 7 أنواع بيانات بدائية: string، number، bigint، boolean، undefined، null، وsymbol. خذ دقيقة لتصور ما قد يمثله كل من هذه البدائيات. ما هو `zebra`؟ ماذا عن `0`؟ `true`؟
 
 ### الأرقام
 
 الأرقام هي النوع الأكثر بساطة في JavaScript. سواء كنت تعمل مع أرقام صحيحة مثل 42، أرقام عشرية مثل 3.14، أو أرقام سلبية مثل -5، JavaScript تتعامل معها بشكل موحد.
 
-تذكر متغيرنا من قبل؟ تلك القيمة 123 التي قمنا بتخزينها كانت في الواقع نوع بيانات رقم:
+تذكر متغيرنا من قبل؟ تلك القيمة 123 التي قمنا بتخزينها كانت في الواقع نوع بيانات رقمي:
 
 ```javascript
 let myVariable = 123;
@@ -181,22 +258,194 @@ let myVariable = 123;
 - يمكنك إجراء العمليات الحسابية باستخدام هذه المتغيرات
 - لا حاجة لتصريح نوع صريح
 
-المتغيرات يمكنها تخزين جميع أنواع الأرقام، بما في ذلك الأرقام العشرية أو السلبية. يمكن أيضًا استخدام الأرقام مع المشغلين الحسابيين، الذين تم تغطيتهم في [القسم التالي](../../../../2-js-basics/1-data-types).
+يمكن للمتغيرات تخزين جميع أنواع الأرقام، بما في ذلك الأرقام العشرية أو السلبية. يمكن أيضًا استخدام الأرقام مع المشغلين الحسابيين، الذين يتم تناولهم في [القسم التالي](../../../../2-js-basics/1-data-types).
+
+```mermaid
+flowchart LR
+    A["🔢 Numbers"] --> B["➕ Addition"]
+    A --> C["➖ Subtraction"]
+    A --> D["✖️ Multiplication"]
+    A --> E["➗ Division"]
+    A --> F["📊 Remainder %"]
+    
+    B --> B1["1 + 2 = 3"]
+    C --> C1["5 - 3 = 2"]
+    D --> D1["4 * 3 = 12"]
+    E --> E1["10 / 2 = 5"]
+    F --> F1["7 % 3 = 1"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
 
 ### المشغلون الحسابيون
 
-المشغلون الحسابيون يسمحون لك بإجراء العمليات الحسابية في JavaScript. هذه المشغل
-يمكنك تحقيق أهداف التنسيق باستخدام أي من الطريقتين، ولكن القوالب النصية ستأخذ بعين الاعتبار أي مسافات وفواصل أسطر.
+المشغلون الحسابيون يسمحون لك بإجراء العمليات الحسابية في JavaScript. هذه المشغلون تتبع نفس المبادئ التي استخدمها علماء الرياضيات لقرون – نفس الرموز التي ظهرت في أعمال علماء مثل الخوارزمي، الذي طور التدوين الجبري.
+
+تعمل المشغلون كما تتوقع من الرياضيات التقليدية: علامة الجمع للإضافة، علامة الطرح للطرح، وهكذا.
+
+هناك عدة أنواع من المشغلين لاستخدامها عند إجراء الوظائف الحسابية، وبعضها مدرج هنا:
+
+| الرمز | الوصف                                                                  | المثال                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **الإضافة**: يحسب مجموع رقمين                                          | `1 + 2 //الإجابة المتوقعة هي 3`   |
+| `-`    | **الطرح**: يحسب الفرق بين رقمين                                        | `1 - 2 //الإجابة المتوقعة هي -1`  |
+| `*`    | **الضرب**: يحسب حاصل ضرب رقمين                                         | `1 * 2 //الإجابة المتوقعة هي 2`   |
+| `/`    | **القسمة**: يحسب خارج قسمة رقمين                                      | `1 / 2 //الإجابة المتوقعة هي 0.5` |
+| `%`    | **الباقي**: يحسب الباقي من قسمة رقمين                                 | `1 % 2 //الإجابة المتوقعة هي 1`   |
+
+✅ جرّبها! جرب عملية حسابية في وحدة التحكم في متصفحك. هل تفاجأت بالنتائج؟
+
+### 🧮 **اختبار مهارات الرياضيات: الحساب بثقة**
+
+**اختبر فهمك للحساب:**
+- ما الفرق بين `/` (القسمة) و `%` (الباقي)؟
+- هل يمكنك التنبؤ بما يساوي `10 % 3`؟ (تلميح: ليس 3.33...)
+- لماذا قد يكون مشغل الباقي مفيدًا في البرمجة؟
+
+```mermaid
+pie title "JavaScript Number Operations Usage"
+    "Addition (+)" : 35
+    "Subtraction (-)" : 20
+    "Multiplication (*)" : 20
+    "Division (/)" : 15
+    "Remainder (%)" : 10
+```
+
+> **رؤية من العالم الحقيقي**: مشغل الباقي (%) مفيد جدًا للتحقق مما إذا كانت الأرقام زوجية/فردية، إنشاء أنماط، أو التنقل بين المصفوفات!
+
+### النصوص
+
+في JavaScript، يتم تمثيل البيانات النصية كنصوص. مصطلح "نصوص" يأتي من مفهوم الأحرف المرتبطة معًا في تسلسل، تمامًا مثل الطريقة التي كان الكتّاب في الأديرة في العصور الوسطى يربطون بها الحروف لتشكيل الكلمات والجمل في مخطوطاتهم.
+
+النصوص أساسية لتطوير الويب. كل قطعة نص تظهر على موقع الويب – أسماء المستخدمين، تسميات الأزرار، رسائل الخطأ، المحتوى – يتم التعامل معها كبيانات نصية. فهم النصوص ضروري لإنشاء واجهات مستخدم وظيفية.
+
+النصوص هي مجموعات من الأحرف التي تقع بين علامات الاقتباس الفردية أو المزدوجة.
+
+```javascript
+'This is a string'
+"This is also a string"
+let myString = 'This is a string value stored in a variable';
+```
+
+**فهم هذه المفاهيم:**
+- **تستخدم** إما علامات الاقتباس الفردية `'` أو المزدوجة `"` لتعريف النصوص
+- **تخزن** بيانات نصية يمكن أن تشمل الحروف، الأرقام، والرموز
+- **تسند** قيم النصوص إلى المتغيرات لاستخدامها لاحقًا
+- **تتطلب** علامات اقتباس لتمييز النص عن أسماء المتغيرات
+
+تذكر استخدام علامات الاقتباس عند كتابة النص، وإلا ستفترض JavaScript أنه اسم متغير.
+
+```mermaid
+flowchart TD
+    A["📝 Strings"] --> B["Single Quotes"]
+    A --> C["Double Quotes"]
+    A --> D["Template Literals"]
+    
+    B --> B1["'Hello World'"]
+    C --> C1["\"Hello World\""]
+    D --> D1["`Hello \${name}`"]
+    
+    E["String Operations"] --> F["Concatenation"]
+    E --> G["Template Insertion"]
+    E --> H["Length & Methods"]
+    
+    F --> F1["'Hello' + ' ' + 'World'"]
+    G --> G1["`Hello \${firstName} \${lastName}`"]
+    H --> H1["myString.length"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style D fill:#e8f5e8
+    style G fill:#e8f5e8
+```
+
+### تنسيق النصوص
 
-✅ متى تستخدم القوالب النصية مقابل النصوص العادية؟
+تتيح لك معالجة النصوص دمج عناصر النص، تضمين المتغيرات، وإنشاء محتوى ديناميكي يستجيب لحالة البرنامج. هذه التقنية تمكنك من بناء النصوص برمجيًا.
 
-### القيم المنطقية (Booleans)
+غالبًا ما تحتاج إلى دمج نصوص متعددة معًا – تُعرف هذه العملية باسم الربط.
+لدمج سلسلتين أو أكثر أو جمعهما معًا، استخدم عامل التشغيل `+`.
 
-تمثل القيم المنطقية أبسط أشكال البيانات: يمكن أن تحتوي فقط على إحدى قيمتين – `true` أو `false`. يعود هذا النظام المنطقي الثنائي إلى أعمال جورج بول، عالم الرياضيات في القرن التاسع عشر الذي طور الجبر البولياني.
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+```
+
+**خطوة بخطوة، إليك ما يحدث:**
+- **يجمع** عدة سلاسل باستخدام عامل التشغيل `+`
+- **يربط** السلاسل مباشرةً دون مسافات في المثال الأول
+- **يضيف** مسافات `" "` بين السلاسل لتحسين القراءة
+- **يدرج** علامات الترقيم مثل الفواصل لإنشاء تنسيق صحيح
+
+✅ لماذا `1 + 1 = 2` في JavaScript، ولكن `'1' + '1' = 11؟` فكر في ذلك. ماذا عن `'1' + 1`؟
+
+**القوالب النصية** هي طريقة أخرى لتنسيق النصوص، ولكن بدلاً من استخدام علامات الاقتباس، يتم استخدام العلامة العكسية. يجب وضع أي شيء ليس نصًا عاديًا داخل قوالب `${ }`. يشمل ذلك أي متغيرات قد تكون نصوصًا.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
 
-على الرغم من بساطتها، فإن القيم المنطقية ضرورية للمنطق البرمجي. فهي تمكن الكود الخاص بك من اتخاذ قرارات بناءً على شروط – مثل ما إذا كان المستخدم مسجل الدخول، أو إذا تم النقر على زر، أو إذا تم استيفاء معايير معينة.
+**لنستوعب كل جزء:**
+- **يستخدم** العلامة العكسية `` ` `` بدلاً من علامات الاقتباس العادية لإنشاء القوالب النصية
+- **يدمج** المتغيرات مباشرة باستخدام صيغة القالب `${}`
+- **يحافظ** على المسافات والتنسيق كما هو مكتوب
+- **يوفر** طريقة أنظف لإنشاء نصوص معقدة باستخدام المتغيرات
+
+يمكنك تحقيق أهداف التنسيق باستخدام أي طريقة، ولكن القوالب النصية تحترم أي مسافات وفواصل أسطر.
+
+✅ متى تستخدم القالب النصي مقابل النص العادي؟
+
+### 🔤 **اختبار إتقان النصوص: الثقة في معالجة النصوص**
+
+**قيّم مهاراتك في النصوص:**
+- هل يمكنك شرح لماذا `'1' + '1'` تساوي `'11'` بدلاً من `2`؟
+- أي طريقة للنصوص تجدها أكثر وضوحًا: الدمج أم القوالب النصية؟
+- ماذا يحدث إذا نسيت علامات الاقتباس حول النص؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> PlainText: "Hello"
+    [*] --> Variable: name = "Alice"
+    PlainText --> Concatenated: + " " + name
+    Variable --> Concatenated
+    PlainText --> Template: `Hello ${name}`
+    Variable --> Template
+    Concatenated --> Result: "Hello Alice"
+    Template --> Result
+    
+    note right of Concatenated
+        Traditional method
+        More verbose
+    end note
+    
+    note right of Template
+        Modern ES6 syntax
+        Cleaner & more readable
+    end note
+```
+
+> **نصيحة احترافية**: القوالب النصية تُفضل عمومًا لبناء النصوص المعقدة لأنها أكثر وضوحًا وتتعامل بشكل رائع مع النصوص متعددة الأسطر!
+
+### القيم المنطقية
 
-يمكن أن تكون القيم المنطقية فقط إحدى قيمتين: `true` أو `false`. تساعد القيم المنطقية في اتخاذ قرارات حول أي سطور من الكود يجب أن تعمل عند استيفاء شروط معينة. في كثير من الحالات، تساعد [العوامل](../../../../2-js-basics/1-data-types) في تحديد قيمة القيم المنطقية، وغالبًا ما تلاحظ وتكتب متغيرات يتم تهيئتها أو تحديث قيمها باستخدام عامل.
+القيم المنطقية تمثل أبسط أشكال البيانات: يمكن أن تحمل فقط واحدة من قيمتين – `true` أو `false`. هذا النظام المنطقي الثنائي يعود إلى عمل جورج بول، عالم الرياضيات في القرن التاسع عشر الذي طور الجبر البولياني.
+
+على الرغم من بساطتها، القيم المنطقية ضرورية للمنطق البرمجي. فهي تمكن الكود الخاص بك من اتخاذ قرارات بناءً على الشروط – مثل ما إذا كان المستخدم مسجل الدخول، أو إذا تم النقر على زر، أو إذا تم استيفاء معايير معينة.
+
+القيم المنطقية يمكن أن تكون فقط `true` أو `false`. تساعد القيم المنطقية في اتخاذ قرارات حول أي خطوط من الكود يجب أن تعمل عندما يتم استيفاء شروط معينة. في كثير من الحالات، [العوامل](../../../../2-js-basics/1-data-types) تساعد في تحديد قيمة القيم المنطقية وغالبًا ما تلاحظ وتكتب متغيرات يتم تهيئتها أو تحديث قيمها باستخدام عامل.
 
 ```javascript
 let myTrueBool = true;
@@ -205,42 +454,174 @@ let myFalseBool = false;
 
 **في المثال أعلاه، قمنا بـ:**
 - **إنشاء** متغير يخزن القيمة المنطقية `true`
-- **إظهار** كيفية تخزين القيمة المنطقية `false`
-- **استخدام** الكلمات المفتاحية الدقيقة `true` و `false` (بدون الحاجة إلى علامات اقتباس)
-- **تحضير** هذه المتغيرات لاستخدامها في العبارات الشرطية
+- **عرض** كيفية تخزين القيمة المنطقية `false`
+- **استخدام** الكلمات المفتاحية الدقيقة `true` و `false` (بدون علامات اقتباس)
+- **تحضير** هذه المتغيرات للاستخدام في العبارات الشرطية
 
-✅ يمكن اعتبار المتغير "صحيحًا" إذا كان يقيم إلى القيمة المنطقية `true`. ومن المثير للاهتمام، في JavaScript، [جميع القيم تعتبر صحيحة ما لم يتم تعريفها كقيم خاطئة](https://developer.mozilla.org/docs/Glossary/Truthy).
+✅ يمكن اعتبار المتغير "صحيحًا" إذا كان يقيم إلى القيمة المنطقية `true`. ومن المثير للاهتمام، في JavaScript، [كل القيم صحيحة إلا إذا تم تعريفها كقيم خاطئة](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+```mermaid
+flowchart LR
+    A["🔘 Boolean Values"] --> B["true"]
+    A --> C["false"]
+    
+    D["Truthy Values"] --> D1["'hello'"]
+    D --> D2["42"]
+    D --> D3["[]"]
+    D --> D4["{}"]
+    
+    E["Falsy Values"] --> E1["false"]
+    E --> E2["0"]
+    E --> E3["''"]
+    E --> E4["null"]
+    E --> E5["undefined"]
+    E --> E6["NaN"]
+    
+    style B fill:#e8f5e8
+    style C fill:#ffebee
+    style D fill:#e3f2fd
+    style E fill:#fff3e0
+```
+
+### 🎯 **اختبار المنطق البولياني: مهارات اتخاذ القرار**
+
+**اختبر فهمك للقيم المنطقية:**
+- لماذا تعتقد أن JavaScript لديها قيم "صحيحة" و"خاطئة" إلى جانب `true` و `false`؟
+- هل يمكنك التنبؤ بأي من هذه القيم خاطئة: `0`, `"0"`, `[]`, `"false"`؟
+- كيف يمكن أن تكون القيم المنطقية مفيدة في التحكم بتدفق البرنامج؟
+
+```mermaid
+pie title "Common Boolean Use Cases"
+    "Conditional Logic" : 40
+    "User State" : 25
+    "Feature Toggles" : 20
+    "Validation" : 15
+```
+
+> **تذكر**: في JavaScript، هناك 6 قيم فقط تعتبر خاطئة: `false`, `0`, `""`, `null`, `undefined`, و `NaN`. كل شيء آخر يعتبر صحيحًا!
 
 ---
 
-## تحدي GitHub Copilot Agent 🚀
+## 📊 **ملخص أدوات أنواع البيانات الخاصة بك**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Data Types"] --> B["📦 Variables"]
+    A --> C["🔢 Numbers"]
+    A --> D["📝 Strings"]
+    A --> E["🔘 Booleans"]
+    
+    B --> B1["let mutable"]
+    B --> B2["const immutable"]
+    
+    C --> C1["42, 3.14, -5"]
+    C --> C2["+ - * / %"]
+    
+    D --> D1["'quotes' or \\\"quotes\\\""]
+    D --> D2["`template literals`"]
+    
+    E --> E1["true or false"]
+    E --> E2["truthy vs falsy"]
+    
+    F["⚡ Key Concepts"] --> F1["Type matters for operations"]
+    F --> F2["JavaScript is dynamically typed"]
+    F --> F3["Variables can change types"]
+    F --> F4["Naming is case-sensitive"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+## تحدي وكيل GitHub Copilot 🚀
 
 استخدم وضع الوكيل لإكمال التحدي التالي:
 
 **الوصف:** قم بإنشاء مدير معلومات شخصية يوضح جميع أنواع البيانات في JavaScript التي تعلمتها في هذا الدرس أثناء التعامل مع سيناريوهات بيانات واقعية.
 
-**المهمة:** قم ببناء برنامج JavaScript ينشئ كائن ملف تعريف مستخدم يحتوي على: اسم الشخص (نص)، العمر (رقم)، حالة كونه طالبًا (قيمة منطقية)، الألوان المفضلة كمصفوفة، وكائن عنوان يحتوي على خصائص الشارع، المدينة، والرمز البريدي. قم بتضمين وظائف لعرض معلومات الملف الشخصي وتحديث الحقول الفردية. تأكد من إظهار دمج النصوص، القوالب النصية، العمليات الحسابية مع العمر، والمنطق البولياني لحالة الطالب.
+**المهمة:** قم ببناء برنامج JavaScript ينشئ كائن ملف تعريف مستخدم يحتوي على: اسم الشخص (نص)، العمر (رقم)، حالة كونه طالبًا (منطقي)، الألوان المفضلة كمصفوفة، وكائن عنوان يحتوي على خصائص الشارع، المدينة، والرمز البريدي. قم بتضمين وظائف لعرض معلومات الملف الشخصي وتحديث الحقول الفردية. تأكد من عرض دمج النصوص، القوالب النصية، العمليات الحسابية مع العمر، والمنطق البولياني لحالة الطالب.
 
 تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## 🚀 التحدي
 
-JavaScript لديها بعض السلوكيات التي قد تفاجئ المطورين. إليك مثال كلاسيكي لاستكشافه: حاول كتابة هذا في وحدة التحكم في المتصفح: `let age = 1; let Age = 2; age == Age` ولاحظ النتيجة. ستعيد `false` – هل يمكنك تحديد السبب؟
+JavaScript لديها بعض السلوكيات التي قد تفاجئ المطورين. إليك مثال كلاسيكي للاستكشاف: حاول كتابة هذا في وحدة التحكم في المتصفح: `let age = 1; let Age = 2; age == Age` ولاحظ النتيجة. ستعيد `false` – هل يمكنك تحديد السبب؟
 
-يمثل هذا أحد العديد من سلوكيات JavaScript التي تستحق الفهم. الإلمام بهذه الأمور سيساعدك على كتابة كود أكثر موثوقية وحل المشكلات بشكل أكثر فعالية.
+هذا يمثل واحدًا من العديد من سلوكيات JavaScript التي تستحق الفهم. الإلمام بهذه الأمور سيساعدك على كتابة كود أكثر موثوقية وحل المشكلات بشكل أكثر فعالية.
 
 ## اختبار ما بعد المحاضرة
 [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app)
 
 ## المراجعة والدراسة الذاتية
 
-اطلع على [هذه القائمة من تمارين JavaScript](https://css-tricks.com/snippets/javascript/) وجرب واحدة. ماذا تعلمت؟
+ألقِ نظرة على [هذه القائمة من تمارين JavaScript](https://css-tricks.com/snippets/javascript/) وجرب واحدة. ماذا تعلمت؟
 
 ## الواجب
 
 [ممارسة أنواع البيانات](assignment.md)
 
+## 🚀 جدول إتقان أنواع البيانات في JavaScript
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] افتح وحدة التحكم في المتصفح وأنشئ 3 متغيرات بأنواع بيانات مختلفة
+- [ ] جرب التحدي: `let age = 1; let Age = 2; age == Age` واكتشف لماذا تكون النتيجة خاطئة
+- [ ] مارس دمج النصوص باستخدام اسمك ورقمك المفضل
+- [ ] اختبر ما يحدث عند إضافة رقم إلى نص
+
+### 🎯 **ما يمكنك إنجازه خلال الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وراجع أي مفاهيم مربكة
+- [ ] أنشئ آلة حاسبة صغيرة تضيف، تطرح، تضرب، وتقسم رقمين
+- [ ] قم ببناء منسق أسماء بسيط باستخدام القوالب النصية
+- [ ] استكشف الفروقات بين عوامل المقارنة `==` و `===`
+- [ ] مارس التحويل بين أنواع البيانات المختلفة
+
+### 📅 **أساسيات JavaScript الخاصة بك خلال أسبوع**
+- [ ] أكمل الواجب بثقة وإبداع
+- [ ] أنشئ كائن ملف تعريف شخصي باستخدام جميع أنواع البيانات التي تعلمتها
+- [ ] مارس مع [تمارين JavaScript من CSS-Tricks](https://css-tricks.com/snippets/javascript/)
+- [ ] قم ببناء مدقق نموذج بسيط باستخدام المنطق البولياني
+- [ ] جرب أنواع البيانات المصفوفة والكائنات (مقدمة للدرس القادم)
+- [ ] انضم إلى مجتمع JavaScript واطرح أسئلة حول أنواع البيانات
+
+### 🌟 **تحولك خلال شهر**
+- [ ] دمج معرفة أنواع البيانات في مشاريع برمجية أكبر
+- [ ] فهم متى ولماذا تستخدم كل نوع بيانات في التطبيقات الحقيقية
+- [ ] مساعدة المبتدئين الآخرين على فهم أساسيات JavaScript
+- [ ] بناء تطبيق صغير يدير أنواع مختلفة من بيانات المستخدم
+- [ ] استكشاف مفاهيم أنواع البيانات المتقدمة مثل الإكراه النوعي والمساواة الصارمة
+- [ ] المساهمة في مشاريع JavaScript مفتوحة المصدر بتحسين الوثائق
+
+### 🧠 **فحص إتقان أنواع البيانات النهائي**
+
+**احتفل بأساسيات JavaScript الخاصة بك:**
+- أي نوع بيانات فاجأك أكثر من حيث سلوكه؟
+- ما مدى راحتك في شرح الفرق بين المتغيرات والثوابت لصديق؟
+- ما هو الشيء الأكثر إثارة للاهتمام الذي اكتشفته عن نظام أنواع JavaScript؟
+- ما هو التطبيق الواقعي الذي يمكنك تخيله بناءً على هذه الأساسيات؟
+
+```mermaid
+journey
+    title Your JavaScript Confidence Journey
+    section Today
+      Confused: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Understanding: 5: You
+      Building: 5: You
+    section Next Month
+      Problem Solving: 5: You
+      Teaching Others: 5: You
+      Real Projects: 5: You
+```
+
+> 💡 **لقد بنيت الأساس!** فهم أنواع البيانات يشبه تعلم الأبجدية قبل كتابة القصص. كل برنامج JavaScript ستكتبه يومًا ما سيستخدم هذه المفاهيم الأساسية. لديك الآن اللبنات الأساسية لإنشاء مواقع ويب تفاعلية، تطبيقات ديناميكية، وحل مشكلات العالم الحقيقي باستخدام الكود. مرحبًا بك في عالم JavaScript الرائع! 🎉
+
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/2-js-basics/2-functions-methods/README.md b/translations/ar/2-js-basics/2-functions-methods/README.md
index 17cdd5088d..94be92d2c8 100644
--- a/translations/ar/2-js-basics/2-functions-methods/README.md
+++ b/translations/ar/2-js-basics/2-functions-methods/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "ec43b53e8e015cdabfd3ad877b3c28e5",
-  "translation_date": "2025-10-22T14:04:28+00:00",
+  "original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
+  "translation_date": "2025-11-03T12:26:17+00:00",
   "source_file": "2-js-basics/2-functions-methods/README.md",
   "language_code": "ar"
 }
@@ -12,14 +12,31 @@ CO_OP_TRANSLATOR_METADATA:
 ![أساسيات JavaScript - الدوال](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ar.png)
 > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your JavaScript Functions Adventure
+    section Foundation
+      Function Syntax: 5: You
+      Calling Functions: 4: You
+      Parameters & Arguments: 5: You
+    section Advanced Concepts
+      Return Values: 4: You
+      Default Parameters: 5: You
+      Function Composition: 4: You
+    section Modern JavaScript
+      Arrow Functions: 5: You
+      Anonymous Functions: 4: You
+      Higher-Order Functions: 5: You
+```
+
 ## اختبار ما قبل المحاضرة
 [اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app)
 
-كتابة نفس الكود مرارًا وتكرارًا هي واحدة من أكثر الإحباطات شيوعًا في البرمجة. تحل الدوال هذه المشكلة من خلال السماح لك بتجميع الكود في وحدات قابلة لإعادة الاستخدام. فكر في الدوال مثل الأجزاء القياسية التي جعلت خط التجميع الخاص بهنري فورد ثوريًا – بمجرد إنشاء مكون موثوق، يمكنك استخدامه أينما احتجت دون الحاجة إلى إعادة بنائه من البداية.
+كتابة نفس الكود مرارًا وتكرارًا هي واحدة من أكثر الإحباطات شيوعًا في البرمجة. تحل الدوال هذه المشكلة من خلال السماح لك بتجميع الكود في كتل قابلة لإعادة الاستخدام. فكر في الدوال مثل الأجزاء القياسية التي جعلت خط التجميع الخاص بـ Henry Ford ثوريًا – بمجرد إنشاء مكون موثوق، يمكنك استخدامه أينما احتجت دون الحاجة إلى إعادة بنائه من البداية.
 
-تتيح لك الدوال تجميع أجزاء من الكود بحيث يمكنك إعادة استخدامها في جميع أنحاء برنامجك. بدلاً من نسخ ولصق نفس المنطق في كل مكان، يمكنك إنشاء دالة مرة واحدة واستدعائها عند الحاجة. هذه الطريقة تحافظ على تنظيم الكود وتجعل التحديثات أسهل بكثير.
+تتيح لك الدوال تجميع أجزاء من الكود بحيث يمكنك إعادة استخدامها في جميع أنحاء البرنامج. بدلاً من نسخ ولصق نفس المنطق في كل مكان، يمكنك إنشاء دالة مرة واحدة واستدعائها عند الحاجة. هذه الطريقة تحافظ على تنظيم الكود وتجعل التحديثات أسهل بكثير.
 
-في هذه الدرس، ستتعلم كيفية إنشاء دوال خاصة بك، تمرير المعلومات إليها، والحصول على نتائج مفيدة منها. ستكتشف الفرق بين الدوال والطرق، تتعرف على أساليب الكتابة الحديثة، وترى كيف يمكن للدوال أن تعمل مع دوال أخرى. سنبني هذه المفاهيم خطوة بخطوة.
+في هذه الدرس، ستتعلم كيفية إنشاء دوال خاصة بك، تمرير المعلومات إليها، والحصول على نتائج مفيدة منها. ستكتشف الفرق بين الدوال والطرق، تتعرف على الأساليب الحديثة للكتابة، وترى كيف يمكن للدوال أن تعمل مع دوال أخرى. سنبني هذه المفاهيم خطوة بخطوة.
 
 [![الطرق والدوال](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "الطرق والدوال")
 
@@ -27,17 +44,50 @@ CO_OP_TRANSLATOR_METADATA:
 
 > يمكنك أخذ هذا الدرس على [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
 
+```mermaid
+mindmap
+  root((JavaScript Functions))
+    Basic Concepts
+      Declaration
+        Traditional syntax
+        Arrow function syntax
+      Calling
+        Using parentheses
+        Parentheses required
+    Parameters
+      Input Values
+        Multiple parameters
+        Default values
+      Arguments
+        Values passed in
+        Can be any type
+    Return Values
+      Output Data
+        return statement
+        Exit function
+      Use Results
+        Store in variables
+        Chain functions
+    Advanced Patterns
+      Higher-Order
+        Functions as parameters
+        Callbacks
+      Anonymous
+        No name needed
+        Inline definition
+```
+
 ## الدوال
 
 الدالة هي كتلة مستقلة من الكود تؤدي مهمة محددة. إنها تحتوي على منطق يمكنك تنفيذه عند الحاجة.
 
-بدلاً من كتابة نفس الكود عدة مرات في جميع أنحاء برنامجك، يمكنك تجميعه في دالة واستدعاء تلك الدالة عند الحاجة. هذه الطريقة تحافظ على نظافة الكود وتجعل التحديثات أسهل بكثير. تخيل التحدي في الصيانة إذا كنت بحاجة إلى تغيير منطق منتشر في 20 موقعًا مختلفًا في قاعدة الكود الخاصة بك.
+بدلاً من كتابة نفس الكود عدة مرات في البرنامج، يمكنك تجميعه في دالة واستدعاء تلك الدالة عند الحاجة. هذه الطريقة تحافظ على نظافة الكود وتجعل التحديثات أسهل بكثير. تخيل التحدي في الصيانة إذا كنت بحاجة إلى تغيير منطق منتشر في 20 موقعًا مختلفًا في قاعدة الكود.
 
 تسمية الدوال بشكل وصفي أمر ضروري. الدالة ذات الاسم الجيد توضح غرضها بوضوح – عندما ترى `cancelTimer()`، تفهم فورًا ما تقوم به، تمامًا مثل الزر الذي يحمل تسمية واضحة يخبرك بما سيحدث عند النقر عليه.
 
 ## إنشاء واستدعاء دالة
 
-دعونا نلقي نظرة على كيفية إنشاء دالة. الصيغة تتبع نمطًا ثابتًا:
+لنلقِ نظرة على كيفية إنشاء دالة. الصيغة تتبع نمطًا ثابتًا:
 
 ```javascript
 function nameOfFunction() { // function definition
@@ -47,8 +97,8 @@ function nameOfFunction() { // function definition
 
 لنقم بتفصيل هذا:
 - الكلمة المفتاحية `function` تخبر JavaScript "مرحبًا، أنا أقوم بإنشاء دالة!"
-- `nameOfFunction` هو المكان الذي تعطي فيه دالتك اسمًا وصفيًا
-- الأقواس `()` هي المكان الذي يمكنك إضافة المعلمات فيه (سنتحدث عنها قريبًا)
+- `nameOfFunction` هو المكان الذي تعطي فيه الدالة اسمًا وصفيًا
+- الأقواس `()` هي المكان الذي يمكنك إضافة المعاملات فيه (سنتحدث عنها قريبًا)
 - الأقواس المعقوفة `{}` تحتوي على الكود الفعلي الذي يتم تشغيله عند استدعاء الدالة
 
 لنقم بإنشاء دالة ترحيب بسيطة لنرى هذا عمليًا:
@@ -59,34 +109,58 @@ function displayGreeting() {
 }
 ```
 
-تقوم هذه الدالة بطباعة "Hello, world!" إلى وحدة التحكم. بمجرد تعريفها، يمكنك استخدامها عدة مرات حسب الحاجة.
+هذه الدالة تطبع "Hello, world!" في وحدة التحكم. بمجرد تعريفها، يمكنك استخدامها عدة مرات حسب الحاجة.
 
-لتنفيذ (أو "استدعاء") دالتك، اكتب اسمها متبوعًا بالأقواس. يسمح JavaScript بتعريف دالتك قبل أو بعد استدعائها – محرك JavaScript سيتولى ترتيب التنفيذ.
+لتنفيذ (أو "استدعاء") الدالة، اكتب اسمها متبوعًا بالأقواس. يسمح لك JavaScript بتعريف الدالة قبل أو بعد استدعائها – محرك JavaScript سيتولى ترتيب التنفيذ.
 
 ```javascript
 // calling our function
 displayGreeting();
 ```
 
-عند تشغيل هذا السطر، يتم تنفيذ كل الكود داخل دالة `displayGreeting`، مما يعرض "Hello, world!" في وحدة التحكم الخاصة بالمتصفح. يمكنك استدعاء هذه الدالة مرارًا وتكرارًا.
+عند تشغيل هذا السطر، يتم تنفيذ كل الكود داخل دالة `displayGreeting`، مما يعرض "Hello, world!" في وحدة التحكم في المتصفح. يمكنك استدعاء هذه الدالة مرارًا وتكرارًا.
+
+### 🧠 **فحص أساسيات الدوال: بناء أول دوال لك**
+
+**لنرى كيف تشعر بشأن الدوال الأساسية:**
+- هل يمكنك شرح سبب استخدام الأقواس المعقوفة `{}` في تعريف الدوال؟
+- ماذا يحدث إذا كتبت `displayGreeting` بدون الأقواس؟
+- لماذا قد ترغب في استدعاء نفس الدالة عدة مرات؟
+
+```mermaid
+flowchart TD
+    A["✏️ Define Function"] --> B["📦 Package Code"]
+    B --> C["🏷️ Give it a Name"]
+    C --> D["📞 Call When Needed"]
+    D --> E["🔄 Reuse Anywhere"]
+    
+    F["💡 Benefits"] --> F1["No code repetition"]
+    F --> F2["Easy to maintain"]
+    F --> F3["Clear organization"]
+    F --> F4["Easier testing"]
+    
+    style A fill:#e3f2fd
+    style E fill:#e8f5e8
+    style F fill:#fff3e0
+```
 
-> **ملاحظة:** لقد كنت تستخدم **الطرق** طوال هذه الدروس. `console.log()` هي طريقة – وهي في الأساس دالة تنتمي إلى الكائن `console`. الفرق الرئيسي هو أن الطرق مرتبطة بالكائنات، بينما الدوال مستقلة. يستخدم العديد من المطورين هذه المصطلحات بالتبادل في المحادثات غير الرسمية.
+> **ملاحظة:** لقد كنت تستخدم **الطرق** طوال هذه الدروس. `console.log()` هي طريقة – في الأساس دالة تنتمي إلى الكائن `console`. الفرق الرئيسي هو أن الطرق مرتبطة بالكائنات، بينما الدوال مستقلة. يستخدم العديد من المطورين هذه المصطلحات بالتبادل في المحادثات غير الرسمية.
 
 ### أفضل الممارسات للدوال
 
 إليك بعض النصائح لمساعدتك في كتابة دوال رائعة:
 
-- امنح دوالك أسماء واضحة ووصفيّة – ستشكر نفسك في المستقبل!
+- أعطِ دوالك أسماء واضحة ووصفيّة – ستشكر نفسك في المستقبل!
 - استخدم **camelCasing** لأسماء متعددة الكلمات (مثل `calculateTotal` بدلاً من `calculate_total`)
 - اجعل كل دالة تركز على القيام بشيء واحد بشكل جيد
 
 ## تمرير المعلومات إلى دالة
 
-دالتنا `displayGreeting` محدودة – يمكنها فقط عرض "Hello, world!" للجميع. تسمح لنا المعلمات بجعل الدوال أكثر مرونة وفائدة.
+دالتنا `displayGreeting` محدودة – يمكنها فقط عرض "Hello, world!" للجميع. تسمح لنا المعاملات بجعل الدوال أكثر مرونة وفائدة.
 
-**المعلمات** تعمل كأماكن فارغة حيث يمكنك إدخال قيم مختلفة في كل مرة تستخدم فيها الدالة. بهذه الطريقة، يمكن للدالة نفسها العمل مع معلومات مختلفة في كل استدعاء.
+**المعاملات** تعمل كأماكن مؤقتة حيث يمكنك إدخال قيم مختلفة في كل مرة تستخدم فيها الدالة. بهذه الطريقة، يمكن لنفس الدالة العمل مع معلومات مختلفة في كل استدعاء.
 
-تقوم بإدراج المعلمات داخل الأقواس عند تعريف دالتك، مع فصل المعلمات المتعددة بفواصل:
+تقوم بإدراج المعاملات داخل الأقواس عند تعريف الدالة، مع فصل المعاملات المتعددة بفواصل:
 
 ```javascript
 function name(param, param2, param3) {
@@ -94,7 +168,7 @@ function name(param, param2, param3) {
 }
 ```
 
-كل معلمة تعمل كمكان فارغ – عندما يستدعي شخص ما دالتك، سيقدم قيمًا فعلية يتم إدخالها في هذه الأماكن.
+كل معاملة تعمل كمكان مؤقت – عندما يستدعي شخص ما الدالة، سيقدم قيمًا فعلية يتم إدخالها في هذه الأماكن.
 
 لنقم بتحديث دالة الترحيب لتقبل اسم شخص ما:
 
@@ -114,13 +188,36 @@ displayGreeting('Christopher');
 // displays "Hello, Christopher!" when run
 ```
 
-JavaScript يأخذ النص `'Christopher'`، ويعينه إلى المعلمة `name`، ويُنشئ الرسالة الشخصية "Hello, Christopher!"
+JavaScript يأخذ النص `'Christopher'`، ويعينه إلى معاملة `name`، ويُنشئ الرسالة الشخصية "Hello, Christopher!"
+
+```mermaid
+flowchart LR
+    A["🎯 Function Call"] --> B["📥 Parameters"]
+    B --> C["⚙️ Function Body"]
+    C --> D["📤 Result"]
+    
+    A1["displayGreeting('Alice')"] --> A
+    B1["name = 'Alice'"] --> B
+    C1["Template literal\n\`Hello, \${name}!\`"] --> C
+    D1["'Hello, Alice!'"] --> D
+    
+    E["🔄 Parameter Types"] --> E1["Strings"]
+    E --> E2["Numbers"]
+    E --> E3["Booleans"]
+    E --> E4["Objects"]
+    E --> E5["Functions"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style D fill:#fff3e0
+    style E fill:#f3e5f5
+```
 
 ## القيم الافتراضية
 
-ماذا لو أردنا جعل بعض المعلمات اختيارية؟ هنا تأتي القيم الافتراضية في متناول اليد!
+ماذا لو أردنا جعل بعض المعاملات اختيارية؟ هنا تأتي القيم الافتراضية في متناول اليد!
 
-لنفترض أننا نريد أن يتمكن الأشخاص من تخصيص كلمة الترحيب، ولكن إذا لم يحددوا واحدة، سنستخدم "Hello" كخيار احتياطي. يمكنك إعداد القيم الافتراضية باستخدام علامة المساواة، تمامًا مثل إعداد متغير:
+لنفترض أننا نريد أن يتمكن الناس من تخصيص كلمة الترحيب، ولكن إذا لم يحددوا واحدة، سنستخدم "Hello" كخيار افتراضي. يمكنك إعداد القيم الافتراضية باستخدام علامة المساواة، تمامًا مثل تعيين متغير:
 
 ```javascript
 function displayGreeting(name, salutation='Hello') {
@@ -140,23 +237,52 @@ displayGreeting('Christopher', 'Hi');
 // displays "Hi, Christopher"
 ```
 
-في الاستدعاء الأول، يستخدم JavaScript القيمة الافتراضية "Hello" لأننا لم نحدد تحية. في الاستدعاء الثاني، يستخدم "Hi" المخصصة بدلاً منها. هذه المرونة تجعل الدوال قابلة للتكيف مع سيناريوهات مختلفة.
+في الاستدعاء الأول، يستخدم JavaScript القيمة الافتراضية "Hello" لأننا لم نحدد تحية. في الاستدعاء الثاني، يستخدم تحيتنا المخصصة "Hi" بدلاً من ذلك. هذه المرونة تجعل الدوال قابلة للتكيف مع سيناريوهات مختلفة.
+
+### 🎛️ **فحص إتقان المعاملات: جعل الدوال مرنة**
+
+**اختبر فهمك للمعاملات:**
+- ما الفرق بين المعاملة والحجة؟
+- لماذا تكون القيم الافتراضية مفيدة في البرمجة الواقعية؟
+- هل يمكنك التنبؤ بما يحدث إذا مررت حججًا أكثر من المعاملات؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> NoParams: function greet() {}
+    [*] --> WithParams: function greet(name) {}
+    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
+    
+    NoParams --> Static: Same output always
+    WithParams --> Dynamic: Changes with input
+    WithDefaults --> Flexible: Optional customization
+    
+    Static --> [*]
+    Dynamic --> [*]
+    Flexible --> [*]
+    
+    note right of WithDefaults
+        Most flexible approach
+        Backwards compatible
+    end note
+```
+
+> **نصيحة احترافية**: تجعل المعاملات الافتراضية دوالك أكثر سهولة للمستخدم. يمكن للمستخدمين البدء بسرعة باستخدام القيم الافتراضية المعقولة، ولكن لا يزال بإمكانهم التخصيص عند الحاجة!
 
 ## القيم المرجعة
 
-دوالنا حتى الآن كانت فقط تعرض رسائل في وحدة التحكم، ولكن ماذا لو أردت أن تقوم دالة بحساب شيء ما وتعطيك النتيجة؟
+دوالنا حتى الآن كانت فقط تعرض رسائل في وحدة التحكم، ولكن ماذا لو أردت أن تحسب دالة شيئًا وتعيد لك النتيجة؟
 
-هنا تأتي **القيم المرجعة**. بدلاً من مجرد عرض شيء ما، يمكن للدالة أن تعيد لك قيمة يمكنك تخزينها في متغير أو استخدامها في أجزاء أخرى من الكود الخاص بك.
+هنا تأتي **القيم المرجعة**. بدلاً من مجرد عرض شيء ما، يمكن للدالة أن تعيد لك قيمة يمكنك تخزينها في متغير أو استخدامها في أجزاء أخرى من الكود.
 
-لإرسال قيمة مرة أخرى، تستخدم الكلمة المفتاحية `return` متبوعة بما تريد إرجاعه:
+لإرسال قيمة مرة أخرى، تستخدم الكلمة المفتاحية `return` متبوعة بما تريد إعادته:
 
 ```javascript
 return myVariable;
 ```
 
-هناك شيء مهم: عندما تصل الدالة إلى عبارة `return`، تتوقف فورًا عن التشغيل وترسل تلك القيمة إلى من استدعاها.
+هناك شيء مهم: عندما تصل الدالة إلى عبارة `return`، تتوقف فورًا عن التشغيل وترسل تلك القيمة إلى من استدعى الدالة.
 
-لنقم بتعديل دالة الترحيب الخاصة بنا لإرجاع الرسالة بدلاً من طباعتها:
+لنقم بتعديل دالة الترحيب لدينا لإرجاع الرسالة بدلاً من طباعتها:
 
 ```javascript
 function createGreetingMessage(name) {
@@ -165,7 +291,7 @@ function createGreetingMessage(name) {
 }
 ```
 
-الآن بدلاً من طباعة الترحيب، تقوم هذه الدالة بإنشاء الرسالة وتعيدها لنا.
+الآن بدلاً من طباعة الترحيب، تقوم هذه الدالة بإنشاء الرسالة وتسلمها لنا.
 
 لاستخدام القيمة المرجعة، يمكننا تخزينها في متغير تمامًا مثل أي قيمة أخرى:
 
@@ -173,15 +299,55 @@ function createGreetingMessage(name) {
 const greetingMessage = createGreetingMessage('Christopher');
 ```
 
-الآن يحتوي `greetingMessage` على "Hello, Christopher" ويمكننا استخدامه في أي مكان في الكود الخاص بنا – لعرضه على صفحة ويب، تضمينه في بريد إلكتروني، أو تمريره إلى دالة أخرى.
+الآن يحتوي `greetingMessage` على "Hello, Christopher" ويمكننا استخدامه في أي مكان في الكود – لعرضه على صفحة ويب، تضمينه في بريد إلكتروني، أو تمريره إلى دالة أخرى.
+
+```mermaid
+flowchart TD
+    A["🔧 Function Processing"] --> B{"return statement?"}
+    B -->|Yes| C["📤 Return Value"]
+    B -->|No| D["📭 Return undefined"]
+    
+    C --> E["💾 Store in Variable"]
+    C --> F["🔗 Use in Expression"]
+    C --> G["📞 Pass to Function"]
+    
+    D --> H["⚠️ Usually not useful"]
+    
+    I["📋 Return Value Uses"] --> I1["Calculate results"]
+    I --> I2["Validate input"]
+    I --> I3["Transform data"]
+    I --> I4["Create objects"]
+    
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style I fill:#e3f2fd
+```
+
+### 🔄 **فحص القيم المرجعة: الحصول على النتائج**
+
+**قيّم فهمك للقيم المرجعة:**
+- ماذا يحدث للكود بعد عبارة `return` في الدالة؟
+- لماذا يكون إرجاع القيم غالبًا أفضل من مجرد الطباعة في وحدة التحكم؟
+- هل يمكن للدالة أن تعيد أنواعًا مختلفة من القيم (نصوص، أرقام، قيم منطقية)؟
+
+```mermaid
+pie title "Common Return Value Types"
+    "Strings" : 30
+    "Numbers" : 25
+    "Objects" : 20
+    "Booleans" : 15
+    "Arrays" : 10
+```
 
-## الدوال كمعلمات لدوال أخرى
+> **معلومة مهمة**: الدوال التي تعيد القيم أكثر تنوعًا لأن من يستدعيها يقرر ماذا يفعل بالنتيجة. هذا يجعل الكود أكثر قابلية للتجزئة وإعادة الاستخدام!
 
-يمكن تمرير الدوال كمعلمات لدوال أخرى. على الرغم من أن هذا المفهوم قد يبدو معقدًا في البداية، إلا أنه ميزة قوية تتيح أنماط برمجة مرنة.
+## الدوال كمعاملات لدوال أخرى
 
-هذا النمط شائع جدًا عندما تريد أن تقول "عندما يحدث شيء ما، قم بتنفيذ هذا الشيء الآخر." على سبيل المثال، "عندما ينتهي المؤقت، قم بتشغيل هذا الكود" أو "عندما ينقر المستخدم على الزر، قم باستدعاء هذه الدالة."
+يمكن تمرير الدوال كمعاملات لدوال أخرى. على الرغم من أن هذا المفهوم قد يبدو معقدًا في البداية، إلا أنه ميزة قوية تتيح أنماط برمجة مرنة.
 
-لنلقِ نظرة على `setTimeout`، وهي دالة مدمجة تنتظر فترة زمنية معينة ثم تقوم بتشغيل بعض الكود. نحتاج إلى إخبارها بالكود الذي يجب تشغيله – حالة استخدام مثالية لتمرير دالة!
+هذا النمط شائع جدًا عندما تريد أن تقول "عندما يحدث شيء ما، قم بتنفيذ هذا الكود الآخر." على سبيل المثال، "عندما ينتهي المؤقت، قم بتشغيل هذا الكود" أو "عندما ينقر المستخدم على الزر، استدعِ هذه الدالة."
+
+لنلقِ نظرة على `setTimeout`، وهي دالة مدمجة تنتظر فترة زمنية معينة ثم تشغل بعض الكود. نحتاج إلى إخبارها بالكود الذي يجب تشغيله – حالة مثالية لتمرير دالة!
 
 جرب هذا الكود – بعد 3 ثوانٍ، سترى رسالة:
 
@@ -197,9 +363,9 @@ setTimeout(displayDone, 3000);
 
 ### الدوال المجهولة
 
-أحيانًا تحتاج إلى دالة لشيء واحد فقط ولا تريد إعطائها اسمًا. فكر في الأمر – إذا كنت تستخدم دالة مرة واحدة فقط، لماذا تملأ الكود باسم إضافي؟
+أحيانًا تحتاج إلى دالة لشيء واحد فقط ولا تريد إعطائها اسمًا. فكر في الأمر – إذا كنت تستخدم دالة مرة واحدة فقط، فلماذا تملأ الكود باسم إضافي؟
 
-JavaScript يسمح لك بإنشاء **دوال مجهولة** – دوال بدون أسماء يمكنك تعريفها في المكان الذي تحتاجها فيه.
+يسمح لك JavaScript بإنشاء **دوال مجهولة** – دوال بدون أسماء يمكنك تعريفها في المكان الذي تحتاجها فيه.
 
 إليك كيف يمكننا إعادة كتابة مثال المؤقت باستخدام دالة مجهولة:
 
@@ -209,13 +375,13 @@ setTimeout(function() {
 }, 3000);
 ```
 
-هذا يحقق نفس النتيجة، ولكن يتم تعريف الدالة مباشرة داخل استدعاء `setTimeout`، مما يلغي الحاجة إلى إعلان دالة منفصلة.
+هذا يحقق نفس النتيجة، ولكن يتم تعريف الدالة مباشرة داخل استدعاء `setTimeout`، مما يلغي الحاجة إلى تعريف دالة منفصلة.
 
 ### دوال السهم
 
-JavaScript الحديث لديه طريقة أقصر لكتابة الدوال تسمى **دوال السهم**. تستخدم `=>` (التي تبدو كالسهم – فهمت؟) وهي شائعة جدًا بين المطورين.
+يوفر JavaScript الحديث طريقة أقصر لكتابة الدوال تسمى **دوال السهم**. تستخدم `=>` (التي تبدو كالسهم – أليس كذلك؟) وهي شائعة جدًا بين المطورين.
 
-دوال السهم تتيح لك تخطي الكلمة المفتاحية `function` وكتابة كود أكثر اختصارًا.
+تتيح دوال السهم لك تخطي الكلمة المفتاحية `function` وكتابة كود أكثر اختصارًا.
 
 إليك مثال المؤقت الخاص بنا باستخدام دالة السهم:
 
@@ -225,11 +391,66 @@ setTimeout(() => {
 }, 3000);
 ```
 
-الأقواس `()` هي المكان الذي توضع فيه المعلمات (فارغة في هذه الحالة)، ثم يأتي السهم `=>`، وأخيرًا جسم الدالة داخل الأقواس المعقوفة. هذا يوفر نفس الوظيفة مع صياغة أكثر اختصارًا.
+الأقواس `()` هي المكان الذي توضع فيه المعاملات (فارغة في هذه الحالة)، ثم يأتي السهم `=>`، وأخيرًا جسم الدالة داخل الأقواس المعقوفة. هذا يوفر نفس الوظيفة مع صيغة أكثر اختصارًا.
+
+```mermaid
+flowchart LR
+    A["📝 Function Styles"] --> B["Traditional"]
+    A --> C["Arrow"]
+    A --> D["Anonymous"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["Hoisted"]
+    B --> B3["Named"]
+    
+    C --> C1["const name = () => {}"]
+    C --> C2["Concise syntax"]
+    C --> C3["Modern style"]
+    
+    D --> D1["function() {}"]
+    D --> D2["No name"]
+    D --> D3["One-time use"]
+    
+    E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
+    E --> E2["Arrow: Short callbacks"]
+    E --> E3["Anonymous: Event handlers"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ### متى تستخدم كل استراتيجية
 
-متى يجب أن تستخدم كل نهج؟ دليل عملي: إذا كنت ستستخدم الدالة عدة مرات، أعطها اسمًا وقم بتعريفها بشكل منفصل. إذا كانت للاستخدام مرة واحدة، فكر في دالة مجهولة. كلا دوال السهم والصياغة التقليدية خيارات صالحة، على الرغم من أن دوال السهم منتشرة في قواعد الكود الحديثة.
+متى يجب أن تستخدم كل نهج؟ إرشاد عملي: إذا كنت ستستخدم الدالة عدة مرات، أعطها اسمًا وقم بتعريفها بشكل منفصل. إذا كانت للاستخدام مرة واحدة فقط، فكر في استخدام دالة مجهولة. كلا دوال السهم والصيغة التقليدية خيارات صالحة، على الرغم من أن دوال السهم شائعة في قواعد الكود الحديثة.
+
+### 🎨 **فحص أنماط الدوال: اختيار الصيغة المناسبة**
+
+**اختبر فهمك للصيغة:**
+- متى قد تفضل دوال السهم على الصيغة التقليدية للدوال؟
+- ما الميزة الرئيسية للدوال المجهولة؟
+- هل يمكنك التفكير في موقف تكون فيه الدالة المسماة أفضل من الدالة المجهولة؟
+
+```mermaid
+quadrantChart
+    title Function Choice Decision Matrix
+    x-axis Simple --> Complex
+    y-axis One-time use --> Reusable
+    quadrant-1 Arrow Functions
+    quadrant-2 Named Functions
+    quadrant-3 Anonymous Functions
+    quadrant-4 Traditional Functions
+    
+    Event Handlers: [0.3, 0.2]
+    Utility Functions: [0.7, 0.8]
+    Callbacks: [0.2, 0.3]
+    Class Methods: [0.8, 0.7]
+    Mathematical Operations: [0.4, 0.6]
+```
+
+> **اتجاه حديث**: دوال السهم أصبحت الخيار الافتراضي للعديد من المطورين بسبب صياغتها المختصرة، ولكن الدوال التقليدية لا تزال لها مكانها!
 
 ---
 
@@ -241,14 +462,14 @@ setTimeout(() => {
 
 استخدم وضع الوكيل لإكمال التحدي التالي:
 
-**الوصف:** قم بإنشاء مكتبة أدوات رياضية تحتوي على دوال رياضية توضح مفاهيم الدوال المختلفة التي تم تغطيتها في هذا الدرس، بما في ذلك المعلمات، القيم الافتراضية، القيم المرجعة، ودوال السهم.
+**الوصف:** قم بإنشاء مكتبة أدوات رياضية تحتوي على دوال رياضية توضح مفاهيم الدوال المختلفة التي تم تناولها في هذا الدرس، بما في ذلك المعاملات، القيم الافتراضية، القيم المرجعة، ودوال السهم.
 
 **المهمة:** قم بإنشاء ملف JavaScript يسمى `mathUtils.js` يحتوي على الدوال التالية:
-1. دالة `add` تأخذ معلمين وتعيد مجموعهما
-2. دالة `multiply` مع قيم افتراضية للمعلمات (المعلم الثاني افتراضيًا 1)
+1. دالة `add` تأخذ معاملين وتعيد مجموعهما
+2. دالة `multiply` مع قيم افتراضية للمعاملات (المعامل الثاني افتراضيًا 1)
 3. دالة سهم `square` تأخذ رقمًا وتعيد مربعه
-4. دالة `calculate` تقبل دالة أخرى كمعلمة ورقمين، ثم تطبق الدالة على هذه الأرقام
-5. قم بتوضيح استدعاء كل دالة بحالات اختبار مناسبة
+4. دالة `calculate` تقبل دالة أخرى كمعاملة ورقمين، ثم تطبق الدالة على هذه الأرقام
+5. قم بتوضيح استدعاء كل دالة مع حالات اختبار مناسبة
 
 تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
@@ -257,11 +478,111 @@ setTimeout(() => {
 
 ## المراجعة والدراسة الذاتية
 
-من المفيد [قراءة المزيد عن دوال السهم](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)، حيث يتم استخدامها بشكل متزايد في قواعد الكود. قم بممارسة كتابة دالة، ثم إعادة كتابتها باستخدام هذه الصياغة.
+من المفيد [قراءة المزيد عن دوال السهم](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)، حيث يتم استخدامها بشكل متزايد في قواعد الكود. قم بممارسة كتابة دالة، ثم إعادة كتابتها باستخدام هذه الصيغة.
 
 ## الواجب
 
-[مرح مع الدوال](assignment.md)
+[المرح مع الدوال](assignment.md)
+
+---
+
+## 🧰 **ملخص أدوات دوال JavaScript الخاصة بك**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Functions"] --> B["📋 Function Declaration"]
+    A --> C["📥 Parameters"]
+    A --> D["📤 Return Values"]
+    A --> E["🎨 Modern Syntax"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["Descriptive naming"]
+    B --> B3["Reusable code blocks"]
+    
+    C --> C1["Input data"]
+    C --> C2["Default values"]
+    C --> C3["Multiple parameters"]
+    
+    D --> D1["return statement"]
+    D --> D2["Exit function"]
+    D --> D3["Pass data back"]
+    
+    E --> E1["Arrow functions: () =>"]
+    E --> E2["Anonymous functions"]
+    E --> E3["Higher-order functions"]
+    
+    F["⚡ Key Benefits"] --> F1["Code reusability"]
+    F --> F2["Better organization"]
+    F --> F3["Easier testing"]
+    F --> F4["Modular design"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 جدول زمني لإتقان دوال JavaScript
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] اكتب دالة بسيطة تعيد رقمك المفضل
+- [ ] قم بإنشاء دالة تحتوي على معاملين تضيفهما معًا
+- [ ] حاول تحويل دالة تقليدية إلى صيغة دالة السهم  
+- [ ] تدرب على التحدي: اشرح الفرق بين الدوال والطرق  
+
+### 🎯 **ما يمكنك إنجازه خلال هذه الساعة**  
+- [ ] أكمل اختبار ما بعد الدرس وراجع أي مفاهيم مربكة  
+- [ ] قم ببناء مكتبة أدوات الرياضيات من تحدي GitHub Copilot  
+- [ ] أنشئ دالة تستخدم دالة أخرى كمعامل  
+- [ ] تدرب على كتابة دوال بمعاملات افتراضية  
+- [ ] جرب استخدام القوالب النصية في قيم إرجاع الدوال  
+
+### 📅 **إتقان الدوال خلال أسبوعك**  
+- [ ] أكمل مهمة "المرح مع الدوال" بإبداع  
+- [ ] أعد صياغة بعض الأكواد المتكررة التي كتبتها إلى دوال قابلة لإعادة الاستخدام  
+- [ ] قم ببناء آلة حاسبة صغيرة باستخدام الدوال فقط (بدون متغيرات عامة)  
+- [ ] تدرب على دوال السهم مع طرق المصفوفة مثل `map()` و `filter()`  
+- [ ] أنشئ مجموعة من دوال الأدوات للمهام الشائعة  
+- [ ] ادرس الدوال ذات الترتيب الأعلى ومفاهيم البرمجة الوظيفية  
+
+### 🌟 **تحولك خلال الشهر**  
+- [ ] أتقن مفاهيم الدوال المتقدمة مثل الإغلاق والنطاق  
+- [ ] قم ببناء مشروع يعتمد بشكل كبير على تركيب الدوال  
+- [ ] ساهم في المصادر المفتوحة من خلال تحسين توثيق الدوال  
+- [ ] علم شخصًا آخر عن الدوال وأنماط الكتابة المختلفة  
+- [ ] استكشف نماذج البرمجة الوظيفية في JavaScript  
+- [ ] أنشئ مكتبة شخصية من الدوال القابلة لإعادة الاستخدام للمشاريع المستقبلية  
+
+### 🏆 **تسجيل الوصول النهائي لبطل الدوال**  
+
+**احتفل بإتقانك للدوال:**  
+- ما هي أكثر دالة مفيدة قمت بإنشائها حتى الآن؟  
+- كيف غير تعلمك عن الدوال طريقة تفكيرك في تنظيم الأكواد؟  
+- أي صيغة دوال تفضل ولماذا؟  
+- ما هي المشكلة الواقعية التي ستقوم بحلها بكتابة دالة؟  
+
+```mermaid
+journey
+    title Your Function Confidence Evolution
+    section Today
+      Confused by Syntax: 3: You
+      Understanding Basics: 4: You
+      Writing Simple Functions: 5: You
+    section This Week
+      Using Parameters: 4: You
+      Returning Values: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Function Composition: 5: You
+      Advanced Patterns: 5: You
+      Teaching Others: 5: You
+```
+  
+> 🎉 **لقد أتقنت أحد أقوى مفاهيم البرمجة!** الدوال هي اللبنات الأساسية للبرامج الكبيرة. كل تطبيق ستقوم ببنائه في المستقبل سيستخدم الدوال لتنظيم الأكواد وإعادة استخدامها وهيكلتها. الآن تفهم كيفية تغليف المنطق في مكونات قابلة لإعادة الاستخدام، مما يجعلك مبرمجًا أكثر كفاءة وفعالية. مرحبًا بك في عالم البرمجة المعيارية! 🚀  
 
 ---
 
diff --git a/translations/ar/2-js-basics/3-making-decisions/README.md b/translations/ar/2-js-basics/3-making-decisions/README.md
index 4516437937..a03788403b 100644
--- a/translations/ar/2-js-basics/3-making-decisions/README.md
+++ b/translations/ar/2-js-basics/3-making-decisions/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90a3c32c3377f83ab750c2447c77ab98",
-  "translation_date": "2025-10-22T14:05:37+00:00",
+  "original_hash": "c688385d15dd3645e924ea0ffee8967f",
+  "translation_date": "2025-11-03T12:27:21+00:00",
   "source_file": "2-js-basics/3-making-decisions/README.md",
   "language_code": "ar"
 }
@@ -13,11 +13,28 @@ CO_OP_TRANSLATOR_METADATA:
 
 > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
 
-هل تساءلت يومًا كيف تتخذ التطبيقات قرارات ذكية؟ مثل كيفية اختيار نظام الملاحة أسرع طريق، أو كيف يقرر منظم الحرارة تشغيل التدفئة؟ هذا هو المفهوم الأساسي لاتخاذ القرارات في البرمجة.
+```mermaid
+journey
+    title Your JavaScript Decision-Making Adventure
+    section Foundation
+      Boolean Values: 5: You
+      Comparison Operators: 4: You
+      Logical Thinking: 5: You
+    section Basic Decisions
+      If Statements: 4: You
+      If-Else Logic: 5: You
+      Switch Statements: 4: You
+    section Advanced Logic
+      Logical Operators: 5: You
+      Complex Conditions: 4: You
+      Ternary Expressions: 5: You
+```
+
+هل تساءلت يومًا كيف تتخذ التطبيقات قرارات ذكية؟ مثل كيفية اختيار نظام الملاحة للطريق الأسرع، أو كيف يقرر منظم الحرارة تشغيل التدفئة؟ هذا هو المفهوم الأساسي لاتخاذ القرارات في البرمجة.
 
 كما تم تصميم محرك التحليل الخاص بـ Charles Babbage لاتباع تسلسلات مختلفة من العمليات بناءً على الظروف، تحتاج برامج JavaScript الحديثة إلى اتخاذ خيارات بناءً على ظروف متغيرة. هذه القدرة على التفرع واتخاذ القرارات هي ما يحول الكود الثابت إلى تطبيقات ذكية ومتجاوبة.
 
-في هذا الدرس، ستتعلم كيفية تنفيذ المنطق الشرطي في برامجك. سنستكشف العبارات الشرطية، وعوامل المقارنة، والتعبيرات المنطقية التي تسمح لكودك بتقييم المواقف والاستجابة بشكل مناسب.
+في هذا الدرس، ستتعلم كيفية تنفيذ المنطق الشرطي في برامجك. سنستكشف العبارات الشرطية، عوامل المقارنة، والتعبيرات المنطقية التي تسمح لكودك بتقييم المواقف والاستجابة بشكل مناسب.
 
 ## اختبار ما قبل المحاضرة
 
@@ -31,11 +48,44 @@ CO_OP_TRANSLATOR_METADATA:
 
 > يمكنك أخذ هذا الدرس على [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
 
-## لمحة سريعة عن القيم المنطقية
+```mermaid
+mindmap
+  root((Decision Making))
+    Boolean Logic
+      true/false
+      Comparison results
+      Logical expressions
+    Conditional Statements
+      if statements
+        Single condition
+        Code execution
+      if-else
+        Two paths
+        Alternative actions
+      switch
+        Multiple options
+        Clean structure
+    Operators
+      Comparison
+        === !== < > <= >=
+        Value relationships
+      Logical
+        && || !
+        Combine conditions
+    Advanced Patterns
+      Ternary
+        ? : syntax
+        Inline decisions
+      Complex Logic
+        Nested conditions
+        Multiple criteria
+```
+
+## ملخص سريع عن القيم المنطقية
 
-قبل استكشاف اتخاذ القرارات، دعونا نراجع القيم المنطقية من درسنا السابق. سميت هذه القيم على اسم عالم الرياضيات George Boole، وهي تمثل حالات ثنائية – إما `true` أو `false`. لا يوجد غموض، ولا وسط.
+قبل استكشاف اتخاذ القرارات، دعونا نعيد النظر في القيم المنطقية من درسنا السابق. سميت هذه القيم على اسم عالم الرياضيات جورج بول، وتمثل حالات ثنائية – إما `true` أو `false`. لا يوجد غموض، ولا منطقة وسطى.
 
-تشكل هذه القيم الثنائية أساس كل المنطق الحسابي. كل قرار يتخذه برنامجك في النهاية يتقلص إلى تقييم منطقي.
+تشكل هذه القيم الثنائية أساس كل المنطق الحاسوبي. كل قرار يتخذه برنامجك يتلخص في النهاية إلى تقييم منطقي.
 
 إنشاء متغيرات منطقية أمر بسيط:
 
@@ -46,13 +96,13 @@ let myFalseBool = false;
 
 هذا ينشئ متغيرين بقيم منطقية صريحة.
 
-✅ القيم المنطقية سميت على اسم عالم الرياضيات والفيلسوف والمنطقي الإنجليزي George Boole (1815–1864).
+✅ سميت القيم المنطقية على اسم عالم الرياضيات والفيلسوف والمنطقي الإنجليزي جورج بول (1815–1864).
 
 ## عوامل المقارنة والقيم المنطقية
 
-في الواقع، نادرًا ما تقوم بتعيين القيم المنطقية يدويًا. بدلاً من ذلك، ستقوم بإنشائها عن طريق تقييم الشروط: "هل هذا الرقم أكبر من ذلك؟" أو "هل هذه القيم متساوية؟"
+في الواقع، نادرًا ما تقوم بتعيين القيم المنطقية يدويًا. بدلاً من ذلك، تقوم بإنشائها عن طريق تقييم الشروط: "هل هذا الرقم أكبر من ذاك؟" أو "هل هذه القيم متساوية؟"
 
-تتيح عوامل المقارنة هذه التقييمات. تقارن القيم وتعيد نتائج منطقية بناءً على العلاقة بين العوامل.
+تُمكّن عوامل المقارنة هذه التقييمات. فهي تقارن القيم وتعيد نتائج منطقية بناءً على العلاقة بين العوامل.
 
 | الرمز | الوصف                                                                                                                                                   | المثال            |
 | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
@@ -63,7 +113,62 @@ let myFalseBool = false;
 | `===`  | **المساواة الصارمة**: يقارن بين قيمتين ويعيد نوع البيانات المنطقية `true` إذا كانت القيم على اليمين واليسار متساوية وتكون من نفس نوع البيانات.       | `5 === 6 // false` |
 | `!==`  | **عدم المساواة**: يقارن بين قيمتين ويعيد القيمة المنطقية المعاكسة لما سيعيده عامل المساواة الصارمة                                    | `5 !== 6 // true`  |
 
-✅ تحقق من معرفتك بكتابة بعض المقارنات في وحدة التحكم الخاصة بالمتصفح. هل تفاجأت بأي بيانات تم إرجاعها؟
+✅ تحقق من معرفتك بكتابة بعض المقارنات في وحدة التحكم في المتصفح. هل تفاجأت بأي بيانات تم إرجاعها؟
+
+```mermaid
+flowchart LR
+    A["🔢 Values"] --> B["⚖️ Comparison"]
+    B --> C["✅ Boolean Result"]
+    
+    D["5"] --> E["< 6"]
+    E --> F["true"]
+    
+    G["10"] --> H["=== '10'"]
+    H --> I["false"]
+    
+    J["'hello'"] --> K["!== 'world'"]
+    K --> L["true"]
+    
+    M["📋 Operator Types"] --> M1["Equality: === !=="]
+    M --> M2["Relational: < > <= >="]
+    M --> M3["Strict vs Loose"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style M fill:#fff3e0
+```
+
+### 🧠 **اختبار إتقان المقارنة: فهم المنطق**
+
+**اختبر فهمك للمقارنة:**
+- لماذا تعتقد أن `===` (المساواة الصارمة) تُفضل عمومًا على `==` (المساواة غير الصارمة)؟
+- هل يمكنك التنبؤ بما يعيده `5 === '5'`؟ وماذا عن `5 == '5'`؟
+- ما الفرق بين `!==` و `!=`؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> Comparison: Two values
+    Comparison --> StrictEqual: === or !==
+    Comparison --> Relational: < > <= >=
+    
+    StrictEqual --> TypeCheck: Check type AND value
+    Relational --> NumberCompare: Convert to numbers
+    
+    TypeCheck --> BooleanResult: true or false
+    NumberCompare --> BooleanResult
+    
+    note right of StrictEqual
+        Preferred approach
+        No type conversion
+    end note
+    
+    note right of Relational
+        Useful for ranges
+        Numerical comparisons
+    end note
+```
+
+> **نصيحة احترافية**: استخدم دائمًا `===` و `!==` لفحص المساواة إلا إذا كنت بحاجة إلى تحويل النوع بشكل محدد. هذا يمنع السلوك غير المتوقع!
 
 ## عبارة If
 
@@ -77,7 +182,7 @@ if (condition) {
 }
 ```
 
-يذهب الشرط داخل الأقواس، وإذا كان `true`، يقوم JavaScript بتشغيل الكود داخل الأقواس المتعرجة. إذا كان `false`، يتخطى JavaScript تلك الكتلة بالكامل.
+يتم وضع الشرط داخل الأقواس، وإذا كان `true`، يقوم JavaScript بتشغيل الكود داخل الأقواس المتعرجة. إذا كان `false`، يتخطى JavaScript هذا الجزء بالكامل.
 
 غالبًا ما تستخدم عوامل المقارنة لإنشاء هذه الشروط. دعونا نرى مثالًا عمليًا:
 
@@ -91,13 +196,31 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-نظرًا لأن `1000 >= 800` يتم تقييمه إلى `true`، يتم تنفيذ الكود داخل الكتلة، ويعرض "الحصول على جهاز كمبيوتر محمول جديد!" في وحدة التحكم.
+نظرًا لأن `1000 >= 800` يتم تقييمه إلى `true`، يتم تنفيذ الكود داخل الكتلة، ويعرض "شراء لابتوب جديد!" في وحدة التحكم.
+
+```mermaid
+flowchart TD
+    A["🚀 Program Start"] --> B{"💰 currentMoney >= laptopPrice?"}
+    B -->|true| C["🎉 'Getting a new laptop!'"]
+    B -->|false| D["⏭️ Skip code block"]
+    C --> E["📋 Continue program"]
+    D --> E
+    
+    F["📊 If Statement Structure"] --> F1["if (condition) {"]
+    F1 --> F2["  // code to run if true"]
+    F2 --> F3["}"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style F fill:#e3f2fd
+```
 
 ## عبارة If..Else
 
 ولكن ماذا لو كنت تريد أن يقوم برنامجك بشيء مختلف عندما يكون الشرط خاطئًا؟ هنا يأتي دور `else` – إنها مثل وجود خطة احتياطية.
 
-عبارة `else` تمنحك طريقة لتقول "إذا لم يكن هذا الشرط صحيحًا، قم بهذا الشيء الآخر بدلاً من ذلك."
+عبارة `else` تمنحك طريقة لتقول "إذا لم يكن هذا الشرط صحيحًا، فقم بهذا الشيء الآخر بدلاً من ذلك."
 
 ```javascript
 let currentMoney = 500;
@@ -112,15 +235,44 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-الآن، نظرًا لأن `500 >= 800` هو `false`، يتخطى JavaScript الكتلة الأولى ويقوم بتشغيل كتلة `else` بدلاً من ذلك. سترى "لا يمكنني شراء جهاز كمبيوتر محمول جديد بعد!" في وحدة التحكم.
+الآن، نظرًا لأن `500 >= 800` هو `false`، يتخطى JavaScript الكتلة الأولى ويقوم بتشغيل كتلة `else` بدلاً من ذلك. سترى "لا يمكنني شراء لابتوب جديد بعد!" في وحدة التحكم.
+
+✅ اختبر فهمك لهذا الكود والكود التالي عن طريق تشغيله في وحدة التحكم في المتصفح. قم بتغيير قيم المتغيرات currentMoney و laptopPrice لتغيير ما يتم عرضه في `console.log()`.
+
+### 🎯 **اختبار منطق If-Else: مسارات متفرعة**
+
+**قيّم فهمك للمنطق الشرطي:**
+- ماذا يحدث إذا كانت قيمة `currentMoney` تساوي تمامًا قيمة `laptopPrice`؟
+- هل يمكنك التفكير في سيناريو واقعي حيث يكون منطق if-else مفيدًا؟
+- كيف يمكنك توسيع هذا للتعامل مع نطاقات أسعار متعددة؟
+
+```mermaid
+flowchart TD
+    A["🔍 Evaluate Condition"] --> B{"Condition True?"}
+    B -->|Yes| C["📤 Execute IF block"]
+    B -->|No| D["📥 Execute ELSE block"]
+    
+    C --> E["✅ One path taken"]
+    D --> E
+    
+    F["🌐 Real-world Examples"] --> F1["User login status"]
+    F --> F2["Age verification"]
+    F --> F3["Form validation"]
+    F --> F4["Game state changes"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#e3f2fd
+    style F fill:#f3e5f5
+```
 
-✅ اختبر فهمك لهذا الكود والكود التالي عن طريق تشغيله في وحدة التحكم الخاصة بالمتصفح. قم بتغيير قيم المتغيرات currentMoney و laptopPrice لتغيير النتيجة `console.log()`.
+> **معلومة أساسية**: يضمن if-else اتخاذ مسار واحد فقط. هذا يضمن أن برنامجك دائمًا لديه استجابة لأي شرط!
 
 ## عبارة Switch
 
-في بعض الأحيان تحتاج إلى مقارنة قيمة واحدة مع خيارات متعددة. على الرغم من أنه يمكنك ربط عدة عبارات `if..else`، إلا أن هذا النهج يصبح غير عملي. توفر عبارة `switch` هيكلًا أنظف للتعامل مع قيم متعددة منفصلة.
+في بعض الأحيان تحتاج إلى مقارنة قيمة واحدة مع خيارات متعددة. بينما يمكنك ربط عدة عبارات `if..else`، يصبح هذا النهج غير عملي. توفر عبارة `switch` هيكلًا أنظف للتعامل مع قيم متعددة محددة.
 
-يشبه المفهوم أنظمة التبديل الميكانيكية المستخدمة في مقاسم الهاتف المبكرة – تحدد قيمة الإدخال مسار التنفيذ المحدد.
+يشبه المفهوم أنظمة التبديل الميكانيكية المستخدمة في مقاسم الهاتف المبكرة – قيمة إدخال واحدة تحدد المسار المحدد الذي يتبعه التنفيذ.
 
 ```javascript
 switch (expression) {
@@ -138,8 +290,8 @@ switch (expression) {
 إليك كيفية هيكلتها:
 - يقوم JavaScript بتقييم التعبير مرة واحدة
 - يبحث في كل `case` للعثور على تطابق
-- عندما يجد تطابقًا، يقوم بتشغيل كتلة الكود تلك
-- يخبر `break` JavaScript بالتوقف والخروج من switch
+- عندما يجد تطابقًا، يقوم بتشغيل كتلة الكود
+- تخبر `break` JavaScript بالتوقف والخروج من switch
 - إذا لم تتطابق أي حالات، يقوم بتشغيل كتلة `default` (إذا كانت موجودة)
 
 ```javascript
@@ -164,15 +316,57 @@ switch (dayNumber) {
 console.log(`Today is ${dayName}`);
 ```
 
-في هذا المثال، يرى JavaScript أن `dayNumber` هو `2`، يجد تطابقًا مع `case 2`، يحدد `dayName` إلى "الثلاثاء"، ثم يخرج من switch. النتيجة؟ "اليوم هو الثلاثاء" يتم تسجيله في وحدة التحكم.
+في هذا المثال، يرى JavaScript أن `dayNumber` هو `2`، يجد تطابقًا مع `case 2`، يعين `dayName` إلى "الثلاثاء"، ثم يخرج من switch. النتيجة؟ يتم تسجيل "اليوم هو الثلاثاء" في وحدة التحكم.
+
+```mermaid
+flowchart TD
+    A["📥 switch(expression)"] --> B["🔍 Evaluate once"]
+    B --> C{"Match case 1?"}
+    C -->|Yes| D["📋 Execute case 1"]
+    C -->|No| E{"Match case 2?"}
+    E -->|Yes| F["📋 Execute case 2"]
+    E -->|No| G{"Match case 3?"}
+    G -->|Yes| H["📋 Execute case 3"]
+    G -->|No| I["📋 Execute default"]
+    
+    D --> J["🛑 break"]
+    F --> K["🛑 break"]
+    H --> L["🛑 break"]
+    
+    J --> M["✅ Exit switch"]
+    K --> M
+    L --> M
+    I --> M
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style M fill:#e8f5e8
+```
+
+✅ اختبر فهمك لهذا الكود والكود التالي عن طريق تشغيله في وحدة التحكم في المتصفح. قم بتغيير قيم المتغير a لتغيير ما يتم عرضه في `console.log()`.
+
+### 🔄 **إتقان عبارة Switch: خيارات متعددة**
+
+**اختبر فهمك لـ switch:**
+- ماذا يحدث إذا نسيت عبارة `break`؟
+- متى تستخدم switch بدلاً من عبارات if-else المتعددة؟
+- لماذا تكون حالة `default` مفيدة حتى إذا كنت تعتقد أنك غطيت جميع الاحتمالات؟
+
+```mermaid
+pie title "When to Use Each Decision Structure"
+    "Simple if-else" : 40
+    "Complex if-else chains" : 25
+    "Switch statements" : 20
+    "Ternary operators" : 15
+```
 
-✅ اختبر فهمك لهذا الكود والكود التالي عن طريق تشغيله في وحدة التحكم الخاصة بالمتصفح. قم بتغيير قيم المتغير a لتغيير النتيجة `console.log()`.
+> **أفضل ممارسة**: استخدم switch عند مقارنة متغير واحد مع قيم محددة متعددة. استخدم if-else لفحص النطاقات أو الشروط المعقدة!
 
-## عوامل منطقية وقيم منطقية
+## العوامل المنطقية والقيم المنطقية
 
-غالبًا ما تتطلب القرارات المعقدة تقييم شروط متعددة في وقت واحد. تمامًا كما يسمح الجبر المنطقي للرياضيين بدمج التعبيرات المنطقية، توفر البرمجة عوامل منطقية لربط شروط منطقية متعددة.
+غالبًا ما تتطلب القرارات المعقدة تقييم شروط متعددة في نفس الوقت. تمامًا كما يسمح الجبر المنطقي للرياضيين بدمج التعبيرات المنطقية، توفر البرمجة عوامل منطقية لربط شروط منطقية متعددة.
 
-تتيح هذه العوامل منطقًا شرطيًا متطورًا من خلال الجمع بين تقييمات بسيطة صحيحة/خاطئة.
+تُمكّن هذه العوامل منطقًا شرطيًا متقدمًا عن طريق دمج تقييمات true/false البسيطة.
 
 | الرمز | الوصف                                                                                     | المثال                                                                 |
 | ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
@@ -180,10 +374,39 @@ console.log(`Today is ${dayName}`);
 | `\|\|` | **OR المنطقي**: يقارن بين تعبيرين منطقيين. يعيد true إذا كان على الأقل أحد الجانبين صحيحًا     | `(5 > 10) \|\| (5 < 10) // أحد الجانبين خاطئ، الآخر صحيح. يعيد true` |
 | `!`    | **NOT المنطقي**: يعيد القيمة المعاكسة لتعبير منطقي                             | `!(5 > 10) // 5 ليس أكبر من 10، لذا "!" يجعله صحيحًا`         |
 
-تتيح لك هذه العوامل الجمع بين الشروط بطرق مفيدة:
+تتيح لك هذه العوامل دمج الشروط بطرق مفيدة:
 - AND (`&&`) يعني أن كلا الشرطين يجب أن يكونا صحيحين
 - OR (`||`) يعني أن على الأقل أحد الشرطين يجب أن يكون صحيحًا  
-- NOT (`!`) يقلب صحيح إلى خاطئ (والعكس صحيح)
+- NOT (`!`) يقلب true إلى false (والعكس صحيح)
+
+```mermaid
+flowchart LR
+    A["🔗 Logical Operators"] --> B["&& AND"]
+    A --> C["|| OR"]
+    A --> D["! NOT"]
+    
+    B --> B1["Both must be true"]
+    B --> B2["true && true = true"]
+    B --> B3["true && false = false"]
+    
+    C --> C1["At least one true"]
+    C --> C2["true || false = true"]
+    C --> C3["false || false = false"]
+    
+    D --> D1["Flips the value"]
+    D --> D2["!true = false"]
+    D --> D3["!false = true"]
+    
+    E["🌍 Real Examples"] --> E1["Age >= 18 && hasLicense"]
+    E --> E2["isWeekend || isHoliday"]
+    E --> E3["!isLoggedIn"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ## الشروط والقرارات باستخدام العوامل المنطقية
 
@@ -205,6 +428,35 @@ if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
 
 في هذا المثال: نحسب سعر الخصم بنسبة 20% (640)، ثم نقيم ما إذا كانت أموالنا المتاحة تغطي السعر الكامل أو السعر المخفض. نظرًا لأن 600 تفي بحد السعر المخفض البالغ 640، يتم تقييم الشرط إلى true.
 
+### 🧮 **اختبار العوامل المنطقية: دمج الشروط**
+
+**اختبر فهمك للعوامل المنطقية:**
+- في التعبير `A && B`، ماذا يحدث إذا كان A خاطئًا؟ هل يتم تقييم B؟
+- هل يمكنك التفكير في موقف تحتاج فيه إلى استخدام جميع العوامل الثلاثة (&&، ||، !) معًا؟
+- ما الفرق بين `!user.isActive` و `user.isActive !== true`؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> EvaluateA: A && B
+    EvaluateA --> CheckB: A is true
+    EvaluateA --> ReturnFalse: A is false
+    CheckB --> ReturnTrue: B is true
+    CheckB --> ReturnFalse: B is false
+    
+    [*] --> EvaluateC: A || B
+    EvaluateC --> ReturnTrue: A is true
+    EvaluateC --> CheckD: A is false
+    CheckD --> ReturnTrue: B is true
+    CheckD --> ReturnFalse: B is false
+    
+    note right of EvaluateA
+        Short-circuit evaluation:
+        If A is false, B is never checked
+    end note
+```
+
+> **نصيحة الأداء**: يستخدم JavaScript "تقييم الدائرة القصيرة" - في `A && B`، إذا كان A خاطئًا، لا يتم تقييم B. استخدم هذا لصالحك!
+
 ### عامل النفي
 
 في بعض الأحيان يكون من الأسهل التفكير في متى يكون شيء ما غير صحيح. مثل بدلاً من السؤال "هل المستخدم مسجل الدخول؟"، قد ترغب في السؤال "هل المستخدم غير مسجل الدخول؟" يقوم عامل التعجب (`!`) بقلب المنطق لك.
@@ -217,19 +469,19 @@ if (!condition) {
 }
 ```
 
-عامل `!` يشبه قول "عكس..." – إذا كان شيء ما `true`، يجعل `!` ذلك `false`، والعكس صحيح.
+عامل `!` يشبه قول "العكس من..." – إذا كان شيء ما `true`، يجعلها `false`، والعكس صحيح.
 
 ### التعبيرات الثلاثية
 
-للتعيينات الشرطية البسيطة، توفر JavaScript **العامل الثلاثي**. يتيح لك هذا التركيب المختصر كتابة تعبير شرطي في سطر واحد، وهو مفيد عندما تحتاج إلى تعيين أحد القيمتين بناءً على شرط.
+للتعيينات الشرطية البسيطة، يوفر JavaScript **العامل الثلاثي**. يتيح لك هذا التركيب المختصر كتابة تعبير شرطي في سطر واحد، وهو مفيد عندما تحتاج إلى تعيين أحد القيمتين بناءً على شرط.
 
 ```javascript
 let variable = condition ? returnThisIfTrue : returnThisIfFalse;
 ```
 
-يقرأ مثل سؤال: "هل هذا الشرط صحيح؟ إذا نعم، استخدم هذه القيمة. إذا لا، استخدم تلك القيمة."
+يُقرأ كأنه سؤال: "هل هذا الشرط صحيح؟ إذا نعم، استخدم هذه القيمة. إذا لا، استخدم تلك القيمة."
 
-فيما يلي مثال أكثر واقعية:
+فيما يلي مثال أكثر وضوحًا:
 
 ```javascript
 let firstNumber = 20;
@@ -241,7 +493,7 @@ let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
 
 إليك ما يقوله هذا السطر: "هل `firstNumber` أكبر من `secondNumber`؟ إذا نعم، ضع `firstNumber` في `biggestNumber`. إذا لا، ضع `secondNumber` في `biggestNumber`."
 
-العامل الثلاثي هو مجرد طريقة أقصر لكتابة عبارة `if..else` التقليدية:
+العامل الثلاثي هو مجرد طريقة أقصر لكتابة عبارة if..else التقليدية:
 
 ```javascript
 let biggestNumber;
@@ -252,21 +504,43 @@ if (firstNumber > secondNumber) {
 }
 ```
 
-كلا النهجين ينتجان نفس النتائج. يوفر العامل الثلاثي الاختصار، بينما قد يكون هيكل if-else التقليدي أكثر قابلية للقراءة للشروط المعقدة.
+كلا النهجين ينتج نفس النتائج. يوفر العامل الثلاثي اختصارًا، بينما قد يكون هيكل if-else التقليدي أكثر قابلية للقراءة للشروط المعقدة.
+
+```mermaid
+flowchart LR
+    A["🤔 Ternary Operator"] --> B["condition ?"]
+    B --> C["valueIfTrue :"]
+    C --> D["valueIfFalse"]
+    
+    E["📝 Traditional If-Else"] --> F["if (condition) {"]
+    F --> G["  return valueIfTrue"]
+    G --> H["} else {"]
+    H --> I["  return valueIfFalse"]
+    I --> J["}"]
+    
+    K["⚡ When to Use"] --> K1["Simple assignments"]
+    K --> K2["Short conditions"]
+    K --> K3["Inline decisions"]
+    K --> K4["Return statements"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style K fill:#e8f5e8
+```
 
 ---
 
 ## 🚀 التحدي
 
-قم بإنشاء برنامج مكتوب أولاً باستخدام العوامل المنطقية، ثم أعد كتابته باستخدام تعبير ثلاثي. ما هي التركيبة التي تفضلها؟
+قم بإنشاء برنامج مكتوب أولاً باستخدام العوامل المنطقية، ثم أعد كتابته باستخدام تعبير ثلاثي. ما هي الصياغة التي تفضلها؟
 
 ---
 
 ## تحدي GitHub Copilot Agent 🚀
 
-استخدم وضع Agent لإكمال التحدي التالي:
+استخدم وضع الوكيل لإكمال التحدي التالي:
 
-**الوصف:** قم بإنشاء آلة حاسبة شاملة للدرجات تعرض مفاهيم اتخاذ القرارات المتعددة من هذا الدرس، بما في ذلك عبارات if-else، وعبارات switch، والعوامل المنطقية، والتعبيرات الثلاثية.
+**الوصف:** قم بإنشاء حاسبة شاملة للدرجات تعرض مفاهيم اتخاذ القرارات المتعددة من هذا الدرس، بما في ذلك عبارات if-else، عبارات switch، العوامل المنطقية، والتعبيرات الثلاثية.
 
 **المهمة:** اكتب برنامج JavaScript يأخذ درجة الطالب الرقمية (0-100) ويحدد درجته الحرفية باستخدام المعايير التالية:
 - A: 90-100
@@ -277,14 +551,14 @@ if (firstNumber > secondNumber) {
 
 المتطلبات:
 1. استخدم عبارة if-else لتحديد الدرجة الحرفية
-2. استخدم العوامل المنطقية للتحقق مما إذا كان الطالب ناجحًا (الدرجة >= 60) ولديه تفوق (الدرجة >= 90)
+2. استخدم العمليات المنطقية للتحقق مما إذا كان الطالب ناجحًا (الدرجة >= 60) وأيضًا لديه تفوق (الدرجة >= 90)
 3. استخدم عبارة switch لتقديم ملاحظات محددة لكل درجة حرفية
-4. استخدم العامل الثلاثي لتحديد ما إذا كان الطالب مؤهلًا للدورة التالية (الدرجة >= 70)
+4. استخدم المشغل الثلاثي لتحديد ما إذا كان الطالب مؤهلاً للدورة التالية (الدرجة >= 70)
 5. قم بتضمين التحقق من صحة الإدخال للتأكد من أن الدرجة بين 0 و100
 
-اختبر برنامجك مع درجات مختلفة بما في ذلك الحالات الحدية مثل 59، 60، 89، 90، ومدخلات غير صالحة.
+اختبر برنامجك باستخدام درجات مختلفة بما في ذلك الحالات الحدية مثل 59، 60، 89، 90، ومدخلات غير صالحة.
 
-تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## اختبار ما بعد المحاضرة
 
@@ -292,15 +566,115 @@ if (firstNumber > secondNumber) {
 
 ## المراجعة والدراسة الذاتية
 
-اقرأ المزيد عن العديد من العوامل المتاحة للمستخدم [على MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+اقرأ المزيد عن العديد من العمليات المتاحة للمستخدم [على MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
 
-استعرض دليل Josh Comeau الرائع [للعوامل](https://joshwcomeau.com/operator-lookup/)!
+اطلع على دليل جوش كومو الرائع [للبحث عن العمليات](https://joshwcomeau.com/operator-lookup/)!
 
 ## الواجب
 
-[العوامل](assignment.md)
+[العمليات](assignment.md)
+
+---
+
+## 🧠 **ملخص أدوات اتخاذ القرار الخاصة بك**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Decisions"] --> B["🔍 Boolean Logic"]
+    A --> C["📊 Conditional Statements"]
+    A --> D["🔗 Logical Operators"]
+    A --> E["⚡ Advanced Patterns"]
+    
+    B --> B1["true/false values"]
+    B --> B2["Comparison operators"]
+    B --> B3["Truthiness concepts"]
+    
+    C --> C1["if statements"]
+    C --> C2["if-else chains"]
+    C --> C3["switch statements"]
+    
+    D --> D1["&& (AND)"]
+    D --> D2["|| (OR)"]
+    D --> D3["! (NOT)"]
+    
+    E --> E1["Ternary operator"]
+    E --> E2["Short-circuit evaluation"]
+    E --> E3["Complex conditions"]
+    
+    F["💡 Key Principles"] --> F1["Clear readable conditions"]
+    F --> F2["Consistent comparison style"]
+    F --> F3["Proper operator precedence"]
+    F --> F4["Efficient evaluation order"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 جدول زمني لإتقان اتخاذ القرار باستخدام JavaScript
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] ممارسة عمليات المقارنة في وحدة التحكم بالمتصفح
+- [ ] كتابة عبارة if-else بسيطة للتحقق من عمرك
+- [ ] تجربة التحدي: إعادة كتابة عبارة if-else باستخدام المشغل الثلاثي
+- [ ] اختبار ما يحدث مع القيم "الحقيقية" و"الزائفة" المختلفة
+
+### 🎯 **ما يمكنك تحقيقه خلال هذه الساعة**
+- [ ] إكمال اختبار ما بعد الدرس ومراجعة أي مفاهيم مربكة
+- [ ] بناء آلة حاسبة شاملة للدرجات من تحدي GitHub Copilot
+- [ ] إنشاء شجرة قرار بسيطة لسيناريو واقعي (مثل اختيار ما ترتديه)
+- [ ] ممارسة الجمع بين شروط متعددة باستخدام العمليات المنطقية
+- [ ] تجربة عبارات switch لحالات استخدام مختلفة
+
+### 📅 **إتقان المنطق خلال أسبوع**
+- [ ] إكمال واجب العمليات بأمثلة إبداعية
+- [ ] بناء تطبيق اختبار صغير باستخدام هياكل شرطية متنوعة
+- [ ] إنشاء مدقق نموذج يتحقق من شروط إدخال متعددة
+- [ ] ممارسة تمارين دليل جوش كومو [للبحث عن العمليات](https://joshwcomeau.com/operator-lookup/)
+- [ ] تحسين الكود الحالي باستخدام هياكل شرطية أكثر ملاءمة
+- [ ] دراسة التقييم القصير الدائرة وتأثيراته على الأداء
+
+### 🌟 **تحولك خلال شهر**
+- [ ] إتقان الشروط المتداخلة المعقدة والحفاظ على قابلية قراءة الكود
+- [ ] بناء تطبيق يحتوي على منطق اتخاذ قرار متقدم
+- [ ] المساهمة في المصادر المفتوحة من خلال تحسين المنطق الشرطي في المشاريع الحالية
+- [ ] تعليم شخص آخر حول الهياكل الشرطية المختلفة ومتى يتم استخدام كل منها
+- [ ] استكشاف نهج البرمجة الوظيفية للمنطق الشرطي
+- [ ] إنشاء دليل مرجعي شخصي لأفضل الممارسات الشرطية
+
+### 🏆 **تسجيل الوصول النهائي لبطل اتخاذ القرار**
+
+**احتفل بإتقانك للتفكير المنطقي:**
+- ما هو أكثر منطق قرار معقد قمت بتنفيذه بنجاح؟
+- أي هيكل شرطي يبدو طبيعيًا بالنسبة لك ولماذا؟
+- كيف غيّر تعلم العمليات المنطقية نهجك لحل المشكلات؟
+- ما هو التطبيق الواقعي الذي سيستفيد من منطق اتخاذ قرار متقدم؟
+
+```mermaid
+journey
+    title Your Logical Thinking Evolution
+    section Today
+      Boolean Confusion: 3: You
+      If-Else Understanding: 4: You
+      Operator Recognition: 5: You
+    section This Week
+      Complex Conditions: 4: You
+      Switch Mastery: 5: You
+      Logical Combinations: 5: You
+    section Next Month
+      Advanced Patterns: 5: You
+      Performance Awareness: 5: You
+      Teaching Others: 5: You
+```
+
+> 🧠 **لقد أتقنت فن اتخاذ القرار الرقمي!** تعتمد كل تطبيقات التفاعل على المنطق الشرطي للاستجابة بذكاء لإجراءات المستخدم والظروف المتغيرة. أنت الآن تفهم كيفية جعل برامجك تفكر، تقيم، وتختار الاستجابات المناسبة. هذا الأساس المنطقي سيقود كل تطبيق ديناميكي تقوم ببنائه! 🎉
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/2-js-basics/4-arrays-loops/README.md b/translations/ar/2-js-basics/4-arrays-loops/README.md
index b10cb8cffc..e2d5597a15 100644
--- a/translations/ar/2-js-basics/4-arrays-loops/README.md
+++ b/translations/ar/2-js-basics/4-arrays-loops/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "9197f8af0fef9be6e81d4dbda23c7e7d",
-  "translation_date": "2025-10-22T14:04:59+00:00",
+  "original_hash": "1710a50a519a6e4a1b40a5638783018d",
+  "translation_date": "2025-11-03T12:26:47+00:00",
   "source_file": "2-js-basics/4-arrays-loops/README.md",
   "language_code": "ar"
 }
@@ -12,12 +12,29 @@ CO_OP_TRANSLATOR_METADATA:
 ![أساسيات JavaScript - المصفوفات](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ar.png)
 > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your Arrays & Loops Adventure
+    section Array Fundamentals
+      Creating Arrays: 5: You
+      Accessing Elements: 4: You
+      Array Methods: 5: You
+    section Loop Mastery
+      For Loops: 4: You
+      While Loops: 5: You
+      Modern Syntax: 4: You
+    section Data Processing
+      Array + Loops: 5: You
+      Real-world Applications: 4: You
+      Performance Optimization: 5: You
+```
+
 ## اختبار ما قبل المحاضرة
 [اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/13)
 
-هل تساءلت يومًا كيف تحتفظ المواقع الإلكترونية بعناصر سلة التسوق أو تعرض قائمة أصدقائك؟ هنا تأتي أهمية المصفوفات والحلقات. المصفوفات تشبه الحاويات الرقمية التي تحتفظ بمعلومات متعددة، بينما تتيح لك الحلقات العمل مع كل تلك البيانات بكفاءة دون الحاجة إلى كتابة كود متكرر.
+هل تساءلت يومًا كيف تحتفظ المواقع الإلكترونية بعناصر سلة التسوق أو تعرض قائمة أصدقائك؟ هنا تأتي المصفوفات والحلقات. المصفوفات تشبه الحاويات الرقمية التي تحتوي على معلومات متعددة، بينما تتيح لك الحلقات العمل مع كل تلك البيانات بكفاءة دون الحاجة إلى كتابة كود متكرر.
 
-معًا، يشكل هذان المفهومان الأساس للتعامل مع المعلومات في برامجك. ستتعلم كيف تنتقل من كتابة كل خطوة يدويًا إلى إنشاء كود ذكي وفعال يمكنه معالجة مئات أو حتى آلاف العناصر بسرعة.
+معًا، يشكل هذان المفهومان الأساس لمعالجة المعلومات في برامجك. ستتعلم كيف تنتقل من كتابة كل خطوة يدويًا إلى إنشاء كود ذكي وفعال يمكنه معالجة مئات أو حتى آلاف العناصر بسرعة.
 
 بنهاية هذه الدرس، ستفهم كيفية إنجاز مهام البيانات المعقدة باستخدام بضعة أسطر فقط من الكود. دعونا نستكشف هذه المفاهيم البرمجية الأساسية.
 
@@ -25,17 +42,57 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![الحلقات](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "الحلقات")
 
-> 🎥 اضغط على الصور أعلاه لمشاهدة فيديوهات عن المصفوفات والحلقات.
+> 🎥 انقر على الصور أعلاه لمشاهدة فيديوهات حول المصفوفات والحلقات.
 
 > يمكنك أخذ هذا الدرس على [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
 
+```mermaid
+mindmap
+  root((Data Processing))
+    Arrays
+      Structure
+        Square brackets syntax
+        Zero-based indexing
+        Dynamic sizing
+      Operations
+        push/pop
+        shift/unshift
+        indexOf/includes
+      Types
+        Numbers array
+        Strings array
+        Mixed types
+    Loops
+      For Loops
+        Counting iterations
+        Array processing
+        Predictable flow
+      While Loops
+        Condition-based
+        Unknown iterations
+        User input
+      Modern Syntax
+        for...of
+        forEach
+        Functional methods
+    Applications
+      Data Analysis
+        Statistics
+        Filtering
+        Transformations
+      User Interfaces
+        Lists
+        Menus
+        Galleries
+```
+
 ## المصفوفات
 
-فكر في المصفوفات كأنها خزانة ملفات رقمية - بدلاً من تخزين مستند واحد في كل درج، يمكنك تنظيم عناصر متعددة ذات صلة في حاوية واحدة منظمة. بلغة البرمجة، تتيح لك المصفوفات تخزين معلومات متعددة في حزمة واحدة منظمة.
+فكر في المصفوفات كخزانة ملفات رقمية - بدلاً من تخزين مستند واحد في كل درج، يمكنك تنظيم عناصر متعددة ذات صلة في حاوية واحدة منظمة. في مصطلحات البرمجة، تتيح لك المصفوفات تخزين معلومات متعددة في حزمة واحدة منظمة.
 
-سواء كنت تبني معرض صور، أو تدير قائمة مهام، أو تتابع أعلى الدرجات في لعبة، فإن المصفوفات توفر الأساس لتنظيم البيانات. دعونا نرى كيف تعمل.
+سواء كنت تبني معرض صور، تدير قائمة مهام، أو تتابع أعلى النقاط في لعبة، توفر المصفوفات الأساس لتنظيم البيانات. دعونا نرى كيف تعمل.
 
-✅ المصفوفات موجودة في كل مكان! هل يمكنك التفكير في مثال حقيقي على المصفوفة، مثل مصفوفة الألواح الشمسية؟
+✅ المصفوفات موجودة في كل مكان! هل يمكنك التفكير في مثال واقعي لمصفوفة، مثل مصفوفة ألواح شمسية؟
 
 ### إنشاء المصفوفات
 
@@ -47,7 +104,7 @@ const myArray = [];
 ```
 
 **ما الذي يحدث هنا؟**
-لقد أنشأت للتو حاوية فارغة باستخدام تلك الأقواس المربعة `[]`. فكر فيها كأنها رف مكتبة فارغ - جاهز لحمل أي كتب تريد تنظيمها هناك.
+لقد أنشأت للتو حاوية فارغة باستخدام تلك الأقواس المربعة `[]`. فكر فيها كرف مكتبة فارغ - إنه جاهز لحمل أي كتب تريد تنظيمها هناك.
 
 يمكنك أيضًا ملء المصفوفة بقيم أولية من البداية:
 
@@ -64,12 +121,42 @@ const scores = [95, 87, 92, 78, 85];
 
 **أشياء رائعة يجب ملاحظتها:**
 - يمكنك تخزين نصوص، أرقام، أو حتى قيم صحيحة/خاطئة في نفس المصفوفة
-- فقط افصل كل عنصر بفاصلة - الأمر بسيط!
+- فقط افصل بين كل عنصر بفاصلة - بسيط!
 - المصفوفات مثالية للحفاظ على المعلومات ذات الصلة معًا
 
+```mermaid
+flowchart LR
+    A["📦 Arrays"] --> B["Create [ ]"]
+    A --> C["Store Multiple Items"]
+    A --> D["Access by Index"]
+    
+    B --> B1["const arr = []"]
+    B --> B2["const arr = [1,2,3]"]
+    
+    C --> C1["Numbers"]
+    C --> C2["Strings"]
+    C --> C3["Booleans"]
+    C --> C4["Mixed Types"]
+    
+    D --> D1["arr[0] = first"]
+    D --> D2["arr[1] = second"]
+    D --> D3["arr[2] = third"]
+    
+    E["📊 Array Index"] --> E1["Index 0: First"]
+    E --> E2["Index 1: Second"]
+    E --> E3["Index 2: Third"]
+    E --> E4["Index n-1: Last"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+
 ### فهرسة المصفوفات
 
-هناك شيء قد يبدو غير مألوف في البداية: المصفوفات ترقم عناصرها بدءًا من 0، وليس 1. هذا الفهرس الذي يبدأ من الصفر له جذوره في كيفية عمل ذاكرة الكمبيوتر - وهو تقليد برمجي منذ الأيام الأولى للغات البرمجة مثل C. كل موقع في المصفوفة يحصل على رقم عنوان خاص به يسمى **الفهرس**.
+هناك شيء قد يبدو غير مألوف في البداية: المصفوفات ترقم عناصرها بدءًا من 0، وليس 1. هذا الفهرسة القائمة على الصفر لها جذورها في كيفية عمل ذاكرة الكمبيوتر - لقد كانت تقليدًا برمجيًا منذ الأيام الأولى للغات البرمجة مثل C. كل موقع في المصفوفة يحصل على رقم عنوان خاص به يسمى **الفهرس**.
 
 | الفهرس | القيمة | الوصف |
 |-------|-------|-------------|
@@ -79,7 +166,7 @@ const scores = [95, 87, 92, 78, 85];
 | 3 | "Pistachio" | العنصر الرابع |
 | 4 | "Rocky Road" | العنصر الخامس |
 
-✅ هل يفاجئك أن المصفوفات تبدأ بالفهرس صفر؟ في بعض لغات البرمجة، تبدأ الفهارس من 1. هناك تاريخ مثير للاهتمام حول هذا الموضوع، يمكنك [قراءته على ويكيبيديا](https://en.wikipedia.org/wiki/Zero-based_numbering).
+✅ هل يفاجئك أن المصفوفات تبدأ بالفهرس صفر؟ في بعض لغات البرمجة، تبدأ الفهارس من 1. هناك تاريخ مثير للاهتمام حول هذا الموضوع يمكنك [قراءته على ويكيبيديا](https://en.wikipedia.org/wiki/Zero-based_numbering).
 
 **الوصول إلى عناصر المصفوفة:**
 
@@ -116,7 +203,7 @@ console.log(iceCreamFlavors[5]); // "Cookie Dough"
 
 ### طول المصفوفة والطرق الشائعة
 
-تأتي المصفوفات مع خصائص وطرق مدمجة تجعل العمل مع البيانات أسهل بكثير.
+تأتي المصفوفات بخصائص وطرق مدمجة تجعل العمل مع البيانات أسهل بكثير.
 
 **إيجاد طول المصفوفة:**
 
@@ -153,20 +240,87 @@ const hasApple = fruits.includes("apple"); // Returns true
 ```
 
 **فهم هذه الطرق:**
-- **يضيف** عناصر باستخدام `push()` (النهاية) و `unshift()` (البداية)
-- **يزيل** عناصر باستخدام `pop()` (النهاية) و `shift()` (البداية)
-- **يحدد** مواقع العناصر باستخدام `indexOf()` ويتحقق من وجودها باستخدام `includes()`
+- **يضيف** عناصر باستخدام `push()` (النهاية) و`unshift()` (البداية)
+- **يزيل** عناصر باستخدام `pop()` (النهاية) و`shift()` (البداية)
+- **يحدد** العناصر باستخدام `indexOf()` ويتحقق من وجودها باستخدام `includes()`
 - **يعيد** قيمًا مفيدة مثل العناصر المزالة أو مواقع الفهارس
 
-✅ جرب بنفسك! استخدم وحدة التحكم في متصفحك لإنشاء وتعديل مصفوفة من صنعك.
+✅ جرب بنفسك! استخدم وحدة التحكم في متصفحك لإنشاء وتعديل مصفوفة من إنشائك.
+
+### 🧠 **فحص أساسيات المصفوفة: تنظيم بياناتك**
+
+**اختبر فهمك للمصفوفات:**
+- لماذا تعتقد أن المصفوفات تبدأ العد من 0 بدلاً من 1؟
+- ماذا يحدث إذا حاولت الوصول إلى فهرس غير موجود (مثل `arr[100]` في مصفوفة تحتوي على 5 عناصر)؟
+- هل يمكنك التفكير في ثلاثة سيناريوهات واقعية حيث تكون المصفوفات مفيدة؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> EmptyArray: const arr = []
+    EmptyArray --> WithItems: Add elements
+    WithItems --> Accessing: Use indexes
+    Accessing --> Modifying: Change values
+    Modifying --> Processing: Use methods
+    
+    WithItems --> WithItems: push(), unshift()
+    Processing --> Processing: pop(), shift()
+    
+    note right of Accessing
+        Zero-based indexing
+        arr[0] = first element
+    end note
+    
+    note right of Processing
+        Built-in methods
+        Dynamic operations
+    end note
+```
+
+> **رؤية واقعية**: المصفوفات موجودة في كل مكان في البرمجة! خلاصات وسائل التواصل الاجتماعي، سلال التسوق، معارض الصور، قوائم تشغيل الأغاني - كلها مصفوفات خلف الكواليس!
 
 ## الحلقات
 
-فكر في العقوبة الشهيرة في روايات تشارلز ديكنز حيث كان الطلاب يكتبون الجمل مرارًا وتكرارًا على لوح. تخيل لو كان بإمكانك ببساطة أن تطلب من شخص ما "اكتب هذه الجملة 100 مرة" ويتم ذلك تلقائيًا. هذا بالضبط ما تفعله الحلقات في الكود.
+فكر في العقوبة الشهيرة في روايات تشارلز ديكنز حيث كان الطلاب يكتبون الجمل مرارًا وتكرارًا على اللوح. تخيل لو كان بإمكانك ببساطة أن تطلب من شخص ما "اكتب هذه الجملة 100 مرة" ويتم ذلك تلقائيًا. هذا بالضبط ما تفعله الحلقات في الكود الخاص بك.
 
 الحلقات تشبه وجود مساعد لا يكل يمكنه تكرار المهام دون خطأ. سواء كنت بحاجة إلى التحقق من كل عنصر في سلة التسوق أو عرض جميع الصور في ألبوم، فإن الحلقات تتعامل مع التكرار بكفاءة.
 
-يوفر JavaScript عدة أنواع من الحلقات للاختيار من بينها. دعونا نفحص كل نوع ونفهم متى نستخدمه.
+يوفر JavaScript عدة أنواع من الحلقات للاختيار من بينها. دعونا نلقي نظرة على كل نوع ونفهم متى نستخدمه.
+
+```mermaid
+flowchart TD
+    A["🔄 Loop Types"] --> B["For Loop"]
+    A --> C["While Loop"]
+    A --> D["For...of Loop"]
+    A --> E["forEach Method"]
+    
+    B --> B1["Known iterations"]
+    B --> B2["Counter-based"]
+    B --> B3["for(init; condition; increment)"]
+    
+    C --> C1["Unknown iterations"]
+    C --> C2["Condition-based"]
+    C --> C3["while(condition)"]
+    
+    D --> D1["Modern ES6+"]
+    D --> D2["Array iteration"]
+    D --> D3["for(item of array)"]
+    
+    E --> E1["Functional style"]
+    E --> E2["Array method"]
+    E --> E3["array.forEach(callback)"]
+    
+    F["⏰ When to Use"] --> F1["For: Counting, indexes"]
+    F --> F2["While: User input, searching"]
+    F --> F3["For...of: Simple iteration"]
+    F --> F4["forEach: Functional programming"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
 
 ### حلقة For
 
@@ -194,13 +348,40 @@ for (let i = 0; i < testScores.length; i++) {
 ```
 
 **خطوة بخطوة، إليك ما يحدث:**
-- **يهيئ** متغير العداد `i` إلى 0 في البداية
-- **يتحقق** من الشرط `i < 10` قبل كل تكرار
-- **ينفذ** كتلة الكود عندما يكون الشرط صحيحًا
-- **يزيد** `i` بمقدار 1 بعد كل تكرار باستخدام `i++`
-- **يتوقف** عندما يصبح الشرط خاطئًا (عندما يصل `i` إلى 10)
+- **تهيئة** متغير العداد `i` إلى 0 في البداية
+- **التحقق** من الشرط `i < 10` قبل كل تكرار
+- **تنفيذ** كتلة الكود عندما يكون الشرط صحيحًا
+- **زيادة** قيمة `i` بمقدار 1 بعد كل تكرار باستخدام `i++`
+- **التوقف** عندما يصبح الشرط خاطئًا (عندما يصل `i` إلى 10)
+
+✅ قم بتشغيل هذا الكود في وحدة التحكم في المتصفح. ماذا يحدث عندما تقوم بإجراء تغييرات صغيرة على العداد، الشرط، أو تعبير التكرار؟ هل يمكنك جعله يعمل بالعكس، مما ينشئ عد تنازلي؟
+
+### 🗓️ **فحص إتقان حلقة For: التكرار المنضبط**
+
+**قيّم فهمك لحلقة for:**
+- ما هي الأجزاء الثلاثة لحلقة for، وما وظيفة كل منها؟
+- كيف يمكنك تكرار المصفوفة بالعكس؟
+- ماذا يحدث إذا نسيت جزء الزيادة (`i++`)؟
+
+```mermaid
+flowchart TD
+    A["🚀 Start For Loop"] --> B["Initialize: let i = 0"]
+    B --> C{"Condition: i < array.length?"}
+    C -->|true| D["Execute code block"]
+    D --> E["Increment: i++"]
+    E --> C
+    C -->|false| F["✅ Exit loop"]
+    
+    G["📋 Common Patterns"] --> G1["for(let i=0; i<n; i++)"]
+    G --> G2["for(let i=n-1; i>=0; i--)"]
+    G --> G3["for(let i=0; i<arr.length; i+=2)"]
+    
+    style A fill:#e3f2fd
+    style F fill:#e8f5e8
+    style G fill:#fff3e0
+```
 
-✅ قم بتشغيل هذا الكود في وحدة التحكم في المتصفح. ماذا يحدث عندما تقوم بإجراء تغييرات صغيرة على العداد أو الشرط أو تعبير التكرار؟ هل يمكنك جعله يعمل بالعكس، مما ينشئ عد تنازلي؟
+> **حكمة الحلقات**: الحلقات من نوع for مثالية عندما تعرف بالضبط عدد المرات التي تحتاج فيها إلى تكرار شيء ما. إنها الخيار الأكثر شيوعًا لمعالجة المصفوفات!
 
 ### حلقة While
 
@@ -210,7 +391,7 @@ for (let i = 0; i < testScores.length; i++) {
 - **تستمر** في التنفيذ طالما أن الشرط صحيح
 - **تتطلب** إدارة يدوية لأي متغيرات عداد
 - **تتحقق** من الشرط قبل كل تكرار
-- **تخاطر** بحلقات لا نهائية إذا لم يصبح الشرط خاطئًا أبدًا
+- **تخاطر** بالحلقات اللانهائية إذا لم يصبح الشرط خاطئًا أبدًا
 
 ```javascript
 // Basic counting example
@@ -236,14 +417,48 @@ if (attempts >= maxAttempts) {
 ```
 
 **فهم هذه الأمثلة:**
-- **يدير** متغير العداد `i` يدويًا داخل جسم الحلقة
-- **يزيد** العداد لمنع الحلقات اللانهائية
-- **يوضح** حالة استخدام عملية مع إدخال المستخدم وتحديد المحاولات
-- **يتضمن** آليات أمان لمنع التنفيذ اللامتناهي
+- **تدير** متغير العداد `i` يدويًا داخل جسم الحلقة
+- **تزيد** العداد لمنع الحلقات اللانهائية
+- **توضح** حالة استخدام عملية مع إدخال المستخدم وتحديد المحاولات
+- **تتضمن** آليات أمان لمنع التنفيذ اللامتناهي
+
+### ♾️ **فحص حكمة حلقة While: التكرار القائم على الشرط**
+
+**اختبر فهمك لحلقات while:**
+- ما هو الخطر الرئيسي عند استخدام حلقات while؟
+- متى تختار حلقة while بدلاً من حلقة for؟
+- كيف يمكنك منع الحلقات اللانهائية؟
+
+```mermaid
+flowchart LR
+    A["🔄 While vs For"] --> B["While Loop"]
+    A --> C["For Loop"]
+    
+    B --> B1["Unknown iterations"]
+    B --> B2["Condition-driven"]
+    B --> B3["User input, searching"]
+    B --> B4["⚠️ Risk: infinite loops"]
+    
+    C --> C1["Known iterations"]
+    C --> C2["Counter-driven"]
+    C --> C3["Array processing"]
+    C --> C4["✅ Safe: predictable end"]
+    
+    D["🛡️ Safety Tips"] --> D1["Always modify condition variable"]
+    D --> D2["Include escape conditions"]
+    D --> D3["Set maximum iteration limits"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+```
 
-### البدائل الحديثة للحلقات
+> **السلامة أولاً**: حلقات while قوية ولكنها تتطلب إدارة دقيقة للشرط. تأكد دائمًا من أن شرط الحلقة سيصبح خاطئًا في النهاية!
 
-يوفر JavaScript بناء جملة حديث للحلقات يمكن أن يجعل الكود الخاص بك أكثر قابلية للقراءة وأقل عرضة للأخطاء.
+### بدائل الحلقات الحديثة
+
+يوفر JavaScript صياغة حلقات حديثة يمكن أن تجعل الكود الخاص بك أكثر وضوحًا وأقل عرضة للأخطاء.
 
 **حلقة For...of (ES6+):**
 
@@ -261,10 +476,10 @@ for (let i = 0; i < colors.length; i++) {
 }
 ```
 
-**المزايا الرئيسية لـ For...of:**
-- **يلغي** إدارة الفهارس وأخطاء الفهرس
-- **يوفر** وصولًا مباشرًا إلى عناصر المصفوفة
-- **يحسن** قابلية قراءة الكود ويقلل من تعقيد بناء الجملة
+**المزايا الرئيسية لحلقة for...of:**
+- **تلغي** إدارة الفهرس وأخطاء الفهرسة
+- **توفر** الوصول المباشر لعناصر المصفوفة
+- **تحسن** وضوح الكود وتقلل من تعقيد الصياغة
 
 **طريقة forEach:**
 
@@ -281,16 +496,42 @@ prices.forEach(price => console.log(`Price: $${price}`));
 ```
 
 **ما تحتاج إلى معرفته عن forEach:**
-- **ينفذ** وظيفة لكل عنصر في المصفوفة
-- **يوفر** قيمة العنصر والفهرس كمعلمات
-- **لا يمكن** إيقافه مبكرًا (على عكس الحلقات التقليدية)
-- **يعيد** undefined (لا ينشئ مصفوفة جديدة)
+- **تنفذ** وظيفة لكل عنصر في المصفوفة
+- **توفر** قيمة العنصر والفهرس كمعلمات
+- **لا يمكن** إيقافها مبكرًا (على عكس الحلقات التقليدية)
+- **تعيد** undefined (لا تنشئ مصفوفة جديدة)
 
 ✅ لماذا تختار حلقة for مقابل حلقة while؟ 17 ألف مشاهد كان لديهم نفس السؤال على StackOverflow، وبعض الآراء [قد تكون مثيرة للاهتمام بالنسبة لك](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
 
+### 🎨 **فحص صياغة الحلقات الحديثة: تبني ES6+**
+
+**قيّم فهمك للبرمجة الحديثة في JavaScript:**
+- ما هي مزايا `for...of` مقارنة بالحلقات التقليدية؟
+- متى قد تفضل الحلقات التقليدية؟
+- ما الفرق بين `forEach` و`map`؟
+
+```mermaid
+quadrantChart
+    title Loop Selection Guide
+    x-axis Traditional --> Modern
+    y-axis Simple --> Complex
+    quadrant-1 Modern Complex
+    quadrant-2 Traditional Complex
+    quadrant-3 Traditional Simple
+    quadrant-4 Modern Simple
+    
+    Traditional For: [0.2, 0.7]
+    While Loop: [0.3, 0.6]
+    For...of: [0.8, 0.3]
+    forEach: [0.9, 0.4]
+    Array Methods: [0.8, 0.8]
+```
+
+> **الاتجاه الحديث**: صياغة ES6+ مثل `for...of` و`forEach` أصبحت النهج المفضل لتكرار المصفوفات لأنها أكثر وضوحًا وأقل عرضة للأخطاء!
+
 ## الحلقات والمصفوفات
 
-دمج المصفوفات مع الحلقات يخلق قدرات معالجة بيانات قوية. هذا الاقتران أساسي للعديد من المهام البرمجية، من عرض القوائم إلى حساب الإحصائيات.
+دمج المصفوفات مع الحلقات يخلق قدرات قوية لمعالجة البيانات. هذا الاقتران أساسي للعديد من مهام البرمجة، من عرض القوائم إلى حساب الإحصائيات.
 
 **معالجة المصفوفات التقليدية:**
 
@@ -311,7 +552,7 @@ for (const flavor of iceCreamFlavors) {
 **دعونا نفهم كل نهج:**
 - **يستخدم** خاصية طول المصفوفة لتحديد حدود الحلقة
 - **يصل** إلى العناصر بواسطة الفهرس في الحلقات التقليدية
-- **يوفر** وصولًا مباشرًا للعناصر في حلقات For...of
+- **يوفر** الوصول المباشر للعناصر في الحلقات من نوع for...of
 - **يعالج** كل عنصر في المصفوفة مرة واحدة بالضبط
 
 **مثال عملي لمعالجة البيانات:**
@@ -342,46 +583,176 @@ console.log(`Highest: ${highestGrade}`);
 console.log(`Lowest: ${lowestGrade}`);
 ```
 
-**إليك كيفية عمل هذا الكود:**
-- **يهيئ** متغيرات التتبع للمجموع والقيم القصوى
+**إليك كيف يعمل هذا الكود:**
+- **يهيئ** متغيرات التتبع للمجموع والقيم القصوى والدنيا
 - **يعالج** كل درجة باستخدام حلقة واحدة فعالة
 - **يجمع** الإجمالي لحساب المتوسط
 - **يتتبع** أعلى وأدنى القيم أثناء التكرار
-- **يحسب** الإحصائيات النهائية بعد اكتمال الحلقة
-
-✅ جرب التكرار على مصفوفة من صنعك في وحدة التحكم في المتصفح.
+- **يحسب** الإحصائيات النهائية بعد انتهاء الحلقة
+
+✅ جرب التكرار على مصفوفة من إنشائك في وحدة التحكم في المتصفح.
+
+```mermaid
+flowchart TD
+    A["📦 Array Data"] --> B["🔄 Loop Processing"]
+    B --> C["📈 Results"]
+    
+    A1["[85, 92, 78, 96, 88]"] --> A
+    
+    B --> B1["Calculate total"]
+    B --> B2["Find min/max"]
+    B --> B3["Count conditions"]
+    B --> B4["Transform data"]
+    
+    C --> C1["Average: 87.8"]
+    C --> C2["Highest: 96"]
+    C --> C3["Passing: 5/5"]
+    C --> C4["Letter grades"]
+    
+    D["⚡ Processing Patterns"] --> D1["Accumulation (sum)"]
+    D --> D2["Comparison (min/max)"]
+    D --> D3["Filtering (conditions)"]
+    D --> D4["Mapping (transformation)"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#f3e5f5
+```
 
 ---
 
 ## تحدي GitHub Copilot Agent 🚀
 
-استخدم وضع الوكيل لإكمال التحدي التالي:
+استخدم وضع Agent لإكمال التحدي التالي:
 
-**الوصف:** قم ببناء وظيفة معالجة بيانات شاملة تجمع بين المصفوفات والحلقات لتحليل مجموعة بيانات وتوليد رؤى مفيدة.
+**الوصف:** قم ببناء وظيفة شاملة لمعالجة البيانات تجمع بين المصفوفات والحلقات لتحليل مجموعة بيانات وتوليد رؤى مفيدة.
 
-**المهمة:** أنشئ وظيفة تسمى `analyzeGrades` تأخذ مصفوفة من كائنات درجات الطلاب (كل منها يحتوي على خصائص الاسم والدرجة) وتعيد كائنًا يحتوي على إحصائيات تشمل أعلى درجة، أدنى درجة، متوسط الدرجات، عدد الطلاب الذين اجتازوا (درجة >= 70)، ومصفوفة بأسماء الطلاب الذين حصلوا على درجات أعلى من المتوسط. استخدم نوعين مختلفين على الأقل من الحلقات في الحل.
+**المهمة:** قم بإنشاء وظيفة تسمى `analyzeGrades` تأخذ مصفوفة من كائنات درجات الطلاب (كل منها يحتوي على خصائص الاسم والدرجة) وتعيد كائنًا يحتوي على إحصائيات تشمل أعلى درجة، أدنى درجة، متوسط الدرجة، عدد الطلاب الذين اجتازوا (درجة >= 70)، ومصفوفة بأسماء الطلاب الذين حصلوا على درجات أعلى من المتوسط. استخدم على الأقل نوعين مختلفين من الحلقات في الحل.
 
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## 🚀 التحدي
+تقدم JavaScript العديد من الطرق الحديثة للتعامل مع المصفوفات التي يمكن أن تحل محل الحلقات التقليدية لأداء مهام محددة. استكشف [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)، [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of)، [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)، [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)، و [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce).
 
-يقدم JavaScript عدة طرق حديثة للمصفوفات يمكن أن تحل محل الحلقات التقليدية لمهام محددة. استكشف [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)، [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of)، [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)، [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)، و [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). 
-
-**تحديك:** أعد صياغة مثال درجات الطلاب باستخدام ثلاث طرق مختلفة على الأقل للمصفوفات. لاحظ كيف يصبح الكود أكثر نظافة وقابلية للقراءة باستخدام بناء الجملة الحديث لـ JavaScript.
+**تحديك:** قم بإعادة كتابة مثال درجات الطلاب باستخدام ثلاثة طرق مختلفة على الأقل من طرق المصفوفات. لاحظ كيف يصبح الكود أكثر وضوحًا وسهولة في القراءة باستخدام صياغة JavaScript الحديثة.
 
 ## اختبار ما بعد المحاضرة
 [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/14)
 
-
 ## المراجعة والدراسة الذاتية
 
-المصفوفات في JavaScript لديها العديد من الطرق المرتبطة بها، والتي تكون مفيدة للغاية لمعالجة البيانات. [اقرأ عن هذه الطرق](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) وجرب بعضها (مثل push، pop، slice و splice) على مصفوفة من صنعك.
+تحتوي المصفوفات في JavaScript على العديد من الطرق المفيدة جدًا لمعالجة البيانات. [اقرأ عن هذه الطرق](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) وجرب بعضها (مثل push، pop، slice و splice) على مصفوفة من إنشائك.
 
 ## الواجب
 
-[تكرار مصفوفة](assignment.md)
+[حلقة على مصفوفة](assignment.md)
+
+---
+
+## 📊 **ملخص أدواتك للمصفوفات والحلقات**
+
+```mermaid
+graph TD
+    A["🎯 Arrays & Loops Mastery"] --> B["📦 Array Fundamentals"]
+    A --> C["🔄 Loop Types"]
+    A --> D["🔗 Data Processing"]
+    A --> E["🎨 Modern Techniques"]
+    
+    B --> B1["Creation: [ ]"]
+    B --> B2["Indexing: arr[0]"]
+    B --> B3["Methods: push, pop"]
+    B --> B4["Properties: length"]
+    
+    C --> C1["For: Known iterations"]
+    C --> C2["While: Condition-based"]
+    C --> C3["For...of: Direct access"]
+    C --> C4["forEach: Functional"]
+    
+    D --> D1["Statistics calculation"]
+    D --> D2["Data transformation"]
+    D --> D3["Filtering & searching"]
+    D --> D4["Real-time processing"]
+    
+    E --> E1["Arrow functions"]
+    E --> E2["Method chaining"]
+    E --> E3["Destructuring"]
+    E --> E4["Template literals"]
+    
+    F["💡 Key Benefits"] --> F1["Efficient data handling"]
+    F --> F2["Reduced code repetition"]
+    F --> F3["Scalable solutions"]
+    F --> F4["Cleaner syntax"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 جدولك الزمني لإتقان المصفوفات والحلقات
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] أنشئ مصفوفة لأفلامك المفضلة وقم بالوصول إلى عناصر محددة
+- [ ] اكتب حلقة for تعد من 1 إلى 10
+- [ ] جرب تحدي الطرق الحديثة للمصفوفات من الدرس
+- [ ] تدرب على فهرسة المصفوفات في وحدة التحكم بالمتصفح
+
+### 🎯 **ما يمكنك إنجازه خلال هذه الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وراجع أي مفاهيم صعبة
+- [ ] قم ببناء محلل شامل للدرجات من تحدي GitHub Copilot
+- [ ] أنشئ عربة تسوق بسيطة تضيف وتزيل العناصر
+- [ ] تدرب على التحويل بين أنواع الحلقات المختلفة
+- [ ] جرب طرق المصفوفات مثل `push`، `pop`، `slice`، و `splice`
+
+### 📅 **رحلة معالجة البيانات لمدة أسبوع**
+- [ ] أكمل واجب "حلقة على مصفوفة" مع تحسينات إبداعية
+- [ ] قم ببناء تطبيق قائمة مهام باستخدام المصفوفات والحلقات
+- [ ] أنشئ آلة حاسبة بسيطة للإحصائيات للبيانات الرقمية
+- [ ] تدرب باستخدام [طرق المصفوفات في MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)
+- [ ] قم ببناء واجهة معرض صور أو قائمة تشغيل موسيقية
+- [ ] استكشف البرمجة الوظيفية باستخدام `map`، `filter`، و `reduce`
+
+### 🌟 **تحولك خلال شهر**
+- [ ] إتقان العمليات المتقدمة على المصفوفات وتحسين الأداء
+- [ ] قم ببناء لوحة تحكم كاملة لتصور البيانات
+- [ ] ساهم في مشاريع مفتوحة المصدر تتعلق بمعالجة البيانات
+- [ ] علم شخصًا آخر عن المصفوفات والحلقات باستخدام أمثلة عملية
+- [ ] أنشئ مكتبة شخصية لوظائف معالجة البيانات القابلة لإعادة الاستخدام
+- [ ] استكشف الخوارزميات وهياكل البيانات المبنية على المصفوفات
+
+### 🏆 **تسجيل الوصول النهائي لبطل معالجة البيانات**
+
+**احتفل بإتقانك للمصفوفات والحلقات:**
+- ما هي العملية الأكثر فائدة على المصفوفات التي تعلمتها للتطبيقات الواقعية؟
+- أي نوع من الحلقات يبدو أكثر طبيعية بالنسبة لك ولماذا؟
+- كيف غير فهمك للمصفوفات والحلقات نهجك في تنظيم البيانات؟
+- ما هي مهمة معالجة البيانات المعقدة التي ترغب في التعامل معها بعد ذلك؟
+
+```mermaid
+journey
+    title Your Data Processing Evolution
+    section Today
+      Array Confusion: 3: You
+      Loop Basics: 4: You
+      Index Understanding: 5: You
+    section This Week
+      Method Mastery: 4: You
+      Efficient Processing: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Complex Algorithms: 5: You
+      Performance Optimization: 5: You
+      Teaching Others: 5: You
+```
+
+> 📦 **لقد أطلقت العنان لقوة تنظيم ومعالجة البيانات!** المصفوفات والحلقات هي أساس كل تطبيق تقريبًا ستقوم ببنائه. من القوائم البسيطة إلى تحليل البيانات المعقد، لديك الآن الأدوات اللازمة للتعامل مع المعلومات بكفاءة وأناقة. تعتمد كل مواقع الويب الديناميكية، التطبيقات المحمولة، والتطبيقات القائمة على البيانات على هذه المفاهيم الأساسية. مرحبًا بك في عالم معالجة البيانات القابلة للتوسع! 🎉
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/3-terrarium/1-intro-to-html/README.md b/translations/ar/3-terrarium/1-intro-to-html/README.md
index 4f53703b38..979333e563 100644
--- a/translations/ar/3-terrarium/1-intro-to-html/README.md
+++ b/translations/ar/3-terrarium/1-intro-to-html/README.md
@@ -1,22 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "20c72cf2e5b0050d38ca3cb14a75a9df",
-  "translation_date": "2025-10-22T14:17:56+00:00",
+  "original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
+  "translation_date": "2025-11-03T12:37:37+00:00",
   "source_file": "3-terrarium/1-intro-to-html/README.md",
   "language_code": "ar"
 }
 -->
 # مشروع التيراريوم الجزء الأول: مقدمة إلى HTML
 
+```mermaid
+journey
+    title Your HTML Learning Journey
+    section Foundation
+      Create HTML file: 3: Student
+      Add DOCTYPE: 4: Student
+      Structure document: 5: Student
+    section Content
+      Add metadata: 4: Student
+      Include images: 5: Student
+      Organize layout: 5: Student
+    section Semantics
+      Use proper tags: 4: Student
+      Enhance accessibility: 5: Student
+      Build terrarium: 5: Student
+```
+
 ![مقدمة إلى HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ar.png)
 > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
 
-HTML، أو لغة ترميز النص التشعبي، هي الأساس لكل موقع ويب قمت بزيارته. فكر في HTML كهيكل عظمي يمنح الصفحات الإلكترونية بنيتها – فهو يحدد مكان المحتوى، وكيفية تنظيمه، وما الذي يمثله كل جزء. بينما ستقوم CSS لاحقًا "بتزيين" HTML بالألوان والتصميمات، وستجعل JavaScript الصفحات تفاعلية، فإن HTML يوفر الهيكل الأساسي الذي يجعل كل شيء ممكنًا.
-
-في هذا الدرس، ستقوم بإنشاء هيكل HTML لواجهة تيراريوم افتراضية. هذا المشروع العملي سيعلمك مفاهيم HTML الأساسية أثناء بناء شيء جذاب بصريًا. ستتعلم كيفية تنظيم المحتوى باستخدام العناصر الدلالية، العمل مع الصور، وإنشاء الأساس لتطبيق ويب تفاعلي.
-
-بنهاية هذا الدرس، سيكون لديك صفحة HTML تعمل تعرض صور النباتات في أعمدة منظمة، جاهزة للتصميم في الدرس التالي. لا تقلق إذا بدا الأمر بسيطًا في البداية – هذا بالضبط ما يجب أن تفعله HTML قبل أن تضيف CSS اللمسات البصرية.
+HTML، أو لغة ترميز النص التشعبي، هي الأساس لكل موقع ويب قمت بزيارته. فكر في HTML كهيكل عظمي يمنح الصفحات الإلكترونية بنيتها – فهو يحدد مكان المحتوى، وكيف يتم تنظيمه، وما الذي يمثله كل جزء. بينما ستقوم CSS لاحقًا "بتزيين" HTML بالألوان والتصميمات، وستجعل JavaScript الصفحات تفاعلية، فإن HTML يوفر الهيكل الأساسي الذي يجعل كل شيء ممكنًا.
+
+في هذا الدرس، ستقوم بإنشاء هيكل HTML لواجهة تيراريوم افتراضية. هذا المشروع العملي سيعلمك مفاهيم HTML الأساسية أثناء بناء شيء جذاب بصريًا. ستتعلم كيفية تنظيم المحتوى باستخدام العناصر الدلالية، والعمل مع الصور، وإنشاء الأساس لتطبيق ويب تفاعلي.
+
+بنهاية هذا الدرس، سيكون لديك صفحة HTML تعمل وتعرض صور النباتات في أعمدة منظمة، جاهزة للتصميم في الدرس التالي. لا تقلق إذا بدا الأمر بسيطًا في البداية – هذا بالضبط ما يجب أن يكون عليه HTML قبل أن تضيف CSS اللمسات الجمالية.
+
+```mermaid
+mindmap
+  root((HTML Fundamentals))
+    Structure
+      DOCTYPE Declaration
+      HTML Element
+      Head Section
+      Body Content
+    Elements
+      Tags & Attributes
+      Self-closing Tags
+      Nested Elements
+      Block vs Inline
+    Content
+      Text Elements
+      Images
+      Containers (div)
+      Lists
+    Semantics
+      Meaningful Tags
+      Accessibility
+      Screen Readers
+      SEO Benefits
+    Best Practices
+      Proper Nesting
+      Valid Markup
+      Descriptive Alt Text
+      Organized Structure
+```
 
 ## اختبار ما قبل المحاضرة
 
@@ -37,11 +84,11 @@ HTML، أو لغة ترميز النص التشعبي، هي الأساس لكل
 **الخيار الأول: باستخدام Visual Studio Code**
 1. افتح Visual Studio Code
 2. انقر على "File" → "Open Folder" أو استخدم `Ctrl+K, Ctrl+O` (Windows/Linux) أو `Cmd+K, Cmd+O` (Mac)
-3. أنشئ مجلدًا جديدًا باسم `terrarium` واختره
+3. قم بإنشاء مجلد جديد باسم `terrarium` واختره
 4. في لوحة Explorer، انقر على أيقونة "New File"
-5. قم بتسمية الملف `index.html`
+5. قم بتسمية ملفك `index.html`
 
-![VS Code Explorer يظهر إنشاء ملف جديد](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ar.png)
+![مستكشف VS Code يظهر إنشاء ملف جديد](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ar.png)
 
 **الخيار الثاني: باستخدام أوامر الطرفية**
 ```bash
@@ -61,9 +108,27 @@ code index.html
 
 ## فهم هيكل مستند HTML
 
-كل مستند HTML يتبع هيكلًا محددًا تحتاجه المتصفحات لفهمه وعرضه بشكل صحيح. فكر في هذا الهيكل كرسالة رسمية – تحتوي على عناصر مطلوبة بترتيب معين تساعد المتصفح (المستلم) على معالجة المحتوى بشكل صحيح.
+يتبع كل مستند HTML هيكلًا محددًا تحتاجه المتصفحات لفهمه وعرضه بشكل صحيح. فكر في هذا الهيكل كرسالة رسمية – تحتوي على عناصر مطلوبة بترتيب معين تساعد المتصفح (المستلم في هذه الحالة) على معالجة المحتوى بشكل صحيح.
+
+```mermaid
+flowchart TD
+    A["<!DOCTYPE html>"] --> B["<html>"]
+    B --> C["<head>"]
+    C --> D["<title>"]
+    C --> E["<meta charset>"]
+    C --> F["<meta viewport>"]
+    B --> G["<body>"]
+    G --> H["<h1> Heading"]
+    G --> I["<div> Containers"]
+    G --> J["<img> Images"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style C fill:#fff3e0
+    style G fill:#e8f5e8
+```
 
-لنبدأ بإضافة الأساسيات التي يحتاجها كل مستند HTML.
+لنبدأ بإضافة الأساس الضروري الذي يحتاجه كل مستند HTML.
 
 ### إعلان DOCTYPE والعنصر الجذر
 
@@ -82,17 +147,25 @@ code index.html
 
 > 💡 **نصيحة VS Code**: قم بالمرور فوق أي علامة HTML في VS Code لرؤية معلومات مفيدة من MDN Web Docs، بما في ذلك أمثلة الاستخدام وتفاصيل توافق المتصفح.
 
-> 📚 **تعلم المزيد**: إعلان DOCTYPE يمنع المتصفحات من الدخول في "وضع الغرائب"، الذي كان يُستخدم لدعم مواقع الويب القديمة جدًا. يستخدم تطوير الويب الحديث الإعلان البسيط `<!DOCTYPE html>` لضمان [عرض متوافق مع المعايير](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
+> 📚 **تعلم المزيد**: إعلان DOCTYPE يمنع المتصفحات من الدخول في "وضع quirks"، الذي كان يُستخدم لدعم مواقع الويب القديمة جدًا. يستخدم تطوير الويب الحديث الإعلان البسيط `<!DOCTYPE html>` لضمان [عرض متوافق مع المعايير](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
+
+### 🔄 **توقف تربوي**
+**توقف وتأمل**: قبل المتابعة، تأكد من أنك تفهم:
+- ✅ لماذا يحتاج كل مستند HTML إلى إعلان DOCTYPE
+- ✅ ما الذي يحتويه العنصر الجذر `<html>`
+- ✅ كيف يساعد هذا الهيكل المتصفحات على عرض الصفحات بشكل صحيح
+
+**اختبار ذاتي سريع**: هل يمكنك شرح ما يعنيه "عرض متوافق مع المعايير" بكلماتك الخاصة؟
 
 ## إضافة بيانات وصفية أساسية للمستند
 
 قسم `<head>` في مستند HTML يحتوي على معلومات مهمة تحتاجها المتصفحات ومحركات البحث، ولكن لا يراها الزوار مباشرة على الصفحة. فكر فيه كـ "معلومات خلف الكواليس" التي تساعد صفحتك على العمل بشكل صحيح والظهور بشكل صحيح عبر الأجهزة والمنصات المختلفة.
 
-هذه البيانات الوصفية تخبر المتصفحات كيفية عرض صفحتك، أي ترميز الأحرف الذي يجب استخدامه، وكيفية التعامل مع أحجام الشاشات المختلفة – كل ذلك ضروري لإنشاء صفحات ويب احترافية وسهلة الوصول.
+تخبر هذه البيانات الوصفية المتصفحات كيفية عرض صفحتك، وما هي ترميز الأحرف التي يجب استخدامها، وكيفية التعامل مع أحجام الشاشات المختلفة – كل ذلك ضروري لإنشاء صفحات ويب احترافية وسهلة الوصول.
 
 ### المهمة: إضافة رأس المستند
 
-أضف هذا القسم `<head>` بين علامات `<html>` الافتتاحية والختامية:
+أضف قسم `<head>` هذا بين علامات الفتح والإغلاق `<html>`:
 
 ```html
 <head>
@@ -103,14 +176,14 @@ code index.html
 </head>
 ```
 
-**تفصيل ما يفعله كل عنصر:**
+**تفصيل ما يحققه كل عنصر:**
 - **يحدد** عنوان الصفحة الذي يظهر في علامات تبويب المتصفح ونتائج البحث
 - **يحدد** ترميز الأحرف UTF-8 لعرض النص بشكل صحيح عالميًا
 - **يضمن** التوافق مع الإصدارات الحديثة من Internet Explorer
-- **يُعد** التصميم المتجاوب عن طريق ضبط العرض ليتناسب مع عرض الجهاز
+- **يُعد** التصميم المتجاوب من خلال ضبط نافذة العرض لتتناسب مع عرض الجهاز
 - **يتحكم** في مستوى التكبير الأولي لعرض المحتوى بالحجم الطبيعي
 
-> 🤔 **فكر في هذا**: ماذا سيحدث إذا قمت بتعيين علامة meta للعرض مثل هذه: `<meta name="viewport" content="width=600">`؟ هذا سيجبر الصفحة على أن تكون دائمًا بعرض 600 بكسل، مما يكسر التصميم المتجاوب! تعرف على المزيد حول [تكوين العرض بشكل صحيح](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
+> 🤔 **فكر في هذا**: ماذا سيحدث إذا قمت بتعيين علامة meta للنافذة مثل هذه: `<meta name="viewport" content="width=600">`؟ سيؤدي ذلك إلى إجبار الصفحة على أن تكون دائمًا بعرض 600 بكسل، مما يفسد التصميم المتجاوب! تعرف على المزيد حول [تكوين النافذة بشكل صحيح](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
 
 ## بناء جسم المستند
 
@@ -120,7 +193,7 @@ code index.html
 
 ### فهم هيكل علامات HTML
 
-تستخدم HTML علامات مزدوجة لتعريف العناصر. معظم العلامات تحتوي على علامة افتتاحية مثل `<p>` وعلامة إغلاق مثل `</p>`، مع محتوى بينهما: `<p>Hello, world!</p>`. هذا ينشئ عنصر فقرة يحتوي على النص "Hello, world!".
+تستخدم HTML علامات مزدوجة لتعريف العناصر. تحتوي معظم العلامات على علامة فتح مثل `<p>` وعلامة إغلاق مثل `</p>`، مع محتوى بينهما: `<p>مرحبًا، العالم!</p>`. هذا ينشئ عنصر فقرة يحتوي على النص "مرحبًا، العالم!".
 
 ### المهمة: إضافة عنصر الجسم
 
@@ -149,12 +222,12 @@ code index.html
 
 ### العمل مع الصور وحاويات التخطيط
 
-الصور لها خصوصية في HTML لأنها تستخدم علامات "مغلقة ذاتيًا". على عكس العناصر مثل `<p></p>` التي تحيط بالمحتوى، تحتوي علامة `<img>` على كل المعلومات التي تحتاجها داخل العلامة نفسها باستخدام سمات مثل `src` لمسار ملف الصورة و`alt` للوصول.
+الصور لها خصوصية في HTML لأنها تستخدم علامات "مغلقة ذاتيًا". على عكس العناصر مثل `<p></p>` التي تحيط بالمحتوى، تحتوي علامة `<img>` على كل المعلومات التي تحتاجها داخل العلامة نفسها باستخدام سمات مثل `src` لمسار ملف الصورة و`alt` لإمكانية الوصول.
 
 قبل إضافة الصور إلى HTML الخاص بك، ستحتاج إلى تنظيم ملفات مشروعك بشكل صحيح عن طريق إنشاء مجلد للصور وإضافة الرسومات النباتية.
 
 **أولاً، قم بإعداد الصور:**
-1. أنشئ مجلدًا باسم `images` داخل مجلد مشروع التيراريوم الخاص بك
+1. قم بإنشاء مجلد باسم `images` داخل مجلد مشروع التيراريوم الخاص بك
 2. قم بتنزيل صور النباتات من [مجلد الحل](../../../../3-terrarium/solution/images) (14 صورة نباتية إجمالاً)
 3. انسخ جميع صور النباتات إلى مجلد `images` الجديد الخاص بك
 
@@ -215,60 +288,104 @@ code index.html
 
 **خطوة بخطوة، ما الذي يحدث في هذا الكود:**
 - **يُنشئ** حاوية الصفحة الرئيسية بـ `id="page"` لاحتواء كل المحتوى
-- **يُحدد** حاويتين للعمودين: `left-container` و`right-container`
-- **يُنظم** 7 نباتات في العمود الأيسر و7 نباتات في العمود الأيمن
+- **يُنشئ** حاويتين للعمودين: `left-container` و`right-container`
+- **ينظم** 7 نباتات في العمود الأيسر و7 نباتات في العمود الأيمن
 - **يُغلف** كل صورة نباتية في div باسم `plant-holder` لتحديد موضعها الفردي
 - **يُطبق** أسماء فئات متسقة لتصميم CSS في الدرس التالي
 - **يُعين** معرفات فريدة لكل صورة نباتية لتفاعل JavaScript لاحقًا
 - **يتضمن** مسارات ملفات صحيحة تشير إلى مجلد الصور
 
-> 🤔 **فكر في هذا**: لاحظ أن جميع الصور حاليًا تحتوي على نفس النص البديل "plant". هذا ليس مثاليًا للوصول. سيستمع مستخدمو قارئات الشاشة إلى "plant" مكررًا 14 مرة دون معرفة أي نبات يظهر كل صورة. هل يمكنك التفكير في نص بديل أفضل وأكثر وصفًا لكل صورة؟
-
-> 📝 **أنواع عناصر HTML**: عناصر `<div>` هي "على مستوى الكتلة" وتشغل العرض الكامل، بينما عناصر `<span>` هي "على مستوى السطر" وتشغل العرض اللازم فقط. ماذا تعتقد سيحدث إذا قمت بتغيير جميع علامات `<div>` إلى علامات `<span>`؟
-
-مع إضافة هذا الترميز، ستظهر النباتات على الشاشة، على الرغم من أنها لن تبدو مصقولة بعد – هذا ما ستفعله CSS في الدرس التالي! في الوقت الحالي، لديك أساس HTML قوي ينظم المحتوى بشكل صحيح ويتبع أفضل ممارسات الوصول.
-
-## استخدام HTML الدلالي للوصول
-
-HTML الدلالي يعني اختيار عناصر HTML بناءً على معناها وغرضها، وليس فقط مظهرها. عندما تستخدم الترميز الدلالي، فإنك توصل هيكل ومعنى المحتوى الخاص بك إلى المتصفحات، ومحركات البحث، والتقنيات المساعدة مثل قارئات الشاشة.
+> 🤔 **فكر في هذا**: لاحظ أن جميع الصور حاليًا تحتوي على نفس النص البديل "plant". هذا ليس مثاليًا لإمكانية الوصول. سيستمع مستخدمو قارئات الشاشة إلى "plant" مكررًا 14 مرة دون معرفة أي نبات يظهر كل صورة. هل يمكنك التفكير في نص بديل أفضل وأكثر وصفًا لكل صورة؟
+
+> 📝 **أنواع عناصر HTML**: عناصر `<div>` هي "مستوى الكتلة" وتشغل العرض الكامل، بينما عناصر `<span>` هي "مستوى السطر" وتشغل العرض اللازم فقط. ماذا تعتقد سيحدث إذا قمت بتغيير جميع علامات `<div>` إلى علامات `<span>`؟
+
+### 🔄 **توقف تربوي**
+**فهم الهيكل**: خذ لحظة لمراجعة هيكل HTML الخاص بك:
+- ✅ هل يمكنك تحديد الحاويات الرئيسية في تخطيطك؟
+- ✅ هل تفهم لماذا تحتوي كل صورة على معرف فريد؟
+- ✅ كيف تصف الغرض من divs `plant-holder`؟
+
+**فحص بصري**: افتح ملف HTML الخاص بك في المتصفح. يجب أن ترى:
+- قائمة أساسية لصور النباتات
+- صور منظمة في عمودين
+- تخطيط بسيط وغير مصمم
+
+**تذكر**: هذا المظهر البسيط هو بالضبط ما يجب أن يبدو عليه HTML قبل تصميم CSS!
+
+مع إضافة هذا الترميز، ستظهر النباتات على الشاشة، على الرغم من أنها لن تبدو مصقولة بعد – هذا ما ستفعله CSS في الدرس التالي! في الوقت الحالي، لديك أساس HTML قوي ينظم المحتوى بشكل صحيح ويتبع أفضل ممارسات إمكانية الوصول.
+
+## استخدام HTML الدلالي لإمكانية الوصول
+
+HTML الدلالي يعني اختيار عناصر HTML بناءً على معناها وغرضها، وليس فقط مظهرها. عندما تستخدم الترميز الدلالي، فإنك توصل هيكل ومعنى المحتوى الخاص بك إلى المتصفحات ومحركات البحث والتقنيات المساعدة مثل قارئات الشاشة.
+
+```mermaid
+flowchart TD
+    A[Need to add content?] --> B{What type?}
+    B -->|Main heading| C["<h1>"]
+    B -->|Subheading| D["<h2>, <h3>, etc."]
+    B -->|Paragraph| E["<p>"]
+    B -->|List| F["<ul>, <ol>"]
+    B -->|Navigation| G["<nav>"]
+    B -->|Article| H["<article>"]
+    B -->|Section| I["<section>"]
+    B -->|Generic container| J["<div>"]
+    
+    C --> K[Screen readers announce as main title]
+    D --> L[Creates proper heading hierarchy]
+    E --> M[Provides proper text spacing]
+    F --> N[Enables list navigation shortcuts]
+    G --> O[Identifies navigation landmarks]
+    H --> P[Marks standalone content]
+    I --> Q[Groups related content]
+    J --> R[Use only when no semantic tag fits]
+    
+    style C fill:#4caf50
+    style D fill:#4caf50
+    style E fill:#4caf50
+    style F fill:#4caf50
+    style G fill:#2196f3
+    style H fill:#2196f3
+    style I fill:#2196f3
+    style J fill:#ff9800
+```
 
-هذا النهج يجعل مواقعك الإلكترونية أكثر سهولة للمستخدمين ذوي الإعاقة ويساعد محركات البحث على فهم المحتوى الخاص بك بشكل أفضل. إنه مبدأ أساسي لتطوير الويب الحديث الذي يخلق تجارب أفضل للجميع.
+هذا النهج يجعل مواقع الويب الخاصة بك أكثر سهولة للمستخدمين ذوي الإعاقات ويساعد محركات البحث على فهم المحتوى الخاص بك بشكل أفضل. إنه مبدأ أساسي لتطوير الويب الحديث الذي يخلق تجارب أفضل للجميع.
 
 ### إضافة عنوان صفحة دلالي
 
-دعنا نضيف عنوانًا مناسبًا لصفحة التيراريوم الخاصة بك. أدخل هذا السطر مباشرة بعد علامة `<body>` الافتتاحية:
+دعنا نضيف عنوانًا مناسبًا لصفحة التيراريوم الخاصة بك. قم بإدراج هذا السطر مباشرة بعد علامة الفتح `<body>`:
 
 ```html
 <h1>My Terrarium</h1>
 ```
 
-**لماذا الترميز الدلالي مهم:**
+**لماذا يهم الترميز الدلالي:**
 - **يساعد** قارئات الشاشة على التنقل وفهم هيكل الصفحة
 - **يحسن** تحسين محركات البحث (SEO) من خلال توضيح تسلسل المحتوى
-- **يعزز** الوصول للمستخدمين ذوي الإعاقات البصرية أو الاختلافات الإدراكية
-- **يُنشئ** تجارب مستخدم أفضل عبر جميع الأجهزة والمنصات
+- **يعزز** إمكانية الوصول للمستخدمين ذوي الإعاقات البصرية أو الاختلافات الإدراكية
+- **يخلق** تجارب مستخدم أفضل عبر جميع الأجهزة والمنصات
 - **يتبع** معايير الويب وأفضل الممارسات للتطوير الاحترافي
 
 **أمثلة على الخيارات الدلالية مقابل غير الدلالية:**
 
 | الغرض | ✅ الخيار الدلالي | ❌ الخيار غير الدلالي |
-|---------|-------------------|------------------------|
+|-------|------------------|-----------------------|
 | العنوان الرئيسي | `<h1>العنوان</h1>` | `<div class="big-text">العنوان</div>` |
 | التنقل | `<nav><ul><li></li></ul></nav>` | `<div class="menu"><div></div></div>` |
 | الزر | `<button>اضغط هنا</button>` | `<span onclick="...">اضغط هنا</span>` |
 | محتوى المقالة | `<article><p></p></article>` | `<div class="content"><div></div></div>` |
 
-> 🎥 **شاهدها عمليًا**: شاهد [كيف تتفاعل قارئات الشاشة مع صفحات الويب](https://www.youtube.com/watch?v=OUDV1gqs9GA) لفهم لماذا الترميز الدلالي ضروري للوصول. لاحظ كيف يساعد هيكل HTML الصحيح المستخدمين على التنقل بكفاءة.
+> 🎥 **شاهدها عمليًا**: شاهد [كيف تتفاعل قارئات الشاشة مع صفحات الويب](https://www.youtube.com/watch?v=OUDV1gqs9GA) لفهم سبب أهمية الترميز الدلالي لإمكانية الوصول. لاحظ كيف يساعد هيكل HTML الصحيح المستخدمين على التنقل بكفاءة.
 
 ## إنشاء حاوية التيراريوم
 
-الآن دعنا نضيف هيكل HTML للتيراريوم نفسه – الحاوية الزجاجية حيث سيتم وضع النباتات في النهاية. هذا القسم يوضح مفهومًا مهمًا: HTML يوفر الهيكل، ولكن بدون تصميم CSS، لن تكون هذه العناصر مرئية بعد.
+الآن دعنا نضيف هيكل HTML للتيراريوم نفسه – الحاوية الزجاجية حيث سيتم وضع النباتات في النهاية. هذا القسم يوضح مفهومًا مهمًا: يوفر HTML الهيكل، ولكن بدون تصميم CSS، لن تكون هذه العناصر مرئية بعد.
 
-يستخدم ترميز التيراريوم أسماء فئات وصفية ستجعل تصميم CSS بديهيًا وقابلًا للصيانة في الدرس التالي.
+يستخدم ترميز التيراريوم أسماء فئات وصفية ستجعل تصميم CSS بديهيًا وسهل الصيانة في الدرس التالي.
 
 ### المهمة: إضافة هيكل التيراريوم
 
-أدخل هذا الترميز فوق علامة `</div>` الأخيرة (قبل علامة الإغلاق لحاوية الصفحة):
+قم بإدراج هذا الترميز فوق علامة `</div>` الأخيرة (قبل علامة الإغلاق لحاوية الصفحة):
 
 ```html
 <div id="terrarium">
@@ -284,82 +401,198 @@ HTML الدلالي يعني اختيار عناصر HTML بناءً على مع
 
 **فهم هيكل التيراريوم هذا:**
 - **يُنشئ** حاوية تيراريوم رئيسية بمعرف فريد للتصميم
-- **يُحدد** عناصر منفصلة لكل مكون بصري (الأعلى، الجدران، التربة، القاع)
-- **يتضمن** عناصر متداخلة لتأثيرات انعكاس الزجاج (عناصر لامعة)
-- **يستخدم** أسماء فئات وصفية تشير بوضوح إلى غرض كل عنصر
-- **يُعد** الهيكل لتصميم CSS الذي سيُنشئ مظهر التيراريوم الزجاجي
+- **تعريف** عناصر منفصلة لكل مكون بصري (الأعلى، الجدران، التراب، الأسفل)  
+- **يتضمن** عناصر متداخلة لتأثيرات انعكاس الزجاج (العناصر اللامعة)  
+- **يستخدم** أسماء فئات وصفية تشير بوضوح إلى وظيفة كل عنصر  
+- **يُجهز** الهيكل لتنسيق CSS الذي سيُظهر مظهر التيراريوم الزجاجي  
+
+> 🤔 **هل لاحظت شيئًا؟**: على الرغم من أنك أضفت هذا الترميز، إلا أنك لا ترى أي شيء جديد على الصفحة! هذا يوضح تمامًا كيف يوفر HTML الهيكل بينما يوفر CSS المظهر. هذه العناصر `<div>` موجودة ولكن ليس لديها أي تنسيق بصري حتى الآن – سيتم ذلك في الدرس التالي!
+
+```mermaid
+flowchart TD
+    A[HTML Document] --> B[Document Head]
+    A --> C[Document Body]
+    B --> D[Title Element]
+    B --> E[Meta Charset]
+    B --> F[Meta Viewport]
+    C --> G[Main Heading]
+    C --> H[Page Container]
+    H --> I[Left Container with 7 plants]
+    H --> J[Right Container with 7 plants]
+    H --> K[Terrarium Structure]
+    
+    style A fill:#e1f5fe
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style H fill:#f3e5f5
+```
+  
+### 🔄 **مراجعة تعليمية**  
+**إتقان هيكل HTML**: قبل المضي قدمًا، تأكد من أنك تستطيع:  
+- ✅ شرح الفرق بين هيكل HTML والمظهر البصري  
+- ✅ التمييز بين عناصر HTML الدلالية وغير الدلالية  
+- ✅ وصف كيف يمكن أن يفيد الترميز الصحيح إمكانية الوصول  
+- ✅ التعرف على هيكل شجرة المستند بالكامل  
 
-> 🤔 **لاحظ شيئًا؟**: على الرغم من أنك أضفت هذا الترميز، إلا أنك لا ترى أي شيء جديد على الصفحة! هذا يوضح تمامًا كيف يوفر HTML الهيكل بينما يوفر CSS المظهر. هذه عناصر `<div>` موجودة ولكن ليس لديها تصميم مرئي بعد – هذا قادم في الدرس التالي!
+**اختبار فهمك**: حاول فتح ملف HTML الخاص بك في متصفح مع تعطيل JavaScript وإزالة CSS. هذا يظهر لك الهيكل الدلالي النقي الذي أنشأته!
 
 ---
 
-## تحدي وكيل GitHub Copilot
+## تحدي وكيل GitHub Copilot  
 
-استخدم وضع الوكيل لإكمال التحدي التالي:
+استخدم وضع الوكيل لإكمال التحدي التالي:  
 
-**الوصف:** قم بإنشاء هيكل HTML دلالي لقسم دليل العناية بالنباتات الذي يمكن إضافته إلى مشروع التيراريوم.
-**الموجه:** قم بإنشاء قسم HTML دلالي يتضمن عنوانًا رئيسيًا "دليل العناية بالنباتات"، وثلاثة أقسام فرعية بعناوين "الري"، "متطلبات الضوء"، و"العناية بالتربة"، يحتوي كل منها على فقرة من معلومات العناية بالنباتات. استخدم علامات HTML الدلالية المناسبة مثل `<section>`، `<h2>`، `<h3>`، و `<p>` لتنظيم المحتوى بشكل صحيح.
+**الوصف:** قم بإنشاء هيكل HTML دلالي لقسم دليل العناية بالنباتات يمكن إضافته إلى مشروع التيراريوم.  
 
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+**المهمة:** قم بإنشاء قسم HTML دلالي يتضمن عنوانًا رئيسيًا "دليل العناية بالنباتات"، وثلاثة أقسام فرعية مع عناوين "الري"، "متطلبات الضوء"، و"العناية بالتربة"، يحتوي كل منها على فقرة من معلومات العناية بالنباتات. استخدم علامات HTML الدلالية المناسبة مثل `<section>`، `<h2>`، `<h3>`، و`<p>` لتنظيم المحتوى بشكل مناسب.  
 
-## تحدي استكشاف تاريخ HTML
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
-**التعرف على تطور الويب**
+## تحدي استكشاف تاريخ HTML  
 
-لقد تطور HTML بشكل كبير منذ أن أنشأ تيم بيرنرز لي أول متصفح ويب في CERN عام 1990. بعض العلامات القديمة مثل `<marquee>` أصبحت الآن مهملة لأنها لا تتوافق جيدًا مع معايير الوصول الحديثة ومبادئ التصميم المتجاوب.
+**التعرف على تطور الويب**  
 
-**جرب هذه التجربة:**
-1. قم مؤقتًا بتغليف عنوان `<h1>` الخاص بك داخل علامة `<marquee>`: `<marquee><h1>My Terrarium</h1></marquee>`
-2. افتح صفحتك في متصفح ولاحظ تأثير التمرير
-3. فكر في سبب إهمال هذه العلامة (تلميح: فكر في تجربة المستخدم وإمكانية الوصول)
-4. قم بإزالة علامة `<marquee>` وعد إلى الترميز الدلالي
+لقد تطور HTML بشكل كبير منذ أن أنشأ تيم بيرنرز لي أول متصفح ويب في CERN عام 1990. بعض العلامات القديمة مثل `<marquee>` أصبحت الآن مهملة لأنها لا تعمل بشكل جيد مع معايير الوصول الحديثة ومبادئ التصميم المتجاوب.  
 
-**أسئلة للتفكير:**
-- كيف يمكن أن يؤثر عنوان متحرك على المستخدمين الذين يعانون من ضعف البصر أو حساسية الحركة؟
-- ما هي تقنيات CSS الحديثة التي يمكن أن تحقق تأثيرات بصرية مشابهة بشكل أكثر سهولة؟
-- لماذا من المهم استخدام معايير الويب الحالية بدلاً من العناصر المهملة؟
+**جرب هذا التمرين:**  
+1. قم مؤقتًا بتغليف عنوان `<h1>` الخاص بك داخل علامة `<marquee>`: `<marquee><h1>تيراريومي</h1></marquee>`  
+2. افتح صفحتك في متصفح ولاحظ تأثير التمرير  
+3. فكر في سبب إهمال هذه العلامة (تلميح: فكر في تجربة المستخدم وإمكانية الوصول)  
+4. قم بإزالة علامة `<marquee>` وارجع إلى الترميز الدلالي  
 
-استكشف المزيد حول [عناصر HTML المهملة والمستبعدة](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) لفهم كيف تتطور معايير الويب لتحسين تجربة المستخدم.
+**أسئلة للتفكير:**  
+- كيف يمكن أن يؤثر عنوان متحرك على المستخدمين ذوي الإعاقات البصرية أو حساسية الحركة؟  
+- ما هي تقنيات CSS الحديثة التي يمكن أن تحقق تأثيرات بصرية مشابهة بشكل أكثر سهولة؟  
+- لماذا من المهم استخدام معايير الويب الحالية بدلاً من العناصر المهملة؟  
 
+استكشف المزيد حول [عناصر HTML المهملة والقديمة](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) لفهم كيف تتطور معايير الويب لتحسين تجربة المستخدم.
 
-## اختبار ما بعد المحاضرة
+## اختبار ما بعد المحاضرة  
 
 [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/16)
 
-## المراجعة والدراسة الذاتية
-
-**تعميق معرفتك بـ HTML**
-
-HTML كان أساس الويب لأكثر من 30 عامًا، حيث تطور من لغة ترميز وثائق بسيطة إلى منصة متطورة لبناء تطبيقات تفاعلية. فهم هذا التطور يساعدك على تقدير معايير الويب الحديثة واتخاذ قرارات تطوير أفضل.
-
-**مسارات التعلم الموصى بها:**
-
-1. **تاريخ وتطور HTML**
-   - ابحث في الجدول الزمني من HTML 1.0 إلى HTML5
-   - استكشف سبب إهمال بعض العلامات (الوصول، ملاءمة الأجهزة المحمولة، سهولة الصيانة)
-   - تحقق من ميزات HTML الناشئة والمقترحات
-
-2. **التعمق في HTML الدلالي**
-   - ادرس القائمة الكاملة لعناصر [HTML5 الدلالية](https://developer.mozilla.org/docs/Web/HTML/Element)
-   - مارس تحديد متى تستخدم `<article>`، `<section>`، `<aside>`، و `<main>`
-   - تعرف على سمات ARIA لتحسين إمكانية الوصول
-
-3. **تطوير الويب الحديث**
-   - استكشف [بناء مواقع ويب متجاوبة](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn
-   - فهم كيفية دمج HTML مع CSS و JavaScript
-   - تعلم أفضل الممارسات لأداء الويب وتحسين محركات البحث
+## المراجعة والدراسة الذاتية  
+
+**تعميق معرفتك بـ HTML**  
+
+HTML كان أساس الويب لأكثر من 30 عامًا، تطور من لغة ترميز بسيطة للمستندات إلى منصة متطورة لبناء التطبيقات التفاعلية. فهم هذا التطور يساعدك على تقدير معايير الويب الحديثة واتخاذ قرارات تطوير أفضل.  
+
+**مسارات التعلم الموصى بها:**  
+
+1. **تاريخ وتطور HTML**  
+   - ابحث في الجدول الزمني من HTML 1.0 إلى HTML5  
+   - استكشف سبب إهمال بعض العلامات (إمكانية الوصول، ملاءمة الأجهزة المحمولة، سهولة الصيانة)  
+   - تحقق من ميزات HTML الناشئة والمقترحات  
+
+2. **الغوص العميق في HTML الدلالي**  
+   - ادرس القائمة الكاملة لعناصر [HTML5 الدلالية](https://developer.mozilla.org/docs/Web/HTML/Element)  
+   - تدرب على تحديد متى تستخدم `<article>`، `<section>`، `<aside>`، و`<main>`  
+   - تعلم عن سمات ARIA لتحسين إمكانية الوصول  
+
+3. **تطوير الويب الحديث**  
+   - استكشف [بناء مواقع ويب متجاوبة](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn  
+   - فهم كيفية دمج HTML مع CSS وJavaScript  
+   - تعلم عن أفضل ممارسات أداء الويب وتحسين محركات البحث  
+
+**أسئلة للتفكير:**  
+- ما هي علامات HTML المهملة التي اكتشفتها، ولماذا تم إزالتها؟  
+- ما هي ميزات HTML الجديدة التي يتم اقتراحها للإصدارات المستقبلية؟  
+- كيف يساهم HTML الدلالي في إمكانية الوصول وتحسين محركات البحث؟  
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**  
+- [ ] افتح أدوات المطور (F12) وتحقق من هيكل HTML لموقعك المفضل  
+- [ ] أنشئ ملف HTML بسيطًا يحتوي على علامات أساسية: `<h1>`، `<p>`، و`<img>`  
+- [ ] تحقق من صحة HTML الخاص بك باستخدام أداة التحقق من HTML عبر الإنترنت من W3C  
+- [ ] حاول إضافة تعليق إلى HTML الخاص بك باستخدام `<!-- تعليق -->`
+
+### 🎯 **ما يمكنك إنجازه خلال الساعة**  
+- [ ] أكمل اختبار ما بعد الدرس وراجع مفاهيم HTML الدلالية  
+- [ ] قم ببناء صفحة ويب بسيطة عن نفسك باستخدام هيكل HTML صحيح  
+- [ ] جرب مستويات العناوين المختلفة وعلامات تنسيق النص  
+- [ ] أضف صور وروابط لممارسة دمج الوسائط المتعددة  
+- [ ] ابحث عن ميزات HTML5 التي لم تجربها بعد  
+
+### 📅 **رحلتك الأسبوعية مع HTML**  
+- [ ] أكمل مهمة مشروع التيراريوم باستخدام الترميز الدلالي  
+- [ ] أنشئ صفحة ويب قابلة للوصول باستخدام تسميات وأدوار ARIA  
+- [ ] تدرب على إنشاء النماذج باستخدام أنواع الإدخال المختلفة  
+- [ ] استكشف واجهات برمجة تطبيقات HTML5 مثل localStorage أو geolocation  
+- [ ] ادرس أنماط HTML المتجاوبة وتصميم الأولوية للجوال  
+- [ ] راجع أكواد HTML الخاصة بالمطورين الآخرين للحصول على أفضل الممارسات  
+
+### 🌟 **رحلتك الشهرية لإتقان أساسيات الويب**  
+- [ ] قم ببناء موقع ويب للملف الشخصي يعرض إتقانك لـ HTML  
+- [ ] تعلم قوالب HTML باستخدام إطار عمل مثل Handlebars  
+- [ ] ساهم في مشاريع مفتوحة المصدر من خلال تحسين وثائق HTML  
+- [ ] أتقن مفاهيم HTML المتقدمة مثل العناصر المخصصة  
+- [ ] دمج HTML مع أطر CSS ومكتبات JavaScript  
+- [ ] قم بتوجيه الآخرين الذين يتعلمون أساسيات HTML  
+
+## 🎯 جدول زمني لإتقان HTML  
+
+```mermaid
+timeline
+    title HTML Learning Progression
+    
+    section Foundation (5 minutes)
+        Document Structure: DOCTYPE declaration
+                         : HTML root element
+                         : Head vs Body understanding
+        
+    section Metadata (10 minutes)
+        Essential Meta Tags: Character encoding
+                           : Viewport configuration
+                           : Browser compatibility
+        
+    section Content Creation (15 minutes)
+        Image Integration: Proper file paths
+                         : Alt text importance
+                         : Self-closing tags
+        
+    section Layout Organization (20 minutes)
+        Container Strategy: Div elements for structure
+                          : Class and ID naming
+                          : Nested element hierarchy
+        
+    section Semantic Mastery (30 minutes)
+        Meaningful Markup: Heading hierarchy
+                         : Screen reader navigation
+                         : Accessibility best practices
+        
+    section Advanced Concepts (1 hour)
+        HTML5 Features: Modern semantic elements
+                      : ARIA attributes
+                      : Performance considerations
+        
+    section Professional Skills (1 week)
+        Code Organization: File structure patterns
+                         : Maintainable markup
+                         : Team collaboration
+        
+    section Expert Level (1 month)
+        Modern Web Standards: Progressive enhancement
+                            : Cross-browser compatibility
+                            : HTML specification updates
+```
+  
+### 🛠️ ملخص أدوات HTML الخاصة بك  
 
-**أسئلة للتفكير:**
-- ما هي علامات HTML المهملة التي اكتشفتها، ولماذا تم إزالتها؟
-- ما هي ميزات HTML الجديدة التي يتم اقتراحها للإصدارات المستقبلية؟
-- كيف يساهم HTML الدلالي في إمكانية الوصول إلى الويب وتحسين محركات البحث؟
+بعد إكمال هذا الدرس، لديك الآن:  
+- **هيكل المستند**: أساس HTML5 كامل مع DOCTYPE صحيح  
+- **الترميز الدلالي**: علامات ذات معنى تعزز إمكانية الوصول وتحسين محركات البحث  
+- **دمج الصور**: ممارسات تنظيم الملفات والنص البديل بشكل صحيح  
+- **حاويات التخطيط**: استخدام استراتيجي للعناصر div مع أسماء فئات وصفية  
+- **وعي إمكانية الوصول**: فهم التنقل باستخدام قارئات الشاشة  
+- **المعايير الحديثة**: ممارسات HTML5 الحالية ومعرفة العلامات المهملة  
+- **أساس المشروع**: قاعدة صلبة لتنسيق CSS وتفاعل JavaScript  
 
+**الخطوات التالية**: هيكل HTML الخاص بك جاهز لتنسيق CSS! الأساس الدلالي الذي بنيته سيجعل الدرس التالي أسهل بكثير للفهم.
 
-## الواجب
+## المهمة  
 
-[مارس HTML الخاص بك: قم ببناء نموذج مدونة](assignment.md)
+[تمرن على HTML: قم ببناء نموذج مدونة](assignment.md)  
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/3-terrarium/2-intro-to-css/README.md b/translations/ar/3-terrarium/2-intro-to-css/README.md
index ac4f1c3a53..3fac97dc87 100644
--- a/translations/ar/3-terrarium/2-intro-to-css/README.md
+++ b/translations/ar/3-terrarium/2-intro-to-css/README.md
@@ -1,24 +1,80 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "92c4431eac70670b0450b02c1d11279a",
-  "translation_date": "2025-10-22T14:17:07+00:00",
+  "original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
+  "translation_date": "2025-11-03T12:36:47+00:00",
   "source_file": "3-terrarium/2-intro-to-css/README.md",
   "language_code": "ar"
 }
 -->
-# مشروع التيراريوم الجزء الثاني: مقدمة إلى CSS
+# مشروع التيراريوم الجزء الثاني: مقدمة في CSS
+
+```mermaid
+journey
+    title Your CSS Styling Journey
+    section Foundation
+      Link CSS file: 3: Student
+      Understand cascade: 4: Student
+      Learn inheritance: 4: Student
+    section Selectors
+      Element targeting: 4: Student
+      Class patterns: 5: Student
+      ID specificity: 5: Student
+    section Layout
+      Position elements: 4: Student
+      Create containers: 5: Student
+      Build terrarium: 5: Student
+    section Polish
+      Add visual effects: 5: Student
+      Responsive design: 5: Student
+      Glass reflections: 5: Student
+```
 
-![مقدمة إلى CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ar.png)
+![مقدمة في CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ar.png)
 > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
 
-هل تتذكر كيف كان شكل التيراريوم الخاص بك باستخدام HTML؟ CSS هو المكان الذي نحول فيه هذا الهيكل البسيط إلى شيء جذاب بصريًا.
-
-إذا كان HTML يشبه بناء إطار المنزل، فإن CSS هو كل ما يجعل المنزل يبدو وكأنه منزل - ألوان الطلاء، ترتيب الأثاث، الإضاءة، وكيفية تدفق الغرف معًا. فكر في كيف بدأ قصر فرساي كمنزل صيد بسيط، ولكن الاهتمام الدقيق بالديكور والتصميم حوله إلى واحد من أعظم المباني في العالم.
-
-اليوم، سنحول التيراريوم الخاص بك من عملي إلى مصقول. ستتعلم كيفية وضع العناصر بدقة، إنشاء تخطيطات تستجيب لأحجام الشاشات المختلفة، وإضافة الجاذبية البصرية التي تجعل المواقع الإلكترونية ممتعة.
-
-بحلول نهاية هذا الدرس، سترى كيف يمكن أن يحسن CSS الاستراتيجي مشروعك بشكل كبير. دعونا نضيف بعض الأناقة إلى التيراريوم الخاص بك.
+هل تتذكر كيف كان شكل التيراريوم الخاص بك بسيطًا جدًا؟ CSS هو المكان الذي نحول فيه هذا الهيكل البسيط إلى شيء جذاب بصريًا.
+
+إذا كان HTML يشبه بناء إطار المنزل، فإن CSS هو كل ما يجعل المنزل يبدو وكأنه منزل - ألوان الطلاء، ترتيب الأثاث، الإضاءة، وكيفية تدفق الغرف معًا. فكر في كيف بدأ قصر فرساي ككوخ صيد بسيط، ولكن الاهتمام الدقيق بالديكور والتصميم حوله إلى واحد من أعظم المباني في العالم.
+
+اليوم، سنحول التيراريوم الخاص بك من عملي إلى مصقول. ستتعلم كيفية وضع العناصر بدقة، وإنشاء تخطيطات تستجيب لأحجام الشاشات المختلفة، وخلق الجاذبية البصرية التي تجعل المواقع الإلكترونية ممتعة.
+
+بحلول نهاية هذا الدرس، سترى كيف يمكن للتنسيق الاستراتيجي باستخدام CSS أن يحسن مشروعك بشكل كبير. دعونا نضيف بعض الأناقة إلى التيراريوم الخاص بك.
+
+```mermaid
+mindmap
+  root((CSS Fundamentals))
+    Cascade
+      Specificity Rules
+      Inheritance
+      Priority Order
+      Conflict Resolution
+    Selectors
+      Element Tags
+      Classes (.class)
+      IDs (#id)
+      Combinators
+    Box Model
+      Margin
+      Border
+      Padding
+      Content
+    Layout
+      Positioning
+      Display Types
+      Flexbox
+      Grid
+    Visual Effects
+      Colors
+      Shadows
+      Transitions
+      Animations
+    Responsive Design
+      Media Queries
+      Flexible Units
+      Viewport Meta
+      Mobile First
+```
 
 ## اختبار ما قبل المحاضرة
 
@@ -26,11 +82,11 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## البدء مع CSS
 
-غالبًا ما يُعتقد أن CSS مجرد "جعل الأشياء جميلة"، لكنه يخدم غرضًا أوسع بكثير. CSS يشبه أن تكون مخرج فيلم - تتحكم ليس فقط في كيفية ظهور كل شيء، ولكن أيضًا كيف يتحرك، يستجيب للتفاعل، ويتكيف مع المواقف المختلفة.
+غالبًا ما يُعتقد أن CSS مجرد "جعل الأشياء جميلة"، لكنها تخدم غرضًا أوسع بكثير. CSS تشبه المخرج في فيلم - تتحكم ليس فقط في كيفية ظهور كل شيء، ولكن أيضًا في كيفية تحركه، استجابته للتفاعل، وتكيفه مع المواقف المختلفة.
 
-CSS الحديث قادر بشكل ملحوظ. يمكنك كتابة كود يقوم تلقائيًا بتعديل التخطيطات للهواتف، الأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية. يمكنك إنشاء رسوم متحركة سلسة توجه انتباه المستخدمين حيثما كان ذلك ضروريًا. يمكن أن تكون النتائج مثيرة للإعجاب عندما يعمل كل شيء معًا.
+CSS الحديثة قادرة بشكل ملحوظ. يمكنك كتابة كود يقوم بضبط التخطيطات تلقائيًا للهواتف، الأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية. يمكنك إنشاء رسوم متحركة سلسة توجه انتباه المستخدمين حيثما كان ذلك ضروريًا. يمكن أن تكون النتائج مثيرة للإعجاب عندما تعمل كل هذه العناصر معًا.
 
-> 💡 **نصيحة احترافية**: CSS يتطور باستمرار مع ميزات وقدرات جديدة. تحقق دائمًا من [CanIUse.com](https://caniuse.com) للتحقق من دعم المتصفح للميزات الجديدة قبل استخدامها في المشاريع الإنتاجية.
+> 💡 **نصيحة احترافية**: CSS تتطور باستمرار مع ميزات وقدرات جديدة. تحقق دائمًا من [CanIUse.com](https://caniuse.com) للتحقق من دعم المتصفح للميزات الجديدة في CSS قبل استخدامها في المشاريع الإنتاجية.
 
 **ما سنحققه في هذا الدرس:**
 - **إنشاء** تصميم بصري كامل للتيراريوم الخاص بك باستخدام تقنيات CSS الحديثة
@@ -42,13 +98,13 @@ CSS الحديث قادر بشكل ملحوظ. يمكنك كتابة كود يق
 
 يجب أن تكون قد أكملت هيكل HTML للتيراريوم الخاص بك من الدرس السابق وأن يكون جاهزًا للتنسيق.
 
-> 📺 **مصدر فيديو**: تحقق من هذا الفيديو المفيد
+> 📺 **مصدر فيديو**: تحقق من هذا الفيديو التوضيحي المفيد
 >
 > [![دليل أساسيات CSS](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
 
 ### إعداد ملف CSS الخاص بك
 
-قبل أن نبدأ في التنسيق، نحتاج إلى ربط CSS بـ HTML الخاص بنا. هذا الاتصال يخبر المتصفح بمكان العثور على تعليمات التنسيق للتيراريوم الخاص بنا.
+قبل أن نبدأ في التنسيق، نحتاج إلى ربط CSS بـ HTML. هذا الاتصال يخبر المتصفح بمكان العثور على تعليمات التنسيق للتيراريوم الخاص بنا.
 
 في مجلد التيراريوم الخاص بك، قم بإنشاء ملف جديد يسمى `style.css`، ثم قم بربطه في قسم `<head>` من مستند HTML الخاص بك:
 
@@ -58,7 +114,7 @@ CSS الحديث قادر بشكل ملحوظ. يمكنك كتابة كود يق
 
 **ما يفعله هذا الكود:**
 - **إنشاء** اتصال بين ملفات HTML وCSS الخاصة بك
-- **إخبار** المتصفح بتحميل وتطبيق الأنماط من `style.css`
+- **إخبار** المتصفح بتحميل وتطبيق التنسيقات من `style.css`
 - **استخدام** السمة `rel="stylesheet"` لتحديد أن هذا ملف CSS
 - **الإشارة** إلى مسار الملف باستخدام `href="./style.css"`
 
@@ -66,7 +122,7 @@ CSS الحديث قادر بشكل ملحوظ. يمكنك كتابة كود يق
 
 هل تساءلت يومًا لماذا يُطلق على CSS اسم "أوراق الأنماط المتسلسلة"؟ الأنماط تتسلسل مثل الشلال، وأحيانًا تتعارض مع بعضها البعض.
 
-فكر في كيفية عمل هيكل القيادة العسكرية - قد يقول أمر عام "يرتدي جميع الجنود اللون الأخضر"، ولكن قد يقول أمر محدد لوحدتك "ارتدِ الأزرق الرسمي للحفل". التعليمات الأكثر تحديدًا لها الأولوية. CSS يتبع منطقًا مشابهًا، وفهم هذا التسلسل يجعل تصحيح الأخطاء أكثر سهولة.
+فكر في كيفية عمل هياكل القيادة العسكرية - قد يقول أمر عام "يرتدي جميع الجنود اللون الأخضر"، ولكن قد يقول أمر محدد لوحدتك "ارتدِ الأزرق الرسمي للحفل". التعليمات الأكثر تحديدًا لها الأولوية. CSS تتبع منطقًا مشابهًا، وفهم هذا التسلسل يجعل تصحيح الأخطاء أكثر سهولة.
 
 ### تجربة أولوية التسلسل
 
@@ -94,7 +150,29 @@ h1 {
 - **تعيين** لون النص إلى الأزرق باستخدام ورقة أنماط خارجية
 - **إنشاء** قاعدة ذات أولوية أقل مقارنة بالأنماط الداخلية
 
-✅ **اختبار المعرفة**: أي لون يظهر في تطبيق الويب الخاص بك؟ لماذا يفوز هذا اللون؟ هل يمكنك التفكير في سيناريوهات قد ترغب فيها في تجاوز الأنماط؟
+✅ **اختبار المعرفة**: ما اللون الذي يظهر في تطبيق الويب الخاص بك؟ لماذا يفوز هذا اللون؟ هل يمكنك التفكير في سيناريوهات قد ترغب فيها في تجاوز الأنماط؟
+
+```mermaid
+flowchart TD
+    A["Browser encounters h1 element"] --> B{"Check for inline styles"}
+    B -->|Found| C["style='color: red'"] 
+    B -->|None| D{"Check for ID rules"}
+    C --> E["Apply red color (1000 points)"]
+    D -->|Found| F["#heading { color: green }"]
+    D -->|None| G{"Check for class rules"}
+    F --> H["Apply green color (100 points)"]
+    G -->|Found| I[".title { color: blue }"]
+    G -->|None| J{"Check element rules"}
+    I --> K["Apply blue color (10 points)"]
+    J -->|Found| L["h1 { color: purple }"]
+    J -->|None| M["Use browser default"]
+    L --> N["Apply purple color (1 point)"]
+    
+    style C fill:#ff6b6b
+    style F fill:#51cf66
+    style I fill:#339af0
+    style L fill:#9775fa
+```
 
 > 💡 **ترتيب أولوية CSS (من الأعلى إلى الأدنى):**
 > 1. **الأنماط الداخلية** (سمة style)
@@ -105,13 +183,13 @@ h1 {
 
 ## وراثة CSS في العمل
 
-وراثة CSS تعمل مثل الوراثة الجينية - العناصر ترث خصائص معينة من عناصرها الأم. إذا قمت بتعيين عائلة الخط على عنصر body، فإن كل النصوص بداخله تستخدم تلقائيًا نفس الخط. يشبه ذلك كيف ظهر الفك المميز لعائلة هابسبورغ عبر الأجيال دون أن يتم تحديده لكل فرد.
+وراثة CSS تعمل مثل الوراثة الجينية - العناصر ترث خصائص معينة من عناصرها الأم. إذا قمت بتعيين نوع الخط على عنصر body، فإن كل النصوص داخله تستخدم نفس الخط تلقائيًا. يشبه ذلك كيف ظهر فك عائلة هابسبورغ المميز عبر الأجيال دون تحديده لكل فرد.
 
 ومع ذلك، ليس كل شيء يتم وراثته. أنماط النصوص مثل الخطوط والألوان يتم وراثتها، ولكن خصائص التخطيط مثل الهوامش والحدود لا يتم وراثتها. تمامًا مثلما قد يرث الأطفال السمات الجسدية ولكن ليس اختيارات الموضة لوالديهم.
 
-### مراقبة وراثة الخطوط
+### ملاحظة وراثة الخطوط
 
-دعونا نرى الوراثة في العمل من خلال تعيين عائلة الخط على عنصر `<body>`:
+دعونا نرى الوراثة في العمل من خلال تعيين نوع الخط على عنصر `<body>`:
 
 ```css
 body {
@@ -120,26 +198,41 @@ body {
 ```
 
 **تفصيل ما يحدث هنا:**
-- **تعيين** عائلة الخط للصفحة بأكملها عن طريق استهداف عنصر `<body>`
-- **استخدام** مجموعة خطوط احتياطية لتحسين توافق المتصفح
+- **تعيين** نوع الخط للصفحة بأكملها عن طريق استهداف عنصر `<body>`
+- **استخدام** مجموعة خطوط مع خيارات احتياطية لتحسين توافق المتصفح
 - **تطبيق** خطوط نظام حديثة تبدو رائعة عبر أنظمة تشغيل مختلفة
 - **ضمان** أن جميع العناصر الفرعية ترث هذا الخط ما لم يتم تجاوزه بشكل محدد
 
-افتح أدوات المطور في المتصفح الخاص بك (F12)، انتقل إلى علامة التبويب العناصر، وقم بفحص عنصر `<h1>` الخاص بك. سترى أنه يرث عائلة الخط من body:
+افتح أدوات المطور في المتصفح (F12)، انتقل إلى علامة التبويب العناصر، وقم بفحص عنصر `<h1>` الخاص بك. سترى أنه يرث نوع الخط من body:
 
 ![الخط الموروث](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ar.png)
 
 ✅ **وقت التجربة**: حاول تعيين خصائص أخرى قابلة للوراثة على `<body>` مثل `color`، `line-height`، أو `text-align`. ماذا يحدث لعناوينك والعناصر الأخرى؟
 
-> 📝 **الخصائص القابلة للوراثة تشمل**: `color`، `font-family`، `font-size`، `line-height`، `text-align`، `visibility`
+> 📝 **الخصائص القابلة للوراثة تشمل**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
 >
-> **الخصائص غير القابلة للوراثة تشمل**: `margin`، `padding`، `border`، `width`، `height`، `position`
+> **الخصائص غير القابلة للوراثة تشمل**: `margin`, `padding`, `border`, `width`, `height`, `position`
+
+### 🔄 **تقييم تربوي**
+**فهم أساسيات CSS**: قبل الانتقال إلى المحددات، تأكد من أنك تستطيع:
+- ✅ شرح الفرق بين التسلسل والوراثة
+- ✅ التنبؤ بالنمط الذي سيفوز في تعارض التحديد
+- ✅ تحديد الخصائص التي ترث من العناصر الأم
+- ✅ ربط ملفات CSS بـ HTML بشكل صحيح
+
+**اختبار سريع**: إذا كان لديك هذه الأنماط، ما اللون الذي سيكون عليه `<h1>` داخل `<div class="special">`؟
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*الإجابة: أحمر (محدد العنصر يستهدف h1 مباشرة)*
 
 ## إتقان محددات CSS
 
-محددات CSS هي طريقتك لاستهداف عناصر محددة للتنسيق. إنها تعمل مثل إعطاء توجيهات دقيقة - بدلاً من قول "المنزل"، قد تقول "المنزل الأزرق ذو الباب الأحمر في شارع مابل".
+محددات CSS هي طريقتك لاستهداف عناصر محددة للتنسيق. تعمل مثل إعطاء توجيهات دقيقة - بدلاً من قول "المنزل"، قد تقول "المنزل الأزرق ذو الباب الأحمر في شارع مابل".
 
-CSS يوفر طرقًا مختلفة لتكون محددًا، واختيار المحدد الصحيح يشبه اختيار الأداة المناسبة للمهمة. أحيانًا تحتاج إلى تنسيق كل الأبواب في الحي، وأحيانًا باب واحد فقط.
+CSS توفر طرقًا مختلفة لتكون محددًا، واختيار المحدد الصحيح يشبه اختيار الأداة المناسبة للمهمة. أحيانًا تحتاج إلى تنسيق كل الأبواب في الحي، وأحيانًا تحتاج إلى باب واحد فقط.
 
 ### محددات العناصر (العلامات)
 
@@ -163,16 +256,16 @@ h1 {
 **فهم هذه الأنماط:**
 - **تعيين** طباعة متسقة عبر الصفحة بأكملها باستخدام محدد `body`
 - **إزالة** الهوامش والتعبئة الافتراضية للمتصفح لتحكم أفضل
-- **تنسيق** جميع عناصر العنوان بالألوان، المحاذاة، والتباعد
+- **تنسيق** جميع عناصر العناوين بالألوان، المحاذاة، والتباعد
 - **استخدام** وحدات `rem` لتحديد حجم الخط القابل للتوسع والوصول
 
 بينما تعمل محددات العناصر بشكل جيد للتنسيق العام، ستحتاج إلى محددات أكثر تحديدًا لتنسيق المكونات الفردية مثل النباتات في التيراريوم الخاص بك.
 
 ### محددات المعرفات للعناصر الفريدة
 
-محددات المعرفات تستخدم الرمز `#` وتستهدف العناصر ذات سمات `id` المحددة. نظرًا لأن المعرفات يجب أن تكون فريدة في الصفحة، فهي مثالية لتنسيق العناصر الفردية والخاصة مثل حاويات النباتات الجانبية في التيراريوم الخاص بنا.
+محددات المعرفات تستخدم رمز `#` وتستهدف العناصر ذات سمات `id` المحددة. نظرًا لأن المعرفات يجب أن تكون فريدة في الصفحة، فهي مثالية لتنسيق العناصر الفردية والخاصة مثل حاويات النباتات الجانبية في التيراريوم الخاص بنا.
 
-دعونا ننشئ تنسيقًا لحاويات الجوانب في التيراريوم حيث ستعيش النباتات:
+دعونا ننشئ التنسيق لحاويات الجوانب في التيراريوم حيث ستعيش النباتات:
 
 ```css
 #left-container {
@@ -203,7 +296,7 @@ h1 {
 - **استخدام** وحدات `vh` (ارتفاع نافذة العرض) لتحديد ارتفاع استجابة يتكيف مع حجم الشاشة
 - **تطبيق** `box-sizing: border-box` بحيث يتم تضمين التعبئة في العرض الإجمالي
 - **إزالة** وحدات `px` غير الضرورية من القيم الصفرية للحصول على كود أنظف
-- **تعيين** لون خلفية خفيف أسهل على العين من الرمادي الفاتح
+- **تعيين** لون خلفية خفيف أسهل على العين من الرمادي القاسي
 
 ✅ **تحدي جودة الكود**: لاحظ كيف ينتهك هذا CSS مبدأ DRY (لا تكرر نفسك). هل يمكنك إعادة صياغته باستخدام كل من المعرف والفئة؟
 
@@ -233,11 +326,11 @@ h1 {
 }
 ```
 
-### محددات الفئات للأنماط القابلة لإعادة الاستخدام
+### محددات الفئات لأنماط قابلة لإعادة الاستخدام
 
 محددات الفئات تستخدم الرمز `.` وهي مثالية عندما تريد تطبيق نفس الأنماط على عناصر متعددة. على عكس المعرفات، يمكن إعادة استخدام الفئات في جميع أنحاء HTML الخاص بك، مما يجعلها مثالية لأنماط التنسيق المتسقة.
 
-في التيراريوم الخاص بنا، تحتاج كل نبتة إلى تنسيق مشابه ولكن أيضًا تحتاج إلى وضع فردي. سنستخدم مزيجًا من الفئات للأنماط المشتركة والمعرفات للوضع الفردي.
+في التيراريوم الخاص بنا، تحتاج كل نبتة إلى تنسيق مشابه ولكن أيضًا تحتاج إلى وضع فردي. سنستخدم مزيجًا من الفئات لأنماط مشتركة والمعرفات لوضع فردي.
 
 **إليك هيكل HTML لكل نبتة:**
 ```html
@@ -246,11 +339,11 @@ h1 {
 </div>
 ```
 
-**العناصر الرئيسية الموضحة:**
-- **استخدام** `class="plant-holder"` لتنسيق الحاوية المتسق عبر جميع النباتات
-- **تطبيق** `class="plant"` لتنسيق السلوك والمظهر المشترك للصورة
-- **تضمين** معرف فريد `id="plant1"` للوضع الفردي وتفاعل JavaScript
-- **توفير** نص بديل وصفي لإمكانية الوصول لقارئات الشاشة
+**العناصر الرئيسية المفسرة:**
+- **استخدام** `class="plant-holder"` لتنسيق الحاوية بشكل متسق عبر جميع النباتات
+- **تطبيق** `class="plant"` لتنسيق الصورة المشتركة والسلوك
+- **تضمين** `id="plant1"` الفريد لوضع فردي وتفاعل JavaScript
+- **توفير** نص بديل وصفي لإمكانية الوصول لقراء الشاشة
 
 الآن أضف هذه الأنماط إلى ملف `style.css` الخاص بك:
 
@@ -275,14 +368,14 @@ h1 {
 ```
 
 **تفصيل هذه الأنماط:**
-- **إنشاء** وضع نسبي لحامل النبات لإنشاء سياق وضع
-- **تعيين** كل حامل نبات إلى ارتفاع 13%، مما يضمن أن جميع النباتات تناسب عموديًا دون التمرير
-- **تحريك** الحوامل قليلاً إلى اليسار لتوسيط النباتات بشكل أفضل داخل الحاويات
+- **إنشاء** وضع نسبي لحامل النبات لتأسيس سياق الوضع
+- **تعيين** كل حامل نبات إلى ارتفاع 13%، مما يضمن أن جميع النباتات تتناسب عموديًا دون التمرير
+- **تحريك** الحوامل قليلاً إلى اليسار لتوسيط النباتات بشكل أفضل داخل حاوياتها
 - **السماح** للنباتات بالتوسع بشكل استجابة باستخدام خصائص `max-width` و`max-height`
 - **استخدام** `z-index` لتكديس النباتات فوق العناصر الأخرى في التيراريوم
-- **إضافة** تأثير تحويم خفيف مع انتقالات CSS لتحسين تفاعل المستخدم
+- **إضافة** تأثير تحويم خفيف مع انتقالات CSS لتحسين التفاعل مع المستخدم
 
-✅ **التفكير النقدي**: لماذا نحتاج إلى كل من محددات `.plant-holder` و`.plant`؟ ماذا سيحدث إذا حاولنا استخدام واحد فقط؟
+✅ **التفكير النقدي**: لماذا نحتاج إلى كل من `.plant-holder` و`.plant`؟ ماذا سيحدث إذا حاولنا استخدام واحد فقط؟
 
 > 💡 **نمط التصميم**: الحاوية (`.plant-holder`) تتحكم في التخطيط والوضع، بينما المحتوى (`.plant`) يتحكم في المظهر والتوسع. هذا الفصل يجعل الكود أكثر قابلية للصيانة والمرونة.
 
@@ -290,14 +383,115 @@ h1 {
 
 وضع CSS يشبه أن تكون مخرج المسرح - توجه مكان وقوف كل ممثل وكيف يتحركون على المسرح. بعض الممثلين يتبعون التشكيل القياسي، بينما يحتاج الآخرون إلى وضع محدد لتأثير درامي.
 
-بمجرد فهم الوضع، تصبح العديد من تحديات التخطيط قابلة للإدارة. هل تحتاج إلى شريط تنقل يبقى في الأعلى أثناء التمرير؟ الوضع يتعامل مع ذلك. هل تريد نافذة منبثقة تظهر في موقع محدد؟ هذا أيضًا من خلال الوضع.
+بمجرد فهم الوضع، تصبح العديد من تحديات التخطيط قابلة للإدارة. هل تحتاج إلى شريط تنقل يبقى في الأعلى أثناء التمرير؟ الوضع يتعامل مع ذلك. هل تريد نافذة منبثقة تظهر في موقع معين؟ هذا أيضًا من خلال الوضع.
 
 ### القيم الخمس للوضع
 
+```mermaid
+quadrantChart
+    title CSS Positioning Strategy
+    x-axis Document Flow --> Removed from Flow
+    y-axis Static Position --> Precise Control
+    quadrant-1 Absolute
+    quadrant-2 Fixed
+    quadrant-3 Static
+    quadrant-4 Sticky
+    
+    Static: [0.2, 0.2]
+    Relative: [0.3, 0.6]
+    Absolute: [0.8, 0.8]
+    Fixed: [0.9, 0.7]
+    Sticky: [0.5, 0.9]
+```
+
 | قيمة الوضع | السلوك | حالة الاستخدام |
 |------------|--------|----------------|
-| `static` | التدفق الافتر
-لنقم ببناء جرة التيراريوم خطوة بخطوة. كل جزء يستخدم التمركز المطلق وأبعاد تعتمد على النسب المئوية لتصميم متجاوب:
+| `static` | التدفق الافتراضي، يتجاهل القيم العلوية/اليسرى/اليمنى/السفلية | تخطيط المستند العادي |
+| `relative` | يتم وضعه بالنسبة إلى موضعه الطبيعي | تعديلات صغيرة، إنشاء سياق الوضع |
+| `absolute` | يتم وضعه بالنسبة إلى أقرب عنصر ذو وضع محدد | وضع دقيق، تراكبات |
+| `fixed` | يتم وضعه بالنسبة إلى نافذة العرض | أشرطة التنقل، العناصر العائمة |
+| `sticky` | يتحول بين الوضع النسبي والثابت بناءً على التمرير | رؤوس تلتصق أثناء التمرير |
+
+### الوضع في التيراريوم الخاص بنا
+
+يستخدم التيراريوم الخاص بنا مزيجًا استراتيجيًا من أنواع الوضع لإنشاء التخطيط المطلوب:
+
+```css
+/* Container positioning */
+.container {
+  position: absolute; /* Removes from normal flow */
+  /* ... other styles ... */
+}
+
+/* Plant holder positioning */
+.plant-holder {
+  position: relative; /* Creates positioning context */
+  /* ... other styles ... */
+}
+
+/* Plant positioning */
+.plant {
+  position: absolute; /* Allows precise placement within holder */
+  /* ... other styles ... */
+}
+```
+
+**فهم استراتيجية الوضع:**
+- **الحاويات المطلقة** يتم إزالتها من تدفق المستند العادي وتثبيتها على حواف الشاشة
+- **حاملات النباتات النسبية** تنشئ سياق وضع بينما تبقى في تدفق المستند
+- **النباتات المطلقة** يمكن وضعها بدقة داخل حاوياتها النسبية
+- **هذا المزيج** يسمح للنباتات بالتكدس عموديًا بينما تكون قابلة للوضع الفردي
+
+> 🎯 **لماذا هذا مهم**: عناصر `plant` تحتاج إلى وضع مطلق لتصبح قابلة للسحب في الدرس التالي. الوضع المطلق يزيلها من تدفق التخطيط العادي، مما يجعل تفاعلات السحب والإفلات ممكنة.
+
+✅ **وقت التجربة**: حاول تغيير قيم الوضع ولاحظ النتائج:
+- ماذا يحدث إذا قمت بتغيير `.container` من `absolute` إلى `relative`؟
+- كيف يتغير التخطيط إذا استخدمت `.plant-holder` خاصية `absolute` بدلاً من `relative`؟
+- ماذا يحدث عند تغيير وضعية `.plant` إلى `relative`؟
+
+### 🔄 **مراجعة تعليمية**
+**إتقان تحديد المواقع باستخدام CSS**: توقف للتحقق من فهمك:
+- ✅ هل يمكنك شرح سبب حاجة النباتات إلى وضعية مطلقة للسحب والإفلات؟
+- ✅ هل تفهم كيف تخلق الحاويات النسبية سياقًا لتحديد المواقع؟
+- ✅ لماذا تستخدم الحاويات الجانبية وضعية مطلقة؟
+- ✅ ماذا سيحدث إذا أزلت التصريحات الخاصة بالوضعية تمامًا؟
+
+**صلة بالعالم الحقيقي**: فكر في كيفية تشابه تحديد المواقع باستخدام CSS مع التخطيط في العالم الحقيقي:
+- **Static**: الكتب على رف (ترتيب طبيعي)
+- **Relative**: تحريك كتاب قليلاً مع بقائه في مكانه
+- **Absolute**: وضع إشارة مرجعية على صفحة معينة
+- **Fixed**: ملاحظة لاصقة تبقى مرئية أثناء تقليب الصفحات
+
+## بناء التيراريوم باستخدام CSS
+
+الآن سنقوم ببناء جرة زجاجية باستخدام CSS فقط - دون الحاجة إلى صور أو برامج تصميم.
+
+إن إنشاء زجاج واقعي المظهر، الظلال، وتأثيرات العمق باستخدام تحديد المواقع والشفافية يظهر قدرات CSS البصرية. هذه التقنية تشبه كيف استخدم المعماريون في حركة باوهاوس أشكالًا هندسية بسيطة لإنشاء هياكل معقدة وجميلة. بمجرد فهم هذه المبادئ، ستتعرف على تقنيات CSS وراء العديد من تصميمات الويب.
+
+```mermaid
+flowchart LR
+    A[Jar Top] --> E[Complete Terrarium]
+    B[Jar Walls] --> E
+    C[Dirt Layer] --> E
+    D[Jar Bottom] --> E
+    F[Glass Effects] --> E
+    
+    A1["50% width<br/>5% height<br/>Top position"] --> A
+    B1["60% width<br/>80% height<br/>Rounded corners<br/>0.5 opacity"] --> B
+    C1["60% width<br/>5% height<br/>Dark brown<br/>Bottom layer"] --> C
+    D1["50% width<br/>1% height<br/>Bottom position"] --> D
+    F1["Subtle shadows<br/>Transparency<br/>Z-index layering"] --> F
+    
+    style E fill:#d1e1df,stroke:#3a241d
+    style A fill:#e8f5e8
+    style B fill:#e8f5e8
+    style C fill:#8B4513
+    style D fill:#e8f5e8
+```
+
+### إنشاء مكونات الجرة الزجاجية
+
+لنقم ببناء جرة التيراريوم قطعةً قطعة. كل جزء يستخدم تحديد المواقع المطلق وأبعادًا تعتمد على النسب المئوية لتصميم متجاوب:
 
 ```css
 .jar-walls {
@@ -350,15 +544,15 @@ h1 {
 ```
 
 **فهم بناء التيراريوم:**
-- **يستخدم** أبعاد تعتمد على النسب المئوية لتناسب جميع أحجام الشاشات
-- **يضع** العناصر بشكل مطلق لتكديسها ومحاذاتها بدقة
-- **يطبق** قيم شفافية مختلفة لإظهار تأثير الزجاج
+- **يستخدم** أبعادًا تعتمد على النسب المئوية لتناسب جميع أحجام الشاشات
+- **يحدد** العناصر بشكل مطلق لتكديسها ومحاذاتها بدقة
+- **يطبق** قيم شفافية مختلفة لإنشاء تأثير شفافية الزجاج
 - **ينفذ** طبقات `z-index` بحيث تظهر النباتات داخل الجرة
-- **يضيف** ظل خفيف وحواف منحنية للحصول على مظهر أكثر واقعية
+- **يضيف** ظلالًا خفيفة وزوايا دائرية محسنة لمظهر أكثر واقعية
 
 ### التصميم المتجاوب باستخدام النسب المئوية
 
-لاحظ كيف أن جميع الأبعاد تستخدم النسب المئوية بدلاً من القيم الثابتة بالبكسل:
+لاحظ كيف تستخدم جميع الأبعاد النسب المئوية بدلاً من القيم الثابتة بالبكسل:
 
 **لماذا هذا مهم:**
 - **يضمن** أن التيراريوم يتناسب بشكل متناسب مع أي حجم شاشة
@@ -368,39 +562,51 @@ h1 {
 
 ### وحدات CSS قيد التنفيذ
 
-نستخدم وحدات `rem` للحواف المنحنية، والتي تتناسب مع حجم الخط الأساسي. هذا يخلق تصاميم أكثر سهولة تحترم تفضيلات المستخدم للخطوط. تعرف على المزيد حول [وحدات CSS النسبية](https://www.w3.org/TR/css-values-3/#font-relative-lengths) في المواصفات الرسمية.
+نستخدم وحدات `rem` للزوايا الدائرية، والتي تتناسب مع حجم الخط الأساسي. هذا يخلق تصميمات أكثر سهولة تحترم تفضيلات المستخدم للخطوط. تعرف على المزيد حول [وحدات CSS النسبية](https://www.w3.org/TR/css-values-3/#font-relative-lengths) في المواصفات الرسمية.
 
-✅ **تجربة بصرية**: جرب تعديل هذه القيم ولاحظ التأثيرات:
+✅ **تجربة بصرية**: حاول تعديل هذه القيم وراقب التأثيرات:
 - قم بتغيير شفافية الجرة من 0.5 إلى 0.8 – كيف يؤثر ذلك على مظهر الزجاج؟
-- عدّل لون التراب من `#3a241d` إلى `#8B4513` – ما التأثير البصري لهذا التغيير؟
-- قم بتغيير `z-index` للتراب إلى 2 – ماذا يحدث للطبقات؟
+- عدّل لون التراب من `#3a241d` إلى `#8B4513` – ما التأثير البصري لهذا؟
+- غيّر `z-index` للتراب إلى 2 – ماذا يحدث للطبقات؟
+
+### 🔄 **مراجعة تعليمية**
+**فهم التصميم البصري باستخدام CSS**: تأكد من استيعابك لتصميم CSS البصري:
+- ✅ كيف تخلق الأبعاد القائمة على النسب المئوية تصميمًا متجاوبًا؟
+- ✅ لماذا تخلق الشفافية تأثير شفافية الزجاج؟
+- ✅ ما دور `z-index` في ترتيب الطبقات؟
+- ✅ كيف تساهم قيم الزوايا الدائرية في تشكيل الجرة؟
+
+**مبدأ التصميم**: لاحظ كيف نبني تصاميم معقدة من أشكال بسيطة:
+1. **مستطيلات** → **مستطيلات دائرية** → **مكونات الجرة**
+2. **ألوان مسطحة** → **شفافية** → **تأثير الزجاج**
+3. **عناصر فردية** → **تركيب طبقي** → **مظهر ثلاثي الأبعاد**
 
 ---
 
-## تحدي GitHub Copilot Agent 🚀
+## تحدي وكيل GitHub Copilot 🚀
 
-استخدم وضع Agent لإكمال التحدي التالي:
+استخدم وضع الوكيل لإكمال التحدي التالي:
 
-**الوصف:** قم بإنشاء حركة CSS تجعل نباتات التيراريوم تتمايل بلطف ذهابًا وإيابًا، مما يحاكي تأثير النسيم الطبيعي. سيساعدك هذا على ممارسة الحركات، التحويلات، والإطارات الرئيسية في CSS مع تحسين الجاذبية البصرية للتيراريوم.
+**الوصف:** قم بإنشاء حركة CSS تجعل نباتات التيراريوم تتأرجح بلطف ذهابًا وإيابًا، مما يحاكي تأثير النسيم الطبيعي. سيساعدك هذا على ممارسة الحركات باستخدام CSS، التحويلات، والإطارات الرئيسية مع تحسين الجاذبية البصرية للتيراريوم.
 
-**المهمة:** أضف حركات إطارات رئيسية في CSS لجعل النباتات في التيراريوم تتمايل بلطف من جانب إلى آخر. قم بإنشاء حركة تمايل تدور كل نبات قليلاً (2-3 درجات) يمينًا ويسارًا لمدة 3-4 ثوانٍ، وطبقها على الفئة `.plant`. تأكد من أن الحركة تتكرر بلا نهاية وتستخدم وظيفة تخفيف للحركة الطبيعية.
+**المهمة:** أضف حركات CSS باستخدام الإطارات الرئيسية لجعل النباتات في التيراريوم تتأرجح بلطف من جانب إلى آخر. قم بإنشاء حركة تأرجح تدور كل نبات قليلاً (2-3 درجات) يمينًا ويسارًا لمدة 3-4 ثوانٍ، وطبقها على فئة `.plant`. تأكد من أن الحركة تتكرر بلا نهاية وتحتوي على وظيفة تخفيف للحركة الطبيعية.
 
-تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## 🚀 تحدي: إضافة انعكاسات الزجاج
 
-هل أنت مستعد لتحسين التيراريوم بإضافة انعكاسات زجاجية واقعية؟ ستضيف هذه التقنية عمقًا وواقعية للتصميم.
+هل أنت مستعد لتعزيز التيراريوم بإضافة انعكاسات زجاجية واقعية؟ ستضيف هذه التقنية عمقًا وواقعية للتصميم.
 
-ستقوم بإنشاء لمسات خفيفة تحاكي كيفية انعكاس الضوء على الأسطح الزجاجية. هذه الطريقة مشابهة لتقنيات الرسامين في عصر النهضة مثل جان فان إيك الذين استخدموا الضوء والانعكاس لجعل الزجاج المرسوم يبدو ثلاثي الأبعاد. إليك ما تهدف إليه:
+ستقوم بإنشاء لمسات خفيفة تحاكي كيفية انعكاس الضوء على الأسطح الزجاجية. هذه الطريقة مشابهة لكيفية استخدام رسامي عصر النهضة مثل جان فان إيك الضوء والانعكاس لجعل الزجاج المرسوم يبدو ثلاثي الأبعاد. إليك ما تهدف إليه:
 
 ![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ar.png)
 
 **تحديك:**
-- **إنشاء** أشكال بيضاوية بيضاء أو فاتحة اللون للانعكاسات الزجاجية
-- **وضعها** بشكل استراتيجي على الجانب الأيسر من الجرة
-- **تطبيق** تأثيرات شفافية وضبابية مناسبة لانعكاس الضوء الواقعي
-- **استخدام** `border-radius` لإنشاء أشكال عضوية تشبه الفقاعات
-- **التجربة** باستخدام التدرجات أو الظلال لتحسين الواقعية
+- **قم بإنشاء** أشكال بيضاوية بيضاء أو فاتحة اللون للانعكاسات الزجاجية
+- **ضعها** بشكل استراتيجي على الجانب الأيسر من الجرة
+- **طبق** تأثيرات شفافية وضبابية مناسبة لانعكاس الضوء الواقعي
+- **استخدم** `border-radius` لإنشاء أشكال عضوية تشبه الفقاعات
+- **جرب** التدرجات أو الظلال لتحسين الواقعية
 
 ## اختبار ما بعد المحاضرة
 
@@ -418,20 +624,116 @@ h1 {
 
 ### موارد تعليمية تفاعلية
 
-مارس هذه المفاهيم مع هذه الألعاب العملية الممتعة:
+مارس هذه المفاهيم مع هذه الألعاب الممتعة والتفاعلية:
 - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - أتقن Flexbox من خلال تحديات ممتعة
 - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - تعلم CSS Grid عن طريق زراعة الجزر الافتراضي
 - 🎯 [CSS Battle](https://cssbattle.dev/) - اختبر مهاراتك في CSS مع تحديات البرمجة
 
 ### تعلم إضافي
 
-للحصول على أساسيات CSS شاملة، أكمل هذا الوحدة التعليمية من Microsoft: [صمم تطبيق HTML الخاص بك باستخدام CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+للحصول على أساسيات CSS شاملة، أكمل هذا الوحدة التعليمية من Microsoft Learn: [قم بتنسيق تطبيق HTML الخاص بك باستخدام CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **ما يمكنك فعله في الدقائق الخمس القادمة**
+- [ ] افتح أدوات المطور وافحص أنماط CSS على أي موقع باستخدام لوحة العناصر
+- [ ] أنشئ ملف CSS بسيط واربطه بصفحة HTML
+- [ ] حاول تغيير الألوان باستخدام طرق مختلفة: hex، RGB، وأسماء الألوان
+- [ ] مارس نموذج الصندوق بإضافة الحشو والهامش إلى div
+
+### 🎯 **ما يمكنك إنجازه خلال الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وراجع أساسيات CSS
+- [ ] قم بتنسيق صفحة HTML الخاصة بك باستخدام الخطوط، الألوان، والمسافات
+- [ ] أنشئ تخطيطًا بسيطًا باستخدام flexbox أو grid
+- [ ] جرب انتقالات CSS للحصول على تأثيرات سلسة
+- [ ] مارس التصميم المتجاوب باستخدام استعلامات الوسائط
+
+### 📅 **مغامرتك الأسبوعية مع CSS**
+- [ ] أكمل مهمة تصميم التيراريوم بإبداع
+- [ ] أتقن CSS Grid من خلال إنشاء تخطيط معرض صور
+- [ ] تعلم حركات CSS لإضفاء الحياة على تصميماتك
+- [ ] استكشف معالجات CSS مثل Sass أو Less
+- [ ] ادرس مبادئ التصميم وطبقها على CSS الخاص بك
+- [ ] قم بتحليل وإعادة إنشاء تصميمات مثيرة للاهتمام تجدها عبر الإنترنت
+
+### 🌟 **إتقان التصميم خلال شهر**
+- [ ] قم ببناء نظام تصميم موقع ويب كامل متجاوب
+- [ ] تعلم CSS-in-JS أو أطر العمل مثل Tailwind
+- [ ] ساهم في مشاريع مفتوحة المصدر بتحسينات CSS
+- [ ] أتقن مفاهيم CSS المتقدمة مثل الخصائص المخصصة والاحتواء
+- [ ] أنشئ مكتبات مكونات قابلة لإعادة الاستخدام باستخدام CSS المعياري
+- [ ] قم بتوجيه الآخرين الذين يتعلمون CSS وشارك معرفتك في التصميم
+
+## 🎯 جدول زمني لإتقان CSS
+
+```mermaid
+timeline
+    title CSS Learning Progression
+    
+    section Foundation (10 minutes)
+        File Connection: Link CSS to HTML
+                       : Understand cascade rules
+                       : Learn inheritance basics
+        
+    section Selectors (15 minutes)
+        Targeting Elements: Element selectors
+                          : Class patterns
+                          : ID specificity
+                          : Combinators
+        
+    section Box Model (20 minutes)
+        Layout Fundamentals: Margin and padding
+                           : Border properties
+                           : Content sizing
+                           : Box-sizing behavior
+        
+    section Positioning (25 minutes)
+        Element Placement: Static vs relative
+                         : Absolute positioning
+                         : Z-index layering
+                         : Responsive units
+        
+    section Visual Design (30 minutes)
+        Styling Mastery: Colors and opacity
+                       : Shadows and effects
+                       : Transitions
+                       : Transform properties
+        
+    section Responsive Design (45 minutes)
+        Multi-Device Support: Media queries
+                            : Flexible layouts
+                            : Mobile-first approach
+                            : Viewport optimization
+        
+    section Advanced Techniques (1 week)
+        Modern CSS: Flexbox layouts
+                  : CSS Grid systems
+                  : Custom properties
+                  : Animation keyframes
+        
+    section Professional Skills (1 month)
+        CSS Architecture: Component patterns
+                        : Maintainable code
+                        : Performance optimization
+                        : Cross-browser compatibility
+```
+
+### 🛠️ ملخص أدوات CSS الخاصة بك
+
+بعد إكمال هذا الدرس، لديك الآن:
+- **فهم التدرج**: كيف ترث الأنماط وتتجاوز بعضها البعض
+- **إتقان التحديد**: استهداف دقيق باستخدام العناصر، الفئات، والمعرفات
+- **مهارات تحديد المواقع**: وضع العناصر بشكل استراتيجي وترتيبها
+- **تصميم بصري**: إنشاء تأثيرات الزجاج، الظلال، والشفافية
+- **تقنيات متجاوبة**: تخطيطات تعتمد على النسب المئوية تتكيف مع أي شاشة
+- **تنظيم الكود**: هيكل CSS نظيف وقابل للصيانة
+- **ممارسات حديثة**: استخدام الوحدات النسبية وأنماط التصميم السهلة الوصول
+
+**الخطوات التالية**: أصبح التيراريوم الخاص بك الآن يحتوي على الهيكل (HTML) والأسلوب (CSS). الدرس الأخير سيضيف التفاعل باستخدام JavaScript!
 
-## الواجب
+## المهمة
 
 [إعادة هيكلة CSS](assignment.md)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ar/3-terrarium/3-intro-to-DOM-and-closures/README.md
index 5c53c16865..27a4c298e4 100644
--- a/translations/ar/3-terrarium/3-intro-to-DOM-and-closures/README.md
+++ b/translations/ar/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -1,22 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "bc93f6285423033ebf5b8abeb5282888",
-  "translation_date": "2025-10-22T14:15:39+00:00",
+  "original_hash": "973e48ad87d67bf5bb819746c9f8e302",
+  "translation_date": "2025-11-03T12:35:54+00:00",
   "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
   "language_code": "ar"
 }
 -->
 # مشروع التيراريوم الجزء الثالث: التلاعب بـ DOM والإغلاق في JavaScript
 
+```mermaid
+journey
+    title Your JavaScript DOM Journey
+    section Foundation
+      Understand DOM: 3: Student
+      Learn closures: 4: Student
+      Connect elements: 4: Student
+    section Interaction
+      Setup drag events: 4: Student
+      Track coordinates: 5: Student
+      Handle movement: 5: Student
+    section Polish
+      Add cleanup: 4: Student
+      Test functionality: 5: Student
+      Complete terrarium: 5: Student
+```
+
 ![DOM والإغلاق](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ar.png)
 > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
 
-مرحبًا بك في أحد أكثر جوانب تطوير الويب إثارة - جعل الأشياء تفاعلية! نموذج كائن المستند (DOM) هو بمثابة جسر بين HTML وJavaScript، واليوم سنستخدمه لإحياء التيراريوم الخاص بك. عندما أنشأ Tim Berners-Lee أول متصفح ويب، كان يتصور شبكة يمكن أن تكون ديناميكية وتفاعلية - وDOM يجعل هذا التصور ممكنًا.
+مرحبًا بكم في أحد أكثر جوانب تطوير الويب إثارة - جعل الأشياء تفاعلية! نموذج كائن المستند (DOM) هو بمثابة جسر بين HTML و JavaScript، واليوم سنستخدمه لإضفاء الحياة على التيراريوم الخاص بك. عندما أنشأ Tim Berners-Lee أول متصفح ويب، كان يتصور شبكة يمكن أن تكون ديناميكية وتفاعلية - و DOM يجعل هذا التصور ممكنًا.
 
 سنستكشف أيضًا الإغلاق في JavaScript، والذي قد يبدو مخيفًا في البداية. فكر في الإغلاق كإنشاء "جيوب ذاكرة" حيث يمكن لوظائفك تذكر معلومات مهمة. إنه مثل كل نبات في التيراريوم الخاص بك لديه سجل بيانات خاص به لتتبع موقعه. بنهاية هذا الدرس، ستفهم مدى طبيعتها وفائدتها.
 
-إليك ما سنبنيه: تيراريوم يمكن للمستخدمين فيه سحب وإفلات النباتات في أي مكان يريدونه. ستتعلم تقنيات التلاعب بـ DOM التي تدعم كل شيء بدءًا من تحميل الملفات بالسحب والإفلات إلى الألعاب التفاعلية. دعنا نجعل التيراريوم الخاص بك ينبض بالحياة.
+إليك ما سنبنيه: تيراريوم يمكن للمستخدمين فيه سحب وإفلات النباتات في أي مكان يريدونه. ستتعلم تقنيات التلاعب بـ DOM التي تشغل كل شيء بدءًا من تحميل الملفات بالسحب والإفلات إلى الألعاب التفاعلية. دعونا نجعل التيراريوم الخاص بك ينبض بالحياة.
+
+```mermaid
+mindmap
+  root((DOM & JavaScript))
+    DOM Tree
+      Element Selection
+      Property Access
+      Event Handling
+      Dynamic Updates
+    Events
+      Pointer Events
+      Mouse Events
+      Touch Events
+      Event Listeners
+    Closures
+      Private Variables
+      Function Scope
+      Memory Persistence
+      State Management
+    Drag & Drop
+      Position Tracking
+      Coordinate Math
+      Event Lifecycle
+      User Interaction
+    Modern Patterns
+      Event Delegation
+      Performance
+      Cross-Device
+      Accessibility
+```
 
 ## اختبار ما قبل المحاضرة
 
@@ -26,13 +73,43 @@ CO_OP_TRANSLATOR_METADATA:
 
 نموذج كائن المستند (DOM) هو الطريقة التي يتواصل بها JavaScript مع عناصر HTML الخاصة بك. عندما يقوم متصفحك بتحميل صفحة HTML، فإنه ينشئ تمثيلًا منظمًا لتلك الصفحة في الذاكرة - هذا هو DOM. فكر فيه كشجرة عائلية حيث كل عنصر HTML هو عضو في العائلة يمكن لـ JavaScript الوصول إليه أو تعديله أو إعادة ترتيبه.
 
-التلاعب بـ DOM يحول الصفحات الثابتة إلى مواقع ويب تفاعلية. في كل مرة ترى فيها زرًا يغير لونه عند التمرير، أو تحديث المحتوى دون إعادة تحميل الصفحة، أو عناصر يمكنك سحبها، فهذا هو عمل DOM.
+التلاعب بـ DOM يحول الصفحات الثابتة إلى مواقع ويب تفاعلية. في كل مرة ترى فيها زرًا يغير لونه عند التمرير، أو تحديث المحتوى دون إعادة تحميل الصفحة، أو عناصر يمكنك سحبها، فهذا هو عمل التلاعب بـ DOM.
+
+```mermaid
+flowchart TD
+    A["Document"] --> B["HTML"]
+    B --> C["Head"]
+    B --> D["Body"]
+    C --> E["Title"]
+    C --> F["Meta Tags"]
+    D --> G["H1: My Terrarium"]
+    D --> H["Div: Page Container"]
+    H --> I["Div: Left Container"]
+    H --> J["Div: Right Container"]
+    H --> K["Div: Terrarium"]
+    I --> L["Plant Elements 1-7"]
+    J --> M["Plant Elements 8-14"]
+    
+    L --> N["img#plant1"]
+    L --> O["img#plant2"]
+    M --> P["img#plant8"]
+    M --> Q["img#plant9"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style D fill:#e8f5e8
+    style H fill:#fff3e0
+    style N fill:#ffebee
+    style O fill:#ffebee
+    style P fill:#ffebee
+    style Q fill:#ffebee
+```
 
 ![تمثيل شجرة DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ar.png)
 
 > تمثيل لـ DOM وعلامات HTML التي تشير إليه. من [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
 
-**ما الذي يجعل DOM قويًا:**
+**ما يجعل DOM قويًا:**
 - **يوفر** طريقة منظمة للوصول إلى أي عنصر في صفحتك
 - **يمكن** من تحديث المحتوى الديناميكي دون إعادة تحميل الصفحة
 - **يسمح** بالاستجابة الفورية لتفاعلات المستخدم مثل النقرات والسحب
@@ -40,11 +117,38 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## الإغلاق في JavaScript: إنشاء كود منظم وقوي
 
-الإغلاق في [JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures) يشبه إعطاء وظيفة مساحة عمل خاصة بها مع ذاكرة مستمرة. فكر في كيفية تطوير طيور داروين في جزر غالاباغوس مناقير متخصصة بناءً على بيئتها المحددة - يعمل الإغلاق بطريقة مشابهة، حيث ينشئ وظائف متخصصة "تتذكر" سياقها المحدد حتى بعد انتهاء وظيفة الوالد.
+[الإغلاق في JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures) يشبه إعطاء وظيفة مساحة عمل خاصة بها مع ذاكرة مستمرة. فكر في كيفية تطوير طيور داروين في جزر غالاباغوس مناقير متخصصة بناءً على بيئتها المحددة - يعمل الإغلاق بطريقة مشابهة، حيث ينشئ وظائف متخصصة "تتذكر" سياقها المحدد حتى بعد انتهاء وظيفة الوالد.
 
 في التيراريوم الخاص بنا، يساعد الإغلاق كل نبات على تذكر موقعه الخاص بشكل مستقل. يظهر هذا النمط في جميع أنحاء تطوير JavaScript الاحترافي، مما يجعله مفهومًا قيمًا لفهمه.
 
-> 💡 **فهم الإغلاق**: الإغلاق موضوع مهم في JavaScript، ويستخدمه العديد من المطورين لسنوات قبل أن يفهموا جميع الجوانب النظرية بالكامل. اليوم، نركز على التطبيق العملي - سترى الإغلاق يظهر بشكل طبيعي أثناء بناء ميزاتنا التفاعلية. الفهم سيتطور عندما ترى كيف يحل المشاكل الحقيقية.
+```mermaid
+flowchart LR
+    A["dragElement(plant1)"] --> B["Creates Closure"]
+    A2["dragElement(plant2)"] --> B2["Creates Closure"]
+    
+    B --> C["Private Variables"]
+    B2 --> C2["Private Variables"]
+    
+    C --> D["pos1, pos2, pos3, pos4"]
+    C --> E["pointerDrag function"]
+    C --> F["elementDrag function"]
+    C --> G["stopElementDrag function"]
+    
+    C2 --> D2["pos1, pos2, pos3, pos4"]
+    C2 --> E2["pointerDrag function"]
+    C2 --> F2["elementDrag function"]
+    C2 --> G2["stopElementDrag function"]
+    
+    H["Plant 1 remembers its position"] --> B
+    H2["Plant 2 remembers its position"] --> B2
+    
+    style B fill:#e8f5e8
+    style B2 fill:#e8f5e8
+    style C fill:#fff3e0
+    style C2 fill:#fff3e0
+```
+
+> 💡 **فهم الإغلاق**: الإغلاق موضوع مهم في JavaScript، ويستخدمه العديد من المطورين لسنوات قبل أن يفهموا جميع الجوانب النظرية بالكامل. اليوم، نركز على التطبيق العملي - سترى الإغلاق يظهر بشكل طبيعي أثناء بناء ميزاتنا التفاعلية. الفهم سيتطور عندما ترى كيف يحل مشاكل حقيقية.
 
 ![تمثيل شجرة DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ar.png)
 
@@ -54,7 +158,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## قبل أن نبدأ: الإعداد للنجاح
 
-ستحتاج إلى ملفات HTML وCSS الخاصة بك من دروس التيراريوم السابقة - نحن على وشك جعل هذا التصميم الثابت تفاعليًا. إذا كنت تنضم لأول مرة، فإن إكمال تلك الدروس أولاً سيوفر سياقًا مهمًا.
+ستحتاج إلى ملفات HTML و CSS الخاصة بك من دروس التيراريوم السابقة - نحن على وشك جعل هذا التصميم الثابت تفاعليًا. إذا كنت تنضم لأول مرة، فإن إكمال تلك الدروس أولاً سيوفر سياقًا مهمًا.
 
 إليك ما سنبنيه:
 - **سحب وإفلات سلس** لجميع نباتات التيراريوم
@@ -92,7 +196,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 قبل أن نتمكن من جعل العناصر قابلة للسحب، يحتاج JavaScript إلى تحديد موقعها في DOM. فكر في هذا كنظام فهرسة مكتبة - بمجرد أن تحصل على رقم الفهرس، يمكنك العثور على الكتاب الذي تحتاجه والوصول إلى جميع محتوياته.
 
-سنستخدم طريقة `document.getElementById()` لإجراء هذه الاتصالات. إنها مثل وجود نظام تصنيف دقيق - تقدم معرفًا، ويحدد بالضبط العنصر الذي تحتاجه في HTML الخاص بك.
+سنستخدم طريقة `document.getElementById()` لإجراء هذه الاتصالات. إنها مثل وجود نظام تصنيف دقيق - تقدم معرفًا، ويحدد بالضبط العنصر الذي تحتاجه في HTML.
 
 ### تمكين وظيفة السحب لجميع النباتات
 
@@ -116,22 +220,32 @@ dragElement(document.getElementById('plant13'));
 dragElement(document.getElementById('plant14'));
 ```
 
-**ما الذي يحققه هذا الكود:**
+**ما يحققه هذا الكود:**
 - **يحدد** كل عنصر نبات في DOM باستخدام معرفه الفريد
 - **يسترجع** مرجع JavaScript لكل عنصر HTML
 - **يمرر** كل عنصر إلى وظيفة `dragElement` (التي سننشئها لاحقًا)
 - **يجهز** كل نبات للتفاعل بالسحب والإفلات
 - **يربط** هيكل HTML الخاص بك بوظائف JavaScript
 
-> 🎯 **لماذا نستخدم المعرفات بدلاً من الفئات؟** توفر المعرفات معرفات فريدة لعناصر محددة، بينما تم تصميم الفئات CSS لتنسيق مجموعات من العناصر. عندما يحتاج JavaScript إلى التلاعب بعناصر فردية، توفر المعرفات الدقة والأداء الذي نحتاجه.
+> 🎯 **لماذا نستخدم المعرفات بدلاً من الفئات؟** توفر المعرفات معرفات فريدة لعناصر محددة، بينما تم تصميم الفئات CSS لتنسيق مجموعات من العناصر. عندما يحتاج JavaScript إلى التلاعب بالعناصر الفردية، توفر المعرفات الدقة والأداء الذي نحتاجه.
+
+> 💡 **نصيحة احترافية**: لاحظ كيف نقوم باستدعاء `dragElement()` لكل نبات بشكل فردي. يضمن هذا النهج أن يحصل كل نبات على سلوك سحب مستقل خاص به، وهو أمر ضروري لتفاعل المستخدم السلس.
+
+### 🔄 **توقف تربوي**
+**فهم اتصال DOM**: قبل الانتقال إلى وظيفة السحب، تحقق من أنك تستطيع:
+- ✅ شرح كيف يحدد `document.getElementById()` عناصر HTML
+- ✅ فهم لماذا نستخدم معرفات فريدة لكل نبات
+- ✅ وصف الغرض من خاصية `defer` في علامات السكربت
+- ✅ التعرف على كيفية اتصال JavaScript و HTML عبر DOM
 
-> 💡 **نصيحة احترافية**: لاحظ كيف نقوم باستدعاء `dragElement()` لكل نبات بشكل فردي. يضمن هذا النهج أن يحصل كل نبات على سلوك سحب مستقل، وهو أمر ضروري لتفاعل المستخدم السلس.
+**اختبار ذاتي سريع**: ماذا سيحدث إذا كان هناك عنصران لهما نفس المعرف؟ لماذا يعيد `getElementById()` عنصرًا واحدًا فقط؟
+*الإجابة: يجب أن تكون المعرفات فريدة؛ إذا تكررت، يتم إرجاع العنصر الأول فقط*
 
 ---
 
 ## بناء إغلاق وظيفة السحب
 
-الآن سننشئ قلب وظيفة السحب: إغلاق يدير سلوك السحب لكل نبات. يحتوي هذا الإغلاق على وظائف داخلية متعددة تعمل معًا لتتبع حركات الماوس وتحديث مواقع العناصر.
+الآن سننشئ قلب وظيفة السحب الخاصة بنا: إغلاق يدير سلوك السحب لكل نبات. يحتوي هذا الإغلاق على وظائف داخلية متعددة تعمل معًا لتتبع حركات الماوس وتحديث مواقع العناصر.
 
 الإغلاق مثالي لهذه المهمة لأنه يسمح لنا بإنشاء متغيرات "خاصة" تستمر بين استدعاءات الوظائف، مما يمنح كل نبات نظام تتبع إحداثيات مستقل.
 
@@ -156,11 +270,11 @@ console.log(myCounter()); // 1
 console.log(myCounter()); // 2
 ```
 
-**ما الذي يحدث في هذا النمط من الإغلاق:**
+**ما يحدث في هذا النمط من الإغلاق:**
 - **ينشئ** متغير `count` خاصًا موجودًا فقط داخل هذا الإغلاق
 - **يمكن للوظيفة الداخلية** الوصول إلى هذا المتغير الخارجي وتعديله (آلية الإغلاق)
 - **عندما نعيد** الوظيفة الداخلية، فإنها تحافظ على اتصالها بالبيانات الخاصة
-- **حتى بعد** انتهاء `createCounter()`، يستمر `count` ويتذكر قيمته
+- **حتى بعد** انتهاء تنفيذ `createCounter()`، يستمر `count` ويتذكر قيمته
 
 ### لماذا الإغلاق مثالي لوظيفة السحب
 
@@ -170,13 +284,41 @@ console.log(myCounter()); // 2
 - **يحافظ** على متغيرات الموقع الخاصة لكل نبات بشكل مستقل
 - **يحفظ** بيانات الإحداثيات بين أحداث السحب
 - **يمنع** تعارض المتغيرات بين العناصر القابلة للسحب المختلفة
-- **يخلق** هيكل كود نظيف ومنظم
+- **ينشئ** هيكل كود نظيف ومنظم
 
 > 🎯 **هدف التعلم**: لا تحتاج إلى إتقان كل جانب من جوانب الإغلاق الآن. ركز على رؤية كيف تساعدنا في تنظيم الكود والحفاظ على الحالة لوظيفة السحب.
 
+```mermaid
+stateDiagram-v2
+    [*] --> Ready: Page loads
+    Ready --> DragStart: User presses down (pointerdown)
+    DragStart --> Dragging: Mouse/finger moves (pointermove)
+    Dragging --> Dragging: Continue moving
+    Dragging --> DragEnd: User releases (pointerup)
+    DragEnd --> Ready: Reset for next drag
+    
+    state DragStart {
+        [*] --> CapturePosition
+        CapturePosition --> SetupListeners
+        SetupListeners --> [*]
+    }
+    
+    state Dragging {
+        [*] --> CalculateMovement
+        CalculateMovement --> UpdatePosition
+        UpdatePosition --> [*]
+    }
+    
+    state DragEnd {
+        [*] --> RemoveListeners
+        RemoveListeners --> CleanupState
+        CleanupState --> [*]
+    }
+```
+
 ### إنشاء وظيفة dragElement
 
-الآن دعونا نبني الوظيفة الرئيسية التي ستتعامل مع كل منطق السحب. أضف هذه الوظيفة أسفل تعريفات عناصر النبات:
+الآن دعونا نبني الوظيفة الرئيسية التي ستتعامل مع كل منطق السحب. أضف هذه الوظيفة أسفل تعريفات عناصر النبات الخاصة بك:
 
 ```javascript
 function dragElement(terrariumElement) {
@@ -191,20 +333,182 @@ function dragElement(terrariumElement) {
 }
 ```
 
-**فهم نظام تتبع المواقع:**
+**فهم نظام تتبع الموقع:**
 - **`pos1` و `pos2`**: تخزن الفرق بين مواقع الماوس القديمة والجديدة
-- **`pos3` و `pos4`**: تتبع إحداثيات الما
-- **`pos3` و `pos4`**: تخزين موقع الماوس الحالي للحساب التالي  
-- **`offsetTop` و `offsetLeft`**: الحصول على الموقع الحالي للعنصر على الصفحة  
-- **منطق الطرح**: يحرك العنصر بنفس مقدار حركة الماوس  
+- **`pos3` و `pos4`**: تتبع إحداثيات الماوس الحالية
+- **`terrariumElement`**: العنصر النباتي المحدد الذي نجعله قابلًا للسحب
+- **`onpointerdown`**: الحدث الذي يتم تشغيله عندما يبدأ المستخدم السحب
+
+**كيف يعمل نمط الإغلاق:**
+- **ينشئ** متغيرات موقع خاصة لكل عنصر نباتي
+- **يحافظ** على هذه المتغيرات طوال دورة حياة السحب
+- **يضمن** أن كل نبات يتتبع إحداثياته بشكل مستقل
+- **يوفر** واجهة نظيفة من خلال وظيفة `dragElement`
+
+### لماذا نستخدم أحداث المؤشر؟
+
+قد تتساءل لماذا نستخدم `onpointerdown` بدلاً من `onclick` الأكثر شيوعًا. إليك السبب:
+
+| نوع الحدث | الأفضل لـ | العائق |
+|-----------|-----------|--------|
+| `onclick` | نقرات الأزرار البسيطة | لا يمكنه التعامل مع السحب (فقط النقر والإفلات) |
+| `onpointerdown` | الماوس واللمس معًا | أحدث، لكنه مدعوم بشكل جيد هذه الأيام |
+| `onmousedown` | الماوس المكتبي فقط | يترك مستخدمي الهواتف المحمولة خارج الحساب |
+
+**لماذا أحداث المؤشر مثالية لما نبنيه:**
+- **تعمل بشكل رائع** سواء كان شخص يستخدم الماوس أو الإصبع أو حتى القلم
+- **تشعر بنفس الطريقة** على الكمبيوتر المحمول أو الجهاز اللوحي أو الهاتف
+- **تتعامل** مع حركة السحب الفعلية (ليس فقط النقر والانتهاء)
+- **تخلق** تجربة سلسة يتوقعها المستخدمون من تطبيقات الويب الحديثة
+
+> 💡 **التحديث للمستقبل**: أحداث المؤشر هي الطريقة الحديثة للتعامل مع تفاعلات المستخدم. بدلاً من كتابة كود منفصل للماوس واللمس، تحصل على كلاهما مجانًا. رائع، أليس كذلك؟
+
+### 🔄 **توقف تربوي**
+**فهم التعامل مع الأحداث**: توقف لتأكيد فهمك للأحداث:
+- ✅ لماذا نستخدم أحداث المؤشر بدلاً من أحداث الماوس؟
+- ✅ كيف تستمر متغيرات الإغلاق بين استدعاءات الوظائف؟
+- ✅ ما دور `preventDefault()` في السحب السلس؟
+- ✅ لماذا نربط المستمعين بالمستند بدلاً من العناصر الفردية؟
+
+**اتصال بالعالم الحقيقي**: فكر في واجهات السحب والإفلات التي تستخدمها يوميًا:
+- **تحميل الملفات**: سحب الملفات إلى نافذة المتصفح
+- **لوحات كانبان**: نقل المهام بين الأعمدة
+- **معارض الصور**: إعادة ترتيب ترتيب الصور
+- **واجهات الهواتف المحمولة**: السحب والإفلات على الشاشات التي تعمل باللمس
+
+---
+
+## وظيفة pointerDrag: التقاط بداية السحب
+
+عندما يضغط المستخدم على نبات (سواء بنقرة الماوس أو لمسة الإصبع)، تبدأ وظيفة `pointerDrag` في العمل. تلتقط هذه الوظيفة الإحداثيات الأولية وتعد نظام السحب.
+
+أضف هذه الوظيفة داخل إغلاق `dragElement`، مباشرة بعد السطر `terrariumElement.onpointerdown = pointerDrag;`:
+
+```javascript
+function pointerDrag(e) {
+    // Prevent default browser behavior (like text selection)
+    e.preventDefault();
+    
+    // Capture the initial mouse/touch position
+    pos3 = e.clientX;  // X coordinate where drag started
+    pos4 = e.clientY;  // Y coordinate where drag started
+    
+    // Set up event listeners for the dragging process
+    document.onpointermove = elementDrag;
+    document.onpointerup = stopElementDrag;
+}
+```
+
+**خطوة بخطوة، إليك ما يحدث:**
+- **يمنع** سلوكيات المتصفح الافتراضية التي قد تتداخل مع السحب
+- **يسجل** الإحداثيات الدقيقة حيث بدأ المستخدم إيماءة السحب
+- **يؤسس** مستمعي الأحداث لحركة السحب المستمرة
+- **يجهز** النظام لتتبع حركة الماوس/الإصبع عبر المستند بأكمله
+
+### فهم منع الأحداث
+
+السطر `e.preventDefault()` ضروري للسحب السلس:
+
+**بدون المنع، قد تقوم المتصفحات بـ:**
+- **تحديد** النص عند السحب عبر الصفحة
+- **تشغيل** قوائم السياق عند السحب بالنقر الأيمن
+- **التداخل** مع سلوك السحب المخصص الخاص بنا
+- **إنشاء** آثار بصرية أثناء عملية السحب
+
+> 🔍 **تجربة**: بعد إكمال هذا الدرس، حاول إزالة `e.preventDefault()` وشاهد كيف يؤثر ذلك على تجربة السحب. ستفهم بسرعة لماذا هذا السطر ضروري!
+
+### نظام تتبع الإحداثيات
+
+تعطينا خصائص `e.clientX` و `e.clientY` إحداثيات الماوس/اللمس الدقيقة:
 
-**تفصيل حساب الحركة:**  
-1. **قياس** الفرق بين مواقع الماوس القديمة والجديدة  
-2. **حساب** مقدار حركة العنصر بناءً على حركة الماوس  
-3. **تحديث** خصائص موقع CSS للعنصر في الوقت الفعلي  
-4. **تخزين** الموقع الجديد كقاعدة للحساب التالي  
+| الخاصية | ما تقيسه | حالة الاستخدام |
+|---------|----------|----------------|
+| `clientX` | الموقع الأفقي بالنسبة إلى نافذة العرض | تتبع الحركة يمينًا ويسارًا |
+| `clientY` | الموقع العمودي بالنسبة إلى نافذة العرض | تتبع الحركة لأعلى وأسفل |
+**فهم هذه الإحداثيات:**
+- **توفر** معلومات دقيقة عن موضع البكسل
+- **تتحدث** في الوقت الفعلي مع تحرك المؤشر
+- **تظل** متسقة عبر أحجام الشاشات ومستويات التكبير المختلفة
+- **تمكن** من تفاعلات السحب السلسة والاستجابة
 
-### تمثيل مرئي للرياضيات  
+### إعداد مستمعي الأحداث على مستوى المستند
+
+لاحظ كيف نقوم بإرفاق أحداث الحركة والتوقف بكامل `document`، وليس فقط بعنصر النبات:
+
+```javascript
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+
+**لماذا نرفقها بالمستند:**
+- **تستمر** في التتبع حتى عندما يغادر الماوس عنصر النبات
+- **تمنع** انقطاع السحب إذا تحرك المستخدم بسرعة
+- **توفر** سحبًا سلسًا عبر الشاشة بأكملها
+- **تتعامل** مع الحالات الخاصة عندما يتحرك المؤشر خارج نافذة المتصفح
+
+> ⚡ **ملاحظة أداء**: سنقوم بتنظيف مستمعي الأحداث على مستوى المستند عند توقف السحب لتجنب تسرب الذاكرة ومشاكل الأداء.
+
+## إكمال نظام السحب: الحركة والتنظيف
+
+الآن سنضيف الوظيفتين المتبقيتين اللتين تتعاملان مع حركة السحب الفعلية وتنظيف الأحداث عند توقف السحب. تعمل هذه الوظائف معًا لإنشاء حركة نبات سلسة واستجابة عبر التيراريوم الخاص بك.
+
+### وظيفة elementDrag: تتبع الحركة
+
+أضف وظيفة `elementDrag` بعد القوس المغلق لـ `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+    // Calculate the distance moved since the last event
+    pos1 = pos3 - e.clientX;  // Horizontal distance moved
+    pos2 = pos4 - e.clientY;  // Vertical distance moved
+    
+    // Update the current position tracking
+    pos3 = e.clientX;  // New current X position
+    pos4 = e.clientY;  // New current Y position
+    
+    // Apply the movement to the element's position
+    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
+}
+```
+
+**فهم رياضيات الإحداثيات:**
+- **`pos1` و `pos2`**: تحسب المسافة التي تحركها الماوس منذ التحديث الأخير
+- **`pos3` و `pos4`**: تخزن موضع الماوس الحالي للحساب التالي
+- **`offsetTop` و `offsetLeft`**: تحصل على موضع العنصر الحالي على الصفحة
+- **منطق الطرح**: يحرك العنصر بنفس مقدار حركة الماوس
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    User->>Mouse: Start drag at (100, 50)
+    Mouse->>JavaScript: pointerdown event
+    JavaScript->>JavaScript: Store initial position (pos3=100, pos4=50)
+    JavaScript->>JavaScript: Setup move/up listeners
+    
+    User->>Mouse: Move to (110, 60)
+    Mouse->>JavaScript: pointermove event
+    JavaScript->>JavaScript: Calculate: pos1=10, pos2=10
+    JavaScript->>Plant: Update: left += 10px, top += 10px
+    Plant->>Plant: Render at new position
+    
+    User->>Mouse: Release at (120, 65)
+    Mouse->>JavaScript: pointerup event
+    JavaScript->>JavaScript: Remove listeners
+    JavaScript->>JavaScript: Reset for next drag
+```
+
+**تفصيل حساب الحركة:**
+1. **يقيس** الفرق بين مواضع الماوس القديمة والجديدة
+2. **يحسب** مقدار حركة العنصر بناءً على حركة الماوس
+3. **يحدث** خصائص موضع CSS للعنصر في الوقت الفعلي
+4. **يخزن** الموضع الجديد كمرجع للحساب التالي
+
+### التمثيل البصري للرياضيات
 
 ```mermaid
 sequenceDiagram
@@ -217,10 +521,10 @@ sequenceDiagram
     JavaScript->>Plant: Update position by +10px right, +10px down
     Plant->>Plant: Render at new position
 ```
-  
-### وظيفة stopElementDrag: التنظيف  
 
-أضف وظيفة التنظيف بعد القوس المغلق لـ `elementDrag`:  
+### وظيفة stopElementDrag: التنظيف
+
+أضف وظيفة التنظيف بعد القوس المغلق لـ `elementDrag`:
 
 ```javascript
 function stopElementDrag() {
@@ -229,136 +533,245 @@ function stopElementDrag() {
     document.onpointermove = null;
 }
 ```
-  
-**لماذا التنظيف ضروري:**  
-- **يمنع** تسرب الذاكرة الناتج عن مستمعي الأحداث المتبقين  
-- **يوقف** سلوك السحب عند إفلات المستخدم للنبات  
-- **يسمح** بسحب عناصر أخرى بشكل مستقل  
-- **يعيد** النظام للعملية التالية للسحب  
 
-**ما الذي يحدث بدون التنظيف:**  
-- مستمعو الأحداث يستمرون في العمل حتى بعد توقف السحب  
-- أداء النظام يتدهور مع تراكم المستمعين غير المستخدمين  
-- سلوك غير متوقع عند التفاعل مع عناصر أخرى  
-- موارد المتصفح تُهدر على معالجة أحداث غير ضرورية  
+**لماذا التنظيف ضروري:**
+- **يمنع** تسرب الذاكرة الناتج عن مستمعي الأحداث المتبقين
+- **يوقف** سلوك السحب عند إفلات المستخدم للنبات
+- **يسمح** بسحب عناصر أخرى بشكل مستقل
+- **يعيد ضبط** النظام لعملية السحب التالية
+
+**ما الذي يحدث بدون التنظيف:**
+- تستمر مستمعات الأحداث في العمل حتى بعد توقف السحب
+- يتدهور الأداء مع تراكم المستمعين غير المستخدمين
+- سلوك غير متوقع عند التفاعل مع عناصر أخرى
+- يتم استهلاك موارد المتصفح في معالجة أحداث غير ضرورية
+
+### فهم خصائص موضع CSS
 
-### فهم خصائص موقع CSS  
+نظام السحب الخاص بنا يتلاعب بخصائص CSS الرئيسية التالية:
 
-نظام السحب الخاص بنا يتعامل مع خاصيتين رئيسيتين في CSS:  
+| الخاصية | ما تتحكم به | كيف نستخدمها |
+|---------|-------------|--------------|
+| `top` | المسافة من الحافة العلوية | تحديد الموضع العمودي أثناء السحب |
+| `left` | المسافة من الحافة اليسرى | تحديد الموضع الأفقي أثناء السحب |
 
-| الخاصية | ما تتحكم به | كيف نستخدمها |  
-|---------|-------------|--------------|  
-| `top` | المسافة من الحافة العلوية | تحديد الموقع العمودي أثناء السحب |  
-| `left` | المسافة من الحافة اليسرى | تحديد الموقع الأفقي أثناء السحب |  
+**أفكار رئيسية حول خصائص الإزاحة:**
+- **`offsetTop`**: المسافة الحالية من الحافة العلوية للعنصر الأب المحدد
+- **`offsetLeft`**: المسافة الحالية من الحافة اليسرى للعنصر الأب المحدد
+- **سياق التمركز**: هذه القيم نسبية إلى أقرب عنصر أب محدد
+- **تحديثات في الوقت الفعلي**: تتغير فورًا عند تعديل خصائص CSS
 
-**أهم النقاط حول خصائص الإزاحة:**  
-- **`offsetTop`**: المسافة الحالية من الحافة العلوية للعنصر الأب المتموضع  
-- **`offsetLeft`**: المسافة الحالية من الحافة اليسرى للعنصر الأب المتموضع  
-- **سياق التمركز**: هذه القيم تكون نسبية بالنسبة لأقرب عنصر أب متموضع  
-- **تحديثات في الوقت الفعلي**: تتغير فورًا عند تعديل خصائص CSS  
+> 🎯 **فلسفة التصميم**: تم تصميم نظام السحب هذا ليكون مرنًا عن قصد – لا توجد "مناطق إسقاط" أو قيود. يمكن للمستخدمين وضع النباتات في أي مكان، مما يمنحهم تحكمًا إبداعيًا كاملاً في تصميم التيراريوم الخاص بهم.
 
-> 🎯 **فلسفة التصميم**: نظام السحب هذا مرن للغاية – لا توجد "مناطق إسقاط" أو قيود. يمكن للمستخدمين وضع النباتات في أي مكان، مما يمنحهم تحكمًا إبداعيًا كاملًا في تصميم التيراريوم الخاص بهم.  
+## جمع كل شيء معًا: نظام السحب الكامل الخاص بك
 
-## جمع كل شيء معًا: نظام السحب الكامل الخاص بك  
+تهانينا! لقد قمت ببناء نظام سحب وإفلات متطور باستخدام JavaScript الأساسي. يحتوي الآن دالة `dragElement` الكاملة الخاصة بك على إغلاق قوي يدير:
 
-تهانينا! لقد قمت ببناء نظام سحب وإفلات متطور باستخدام JavaScript الأساسي. وظيفة `dragElement` الكاملة لديك الآن تحتوي على إغلاق قوي يدير:  
+**ما يحققه الإغلاق الخاص بك:**
+- **يحافظ** على متغيرات الموضع الخاصة لكل نبات بشكل مستقل
+- **يتعامل** مع دورة السحب الكاملة من البداية إلى النهاية
+- **يوفر** حركة سلسة واستجابة عبر الشاشة بأكملها
+- **ينظف** الموارد بشكل صحيح لمنع تسرب الذاكرة
+- **يخلق** واجهة إبداعية وبديهية لتصميم التيراريوم
 
-**ما يحققه الإغلاق الخاص بك:**  
-- **يحافظ** على متغيرات الموقع الخاصة لكل نبات بشكل مستقل  
-- **يتعامل** مع دورة السحب الكاملة من البداية إلى النهاية  
-- **يوفر** حركة سلسة واستجابة عبر الشاشة بأكملها  
-- **ينظف** الموارد بشكل صحيح لمنع تسرب الذاكرة  
-- **يخلق** واجهة إبداعية وبديهية لتصميم التيراريوم  
+### اختبار التيراريوم التفاعلي الخاص بك
 
-### اختبار التيراريوم التفاعلي الخاص بك  
+الآن اختبر التيراريوم التفاعلي الخاص بك! افتح ملف `index.html` الخاص بك في متصفح الويب وجرب الوظائف:
 
-الآن قم باختبار التيراريوم التفاعلي الخاص بك! افتح ملف `index.html` في متصفح الويب وجرب الوظائف:  
+1. **انقر واستمر بالضغط** على أي نبات لبدء السحب
+2. **حرك الماوس أو الإصبع** وشاهد النبات يتبع الحركة بسلاسة
+3. **أفلت** لإسقاط النبات في موضعه الجديد
+4. **جرب** ترتيبات مختلفة لاستكشاف الواجهة
 
-1. **انقر واستمر بالضغط** على أي نبات لبدء السحب  
-2. **حرك الماوس أو الإصبع** وشاهد النبات يتبع الحركة بسلاسة  
-3. **أفلت** لوضع النبات في موقعه الجديد  
-4. **جرب** ترتيبات مختلفة لاستكشاف الواجهة  
+🥇 **إنجاز**: لقد أنشأت تطبيق ويب تفاعلي بالكامل باستخدام مفاهيم أساسية يستخدمها المطورون المحترفون يوميًا. تعتمد وظيفة السحب والإفلات هذه على نفس المبادئ المستخدمة في تحميل الملفات، ولوحات كانبان، والعديد من الواجهات التفاعلية الأخرى.
 
-🥇 **إنجاز**: لقد أنشأت تطبيق ويب تفاعلي بالكامل باستخدام مفاهيم أساسية يستخدمها المطورون المحترفون يوميًا. وظيفة السحب والإفلات هذه تعتمد على نفس المبادئ المستخدمة في تحميل الملفات، لوحات كانبان، والعديد من الواجهات التفاعلية الأخرى.  
+### 🔄 **تقييم تعليمي**
+**فهم النظام الكامل**: تحقق من إتقانك للنظام الكامل للسحب:
+- ✅ كيف تحافظ الإغلاقات على حالة مستقلة لكل نبات؟
+- ✅ لماذا تكون رياضيات حساب الإحداثيات ضرورية للحركة السلسة؟
+- ✅ ماذا سيحدث إذا نسينا تنظيف مستمعي الأحداث؟
+- ✅ كيف يمكن أن يتوسع هذا النمط ليشمل تفاعلات أكثر تعقيدًا؟
 
-![التيراريوم النهائي](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ar.png)  
+**مراجعة جودة الكود**: راجع الحل الكامل الخاص بك:
+- **تصميم معياري**: يحصل كل نبات على مثيل إغلاق خاص به
+- **كفاءة الأحداث**: إعداد وتنظيف صحيح لمستمعي الأحداث
+- **دعم عبر الأجهزة**: يعمل على أجهزة الكمبيوتر المكتبية والجوال
+- **وعي بالأداء**: لا يوجد تسرب للذاكرة أو حسابات زائدة
+
+![التيراريوم النهائي](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ar.png)
 
 ---
 
-## تحدي GitHub Copilot Agent 🚀  
+## تحدي GitHub Copilot Agent 🚀
+
+استخدم وضع الوكيل لإكمال التحدي التالي:
+
+**الوصف:** قم بتحسين مشروع التيراريوم عن طريق إضافة وظيفة إعادة تعيين تعيد جميع النباتات إلى مواقعها الأصلية مع رسوم متحركة سلسة.
 
-استخدم وضع Agent لإكمال التحدي التالي:  
+**المهمة:** قم بإنشاء زر إعادة تعيين، عند النقر عليه، يعيد جميع النباتات إلى مواقعها الأصلية في الشريط الجانبي باستخدام انتقالات CSS سلسة. يجب أن تقوم الوظيفة بتخزين المواقع الأصلية عند تحميل الصفحة وتعيد النباتات بسلاسة إلى تلك المواقع خلال ثانية واحدة عند الضغط على زر إعادة التعيين.
 
-**الوصف:** تحسين مشروع التيراريوم بإضافة وظيفة إعادة تعيين تعيد جميع النباتات إلى مواقعها الأصلية مع تأثيرات حركة سلسة.  
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
-**المهمة:** قم بإنشاء زر إعادة تعيين، عند النقر عليه، يعيد جميع النباتات إلى مواقعها الأصلية في الشريط الجانبي باستخدام انتقالات CSS. يجب أن تخزن الوظيفة المواقع الأصلية عند تحميل الصفحة وتعيد النباتات إلى تلك المواقع بسلاسة خلال ثانية واحدة عند الضغط على زر إعادة التعيين.  
+## 🚀 تحدي إضافي: توسيع مهاراتك
 
-تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.  
+هل أنت مستعد لنقل التيراريوم الخاص بك إلى المستوى التالي؟ جرب تنفيذ هذه التحسينات:
 
-## 🚀 تحدي إضافي: توسيع مهاراتك  
+**إضافات إبداعية:**
+- **انقر مرتين** على نبات لجعله يظهر في المقدمة (تلاعب بـ z-index)
+- **أضف تأثيرات بصرية** مثل توهج خفيف عند تمرير الماوس فوق النباتات
+- **تنفيذ حدود** لمنع النباتات من السحب خارج التيراريوم
+- **إنشاء وظيفة حفظ** تتذكر مواقع النباتات باستخدام localStorage
+- **إضافة تأثيرات صوتية** عند التقاط ووضع النباتات
 
-هل أنت مستعد لأخذ التيراريوم الخاص بك إلى المستوى التالي؟ جرب تنفيذ هذه التحسينات:  
+> 💡 **فرصة للتعلم**: كل واحد من هذه التحديات سيعلمك جوانب جديدة من التلاعب بـ DOM، ومعالجة الأحداث، وتصميم تجربة المستخدم.
 
-**امتدادات إبداعية:**  
-- **النقر المزدوج** على النبات لجعله في المقدمة (تلاعب بـ z-index)  
-- **إضافة ردود فعل بصرية** مثل توهج خفيف عند تمرير المؤشر فوق النباتات  
-- **تنفيذ حدود** لمنع النباتات من السحب خارج التيراريوم  
-- **إنشاء وظيفة حفظ** تتذكر مواقع النباتات باستخدام localStorage  
-- **إضافة مؤثرات صوتية** عند التقاط ووضع النباتات  
+## اختبار ما بعد المحاضرة
 
-> 💡 **فرصة تعلم**: كل تحدٍ من هذه التحديات سيعلمك جوانب جديدة من التلاعب بـ DOM، التعامل مع الأحداث، وتصميم تجربة المستخدم.  
+[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/20)
 
-## اختبار ما بعد المحاضرة  
+## المراجعة والدراسة الذاتية: تعميق فهمك
 
-[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/20)  
+لقد أتقنت أساسيات التلاعب بـ DOM والإغلاقات، ولكن هناك دائمًا المزيد لاستكشافه! إليك بعض المسارات لتوسيع معرفتك ومهاراتك.
 
-## المراجعة والدراسة الذاتية: تعميق فهمك  
+### طرق بديلة للسحب والإفلات
 
-لقد أتقنت أساسيات التلاعب بـ DOM والإغلاق، ولكن هناك دائمًا المزيد لاستكشافه! إليك بعض المسارات لتوسيع معرفتك ومهاراتك.  
+لقد استخدمنا أحداث المؤشر لتحقيق أقصى قدر من المرونة، ولكن تطوير الويب يقدم العديد من الأساليب:
 
-### طرق بديلة للسحب والإفلات  
+| الطريقة | الأفضل لـ | قيمة التعلم |
+|---------|------------|-------------|
+| [واجهة برمجة تطبيقات السحب والإفلات HTML](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | تحميل الملفات، مناطق السحب الرسمية | فهم قدرات المتصفح الأصلية |
+| [أحداث اللمس](https://developer.mozilla.org/docs/Web/API/Touch_events) | التفاعلات الخاصة بالجوال | أنماط تطوير تركز على الجوال |
+| خصائص CSS `transform` | الرسوم المتحركة السلسة | تقنيات تحسين الأداء |
 
-استخدمنا أحداث المؤشر لتحقيق أقصى قدر من المرونة، ولكن تطوير الويب يقدم طرقًا متعددة:  
+### مواضيع متقدمة في التلاعب بـ DOM
 
-| الطريقة | الأفضل لـ | قيمة التعلم |  
-|---------|------------|-------------|  
-| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | تحميل الملفات، مناطق السحب الرسمية | فهم قدرات المتصفح الأصلية |  
-| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | التفاعلات الخاصة بالجوال | أنماط تطوير الجوال أولاً |  
-| خصائص CSS `transform` | الحركات السلسة | تقنيات تحسين الأداء |  
+**الخطوات التالية في رحلتك التعليمية:**
+- **تفويض الأحداث**: التعامل مع الأحداث بكفاءة لعناصر متعددة
+- **مراقب التقاطع**: اكتشاف متى تدخل العناصر/تخرج من نافذة العرض
+- **مراقب التغيير**: مراقبة التغييرات في بنية DOM
+- **مكونات الويب**: إنشاء عناصر واجهة مستخدم قابلة لإعادة الاستخدام ومغلقة
+- **مفاهيم DOM الافتراضية**: فهم كيفية تحسين الأطر لتحديثات DOM
 
-### مواضيع متقدمة في التلاعب بـ DOM  
+### موارد أساسية لمواصلة التعلم
 
-**الخطوات التالية في رحلة تعلمك:**  
-- **تفويض الأحداث**: التعامل مع الأحداث بكفاءة لعناصر متعددة  
-- **مراقب التقاطع**: اكتشاف دخول/خروج العناصر من نافذة العرض  
-- **مراقب التغييرات**: مراقبة التغييرات في هيكل DOM  
-- **مكونات الويب**: إنشاء عناصر واجهة مستخدم قابلة لإعادة الاستخدام ومغلقة  
-- **مفاهيم DOM الافتراضي**: فهم كيفية تحسين الإطارات لتحديثات DOM  
+**الوثائق التقنية:**
+- [دليل أحداث المؤشر من MDN](https://developer.mozilla.org/docs/Web/API/Pointer_events) - مرجع شامل لأحداث المؤشر
+- [مواصفات أحداث المؤشر من W3C](https://www.w3.org/TR/pointerevents1/) - وثائق المعايير الرسمية
+- [دليل متعمق حول إغلاقات JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - أنماط الإغلاق المتقدمة
 
-### موارد أساسية لمواصلة التعلم  
+**توافق المتصفح:**
+- [CanIUse.com](https://caniuse.com/) - تحقق من دعم الميزات عبر المتصفحات
+- [بيانات توافق المتصفح من MDN](https://github.com/mdn/browser-compat-data) - معلومات تفصيلية عن التوافق
+
+**فرص الممارسة:**
+- **إنشاء** لعبة ألغاز باستخدام ميكانيكيات السحب المماثلة
+- **إنشاء** لوحة كانبان مع إدارة المهام بالسحب والإفلات
+- **تصميم** معرض صور مع ترتيبات صور قابلة للسحب
+- **التجربة** مع إيماءات اللمس لواجهات الجوال
+
+> 🎯 **استراتيجية التعلم**: أفضل طريقة لترسيخ هذه المفاهيم هي من خلال الممارسة. حاول بناء أشكال مختلفة من الواجهات القابلة للسحب – كل مشروع سيعلمك شيئًا جديدًا عن التفاعل مع المستخدم والتلاعب بـ DOM.
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] افتح أدوات المطور في المتصفح واكتب `document.querySelector('body')` في وحدة التحكم
+- [ ] جرب تغيير نص صفحة ويب باستخدام `innerHTML` أو `textContent`
+- [ ] أضف مستمع حدث النقر إلى أي زر أو رابط في صفحة ويب
+- [ ] استعرض بنية شجرة DOM باستخدام لوحة العناصر
+
+### 🎯 **ما يمكنك تحقيقه خلال هذه الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وراجع مفاهيم التلاعب بـ DOM
+- [ ] أنشئ صفحة ويب تفاعلية تستجيب لنقرات المستخدم
+- [ ] تدرب على التعامل مع الأحداث بأنواع مختلفة من الأحداث (النقر، التمرير، الضغط على المفاتيح)
+- [ ] قم ببناء قائمة مهام بسيطة أو عداد باستخدام التلاعب بـ DOM
+- [ ] استكشف العلاقة بين عناصر HTML وكائنات JavaScript
+
+### 📅 **رحلة إتقان JavaScript الخاصة بك لمدة أسبوع**
+- [ ] أكمل مشروع التيراريوم التفاعلي مع وظيفة السحب والإفلات
+- [ ] أتقن تفويض الأحداث للتعامل مع الأحداث بكفاءة
+- [ ] تعرف على حلقة الأحداث وجافا سكريبت غير المتزامنة
+- [ ] تدرب على الإغلاقات من خلال بناء وحدات ذات حالة خاصة
+- [ ] استكشف واجهات برمجة التطبيقات الحديثة لـ DOM مثل مراقب التقاطع
+- [ ] قم ببناء مكونات تفاعلية بدون استخدام الأطر
+
+### 🌟 **إتقان JavaScript خلال شهر**
+- [ ] أنشئ تطبيقًا معقدًا بصفحة واحدة باستخدام JavaScript الأساسي
+- [ ] تعلم إطار عمل حديث (React، Vue، أو Angular) وقارنه بـ DOM الأساسي
+- [ ] ساهم في مشاريع JavaScript مفتوحة المصدر
+- [ ] أتقن المفاهيم المتقدمة مثل مكونات الويب والعناصر المخصصة
+- [ ] قم ببناء تطبيقات ويب عالية الأداء باستخدام أنماط DOM المثلى
+- [ ] علم الآخرين عن التلاعب بـ DOM وأساسيات JavaScript
+
+## 🎯 جدول زمني لإتقان JavaScript DOM
+
+```mermaid
+timeline
+    title DOM & JavaScript Learning Progression
+    
+    section Foundation (15 minutes)
+        DOM Understanding: Element selection methods
+                         : Tree structure navigation
+                         : Property access patterns
+        
+    section Event Handling (20 minutes)
+        User Interaction: Pointer event basics
+                        : Event listener setup
+                        : Cross-device compatibility
+                        : Event prevention techniques
+        
+    section Closures (25 minutes)
+        Scope Management: Private variable creation
+                        : Function persistence
+                        : State management patterns
+                        : Memory efficiency
+        
+    section Drag System (30 minutes)
+        Interactive Features: Coordinate tracking
+                            : Position calculation
+                            : Movement mathematics
+                            : Cleanup procedures
+        
+    section Advanced Patterns (45 minutes)
+        Professional Skills: Event delegation
+                           : Performance optimization
+                           : Error handling
+                           : Accessibility considerations
+        
+    section Framework Understanding (1 week)
+        Modern Development: Virtual DOM concepts
+                          : State management libraries
+                          : Component architectures
+                          : Build tool integration
+        
+    section Expert Level (1 month)
+        Advanced DOM APIs: Intersection Observer
+                         : Mutation Observer
+                         : Custom Elements
+                         : Web Components
+```
 
-**الوثائق التقنية:**  
-- [دليل MDN لأحداث المؤشر](https://developer.mozilla.org/docs/Web/API/Pointer_events) - مرجع شامل لأحداث المؤشر  
-- [مواصفات W3C لأحداث المؤشر](https://www.w3.org/TR/pointerevents1/) - وثائق المعايير الرسمية  
-- [الغوص العميق في إغلاقات JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - أنماط الإغلاق المتقدمة  
+### 🛠️ ملخص أدوات JavaScript الخاصة بك
 
-**توافق المتصفح:**  
-- [CanIUse.com](https://caniuse.com/) - تحقق من دعم الميزات عبر المتصفحات  
-- [بيانات توافق المتصفح من MDN](https://github.com/mdn/browser-compat-data) - معلومات توافق مفصلة  
+بعد إكمال هذا الدرس، لديك الآن:
+- **إتقان DOM**: اختيار العناصر، التلاعب بالخصائص، والتنقل في الشجرة
+- **خبرة في الأحداث**: التعامل مع التفاعلات عبر الأجهزة باستخدام أحداث المؤشر
+- **فهم الإغلاقات**: إدارة الحالة الخاصة واستمرارية الوظائف
+- **أنظمة تفاعلية**: تنفيذ كامل للسحب والإفلات من الصفر
+- **وعي بالأداء**: تنظيف الأحداث بشكل صحيح وإدارة الذاكرة
+- **أنماط حديثة**: تقنيات تنظيم الكود المستخدمة في التطوير المهني
+- **تجربة المستخدم**: إنشاء واجهات بديهية واستجابة
 
-**فرص الممارسة:**  
-- **إنشاء** لعبة ألغاز باستخدام ميكانيكيات السحب المشابهة  
-- **تصميم** لوحة كانبان مع إدارة المهام بالسحب والإفلات  
-- **إنشاء** معرض صور مع ترتيبات الصور القابلة للسحب  
-- **التجربة** مع إيماءات اللمس لواجهات الجوال  
+**المهارات المهنية المكتسبة**: لقد قمت ببناء ميزات باستخدام نفس التقنيات مثل:
+- **لوحات Trello/كانبان**: سحب البطاقات بين الأعمدة
+- **أنظمة تحميل الملفات**: التعامل مع الملفات بالسحب والإفلات
+- **معارض الصور**: واجهات ترتيب الصور
+- **تطبيقات الجوال**: أنماط التفاعل القائمة على اللمس
 
-> 🎯 **استراتيجية التعلم**: أفضل طريقة لتثبيت هذه المفاهيم هي من خلال الممارسة. حاول بناء تنويعات من واجهات السحب – كل مشروع سيعلمك شيئًا جديدًا عن التفاعل مع المستخدم والتلاعب بـ DOM.  
+**المستوى التالي**: أنت جاهز لاستكشاف الأطر الحديثة مثل React، Vue، أو Angular التي تعتمد على هذه المفاهيم الأساسية للتلاعب بـ DOM!
 
-## الواجب  
+## الواجب
 
-[اعمل قليلاً مع DOM](assignment.md)  
+[اعمل قليلاً مع DOM](assignment.md)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/4-typing-game/README.md b/translations/ar/4-typing-game/README.md
index f46dae2ddc..39b75451a2 100644
--- a/translations/ar/4-typing-game/README.md
+++ b/translations/ar/4-typing-game/README.md
@@ -1,46 +1,293 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5adea7059676fcdb1b546ccd54c956c2",
-  "translation_date": "2025-10-22T14:24:03+00:00",
+  "original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
+  "translation_date": "2025-11-03T12:42:07+00:00",
   "source_file": "4-typing-game/README.md",
   "language_code": "ar"
 }
 -->
-# البرمجة القائمة على الأحداث - بناء لعبة كتابة
+# البرمجة القائمة على الأحداث - بناء لعبة الكتابة
+
+```mermaid
+journey
+    title Your Typing Game Development Journey
+    section Foundation
+      Plan game structure: 3: Student
+      Design user interface: 4: Student
+      Setup HTML elements: 4: Student
+    section Functionality
+      Handle user input: 4: Student
+      Track timing: 5: Student
+      Calculate accuracy: 5: Student
+    section Features
+      Add visual feedback: 5: Student
+      Implement game logic: 5: Student
+      Polish experience: 5: Student
+```
 
 ## المقدمة
 
-هناك شيء يعرفه كل مطور ولكنه نادراً ما يتحدث عنه: الكتابة بسرعة هي قوة خارقة! 🚀 فكر في الأمر - كلما كنت أسرع في نقل أفكارك من عقلك إلى محرر الأكواد، زادت قدرتك على الإبداع. إنه مثل وجود خط مباشر بين أفكارك والشاشة.
+هناك شيء يعرفه كل مطور ولكنه نادرًا ما يتحدث عنه: الكتابة بسرعة هي قوة خارقة! 🚀 فكر في الأمر - كلما كنت أسرع في نقل أفكارك من عقلك إلى محرر الكود، زادت قدرتك على الإبداع. إنه مثل وجود خط مباشر بين أفكارك والشاشة.
+
+```mermaid
+pie title Game Features
+    "Real-time Feedback" : 25
+    "Performance Tracking" : 20
+    "Interactive UI" : 20
+    "Timer System" : 15
+    "Quote Management" : 10
+    "Results Display" : 10
+```
+
+هل تريد معرفة واحدة من أفضل الطرق لتحسين هذه المهارة؟ لقد خمنت ذلك - سنقوم ببناء لعبة!
 
-هل تريد معرفة واحدة من أفضل الطرق لتحسين هذه المهارة؟ نعم، لقد خمنت - سنقوم ببناء لعبة!
+```mermaid
+flowchart LR
+    A[Player starts game] --> B[Random quote displayed]
+    B --> C[Player types characters]
+    C --> D{Character correct?}
+    D -->|Yes| E[Green highlight]
+    D -->|No| F[Red highlight]
+    E --> G[Update accuracy]
+    F --> G
+    G --> H{Quote complete?}
+    H -->|No| C
+    H -->|Yes| I[Calculate WPM]
+    I --> J[Display results]
+    J --> K[Play again?]
+    K -->|Yes| B
+    K -->|No| L[Game over]
+    
+    style A fill:#e1f5fe
+    style D fill:#fff3e0
+    style E fill:#e8f5e8
+    style F fill:#ffebee
+    style I fill:#f3e5f5
+```
 
 > لنقم معًا بإنشاء لعبة كتابة رائعة!
 
-هل أنت مستعد لتوظيف كل مهارات JavaScript وHTML وCSS التي تعلمتها؟ سنقوم ببناء لعبة كتابة ستتحداك بعبارات عشوائية من المحقق الأسطوري [شيرلوك هولمز](https://en.wikipedia.org/wiki/Sherlock_Holmes). ستقوم اللعبة بتتبع مدى سرعتك ودقتك في الكتابة - وصدقني، إنها أكثر إدمانًا مما قد تتوقع!
+هل أنت مستعد لتوظيف كل مهارات JavaScript وHTML وCSS التي تعلمتها؟ سنقوم ببناء لعبة كتابة ستتحداك بعبارات عشوائية من المحقق الأسطوري [شيرلوك هولمز](https://en.wikipedia.org/wiki/Sherlock_Holmes). ستقوم اللعبة بتتبع مدى سرعتك ودقتك في الكتابة - وصدقني، إنها أكثر إدمانًا مما قد تتصور!
+
+```mermaid
+mindmap
+  root((Typing Game Development))
+    User Interface
+      Input Elements
+      Visual Feedback
+      Responsive Design
+      Accessibility
+    Game Logic
+      Quote Selection
+      Timer Management
+      Accuracy Tracking
+      Score Calculation
+    Event Handling
+      Keyboard Input
+      Button Clicks
+      Real-time Updates
+      Game State Changes
+    Performance Metrics
+      Words Per Minute
+      Character Accuracy
+      Error Tracking
+      Progress Display
+    User Experience
+      Immediate Feedback
+      Clear Instructions
+      Engaging Content
+      Achievement System
+```
 
 ![demo](../../../4-typing-game/images/demo.gif)
 
 ## ما الذي تحتاج إلى معرفته
 
+```mermaid
+flowchart TD
+    A[User Action] --> B{Event Type?}
+    B -->|Key Press| C[Keyboard Event]
+    B -->|Button Click| D[Mouse Event]
+    B -->|Timer| E[Time Event]
+    
+    C --> F[Check Character]
+    D --> G[Start/Reset Game]
+    E --> H[Update Timer]
+    
+    F --> I{Correct?}
+    I -->|Yes| J[Highlight Green]
+    I -->|No| K[Highlight Red]
+    
+    J --> L[Update Score]
+    K --> L
+    L --> M[Check Game State]
+    
+    G --> N[Generate New Quote]
+    H --> O[Display Time]
+    
+    M --> P{Game Complete?}
+    P -->|Yes| Q[Show Results]
+    P -->|No| R[Continue Game]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#fff3e0
+    style Q fill:#f3e5f5
+```
+
 قبل أن نبدأ، تأكد من أنك مرتاح مع هذه المفاهيم (لا تقلق إذا كنت بحاجة إلى مراجعة سريعة - كلنا مررنا بذلك!):
 
 - إنشاء إدخال نصي وأزرار التحكم
-- CSS وتحديد الأنماط باستخدام الفئات  
+- CSS وتعيين الأنماط باستخدام الفئات  
 - أساسيات JavaScript
   - إنشاء مصفوفة
   - إنشاء رقم عشوائي
   - الحصول على الوقت الحالي
 
-إذا شعرت أن أيًا من هذه المفاهيم غير واضح، فلا بأس بذلك! أحيانًا تكون أفضل طريقة لتثبيت معرفتك هي القفز إلى مشروع واكتشاف الأمور أثناء العمل.
+إذا شعرت أن أيًا من هذه المفاهيم غير واضحة، فلا بأس بذلك! أحيانًا تكون أفضل طريقة لتثبيت معرفتك هي القفز إلى مشروع واكتشاف الأمور أثناء العمل.
 
-## لنقم ببناء هذه اللعبة!
+### 🔄 **تقييم تربوي**
+**تقييم الأساسيات**: قبل بدء التطوير، تأكد من فهمك:
+- ✅ كيفية عمل نماذج HTML وعناصر الإدخال
+- ✅ الفئات في CSS والتنسيق الديناميكي
+- ✅ مستمعي الأحداث ومعالجيها في JavaScript
+- ✅ التلاعب بالمصفوفات والاختيار العشوائي
+- ✅ قياس الوقت وإجراء الحسابات
+
+**اختبار سريع ذاتي**: هل يمكنك شرح كيفية عمل هذه المفاهيم معًا في لعبة تفاعلية؟
+- **الأحداث** تُطلق عند تفاعل المستخدمين مع العناصر
+- **المعالجات** تعالج هذه الأحداث وتحدث حالة اللعبة
+- **CSS** يوفر ردود فعل بصرية لتفاعلات المستخدم
+- **الوقت** يتيح قياس الأداء وتقدم اللعبة
+
+```mermaid
+quadrantChart
+    title Typing Game Skills Development
+    x-axis Beginner --> Expert
+    y-axis Static --> Interactive
+    quadrant-1 Advanced Games
+    quadrant-2 Real-time Apps
+    quadrant-3 Basic Pages
+    quadrant-4 Interactive Sites
+    
+    HTML Forms: [0.3, 0.2]
+    CSS Styling: [0.4, 0.3]
+    Event Handling: [0.7, 0.8]
+    Game Logic: [0.8, 0.9]
+    Performance Tracking: [0.9, 0.7]
+```
+
+## لنبدأ ببناء اللعبة!
 
 [إنشاء لعبة كتابة باستخدام البرمجة القائمة على الأحداث](./typing-game/README.md)
 
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] افتح وحدة التحكم في المتصفح وجرب الاستماع لأحداث لوحة المفاتيح باستخدام `addEventListener`
+- [ ] أنشئ صفحة HTML بسيطة تحتوي على حقل إدخال واختبر الكشف عن الكتابة
+- [ ] تدرب على معالجة النصوص بمقارنة النص المكتوب بالنص المستهدف
+- [ ] جرب استخدام `setTimeout` لفهم وظائف التوقيت
+
+### 🎯 **ما يمكنك تحقيقه خلال الساعة القادمة**
+- [ ] أكمل اختبار ما بعد الدرس وافهم البرمجة القائمة على الأحداث
+- [ ] قم ببناء نسخة أساسية من لعبة الكتابة مع التحقق من الكلمات
+- [ ] أضف ردود فعل بصرية للكتابة الصحيحة والخاطئة
+- [ ] قم بتنفيذ نظام تسجيل بسيط يعتمد على السرعة والدقة
+- [ ] قم بتصميم لعبتك باستخدام CSS لجعلها جذابة بصريًا
+
+### 📅 **تطوير اللعبة خلال أسبوع**
+- [ ] أكمل لعبة الكتابة بالكامل مع جميع الميزات والتحسينات
+- [ ] أضف مستويات صعوبة مع تعقيد الكلمات المتفاوت
+- [ ] قم بتنفيذ تتبع إحصائيات المستخدم (الكلمات في الدقيقة، الدقة مع مرور الوقت)
+- [ ] أضف تأثيرات صوتية ورسوم متحركة لتحسين تجربة المستخدم
+- [ ] اجعل لعبتك متجاوبة مع الأجهزة المحمولة التي تعمل باللمس
+- [ ] شارك لعبتك عبر الإنترنت واجمع آراء المستخدمين
+
+### 🌟 **تطوير تفاعلي خلال شهر**
+- [ ] قم ببناء ألعاب متعددة تستكشف أنماط تفاعل مختلفة
+- [ ] تعلم عن حلقات الألعاب وإدارة الحالة وتحسين الأداء
+- [ ] ساهم في مشاريع تطوير الألعاب مفتوحة المصدر
+- [ ] أتقن مفاهيم التوقيت المتقدمة والرسوم المتحركة السلسة
+- [ ] أنشئ ملفًا شخصيًا يعرض تطبيقات تفاعلية متنوعة
+- [ ] قم بتوجيه الآخرين المهتمين بتطوير الألعاب والتفاعل مع المستخدم
+
+## 🎯 جدول زمني لإتقان لعبة الكتابة
+
+```mermaid
+timeline
+    title Game Development Learning Progression
+    
+    section Setup (10 minutes)
+        Project Structure: HTML foundation
+                         : CSS styling setup
+                         : JavaScript file creation
+        
+    section User Interface (20 minutes)
+        Interactive Elements: Input fields
+                            : Button controls
+                            : Display areas
+                            : Responsive layout
+        
+    section Event Handling (25 minutes)
+        User Interaction: Keyboard events
+                        : Mouse events
+                        : Real-time feedback
+                        : State management
+        
+    section Game Logic (30 minutes)
+        Core Functionality: Quote generation
+                          : Character comparison
+                          : Accuracy calculation
+                          : Timer implementation
+        
+    section Performance Tracking (35 minutes)
+        Metrics & Analytics: WPM calculation
+                           : Error tracking
+                           : Progress visualization
+                           : Results display
+        
+    section Polish & Enhancement (45 minutes)
+        User Experience: Visual feedback
+                       : Sound effects
+                       : Animations
+                       : Accessibility features
+        
+    section Advanced Features (1 week)
+        Extended Functionality: Difficulty levels
+                              : Leaderboards
+                              : Custom quotes
+                              : Multiplayer options
+        
+    section Professional Skills (1 month)
+        Game Development: Performance optimization
+                        : Code architecture
+                        : Testing strategies
+                        : Deployment patterns
+```
+
+### 🛠️ ملخص أدوات تطوير اللعبة
+
+بعد إكمال هذا المشروع، ستتقن:
+- **البرمجة القائمة على الأحداث**: واجهات مستخدم تفاعلية تستجيب للإدخال
+- **ردود الفعل الفورية**: تحديثات بصرية وأداء فورية
+- **قياس الأداء**: أنظمة توقيت وتسجيل دقيقة
+- **إدارة حالة اللعبة**: التحكم في تدفق التطبيق وتجربة المستخدم
+- **التصميم التفاعلي**: إنشاء تجارب مستخدم جذابة وممتعة
+- **واجهات برمجة التطبيقات الحديثة**: استخدام قدرات المتصفح للتفاعلات الغنية
+- **أنماط الوصول**: تصميم شامل لجميع المستخدمين
+
+**التطبيقات الواقعية**: هذه المهارات تنطبق مباشرة على:
+- **تطبيقات الويب**: أي واجهة تفاعلية أو لوحة تحكم
+- **البرامج التعليمية**: منصات التعلم وأدوات تقييم المهارات
+- **أدوات الإنتاجية**: محررات النصوص، بيئات التطوير، وبرامج التعاون
+- **صناعة الألعاب**: ألعاب المتصفح والترفيه التفاعلي
+- **تطوير الأجهزة المحمولة**: واجهات تعمل باللمس ومعالجة الإيماءات
+
+**المستوى التالي**: أنت جاهز لاستكشاف أطر الألعاب المتقدمة، أنظمة اللعب متعددة اللاعبين في الوقت الفعلي، أو التطبيقات التفاعلية المعقدة!
+
 ## الشكر
 
-كتبت بحب ♥️ بواسطة [كريستوفر هاريسون](http://www.twitter.com/geektrainer)
+كتبه بكل ♥️ بواسطة [كريستوفر هاريسون](http://www.twitter.com/geektrainer)
 
 ---
 
diff --git a/translations/ar/4-typing-game/typing-game/README.md b/translations/ar/4-typing-game/typing-game/README.md
index a4f4521547..ad0abdbd5a 100644
--- a/translations/ar/4-typing-game/typing-game/README.md
+++ b/translations/ar/4-typing-game/typing-game/README.md
@@ -1,17 +1,17 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e6b75e5b8caae906473a8a09d77b7121",
-  "translation_date": "2025-10-22T14:24:10+00:00",
+  "original_hash": "da8bc72041a2bb3826a54654ee1a8844",
+  "translation_date": "2025-11-03T12:43:08+00:00",
   "source_file": "4-typing-game/typing-game/README.md",
   "language_code": "ar"
 }
 -->
 # إنشاء لعبة باستخدام الأحداث
 
-هل تساءلت يومًا كيف تعرف المواقع الإلكترونية أنك ضغطت على زر أو كتبت في مربع نص؟ هذه هي روعة البرمجة القائمة على الأحداث! وما الطريقة الأفضل لتعلم هذه المهارة الأساسية من بناء شيء مفيد - لعبة سرعة الكتابة التي تتفاعل مع كل ضغطة مفتاح تقوم بها.
+هل تساءلت يومًا كيف تعرف المواقع الإلكترونية أنك ضغطت على زر أو كتبت في مربع نص؟ هذه هي روعة البرمجة القائمة على الأحداث! ما الطريقة الأفضل لتعلم هذه المهارة الأساسية من خلال بناء شيء مفيد - لعبة سرعة الكتابة التي تتفاعل مع كل ضغطة مفتاح تقوم بها.
 
-ستتعرف بنفسك على كيفية "تحدث" متصفحات الويب مع كود JavaScript الخاص بك. في كل مرة تنقر، تكتب، أو تحرك الماوس، يقوم المتصفح بإرسال رسائل صغيرة (نسميها أحداث) إلى الكود الخاص بك، وأنت تقرر كيفية الرد!
+ستتعرف بنفسك على كيفية "تحدث" متصفحات الويب مع كود JavaScript الخاص بك. في كل مرة تنقر أو تكتب أو تحرك الماوس، يرسل المتصفح رسائل صغيرة (نسميها أحداث) إلى الكود الخاص بك، وأنت تقرر كيفية الرد!
 
 بحلول الوقت الذي ننتهي فيه هنا، ستكون قد أنشأت لعبة كتابة حقيقية تتبع سرعتك ودقتك. والأهم من ذلك، ستفهم المفاهيم الأساسية التي تشغل كل موقع تفاعلي استخدمته من قبل. لنبدأ!
 
@@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 فكر في تطبيقك أو موقعك المفضل - ما الذي يجعله يبدو حيًا وتفاعليًا؟ الأمر كله يتعلق بكيفية تفاعله مع ما تفعله! كل نقرة، ضغط، سحب، أو ضغطة مفتاح تخلق ما نسميه "حدث"، وهنا تحدث روعة تطوير الويب.
 
-ما يجعل البرمجة للويب مثيرة للاهتمام هو أننا لا نعرف أبدًا متى سيضغط شخص ما على ذلك الزر أو يبدأ الكتابة في مربع النص. قد ينقرون فورًا، ينتظرون خمس دقائق، أو ربما لا ينقرون أبدًا! هذه الطبيعة غير المتوقعة تعني أننا بحاجة إلى التفكير بشكل مختلف حول كيفية كتابة الكود الخاص بنا.
+ما يجعل البرمجة للويب مثيرة للاهتمام هو أننا لا نعرف أبدًا متى سيضغط شخص ما على ذلك الزر أو يبدأ الكتابة في مربع النص. قد ينقر فورًا، ينتظر خمس دقائق، أو ربما لا ينقر أبدًا! هذه الطبيعة غير المتوقعة تعني أننا بحاجة إلى التفكير بشكل مختلف حول كيفية كتابة الكود الخاص بنا.
 
 بدلاً من كتابة كود يعمل من الأعلى إلى الأسفل مثل وصفة، نكتب كودًا ينتظر بصبر حدوث شيء ما. يشبه ذلك كيف كان مشغلو التلغراف في القرن التاسع عشر يجلسون بجانب أجهزتهم، مستعدين للرد بمجرد وصول رسالة عبر السلك.
 
@@ -31,40 +31,40 @@ CO_OP_TRANSLATOR_METADATA:
 
 البرمجة القائمة على الأحداث تتيح لنا إعداد الكود الخاص بنا للاستماع والرد. نقوم بإنشاء وظائف خاصة تسمى **مستمعي الأحداث** التي تنتظر بصبر حدوث أشياء معينة، ثم تنطلق إلى العمل عندما تحدث.
 
-فكر في مستمعي الأحداث مثل وجود جرس باب لكودك. تقوم بإعداد جرس الباب (`addEventListener()`)، تخبره بالصوت الذي يجب أن يستمع إليه (مثل 'click' أو 'keypress')، ثم تحدد ما يجب أن يحدث عندما يرن أحدهم الجرس (وظيفتك المخصصة).
+فكر في مستمعي الأحداث مثل وجود جرس باب للكود الخاص بك. تقوم بإعداد جرس الباب (`addEventListener()`)، تخبره بالصوت الذي يجب الاستماع إليه (مثل 'click' أو 'keypress')، ثم تحدد ما يجب أن يحدث عندما يرن شخص ما الجرس (وظيفتك المخصصة).
 
-**كيف يعمل مستمعو الأحداث:**
-- **يستمعون** إلى إجراءات المستخدم المحددة مثل النقرات، ضغطات المفاتيح، أو حركات الماوس
-- **ينفذون** الكود المخصص الخاص بك عندما يحدث الحدث المحدد
-- **يستجيبون** فورًا لتفاعلات المستخدم، مما يخلق تجربة سلسة
-- **يتعاملون** مع أحداث متعددة على نفس العنصر باستخدام مستمعين مختلفين
+**كيف تعمل مستمعات الأحداث:**
+- **تستمع** إلى إجراءات المستخدم المحددة مثل النقرات أو ضغطات المفاتيح أو حركات الماوس
+- **تنفذ** الكود المخصص الخاص بك عندما يحدث الحدث المحدد
+- **تستجيب** فورًا لتفاعلات المستخدم، مما يخلق تجربة سلسة
+- **تتعامل** مع أحداث متعددة على نفس العنصر باستخدام مستمعين مختلفين
 
-> **NOTE:** من الجدير بالذكر أن هناك طرقًا عديدة لإنشاء مستمعي الأحداث. يمكنك استخدام وظائف مجهولة، أو إنشاء وظائف مسماة. يمكنك استخدام اختصارات مختلفة، مثل تعيين خاصية `click`، أو استخدام `addEventListener()`. في تمريننا سنركز على `addEventListener()` والوظائف المجهولة، لأنها على الأرجح التقنية الأكثر شيوعًا التي يستخدمها مطورو الويب. كما أنها الأكثر مرونة، حيث تعمل `addEventListener()` لجميع الأحداث، ويمكن تقديم اسم الحدث كمعامل.
+> **NOTE:** من الجدير بالذكر أن هناك طرقًا عديدة لإنشاء مستمعي الأحداث. يمكنك استخدام وظائف مجهولة، أو إنشاء وظائف مسماة. يمكنك استخدام اختصارات مختلفة، مثل تعيين خاصية `click`، أو استخدام `addEventListener()`. في تمريننا، سنركز على `addEventListener()` والوظائف المجهولة، لأنها التقنية الأكثر شيوعًا التي يستخدمها مطورو الويب. كما أنها الأكثر مرونة، حيث تعمل `addEventListener()` لجميع الأحداث، ويمكن تقديم اسم الحدث كمعامل.
 
 ### الأحداث الشائعة
 
-بينما تقدم متصفحات الويب عشرات الأحداث المختلفة التي يمكنك الاستماع إليها، تعتمد معظم التطبيقات التفاعلية على عدد قليل فقط من الأحداث الأساسية. فهم هذه الأحداث الأساسية سيمنحك الأساس لبناء تفاعلات مستخدم متقدمة.
+بينما تقدم متصفحات الويب عشرات الأحداث المختلفة التي يمكنك الاستماع إليها، تعتمد معظم التطبيقات التفاعلية على مجموعة صغيرة من الأحداث الأساسية. فهم هذه الأحداث الأساسية سيمنحك الأساس لبناء تفاعلات مستخدم متقدمة.
 
-هناك [عشرات الأحداث](https://developer.mozilla.org/docs/Web/Events) المتاحة للاستماع إليها عند إنشاء تطبيق. في الأساس، أي شيء يفعله المستخدم على الصفحة يثير حدثًا، مما يمنحك الكثير من القوة لضمان حصولهم على التجربة التي ترغب بها. لحسن الحظ، ستحتاج عادةً إلى عدد قليل فقط من الأحداث. إليك بعض الأحداث الشائعة (بما في ذلك الاثنين الذين سنستخدمهما عند إنشاء لعبتنا):
+هناك [عشرات الأحداث](https://developer.mozilla.org/docs/Web/Events) المتاحة للاستماع إليها عند إنشاء تطبيق. في الأساس، أي شيء يفعله المستخدم على الصفحة يثير حدثًا، مما يمنحك الكثير من القوة لضمان حصولهم على التجربة التي ترغب بها. لحسن الحظ، ستحتاج عادةً إلى عدد قليل من الأحداث فقط. إليك بعض الأحداث الشائعة (بما في ذلك اثنان سنستخدمهما عند إنشاء لعبتنا):
 
 | الحدث | الوصف | الاستخدامات الشائعة |
-|-------|-------------|------------------|
+|-------|-------|------------------|
 | `click` | ضغط المستخدم على شيء ما | الأزرار، الروابط، العناصر التفاعلية |
 | `contextmenu` | ضغط المستخدم على زر الماوس الأيمن | قوائم النقر بزر الماوس الأيمن المخصصة |
-| `select` | قام المستخدم بتحديد نص | تحرير النص، عمليات النسخ |
-| `input` | أدخل المستخدم نصًا | التحقق من صحة النماذج، البحث في الوقت الحقيقي |
+| `select` | قام المستخدم بتحديد نص | تحرير النصوص، عمليات النسخ |
+| `input` | أدخل المستخدم نصًا | التحقق من صحة النماذج، البحث في الوقت الفعلي |
 
 **فهم أنواع الأحداث هذه:**
-- **تُثار** عندما يتفاعل المستخدمون مع عناصر محددة على صفحتك
-- **تُوفر** معلومات تفصيلية حول إجراء المستخدم من خلال كائنات الأحداث
-- **تُمكنك** من إنشاء تطبيقات ويب تفاعلية وسريعة الاستجابة
+- **تُفعل** عند تفاعل المستخدمين مع عناصر محددة على صفحتك
+- **توفر** معلومات تفصيلية حول إجراء المستخدم من خلال كائنات الأحداث
+- **تمكنك** من إنشاء تطبيقات ويب تفاعلية وسريعة الاستجابة
 - **تعمل** بشكل متسق عبر المتصفحات والأجهزة المختلفة
 
 ## إنشاء اللعبة
 
 الآن بعد أن فهمت كيفية عمل الأحداث، دعنا نضع هذه المعرفة موضع التنفيذ من خلال بناء شيء مفيد. سنقوم بإنشاء لعبة سرعة الكتابة التي توضح التعامل مع الأحداث بينما تساعدك على تطوير مهارة مهمة للمطورين.
 
-سنقوم بإنشاء لعبة لاستكشاف كيفية عمل الأحداث في JavaScript. لعبتنا ستختبر مهارة الكتابة لدى اللاعب، وهي واحدة من المهارات التي لا تحظى بالتقدير الكافي والتي يجب أن يمتلكها جميع المطورين. معلومة ممتعة: تم تصميم تخطيط لوحة المفاتيح QWERTY الذي نستخدمه اليوم في سبعينيات القرن التاسع عشر للآلات الكاتبة - وما زالت مهارات الكتابة الجيدة ذات قيمة كبيرة للمبرمجين اليوم! ستبدو تدفق اللعبة بشكل عام كما يلي:
+سنقوم بإنشاء لعبة لاستكشاف كيفية عمل الأحداث في JavaScript. ستختبر لعبتنا مهارة الكتابة لدى اللاعب، وهي واحدة من المهارات الأكثر تقليلًا من قيمتها التي يجب أن يمتلكها جميع المطورين. معلومة ممتعة: تم تصميم تخطيط لوحة المفاتيح QWERTY الذي نستخدمه اليوم في سبعينيات القرن التاسع عشر للآلات الكاتبة - وما زالت مهارات الكتابة الجيدة ذات قيمة كبيرة للمبرمجين حتى اليوم! ستبدو تدفق اللعبة بشكل عام كما يلي:
 
 ```mermaid
 flowchart TD
@@ -84,18 +84,18 @@ flowchart TD
 
 **كيف ستعمل لعبتنا:**
 - **تبدأ** عندما يضغط اللاعب على زر البدء وتعرض اقتباسًا عشوائيًا
-- **تتبع** تقدم اللاعب في الكتابة كلمة بكلمة في الوقت الحقيقي
+- **تتبع** تقدم اللاعب في الكتابة كلمة بكلمة في الوقت الفعلي
 - **تُبرز** الكلمة الحالية لتوجيه تركيز اللاعب
-- **تُوفر** ردود فعل بصرية فورية لأخطاء الكتابة
+- **توفر** ملاحظات بصرية فورية لأخطاء الكتابة
 - **تحسب** وتعرض الوقت الإجمالي عند اكتمال الاقتباس
 
 لنقم ببناء لعبتنا، ونتعلم عن الأحداث!
 
 ### هيكل الملفات
 
-قبل أن نبدأ في البرمجة، دعنا ننظم الأمور! وجود هيكل ملفات نظيف من البداية سيوفر عليك الكثير من المتاعب لاحقًا ويجعل مشروعك أكثر احترافية. 😊
+قبل أن نبدأ في البرمجة، دعونا ننظم الأمور! وجود هيكل ملفات نظيف منذ البداية سيوفر عليك الكثير من المتاعب لاحقًا ويجعل مشروعك أكثر احترافية. 😊
 
-سنحافظ على الأمور بسيطة بثلاثة ملفات فقط: `index.html` لهيكل الصفحة، `script.js` لكل منطق اللعبة، و `style.css` لجعل كل شيء يبدو رائعًا. هذه الثلاثية الكلاسيكية هي التي تشغل معظم الويب!
+سنحافظ على الأمور بسيطة مع ثلاثة ملفات فقط: `index.html` لهيكل الصفحة، `script.js` لجميع منطق اللعبة، و `style.css` لجعل كل شيء يبدو رائعًا. هذه هي الثلاثية الكلاسيكية التي تشغل معظم الويب!
 
 **قم بإنشاء مجلد جديد لعملك عن طريق فتح نافذة وحدة التحكم أو الطرفية وإصدار الأمر التالي:**
 
@@ -108,8 +108,8 @@ md typing-game && cd typing-game
 ```
 
 **ما الذي تفعله هذه الأوامر:**
-- **تُنشئ** دليلًا جديدًا يسمى `typing-game` لملفات مشروعك
-- **تتنقل** تلقائيًا إلى الدليل الذي تم إنشاؤه حديثًا
+- **تنشئ** دليلًا جديدًا يسمى `typing-game` لملفات مشروعك
+- **تنتقل** إلى الدليل الذي تم إنشاؤه حديثًا تلقائيًا
 - **تُعد** مساحة عمل نظيفة لتطوير لعبتك
 
 **افتح Visual Studio Code:**
@@ -119,35 +119,35 @@ code .
 ```
 
 **هذا الأمر:**
-- **يُطلق** Visual Studio Code في الدليل الحالي
+- **يشغل** Visual Studio Code في الدليل الحالي
 - **يفتح** مجلد مشروعك في المحرر
 - **يوفر** الوصول إلى جميع أدوات التطوير التي ستحتاجها
 
 **أضف ثلاثة ملفات إلى المجلد في Visual Studio Code بالأسماء التالية:**
 - `index.html` - يحتوي على هيكل ومحتوى لعبتك
 - `script.js` - يتعامل مع كل منطق اللعبة ومستمعي الأحداث
-- `style.css` - يُحدد المظهر البصري والتصميم
+- `style.css` - يحدد المظهر البصري والتصميم
 
 ## إنشاء واجهة المستخدم
 
-الآن دعنا نبني المسرح حيث ستحدث كل أحداث لعبتنا! فكر في هذا كتصميم لوحة التحكم لمركبة فضائية - نحتاج إلى التأكد من أن كل ما يحتاجه اللاعبون موجود حيث يتوقعونه.
+الآن دعونا نبني المسرح حيث ستحدث كل أحداث لعبتنا! فكر في هذا كتصميم لوحة التحكم لمركبة فضائية - نحتاج إلى التأكد من أن كل ما يحتاجه اللاعبون موجود حيث يتوقعونه.
 
-دعنا نحدد ما تحتاجه لعبتنا بالفعل. إذا كنت تلعب لعبة كتابة، ماذا تريد أن ترى على الشاشة؟ إليك ما سنحتاجه:
+دعونا نحدد ما تحتاجه لعبتنا بالفعل. إذا كنت تلعب لعبة كتابة، ماذا تريد أن ترى على الشاشة؟ إليك ما سنحتاجه:
 
 | عنصر واجهة المستخدم | الغرض | عنصر HTML |
-|------------|---------|-------------|
-| عرض الاقتباس | يعرض النص المطلوب كتابته | `<p>` مع `id="quote"` |
+|---------------------|-------|-----------|
+| عرض الاقتباس | يعرض النص للكتابة | `<p>` مع `id="quote"` |
 | منطقة الرسائل | تعرض الرسائل والحالة | `<p>` مع `id="message"` |
 | إدخال النص | حيث يكتب اللاعبون الاقتباس | `<input>` مع `id="typed-value"` |
 | زر البدء | يبدأ اللعبة | `<button>` مع `id="start"` |
 
 **فهم هيكل واجهة المستخدم:**
-- **ينظم** المحتوى منطقيًا من الأعلى إلى الأسفل
-- **يُعين** معرفات فريدة للعناصر لاستهدافها في JavaScript
-- **يوفر** تسلسلًا بصريًا واضحًا لتجربة مستخدم أفضل
+- **ينظم** المحتوى بشكل منطقي من الأعلى إلى الأسفل
+- **يخصص** معرفات فريدة للعناصر لاستهدافها باستخدام JavaScript
+- **يوفر** تسلسلًا بصريًا واضحًا لتحسين تجربة المستخدم
 - **يتضمن** عناصر HTML دلالية لتحسين الوصول
 
-كل هذه العناصر ستحتاج إلى معرفات حتى نتمكن من العمل معها في JavaScript الخاص بنا. سنضيف أيضًا مراجع إلى ملفات CSS وJavaScript التي سنقوم بإنشائها.
+كل هذه العناصر ستحتاج إلى معرفات حتى نتمكن من العمل معها في JavaScript الخاص بنا. سنضيف أيضًا روابط إلى ملفات CSS و JavaScript التي سنقوم بإنشائها.
 
 قم بإنشاء ملف جديد باسم `index.html`. أضف HTML التالي:
 
@@ -172,50 +172,50 @@ code .
 </html>
 ```
 
-**تفصيل ما يحققه هيكل HTML هذا:**
+**تفصيل ما يحققه هذا الهيكل HTML:**
 - **يربط** ملف CSS في `<head>` للتصميم
-- **يُنشئ** عنوانًا واضحًا وتعليمات للمستخدمين
-- **يُنشئ** فقرات مؤقتة بمعرفات محددة للمحتوى الديناميكي
+- **ينشئ** عنوانًا واضحًا وتعليمات للمستخدمين
+- **يؤسس** فقرات مؤقتة بمعرفات محددة للمحتوى الديناميكي
 - **يتضمن** حقل إدخال مع سمات الوصول
 - **يوفر** زر بدء لتشغيل اللعبة
-- **يُحمل** ملف JavaScript في النهاية لتحسين الأداء
+- **يحمل** ملف JavaScript في النهاية لتحسين الأداء
 
 ### تشغيل التطبيق
 
-اختبار تطبيقك بشكل متكرر أثناء التطوير يساعدك على اكتشاف المشكلات مبكرًا ورؤية تقدمك في الوقت الحقيقي. Live Server هو أداة لا تقدر بثمن تقوم بتحديث متصفحك تلقائيًا كلما حفظت التغييرات، مما يجعل التطوير أكثر كفاءة.
+اختبار تطبيقك بشكل متكرر أثناء التطوير يساعدك على اكتشاف المشكلات مبكرًا ورؤية تقدمك في الوقت الفعلي. Live Server هو أداة لا تقدر بثمن تقوم بتحديث متصفحك تلقائيًا كلما قمت بحفظ التغييرات، مما يجعل التطوير أكثر كفاءة.
 
-من الأفضل دائمًا التطوير بشكل تدريجي لرؤية كيف تبدو الأمور. دعنا نطلق تطبيقنا. هناك إضافة رائعة لـ Visual Studio Code تسمى [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) التي ستقوم باستضافة تطبيقك محليًا وتحديث المتصفح في كل مرة تحفظ فيها.
+من الأفضل دائمًا التطوير بشكل تدريجي لرؤية كيف تبدو الأمور. دعونا نطلق تطبيقنا. هناك إضافة رائعة لـ Visual Studio Code تسمى [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) التي ستقوم باستضافة تطبيقك محليًا وتحديث المتصفح في كل مرة تحفظ فيها.
 
 **قم بتثبيت [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) باتباع الرابط والنقر على تثبيت:**
 
 **ما يحدث أثناء التثبيت:**
-- **يُطالب** متصفحك بفتح Visual Studio Code
-- **يُرشدك** خلال عملية تثبيت الإضافة
+- **يفتح** متصفحك Visual Studio Code
+- **يرشدك** خلال عملية تثبيت الإضافة
 - **قد يتطلب** إعادة تشغيل Visual Studio Code لإكمال الإعداد
 
-**بمجرد التثبيت، في Visual Studio Code، اضغط Ctrl-Shift-P (أو Cmd-Shift-P) لفتح لوحة الأوامر:**
+**بمجرد التثبيت، في Visual Studio Code، اضغط على Ctrl-Shift-P (أو Cmd-Shift-P) لفتح لوحة الأوامر:**
 
 **فهم لوحة الأوامر:**
 - **يوفر** وصولًا سريعًا إلى جميع أوامر VS Code
 - **يبحث** عن الأوامر أثناء الكتابة
-- **يُقدم** اختصارات لوحة المفاتيح لتطوير أسرع
+- **يقدم** اختصارات لوحة المفاتيح لتطوير أسرع
 
 **اكتب "Live Server: Open with Live Server":**
 
 **ما يفعله Live Server:**
 - **يبدأ** خادم تطوير محلي لمشروعك
-- **يُحدث** المتصفح تلقائيًا عند حفظ الملفات
-- **يُقدم** ملفاتك من عنوان URL محلي (عادةً `localhost:5500`)
+- **يحدث** المتصفح تلقائيًا عند حفظ الملفات
+- **يخدم** ملفاتك من عنوان URL محلي (عادةً `localhost:5500`)
 
 **افتح متصفحًا وانتقل إلى `https://localhost:5500`:**
 
-يجب أن ترى الآن الصفحة التي أنشأتها! دعنا نضيف بعض الوظائف.
+يجب أن ترى الآن الصفحة التي أنشأتها! دعونا نضيف بعض الوظائف.
 
 ## إضافة CSS
 
-الآن دعنا نجعل الأمور تبدو جيدة! كان رد الفعل البصري ضروريًا لواجهات المستخدم منذ الأيام الأولى للحوسبة. في الثمانينيات، اكتشف الباحثون أن رد الفعل البصري الفوري يحسن أداء المستخدم بشكل كبير ويقلل الأخطاء. هذا بالضبط ما سنقوم بإنشائه.
+الآن دعونا نجعل الأمور تبدو جيدة! كان ردود الفعل البصرية أمرًا حيويًا لواجهات المستخدم منذ الأيام الأولى للحوسبة. في الثمانينيات، اكتشف الباحثون أن ردود الفعل البصرية الفورية تحسن أداء المستخدم بشكل كبير وتقلل الأخطاء. هذا بالضبط ما سنقوم بإنشائه.
 
-تحتاج لعبتنا إلى أن تكون واضحة تمامًا بشأن ما يحدث. يجب أن يعرف اللاعبون فورًا الكلمة التي يجب عليهم كتابتها، وإذا ارتكبوا خطأ، يجب أن يروا ذلك على الفور. دعنا ننشئ تصميمًا بسيطًا ولكنه فعال:
+تحتاج لعبتنا إلى أن تكون واضحة تمامًا بشأن ما يحدث. يجب أن يعرف اللاعبون فورًا الكلمة التي يجب عليهم كتابتها، وإذا ارتكبوا خطأ، يجب أن يروا ذلك على الفور. دعونا ننشئ بعض التصميمات البسيطة ولكن الفعالة:
 
 قم بإنشاء ملف جديد باسم `style.css` وأضف الصياغة التالية.
 
@@ -231,33 +231,33 @@ code .
 }
 ```
 
-**فهم هذه الفئات في CSS:**
-- **يُبرز** الكلمة الحالية بخلفية صفراء لتوجيه بصري واضح
-- **يُشير** إلى أخطاء الكتابة بلون خلفية مرجاني فاتح
-- **يوفر** ردود فعل فورية دون تعطيل تدفق كتابة المستخدم
-- **يستخدم** ألوانًا متباينة لتحسين الوصول والتواصل البصري الواضح
+**فهم هذه الفئات CSS:**
+- **تُبرز** الكلمة الحالية بخلفية صفراء لتوجيه بصري واضح
+- **تشير** إلى أخطاء الكتابة بلون خلفية وردي فاتح
+- **توفر** ردود فعل فورية دون تعطيل تدفق الكتابة للمستخدم
+- **تستخدم** ألوانًا متباينة لتحسين الوصول والتواصل البصري الواضح
 
-✅ عندما يتعلق الأمر بـ CSS يمكنك تصميم صفحتك بالطريقة التي ترغب بها. خذ بعض الوقت واجعل الصفحة تبدو أكثر جاذبية:
+✅ عندما يتعلق الأمر بـ CSS، يمكنك تصميم صفحتك بالطريقة التي تريدها. خذ بعض الوقت واجعل الصفحة تبدو أكثر جاذبية:
 
 - اختر خطًا مختلفًا
-- لون العناوين
+- أضف ألوانًا إلى العناوين
 - قم بتغيير حجم العناصر
 
 ## JavaScript
 
-هنا تصبح الأمور مثيرة! 🎉 لدينا هيكل HTML الخاص بنا وتصميم CSS، ولكن الآن لعبتنا مثل سيارة جميلة بدون محرك. JavaScript سيكون ذلك المحرك - هو ما يجعل كل شيء يعمل فعليًا ويستجيب لما يفعله اللاعبون.
+هنا تصبح الأمور مثيرة! 🎉 لدينا هيكل HTML الخاص بنا وتصميم CSS، ولكن الآن لعبتنا مثل سيارة جميلة بدون محرك. JavaScript سيكون هذا المحرك - هو ما يجعل كل شيء يعمل فعليًا ويستجيب لما يفعله اللاعبون.
 
-هنا سترى إبداعك ينبض بالحياة. سنقوم بمعالجة هذا خطوة بخطوة حتى لا يبدو الأمر مربكًا:
+هنا سترى إبداعك ينبض بالحياة. سنقوم بمعالجة هذا خطوة بخطوة حتى لا تشعر بالإرهاق:
 
 | الخطوة | الغرض | ما ستتعلمه |
-|------|---------|------------------|
+|--------|-------|------------|
 | [إنشاء الثوابت](../../../../4-typing-game/typing-game) | إعداد الاقتباسات ومراجع DOM | إدارة المتغيرات واختيار DOM |
 | [مستمع الحدث لبدء اللعبة](../../../../4-typing-game/typing-game) | التعامل مع تهيئة اللعبة | التعامل مع الأحداث وتحديث واجهة المستخدم |
-| [مستمع الحدث للكتابة](../../../../4-typing-game/typing-game) | معالجة إدخال المستخدم في الوقت الحقيقي | التحقق من صحة الإدخال وردود الفعل الديناميكية |
+| [مستمع الحدث للكتابة](../../../../4-typing-game/typing-game) | معالجة إدخال المستخدم في الوقت الفعلي | التحقق من صحة الإدخال وردود الفعل الديناميكية |
 
 **يساعدك هذا النهج المنظم على:**
 - **تنظيم** الكود الخاص بك في أقسام منطقية وقابلة للإدارة
-- **بناء** الوظائف تدريجيًا لتسهيل تصحيح الأخطاء
+- **بناء** الوظائف تدريجيًا لتسهيل التصحيح
 - **فهم** كيفية عمل أجزاء مختلفة من تطبيقك معًا
 - **إنشاء** أنماط قابلة لإعادة الاستخدام للمشاريع المستقبلية
 
@@ -265,21 +265,21 @@ code .
 
 ### إضافة الثوابت
 
-قبل أن نغوص في العمل، دعنا نجمع كل مواردنا! تمامًا مثل كيفية إعداد مركز التحكم في ناسا جميع أنظمة المراقبة الخاصة بهم قبل الإطلاق، يكون الأمر أسهل بكثير عندما يكون لديك كل شيء جاهز ومعد. هذا يوفر علينا البحث عن الأشياء لاحقًا ويساعد في منع الأخطاء الإملائية.
+قبل أن نغوص في العمل، دعونا نجمع كل مواردنا! تمامًا مثل كيفية إعداد مركز التحكم في ناسا جميع أنظمة المراقبة قبل الإطلاق، يكون الأمر أسهل بكثير عندما يكون لديك كل شيء جاهزًا. هذا يوفر علينا البحث عن الأشياء لاحقًا ويساعد في منع الأخطاء.
 
 إليك ما نحتاج إلى إعداده أولاً:
 
-| نوع البيانات | الغرض | مثال |
-|-----------|---------|--------|
+| نوع البيانات | الغرض | المثال |
+|--------------|-------|--------|
 | مجموعة الاقتباسات | تخزين جميع الاقتباسات الممكنة للعبة | `['Quote 1', 'Quote 2', ...]` |
 | مصفوفة الكلمات | تقسيم الاقتباس الحالي إلى كلمات فردية | `['When', 'you', 'have', ...]` |
 | مؤشر الكلمة | تتبع الكلمة التي يكتبها اللاعب | `0, 1, 2, 3...` |
-| وقت البدء | حساب الوقت المنقضي للتسجيل | `Date.now()` |
+| وقت البدء | حساب الوقت المنقضي لتسجيل النقاط | `Date.now()` |
 
 **سنحتاج أيضًا إلى مراجع لعناصر واجهة المستخدم الخاصة بنا:**
 | العنصر | المعرف | الغرض |
-|--------|-------|-------|
-| إدخال النص | `typed-value` | حيث يكتب اللاعبون |
+|--------|--------|-------|
+| حقل الإدخال النصي | `typed-value` | المكان الذي يكتب فيه اللاعبون |
 | عرض الاقتباس | `quote` | يعرض الاقتباس المطلوب كتابته |
 | منطقة الرسائل | `message` | تعرض تحديثات الحالة |
 
@@ -307,23 +307,23 @@ const typedValueElement = document.getElementById('typed-value');
 ```
 
 **تفصيل ما يحققه هذا الكود الإعدادي:**
-- **يخزن** مجموعة من اقتباسات شيرلوك هولمز باستخدام `const` لأن الاقتباسات لن تتغير
-- **يُهيئ** متغيرات التتبع باستخدام `let` لأن هذه القيم ستتغير أثناء اللعب
-- **يُلتقط** مراجع لعناصر DOM باستخدام `document.getElementById()` للوصول الفعال
-- **يُعد** الأساس لجميع وظائف اللعبة بأسماء متغيرات واضحة وموصوفة
-- **ينظم** البيانات والعناصر ذات الصلة بشكل منطقي لتسهيل صيانة الكود
+- **تخزين** مجموعة من اقتباسات شيرلوك هولمز باستخدام `const` لأن الاقتباسات لن تتغير
+- **تهيئة** متغيرات التتبع باستخدام `let` لأن هذه القيم ستتغير أثناء اللعب
+- **التقاط** مراجع لعناصر DOM باستخدام `document.getElementById()` للوصول الفعال
+- **إعداد** الأساس لجميع وظائف اللعبة بأسماء متغيرات واضحة وموصوفة
+- **تنظيم** البيانات والعناصر ذات الصلة بشكل منطقي لتسهيل صيانة الكود
 
 ✅ يمكنك الآن إضافة المزيد من الاقتباسات إلى لعبتك
 
-> 💡 **نصيحة احترافية**: يمكننا استرجاع العناصر في أي وقت في الكود باستخدام `document.getElementById()`. نظرًا لأننا سنشير إلى هذه العناصر بشكل منتظم، سنتجنب الأخطاء الإملائية مع النصوص الحرفية باستخدام الثوابت. يمكن أن تساعدك أطر العمل مثل [Vue.js](https://vuejs.org/) أو [React](https://reactjs.org/) في إدارة مركزية الكود بشكل أفضل.
+> 💡 **نصيحة احترافية**: يمكننا استرجاع العناصر في أي وقت في الكود باستخدام `document.getElementById()`. نظرًا لأننا سنشير إلى هذه العناصر بانتظام، سنتجنب الأخطاء الإملائية مع النصوص باستخدام الثوابت. يمكن أن تساعدك أطر العمل مثل [Vue.js](https://vuejs.org/) أو [React](https://reactjs.org/) في إدارة مركزية الكود بشكل أفضل.
 >
 **لماذا تعمل هذه الطريقة بشكل جيد:**
 - **تمنع** الأخطاء الإملائية عند الإشارة إلى العناصر عدة مرات
-- **تحسن** قابلية قراءة الكود بأسماء ثوابت موصوفة
+- **تحسن** قابلية قراءة الكود بأسماء ثوابت وصفية
 - **تمكن** دعم أفضل من بيئة التطوير المتكاملة مع الإكمال التلقائي وفحص الأخطاء
-- **تسهل** إعادة هيكلة الكود إذا تغيرت معرفات العناصر لاحقًا
+- **تسهل** إعادة الهيكلة إذا تغيرت معرفات العناصر لاحقًا
 
-خذ دقيقة لمشاهدة فيديو عن استخدام `const`، `let` و `var`
+خذ دقيقة لمشاهدة فيديو حول استخدام `const`، `let` و `var`
 
 [![أنواع المتغيرات](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "أنواع المتغيرات")
 
@@ -333,9 +333,9 @@ const typedValueElement = document.getElementById('typed-value');
 
 هنا حيث يبدأ كل شيء بالعمل! 🚀 أنت على وشك كتابة أول مستمع حدث حقيقي، وهناك شيء مرضٍ للغاية في رؤية الكود الخاص بك يستجيب لنقرة زر.
 
-فكر في الأمر: في مكان ما، سيقوم لاعب بالنقر على زر "ابدأ"، ويجب أن يكون الكود الخاص بك جاهزًا له. ليس لدينا فكرة متى سيضغط عليه - قد يكون فورًا، أو بعد أن يأخذ فنجان قهوة - ولكن عندما يفعل، ستبدأ لعبتك في العمل.
+فكر في الأمر: في مكان ما، سيقوم لاعب بالنقر على زر "ابدأ"، ويجب أن يكون الكود الخاص بك جاهزًا لهم. ليس لدينا فكرة متى سيضغطون عليه - قد يكون فورًا، أو بعد أن يأخذوا فنجان قهوة - ولكن عندما يفعلون ذلك، ستبدأ لعبتك في العمل.
 
-عندما ينقر المستخدم على `start`، نحتاج إلى اختيار اقتباس، إعداد واجهة المستخدم، وإعداد التتبع للكلمة الحالية والتوقيت. أدناه يوجد كود JavaScript الذي تحتاج إلى إضافته؛ سنناقشه بعد كتلة الكود.
+عندما ينقر المستخدم على `start`، نحتاج إلى اختيار اقتباس، إعداد واجهة المستخدم، وإعداد التتبع للكلمة الحالية والتوقيت. أدناه هو الكود الذي تحتاج إلى إضافته؛ سنناقشه بعد كتلة الكود.
 
 ```javascript
 // at the end of script.js
@@ -370,35 +370,35 @@ document.getElementById('start').addEventListener('click', () => {
 });
 ```
 
-**دعونا نفصل الكود إلى أقسام منطقية:**
+**لنقسم الكود إلى أقسام منطقية:**
 
 **📊 إعداد تتبع الكلمات:**
 - **يختار** اقتباسًا عشوائيًا باستخدام `Math.floor()` و `Math.random()` للتنوع
 - **يحول** الاقتباس إلى مصفوفة من الكلمات الفردية باستخدام `split(' ')`
-- **يعيد تعيين** `wordIndex` إلى 0 لأن اللاعبين يبدأون بالكلمة الأولى
-- **يُجهز** حالة اللعبة لجولة جديدة
+- **يعيد ضبط** `wordIndex` إلى 0 لأن اللاعبين يبدأون بالكلمة الأولى
+- **يجهز** حالة اللعبة لجولة جديدة
 
 **🎨 إعداد واجهة المستخدم والعرض:**
 - **ينشئ** مصفوفة من عناصر `<span>`، يلف كل كلمة لتنسيق فردي
-- **يجمع** عناصر span في سلسلة واحدة لتحديث DOM بكفاءة
+- **يجمع** عناصر الـ span في سلسلة واحدة لتحديث DOM بكفاءة
 - **يسلط الضوء** على الكلمة الأولى بإضافة فئة CSS `highlight`
-- **يمسح** أي رسائل لعبة سابقة لتوفير بداية نظيفة
+- **يمسح** أي رسائل لعبة سابقة لتوفير صفحة نظيفة
 
-**⌨️ إعداد مربع النص:**
+**⌨️ إعداد حقل الإدخال النصي:**
 - **يمسح** أي نص موجود في حقل الإدخال
-- **يركز** على مربع النص حتى يتمكن اللاعبون من البدء في الكتابة فورًا
-- **يُجهز** منطقة الإدخال لجلسة اللعبة الجديدة
+- **يضع التركيز** على حقل الإدخال حتى يتمكن اللاعبون من البدء في الكتابة فورًا
+- **يجهز** منطقة الإدخال لجلسة اللعبة الجديدة
 
 **⏱️ تهيئة المؤقت:**
 - **يلتقط** الطابع الزمني الحالي باستخدام `new Date().getTime()`
-- **يمكن** من حساب دقيق لسرعة الكتابة ووقت الإكمال
+- **يمكن** حساب دقيق لسرعة الكتابة ووقت الإكمال
 - **يبدأ** تتبع الأداء لجلسة اللعبة
 
 ### إضافة منطق الكتابة
 
-هنا نتعامل مع قلب لعبتنا! لا تقلق إذا بدا هذا كثيرًا في البداية - سنمر بكل جزء، وفي النهاية سترى كيف أن كل شيء منطقي.
+هنا حيث نتعامل مع قلب لعبتنا! لا تقلق إذا بدا هذا كثيرًا في البداية - سنمر بكل جزء، وبنهاية الأمر سترى كيف أن كل شيء منطقي.
 
-ما نبنيه هنا متطور للغاية: في كل مرة يكتب فيها شخص حرفًا، سيقوم الكود الخاص بنا بالتحقق مما كتبه، ويعطيه ملاحظات، ويقرر ما يجب أن يحدث بعد ذلك. إنه مشابه لكيفية تقديم معالجات النصوص المبكرة مثل WordStar في السبعينيات ملاحظات فورية للكتّاب.
+ما نبنيه هنا متقدم جدًا: في كل مرة يكتب فيها شخص حرفًا، سيقوم الكود الخاص بنا بالتحقق مما كتبه، ويعطيه ملاحظات، ويقرر ما يجب أن يحدث بعد ذلك. إنه مشابه لكيفية تقديم برامج معالجة النصوص المبكرة مثل WordStar في السبعينيات ملاحظات فورية للكتّاب.
 
 ```javascript
 // at the end of script.js
@@ -439,7 +439,7 @@ typedValueElement.addEventListener('input', () => {
 
 **فهم تدفق منطق الكتابة:**
 
-يستخدم هذا الوظيفة نهج الشلال، حيث يتم التحقق من الشروط من الأكثر تحديدًا إلى الأكثر عمومية. دعونا نفصل كل سيناريو:
+تستخدم هذه الوظيفة نهج الشلال، حيث يتم التحقق من الشروط من الأكثر تحديدًا إلى الأكثر عمومية. لنقسم كل سيناريو:
 
 ```mermaid
 flowchart TD
@@ -456,7 +456,7 @@ flowchart TD
 **🏁 اكتمال الاقتباس (السيناريو 1):**
 - **يتحقق** إذا كانت القيمة المكتوبة تطابق الكلمة الحالية ونحن في الكلمة الأخيرة
 - **يحسب** الوقت المنقضي بطرح وقت البدء من الوقت الحالي
-- **يحول** الميلي ثانية إلى ثوانٍ عن طريق القسمة على 1,000
+- **يحول** الملي ثانية إلى ثوانٍ عن طريق القسمة على 1,000
 - **يعرض** رسالة تهنئة مع وقت الإكمال
 
 **✅ اكتمال الكلمة (السيناريو 2):**
@@ -469,10 +469,10 @@ flowchart TD
 **📝 تقدم الكتابة (السيناريو 3):**
 - **يتحقق** من أن الكلمة الحالية تبدأ بما تم كتابته حتى الآن
 - **يزيل** أي تنسيق خطأ لإظهار أن الإدخال صحيح
-- **يسمح** بمواصلة الكتابة دون انقطاع
+- **يسمح** بالاستمرار في الكتابة دون انقطاع
 
 **❌ حالة الخطأ (السيناريو 4):**
-- **يُشغل** عندما لا يتطابق النص المكتوب مع بداية الكلمة المتوقعة
+- **يتم تشغيله** عندما لا يتطابق النص المكتوب مع بداية الكلمة المتوقعة
 - **يطبق** فئة CSS للخطأ لتوفير ملاحظات بصرية فورية
 - **يساعد** اللاعبين على تحديد وتصحيح الأخطاء بسرعة
 
@@ -482,22 +482,22 @@ flowchart TD
 
 الآن يأتي مرحلة الاختبار! هل ستعمل كما هو متوقع؟ هل فاتنا شيء؟ إليك الأمر: إذا لم يعمل شيء بشكل مثالي على الفور، فهذا أمر طبيعي تمامًا. حتى المطورين ذوي الخبرة يجدون أخطاء في الكود الخاص بهم بانتظام. هذا جزء من عملية التطوير!
 
-انقر على `start`، وابدأ الكتابة! يجب أن يبدو الأمر مشابهًا قليلاً للرسوم المتحركة التي رأيناها من قبل.
+انقر على `start`، وابدأ الكتابة! يجب أن يبدو الأمر مشابهًا للرسوم المتحركة التي رأيناها من قبل.
 
 ![رسوم متحركة للعبة أثناء العمل](../../../../4-typing-game/images/demo.gif)
 
 **ما يجب اختباره في تطبيقك:**
-- **يتحقق** من أن النقر على زر البدء يعرض اقتباسًا عشوائيًا
+- **يتحقق** من أن النقر على Start يعرض اقتباسًا عشوائيًا
 - **يؤكد** أن الكتابة تسلط الضوء على الكلمة الحالية بشكل صحيح
 - **يتحقق** من ظهور تنسيق الخطأ عند الكتابة غير الصحيحة
-- **يضمن** أن إكمال الكلمات ينقل التسليط بشكل صحيح
+- **يضمن** أن اكتمال الكلمات ينقل التسليط بشكل صحيح
 - **يختبر** أن إنهاء الاقتباس يعرض رسالة الإكمال مع التوقيت
 
 **نصائح شائعة لتصحيح الأخطاء:**
 - **تحقق** من وحدة التحكم في المتصفح (F12) للحصول على أخطاء JavaScript
 - **تأكد** من أن جميع أسماء الملفات تتطابق تمامًا (حساسة لحالة الأحرف)
 - **تأكد** من تشغيل Live Server وتحديثه بشكل صحيح
-- **اختبر** اقتباسات مختلفة للتحقق من عمل الاختيار العشوائي
+- **اختبر** اقتباسات مختلفة للتحقق من أن الاختيار العشوائي يعمل
 
 ---
 
@@ -514,21 +514,21 @@ flowchart TD
 4. ينفذ عداد سلسلة يزيد الصعوبة بعد 3 أداءات جيدة متتالية
 5. يضيف ملاحظات بصرية (ألوان، رسوم متحركة) للإشارة إلى تغييرات الصعوبة
 
-أضف العناصر اللازمة لـ HTML، أنماط CSS، ووظائف JavaScript لتنفيذ هذه الميزة. قم بتضمين معالجة الأخطاء المناسبة وتأكد من أن اللعبة تظل قابلة للوصول مع تسميات ARIA المناسبة.
+أضف العناصر اللازمة في HTML، أنماط CSS، ووظائف JavaScript لتنفيذ هذه الميزة. قم بتضمين معالجة الأخطاء المناسبة وتأكد من أن اللعبة تظل قابلة للوصول مع تسميات ARIA المناسبة.
 
 تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## 🚀 التحدي
 
-هل أنت مستعد لنقل لعبة الكتابة الخاصة بك إلى المستوى التالي؟ حاول تنفيذ هذه الميزات المتقدمة لتعميق فهمك للتعامل مع الأحداث ومعالجة DOM:
+هل أنت مستعد لنقل لعبة الكتابة الخاصة بك إلى المستوى التالي؟ حاول تنفيذ هذه الميزات المتقدمة لتعميق فهمك للتعامل مع الأحداث والتعامل مع DOM:
 
-**أضف المزيد من الوظائف:**
+**إضافة المزيد من الوظائف:**
 
 | الميزة | الوصف | المهارات التي ستتمرن عليها |
-|--------|-------|----------------------------|
+|--------|-------|-----------------------------|
 | **التحكم في الإدخال** | تعطيل مستمع حدث `input` عند الإكمال، وإعادة تمكينه عند النقر على الزر | إدارة الأحداث والتحكم في الحالة |
-| **إدارة حالة واجهة المستخدم** | تعطيل مربع النص عندما يكمل اللاعب الاقتباس | معالجة خصائص DOM |
-| **مربع حوار** | عرض مربع حوار مع رسالة النجاح | أنماط واجهة المستخدم المتقدمة وإمكانية الوصول |
+| **إدارة حالة واجهة المستخدم** | تعطيل حقل الإدخال عندما يكمل اللاعب الاقتباس | التلاعب بخصائص DOM |
+| **مربع حوار مودال** | عرض مربع حوار مودال مع رسالة النجاح | أنماط واجهة المستخدم المتقدمة وإمكانية الوصول |
 | **نظام أعلى الدرجات** | تخزين أعلى الدرجات باستخدام `localStorage` | واجهات برمجة التطبيقات لتخزين المتصفح واستمرارية البيانات |
 
 **نصائح التنفيذ:**
@@ -541,15 +541,20 @@ flowchart TD
 
 [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/22)
 
-## المراجعة والدراسة الذاتية
+---
 
-اقرأ عن [جميع الأحداث المتاحة](https://developer.mozilla.org/docs/Web/Events) للمطور عبر متصفح الويب، وفكر في السيناريوهات التي قد تستخدم فيها كل منها.
+## 🚀 جدول إتقان لعبة الكتابة الخاصة بك
 
-## الواجب
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] اختبر لعبة الكتابة الخاصة بك مع اقتباسات مختلفة للتأكد من أنها تعمل بسلاسة
+- [ ] جرب تنسيق CSS - حاول تغيير ألوان التسليط والخطأ
+- [ ] افتح أدوات المطور في المتصفح (F12) وشاهد وحدة التحكم أثناء اللعب
+- [ ] تحدى نفسك لإكمال اقتباس بأسرع وقت ممكن
 
-[قم بإنشاء لعبة لوحة مفاتيح جديدة](assignment.md)
+### ⏰ **ما يمكنك تحقيقه خلال هذه الساعة**
+- [ ] أضف المزيد من الاقتب
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/5-browser-extension/1-about-browsers/README.md b/translations/ar/5-browser-extension/1-about-browsers/README.md
index 76d6c89259..c7ae8d655f 100644
--- a/translations/ar/5-browser-extension/1-about-browsers/README.md
+++ b/translations/ar/5-browser-extension/1-about-browsers/README.md
@@ -1,14 +1,31 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "33a875c522f237a2026e4653240dfc07",
-  "translation_date": "2025-10-22T14:30:43+00:00",
+  "original_hash": "00aa85715e1efd4930c17a23e3012e69",
+  "translation_date": "2025-11-03T12:49:34+00:00",
   "source_file": "5-browser-extension/1-about-browsers/README.md",
   "language_code": "ar"
 }
 -->
 # مشروع إضافة المتصفح الجزء الأول: كل شيء عن المتصفحات
 
+```mermaid
+journey
+    title Your Browser Extension Development Journey
+    section Foundation
+      Understand browsers: 3: Student
+      Learn extension types: 4: Student
+      Setup development: 4: Student
+    section Development
+      Build interface: 4: Student
+      Add functionality: 5: Student
+      Handle data: 5: Student
+    section Integration
+      Test in browser: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
+
 ![رسم توضيحي للمتصفح](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ar.jpg)
 > رسم توضيحي بواسطة [وسيم شغام](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
 
@@ -18,19 +35,49 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### المقدمة
 
-إضافات المتصفح هي تطبيقات صغيرة تعزز تجربة التصفح على الإنترنت. مثل رؤية تيم بيرنرز لي الأصلية للويب التفاعلي، تعمل الإضافات على توسيع قدرات المتصفح إلى ما هو أبعد من مجرد عرض المستندات. من مديري كلمات المرور الذين يحافظون على أمان حساباتك إلى أدوات اختيار الألوان التي تساعد المصممين في اختيار الظلال المثالية، تحل الإضافات تحديات التصفح اليومية.
+إضافات المتصفح هي تطبيقات صغيرة تعزز تجربة التصفح على الإنترنت. مثل رؤية تيم بيرنرز لي الأصلية للويب التفاعلي، تعمل الإضافات على توسيع قدرات المتصفح إلى ما هو أبعد من مجرد عرض المستندات. من مديري كلمات المرور الذين يحافظون على أمان حساباتك إلى أدوات اختيار الألوان التي تساعد المصممين في اختيار الألوان المثالية، تحل الإضافات تحديات التصفح اليومية.
 
-قبل أن نبني أول إضافة لك، دعنا نفهم كيف تعمل المتصفحات. تمامًا كما احتاج ألكسندر غراهام بيل إلى فهم نقل الصوت قبل اختراع الهاتف، فإن معرفة أساسيات المتصفح ستساعدك في إنشاء إضافات تتكامل بسلاسة مع أنظمة المتصفح الحالية.
+قبل أن نبني أول إضافة لك، دعنا نفهم كيف تعمل المتصفحات. تمامًا كما احتاج ألكسندر غراهام بيل إلى فهم نقل الصوت قبل اختراع الهاتف، فإن معرفة أساسيات المتصفح ستساعدك على إنشاء إضافات تتكامل بسلاسة مع أنظمة المتصفح الحالية.
 
 بنهاية هذه الدرس، ستفهم بنية المتصفح وستبدأ في بناء أول إضافة لك.
 
+```mermaid
+mindmap
+  root((Browser Architecture))
+    Core Components
+      Rendering Engine
+      JavaScript Engine
+      Network Stack
+      Storage APIs
+    User Interface
+      Address Bar
+      Tab Management
+      Bookmarks
+      Extension Icons
+    Extension System
+      Manifest Files
+      Content Scripts
+      Background Pages
+      Popup Windows
+    Security Model
+      Same-Origin Policy
+      Permissions API
+      Content Security
+      Isolated Worlds
+    Development Tools
+      DevTools Integration
+      Debug Console
+      Performance Monitor
+      Extension Inspector
+```
+
 ## فهم متصفحات الويب
 
-المتصفح هو في الأساس مترجم مستندات متقدم. عندما تكتب "google.com" في شريط العنوان، يقوم المتصفح بسلسلة معقدة من العمليات - طلب المحتوى من الخوادم حول العالم، ثم تحليل وعرض هذا الكود إلى صفحات ويب تفاعلية تراها.
+المتصفح هو في الأساس مترجم مستندات متطور. عندما تكتب "google.com" في شريط العنوان، يقوم المتصفح بسلسلة معقدة من العمليات - طلب المحتوى من الخوادم حول العالم، ثم تحليل وعرض هذا الكود إلى صفحات ويب تفاعلية تراها.
 
-هذه العملية تشبه كيف تم تصميم أول متصفح ويب، WorldWideWeb، بواسطة تيم بيرنرز لي في عام 1990 لجعل المستندات المرتبطة متاحة للجميع.
+هذه العملية تشبه كيفية تصميم أول متصفح ويب، WorldWideWeb، بواسطة تيم بيرنرز لي في عام 1990 لجعل المستندات المرتبطة متاحة للجميع.
 
-✅ **قليل من التاريخ**: أول متصفح كان يسمى "WorldWideWeb" وتم إنشاؤه بواسطة السير تيموثي بيرنرز لي في عام 1990.
+✅ **قليل من التاريخ**: أول متصفح كان يسمى 'WorldWideWeb' وتم إنشاؤه بواسطة السير تيموثي بيرنرز لي في عام 1990.
 
 ![متصفحات قديمة](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ar.jpg)
 > بعض المتصفحات القديمة، عبر [كارين ماكجرين](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
@@ -43,15 +90,21 @@ CO_OP_TRANSLATOR_METADATA:
 sequenceDiagram
     participant User
     participant Browser
+    participant Extension
     participant DNS
     participant Server
     
     User->>Browser: Types URL and presses Enter
+    Browser->>Extension: Trigger beforeRequest event
+    Extension->>Extension: Check if URL needs modification
     Browser->>DNS: Looks up server IP address
     DNS->>Browser: Returns IP address
     Browser->>Server: Requests web page content
     Server->>Browser: Sends HTML, CSS, and JavaScript
+    Browser->>Extension: Trigger beforeResponse event
+    Extension->>Extension: Modify content if needed
     Browser->>User: Renders complete web page
+    Extension->>User: Show extension UI updates
 ```
 
 **ما تحققه هذه العملية:**
@@ -67,7 +120,7 @@ sequenceDiagram
 
 | الميزة | الغرض | فرص الإضافة |
 |---------|---------|------------------------|
-| **محرك العرض** | يعرض HTML، CSS، و JavaScript | تعديل المحتوى، حقن الأنماط |
+| **محرك العرض** | يعرض HTML، CSS، وJavaScript | تعديل المحتوى، حقن الأنماط |
 | **محرك JavaScript** | ينفذ كود JavaScript | سكربتات مخصصة، تفاعلات API |
 | **التخزين المحلي** | يحفظ البيانات محليًا | تفضيلات المستخدم، البيانات المؤقتة |
 | **الشبكة** | يتعامل مع طلبات الويب | مراقبة الطلبات، تحليل البيانات |
@@ -75,92 +128,146 @@ sequenceDiagram
 
 **فهم هذه الميزات يساعدك على:**
 - **تحديد** أين يمكن لإضافتك أن تضيف أكبر قيمة
-- **اختيار** واجهات برمجة التطبيقات المناسبة لإضافتك
+- **اختيار** واجهات برمجة التطبيقات المناسبة لإضافة المتصفح الخاصة بك
 - **تصميم** إضافات تعمل بكفاءة مع أنظمة المتصفح
-- **ضمان** أن إضافتك تتبع أفضل ممارسات أمان المتصفح
+- **ضمان** أن تتبع إضافتك أفضل ممارسات أمان المتصفح
 
 ### اعتبارات تطوير الإضافات عبر المتصفحات
 
-تقوم المتصفحات المختلفة بتنفيذ المعايير مع اختلافات طفيفة، مثل كيفية تعامل لغات البرمجة المختلفة مع نفس الخوارزمية بشكل مختلف. يتمتع Chrome وFirefox وSafari بخصائص فريدة يجب على المطورين أخذها في الاعتبار أثناء تطوير الإضافات.
+تقوم المتصفحات المختلفة بتنفيذ المعايير مع اختلافات طفيفة، مثل كيفية تعامل لغات البرمجة المختلفة مع نفس الخوارزمية بشكل مختلف. Chrome، Firefox، وSafari لديهم خصائص فريدة يجب على المطورين أخذها في الاعتبار أثناء تطوير الإضافات.
 
-> 💡 **نصيحة احترافية**: استخدم [caniuse.com](https://www.caniuse.com) للتحقق من دعم تقنيات الويب عبر المتصفحات المختلفة. هذا لا يقدر بثمن عند التخطيط لميزات إضافتك!
+> 💡 **نصيحة احترافية**: استخدم [caniuse.com](https://www.caniuse.com) للتحقق من دعم تقنيات الويب عبر المتصفحات المختلفة. هذا مفيد جدًا عند التخطيط لميزات إضافتك!
 
 **الاعتبارات الرئيسية لتطوير الإضافات:**
-- **اختبار** إضافتك عبر متصفحات Chrome وFirefox وEdge
-- **التكيف** مع واجهات برمجة التطبيقات المختلفة للإضافات وتنسيقات الملفات
+- **اختبار** إضافتك عبر متصفحات Chrome، Firefox، وEdge
+- **التكيف** مع واجهات برمجة التطبيقات المختلفة للإضافات وصيغ الملفات
 - **التعامل** مع خصائص الأداء المختلفة والقيود
 - **توفير** حلول بديلة للميزات الخاصة بالمتصفح التي قد لا تكون متاحة
 
-✅ **رؤية تحليلية**: يمكنك تحديد المتصفحات التي يفضلها المستخدمون لديك من خلال تثبيت حزم التحليل في مشاريع تطوير الويب الخاصة بك. تساعدك هذه البيانات على تحديد أولويات المتصفحات التي يجب دعمها أولاً.
+✅ **رؤية تحليلية**: يمكنك تحديد المتصفحات التي يفضلها المستخدمون لديك عن طريق تثبيت حزم التحليل في مشاريع تطوير الويب الخاصة بك. تساعدك هذه البيانات في تحديد أولويات المتصفحات التي يجب دعمها أولاً.
 
 ## فهم إضافات المتصفح
 
 تحل إضافات المتصفح تحديات التصفح الشائعة من خلال إضافة وظائف مباشرة إلى واجهة المتصفح. بدلاً من الحاجة إلى تطبيقات منفصلة أو سير عمل معقد، توفر الإضافات وصولاً فوريًا إلى الأدوات والميزات.
 
-هذا المفهوم يشبه كيف تصور رواد الحوسبة الأوائل مثل دوغلاس إنجلبارت تعزيز القدرات البشرية بالتكنولوجيا - الإضافات تعزز الوظائف الأساسية للمتصفح.
+هذا المفهوم يعكس كيف تصور رواد الحوسبة الأوائل مثل دوغلاس إنجلبارت تعزيز القدرات البشرية بالتكنولوجيا - الإضافات تعزز الوظائف الأساسية للمتصفح.
+
+```mermaid
+quadrantChart
+    title Browser Extension Categories
+    x-axis Simple --> Complex
+    y-axis Personal Use --> Professional Tools
+    quadrant-1 Developer Tools
+    quadrant-2 Enterprise Solutions
+    quadrant-3 Personal Utilities
+    quadrant-4 Productivity Apps
+    
+    Ad Blockers: [0.3, 0.2]
+    Password Managers: [0.7, 0.3]
+    Color Pickers: [0.4, 0.8]
+    Code Formatters: [0.8, 0.9]
+    Note Taking: [0.6, 0.5]
+    Video Downloaders: [0.5, 0.2]
+    Time Trackers: [0.7, 0.6]
+    Screenshot Tools: [0.4, 0.4]
+```
 
 **فئات الإضافات الشائعة وفوائدها:**
 - **أدوات الإنتاجية**: مديري المهام، تطبيقات تدوين الملاحظات، ومتعقبي الوقت التي تساعدك على التنظيم
-- **تحسينات الأمان**: مديري كلمات المرور، حاصرات الإعلانات، وأدوات الخصوصية التي تحمي بياناتك
-- **أدوات المطورين**: أدوات تنسيق الكود، أدوات اختيار الألوان، وأدوات التصحيح التي تبسط التطوير
-- **تحسين المحتوى**: أوضاع القراءة، أدوات تنزيل الفيديو، وأدوات التقاط الشاشة التي تحسن تجربتك على الويب
-
-✅ **سؤال للتفكير**: ما هي إضافات المتصفح المفضلة لديك؟ ما هي المهام المحددة التي تؤديها، وكيف تحسن تجربتك في التصفح؟
+- **تعزيزات الأمان**: مديري كلمات المرور، حاصرات الإعلانات، وأدوات الخصوصية التي تحمي بياناتك
+- **أدوات المطورين**: منسقي الأكواد، أدوات اختيار الألوان، وأدوات تصحيح الأخطاء التي تسهل التطوير
+- **تحسين المحتوى**: أوضاع القراءة، أدوات تنزيل الفيديو، وأدوات التقاط الشاشة التي تحسن تجربة الويب الخاصة بك
+
+✅ **سؤال للتفكير**: ما هي إضافات المتصفح المفضلة لديك؟ ما هي المهام المحددة التي تؤديها، وكيف تحسن تجربة التصفح الخاصة بك؟
+
+### 🔄 **تقييم تربوي**
+**فهم بنية المتصفح**: قبل الانتقال إلى تطوير الإضافات، تأكد من أنك تستطيع:
+- ✅ شرح كيفية معالجة المتصفحات لطلبات الويب وعرض المحتوى
+- ✅ تحديد المكونات الرئيسية لبنية المتصفح
+- ✅ فهم كيفية تكامل الإضافات مع وظائف المتصفح
+- ✅ التعرف على نموذج الأمان الذي يحمي المستخدمين
+
+**اختبار ذاتي سريع**: هل يمكنك تتبع المسار من كتابة عنوان URL إلى رؤية صفحة ويب؟
+1. **البحث في DNS** يحول عنوان URL إلى عنوان IP
+2. **طلب HTTP** يجلب المحتوى من الخادم
+3. **التحليل** يعالج HTML، CSS، وJavaScript
+4. **العرض** يظهر صفحة الويب النهائية
+5. **الإضافات** يمكنها تعديل المحتوى في عدة خطوات
 
 ## تثبيت وإدارة الإضافات
 
 فهم عملية تثبيت الإضافات يساعدك على توقع تجربة المستخدم عندما يقوم الأشخاص بتثبيت إضافتك. عملية التثبيت موحدة عبر المتصفحات الحديثة، مع اختلافات طفيفة في تصميم الواجهة.
 
-![لقطة شاشة لمتصفح Edge تعرض صفحة edge://extensions المفتوحة وقائمة الإعدادات المفتوحة](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ar.png)
+![لقطة شاشة لمتصفح Edge تعرض صفحة إدارة الإضافات المفتوحة وقائمة الإعدادات](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ar.png)
+
+> **هام**: تأكد من تفعيل وضع المطور والسماح بالإضافات من المتاجر الأخرى عند اختبار إضافاتك الخاصة.
 
-> **مهم**: تأكد من تفعيل وضع المطور والسماح بالإضافات من المتاجر الأخرى عند اختبار إضافاتك الخاصة.
+### عملية تثبيت الإضافات أثناء التطوير
 
-### عملية تثبيت إضافات التطوير
+عند تطوير واختبار إضافاتك الخاصة، اتبع هذا سير العمل:
 
-عندما تقوم بتطوير واختبار إضافاتك الخاصة، اتبع هذا سير العمل:
+```mermaid
+flowchart TD
+    A[Write Code] --> B[Build Extension]
+    B --> C{First Install?}
+    C -->|Yes| D[Load Unpacked]
+    C -->|No| E[Reload Extension]
+    D --> F[Test Functionality]
+    E --> F
+    F --> G{Working Correctly?}
+    G -->|No| H[Debug Issues]
+    G -->|Yes| I[Ready for Users]
+    H --> A
+    I --> J[Publish to Store]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#f3e5f5
+    style J fill:#fff3e0
+```
 
 ```bash
 # Step 1: Build your extension
 npm run build
 ```
 
-**ما يحققه هذا الأمر:**
-- **يجمع** كود المصدر الخاص بك إلى ملفات جاهزة للمتصفح
-- **يجمع** وحدات JavaScript في حزم محسنة
-- **ينشئ** ملفات الإضافة النهائية في مجلد `/dist`
-- **يجهز** إضافتك للتثبيت والاختبار
+**ما تحققه هذه الأوامر:**
+- **تجميع** الكود المصدري إلى ملفات جاهزة للمتصفح
+- **تجميع** وحدات JavaScript في حزم محسنة
+- **إنشاء** ملفات الإضافة النهائية في مجلد `/dist`
+- **تحضير** إضافتك للتثبيت والاختبار
 
-**الخطوة 2: الانتقال إلى إضافات المتصفح**
+**الخطوة 2: الانتقال إلى إدارة إضافات المتصفح**
 1. **افتح** صفحة إدارة الإضافات في متصفحك
 2. **انقر** على زر "الإعدادات والمزيد" (رمز `...`) في الزاوية العلوية اليمنى
 3. **اختر** "الإضافات" من القائمة المنسدلة
 
 **الخطوة 3: تحميل إضافتك**
-- **للتثبيت الجديد**: اختر `load unpacked` وحدد مجلد `/dist` الخاص بك
+- **للتثبيت الجديد**: اختر `load unpacked` وحدد مجلد `/dist`
 - **للتحديثات**: انقر على `reload` بجانب الإضافة المثبتة بالفعل
-- **للاختبار**: قم بتفعيل "وضع المطور" للوصول إلى ميزات التصحيح الإضافية
+- **للاختبار**: قم بتفعيل "وضع المطور" للوصول إلى ميزات تصحيح إضافية
 
-### تثبيت الإضافات للإنتاج
+### تثبيت الإضافات في الإنتاج
 
-> ✅ **ملاحظة**: هذه التعليمات الخاصة بالتطوير مخصصة للإضافات التي تقوم ببنائها بنفسك. لتثبيت الإضافات المنشورة، قم بزيارة المتاجر الرسمية لإضافات المتصفح مثل [متجر إضافات Microsoft Edge](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
+> ✅ **ملاحظة**: هذه التعليمات الخاصة بالتطوير مخصصة للإضافات التي تقوم ببنائها بنفسك. لتثبيت الإضافات المنشورة، قم بزيارة متاجر إضافات المتصفح الرسمية مثل [متجر إضافات Microsoft Edge](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
 
 **فهم الفرق:**
 - **تثبيت التطوير** يسمح لك باختبار الإضافات غير المنشورة أثناء التطوير
 - **تثبيت المتجر** يوفر إضافات منشورة ومراجعة مع تحديثات تلقائية
-- **التثبيت الجانبي** يسمح بتثبيت الإضافات من خارج المتاجر الرسمية (يتطلب وضع المطور)
+- **التثبيت اليدوي** يسمح بتثبيت الإضافات من خارج المتاجر الرسمية (يتطلب وضع المطور)
 
-## بناء إضافة بصمة الكربون الخاصة بك
+## بناء إضافة بصمة الكربون
 
 سنقوم بإنشاء إضافة متصفح تعرض بصمة الكربون لاستخدام الطاقة في منطقتك. يوضح هذا المشروع مفاهيم تطوير الإضافات الأساسية أثناء إنشاء أداة عملية لزيادة الوعي البيئي.
 
-يتبع هذا النهج مبدأ "التعلم من خلال العمل" الذي أثبت فعاليته منذ نظريات التعليم لجون ديوي - الجمع بين المهارات التقنية والتطبيقات الواقعية ذات المعنى.
+يتبع هذا النهج مبدأ "التعلم من خلال العمل" الذي أثبت فعاليته منذ نظريات التعليم لجون ديوي - الجمع بين المهارات التقنية والتطبيقات الواقعية ذات المغزى.
 
 ### متطلبات المشروع
 
 قبل بدء التطوير، دعنا نجمع الموارد والاعتماديات المطلوبة:
 
 **الوصول إلى واجهات برمجة التطبيقات المطلوبة:**
-- **[مفتاح API لإشارة CO2](https://www.co2signal.com/)**: أدخل عنوان بريدك الإلكتروني للحصول على مفتاح API مجاني
+- **[مفتاح API لـ CO2 Signal](https://www.co2signal.com/)**: أدخل عنوان بريدك الإلكتروني للحصول على مفتاح API مجاني
 - **[رمز المنطقة](http://api.electricitymap.org/v3/zones)**: ابحث عن رمز منطقتك باستخدام [خريطة الكهرباء](https://www.electricitymap.org/map) (على سبيل المثال، تستخدم بوسطن 'US-NEISO')
 
 **أدوات التطوير:**
@@ -171,7 +278,7 @@ npm run build
 
 ### فهم هيكل المشروع
 
-فهم هيكل المشروع يساعد على تنظيم العمل التطويري بكفاءة. مثل كيفية تنظيم مكتبة الإسكندرية لاسترجاع المعرفة بسهولة، فإن قاعدة كود منظمة جيدًا تجعل التطوير أكثر كفاءة:
+فهم هيكل المشروع يساعد في تنظيم العمل التطويري بكفاءة. مثل كيفية تنظيم مكتبة الإسكندرية لاسترجاع المعرفة بسهولة، فإن قاعدة الكود المنظمة جيدًا تجعل التطوير أكثر كفاءة:
 
 ```
 project-root/
@@ -180,12 +287,14 @@ project-root/
 │   ├── index.html           # User interface markup
 │   ├── background.js        # Background script functionality
 │   └── main.js              # Compiled JavaScript bundle
-└── src/                     # Source development files
-    └── index.js             # Your main JavaScript code
+├── src/                     # Source development files
+│   └── index.js             # Your main JavaScript code
+├── package.json             # Project dependencies and scripts
+└── webpack.config.js        # Build configuration
 ```
 
 **تفصيل ما يحققه كل ملف:**
-- **`manifest.json`**: **يحدد** بيانات التعريف للإضافة، الأذونات، ونقاط الدخول
+- **`manifest.json`**: **يحدد** بيانات الإضافة، الأذونات، ونقاط الدخول
 - **`index.html`**: **ينشئ** واجهة المستخدم التي تظهر عند نقر المستخدمين على الإضافة
 - **`background.js`**: **يتعامل** مع المهام الخلفية ومستمعي أحداث المتصفح
 - **`main.js`**: **يحتوي** على كود JavaScript النهائي بعد عملية البناء
@@ -193,13 +302,13 @@ project-root/
 
 > 💡 **نصيحة تنظيمية**: قم بتخزين مفتاح API ورمز المنطقة في ملاحظة آمنة للرجوع إليها بسهولة أثناء التطوير. ستحتاج إلى هذه القيم لاختبار وظائف الإضافة.
 
-✅ **ملاحظة أمان**: لا تقم أبدًا بإضافة مفاتيح API أو بيانات اعتماد حساسة إلى مستودع الكود الخاص بك. سنوضح لك كيفية التعامل مع هذه الأمور بأمان في الخطوات التالية.
+✅ **ملاحظة أمنية**: لا تقم أبدًا بإضافة مفاتيح API أو بيانات اعتماد حساسة إلى مستودع الكود الخاص بك. سنوضح لك كيفية التعامل مع هذه الأمور بأمان في الخطوات التالية.
 
 ## إنشاء واجهة الإضافة
 
-الآن سنقوم ببناء مكونات واجهة المستخدم. تستخدم الإضافة نهج الشاشتين: شاشة الإعداد للتكوين الأولي وشاشة النتائج لعرض البيانات.
+الآن سنقوم ببناء مكونات واجهة المستخدم. تستخدم الإضافة نهج الشاشة الثنائية: شاشة الإعداد للتكوين الأولي وشاشة النتائج لعرض البيانات.
 
-يتبع هذا مبدأ الكشف التدريجي المستخدم في تصميم الواجهات منذ الأيام الأولى للحوسبة - الكشف عن المعلومات والخيارات بتسلسل منطقي لتجنب إرباك المستخدمين.
+يتبع هذا مبدأ الكشف التدريجي المستخدم في تصميم الواجهات منذ الأيام الأولى للحوسبة - الكشف عن المعلومات والخيارات بترتيب منطقي لتجنب إرباك المستخدمين.
 
 ### نظرة عامة على شاشات الإضافة
 
@@ -207,11 +316,11 @@ project-root/
 ![لقطة شاشة للإضافة المكتملة مفتوحة في المتصفح، تعرض نموذجًا يحتوي على مدخلات لاسم المنطقة ومفتاح API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ar.png)
 
 **شاشة النتائج** - عرض بيانات بصمة الكربون:
-![لقطة شاشة للإضافة المكتملة تعرض قيم استخدام الكربون ونسبة الوقود الأحفوري لمنطقة US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ar.png)
+![لقطة شاشة للإضافة المكتملة تعرض قيمًا لاستخدام الكربون ونسبة الوقود الأحفوري لمنطقة US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ar.png)
 
 ### بناء نموذج التكوين
 
-يجمع نموذج الإعداد بيانات تكوين المستخدم أثناء الاستخدام الأولي. بمجرد التكوين، يتم الاحتفاظ بهذه المعلومات في تخزين المتصفح للجلسات المستقبلية.
+يجمع نموذج الإعداد بيانات تكوين المستخدم أثناء الاستخدام الأول. بمجرد التكوين، تبقى هذه المعلومات في تخزين المتصفح للجلسات المستقبلية.
 
 في ملف `/dist/index.html`، أضف هيكل النموذج التالي:
 
@@ -233,15 +342,15 @@ project-root/
 ```
 
 **ما يحققه هذا النموذج:**
-- **ينشئ** هيكل نموذج دلالي مع تسميات ومدخلات مناسبة
-- **يمكن** وظيفة الإكمال التلقائي للمتصفح لتحسين تجربة المستخدم
-- **يتطلب** ملء كلا الحقلين قبل الإرسال باستخدام خاصية `required`
-- **ينظم** المدخلات بأسماء صفوص وصفية لتسهيل التصميم واستهداف JavaScript
-- **يوفر** تعليمات واضحة للمستخدمين الذين يقومون بإعداد الإضافة لأول مرة
+- **إنشاء** هيكل نموذج دلالي مع تسميات ومدخلات مناسبة
+- **تمكين** وظيفة الإكمال التلقائي للمتصفح لتحسين تجربة المستخدم
+- **طلب** ملء كلا الحقلين قبل الإرسال باستخدام خاصية `required`
+- **تنظيم** المدخلات بأسماء فئات وصفية لتسهيل التخصيص والاستهداف باستخدام JavaScript
+- **توفير** تعليمات واضحة للمستخدمين الذين يقومون بإعداد الإضافة لأول مرة
 
 ### بناء عرض النتائج
 
-بعد ذلك، قم بإنشاء منطقة النتائج التي ستعرض بيانات بصمة الكربون. أضف هذا الكود HTML أسفل النموذج:
+بعد ذلك، قم بإنشاء منطقة النتائج التي ستعرض بيانات بصمة الكربون. أضف هذا HTML أسفل النموذج:
 
 ```html
 <div class="result">
@@ -259,14 +368,14 @@ project-root/
 
 **تفصيل ما يوفره هذا الهيكل:**
 - **`loading`**: **يعرض** رسالة تحميل أثناء جلب بيانات API
-- **`errors`**: **يعرض** رسائل خطأ إذا فشلت طلبات API أو كانت البيانات غير صالحة
+- **`errors`**: **يعرض** رسائل خطأ إذا فشلت مكالمات API أو كانت البيانات غير صالحة
 - **`data`**: **يحتوي** على بيانات خام لأغراض التصحيح أثناء التطوير
 - **`result-container`**: **يقدم** معلومات بصمة الكربون بشكل منسق للمستخدمين
 - **`clear-btn`**: **يسمح** للمستخدمين بتغيير منطقتهم وإعادة تكوين الإضافة
 
 ### إعداد عملية البناء
 
-الآن دعونا نقوم بتثبيت اعتماديات المشروع واختبار عملية البناء:
+الآن دعنا نقوم بتثبيت اعتماديات المشروع واختبار عملية البناء:
 
 ```bash
 npm install
@@ -275,60 +384,176 @@ npm install
 **ما تحققه عملية التثبيت هذه:**
 - **تنزيل** Webpack واعتماديات التطوير الأخرى المحددة في `package.json`
 - **تكوين** سلسلة أدوات البناء لتجميع JavaScript الحديث
-- **إعداد** بيئة التطوير لبناء واختبار الإضافات
+- **تحضير** بيئة التطوير لبناء الإضافات واختبارها
 - **تمكين** تجميع الكود، التحسين، وميزات التوافق عبر المتصفحات
 
-> 💡 **رؤية عملية البناء**: يقوم Webpack بتجميع كود المصدر الخاص بك من `/src/index.js` إلى `/dist/main.js`. تعمل هذه العملية على تحسين الكود للإنتاج وتضمن توافق المتصفح.
+> 💡 **رؤية حول عملية البناء**: يقوم Webpack بتجميع الكود المصدري الخاص بك من `/src/index.js` إلى `/dist/main.js`. هذه العملية تحسن الكود الخاص بك للإنتاج وتضمن توافق المتصفح.
 
 ### اختبار تقدمك
 
-في هذه المرحلة، يمكنك اختبار إضافتك:
+في هذه المرحلة، يمكنك اختبار الإضافة الخاصة بك:
+1. **قم بتشغيل** أمر البناء لتجميع الكود الخاص بك  
+2. **قم بتحميل** الامتداد في متصفحك باستخدام وضع المطور  
+3. **تحقق** من أن النموذج يظهر بشكل صحيح ويبدو احترافيًا  
+4. **افحص** أن جميع عناصر النموذج متناسقة وتعمل بشكل جيد  
 
-1. **قم بتشغيل** أمر البناء لتجميع الكود الخاص بك
-2. **قم بتحميل** الإضافة إلى متصفحك باستخدام وضع المطور
-3. **تحقق** من أن النموذج يظهر بشكل صحيح ويبدو احترافيًا
-4. **افحص** أن جميع عناصر النموذج مصفوفة بشكل صحيح وتعمل
+**ما الذي أنجزته:**  
+- **بنيت** الهيكل الأساسي لـ HTML الخاص بامتدادك  
+- **أنشأت** واجهات التكوين والنتائج باستخدام علامات دلالية صحيحة  
+- **أعددت** سير عمل تطوير حديث باستخدام أدوات قياسية في الصناعة  
+- **جهزت** الأساس لإضافة وظائف JavaScript التفاعلية  
 
-**ما أنجزته:**
-- **بنيت** الهيكل الأساسي لـ HTML لإضافتك
-- **أنشأت** واجهات التكوين والنتائج مع ترميز دلالي مناسب
-- **أعددت** سير عمل تطوير حديث باستخدام أدوات قياسية في الصناعة
-- **جهزت** الأساس لإضافة وظائف JavaScript التفاعلية
+### 🔄 **مراجعة تعليمية**  
+**تقدم تطوير الامتداد**: تحقق من فهمك قبل المتابعة:  
+- ✅ هل يمكنك شرح الغرض من كل ملف في هيكل المشروع؟  
+- ✅ هل تفهم كيف يحول عملية البناء الكود المصدر الخاص بك؟  
+- ✅ لماذا نفصل بين التكوين والنتائج في أقسام واجهة مستخدم مختلفة؟  
+- ✅ كيف يدعم هيكل النموذج سهولة الاستخدام وإمكانية الوصول؟  
 
-لقد أكملت المرحلة الأولى من تطوير إضافات المتصفح. مثلما احتاج الأخوان رايت إلى فهم الديناميكا الهوائية قبل تحقيق الطيران، فإن فهم هذه المفاهيم الأساسية يجهزك لبناء ميزات تفاعلية أكثر تعقيدًا في الدرس التالي.
+**فهم سير العمل التطويري**: يجب أن تكون الآن قادرًا على:  
+1. **تعديل** HTML وCSS لواجهة امتدادك  
+2. **تشغيل** أمر البناء لتجميع التعديلات  
+3. **إعادة تحميل** الامتداد في متصفحك لاختبار التحديثات  
+4. **تصحيح الأخطاء** باستخدام أدوات المطور في المتصفح  
 
-## تحدي وكيل GitHub Copilot 🚀
+لقد أكملت المرحلة الأولى من تطوير امتداد المتصفح. كما احتاج الأخوان رايت لفهم الديناميكا الهوائية قبل تحقيق الطيران، فإن فهم هذه المفاهيم الأساسية يجهزك لبناء ميزات تفاعلية أكثر تعقيدًا في الدرس التالي.  
 
-استخدم وضع الوكيل لإكمال التحدي التالي:
-**الوصف:** تحسين امتداد المتصفح عن طريق إضافة ميزات التحقق من صحة النماذج وتقديم ملاحظات للمستخدم لتحسين تجربة المستخدم عند إدخال مفاتيح API وأكواد المناطق.
+## تحدي وكيل GitHub Copilot 🚀  
 
-**المهمة:** قم بإنشاء وظائف تحقق في JavaScript للتحقق مما إذا كان حقل مفتاح API يحتوي على 20 حرفًا على الأقل وإذا كان رمز المنطقة يتبع التنسيق الصحيح (مثل 'US-NEISO'). أضف ملاحظات مرئية عن طريق تغيير ألوان حدود الإدخال إلى الأخضر للإدخالات الصحيحة والأحمر للإدخالات غير الصحيحة. كما أضف ميزة تبديل لعرض/إخفاء مفتاح API لأغراض الأمان.
+استخدم وضع الوكيل لإكمال التحدي التالي:  
 
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+**الوصف:** قم بتحسين امتداد المتصفح عن طريق إضافة ميزات التحقق من صحة النموذج وردود فعل المستخدم لتحسين تجربة المستخدم عند إدخال مفاتيح API ورموز المناطق.  
 
-## 🚀 التحدي
+**المهمة:** قم بإنشاء وظائف تحقق في JavaScript للتحقق من أن حقل مفتاح API يحتوي على 20 حرفًا على الأقل وأن رمز المنطقة يتبع التنسيق الصحيح (مثل 'US-NEISO'). أضف ردود فعل مرئية عن طريق تغيير ألوان حدود الإدخال إلى الأخضر للإدخالات الصحيحة والأحمر للإدخالات غير الصحيحة. أضف أيضًا ميزة تبديل لإظهار/إخفاء مفتاح API لأغراض الأمان.  
 
-قم بإلقاء نظرة على متجر امتدادات المتصفح وقم بتثبيت أحد الامتدادات على متصفحك. يمكنك فحص ملفاته بطرق مثيرة للاهتمام. ماذا تكتشف؟
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.  
 
-## اختبار ما بعد المحاضرة
+## 🚀 التحدي  
 
-[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/24)
+قم بإلقاء نظرة على متجر امتدادات المتصفح وقم بتثبيت واحد في متصفحك. يمكنك فحص ملفاته بطرق مثيرة للاهتمام. ماذا تكتشف؟  
 
-## المراجعة والدراسة الذاتية
+## اختبار ما بعد المحاضرة  
 
-في هذا الدرس تعلمت قليلاً عن تاريخ متصفح الويب؛ اغتنم هذه الفرصة لتتعرف على كيفية تصور مخترعي الشبكة العالمية لاستخدامها من خلال قراءة المزيد عن تاريخها. بعض المواقع المفيدة تشمل:
+[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/24)  
+
+## المراجعة والدراسة الذاتية  
+
+في هذا الدرس تعلمت قليلاً عن تاريخ متصفح الويب؛ اغتنم هذه الفرصة لتتعرف على كيفية تصور مخترعي الشبكة العالمية لاستخدامها من خلال قراءة المزيد عن تاريخها. بعض المواقع المفيدة تشمل:  
+
+[تاريخ متصفحات الويب](https://www.mozilla.org/firefox/browsers/browser-history/)  
+
+[تاريخ الشبكة](https://webfoundation.org/about/vision/history-of-the-web/)  
+
+[مقابلة مع تيم بيرنرز لي](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**  
+- [ ] افتح صفحة امتدادات Chrome/Edge (chrome://extensions) واستكشف ما لديك مثبت  
+- [ ] انظر إلى علامة الشبكة في أدوات المطور في المتصفح أثناء تحميل صفحة ويب  
+- [ ] حاول عرض مصدر الصفحة (Ctrl+U) لرؤية هيكل HTML  
+- [ ] افحص أي عنصر في صفحة ويب وعدل CSS الخاص به في أدوات المطور  
+
+### 🎯 **ما يمكنك إنجازه خلال الساعة**  
+- [ ] أكمل اختبار ما بعد الدرس وافهم أساسيات المتصفح  
+- [ ] أنشئ ملف manifest.json أساسي لامتداد المتصفح  
+- [ ] قم ببناء امتداد بسيط "Hello World" يظهر نافذة منبثقة  
+- [ ] اختبر تحميل امتدادك في وضع المطور  
+- [ ] استكشف وثائق امتدادات المتصفح للمتصفح المستهدف  
+
+### 📅 **رحلة تطوير الامتداد الخاصة بك لمدة أسبوع**  
+- [ ] أكمل امتداد متصفح وظيفي ذو فائدة حقيقية  
+- [ ] تعلم عن نصوص المحتوى، والنصوص الخلفية، وتفاعلات النوافذ المنبثقة  
+- [ ] أتقن واجهات برمجة التطبيقات الخاصة بالمتصفح مثل التخزين، وعلامات التبويب، والرسائل  
+- [ ] صمم واجهات مستخدم سهلة الاستخدام لامتدادك  
+- [ ] اختبر امتدادك عبر مواقع وسيناريوهات مختلفة  
+- [ ] انشر امتدادك في متجر امتدادات المتصفح  
+
+### 🌟 **رحلة تطوير المتصفح الخاصة بك لمدة شهر**  
+- [ ] قم ببناء امتدادات متعددة تحل مشاكل المستخدمين المختلفة  
+- [ ] تعلم واجهات برمجة التطبيقات المتقدمة وأفضل ممارسات الأمان  
+- [ ] ساهم في مشاريع امتدادات المتصفح مفتوحة المصدر  
+- [ ] أتقن التوافق عبر المتصفحات والتحسين التدريجي  
+- [ ] أنشئ أدوات تطوير الامتدادات وقوالب للآخرين  
+- [ ] كن خبيرًا في امتدادات المتصفح يساعد المطورين الآخرين  
+
+## 🎯 جدول زمني لإتقان امتدادات المتصفح  
+
+```mermaid
+timeline
+    title Browser Extension Development Progression
+    
+    section Foundation (15 minutes)
+        Browser Understanding: Core architecture
+                              : Rendering process
+                              : Extension integration points
+        
+    section Setup (20 minutes)
+        Development Environment: Project structure
+                               : Build tools configuration
+                               : Browser developer mode
+                               : Extension loading process
+        
+    section Interface Design (25 minutes)
+        User Experience: HTML structure
+                       : CSS styling
+                       : Form validation
+                       : Responsive design
+        
+    section Core Functionality (35 minutes)
+        JavaScript Integration: Event handling
+                              : API interactions
+                              : Data storage
+                              : Error handling
+        
+    section Browser APIs (45 minutes)
+        Platform Integration: Permissions system
+                            : Storage APIs
+                            : Tab management
+                            : Context menus
+        
+    section Advanced Features (1 week)
+        Professional Extensions: Background scripts
+                               : Content scripts
+                               : Cross-browser compatibility
+                               : Performance optimization
+        
+    section Publishing (2 weeks)
+        Distribution: Store submission
+                   : Review process
+                   : User feedback
+                   : Update management
+        
+    section Expert Level (1 month)
+        Extension Ecosystem: Advanced APIs
+                           : Security best practices
+                           : Enterprise features
+                           : Framework integration
+```
+  
+### 🛠️ ملخص أدوات تطوير الامتداد الخاصة بك  
 
-[تاريخ متصفحات الويب](https://www.mozilla.org/firefox/browsers/browser-history/)
+بعد إكمال هذا الدرس، لديك الآن:  
+- **معرفة بنية المتصفح**: فهم محركات العرض، نماذج الأمان، وتكامل الامتدادات  
+- **بيئة تطوير**: سلسلة أدوات حديثة مع Webpack، NPM، وإمكانيات التصحيح  
+- **أساسيات واجهة المستخدم/تجربة المستخدم**: هيكل HTML دلالي مع أنماط الكشف التدريجي  
+- **وعي أمني**: فهم أذونات المتصفح وممارسات التطوير الآمن  
+- **مفاهيم عبر المتصفحات**: معرفة اعتبارات التوافق ونهج الاختبار  
+- **تكامل API**: أساس للعمل مع مصادر البيانات الخارجية  
+- **سير عمل احترافي**: إجراءات تطوير واختبار قياسية في الصناعة  
 
-[تاريخ الشبكة العالمية](https://webfoundation.org/about/vision/history-of-the-web/)
+**تطبيقات العالم الحقيقي**: هذه المهارات تنطبق مباشرة على:  
+- **تطوير الويب**: تطبيقات الصفحة الواحدة وتطبيقات الويب التقدمية  
+- **تطبيقات سطح المكتب**: برامج سطح المكتب المستندة إلى الويب وElectron  
+- **تطوير الجوال**: التطبيقات الهجينة وحلول الجوال المستندة إلى الويب  
+- **أدوات المؤسسات**: تطبيقات الإنتاجية الداخلية وأتمتة سير العمل  
+- **المصادر المفتوحة**: المساهمة في مشاريع امتدادات المتصفح ومعايير الويب  
 
-[مقابلة مع تيم بيرنرز-لي](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+**المستوى التالي**: أنت جاهز لإضافة وظائف تفاعلية، العمل مع واجهات برمجة التطبيقات الخاصة بالمتصفح، وإنشاء امتدادات تحل مشاكل المستخدمين الحقيقية!  
 
-## الواجب 
+## المهمة  
 
-[أعد تصميم امتدادك](assignment.md)
+[أعد تصميم امتدادك](assignment.md)  
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ar/5-browser-extension/2-forms-browsers-local-storage/README.md
index f5283b56e1..169dea464e 100644
--- a/translations/ar/5-browser-extension/2-forms-browsers-local-storage/README.md
+++ b/translations/ar/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -1,13 +1,30 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8c8cd4af6086cc1d47e1d43aa4983d20",
-  "translation_date": "2025-10-22T14:29:58+00:00",
+  "original_hash": "2b6203a48c48d8234e0948353b47d84e",
+  "translation_date": "2025-11-03T12:48:54+00:00",
   "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
   "language_code": "ar"
 }
 -->
-# مشروع إضافة المتصفح الجزء الثاني: استدعاء API واستخدام التخزين المحلي
+# مشروع إضافة المتصفح الجزء الثاني: الاتصال بـ API واستخدام التخزين المحلي
+
+```mermaid
+journey
+    title Your API Integration & Storage Journey
+    section Foundation
+      Setup DOM references: 3: Student
+      Add event listeners: 4: Student
+      Handle form submission: 4: Student
+    section Data Management
+      Implement local storage: 4: Student
+      Build API calls: 5: Student
+      Handle async operations: 5: Student
+    section User Experience
+      Add error handling: 5: Student
+      Create loading states: 4: Student
+      Polish interactions: 5: Student
+```
 
 ## اختبار ما قبل المحاضرة
 
@@ -15,21 +32,78 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## المقدمة
 
-هل تتذكر إضافة المتصفح التي بدأت في بنائها؟ في الوقت الحالي لديك نموذج جميل المظهر، لكنه ثابت إلى حد كبير. اليوم سنجعلها تنبض بالحياة من خلال ربطها ببيانات حقيقية ومنحها ذاكرة.
-
-فكر في أجهزة التحكم في مهمة أبولو - لم تكن تعرض معلومات ثابتة فقط. بل كانت تتواصل باستمرار مع المركبة الفضائية، وتُحدث البيانات التليمترية، وتحتفظ بمعايير المهمة الحرجة. هذا هو النوع الديناميكي من السلوك الذي سنبنيه اليوم. ستتمكن إضافتك من الوصول إلى الإنترنت، وجلب بيانات بيئية حقيقية، وتذكر إعداداتك للمرة القادمة.
-
-قد يبدو دمج API معقدًا، لكنه في الحقيقة مجرد تعليم الكود كيفية التواصل مع خدمات أخرى. سواء كنت تستخرج بيانات الطقس، أو خلاصات وسائل التواصل الاجتماعي، أو معلومات البصمة الكربونية كما سنفعل اليوم، الأمر كله يتعلق بإنشاء هذه الروابط الرقمية. سنستكشف أيضًا كيف يمكن للمتصفحات الاحتفاظ بالمعلومات - مثلما استخدمت المكتبات فهارس البطاقات لتذكر أماكن الكتب.
-
-بنهاية هذا الدرس، ستكون لديك إضافة متصفح تجلب بيانات حقيقية، تخزن تفضيلات المستخدم، وتوفر تجربة سلسة. لنبدأ!
+هل تتذكر إضافة المتصفح التي بدأت في بنائها؟ في الوقت الحالي لديك نموذج جميل المظهر، لكنه في الأساس ثابت. اليوم سنجعلها تنبض بالحياة من خلال الاتصال ببيانات حقيقية ومنحها ذاكرة.
+
+فكر في أجهزة الكمبيوتر الخاصة بمهمة أبولو - لم تكن تعرض معلومات ثابتة فقط. بل كانت تتواصل باستمرار مع المركبة الفضائية، وتُحدث البيانات التليمترية، وتحتفظ بمعايير المهمة الحرجة. هذا هو نوع السلوك الديناميكي الذي نبنيه اليوم. ستقوم الإضافة الخاصة بك بالاتصال بالإنترنت، وجلب بيانات بيئية حقيقية، وتذكر إعداداتك للمرة القادمة.
+
+قد يبدو تكامل API معقدًا، لكنه في الحقيقة مجرد تعليم الكود الخاص بك كيفية التواصل مع الخدمات الأخرى. سواء كنت تجلب بيانات الطقس، أو خلاصات وسائل التواصل الاجتماعي، أو معلومات البصمة الكربونية كما سنفعل اليوم، فإن الأمر كله يتعلق بإنشاء هذه الروابط الرقمية. سنستكشف أيضًا كيف يمكن للمتصفحات الاحتفاظ بالمعلومات - مثلما استخدمت المكتبات بطاقات الفهرسة لتذكر مكان الكتب.
+
+بنهاية هذا الدرس، سيكون لديك إضافة متصفح تجلب بيانات حقيقية، تخزن تفضيلات المستخدم، وتوفر تجربة سلسة. لنبدأ!
+
+```mermaid
+mindmap
+  root((Dynamic Extensions))
+    DOM Manipulation
+      Element Selection
+      Event Handling
+      State Management
+      UI Updates
+    Local Storage
+      Data Persistence
+      Key-Value Pairs
+      Session Management
+      User Preferences
+    API Integration
+      HTTP Requests
+      Authentication
+      Data Parsing
+      Error Handling
+    Async Programming
+      Promises
+      Async/Await
+      Error Catching
+      Non-blocking Code
+    User Experience
+      Loading States
+      Error Messages
+      Smooth Transitions
+      Data Validation
+```
 
-✅ اتبع الأجزاء المرقمة في الملفات المناسبة لمعرفة أين تضع الكود الخاص بك.
+✅ اتبع الأجزاء المرقمة في الملفات المناسبة لمعرفة مكان وضع الكود الخاص بك
 
 ## إعداد العناصر للتعامل معها في الإضافة
 
-قبل أن يتمكن JavaScript من التعامل مع الواجهة، يحتاج إلى مراجع لعناصر HTML محددة. فكر في الأمر مثل التلسكوب الذي يحتاج إلى أن يتم توجيهه نحو نجوم معينة - قبل أن يتمكن غاليليو من دراسة أقمار المشتري، كان عليه تحديد موقع المشتري والتركيز عليه.
-
-في ملف `index.js` الخاص بك، سنقوم بإنشاء متغيرات `const` تلتقط مراجع لكل عنصر مهم في النموذج. هذا مشابه لكيفية قيام العلماء بتسمية معداتهم - بدلاً من البحث في المختبر بأكمله في كل مرة، يمكنهم الوصول مباشرة إلى ما يحتاجونه.
+قبل أن يتمكن JavaScript الخاص بك من التعامل مع الواجهة، يحتاج إلى مراجع لعناصر HTML محددة. فكر في الأمر مثل التلسكوب الذي يحتاج إلى أن يتم توجيهه نحو نجوم معينة - قبل أن يتمكن غاليليو من دراسة أقمار المشتري، كان عليه أن يحدد موقع المشتري نفسه ويركز عليه.
+
+في ملف `index.js` الخاص بك، سنقوم بإنشاء متغيرات `const` تلتقط مراجع لكل عنصر مهم في النموذج. هذا مشابه لكيفية تسمية العلماء لمعداتهم - بدلاً من البحث في المختبر بأكمله في كل مرة، يمكنهم الوصول مباشرة إلى ما يحتاجونه.
+
+```mermaid
+flowchart LR
+    A[JavaScript Code] --> B[document.querySelector]
+    B --> C[CSS Selectors]
+    C --> D[HTML Elements]
+    
+    D --> E[".form-data"]
+    D --> F[".region-name"]
+    D --> G[".api-key"]
+    D --> H[".loading"]
+    D --> I[".errors"]
+    D --> J[".result-container"]
+    
+    E --> K[Form Element]
+    F --> L[Input Field]
+    G --> M[Input Field]
+    H --> N[UI Element]
+    I --> O[UI Element]
+    J --> P[UI Element]
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style K fill:#fff3e0
+    style L fill:#fff3e0
+    style M fill:#fff3e0
+```
 
 ```javascript
 // form fields
@@ -47,16 +121,39 @@ const myregion = document.querySelector('.my-region');
 const clearBtn = document.querySelector('.clear-btn');
 ```
 
-**ما يفعله هذا الكود:**
+**ما الذي يفعله هذا الكود:**
 - **يلتقط** عناصر النموذج باستخدام `document.querySelector()` مع محددات CSS
-- **ينشئ** مراجع لحقول الإدخال الخاصة باسم المنطقة ومفتاح API
-- **يؤسس** روابط لعناصر عرض النتائج لبيانات استخدام الكربون
+- **ينشئ** مراجع لحقول الإدخال لاسم المنطقة ومفتاح API
+- **يؤسس** اتصالات لعناصر عرض النتائج لبيانات استخدام الكربون
 - **يُعد** الوصول إلى عناصر واجهة المستخدم مثل مؤشرات التحميل ورسائل الخطأ
-- **يخزن** كل مرجع عنصر في متغير `const` لإعادة استخدامه بسهولة في الكود الخاص بك
+- **يخزن** كل مرجع عنصر في متغير `const` لإعادة الاستخدام بسهولة في الكود الخاص بك
 
 ## إضافة مستمعي الأحداث
 
-الآن سنجعل الإضافة تستجيب لإجراءات المستخدم. مستمعو الأحداث هم طريقة الكود الخاص بك لمراقبة تفاعلات المستخدم. فكر فيهم مثل مشغلي الهواتف في التبادلات الهاتفية المبكرة - كانوا يستمعون للمكالمات الواردة ويصلون الدوائر الصحيحة عندما يريد شخص ما إجراء اتصال.
+الآن سنجعل الإضافة الخاصة بك تستجيب لإجراءات المستخدم. مستمعو الأحداث هم طريقة الكود الخاص بك لمراقبة تفاعلات المستخدم. فكر فيهم مثل مشغلي الهواتف في التبادلات الهاتفية المبكرة - كانوا يستمعون للمكالمات الواردة ويصلون الدوائر الصحيحة عندما يريد شخص ما إجراء اتصال.
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Form
+    participant JavaScript
+    participant API
+    participant Storage
+    
+    User->>Form: Fills out region/API key
+    User->>Form: Clicks submit
+    Form->>JavaScript: Triggers submit event
+    JavaScript->>JavaScript: handleSubmit(e)
+    JavaScript->>Storage: Save user preferences
+    JavaScript->>API: Fetch carbon data
+    API->>JavaScript: Returns data
+    JavaScript->>Form: Update UI with results
+    
+    User->>Form: Clicks clear button
+    Form->>JavaScript: Triggers click event
+    JavaScript->>Storage: Clear saved data
+    JavaScript->>Form: Reset to initial state
+```
 
 ```javascript
 form.addEventListener('submit', (e) => handleSubmit(e));
@@ -66,17 +163,27 @@ init();
 
 **فهم هذه المفاهيم:**
 - **يربط** مستمع إرسال بالنموذج الذي يتم تشغيله عندما يضغط المستخدمون على Enter أو ينقرون على إرسال
-- **يربط** مستمع نقر بزر المسح لإعادة تعيين النموذج
+- **يتصل** بمستمع النقر على زر المسح لإعادة تعيين النموذج
 - **يمرر** كائن الحدث `(e)` إلى وظائف المعالجة للتحكم الإضافي
-- **يستدعي** وظيفة `init()` فورًا لإعداد الحالة الأولية للإضافة
+- **يستدعي** وظيفة `init()` فورًا لإعداد الحالة الأولية للإضافة الخاصة بك
 
 ✅ لاحظ اختصار صيغة وظيفة السهم المستخدمة هنا. هذا النهج الحديث في JavaScript أنظف من تعبيرات الوظائف التقليدية، لكن كلاهما يعمل بشكل جيد!
 
+### 🔄 **توقف تربوي**
+**فهم التعامل مع الأحداث**: قبل الانتقال إلى التهيئة، تأكد من أنك تستطيع:
+- ✅ شرح كيف يربط `addEventListener` إجراءات المستخدم بوظائف JavaScript
+- ✅ فهم لماذا نمرر كائن الحدث `(e)` إلى وظائف المعالجة
+- ✅ التعرف على الفرق بين أحداث `submit` و `click`
+- ✅ وصف متى تعمل وظيفة `init()` ولماذا
+
+**اختبار ذاتي سريع**: ماذا سيحدث إذا نسيت `e.preventDefault()` في إرسال النموذج؟
+*الإجابة: ستتم إعادة تحميل الصفحة، مما يؤدي إلى فقدان حالة JavaScript بالكامل وتعطيل تجربة المستخدم*
+
 ## بناء وظائف التهيئة وإعادة التعيين
 
-لنقم بإنشاء منطق التهيئة للإضافة الخاصة بك. وظيفة `init()` تشبه نظام الملاحة للسفينة الذي يتحقق من أدواته - تحدد الحالة الحالية وتضبط الواجهة وفقًا لذلك. تتحقق مما إذا كان شخص ما قد استخدم الإضافة من قبل وتحمل إعداداته السابقة.
+لنقم بإنشاء منطق التهيئة للإضافة الخاصة بك. وظيفة `init()` تشبه نظام الملاحة للسفينة الذي يتحقق من أدواته - تحدد الحالة الحالية وتضبط الواجهة وفقًا لذلك. تتحقق مما إذا كان شخص ما قد استخدم الإضافة الخاصة بك من قبل وتحمل إعداداته السابقة.
 
-وظيفة `reset()` توفر للمستخدمين بداية جديدة - مشابهة لكيفية قيام العلماء بإعادة تعيين أدواتهم بين التجارب لضمان بيانات نظيفة.
+وظيفة `reset()` توفر للمستخدمين بداية جديدة - مشابهة لكيفية إعادة العلماء ضبط أدواتهم بين التجارب لضمان بيانات نظيفة.
 
 ```javascript
 function init() {
@@ -125,17 +232,41 @@ function reset(e) {
 - **يعيد** `null` عندما لا توجد بيانات لمفتاح معين
 - **يوفر** طريقة بسيطة لتذكر تفضيلات وإعدادات المستخدم
 
-> 💡 **فهم تخزين المتصفح**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) يشبه إعطاء الإضافة ذاكرة دائمة. فكر في كيفية تخزين مكتبة الإسكندرية القديمة لللفائف - ظلت المعلومات متاحة حتى عندما غادر العلماء وعادوا.
+> 💡 **فهم تخزين المتصفح**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) يشبه إعطاء الإضافة الخاصة بك ذاكرة دائمة. فكر في كيفية تخزين مكتبة الإسكندرية القديمة لللفائف - المعلومات ظلت متاحة حتى عندما غادر العلماء وعادوا.
 >
 > **خصائص رئيسية:**
 > - **يحافظ** على البيانات حتى بعد إغلاق المتصفح
-> - **يبقى** بعد إعادة تشغيل الكمبيوتر وتعطل المتصفح
+> - **ينجو** من إعادة تشغيل الكمبيوتر وتعطل المتصفح
 > - **يوفر** مساحة تخزين كبيرة لتفضيلات المستخدم
-> - **يتيح** الوصول الفوري دون تأخير الشبكة
-
-> **ملاحظة مهمة**: تحتوي إضافة المتصفح الخاصة بك على تخزين محلي معزول خاص بها منفصل عن صفحات الويب العادية. هذا يوفر الأمان ويمنع التعارض مع مواقع الويب الأخرى.
-
-يمكنك عرض البيانات المخزنة لديك عن طريق فتح أدوات المطور في المتصفح (F12)، والانتقال إلى علامة التبويب **Application**، وتوسيع قسم **Local Storage**.
+> - **يقدم** وصولًا فوريًا بدون تأخير الشبكة
+
+> **ملاحظة مهمة**: الإضافة الخاصة بك لديها تخزين محلي معزول خاص بها منفصل عن صفحات الويب العادية. هذا يوفر الأمان ويمنع التعارض مع مواقع الويب الأخرى.
+
+يمكنك عرض البيانات المخزنة الخاصة بك عن طريق فتح أدوات المطور في المتصفح (F12)، الانتقال إلى علامة التبويب **Application**، وتوسيع قسم **Local Storage**.
+
+```mermaid
+stateDiagram-v2
+    [*] --> CheckStorage: Extension starts
+    CheckStorage --> FirstTime: No stored data
+    CheckStorage --> Returning: Data found
+    
+    FirstTime --> ShowForm: Display setup form
+    ShowForm --> UserInput: User enters data
+    UserInput --> SaveData: Store in localStorage
+    SaveData --> FetchAPI: Get carbon data
+    
+    Returning --> LoadData: Read from localStorage
+    LoadData --> FetchAPI: Get carbon data
+    
+    FetchAPI --> ShowResults: Display data
+    ShowResults --> UserAction: User interacts
+    
+    UserAction --> Reset: Clear button clicked
+    UserAction --> ShowResults: View data
+    
+    Reset --> ClearStorage: Remove saved data
+    ClearStorage --> FirstTime: Back to setup
+```
 
 ![لوحة التخزين المحلي](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ar.png)
 
@@ -145,7 +276,7 @@ function reset(e) {
 
 الآن سنتعامل مع ما يحدث عندما يرسل شخص ما النموذج الخاص بك. بشكل افتراضي، تقوم المتصفحات بإعادة تحميل الصفحة عند إرسال النماذج، لكننا سنعترض هذا السلوك لإنشاء تجربة أكثر سلاسة.
 
-يشبه هذا النهج كيفية تعامل مركز التحكم مع اتصالات المركبة الفضائية - بدلاً من إعادة ضبط النظام بالكامل لكل عملية إرسال، يحافظون على التشغيل المستمر أثناء معالجة المعلومات الجديدة.
+يشبه هذا النهج كيفية تعامل مركز التحكم مع اتصالات المركبة الفضائية - بدلاً من إعادة ضبط النظام بالكامل لكل إرسال، يحافظون على التشغيل المستمر أثناء معالجة المعلومات الجديدة.
 
 قم بإنشاء وظيفة تلتقط حدث إرسال النموذج وتستخرج إدخال المستخدم:
 
@@ -160,13 +291,13 @@ function handleSubmit(e) {
 - **منع** السلوك الافتراضي لإرسال النموذج الذي كان سيؤدي إلى تحديث الصفحة
 - **استخراج** قيم إدخال المستخدم من حقول مفتاح API والمنطقة
 - **تمرير** بيانات النموذج إلى وظيفة `setUpUser()` للمعالجة
-- **الحفاظ** على سلوك تطبيق الصفحة الواحدة عن طريق تجنب إعادة تحميل الصفحة
+- **الحفاظ** على سلوك تطبيق الصفحة الواحدة عن طريق تجنب تحديث الصفحة
 
-✅ تذكر أن حقول النموذج في HTML الخاص بك تتضمن السمة `required`، لذا يقوم المتصفح تلقائيًا بالتحقق من أن المستخدمين يقدمون مفتاح API والمنطقة قبل تشغيل هذه الوظيفة.
+✅ تذكر أن حقول النموذج HTML الخاصة بك تتضمن السمة `required`، لذا يقوم المتصفح تلقائيًا بالتحقق من أن المستخدمين يقدمون مفتاح API والمنطقة قبل تشغيل هذه الوظيفة.
 
 ## إعداد تفضيلات المستخدم
 
-وظيفة `setUpUser` مسؤولة عن حفظ بيانات اعتماد المستخدم وبدء أول استدعاء API. هذا يخلق انتقالًا سلسًا من الإعداد إلى عرض النتائج.
+وظيفة `setUpUser` مسؤولة عن حفظ بيانات اعتماد المستخدم وبدء أول اتصال API. هذا يخلق انتقالًا سلسًا من الإعداد إلى عرض النتائج.
 
 ```javascript
 function setUpUser(apiKey, regionName) {
@@ -184,32 +315,62 @@ function setUpUser(apiKey, regionName) {
 }
 ```
 
-**خطوة بخطوة، ما يحدث هنا:**
+**خطوة بخطوة، إليك ما يحدث:**
 - **يحفظ** مفتاح API واسم المنطقة في التخزين المحلي للاستخدام المستقبلي
-- **يعرض** مؤشر تحميل لإعلام المستخدمين بأن البيانات يتم جلبها
+- **يعرض** مؤشر التحميل لإعلام المستخدمين بأن البيانات يتم جلبها
 - **يمسح** أي رسائل خطأ سابقة من العرض
 - **يكشف** زر المسح للمستخدمين لإعادة تعيين إعداداتهم لاحقًا
-- **يبدأ** استدعاء API لجلب بيانات استخدام الكربون الحقيقية
+- **يبدأ** اتصال API لجلب بيانات استخدام الكربون الحقيقية
 
 هذه الوظيفة تخلق تجربة مستخدم سلسة من خلال إدارة كل من استمرارية البيانات وتحديثات واجهة المستخدم في إجراء واحد منسق.
 
 ## عرض بيانات استخدام الكربون
 
-الآن سنربط الإضافة الخاصة بك بمصادر البيانات الخارجية عبر APIs. هذا يحول الإضافة الخاصة بك من أداة مستقلة إلى شيء يمكنه الوصول إلى معلومات الوقت الفعلي من جميع أنحاء الإنترنت.
+الآن سنقوم بربط الإضافة الخاصة بك بمصادر البيانات الخارجية عبر APIs. هذا يحول الإضافة الخاصة بك من أداة مستقلة إلى شيء يمكنه الوصول إلى معلومات الوقت الفعلي من جميع أنحاء الإنترنت.
 
 **فهم APIs**
 
-[APIs](https://www.webopedia.com/TERM/A/API.html) هي الطريقة التي تتواصل بها التطبيقات المختلفة مع بعضها البعض. فكر فيها مثل نظام التلغراف الذي ربط المدن البعيدة في القرن التاسع عشر - كان المشغلون يرسلون طلبات إلى محطات بعيدة ويتلقون الردود بالمعلومات المطلوبة. كل مرة تتحقق فيها من وسائل التواصل الاجتماعي، تسأل مساعد صوتي سؤالًا، أو تستخدم تطبيق توصيل، APIs تسهل هذه التبادلات البيانات.
+[APIs](https://www.webopedia.com/TERM/A/API.html) هي الطريقة التي تتواصل بها التطبيقات المختلفة مع بعضها البعض. فكر فيها مثل نظام التلغراف الذي ربط المدن البعيدة في القرن التاسع عشر - كان المشغلون يرسلون طلبات إلى المحطات البعيدة ويتلقون الردود بالمعلومات المطلوبة. كل مرة تتحقق فيها من وسائل التواصل الاجتماعي، تسأل مساعد صوتي سؤالًا، أو تستخدم تطبيق توصيل، فإن APIs تسهل هذه التبادلات البيانات.
+
+```mermaid
+flowchart TD
+    A[Your Extension] --> B[HTTP Request]
+    B --> C[CO2 Signal API]
+    C --> D{Valid Request?}
+    D -->|Yes| E[Query Database]
+    D -->|No| F[Return Error]
+    E --> G[Carbon Data]
+    G --> H[JSON Response]
+    H --> I[Your Extension]
+    F --> I
+    I --> J[Update UI]
+    
+    subgraph "API Request"
+        K[Headers: auth-token]
+        L[Parameters: countryCode]
+        M[Method: GET]
+    end
+    
+    subgraph "API Response"
+        N[Carbon Intensity]
+        O[Fossil Fuel %]
+        P[Timestamp]
+    end
+    
+    style C fill:#e8f5e8
+    style G fill:#fff3e0
+    style I fill:#e1f5fe
+```
 
 **مفاهيم رئيسية حول REST APIs:**
-- **REST** تعني "نقل الحالة التمثيلية"
+- **REST** تعني 'نقل الحالة التمثيلية'
 - **تستخدم** طرق HTTP القياسية (GET, POST, PUT, DELETE) للتفاعل مع البيانات
 - **تعيد** البيانات بتنسيقات متوقعة، عادة JSON
 - **توفر** نقاط نهاية متسقة تعتمد على URL لأنواع مختلفة من الطلبات
 
-✅ [API إشارة CO2](https://www.co2signal.com/) الذي سنستخدمه يوفر بيانات كثافة الكربون في الوقت الفعلي من شبكات الكهرباء حول العالم. هذا يساعد المستخدمين على فهم التأثير البيئي لاستخدامهم للكهرباء!
+✅ [CO2 Signal API](https://www.co2signal.com/) الذي سنستخدمه يوفر بيانات كثافة الكربون في الوقت الفعلي من شبكات الكهرباء حول العالم. هذا يساعد المستخدمين على فهم تأثير استخدامهم للكهرباء على البيئة!
 
-> 💡 **فهم JavaScript غير المتزامن**: الكلمة المفتاحية [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) تمكن الكود الخاص بك من التعامل مع عمليات متعددة في وقت واحد. عندما تطلب بيانات من خادم، لا تريد أن تتجمد الإضافة الخاصة بك بالكامل - سيكون ذلك مثل توقف التحكم في حركة الطائرات عن جميع العمليات أثناء انتظار استجابة طائرة واحدة.
+> 💡 **فهم JavaScript غير المتزامن**: الكلمة المفتاحية [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) تمكن الكود الخاص بك من التعامل مع عمليات متعددة في وقت واحد. عندما تطلب بيانات من خادم، لا تريد أن تتجمد الإضافة الخاصة بك بالكامل - سيكون ذلك مثل توقف مراقبة الحركة الجوية عن جميع العمليات أثناء انتظار استجابة طائرة واحدة.
 >
 > **فوائد رئيسية:**
 > - **يحافظ** على استجابة الإضافة أثناء تحميل البيانات
@@ -223,6 +384,33 @@ function setUpUser(apiKey, regionName) {
 
 > 🎥 انقر على الصورة أعلاه لمشاهدة فيديو عن async/await.
 
+### 🔄 **توقف تربوي**
+**فهم البرمجة غير المتزامنة**: قبل الغوص في وظيفة API، تحقق من أنك تفهم:
+- ✅ لماذا نستخدم `async/await` بدلاً من تجميد الإضافة بالكامل
+- ✅ كيف تتعامل كتل `try/catch` مع أخطاء الشبكة بشكل سلس
+- ✅ الفرق بين العمليات المتزامنة وغير المتزامنة
+- ✅ لماذا يمكن أن تفشل طلبات API وكيفية التعامل مع تلك الفشل
+
+**اتصال بالعالم الحقيقي**: فكر في هذه الأمثلة غير المتزامنة اليومية:
+- **طلب الطعام**: لا تنتظر بجانب المطبخ - تحصل على إيصال وتواصل أنشطتك الأخرى
+- **إرسال البريد الإلكتروني**: تطبيق البريد الإلكتروني الخاص بك لا يتجمد أثناء الإرسال - يمكنك كتابة المزيد من الرسائل
+- **تحميل صفحات الويب**: الصور يتم تحميلها تدريجيًا بينما يمكنك بالفعل قراءة النص
+
+**تدفق المصادقة API**:
+```mermaid
+sequenceDiagram
+    participant Ext as Extension
+    participant API as CO2 Signal API
+    participant DB as Database
+    
+    Ext->>API: Request with auth-token
+    API->>API: Validate token
+    API->>DB: Query carbon data
+    DB->>API: Return data
+    API->>Ext: JSON response
+    Ext->>Ext: Update UI
+```
+
 قم بإنشاء الوظيفة لجلب وعرض بيانات استخدام الكربون:
 
 ```javascript
@@ -278,21 +466,53 @@ async function displayCarbonUsage(apiKey, region) {
 - **يستخدم** API `fetch()` الحديث بدلاً من المكتبات الخارجية مثل Axios للحصول على كود أنظف وخالي من التبعيات
 - **ينفذ** فحص الأخطاء المناسب باستخدام `response.ok` لالتقاط فشل API مبكرًا
 - **يتعامل** مع العمليات غير المتزامنة باستخدام `async/await` لتدفق كود أكثر قابلية للقراءة
-- **يُصادق** مع API إشارة CO2 باستخدام رأس `auth-token`
-- **يُحلل** بيانات JSON المستجيبة ويستخرج معلومات كثافة الكربون
-- **يُحدث** عناصر واجهة المستخدم المتعددة ببيانات بيئية مهيأة
-- **يوفر** رسائل خطأ سهلة الاستخدام عند فشل استدعاءات API
+- **يصادق** مع CO2 Signal API باستخدام رأس `auth-token`
+- **يحلل** بيانات استجابة JSON ويستخرج معلومات كثافة الكربون
+- **يحدث** عناصر واجهة المستخدم المتعددة ببيانات بيئية مهيأة
+- **يوفر** رسائل خطأ سهلة الاستخدام عندما تفشل طلبات API
 
 **مفاهيم JavaScript الحديثة الرئيسية التي تم توضيحها:**
-- **القوالب النصية** مع صياغة `${}` لتنسيق النصوص بشكل أنظف
-- **التعامل مع الأخطاء** باستخدام كتل try/catch لتطبيقات قوية
+- **القوالب النصية** باستخدام صياغة `${}` لتنسيق النصوص النظيفة
+- **التعامل مع الأخطاء** باستخدام كتل try/catch للتطبيقات القوية
 - **نمط async/await** للتعامل مع طلبات الشبكة بشكل سلس
 - **تفكيك الكائنات** لاستخراج بيانات محددة من استجابات API
-- **سلسلة الطرق** للتعامل مع DOM المتعددة
+- **تسلسل الطرق** للعديد من التلاعبات DOM
+
+✅ هذه الوظيفة توضح العديد من مفاهيم تطوير الويب المهمة - التواصل مع الخوادم الخارجية، التعامل مع المصادقة، معالجة البيانات، تحديث الواجهات، وإدارة الأخطاء بشكل سلس. هذه مهارات أساسية يستخدمها المطورون المحترفون بانتظام.
+
+```mermaid
+flowchart TD
+    A[Start API Call] --> B[Fetch Request]
+    B --> C{Network Success?}
+    C -->|No| D[Network Error]
+    C -->|Yes| E{Response OK?}
+    E -->|No| F[API Error]
+    E -->|Yes| G[Parse JSON]
+    G --> H{Valid Data?}
+    H -->|No| I[Data Error]
+    H -->|Yes| J[Update UI]
+    
+    D --> K[Show Error Message]
+    F --> K
+    I --> K
+    J --> L[Hide Loading]
+    K --> L
+    
+    style A fill:#e1f5fe
+    style J fill:#e8f5e8
+    style K fill:#ffebee
+    style L fill:#f3e5f5
+```
 
-✅ هذه الوظيفة توضح العديد من المفاهيم المهمة لتطوير الويب - التواصل مع الخوادم الخارجية، التعامل مع المصادقة، معالجة البيانات، تحديث الواجهات، وإدارة الأخطاء بشكل سلس. هذه مهارات أساسية يستخدمها المطورون المحترفون بانتظام.
+### 🔄 **توقف تربوي**
+**فهم النظام بالكامل**: تحقق من إتقانك للتدفق الكامل:
+- ✅ كيف تمكن مراجع DOM JavaScript من التحكم في الواجهة
+- ✅ لماذا يخلق التخزين المحلي استمرارية بين جلسات المتصفح
+- ✅ كيف يجعل async/await طلبات API دون تجميد الإضافة
+- ✅ ماذا يحدث عندما تفشل طلبات API وكيفية التعامل مع الأخطاء
+- ✅ لماذا تتضمن تجربة المستخدم حالات التحميل ورسائل الخطأ
 
-🎉 **ما أنجزته:** لقد أنشأت إضافة متصفح:
+🎉 **ما الذي أنجزته:** لقد أنشأت إضافة متصفح:
 - **تتصل** بالإنترنت وتجلب بيانات بيئية حقيقية
 - **تحافظ** على إعدادات المستخدم بين الجلسات
 - **تتعامل** مع الأخطاء بشكل سلس بدلاً من التعطل
@@ -302,44 +522,147 @@ async function displayCarbonUsage(apiKey, region) {
 
 ---
 
-## تحدي وكيل GitHub Copilot 🚀
+## تحدي GitHub Copilot Agent 🚀
 
 استخدم وضع الوكيل لإكمال التحدي التالي:
+**الوصف:** تحسين امتداد المتصفح من خلال إضافة تحسينات في معالجة الأخطاء وميزات تجربة المستخدم. سيساعدك هذا التحدي على ممارسة العمل مع واجهات برمجة التطبيقات (APIs)، التخزين المحلي، والتعامل مع DOM باستخدام أنماط JavaScript الحديثة.
 
-**الوصف:** قم بتحسين إضافة المتصفح عن طريق إضافة تحسينات في التعامل مع الأخطاء وميزات تجربة المستخدم. سيساعدك هذا التحدي على ممارسة العمل مع APIs، التخزين المحلي، ومعالجة DOM باستخدام أنماط JavaScript الحديثة.
-
-**المهمة:** قم بإنشاء نسخة محسنة من وظيفة displayCarbonUsage تتضمن: 1) آلية إعادة المحاولة لاستدعاءات API الفاشلة مع تراجع أسي، 2) التحقق من صحة الإدخال لرمز المنطقة قبل إجراء استدعاء API، 3) رسوم تحميل مع مؤشرات تقدم، 4) تخزين مؤقت لاستجابات API في التخزين المحلي مع طوابع انتهاء الصلاحية (تخزين لمدة 30 دقيقة)، و5) ميزة لعرض البيانات التاريخية من استدعاءات API السابقة. أضف أيضًا تعليقات JSDoc بأسلوب TypeScript لتوثيق جميع معلمات الوظائف وأنواع الإرجاع.
+**المهمة:** قم بإنشاء نسخة محسّنة من وظيفة displayCarbonUsage تتضمن: 1) آلية إعادة المحاولة لاستدعاءات API الفاشلة باستخدام التراجع الأسي، 2) التحقق من صحة إدخال رمز المنطقة قبل إجراء استدعاء API، 3) رسوم متحركة للتحميل مع مؤشرات تقدم، 4) تخزين استجابات API في localStorage مع طوابع زمنية لانتهاء الصلاحية (التخزين لمدة 30 دقيقة)، و5) ميزة لعرض البيانات التاريخية من استدعاءات API السابقة. أضف أيضًا تعليقات JSDoc بأسلوب TypeScript لتوثيق جميع معلمات الوظائف وأنواع الإرجاع.
 
 تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## 🚀 التحدي
 
-وسع فهمك لـ APIs من خلال استكشاف ثروة APIs المستندة إلى المتصفح المتاحة لتطوير الويب. اختر واحدة من هذه APIs وقم ببناء عرض صغير:
+وسع فهمك لواجهات برمجة التطبيقات (APIs) من خلال استكشاف الثروة المتاحة من واجهات برمجة التطبيقات المستندة إلى المتصفح لتطوير الويب. اختر واحدة من هذه الواجهات وقم ببناء عرض صغير:
 
-- [API تحديد الموقع الجغرافي](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - الحصول على موقع المستخدم الحالي
-- [API الإشعارات](https://developer.mozilla.org/docs/Web/API/Notifications_API) - إرسال إشعارات سطح المكتب
-- [API السحب والإفلات في HTML](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - إنشاء واجهات سحب تفاعلية
-- [API تخزين الويب](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - تقنيات التخزين المحلي المتقدمة
-- [API الجلب](https://developer.mozilla.org/docs/Web/API/Fetch_API) - بديل حديث لـ XMLHttpRequest
+- [واجهة Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - الحصول على الموقع الحالي للمستخدم
+- [واجهة Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - إرسال إشعارات سطح المكتب
+- [واجهة HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - إنشاء واجهات سحب تفاعلية
+- [واجهة Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - تقنيات تخزين محلية متقدمة
+- [واجهة Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - بديل حديث لـ XMLHttpRequest
 
 **أسئلة البحث التي يجب مراعاتها:**
-- ما المشاكل الحقيقية التي يحلها هذا API؟
-- كيف يتعامل API مع الأخطاء والحالات الحافة؟
-- ما الاعتبارات الأمنية الموجودة عند استخدام هذا API؟
-- ما مدى دعم هذا API عبر المتصفحات المختلفة؟
+- ما هي المشاكل الواقعية التي تحلها هذه الواجهة؟
+- كيف تتعامل الواجهة مع الأخطاء والحالات الحافة؟
+- ما هي الاعتبارات الأمنية عند استخدام هذه الواجهة؟
+- ما مدى دعم هذه الواجهة عبر المتصفحات المختلفة؟
 
-بعد البحث الخاص بك، حدد ما هي الخصائص التي تجعل API سهل الاستخدام وموثوقًا للمطورين.
+بعد البحث، حدد الخصائص التي تجعل واجهة برمجة التطبيقات سهلة الاستخدام وموثوقة للمطورين.
 
 ## اختبار ما بعد المحاضرة
 
 [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/26)
 
 ## المراجعة والدراسة الذاتية
-لقد تعلمت عن LocalStorage وواجهات برمجة التطبيقات (APIs) في هذا الدرس، وكلاهما مفيد جدًا لمطوري الويب المحترفين. هل يمكنك التفكير في كيفية عمل هذين العنصرين معًا؟ فكر في كيفية تصميم موقع ويب يقوم بتخزين العناصر ليتم استخدامها بواسطة واجهة برمجة التطبيقات.
+
+تعلمت عن LocalStorage وواجهات برمجة التطبيقات (APIs) في هذا الدرس، وكلاهما مفيد جدًا للمطورين المحترفين. هل يمكنك التفكير في كيفية عمل هذين العنصرين معًا؟ فكر في كيفية تصميم موقع ويب يقوم بتخزين العناصر لاستخدامها بواسطة واجهة برمجة التطبيقات.
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] افتح علامة تبويب DevTools Application واستكشف localStorage على أي موقع ويب
+- [ ] أنشئ نموذج HTML بسيطًا واختبر التحقق من صحة النموذج في المتصفح
+- [ ] جرب تخزين واسترجاع البيانات باستخدام localStorage في وحدة التحكم بالمتصفح
+- [ ] قم بفحص بيانات النموذج التي يتم إرسالها باستخدام علامة تبويب الشبكة
+
+### 🎯 **ما يمكنك إنجازه خلال الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وافهم مفاهيم التعامل مع النماذج
+- [ ] قم ببناء نموذج امتداد متصفح يحفظ تفضيلات المستخدم
+- [ ] نفذ التحقق من صحة النموذج على الجانب العميل مع رسائل خطأ مفيدة
+- [ ] مارس استخدام واجهة chrome.storage لتخزين بيانات الامتداد
+- [ ] أنشئ واجهة مستخدم تستجيب لإعدادات المستخدم المحفوظة
+
+### 📅 **ما يمكنك إنجازه خلال أسبوع**
+- [ ] أكمل امتداد متصفح كامل الميزات مع وظائف النموذج
+- [ ] أتقن خيارات التخزين المختلفة: التخزين المحلي، التخزين المتزامن، والتخزين المؤقت
+- [ ] نفذ ميزات نموذج متقدمة مثل الإكمال التلقائي والتحقق من الصحة
+- [ ] أضف وظيفة استيراد/تصدير لبيانات المستخدم
+- [ ] اختبر امتدادك بدقة عبر المتصفحات المختلفة
+- [ ] قم بتحسين تجربة المستخدم ومعالجة الأخطاء في امتدادك
+
+### 🌟 **ما يمكنك إنجازه خلال شهر**
+- [ ] قم ببناء تطبيقات معقدة باستخدام واجهات تخزين المتصفح المختلفة
+- [ ] تعلم أنماط التطوير التي تعتمد على العمل دون اتصال
+- [ ] ساهم في مشاريع مفتوحة المصدر تتعلق باستمرارية البيانات
+- [ ] أتقن تطوير الخصوصية والامتثال لـ GDPR
+- [ ] أنشئ مكتبات قابلة لإعادة الاستخدام للتعامل مع النماذج وإدارة البيانات
+- [ ] شارك المعرفة حول واجهات برمجة التطبيقات وتطوير الامتدادات
+
+## 🎯 جدول زمني لإتقان تطوير الامتدادات
+
+```mermaid
+timeline
+    title API Integration & Storage Learning Progression
+    
+    section DOM Fundamentals (15 minutes)
+        Element References: querySelector mastery
+                          : Event listener setup
+                          : State management basics
+        
+    section Local Storage (20 minutes)
+        Data Persistence: Key-value storage
+                        : Session management
+                        : User preference handling
+                        : Storage inspection tools
+        
+    section Form Handling (25 minutes)
+        User Input: Form validation
+                  : Event prevention
+                  : Data extraction
+                  : UI state transitions
+        
+    section API Integration (35 minutes)
+        External Communication: HTTP requests
+                              : Authentication patterns
+                              : JSON data parsing
+                              : Response handling
+        
+    section Async Programming (40 minutes)
+        Modern JavaScript: Promise handling
+                         : Async/await patterns
+                         : Error management
+                         : Non-blocking operations
+        
+    section Error Handling (30 minutes)
+        Robust Applications: Try/catch blocks
+                           : User-friendly messages
+                           : Graceful degradation
+                           : Debugging techniques
+        
+    section Advanced Patterns (1 week)
+        Professional Development: Caching strategies
+                                : Rate limiting
+                                : Retry mechanisms
+                                : Performance optimization
+        
+    section Production Skills (1 month)
+        Enterprise Features: Security best practices
+                           : API versioning
+                           : Monitoring & logging
+                           : Scalable architecture
+```
+
+### 🛠️ ملخص أدوات تطوير الويب الكاملة
+
+بعد إكمال هذا الدرس، لديك الآن:
+- **إتقان DOM**: استهداف العناصر بدقة والتعامل معها
+- **خبرة التخزين**: إدارة البيانات المستمرة باستخدام localStorage
+- **تكامل API**: جلب البيانات في الوقت الحقيقي والمصادقة
+- **برمجة غير متزامنة**: عمليات غير معيقة باستخدام JavaScript الحديث
+- **معالجة الأخطاء**: تطبيقات قوية تتعامل مع الفشل بسلاسة
+- **تجربة المستخدم**: حالات التحميل، التحقق من الصحة، وتفاعلات سلسة
+- **أنماط حديثة**: واجهة fetch، async/await، وميزات ES6+
+
+**المهارات المهنية المكتسبة:** لقد نفذت أنماطًا مستخدمة في:
+- **تطبيقات الويب**: تطبيقات صفحة واحدة مع مصادر بيانات خارجية
+- **تطوير الهواتف المحمولة**: تطبيقات تعتمد على واجهات برمجة التطبيقات مع إمكانيات العمل دون اتصال
+- **برامج سطح المكتب**: تطبيقات Electron مع تخزين مستمر
+- **أنظمة المؤسسات**: المصادقة، التخزين المؤقت، ومعالجة الأخطاء
+- **الأطر الحديثة**: أنماط إدارة البيانات في React/Vue/Angular
+
+**المستوى التالي:** أنت جاهز لاستكشاف مواضيع متقدمة مثل استراتيجيات التخزين المؤقت، اتصالات WebSocket في الوقت الحقيقي، أو إدارة الحالة المعقدة!
 
 ## المهمة
 
-[تبنَّ واجهة برمجة تطبيقات](assignment.md)
+[تبني واجهة برمجة التطبيقات](assignment.md)
 
 ---
 
diff --git a/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md
index 1a370b029d..8c819f9cf1 100644
--- a/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md
+++ b/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -1,19 +1,36 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "eb358f3f4c2c082f9f3a4f98efa1d337",
-  "translation_date": "2025-10-22T14:29:06+00:00",
+  "original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
+  "translation_date": "2025-11-03T12:48:14+00:00",
   "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
   "language_code": "ar"
 }
 -->
-# مشروع إضافة المتصفح الجزء الثالث: تعلم حول المهام الخلفية والأداء
+# مشروع إضافة المتصفح الجزء الثالث: تعلم عن المهام الخلفية والأداء
+
+```mermaid
+journey
+    title Your Performance Optimization Journey
+    section Foundation
+      Learn browser tools: 3: Student
+      Understand profiling: 4: Student
+      Identify bottlenecks: 4: Student
+    section Extension Features
+      Build color system: 4: Student
+      Create background tasks: 5: Student
+      Update icons dynamically: 5: Student
+    section Optimization
+      Monitor performance: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
 
-هل تساءلت يومًا ما الذي يجعل بعض إضافات المتصفح تبدو سريعة الاستجابة بينما تبدو أخرى بطيئة؟ السر يكمن في ما يحدث خلف الكواليس. بينما ينقر المستخدمون حول واجهة الإضافة الخاصة بك، هناك عالم كامل من العمليات الخلفية التي تدير بهدوء جلب البيانات، تحديث الأيقونات، وإدارة موارد النظام.
+هل تساءلت يومًا ما الذي يجعل بعض إضافات المتصفح تبدو سريعة وسلسة بينما تبدو أخرى بطيئة؟ السر يكمن في ما يحدث خلف الكواليس. بينما ينقر المستخدمون حول واجهة الإضافة الخاصة بك، هناك عالم كامل من العمليات الخلفية التي تدير جلب البيانات، تحديث الأيقونات، وموارد النظام بهدوء.
 
-هذه هي درسنا الأخير في سلسلة إضافات المتصفح، وسنجعل متتبع البصمة الكربونية الخاص بك يعمل بسلاسة. ستضيف تحديثات ديناميكية للأيقونات وتتعلم كيفية اكتشاف مشكلات الأداء قبل أن تصبح مشاكل. إنه مثل ضبط سيارة سباق - تحسينات صغيرة يمكن أن تحدث فرقًا كبيرًا في كيفية عمل كل شيء.
+هذه هي الدرس الأخير في سلسلة إضافات المتصفح، وسنجعل متتبع بصمة الكربون الخاص بك يعمل بسلاسة. ستضيف تحديثات ديناميكية للأيقونات وتتعلم كيفية اكتشاف مشاكل الأداء قبل أن تصبح مشكلة. الأمر يشبه ضبط سيارة سباق - تحسينات صغيرة يمكن أن تحدث فرقًا كبيرًا في كيفية عمل كل شيء.
 
-بحلول الوقت الذي ننتهي فيه، سيكون لديك إضافة مصقولة وستفهم مبادئ الأداء التي تميز التطبيقات الويب الجيدة عن الرائعة. دعنا نغوص في عالم تحسين المتصفح.
+بحلول الوقت الذي ننتهي فيه، سيكون لديك إضافة مصقولة وستفهم مبادئ الأداء التي تميز التطبيقات الجيدة عن الرائعة. دعونا نغوص في عالم تحسين المتصفح.
 
 ## اختبار ما قبل المحاضرة
 
@@ -21,91 +38,228 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### المقدمة
 
-في دروسنا السابقة، قمت ببناء نموذج، وربطته بـ API، وتعاملت مع جلب البيانات غير المتزامن. الإضافة الخاصة بك تأخذ شكلًا جميلًا.
-
-الآن نحتاج إلى إضافة اللمسات الأخيرة - مثل جعل أيقونة الإضافة تتغير ألوانها بناءً على بيانات الكربون. يذكرني هذا بكيفية اضطرار ناسا لتحسين كل نظام على مركبة الفضاء أبولو. لم يكن بإمكانهم تحمل أي دورات أو ذاكرة مهدرة لأن الأرواح كانت تعتمد على الأداء. بينما ليست إضافة المتصفح لدينا بهذه الأهمية، تنطبق نفس المبادئ - الكود الفعال يخلق تجارب مستخدم أفضل.
+في دروسنا السابقة، قمت ببناء نموذج، وربطه بـ API، وتناول جلب البيانات غير المتزامن. الإضافة الخاصة بك تتشكل بشكل جيد.
+
+الآن نحتاج إلى إضافة اللمسات الأخيرة - مثل جعل أيقونة الإضافة تغير الألوان بناءً على بيانات الكربون. هذا يذكرني بكيفية اضطرار ناسا لتحسين كل نظام على مركبة الفضاء أبولو. لم يكن لديهم أي مجال لإهدار الدورات أو الذاكرة لأن الأداء كان مسألة حياة أو موت. بينما ليست إضافة المتصفح لدينا بهذه الأهمية، فإن نفس المبادئ تنطبق - الكود الفعال يخلق تجارب مستخدم أفضل.
+
+```mermaid
+mindmap
+  root((Performance & Background Tasks))
+    Browser Performance
+      Rendering Pipeline
+      Asset Optimization
+      DOM Manipulation
+      JavaScript Execution
+    Profiling Tools
+      Developer Tools
+      Performance Tab
+      Timeline Analysis
+      Bottleneck Detection
+    Extension Architecture
+      Background Scripts
+      Content Scripts
+      Message Passing
+      Icon Management
+    Optimization Strategies
+      Code Splitting
+      Lazy Loading
+      Caching
+      Resource Compression
+    Visual Feedback
+      Dynamic Icons
+      Color Coding
+      Real-time Updates
+      User Experience
+```
 
 ## أساسيات أداء الويب
 
-عندما يعمل الكود الخاص بك بكفاءة، يمكن للناس أن *يشعروا* بالفرق. تعرف ذلك الشعور عندما يتم تحميل الصفحة على الفور أو عندما تتدفق الرسوم المتحركة بسلاسة؟ هذا هو الأداء الجيد في العمل.
-
-الأداء ليس فقط عن السرعة - إنه عن صنع تجارب ويب تبدو طبيعية بدلاً من أن تكون متعثرة ومحبطة. في الأيام الأولى للحوسبة، كانت غريس هوبر تحتفظ بنانوثانية (قطعة من السلك بطول قدم تقريبًا) على مكتبها لتظهر مدى بعد الضوء في جزء من مليار من الثانية. كان هذا طريقتها في شرح لماذا كل ميكروثانية مهمة في الحوسبة. دعونا نستكشف أدوات التحري التي تساعدك على معرفة ما يبطئ الأمور.
-
-> "أداء الموقع يدور حول شيئين: مدى سرعة تحميل الصفحة، ومدى سرعة تشغيل الكود عليها." -- [زاك غروسبارت](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
-
-موضوع كيفية جعل مواقعك سريعة للغاية على جميع أنواع الأجهزة، لجميع أنواع المستخدمين، في جميع أنواع الظروف، هو موضوع واسع بشكل غير مفاجئ. إليك بعض النقاط التي يجب أن تضعها في اعتبارك أثناء بناء مشروع ويب عادي أو إضافة متصفح.
-
-الخطوة الأولى في تحسين موقعك هي فهم ما يحدث بالفعل تحت الغطاء. لحسن الحظ، يأتي متصفحك بأدوات تحري قوية مدمجة.
+عندما يعمل الكود الخاص بك بكفاءة، يمكن للناس أن *يشعروا* بالفرق. تعرف تلك اللحظة عندما يتم تحميل الصفحة فورًا أو عندما تتدفق الرسوم المتحركة بسلاسة؟ هذا هو الأداء الجيد في العمل.
+
+الأداء ليس فقط عن السرعة - إنه عن صنع تجارب ويب تبدو طبيعية بدلاً من أن تكون متعثرة ومحبطة. في الأيام الأولى للحوسبة، كانت غريس هوبر تحتفظ بنانو ثانية (قطعة من السلك بطول قدم تقريبًا) على مكتبها لتظهر مدى بعد الضوء في جزء من مليار من الثانية. كان هذا طريقتها لشرح لماذا كل ميكروثانية مهمة في الحوسبة. دعونا نستكشف أدوات التحري التي تساعدك على معرفة ما يبطئ الأمور.
+
+> "أداء الموقع يتعلق بشيئين: مدى سرعة تحميل الصفحة، ومدى سرعة تشغيل الكود عليها." -- [زاك غروسبارت](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+موضوع كيفية جعل مواقعك سريعة للغاية على جميع أنواع الأجهزة، لجميع أنواع المستخدمين، في جميع أنواع الظروف، ليس مفاجئًا أنه واسع. إليك بعض النقاط التي يجب أن تضعها في اعتبارك أثناء بناء مشروع ويب قياسي أو إضافة متصفح.
+
+الخطوة الأولى في تحسين موقعك هي فهم ما يحدث بالفعل تحت السطح. لحسن الحظ، يأتي متصفحك بأدوات تحري قوية مدمجة.
+
+```mermaid
+flowchart LR
+    A[HTML] --> B[Parse]
+    B --> C[DOM Tree]
+    D[CSS] --> E[Parse]
+    E --> F[CSSOM]
+    G[JavaScript] --> H[Execute]
+    
+    C --> I[Render Tree]
+    F --> I
+    H --> I
+    
+    I --> J[Layout]
+    J --> K[Paint]
+    K --> L[Composite]
+    L --> M[Display]
+    
+    subgraph "Critical Rendering Path"
+        N["1. Parse HTML"]
+        O["2. Parse CSS"]
+        P["3. Execute JS"]
+        Q["4. Build Render Tree"]
+        R["5. Layout Elements"]
+        S["6. Paint Pixels"]
+        T["7. Composite Layers"]
+    end
+    
+    style M fill:#e8f5e8
+    style I fill:#fff3e0
+    style H fill:#ffebee
+```
 
-لفتح أدوات المطور في Edge، انقر على تلك النقاط الثلاث في الزاوية العلوية اليمنى، ثم انتقل إلى أدوات إضافية > أدوات المطور. أو استخدم اختصار لوحة المفاتيح: `Ctrl` + `Shift` + `I` على Windows أو `Option` + `Command` + `I` على Mac. بمجرد أن تكون هناك، انقر على علامة تبويب الأداء - هذا هو المكان الذي ستجري فيه تحقيقك.
+لفتح أدوات المطور في Edge، انقر على تلك النقاط الثلاث في الزاوية العلوية اليمنى، ثم انتقل إلى أدوات إضافية > أدوات المطور. أو استخدم اختصار لوحة المفاتيح: `Ctrl` + `Shift` + `I` على Windows أو `Option` + `Command` + `I` على Mac. بمجرد أن تكون هناك، انقر على علامة تبويب الأداء - هذا هو المكان الذي ستقوم فيه بالتحقيق.
 
 **إليك مجموعة أدوات التحري الخاصة بالأداء:**
 - **افتح** أدوات المطور (ستستخدمها باستمرار كمطور!)
 - **توجه** إلى علامة تبويب الأداء - فكر فيها كمتعقب لياقة تطبيق الويب الخاص بك
 - **اضغط** على زر التسجيل وشاهد صفحتك أثناء العمل
-- **ادرس** النتائج لتحديد ما يبطئ الأمور
+- **ادرس** النتائج لتكتشف ما يبطئ الأمور
 
-دعونا نجرب هذا. افتح موقعًا (Microsoft.com يعمل بشكل جيد لهذا) وانقر على زر "تسجيل". الآن قم بتحديث الصفحة وشاهد المحلل يلتقط كل ما يحدث. عندما تتوقف عن التسجيل، سترى تفصيلًا دقيقًا لكيفية "كتابة" المتصفح، "عرضه"، و"رسمه" للموقع. يذكرني هذا بكيفية مراقبة مركز التحكم في المهمة لكل نظام أثناء إطلاق الصاروخ - تحصل على بيانات في الوقت الفعلي حول ما يحدث ومتى.
+دعونا نجرب هذا. افتح موقعًا (Microsoft.com يعمل جيدًا لهذا) وانقر على زر "تسجيل". الآن قم بتحديث الصفحة وشاهد المحلل يلتقط كل ما يحدث. عندما تتوقف عن التسجيل، سترى تفصيلًا دقيقًا لكيفية قيام المتصفح بـ "البرمجة"، "التقديم"، و"الرسم" للموقع. يذكرني هذا بكيفية مراقبة مركز التحكم لكل نظام أثناء إطلاق الصاروخ - تحصل على بيانات في الوقت الفعلي حول ما يحدث ومتى.
 
 ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ar.png)
 
-✅ يحتوي [توثيق Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) على الكثير من التفاصيل إذا كنت تريد التعمق أكثر
+✅ يحتوي [توثيق Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) على الكثير من التفاصيل إذا كنت تريد التعمق أكثر.
 
-> نصيحة احترافية: قم بمسح ذاكرة التخزين المؤقت للمتصفح قبل الاختبار لمعرفة كيف يعمل موقعك للزوار لأول مرة - عادةً ما يكون مختلفًا تمامًا عن الزيارات المتكررة!
+> نصيحة احترافية: قم بمسح ذاكرة التخزين المؤقت للمتصفح قبل الاختبار لترى كيف يعمل موقعك للزوار لأول مرة - عادةً ما يكون مختلفًا تمامًا عن الزيارات المتكررة!
 
-حدد عناصر من الجدول الزمني للملف الشخصي للتكبير على الأحداث التي تحدث أثناء تحميل صفحتك.
+حدد عناصر من خط الزمن الخاص بالملف الشخصي لتكبير الأحداث التي تحدث أثناء تحميل صفحتك.
 
-احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من الجدول الزمني للملف الشخصي والنظر إلى لوحة الملخص:
+احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من خط الزمن الخاص بالملف الشخصي والنظر إلى لوحة الملخص:
 
 ![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ar.png)
 
-تحقق من لوحة سجل الأحداث لمعرفة ما إذا كان أي حدث استغرق أكثر من 15 مللي ثانية:
+تحقق من لوحة سجل الأحداث لترى إذا كان أي حدث استغرق أكثر من 15 مللي ثانية:
 
 ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ar.png)
 
-✅ تعرف على المحلل الخاص بك! افتح أدوات المطور على هذا الموقع وانظر إذا كان هناك أي اختناقات. ما هو الأصل الذي يستغرق أطول وقت للتحميل؟ الأسرع؟
+✅ تعرف على المحلل الخاص بك! افتح أدوات المطور على هذا الموقع وانظر إذا كانت هناك أي اختناقات. ما هو الأصل الذي يتم تحميله ببطء؟ الأسرع؟
+
+```mermaid
+flowchart TD
+    A[Open DevTools] --> B[Navigate to Performance Tab]
+    B --> C[Click Record Button]
+    C --> D[Perform Actions]
+    D --> E[Stop Recording]
+    E --> F{Analyze Results}
+    
+    F --> G[Check Timeline]
+    F --> H[Review Network]
+    F --> I[Examine Scripts]
+    F --> J[Identify Paint Events]
+    
+    G --> K{Long Tasks?}
+    H --> L{Large Assets?}
+    I --> M{Render Blocking?}
+    J --> N{Expensive Paints?}
+    
+    K -->|Yes| O[Optimize JavaScript]
+    L -->|Yes| P[Compress Assets]
+    M -->|Yes| Q[Add Async/Defer]
+    N -->|Yes| R[Simplify Styles]
+    
+    O --> S[Test Again]
+    P --> S
+    Q --> S
+    R --> S
+    
+    style A fill:#e1f5fe
+    style F fill:#fff3e0
+    style S fill:#e8f5e8
+```
 
-## ما الذي يجب البحث عنه عند التحليل
+## ما الذي تبحث عنه عند التحليل
 
-تشغيل المحلل هو مجرد البداية - المهارة الحقيقية هي معرفة ما تخبرك به تلك الرسوم البيانية الملونة. لا تقلق، ستتعلم قراءة هذه الرسوم. المطورون ذوو الخبرة تعلموا كيفية اكتشاف علامات التحذير قبل أن تصبح مشاكل كاملة.
+تشغيل المحلل هو مجرد البداية - المهارة الحقيقية هي معرفة ما تخبرك به تلك الرسوم البيانية الملونة. لا تقلق، ستعتاد على قراءتها. تعلم المطورون ذوو الخبرة اكتشاف علامات التحذير قبل أن تصبح مشاكل كاملة.
 
-دعونا نتحدث عن المشتبه بهم المعتادين - مثيري المشاكل في الأداء الذين يميلون إلى التسلل إلى مشاريع الويب. مثلما كان على ماري كوري مراقبة مستويات الإشعاع بعناية في مختبرها، نحتاج إلى مراقبة أنماط معينة تشير إلى وجود مشكلة. اكتشاف هذه الأمور مبكرًا سيوفر لك (ولمستخدميك) الكثير من الإحباط.
+دعونا نتحدث عن المشتبه بهم المعتادين - المشاكل التي تميل إلى التسلل إلى مشاريع الويب. مثلما كان على ماري كوري مراقبة مستويات الإشعاع بعناية في مختبرها، نحتاج إلى مراقبة أنماط معينة تشير إلى وجود مشاكل. اكتشاف هذه الأمور مبكرًا سيوفر لك (ولمستخدميك) الكثير من الإحباط.
 
-**أحجام الأصول**: أصبحت المواقع الإلكترونية "أثقل" على مر السنين، والكثير من هذا الوزن الإضافي يأتي من الصور. إنه مثل أننا كنا نحشو المزيد والمزيد في حقائبنا الرقمية.
+**أحجام الأصول**: أصبحت المواقع "أثقل" على مر السنين، والكثير من هذا الوزن الزائد يأتي من الصور. إنه مثل أننا كنا نحشو المزيد والمزيد في حقائبنا الرقمية.
 
 ✅ تحقق من [أرشيف الإنترنت](https://httparchive.org/reports/page-weight) لترى كيف نمت أحجام الصفحات بمرور الوقت - إنه كاشف للغاية.
 
 **إليك كيفية الحفاظ على أصولك محسنة:**
-- **اضغط** تلك الصور! يمكن أن تقلل التنسيقات الحديثة مثل WebP من أحجام الملفات بشكل كبير
-- **قدم** الحجم الصحيح للصورة لكل جهاز - لا حاجة لإرسال صور ضخمة لأجهزة سطح المكتب إلى الهواتف
-- **قلل** من CSS وJavaScript - كل بايت مهم
-- **استخدم** التحميل الكسول بحيث يتم تنزيل الصور فقط عندما يقوم المستخدمون بالتمرير إليها
+- **ضغط** تلك الصور! يمكن أن تقلل التنسيقات الحديثة مثل WebP من أحجام الملفات بشكل كبير
+- **تقديم** حجم الصورة المناسب لكل جهاز - لا حاجة لإرسال صور ضخمة للهواتف
+- **تصغير** CSS وJavaScript - كل بايت مهم
+- **استخدام** التحميل الكسول بحيث يتم تنزيل الصور فقط عندما يقوم المستخدمون بالتمرير إليها
 
-**التنقل في DOM**: يجب على المتصفح بناء نموذج كائن المستند بناءً على الكود الذي تكتبه، لذا من مصلحة أداء الصفحة الجيد الحفاظ على العلامات إلى الحد الأدنى، باستخدام وتنسيق ما تحتاجه الصفحة فقط. على هذا النحو، يمكن تحسين CSS الزائدة المرتبطة بصفحة؛ الأنماط التي تحتاج إلى استخدامها فقط في صفحة واحدة لا تحتاج إلى تضمينها في ورقة الأنماط الرئيسية، على سبيل المثال.
+**التنقل عبر DOM**: يجب على المتصفح بناء نموذج الكائنات المستندة إلى الوثيقة بناءً على الكود الذي تكتبه، لذا من مصلحة الأداء الجيد للصفحة الحفاظ على العلامات إلى الحد الأدنى، واستخدام وتنسيق ما تحتاجه الصفحة فقط. على هذا النحو، يمكن تحسين CSS الزائد المرتبط بالصفحة؛ الأنماط التي تحتاج إلى استخدامها فقط في صفحة واحدة لا تحتاج إلى تضمينها في ورقة الأنماط الرئيسية، على سبيل المثال.
 
 **استراتيجيات رئيسية لتحسين DOM:**
-- **قلل** عدد عناصر HTML ومستويات التعشيق
-- **أزل** قواعد CSS غير المستخدمة ودمج أوراق الأنماط بكفاءة
-- **نظم** CSS لتحميل ما هو مطلوب فقط لكل صفحة
-- **هيكل** HTML بشكل دلالي لتحليل أفضل من المتصفح
+- **تقليل** عدد عناصر HTML ومستويات التداخل
+- **إزالة** قواعد CSS غير المستخدمة ودمج أوراق الأنماط بكفاءة
+- **تنظيم** CSS لتحميل ما هو مطلوب فقط لكل صفحة
+- **هيكلة** HTML بشكل دلالي لتحسين تحليل المتصفح
 
-**JavaScript**: يجب على كل مطور JavaScript مراقبة النصوص "المعطلة للتقديم" التي يجب تحميلها قبل أن يتمكن باقي DOM من التنقل والرسم في المتصفح. فكر في استخدام `defer` مع النصوص المضمنة الخاصة بك (كما هو الحال في وحدة Terrarium).
+**JavaScript**: يجب على كل مطور JavaScript مراقبة النصوص التي تعيق التقديم والتي يجب تحميلها قبل أن يتمكن DOM من التنقل والرسم في المتصفح. فكر في استخدام `defer` مع النصوص المضمنة الخاصة بك (كما هو الحال في وحدة Terrarium).
 
-**تقنيات تحسين JavaScript الحديثة:**
-- **استخدم** السمة `defer` لتحميل النصوص بعد تحليل DOM
-- **نفذ** تقسيم الكود لتحميل JavaScript الضروري فقط
-- **طبق** التحميل الكسول للوظائف غير الحرجة
-- **قلل** من استخدام المكتبات والأطر الثقيلة عند الإمكان
+**تقنيات حديثة لتحسين JavaScript:**
+- **استخدام** خاصية `defer` لتحميل النصوص بعد تحليل DOM
+- **تنفيذ** تقسيم الكود لتحميل JavaScript الضروري فقط
+- **تطبيق** التحميل الكسول للوظائف غير الحرجة
+- **تقليل** استخدام المكتبات الثقيلة والأطر عند الإمكان
 
 ✅ جرب بعض المواقع على [موقع اختبار سرعة الموقع](https://www.webpagetest.org/) لتتعرف على الفحوصات الشائعة التي يتم إجراؤها لتحديد أداء الموقع.
 
-الآن بعد أن لديك فكرة عن كيفية عرض المتصفح للأصول التي ترسلها إليه، دعنا نلقي نظرة على آخر الأشياء التي تحتاج إلى القيام بها لإكمال الإضافة الخاصة بك:
+### 🔄 **تقييم تربوي**
+**فهم الأداء**: قبل بناء ميزات الإضافة، تأكد من أنك تستطيع:
+- ✅ شرح المسار الحرج للتقديم من HTML إلى البكسل
+- ✅ تحديد الاختناقات الشائعة في أداء تطبيقات الويب
+- ✅ استخدام أدوات المطور الخاصة بالمتصفح لتحليل أداء الصفحة
+- ✅ فهم كيف تؤثر أحجام الأصول وتعقيد DOM على السرعة
 
-### إنشاء وظيفة لحساب اللون
+**اختبار ذاتي سريع**: ماذا يحدث عندما يكون لديك JavaScript يعيق التقديم؟
+*الإجابة: يجب على المتصفح تنزيل وتنفيذ النص قبل أن يتمكن من متابعة تحليل HTML وتقديم الصفحة*
 
-الآن سنقوم بإنشاء وظيفة تحول البيانات الرقمية إلى ألوان ذات معنى. فكر فيها كنظام إشارات المرور - الأخضر للطاقة النظيفة، والأحمر للكثافة الكربونية العالية.
+**تأثير الأداء في العالم الحقيقي**:
+- **تأخير 100 مللي ثانية**: يلاحظ المستخدمون البطء
+- **تأخير 1 ثانية**: يبدأ المستخدمون بفقدان التركيز
+- **تأخير 3+ ثوانٍ**: 40% من المستخدمين يتخلون عن الصفحة
+- **شبكات الهواتف المحمولة**: الأداء يصبح أكثر أهمية
 
-ستأخذ هذه الوظيفة بيانات ثاني أكسيد الكربون من API الخاص بنا وتحدد اللون الذي يمثل بشكل أفضل التأثير البيئي. يشبه ذلك كيف يستخدم العلماء الترميز اللوني في خرائط الحرارة لتصور أنماط البيانات المعقدة - من درجات حرارة المحيطات إلى تكوين النجوم. دعونا نضيف هذا إلى `/src/index.js`، مباشرة بعد تلك المتغيرات `const` التي قمنا بإعدادها سابقًا:
+الآن بعد أن لديك فكرة عن كيفية تقديم المتصفح للأصول التي ترسلها إليه، دعونا نلقي نظرة على آخر الأشياء التي تحتاج إلى القيام بها لإكمال الإضافة الخاصة بك:
+
+### إنشاء وظيفة لحساب اللون
+
+الآن سنقوم بإنشاء وظيفة تحول البيانات الرقمية إلى ألوان ذات معنى. فكر فيها كنظام إشارات المرور - الأخضر للطاقة النظيفة، الأحمر للكثافة الكربونية العالية.
+
+هذه الوظيفة ستأخذ بيانات CO2 من API الخاص بنا وتحدد اللون الذي يمثل التأثير البيئي بشكل أفضل. إنها مشابهة لكيفية استخدام العلماء الترميز اللوني في خرائط الحرارة لتصور أنماط البيانات المعقدة - من درجات حرارة المحيطات إلى تشكيل النجوم. دعونا نضيف هذا إلى `/src/index.js`، مباشرة بعد تلك المتغيرات `const` التي قمنا بإعدادها سابقًا:
+
+```mermaid
+flowchart LR
+    A[CO2 Value] --> B[Find Closest Scale Point]
+    B --> C[Get Scale Index]
+    C --> D[Map to Color]
+    D --> E[Send to Background]
+    
+    subgraph "Color Scale"
+        F["0-150: Green (Clean)"]
+        G["150-600: Yellow (Moderate)"]
+        H["600-750: Orange (High)"]
+        I["750+: Brown (Very High)"]
+    end
+    
+    subgraph "Message Passing"
+        J[Content Script]
+        K[chrome.runtime.sendMessage]
+        L[Background Script]
+        M[Icon Update]
+    end
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style E fill:#fff3e0
+```
 
 ```javascript
 function calculateColor(value) {
@@ -133,33 +287,52 @@ function calculateColor(value) {
 }
 ```
 
-**دعونا نفصل هذه الوظيفة الذكية الصغيرة:**
-- **إعداد** مصفوفتين - واحدة لمستويات ثاني أكسيد الكربون، وأخرى للألوان (الأخضر = نظيف، البني = ملوث!)
-- **إيجاد** أقرب تطابق لقيمة ثاني أكسيد الكربون الفعلية باستخدام بعض الفرز الذكي للمصفوفة
+**دعونا نفصل هذه الوظيفة الذكية:**
+- **إعداد** مصفوفتين - واحدة لمستويات CO2، وأخرى للألوان (الأخضر = نظيف، البني = ملوث!)
+- **العثور** على أقرب تطابق لقيمة CO2 الفعلية باستخدام بعض الفرز الذكي للمصفوفة
 - **الحصول** على اللون المطابق باستخدام طريقة findIndex()
 - **إرسال** رسالة إلى نص الخلفية الخاص بـ Chrome مع اللون الذي اخترناه
-- **استخدام** القوالب النصية (تلك العلامات الخلفية) لتنسيق النصوص بشكل أنيق
-- **الحفاظ** على كل شيء منظمًا باستخدام إعلانات const
-
-[API](https://developer.chrome.com/extensions/runtime) `chrome.runtime` يشبه النظام العصبي لإضافتك - فهو يتعامل مع جميع الاتصالات والمهام التي تتم خلف الكواليس:
-
-> "استخدم API chrome.runtime لاسترداد صفحة الخلفية، وإرجاع تفاصيل حول الملف التعريفي، والاستماع إلى الأحداث والاستجابة لها في دورة حياة التطبيق أو الإضافة. يمكنك أيضًا استخدام هذا API لتحويل مسار URL النسبي إلى URL مؤهل بالكامل."
-
-**لماذا API Chrome Runtime مفيد جدًا:**
-- **يسمح** لأجزاء مختلفة من الإضافة بالتحدث مع بعضها البعض
-- **يتعامل** مع العمل الخلفي دون تجميد واجهة المستخدم
-- **يدير** أحداث دورة حياة الإضافة الخاصة بك
-- **يجعل** تمرير الرسائل بين النصوص أمرًا سهلاً للغاية
-
-✅ إذا كنت تطور هذه الإضافة لمتصفح Edge، فقد يفاجئك أنك تستخدم API Chrome. تعمل إصدارات متصفح Edge الأحدث على محرك متصفح Chromium، لذا يمكنك الاستفادة من هذه الأدوات.
+- **استخدام** القوالب النصية (تلك العلامات الخلفية) لتنسيق النصوص بشكل أنظف
+- **الحفاظ** على كل شيء منظمًا باستخدام التصريحات const
+
+واجهة برمجة التطبيقات `chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) تشبه الجهاز العصبي للإضافة الخاصة بك - فهي تتعامل مع كل الاتصالات والمهام التي تحدث خلف الكواليس:
+
+> "استخدم واجهة برمجة التطبيقات chrome.runtime لاسترداد صفحة الخلفية، وإرجاع تفاصيل حول الملف التعريفي، والاستماع إلى الأحداث والاستجابة لها في دورة حياة التطبيق أو الإضافة. يمكنك أيضًا استخدام هذه الواجهة لتحويل المسارات النسبية لعناوين URL إلى عناوين URL مؤهلة بالكامل."
+
+**لماذا واجهة برمجة التطبيقات Chrome Runtime مفيدة جدًا:**
+- **تسمح** لأجزاء مختلفة من الإضافة بالتواصل مع بعضها البعض
+- **تتعامل** مع العمل الخلفي دون تجميد واجهة المستخدم
+- **تدير** أحداث دورة حياة الإضافة الخاصة بك
+- **تجعل** تمرير الرسائل بين النصوص أمرًا سهلاً للغاية
+
+✅ إذا كنت تطور هذه الإضافة للمتصفح Edge، قد يفاجئك أنك تستخدم واجهة برمجة تطبيقات Chrome. الإصدارات الأحدث من متصفح Edge تعمل على محرك متصفح Chromium، لذا يمكنك الاستفادة من هذه الأدوات.
+
+```mermaid
+architecture-beta
+    group browser(logos:chrome)[Browser]
+    
+    service popup(logos:html5)[Popup UI] in browser
+    service content(logos:javascript)[Content Script] in browser
+    service background(database)[Background Script] in browser
+    service api(logos:api)[External API] in browser
+    
+    popup:R -- L:content
+    content:R -- L:background
+    background:T -- B:api
+    content:T -- B:api
+    
+    junction junctionCenter in browser
+    popup:R -- L:junctionCenter
+    junctionCenter:R -- L:background
+```
 
-> **نصيحة احترافية**: إذا كنت تريد تحليل أداء إضافة متصفح، فقم بفتح أدوات المطور من داخل الإضافة نفسها، حيث إنها تعتبر مثيل متصفح منفصل. يمنحك هذا الوصول إلى مقاييس أداء خاصة بالإضافة.
+> **نصيحة احترافية**: إذا كنت تريد تحليل أداء إضافة متصفح، قم بفتح أدوات المطور من داخل الإضافة نفسها، حيث إنها تعتبر مثيل متصفح منفصل. هذا يمنحك الوصول إلى مقاييس أداء خاصة بالإضافة.
 
-### تعيين لون أيقونة افتراضي
+### تعيين لون افتراضي للأيقونة
 
-قبل أن نبدأ في جلب البيانات الحقيقية، دعنا نعطي الإضافة الخاصة بنا نقطة انطلاق. لا أحد يحب النظر إلى أيقونة فارغة أو تبدو مكسورة. سنبدأ بلون أخضر حتى يعرف المستخدمون أن الإضافة تعمل من اللحظة التي يقومون بتثبيتها.
+قبل أن نبدأ في جلب البيانات الحقيقية، دعونا نعطي الإضافة الخاصة بنا نقطة بداية. لا أحد يحب النظر إلى أيقونة فارغة أو تبدو مكسورة. سنبدأ بلون أخضر حتى يعرف المستخدمون أن الإضافة تعمل من اللحظة التي يقومون بتثبيتها.
 
-في وظيفة `init()` الخاصة بك، دعنا نعد هذا اللون الأخضر الافتراضي:
+في وظيفة `init()` الخاصة بك، دعونا نعد تلك الأيقونة الخضراء الافتراضية:
 
 ```javascript
 chrome.runtime.sendMessage({
@@ -170,17 +343,17 @@ chrome.runtime.sendMessage({
 });
 ```
 
-**ما الذي تحققه هذه التهيئة:**
+**ما الذي يحققه هذا التهيئة:**
 - **تعيين** لون أخضر محايد كحالة افتراضية
-- **توفير** ملاحظات بصرية فورية عند تحميل الإضافة
-- **تأسيس** نمط الاتصال مع نص الخلفية
-- **ضمان** رؤية المستخدمين لإضافة وظيفية قبل تحميل البيانات
+- **توفير** ردود فعل بصرية فورية عند تحميل الإضافة
+- **إنشاء** نمط الاتصال مع نص الخلفية
+- **ضمان** أن يرى المستخدمون إضافة وظيفية قبل تحميل البيانات
 
 ### استدعاء الوظيفة، تنفيذ الاستدعاء
 
-الآن دعنا نربط كل شيء معًا بحيث عندما تصل بيانات ثاني أكسيد الكربون الجديدة، يتم تحديث الأيقونة تلقائيًا باللون المناسب. إنه مثل توصيل الدائرة النهائية في جهاز إلكتروني - فجأة تعمل جميع المكونات الفردية كنظام واحد.
+الآن دعونا نربط كل شيء معًا بحيث عندما تأتي بيانات CO2 الجديدة، يتم تحديث الأيقونة تلقائيًا باللون المناسب. إنه مثل توصيل الدائرة النهائية في جهاز إلكتروني - فجأة تعمل جميع المكونات الفردية كنظام واحد.
 
-أضف هذا السطر مباشرة بعد حصولك على بيانات ثاني أكسيد الكربون من API:
+أضف هذا السطر مباشرة بعد الحصول على بيانات CO2 من API:
 
 ```javascript
 // After retrieving CO2 data from the API
@@ -188,10 +361,10 @@ chrome.runtime.sendMessage({
 calculateColor(CO2);
 ```
 
-**ما الذي تحققه هذه التكاملات:**
-- **ربط** تدفق بيانات API بنظام المؤشر البصري
+**ما الذي يحققه هذا التكامل:**
+- **ربط** تدفق بيانات API مع نظام المؤشر البصري
 - **تشغيل** تحديثات الأيقونة تلقائيًا عند وصول بيانات جديدة
-- **ضمان** ملاحظات بصرية في الوقت الفعلي بناءً على كثافة الكربون الحالية
+- **ضمان** ردود فعل بصرية في الوقت الفعلي بناءً على كثافة الكربون الحالية
 - **الحفاظ** على فصل الاهتمامات بين جلب البيانات ومنطق العرض
 
 وأخيرًا، في `/dist/background.js`، أضف المستمع لهذه الاستدعاءات الخلفية:
@@ -223,41 +396,72 @@ function drawIcon(value) {
 ```
 
 **ما الذي يفعله هذا النص الخلفي:**
-- **الاستماع** للرسائل من النص الرئيسي الخاص بك (مثل موظف استقبال يتلقى المكالمات)
+- **الاستماع** إلى الرسائل من النص الرئيسي الخاص بك (مثل موظف استقبال يتلقى المكالمات)
 - **معالجة** طلبات 'updateIcon' لتغيير أيقونة شريط الأدوات الخاص بك
-- **إنشاء** أيقونات جديدة أثناء التنقل باستخدام Canvas API
-- **رسم** دائرة ملونة بسيطة تظهر كثافة الكربون الحالية
-- **تحديث** شريط الأدوات الخاص بالمتصفح بالأيقونة الجديدة
+- **إنشاء** أيقونات جديدة أثناء التنقل باستخدام واجهة برمجة التطبيقات Canvas
+- **رسم** دائرة بسيطة ملونة تظهر كثافة الكربون الحالية
+- **تحديث** شريط أدوات المتصفح الخاص بك بالأيقونة الجديدة
 - **استخدام** OffscreenCanvas لأداء سلس (بدون تجميد واجهة المستخدم)
 
-✅ ستتعلم المزيد عن Canvas API في [دروس لعبة الفضاء](../../6-space-game/2-drawing-to-canvas/README.md).
+✅ ستتعلم المزيد عن واجهة برمجة التطبيقات Canvas في [دروس لعبة الفضاء](../../6-space-game/2-drawing-to-canvas/README.md).
+
+```mermaid
+sequenceDiagram
+    participant CS as Content Script
+    participant BG as Background Script
+    participant Canvas as OffscreenCanvas
+    participant Browser as Browser Icon
+    
+    CS->>BG: sendMessage({action: 'updateIcon', color})
+    BG->>Canvas: new OffscreenCanvas(200, 200)
+    Canvas->>Canvas: getContext('2d')
+    Canvas->>Canvas: beginPath() + fillStyle + arc()
+    Canvas->>Canvas: fill() + getImageData()
+    Canvas->>BG: Return image data
+    BG->>Browser: chrome.action.setIcon(imageData)
+    Browser->>Browser: Update toolbar icon
+```
+
+### 🔄 **تقييم تربوي**
+**فهم الإضافة بالكامل**: تحقق من إتقانك للنظام بأكمله:
+- ✅ كيف يعمل تمرير الرسائل بين النصوص المختلفة للإضافة؟
+- ✅ لماذا نستخدم OffscreenCanvas بدلاً من Canvas العادي لتحسين الأداء؟
+- ✅ ما هو دور واجهة برمجة التطبيقات Chrome Runtime في بنية الإضافات؟
+- ✅ كيف يقوم خوارزمية حساب الألوان بربط البيانات بالتغذية البصرية؟
+
+**اعتبارات الأداء**: الآن تعرض إضافتك:
+- **رسائل فعالة**: تواصل نظيف بين سياقات السكربت
+- **عرض محسن**: OffscreenCanvas يمنع حجب واجهة المستخدم
+- **تحديثات في الوقت الفعلي**: تغييرات ديناميكية للأيقونة بناءً على البيانات الحية
+- **إدارة الذاكرة**: تنظيف مناسب ومعالجة الموارد
 
-**حان وقت اختبار الإضافة الخاصة بك:**
+**حان وقت اختبار الإضافة:**
 - **قم ببناء** كل شيء باستخدام `npm run build`
-- **أعد تحميل** الإضافة الخاصة بك في المتصفح (لا تنسَ هذه الخطوة)
-- **افتح** الإضافة الخاصة بك وشاهد تلك الأيقونة تتغير ألوانها
+- **أعد تحميل** الإضافة في المتصفح (لا تنسَ هذه الخطوة)
+- **افتح** الإضافة وشاهد كيف تتغير الأيقونة ألوانها
 - **تحقق** من كيفية استجابتها لبيانات الكربون الحقيقية من جميع أنحاء العالم
 
-الآن ستعرف في لمحة ما إذا كان الوقت مناسبًا لتشغيل الغسالة أو إذا كان يجب عليك الانتظار للحصول على طاقة أنظف. لقد قمت ببناء شيء مفيد حقًا وتعلمت عن أداء المتصفح على طول الطريق.
+الآن ستعرف بنظرة واحدة ما إذا كان الوقت مناسبًا لغسل الملابس أو إذا كان عليك الانتظار للحصول على طاقة أنظف. لقد قمت ببناء شيء مفيد حقًا وتعلمت عن أداء المتصفح في نفس الوقت.
 
 ## تحدي GitHub Copilot Agent 🚀
 
-استخدم وضع الوكيل لإكمال التحدي التالي:
+استخدم وضع Agent لإكمال التحدي التالي:
 
-**الوصف:** عزز قدرات مراقبة الأداء لإضافة المتصفح عن طريق إضافة ميزة تتبع وعرض أوقات التحميل لمكونات الإضافة المختلفة.
+**الوصف:** تحسين قدرات مراقبة الأداء للإضافة عن طريق إضافة ميزة تتبع وعرض أوقات تحميل المكونات المختلفة للإضافة.
 
-**الموجه:** قم بإنشاء نظام مراقبة الأداء لإضافة المتصفح يقيس ويسجل الوقت الذي يستغرقه جلب بيانات ثاني أكسيد الكربون من API، حساب الألوان، وتحديث الأيقونة. أضف وظيفة تسمى `performanceTracker` تستخدم Performance API لقياس هذه العمليات وعرض النتائج في وحدة تحكم المتصفح مع الطوابع الزمنية ومقاييس المدة.
+**المهمة:** قم بإنشاء نظام مراقبة الأداء للإضافة يقيس ويسجل الوقت الذي يستغرقه جلب بيانات CO2 من API، حساب الألوان، وتحديث الأيقونة. أضف وظيفة تسمى `performanceTracker` تستخدم Performance API لقياس هذه العمليات وعرض النتائج في وحدة تحكم المتصفح مع الطوابع الزمنية ومقاييس المدة.
 
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## 🚀 التحدي
-إليك مهمة تحقيق مثيرة: اختر بعض المواقع المفتوحة المصدر التي كانت موجودة منذ سنوات (مثل ويكيبيديا، GitHub، أو Stack Overflow) وقم بالبحث في تاريخ الالتزامات الخاصة بها. هل يمكنك تحديد الأماكن التي قاموا فيها بتحسين الأداء؟ ما هي المشاكل التي استمرت في الظهور؟
+
+إليك مهمة تحقيق مثيرة: اختر بعض المواقع المفتوحة المصدر التي كانت موجودة لسنوات (مثل Wikipedia، GitHub، أو Stack Overflow) وابحث في تاريخ الالتزامات الخاصة بها. هل يمكنك تحديد أين قاموا بتحسين الأداء؟ ما هي المشاكل التي استمرت في الظهور؟
 
 **نهج التحقيق الخاص بك:**
-- **ابحث** في رسائل الالتزامات عن كلمات مثل "تحسين"، "أداء"، أو "أسرع"
-- **لاحظ** الأنماط - هل يستمرون في إصلاح نفس أنواع المشاكل؟
+- **ابحث** في رسائل الالتزام عن كلمات مثل "تحسين"، "أداء"، أو "أسرع"
+- **انظر** إلى الأنماط - هل يستمرون في إصلاح نفس أنواع المشكلات؟
 - **حدد** الأسباب الشائعة التي تؤدي إلى بطء المواقع
-- **شارك** ما تكتشفه - يمكن للمطورين الآخرين التعلم من أمثلة واقعية
+- **شارك** ما تكتشفه - يتعلم المطورون الآخرون من الأمثلة الواقعية
 
 ## اختبار ما بعد المحاضرة
 
@@ -265,15 +469,135 @@ function drawIcon(value) {
 
 ## المراجعة والدراسة الذاتية
 
-فكر في الاشتراك في [نشرة أخبار الأداء](https://perf.email/)
-
-قم بالتحقيق في بعض الطرق التي تقيس بها المتصفحات أداء الويب من خلال النظر في علامات الأداء في أدوات الويب الخاصة بها. هل تجد أي اختلافات كبيرة؟
+فكر في الاشتراك في [نشرة الأداء](https://perf.email/)
+
+استكشف بعض الطرق التي تقيس بها المتصفحات أداء الويب من خلال النظر في علامات الأداء في أدوات الويب الخاصة بها. هل تجد أي اختلافات كبيرة؟
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] افتح مدير مهام المتصفح (Shift+Esc في Chrome) لرؤية استخدام موارد الإضافة
+- [ ] استخدم علامة الأداء في DevTools لتسجيل وتحليل أداء صفحة الويب
+- [ ] تحقق من صفحة الإضافات في المتصفح لمعرفة أي الإضافات تؤثر على وقت بدء التشغيل
+- [ ] حاول تعطيل الإضافات مؤقتًا لرؤية اختلافات الأداء
+
+### 🎯 **ما يمكنك تحقيقه خلال الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وفهم مفاهيم الأداء
+- [ ] قم بتنفيذ سكربت خلفي لإضافتك في المتصفح
+- [ ] تعلم استخدام browser.alarms للمهام الخلفية الفعالة
+- [ ] مارس تمرير الرسائل بين سكربتات المحتوى والسكربتات الخلفية
+- [ ] قم بقياس وتحسين استخدام موارد الإضافة
+
+### 📅 **رحلة الأداء الخاصة بك لمدة أسبوع**
+- [ ] أكمل إضافة متصفح عالية الأداء مع وظائف خلفية
+- [ ] أتقن عمال الخدمة وهندسة الإضافات الحديثة
+- [ ] قم بتنفيذ استراتيجيات مزامنة البيانات والتخزين المؤقت الفعالة
+- [ ] تعلم تقنيات تصحيح الأخطاء المتقدمة لأداء الإضافات
+- [ ] قم بتحسين الإضافة من حيث الوظائف وكفاءة الموارد
+- [ ] قم بإنشاء اختبارات شاملة لسيناريوهات أداء الإضافة
+
+### 🌟 **إتقان التحسين على مدار شهر**
+- [ ] قم ببناء إضافات متصفح على مستوى المؤسسات بأداء مثالي
+- [ ] تعلم عن Web Workers، Service Workers، وأداء الويب الحديث
+- [ ] ساهم في مشاريع مفتوحة المصدر تركز على تحسين الأداء
+- [ ] أتقن أساسيات المتصفح وتقنيات تصحيح الأخطاء المتقدمة
+- [ ] قم بإنشاء أدوات مراقبة الأداء وأدلة أفضل الممارسات
+- [ ] كن خبيرًا في الأداء يساعد في تحسين تطبيقات الويب
+
+## 🎯 جدول زمني لإتقان تطوير إضافات المتصفح
+
+```mermaid
+timeline
+    title Complete Extension Development Progression
+    
+    section Performance Fundamentals (20 minutes)
+        Browser Profiling: DevTools mastery
+                         : Timeline analysis
+                         : Bottleneck identification
+                         : Critical rendering path
+        
+    section Background Tasks (25 minutes)
+        Extension Architecture: Message passing
+                              : Background scripts
+                              : Runtime API usage
+                              : Cross-context communication
+        
+    section Visual Feedback (30 minutes)
+        Dynamic UI: Color calculation algorithms
+                  : Canvas API integration
+                  : Icon generation
+                  : Real-time updates
+        
+    section Performance Optimization (35 minutes)
+        Efficient Code: Async operations
+                      : Memory management
+                      : Resource cleanup
+                      : Performance monitoring
+        
+    section Production Ready (45 minutes)
+        Polish & Testing: Cross-browser compatibility
+                        : Error handling
+                        : User experience
+                        : Performance validation
+        
+    section Advanced Features (1 week)
+        Extension Ecosystem: Chrome Web Store
+                           : User feedback
+                           : Analytics integration
+                           : Update management
+        
+    section Professional Development (2 weeks)
+        Enterprise Extensions: Team collaboration
+                             : Code reviews
+                             : CI/CD pipelines
+                             : Security audits
+        
+    section Expert Mastery (1 month)
+        Platform Expertise: Advanced Chrome APIs
+                          : Performance optimization
+                          : Architecture patterns
+                          : Open source contribution
+```
 
-## الواجب
+### 🛠️ مجموعة أدوات تطوير الإضافات الكاملة الخاصة بك
+
+بعد إكمال هذه الثلاثية، أصبحت الآن خبيرًا في:
+- **هندسة المتصفح**: فهم عميق لكيفية دمج الإضافات مع أنظمة المتصفح
+- **تحليل الأداء**: القدرة على تحديد وإصلاح الاختناقات باستخدام أدوات المطور
+- **برمجة غير متزامنة**: أنماط JavaScript الحديثة للعمليات المستجيبة وغير الحاجزة
+- **تكامل API**: جلب البيانات الخارجية مع المصادقة ومعالجة الأخطاء
+- **تصميم بصري**: تحديثات واجهة المستخدم الديناميكية وإنشاء الرسومات المستندة إلى Canvas
+- **تمرير الرسائل**: التواصل بين السكربتات في هندسة الإضافات
+- **تجربة المستخدم**: حالات التحميل، معالجة الأخطاء، وتفاعلات بديهية
+- **مهارات الإنتاج**: اختبار، تصحيح، وتحسين للنشر في العالم الحقيقي
+
+**تطبيقات العالم الحقيقي**: مهارات تطوير الإضافات الخاصة بك تنطبق مباشرة على:
+- **تطبيقات الويب التقدمية**: أنماط هندسة وأداء مشابهة
+- **تطبيقات سطح المكتب Electron**: تطبيقات عبر الأنظمة باستخدام تقنيات الويب
+- **تطبيقات الهاتف الهجينة**: تطوير Cordova/PhoneGap باستخدام واجهات برمجة التطبيقات للويب
+- **تطبيقات الويب المؤسسية**: أدوات لوحة القيادة والإنتاجية المعقدة
+- **إضافات Chrome DevTools**: أدوات المطور المتقدمة وتصحيح الأخطاء
+- **تكامل واجهات برمجة التطبيقات للويب**: أي تطبيق يتواصل مع خدمات خارجية
+
+**التأثير المهني**: يمكنك الآن:
+- **بناء** إضافات متصفح جاهزة للإنتاج من الفكرة إلى النشر
+- **تحسين** أداء تطبيقات الويب باستخدام أدوات تحليل الأداء القياسية
+- **تصميم** أنظمة قابلة للتوسع مع فصل مناسب للمكونات
+- **تصحيح** العمليات غير المتزامنة المعقدة والتواصل بين السياقات
+- **المساهمة** في مشاريع الإضافات مفتوحة المصدر ومعايير المتصفح
+
+**فرص المستوى التالي**:
+- **مطور Chrome Web Store**: نشر إضافات لملايين المستخدمين
+- **مهندس أداء الويب**: التخصص في التحسين وتجربة المستخدم
+- **مطور منصة المتصفح**: المساهمة في تطوير محركات المتصفح
+- **منشئ إطار عمل الإضافات**: بناء أدوات تساعد المطورين الآخرين
+- **علاقات المطورين**: مشاركة المعرفة من خلال التعليم وإنشاء المحتوى
+
+🌟 **إنجاز محقق**: لقد قمت ببناء إضافة متصفح كاملة الوظائف تُظهر ممارسات تطوير احترافية ومعايير ويب حديثة!
+
+## المهمة
 
 [تحليل موقع للأداء](assignment.md)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/6-space-game/1-introduction/README.md b/translations/ar/6-space-game/1-introduction/README.md
index 8ffff79d88..bedd2f5f4f 100644
--- a/translations/ar/6-space-game/1-introduction/README.md
+++ b/translations/ar/6-space-game/1-introduction/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "862f7f2ef320f6f8950fae379e6ece45",
-  "translation_date": "2025-10-22T14:27:55+00:00",
+  "original_hash": "a6332a7bb4d0be3bfd24199c83993777",
+  "translation_date": "2025-11-03T12:46:40+00:00",
   "source_file": "6-space-game/1-introduction/README.md",
   "language_code": "ar"
 }
 -->
 # بناء لعبة فضاء الجزء الأول: المقدمة
 
-![رسوم متحركة للعبة الفضاء تظهر طريقة اللعب](../../../../6-space-game/images/pewpew.gif)
-
-تمامًا كما تنسق وحدة التحكم في مهام ناسا بين أنظمة متعددة أثناء إطلاق الفضاء، سنقوم ببناء لعبة فضاء تُظهر كيف يمكن لأجزاء مختلفة من البرنامج أن تعمل معًا بسلاسة. أثناء إنشاء شيء يمكنك فعلاً اللعب به، ستتعلم مفاهيم البرمجة الأساسية التي تنطبق على أي مشروع برمجي.
+```mermaid
+journey
+    title Your Game Development Journey
+    section Foundation
+      Learn game architecture: 3: Student
+      Understand inheritance: 4: Student
+      Explore composition: 4: Student
+    section Communication
+      Build pub/sub system: 4: Student
+      Design event flow: 5: Student
+      Connect components: 5: Student
+    section Application
+      Create game objects: 5: Student
+      Implement patterns: 5: Student
+      Plan game structure: 5: Student
+```
 
-سنستكشف نهجين أساسيين لتنظيم الكود: الوراثة والتركيب. هذه ليست مجرد مفاهيم أكاديمية – إنها نفس الأنماط التي تدعم كل شيء من ألعاب الفيديو إلى أنظمة البنوك. سنقوم أيضًا بتنفيذ نظام اتصال يسمى pub/sub يعمل مثل شبكات الاتصال المستخدمة في المركبات الفضائية، مما يسمح للمكونات المختلفة بمشاركة المعلومات دون إنشاء تبعيات.
+![رسوم متحركة للعبة الفضاء تظهر طريقة اللعب](../../../../6-space-game/images/pewpew.gif)
 
-بنهاية هذه السلسلة، ستفهم كيفية بناء تطبيقات يمكنها التوسع والتطور – سواء كنت تطور ألعابًا، تطبيقات ويب، أو أي نظام برمجي آخر.
+تمامًا كما تنسق وحدة التحكم في مهام ناسا بين الأنظمة المختلفة أثناء إطلاق المركبة الفضائية، سنقوم ببناء لعبة فضاء تُظهر كيف يمكن لأجزاء مختلفة من البرنامج أن تعمل معًا بسلاسة. أثناء إنشاء شيء يمكنك بالفعل اللعب به، ستتعلم مفاهيم البرمجة الأساسية التي تنطبق على أي مشروع برمجي.
+
+سنستكشف نهجين أساسيين لتنظيم الكود: الوراثة والتركيب. هذه ليست مجرد مفاهيم أكاديمية – بل هي نفس الأنماط التي تدعم كل شيء من ألعاب الفيديو إلى أنظمة البنوك. سنقوم أيضًا بتنفيذ نظام اتصال يسمى pub/sub يعمل مثل شبكات الاتصال المستخدمة في المركبات الفضائية، مما يسمح للمكونات المختلفة بمشاركة المعلومات دون إنشاء تبعيات.
+
+بحلول نهاية هذه السلسلة، ستفهم كيفية بناء تطبيقات يمكن أن تتوسع وتتطور – سواء كنت تطور ألعابًا أو تطبيقات ويب أو أي نظام برمجي آخر.
+
+```mermaid
+mindmap
+  root((Game Architecture))
+    Object Organization
+      Inheritance
+      Composition
+      Class Hierarchies
+      Behavior Mixing
+    Communication Patterns
+      Pub/Sub System
+      Event Emitters
+      Message Passing
+      Loose Coupling
+    Game Objects
+      Properties (x, y)
+      Behaviors (move, collide)
+      Lifecycle Management
+      State Management
+    Design Patterns
+      Factory Functions
+      Observer Pattern
+      Component System
+      Event-Driven Architecture
+    Scalability
+      Modular Design
+      Maintainable Code
+      Testing Strategies
+      Performance Optimization
+```
 
 ## اختبار ما قبل المحاضرة
 
@@ -23,22 +70,61 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## الوراثة والتركيب في تطوير الألعاب
 
-مع نمو المشاريع في التعقيد، يصبح تنظيم الكود أمرًا بالغ الأهمية. ما يبدأ كبرنامج بسيط يمكن أن يصبح صعب الصيانة بدون هيكل مناسب – تمامًا كما تطلبت مهام أبولو تنسيقًا دقيقًا بين آلاف المكونات.
+مع نمو المشاريع في التعقيد، يصبح تنظيم الكود أمرًا بالغ الأهمية. ما يبدأ كبرنامج بسيط يمكن أن يصبح صعبًا في الصيانة بدون هيكل مناسب – تمامًا مثلما تطلبت مهمات أبولو تنسيقًا دقيقًا بين آلاف المكونات.
 
-سنستكشف نهجين أساسيين لتنظيم الكود: الوراثة والتركيب. لكل منهما مزايا مميزة، وفهم كلاهما يساعدك على اختيار النهج المناسب لمواقف مختلفة. سنوضح هذه المفاهيم من خلال لعبة الفضاء الخاصة بنا، حيث يجب أن يتفاعل الأبطال، الأعداء، التعزيزات، والأشياء الأخرى بكفاءة.
+سنستكشف نهجين أساسيين لتنظيم الكود: الوراثة والتركيب. لكل منهما مزايا مميزة، وفهم كلاهما يساعدك على اختيار النهج المناسب للمواقف المختلفة. سنوضح هذه المفاهيم من خلال لعبة الفضاء الخاصة بنا، حيث يجب أن يتفاعل الأبطال والأعداء والمكافآت وغيرها من العناصر بكفاءة.
 
 ✅ أحد أشهر كتب البرمجة على الإطلاق يتعلق بـ [أنماط التصميم](https://en.wikipedia.org/wiki/Design_Patterns).
 
-في أي لعبة، لديك `كائنات اللعبة` – العناصر التفاعلية التي تملأ عالم اللعبة. الأبطال، الأعداء، التعزيزات، والتأثيرات البصرية كلها كائنات لعبة. كل منها موجود في إحداثيات شاشة محددة باستخدام قيم `x` و `y`، مشابهة لتحديد النقاط على مستوى إحداثي.
+في أي لعبة، لديك `كائنات اللعبة` – العناصر التفاعلية التي تملأ عالم اللعبة. الأبطال، الأعداء، المكافآت، والمؤثرات البصرية كلها كائنات لعبة. كل منها موجود في إحداثيات شاشة محددة باستخدام قيم `x` و `y`، مشابهة لتحديد النقاط على مستوى إحداثي.
 
 على الرغم من اختلافاتها البصرية، غالبًا ما تشترك هذه الكائنات في سلوكيات أساسية:
 
 - **توجد في مكان ما** – كل كائن لديه إحداثيات x و y حتى تعرف اللعبة مكان رسمه
 - **يمكن للكثير منها التحرك** – الأبطال يركضون، الأعداء يطاردون، الرصاص يطير عبر الشاشة
 - **لديها عمر محدد** – بعضها يبقى للأبد، والبعض الآخر (مثل الانفجارات) يظهر لفترة وجيزة ويختفي
-- **تتفاعل مع الأشياء** – عندما تصطدم الأشياء، يتم جمع التعزيزات، يتم تحديث شريط الصحة
+- **تتفاعل مع الأشياء** – عندما تصطدم الأشياء، يتم جمع المكافآت، وتحديث شريط الصحة
+
+✅ فكر في لعبة مثل باك مان. هل يمكنك تحديد الأنواع الأربعة من الكائنات المذكورة أعلاه في هذه اللعبة؟
 
-✅ فكر في لعبة مثل Pac-Man. هل يمكنك تحديد الأنواع الأربعة من الكائنات المذكورة أعلاه في هذه اللعبة؟
+```mermaid
+classDiagram
+    class GameObject {
+        +x: number
+        +y: number
+        +type: string
+        +exists_somewhere()
+    }
+    
+    class MovableObject {
+        +moveTo(x, y)
+        +can_move_around()
+    }
+    
+    class TemporaryObject {
+        +lifespan: number
+        +has_lifespan()
+    }
+    
+    class InteractiveObject {
+        +onCollision()
+        +reacts_to_stuff()
+    }
+    
+    GameObject <|-- MovableObject
+    GameObject <|-- TemporaryObject
+    GameObject <|-- InteractiveObject
+    
+    MovableObject <|-- Hero
+    MovableObject <|-- Enemy
+    MovableObject <|-- Bullet
+    
+    TemporaryObject <|-- PowerUp
+    TemporaryObject <|-- Explosion
+    
+    InteractiveObject <|-- Collectible
+    InteractiveObject <|-- Obstacle
+```
 
 ### التعبير عن السلوك من خلال الكود
 
@@ -48,7 +134,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 توفر الفئات والوراثة نهجًا منظمًا لتنظيم كائنات اللعبة. مثل نظام التصنيف الذي طوره كارل لينيوس، تبدأ بفئة أساسية تحتوي على الخصائص المشتركة، ثم تنشئ فئات متخصصة ترث هذه الأساسيات مع إضافة قدرات محددة.
 
-✅ الوراثة مفهوم مهم لفهمه. تعرف على المزيد في [مقالة MDN حول الوراثة](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+✅ الوراثة مفهوم مهم لفهمه. تعرف على المزيد في [مقال MDN عن الوراثة](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
 
 إليك كيفية تنفيذ كائنات اللعبة باستخدام الفئات والوراثة:
 
@@ -66,7 +152,7 @@ class GameObject {
 **لنقم بتفصيل هذا خطوة بخطوة:**
 - نحن ننشئ قالبًا أساسيًا يمكن لكل كائن لعبة استخدامه
 - يقوم المُنشئ بحفظ مكان وجود الكائن (`x`, `y`) ونوعه
-- يصبح هذا الأساس الذي ستبني عليه جميع كائنات اللعبة الخاصة بك
+- يصبح هذا الأساس الذي ستبني عليه جميع كائنات اللعبة
 
 ```javascript
 // Step 2: Add movement capability through inheritance
@@ -85,7 +171,7 @@ class Movable extends GameObject {
 
 **في المثال أعلاه، قمنا بـ:**
 - **تمديد** فئة GameObject لإضافة وظيفة الحركة
-- **استدعاء** المُنشئ الرئيسي باستخدام `super()` لتهيئة الخصائص الموروثة
+- **استدعاء** المُنشئ الأب باستخدام `super()` لتهيئة الخصائص الموروثة
 - **إضافة** طريقة `moveTo()` التي تقوم بتحديث موقع الكائن
 
 ```javascript
@@ -116,11 +202,11 @@ const tree = new Tree(10, 15);
 - **توضيح** أن الأبطال يمكنهم التحرك بينما تبقى الأشجار ثابتة
 - **إظهار** كيف تمنع التسلسل الهرمي للفئات الإجراءات غير المناسبة
 
-✅ خذ بضع دقائق لإعادة تصور بطل Pac-Man (مثل Inky، Pinky أو Blinky) وكيف يمكن كتابته في JavaScript.
+✅ خذ بضع دقائق لإعادة تصور بطل باك مان (مثل إنكي، بينكي أو بلينكي) وكيف يمكن كتابته في JavaScript.
 
 **نهج التركيب**
 
-يتبع التركيب فلسفة التصميم المعيارية، مشابهة لكيفية تصميم المهندسين للمركبات الفضائية بمكونات قابلة للتبديل. بدلاً من الوراثة من فئة رئيسية، تقوم بدمج سلوكيات محددة لإنشاء كائنات تحتوي على الوظائف التي تحتاجها بالضبط. يوفر هذا النهج مرونة دون قيود هرمية صارمة.
+يتبع التركيب فلسفة التصميم المعياري، مشابهة لكيفية تصميم المهندسين للمركبات الفضائية بمكونات قابلة للتبديل. بدلاً من الوراثة من فئة رئيسية، تقوم بدمج سلوكيات محددة لإنشاء كائنات تحتوي على الوظائف التي تحتاجها بالضبط. يوفر هذا النهج مرونة دون قيود هرمية صارمة.
 
 ```javascript
 // Step 1: Create base behavior objects
@@ -138,10 +224,10 @@ const movable = {
 };
 ```
 
-**إليك ما يفعله هذا الكود:**
-- **تعريف** كائن لعبة أساسي مع خصائص الموقع والنوع
-- **إنشاء** كائن سلوك منفصل قابل للحركة مع وظيفة الحركة
-- **فصل** الاهتمامات من خلال الحفاظ على بيانات الموقع ومنطق الحركة مستقلين
+**ما يفعله هذا الكود:**
+- **يُعرّف** كائن لعبة أساسي بخصائص الموقع والنوع
+- **ينشئ** كائن سلوك قابل للحركة منفصل مع وظيفة الحركة
+- **يفصل** الاهتمامات من خلال الحفاظ على بيانات الموقع ومنطق الحركة بشكل مستقل
 
 ```javascript
 // Step 2: Compose objects by combining behaviors
@@ -183,44 +269,103 @@ const tree = createStatic(0, 0, 'Tree');
 ```
 
 **نقاط رئيسية يجب تذكرها:**
-- **تكوين** الكائنات من خلال مزج السلوكيات بدلاً من وراثتها
-- **توفير** مرونة أكثر من التسلسل الهرمي الصارم للوراثة
+- **تكوين** الكائنات عن طريق مزج السلوكيات بدلاً من وراثتها
+- **توفير** مرونة أكثر من التسلسل الهرمي للوراثة
 - **السماح** للكائنات بالحصول على الميزات التي تحتاجها بالضبط
 - **استخدام** بناء الجملة المنتشر الحديث في JavaScript لتجميع الكائنات بشكل نظيف
-
 ```
 
 **Which Pattern Should You Choose?**
 
-> 💡 **Pro Tip**: Both patterns have their place in modern JavaScript development. Classes work well for clearly defined hierarchies, while composition shines when you need maximum flexibility.
-> 
-**Here's when to use each approach:**
-- **Choose** inheritance when you have clear "is-a" relationships (a Hero *is-a* Movable object)
-- **Select** composition when you need "has-a" relationships (a Hero *has* movement abilities)
-- **Consider** your team's preferences and project requirements
-- **Remember** that you can mix both approaches in the same application
-
-## Communication Patterns: The Pub/Sub System
-
-As applications grow complex, managing communication between components becomes challenging. The publish-subscribe pattern (pub/sub) solves this problem using principles similar to radio broadcasting – one transmitter can reach multiple receivers without knowing who's listening.
+**Which Pattern Should You Choose?**
 
-Consider what happens when a hero takes damage: the health bar updates, sound effects play, visual feedback appears. Rather than coupling the hero object directly to these systems, pub/sub allows the hero to broadcast a "damage taken" message. Any system that needs to respond can subscribe to this message type and react accordingly.
+```mermaid
+quadrantChart
+    title Code Organization Patterns
+    x-axis Simple --> Complex
+    y-axis Rigid --> Flexible
+    quadrant-1 Advanced Composition
+    quadrant-2 Hybrid Approaches
+    quadrant-3 Basic Inheritance
+    quadrant-4 Modern Composition
+    
+    Class Inheritance: [0.3, 0.2]
+    Interface Implementation: [0.6, 0.4]
+    Mixin Patterns: [0.7, 0.7]
+    Pure Composition: [0.8, 0.9]
+    Factory Functions: [0.5, 0.8]
+    Prototype Chain: [0.4, 0.3]
+```
 
-✅ **Pub/Sub** stands for 'publish-subscribe'
+> 💡 **نصيحة احترافية**: كلا النمطين لهما مكانهما في تطوير JavaScript الحديث. تعمل الفئات بشكل جيد مع التسلسلات الهرمية المحددة بوضوح، بينما يبرز التركيب عندما تحتاج إلى أقصى قدر من المرونة.
+> 
+**إليك متى تستخدم كل نهج:**
+- **اختر** الوراثة عندما يكون لديك علاقات "هو-نوع" واضحة (البطل *هو-نوع* كائن قابل للحركة)
+- **اختر** التركيب عندما تحتاج إلى علاقات "يملك-نوع" (البطل *يملك* قدرات الحركة)
+- **ضع في اعتبارك** تفضيلات فريقك ومتطلبات المشروع
+- **تذكر** أنه يمكنك مزج كلا النهجين في نفس التطبيق
+
+### 🔄 **تقييم تربوي**
+**فهم تنظيم الكائنات**: قبل الانتقال إلى أنماط الاتصال، تأكد من أنك تستطيع:
+- ✅ شرح الفرق بين الوراثة والتركيب
+- ✅ تحديد متى تستخدم الفئات مقابل وظائف المصنع
+- ✅ فهم كيفية عمل الكلمة المفتاحية `super()` في الوراثة
+- ✅ التعرف على فوائد كل نهج لتطوير الألعاب
+
+**اختبار سريع ذاتي**: كيف يمكنك إنشاء عدو طائر يمكنه التحرك والطيران؟
+- **نهج الوراثة**: `class FlyingEnemy extends Movable`
+- **نهج التركيب**: `{ ...movable, ...flyable, ...gameObject }`
+
+**اتصال بالعالم الحقيقي**: تظهر هذه الأنماط في كل مكان:
+- **مكونات React**: الخصائص (التركيب) مقابل الوراثة الفئوية
+- **محركات الألعاب**: أنظمة الكائنات المكونة تستخدم التركيب
+- **تطبيقات الهواتف المحمولة**: أطر واجهات المستخدم غالبًا ما تستخدم التسلسلات الهرمية للوراثة
+
+## أنماط الاتصال: نظام Pub/Sub
+
+مع نمو التطبيقات في التعقيد، يصبح إدارة الاتصال بين المكونات تحديًا. يحل نمط النشر-الاشتراك (pub/sub) هذه المشكلة باستخدام مبادئ مشابهة للبث الإذاعي – يمكن لجهاز إرسال واحد الوصول إلى عدة مستقبلين دون معرفة من يستمع.
+
+فكر في ما يحدث عندما يتعرض البطل للضرر: يتم تحديث شريط الصحة، تشغيل المؤثرات الصوتية، وظهور ردود فعل بصرية. بدلاً من ربط كائن البطل مباشرة بهذه الأنظمة، يسمح pub/sub للبطل ببث رسالة "تم تلقي الضرر". يمكن لأي نظام يحتاج إلى الاستجابة الاشتراك في هذا النوع من الرسائل والتفاعل وفقًا لذلك.
+
+✅ **Pub/Sub** تعني "النشر-الاشتراك"
+
+```mermaid
+flowchart TD
+    A[Hero Takes Damage] --> B[Publish: HERO_DAMAGED]
+    B --> C[Event System]
+    
+    C --> D[Health Bar Subscriber]
+    C --> E[Sound System Subscriber]
+    C --> F[Visual Effects Subscriber]
+    C --> G[Achievement System Subscriber]
+    
+    D --> H[Update Health Display]
+    E --> I[Play Damage Sound]
+    F --> J[Show Red Flash]
+    G --> K[Check Survival Achievements]
+    
+    style A fill:#ffebee
+    style B fill:#e1f5fe
+    style C fill:#e8f5e8
+    style H fill:#fff3e0
+    style I fill:#fff3e0
+    style J fill:#fff3e0
+    style K fill:#fff3e0
+```
 
-### Understanding the Pub/Sub Architecture
+### فهم بنية Pub/Sub
 
-The pub/sub pattern keeps different parts of your application loosely coupled, meaning they can work together without being directly dependent on each other. This separation makes your code more maintainable, testable, and flexible to changes.
+يحافظ نمط pub/sub على أجزاء مختلفة من تطبيقك غير مرتبطة بشكل وثيق، مما يعني أنها يمكن أن تعمل معًا دون أن تعتمد مباشرة على بعضها البعض. هذا الفصل يجعل الكود الخاص بك أكثر قابلية للصيانة، والاختبار، والمرونة للتغييرات.
 
-**The key players in pub/sub:**
-- **Messages** – Simple text labels like `'PLAYER_SCORED'` that describe what happened (plus any extra info)
-- **Publishers** – The objects that shout out "Something happened!" to anyone who's listening
-- **Subscribers** – The objects that say "I care about that event" and react when it happens
-- **Event System** – The middleman that makes sure messages get to the right listeners
+**العناصر الرئيسية في pub/sub:**
+- **الرسائل** – تسميات نصية بسيطة مثل `'PLAYER_SCORED'` تصف ما حدث (بالإضافة إلى أي معلومات إضافية)
+- **الناشرون** – الكائنات التي تصرخ "حدث شيء ما!" لأي شخص يستمع
+- **المشتركون** – الكائنات التي تقول "أنا أهتم بهذا الحدث" وتستجيب عندما يحدث
+- **نظام الأحداث** – الوسيط الذي يضمن وصول الرسائل إلى المستمعين المناسبين
 
-### Building an Event System
+### بناء نظام أحداث
 
-Let's create a simple but powerful event system that demonstrates these concepts:
+لنقم بإنشاء نظام أحداث بسيط ولكنه قوي يوضح هذه المفاهيم:
 
 ```javascript
 // Step 1: Create the EventEmitter class
@@ -252,7 +397,7 @@ class EventEmitter {
 - **إنشاء** نظام إدارة أحداث مركزي باستخدام فئة بسيطة
 - **تخزين** المستمعين في كائن منظم حسب نوع الرسالة
 - **تسجيل** مستمعين جدد باستخدام طريقة `on()`
-- **إرسال** الرسائل إلى جميع المستمعين المهتمين باستخدام `emit()`
+- **بث** الرسائل لجميع المستمعين المهتمين باستخدام `emit()`
 - **دعم** حمولات بيانات اختيارية لتمرير المعلومات ذات الصلة
 
 ### جمع كل شيء معًا: مثال عملي
@@ -272,10 +417,10 @@ const eventEmitter = new EventEmitter();
 const hero = createHero(0, 0);
 ```
 
-**إليك ما يفعله هذا الكود:**
-- **تعريف** كائن ثابت لمنع الأخطاء الإملائية في أسماء الرسائل
-- **إنشاء** مثيل لمُرسل الأحداث للتعامل مع جميع الاتصالات
-- **تهيئة** كائن البطل في الموقع الابتدائي
+**ما يفعله هذا الكود:**
+- **يُعرّف** كائنًا ثابتًا لمنع الأخطاء الإملائية في أسماء الرسائل
+- **ينشئ** مثيلًا لمُصدر الأحداث للتعامل مع جميع الاتصالات
+- **يُهيئ** كائن البطل في الموقع الابتدائي
 
 ```javascript
 // Step 3: Set up event listeners (subscribers)
@@ -293,7 +438,7 @@ eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
 **في المثال أعلاه، قمنا بـ:**
 - **تسجيل** مستمعي الأحداث الذين يستجيبون لرسائل الحركة
 - **تحديث** موقع البطل بناءً على اتجاه الحركة
-- **إضافة** تسجيل في وحدة التحكم لتتبع تغييرات موقع البطل
+- **إضافة** تسجيلات وحدة التحكم لتتبع تغييرات موقع البطل
 - **فصل** منطق الحركة عن معالجة الإدخال
 
 ```javascript
@@ -311,24 +456,44 @@ window.addEventListener('keydown', (event) => {
 ```
 
 **فهم هذه المفاهيم:**
-- **ربط** إدخال لوحة المفاتيح بأحداث اللعبة دون اقتران وثيق
+- **ربط** إدخال لوحة المفاتيح بأحداث اللعبة دون ارتباط وثيق
 - **تمكين** نظام الإدخال من التواصل مع كائنات اللعبة بشكل غير مباشر
 - **السماح** لأنظمة متعددة بالاستجابة لنفس أحداث لوحة المفاتيح
-- **تسهيل** تغيير روابط المفاتيح أو إضافة طرق إدخال جديدة
+- **جعل** من السهل تغيير روابط المفاتيح أو إضافة طرق إدخال جديدة
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Keyboard
+    participant EventEmitter
+    participant Hero
+    participant SoundSystem
+    participant Camera
+    
+    User->>Keyboard: Presses ArrowLeft
+    Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
+    EventEmitter->>Hero: Move left 5 pixels
+    EventEmitter->>SoundSystem: Play footstep sound
+    EventEmitter->>Camera: Follow hero
+    
+    Hero->>Hero: Update position
+    SoundSystem->>SoundSystem: Play audio
+    Camera->>Camera: Adjust viewport
+```
 
-> 💡 **نصيحة احترافية**: جمال هذا النمط هو المرونة! يمكنك بسهولة إضافة تأثيرات صوتية، اهتزاز الشاشة، أو تأثيرات الجسيمات ببساطة عن طريق إضافة المزيد من مستمعي الأحداث – لا حاجة لتعديل كود لوحة المفاتيح أو الحركة الحالي.
+> 💡 **نصيحة احترافية**: جمال هذا النمط هو المرونة! يمكنك بسهولة إضافة مؤثرات صوتية، اهتزاز الشاشة، أو تأثيرات الجسيمات ببساطة عن طريق إضافة المزيد من مستمعي الأحداث – لا حاجة لتعديل كود لوحة المفاتيح أو الحركة الحالي.
 > 
 **إليك لماذا ستحب هذا النهج:**
-- يصبح إضافة ميزات جديدة أمرًا سهلاً للغاية – فقط استمع للأحداث التي تهمك
-- يمكن لأشياء متعددة أن تتفاعل مع نفس الحدث دون التداخل مع بعضها البعض
+- يصبح إضافة ميزات جديدة أمرًا سهلاً للغاية – فقط استمع للأحداث التي تهتم بها
+- يمكن لأشياء متعددة الاستجابة لنفس الحدث دون التداخل مع بعضها البعض
 - يصبح الاختبار أسهل بكثير لأن كل جزء يعمل بشكل مستقل
 - عندما يحدث خطأ ما، تعرف بالضبط أين تبحث
 
 ### لماذا يتوسع Pub/Sub بشكل فعال
 
-يحافظ نمط pub/sub على البساطة مع نمو التطبيقات في التعقيد. سواء كان إدارة عشرات الأعداء، تحديثات واجهة المستخدم الديناميكية، أو أنظمة الصوت، يتعامل النمط مع زيادة الحجم دون تغييرات معمارية. تتكامل الميزات الجديدة مع نظام الأحداث الحالي دون التأثير على الوظائف القائمة.
+يحافظ نمط pub/sub على البساطة مع نمو التطبيقات في التعقيد. سواء كنت تدير عشرات الأعداء، تحديثات واجهة المستخدم الديناميكية، أو أنظمة الصوت، فإن النمط يتعامل مع زيادة الحجم دون تغييرات معمارية. تتكامل الميزات الجديدة مع نظام الأحداث الحالي دون التأثير على الوظائف القائمة.
 
-> ⚠️ **خطأ شائع**: لا تنشئ أنواع رسائل محددة جدًا في وقت مبكر. ابدأ بفئات واسعة وقم بتحسينها مع وضوح احتياجات لعبتك.
+> ⚠️ **خطأ شائع**: لا تنشئ الكثير من أنواع الرسائل المحددة في وقت مبكر. ابدأ بفئات واسعة وقم بتحسينها مع وضوح احتياجات لعبتك.
 > 
 **أفضل الممارسات التي يجب اتباعها:**
 - **تجميع** الرسائل ذات الصلة في فئات منطقية
@@ -336,21 +501,38 @@ window.addEventListener('keydown', (event) => {
 - **الحفاظ** على حمولات الرسائل بسيطة ومركزة
 - **توثيق** أنواع الرسائل للتعاون بين الفريق
 
+### 🔄 **تقييم تربوي**
+**فهم بنية الأحداث**: تحقق من فهمك للنظام الكامل:
+- ✅ كيف يمنع نمط pub/sub الارتباط الوثيق بين المكونات؟
+- ✅ لماذا يصبح من الأسهل إضافة ميزات جديدة مع بنية تعتمد على الأحداث؟
+- ✅ ما الدور الذي يلعبه EventEmitter في تدفق الاتصالات؟
+- ✅ كيف تمنع ثوابت الرسائل الأخطاء وتحسن قابلية الصيانة؟
+
+**تحدي التصميم**: كيف ستتعامل مع هذه السيناريوهات في اللعبة باستخدام pub/sub؟
+1. **موت العدو**: تحديث النقاط، تشغيل الصوت، ظهور المكافأة، الإزالة من الشاشة
+2. **إكمال المستوى**: إيقاف الموسيقى، عرض واجهة المستخدم، حفظ التقدم، تحميل المستوى التالي
+3. **جمع المكافأة**: تحسين القدرات، تحديث واجهة المستخدم، تشغيل التأثير، بدء المؤقت
+
+**اتصال مهني**: يظهر هذا النمط في:
+- **إطارات العمل الأمامية**: أنظمة الأحداث في React/Vue
+- **الخدمات الخلفية**: اتصالات الخدمات المصغرة
+- **محركات الألعاب**: نظام الأحداث في Unity
+- **تطوير الهواتف المحمولة**: أنظمة الإشعارات في iOS/Android
+
 ---
 
 ## تحدي GitHub Copilot Agent 🚀
 
-استخدم وضع Agent لإكمال التحدي التالي:
+استخدم وضع الوكيل لإكمال التحدي التالي:
 
 **الوصف:** قم بإنشاء نظام كائن لعبة بسيط باستخدام كل من الوراثة ونمط pub/sub. ستقوم بتنفيذ لعبة أساسية حيث يمكن للكائنات المختلفة التواصل من خلال الأحداث دون معرفة مباشرة ببعضها البعض.
 
-**المهمة:** قم بإنشاء نظام لعبة JavaScript مع المتطلبات التالية: 1) إنشاء فئة GameObject الأساسية مع إحداثيات x و y وخصائص النوع. 2) إنشاء فئة Hero التي تمد GameObject ويمكنها التحرك. 3) إنشاء فئة Enemy التي تمد GameObject ويمكنها مطاردة البطل. 4) تنفيذ فئة EventEmitter لنمط pub/sub. 5) إعداد مستمعي الأحداث بحيث عندما يتحرك البطل، يتلقى الأعداء القريبون حدث 'HERO_MOVED' ويحدثون موقعهم للتحرك نحو البطل. قم بتضمين عبارات console.log لإظهار التواصل بين الكائنات.
+**المهمة:** قم بإنشاء نظام لعبة JavaScript مع المتطلبات التالية: 1) إنشاء فئة GameObject الأساسية مع إحداثيات x و y وخصائص النوع. 2) إنشاء فئة Hero التي تمتد GameObject ويمكنها التحرك. 3) إنشاء فئة Enemy التي تمتد GameObject ويمكنها مطاردة البطل. 4) تنفيذ فئة EventEmitter لنمط pub/sub. 5) إعداد مستمعي الأحداث بحيث عندما يتحرك البطل، يتلقى الأعداء القريبون حدث 'HERO_MOVED' ويحدثون موقعهم للتحرك نحو البطل. قم بتضمين عبارات console.log لإظهار التواصل بين الكائنات.
 
 تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## 🚀 التحدي
-
-فكر في كيفية تحسين نمط pub-sub لهندسة اللعبة. حدد أي المكونات يجب أن ترسل الأحداث وكيف يجب أن يستجيب النظام. صمم مفهوم لعبة ورسم أنماط الاتصال بين مكوناتها.
+فكر في كيفية تحسين بنية الألعاب باستخدام نمط النشر والاشتراك. حدد أي المكونات يجب أن تصدر الأحداث وكيف يجب أن يستجيب النظام. قم بتصميم فكرة لعبة ورسم خريطة لأنماط التواصل بين مكوناتها.
 
 ## اختبار ما بعد المحاضرة
 
@@ -358,13 +540,127 @@ window.addEventListener('keydown', (event) => {
 
 ## المراجعة والدراسة الذاتية
 
-تعرف على المزيد حول Pub/Sub من خلال [قراءة المزيد عنه](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+تعرف على المزيد حول النشر والاشتراك من خلال [قراءة المزيد عنه](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] افتح أي لعبة HTML5 عبر الإنترنت وقم بفحص الكود الخاص بها باستخدام أدوات المطور
+- [ ] أنشئ عنصر HTML5 Canvas بسيط وارسم شكلاً أساسيًا
+- [ ] جرب استخدام `setInterval` لإنشاء حلقة رسوم متحركة بسيطة
+- [ ] استكشف وثائق Canvas API وجرب طريقة رسم
+
+### 🎯 **ما يمكنك إنجازه خلال هذه الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وافهم مفاهيم تطوير الألعاب
+- [ ] قم بإعداد هيكل مشروع لعبتك باستخدام ملفات HTML وCSS وJavaScript
+- [ ] أنشئ حلقة لعبة أساسية تقوم بالتحديث والعرض بشكل مستمر
+- [ ] ارسم أول شخصيات لعبتك على اللوحة
+- [ ] قم بتنفيذ تحميل الأصول الأساسية للصور والأصوات
+
+### 📅 **إنشاء لعبة خلال أسبوع**
+- [ ] أكمل لعبة الفضاء بالكامل مع جميع الميزات المخطط لها
+- [ ] أضف رسومات محسنة، مؤثرات صوتية، ورسوم متحركة سلسة
+- [ ] قم بتنفيذ حالات اللعبة (شاشة البداية، اللعب، نهاية اللعبة)
+- [ ] أنشئ نظام تسجيل النقاط وتتبع تقدم اللاعب
+- [ ] اجعل لعبتك متجاوبة وقابلة للوصول عبر الأجهزة المختلفة
+- [ ] شارك لعبتك عبر الإنترنت واجمع آراء اللاعبين
+
+### 🌟 **تطوير الألعاب خلال شهر**
+- [ ] قم بإنشاء ألعاب متعددة تستكشف أنواع وآليات مختلفة
+- [ ] تعلم إطار عمل لتطوير الألعاب مثل Phaser أو Three.js
+- [ ] ساهم في مشاريع تطوير الألعاب مفتوحة المصدر
+- [ ] أتقن أنماط البرمجة المتقدمة وتحسين الأداء
+- [ ] أنشئ ملفًا شخصيًا يعرض مهاراتك في تطوير الألعاب
+- [ ] قم بتوجيه الآخرين المهتمين بتطوير الألعاب والوسائط التفاعلية
+
+## 🎯 جدول زمني لإتقان تطوير الألعاب
+
+```mermaid
+timeline
+    title Game Architecture Learning Progression
+    
+    section Object Patterns (20 minutes)
+        Code Organization: Class inheritance
+                         : Composition patterns
+                         : Factory functions
+                         : Behavior mixing
+        
+    section Communication Systems (25 minutes)
+        Event Architecture: Pub/Sub implementation
+                          : Message design
+                          : Event emitters
+                          : Loose coupling
+        
+    section Game Object Design (30 minutes)
+        Entity Systems: Property management
+                      : Behavior composition
+                      : State handling
+                      : Lifecycle management
+        
+    section Architecture Patterns (35 minutes)
+        System Design: Component systems
+                     : Observer pattern
+                     : Command pattern
+                     : State machines
+        
+    section Advanced Concepts (45 minutes)
+        Scalable Architecture: Performance optimization
+                             : Memory management
+                             : Modular design
+                             : Testing strategies
+        
+    section Game Engine Concepts (1 week)
+        Professional Development: Scene graphs
+                                 : Asset management
+                                 : Rendering pipelines
+                                 : Physics integration
+        
+    section Framework Mastery (2 weeks)
+        Modern Game Development: React game patterns
+                               : Canvas optimization
+                               : WebGL basics
+                               : PWA games
+        
+    section Industry Practices (1 month)
+        Professional Skills: Team collaboration
+                           : Code reviews
+                           : Game design patterns
+                           : Performance profiling
+```
+
+### 🛠️ ملخص أدوات بنية الألعاب الخاصة بك
+
+بعد إكمال هذا الدرس، لديك الآن:
+- **إتقان أنماط التصميم**: فهم الموازنة بين الوراثة والتركيب
+- **بنية قائمة على الأحداث**: تنفيذ النشر والاشتراك لتواصل قابل للتوسع
+- **تصميم كائني التوجه**: تسلسل الفئات وتركيب السلوكيات
+- **JavaScript الحديثة**: وظائف المصنع، بناء الجملة المنتشر، وأنماط ES6+
+- **بنية قابلة للتوسع**: تصميم غير مترابط ومبادئ التصميم المعياري
+- **أساسيات تطوير الألعاب**: أنظمة الكيانات وأنماط المكونات
+- **أنماط احترافية**: طرق تنظيم الكود وفقًا للمعايير الصناعية
+
+**تطبيقات واقعية**: هذه الأنماط تنطبق مباشرة على:
+- **إطارات العمل الأمامية**: بنية المكونات وإدارة الحالة في React/Vue
+- **الخدمات الخلفية**: تواصل الخدمات المصغرة وأنظمة قائمة على الأحداث
+- **تطوير الهواتف المحمولة**: بنية تطبيقات iOS/Android وأنظمة الإشعارات
+- **محركات الألعاب**: Unity، Unreal، وتطوير الألعاب عبر الويب
+- **برامج المؤسسات**: تصميم أنظمة الأحداث الموزعة
+- **تصميم واجهات برمجة التطبيقات**: خدمات RESTful والتواصل في الوقت الفعلي
+
+**مهارات احترافية مكتسبة**: يمكنك الآن:
+- **تصميم** بنى برمجية قابلة للتوسع باستخدام أنماط مثبتة
+- **تنفيذ** أنظمة قائمة على الأحداث تتعامل مع تفاعلات معقدة
+- **اختيار** استراتيجيات تنظيم الكود المناسبة لسيناريوهات مختلفة
+- **تصحيح الأخطاء** وصيانة الأنظمة غير المترابطة بفعالية
+- **التواصل** حول القرارات التقنية باستخدام مصطلحات معيارية صناعية
+
+**المستوى التالي**: أنت جاهز لتنفيذ هذه الأنماط في لعبة حقيقية، استكشاف مواضيع تطوير الألعاب المتقدمة، أو تطبيق هذه المفاهيم المعمارية على تطبيقات الويب!
+
+🌟 **إنجاز محقق**: لقد أتقنت أنماط بنية البرمجيات الأساسية التي تدعم كل شيء من الألعاب البسيطة إلى أنظمة المؤسسات المعقدة!
 
-## الواجب
+## المهمة
 
 [تصميم لعبة](assignment.md)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/6-space-game/2-drawing-to-canvas/README.md b/translations/ar/6-space-game/2-drawing-to-canvas/README.md
index c694ef0d7b..01bf3a8d4a 100644
--- a/translations/ar/6-space-game/2-drawing-to-canvas/README.md
+++ b/translations/ar/6-space-game/2-drawing-to-canvas/README.md
@@ -1,33 +1,80 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "84053695dca714e16ed064366503ebd5",
-  "translation_date": "2025-10-22T14:25:52+00:00",
+  "original_hash": "7994743c5b21fdcceb36307916ef249a",
+  "translation_date": "2025-11-03T12:44:43+00:00",
   "source_file": "6-space-game/2-drawing-to-canvas/README.md",
   "language_code": "ar"
 }
 -->
 # بناء لعبة فضاء الجزء الثاني: رسم البطل والوحوش على اللوحة
 
+```mermaid
+journey
+    title Your Canvas Graphics Journey
+    section Foundation
+      Understand Canvas API: 3: Student
+      Learn coordinate system: 4: Student
+      Draw basic shapes: 4: Student
+    section Image Handling
+      Load game assets: 4: Student
+      Handle async loading: 5: Student
+      Position sprites: 5: Student
+    section Game Rendering
+      Create game screen: 5: Student
+      Build formations: 5: Student
+      Optimize performance: 4: Student
+```
+
 تُعد واجهة برمجة التطبيقات الخاصة بـ Canvas واحدة من أقوى ميزات تطوير الويب لإنشاء رسومات ديناميكية وتفاعلية مباشرة في متصفحك. في هذا الدرس، سنحوّل عنصر HTML `<canvas>` الفارغ إلى عالم لعبة مليء بالأبطال والوحوش. فكر في اللوحة كلوحة فنية رقمية حيث يتحول الكود إلى صورة.
 
 نحن نبني على ما تعلمته في الدرس السابق، والآن سنتعمق في الجوانب البصرية. ستتعلم كيفية تحميل وعرض صور اللعبة، وضع العناصر بدقة، وإنشاء الأساس البصري للعبة الفضاء الخاصة بك. هذا يربط بين صفحات الويب الثابتة والتجارب الديناميكية والتفاعلية.
 
 بنهاية هذا الدرس، سيكون لديك مشهد لعبة كامل مع سفينة البطل في موقعها الصحيح وتشكيلات الأعداء جاهزة للمعركة. ستفهم كيف تقوم الألعاب الحديثة بعرض الرسومات في المتصفحات وستكتسب مهارات لإنشاء تجارب بصرية تفاعلية خاصة بك. دعونا نستكشف رسومات اللوحة ونُحيي لعبة الفضاء الخاصة بك!
 
-## اختبار ما قبل المحاضرة
+```mermaid
+mindmap
+  root((Canvas Graphics))
+    Canvas Element
+      HTML5 Feature
+      2D Context
+      Coordinate System
+      Pixel Control
+    Drawing Operations
+      Basic Shapes
+      Text Rendering
+      Image Display
+      Path Drawing
+    Asset Management
+      Image Loading
+      Async Operations
+      Error Handling
+      Performance
+    Game Rendering
+      Sprite Positioning
+      Formation Layout
+      Scene Composition
+      Frame Updates
+    Visual Effects
+      Colors & Styles
+      Transformations
+      Animations
+      Layering
+```
+
+## اختبار ما قبل الدرس
 
-[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/31)
+[اختبار ما قبل الدرس](https://ff-quizzes.netlify.app/web/quiz/31)
 
 ## اللوحة
 
 ما هو بالضبط عنصر `<canvas>`؟ إنه حل HTML5 لإنشاء رسومات ديناميكية ورسوم متحركة في متصفحات الويب. على عكس الصور أو الفيديوهات العادية التي تكون ثابتة، تمنحك اللوحة التحكم على مستوى البكسل في كل ما يظهر على الشاشة. هذا يجعلها مثالية للألعاب، التصورات البيانية، والفن التفاعلي. فكر فيها كسطح رسم قابل للبرمجة حيث يصبح JavaScript فرشاة الرسم الخاصة بك.
 
-بشكل افتراضي، يظهر عنصر اللوحة كأنه مستطيل فارغ وشفاف على صفحتك. لكن هنا تكمن الإمكانيات! تظهر قوتها الحقيقية عندما تستخدم JavaScript لرسم الأشكال، تحميل الصور، إنشاء الرسوم المتحركة، وجعل الأشياء تستجيب لتفاعلات المستخدم. يشبه ذلك الطريقة التي كان رواد الرسومات الحاسوبية في مختبرات Bell في الستينيات يبرمجون كل بكسل لإنشاء الرسوم المتحركة الرقمية الأولى.
+بشكل افتراضي، يظهر عنصر اللوحة كأنه مستطيل فارغ وشفاف على صفحتك. لكن هنا تكمن الإمكانيات! تظهر قوتها الحقيقية عندما تستخدم JavaScript لرسم الأشكال، تحميل الصور، إنشاء الرسوم المتحركة، وجعل الأشياء تستجيب لتفاعلات المستخدم. إنها مشابهة للطريقة التي كان رواد الرسومات الحاسوبية في Bell Labs في الستينيات يبرمجون بها كل بكسل لإنشاء أول الرسوم المتحركة الرقمية.
 
-✅ اقرأ [المزيد عن واجهة برمجة التطبيقات الخاصة باللوحة](https://developer.mozilla.org/docs/Web/API/Canvas_API) على MDN.
+✅ اقرأ [المزيد عن واجهة برمجة تطبيقات Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) على MDN.
 
-هكذا يتم عادةً إعلانها كجزء من جسم الصفحة:
+إليك كيف يتم إعلانها عادةً كجزء من جسم الصفحة:
 
 ```html
 <canvas id="myCanvas" width="200" height="100"></canvas>
@@ -35,25 +82,63 @@ CO_OP_TRANSLATOR_METADATA:
 
 **ما الذي يفعله هذا الكود:**
 - **يحدد** خاصية `id` حتى تتمكن من الإشارة إلى هذا العنصر المحدد في JavaScript
-- **يحدد** العرض بالبكسل للتحكم في حجم اللوحة الأفقي
+- **يعين** العرض بالبكسل للتحكم في حجم اللوحة الأفقي
 - **يحدد** الارتفاع بالبكسل لتحديد أبعاد اللوحة العمودية
 
 ## رسم أشكال هندسية بسيطة
 
-الآن بعد أن تعرفت على عنصر اللوحة، دعنا نستكشف كيفية الرسم عليه! تستخدم اللوحة نظام إحداثيات قد يبدو مألوفًا من دروس الرياضيات، ولكن هناك نقطة مهمة تختلف عن الرسومات الحاسوبية.
+الآن بعد أن تعرفت على عنصر اللوحة، دعنا نستكشف كيفية الرسم عليها فعليًا! تستخدم اللوحة نظام إحداثيات قد يبدو مألوفًا من دروس الرياضيات، ولكن هناك لمسة مهمة خاصة بالرسومات الحاسوبية.
 
 تستخدم اللوحة إحداثيات ديكارتية مع محور x (أفقي) ومحور y (عمودي) لتحديد موضع كل ما ترسمه. ولكن هنا الفرق الرئيسي: على عكس نظام الإحداثيات في الرياضيات، تبدأ نقطة الأصل `(0,0)` في الزاوية العلوية اليسرى، مع زيادة قيم x عند التحرك يمينًا وزيادة قيم y عند التحرك للأسفل. هذا النهج يعود إلى شاشات الكمبيوتر المبكرة حيث كانت أشعة الإلكترون تمسح من الأعلى إلى الأسفل، مما يجعل الزاوية العلوية اليسرى نقطة البداية الطبيعية.
 
+```mermaid
+quadrantChart
+    title Canvas Coordinate System
+    x-axis Left --> Right
+    y-axis Top --> Bottom
+    quadrant-1 Quadrant 1
+    quadrant-2 Quadrant 2  
+    quadrant-3 Quadrant 3
+    quadrant-4 Quadrant 4
+    
+    Origin Point: [0.1, 0.1]
+    Hero Center: [0.5, 0.8]
+    Enemy Formation: [0.3, 0.2]
+    Power-up: [0.7, 0.6]
+    UI Elements: [0.9, 0.1]
+```
+
 ![شبكة اللوحة](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ar.png)
 > الصورة من [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
 
 لترسم على عنصر اللوحة، ستتبع نفس العملية المكونة من ثلاث خطوات التي تشكل أساس جميع رسومات اللوحة. بمجرد القيام بذلك عدة مرات، يصبح الأمر طبيعيًا:
 
-1. **الحصول على مرجع** لعنصر اللوحة الخاص بك من DOM (مثل أي عنصر HTML آخر)
-2. **الحصول على سياق الرسم ثنائي الأبعاد** – هذا يوفر جميع طرق الرسم
+```mermaid
+flowchart LR
+    A[HTML Canvas Element] --> B[Get Canvas Reference]
+    B --> C[Get 2D Context]
+    C --> D[Drawing Operations]
+    
+    D --> E[Draw Shapes]
+    D --> F[Draw Text]
+    D --> G[Draw Images]
+    D --> H[Apply Styles]
+    
+    E --> I[Render to Screen]
+    F --> I
+    G --> I
+    H --> I
+    
+    style A fill:#e1f5fe
+    style C fill:#e8f5e8
+    style I fill:#fff3e0
+```
+
+1. **احصل على مرجع** لعنصر اللوحة الخاص بك من DOM (مثل أي عنصر HTML آخر)
+2. **احصل على سياق الرسم ثنائي الأبعاد** – هذا يوفر جميع طرق الرسم
 3. **ابدأ الرسم!** استخدم الطرق المدمجة في السياق لإنشاء رسوماتك
 
-هكذا يبدو ذلك في الكود:
+إليك كيف يبدو هذا في الكود:
 
 ```javascript
 // Step 1: Get the canvas element
@@ -67,29 +152,68 @@ ctx.fillStyle = 'red';
 ctx.fillRect(0, 0, 200, 200); // x, y, width, height
 ```
 
-**دعونا نوضح هذا خطوة بخطوة:**
+**دعنا نوضح هذا خطوة بخطوة:**
 - نحن **نحصل** على عنصر اللوحة باستخدام معرفه ونخزنه في متغير
-- نحن **نحصل** على سياق الرسم ثنائي الأبعاد – هذا هو صندوق الأدوات المليء بطرق الرسم
+- نحن **نحصل** على سياق الرسم ثنائي الأبعاد – هذه هي أدواتنا المليئة بطرق الرسم
 - نحن **نخبر** اللوحة أننا نريد ملء الأشياء باللون الأحمر باستخدام خاصية `fillStyle`
 - نحن **نرسم** مستطيلًا يبدأ من الزاوية العلوية اليسرى (0,0) بعرض وارتفاع 200 بكسل
 
-✅ تركز واجهة برمجة التطبيقات الخاصة باللوحة بشكل أساسي على الأشكال ثنائية الأبعاد، ولكن يمكنك أيضًا رسم عناصر ثلاثية الأبعاد على موقع ويب؛ لهذا، قد تستخدم [واجهة برمجة تطبيقات WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+✅ تركز واجهة برمجة تطبيقات Canvas بشكل أساسي على الأشكال ثنائية الأبعاد، ولكن يمكنك أيضًا رسم عناصر ثلاثية الأبعاد على موقع ويب؛ لهذا، قد تستخدم [واجهة برمجة تطبيقات WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
 
-يمكنك رسم العديد من الأشياء باستخدام واجهة برمجة التطبيقات الخاصة باللوحة مثل:
+يمكنك رسم جميع أنواع الأشياء باستخدام واجهة برمجة تطبيقات Canvas مثل:
 
 - **الأشكال الهندسية**، لقد أظهرنا بالفعل كيفية رسم مستطيل، ولكن هناك المزيد مما يمكنك رسمه.
 - **النصوص**، يمكنك رسم نص بأي خط ولون ترغب فيه.
 - **الصور**، يمكنك رسم صورة بناءً على أصل صورة مثل .jpg أو .png على سبيل المثال.
 
-✅ جربها! تعرف كيفية رسم مستطيل، هل يمكنك رسم دائرة على الصفحة؟ ألقِ نظرة على بعض الرسومات المثيرة للاهتمام باستخدام اللوحة على CodePen. إليك [مثال مثير للإعجاب](https://codepen.io/dissimulate/pen/KrAwx).
+✅ جربها! أنت تعرف كيفية رسم مستطيل، هل يمكنك رسم دائرة على الصفحة؟ ألقِ نظرة على بعض رسومات اللوحة المثيرة للاهتمام على CodePen. إليك [مثال مثير للإعجاب](https://codepen.io/dissimulate/pen/KrAwx).
 
-## تحميل ورسم أصل صورة
+### 🔄 **مراجعة تربوية**
+**فهم أساسيات اللوحة**: قبل الانتقال إلى تحميل الصور، تأكد من أنك تستطيع:
+- ✅ شرح كيف يختلف نظام إحداثيات اللوحة عن الإحداثيات الرياضية
+- ✅ فهم العملية المكونة من ثلاث خطوات لعمليات الرسم على اللوحة
+- ✅ تحديد ما يوفره سياق الرسم ثنائي الأبعاد
+- ✅ وصف كيف تعمل fillStyle و fillRect معًا
 
-رسم الأشكال الأساسية مفيد للبدء، ولكن معظم الألعاب تحتاج إلى صور فعلية! الصور الرمزية، الخلفيات، والقوام هي ما يمنح الألعاب جاذبيتها البصرية. يختلف تحميل وعرض الصور على اللوحة عن رسم الأشكال الهندسية، ولكنه بسيط بمجرد فهم العملية.
+**اختبار ذاتي سريع**: كيف يمكنك رسم دائرة زرقاء في الموضع (100, 50) بنصف قطر 25؟
+```javascript
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(100, 50, 25, 0, 2 * Math.PI);
+ctx.fill();
+```
 
-نحتاج إلى إنشاء كائن `Image`، تحميل ملف الصورة الخاص بنا (يحدث هذا بشكل غير متزامن، بمعنى "في الخلفية")، ثم رسمه على اللوحة بمجرد أن يكون جاهزًا. يضمن هذا النهج عرض الصور بشكل صحيح دون تعطيل التطبيق أثناء تحميلها.
+**طرق الرسم على اللوحة التي تعرفها الآن**:
+- **fillRect()**: يرسم مستطيلات مملوءة
+- **fillStyle**: يحدد الألوان والأنماط
+- **beginPath()**: يبدأ مسارات رسم جديدة
+- **arc()**: ينشئ دوائر ومنحنيات
+
+## تحميل ورسم صورة
+
+رسم الأشكال الأساسية مفيد للبدء، ولكن معظم الألعاب تحتاج إلى صور فعلية! الصور، الخلفيات، والقوام هي ما يمنح الألعاب جاذبيتها البصرية. يختلف تحميل وعرض الصور على اللوحة عن رسم الأشكال الهندسية، ولكنه بسيط بمجرد فهم العملية.
+
+نحتاج إلى إنشاء كائن `Image`، تحميل ملف الصورة الخاص بنا (يحدث هذا بشكل غير متزامن، مما يعني "في الخلفية")، ثم رسمه على اللوحة بمجرد أن يصبح جاهزًا. يضمن هذا النهج عرض الصور بشكل صحيح دون تعطيل التطبيق أثناء تحميلها.
+
+```mermaid
+sequenceDiagram
+    participant JS as JavaScript
+    participant Img as Image Object
+    participant Server as File Server
+    participant Canvas as Canvas Context
+    
+    JS->>Img: new Image()
+    JS->>Img: Set src property
+    Img->>Server: Request image file
+    Server->>Img: Return image data
+    Img->>JS: Trigger onload event
+    JS->>Canvas: drawImage(img, x, y)
+    Canvas->>Canvas: Render to screen
+    
+    Note over JS,Canvas: Async loading prevents UI blocking
+```
 
-### تحميل الصور الأساسي
+### تحميل الصور الأساسية
 
 ```javascript
 const img = new Image();
@@ -101,13 +225,13 @@ img.onload = () => {
 ```
 
 **ما الذي يحدث في هذا الكود:**
-- نحن **ننشئ** كائن صورة جديد تمامًا لحفظ الصورة الرمزية أو القوام
-- نحن **نخبره** أي ملف صورة يجب تحميله عن طريق تحديد مسار المصدر
+- نحن **ننشئ** كائن صورة جديد تمامًا لحفظ الصورة أو القوام
+- نحن **نخبره** أي ملف صورة يجب تحميله عن طريق تعيين مسار المصدر
 - نحن **نستمع** لحدث التحميل حتى نعرف بالضبط متى تكون الصورة جاهزة للاستخدام
 
 ### طريقة أفضل لتحميل الصور
 
-إليك طريقة أكثر قوة للتعامل مع تحميل الصور يستخدمها المطورون المحترفون عادةً. سنقوم بتغليف منطق تحميل الصور في وظيفة تعتمد على الوعد – هذا النهج، الذي أصبح شائعًا عندما أصبحت وعود JavaScript معيارًا في ES6، يجعل الكود الخاص بك أكثر تنظيمًا ويتعامل مع الأخطاء بشكل أنيق:
+إليك طريقة أكثر قوة للتعامل مع تحميل الصور يستخدمها المطورون المحترفون عادةً. سنقوم بتغليف تحميل الصور في وظيفة تعتمد على Promise – هذا النهج، الذي أصبح شائعًا عندما أصبحت Promises معيارًا في ES6، يجعل الكود الخاص بك أكثر تنظيمًا ويتعامل مع الأخطاء بشكل أنيق:
 
 ```javascript
 function loadAsset(path) {
@@ -136,10 +260,10 @@ async function initializeGame() {
 ```
 
 **ما الذي قمنا به هنا:**
-- **غلفنا** كل منطق تحميل الصور في وعد حتى نتمكن من التعامل معه بشكل أفضل
+- **غلفنا** كل منطق تحميل الصور في Promise حتى نتمكن من التعامل معه بشكل أفضل
 - **أضفنا** معالجة الأخطاء التي تخبرنا فعليًا عندما يحدث خطأ ما
 - **استخدمنا** بناء الجملة الحديث async/await لأنه أكثر وضوحًا للقراءة
-- **أدرجنا** كتل try/catch للتعامل بشكل أنيق مع أي مشاكل في التحميل
+- **أدرجنا** كتل try/catch للتعامل مع أي مشاكل تحميل بشكل أنيق
 
 بمجرد تحميل الصور الخاصة بك، فإن رسمها على اللوحة يكون في الواقع بسيطًا جدًا:
 
@@ -163,32 +287,57 @@ async function renderGameScreen() {
 }
 ```
 
-**دعونا نوضح هذا خطوة بخطوة:**
+**دعنا نوضح هذا خطوة بخطوة:**
 - نحن **نحمل** صور البطل والوحش في الخلفية باستخدام await
 - نحن **نحصل** على عنصر اللوحة ونحصل على سياق الرسم ثنائي الأبعاد الذي نحتاجه
-- نحن **نضع** صورة البطل في المنتصف باستخدام بعض الرياضيات السريعة للإحداثيات
+- نحن **نضع** صورة البطل في المركز باستخدام بعض الرياضيات السريعة للإحداثيات
 - نحن **نضع** صورة الوحش في الزاوية العلوية اليسرى لبدء تشكيل الأعداء
 - نحن **نلتقط** أي أخطاء قد تحدث أثناء التحميل أو العرض
 
+```mermaid
+flowchart TD
+    A[Load Assets] --> B{All Images Loaded?}
+    B -->|No| C[Show Loading]
+    B -->|Yes| D[Get Canvas Context]
+    C --> B
+    D --> E[Clear Screen]
+    E --> F[Draw Background]
+    F --> G[Draw Enemy Formation]
+    G --> H[Draw Hero Ship]
+    H --> I[Apply Visual Effects]
+    I --> J[Render Frame]
+    
+    subgraph "Rendering Pipeline"
+        K[Asset Management]
+        L[Scene Composition]
+        M[Drawing Operations]
+        N[Frame Output]
+    end
+    
+    style A fill:#e1f5fe
+    style J fill:#e8f5e8
+    style I fill:#fff3e0
+```
+
 ## الآن حان الوقت لبدء بناء لعبتك
 
 الآن سنجمع كل شيء معًا لإنشاء الأساس البصري للعبة الفضاء الخاصة بك. لديك فهم قوي لأساسيات اللوحة وتقنيات تحميل الصور، لذا فإن هذا القسم العملي سيرشدك خلال بناء شاشة لعبة كاملة مع صور موضوعة بشكل صحيح.
 
 ### ما الذي ستبنيه
 
-ستقوم ببناء صفحة ويب تحتوي على عنصر لوحة. يجب أن تعرض شاشة سوداء `1024*768`. لقد وفرنا لك صورتين:
+ستقوم ببناء صفحة ويب تحتوي على عنصر Canvas. يجب أن تعرض شاشة سوداء `1024*768`. لقد وفرنا لك صورتين:
 
 - سفينة البطل
 
    ![سفينة البطل](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ar.png)
 
-- 5*5 وحوش
+- 5*5 وحش
 
    ![سفينة الوحش](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ar.png)
 
 ### الخطوات الموصى بها لبدء التطوير
 
-حدد ملفات البداية التي تم إنشاؤها لك في مجلد `your-work`. يجب أن يحتوي هيكل المشروع الخاص بك على:
+حدد ملفات البداية التي تم إنشاؤها لك في مجلد `your-work`. يجب أن تحتوي بنية المشروع الخاصة بك على:
 
 ```bash
 your-work/
@@ -206,9 +355,9 @@ your-work/
 - **ملف JavaScript** حيث ستكتب كل سحر عرض اللعبة الخاص بك
 - **ملف package.json** الذي يجهز خادم تطوير حتى تتمكن من الاختبار محليًا
 
-افتح هذا المجلد في Visual Studio Code لبدء التطوير. ستحتاج إلى بيئة تطوير محلية مع Visual Studio Code، NPM، وNode.js مثبتة. إذا لم يكن لديك `npm` مثبتًا على جهاز الكمبيوتر الخاص بك، [إليك كيفية تثبيته](https://www.npmjs.com/get-npm).
+افتح هذا المجلد في Visual Studio Code لبدء التطوير. ستحتاج إلى بيئة تطوير محلية مع Visual Studio Code، NPM، و Node.js مثبتة. إذا لم يكن لديك `npm` مثبتًا على جهاز الكمبيوتر الخاص بك، [إليك كيفية تثبيته](https://www.npmjs.com/get-npm).
 
-ابدأ خادم التطوير الخاص بك بالتنقل إلى مجلد `your-work`:
+ابدأ خادم التطوير الخاص بك عن طريق الانتقال إلى مجلد `your-work`:
 
 ```bash
 cd your-work
@@ -221,23 +370,23 @@ npm start
 - **يراقب** ملفاتك للتغييرات حتى تتمكن من التطوير بسلاسة
 - **يوفر لك** بيئة تطوير احترافية لاختبار كل شيء
 
-> 💡 **ملاحظة**: سيعرض متصفحك صفحة فارغة في البداية – هذا متوقع! أثناء إضافة الكود، قم بتحديث متصفحك لرؤية التغييرات. هذا النهج التطويري التكراري مشابه للطريقة التي بنت بها ناسا كمبيوتر التوجيه الخاص بأبولو – اختبار كل مكون قبل دمجه في النظام الأكبر.
+> 💡 **ملاحظة**: سيعرض متصفحك صفحة فارغة في البداية – هذا متوقع! أثناء إضافة الكود، قم بتحديث المتصفح لرؤية التغييرات. هذا النهج التطويري التكراري مشابه للطريقة التي بنت بها ناسا كمبيوتر التوجيه الخاص بأبولو – اختبار كل مكون قبل دمجه في النظام الأكبر.
 
-### إضافة الكود
+### أضف الكود
 
 أضف الكود المطلوب إلى `your-work/app.js` لإكمال المهام التالية:
 
-1. **رسم لوحة بخلفية سوداء**
-   > 💡 **كيف**: ابحث عن TODO في `/app.js` وأضف سطرين فقط. قم بتعيين `ctx.fillStyle` إلى الأسود، ثم استخدم `ctx.fillRect()` بدءًا من (0,0) بأبعاد اللوحة الخاصة بك. سهل!
+1. **ارسم لوحة بخلفية سوداء**
+   > 💡 **إليك الطريقة**: ابحث عن TODO في `/app.js` وأضف سطرين فقط. قم بتعيين `ctx.fillStyle` إلى الأسود، ثم استخدم `ctx.fillRect()` بدءًا من (0,0) بأبعاد اللوحة الخاصة بك. سهل!
 
 2. **تحميل قوام اللعبة**
-   > 💡 **كيف**: استخدم `await loadAsset()` لتحميل صور اللاعب والعدو. قم بتخزينها في متغيرات حتى تتمكن من استخدامها لاحقًا. تذكر – لن تظهر حتى تقوم برسمها فعليًا!
+   > 💡 **إليك الطريقة**: استخدم `await loadAsset()` لتحميل صور اللاعب والعدو. قم بتخزينها في متغيرات حتى تتمكن من استخدامها لاحقًا. تذكر – لن تظهر حتى تقوم برسمها فعليًا!
 
-3. **رسم سفينة البطل في المركز السفلي**
-   > 💡 **كيف**: استخدم `ctx.drawImage()` لوضع البطل. بالنسبة للإحداثي x، جرب `canvas.width / 2 - 45` لتوسيطه، وبالنسبة للإحداثي y استخدم `canvas.height - canvas.height / 4` لوضعه في المنطقة السفلية.
+3. **ارسم سفينة البطل في الموضع السفلي الأوسط**
+   > 💡 **إليك الطريقة**: استخدم `ctx.drawImage()` لوضع البطل. بالنسبة للإحداثي x، جرب `canvas.width / 2 - 45` لتوسيطه، وبالنسبة للإحداثي y استخدم `canvas.height - canvas.height / 4` لوضعه في المنطقة السفلية.
 
-4. **رسم تشكيل 5×5 من سفن الأعداء**
-   > 💡 **كيف**: ابحث عن وظيفة `createEnemies` وقم بإعداد حلقة متداخلة. ستحتاج إلى القيام ببعض الرياضيات للتباعد والتموضع، ولكن لا تقلق – سأريك بالضبط كيف!
+4. **ارسم تشكيلًا من 5×5 سفن الأعداء**
+   > 💡 **إليك الطريقة**: ابحث عن وظيفة `createEnemies` وقم بإعداد حلقة متداخلة. ستحتاج إلى القيام ببعض الرياضيات للتباعد والتموضع، ولكن لا تقلق – سأريك بالضبط كيف!
 
 أولاً، قم بتحديد الثوابت لتخطيط تشكيل الأعداء بشكل صحيح:
 
@@ -249,11 +398,38 @@ const START_X = (canvas.width - FORMATION_WIDTH) / 2;
 const STOP_X = START_X + FORMATION_WIDTH;
 ```
 
-**دعونا نوضح ما تفعله هذه الثوابت:**
+**دعنا نوضح ما تفعله هذه الثوابت:**
 - نحن **نحدد** 5 أعداء لكل صف وعمود (شبكة جميلة 5×5)
-- نحن **نحدد** مقدار المسافة بين الأعداء حتى لا يظهروا مزدحمين
+- نحن **نحدد** مقدار المسافة بين الأعداء حتى لا تبدو مزدحمة
 - نحن **نحسب** عرض التشكيل بالكامل
-- نحن **نحدد** مكان البدء والتوقف حتى يبدو التشكيل مركزيًا
+- نحن **نحدد** مكان البدء والانتهاء حتى يبدو التشكيل مركزيًا
+
+```mermaid
+flowchart LR
+    A["Canvas Width: 1024px"] --> B["Formation Width: 490px"]
+    B --> C["Start X: 267px"]
+    C --> D["Enemy Spacing: 98px"]
+    
+    subgraph "5x5 Enemy Formation"
+        E["Row 1: Y=0"]
+        F["Row 2: Y=50"]
+        G["Row 3: Y=100"]
+        H["Row 4: Y=150"]
+        I["Row 5: Y=200"]
+    end
+    
+    subgraph "Column Spacing"
+        J["Col 1: X=267"]
+        K["Col 2: X=365"]
+        L["Col 3: X=463"]
+        M["Col 4: X=561"]
+        N["Col 5: X=659"]
+    end
+    
+    style A fill:#e1f5fe
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+```
 
 ثم، قم بإنشاء حلقات متداخلة لرسم تشكيل الأعداء:
 
@@ -268,46 +444,175 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
 **ما الذي تفعله هذه الحلقة المتداخلة:**
 - الحلقة الخارجية **تتحرك** من اليسار إلى اليمين عبر تشكيلنا
 - الحلقة الداخلية **تذهب** من الأعلى إلى الأسفل لإنشاء صفوف مرتبة
-- نحن **نرسم** كل صورة عدو عند الإحداثيات x,y التي حسبناها
+- نحن **نرسم** كل صورة عدو في الإحداثيات x,y التي حسبناها
 - كل شيء يبقى **متباعدًا بشكل متساوٍ** حتى يبدو احترافيًا ومنظمًا
 
-## النتيجة
+### 🔄 **مراجعة تربوية**
+**إتقان عرض اللعبة**: تحقق من فهمك لنظام العرض الكامل:
+- ✅ كيف يمنع تحميل الصور غير المتزامن حجب واجهة المستخدم أثناء بدء تشغيل اللعبة؟
+- ✅ لماذا نحسب مواضع تشكيل الأعداء باستخدام الثو
+- **أنظمة الإحداثيات**: تحويل الرياضيات إلى مواقع على الشاشة  
+- **إدارة الصور المتحركة**: تحميل وعرض الرسومات في الألعاب  
+- **خوارزميات التشكيل**: أنماط رياضية لتصميم تخطيطات منظمة  
+- **العمليات غير المتزامنة**: استخدام JavaScript الحديث لتجربة مستخدم سلسة  
 
-يجب أن تبدو النتيجة النهائية كما يلي:
+## النتيجة  
 
-![شاشة سوداء مع بطل و5×5 وحوش](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ar.png)
+يجب أن تبدو النتيجة النهائية كما يلي:  
 
-## الحل
+![شاشة سوداء مع بطل و5*5 وحوش](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ar.png)  
 
-يرجى محاولة حلها بنفسك أولاً ولكن إذا واجهت صعوبة، يمكنك الاطلاع على [الحل](../../../../6-space-game/2-drawing-to-canvas/solution/app.js)
+## الحل  
 
----
-
-## تحدي GitHub Copilot Agent 🚀
-
-استخدم وضع الوكيل لإكمال التحدي التالي:
-
-**الوصف:** قم بتحسين لوحة لعبة الفضاء الخاصة بك عن طريق إضافة تأثيرات بصرية وعناصر تفاعلية باستخدام تقنيات واجهة برمجة التطبيقات الخاصة باللوحة التي تعلمتها.
-
-**المهمة:** قم بإنشاء ملف جديد يسمى `enhanced-canvas.html` يحتوي على لوحة تعرض نجومًا متحركة في الخلفية، شريط صحة نابض لسفينة البطل، وسفن الأعداء التي تتحرك ببطء نحو الأسفل. قم بتضمين كود JavaScript يرسم نجومًا متلألئة باستخدام مواقع عشوائية وشفافية، ينفذ شريط صحة يتغير لونه بناءً على مستوى الصحة (أخضر > أصفر > أحمر)، ويقوم بتحريك سفن الأعداء للنزول على الشاشة بسرعات مختلفة.
-
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
-
-## 🚀 التحدي
+حاول حلها بنفسك أولاً، ولكن إذا واجهت صعوبة، يمكنك الاطلاع على [الحل](../../../../6-space-game/2-drawing-to-canvas/solution/app.js)  
 
-لقد تعلمت عن الرسم باستخدام واجهة برمجة التطبيقات الخاصة باللوحة ثنائية الأبعاد؛ ألقِ نظرة على [واجهة برمجة التطبيقات الخاصة بـ WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API)، وحاول رسم كائن ثلاثي الأبعاد.
-
-## اختبار ما بعد المحاضرة
-
-[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/32)
-
-## المراجعة والدراسة الذاتية
-
-تعرف على المزيد حول واجهة برمجة التطبيقات الخاصة باللوحة من خلال [قراءتها](https://developer.mozilla.org/docs/Web/API/Canvas_API).
-
-## الواجب
+---
 
-[العب مع واجهة برمجة التطبيقات الخاصة باللوحة](assignment.md)
+## تحدي GitHub Copilot Agent 🚀  
+
+استخدم وضع الوكيل لإكمال التحدي التالي:  
+
+**الوصف:** قم بتحسين لوحة لعبة الفضاء الخاصة بك عن طريق إضافة تأثيرات بصرية وعناصر تفاعلية باستخدام تقنيات Canvas API التي تعلمتها.  
+
+**المهمة:** قم بإنشاء ملف جديد يسمى `enhanced-canvas.html` يحتوي على لوحة تعرض نجومًا متحركة في الخلفية، شريط صحة نابض لسفينة البطل، وسفن الأعداء التي تتحرك ببطء نحو الأسفل. قم بتضمين كود JavaScript يرسم نجومًا متلألئة باستخدام مواقع وألوان عشوائية، ينفذ شريط صحة يتغير لونه بناءً على مستوى الصحة (أخضر > أصفر > أحمر)، ويقوم بتحريك سفن الأعداء لتتحرك نحو الأسفل بسرعات مختلفة.  
+
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.  
+
+## 🚀 التحدي  
+
+لقد تعلمت كيفية الرسم باستخدام Canvas API المخصص للرسومات ثنائية الأبعاد؛ ألقِ نظرة على [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)، وحاول رسم كائن ثلاثي الأبعاد.  
+
+## اختبار ما بعد المحاضرة  
+
+[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/32)  
+
+## المراجعة والدراسة الذاتية  
+
+تعرف على المزيد حول Canvas API من خلال [قراءة المزيد عنه](https://developer.mozilla.org/docs/Web/API/Canvas_API).  
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**  
+- [ ] افتح وحدة التحكم في المتصفح وأنشئ عنصر لوحة باستخدام `document.createElement('canvas')`  
+- [ ] حاول رسم مستطيل باستخدام `fillRect()` على سياق اللوحة  
+- [ ] جرب ألوانًا مختلفة باستخدام خاصية `fillStyle`  
+- [ ] ارسم دائرة بسيطة باستخدام طريقة `arc()`  
+
+### 🎯 **ما يمكنك تحقيقه خلال هذه الساعة**  
+- [ ] أكمل اختبار ما بعد الدرس وافهم أساسيات اللوحة  
+- [ ] أنشئ تطبيق رسم على اللوحة يحتوي على أشكال وألوان متعددة  
+- [ ] قم بتنفيذ تحميل الصور وعرض الصور المتحركة للعبة الخاصة بك  
+- [ ] أنشئ حركة بسيطة تحرك الكائنات عبر اللوحة  
+- [ ] مارس تحويلات اللوحة مثل التكبير، الدوران، والترجمة  
+
+### 📅 **رحلتك الأسبوعية مع اللوحة**  
+- [ ] أكمل لعبة الفضاء برسومات محسنة وصور متحركة  
+- [ ] أتقن تقنيات اللوحة المتقدمة مثل التدرجات، الأنماط، والتكوين  
+- [ ] أنشئ تصورات تفاعلية باستخدام اللوحة لتمثيل البيانات  
+- [ ] تعلم تقنيات تحسين اللوحة للحصول على أداء سلس  
+- [ ] قم ببناء تطبيق رسم أو تلوين باستخدام أدوات متنوعة  
+- [ ] استكشف أنماط البرمجة الإبداعية والفن التوليدي باستخدام اللوحة  
+
+### 🌟 **رحلتك الشهرية لإتقان الرسومات**  
+- [ ] قم ببناء تطبيقات بصرية معقدة باستخدام Canvas 2D وWebGL  
+- [ ] تعلم مفاهيم برمجة الرسومات وأساسيات الشيفرات  
+- [ ] ساهم في مكتبات الرسومات مفتوحة المصدر وأدوات التصور  
+- [ ] أتقن تحسين الأداء للتطبيقات المكثفة الرسومية  
+- [ ] أنشئ محتوى تعليمي حول برمجة اللوحة والرسومات الحاسوبية  
+- [ ] كن خبيرًا في برمجة الرسومات يساعد الآخرين في إنشاء تجارب بصرية  
+
+## 🎯 جدول زمني لإتقان رسومات اللوحة  
+
+```mermaid
+timeline
+    title Canvas API Learning Progression
+    
+    section Canvas Fundamentals (15 minutes)
+        Basic Operations: Element reference
+                        : 2D context access
+                        : Coordinate system
+                        : Simple shape drawing
+        
+    section Drawing Techniques (20 minutes)
+        Graphics Primitives: Rectangles and circles
+                           : Colors and styles
+                           : Text rendering
+                           : Path operations
+        
+    section Image Handling (25 minutes)
+        Asset Management: Image object creation
+                        : Async loading patterns
+                        : Error handling
+                        : Performance optimization
+        
+    section Game Graphics (30 minutes)
+        Sprite Rendering: Positioning algorithms
+                        : Formation calculations
+                        : Scene composition
+                        : Frame rendering
+        
+    section Advanced Techniques (40 minutes)
+        Visual Effects: Transformations
+                      : Animations
+                      : Layering
+                      : State management
+        
+    section Performance (35 minutes)
+        Optimization: Efficient drawing
+                    : Memory management
+                    : Frame rate control
+                    : Asset caching
+        
+    section Professional Skills (1 week)
+        Production Graphics: WebGL integration
+                           : Canvas libraries
+                           : Game engines
+                           : Cross-platform considerations
+        
+    section Advanced Graphics (1 month)
+        Specialized Applications: Data visualization
+                                : Interactive art
+                                : Real-time effects
+                                : 3D graphics
+```
+  
+### 🛠️ ملخص أدوات رسومات اللوحة الخاصة بك  
+
+بعد إكمال هذا الدرس، لديك الآن:  
+- **إتقان Canvas API**: فهم كامل لبرمجة الرسومات ثنائية الأبعاد  
+- **رياضيات الإحداثيات**: تحديد المواقع الدقيقة وخوارزميات التخطيط  
+- **إدارة الأصول**: تحميل الصور بشكل احترافي ومعالجة الأخطاء  
+- **خط أنابيب العرض**: نهج منظم لتكوين المشاهد  
+- **رسومات الألعاب**: حسابات وضع الصور المتحركة والتشكيلات  
+- **البرمجة غير المتزامنة**: أنماط JavaScript الحديثة لأداء سلس  
+- **البرمجة البصرية**: تحويل المفاهيم الرياضية إلى رسومات على الشاشة  
+
+**التطبيقات الواقعية**: مهاراتك في اللوحة تنطبق مباشرة على:  
+- **تصور البيانات**: الرسوم البيانية ولوحات التحكم التفاعلية  
+- **تطوير الألعاب**: الألعاب ثنائية الأبعاد، المحاكاة، والتجارب التفاعلية  
+- **الفن الرقمي**: البرمجة الإبداعية ومشاريع الفن التوليدي  
+- **تصميم واجهات المستخدم وتجربة المستخدم**: الرسومات المخصصة والعناصر التفاعلية  
+- **البرمجيات التعليمية**: أدوات التعلم البصري والمحاكاة  
+- **تطبيقات الويب**: الرسومات الديناميكية والتصورات في الوقت الفعلي  
+
+**المهارات المهنية المكتسبة**: يمكنك الآن:  
+- **إنشاء** حلول رسومات مخصصة بدون مكتبات خارجية  
+- **تحسين** أداء العرض لتجارب مستخدم سلسة  
+- **تصحيح الأخطاء** في المشكلات البصرية المعقدة باستخدام أدوات المطور في المتصفح  
+- **تصميم** أنظمة رسومات قابلة للتوسع باستخدام المبادئ الرياضية  
+- **دمج** رسومات اللوحة مع أطر عمل تطبيقات الويب الحديثة  
+
+**طرق Canvas API التي أتقنتها**:  
+- **إدارة العناصر**: getElementById، getContext  
+- **عمليات الرسم**: fillRect، drawImage، fillStyle  
+- **تحميل الأصول**: كائنات الصور، أنماط الوعد  
+- **تحديد المواقع الرياضية**: حسابات الإحداثيات، خوارزميات التشكيل  
+
+**المستوى التالي**: أنت جاهز لإضافة الحركة، التفاعل مع المستخدم، اكتشاف التصادم، أو استكشاف WebGL للرسومات ثلاثية الأبعاد!  
+
+🌟 **إنجاز محقق**: لقد قمت ببناء نظام عرض ألعاب كامل باستخدام تقنيات Canvas API الأساسية!  
+
+## المهمة  
+
+[استمتع بالعمل مع Canvas API](assignment.md)  
 
 ---
 
diff --git a/translations/ar/6-space-game/3-moving-elements-around/README.md b/translations/ar/6-space-game/3-moving-elements-around/README.md
index db8b3d5315..d6cb7625f3 100644
--- a/translations/ar/6-space-game/3-moving-elements-around/README.md
+++ b/translations/ar/6-space-game/3-moving-elements-around/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "022bbb5c869091b98f19e408e0c51d5d",
-  "translation_date": "2025-10-22T14:25:07+00:00",
+  "original_hash": "8c55a2bd4bc0ebe4c88198fd563a9e09",
+  "translation_date": "2025-11-03T12:43:55+00:00",
   "source_file": "6-space-game/3-moving-elements-around/README.md",
   "language_code": "ar"
 }
 -->
-# بناء لعبة الفضاء الجزء الثالث: إضافة الحركة
+# بناء لعبة فضاء الجزء الثالث: إضافة الحركة
+
+```mermaid
+journey
+    title Your Game Animation Journey
+    section Movement Basics
+      Understand motion principles: 3: Student
+      Learn coordinate updates: 4: Student
+      Implement basic movement: 4: Student
+    section Player Controls
+      Handle keyboard events: 4: Student
+      Prevent default behaviors: 5: Student
+      Create responsive controls: 5: Student
+    section Game Systems
+      Build game loop: 5: Student
+      Manage object lifecycle: 5: Student
+      Implement pub/sub pattern: 5: Student
+```
 
-فكر في ألعابك المفضلة – ما يجعلها جذابة ليس فقط الرسومات الجميلة، بل الطريقة التي تتحرك بها وتستجيب لأفعالك. في الوقت الحالي، لعبتك الفضائية تشبه لوحة جميلة، لكننا على وشك إضافة الحركة التي ستجعلها تنبض بالحياة.
+فكر في ألعابك المفضلة – ما يجعلها ممتعة ليس فقط الرسومات الجميلة، بل الطريقة التي تتحرك بها الأشياء وتستجيب لتفاعلاتك. في الوقت الحالي، لعبتك الفضائية تشبه لوحة جميلة، لكننا على وشك إضافة الحركة التي ستجعلها تنبض بالحياة.
 
-عندما قام مهندسو ناسا ببرمجة الكمبيوتر التوجيهي لمهام أبولو، واجهوا تحديًا مشابهًا: كيف تجعل المركبة الفضائية تستجيب لإدخال الطيار مع الحفاظ تلقائيًا على تصحيحات المسار؟ المبادئ التي سنتعلمها اليوم تعكس نفس المفاهيم – إدارة الحركة التي يتحكم بها اللاعب جنبًا إلى جنب مع سلوكيات النظام التلقائية.
+عندما قام مهندسو ناسا ببرمجة الكمبيوتر الإرشادي لمهام أبولو، واجهوا تحديًا مشابهًا: كيف تجعل المركبة الفضائية تستجيب لمدخلات الطيار مع الحفاظ تلقائيًا على تصحيحات المسار؟ المبادئ التي سنتعلمها اليوم تعكس تلك المفاهيم نفسها – إدارة الحركة التي يتحكم بها اللاعب جنبًا إلى جنب مع سلوكيات النظام التلقائية.
 
 في هذا الدرس، ستتعلم كيفية جعل السفن الفضائية تنزلق عبر الشاشة، تستجيب لأوامر اللاعب، وتخلق أنماط حركة سلسة. سنقسم كل شيء إلى مفاهيم قابلة للإدارة تبني على بعضها البعض بشكل طبيعي.
 
-بحلول النهاية، سيكون لديك لاعبون يحلقون بسفينة البطل الخاصة بهم حول الشاشة بينما تقوم سفن العدو بدوريات في الأعلى. والأهم من ذلك، ستفهم المبادئ الأساسية التي تشغل أنظمة حركة الألعاب.
+في النهاية، سيكون لديك لاعبون يحلقون بسفينة البطل حول الشاشة بينما تقوم سفن العدو بدوريات في الأعلى. والأهم من ذلك، ستفهم المبادئ الأساسية التي تشغل أنظمة حركة الألعاب.
+
+```mermaid
+mindmap
+  root((Game Animation))
+    Movement Types
+      Player Controlled
+      Automatic Motion
+      Physics Based
+      Scripted Paths
+    Event Handling
+      Keyboard Input
+      Mouse Events
+      Touch Controls
+      Default Prevention
+    Game Loop
+      Update Logic
+      Render Frame
+      Clear Canvas
+      Frame Rate Control
+    Object Management
+      Position Updates
+      Collision Detection
+      Lifecycle Management
+      State Tracking
+    Communication
+      Pub/Sub Pattern
+      Event Emitters
+      Message Passing
+      Loose Coupling
+```
 
 ## اختبار ما قبل المحاضرة
 
@@ -26,17 +73,38 @@ CO_OP_TRANSLATOR_METADATA:
 تنبض الألعاب بالحياة عندما تبدأ الأشياء في التحرك، وهناك طريقتان أساسيتان لحدوث ذلك:
 
 - **الحركة التي يتحكم بها اللاعب**: عندما تضغط على مفتاح أو تنقر بالماوس، يتحرك شيء ما. هذا هو الاتصال المباشر بينك وبين عالم اللعبة.
-- **الحركة التلقائية**: عندما تقرر اللعبة نفسها تحريك الأشياء – مثل سفن العدو التي تحتاج إلى القيام بدوريات على الشاشة سواء كنت تفعل شيئًا أم لا.
+- **الحركة التلقائية**: عندما تقرر اللعبة نفسها تحريك الأشياء – مثل سفن العدو التي تحتاج إلى الدوريات على الشاشة سواء كنت تفعل شيئًا أم لا.
+
+تحريك الأشياء على شاشة الكمبيوتر أبسط مما قد تعتقد. هل تتذكر تلك الإحداثيات x و y من صف الرياضيات؟ هذا بالضبط ما نعمل به هنا. عندما قام غاليليو بتتبع أقمار المشتري في عام 1610، كان يقوم أساسًا بنفس الشيء – رسم المواقع بمرور الوقت لفهم أنماط الحركة.
 
-تحريك الأشياء على شاشة الكمبيوتر أبسط مما تعتقد. هل تتذكر تلك الإحداثيات x و y من فصل الرياضيات؟ هذا بالضبط ما نعمل به هنا. عندما تتبع غاليليو أقمار المشتري في عام 1610، كان يقوم بنفس الشيء – رسم المواقع بمرور الوقت لفهم أنماط الحركة.
+تحريك الأشياء على الشاشة يشبه إنشاء رسوم متحركة على شكل كتاب متحرك – تحتاج إلى اتباع هذه الخطوات الثلاث البسيطة:
 
-تحريك الأشياء على الشاشة يشبه إنشاء رسوم متحركة لكتاب تقليب – تحتاج إلى اتباع هذه الخطوات الثلاث البسيطة:
+```mermaid
+flowchart LR
+    A["Frame N"] --> B["Update Positions"]
+    B --> C["Clear Canvas"]
+    C --> D["Draw Objects"]
+    D --> E["Frame N+1"]
+    E --> F{Continue?}
+    F -->|Yes| B
+    F -->|No| G["Game Over"]
+    
+    subgraph "Animation Cycle"
+        H["1. Calculate new positions"]
+        I["2. Erase previous frame"]
+        J["3. Render new frame"]
+    end
+    
+    style B fill:#e1f5fe
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+```
 
-1. **تحديث الموقع** – تغيير مكان الكائن (ربما تحريكه 5 بكسلات إلى اليمين)
+1. **تحديث الموقع** – تغيير مكان الكائن (ربما تحريكه 5 بكسل إلى اليمين)
 2. **مسح الإطار القديم** – تنظيف الشاشة حتى لا ترى آثارًا شبحية في كل مكان
 3. **رسم الإطار الجديد** – وضع الكائن في موقعه الجديد
 
-افعل ذلك بسرعة كافية، وها أنت ذا! لديك حركة سلسة تشعر بأنها طبيعية للاعبين.
+افعل ذلك بسرعة كافية، وستحصل على حركة سلسة تبدو طبيعية للاعبين.
 
 إليك كيف يمكن أن يبدو ذلك في الكود:
 
@@ -52,22 +120,22 @@ ctx.drawImage(heroImg, hero.x, hero.y);
 ```
 
 **ما يفعله هذا الكود:**
-- **يحدث** إحداثيات x الخاصة بالبطل بمقدار 5 بكسلات لتحريكه أفقيًا
+- **يحدث** إحداثيات x الخاصة بالبطل بمقدار 5 بكسل لتحريكه أفقيًا
 - **يمسح** منطقة اللوحة بالكامل لإزالة الإطار السابق
-- **يملأ** اللوحة بلون خلفية أسود
+- **يملأ** منطقة اللوحة بلون خلفية أسود
 - **يعيد رسم** صورة البطل في موقعه الجديد
 
-✅ هل يمكنك التفكير في سبب يجعل إعادة رسم بطلك عدة إطارات في الثانية قد يؤدي إلى تكاليف أداء؟ اقرأ عن [بدائل لهذا النمط](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+✅ هل يمكنك التفكير في سبب قد يؤدي إلى تكاليف أداء عند إعادة رسم البطل عدة إطارات في الثانية؟ اقرأ عن [بدائل لهذا النمط](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
 
 ## التعامل مع أحداث لوحة المفاتيح
 
-هنا نربط إدخال اللاعب بحركة اللعبة. عندما يضغط شخص ما على مفتاح المسافة لإطلاق الليزر أو ينقر على مفتاح السهم لتجنب الكويكب، تحتاج لعبتك إلى اكتشاف هذا الإدخال والاستجابة له.
+هنا نربط مدخلات اللاعب بحركة اللعبة. عندما يضغط أحدهم على مفتاح المسافة لإطلاق الليزر أو يضغط على مفتاح السهم لتجنب الكويكب، تحتاج لعبتك إلى اكتشاف هذا المدخل والاستجابة له.
 
-تحدث أحداث لوحة المفاتيح على مستوى النافذة، مما يعني أن نافذة المتصفح بأكملها تستمع لهذه الضغطات. من ناحية أخرى، يمكن ربط نقرات الماوس بعناصر محددة (مثل النقر على زر). بالنسبة للعبة الفضاء الخاصة بنا، سنركز على التحكم بلوحة المفاتيح لأنه يمنح اللاعبين ذلك الشعور الكلاسيكي لألعاب الأركيد.
+تحدث أحداث لوحة المفاتيح على مستوى النافذة، مما يعني أن نافذة المتصفح بأكملها تستمع لهذه الضغطات. من ناحية أخرى، يمكن ربط نقرات الماوس بعناصر محددة (مثل النقر على زر). بالنسبة للعبة الفضاء الخاصة بنا، سنركز على عناصر التحكم في لوحة المفاتيح لأنها تمنح اللاعبين ذلك الشعور الكلاسيكي لألعاب الأركيد.
 
-هذا يذكرني بكيفية اضطرار مشغلي التلغراف في القرن التاسع عشر إلى ترجمة إدخال شفرة مورس إلى رسائل ذات معنى – نحن نفعل شيئًا مشابهًا، نترجم ضغطات المفاتيح إلى أوامر اللعبة.
+هذا يذكرني بكيفية اضطرار مشغلي التلغراف في القرن التاسع عشر إلى ترجمة مدخلات شفرة مورس إلى رسائل ذات معنى – نحن نفعل شيئًا مشابهًا، نترجم ضغطات المفاتيح إلى أوامر اللعبة.
 
-للتعامل مع حدث تحتاج إلى استخدام طريقة `addEventListener()` الخاصة بالنافذة وتزويدها بمعاملين. المعامل الأول هو اسم الحدث، على سبيل المثال `keyup`. المعامل الثاني هو الوظيفة التي يجب استدعاؤها نتيجة لحدوث الحدث.
+للتعامل مع حدث، تحتاج إلى استخدام طريقة `addEventListener()` الخاصة بالنافذة وتزويدها بمعاملين. المعامل الأول هو اسم الحدث، على سبيل المثال `keyup`. المعامل الثاني هو الوظيفة التي يجب استدعاؤها نتيجة لحدوث الحدث.
 
 إليك مثال:
 
@@ -83,21 +151,40 @@ window.addEventListener('keyup', (evt) => {
 **تفصيل ما يحدث هنا:**
 - **يستمع** لأحداث لوحة المفاتيح على النافذة بأكملها
 - **يلتقط** كائن الحدث الذي يحتوي على معلومات حول المفتاح الذي تم الضغط عليه
-- **يتحقق** مما إذا كان المفتاح المضغوط يطابق مفتاحًا معينًا (في هذه الحالة، السهم العلوي)
+- **يتحقق** مما إذا كان المفتاح المضغوط يتطابق مع مفتاح معين (في هذه الحالة، سهم لأعلى)
 - **ينفذ** الكود عندما يتم استيفاء الشرط
 
 بالنسبة لأحداث المفاتيح، هناك خاصيتان على الحدث يمكنك استخدامهما لمعرفة المفتاح الذي تم الضغط عليه:
 
 - `key` - هذا هو التمثيل النصي للمفتاح المضغوط، على سبيل المثال `'ArrowUp'`
-- `keyCode` - هذا هو التمثيل الرقمي، على سبيل المثال `37`، يتوافق مع `ArrowLeft`
+- `keyCode` - هذا هو التمثيل الرقمي، على سبيل المثال `37`، الذي يتوافق مع `ArrowLeft`
 
 ✅ التلاعب بأحداث المفاتيح مفيد خارج تطوير الألعاب. ما الاستخدامات الأخرى التي يمكنك التفكير فيها لهذه التقنية؟
 
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant EventSystem
+    participant GameLogic
+    participant Hero
+    
+    User->>Browser: Presses ArrowUp key
+    Browser->>EventSystem: keydown event
+    EventSystem->>EventSystem: preventDefault()
+    EventSystem->>GameLogic: emit('KEY_EVENT_UP')
+    GameLogic->>Hero: hero.y -= 5
+    Hero->>Hero: Update position
+    
+    Note over Browser,GameLogic: Event flow prevents browser defaults
+    Note over GameLogic,Hero: Pub/sub pattern enables clean communication
+```
+
 ### المفاتيح الخاصة: تنبيه!
 
-بعض المفاتيح لها سلوكيات مدمجة في المتصفح يمكن أن تتداخل مع لعبتك. مفاتيح الأسهم تقوم بتمرير الصفحة ومفتاح المسافة يقفز للأسفل – سلوكيات لا تريدها عندما يحاول شخص ما قيادة سفينته الفضائية.
+بعض المفاتيح لها سلوكيات مدمجة في المتصفح يمكن أن تتداخل مع لعبتك. مفاتيح الأسهم تقوم بتمرير الصفحة ومفتاح المسافة يقفز للأسفل – سلوكيات لا تريدها عندما يحاول أحدهم قيادة سفينته الفضائية.
 
-يمكننا منع هذه السلوكيات الافتراضية وترك لعبتنا تتعامل مع الإدخال بدلاً من ذلك. هذا مشابه لكيفية اضطرار مبرمجي الكمبيوتر الأوائل إلى تجاوز مقاطعات النظام لإنشاء سلوكيات مخصصة – نحن فقط نفعل ذلك على مستوى المتصفح. إليك الطريقة:
+يمكننا منع هذه السلوكيات الافتراضية وترك لعبتنا تتعامل مع المدخلات بدلاً من ذلك. هذا يشبه كيف كان على مبرمجي الكمبيوتر الأوائل تجاوز مقاطعات النظام لإنشاء سلوكيات مخصصة – نحن فقط نفعل ذلك على مستوى المتصفح. إليك الطريقة:
 
 ```javascript
 const onKeyDown = function (e) {
@@ -124,9 +211,25 @@ window.addEventListener('keydown', onKeyDown);
 - **يسمح** للمفاتيح الأخرى بالعمل بشكل طبيعي
 - **يستخدم** `e.preventDefault()` لإيقاف سلوك المتصفح المدمج
 
+### 🔄 **تقييم تربوي**
+**فهم التعامل مع الأحداث**: قبل الانتقال إلى الحركة التلقائية، تأكد من أنك تستطيع:
+- ✅ شرح الفرق بين أحداث `keydown` و `keyup`
+- ✅ فهم سبب منع سلوكيات المتصفح الافتراضية
+- ✅ وصف كيفية ربط مستمعي الأحداث مدخلات المستخدم بمنطق اللعبة
+- ✅ تحديد المفاتيح التي قد تتداخل مع عناصر التحكم في اللعبة
+
+**اختبار سريع ذاتي**: ماذا سيحدث إذا لم تمنع السلوك الافتراضي لمفاتيح الأسهم؟
+*الإجابة: سيقوم المتصفح بتمرير الصفحة، مما يتداخل مع حركة اللعبة*
+
+**هيكل نظام الأحداث**: أنت الآن تفهم:
+- **الاستماع على مستوى النافذة**: التقاط الأحداث على مستوى المتصفح
+- **خصائص كائن الحدث**: سلاسل `key` مقابل أرقام `keyCode`
+- **منع السلوك الافتراضي**: إيقاف السلوكيات غير المرغوب فيها للمتصفح
+- **المنطق الشرطي**: الاستجابة لمجموعات المفاتيح المحددة
+
 ## الحركة الناتجة عن اللعبة
 
-الآن دعونا نتحدث عن الكائنات التي تتحرك دون إدخال اللاعب. فكر في سفن العدو التي تجوب الشاشة، الرصاص الذي يطير في خطوط مستقيمة، أو السحب التي تنجرف في الخلفية. هذه الحركة التلقائية تجعل عالم لعبتك يبدو حيًا حتى عندما لا يلمس أحد عناصر التحكم.
+الآن دعونا نتحدث عن الكائنات التي تتحرك دون مدخلات اللاعب. فكر في سفن العدو التي تتجول عبر الشاشة، الرصاص الذي يطير في خطوط مستقيمة، أو السحب التي تنجرف في الخلفية. هذه الحركة التلقائية تجعل عالم لعبتك يبدو حيًا حتى عندما لا يلمس أحد عناصر التحكم.
 
 نستخدم المؤقتات المدمجة في JavaScript لتحديث المواقع على فترات منتظمة. هذا المفهوم مشابه لكيفية عمل الساعات البندولية – آلية منتظمة تؤدي إلى إجراءات متسقة وموقوتة. إليك مدى بساطة ذلك:
 
@@ -139,19 +242,44 @@ const id = setInterval(() => {
 
 **ما يفعله كود الحركة هذا:**
 - **ينشئ** مؤقتًا يعمل كل 100 مللي ثانية
-- **يحدث** إحداثيات y الخاصة بالعدو بمقدار 10 بكسلات في كل مرة
+- **يحدث** إحداثيات y الخاصة بالعدو بمقدار 10 بكسل في كل مرة
 - **يخزن** معرف الفاصل الزمني حتى نتمكن من إيقافه لاحقًا إذا لزم الأمر
-- **يحرك** العدو للأسفل على الشاشة تلقائيًا
+- **يحرك** العدو تلقائيًا نحو الأسفل على الشاشة
 
 ## حلقة اللعبة
 
-إليك المفهوم الذي يربط كل شيء معًا – حلقة اللعبة. إذا كانت لعبتك فيلمًا، فإن حلقة اللعبة ستكون جهاز العرض السينمائي، تعرض إطارًا بعد إطار بسرعة بحيث يبدو كل شيء وكأنه يتحرك بسلاسة.
+إليك المفهوم الذي يربط كل شيء معًا – حلقة اللعبة. إذا كانت لعبتك فيلمًا، فإن حلقة اللعبة ستكون جهاز العرض السينمائي، تعرض إطارًا بعد إطار بسرعة كبيرة بحيث يبدو كل شيء يتحرك بسلاسة.
 
 كل لعبة لديها واحدة من هذه الحلقات تعمل خلف الكواليس. إنها وظيفة تقوم بتحديث جميع كائنات اللعبة، تعيد رسم الشاشة، وتكرر هذه العملية باستمرار. هذا يتتبع بطلك، جميع الأعداء، أي أشعة ليزر تطير – حالة اللعبة بأكملها.
 
-هذا المفهوم يذكرني بكيفية اضطرار رسامي الأفلام الأوائل مثل والت ديزني إلى إعادة رسم الشخصيات إطارًا بعد إطار لإنشاء وهم الحركة. نحن نفعل الشيء نفسه، فقط باستخدام الكود بدلاً من الأقلام.
-
-إليك كيف يمكن أن تبدو حلقة اللعبة، معبرًا عنها بالكود:
+هذا المفهوم يذكرني بكيفية اضطرار رسامي الأفلام الأوائل مثل والت ديزني إلى إعادة رسم الشخصيات إطارًا بعد إطار لإنشاء وهم الحركة. نحن نفعل الشيء نفسه، فقط بالكود بدلًا من الأقلام.
+
+إليك كيف يمكن أن تبدو حلقة اللعبة عادةً، معبرًا عنها بالكود:
+
+```mermaid
+flowchart TD
+    A["Start Game Loop"] --> B["Clear Canvas"]
+    B --> C["Fill Background"]
+    C --> D["Update Game Objects"]
+    D --> E["Draw Hero"]
+    E --> F["Draw Enemies"]
+    F --> G["Draw UI Elements"]
+    G --> H["Wait for Next Frame"]
+    H --> I{Game Running?}
+    I -->|Yes| B
+    I -->|No| J["End Game"]
+    
+    subgraph "Frame Rate Control"
+        K["60 FPS = 16.67ms"]
+        L["30 FPS = 33.33ms"]
+        M["10 FPS = 100ms"]
+    end
+    
+    style B fill:#ffebee
+    style D fill:#e1f5fe
+    style E fill:#e8f5e8
+    style F fill:#e8f5e8
+```
 
 ```javascript
 const gameLoopId = setInterval(() => {
@@ -171,24 +299,24 @@ const gameLoopId = setInterval(() => {
 - **يمسح** اللوحة بالكامل لإزالة الإطار السابق
 - **يملأ** الخلفية بلون صلب
 - **يرسم** جميع كائنات اللعبة في مواقعها الحالية
-- **يكرر** هذه العملية كل 200 مللي ثانية لإنشاء رسوم متحركة سلسة
+- **يكرر** هذه العملية كل 200 مللي ثانية لإنشاء حركة سلسة
 - **يدير** معدل الإطارات عن طريق التحكم في توقيت الفاصل الزمني
 
 ## متابعة لعبة الفضاء
 
 الآن سنضيف الحركة إلى المشهد الثابت الذي قمت ببنائه سابقًا. سنقوم بتحويله من لقطة شاشة إلى تجربة تفاعلية. سنعمل على ذلك خطوة بخطوة لضمان بناء كل جزء على الآخر.
 
-احصل على الكود من حيث توقفنا في الدرس السابق (أو ابدأ بالكود الموجود في مجلد [Part II- starter](../../../../6-space-game/3-moving-elements-around/your-work) إذا كنت بحاجة إلى بداية جديدة).
+احصل على الكود من حيث توقفنا في الدرس السابق (أو ابدأ بالكود الموجود في [مجلد البداية الجزء الثاني](../../../../6-space-game/3-moving-elements-around/your-work) إذا كنت بحاجة إلى بداية جديدة).
 
 **إليك ما نبنيه اليوم:**
-- **تحكم البطل**: ستقود مفاتيح الأسهم سفينتك الفضائية حول الشاشة
+- **عناصر تحكم البطل**: مفاتيح الأسهم ستقود سفينتك الفضائية حول الشاشة
 - **حركة العدو**: ستبدأ تلك السفن الفضائية الغريبة في التقدم
 
-لنبدأ في تنفيذ هذه الميزات.
+لنبدأ بتنفيذ هذه الميزات.
 
 ## الخطوات الموصى بها
 
-حدد الملفات التي تم إنشاؤها لك في المجلد الفرعي `your-work`. يجب أن يحتوي على ما يلي:
+حدد الملفات التي تم إنشاؤها لك في المجلد الفرعي `your-work`. يجب أن تحتوي على ما يلي:
 
 ```bash
 -| assets
@@ -207,9 +335,9 @@ npm start
 ```
 
 **ما يفعله هذا الأمر:**
-- **ينتقل** إلى دليل المشروع الخاص بك
+- **ينتقل** إلى دليل مشروعك
 - **يبدأ** خادم HTTP على العنوان `http://localhost:5000`
-- **يخدم** ملفات لعبتك حتى تتمكن من اختبارها في المتصفح
+- **يقدم** ملفات لعبتك حتى تتمكن من اختبارها في المتصفح
 
 سيبدأ ما سبق خادم HTTP على العنوان `http://localhost:5000`. افتح متصفحًا وأدخل هذا العنوان، في الوقت الحالي يجب أن يعرض البطل وجميع الأعداء؛ لا شيء يتحرك - حتى الآن!
 
@@ -242,9 +370,46 @@ npm start
     **فهم هذه الفئة الأساسية:**
     - **تعرف** الخصائص المشتركة التي تشترك فيها جميع كائنات اللعبة (الموقع، الحجم، الصورة)
     - **تتضمن** علامة `dead` لتتبع ما إذا كان يجب إزالة الكائن
-    - **توفر** طريقة `draw()` التي تعرض الكائن على اللوحة
+    - **توفر** طريقة `draw()` التي ترسم الكائن على اللوحة
     - **تحدد** قيمًا افتراضية لجميع الخصائص التي يمكن للفئات الفرعية تجاوزها
 
+    ```mermaid
+    classDiagram
+        class GameObject {
+            +x: number
+            +y: number
+            +dead: boolean
+            +type: string
+            +width: number
+            +height: number
+            +img: Image
+            +draw(ctx)
+        }
+        
+        class Hero {
+            +speed: number
+            +type: "Hero"
+            +width: 98
+            +height: 75
+        }
+        
+        class Enemy {
+            +type: "Enemy"
+            +width: 98
+            +height: 50
+            +setInterval()
+        }
+        
+        GameObject <|-- Hero
+        GameObject <|-- Enemy
+        
+        class EventEmitter {
+            +listeners: object
+            +on(message, listener)
+            +emit(message, payload)
+        }
+    ```
+
     الآن، قم بتمديد هذا `GameObject` لإنشاء `Hero` و `Enemy`:
     
     ```javascript
@@ -284,11 +449,11 @@ npm start
     - **تحدد** أبعادًا وخصائص محددة لكل نوع من الكائنات
     - **تنفذ** الحركة التلقائية للأعداء باستخدام `setInterval()`
 
-2. **أضف معالجات أحداث المفاتيح** للتعامل مع التنقل بالمفاتيح (تحريك البطل لأعلى/أسفل يسار/يمين)
+2. **أضف معالجات أحداث المفاتيح** للتعامل مع التنقل بالمفاتيح (تحريك البطل لأعلى/أسفل، يسار/يمين)
 
-   *تذكر* أنه نظام ديكارتي، أعلى اليسار هو `0,0`. أيضًا تذكر إضافة كود لإيقاف *السلوك الافتراضي*
+   *تذكر*: إنه نظام إحداثيات، أعلى اليسار هو `0,0`. أيضًا تذكر إضافة الكود لإيقاف *السلوك الافتراضي*
 
-   > **نصيحة**: قم بإنشاء وظيفة `onKeyDown` الخاصة بك واربطها بالنافذة:
+   > **نصيحة**: أنشئ وظيفة `onKeyDown` الخاصة بك واربطها بالنافذة:
 
    ```javascript
    const onKeyDown = function (e) {
@@ -310,17 +475,17 @@ npm start
    window.addEventListener("keydown", onKeyDown);
    ```
     
-   **ما يفعله معالج الأحداث هذا:**
+   **ما يفعله معالج الحدث هذا:**
    - **يستمع** لأحداث الضغط على المفاتيح على النافذة بأكملها
    - **يسجل** رمز المفتاح لمساعدتك في تصحيح الأخطاء ومعرفة المفاتيح التي يتم الضغط عليها
    - **يمنع** السلوك الافتراضي للمتصفح لمفاتيح الأسهم ومفتاح المسافة
    - **يسمح** للمفاتيح الأخرى بالعمل بشكل طبيعي
    
-   تحقق من وحدة التحكم في المتصفح في هذه المرحلة، وشاهد ضغطات المفاتيح التي يتم تسجيلها. 
+   تحقق من وحدة التحكم في المتصفح في هذه المرحلة، وشاهد ضغطات المفاتيح التي يتم تسجيلها.
 
-3. **تنفيذ** [نمط النشر والاشتراك](../README.md)، سيحافظ هذا على نظافة الكود الخاص بك أثناء متابعة الأجزاء المتبقية.
+3. **تنفيذ** [نمط النشر والاشتراك](../README.md)، سيحافظ هذا على نظافة الكود أثناء متابعة الأجزاء المتبقية.
 
-   يساعد نمط النشر والاشتراك في تنظيم الكود الخاص بك عن طريق فصل اكتشاف الأحداث عن معالجة الأحداث. هذا يجعل الكود الخاص بك أكثر تنظيمًا وأسهل في الصيانة.
+   يساعد نمط النشر والاشتراك في تنظيم الكود عن طريق فصل اكتشاف الأحداث عن التعامل معها. هذا يجعل الكود أكثر تنظيمًا وأسهل في الصيانة.
 
    للقيام بهذا الجزء الأخير، يمكنك:
 
@@ -341,12 +506,34 @@ npm start
        ```
 
    **ما يفعله نظام الأحداث هذا:**
-   - **يكتشف** إدخال لوحة المفاتيح ويحولها إلى أحداث لعبة مخصصة
-   - **يفصل** اكتشاف الإدخال عن منطق اللعبة
+   - **يكتشف** مدخلات لوحة المفاتيح ويحولها إلى أحداث لعبة مخصصة
+   - **يفصل** اكتشاف المدخلات عن منطق اللعبة
    - **يجعل** من السهل تغيير عناصر التحكم لاحقًا دون التأثير على كود اللعبة
-   - **يسمح** لأنظمة متعددة بالاستجابة لنفس الإدخال
+   - **يسمح** لأنظمة متعددة بالاستجابة لنفس المدخلات
+
+   ```mermaid
+   flowchart TD
+       A["Keyboard Input"] --> B["Window Event Listener"]
+       B --> C["Event Emitter"]
+       C --> D["KEY_EVENT_UP"]
+       C --> E["KEY_EVENT_DOWN"]
+       C --> F["KEY_EVENT_LEFT"]
+       C --> G["KEY_EVENT_RIGHT"]
+       
+       D --> H["Hero Movement"]
+       D --> I["Sound System"]
+       D --> J["Visual Effects"]
+       
+       E --> H
+       F --> H
+       G --> H
+       
+       style A fill:#e1f5fe
+       style C fill:#e8f5e8
+       style H fill:#fff3e0
+   ```
 
-   2. **إنشاء فئة EventEmitter** لنشر الرسائل والاشتراك فيها:
+   2. **إنشاء فئة EventEmitter** للنشر والاشتراك في الرسائل:
 
        ```javascript
        class EventEmitter {
@@ -381,10 +568,10 @@ npm start
        ```
 
    **فهم الإعداد:**
-   - **يعرف** ثوابت الرسائل لتجنب الأخطاء الإملائية وجعل إعادة الهيكلة أسهل
+   - **يحدد** ثوابت الرسائل لتجنب الأخطاء وجعل إعادة الهيكلة أسهل
    - **يعلن** عن متغيرات الصور، سياق اللوحة، وحالة اللعبة
-   - **ينشئ** مرسل أحداث عالمي لنظام النشر والاشتراك
-   - **يبدأ** مصفوفة تحتوي على جميع كائنات اللعبة
+   - **ينشئ** EventEmitter عالميًا لنظام النشر والاشتراك
+   - **تهيئة** مصفوفة لتخزين جميع كائنات اللعبة
 
    4. **تهيئة اللعبة**
 
@@ -408,7 +595,7 @@ npm start
        
 4. **إعداد حلقة اللعبة**
 
-   قم بإعادة صياغة وظيفة `window.onload` لتهيئة اللعبة وإعداد حلقة اللعبة على فاصل زمني مناسب. ستضيف أيضًا شعاع ليزر:
+   قم بإعادة صياغة وظيفة `window.onload` لتهيئة اللعبة وإعداد حلقة اللعبة بفاصل زمني مناسب. ستضيف أيضًا شعاع الليزر:
 
     ```javascript
     window.onload = async () => {
@@ -429,13 +616,13 @@ npm start
     ```
 
    **فهم إعداد اللعبة:**
-   - **ينتظر** حتى يتم تحميل الصفحة بالكامل قبل البدء
-   - **يحصل** على عنصر اللوحة وسياق العرض ثنائي الأبعاد الخاص بها
-   - **يحمل** جميع موارد الصور بشكل غير متزامن باستخدام `await`
-   - **يبدأ** تشغيل حلقة اللعبة على فواصل زمنية قدرها 100 مللي ثانية (10 FPS)
-   - **يمسح** ويعيد رسم الشاشة بأكملها في كل إطار
+   - **ينتظر** تحميل الصفحة بالكامل قبل البدء
+   - **يحصل** على عنصر اللوحة (canvas) وسياق الرسم ثنائي الأبعاد الخاص بها
+   - **يحمل** جميع الصور بشكل غير متزامن باستخدام `await`
+   - **يبدأ** تشغيل حلقة اللعبة بفواصل زمنية قدرها 100 مللي ثانية (10 إطارات في الثانية)
+   - **يمسح** ويعيد رسم الشاشة بالكامل في كل إطار
 
-5. **أضف الكود** لتحريك الأعداء على فاصل زمني معين
+5. **إضافة كود** لتحريك الأعداء بفاصل زمني معين
 
     قم بإعادة صياغة وظيفة `createEnemies()` لإنشاء الأعداء ودفعهم إلى فئة gameObjects الجديدة:
 
@@ -456,13 +643,13 @@ npm start
     }
     ```
 
-    **ما يفعله إنشاء الأعداء:**
-    - **يحسب** المواقع لتوسيط الأعداء على الشاشة
-- **إنشاء** شبكة من الأعداء باستخدام الحلقات المتداخلة  
-- **تعيين** صورة العدو لكل كائن عدو  
-- **إضافة** كل عدو إلى مصفوفة الكائنات العالمية الخاصة باللعبة  
-
-ثم أضف دالة `createHero()` لتنفيذ عملية مشابهة للبطل.  
+    **ما الذي تفعله عملية إنشاء الأعداء:**
+    - **تحسب** المواقع لتوسيط الأعداء على الشاشة
+    - **تنشئ** شبكة من الأعداء باستخدام الحلقات المتداخلة
+    - **تخصص** صورة العدو لكل كائن عدو
+    - **تضيف** كل عدو إلى مصفوفة كائنات اللعبة العالمية
+    
+    وأضف وظيفة `createHero()` للقيام بعملية مشابهة للبطل.
 
     ```javascript
     function createHero() {
@@ -474,28 +661,48 @@ npm start
       gameObjects.push(hero);
     }
     ```
-  
-**ما الذي تفعله عملية إنشاء البطل:**  
-- **وضع** البطل في أسفل منتصف الشاشة  
-- **تعيين** صورة البطل لكائن البطل  
-- **إضافة** البطل إلى مصفوفة الكائنات الخاصة باللعبة ليتم عرضه  
 
-وأخيرًا، أضف دالة `drawGameObjects()` لبدء عملية الرسم:  
+    **ما الذي تفعله عملية إنشاء البطل:**
+    - **تضع** البطل في أسفل وسط الشاشة
+    - **تخصص** صورة البطل لكائن البطل
+    - **تضيف** البطل إلى مصفوفة كائنات اللعبة للرسم
+
+    وأخيرًا، أضف وظيفة `drawGameObjects()` لبدء الرسم:
 
     ```javascript
     function drawGameObjects(ctx) {
       gameObjects.forEach(go => go.draw(ctx));
     }
     ```
-  
-**فهم وظيفة الرسم:**  
-- **التكرار** عبر جميع الكائنات في المصفوفة  
-- **استدعاء** طريقة `draw()` لكل كائن  
-- **تمرير** سياق اللوحة حتى يتمكن الكائن من عرض نفسه  
-
-يجب أن يبدأ الأعداء بالتقدم نحو مركبة البطل الفضائية!  
-}  
-}  
+
+    **فهم وظيفة الرسم:**
+    - **تتكرر** عبر جميع كائنات اللعبة في المصفوفة
+    - **تستدعي** طريقة `draw()` لكل كائن
+    - **تمرير** سياق اللوحة حتى يتمكن الكائنات من رسم أنفسهم
+
+    ### 🔄 **مراجعة تعليمية**
+    **فهم كامل لنظام اللعبة**: تحقق من إتقانك للهيكل الكامل:
+    - ✅ كيف يسمح التوريث للبطل والعدو بمشاركة خصائص كائن اللعبة المشتركة؟
+    - ✅ لماذا يجعل نمط pub/sub الكود أكثر قابلية للصيانة؟
+    - ✅ ما هو دور حلقة اللعبة في إنشاء حركة سلسة؟
+    - ✅ كيف تربط مستمعات الأحداث بين إدخال المستخدم وسلوك كائنات اللعبة؟
+
+    **تكامل النظام**: الآن تظهر لعبتك:
+    - **تصميم موجه للكائنات**: فئات أساسية مع توريث متخصص
+    - **هندسة قائمة على الأحداث**: نمط pub/sub لتقليل الترابط
+    - **إطار عمل الرسوم المتحركة**: حلقة اللعبة مع تحديثات إطار متسقة
+    - **معالجة الإدخال**: أحداث لوحة المفاتيح مع منع السلوك الافتراضي
+    - **إدارة الموارد**: تحميل الصور ورسم الشخصيات
+
+    **أنماط احترافية**: لقد قمت بتنفيذ:
+    - **فصل الاهتمامات**: فصل الإدخال والمنطق والرسم
+    - **تعدد الأشكال**: جميع كائنات اللعبة تشترك في واجهة الرسم المشتركة
+    - **تمرير الرسائل**: تواصل نظيف بين المكونات
+    - **إدارة الموارد**: معالجة فعالة للشخصيات والرسوم المتحركة
+
+    يجب أن يبدأ الأعداء بالتقدم نحو سفينة الفضاء الخاصة بالبطل!
+      }
+    }
     ```
     
     and add a `createHero()` function to do a similar process for the hero.
@@ -510,68 +717,187 @@ npm start
       gameObjects.push(hero);
     }
     ```
-  
-وأخيرًا، أضف دالة `drawGameObjects()` لبدء عملية الرسم:  
+
+    وأخيرًا، أضف وظيفة `drawGameObjects()` لبدء الرسم:
 
     ```javascript
     function drawGameObjects(ctx) {
       gameObjects.forEach(go => go.draw(ctx));
     }
     ```
-  
-يجب أن يبدأ الأعداء بالتقدم نحو مركبة البطل الفضائية!  
 
----
+    يجب أن يبدأ الأعداء بالتقدم نحو سفينة الفضاء الخاصة بالبطل!
 
-## تحدي GitHub Copilot Agent 🚀  
+---
 
-إليك تحدٍ لتحسين جودة لعبتك: إضافة حدود وتحكم سلس. حاليًا، يمكن للبطل الطيران خارج الشاشة، وقد تبدو الحركة غير سلسة.  
+## تحدي GitHub Copilot Agent 🚀
 
-**مهمتك:** اجعل مركبتك الفضائية تبدو أكثر واقعية من خلال تنفيذ حدود الشاشة وحركة سلسة. هذا مشابه لكيفية منع أنظمة التحكم في الطيران التابعة لناسا المركبات الفضائية من تجاوز حدود التشغيل الآمنة.  
+إليك تحدٍ لتحسين جودة لعبتك: إضافة حدود وتحكم سلس. حاليًا، يمكن للبطل الطيران خارج الشاشة، وقد تبدو الحركة متقطعة.
 
-**ما الذي يجب بناؤه:** قم بإنشاء نظام يحافظ على مركبة البطل الفضائية داخل الشاشة، واجعل التحكم سلسًا. عندما يضغط اللاعبون على مفتاح السهم، يجب أن تنزلق المركبة باستمرار بدلاً من التحرك بخطوات منفصلة. فكر في إضافة تأثير بصري عندما تصل المركبة إلى حدود الشاشة – ربما تأثير بسيط يشير إلى حافة منطقة اللعب.  
+**مهمتك:** اجعل سفينة الفضاء الخاصة بك تبدو أكثر واقعية من خلال تنفيذ حدود الشاشة وحركة سلسة. عندما يضغط اللاعبون على مفتاح السهم، يجب أن تنزلق السفينة باستمرار بدلاً من التحرك بخطوات منفصلة. فكر في إضافة تأثير بصري عندما تصل السفينة إلى حدود الشاشة – ربما تأثير بسيط يشير إلى حافة منطقة اللعب.
 
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.  
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
-## 🚀 التحدي  
+## 🚀 تحدي
 
-تصبح تنظيم الكود أكثر أهمية مع نمو المشاريع. ربما لاحظت أن ملفك أصبح مزدحمًا بالوظائف والمتغيرات والفئات المختلطة معًا. هذا يذكرني بكيفية تنظيم المهندسين لكود مهمة أبولو لإنشاء أنظمة واضحة وقابلة للصيانة يمكن للفرق المتعددة العمل عليها في وقت واحد.  
+تصبح أهمية تنظيم الكود أكثر وضوحًا مع نمو المشاريع. ربما لاحظت أن ملفك أصبح مزدحمًا بالوظائف والمتغيرات والفئات المختلطة معًا. هذا يذكرني بكيفية تنظيم مهندسي مهمة أبولو للكود لإنشاء أنظمة واضحة وقابلة للصيانة يمكن لفرق متعددة العمل عليها في وقت واحد.
 
-**مهمتك:**  
-فكر كمهندس برمجيات. كيف يمكنك تنظيم الكود الخاص بك بحيث بعد ستة أشهر من الآن، يمكنك (أو زميلك) فهم ما يحدث؟ حتى لو بقي كل شيء في ملف واحد الآن، يمكنك إنشاء تنظيم أفضل:  
+**مهمتك:**
+فكر كمهندس برمجيات. كيف يمكنك تنظيم الكود بحيث يمكنك أنت (أو زميلك) فهم ما يحدث بعد ستة أشهر؟ حتى لو بقي كل شيء في ملف واحد الآن، يمكنك إنشاء تنظيم أفضل:
 
-- **تجميع الوظائف ذات الصلة** معًا باستخدام عناوين تعليق واضحة  
-- **فصل المهام** - اجعل منطق اللعبة منفصلًا عن العرض  
-- **استخدام تسميات متسقة** للمتغيرات والوظائف  
-- **إنشاء وحدات** أو مساحات أسماء لتنظيم الجوانب المختلفة للعبة  
-- **إضافة توثيق** يشرح الغرض من كل قسم رئيسي  
+- **تجميع الوظائف ذات الصلة** مع رؤوس تعليقات واضحة
+- **فصل الاهتمامات** - احتفظ بمنطق اللعبة منفصلًا عن الرسم
+- **استخدام تسميات متسقة** للمتغيرات والوظائف
+- **إنشاء وحدات** أو مساحات أسماء لتنظيم الجوانب المختلفة للعبة
+- **إضافة توثيق** يشرح الغرض من كل قسم رئيسي
 
-**أسئلة للتفكير:**  
-- ما هي الأجزاء الأكثر صعوبة في فهمها عند العودة إلى الكود؟  
-- كيف يمكنك تنظيم الكود لجعله أسهل لشخص آخر للمساهمة؟  
-- ماذا سيحدث إذا أردت إضافة ميزات جديدة مثل تعزيزات القوة أو أنواع مختلفة من الأعداء؟  
+**أسئلة للتفكير:**
+- ما هي أجزاء الكود التي يصعب فهمها عند العودة إليها؟
+- كيف يمكنك تنظيم الكود لجعله أسهل لشخص آخر للمساهمة؟
+- ماذا سيحدث إذا أردت إضافة ميزات جديدة مثل تعزيزات القوة أو أنواع مختلفة من الأعداء؟
 
-## اختبار ما بعد المحاضرة  
+## اختبار ما بعد المحاضرة
 
-[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/34)  
+[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/34)
 
-## المراجعة والدراسة الذاتية  
+## المراجعة والدراسة الذاتية
 
-لقد قمنا ببناء كل شيء من الصفر، وهو أمر رائع للتعلم، ولكن إليك سر صغير – هناك بعض أطر عمل JavaScript المذهلة التي يمكنها التعامل مع الكثير من العمل الشاق نيابةً عنك. بمجرد أن تشعر بالراحة مع الأساسيات التي غطيناها، من المفيد [استكشاف ما هو متاح](https://github.com/collections/javascript-game-engines).  
+لقد قمنا ببناء كل شيء من الصفر، وهو أمر رائع للتعلم، ولكن إليك سر صغير – هناك بعض أطر عمل JavaScript المذهلة التي يمكنها التعامل مع الكثير من العمل الشاق نيابة عنك. بمجرد أن تشعر بالراحة مع الأساسيات التي غطيناها، من المفيد [استكشاف ما هو متاح](https://github.com/collections/javascript-game-engines).
 
-فكر في الأطر مثل امتلاك صندوق أدوات مجهز جيدًا بدلاً من صنع كل أداة يدويًا. يمكنها حل العديد من تحديات تنظيم الكود التي تحدثنا عنها، بالإضافة إلى تقديم ميزات قد تستغرق أسابيع لبنائها بنفسك.  
+فكر في الأطر كأنها صندوق أدوات مجهز جيدًا بدلاً من صنع كل أداة يدويًا. يمكنها حل العديد من تحديات تنظيم الكود التي تحدثنا عنها، بالإضافة إلى تقديم ميزات قد تستغرق أسابيع لبنائها بنفسك.
 
-**أشياء تستحق الاستكشاف:**  
-- كيف تنظم محركات الألعاب الكود – ستندهش من الأنماط الذكية التي يستخدمونها  
+**أشياء تستحق الاستكشاف:**
+- كيف تنظم محركات الألعاب الكود – ستندهش من الأنماط الذكية التي يستخدمونها
 - حيل الأداء لجعل ألعاب اللوحة تعمل بسلاسة فائقة  
-- ميزات JavaScript الحديثة التي يمكن أن تجعل الكود الخاص بك أنظف وأكثر قابلية للصيانة  
-- طرق مختلفة لإدارة الكائنات في اللعبة وعلاقاتها  
+- ميزات JavaScript الحديثة التي يمكن أن تجعل الكود الخاص بك أكثر نظافة وقابلية للصيانة
+- طرق مختلفة لإدارة كائنات اللعبة وعلاقاتها
+
+## 🎯 جدول زمني لإتقان الرسوم المتحركة في الألعاب
 
-## الواجب  
+```mermaid
+timeline
+    title Game Animation & Interaction Learning Progression
+    
+    section Movement Fundamentals (20 minutes)
+        Animation Principles: Frame-based animation
+                            : Position updates
+                            : Coordinate systems
+                            : Smooth movement
+        
+    section Event Systems (25 minutes)
+        User Input: Keyboard event handling
+                  : Default behavior prevention
+                  : Event object properties
+                  : Window-level listening
+        
+    section Game Architecture (30 minutes)
+        Object Design: Inheritance patterns
+                     : Base class creation
+                     : Specialized behaviors
+                     : Polymorphic interfaces
+        
+    section Communication Patterns (35 minutes)
+        Pub/Sub Implementation: Event emitters
+                              : Message constants
+                              : Loose coupling
+                              : System integration
+        
+    section Game Loop Mastery (40 minutes)
+        Real-time Systems: Frame rate control
+                         : Update/render cycle
+                         : State management
+                         : Performance optimization
+        
+    section Advanced Techniques (45 minutes)
+        Professional Features: Collision detection
+                             : Physics simulation
+                             : State machines
+                             : Component systems
+        
+    section Game Engine Concepts (1 week)
+        Framework Understanding: Entity-component systems
+                               : Scene graphs
+                               : Asset pipelines
+                               : Performance profiling
+        
+    section Production Skills (1 month)
+        Professional Development: Code organization
+                                : Team collaboration
+                                : Testing strategies
+                                : Deployment optimization
+```
 
-[قم بتعليق الكود الخاص بك](assignment.md)  
+### 🛠️ ملخص أدوات تطوير الألعاب الخاصة بك
+
+بعد إكمال هذا الدرس، أصبحت الآن متقنًا:
+- **مبادئ الرسوم المتحركة**: الحركة القائمة على الإطار والانتقالات السلسة
+- **برمجة قائمة على الأحداث**: معالجة إدخال لوحة المفاتيح مع إدارة الأحداث بشكل صحيح
+- **تصميم موجه للكائنات**: تسلسل التوريث وواجهات متعددة الأشكال
+- **أنماط الاتصال**: هندسة pub/sub للكود القابل للصيانة
+- **هيكل حلقة اللعبة**: تحديثات الوقت الفعلي ودورات الرسم
+- **أنظمة الإدخال**: تعيين التحكم للمستخدم مع منع السلوك الافتراضي
+- **إدارة الموارد**: تحميل الشخصيات وتقنيات الرسم الفعالة
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] افتح وحدة التحكم في المتصفح وجرب `addEventListener('keydown', console.log)` لرؤية أحداث لوحة المفاتيح
+- [ ] أنشئ عنصر div بسيط وحركه باستخدام مفاتيح الأسهم
+- [ ] جرب `setInterval` لإنشاء حركة مستمرة
+- [ ] حاول منع السلوك الافتراضي باستخدام `event.preventDefault()`
+
+### 🎯 **ما يمكنك تحقيقه خلال هذه الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وافهم البرمجة القائمة على الأحداث
+- [ ] قم ببناء سفينة البطل المتحركة مع تحكم كامل بلوحة المفاتيح
+- [ ] نفذ أنماط حركة سلسة للأعداء
+- [ ] أضف حدودًا لمنع كائنات اللعبة من مغادرة الشاشة
+- [ ] أنشئ كشف تصادم أساسي بين كائنات اللعبة
+
+### 📅 **رحلة الرسوم المتحركة الخاصة بك لمدة أسبوع**
+- [ ] أكمل لعبة الفضاء بالكامل مع حركة وتفاعلات مصقولة
+- [ ] أضف أنماط حركة متقدمة مثل المنحنيات، التسارع، والفيزياء
+- [ ] نفذ انتقالات سلسة ووظائف التخفيف
+- [ ] أنشئ تأثيرات جسيمية وأنظمة ردود فعل بصرية
+- [ ] قم بتحسين أداء اللعبة للحصول على تشغيل سلس بسرعة 60 إطارًا في الثانية
+- [ ] أضف تحكمات لمس للجوال وتصميم متجاوب
+
+### 🌟 **تطوير تفاعلي لمدة شهر**
+- [ ] قم ببناء تطبيقات تفاعلية مع أنظمة رسوم متحركة متقدمة
+- [ ] تعلم مكتبات الرسوم المتحركة مثل GSAP أو أنشئ محرك الرسوم المتحركة الخاص بك
+- [ ] ساهم في مشاريع تطوير الألعاب والرسوم المتحركة مفتوحة المصدر
+- [ ] أتقن تحسين الأداء للتطبيقات المكثفة الرسومية
+- [ ] أنشئ محتوى تعليمي حول تطوير الألعاب والرسوم المتحركة
+- [ ] قم ببناء مجموعة أعمال تعرض مهارات البرمجة التفاعلية المتقدمة
+
+**تطبيقات العالم الحقيقي**: مهارات الرسوم المتحركة الخاصة بك تنطبق مباشرة على:
+- **تطبيقات الويب التفاعلية**: لوحات التحكم الديناميكية والواجهات في الوقت الفعلي
+- **تصور البيانات**: الرسوم البيانية المتحركة والرسومات التفاعلية
+- **البرامج التعليمية**: المحاكاة التفاعلية وأدوات التعلم
+- **تطوير الجوال**: الألعاب القائمة على اللمس ومعالجة الإيماءات
+- **تطبيقات سطح المكتب**: تطبيقات Electron مع رسوم متحركة سلسة
+- **رسوم الويب**: مكتبات الرسوم المتحركة باستخدام CSS وJavaScript
+
+**المهارات المهنية المكتسبة**: يمكنك الآن:
+- **تصميم** أنظمة قائمة على الأحداث تتوسع مع التعقيد
+- **تنفيذ** رسوم متحركة سلسة باستخدام المبادئ الرياضية
+- **تصحيح** أنظمة التفاعل المعقدة باستخدام أدوات المطور في المتصفح
+- **تحسين** أداء اللعبة للأجهزة والمتصفحات المختلفة
+- **تصميم** هياكل كود قابلة للصيانة باستخدام أنماط مثبتة
+
+**مفاهيم تطوير الألعاب المتقنة**:
+- **إدارة معدل الإطارات**: فهم FPS وعناصر التحكم في التوقيت
+- **معالجة الإدخال**: أنظمة لوحة المفاتيح والأحداث عبر المنصات
+- **دورة حياة الكائن**: أنماط الإنشاء، التحديث، والتدمير
+- **مزامنة الحالة**: الحفاظ على حالة اللعبة متسقة عبر الإطارات
+- **هندسة الأحداث**: اتصال غير مترابط بين أنظمة اللعبة
+
+**المستوى التالي**: أنت جاهز لإضافة كشف التصادم، أنظمة التسجيل، المؤثرات الصوتية، أو استكشاف أطر عمل الألعاب الحديثة مثل Phaser أو Three.js!
+
+🌟 **إنجاز محقق**: لقد قمت ببناء نظام لعبة تفاعلي كامل مع أنماط هندسة احترافية!
+
+## الواجب
+
+[علق على الكود الخاص بك](assignment.md)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/6-space-game/4-collision-detection/README.md b/translations/ar/6-space-game/4-collision-detection/README.md
index ad9f5e1160..aea5df27b5 100644
--- a/translations/ar/6-space-game/4-collision-detection/README.md
+++ b/translations/ar/6-space-game/4-collision-detection/README.md
@@ -1,35 +1,105 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "4b1d441cfd31924084956000c0fee5a5",
-  "translation_date": "2025-10-22T14:27:18+00:00",
+  "original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
+  "translation_date": "2025-11-03T12:46:00+00:00",
   "source_file": "6-space-game/4-collision-detection/README.md",
   "language_code": "ar"
 }
 -->
-# بناء لعبة فضاء الجزء 4: إضافة الليزر واكتشاف التصادمات
+# بناء لعبة الفضاء الجزء الرابع: إضافة الليزر واكتشاف التصادمات
+
+```mermaid
+journey
+    title Your Collision Detection Journey
+    section Physics Foundation
+      Understand rectangles: 3: Student
+      Learn intersection math: 4: Student
+      Grasp coordinate systems: 4: Student
+    section Game Mechanics
+      Implement laser firing: 4: Student
+      Add object lifecycle: 5: Student
+      Create collision rules: 5: Student
+    section System Integration
+      Build collision detection: 5: Student
+      Optimize performance: 5: Student
+      Test interaction systems: 5: Student
+```
 
 ## اختبار ما قبل المحاضرة
 
 [اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/35)
 
-تذكر لحظة في فيلم "حرب النجوم" عندما أصابت قذائف البروتون الخاصة بلوك منفذ العادم في نجمة الموت. هذا الكشف الدقيق للتصادم غيّر مصير المجرة! في الألعاب، يعمل اكتشاف التصادم بنفس الطريقة - فهو يحدد متى تتفاعل الأشياء وما الذي يحدث بعد ذلك.
-
-في هذه الدرس، ستضيف أسلحة الليزر إلى لعبة الفضاء الخاصة بك وتنفذ اكتشاف التصادمات. تمامًا مثل مخططي مهام ناسا الذين يحسبون مسارات المركبات الفضائية لتجنب الحطام، ستتعلم كيفية اكتشاف تقاطع الأشياء في اللعبة. سنقسم هذا إلى خطوات يمكن إدارتها تبني على بعضها البعض.
-
-في النهاية، سيكون لديك نظام قتال يعمل حيث تدمر الليزرات الأعداء وتؤدي التصادمات إلى أحداث اللعبة. يتم استخدام نفس مبادئ التصادم هذه في كل شيء بدءًا من محاكاة الفيزياء إلى واجهات الويب التفاعلية.
+تذكر اللحظة في فيلم حرب النجوم عندما أصابت قذائف البروتون الخاصة بلوك منفذ عادم نجمة الموت. هذا الكشف الدقيق عن التصادم غيّر مصير المجرة! في الألعاب، يعمل اكتشاف التصادم بنفس الطريقة - فهو يحدد متى تتفاعل الأشياء وما الذي يحدث بعد ذلك.
+
+في هذه الدرس، ستضيف أسلحة الليزر إلى لعبة الفضاء الخاصة بك وتنفذ اكتشاف التصادم. تمامًا مثل مخططي مهام ناسا الذين يحسبون مسارات المركبات الفضائية لتجنب الحطام، ستتعلم كيفية اكتشاف تقاطع الأشياء داخل اللعبة. سنقسم هذا إلى خطوات قابلة للإدارة تبني على بعضها البعض.
+
+في النهاية، سيكون لديك نظام قتال يعمل حيث يدمر الليزر الأعداء وتؤدي التصادمات إلى أحداث داخل اللعبة. تُستخدم نفس مبادئ التصادم هذه في كل شيء بدءًا من محاكاة الفيزياء إلى واجهات الويب التفاعلية.
+
+```mermaid
+mindmap
+  root((Collision Detection))
+    Physics Concepts
+      Rectangle Boundaries
+      Intersection Testing
+      Coordinate Systems
+      Separation Logic
+    Game Objects
+      Laser Projectiles
+      Enemy Ships
+      Hero Character
+      Collision Zones
+    Lifecycle Management
+      Object Creation
+      Movement Updates
+      Destruction Marking
+      Memory Cleanup
+    Event Systems
+      Keyboard Input
+      Collision Events
+      Game State Changes
+      Audio/Visual Effects
+    Performance
+      Efficient Algorithms
+      Frame Rate Optimization
+      Memory Management
+      Spatial Partitioning
+```
 
-✅ قم بإجراء بحث صغير عن أول لعبة كمبيوتر تم كتابتها على الإطلاق. ما هي وظيفتها؟
+✅ قم بإجراء بحث صغير حول أول لعبة كمبيوتر تم كتابتها على الإطلاق. ما كانت وظيفتها؟
 
-## اكتشاف التصادمات
+## اكتشاف التصادم
 
-يعمل اكتشاف التصادمات مثل أجهزة استشعار القرب في وحدة الهبوط القمرية أبولو - فهو يتحقق باستمرار من المسافات ويطلق تنبيهات عندما تقترب الأشياء جدًا. في الألعاب، يحدد هذا النظام متى تتفاعل الأشياء وما الذي يجب أن يحدث بعد ذلك.
+يعمل اكتشاف التصادم مثل أجهزة استشعار القرب في وحدة أبولو القمرية - فهو يتحقق باستمرار من المسافات ويطلق تنبيهات عندما تقترب الأشياء جدًا. في الألعاب، يحدد هذا النظام متى تتفاعل الأشياء وما الذي يجب أن يحدث بعد ذلك.
 
-النهج الذي سنستخدمه يعامل كل كائن في اللعبة كأنه مستطيل، مشابهًا للطريقة التي تستخدم بها أنظمة مراقبة الحركة الجوية أشكالًا هندسية مبسطة لتتبع الطائرات. قد يبدو هذا النهج المستطيلي بسيطًا، لكنه فعال من حيث الحساب ويعمل جيدًا لمعظم سيناريوهات الألعاب.
+النهج الذي سنستخدمه يعامل كل كائن في اللعبة كأنه مستطيل، مشابهًا للطريقة التي تستخدم بها أنظمة مراقبة الحركة الجوية أشكالًا هندسية مبسطة لتتبع الطائرات. قد يبدو هذا النهج المستطيل بسيطًا، لكنه فعال من حيث الحساب ويعمل جيدًا لمعظم سيناريوهات الألعاب.
 
 ### تمثيل المستطيل
 
-كل كائن في اللعبة يحتاج إلى حدود إحداثيات، مشابهًا للطريقة التي رسمت بها مركبة المريخ "باثفايندر" موقعها على سطح المريخ. إليك كيفية تعريف هذه الحدود:
+كل كائن في اللعبة يحتاج إلى حدود إحداثيات، مشابهًا للطريقة التي رسم بها مسبار المريخ "Pathfinder" موقعه على سطح المريخ. إليك كيفية تعريف هذه الحدود:
+
+```mermaid
+flowchart TD
+    A["🎯 Game Object"] --> B["📍 Position (x, y)"]
+    A --> C["📏 Dimensions (width, height)"]
+    
+    B --> D["Top: y"]
+    B --> E["Left: x"]
+    
+    C --> F["Bottom: y + height"]
+    C --> G["Right: x + width"]
+    
+    D --> H["🔲 Rectangle Bounds"]
+    E --> H
+    F --> H
+    G --> H
+    
+    H --> I["Collision Detection Ready"]
+    
+    style A fill:#e3f2fd
+    style H fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 ```javascript
 rectFromGameObject() {
@@ -43,14 +113,37 @@ rectFromGameObject() {
 ```
 
 **لنقم بتفصيل هذا:**
-- **الحافة العلوية**: هي فقط المكان الذي يبدأ فيه الكائن عموديًا (موضعه y)
+- **الحافة العلوية**: هذا هو المكان الذي يبدأ فيه الكائن عموديًا (موضعه y)
 - **الحافة اليسرى**: حيث يبدأ أفقيًا (موضعه x)
 - **الحافة السفلية**: أضف الارتفاع إلى موضع y - الآن تعرف أين ينتهي!
-- **الحافة اليمنى**: أضف العرض إلى موضع x - وستحصل على الحدود الكاملة
+- **الحافة اليمنى**: أضف العرض إلى موضع x - وهكذا تحصل على الحدود الكاملة
 
 ### خوارزمية التقاطع
 
-اكتشاف تقاطع المستطيلات يستخدم منطقًا مشابهًا للطريقة التي يحدد بها تلسكوب هابل الفضائي إذا كانت الأجسام السماوية تتداخل في مجال رؤيته. تتحقق الخوارزمية من الفصل:
+اكتشاف تقاطعات المستطيلات يستخدم منطقًا مشابهًا للطريقة التي يحدد بها تلسكوب هابل الفضائي ما إذا كانت الأجسام السماوية تتداخل في مجال رؤيته. تتحقق الخوارزمية من الانفصال:
+
+```mermaid
+flowchart LR
+    A["Rectangle 1"] --> B{"Separation Tests"}
+    C["Rectangle 2"] --> B
+    
+    B --> D["R2 left > R1 right?"]
+    B --> E["R2 right < R1 left?"]
+    B --> F["R2 top > R1 bottom?"]
+    B --> G["R2 bottom < R1 top?"]
+    
+    D --> H{"Any True?"}
+    E --> H
+    F --> H
+    G --> H
+    
+    H -->|Yes| I["❌ No Collision"]
+    H -->|No| J["✅ Collision Detected"]
+    
+    style B fill:#e3f2fd
+    style I fill:#ffebee
+    style J fill:#e8f5e8
+```
 
 ```javascript
 function intersectRect(r1, r2) {
@@ -61,19 +154,41 @@ function intersectRect(r1, r2) {
 }
 ```
 
-**اختبار الفصل يعمل مثل أنظمة الرادار:**
+**اختبار الانفصال يعمل مثل أنظمة الرادار:**
 - هل المستطيل 2 بالكامل على يمين المستطيل 1؟
 - هل المستطيل 2 بالكامل على يسار المستطيل 1؟
 - هل المستطيل 2 بالكامل أسفل المستطيل 1؟
 - هل المستطيل 2 بالكامل فوق المستطيل 1؟
 
-إذا لم تكن أي من هذه الشروط صحيحة، فلا بد أن المستطيلات تتداخل. هذا النهج يشبه الطريقة التي يحدد بها مشغلو الرادار إذا كانت الطائرتان على مسافات آمنة.
+إذا لم تكن أي من هذه الشروط صحيحة، فلا بد أن المستطيلات تتداخل. هذا النهج يشبه الطريقة التي يحدد بها مشغلو الرادار ما إذا كانت الطائرتان على مسافات آمنة.
 
 ## إدارة دورة حياة الكائنات
 
-عندما يصيب الليزر العدو، يجب إزالة كلا الكائنين من اللعبة. ومع ذلك، فإن حذف الكائنات أثناء الحلقة يمكن أن يسبب أعطالًا - درس تعلمناه بالطريقة الصعبة في أنظمة الكمبيوتر المبكرة مثل كمبيوتر التوجيه أبولو. بدلاً من ذلك، نستخدم نهج "التحديد للحذف" الذي يزيل الكائنات بأمان بين الإطارات.
+عندما يصيب الليزر العدو، يجب إزالة كلا الكائنين من اللعبة. ومع ذلك، فإن حذف الكائنات أثناء الحلقة يمكن أن يسبب أعطالًا - درس تعلمناه بالطريقة الصعبة في أنظمة الكمبيوتر المبكرة مثل كمبيوتر التوجيه أبولو. بدلاً من ذلك، نستخدم نهج "التعليم للحذف" الذي يزيل الكائنات بأمان بين الإطارات.
 
-إليك كيفية تحديد شيء ما للإزالة:
+```mermaid
+stateDiagram-v2
+    [*] --> Active: Object Created
+    Active --> Collided: Collision Detected
+    Collided --> MarkedDead: Set dead = true
+    MarkedDead --> Filtered: Next Frame
+    Filtered --> [*]: Object Removed
+    
+    Active --> OutOfBounds: Leaves Screen
+    OutOfBounds --> MarkedDead
+    
+    note right of MarkedDead
+        Safe to continue
+        current frame
+    end note
+    
+    note right of Filtered
+        Objects removed
+        between frames
+    end note
+```
+
+إليك كيفية تعليم شيء ما للإزالة:
 
 ```javascript
 // Mark object for removal
@@ -81,11 +196,11 @@ enemy.dead = true;
 ```
 
 **لماذا يعمل هذا النهج:**
-- نحدد الكائن كـ "ميت" ولكن لا نحذفه على الفور
+- نعلم الكائن بأنه "ميت" ولكن لا نحذفه على الفور
 - هذا يسمح للإطار الحالي للعبة بالانتهاء بأمان
 - لا توجد أعطال من محاولة استخدام شيء قد تم حذفه بالفعل!
 
-ثم نقوم بتصفية الكائنات المحددة قبل دورة العرض التالية:
+ثم نقوم بتصفية الكائنات المعلمة قبل دورة العرض التالية:
 
 ```javascript
 gameObjects = gameObjects.filter(go => !go.dead);
@@ -93,13 +208,13 @@ gameObjects = gameObjects.filter(go => !go.dead);
 
 **ما الذي تفعله هذه التصفية:**
 - تنشئ قائمة جديدة تحتوي فقط على الكائنات "الحية"
-- تتخلص من أي شيء تم تحديده كميت
+- تتخلص من أي شيء معلم بأنه ميت
 - تحافظ على تشغيل اللعبة بسلاسة
-- تمنع تراكم الذاكرة من الكائنات المدمرة
+- تمنع تراكم الكائنات المدمرة من تضخم الذاكرة
 
 ## تنفيذ ميكانيكية الليزر
 
-تعمل مقذوفات الليزر في الألعاب على نفس مبدأ قذائف الفوتون في "ستار تريك" - فهي كائنات منفصلة تتحرك في خطوط مستقيمة حتى تصيب شيئًا ما. كل ضغطة على مفتاح المسافة تنشئ كائن ليزر جديد يتحرك عبر الشاشة.
+تعمل قذائف الليزر في الألعاب على نفس مبدأ قذائف الفوتون في ستار تريك - إنها كائنات منفصلة تتحرك في خطوط مستقيمة حتى تصطدم بشيء ما. كل ضغطة على مفتاح المسافة تنشئ كائن ليزر جديد يتحرك عبر الشاشة.
 
 لجعل هذا يعمل، نحتاج إلى تنسيق بعض الأجزاء المختلفة:
 
@@ -107,13 +222,38 @@ gameObjects = gameObjects.filter(go => !go.dead);
 - **إنشاء** كائنات الليزر التي تنطلق من موضع البطل
 - **التعامل مع** إدخال لوحة المفاتيح لتفعيل إنشاء الليزر
 - **إدارة** حركة الليزر ودورة حياته
-- **تنفيذ** التمثيل البصري لمقذوفات الليزر
+- **تنفيذ** التمثيل البصري لقذائف الليزر
 
 ## تنفيذ التحكم في معدل الإطلاق
 
-معدلات الإطلاق غير المحدودة ستثقل محرك اللعبة وتجعل اللعب سهلاً للغاية. تواجه أنظمة الأسلحة الحقيقية قيودًا مشابهة - حتى الفيزرات الخاصة بـ USS Enterprise تحتاج إلى وقت لإعادة الشحن بين الطلقات.
+معدلات الإطلاق غير المحدودة ستثقل محرك اللعبة وتجعل اللعب سهلاً للغاية. تواجه أنظمة الأسلحة الحقيقية قيودًا مشابهة - حتى الفيزرات الخاصة بسفينة USS Enterprise تحتاج إلى وقت لإعادة الشحن بين الطلقات.
 
-سننفذ نظام تبريد يمنع الإطلاق السريع المتكرر مع الحفاظ على التحكم السريع:
+سننفذ نظام تبريد يمنع إطلاق النار السريع مع الحفاظ على التحكم السريع:
+
+```mermaid
+sequenceDiagram
+    participant Player
+    participant Weapon
+    participant Cooldown
+    participant Game
+    
+    Player->>Weapon: Press Spacebar
+    Weapon->>Cooldown: Check if cool
+    
+    alt Weapon is Ready
+        Cooldown->>Weapon: cool = true
+        Weapon->>Game: Create Laser
+        Weapon->>Cooldown: Start new cooldown
+        Cooldown->>Cooldown: cool = false
+        
+        Note over Cooldown: Wait 500ms
+        
+        Cooldown->>Cooldown: cool = true
+    else Weapon is Cooling
+        Cooldown->>Weapon: cool = false
+        Weapon->>Player: No action
+    end
+```
 
 ```javascript
 class Cooldown {
@@ -142,28 +282,44 @@ class Weapon {
 ```
 
 **كيف يعمل التبريد:**
-- عند الإنشاء، يبدأ السلاح "ساخنًا" (لا يمكن الإطلاق بعد)
-- بعد فترة المهلة، يصبح "باردًا" (جاهز للإطلاق)
+- عند الإنشاء، يبدأ السلاح "ساخنًا" (لا يمكن إطلاقه بعد)
+- بعد فترة الانتظار، يصبح "باردًا" (جاهز للإطلاق)
 - قبل الإطلاق، نتحقق: "هل السلاح بارد؟"
-- هذا يمنع النقر المتكرر مع الحفاظ على التحكم السريع
+- هذا يمنع النقر السريع مع الحفاظ على التحكم السريع
 
-✅ ارجع إلى الدرس الأول في سلسلة لعبة الفضاء لتذكير نفسك بنظام التبريد.
+✅ ارجع إلى الدرس الأول في سلسلة لعبة الفضاء لتذكير نفسك حول أنظمة التبريد.
 
-## بناء نظام اكتشاف التصادمات
+## بناء نظام التصادم
 
-ستقوم بتوسيع كود لعبة الفضاء الحالية لإنشاء نظام اكتشاف التصادمات. مثل نظام تجنب التصادم الآلي لمحطة الفضاء الدولية، ستراقب اللعبة باستمرار مواقع الكائنات وتستجيب للتقاطعات.
+ستقوم بتوسيع كود لعبة الفضاء الحالية لإنشاء نظام اكتشاف التصادم. مثل نظام تجنب التصادم الآلي لمحطة الفضاء الدولية، ستراقب لعبتك باستمرار مواقع الكائنات وتستجيب للتقاطعات.
 
-بدءًا من كود الدرس السابق، ستضيف اكتشاف التصادمات مع قواعد محددة تحكم تفاعلات الكائنات.
+بدءًا من كود الدرس السابق، ستضيف اكتشاف التصادم مع قواعد محددة تحكم تفاعلات الكائنات.
 
-> 💡 **نصيحة احترافية**: تم تضمين صورة الليزر بالفعل في مجلد الأصول الخاص بك ومشار إليها في الكود الخاص بك، وهي جاهزة للتنفيذ.
+> 💡 **نصيحة احترافية**: صورة الليزر موجودة بالفعل في مجلد الأصول الخاص بك ومشار إليها في الكود الخاص بك، جاهزة للتنفيذ.
 
 ### قواعد التصادم التي يجب تنفيذها
 
 **ميكانيكية اللعبة التي يجب إضافتها:**
-1. **إصابة الليزر للعدو**: يتم تدمير كائن العدو عند ضربه بمقذوف الليزر
-2. **إصابة الليزر لحدود الشاشة**: يتم إزالة الليزر عند وصوله إلى الحافة العلوية للشاشة
+1. **يصيب الليزر العدو**: يتم تدمير كائن العدو عند ضربه بقذيفة ليزر
+2. **يصيب الليزر حدود الشاشة**: يتم إزالة الليزر عند وصوله إلى الحافة العلوية للشاشة
 3. **تصادم العدو والبطل**: يتم تدمير كلا الكائنين عند تقاطعهما
-4. **وصول العدو إلى الأسفل**: حالة انتهاء اللعبة عندما يصل الأعداء إلى أسفل الشاشة
+4. **يصل العدو إلى الأسفل**: حالة انتهاء اللعبة عندما يصل الأعداء إلى أسفل الشاشة
+
+### 🔄 **تقييم تربوي**
+**أساسيات اكتشاف التصادم**: قبل التنفيذ، تأكد من فهمك:
+- ✅ كيف تحدد حدود المستطيل مناطق التصادم
+- ✅ لماذا يعتبر اختبار الانفصال أكثر كفاءة من حساب التقاطع
+- ✅ أهمية إدارة دورة حياة الكائنات في حلقات اللعبة
+- ✅ كيف تنسق الأنظمة القائمة على الأحداث استجابات التصادم
+
+**اختبار سريع ذاتي**: ماذا سيحدث إذا قمت بحذف الكائنات فورًا بدلاً من تعليمها؟
+*الإجابة: قد يؤدي الحذف أثناء الحلقة إلى أعطال أو تخطي الكائنات أثناء التكرار*
+
+**فهم الفيزياء**: الآن تفهم:
+- **أنظمة الإحداثيات**: كيف تخلق المواضع والأبعاد حدودًا
+- **منطق التقاطع**: المبادئ الرياضية وراء اكتشاف التصادم
+- **تحسين الأداء**: لماذا تعتبر الخوارزميات الفعالة مهمة في الأنظمة الفورية
+- **إدارة الذاكرة**: أنماط دورة حياة الكائنات الآمنة للاستقرار
 
 ## إعداد بيئة التطوير الخاصة بك
 
@@ -197,15 +353,41 @@ npm start
 
 **تسلسل الأوامر هذا:**
 - **يغير** الدليل إلى مجلد المشروع الخاص بك
-- **يبدأ** خادم HTTP المحلي على `http://localhost:5000`
-- **يخدم** ملفات اللعبة الخاصة بك للاختبار والتطوير
-- **يمكن** التطوير المباشر مع إعادة التحميل التلقائي
+- **يبدأ** خادم HTTP محلي على `http://localhost:5000`
+- **يقدم** ملفات اللعبة الخاصة بك للاختبار والتطوير
+- **يتيح** التطوير المباشر مع إعادة التحميل التلقائي
 
 افتح متصفحك وانتقل إلى `http://localhost:5000` لرؤية حالة اللعبة الحالية مع البطل والأعداء معروضين على الشاشة.
 
 ### التنفيذ خطوة بخطوة
 
-مثل النهج المنهجي الذي استخدمته ناسا لبرمجة مركبة الفضاء "فوياجر"، سننفذ اكتشاف التصادمات بشكل منهجي، نبني كل مكون خطوة بخطوة.
+مثل النهج المنهجي الذي استخدمته ناسا لبرمجة مركبة الفضاء Voyager، سننفذ اكتشاف التصادم بشكل منهجي، نبني كل مكون خطوة بخطوة.
+
+```mermaid
+flowchart TD
+    A["1. Rectangle Bounds"] --> B["2. Intersection Detection"]
+    B --> C["3. Laser System"]
+    C --> D["4. Event Handling"]
+    D --> E["5. Collision Rules"]
+    E --> F["6. Cooldown System"]
+    
+    G["Object Boundaries"] --> A
+    H["Physics Algorithm"] --> B
+    I["Projectile Creation"] --> C
+    J["Keyboard Input"] --> D
+    K["Game Logic"] --> E
+    L["Rate Limiting"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 #### 1. إضافة حدود تصادم المستطيل
 
@@ -222,15 +404,15 @@ rectFromGameObject() {
   }
 ```
 
-**ما الذي تحققه هذه الطريقة:**
+**ما تحققه هذه الطريقة:**
 - **تنشئ** كائن مستطيل بحدود إحداثيات دقيقة
-- **تحسب** الحواف السفلية واليمنى باستخدام الموضع بالإضافة إلى الأبعاد
-- **تعيد** كائنًا جاهزًا لخوارزميات اكتشاف التصادمات
+- **تحسب** الحواف السفلية واليمنية باستخدام الموضع بالإضافة إلى الأبعاد
+- **تعيد** كائنًا جاهزًا لخوارزميات اكتشاف التصادم
 - **توفر** واجهة موحدة لجميع كائنات اللعبة
 
 #### 2. تنفيذ اكتشاف التقاطع
 
-الآن دعنا ننشئ محقق التصادمات - وظيفة يمكنها تحديد متى تتداخل مستطيلات:
+الآن دعنا ننشئ محقق التصادم - وظيفة يمكنها تحديد ما إذا كانت مستطيلاتان تتداخلان:
 
 ```javascript
 function intersectRect(r1, r2) {
@@ -244,9 +426,9 @@ function intersectRect(r1, r2) {
 ```
 
 **تعمل هذه الخوارزمية عن طريق:**
-- **اختبار** أربعة شروط فصل بين المستطيلات
-- **تعيد** `false` إذا كان أي شرط فصل صحيحًا
-- **تشير** إلى التصادم عندما لا يوجد فصل
+- **اختبار** أربعة شروط انفصال بين المستطيلات
+- **تعيد** `false` إذا كان أي شرط انفصال صحيحًا
+- **تشير** إلى التصادم عندما لا يوجد انفصال
 - **تستخدم** منطق النفي لاختبار التقاطع بكفاءة
 
 #### 3. تنفيذ نظام إطلاق الليزر
@@ -255,7 +437,7 @@ function intersectRect(r1, r2) {
 
 ##### ثوابت الرسائل
 
-أولاً، دعنا نحدد بعض أنواع الرسائل حتى تتمكن أجزاء مختلفة من اللعبة من التواصل مع بعضها البعض:
+أولاً، دعنا نحدد بعض أنواع الرسائل حتى تتمكن أجزاء مختلفة من لعبتنا من التواصل مع بعضها البعض:
 
 ```javascript
 KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
@@ -280,8 +462,8 @@ COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
 
 **هذا المعالج للإدخال:**
 - **يكتشف** ضغطات مفتاح المسافة باستخدام keyCode 32
-- **يبث** رسالة حدث موحدة
-- **يمكن** منطق الإطلاق المنفصل
+- **يرسل** رسالة حدث موحدة
+- **يمكن** منطق الإطلاق المفصول
 
 ##### إعداد مستمع الحدث
 
@@ -300,7 +482,7 @@ eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
 - **يتحقق** من حالة تبريد الإطلاق
 - **يفعل** إنشاء الليزر عند السماح بذلك
 
-أضف معالجة التصادم لتفاعلات الليزر مع العدو:
+أضف معالجة التصادم لتفاعلات الليزر-العدو:
 
 ```javascript
 eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -311,12 +493,12 @@ eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
 
 **هذا المعالج للتصادم:**
 - **يتلقى** بيانات حدث التصادم مع كلا الكائنين
-- **يحدد** كلا الكائنين للإزالة
+- **يعلم** كلا الكائنين للإزالة
 - **يضمن** التنظيف المناسب بعد التصادم
 
 #### 4. إنشاء فئة الليزر
 
-نفذ مقذوف ليزر يتحرك للأعلى ويدير دورة حياته الخاصة:
+نفذ قذيفة ليزر تتحرك للأعلى وتدير دورة حياتها الخاصة:
 
 ```javascript
 class Laser extends GameObject {
@@ -340,15 +522,15 @@ class Laser extends GameObject {
 ```
 
 **تنفيذ هذه الفئة:**
-- **يمدد** GameObject ليرث الوظائف الأساسية
-- **يضبط** الأبعاد المناسبة لصورة الليزر
-- **ينشئ** حركة تلقائية للأعلى باستخدام `setInterval()`
-- **يتعامل** مع التدمير الذاتي عند الوصول إلى أعلى الشاشة
-- **يدير** توقيت الرسوم المتحركة والتنظيف الخاص به
+- **تمدد** GameObject لتوريث الوظائف الأساسية
+- **تحدد** الأبعاد المناسبة لصورة الليزر
+- **تنشئ** حركة تلقائية للأعلى باستخدام `setInterval()`
+- **تتعامل** مع التدمير الذاتي عند الوصول إلى أعلى الشاشة
+- **تدير** توقيت الرسوم المتحركة والتنظيف الخاص بها
 
-#### 5. تنفيذ نظام اكتشاف التصادمات
+#### 5. تنفيذ نظام اكتشاف التصادم
 
-أنشئ وظيفة شاملة لاكتشاف التصادمات:
+أنشئ وظيفة اكتشاف التصادم الشاملة:
 
 ```javascript
 function updateGameObjects() {
@@ -372,15 +554,15 @@ function updateGameObjects() {
 }
 ```
 
-**هذا النظام للتصادمات:**
+**هذا النظام للتصادم:**
 - **يصفي** كائنات اللعبة حسب النوع لاختبار فعال
 - **يختبر** كل ليزر ضد كل عدو للتقاطعات
-- **يبث** أحداث التصادم عند اكتشاف التقاطعات
-- **ينظف** الكائنات المدمرة بعد معالجة التصادمات
+- **يرسل** أحداث التصادم عند اكتشاف التقاطعات
+- **ينظف** الكائنات المدمرة بعد معالجة التصادم
 
-> ⚠️ **هام**: أضف `updateGameObjects()` إلى الحلقة الرئيسية للعبة في `window.onload` لتمكين اكتشاف التصادمات.
+> ⚠️ **هام**: أضف `updateGameObjects()` إلى الحلقة الرئيسية للعبة في `window.onload` لتمكين اكتشاف التصادم.
 
-#### 6. إضافة نظام التبريد إلى فئة البطل
+#### 6. أضف نظام التبريد إلى فئة البطل
 
 عزز فئة البطل بميكانيكية الإطلاق وتحديد معدل الإطلاق:
 
@@ -415,35 +597,170 @@ class Hero extends GameObject {
 ```
 
 **فهم فئة البطل المحسنة:**
-- **يبدأ** مؤقت التبريد عند الصفر (جاهز للإطلاق)
-- **ينشئ** كائنات الليزر المتمركزة فوق سفينة البطل
-- **يضبط** فترة التبريد لمنع الإطلاق السريع
-- **يقلل** مؤقت التبريد باستخدام تحديثات تعتمد على الفاصل الزمني
-- **يوفر** فحص حالة الإطلاق من خلال طريقة `canFire()`
+- **تبدأ** مؤقت التبريد عند الصفر (جاهز للإطلاق)
+- **تنشئ** كائنات الليزر المتمركزة فوق سفينة البطل
+- **تحدد** فترة التبريد لمنع الإطلاق السريع
+- **تقلل** مؤقت التبريد باستخدام تحديثات تعتمد على الفاصل الزمني
+- **توفر** فحص حالة الإطلاق من خلال طريقة `canFire()`
+
+### 🔄 **تقييم تربوي**
+**فهم النظام الكامل**: تحقق من إتقانك لنظام التصادم:
+- ✅ كيف تمكن حدود المستطيل من اكتشاف التصادم بكفاءة؟
+- ✅ لماذا تعتبر إدارة دورة حياة الكائنات ضرورية لاستقرار اللعبة؟
+- ✅ كيف يمنع نظام التبريد مشاكل الأداء؟
+- ✅ ما دور بنية الأحداث في معالجة التصادم؟
+
+**تكامل النظام**: يظهر اكتشاف التصادم الخاص بك:
+- **الدقة الرياضية**: خوارزميات تقاطع المستطيلات
+- **تحسين الأداء**: أنماط اختبار التصادم الفعالة
+- **إدارة الذاكرة**: إنشاء الكائنات وتدميرها بأمان
+- **تنسيق الأحداث**: التواصل المنفصل بين الأنظمة
+- **المعالجة الفورية**: دورات التحديث القائمة على الإطار
+
+**أنماط احترافية**: لقد نفذت:
+- **فصل الاهتمامات**: الفيزياء، العرض، والإدخال مفصولة
+- **تصميم موجه للكائنات**: الوراثة وتعدد الأشكال
+- **إدارة الحالة**: تتبع دورة حياة الكائنات وحالة اللعبة
+- **تحسين الأداء**: خوارزميات فعالة للاستخدام الفوري
 
 ### اختبار التنفيذ الخاص بك
 
-تتميز لعبة الفضاء الخاصة بك الآن بنظام اكتشاف التصادمات الكامل وميكانيكية القتال. 🚀 اختبر هذه القدرات الجديدة:
-- **تنقل** باستخدام مفاتيح الأسهم للتحقق من التحكم في الحركة
-- **أطلق الليزر** باستخدام مفتاح المسافة - لاحظ كيف يمنع التبريد النقر المتكرر
-- **راقب التصادمات** عندما تصيب الليزرات الأعداء، مما يؤدي إلى الإزالة
+تتميز لعبة الفضاء الخاصة بك الآن باكتشاف التصادم الكامل وميكانيكية القتال. 🚀 اختبر هذه القدرات الجديدة:
+- **تنقل** باستخدام مفاتيح الأسهم للتحقق من عناصر التحكم في الحركة
+- **أطلق الليزر** باستخدام مفتاح المسافة - لاحظ كيف يمنع التبريد النقر السريع
+- **راقب التصادمات** عندما يصيب الليزر الأعداء، مما يؤدي إلى الإزالة
 - **تحقق من التنظيف** حيث تختفي الكائنات المدمرة من اللعبة
 
-لقد نجحت في تنفيذ نظام اكتشاف التصادمات باستخدام نفس المبادئ الرياضية التي توجه الملاحة الفضائية والروبوتات.
+لقد نجحت في تنفيذ نظام اكتشاف التصادم باستخدام نفس المبادئ الرياضية التي توجه الملاحة الفضائية والروبوتات.
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] افتح أدوات المطور في المتصفح وقم بتعيين نقاط توقف في وظيفة اكتشاف التصادم الخاصة بك
+- [ ] حاول تعديل سرعة الليزر أو حركة العدو لرؤية تأثيرات التصادم
+- [ ] جرب قيم تبريد مختلفة لاختبار معدلات الإطلاق
+- [ ] أضف عبارات `console.log` لتتبع أحداث الاصطدام في الوقت الفعلي
+
+### 🎯 **ما يمكنك إنجازه خلال هذه الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وافهم خوارزميات اكتشاف الاصطدام
+- [ ] أضف تأثيرات بصرية مثل الانفجارات عند حدوث الاصطدامات
+- [ ] نفذ أنواعًا مختلفة من المقذوفات بخصائص متنوعة
+- [ ] أنشئ تعزيزات تزيد من قدرات اللاعب مؤقتًا
+- [ ] أضف تأثيرات صوتية لجعل الاصطدامات أكثر إرضاءً
+
+### 📅 **برمجة الفيزياء الخاصة بك على مدار الأسبوع**
+- [ ] أكمل لعبة الفضاء بالكامل مع أنظمة اصطدام مصقولة
+- [ ] نفذ أشكال اصطدام متقدمة تتجاوز المستطيلات (دوائر، مضلعات)
+- [ ] أضف أنظمة الجسيمات لتأثيرات انفجار واقعية
+- [ ] أنشئ سلوكًا معقدًا للأعداء مع تجنب الاصطدام
+- [ ] قم بتحسين اكتشاف الاصطدام للحصول على أداء أفضل مع العديد من الكائنات
+- [ ] أضف محاكاة فيزيائية مثل الزخم والحركة الواقعية
+
+### 🌟 **إتقانك لفيزياء الألعاب على مدار الشهر**
+- [ ] قم ببناء ألعاب باستخدام محركات فيزيائية متقدمة ومحاكاة واقعية
+- [ ] تعلم اكتشاف الاصطدام ثلاثي الأبعاد وخوارزميات تقسيم الفضاء
+- [ ] ساهم في مكتبات الفيزياء مفتوحة المصدر ومحركات الألعاب
+- [ ] أتقن تحسين الأداء للتطبيقات المكثفة للرسومات
+- [ ] أنشئ محتوى تعليميًا حول فيزياء الألعاب واكتشاف الاصطدام
+- [ ] قم ببناء ملف أعمال يعرض مهارات البرمجة الفيزيائية المتقدمة
+
+## 🎯 جدول زمني لإتقان اكتشاف الاصطدام
+
+```mermaid
+timeline
+    title Collision Detection & Game Physics Learning Progression
+    
+    section Foundation (10 minutes)
+        Rectangle Math: Coordinate systems
+                      : Boundary calculations
+                      : Position tracking
+                      : Dimension management
+        
+    section Algorithm Design (20 minutes)
+        Intersection Logic: Separation testing
+                          : Overlap detection
+                          : Performance optimization
+                          : Edge case handling
+        
+    section Game Implementation (30 minutes)
+        Object Systems: Lifecycle management
+                      : Event coordination
+                      : State tracking
+                      : Memory cleanup
+        
+    section Interactive Features (40 minutes)
+        Combat Mechanics: Projectile systems
+                        : Weapon cooldowns
+                        : Damage calculation
+                        : Visual feedback
+        
+    section Advanced Physics (50 minutes)
+        Real-time Systems: Frame rate optimization
+                         : Spatial partitioning
+                         : Collision response
+                         : Physics simulation
+        
+    section Professional Techniques (1 week)
+        Game Engine Concepts: Component systems
+                             : Physics pipelines
+                             : Performance profiling
+                             : Cross-platform optimization
+        
+    section Industry Applications (1 month)
+        Production Skills: Large-scale optimization
+                         : Team collaboration
+                         : Engine development
+                         : Platform deployment
+```
+
+### 🛠️ ملخص أدوات فيزياء الألعاب الخاصة بك
+
+بعد إكمال هذا الدرس، أصبحت الآن متقنًا:
+- **رياضيات الاصطدام**: خوارزميات تقاطع المستطيلات وأنظمة الإحداثيات
+- **تحسين الأداء**: اكتشاف الاصطدام بكفاءة للتطبيقات في الوقت الفعلي
+- **إدارة دورة حياة الكائنات**: أنماط آمنة لإنشاء وتحديث وتدمير الكائنات
+- **هندسة قائمة على الأحداث**: أنظمة مفصولة للاستجابة للاصطدام
+- **تكامل حلقة اللعبة**: تحديثات الفيزياء القائمة على الإطار وتنسيق العرض
+- **أنظمة الإدخال**: تحكم استجابي مع تحديد معدل التغذية الراجعة
+- **إدارة الذاكرة**: استراتيجيات فعالة لتجميع الكائنات وتنظيفها
+
+**تطبيقات واقعية**: مهاراتك في اكتشاف الاصطدام تنطبق مباشرة على:
+- **المحاكاة التفاعلية**: النمذجة العلمية والأدوات التعليمية
+- **تصميم واجهة المستخدم**: تفاعلات السحب والإفلات واكتشاف اللمس
+- **تصور البيانات**: الرسوم البيانية التفاعلية والعناصر القابلة للنقر
+- **تطوير التطبيقات المحمولة**: التعرف على إيماءات اللمس ومعالجة الاصطدام
+- **برمجة الروبوتات**: تخطيط المسار وتجنب العقبات
+- **رسومات الحاسوب**: تتبع الأشعة والخوارزميات المكانية
+
+**المهارات المهنية المكتسبة**: يمكنك الآن:
+- **تصميم** خوارزميات فعالة لاكتشاف الاصطدام في الوقت الفعلي
+- **تنفيذ** أنظمة فيزيائية تتكيف مع تعقيد الكائنات
+- **تصحيح الأخطاء** في أنظمة التفاعل المعقدة باستخدام المبادئ الرياضية
+- **تحسين** الأداء للأجهزة المختلفة وقدرات المتصفح
+- **تصميم** أنظمة ألعاب قابلة للصيانة باستخدام أنماط تصميم مثبتة
+
+**مفاهيم تطوير الألعاب التي تم إتقانها**:
+- **محاكاة الفيزياء**: اكتشاف الاصطدام والاستجابة في الوقت الفعلي
+- **هندسة الأداء**: خوارزميات محسنة للتطبيقات التفاعلية
+- **أنظمة الأحداث**: اتصال مفصول بين مكونات اللعبة
+- **إدارة الكائنات**: أنماط دورة حياة فعالة للمحتوى الديناميكي
+- **معالجة الإدخال**: تحكم استجابي مع تغذية راجعة مناسبة
+
+**المستوى التالي**: أنت جاهز لاستكشاف محركات الفيزياء المتقدمة مثل Matter.js، وتنفيذ اكتشاف الاصطدام ثلاثي الأبعاد، أو بناء أنظمة جسيمات معقدة!
+
+🌟 **إنجاز محقق**: لقد قمت ببناء نظام تفاعل كامل قائم على الفيزياء مع اكتشاف اصطدام بمستوى احترافي!
 
 ## تحدي GitHub Copilot Agent 🚀
 
 استخدم وضع الوكيل لإكمال التحدي التالي:
 
-**الوصف:** عزز نظام اكتشاف التصادمات من خلال تنفيذ تعزيزات تظهر بشكل عشوائي وتوفر قدرات مؤقتة عند جمعها بواسطة سفينة البطل.
+**الوصف:** قم بتحسين نظام اكتشاف الاصطدام من خلال تنفيذ تعزيزات تظهر بشكل عشوائي وتوفر قدرات مؤقتة عند جمعها بواسطة سفينة البطل.
 
-**المهمة:** أنشئ فئة PowerUp التي تمد GameObject ونفذ اكتشاف التصادم بين البطل والتعزيزات. أضف نوعين على الأقل من التعزيزات: واحد يزيد معدل الإطلاق (يقلل التبريد) وآخر ينشئ درعًا مؤقتًا. قم بتضمين منطق الظهور الذي ينشئ التعزيزات على فترات ومواقع عشوائية.
+**المهمة:** أنشئ فئة PowerUp التي تمتد من GameObject ونفذ اكتشاف الاصطدام بين البطل والتعزيزات. أضف نوعين على الأقل من التعزيزات: واحدة تزيد من معدل إطلاق النار (تقلل من وقت التبريد) وأخرى تنشئ درعًا مؤقتًا. قم بتضمين منطق الإنشاء الذي ينشئ التعزيزات على فترات ومواقع عشوائية.
 
 ---
 
 ## 🚀 التحدي
 
-أضف انفجارًا! ألقِ نظرة على أصول اللعبة في [مستودع فن الفضاء](../../../../6-space-game/solution/spaceArt/readme.txt) وحاول إضافة انفجار عندما يصيب الليزر كائنًا فضائيًا.
+أضف انفجارًا! ألقِ نظرة على أصول اللعبة في [مستودع فن الفضاء](../../../../6-space-game/solution/spaceArt/readme.txt) وحاول إضافة انفجار عندما يصطدم الليزر بكائن فضائي.
 
 ## اختبار ما بعد المحاضرة
 
@@ -451,11 +768,11 @@ class Hero extends GameObject {
 
 ## المراجعة والدراسة الذاتية
 
-جرب الفواصل الزمنية في لعبتك حتى الآن. ماذا يحدث عندما تغيرها؟ اقرأ المزيد عن [أحداث توقيت JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+جرب تغيير الفواصل الزمنية في لعبتك حتى الآن. ماذا يحدث عندما تغيرها؟ اقرأ المزيد عن [أحداث توقيت JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
 
 ## الواجب
 
-[استكشاف التصادمات](assignment.md)
+[استكشاف الاصطدامات](assignment.md)
 
 ---
 
diff --git a/translations/ar/6-space-game/5-keeping-score/README.md b/translations/ar/6-space-game/5-keeping-score/README.md
index 9886b0b506..d475358d8c 100644
--- a/translations/ar/6-space-game/5-keeping-score/README.md
+++ b/translations/ar/6-space-game/5-keeping-score/README.md
@@ -1,24 +1,91 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d642759cf1542f554871f74956a59af9",
-  "translation_date": "2025-10-22T14:28:27+00:00",
+  "original_hash": "2ed9145a16cf576faa2a973dff84d099",
+  "translation_date": "2025-11-03T12:47:44+00:00",
   "source_file": "6-space-game/5-keeping-score/README.md",
   "language_code": "ar"
 }
 -->
 # بناء لعبة فضاء الجزء الخامس: النقاط والأرواح
 
+```mermaid
+journey
+    title Your Game Design Journey
+    section Player Feedback
+      Understand scoring psychology: 3: Student
+      Learn visual communication: 4: Student
+      Design reward systems: 4: Student
+    section Technical Implementation
+      Canvas text rendering: 4: Student
+      State management: 5: Student
+      Event-driven updates: 5: Student
+    section Game Polish
+      User experience design: 5: Student
+      Balance challenge and reward: 5: Student
+      Create engaging gameplay: 5: Student
+```
+
 ## اختبار ما قبل المحاضرة
 
 [اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/37)
 
-هل أنت مستعد لجعل لعبة الفضاء الخاصة بك تبدو وكأنها لعبة حقيقية؟ دعنا نضيف نظام النقاط وإدارة الأرواح - الآليات الأساسية التي حولت ألعاب الأركيد المبكرة مثل Space Invaders من مجرد عروض بسيطة إلى وسائل ترفيهية ممتعة. هنا تصبح لعبتك قابلة للعب بشكل حقيقي.
+هل أنت مستعد لجعل لعبة الفضاء الخاصة بك تبدو وكأنها لعبة حقيقية؟ دعنا نضيف نظام النقاط وإدارة الأرواح - الآليات الأساسية التي حولت ألعاب الأركيد المبكرة مثل Space Invaders من مجرد عروض بسيطة إلى ترفيه ممتع. هنا تصبح لعبتك قابلة للعب بشكل حقيقي.
+
+```mermaid
+mindmap
+  root((Game Feedback Systems))
+    Visual Communication
+      Text Rendering
+      Icon Display
+      Color Psychology
+      Layout Design
+    Scoring Mechanics
+      Point Values
+      Reward Timing
+      Progress Tracking
+      Achievement Systems
+    Life Management
+      Risk vs Reward
+      Player Agency
+      Difficulty Balance
+      Recovery Mechanics
+    User Experience
+      Immediate Feedback
+      Clear Information
+      Emotional Response
+      Engagement Loops
+    Implementation
+      Canvas API
+      State Management
+      Event Systems
+      Performance
+```
 
-## رسم النص على الشاشة - صوت لعبتك
+## عرض النص على الشاشة - صوت لعبتك
 
 لإظهار النقاط الخاصة بك، نحتاج إلى تعلم كيفية عرض النص على اللوحة. طريقة `fillText()` هي أداتك الأساسية لهذا - إنها نفس التقنية المستخدمة في ألعاب الأركيد الكلاسيكية لعرض النقاط ومعلومات الحالة.
 
+```mermaid
+flowchart LR
+    A["📝 Text Content"] --> B["🎨 Styling"]
+    B --> C["📍 Positioning"]
+    C --> D["🖼️ Canvas Render"]
+    
+    E["Font Family"] --> B
+    F["Font Size"] --> B
+    G["Color"] --> B
+    H["Alignment"] --> B
+    
+    I["X Coordinate"] --> C
+    J["Y Coordinate"] --> C
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
+
 لديك سيطرة كاملة على مظهر النص:
 
 ```javascript
@@ -28,20 +95,72 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ استكشف المزيد حول [إضافة النص إلى اللوحة](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) - قد تفاجأ بمدى الإبداع الذي يمكنك تحقيقه باستخدام الخطوط والتنسيقات!
+✅ استكشف المزيد حول [إضافة النص إلى اللوحة](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) - قد تتفاجأ بمدى الإبداع الذي يمكنك تحقيقه باستخدام الخطوط والتنسيق!
 
 ## الأرواح - أكثر من مجرد رقم
 
 في تصميم الألعاب، تمثل "الحياة" هامش الخطأ للاعب. يعود هذا المفهوم إلى آلات الكرة والدبابيس، حيث تحصل على عدة كرات للعب بها. في ألعاب الفيديو المبكرة مثل Asteroids، كانت الأرواح تمنح اللاعبين الإذن للمخاطرة والتعلم من الأخطاء.
 
-التمثيل البصري مهم للغاية - عرض أيقونات السفن بدلاً من مجرد "الأرواح: 3" يخلق تعرفًا بصريًا فوريًا، مشابهًا للطريقة التي استخدمت بها خزائن الأركيد المبكرة الرموز للتواصل عبر الحواجز اللغوية.
+```mermaid
+flowchart TD
+    A["🎮 Player Action"] --> B{"Risk Assessment"}
+    
+    B --> C["High Risk, High Reward"]
+    B --> D["Safe Strategy"]
+    
+    C --> E{"Outcome"}
+    D --> F["Steady Progress"]
+    
+    E -->|Success| G["🏆 Big Points"]
+    E -->|Failure| H["💔 Lose Life"]
+    
+    H --> I{"Lives Remaining?"}
+    I -->|Yes| J["🔄 Try Again"]
+    I -->|No| K["💀 Game Over"]
+    
+    J --> B
+    G --> B
+    F --> B
+    
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+    style G fill:#e3f2fd
+    style H fill:#fff3e0
+```
+
+التمثيل البصري مهم للغاية - عرض أيقونات السفن بدلاً من مجرد "أرواح: 3" يخلق اعترافًا بصريًا فوريًا، مشابهًا للطريقة التي استخدمت بها خزائن الأركيد المبكرة الرموز للتواصل عبر الحواجز اللغوية.
 
 ## بناء نظام المكافآت في لعبتك
 
 الآن سنقوم بتنفيذ أنظمة التغذية الراجعة الأساسية التي تبقي اللاعبين متحمسين:
 
-- **نظام النقاط**: كل سفينة عدو يتم تدميرها تمنح 100 نقطة (الأرقام المستديرة أسهل للاعبين لحسابها ذهنياً). يتم عرض النقاط في الزاوية السفلية اليسرى.
-- **عداد الأرواح**: يبدأ البطل بثلاث أرواح - معيار تم تحديده بواسطة ألعاب الأركيد المبكرة لتحقيق التوازن بين التحدي وقابلية اللعب. كل اصطدام مع عدو يكلف حياة واحدة. سنعرض الأرواح المتبقية في الزاوية السفلية اليمنى باستخدام أيقونات السفن ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ar.png).
+```mermaid
+sequenceDiagram
+    participant Player
+    participant GameEngine
+    participant ScoreSystem
+    participant LifeSystem
+    participant Display
+    
+    Player->>GameEngine: Shoots Enemy
+    GameEngine->>ScoreSystem: Award Points
+    ScoreSystem->>ScoreSystem: +100 points
+    ScoreSystem->>Display: Update Score
+    
+    Player->>GameEngine: Collides with Enemy
+    GameEngine->>LifeSystem: Lose Life
+    LifeSystem->>LifeSystem: -1 life
+    LifeSystem->>Display: Update Lives
+    
+    alt Lives > 0
+        LifeSystem->>Player: Continue Playing
+    else Lives = 0
+        LifeSystem->>GameEngine: Game Over
+    end
+```
+
+- **نظام النقاط**: كل سفينة عدو يتم تدميرها تمنح 100 نقطة (الأرقام المستديرة أسهل للاعبين لحسابها ذهنيًا). يتم عرض النقاط في الزاوية السفلية اليسرى.
+- **عداد الأرواح**: يبدأ بطلك بثلاث أرواح - معيار تم تحديده بواسطة ألعاب الأركيد المبكرة لتحقيق التوازن بين التحدي وقابلية اللعب. كل تصادم مع عدو يكلفك حياة واحدة. سنعرض الأرواح المتبقية في الزاوية السفلية اليمنى باستخدام أيقونات السفن ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ar.png).
 
 ## لنبدأ البناء!
 
@@ -66,9 +185,35 @@ npm start
 
 سيقوم هذا بتشغيل خادم محلي على `http://localhost:5000`. افتح هذا العنوان في متصفحك لرؤية لعبتك. اختبر التحكم باستخدام مفاتيح الأسهم وحاول إطلاق النار على الأعداء للتحقق من أن كل شيء يعمل.
 
+```mermaid
+flowchart TD
+    A["1. Asset Loading"] --> B["2. Game Variables"]
+    B --> C["3. Collision Detection"]
+    C --> D["4. Hero Enhancement"]
+    D --> E["5. Display Functions"]
+    E --> F["6. Event Handlers"]
+    
+    G["Life Icon Image"] --> A
+    H["Score & Lives Tracking"] --> B
+    I["Hero-Enemy Intersections"] --> C
+    J["Points & Life Methods"] --> D
+    K["Text & Icon Rendering"] --> E
+    L["Reward & Penalty Logic"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
+
 ### حان وقت البرمجة!
 
-1. **احصل على الأصول البصرية التي تحتاجها**. انسخ ملف `life.png` من مجلد `solution/assets/` إلى مجلد `your-work`. ثم أضف `lifeImg` إلى وظيفة `window.onload` الخاصة بك:
+1. **احصل على الأصول البصرية التي ستحتاجها**. انسخ ملف `life.png` من مجلد `solution/assets/` إلى مجلد `your-work`. ثم أضف lifeImg إلى وظيفة window.onload الخاصة بك:
 
     ```javascript
     lifeImg = await loadTexture("assets/life.png");
@@ -84,9 +229,9 @@ npm start
     eventEmitter = new EventEmitter();
     ```
   
-2. **قم بإعداد متغيرات اللعبة الخاصة بك**. أضف بعض الأكواد لتتبع إجمالي النقاط (يبدأ من 0) والأرواح المتبقية (تبدأ من 3). سنعرض هذه على الشاشة حتى يعرف اللاعبون دائمًا مكانهم.
+2. **قم بإعداد متغيرات اللعبة الخاصة بك**. أضف بعض الأكواد لتتبع إجمالي النقاط (تبدأ من 0) والأرواح المتبقية (تبدأ من 3). سنعرض هذه على الشاشة حتى يعرف اللاعبون دائمًا مكانهم.
 
-3. **تنفيذ اكتشاف الاصطدام**. قم بتمديد وظيفة `updateGameObjects()` لاكتشاف عندما تصطدم الأعداء بالبطل الخاص بك:
+3. **تنفيذ اكتشاف التصادم**. قم بتوسيع وظيفة `updateGameObjects()` لاكتشاف عندما تصطدم الأعداء مع بطلك:
 
     ```javascript
     enemies.forEach(enemy => {
@@ -97,7 +242,7 @@ npm start
       })
     ```
 
-4. **أضف تتبع الأرواح والنقاط إلى البطل الخاص بك**. 
+4. **أضف تتبع الأرواح والنقاط إلى بطلك**. 
    1. **تهيئة العدادات**. تحت `this.cooldown = 0` في فئة `Hero`، قم بإعداد الأرواح والنقاط:
 
         ```javascript
@@ -132,16 +277,32 @@ npm start
 
         ```
 
-   1. **ربط كل شيء بحلقة اللعبة الخاصة بك**. أضف هذه الوظائف إلى وظيفة `window.onload` مباشرة بعد `updateGameObjects()`:
+   1. **ربط كل شيء بحلقة اللعبة الخاصة بك**. أضف هذه الوظائف إلى وظيفة window.onload الخاصة بك مباشرة بعد `updateGameObjects()`:
 
         ```javascript
         drawPoints();
         drawLife();
         ```
 
-1. **تنفيذ عواقب اللعبة والمكافآت**. الآن سنضيف أنظمة التغذية الراجعة التي تجعل تصرفات اللاعب ذات معنى:
+### 🔄 **مراجعة تربوية**
+**فهم تصميم الألعاب**: قبل تنفيذ العواقب، تأكد من فهمك:
+- ✅ كيف يعبر التغذية البصرية عن حالة اللعبة للاعبين
+- ✅ لماذا يحسن وضع عناصر واجهة المستخدم بشكل متسق سهولة الاستخدام
+- ✅ علم النفس وراء قيم النقاط وإدارة الأرواح
+- ✅ كيف يختلف عرض النص على اللوحة عن النص في HTML
+
+**اختبار سريع ذاتي**: لماذا تستخدم ألعاب الأركيد عادةً أرقامًا مستديرة لقيم النقاط؟
+*الإجابة: الأرقام المستديرة أسهل للاعبين لحسابها ذهنيًا وتخلق مكافآت نفسية مرضية*
+
+**مبادئ تجربة المستخدم**: أنت الآن تطبق:
+- **التسلسل الهرمي البصري**: وضع المعلومات المهمة بشكل بارز
+- **التغذية الفورية**: تحديثات في الوقت الفعلي لإجراءات اللاعب
+- **عبء الإدراك**: تقديم معلومات بسيطة وواضحة
+- **التصميم العاطفي**: أيقونات وألوان تخلق ارتباطًا مع اللاعب
 
-   1. **الاصطدامات تكلف الأرواح**. في كل مرة يصطدم فيها البطل الخاص بك مع عدو، يجب أن تخسر حياة.
+1. **تنفيذ عواقب اللعبة والمكافآت**. الآن سنضيف أنظمة التغذية الراجعة التي تجعل إجراءات اللاعب ذات معنى:
+
+   1. **التصادمات تكلف الأرواح**. في كل مرة يصطدم بطلك مع عدو، يجب أن تخسر حياة.
    
       أضف هذه الطريقة إلى فئة `Hero` الخاصة بك:
 
@@ -154,9 +315,9 @@ npm start
         }
         ```
 
-   2. **إطلاق النار على الأعداء يكسب النقاط**. كل ضربة ناجحة تمنح 100 نقطة، مما يوفر تغذية راجعة إيجابية فورية للتصويب الدقيق.
+   2. **إطلاق النار على الأعداء يكسب النقاط**. كل ضربة ناجحة تمنح 100 نقطة، مما يوفر تغذية إيجابية فورية لإطلاق النار بدقة.
 
-      قم بتمديد فئة Hero بهذه الطريقة الإضافية:
+      قم بتوسيع فئة Hero الخاصة بك بهذه الطريقة لزيادة النقاط:
     
         ```javascript
           incrementPoints() {
@@ -164,7 +325,7 @@ npm start
           }
         ```
 
-        الآن قم بتوصيل هذه الوظائف بأحداث الاصطدام:
+        الآن قم بتوصيل هذه الوظائف بأحداث التصادم:
 
         ```javascript
         eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -181,9 +342,144 @@ npm start
 
 ✅ هل أنت فضولي بشأن الألعاب الأخرى التي تم إنشاؤها باستخدام JavaScript وCanvas؟ قم ببعض الاستكشاف - قد تدهشك الإمكانيات!
 
-بعد تنفيذ هذه الميزات، اختبر لعبتك لترى نظام التغذية الراجعة الكامل قيد العمل. يجب أن ترى أيقونات الأرواح في الزاوية السفلية اليمنى، والنقاط الخاصة بك في الزاوية السفلية اليسرى، وشاهد كيف تقل الأرواح عند الاصطدامات بينما تزيد النقاط عند الضربات الناجحة.
+بعد تنفيذ هذه الميزات، اختبر لعبتك لرؤية نظام التغذية الراجعة الكامل قيد العمل. يجب أن ترى أيقونات الأرواح في الزاوية السفلية اليمنى، والنقاط في الزاوية السفلية اليسرى، ومراقبة كيف تقل الأرواح مع التصادمات بينما تزيد النقاط مع الضربات الناجحة.
+
+لعبتك الآن تحتوي على الآليات الأساسية التي جعلت ألعاب الأركيد المبكرة ممتعة للغاية - أهداف واضحة، تغذية راجعة فورية، وعواقب ذات معنى لإجراءات اللاعب.
+
+### 🔄 **مراجعة تربوية**
+**نظام تصميم الألعاب الكامل**: تحقق من إتقانك لأنظمة التغذية الراجعة للاعب:
+- ✅ كيف تخلق آليات النقاط دافعًا ومشاركة للاعب؟
+- ✅ لماذا تعتبر الاتساق البصري مهمًا لتصميم واجهة المستخدم؟
+- ✅ كيف يوازن نظام الأرواح بين التحدي واحتفاظ اللاعب؟
+- ✅ ما دور التغذية الفورية في خلق تجربة لعب مرضية؟
+
+**تكامل النظام**: يظهر نظام التغذية الراجعة الخاص بك:
+- **تصميم تجربة المستخدم**: تواصل بصري واضح وتسلسل هرمي للمعلومات
+- **هندسة مدفوعة بالأحداث**: تحديثات استجابة لإجراءات اللاعب
+- **إدارة الحالة**: تتبع وعرض بيانات اللعبة الديناميكية
+- **إتقان اللوحة**: عرض النصوص ووضع الرموز
+- **علم نفس الألعاب**: فهم دافع اللاعب ومشاركته
+
+**أنماط احترافية**: لقد قمت بتنفيذ:
+- **هندسة MVC**: فصل منطق اللعبة والبيانات والعرض
+- **نمط المراقب**: تحديثات مدفوعة بالأحداث لتغييرات حالة اللعبة
+- **تصميم المكونات**: وظائف قابلة لإعادة الاستخدام للعرض والمنطق
+- **تحسين الأداء**: عرض فعال في حلقات اللعبة
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] جرب أحجام وألوان خطوط مختلفة لعرض النقاط
+- [ ] حاول تغيير قيم النقاط وشاهد كيف يؤثر ذلك على شعور اللعبة
+- [ ] أضف عبارات console.log لتتبع تغييرات النقاط والأرواح
+- [ ] اختبر الحالات الحافة مثل نفاد الأرواح أو تحقيق نقاط عالية
+
+### 🎯 **ما يمكنك تحقيقه خلال هذه الساعة**
+- [ ] أكمل اختبار ما بعد الدرس وفهم علم نفس تصميم الألعاب
+- [ ] أضف تأثيرات صوتية للنقاط وفقدان الأرواح
+- [ ] نفذ نظام النقاط العالية باستخدام localStorage
+- [ ] أنشئ قيم نقاط مختلفة لأنواع الأعداء المختلفة
+- [ ] أضف تأثيرات بصرية مثل اهتزاز الشاشة عند فقدان حياة
+
+### 📅 **رحلة تصميم الألعاب الخاصة بك لمدة أسبوع**
+- [ ] أكمل لعبة الفضاء بالكامل مع أنظمة التغذية الراجعة المصقولة
+- [ ] نفذ آليات النقاط المتقدمة مثل مضاعفات الكومبو
+- [ ] أضف الإنجازات والمحتوى القابل للفتح
+- [ ] أنشئ أنظمة تقدم وصعوبة متوازنة
+- [ ] صمم واجهات المستخدم للقوائم وشاشات نهاية اللعبة
+- [ ] ادرس ألعابًا أخرى لفهم آليات المشاركة
+
+### 🌟 **إتقان تطوير الألعاب خلال شهر**
+- [ ] قم ببناء ألعاب كاملة بأنظمة تقدم متطورة
+- [ ] تعلم تحليلات الألعاب وقياس سلوك اللاعب
+- [ ] ساهم في مشاريع تطوير الألعاب مفتوحة المصدر
+- [ ] أتقن أنماط تصميم الألعاب المتقدمة واستراتيجيات تحقيق الدخل
+- [ ] أنشئ محتوى تعليمي حول تصميم الألعاب وتجربة المستخدم
+- [ ] قم ببناء محفظة تعرض مهارات تصميم وتطوير الألعاب
+
+## 🎯 جدول زمني لإتقان تصميم الألعاب
+
+```mermaid
+timeline
+    title Game Design & Player Feedback Learning Progression
+    
+    section Foundation (10 minutes)
+        Visual Communication: Text rendering
+                           : Icon design
+                           : Layout principles
+                           : Color psychology
+        
+    section Player Psychology (20 minutes)
+        Motivation Systems: Point values
+                          : Risk vs reward
+                          : Progress feedback
+                          : Achievement design
+        
+    section Technical Implementation (30 minutes)
+        Canvas Mastery: Text positioning
+                      : Sprite rendering
+                      : State management
+                      : Performance optimization
+        
+    section Game Balance (40 minutes)
+        Difficulty Design: Life management
+                         : Scoring curves
+                         : Player retention
+                         : Accessibility
+        
+    section User Experience (50 minutes)
+        Interface Design: Information hierarchy
+                        : Responsive feedback
+                        : Emotional design
+                        : Usability testing
+        
+    section Advanced Systems (1 week)
+        Game Mechanics: Progression systems
+                      : Analytics integration
+                      : Monetization design
+                      : Community features
+        
+    section Industry Skills (1 month)
+        Professional Development: Team collaboration
+                                : Design documentation
+                                : Player research
+                                : Platform optimization
+```
 
-لعبتك الآن تحتوي على الآليات الأساسية التي جعلت ألعاب الأركيد المبكرة ممتعة للغاية - أهداف واضحة، تغذية راجعة فورية، وعواقب ذات معنى لتصرفات اللاعب.
+### 🛠️ ملخص أدوات تصميم الألعاب الخاصة بك
+
+بعد إكمال هذا الدرس، أصبحت الآن قد أتقنت:
+- **علم نفس اللاعب**: فهم الدافع والمخاطرة/المكافأة وحلقات المشاركة
+- **التواصل البصري**: تصميم واجهات مستخدم فعالة باستخدام النصوص والرموز والتخطيط
+- **أنظمة التغذية الراجعة**: استجابة فورية لإجراءات اللاعب وأحداث اللعبة
+- **إدارة الحالة**: تتبع وعرض بيانات اللعبة الديناميكية بكفاءة
+- **عرض النصوص على اللوحة**: عرض نصوص احترافية مع تنسيق ووضع
+- **تكامل الأحداث**: ربط إجراءات المستخدم بعواقب اللعبة ذات المعنى
+- **توازن اللعبة**: تصميم منحنيات الصعوبة وأنظمة تقدم اللاعب
+
+**تطبيقات العالم الحقيقي**: مهارات تصميم الألعاب الخاصة بك تنطبق مباشرة على:
+- **تصميم واجهة المستخدم**: إنشاء واجهات جذابة وبديهية
+- **تطوير المنتجات**: فهم دافع المستخدم وحلقات التغذية الراجعة
+- **التكنولوجيا التعليمية**: أنظمة التلعيب ومشاركة التعلم
+- **تصور البيانات**: جعل المعلومات المعقدة سهلة الوصول وجذابة
+- **تطوير التطبيقات المحمولة**: آليات الاحتفاظ وتصميم تجربة المستخدم
+- **تكنولوجيا التسويق**: فهم سلوك المستخدم وتحسين التحويل
+
+**المهارات المهنية المكتسبة**: يمكنك الآن:
+- **تصميم** تجارب مستخدم تحفز وتشارك المستخدمين
+- **تنفيذ** أنظمة التغذية الراجعة التي توجه سلوك المستخدم بفعالية
+- **توازن** التحدي وسهولة الوصول في الأنظمة التفاعلية
+- **إنشاء** تواصل بصري يعمل عبر مجموعات المستخدمين المختلفة
+- **تحليل** سلوك المستخدم وتحسين التصميم بناءً على ذلك
+
+**مفاهيم تطوير الألعاب التي تم إتقانها**:
+- **دافع اللاعب**: فهم ما يحفز المشاركة والاحتفاظ
+- **التصميم البصري**: إنشاء واجهات واضحة وجذابة وعملية
+- **تكامل النظام**: ربط أنظمة اللعبة المتعددة لتجربة متماسكة
+- **تحسين الأداء**: عرض فعال وإدارة الحالة
+- **سهولة الوصول**: تصميم لمستويات مهارة واحتياجات اللاعبين المختلفة
+
+**المستوى التالي**: أنت جاهز لاستكشاف أنماط تصميم الألعاب المتقدمة، تنفيذ أنظمة التحليلات، أو دراسة استراتيجيات تحقيق الدخل واحتفاظ اللاعب!
+
+🌟 **إنجاز مفتوح**: لقد قمت ببناء نظام تغذية راجعة كامل للاعب باستخدام مبادئ تصميم الألعاب الاحترافية!
 
 ---
 
@@ -191,9 +487,9 @@ npm start
 
 استخدم وضع الوكيل لإكمال التحدي التالي:
 
-**الوصف:** قم بتحسين نظام النقاط في لعبة الفضاء عن طريق تنفيذ ميزة أعلى النقاط مع تخزين دائم وآليات مكافأة النقاط.
+**الوصف:** قم بتحسين نظام النقاط في لعبة الفضاء عن طريق تنفيذ ميزة النقاط العالية مع التخزين المستمر وآليات النقاط الإضافية.
 
-**المهمة:** قم بإنشاء نظام أعلى النقاط الذي يحفظ أفضل نقاط اللاعب في localStorage. أضف نقاطًا إضافية لقتل الأعداء المتتالي (نظام الكومبو) وقم بتنفيذ قيم نقاط مختلفة لأنواع الأعداء المختلفة. قم بتضمين مؤشر بصري عندما يحقق اللاعب أعلى نقاط جديدة وعرض أعلى النقاط الحالية على شاشة اللعبة.
+**المهمة:** أنشئ نظام نقاط عالية يحفظ أفضل نقاط اللاعب في localStorage. أضف نقاطًا إضافية لقتل الأعداء المتتالي (نظام الكومبو) ونفذ قيم نقاط مختلفة لأنواع الأعداء المختلفة. قم بتضمين مؤشر بصري عندما يحقق اللاعب نقاطًا عالية جديدة وعرض النقاط العالية الحالية على شاشة اللعبة.
 
 ## 🚀 التحدي
 
@@ -205,13 +501,13 @@ npm start
 
 ## المراجعة والدراسة الذاتية
 
-هل تريد استكشاف المزيد؟ ابحث عن طرق مختلفة لتسجيل النقاط وأنظمة الأرواح في الألعاب. هناك محركات ألعاب رائعة مثل [PlayFab](https://playfab.com) التي تتعامل مع تسجيل النقاط، لوحات الصدارة، وتقدم اللاعب. كيف يمكن أن يؤدي دمج شيء مثل هذا إلى رفع مستوى لعبتك؟
+هل تريد استكشاف المزيد؟ ابحث عن طرق مختلفة لأنظمة النقاط والأرواح في الألعاب. هناك محركات ألعاب رائعة مثل [PlayFab](https://playfab.com) التي تتعامل مع النقاط، لوحات الصدارة، وتقدم اللاعب. كيف يمكن أن يؤدي دمج شيء كهذا إلى رفع مستوى لعبتك؟
 
-## الواجب
+## المهمة
 
-[بناء لعبة تسجيل النقاط](assignment.md)
+[بناء لعبة النقاط](assignment.md)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/6-space-game/6-end-condition/README.md b/translations/ar/6-space-game/6-end-condition/README.md
index 4e4002c569..e14d646702 100644
--- a/translations/ar/6-space-game/6-end-condition/README.md
+++ b/translations/ar/6-space-game/6-end-condition/README.md
@@ -1,59 +1,167 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46bcdd9a0174031655a49bb062aa279c",
-  "translation_date": "2025-10-22T14:26:47+00:00",
+  "original_hash": "a4b78043f4d64bf3ee24e0689b8b391d",
+  "translation_date": "2025-11-03T12:45:22+00:00",
   "source_file": "6-space-game/6-end-condition/README.md",
   "language_code": "ar"
 }
 -->
 # بناء لعبة فضاء الجزء السادس: النهاية وإعادة التشغيل
 
-كل لعبة رائعة تحتاج إلى شروط نهاية واضحة وآلية إعادة تشغيل سلسة. لقد قمت ببناء لعبة فضاء مذهلة تتضمن الحركة والقتال وتسجيل النقاط - والآن حان الوقت لإضافة القطع النهائية التي تجعلها تبدو مكتملة.
-
-لعبتك حالياً تعمل بلا نهاية، مثل مسبارات "فوياجر" التي أطلقتها ناسا في عام 1977 - ولا تزال تسافر عبر الفضاء بعد عقود. بينما هذا مناسب لاستكشاف الفضاء، تحتاج الألعاب إلى نقاط نهاية محددة لتوفير تجربة مرضية.
-
-اليوم، سنقوم بتنفيذ شروط الفوز والخسارة بشكل صحيح ونظام إعادة التشغيل. بنهاية هذا الدرس، سيكون لديك لعبة مصقولة يمكن للاعبين إكمالها وإعادة لعبها، تماماً مثل ألعاب الأركيد الكلاسيكية التي شكلت هذا المجال.
-
-## اختبار ما قبل المحاضرة
-
-[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/39)
-
-## فهم شروط نهاية اللعبة
-
-متى يجب أن تنتهي لعبتك؟ هذا السؤال الأساسي شكل تصميم الألعاب منذ عصر الأركيد الأول. تنتهي لعبة "باك مان" عندما يتم الإمساك بك من قبل الأشباح أو عند تنظيف جميع النقاط، بينما تنتهي لعبة "غزاة الفضاء" عندما تصل الكائنات الفضائية إلى الأسفل أو عندما تدمرها جميعاً.
-
-بصفتك منشئ اللعبة، يمكنك تحديد شروط النصر والهزيمة. بالنسبة للعبة الفضاء الخاصة بنا، إليك بعض الأساليب المثبتة التي تخلق تجربة لعب ممتعة:
-
-- **تدمير `N` سفن العدو**: من الشائع تقسيم اللعبة إلى مستويات مختلفة حيث تحتاج إلى تدمير `N` سفن العدو لإكمال المستوى.
-- **تدمير سفينتك**: هناك بالتأكيد ألعاب تخسر فيها إذا تم تدمير سفينتك. نهج شائع آخر هو وجود مفهوم "الحياة". في كل مرة يتم تدمير سفينتك، يتم خصم حياة. بمجرد فقدان جميع الأرواح، تخسر اللعبة.
-- **جمع `N` نقاط**: شرط نهاية شائع آخر هو جمع النقاط. كيفية الحصول على النقاط يعتمد عليك، ولكن من الشائع تخصيص نقاط لأنشطة مختلفة مثل تدمير سفينة العدو أو جمع العناصر التي تسقطها السفن عند تدميرها.
-- **إكمال مستوى**: قد يتضمن ذلك عدة شروط مثل تدمير `X` سفن العدو، جمع `Y` نقاط، أو ربما جمع عنصر معين.
-
-## تنفيذ وظيفة إعادة تشغيل اللعبة
-
-تشجع الألعاب الجيدة على إعادة اللعب من خلال آليات إعادة تشغيل سلسة. عندما يكمل اللاعبون اللعبة (أو يواجهون الهزيمة)، غالباً ما يرغبون في المحاولة مرة أخرى على الفور - سواء لتحسين درجاتهم أو أدائهم.
-
-لعبة "تيتريس" مثال مثالي على ذلك: عندما تصل الكتل إلى الأعلى، يمكنك بدء لعبة جديدة فوراً دون الحاجة إلى التنقل عبر قوائم معقدة. سنقوم ببناء نظام إعادة تشغيل مشابه يعيد ضبط حالة اللعبة بشكل نظيف ويعيد اللاعبين إلى العمل بسرعة.
+```mermaid
+journey
+    title Your Game Completion Journey
+    section End Conditions
+      Define win/lose states: 3: Student
+      Implement condition checking: 4: Student
+      Handle state transitions: 4: Student
+    section Player Experience
+      Design feedback systems: 4: Student
+      Create restart mechanics: 5: Student
+      Polish user interface: 5: Student
+    section System Integration
+      Manage game lifecycle: 5: Student
+      Handle memory cleanup: 5: Student
+      Create complete experience: 5: Student
+```
+  
+كل لعبة رائعة تحتاج إلى شروط نهاية واضحة وآلية إعادة تشغيل سلسة. لقد قمت ببناء لعبة فضاء مذهلة مع الحركة والقتال وتسجيل النقاط - والآن حان الوقت لإضافة القطع النهائية التي تجعلها تبدو مكتملة.
+
+لعبتك حاليًا تعمل بلا نهاية، مثل مجسات "فوياجر" التي أطلقتها ناسا في عام 1977 - ولا تزال تسافر عبر الفضاء بعد عقود. بينما هذا مناسب لاستكشاف الفضاء، تحتاج الألعاب إلى نقاط نهاية محددة لتوفير تجربة مرضية.
+
+اليوم، سنقوم بتنفيذ شروط الفوز/الخسارة ونظام إعادة التشغيل. بنهاية هذا الدرس، ستكون لديك لعبة مصقولة يمكن للاعبين إكمالها وإعادة لعبها، تمامًا مثل ألعاب الأركيد الكلاسيكية التي شكلت هذا المجال.
+
+```mermaid
+mindmap
+  root((Game Completion))
+    End Conditions
+      Victory States
+      Defeat Conditions
+      Progress Tracking
+      State Validation
+    Player Feedback
+      Visual Messages
+      Color Psychology
+      Clear Communication
+      Emotional Response
+    State Management
+      Game Loop Control
+      Memory Cleanup
+      Object Lifecycle
+      Event Handling
+    Restart Systems
+      Input Handling
+      State Reset
+      Fresh Initialization
+      User Experience
+    Polish Elements
+      Message Display
+      Smooth Transitions
+      Error Prevention
+      Accessibility
+```
+  
+## اختبار ما قبل الدرس  
+
+[اختبار ما قبل الدرس](https://ff-quizzes.netlify.app/web/quiz/39)  
+
+## فهم شروط نهاية اللعبة  
+
+متى يجب أن تنتهي لعبتك؟ هذا السؤال الأساسي شكل تصميم الألعاب منذ عصر الأركيد المبكر. تنتهي لعبة "باك مان" عندما يتم الإمساك بك من قبل الأشباح أو عند تنظيف جميع النقاط، بينما تنتهي لعبة "غزاة الفضاء" عندما تصل الكائنات الفضائية إلى الأسفل أو يتم تدميرها جميعًا.
+
+بصفتك منشئ اللعبة، أنت من يحدد شروط الفوز والهزيمة. بالنسبة للعبة الفضاء الخاصة بنا، إليك بعض الأساليب المثبتة التي تخلق تجربة لعب ممتعة:
+
+```mermaid
+flowchart TD
+    A["🎮 Game Start"] --> B{"Check Conditions"}
+    
+    B --> C["Enemy Count"]
+    B --> D["Hero Lives"]
+    B --> E["Score Threshold"]
+    B --> F["Level Progress"]
+    
+    C --> C1{"Enemies = 0?"}
+    D --> D1{"Lives = 0?"}
+    E --> E1{"Score ≥ Target?"}
+    F --> F1{"Objectives Complete?"}
+    
+    C1 -->|Yes| G["🏆 Victory"]
+    D1 -->|Yes| H["💀 Defeat"]
+    E1 -->|Yes| G
+    F1 -->|Yes| G
+    
+    C1 -->|No| B
+    D1 -->|No| B
+    E1 -->|No| B
+    F1 -->|No| B
+    
+    G --> I["🔄 Restart Option"]
+    H --> I
+    
+    style G fill:#e8f5e8
+    style H fill:#ffebee
+    style I fill:#e3f2fd
+```
+  
+- **`N` تم تدمير عدد معين من سفن العدو**: من الشائع جدًا إذا قمت بتقسيم اللعبة إلى مستويات مختلفة أن تحتاج إلى تدمير `N` سفن عدو لإكمال المستوى.  
+- **تم تدمير سفينتك**: هناك بالتأكيد ألعاب تخسر فيها إذا تم تدمير سفينتك. نهج شائع آخر هو مفهوم "الحياة". في كل مرة يتم تدمير سفينتك، يتم خصم حياة. بمجرد فقدان جميع الأرواح، تخسر اللعبة.  
+- **لقد جمعت `N` نقاط**: شرط نهاية شائع آخر هو جمع النقاط. كيفية الحصول على النقاط يعود إليك، ولكن من الشائع جدًا تخصيص نقاط لأنشطة مختلفة مثل تدمير سفينة عدو أو ربما جمع عناصر تسقطها السفن عند تدميرها.  
+- **إكمال مستوى**: قد يتضمن ذلك عدة شروط مثل تدمير `X` سفن عدو، جمع `Y` نقاط، أو ربما جمع عنصر معين.  
+
+## تنفيذ وظيفة إعادة تشغيل اللعبة  
+
+الألعاب الجيدة تشجع على إعادة اللعب من خلال آليات إعادة تشغيل سلسة. عندما يكمل اللاعبون لعبة (أو يواجهون الهزيمة)، غالبًا ما يرغبون في المحاولة مرة أخرى فورًا - سواء لتحسين أدائهم أو لتحقيق نتيجة أفضل.
+
+```mermaid
+stateDiagram-v2
+    [*] --> Playing: Game Start
+    Playing --> Victory: All enemies destroyed
+    Playing --> Defeat: Lives = 0
+    
+    Victory --> MessageDisplay: Show win message
+    Defeat --> MessageDisplay: Show lose message
+    
+    MessageDisplay --> WaitingRestart: Press Enter prompt
+    WaitingRestart --> Resetting: Enter key pressed
+    
+    Resetting --> CleanupMemory: Clear intervals
+    CleanupMemory --> ClearEvents: Remove listeners
+    ClearEvents --> InitializeGame: Fresh start
+    InitializeGame --> Playing: New game begins
+    
+    note right of MessageDisplay
+        Color-coded feedback:
+        Green = Victory
+        Red = Defeat
+    end note
+    
+    note right of Resetting
+        Complete state reset
+        prevents memory leaks
+    end note
+```
+  
+لعبة "تتريس" مثال رائع على ذلك: عندما تصل الكتل إلى الأعلى، يمكنك بدء لعبة جديدة فورًا دون الحاجة إلى التنقل عبر قوائم معقدة. سنقوم ببناء نظام إعادة تشغيل مشابه يعيد ضبط حالة اللعبة بشكل نظيف ويعيد اللاعبين إلى الحركة بسرعة.
 
-✅ **تأمل**: فكر في الألعاب التي لعبتها. ما هي الظروف التي تنتهي فيها، وكيف يتم تحفيزك لإعادة التشغيل؟ ما الذي يجعل تجربة إعادة التشغيل سلسة مقابل محبطة؟
+✅ **تأمل**: فكر في الألعاب التي لعبتها. تحت أي ظروف تنتهي، وكيف يتم تحفيزك لإعادة التشغيل؟ ما الذي يجعل تجربة إعادة التشغيل سلسة مقابل محبطة؟
 
-## ما الذي ستبنيه
+## ما الذي ستبنيه  
 
 ستقوم بتنفيذ الميزات النهائية التي تحول مشروعك إلى تجربة لعبة مكتملة. هذه العناصر تميز الألعاب المصقولة عن النماذج الأولية الأساسية.
 
 **إليك ما سنضيفه اليوم:**
 
-1. **شرط الفوز**: دمر جميع الأعداء واحصل على احتفال مناسب (لقد استحققت ذلك!)
-2. **شرط الهزيمة**: نفاد الأرواح ومواجهة الهزيمة مع شاشة الهزيمة
-3. **آلية إعادة التشغيل**: اضغط على Enter للعودة مباشرة - لأن لعبة واحدة لا تكفي
-4. **إدارة الحالة**: بداية جديدة في كل مرة - لا أعداء متبقين أو أخطاء غريبة من اللعبة السابقة
+1. **شرط الفوز**: تدمير جميع الأعداء والحصول على احتفال مناسب (لقد استحققت ذلك!)  
+2. **شرط الهزيمة**: نفاد الأرواح ومواجهة شاشة الهزيمة  
+3. **آلية إعادة التشغيل**: اضغط على Enter للعودة مباشرة - لأن لعبة واحدة لا تكفي  
+4. **إدارة الحالة**: صفحة جديدة في كل مرة - لا أعداء متبقين أو أخطاء غريبة من اللعبة السابقة  
 
-## البدء
+## البدء  
 
-لنقم بإعداد بيئة التطوير الخاصة بك. يجب أن تكون جميع ملفات لعبة الفضاء الخاصة بك من الدروس السابقة جاهزة.
+لنقم بإعداد بيئة التطوير الخاصة بك. يجب أن تكون لديك جميع ملفات لعبة الفضاء من الدروس السابقة جاهزة.
 
-**يجب أن يبدو مشروعك شيئاً مثل هذا:**
+**يجب أن يبدو مشروعك شيئًا مثل هذا:**
 
 ```bash
 -| assets
@@ -65,28 +173,54 @@ CO_OP_TRANSLATOR_METADATA:
 -| app.js
 -| package.json
 ```
-
+  
 **ابدأ خادم التطوير الخاص بك:**
 
 ```bash
 cd your-work
 npm start
 ```
+  
+**هذا الأمر:**  
+- يشغل خادمًا محليًا على `http://localhost:5000`  
+- يخدم ملفاتك بشكل صحيح  
+- يقوم بالتحديث تلقائيًا عند إجراء تغييرات  
+
+افتح `http://localhost:5000` في متصفحك وتأكد من أن لعبتك تعمل. يجب أن تكون قادرًا على التحرك، إطلاق النار، والتفاعل مع الأعداء. بمجرد التأكد، يمكننا المضي قدمًا في التنفيذ.
+
+> 💡 **نصيحة احترافية**: لتجنب التحذيرات في Visual Studio Code، قم بتعريف `gameLoopId` في أعلى ملفك كـ `let gameLoopId;` بدلاً من تعريفه داخل وظيفة `window.onload`. هذا يتبع أفضل ممارسات تعريف المتغيرات في JavaScript الحديثة.
+
+```mermaid
+flowchart TD
+    A["1. Condition Tracking"] --> B["2. Event Handlers"]
+    B --> C["3. Message Constants"]
+    C --> D["4. Restart Controls"]
+    D --> E["5. Message Display"]
+    E --> F["6. Reset System"]
+    
+    G["isHeroDead()\nisEnemiesDead()"] --> A
+    H["Collision Events\nEnd Game Events"] --> B
+    I["GAME_END_WIN\nGAME_END_LOSS"] --> C
+    J["Enter Key\nRestart Trigger"] --> D
+    K["Victory/Defeat\nColor-coded Text"] --> E
+    L["State Cleanup\nFresh Initialization"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
+  
+## خطوات التنفيذ  
 
-**هذا الأمر:**
-- يشغل خادم محلي على `http://localhost:5000`
-- يقدم ملفاتك بشكل صحيح
-- يقوم بالتحديث تلقائياً عند إجراء تغييرات
-
-افتح `http://localhost:5000` في متصفحك وتأكد من أن لعبتك تعمل. يجب أن تكون قادراً على التحرك، إطلاق النار، والتفاعل مع الأعداء. بمجرد التأكد، يمكننا المضي قدماً في التنفيذ.
-
-> 💡 **نصيحة احترافية**: لتجنب التحذيرات في Visual Studio Code، قم بتعريف `gameLoopId` في أعلى ملفك كـ `let gameLoopId;` بدلاً من تعريفه داخل وظيفة `window.onload`. هذا يتبع أفضل الممارسات الحديثة لتصريح المتغيرات في JavaScript.
-
-## خطوات التنفيذ
-
-### الخطوة 1: إنشاء وظائف تتبع شروط النهاية
+### الخطوة 1: إنشاء وظائف تتبع شروط النهاية  
 
-نحتاج إلى وظائف لمراقبة متى يجب أن تنتهي اللعبة. مثل أجهزة الاستشعار في محطة الفضاء الدولية التي تراقب الأنظمة الحرجة باستمرار، ستقوم هذه الوظائف بفحص حالة اللعبة بشكل مستمر.
+نحتاج إلى وظائف لمراقبة متى يجب أن تنتهي اللعبة. مثل أجهزة الاستشعار على محطة الفضاء الدولية التي تراقب الأنظمة الحرجة باستمرار، ستقوم هذه الوظائف بفحص حالة اللعبة بشكل مستمر.
 
 ```javascript
 function isHeroDead() {
@@ -98,18 +232,52 @@ function isEnemiesDead() {
   return enemies.length === 0;
 }
 ```
+  
+**ما يحدث خلف الكواليس:**  
+- **يتحقق** إذا كانت سفينة البطل قد نفدت الأرواح (مؤلم!)  
+- **يحسب** عدد الأعداء الذين لا يزالون على قيد الحياة  
+- **يعيد** `true` عندما تكون ساحة المعركة خالية من الأعداء  
+- **يستخدم** منطق بسيط يعتمد على true/false للحفاظ على الأمور واضحة  
+- **يُرشح** جميع كائنات اللعبة للعثور على الناجين  
 
-**ما الذي يحدث خلف الكواليس:**
-- **التحقق** إذا كانت حياة البطل قد انتهت (يا للأسف!)
-- **العد** لعدد الأعداء الذين لا يزالون على قيد الحياة
-- **الإرجاع** بـ `true` عندما يكون ساحة المعركة خالية من الأعداء
-- **الاستخدام** لمنطق بسيط يعتمد على صحيح/خطأ للحفاظ على الأمور واضحة
-- **التصفية** عبر جميع كائنات اللعبة للعثور على الناجين
-
-### الخطوة 2: تحديث معالجات الأحداث لشروط النهاية
+### الخطوة 2: تحديث معالجات الأحداث لشروط النهاية  
 
 الآن سنقوم بربط هذه الفحوصات بنظام الأحداث في اللعبة. في كل مرة يحدث تصادم، ستقوم اللعبة بتقييم ما إذا كان يؤدي إلى شرط نهاية. هذا يخلق ردود فعل فورية للأحداث الحرجة في اللعبة.
 
+```mermaid
+sequenceDiagram
+    participant Collision
+    participant GameLogic
+    participant Conditions
+    participant EventSystem
+    participant Display
+    
+    Collision->>GameLogic: Laser hits enemy
+    GameLogic->>GameLogic: Destroy objects
+    GameLogic->>Conditions: Check isEnemiesDead()
+    
+    alt All enemies defeated
+        Conditions->>EventSystem: Emit GAME_END_WIN
+        EventSystem->>Display: Show victory message
+    else Enemies remain
+        Conditions->>GameLogic: Continue game
+    end
+    
+    Collision->>GameLogic: Enemy hits hero
+    GameLogic->>GameLogic: Decrease lives
+    GameLogic->>Conditions: Check isHeroDead()
+    
+    alt Lives = 0
+        Conditions->>EventSystem: Emit GAME_END_LOSS
+        EventSystem->>Display: Show defeat message
+    else Lives remain
+        GameLogic->>Conditions: Check isEnemiesDead()
+        alt All enemies defeated
+            Conditions->>EventSystem: Emit GAME_END_WIN
+        end
+    end
+```
+  
 ```javascript
 eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
     first.dead = true;
@@ -141,18 +309,381 @@ eventEmitter.on(Messages.GAME_END_LOSS, () => {
   endGame(false);
 });
 ```
+  
+**ما يحدث هنا:**  
+- **الليزر يصيب العدو**: كلاهما يختفي، تحصل على نقاط، ونتحقق إذا كنت قد فزت  
+- **العدو يصيبك**: تخسر حياة، ونتحقق إذا كنت لا تزال على قيد الحياة  
+- **ترتيب ذكي**: نتحقق من الهزيمة أولاً (لا أحد يريد الفوز والخسارة في نفس الوقت!)  
+- **ردود فعل فورية**: بمجرد حدوث شيء مهم، تعرف اللعبة بذلك  
+
+### الخطوة 3: إضافة ثوابت رسائل جديدة  
+
+ستحتاج إلى إضافة أنواع رسائل جديدة إلى كائن الثوابت `Messages`. تساعد هذه الثوابت في الحفاظ على الاتساق وتجنب الأخطاء الإملائية في نظام الأحداث الخاص بك.
+
+```javascript
+GAME_END_LOSS: "GAME_END_LOSS",
+GAME_END_WIN: "GAME_END_WIN",
+```
+  
+**في ما سبق، قمنا بـ:**  
+- **إضافة** ثوابت لأحداث نهاية اللعبة للحفاظ على الاتساق  
+- **استخدام** أسماء وصفية تشير بوضوح إلى غرض الحدث  
+- **اتباع** نمط التسمية الحالي لأنواع الرسائل  
+
+### الخطوة 4: تنفيذ عناصر التحكم في إعادة التشغيل  
+
+الآن ستضيف عناصر تحكم لوحة المفاتيح التي تسمح للاعبين بإعادة تشغيل اللعبة. مفتاح Enter هو خيار طبيعي لأنه يرتبط عادةً بتأكيد الإجراءات وبدء الألعاب الجديدة.
+
+**أضف اكتشاف مفتاح Enter إلى مستمع حدث keydown الحالي الخاص بك:**
+
+```javascript
+else if(evt.key === "Enter") {
+   eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+}
+```
+  
+**أضف ثابت الرسالة الجديد:**
+
+```javascript
+KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+```
+  
+**ما تحتاج إلى معرفته:**  
+- **يمدد** نظام معالجة أحداث لوحة المفاتيح الحالي  
+- **يستخدم** مفتاح Enter كمحفز لإعادة التشغيل لتجربة مستخدم بديهية  
+- **يصدر** حدثًا مخصصًا يمكن لأجزاء أخرى من لعبتك الاستماع إليه  
+- **يحافظ** على نفس النمط مثل عناصر التحكم الأخرى في لوحة المفاتيح  
+
+### الخطوة 5: إنشاء نظام عرض الرسائل  
+
+تحتاج لعبتك إلى التواصل بوضوح مع اللاعبين حول النتائج. سنقوم بإنشاء نظام رسائل يعرض حالات الفوز والهزيمة باستخدام نصوص ملونة، مشابهة لواجهات المحطات الطرفية في أجهزة الكمبيوتر المبكرة حيث يشير اللون الأخضر إلى النجاح والأحمر إلى الأخطاء.
+
+**قم بإنشاء وظيفة `displayMessage()`:**
+
+```javascript
+function displayMessage(message, color = "red") {
+  ctx.font = "30px Arial";
+  ctx.fillStyle = color;
+  ctx.textAlign = "center";
+  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+}
+```
+  
+**خطوة بخطوة، ما يحدث:**  
+- **يضبط** حجم الخط ونوعه لنص واضح وسهل القراءة  
+- **يطبق** معلمة اللون مع "الأحمر" كإعداد افتراضي للتحذيرات  
+- **يتمركز** النص أفقيًا وعموديًا على اللوحة  
+- **يستخدم** معلمات JavaScript الحديثة الافتراضية لخيارات الألوان المرنة  
+- **يستفيد** من سياق 2D للوحة للرسم المباشر للنص  
+
+**قم بإنشاء وظيفة `endGame()`:**
+
+```javascript
+function endGame(win) {
+  clearInterval(gameLoopId);
+
+  // Set a delay to ensure any pending renders complete
+  setTimeout(() => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    if (win) {
+      displayMessage(
+        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+        "green"
+      );
+    } else {
+      displayMessage(
+        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+      );
+    }
+  }, 200)  
+}
+```
+  
+**ما تفعله هذه الوظيفة:**  
+- **تجمد** كل شيء في مكانه - لا مزيد من تحركات السفن أو الليزر  
+- **تأخذ** وقفة صغيرة (200 مللي ثانية) للسماح بإكمال رسم الإطار الأخير  
+- **تمسح** الشاشة تمامًا وتلونها باللون الأسود لتأثير درامي  
+- **تعرض** رسائل مختلفة للفائزين والخاسرين  
+- **تستخدم** ألوانًا مختلفة للأخبار - الأخضر للأخبار الجيدة، والأحمر للأخبار السيئة  
+- **تخبر** اللاعبين كيف يمكنهم العودة للعب  
+
+### 🔄 **توقف تعليمي**  
+**إدارة حالة اللعبة**: قبل تنفيذ وظيفة إعادة الضبط، تأكد من فهمك:  
+- ✅ كيف تخلق شروط النهاية أهدافًا واضحة للعب  
+- ✅ لماذا يعتبر ردود الفعل البصرية ضروريًا لفهم اللاعب  
+- ✅ أهمية التنظيف المناسب في منع تسرب الذاكرة  
+- ✅ كيف تمكن بنية الأحداث الانتقال السلس للحالة  
+
+**اختبار سريع ذاتي**: ماذا سيحدث إذا لم تقم بمسح مستمعي الأحداث أثناء إعادة الضبط؟  
+*الإجابة: تسرب الذاكرة ومعالجات الأحداث المكررة مما يسبب سلوكًا غير متوقع*  
+
+**مبادئ تصميم الألعاب**: أنت الآن تنفذ:  
+- **أهداف واضحة**: يعرف اللاعبون بالضبط ما يحدد النجاح والفشل  
+- **ردود فعل فورية**: يتم التواصل مع تغييرات حالة اللعبة فورًا  
+- **تحكم المستخدم**: يمكن للاعبين إعادة التشغيل عندما يكونون جاهزين  
+- **موثوقية النظام**: التنظيف المناسب يمنع الأخطاء ومشاكل الأداء  
+
+### الخطوة 6: تنفيذ وظيفة إعادة ضبط اللعبة  
+
+يحتاج نظام إعادة الضبط إلى تنظيف حالة اللعبة الحالية تمامًا وتهيئة جلسة لعبة جديدة. هذا يضمن حصول اللاعبين على بداية نظيفة دون أي بيانات متبقية من اللعبة السابقة.
+
+**قم بإنشاء وظيفة `resetGame()`:**
+
+```javascript
+function resetGame() {
+  if (gameLoopId) {
+    clearInterval(gameLoopId);
+    eventEmitter.clear();
+    initGame();
+    gameLoopId = setInterval(() => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = "black";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      drawPoints();
+      drawLife();
+      updateGameObjects();
+      drawGameObjects(ctx);
+    }, 100);
+  }
+}
+```
+  
+**لنقم بفهم كل جزء:**  
+- **يتحقق** إذا كانت حلقة اللعبة تعمل حاليًا قبل إعادة الضبط  
+- **يمسح** حلقة اللعبة الحالية لإيقاف جميع أنشطة اللعبة الحالية  
+- **يزيل** جميع مستمعي الأحداث لمنع تسرب الذاكرة  
+- **يعيد** تهيئة حالة اللعبة بأجسام ومتغيرات جديدة  
+- **يبدأ** حلقة لعبة جديدة مع جميع وظائف اللعبة الأساسية  
+- **يحافظ** على نفس الفاصل الزمني 100 مللي ثانية لأداء اللعبة المتسق  
+
+**أضف معالج حدث مفتاح Enter إلى وظيفة `initGame()`:**
+
+```javascript
+eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+  resetGame();
+});
+```
+  
+**أضف طريقة `clear()` إلى فئة EventEmitter الخاصة بك:**
+
+```javascript
+clear() {
+  this.listeners = {};
+}
+```
+  
+**نقاط رئيسية يجب تذكرها:**  
+- **يربط** ضغط مفتاح Enter بوظيفة إعادة ضبط اللعبة  
+- **يسجل** مستمع الحدث هذا أثناء تهيئة اللعبة  
+- **يوفر** طريقة نظيفة لإزالة جميع مستمعي الأحداث عند إعادة الضبط  
+- **يمنع** تسرب الذاكرة عن طريق مسح معالجات الأحداث بين الألعاب  
+- **يعيد** ضبط كائن المستمعين إلى حالة فارغة للتهيئة الجديدة  
+
+## تهانينا! 🎉  
+
+👽 💥 🚀 لقد نجحت في بناء لعبة مكتملة من البداية. مثل المبرمجين الذين أنشأوا أول ألعاب الفيديو في السبعينيات، لقد حولت سطور الكود إلى تجربة تفاعلية مع ميكانيكيات لعبة مناسبة وردود فعل المستخدم. 🚀 💥 👽  
+
+**لقد أنجزت:**  
+- **تنفيذ** شروط الفوز والخسارة الكاملة مع ردود فعل المستخدم  
+- **إنشاء** نظام إعادة تشغيل سلس للعب المستمر  
+- **تصميم** تواصل بصري واضح لحالات اللعبة  
+- **إدارة** انتقالات حالة اللعبة المعقدة والتنظيف  
+- **تجميع** جميع المكونات في لعبة متماسكة وقابلة للعب  
+
+### 🔄 **توقف تعليمي**  
+**نظام تطوير الألعاب الكامل**: احتفل بإتقانك لدورة تطوير الألعاب الكاملة:  
+- ✅ كيف تخلق شروط النهاية تجارب مرضية للاعبين؟  
+- ✅ لماذا تعتبر إدارة الحالة المناسبة ضرورية لاستقرار اللعبة؟  
+- ✅ كيف يعزز ردود الفعل البصرية فهم اللاعب؟  
+- ✅ ما هو دور نظام إعادة التشغيل في الحفاظ على اللاعبين؟  
+
+**إتقان النظام**: لعبتك المكتملة تظهر:  
+- **تطوير الألعاب الكامل**: من الرسومات إلى الإدخال إلى إدارة الحالة  
+- **بنية احترافية**: أنظمة تعتمد على الأحداث مع تنظيف مناسب  
+- **تصميم تجربة المستخدم**: تواصل واضح وتحكم بديهي  
+- **تحسين الأداء**: عرض فعال وإدارة الذاكرة  
+- **التلميع والكمال**: جميع التفاصيل التي تجعل اللعبة تبدو مكتملة  
+
+**مهارات جاهزة للصناعة**: لقد نفذت:  
+- **بنية حلقة اللعبة**: أنظمة الوقت الحقيقي مع أداء متسق  
+- **برمجة تعتمد على الأحداث**: أنظمة مفصولة تتوسع بشكل فعال  
+- **إدارة الحالة**: معالجة بيانات معقدة وإدارة دورة الحياة  
+- **تصميم واجهة المستخدم**: تواصل واضح وتحكم استجابي  
+- **اختبار وتصحيح الأخطاء**: تطوير تكراري وحل المشكلات  
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**  
+- [ ] العب لعبتك المكتملة واختبر جميع شروط الفوز والخسارة  
+- [ ] جرب مع معلمات شروط النهاية المختلفة  
+- [ ] حاول إضافة عبارات console.log لتتبع تغييرات حالة اللعبة  
+- [ ] شارك لعبتك مع الأصدقاء واجمع ملاحظاتهم  
+
+### 🎯 **ما يمكنك تحقيقه خلال هذه الساعة**  
+- [ ] أكمل اختبار ما بعد الدرس وتأمل في رحلتك في تطوير الألعاب  
+- [ ] أضف تأثيرات صوتية لحالات الفوز والخسارة  
+- [ ] نفذ شروط نهاية إضافية مثل حدود الوقت أو الأهداف الإضافية  
+- [ ] أنشئ مستويات صعوبة مختلفة مع أعداد أعداء متغيرة  
+- [ ] قم بتلميع العرض البصري بخطوط وألوان أفضل  
+
+### 📅 **إتقان تطوير الألعاب خلال أسبوع**  
+- [ ] أكمل لعبة الفضاء المحسنة مع مستويات متعددة وتقدم  
+- [ ] أضف ميزات متقدمة مثل التعزيزات، أنواع الأعداء المختلفة، والأسلحة الخاصة  
+- [ ] أنشئ نظام تسجيل النقاط العالية مع تخزين دائم  
+- [ ] صمم واجهات مستخدم للقوائم، الإعدادات، وخيارات اللعبة  
+- [ ] قم بتحسين الأداء للأجهزة والمتصفحات المختلفة  
+- [ ] انشر لعبتك عبر الإنترنت وشاركها مع المجتمع  
+### 🌟 **مسيرتك المهنية في تطوير الألعاب خلال شهر**
+- [ ] قم ببناء ألعاب كاملة متعددة تستكشف أنواعًا وآليات مختلفة
+- [ ] تعلم أطر تطوير الألعاب المتقدمة مثل Phaser أو Three.js
+- [ ] ساهم في مشاريع تطوير الألعاب مفتوحة المصدر
+- [ ] دراسة مبادئ تصميم الألعاب وعلم نفس اللاعبين
+- [ ] أنشئ ملفًا شخصيًا يعرض مهاراتك في تطوير الألعاب
+- [ ] تواصل مع مجتمع تطوير الألعاب واستمر في التعلم
+
+## 🎯 جدول زمني لإتقان تطوير الألعاب بالكامل
+
+```mermaid
+timeline
+    title Complete Game Development Learning Progression
+    
+    section Foundation (Lessons 1-2)
+        Game Architecture: Project structure
+                         : Asset management
+                         : Canvas basics
+                         : Event systems
+        
+    section Interaction Systems (Lessons 3-4)
+        Player Control: Input handling
+                      : Movement mechanics
+                      : Collision detection
+                      : Physics simulation
+        
+    section Game Mechanics (Lesson 5)
+        Feedback Systems: Scoring mechanisms
+                        : Life management
+                        : Visual communication
+                        : Player motivation
+        
+    section Game Completion (Lesson 6)
+        Polish & Flow: End conditions
+                     : State management
+                     : Restart systems
+                     : User experience
+        
+    section Advanced Features (1 week)
+        Enhancement Skills: Audio integration
+                          : Visual effects
+                          : Level progression
+                          : Performance optimization
+        
+    section Professional Development (1 month)
+        Industry Readiness: Framework mastery
+                          : Team collaboration
+                          : Portfolio development
+                          : Community engagement
+        
+    section Career Advancement (3 months)
+        Specialization: Advanced game engines
+                      : Platform deployment
+                      : Monetization strategies
+                      : Industry networking
+```
+
+### 🛠️ ملخص أدوات تطوير الألعاب الكاملة الخاصة بك
+
+بعد إكمال سلسلة ألعاب الفضاء هذه بالكامل، أصبحت الآن متقنًا لـ:
+- **هندسة الألعاب**: أنظمة تعتمد على الأحداث، حلقات الألعاب، وإدارة الحالة
+- **برمجة الرسومات**: واجهة Canvas API، عرض الصور المتحركة، والمؤثرات البصرية
+- **أنظمة الإدخال**: التعامل مع لوحة المفاتيح، اكتشاف التصادم، والتحكم التفاعلي
+- **تصميم الألعاب**: ردود فعل اللاعبين، أنظمة التقدم، وآليات الجذب
+- **تحسين الأداء**: العرض الفعال، إدارة الذاكرة، والتحكم في معدل الإطارات
+- **تجربة المستخدم**: التواصل الواضح، التحكم السلس، وتفاصيل الإتقان
+- **أنماط احترافية**: كتابة الكود النظيف، تقنيات التصحيح، وتنظيم المشاريع
+
+**تطبيقات واقعية**: مهاراتك في تطوير الألعاب تنطبق مباشرة على:
+- **تطبيقات الويب التفاعلية**: واجهات ديناميكية وأنظمة الوقت الحقيقي
+- **تصور البيانات**: الرسوم المتحركة التفاعلية والرسوم البيانية
+- **التكنولوجيا التعليمية**: التلعيب وتجارب التعلم الجذابة
+- **تطوير التطبيقات المحمولة**: التفاعلات القائمة على اللمس وتحسين الأداء
+- **برامج المحاكاة**: محركات الفيزياء والنمذجة في الوقت الحقيقي
+- **الصناعات الإبداعية**: الفن التفاعلي، الترفيه، والتجارب الرقمية
+
+**المهارات المهنية المكتسبة**: يمكنك الآن:
+- **تصميم** أنظمة تفاعلية معقدة من البداية
+- **تصحيح الأخطاء** في التطبيقات الوقتية باستخدام نهج منهجي
+- **تحسين** الأداء لتجارب مستخدم سلسة
+- **تصميم** واجهات مستخدم جذابة وأنماط تفاعل
+- **التعاون** بفعالية في المشاريع التقنية مع تنظيم الكود بشكل صحيح
+
+**مفاهيم تطوير الألعاب التي تم إتقانها**:
+- **أنظمة الوقت الحقيقي**: حلقات الألعاب، إدارة معدل الإطارات، والأداء
+- **هندسة تعتمد على الأحداث**: أنظمة مفصولة وتمرير الرسائل
+- **إدارة الحالة**: التعامل مع البيانات المعقدة وإدارة دورة الحياة
+- **برمجة واجهات المستخدم**: رسومات Canvas وتصميم تفاعلي
+- **نظرية تصميم الألعاب**: علم نفس اللاعبين وآليات الجذب
+
+**المستوى التالي**: أنت جاهز لاستكشاف أطر الألعاب المتقدمة، الرسومات ثلاثية الأبعاد، الأنظمة متعددة اللاعبين، أو الانتقال إلى أدوار تطوير الألعاب الاحترافية!
+
+🌟 **إنجاز محقق**: لقد أكملت رحلة تطوير الألعاب بالكامل وبنيت تجربة تفاعلية بجودة احترافية من البداية!
+
+**مرحبًا بك في مجتمع تطوير الألعاب!** 🎮✨
+
+## تحدي GitHub Copilot Agent 🚀
+
+استخدم وضع Agent لإكمال التحدي التالي:
+
+**الوصف:** قم بتحسين لعبة الفضاء من خلال تنفيذ نظام تقدم المستويات مع زيادة الصعوبة والميزات الإضافية.
+
+**المهمة:** أنشئ نظام لعبة فضاء متعدد المستويات حيث يحتوي كل مستوى على المزيد من سفن الأعداء مع زيادة السرعة والصحة. أضف مضاعف نقاط يزيد مع كل مستوى، وقم بتنفيذ ميزات إضافية (مثل إطلاق النار السريع أو الدرع) تظهر عشوائيًا عند تدمير الأعداء. قم بتضمين مكافأة إكمال المستوى وعرض المستوى الحالي على الشاشة بجانب النقاط الحالية والأرواح.
+
+تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+
+## 🚀 تحدي تحسين اختياري
+
+**أضف الصوت إلى لعبتك**: قم بتحسين تجربة اللعب من خلال تنفيذ المؤثرات الصوتية! ضع في اعتبارك إضافة صوتيات لـ:
+
+- **إطلاق الليزر** عند إطلاق اللاعب
+- **تدمير الأعداء** عند ضرب السفن
+- **ضرر البطل** عند تلقي اللاعب ضربات
+- **موسيقى النصر** عند الفوز باللعبة
+- **صوت الهزيمة** عند خسارة اللعبة
+
+**مثال على تنفيذ الصوتيات:**
+
+```javascript
+// Create audio objects
+const laserSound = new Audio('assets/laser.wav');
+const explosionSound = new Audio('assets/explosion.wav');
+
+// Play sounds during game events
+function playLaserSound() {
+  laserSound.currentTime = 0; // Reset to beginning
+  laserSound.play();
+}
+```
+
+**ما تحتاج إلى معرفته:**
+- **إنشاء** كائنات صوتية لمؤثرات صوتية مختلفة
+- **إعادة ضبط** `currentTime` للسماح بتأثيرات صوتية سريعة
+- **التعامل مع** سياسات التشغيل التلقائي للمتصفح من خلال تشغيل الصوتيات عبر تفاعلات المستخدم
+- **إدارة** حجم الصوت وتوقيته لتحسين تجربة اللعبة
+
+> 💡 **مصدر تعليمي**: استكشف [صندوق الصوتيات](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) لتتعلم المزيد عن تنفيذ الصوتيات في ألعاب JavaScript.
+
+## اختبار ما بعد المحاضرة
+
+[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/40)
+
+## المراجعة والدراسة الذاتية
 
-**ما الذي يحدث هنا:**
-- **تصادم الليزر مع العدو**: يختفي كلاهما، تحصل على نقاط، ونتحقق إذا كنت قد فزت
-- **تصادم العدو معك**: تخسر حياة، ونتحقق إذا كنت لا تزال على قيد الحياة
-- **ترتيب ذكي**: نتحقق من الهزيمة أولاً (لا أحد يريد الفوز والخسارة في نفس الوقت!)
-- **ردود فعل فورية**: بمجرد حدوث شيء مهم، تعرف اللعبة بذلك
+مهمتك هي إنشاء نموذج لعبة جديد، لذا استكشف بعض الألعاب المثيرة للاهتمام لترى نوع اللعبة التي قد ترغب في بنائها.
 
-### الخطوة 3: إضافة ثوابت رسائل جديدة
+## المهمة
 
-ستحتاج إلى إضافة أنواع رسائل جديدة إلى كائن الثوابت `Messages`. هذه الثو
+[قم ببناء نموذج لعبة](assignment.md)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/7-bank-project/1-template-route/README.md b/translations/ar/7-bank-project/1-template-route/README.md
index 040059077a..b6e533a480 100644
--- a/translations/ar/7-bank-project/1-template-route/README.md
+++ b/translations/ar/7-bank-project/1-template-route/README.md
@@ -1,47 +1,94 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5d259f6962464ad91e671083aa0398f4",
-  "translation_date": "2025-10-22T14:21:48+00:00",
+  "original_hash": "351678bece18f07d9daa987a881fb062",
+  "translation_date": "2025-11-03T12:40:11+00:00",
   "source_file": "7-bank-project/1-template-route/README.md",
   "language_code": "ar"
 }
 -->
 # بناء تطبيق مصرفي الجزء الأول: قوالب HTML والمسارات في تطبيق ويب
 
-عندما قامت حاسوب التوجيه الخاص بـ Apollo 11 بالتنقل إلى القمر في عام 1969، كان عليه التبديل بين برامج مختلفة دون إعادة تشغيل النظام بالكامل. تعمل تطبيقات الويب الحديثة بطريقة مشابهة – فهي تغير ما تراه دون إعادة تحميل كل شيء من البداية. هذا يخلق تجربة سلسة وسريعة يتوقعها المستخدمون اليوم.
+```mermaid
+journey
+    title Your Banking App Development Journey
+    section SPA Fundamentals
+      Understand single-page apps: 3: Student
+      Learn template concepts: 4: Student
+      Master DOM manipulation: 4: Student
+    section Routing Systems
+      Implement client-side routing: 4: Student
+      Handle browser history: 5: Student
+      Create navigation systems: 5: Student
+    section Professional Patterns
+      Build modular architecture: 5: Student
+      Apply best practices: 5: Student
+      Create user experiences: 5: Student
+```
+
+عندما قامت حاسوب التوجيه الخاص بـ Apollo 11 بالتنقل إلى القمر في عام 1969، كان عليه التبديل بين برامج مختلفة دون إعادة تشغيل النظام بالكامل. تعمل تطبيقات الويب الحديثة بطريقة مشابهة - فهي تغير ما تراه دون إعادة تحميل كل شيء من البداية. هذا يخلق تجربة سلسة وسريعة يتوقعها المستخدمون اليوم.
 
-على عكس المواقع التقليدية التي تعيد تحميل الصفحات بالكامل لكل تفاعل، تقوم تطبيقات الويب الحديثة بتحديث الأجزاء التي تحتاج إلى تغيير فقط. هذا النهج، مثلما يقوم مركز التحكم بالتبديل بين شاشات مختلفة مع الحفاظ على الاتصال المستمر، يخلق تلك التجربة السلسة التي اعتدنا عليها.
+على عكس المواقع التقليدية التي تعيد تحميل الصفحات بالكامل مع كل تفاعل، تقوم تطبيقات الويب الحديثة بتحديث الأجزاء التي تحتاج إلى تغيير فقط. هذا النهج، مثلما يقوم مركز التحكم بالتبديل بين شاشات مختلفة مع الحفاظ على التواصل المستمر، يخلق تلك التجربة السلسة التي اعتدنا عليها.
 
-إليك ما يجعل الفرق كبيرًا جدًا:
+إليك ما يجعل الفرق كبيرًا:
 
 | التطبيقات التقليدية متعددة الصفحات | التطبيقات الحديثة ذات الصفحة الواحدة |
-|------------------------------------|------------------------------------|
-| **التنقل** | إعادة تحميل الصفحة بالكامل لكل شاشة | تبديل المحتوى بشكل فوري |
-| **الأداء** | أبطأ بسبب تنزيل HTML بالكامل | أسرع مع تحديثات جزئية |
+|----------------------------|-------------------------|
+| **التنقل** | إعادة تحميل الصفحة بالكامل لكل شاشة | تبديل المحتوى الفوري |
+| **الأداء** | أبطأ بسبب تنزيل HTML بالكامل | أسرع مع التحديثات الجزئية |
 | **تجربة المستخدم** | وميض الصفحات المزعج | انتقالات سلسة تشبه التطبيقات |
 | **مشاركة البيانات** | صعوبة بين الصفحات | إدارة الحالة بسهولة |
-| **التطوير** | ملفات HTML متعددة تحتاج إلى صيانة | ملف HTML واحد مع قوالب ديناميكية |
+| **التطوير** | ملفات HTML متعددة للصيانة | HTML واحد مع قوالب ديناميكية |
 
 **فهم التطور:**
-- **التطبيقات التقليدية** تتطلب طلبات من الخادم لكل عملية تنقل
+- **التطبيقات التقليدية** تتطلب طلبات خادم لكل إجراء تنقل
 - **التطبيقات الحديثة ذات الصفحة الواحدة (SPAs)** يتم تحميلها مرة واحدة وتحديث المحتوى ديناميكيًا باستخدام JavaScript
 - **توقعات المستخدمين** الآن تفضل التفاعلات الفورية والسلسة
-- **فوائد الأداء** تشمل تقليل استهلاك النطاق الترددي واستجابات أسرع
+- **فوائد الأداء** تشمل تقليل عرض النطاق الترددي واستجابات أسرع
 
-في هذا الدرس، سنقوم ببناء تطبيق مصرفي يحتوي على شاشات متعددة تتدفق معًا بسلاسة. مثلما يستخدم العلماء أدوات معيارية يمكن إعادة تكوينها لتجارب مختلفة، سنستخدم قوالب HTML كعناصر قابلة لإعادة الاستخدام يمكن عرضها حسب الحاجة.
+في هذا الدرس، سنقوم ببناء تطبيق مصرفي يحتوي على شاشات متعددة تتدفق بسلاسة معًا. مثلما يستخدم العلماء أدوات معيارية يمكن إعادة تكوينها لتجارب مختلفة، سنستخدم قوالب HTML كعناصر قابلة لإعادة الاستخدام يمكن عرضها حسب الحاجة.
 
-ستعمل مع قوالب HTML (مخططات قابلة لإعادة الاستخدام لشاشات مختلفة)، توجيه JavaScript (النظام الذي يبدل بين الشاشات)، وواجهة برمجة التطبيقات الخاصة بتاريخ المتصفح (التي تحافظ على عمل زر الرجوع كما هو متوقع). هذه هي نفس التقنيات الأساسية التي تستخدمها أطر العمل مثل React، Vue، وAngular.
+ستعمل مع قوالب HTML (مخططات قابلة لإعادة الاستخدام لشاشات مختلفة)، توجيه JavaScript (النظام الذي يبدل بين الشاشات)، وواجهة برمجة تطبيقات تاريخ المتصفح (التي تحافظ على عمل زر الرجوع كما هو متوقع). هذه هي نفس التقنيات الأساسية التي تستخدمها أطر العمل مثل React، Vue، وAngular.
 
-بحلول النهاية، سيكون لديك تطبيق مصرفي يعمل يوضح مبادئ التطبيقات ذات الصفحة الواحدة بشكل احترافي.
+بحلول النهاية، سيكون لديك تطبيق مصرفي يعمل يوضح مبادئ تطبيقات الصفحة الواحدة الاحترافية.
+
+```mermaid
+mindmap
+  root((Single-Page Applications))
+    Architecture
+      Template System
+      Client-side Routing
+      State Management
+      Event Handling
+    Templates
+      Reusable Components
+      Dynamic Content
+      DOM Manipulation
+      Content Switching
+    Routing
+      URL Management
+      History API
+      Navigation Logic
+      Browser Integration
+    User Experience
+      Fast Navigation
+      Smooth Transitions
+      Consistent State
+      Modern Interactions
+    Performance
+      Reduced Server Requests
+      Faster Page Transitions
+      Efficient Resource Usage
+      Better Responsiveness
+```
 
 ## اختبار ما قبل المحاضرة
 
 [اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/41)
 
-### ما ستحتاجه
+### ما الذي ستحتاجه
 
-سنحتاج إلى خادم ويب محلي لاختبار تطبيقنا المصرفي – لا تقلق، الأمر أسهل مما يبدو! إذا لم يكن لديك واحد مثبت بالفعل، فقط قم بتثبيت [Node.js](https://nodejs.org) وقم بتشغيل `npx lite-server` من مجلد المشروع الخاص بك. هذا الأمر المفيد يقوم بتشغيل خادم محلي ويفتح تطبيقك تلقائيًا في المتصفح.
+سنحتاج إلى خادم ويب محلي لاختبار تطبيقنا المصرفي - لا تقلق، الأمر أسهل مما يبدو! إذا لم يكن لديك واحد مثبت بالفعل، فقط قم بتثبيت [Node.js](https://nodejs.org) وقم بتشغيل `npx lite-server` من مجلد المشروع الخاص بك. هذا الأمر المفيد يقوم بتشغيل خادم محلي ويفتح تطبيقك تلقائيًا في المتصفح.
 
 ### التحضير
 
@@ -62,9 +109,9 @@ CO_OP_TRANSLATOR_METADATA:
 ```
 
 **إليك ما يوفره هذا القالب الأساسي:**
-- **يحدد** هيكل مستند HTML5 مع إعلان DOCTYPE الصحيح
+- **يحدد** هيكل مستند HTML5 مع إعلان DOCTYPE المناسب
 - **يهيئ** ترميز الأحرف كـ UTF-8 لدعم النصوص الدولية
-- **يمكن** التصميم المتجاوب باستخدام علامة meta الخاصة بالعرض لتوافق الأجهزة المحمولة
+- **يمكن** التصميم المتجاوب مع علامة meta الخاصة بالعرض لتوافق الأجهزة المحمولة
 - **يضع** عنوانًا وصفيًا يظهر في علامة تبويب المتصفح
 - **ينشئ** قسمًا نظيفًا للجسم حيث سنبني تطبيقنا
 
@@ -87,20 +134,38 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## قوالب HTML
 
-تحل القوالب مشكلة أساسية في تطوير الويب. عندما اخترع غوتنبرغ الطباعة بالحروف المتحركة في الأربعينيات من القرن الخامس عشر، أدرك أنه بدلاً من نحت صفحات كاملة، يمكنه إنشاء كتل حروف قابلة لإعادة الاستخدام وترتيبها حسب الحاجة. تعمل قوالب HTML على نفس المبدأ – بدلاً من إنشاء ملفات HTML منفصلة لكل شاشة، تقوم بتحديد هياكل قابلة لإعادة الاستخدام يمكن عرضها عند الحاجة.
+تحل القوالب مشكلة أساسية في تطوير الويب. عندما اخترع غوتنبرغ الطباعة بالحروف المتحركة في الأربعينيات من القرن الخامس عشر، أدرك أنه بدلاً من نحت صفحات كاملة، يمكنه إنشاء كتل حروف قابلة لإعادة الاستخدام وترتيبها حسب الحاجة. تعمل قوالب HTML على نفس المبدأ - بدلاً من إنشاء ملفات HTML منفصلة لكل شاشة، تقوم بتحديد هياكل قابلة لإعادة الاستخدام يمكن عرضها عند الحاجة.
+
+```mermaid
+flowchart TD
+    A["📋 Template Definition"] --> B["💬 Hidden in DOM"]
+    B --> C["🔍 JavaScript Finds Template"]
+    C --> D["📋 Clone Template Content"]
+    D --> E["🔗 Attach to Visible DOM"]
+    E --> F["👁️ User Sees Content"]
+    
+    G["Login Template"] --> A
+    H["Dashboard Template"] --> A
+    I["Future Templates"] --> A
+    
+    style A fill:#e3f2fd
+    style D fill:#e8f5e8
+    style F fill:#fff3e0
+    style B fill:#f3e5f5
+```
 
-فكر في القوالب كمخططات لأجزاء مختلفة من تطبيقك. تمامًا كما يقوم المهندس المعماري بإنشاء مخطط واحد ويستخدمه عدة مرات بدلاً من إعادة رسم غرف متطابقة، نقوم بإنشاء القوالب مرة واحدة ونستخدمها حسب الحاجة. يحتفظ المتصفح بهذه القوالب مخفية حتى يقوم JavaScript بتنشيطها.
+فكر في القوالب كمخططات لأجزاء مختلفة من تطبيقك. تمامًا كما يقوم المهندس المعماري بإنشاء مخطط واحد ويستخدمه عدة مرات بدلاً من إعادة رسم غرف متطابقة، نقوم بإنشاء القوالب مرة واحدة ونستخدمها عند الحاجة. يحتفظ المتصفح بهذه القوالب مخفية حتى يقوم JavaScript بتنشيطها.
 
 إذا كنت تريد إنشاء شاشات متعددة لصفحة ويب، فإن أحد الحلول هو إنشاء ملف HTML لكل شاشة تريد عرضها. ومع ذلك، يأتي هذا الحل مع بعض الإزعاج:
 
 - يجب عليك إعادة تحميل HTML بالكامل عند تبديل الشاشة، مما قد يكون بطيئًا.
 - من الصعب مشاركة البيانات بين الشاشات المختلفة.
 
-نهج آخر هو أن يكون لديك ملف HTML واحد فقط، وتحديد قوالب [HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) متعددة باستخدام عنصر `<template>`. القالب هو كتلة HTML قابلة لإعادة الاستخدام لا يتم عرضها بواسطة المتصفح، ويجب أن يتم إنشاؤها أثناء وقت التشغيل باستخدام JavaScript.
+نهج آخر هو وجود ملف HTML واحد فقط، وتحديد قوالب [HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) متعددة باستخدام عنصر `<template>`. القالب هو كتلة HTML قابلة لإعادة الاستخدام لا يتم عرضها بواسطة المتصفح، ويجب أن يتم تفعيلها أثناء وقت التشغيل باستخدام JavaScript.
 
-### لنبدأ البناء
+### لنقم ببنائه
 
-سنقوم بإنشاء تطبيق مصرفي يحتوي على شاشتين رئيسيتين: صفحة تسجيل الدخول ولوحة التحكم. أولاً، دعنا نضيف عنصرًا نائبًا إلى جسم HTML – هذا هو المكان الذي ستظهر فيه جميع شاشاتنا المختلفة:
+سنقوم بإنشاء تطبيق مصرفي يحتوي على شاشتين رئيسيتين: صفحة تسجيل الدخول ولوحة التحكم. أولاً، دعنا نضيف عنصرًا نائبًا إلى جسم HTML الخاص بنا - هذا هو المكان الذي ستظهر فيه جميع شاشاتنا المختلفة:
 
 ```html
 <div id="app">Loading...</div>
@@ -108,11 +173,11 @@ CO_OP_TRANSLATOR_METADATA:
 
 **فهم هذا العنصر النائب:**
 - **ينشئ** حاوية مع المعرف "app" حيث سيتم عرض جميع الشاشات
-- **يعرض** رسالة تحميل حتى يقوم JavaScript بتهيئة الشاشة الأولى
+- **يعرض** رسالة تحميل حتى يقوم JavaScript بتشغيل الشاشة الأولى
 - **يوفر** نقطة تركيب واحدة لمحتوانا الديناميكي
 - **يمكن** استهدافه بسهولة من JavaScript باستخدام `document.getElementById()`
 
-> 💡 **نصيحة احترافية**: نظرًا لأن محتوى هذا العنصر سيتم استبداله، يمكننا وضع رسالة تحميل أو مؤشر سيتم عرضه أثناء تحميل التطبيق.
+> 💡 **نصيحة احترافية**: نظرًا لأن محتوى هذا العنصر سيتم استبداله، يمكننا وضع رسالة تحميل أو مؤشر يتم عرضه أثناء تحميل التطبيق.
 
 بعد ذلك، دعنا نضيف أسفل القالب HTML لصفحة تسجيل الدخول. في الوقت الحالي، سنضع فقط عنوانًا وقسمًا يحتوي على رابط سنستخدمه للتنقل.
 
@@ -162,17 +227,33 @@ CO_OP_TRANSLATOR_METADATA:
 </template>
 ```
 
-**دعونا نفهم كل جزء من هذه اللوحة:**
-- **يهيكل** الصفحة باستخدام عنصر `<header>` دلالي يحتوي على التنقل
+**لنقم بفهم كل جزء من هذه اللوحة:**
+- **يهيكل** الصفحة بعنصر `<header>` دلالي يحتوي على التنقل
 - **يعرض** عنوان التطبيق بشكل متسق عبر الشاشات للعلامة التجارية
-- **يوفر** رابط تسجيل الخروج الذي يعيد المستخدم إلى شاشة تسجيل الدخول
+- **يوفر** رابط تسجيل الخروج الذي يعيد التوجيه إلى شاشة تسجيل الدخول
 - **يعرض** الرصيد الحالي للحساب في قسم مخصص
 - **ينظم** بيانات المعاملات باستخدام جدول HTML منظم بشكل صحيح
-- **يحدد** رؤوس الجدول لأعمدة التاريخ، الكائن، والمبلغ
+- **يحدد** رؤوس الجدول لأعمدة التاريخ، الموضوع، والمبلغ
 - **يترك** جسم الجدول فارغًا لحقن المحتوى الديناميكي لاحقًا
 
 > 💡 **نصيحة احترافية**: عند إنشاء قوالب HTML، إذا كنت تريد رؤية كيف ستبدو، يمكنك تعليق سطور `<template>` و`</template>` عن طريق إحاطتها بـ `<!-- -->`.
 
+### 🔄 **تسجيل تربوي**
+**فهم نظام القوالب**: قبل تنفيذ JavaScript، تأكد من فهمك:
+- ✅ كيف تختلف القوالب عن عناصر HTML العادية
+- ✅ لماذا تبقى القوالب مخفية حتى يتم تفعيلها بواسطة JavaScript
+- ✅ أهمية هيكل HTML الدلالي في القوالب
+- ✅ كيف تمكن القوالب مكونات واجهة المستخدم القابلة لإعادة الاستخدام
+
+**اختبار سريع ذاتي**: ماذا يحدث إذا قمت بإزالة علامات `<template>` من حول HTML الخاص بك؟
+*الإجابة: يصبح المحتوى مرئيًا فورًا ويفقد وظيفته كقالب*
+
+**فوائد الهيكلية**: توفر القوالب:
+- **إعادة الاستخدام**: تعريف واحد، حالات متعددة
+- **الأداء**: لا تحليل HTML مكرر
+- **سهولة الصيانة**: هيكل واجهة المستخدم المركزي
+- **المرونة**: تبديل المحتوى الديناميكي
+
 ✅ لماذا تعتقد أننا نستخدم سمات `id` على القوالب؟ هل يمكننا استخدام شيء آخر مثل الفئات؟
 
 ## إحياء القوالب باستخدام JavaScript
@@ -181,9 +262,9 @@ CO_OP_TRANSLATOR_METADATA:
 
 تتبع العملية ثلاث خطوات متسقة تشكل أساس تطوير الويب الحديث. بمجرد فهمك لهذا النمط، ستتعرف عليه عبر العديد من الأطر والمكتبات.
 
-إذا جربت ملف HTML الحالي في المتصفح، سترى أنه يتوقف عند عرض `Loading...`. هذا لأننا بحاجة إلى إضافة بعض كود JavaScript لإنشاء وعرض قوالب HTML.
+إذا جربت ملف HTML الحالي الخاص بك في المتصفح، سترى أنه يتوقف عند عرض `Loading...`. هذا لأننا بحاجة إلى إضافة بعض كود JavaScript لتفعيل وعرض قوالب HTML.
 
-إنشاء قالب يتم عادةً في 3 خطوات:
+عادةً ما يتم تفعيل القالب في 3 خطوات:
 
 1. استرجاع عنصر القالب في DOM، على سبيل المثال باستخدام [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
 2. نسخ عنصر القالب، باستخدام [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
@@ -216,7 +297,7 @@ flowchart TD
 
 ### المهمة
 
-قم بإنشاء ملف جديد باسم `app.js` في مجلد المشروع الخاص بك واستورد هذا الملف في قسم `<head>` من HTML:
+قم بإنشاء ملف جديد باسم `app.js` في مجلد المشروع الخاص بك وقم باستيراد هذا الملف في قسم `<head>` من HTML الخاص بك:
 
 ```html
 <script src="app.js" defer></script>
@@ -224,11 +305,11 @@ flowchart TD
 
 **فهم استيراد هذا السكربت:**
 - **يربط** ملف JavaScript بمستند HTML الخاص بنا
-- **يستخدم** السمة `defer` لضمان تشغيل السكربت بعد اكتمال تحليل HTML
+- **يستخدم** سمة `defer` لضمان تشغيل السكربت بعد اكتمال تحليل HTML
 - **يمكن** الوصول إلى جميع عناصر DOM لأنها محملة بالكامل قبل تنفيذ السكربت
 - **يتبع** أفضل الممارسات الحديثة لتحميل السكربت والأداء
 
-الآن في `app.js`، سننشئ وظيفة جديدة باسم `updateRoute`:
+الآن في `app.js`، سنقوم بإنشاء وظيفة جديدة `updateRoute`:
 
 ```js
 function updateRoute(templateId) {
@@ -253,18 +334,35 @@ function updateRoute(templateId) {
 updateRoute('login');
 ```
 
-**ما يحققه استدعاء هذه الوظيفة:**
-- **ينشط** قالب تسجيل الدخول عن طريق تمرير معرفه كمعامل
+**ما الذي تحققه هذه المكالمة الوظيفية:**
+- **يفعل** قالب تسجيل الدخول عن طريق تمرير معرفه كمعامل
 - **يوضح** كيفية التبديل برمجيًا بين شاشات التطبيق المختلفة
 - **يعرض** شاشة تسجيل الدخول بدلاً من رسالة "Loading..."
 
-✅ ما هو الغرض من هذا الكود `app.innerHTML = '';`؟ ماذا يحدث بدونه؟
+✅ ما الغرض من هذا الكود `app.innerHTML = '';`؟ ماذا يحدث بدونه؟
 
 ## إنشاء المسارات
 
-التوجيه يتعلق أساسًا بربط عناوين URL بالمحتوى الصحيح. فكر في كيفية استخدام مشغلي الهاتف الأوائل لوحات التبديل لتوصيل المكالمات – كانوا يأخذون طلبًا واردًا ويوجهونه إلى الوجهة الصحيحة. يعمل التوجيه في الويب بشكل مشابه، حيث يأخذ طلب عنوان URL ويحدد المحتوى الذي سيتم عرضه.
+التوجيه يتعلق أساسًا بربط عناوين URL بالمحتوى الصحيح. فكر في كيفية استخدام مشغلي الهاتف الأوائل لوحات التبديل لتوصيل المكالمات - كانوا يأخذون طلبًا واردًا ويوجهونه إلى الوجهة الصحيحة. يعمل توجيه الويب بطريقة مشابهة، حيث يأخذ طلب عنوان URL ويحدد المحتوى الذي سيتم عرضه.
 
-تقليديًا، كانت الخوادم تقوم بذلك عن طريق تقديم ملفات HTML مختلفة لعناوين URL مختلفة. بما أننا نبني تطبيقًا ذو صفحة واحدة، نحتاج إلى التعامل مع هذا التوجيه بأنفسنا باستخدام JavaScript. هذا النهج يمنحنا مزيدًا من التحكم في تجربة المستخدم والأداء.
+```mermaid
+flowchart LR
+    A["🌐 URL Path<br/>/dashboard"] --> B["🗺️ Routes Object<br/>Lookup"]
+    B --> C["🎯 Template ID<br/>'dashboard'"]
+    C --> D["📌 Find Template<br/>getElementById"]
+    D --> E["👁️ Display Screen<br/>Clone & Append"]
+    
+    F["📍 /login"] --> G["🎯 'login'"]
+    H["📍 /unknown"] --> I["❌ Not Found"]
+    I --> J["🔄 Redirect to /login"]
+    
+    style B fill:#e3f2fd
+    style E fill:#e8f5e8
+    style I fill:#ffebee
+    style J fill:#fff3e0
+```
+
+تقليديًا، كانت الخوادم تقوم بذلك عن طريق تقديم ملفات HTML مختلفة لعناوين URL مختلفة. نظرًا لأننا نبني تطبيق صفحة واحدة، نحتاج إلى التعامل مع هذا التوجيه بأنفسنا باستخدام JavaScript. هذا النهج يمنحنا مزيدًا من التحكم في تجربة المستخدم والأداء.
 
 ```mermaid
 flowchart LR
@@ -284,12 +382,12 @@ flowchart LR
 ```
 
 **فهم تدفق التوجيه:**
-- **تغييرات URL** تؤدي إلى بحث في تكوين المسارات لدينا
+- **تغييرات URL** تؤدي إلى البحث في تكوين المسارات لدينا
 - **المسارات الصالحة** ترتبط بمعرفات قوالب محددة للعرض
 - **المسارات غير الصالحة** تؤدي إلى سلوك احتياطي لمنع الحالات المعطلة
 - **عرض القالب** يتبع عملية الخطوات الثلاث التي تعلمناها سابقًا
 
-عند الحديث عن تطبيق ويب، نسمي *التوجيه* النية لربط **عناوين URL** بشاشات محددة يجب عرضها. في موقع ويب يحتوي على ملفات HTML متعددة، يتم ذلك تلقائيًا حيث تنعكس مسارات الملفات على عنوان URL. على سبيل المثال، مع هذه الملفات في مجلد المشروع الخاص بك:
+عند الحديث عن تطبيق ويب، نسمي *التوجيه* النية لرسم **عناوين URL** لشاشات محددة يجب عرضها. في موقع ويب يحتوي على ملفات HTML متعددة، يتم ذلك تلقائيًا حيث تنعكس مسارات الملفات على عنوان URL. على سبيل المثال، مع هذه الملفات في مجلد المشروع الخاص بك:
 
 ```
 mywebsite/index.html
@@ -305,7 +403,7 @@ https://site.com/login.html --> mywebsite/login.html
 https://site.com/admin/     --> mywebsite/admin/index.html
 ```
 
-ومع ذلك، بالنسبة لتطبيقنا، نحن نستخدم ملف HTML واحد يحتوي على جميع الشاشات لذا لن يساعدنا هذا السلوك الافتراضي. علينا إنشاء هذا التعيين يدويًا وتحديث القالب المعروض باستخدام JavaScript.
+ومع ذلك، بالنسبة لتطبيق الويب الخاص بنا، نحن نستخدم ملف HTML واحد يحتوي على جميع الشاشات لذا لن يساعدنا هذا السلوك الافتراضي. علينا إنشاء هذا التعيين يدويًا وتحديث القالب المعروض باستخدام JavaScript.
 
 ### المهمة
 
@@ -320,11 +418,10 @@ const routes = {
 
 **فهم تكوين المسارات هذا:**
 - **يحدد** تعيينًا بين مسارات URL ومعرفات القوالب
-- **يستخدم** صياغة الكائن حيث تكون المفاتيح هي مسارات URL والقيم تحتوي على معلومات القالب
+- **يستخدم** صيغة الكائن حيث تكون المفاتيح مسارات URL والقيم تحتوي على معلومات القالب
 - **يمكن** البحث بسهولة عن القالب الذي سيتم عرضه لأي عنوان URL معين
 - **يوفر** هيكلًا قابلًا للتوسع لإضافة مسارات جديدة في المستقبل
-
-الآن دعنا نعدل قليلاً وظيفة `updateRoute`. بدلاً من تمرير معرف القالب مباشرة كمعامل، نريد استرجاعه من خلال النظر أولاً إلى عنوان URL الحالي، ثم استخدام خريطتنا للحصول على قيمة معرف القالب المقابلة. يمكننا استخدام [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) للحصول على قسم المسار فقط من عنوان URL.
+الآن دعونا نعدل قليلاً وظيفة `updateRoute`. بدلاً من تمرير `templateId` مباشرة كمعامل، نريد استرجاعه أولاً من خلال النظر إلى عنوان URL الحالي، ثم استخدام الخريطة الخاصة بنا للحصول على قيمة معرف القالب المقابلة. يمكننا استخدام [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) للحصول فقط على قسم المسار من عنوان URL.
 
 ```js
 function updateRoute() {
@@ -340,49 +437,100 @@ function updateRoute() {
 ```
 
 **تفصيل ما يحدث هنا:**
-- **يستخرج** المسار الحالي من عنوان URL للمتصفح باستخدام `window.location.pathname`
+- **يستخرج** المسار الحالي من عنوان URL الخاص بالمتصفح باستخدام `window.location.pathname`
 - **يبحث** عن تكوين المسار المقابل في كائن المسارات الخاص بنا
 - **يسترجع** معرف القالب من تكوين المسار
 - **يتبع** نفس عملية عرض القالب كما كان من قبل
 - **ينشئ** نظامًا ديناميكيًا يستجيب لتغييرات عنوان URL
 
-هنا قمنا بتعيين المسارات التي أعلناها إلى القالب المقابل. يمكنك تجربتها للتأكد من أنها تعمل بشكل صحيح عن طريق تغيير عنوان URL يدويًا في المتصفح.
+هنا قمنا بربط المسارات التي أعلنا عنها بالقالب المقابل. يمكنك تجربته للتأكد من أنه يعمل بشكل صحيح عن طريق تغيير عنوان URL يدويًا في متصفحك.
+
 ✅ ماذا يحدث إذا أدخلت مسارًا غير معروف في عنوان URL؟ كيف يمكننا حل هذه المشكلة؟
 
 ## إضافة التنقل
 
-مع إنشاء التوجيه، يحتاج المستخدمون إلى طريقة للتنقل عبر التطبيق. تقوم المواقع التقليدية بإعادة تحميل الصفحات بالكامل عند النقر على الروابط، لكننا نريد تحديث عنوان URL والمحتوى دون إعادة تحميل الصفحة. هذا يخلق تجربة أكثر سلاسة تشبه كيفية تبديل التطبيقات المكتبية بين وجهات النظر المختلفة.
+مع إنشاء التوجيه، يحتاج المستخدمون إلى طريقة للتنقل عبر التطبيق. تعيد المواقع التقليدية تحميل الصفحات بالكامل عند النقر على الروابط، لكننا نريد تحديث كل من عنوان URL والمحتوى دون إعادة تحميل الصفحات. هذا يخلق تجربة أكثر سلاسة تشبه كيفية تبديل التطبيقات المكتبية بين وجهات النظر المختلفة.
+
+نحتاج إلى تنسيق شيئين: تحديث عنوان URL الخاص بالمتصفح حتى يتمكن المستخدمون من وضع إشارات مرجعية للصفحات ومشاركة الروابط، وعرض المحتوى المناسب. عندما يتم تنفيذ ذلك بشكل صحيح، فإنه يخلق التنقل السلس الذي يتوقعه المستخدمون من التطبيقات الحديثة.
 
-نحتاج إلى تنسيق شيئين: تحديث عنوان URL في المتصفح حتى يتمكن المستخدمون من حفظ الصفحات ومشاركة الروابط، وعرض المحتوى المناسب. عند التنفيذ بشكل صحيح، يخلق هذا التنقل السلس الذي يتوقعه المستخدمون من التطبيقات الحديثة.
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant App
+    participant Template
+    
+    User->>Browser: Clicks "Login" link
+    Browser->>App: onclick event triggered
+    App->>App: preventDefault() & navigate('/dashboard')
+    App->>Browser: history.pushState('/dashboard')
+    Browser->>Browser: URL updates to /dashboard
+    App->>App: updateRoute() called
+    App->>Template: Find & clone dashboard template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display dashboard screen
+    
+    Note over User,Template: User clicks browser back button
+    
+    User->>Browser: Clicks back button
+    Browser->>Browser: History moves back to /login
+    Browser->>App: popstate event fired
+    App->>App: updateRoute() called automatically
+    App->>Template: Find & clone login template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display login screen
+```
 
-> 🏗️ **نظرة معمارية**: مكونات نظام التنقل
+### 🔄 **مراجعة تعليمية**
+**هيكلية تطبيق الصفحة الواحدة**: تحقق من فهمك للنظام الكامل:
+- ✅ كيف يختلف التوجيه على جانب العميل عن التوجيه التقليدي على جانب الخادم؟
+- ✅ لماذا تعتبر واجهة برمجة التطبيقات History ضرورية للتنقل الصحيح في تطبيق الصفحة الواحدة؟
+- ✅ كيف تمكن القوالب المحتوى الديناميكي دون إعادة تحميل الصفحات؟
+- ✅ ما هو دور معالجة الأحداث في اعتراض التنقل؟
+
+**تكامل النظام**: يوضح تطبيق الصفحة الواحدة الخاص بك:
+- **إدارة القوالب**: مكونات واجهة مستخدم قابلة لإعادة الاستخدام مع محتوى ديناميكي
+- **التوجيه على جانب العميل**: إدارة عنوان URL دون طلبات الخادم
+- **هيكلية تعتمد على الأحداث**: التنقل التفاعلي وتفاعلات المستخدم
+- **تكامل المتصفح**: دعم صحيح لأزرار الرجوع/التقدم
+- **تحسين الأداء**: انتقالات سريعة وتقليل تحميل الخادم
+
+**أنماط احترافية**: لقد قمت بتنفيذ:
+- **فصل النموذج والعرض**: فصل القوالب عن منطق التطبيق
+- **إدارة الحالة**: مزامنة حالة عنوان URL مع المحتوى المعروض
+- **تحسين تدريجي**: تعزيز JavaScript لوظائف HTML الأساسية
+- **تجربة المستخدم**: تنقل سلس يشبه التطبيقات دون إعادة تحميل الصفحات
+
+> � **رؤية هيكلية**: مكونات نظام التنقل
 >
-> **ما الذي تقوم ببنائه:**
+> **ما تقوم ببنائه:**
 > - **🔄 إدارة عنوان URL**: تحديث شريط عنوان المتصفح دون إعادة تحميل الصفحات
 > - **📋 نظام القوالب**: تبديل المحتوى ديناميكيًا بناءً على المسار الحالي  
 > - **📚 تكامل التاريخ**: الحفاظ على وظيفة أزرار الرجوع/التقدم في المتصفح
-> - **🛡️ معالجة الأخطاء**: توفير حلول بديلة للمسارات غير الصالحة أو المفقودة
+> - **🛡️ معالجة الأخطاء**: حلول مرنة للمسارات غير الصالحة أو المفقودة
 >
 > **كيف تعمل المكونات معًا:**
-> - **الاستماع** إلى أحداث التنقل (النقرات، تغييرات التاريخ)
-> - **التحديث** لعنوان URL باستخدام واجهة برمجة التطبيقات History API
-> - **عرض** القالب المناسب للمسار الجديد
-> - **الحفاظ** على تجربة مستخدم سلسة طوال الوقت
+> - **يستمع** لأحداث التنقل (النقرات، تغييرات التاريخ)
+> - **يحدث** عنوان URL باستخدام واجهة برمجة التطبيقات History
+> - **يعرض** القالب المناسب للمسار الجديد
+> - **يحافظ** على تجربة مستخدم سلسة طوال الوقت
 
-الخطوة التالية لتطبيقنا هي إضافة إمكانية التنقل بين الصفحات دون الحاجة إلى تغيير عنوان URL يدويًا. هذا يعني شيئين:
+الخطوة التالية لتطبيقنا هي إضافة إمكانية التنقل بين الصفحات دون الحاجة إلى تغيير عنوان URL يدويًا. يتطلب ذلك شيئين:
 
   1. تحديث عنوان URL الحالي
   2. تحديث القالب المعروض بناءً على عنوان URL الجديد
 
 لقد قمنا بالفعل بمعالجة الجزء الثاني باستخدام وظيفة `updateRoute`، لذا علينا معرفة كيفية تحديث عنوان URL الحالي.
 
-سنحتاج إلى استخدام JavaScript وبشكل أكثر تحديدًا [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) التي تسمح بتحديث عنوان URL وإنشاء إدخال جديد في سجل التصفح، دون إعادة تحميل HTML.
+سنحتاج إلى استخدام JavaScript وبشكل أكثر تحديدًا [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) الذي يسمح بتحديث عنوان URL وإنشاء إدخال جديد في سجل التصفح، دون إعادة تحميل HTML.
 
-> ⚠️ **ملاحظة مهمة**: بينما يمكن استخدام عنصر HTML الرابط [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) بمفرده لإنشاء روابط إلى عناوين URL مختلفة، فإنه سيؤدي إلى إعادة تحميل HTML افتراضيًا. من الضروري منع هذا السلوك عند التعامل مع التوجيه باستخدام JavaScript مخصص، باستخدام وظيفة preventDefault() على حدث النقر.
+> ⚠️ **ملاحظة مهمة**: بينما يمكن استخدام عنصر HTML الرابط [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) بمفرده لإنشاء روابط تشعبية لعناوين URL مختلفة، فإنه سيجعل المتصفح يعيد تحميل HTML افتراضيًا. من الضروري منع هذا السلوك عند التعامل مع التوجيه باستخدام JavaScript مخصص، باستخدام وظيفة preventDefault() على حدث النقر.
 
 ### المهمة
 
-لنقم بإنشاء وظيفة جديدة يمكننا استخدامها للتنقل في تطبيقنا:
+دعونا ننشئ وظيفة جديدة يمكننا استخدامها للتنقل في تطبيقنا:
 
 ```js
 function navigate(path) {
@@ -392,14 +540,14 @@ function navigate(path) {
 ```
 
 **فهم وظيفة التنقل هذه:**
-- **تحديث** عنوان URL للمتصفح إلى المسار الجديد باستخدام `history.pushState`
-- **إضافة** إدخال جديد إلى سجل تاريخ المتصفح لدعم أزرار الرجوع/التقدم بشكل صحيح
-- **تشغيل** وظيفة `updateRoute()` لعرض القالب المقابل
-- **الحفاظ** على تجربة التطبيق أحادي الصفحة دون إعادة تحميل الصفحات
+- **يحدث** عنوان URL الخاص بالمتصفح إلى المسار الجديد باستخدام `history.pushState`
+- **يضيف** إدخالًا جديدًا إلى سجل التصفح الخاص بالمتصفح لدعم أزرار الرجوع/التقدم بشكل صحيح
+- **يحفز** وظيفة `updateRoute()` لعرض القالب المقابل
+- **يحافظ** على تجربة تطبيق الصفحة الواحدة دون إعادة تحميل الصفحات
 
-تقوم هذه الطريقة أولاً بتحديث عنوان URL الحالي بناءً على المسار المعطى، ثم تحديث القالب. الخاصية `window.location.origin` تُرجع جذر عنوان URL، مما يسمح لنا بإعادة بناء عنوان URL كامل من مسار معين.
+تقوم هذه الطريقة أولاً بتحديث عنوان URL الحالي بناءً على المسار المعطى، ثم تحديث القالب. الخاصية `window.location.origin` تعيد جذر عنوان URL، مما يسمح لنا بإعادة بناء عنوان URL كامل من مسار معين.
 
-الآن بعد أن لدينا هذه الوظيفة، يمكننا معالجة المشكلة التي لدينا إذا لم يتطابق المسار مع أي مسار محدد. سنقوم بتعديل وظيفة `updateRoute` بإضافة حل بديل إلى أحد المسارات الموجودة إذا لم نتمكن من العثور على تطابق.
+الآن بعد أن لدينا هذه الوظيفة، يمكننا معالجة المشكلة التي لدينا إذا لم يتطابق مسار مع أي مسار محدد. سنقوم بتعديل وظيفة `updateRoute` بإضافة حل احتياطي إلى أحد المسارات الموجودة إذا لم نتمكن من العثور على تطابق.
 
 ```js
 function updateRoute() {
@@ -419,14 +567,14 @@ function updateRoute() {
 ```
 
 **نقاط رئيسية يجب تذكرها:**
-- **التحقق** مما إذا كان هناك مسار موجود للمسار الحالي
-- **إعادة التوجيه** إلى صفحة تسجيل الدخول عند الوصول إلى مسار غير صالح
-- **توفير** آلية بديلة تمنع التنقل المعطل
-- **ضمان** أن المستخدمين دائمًا يرون شاشة صالحة، حتى مع عناوين URL غير صحيحة
+- **يتحقق** مما إذا كان هناك مسار موجود للمسار الحالي
+- **يعيد التوجيه** إلى صفحة تسجيل الدخول عند الوصول إلى مسار غير صالح
+- **يوفر** آلية احتياطية تمنع التنقل المعطل
+- **يضمن** أن المستخدمين دائمًا يرون شاشة صالحة، حتى مع عناوين URL غير صحيحة
 
 إذا لم يتم العثور على مسار، سنقوم الآن بإعادة التوجيه إلى صفحة `login`.
 
-الآن لنقم بإنشاء وظيفة للحصول على عنوان URL عند النقر على رابط، ولمنع السلوك الافتراضي للرابط في المتصفح:
+الآن دعونا ننشئ وظيفة للحصول على عنوان URL عند النقر على رابط، ولمنع السلوك الافتراضي للرابط في المتصفح:
 
 ```js
 function onLinkClick(event) {
@@ -436,10 +584,10 @@ function onLinkClick(event) {
 ```
 
 **تفصيل معالج النقر هذا:**
-- **منع** السلوك الافتراضي للرابط في المتصفح باستخدام `preventDefault()`
-- **استخراج** عنوان URL الوجهة من عنصر الرابط الذي تم النقر عليه
-- **استدعاء** وظيفة التنقل المخصصة بدلاً من إعادة تحميل الصفحة
-- **الحفاظ** على تجربة التطبيق أحادي الصفحة السلسة
+- **يمنع** السلوك الافتراضي للرابط في المتصفح باستخدام `preventDefault()`
+- **يستخرج** عنوان URL الوجهة من عنصر الرابط الذي تم النقر عليه
+- **يستدعي** وظيفة التنقل المخصصة لدينا بدلاً من إعادة تحميل الصفحة
+- **يحافظ** على تجربة تطبيق الصفحة الواحدة السلسة
 
 ```html
 <a href="/dashboard" onclick="onLinkClick(event)">Login</a>
@@ -447,23 +595,23 @@ function onLinkClick(event) {
 <a href="/login" onclick="onLinkClick(event)">Logout</a>
 ```
 
-**ما الذي يحققه هذا الربط باستخدام onclick:**
-- **ربط** كل رابط بنظام التنقل المخصص لدينا
-- **تمرير** حدث النقر إلى وظيفة `onLinkClick` الخاصة بنا للمعالجة
-- **تمكين** التنقل السلس دون إعادة تحميل الصفحات
-- **الحفاظ** على هيكل عنوان URL الصحيح الذي يمكن للمستخدمين حفظه أو مشاركته
+**ما يحققه هذا الربط باستخدام onclick:**
+- **يربط** كل رابط بنظام التنقل المخصص لدينا
+- **يمرر** حدث النقر إلى وظيفة `onLinkClick` الخاصة بنا للمعالجة
+- **يمكن** التنقل السلس دون إعادة تحميل الصفحات
+- **يحافظ** على هيكل عنوان URL الصحيح الذي يمكن للمستخدمين وضع إشارات مرجعية له أو مشاركته
 
 تربط خاصية [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) حدث النقر بكود JavaScript، هنا استدعاء وظيفة `navigate()`.
 
 جرب النقر على هذه الروابط، يجب أن تكون الآن قادرًا على التنقل بين الشاشات المختلفة لتطبيقك.
 
-✅ طريقة `history.pushState` هي جزء من معيار HTML5 ومُنفذة في [جميع المتصفحات الحديثة](https://caniuse.com/?search=pushState). إذا كنت تقوم ببناء تطبيق ويب للمتصفحات القديمة، هناك حيلة يمكنك استخدامها بدلاً من هذه الواجهة البرمجية: باستخدام [الهاش (`#`)](https://en.wikipedia.org/wiki/URI_fragment) قبل المسار يمكنك تنفيذ التوجيه الذي يعمل مع التنقل العادي للروابط ولا يعيد تحميل الصفحة، حيث كان الغرض منه إنشاء روابط داخلية داخل الصفحة.
+✅ طريقة `history.pushState` هي جزء من معيار HTML5 ومطبقة في [جميع المتصفحات الحديثة](https://caniuse.com/?search=pushState). إذا كنت تقوم ببناء تطبيق ويب للمتصفحات القديمة، هناك حيلة يمكنك استخدامها بدلاً من هذه الواجهة البرمجية: باستخدام [علامة التجزئة (`#`)](https://en.wikipedia.org/wiki/URI_fragment) قبل المسار يمكنك تنفيذ التوجيه الذي يعمل مع التنقل العادي للروابط ولا يعيد تحميل الصفحة، حيث كان الغرض منها إنشاء روابط داخلية داخل الصفحة.
 
 ## جعل أزرار الرجوع والتقدم تعمل
 
-تعتبر أزرار الرجوع والتقدم أساسية لتصفح الويب، تمامًا مثل كيفية مراجعة مراقبي مهام ناسا للحالات السابقة للنظام أثناء المهمات الفضائية. يتوقع المستخدمون أن تعمل هذه الأزرار، وعندما لا تعمل، فإنها تكسر تجربة التصفح المتوقعة.
+أزرار الرجوع والتقدم أساسية لتصفح الويب، تمامًا مثل كيفية مراجعة مراقبي المهمات في ناسا حالات النظام السابقة أثناء المهمات الفضائية. يتوقع المستخدمون أن تعمل هذه الأزرار، وعندما لا تعمل، فإنها تكسر تجربة التصفح المتوقعة.
 
-يحتاج تطبيقنا أحادي الصفحة إلى تكوين إضافي لدعم ذلك. يحتفظ المتصفح بسجل تاريخ (الذي كنا نضيف إليه باستخدام `history.pushState`)، ولكن عندما يتنقل المستخدمون عبر هذا السجل، يحتاج تطبيقنا إلى الاستجابة عن طريق تحديث المحتوى المعروض وفقًا لذلك.
+يحتاج تطبيق الصفحة الواحدة الخاص بنا إلى تكوين إضافي لدعم ذلك. يحتفظ المتصفح بسجل التنقل (الذي كنا نضيف إليه باستخدام `history.pushState`)، ولكن عندما يتنقل المستخدمون عبر هذا السجل، يحتاج تطبيقنا إلى الاستجابة عن طريق تحديث المحتوى المعروض وفقًا لذلك.
 
 ```mermaid
 sequenceDiagram
@@ -496,37 +644,37 @@ sequenceDiagram
 ```
 
 **نقاط التفاعل الرئيسية:**
-- **إجراءات المستخدم** تُشغل التنقل من خلال النقرات أو أزرار المتصفح
+- **إجراءات المستخدم** تحفز التنقل من خلال النقرات أو أزرار المتصفح
 - **التطبيق يعترض** النقرات على الروابط لمنع إعادة تحميل الصفحات
-- **واجهة برمجة التطبيقات History API** تدير تغييرات عنوان URL وسجل تاريخ المتصفح
+- **واجهة برمجة التطبيقات History** تدير تغييرات عنوان URL وسجل التنقل في المتصفح
 - **القوالب** توفر هيكل المحتوى لكل شاشة
 - **مستمعو الأحداث** يضمنون استجابة التطبيق لجميع أنواع التنقل
 
-استخدام `history.pushState` ينشئ إدخالات جديدة في سجل التنقل للمتصفح. يمكنك التحقق من ذلك عن طريق الضغط على *زر الرجوع* في متصفحك، يجب أن يعرض شيئًا مثل هذا:
+استخدام `history.pushState` ينشئ إدخالات جديدة في سجل التنقل الخاص بالمتصفح. يمكنك التحقق من ذلك عن طريق الضغط على *زر الرجوع* في متصفحك، يجب أن يعرض شيئًا مثل هذا:
 
 ![لقطة شاشة لسجل التنقل](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ar.png)
 
 إذا حاولت النقر على زر الرجوع عدة مرات، سترى أن عنوان URL الحالي يتغير ويتم تحديث السجل، لكن نفس القالب يستمر في العرض.
 
-ذلك لأن التطبيق لا يعرف أننا بحاجة إلى استدعاء `updateRoute()` في كل مرة يتغير السجل. إذا نظرت إلى [وثائق `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState)، يمكنك أن ترى أنه إذا تغيرت الحالة - بمعنى أننا انتقلنا إلى عنوان URL مختلف - يتم تشغيل حدث [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event). سنستخدم ذلك لإصلاح هذه المشكلة.
+ذلك لأن التطبيق لا يعرف أننا بحاجة إلى استدعاء `updateRoute()` في كل مرة يتغير السجل. إذا نظرت إلى [وثائق `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState)، يمكنك أن ترى أنه إذا تغيرت الحالة - مما يعني أننا انتقلنا إلى عنوان URL مختلف - يتم تحفيز حدث [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event). سنستخدم ذلك لإصلاح هذه المشكلة.
 
 ### المهمة
 
-لضمان تحديث القالب المعروض عند تغيير سجل المتصفح، سنقوم بإرفاق وظيفة جديدة تستدعي `updateRoute()`. سنقوم بذلك في أسفل ملف `app.js` الخاص بنا:
+للتأكد من تحديث القالب المعروض عندما يتغير سجل المتصفح، سنرفق وظيفة جديدة تستدعي `updateRoute()`. سنقوم بذلك في أسفل ملف `app.js` الخاص بنا:
 
 ```js
 window.onpopstate = () => updateRoute();
 updateRoute();
 ```
 
-**فهم تكامل السجل هذا:**
-- **الاستماع** إلى أحداث `popstate` التي تحدث عندما يتنقل المستخدمون باستخدام أزرار المتصفح
-- **استخدام** وظيفة سهمية لتصريح مختصر لمعالج الحدث
-- **استدعاء** `updateRoute()` تلقائيًا كلما تغيرت حالة السجل
-- **تهيئة** التطبيق عن طريق استدعاء `updateRoute()` عند تحميل الصفحة لأول مرة
-- **ضمان** عرض القالب الصحيح بغض النظر عن كيفية تنقل المستخدمين
+**فهم هذا التكامل مع السجل:**
+- **يستمع** لأحداث `popstate` التي تحدث عندما يتنقل المستخدمون باستخدام أزرار المتصفح
+- **يستخدم** وظيفة سهمية لكتابة مختصرة لمعالج الحدث
+- **يستدعي** `updateRoute()` تلقائيًا كلما تغيرت حالة السجل
+- **يبدأ** التطبيق عن طريق استدعاء `updateRoute()` عند تحميل الصفحة لأول مرة
+- **يضمن** عرض القالب الصحيح بغض النظر عن كيفية تنقل المستخدمين
 
-> 💡 **نصيحة احترافية**: استخدمنا [وظيفة سهمية](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) هنا لتصريح معالج حدث `popstate` الخاص بنا للاختصار، لكن وظيفة عادية ستعمل بنفس الطريقة.
+> 💡 **نصيحة احترافية**: استخدمنا [وظيفة سهمية](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) هنا لإعلان معالج حدث `popstate` لدينا بشكل مختصر، ولكن وظيفة عادية ستعمل بنفس الطريقة.
 
 إليك فيديو تذكيري عن وظائف السهم:
 
@@ -536,26 +684,135 @@ updateRoute();
 
 الآن حاول استخدام أزرار الرجوع والتقدم في متصفحك، وتأكد من أن المسار المعروض يتم تحديثه بشكل صحيح هذه المرة.
 
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] اختبر التنقل في تطبيقك البنكي باستخدام أزرار الرجوع/التقدم في المتصفح
+- [ ] جرب كتابة عناوين URL مختلفة يدويًا في شريط العنوان لاختبار التوجيه
+- [ ] افتح أدوات المطور في المتصفح وتحقق من كيفية استنساخ القوالب إلى DOM
+- [ ] جرب إضافة عبارات console.log لتتبع تدفق التوجيه
+
+### 🎯 **ما يمكنك تحقيقه خلال الساعة القادمة**
+- [ ] أكمل اختبار ما بعد الدرس وافهم مفاهيم هيكلية تطبيق الصفحة الواحدة
+- [ ] أضف تنسيقات CSS لجعل قوالب تطبيقك البنكي تبدو احترافية
+- [ ] نفذ تحدي صفحة خطأ 404 مع معالجة الأخطاء بشكل صحيح
+- [ ] أنشئ تحدي صفحة الاعتمادات مع وظيفة توجيه إضافية
+- [ ] أضف حالات التحميل والانتقالات بين تبديلات القوالب
+
+### 📅 **رحلة تطوير تطبيق الصفحة الواحدة الخاصة بك لمدة أسبوع**
+- [ ] أكمل التطبيق البنكي بالكامل مع النماذج، إدارة البيانات، والاستمرارية
+- [ ] أضف ميزات توجيه متقدمة مثل معلمات المسار والمسارات المتداخلة
+- [ ] نفذ حراس التنقل والتوجيه القائم على المصادقة
+- [ ] أنشئ مكونات قوالب قابلة لإعادة الاستخدام ومكتبة مكونات
+- [ ] أضف الرسوم المتحركة والانتقالات لتجربة مستخدم أكثر سلاسة
+- [ ] انشر تطبيق الصفحة الواحدة الخاص بك على منصة استضافة وقم بتكوين التوجيه بشكل صحيح
+
+### 🌟 **رحلة إتقان هيكلية الواجهة الأمامية الخاصة بك لمدة شهر**
+- [ ] قم ببناء تطبيقات صفحة واحدة معقدة باستخدام أطر عمل حديثة مثل React، Vue، أو Angular
+- [ ] تعلم أنماط إدارة الحالة المتقدمة والمكتبات
+- [ ] أتقن أدوات البناء وسير العمل التطويري لتطوير تطبيقات الصفحة الواحدة
+- [ ] نفذ ميزات تطبيقات الويب التقدمية والوظائف غير المتصلة بالإنترنت
+- [ ] ادرس تقنيات تحسين الأداء لتطبيقات الصفحة الواحدة واسعة النطاق
+- [ ] ساهم في مشاريع تطبيقات الصفحة الواحدة مفتوحة المصدر وشارك معرفتك
+
+## 🎯 جدول زمني لإتقان تطبيق الصفحة الواحدة الخاص بك
+
+```mermaid
+timeline
+    title SPA Development & Modern Web Architecture Learning Progression
+    
+    section Foundation (20 minutes)
+        Template Systems: HTML template elements
+                        : DOM manipulation
+                        : Content cloning
+                        : Dynamic rendering
+        
+    section Routing Basics (30 minutes)
+        Client-side Navigation: URL management
+                              : History API
+                              : Route mapping
+                              : Event handling
+        
+    section User Experience (40 minutes)
+        Navigation Polish: Browser integration
+                         : Back button support
+                         : Error handling
+                         : Smooth transitions
+        
+    section Architecture Patterns (50 minutes)
+        Professional SPAs: Component systems
+                         : State management
+                         : Performance optimization
+                         : Error boundaries
+        
+    section Advanced Techniques (1 week)
+        Framework Integration: React Router
+                             : Vue Router
+                             : Angular Router
+                             : State libraries
+        
+    section Production Skills (1 month)
+        Enterprise Development: Build systems
+                              : Testing strategies
+                              : Deployment pipelines
+                              : Performance monitoring
+```
+
+### 🛠️ ملخص أدوات تطوير تطبيق الصفحة الواحدة الخاص بك
+
+بعد إكمال هذا الدرس، أصبحت الآن متقنًا:
+- **هيكلية القوالب**: مكونات HTML قابلة لإعادة الاستخدام مع عرض محتوى ديناميكي
+- **التوجيه على جانب العميل**: إدارة عنوان URL والتنقل دون إعادة تحميل الصفحات
+- **تكامل المتصفح**: استخدام واجهة برمجة التطبيقات History ودعم أزرار الرجوع/التقدم
+- **أنظمة تعتمد على الأحداث**: معالجة التنقل وتفاعلات المستخدم
+- **التعامل مع DOM**: استنساخ القوالب، تبديل المحتوى، وإدارة العناصر
+- **معالجة الأخطاء**: حلول مرنة للمسارات غير الصالحة والمحتوى المفقود
+- **أنماط الأداء**: استراتيجيات تحميل المحتوى وعرضه بكفاءة
+
+**تطبيقات العالم الحقيقي**: مهارات تطوير تطبيق الصفحة الواحدة الخاصة بك تنطبق مباشرة على:
+- **تطبيقات الويب الحديثة**: تطوير باستخدام React، Vue، Angular، وغيرها من الأطر
+- **تطبيقات الويب التقدمية**: تطبيقات قادرة على العمل دون اتصال مع تجارب تشبه التطبيقات
+- **لوحات التحكم المؤسسية**: تطبيقات الأعمال المعقدة مع وجهات نظر متعددة
+- **منصات التجارة الإلكترونية**: كتالوجات المنتجات، عربات التسوق، وتدفقات الدفع
+- **إدارة المحتوى**: إنشاء وتحرير المحتوى الديناميكي
+- **تطوير المحمول**: تطبيقات هجينة باستخدام تقنيات الويب
+
+**المهارات المهنية المكتسبة**: يمكنك الآن:
+- **تصميم** تطبيقات صفحة واحدة مع فصل واضح للمكونات
+- **تنفيذ** أنظمة التوجيه على الجانب العميل التي تتناسب مع تعقيد التطبيق
+- **تصحيح الأخطاء** في تدفقات التنقل المعقدة باستخدام أدوات المطور في المتصفح
+- **تحسين** أداء التطبيق من خلال إدارة القوالب بكفاءة
+- **تصميم** تجارب مستخدم تبدو طبيعية وسريعة الاستجابة
+
+**مفاهيم تطوير الواجهة الأمامية المتقنة**:
+- **هندسة المكونات**: أنماط واجهة مستخدم قابلة لإعادة الاستخدام وأنظمة القوالب
+- **مزامنة الحالة**: إدارة حالة URL وسجل المتصفح
+- **البرمجة القائمة على الأحداث**: التعامل مع تفاعلات المستخدم والتنقل
+- **تحسين الأداء**: التلاعب الفعال بـ DOM وتحميل المحتوى
+- **تصميم تجربة المستخدم**: انتقالات سلسة وتنقل بديهي
+
+**المرحلة التالية**: أنت جاهز لاستكشاف أطر عمل الواجهة الأمامية الحديثة، إدارة الحالة المتقدمة، أو بناء تطبيقات مؤسسية معقدة!
+
+🌟 **إنجاز محقق**: لقد بنيت أساسًا احترافيًا لتطبيق صفحة واحدة باستخدام أنماط هندسة الويب الحديثة!
+
 ---
 
-## تحدي وكيل GitHub Copilot 🚀
+## تحدي GitHub Copilot Agent 🚀
 
 استخدم وضع الوكيل لإكمال التحدي التالي:
 
-**الوصف:** قم بتحسين تطبيق البنك عن طريق تنفيذ معالجة الأخطاء وقالب صفحة 404 للمسارات غير الصالحة، مما يحسن تجربة المستخدم عند التنقل إلى صفحات غير موجودة.
+**الوصف:** قم بتحسين تطبيق البنك من خلال تنفيذ معالجة الأخطاء وقالب صفحة 404 للمسارات غير الصالحة، مما يحسن تجربة المستخدم عند التنقل إلى صفحات غير موجودة.
 
-**المهمة:** قم بإنشاء قالب HTML جديد مع معرف "not-found" يعرض صفحة خطأ 404 سهلة الاستخدام مع تصميم. ثم قم بتعديل منطق التوجيه في JavaScript لعرض هذا القالب عندما يتنقل المستخدمون إلى عناوين URL غير صالحة، وأضف زر "العودة إلى الصفحة الرئيسية" الذي يعيد التوجيه إلى صفحة تسجيل الدخول.
+**المهمة:** قم بإنشاء قالب HTML جديد مع المعرف "not-found" يعرض صفحة خطأ 404 ودية مع تصميم. ثم قم بتعديل منطق التوجيه في JavaScript لعرض هذا القالب عندما يتنقل المستخدمون إلى عناوين URL غير صالحة، وأضف زر "العودة إلى الصفحة الرئيسية" الذي يعيد المستخدم إلى صفحة تسجيل الدخول.
 
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+تعرف أكثر على [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## 🚀 التحدي
 
-أضف قالبًا ومسارًا جديدًا لصفحة ثالثة تعرض الاعتمادات لهذا التطبيق.
+أضف قالبًا ومسارًا جديدًا لصفحة ثالثة تعرض معلومات عن فريق العمل الذي أنشأ هذا التطبيق.
 
-**أهداف التحدي:**
+**أهداف التحدي**:
 - **إنشاء** قالب HTML جديد مع هيكل محتوى مناسب
 - **إضافة** المسار الجديد إلى كائن تكوين المسارات الخاص بك
-- **تضمين** روابط التنقل إلى ومن صفحة الاعتمادات
+- **تضمين** روابط تنقل إلى ومن صفحة الاعتمادات
 - **اختبار** أن جميع التنقلات تعمل بشكل صحيح مع سجل المتصفح
 
 ## اختبار ما بعد المحاضرة
@@ -564,12 +821,12 @@ updateRoute();
 
 ## المراجعة والدراسة الذاتية
 
-التوجيه هو أحد الأجزاء التي تبدو معقدة في تطوير الويب، خاصة مع انتقال الويب من سلوكيات تحديث الصفحات إلى تحديثات تطبيقات الصفحة الواحدة. اقرأ قليلاً عن [كيفية تعامل خدمة Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) مع التوجيه. هل يمكنك شرح لماذا بعض القرارات الموضحة في تلك الوثيقة ضرورية؟
+التوجيه هو أحد الأجزاء التي قد تكون معقدة بشكل مفاجئ في تطوير الويب، خاصة مع انتقال الويب من سلوكيات تحديث الصفحة إلى تحديثات صفحة تطبيقات الصفحة الواحدة. اقرأ قليلاً عن [كيفية تعامل خدمة Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) مع التوجيه. هل يمكنك شرح سبب ضرورة بعض القرارات الموضحة في هذا المستند؟
 
-**موارد تعليمية إضافية:**
-- **استكشاف** كيفية تنفيذ التوجيه على جانب العميل في أطر عمل شهيرة مثل React Router وVue Router
-- **البحث** عن الفروقات بين التوجيه القائم على الهاش وتوجيه واجهة برمجة التطبيقات History API
-- **التعلم** عن التقديم على جانب الخادم (SSR) وكيف يؤثر على استراتيجيات التوجيه
+**موارد تعليمية إضافية**:
+- **استكشاف** كيفية تنفيذ أطر العمل الشهيرة مثل React Router و Vue Router للتوجيه على الجانب العميل
+- **البحث** في الفروقات بين التوجيه القائم على التجزئة وتوجيه واجهة برمجة التطبيقات التاريخية
+- **التعلم** عن العرض على الجانب الخادم (SSR) وكيف يؤثر على استراتيجيات التوجيه
 - **التحقيق** في كيفية تعامل تطبيقات الويب التقدمية (PWAs) مع التوجيه والتنقل
 
 ## الواجب
@@ -579,4 +836,4 @@ updateRoute();
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/7-bank-project/2-forms/README.md b/translations/ar/7-bank-project/2-forms/README.md
index 68407c29aa..f9d5bb24c2 100644
--- a/translations/ar/7-bank-project/2-forms/README.md
+++ b/translations/ar/7-bank-project/2-forms/README.md
@@ -1,29 +1,76 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b24f28fc46dd473aa9080f174182adde",
-  "translation_date": "2025-10-22T14:22:42+00:00",
+  "original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
+  "translation_date": "2025-11-03T12:41:08+00:00",
   "source_file": "7-bank-project/2-forms/README.md",
   "language_code": "ar"
 }
 -->
 # بناء تطبيق مصرفي الجزء الثاني: إنشاء نموذج تسجيل الدخول والتسجيل
 
+```mermaid
+journey
+    title Your Form Development Journey
+    section HTML Foundation
+      Understand form elements: 3: Student
+      Learn input types: 4: Student
+      Master accessibility: 4: Student
+    section JavaScript Integration
+      Handle form submission: 4: Student
+      Implement AJAX communication: 5: Student
+      Process server responses: 5: Student
+    section Validation Systems
+      Create multi-layer validation: 5: Student
+      Enhance user experience: 5: Student
+      Ensure data integrity: 5: Student
+```
+
 ## اختبار ما قبل المحاضرة
 
 [اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/43)
 
-هل سبق لك أن ملأت نموذجًا عبر الإنترنت وتم رفض تنسيق بريدك الإلكتروني؟ أو فقدت جميع معلوماتك عند النقر على زر الإرسال؟ لقد واجهنا جميعًا هذه التجارب المحبطة.
+هل سبق لك أن ملأت نموذجًا عبر الإنترنت وتم رفض تنسيق بريدك الإلكتروني؟ أو فقدت كل معلوماتك عند النقر على زر الإرسال؟ لقد واجهنا جميعًا هذه التجارب المحبطة.
+
+النماذج هي الجسر بين المستخدمين ووظائف تطبيقك. مثل البروتوكولات الدقيقة التي يستخدمها مراقبو الحركة الجوية لتوجيه الطائرات بأمان إلى وجهاتها، توفر النماذج المصممة جيدًا ردود فعل واضحة وتمنع الأخطاء المكلفة. أما النماذج السيئة، من ناحية أخرى، يمكن أن تبعد المستخدمين بسرعة أكبر من سوء التواصل في مطار مزدحم.
 
-النماذج هي الجسر بين المستخدمين ووظائف تطبيقك. مثل البروتوكولات الدقيقة التي يستخدمها مراقبو الحركة الجوية لتوجيه الطائرات بأمان إلى وجهاتها، توفر النماذج المصممة جيدًا ردود فعل واضحة وتمنع الأخطاء المكلفة. أما النماذج السيئة، فقد تدفع المستخدمين بعيدًا بسرعة أكبر من سوء التواصل في مطار مزدحم.
+في هذه الدرس، سنحول تطبيقك المصرفي الثابت إلى تطبيق تفاعلي. ستتعلم كيفية إنشاء نماذج تتحقق من صحة إدخال المستخدم، تتواصل مع الخوادم، وتوفر ردود فعل مفيدة. فكر في الأمر كإنشاء واجهة التحكم التي تتيح للمستخدمين التنقل في ميزات تطبيقك.
 
-في هذه الدرس، سنحول تطبيقك المصرفي الثابت إلى تطبيق تفاعلي. ستتعلم كيفية إنشاء نماذج تتحقق من صحة إدخال المستخدم، وتتواصل مع الخوادم، وتوفر ردود فعل مفيدة. فكر في الأمر كإنشاء واجهة التحكم التي تتيح للمستخدمين التنقل في ميزات تطبيقك.
+بحلول النهاية، سيكون لديك نظام تسجيل دخول وتسجيل كامل مع التحقق الذي يوجه المستخدمين نحو النجاح بدلاً من الإحباط.
 
-في النهاية، سيكون لديك نظام تسجيل دخول وتسجيل كامل مع التحقق من الصحة الذي يوجه المستخدمين نحو النجاح بدلاً من الإحباط.
+```mermaid
+mindmap
+  root((Form Development))
+    HTML Foundation
+      Semantic Elements
+      Input Types
+      Accessibility
+      Label Association
+    User Experience
+      Validation Feedback
+      Error Prevention
+      Loading States
+      Success Messaging
+    JavaScript Integration
+      Event Handling
+      AJAX Communication
+      Data Processing
+      Error Management
+    Validation Layers
+      HTML5 Validation
+      Client-side Logic
+      Server-side Security
+      Progressive Enhancement
+    Modern Patterns
+      Fetch API
+      Async/Await
+      Form Data API
+      Promise Handling
+```
 
 ## المتطلبات الأساسية
 
-قبل أن نبدأ في إنشاء النماذج، دعنا نتأكد من أن كل شيء معد بشكل صحيح. يبدأ هذا الدرس من حيث انتهينا في الدرس السابق، لذا إذا تخطيت، قد ترغب في العودة أولاً للحصول على الأساسيات.
+قبل أن نبدأ في إنشاء النماذج، دعنا نتأكد من أن كل شيء معد بشكل صحيح. هذا الدرس يستكمل ما بدأناه في الدرس السابق، لذا إذا قفزت إلى الأمام، قد ترغب في العودة والتأكد من أن الأساسيات تعمل أولاً.
 
 ### الإعداد المطلوب
 
@@ -40,9 +87,9 @@ CO_OP_TRANSLATOR_METADATA:
 **بيئة التطوير الخاصة بك ستشمل:**
 - **خادم الواجهة الأمامية**: يقدم تطبيقك المصرفي (عادةً على المنفذ `3000`)
 - **خادم API الخلفي**: يتعامل مع تخزين البيانات واسترجاعها (المنفذ `5000`)
-- **كلا الخادمين** يمكن تشغيلهما في نفس الوقت دون تعارضات
+- **كلا الخادمين** يمكن تشغيلهما في نفس الوقت دون تعارض
 
-**اختبار اتصالك بـ API:**
+**اختبار اتصال API الخاص بك:**
 ```bash
 curl http://localhost:5000/api
 # Expected response: "Bank API v1.0.0"
@@ -56,7 +103,7 @@ curl http://localhost:5000/api
 
 نماذج HTML هي الطريقة التي يتواصل بها المستخدمون مع تطبيق الويب الخاص بك. فكر فيها كنظام التلغراف الذي ربط الأماكن البعيدة في القرن التاسع عشر – إنها بروتوكول الاتصال بين نية المستخدم واستجابة التطبيق. عندما يتم تصميمها بعناية، فإنها تلتقط الأخطاء، توجه تنسيق الإدخال، وتوفر اقتراحات مفيدة.
 
-النماذج الحديثة أكثر تطورًا بكثير من إدخالات النص الأساسية. قدم HTML5 أنواع إدخال متخصصة تتعامل تلقائيًا مع التحقق من البريد الإلكتروني، تنسيق الأرقام، واختيار التواريخ. هذه التحسينات تفيد كل من إمكانية الوصول وتجربة المستخدمين على الأجهزة المحمولة.
+النماذج الحديثة أكثر تطورًا بكثير من إدخالات النص الأساسية. قدم HTML5 أنواع إدخال متخصصة تتعامل مع التحقق من البريد الإلكتروني، تنسيق الأرقام، واختيار التواريخ تلقائيًا. هذه التحسينات تفيد كل من إمكانية الوصول وتجارب المستخدمين على الأجهزة المحمولة.
 
 ### عناصر النموذج الأساسية
 
@@ -76,7 +123,7 @@ curl http://localhost:5000/api
 - **ينشئ** حاوية نموذج بمعرف فريد
 - **يحدد** طريقة HTTP لإرسال البيانات
 - **يربط** التسميات بالإدخالات لتحسين إمكانية الوصول
-- **يعرف** زر إرسال لمعالجة النموذج
+- **يحدد** زر إرسال لمعالجة النموذج
 
 ### أنواع الإدخال الحديثة والسمات
 
@@ -104,11 +151,11 @@ curl http://localhost:5000/api
 - **أزرار إعادة التعيين**: تعيد جميع حقول النموذج إلى حالتها الأولية
 - **الأزرار العادية**: لا توفر سلوكًا افتراضيًا، وتتطلب JavaScript مخصصًا للوظائف
 
-> ⚠️ **ملاحظة مهمة**: عنصر `<input>` يغلق نفسه ولا يتطلب علامة إغلاق. الممارسة الحديثة هي كتابة `<input>` بدون الشريط.
+> ⚠️ **ملاحظة مهمة**: عنصر `<input>` يغلق نفسه ولا يتطلب علامة إغلاق. الممارسة الحديثة الأفضل هي كتابة `<input>` بدون الشريط.
 
-### إنشاء نموذج تسجيل الدخول
+### إنشاء نموذج تسجيل الدخول الخاص بك
 
-الآن دعونا ننشئ نموذج تسجيل دخول عمليًا يوضح ممارسات نماذج HTML الحديثة. سنبدأ بهيكل أساسي ونقوم بتحسينه تدريجيًا بميزات إمكانية الوصول والتحقق من الصحة.
+الآن دعونا ننشئ نموذج تسجيل دخول عملي يوضح ممارسات نماذج HTML الحديثة. سنبدأ بهيكل أساسي ونقوم بتحسينه تدريجيًا بميزات إمكانية الوصول والتحقق.
 
 ```html
 <template id="login">
@@ -128,11 +175,11 @@ curl http://localhost:5000/api
 ```
 
 **تفصيل ما يحدث هنا:**
-- **يهيكل** النموذج باستخدام عناصر HTML5 دلالية
-- **يجمع** العناصر ذات الصلة باستخدام حاويات `div` ذات فئات ذات معنى
-- **يربط** التسميات بالإدخالات باستخدام سمات `for` و`id`
-- **يتضمن** سمات حديثة مثل `autocomplete` و`placeholder` لتحسين تجربة المستخدم
-- **يضيف** `novalidate` للتعامل مع التحقق من الصحة باستخدام JavaScript بدلاً من الإعدادات الافتراضية للمتصفح
+- **يهيكل** النموذج بعناصر HTML5 دلالية
+- **يجمع** العناصر ذات الصلة باستخدام حاويات `div` مع فئات ذات معنى
+- **يربط** التسميات بالإدخالات باستخدام سمات `for` و `id`
+- **يتضمن** سمات حديثة مثل `autocomplete` و `placeholder` لتحسين تجربة المستخدم
+- **يضيف** `novalidate` للتعامل مع التحقق باستخدام JavaScript بدلاً من الإعدادات الافتراضية للمتصفح
 
 ### قوة التسميات المناسبة
 
@@ -153,16 +200,16 @@ graph TD
 
 **ما تحققه التسميات المناسبة:**
 - **تمكن** قارئات الشاشة من الإعلان عن حقول النموذج بوضوح
-- **توسع** المنطقة القابلة للنقر (النقر على التسمية يركز على الإدخال)
+- **توسع** منطقة النقر (النقر على التسمية يركز على الإدخال)
 - **تحسن** قابلية الاستخدام على الأجهزة المحمولة مع أهداف لمس أكبر
-- **تدعم** التحقق من صحة النموذج برسائل خطأ ذات معنى
+- **تدعم** التحقق من النموذج برسائل خطأ ذات معنى
 - **تعزز** تحسين محركات البحث من خلال توفير معنى دلالي لعناصر النموذج
 
-> 🎯 **هدف إمكانية الوصول**: يجب أن يكون لكل إدخال نموذج تسمية مرتبطة. هذه الممارسة البسيطة تجعل نماذجك قابلة للاستخدام للجميع، بما في ذلك المستخدمين ذوي الإعاقة، وتحسن التجربة لجميع المستخدمين.
+> 🎯 **هدف إمكانية الوصول**: يجب أن يكون لكل إدخال نموذج تسمية مرتبطة. هذه الممارسة البسيطة تجعل نماذجك قابلة للاستخدام من قبل الجميع، بما في ذلك المستخدمين ذوي الإعاقة، وتحسن التجربة لجميع المستخدمين.
 
 ### إنشاء نموذج التسجيل
 
-يتطلب نموذج التسجيل معلومات أكثر تفصيلًا لإنشاء حساب مستخدم كامل. دعونا نبنيه باستخدام ميزات HTML5 الحديثة وإمكانية الوصول المحسنة.
+يتطلب نموذج التسجيل معلومات أكثر تفصيلًا لإنشاء حساب مستخدم كامل. دعونا نبنيه بميزات HTML5 الحديثة وإمكانية وصول محسنة.
 
 ```html
 <hr/>
@@ -196,30 +243,46 @@ graph TD
 </form>
 ```
 
-**في ما سبق، قمنا بـ:**
-- **تنظيم** كل حقل في حاويات div لتحسين التصميم والتخطيط
+**في الأعلى، قمنا بـ:**
+- **تنظيم** كل حقل في حاويات div لتحسين التصميم والتنسيق
 - **إضافة** سمات `autocomplete` المناسبة لدعم الملء التلقائي للمتصفح
-- **تضمين** نصوص إرشادية مفيدة لتوجيه إدخال المستخدم
+- **تضمين** نص توضيحي مفيد لتوجيه إدخال المستخدم
 - **تعيين** قيم افتراضية منطقية باستخدام سمة `value`
-- **تطبيق** سمات التحقق مثل `required`، `maxlength`، و`min`
+- **تطبيق** سمات التحقق مثل `required`، `maxlength`، و `min`
 - **استخدام** `type="number"` لحقل الرصيد مع دعم الأرقام العشرية
 
-### استكشاف أنواع الإدخال وسلوكها
+### استكشاف أنواع الإدخال والسلوك
 
 **توفر أنواع الإدخال الحديثة وظائف محسنة:**
 
 | الميزة | الفائدة | المثال |
 |--------|---------|--------|
 | `type="number"` | لوحة مفاتيح رقمية على الأجهزة المحمولة | إدخال الرصيد بسهولة |
-| `step="0.01"` | التحكم في الدقة العشرية | يسمح بالسنتات في العملة |
+| `step="0.01"` | التحكم في دقة الأرقام العشرية | يسمح بالكسور في العملات |
 | `autocomplete` | الملء التلقائي للمتصفح | إكمال النموذج بسرعة |
 | `placeholder` | تلميحات سياقية | توجه توقعات المستخدم |
 
-> 🎯 **تحدي إمكانية الوصول**: حاول التنقل في النماذج باستخدام لوحة المفاتيح فقط! استخدم `Tab` للانتقال بين الحقول، و`Space` لتحديد المربعات، و`Enter` للإرسال. هذه التجربة تساعدك على فهم كيفية تفاعل مستخدمي قارئات الشاشة مع نماذجك.
+> 🎯 **تحدي إمكانية الوصول**: حاول التنقل في النماذج باستخدام لوحة المفاتيح فقط! استخدم `Tab` للتنقل بين الحقول، `Space` لتحديد الخيارات، و`Enter` للإرسال. هذه التجربة تساعدك على فهم كيفية تفاعل مستخدمي قارئات الشاشة مع نماذجك.
+
+### 🔄 **مراجعة تربوية**
+**فهم أساسيات النموذج**: قبل تنفيذ JavaScript، تأكد من فهمك:
+- ✅ كيف ينشئ HTML الدلالي هياكل نماذج قابلة للوصول
+- ✅ لماذا أنواع الإدخال مهمة للوحات المفاتيح المحمولة والتحقق
+- ✅ العلاقة بين التسميات وعناصر التحكم في النموذج
+- ✅ كيف تؤثر سمات النموذج على سلوك المتصفح الافتراضي
+
+**اختبار سريع ذاتي**: ماذا يحدث إذا أرسلت نموذجًا دون معالجة JavaScript؟
+*الإجابة: يقوم المتصفح بالإرسال الافتراضي، عادةً بإعادة التوجيه إلى عنوان URL الخاص بالإجراء*
+
+**فوائد نماذج HTML5**: توفر النماذج الحديثة:
+- **التحقق المدمج**: التحقق التلقائي من البريد الإلكتروني وتنسيق الأرقام
+- **تحسين الأجهزة المحمولة**: لوحات مفاتيح مناسبة لأنواع الإدخال المختلفة
+- **إمكانية الوصول**: دعم قارئات الشاشة والتنقل باستخدام لوحة المفاتيح
+- **تحسين تدريجي**: تعمل حتى عند تعطيل JavaScript
 
 ## فهم طرق إرسال النموذج
 
-عندما يملأ شخص ما النموذج وينقر على زر الإرسال، يجب أن تذهب تلك البيانات إلى مكان ما – عادةً إلى خادم يمكنه حفظها. هناك عدة طرق يمكن أن يحدث بها ذلك، ومعرفة الطريقة المناسبة يمكن أن توفر عليك بعض الصداع لاحقًا.
+عندما يملأ شخص ما النموذج الخاص بك وينقر على إرسال، يجب أن تذهب تلك البيانات إلى مكان ما – عادةً إلى خادم يمكنه حفظها. هناك عدة طرق يمكن أن يحدث بها ذلك، ومعرفة الطريقة المناسبة يمكن أن يوفر عليك بعض المتاعب لاحقًا.
 
 دعونا نلقي نظرة على ما يحدث فعليًا عندما ينقر شخص ما على زر الإرسال.
 
@@ -227,12 +290,12 @@ graph TD
 
 أولاً، دعونا نلاحظ ما يحدث مع إرسال النموذج الأساسي:
 
-**اختبر النماذج الحالية:**
+**اختبر النماذج الحالية الخاصة بك:**
 1. انقر على زر *التسجيل* في النموذج الخاص بك
 2. لاحظ التغييرات في شريط عنوان المتصفح الخاص بك
 3. لاحظ كيف يتم إعادة تحميل الصفحة وتظهر البيانات في عنوان URL
 
-![لقطة شاشة لتغيير عنوان URL المتصفح بعد النقر على زر التسجيل](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ar.png)
+![لقطة شاشة لتغيير عنوان URL للمتصفح بعد النقر على زر التسجيل](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ar.png)
 
 ### مقارنة طرق HTTP
 
@@ -264,7 +327,7 @@ graph TD
 - **قيود GET**: قيود الحجم، البيانات المرئية، تاريخ المتصفح المستمر
 - **مزايا POST**: سعة بيانات كبيرة، حماية الخصوصية، دعم تحميل الملفات
 
-> 💡 **أفضل ممارسة**: استخدم `GET` لنماذج البحث والفلاتر (استرجاع البيانات)، واستخدم `POST` لتسجيل المستخدمين، تسجيل الدخول، وإنشاء البيانات.
+> 💡 **أفضل ممارسة**: استخدم `GET` للنماذج البحثية والفلاتر (استرجاع البيانات)، واستخدم `POST` لتسجيل المستخدمين، تسجيل الدخول، وإنشاء البيانات.
 
 ### إعداد إرسال النموذج
 
@@ -277,7 +340,7 @@ graph TD
 
 **ما يفعله هذا الإعداد:**
 - **يوجه** إرسال النموذج إلى نقطة نهاية API الخاصة بك
-- **يستخدم** طريقة POST لنقل البيانات بأمان
+- **يستخدم** طريقة POST لنقل البيانات بشكل آمن
 - **يتضمن** `novalidate` للتعامل مع التحقق باستخدام JavaScript
 
 ### اختبار إرسال النموذج
@@ -294,7 +357,7 @@ graph TD
 - **استجابة JSON** تحتوي على بيانات حسابك الجديد
 - **تأكيد الخادم** أن الحساب تم إنشاؤه بنجاح
 
-> 🧪 **وقت التجربة**: حاول التسجيل مرة أخرى بنفس اسم المستخدم. ما الاستجابة التي تحصل عليها؟ يساعدك هذا على فهم كيفية تعامل الخادم مع البيانات المكررة وظروف الخطأ.
+> 🧪 **وقت التجربة**: حاول التسجيل مرة أخرى بنفس اسم المستخدم. ما الاستجابة التي تحصل عليها؟ هذا يساعدك على فهم كيفية تعامل الخادم مع البيانات المكررة وظروف الخطأ.
 
 ### فهم استجابات JSON
 
@@ -311,15 +374,15 @@ graph TD
 
 **تؤكد هذه الاستجابة:**
 - **إنشاء** حساب جديد بالبيانات التي حددتها
-- **تعيين** معرف فريد للإشارة المستقبلية
+- **تعيين** معرف فريد للرجوع إليه في المستقبل
 - **إرجاع** جميع معلومات الحساب للتحقق
 - **الإشارة** إلى تخزين قاعدة البيانات بنجاح
 
 ## التعامل الحديث مع النماذج باستخدام JavaScript
 
-تسبب عمليات إرسال النموذج التقليدية إعادة تحميل الصفحة بالكامل، مثلما كانت المهمات الفضائية المبكرة تتطلب إعادة ضبط النظام بالكامل لتصحيح المسار. هذا النهج يعطل تجربة المستخدم ويفقد حالة التطبيق.
+تسبب عمليات إرسال النموذج التقليدية إعادة تحميل الصفحة بالكامل، مثلما كانت مهمات الفضاء المبكرة تتطلب إعادة ضبط النظام بالكامل لتصحيح المسار. هذا النهج يعطل تجربة المستخدم ويفقد حالة التطبيق.
 
-يعمل التعامل مع النماذج باستخدام JavaScript مثل أنظمة التوجيه المستمرة المستخدمة في المركبات الفضائية الحديثة – إجراء تعديلات في الوقت الفعلي دون فقدان سياق التنقل. يمكننا اعتراض عمليات إرسال النموذج، تقديم ردود فعل فورية، التعامل مع الأخطاء برشاقة، وتحديث الواجهة بناءً على استجابات الخادم مع الحفاظ على موقع المستخدم في التطبيق.
+يعمل التعامل مع النماذج باستخدام JavaScript مثل أنظمة التوجيه المستمرة المستخدمة بواسطة المركبات الفضائية الحديثة – إجراء تعديلات في الوقت الفعلي دون فقدان سياق التنقل. يمكننا اعتراض عمليات إرسال النموذج، تقديم ردود فعل فورية، التعامل مع الأخطاء بسلاسة، وتحديث الواجهة بناءً على استجابات الخادم مع الحفاظ على موقع المستخدم في التطبيق.
 
 ### لماذا نتجنب إعادة تحميل الصفحة؟
 
@@ -401,7 +464,6 @@ document.addEventListener('DOMContentLoaded', () => {
 ### فهم واجهة برمجة التطبيقات FormData
 
 **توفر واجهة برمجة التطبيقات FormData معالجة قوية للنماذج:**
-
 ```javascript
 // Example of what FormData captures
 const formData = new FormData(registerForm);
@@ -416,14 +478,14 @@ const formData = new FormData(registerForm);
 ```
 
 **مزايا واجهة برمجة التطبيقات FormData:**
-- **جمع شامل**: يلتقط جميع عناصر النموذج بما في ذلك النصوص، الملفات، والإدخالات المعقدة
-- **وعي النوع**: يتعامل تلقائيًا مع أنواع الإدخال المختلفة دون الحاجة إلى ترميز مخصص
-- **كفاءة**: يلغي جمع الحقول يدويًا باستخدام استدعاء واجهة برمجة التطبيقات الواحد
-- **قابلية التكيف**: يحافظ على الوظائف مع تطور هيكل النموذج
+- **جمع شامل**: يلتقط جميع عناصر النموذج بما في ذلك النصوص، الملفات، والمدخلات المعقدة
+- **وعي بالنوع**: يتعامل تلقائيًا مع أنواع المدخلات المختلفة دون الحاجة إلى كتابة كود مخصص
+- **الكفاءة**: يلغي الحاجة لجمع الحقول يدويًا من خلال استدعاء واحد لواجهة برمجة التطبيقات
+- **التكيف**: يحافظ على الوظائف مع تطور هيكل النموذج
 
-### إنشاء وظيفة التواصل مع الخادم
+### إنشاء وظيفة الاتصال بالخادم
 
-الآن دعونا نبني وظيفة قوية للتواصل مع خادم API الخاص بك باستخدام أنماط JavaScript الحديثة:
+الآن دعونا نبني وظيفة قوية للتواصل مع خادم واجهة برمجة التطبيقات باستخدام أنماط JavaScript الحديثة:
 
 ```javascript
 async function createAccount(account) {
@@ -467,34 +529,34 @@ sequenceDiagram
 
 **ما يحققه هذا التنفيذ الحديث:**
 - **يستخدم** `async/await` لكتابة كود غير متزامن قابل للقراءة
-- **يتضمن** معالجة الأخطاء المناسبة باستخدام كتل try/catch
+- **يتضمن** معالجة الأخطاء بشكل صحيح باستخدام كتل try/catch
 - **يتحقق** من حالة الاستجابة قبل معالجة البيانات
-- **يحدد** رؤوس مناسبة للتواصل باستخدام JSON
-- **يوفر** رسائل خطأ مفصلة لتسهيل تصحيح الأخطاء  
-- **يعيد** هيكل بيانات متسق لحالات النجاح والخطأ  
+- **يحدد** رؤوس مناسبة للتواصل عبر JSON
+- **يوفر** رسائل خطأ مفصلة لتسهيل التصحيح
+- **يعيد** هيكل بيانات متسق لحالات النجاح والخطأ
 
-### قوة واجهة Fetch API الحديثة  
+### قوة واجهة برمجة التطبيقات Fetch الحديثة
 
-**مزايا Fetch API مقارنة بالطرق القديمة:**  
+**مزايا Fetch API مقارنة بالطرق القديمة:**
 
-| الميزة | الفائدة | التنفيذ |  
-|--------|---------|---------|  
-| يعتمد على الوعد | كود غير متزامن نظيف | `await fetch()` |  
-| تخصيص الطلب | تحكم كامل في HTTP | الرؤوس، الطرق، الجسم |  
-| معالجة الاستجابة | تحليل بيانات مرن | `.json()`, `.text()`, `.blob()` |  
-| معالجة الأخطاء | التقاط شامل للأخطاء | كتل Try/catch |  
+| الميزة | الفائدة | التنفيذ |
+|--------|---------|---------|
+| قائم على الوعد | كود غير متزامن نظيف | `await fetch()` |
+| تخصيص الطلب | تحكم كامل في HTTP | الرؤوس، الطرق، الجسم |
+| معالجة الاستجابة | تحليل بيانات مرن | `.json()`, `.text()`, `.blob()` |
+| معالجة الأخطاء | التقاط شامل للأخطاء | كتل try/catch |
 
-> 🎥 **تعلم المزيد**: [دليل Async/Await](https://youtube.com/watch?v=YwmlRkrxvkk) - فهم أنماط JavaScript غير المتزامنة لتطوير الويب الحديث.  
+> 🎥 **تعلم المزيد**: [دليل Async/Await](https://youtube.com/watch?v=YwmlRkrxvkk) - فهم أنماط JavaScript غير المتزامنة لتطوير الويب الحديث.
 
-**مفاهيم رئيسية للتواصل مع الخادم:**  
-- **الدوال غير المتزامنة** تسمح بإيقاف التنفيذ لانتظار استجابات الخادم  
-- **الكلمة المفتاحية Await** تجعل الكود غير المتزامن يبدو كأنه متزامن  
-- **Fetch API** توفر طلبات HTTP حديثة تعتمد على الوعد  
-- **معالجة الأخطاء** تضمن استجابة التطبيق بشكل سلس لمشاكل الشبكة  
+**المفاهيم الأساسية للتواصل مع الخادم:**
+- **الوظائف غير المتزامنة** تسمح بإيقاف التنفيذ لانتظار استجابات الخادم
+- **الكلمة المفتاحية Await** تجعل الكود غير المتزامن يبدو كأنه متزامن
+- **Fetch API** يوفر طلبات HTTP حديثة قائمة على الوعد
+- **معالجة الأخطاء** تضمن استجابة التطبيق بشكل جيد لمشاكل الشبكة
 
-### إكمال وظيفة التسجيل  
+### إكمال وظيفة التسجيل
 
-لنقم بتجميع كل شيء معًا لإنشاء وظيفة تسجيل جاهزة للإنتاج:  
+دعونا نجمع كل شيء معًا لإنشاء وظيفة تسجيل كاملة وجاهزة للإنتاج:
 
 ```javascript
 async function register() {
@@ -535,41 +597,61 @@ async function register() {
   }
 }
 ```
-  
-**هذا التنفيذ المحسن يشمل:**  
-- **يوفر** ردود فعل مرئية أثناء إرسال النموذج  
-- **يعطل** زر الإرسال لمنع الإرسال المكرر  
-- **يتعامل** مع الأخطاء المتوقعة وغير المتوقعة بسلاسة  
-- **يعرض** رسائل نجاح وخطأ سهلة الاستخدام  
-- **يعيد ضبط** النموذج بعد التسجيل الناجح  
-- **يستعيد** حالة واجهة المستخدم بغض النظر عن النتيجة  
 
-### اختبار التنفيذ الخاص بك  
+**يتضمن هذا التنفيذ المحسن:**
+- **يوفر** ملاحظات مرئية أثناء إرسال النموذج
+- **يعطل** زر الإرسال لمنع الإرسال المكرر
+- **يتعامل** مع الأخطاء المتوقعة وغير المتوقعة بشكل جيد
+- **يعرض** رسائل نجاح وخطأ سهلة الاستخدام
+- **يعيد ضبط** النموذج بعد التسجيل الناجح
+- **يعيد** حالة واجهة المستخدم بغض النظر عن النتيجة
+
+### اختبار التنفيذ الخاص بك
+
+**افتح أدوات المطور في المتصفح واختبر التسجيل:**
+
+1. **افتح** وحدة التحكم في المتصفح (F12 → علامة تبويب Console)
+2. **املأ** نموذج التسجيل
+3. **انقر** على "إنشاء حساب"
+4. **لاحظ** رسائل وحدة التحكم وملاحظات المستخدم
+
+![لقطة شاشة تظهر رسالة السجل في وحدة التحكم بالمتصفح](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ar.png)
 
-**افتح أدوات المطور في المتصفح واختبر التسجيل:**  
+**ما يجب أن تراه:**
+- **حالة التحميل** تظهر على زر الإرسال
+- **سجلات وحدة التحكم** تعرض معلومات مفصلة عن العملية
+- **رسالة النجاح** تظهر عند نجاح إنشاء الحساب
+- **النموذج يعيد ضبط نفسه** تلقائيًا بعد الإرسال الناجح
 
-1. **افتح** وحدة التحكم في المتصفح (F12 → علامة تبويب Console)  
-2. **املأ** نموذج التسجيل  
-3. **اضغط** على "إنشاء حساب"  
-4. **لاحظ** رسائل وحدة التحكم وردود فعل المستخدم  
+> 🔒 **اعتبارات الأمان**: حاليًا، البيانات تنتقل عبر HTTP، وهو غير آمن للإنتاج. في التطبيقات الحقيقية، استخدم دائمًا HTTPS لتشفير نقل البيانات. تعرف على المزيد حول [أمان HTTPS](https://en.wikipedia.org/wiki/HTTPS) ولماذا هو ضروري لحماية بيانات المستخدم.
 
-![لقطة شاشة تظهر رسالة السجل في وحدة التحكم بالمتصفح](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ar.png)  
+### 🔄 **مراجعة تعليمية**
+**دمج JavaScript الحديث**: تحقق من فهمك لمعالجة النماذج غير المتزامنة:
+- ✅ كيف يغير `event.preventDefault()` سلوك النموذج الافتراضي؟
+- ✅ لماذا تعتبر واجهة برمجة التطبيقات FormData أكثر كفاءة من جمع الحقول يدويًا؟
+- ✅ كيف تحسن أنماط async/await قابلية قراءة الكود؟
+- ✅ ما هو دور معالجة الأخطاء في تجربة المستخدم؟
 
-**ما يجب أن تراه:**  
-- **حالة التحميل** تظهر على زر الإرسال  
-- **سجلات وحدة التحكم** تعرض معلومات تفصيلية عن العملية  
-- **رسالة نجاح** تظهر عند نجاح إنشاء الحساب  
-- **النموذج يعيد ضبط نفسه** تلقائيًا بعد الإرسال الناجح  
+**هيكل النظام**: معالجة النموذج الخاص بك تظهر:
+- **برمجة مدفوعة بالأحداث**: النماذج تستجيب لإجراءات المستخدم دون إعادة تحميل الصفحة
+- **تواصل غير متزامن**: طلبات الخادم لا تعيق واجهة المستخدم
+- **معالجة الأخطاء**: تدهور سلس عند فشل طلبات الشبكة
+- **إدارة الحالة**: تحديثات واجهة المستخدم تعكس استجابات الخادم بشكل مناسب
+- **تحسين تدريجي**: الوظائف الأساسية تعمل، JavaScript يعززها
 
-> 🔒 **اعتبارات الأمان**: حاليًا، البيانات تنتقل عبر HTTP، وهو غير آمن للإنتاج. في التطبيقات الحقيقية، استخدم دائمًا HTTPS لتشفير نقل البيانات. تعرف على المزيد حول [أمان HTTPS](https://en.wikipedia.org/wiki/HTTPS) ولماذا هو ضروري لحماية بيانات المستخدم.  
+**أنماط احترافية**: لقد نفذت:
+- **مسؤولية واحدة**: الوظائف لها أغراض واضحة ومركزة
+- **حدود الأخطاء**: كتل try/catch تمنع تعطل التطبيق
+- **ملاحظات المستخدم**: حالات التحميل ورسائل النجاح/الخطأ
+- **تحويل البيانات**: FormData إلى JSON للتواصل مع الخادم
 
-## التحقق الشامل للنماذج  
+## التحقق الشامل من النموذج
 
-التحقق من النموذج يمنع تجربة محبطة لاكتشاف الأخطاء بعد الإرسال فقط. مثل الأنظمة المتعددة الزائدة على محطة الفضاء الدولية، يستخدم التحقق الفعال طبقات متعددة من الفحوصات الأمنية.  
+التحقق من النموذج يمنع تجربة الإحباط الناتجة عن اكتشاف الأخطاء فقط بعد الإرسال. مثل الأنظمة المتعددة الزائدة على محطة الفضاء الدولية، يستخدم التحقق الفعال طبقات متعددة من الفحوصات الأمنية.
 
-النهج الأمثل يجمع بين التحقق على مستوى المتصفح للحصول على ردود فعل فورية، والتحقق باستخدام JavaScript لتحسين تجربة المستخدم، والتحقق على مستوى الخادم لضمان الأمان وسلامة البيانات. هذه الطبقات الزائدة تضمن رضا المستخدم وحماية النظام.  
+النهج الأمثل يجمع بين التحقق على مستوى المتصفح للحصول على ملاحظات فورية، والتحقق باستخدام JavaScript لتحسين تجربة المستخدم، والتحقق على مستوى الخادم لضمان الأمان وسلامة البيانات. هذه الطبقات الزائدة تضمن رضا المستخدم وحماية النظام.
 
-### فهم طبقات التحقق  
+### فهم طبقات التحقق
 
 ```mermaid
 graph TD
@@ -583,28 +665,28 @@ graph TD
     C -->|Invalid| H[Custom Error Display]
     E -->|Invalid| I[Server Error Response]
 ```
-  
-**استراتيجية التحقق متعددة الطبقات:**  
-- **التحقق باستخدام HTML5**: فحوصات فورية تعتمد على المتصفح  
-- **التحقق باستخدام JavaScript**: منطق مخصص وتجربة مستخدم محسنة  
-- **التحقق على مستوى الخادم**: فحوصات نهائية للأمان وسلامة البيانات  
-- **التعزيز التدريجي**: يعمل حتى إذا تم تعطيل JavaScript  
 
-### خصائص التحقق باستخدام HTML5  
+**استراتيجية التحقق متعددة الطبقات:**
+- **التحقق باستخدام HTML5**: فحوصات فورية تعتمد على المتصفح
+- **التحقق باستخدام JavaScript**: منطق مخصص وتجربة مستخدم محسنة
+- **التحقق على مستوى الخادم**: فحوصات نهائية للأمان وسلامة البيانات
+- **تحسين تدريجي**: يعمل حتى إذا تم تعطيل JavaScript
 
-**أدوات التحقق الحديثة المتاحة لديك:**  
+### خصائص التحقق باستخدام HTML5
 
-| الخاصية | الغرض | مثال الاستخدام | سلوك المتصفح |  
-|---------|-------|----------------|--------------|  
-| `required` | الحقول الإلزامية | `<input required>` | يمنع الإرسال الفارغ |  
-| `minlength`/`maxlength` | حدود طول النص | `<input maxlength="20">` | يفرض حدود الأحرف |  
-| `min`/`max` | نطاقات رقمية | `<input min="0" max="1000">` | يتحقق من حدود الأرقام |  
-| `pattern` | قواعد regex مخصصة | `<input pattern="[A-Za-z]+">` | يطابق تنسيقات محددة |  
-| `type` | التحقق من نوع البيانات | `<input type="email">` | تحقق خاص بالتنسيق |  
+**أدوات التحقق الحديثة المتاحة لديك:**
 
-### تنسيق التحقق باستخدام CSS  
+| الخاصية | الغرض | مثال الاستخدام | سلوك المتصفح |
+|---------|-------|----------------|--------------|
+| `required` | الحقول الإلزامية | `<input required>` | يمنع الإرسال الفارغ |
+| `minlength`/`maxlength` | حدود طول النص | `<input maxlength="20">` | يفرض حدود الأحرف |
+| `min`/`max` | نطاقات رقمية | `<input min="0" max="1000">` | يتحقق من حدود الأرقام |
+| `pattern` | قواعد regex مخصصة | `<input pattern="[A-Za-z]+">` | يطابق تنسيقات محددة |
+| `type` | التحقق من نوع البيانات | `<input type="email">` | تحقق خاص بالتنسيق |
 
-**إنشاء ردود فعل مرئية لحالات التحقق:**  
+### تنسيق التحقق باستخدام CSS
+
+**إنشاء ملاحظات مرئية لحالات التحقق:**
 
 ```css
 /* Valid input styling */
@@ -628,18 +710,18 @@ input:focus:invalid {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
 ```
-  
-**ما تحققه هذه الإشارات البصرية:**  
-- **حدود خضراء**: تشير إلى نجاح التحقق، مثل الأضواء الخضراء في مركز التحكم  
-- **حدود حمراء**: تشير إلى أخطاء التحقق التي تحتاج إلى انتباه  
-- **تسليط الضوء على التركيز**: يوفر سياقًا بصريًا واضحًا لموقع الإدخال الحالي  
-- **تنسيق متسق**: يثبت أنماط واجهة يمكن للمستخدمين تعلمها  
 
-> 💡 **نصيحة احترافية**: استخدم الفئات الزائفة `:valid` و `:invalid` في CSS لتوفير ردود فعل مرئية فورية أثناء الكتابة، مما يخلق واجهة تفاعلية ومفيدة.  
+**ما تحققه هذه الإشارات المرئية:**
+- **حدود خضراء**: تشير إلى نجاح التحقق، مثل الأضواء الخضراء في مركز التحكم
+- **حدود حمراء**: تشير إلى أخطاء التحقق التي تحتاج إلى اهتمام
+- **تسليط الضوء على التركيز**: يوفر سياقًا مرئيًا واضحًا لموقع الإدخال الحالي
+- **تنسيق متسق**: يحدد أنماط واجهة يمكن للمستخدمين تعلمها
 
-### تنفيذ التحقق الشامل  
+> 💡 **نصيحة احترافية**: استخدم الفئات الزائفة `:valid` و `:invalid` في CSS لتوفير ملاحظات مرئية فورية أثناء الكتابة، مما يخلق واجهة تفاعلية ومفيدة.
 
-لنقم بتحسين نموذج التسجيل الخاص بك باستخدام التحقق القوي الذي يوفر تجربة مستخدم ممتازة وجودة بيانات عالية:  
+### تنفيذ التحقق الشامل
+
+دعونا نحسن نموذج التسجيل الخاص بك مع التحقق القوي الذي يوفر تجربة مستخدم ممتازة وجودة بيانات عالية:
 
 ```html
 <form id="registerForm" method="POST" novalidate>
@@ -681,42 +763,42 @@ input:focus:invalid {
   <button type="submit">Create Account</button>
 </form>
 ```
-  
-**فهم التحقق المحسن:**  
-- **يجمع** مؤشرات الحقول المطلوبة مع أوصاف مفيدة  
-- **يتضمن** خصائص `pattern` للتحقق من التنسيق  
-- **يوفر** خصائص `title` لتحسين الوصول وتقديم النصائح  
-- **يضيف** نصوص مساعدة لتوجيه إدخال المستخدم  
-- **يستخدم** هيكل HTML دلالي لتحسين الوصول  
 
-### قواعد التحقق المتقدمة  
+**فهم التحقق المحسن:**
+- **يجمع** مؤشرات الحقول المطلوبة مع أوصاف مفيدة
+- **يتضمن** خصائص `pattern` للتحقق من التنسيق
+- **يوفر** خصائص `title` لتحسين الوصول والنصوص التوضيحية
+- **يضيف** نصوص مساعدة لتوجيه إدخال المستخدم
+- **يستخدم** هيكل HTML دلالي لتحسين الوصول
 
-**ما تحققه كل قاعدة تحقق:**  
+### قواعد التحقق المتقدمة
 
-| الحقل | قواعد التحقق | فائدة المستخدم |  
-|-------|--------------|----------------|  
-| اسم المستخدم | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | يضمن معرفات صالحة وفريدة |  
-| العملة | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | يقبل رموز العملات الشائعة |  
-| الرصيد | `min="0"`, `step="0.01"`, `type="number"` | يمنع الأرصدة السلبية |  
-| الوصف | `maxlength="100"` | حدود طول معقولة |  
+**ما تحققه كل قاعدة تحقق:**
 
-### اختبار سلوك التحقق  
+| الحقل | قواعد التحقق | فائدة المستخدم |
+|-------|-------------|----------------|
+| اسم المستخدم | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | يضمن معرفات صالحة وفريدة |
+| العملة | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | يقبل رموز العملات الشائعة |
+| الرصيد | `min="0"`, `step="0.01"`, `type="number"` | يمنع الأرصدة السلبية |
+| الوصف | `maxlength="100"` | حدود طول معقولة |
 
-**جرب سيناريوهات التحقق التالية:**  
-1. **أرسل** النموذج مع الحقول المطلوبة فارغة  
-2. **أدخل** اسم مستخدم أقصر من 3 أحرف  
-3. **جرب** إدخال رموز خاصة في حقل اسم المستخدم  
-4. **أدخل** مبلغ رصيد سلبي  
+### اختبار سلوك التحقق
 
-![لقطة شاشة تظهر خطأ التحقق عند محاولة إرسال النموذج](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ar.png)  
+**جرب هذه السيناريوهات للتحقق:**
+1. **أرسل** النموذج مع الحقول المطلوبة فارغة
+2. **أدخل** اسم مستخدم أقصر من 3 أحرف
+3. **جرب** أحرف خاصة في حقل اسم المستخدم
+4. **أدخل** مبلغ رصيد سلبي
 
-**ما ستلاحظه:**  
-- **المتصفح يعرض** رسائل التحقق الأصلية  
-- **تغييرات التنسيق** بناءً على حالات `:valid` و `:invalid`  
-- **يتم منع إرسال النموذج** حتى يتم اجتياز جميع عمليات التحقق  
-- **التركيز ينتقل تلقائيًا** إلى أول حقل غير صالح  
+![لقطة شاشة تظهر خطأ التحقق عند محاولة إرسال النموذج](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ar.png)
 
-### التحقق من جانب العميل مقابل التحقق من جانب الخادم  
+**ما ستلاحظه:**
+- **المتصفح يعرض** رسائل التحقق الأصلية
+- **تغييرات التنسيق** بناءً على حالات `:valid` و `:invalid`
+- **يتم منع إرسال النموذج** حتى يتم اجتياز جميع عمليات التحقق
+- **التركيز ينتقل تلقائيًا** إلى أول حقل غير صالح
+
+### التحقق على مستوى العميل مقابل التحقق على مستوى الخادم
 
 ```mermaid
 graph LR
@@ -731,50 +813,148 @@ graph LR
     A -.-> I[Both Required]
     E -.-> I
 ```
-  
-**لماذا تحتاج كلا الطبقتين:**  
-- **التحقق من جانب العميل**: يوفر ردود فعل فورية ويحسن تجربة المستخدم  
-- **التحقق من جانب الخادم**: يضمن الأمان ويتعامل مع قواعد العمل المعقدة  
-- **النهج المشترك**: يخلق تطبيقات قوية وسهلة الاستخدام وآمنة  
-- **التعزيز التدريجي**: يعمل حتى عندما يتم تعطيل JavaScript  
 
-> 🛡️ **تذكير أمني**: لا تثق أبدًا في التحقق من جانب العميل فقط! يمكن للمستخدمين الضارين تجاوز الفحوصات على جانب العميل، لذا فإن التحقق من جانب الخادم ضروري للأمان وسلامة البيانات.  
+**لماذا تحتاج إلى كلا الطبقتين:**
+- **التحقق على مستوى العميل**: يوفر ملاحظات فورية ويحسن تجربة المستخدم
+- **التحقق على مستوى الخادم**: يضمن الأمان ويتعامل مع قواعد العمل المعقدة
+- **النهج المشترك**: يخلق تطبيقات قوية وسهلة الاستخدام وآمنة
+- **تحسين تدريجي**: يعمل حتى عندما يتم تعطيل JavaScript
+
+> 🛡️ **تذكير أمني**: لا تثق أبدًا في التحقق على مستوى العميل فقط! يمكن للمستخدمين الضارين تجاوز الفحوصات على مستوى العميل، لذا فإن التحقق على مستوى الخادم ضروري للأمان وسلامة البيانات.
+
+### ⚡ **ما يمكنك القيام به في الدقائق الخمس القادمة**
+- [ ] اختبر النموذج الخاص بك باستخدام بيانات غير صالحة لرؤية رسائل التحقق
+- [ ] جرب إرسال النموذج مع تعطيل JavaScript لرؤية التحقق باستخدام HTML5
+- [ ] افتح أدوات المطور في المتصفح وافحص البيانات المرسلة إلى الخادم
+- [ ] جرب أنواع إدخال مختلفة لرؤية تغييرات لوحة المفاتيح على الأجهزة المحمولة
+
+### 🎯 **ما يمكنك تحقيقه خلال هذه الساعة**
+- [ ] أكمل اختبار ما بعد الدرس لفهم مفاهيم معالجة النماذج
+- [ ] نفذ تحدي التحقق الشامل مع ملاحظات فورية
+- [ ] أضف تنسيق CSS لإنشاء نماذج ذات مظهر احترافي
+- [ ] أنشئ معالجة الأخطاء لأسماء المستخدمين المكررة وأخطاء الخادم
+- [ ] أضف حقول تأكيد كلمة المرور مع التحقق من المطابقة
+
+### 📅 **رحلة إتقان النماذج الخاصة بك لمدة أسبوع**
+- [ ] أكمل تطبيق البنك الكامل مع ميزات النماذج المتقدمة
+- [ ] نفذ قدرات تحميل الملفات للصور الشخصية أو المستندات
+- [ ] أضف نماذج متعددة الخطوات مع مؤشرات التقدم وإدارة الحالة
+- [ ] أنشئ نماذج ديناميكية تتكيف بناءً على اختيارات المستخدم
+- [ ] نفذ الحفظ التلقائي للنماذج والاسترداد لتحسين تجربة المستخدم
+- [ ] أضف التحقق المتقدم مثل التحقق من البريد الإلكتروني وتنسيق أرقام الهواتف
+
+### 🌟 **إتقان تطوير الواجهة الأمامية الخاص بك لمدة شهر**
+- [ ] قم ببناء تطبيقات نماذج معقدة مع منطق شرطي وسير العمل
+- [ ] تعلم مكتبات النماذج وأطر العمل للتطوير السريع
+- [ ] أتقن إرشادات الوصول ومبادئ التصميم الشامل
+- [ ] نفذ التدويل والتوطين للنماذج العالمية
+- [ ] أنشئ مكتبات مكونات النماذج القابلة لإعادة الاستخدام وأنظمة التصميم
+- [ ] ساهم في مشاريع النماذج مفتوحة المصدر وشارك أفضل الممارسات
+
+## 🎯 جدول زمني لإتقان تطوير النماذج الخاصة بك
 
----
+```mermaid
+timeline
+    title Form Development & User Experience Learning Progression
+    
+    section HTML Foundation (15 minutes)
+        Semantic Forms: Form elements
+                      : Input types
+                      : Labels and accessibility
+                      : Progressive enhancement
+        
+    section JavaScript Integration (25 minutes)
+        Event Handling: Form submission
+                      : Data collection
+                      : AJAX communication
+                      : Async/await patterns
+        
+    section Validation Systems (35 minutes)
+        Multi-layer Security: HTML5 validation
+                            : Client-side logic
+                            : Server-side verification
+                            : Error handling
+        
+    section User Experience (45 minutes)
+        Interface Polish: Loading states
+                        : Success messaging
+                        : Error recovery
+                        : Accessibility features
+        
+    section Advanced Patterns (1 week)
+        Professional Forms: Dynamic validation
+                          : Multi-step workflows
+                          : File uploads
+                          : Real-time feedback
+        
+    section Enterprise Skills (1 month)
+        Production Applications: Form libraries
+                               : Testing strategies
+                               : Performance optimization
+                               : Security best practices
+```
 
----
+### 🛠️ ملخص أدوات تطوير النماذج الخاصة بك
+
+بعد إكمال هذا الدرس، أصبحت الآن متقنًا:
+- **نماذج HTML5**: الهيكل الدلالي، أنواع الإدخال، وميزات الوصول
+- **معالجة النماذج باستخدام JavaScript**: إدارة الأحداث، جمع البيانات، والتواصل عبر AJAX
+- **هيكل التحقق**: التحقق متعدد الطبقات للأمان وتجربة المستخدم
+- **البرمجة غير المتزامنة**: واجهة برمجة التطبيقات Fetch الحديثة وأنماط async/await
+- **إدارة الأخطاء**: معالجة الأخطاء الشاملة وأنظمة ملاحظات المستخدم
+- **تصميم تجربة المستخدم**: حالات التحميل، رسائل النجاح، واسترداد الأخطاء
+- **تحسين تدريجي**: نماذج تعمل عبر جميع المتصفحات والإمكانيات
+
+**تطبيقات العالم الحقيقي**: مهارات تطوير النماذج الخاصة بك تنطبق مباشرة على:
+- **تطبيقات التجارة الإلكترونية**: عمليات الدفع، تسجيل الحسابات، ونماذج الدفع
+- **برامج المؤسسات**: أنظمة إدخال البيانات، واجهات التقارير، وتطبيقات سير العمل
+- **إدارة المحتوى**: منصات النشر، المحتوى الذي ينشئه المستخدم، وواجهات الإدارة
+- **التطبيقات المالية**: واجهات البنوك، منصات الاستثمار، وأنظمة المعاملات
+- **أنظمة الرعاية الصحية**: بوابات المرضى، جدولة المواعيد، ونماذج السجلات الطبية
+- **منصات التعليم**: تسجيل الدورات، أدوات التقييم، وأنظمة إدارة التعلم
 
-## تحدي وكيل GitHub Copilot 🚀  
+**المهارات المهنية المكتسبة**: يمكنك الآن:
+- **تصميم** نماذج قابلة للوصول تعمل لجميع المستخدمين بما في ذلك ذوي الإعاقة
+- **تنفيذ** تحقق آمن للنماذج يمنع تلف البيانات والثغرات الأمنية
+- **إنشاء** واجهات مستخدم استجابية توفر ملاحظات وتوجيهات واضحة
+- **تصحيح** تفاعلات النماذج المعقدة باستخدام أدوات المطور في المتصفح وتحليل الشبكة
+- **تحسين** أداء النماذج من خلال معالجة البيانات واستراتيجيات التحقق الفعالة
 
-استخدم وضع الوكيل لإكمال التحدي التالي:  
+**مفاهيم تطوير الواجهة الأمامية المتقنة**:
+- **هيكل مدفوع بالأحداث**: معالجة تفاعلات المستخدم وأنظمة الاستجابة
+- **البرمجة غير المتزامنة**: التواصل مع الخادم دون حجب واجهة المستخدم ومعالجة الأخطاء
+- **التحقق من البيانات**: فحوصات الأمان وسلامة البيانات على مستوى العميل والخادم
+- **تصميم تجربة المستخدم**: واجهات بديهية توجه المستخدمين نحو النجاح
+- **هندسة الوصول**: تصميم شامل يعمل لاحتياجات المستخدمين المتنوعة
 
-**الوصف:** قم بتحسين نموذج التسجيل باستخدام التحقق الشامل من جانب العميل وردود فعل المستخدم. سيساعدك هذا التحدي على ممارسة التحقق من النموذج، معالجة الأخطاء، وتحسين تجربة المستخدم مع ردود فعل تفاعلية.  
+**المستوى التالي**: أنت جاهز لاستكشاف مكتبات النماذج المتقدمة، تنفيذ قواعد التحقق المعقدة، أو بناء أنظمة جمع بيانات على مستوى المؤسسات!
 
-**المهمة:** قم بإنشاء نظام تحقق كامل لنموذج التسجيل يتضمن: 1) ردود فعل التحقق الفوري لكل حقل أثناء الكتابة، 2) رسائل تحقق مخصصة تظهر أسفل كل حقل إدخال، 3) حقل تأكيد كلمة المرور مع التحقق من المطابقة، 4) مؤشرات بصرية (مثل علامات خضراء للحقول الصالحة وتحذيرات حمراء للحقول غير الصالحة)، 5) زر إرسال يصبح مفعلاً فقط عندما يتم اجتياز جميع عمليات التحقق. استخدم خصائص التحقق في HTML5، CSS لتنسيق حالات التحقق، وJavaScript للسلوك التفاعلي.  
+🌟 **إنجاز محقق**: لقد أنشأت نظام معالجة نماذج كامل مع التحقق الاحترافي، معالجة الأخطاء، وأنماط تجربة المستخدم!
+**المطالبة:** قم بإنشاء نظام تحقق كامل لنموذج التسجيل يتضمن: 1) تقديم ملاحظات التحقق في الوقت الفعلي لكل حقل أثناء الكتابة، 2) رسائل تحقق مخصصة تظهر أسفل كل حقل إدخال، 3) حقل تأكيد كلمة المرور مع تحقق من التطابق، 4) مؤشرات مرئية (مثل علامات خضراء للحقل الصحيح وتحذيرات حمراء للحقل غير الصحيح)، 5) زر إرسال يصبح مفعلاً فقط عندما يتم اجتياز جميع عمليات التحقق. استخدم سمات التحقق في HTML5، وCSS لتنسيق حالات التحقق، وJavaScript للسلوك التفاعلي.
 
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.  
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
-## 🚀 التحدي  
+## 🚀 التحدي
 
-اعرض رسالة خطأ في HTML إذا كان المستخدم موجودًا بالفعل.  
+اعرض رسالة خطأ في HTML إذا كان المستخدم موجودًا بالفعل.
 
-إليك مثال لما يمكن أن يبدو عليه صفحة تسجيل الدخول النهائية بعد إضافة بعض التنسيقات:  
+إليك مثال لما يمكن أن يبدو عليه صفحة تسجيل الدخول النهائية بعد إضافة بعض أنماط CSS:
 
-![لقطة شاشة لصفحة تسجيل الدخول بعد إضافة أنماط CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ar.png)  
+![لقطة شاشة لصفحة تسجيل الدخول بعد إضافة أنماط CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ar.png)
 
-## اختبار ما بعد المحاضرة  
+## اختبار ما بعد المحاضرة
 
-[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/44)  
+[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/44)
 
-## المراجعة والدراسة الذاتية  
+## المراجعة والدراسة الذاتية
 
-أصبح المطورون مبدعين للغاية في جهود بناء النماذج الخاصة بهم، خاصة فيما يتعلق باستراتيجيات التحقق. تعرف على تدفقات النماذج المختلفة من خلال تصفح [CodePen](https://codepen.com)؛ هل يمكنك العثور على نماذج مثيرة ومُلهمة؟  
+لقد أصبح المطورون مبدعين للغاية في جهودهم لبناء النماذج، خاصة فيما يتعلق باستراتيجيات التحقق. تعرف على تدفقات النماذج المختلفة من خلال تصفح [CodePen](https://codepen.com)؛ هل يمكنك العثور على نماذج مثيرة ومُلهمة؟
 
-## الواجب  
+## الواجب
 
-[صمم تطبيق البنك الخاص بك](assignment.md)  
+[قم بتنسيق تطبيق البنك الخاص بك](assignment.md)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/7-bank-project/3-data/README.md b/translations/ar/7-bank-project/3-data/README.md
index 375ed9f540..30d0569925 100644
--- a/translations/ar/7-bank-project/3-data/README.md
+++ b/translations/ar/7-bank-project/3-data/README.md
@@ -1,19 +1,72 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "2c1164912414820c8efd699b43f64954",
-  "translation_date": "2025-10-22T14:20:38+00:00",
+  "original_hash": "86ee5069f27ea3151389d8687c95fac9",
+  "translation_date": "2025-11-03T12:39:08+00:00",
   "source_file": "7-bank-project/3-data/README.md",
   "language_code": "ar"
 }
 -->
-# بناء تطبيق مصرفي الجزء 3: طرق جلب واستخدام البيانات
+# بناء تطبيق مصرفي الجزء 3: طرق جلب البيانات واستخدامها
 
-تخيل حاسوب المؤسسة في مسلسل ستار تريك - عندما يسأل الكابتن بيكار عن حالة السفينة، تظهر المعلومات فورًا دون أن يتوقف النظام أو يعيد بناء نفسه بالكامل. هذا التدفق السلس للمعلومات هو بالضبط ما نسعى لبنائه هنا من خلال جلب البيانات الديناميكية.
+تخيل حاسوب السفينة في مسلسل ستار تريك - عندما يسأل الكابتن بيكار عن حالة السفينة، تظهر المعلومات فورًا دون أن يتوقف النظام أو يعيد بناء نفسه. هذا التدفق السلس للمعلومات هو بالضبط ما نسعى لبنائه هنا من خلال جلب البيانات الديناميكي.
 
 في الوقت الحالي، تطبيقك المصرفي يشبه الصحيفة المطبوعة - مفيد ولكنه ثابت. سنقوم بتحويله إلى شيء يشبه مركز التحكم في ناسا، حيث تتدفق البيانات باستمرار وتُحدث في الوقت الفعلي دون أن تقاطع سير عمل المستخدم.
 
-ستتعلم كيفية التواصل مع الخوادم بشكل غير متزامن، التعامل مع البيانات التي تصل في أوقات مختلفة، وتحويل المعلومات الخام إلى شيء ذو معنى لمستخدميك. هذا هو الفرق بين العرض التوضيحي والبرمجيات الجاهزة للإنتاج.
+ستتعلم كيفية التواصل مع الخوادم بشكل غير متزامن، وكيفية التعامل مع البيانات التي تصل في أوقات مختلفة، وكيفية تحويل المعلومات الخام إلى شيء ذو معنى لمستخدميك. هذا هو الفرق بين العرض التوضيحي والبرمجيات الجاهزة للإنتاج.
+
+## ⚡ ما يمكنك القيام به في الـ 5 دقائق القادمة
+
+**مسار البداية السريعة للمطورين المشغولين**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Set up API server]
+    B --> C[Test fetch with curl]
+    C --> D[Create login function]
+    D --> E[See data in action]
+```
+
+- **الدقيقة 1-2**: قم بتشغيل خادم API الخاص بك (`cd api && npm start`) واختبر الاتصال
+- **الدقيقة 3**: أنشئ وظيفة `getAccount()` الأساسية باستخدام fetch
+- **الدقيقة 4**: قم بتوصيل نموذج تسجيل الدخول بـ `action="javascript:login()"`
+- **الدقيقة 5**: اختبر تسجيل الدخول وشاهد بيانات الحساب تظهر في وحدة التحكم
+
+**أوامر الاختبار السريع**:
+```bash
+# Verify API is running
+curl http://localhost:5000/api
+
+# Test account data fetch
+curl http://localhost:5000/api/accounts/test
+```
+
+**لماذا هذا مهم**: في 5 دقائق، ستشاهد سحر جلب البيانات غير المتزامن الذي يدعم كل تطبيق ويب حديث. هذا هو الأساس الذي يجعل التطبيقات تبدو مستجيبة وحيوية.
+
+## 🗺️ رحلتك التعليمية عبر تطبيقات الويب المعتمدة على البيانات
+
+```mermaid
+journey
+    title From Static Pages to Dynamic Applications
+    section Understanding the Evolution
+      Traditional page reloads: 3: You
+      Discover AJAX/SPA benefits: 5: You
+      Master Fetch API patterns: 7: You
+    section Building Authentication
+      Create login functions: 4: You
+      Handle async operations: 6: You
+      Manage user sessions: 8: You
+    section Dynamic UI Updates
+      Learn DOM manipulation: 5: You
+      Build transaction displays: 7: You
+      Create responsive dashboards: 9: You
+    section Professional Patterns
+      Template-based rendering: 6: You
+      Error handling strategies: 7: You
+      Performance optimization: 8: You
+```
+
+**وجهة رحلتك**: بنهاية هذا الدرس، ستفهم كيف تقوم تطبيقات الويب الحديثة بجلب ومعالجة وعرض البيانات ديناميكيًا، مما يخلق تجارب مستخدم سلسة نتوقعها من التطبيقات الاحترافية.
 
 ## اختبار ما قبل المحاضرة
 
@@ -23,8 +76,8 @@ CO_OP_TRANSLATOR_METADATA:
 
 قبل الغوص في جلب البيانات، تأكد من أن لديك هذه المكونات جاهزة:
 
-- **الدرس السابق**: أكمل [نموذج تسجيل الدخول والتسجيل](../2-forms/README.md) - سنبني على هذا الأساس.
-- **الخادم المحلي**: قم بتثبيت [Node.js](https://nodejs.org) و[تشغيل API الخادم](../api/README.md) لتوفير بيانات الحساب.
+- **الدرس السابق**: أكمل [نموذج تسجيل الدخول والتسجيل](../2-forms/README.md) - سنبني على هذا الأساس
+- **الخادم المحلي**: قم بتثبيت [Node.js](https://nodejs.org) و[تشغيل خادم API](../api/README.md) لتوفير بيانات الحساب
 - **اتصال API**: اختبر اتصال الخادم الخاص بك باستخدام هذا الأمر:
 
 ```bash
@@ -33,21 +86,66 @@ curl http://localhost:5000/api
 ```
 
 هذا الاختبار السريع يضمن أن جميع المكونات تتواصل بشكل صحيح:
-- يتحقق من أن Node.js يعمل بشكل صحيح على نظامك.
-- يؤكد أن خادم API نشط ويستجيب.
-- يتحقق من أن تطبيقك يمكنه الوصول إلى الخادم (مثل التحقق من الاتصال اللاسلكي قبل المهمة).
+- يتحقق من أن Node.js يعمل بشكل صحيح على نظامك
+- يؤكد أن خادم API الخاص بك نشط ويستجيب
+- يتحقق من أن تطبيقك يمكنه الوصول إلى الخادم (مثل التحقق من الاتصال اللاسلكي قبل بدء المهمة)
+
+## 🧠 نظرة عامة على نظام إدارة البيانات
+
+```mermaid
+mindmap
+  root((Data Management))
+    Authentication Flow
+      Login Process
+        Form Validation
+        Credential Verification
+        Session Management
+      User State
+        Global Account Object
+        Navigation Guards
+        Error Handling
+    API Communication
+      Fetch Patterns
+        GET Requests
+        POST Requests
+        Error Responses
+      Data Formats
+        JSON Processing
+        URL Encoding
+        Response Parsing
+    Dynamic UI Updates
+      DOM Manipulation
+        Safe Text Updates
+        Element Creation
+        Template Cloning
+      User Experience
+        Real-time Updates
+        Error Messages
+        Loading States
+    Security Considerations
+      XSS Prevention
+        textContent Usage
+        Input Sanitization
+        Safe HTML Creation
+      CORS Handling
+        Cross-Origin Requests
+        Header Configuration
+        Development Setup
+```
+
+**المبدأ الأساسي**: تطبيقات الويب الحديثة هي أنظمة تنسيق البيانات - تنسق بين واجهات المستخدم وواجهات برمجة التطبيقات للخادم ونماذج أمان المتصفح لإنشاء تجارب سلسة ومستجيبة.
 
 ---
 
 ## فهم جلب البيانات في تطبيقات الويب الحديثة
 
-لقد تطورت طريقة تعامل تطبيقات الويب مع البيانات بشكل كبير خلال العقدين الماضيين. فهم هذا التطور سيساعدك على تقدير قوة التقنيات الحديثة مثل AJAX وFetch API ولماذا أصبحت أدوات أساسية لمطوري الويب.
+طريقة تعامل تطبيقات الويب مع البيانات تطورت بشكل كبير على مدار العقدين الماضيين. فهم هذا التطور سيساعدك على تقدير قوة التقنيات الحديثة مثل AJAX وFetch API ولماذا أصبحت أدوات أساسية لمطوري الويب.
 
-دعونا نستكشف كيف كانت تعمل المواقع التقليدية مقارنة بالتطبيقات الديناميكية والاستجابية التي نبنيها اليوم.
+دعونا نستكشف كيف كانت تعمل المواقع التقليدية مقارنة بالتطبيقات الديناميكية المستجيبة التي نبنيها اليوم.
 
 ### التطبيقات متعددة الصفحات التقليدية (MPA)
 
-في الأيام الأولى للويب، كان كل نقرة تشبه تغيير القنوات على تلفزيون قديم - الشاشة تصبح فارغة، ثم تبدأ ببطء في عرض المحتوى الجديد. هذه كانت حقيقة التطبيقات الويب الأولى، حيث كل تفاعل يعني إعادة بناء الصفحة بالكامل من الصفر.
+في الأيام الأولى للويب، كان كل نقرة تشبه تغيير القنوات على تلفزيون قديم - الشاشة تصبح فارغة، ثم تبدأ في عرض المحتوى الجديد ببطء. كانت هذه هي حقيقة التطبيقات الويب القديمة، حيث كانت كل تفاعل يعني إعادة بناء الصفحة بالكامل من البداية.
 
 ```mermaid
 sequenceDiagram
@@ -64,15 +162,15 @@ sequenceDiagram
 
 ![تدفق التحديث في تطبيق متعدد الصفحات](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ar.png)
 
-**لماذا كان هذا النهج يبدو غير عملي:**
-- كل نقرة تعني إعادة بناء الصفحة بالكامل من الصفر.
-- المستخدمون كانوا يتعرضون لانقطاع في التفكير بسبب تلك الومضات المزعجة للصفحة.
-- اتصال الإنترنت كان يعمل بجهد إضافي لتحميل نفس الرأس والتذييل مرارًا وتكرارًا.
-- التطبيقات كانت تبدو وكأنها تصفح ملفات بدلاً من استخدام البرمجيات.
+**لماذا كان هذا النهج يبدو غير سلس:**
+- كل نقرة تعني إعادة بناء الصفحة بالكامل من البداية
+- كان المستخدمون يتعرضون لانقطاع في التفكير بسبب تلك الومضات المزعجة للصفحة
+- كان اتصال الإنترنت يعمل بجهد إضافي لتحميل نفس الرأس والتذييل مرارًا وتكرارًا
+- كانت التطبيقات تبدو وكأنها تصفح ملفات بدلاً من استخدام البرمجيات
 
 ### التطبيقات أحادية الصفحة الحديثة (SPA)
 
-غيرت AJAX (JavaScript وXML غير المتزامن) هذا النموذج تمامًا. مثل التصميم المعياري لمحطة الفضاء الدولية، حيث يمكن لرواد الفضاء استبدال مكونات فردية دون إعادة بناء الهيكل بالكامل، يسمح AJAX بتحديث أجزاء محددة من صفحة الويب دون إعادة تحميل كل شيء. على الرغم من أن الاسم يشير إلى XML، إلا أننا نستخدم JSON في الغالب اليوم، لكن المبدأ الأساسي يبقى كما هو: تحديث فقط ما يحتاج إلى التغيير.
+غيرت تقنية AJAX (JavaScript وXML غير المتزامن) هذا النموذج تمامًا. مثل التصميم المعياري لمحطة الفضاء الدولية، حيث يمكن لرواد الفضاء استبدال المكونات الفردية دون إعادة بناء الهيكل بالكامل، يسمح لنا AJAX بتحديث أجزاء محددة من صفحة الويب دون إعادة تحميل كل شيء. على الرغم من أن الاسم يشير إلى XML، إلا أننا نستخدم JSON في الغالب اليوم، لكن المبدأ الأساسي يبقى كما هو: تحديث ما يحتاج إلى التغيير فقط.
 
 ```mermaid
 sequenceDiagram
@@ -92,38 +190,38 @@ sequenceDiagram
 ![تدفق التحديث في تطبيق أحادي الصفحة](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ar.png)
 
 **لماذا التطبيقات أحادية الصفحة تبدو أفضل بكثير:**
-- يتم تحديث فقط الأجزاء التي تغيرت بالفعل (ذكي، أليس كذلك؟).
-- لا مزيد من الانقطاعات المزعجة - يبقى المستخدمون في تدفقهم.
-- بيانات أقل تنتقل عبر الشبكة تعني تحميل أسرع.
-- كل شيء يبدو سريعًا واستجابياً، مثل التطبيقات على هاتفك.
+- يتم تحديث الأجزاء التي تغيرت فقط (ذكي، أليس كذلك؟)
+- لا مزيد من الانقطاعات المزعجة - يبقى المستخدمون في تدفقهم
+- بيانات أقل تنتقل عبر الشبكة تعني تحميل أسرع
+- كل شيء يبدو سريعًا ومستجيبًا، مثل التطبيقات على هاتفك
 
 ### التطور إلى Fetch API الحديث
 
-توفر المتصفحات الحديثة [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API)، الذي يحل محل [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) القديم. مثل الفرق بين تشغيل التلغراف واستخدام البريد الإلكتروني، يستخدم Fetch API الوعود لكتابة كود غير متزامن بشكل أنظف ويتعامل مع JSON بشكل طبيعي.
+توفر المتصفحات الحديثة [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API)، الذي يحل محل [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) القديم. مثل الفرق بين تشغيل التلغراف واستخدام البريد الإلكتروني، يستخدم Fetch API الوعود لكتابة كود غير متزامن أنظف ويتعامل مع JSON بشكل طبيعي.
 
 | الميزة | XMLHttpRequest | Fetch API |
 |---------|----------------|----------|
-| **الصياغة** | معقدة تعتمد على الاستدعاءات | تعتمد على الوعود بشكل نظيف |
+| **الصياغة** | معقدة تعتمد على الاستدعاءات | تعتمد على الوعود النظيفة |
 | **التعامل مع JSON** | يتطلب التحليل اليدوي | طريقة `.json()` مدمجة |
 | **التعامل مع الأخطاء** | معلومات محدودة عن الأخطاء | تفاصيل شاملة عن الأخطاء |
 | **الدعم الحديث** | توافق مع الإصدارات القديمة | وعود ES6+ وasync/await |
 
-> 💡 **توافق المتصفح**: أخبار جيدة - يعمل Fetch API في جميع المتصفحات الحديثة! إذا كنت مهتمًا بالإصدارات المحددة، [caniuse.com](https://caniuse.com/fetch) يحتوي على القصة الكاملة للتوافق.
+> 💡 **توافق المتصفح**: أخبار جيدة - يعمل Fetch API في جميع المتصفحات الحديثة! إذا كنت فضوليًا بشأن الإصدارات المحددة، [caniuse.com](https://caniuse.com/fetch) يحتوي على القصة الكاملة للتوافق.
 > 
 **الخلاصة:**
-- يعمل بشكل رائع في Chrome، Firefox، Safari، وEdge (بشكل أساسي في كل مكان يتواجد فيه المستخدمون).
-- فقط Internet Explorer يحتاج إلى مساعدة إضافية (وبصراحة، حان الوقت للتخلي عن IE).
-- يجهزك بشكل مثالي لأنماط async/await الأنيقة التي سنستخدمها لاحقًا.
+- يعمل بشكل رائع في Chrome وFirefox وSafari وEdge (بشكل أساسي في كل مكان يتواجد فيه المستخدمون)
+- فقط Internet Explorer يحتاج إلى مساعدة إضافية (وبصراحة، حان الوقت للتخلي عن IE)
+- يجهزك تمامًا لأنماط async/await الأنيقة التي سنستخدمها لاحقًا
 
-### تنفيذ تسجيل الدخول واسترجاع البيانات
+### تنفيذ تسجيل الدخول وجلب البيانات
 
-الآن دعونا ننفذ نظام تسجيل الدخول الذي يحول تطبيقك المصرفي من عرض ثابت إلى تطبيق وظيفي. مثل بروتوكولات المصادقة المستخدمة في المنشآت العسكرية الآمنة، سنقوم بالتحقق من بيانات اعتماد المستخدم ثم توفير الوصول إلى بياناته المحددة.
+الآن دعونا ننفذ نظام تسجيل الدخول الذي يحول تطبيقك المصرفي من عرض ثابت إلى تطبيق وظيفي. مثل بروتوكولات المصادقة المستخدمة في المنشآت العسكرية الآمنة، سنقوم بالتحقق من بيانات المستخدم ثم توفير الوصول إلى بياناته المحددة.
 
 سنقوم ببناء هذا تدريجيًا، بدءًا من المصادقة الأساسية ثم إضافة قدرات جلب البيانات.
 
 #### الخطوة 1: إنشاء أساس وظيفة تسجيل الدخول
 
-افتح ملف `app.js` وأضف وظيفة `login` جديدة. هذه الوظيفة ستتعامل مع عملية مصادقة المستخدم:
+افتح ملف `app.js` الخاص بك وأضف وظيفة `login` جديدة. ستتعامل هذه الوظيفة مع عملية مصادقة المستخدم:
 
 ```javascript
 async function login() {
@@ -133,16 +231,16 @@ async function login() {
 ```
 
 **لنقم بتفصيل هذا:**
-- الكلمة المفتاحية `async`؟ تخبر JavaScript "مرحبًا، قد تحتاج هذه الوظيفة إلى الانتظار لبعض الوقت".
-- نحن نحصل على النموذج من الصفحة (ليس هناك شيء معقد، فقط العثور عليه بواسطة معرفه).
-- ثم نقوم بسحب ما كتبه المستخدم كاسم مستخدم.
+- الكلمة المفتاحية `async`؟ تخبر JavaScript "مرحبًا، هذه الوظيفة قد تحتاج إلى الانتظار لبعض الأشياء"
+- نحن نحصل على النموذج الخاص بنا من الصفحة (لا شيء فاخر، فقط العثور عليه بواسطة معرفه)
+- ثم نقوم بسحب ما كتبه المستخدم كاسم مستخدم
 - إليك خدعة رائعة: يمكنك الوصول إلى أي إدخال نموذج بواسطة خاصية `name` - لا حاجة لاستدعاءات إضافية لـ getElementById!
 
-> 💡 **نمط الوصول إلى النموذج**: يمكن الوصول إلى كل عنصر تحكم في النموذج بواسطة اسمه (المحدد في HTML باستخدام خاصية `name`) كخاصية لعنصر النموذج. هذا يوفر طريقة نظيفة وسهلة للحصول على بيانات النموذج.
+> 💡 **نمط الوصول إلى النموذج**: يمكن الوصول إلى كل عنصر تحكم في النموذج بواسطة اسمه (المحدد في HTML باستخدام خاصية `name`) كخاصية لعنصر النموذج. يوفر هذا طريقة نظيفة وسهلة للحصول على بيانات النموذج.
 
 #### الخطوة 2: إنشاء وظيفة جلب بيانات الحساب
 
-بعد ذلك، سنقوم بإنشاء وظيفة مخصصة لاسترجاع بيانات الحساب من الخادم. هذا يتبع نفس النمط مثل وظيفة التسجيل الخاصة بك ولكنه يركز على استرجاع البيانات:
+بعد ذلك، سنقوم بإنشاء وظيفة مخصصة لجلب بيانات الحساب من الخادم. يتبع هذا نفس النمط مثل وظيفة التسجيل الخاصة بك ولكنه يركز على جلب البيانات:
 
 ```javascript
 async function getAccount(user) {
@@ -156,36 +254,54 @@ async function getAccount(user) {
 ```
 
 **ما يحققه هذا الكود:**
-- **يستخدم** Fetch API الحديث لطلب البيانات بشكل غير متزامن.
-- **يبني** عنوان طلب GET مع معلمة اسم المستخدم.
-- **يطبق** `encodeURIComponent()` للتعامل بأمان مع الأحرف الخاصة في عناوين URL.
-- **يحول** الاستجابة إلى صيغة JSON لتسهيل التعامل مع البيانات.
-- **يتعامل** مع الأخطاء بشكل جيد عن طريق إرجاع كائن خطأ بدلاً من التعطل.
+- **يستخدم** Fetch API الحديث لطلب البيانات بشكل غير متزامن
+- **يبني** عنوان URL لطلب GET مع معلمة اسم المستخدم
+- **يطبق** `encodeURIComponent()` للتعامل بأمان مع الأحرف الخاصة في عناوين URL
+- **يحول** الاستجابة إلى صيغة JSON لتسهيل معالجة البيانات
+- **يتعامل** مع الأخطاء بشكل جيد عن طريق إرجاع كائن خطأ بدلاً من التعطل
 
-> ⚠️ **ملاحظة أمان**: وظيفة `encodeURIComponent()` تتعامل مع الأحرف الخاصة في عناوين URL. مثل أنظمة التشفير المستخدمة في الاتصالات البحرية، تضمن وصول رسالتك كما هو مقصود، مما يمنع الأحرف مثل "#" أو "&" من أن يتم تفسيرها بشكل خاطئ.
+> ⚠️ **ملاحظة أمان**: وظيفة `encodeURIComponent()` تتعامل مع الأحرف الخاصة في عناوين URL. مثل أنظمة التشفير المستخدمة في الاتصالات البحرية، تضمن وصول رسالتك بالضبط كما هو مقصود، مما يمنع الأحرف مثل "#" أو "&" من أن يتم تفسيرها بشكل خاطئ.
 > 
 **لماذا هذا مهم:**
-- يمنع الأحرف الخاصة من كسر عناوين URL.
-- يحمي من هجمات التلاعب بعناوين URL.
-- يضمن أن الخادم يتلقى البيانات المقصودة.
-- يتبع ممارسات البرمجة الآمنة.
+- يمنع الأحرف الخاصة من كسر عناوين URL
+- يحمي من هجمات التلاعب بعناوين URL
+- يضمن أن الخادم يتلقى البيانات المقصودة
+- يتبع ممارسات البرمجة الآمنة
 
 #### فهم طلبات HTTP GET
 
 إليك شيء قد يفاجئك: عندما تستخدم `fetch` بدون أي خيارات إضافية، فإنه ينشئ تلقائيًا طلب [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET). هذا مثالي لما نقوم به - طلب من الخادم "مرحبًا، هل يمكنني رؤية بيانات حساب هذا المستخدم؟"
 
-فكر في طلبات GET كطلب استعارة كتاب من المكتبة - تطلب رؤية شيء موجود بالفعل. طلبات POST (التي استخدمناها للتسجيل) تشبه تقديم كتاب جديد ليتم إضافته إلى المجموعة.
+فكر في طلبات GET كطلب استعارة كتاب من المكتبة - تطلب رؤية شيء موجود بالفعل. طلبات POST (التي استخدمناها للتسجيل) تشبه أكثر تقديم كتاب جديد ليتم إضافته إلى المجموعة.
 
 | طلب GET | طلب POST |
 |-------------|-------------|
 | **الغرض** | استرجاع البيانات الموجودة | إرسال بيانات جديدة إلى الخادم |
 | **المعلمات** | في مسار/سلسلة استعلام URL | في جسم الطلب |
-| **التخزين المؤقت** | يمكن تخزينه مؤقتًا بواسطة المتصفحات | عادةً لا يتم تخزينه مؤقتًا |
-| **الأمان** | مرئي في عنوان URL/السجلات | مخفي في جسم الطلب |
+| **التخزين المؤقت** | يمكن تخزينها مؤقتًا بواسطة المتصفحات | لا يتم تخزينها مؤقتًا عادةً |
+| **الأمان** | مرئية في عنوان URL/السجلات | مخفية في جسم الطلب |
+
+```mermaid
+sequenceDiagram
+    participant B as Browser
+    participant S as Server
+    
+    Note over B,S: GET Request (Data Retrieval)
+    B->>S: GET /api/accounts/test
+    S-->>B: 200 OK + Account Data
+    
+    Note over B,S: POST Request (Data Submission)
+    B->>S: POST /api/accounts + New Account Data
+    S-->>B: 201 Created + Confirmation
+    
+    Note over B,S: Error Handling
+    B->>S: GET /api/accounts/nonexistent
+    S-->>B: 404 Not Found + Error Message
+```
 
 #### الخطوة 3: جمع كل شيء معًا
 
-الآن الجزء الممتع - دعونا نربط وظيفة جلب الحساب بعملية تسجيل الدخول. هنا حيث كل شيء يتكامل:
+الآن الجزء الممتع - دعونا نربط وظيفة جلب بيانات الحساب بعملية تسجيل الدخول. هنا حيث كل شيء يتكامل:
 
 ```javascript
 async function login() {
@@ -203,16 +319,16 @@ async function login() {
 ```
 
 تتبع هذه الوظيفة تسلسلًا واضحًا:
-- استخراج اسم المستخدم من إدخال النموذج.
-- طلب بيانات حساب المستخدم من الخادم.
-- التعامل مع أي أخطاء تحدث أثناء العملية.
-- تخزين بيانات الحساب والانتقال إلى لوحة التحكم عند النجاح.
+- استخراج اسم المستخدم من إدخال النموذج
+- طلب بيانات حساب المستخدم من الخادم
+- التعامل مع أي أخطاء تحدث أثناء العملية
+- تخزين بيانات الحساب والانتقال إلى لوحة التحكم عند النجاح
 
 > 🎯 **نمط Async/Await**: بما أن `getAccount` هي وظيفة غير متزامنة، نستخدم الكلمة المفتاحية `await` لإيقاف التنفيذ حتى يستجيب الخادم. هذا يمنع الكود من الاستمرار مع بيانات غير معرفة.
 
 #### الخطوة 4: إنشاء مكان لبياناتك
 
-تطبيقك يحتاج إلى مكان لتذكر معلومات الحساب بمجرد تحميلها. فكر في هذا كمكان ذاكرة قصيرة المدى لتطبيقك - مكان للحفاظ على بيانات المستخدم الحالي في متناول اليد. أضف هذا السطر في أعلى ملف `app.js`:
+تطبيقك يحتاج إلى مكان لتذكر معلومات الحساب بمجرد تحميلها. فكر في هذا كمكان ذاكرة قصيرة المدى لتطبيقك - مكان للحفاظ على بيانات المستخدم الحالي في متناول اليد. أضف هذا السطر في أعلى ملف `app.js` الخاص بك:
 
 ```javascript
 // This holds the current user's account data
@@ -220,14 +336,14 @@ let account = null;
 ```
 
 **لماذا نحتاج هذا:**
-- يحافظ على بيانات الحساب متاحة من أي مكان في تطبيقك.
-- البدء بـ `null` يعني "لا أحد مسجل الدخول بعد".
-- يتم تحديثه عندما يسجل أحدهم الدخول أو التسجيل بنجاح.
-- يعمل كمصدر واحد للحقيقة - لا يوجد ارتباك حول من سجل الدخول.
+- يحافظ على بيانات الحساب متاحة من أي مكان في تطبيقك
+- البدء بـ `null` يعني "لا أحد مسجل الدخول بعد"
+- يتم تحديثه عندما يسجل شخص ما الدخول أو التسجيل بنجاح
+- يعمل كمصدر واحد للحقيقة - لا يوجد ارتباك حول من هو مسجل الدخول
 
-#### الخطوة 5: ربط النموذج الخاص بك
+#### الخطوة 5: توصيل النموذج الخاص بك
 
-الآن دعونا نربط وظيفة تسجيل الدخول الجديدة الخاصة بك بنموذج HTML الخاص بك. قم بتحديث علامة النموذج الخاصة بك مثل هذا:
+الآن دعونا نربط وظيفة تسجيل الدخول الجديدة الخاصة بك بنموذج HTML الخاص بك. قم بتحديث علامة النموذج الخاصة بك على هذا النحو:
 
 ```html
 <form id="loginForm" action="javascript:login()">
@@ -235,9 +351,97 @@ let account = null;
 </form>
 ```
 
-**ما الذي يفعله هذا التغيير الصغير:**
-- يوقف النموذج من القيام بسلوكه الافتر
-للمحتوى الأكثر تعقيدًا، اجمع بين [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) وطريقة [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append):
+**ما يفعله هذا التغيير الصغير:**
+- يوقف النموذج من القيام بسلوك "إعادة تحميل الصفحة بالكامل" الافتراضي
+- يستدعي وظيفة JavaScript المخصصة الخاصة بك بدلاً من ذلك
+- يحافظ على كل شيء سلسًا ومشابهًا لتطبيق الصفحة الواحدة
+- يمنحك التحكم الكامل في ما يحدث عندما يضغط المستخدمون على "تسجيل الدخول"
+
+#### الخطوة 6: تحسين وظيفة التسجيل الخاصة بك
+
+للحفاظ على التناسق، قم بتحديث وظيفة `register` الخاصة بك لتخزين بيانات الحساب أيضًا والانتقال إلى لوحة التحكم:
+
+```javascript
+// Add these lines at the end of your register function
+account = result;
+navigate('/dashboard');
+```
+
+**يوفر هذا التحسين:**
+- **انتقال سلس** من التسجيل إلى لوحة التحكم
+- **تجربة مستخدم متسقة** بين تدفقات تسجيل الدخول والتسجيل
+- **وصول فوري** إلى بيانات الحساب بعد التسجيل الناجح
+
+#### اختبار التنفيذ الخاص بك
+
+```mermaid
+flowchart TD
+    A[User enters credentials] --> B[Login function called]
+    B --> C[Fetch account data from server]
+    C --> D{Data received successfully?}
+    D -->|Yes| E[Store account data globally]
+    D -->|No| F[Display error message]
+    E --> G[Navigate to dashboard]
+    F --> H[User stays on login page]
+```
+
+**حان الوقت لتجربته:**
+1. أنشئ حسابًا جديدًا للتأكد من أن كل شيء يعمل
+2. حاول تسجيل الدخول باستخدام نفس بيانات الاعتماد
+3. ألقِ نظرة على وحدة التحكم في المتصفح الخاص بك (F12) إذا كان هناك أي شيء يبدو غير صحيح
+4. تأكد من أنك تصل إلى لوحة التحكم بعد تسجيل الدخول بنجاح
+
+إذا كان هناك شيء لا يعمل، لا داعي للذعر! معظم المشاكل يمكن حلها بسهولة مثل الأخطاء الإملائية أو نسيان تشغيل خادم API.
+
+#### كلمة سريعة عن السحر عبر الأصل
+
+قد تتساءل: "كيف يتحدث تطبيق الويب الخاص بي إلى خادم API هذا بينما يعملان على منافذ مختلفة؟" سؤال رائع! هذا يتعلق بشيء يواجهه كل مطور ويب في النهاية.
+
+> 🔒 **أمان عبر الأصل**: المتصفحات تفرض "سياسة الأصل نفسه" لمنع الاتصالات غير المصرح بها بين المجالات المختلفة. مثل نظام نقاط التفتيش في البنتاغون، يتحققون من أن الاتصال مصرح به قبل السماح بنقل البيانات.
+> 
+**في إعدادنا:**
+- تطبيق الويب الخاص بك يعمل على `localhost:3000` (خادم التطوير)
+- خادم API الخاص بك يعمل على `localhost:5000` (الخادم الخلفي)
+- يتضمن خادم API [رؤوس CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) التي تسمح صراحةً بالاتصال من تطبيق الويب الخاص بك
+
+هذا التكوين يعكس تطوير العالم الحقيقي حيث تعمل التطبيقات الأمامية والخلفية عادةً على خوادم منفصلة.
+
+> 📚 **تعلم المزيد**: تعمق في واجهات برمجة التطبيقات وجلب البيانات مع هذا [الوحدة التعليمية الشاملة من Microsoft Learn حول واجهات برمجة التطبيقات](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon).
+
+## إحياء بياناتك في HTML
+
+الآن سنجعل البيانات التي تم جلبها مرئية للمستخدمين من خلال التلاعب بـ DOM. مثل عملية تطوير الصور في غرفة مظلمة، نحن نحول البيانات غير المرئية إلى شيء يمكن للمستخدمين رؤيته والتفاعل معه.
+التعامل مع DOM هو التقنية التي تحول صفحات الويب الثابتة إلى تطبيقات ديناميكية تقوم بتحديث محتواها بناءً على تفاعلات المستخدم واستجابات الخادم.
+
+### اختيار الأداة المناسبة للعمل
+
+عندما يتعلق الأمر بتحديث HTML باستخدام JavaScript، لديك عدة خيارات. فكر في هذه الخيارات كأدوات مختلفة في صندوق الأدوات - كل واحدة مثالية لمهام معينة:
+
+| الطريقة | ما هي ممتازة له | متى تستخدمها | مستوى الأمان |
+|--------|---------------------|----------------|--------------|
+| `textContent` | عرض بيانات المستخدم بأمان | في أي وقت تعرض فيه نصًا | ✅ موثوق للغاية |
+| `createElement()` + `append()` | إنشاء تخطيطات معقدة | إنشاء أقسام/قوائم جديدة | ✅ آمن تمامًا |
+| `innerHTML` | إعداد محتوى HTML | ⚠️ حاول تجنب هذه الطريقة | ❌ محفوفة بالمخاطر |
+
+#### الطريقة الآمنة لعرض النص: textContent
+
+خاصية [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) هي أفضل صديق لك عند عرض بيانات المستخدم. إنها مثل الحارس الشخصي لصفحتك على الويب - لا شيء ضار يمكن أن يمر:
+
+```javascript
+// The safe, reliable way to update text
+const balanceElement = document.getElementById('balance');
+balanceElement.textContent = account.balance;
+```
+
+**فوائد textContent:**
+- تعامل كل شيء كنص عادي (تمنع تنفيذ السكربتات)
+- تقوم بمسح المحتوى الموجود تلقائيًا
+- فعالة لتحديث النصوص البسيطة
+- توفر أمانًا مدمجًا ضد المحتوى الضار
+
+#### إنشاء عناصر HTML ديناميكية
+
+للحصول على محتوى أكثر تعقيدًا، اجمع بين [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) وطريقة [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append):
 
 ```javascript
 // Safe way to create new elements
@@ -248,28 +452,28 @@ container.append(transactionItem);
 ```
 
 **فهم هذا النهج:**
-- **إنشاء** عناصر DOM جديدة برمجياً
-- **الحفاظ** على التحكم الكامل في خصائص العناصر ومحتواها
-- **السماح** بإنشاء هياكل عناصر متداخلة ومعقدة
-- **الحفاظ** على الأمان بفصل الهيكل عن المحتوى
+- **ينشئ** عناصر DOM جديدة برمجيًا
+- **يحافظ** على التحكم الكامل في سمات العنصر ومحتواه
+- **يسمح** بإنشاء هياكل عناصر متداخلة ومعقدة
+- **يحافظ** على الأمان بفصل الهيكل عن المحتوى
 
-> ⚠️ **اعتبارات الأمان**: بينما يظهر [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) في العديد من الدروس، يمكنه تنفيذ النصوص البرمجية المضمنة. مثل بروتوكولات الأمان في CERN التي تمنع تنفيذ الأكواد غير المصرح بها، فإن استخدام `textContent` و `createElement` يوفر بدائل أكثر أمانًا.
+> ⚠️ **اعتبارات الأمان**: بينما تظهر خاصية [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) في العديد من الدروس، يمكنها تنفيذ السكربتات المضمنة. مثل بروتوكولات الأمان في CERN التي تمنع تنفيذ الأكواد غير المصرح بها، استخدام `textContent` و `createElement` يوفر بدائل أكثر أمانًا.
 > 
-**مخاطر استخدام innerHTML:**
-- تنفيذ أي علامات `<script>` في بيانات المستخدم
+**مخاطر innerHTML:**
+- تنفذ أي علامات `<script>` في بيانات المستخدم
 - عرضة لهجمات حقن الأكواد
-- خلق ثغرات أمنية محتملة
+- تخلق ثغرات أمنية محتملة
 - البدائل الأكثر أمانًا التي نستخدمها توفر نفس الوظائف
 
 ### جعل الأخطاء سهلة الفهم للمستخدمين
 
-حاليًا، تظهر أخطاء تسجيل الدخول فقط في وحدة التحكم بالمتصفح، مما يجعلها غير مرئية للمستخدمين. مثل الفرق بين التشخيصات الداخلية للطيار ونظام معلومات الركاب، نحتاج إلى إيصال المعلومات المهمة من خلال القناة المناسبة.
+حاليًا، تظهر أخطاء تسجيل الدخول فقط في وحدة التحكم بالمتصفح، مما يجعلها غير مرئية للمستخدمين. مثل الفرق بين التشخيصات الداخلية للطيار ونظام معلومات الركاب، نحتاج إلى التواصل بالمعلومات المهمة من خلال القناة المناسبة.
 
-تطبيق رسائل خطأ مرئية يوفر للمستخدمين ردود فعل فورية حول ما حدث وكيفية المتابعة.
+تنفيذ رسائل خطأ مرئية يوفر للمستخدمين ردود فعل فورية حول ما حدث وكيفية المتابعة.
 
 #### الخطوة 1: إضافة مكان لرسائل الخطأ
 
-أولاً، لنقم بإعطاء رسائل الخطأ مكانًا في HTML الخاص بك. أضف هذا مباشرةً قبل زر تسجيل الدخول حتى يراه المستخدمون بشكل طبيعي:
+أولاً، لنمنح رسائل الخطأ مكانًا في HTML الخاص بك. أضف هذا مباشرةً قبل زر تسجيل الدخول حتى يراه المستخدمون بشكل طبيعي:
 
 ```html
 <!-- This is where error messages will appear -->
@@ -278,14 +482,14 @@ container.append(transactionItem);
 ```
 
 **ما يحدث هنا:**
-- نحن ننشئ حاوية فارغة تبقى غير مرئية حتى الحاجة إليها
-- يتم وضعها في مكان ينظر إليه المستخدمون بشكل طبيعي بعد النقر على "تسجيل الدخول"
+- نقوم بإنشاء حاوية فارغة تبقى غير مرئية حتى الحاجة إليها
+- يتم وضعها في مكان طبيعي ينظر إليه المستخدمون بعد النقر على "تسجيل الدخول"
 - تلك الخاصية `role="alert"` هي لمسة لطيفة لقراء الشاشة - تخبر التكنولوجيا المساعدة "مرحبًا، هذا مهم!"
 - المعرف الفريد `id` يمنح JavaScript هدفًا سهلاً
 
 #### الخطوة 2: إنشاء وظيفة مساعدة مفيدة
 
-لنقم بإنشاء وظيفة صغيرة يمكنها تحديث نص أي عنصر. هذه واحدة من تلك الوظائف "اكتبها مرة، استخدمها في كل مكان" التي ستوفر لك الوقت:
+لنقم بإنشاء وظيفة صغيرة يمكنها تحديث نص أي عنصر. هذه واحدة من تلك الوظائف "اكتبها مرة واحدة، واستخدمها في كل مكان" التي ستوفر لك الوقت:
 
 ```javascript
 function updateElement(id, text) {
@@ -296,13 +500,13 @@ function updateElement(id, text) {
 
 **فوائد الوظيفة:**
 - واجهة بسيطة تتطلب فقط معرف العنصر ومحتوى النص
-- تحديد وتحديث عناصر DOM بأمان
-- نمط قابل لإعادة الاستخدام يقلل من تكرار الأكواد
-- الحفاظ على سلوك التحديث المتسق عبر التطبيق
+- تحدد وتحدث عناصر DOM بأمان
+- نمط قابل لإعادة الاستخدام يقلل من تكرار الكود
+- يحافظ على سلوك التحديث المتسق عبر التطبيق
 
 #### الخطوة 3: عرض الأخطاء حيث يمكن للمستخدمين رؤيتها
 
-الآن لنقم باستبدال رسالة وحدة التحكم المخفية بشيء يمكن للمستخدمين رؤيته بالفعل. قم بتحديث وظيفة تسجيل الدخول الخاصة بك:
+الآن لنستبدل رسالة وحدة التحكم المخفية بشيء يمكن للمستخدمين رؤيته بالفعل. قم بتحديث وظيفة تسجيل الدخول الخاصة بك:
 
 ```javascript
 // Instead of just logging to console, show the user what's wrong
@@ -317,13 +521,13 @@ if (data.error) {
 - يحصل المستخدمون على ردود فعل فورية وقابلة للتنفيذ
 - يبدأ تطبيقك في الشعور بالاحترافية والاهتمام
 
-الآن عند الاختبار باستخدام حساب غير صالح، سترى رسالة خطأ مفيدة مباشرة على الصفحة!
+الآن عند الاختبار باستخدام حساب غير صالح، سترى رسالة خطأ مفيدة مباشرةً على الصفحة!
 
 ![لقطة شاشة تظهر رسالة الخطأ أثناء تسجيل الدخول](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ar.png)
 
-#### الخطوة 4: أن تكون شاملاً مع إمكانية الوصول
+#### الخطوة 4: أن تكون شاملًا مع إمكانية الوصول
 
-هناك شيء رائع حول تلك الخاصية `role="alert"` التي أضفناها سابقًا - إنها ليست مجرد زخرفة! هذه الخاصية الصغيرة تخلق ما يسمى [منطقة حية](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) تعلن فورًا عن التغييرات لقراء الشاشة:
+هناك شيء رائع حول الخاصية `role="alert"` التي أضفناها سابقًا - إنها ليست مجرد زخرفة! هذه الخاصية الصغيرة تخلق ما يسمى [منطقة حية](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) التي تعلن التغييرات فورًا لقراء الشاشة:
 
 ```html
 <div id="loginError" role="alert"></div>
@@ -337,37 +541,50 @@ if (data.error) {
 
 لمسات صغيرة كهذه تميز المطورين الجيدين عن العظماء!
 
+### 🎯 مراجعة تعليمية: أنماط المصادقة
+
+**توقف وفكر**: لقد قمت للتو بتنفيذ تدفق مصادقة كامل. هذا نمط أساسي في تطوير الويب.
+
+**تقييم ذاتي سريع**:
+- هل يمكنك شرح لماذا نستخدم async/await لاستدعاءات API؟
+- ماذا سيحدث إذا نسينا وظيفة `encodeURIComponent()`؟
+- كيف يحسن التعامل مع الأخطاء تجربة المستخدم؟
+
+**اتصال بالعالم الحقيقي**: الأنماط التي تعلمتها هنا (جلب البيانات بشكل غير متزامن، التعامل مع الأخطاء، ردود فعل المستخدم) تُستخدم في كل تطبيق ويب رئيسي من منصات التواصل الاجتماعي إلى مواقع التجارة الإلكترونية. أنت تبني مهارات على مستوى الإنتاج!
+
+**سؤال التحدي**: كيف يمكنك تعديل نظام المصادقة هذا للتعامل مع أدوار المستخدم المتعددة (عميل، مدير، صراف)؟ فكر في هيكل البيانات والتغييرات المطلوبة في واجهة المستخدم.
+
 #### الخطوة 5: تطبيق نفس النمط على التسجيل
 
-للحفاظ على التناسق، قم بتطبيق معالجة الأخطاء نفسها في نموذج التسجيل الخاص بك:
+للحفاظ على التناسق، قم بتنفيذ نفس التعامل مع الأخطاء في نموذج التسجيل الخاص بك:
 
 1. **أضف** عنصر عرض الخطأ إلى HTML الخاص بالتسجيل:
 ```html
 <div id="registerError" role="alert"></div>
 ```
 
-2. **قم بتحديث** وظيفة التسجيل الخاصة بك لاستخدام نمط عرض الخطأ نفسه:
+2. **قم بتحديث** وظيفة التسجيل لاستخدام نفس نمط عرض الخطأ:
 ```javascript
 if (data.error) {
   return updateElement('registerError', data.error);
 }
 ```
 
-**فوائد معالجة الأخطاء المتسقة:**
-- **توفير** تجربة مستخدم موحدة عبر جميع النماذج
-- **تقليل** العبء المعرفي باستخدام أنماط مألوفة
-- **تبسيط** الصيانة باستخدام أكواد قابلة لإعادة الاستخدام
-- **ضمان** تلبية معايير إمكانية الوصول في جميع أنحاء التطبيق
+**فوائد التعامل المتسق مع الأخطاء:**
+- **يوفر** تجربة مستخدم موحدة عبر جميع النماذج
+- **يقلل** العبء المعرفي باستخدام أنماط مألوفة
+- **يبسط** الصيانة باستخدام كود قابل لإعادة الاستخدام
+- **يضمن** تلبية معايير إمكانية الوصول في جميع أنحاء التطبيق
 
-## إنشاء لوحة معلومات ديناميكية
+## إنشاء لوحة تحكم ديناميكية
 
-الآن سنحول لوحة المعلومات الثابتة الخاصة بك إلى واجهة ديناميكية تعرض بيانات الحساب الحقيقية. مثل الفرق بين جدول الرحلات المطبوع ولوحات المغادرة الحية في المطارات، نحن ننتقل من المعلومات الثابتة إلى العروض التفاعلية في الوقت الفعلي.
+الآن سنحول لوحة التحكم الثابتة الخاصة بك إلى واجهة ديناميكية تعرض بيانات الحساب الحقيقية. مثل الفرق بين جدول الرحلات المطبوع ولوحات المغادرة الحية في المطارات، نحن ننتقل من المعلومات الثابتة إلى العروض التفاعلية في الوقت الفعلي.
 
-باستخدام تقنيات التلاعب بـ DOM التي تعلمتها، سنقوم بإنشاء لوحة معلومات يتم تحديثها تلقائيًا بمعلومات الحساب الحالية.
+باستخدام تقنيات التعامل مع DOM التي تعلمتها، سنقوم بإنشاء لوحة تحكم يتم تحديثها تلقائيًا بمعلومات الحساب الحالية.
 
 ### التعرف على بياناتك
 
-قبل أن نبدأ البناء، لنلقي نظرة على نوع البيانات التي يرسلها الخادم الخاص بك. عندما يقوم شخص ما بتسجيل الدخول بنجاح، إليك كنز المعلومات الذي يمكنك العمل معه:
+قبل أن نبدأ في البناء، لنلقي نظرة على نوع البيانات التي يرسلها الخادم الخاص بك. عندما يقوم شخص ما بتسجيل الدخول بنجاح، إليك الكنز الذي تحصل عليه للعمل معه:
 
 ```json
 {
@@ -386,27 +603,43 @@ if (data.error) {
 **يوفر هيكل البيانات هذا:**
 - **`user`**: مثالي لتخصيص التجربة ("مرحبًا بعودتك، سارة!")
 - **`currency`**: يضمن عرض المبالغ المالية بشكل صحيح
-- **`description`**: اسم ودود للحساب
+- **`description`**: اسم ودي للحساب
 - **`balance`**: الرصيد الحالي المهم للغاية
 - **`transactions`**: سجل المعاملات الكامل بجميع التفاصيل
 
-كل ما تحتاجه لبناء لوحة معلومات مصرفية احترافية!
+كل ما تحتاجه لإنشاء لوحة تحكم مصرفية بمظهر احترافي!
+
+```mermaid
+flowchart TD
+    A[User Login] --> B[Fetch Account Data]
+    B --> C{Data Valid?}
+    C -->|Yes| D[Store in Global Variable]
+    C -->|No| E[Show Error Message]
+    D --> F[Navigate to Dashboard]
+    F --> G[Update UI Elements]
+    G --> H[Display Balance]
+    G --> I[Show Description]
+    G --> J[Render Transactions]
+    J --> K[Create Table Rows]
+    K --> L[Format Currency]
+    L --> M[User Sees Live Data]
+```
 
-> 💡 **نصيحة احترافية**: هل تريد رؤية لوحة المعلومات الخاصة بك تعمل على الفور؟ استخدم اسم المستخدم `test` عند تسجيل الدخول - يأتي محملاً مسبقًا ببيانات نموذجية حتى تتمكن من رؤية كل شيء يعمل دون الحاجة إلى إنشاء معاملات أولاً.
+> 💡 **نصيحة احترافية**: هل تريد رؤية لوحة التحكم الخاصة بك تعمل على الفور؟ استخدم اسم المستخدم `test` عند تسجيل الدخول - يأتي محملاً مسبقًا ببيانات نموذجية حتى تتمكن من رؤية كل شيء يعمل دون الحاجة إلى إنشاء معاملات أولاً.
 > 
 **لماذا الحساب التجريبي مفيد:**
 - يأتي مع بيانات نموذجية واقعية محملة مسبقًا
 - مثالي لرؤية كيفية عرض المعاملات
-- رائع لاختبار ميزات لوحة المعلومات الخاصة بك
-- يوفر عليك من إنشاء بيانات وهمية يدويًا
+- رائع لاختبار ميزات لوحة التحكم الخاصة بك
+- يوفر عليك عناء إنشاء بيانات وهمية يدويًا
 
-### إنشاء عناصر عرض لوحة المعلومات
+### إنشاء عناصر عرض لوحة التحكم
 
-لنقم ببناء واجهة لوحة المعلومات الخاصة بك خطوة بخطوة، بدءًا من معلومات ملخص الحساب ثم الانتقال إلى ميزات أكثر تعقيدًا مثل قوائم المعاملات.
+لنقم ببناء واجهة لوحة التحكم خطوة بخطوة، بدءًا من معلومات ملخص الحساب ثم الانتقال إلى ميزات أكثر تعقيدًا مثل قوائم المعاملات.
 
 #### الخطوة 1: تحديث هيكل HTML الخاص بك
 
-أولاً، استبدل قسم "الرصيد" الثابت بعناصر نائبة ديناميكية يمكن لبرمجيات JavaScript ملؤها:
+أولاً، استبدل قسم "الرصيد" الثابت بعناصر نائبة ديناميكية يمكن لـ JavaScript ملؤها:
 
 ```html
 <section>
@@ -414,23 +647,23 @@ if (data.error) {
 </section>
 ```
 
-بعد ذلك، أضف قسمًا لوصف الحساب. نظرًا لأن هذا يعمل كعنوان لمحتوى لوحة المعلومات، استخدم HTML دلالي:
+بعد ذلك، أضف قسمًا لوصف الحساب. بما أن هذا يعمل كعنوان لمحتوى لوحة التحكم، استخدم HTML دلالي:
 
 ```html
 <h2 id="description"></h2>
 ```
 
 **فهم هيكل HTML:**
-- **استخدام** عناصر `<span>` منفصلة للرصيد والعملة للتحكم الفردي
-- **تطبيق** معرفات فريدة لكل عنصر لاستهداف JavaScript
-- **اتباع** HTML دلالي باستخدام `<h2>` لوصف الحساب
-- **إنشاء** تسلسل منطقي لقراء الشاشة وتحسين محركات البحث
+- **يستخدم** عناصر `<span>` منفصلة للرصيد والعملة للتحكم الفردي
+- **يطبق** معرفات فريدة لكل عنصر لاستهداف JavaScript
+- **يتبع** HTML الدلالي باستخدام `<h2>` لوصف الحساب
+- **ينشئ** تسلسلًا منطقيًا لقراء الشاشة وتحسين محركات البحث
 
-> ✅ **رؤية إمكانية الوصول**: يعمل وصف الحساب كعنوان لمحتوى لوحة المعلومات، لذا يتم ترميزه دلاليًا كعنوان. تعرف على المزيد حول كيفية تأثير [هيكل العناوين](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) على إمكانية الوصول. هل يمكنك تحديد عناصر أخرى على صفحتك قد تستفيد من علامات العناوين؟
+> ✅ **رؤية إمكانية الوصول**: يعمل وصف الحساب كعنوان لمحتوى لوحة التحكم، لذا يتم ترميزه دلاليًا كعنوان. تعرف على المزيد حول كيفية تأثير [هيكل العناوين](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) على إمكانية الوصول. هل يمكنك تحديد عناصر أخرى على صفحتك قد تستفيد من علامات العناوين؟
 
-#### الخطوة 2: إنشاء وظيفة تحديث لوحة المعلومات
+#### الخطوة 2: إنشاء وظيفة تحديث لوحة التحكم
 
-الآن قم بإنشاء وظيفة تقوم بملء لوحة المعلومات الخاصة بك ببيانات الحساب الحقيقية:
+الآن قم بإنشاء وظيفة تقوم بملء لوحة التحكم ببيانات الحساب الحقيقية:
 
 ```javascript
 function updateDashboard() {
@@ -445,17 +678,17 @@ function updateDashboard() {
 ```
 
 **خطوة بخطوة، إليك ما تفعله هذه الوظيفة:**
-- **التحقق** من وجود بيانات الحساب قبل المتابعة
-- **إعادة توجيه** المستخدمين غير المصادقين إلى صفحة تسجيل الدخول
-- **تحديث** وصف الحساب باستخدام وظيفة `updateElement` القابلة لإعادة الاستخدام
-- **تنسيق** الرصيد ليظهر دائمًا برقمين عشريين
-- **عرض** رمز العملة المناسب
+- **تتحقق** من وجود بيانات الحساب قبل المتابعة
+- **تعيد توجيه** المستخدمين غير المصادقين إلى صفحة تسجيل الدخول
+- **تحدث** وصف الحساب باستخدام وظيفة `updateElement` القابلة لإعادة الاستخدام
+- **تنسق** الرصيد ليظهر دائمًا برقم عشريين
+- **تعرض** رمز العملة المناسب
 
-> 💰 **تنسيق الأموال**: تلك الطريقة [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) هي منقذ! إنها تضمن أن الرصيد يبدو دائمًا كأموال حقيقية - "75.00" بدلاً من مجرد "75". سيقدر المستخدمون رؤية تنسيق العملة المألوف.
+> 💰 **تنسيق الأموال**: تلك الطريقة [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) هي منقذ! إنها تضمن أن الرصيد يبدو دائمًا كأموال حقيقية - "75.00" بدلًا من مجرد "75". سيقدر المستخدمون رؤية تنسيق العملة المألوف.
 
-#### الخطوة 3: التأكد من تحديث لوحة المعلومات الخاصة بك
+#### الخطوة 3: التأكد من تحديث لوحة التحكم الخاصة بك
 
-لضمان تحديث لوحة المعلومات الخاصة بك ببيانات حالية في كل مرة يزور فيها شخص ما، نحتاج إلى الربط بنظام التنقل الخاص بك. إذا أكملت [مهمة الدرس 1](../1-template-route/assignment.md)، يجب أن يكون هذا مألوفًا. إذا لم يكن كذلك، لا تقلق - إليك ما تحتاجه:
+لضمان تحديث لوحة التحكم الخاصة بك مع البيانات الحالية في كل مرة يزورها شخص ما، نحتاج إلى الربط بنظام التنقل الخاص بك. إذا كنت قد أكملت [مهمة الدرس الأول](../1-template-route/assignment.md)، يجب أن يكون هذا مألوفًا. إذا لم يكن كذلك، لا تقلق - إليك ما تحتاجه:
 
 أضف هذا إلى نهاية وظيفة `updateRoute()` الخاصة بك:
 
@@ -465,7 +698,7 @@ if (typeof route.init === 'function') {
 }
 ```
 
-ثم قم بتحديث المسارات الخاصة بك لتضمين تهيئة لوحة المعلومات:
+ثم قم بتحديث مساراتك لتشمل تهيئة لوحة التحكم:
 
 ```javascript
 const routes = {
@@ -474,29 +707,47 @@ const routes = {
 };
 ```
 
-**ما يفعله هذا الإعداد الذكي:**
-- التحقق مما إذا كان للمسار كود تهيئة خاص
-- تشغيل هذا الكود تلقائيًا عند تحميل المسار
-- ضمان عرض لوحة المعلومات دائمًا بيانات حديثة وحالية
-- الحفاظ على منطق التوجيه نظيفًا ومنظمًا
+**ما الذي يفعله هذا الإعداد الذكي:**
+- يتحقق مما إذا كان للمسار كود تهيئة خاص
+- يشغل هذا الكود تلقائيًا عند تحميل المسار
+- يضمن أن لوحة التحكم الخاصة بك تعرض دائمًا بيانات جديدة وحالية
+- يحافظ على منطق التوجيه نظيفًا ومنظمًا
 
-#### اختبار لوحة المعلومات الخاصة بك
+#### اختبار لوحة التحكم الخاصة بك
 
-بعد تنفيذ هذه التغييرات، اختبر لوحة المعلومات الخاصة بك:
+بعد تنفيذ هذه التغييرات، اختبر لوحة التحكم الخاصة بك:
 
 1. **قم بتسجيل الدخول** باستخدام حساب تجريبي
-2. **تحقق** من إعادة توجيهك إلى لوحة المعلومات
-3. **تأكد** من أن وصف الحساب، الرصيد، والعملة يتم عرضهم بشكل صحيح
-4. **جرب تسجيل الخروج ثم تسجيل الدخول مرة أخرى** للتأكد من تحديث البيانات بشكل صحيح
+2. **تحقق** من أنك تم إعادة توجيهك إلى لوحة التحكم
+3. **تأكد** من أن وصف الحساب، الرصيد، ورمز العملة يتم عرضهم بشكل صحيح
+4. **حاول تسجيل الخروج ثم تسجيل الدخول مرة أخرى** للتأكد من تحديث البيانات بشكل صحيح
 
-يجب أن تعرض لوحة المعلومات الخاصة بك الآن معلومات الحساب الديناميكية التي يتم تحديثها بناءً على بيانات المستخدم المسجل!
+يجب أن تعرض لوحة التحكم الخاصة بك الآن معلومات الحساب الديناميكية التي يتم تحديثها بناءً على بيانات المستخدم المسجل!
 
-## بناء قوائم معاملات ذكية باستخدام القوالب
+## إنشاء قوائم معاملات ذكية باستخدام القوالب
 
 بدلاً من إنشاء HTML يدويًا لكل معاملة، سنستخدم القوالب لتوليد تنسيق متسق تلقائيًا. مثل المكونات الموحدة المستخدمة في تصنيع المركبات الفضائية، تضمن القوالب أن كل صف معاملة يتبع نفس الهيكل والمظهر.
 
 هذه التقنية تتوسع بكفاءة من عدد قليل من المعاملات إلى الآلاف، مع الحفاظ على الأداء والعرض المتسق.
 
+```mermaid
+graph LR
+    A[HTML Template] --> B[JavaScript Clone]
+    B --> C[Populate with Data]
+    C --> D[Add to Fragment]
+    D --> E[Batch Insert to DOM]
+    
+    subgraph "Performance Benefits"
+        F[Single DOM Update]
+        G[Consistent Formatting]
+        H[Reusable Pattern]
+    end
+    
+    E --> F
+    E --> G
+    E --> H
+```
+
 ```mermaid
 flowchart LR
     A[Transaction Data] --> B[HTML Template]
@@ -508,7 +759,7 @@ flowchart LR
 
 ### الخطوة 1: إنشاء قالب المعاملة
 
-أولاً، أضف قالبًا قابلاً لإعادة الاستخدام لصفوف المعاملات في HTML `<body>` الخاص بك:
+أولاً، أضف قالبًا قابلًا لإعادة الاستخدام لصفوف المعاملات في HTML `<body>`:
 
 ```html
 <template id="transaction">
@@ -521,10 +772,10 @@ flowchart LR
 ```
 
 **فهم قوالب HTML:**
-- **تعريف** الهيكل لصف جدول واحد
-- **البقاء** غير مرئي حتى يتم نسخه وملؤه باستخدام JavaScript
-- **تضمين** ثلاث خلايا للتاريخ، الوصف، والمبلغ
-- **توفير** نمط قابل لإعادة الاستخدام لتنسيق متسق
+- **تعرف** الهيكل لصف جدول واحد
+- **تبقى** غير مرئية حتى يتم نسخها وملؤها باستخدام JavaScript
+- **تتضمن** ثلاث خلايا للتاريخ، الوصف، والمبلغ
+- **توفر** نمطًا قابلاً لإعادة الاستخدام لتنسيق متسق
 
 ### الخطوة 2: تجهيز الجدول للمحتوى الديناميكي
 
@@ -534,10 +785,10 @@ flowchart LR
 <tbody id="transactions"></tbody>
 ```
 
-**ما يحققه هذا:**
-- **إنشاء** هدف واضح لإدخال صفوف المعاملات
-- **فصل** هيكل الجدول عن المحتوى الديناميكي
-- **تمكين** سهولة مسح وإعادة ملء بيانات المعاملات
+**ما الذي يحققه هذا:**
+- **ينشئ** هدفًا واضحًا لإدخال صفوف المعاملات
+- **يفصل** هيكل الجدول عن المحتوى الديناميكي
+- **يمكن** من مسح وإعادة ملء بيانات المعاملات بسهولة
 
 ### الخطوة 3: بناء وظيفة مصنع صف المعاملة
 
@@ -555,17 +806,17 @@ function createTransactionRow(transaction) {
 }
 ```
 
-**تفصيل هذه الوظيفة:**
-- **استرجاع** عنصر القالب بواسطة معرفه
-- **نسخ** محتوى القالب للتلاعب الآمن
-- **اختيار** صف الجدول داخل المحتوى المنسوخ
-- **ملء** كل خلية ببيانات المعاملة
-- **تنسيق** المبلغ ليظهر بأماكن عشرية صحيحة
-- **إرجاع** الصف المكتمل جاهز للإدخال
+**تفصيل وظيفة المصنع هذه:**
+- **تسترجع** عنصر القالب بواسطة معرفه
+- **تنسخ** محتوى القالب للتلاعب الآمن
+- **تحدد** صف الجدول داخل المحتوى المنسوخ
+- **تملأ** كل خلية ببيانات المعاملة
+- **تنسيق** المبلغ ليظهر بشكل عشري صحيح
+- **تعيد** الصف المكتمل جاهزًا للإدراج
 
 ### الخطوة 4: إنشاء صفوف معاملات متعددة بكفاءة
 
-أضف هذا الكود إلى وظيفة `updateDashboard()` الخاصة بك لعرض جميع المعاملات:
+أضف هذا الكود إلى وظيفة `updateDashboard()` لعرض جميع المعاملات:
 
 ```javascript
 const transactionsRows = document.createDocumentFragment();
@@ -577,17 +828,16 @@ updateElement('transactions', transactionsRows);
 ```
 
 **فهم هذا النهج الفعال:**
-- **إنشاء** مستند جزئي لتجميع عمليات DOM
-- **التكرار** عبر جميع المعاملات في بيانات الحساب
-- **إنشاء** صف لكل معاملة باستخدام وظيفة المصنع
-- **جمع** جميع الصفوف في المستند الجزئي قبل إضافتها إلى DOM
-- **تنفيذ** تحديث DOM واحد بدلاً من عمليات إدخال فردية متعددة
-
-> ⚡ **تحسين الأداء**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) يعمل مثل عملية التجميع في بوينغ - يتم تجهيز المكونات خارج الخط الرئيسي، ثم يتم تثبيتها كوحدة كاملة. هذا النهج التجميعي يقلل من إعادة تدفق DOM عن طريق تنفيذ إدخال واحد بدلاً من عمليات فردية متعددة.
+- **ينشئ** جزءًا من المستند لتجميع عمليات DOM
+- **يكرر** جميع المعاملات في بيانات الحساب
+- **ينشئ** صفًا لكل معاملة باستخدام وظيفة المصنع
+- **يجمع** جميع الصفوف في الجزء قبل إضافتها إلى DOM
+- **يجري** تحديثًا واحدًا لـ DOM بدلًا من إدخالات فردية متعددة
+> ⚡ **تحسين الأداء**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) يعمل مثل عملية التجميع في شركة بوينغ - يتم إعداد المكونات خارج الخط الرئيسي، ثم يتم تثبيتها كوحدة كاملة. هذا النهج التجميعي يقلل من إعادة تدفق DOM عن طريق إجراء إدخال واحد بدلاً من عمليات فردية متعددة.
 
 ### الخطوة 5: تحسين وظيفة التحديث للمحتوى المختلط
 
-وظيفة `updateElement()` الخاصة بك حاليًا تتعامل فقط مع محتوى النص. قم بتحديثها للعمل مع النصوص وعقد DOM:
+وظيفة `updateElement()` الخاصة بك حالياً تتعامل فقط مع محتوى النصوص. قم بتحديثها لتعمل مع النصوص وعقد DOM:
 
 ```javascript
 function updateElement(id, textOrNode) {
@@ -598,38 +848,104 @@ function updateElement(id, textOrNode) {
 ```
 
 **التحسينات الرئيسية في هذا التحديث:**
-- **مسح** المحتوى الحالي قبل إضافة محتوى جديد
-- **قبول** إما سلاسل نصية أو عقد DOM كمعلمات
+- **إزالة** المحتوى الحالي قبل إضافة محتوى جديد
+- **قبول** سلاسل النصوص أو عقد DOM كمعلمات
 - **استخدام** طريقة [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) للمرونة
 - **الحفاظ** على التوافق مع الاستخدام النصي الحالي
 
-### تجربة لوحة المعلومات الخاصة بك
+### تجربة لوحة التحكم الخاصة بك
 
-حان وقت الحقيقة! لنرى لوحة المعلومات الديناميكية الخاصة بك قيد العمل:
+حان وقت الحقيقة! دعنا نرى لوحة التحكم الديناميكية الخاصة بك قيد العمل:
 
-1. قم بتسجيل الدخول باستخدام حساب `test` (يحتوي على بيانات نموذجية جاهزة)
-2. انتقل إلى لوحة المعلومات الخاصة بك
+1. قم بتسجيل الدخول باستخدام حساب `test` (يحتوي على بيانات تجريبية جاهزة)
+2. انتقل إلى لوحة التحكم الخاصة بك
 3. تحقق من ظهور صفوف المعاملات بتنسيق صحيح
 4. تأكد من أن التواريخ، الأوصاف، والمبالغ تبدو جيدة
 
-إذا كان كل شيء يعمل، يجب أن ترى قائمة معاملات وظيفية بالكامل على لوحة المعلومات الخاصة بك! 🎉
+إذا كان كل شيء يعمل، يجب أن ترى قائمة معاملات وظيفية بالكامل على لوحة التحكم الخاصة بك! 🎉
 
-**ما أنجزته:**
-- بناء لوحة معلومات تتوسع مع أي كمية من البيانات
+**ما الذي أنجزته:**
+- بناء لوحة تحكم تتكيف مع أي كمية من البيانات
 - إنشاء قوالب قابلة لإعادة الاستخدام لتنسيق متسق
-- تنفيذ تقنيات تلاعب DOM بكفاءة
-- تطوير وظائف قابلة للمقارنة مع تطبيقات مصرفية إنتاجية
+- تنفيذ تقنيات فعالة لمعالجة DOM
+- تطوير وظائف تضاهي تطبيقات البنوك الإنتاجية
 
 لقد نجحت في تحويل صفحة ويب ثابتة إلى تطبيق ويب ديناميكي.
 
+### 🎯 مراجعة تعليمية: إنشاء محتوى ديناميكي
+
+**فهم الهيكلية**: لقد قمت بتنفيذ خط أنابيب بيانات إلى واجهة المستخدم يعكس الأنماط المستخدمة في أطر العمل مثل React، Vue، و Angular.
+
+**المفاهيم الرئيسية التي أتقنتها**:
+- **التنسيق القائم على القوالب**: إنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام
+- **مقاطع المستندات**: تحسين أداء DOM
+- **معالجة DOM الآمنة**: منع الثغرات الأمنية
+- **تحويل البيانات**: تحويل بيانات الخادم إلى واجهات المستخدم
+
+**صلة بالصناعة**: هذه التقنيات تشكل أساس أطر العمل الأمامية الحديثة. يعتمد DOM الافتراضي في React، ونظام القوالب في Vue، وهيكل المكونات في Angular على هذه المفاهيم الأساسية.
+
+**سؤال للتفكير**: كيف يمكنك توسيع هذا النظام للتعامل مع التحديثات في الوقت الفعلي (مثل ظهور معاملات جديدة تلقائياً)؟ فكر في WebSockets أو Server-Sent Events.
+
 ---
 
-## تحدي GitHub Copilot Agent 🚀
+## 📈 جدول زمني لإتقان إدارة البيانات
+
+```mermaid
+timeline
+    title Data-Driven Development Journey
+    
+    section Foundation Building
+        API Setup & Testing
+            : Understand client-server communication
+            : Master HTTP request/response cycle
+            : Learn debugging techniques
+    
+    section Authentication Mastery
+        Async Function Patterns
+            : Write clean async/await code
+            : Handle promises effectively
+            : Implement error boundaries
+        User Session Management
+            : Create global state patterns
+            : Build navigation guards
+            : Design user feedback systems
+    
+    section Dynamic UI Development
+        Safe DOM Manipulation
+            : Prevent XSS vulnerabilities
+            : Use textContent over innerHTML
+            : Create accessibility-friendly interfaces
+        Template Systems
+            : Build reusable UI components
+            : Optimize performance with fragments
+            : Scale to handle large datasets
+    
+    section Professional Patterns
+        Production-Ready Code
+            : Implement comprehensive error handling
+            : Follow security best practices
+            : Create maintainable architectures
+        Modern Web Standards
+            : Master Fetch API patterns
+            : Understand CORS configurations
+            : Build responsive, accessible UIs
+```
+
+**🎓 مرحلة التخرج**: لقد نجحت في بناء تطبيق ويب كامل يعتمد على البيانات باستخدام أنماط JavaScript الحديثة. هذه المهارات تُترجم مباشرة للعمل مع أطر العمل مثل React، Vue، أو Angular.
+
+**🔄 قدرات المستوى التالي**:
+- جاهز لاستكشاف أطر العمل الأمامية التي تعتمد على هذه المفاهيم
+- مستعد لتنفيذ ميزات الوقت الفعلي باستخدام WebSockets
+- مجهز لبناء تطبيقات ويب تقدمية مع قدرات العمل دون اتصال
+- تم إعداد الأساس لتعلم أنماط إدارة الحالة المتقدمة
+
+## تحدي وكيل GitHub Copilot 🚀
+
+استخدم وضع الوكيل لإكمال التحدي التالي:
 
-استخدم وضع Agent لإكمال التحدي التالي:
+**الوصف:** تحسين تطبيق البنك عن طريق تنفيذ ميزة البحث والتصفية للمعاملات التي تسمح للمستخدمين بالعثور على معاملات محددة حسب نطاق التاريخ، المبلغ، أو كلمات وصف المعاملة.
 
-**الوصف:** قم بتحسين التطبيق المصرفي من خلال تنفيذ ميزة البحث والتصفية للمعاملات التي تسمح للمستخدمين بالعثور على معاملات محددة حسب نطاق التاريخ، المبلغ، أو الوصف.
-**المهمة:** إنشاء وظيفة بحث لتطبيق البنك تتضمن: 1) نموذج بحث يحتوي على حقول إدخال لنطاق التاريخ (من/إلى)، الحد الأدنى/الأقصى للمبلغ، وكلمات مفتاحية لوصف المعاملة، 2) وظيفة `filterTransactions()` لتصفية مصفوفة account.transactions بناءً على معايير البحث، 3) تحديث وظيفة `updateDashboard()` لعرض النتائج المصفاة، و4) إضافة زر "مسح الفلاتر" لإعادة العرض إلى حالته الأصلية. استخدم طرق حديثة لمصفوفات JavaScript مثل `filter()` وتعامل مع الحالات الخاصة بمعايير البحث الفارغة.
+**المهمة:** قم بإنشاء وظيفة بحث لتطبيق البنك تتضمن: 1) نموذج بحث يحتوي على حقول إدخال لنطاق التاريخ (من/إلى)، الحد الأدنى/الأقصى للمبلغ، وكلمات وصف المعاملة، 2) وظيفة `filterTransactions()` التي تقوم بتصفية مصفوفة account.transactions بناءً على معايير البحث، 3) تحديث وظيفة `updateDashboard()` لعرض النتائج المصفاة، و 4) إضافة زر "إعادة تعيين الفلاتر" لإعادة العرض. استخدم طرق مصفوفة JavaScript الحديثة مثل `filter()` وتعامل مع الحالات الخاصة بمعايير البحث الفارغة.
 
 تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
@@ -637,27 +953,27 @@ function updateElement(id, textOrNode) {
 
 هل أنت مستعد لنقل تطبيق البنك الخاص بك إلى المستوى التالي؟ دعنا نجعله يبدو ويشعر وكأنه شيء ترغب فعلاً في استخدامه. إليك بعض الأفكار لتحفيز إبداعك:
 
-**اجعله جميلاً**: أضف تنسيقات CSS لتحويل لوحة التحكم الوظيفية إلى شيء جذاب بصريًا. فكر في خطوط نظيفة، تباعد جيد، وربما حتى بعض الرسوم المتحركة البسيطة.
+**اجعله جميلاً**: أضف تنسيق CSS لتحويل لوحة التحكم الوظيفية إلى شيء جذاب بصرياً. فكر في خطوط نظيفة، تباعد جيد، وربما حتى بعض الحركات البسيطة.
 
-**اجعله متجاوبًا**: حاول استخدام [استعلامات الوسائط](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) لإنشاء [تصميم متجاوب](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) يعمل بشكل رائع على الهواتف، الأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية. سيشكرك المستخدمون على ذلك!
+**اجعله متجاوباً**: حاول استخدام [استعلامات الوسائط](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) لإنشاء [تصميم متجاوب](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) يعمل بشكل رائع على الهواتف، الأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية. سيشكرك المستخدمون!
 
 **أضف بعض اللمسات**: فكر في تلوين المعاملات (الأخضر للدخل، الأحمر للنفقات)، إضافة أيقونات، أو إنشاء تأثيرات عند التمرير تجعل الواجهة تبدو تفاعلية.
 
-إليك كيف يمكن أن تبدو لوحة التحكم المصقولة:
+إليك ما يمكن أن تبدو عليه لوحة التحكم المصقولة:
 
-![لقطة شاشة لنتيجة مثال للوحة التحكم بعد التنسيق](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ar.png)
+![لقطة شاشة لنتيجة مثال لوحة التحكم بعد التنسيق](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ar.png)
 
-لا تشعر بأنك مضطر لمطابقة هذا بالضبط - استخدمه كمصدر إلهام واجعلها خاصة بك!
+لا تشعر بأن عليك مطابقة هذا بالضبط - استخدمه كمصدر إلهام واجعلها خاصة بك!
 
 ## اختبار ما بعد المحاضرة
 
 [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/46)
 
-## الواجب
+## المهمة
 
-[إعادة هيكلة وتعليق الكود الخاص بك](assignment.md)
+[إعادة صياغة وتعليق الكود الخاص بك](assignment.md)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/7-bank-project/4-state-management/README.md b/translations/ar/7-bank-project/4-state-management/README.md
index 41f80accc4..a04f4cc609 100644
--- a/translations/ar/7-bank-project/4-state-management/README.md
+++ b/translations/ar/7-bank-project/4-state-management/README.md
@@ -1,13 +1,67 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "32bd800759c3e943c38ad9ae6e1f51e0",
-  "translation_date": "2025-10-22T14:18:44+00:00",
+  "original_hash": "b807b09df716dc48a2b750835bf8e933",
+  "translation_date": "2025-11-03T12:38:18+00:00",
   "source_file": "7-bank-project/4-state-management/README.md",
   "language_code": "ar"
 }
 -->
-# بناء تطبيق مصرفي الجزء 4: مفاهيم إدارة الحالة
+# بناء تطبيق مصرفي الجزء الرابع: مفاهيم إدارة الحالة
+
+## ⚡ ما يمكنك القيام به في الدقائق الخمس القادمة
+
+**مسار البداية السريعة للمطورين المشغولين**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Diagnose state issues]
+    B --> C[Create central state object]
+    C --> D[Add updateState function]
+    D --> E[See immediate improvements]
+```
+
+- **الدقيقة الأولى**: اختبر مشكلة الحالة الحالية - قم بتسجيل الدخول، تحديث الصفحة، لاحظ تسجيل الخروج
+- **الدقيقة الثانية**: استبدل `let account = null` بـ `let state = { account: null }`
+- **الدقيقة الثالثة**: أنشئ وظيفة بسيطة `updateState()` لتحديثات محكومة
+- **الدقيقة الرابعة**: قم بتحديث وظيفة واحدة لاستخدام النمط الجديد
+- **الدقيقة الخامسة**: اختبر تحسين القدرة على التنبؤ وإمكانية تصحيح الأخطاء
+
+**اختبار تشخيص سريع**:
+```javascript
+// Before: Scattered state
+let account = null; // Lost on refresh!
+
+// After: Centralized state
+let state = Object.freeze({ account: null }); // Controlled and trackable!
+```
+
+**لماذا هذا مهم**: في غضون خمس دقائق، ستختبر التحول من إدارة حالة فوضوية إلى أنماط قابلة للتنبؤ والتصحيح. هذا هو الأساس الذي يجعل التطبيقات المعقدة قابلة للصيانة.
+
+## 🗺️ رحلتك التعليمية نحو إتقان إدارة الحالة
+
+```mermaid
+journey
+    title From Scattered State to Professional Architecture
+    section Diagnosing Problems
+      Identify state loss issues: 3: You
+      Understand scattered updates: 4: You
+      Recognize architecture needs: 6: You
+    section Centralizing Control
+      Create unified state object: 5: You
+      Implement controlled updates: 7: You
+      Add immutable patterns: 8: You
+    section Adding Persistence
+      Implement localStorage: 6: You
+      Handle serialization: 7: You
+      Create session continuity: 9: You
+    section Balancing Freshness
+      Address data staleness: 5: You
+      Build refresh systems: 8: You
+      Achieve optimal balance: 9: You
+```
+
+**وجهة رحلتك**: بنهاية هذا الدرس، ستكون قد أنشأت نظام إدارة حالة احترافي يتعامل مع الاستمرارية، تحديث البيانات، وتحديثات قابلة للتنبؤ - نفس الأنماط المستخدمة في التطبيقات الإنتاجية.
 
 ## اختبار ما قبل المحاضرة
 
@@ -15,38 +69,86 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## المقدمة
 
-إدارة الحالة تشبه نظام الملاحة في مركبة الفضاء فوياجر – عندما تسير الأمور بسلاسة، بالكاد تلاحظ وجودها. ولكن عندما تسوء الأمور، تصبح الفرق بين الوصول إلى الفضاء بين النجوم أو الانجراف في الفراغ الكوني. في تطوير الويب، تمثل الحالة كل ما يحتاجه تطبيقك لتذكره: حالة تسجيل دخول المستخدم، بيانات النماذج، تاريخ التنقل، وحالات الواجهة المؤقتة.
+إدارة الحالة تشبه نظام الملاحة في مركبة الفضاء فوياجر – عندما تسير الأمور بسلاسة، بالكاد تلاحظ وجودها. ولكن عندما تسوء الأمور، تصبح الفرق بين الوصول إلى الفضاء بين النجوم والانجراف في الفراغ الكوني. في تطوير الويب، تمثل الحالة كل ما يحتاجه تطبيقك لتذكره: حالة تسجيل دخول المستخدم، بيانات النماذج، تاريخ التنقل، وحالات الواجهة المؤقتة.
 
-مع تطور تطبيقك المصرفي من نموذج تسجيل دخول بسيط إلى تطبيق أكثر تعقيدًا، ربما واجهت بعض التحديات الشائعة. عند تحديث الصفحة، يتم تسجيل خروج المستخدمين بشكل غير متوقع. عند إغلاق المتصفح، تختفي كل التقدم. عند تصحيح مشكلة، تجد نفسك تبحث في وظائف متعددة تعدل نفس البيانات بطرق مختلفة.
+مع تطور تطبيقك المصرفي من نموذج تسجيل دخول بسيط إلى تطبيق أكثر تعقيدًا، ربما واجهت بعض التحديات الشائعة. قم بتحديث الصفحة وسيتم تسجيل خروج المستخدمين بشكل غير متوقع. أغلق المتصفح وستختفي كل التقدم. قم بتصحيح مشكلة وستجد نفسك تبحث في وظائف متعددة تعدل نفس البيانات بطرق مختلفة.
 
-هذه ليست علامات على البرمجة السيئة – إنها آلام النمو الطبيعية التي تحدث عندما تصل التطبيقات إلى مستوى معين من التعقيد. يواجه كل مطور هذه التحديات عندما تنتقل تطبيقاته من "إثبات المفهوم" إلى "جاهز للإنتاج".
+هذه ليست علامات على البرمجة السيئة – إنها آلام النمو الطبيعية التي تحدث عندما تصل التطبيقات إلى مستوى معين من التعقيد. يواجه كل مطور هذه التحديات عندما تنتقل تطبيقاتهم من "إثبات المفهوم" إلى "جاهز للإنتاج".
 
-في هذه الدرس، سنقوم بتنفيذ نظام إدارة حالة مركزي يحول تطبيقك المصرفي إلى تطبيق موثوق واحترافي. ستتعلم كيفية إدارة تدفقات البيانات بشكل متوقع، الحفاظ على جلسات المستخدم بشكل مناسب، وخلق تجربة مستخدم سلسة تتطلبها تطبيقات الويب الحديثة.
+في هذا الدرس، سنقوم بتنفيذ نظام إدارة حالة مركزي يحول تطبيقك المصرفي إلى تطبيق موثوق واحترافي. ستتعلم كيفية إدارة تدفقات البيانات بشكل قابل للتنبؤ، الحفاظ على جلسات المستخدم بشكل مناسب، وإنشاء تجربة مستخدم سلسة تتطلبها تطبيقات الويب الحديثة.
 
 ## المتطلبات الأساسية
 
-قبل الغوص في مفاهيم إدارة الحالة، ستحتاج إلى إعداد بيئة التطوير الخاصة بك بشكل صحيح ووضع أساس تطبيقك المصرفي. يعتمد هذا الدرس مباشرة على المفاهيم والكود من الأجزاء السابقة من هذه السلسلة.
+قبل الغوص في مفاهيم إدارة الحالة، ستحتاج إلى إعداد بيئة التطوير الخاصة بك ووضع أساس تطبيقك المصرفي. يعتمد هذا الدرس مباشرة على المفاهيم والكود من الأجزاء السابقة من هذه السلسلة.
 
-تأكد من توفر المكونات التالية قبل المتابعة:
+تأكد من أن لديك المكونات التالية جاهزة قبل المتابعة:
 
 **الإعداد المطلوب:**
 - أكمل درس [جلب البيانات](../3-data/README.md) - يجب أن يقوم تطبيقك بتحميل وعرض بيانات الحساب بنجاح
 - قم بتثبيت [Node.js](https://nodejs.org) على نظامك لتشغيل واجهة برمجة التطبيقات الخلفية
-- قم بتشغيل [واجهة برمجة التطبيقات للخادم](../api/README.md) محليًا لمعالجة عمليات بيانات الحساب
+- قم بتشغيل [واجهة برمجة التطبيقات للخادم](../api/README.md) محليًا للتعامل مع عمليات بيانات الحساب
 
 **اختبار بيئتك:**
 
-تحقق من تشغيل خادم واجهة برمجة التطبيقات بشكل صحيح عن طريق تنفيذ هذا الأمر في نافذة الأوامر:
+تحقق من تشغيل خادم واجهة برمجة التطبيقات بشكل صحيح عن طريق تنفيذ هذا الأمر في الطرفية:
 
 ```sh
 curl http://localhost:5000/api
 # -> should return "Bank API v1.0.0" as a result
 ```
 
-**ما الذي يفعله هذا الأمر:**
+**ما يفعله هذا الأمر:**
 - **يرسل** طلب GET إلى خادم واجهة برمجة التطبيقات المحلي
 - **يختبر** الاتصال ويتحقق من استجابة الخادم
-- **يعرض** معلومات إصدار واجهة برمجة التطبيقات إذا كان كل شيء يعمل بشكل صحيح
+- **يعيد** معلومات إصدار واجهة برمجة التطبيقات إذا كان كل شيء يعمل بشكل صحيح
+
+## 🧠 نظرة عامة على بنية إدارة الحالة
+
+```mermaid
+mindmap
+  root((State Management))
+    Current Problems
+      Session Loss
+        Page Refresh Issues
+        Browser Close Impact
+        Variable Reset Problems
+      Scattered Updates
+        Multiple Modification Points
+        Debugging Challenges
+        Unpredictable Behavior
+      Incomplete Cleanup
+        Logout State Issues
+        Memory Leaks
+        Security Concerns
+    Centralized Solutions
+      Unified State Object
+        Single Source of Truth
+        Predictable Structure
+        Scalable Foundation
+      Controlled Updates
+        Immutable Patterns
+        Object.freeze Usage
+        Function-Based Changes
+      State Tracking
+        History Management
+        Debug Visibility
+        Change Auditing
+    Persistence Strategies
+      localStorage Integration
+        Session Continuity
+        JSON Serialization
+        Automatic Sync
+      Data Freshness
+        Server Refresh
+        Stale Data Handling
+        Balance Optimization
+      Storage Optimization
+        Minimal Data
+        Performance Focus
+        Security Considerations
+```
+
+**المبدأ الأساسي**: توازن إدارة الحالة الاحترافية بين القابلية للتنبؤ، الاستمرارية، والأداء لإنشاء تجارب مستخدم موثوقة تتوسع من التفاعلات البسيطة إلى تدفقات العمل المعقدة للتطبيق.
 
 ---
 
@@ -61,9 +163,9 @@ curl http://localhost:5000/api
 2. قم بتحديث صفحة المتصفح
 3. لاحظ ما يحدث لحالة تسجيل الدخول الخاصة بك
 
-إذا تمت إعادة توجيهك إلى شاشة تسجيل الدخول، فقد اكتشفت مشكلة كلاسيكية في استمرارية الحالة. يحدث هذا السلوك لأن تنفيذنا الحالي يخزن بيانات المستخدم في متغيرات JavaScript التي يتم إعادة تعيينها مع كل تحميل للصفحة.
+إذا تمت إعادة توجيهك إلى شاشة تسجيل الدخول، فقد اكتشفت مشكلة استمرارية الحالة الكلاسيكية. يحدث هذا السلوك لأن تنفيذنا الحالي يخزن بيانات المستخدم في متغيرات JavaScript التي يتم إعادة تعيينها مع كل تحميل للصفحة.
 
-**مشاكل التنفيذ الحالية:**
+**مشاكل التنفيذ الحالي:**
 
 المتغير البسيط `account` من [الدرس السابق](../3-data/README.md) يخلق ثلاث مشاكل كبيرة تؤثر على تجربة المستخدم وصيانة الكود:
 
@@ -77,30 +179,56 @@ curl http://localhost:5000/api
 
 مثل تصميم تيتانيك المقسم الذي بدا قويًا حتى غمرت المياه عدة أقسام في وقت واحد، فإن إصلاح هذه المشاكل بشكل فردي لن يعالج المشكلة المعمارية الأساسية. نحن بحاجة إلى حل شامل لإدارة الحالة.
 
-> 💡 **ما الذي نحاول تحقيقه هنا؟**
+> 💡 **ما الذي نحاول تحقيقه هنا بالفعل؟**
 
-[إدارة الحالة](https://en.wikipedia.org/wiki/State_management) تتعلق بحل لغزين أساسيين:
+[إدارة الحالة](https://en.wikipedia.org/wiki/State_management) تتعلق حقًا بحل لغزين أساسيين:
 
 1. **أين بياناتي؟**: تتبع المعلومات التي لدينا ومن أين تأتي
-2. **هل الجميع على نفس الصفحة؟**: التأكد من أن ما يراه المستخدمون يتطابق مع ما يحدث فعليًا
+2. **هل الجميع على نفس الصفحة؟**: التأكد من أن ما يراه المستخدمون يتطابق مع ما يحدث بالفعل
 
-**خطة العمل لدينا:**
+**خطة لعبتنا:**
 
-بدلاً من مطاردة المشاكل، سنقوم بإنشاء نظام **إدارة حالة مركزي**. فكر فيه كوجود شخص منظم للغاية مسؤول عن كل الأمور المهمة:
+بدلاً من مطاردة ذيولنا، سنقوم بإنشاء نظام **إدارة حالة مركزي**. فكر في الأمر كأن لديك شخصًا منظمًا جدًا مسؤولًا عن كل الأمور المهمة:
 
 ![مخطط يوضح تدفقات البيانات بين HTML، إجراءات المستخدم والحالة](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ar.png)
 
+```mermaid
+flowchart TD
+    A[User Action] --> B[Event Handler]
+    B --> C[updateState Function]
+    C --> D{State Validation}
+    D -->|Valid| E[Create New State]
+    D -->|Invalid| F[Error Handling]
+    E --> G[Object.freeze]
+    G --> H[Update localStorage]
+    H --> I[Trigger UI Update]
+    I --> J[User Sees Changes]
+    F --> K[User Sees Error]
+    
+    subgraph "State Management Layer"
+        C
+        E
+        G
+    end
+    
+    subgraph "Persistence Layer"
+        H
+        L[localStorage]
+        H -.-> L
+    end
+```
+
 **فهم تدفق البيانات هذا:**
-- **يركز** جميع حالات التطبيق في مكان واحد
+- **مركزي** جميع حالات التطبيق في مكان واحد
 - **يوجه** جميع تغييرات الحالة من خلال وظائف محكومة
-- **يضمن** تزامن واجهة المستخدم مع الحالة الحالية
+- **يضمن** أن تظل واجهة المستخدم متزامنة مع الحالة الحالية
 - **يوفر** نمطًا واضحًا وقابلًا للتنبؤ لإدارة البيانات
 
 > 💡 **رؤية احترافية**: يركز هذا الدرس على المفاهيم الأساسية. بالنسبة للتطبيقات المعقدة، توفر مكتبات مثل [Redux](https://redux.js.org) ميزات إدارة حالة أكثر تقدمًا. فهم هذه المبادئ الأساسية سيساعدك على إتقان أي مكتبة لإدارة الحالة.
 
-> ⚠️ **موضوع متقدم**: لن نغطي التحديثات التلقائية لواجهة المستخدم التي يتم تشغيلها بواسطة تغييرات الحالة، حيث يتضمن ذلك مفاهيم [البرمجة التفاعلية](https://en.wikipedia.org/wiki/Reactive_programming). اعتبر هذا خطوة ممتازة تالية في رحلة تعلمك!
+> ⚠️ **موضوع متقدم**: لن نغطي التحديثات التلقائية للواجهة التي يتم تشغيلها بواسطة تغييرات الحالة، حيث يتضمن ذلك مفاهيم [البرمجة التفاعلية](https://en.wikipedia.org/wiki/Reactive_programming). اعتبر هذا خطوة ممتازة تالية لرحلتك التعليمية!
 
-### المهمة: هيكلة الحالة المركزية
+### المهمة: مركزية هيكل الحالة
 
 لنبدأ بتحويل إدارة الحالة المتفرقة إلى نظام مركزي. هذه الخطوة الأولى تؤسس الأساس لجميع التحسينات التي تليها.
 
@@ -120,8 +248,8 @@ let state = {
 };
 ```
 
-**لماذا هذا التغيير مهم:**
-- **يركز** جميع بيانات التطبيق في مكان واحد
+**لماذا يهم هذا التغيير:**
+- **مركزي** جميع بيانات التطبيق في مكان واحد
 - **يجهز** الهيكل لإضافة المزيد من خصائص الحالة لاحقًا
 - **يخلق** حدودًا واضحة بين الحالة والمتغيرات الأخرى
 - **يؤسس** نمطًا يتوسع مع نمو تطبيقك
@@ -147,34 +275,47 @@ const account = state.account;
 
 **ما الذي تحققه هذه التحديثات:**
 - **يحافظ** على الوظائف الحالية مع تحسين الهيكل
-- **يجهز** الكود لإدارة حالة أكثر تطورًا
+- **يجهز** الكود الخاص بك لإدارة حالة أكثر تطورًا
 - **يخلق** أنماطًا متسقة للوصول إلى بيانات الحالة
 - **يؤسس** الأساس لتحديثات الحالة المركزية
 
-> 💡 **ملاحظة**: هذا التغيير لا يحل مشاكلنا فورًا، لكنه يخلق الأساس الضروري للتحسينات القوية القادمة!
+> 💡 **ملاحظة**: هذا التغيير لا يحل مشاكلنا على الفور، لكنه يخلق الأساس الضروري للتحسينات القوية القادمة!
+
+### 🎯 التحقق التربوي: مبادئ المركزية
+
+**توقف وتأمل**: لقد قمت للتو بتنفيذ أساس إدارة الحالة المركزية. هذه خطوة معمارية حاسمة.
+
+**تقييم ذاتي سريع**:
+- هل يمكنك شرح لماذا يعتبر مركزية الحالة في كائن واحد أفضل من المتغيرات المتفرقة؟
+- ماذا سيحدث إذا نسيت تحديث وظيفة لاستخدام `state.account`؟
+- كيف يجهز هذا النمط الكود الخاص بك لميزات أكثر تقدمًا؟
+
+**اتصال بالعالم الحقيقي**: النمط المركزي الذي تعلمته هو الأساس للأطر الحديثة مثل Redux، Vuex، وReact Context. أنت تبني نفس التفكير المعماري المستخدم في التطبيقات الكبرى.
+
+**سؤال التحدي**: إذا كنت بحاجة إلى إضافة تفضيلات المستخدم (مثل السمة، اللغة) إلى تطبيقك، أين ستضيفها في هيكل الحالة؟ كيف يمكن أن يتوسع هذا؟
 
 ## تنفيذ تحديثات الحالة المحكومة
 
-مع تركيز حالتنا، الخطوة التالية تتضمن إنشاء آليات محكومة لتعديلات البيانات. هذا النهج يضمن تغييرات حالة متوقعة وتصحيحًا أسهل.
+مع مركزية حالتنا، تتضمن الخطوة التالية إنشاء آليات محكومة لتعديلات البيانات. يضمن هذا النهج تغييرات حالة قابلة للتنبؤ وسهولة التصحيح.
 
 المبدأ الأساسي يشبه التحكم في حركة الطيران: بدلاً من السماح للوظائف المتعددة بتعديل الحالة بشكل مستقل، سنوجه جميع التغييرات من خلال وظيفة واحدة محكومة. يوفر هذا النمط إشرافًا واضحًا على متى وكيف تحدث تغييرات البيانات.
 
 **إدارة الحالة غير القابلة للتغيير:**
 
-سنعامل كائن `state` الخاص بنا ككائن [*غير قابل للتغيير*](https://en.wikipedia.org/wiki/Immutable_object)، مما يعني أننا لن نعدله مباشرة. بدلاً من ذلك، كل تغيير ينشئ كائن حالة جديدًا مع البيانات المحدثة.
+سنعامل كائن `state` الخاص بنا ككائن [*غير قابل للتغيير*](https://en.wikipedia.org/wiki/Immutable_object)، مما يعني أننا لن نقوم بتعديله مباشرة. بدلاً من ذلك، كل تغيير ينشئ كائن حالة جديدًا مع البيانات المحدثة.
 
-على الرغم من أن هذا النهج قد يبدو غير فعال مقارنة بالتعديلات المباشرة، إلا أنه يوفر فوائد كبيرة للتصحيح، الاختبار، والحفاظ على توقعات التطبيق.
+على الرغم من أن هذا النهج قد يبدو غير فعال في البداية مقارنة بالتعديلات المباشرة، إلا أنه يوفر مزايا كبيرة للتصحيح، الاختبار، والحفاظ على قابلية التنبؤ بالتطبيق.
 
 **فوائد إدارة الحالة غير القابلة للتغيير:**
 
 | الفائدة | الوصف | التأثير |
-|---------|-------|---------|
-| **التوقعية** | تحدث التغييرات فقط من خلال وظائف محكومة | أسهل للتصحيح والاختبار |
-| **تتبع التاريخ** | كل تغيير حالة ينشئ كائنًا جديدًا | يتيح وظيفة التراجع/الإعادة |
+|---------|-------------|--------|
+| **القابلية للتنبؤ** | تحدث التغييرات فقط من خلال وظائف محكومة | أسهل للتصحيح والاختبار |
+| **تتبع التاريخ** | كل تغيير في الحالة ينشئ كائنًا جديدًا | يمكن التراجع/الإعادة |
 | **منع الآثار الجانبية** | لا تعديلات عرضية | يمنع الأخطاء الغامضة |
-| **تحسين الأداء** | سهل اكتشاف متى تغيرت الحالة فعليًا | يتيح تحديثات واجهة مستخدم فعالة |
+| **تحسين الأداء** | سهل اكتشاف متى تغيرت الحالة بالفعل | يتيح تحديثات واجهة المستخدم بكفاءة |
 
-**عدم القابلية للتغيير في JavaScript باستخدام `Object.freeze()`:**
+**عدم قابلية التغيير في JavaScript باستخدام `Object.freeze()`:**
 
 يوفر JavaScript [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) لمنع تعديلات الكائن:
 
@@ -189,7 +330,27 @@ const immutableState = Object.freeze({ account: userData });
 - **يضمن** أن تغييرات الحالة يجب أن تمر عبر وظائف محكومة
 - **يخلق** عقدًا واضحًا لكيفية تحديث الحالة
 
-> 💡 **استكشاف عميق**: تعرف على الفرق بين الكائنات غير القابلة للتغيير *السطحية* و *العميقة* في [وثائق MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze). فهم هذا التمييز ضروري للهياكل المعقدة للحالة.
+> 💡 **استكشاف عميق**: تعرف على الفرق بين الكائنات غير القابلة للتغيير *السطحية* و*العميقة* في [وثائق MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze). فهم هذا التمييز ضروري للهياكل المعقدة للحالة.
+
+```mermaid
+stateDiagram-v2
+    [*] --> StateV1: Initial State
+    StateV1 --> StateV2: updateState('account', newData)
+    StateV2 --> StateV3: updateState('account', anotherUpdate)
+    StateV3 --> StateV4: updateState('preferences', userSettings)
+    
+    note right of StateV1
+        Object.freeze()
+        Immutable
+        Debuggable
+    end note
+    
+    note right of StateV2
+        New object created
+        Previous state preserved
+        Predictable changes
+    end note
+```
 
 ### المهمة
 
@@ -204,7 +365,7 @@ function updateState(property, newData) {
 }
 ```
 
-في هذه الوظيفة، نقوم بإنشاء كائن حالة جديد وننسخ البيانات من الحالة السابقة باستخدام [عامل الانتشار (`...`)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). ثم نقوم بتجاوز خاصية معينة من كائن الحالة بالبيانات الجديدة باستخدام [ترميز الأقواس](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` للتعيين. وأخيرًا، نقوم بتجميد الكائن لمنع التعديلات باستخدام `Object.freeze()`. لدينا فقط خاصية `account` مخزنة في الحالة حاليًا، ولكن مع هذا النهج يمكنك إضافة العديد من الخصائص كما تحتاج في الحالة.
+في هذه الوظيفة، نقوم بإنشاء كائن حالة جديد وننسخ البيانات من الحالة السابقة باستخدام [عامل الانتشار (`...`)](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). ثم نقوم بتجاوز خاصية معينة من كائن الحالة بالبيانات الجديدة باستخدام [ترميز الأقواس](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` للتعيين. وأخيرًا، نقوم بتجميد الكائن لمنع التعديلات باستخدام `Object.freeze()`. لدينا فقط خاصية `account` مخزنة في الحالة الآن، ولكن مع هذا النهج يمكنك إضافة العديد من الخصائص كما تحتاج في الحالة.
 
 سنقوم أيضًا بتحديث تهيئة `state` للتأكد من أن الحالة الأولية مجمدة أيضًا:
 
@@ -214,7 +375,7 @@ let state = Object.freeze({
 });
 ```
 
-بعد ذلك، قم بتحديث وظيفة `register` عن طريق استبدال تعيين `state.account = result;` بـ:
+بعد ذلك، قم بتحديث وظيفة `register` عن طريق استبدال التعيين `state.account = result;` بـ:
 
 ```js
 updateState('account', result);
@@ -237,27 +398,27 @@ function logout() {
 }
 ```
 
-في `updateDashboard()`، استبدل إعادة التوجيه `return navigate('/login');` بـ `return logout();`
+في `updateDashboard()`، استبدل إعادة التوجيه `return navigate('/login');` بـ `return logout()`;
 
 جرب تسجيل حساب جديد، تسجيل الخروج ثم تسجيل الدخول مرة أخرى للتحقق من أن كل شيء لا يزال يعمل بشكل صحيح.
 
-> نصيحة: يمكنك الاطلاع على جميع تغييرات الحالة عن طريق إضافة `console.log(state)` في أسفل `updateState()` وفتح وحدة التحكم في أدوات تطوير المتصفح.
+> نصيحة: يمكنك إلقاء نظرة على جميع تغييرات الحالة عن طريق إضافة `console.log(state)` في أسفل `updateState()` وفتح وحدة التحكم في أدوات تطوير المتصفح.
 
 ## تنفيذ استمرارية البيانات
 
-تتطلب مشكلة فقدان الجلسة التي حددناها سابقًا حلًا للاستمرارية يحافظ على حالة المستخدم عبر جلسات المتصفح. هذا يحول تطبيقنا من تجربة مؤقتة إلى أداة موثوقة واحترافية.
+تتطلب مشكلة فقدان الجلسة التي حددناها سابقًا حلاً للاستمرارية يحافظ على حالة المستخدم عبر جلسات المتصفح. هذا يحول تطبيقنا من تجربة مؤقتة إلى أداة موثوقة واحترافية.
 
-فكر في كيفية احتفاظ الساعات الذرية بالوقت الدقيق حتى أثناء انقطاع التيار الكهربائي عن طريق تخزين الحالة الحرجة في ذاكرة غير متطايرة. وبالمثل، تحتاج تطبيقات الويب إلى آليات تخزين مستمرة للحفاظ على بيانات المستخدم الأساسية عبر جلسات المتصفح وتحديثات الصفحة.
+فكر في كيفية احتفاظ الساعات الذرية بالوقت الدقيق حتى أثناء انقطاع الطاقة عن طريق تخزين الحالة الحرجة في ذاكرة غير متطايرة. وبالمثل، تحتاج تطبيقات الويب إلى آليات تخزين مستمرة للحفاظ على بيانات المستخدم الأساسية عبر جلسات المتصفح وتحديثات الصفحة.
 
 **أسئلة استراتيجية لاستمرارية البيانات:**
 
 قبل تنفيذ الاستمرارية، فكر في هذه العوامل الحرجة:
 
 | السؤال | سياق التطبيق المصرفي | تأثير القرار |
-|--------|-----------------------|--------------|
+|----------|-------------------|----------------|
 | **هل البيانات حساسة؟** | رصيد الحساب، تاريخ المعاملات | اختر طرق تخزين آمنة |
-| **كم يجب أن تستمر؟** | حالة تسجيل الدخول مقابل تفضيلات واجهة المستخدم المؤقتة | اختر مدة التخزين المناسبة |
-| **هل يحتاجها الخادم؟** | رموز المصادقة مقابل إعدادات واجهة المستخدم | حدد متطلبات المشاركة |
+| **كم يجب أن يستمر؟** | حالة تسجيل الدخول مقابل تفضيلات واجهة المستخدم المؤقتة | اختر مدة التخزين المناسبة |
+| **هل يحتاج الخادم إليها؟** | رموز المصادقة مقابل إعدادات واجهة المستخدم | حدد متطلبات المشاركة |
 
 **خيارات تخزين المتصفح:**
 
@@ -265,25 +426,25 @@ function logout() {
 
 **واجهات برمجة التطبيقات الأساسية للتخزين:**
 
-1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: تخزين [المفتاح/القيمة](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) المستمر
-   - **يستمر** البيانات عبر جلسات المتصفح إلى أجل غير مسمى  
+1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: تخزين دائم [مفتاح/قيمة](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
+   - **يحتفظ** بالبيانات عبر جلسات المتصفح إلى أجل غير مسمى  
    - **يبقى** بعد إعادة تشغيل المتصفح وإعادة تشغيل الكمبيوتر
    - **محدد** لنطاق موقع الويب المحدد
    - **مثالي** لتفضيلات المستخدم وحالات تسجيل الدخول
 
-2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: تخزين الجلسة المؤقت
-   - **يعمل** بشكل مشابه لـ localStorage أثناء الجلسات النشطة
-   - **يمسح** تلقائيًا عند إغلاق علامة تبويب المتصفح
+2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: تخزين مؤقت للجلسة
+   - **يعمل** بنفس طريقة localStorage أثناء الجلسات النشطة
+   - **يُمسح** تلقائيًا عند إغلاق علامة تبويب المتصفح
    - **مثالي** للبيانات المؤقتة التي لا يجب أن تستمر
 
-3. **[كوكيز HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: تخزين مشترك مع الخادم
-   - **يتم إرسالها** تلقائيًا مع كل طلب للخادم
+3. **[ملفات تعريف الارتباط HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: تخزين مشترك مع الخادم
+   - **يُرسل تلقائيًا** مع كل طلب للخادم
    - **مثالي** لـ [رموز المصادقة](https://en.wikipedia.org/wiki/Authentication)
-   - **محدودة** الحجم ويمكن أن تؤثر على الأداء
+   - **محدود** الحجم ويمكن أن يؤثر على الأداء
 
 **متطلبات تسلسل البيانات:**
 
-كل من `localStorage` و `sessionStorage` يخزن فقط [سلاسل النصوص](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String):
+يخزن كل من `localStorage` و`sessionStorage` فقط [سلاسل نصية](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String):
 
 ```js
 // Convert objects to JSON strings for storage
@@ -297,13 +458,32 @@ const savedAccount = JSON.parse(localStorage.getItem('account'));
 **فهم التسلسل:**
 - **يحول** كائنات JavaScript إلى سلاسل JSON باستخدام [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
 - **يعيد بناء** الكائنات من JSON باستخدام [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
-- **يتعامل** تلقائيًا مع الكائنات والمصفوفات المتداخلة المعقدة
-- **يفشل** مع الوظائف، القيم غير المعرفة، والمرجع الدائري
-> 💡 **خيار متقدم**: بالنسبة للتطبيقات المعقدة التي تعمل دون اتصال مع مجموعات بيانات كبيرة، يمكن النظر في استخدام [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). يوفر قاعدة بيانات كاملة على جانب العميل ولكنه يتطلب تنفيذًا أكثر تعقيدًا.
+- **يتعامل** تلقائيًا مع الكائنات المتداخلة والمصفوفات المعقدة
+- **يفشل** مع الوظائف والقيم غير المعرفة والمرجع الدائري
+
+> 💡 **خيار متقدم**: بالنسبة للتطبيقات غير المتصلة بالإنترنت التي تحتوي على مجموعات بيانات كبيرة، فكر في استخدام واجهة برمجة التطبيقات [`IndexedDB`](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). توفر قاعدة بيانات كاملة على جانب العميل ولكن تتطلب تنفيذًا أكثر تعقيدًا.
+
+```mermaid
+quadrantChart
+    title Browser Storage Options
+    x-axis Low Complexity --> High Complexity
+    y-axis Short Duration --> Long Duration
+    
+    quadrant-1 Professional Tools
+    quadrant-2 Simple Persistence
+    quadrant-3 Temporary Storage
+    quadrant-4 Advanced Systems
+    
+    localStorage: [0.3, 0.8]
+    sessionStorage: [0.2, 0.2]
+    HTTP Cookies: [0.6, 0.7]
+    IndexedDB: [0.9, 0.9]
+    Memory Variables: [0.1, 0.1]
+```
 
 ### المهمة: تنفيذ تخزين دائم باستخدام localStorage
 
-سنقوم بتنفيذ تخزين دائم بحيث يبقى المستخدمون مسجلين الدخول حتى يقوموا بتسجيل الخروج بشكل صريح. سنستخدم `localStorage` لتخزين بيانات الحساب عبر جلسات المتصفح.
+لنقم بتنفيذ تخزين دائم بحيث يبقى المستخدمون مسجلين الدخول حتى يقوموا بتسجيل الخروج بشكل صريح. سنستخدم `localStorage` لتخزين بيانات الحساب عبر جلسات المتصفح.
 
 **الخطوة 1: تعريف إعدادات التخزين**
 
@@ -312,10 +492,10 @@ const storageKey = 'savedAccount';
 ```
 
 **ما الذي يوفره هذا الثابت:**
-- **إنشاء** معرف ثابت لبياناتنا المخزنة
-- **منع** الأخطاء الإملائية في مراجع مفاتيح التخزين
-- **تسهيل** تغيير مفتاح التخزين إذا لزم الأمر
-- **اتباع** أفضل الممارسات لكتابة كود قابل للصيانة
+- **ينشئ** معرفًا ثابتًا للبيانات المخزنة
+- **يمنع** الأخطاء الإملائية في مراجع مفتاح التخزين
+- **يجعل** من السهل تغيير مفتاح التخزين إذا لزم الأمر
+- **يتبع** أفضل الممارسات لكتابة كود قابل للصيانة
 
 **الخطوة 2: إضافة التخزين التلقائي**
 
@@ -326,12 +506,12 @@ localStorage.setItem(storageKey, JSON.stringify(state.account));
 ```
 
 **تفصيل ما يحدث هنا:**
-- **تحويل** كائن الحساب إلى سلسلة JSON للتخزين
-- **حفظ** البيانات باستخدام مفتاح التخزين الثابت
-- **تنفيذ** تلقائيًا عند حدوث تغييرات في الحالة
-- **ضمان** أن البيانات المخزنة متزامنة دائمًا مع الحالة الحالية
+- **يحول** كائن الحساب إلى سلسلة JSON للتخزين
+- **يحفظ** البيانات باستخدام مفتاح التخزين الثابت
+- **يُنفذ** تلقائيًا عند حدوث تغييرات في الحالة
+- **يضمن** أن البيانات المخزنة متزامنة دائمًا مع الحالة الحالية
 
-> 💡 **فائدة معمارية**: لأننا قمنا بتجميع جميع تحديثات الحالة من خلال `updateState()`، فإن إضافة التخزين استغرق سطرًا واحدًا فقط من الكود. هذا يوضح قوة القرارات المعمارية الجيدة!
+> 💡 **فائدة معمارية**: نظرًا لأننا قمنا بتجميع جميع تحديثات الحالة من خلال `updateState()`، فإن إضافة التخزين استغرق سطرًا واحدًا فقط من الكود. هذا يوضح قوة القرارات المعمارية الجيدة!
 
 **الخطوة 3: استعادة الحالة عند تحميل التطبيق**
 
@@ -353,11 +533,11 @@ init();
 ```
 
 **فهم عملية التهيئة:**
-- **استرجاع** أي بيانات حساب محفوظة مسبقًا من localStorage
-- **تحليل** سلسلة JSON مرة أخرى إلى كائن JavaScript
-- **تحديث** الحالة باستخدام وظيفة التحديث المُدارة
-- **استعادة** جلسة المستخدم تلقائيًا عند تحميل الصفحة
-- **تنفيذ** قبل تحديث المسارات لضمان توفر الحالة
+- **يسترجع** أي بيانات حساب محفوظة مسبقًا من localStorage
+- **يحلل** سلسلة JSON مرة أخرى إلى كائن JavaScript
+- **يحدث** الحالة باستخدام وظيفة التحديث المراقبة
+- **يستعيد** جلسة المستخدم تلقائيًا عند تحميل الصفحة
+- **يُنفذ** قبل تحديث المسارات لضمان توفر الحالة
 
 **الخطوة 4: تحسين المسار الافتراضي**
 
@@ -370,12 +550,12 @@ return navigate('/dashboard');
 ```
 
 **لماذا هذا التغيير منطقي:**
-- **الاستفادة** من نظام التخزين الجديد بشكل فعال
-- **السماح** للوحة التحكم بمعالجة فحوصات المصادقة
-- **إعادة التوجيه** إلى تسجيل الدخول تلقائيًا إذا لم تكن هناك جلسة محفوظة
-- **إنشاء** تجربة مستخدم أكثر سلاسة
+- **يستفيد** من نظام التخزين الجديد بشكل فعال
+- **يسمح** للوحة التحكم بمعالجة فحوصات المصادقة
+- **يُعيد التوجيه** إلى تسجيل الدخول تلقائيًا إذا لم تكن هناك جلسة محفوظة
+- **يُنشئ** تجربة مستخدم أكثر سلاسة
 
-**اختبار التنفيذ الخاص بك:**
+**اختبار تنفيذك:**
 
 1. قم بتسجيل الدخول إلى تطبيقك البنكي
 2. قم بتحديث صفحة المتصفح
@@ -385,11 +565,25 @@ return navigate('/dashboard');
 
 🎉 **إنجاز محقق**: لقد قمت بتنفيذ إدارة حالة دائمة بنجاح! الآن يتصرف تطبيقك مثل تطبيق ويب احترافي.
 
-## تحقيق التوازن بين التخزين الدائم وحداثة البيانات
+### 🎯 مراجعة تربوية: هندسة التخزين الدائم
+
+**فهم الهندسة**: لقد قمت بتنفيذ طبقة تخزين دائمة متقدمة توازن بين تجربة المستخدم وتعقيد إدارة البيانات.
+
+**المفاهيم الرئيسية التي تم إتقانها**:
+- **تسلسل JSON**: تحويل الكائنات المعقدة إلى سلاسل قابلة للتخزين
+- **المزامنة التلقائية**: تغييرات الحالة تؤدي إلى تخزين دائم
+- **استعادة الجلسة**: يمكن للتطبيقات استعادة سياق المستخدم بعد الانقطاعات
+- **التخزين المركزي**: وظيفة تحديث واحدة تتعامل مع جميع عمليات التخزين
 
-نظام التخزين الدائم الخاص بنا يحافظ بنجاح على جلسات المستخدم، ولكنه يقدم تحديًا جديدًا: قدم البيانات. عندما يقوم مستخدمون أو تطبيقات متعددة بتعديل نفس بيانات الخادم، تصبح المعلومات المخزنة محليًا قديمة.
+**اتصال بالصناعة**: هذا النمط من التخزين الدائم أساسي لتطبيقات الويب التقدمية (PWAs)، التطبيقات التي تعمل بدون اتصال، وتجارب الويب الحديثة. أنت تبني قدرات على مستوى الإنتاج.
 
-يشبه هذا الوضع الملاحين الفايكنغ الذين اعتمدوا على كل من خرائط النجوم المخزنة والملاحظات السماوية الحالية. توفر الخرائط الاتساق، لكن الملاحين يحتاجون إلى ملاحظات جديدة لمواكبة الظروف المتغيرة. وبالمثل، يحتاج تطبيقنا إلى حالة مستخدم دائمة وبيانات خادم حديثة.
+**سؤال للتفكير**: كيف يمكنك تعديل هذا النظام للتعامل مع حسابات متعددة على نفس الجهاز؟ فكر في الخصوصية وآثار الأمان.
+
+## موازنة التخزين الدائم مع حداثة البيانات
+
+نظام التخزين الدائم الخاص بنا يحافظ بنجاح على جلسات المستخدم، لكنه يقدم تحديًا جديدًا: البيانات القديمة. عندما يقوم مستخدمون أو تطبيقات متعددة بتعديل نفس بيانات الخادم، تصبح المعلومات المخزنة محليًا قديمة.
+
+تشبه هذه الحالة الملاحين الفايكنغ الذين اعتمدوا على خرائط النجوم المخزنة والملاحظات السماوية الحالية. توفر الخرائط الاتساق، لكن الملاحين يحتاجون إلى ملاحظات جديدة لمواكبة الظروف المتغيرة. وبالمثل، يحتاج تطبيقنا إلى حالة مستخدم دائمة وبيانات خادم حديثة.
 
 **🧪 اكتشاف مشكلة حداثة البيانات:**
 
@@ -408,7 +602,7 @@ curl --request POST \
 
 **ما الذي يظهره هذا الاختبار:**
 - **يوضح** كيف يمكن أن يصبح التخزين المحلي "قديمًا" (غير محدث)
-- **يحاكي** سيناريوهات واقعية حيث تحدث تغييرات البيانات خارج تطبيقك
+- **يحاكي** سيناريوهات العالم الحقيقي حيث تحدث تغييرات البيانات خارج تطبيقك
 - **يكشف** التوتر بين التخزين الدائم وحداثة البيانات
 
 **تحدي حداثة البيانات:**
@@ -416,12 +610,29 @@ curl --request POST \
 | المشكلة | السبب | تأثير المستخدم |
 |---------|-------|----------------|
 | **البيانات القديمة** | لا تنتهي صلاحية localStorage تلقائيًا | يرى المستخدمون معلومات غير محدثة |
-| **تغييرات الخادم** | تطبيقات/مستخدمون آخرون يعدلون نفس البيانات | وجهات نظر غير متسقة عبر المنصات |
-| **التخزين المؤقت مقابل الواقع** | التخزين المحلي لا يتطابق مع حالة الخادم | تجربة مستخدم سيئة وارتباك |
+| **تغييرات الخادم** | تعديلات من تطبيقات/مستخدمين آخرين على نفس البيانات | وجهات نظر غير متسقة عبر المنصات |
+| **التخزين المؤقت مقابل الواقع** | التخزين المؤقت المحلي لا يتطابق مع حالة الخادم | تجربة مستخدم سيئة وارتباك |
 
 **استراتيجية الحل:**
 
-سنقوم بتنفيذ نمط "التحديث عند التحميل" الذي يوازن بين فوائد التخزين الدائم والحاجة إلى البيانات الحديثة. يحافظ هذا النهج على تجربة المستخدم السلسة مع ضمان دقة البيانات.
+سنقوم بتنفيذ نمط "التحديث عند التحميل" الذي يوازن بين فوائد التخزين الدائم والحاجة إلى البيانات الحديثة. يضمن هذا النهج تجربة مستخدم سلسة مع الحفاظ على دقة البيانات.
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant A as App
+    participant L as localStorage
+    participant S as Server
+    
+    U->>A: Opens app
+    A->>L: Load saved state
+    L-->>A: Return cached data
+    A->>U: Show UI immediately
+    A->>S: Fetch fresh data
+    S-->>A: Return current data
+    A->>L: Update cache
+    A->>U: Update UI with fresh data
+```
 
 ### المهمة: تنفيذ نظام تحديث البيانات
 
@@ -446,12 +657,12 @@ async function updateAccountData() {
 ```
 
 **فهم منطق هذه الوظيفة:**
-- **التحقق** مما إذا كان المستخدم مسجل الدخول حاليًا (state.account موجود)
-- **إعادة التوجيه** إلى تسجيل الخروج إذا لم يتم العثور على جلسة صالحة
-- **جلب** بيانات حساب جديدة من الخادم باستخدام وظيفة `getAccount()` الحالية
-- **التعامل** مع أخطاء الخادم بشكل جيد عن طريق تسجيل الخروج من الجلسات غير الصالحة
-- **تحديث** الحالة بالبيانات الجديدة باستخدام نظام التحديث المُدار
-- **تشغيل** التخزين الدائم تلقائيًا من خلال وظيفة `updateState()`
+- **يتحقق** مما إذا كان المستخدم مسجلًا الدخول حاليًا (state.account موجود)
+- **يُعيد التوجيه** إلى تسجيل الخروج إذا لم تكن هناك جلسة صالحة
+- **يجلب** بيانات الحساب الجديدة من الخادم باستخدام وظيفة `getAccount()` الحالية
+- **يتعامل** مع أخطاء الخادم برشاقة عن طريق تسجيل الخروج من الجلسات غير الصالحة
+- **يُحدث** الحالة ببيانات جديدة باستخدام نظام التحديث المراقب
+- **يُشغل** التخزين الدائم تلقائيًا من خلال وظيفة `updateState()`
 
 **الخطوة 2: إنشاء معالج تحديث لوحة التحكم**
 
@@ -462,11 +673,11 @@ async function refresh() {
 }
 ```
 
-**ما الذي تحققه وظيفة التحديث هذه:**
-- **تنسيق** عملية تحديث البيانات وتحديث واجهة المستخدم
-- **انتظار** تحميل البيانات الجديدة قبل تحديث العرض
-- **ضمان** أن تعرض لوحة التحكم المعلومات الأكثر حداثة
-- **الحفاظ** على فصل نظيف بين إدارة البيانات وتحديث واجهة المستخدم
+**ما الذي يحققه هذا المعالج:**
+- **ينسق** عملية تحديث البيانات وتحديث واجهة المستخدم
+- **ينتظر** تحميل البيانات الجديدة قبل تحديث العرض
+- **يضمن** أن لوحة التحكم تعرض المعلومات الأكثر حداثة
+- **يحافظ** على فصل نظيف بين إدارة البيانات وتحديث واجهة المستخدم
 
 **الخطوة 3: التكامل مع نظام المسارات**
 
@@ -480,10 +691,10 @@ const routes = {
 ```
 
 **كيف يعمل هذا التكامل:**
-- **تنفيذ** وظيفة التحديث في كل مرة يتم فيها تحميل مسار لوحة التحكم
-- **ضمان** عرض البيانات الجديدة دائمًا عند تنقل المستخدمين إلى لوحة التحكم
-- **الحفاظ** على هيكل المسار الحالي مع إضافة حداثة البيانات
-- **توفير** نمط ثابت لتهيئة المسارات الخاصة
+- **يُنفذ** وظيفة التحديث في كل مرة يتم تحميل مسار لوحة التحكم
+- **يضمن** عرض البيانات الجديدة دائمًا عند تنقل المستخدمين إلى لوحة التحكم
+- **يحافظ** على هيكل المسار الحالي مع إضافة حداثة البيانات
+- **يوفر** نمطًا ثابتًا لتهيئة المسارات الخاصة
 
 **اختبار نظام تحديث البيانات الخاص بك:**
 
@@ -492,58 +703,110 @@ const routes = {
 3. قم بتحديث صفحة لوحة التحكم أو التنقل بعيدًا ثم العودة
 4. تحقق من ظهور المعاملة الجديدة فورًا
 
-🎉 **توازن مثالي محقق**: يجمع تطبيقك الآن بين تجربة المستخدم السلسة ودقة بيانات الخادم الحديثة!
+🎉 **توازن مثالي محقق**: يجمع تطبيقك الآن بين تجربة التخزين الدائم السلسة ودقة بيانات الخادم الحديثة!
+
+## 📈 جدول زمني لإتقان إدارة الحالة الخاصة بك
+
+```mermaid
+timeline
+    title Professional State Management Journey
+    
+    section Problem Recognition
+        State Issues Diagnosis
+            : Identify session loss problems
+            : Understand scattered update issues
+            : Recognize architectural needs
+    
+    section Architecture Foundation
+        Centralized State Design
+            : Create unified state objects
+            : Implement controlled update patterns
+            : Establish immutable principles
+        
+        Predictable Updates
+            : Master Object.freeze() usage
+            : Build debug-friendly systems
+            : Create scalable patterns
+    
+    section Persistence Mastery
+        localStorage Integration
+            : Handle JSON serialization
+            : Implement automatic synchronization
+            : Create session continuity
+        
+        Data Freshness Balance
+            : Address staleness challenges
+            : Build refresh mechanisms
+            : Optimize performance vs accuracy
+    
+    section Professional Patterns
+        Production-Ready Systems
+            : Implement error handling
+            : Create maintainable architectures
+            : Follow industry best practices
+        
+        Advanced Capabilities
+            : Ready for framework integration
+            : Prepared for complex state needs
+            : Foundation for real-time features
+```
+
+**🎓 مرحلة التخرج**: لقد قمت ببناء نظام إدارة حالة كامل باستخدام نفس المبادئ التي تدعم Redux، Vuex، وغيرها من مكتبات الحالة الاحترافية. هذه الأنماط قابلة للتوسع من التطبيقات البسيطة إلى التطبيقات المؤسسية.
 
-## تحدي GitHub Copilot Agent 🚀
+**🔄 قدرات المستوى التالي**:
+- جاهز لإتقان أطر إدارة الحالة (Redux، Zustand، Pinia)
+- مستعد لتنفيذ ميزات الوقت الفعلي باستخدام WebSockets
+- مجهز لبناء تطبيقات ويب تقدمية تعمل بدون اتصال
+- أساس قوي لأنماط متقدمة مثل آلات الحالة والمراقبين
 
-استخدم وضع Agent لإكمال التحدي التالي:
+## تحدي وكيل GitHub Copilot 🚀
 
-**الوصف:** قم بتنفيذ نظام إدارة حالة شامل مع وظيفة التراجع/الإعادة لتطبيق البنك. سيساعدك هذا التحدي على ممارسة مفاهيم إدارة الحالة المتقدمة بما في ذلك تتبع تاريخ الحالة، التحديثات غير القابلة للتغيير، ومزامنة واجهة المستخدم.
+استخدم وضع الوكيل لإكمال التحدي التالي:
+
+**الوصف:** قم بتنفيذ نظام إدارة حالة شامل مع وظيفة التراجع/الإعادة لتطبيقك البنكي. سيساعدك هذا التحدي على ممارسة مفاهيم إدارة الحالة المتقدمة بما في ذلك تتبع تاريخ الحالة، التحديثات غير القابلة للتغيير، ومزامنة واجهة المستخدم.
 
 **المهمة:** قم بإنشاء نظام إدارة حالة محسّن يتضمن: 1) مصفوفة تاريخ الحالة التي تتبع جميع الحالات السابقة، 2) وظائف التراجع والإعادة التي يمكنها العودة إلى الحالات السابقة، 3) أزرار واجهة المستخدم لعمليات التراجع/الإعادة على لوحة التحكم، 4) حد أقصى لتاريخ الحالة يبلغ 10 حالات لمنع مشاكل الذاكرة، و5) تنظيف مناسب للتاريخ عند تسجيل خروج المستخدم. تأكد من أن وظيفة التراجع/الإعادة تعمل مع تغييرات رصيد الحساب وتستمر عبر تحديثات المتصفح.
 
-تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## 🚀 تحدي: تحسين التخزين
 
-يتم الآن التعامل مع جلسات المستخدم، تحديث البيانات، وإدارة الحالة بشكل فعال في تنفيذك. ومع ذلك، فكر فيما إذا كان نهجنا الحالي يوازن بشكل مثالي بين كفاءة التخزين والوظائف.
+تنفيذك الآن يتعامل مع جلسات المستخدم، تحديث البيانات، وإدارة الحالة بشكل فعال. ومع ذلك، فكر فيما إذا كان نهجنا الحالي يوازن بشكل مثالي بين كفاءة التخزين والوظائف.
 
-مثل أساتذة الشطرنج الذين يميزون بين القطع الأساسية والبيادق القابلة للتضحية، تتطلب إدارة الحالة الفعالة تحديد البيانات التي يجب أن تستمر مقابل تلك التي يجب أن تكون دائمًا حديثة من الخادم.
+مثل أساتذة الشطرنج الذين يميزون بين القطع الأساسية والبيادق القابلة للتضحية، تتطلب إدارة الحالة الفعالة تحديد البيانات التي يجب أن تستمر مقابل تلك التي يجب أن تكون دائمًا جديدة من الخادم.
 
 **تحليل التحسين:**
 
 قم بتقييم تنفيذ localStorage الحالي الخاص بك وفكر في هذه الأسئلة الاستراتيجية:
 - ما هي المعلومات الدنيا المطلوبة للحفاظ على مصادقة المستخدم؟
-- ما هي البيانات التي تتغير بشكل متكرر بحيث يوفر التخزين المحلي فائدة قليلة؟
+- أي البيانات تتغير بشكل متكرر بحيث يوفر التخزين المحلي فائدة قليلة؟
 - كيف يمكن أن يحسن تحسين التخزين الأداء دون التأثير على تجربة المستخدم؟
 
-هذا النوع من التحليل المعماري يميز المطورين ذوي الخبرة الذين يأخذون في الاعتبار كل من الوظائف والكفاءة في حلولهم.
-
 **استراتيجية التنفيذ:**
-- **تحديد** البيانات الأساسية التي يجب أن تستمر (على الأرجح فقط تعريف المستخدم)
-- **تعديل** تنفيذ localStorage لتخزين بيانات الجلسة الأساسية فقط
-- **ضمان** تحميل البيانات الحديثة دائمًا من الخادم عند زيارات لوحة التحكم
-- **اختبار** أن النهج المحسن يحافظ على نفس تجربة المستخدم
+- **حدد** البيانات الأساسية التي يجب أن تستمر (على الأرجح فقط تعريف المستخدم)
+- **عدل** تنفيذ localStorage لتخزين بيانات الجلسة الأساسية فقط
+- **تأكد** من تحميل البيانات الجديدة دائمًا من الخادم عند زيارات لوحة التحكم
+- **اختبر** أن النهج المحسن يحافظ على نفس تجربة المستخدم
 
 **اعتبار متقدم:**
-- **مقارنة** التوازن بين تخزين بيانات الحساب الكاملة مقابل مجرد رموز المصادقة
-- **توثيق** قراراتك وأسبابها لأعضاء الفريق في المستقبل
+- **قارن** بين التوازن بين تخزين بيانات الحساب الكاملة مقابل رموز المصادقة فقط
+- **وثق** قراراتك وأسبابها لأعضاء الفريق في المستقبل
 
-سيساعدك هذا التحدي على التفكير كمطور محترف يأخذ في الاعتبار كل من تجربة المستخدم وكفاءة التطبيق. خذ وقتك لتجربة طرق مختلفة!
+سيساعدك هذا التحدي على التفكير كمطور محترف يأخذ في الاعتبار كلًا من تجربة المستخدم وكفاءة التطبيق. خذ وقتك لتجربة طرق مختلفة!
 
 ## اختبار ما بعد المحاضرة
 
 [اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/48)
 
-## الواجب
+## المهمة
 
 [تنفيذ مربع حوار "إضافة معاملة"](assignment.md)
 
-إليك مثال على النتيجة بعد إكمال الواجب:
+إليك مثال على النتيجة بعد إكمال المهمة:
 
 ![لقطة شاشة تعرض مثالًا لمربع حوار "إضافة معاملة"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ar.png)
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/8-code-editor/1-using-a-code-editor/README.md b/translations/ar/8-code-editor/1-using-a-code-editor/README.md
index 79b47e19fa..66ed4750d1 100644
--- a/translations/ar/8-code-editor/1-using-a-code-editor/README.md
+++ b/translations/ar/8-code-editor/1-using-a-code-editor/README.md
@@ -1,45 +1,152 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "cfd4a15974168ca426d50c67682ab9d4",
-  "translation_date": "2025-10-22T14:06:50+00:00",
+  "original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
+  "translation_date": "2025-11-03T12:27:54+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/README.md",
   "language_code": "ar"
 }
 -->
 # استخدام محرر الأكواد: إتقان VSCode.dev
 
-تذكر في فيلم *The Matrix* عندما كان نيو بحاجة إلى الاتصال بجهاز كمبيوتر ضخم للوصول إلى العالم الرقمي؟ أدوات تطوير الويب اليوم هي القصة المعاكسة تمامًا – قدرات قوية للغاية يمكن الوصول إليها من أي مكان. VSCode.dev هو محرر أكواد يعمل عبر المتصفح ويقدم أدوات تطوير احترافية لأي جهاز متصل بالإنترنت.
+تذكر في *The Matrix* عندما كان على نيو الاتصال بجهاز كمبيوتر ضخم للوصول إلى العالم الرقمي؟ أدوات تطوير الويب اليوم هي القصة المعاكسة - قدرات قوية للغاية يمكن الوصول إليها من أي مكان. VSCode.dev هو محرر أكواد يعمل عبر المتصفح ويقدم أدوات تطوير احترافية لأي جهاز متصل بالإنترنت.
 
-تمامًا كما جعلت آلة الطباعة الكتب متاحة للجميع وليس فقط للكتّاب في الأديرة، فإن VSCode.dev يتيح البرمجة للجميع. يمكنك العمل على المشاريع من جهاز كمبيوتر في المكتبة، أو مختبر المدرسة، أو أي مكان يمكنك الوصول فيه إلى المتصفح. لا حاجة للتثبيت، ولا قيود "أحتاج إلى إعداد معين".
+تمامًا كما جعلت الطباعة الكتب متاحة للجميع وليس فقط للكتّاب في الأديرة، فإن VSCode.dev يدمقرط البرمجة. يمكنك العمل على المشاريع من جهاز كمبيوتر في المكتبة، أو مختبر المدرسة، أو أي مكان يمكنك الوصول فيه إلى المتصفح. لا حاجة للتثبيت، ولا قيود "أحتاج إلى إعداد معين".
 
-بنهاية هذا الدرس، ستفهم كيفية التنقل في VSCode.dev، فتح مستودعات GitHub مباشرة في المتصفح، واستخدام Git للتحكم في الإصدارات – وهي مهارات يعتمد عليها المطورون المحترفون يوميًا.
+بنهاية هذا الدرس، ستفهم كيفية التنقل في VSCode.dev، فتح مستودعات GitHub مباشرة في المتصفح، واستخدام Git للتحكم في الإصدارات - مهارات يعتمد عليها المطورون المحترفون يوميًا.
+
+## ⚡ ما يمكنك القيام به في الـ 5 دقائق القادمة
+
+**مسار البداية السريع للمطورين المشغولين**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Visit vscode.dev]
+    B --> C[Connect GitHub account]
+    C --> D[Open any repository]
+    D --> E[Start editing immediately]
+```
+
+- **الدقيقة الأولى**: انتقل إلى [vscode.dev](https://vscode.dev) - لا حاجة للتثبيت
+- **الدقيقة الثانية**: قم بتسجيل الدخول باستخدام GitHub لربط مستودعاتك
+- **الدقيقة الثالثة**: جرب خدعة الرابط: قم بتغيير `github.com` إلى `vscode.dev/github` في أي رابط مستودع
+- **الدقيقة الرابعة**: أنشئ ملفًا جديدًا وشاهد تمييز بناء الجملة يعمل تلقائيًا
+- **الدقيقة الخامسة**: قم بإجراء تغيير وقم بتثبيته من خلال لوحة التحكم في المصدر
+
+**رابط اختبار سريع**:
+```
+# Transform this:
+github.com/microsoft/Web-Dev-For-Beginners
+
+# Into this:
+vscode.dev/github/microsoft/Web-Dev-For-Beginners
+```
+
+**لماذا هذا مهم**: في 5 دقائق، ستختبر حرية البرمجة في أي مكان باستخدام أدوات احترافية. هذا يمثل مستقبل التطوير - الوصول السهل، القوة، والفورية.
+
+## 🗺️ رحلتك التعليمية عبر تطوير السحابة
+
+```mermaid
+journey
+    title From Local Setup to Cloud Development Mastery
+    section Understanding the Platform
+      Discover web-based editing: 4: You
+      Connect to GitHub ecosystem: 6: You
+      Master interface navigation: 7: You
+    section File Management Skills
+      Create and organize files: 5: You
+      Edit with syntax highlighting: 7: You
+      Navigate project structures: 8: You
+    section Version Control Mastery
+      Understand Git integration: 6: You
+      Practice commit workflows: 8: You
+      Master collaboration patterns: 9: You
+    section Professional Customization
+      Install powerful extensions: 7: You
+      Configure development environment: 8: You
+      Build personal workflows: 9: You
+```
+
+**وجهة رحلتك**: بنهاية هذا الدرس، ستكون قد أتقنت بيئة تطوير سحابية احترافية تعمل من أي جهاز، مما يتيح لك البرمجة باستخدام نفس الأدوات التي يستخدمها المطورون في شركات التكنولوجيا الكبرى.
 
 ## ما ستتعلمه
 
-بعد أن نمر بهذا معًا، ستكون قادرًا على:
+بعد أن نمر بهذا معًا، ستتمكن من:
 
-- التنقل في VSCode.dev وكأنه منزلك الثاني – العثور على كل ما تحتاجه دون أن تضيع
-- فتح أي مستودع GitHub في المتصفح والبدء في التعديل فورًا (هذا مذهل حقًا!)
+- التنقل في VSCode.dev وكأنه منزلك الثاني - العثور على كل ما تحتاجه دون أن تضيع
+- فتح أي مستودع GitHub في المتصفح والبدء في التحرير فورًا (هذا سحري جدًا!)
 - استخدام Git لتتبع تغييراتك وحفظ تقدمك كمحترف
-- تعزيز محرر الأكواد باستخدام الإضافات التي تجعل البرمجة أسرع وأكثر متعة
+- تعزيز محررك بالإضافات التي تجعل البرمجة أسرع وأكثر متعة
 - إنشاء وتنظيم ملفات المشاريع بثقة
 
-## ما ستحتاج إليه
+## ما ستحتاجه
 
 المتطلبات بسيطة:
 
 - حساب مجاني على [GitHub](https://github.com) (سنرشدك خلال عملية الإنشاء إذا لزم الأمر)
 - معرفة أساسية بمتصفحات الويب
-- درس أساسيات GitHub يقدم خلفية مفيدة، لكنه ليس ضروريًا
+- درس أساسيات GitHub يوفر خلفية مفيدة، رغم أنه ليس ضروريًا
 
 > 💡 **جديد على GitHub؟** إنشاء حساب مجاني ويستغرق دقائق. مثلما تمنحك بطاقة المكتبة الوصول إلى الكتب في جميع أنحاء العالم، يفتح حساب GitHub أبوابًا لمستودعات الأكواد عبر الإنترنت.
 
-## لماذا تهم محررات الأكواد عبر الإنترنت؟
+## 🧠 نظرة عامة على نظام تطوير السحابة
 
-قبل الإنترنت، لم يكن العلماء في الجامعات المختلفة قادرين على مشاركة الأبحاث بسهولة. ثم جاء ARPANET في الستينيات، وربط أجهزة الكمبيوتر عبر المسافات. محررات الأكواد عبر الإنترنت تتبع نفس المبدأ – جعل الأدوات القوية متاحة بغض النظر عن موقعك أو جهازك.
+```mermaid
+mindmap
+  root((VSCode.dev Mastery))
+    Platform Benefits
+      Accessibility
+        Device Independence
+        No Installation Required
+        Instant Updates
+        Universal Access
+      Integration
+        GitHub Connection
+        Repository Sync
+        Settings Persistence
+        Collaboration Ready
+    Development Workflow
+      File Management
+        Project Structure
+        Syntax Highlighting
+        Multi-tab Editing
+        Auto-save Features
+      Version Control
+        Git Integration
+        Commit Workflows
+        Branch Management
+        Change Tracking
+    Customization Power
+      Extensions Ecosystem
+        Productivity Tools
+        Language Support
+        Theme Options
+        Custom Shortcuts
+      Environment Setup
+        Personal Preferences
+        Workspace Configuration
+        Tool Integration
+        Workflow Optimization
+    Professional Skills
+      Industry Standards
+        Version Control
+        Code Quality
+        Collaboration
+        Documentation
+      Career Readiness
+        Remote Work
+        Cloud Development
+        Team Projects
+        Open Source
+```
 
-محرر الأكواد هو مساحة عمل التطوير الخاصة بك، حيث تكتب وتعدل وتنظم ملفات الأكواد. على عكس محررات النصوص البسيطة، توفر محررات الأكواد الاحترافية ميزات مثل تمييز الصيغة، واكتشاف الأخطاء، وإدارة المشاريع.
+**المبدأ الأساسي**: تمثل بيئات التطوير السحابية مستقبل البرمجة - حيث توفر أدوات احترافية يمكن الوصول إليها، تعاونية، ومستقلة عن المنصة.
+
+## لماذا تهم محررات الأكواد عبر الإنترنت
+
+قبل الإنترنت، لم يكن بإمكان العلماء في الجامعات المختلفة مشاركة الأبحاث بسهولة. ثم جاء ARPANET في الستينيات، وربط أجهزة الكمبيوتر عبر المسافات. محررات الأكواد عبر الإنترنت تتبع نفس المبدأ - جعل الأدوات القوية متاحة بغض النظر عن موقعك الجغرافي أو جهازك.
+
+محرر الأكواد هو مساحة عمل التطوير الخاصة بك، حيث تكتب، تعدل، وتنظم ملفات الأكواد. على عكس محررات النصوص البسيطة، توفر محررات الأكواد الاحترافية تمييز بناء الجملة، اكتشاف الأخطاء، وميزات إدارة المشاريع.
 
 VSCode.dev يجلب هذه القدرات إلى متصفحك:
 
@@ -47,26 +154,26 @@ VSCode.dev يجلب هذه القدرات إلى متصفحك:
 
 | الميزة | الوصف | الفائدة العملية |
 |---------|-------------|----------|
-| **الاستقلالية عن المنصة** | يعمل على أي جهاز يحتوي على متصفح | العمل بسلاسة من أجهزة مختلفة |
+| **استقلالية المنصة** | يعمل على أي جهاز يحتوي على متصفح | العمل بسلاسة من أجهزة مختلفة |
 | **لا حاجة للتثبيت** | الوصول عبر رابط ويب | تجاوز قيود تثبيت البرامج |
-| **التحديثات التلقائية** | يعمل دائمًا بأحدث إصدار | الوصول إلى الميزات الجديدة دون تحديث يدوي |
-| **تكامل المستودعات** | اتصال مباشر بـ GitHub | تعديل الأكواد دون إدارة الملفات محليًا |
+| **التحديثات التلقائية** | يعمل دائمًا بأحدث إصدار | الوصول إلى الميزات الجديدة دون تحديثات يدوية |
+| **تكامل المستودعات** | اتصال مباشر بـ GitHub | تحرير الأكواد دون إدارة الملفات المحلية |
 
 **التطبيقات العملية:**
 - استمرارية العمل عبر بيئات مختلفة
 - واجهة متسقة بغض النظر عن نظام التشغيل
-- إمكانيات التعاون الفوري
+- إمكانيات التعاون الفورية
 - تقليل متطلبات التخزين المحلي
 
 ## استكشاف VSCode.dev
 
-تمامًا كما احتوى مختبر ماري كوري على معدات متطورة في مساحة بسيطة نسبيًا، يضم VSCode.dev أدوات تطوير احترافية في واجهة المتصفح. يوفر هذا التطبيق نفس الوظائف الأساسية لمحررات الأكواد المكتبية.
+تمامًا كما احتوى مختبر ماري كوري على معدات متطورة في مساحة بسيطة نسبيًا، يضم VSCode.dev أدوات تطوير احترافية في واجهة متصفح. يقدم هذا التطبيق الويب نفس الوظائف الأساسية لمحررات الأكواد المكتبية.
 
-ابدأ بالتوجه إلى [vscode.dev](https://vscode.dev) في متصفحك. يتم تحميل الواجهة دون الحاجة إلى تنزيلات أو تثبيتات – تطبيق مباشر لمبادئ الحوسبة السحابية.
+ابدأ بالتوجه إلى [vscode.dev](https://vscode.dev) في متصفحك. يتم تحميل الواجهة دون تنزيلات أو تثبيتات نظام - تطبيق مباشر لمبادئ الحوسبة السحابية.
 
 ### ربط حساب GitHub الخاص بك
 
-مثلما ربط هاتف ألكسندر غراهام بيل المواقع البعيدة، فإن ربط حساب GitHub الخاص بك يربط VSCode.dev بمستودعات الأكواد الخاصة بك. عند مطالبتك بتسجيل الدخول إلى GitHub، يُوصى بقبول هذا الاتصال.
+مثلما ربط هاتف ألكسندر جراهام بيل المواقع البعيدة، فإن ربط حساب GitHub الخاص بك يربط VSCode.dev بمستودعات الأكواد الخاصة بك. عند مطالبتك بتسجيل الدخول باستخدام GitHub، يُوصى بقبول هذا الاتصال.
 
 **يوفر تكامل GitHub:**
 - الوصول المباشر إلى مستودعاتك داخل المحرر
@@ -76,29 +183,50 @@ VSCode.dev يجلب هذه القدرات إلى متصفحك:
 
 ### التعرف على مساحة العمل الجديدة الخاصة بك
 
-بمجرد تحميل كل شيء، سترى مساحة عمل نظيفة وجميلة مصممة لتبقيك مركزًا على ما يهم – الأكواد الخاصة بك!
+بمجرد تحميل كل شيء، سترى مساحة عمل نظيفة مصممة لتبقيك مركزًا على ما يهم - الأكواد الخاصة بك!
 
 ![واجهة VSCode.dev الافتراضية](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ar.png)
 
 **إليك جولة في الحي:**
 - **شريط النشاط** (الشريط الموجود على اليسار): التنقل الرئيسي الخاص بك مع المستكشف 📁، البحث 🔍، التحكم في المصدر 🌿، الإضافات 🧩، والإعدادات ⚙️
 - **الشريط الجانبي** (اللوحة المجاورة له): يتغير ليعرض لك معلومات ذات صلة بناءً على ما اخترته
-- **منطقة المحرر** (المساحة الكبيرة في المنتصف): هنا يحدث السحر – منطقة البرمجة الرئيسية الخاصة بك
+- **منطقة التحرير** (المساحة الكبيرة في المنتصف): هنا يحدث السحر - منطقة البرمجة الرئيسية الخاصة بك
 
 **خذ لحظة لاستكشاف:**
-- انقر على أيقونات شريط النشاط وشاهد ما يفعله كل منها
-- لاحظ كيف يقوم الشريط الجانبي بتحديث المعلومات – رائع، أليس كذلك؟
+- انقر حول أيقونات شريط النشاط وشاهد ما يفعله كل منها
+- لاحظ كيف يقوم الشريط الجانبي بتحديث المعلومات المختلفة - رائع، أليس كذلك؟
 - عرض المستكشف (📁) هو المكان الذي ستقضي فيه معظم وقتك، لذا كن مرتاحًا معه
 
+```mermaid
+flowchart TB
+    subgraph "VSCode.dev Interface Architecture"
+        A[Activity Bar] --> B[Explorer 📁]
+        A --> C[Search 🔍]
+        A --> D[Source Control 🌿]
+        A --> E[Extensions 🧩]
+        A --> F[Settings ⚙️]
+        
+        B --> G[File Tree]
+        C --> H[Find & Replace]
+        D --> I[Git Status]
+        E --> J[Extension Marketplace]
+        F --> K[Configuration]
+        
+        L[Sidebar] --> M[Context Panel]
+        N[Editor Area] --> O[Code Files]
+        P[Terminal/Output] --> Q[Command Line]
+    end
+```
+
 ## فتح مستودعات GitHub
 
-قبل الإنترنت، كان الباحثون بحاجة إلى السفر فعليًا إلى المكتبات للوصول إلى الوثائق. تعمل مستودعات GitHub بطريقة مشابهة – فهي مجموعات من الأكواد المخزنة عن بُعد. يلغي VSCode.dev الخطوة التقليدية لتنزيل المستودعات إلى جهازك المحلي قبل التعديل.
+قبل الإنترنت، كان الباحثون يضطرون للسفر فعليًا إلى المكتبات للوصول إلى الوثائق. تعمل مستودعات GitHub بشكل مشابه - فهي مجموعات من الأكواد المخزنة عن بُعد. يلغي VSCode.dev الخطوة التقليدية لتنزيل المستودعات إلى جهازك المحلي قبل التحرير.
 
-تتيح هذه الميزة الوصول الفوري إلى أي مستودع عام لعرضه أو تعديله أو المساهمة فيه. إليك طريقتان لفتح المستودعات:
+تتيح هذه القدرة الوصول الفوري إلى أي مستودع عام للعرض، التحرير، أو المساهمة. إليك طريقتين لفتح المستودعات:
 
 ### الطريقة الأولى: الطريقة السهلة بالنقر
 
-هذه الطريقة مثالية عندما تبدأ من جديد في VSCode.dev وترغب في فتح مستودع معين. إنها مباشرة وسهلة للمبتدئين:
+هذه الطريقة مثالية عندما تبدأ جديدًا في VSCode.dev وترغب في فتح مستودع معين. إنها مباشرة وسهلة للمبتدئين:
 
 **إليك كيفية القيام بذلك:**
 
@@ -107,24 +235,24 @@ VSCode.dev يجلب هذه القدرات إلى متصفحك:
 
    ![فتح مستودع عن بُعد](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ar.png)
 
-3. الصق أي رابط لمستودع GitHub (جرب هذا: `https://github.com/microsoft/Web-Dev-For-Beginners`)
+3. قم بلصق أي رابط مستودع GitHub (جرب هذا: `https://github.com/microsoft/Web-Dev-For-Beginners`)
 4. اضغط على Enter وشاهد السحر يحدث!
 
 **نصيحة احترافية - اختصار لوحة الأوامر:**
 
-هل تريد أن تشعر وكأنك ساحر برمجي؟ جرب هذا الاختصار: Ctrl+Shift+P (أو Cmd+Shift+P على Mac) لفتح لوحة الأوامر:
+هل تريد أن تشعر وكأنك ساحر برمجة؟ جرب هذا الاختصار: Ctrl+Shift+P (أو Cmd+Shift+P على Mac) لفتح لوحة الأوامر:
 
 ![لوحة الأوامر](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ar.png)
 
-**لوحة الأوامر تشبه محرك بحث لكل ما يمكنك القيام به:**
+**لوحة الأوامر تشبه وجود محرك بحث لكل ما يمكنك القيام به:**
 - اكتب "فتح عن بُعد" وستجد أداة فتح المستودعات
 - تتذكر المستودعات التي فتحتها مؤخرًا (مفيد جدًا!)
 - بمجرد أن تعتاد عليها، ستشعر وكأنك تبرمج بسرعة البرق
-- إنها بمثابة "مرحبًا سيري، ولكن للبرمجة"
+- إنها أساسًا نسخة VSCode.dev من "Hey Siri، ولكن للبرمجة"
 
 ### الطريقة الثانية: تقنية تعديل الرابط
 
-مثلما تستخدم HTTP وHTTPS بروتوكولات مختلفة مع الحفاظ على نفس هيكل النطاق، يستخدم VSCode.dev نمط رابط يعكس نظام عناوين GitHub. يمكن تعديل أي رابط مستودع GitHub ليفتح مباشرة في VSCode.dev.
+مثلما تستخدم HTTP و HTTPS بروتوكولات مختلفة مع الحفاظ على نفس هيكل النطاق، يستخدم VSCode.dev نمط رابط يعكس نظام عناوين GitHub. يمكن تعديل أي رابط مستودع GitHub ليفتح مباشرة في VSCode.dev.
 
 **نمط تحويل الرابط:**
 
@@ -132,25 +260,38 @@ VSCode.dev يجلب هذه القدرات إلى متصفحك:
 |----------------|---------------------|----------------|
 | **مستودع عام** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
 | **مشروع شخصي** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
-| **أي مستودع متاح** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
+| **أي مستودع يمكن الوصول إليه** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
 
 **التنفيذ:**
 - استبدل `github.com` بـ `vscode.dev/github`
 - حافظ على جميع مكونات الرابط الأخرى دون تغيير
-- يعمل مع أي مستودع متاح للجمهور
-- يوفر الوصول الفوري للتعديل
+- يعمل مع أي مستودع يمكن الوصول إليه علنًا
+- يوفر الوصول الفوري للتحرير
 
-> 💡 **نصيحة تغير الحياة**: ضع إشارات مرجعية لإصدارات VSCode.dev من مستودعاتك المفضلة. لدي إشارات مرجعية مثل "تعديل ملفي الشخصي" و"إصلاح التوثيق" التي تأخذني مباشرة إلى وضع التعديل!
+> 💡 **نصيحة تغير الحياة**: قم بوضع إشارات مرجعية لإصدارات VSCode.dev من مستودعاتك المفضلة. لدي إشارات مرجعية مثل "تحرير ملفي الشخصي" و "إصلاح الوثائق" التي تأخذني مباشرة إلى وضع التحرير!
 
 **أي طريقة يجب أن تستخدم؟**
 - **الطريقة عبر الواجهة**: رائعة عندما تستكشف أو لا تتذكر أسماء المستودعات بالضبط
-- **حيلة الرابط**: مثالية للوصول السريع عندما تعرف بالضبط إلى أين تذهب
+- **خدعة الرابط**: مثالية للوصول السريع عندما تعرف بالضبط إلى أين تذهب
+
+### 🎯 التحقق التربوي: الوصول إلى تطوير السحابة
+
+**توقف وتأمل**: لقد تعلمت للتو طريقتين للوصول إلى مستودعات الأكواد عبر متصفح الويب. هذا يمثل تحولًا أساسيًا في كيفية عمل التطوير.
+
+**تقييم ذاتي سريع**:
+- هل يمكنك شرح لماذا يلغي التحرير عبر الإنترنت إعداد "بيئة التطوير التقليدية"؟
+- ما المزايا التي توفرها تقنية تعديل الرابط مقارنة باستنساخ git المحلي؟
+- كيف يغير هذا النهج الطريقة التي قد تساهم بها في مشاريع المصدر المفتوح؟
+
+**اتصال بالعالم الحقيقي**: شركات كبرى مثل GitHub، GitLab، و Replit قامت ببناء منصات التطوير الخاصة بها حول هذه المبادئ السحابية أولاً. أنت تتعلم نفس سير العمل الذي تستخدمه فرق التطوير الاحترافية في جميع أنحاء العالم.
+
+**سؤال التحدي**: كيف يمكن أن يغير التطوير السحابي الطريقة التي يتم بها تعليم البرمجة في المدارس؟ فكر في متطلبات الأجهزة، إدارة البرامج، وإمكانيات التعاون.
 
 ## العمل مع الملفات والمشاريع
 
-الآن بعد أن فتحت مستودعًا، دعنا نبدأ البناء! يوفر لك VSCode.dev كل ما تحتاجه لإنشاء وتعديل وتنظيم ملفات الأكواد. فكر فيه كأنه ورشة عمل رقمية – كل أداة في مكانها الصحيح.
+الآن بعد أن فتحت مستودعًا، دعنا نبدأ البناء! يوفر لك VSCode.dev كل ما تحتاجه لإنشاء، تحرير، وتنظيم ملفات الأكواد الخاصة بك. فكر فيه كأنه ورشة عمل رقمية - كل أداة موجودة حيث تحتاجها.
 
-دعنا نتعمق في المهام اليومية التي ستشكل معظم سير عمل البرمجة الخاص بك.
+دعونا نتعمق في المهام اليومية التي ستشكل معظم سير عمل البرمجة الخاص بك.
 
 ### إنشاء ملفات جديدة
 
@@ -158,8 +299,8 @@ VSCode.dev يجلب هذه القدرات إلى متصفحك:
 
 **عملية إنشاء الملفات:**
 
-1. انتقل إلى المجلد المستهدف في الشريط الجانبي للمستكشف
-2. مرر فوق اسم المجلد للكشف عن أيقونة "ملف جديد" (📄+)
+1. انتقل إلى المجلد الهدف في الشريط الجانبي للمستكشف
+2. قم بالتحويم فوق اسم المجلد للكشف عن أيقونة "ملف جديد" (📄+)
 3. أدخل اسم الملف بما في ذلك الامتداد المناسب (`style.css`, `script.js`, `index.html`)
 4. اضغط على Enter لإنشاء الملف
 
@@ -167,34 +308,34 @@ VSCode.dev يجلب هذه القدرات إلى متصفحك:
 
 **اتفاقيات التسمية:**
 - استخدم أسماء وصفية تشير إلى غرض الملف
-- قم بتضمين امتدادات الملفات لتحديد الصيغة بشكل صحيح
+- قم بتضمين الامتدادات للحصول على تمييز بناء الجملة المناسب
 - اتبع أنماط تسمية متسقة في جميع المشاريع
 - استخدم الأحرف الصغيرة والشرطات بدلاً من المسافات
 
-### تعديل وحفظ الملفات
+### تحرير الملفات وحفظها
 
-هنا تبدأ المتعة الحقيقية! محرر VSCode.dev مليء بالميزات المفيدة التي تجعل البرمجة سلسة وبديهية. إنه مثل وجود مساعد كتابة ذكي، ولكن للأكواد.
+هنا تبدأ المتعة الحقيقية! محرر VSCode.dev مليء بالميزات المفيدة التي تجعل البرمجة سلسة وبديهية. إنه مثل وجود مساعد كتابة ذكي جدًا، ولكن للأكواد.
 
-**سير عمل التعديل الخاص بك:**
+**سير عمل التحرير الخاص بك:**
 
 1. انقر على أي ملف في المستكشف لفتحه في المنطقة الرئيسية
-2. ابدأ الكتابة وشاهد VSCode.dev يساعدك بالألوان والاقتراحات واكتشاف الأخطاء
-3. احفظ عملك باستخدام Ctrl+S (Windows/Linux) أو Cmd+S (Mac) – على الرغم من أنه يحفظ تلقائيًا أيضًا!
+2. ابدأ الكتابة وشاهد VSCode.dev يساعدك بالألوان، الاقتراحات، واكتشاف الأخطاء
+3. احفظ عملك باستخدام Ctrl+S (Windows/Linux) أو Cmd+S (Mac) - رغم أنه يحفظ تلقائيًا أيضًا!
 
-![تعديل الملفات في VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ar.png)
+![تحرير الملفات في VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ar.png)
 
 **الأشياء الرائعة التي تحدث أثناء البرمجة:**
-- يتم تلوين الأكواد بشكل جميل لتكون سهلة القراءة
+- يتم تلوين الأكواد بشكل جميل بحيث يسهل قراءتها
 - يقترح VSCode.dev إكمالات أثناء الكتابة (مثل التصحيح التلقائي، ولكن أكثر ذكاءً)
-- يكتشف الأخطاء قبل أن تحفظ حتى
+- يكتشف الأخطاء والأخطاء قبل أن تحفظ حتى
 - يمكنك فتح ملفات متعددة في علامات تبويب، تمامًا مثل المتصفح
 - يتم حفظ كل شيء تلقائيًا في الخلفية
 
-> ⚠️ **نصيحة سريعة**: على الرغم من أن الحفظ التلقائي يدعمك، فإن الضغط على Ctrl+S أو Cmd+S لا يزال عادة جيدة. يحفظ كل شيء فورًا ويشغل بعض الميزات الإضافية المفيدة مثل التحقق من الأخطاء.
+> ⚠️ **نصيحة سريعة**: رغم أن الحفظ التلقائي يدعمك، فإن الضغط على Ctrl+S أو Cmd+S لا يزال عادة جيدة. يحفظ كل شيء فورًا ويشغل بعض الميزات الإضافية المفيدة مثل التحقق من الأخطاء.
 
 ### التحكم في الإصدارات باستخدام Git
 
-مثلما ينشئ علماء الآثار سجلات مفصلة لطبقات الحفريات، يتتبع Git التغييرات في الأكواد الخاصة بك بمرور الوقت. يحافظ هذا النظام على تاريخ المشروع ويتيح لك العودة إلى الإصدارات السابقة عند الحاجة. يتضمن VSCode.dev وظائف Git مدمجة.
+مثلما يقوم علماء الآثار بإنشاء سجلات مفصلة لطبقات الحفريات، يتتبع Git التغييرات في الأكواد الخاصة بك بمرور الوقت. يحافظ هذا النظام على تاريخ المشروع ويمكنك من العودة إلى الإصدارات السابقة عند الحاجة. يتضمن VSCode.dev وظائف Git مدمجة.
 
 **واجهة التحكم في المصدر:**
 
@@ -204,7 +345,7 @@ VSCode.dev يجلب هذه القدرات إلى متصفحك:
 
 ![عرض التغييرات في التحكم في المصدر](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ar.png)
 
-**حفظ عملك (سير عمل الالتزام):**
+**حفظ عملك (سير عمل التثبيت):**
 
 ```mermaid
 flowchart TD
@@ -215,171 +356,290 @@ flowchart TD
     E --> F[Changes pushed to GitHub]
 ```
 
+```mermaid
+stateDiagram-v2
+    [*] --> Modified: Edit files
+    Modified --> Staged: Click + to stage
+    Staged --> Modified: Click - to unstage
+    Staged --> Committed: Add message & commit
+    Committed --> [*]: Sync to GitHub
+    
+    state Committed {
+        [*] --> LocalCommit
+        LocalCommit --> RemotePush: Auto-sync
+    }
+```
+
 **إليك العملية خطوة بخطوة:**
-- انقر على أيقونة "+" بجانب الملفات التي تريد حفظها (هذا يعني "تجهيزها")
-- تحقق من أنك راضٍ عن جميع التغييرات التي تم تجهيزها
+- انقر على أيقونة "+" بجانب الملفات التي تريد حفظها (هذا "يجهزها")
+- تحقق جيدًا من أنك راضٍ عن جميع التغييرات التي قمت بتجهيزها
 - اكتب ملاحظة قصيرة تشرح ما قمت به (هذه هي "رسالة الالتزام")
-- انقر على زر علامة الاختيار لحفظ كل شيء إلى GitHub
-- إذا غيرت رأيك بشأن شيء ما، فإن أيقونة التراجع تتيح لك تجاهل التغييرات
+- انقر على زر علامة الاختيار لحفظ كل شيء على GitHub
+- إذا غيرت رأيك بشأن شيء ما، فإن رمز التراجع يتيح لك التخلص من التغييرات
 
-**كتابة رسائل الالتزام الجيدة (هذا أسهل مما تعتقد!):**
-- فقط صف ما قمت به، مثل "إضافة نموذج الاتصال" أو "إصلاح التنقل المعطل"
-- اجعلها قصيرة وموجزة – فكر في طول التغريدة، وليس المقال
-- ابدأ بكلمات عمل مثل "إضافة"، "إصلاح"، "تحديث"، أو "إزالة"
-- **أمثلة جيدة**: "إضافة قائمة تنقل متجاوبة"، "إصلاح مشاكل تخطيط الهاتف المحمول"، "تحديث الألوان لتحسين الوصول"
+**كتابة رسائل الالتزام الجيدة (أسهل مما تعتقد!):**
+- فقط صف ما قمت به، مثل "إضافة نموذج اتصال" أو "إصلاح التنقل المعطل"
+- اجعلها قصيرة وبسيطة – فكر في طول تغريدة، وليس مقال
+- ابدأ بكلمات فعلية مثل "إضافة"، "إصلاح"، "تحديث"، أو "إزالة"
+- **أمثلة جيدة**: "إضافة قائمة تنقل متجاوبة"، "إصلاح مشاكل تخطيط الهاتف المحمول"، "تحديث الألوان لتحسين إمكانية الوصول"
 
-> 💡 **نصيحة التنقل السريع**: استخدم قائمة الهامبرغر (☰) في أعلى اليسار للعودة إلى مستودع GitHub الخاص بك ورؤية التغييرات التي قمت بحفظها عبر الإنترنت. إنها مثل بوابة بين بيئة التحرير الخاصة بك وموطن مشروعك على GitHub!
+> 💡 **نصيحة للتنقل السريع**: استخدم قائمة الهامبرغر (☰) في أعلى اليسار للعودة إلى مستودع GitHub الخاص بك ورؤية التغييرات التي قمت بحفظها عبر الإنترنت. إنها مثل بوابة بين بيئة التحرير الخاصة بك وموطن مشروعك على GitHub!
 
-## تعزيز الوظائف باستخدام الإضافات
+## تحسين الوظائف باستخدام الإضافات
 
-تمامًا كما تحتوي ورشة العمل الخاصة بالحرفي على أدوات متخصصة للمهام المختلفة، يمكن تخصيص VSCode.dev باستخدام الإضافات التي تضيف قدرات محددة. تعالج هذه الإضافات التي طورها المجتمع احتياجات التطوير الشائعة مثل تنسيق الأكواد، المعاينة المباشرة، وتعزيز تكامل Git.
+كما يحتوي ورشة الحرفي على أدوات متخصصة لمهام مختلفة، يمكن تخصيص VSCode.dev باستخدام الإضافات التي تضيف قدرات محددة. تعالج هذه الإضافات التي طورها المجتمع احتياجات التطوير الشائعة مثل تنسيق الكود، العرض المباشر، وتعزيز تكامل Git.
 
-يستضيف سوق الإضافات آلاف الأدوات المجانية التي أنشأها المطورون حول العالم. تحل كل إضافة تحديات سير العمل الشائعة، مما يتيح لك بناء بيئة تطوير مخصصة تناسب احتياجاتك وتفضيلاتك الخاصة.
+يستضيف سوق الإضافات آلاف الأدوات المجانية التي أنشأها المطورون حول العالم. كل إضافة تحل تحديات سير العمل المحددة، مما يتيح لك بناء بيئة تطوير مخصصة تناسب احتياجاتك وتفضيلاتك الخاصة.
+
+```mermaid
+mindmap
+  root((Extension Ecosystem))
+    Essential Categories
+      Productivity
+        Live Server
+        Auto Rename Tag
+        Bracket Pair Colorizer
+        GitLens
+      Code Quality
+        Prettier
+        ESLint
+        Spell Checker
+        Error Lens
+      Language Support
+        HTML CSS Support
+        JavaScript ES6
+        Python Extension
+        Markdown Preview
+      Themes & UI
+        Dark+ Modern
+        Material Icon Theme
+        Peacock
+        Rainbow Brackets
+    Discovery Methods
+      Popular Rankings
+        Download Counts
+        User Ratings
+        Recent Updates
+        Community Reviews
+      Recommendations
+        Workspace Suggestions
+        Language-based
+        Workflow-specific
+        Team Standards
+```
 
 ### العثور على الإضافات المثالية
 
-سوق الإضافات منظم بشكل جيد، لذا لن تضيع أثناء البحث عما تحتاجه. إنه مصمم لمساعدتك في اكتشاف الأدوات المحددة وأشياء رائعة لم تكن تعرف بوجودها!
+سوق الإضافات منظم بشكل جيد للغاية، لذا لن تضيع أثناء البحث عما تحتاجه. تم تصميمه لمساعدتك في اكتشاف الأدوات المحددة وأشياء رائعة لم تكن تعرف بوجودها!
 
 **الوصول إلى السوق:**
 
-1. انقر على أيقونة الإضافات (🧩) في شريط النشاط
+1. انقر على رمز الإضافات (🧩) في شريط النشاط
 2. تصفح أو ابحث عن شيء محدد
 3. انقر على أي شيء يبدو مثيرًا للاهتمام لمعرفة المزيد عنه
 
 ![واجهة سوق الإضافات](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ar.png)
 
-**ما الذي ستجده هناك:**
+**ما ستراه هناك:**
 
 | القسم | ما بداخله | لماذا هو مفيد |
 |----------|---------|----------|
-| **المثبتة** | الإضافات التي قمت بإضافتها بالفعل | مجموعة أدوات البرمجة الخاصة بك |
+| **المثبتة** | الإضافات التي قمت بإضافتها بالفعل | مجموعة أدوات البرمجة الشخصية الخاصة بك |
 | **الشائعة** | المفضلة لدى الجميع | ما يوصي به معظم المطورين |
 | **الموصى بها** | اقتراحات ذكية لمشروعك | توصيات مفيدة من VSCode.dev |
 
 **ما يجعل التصفح سهلاً:**
-- كل إضافة تعرض التقييمات، عدد التنزيلات، ومراجعات المستخدمين الحقيقيين  
-- تحصل على لقطات شاشة ووصف واضح لما تقوم به كل إضافة  
-- كل شيء مُحدد بوضوح مع معلومات التوافق  
-- يتم اقتراح إضافات مشابهة لتتمكن من مقارنة الخيارات  
+- كل إضافة تعرض التقييمات، عدد التنزيلات، ومراجعات المستخدمين الحقيقية
+- تحصل على لقطات شاشة ووصف واضح لما تقوم به كل واحدة
+- كل شيء محدد بوضوح بمعلومات التوافق
+- يتم اقتراح إضافات مشابهة لتتمكن من مقارنة الخيارات
 
-### تثبيت الإضافات (سهل جدًا!)
+### تثبيت الإضافات (سهل للغاية!)
 
-إضافة ميزات جديدة لمحررك بسيطة مثل الضغط على زر. تثبيت الإضافات يتم في ثوانٍ ويبدأ العمل فورًا – لا حاجة لإعادة التشغيل أو الانتظار.
+إضافة قدرات جديدة إلى محررك بسيطة مثل النقر على زر. تثبت الإضافات في ثوانٍ وتبدأ العمل فورًا – لا حاجة لإعادة التشغيل أو الانتظار.
 
 **كل ما عليك فعله:**
 
-1. ابحث عما تحتاجه (جرب البحث عن "live server" أو "prettier")  
-2. اضغط على الإضافة التي تبدو جيدة لمعرفة المزيد من التفاصيل  
-3. اقرأ ما تقوم به وتحقق من التقييمات  
-4. اضغط على الزر الأزرق "تثبيت" وانتهى الأمر!  
+1. ابحث عما تريد (جرب البحث عن "live server" أو "prettier")
+2. انقر على واحدة تبدو جيدة لرؤية المزيد من التفاصيل
+3. اقرأ ما تقوم به وتحقق من التقييمات
+4. اضغط على زر "تثبيت" الأزرق وانتهى الأمر!
 
 ![تثبيت الإضافات](../../../../8-code-editor/images/install-extension.gif)
 
 **ما يحدث خلف الكواليس:**
-- يتم تنزيل الإضافة وإعدادها تلقائيًا  
-- تظهر الميزات الجديدة في واجهتك فورًا  
-- كل شيء يبدأ العمل فورًا (بجدية، بهذه السرعة!)  
-- إذا كنت مسجلًا الدخول، يتم مزامنة الإضافة مع جميع أجهزتك  
+- يتم تنزيل الإضافة وتثبيتها تلقائيًا
+- تظهر الميزات الجديدة في واجهتك فورًا
+- يبدأ كل شيء بالعمل فورًا (بجدية، إنه سريع جدًا!)
+- إذا كنت مسجلًا، يتم مزامنة الإضافة مع جميع أجهزتك
 
 **بعض الإضافات التي أوصي بالبدء بها:**
-- **Live Server**: شاهد تحديث موقعك في الوقت الفعلي أثناء البرمجة (هذه الإضافة مذهلة!)  
-- **Prettier**: تجعل الكود يبدو نظيفًا واحترافيًا تلقائيًا  
-- **Auto Rename Tag**: عند تغيير علامة HTML، يتم تحديث شريكها أيضًا  
-- **Bracket Pair Colorizer**: تُلون الأقواس بحيث لا تضيع أبدًا  
-- **GitLens**: تعزز ميزات Git الخاصة بك بمعلومات مفيدة كثيرة  
+- **Live Server**: شاهد تحديث موقعك في الوقت الحقيقي أثناء البرمجة (هذه مذهلة!)
+- **Prettier**: يجعل الكود الخاص بك يبدو نظيفًا واحترافيًا تلقائيًا
+- **Auto Rename Tag**: قم بتغيير علامة HTML واحدة وسيتم تحديث شريكها أيضًا
+- **Bracket Pair Colorizer**: يلون الأقواس بحيث لا تضيع أبدًا
+- **GitLens**: يعزز ميزات Git الخاصة بك بمعلومات مفيدة كثيرة
 
 ### تخصيص الإضافات الخاصة بك
 
-معظم الإضافات تأتي مع إعدادات يمكنك تعديلها لتعمل بالطريقة التي تناسبك. فكر في الأمر كضبط المقعد والمرايا في السيارة – لكل شخص تفضيلاته!
+تأتي معظم الإضافات مع إعدادات يمكنك تعديلها لجعلها تعمل بالطريقة التي تفضلها. فكر في الأمر مثل ضبط المقعد والمرايا في السيارة – لكل شخص تفضيلاته!
 
 **تعديل إعدادات الإضافات:**
 
-1. ابحث عن الإضافة المثبتة في لوحة الإضافات  
-2. ابحث عن رمز الترس الصغير (⚙️) بجانب اسمها واضغط عليه  
-3. اختر "إعدادات الإضافة" من القائمة المنسدلة  
-4. قم بتعديل الأمور حتى تشعر أنها مناسبة لأسلوب عملك  
+1. ابحث عن الإضافة المثبتة في لوحة الإضافات
+2. ابحث عن رمز الترس الصغير (⚙️) بجانب اسمها وانقر عليه
+3. اختر "إعدادات الإضافة" من القائمة المنسدلة
+4. قم بتعديل الأمور حتى تشعر أنها مناسبة لسير عملك
 
 ![تخصيص إعدادات الإضافات](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ar.png)
 
-**أشياء شائعة قد ترغب في تعديلها:**
-- كيفية تنسيق الكود الخاص بك (التبويبات مقابل المسافات، طول السطر، إلخ)  
-- اختصارات لوحة المفاتيح التي تُشغل إجراءات مختلفة  
-- أنواع الملفات التي يجب أن تعمل معها الإضافة  
-- تشغيل أو إيقاف ميزات محددة للحفاظ على الأمور بسيطة  
+**الأشياء الشائعة التي قد ترغب في تعديلها:**
+- كيفية تنسيق الكود الخاص بك (علامات التبويب مقابل المسافات، طول السطر، إلخ)
+- اختصارات لوحة المفاتيح التي تشغل إجراءات مختلفة
+- أنواع الملفات التي يجب أن تعمل معها الإضافة
+- تشغيل ميزات محددة أو إيقافها للحفاظ على الأمور بسيطة
 
 ### تنظيم الإضافات الخاصة بك
 
-مع اكتشاف المزيد من الإضافات الرائعة، سترغب في الحفاظ على مجموعتك مرتبة وتعمل بسلاسة. VSCode.dev يجعل إدارة هذا الأمر سهلًا للغاية.
+عندما تكتشف المزيد من الإضافات الرائعة، سترغب في الحفاظ على مجموعتك مرتبة وتعمل بسلاسة. يجعل VSCode.dev هذا الأمر سهلًا للغاية للإدارة.
 
 **خيارات إدارة الإضافات الخاصة بك:**
 
 | ما يمكنك فعله | متى يكون مفيدًا | نصيحة احترافية |
 |--------|---------|----------|
-| **تعطيل** | اختبار ما إذا كانت الإضافة تسبب مشاكل | أفضل من إلغاء التثبيت إذا كنت قد تحتاجها لاحقًا |
+| **تعطيل** | اختبار ما إذا كانت الإضافة تسبب مشاكل | أفضل من إلغاء التثبيت إذا كنت قد تحتاجها مرة أخرى |
 | **إلغاء التثبيت** | إزالة الإضافات التي لا تحتاجها تمامًا | يحافظ على بيئتك نظيفة وسريعة |
-| **التحديث** | الحصول على أحدث الميزات وإصلاحات الأخطاء | يحدث عادةً تلقائيًا، لكن يستحق التحقق |
+| **تحديث** | الحصول على أحدث الميزات وإصلاحات الأخطاء | يحدث عادةً تلقائيًا، ولكن يستحق التحقق |
 
 **كيف أحب إدارة الإضافات:**
-- كل بضعة أشهر، أراجع ما قمت بتثبيته وأزيل أي شيء لا أستخدمه  
-- أحافظ على تحديث الإضافات للحصول على أحدث التحسينات وإصلاحات الأمان  
-- إذا بدا شيء بطيئًا، أقوم بتعطيل الإضافات مؤقتًا لمعرفة ما إذا كانت أحدها السبب  
-- أقرأ ملاحظات التحديث عندما تحصل الإضافات على تحديثات كبيرة – أحيانًا تكون هناك ميزات جديدة رائعة!  
+- كل بضعة أشهر، أراجع ما قمت بتثبيته وأزيل أي شيء لا أستخدمه
+- أحافظ على تحديث الإضافات للحصول على أحدث التحسينات وإصلاحات الأمان
+- إذا بدا شيء بطيئًا، أقوم بتعطيل الإضافات مؤقتًا لمعرفة ما إذا كانت واحدة منها هي السبب
+- أقرأ ملاحظات التحديث عندما تحصل الإضافات على تحديثات كبيرة – أحيانًا تكون هناك ميزات جديدة رائعة!
+
+> ⚠️ **نصيحة الأداء**: الإضافات رائعة، ولكن وجود الكثير منها يمكن أن يبطئ الأمور. ركز على تلك التي تجعل حياتك أسهل حقًا ولا تخف من إلغاء تثبيت تلك التي لا تستخدمها أبدًا.
+
+### 🎯 مراجعة تربوية: تخصيص بيئة التطوير
+
+**فهم الهيكلية**: تعلمت كيفية تخصيص بيئة تطوير احترافية باستخدام إضافات تم إنشاؤها بواسطة المجتمع. هذا يعكس كيف تبني فرق التطوير في المؤسسات سلاسل أدوات موحدة.
+
+**المفاهيم الرئيسية التي تم إتقانها**:
+- **اكتشاف الإضافات**: العثور على أدوات تحل تحديات التطوير المحددة
+- **تكوين البيئة**: تخصيص الأدوات لتناسب التفضيلات الشخصية أو الفريق
+- **تحسين الأداء**: تحقيق التوازن بين الوظائف وأداء النظام
+- **التعاون المجتمعي**: الاستفادة من الأدوات التي أنشأها مجتمع المطورين العالمي
+
+**الاتصال بالصناعة**: أنظمة الإضافات تدعم منصات التطوير الرئيسية مثل VS Code، Chrome DevTools، و IDEs الحديثة. فهم كيفية تقييم، تثبيت، وتكوين الإضافات أمر ضروري لعمليات التطوير الاحترافية.
+
+**سؤال للتفكير**: كيف ستتعامل مع إعداد بيئة تطوير موحدة لفريق من 10 مطورين؟ ضع في اعتبارك التناسق، الأداء، والتفضيلات الفردية.
+
+## 📈 جدول زمني لإتقان تطوير السحابة
+
+```mermaid
+timeline
+    title Professional Cloud Development Journey
+    
+    section Platform Foundations
+        Cloud Development Understanding
+            : Master web-based editing concepts
+            : Connect GitHub integration patterns
+            : Navigate professional interfaces
+    
+    section Workflow Mastery
+        File & Project Management
+            : Create organized project structures
+            : Master syntax highlighting benefits
+            : Handle multi-file editing workflows
+        
+        Version Control Integration
+            : Understand Git visualization
+            : Practice commit message standards
+            : Master change tracking workflows
+    
+    section Environment Customization
+        Extension Ecosystem
+            : Discover productivity extensions
+            : Configure development preferences
+            : Optimize performance vs functionality
+        
+        Professional Setup
+            : Build consistent workflows
+            : Create reusable configurations
+            : Establish team standards
+    
+    section Industry Readiness
+        Cloud-First Development
+            : Master remote development practices
+            : Understand collaborative workflows
+            : Build platform-independent skills
+        
+        Professional Practices
+            : Follow industry standards
+            : Create maintainable workflows
+            : Prepare for team environments
+```
+
+**🎓 علامة التخرج**: لقد أتقنت بنجاح تطوير السحابة باستخدام نفس الأدوات وسير العمل الذي يستخدمه المطورون المحترفون في شركات التكنولوجيا الكبرى. تمثل هذه المهارات مستقبل تطوير البرمجيات.
 
-> ⚠️ **نصيحة الأداء**: الإضافات رائعة، لكن وجود الكثير منها يمكن أن يبطئ الأمور. ركز على تلك التي تجعل حياتك أسهل حقًا ولا تخف من إلغاء تثبيت تلك التي لا تستخدمها أبدًا.
+**🔄 قدرات المستوى التالي**:
+- جاهز لاستكشاف منصات تطوير السحابة المتقدمة (Codespaces، GitPod)
+- مستعد للعمل في فرق تطوير موزعة
+- مجهز للمساهمة في مشاريع مفتوحة المصدر عالميًا
+- تم إعداد الأساس لممارسات DevOps الحديثة والتكامل المستمر
 
-## تحدي GitHub Copilot Agent 🚀
+## تحدي وكيل GitHub Copilot 🚀
 
 مثل النهج المنظم الذي تستخدمه ناسا للمهام الفضائية، يتضمن هذا التحدي تطبيقًا منهجيًا لمهارات VSCode.dev في سيناريو سير عمل كامل.
 
-**الهدف:** إثبات الكفاءة مع VSCode.dev من خلال إنشاء سير عمل شامل لتطوير الويب.
+**الهدف:** إثبات الكفاءة مع VSCode.dev من خلال إنشاء سير عمل تطوير ويب شامل.
 
-**متطلبات المشروع:** باستخدام وضع Agent، أكمل هذه المهام:
-1. قم بتفريع مستودع موجود أو أنشئ واحدًا جديدًا  
-2. قم بإنشاء هيكل مشروع وظيفي مع ملفات HTML وCSS وJavaScript  
-3. قم بتثبيت وتكوين ثلاث إضافات تعزز التطوير  
-4. مارس التحكم في الإصدارات مع رسائل الالتزام الوصفية  
-5. جرب إنشاء وتعديل فروع الميزات  
-6. وثق العملية والتعلم في ملف README.md  
+**متطلبات المشروع:** باستخدام وضع الوكيل، أكمل هذه المهام:
+1. قم بتفريع مستودع موجود أو أنشئ واحدًا جديدًا
+2. قم بإنشاء هيكل مشروع وظيفي مع ملفات HTML، CSS، و JavaScript
+3. قم بتثبيت وتكوين ثلاث إضافات تعزز التطوير
+4. مارس التحكم في الإصدار مع رسائل الالتزام الوصفية
+5. جرب إنشاء وتعديل فروع الميزات
+6. وثق العملية والتعلم في ملف README.md
 
-هذا التمرين يجمع كل مفاهيم VSCode.dev في سير عمل عملي يمكن تطبيقه على مشاريع التطوير المستقبلية.
+يعمل هذا التمرين على دمج جميع مفاهيم VSCode.dev في سير عمل عملي يمكن تطبيقه على مشاريع التطوير المستقبلية.
 
-تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## المهمة
 
-حان الوقت لتجربة هذه المهارات عمليًا! لدي مشروع عملي يتيح لك ممارسة كل ما غطيناه: [إنشاء موقع ويب للسيرة الذاتية باستخدام VSCode.dev](./assignment.md)
+حان الوقت لتجربة هذه المهارات في مشروع عملي! لدي مشروع عملي يتيح لك ممارسة كل ما غطيناه: [إنشاء موقع ويب للسيرة الذاتية باستخدام VSCode.dev](./assignment.md)
 
-هذا التمرين يرشدك خلال بناء موقع ويب احترافي للسيرة الذاتية بالكامل في متصفحك. ستستخدم جميع ميزات VSCode.dev التي استكشفناها، وبنهاية الأمر، سيكون لديك موقع ويب رائع وثقة قوية في سير العمل الجديد الخاص بك.
+تأخذك هذه المهمة خطوة بخطوة لبناء موقع ويب احترافي للسيرة الذاتية بالكامل في متصفحك. ستستخدم جميع ميزات VSCode.dev التي استكشفناها، وبنهاية الأمر، سيكون لديك موقع ويب رائع وثقة قوية في سير العمل الجديد الخاص بك.
 
 ## استمر في الاستكشاف وتنمية مهاراتك
 
-لديك الآن أساس قوي، لكن هناك الكثير من الأشياء الرائعة لاستكشافها! إليك بعض الموارد والأفكار لتطوير مهاراتك مع VSCode.dev:
+لديك الآن أساس قوي، ولكن هناك الكثير من الأشياء الرائعة لاستكشافها! إليك بعض الموارد والأفكار للارتقاء بمهاراتك في VSCode.dev إلى المستوى التالي:
 
 **وثائق رسمية تستحق الإشارة إليها:**
-- [وثائق VSCode Web](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – الدليل الكامل للتحرير المستند إلى المتصفح  
-- [GitHub Codespaces](https://docs.github.com/en/codespaces) – عندما تريد المزيد من القوة في السحابة  
+- [وثائق VSCode Web](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – الدليل الكامل للتحرير المستند إلى المتصفح
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) – عندما تريد المزيد من القوة في السحابة
 
 **ميزات رائعة لتجربتها بعد ذلك:**
-- **اختصارات لوحة المفاتيح**: تعلم تركيبات المفاتيح التي ستجعلك تشعر وكأنك نينجا البرمجة  
-- **إعدادات مساحة العمل**: قم بإعداد بيئات مختلفة لأنواع مختلفة من المشاريع  
-- **مساحات العمل متعددة الجذور**: العمل على مستودعات متعددة في نفس الوقت (مفيد جدًا!)  
-- **تكامل الطرفية**: الوصول إلى أدوات سطر الأوامر مباشرة في متصفحك  
+- **اختصارات لوحة المفاتيح**: تعلم تركيبات المفاتيح التي ستجعلك تشعر وكأنك نينجا برمجي
+- **إعدادات مساحة العمل**: قم بإعداد بيئات مختلفة لأنواع مختلفة من المشاريع
+- **مساحات العمل متعددة الجذور**: العمل على مستودعات متعددة في نفس الوقت (مفيد جدًا!)
+- **تكامل الطرفية**: الوصول إلى أدوات سطر الأوامر مباشرة في متصفحك
 
-**أفكار للتدريب:**
-- انضم إلى بعض المشاريع مفتوحة المصدر وساهم باستخدام VSCode.dev – إنها طريقة رائعة للعطاء!  
-- جرب إضافات مختلفة للعثور على الإعداد المثالي الخاص بك  
-- أنشئ قوالب مشاريع لأنواع المواقع التي تبنيها غالبًا  
-- مارس سير عمل Git مثل إنشاء الفروع والدمج – هذه المهارات ذهبية في المشاريع الجماعية  
+**أفكار للممارسة:**
+- انضم إلى بعض المشاريع مفتوحة المصدر وساهم باستخدام VSCode.dev – إنها طريقة رائعة للعطاء!
+- جرب إضافات مختلفة للعثور على الإعداد المثالي
+- قم بإنشاء قوالب مشاريع لأنواع المواقع التي تبنيها غالبًا
+- مارس سير عمل Git مثل إنشاء الفروع والدمج – هذه المهارات ذهبية في المشاريع الجماعية
 
 ---
 
-**لقد أتقنت تطوير البرمجيات المستند إلى المتصفح!** 🎉 مثلما سمحت الأدوات المحمولة للعلماء بإجراء أبحاث في مواقع نائية، يتيح لك VSCode.dev البرمجة الاحترافية من أي جهاز متصل بالإنترنت.
+**لقد أتقنت تطوير البرمجيات المستندة إلى المتصفح!** 🎉 مثلما سمحت اختراع الأدوات المحمولة للعلماء بإجراء أبحاث في مواقع نائية، يتيح VSCode.dev البرمجة الاحترافية من أي جهاز متصل بالإنترنت.
 
-تعكس هذه المهارات ممارسات الصناعة الحالية – العديد من المطورين المحترفين يستخدمون بيئات تطوير قائمة على السحابة لمرونتها وسهولة الوصول إليها. لقد تعلمت سير عمل يتناسب مع المشاريع الفردية والتعاون الجماعي الكبير.
+تعكس هذه المهارات ممارسات الصناعة الحالية – يستخدم العديد من المطورين المحترفين بيئات تطوير قائمة على السحابة لمرونتها وسهولة الوصول إليها. لقد تعلمت سير عمل يتوسع من المشاريع الفردية إلى التعاون الجماعي الكبير.
 
 طبق هذه التقنيات في مشروع التطوير القادم الخاص بك! 🚀
 
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/ar/9-chat-project/README.md b/translations/ar/9-chat-project/README.md
index d69f8d03ac..d876c4d8f8 100644
--- a/translations/ar/9-chat-project/README.md
+++ b/translations/ar/9-chat-project/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46d665af66e51524598af34a42b9b663",
-  "translation_date": "2025-10-22T14:12:57+00:00",
+  "original_hash": "2066c17078e9d18b5e309f31d8e8bc24",
+  "translation_date": "2025-11-03T12:33:53+00:00",
   "source_file": "9-chat-project/README.md",
   "language_code": "ar"
 }
@@ -13,32 +13,95 @@ CO_OP_TRANSLATOR_METADATA:
 
 في هذه الدرس، سنقوم بإنشاء مساعد دردشة بالذكاء الاصطناعي باستخدام HTML، CSS، JavaScript وبعض التكامل الخلفي. ستكتشف كيف يمكن للمهارات التي تعلمتها أن تتصل بخدمات ذكاء اصطناعي قوية تفهم السياق وتولد ردودًا ذات معنى.
 
-فكر في الذكاء الاصطناعي كأنه مكتبة ضخمة يمكنها ليس فقط العثور على المعلومات ولكن أيضًا صياغتها في إجابات متماسكة ومخصصة لأسئلتك المحددة. بدلاً من البحث في آلاف الصفحات، تحصل على ردود مباشرة وسياقية.
+فكر في الذكاء الاصطناعي كأنه مكتبة ضخمة يمكنها ليس فقط العثور على المعلومات، بل أيضًا صياغتها في إجابات متماسكة ومخصصة لأسئلتك المحددة. بدلاً من البحث عبر آلاف الصفحات، تحصل على ردود مباشرة وسياقية.
 
-يحدث التكامل من خلال تقنيات الويب المألوفة التي تعمل معًا. HTML ينشئ واجهة الدردشة، CSS يتولى التصميم البصري، JavaScript يدير التفاعلات مع المستخدم، وواجهة برمجية خلفية تربط كل شيء بخدمات الذكاء الاصطناعي. يشبه الأمر كيف تعمل أقسام مختلفة من الأوركسترا معًا لتكوين سيمفونية.
+يحدث التكامل من خلال تقنيات الويب المألوفة التي تعمل معًا. HTML ينشئ واجهة الدردشة، CSS يتولى التصميم البصري، JavaScript يدير التفاعلات مع المستخدم، وواجهة برمجة التطبيقات الخلفية تربط كل شيء بخدمات الذكاء الاصطناعي. يشبه ذلك كيف تعمل أقسام مختلفة من الأوركسترا معًا لتقديم سيمفونية.
 
-نحن نبني جسرًا بين التواصل البشري الطبيعي ومعالجة الآلة. ستتعلم التنفيذ الفني لتكامل خدمات الذكاء الاصطناعي وأنماط التصميم التي تجعل التفاعلات تبدو بديهية.
+نحن نبني جسرًا بين التواصل البشري الطبيعي ومعالجة الآلة. ستتعلم التنفيذ الفني لتكامل خدمات الذكاء الاصطناعي وأنماط التصميم التي تجعل التفاعلات تبدو طبيعية.
 
-بنهاية هذا الدرس، سيصبح تكامل الذكاء الاصطناعي أقل غموضًا وأكثر كأنه واجهة برمجية أخرى يمكنك العمل معها. ستفهم الأنماط الأساسية التي تشغل تطبيقات مثل ChatGPT وClaude باستخدام نفس مبادئ تطوير الويب التي تعلمتها.
+بنهاية هذا الدرس، سيصبح تكامل الذكاء الاصطناعي أقل غموضًا وأكثر كأنه واجهة برمجة تطبيقات أخرى يمكنك العمل معها. ستفهم الأنماط الأساسية التي تشغل تطبيقات مثل ChatGPT وClaude باستخدام نفس مبادئ تطوير الويب التي كنت تتعلمها.
+
+## ⚡ ما يمكنك القيام به في الـ 5 دقائق القادمة
+
+**مسار البداية السريعة للمطورين المشغولين**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Get GitHub token]
+    B --> C[Test AI playground]
+    C --> D[Copy Python code]
+    D --> E[See AI responses]
+```
+
+- **الدقيقة الأولى**: قم بزيارة [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) وأنشئ رمز وصول شخصي
+- **الدقيقة الثانية**: اختبر التفاعلات مع الذكاء الاصطناعي مباشرة في واجهة الملعب
+- **الدقيقة الثالثة**: انقر على علامة التبويب "Code" ونسخ مقتطف Python
+- **الدقيقة الرابعة**: قم بتشغيل الكود محليًا باستخدام الرمز الخاص بك: `GITHUB_TOKEN=your_token python test.py`
+- **الدقيقة الخامسة**: شاهد أول استجابة من الذكاء الاصطناعي يتم إنشاؤها من الكود الخاص بك
+
+**كود الاختبار السريع**:
+```python
+import os
+from openai import OpenAI
+
+client = OpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key="your_token_here"
+)
+
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Hello AI!"}],
+    model="openai/gpt-4o-mini"
+)
+
+print(response.choices[0].message.content)
+```
+
+**لماذا هذا مهم**: في 5 دقائق، ستختبر سحر التفاعل البرمجي مع الذكاء الاصطناعي. هذا يمثل حجر الأساس الذي يشغل كل تطبيقات الذكاء الاصطناعي التي تستخدمها.
 
 إليك كيف سيبدو مشروعك النهائي:
 
 ![واجهة تطبيق الدردشة تظهر محادثة بين المستخدم ومساعد الذكاء الاصطناعي](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ar.png)
 
+## 🗺️ رحلتك التعليمية عبر تطوير تطبيقات الذكاء الاصطناعي
+
+```mermaid
+journey
+    title From Web Development to AI Integration
+    section Understanding AI Foundations
+      Discover generative AI concepts: 4: You
+      Explore GitHub Models platform: 6: You
+      Master AI parameters and prompts: 8: You
+    section Backend Integration
+      Build Python API server: 5: You
+      Implement AI function calls: 7: You
+      Handle async operations: 8: You
+    section Frontend Development
+      Create modern chat interface: 6: You
+      Master real-time interactions: 8: You
+      Build responsive user experience: 9: You
+    section Professional Application
+      Deploy complete AI system: 7: You
+      Optimize performance patterns: 8: You
+      Create production-ready app: 9: You
+```
+
+**وجهة رحلتك**: بنهاية هذا الدرس، ستكون قد أنشأت تطبيقًا كاملًا مدعومًا بالذكاء الاصطناعي باستخدام نفس التقنيات والأنماط التي تشغل مساعدي الذكاء الاصطناعي الحديثين مثل ChatGPT وClaude وGoogle Bard.
+
 ## فهم الذكاء الاصطناعي: من الغموض إلى الإتقان
 
-قبل الغوص في الكود، دعونا نفهم ما نعمل عليه. إذا كنت قد استخدمت واجهات برمجية من قبل، فأنت تعرف النمط الأساسي: إرسال طلب، تلقي استجابة.
+قبل الغوص في الكود، دعونا نفهم ما نعمل عليه. إذا كنت قد استخدمت واجهات برمجة التطبيقات من قبل، فأنت تعرف النمط الأساسي: إرسال طلب، تلقي استجابة.
 
-واجهات برمجية الذكاء الاصطناعي تتبع هيكلًا مشابهًا، ولكن بدلاً من استرجاع بيانات مخزنة مسبقًا من قاعدة بيانات، فإنها تولد ردودًا جديدة بناءً على أنماط تعلمتها من كميات هائلة من النصوص. فكر في الأمر كأنه الفرق بين نظام فهرسة مكتبة وأمين مكتبة يعرف كيفية صياغة المعلومات من مصادر متعددة.
+واجهات برمجة تطبيقات الذكاء الاصطناعي تتبع هيكلًا مشابهًا، ولكن بدلاً من استرجاع بيانات مخزنة مسبقًا من قاعدة بيانات، فإنها تولد ردودًا جديدة بناءً على أنماط تعلمتها من كميات هائلة من النصوص. فكر في الأمر كأنه الفرق بين نظام فهرسة مكتبة وأمين مكتبة ذو معرفة واسعة يمكنه صياغة المعلومات من مصادر متعددة.
 
 ### ما هو "الذكاء الاصطناعي التوليدي" حقًا؟
 
-فكر في كيف سمحت حجر رشيد للعلماء بفهم الهيروغليفية المصرية من خلال العثور على أنماط بين اللغات المعروفة وغير المعروفة. نماذج الذكاء الاصطناعي تعمل بطريقة مشابهة – فهي تجد أنماطًا في كميات هائلة من النصوص لفهم كيفية عمل اللغة، ثم تستخدم تلك الأنماط لتوليد ردود مناسبة على أسئلة جديدة.
+تأمل كيف سمحت حجر رشيد للعلماء بفهم الهيروغليفية المصرية من خلال العثور على أنماط بين اللغات المعروفة وغير المعروفة. نماذج الذكاء الاصطناعي تعمل بطريقة مشابهة – فهي تجد أنماطًا في كميات هائلة من النصوص لفهم كيفية عمل اللغة، ثم تستخدم تلك الأنماط لتوليد ردود مناسبة على الأسئلة الجديدة.
 
-**دعني أوضح هذا بمقارنة بسيطة:**
+**دعني أوضح ذلك بمقارنة بسيطة:**
 - **قاعدة بيانات تقليدية**: مثل طلب شهادة ميلادك – تحصل على نفس الوثيقة في كل مرة
 - **محرك بحث**: مثل طلب أمين مكتبة العثور على كتب عن القطط – يظهر لك ما هو متاح
-- **الذكاء الاصطناعي التوليدي**: مثل سؤال صديق مطلع عن القطط – يخبرك بأشياء مثيرة للاهتمام بكلماته الخاصة، مخصصة لما تريد معرفته
+- **الذكاء الاصطناعي التوليدي**: مثل سؤال صديق ذو معرفة عن القطط – يخبرك بأشياء مثيرة للاهتمام بكلماته الخاصة، مخصصة لما تريد معرفته
 
 ```mermaid
 graph LR
@@ -50,7 +113,7 @@ graph LR
     F[Training Data<br/>Books, Articles, Web] --> B
 ```
 
-### كيف تتعلم نماذج الذكاء الاصطناعي (النسخة البسيطة)
+### كيف تتعلم نماذج الذكاء الاصطناعي (النسخة المبسطة)
 
 تتعلم نماذج الذكاء الاصطناعي من خلال التعرض لمجموعات بيانات ضخمة تحتوي على نصوص من كتب، مقالات، ومحادثات. من خلال هذه العملية، تحدد الأنماط في:
 - كيفية هيكلة الأفكار في التواصل الكتابي
@@ -58,13 +121,13 @@ graph LR
 - كيفية تدفق المحادثات عادةً
 - الفروقات السياقية بين التواصل الرسمي وغير الرسمي
 
-**يشبه الأمر كيف يفك علماء الآثار رموز اللغات القديمة**: يحللون آلاف الأمثلة لفهم القواعد، المفردات، والسياق الثقافي، ليصبحوا في النهاية قادرين على تفسير نصوص جديدة باستخدام تلك الأنماط المكتسبة.
+**يشبه ذلك كيف يفك علماء الآثار رموز اللغات القديمة**: يحللون آلاف الأمثلة لفهم القواعد، المفردات، والسياق الثقافي، وفي النهاية يصبحون قادرين على تفسير نصوص جديدة باستخدام تلك الأنماط المكتسبة.
 
-### لماذا نماذج GitHub؟
+### لماذا GitHub Models؟
 
-نستخدم نماذج GitHub لسبب عملي جدًا – فهي تمنحنا الوصول إلى ذكاء اصطناعي على مستوى المؤسسات دون الحاجة إلى إعداد بنية تحتية للذكاء الاصطناعي الخاصة بنا (والتي، صدقني، لا تريد القيام بها الآن!). فكر في الأمر كأنه استخدام واجهة برمجية للطقس بدلاً من محاولة التنبؤ بالطقس بنفسك عن طريق إعداد محطات الطقس في كل مكان.
+نستخدم GitHub Models لسبب عملي جدًا – فهو يمنحنا الوصول إلى ذكاء اصطناعي على مستوى المؤسسات دون الحاجة إلى إعداد بنية تحتية خاصة بالذكاء الاصطناعي (والتي، صدقني، لا تريد القيام بها الآن!). فكر في الأمر كأنه استخدام واجهة برمجة تطبيقات الطقس بدلاً من محاولة التنبؤ بالطقس بنفسك عن طريق إعداد محطات الطقس في كل مكان.
 
-إنه أساسًا "الذكاء الاصطناعي كخدمة"، وأفضل جزء؟ يمكنك البدء مجانًا، لذا يمكنك التجربة دون القلق بشأن تكاليف كبيرة.
+إنه ببساطة "الذكاء الاصطناعي كخدمة"، وأفضل جزء؟ يمكنك البدء مجانًا، لذا يمكنك التجربة دون القلق بشأن تكاليف باهظة.
 
 ```mermaid
 graph LR
@@ -76,15 +139,68 @@ graph LR
     B --> A
 ```
 
-سنستخدم نماذج GitHub لتكاملنا الخلفي، والتي توفر الوصول إلى قدرات ذكاء اصطناعي على مستوى احترافي من خلال واجهة سهلة الاستخدام للمطورين. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) يعمل كبيئة اختبار حيث يمكنك تجربة نماذج ذكاء اصطناعي مختلفة وفهم قدراتها قبل تنفيذها في الكود.
+سنستخدم GitHub Models لتكاملنا الخلفي، الذي يوفر الوصول إلى قدرات ذكاء اصطناعي على مستوى احترافي من خلال واجهة سهلة الاستخدام للمطورين. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) يعمل كبيئة اختبار حيث يمكنك تجربة نماذج ذكاء اصطناعي مختلفة وفهم قدراتها قبل تنفيذها في الكود.
+
+## 🧠 نظام تطوير تطبيقات الذكاء الاصطناعي
+
+```mermaid
+mindmap
+  root((AI Development))
+    Understanding AI
+      Generative Models
+        Pattern Recognition
+        Content Generation
+        Context Understanding
+        Response Synthesis
+      AI Parameters
+        Temperature Control
+        Token Limits
+        Top-p Filtering
+        System Prompts
+    Backend Architecture
+      API Integration
+        GitHub Models
+        Authentication
+        Request Handling
+        Error Management
+      Python Infrastructure
+        FastAPI Framework
+        Async Operations
+        Environment Security
+        CORS Configuration
+    Frontend Experience
+      Chat Interface
+        Real-time Updates
+        Message History
+        User Feedback
+        Loading States
+      Modern Web Tech
+        ES6 Classes
+        Async/Await
+        DOM Manipulation
+        Event Handling
+    Professional Patterns
+      Security Best Practices
+        Token Management
+        Input Validation
+        XSS Prevention
+        Error Boundaries
+      Production Readiness
+        Performance Optimization
+        Responsive Design
+        Accessibility
+        Testing Strategies
+```
+
+**المبدأ الأساسي**: تطوير تطبيقات الذكاء الاصطناعي يجمع بين مهارات تطوير الويب التقليدية وتكامل خدمات الذكاء الاصطناعي، مما يخلق تطبيقات ذكية تبدو طبيعية وتفاعلية للمستخدمين.
 
 ![واجهة GitHub Models AI Playground مع اختيار النموذج ومنطقة الاختبار](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ar.png)
 
-**إليك ما يجعل الملعب مفيدًا للغاية:**
+**ما الذي يجعل الملعب مفيدًا جدًا:**
 - **جرب** نماذج ذكاء اصطناعي مختلفة مثل GPT-4o-mini، Claude، وغيرها (كلها مجانية!)
 - **اختبر** أفكارك ومطالباتك قبل كتابة أي كود
 - **احصل على** مقتطفات كود جاهزة للاستخدام بلغتك البرمجية المفضلة
-- **عدل** الإعدادات مثل مستوى الإبداع وطول الرد لترى كيف تؤثر على النتائج
+- **عدل** الإعدادات مثل مستوى الإبداع وطول الاستجابة لترى كيف تؤثر على النتائج
 
 بمجرد أن تجرب قليلاً، فقط انقر على علامة التبويب "Code" واختر لغتك البرمجية للحصول على كود التنفيذ الذي تحتاجه.
 
@@ -92,11 +208,11 @@ graph LR
 
 ## إعداد تكامل الخلفية باستخدام Python
 
-الآن دعونا ننفذ التكامل مع الذكاء الاصطناعي باستخدام Python. Python ممتازة لتطبيقات الذكاء الاصطناعي بسبب بساطة صياغتها ومكتباتها القوية. سنبدأ بالكود من ملعب نماذج GitHub ثم نعيد صياغته ليصبح وظيفة قابلة لإعادة الاستخدام وجاهزة للإنتاج.
+الآن دعونا ننفذ التكامل مع الذكاء الاصطناعي باستخدام Python. Python ممتازة لتطبيقات الذكاء الاصطناعي بسبب بساطة صياغتها ومكتباتها القوية. سنبدأ بالكود من ملعب GitHub Models ثم نعيد صياغته ليصبح وظيفة قابلة لإعادة الاستخدام وجاهزة للإنتاج.
 
 ### فهم التنفيذ الأساسي
 
-عندما تحصل على كود Python من الملعب، سيبدو شيئًا كهذا. لا تقلق إذا بدا كثيرًا في البداية – دعونا نمر عليه خطوة بخطوة:
+عندما تحصل على كود Python من الملعب، سيبدو كالتالي. لا تقلق إذا بدا كثيرًا في البداية – دعونا نمر عليه خطوة بخطوة:
 
 ```python
 """Run this model in Python
@@ -113,7 +229,6 @@ client = OpenAI(
     api_key=os.environ["GITHUB_TOKEN"],
 )
 
-```python
 response = client.chat.completions.create(
     messages=[
         {
@@ -134,17 +249,17 @@ response = client.chat.completions.create(
 print(response.choices[0].message.content)
 ```
 
-**إليك ما يحدث في هذا الكود:**
+**ما الذي يحدث في هذا الكود:**
 - **نستورد** الأدوات التي نحتاجها: `os` لقراءة متغيرات البيئة و`OpenAI` للتواصل مع الذكاء الاصطناعي
 - **نقوم بإعداد** عميل OpenAI للإشارة إلى خوادم الذكاء الاصطناعي الخاصة بـ GitHub بدلاً من OpenAI مباشرة
 - **نقوم بالمصادقة** باستخدام رمز GitHub خاص (المزيد عن ذلك لاحقًا!)
-- **نهيكل** محادثتنا بأدوار مختلفة – فكر فيها كأنك تعد مشهدًا لمسرحية
-- **نرسل** طلبنا إلى الذكاء الاصطناعي مع بعض معلمات الضبط الدقيقة
-- **نستخرج** النص الفعلي للرد من جميع البيانات التي تعود
+- **نهيكل** محادثتنا بأدوار مختلفة – فكر فيها كإعداد المشهد لمسرحية
+- **نرسل** طلبنا إلى الذكاء الاصطناعي مع بعض معلمات الضبط
+- **نستخرج** النص الفعلي للاستجابة من جميع البيانات التي تعود
 
 ### فهم أدوار الرسائل: إطار عمل المحادثة مع الذكاء الاصطناعي
 
-المحادثات مع الذكاء الاصطناعي تستخدم هيكلًا محددًا بأدوار مختلفة تخدم أغراضًا متميزة:
+تستخدم محادثات الذكاء الاصطناعي هيكلًا محددًا بأدوار مختلفة تخدم أغراضًا متميزة:
 
 ```python
 messages=[
@@ -159,28 +274,28 @@ messages=[
 ]
 ```
 
-**فكر فيها كأنك توجه مسرحية:**
+**فكر فيها كإخراج مسرحية:**
 - **دور النظام**: مثل تعليمات المسرح للممثل – يخبر الذكاء الاصطناعي كيف يتصرف، وما الشخصية التي يجب أن يتبناها، وكيف يرد
 - **دور المستخدم**: السؤال الفعلي أو الرسالة من الشخص الذي يستخدم التطبيق
-- **دور المساعد**: رد الذكاء الاصطناعي (لا ترسله، لكنه يظهر في تاريخ المحادثة)
+- **دور المساعد**: استجابة الذكاء الاصطناعي (لا ترسل هذا، لكنه يظهر في تاريخ المحادثة)
 
-**تشبيه في العالم الحقيقي**: تخيل أنك تقدم صديقًا لشخص ما في حفلة:
+**تشبيه واقعي**: تخيل أنك تقدم صديقًا لشخص ما في حفلة:
 - **رسالة النظام**: "هذا صديقي سارة، هي طبيبة رائعة في شرح المفاهيم الطبية بطريقة بسيطة"
 - **رسالة المستخدم**: "هل يمكنك شرح كيفية عمل اللقاحات؟"
-- **رد المساعد**: سارة ترد كطبيبة ودودة، وليس كمحامية أو طاهية
+- **استجابة المساعد**: سارة ترد كطبيبة ودودة، وليس كمحامية أو طاهية
 
-### فهم معلمات الذكاء الاصطناعي: ضبط سلوك الرد
+### فهم معلمات الذكاء الاصطناعي: ضبط سلوك الاستجابة
 
-المعلمات الرقمية في طلبات واجهات برمجية الذكاء الاصطناعي تتحكم في كيفية توليد النموذج للردود. هذه الإعدادات تسمح لك بضبط سلوك الذكاء الاصطناعي لحالات استخدام مختلفة:
+تتحكم المعلمات الرقمية في استدعاءات واجهات برمجة تطبيقات الذكاء الاصطناعي في كيفية توليد النموذج للاستجابات. تتيح لك هذه الإعدادات ضبط سلوك الذكاء الاصطناعي لحالات الاستخدام المختلفة:
 
 #### درجة الحرارة (0.0 إلى 2.0): مؤشر الإبداع
 
-**ما الذي تفعله**: تتحكم في مدى إبداع أو توقع ردود الذكاء الاصطناعي.
+**ما الذي تفعله**: تتحكم في مدى إبداع أو توقع استجابات الذكاء الاصطناعي.
 
-**فكر فيها كأنها مستوى ارتجال عازف الجاز:**
+**فكر فيها كمستوى ارتجال عازف الجاز:**
 - **درجة الحرارة = 0.1**: يعزف نفس اللحن تمامًا في كل مرة (متوقع للغاية)
-- **درجة الحرارة = 0.7**: يضيف بعض التغييرات اللطيفة مع البقاء مألوفًا (إبداع متوازن)
-- **درجة الحرارة = 1.5**: ارتجال كامل مع منعطفات غير متوقعة (غير متوقع للغاية)
+- **درجة الحرارة = 0.7**: يضيف بعض التغييرات اللطيفة مع الحفاظ على التعرف (إبداع متوازن)
+- **درجة الحرارة = 1.5**: ارتجال كامل مع تحولات غير متوقعة (غير متوقع للغاية)
 
 ```python
 # Very predictable responses (good for factual questions)
@@ -196,12 +311,12 @@ response = client.chat.completions.create(
 )
 ```
 
-#### الحد الأقصى للرموز (1 إلى 4096+): التحكم في طول الرد
+#### الحد الأقصى للرموز (1 إلى 4096+): التحكم في طول الاستجابة
 
-**ما الذي تفعله**: تحدد حدًا لطول رد الذكاء الاصطناعي.
+**ما الذي تفعله**: تحدد حدًا لطول استجابة الذكاء الاصطناعي.
 
-**فكر في الرموز كأنها تعادل الكلمات تقريبًا** (حوالي 1 رمز = 0.75 كلمة في الإنجليزية):
-- **max_tokens=50**: قصير وموجز (مثل رسالة نصية)
+**فكر في الرموز كأنها تعادل الكلمات تقريبًا** (حوالي 1 رمز = 0.75 كلمة بالإنجليزية):
+- **max_tokens=50**: قصير ومباشر (مثل رسالة نصية)
 - **max_tokens=500**: فقرة أو اثنتين
 - **max_tokens=2000**: شرح مفصل مع أمثلة
 
@@ -221,18 +336,18 @@ response = client.chat.completions.create(
 
 #### Top_p (0.0 إلى 1.0): مؤشر التركيز
 
-**ما الذي تفعله**: تتحكم في مدى تركيز الذكاء الاصطناعي على الردود الأكثر احتمالًا.
+**ما الذي تفعله**: تتحكم في مدى تركيز الذكاء الاصطناعي على الاستجابات الأكثر احتمالًا.
 
 **تخيل الذكاء الاصطناعي لديه مفردات ضخمة، مرتبة حسب مدى احتمال كل كلمة:**
-- **top_p=0.1**: يأخذ في الاعتبار أعلى 10% من الكلمات الأكثر احتمالًا (مركز جدًا)
+- **top_p=0.1**: يأخذ في الاعتبار أعلى 10% من الكلمات الأكثر احتمالًا (مركّز جدًا)
 - **top_p=0.9**: يأخذ في الاعتبار 90% من الكلمات الممكنة (أكثر إبداعًا)
 - **top_p=1.0**: يأخذ في الاعتبار كل شيء (أقصى تنوع)
 
 **على سبيل المثال**: إذا سألت "السماء عادةً..."
-- **Top_p منخفض**: يقول "زرقاء" بالتأكيد
-- **Top_p مرتفع**: قد يقول "زرقاء"، "غائمة"، "واسعة"، "متغيرة"، "جميلة"، إلخ.
+- **top_p منخفض**: سيقول "زرقاء" بالتأكيد
+- **top_p مرتفع**: قد يقول "زرقاء"، "غائمة"، "واسعة"، "متغيرة"، "جميلة"، إلخ.
 
-### الجمع بين كل شيء: تركيبات المعلمات لحالات استخدام مختلفة
+### جمع كل شيء معًا: تركيبات المعلمات لحالات الاستخدام المختلفة
 
 ```python
 # For factual, consistent answers (like a documentation bot)
@@ -257,8 +372,25 @@ conversational_params = {
 }
 ```
 
-**فهم لماذا هذه المعلمات مهمة**: التطبيقات المختلفة تحتاج إلى أنواع مختلفة من الردود. بوت خدمة العملاء يجب أن يكون متسقًا وواقعيًا (درجة حرارة منخفضة)، بينما مساعد الكتابة الإبداعية يجب أن يكون خياليًا ومتغيرًا (درجة حرارة عالية). فهم هذه المعلمات يمنحك التحكم في شخصية الذكاء الاصطناعي وأسلوب الرد.
+```mermaid
+quadrantChart
+    title AI Parameter Optimization Matrix
+    x-axis Low Creativity --> High Creativity
+    y-axis Short Response --> Long Response
+    
+    quadrant-1 Creative Content
+    quadrant-2 Detailed Analysis
+    quadrant-3 Quick Facts
+    quadrant-4 Conversational AI
+    
+    Documentation Bot: [0.2, 0.3]
+    Customer Service: [0.4, 0.4]
+    General Assistant: [0.7, 0.5]
+    Creative Writer: [0.9, 0.9]
+    Brainstorming Tool: [0.8, 0.8]
+```
 
+**فهم لماذا هذه المعلمات مهمة**: التطبيقات المختلفة تحتاج إلى أنواع مختلفة من الاستجابات. يجب أن يكون روبوت خدمة العملاء متسقًا وواقعيًا (درجة حرارة منخفضة)، بينما يجب أن يكون مساعد الكتابة الإبداعي خياليًا ومتغيرًا (درجة حرارة عالية). فهم هذه المعلمات يمنحك التحكم في شخصية الذكاء الاصطناعي وأسلوب استجابته.
 ```
 
 **Here's what's happening in this code:**
@@ -326,27 +458,26 @@ def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
 
 **فهم هذه الوظيفة المحسنة:**
 - **تقبل** معلمين: طلب المستخدم ورسالة النظام الاختيارية
-- **توفر** رسالة نظام افتراضية لسلوك مساعد عام
-- **تستخدم** تلميحات نوع Python لتحسين توثيق الكود
-- **تتضمن** وصفًا تفصيليًا للوظيفة يشرح الغرض منها ومعلماتها
-- **تعيد** فقط محتوى الرد، مما يجعل استخدامها في واجهة برمجية الويب سهلًا
-- **تحافظ** على نفس معلمات النموذج لسلوك ذكاء اصطناعي متسق
+- **توفر** رسالة نظام افتراضية لسلوك المساعد العام
+- **تستخدم** تلميحات نوع Python المناسبة لتوثيق الكود بشكل أفضل
+- **تعيد** فقط محتوى الاستجابة، مما يجعل استخدامها سهلًا في واجهة برمجة التطبيقات الخاصة بنا
+- **تحافظ** على نفس معلمات النموذج لسلوك الذكاء الاصطناعي المتسق
 
-### سحر رسائل النظام: برمجة شخصية الذكاء الاصطناعي
+### سحر مطالبات النظام: برمجة شخصية الذكاء الاصطناعي
 
-إذا كانت المعلمات تتحكم في كيفية تفكير الذكاء الاصطناعي، فإن رسائل النظام تتحكم في من يعتقد الذكاء الاصطناعي أنه هو. هذا بصراحة أحد أكثر الأجزاء إثارة للعمل مع الذكاء الاصطناعي – أنت في الأساس تمنح الذكاء الاصطناعي شخصية كاملة، مستوى خبرة، وأسلوب تواصل.
+إذا كانت المعلمات تتحكم في كيفية تفكير الذكاء الاصطناعي، فإن مطالبات النظام تتحكم في من يعتقد الذكاء الاصطناعي أنه هو. هذا بصراحة أحد أكثر الأجزاء إثارة للعمل مع الذكاء الاصطناعي – أنت تعطي الذكاء الاصطناعي شخصية كاملة، مستوى خبرة، وأسلوب تواصل.
 
-**فكر في رسائل النظام كأنها اختيار ممثلين لأدوار مختلفة**: بدلًا من وجود مساعد عام، يمكنك إنشاء خبراء متخصصين لحالات مختلفة. تحتاج إلى معلم صبور؟ شريك إبداعي في العصف الذهني؟ مستشار أعمال جاد؟ فقط قم بتغيير رسالة النظام!
+**فكر في مطالبات النظام كأنك تختار ممثلين لأدوار مختلفة**: بدلاً من وجود مساعد عام واحد، يمكنك إنشاء خبراء متخصصين لمواقف مختلفة. هل تحتاج إلى معلم صبور؟ شريك في العصف الذهني الإبداعي؟ مستشار أعمال صارم؟ فقط قم بتغيير مطالبة النظام!
 
-#### لماذا رسائل النظام قوية جدًا
+#### لماذا مطالبات النظام قوية جدًا
 
-إليك الجزء المثير: تم تدريب نماذج الذكاء الاصطناعي على عدد لا يحصى من المحادثات حيث يتبنى الناس أدوارًا ومستويات خبرة مختلفة. عندما تعطي الذكاء الاصطناعي دورًا معينًا، يشبه الأمر تشغيل مفتاح ينشط كل تلك الأنماط المكتسبة.
+إليك الجزء المثير: تم تدريب نماذج الذكاء الاصطناعي على عدد لا يحصى من المحادثات حيث يتبنى الناس أدوارًا ومستويات خبرة مختلفة. عندما تعطي الذكاء الاصطناعي دورًا معينًا، فإنه يشبه تشغيل مفتاح ينشط كل تلك الأنماط المكتسبة.
 
-**يشبه التمثيل المنهجي للذكاء الاصطناعي**: أخبر ممثلًا "أنت أستاذ حكيم كبير في السن" وشاهد كيف يضبط تلقائيًا وضعه، مفرداته، وسلوكياته. الذكاء الاصطناعي يفعل شيئًا مشابهًا بشكل ملحوظ مع أنماط اللغة.
+**إنه مثل التمثيل المنهجي للذكاء الاصطناعي**: أخبر ممثلًا "أنت أستاذ حكيم كبير في السن" وشاهد كيف يضبط تلقائيًا وضعه، مفرداته، وأسلوبه. الذكاء الاصطناعي يفعل شيئًا مشابهًا بشكل ملحوظ مع أنماط اللغة.
 
-#### صياغة رسائل نظام فعالة: الفن والعلم
+#### صياغة مطالبات نظام فعالة: الفن والعلم
 
-**تشريح رسالة نظام رائعة:**
+**تشريح المطالبة النظامية الجيدة:**
 1. **الدور/الهوية**: من هو الذكاء الاصطناعي؟
 2. **الخبرة**: ماذا يعرف؟
 3. **أسلوب التواصل**: كيف يتحدث؟
@@ -360,9 +491,9 @@ def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
 "You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
 ```
 
-#### أمثلة رسائل النظام مع السياق
+#### أمثلة مطالبات النظام مع السياق
 
-دعونا نرى كيف تخلق رسائل النظام المختلفة شخصيات ذكاء اصطناعي مختلفة تمامًا:
+دعونا نرى كيف تخلق مطالبات النظام المختلفة شخصيات ذكاء اصطناعي مختلفة تمامًا:
 
 ```python
 # Example 1: The Patient Teacher
@@ -390,9 +521,9 @@ probing questions to understand the full business context before giving advice.
 """
 ```
 
-#### رؤية رسائل النظام أثناء العمل
+#### رؤية مطالبات النظام أثناء العمل
 
-لنختبر نفس السؤال مع رسائل نظام مختلفة لنرى الفروقات الكبيرة:
+دعونا نختبر نفس السؤال مع مطالبات نظام مختلفة لنرى الفروقات الكبيرة:
 
 **السؤال**: "كيف أتعامل مع مصادقة المستخدم في تطبيقي الويب؟"
 
@@ -415,9 +546,9 @@ business_response = call_llm(
 # user experience, and scalability..."
 ```
 
-#### تقنيات متقدمة لرسائل النظام
+#### تقنيات مطالبات النظام المتقدمة
 
-**1. إعداد السياق**: أعط الذكاء الاصطناعي معلومات خلفية
+**1. إعداد السياق**: قدم للذكاء الاصطناعي معلومات خلفية
 ```python
 system_prompt = """
 You are helping a junior developer who just started their first job at a startup. 
@@ -426,7 +557,7 @@ Be encouraging and explain things step-by-step without being condescending.
 """
 ```
 
-**2. تنسيق الإخراج**: أخبر الذكاء الاصطناعي كيف يهيكل الردود
+**2. تنسيق الإخراج**: أخبر الذكاء الاصطناعي بكيفية هيكلة الردود  
 ```python
 system_prompt = """
 You are a technical mentor. Always structure your responses as:
@@ -437,8 +568,8 @@ You are a technical mentor. Always structure your responses as:
 5. Next Steps for Learning
 """
 ```
-
-**3. إعداد القيود**: حدد ما يجب أن لا يفعله الذكاء الاصطناعي
+  
+**3. إعداد القيود**: حدد ما يجب على الذكاء الاصطناعي عدم القيام به  
 ```python
 system_prompt = """
 You are a coding tutor focused on teaching best practices. Never write complete 
@@ -446,50 +577,65 @@ solutions for the user - instead, guide them with hints and questions so they
 learn by doing. Always explain the 'why' behind coding decisions.
 """
 ```
+  
+
+#### لماذا هذا مهم لمساعد الدردشة الخاص بك  
+
+فهم مطالبات النظام يمنحك قوة هائلة لإنشاء مساعدي ذكاء اصطناعي متخصصين:  
+- **روبوت خدمة العملاء**: مفيد، صبور، على دراية بالسياسات  
+- **مدرس تعليمي**: مشجع، خطوة بخطوة، يتحقق من الفهم  
+- **شريك إبداعي**: خيالي، يبني على الأفكار، يسأل "ماذا لو؟"  
+- **خبير تقني**: دقيق، مفصل، واعٍ بالأمان  
+
+**الفكرة الرئيسية**: أنت لا تستدعي فقط واجهة برمجة تطبيقات الذكاء الاصطناعي – بل تقوم بإنشاء شخصية ذكاء اصطناعي مخصصة تخدم حالتك الخاصة. هذا ما يجعل تطبيقات الذكاء الاصطناعي الحديثة تبدو مخصصة ومفيدة بدلاً من أن تكون عامة.  
 
-#### لماذا هذا مهم لمساعد الدردشة الخاص بك
+### 🎯 مراجعة تعليمية: برمجة شخصية الذكاء الاصطناعي  
 
-فهم رسائل النظام يمنحك قوة هائلة لإنشاء مساعدين ذكاء اصطناعي متخصصين:
-- **بوت خدمة العملاء**: مفيد، صبور، واعٍ بالسياسات
-- **مدرس تعليمي**: مشجع، خطوة بخطوة، يتحقق من الفهم
-- **شريك إبداعي**: خيالي، يبني على الأفكار، يسأل "ماذا لو؟"
-- **خبير تقني**: دقيق، مفصل، واعٍ بالأمان
+**توقف وفكر**: لقد تعلمت للتو كيفية برمجة شخصيات الذكاء الاصطناعي من خلال مطالبات النظام. هذه مهارة أساسية في تطوير تطبيقات الذكاء الاصطناعي الحديثة.  
 
-**الفكرة الرئيسية**: أنت لا تستدعي واجهة برمجية ذكاء اصطناعي فقط – أنت تصنع شخصية ذكاء اصطناعي مخصصة تخدم حالة الاستخدام الخاصة بك. هذا ما يجعل تطبيقات الذكاء الاصطناعي الحديثة تبدو مخصصة ومفيدة بدلًا من أن تكون عامة.
+**تقييم ذاتي سريع**:  
+- هل يمكنك شرح كيف تختلف مطالبات النظام عن رسائل المستخدم العادية؟  
+- ما الفرق بين معلمات temperature و top_p؟  
+- كيف يمكنك إنشاء مطالبة نظام لحالة استخدام محددة (مثل مدرس برمجة)؟  
 
-## بناء واجهة برمجية الويب باستخدام FastAPI: مركز اتصال عالي الأداء مع الذكاء الاصطناعي
+**صلة بالعالم الحقيقي**: تقنيات مطالبات النظام التي تعلمتها تُستخدم في كل تطبيق رئيسي للذكاء الاصطناعي - من مساعد البرمجة GitHub Copilot إلى واجهة المحادثة ChatGPT. أنت تتقن نفس الأنماط التي تستخدمها فرق منتجات الذكاء الاصطناعي في شركات التكنولوجيا الكبرى.  
 
-الآن دعونا نبني الخلفية التي تربط واجهة المستخدم بخدمات الذكاء الاصطناعي. سنستخدم FastAPI، إطار عمل Python حديث يتميز ببناء واجهات برمجية لتطبيقات الذكاء الاصطناعي.
+**سؤال التحدي**: كيف يمكنك تصميم شخصيات ذكاء اصطناعي مختلفة لأنواع مختلفة من المستخدمين (مبتدئ مقابل خبير)؟ فكر في كيفية خدمة نفس نموذج الذكاء الاصطناعي الأساسي لجماهير مختلفة من خلال هندسة المطالبات.  
 
-FastAPI يقدم عدة مزايا لهذا النوع من المشاريع: دعم مدمج للعمليات غير المتزامنة لمعالجة الطلبات المتزامنة، توليد تلقائي لتوثيق الواجهة البرمجية، وأداء ممتاز. يعمل خادم FastAPI كوسيط يستقبل الطلبات من الواجهة الأمامية، يتواصل مع خدمات الذكاء الاصطناعي، ويعيد الردود المهيكلة.
+## بناء واجهة برمجة التطبيقات باستخدام FastAPI: مركز الاتصال عالي الأداء الخاص بك مع الذكاء الاصطناعي  
 
-### لماذا FastAPI لتطبيقات الذكاء الاصطناعي؟
+الآن دعونا نبني الخلفية التي تربط واجهة المستخدم الأمامية بخدمات الذكاء الاصطناعي. سنستخدم FastAPI، وهو إطار عمل حديث بلغة Python يتميز في بناء واجهات برمجة التطبيقات لتطبيقات الذكاء الاصطناعي.  
 
-قد تتساءل: "ألا يمكنني فقط استدعاء الذكاء الاصطناعي مباشرة من JavaScript في الواجهة الأمامية؟" أو "لماذا FastAPI بدلًا من Flask أو Django؟" أسئلة رائعة!
-**لماذا FastAPI مثالي لما نقوم ببنائه:**
-- **البرمجة غير المتزامنة بشكل افتراضي**: يمكنه التعامل مع طلبات متعددة للذكاء الاصطناعي في نفس الوقت دون التعطل
-- **توثيق تلقائي**: قم بزيارة `/docs` واحصل على صفحة توثيق API تفاعلية وجميلة مجانًا
-- **التحقق المدمج**: يكتشف الأخطاء قبل أن تسبب مشاكل
-- **سرعة فائقة**: من أسرع أطر العمل في Python
-- **Python حديث**: يستخدم أحدث ميزات Python وأفضلها
+FastAPI يقدم عدة مزايا لهذا النوع من المشاريع: دعم مدمج للعمليات غير المتزامنة لمعالجة الطلبات المتزامنة، توليد تلقائي لتوثيق واجهة برمجة التطبيقات، وأداء ممتاز. يعمل خادم FastAPI الخاص بك كوسيط يتلقى الطلبات من الواجهة الأمامية، يتواصل مع خدمات الذكاء الاصطناعي، ويعيد الردود المهيكلة.  
 
-**لماذا نحتاج إلى واجهة خلفية أساسًا:**
+### لماذا FastAPI لتطبيقات الذكاء الاصطناعي؟  
 
-**الأمان**: مفتاح API الخاص بالذكاء الاصطناعي يشبه كلمة المرور – إذا وضعته في JavaScript في الواجهة الأمامية، يمكن لأي شخص يرى كود المصدر لموقعك سرقته واستخدام أرصدة الذكاء الاصطناعي الخاصة بك. الواجهة الخلفية تحافظ على أمان البيانات الحساسة.
+قد تتساءل: "ألا يمكنني فقط استدعاء الذكاء الاصطناعي مباشرة من JavaScript في الواجهة الأمامية؟" أو "لماذا FastAPI بدلاً من Flask أو Django؟" أسئلة رائعة!  
 
-**الحد من الطلبات والتحكم**: تتيح لك الواجهة الخلفية التحكم في عدد مرات إرسال المستخدمين للطلبات، تنفيذ مصادقة المستخدم، وإضافة تسجيل لتتبع الاستخدام.
+**إليك السبب في أن FastAPI مثالي لما نبنيه:**  
+- **غير متزامن افتراضيًا**: يمكنه معالجة طلبات الذكاء الاصطناعي المتعددة في وقت واحد دون توقف  
+- **توثيق تلقائي**: قم بزيارة `/docs` واحصل على صفحة توثيق واجهة برمجة التطبيقات تفاعلية وجميلة مجانًا  
+- **التحقق المدمج**: يكتشف الأخطاء قبل أن تسبب مشاكل  
+- **سريع للغاية**: أحد أسرع أطر عمل Python  
+- **Python حديث**: يستخدم أحدث ميزات Python  
 
-**معالجة البيانات**: قد ترغب في حفظ المحادثات، تصفية المحتوى غير المناسب، أو دمج خدمات ذكاء اصطناعي متعددة. الواجهة الخلفية هي المكان الذي تعيش فيه هذه المنطقية.
+**وهذا هو السبب في أننا بحاجة إلى خلفية على الإطلاق:**  
 
-**تشبه البنية نموذج العميل-الخادم:**
-- **الواجهة الأمامية**: طبقة واجهة المستخدم للتفاعل
-- **واجهة API الخلفية**: طبقة معالجة الطلبات والتوجيه
-- **خدمة الذكاء الاصطناعي**: الحساب الخارجي وتوليد الردود
-- **متغيرات البيئة**: تخزين آمن للإعدادات والبيانات السرية
+**الأمان**: مفتاح واجهة برمجة تطبيقات الذكاء الاصطناعي الخاص بك يشبه كلمة المرور – إذا وضعته في JavaScript في الواجهة الأمامية، يمكن لأي شخص يرى كود المصدر لموقعك سرقته واستخدام أرصدة الذكاء الاصطناعي الخاصة بك. الخلفية تحافظ على أمان بيانات الاعتماد الحساسة.  
 
-### فهم تدفق الطلب والاستجابة
+**تحديد المعدل والتحكم**: الخلفية تتيح لك التحكم في عدد مرات إرسال المستخدمين للطلبات، تنفيذ مصادقة المستخدم، وإضافة تسجيل لتتبع الاستخدام.  
 
-دعونا نتتبع ما يحدث عندما يرسل المستخدم رسالة:
+**معالجة البيانات**: قد ترغب في حفظ المحادثات، تصفية المحتوى غير المناسب، أو دمج خدمات الذكاء الاصطناعي المتعددة. الخلفية هي المكان الذي تعيش فيه هذه المنطقية.  
+
+**تشبه البنية نموذج العميل-الخادم:**  
+- **الواجهة الأمامية**: طبقة واجهة المستخدم للتفاعل  
+- **واجهة برمجة التطبيقات الخلفية**: طبقة معالجة الطلبات والتوجيه  
+- **خدمة الذكاء الاصطناعي**: الحساب الخارجي وتوليد الردود  
+- **متغيرات البيئة**: تخزين التكوين والبيانات السرية بأمان  
+
+### فهم تدفق الطلب-الرد  
+
+دعونا نتتبع ما يحدث عندما يرسل المستخدم رسالة:  
 
 ```mermaid
 sequenceDiagram
@@ -507,16 +653,16 @@ sequenceDiagram
     API->>Frontend: {"response": "Hello! How can I help?"}
     Frontend->>User: Displays AI message
 ```
+  
+**فهم كل خطوة:**  
+1. **تفاعل المستخدم**: يكتب الشخص في واجهة الدردشة  
+2. **معالجة الواجهة الأمامية**: JavaScript يلتقط الإدخال ويهيكله كـ JSON  
+3. **التحقق من واجهة برمجة التطبيقات**: FastAPI يتحقق تلقائيًا من الطلب باستخدام نماذج Pydantic  
+4. **دمج الذكاء الاصطناعي**: الخلفية تضيف السياق (مطالبة النظام) وتستدعي خدمة الذكاء الاصطناعي  
+5. **معالجة الرد**: واجهة برمجة التطبيقات تتلقى رد الذكاء الاصطناعي ويمكنها تعديله إذا لزم الأمر  
+6. **عرض الواجهة الأمامية**: JavaScript يعرض الرد في واجهة الدردشة  
 
-**فهم كل خطوة:**
-1. **تفاعل المستخدم**: يكتب الشخص في واجهة الدردشة
-2. **معالجة الواجهة الأمامية**: يلتقط JavaScript الإدخال ويقوم بتنسيقه كـ JSON
-3. **التحقق من الطلب**: يقوم FastAPI بالتحقق تلقائيًا من الطلب باستخدام نماذج Pydantic
-4. **دمج الذكاء الاصطناعي**: تضيف الواجهة الخلفية السياق (النظام الأساسي) وتستدعي خدمة الذكاء الاصطناعي
-5. **معالجة الردود**: تتلقى API رد الذكاء الاصطناعي ويمكن تعديلها إذا لزم الأمر
-6. **عرض الواجهة الأمامية**: يعرض JavaScript الرد في واجهة الدردشة
-
-### فهم بنية API
+### فهم بنية واجهة برمجة التطبيقات  
 
 ```mermaid
 sequenceDiagram
@@ -532,10 +678,34 @@ sequenceDiagram
     AI Function->>FastAPI: response text
     FastAPI->>Frontend: {"response": "Hello! How can I help?"}
 ```
+  
+```mermaid
+flowchart TD
+    A[User Input] --> B[Frontend Validation]
+    B --> C[HTTP POST Request]
+    C --> D[FastAPI Router]
+    D --> E[Pydantic Validation]
+    E --> F[AI Function Call]
+    F --> G[GitHub Models API]
+    G --> H[Response Processing]
+    H --> I[JSON Response]
+    I --> J[Frontend Update]
+    
+    subgraph "Security Layer"
+        K[CORS Middleware]
+        L[Environment Variables]
+        M[Error Handling]
+    end
+    
+    D --> K
+    F --> L
+    H --> M
+```
+  
 
-### إنشاء تطبيق FastAPI
+### إنشاء تطبيق FastAPI  
 
-دعونا نبني API خطوة بخطوة. قم بإنشاء ملف يسمى `api.py` مع الكود التالي لـ FastAPI:
+دعونا نبني واجهة برمجة التطبيقات خطوة بخطوة. قم بإنشاء ملف يسمى `api.py` مع الكود التالي لـ FastAPI:  
 
 ```python
 # api.py
@@ -613,43 +783,43 @@ if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
 ```
+  
+**فهم تنفيذ FastAPI:**  
+- **استيراد** FastAPI لوظائف إطار العمل الحديث وPydantic للتحقق من البيانات  
+- **إنشاء** توثيق واجهة برمجة التطبيقات تلقائيًا (متاح في `/docs` عند تشغيل الخادم)  
+- **تمكين** وسيط CORS للسماح بطلبات الواجهة الأمامية من أصول مختلفة  
+- **تعريف** نماذج Pydantic للتحقق التلقائي من الطلبات/الردود وتوثيقها  
+- **استخدام** نقاط نهاية غير متزامنة لتحسين الأداء مع الطلبات المتزامنة  
+- **تنفيذ** رموز حالة HTTP المناسبة ومعالجة الأخطاء باستخدام HTTPException  
+- **تضمين** تسجيل منظم للمراقبة واستكشاف الأخطاء  
+- **توفير** نقطة نهاية لفحص الحالة لمراقبة حالة الخدمة  
 
-**فهم تنفيذ FastAPI:**
-- **يستورد** FastAPI لوظائف إطار العمل الحديث وPydantic للتحقق من البيانات
-- **ينشئ** توثيق API تلقائي (متاح في `/docs` عند تشغيل الخادم)
-- **يُمكّن** CORS middleware للسماح بطلبات الواجهة الأمامية من أصول مختلفة
-- **يُعرّف** نماذج Pydantic للتحقق التلقائي من الطلبات/الردود والتوثيق
-- **يستخدم** نقاط نهاية غير متزامنة لتحسين الأداء مع الطلبات المتزامنة
-- **ينفذ** رموز حالة HTTP المناسبة ومعالجة الأخطاء باستخدام HTTPException
-- **يتضمن** تسجيل منظم للمراقبة وتصحيح الأخطاء
-- **يوفر** نقطة تحقق صحية لمراقبة حالة الخدمة
+**مزايا FastAPI الرئيسية مقارنة بالأطر التقليدية:**  
+- **التحقق التلقائي**: نماذج Pydantic تضمن سلامة البيانات قبل المعالجة  
+- **توثيق تفاعلي**: قم بزيارة `/docs` للحصول على توثيق واجهة برمجة التطبيقات الذي يتم إنشاؤه تلقائيًا وقابل للاختبار  
+- **سلامة الأنواع**: تلميحات الأنواع في Python تمنع الأخطاء أثناء التشغيل وتحسن جودة الكود  
+- **دعم غير متزامن**: معالجة طلبات الذكاء الاصطناعي المتعددة في وقت واحد دون توقف  
+- **الأداء**: معالجة الطلبات بشكل أسرع بشكل ملحوظ للتطبيقات في الوقت الفعلي  
 
-**مزايا FastAPI الرئيسية مقارنة بالأطر التقليدية:**
-- **التحقق التلقائي**: تضمن نماذج Pydantic سلامة البيانات قبل المعالجة
-- **توثيق تفاعلي**: قم بزيارة `/docs` للحصول على توثيق API تلقائي وقابل للاختبار
-- **سلامة الأنواع**: تمنع تلميحات الأنواع في Python الأخطاء أثناء التشغيل وتحسن جودة الكود
-- **دعم البرمجة غير المتزامنة**: التعامل مع طلبات الذكاء الاصطناعي المتعددة في نفس الوقت دون حظر
-- **الأداء**: معالجة الطلبات بسرعة كبيرة للتطبيقات في الوقت الفعلي
+### فهم CORS: حارس أمان الويب  
 
-### فهم CORS: حارس أمان الويب
+CORS (مشاركة الموارد عبر الأصول) يشبه حارس أمان في مبنى يتحقق مما إذا كان الزوار مسموح لهم بالدخول. دعونا نفهم لماذا هذا مهم وكيف يؤثر على تطبيقك.  
 
-CORS (مشاركة الموارد عبر الأصول) يشبه حارس أمان في مبنى يتحقق مما إذا كان الزوار مسموح لهم بالدخول. دعونا نفهم لماذا هذا مهم وكيف يؤثر على تطبيقك.
+#### ما هو CORS ولماذا يوجد؟  
 
-#### ما هو CORS ولماذا يوجد؟
+**المشكلة**: تخيل لو أن أي موقع يمكنه إرسال طلبات إلى موقع البنك الخاص بك نيابة عنك دون إذنك. سيكون ذلك كابوسًا أمنيًا! المتصفحات تمنع هذا افتراضيًا من خلال "سياسة الأصل نفسه".  
 
-**المشكلة**: تخيل لو أن أي موقع يمكنه إرسال طلبات إلى موقع البنك الخاص بك نيابة عنك دون إذنك. سيكون ذلك كابوسًا أمنيًا! المتصفحات تمنع هذا افتراضيًا من خلال "سياسة الأصل نفسه".
+**سياسة الأصل نفسه**: المتصفحات تسمح فقط لصفحات الويب بإرسال طلبات إلى نفس النطاق، المنفذ، والبروتوكول الذي تم تحميلها منه.  
 
-**سياسة الأصل نفسه**: تسمح المتصفحات فقط لصفحات الويب بإرسال طلبات إلى نفس النطاق، المنفذ، والبروتوكول الذي تم تحميلها منه.
+**تشبيه في العالم الحقيقي**: إنه مثل أمان مبنى سكني – فقط السكان (الأصل نفسه) يمكنهم الوصول إلى المبنى افتراضيًا. إذا كنت تريد السماح لصديق (أصل مختلف) بالزيارة، عليك أن تخبر الأمن صراحةً أنه لا بأس بذلك.  
 
-**تشبيه واقعي**: إنه مثل أمان المبنى السكني – فقط السكان (الأصل نفسه) يمكنهم الوصول إلى المبنى افتراضيًا. إذا كنت تريد السماح لصديق (أصل مختلف) بالزيارة، تحتاج إلى إخبار الأمن صراحةً أنه لا بأس بذلك.
+#### CORS في بيئة التطوير الخاصة بك  
 
-#### CORS في بيئة التطوير الخاصة بك
+أثناء التطوير، تعمل واجهتك الأمامية والخلفية على منافذ مختلفة:  
+- الواجهة الأمامية: `http://localhost:3000` (أو file:// إذا فتحت HTML مباشرة)  
+- الخلفية: `http://localhost:5000`  
 
-أثناء التطوير، تعمل الواجهة الأمامية والخلفية على منافذ مختلفة:
-- الواجهة الأمامية: `http://localhost:3000` (أو file:// إذا فتحت HTML مباشرة)
-- الواجهة الخلفية: `http://localhost:5000`
-
-تُعتبر هذه "أصول مختلفة" حتى لو كانت على نفس الكمبيوتر!
+هذه تعتبر "أصول مختلفة" حتى لو كانت على نفس الكمبيوتر!  
 
 ```python
 from fastapi.middleware.cors import CORSMiddleware
@@ -657,13 +827,13 @@ from fastapi.middleware.cors import CORSMiddleware
 app = FastAPI(__name__)
 CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"
 ```
+  
+**ما يفعله تكوين CORS عمليًا:**  
+- **إضافة** رؤوس HTTP خاصة إلى ردود واجهة برمجة التطبيقات التي تخبر المتصفحات "هذا الطلب عبر الأصول مسموح به"  
+- **معالجة** طلبات "التحقق المسبق" (المتصفحات أحيانًا تتحقق من الأذونات قبل إرسال الطلب الفعلي)  
+- **منع** الخطأ المزعج "محظور بواسطة سياسة CORS" في وحدة التحكم بالمتصفح  
 
-**ما يفعله تكوين CORS عمليًا:**
-- **يضيف** رؤوس HTTP خاصة إلى ردود API تخبر المتصفحات "هذا الطلب عبر الأصول مسموح به"
-- **يتعامل** مع طلبات "التحقق المسبق" (تتحقق المتصفحات أحيانًا من الأذونات قبل إرسال الطلب الفعلي)
-- **يمنع** الخطأ المزعج "محظور بواسطة سياسة CORS" في وحدة التحكم بالمتصفح
-
-#### أمان CORS: التطوير مقابل الإنتاج
+#### أمان CORS: التطوير مقابل الإنتاج  
 
 ```python
 # 🚨 Development: Allows ALL origins (convenient but insecure)
@@ -678,43 +848,43 @@ if app.debug:  # Development mode
 else:  # Production mode
     CORS(app, origins=["https://yourdomain.com"])
 ```
+  
+**لماذا هذا مهم**: في التطوير، `CORS(app)` يشبه ترك بابك الأمامي مفتوحًا – مريح ولكنه غير آمن. في الإنتاج، تريد تحديد المواقع التي يمكنها التحدث إلى واجهة برمجة التطبيقات الخاصة بك بدقة.  
 
-**لماذا هذا مهم**: في التطوير، `CORS(app)` يشبه ترك بابك الأمامي مفتوحًا – مريح ولكنه غير آمن. في الإنتاج، تريد تحديد المواقع التي يمكنها التحدث إلى API الخاص بك.
+#### سيناريوهات وحلول CORS الشائعة  
 
-#### سيناريوهات CORS الشائعة وحلولها
+| السيناريو | المشكلة | الحل |  
+|----------|---------|----------|  
+| **التطوير المحلي** | الواجهة الأمامية لا يمكنها الوصول إلى الخلفية | أضف CORSMiddleware إلى FastAPI |  
+| **GitHub Pages + Heroku** | الواجهة الأمامية المنشورة لا يمكنها الوصول إلى واجهة برمجة التطبيقات | أضف عنوان URL الخاص بـ GitHub Pages إلى أصول CORS |  
+| **النطاق المخصص** | أخطاء CORS في الإنتاج | قم بتحديث أصول CORS لتطابق نطاقك |  
+| **تطبيق الهاتف المحمول** | التطبيق لا يمكنه الوصول إلى واجهة برمجة الويب | أضف نطاق التطبيق الخاص بك أو استخدم `*` بحذر |  
 
-| السيناريو | المشكلة | الحل |
-|----------|---------|----------|
-| **التطوير المحلي** | لا يمكن للواجهة الأمامية الوصول إلى الواجهة الخلفية | أضف CORSMiddleware إلى FastAPI |
-| **GitHub Pages + Heroku** | لا يمكن للواجهة الأمامية المنشورة الوصول إلى API | أضف عنوان URL الخاص بـ GitHub Pages إلى أصول CORS |
-| **النطاق المخصص** | أخطاء CORS في الإنتاج | قم بتحديث أصول CORS لتطابق نطاقك |
-| **تطبيق الهاتف المحمول** | لا يمكن للتطبيق الوصول إلى API الويب | أضف نطاق التطبيق الخاص بك أو استخدم `*` بحذر |
+**نصيحة احترافية**: يمكنك التحقق من رؤوس CORS في أدوات المطور بالمتصفح ضمن علامة التبويب الشبكة. ابحث عن رؤوس مثل `Access-Control-Allow-Origin` في الرد.  
 
-**نصيحة احترافية**: يمكنك التحقق من رؤوس CORS في أدوات المطور الخاصة بالمتصفح ضمن علامة التبويب الشبكة. ابحث عن رؤوس مثل `Access-Control-Allow-Origin` في الرد.
+### معالجة الأخطاء والتحقق  
 
-### معالجة الأخطاء والتحقق
-
-لاحظ كيف تتضمن API الخاصة بنا معالجة الأخطاء بشكل صحيح:
+لاحظ كيف تتضمن واجهة برمجة التطبيقات الخاصة بنا معالجة الأخطاء بشكل صحيح:  
 
 ```python
 # Validate that we received a message
 if not message:
     return jsonify({"error": "Message field is required"}), 400
 ```
+  
+**مبادئ التحقق الرئيسية:**  
+- **التحقق** من الحقول المطلوبة قبل معالجة الطلبات  
+- **إرجاع** رسائل خطأ ذات معنى بتنسيق JSON  
+- **استخدام** رموز حالة HTTP المناسبة (400 للطلبات السيئة)  
+- **توفير** ملاحظات واضحة لمساعدة مطوري الواجهة الأمامية في استكشاف الأخطاء  
 
-**مبادئ التحقق الرئيسية:**
-- **يتحقق** من الحقول المطلوبة قبل معالجة الطلبات
-- **يعيد** رسائل خطأ ذات معنى بتنسيق JSON
-- **يستخدم** رموز حالة HTTP المناسبة (400 للطلبات السيئة)
-- **يوفر** ملاحظات واضحة لمساعدة مطوري الواجهة الأمامية في تصحيح الأخطاء
-
-## إعداد وتشغيل الواجهة الخلفية الخاصة بك
+## إعداد وتشغيل الخلفية الخاصة بك  
 
-الآن بعد أن أصبح لدينا تكامل الذكاء الاصطناعي وخادم FastAPI جاهزًا، دعونا نبدأ تشغيل كل شيء. تتضمن عملية الإعداد تثبيت تبعيات Python، تكوين متغيرات البيئة، وتشغيل خادم التطوير الخاص بك.
+الآن بعد أن أصبح لدينا تكامل الذكاء الاصطناعي وخادم FastAPI جاهزًا، دعونا نبدأ كل شيء. تتضمن عملية الإعداد تثبيت تبعيات Python، تكوين متغيرات البيئة، وتشغيل خادم التطوير الخاص بك.  
 
-### إعداد بيئة Python
+### إعداد بيئة Python  
 
-دعونا نعد بيئة تطوير Python الخاصة بك. البيئات الافتراضية تشبه نهج المشروع المخصص – كل مشروع يحصل على مساحته المعزولة الخاصة به مع أدوات وتبعيات محددة، مما يمنع التعارض بين المشاريع المختلفة.
+دعونا نعد بيئة تطوير Python الخاصة بك. البيئات الافتراضية تشبه نهج المشروع المخصص – كل مشروع يحصل على مساحته الخاصة بأدواته وتبعياته المحددة، مما يمنع التعارض بين المشاريع المختلفة.  
 
 ```bash
 # Navigate to your backend directory
@@ -732,31 +902,31 @@ source ./venv/bin/activate
 # Install the good stuff
 pip install openai fastapi uvicorn python-dotenv
 ```
+  
+**ما فعلناه للتو:**  
+- **أنشأنا** فقاعة Python الخاصة بنا حيث يمكننا تثبيت الحزم دون التأثير على أي شيء آخر  
+- **قمنا بتفعيلها** حتى يعرف الطرفية استخدام هذه البيئة المحددة  
+- **قمنا بتثبيت** الأساسيات: OpenAI للسحر الذكاء الاصطناعي، FastAPI لواجهة برمجة الويب، Uvicorn لتشغيلها، وpython-dotenv لإدارة الأسرار بأمان  
 
-**ما فعلناه للتو:**
-- **أنشأنا** فقاعة Python الخاصة بنا حيث يمكننا تثبيت الحزم دون التأثير على أي شيء آخر
-- **قمنا بتفعيلها** حتى يعرف الطرفية استخدام هذه البيئة المحددة
-- **قمنا بتثبيت الأساسيات**: OpenAI للسحر الذكاء الاصطناعي، FastAPI لـ API الويب، Uvicorn لتشغيله فعليًا، وpython-dotenv لإدارة الأسرار بأمان
-
-**تفسير التبعيات الرئيسية:**
-- **FastAPI**: إطار عمل ويب حديث وسريع مع توثيق API تلقائي
-- **Uvicorn**: خادم ASGI سريع جدًا لتشغيل تطبيقات FastAPI
-- **OpenAI**: مكتبة رسمية لنماذج GitHub وتكامل API الخاص بـ OpenAI
-- **python-dotenv**: تحميل متغيرات البيئة بأمان من ملفات .env
+**تفسير التبعيات الرئيسية:**  
+- **FastAPI**: إطار عمل ويب حديث وسريع مع توثيق واجهة برمجة التطبيقات تلقائي  
+- **Uvicorn**: خادم ASGI سريع للغاية لتشغيل تطبيقات FastAPI  
+- **OpenAI**: مكتبة رسمية لتكامل نماذج GitHub وواجهة برمجة تطبيقات OpenAI  
+- **python-dotenv**: تحميل متغيرات البيئة بأمان من ملفات .env  
 
-### تكوين البيئة: الحفاظ على الأسرار بأمان
+### تكوين البيئة: الحفاظ على الأسرار بأمان  
 
-قبل أن نبدأ API الخاصة بنا، نحتاج إلى الحديث عن أحد أهم الدروس في تطوير الويب: كيفية الحفاظ على الأسرار بالفعل سرية. متغيرات البيئة تشبه خزنة آمنة لا يمكن الوصول إليها إلا لتطبيقك.
+قبل أن نبدأ واجهة برمجة التطبيقات الخاصة بنا، نحتاج إلى الحديث عن أحد أهم الدروس في تطوير الويب: كيفية الحفاظ على الأسرار بالفعل سرية. متغيرات البيئة تشبه خزنة آمنة يمكن لتطبيقك فقط الوصول إليها.  
 
-#### ما هي متغيرات البيئة؟
+#### ما هي متغيرات البيئة؟  
 
-**فكر في متغيرات البيئة مثل صندوق ودائع آمن** – تضع أشياءك القيمة فيه، وفقط أنت (وتطبيقك) لديك المفتاح للوصول إليها. بدلًا من كتابة معلومات حساسة مباشرة في الكود الخاص بك (حيث يمكن لأي شخص رؤيتها حرفيًا)، تخزنها بأمان في البيئة.
+**فكر في متغيرات البيئة مثل صندوق ودائع آمن** – تضع أشياءك القيمة فيه، وفقط أنت (وتطبيقك) لديك المفتاح لإخراجها. بدلاً من كتابة معلومات حساسة مباشرة في الكود الخاص بك (حيث يمكن لأي شخص رؤيتها حرفيًا)، تقوم بتخزينها بأمان في البيئة.  
 
-**إليك الفرق:**
-- **الطريقة الخاطئة**: كتابة كلمة المرور الخاصة بك على ورقة لاصقة ووضعها على شاشتك
-- **الطريقة الصحيحة**: الاحتفاظ بكلمة المرور الخاصة بك في مدير كلمات مرور آمن لا يمكن الوصول إليه إلا لك
+**إليك الفرق:**  
+- **الطريقة الخاطئة**: كتابة كلمة المرور الخاصة بك على ورقة لاصقة ووضعها على شاشتك  
+- **الطريقة الصحيحة**: الاحتفاظ بكلمة المرور الخاصة بك في مدير كلمات مرور آمن يمكن فقط لك الوصول إليه  
 
-#### لماذا متغيرات البيئة مهمة
+#### لماذا متغيرات البيئة مهمة  
 
 ```python
 # 🚨 NEVER DO THIS - API key visible to everyone
@@ -771,16 +941,16 @@ client = OpenAI(
     base_url="https://models.github.ai/inference"
 )
 ```
+  
+**ما يحدث عندما تقوم بتضمين الأسرار في الكود:**  
+1. **تعرض التحكم بالإصدار**: أي شخص لديه وصول إلى مستودع Git الخاص بك يرى مفتاح واجهة برمجة التطبيقات الخاص بك  
+2. **المستودعات العامة**: إذا دفعت إلى GitHub، يصبح مفتاحك مرئيًا للإنترنت بأكمله  
+3. **مشاركة الفريق**: المطورون الآخرون الذين يعملون على مشروعك يحصلون على وصول إلى مفتاح واجهة برمجة التطبيقات الخاص بك  
+4. **اختراقات الأمان**: إذا سرق أحدهم مفتاح واجهة برمجة التطبيقات الخاص بك، يمكنه استخدام أرصدة الذكاء الاصطناعي الخاصة بك  
 
-**ما يحدث عندما تقوم بتضمين الأسرار في الكود:**
-1. **تعرض التحكم في الإصدار**: أي شخص لديه حق الوصول إلى مستودع Git الخاص بك يرى مفتاح API الخاص بك
-2. **المستودعات العامة**: إذا دفعت إلى GitHub، يصبح مفتاحك مرئيًا للإنترنت بأكمله
-3. **مشاركة الفريق**: يحصل المطورون الآخرون الذين يعملون على مشروعك على حق الوصول إلى مفتاح API الخاص بك
-4. **اختراقات الأمان**: إذا سرق أحدهم مفتاح API الخاص بك، يمكنه استخدام أرصدة الذكاء الاصطناعي الخاصة بك
+#### إعداد ملف البيئة الخاص بك  
 
-#### إعداد ملف البيئة الخاص بك
-
-قم بإنشاء ملف `.env` في دليل الواجهة الخلفية الخاص بك. يخزن هذا الملف أسرارك محليًا:
+قم بإنشاء ملف `.env` في دليل الخلفية الخاص بك. هذا الملف يخزن أسرارك محليًا:  
 
 ```bash
 # .env file - This should NEVER be committed to Git
@@ -788,31 +958,31 @@ GITHUB_TOKEN=your_github_personal_access_token_here
 FASTAPI_DEBUG=True
 ENVIRONMENT=development
 ```
+  
+**فهم ملف .env:**  
+- **سر واحد لكل سطر** بتنسيق `KEY=value`  
+- **لا توجد مسافات** حول علامة التساوي  
+- **لا حاجة إلى علامات اقتباس** حول القيم (عادةً)  
+- **التعليقات** تبدأ بـ `#`  
 
-**فهم ملف .env:**
-- **سر واحد لكل سطر** بتنسيق `KEY=value`
-- **لا توجد مسافات** حول علامة المساواة
-- **لا حاجة إلى علامات اقتباس** حول القيم (عادةً)
-- **التعليقات** تبدأ بـ `#`
-
-#### إنشاء رمز الوصول الشخصي الخاص بك على GitHub
+#### إنشاء رمز الوصول الشخصي الخاص بك على GitHub  
 
-رمز GitHub الخاص بك يشبه كلمة مرور خاصة تمنح تطبيقك الإذن باستخدام خدمات الذكاء الاصطناعي الخاصة بـ GitHub:
+رمز GitHub الخاص بك يشبه كلمة مرور خاصة تمنح تطبيقك الإذن باستخدام خدمات الذكاء الاصطناعي الخاصة بـ GitHub:  
 
-**خطوات إنشاء الرمز:**
-1. **اذهب إلى إعدادات GitHub** → إعدادات المطور → رموز الوصول الشخصي → الرموز (الكلاسيكية)
-2. **انقر على "إنشاء رمز جديد (كلاسيكي)"**
-3. **حدد تاريخ انتهاء الصلاحية** (30 يومًا للاختبار، أطول للإنتاج)
-4. **حدد النطاقات**: تحقق من "repo" وأي أذونات أخرى تحتاجها
-5. **قم بإنشاء الرمز** ونسخه فورًا (لا يمكنك رؤيته مرة أخرى!)
-6. **الصقه في ملف .env الخاص بك**
+**خطوات إنشاء الرمز:**  
+1. **اذهب إلى إعدادات GitHub** → إعدادات المطور → رموز الوصول الشخصي → الرموز (الكلاسيكية)  
+2. **انقر على "إنشاء رمز جديد (كلاسيكي)"**  
+3. **حدد تاريخ انتهاء الصلاحية** (30 يومًا للاختبار، أطول للإنتاج)  
+4. **حدد النطاقات**: تحقق من "repo" وأي أذونات أخرى تحتاجها  
+5. **إنشاء الرمز** ونسخه فورًا (لا يمكنك رؤيته مرة أخرى!)  
+6. **الصقه في ملف .env الخاص بك**  
 
 ```bash
 # Example of what your token looks like (this is fake!)
 GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
 ```
-
-#### تحميل متغيرات البيئة في Python
+  
+#### تحميل متغيرات البيئة في Python  
 
 ```python
 import os
@@ -831,16 +1001,16 @@ client = OpenAI(
     base_url="https://models.github.ai/inference"
 )
 ```
+  
+**ما يفعله هذا الكود:**  
+- **تحميل** ملف .env الخاص بك وجعل المتغيرات متاحة لـ Python  
+- **التحقق** مما إذا كان الرمز المطلوب موجودًا (معالجة أخطاء جيدة!)  
+- **إثارة** خطأ واضح إذا كان الرمز مفقودًا  
+- **استخدام** الرمز بأمان دون كشفه في الكود  
 
-**ما يفعله هذا الكود:**
-- **يحمل** ملف .env الخاص بك ويجعل المتغيرات متاحة لـ Python
-- **يتحقق** مما إذا كان الرمز المطلوب موجودًا (معالجة أخطاء جيدة!)
-- **يرفع** خطأ واضحًا إذا كان الرمز مفقودًا
-- **يستخدم** الرمز بأمان دون كشفه في الكود
+#### أمان Git: ملف .gitignore  
 
-#### أمان Git: ملف .gitignore
-
-يخبر ملف `.gitignore` Git الملفات التي لا يجب تتبعها أو تحميلها:
+ملف `.gitignore` الخاص بك يخبر Git بالملفات التي لا يجب تتبعها أو تحميلها أبدًا:  
 
 ```bash
 # .gitignore - Add these lines
@@ -852,12 +1022,12 @@ __pycache__/
 venv/
 .vscode/
 ```
+  
+**لماذا هذا مهم**: بمجرد إضافة `.env` إلى `.gitignore`، سيتجاهل Git ملف البيئة الخاص بك، مما يمنعك من تحميل أسرارك إلى GitHub عن طريق الخطأ.  
 
-**لماذا هذا مهم**: بمجرد إضافة `.env` إلى `.gitignore`، سيتجاهل Git ملف البيئة الخاص بك، مما يمنعك من تحميل أسرارك إلى GitHub عن طريق الخطأ.
-
-#### بيئات مختلفة، أسرار مختلفة
+#### بيئات مختلفة، أسرار مختلفة  
 
-تستخدم التطبيقات الاحترافية مفاتيح API مختلفة لبيئات مختلفة:
+التطبيقات الاحترافية تستخدم مفاتيح واجهة برمجة تطبيقات مختلفة لبيئات مختلفة:  
 
 ```bash
 # .env.development
@@ -868,12 +1038,11 @@ DEBUG=True
 GITHUB_TOKEN=your_production_token
 DEBUG=False
 ```
+  
+**لماذا هذا مهم**: لا تريد أن تؤثر تجارب التطوير الخاصة بك على حصة استخدام الذكاء الاصطناعي في الإنتاج، وتريد مستويات أمان مختلفة لبيئات مختلفة.  
 
-**لماذا هذا مهم**: لا تريد أن تؤثر تجارب التطوير الخاصة بك على حصة استخدام الذكاء الاصطناعي في الإنتاج، وتريد مستويات أمان مختلفة لبيئات مختلفة.
-
-### بدء تشغيل خادم التطوير الخاص بك: إحياء FastAPI الخاص بك
-
-الآن تأتي اللحظة المثيرة – بدء تشغيل خادم تطوير FastAPI الخاص بك ورؤية تكامل الذكاء الاصطناعي الخاص بك ينبض بالحياة! يستخدم FastAPI Uvicorn، وهو خادم ASGI سريع جدًا مصمم خصيصًا لتطبيقات Python غير المتزامنة.
+### تشغيل خادم التطوير الخاص بك: إحياء FastAPI الخاص بك  
+اللحظة المثيرة تأتي الآن – بدء تشغيل خادم تطوير FastAPI ومشاهدة تكامل الذكاء الاصطناعي ينبض بالحياة! يستخدم FastAPI خادم Uvicorn، وهو خادم ASGI سريع للغاية مصمم خصيصًا لتطبيقات Python غير المتزامنة.
 
 #### فهم عملية بدء تشغيل خادم FastAPI
 
@@ -885,25 +1054,25 @@ python api.py
 uvicorn api:app --host 0.0.0.0 --port 5000 --reload
 ```
 
-عندما تقوم بتشغيل هذا الأمر، إليك ما يحدث خلف الكواليس:
+عند تشغيل هذا الأمر، يحدث ما يلي خلف الكواليس:
 
-**1. يقوم Python بتحميل تطبيق FastAPI الخاص بك**:
-- يستورد جميع المكتبات المطلوبة (FastAPI، Pydantic، OpenAI، إلخ.)
-- يحمل متغيرات البيئة من ملف `.env` الخاص بك
-- ينشئ مثيل تطبيق FastAPI مع توثيق تلقائي
+**1. Python يقوم بتحميل تطبيق FastAPI الخاص بك**:
+- يقوم باستيراد جميع المكتبات المطلوبة (FastAPI، Pydantic، OpenAI، إلخ)
+- يقوم بتحميل متغيرات البيئة من ملف `.env` الخاص بك
+- ينشئ مثيل تطبيق FastAPI مع التوثيق التلقائي
 
-**2. يقوم Uvicorn بتكوين خادم ASGI**:
-- يرتبط بالمنفذ 5000 مع قدرات معالجة الطلبات غير المتزامنة
+**2. Uvicorn يقوم بتكوين خادم ASGI**:
+- يربط المنفذ 5000 مع قدرات معالجة الطلبات غير المتزامنة
 - يقوم بإعداد توجيه الطلبات مع التحقق التلقائي
-- يُمكّن إعادة التحميل السريع للتطوير (إعادة التشغيل عند تغييرات الملفات)
+- يُمكن إعادة التحميل السريع أثناء التطوير (إعادة التشغيل عند تغييرات الملفات)
 - يُنشئ توثيق API تفاعلي
 
 **3. يبدأ الخادم في الاستماع**:
 - يظهر في الطرفية: `INFO: Uvicorn running on http://0.0.0.0:5000`
 - يمكن للخادم معالجة طلبات الذكاء الاصطناعي المتزامنة
-- تصبح API الخاصة بك جاهزة مع توثيق تلقائي في `http://localhost:5000/docs`
+- يصبح API جاهزًا مع التوثيق التلقائي على `http://localhost:5000/docs`
 
-#### ما يجب أن تراه عندما يعمل كل شيء
+#### ما يجب أن تراه عندما يعمل كل شيء بشكل صحيح
 
 ```bash
 $ python api.py
@@ -915,12 +1084,12 @@ INFO:     Waiting for application startup.
 INFO:     Application startup complete.
 ```
 
-**فهم إخراج FastAPI:**
-- **سيشاهد التغييرات**: إعادة التحميل التلقائي مفعلة للتطوير
+**فهم مخرجات FastAPI**:
+- **سيقوم بمراقبة التغييرات**: تم تمكين إعادة التحميل التلقائي للتطوير
 - **Uvicorn يعمل**: خادم ASGI عالي الأداء نشط
 - **عملية إعادة التحميل بدأت**: مراقب الملفات لإعادة التشغيل التلقائي
 - **اكتمال بدء تشغيل التطبيق**: تم تهيئة تطبيق FastAPI بنجاح
-- **التوثيق التفاعلي متاح**: قم بزيارة `/docs` للحصول على توثيق API تلقائي
+- **التوثيق التفاعلي متاح**: قم بزيارة `/docs` للحصول على توثيق API التلقائي
 
 #### اختبار FastAPI الخاص بك: طرق قوية متعددة
 
@@ -928,14 +1097,14 @@ INFO:     Application startup complete.
 
 **الطريقة الأولى: توثيق API التفاعلي (موصى به)**
 1. افتح متصفحك وانتقل إلى `http://localhost:5000/docs`
-2. سترى واجهة Swagger UI مع جميع نقاط النهاية الخاصة بك موثقة
-3. انقر على `/hello` → "جربها" → أدخل رسالة اختبار → "تنفيذ"
+2. سترى واجهة Swagger UI مع جميع نقاط النهاية موثقة
+3. انقر على `/hello` → "Try it out" → أدخل رسالة اختبار → "Execute"
 4. شاهد الرد مباشرة في المتصفح مع التنسيق المناسب
 
 **الطريقة الثانية: اختبار المتصفح الأساسي**
-1. انتقل إلى `http://localhost:5000` لنقطة النهاية الجذرية
+1. انتقل إلى `http://localhost:5000` لنقطة النهاية الرئيسية
 2. انتقل إلى `http://localhost:5000/health` للتحقق من صحة الخادم
-3. هذا يؤكد أن خادم FastAPI الخاص بك يعمل بشكل صحيح
+3. هذا يؤكد أن خادم FastAPI يعمل بشكل صحيح
 
 **الطريقة الثالثة: اختبار سطر الأوامر (متقدم)**
 ```bash
@@ -948,7 +1117,7 @@ curl -X POST http://localhost:5000/hello \
 # {"response": "Hello! I'm your AI assistant. How can I help you today?"}
 ```
 
-**الطريقة الرابعة: سكريبت اختبار Python**
+**الطريقة الرابعة: سكربت اختبار Python**
 ```python
 # test_api.py - Create this file to test your API
 import requests
@@ -966,13 +1135,13 @@ else:
     print("Error:", response.status_code, response.text)
 ```
 
-#### استكشاف الأخطاء الشائعة عند بدء التشغيل
+#### استكشاف المشكلات الشائعة عند بدء التشغيل
 
-| رسالة الخطأ | معناها | كيفية الإصلاح |
-|-------------|--------|--------------|
-| `ModuleNotFoundError: No module named 'fastapi'` | لم يتم تثبيت FastAPI | قم بتشغيل `pip install fastapi uvicorn` في بيئة العمل الافتراضية |
-| `ModuleNotFoundError: No module named 'uvicorn'` | لم يتم تثبيت خادم ASGI | قم بتشغيل `pip install uvicorn` في بيئة العمل الافتراضية |
-| `KeyError: 'GITHUB_TOKEN'` | لم يتم العثور على متغير البيئة | تحقق من ملف `.env` واستدعاء `load_dotenv()` |
+| رسالة الخطأ | ماذا تعني | كيفية الإصلاح |
+|-------------|-----------|---------------|
+| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI غير مثبت | قم بتشغيل `pip install fastapi uvicorn` في بيئة العمل الافتراضية |
+| `ModuleNotFoundError: No module named 'uvicorn'` | خادم ASGI غير مثبت | قم بتشغيل `pip install uvicorn` في بيئة العمل الافتراضية |
+| `KeyError: 'GITHUB_TOKEN'` | متغير البيئة غير موجود | تحقق من ملف `.env` الخاص بك واستدعاء `load_dotenv()` |
 | `Address already in use` | المنفذ 5000 مشغول | قم بإنهاء العمليات الأخرى التي تستخدم المنفذ 5000 أو قم بتغيير المنفذ |
 | `ValidationError` | بيانات الطلب لا تتطابق مع نموذج Pydantic | تحقق من أن تنسيق الطلب يتطابق مع المخطط المتوقع |
 | `HTTPException 422` | كيان غير قابل للمعالجة | فشل التحقق من الطلب، تحقق من `/docs` للحصول على التنسيق الصحيح |
@@ -980,7 +1149,7 @@ else:
 
 #### أفضل الممارسات للتطوير
 
-**إعادة التحميل التلقائي**: يوفر FastAPI مع Uvicorn إعادة تحميل تلقائية عند حفظ تغييرات ملفات Python. هذا يعني أنه يمكنك تعديل الكود واختباره فورًا دون الحاجة إلى إعادة التشغيل يدويًا.
+**إعادة التحميل السريع**: يوفر FastAPI مع Uvicorn إعادة تحميل تلقائية عند حفظ تغييرات ملفات Python. هذا يعني أنه يمكنك تعديل الكود واختباره فورًا دون إعادة التشغيل يدويًا.
 
 ```python
 # Enable hot reloading explicitly
@@ -988,7 +1157,7 @@ if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True enables hot reload
 ```
 
-**التسجيل أثناء التطوير**: أضف تسجيلًا لفهم ما يحدث:
+**التسجيل للتطوير**: أضف تسجيلًا لفهم ما يحدث:
 
 ```python
 import logging
@@ -1017,11 +1186,11 @@ def hello():
         return jsonify({"error": "AI service temporarily unavailable"}), 500
 ```
 
-**لماذا يساعد التسجيل**: أثناء التطوير، يمكنك رؤية الطلبات التي تصل، وكيف يستجيب الذكاء الاصطناعي، وأين تحدث الأخطاء. هذا يجعل عملية تصحيح الأخطاء أسرع بكثير.
+**لماذا يساعد التسجيل**: أثناء التطوير، يمكنك رؤية الطلبات التي تصل، وكيف يستجيب الذكاء الاصطناعي، وأين تحدث الأخطاء. هذا يجعل عملية التصحيح أسرع بكثير.
 
-### إعداد GitHub Codespaces: تطوير سحابي بسهولة
+### التهيئة لـ GitHub Codespaces: تطوير سحابي بسهولة
 
-GitHub Codespaces يشبه امتلاك جهاز كمبيوتر قوي للتطوير في السحابة يمكنك الوصول إليه من أي متصفح. إذا كنت تعمل في Codespaces، هناك بعض الخطوات الإضافية لجعل الواجهة الخلفية الخاصة بك متاحة للواجهة الأمامية.
+GitHub Codespaces يشبه وجود جهاز تطوير قوي في السحابة يمكنك الوصول إليه من أي متصفح. إذا كنت تعمل في Codespaces، هناك بعض الخطوات الإضافية لجعل الواجهة الخلفية الخاصة بك متاحة للواجهة الأمامية.
 
 #### فهم الشبكات في Codespaces
 
@@ -1029,19 +1198,19 @@ GitHub Codespaces يشبه امتلاك جهاز كمبيوتر قوي للتط
 - الواجهة الخلفية: `http://localhost:5000`
 - الواجهة الأمامية: `http://localhost:3000` (أو file://)
 
-في Codespaces، بيئة التطوير الخاصة بك تعمل على خوادم GitHub، لذا فإن "localhost" له معنى مختلف. يقوم GitHub تلقائيًا بإنشاء روابط عامة لخدماتك، ولكن تحتاج إلى إعدادها بشكل صحيح.
+في Codespaces، بيئة التطوير الخاصة بك تعمل على خوادم GitHub، لذا فإن "localhost" له معنى مختلف. يقوم GitHub تلقائيًا بإنشاء روابط عامة لخدماتك، ولكن تحتاج إلى تكوينها بشكل صحيح.
 
-#### خطوات إعداد Codespaces
+#### خطوات التهيئة في Codespaces
 
-**1. قم بتشغيل خادم الواجهة الخلفية**:
+**1. قم بتشغيل خادم الواجهة الخلفية الخاص بك**:
 ```bash
 cd backend
 python api.py
 ```
 
-سترى رسالة بدء التشغيل المعتادة لـ FastAPI/Uvicorn، ولكن لاحظ أنها تعمل داخل بيئة Codespace.
+سترى رسالة بدء تشغيل FastAPI/Uvicorn المعتادة، ولكن لاحظ أنها تعمل داخل بيئة Codespace.
 
-**2. إعداد رؤية المنفذ**:
+**2. قم بتكوين رؤية المنفذ**:
 - ابحث عن علامة التبويب "Ports" في اللوحة السفلية لـ VS Code
 - ابحث عن المنفذ 5000 في القائمة
 - انقر بزر الماوس الأيمن على المنفذ 5000
@@ -1055,7 +1224,7 @@ python api.py
 https://your-codespace-name-5000.app.github.dev
 ```
 
-**4. قم بتحديث إعدادات الواجهة الأمامية**:
+**4. قم بتحديث تكوين الواجهة الأمامية الخاصة بك**:
 ```javascript
 // In your frontend app.js, update the BASE_URL:
 this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
@@ -1068,14 +1237,14 @@ this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 https://[codespace-name]-[port].app.github.dev
 ```
 
-**تفصيل هذا النمط:**
+**تفصيل هذا النمط**:
 - `codespace-name`: معرف فريد لـ Codespace الخاص بك (عادةً يتضمن اسم المستخدم الخاص بك)
-- `port`: رقم المنفذ الذي تعمل عليه الخدمة الخاصة بك (5000 لتطبيق FastAPI الخاص بنا)
+- `port`: رقم المنفذ الذي تعمل عليه خدمتك (5000 لتطبيق FastAPI الخاص بنا)
 - `app.github.dev`: نطاق GitHub لتطبيقات Codespace
 
 #### اختبار إعداد Codespace الخاص بك
 
-**1. اختبر الواجهة الخلفية مباشرةً**:
+**1. اختبر الواجهة الخلفية مباشرة**:
 افتح الرابط العام الخاص بك في علامة تبويب جديدة في المتصفح. يجب أن ترى:
 ```
 Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
@@ -1093,21 +1262,21 @@ fetch('https://your-codespace-name-5000.app.github.dev/hello', {
 .then(data => console.log(data));
 ```
 
-#### Codespaces مقابل التطوير المحلي
+#### مقارنة بين Codespaces والتطوير المحلي
 
 | الجانب | التطوير المحلي | GitHub Codespaces |
 |--------|----------------|-------------------|
 | **وقت الإعداد** | أطول (تثبيت Python، التبعيات) | فوري (بيئة مُعدة مسبقًا) |
 | **الوصول إلى الرابط** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
-| **إعداد المنفذ** | تلقائي | يدوي (جعل المنافذ عامة) |
-| **استمرارية الملفات** | جهاز الكمبيوتر المحلي | مستودع GitHub |
+| **تكوين المنفذ** | تلقائي | يدوي (جعل المنافذ عامة) |
+| **استمرارية الملفات** | جهاز محلي | مستودع GitHub |
 | **التعاون** | صعب مشاركة البيئة | سهل مشاركة رابط Codespace |
 | **الاعتماد على الإنترنت** | فقط لطلبات API الذكاء الاصطناعي | مطلوب لكل شيء |
 
 #### نصائح لتطوير Codespace
 
 **متغيرات البيئة في Codespaces**:
-ملف `.env` الخاص بك يعمل بنفس الطريقة في Codespaces، ولكن يمكنك أيضًا إعداد متغيرات البيئة مباشرةً في Codespace:
+يعمل ملف `.env` الخاص بك بنفس الطريقة في Codespaces، ولكن يمكنك أيضًا تعيين متغيرات البيئة مباشرة في Codespace:
 
 ```bash
 # Set environment variable for the current session
@@ -1118,9 +1287,9 @@ echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
 ```
 
 **إدارة المنافذ**:
-- يكتشف Codespaces تلقائيًا عندما تبدأ تطبيقك في الاستماع على منفذ
+- يكتشف Codespaces تلقائيًا عندما يبدأ تطبيقك في الاستماع على منفذ
 - يمكنك إعادة توجيه منافذ متعددة في نفس الوقت (مفيد إذا أضفت قاعدة بيانات لاحقًا)
-- تظل المنافذ متاحة طالما أن Codespace الخاص بك يعمل
+- تبقى المنافذ قابلة للوصول طالما أن Codespace الخاص بك يعمل
 
 **سير عمل التطوير**:
 1. قم بإجراء تغييرات على الكود في VS Code
@@ -1136,7 +1305,7 @@ echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
 
 ### فهم بنية الواجهة الأمامية الحديثة
 
-واجهة الدردشة الخاصة بنا ستكون ما يسمى بـ "تطبيق صفحة واحدة" أو SPA. بدلاً من النهج القديم حيث يتم تحميل صفحة جديدة مع كل نقرة، يقوم تطبيقنا بالتحديث بسلاسة وفورًا:
+ستكون واجهة الدردشة الخاصة بنا ما نسميه "تطبيق صفحة واحدة" أو SPA. بدلاً من النهج القديم حيث يتم تحميل صفحة جديدة مع كل نقرة، يتم تحديث تطبيقنا بسلاسة وفورًا:
 
 **المواقع القديمة**: مثل قراءة كتاب مادي – تقلب إلى صفحات جديدة تمامًا
 **تطبيق الدردشة الخاص بنا**: مثل استخدام هاتفك – كل شيء يتدفق ويتحدث بسلاسة
@@ -1152,6 +1321,30 @@ graph TD
     G --> H[Ready for Next Message]
 ```
 
+```mermaid
+classDiagram
+    class ChatApp {
+        +messages: HTMLElement
+        +form: HTMLElement
+        +input: HTMLElement
+        +sendButton: HTMLElement
+        +BASE_URL: string
+        +API_ENDPOINT: string
+        
+        +constructor()
+        +initializeEventListeners()
+        +handleSubmit(event)
+        +callAPI(message)
+        +appendMessage(text, role)
+        +escapeHtml(text)
+        +scrollToBottom()
+        +setLoading(isLoading)
+    }
+    
+    ChatApp --> DOM : manipulates
+    ChatApp --> FastAPI : sends requests
+```
+
 ### الركائز الثلاث لتطوير الواجهة الأمامية
 
 كل تطبيق واجهة أمامية – من المواقع البسيطة إلى التطبيقات المعقدة مثل Discord أو Slack – يعتمد على ثلاث تقنيات أساسية. فكر فيها كأساس لكل ما تراه وتتفاعل معه على الويب:
@@ -1164,26 +1357,26 @@ graph TD
 **CSS (العرض)**: هذا هو المصمم الداخلي
 - يجعل كل شيء يبدو جميلًا (الألوان، الخطوط، التخطيطات)
 - يتعامل مع أحجام الشاشات المختلفة (الهاتف مقابل الكمبيوتر المحمول مقابل الجهاز اللوحي)
-- ينشئ الرسوم المتحركة السلسة والتغذية البصرية
+- ينشئ الرسوم المتحركة السلسة وردود الفعل البصرية
 
 **JavaScript (السلوك)**: هذا هو العقل
 - يستجيب لما يفعله المستخدمون (النقرات، الكتابة، التمرير)
 - يتحدث إلى الواجهة الخلفية ويحدث الصفحة
 - يجعل كل شيء تفاعليًا وديناميكيًا
 
-**فكر فيها كتصميم معماري:**
+**فكر فيها كتصميم معماري**:
 - **HTML**: المخطط الهيكلي (تحديد المساحات والعلاقات)
 - **CSS**: التصميم الجمالي والبيئي (النمط البصري وتجربة المستخدم)
 - **JavaScript**: الأنظمة الميكانيكية (الوظائف والتفاعلية)
 
-### لماذا تهم بنية JavaScript الحديثة
+### لماذا بنية JavaScript الحديثة مهمة
 
-تطبيق الدردشة الخاص بنا سيستخدم أنماط JavaScript الحديثة التي ستراها في التطبيقات الاحترافية. فهم هذه المفاهيم سيساعدك على النمو كمطور:
+سيستخدم تطبيق الدردشة الخاص بنا أنماط JavaScript الحديثة التي ستراها في التطبيقات الاحترافية. فهم هذه المفاهيم سيساعدك على النمو كمطور:
 
-**بنية قائمة على الفئات**: سننظم الكود الخاص بنا في فئات، وهو مثل إنشاء مخططات للكائنات
-**Async/Await**: الطريقة الحديثة للتعامل مع العمليات التي تستغرق وقتًا (مثل استدعاءات API)
+**بنية قائمة على الفئات**: سننظم الكود الخاص بنا في فئات، وهو مثل إنشاء مخططات للأشياء
+**Async/Await**: الطريقة الحديثة للتعامل مع العمليات التي تستغرق وقتًا (مثل طلبات API)
 **البرمجة القائمة على الأحداث**: تطبيقنا يستجيب لإجراءات المستخدم (النقرات، ضغط المفاتيح) بدلاً من التشغيل في حلقة
-**التلاعب بـ DOM**: تحديث محتوى صفحة الويب ديناميكيًا بناءً على تفاعلات المستخدم واستجابات API
+**التلاعب بـ DOM**: تحديث محتوى صفحة الويب ديناميكيًا بناءً على تفاعلات المستخدم وردود API
 
 ### إعداد هيكل المشروع
 
@@ -1196,16 +1389,16 @@ frontend/
 └── styles.css      # Visual styling
 ```
 
-**فهم الهيكل:**
+**فهم الهيكل**:
 - **يفصل** بين الهيكل (HTML)، السلوك (JavaScript)، والعرض (CSS)
-- **يحافظ** على هيكل ملفات بسيط وسهل التنقل والتعديل
+- **يحافظ** على هيكل ملفات بسيط يسهل التنقل والتعديل
 - **يتبع** أفضل ممارسات تطوير الويب للتنظيم وقابلية الصيانة
 
 ### بناء أساس HTML: هيكل دلالي للوصول
 
-لنبدأ بهيكل HTML. يركز تطوير الويب الحديث على "HTML الدلالي" – استخدام عناصر HTML التي تصف بوضوح غرضها، وليس فقط مظهرها. هذا يجعل تطبيقك متاحًا لقراء الشاشة ومحركات البحث والأدوات الأخرى.
+لنبدأ بهيكل HTML. يركز تطوير الويب الحديث على "HTML الدلالي" – استخدام عناصر HTML التي تصف بوضوح غرضها، وليس فقط مظهرها. هذا يجعل تطبيقك متاحًا لقارئات الشاشة ومحركات البحث والأدوات الأخرى.
 
-**لماذا يهم HTML الدلالي**: تخيل أنك تصف تطبيق الدردشة الخاص بك لشخص عبر الهاتف. ستقول "هناك رأس يحتوي على العنوان، منطقة رئيسية حيث تظهر المحادثات، ونموذج في الأسفل لكتابة الرسائل." يستخدم HTML الدلالي عناصر تتطابق مع هذا الوصف الطبيعي.
+**لماذا HTML الدلالي مهم**: تخيل وصف تطبيق الدردشة الخاص بك لشخص عبر الهاتف. ستقول "هناك رأس مع العنوان، منطقة رئيسية حيث تظهر المحادثات، ونموذج في الأسفل لكتابة الرسائل." يستخدم HTML الدلالي عناصر تتطابق مع هذا الوصف الطبيعي.
 
 قم بإنشاء `index.html` مع هذا الترميز المنظم بعناية:
 
@@ -1249,52 +1442,51 @@ frontend/
 </html>
 ```
 
-**فهم كل عنصر HTML وغرضه:**
+**فهم كل عنصر HTML وغرضه**:
 
 #### هيكل الوثيقة
 - **`<!DOCTYPE html>`**: يخبر المتصفح أن هذا HTML5 حديث
-- **`<html lang="en">`**: يحدد لغة الصفحة لقراء الشاشة وأدوات الترجمة
+- **`<html lang="en">`**: يحدد لغة الصفحة لقارئات الشاشة وأدوات الترجمة
 - **`<meta charset="UTF-8">`**: يضمن ترميز الأحرف الصحيح للنصوص الدولية
 - **`<meta name="viewport"...>`**: يجعل الصفحة متجاوبة مع الأجهزة المحمولة من خلال التحكم في التكبير والتصغير
 
 #### العناصر الدلالية
 - **`<header>`**: يحدد بوضوح القسم العلوي مع العنوان والوصف
-- **`<main>`**: يخصص منطقة المحتوى الرئيسية (حيث تحدث المحادثات)
-- **`<form>`**: صحيح دلاليًا لإدخال المستخدم، يتيح التنقل الصحيح عبر لوحة المفاتيح
+- **`<main>`**: يخصص المنطقة الرئيسية للمحتوى (حيث تحدث المحادثات)
+- **`<form>`**: صحيح دلاليًا لإدخال المستخدم، يُمكن التنقل الصحيح عبر لوحة المفاتيح
 
 #### ميزات الوصول
-- **`role="log"`**: يخبر قراء الشاشة أن هذه المنطقة تحتوي على سجل زمني للرسائل
-- **`aria-live="polite"`**: يعلن عن الرسائل الجديدة لقراء الشاشة دون مقاطعة
+- **`role="log"`**: يخبر قارئات الشاشة أن هذه المنطقة تحتوي على سجل زمني للرسائل
+- **`aria-live="polite"`**: يعلن عن الرسائل الجديدة لقارئات الشاشة دون مقاطعة
 - **`aria-label`**: يوفر تسميات وصفية لعناصر التحكم في النموذج
 - **`required`**: يتحقق المتصفح من أن المستخدمين يدخلون رسالة قبل الإرسال
 
-#### تكامل CSS وJavaScript
+#### تكامل CSS و JavaScript
 - **`class` attributes**: توفر نقاط ربط للتنسيق باستخدام CSS (مثل `chat-container`, `input-group`)
-- **`id` attributes**: تسمح لـ JavaScript بالعثور على عناصر محددة ومعالجتها
+- **`id` attributes**: تسمح لـ JavaScript بالعثور على عناصر محددة والتلاعب بها
 - **وضع السكربت**: يتم تحميل ملف JavaScript في النهاية حتى يتم تحميل HTML أولاً
 
-**لماذا يعمل هذا الهيكل:**
+**لماذا يعمل هذا الهيكل**:
 - **تدفق منطقي**: الرأس → المحتوى الرئيسي → نموذج الإدخال يتطابق مع ترتيب القراءة الطبيعي
 - **قابلية الوصول عبر لوحة المفاتيح**: يمكن للمستخدمين التنقل عبر جميع العناصر التفاعلية
-- **صديق لقراء الشاشة**: معالم واضحة وأوصاف للمستخدمين ضعاف البصر
+- **صديق لقارئات الشاشة**: معالم واضحة وأوصاف للمستخدمين ضعاف البصر
 - **متجاوب مع الأجهزة المحمولة**: علامة meta viewport تمكن التصميم المتجاوب
 - **تحسين تدريجي**: يعمل حتى إذا فشل تحميل CSS أو JavaScript
 
 ### إضافة JavaScript التفاعلي: منطق تطبيق ويب حديث
-
-الآن دعونا نبني JavaScript الذي يجعل واجهة الدردشة الخاصة بنا تنبض بالحياة. سنستخدم أنماط JavaScript الحديثة التي ستواجهها في تطوير الويب الاحترافي، بما في ذلك الفئات ES6، async/await، والبرمجة القائمة على الأحداث.
+الآن دعونا نبني كود JavaScript الذي سيجعل واجهة الدردشة الخاصة بنا تنبض بالحياة. سنستخدم أنماط JavaScript الحديثة التي ستواجهها في تطوير الويب الاحترافي، بما في ذلك الفئات (classes) في ES6، و async/await، وبرمجة الأحداث.
 
 #### فهم بنية JavaScript الحديثة
 
-بدلاً من كتابة كود إجرائي (سلسلة من الوظائف التي تعمل بالترتيب)، سننشئ **بنية قائمة على الفئات**. فكر في الفئة كمخطط لإنشاء الكائنات – مثل كيف يمكن استخدام مخطط المهندس المعماري لبناء منازل متعددة.
+بدلاً من كتابة كود إجرائي (سلسلة من الوظائف التي تعمل بترتيب معين)، سنقوم بإنشاء **بنية تعتمد على الفئات (classes)**. فكر في الفئة كأنها مخطط لإنشاء الكائنات – مثلما يمكن استخدام مخطط المهندس المعماري لبناء عدة منازل.
 
-**لماذا نستخدم الفئات لتطبيقات الويب؟**
-- **التنظيم**: يتم تجميع جميع الوظائف ذات الصلة معًا
-- **إعادة الاستخدام**: يمكنك إنشاء مثيلات متعددة للدردشة على نفس الصفحة
-- **سهولة الصيانة**: أسهل في تصحيح الأخطاء وتعديل الميزات المحددة
-- **المعيار الاحترافي**: يتم استخدام هذا النمط في أطر العمل مثل React, Vue, وAngular
+**لماذا نستخدم الفئات في تطبيقات الويب؟**
+- **التنظيم**: يتم تجميع جميع الوظائف ذات الصلة معًا.
+- **إعادة الاستخدام**: يمكنك إنشاء عدة مثيلات للدردشة على نفس الصفحة.
+- **سهولة الصيانة**: يسهل تصحيح الأخطاء وتعديل الميزات المحددة.
+- **المعيار المهني**: يتم استخدام هذا النمط في أطر العمل مثل React وVue وAngular.
 
-قم بإنشاء `app.js` مع هذا JavaScript الحديث والمنظم جيدًا:
+قم بإنشاء ملف `app.js` باستخدام JavaScript الحديث والمنظم:
 
 ```javascript
 // app.js - Modern chat application logic
@@ -1412,9 +1604,9 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 ```
 
-#### فهم كل مفهوم JavaScript
+#### فهم كل مفهوم في JavaScript
 
-**بنية الفئات ES6**:
+**بنية الفئات في ES6**:
 ```javascript
 class ChatApp {
     constructor() {
@@ -1447,8 +1639,8 @@ try {
 }
 ```
 
-**البرمجة القائمة على الأحداث**:
-بدلاً من التحقق باستمرار مما إذا كان قد حدث شيء ما، نستمع إلى الأحداث:
+**برمجة الأحداث**:
+بدلاً من التحقق باستمرار مما إذا كان هناك شيء قد حدث، نستمع إلى الأحداث:
 ```javascript
 // When form is submitted, run handleSubmit
 this.form.addEventListener("submit", (e) => this.handleSubmit(e));
@@ -1457,7 +1649,7 @@ this.form.addEventListener("submit", (e) => this.handleSubmit(e));
 this.input.addEventListener("keypress", (e) => { /* ... */ });
 ```
 
-**التلاعب بـ DOM**:
+**التعامل مع DOM**:
 ```javascript
 // Create new elements
 const messageElement = document.createElement("div");
@@ -1481,7 +1673,7 @@ escapeHtml(text) {
 }
 ```
 
-**لماذا يهم هذا**: إذا كتب المستخدم `<script>alert('hack')</script>`، فإن هذه الوظيفة تضمن عرضه كنص بدلاً من تنفيذه ككود.
+**لماذا هذا مهم**: إذا قام المستخدم بكتابة `<script>alert('hack')</script>`، فإن هذه الوظيفة تضمن عرضه كنص بدلاً من تنفيذه ككود.
 
 **معالجة الأخطاء**:
 ```javascript
@@ -1495,25 +1687,40 @@ try {
 ```
 
 **اعتبارات تجربة المستخدم**:
-- **واجهة مستخدم متفائلة**: أضف رسالة المستخدم فورًا، لا تنتظر استجابة الخادم
-- **حالات التحميل**: تعطيل الأزرار وعرض "جارٍ الإرسال..." أثناء الانتظار
-- **التمرير التلقائي**: حافظ على ظهور الرسائل الجديدة
-- **التحقق من الإدخال**: لا ترسل رسائل فارغة
-- **اختصارات لوحة المفاتيح**: مفتاح Enter يرسل الرسائل (مثل تطبيقات الدردشة الحقيقية)
+- **واجهة متفائلة**: أضف رسالة المستخدم فورًا، دون انتظار استجابة الخادم.
+- **حالات التحميل**: قم بتعطيل الأزرار وأظهر "جارٍ الإرسال..." أثناء الانتظار.
+- **التمرير التلقائي**: اجعل الرسائل الأحدث مرئية.
+- **التحقق من الإدخال**: لا ترسل رسائل فارغة.
+- **اختصارات لوحة المفاتيح**: مفتاح Enter يرسل الرسائل (مثل تطبيقات الدردشة الحقيقية).
 
 #### فهم تدفق التطبيق
 
-1. **تحميل الصفحة** → يتم تشغيل حدث `DOMContentLoaded` → يتم إنشاء `new ChatApp()`
-2. **تشغيل المُنشئ** → يحصل على مراجع عناصر DOM → إعداد مستمعي الأحداث
-3. **يكتب المستخدم رسالة** → يضغط Enter أو ينقر على إرسال → يتم تشغيل `handleSubmit`
-4. **handleSubmit** → يتحقق من صحة الإدخال → يعرض حالة التحميل → يستدعي API
-5. **استجابة API** → إضافة رسالة الذكاء الاصطناعي إلى الدردشة → إعادة تمكين الواجهة
-6. **جاهز للرسالة التالية** → يمكن للمستخدم متابعة المحادثة
-هذا التصميم قابل للتوسع – يمكنك بسهولة إضافة ميزات مثل تعديل الرسائل، تحميل الملفات، أو إنشاء محادثات متعددة دون الحاجة لإعادة كتابة الهيكل الأساسي.
+1. **تحميل الصفحة** → يتم تشغيل حدث `DOMContentLoaded` → يتم إنشاء `new ChatApp()`.
+2. **تشغيل المُنشئ** → الحصول على مراجع عناصر DOM → إعداد مستمعي الأحداث.
+3. **كتابة المستخدم للرسالة** → الضغط على Enter أو النقر على إرسال → يتم تشغيل `handleSubmit`.
+4. **تشغيل handleSubmit** → التحقق من صحة الإدخال → عرض حالة التحميل → استدعاء API.
+5. **استجابة API** → إضافة رسالة الذكاء الاصطناعي إلى الدردشة → إعادة تمكين الواجهة.
+6. **جاهز للرسالة التالية** → يمكن للمستخدم متابعة الدردشة.
 
-### تنسيق واجهة الدردشة الخاصة بك
+هذه البنية قابلة للتوسع – يمكنك بسهولة إضافة ميزات مثل تعديل الرسائل، تحميل الملفات، أو سلاسل محادثات متعددة دون إعادة كتابة الهيكل الأساسي.
 
-الآن دعونا ننشئ واجهة دردشة حديثة وجذابة بصريًا باستخدام CSS. التنسيق الجيد يجعل تطبيقك يبدو احترافيًا ويحسن تجربة المستخدم بشكل عام. سنستخدم ميزات CSS الحديثة مثل Flexbox، CSS Grid، والخصائص المخصصة لتصميم مستجيب وسهل الوصول.
+### 🎯 مراجعة تعليمية: بنية الواجهة الأمامية الحديثة
+
+**فهم البنية**: لقد قمت بتنفيذ تطبيق صفحة واحدة كامل باستخدام أنماط JavaScript الحديثة. هذا يمثل تطوير واجهة أمامية بمستوى احترافي.
+
+**المفاهيم الرئيسية التي تم إتقانها**:
+- **بنية الفئات في ES6**: هيكل كود منظم وقابل للصيانة.
+- **أنماط Async/Await**: برمجة غير متزامنة حديثة.
+- **برمجة الأحداث**: تصميم واجهة مستخدم تفاعلية.
+- **أفضل ممارسات الأمان**: منع XSS والتحقق من الإدخال.
+
+**الاتصال بالصناعة**: الأنماط التي تعلمتها (بنية تعتمد على الفئات، العمليات غير المتزامنة، التعامل مع DOM) هي أساس الأطر الحديثة مثل React وVue وAngular. أنت تبني بنفس التفكير المعماري المستخدم في التطبيقات الإنتاجية.
+
+**سؤال للتفكير**: كيف يمكنك توسيع تطبيق الدردشة هذا للتعامل مع محادثات متعددة أو مصادقة المستخدم؟ فكر في التغييرات المعمارية المطلوبة وكيف يمكن أن تتطور بنية الفئة.
+
+### تصميم واجهة الدردشة الخاصة بك
+
+الآن دعونا ننشئ واجهة دردشة حديثة وجذابة بصريًا باستخدام CSS. التصميم الجيد يجعل تطبيقك يبدو احترافيًا ويحسن تجربة المستخدم بشكل عام. سنستخدم ميزات CSS الحديثة مثل Flexbox وCSS Grid والخصائص المخصصة لتصميم مستجيب وسهل الوصول.
 
 قم بإنشاء ملف `styles.css` باستخدام هذه الأنماط الشاملة:
 
@@ -1775,17 +1982,17 @@ body {
 ```
 
 **فهم بنية CSS:**
-- **استخدام** الخصائص المخصصة لـ CSS (المتغيرات) لتوحيد التصميم وسهولة الصيانة
-- **تطبيق** تخطيط Flexbox لتصميم مستجيب ومحاذاة صحيحة
-- **تضمين** حركات سلسة لظهور الرسائل دون أن تكون مشتتة
-- **توفير** تمييز بصري بين رسائل المستخدم، ردود الذكاء الاصطناعي، وحالات الخطأ
-- **دعم** التصميم المستجيب الذي يعمل على أجهزة الكمبيوتر المكتبية والهواتف المحمولة
-- **مراعاة** سهولة الوصول مع تفضيلات تقليل الحركة ونسب التباين المناسبة
-- **تقديم** دعم الوضع الداكن بناءً على تفضيلات نظام المستخدم
+- **استخدام** خصائص CSS المخصصة (المتغيرات) لتوحيد التصميم وسهولة الصيانة.
+- **تطبيق** تخطيط Flexbox لتصميم مستجيب ومحاذاة صحيحة.
+- **تضمين** حركات سلسة لظهور الرسائل دون أن تكون مشتتة.
+- **توفير** تمييز بصري بين رسائل المستخدم، ردود الذكاء الاصطناعي، وحالات الخطأ.
+- **دعم** تصميم مستجيب يعمل على كل من أجهزة الكمبيوتر المكتبية والهواتف المحمولة.
+- **مراعاة** إمكانية الوصول مع تفضيلات تقليل الحركة ونسب تباين مناسبة.
+- **تقديم** دعم الوضع الداكن بناءً على تفضيلات نظام المستخدم.
 
 ### إعداد عنوان URL الخاص بالخادم الخلفي
 
-الخطوة الأخيرة هي تحديث `BASE_URL` في JavaScript الخاص بك ليتطابق مع خادمك الخلفي:
+الخطوة الأخيرة هي تحديث `BASE_URL` في JavaScript الخاص بك لتطابق خادمك الخلفي:
 
 ```javascript
 // For local development
@@ -1796,15 +2003,15 @@ this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 ```
 
 **تحديد عنوان URL الخاص بالخادم الخلفي:**
-- **التطوير المحلي**: استخدم `http://localhost:5000` إذا كنت تقوم بتشغيل الواجهة الأمامية والخلفية محليًا
-- **Codespaces**: ابحث عن عنوان URL الخاص بالخادم الخلفي في علامة تبويب المنافذ بعد جعل المنفذ 5000 عامًا
-- **الإنتاج**: استبدل بعنوان نطاقك الفعلي عند النشر على خدمة استضافة
+- **التطوير المحلي**: استخدم `http://localhost:5000` إذا كنت تشغل الواجهة الأمامية والخلفية محليًا.
+- **Codespaces**: ابحث عن عنوان URL الخاص بالخادم الخلفي في علامة التبويب Ports بعد جعل المنفذ 5000 عامًا.
+- **الإنتاج**: استبدل بالنطاق الفعلي الخاص بك عند النشر على خدمة استضافة.
 
-> 💡 **نصيحة للاختبار**: يمكنك اختبار الخادم الخلفي مباشرةً عن طريق زيارة عنوان URL الجذر في متصفحك. يجب أن ترى رسالة الترحيب من خادم FastAPI الخاص بك.
+> 💡 **نصيحة اختبار**: يمكنك اختبار الخادم الخلفي مباشرةً عن طريق زيارة عنوان URL الجذر في متصفحك. يجب أن ترى رسالة الترحيب من خادم FastAPI الخاص بك.
 
 ## الاختبار والنشر
 
-الآن بعد أن قمت ببناء مكونات الواجهة الأمامية والخلفية، دعونا نختبر أن كل شيء يعمل معًا ونستكشف خيارات النشر لمشاركة مساعد الدردشة الخاص بك مع الآخرين.
+الآن بعد أن قمت ببناء كل من مكونات الواجهة الأمامية والخلفية، دعونا نختبر أن كل شيء يعمل معًا ونستكشف خيارات النشر لمشاركة مساعد الدردشة الخاص بك مع الآخرين.
 
 ### سير عمل الاختبار المحلي
 
@@ -1828,53 +2035,112 @@ graph TD
    python api.py
    ```
 
-2. **تحقق من عمل واجهة برمجة التطبيقات**:
-   - افتح `http://localhost:5000` في متصفحك
-   - يجب أن ترى رسالة الترحيب من خادم FastAPI الخاص بك
+2. **تحقق من عمل API**:
+   - افتح `http://localhost:5000` في متصفحك.
+   - يجب أن ترى رسالة الترحيب من خادم FastAPI الخاص بك.
 
 3. **افتح واجهتك الأمامية**:
-   - انتقل إلى دليل الواجهة الأمامية الخاص بك
-   - افتح `index.html` في متصفح الويب الخاص بك
-   - أو استخدم إضافة Live Server في VS Code لتجربة تطوير أفضل
+   - انتقل إلى دليل الواجهة الأمامية.
+   - افتح `index.html` في متصفح الويب الخاص بك.
+   - أو استخدم إضافة Live Server في VS Code لتجربة تطوير أفضل.
 
 4. **اختبر وظيفة الدردشة**:
-   - اكتب رسالة في حقل الإدخال
-   - انقر على "إرسال" أو اضغط على Enter
-   - تحقق من أن الذكاء الاصطناعي يرد بشكل مناسب
-   - تحقق من وحدة التحكم في المتصفح لأي أخطاء JavaScript
+   - اكتب رسالة في حقل الإدخال.
+   - انقر على "إرسال" أو اضغط على Enter.
+   - تحقق من أن الذكاء الاصطناعي يستجيب بشكل مناسب.
+   - تحقق من وحدة التحكم في المتصفح لأي أخطاء JavaScript.
 
 ### استكشاف المشكلات الشائعة وإصلاحها
 
 | المشكلة | الأعراض | الحل |
 |---------|----------|----------|
-| **خطأ CORS** | الواجهة الأمامية لا يمكنها الوصول إلى الخادم الخلفي | تأكد من تكوين FastAPI CORSMiddleware بشكل صحيح |
-| **خطأ مفتاح API** | ردود غير مصرح بها 401 | تحقق من متغير البيئة `GITHUB_TOKEN` الخاص بك |
-| **رفض الاتصال** | أخطاء الشبكة في الواجهة الأمامية | تحقق من عنوان URL الخاص بالخادم الخلفي وأن خادم Flask يعمل |
-| **لا يوجد رد من الذكاء الاصطناعي** | ردود فارغة أو بها أخطاء | تحقق من سجلات الخادم الخلفي لمشاكل الحصة أو المصادقة |
+| **خطأ CORS** | الواجهة الأمامية لا يمكنها الوصول إلى الخلفية | تأكد من إعداد FastAPI CORSMiddleware بشكل صحيح |
+| **خطأ مفتاح API** | استجابات 401 Unauthorized | تحقق من متغير البيئة `GITHUB_TOKEN` |
+| **رفض الاتصال** | أخطاء الشبكة في الواجهة الأمامية | تحقق من عنوان URL الخلفي وأن خادم Flask يعمل |
+| **لا يوجد رد من الذكاء الاصطناعي** | استجابات فارغة أو بها أخطاء | تحقق من سجلات الخلفية لمشاكل الحصة أو المصادقة |
 
 **خطوات تصحيح الأخطاء الشائعة:**
-- **تحقق** من وحدة التحكم في أدوات المطور في المتصفح لأخطاء JavaScript
-- **تأكد** من أن علامة الشبكة تظهر طلبات واستجابات API ناجحة
-- **راجع** مخرجات الطرفية للخادم الخلفي لأخطاء Python أو مشاكل API
-- **تأكد** من تحميل متغيرات البيئة بشكل صحيح وقابلة للوصول
+- **تحقق** من وحدة التحكم في أدوات المطور في المتصفح لأخطاء JavaScript.
+- **تأكد** من أن علامة التبويب Network تعرض طلبات واستجابات API ناجحة.
+- **راجع** إخراج الطرفية الخلفية لأخطاء Python أو مشاكل API.
+- **تأكد** من تحميل متغيرات البيئة بشكل صحيح ويمكن الوصول إليها.
+
+## 📈 جدول زمني لإتقان تطوير تطبيقات الذكاء الاصطناعي
+
+```mermaid
+timeline
+    title Complete AI Application Development Journey
+    
+    section AI Foundations
+        Understanding Generative AI
+            : Grasp pattern recognition concepts
+            : Master AI parameter control
+            : Learn prompt engineering techniques
+        
+        GitHub Models Integration
+            : Navigate AI service platforms
+            : Handle authentication securely
+            : Optimize model parameters
+    
+    section Backend Development
+        Python API Architecture
+            : Build FastAPI applications
+            : Implement async operations
+            : Create secure endpoints
+        
+        AI Service Integration
+            : Connect to external AI APIs
+            : Handle rate limiting
+            : Implement error boundaries
+    
+    section Frontend Mastery
+        Modern JavaScript Patterns
+            : Master ES6 class architecture
+            : Implement async/await flows
+            : Build responsive interfaces
+        
+        Real-time User Experience
+            : Create dynamic chat interfaces
+            : Handle loading states
+            : Optimize user interactions
+    
+    section Production Readiness
+        Security & Performance
+            : Implement secure token management
+            : Prevent XSS vulnerabilities
+            : Optimize API performance
+        
+        Professional Deployment
+            : Build scalable architectures
+            : Create maintainable code
+            : Document development processes
+```
+
+**🎓 إنجاز التخرج**: لقد قمت ببناء تطبيق كامل مدعوم بالذكاء الاصطناعي باستخدام نفس التقنيات والأنماط المعمارية التي تدعم مساعدي الذكاء الاصطناعي الحديثين. هذه المهارات تمثل تقاطع تطوير الويب التقليدي مع دمج الذكاء الاصطناعي المتقدم.
+
+**🔄 قدرات المستوى التالي**:
+- جاهز لاستكشاف أطر الذكاء الاصطناعي المتقدمة (LangChain، LangGraph).
+- مستعد لبناء تطبيقات ذكاء اصطناعي متعددة الوسائط (نص، صورة، صوت).
+- مجهز لتنفيذ قواعد بيانات المتجهات وأنظمة الاسترجاع.
+- تم إعداد الأساس لتعلم الآلة وضبط نماذج الذكاء الاصطناعي.
 
-## تحدي وكيل GitHub Copilot 🚀
+## تحدي GitHub Copilot Agent 🚀
 
-استخدم وضع الوكيل لإكمال التحدي التالي:
+استخدم وضع Agent لإكمال التحدي التالي:
 
 **الوصف:** قم بتحسين مساعد الدردشة عن طريق إضافة سجل المحادثات واستمرارية الرسائل. سيساعدك هذا التحدي على فهم كيفية إدارة الحالة في تطبيقات الدردشة وتنفيذ تخزين البيانات لتحسين تجربة المستخدم.
 
-**المهمة:** قم بتعديل تطبيق الدردشة ليشمل سجل المحادثات الذي يستمر بين الجلسات. أضف وظيفة لحفظ رسائل الدردشة في التخزين المحلي، عرض سجل المحادثات عند تحميل الصفحة، وتضمين زر "مسح السجل". قم أيضًا بتنفيذ مؤشرات الكتابة وأوقات إرسال الرسائل لجعل تجربة الدردشة أكثر واقعية.
+**المهمة:** قم بتعديل تطبيق الدردشة ليشمل سجل المحادثات الذي يستمر بين الجلسات. أضف وظيفة لحفظ رسائل الدردشة في التخزين المحلي، عرض سجل المحادثات عند تحميل الصفحة، وتضمين زر "مسح السجل". قم أيضًا بتنفيذ مؤشرات الكتابة وطوابع زمنية للرسائل لجعل تجربة الدردشة أكثر واقعية.
 
-تعرف على المزيد حول [وضع الوكيل](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
+تعرف على المزيد حول [وضع Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) هنا.
 
 ## المهمة: بناء مساعد الذكاء الاصطناعي الشخصي الخاص بك
 
-الآن ستقوم بإنشاء تطبيق مساعد الذكاء الاصطناعي الخاص بك. بدلاً من مجرد تكرار كود الدرس، هذه فرصة لتطبيق المفاهيم أثناء بناء شيء يعكس اهتماماتك وحالات الاستخدام الخاصة بك.
+الآن ستقوم بإنشاء تطبيق مساعد الذكاء الاصطناعي الخاص بك. بدلاً من مجرد تكرار كود الدليل، هذه فرصة لتطبيق المفاهيم أثناء بناء شيء يعكس اهتماماتك وحالات الاستخدام الخاصة بك.
 
 ### متطلبات المشروع
 
-دعونا نُعد مشروعك بهيكل نظيف ومنظم:
+لنقم بإعداد مشروعك بهيكل نظيف ومنظم:
 
 ```text
 my-ai-assistant/
@@ -1892,67 +2158,67 @@ my-ai-assistant/
 
 ### مهام التنفيذ الأساسية
 
-**تطوير الخادم الخلفي:**
-- **استخدم** كود FastAPI الخاص بنا واجعله خاصًا بك
-- **أنشئ** شخصية فريدة للذكاء الاصطناعي – ربما مساعد طهي مفيد، شريك كتابة إبداعي، أو زميل دراسة؟
-- **أضف** معالجة أخطاء قوية حتى لا يتعطل تطبيقك عند حدوث مشاكل
-- **اكتب** وثائق واضحة لأي شخص يريد فهم كيفية عمل واجهة برمجة التطبيقات الخاصة بك
+**تطوير الخلفية:**
+- **خذ** كود FastAPI الخاص بنا واجعله خاصًا بك.
+- **أنشئ** شخصية ذكاء اصطناعي فريدة – ربما مساعد طهي مفيد، شريك كتابة إبداعي، أو زميل دراسة؟
+- **أضف** معالجة أخطاء قوية حتى لا يتعطل تطبيقك عندما تسوء الأمور.
+- **اكتب** وثائق واضحة لأي شخص يريد فهم كيفية عمل API الخاص بك.
 
 **تطوير الواجهة الأمامية:**
-- **قم ببناء** واجهة دردشة تبدو بديهية ومرحبة
-- **اكتب** JavaScript حديث ونظيف يمكنك أن تفخر بعرضه على المطورين الآخرين
-- **صمم** تنسيقًا مخصصًا يعكس شخصية الذكاء الاصطناعي الخاص بك – مرح وملون؟ نظيف وبسيط؟ الأمر متروك لك تمامًا!
-- **تأكد** من أنه يعمل بشكل رائع على كل من الهواتف وأجهزة الكمبيوتر
+- **قم ببناء** واجهة دردشة تبدو بديهية ومرحبة.
+- **اكتب** JavaScript حديث ونظيف ستفخر بعرضه للمطورين الآخرين.
+- **صمم** أنماطًا مخصصة تعكس شخصية الذكاء الاصطناعي الخاص بك – ممتعة وملونة؟ نظيفة وبسيطة؟ الأمر متروك لك تمامًا!
+- **تأكد** من أنها تعمل بشكل رائع على كل من الهواتف وأجهزة الكمبيوتر.
 
 **متطلبات التخصيص:**
-- **اختر** اسمًا وشخصية فريدة لمساعد الذكاء الاصطناعي الخاص بك – ربما شيء يعكس اهتماماتك أو المشاكل التي تريد حلها
-- **خصص** التصميم المرئي ليتناسب مع طابع مساعدك
-- **اكتب** رسالة ترحيب جذابة تجعل الناس يرغبون في بدء الدردشة
-- **اختبر** مساعدك مع أنواع مختلفة من الأسئلة لترى كيف يرد
+- **اختر** اسمًا وشخصية فريدة لمساعد الذكاء الاصطناعي الخاص بك – ربما شيء يعكس اهتماماتك أو المشاكل التي تريد حلها.
+- **خصص** التصميم المرئي ليتناسب مع أجواء مساعدك.
+- **اكتب** رسالة ترحيب جذابة تجعل الناس يرغبون في بدء الدردشة.
+- **اختبر** مساعدك مع أنواع مختلفة من الأسئلة لترى كيف يستجيب.
 
 ### أفكار تحسين (اختياري)
 
 هل تريد رفع مستوى مشروعك؟ إليك بعض الأفكار الممتعة لاستكشافها:
 
-| الميزة | الوصف | المهارات التي ستتدرب عليها |
+| الميزة | الوصف | المهارات التي ستتمرن عليها |
 |---------|-------------|------------------------|
 | **سجل الرسائل** | تذكر المحادثات حتى بعد تحديث الصفحة | العمل مع التخزين المحلي، التعامل مع JSON |
-| **مؤشرات الكتابة** | عرض "الذكاء الاصطناعي يكتب..." أثناء انتظار الردود | حركات CSS، البرمجة غير المتزامنة |
+| **مؤشرات الكتابة** | عرض "الذكاء الاصطناعي يكتب..." أثناء انتظار الردود | الرسوم المتحركة في CSS، البرمجة غير المتزامنة |
 | **طوابع زمنية للرسائل** | عرض وقت إرسال كل رسالة | تنسيق التاريخ/الوقت، تصميم تجربة المستخدم |
 | **تصدير الدردشة** | السماح للمستخدمين بتنزيل محادثاتهم | التعامل مع الملفات، تصدير البيانات |
 | **تبديل السمات** | تبديل الوضع الفاتح/الداكن | متغيرات CSS، تفضيلات المستخدم |
-| **إدخال صوتي** | إضافة وظيفة تحويل الكلام إلى نص | واجهات برمجة التطبيقات، سهولة الوصول |
+| **إدخال صوتي** | إضافة وظيفة تحويل الكلام إلى نص | واجهات برمجة التطبيقات للويب، إمكانية الوصول |
 
 ### الاختبار والتوثيق
 
 **ضمان الجودة:**
-- **اختبر** تطبيقك مع أنواع مختلفة من المدخلات والحالات الحافة
-- **تحقق** من أن التصميم المستجيب يعمل على أحجام شاشات مختلفة
-- **افحص** سهولة الوصول باستخدام التنقل عبر لوحة المفاتيح وقارئات الشاشة
-- **تحقق** من صحة HTML وCSS للامتثال للمعايير
+- **اختبر** تطبيقك مع أنواع مختلفة من الإدخال والحالات الحدية.
+- **تحقق** من أن التصميم المستجيب يعمل على أحجام شاشات مختلفة.
+- **افحص** إمكانية الوصول باستخدام التنقل عبر لوحة المفاتيح وقارئات الشاشة.
+- **تحقق** من صحة HTML وCSS للامتثال للمعايير.
 
 **متطلبات التوثيق:**
-- **اكتب** ملف README.md يشرح مشروعك وكيفية تشغيله
-- **قم بتضمين** لقطات شاشة لواجهة الدردشة الخاصة بك أثناء العمل
-- **وثق** أي ميزات فريدة أو تخصيصات أضفتها
-- **قدم** تعليمات إعداد واضحة للمطورين الآخرين
+- **اكتب** README.md يشرح مشروعك وكيفية تشغيله.
+- **قم بتضمين** لقطات شاشة لواجهة الدردشة الخاصة بك أثناء العمل.
+- **وثق** أي ميزات أو تخصيصات فريدة أضفتها.
+- **قدم** تعليمات إعداد واضحة للمطورين الآخرين.
 
 ### إرشادات التقديم
 
 **مخرجات المشروع:**
-1. مجلد المشروع الكامل مع جميع الكود المصدري
-2. README.md مع وصف المشروع وتعليمات الإعداد
-3. لقطات شاشة توضح مساعد الدردشة الخاص بك أثناء العمل
-4. انعكاس موجز لما تعلمته وما التحديات التي واجهتها
+1. مجلد المشروع الكامل مع جميع الكود المصدري.
+2. README.md مع وصف المشروع وتعليمات الإعداد.
+3. لقطات شاشة توضح مساعد الدردشة الخاص بك أثناء العمل.
+4. انعكاس موجز لما تعلمته وما التحديات التي واجهتها.
 
 **معايير التقييم:**
 - **الوظائف**: هل يعمل مساعد الدردشة كما هو متوقع؟
-- **جودة الكود**: هل الكود منظم جيدًا، معلق عليه، وقابل للصيانة؟
+- **جودة الكود**: هل الكود منظم، ومعلق عليه، وقابل للصيانة؟
 - **التصميم**: هل الواجهة جذابة بصريًا وسهلة الاستخدام؟
-- **الإبداع**: ما مدى تفرد وتخصيص تنفيذك؟
+- **الإبداع**: ما مدى تفرد وتخصيص التنفيذ الخاص بك؟
 - **التوثيق**: هل تعليمات الإعداد واضحة وكاملة؟
 
-> 💡 **نصيحة للنجاح**: ابدأ بالمتطلبات الأساسية أولاً، ثم أضف التحسينات بمجرد أن يعمل كل شيء. ركز على إنشاء تجربة أساسية مصقولة قبل إضافة ميزات متقدمة.
+> 💡 **نصيحة النجاح**: ابدأ بالمتطلبات الأساسية أولاً، ثم أضف التحسينات بمجرد أن يعمل كل شيء. ركز على إنشاء تجربة أساسية مصقولة قبل إضافة ميزات متقدمة.
 
 ## الحل
 
@@ -1960,13 +2226,13 @@ my-ai-assistant/
 
 ## تحديات إضافية
 
-هل أنت مستعد لرفع مستوى مساعد الذكاء الاصطناعي الخاص بك؟ جرب هذه التحديات المتقدمة التي ستعمق فهمك لتكامل الذكاء الاصطناعي وتطوير الويب.
+هل أنت مستعد لأخذ مساعد الذكاء الاصطناعي الخاص بك إلى المستوى التالي؟ جرب هذه التحديات المتقدمة التي ستعمق فهمك لدمج الذكاء الاصطناعي وتطوير الويب.
 
 ### تخصيص الشخصية
 
-السحر الحقيقي يحدث عندما تمنح مساعد الذكاء الاصطناعي شخصية فريدة. جرب إعدادات النظام المختلفة لإنشاء مساعدين متخصصين:
+السحر الحقيقي يحدث عندما تمنح مساعد الذكاء الاصطناعي الخاص بك شخصية فريدة. جرب مطالبات النظام المختلفة لإنشاء مساعدين متخصصين:
 
-**مثال مساعد محترف:**
+**مثال مساعد احترافي:**
 ```python
 call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
 ```
@@ -1976,68 +2242,68 @@ call_llm(message, "You are a professional business consultant with 20 years of e
 call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
 ```
 
-**مثال مرشد تقني:**
+**مثال المرشد الفني:**
 ```python
 call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
 ```
 
 ### تحسينات الواجهة الأمامية
 
-حول واجهة الدردشة الخاصة بك باستخدام هذه التحسينات البصرية والوظيفية:
+قم بتحويل واجهة الدردشة الخاصة بك باستخدام هذه التحسينات البصرية والوظيفية:
 
 **ميزات CSS المتقدمة:**
-- **قم بتطبيق** حركات الرسائل السلسة والانتقالات
-- **أضف** تصميم فقاعات الدردشة المخصصة باستخدام أشكال CSS والتدرجات
-- **أنشئ** حركة مؤشر الكتابة عندما يكون الذكاء الاصطناعي "يفكر"
-- **صمم** ردود فعل الرموز التعبيرية أو نظام تقييم الرسائل
+- **قم بتطبيق** حركات سلسة للرسائل والانتقالات.
+- **أضف** تصميم فقاعات دردشة مخصص باستخدام أشكال وتدرجات CSS.
+- **أنشئ** حركة مؤشر الكتابة عندما يكون الذكاء الاصطناعي "يفكر".
+- **صمم** ردود فعل الرموز التعبيرية أو نظام تقييم الرسائل.
 
 **تحسينات JavaScript:**
-- **أضف** اختصارات لوحة المفاتيح (Ctrl+Enter للإرسال، Escape لمسح الإدخال)
-- **قم بتنفيذ** وظيفة البحث والتصفية للرسائل
-- **أنشئ** ميزة تصدير المحادثة (تنزيل كملف نصي أو JSON)
-- **أضف** الحفظ التلقائي إلى التخزين المحلي لمنع فقدان الرسائل
+- **أضف** اختصارات لوحة المفاتيح (Ctrl+Enter للإرسال، Escape لمسح الإدخال).
+- **قم بتنفيذ** وظيفة البحث والتصفية للرسائل.
+- **أنشئ** ميزة تصدير المحادثة (تنزيل كنص أو JSON).
+- **أضف** الحفظ التلقائي إلى التخزين المحلي لمنع فقدان الرسائل.
 
-### تكامل الذكاء الاصطناعي المتقدم
+### دمج الذكاء الاصطناعي المتقدم
 
 **شخصيات ذكاء اصطناعي متعددة:**
-- **أنشئ** قائمة منسدلة للتبديل بين شخصيات الذكاء الاصطناعي المختلفة
-- **احفظ** الشخصية المفضلة للمستخدم في التخزين المحلي
-- **قم بتنفيذ** تبديل السياق الذي يحافظ على تدفق المحادثة
+- **أنشئ** قائمة منسدلة للتبديل بين شخصيات الذكاء الاصطناعي المختلفة.
+- **احفظ** شخصية المستخدم المفضلة في التخزين المحلي.
+- **قم بتنفيذ** تبديل السياق الذي يحافظ على تدفق المحادثة.
 
 **ميزات الرد الذكي:**
-- **أضف** وعيًا بسياق المحادثة (يتذكر الذكاء الاصطناعي الرسائل السابقة)
-- **قم بتنفيذ** اقتراحات ذكية بناءً على موضوع المحادثة
-- **أنشئ** أزرار الرد السريع للأسئلة الشائعة
+- **أضف** الوعي بسياق المحادثة (يتذكر الذكاء الاصطناعي الرسائل السابقة).
+- **تنفيذ** اقتراحات ذكية بناءً على موضوع المحادثة  
+- **إنشاء** أزرار رد سريع للأسئلة الشائعة  
 
-> 🎯 **هدف التعلم**: تساعدك هذه التحديات الإضافية على فهم أنماط تطوير الويب المتقدمة وتقنيات تكامل الذكاء الاصطناعي المستخدمة في التطبيقات الإنتاجية.
+> 🎯 **هدف التعلم**: هذه التحديات الإضافية تساعدك على فهم أنماط تطوير الويب المتقدمة وتقنيات دمج الذكاء الاصطناعي المستخدمة في التطبيقات الإنتاجية.
 
-## الملخص والخطوات التالية
+## الملخص والخطوات التالية  
 
-تهانينا! لقد قمت ببناء مساعد دردشة كامل مدعوم بالذكاء الاصطناعي من البداية. هذا المشروع منحك تجربة عملية مع تقنيات تطوير الويب الحديثة وتكامل الذكاء الاصطناعي – مهارات ذات قيمة متزايدة في مشهد التكنولوجيا اليوم.
+تهانينا! لقد نجحت في بناء مساعد دردشة مدعوم بالذكاء الاصطناعي من البداية. هذا المشروع منحك تجربة عملية مع تقنيات تطوير الويب الحديثة ودمج الذكاء الاصطناعي – مهارات أصبحت ذات قيمة متزايدة في عالم التكنولوجيا اليوم.
 
-### ما الذي أنجزته
+### ما الذي أنجزته  
 
-خلال هذا الدرس، أتقنت العديد من التقنيات والمفاهيم الرئيسية:
+خلال هذه الدرس، أتقنت العديد من التقنيات والمفاهيم الرئيسية:  
 
-**تطوير الخادم الخلفي:**
-- **تكامل** مع واجهة برمجة تطبيقات نماذج GitHub للحصول على وظائف الذكاء الاصطناعي
-- **بناء** واجهة برمجة تطبيقات RESTful باستخدام Flask مع معالجة الأخطاء بشكل صحيح
-- **تنفيذ** مصادقة آمنة باستخدام متغيرات البيئة
-- **تكوين** CORS لطلبات عبر الأصل بين الواجهة الأمامية والخلفية
+**تطوير الخلفية:**  
+- **دمجت** مع GitHub Models API لتفعيل وظائف الذكاء الاصطناعي  
+- **بنيت** API RESTful باستخدام Flask مع معالجة الأخطاء بشكل صحيح  
+- **نفذت** مصادقة آمنة باستخدام متغيرات البيئة  
+- **قمت بتكوين** CORS لطلبات الأصل المتعددة بين الواجهة الأمامية والخلفية  
 
-**تطوير الواجهة الأمامية:**
-- **إنشاء** واجهة دردشة مستجيبة باستخدام HTML دلالي
-- **تنفيذ** JavaScript حديث باستخدام async/await وبنية قائمة على الفئات
-- **تصميم** واجهة مستخدم جذابة باستخدام CSS Grid، Flexbox، والحركات
-- **إضافة** ميزات سهولة الوصول ومبادئ التصميم المستجيب
+**تطوير الواجهة الأمامية:**  
+- **أنشأت** واجهة دردشة متجاوبة باستخدام HTML دلالي  
+- **نفذت** JavaScript حديث باستخدام async/await وبنية تعتمد على الفئات  
+- **صممت** واجهة مستخدم جذابة باستخدام CSS Grid، Flexbox، والرسوم المتحركة  
+- **أضفت** ميزات الوصول ومبادئ التصميم المتجاوب  
 
-**التكامل الكامل:**
-- **ربط** الواجهة الأمامية والخلفية من خلال طلبات واجهة برمجة التطبيقات HTTP
-- **معالجة** تفاعلات المستخدم في الوقت الفعلي وتدفق البيانات غير المتزامن
-- **تنفيذ** معالجة الأخطاء وردود الفعل للمستخدم في جميع أنحاء التطبيق
-- **اختبار** سير عمل التطبيق الكامل من إدخال المستخدم إلى رد الذكاء الاصطناعي
+**دمج كامل بين الواجهة الأمامية والخلفية:**  
+- **وصلت** بين الواجهة الأمامية والخلفية عبر مكالمات API HTTP  
+- **تعاملت** مع تفاعلات المستخدم في الوقت الحقيقي وتدفق البيانات غير المتزامن  
+- **نفذت** معالجة الأخطاء وتقديم ملاحظات للمستخدم عبر التطبيق  
+- **اختبرت** سير العمل الكامل للتطبيق من إدخال المستخدم إلى استجابة الذكاء الاصطناعي  
 
-### نتائج التعلم الرئيسية
+### النتائج التعليمية الرئيسية  
 
 ```mermaid
 mindmap
@@ -2059,68 +2325,68 @@ mindmap
       Model Parameters
       Conversation Flow
 ```
+  
+هذا المشروع قدم لك أساسيات بناء تطبيقات مدعومة بالذكاء الاصطناعي، وهو يمثل مستقبل تطوير الويب. الآن تفهم كيفية دمج قدرات الذكاء الاصطناعي في تطبيقات الويب التقليدية، مما يخلق تجارب مستخدم جذابة تبدو ذكية ومتجاوبة.
 
-هذا المشروع قدم لك أساسيات بناء تطبيقات مدعومة بالذكاء الاصطناعي، وهو يمثل مستقبل تطوير الويب. الآن تفهم كيفية دمج قدرات الذكاء الاصطناعي في التطبيقات التقليدية، مما يخلق تجارب مستخدم جذابة تبدو ذكية ومستجيبة.
-
-### التطبيقات المهنية
+### التطبيقات المهنية  
 
-المهارات التي طورتها في هذا الدرس قابلة للتطبيق مباشرةً في وظائف تطوير البرمجيات الحديثة:
+المهارات التي طورتها في هذا الدرس قابلة للتطبيق مباشرة في وظائف تطوير البرمجيات الحديثة:  
 
-- **تطوير الويب الكامل** باستخدام أطر عمل حديثة وواجهات برمجة التطبيقات
-- **تكامل الذكاء الاصطناعي** في تطبيقات الويب وتطبيقات الهواتف المحمولة
-- **تصميم وتطوير واجهات برمجة التطبيقات** لهياكل الخدمات المصغرة
-- **تطوير واجهات المستخدم** مع التركيز على سهولة الوصول والتصميم المستجيب
-- **ممارسات DevOps** بما في ذلك تكوين البيئة والنشر
+- **تطوير الويب الكامل** باستخدام أطر عمل حديثة وواجهات برمجية  
+- **دمج الذكاء الاصطناعي** في تطبيقات الويب وتطبيقات الهواتف المحمولة  
+- **تصميم وتطوير واجهات برمجية** لهندسة الخدمات المصغرة  
+- **تطوير واجهات المستخدم** مع التركيز على الوصول والتصميم المتجاوب  
+- **ممارسات DevOps** بما في ذلك تكوين البيئة والنشر  
 
-### متابعة رحلتك في تطوير الذكاء الاصطناعي
+### مواصلة رحلتك في تطوير الذكاء الاصطناعي  
 
-**خطوات التعلم التالية:**
-- **استكشاف** نماذج الذكاء الاصطناعي وواجهات برمجة التطبيقات المتقدمة (GPT-4، Claude، Gemini)
-- **تعلم** تقنيات هندسة التعليمات للحصول على ردود أفضل من الذكاء الاصطناعي
-- **دراسة** تصميم المحادثات ومبادئ تجربة المستخدم للروبوتات
-- **التحقيق** في أمان الذكاء الاصطناعي، الأخلاقيات، وممارسات تطوير الذكاء الاصطناعي المسؤول
-- **بناء** تطبيقات أكثر تعقيدًا مع ذاكرة المحادثة والوعي بالسياق
+**الخطوات التعليمية التالية:**  
+- **استكشاف** نماذج الذكاء الاصطناعي وواجهات برمجية أكثر تقدمًا (GPT-4، Claude، Gemini)  
+- **تعلم** تقنيات هندسة التوجيه لتحسين استجابات الذكاء الاصطناعي  
+- **دراسة** تصميم المحادثات ومبادئ تجربة المستخدم للروبوتات  
+- **التحقيق** في أمان الذكاء الاصطناعي، الأخلاقيات، وممارسات تطوير الذكاء الاصطناعي المسؤول  
+- **بناء** تطبيقات أكثر تعقيدًا مع ذاكرة المحادثة والوعي بالسياق  
 
-**أفكار مشاريع متقدمة:**
-- غرف دردشة متعددة المستخدمين مع إدارة الذكاء الاصطناعي
-- روبوتات خدمة العملاء المدعومة بالذكاء الاصطناعي
-- مساعدي التدريس التعليمي مع تعلم شخصي
-- شركاء الكتابة الإبداعية مع شخصيات ذكاء اصطناعي مختلفة
-- مساعدي توثيق تقني للمطورين
+**أفكار مشاريع متقدمة:**  
+- غرف دردشة متعددة المستخدمين مع إدارة الذكاء الاصطناعي  
+- روبوتات دردشة لخدمة العملاء مدعومة بالذكاء الاصطناعي  
+- مساعدي تعليم خصوصي مع تعلم مخصص  
+- متعاونون في الكتابة الإبداعية بشخصيات ذكاء اصطناعي مختلفة  
+- مساعدي توثيق تقني للمطورين  
 
-## البدء مع GitHub Codespaces
+## البدء مع GitHub Codespaces  
 
-هل تريد تجربة هذا المشروع في بيئة تطوير سحابية؟ يوفر GitHub Codespaces إعداد تطوير كامل في متصفحك، وهو مثالي لتجربة تطبيقات الذكاء الاصطناعي دون الحاجة إلى إعداد محلي.
+هل تريد تجربة هذا المشروع في بيئة تطوير سحابية؟ GitHub Codespaces يوفر إعداد تطوير كامل في متصفحك، مثالي لتجربة تطبيقات الذكاء الاصطناعي دون الحاجة إلى إعداد محلي.
 
-### إعداد بيئة التطوير الخاصة بك
+### إعداد بيئة التطوير الخاصة بك  
 
-**الخطوة 1: الإنشاء من القالب**
-- **انتقل** إلى [مستودع Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
-- **انقر** على "Use this template" في الزاوية العلوية اليمنى (تأكد من تسجيل الدخول إلى GitHub)
+**الخطوة 1: الإنشاء من القالب**  
+- **انتقل** إلى [مستودع Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)  
+- **اضغط** على "Use this template" في الزاوية العلوية اليمنى (تأكد من تسجيل الدخول إلى GitHub)  
 
-![واجهة الإنشاء من القالب تظهر زر "Use this template" الأخضر](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ar.png)
+![واجهة الإنشاء من القالب تظهر زر "Use this template" الأخضر](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ar.png)  
 
-**الخطوة 2: تشغيل Codespaces**
-- **افتح** المستودع الذي أنشأته حديثًا
-- **انقر** على الزر الأخضر "Code" واختر "Codespaces"
-- **اختر** "Create codespace on main" لبدء بيئة التطوير الخاصة بك
+**الخطوة 2: تشغيل Codespaces**  
+- **افتح** المستودع الذي أنشأته حديثًا  
+- **اضغط** على الزر الأخضر "Code" واختر "Codespaces"  
+- **اختر** "Create codespace on main" لبدء بيئة التطوير  
 
-![واجهة إنشاء Codespace مع خيارات لتشغيل بيئة التطوير السحابية](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ar.png)
+![واجهة إنشاء Codespace مع خيارات تشغيل بيئة التطوير السحابية](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ar.png)  
 
-**الخطوة 3: تكوين البيئة**
-بمجرد تحميل Codespace الخاص بك، سيكون لديك إمكانية الوصول إلى:
-- **Python، Node.js مثبت مسبقًا** وجميع أدوات التطوير اللازمة
-- **واجهة VS Code** مع إضافات لتطوير الويب
-- **وصول إلى الطرفية** لتشغيل خوادم الخلفية والواجهة الأمامية
-- **إعادة توجيه المنافذ** لاختبار تطبيقاتك
+**الخطوة 3: تكوين البيئة**  
+بمجرد تحميل Codespace، سيكون لديك وصول إلى:  
+- **Python، Node.js مثبتة مسبقًا** وجميع أدوات التطوير اللازمة  
+- **واجهة VS Code** مع إضافات لتطوير الويب  
+- **وصول إلى الطرفية** لتشغيل خوادم الخلفية والواجهة الأمامية  
+- **توجيه المنافذ** لاختبار تطبيقاتك  
 
-**ما توفره Codespaces:**
-- **يقضي** على مشاكل إعداد البيئة المحلية وتكوينها
-- **يوفر** بيئة تطوير متسقة عبر الأجهزة المختلفة
-- **يتضمن** أدوات وإضافات مُعدة مسبقًا لتطوير الويب
-- **يقدم** تكامل سلس مع GitHub للتحكم في الإصدارات والتعاون
+**ما يوفره Codespaces:**  
+- **يقضي** على مشاكل إعداد البيئة المحلية والتكوين  
+- **يوفر** بيئة تطوير متسقة عبر الأجهزة المختلفة  
+- **يتضمن** أدوات وإضافات مهيأة مسبقًا لتطوير الويب  
+- **يقدم** تكامل سلس مع GitHub للتحكم في الإصدارات والتعاون  
 
-> 🚀 **نصيحة احترافية**: Codespaces مثالي لتعلم وتطوير تطبيقات الذكاء الاصطناعي لأنه يتولى إعداد البيئة المعقدة تلقائيًا، مما يتيح لك التركيز على البناء والتعلم بدلاً من مواجهة مشاكل التكوين.
+> 🚀 **نصيحة احترافية**: Codespaces مثالي للتعلم والنمذجة لتطبيقات الذكاء الاصطناعي لأنه يتعامل مع جميع إعدادات البيئة المعقدة تلقائيًا، مما يتيح لك التركيز على البناء والتعلم بدلاً من مشاكل التكوين.
 
 ---
 
diff --git a/translations/ar/README.md b/translations/ar/README.md
index eb0e5971af..1919555cf8 100644
--- a/translations/ar/README.md
+++ b/translations/ar/README.md
@@ -1,127 +1,127 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3fd21589b9bb0a90b9c9dd7d587f7e43",
-  "translation_date": "2025-10-20T20:28:58+00:00",
+  "original_hash": "8b9d0562ea649b6012d1a67acc630681",
+  "translation_date": "2025-11-03T12:23:59+00:00",
   "source_file": "README.md",
   "language_code": "ar"
 }
 -->
-[![ترخيص GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
-[![مساهمو GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
-[![مشاكل GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
-[![طلبات السحب على GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
-[![مرحبًا بطلبات السحب](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+[![ترخيص GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
+[![مساهمو GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
+[![مشاكل GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
+[![طلبات السحب على GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
+[![طلبات السحب مرحب بها](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-[![مشاهدو GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
-[![تفرعات GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
-[![نجوم GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+[![مشاهدو GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
+[![تفرعات GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
+[![نجوم GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
 
-[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
+[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
 
-# تطوير الويب للمبتدئين - منهج دراسي  
+# تطوير الويب للمبتدئين - منهج دراسي
 
-تعلم أساسيات تطوير الويب من خلال دورة شاملة لمدة 12 أسبوعًا مقدمة من Microsoft Cloud Advocates. تتناول كل واحدة من الدروس الـ 24 مواضيع JavaScript وCSS وHTML من خلال مشاريع عملية مثل الحدائق الزجاجية، وإضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات والمناقشات والواجبات العملية. عزز مهاراتك وحقق أقصى استفادة من معرفتك من خلال منهجنا القائم على المشاريع. ابدأ رحلتك في البرمجة اليوم!  
+تعلم أساسيات تطوير الويب من خلال دورة شاملة لمدة 12 أسبوعًا مقدمة من Microsoft Cloud Advocates. تتناول كل من الدروس الـ 24 JavaScript وCSS وHTML من خلال مشاريع عملية مثل الحدائق الزجاجية، إضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات، المناقشات، والواجبات العملية. عزز مهاراتك وحسّن استيعابك للمعرفة من خلال منهجنا الفعّال القائم على المشاريع. ابدأ رحلتك في البرمجة اليوم!
 
-انضم إلى مجتمع Azure AI Foundry على Discord  
+انضم إلى مجتمع Azure AI Foundry على Discord
 
-[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)  
+[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
 
-اتبع هذه الخطوات للبدء باستخدام هذه الموارد:  
-1. **قم بعمل تفرع للمستودع**: انقر على [![تفرعات GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)  
-2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
-3. [**انضم إلى مجتمع Azure AI Foundry على Discord وتواصل مع الخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4)  
+اتبع هذه الخطوات للبدء باستخدام هذه الموارد:
+1. **نسخ المستودع**: انقر [![تفرعات GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
+2. **استنساخ المستودع**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+3. [**انضم إلى مجتمع Azure AI Foundry Discord وتواصل مع الخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4)
 
-### 🌐 دعم متعدد اللغات  
+### 🌐 دعم متعدد اللغات
 
-#### مدعوم عبر GitHub Action (تلقائي ودائم التحديث)  
+#### مدعوم عبر GitHub Action (تلقائي ودائم التحديث)
 
-[العربية](./README.md) | [البنغالية](../bn/README.md) | [البلغارية](../bg/README.md) | [البورمية (ميانمار)](../my/README.md) | [الصينية (المبسطة)](../zh/README.md) | [الصينية (التقليدية، هونغ كونغ)](../hk/README.md) | [الصينية (التقليدية، ماكاو)](../mo/README.md) | [الصينية (التقليدية، تايوان)](../tw/README.md) | [الكرواتية](../hr/README.md) | [التشيكية](../cs/README.md) | [الدانماركية](../da/README.md) | [الهولندية](../nl/README.md) | [الإستونية](../et/README.md) | [الفنلندية](../fi/README.md) | [الفرنسية](../fr/README.md) | [الألمانية](../de/README.md) | [اليونانية](../el/README.md) | [العبرية](../he/README.md) | [الهندية](../hi/README.md) | [الهنغارية](../hu/README.md) | [الإندونيسية](../id/README.md) | [الإيطالية](../it/README.md) | [اليابانية](../ja/README.md) | [الكورية](../ko/README.md) | [الليتوانية](../lt/README.md) | [الماليزية](../ms/README.md) | [الماراثية](../mr/README.md) | [النيبالية](../ne/README.md) | [النرويجية](../no/README.md) | [الفارسية (الفارسية)](../fa/README.md) | [البولندية](../pl/README.md) | [البرتغالية (البرازيل)](../br/README.md) | [البرتغالية (البرتغال)](../pt/README.md) | [البنجابية (غورموخي)](../pa/README.md) | [الرومانية](../ro/README.md) | [الروسية](../ru/README.md) | [الصربية (السيريلية)](../sr/README.md) | [السلوفاكية](../sk/README.md) | [السلوفينية](../sl/README.md) | [الإسبانية](../es/README.md) | [السواحيلية](../sw/README.md) | [السويدية](../sv/README.md) | [التاغالوغية (الفلبينية)](../tl/README.md) | [التاميلية](../ta/README.md) | [التايلاندية](../th/README.md) | [التركية](../tr/README.md) | [الأوكرانية](../uk/README.md) | [الأردية](../ur/README.md) | [الفيتنامية](../vi/README.md)  
+[Arabic](./README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
 
-**إذا كنت ترغب في دعم لغات إضافية، يمكنك الاطلاع على القائمة [هنا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**  
+**إذا كنت ترغب في دعم لغات إضافية، يمكنك الاطلاع على اللغات المدعومة [هنا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
 
-[![فتح في Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
+[![فتح في Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
 
-#### 🧑‍🎓 _هل أنت طالب؟_  
+#### 🧑‍🎓 _هل أنت طالب؟_
 
-قم بزيارة [**صفحة مركز الطلاب**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) حيث ستجد موارد للمبتدئين، حزم للطلاب وحتى طرق للحصول على شهادة مجانية. هذه الصفحة تستحق الحفظ والعودة إليها من وقت لآخر حيث يتم تحديث المحتوى شهريًا.  
+قم بزيارة [**صفحة مركز الطلاب**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) حيث ستجد موارد للمبتدئين، حزم للطلاب وحتى طرق للحصول على قسيمة شهادة مجانية. هذه الصفحة التي يجب عليك وضع إشارة عليها ومراجعتها من وقت لآخر حيث نقوم بتحديث المحتوى شهريًا.
 
-### 📣 إعلان - تحديات جديدة باستخدام وضع وكيل GitHub Copilot!  
+### 📣 إعلان - تحديات جديدة باستخدام وضع وكيل GitHub Copilot!
 
-تمت إضافة تحدٍ جديد، ابحث عن "تحدي وكيل GitHub Copilot 🚀" في معظم الفصول. هذا تحدٍ جديد يمكنك إكماله باستخدام GitHub Copilot ووضع الوكيل. إذا لم تستخدم وضع الوكيل من قبل، فهو قادر على إنشاء النصوص وتحرير الملفات وتشغيل الأوامر والمزيد.  
+تمت إضافة تحدٍ جديد، ابحث عن "تحدي وكيل GitHub Copilot 🚀" في معظم الفصول. هذا تحدٍ جديد لتكمله باستخدام GitHub Copilot ووضع الوكيل. إذا لم تستخدم وضع الوكيل من قبل، فهو قادر على إنشاء النصوص وتحرير الملفات، تشغيل الأوامر والمزيد.
 
-### 📣 إعلان - _مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي_  
+### 📣 إعلان - _مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي_
 
-تمت إضافة مشروع مساعد الذكاء الاصطناعي الجديد، تحقق منه [المشروع](./09-chat-project/README.md)  
+تمت إضافة مشروع مساعد الذكاء الاصطناعي الجديد، تحقق منه [المشروع](./09-chat-project/README.md)
 
-### 📣 إعلان - _منهج جديد_ حول الذكاء الاصطناعي التوليدي لـ JavaScript تم إصداره للتو  
+### 📣 إعلان - _منهج جديد_ حول الذكاء الاصطناعي التوليدي لـ JavaScript تم إصداره للتو
 
-لا تفوت منهجنا الجديد للذكاء الاصطناعي التوليدي!  
+لا تفوت منهجنا الجديد للذكاء الاصطناعي التوليدي!
 
-قم بزيارة [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء!  
+قم بزيارة [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء!
 
-![الخلفية](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ar.png)  
+![الخلفية](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ar.png)
 
-- دروس تغطي كل شيء من الأساسيات إلى RAG.  
-- تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المرافق.  
-- سرد ممتع وجذاب، ستسافر عبر الزمن!  
+- دروس تغطي كل شيء من الأساسيات إلى RAG.
+- تفاعل مع الشخصيات التاريخية باستخدام GenAI وتطبيقنا المرافق.
+- سرد ممتع وجذاب، ستقوم بالسفر عبر الزمن!
 
-![الشخصية](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ar.png)  
+![الشخصية](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ar.png)
 
-تتضمن كل درس واجبًا لإكماله، وفحصًا للمعرفة، وتحديًا لتوجيهك في تعلم مواضيع مثل:  
-- التوجيه وهندسة التوجيه  
-- إنشاء تطبيقات النصوص والصور  
-- تطبيقات البحث  
+كل درس يتضمن واجبًا لإكماله، اختبار معرفة وتحديًا لتوجيهك في تعلم مواضيع مثل:
+- التوجيه وهندسة التوجيه
+- إنشاء تطبيقات النصوص والصور
+- تطبيقات البحث
 
-قم بزيارة [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) للبدء!  
+قم بزيارة [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) للبدء!
 
-## 🌱 البدء  
+## 🌱 البدء
 
-> **المعلمون**، لقد قمنا [بتضمين بعض الاقتراحات](for-teachers.md) حول كيفية استخدام هذا المنهج. نود سماع ملاحظاتكم [في منتدى المناقشة الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+> **المعلمون**، لقد قمنا [بتضمين بعض الاقتراحات](for-teachers.md) حول كيفية استخدام هذا المنهج. نود سماع ملاحظاتكم [في منتدى المناقشة الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
 
-**[المتعلمون](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، لكل درس، ابدأ باختبار ما قبل المحاضرة وتابع قراءة المادة التعليمية، وأكمل الأنشطة المختلفة وتحقق من فهمك من خلال اختبار ما بعد المحاضرة.  
+**[المتعلمون](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، لكل درس، ابدأ باختبار ما قبل المحاضرة وتابع قراءة المادة التعليمية، وأكمل الأنشطة المختلفة وتحقق من فهمك من خلال اختبار ما بعد المحاضرة.
 
-لتحسين تجربة التعلم الخاصة بك، تواصل مع زملائك للعمل على المشاريع معًا! يتم تشجيع المناقشات في [منتدى المناقشة الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) حيث سيكون فريقنا من المشرفين متاحًا للإجابة على أسئلتك.  
+لتحسين تجربة التعلم الخاصة بك، تواصل مع زملائك للعمل على المشاريع معًا! المناقشات مشجعة في [منتدى المناقشة الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) حيث سيكون فريقنا من المشرفين متاحًا للإجابة على أسئلتك.
 
-لتعزيز تعليمك، نوصي بشدة باستكشاف [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) للحصول على مواد دراسية إضافية.  
+لتعزيز تعليمك، نوصي بشدة باستكشاف [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) للحصول على مواد دراسية إضافية.
 
-### 📋 إعداد بيئتك  
+### 📋 إعداد بيئتك
 
-هذا المنهج يحتوي على بيئة تطوير جاهزة! عند البدء، يمكنك اختيار تشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة تعتمد على المتصفح، لا حاجة للتثبيت_)، أو محليًا على جهاز الكمبيوتر الخاص بك باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+هذا المنهج يحتوي على بيئة تطوير جاهزة للعمل! عند البدء، يمكنك اختيار تشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة تعتمد على المتصفح، لا حاجة للتثبيت_)، أو محليًا على جهاز الكمبيوتر الخاص بك باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
 
-#### إنشاء مستودعك  
-لتتمكن من حفظ عملك بسهولة، يُوصى بإنشاء نسخة خاصة بك من هذا المستودع. يمكنك القيام بذلك بالنقر على زر **استخدام هذا القالب** في أعلى الصفحة. سيؤدي ذلك إلى إنشاء مستودع جديد في حساب GitHub الخاص بك يحتوي على نسخة من المنهج.  
+#### إنشاء مستودعك
+لتتمكن من حفظ عملك بسهولة، يُوصى بإنشاء نسخة خاصة بك من هذا المستودع. يمكنك القيام بذلك بالنقر على زر **استخدام هذا القالب** في أعلى الصفحة. سيؤدي ذلك إلى إنشاء مستودع جديد في حساب GitHub الخاص بك مع نسخة من المنهج.
 
-اتبع هذه الخطوات:  
-1. **قم بعمل تفرع للمستودع**: انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة.  
-2. **انسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+اتبع هذه الخطوات:
+1. **نسخ المستودع**: انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة.
+2. **استنساخ المستودع**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
 
-#### تشغيل المنهج في Codespace  
+#### تشغيل المنهج في Codespace
 
-في نسختك من هذا المستودع الذي أنشأته، انقر على زر **Code** واختر **Open with Codespaces**. سيؤدي ذلك إلى إنشاء Codespace جديد للعمل فيه.  
+في نسختك من هذا المستودع الذي أنشأته، انقر على زر **Code** واختر **Open with Codespaces**. سيؤدي ذلك إلى إنشاء Codespace جديد للعمل فيه.
 
-![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ar.png)  
+![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ar.png)
 
-#### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك  
+#### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك
 
-لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، متصفح، وأداة سطر أوامر. درسنا الأول، [مقدمة إلى لغات البرمجة وأدوات العمل](../../1-getting-started-lessons/1-intro-to-programming-languages)، سيشرح لك الخيارات المختلفة لكل من هذه الأدوات لتختار ما يناسبك.  
+لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، متصفح وأداة سطر الأوامر. درسنا الأول، [مقدمة إلى لغات البرمجة وأدوات العمل](../../1-getting-started-lessons/1-intro-to-programming-languages)، سيشرح لك الخيارات المختلفة لكل من هذه الأدوات لتختار ما يناسبك.
 
-توصيتنا هي استخدام [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) كمحرر نصوص، والذي يحتوي أيضًا على [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) مدمج. يمكنك تنزيل Visual Studio Code [هنا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+توصيتنا هي استخدام [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) كمحرر، والذي يحتوي أيضًا على [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) مدمج. يمكنك تنزيل Visual Studio Code [هنا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
 
-1. انسخ مستودعك إلى جهاز الكمبيوتر الخاص بك. يمكنك القيام بذلك بالنقر على زر **Code** ونسخ الرابط:  
+1. استنساخ مستودعك إلى جهاز الكمبيوتر الخاص بك. يمكنك القيام بذلك بالنقر على زر **Code** ونسخ الرابط:
 
-    [CodeSpace](./images/createcodespace.png)  
+    [CodeSpace](./images/createcodespace.png)
 
-    ثم افتح [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وقم بتشغيل الأمر التالي، مع استبدال `<your-repository-url>` بالرابط الذي نسخته للتو:  
+    ثم افتح [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وقم بتشغيل الأمر التالي، مع استبدال `<your-repository-url>` بالرابط الذي نسخته للتو:
 
     ```bash 
     git clone <your-repository-url>
     ```
-  
-2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **File** > **Open Folder** واختيار المجلد الذي قمت بنسخه للتو.  
 
-> توصيات إضافات Visual Studio Code:  
->  
+2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **File** > **Open Folder** واختيار المجلد الذي قمت باستنساخه للتو.
+
+>  الإضافات الموصى بها لـ Visual Studio Code:
+>
 > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - لمعاينة صفحات HTML داخل Visual Studio Code  
 > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - لمساعدتك في كتابة الكود بسرعة أكبر  
 
@@ -138,42 +138,42 @@ CO_OP_TRANSLATOR_METADATA:
 - واجب  
 - [اختبار بعد الدرس](https://ff-quizzes.netlify.app/web/)  
 
-> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، بإجمالي 48 اختبارًا يحتوي كل منها على ثلاثة أسئلة. وهي متوفرة [هنا](https://ff-quizzes.netlify.app/web/) ويمكن تشغيل تطبيق الاختبار محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.  
+> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، 48 اختبارًا إجمالاً، كل منها يحتوي على ثلاثة أسئلة. وهي متوفرة [هنا](https://ff-quizzes.netlify.app/web/) ويمكن تشغيل تطبيق الاختبار محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.  
 
 ## 🗃️ الدروس  
 
 |     |                       اسم المشروع                       |                            المفاهيم التي يتم تدريسها                             | أهداف التعلم                                                                                                                 |                                                         رابط الدرس                                                          |         المؤلف          |  
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
-| 01  |                     البداية                      |           مقدمة في البرمجة وأدوات العمل           | تعلم الأساسيات وراء معظم لغات البرمجة والتعرف على البرامج التي تساعد المطورين المحترفين في أداء وظائفهم | [مقدمة في لغات البرمجة وأدوات العمل](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
-| 02  |                     البداية                      |             أساسيات GitHub، بما في ذلك العمل مع فريق             | كيفية استخدام GitHub في مشروعك وكيفية التعاون مع الآخرين في قاعدة الكود                                                    |                            [مقدمة في GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
-| 03  |                     البداية                      |                             إمكانية الوصول                              | تعلم أساسيات إمكانية الوصول إلى الويب                                                                                               |                       [أساسيات إمكانية الوصول](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
+| 01  |                     البداية                      |           مقدمة في البرمجة وأدوات العمل           | تعلم الأساسيات وراء معظم لغات البرمجة والبرامج التي تساعد المطورين المحترفين في عملهم | [مقدمة في لغات البرمجة وأدوات العمل](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
+| 02  |                     البداية                      |             أساسيات GitHub، بما في ذلك العمل مع فريق             | كيفية استخدام GitHub في مشروعك، وكيفية التعاون مع الآخرين في قاعدة الكود                                                    |                            [مقدمة في GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
+| 03  |                     البداية                      |                             إمكانية الوصول                              | تعلم أساسيات إمكانية الوصول على الويب                                                                                               |                       [أساسيات إمكانية الوصول](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
 | 04  |                        أساسيات JS                         |                         أنواع البيانات في JavaScript                          | أساسيات أنواع البيانات في JavaScript                                                                                                 |                                       [أنواع البيانات](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
-| 05  |                        أساسيات JS                         |                         الدوال والطرق                          | تعلم الدوال والطرق لإدارة تدفق منطق التطبيق                                                             |                              [الدوال والطرق](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |  
-| 06  |                        أساسيات JS                         |                        اتخاذ القرارات باستخدام JS                        | تعلم كيفية إنشاء شروط في الكود باستخدام طرق اتخاذ القرار                                                           |                                 [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
+| 05  |                        أساسيات JS                         |                         الوظائف والأساليب                          | تعلم الوظائف والأساليب لإدارة تدفق منطق التطبيق                                                             |                              [الوظائف والأساليب](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |  
+| 06  |                        أساسيات JS                         |                        اتخاذ القرارات باستخدام JS                        | تعلم كيفية إنشاء الشروط في الكود باستخدام طرق اتخاذ القرار                                                           |                                 [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
 | 07  |                        أساسيات JS                         |                            المصفوفات والحلقات                            | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript                                                                                 |                                   [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
-| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML عملي                            | بناء HTML لإنشاء تيراريوم عبر الإنترنت، مع التركيز على إنشاء تخطيط                                                         |                                 [مقدمة في HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML عملي                            | بناء HTML لإنشاء تيراريوم عبر الإنترنت، مع التركيز على بناء التخطيط                                                         |                                 [مقدمة في HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
 | 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS عملي                             | بناء CSS لتنسيق التيراريوم عبر الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة                     |                                  [مقدمة في CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
-| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 إغلاق JavaScript، التلاعب بـ DOM                  | بناء JavaScript لجعل التيراريوم يعمل كواجهة سحب وإفلات، مع التركيز على الإغلاق والتلاعب بـ DOM             |                  [إغلاق JavaScript، التلاعب بـ DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 إغلاق JavaScript، التلاعب بـ DOM                  | بناء JavaScript لجعل التيراريوم يعمل كواجهة سحب/إفلات، مع التركيز على الإغلاق والتلاعب بـ DOM             |                  [إغلاق JavaScript، التلاعب بـ DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
 | 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          بناء لعبة كتابة                           | تعلم كيفية استخدام أحداث لوحة المفاتيح لتوجيه منطق تطبيق JavaScript الخاص بك                                                          |                                [برمجة قائمة على الأحداث](./4-typing-game/typing-game/README.md)                                |       Christopher       |  
 | 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         العمل مع المتصفحات                          | تعلم كيفية عمل المتصفحات، تاريخها، وكيفية إنشاء العناصر الأولى لإضافة المتصفح                               |                               [حول المتصفحات](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |  
 | 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | بناء نموذج، استدعاء API وتخزين المتغيرات في التخزين المحلي | بناء عناصر JavaScript لإضافة المتصفح لاستدعاء API باستخدام المتغيرات المخزنة في التخزين المحلي                      |                [APIs، النماذج، والتخزين المحلي](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |  
 | 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          العمليات الخلفية في المتصفح، أداء الويب          | استخدام العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ تعلم أداء الويب وبعض التحسينات لجعلها أفضل   |             [المهام الخلفية والأداء](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |  
-| 15  |           [Space Game](./6-space-game/solution/README.md)           |             تطوير ألعاب أكثر تقدمًا باستخدام JavaScript             | تعلم الوراثة باستخدام الفئات والتكوين ونمط Pub/Sub، استعدادًا لبناء لعبة              |                      [مقدمة في تطوير الألعاب المتقدمة](./6-space-game/1-introduction/README.md)                       |          Chris          |  
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             تطوير الألعاب المتقدم باستخدام JavaScript             | تعلم الوراثة باستخدام الفئات والتكوين ونمط Pub/Sub، استعدادًا لبناء لعبة              |                      [مقدمة في تطوير الألعاب المتقدم](./6-space-game/1-introduction/README.md)                       |          Chris          |  
 | 16  |           [Space Game](./6-space-game/solution/README.md)           |                           الرسم على اللوحة                            | تعلم واجهة برمجة التطبيقات Canvas، المستخدمة لرسم العناصر على الشاشة                                                                       |                                [الرسم على اللوحة](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |  
-| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   تحريك العناصر على الشاشة                    | اكتشاف كيفية اكتساب العناصر للحركة باستخدام الإحداثيات الكارتيسية وواجهة برمجة التطبيقات Canvas                                            |                           [تحريك العناصر](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |  
-| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          اكتشاف الاصطدام                           | جعل العناصر تصطدم وتتفاعل مع بعضها البعض باستخدام ضغطات المفاتيح وتوفير وظيفة تبريد لضمان أداء اللعبة    |                              [اكتشاف الاصطدام](./6-space-game/4-collision-detection/README.md)                              |          Chris          |  
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   تحريك العناصر على الشاشة                    | اكتشاف كيفية اكتساب العناصر الحركة باستخدام الإحداثيات الكارتيسية وواجهة برمجة التطبيقات Canvas                                            |                           [تحريك العناصر](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |  
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          اكتشاف التصادم                           | جعل العناصر تصطدم وتتفاعل مع بعضها البعض باستخدام ضغطات المفاتيح وتوفير وظيفة تبريد لضمان أداء اللعبة    |                              [اكتشاف التصادم](./6-space-game/4-collision-detection/README.md)                              |          Chris          |  
 | 19  |           [Space Game](./6-space-game/solution/README.md)           |                             تسجيل النقاط                              | إجراء حسابات رياضية بناءً على حالة اللعبة وأدائها                                                                |                                    [تسجيل النقاط](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |  
 | 20  |           [Space Game](./6-space-game/solution/README.md)           |                     إنهاء اللعبة وإعادة تشغيلها                     | تعلم كيفية إنهاء اللعبة وإعادة تشغيلها، بما في ذلك تنظيف الأصول وإعادة تعيين قيم المتغيرات                              |                                [حالة النهاية](./6-space-game/6-end-condition/README.md)                                 |          Chris          |  
 | 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 قوالب HTML والمسارات في تطبيق ويب                 | تعلم كيفية إنشاء هيكل موقع ويب متعدد الصفحات باستخدام التوجيه وقوالب HTML                             |                            [قوالب HTML والمسارات](./7-bank-project/1-template-route/README.md)                             |          Yohan          |  
 | 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  بناء نموذج تسجيل الدخول والتسجيل                   | تعلم كيفية بناء النماذج ومعالجة إجراءات التحقق                                                                          |                                           [النماذج](./7-bank-project/2-forms/README.md)                                           |          Yohan          |  
 | 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   طرق جلب البيانات واستخدامها                   | كيفية تدفق البيانات داخل وخارج التطبيق الخاص بك، كيفية جلبها، تخزينها، والتخلص منها                                                 |                                            [البيانات](./7-bank-project/3-data/README.md)                                            |          Yohan          |  
-| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      مفاهيم إدارة الحالة                      | تعلم كيفية احتفاظ التطبيق بالحالة وكيفية إدارتها برمجيًا                                                              |                                [إدارة الحالة](./7-bank-project/4-state-management/README.md)                                |          Yohan          |  
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      مفاهيم إدارة الحالة                      | تعلم كيفية احتفاظ التطبيق الخاص بك بالحالة وكيفية إدارتها برمجيًا                                                              |                                [إدارة الحالة](./7-bank-project/4-state-management/README.md)                                |          Yohan          |  
 | 25 | [Browser/VScode Code](../../8-code-editor) | العمل مع VScode | تعلم كيفية استخدام محرر الكود | [استخدام محرر الكود VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |  
 | 26 | [AI Assistants](./9-chat-project/README.md) | العمل مع الذكاء الاصطناعي | تعلم كيفية بناء مساعد ذكاء اصطناعي خاص بك | [مشروع مساعد الذكاء الاصطناعي](./9-chat-project/README.md) | Chris |  
 
-## 🏫 منهجية التعليم  
+## 🏫 طرق التدريس  
 
-تم تصميم منهجنا بناءً على مبدأين أساسيين في التعليم:  
+تم تصميم منهجنا مع مبدأين رئيسيين في التدريس:  
 * التعلم القائم على المشاريع  
 * الاختبارات المتكررة  
 
@@ -181,17 +181,17 @@ CO_OP_TRANSLATOR_METADATA:
 
 > 🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ [مسار تعلم](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn!  
 
-من خلال ضمان توافق المحتوى مع المشاريع، يتم جعل العملية أكثر جاذبية للطلاب ويتم تعزيز الاحتفاظ بالمفاهيم. كما قمنا بكتابة عدة دروس تمهيدية في أساسيات JavaScript لتقديم المفاهيم، مقترنة بفيديو من مجموعة "[سلسلة المبتدئين: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" من دروس الفيديو، التي ساهم بعض مؤلفيها في هذا المنهج.  
+من خلال ضمان توافق المحتوى مع المشاريع، يتم جعل العملية أكثر جاذبية للطلاب وسيتم تعزيز الاحتفاظ بالمفاهيم. كما كتبنا عدة دروس تمهيدية في أساسيات JavaScript لتقديم المفاهيم، مقترنة بفيديو من مجموعة "[سلسلة المبتدئين: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" من دروس الفيديو، التي ساهم بعض مؤلفيها في هذا المنهج.  
 
-بالإضافة إلى ذلك، فإن الاختبار منخفض المخاطر قبل الفصل يحدد نية الطالب نحو تعلم الموضوع، بينما يضمن اختبار ثانٍ بعد الفصل مزيدًا من الاحتفاظ. تم تصميم هذا المنهج ليكون مرنًا وممتعًا ويمكن أخذه بالكامل أو جزئيًا. تبدأ المشاريع صغيرة وتصبح أكثر تعقيدًا بحلول نهاية الدورة التي تستمر 12 أسبوعًا.  
+بالإضافة إلى ذلك، يحدد اختبار منخفض المخاطر قبل الفصل نية الطالب نحو تعلم موضوع معين، بينما يضمن اختبار ثانٍ بعد الفصل مزيدًا من الاحتفاظ. تم تصميم هذا المنهج ليكون مرنًا وممتعًا ويمكن أخذه بالكامل أو جزئيًا. تبدأ المشاريع صغيرة وتصبح أكثر تعقيدًا بحلول نهاية دورة الـ 12 أسبوعًا.  
 
 بينما تجنبنا عمدًا تقديم أطر عمل JavaScript للتركيز على المهارات الأساسية المطلوبة كمطور ويب قبل اعتماد إطار عمل، فإن الخطوة التالية الجيدة لإكمال هذا المنهج ستكون تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "[سلسلة المبتدئين: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".  
 
-> قم بزيارة [مدونة قواعد السلوك](CODE_OF_CONDUCT.md) و[إرشادات المساهمة](CONTRIBUTING.md). نحن نرحب بملاحظاتكم البناءة!  
+> قم بزيارة [مدونة قواعد السلوك](CODE_OF_CONDUCT.md) و[إرشادات المساهمة](CONTRIBUTING.md). نرحب بملاحظاتك البناءة!  
 
 ## 🧭 الوصول دون اتصال  
 
-يمكنك تشغيل هذا التوثيق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). قم باستنساخ هذا المستودع، [قم بتثبيت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الرئيسي لهذا المستودع، اكتب `docsify serve`. سيتم تشغيل الموقع على المنفذ 3000 على localhost: `localhost:3000`.  
+يمكنك تشغيل هذا التوثيق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). قم باستنساخ هذا المستودع، [تثبيت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على localhost الخاص بك: `localhost:3000`.  
 
 ## 📘 PDF  
 
@@ -201,32 +201,47 @@ CO_OP_TRANSLATOR_METADATA:
 
 فريقنا ينتج دورات أخرى! تحقق من:  
 
-- [MCP للمبتدئين](https://aka.ms/mcp-for-beginners)  
-- [Edge AI للمبتدئين](https://aka.ms/edgeai-for-beginners)  
-- [وكلاء الذكاء الاصطناعي للمبتدئين](https://aka.ms/ai-agents-beginners)  
-- [الذكاء الاصطناعي التوليدي للمبتدئين .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)  
-- [الذكاء الاصطناعي التوليدي باستخدام JavaScript](https://github.com/microsoft/generative-ai-with-javascript)  
-- [الذكاء الاصطناعي التوليدي باستخدام Java](https://github.com/microsoft/Generative-AI-for-beginners-java)  
-- [الذكاء الاصطناعي للمبتدئين](https://aka.ms/ai-beginners)  
-- [علم البيانات للمبتدئين](https://aka.ms/datascience-beginners)  
-- [تعلم الآلة للمبتدئين](https://aka.ms/ml-beginners)  
-- [الأمن السيبراني للمبتدئين](https://github.com/microsoft/Security-101)  
-- [تطوير الويب للمبتدئين](https://aka.ms/webdev-beginners)  
-- [إنترنت الأشياء للمبتدئين](https://aka.ms/iot-beginners)  
-- [تطوير الواقع الممتد للمبتدئين](https://github.com/microsoft/xr-development-for-beginners)  
-- [إتقان GitHub Copilot للاستخدام التفاعلي](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)  
-- [إتقان GitHub Copilot لمطوري C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)  
-- [اختر مغامرتك الخاصة مع Copilot](https://github.com/microsoft/CopilotAdventures)  
+### Azure / Edge / MCP / Agents  
+[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![الذكاء الاصطناعي الطرفي للمبتدئين](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![MCP للمبتدئين](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![وكلاء الذكاء الاصطناعي للمبتدئين](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### سلسلة الذكاء الاصطناعي التوليدي  
+[![الذكاء الاصطناعي التوليدي للمبتدئين](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![الذكاء الاصطناعي التوليدي (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)  
+[![الذكاء الاصطناعي التوليدي (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)  
+[![الذكاء الاصطناعي التوليدي (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### التعلم الأساسي  
+[![تعلم الآلة للمبتدئين](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)  
+[![علم البيانات للمبتدئين](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)  
+[![الذكاء الاصطناعي للمبتدئين](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)  
+[![الأمن السيبراني للمبتدئين](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)  
+[![تطوير الويب للمبتدئين](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)  
+[![إنترنت الأشياء للمبتدئين](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)  
+[![تطوير XR للمبتدئين](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### سلسلة Copilot  
+[![Copilot للبرمجة المزدوجة بالذكاء الاصطناعي](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)  
+[![Copilot لـ C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)  
+[![مغامرة Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)  
 
 ## الحصول على المساعدة  
 
-إذا واجهت صعوبة أو كانت لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي، انضم إلى:  
+إذا واجهت صعوبة أو كانت لديك أسئلة حول بناء تطبيقات الذكاء الاصطناعي، انضم إلى:  
 
-[![مجتمع Discord الخاص بـ Azure AI Foundry](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)  
+[![Discord مجتمع Azure AI Foundry](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)  
 
 إذا كانت لديك ملاحظات حول المنتج أو أخطاء أثناء البناء، قم بزيارة:  
 
-[![منتدى مطوري Azure AI Foundry على GitHub](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)  
+[![منتدى مطوري Azure AI Foundry](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)  
 
 ## الترخيص  
 
@@ -235,4 +250,4 @@ CO_OP_TRANSLATOR_METADATA:
 ---
 
 **إخلاء المسؤولية**:  
-تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
\ No newline at end of file
+تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة.
\ No newline at end of file
diff --git a/translations/mr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/mr/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index 2f7d5e6f00..bd711c5abf 100644
--- a/translations/mr/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/translations/mr/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -1,131 +1,201 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3e0da5eb9b275fe3cb431033c1413ec2",
-  "translation_date": "2025-10-22T15:55:15+00:00",
+  "original_hash": "d45ddcc54eb9232a76d08328b09d792e",
+  "translation_date": "2025-11-03T14:20:19+00:00",
   "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
   "language_code": "mr"
 }
 -->
 # प्रोग्रामिंग भाषा आणि आधुनिक डेव्हलपर टूल्सची ओळख
 
-नमस्कार, भविष्यातील डेव्हलपर! 👋 तुम्हाला एक गोष्ट सांगू का जी मला रोज रोमांचित करते? तुम्ही लवकरच शोधून काढणार आहात की प्रोग्रामिंग ही फक्त संगणकांबद्दल नसून ती तुमच्या कल्पनांना प्रत्यक्षात आणण्यासाठी सुपरपॉवर मिळवण्यासारखी आहे!
+नमस्कार, भविष्यातील डेव्हलपर! 👋 तुम्हाला एक गोष्ट सांगू का जी मला रोज रोमांचित करते? तुम्ही आता शोध घेणार आहात की प्रोग्रामिंग ही फक्त संगणकांबद्दल नाही, तर तुमच्या सर्वात वेड्या कल्पना प्रत्यक्षात आणण्यासाठी सुपरपॉवर्स मिळवण्याबद्दल आहे!
 
-तुम्हाला तो क्षण आठवतो का जेव्हा तुम्ही तुमचा आवडता अ‍ॅप वापरत असता आणि सगळं अगदी परफेक्ट वाटतं? जेव्हा तुम्ही एखाद्या बटणावर टॅप करता आणि काहीतरी जादूई घडतं ज्यामुळे तुम्ही विचार करता, "वा, त्यांनी हे कसं केलं?" तर, तुमच्यासारखाच कोणी – कदाचित रात्री २ वाजता त्याच्या आवडत्या कॉफी शॉपमध्ये तिसऱ्या एस्प्रेसोसोबत बसून – त्या जादूची कोड लिहिली. आणि आता तुम्हाला आश्चर्य वाटेल: या धड्याच्या शेवटी, तुम्हाला फक्त ते कसं केलं हे समजणार नाही, तर तुम्हाला स्वतःच ते करून पाहण्याची इच्छा होईल!
+तुम्हाला तो क्षण आठवतो का जेव्हा तुम्ही तुमचा आवडता अ‍ॅप वापरत असता आणि सगळं अगदी परफेक्ट वाटतं? जेव्हा तुम्ही एखाद्या बटणावर टॅप करता आणि काहीतरी जादूई घडतं ज्यामुळे तुम्हाला वाटतं "अरे वा, त्यांनी हे कसं केलं?" तर, तुमच्यासारखाच कोणी तरी – कदाचित रात्री २ वाजता त्यांच्या आवडत्या कॉफी शॉपमध्ये तिसऱ्या एस्प्रेसोसोबत बसून – त्या जादूची निर्मिती करणारा कोड लिहिला. आणि आता तुम्हाला आश्चर्य वाटेल: या धड्याच्या शेवटी, तुम्हाला केवळ त्यांनी हे कसे केले ते समजेलच नाही तर तुम्हाला स्वतःच ते करण्याची इच्छा होईल!
 
-पहा, जर तुम्हाला प्रोग्रामिंग सध्या थोडं कठीण वाटत असेल तर ते मी पूर्णपणे समजू शकतो. जेव्हा मी सुरुवात केली, तेव्हा मला खरंच वाटायचं की तुम्हाला गणितात गती असावी लागते किंवा तुम्ही पाच वर्षांचे असल्यापासून कोडिंग करत असावं लागतं. पण माझं दृष्टिकोन पूर्णपणे बदललं कारण प्रोग्रामिंग ही नवीन भाषा शिकण्यासारखी आहे. तुम्ही "नमस्कार" आणि "धन्यवाद" पासून सुरुवात करता, मग कॉफी ऑर्डर करण्यापर्यंत पोहोचता, आणि नंतर तुम्ही गहन तत्त्वज्ञानात्मक चर्चा करू लागता! फक्त या बाबतीत, तुम्ही संगणकांशी संवाद साधत आहात, आणि प्रामाणिकपणे? ते सर्वात संयमी संवाद भागीदार आहेत – ते तुमच्या चुका कधीच न्याय करत नाहीत आणि ते नेहमी पुन्हा प्रयत्न करण्यास उत्सुक असतात!
+पहा, जर तुम्हाला प्रोग्रामिंग सध्या थोडं कठीण वाटत असेल तर ते मी पूर्णपणे समजू शकतो. जेव्हा मी सुरुवात केली, तेव्हा मला खरंच वाटलं की तुम्हाला काही प्रकारचा गणिताचा तज्ज्ञ असायला हवा किंवा तुम्ही पाच वर्षांचे असल्यापासून कोडिंग करत असायला हवे. पण माझं मत पूर्णपणे बदललं तेव्हा मला समजलं की प्रोग्रामिंग ही नवीन भाषा शिकण्यासारखीच आहे. तुम्ही "नमस्कार" आणि "धन्यवाद" पासून सुरुवात करता, मग कॉफी ऑर्डर करण्यापर्यंत पोहोचता, आणि नंतर तुम्ही गहन तत्त्वज्ञानात्मक चर्चा करू लागता! फक्त या बाबतीत, तुम्ही संगणकांशी संवाद साधत आहात, आणि प्रामाणिकपणे? ते सर्वात संयमी संवाद भागीदार आहेत – ते तुमच्या चुका कधीच न्याय करत नाहीत आणि ते नेहमी पुन्हा प्रयत्न करण्यास उत्सुक असतात!
 
-आज, आपण आधुनिक वेब डेव्हलपमेंट शक्य करण्यासाठी आणि खरोखरच व्यसनाधीन बनवण्यासाठी अविश्वसनीय टूल्स एक्सप्लोर करणार आहोत. मी ज्या एडिटर्स, ब्राउझर्स आणि वर्कफ्लोजबद्दल बोलतोय ते Netflix, Spotify आणि तुमच्या आवडत्या इंडी अ‍ॅप स्टुडिओमधील डेव्हलपर्स दररोज वापरतात. आणि आता तुम्हाला आनंदाने नाचायला लावणारा भाग: या व्यावसायिक-ग्रेड, उद्योग-मानक टूल्सपैकी बहुतेक पूर्णपणे मोफत आहेत!
+आज, आपण आधुनिक वेब डेव्हलपमेंट शक्य होण्यासाठी आणि गंभीरपणे व्यसनाधीन होण्यासाठी अविश्वसनीय टूल्स एक्सप्लोर करणार आहोत. मी ज्या एडिटर्स, ब्राउझर्स आणि वर्कफ्लोजबद्दल बोलतोय, तेच टूल्स Netflix, Spotify आणि तुमच्या आवडत्या इंडी अ‍ॅप स्टुडिओचे डेव्हलपर्स दररोज वापरतात. आणि आता तुम्हाला आनंदाने नाचायला लावणारा भाग: या व्यावसायिक-ग्रेड, उद्योग-मानक टूल्सपैकी बहुतेक पूर्णपणे मोफत आहेत!
 
 ![प्रोग्रामिंगची ओळख](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.mr.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
+
+```mermaid
+journey
+    title Your Programming Journey Today
+    section Discover
+      What is Programming: 5: You
+      Programming Languages: 4: You
+      Tools Overview: 5: You
+    section Explore
+      Code Editors: 4: You
+      Browsers & DevTools: 5: You
+      Command Line: 3: You
+    section Practice
+      Language Detective: 4: You
+      Tool Exploration: 5: You
+      Community Connection: 5: You
+```
 
 ## पाहूया तुम्हाला आधीच काय माहित आहे!
 
-मजेदार गोष्टींमध्ये उडी मारण्याआधी, मला उत्सुकता आहे – तुम्हाला या प्रोग्रामिंग जगाबद्दल आधीच काय माहित आहे? आणि ऐका, जर तुम्ही या प्रश्नांकडे पाहत असाल आणि विचार करत असाल "मला याबद्दल काहीच माहिती नाही," तर ते फक्त ठीकच नाही, ते परफेक्ट आहे! याचा अर्थ तुम्ही अगदी योग्य ठिकाणी आहात. या क्विझला वर्कआउटच्या आधी स्ट्रेचिंगसारखं समजा – आपण फक्त त्या मेंदूच्या स्नायूंना गरम करत आहोत!
+मजेदार गोष्टींमध्ये उडी मारण्यापूर्वी, मला उत्सुकता आहे – तुम्हाला या प्रोग्रामिंग जगाबद्दल आधीच काय माहित आहे? आणि ऐका, जर तुम्ही या प्रश्नांकडे पाहत असाल आणि विचार करत असाल "मला याबद्दल काहीच माहिती नाही," तर ते फक्त ठीकच नाही, तर परफेक्ट आहे! याचा अर्थ तुम्ही अगदी योग्य ठिकाणी आहात. या क्विझला वर्कआउटच्या आधी स्ट्रेचिंगसारखे समजा – आपण फक्त त्या मेंदूच्या स्नायूंना गरम करत आहोत!
 
 [प्री-लेसन क्विझ घ्या](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
 
 
-## आपण एकत्र जाणार असलेल्या साहसाबद्दल
+## आपण एकत्र जाणार असलेल्या साहसाची झलक
 
-ठीक आहे, मी आज आपण एक्सप्लोर करणार आहोत याबद्दल खरोखरच उत्साहित आहे! खरंच, मला तुमचं चेहरा पाहायला आवडेल जेव्हा काही संकल्पना क्लिक होतील. आपण एकत्र घेत असलेल्या अविश्वसनीय प्रवासाबद्दल:
+ठीक आहे, मी आज आपण एक्सप्लोर करणार आहोत याबद्दल खरोखर उत्साहाने उडत आहे! खरंच, मला तुमचा चेहरा पाहायला आवडेल जेव्हा काही संकल्पना क्लिक होतील. आपण एकत्र घेत असलेल्या अविश्वसनीय प्रवासाची झलक येथे आहे:
 
-- **प्रोग्रामिंग म्हणजे काय (आणि ते सर्वात थंड गोष्ट का आहे!)** – आपण शोधणार आहोत की कोड हा अक्षरशः अदृश्य जादू आहे जो तुमच्याभोवती सर्वकाही चालवतो, त्या अलार्मपासून जो कसा तरी जाणतो की सोमवार सकाळ आहे ते Netflix शिफारसींचं अल्गोरिदम
-- **प्रोग्रामिंग भाषा आणि त्यांचे अद्भुत व्यक्तिमत्त्व** – कल्पना करा की तुम्ही अशा पार्टीत प्रवेश करता जिथे प्रत्येक व्यक्तीला समस्या सोडवण्यासाठी पूर्णपणे वेगळ्या सुपरपॉवर आहेत. प्रोग्रामिंग भाषा जग असंच आहे, आणि तुम्हाला त्यांना भेटायला आवडेल!
-- **डिजिटल जादू घडवण्यासाठी मूलभूत बिल्डिंग ब्लॉक्स** – यांना अंतिम क्रिएटिव्ह LEGO सेट समजा. एकदा तुम्हाला हे तुकडे कसे एकत्र बसतात हे समजले की तुम्हाला कळेल की तुम्ही तुमच्या कल्पनेत जे काही स्वप्न पाहता ते अक्षरशः तयार करू शकता
-- **व्यावसायिक टूल्स जे तुम्हाला जादूगाराचा जादूचा कांडी मिळाल्यासारखं वाटवतील** – मी नाट्यमय होत नाही – ही टूल्स तुम्हाला खरोखरच सुपरपॉवर असल्यासारखं वाटवतील, आणि सर्वात चांगली गोष्ट? तीच टूल्स प्रोफेशनल्स वापरतात!
+- **प्रोग्रामिंग म्हणजे काय (आणि ते का सर्वात थंड गोष्ट आहे!)** – आपण शोधणार आहोत की कोड हा अक्षरशः अदृश्य जादू आहे जो तुमच्याभोवती सर्वकाही चालवतो, त्या अलार्मपासून जो कसा तरी जाणतो की सोमवार सकाळ आहे ते Netflix वर तुमच्यासाठी परिपूर्ण शिफारसी तयार करणाऱ्या अल्गोरिदमपर्यंत
+- **प्रोग्रामिंग भाषा आणि त्यांचे अद्भुत व्यक्तिमत्त्व** – कल्पना करा की तुम्ही अशा पार्टीत प्रवेश करत आहात जिथे प्रत्येक व्यक्तीला पूर्णपणे वेगळ्या सुपरपॉवर्स आणि समस्या सोडवण्याचे मार्ग आहेत. प्रोग्रामिंग भाषा जग असेच आहे, आणि तुम्हाला त्यांना भेटायला आवडेल!
+- **डिजिटल जादू घडवणारे मूलभूत घटक** – यांना अंतिम क्रिएटिव्ह LEGO सेट समजा. एकदा तुम्हाला हे तुकडे कसे एकत्र बसतात हे समजले की तुम्हाला कळेल की तुम्ही अक्षरशः तुमच्या कल्पनेने स्वप्न पाहिलेली कोणतीही गोष्ट तयार करू शकता
+- **व्यावसायिक टूल्स जे तुम्हाला जादूगाराचा जादूई काठी मिळाल्यासारखे वाटतील** – मी नाट्यमय होत नाही – ही टूल्स तुम्हाला खरोखर सुपरपॉवर्स असल्यासारखे वाटतील, आणि सर्वात चांगली गोष्ट? तीच टूल्स प्रोफेशनल्स वापरतात!
 
-> 💡 **एक गोष्ट लक्षात ठेवा**: आज सगळं लक्षात ठेवण्याचा प्रयत्न करू नका! सध्या, मला फक्त तुम्हाला काय शक्य आहे याबद्दल उत्साह वाटावा असं वाटतं. आपण एकत्र सराव करत असताना तपशील नैसर्गिकरित्या चिकटतील – खरी शिकवण तशीच होते!
+> 💡 **एक गोष्ट लक्षात ठेवा**: आज सर्वकाही लक्षात ठेवण्याचा प्रयत्न करू नका! सध्या, मला फक्त तुम्हाला काय शक्य आहे याबद्दल उत्साह वाटावा अशी इच्छा आहे. आपण एकत्र सराव करत असताना तपशील नैसर्गिकरित्या चिकटतील – खरी शिकवण अशीच होते!
 
 > तुम्ही हा धडा [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) वर घेऊ शकता!
 
-## तर प्रोग्रामिंग म्हणजे नक्की काय आहे?
+## तर प्रोग्रामिंग नेमकं *काय* आहे?
 
-ठीक आहे, आपण लाखो डॉलर्सचा प्रश्न सोडवूया: प्रोग्रामिंग म्हणजे नक्की काय?
+ठीक आहे, आपण लाखो डॉलरचा प्रश्न सोडवूया: प्रोग्रामिंग म्हणजे नेमकं काय?
 
-मी तुम्हाला एक कथा सांगतो जी माझं विचार करण्याचं पूर्णपणे बदललं. गेल्या आठवड्यात, मी माझ्या आईला आमच्या नवीन स्मार्ट टीव्ही रिमोटचा वापर कसा करायचा ते समजावून सांगण्याचा प्रयत्न करत होतो. मी स्वतःला "लाल बटण दाबा, पण मोठं लाल बटण नाही, डाव्या बाजूचं छोटं लाल बटण... नाही, तुमचा दुसरा डावा... ठीक आहे, आता दोन सेकंदांसाठी धरून ठेवा, एक नाही, तीन नाही..." असं म्हणताना पकडलं. ओळखीचं वाटतंय ना? 😅
+मी तुम्हाला एक कथा सांगतो जी माझा विचार पूर्णपणे बदलून टाकली. गेल्या आठवड्यात, मी माझ्या आईला आमच्या नवीन स्मार्ट टीव्ही रिमोटचा वापर कसा करायचा ते समजावून सांगण्याचा प्रयत्न करत होतो. मी असे म्हणताना स्वतःला पकडले, "लाल बटण दाबा, पण मोठे लाल बटण नाही, डाव्या बाजूला असलेले छोटे लाल बटण... नाही, तुमचा दुसरा डावा... ठीक आहे, आता दोन सेकंदांसाठी धरून ठेवा, एक नाही, तीन नाही..." ओळखीच वाटतंय ना? 😅
 
-तेच प्रोग्रामिंग आहे! ही एक कला आहे ज्यामध्ये अत्यंत तपशीलवार, चरण-दर-चरण सूचना देऊन काहीतरी खूप शक्तिशाली गोष्टी सांगितल्या जातात ज्याला सगळं परफेक्ट सांगितलं गेलं पाहिजे. फक्त तुमच्या आईला समजावून सांगण्याऐवजी (जी विचारू शकते "कोणतं लाल बटण?!"), तुम्ही संगणकाला समजावून सांगत आहात (जो फक्त तुम्ही सांगितलं तेच करतो, जरी तुम्ही जे सांगितलं ते तुम्हाला म्हणायचं होतं ते नसतं).
+हेच प्रोग्रामिंग आहे! ही एक कला आहे ज्यामध्ये तुम्ही अत्यंत तपशीलवार, पायरी-पायरीने सूचना देत असता अशा गोष्टीला जी खूप शक्तिशाली आहे पण तिला सर्वकाही परिपूर्णपणे सांगितले गेले पाहिजे. फक्त तुमच्या आईला समजावून सांगण्याऐवजी (जी विचारू शकते "कोणते लाल बटण?!"), तुम्ही संगणकाला समजावून सांगत असता (जो फक्त तुम्ही सांगितले तेच करतो, जरी तुम्ही जे सांगितले ते नेमके तुम्हाला म्हणायचे होते ते नसले तरी).
 
-जेव्हा मी हे पहिल्यांदा शिकलो तेव्हा मला जेव्हा कळलं तेव्हा माझं मन उडालं: संगणक खरोखरच त्यांच्या मूळात सोपे आहेत. त्यांना अक्षरशः फक्त दोन गोष्टी समजतात – 1 आणि 0, जे मूलतः "होय" आणि "नाही" किंवा "ऑन" आणि "ऑफ" आहे. एवढंच! पण इथेच जादू होते – आपल्याला 1s आणि 0s मध्ये बोलण्याची गरज नाही जसं आपण The Matrix मध्ये आहोत. तिथे **प्रोग्रामिंग भाषा** मदतीला येतात. त्या तुमच्या सामान्य मानवी विचारांना संगणकाच्या भाषेत रूपांतरित करणारा जगातील सर्वोत्तम अनुवादक असल्यासारख्या आहेत.
+जेव्हा मी हे प्रथम शिकले तेव्हा मला जेव्हा कळले तेव्हा माझे मन उडाले: संगणक प्रत्यक्षात त्यांच्या मुळात खूप सोपे आहेत. त्यांना अक्षरशः फक्त दोन गोष्टी समजतात – 1 आणि 0, जे मूलत: "होय" आणि "नाही" किंवा "चालू" आणि "बंद" आहे. एवढंच! पण जिथे जादू होते तिथे – आपल्याला 1s आणि 0s मध्ये बोलण्याची गरज नाही जणू आपण The Matrix मध्ये आहोत. तिथे **प्रोग्रामिंग भाषा** मदतीला येतात. त्या तुमच्या सामान्य मानवी विचारांना संगणकाच्या भाषेत रूपांतरित करणारा जगातील सर्वोत्तम अनुवादक असल्यासारखे आहेत.
 
-आणि इथेच मला रोज सकाळी उठल्यावर खरोखर रोमांचित वाटतं: तुमच्या आयुष्यातील अक्षरशः *सगळं* डिजिटल एखाद्या व्यक्तीने सुरुवात केली, कदाचित त्यांच्या पायजामामध्ये कॉफीचा कप घेऊन, त्यांच्या लॅपटॉपवर कोड टाइप करत. तो Instagram फिल्टर जो तुम्हाला परिपूर्ण दिसायला लावतो? कोणीतरी ते कोड केलं. ती शिफारस जी तुम्हाला तुमचं नवीन आवडतं गाणं ऐकायला लावली? एखाद्या डेव्हलपरने तो अल्गोरिदम तयार केला. ती अ‍ॅप जी तुम्हाला मित्रांसोबत डिनर बिल्स विभाजित करण्यात मदत करते? होय, कोणीतरी विचार केला "हे त्रासदायक आहे, मी हे ठीक करू शकतो" आणि मग... त्यांनी केलं!
+आणि येथे एक गोष्ट जी मला दररोज सकाळी उठल्यावर खरोखर रोमांचित करते: तुमच्या जीवनातील अक्षरशः *सर्वकाही* डिजिटल एखाद्या तुमच्यासारख्या व्यक्तीने सुरू केले, कदाचित त्यांच्या पायजामामध्ये कॉफीचा कप घेऊन, त्यांच्या लॅपटॉपवर कोड टाइप करत. तो Instagram फिल्टर जो तुम्हाला निर्दोष दिसायला लावतो? कोणीतरी तो कोड केला. ती शिफारस जी तुम्हाला तुमचा नवीन आवडता गाणं ऐकायला लावते? एखाद्या डेव्हलपरने तो अल्गोरिदम तयार केला. तो अ‍ॅप जो तुम्हाला मित्रांसोबत डिनर बिल्स विभाजित करण्यात मदत करतो? होय, कोणीतरी विचार केला "हे त्रासदायक आहे, मी हे ठीक करू शकतो" आणि मग... त्यांनी ते केले!
 
-जेव्हा तुम्ही प्रोग्रामिंग शिकता, तेव्हा तुम्ही फक्त नवीन कौशल्य मिळवत नाही – तुम्ही समस्यांचे निराकरण करणाऱ्या या अविश्वसनीय समुदायाचा भाग बनत आहात जो त्यांचा दिवस थोडा चांगला बनवण्यासाठी "मी काहीतरी तयार करू शकतो का?" असा विचार करत असतो. प्रामाणिकपणे, त्यापेक्षा थंड काही आहे का?
+जेव्हा तुम्ही प्रोग्रामिंग शिकता, तेव्हा तुम्ही फक्त नवीन कौशल्य मिळवत नाही – तुम्ही समस्या सोडवणाऱ्या या अविश्वसनीय समुदायाचा भाग बनत आहात जो त्यांचा दिवस "मी काहीतरी तयार करू शकतो का जे एखाद्याचा दिवस थोडा चांगला बनवेल?" विचार करण्यात घालवतो. प्रामाणिकपणे, त्यापेक्षा थंड काही आहे का?
 
-✅ **मजेदार तथ्य शोधा**: तुम्हाला मोकळ्या वेळेत शोधण्यासाठी काहीतरी खूप छान आहे – तुम्हाला कोण वाटतं की जगातील पहिला संगणक प्रोग्रामर कोण होता? मी तुम्हाला एक हिंट देतो: ते तुम्ही अपेक्षा करत असाल ते नसतील! या व्यक्तीमागील कथा खूपच आकर्षक आहे आणि दाखवते की प्रोग्रामिंग नेहमीच सर्जनशील समस्या सोडवण्याबद्दल आणि बॉक्सच्या बाहेर विचार करण्याबद्दल आहे.
+✅ **मजेदार तथ्य शोधा**: तुम्हाला मोकळ्या वेळेत शोधण्यासाठी काहीतरी खूप छान सांगतो – तुम्हाला कोण वाटतं जगातील पहिला संगणक प्रोग्रामर होता? मी तुम्हाला एक हिंट देतो: ते तुम्ही अपेक्षित करत असाल असे नाही! या व्यक्तीमागील कथा अत्यंत आकर्षक आहे आणि दाखवते की प्रोग्रामिंग नेहमीच सर्जनशील समस्या सोडवणे आणि बॉक्सच्या बाहेर विचार करणे याबद्दल आहे.
 
-## प्रोग्रामिंग भाषा म्हणजे जादूचे वेगवेगळे स्वाद
+### 🧠 **चेक-इन वेळ: तुम्हाला कसे वाटते?**
 
-ठीक आहे, हे विचित्र वाटेल, पण माझ्यासोबत राहा – प्रोग्रामिंग भाषा वेगवेगळ्या प्रकारच्या संगीतासारख्या आहेत. विचार करा: तुम्हाला जाझ आहे, जे गुळगुळीत आणि इम्प्रोव्हायझेशनल आहे, रॉक जे शक्तिशाली आणि सरळ आहे, क्लासिकल जे मोहक आणि संरचित आहे, आणि हिप-हॉप जे सर्जनशील आणि अभिव्यक्त आहे. प्रत्येक शैलीला स्वतःचा मूड, स्वतःचा उत्साही चाहत्यांचा समुदाय आहे, आणि प्रत्येक वेगवेगळ्या मूड आणि प्रसंगांसाठी परिपूर्ण आहे.
+**थोडा वेळ घ्या आणि विचार करा:**
+- "संगणकांना सूचना देणे" ही कल्पना आता तुम्हाला समजते का?
+- तुम्ही प्रोग्रामिंगसह स्वयंचलित करू इच्छित असलेल्या दैनंदिन कामाचा विचार करू शकता का?
+- या संपूर्ण प्रोग्रामिंग गोष्टीबद्दल तुमच्या मनात कोणते प्रश्न आहेत?
 
-प्रोग्रामिंग भाषा अगदी तशाच प्रकारे काम करतात! तुम्ही मोठ्या प्रमाणात हवामान डेटा क्रंच करण्यासाठी वापरलेली भाषा आणि मजेदार मोबाइल गेम तयार करण्यासाठी वापरलेली भाषा एकसारखी वापरणार नाही, जसं तुम्ही योगा क्लासमध्ये डेथ मेटल वाजवणार नाही (बरं, बहुतेक योगा क्लासमध्ये तरी नाही! 😄).
+> **लक्षात ठेवा**: काही संकल्पना सध्या अस्पष्ट वाटणे पूर्णपणे सामान्य आहे. प्रोग्रामिंग शिकणे ही नवीन भाषा शिकण्यासारखी आहे – तुमच्या मेंदूला त्या न्यूरल पथ तयार करण्यासाठी वेळ लागतो. तुम्ही उत्तम करत आहात!
 
-पण इथेच मला प्रत्येक वेळी विचार करताना आश्चर्य वाटतं: या भाषा तुमच्यासोबत बसलेल्या जगातील सर्वात संयमी, प्रतिभावान अनुवादकासारख्या आहेत. तुम्ही तुमच्या मानवी मेंदूसाठी नैसर्गिक वाटेल अशा प्रकारे तुमच्या कल्पना व्यक्त करू शकता, आणि ते संगणकांना प्रत्यक्षात बोलणाऱ्या 1s आणि 0s मध्ये अनुवाद करण्याचं अविश्वसनीय जटिल काम हाताळतात. हे असं आहे जसं तुमच्यासोबत एक मित्र आहे जो "मानवी सर्जनशीलता" आणि "संगणक तर्कशास्त्र" या दोन्ही गोष्टींमध्ये परिपूर्ण आहे – आणि त्यांना कधीच थकवा येत नाही, कधीच कॉफी ब्रेकची गरज नसते, आणि तुम्ही एकच प्रश्न दोनदा विचारल्याबद्दल कधीच न्याय करत नाहीत!
+## प्रोग्रामिंग भाषा म्हणजे जादूचे वेगवेगळे स्वाद
 
-### लोकप्रिय प्रोग्रामिंग भाषा आणि त्यांचा उपयोग
+ठीक आहे, हे विचित्र वाटेल, पण माझ्यासोबत राहा – प्रोग्रामिंग भाषा वेगवेगळ्या प्रकारच्या संगीतासारख्या आहेत. विचार करा: तुम्हाला जाझ आहे, जे गुळगुळीत आणि इम्प्रोव्हायझेशनल आहे, रॉक जे शक्तिशाली आणि सरळ आहे, क्लासिकल जे मोहक आणि संरचित आहे, आणि हिप-हॉप जे सर्जनशील आणि अभिव्यक्त आहे. प्रत्येक शैलीला स्वतःचा मूड आहे, स्वतःचा उत्साही चाहत्यांचा समुदाय आहे, आणि प्रत्येक वेगवेगळ्या मूड्स आणि प्रसंगांसाठी परिपूर्ण आहे.
+
+प्रोग्रामिंग भाषा अगदी तशाच प्रकारे काम करतात! तुम्ही मोठ्या प्रमाणात हवामान डेटा क्रंच करण्यासाठी वापरलेली भाषा आणि मजेदार मोबाइल गेम तयार करण्यासाठी वापरलेली भाषा एकसारखी नसते, जसे तुम्ही योगा क्लासमध्ये डेथ मेटल वाजवणार नाही (ठीक आहे, बहुतेक योगा क्लासमध्ये तरी नाही! 😄).
+
+पण जेव्हा मी याबद्दल विचार करतो तेव्हा माझे मन पूर्णपणे उडते: या भाषा तुमच्यासोबत बसलेल्या जगातील सर्वात संयमी, प्रतिभावान दुभाष्यासारख्या आहेत. तुम्ही तुमच्या मानवी मेंदूसाठी नैसर्गिक वाटेल अशा प्रकारे तुमच्या कल्पना व्यक्त करू शकता, आणि ते सर्व अत्यंत जटिल काम हाताळतात जे संगणक प्रत्यक्षात बोलतात त्या 1s आणि 0s मध्ये अनुवादित करण्याचे आहे. हे असे आहे जणू तुमच्याजवळ एक मित्र आहे जो "मानवी सर्जनशीलता" आणि "संगणक तर्कशास्त्र" या दोन्ही गोष्टींमध्ये परिपूर्ण आहे – आणि त्यांना कधीच थकवा येत नाही, कधीच कॉफी ब्रेकची गरज नसते, आणि तुम्ही एकच प्रश्न दोनदा विचारल्याबद्दल कधीच न्याय करत नाहीत!
+
+### लोकप्रिय प्रोग्रामिंग भाषा आणि त्यांचे उपयोग
+
+```mermaid
+mindmap
+  root((Programming Languages))
+    Web Development
+      JavaScript
+        Frontend Magic
+        Interactive Websites
+      TypeScript
+        JavaScript + Types
+        Enterprise Apps
+    Data & AI
+      Python
+        Data Science
+        Machine Learning
+        Automation
+      R
+        Statistics
+        Research
+    Mobile Apps
+      Java
+        Android
+        Enterprise
+      Swift
+        iOS
+        Apple Ecosystem
+      Kotlin
+        Modern Android
+        Cross-platform
+    Systems & Performance
+      C++
+        Games
+        Performance Critical
+      Rust
+        Memory Safety
+        System Programming
+      Go
+        Cloud Services
+        Scalable Backend
+```
 
 | भाषा | सर्वोत्तम उपयोग | ती लोकप्रिय का आहे |
-|----------|----------|------------------|
-| **JavaScript** | वेब डेव्हलपमेंट, युजर इंटरफेस | ब्राउझरमध्ये चालते आणि इंटरॅक्टिव्ह वेबसाइट्स चालवते |
+|------|----------------|--------------------|
+| **JavaScript** | वेब डेव्हलपमेंट, युजर इंटरफेस | ब्राउझर्समध्ये चालते आणि इंटरॅक्टिव्ह वेबसाइट्स चालवते |
 | **Python** | डेटा सायन्स, ऑटोमेशन, AI | वाचायला आणि शिकायला सोपी, शक्तिशाली लायब्ररी |
-| **Java** | एंटरप्राइज अ‍ॅप्स, अँड्रॉइड अ‍ॅप्स | प्लॅटफॉर्म-स्वतंत्र, मोठ्या सिस्टीमसाठी मजबूत |
+| **Java** | एंटरप्राइज अ‍ॅप्स, अँड्रॉइड अ‍ॅप्स | प्लॅटफॉर्म-स्वतंत्र, मोठ्या सिस्टमसाठी मजबूत |
 | **C#** | विंडोज अ‍ॅप्स, गेम डेव्हलपमेंट | मजबूत Microsoft इकोसिस्टम सपोर्ट |
-| **Go** | क्लाउड सर्व्हिसेस, बॅकएंड सिस्टीम्स | जलद, सोपी, आधुनिक संगणनासाठी डिझाइन केलेली |
+| **Go** | क्लाउड सर्व्हिसेस, बॅकएंड सिस्टम्स | वेगवान, सोपी, आधुनिक संगणनासाठी डिझाइन केलेली |
 
-### उच्च-स्तरीय विरुद्ध निम्न-स्तरीय भाषा
+### उच्च-स्तरीय vs. निम्न-स्तरीय भाषा
 
-ठीक आहे, हे खरंच ते संकल्पना आहे ज्याने मला सुरुवातीला गोंधळात टाकलं, त्यामुळे मी शेवटी समजलेली उपमा शेअर करतो – आणि मला खरोखर आशा आहे की ती तुम्हाला मदत करेल!
+ठीक आहे, हे प्रामाणिकपणे ते संकल्पना होते ज्याने मला सुरुवातीला गोंधळात टाकले, म्हणून मी शेवटी मला समजलेली उपमा शेअर करतो – आणि मला खरोखर आशा आहे की ती तुम्हाला मदत करेल!
 
-कल्पना करा की तुम्ही अशा देशात भेट देत आहात जिथे तुम्हाला भाषा बोलता येत नाही, आणि तुम्हाला तातडीने जवळचा बाथरूम शोधायचा आहे (आपण सगळ्यांनी हे अनुभवलं आहे, बरोबर? 😅):
+कल्पना करा की तुम्ही अशा देशात भेट देत आहात जिथे तुम्हाला भाषा बोलता येत नाही, आणि तुम्हाला अत्यंत गरजेने जवळचा बाथरूम शोधायचा आहे (आपण सर्व तिथे गेलो आहोत, बरोबर? 😅):
 
-- **निम्न-स्तरीय प्रोग्रामिंग** म्हणजे स्थानिक बोलीभाषा इतकी चांगली शिकणे की तुम्ही कोपऱ्यावर फळ विकणाऱ्या आजीशी सांस्कृतिक संदर्भ, स्थानिक शब्द आणि फक्त तिथेच वाढलेल्या व्यक्तीला समजतील अशा अंतर्गत विनोदांचा वापर करून गप्पा मारू शकता. खूप प्रभावी आणि अविश्वसनीयपणे कार्यक्षम... जर तुम्ही प्रवाही असाल तर! पण तुम्ही फक्त बाथरूम शोधण्याचा प्रयत्न करत असाल तर खूपच गोंधळात टाकणारी.
+- **निम्न-स्तरीय प्रोग्रामिंग** म्हणजे स्थानिक बोलीभाषा इतकी चांगली शिकणे की तुम्ही कोपऱ्यावर फळ विकणाऱ्या आजीशी सांस्कृतिक संदर्भ, स्थानिक शब्द आणि फक्त तेथे वाढलेल्या व्यक्तीला समजतील अशा अंतर्गत विनोदांचा वापर करून गप्पा मारू शकता. खूप प्रभावी आणि अविश्वसनीयपणे कार्यक्षम... जर तुम्ही प्रवाही असाल तर! पण तुम्ही फक्त बाथरूम शोधण्याचा प्रयत्न करत असाल तर खूपच गोंधळात टाकणारे.
 
-- **उच्च-स्तरीय प्रोग्रामिंग** म्हणजे तुमचं ते अद्भुत स्थानिक मित्र असणं जो तुम्हाला समजतो. तुम्ही "मला खरंच बाथरूम शोधायचा आहे" असं साध्या इंग्रजीत सांगू शकता, आणि ते सगळा सांस्कृतिक अनुवाद हाताळतात आणि तुम्हाला अशा प्रकारे दिशा देतात ज्यामुळे तुमच्या गैर-स्थानिक मेंदूसाठी परिपूर्ण अर्थ लागतो.
+- **उच्च-स्तरीय प्रोग्रामिंग** म्हणजे तुमच्याकडे तो अद्भुत स्थानिक मित्र आहे जो तुम्हाला फक्त समजतो. तुम्ही "मला खरोखर बाथरूम शोधायचा आहे" असे साध्या इंग्रजीत सांगू शकता, आणि ते सर्व सांस्कृतिक अनुवाद हाताळतात आणि तुम्हाला अशा प्रकारे दिशा देतात जी तुमच्या गैर-स्थानिक मेंदूसाठी परिपूर्ण अर्थ देतात.
 
 प्रोग्रामिंगच्या दृष्टीने:
-- **निम्न-स्तरीय भाषा** (जसे Assembly किंवा C) तुम्हाला संगणकाच्या वास्तविक हार्डवेअरशी अविश्वसनीय तपशीलवार संवाद साधू देतात, पण तुम्हाला मशीनसारखं विचार करावं लागतं, जे... बरं, आपण फक्त म्हणूया की ते एक मोठं मानसिक बदल आहे!
-- **उच्च-स्तरीय भाषा** (जसे JavaScript, Python, किंवा C#) तुम्हाला मानवी विचार करण्यास परवानगी देतात तर ते सगळं मशीन-स्पीक मागे हाताळतात. शिवाय, त्यांच्याकडे अशा अविश्वसनीय स्वागतार्ह समुदाय आहेत जे नवीन असण्याचं काय वाटतं हे लक्षात ठेवतात आणि खरोखरच मदत करू इच्छितात!
-
-तुम्हाला सुरुवात करण्यासाठी मी कोणत्या सुचवणार आहे? 😉 उच्च-स्तरीय भाषा म्हणजे प्रशिक्षण चाकं असणं ज्यांना तुम्ही कधीच काढू इच्छित नाही कारण त्या संपूर्ण अनुभवाला खूपच आनंददायक बनवतात!
-
-
-### उच्च-स्तरीय भाषा का अधिक मैत्रीपूर्ण आहेत हे मी तुम्हाला दाखवतो
-
-ठीक आहे, मी तुम्हाला काहीतरी दाखवणार आहे जे उच्च-स्तरीय भाषांवर प्रेम करण्याचं कारण परिपूर्णपणे दाखवतं, पण आधी – मला तुमच्याकडून काहीतरी वचन हवं आहे. जेव्हा तुम्ही पहिला कोड उदाहरण पाहता, तेव्हा घाबरू नका! ते घाबरवण्यासाठीच आहे. मी जे मुद्दा मांडतोय तोच आहे!
-
-आपण एकाच कार्याला दोन पूर्णपणे वेगळ्या शैलीत लिहिलेलं पाहणार आहोत. दोन्ही Fibonacci sequence तयार करतात – ही एक सुंदर गणितीय पद्धत आहे जिथे प्रत्येक संख्या आधीच्या दोन संख्यांचा योग आहे: 0, 1, 1, 2, 3, 5, 8, 13... (मजेदार तथ्य: तुम्हाला ही पद्धत अक्षरशः निसर्गात सगळीकडे सापडेल – सूर्यफुलाच्या बिया, पाइनकोन पॅटर्न्स, अगदी आकाशगंगा तयार होण्याच्या पद्धतीत!)
-
-तयार आहात फरक पाहण्यासाठी? चला!
-
-**उच्च-स्तरीय भाषा (JavaScript) – मानवी-अनुकूल:**
+- **निम्न-स्तरीय भाषा** (जसे Assembly किंवा C) तुम्हाला संगणकाच्या वास्तविक हार्डवेअरशी अविश्वसनीय तपशीलवार संवाद साधू देतात, पण तुम्हाला मशीनसारखे विचार करावे लागते, जे... ठीक आहे, आपण फक्त म्हणूया की ते एक मोठे मानसिक बदल आहे!
+- **उच्च-स्तरीय भाषा** (जसे JavaScript, Python, किंवा C#) तुम्हाला मानवी विचार करण्यास परवानगी देतात तर ते सर्व मशीन-स्पीक मागे हाताळतात. याशिवाय, त्यांच्याकडे अशा अविश्वसनीय स्वागतार्ह समुदाय आहेत जे नवीन असण्याचा अनुभव लक्षात ठेवतात आणि खरोखर मदत करू इच्छितात!
+
+तुम्ही कोणत्या भाषांपासून सुरुवात करावी असे मी सुचवणार आहे? 😉 उच्च-स्तरीय भाषा म्हणजे प्रशिक्षण चाकांसारखे आहेत जे तुम्हाला कधीच काढून टाकायचे वाटत नाही कारण ते संपूर्ण अनुभव खूपच आनंददायक बनवतात!
+
+```mermaid
+flowchart TB
+    A["👤 Human Thought:<br/>'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level}
+    
+    B -->|High-Level| C["🌟 JavaScript/Python<br/>Easy to read and write"]
+    B -->|Low-Level| D["⚙️ Assembly/C<br/>Direct hardware control"]
+    
+    C --> E["📝 Write: fibonacci(10)"]
+    D --> F["📝 Write: mov r0,#00<br/>sub r0,r0,#01"]
+    
+    E --> G["🤖 Computer Understanding:<br/>Translator handles complexity"]
+    F --> G
+    
+    G --> H["💻 Same Result:<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
+    
+    style C fill:#e1f5fe
+    style D fill:#fff3e0
+    style H fill:#e8f5e8
+```
 
-```javascript
-// Step 1: Basic Fibonacci setup
-const fibonacciCount = 10;
-let current = 0;
-let next = 1;
+### उच्च-स्तरीय भाषा अधिक मैत्रीपूर्ण का आहेत हे मी तुम्हाला दाखवतो
 
-console.log('Fibonacci sequence:');
-```
+ठीक आहे, मी तुम्हाला काहीतरी दाखवणार आहे जे उच्च-स्तरीय भाषांवर प्रेम करण्याचे कारण परिपूर्णपणे दर्शवते, पण आधी – मला तुमच्याकडून काहीतरी वचन हवे आहे. जेव्हा तुम्ही पहिला कोड उदाहरण पाहता, तेव्हा घाबरू नका! ते घ
+- **टिप्पण्या**: उच्च-स्तरीय प्रोग्रामिंग भाषांमध्ये स्पष्ट स्पष्टीकरण देणाऱ्या टिप्पण्या लिहिण्याचा प्रोत्साहन दिला जातो, ज्यामुळे कोड स्वतःच दस्तऐवजीकरणासारखा वाटतो.
+- **रचना**: JavaScript चा तर्कशुद्ध प्रवाह मानवी विचारसरणीशी जुळतो, जसे समस्या चरण-दर-चरण सोडवणे.
+- **देखभाल**: वेगवेगळ्या गरजांसाठी JavaScript ची आवृत्ती अपडेट करणे सोपे आणि स्पष्ट आहे.
 
-**हा कोड काय करतो:**
-- **घोषणा** करा की आपल्याला किती Fibonacci संख्या तयार करायच्या आहेत
--
-✅ **फिबोनाची अनुक्रमाबद्दल**: हा अप्रतिम संख्यात्मक नमुना (जिथे प्रत्येक संख्या तिच्या आधीच्या दोन संख्यांच्या बेरीजइतकी असते: 0, 1, 1, 2, 3, 5, 8...) निसर्गात अक्षरशः *सर्वत्र* दिसतो! तुम्हाला तो सुर्यफुलांच्या वर्तुळांमध्ये, पाइनकोनच्या नमुन्यांमध्ये, नॉटिलस शंखाच्या वळणांमध्ये, आणि अगदी झाडांच्या फांद्या कशा वाढतात यामध्येही सापडेल. गणित आणि कोड कसे आपल्याला निसर्गाने सौंदर्य निर्माण करण्यासाठी वापरलेले नमुने समजून घेण्यास आणि पुन्हा तयार करण्यास मदत करू शकतात हे खरोखरच आश्चर्यकारक आहे!
+✅ **फिबोनाची अनुक्रमाबद्दल**: हा अप्रतिम संख्यात्मक नमुना (जिथे प्रत्येक संख्या मागील दोन संख्यांच्या बेरीजसारखी असते: 0, 1, 1, 2, 3, 5, 8...) अक्षरशः *निसर्गात सर्वत्र* दिसतो! तुम्हाला तो सूर्यफुलांच्या वर्तुळांमध्ये, पाइनकोनच्या नमुन्यांमध्ये, नॉटिलस शंखाच्या वक्रांमध्ये, आणि झाडांच्या फांद्या कशा वाढतात यामध्येही सापडेल. गणित आणि कोड कसे निसर्गाच्या सौंदर्य निर्माण करण्याच्या नमुन्यांना समजून घेण्यास आणि पुन्हा तयार करण्यास मदत करू शकतात हे खरोखर आश्चर्यकारक आहे!
 
 ## जादू घडवणारे मूलभूत घटक
 
-ठीक आहे, आता तुम्ही प्रोग्रामिंग भाषांचे क्रियाशील स्वरूप पाहिले आहे, चला प्रत्येक प्रोग्राम तयार करणाऱ्या मूलभूत घटकांचे विश्लेषण करूया. यांना तुमच्या आवडत्या रेसिपीमधील आवश्यक घटक समजून घ्या – एकदा तुम्हाला प्रत्येक घटक काय करतो हे समजले की, तुम्ही कोणत्याही भाषेत कोड वाचू आणि लिहू शकता!
+ठीक आहे, आता तुम्ही प्रोग्रामिंग भाषांचे प्रत्यक्षात कसे दिसते ते पाहिले आहे, चला प्रत्येक प्रोग्राममध्ये असलेल्या मूलभूत तुकड्यांचे विश्लेषण करूया. यांना तुमच्या आवडत्या रेसिपीच्या आवश्यक घटकांसारखे समजा – एकदा तुम्हाला प्रत्येकाचा उपयोग समजला की, तुम्ही कोणत्याही भाषेत कोड वाचू आणि लिहू शकता!
 
-हे प्रोग्रामिंगच्या व्याकरणासारखे आहे. शाळेत तुम्ही नाम, क्रियापद आणि वाक्य कसे तयार करायचे हे शिकले होते का? प्रोग्रामिंगचे स्वतःचे व्याकरण आहे आणि प्रामाणिकपणे सांगायचे तर, ते इंग्रजी व्याकरणापेक्षा खूपच अधिक तर्कसंगत आणि सोपे आहे! 😄
+हे प्रोग्रामिंगच्या व्याकरणासारखे आहे. शाळेत तुम्ही नाम, क्रियापद, आणि वाक्य कसे तयार करायचे ते शिकले होते का? प्रोग्रामिंगचे स्वतःचे व्याकरण आहे, आणि प्रामाणिकपणे सांगायचे तर, इंग्रजी व्याकरणापेक्षा ते अधिक तर्कसंगत आणि सोपे आहे! 😄
 
-### स्टेटमेंट्स: क्रमवार सूचना
+### स्टेटमेंट्स: चरण-दर-चरण सूचना
 
 चला **स्टेटमेंट्स** पासून सुरुवात करूया – हे तुमच्या संगणकाशी संवादातील वैयक्तिक वाक्यांसारखे आहेत. प्रत्येक स्टेटमेंट संगणकाला एक विशिष्ट गोष्ट करण्यास सांगते, जसे की दिशा देणे: "इथे डावीकडे वळा," "लाल दिव्यावर थांबा," "त्या जागेत पार्क करा."
 
-स्टेटमेंट्स मला आवडण्याचे कारण म्हणजे ते सहसा वाचण्यास सोपे असतात. हे पहा:
+स्टेटमेंट्सबद्दल मला आवडते ते म्हणजे ते सहसा वाचण्यास सोपे असतात. हे पहा:
 
 ```javascript
 // Basic statements that perform single actions
@@ -134,10 +204,10 @@ console.log("Hello, world!");
 const sum = 5 + 3;                         
 ```
 
-**या कोडचे कार्य:**
-- **घोषणा करा** एका स्थिर व्हेरिएबलची जे वापरकर्त्याचे नाव साठवते
-- **प्रदर्शित करा** एक अभिवादन संदेश कन्सोल आउटपुटवर
-- **गणना करा** आणि गणितीय ऑपरेशनचा परिणाम साठवा
+**या कोडने काय केले आहे:**
+- **घोषणा करा**: वापरकर्त्याचे नाव साठवण्यासाठी स्थिर व्हेरिएबल तयार करा
+- **प्रदर्शित करा**: कन्सोल आउटपुटवर अभिवादन संदेश
+- **गणना करा**: गणितीय ऑपरेशनचा परिणाम साठवा
 
 ```javascript
 // Statements that interact with web pages
@@ -145,19 +215,19 @@ document.title = "My Awesome Website";
 document.body.style.backgroundColor = "lightblue";
 ```
 
-**क्रमवार काय घडते:**
+**चरण-दर-चरण काय घडते:**
 - **वेबपेजचे शीर्षक बदला** जे ब्राउझर टॅबमध्ये दिसते
-- **पृष्ठाच्या संपूर्ण पार्श्वभूमीचा रंग बदला**
+- **पृष्ठाच्या पार्श्वभूमीचा रंग बदला**
 
 ### व्हेरिएबल्स: तुमच्या प्रोग्रामचे मेमरी सिस्टम
 
-ठीक आहे, **व्हेरिएबल्स** खरोखरच शिकवायला माझ्या आवडत्या संकल्पनांपैकी एक आहेत कारण ते तुम्ही दररोज वापरत असलेल्या गोष्टींसारखे आहेत!
+ठीक आहे, **व्हेरिएबल्स** शिकवणे माझ्या आवडत्या संकल्पनांपैकी एक आहे कारण ते तुम्ही दररोज वापरत असलेल्या गोष्टींसारखे आहेत!
 
-तुमच्या फोनच्या संपर्क यादीबद्दल विचार करा. तुम्ही प्रत्येकाचा फोन नंबर लक्षात ठेवत नाही – त्याऐवजी, तुम्ही "आई," "सर्वात चांगला मित्र," किंवा "पिझ्झा प्लेस जो रात्री 2 वाजेपर्यंत डिलिव्हरी करतो" असे नाव सेव्ह करता आणि तुमचा फोन खरे नंबर लक्षात ठेवतो. व्हेरिएबल्स अगदी तसेच काम करतात! ते लेबल असलेल्या कंटेनरसारखे आहेत जिथे तुमचा प्रोग्राम माहिती साठवू शकतो आणि नंतर अशा नावाने ती माहिती पुन्हा मिळवू शकतो जी खरोखर अर्थपूर्ण आहे.
+तुमच्या फोनच्या संपर्क यादीबद्दल विचार करा. तुम्ही प्रत्येकाचा फोन नंबर लक्षात ठेवत नाही – त्याऐवजी, तुम्ही "आई," "सर्वात चांगला मित्र," किंवा "पिझ्झा प्लेस जो रात्री २ वाजेपर्यंत डिलिव्हरी करतो" असे नाव सेव्ह करता आणि तुमचा फोन प्रत्यक्ष नंबर लक्षात ठेवतो. व्हेरिएबल्स अगदी तसेच काम करतात! ते लेबल असलेल्या कंटेनरसारखे आहेत जिथे तुमचा प्रोग्राम माहिती साठवू शकतो आणि नंतर अर्थपूर्ण नाव वापरून ती परत मिळवू शकतो.
 
-यात खूप छान गोष्ट आहे: तुमचा प्रोग्राम चालू असताना व्हेरिएबल्स बदलू शकतात (म्हणूनच त्यांना "व्हेरिएबल" म्हणतात – पाहिलं का काय केलं त्यांनी?). जसे तुम्ही त्या पिझ्झा प्लेसचा संपर्क अपडेट करू शकता जेव्हा तुम्हाला त्यापेक्षा चांगली जागा सापडते, तसेच तुमचा प्रोग्राम नवीन माहिती शिकतो किंवा परिस्थिती बदलते तेव्हा व्हेरिएबल्स अपडेट होऊ शकतात!
+यात खरोखर छान गोष्ट आहे: प्रोग्राम चालू असताना व्हेरिएबल्स बदलू शकतात (म्हणूनच त्यांना "व्हेरिएबल्स" म्हणतात – पाहा त्यांनी काय केले!). जसे तुम्ही त्या पिझ्झा प्लेसचा संपर्क अपडेट करू शकता जेव्हा तुम्हाला त्यापेक्षा चांगले ठिकाण सापडते, तसेच प्रोग्राम नवीन माहिती शिकत असताना किंवा परिस्थिती बदलत असताना व्हेरिएबल्स अपडेट होऊ शकतात!
 
-मला तुम्हाला हे किती सोपे असू शकते हे दाखवू द्या:
+मला तुम्हाला हे किती सोपे असते ते दाखवू द्या:
 
 ```javascript
 // Step 1: Creating basic variables
@@ -167,11 +237,11 @@ let temperature = 75;
 let isRaining = false;                      
 ```
 
-**या संकल्पना समजून घेणे:**
-- **साठवा** स्थिर मूल्ये `const` व्हेरिएबल्समध्ये (जसे साइटचे नाव)
-- **वापरा** `let` अशा मूल्यांसाठी जे तुमच्या प्रोग्राममध्ये बदलू शकतात
-- **असाइन करा** वेगवेगळ्या डेटा प्रकार: स्ट्रिंग्स (टेक्स्ट), नंबर आणि बूलियन (सत्य/असत्य)
-- **निवडा** वर्णनात्मक नावे जी प्रत्येक व्हेरिएबलमध्ये काय आहे ते स्पष्ट करतात
+**या संकल्पना समजून घ्या:**
+- **स्थिर मूल्ये साठवा** `const` व्हेरिएबल्समध्ये (जसे साइटचे नाव)
+- **`let` वापरा** जेव्हा मूल्ये प्रोग्राममध्ये बदलू शकतात
+- **वेगवेगळ्या डेटा प्रकारांना असाइन करा**: स्ट्रिंग्स (मजकूर), संख्या, आणि बूलियन (सत्य/असत्य)
+- **वर्णनात्मक नावे निवडा** जी प्रत्येक व्हेरिएबलमध्ये काय आहे ते स्पष्ट करतात
 
 ```javascript
 // Step 2: Working with objects to group related data
@@ -182,10 +252,10 @@ const weatherData = {
 };
 ```
 
-**वरील कोडमध्ये आम्ही:**
-- **तयार केले** एक ऑब्जेक्ट जो संबंधित हवामान माहिती एकत्रित करतो
-- **संगठित केले** एकाच व्हेरिएबल नावाखाली अनेक डेटा तुकडे
-- **वापरले** की-वॅल्यू जोड्या प्रत्येक माहितीचा तुकडा स्पष्टपणे लेबल करण्यासाठी
+**वरीलमध्ये आम्ही:**
+- **ऑब्जेक्ट तयार केला** संबंधित हवामान माहिती एकत्रित करण्यासाठी
+- **एकाच व्हेरिएबल नावाखाली** अनेक डेटा तुकडे व्यवस्थित केले
+- **की-वॅल्यू जोड्या वापरल्या** प्रत्येक माहितीचा तुकडा स्पष्टपणे लेबल करण्यासाठी
 
 ```javascript
 // Step 3: Using and updating variables
@@ -198,10 +268,10 @@ temperature = 68;
 ```
 
 **प्रत्येक भाग समजून घेऊया:**
-- **प्रदर्शित करा** माहिती टेम्पलेट लिटरल्स वापरून `${}` सिंटॅक्ससह
-- **प्रवेश करा** ऑब्जेक्ट प्रॉपर्टीज डॉट नोटेशन (`weatherData.windSpeed`) वापरून
-- **अपडेट करा** `let` सह घोषित केलेले व्हेरिएबल्स बदलत्या परिस्थितीचे प्रतिबिंबित करण्यासाठी
-- **संयोजन करा** अनेक व्हेरिएबल्स अर्थपूर्ण संदेश तयार करण्यासाठी
+- **माहिती प्रदर्शित करा** टेम्पलेट लिटरल्स वापरून `${}` सिंटॅक्ससह
+- **ऑब्जेक्ट प्रॉपर्टीज ऍक्सेस करा** डॉट नोटेशन (`weatherData.windSpeed`) वापरून
+- **`let` ने घोषित केलेल्या व्हेरिएबल्स अपडेट करा** बदलत्या परिस्थितीचे प्रतिबिंबित करण्यासाठी
+- **अनेक व्हेरिएबल्स एकत्र करा** अर्थपूर्ण संदेश तयार करण्यासाठी
 
 ```javascript
 // Step 4: Modern destructuring for cleaner code
@@ -210,19 +280,19 @@ console.log(`${location} humidity: ${humidity}%`);
 ```
 
 **तुम्हाला काय माहित असणे आवश्यक आहे:**
-- **काढा** ऑब्जेक्ट्समधून विशिष्ट प्रॉपर्टीज डेस्ट्रक्चरिंग असाइनमेंट वापरून
-- **तयार करा** नवीन व्हेरिएबल्स जे ऑब्जेक्ट कीजसारखेच नाव असतात
-- **सोपे करा** कोड पुनरावृत्ती डॉट नोटेशन टाळून
+- **ऑब्जेक्टमधून विशिष्ट प्रॉपर्टीज काढा** डीस्ट्रक्चरिंग असाइनमेंट वापरून
+- **नवीन व्हेरिएबल्स आपोआप तयार करा** ऑब्जेक्ट कीसारख्या नावांसह
+- **कोड सोपा करा** पुनरावृत्ती डॉट नोटेशन टाळून
 
 ### कंट्रोल फ्लो: तुमच्या प्रोग्रामला विचार करायला शिकवा
 
-ठीक आहे, इथे प्रोग्रामिंग खरोखरच आश्चर्यकारक होते! **कंट्रोल फ्लो** म्हणजे तुमच्या प्रोग्रामला हुशार निर्णय कसे घ्यायचे ते शिकवणे, अगदी तुम्ही दररोज विचार न करता करत असलेल्या गोष्टींसारखे.
+ठीक आहे, इथे प्रोग्रामिंग खरोखर आश्चर्यकारक होते! **कंट्रोल फ्लो** म्हणजे तुमच्या प्रोग्रामला हुशार निर्णय घेण्यास शिकवणे, अगदी तुम्ही दररोज विचार न करता करत असलेल्या गोष्टींसारखे.
 
-कल्पना करा: आज सकाळी तुम्ही कदाचित असे काहीतरी केले असेल "जर पाऊस पडत असेल तर छत्री घेईन. जर थंडी असेल तर जॅकेट घालीन. जर उशीर होत असेल तर नाश्ता वगळून वाटेत कॉफी घेईन." तुमचा मेंदू नैसर्गिकरित्या हे if-then लॉजिक दररोज डझनभर वेळा अनुसरण करतो!
+कल्पना करा: आज सकाळी तुम्ही कदाचित असे काहीतरी केले असेल "जर पाऊस पडत असेल तर छत्री घेईन. जर थंडी असेल तर जॅकेट घालीन. जर उशीर होत असेल तर नाश्ता टाळीन आणि वाटेत कॉफी घेईन." तुमचा मेंदू नैसर्गिकरित्या ही if-then लॉजिक दररोज डझनभर वेळा अनुसरतो!
 
-हेच प्रोग्राम्सना हुशार आणि जिवंत वाटण्यास मदत करते, फक्त काही कंटाळवाण्या, अंदाजानुसार स्क्रिप्टचे अनुसरण करण्याऐवजी. ते प्रत्यक्ष परिस्थिती पाहू शकतात, काय घडत आहे याचे मूल्यांकन करू शकतात आणि योग्य प्रतिसाद देऊ शकतात. हे तुमच्या प्रोग्रामला एक मेंदू देण्यासारखे आहे जो परिस्थितीनुसार अनुकूल होतो आणि निवड करतो!
+यामुळे प्रोग्राम्स हुशार आणि जिवंत वाटतात, फक्त काही कंटाळवाण्या, अंदाजानुसार स्क्रिप्टचे अनुसरण करण्याऐवजी. ते प्रत्यक्षात परिस्थिती पाहू शकतात, काय घडत आहे ते मूल्यांकन करू शकतात, आणि योग्य प्रतिसाद देऊ शकतात. हे तुमच्या प्रोग्रामला अनुकूल होण्यास आणि निवडी करण्यास मेंदू देण्यासारखे आहे!
 
-हे किती सुंदरपणे कार्य करते ते पाहायचे आहे का? मी तुम्हाला दाखवतो:
+हे किती सुंदरपणे कार्य करते ते पाहायचे आहे का? मला तुम्हाला दाखवू द्या:
 
 ```javascript
 // Step 1: Basic conditional logic
@@ -236,11 +306,11 @@ if (userAge >= 18) {
 }
 ```
 
-**या कोडचे कार्य:**
-- **तपासा** वापरकर्त्याचे वय मतदानाच्या अटींना पूर्ण करते का
-- **अंमलात आणा** वेगवेगळ्या परिस्थितीनुसार कोड ब्लॉक्स
-- **गणना करा** आणि मतदानासाठी पात्र होण्यासाठी किती वेळ लागेल हे प्रदर्शित करा जर वय 18 पेक्षा कमी असेल
-- **प्रदान करा** प्रत्येक परिस्थितीसाठी विशिष्ट, उपयुक्त अभिप्राय
+**या कोडने काय केले आहे:**
+- **तपासा** की वापरकर्त्याचे वय मतदानाच्या अटींना पूर्ण करते का
+- **वेगवेगळे कोड ब्लॉक्स चालवा** अटींच्या निकालावर आधारित
+- **गणना करा** आणि मतदानाच्या पात्रतेसाठी किती वेळ बाकी आहे ते प्रदर्शित करा (जर वय १८ पेक्षा कमी असेल)
+- **प्रत्येक परिस्थितीसाठी विशिष्ट, उपयुक्त अभिप्राय द्या**
 
 ```javascript
 // Step 2: Multiple conditions with logical operators
@@ -256,11 +326,11 @@ if (userAge >= 18 && hasPermission) {
 }
 ```
 
-**इथे काय घडते ते विश्लेषण करा:**
-- **संयोजन करा** अनेक अटी `&&` (आणि) ऑपरेटर वापरून
-- **निर्माण करा** अटींची श्रेणी `else if` वापरून अनेक परिस्थितींसाठी
-- **हँडल करा** सर्व शक्य परिस्थिती अंतिम `else` स्टेटमेंटसह
-- **प्रदान करा** प्रत्येक वेगळ्या परिस्थितीसाठी स्पष्ट, कृतीशील अभिप्राय
+**इथे काय घडते ते समजून घ्या:**
+- **अनेक अटी एकत्र करा** `&&` (आणि) ऑपरेटर वापरून
+- **अटींची श्रेणी तयार करा** `else if` वापरून अनेक परिस्थितींसाठी
+- **सर्व शक्य परिस्थिती हाताळा** अंतिम `else` स्टेटमेंटसह
+- **प्रत्येक वेगळ्या परिस्थितीसाठी स्पष्ट, कृतीक्षम अभिप्राय द्या**
 
 ```javascript
 // Step 3: Concise conditional with ternary operator
@@ -269,9 +339,9 @@ console.log(`Status: ${votingStatus}`);
 ```
 
 **तुम्हाला लक्षात ठेवायचे आहे:**
-- **वापरा** टर्नरी ऑपरेटर (`? :`) सोप्या दोन पर्यायांच्या अटींसाठी
-- **लिहा** अट प्रथम, त्यानंतर `?`, मग सत्य परिणाम, मग `:`, मग असत्य परिणाम
-- **अर्ज करा** हा पॅटर्न जेव्हा तुम्हाला अटींवर आधारित मूल्ये असाइन करायची असतात
+- **टर्नरी ऑपरेटर (`? :`) वापरा** सोप्या दोन-पर्याय अटींसाठी
+- **अटी प्रथम लिहा**, त्यानंतर `?`, मग सत्य परिणाम, मग `:`, मग असत्य परिणाम
+- **हा नमुना लागू करा** जेव्हा तुम्हाला अटींवर आधारित मूल्ये असाइन करायची असतात
 
 ```javascript
 // Step 4: Handling multiple specific cases
@@ -295,97 +365,134 @@ switch (dayOfWeek) {
 ```
 
 **हा कोड खालील गोष्टी साध्य करतो:**
-- **जुळवा** व्हेरिएबल मूल्य अनेक विशिष्ट प्रकरणांशी
-- **समूह करा** समान प्रकरणे एकत्र (आठवड्याचे दिवस विरुद्ध आठवड्याचे शेवटचे दिवस)
-- **अंमलात आणा** योग्य कोड ब्लॉक जेव्हा जुळणारे प्रकरण सापडते
-- **समाविष्ट करा** `default` प्रकरण अनपेक्षित मूल्ये हाताळण्यासाठी
-- **वापरा** `break` स्टेटमेंट्स पुढील प्रकरणाकडे जाण्यापासून कोड थांबवण्यासाठी
-
-> 💡 **वास्तविक जगातील उपमा**: कंट्रोल फ्लोला जगातील सर्वात संयमी GPS समजून घ्या जो तुम्हाला दिशा देतो. तो म्हणू शकतो "जर मेन स्ट्रीटवर ट्रॅफिक असेल तर हायवे घ्या. जर हायवेवर बांधकाम चालू असेल तर सुंदर मार्गाने जा." प्रोग्राम्स अगदी याच प्रकारच्या सशर्त लॉजिकचा वापर करून वेगवेगळ्या परिस्थितींना हुशारीने प्रतिसाद देतात आणि नेहमीच वापरकर्त्यांना सर्वोत्तम अनुभव देतात.
-
-✅ **पुढे काय येणार आहे**: आम्ही या संकल्पनांमध्ये अधिक खोलवर जाण्यासाठी एक अद्भुत प्रवास सुरू ठेवणार आहोत! सध्या, तुमच्यातील सर्व अद्भुत शक्यतांबद्दल उत्साही वाटण्यावर लक्ष केंद्रित करा. विशिष्ट कौशल्ये आणि तंत्रे नैसर्गिकरित्या सराव करताना तुमच्यासोबत राहतील – मी वचन देतो की हे अपेक्षेपेक्षा खूप मजेदार होणार आहे!
+- **व्हेरिएबल मूल्य अनेक विशिष्ट प्रकरणांशी जुळवा**
+- **समान प्रकरणे एकत्र करा** (सप्ताहाचे दिवस विरुद्ध शनिवार व रविवार)
+- **जुळणारे कोड ब्लॉक चालवा** जेव्हा जुळणारे मूल्य सापडते
+- **अप्रत्याशित मूल्ये हाताळण्यासाठी `default` केस समाविष्ट करा**
+- **`break` स्टेटमेंट्स वापरा** पुढील प्रकरणाकडे जाणे टाळण्यासाठी
+
+> 💡 **वास्तविक जीवनातील उपमा**: कंट्रोल फ्लोला जगातील सर्वात संयमी जीपीएससारखे समजा जे तुम्हाला दिशा देत आहे. ते म्हणू शकते "जर मेन स्ट्रीटवर ट्रॅफिक असेल तर हायवे घ्या. जर हायवेवर बांधकाम चालू असेल तर सुंदर मार्गाने जा." प्रोग्राम्स अचूकपणे याच प्रकारच्या सशर्त लॉजिकचा वापर करतात, वेगवेगळ्या परिस्थितींना हुशारीने प्रतिसाद देण्यासाठी आणि नेहमी वापरकर्त्यांना सर्वोत्तम अनुभव देण्यासाठी.
+
+### 🎯 **संकल्पना तपासणी: मूलभूत घटकांची पारंगतता**
+
+**चला पाहूया की तुम्ही मूलभूत गोष्टींमध्ये कसे आहात:**
+- तुम्ही तुमच्या स्वतःच्या शब्दांत व्हेरिएबल आणि स्टेटमेंटमधील फरक स्पष्ट करू शकता का?
+- तुम्ही if-then निर्णय वापरण्यासाठी वास्तविक जीवनातील परिस्थिती विचार करू शकता का (जसे की आमचे मतदानाचे उदाहरण)?
+- प्रोग्रामिंग लॉजिकबद्दल तुम्हाला आश्चर्य वाटलेली एक गोष्ट कोणती आहे?
+
+**जलद आत्मविश्वास वाढवणारा उपाय:**
+```mermaid
+flowchart LR
+    A["📝 Statements<br/>(Instructions)"] --> B["📦 Variables<br/>(Storage)"] --> C["🔀 Control Flow<br/>(Decisions)"] --> D["🎉 Working Program!"]
+    
+    style A fill:#ffeb3b
+    style B fill:#4caf50
+    style C fill:#2196f3
+    style D fill:#ff4081
+```
 
+✅ **पुढे काय येत आहे**: आम्ही या संकल्पनांमध्ये अधिक खोलवर जाऊन एक अविश्वसनीय प्रवास सुरू ठेवणार आहोत! सध्या, फक्त तुमच्यातील उत्साहावर लक्ष केंद्रित करा आणि पुढे येणाऱ्या सर्व अद्भुत शक्यतांबद्दल विचार करा. विशिष्ट कौशल्ये आणि तंत्रे सराव करताना नैसर्गिकरित्या तुमच्या लक्षात राहतील – मी वचन देतो की हे अपेक्षेपेक्षा खूप मजेदार असेल!
 
 ## व्यापाराचे साधन
 
-ठीक आहे, हे खरोखरच रोमांचक आहे! 🚀 आपण अशा अविश्वसनीय साधनांबद्दल बोलणार आहोत जे तुम्हाला डिजिटल स्पेसशिपची चावी मिळाल्यासारखे वाटतील.
-
-तुम्हाला माहित आहे का की एखाद्या शेफकडे त्या परिपूर्ण संतुलित चाकू असतात जे त्यांच्या हाताचा विस्तार वाटतात? किंवा एखाद्या संगीतकाराकडे ती एक गिटार असते जी त्यांना स्पर्श करताच गाते? बरं, डेव्हलपर्सकडे आमच्या स्वतःच्या जादुई साधनांचा प्रकार आहे, आणि हे तुम्हाला पूर्णपणे आश्चर्यचकित करेल – त्यापैकी बहुतेक पूर्णपणे मोफत आहेत!
-
-मी तुम्हाला हे सांगण्यासाठी खूप उत्साही आहे कारण त्यांनी सॉफ्टवेअर तयार करण्याच्या पद्धती पूर्णपणे बदलल्या आहेत. आम्ही AI-संचालित कोडिंग सहाय्यकांबद्दल बोलत आहोत जे तुमचा कोड लिहिण्यास मदत करू शकतात (मी खोटे बोलत नाही!), क्लाउड वातावरण जिथे तुम्ही अक्षरशः कुठेही Wi-Fi सह संपूर्ण अनुप्रयोग तयार करू शकता, आणि डिबगिंग टूल्स इतके प्रगत आहेत की ते तुमच्या प्रोग्रामसाठी एक्स-रे व्हिजनसारखे आहेत.
-
-आणि अजूनही मला रोमांचित करणारा भाग म्हणजे: हे "नवशिक्या साधने" नाहीत जे तुम्ही पुढे जाल. हे Google, Netflix आणि तुमच्या आवडत्या इंडी अ‍ॅप स्टुडिओमधील डेव्हलपर्स सध्या वापरत असलेल्या व्यावसायिक-ग्रेड साधने आहेत. तुम्हाला त्यांचा वापर करताना खूप प्रोफेशनल वाटेल!
-
+ठीक आहे, आता मी खूप उत्साहित आहे, मी स्वतःला थांबवू शकत नाही! 🚀 आपण अशा अविश्वसनीय साधनांबद्दल बोलणार आहोत ज्यामुळे तुम्हाला डिजिटल स्पेसशिपची चावी मिळाल्यासारखे वाटेल.
+
+तुम्हाला माहित आहे का की शेफकडे त्या परिपूर्ण संतुलित सुरी असतात ज्या त्यांच्या हातांचा विस्तार वाटतात? किंवा संगीतकाराकडे ती एक गिटार असते जी ते स्पर्श करताच गाते? बरं, विकसकांकडे आमच्या स्वतःच्या जादुई साधनांचा एक प्रकार आहे, आणि येथे काय आहे जे तुमचे मन पूर्णपणे उडवून देईल – त्यापैकी बहुतेक पूर्णपणे मोफत आहेत!
+
+मी तुम्हाला हे सांगण्यासाठी खूप उत्सुक आहे कारण त्यांनी सॉफ्टवेअर कसे तयार करायचे यामध्ये पूर्णपणे क्रांती केली आहे. आम्ही AI-संचालित कोडिंग सहाय्यकांबद्दल बोलत आहोत जे तुमचा कोड लिहिण्यास मदत करू शकतात (मी खोटे बोलत नाही!), क्लाउड वातावरण जिथे तुम्ही अक्षरशः कुठूनही Wi-Fi सह संपूर्ण अनुप्रयोग तयार करू शकता, आणि डिबगिंग टूल्स इतके परिष्कृत आहेत की ते तुमच्या प्रोग्रामसाठी एक्स-रे व्हिजनसारखे आहेत.
+
+आणि येथे एक भाग आहे जो अजूनही मला रोमांचित करतो: हे "नवशिक्या साधने" नाहीत जे तुम्ही वापरणे थांबवाल. Google, Netflix, आणि तुम्हाला आवडणाऱ्या इंडी अॅप स्टुडिओमध्ये विकसक सध्या वापरत आहेत तीच व्यावसायिक-ग्रेड साधने आहेत. तुम्हाला ती वापरताना खूप प्रोफेशनल वाटेल!
+
+```mermaid
+graph TD
+    A["💡 Your Idea"] --> B["⌨️ Code Editor<br/>(VS Code)"] 
+    B --> C["🌐 Browser DevTools<br/>(Testing & Debugging)"]
+    C --> D["⚡ Command Line<br/>(Automation & Tools)"]
+    D --> E["📚 Documentation<br/>(Learning & Reference)"]
+    E --> F["🚀 Amazing Web App!"]
+    
+    B -.-> G["🤖 AI Assistant<br/>(GitHub Copilot)"]
+    C -.-> H["📱 Device Testing<br/>(Responsive Design)"]
+    D -.-> I["📦 Package Managers<br/>(npm, yarn)"]
+    E -.-> J["👥 Community<br/>(Stack Overflow)"]
+    
+    style A fill:#fff59d
+    style F fill:#c8e6c9
+    style G fill:#e1f5fe
+    style H fill:#f3e5f5
+    style I fill:#ffccbc
+    style J fill:#e8eaf6
+```
 
 ### कोड एडिटर्स आणि IDEs: तुमचे नवीन डिजिटल मित्र
 
-चला कोड एडिटर्सबद्दल बोलूया – हे तुमचे नवीन आवडते ठिकाण बनणार आहेत! त्यांना तुमचे वैयक्तिक कोडिंग अभयारण्य समजा जिथे तुम्ही तुमच्या डिजिटल निर्मिती तयार करण्यासाठी आणि परिपूर्ण करण्यासाठी तुमचा जास्त वेळ घालवाल.
+चला कोड एडिटर्सबद्दल बोलूया – हे तुमचे नवीन आवडते ठिकाण बनणार आहेत! त्यांना तुमचे वैयक्तिक कोडिंग अभयारण्य समजा जिथे तुम्ही तुमची डिजिटल निर्मिती तयार करण्यात आणि परिपूर्ण करण्यात तुमचा जास्त वेळ घालवाल.
 
-पण आधुनिक एडिटर्सबद्दल जे जादुई आहे ते म्हणजे: ते फक्त फॅन्सी टेक्स्ट एडिटर्स नाहीत. ते जसे तुमच्यासोबत 24/7 बसलेले सर्वात हुशार, सहायक कोडिंग मार्गदर्शक आहेत. ते तुमच्या टायपोला तुम्हाला कळण्याआधीच पकडतात, सुधारणा सुचवतात ज्यामुळे तुम्हाला हुशार वाटते, तुम्हाला प्रत्येक कोडचा भाग काय करतो हे समजून घेण्यास मदत करतात, आणि त्यापैकी काही तुमचे विचार पूर्ण करण्यासाठी तुमच्या विचारांचे अंदाज लावू शकतात!
+पण आधुनिक एडिटर्सबद्दल जे खरोखर जादुई आहे ते म्हणजे ते फक्त फॅन्सी टेक्स्ट एडिटर्स नाहीत. ते तुमच्याबरोबर २४/७ बसलेले सर्वात हुशार, सहायक कोडिंग मार्गदर्शक असतात. ते तुमच्या टायपोला तुम्हाला कळण्याआधीच पकडतात, सुधारणा सुचवतात ज्या तुम्हाला हुशार वाटतात, तुम्हाला प्रत्येक कोडचा तुकडा काय करतो ते समजून घेण्यास मदत करतात, आणि त्यापैकी काही तुमच्या विचारांवर अंदाज लावू शकतात आणि तुमचे विचार पूर्ण करण्याची ऑफर देतात!
 
-मी प्रथम ऑटो-कम्प्लिशन शोधले तेव्हा मला अक्षरशः असे वाटले की मी भविष्यात राहत आहे. तुम्ही काहीतरी टाइप करायला सुरुवात करता, आणि तुमचा एडिटर म्हणतो, "अरे, तुम्हाला हवे असलेले कार्य विचारात होते का जे तुम्हाला हवे आहे तेच करते?" हे तुमच्या कोडिंग मित्रासारखे मन वाचणारे आहे!
+मी पहिल्यांदा ऑटो-कम्प्लिशन शोधले तेव्हा मला अक्षरशः भविष्यामध्ये जगत असल्यासारखे वाटले. तुम्ही काहीतरी टाइप करायला सुरुवात करता, आणि तुमचा एडिटर म्हणतो, "अरे, तुम्ही नेमके काय हवे आहे ते करणाऱ्या फंक्शनबद्दल विचार करत होता का?" हे तुमच्या कोडिंग मित्रासारखे मन वाचणारे आहे!
 
 **हे एडिटर्स इतके अविश्वसनीय का आहेत?**
 
 आधुनिक कोड एडिटर्स उत्पादकता वाढवण्यासाठी प्रभावी वैशिष्ट्यांची श्रेणी देतात:
 
 | वैशिष्ट्य | काय करते | कसे मदत करते |
-|-----------|-----------|---------------|
+|---------|--------------|--------------|
 | **सिंटॅक्स हायलाइटिंग** | तुमच्या कोडचे वेगवेगळे भाग रंगीत करते | कोड वाचणे सोपे करते आणि चुका शोधणे सोपे करते |
 | **ऑटो-कम्प्लिशन** | टाइप करताना कोड सुचवते | कोडिंग वेगवान करते आणि टायपो कमी करते |
-| **डिबगिंग टूल्स** | तुम्हाला चुका शोधण्यात आणि दुरुस्त करण्यात मदत करते | तासांचा त्रास वाचवते |
+| **डिबगिंग टूल्स** | चुका शोधण्यात आणि दुरुस्त करण्यात मदत करते | तासभर त्रुटी शोधण्याचा वेळ वाचवते |
 | **एक्सटेंशन्स** | विशेष वैशिष्ट्ये जोडा | कोणत्याही तंत्रज्ञानासाठी तुमचा एडिटर सानुकूलित करा |
 | **AI सहाय्यक** | कोड आणि स्पष्टीकरण सुचवते | शिक्षण आणि उत्पादकता वेगवान करते |
 
-> 🎥 **व्हिडिओ संसाधन**: ही साधने क्रियेत पाहायची आहेत का? [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) येथे एक व्यापक विहंगावलोकन पहा.
+> 🎥 **व्हिडिओ संसाधन**: ही साधने कशी कार्य करतात ते पाहायचे आहे? [टूल्स ऑफ द ट्रेड व्हिडिओ](https://youtube.com/watch?v=69WJeXGBdxg) comprehensive overview साठी पहा.
 
 #### वेब डेव्हलपमेंटसाठी शिफारस केलेले एडिटर्स
 
 **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (फ्री)
-- वेब डेव्हलपर्समध्ये सर्वात लोकप्रिय
+- वेब डेव्हलपर्समध्ये सर्वाधिक लोकप्रिय
 - उत्कृष्ट एक्सटेंशन इकोसिस्टम
-- अंगभूत टर्मिनल आणि Git इंटिग्रेशन
+- बिल्ट-इन टर्मिनल आणि Git इंटिग्रेशन
 - **मस्ट-हॅव एक्सटेंशन्स**:
-  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-संचालित कोड सुचवणे
+  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-संचालित कोड सुचवणारे
   - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - रिअल-टाइम सहयोग
-  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - स्वयंचलित कोड फॉरमॅटिंग
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - तुमच्या कोडमधील टायपो पकडा
+  - [Prettier](https://marketplace.visualstudio.com/items?itemName=es
+पहिल्यांदा मला कोणीतरी ब्राउझर DevTools दाखवले, तेव्हा मी तीन तास फक्त क्लिक करत बसलो आणि म्हणत होतो, "थांबा, हे सुद्धा करू शकते?!" तुम्ही प्रत्यक्षात कोणतीही वेबसाइट रिअल-टाइममध्ये संपादित करू शकता, प्रत्येक गोष्ट किती वेगाने लोड होते ते पाहू शकता, तुमची साइट वेगवेगळ्या डिव्हाइसवर कशी दिसते ते तपासू शकता आणि अगदी प्रोफेशनलप्रमाणे JavaScript डिबग करू शकता. हे पूर्णपणे आश्चर्यकारक आहे!
 
-**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (पेड, विद्यार्थ्यांसाठी मोफत)
-- प्रगत डिबगिंग आणि टेस्टिंग टूल्स
-- बुद्धिमान कोड कम्प्लिशन
-- अंगभूत व्हर्जन कंट्रोल
+**ब्राउझर का तुमचे गुप्त शस्त्र आहेत:**
 
-**क्लाउड-आधारित IDEs** (वेगवेगळ्या किंमती)
-- [GitHub Codespaces](https://github.com/features/codespaces) - तुमच्या ब्राउझरमध्ये पूर्ण VS Code
-- [Replit](https://replit.com/) - शिकण्यासाठी आणि कोड शेअर करण्यासाठी उत्तम
-- [StackBlitz](https://stackblitz.com/) - त्वरित, फुल-स्टॅक वेब डेव्हलपमेंट
+वेबसाइट किंवा वेब अॅप्लिकेशन तयार करताना, तुम्हाला ते वास्तविक जगात कसे दिसते आणि वागते ते पाहणे आवश्यक आहे. ब्राउझर तुमचे काम फक्त दाखवत नाहीत तर कार्यक्षमता, ऍक्सेसिबिलिटी आणि संभाव्य समस्यांबद्दल तपशीलवार फीडबॅक देखील देतात.
 
-> 💡 **सुरुवातीचा सल्ला**: Visual Studio Code सह सुरुवात करा – ते मोफत आहे, उद्योगात मोठ्या प्रमाणावर
-| **कन्सोल** | त्रुटी संदेश पहा आणि जावास्क्रिप्टची चाचणी करा | समस्या डिबग करा आणि कोडसह प्रयोग करा |
+#### ब्राउझर डेव्हलपर टूल्स (DevTools)
+
+आधुनिक ब्राउझरमध्ये व्यापक विकास साधनांचा समावेश आहे:
+
+| टूल श्रेणी | काय करते | उदाहरण वापर केस |
+|------------|-----------|------------------|
+| **एलिमेंट इन्स्पेक्टर** | HTML/CSS रिअल-टाइममध्ये पाहा आणि संपादित करा | स्टाइलिंग समायोजित करा आणि त्वरित परिणाम पहा |
+| **कन्सोल** | एरर मेसेजेस पाहा आणि JavaScript तपासा | समस्या डिबग करा आणि कोडवर प्रयोग करा |
 | **नेटवर्क मॉनिटर** | संसाधने कशी लोड होतात ते ट्रॅक करा | कार्यक्षमता आणि लोडिंग वेळा ऑप्टिमाइझ करा |
 | **ऍक्सेसिबिलिटी चेकर** | समावेशक डिझाइनसाठी चाचणी करा | तुमची साइट सर्व वापरकर्त्यांसाठी कार्य करते याची खात्री करा |
-| **डिव्हाइस सिम्युलेटर** | वेगवेगळ्या स्क्रीन आकारांवर प्रिव्ह्यू करा | अनेक उपकरणांशिवाय प्रतिसादात्मक डिझाइनची चाचणी करा |
+| **डिव्हाइस सिम्युलेटर** | वेगवेगळ्या स्क्रीन साइजवर प्रीव्ह्यू करा | अनेक डिव्हाइसशिवाय रिस्पॉन्सिव्ह डिझाइन तपासा |
 
 #### विकासासाठी शिफारस केलेले ब्राउझर
 
 - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - विस्तृत दस्तऐवजीकरणासह उद्योग-मानक DevTools
 - **[Firefox](https://developer.mozilla.org/docs/Tools)** - उत्कृष्ट CSS ग्रिड आणि ऍक्सेसिबिलिटी टूल्स
-- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - क्रोमियमवर आधारित, मायक्रोसॉफ्टच्या विकासक संसाधनांसह
+- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium वर आधारित Microsoft चे डेव्हलपर संसाधने
 
-> ⚠️ **महत्त्वाची चाचणी टिप**: तुमच्या वेबसाइट्सची नेहमी अनेक ब्राउझरमध्ये चाचणी करा! जे Chrome मध्ये उत्तम प्रकारे कार्य करते ते Safari किंवा Firefox मध्ये वेगळे दिसू शकते. व्यावसायिक विकासक सर्व प्रमुख ब्राउझरमध्ये चाचणी घेतात जेणेकरून वापरकर्त्याचा अनुभव सुसंगत राहील.
+> ⚠️ **महत्त्वाची चाचणी टिप**: तुमच्या वेबसाइट्सची अनेक ब्राउझरमध्ये नेहमीच चाचणी करा! Chrome मध्ये उत्तम प्रकारे कार्य करणारे Safari किंवा Firefox मध्ये वेगळे दिसू शकते. व्यावसायिक डेव्हलपर्स सर्व प्रमुख ब्राउझरमध्ये चाचणी घेतात जेणेकरून वापरकर्त्यांचा अनुभव सुसंगत राहील.
 
-### कमांड लाइन टूल्स: विकासक सुपरपॉवर्ससाठी तुमचा प्रवेशद्वार
+### कमांड लाइन टूल्स: डेव्हलपर सुपरपॉवर्ससाठी तुमचा प्रवेशद्वार
 
-ठीक आहे, चला कमांड लाइनबद्दल प्रामाणिकपणे बोलूया, कारण मी तुम्हाला हे सांगू इच्छितो की हे ऐकणे खूप महत्त्वाचे आहे. जेव्हा मी प्रथम ते पाहिले – फक्त एक भयानक काळा स्क्रीन आणि ब्लिंकिंग टेक्स्ट – मला अक्षरशः वाटले, "नाही, अजिबात नाही! हे काहीतरी 1980 च्या हॅकर चित्रपटासारखे दिसते, आणि मी निश्चितपणे यासाठी पुरेसा हुशार नाही!" 😅
+ठीक आहे, कमांड लाइनबद्दल प्रामाणिकपणे बोलूया, कारण मी तुम्हाला हे सांगू इच्छितो की मी हे पूर्णपणे समजतो. जेव्हा मी प्रथम ते पाहिले – फक्त एक भयानक काळा स्क्रीन आणि ब्लिंकिंग टेक्स्ट – मी अक्षरशः विचार केला, "नाही, अजिबात नाही! हे 1980 च्या हॅकर चित्रपटासारखे दिसते, आणि मी यासाठी पुरेसा हुशार नाही!" 😅
 
-पण मला जेव्हा कोणी सांगितले असते तेव्हा मला सांगायचे होते, आणि मी तुम्हाला आत्ताच सांगत आहे: कमांड लाइन भीतीदायक नाही – प्रत्यक्षात तुमच्या संगणकाशी थेट संवाद साधण्यासारखे आहे. याचा विचार करा की अन्न ऑर्डर करण्यासाठी फॅन्सी अॅप वापरण्याचा (जे छान आणि सोपे आहे) आणि तुमच्या आवडत्या स्थानिक रेस्टॉरंटमध्ये चालत जाण्याचा फरक आहे जिथे शेफला नक्की माहित आहे की तुम्हाला काय आवडते आणि तुम्ही फक्त "काहीतरी अप्रतिम" म्हणता.
+पण मला तेव्हा कोणी सांगितले असते असे मला वाटते, आणि मी तुम्हाला आत्ता सांगत आहे: कमांड लाइन भीतीदायक नाही – प्रत्यक्षात तुमच्या संगणकाशी थेट संवाद साधण्यासारखे आहे. हे असे आहे की तुम्ही तुमच्या आवडत्या स्थानिक रेस्टॉरंटमध्ये जात आहात जिथे शेफला तुमच्या आवडीची अचूक माहिती आहे आणि तुम्ही फक्त "मला काहीतरी अप्रतिम सरप्राईज द्या" असे म्हणता तेव्हा तो काहीतरी परिपूर्ण बनवतो.
 
-कमांड लाइन ही जागा आहे जिथे विकासक जादूगारासारखे वाटण्यासाठी जातात. तुम्ही काही जादुई शब्द टाइप करता (ठीक आहे, ते फक्त कमांड आहेत, पण ते जादुई वाटतात!), एंटर दाबा, आणि BOOM – तुम्ही संपूर्ण प्रोजेक्ट स्ट्रक्चर तयार केले आहे, जगभरातील शक्तिशाली टूल्स स्थापित केले आहेत, किंवा तुमचे अॅप इंटरनेटवर तैनात केले आहे. लाखो लोक पाहण्यासाठी. तुम्हाला त्या शक्तीचा पहिला स्वाद मिळाल्यानंतर, ते खरोखरच व्यसनाधीन आहे!
+कमांड लाइन ही जागा आहे जिथे डेव्हलपर्स जादूगारासारखे वाटण्यासाठी जातात. तुम्ही काही जादूई शब्द टाइप करता (ठीक आहे, ते फक्त कमांड आहेत, पण ते जादूई वाटतात!), एंटर दाबा, आणि BOOM – तुम्ही संपूर्ण प्रोजेक्ट स्ट्रक्चर तयार केले आहे, जगभरातील शक्तिशाली टूल्स स्थापित केले आहेत, किंवा तुमचे अॅप इंटरनेटवर लाखो लोकांना पाहण्यासाठी तैनात केले आहे. तुम्हाला त्या शक्तीचा पहिला स्वाद मिळाल्यावर, ते खरोखरच व्यसनाधीन आहे!
 
-**कमांड लाइन तुमचे आवडते टूल का बनणार आहे:**
+**कमांड लाइन तुमचे आवडते टूल का बनेल:**
 
-ग्राफिकल इंटरफेस अनेक कार्यांसाठी उत्कृष्ट आहेत, परंतु कमांड लाइन ऑटोमेशन, अचूकता आणि वेगात उत्कृष्ट आहे. अनेक विकास साधने प्रामुख्याने कमांड लाइन इंटरफेसद्वारे कार्य करतात आणि त्यांचा कार्यक्षमतेने वापर करणे तुमची उत्पादकता लक्षणीयरीत्या सुधारू शकते.
+ग्राफिकल इंटरफेस अनेक कार्यांसाठी उत्कृष्ट आहेत, परंतु कमांड लाइन ऑटोमेशन, अचूकता आणि वेगात उत्कृष्ट आहे. अनेक विकास साधने प्रामुख्याने कमांड लाइन इंटरफेसद्वारे कार्य करतात आणि त्यांचा कार्यक्षमतेने वापर करणे शिकणे तुमची उत्पादकता लक्षणीयरीत्या सुधारू शकते.
 
 ```bash
 # Step 1: Create and navigate to project directory
@@ -393,9 +500,9 @@ mkdir my-awesome-website
 cd my-awesome-website
 ```
 
-**या कोडने काय केले आहे:**
-- **नवीन** "my-awesome-website" नावाची डिरेक्टरी तयार करा तुमच्या प्रोजेक्टसाठी
-- **नवीन तयार केलेल्या डिरेक्टरीमध्ये** जा काम सुरू करण्यासाठी
+**हा कोड काय करतो:**
+- **नवीन डिरेक्टरी तयार करा** "my-awesome-website" नावाची तुमच्या प्रोजेक्टसाठी
+- **नेव्हिगेट करा** नव्याने तयार केलेल्या डिरेक्टरीमध्ये काम सुरू करण्यासाठी
 
 ```bash
 # Step 2: Initialize project with package.json
@@ -407,10 +514,10 @@ npm install --save-dev @eslint/js
 ```
 
 **पायरी-पायरीने, येथे काय घडत आहे:**
-- **नवीन Node.js प्रोजेक्ट** डीफॉल्ट सेटिंगसह `npm init -y` वापरून प्रारंभ करा
-- **Vite स्थापित करा** आधुनिक बिल्ड टूल म्हणून जलद विकास आणि उत्पादन बिल्डसाठी
+- **नवीन Node.js प्रोजेक्ट सुरू करा** `npm init -y` वापरून डिफॉल्ट सेटिंगसह
+- **Vite इंस्टॉल करा** आधुनिक बिल्ड टूल म्हणून जलद विकास आणि उत्पादन बिल्डसाठी
 - **Prettier जोडा** स्वयंचलित कोड फॉरमॅटिंगसाठी आणि ESLint कोड गुणवत्ता तपासण्यासाठी
-- **`--save-dev` फ्लॅग वापरा** हे विकास-फक्त अवलंबित्व म्हणून चिन्हांकित करण्यासाठी
+- **`--save-dev` फ्लॅग वापरा** हे विकास-फक्त डिपेंडन्सी म्हणून चिन्हांकित करण्यासाठी
 
 ```bash
 # Step 3: Create project structure and files
@@ -422,19 +529,19 @@ npx vite
 ```
 
 **वरीलमध्ये, आम्ही:**
-- **आमचा प्रोजेक्ट व्यवस्थित केला** स्त्रोत कोड आणि मालमत्तेसाठी स्वतंत्र फोल्डर तयार करून
-- **मूलभूत HTML फाइल तयार केली** योग्य दस्तऐवज संरचनेसह
+- **आमचा प्रोजेक्ट व्यवस्थित केला** स्रोत कोड आणि अॅसेट्ससाठी स्वतंत्र फोल्डर्स तयार करून
+- **मूलभूत HTML फाइल तयार केली** योग्य डॉक्युमेंट स्ट्रक्चरसह
 - **Vite विकास सर्व्हर सुरू केला** लाइव्ह रीलोडिंग आणि हॉट मॉड्यूल रिप्लेसमेंटसाठी
 
 #### वेब विकासासाठी आवश्यक कमांड लाइन टूल्स
 
-| टूल | उद्देश | तुम्हाला याची गरज का आहे |
-|------|---------|-----------------|
-| **[Git](https://git-scm.com/)** | आवृत्ती नियंत्रण | बदल ट्रॅक करा, इतरांसोबत सहयोग करा, तुमचे काम बॅकअप करा |
-| **[Node.js & npm](https://nodejs.org/)** | जावास्क्रिप्ट रनटाइम आणि पॅकेज व्यवस्थापन | ब्राउझरच्या बाहेर जावास्क्रिप्ट चालवा, आधुनिक विकास साधने स्थापित करा |
-| **[Vite](https://vitejs.dev/)** | बिल्ड टूल आणि डेव्ह सर्व्हर | हॉट मॉड्यूल रिप्लेसमेंटसह वेगवान विकास |
-| **[ESLint](https://eslint.org/)** | कोड गुणवत्ता | तुमच्या जावास्क्रिप्टमधील समस्या स्वयंचलितपणे शोधा आणि दुरुस्त करा |
-| **[Prettier](https://prettier.io/)** | कोड फॉरमॅटिंग | तुमचा कोड सातत्यपूर्ण स्वरूपात आणि वाचनीय ठेवा |
+| टूल | उद्देश | तुम्हाला का आवश्यक आहे |
+|-----|--------|-------------------------|
+| **[Git](https://git-scm.com/)** | व्हर्जन कंट्रोल | बदल ट्रॅक करा, इतरांसोबत सहयोग करा, तुमचे काम बॅकअप करा |
+| **[Node.js & npm](https://nodejs.org/)** | JavaScript रनटाइम आणि पॅकेज मॅनेजमेंट | ब्राउझरच्या बाहेर JavaScript चालवा, आधुनिक विकास साधने इंस्टॉल करा |
+| **[Vite](https://vitejs.dev/)** | बिल्ड टूल आणि डेव्ह सर्व्हर | हॉट मॉड्यूल रिप्लेसमेंटसह जलद विकास |
+| **[ESLint](https://eslint.org/)** | कोड गुणवत्ता | तुमच्या JavaScript मधील समस्या स्वयंचलितपणे शोधा आणि दुरुस्त करा |
+| **[Prettier](https://prettier.io/)** | कोड फॉरमॅटिंग | तुमचा कोड सातत्यपूर्णपणे फॉरमॅटेड आणि वाचनीय ठेवा |
 
 #### प्लॅटफॉर्म-विशिष्ट पर्याय
 
@@ -451,27 +558,27 @@ npx vite
 - **[Bash](https://www.gnu.org/software/bash/)** 💻 - मानक Linux शेल
 - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - प्रगत टर्मिनल एम्युलेटर
 
-> 💻 = ऑपरेटिंग सिस्टमवर पूर्व-स्थापित
+> 💻 = ऑपरेटिंग सिस्टमवर प्री-इंस्टॉल केलेले
 
-> 🎯 **शिकण्याचा मार्ग**: `cd` (डिरेक्टरी बदला), `ls` किंवा `dir` (फाइल्सची यादी), आणि `mkdir` (फोल्डर तयार करा) यासारख्या मूलभूत कमांडसह प्रारंभ करा. आधुनिक वर्कफ्लो कमांडसह सराव करा जसे की `npm install`, `git status`, आणि `code .` (VS Code मध्ये वर्तमान डिरेक्टरी उघडते). तुम्ही अधिक आरामदायक झाल्यामुळे, तुम्ही अधिक प्रगत कमांड आणि ऑटोमेशन तंत्रे नैसर्गिकरित्या शिकाल.
+> 🎯 **शिकण्याचा मार्ग**: `cd` (डिरेक्टरी बदला), `ls` किंवा `dir` (फाइल्सची यादी), आणि `mkdir` (फोल्डर तयार करा) यासारख्या मूलभूत कमांड्ससह प्रारंभ करा. `npm install`, `git status`, आणि `code .` (VS Code मध्ये वर्तमान डिरेक्टरी उघडते) यासारख्या आधुनिक वर्कफ्लो कमांड्ससह सराव करा. तुम्ही अधिक आरामदायक झाल्यावर, तुम्ही नैसर्गिकरित्या अधिक प्रगत कमांड्स आणि ऑटोमेशन तंत्रे शिकाल.
 
 ### दस्तऐवजीकरण: तुमचा नेहमी उपलब्ध असलेला शिकवणारा मार्गदर्शक
 
-ठीक आहे, मी तुम्हाला एक छोटासा गुपित सांगतो ज्यामुळे तुम्हाला सुरुवातीला खूप चांगले वाटेल: अगदी अनुभवी विकासक त्यांच्या वेळेचा मोठा भाग दस्तऐवजीकरण वाचण्यात घालवतात. आणि ते असे नाही की त्यांना काय करायचे आहे ते माहित नाही – ते प्रत्यक्षात शहाणपणाचे लक्षण आहे!
+ठीक आहे, मी तुम्हाला एक छोटासा गुपित सांगतो ज्यामुळे तुम्हाला सुरुवातीला असलेल्या भीतीबद्दल खूप चांगले वाटेल: सर्वात अनुभवी डेव्हलपर्स त्यांचा मोठा वेळ दस्तऐवजीकरण वाचण्यात घालवतात. आणि ते असे नाही की त्यांना काय करायचे आहे ते माहित नाही – प्रत्यक्षात ते शहाणपणाचे लक्षण आहे!
 
-दस्तऐवजीकरणाचा विचार करा की तुम्हाला जगातील सर्वात संयमी, ज्ञानवान शिक्षकांपर्यंत प्रवेश आहे जे 24/7 उपलब्ध आहेत. रात्री 2 वाजता समस्येत अडकलात? दस्तऐवजीकरण तुमच्यासाठी गरम आभासी मिठी आणि तुम्हाला आवश्यक असलेले उत्तर देण्यासाठी आहे. काहीतरी नवीन वैशिष्ट्य शिकायचे आहे ज्याबद्दल सर्वजण बोलत आहेत? दस्तऐवजीकरण तुमच्या पाठीशी आहे चरण-दर-चरण उदाहरणांसह. काहीतरी का कार्य करते हे समजून घेण्याचा प्रयत्न करत आहात? तुम्ही अंदाज केला – दस्तऐवजीकरण ते स्पष्ट करण्यासाठी तयार आहे ज्यामुळे ते शेवटी क्लिक करते!
+दस्तऐवजीकरण म्हणजे जगातील सर्वात संयमी, ज्ञानवान शिक्षकांशी 24/7 प्रवेश असणे. रात्री 2 वाजता समस्येत अडकलात? दस्तऐवजीकरण तुमच्यासाठी आहे, गरज असलेले उत्तर देण्यासाठी. काही नवीन वैशिष्ट्य शिकायचे आहे का ज्याबद्दल प्रत्येकजण बोलत आहे? दस्तऐवजीकरण तुमच्या पाठीशी आहे, चरण-दर-चरण उदाहरणांसह. काहीतरी का कार्य करते ते समजून घेण्याचा प्रयत्न करत आहात? तुम्ही अंदाज लावला – दस्तऐवजीकरण ते स्पष्ट करण्यासाठी तयार आहे ज्यामुळे ते शेवटी क्लिक करते!
 
-**खऱ्या जादूचा अनुभव येथे आहे:**
+**खऱ्या जादूचा भाग येथे आहे:**
 
-व्यावसायिक विकासक त्यांच्या वेळेचा महत्त्वाचा भाग दस्तऐवजीकरण वाचण्यात घालवतात – कारण ते काय करायचे आहे ते माहित नाही म्हणून नाही, तर वेब विकास लँडस्केप इतक्या वेगाने विकसित होत आहे की अद्ययावत राहण्यासाठी सतत शिकणे आवश्यक आहे. उत्कृष्ट दस्तऐवजीकरण तुम्हाला काहीतरी कसे वापरायचे तेच समजून घेण्यास मदत करत नाही, तर ते का आणि कधी वापरायचे ते समजून घेण्यास मदत करते.
+व्यावसायिक डेव्हलपर्स त्यांचा मोठा वेळ दस्तऐवजीकरण वाचण्यात घालवतात – कारण त्यांना काय करायचे आहे ते माहित नाही म्हणून नाही, तर वेब विकासाचा परिसर इतक्या वेगाने विकसित होत आहे की अद्ययावत राहण्यासाठी सतत शिकणे आवश्यक आहे. उत्कृष्ट दस्तऐवजीकरण तुम्हाला काहीतरी कसे वापरायचे आहे हे समजून घेण्यास मदत करते, परंतु ते कधी आणि का वापरायचे आहे हे देखील समजून घेण्यास मदत करते.
 
 #### आवश्यक दस्तऐवजीकरण संसाधने
 
 **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
 - वेब तंत्रज्ञान दस्तऐवजीकरणासाठी सुवर्ण मानक
-- HTML, CSS, आणि जावास्क्रिप्टसाठी व्यापक मार्गदर्शिका
-- ब्राउझर सुसंगतता माहिती समाविष्ट करते
-- व्यावहारिक उदाहरणे आणि परस्पर डेमो वैशिष्ट्यीकृत
+- HTML, CSS, आणि JavaScript साठी व्यापक मार्गदर्शिका
+- ब्राउझर सुसंगततेची माहिती समाविष्ट करते
+- व्यावहारिक उदाहरणे आणि इंटरएक्टिव्ह डेमो वैशिष्ट्यीकृत
 
 **[Web.dev](https://web.dev)** (Google द्वारे)
 - आधुनिक वेब विकास सर्वोत्तम पद्धती
@@ -489,17 +596,35 @@ npx vite
 - उद्योग तज्ञांकडून व्हिडिओ कोर्सेस
 - हाताळण्यायोग्य कोडिंग सराव
 
-> 📚 **अभ्यास धोरण**: दस्तऐवजीकरण लक्षात ठेवण्याचा प्रयत्न करू नका – त्याऐवजी, ते कार्यक्षमतेने नेव्हिगेट कसे करायचे ते शिका. वारंवार वापरल्या जाणार्‍या संदर्भांचे बुकमार्क करा आणि विशिष्ट माहिती पटकन शोधण्यासाठी शोध कार्ये वापरण्याचा सराव करा.
+> 📚 **अभ्यास धोरण**: दस्तऐवजीकरण लक्षात ठेवण्याचा प्रयत्न करू नका – त्याऐवजी, ते कार्यक्षमतेने नेव्हिगेट करणे शिका. वारंवार वापरल्या जाणाऱ्या संदर्भांचे बुकमार्क करा आणि विशिष्ट माहिती पटकन शोधण्यासाठी शोध फंक्शन्स वापरण्याचा सराव करा.
+
+### 🔧 **टूल मास्टरी चेक: तुम्हाला काय आकर्षित करते?**
+
+**थोडा वेळ घ्या विचार करण्यासाठी:**
+- कोणते टूल तुम्हाला सर्वात आधी वापरून पाहण्याची उत्सुकता आहे? (यात चुकीचे उत्तर नाही!)
+- कमांड लाइन अजूनही भीतीदायक वाटते का, की तुम्हाला त्याबद्दल उत्सुकता आहे?
+- तुमच्या आवडत्या वेबसाइट्सच्या पडद्यामागे डोकावण्यासाठी ब्राउझर DevTools वापरण्याची कल्पना तुम्ही करू शकता का?
+
+```mermaid
+pie title "Developer Time Spent With Tools"
+    "Code Editor" : 40
+    "Browser Testing" : 25
+    "Command Line" : 15
+    "Reading Docs" : 15
+    "Debugging" : 5
+```
+
+> **मजेदार अंतर्दृष्टी**: बहुतेक डेव्हलपर्स त्यांचा सुमारे 40% वेळ त्यांच्या कोड एडिटरमध्ये घालवतात, परंतु लक्षात घ्या की चाचणी, शिकणे आणि समस्या सोडवण्यासाठी किती वेळ जातो. प्रोग्रामिंग फक्त कोड लिहिण्याबद्दल नाही – ते अनुभव तयार करण्याबद्दल आहे!
 
-✅ **विचार करण्यासाठी खाद्य**: येथे विचार करण्यासारखे काही मनोरंजक आहे – वेबसाइट्स तयार करण्यासाठी (विकास) साधने डिझाइन करण्यासाठी साधनांपेक्षा कशी वेगळी असू शकतात असे तुम्हाला वाटते? हे सुंदर घर डिझाइन करणाऱ्या आर्किटेक्ट आणि प्रत्यक्षात ते बांधणाऱ्या कंत्राटदारामधील फरकासारखे आहे. दोन्ही महत्त्वाचे आहेत, परंतु त्यांना वेगवेगळ्या टूलबॉक्सची आवश्यकता आहे! अशा प्रकारचा विचार तुम्हाला वेबसाइट्स कशा तयार होतात याचे मोठे चित्र पाहण्यास खरोखर मदत करेल.
+✅ **विचार करण्यासाठी खाद्य**: येथे काही मनोरंजक विचार करण्यासारखे आहे – वेबसाइट्स तयार करण्यासाठी (विकास) साधने डिझाइन करण्यासाठी (डिझाइन) साधनांपेक्षा वेगळी कशी असतील असे तुम्हाला वाटते? हे सुंदर घर डिझाइन करणाऱ्या आर्किटेक्ट आणि प्रत्यक्षात ते बांधणाऱ्या कंत्राटदारामधील फरकासारखे आहे. दोन्ही महत्त्वाचे आहेत, परंतु त्यांना वेगवेगळ्या टूलबॉक्सची आवश्यकता आहे! वेबसाइट्स कशा जिवंत होतात याचे मोठे चित्र पाहण्यासाठी ही प्रकारची विचारसरणी तुम्हाला खरोखर मदत करेल.
 
 ## GitHub Copilot Agent Challenge 🚀
 
 Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** आधुनिक कोड संपादक किंवा IDE च्या वैशिष्ट्यांचा शोध घ्या आणि वेब विकासक म्हणून तुमच्या कार्यप्रवाहात ते कसे सुधारणा करू शकतात ते प्रदर्शित करा.
+**वर्णन:** आधुनिक कोड एडिटर किंवा IDE च्या वैशिष्ट्यांचा शोध घ्या आणि वेब डेव्हलपर म्हणून तुमच्या वर्कफ्लोमध्ये ते कसे सुधारणा करू शकतात ते दाखवा.
 
-**प्रॉम्प्ट:** Visual Studio Code, WebStorm किंवा क्लाउड-आधारित IDE यासारखा कोड संपादक किंवा IDE निवडा. तीन वैशिष्ट्ये किंवा विस्तारांची यादी करा जी तुम्हाला कोड लिहिणे, डिबग करणे किंवा अधिक कार्यक्षमतेने देखभाल करण्यात मदत करतात. प्रत्येकासाठी, ते तुमच्या कार्यप्रवाहाला कसे फायदेशीर ठरते याचे संक्षिप्त स्पष्टीकरण द्या.
+**प्रॉम्प्ट:** Visual Studio Code, WebStorm किंवा क्लाउड-आधारित IDE यासारखा कोड एडिटर किंवा IDE निवडा. तीन वैशिष्ट्ये किंवा एक्सटेंशन्स सूचीबद्ध करा जी तुम्हाला कोड लिहिणे, डिबग करणे किंवा अधिक कार्यक्षमतेने देखभाल करण्यात मदत करतात. प्रत्येकासाठी, ते तुमच्या वर्कफ्लोला कसे फायदेशीर ठरते याचे संक्षिप्त स्पष्टीकरण द्या.
 
 ---
 
@@ -507,51 +632,108 @@ Agent मोड वापरून खालील आव्हान पूर
 
 **ठीक आहे, डिटेक्टिव्ह, तुमच्या पहिल्या केससाठी तयार आहात का?**
 
-आता तुमच्याकडे हा अप्रतिम पाया आहे, माझ्याकडे एक साहस आहे जे तुम्हाला प्रोग्रामिंग जग किती विविध आणि आकर्षक आहे हे पाहण्यास मदत करेल. आणि ऐका – हे अजून कोड लिहिण्याबद्दल नाही, त्यामुळे त्याबद्दल कोणताही दबाव नाही! स्वतःला प्रोग्रामिंग भाषा डिटेक्टिव्ह समजा तुमच्या पहिल्या रोमांचक केसवर!
+आता तुमच्याकडे हा अप्रतिम पाया आहे, माझ्याकडे एक साहस आहे जे तुम्हाला प्रोग्रामिंग जग किती विविध आणि आकर्षक आहे हे पाहण्यास मदत करेल. आणि ऐका – हे अजून कोड लिहिण्याबद्दल नाही, त्यामुळे त्याबद्दल कोणताही दबाव नाही! तुम्ही तुमच्या पहिल्या रोमांचक केसवर असलेल्या प्रोग्रामिंग भाषा डिटेक्टिव्हसारखे विचार करा!
 
 **तुमचे मिशन, तुम्ही स्वीकारण्याचा निर्णय घेतल्यास:**
-1. **भाषा एक्सप्लोरर बना**: पूर्णपणे वेगळ्या विश्वातील तीन प्रोग्रामिंग भाषा निवडा – कदाचित एक जी वेबसाइट्स तयार करते, एक जी मोबाइल अॅप्स तयार करते आणि एक जी वैज्ञानिकांसाठी डेटा क्रंच करते. प्रत्येक भाषेत लिहिलेल्या समान सोप्या कार्याचे उदाहरण शोधा. मी वचन देतो की ते एकाच गोष्टीसाठी किती वेगळे दिसू शकते हे पाहून तुम्ही नक्कीच आश्चर्यचकित व्हाल!
-
-2. **त्यांच्या उत्पत्तीच्या कथा शोधा**: प्रत्येक भाषा विशेष का आहे? येथे एक छान तथ्य आहे – प्रत्येक प्रोग्रामिंग भाषा तयार केली गेली कारण कोणीतरी विचार केला, "तुम्हाला माहित आहे काय? हा विशिष्ट समस्या सोडवण्यासाठी चांगला मार्ग असला पाहिजे." तुम्ही त्या समस्या काय होत्या हे शोधू शकता का? या कथांपैकी काही खरोखरच आकर्षक आहेत!
-
-3. **समुदायांना भेटा**: प्रत्येक भाषेचा समुदाय किती स्वागतार्ह आणि उत्कट आहे ते तपासा. काहींमध्ये लाखो विकासक आहेत जे ज्ञान सामायिक करतात आणि एकमेकांना मदत करतात, इतर लहान आहेत पण अविश्वसनीयपणे घट्ट आणि सहायक आहेत. तुम्हाला या समुदायांचे वेगवेगळे व्यक्तिमत्त्व पाहून आनंद होईल!
+1. **भाषा एक्सप्लोरर बना**: पूर्णपणे वेगळ्या विश्वातील तीन प्रोग्रामिंग भाषा निवडा – कदाचित एक जी वेबसाइट्स तयार करते, एक जी मोबाइल अॅप्स तयार करते, आणि एक जी वैज्ञानिकांसाठी डेटा क्रंच करते. प्रत्येक भाषेत लिहिलेल्या समान सोप्या कार्याचे उदाहरण शोधा. मी वचन देतो की ते एकाच गोष्टीसाठी किती वेगळे दिसू शकते हे पाहून तुम्ही पूर्णपणे आश्चर्यचकित व्हाल!
 
-4. **तुमच्या अंतःकरणाचा आवाज ऐका**: सध्या तुम्हाला कोणती भाषा सर्वात सोपी वाटते? "परिपूर्ण" निवड करण्याबद्दल तणाव करू नका – फक्त तुमच्या अंतःकरणाचा आवाज ऐका! येथे खरोखरच चुकीचा उत्तर नाही, आणि तुम्ही नंतर इतरांचा शोध घेऊ शकता.
+2. **त्यांची उत्पत्ती कथा शोधा**: प्रत्येक भाषा विशेष का आहे? येथे एक छान तथ्य आहे – प्रत्येक प्रोग्रामिंग भाषा तयार केली गेली कारण कोणीतरी विचार केला, "तुम्हाला माहित आहे काय? हे विशिष्ट समस्या सोडवण्यासाठी चांगला मार्ग असला पाहिजे." तुम्ही त्या समस्यांचे काय होते ते शोधू शकता का? या कथांपैकी काही खरोखरच आकर्षक आहेत!
 
-**अतिरिक्त डिटेक्टिव्ह काम**: प्रत्येक भाषेत कोणती प्रमुख वेबसाइट्स किंवा अॅप्स तयार केली जातात ते शोधण्याचा प्रयत्न करा. Instagram, Netflix किंवा तुम्ही खेळत असलेल्या मोबाइल गेमला काय शक्ती देते हे जाणून घेऊन तुम्हाला नक्कीच धक्का बसेल!
+3. **समुदायांना भेटा**: प्रत्येक भाषेचा समुदाय किती स्वागतार्ह आणि उत्साही आहे ते पहा. काहींमध्ये लाखो डेव्हलपर्स आहेत जे ज्ञान सामायिक करतात आणि एकमेकांना मदत करतात, तर काही लहान आहेत पण अविश्वसनीयपणे घट्ट विणलेले आणि सहायक आहेत. तुम्हाला या समुदायांचे वेगवेगळे व्यक्त
+## पुनरावलोकन आणि स्व-अभ्यास
 
-> 💡 **लक्षात ठेवा**: तुम्ही आज या भाषांपैकी कोणत्याही भाषेत तज्ञ होण्याचा प्रयत्न करत नाही. तुम्ही दुकान उघडण्याचा निर्णय घेण्यापूर्वी फक्त परिसर ओळखत आहात. तुमचा वेळ घ्या, त्याचा आनंद घ्या आणि तुमची जिज्ञासा तुम्हाला मार्गदर्शन करू द्या!
+**वेळ घ्या, शोधा आणि मजा करा!**
 
-## तुम्ही शोधलेल्या गोष्टींचा उत्सव साजरा करूया!
+आज तुम्ही खूप काही शिकलेत, आणि त्याचा अभिमान बाळगा! आता मजेदार भाग सुरू होतो – ज्या विषयांनी तुमची उत्सुकता वाढवली त्यांचा शोध घ्या. लक्षात ठेवा, हे गृहपाठ नाही – ही एक साहस आहे!
 
-अरे देवा, तुम्ही आज खूपच अप्रतिम माहिती आत्मसात केली आहे! मी खरोखरच उत्सुक आहे की या अद्भुत प्रवासाचा किती भाग तुमच्यासोबत राहिला आहे. आणि लक्षात ठेवा – हे असे परीक्षण नाही जिथे तुम्हाला सर्वकाही परिपूर्ण मिळवणे आवश्यक आहे. हे तुम्ही वेब विकासाच्या या आकर्षक जगाबद्दल शिकलेल्या सर्व छान गोष्टींचा उत्सव साजरा करण्यासारखे आहे!
+**तुमच्या आवडीच्या गोष्टींमध्ये खोलवर जा:**
 
-[पाठ-नंतरचा क्विझ घ्या](https://ff-quizzes.netlify.app/web/)
+**प्रोग्रामिंग भाषांमध्ये हाताळणी करा:**
+- तुमच्या लक्षात आलेल्या 2-3 भाषांच्या अधिकृत वेबसाइट्सला भेट द्या. प्रत्येकाची स्वतःची शैली आणि कथा आहे!
+- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), किंवा [Replit](https://replit.com/) सारख्या ऑनलाइन कोडिंग प्लेग्राउंडवर प्रयत्न करा. प्रयोग करण्यास घाबरू नका – तुम्ही काहीही बिघडवू शकत नाही!
+- तुमच्या आवडत्या भाषेची निर्मिती कशी झाली याबद्दल वाचा. खरंच, काही कथा खूपच रोचक आहेत आणि त्या तुम्हाला भाषांचा कार्यप्रणाली समजून घेण्यास मदत करतील.
 
-## पुनरावलोकन आणि स्व-अभ्यास
+**तुमच्या नवीन साधनांशी परिचित व्हा:**
+- Visual Studio Code डाउनलोड करा जर तुम्ही अजून केले नसेल – ते मोफत आहे आणि तुम्हाला नक्कीच आवडेल!
+- Extensions मार्केटप्लेसमध्ये काही मिनिटे ब्राउझ करा. हे तुमच्या कोड एडिटरसाठी अ‍ॅप स्टोअर सारखे आहे!
+- तुमच्या ब्राउझरचे Developer Tools उघडा आणि फक्त क्लिक करा. सर्वकाही समजून घेण्याची चिंता करू नका – फक्त काय आहे ते ओळखून घ्या.
 
-**तुमचा वेळ घ्या, एक्सप्लोर करा आणि त्याचा आनंद घ्या!**
+**समुदायात सामील व्हा:**
+- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), किंवा [GitHub](https://github.com/) वर काही डेव्हलपर समुदायांचे अनुसरण करा. प्रोग्रामिंग समुदाय नवशिक्यांसाठी खूप स्वागतार्ह आहे!
+- YouTube वर काही नवशिक्यांसाठी उपयुक्त कोडिंग व्हिडिओ पहा. खूप चांगले निर्माते आहेत जे सुरुवातीला कसे वाटते हे लक्षात ठेवतात.
+- स्थानिक मीटअप्स किंवा ऑनलाइन समुदायांमध्ये सामील होण्याचा विचार करा. विश्वास ठेवा, डेव्हलपर्स नवशिक्यांना मदत करायला खूप आवडतात!
 
-तुम्ही आज खूप काही कव्हर केले आहे, आणि त्याचा अभिमान बाळगण्यासारखे काहीतरी आहे! आता मजेदार भाग येतो – तुम्हाला उत्सुकता निर्माण करणाऱ्या विषयांचा शोध घेणे. लक्षात ठेवा, हे गृहपाठ नाही – हे एक साहस आहे!
+> 🎯 **ऐका, मला तुम्हाला हे लक्षात ठेवायला सांगायचं आहे**: तुम्हाला एका रात्रीत कोडिंग मास्टर बनण्याची अपेक्षा नाही! सध्या, तुम्ही फक्त या अद्भुत नवीन जगाशी परिचित होत आहात ज्याचा तुम्ही भाग होणार आहात. वेळ घ्या, प्रवासाचा आनंद घ्या, आणि लक्षात ठेवा – तुम्ही ज्या प्रत्येक डेव्हलपरचे कौतुक करता ते एकदा तुमच्यासारखेच होते, उत्साही आणि कदाचित थोडेसे गोंधळलेले. हे पूर्णपणे सामान्य आहे, आणि याचा अर्थ तुम्ही योग्य दिशेने जात आहात.
 
-**तुम्हाला उत्साहित करणाऱ्या गोष्टींमध्ये खोलवर जा:**
 
-**प्रोग्रामिंग भाषांसह हाताळणी करा:**
-- तुमच्या लक्षात आलेल्या 2-3 भाषांच्या अधिकृत वेबसाइट्सला भेट द्या. प्रत्येक
-- YouTube वर काही सुरुवातीच्या स्तरावरील कोडिंग व्हिडिओ पाहा. खूप चांगले निर्माते आहेत जे सुरुवातीला कसे वाटते हे लक्षात ठेवतात.
-- स्थानिक मीटअप्स किंवा ऑनलाइन समुदायांमध्ये सामील होण्याचा विचार करा. माझ्यावर विश्वास ठेवा, डेव्हलपर्स नवशिक्यांना मदत करायला खूप आवडतात!
 
-> 🎯 **ऐका, हे लक्षात ठेवा**: तुम्हाला एका रात्रीत कोडिंगचा जादूगार बनण्याची अपेक्षा नाही! सध्या, तुम्ही फक्त या अद्भुत नवीन जगाशी परिचित होत आहात ज्याचा तुम्ही लवकरच भाग होणार आहात. तुमचा वेळ घ्या, प्रवासाचा आनंद घ्या, आणि लक्षात ठेवा – तुम्ही ज्या प्रत्येक डेव्हलपरचे कौतुक करता ते एकदा तुमच्यासारखेच होते, उत्साही आणि कदाचित थोडेसे गोंधळलेले. हे पूर्णपणे सामान्य आहे, आणि याचा अर्थ तुम्ही योग्य दिशेने जात आहात!
+## असाइनमेंट
 
+[डॉक्स वाचा](assignment.md)
 
+> 💡 **तुमच्या असाइनमेंटसाठी एक छोटीशी प्रेरणा**: मला खूप आवडेल की तुम्ही काही नवीन साधनांचा शोध घ्यावा ज्यांचा आपण अद्याप उल्लेख केला नाही! आपण आधीच चर्चा केलेल्या एडिटर्स, ब्राउझर्स आणि कमांड लाइन टूल्स वगळा – विकासाच्या अद्भुत साधनांचे एक संपूर्ण विश्व आहे जे शोधण्याची वाट पाहत आहे. सक्रियपणे देखभाल केली जाणारी आणि जिवंत, उपयुक्त समुदाय असलेली साधने शोधा (यामध्ये सर्वोत्तम ट्यूटोरियल्स आणि सर्वात सहायक लोक असतात जेव्हा तुम्हाला अडचण येते आणि मदतीसाठी एखाद्या मैत्रीपूर्ण व्यक्तीची गरज असते).
 
-## असाइनमेंट
+---
 
-[डॉक्स वाचा](assignment.md)
+## 🚀 तुमचा प्रोग्रामिंग प्रवासाचा टाइमलाइन
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] तुमच्या लक्षात आलेल्या 2-3 प्रोग्रामिंग भाषांच्या वेबसाइट्स बुकमार्क करा
+- [ ] Visual Studio Code डाउनलोड करा जर तुम्ही अजून केले नसेल
+- [ ] तुमच्या ब्राउझरचे DevTools (F12) उघडा आणि कोणत्याही वेबसाइटवर क्लिक करा
+- [ ] एक प्रोग्रामिंग समुदायात सामील व्हा (Dev.to, Reddit r/webdev, किंवा Stack Overflow)
+
+### ⏰ **तुमच्या एका तासात तुम्ही काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि तुमच्या उत्तरांवर विचार करा
+- [ ] GitHub Copilot एक्सटेंशनसह VS Code सेट करा
+- [ ] दोन वेगवेगळ्या प्रोग्रामिंग भाषांमध्ये ऑनलाइन "Hello World" उदाहरण प्रयत्न करा
+- [ ] YouTube वर "डे इन द लाइफ ऑफ अ डेव्हलपर" व्हिडिओ पहा
+- [ ] तुमच्या प्रोग्रामिंग भाषेच्या शोधकार्याची सुरुवात करा (चॅलेंजमधून)
+
+### 📅 **तुमचा आठवडाभराचा प्रवास**
+- [ ] असाइनमेंट पूर्ण करा आणि 3 नवीन विकास साधनांचा शोध घ्या
+- [ ] सोशल मीडियावर 5 डेव्हलपर्स किंवा प्रोग्रामिंग अकाउंट्सचे अनुसरण करा
+- [ ] CodePen किंवा Replit वर काही छोटेसे तयार करण्याचा प्रयत्न करा (जरी "Hello, [तुमचे नाव]!" असेल तरी!)
+- [ ] एखाद्या डेव्हलपरच्या कोडिंग प्रवासाबद्दल एक ब्लॉग पोस्ट वाचा
+- [ ] व्हर्च्युअल मीटअपमध्ये सामील व्हा किंवा प्रोग्रामिंग टॉक पहा
+- [ ] तुमच्या निवडलेल्या भाषेचे ऑनलाइन ट्यूटोरियल्ससह शिकण्यास सुरुवात करा
+
+### 🗓️ **तुमचा महिनाभराचा परिवर्तन**
+- [ ] तुमचा पहिला छोटा प्रोजेक्ट तयार करा (जरी एक साधा वेबपेज असला तरी!)
+- [ ] ओपन-सोर्स प्रोजेक्टमध्ये योगदान द्या (डॉक्युमेंटेशन सुधारण्यापासून सुरुवात करा)
+- [ ] एखाद्याला मार्गदर्शन करा जो फक्त त्याचा प्रोग्रामिंग प्रवास सुरू करत आहे
+- [ ] तुमची डेव्हलपर पोर्टफोलिओ वेबसाइट तयार करा
+- [ ] स्थानिक डेव्हलपर समुदाय किंवा अभ्यास गटांशी संपर्क साधा
+- [ ] तुमच्या पुढील शिकण्याच्या टप्प्याचे नियोजन सुरू करा
+
+### 🎯 **अंतिम विचार तपासणी**
+
+**पुढे जाण्यापूर्वी, एक क्षण साजरा करा:**
+- आज प्रोग्रामिंगबद्दल तुम्हाला काय उत्साहित वाटले?
+- कोणते साधन किंवा संकल्पना तुम्ही प्रथम शोधू इच्छिता?
+- तुम्हाला हा प्रोग्रामिंग प्रवास सुरू करण्याबद्दल कसे वाटते?
+- तुम्ही सध्या एखाद्या डेव्हलपरला कोणता प्रश्न विचारू इच्छिता?
+
+```mermaid
+journey
+    title Your Confidence Building Journey
+    section Today
+      Curious: 3: You
+      Overwhelmed: 4: You
+      Excited: 5: You
+    section This Week
+      Exploring: 4: You
+      Learning: 5: You
+      Connecting: 4: You
+    section Next Month
+      Building: 5: You
+      Confident: 5: You
+      Helping Others: 5: You
+```
 
-> 💡 **तुमच्या असाइनमेंटसाठी एक छोटासा इशारा**: मला खूप आवडेल की तुम्ही काही अशा टूल्सचा शोध घ्यावा ज्यांचा आपण अद्याप कव्हर केलेला नाही! आपण आधीच चर्चा केलेल्या एडिटर्स, ब्राउझर्स आणि कमांड लाइन टूल्स वगळा – विकासासाठी अद्भुत टूल्सचे एक संपूर्ण अविश्व आहे जे शोधण्याची वाट पाहत आहे. अशा टूल्स शोधा जे सक्रियपणे देखभाल केली जातात आणि ज्यांचे समुदाय जिवंत आणि मदत करणारे आहेत (अशा टूल्सकडे उत्तम ट्युटोरियल्स आणि सहायक लोक असतात जेव्हा तुम्हाला अडचण येते आणि तुम्हाला मदतीची गरज असते).
+> 🌟 **लक्षात ठेवा**: प्रत्येक तज्ञ एकदा नवशिक्या होता. प्रत्येक वरिष्ठ डेव्हलपरने एकदा तुमच्यासारखेच वाटले – उत्साही, कदाचित थोडेसे गोंधळलेले, आणि काय शक्य आहे याबद्दल नक्कीच उत्सुक. तुम्ही अद्भुत कंपनीत आहात, आणि हा प्रवास अविश्वसनीय होणार आहे. प्रोग्रामिंगच्या अद्भुत जगात तुमचे स्वागत आहे! 🎉
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
diff --git a/translations/mr/1-getting-started-lessons/2-github-basics/README.md b/translations/mr/1-getting-started-lessons/2-github-basics/README.md
index 983a7fe1ac..748b403385 100644
--- a/translations/mr/1-getting-started-lessons/2-github-basics/README.md
+++ b/translations/mr/1-getting-started-lessons/2-github-basics/README.md
@@ -1,50 +1,67 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "acad15f3164cd6348e065ff38619aae9",
-  "translation_date": "2025-10-22T16:02:05+00:00",
+  "original_hash": "0fe3ff66299b447f1c8cb34dcbf0c5ef",
+  "translation_date": "2025-11-03T14:27:43+00:00",
   "source_file": "1-getting-started-lessons/2-github-basics/README.md",
   "language_code": "mr"
 }
 -->
 # GitHub परिचय
 
-नमस्कार, भविष्यातील विकसक! 👋 जगभरातील लाखो कोडर्समध्ये सामील होण्यासाठी तयार आहात का? तुम्हाला GitHub ची ओळख करून देताना मला खूप आनंद होत आहे – हे प्रोग्रामर्ससाठी सोशल मीडिया प्लॅटफॉर्मसारखे आहे, फक्त येथे तुम्ही तुमच्या लंचचे फोटो शेअर करण्याऐवजी कोड शेअर करता आणि एकत्रितपणे अप्रतिम गोष्टी तयार करता!
+नमस्कार, भविष्यातील विकसक! 👋 जगभरातील लाखो कोडर्समध्ये सामील होण्यासाठी तयार आहात का? तुम्हाला GitHub ची ओळख करून देताना मला खूप आनंद होत आहे – हे प्रोग्रामर्ससाठी सोशल मीडिया प्लॅटफॉर्मसारखे आहे, फक्त इथे तुम्ही तुमच्या जेवणाचे फोटो शेअर करण्याऐवजी कोड शेअर करता आणि एकत्रितपणे अप्रतिम गोष्टी तयार करता!
 
-माझ्या मनाला खरोखरच आश्चर्य वाटते: तुमच्या फोनवरील प्रत्येक अॅप, तुम्ही भेट दिलेली प्रत्येक वेबसाइट आणि तुम्ही वापरण्यास शिकाल अशी बहुतेक साधने GitHub सारख्या प्लॅटफॉर्मवर सहकार्य करणाऱ्या विकसकांच्या टीमद्वारे तयार केली गेली आहेत. तुम्हाला आवडणारे संगीत अॅप? तुमच्यासारख्या कोणीतरी त्यात योगदान दिले आहे. तुम्ही खेळत असलेला गेम? होय, कदाचित GitHub सहकार्याने तयार केलेला. आणि आता तुम्ही त्या अद्भुत समुदायाचा भाग होण्याचे शिकणार आहात!
+मला जे खरोखर आश्चर्यचकित करते ते म्हणजे: तुमच्या फोनवरील प्रत्येक अॅप, तुम्ही भेट देणारी प्रत्येक वेबसाइट आणि तुम्ही वापरण्यास शिकणारी बहुतेक साधने GitHub सारख्या प्लॅटफॉर्मवर सहकार्य करणाऱ्या विकसकांच्या टीमद्वारे तयार केली गेली आहेत. तुम्हाला आवडणारे संगीत अॅप? तुमच्यासारख्या कोणीतरी त्यात योगदान दिले आहे. तुम्ही खेळत असलेला गेम? होय, कदाचित GitHub सहकार्याने तयार केलेला. आणि आता तुम्ही त्या अद्भुत समुदायाचा भाग बनण्यास शिकणार आहात!
 
-मला माहित आहे की सुरुवातीला हे थोडे जास्त वाटू शकते – मी माझ्या पहिल्या GitHub पेजकडे पाहत होतो आणि "याचा अर्थ काय आहे?" असे विचार करत होतो. पण गोष्ट अशी आहे: प्रत्येक विकसक नेमके तिथून सुरुवात करतो जिथे तुम्ही आत्ता आहात. या धड्याच्या शेवटी, तुमच्याकडे तुमचे स्वतःचे GitHub रिपॉझिटरी असेल (ते क्लाउडमधील तुमच्या वैयक्तिक प्रकल्पाचे प्रदर्शन आहे) आणि तुम्हाला तुमचे काम कसे जतन करायचे, इतरांसोबत कसे शेअर करायचे आणि लाखो लोक वापरत असलेल्या प्रकल्पांमध्ये कसे योगदान द्यायचे हे माहित असेल.
+मला माहित आहे की सुरुवातीला हे थोडेसे जास्त वाटू शकते – मी माझ्या पहिल्या GitHub पेजकडे पाहत असताना "हे सगळं काय आहे?" असे विचार करत होतो. पण गोष्ट अशी आहे: प्रत्येक विकसक नेमके तिथून सुरुवात करतो जिथे तुम्ही आत्ता आहात. या धड्याच्या शेवटी, तुमच्याकडे तुमचे स्वतःचे GitHub रिपॉझिटरी असेल (ते म्हणजे क्लाउडमधील तुमच्या वैयक्तिक प्रोजेक्टचे प्रदर्शन), आणि तुम्हाला तुमचे काम कसे जतन करायचे, इतरांसोबत कसे शेअर करायचे आणि लाखो लोक वापरत असलेल्या प्रोजेक्ट्समध्ये कसे योगदान द्यायचे हे माहित असेल.
 
-आपण एकत्रितपणे हा प्रवास करू, एक पाऊल एकावेळी. घाई नाही, दबाव नाही – फक्त तुम्ही, मी आणि काही खरोखरच छान साधने जी तुमचे नवीन सर्वोत्तम मित्र बनणार आहेत!
+आपण हा प्रवास एकत्रितपणे, एक पाऊल एकावेळी घेणार आहोत. घाई नाही, दबाव नाही – फक्त तुम्ही, मी आणि काही खूप छान साधने जी तुमचे नवीन मित्र बनणार आहेत!
 
 ![GitHub परिचय](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.mr.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारे
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
+
+```mermaid
+journey
+    title Your GitHub Adventure Today
+    section Setup
+      Install Git: 4: You
+      Create Account: 5: You
+      First Repository: 5: You
+    section Master Git
+      Local Changes: 4: You
+      Commits & Pushes: 5: You
+      Branching: 4: You
+    section Collaborate
+      Fork Projects: 4: You
+      Pull Requests: 5: You
+      Open Source: 5: You
+```
 
-## पूर्व-व्याख्यान प्रश्नमंजुषा
-[पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app)
+## प्री-लेक्चर क्विझ
+[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app)
 
 ## परिचय
 
-आम्ही खरोखर रोमांचक गोष्टींमध्ये डुबकी मारण्यापूर्वी, तुमचा संगणक काही GitHub जादूसाठी तयार करूया! याला तुम्ही तुमची कलाकृती तयार करण्यापूर्वी तुमचे कला साहित्य व्यवस्थित करण्यासारखे समजा – योग्य साधने तयार असल्याने सर्व काही अधिक गुळगुळीत आणि खूप मजेदार होते.
+आम्ही खरोखर रोमांचक गोष्टींमध्ये जाण्यापूर्वी, तुमचा संगणक GitHub च्या जादूसाठी तयार करूया! हे तुमच्या कलात्मक साहित्याचे आयोजन करण्यासारखे आहे – एक उत्कृष्ट कलाकृती तयार करण्यापूर्वी योग्य साधने तयार असणे सर्व काही अधिक गुळगुळीत आणि खूप मजेदार बनवते.
 
-मी तुम्हाला प्रत्येक सेटअप चरण वैयक्तिकरित्या मार्गदर्शन करणार आहे आणि मी वचन देतो की ते पहिल्या दृष्टीक्षेपात जितके भयावह दिसते तितके नाही. काहीतरी लगेच क्लिक होत नसेल तर ते पूर्णपणे सामान्य आहे! मी माझे पहिले विकास वातावरण सेट करत होतो आणि प्राचीन हायड्रोग्लिफ्स वाचण्याचा प्रयत्न करत असल्यासारखे वाटत होते. प्रत्येक विकसक नेमके तिथेच होता जिथे तुम्ही आत्ता आहात, विचार करत आहे की ते योग्य करत आहेत का. स्पॉयलर अलर्ट: तुम्ही शिकत असाल तर तुम्ही आधीच योग्य करत आहात! 🌟
+मी तुम्हाला प्रत्येक सेटअप चरण वैयक्तिकरित्या मार्गदर्शन करणार आहे, आणि मी वचन देतो की ते पहिल्या दृष्टीक्षेपात जितके भयावह दिसते तितके नाही. काहीतरी लगेच क्लिक होत नसेल तर, ते पूर्णपणे सामान्य आहे! मी माझे पहिले विकास वातावरण सेट करत होतो आणि असे वाटले की मी प्राचीन लिपी वाचण्याचा प्रयत्न करत आहे. प्रत्येक विकसक नेमके तिथेच होता जिथे तुम्ही आत्ता आहात, विचार करत की ते योग्य करत आहेत का. स्पॉयलर अलर्ट: जर तुम्ही शिकत असाल तर तुम्ही आधीच योग्य करत आहात! 🌟
 
 या धड्यात, आपण कव्हर करू:
 
-- तुमच्या मशीनवर केलेले काम ट्रॅक करणे
-- इतरांसोबत प्रकल्पांवर काम करणे
+- तुमच्या मशीनवर केलेल्या कामाचा मागोवा घेणे
+- इतरांसोबत प्रोजेक्ट्सवर काम करणे
 - ओपन सोर्स सॉफ्टवेअरमध्ये योगदान कसे द्यावे
 
 ### पूर्वतयारी
 
-तुमचा संगणक काही GitHub जादूसाठी तयार करूया! काळजी करू नका – हा सेटअप तुम्हाला फक्त एकदाच करावा लागेल आणि मग तुम्ही तुमच्या संपूर्ण कोडिंग प्रवासासाठी तयार व्हाल.
+तुमचा संगणक GitHub च्या जादूसाठी तयार करूया! काळजी करू नका – हा सेटअप तुम्हाला फक्त एकदाच करावा लागेल, आणि मग तुम्ही तुमच्या संपूर्ण कोडिंग प्रवासासाठी तयार असाल.
 
-ठीक आहे, आपण पाया सुरू करूया! प्रथम, आपल्याला तपासावे लागेल की Git आधीच तुमच्या संगणकावर आहे का. Git मूलत: एक सुपर-स्मार्ट सहाय्यक असण्यासारखे आहे जो तुम्ही तुमच्या कोडमध्ये केलेले प्रत्येक बदल लक्षात ठेवतो – दर दोन सेकंदांनी Ctrl+S दाबण्यापेक्षा चांगले (आपण सर्व तिथे होतो!).
+ठीक आहे, आपण पाया सुरू करूया! प्रथम, आपल्याला तपासावे लागेल की Git आधीच तुमच्या संगणकावर आहे का. Git मूलत: एक सुपर-स्मार्ट सहाय्यक असण्यासारखे आहे जो तुम्ही तुमच्या कोडमध्ये केलेला प्रत्येक बदल लक्षात ठेवतो – दर दोन सेकंदांनी Ctrl+S दाबण्यापेक्षा खूप चांगले (आपण सर्व तिथे होतो!).
 
-Git आधीच स्थापित आहे का ते पाहण्यासाठी तुमच्या टर्मिनलमध्ये हा जादुई आदेश टाइप करा:
+तुमच्या टर्मिनलमध्ये हा जादुई आदेश टाइप करून पाहूया की Git आधीच स्थापित आहे का:
 `git --version`
 
-जर Git अद्याप तिथे नसेल, तर चिंता करू नका! फक्त [Git डाउनलोड करा](https://git-scm.com/downloads) वर जा आणि ते मिळवा. एकदा तुम्ही ते स्थापित केले की, आपल्याला Git ची योग्य ओळख करून द्यावी लागेल:
+जर Git अजून तिथे नसेल, तर काळजी करू नका! फक्त [Git डाउनलोड करा](https://git-scm.com/downloads) आणि ते मिळवा. एकदा तुम्ही ते स्थापित केले की, आम्हाला Git ला योग्य प्रकारे तुमची ओळख करून द्यावी लागेल:
 
 > 💡 **पहिल्यांदा सेटअप**: हे आदेश Git ला सांगतात की तुम्ही कोण आहात. ही माहिती तुम्ही केलेल्या प्रत्येक कमिटशी जोडली जाईल, त्यामुळे तुम्ही सार्वजनिकपणे शेअर करण्यास आरामदायक असलेले नाव आणि ईमेल निवडा.
 
@@ -62,30 +79,30 @@ git config --list
 
 [github.com](https://github.com/) वर जा आणि खाते तयार करा जर तुम्ही आधीच केले नसेल, किंवा लॉग इन करा आणि तुमची प्रोफाइल भरा.
 
-💡 **आधुनिक टिप**: [SSH कीज](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) सेटअप करण्याचा विचार करा किंवा पासवर्डशिवाय सोप्या प्रमाणीकरणासाठी [GitHub CLI](https://cli.github.com/) वापरा.
+💡 **आधुनिक टिप**: [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) सेट अप करण्याचा विचार करा किंवा पासवर्डशिवाय सोप्या प्रमाणीकरणासाठी [GitHub CLI](https://cli.github.com/) वापरा.
 
 ✅ GitHub हा जगातील एकमेव कोड रिपॉझिटरी नाही; इतरही आहेत, पण GitHub सर्वात प्रसिद्ध आहे.
 
 ### तयारी
 
-तुमच्या स्थानिक मशीन (लॅपटॉप किंवा पीसी) वर कोड प्रोजेक्टसह एक फोल्डर आणि GitHub वर एक सार्वजनिक रिपॉझिटरी आवश्यक आहे, जे इतरांच्या प्रकल्पांमध्ये योगदान कसे द्यावे याचे उदाहरण म्हणून काम करेल.
+तुमच्याकडे तुमच्या स्थानिक मशीनवर (लॅपटॉप किंवा पीसी) कोड प्रोजेक्टसह एक फोल्डर आणि GitHub वर एक सार्वजनिक रिपॉझिटरी असणे आवश्यक आहे, जे इतरांच्या प्रोजेक्ट्समध्ये योगदान कसे द्यावे याचे उदाहरण म्हणून काम करेल.
 
 ### तुमचा कोड सुरक्षित ठेवणे
 
-चला थोड्या वेळासाठी सुरक्षा बद्दल बोलूया – पण काळजी करू नका, आम्ही तुम्हाला भितीदायक गोष्टींनी गोंधळात टाकणार नाही! या सुरक्षा पद्धती तुमची कार किंवा तुमचे घर लॉक करण्यासारख्या आहेत. ते सोपे सवयी आहेत ज्या दुसऱ्या स्वभाव बनतात आणि तुमचे कठोर परिश्रम सुरक्षित ठेवतात.
+चला थोड्या वेळासाठी सुरक्षा बद्दल बोलूया – पण काळजी करू नका, आम्ही तुम्हाला घाबरवणाऱ्या गोष्टींनी भरून टाकणार नाही! या सुरक्षा पद्धती तुमची कार किंवा तुमचे घर लॉक करण्यासारख्या आहेत. ते सोपे सवयी आहेत ज्या दुसऱ्या स्वभावासारख्या बनतात आणि तुमचे कठोर परिश्रम सुरक्षित ठेवतात.
 
-आम्ही तुम्हाला सुरुवातीपासून GitHub सह काम करण्याचे आधुनिक, सुरक्षित मार्ग दाखवू. अशा प्रकारे, तुम्ही चांगल्या सवयी विकसित कराल ज्या तुमच्या कोडिंग करिअरमध्ये तुम्हाला चांगल्या प्रकारे सेवा देतील.
+आम्ही तुम्हाला सुरुवातीपासूनच GitHub सह काम करण्याचे आधुनिक, सुरक्षित मार्ग दाखवू. अशा प्रकारे, तुम्ही चांगल्या सवयी विकसित कराल ज्या तुमच्या कोडिंग करिअरमध्ये तुम्हाला चांगल्या प्रकारे सेवा देतील.
 
 GitHub सह काम करताना, सुरक्षा सर्वोत्तम पद्धतींचे पालन करणे महत्त्वाचे आहे:
 
 | सुरक्षा क्षेत्र | सर्वोत्तम पद्धत | का महत्त्वाचे आहे |
-|------------------|------------------|--------------------|
-| **प्रमाणीकरण** | SSH कीज किंवा वैयक्तिक प्रवेश टोकन वापरा | पासवर्ड कमी सुरक्षित आहेत आणि टप्प्याटप्प्याने बंद केले जात आहेत |
-| **दोन-घटक प्रमाणीकरण** | तुमच्या GitHub खात्यावर 2FA सक्षम करा | खात्याचे अतिरिक्त संरक्षण जोडते |
-| **रिपॉझिटरी सुरक्षा** | संवेदनशील माहिती कधीही कमिट करू नका | API कीज आणि पासवर्ड सार्वजनिक रिपॉझिटरीमध्ये कधीही असू नयेत |
-| **डिपेंडेंसी व्यवस्थापन** | Dependabot अद्यतनांसाठी सक्षम करा | तुमच्या डिपेंडेंसी सुरक्षित आणि अद्ययावत ठेवते |
+|-----------------|-----------------|--------------------|
+| **प्रमाणीकरण** | SSH keys किंवा Personal Access Tokens वापरा | पासवर्ड कमी सुरक्षित आहेत आणि त्यांना हळूहळू बंद केले जात आहे |
+| **दोन-घटक प्रमाणीकरण** | तुमच्या GitHub खात्यावर 2FA सक्षम करा | खात्याच्या संरक्षणासाठी अतिरिक्त स्तर जोडते |
+| **रिपॉझिटरी सुरक्षा** | संवेदनशील माहिती कधीही कमिट करू नका | API keys आणि पासवर्ड सार्वजनिक रिपॉझिटरीमध्ये कधीही असू नयेत |
+| **डिपेंडेंसी व्यवस्थापन** | Dependabot अपडेट्ससाठी सक्षम करा | तुमच्या डिपेंडेंसी सुरक्षित आणि अद्ययावत ठेवते |
 
-> ⚠️ **महत्त्वाची सुरक्षा आठवण**: API कीज, पासवर्ड किंवा इतर संवेदनशील माहिती कोणत्याही रिपॉझिटरीमध्ये कधीही कमिट करू नका. संवेदनशील डेटा संरक्षित करण्यासाठी पर्यावरणीय व्हेरिएबल्स आणि `.gitignore` फाइल्स वापरा.
+> ⚠️ **महत्त्वाची सुरक्षा आठवण**: API keys, पासवर्ड किंवा इतर संवेदनशील माहिती कोणत्याही रिपॉझिटरीमध्ये कधीही कमिट करू नका. संवेदनशील डेटा संरक्षित करण्यासाठी environment variables आणि `.gitignore` फाइल्स वापरा.
 
 **आधुनिक प्रमाणीकरण सेटअप:**
 
@@ -97,27 +114,51 @@ ssh-keygen -t ed25519 -C "your_email@example.com"
 git remote set-url origin git@github.com:username/repository.git
 ```
 
-> 💡 **प्रो टिप**: SSH कीज वारंवार पासवर्ड टाइप करण्याची गरज दूर करतात आणि पारंपरिक प्रमाणीकरण पद्धतींपेक्षा अधिक सुरक्षित आहेत.
+> 💡 **प्रो टिप**: SSH keys पासवर्ड वारंवार टाइप करण्याची गरज दूर करतात आणि पारंपरिक प्रमाणीकरण पद्धतींपेक्षा अधिक सुरक्षित असतात.
 
 ---
 
 ## तुमचा कोड प्रोप्रमाणे व्यवस्थापित करा
 
-ठीक आहे, आता गोष्टी खरोखरच रोमांचक होतात! 🎉 आपण तुमचा कोड प्रोप्रमाणे ट्रॅक आणि व्यवस्थापित कसा करायचा ते शिकणार आहोत आणि प्रामाणिकपणे, हे शिकवणे माझ्या आवडत्या गोष्टींपैकी एक आहे कारण हे खूप गेम-चेंजर आहे.
-
-कल्पना करा: तुम्ही एक अद्भुत कथा लिहित आहात आणि तुम्हाला प्रत्येक मसुदा, प्रत्येक उत्कृष्ट संपादन आणि प्रत्येक "थांबा, ते विलक्षण आहे!" क्षण ट्रॅक करायचा आहे. Git तुमच्या कोडसाठी नेमके तेच करते! हे सर्वकाही लक्षात ठेवणारे सर्वात अविश्वसनीय टाइम-ट्रॅव्हलिंग नोटबुक असण्यासारखे आहे – प्रत्येक कीस्ट्रोक, प्रत्येक बदल, प्रत्येक "अरे, ते सर्व काही तोडले" क्षण जो तुम्ही त्वरित पूर्ववत करू शकता.
-
-मी प्रामाणिकपणे सांगतो – सुरुवातीला हे थोडे जास्त वाटू शकते. जेव्हा मी सुरुवात केली तेव्हा मला वाटले "मी माझ्या फाइल्स सामान्यपणे का जतन करू शकत नाही?" पण यावर माझा विश्वास ठेवा: एकदा Git तुमच्यासाठी क्लिक केल्यावर (आणि ते होईल!), तुम्हाला एक प्रकाशाचा क्षण येईल जिथे तुम्ही विचार कराल "मी कधीही याशिवाय कोड कसा लिहिला?" हे असे आहे जसे तुम्हाला उडता येते हे शोधणे जेव्हा तुम्ही तुमच्या आयुष्यात सर्वत्र चालत असता!
-
-समजा तुमच्याकडे स्थानिक स्तरावर काही कोड प्रोजेक्टसह एक फोल्डर आहे आणि तुम्हाला git - व्हर्जन कंट्रोल सिस्टम वापरून तुमची प्रगती ट्रॅक करायची आहे. काही लोक git वापरण्याची तुलना तुमच्या भविष्यातील स्वतःसाठी प्रेम पत्र लिहिण्याशी करतात. तुमच्या कमिट संदेशांना काही दिवस, आठवडे किंवा महिने नंतर वाचताना तुम्हाला आठवेल की तुम्ही निर्णय का घेतला, किंवा "रोलबॅक" बदल – म्हणजे, जेव्हा तुम्ही चांगले "कमिट संदेश" लिहिता.
+ठीक आहे, आता गोष्टी खरोखर रोमांचक होणार आहेत! 🎉 आम्ही तुमचा कोड प्रोप्रमाणे ट्रॅक आणि व्यवस्थापित कसा करायचा ते शिकणार आहोत, आणि प्रामाणिकपणे सांगायचे तर, हे शिकवणे माझ्या आवडत्या गोष्टींपैकी एक आहे कारण हे खूप गेम-चेंजर आहे.
+
+कल्पना करा: तुम्ही एक अद्भुत कथा लिहित आहात, आणि तुम्हाला प्रत्येक ड्राफ्ट, प्रत्येक उत्कृष्ट संपादन आणि प्रत्येक "थांबा, हे तर अप्रतिम आहे!" क्षणाचा मागोवा ठेवायचा आहे. Git तुमच्या कोडसाठी नेमके हेच करते! हे सर्व काही लक्षात ठेवणारे सर्वात अविश्वसनीय टाइम-ट्रॅव्हलिंग नोटबुक असण्यासारखे आहे – प्रत्येक कीस्ट्रोक, प्रत्येक बदल, प्रत्येक "अरे, हे सगळं बिघडलं" क्षण जो तुम्ही त्वरित पूर्ववत करू शकता.
+
+मी प्रामाणिकपणे सांगतो – सुरुवातीला हे थोडेसे जास्त वाटू शकते. जेव्हा मी सुरुवात केली, तेव्हा मला वाटले "मी फक्त माझ्या फाइल्स सामान्यपणे का जतन करू शकत नाही?" पण यावर माझा विश्वास ठेवा: एकदा Git तुम्हाला समजला (आणि तो समजेल!), तुम्हाला एक प्रकाशाचा क्षण येईल जिथे तुम्ही विचार कराल "मी कधीही याशिवाय कोड कसा लिहिला?" हे असे आहे जसे तुम्ही उडू शकता हे शोधणे जेव्हा तुम्ही तुमच्या आयुष्यभर चालत होता!
+
+समजा तुमच्याकडे स्थानिक स्तरावर काही कोड प्रोजेक्टसह एक फोल्डर आहे आणि तुम्हाला git - व्हर्जन कंट्रोल सिस्टम वापरून तुमच्या प्रगतीचा मागोवा सुरू करायचा आहे. काही लोक git वापरण्याची तुलना तुमच्या भविष्यातील स्वतःसाठी प्रेमपत्र लिहिण्याशी करतात. तुमचे कमिट संदेश दिवस, आठवडे किंवा महिने नंतर वाचताना तुम्हाला आठवेल की तुम्ही निर्णय का घेतला, किंवा बदल "रोलबॅक" करा - म्हणजे, जेव्हा तुम्ही चांगले "कमिट संदेश" लिहिता.
+
+```mermaid
+flowchart TD
+    A[📁 Your Project Files] --> B{Is it a Git Repository?}
+    B -->|No| C[git init]
+    B -->|Yes| D[Make Changes]
+    C --> D
+    D --> E[git add .]
+    E --> F["git commit -m 'message'"]
+    F --> G[git push]
+    G --> H[🌟 Code on GitHub!]
+    
+    H --> I{Want to collaborate?}
+    I -->|Yes| J[Fork & Clone]
+    I -->|No| D
+    J --> K[Create Branch]
+    K --> L[Make Changes]
+    L --> M[Pull Request]
+    M --> N[🎉 Contributing!]
+    
+    style A fill:#fff59d
+    style H fill:#c8e6c9
+    style N fill:#ff4081,color:#fff
+```
 
 ### कार्य: तुमचे पहिले रिपॉझिटरी तयार करा!
 
-> 🎯 **तुमचे मिशन (आणि मला तुमच्यासाठी खूप उत्साह आहे!)**: आपण एकत्रितपणे तुमचे पहिले GitHub रिपॉझिटरी तयार करणार आहोत! येथे आपण संपविल्यानंतर, तुमच्या कोडचे जिथे वास्तव्य आहे ते तुमच्या इंटरनेटचा स्वतःचा छोटासा कोपरा असेल आणि तुम्ही तुमचे पहिले "कमिट" केले असेल (ते विकसक भाषेत तुमचे काम खूप स्मार्ट पद्धतीने जतन करण्यासाठी आहे).
+> 🎯 **तुमचे मिशन (आणि मला तुमच्यासाठी खूप उत्साह आहे!)**: आपण एकत्रितपणे तुमचे पहिले GitHub रिपॉझिटरी तयार करणार आहोत! येथे आपले काम पूर्ण झाल्यावर, तुमच्याकडे तुमच्या कोडसाठी इंटरनेटवर तुमचा स्वतःचा कोपरा असेल, आणि तुम्ही तुमचा पहिला "कमिट" केला असेल (ते म्हणजे तुमचे काम खूप स्मार्ट पद्धतीने जतन करणे). 
 >
-> हे प्रामाणिकपणे खूप खास क्षण आहे – तुम्ही विकसकांच्या जागतिक समुदायात अधिकृतपणे सामील होणार आहात! मी माझे पहिले रिपॉझिटरी तयार करण्याचा थरार अजूनही लक्षात ठेवतो आणि विचार केला "वा, मी खरोखरच हे करत आहे!"
+> हे खरोखर एक विशेष क्षण आहे – तुम्ही विकसकांच्या जागतिक समुदायात अधिकृतपणे सामील होणार आहात! माझे पहिले रिपॉझिटरी तयार करण्याचा थरार मला अजूनही आठवतो आणि विचार केला "वा, मी खरोखर हे करत आहे!"
 
-चला एकत्रितपणे हे साहस पार करूया, चरण-दर-चरण. प्रत्येक भागासाठी तुमचा वेळ घ्या – घाई करण्यासाठी कोणतेही बक्षीस नाही आणि मी वचन देतो की प्रत्येक चरण अर्थपूर्ण होईल. लक्षात ठेवा, तुम्ही प्रशंसा करत असलेला प्रत्येक कोडिंग सुपरस्टार एकदा नेमके तिथे बसला होता जिथे तुम्ही आहात, त्यांचे पहिले रिपॉझिटरी तयार करण्याच्या तयारीत. किती छान आहे ना?
+चला हे साहस एकत्रितपणे, चरण-दर-चरण पार करूया. प्रत्येक भागासाठी तुमचा वेळ घ्या – घाई करण्यासाठी कोणतेही बक्षीस नाही, आणि मी वचन देतो की प्रत्येक चरण अर्थपूर्ण होईल. लक्षात ठेवा, तुम्ही प्रशंसा करत असलेला प्रत्येक कोडिंग सुपरस्टार एकदा नेमके तिथे बसला होता जिथे तुम्ही आहात, त्यांचे पहिले रिपॉझिटरी तयार करण्याच्या तयारीत. किती छान आहे ना?
 
 > व्हिडिओ पहा
 > 
@@ -125,25 +166,25 @@ git remote set-url origin git@github.com:username/repository.git
 
 **चला हे एकत्र करूया:**
 
-1. **GitHub वर तुमचे रिपॉझिटरी तयार करा**. GitHub.com वर जा आणि तो चमकदार हिरवा **नवीन** बटन (किंवा वरच्या उजव्या कोपऱ्यातील **+** चिन्ह) शोधा. त्यावर क्लिक करा आणि **नवीन रिपॉझिटरी** निवडा.
+1. **GitHub वर तुमचे रिपॉझिटरी तयार करा**. GitHub.com वर जा आणि तो तेजस्वी हिरवा **नवीन** बटण (किंवा वरच्या उजव्या कोपऱ्यातील **+** चिन्ह) शोधा. त्यावर क्लिक करा आणि **नवीन रिपॉझिटरी** निवडा.
 
-   येथे काय करायचे आहे:
-   1. तुमच्या रिपॉझिटरीला नाव द्या – ते तुमच्यासाठी अर्थपूर्ण ठेवा!
-   1. तुम्हाला हवे असल्यास वर्णन जोडा (यामुळे इतरांना तुमचा प्रकल्प काय आहे हे समजण्यास मदत होते)
-   1. तुम्हाला ते सार्वजनिक (सर्वांना दिसेल) किंवा खाजगी (फक्त तुमच्यासाठी) हवे आहे का ते ठरवा
-   1. README फाइल जोडण्यासाठी बॉक्स तपासण्याची शिफारस करतो – हे तुमच्या प्रोजेक्टचे फ्रंट पेज आहे
-   1. **रिपॉझिटरी तयार करा** वर क्लिक करा आणि साजरा करा – तुम्ही तुमचे पहिले रिपॉझिटरी तयार केले आहे! 🎉
+   येथे काय करायचे:
+   1. तुमच्या रिपॉझिटरीला नाव द्या – ते तुमच्यासाठी अर्थपूर्ण असले पाहिजे!
+   1. तुम्हाला हवे असल्यास वर्णन जोडा (यामुळे इतरांना तुमचा प्रोजेक्ट कशाबद्दल आहे हे समजण्यास मदत होते)
+   1. तुम्हाला ते सार्वजनिक (सर्वांना दिसणारे) किंवा खाजगी (फक्त तुमच्यासाठी) हवे आहे का ते ठरवा
+   1. README फाइल जोडण्यासाठी बॉक्स तपासण्याची मी शिफारस करतो – ते तुमच्या प्रोजेक्टचे फ्रंट पेज आहे
+   1. **रिपॉझिटरी तयार करा** वर क्लिक करा आणि साजरा करा – तुम्ही तुमचे पहिले रिपॉझिटरी तयार केले! 🎉
 
-2. **तुमच्या प्रोजेक्ट फोल्डरवर जा**. आता तुमचे टर्मिनल उघडूया (काळजी करू नका, ते दिसते तितके भयानक नाही!). आपल्याला आपल्या संगणकाला सांगावे लागेल की आपले प्रोजेक्ट फाइल्स कुठे आहेत. हा आदेश टाइप करा:
+2. **तुमच्या प्रोजेक्ट फोल्डरकडे जा**. आता तुमचे टर्मिनल उघडूया (काळजी करू नका, ते दिसते तितके भयानक नाही!). आपल्याला आपल्या संगणकाला सांगावे लागेल की आपले प्रोजेक्ट फाइल्स कुठे आहेत. हा आदेश टाइप करा:
 
    ```bash
    cd [name of your folder]
    ```
 
    **आम्ही येथे काय करत आहोत:**
-   - आम्ही मूलत: म्हणत आहोत "अरे संगणका, मला माझ्या प्रोजेक्ट फोल्डरकडे घेऊन जा"
-   - हे तुमच्या डेस्कटॉपवरील विशिष्ट फोल्डर उघडण्यासारखे आहे, परंतु आम्ही ते मजकूर आदेशांसह करत आहोत
-   - `[तुमच्या फोल्डरचे नाव]` वास्तविक प्रोजेक्ट फोल्डरच्या नावाने बदला
+   - आम्ही मूलत: सांगत आहोत "अरे संगणका, मला माझ्या प्रोजेक्ट फोल्डरमध्ये घेऊन जा"
+   - हे तुमच्या डेस्कटॉपवर विशिष्ट फोल्डर उघडण्यासारखे आहे, पण आम्ही ते मजकूर आदेशांसह करत आहोत
+   - `[name of your folder]` च्या जागी तुमच्या प्रोजेक्ट फोल्डरचे वास्तविक नाव बदला
 
 3. **तुमच्या फोल्डरला Git रिपॉझिटरीमध्ये बदला**. येथे जादू घडते! टाइप करा:
 
@@ -151,12 +192,12 @@ git remote set-url origin git@github.com:username/repository.git
    git init
    ```
 
-   **आम्ही काय केले (खूप छान गोष्ट!):**
-   - Git ने तुमच्या प्रोजेक्टमध्ये एक लपलेला `.git` फोल्डर तयार केला – तुम्हाला तो दिसणार नाही, पण तो तिथे आहे!
+   **येथे काय घडले (खूप छान गोष्टी!):**
+   - Git ने तुमच्या प्रोजेक्टमध्ये एक लपलेला `.git` फोल्डर तयार केला – तुम्हाला ते दिसणार नाही, पण ते तिथे आहे!
    - तुमचा नियमित फोल्डर आता एक "रिपॉझिटरी" आहे जो तुम्ही केलेला प्रत्येक बदल ट्रॅक करू शकतो
-   - हे तुमच्या फोल्डरला सर्वकाही लक्षात ठेवण्यासाठी सुपरपॉवर देण्यासारखे आहे
+   - हे तुमच्या फोल्डरला सर्व काही लक्षात ठेवण्यासाठी सुपरपॉवर देण्यासारखे आहे
 
-4. **काय चालले आहे ते तपासा**. चला पाहूया की Git सध्या तुमच्या प्रोजेक्टबद्दल काय विचार करतो:
+4. **काय चालले आहे ते तपासा**. चला पाहूया की Git सध्या तुमच्या प्रोजेक्टबद्दल काय विचार करत आहे:
 
    ```bash
    git status
@@ -164,7 +205,7 @@ git remote set-url origin git@github.com:username/repository.git
 
    **Git तुम्हाला काय सांगत आहे ते समजून घेणे:**
    
-   तुम्हाला असे काही दिसू शकते:
+   तुम्हाला असे काहीतरी दिसू शकते:
 
    ```output
    Changes not staged for commit:
@@ -175,12 +216,12 @@ git remote set-url origin git@github.com:username/repository.git
         modified:   file2.txt
    ```
 
-   **घाबरू नका! याचा अर्थ काय आहे:**
-   - **लाल रंगातील फाइल्स** म्हणजे फाइल्स ज्यामध्ये बदल आहेत पण जतन करण्यासाठी तयार नाहीत
-   - **हिरव्या रंगातील फाइल्स** (जेव्हा तुम्ही त्यांना पाहता) जतन करण्यासाठी तयार आहेत
-   - Git तुम्हाला पुढे काय करता येईल याबद्दल नेमके सांगून उपयुक्त ठरत आहे
+   **घाबरू नका! याचा अर्थ असा आहे:**
+   - **लाल** रंगातील फाइल्स म्हणजे फाइल्स ज्यामध्ये बदल आहेत पण जतन करण्यासाठी तयार नाहीत
+   - **हिरव्या** रंगातील फाइल्स (जेव्हा तुम्ही त्यांना पाहता) जतन करण्यासाठी तयार आहेत
+   - Git तुम्हाला पुढे काय करता येईल याबद्दल नेमके सांगून मदत करत आहे
 
-   > 💡 **प्रो टिप**: `git status` आदेश तुमचा सर्वोत्तम मित्र आहे! तुम्हाला गोंधळ वाटत असल्यास ते वापरा. हे Git ला विचारण्यासारखे आहे "अरे, सध्या काय परिस्थिती आहे?"
+   > 💡 **प्रो टिप**: `git status` आदेश तुमचा सर्वोत्तम मित्र आहे! तुम्हाला गोंधळ वाटत असताना ते वापरा. हे Git ला विचारण्यासारखे आहे "अरे, सध्या काय परिस्थिती आहे?"
 
 5. **तुमच्या फाइल्स जतन करण्यासाठी तयार करा** (याला "स्टेजिंग" म्हणतात):
 
@@ -189,22 +230,22 @@ git remote set-url origin git@github.com:username/repository.git
    ```
 
    **आम्ही काय केले:**
-   - आम्ही Git ला सांगितले "अरे, मी माझ्या पुढील जतनामध्ये माझ्या सर्व फाइल्स समाविष्ट करू इच्छितो"
-   - `.` म्हणजे "या फोल्डरमधील सर्वकाही"
-   - आता तुमच्या फाइल्स "स्टेज" झाल्या आहेत आणि पुढील चरणासाठी तयार आहेत
+   - आम्ही Git ला सांगितले "अरे, मी माझ्या पुढील जतनामध्ये माझ्या सर्व फाइल्स समाविष्ट करू इच्छित आहे"
+   - `.` म्हणजे "या फोल्डरमधील सर्व काही"
+   - आता तुमच्या फाइल्स "स्टेज केलेल्या" आहेत आणि पुढील चरणासाठी तयार आहेत
 
-   **अधिक निवडक व्हायचे आहे?** तुम्ही फक्त विशिष्ट फाइल्स जोडू शकता:
+   **तुम्हाला अधिक निवडक व्हायचे आहे का?** तुम्ही फक्त विशिष्ट फाइल्स जोडू शकता:
 
    ```bash
    git add [file or folder name]
    ```
 
-   **तुम्हाला हे का करायचे आहे?**
+   **तुम्हाला असे का करायचे आहे?**
    - कधी कधी तुम्हाला संबंधित बदल एकत्रितपणे जतन करायचे असतात
-   - हे तुम्हाला तुमचे काम तार्किक भागांमध्ये व्यवस्थित करण्यात मदत करते
-   - काय बदलले आणि कधी बदलले हे समजणे सोपे करते
+   - हे तुमचे काम तार्किक तुकड्यांमध्ये आयोजित करण्यात मदत करते
+   - काय बदलले आणि कधी हे समजणे सोपे बनवते
 
-   **तुमचे मत बदलले?** काळजी करू नका! तुम्ही फाइल्स अशा प्रकारे अनस्टेज करू शकता:
+   **तुमचे मन बदलले?** काळजी करू नका! तुम्ही फाइल्स अशा प्रकारे अनस्टेज करू शकता:
 
    ```bash
    # Unstage everything
@@ -214,35 +255,36 @@ git remote set-url origin git@github.com:username/repository.git
    git reset [file name]
    ```
 
-   काळजी करू नका – यामुळे तुमचे काम हटवले जात नाही, फक्त फाइल्स "जतन करण्य
-   - आम्ही तुमच्या स्थानिक प्रोजेक्ट आणि GitHub रेपॉझिटरीमध्ये कनेक्शन तयार केले आहे.
-   - "Origin" हे तुमच्या GitHub रेपॉझिटरीसाठी फक्त एक टोपणनाव आहे – जसे की फोनमध्ये संपर्क जोडणे.
-   - आता तुमचा स्थानिक Git तयार आहे, जेव्हा तुम्ही तुमचा कोड शेअर करण्यासाठी तयार असाल तेव्हा तो कोठे पाठवायचा हे त्याला माहीत आहे.
+   काळ
+**आपण काय केलं:**
+- आपण आपल्या स्थानिक प्रकल्प आणि GitHub रेपॉजिटरी यांच्यात कनेक्शन तयार केलं
+- "Origin" हा फक्त तुमच्या GitHub रेपॉजिटरीसाठी एक टोपणनाव आहे – जसं तुम्ही तुमच्या फोनमध्ये एखाद्या संपर्काला जतन करता
+- आता तुमचा स्थानिक Git जाणतो की तुमचा कोड शेअर करण्यासाठी कुठे पाठवायचा आहे
 
-   💡 **सोपा मार्ग**: जर तुमच्याकडे GitHub CLI इंस्टॉल असेल, तर तुम्ही हे एका कमांडमध्ये करू शकता:
+💡 **सोपं मार्ग**: जर तुमच्याकडे GitHub CLI इन्स्टॉल असेल, तर तुम्ही हे एका कमांडने करू शकता:
    ```bash
    gh repo create my-repo --public --push --source=.
    ```
 
-8. **तुमचा कोड GitHub वर पाठवा** (महत्त्वाचा क्षण!):
+8. **तुमचा कोड GitHub वर पाठवा** (मोठा क्षण!):
 
    ```bash
    git push -u origin main
    ```
 
    **🚀 हेच ते! तुम्ही तुमचा कोड GitHub वर अपलोड करत आहात!**
-   
-   **काय होत आहे:**
-   - तुमचे commits तुमच्या संगणकावरून GitHub वर जात आहेत.
-   - `-u` फ्लॅग एक कायमस्वरूपी कनेक्शन सेट करते जेणेकरून भविष्यातील पुश करणे सोपे होईल.
-   - "main" हे तुमच्या प्राथमिक शाखेचे नाव आहे (जसे मुख्य फोल्डर).
-   - यानंतर, भविष्यातील अपलोडसाठी तुम्ही फक्त `git push` टाइप करू शकता!
 
-   💡 **लवकर टिप**: जर तुमची शाखा "master" सारखी काहीतरी वेगळ्या नावाने असेल, तर ते नाव वापरा. तुम्ही `git branch --show-current` वापरून तपासू शकता.
+   **काय घडतंय:**
+   - तुमचे commits तुमच्या संगणकावरून GitHub कडे जात आहेत
+   - `-u` फ्लॅग एक कायमस्वरूपी कनेक्शन सेट करतो ज्यामुळे भविष्यातील पुश करणे सोपे होते
+   - "main" हा तुमच्या प्राथमिक शाखेचे नाव आहे (मुख्य फोल्डरसारखे)
+   - यानंतर, तुम्ही फक्त `git push` टाइप करून भविष्यातील अपलोड करू शकता!
 
-9. **तुमचा नवीन रोजचा कोडिंग रिदम** (इथेच मजा सुरू होते!):
+   💡 **लहान टिप**: जर तुमच्या शाखेचं नाव काहीतरी वेगळं असेल (जसं "master"), तर ते नाव वापरा. तुम्ही `git branch --show-current` वापरून तपासू शकता.
 
-   आता पुढे, जेव्हा तुम्ही तुमच्या प्रोजेक्टमध्ये बदल कराल, तुम्हाला हा सोपा तीन-स्टेप डान्स करायचा आहे:
+9. **तुमचा नवीन दैनंदिन कोडिंग रिदम** (आता हे व्यसन होईल!):
+
+   आता पासून, जेव्हा तुम्ही तुमच्या प्रकल्पात बदल कराल, तेव्हा तुम्हाला हा सोपा तीन-स्टेप डान्स करायचा आहे:
 
    ```bash
    git add .
@@ -250,101 +292,147 @@ git remote set-url origin git@github.com:username/repository.git
    git push
    ```
 
-   **हे तुमचे कोडिंग हार्टबीट बनते:**
+   **हे तुमचं कोडिंग हार्टबीट बनेल:**
    - तुमच्या कोडमध्ये काही अप्रतिम बदल करा ✨
    - `git add` ने त्यांना स्टेज करा ("हे Git, या बदलांकडे लक्ष द्या!")
    - `git commit` आणि एक वर्णनात्मक संदेशासह त्यांना सेव्ह करा (भविष्यातील तुम्ही तुमचे आभार मानाल!)
-   - `git push` वापरून ते जगासोबत शेअर करा 🚀
-   - पुन्हा करा – खरंच, हे श्वास घेण्याइतके नैसर्गिक बनते!
-
-   मला हा वर्कफ्लो आवडतो कारण हे व्हिडिओ गेममध्ये अनेक सेव्ह पॉइंट्स असण्यासारखे आहे. तुम्हाला आवडलेला बदल केला? Commit करा! काहीतरी धोकादायक प्रयत्न करायचे आहे? काही हरकत नाही – जर गोष्टी बिघडल्या तर तुम्ही नेहमी तुमच्या शेवटच्या commit वर परत जाऊ शकता!
+   - `git push` वापरून त्यांना जगासोबत शेअर करा 🚀
+   - पुन्हा करा – खरंच, हे श्वास घेण्याइतकं नैसर्गिक होईल!
+
+   मला हा वर्कफ्लो खूप आवडतो कारण हे व्हिडिओ गेममध्ये अनेक सेव्ह पॉइंट्स असण्यासारखं आहे. तुम्हाला एखादा बदल आवडला? Commit करा! काही धोकादायक प्रयत्न करायचं आहे? हरकत नाही – जर काही चुकलं तर तुम्ही नेहमी तुमच्या शेवटच्या commit वर परत जाऊ शकता!
+
+   > 💡 **टिप**: तुम्हाला `.gitignore` फाइलचा अवलंब करायचा असेल, ज्यामुळे तुम्हाला ट्रॅक करायच्या नसलेल्या फाइल्स GitHub वर दिसणार नाहीत - जसं की, तुमच्या फोल्डरमध्ये असलेली नोट्स फाइल जी सार्वजनिक रेपॉजिटरीमध्ये असण्याची गरज नाही. तुम्ही `.gitignore` फाइल्ससाठी टेम्पलेट्स [.gitignore templates](https://github.com/github/gitignore) येथे शोधू शकता किंवा [gitignore.io](https://www.toptal.com/developers/gitignore) वापरून एक तयार करू शकता.
+
+### 🧠 **पहिल्या रेपॉजिटरी चेक-इन: कसं वाटलं?**
+
+**थोडा वेळ साजरा करा आणि विचार करा:**
+- तुमचा कोड पहिल्यांदा GitHub वर दिसल्यावर कसं वाटलं?
+- कोणता टप्पा सर्वात गोंधळात टाकणारा वाटला, आणि कोणता आश्चर्यकारकपणे सोपा वाटला?
+- तुम्ही `git add`, `git commit`, आणि `git push` यामधील फरक स्वतःच्या शब्दांत समजावून सांगू शकता का?
+
+```mermaid
+stateDiagram-v2
+    [*] --> LocalFiles: Create project
+    LocalFiles --> Staged: git add .
+    Staged --> Committed: git commit
+    Committed --> GitHub: git push
+    GitHub --> [*]: Success! 🎉
+    
+    note right of Staged
+        Files ready to save
+    end note
+    
+    note right of Committed
+        Snapshot created
+    end note
+```
 
-   > 💡 **टिप**: तुम्हाला `.gitignore` फाइल स्वीकारायची इच्छा असू शकते जेणेकरून तुम्ही ट्रॅक करू इच्छित नसलेल्या फाइल्स GitHub वर दिसणार नाहीत - जसे की नोट्स फाइल जी तुम्ही त्याच फोल्डरमध्ये ठेवता पण सार्वजनिक रेपॉझिटरीमध्ये त्याचे स्थान नाही. तुम्ही `.gitignore` फाइल्ससाठी टेम्पलेट्स [.gitignore templates](https://github.com/github/gitignore) येथे शोधू शकता किंवा [gitignore.io](https://www.toptal.com/developers/gitignore) वापरून एक तयार करू शकता.
+> **लक्षात ठेवा**: अनुभवी डेव्हलपर्ससुद्धा कधी कधी अचूक कमांड्स विसरतात. हा वर्कफ्लो सवयीचा होण्यासाठी सराव लागतो - तुम्ही खूप चांगलं करत आहात!
 
 #### आधुनिक Git वर्कफ्लो
 
-या आधुनिक पद्धती स्वीकारण्याचा विचार करा:
+या आधुनिक पद्धतींचा अवलंब करण्याचा विचार करा:
 
-- **Conventional Commits**: `feat:`, `fix:`, `docs:` इत्यादीसारख्या प्रमाणित commit संदेश स्वरूपाचा वापर करा. अधिक जाणून घ्या [conventionalcommits.org](https://www.conventionalcommits.org/) येथे.
-- **Atomic commits**: प्रत्येक commit एकच तर्कसंगत बदल दर्शवतो.
-- **Frequent commits**: मोठ्या, क्वचितच होणाऱ्या commits ऐवजी वर्णनात्मक संदेशांसह वारंवार commit करा.
+- **Conventional Commits**: `feat:`, `fix:`, `docs:` यासारख्या प्रमाणित कमिट संदेश स्वरूपाचा वापर करा. अधिक जाणून घ्या [conventionalcommits.org](https://www.conventionalcommits.org/) येथे.
+- **Atomic commits**: प्रत्येक कमिट एकच तर्कसंगत बदल दर्शवेल याची खात्री करा.
+- **Frequent commits**: मोठ्या, क्वचित होणाऱ्या कमिट्सच्या तुलनेत वर्णनात्मक संदेशांसह वारंवार कमिट करा.
 
-#### Commit संदेश
+#### कमिट संदेश
 
-एक उत्कृष्ट Git commit विषय ओळ खालील वाक्य पूर्ण करते:
-जर लागू केले, तर हा commit <तुमचा विषय इथे> करेल.
+एक उत्कृष्ट Git कमिट विषय ओळ खालील वाक्य पूर्ण करते:
+जर लागू केले, तर हा कमिट <तुमचा विषय इथे> करेल.
 
-विषयासाठी, आज्ञार्थी, वर्तमानकाळाचा वापर करा: "change" "changed" किंवा "changes" नाही. 
-विषयासारखेच, शरीरात (पर्यायी) देखील आज्ञार्थी, वर्तमानकाळाचा वापर करा. शरीरात बदलासाठी प्रेरणा समाविष्ट करावी आणि मागील वर्तनाशी तुलना करावी. तुम्ही `का` स्पष्ट करत आहात, `कसे` नाही.
+विषयासाठी आज्ञार्थी, वर्तमानकाळाचा वापर करा: "change" नाही "changed" किंवा "changes". 
+विषयाप्रमाणेच, शरीरात (पर्यायी) देखील आज्ञार्थी, वर्तमानकाळाचा वापर करा. शरीरात बदलासाठी प्रेरणा समाविष्ट करावी आणि मागील वर्तनाशी याची तुलना करावी. तुम्ही `का` समजावत आहात, `कसे` नाही.
 
-✅ GitHub वर थोडे फिरा. तुम्हाला खरोखरच उत्कृष्ट commit संदेश सापडतो का? तुम्हाला खूपच कमी माहिती असलेला संदेश सापडतो का? commit संदेशामध्ये कोणती माहिती सर्वात महत्त्वाची आणि उपयुक्त आहे असे तुम्हाला वाटते?
+✅ काही वेळ काढून GitHub वर सर्फ करा. तुम्हाला एक खूप चांगला कमिट संदेश सापडतो का? तुम्हाला एक खूपच साधा सापडतो का? कमिट संदेशात कोणती माहिती सर्वात महत्त्वाची आणि उपयुक्त वाटते?
 
 ## इतरांसोबत काम करणे (मजेदार भाग!)
 
-तुमची टोपी धरून ठेवा कारण इथेच GitHub पूर्णपणे जादुई बनते! 🪄 तुम्ही तुमचा स्वतःचा कोड व्यवस्थापित करण्यात पारंगत झाला आहात, पण आता आम्ही माझा सर्वात आवडता भाग – जगभरातील आश्चर्यकारक लोकांसोबत सहयोग करणे – यामध्ये डुबकी मारत आहोत.
+तुमची टोपी धरून ठेवा कारण इथेच GitHub पूर्णपणे जादुई बनतो! 🪄 तुम्ही तुमचा स्वतःचा कोड व्यवस्थापित करण्यात निपुण झाला आहात, पण आता आपण माझ्या आवडत्या भागात प्रवेश करतो – जगभरातील अद्भुत लोकांसोबत सहकार्य करणे.
 
-कल्पना करा: तुम्ही उद्या उठता आणि पाहता की टोकियोमधील कोणीतरी तुमचा कोड सुधारला आहे, जेव्हा तुम्ही झोपले होते. मग बर्लिनमधील कोणीतरी तुम्हाला अडचणीत टाकणारी बग दुरुस्त करते. दुपारपर्यंत, साओ पाउलोमधील एक विकसक तुम्ही कधी विचार केला नाही असा एक फिचर जोडतो. हे विज्ञान कल्पनारम्य नाही – हे फक्त GitHub विश्वातील मंगळवार आहे!
+कल्पना करा: तुम्ही उद्या सकाळी उठता आणि पाहता की टोकियोमधील कोणीतरी तुमचा कोड सुधारला आहे. मग बर्लिनमधील कोणीतरी तुम्हाला अडचणीत टाकणारा बग दुरुस्त करतो. दुपारपर्यंत, साओ पाउलोमधील एक डेव्हलपर तुम्हाला कधीही विचारात न आलेली एक नवीन वैशिष्ट्य जोडतो. हे विज्ञानकथा नाही – हे फक्त GitHub विश्वातील एक सामान्य मंगळवार आहे!
 
-मला खरोखरच उत्साहित करणारी गोष्ट म्हणजे तुम्ही शिकत असलेल्या सहयोग कौशल्य? हे अगदी तेच वर्कफ्लो आहेत जे Google, Microsoft आणि तुमच्या आवडत्या स्टार्टअप्समधील टीम्स दररोज वापरतात. तुम्ही फक्त एक छान साधन शिकत नाही आहात – तुम्ही गुप्त भाषा शिकत आहात जी संपूर्ण सॉफ्टवेअर जगाला एकत्र काम करण्यास सक्षम करते.
+मला खूप उत्साह येतो कारण तुम्ही आता शिकत असलेल्या सहकार्य कौशल्यांमुळे? हेच ते अचूक वर्कफ्लो आहेत जे Google, Microsoft, आणि तुमच्या आवडत्या स्टार्टअप्समधील टीम्स दररोज वापरतात. तुम्ही फक्त एक छान साधन शिकत नाही आहात – तुम्ही संपूर्ण सॉफ्टवेअर जगाला एकत्र काम करण्यास सक्षम करणारी गुप्त भाषा शिकत आहात.
 
-खरंच, जेव्हा तुम्ही तुमचा पहिला pull request merge होण्याचा आनंद अनुभवता, तेव्हा तुम्हाला समजेल की विकसक ओपन सोर्सबद्दल इतके उत्साही का होतात. हे जगातील सर्वात मोठ्या, सर्वात सर्जनशील टीम प्रोजेक्टचा भाग असल्यासारखे आहे!
+खरंच, जेव्हा तुम्हाला तुमचा पहिला pull request merge झाल्याचा आनंद होतो, तेव्हा तुम्हाला समजेल की डेव्हलपर्स ओपन सोर्सबद्दल इतके उत्साही का होतात. हे जगातील सर्वात मोठ्या, सर्वात सर्जनशील टीम प्रोजेक्टचा भाग असल्यासारखं आहे!
 
 > व्हिडिओ पहा
 >
 > [![Git आणि GitHub मूलभूत गोष्टींचा व्हिडिओ](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
 
-GitHub वर गोष्टी ठेवण्याचे मुख्य कारण म्हणजे इतर विकसकांसोबत सहयोग करणे शक्य करणे.
+GitHub वर गोष्टी ठेवण्याचं मुख्य कारण म्हणजे इतर डेव्हलपर्ससोबत सहकार्य करणे शक्य होणे.
+
+```mermaid
+flowchart LR
+    A[🔍 Find Project] --> B[🍴 Fork Repository]
+    B --> C[📥 Clone to Local]
+    C --> D[🌿 Create Branch]
+    D --> E[✏️ Make Changes]
+    E --> F[💾 Commit Changes]
+    F --> G[📤 Push Branch]
+    G --> H[🔄 Create Pull Request]
+    H --> I{Maintainer Review}
+    I -->|✅ Approved| J[🎉 Merge!]
+    I -->|❓ Changes Requested| K[📝 Make Updates]
+    K --> F
+    J --> L[🧹 Clean Up Branches]
+    
+    style A fill:#e3f2fd
+    style J fill:#e8f5e8
+    style L fill:#fff3e0
+```
 
-तुमच्या रेपॉझिटरीमध्ये, `Insights > Community` वर जा आणि तुमचा प्रोजेक्ट शिफारस केलेल्या समुदाय मानकांशी कसा तुलना करतो ते पहा.
+तुमच्या रेपॉजिटरीमध्ये, `Insights > Community` ला जा आणि तुमचा प्रकल्प शिफारस केलेल्या समुदाय मानकांशी कसा तुलना करतो ते पहा.
 
-तुमची रेपॉझिटरी व्यावसायिक आणि स्वागतार्ह दिसण्यासाठी इच्छुक आहात? तुमच्या रेपॉझिटरीकडे जा आणि `Insights > Community` वर क्लिक करा. ही छान सुविधा तुम्हाला दाखवते की GitHub समुदाय "चांगल्या रेपॉझिटरी पद्धती" मानतो त्यांच्याशी तुमचा प्रोजेक्ट कसा तुलना करतो.
+तुमची रेपॉजिटरी व्यावसायिक आणि स्वागतार्ह दिसावी असं वाटतंय? तुमच्या रेपॉजिटरीमध्ये जा आणि `Insights > Community` वर क्लिक करा. ही छान वैशिष्ट्य तुम्हाला दाखवते की तुमचा प्रकल्प GitHub समुदायाच्या "चांगल्या रेपॉजिटरी पद्धतींशी" कसा तुलना करतो.
 
-> 🎯 **तुमचा प्रोजेक्ट चमकदार बनवणे**: चांगल्या प्रकारे आयोजित केलेली रेपॉझिटरी चांगल्या दस्तऐवजीकरणासह स्वच्छ, स्वागतार्ह स्टोअरफ्रंटसारखी आहे. हे लोकांना तुमच्या कामाची काळजी आहे हे सांगते आणि इतरांना योगदान देण्याची इच्छा निर्माण करते!
+> 🎯 **तुमचा प्रकल्प चमकवा**: चांगल्या प्रकारे आयोजित केलेली रेपॉजिटरी आणि चांगल्या दस्तऐवजांसह, जणू काही स्वच्छ, स्वागतार्ह दुकानासारखी असते. हे लोकांना तुमच्या कामाबद्दल काळजी आहे हे सांगते आणि इतरांना योगदान देण्याची इच्छा निर्माण करते!
 
-**एक रेपॉझिटरी उत्कृष्ट बनवण्यासाठी काय आवश्यक आहे:**
+**एक उत्कृष्ट रेपॉजिटरी कशी बनवायची:**
 
-| काय जोडायचे | का महत्त्वाचे आहे | तुमच्यासाठी काय करते |
-|-------------|-------------------|---------------------|
-| **Description** | पहिली छाप महत्त्वाची आहे! | लोकांना त्वरित कळते की तुमचा प्रोजेक्ट काय करतो |
-| **README** | तुमच्या प्रोजेक्टचे मुख्य पृष्ठ | नवीन अभ्यागतांसाठी एक मैत्रीपूर्ण मार्गदर्शकासारखे |
-| **Contributing Guidelines** | तुम्ही मदत स्वागत करता हे दाखवते | लोकांना नक्की कळते की ते तुम्हाला कसे मदत करू शकतात |
-| **Code of Conduct** | एक मैत्रीपूर्ण जागा तयार करते | प्रत्येकजण सहभागी होण्यासाठी स्वागतार्ह वाटतो |
-| **License** | कायदेशीर स्पष्टता | इतरांना तुमचा कोड कसा वापरायचा हे कळते |
-| **Security Policy** | तुम्ही जबाबदार आहात हे दाखवते | व्यावसायिक पद्धती दर्शवते |
+| काय जोडायचं | का महत्त्वाचं आहे | तुमच्यासाठी काय करतो |
+|--------------|-------------------|-----------------------|
+| **वर्णन** | पहिलं छाप महत्त्वाचं आहे! | लोकांना लगेच कळतं की तुमचा प्रकल्प काय करतो |
+| **README** | तुमच्या प्रकल्पाचं मुख्य पान | नवीन अभ्यागतांसाठी एक मैत्रीपूर्ण मार्गदर्शक |
+| **Contributing Guidelines** | मदतीचं स्वागत दाखवतं | लोकांना नेमकं कळतं की ते तुम्हाला कसं मदत करू शकतात |
+| **Code of Conduct** | एक मैत्रीपूर्ण जागा तयार करते | प्रत्येकाला सहभागी होण्यासाठी स्वागतार्ह वाटतं |
+| **License** | कायदेशीर स्पष्टता | इतरांना तुमचा कोड कसा वापरायचा हे कळतं |
+| **Security Policy** | जबाबदारपणाचं प्रदर्शन | व्यावसायिक पद्धती दाखवते |
 
-> 💡 **प्रो टिप**: GitHub या सर्व फाइल्ससाठी टेम्पलेट्स प्रदान करते. नवीन रेपॉझिटरी तयार करताना, या फाइल्स स्वयंचलितपणे तयार करण्यासाठी बॉक्स तपासा.
+> 💡 **प्रो टिप**: GitHub या सर्व फाइल्ससाठी टेम्पलेट्स प्रदान करतो. नवीन रेपॉजिटरी तयार करताना, या फाइल्स आपोआप तयार करण्यासाठी बॉक्सेस तपासा.
 
-**आधुनिक GitHub वैशिष्ट्ये एक्सप्लोर करा:**
+**आधुनिक GitHub वैशिष्ट्ये शोधा:**
 
 🤖 **ऑटोमेशन आणि CI/CD:**
 - **GitHub Actions** स्वयंचलित चाचणी आणि तैनातीसाठी
-- **Dependabot** स्वयंचलित dependency अपडेटसाठी
+- **Dependabot** स्वयंचलित डिपेंडन्सी अपडेट्ससाठी
 
-💬 **समुदाय आणि प्रोजेक्ट व्यवस्थापन:**
+💬 **समुदाय आणि प्रकल्प व्यवस्थापन:**
 - **GitHub Discussions** समस्यांपलीकडे समुदाय संभाषणांसाठी
-- **GitHub Projects** कानबन-शैली प्रोजेक्ट व्यवस्थापनासाठी
-- **Branch protection rules** कोड गुणवत्ता मानके लागू करण्यासाठी
+- **GitHub Projects** कानबान-शैली प्रकल्प व्यवस्थापनासाठी
+- **Branch protection rules** कोड गुणवत्ता मानक लागू करण्यासाठी
 
-हे सर्व संसाधने नवीन टीम सदस्यांना ऑनबोर्डिंगसाठी फायदेशीर ठरतील. आणि हीच ती गोष्टी आहेत ज्याकडे नवीन योगदानकर्ते तुमचा कोड पाहण्याआधी लक्ष देतात, हे शोधण्यासाठी की तुमचा प्रोजेक्ट त्यांचा वेळ घालवण्यासाठी योग्य ठिकाण आहे का.
+हे सर्व संसाधने नवीन टीम सदस्यांना onboard करण्यासाठी फायदेशीर ठरतील. आणि हेच ते प्रकार आहेत जे नवीन योगदानकर्ते तुमचा कोड पाहण्याआधी पाहतात, हे शोधण्यासाठी की तुमचा प्रकल्प त्यांचा वेळ खर्च करण्यासाठी योग्य आहे का.
 
-✅ README फाइल्स, जरी त्यांना तयार करण्यासाठी वेळ लागतो, व्यस्त देखभाल करणाऱ्यांकडून अनेकदा दुर्लक्षित केल्या जातात. तुम्हाला विशेषतः वर्णनात्मक README फाइलचा एक उदाहरण सापडते का? लक्षात ठेवा: [चांगल्या README तयार करण्यासाठी काही साधने](https://www.makeareadme.com/) आहेत जी तुम्हाला वापरायची इच्छा असू शकते.
+✅ README फाइल्स, जरी तयार करण्यात वेळ लागतो, तरीही व्यस्त मेंटेनर्सकडून अनेकदा दुर्लक्षित केल्या जातात. तुम्हाला एखाद्या विशेषतः वर्णनात्मक README चं उदाहरण सापडतं का? लक्षात ठेवा: [चांगल्या README तयार करण्यासाठी काही साधने](https://www.makeareadme.com/) आहेत जी तुम्हाला वापरायला आवडतील.
 
-### कार्य: काही कोड merge करा
+### कार्य: काही कोड मर्ज करा
 
-Contributing दस्तऐवज लोकांना प्रोजेक्टमध्ये योगदान देण्यास मदत करतो. हे स्पष्ट करते की तुम्ही कोणत्या प्रकारचे योगदान शोधत आहात आणि प्रक्रिया कशी कार्य करते. योगदानकर्त्यांना GitHub वर तुमच्या रेपॉझिटरीमध्ये योगदान देण्यासाठी काही चरणांमधून जावे लागेल:
+Contributing दस्तऐवज लोकांना प्रकल्पात योगदान देण्यास मदत करतो. यात तुम्ही कोणत्या प्रकारच्या योगदानाची अपेक्षा करता आणि प्रक्रिया कशी कार्य करते हे स्पष्ट केलं जातं. योगदानकर्त्यांना GitHub वर तुमच्या रेपॉजिटरीमध्ये योगदान देण्यासाठी काही टप्पे पार करावे लागतील:
 
-1. **तुमची रेपॉझिटरी fork करणे** तुम्हाला कदाचित लोकांना तुमचा प्रोजेक्ट _fork_ करायचा असेल. Forking म्हणजे त्यांच्या GitHub प्रोफाइलवर तुमच्या रेपॉझिटरीची प्रत तयार करणे.
-1. **Clone**. त्यानंतर ते प्रोजेक्ट त्यांच्या स्थानिक मशीनवर clone करतील.
-1. **शाखा तयार करा**. तुम्हाला त्यांना त्यांच्या कामासाठी एक _शाखा_ तयार करण्यास सांगायचे आहे.
-1. **त्यांचा बदल एका क्षेत्रावर केंद्रित करा**. योगदानकर्त्यांना एकावेळी एका गोष्टीवर लक्ष केंद्रित करण्यास सांगा - अशा प्रकारे तुम्ही त्यांचे काम _merge_ करण्याची शक्यता जास्त आहे. कल्पना करा त्यांनी बग फिक्स लिहिली, नवीन फिचर जोडले आणि अनेक चाचण्या अपडेट केल्या - काय असेल जर तुम्हाला, किंवा तुम्ही फक्त 3 पैकी 2 किंवा 1 बदल लागू करू शकता?
+1. **तुमची रेपॉजिटरी Fork करणे**. तुम्हाला कदाचित लोकांना तुमचा प्रकल्प _fork_ करायला सांगायचं असेल. Forking म्हणजे त्यांच्या GitHub प्रोफाइलवर तुमच्या रेपॉजिटरीची प्रत तयार करणे.
+1. **Clone**. त्यानंतर ते प्रकल्प त्यांच्या स्थानिक मशीनवर clone करतील.
+1. **शाखा तयार करा**. तुम्हाला त्यांना त्यांच्या कामासाठी एक _शाखा_ तयार करायला सांगायचं आहे.
+1. **त्यांचा बदल एका क्षेत्रावर केंद्रित करा**. योगदानकर्त्यांना एकावेळी एका गोष्टीवर लक्ष केंद्रित करण्यास सांगा - अशा प्रकारे त्यांचे काम _merge_ होण्याची शक्यता जास्त आहे. कल्पना करा की त्यांनी एक बग फिक्स लिहिला, एक नवीन वैशिष्ट्य जोडले, आणि अनेक चाचण्या अपडेट केल्या - काय होईल जर तुम्हाला, किंवा तुम्ही फक्त 2 पैकी 3, किंवा 1 पैकी 3 बदल लागू करू शकता?
 
-✅ शाखा चांगला कोड लिहिण्यासाठी आणि शिप करण्यासाठी विशेषतः महत्त्वाच्या असलेल्या परिस्थितीची कल्पना करा. तुम्ही कोणते उपयोग प्रकरणे विचार करू शकता?
+✅ अशा परिस्थितीची कल्पना करा जिथे शाखा चांगला कोड लिहिण्यासाठी आणि पाठवण्यासाठी विशेषतः महत्त्वाच्या असतात. तुम्हाला कोणते उपयोग प्रकरणे सुचतात?
 
-> लक्षात ठेवा, तुम्ही जगात पाहू इच्छित असलेल्या बदलाचे प्रतीक बना आणि तुमच्या स्वतःच्या कामासाठी शाखा तयार करा. तुम्ही केलेले कोणतेही commits तुम्ही सध्या "चेक आउट" केलेल्या शाखेवर केले जातील. `git status` वापरून ती कोणती शाखा आहे ते पहा.
+> लक्षात ठेवा, तुम्हाला जगात पाहायचा आहे तो बदल व्हा, आणि तुमच्या स्वतःच्या कामासाठीही शाखा तयार करा. तुम्ही केलेले कोणतेही कमिट्स तुम्ही सध्या "चेक आउट" केलेल्या शाखेत केले जातील. `git status` वापरून ती कोणती शाखा आहे ते पहा.
 
-चला योगदानकर्ता वर्कफ्लो पाहूया. गृहीत धरा की योगदानकर्त्याने आधीच रेपॉझिटरी _fork_ आणि _clone_ केली आहे त्यामुळे त्यांच्याकडे स्थानिक मशीनवर काम करण्यासाठी Git रेपॉझिटरी तयार आहे:
+चला एक योगदानकर्ता वर्कफ्लो पाहू. गृहीत धरा की योगदानकर्त्याने आधीच रेपॉजिटरी _fork_ आणि _clone_ केली आहे, त्यामुळे त्यांच्याकडे स्थानिक मशीनवर काम करण्यासाठी Git रेपो तयार आहे:
 
-1. **शाखा तयार करा**. `git branch` कमांड वापरून शाखा तयार करा जी ते योगदान देण्याचा विचार करत असलेल्या बदलांचा समावेश करेल:
+1. **शाखा तयार करा**. `git branch` कमांड वापरून एक शाखा तयार करा जी ते योगदान देऊ इच्छित असलेल्या बदलांचा समावेश करेल:
 
    ```bash
    git branch [branch-name]
@@ -355,13 +443,13 @@ Contributing दस्तऐवज लोकांना प्रोजेक
    git switch -c [branch-name]
    ```
 
-1. **कामाच्या शाखेवर स्विच करा**. निर्दिष्ट शाखेवर स्विच करा आणि `git switch` वापरून कार्यरत निर्देशिका अपडेट करा:
+1. **कामाच्या शाखेत स्विच करा**. निर्दिष्ट शाखेत स्विच करा आणि `git switch` सह कार्यरत निर्देशिका अपडेट करा:
 
    ```bash
    git switch [branch-name]
    ```
 
-   > 💡 **आधुनिक टिप**: शाखा बदलताना `git switch` हे `git checkout` चे आधुनिक पर्याय आहे. हे स्पष्ट आणि सुरक्षीत आहे.
+   > 💡 **आधुनिक टिप**: शाखा बदलताना `git switch` हे `git checkout` चे आधुनिक पर्याय आहे. हे अधिक स्पष्ट आणि नवशिक्यांसाठी सुरक्षित आहे.
 
 1. **काम करा**. या टप्प्यावर तुम्हाला तुमचे बदल जोडायचे आहेत. खालील कमांडसह Git ला त्याबद्दल सांगायला विसरू नका:
 
@@ -370,88 +458,124 @@ Contributing दस्तऐवज लोकांना प्रोजेक
    git commit -m "my changes"
    ```
 
-   > ⚠️ **Commit संदेश गुणवत्ता**: तुमच्या commit ला चांगले नाव द्या, तुमच्यासाठी आणि तुम्ही मदत करत असलेल्या रेपॉझिटरीच्या देखभालकर्त्यासाठी. तुम्ही काय बदलले याबद्दल विशिष्ट रहा!
+   > ⚠️ **कमिट संदेश गुणवत्ता**: तुमच्या कमिटला चांगलं नाव द्या, तुमच्यासाठी आणि तुम्ही मदत करत असलेल्या रेपोच्या मेंटेनरसाठी. तुम्ही काय बदललं याबद्दल विशिष्ट व्हा!
 
-1. **तुमचे काम `main` शाखेसोबत एकत्र करा**. काही वेळाने तुम्ही काम पूर्ण केले आहे आणि तुम्हाला तुमचे काम `main` शाखेसोबत एकत्र करायचे आहे. दरम्यान `main` शाखा बदलली असू शकते त्यामुळे खालील कमांडसह ती प्रथम नवीनतमवर अपडेट करा:
+1. **तुमचं काम `main` शाखेसोबत एकत्र करा**. एका टप्प्यावर तुम्ही काम पूर्ण करता आणि तुमचं काम `main` शाखेसोबत एकत्र करायचं असतं. दरम्यान `main` शाखा बदलली असेल, त्यामुळे खालील कमांडसह ती आधी नवीनतम स्थितीत अपडेट करा:
 
    ```bash
    git switch main
    git pull
    ```
 
-   या टप्प्यावर तुम्हाला खात्री करायची आहे की कोणतेही _conflicts_, ज्या परिस्थितीत Git सहजपणे _combine_ करू शकत नाही, तुमच्या कार्यरत शाखेत होतात. म्हणून खालील कमांड चालवा:
+   या टप्प्यावर तुम्हाला खात्री करायची आहे की कोणतेही _conflicts_, जिथे Git सहजपणे _combine_ करू शकत नाही, ते तुमच्या कार्यरत शाखेत होतात. म्हणून खालील कमांड्स चालवा:
 
    ```bash
    git switch [branch_name]
    git merge main
    ```
 
-   `git merge main` कमांड `main` मधील सर्व बदल तुमच्या शाखेत आणेल. आशा आहे की तुम्ही फक्त पुढे जाऊ शकता. जर तसे नसेल, तर VS Code तुम्हाला सांगेल की Git _गोंधळलेला_ आहे आणि तुम्ही प्रभावित फाइल्स बदलून सर्वात अचूक सामग्री सांगू शकता.
+   `git merge main` कमांड `main` मधील सर्व बदल तुमच्या शाखेत आणेल. आशा आहे की तुम्ही फक्त पुढे जाऊ शकता. जर नाही, तर VS Code तुम्हाला सांगेल की Git कुठे _गोंधळलेला_ आहे आणि तुम्ही प्रभावित फाइल्स बदलून योग्य सामग्री निवडू शकता.
 
    💡 **आधुनिक पर्याय**: स्वच्छ इतिहासासाठी `git rebase` वापरण्याचा विचार करा:
    ```bash
    git rebase main
    ```
-   हे तुमचे commits नवीनतम main शाखेच्या वर पुन्हा प्ले करते, एक रेखीय इतिहास तयार करते.
+   हे तुमचे कमिट्स नवीनतम main शाखेच्या वर पुन्हा प्ले करते, एक रेषीय इतिहास तयार करते.
 
-1. **तुमचे काम GitHub वर पाठवा**. तुमचे काम GitHub वर पाठवणे म्हणजे दोन गोष्टी. तुमची शाखा तुमच्या रेपॉझिटरीवर पुश करणे आणि नंतर PR, Pull Request उघडणे.
+1. **तुमचं काम GitHub वर पाठवा**. तुमचं काम GitHub वर पाठवणं म्हणजे दोन गोष्टी. तुमची शाखा तुमच्या forked रेपॉजिटरीवर पुश करा आणि नंतर एक PR (Pull Request) उघडा.
 
    ```bash
    git push --set-upstream origin [branch-name]
    ```
 
-   वरील कमांड तुमच्या forked रेपॉझिटरीवर शाखा तयार करते.
-
-1. **PR उघडा**. पुढे, तुम्हाला PR उघडायचा आहे. तुम्ही GitHub वर forked रेपॉझिटरीवर नेव्हिगेट करून ते करता. GitHub वर तुम्हाला एक सूचक दिसेल जिथे ते विचारते की तुम्हाला नवीन PR तयार करायचा आहे का, तुम्ही त्यावर क्लिक करता आणि तुम्हाला एक इंटरफेसवर नेले जाते जिथे तुम्ही commit संदेश शीर्षक बदलू शकता, त्याला अधिक योग्य वर्णन देऊ शकता. आता तुम्ही fork केलेल्या रेपॉझिटरीचा देखभालकर्ता हा PR पाहील आणि _बोटे क्रॉस करून_ ते तुमचा PR _merge_ करतील. तुम्ही आता योगदानकर्ता आहात, याय :)
-
-   💡 **आधुनिक टिप**: तुम्ही GitHub CLI वापरून PR देखील तयार करू शकता:
-   ```bash
-   gh pr create --title "Your PR title" --body "Description of changes"
-   ```
+   वरील कमांड तुमच्या forked रेपॉजिटरीवर शाखा तयार करते.
+
+### 🤝 **सहकार्य कौशल्य तपासणी: इतरांसोबत काम करण्यासाठी तयार आहात का?**
+
+**सहकार्याबद्दल तुमचं कसं वाटतंय ते पाहूया:**
+- Forking आणि pull requests ची कल्पना आता तुम्हाला समजली का?
+- शाखांसोबत काम करण्याबद्दल तुम्हाला कोणती गोष्ट अधिक सराव करायची आहे?
+- इतरांच्या प्रकल्पात योगदान देण्याबद्दल तुम्हाला कितपत आत्मविश्वास वाटतो?
+
+```mermaid
+mindmap
+  root((Git Collaboration))
+    Branching
+      Feature branches
+      Bug fix branches
+      Experimental work
+    Pull Requests
+      Code review
+      Discussion
+      Testing
+    Best Practices
+      Clear commit messages
+      Small focused changes
+      Good documentation
+```
 
-   🔧 **PR साठी सर्वोत्तम पद्धती**:
-   - संबंधित समस्यांना "Fixes #123" सारख्या कीवर्डसह लिंक करा.
-   - UI बदलांसाठी स्क्रीनशॉट जोडा.
-   - विशिष्ट पुनरावलोकनकर्त्यांची विनंती करा.
-   - काम चालू असलेल्या draft PR वापरा.
-   - पुनरावलोकनाची विनंती करण्यापूर्वी सर्व CI तपासण्या पास झाल्या आहेत याची खात्री करा.
+> **आत्मविश्वास वाढवणारा**: तुम्ही ज्या प्रत्येक डेव्हलपरचं कौतुक करता, ते कधी ना कधी त्यांच्या पहिल्या pull request बद्दल चिंतित होते. GitHub समुदाय नवशिक्यांसाठी खूप स्वागतार्ह आहे!
 
-1. **स्वच्छता करा**. तुम्ही यशस्वीरित्या PR merge केल्यानंतर _स्वच्छता_ करणे चांगली पद्धत मानली जाते. तुम्हाला तुमची स्थानिक शाखा आणि तुम्ही GitHub वर पुश केलेली शाखा साफ करायची आहे. प्रथम खालील कमांडसह ती स्थानिकपणे हटवा:
+1. **PR उघडा**. पुढे, तुम्हाला PR उघडायचं आहे. तुम्ही GitHub वर forked रेपॉजिटरीकडे जाऊन हे करू शकता. GitHub वर तुम्हाला एक सूचना दिसेल जिथे विचारलं जाईल की तुम्हाला नवीन PR तयार कराय
+1. **स्वच्छता करा**. PR यशस्वीपणे मर्ज केल्यानंतर स्वच्छता करणे चांगली पद्धत मानली जाते. तुम्हाला तुमची स्थानिक शाखा आणि GitHub वर पुश केलेली शाखा दोन्ही स्वच्छ करायची असते. प्रथम, खालील कमांडसह ती स्थानिक स्तरावर हटवा:
 
    ```bash
    git branch -d [branch-name]
    ```
 
-   नंतर GitHub पृष्ठावर forked रेपॉझिटरीसाठी जा आणि तुम्ही त्यावर पुश केलेली remote शाखा काढा.
-
-`Pull request` हा शब्द मूर्ख वाटतो कारण खरं तर तुम्हाला तुमचे बदल प्रोजेक्टमध्ये पुश करायचे आहेत. पण देखभालकर्ता (प्रोजेक्ट मालक) किंवा कोर टीमला प्रोज
-🤞सर्व चाचण्या यशस्वी होतील आणि प्रकल्प मालक तुमचे बदल प्रकल्पात समाविष्ट करतील अशी आशा आहे🤞
+   नंतर GitHub वर फोर्क केलेल्या रेपोच्या पृष्ठावर जा आणि तुम्ही नुकतीच पुश केलेली रिमोट शाखा हटवा.
 
-तुमच्या स्थानिक शाखेत GitHub वरील संबंधित रिमोट शाखेतील सर्व नवीन कमिट्ससह अद्यतन करा:
+`Pull request` हा शब्द थोडा विचित्र वाटतो कारण प्रत्यक्षात तुम्हाला तुमचे बदल प्रोजेक्टमध्ये पुश करायचे असतात. परंतु मेंटेनर (प्रोजेक्ट मालक) किंवा कोर टीमला तुमचे बदल प्रोजेक्टच्या "main" शाखेसोबत मर्ज करण्यापूर्वी विचार करणे आवश्यक असते, त्यामुळे तुम्ही प्रत्यक्षात मेंटेनरकडून बदलाचा निर्णय मागत आहात.
 
-`git pull`
+पुल रिक्वेस्ट ही एक जागा आहे जिथे शाखेवर केलेल्या बदलांची तुलना आणि चर्चा केली जाते, त्यात पुनरावलोकने, टिप्पण्या, एकत्रित चाचण्या आणि बरेच काही समाविष्ट असते. एक चांगला पुल रिक्वेस्ट साधारणपणे कमिट मेसेजसारखेच नियम पाळतो. तुम्ही तुमच्या कामाने एखाद्या समस्येचे निराकरण केले असल्यास, तुम्ही इश्यू ट्रॅकरमधील इश्यूचा संदर्भ जोडू शकता. हे `#` नंतर तुमच्या इश्यूचा क्रमांक वापरून केले जाते. उदाहरणार्थ `#97`.
 
-## ओपन सोर्समध्ये योगदान द्या (तुमची प्रभाव टाकण्याची संधी!)
+🤞 बोटं क्रॉस करा की सर्व चेक्स पास होतील आणि प्रोजेक्ट मालक तुमचे बदल प्रोजेक्टमध्ये मर्ज करतील 🤞
 
-तुम्ही काहीतरी जबरदस्त अनुभवायला तयार आहात का? 🤯 चला ओपन सोर्स प्रकल्पांमध्ये योगदान देण्याबद्दल बोलूया – आणि हे तुमच्यासोबत शेअर करताना मला खूप उत्साह वाटतो!
+तुमच्या स्थानिक कार्यरत शाखेत GitHub वरच्या संबंधित रिमोट शाखेतील सर्व नवीन कमिट्स अपडेट करा:
 
-हे तुमच्यासाठी काहीतरी विलक्षण गोष्टीचा भाग होण्याची संधी आहे. कल्पना करा, दररोज लाखो विकसक वापरत असलेल्या साधनांमध्ये सुधारणा करणे किंवा तुमच्या मित्रांना आवडणाऱ्या अॅपमधील बग दुरुस्त करणे. हे फक्त स्वप्न नाही – हेच ओपन सोर्स योगदान आहे!
-
-मला नेहमीच रोमांचक वाटते: तुम्ही शिकत असलेल्या प्रत्येक साधनाने – तुमचा कोड एडिटर, आपण एक्सप्लोर करणार असलेले फ्रेमवर्क, अगदी तुम्ही वाचत असलेला ब्राउझर – एखाद्या व्यक्तीने सुरुवात केली होती, ज्याने त्यांचे पहिले योगदान दिले होते. तुमच्या आवडत्या VS Code एक्सटेंशन तयार करणारा तो प्रतिभावान विकसक? ते एकदा नवशिक्या होते, ज्यांनी "create pull request" वर क्लिक केले होते, अगदी तुम्ही करणार आहात तसे.
+`git pull`
 
-आणि सर्वात सुंदर भाग म्हणजे: ओपन सोर्स समुदाय म्हणजे इंटरनेटचा सर्वात मोठा गट आलिंगन आहे. बहुतेक प्रकल्प नवशिक्यांसाठी सक्रियपणे शोध घेतात आणि "good first issue" टॅग असलेल्या समस्या ठेवतात, विशेषतः तुमच्यासारख्या लोकांसाठी! मेंटेनर्स नवीन योगदानकर्त्यांना पाहून खरोखर उत्साहित होतात कारण त्यांना त्यांच्या स्वतःच्या पहिल्या पायऱ्या आठवतात.
+## ओपन सोर्समध्ये योगदान देणे (तुमची प्रभाव टाकण्याची संधी!)
+
+तुम्ही काहीतरी असे करण्यासाठी तयार आहात जे तुमच्या मनाला पूर्णपणे उडवून देईल? 🤯 चला ओपन सोर्स प्रोजेक्ट्समध्ये योगदान देण्याबद्दल बोलूया – आणि हे तुमच्यासोबत शेअर करताना मला खूप उत्साह वाटतो!
+
+ही तुमची संधी आहे काहीतरी खरोखरच असामान्य गोष्टीचा भाग बनण्याची. कल्पना करा की तुम्ही दररोज लाखो डेव्हलपर्स वापरत असलेल्या टूल्समध्ये सुधारणा करत आहात किंवा तुमच्या मित्रांना आवडणाऱ्या अॅपमधील बग दुरुस्त करत आहात. हे फक्त स्वप्न नाही – ओपन सोर्स योगदान याबद्दलच आहे!
+
+मला प्रत्येक वेळी याचा विचार करताना रोमांच का येतो: तुम्ही शिकत असलेल्या प्रत्येक टूल – तुमचा कोड एडिटर, आपण एक्सप्लोर करणार असलेले फ्रेमवर्क, अगदी तुम्ही वाचत असलेला ब्राउझर – हे सर्व एखाद्या व्यक्तीने त्यांच्या पहिल्या योगदानासह सुरू केले. तुमच्या आवडत्या VS Code एक्सटेंशनचा तो प्रतिभावान डेव्हलपर? ते एकदा नवशिके होते ज्यांनी "create pull request" क्लिक केले होते, अगदी तुम्ही आता करणार आहात तसे.
+
+आणि सर्वात सुंदर भाग म्हणजे: ओपन सोर्स समुदाय म्हणजे इंटरनेटचा सर्वात मोठा गट आलिंगन आहे. बहुतेक प्रोजेक्ट्स नवशिक्यांसाठी सक्रियपणे शोध घेतात आणि "good first issue" टॅग असलेल्या इश्यूज विशेषतः तुमच्यासारख्या लोकांसाठी असतात! मेंटेनर्स नवीन योगदानकर्ते पाहून खरोखरच उत्साहित होतात कारण त्यांना स्वतःचे पहिले पाऊल आठवते.
+
+```mermaid
+flowchart TD
+    A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
+    B --> C[📖 Read Contributing Guidelines]
+    C --> D[🍴 Fork Repository]
+    D --> E[💻 Set Up Local Environment]
+    E --> F[🌿 Create Feature Branch]
+    F --> G[✨ Make Your Contribution]
+    G --> H[🧪 Test Your Changes]
+    H --> I[📝 Write Clear Commit]
+    I --> J[📤 Push & Create PR]
+    J --> K[💬 Engage with Feedback]
+    K --> L[🎉 Merged! You're a Contributor!]
+    L --> M[🌟 Find Next Issue]
+    
+    style A fill:#e1f5fe
+    style L fill:#c8e6c9
+    style M fill:#fff59d
+```
 
-तुम्ही इथे फक्त कोड शिकत नाही – तुम्ही बिल्डर्सच्या जागतिक कुटुंबात सामील होण्यासाठी तयार होत आहात जे दररोज उठून विचार करतात "डिजिटल जग थोडं चांगलं कसं बनवता येईल?" क्लबमध्ये तुमचं स्वागत आहे! 🌟
+तुम्ही येथे कोड शिकत नाही आहात – तुम्ही बिल्डर्सच्या जागतिक कुटुंबात सामील होण्यासाठी तयार होत आहात जे दररोज उठून विचार करतात "डिजिटल जग थोडं चांगलं कसं बनवता येईल?" क्लबमध्ये स्वागत आहे! 🌟
 
-सर्वप्रथम, GitHub वर तुम्हाला आवडणाऱ्या आणि ज्यामध्ये तुम्हाला बदल करायचा आहे अशा रिपॉझिटरी (किंवा **repo**) शोधूया. तुम्हाला त्याची सामग्री तुमच्या मशीनवर कॉपी करायची असेल.
+प्रथम, GitHub वर तुम्हाला आवडणारा आणि ज्यामध्ये तुम्हाला बदल करायचा आहे असा रेपॉजिटरी (किंवा **repo**) शोधा. तुम्हाला त्याची सामग्री तुमच्या मशीनवर कॉपी करायची असेल.
 
-✅ 'नवशिक्या-अनुकूल' रिपॉझिटरी शोधण्याचा एक चांगला मार्ग म्हणजे [टॅग 'good-first-issue' ने शोधा](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+✅ 'नवशिक्यांसाठी अनुकूल' रेपो शोधण्याचा एक चांगला मार्ग म्हणजे [टॅग 'good-first-issue' द्वारे शोधा](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
 
-![रिपॉझिटरी स्थानिक पातळीवर कॉपी करा](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.mr.png)
+![रेपो स्थानिक स्तरावर कॉपी करा](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.mr.png)
 
-कोड कॉपी करण्याचे अनेक मार्ग आहेत. एक मार्ग म्हणजे HTTPS, SSH किंवा GitHub CLI (कमांड लाइन इंटरफेस) वापरून रिपॉझिटरीची सामग्री "क्लोन" करणे.
+कोड कॉपी करण्याचे अनेक मार्ग आहेत. एक मार्ग म्हणजे HTTPS, SSH किंवा GitHub CLI (कमांड लाइन इंटरफेस) वापरून रेपॉजिटरीची सामग्री "क्लोन" करणे.
 
-तुमचा टर्मिनल उघडा आणि रिपॉझिटरी क्लोन करा:
+तुमचा टर्मिनल उघडा आणि रेपॉजिटरी क्लोन करा:
 ```bash
 # Using HTTPS
 git clone https://github.com/ProjectURL
@@ -463,70 +587,70 @@ git clone git@github.com:username/repository.git
 gh repo clone username/repository
 ```
 
-प्रकल्पावर काम करण्यासाठी, योग्य फोल्डरमध्ये जा:
+प्रोजेक्टवर काम करण्यासाठी, योग्य फोल्डरमध्ये स्विच करा:
 `cd ProjectURL`
 
-तुम्ही संपूर्ण प्रकल्प उघडू शकता:
+तुम्ही संपूर्ण प्रोजेक्ट उघडू शकता:
 - **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHub चा क्लाउड डेव्हलपमेंट वातावरण, ब्राउझरमध्ये VS Code सह
 - **[GitHub Desktop](https://desktop.github.com/)** - Git ऑपरेशन्ससाठी GUI अॅप्लिकेशन  
-- **[GitHub.dev](https://github.dev)** - कोणत्याही GitHub रिपॉझिटरीवर `.` की प्रेस करा आणि ब्राउझरमध्ये VS Code उघडा
+- **[GitHub.dev](https://github.dev)** - कोणत्याही GitHub रेपोवर `.` की प्रेस करा आणि ब्राउझरमध्ये VS Code उघडा
 - **VS Code** GitHub Pull Requests एक्सटेंशनसह
 
 शेवटी, तुम्ही कोड झिप केलेल्या फोल्डरमध्ये डाउनलोड करू शकता.
 
 ### GitHub बद्दल काही अधिक मनोरंजक गोष्टी
 
-तुम्ही GitHub वर कोणत्याही सार्वजनिक रिपॉझिटरीला स्टार, वॉच आणि/किंवा "fork" करू शकता. तुमच्या स्टार केलेल्या रिपॉझिटरी तुम्हाला टॉप-राइट ड्रॉप-डाउन मेनूमध्ये सापडतील. हे बुकमार्किंगसारखे आहे, पण कोडसाठी.
+तुम्ही GitHub वर कोणत्याही सार्वजनिक रेपॉजिटरीला स्टार, वॉच आणि/किंवा "fork" करू शकता. तुम्ही तुमच्या स्टार केलेल्या रेपॉजिटरी टॉप-राइट ड्रॉप-डाउन मेनूमध्ये शोधू शकता. हे बुकमार्किंगसारखे आहे, पण कोडसाठी.
 
-प्रकल्पांमध्ये एक इश्यू ट्रॅकर असतो, मुख्यतः GitHub वर "Issues" टॅबमध्ये, जोपर्यंत अन्यथा सूचित केले जात नाही, जिथे लोक प्रकल्पाशी संबंधित समस्यांवर चर्चा करतात. आणि Pull Requests टॅब हा आहे जिथे लोक प्रगतीपथावर असलेल्या बदलांवर चर्चा आणि पुनरावलोकन करतात.
+प्रोजेक्ट्समध्ये इश्यू ट्रॅकर असतो, मुख्यतः GitHub वर "Issues" टॅबमध्ये, जोपर्यंत वेगळे सांगितले नाही, जिथे लोक प्रोजेक्टशी संबंधित समस्यांवर चर्चा करतात. आणि Pull Requests टॅब ही जागा आहे जिथे लोक प्रगतीपथावर असलेल्या बदलांवर चर्चा आणि पुनरावलोकन करतात.
 
-प्रकल्पांमध्ये फोरम, मेलिंग लिस्ट किंवा Slack, Discord किंवा IRC सारख्या चॅट चॅनेलमध्ये चर्चा देखील असू शकते.
+प्रोजेक्ट्समध्ये फोरम, मेलिंग लिस्ट्स किंवा Slack, Discord किंवा IRC सारख्या चॅट चॅनेलमध्ये चर्चा असू शकते.
 
 🔧 **आधुनिक GitHub वैशिष्ट्ये**:
-- **GitHub Discussions** - समुदाय चर्चेसाठी अंगभूत फोरम
+- **GitHub Discussions** - समुदाय संभाषणांसाठी अंगभूत फोरम
 - **GitHub Sponsors** - मेंटेनर्सना आर्थिक मदत करा  
 - **Security tab** - असुरक्षितता अहवाल आणि सुरक्षा सल्लागार
-- **Actions tab** - स्वयंचलित वर्कफ्लो आणि CI/CD पाइपलाइन पहा
-- **Insights tab** - योगदानकर्ते, कमिट्स आणि प्रकल्पाच्या आरोग्याबद्दल विश्लेषण
-- **Projects tab** - GitHub चे अंगभूत प्रकल्प व्यवस्थापन साधने
+- **Actions tab** - स्वयंचलित वर्कफ्लो आणि CI/CD पाइपलाइन्स पहा
+- **Insights tab** - योगदानकर्ते, कमिट्स आणि प्रोजेक्टच्या आरोग्याबद्दल विश्लेषण
+- **Projects tab** - GitHub चे अंगभूत प्रोजेक्ट व्यवस्थापन टूल्स
 
-✅ तुमच्या नवीन GitHub रिपॉझिटरीचा शोध घ्या आणि काही गोष्टी करून पहा, जसे की सेटिंग्ज संपादित करणे, तुमच्या रिपॉझिटरीमध्ये माहिती जोडणे, प्रकल्प तयार करणे (जसे की Kanban बोर्ड), आणि GitHub Actions सेट करणे. तुम्ही खूप काही करू शकता!
+✅ तुमच्या नवीन GitHub रेपोभोवती एक नजर टाका आणि काही गोष्टी करून पहा, जसे की सेटिंग्ज संपादित करणे, तुमच्या रेपोमध्ये माहिती जोडणे, प्रोजेक्ट तयार करणे (जसे की Kanban बोर्ड), आणि ऑटोमेशनसाठी GitHub Actions सेट करणे. तुम्ही खूप काही करू शकता!
 
 ---
 
 ## 🚀 आव्हान 
 
-ठीक आहे, आता तुमच्या नवीन GitHub कौशल्यांची चाचणी घेण्याची वेळ आली आहे! 🚀 हे आव्हान तुम्हाला सर्वकाही समजून घेण्यास मदत करेल:
+ठीक आहे, तुमच्या नवीन GitHub सुपरपॉवर्सची चाचणी घेण्याची वेळ आली आहे! 🚀 येथे एक आव्हान आहे जे सर्वकाही सर्वात समाधानकारक मार्गाने क्लिक करेल:
 
-तुमच्या मित्राला (किंवा त्या कुटुंबातील सदस्याला जो नेहमी विचारतो की तुम्ही या "कॉम्प्युटर गोष्टी"सह काय करत आहात) पकडा आणि एकत्र एक सहकार्यात्मक कोडिंग साहस सुरू करा! इथे खरी जादू घडते – एक प्रकल्प तयार करा, त्यांना ते fork करू द्या, काही शाखा तयार करा आणि तुम्ही प्रोफेशनल्ससारखे बदल मर्ज करा.
+तुमच्या मित्राला (किंवा त्या कुटुंबातील सदस्याला जो नेहमी विचारतो की तुम्ही या "कॉम्प्युटर गोष्टी"सह काय करत आहात) पकडा आणि एकत्र एक सहयोगी कोडिंग साहस सुरू करा! येथे खरी जादू घडते – एक प्रोजेक्ट तयार करा, त्यांना ते फोर्क करू द्या, काही शाखा तयार करा आणि तुम्ही प्रोफेशनल्ससारखे बदल मर्ज करा.
 
-मी खोटं बोलणार नाही – तुम्ही कदाचित हसाल (विशेषतः जेव्हा तुम्ही दोघे एकाच ओळीत बदल करण्याचा प्रयत्न कराल), कदाचित गोंधळून जाल, पण तुम्हाला नक्कीच काही आश्चर्यकारक "अरे वा!" क्षण मिळतील जे सर्व शिकण्यासारखे आहेत. शिवाय, कोणासोबत पहिला यशस्वी मर्ज शेअर करण्यामध्ये काहीतरी खास आहे – हे तुम्ही किती पुढे आला आहात याचा एक छोटासा उत्सव आहे!
+मी खोटं बोलणार नाही – तुम्ही कदाचित एखाद्या वेळी हसाल (विशेषतः जेव्हा तुम्ही दोघे एकाच ओळीत बदल करण्याचा प्रयत्न करता), कदाचित गोंधळून जाल, परंतु तुम्हाला नक्कीच ते अद्भुत "अरे वा!" क्षण मिळतील ज्यामुळे सर्व शिक्षण सार्थक वाटेल. शिवाय, एखाद्या दुसऱ्या व्यक्तीसोबत पहिला यशस्वी मर्ज शेअर करण्यामध्ये काहीतरी खास आहे – हे तुम्ही किती पुढे आला आहात याचा एक छोटासा उत्सव आहे!
 
-तुमच्याकडे अजून कोडिंग साथीदार नाही? काही हरकत नाही! GitHub समुदायात खूप स्वागतार्ह लोक आहेत ज्यांना नवीन असण्याचा अनुभव आहे. "good first issue" लेबल असलेल्या रिपॉझिटरी शोधा – ते मूलतः म्हणत आहेत "अरे नवशिक्या, आमच्यासोबत शिकायला या!" किती छान आहे ना?
+तुमच्याकडे अजून कोडिंग साथीदार नाही? काही हरकत नाही! GitHub समुदाय नवीन लोकांसाठी खूप स्वागतार्ह आहे ज्यांना नवीन असल्याचे कसे वाटते हे आठवते. "good first issue" लेबल असलेल्या रेपॉजिटरी शोधा – ते मूलतः म्हणत आहेत "अरे नवशिक्यांनो, आमच्यासोबत शिका!" हे किती छान आहे?
 
 ## पोस्ट-लेक्चर क्विझ
 [पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/en/)
 
 ## पुनरावलोकन आणि शिकत राहा
 
-व्वा! 🎉 पाहा तुम्ही – तुम्ही GitHub मूलभूत गोष्टी जिंकल्या आहेत जसे की एकदम चॅम्पियन! जर तुमचा मेंदू सध्या थोडा भरलेला वाटत असेल, तर ते पूर्णपणे सामान्य आहे आणि प्रामाणिकपणे एक चांगले लक्षण आहे. तुम्ही नुकतेच असे साधने शिकली आहेत ज्यामुळे मला सुरुवातीला काही आठवडे लागले होते.
+व्वा! 🎉 पाहा तुम्ही – तुम्ही GitHub मूलभूत गोष्टी जिंकल्या आहेत जसे की एक पूर्ण चॅम्पियन! जर तुमचा मेंदू सध्या थोडा भरलेला वाटत असेल, तर ते पूर्णपणे सामान्य आहे आणि प्रामाणिकपणे एक चांगले लक्षण आहे. तुम्ही नुकतेच असे टूल्स शिकले आहेत ज्यामुळे मला सुरुवातीला काही आठवडे लागले.
 
-Git आणि GitHub खूप शक्तिशाली आहेत (म्हणजे, खरोखर शक्तिशाली), आणि मी ओळखत असलेल्या प्रत्येक विकसकाला – ज्यांना आता जादूगार वाटतात – ते सर्व क्लिक होण्यापूर्वी सराव करावा लागला आणि थोडे गोंधळले होते. तुम्ही हा धडा पूर्ण केला आहे याचा अर्थ तुम्ही विकसकाच्या टूलकिटमधील सर्वात महत्त्वाच्या साधनांमध्ये प्रभुत्व मिळवण्याच्या मार्गावर आहात.
+Git आणि GitHub खूप शक्तिशाली आहेत (म्हणजे, खरोखर शक्तिशाली), आणि मला माहित असलेल्या प्रत्येक डेव्हलपरला – ज्यांना आता जादूगार वाटतात – सराव करावा लागला आणि ते सर्व क्लिक होण्यापूर्वी थोडेसे गोंधळले. तुम्ही हा धडा पूर्ण केला आहे याचा अर्थ असा आहे की तुम्ही डेव्हलपरच्या टूलकिटमधील सर्वात महत्त्वाच्या टूल्समध्ये प्रभुत्व मिळवण्याच्या मार्गावर आहात.
 
-तुम्हाला सराव करण्यासाठी आणि आणखी उत्कृष्ट होण्यासाठी काही विलक्षण संसाधने येथे आहेत:
+तुम्हाला सराव करण्यात आणि आणखी आश्चर्यकारक बनवण्यात मदत करण्यासाठी येथे काही उत्कृष्ट संसाधने आहेत:
 
-- [ओपन सोर्स सॉफ्टवेअरमध्ये योगदान देण्याचा मार्गदर्शक](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – फरक करण्याचा तुमचा रोडमॅप
+- [ओपन सोर्स सॉफ्टवेअरमध्ये योगदान देण्याचा मार्गदर्शक](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – फरक करण्यासाठी तुमचा रोडमॅप
 - [Git चीटशीट](https://training.github.com/downloads/github-git-cheat-sheet/) – जलद संदर्भासाठी हे सोबत ठेवा!
 
-आणि लक्षात ठेवा: सराव प्रगती करतो, परिपूर्णता नाही! तुम्ही Git आणि GitHub जितके अधिक वापराल, तेवढे अधिक नैसर्गिक होईल. GitHub ने काही आश्चर्यकारक इंटरएक्टिव कोर्सेस तयार केले आहेत जे तुम्हाला सुरक्षित वातावरणात सराव करू देतात:
+आणि लक्षात ठेवा: सराव प्रगती करतो, परिपूर्णता नाही! तुम्ही Git आणि GitHub जितके अधिक वापराल तितके अधिक नैसर्गिक वाटेल. GitHub ने काही आश्चर्यकारक इंटरएक्टिव कोर्सेस तयार केले आहेत जे तुम्हाला सुरक्षित वातावरणात सराव करू देतात:
 
 - [GitHub ची ओळख](https://github.com/skills/introduction-to-github)
 - [Markdown वापरून संवाद साधा](https://github.com/skills/communicate-using-markdown)  
 - [GitHub Pages](https://github.com/skills/github-pages)
 - [मर्ज कॉन्फ्लिक्ट्स व्यवस्थापित करणे](https://github.com/skills/resolve-merge-conflicts)
 
-**साहसी वाटत आहे? या आधुनिक साधनांचा वापर करून पहा:**
-- [GitHub CLI दस्तऐवज](https://cli.github.com/manual/) – जेव्हा तुम्हाला कमांड-लाइन जादूगारासारखे वाटायचे असेल
+**साहसी वाटत आहे? या आधुनिक टूल्स तपासा:**
+- [GitHub CLI दस्तऐवज](https://cli.github.com/manual/) – जेव्हा तुम्हाला कमांड-लाइन जादूगारासारखे वाटते
 - [GitHub Codespaces दस्तऐवज](https://docs.github.com/en/codespaces) – क्लाउडमध्ये कोड करा!
 - [GitHub Actions दस्तऐवज](https://docs.github.com/en/actions) – सर्व गोष्टी स्वयंचलित करा
 - [Git सर्वोत्तम पद्धती](https://www.atlassian.com/git/tutorials/comparing-workflows) – तुमच्या वर्कफ्लो गेमला स्तरावर आणा 
@@ -535,21 +659,57 @@ Git आणि GitHub खूप शक्तिशाली आहेत (म्
 
 Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** तुम्ही या धड्यात शिकलेल्या संपूर्ण GitHub वर्कफ्लोचे प्रदर्शन करणारा सहकार्यात्मक वेब डेव्हलपमेंट प्रकल्प तयार करा. हे आव्हान तुम्हाला रिपॉझिटरी तयार करणे, सहकार्यात्मक वैशिष्ट्ये आणि आधुनिक Git वर्कफ्लो वास्तविक-जगातील परिस्थितीत सराव करण्यास मदत करेल.
+**वर्णन:** तुम्ही या धड्यात शिकलेल्या संपूर्ण GitHub वर्कफ्लोचे प्रदर्शन करणारा सहयोगी वेब डेव्हलपमेंट प्रोजेक्ट तयार करा. हे आव्हान तुम्हाला रेपॉजिटरी तयार करणे, सहयोगी वैशिष्ट्ये आणि आधुनिक Git वर्कफ्लो वास्तविक-जगातील परिस्थितीत सराव करण्यास मदत करेल.
 
-**प्रॉम्प्ट:** "Web Development Resources" प्रकल्पासाठी एक नवीन सार्वजनिक GitHub रिपॉझिटरी तयार करा. रिपॉझिटरीमध्ये HTML, CSS, JavaScript इत्यादी श्रेणींनुसार उपयुक्त वेब डेव्हलपमेंट साधने आणि संसाधने सूचीबद्ध करणारी चांगल्या प्रकारे संरचित README.md फाइल समाविष्ट असावी. परवाना, योगदान मार्गदर्शक तत्त्वे आणि आचारसंहिता यासह योग्य समुदाय मानकांसह रिपॉझिटरी सेट करा. CSS संसाधने जोडण्यासाठी एक शाखा आणि JavaScript संसाधने जोडण्यासाठी दुसरी शाखा तयार करा. प्रत्येक शाखेत वर्णनात्मक कमिट संदेशांसह कमिट करा, नंतर बदल मुख्य शाखेत मर्ज करण्यासाठी Pull Requests तयार करा. Issues, Discussions सारख्या GitHub वैशिष्ट्यांना सक्षम करा आणि स्वयंचलित तपासणीसाठी GitHub Actions वर्कफ्लो सेट करा.
+**प्रॉम्प्ट:** "Web Development Resources" प्रोजेक्टसाठी एक नवीन सार्वजनिक GitHub रेपॉजिटरी तयार करा. रेपॉजिटरीमध्ये HTML, CSS, JavaScript इत्यादी श्रेणींनुसार उपयुक्त वेब डेव्हलपमेंट टूल्स आणि संसाधनांची यादी असलेली चांगल्या प्रकारे संरचित README.md फाइल समाविष्ट असावी. रेपॉजिटरीला योग्य समुदाय मानकांसह सेट करा ज्यामध्ये परवाना, योगदान मार्गदर्शक तत्त्वे आणि आचारसंहिता समाविष्ट आहे. CSS संसाधने जोडण्यासाठी एक शाखा आणि JavaScript संसाधने जोडण्यासाठी दुसरी शाखा तयार करा. प्रत्येक शाखेत वर्णनात्मक कमिट मेसेजसह कमिट्स करा, नंतर बदल मुख्य शाखेत मर्ज करण्यासाठी पुल रिक्वेस्ट तयार करा. इश्यूज, डिस्कशन्स सारख्या GitHub वैशिष्ट्यांना सक्षम करा आणि स्वयंचलित चेकसाठी मूलभूत GitHub Actions वर्कफ्लो सेट करा.
 
 ## असाइनमेंट 
 
-तुमचे मिशन, तुम्ही स्वीकारण्याचा निर्णय घेतल्यास: GitHub Skills वर [GitHub ची ओळख](https://github.com/skills/introduction-to-github) कोर्स पूर्ण करा. हा इंटरएक्टिव कोर्स तुम्हाला शिकलेल्या प्रत्येक गोष्टीचा सराव सुरक्षित, मार्गदर्शित वातावरणात करू देईल. शिवाय, तुम्ही पूर्ण केल्यावर तुम्हाला एक छान बॅज मिळेल! 🏅
+तुमचे मिशन, तुम्ही स्वीकारण्यास तयार असल्यास: GitHub Skills वर [GitHub ची ओळख](https://github.com/skills/introduction-to-github) कोर्स पूर्ण करा. हा इंटरएक्टिव कोर्स तुम्हाला सुरक्षित, मार्गदर्शित वातावरणात तुम्ही शिकलेल्या प्रत्येक गोष्टीचा सराव करू देईल. शिवाय, तुम्ही पूर्ण केल्यावर तुम्हाला एक छान बॅज मिळेल! 🏅
 
 **अधिक आव्हानांसाठी तयार आहात?**
 - तुमच्या GitHub खात्यासाठी SSH प्रमाणीकरण सेट करा (आता पासवर्ड नाही!)
 - तुमच्या दैनंदिन Git ऑपरेशन्ससाठी GitHub CLI वापरून पहा
-- GitHub Actions वर्कफ्लो असलेली रिपॉझिटरी तयार करा
-- GitHub Codespaces एक्सप्लोर करा आणि हीच रिपॉझिटरी क्लाउड-आधारित एडिटरमध्ये उघडा
+- GitHub Actions वर्कफ्लो असलेला रेपॉजिटरी तयार करा
+- GitHub Codespaces एक्सप्लोर करा आणि क्लाउड-बेस्ड एडिटरमध्ये हा रेपॉजिटरी उघडा
+
+---
 
-लक्षात ठेवा: प्रत्येक तज्ञ एकदा नवशिक्या होता. तुम्ही हे करू शकता! 💪
+## 🚀 तुमचा GitHub मास्टरी टाइमलाइन
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] या रेपॉजिटरीला आणि तुम्हाला आवडणाऱ्या 3 इतर प्रोजेक्ट्सना स्टार करा
+- [ ] तुमच्या GitHub खात्यावर दोन-फॅक्टर प्रमाणीकरण सेट करा
+- [ ] तुमच्या पहिल्या रेपॉजिटरीसाठी एक साधा README तयार करा
+- [ ] तुम्हाला प्रेरणा देणाऱ्या 5 डेव्हलपर्सना फॉलो करा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि तुमच्या GitHub प्रवासाचा विचार करा
+- [ ] SSH कीज सेट करा GitHub प्रमाणीकरणासाठी पासवर्डशिवाय
+- [ ] एक उत्कृष्ट कमिट मेसेजसह तुमचा पहिला अर्थपूर्ण कमिट तयार करा
+- [ ] GitHub च्या "Explore" टॅबमध्ये ट्रेंडिंग प्रोजेक्ट्स शोधा
+- [ ] रेपॉजिटरी फोर्क करण्याचा सराव करा आणि एक छोटा बदल करा
+
+### 📅 **तुमचा आठवडाभराचा GitHub साहस**
+- [ ] GitHub Skills कोर्सेस पूर्ण करा (GitHub ची ओळख, Markdown)
+- [ ] ओपन सोर्स प्रोजेक्टमध्ये तुमचा पहिला पुल रिक्वेस्ट करा
+- [ ] तुमचे काम दाखवण्यासाठी GitHub Pages साइट सेट करा
+- [ ] तुम्हाला आवडणाऱ्या प्रोजेक्ट्सवर GitHub डिस्कशन्समध्ये सामील व्हा
+- [ ] योग्य समुदाय मानकांसह रेपॉजिटरी तयार करा (README, License, इ.)
+- [ ] क्लाउड-बेस्ड डेव्हलपमेंटसाठी GitHub Codespaces वापरून पहा
+
+### 🌟 **तुमचा महिनाभराचा परिवर्तन**
+- [ ] 3 वेगवेगळ्या ओपन सोर्स प्रोजेक्ट्समध्ये योगदान द्या
+- [ ] GitHub वर नवीन व्यक्तीला मार्गदर्शन करा (पुढे जा!)
+- [ ] GitHub Actions सह स्वयंचलित वर्कफ्लो सेट करा
+- [ ] तुमच्या GitHub योगदानांचे प्रदर्शन करणारे पोर्टफोलिओ तयार करा
+- [ ] Hacktoberfest किंवा तत्सम समुदाय कार्यक्रमांमध्ये सहभागी व्हा
+- [ ] इतर लोक योगदान देत असलेल्या तुमच्या स्वतःच्या प्रोजेक्टचे मेंटेनर बना
+
+### 🎓 **GitHub मास्टरी अंतिम तपासणी**
+
+**तुम्ही किती पुढे आला आहात याचा उत्सव करा:**
+- GitHub वापरण्याबद्दल तुमची आवडती गोष्ट
 
 ---
 
diff --git a/translations/mr/1-getting-started-lessons/3-accessibility/README.md b/translations/mr/1-getting-started-lessons/3-accessibility/README.md
index 4a8d8a0fe0..2486f41c0b 100644
--- a/translations/mr/1-getting-started-lessons/3-accessibility/README.md
+++ b/translations/mr/1-getting-started-lessons/3-accessibility/README.md
@@ -1,45 +1,87 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90b19cde5b79b29e91babd3138cd8035",
-  "translation_date": "2025-10-22T15:58:52+00:00",
+  "original_hash": "7f2c48e04754724123ea100a822765e5",
+  "translation_date": "2025-11-03T14:24:00+00:00",
   "source_file": "1-getting-started-lessons/3-accessibility/README.md",
   "language_code": "mr"
 }
 -->
 # प्रवेशयोग्य वेबपृष्ठ तयार करणे
 
-![प्रवेशयोग्यता बद्दल सर्व काही](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.mr.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
+![सर्व काही प्रवेशयोग्यतेबद्दल](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.mr.png)
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
+
+```mermaid
+journey
+    title Your Accessibility Learning Adventure
+    section Foundation
+      Understanding Users: 5: You
+      Testing Tools: 4: You
+      POUR Principles: 5: You
+    section Build Skills
+      Semantic HTML: 4: You
+      Visual Design: 5: You
+      ARIA Techniques: 4: You
+    section Master Practice
+      Keyboard Navigation: 5: You
+      Form Accessibility: 4: You
+      Real-world Testing: 5: You
+```
 
 ## व्याख्यानपूर्व प्रश्नमंजुषा
 [व्याख्यानपूर्व प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/)
 
-> वेबची ताकद त्याच्या सार्वत्रिकतेत आहे. अपंगत्व असलेल्या प्रत्येक व्यक्तीला प्रवेश मिळणे ही एक अत्यावश्यक बाब आहे.
+> वेबची ताकद त्याच्या सार्वत्रिकतेत आहे. अपंगत्व असलेल्या प्रत्येक व्यक्तीला प्रवेश मिळणे ही एक महत्त्वाची बाब आहे.
 >
 > \- सर टिमोथी बर्नर्स-ली, W3C संचालक आणि वर्ल्ड वाइड वेबचे शोधक
 
-हे तुम्हाला आश्चर्यचकित करू शकते: जेव्हा तुम्ही प्रवेशयोग्य वेबसाइट्स तयार करता, तेव्हा तुम्ही फक्त अपंगत्व असलेल्या लोकांना मदत करत नाही—तुम्ही प्रत्यक्षात वेब सर्वांसाठी चांगले बनवत आहात!
+हे ऐकून तुम्हाला आश्चर्य वाटेल: जेव्हा तुम्ही प्रवेशयोग्य वेबसाइट्स तयार करता, तेव्हा तुम्ही फक्त अपंग व्यक्तींना मदत करत नाही—तुम्ही प्रत्यक्षात वेब सर्वांसाठी चांगले बनवत आहात!
 
-तुम्ही कधी रस्त्याच्या कोपऱ्यांवर असलेल्या 'कर्ब कट्स' पाहिल्या आहेत का? त्या मूळतः व्हीलचेअरसाठी डिझाइन केल्या गेल्या होत्या, पण आता त्या स्ट्रोलर्स असलेल्या लोकांना, डिलिव्हरी कामगारांना, प्रवाशांना आणि सायकलस्वारांनाही मदत करतात. प्रवेशयोग्य वेब डिझाइन नेमके असेच कार्य करते—ज्या उपाययोजना एका गटाला मदत करतात त्या अनेकदा सर्वांना फायदेशीर ठरतात. खूप छान, नाही का?
+तुम्ही कधी रस्त्याच्या कोपऱ्यावर असलेल्या उतारांवर लक्ष दिले आहे का? ते मूळतः व्हीलचेअरसाठी डिझाइन केले गेले होते, परंतु आता ते बेबी स्ट्रोलर, डिलिव्हरी कामगार, प्रवासी आणि सायकलस्वार यांना देखील मदत करतात. प्रवेशयोग्य वेब डिझाइन नेमके असेच कार्य करते—ज्या उपाययोजना एका गटाला मदत करतात त्या अनेकांना फायदेशीर ठरतात. खूप छान, नाही का?
 
 या धड्यात, आपण अशा वेबसाइट्स तयार करण्याचा शोध घेणार आहोत ज्या प्रत्येकासाठी कार्य करतात, मग ते वेब कसेही ब्राउझ करत असले तरी. तुम्ही वेब मानकांमध्ये आधीच समाविष्ट असलेल्या व्यावहारिक तंत्रांचा शोध घेणार आहात, चाचणी साधनांसह प्रत्यक्ष अनुभव घेणार आहात आणि प्रवेशयोग्यता तुमच्या साइट्स सर्व वापरकर्त्यांसाठी अधिक वापरण्यायोग्य कशी बनवते ते पाहणार आहात.
 
 या धड्याच्या शेवटी, तुम्हाला प्रवेशयोग्यता तुमच्या विकास कार्यप्रवाहाचा नैसर्गिक भाग बनवण्याचा आत्मविश्वास मिळेल. विचारपूर्वक डिझाइन निवडी वेबला अब्जावधी वापरकर्त्यांसाठी कसे खुले करू शकतात हे शोधण्यासाठी तयार आहात? चला सुरुवात करूया!
 
+```mermaid
+mindmap
+  root((Web Accessibility))
+    Users
+      Screen readers
+      Keyboard navigation
+      Voice control
+      Magnification
+    Technologies
+      HTML semantics
+      ARIA attributes
+      CSS focus indicators
+      Keyboard events
+    Benefits
+      Wider audience
+      Better SEO
+      Legal compliance
+      Universal design
+    Testing
+      Automated tools
+      Manual testing
+      User feedback
+      Real assistive tech
+```
+
 > तुम्ही हा धडा [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) वर घेऊ शकता!
 
 ## सहाय्यक तंत्रज्ञान समजून घेणे
 
-कोडिंगमध्ये उडी मारण्यापूर्वी, वेगवेगळ्या क्षमतेच्या लोक वेबचा प्रत्यक्षात कसा अनुभव घेतात हे समजून घेण्यासाठी थोडा वेळ घ्या. हे फक्त सिद्धांत नाही—या वास्तविक नेव्हिगेशन पद्धती समजून घेणे तुम्हाला खूप चांगला विकसक बनवेल!
+कोडिंगमध्ये उडी घेण्यापूर्वी, वेगवेगळ्या क्षमतेच्या लोक वेबचा प्रत्यक्षात कसा अनुभव घेतात हे समजून घेण्यासाठी थोडा वेळ घ्या. हे फक्त सिद्धांत नाही—या वास्तविक-जगातील नेव्हिगेशन पद्धती समजून घेणे तुम्हाला खूप चांगला विकसक बनवेल!
 
-सहाय्यक तंत्रज्ञान हे आश्चर्यकारक साधने आहेत जी अपंगत्व असलेल्या लोकांना वेबसाइट्सशी संवाद साधण्यास मदत करतात ज्यामुळे तुम्हाला आश्चर्य वाटेल. एकदा तुम्हाला या तंत्रज्ञानाचा उपयोग कसा करायचा हे समजले की, प्रवेशयोग्य वेब अनुभव तयार करणे अधिक अंतर्ज्ञानी होते. हे एखाद्याच्या डोळ्यांतून तुमचा कोड पाहण्यास शिकण्यासारखे आहे.
+सहाय्यक तंत्रज्ञान हे आश्चर्यकारक साधने आहेत जी अपंगत्व असलेल्या लोकांना वेबसाइट्सशी संवाद साधण्यास मदत करतात ज्यामुळे तुम्हाला आश्चर्य वाटेल. एकदा तुम्हाला या तंत्रज्ञानाचा उपयोग कसा करायचा हे समजले की, प्रवेशयोग्य वेब अनुभव तयार करणे अधिक अंतर्ज्ञानी होते. हे एखाद्याच्या दृष्टीकोनातून तुमचा कोड पाहण्यास शिकण्यासारखे आहे.
 
 ### स्क्रीन रीडर्स
 
-[स्क्रीन रीडर्स](https://en.wikipedia.org/wiki/Screen_reader) ही अत्यंत प्रगत तंत्रज्ञानाची साधने आहेत जी डिजिटल मजकूराचे भाषण किंवा ब्रेल आउटपुटमध्ये रूपांतर करतात. जरी ते प्रामुख्याने व्हिज्युअल अपंगत्व असलेल्या लोकांसाठी वापरले जात असले तरी, ते डिस्लेक्सिया सारख्या शिकण्याच्या अडचणी असलेल्या वापरकर्त्यांसाठी देखील खूप उपयुक्त आहेत.
+[स्क्रीन रीडर्स](https://en.wikipedia.org/wiki/Screen_reader) ही अत्यंत प्रगत तंत्रज्ञानाची साधने आहेत जी डिजिटल मजकूराचे भाषण किंवा ब्रेल आउटपुटमध्ये रूपांतर करतात. जरी ते प्रामुख्याने दृष्टिहीन लोक वापरतात, तरी ते डिस्लेक्सिया सारख्या शिकण्याच्या अडचणी असलेल्या वापरकर्त्यांसाठी देखील खूप उपयुक्त आहेत.
 
-मी स्क्रीन रीडरला एखाद्या खूप हुशार कथाकथनकारासारखे समजतो जो तुम्हाला पुस्तक वाचून दाखवतो. ते मजकूर तार्किक क्रमाने मोठ्याने वाचते, "बटण" किंवा "लिंक" सारख्या संवादात्मक घटकांची घोषणा करते आणि पृष्ठाभोवती उडी मारण्यासाठी कीबोर्ड शॉर्टकट प्रदान करते. पण गोष्ट अशी आहे—स्क्रीन रीडर्स त्यांचे जादू फक्त तेव्हा करू शकतात जेव्हा आपण योग्य संरचना आणि अर्थपूर्ण सामग्रीसह वेबसाइट्स तयार करतो. येथे तुम्ही विकसक म्हणून मदत करू शकता!
+मी स्क्रीन रीडरला एखाद्या खूप हुशार कथाकथनकारासारखे समजतो जो तुम्हाला पुस्तक वाचून दाखवतो. तो मजकूर तार्किक क्रमाने मोठ्याने वाचतो, "बटण" किंवा "लिंक" सारख्या परस्परसंवादी घटकांची घोषणा करतो आणि पृष्ठाभोवती उडी मारण्यासाठी कीबोर्ड शॉर्टकट प्रदान करतो. पण गोष्ट अशी आहे—स्क्रीन रीडर्स त्यांचे जादू फक्त तेव्हा करू शकतात जेव्हा आपण योग्य रचना आणि अर्थपूर्ण सामग्रीसह वेबसाइट्स तयार करतो. येथे तुम्ही विकसक म्हणून मदत करू शकता!
 
 **प्लॅटफॉर्मवर लोकप्रिय स्क्रीन रीडर्स:**
 - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (फ्री आणि सर्वाधिक लोकप्रिय), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (इन-बिल्ट)
@@ -49,79 +91,87 @@ CO_OP_TRANSLATOR_METADATA:
 
 **स्क्रीन रीडर्स वेब सामग्री कशी नेव्हिगेट करतात:**
 
-स्क्रीन रीडर्स अनुभवी वापरकर्त्यांसाठी ब्राउझिंग कार्यक्षम बनवणाऱ्या अनेक नेव्हिगेशन पद्धती प्रदान करतात:
-- **क्रमिक वाचन**: शीर्ष ते तळापर्यंत सामग्री वाचते, जसे पुस्तकाचे अनुसरण करणे
+स्क्रीन रीडर्स अनेक नेव्हिगेशन पद्धती प्रदान करतात ज्यामुळे अनुभवी वापरकर्त्यांसाठी ब्राउझिंग अधिक कार्यक्षम होते:
+- **क्रमिक वाचन**: मजकूर वरून खाली वाचतो, जसे पुस्तक वाचणे
 - **लँडमार्क नेव्हिगेशन**: पृष्ठ विभागांमध्ये उडी मारणे (हेडर, नेव्ह, मुख्य, फूटर)
-- **हेडिंग नेव्हिगेशन**: पृष्ठ संरचना समजण्यासाठी हेडिंग्जमध्ये उडी मारणे
-- **लिंक यादी**: जलद प्रवेशासाठी सर्व लिंकची यादी तयार करणे
-- **फॉर्म नियंत्रण**: इनपुट फील्ड आणि बटणांमध्ये थेट नेव्हिगेट करणे
+- **हेडिंग नेव्हिगेशन**: हेडिंग्समध्ये उडी मारून पृष्ठ रचना समजून घेणे
+- **लिंक यादी**: सर्व लिंकची यादी तयार करणे
+- **फॉर्म कंट्रोल्स**: इनपुट फील्ड्स आणि बटणांमध्ये थेट नेव्हिगेट करणे
 
-> 💡 **माझ्या मनाला धक्का देणारी गोष्ट**: 68% स्क्रीन रीडर वापरकर्ते मुख्यतः हेडिंग्जद्वारे नेव्हिगेट करतात ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding)). याचा अर्थ तुमची हेडिंग संरचना वापरकर्त्यांसाठी रोडमॅपसारखी आहे—जेव्हा तुम्ही ती योग्य प्रकारे तयार करता, तेव्हा तुम्ही लोकांना तुमच्या सामग्रीभोवती जलद मार्ग शोधण्यात मदत करत आहात!
+> 💡 **माझ्या मनाला आश्चर्यचकित करणारी गोष्ट**: 68% स्क्रीन रीडर वापरकर्ते मुख्यतः हेडिंग्सद्वारे नेव्हिगेट करतात ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding)). याचा अर्थ तुमची हेडिंग रचना वापरकर्त्यांसाठी रोडमॅपसारखी आहे—तुम्ही ती योग्य प्रकारे तयार करता तेव्हा तुम्ही लोकांना तुमच्या सामग्रीभोवती जलद मार्ग शोधण्यात मदत करत आहात!
 
 ### तुमचा चाचणी कार्यप्रवाह तयार करणे
 
-चांगली बातमी आहे—प्रभावी प्रवेशयोग्यता चाचणी करणे कठीण असण्याची गरज नाही! तुम्हाला स्वयंचलित साधने (ती स्पष्ट समस्या शोधण्यात उत्कृष्ट आहेत) काही प्रत्यक्ष चाचणीसह एकत्र करायची असतील. येथे एक प्रणालीबद्ध दृष्टिकोन आहे जो मी शोधलेला आहे जो सर्वाधिक समस्या पकडतो आणि तुमचा संपूर्ण दिवस वाया घालवत नाही:
+चांगली बातमी आहे—प्रभावी प्रवेशयोग्यता चाचणी करणे अवघड असण्याची गरज नाही! तुम्हाला स्वयंचलित साधने (ती स्पष्ट समस्या शोधण्यात उत्कृष्ट आहेत) आणि काही प्रत्यक्ष चाचणी यांचे संयोजन करायचे आहे. येथे एक प्रणालीबद्ध दृष्टिकोन आहे ज्यामुळे सर्वाधिक समस्या सापडतात आणि तुमचा संपूर्ण दिवस खर्च होत नाही:
 
 **आवश्यक मॅन्युअल चाचणी कार्यप्रवाह:**
 
 ```mermaid
-graph TD
-    A[Start Testing] --> B{Keyboard Navigation}
+flowchart TD
+    A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation}
     B --> C[Tab through all interactive elements]
-    C --> D{Screen Reader Testing}
+    C --> D{🎧 Screen Reader Testing}
     D --> E[Test with NVDA/VoiceOver]
-    E --> F{Zoom Testing}
+    E --> F{🔍 Zoom Testing}
     F --> G[Zoom to 200% and test functionality]
-    G --> H{Color/Contrast Check}
+    G --> H{🎨 Color/Contrast Check}
     H --> I[Verify all text meets contrast ratios]
-    I --> J{Focus Management}
+    I --> J{👁️ Focus Management}
     J --> K[Ensure focus indicators are visible]
-    K --> L[Testing Complete]
+    K --> L[✅ Testing Complete]
+    
+    style A fill:#e3f2fd
+    style L fill:#e8f5e8
+    style B fill:#fff3e0
+    style D fill:#f3e5f5
+    style F fill:#e0f2f1
+    style H fill:#fce4ec
+    style J fill:#e8eaf6
 ```
 
-**चाचणी तपासणीची चरण-दर-चरण यादी:**
+**चाचणी तपासणी सूची चरण-दर-चरण:**
 1. **कीबोर्ड नेव्हिगेशन**: फक्त Tab, Shift+Tab, Enter, Space आणि Arrow की वापरा
 2. **स्क्रीन रीडर चाचणी**: NVDA, VoiceOver किंवा Narrator सक्षम करा आणि डोळे बंद करून नेव्हिगेट करा
 3. **झूम चाचणी**: 200% आणि 400% झूम स्तरांवर चाचणी करा
-4. **रंग विरोधाभास सत्यापन**: सर्व मजकूर आणि UI घटक तपासा
-5. **फोकस इंडिकेटर चाचणी**: सर्व संवादात्मक घटकांमध्ये दृश्यमान फोकस स्टेट्स आहेत याची खात्री करा
+4. **रंग विरोधाभास पडताळणी**: सर्व मजकूर आणि UI घटक तपासा
+5. **फोकस इंडिकेटर चाचणी**: सर्व परस्परसंवादी घटकांमध्ये दृश्यमान फोकस स्टेट्स आहेत याची खात्री करा
 
 ✅ **Lighthouse सह प्रारंभ करा**: तुमच्या ब्राउझरचे DevTools उघडा, Lighthouse प्रवेशयोग्यता ऑडिट चालवा आणि नंतर तुमच्या मॅन्युअल चाचणी फोकस क्षेत्रांचे मार्गदर्शन करण्यासाठी परिणाम वापरा.
 
 ### झूम आणि वाढीव साधने
 
-तुम्ही कधी तुमच्या फोनवर मजकूर खूप लहान असल्यावर झूम करण्यासाठी पिंच केले आहे का, किंवा उज्ज्वल सूर्यप्रकाशात तुमच्या लॅपटॉप स्क्रीनवर डोळे मिचकावले आहेत का? अनेक वापरकर्ते दररोज सामग्री वाचनीय बनवण्यासाठी वाढीव साधनांवर अवलंबून असतात. यामध्ये कमी दृष्टी असलेले लोक, वृद्ध व्यक्ती आणि कधीही बाहेर वेबसाइट वाचण्याचा प्रयत्न करणारे कोणीही समाविष्ट आहे.
+तुम्ही कधी तुमच्या फोनवर मजकूर खूप लहान असल्यास झूम करण्यासाठी पिंच केले आहे किंवा उज्ज्वल सूर्यप्रकाशात तुमच्या लॅपटॉप स्क्रीनवर डोळे मिचकावले आहेत का? अनेक वापरकर्ते दररोज सामग्री वाचनीय बनवण्यासाठी वाढीव साधनांवर अवलंबून असतात. यामध्ये कमी दृष्टी असलेले लोक, वृद्ध व्यक्ती आणि कधीही बाहेर वेबसाइट वाचण्याचा प्रयत्न करणारे कोणीही समाविष्ट आहे.
 
-आधुनिक झूम तंत्रज्ञान फक्त गोष्टी मोठ्या करण्यापलीकडे विकसित झाले आहे. ही साधने कशी कार्य करतात हे समजून घेणे तुम्हाला प्रतिसादात्मक डिझाइन तयार करण्यात मदत करेल जे कोणत्याही वाढीव स्तरावर कार्यक्षम आणि आकर्षक राहील.
+आधुनिक झूम तंत्रज्ञान फक्त गोष्टी मोठ्या करण्यापेक्षा पुढे गेले आहे. ही साधने कशी कार्य करतात हे समजून घेणे तुम्हाला प्रतिसादात्मक डिझाइन तयार करण्यात मदत करेल जे कोणत्याही वाढीव स्तरावर कार्यक्षम आणि आकर्षक राहील.
 
 **आधुनिक ब्राउझर झूम क्षमता:**
 - **पृष्ठ झूम**: सर्व सामग्री प्रमाणानुसार स्केल करते (मजकूर, प्रतिमा, लेआउट) - ही प्राधान्य दिलेली पद्धत आहे
-- **फक्त मजकूर झूम**: मूळ लेआउट राखून फॉन्ट आकार वाढवते
-- **पिंच-टू-झूम**: तात्पुरत्या वाढीसाठी मोबाइल इशारा समर्थन
+- **फक्त मजकूर झूम**: मूळ लेआउट राखून फॉन्ट आकार वाढवतो
+- **पिंच-टू-झूम**: तात्पुरत्या वाढीसाठी मोबाइल गेस्चर समर्थन
 - **ब्राउझर समर्थन**: सर्व आधुनिक ब्राउझर 500% पर्यंत झूम समर्थन देतात ज्यामुळे कार्यक्षमता बिघडत नाही
 
 **विशेषीकृत वाढीव सॉफ्टवेअर:**
 - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (इन-बिल्ट), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
 - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (इन-बिल्ट आणि प्रगत वैशिष्ट्यांसह)
 
-> ⚠️ **डिझाइन विचार**: WCAG आवश्यक आहे की सामग्री 200% पर्यंत झूम केल्यावर कार्यक्षम राहावी. या स्तरावर, आडव्या स्क्रोलिंग किमान असावी आणि सर्व संवादात्मक घटक प्रवेशयोग्य राहावेत.
+> ⚠️ **डिझाइन विचार**: WCAG ची आवश्यकता आहे की सामग्री 200% पर्यंत झूम केल्यावर कार्यक्षम राहावी. या स्तरावर, आडव्या स्क्रोलिंग किमान असावी आणि सर्व परस्परसंवादी घटक प्रवेशयोग्य राहावेत.
 
-✅ **तुमचा प्रतिसादात्मक डिझाइन तपासा**: तुमचा ब्राउझर 200% आणि 400% पर्यंत झूम करा. तुमचा लेआउट सुंदरपणे जुळतो का? तुम्ही अजूनही सर्व कार्यक्षमतेपर्यंत अतिरिक्त स्क्रोलिंगशिवाय पोहोचू शकता का?
+✅ **तुमचा प्रतिसादात्मक डिझाइन तपासा**: तुमचा ब्राउझर 200% आणि 400% झूम करा. तुमचा लेआउट सुंदरपणे जुळतो का? तुम्ही अजूनही अत्यधिक स्क्रोलिंगशिवाय सर्व कार्यक्षमता वापरू शकता का?
 
 ## आधुनिक प्रवेशयोग्यता चाचणी साधने
 
-आता तुम्हाला सहाय्यक तंत्रज्ञानासह लोक वेब कसे नेव्हिगेट करतात हे समजले आहे, चला त्या साधनांचा शोध घेऊया जे तुम्हाला प्रवेशयोग्य वेबसाइट्स तयार करण्यात आणि चाचणी करण्यात मदत करतात.
+आता तुम्हाला सहाय्यक तंत्रज्ञानासह लोक वेब कसे नेव्हिगेट करतात हे समजले आहे, चला तुम्हाला प्रवेशयोग्य वेबसाइट्स तयार करण्यात आणि चाचणी घेण्यात मदत करणारी साधने शोधूया.
 
-याचा विचार करा: स्वयंचलित साधने स्पष्ट समस्या (जसे की गहाळ alt मजकूर) पकडण्यात उत्कृष्ट आहेत, तर प्रत्यक्ष चाचणी तुम्हाला तुमची साइट वास्तविक जगात वापरण्यास चांगली वाटते याची खात्री करण्यास मदत करते. एकत्रितपणे, ते तुम्हाला तुमच्या साइट्स सर्वांसाठी कार्यक्षम आहेत याचा आत्मविश्वास देतात.
+याचा विचार करा: स्वयंचलित साधने स्पष्ट समस्या (जसे की गहाळ alt मजकूर) शोधण्यात उत्कृष्ट आहेत, तर प्रत्यक्ष चाचणी तुम्हाला तुमची साइट वास्तविक जगात वापरण्यास चांगली वाटते याची खात्री करण्यास मदत करते. एकत्रितपणे, ते तुम्हाला तुमच्या साइट्स सर्वांसाठी कार्यक्षम आहेत याचा आत्मविश्वास देतात.
 
 ### रंग विरोधाभास चाचणी
 
-चांगली बातमी: रंग विरोधाभास ही सर्वात सामान्य प्रवेशयोग्यता समस्या आहे, पण ती सोडवणे सर्वात सोपे आहे. चांगला विरोधाभास सर्वांना फायदेशीर ठरतो—दृष्टीदोष असलेल्या वापरकर्त्यांपासून ते समुद्रकिनारी फोन वाचण्याचा प्रयत्न करणाऱ्या लोकांपर्यंत.
+चांगली बातमी: रंग विरोधाभास ही सर्वात सामान्य प्रवेशयोग्यता समस्या आहे, परंतु ती सोडवणे सर्वात सोपे आहे. चांगला विरोधाभास सर्वांना फायदेशीर ठरतो—दृष्टीदोष असलेल्या वापरकर्त्यांपासून ते समुद्रकिनारी फोन वाचण्याचा प्रयत्न करणाऱ्या लोकांपर्यंत.
 
 **WCAG विरोधाभास आवश्यकता:**
 
 | मजकूर प्रकार | WCAG AA (किमान) | WCAG AAA (वाढीव) |
-|-----------|-------------------|---------------------|
+|--------------|------------------|------------------|
 | **सामान्य मजकूर** (18pt पेक्षा कमी) | 4.5:1 विरोधाभास गुणोत्तर | 7:1 विरोधाभास गुणोत्तर |
 | **मोठा मजकूर** (18pt+ किंवा 14pt+ ठळक) | 3:1 विरोधाभास गुणोत्तर | 4.5:1 विरोधाभास गुणोत्तर |
 | **UI घटक** (बटणे, फॉर्म बॉर्डर्स) | 3:1 विरोधाभास गुणोत्तर | 3:1 विरोधाभास गुणोत्तर |
@@ -136,16 +186,16 @@ graph TD
 
 ### सर्वसमावेशक प्रवेशयोग्यता ऑडिटिंग
 
-सर्वात प्रभावी प्रवेशयोग्यता चाचणी अनेक दृष्टिकोन एकत्र करते. एकही साधन सर्वकाही पकडत नाही, त्यामुळे विविध पद्धतींसह चाचणी दिनचर्या तयार करणे व्यापक कव्हरेज सुनिश्चित करते.
+सर्वात प्रभावी प्रवेशयोग्यता चाचणी अनेक दृष्टिकोन एकत्रित करते. एकही साधन सर्वकाही पकडत नाही, त्यामुळे विविध पद्धतींसह चाचणी दिनचर्या तयार करणे व्यापक कव्हरेज सुनिश्चित करते.
 
 **ब्राउझर-आधारित चाचणी (DevTools मध्ये समाविष्ट):**
 - **Chrome/Edge**: Lighthouse प्रवेशयोग्यता ऑडिट + प्रवेशयोग्यता पॅनेल
-- **Firefox**: प्रवेशयोग्यता निरीक्षक तपशीलवार ट्री दृश्यासह
+- **Firefox**: तपशीलवार ट्री व्ह्यूसह प्रवेशयोग्यता निरीक्षक
 - **Safari**: Web Inspector मधील ऑडिट टॅब VoiceOver सिम्युलेशनसह
 
 **व्यावसायिक चाचणी विस्तार:**
 - [axe DevTools](https://www.deque.com/axe/devtools/) - उद्योग-मानक स्वयंचलित चाचणी
-- [WAVE](https://wave.webaim.org/extension/) - त्रुटी हायलाइटिंगसह दृश्य अभिप्राय
+- [WAVE](https://wave.webaim.org/extension/) - त्रुटी हायलाइटिंगसह व्हिज्युअल अभिप्राय
 - [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft चे सर्वसमावेशक चाचणी संच
 
 **कमांड-लाइन आणि CI/CD एकत्रीकरण:**
@@ -153,35 +203,81 @@ graph TD
 - [Pa11y](https://pa11y.org/) - कमांड-लाइन प्रवेशयोग्यता चाचणी साधन
 - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - स्वयंचलित प्रवेशयोग्यता स्कोअरिंग
 
-> 🎯 **चाचणी लक्ष्य**: 95+ चा Lighthouse प्रवेशयोग्यता स्कोअर तुमचा आधार म्हणून ठेवा. लक्षात ठेवा, स्वयंचलित साधने फक्त 30-40% प्रवेशयोग्यता समस्या पकडतात—मॅन्युअल चाचणी अजूनही आवश्यक आहे!
+> 🎯 **चाचणी उद्दिष्ट**: 95+ च्या Lighthouse प्रवेशयोग्यता स्कोअरला तुमचा आधार म्हणून लक्ष्य करा. लक्षात ठेवा, स्वयंचलित साधने फक्त 30-40% प्रवेशयोग्यता समस्या शोधतात—मॅन्युअल चाचणी अजूनही आवश्यक आहे!
+
+### 🧠 **चाचणी कौशल्य तपासणी: समस्या शोधण्यासाठी तयार आहात?**
+
+**चला पाहूया की तुम्ही प्रवेशयोग्यता चाचणीबद्दल कसे वाटत आहात:**
+- सध्या तुम्हाला कोणती चाचणी पद्धत सर्वात सोपी वाटते?
+- तुम्ही संपूर्ण दिवसासाठी फक्त कीबोर्ड-नेव्हिगेशन वापरण्याची कल्पना करू शकता का?
+- तुम्ही ऑनलाइन वैयक्तिकरित्या अनुभवलेली एक प्रवेशयोग्यता अडथळा कोणती आहे?
+
+```mermaid
+pie title "Accessibility Issues Caught by Different Methods"
+    "Automated Tools" : 35
+    "Manual Testing" : 40
+    "User Feedback" : 25
+```
+
+> **आत्मविश्वास वाढवणारा**: व्यावसायिक प्रवेशयोग्यता परीक्षक याच पद्धतींचा वापर करतात. तुम्ही उद्योग-मानक पद्धती शिकत आहात!
 
 ## सुरुवातीपासून प्रवेशयोग्यता तयार करणे
 
-प्रवेशयोग्यता यशाची गुरुकिल्ली म्हणजे पहिल्या दिवसापासून ती तुमच्या पाया मध्ये समाविष्ट करणे. मला माहित आहे की "मी नंतर प्रवेशयोग्यता जोडेन" असे विचार करणे मोहक आहे, पण ते आधीच बांधलेल्या घरात रॅम्प जोडण्याचा प्रयत्न करण्यासारखे आहे. शक्य आहे? होय. सोपे? फारसे नाही.
+प्रवेशयोग्यता यशस्वी होण्याची गुरुकिल्ली म्हणजे पहिल्या दिवसापासून ती तुमच्या पाया मध्ये समाविष्ट करणे. मला माहित आहे की "मी नंतर प्रवेशयोग्यता जोडेन" असे विचार करणे मोहक आहे, परंतु ते आधीच बांधलेल्या घरात रॅम्प जोडण्याचा प्रयत्न करण्यासारखे आहे. शक्य आहे? होय. सोपे? नाही.
 
-प्रवेशयोग्यतेचा विचार घराच्या नियोजनासारखा करा—तुमच्या सुरुवातीच्या वास्तुशिल्प योजनांमध्ये व्हीलचेअर प्रवेशयोग्यता समाविष्ट करणे खूप सोपे आहे जे नंतर सर्वकाही बदलण्यापेक्षा.
+प्रवेशयोग्यतेचा विचार घराच्या नियोजनासारखा करा—तुमच्या सुरुवातीच्या वास्तुशास्त्रीय योजनांमध्ये व्हीलचेअर प्रवेशयोग्यता समाविष्ट करणे खूप सोपे आहे, नंतर सर्वकाही बदलणे कठीण आहे.
 
 ### POUR तत्त्वे: तुमचा प्रवेशयोग्यता पाया
 
-वेब सामग्री प्रवेशयोग्यता मार्गदर्शक तत्त्वे (WCAG) चार मूलभूत तत्त्वांवर आधारित आहेत जी POUR असे लिहितात. काळजी करू नका—ही कठोर शैक्षणिक संकल्पना नाहीत! ती प्रत्यक्षात सर्वांसाठी कार्य करणारी सामग्री तयार करण्यासाठी व्यावहारिक मार्गदर्शक तत्त्वे आहेत.
+वेब सामग्री प्रवेशयोग्यता मार्गदर्शक तत्त्वे (WCAG) चार मूलभूत तत्त्वांभोवती तयार केली गेली आहेत जी POUR असे लिहितात. काळजी करू नका—हे कठोर शैक्षणिक संकल्पना नाहीत! ते प्रत्यक्षात सर्वांसाठी कार्य करणारी सामग्री
+- **वेगवेगळ्या ब्राउझर, उपकरणे आणि सहाय्यक साधनांवर चाचणी करा**
+- **अग्रगण्य वैशिष्ट्ये समर्थित नसल्यास सामग्री अशा प्रकारे संरचित करा की ती सहजपणे कार्य करेल**
+
+### 🎯 **POUR तत्त्वे तपासणी: लक्षात ठेवण्यासाठी**
+
+**मूलभूत गोष्टींचा जलद विचार:**
+- तुम्ही POUR तत्त्वांपैकी प्रत्येकाचे अपयश दर्शवणारे वेबसाइट वैशिष्ट्य विचार करू शकता का?
+- तुमच्यासाठी, एक विकसक म्हणून कोणते तत्त्व सर्वात नैसर्गिक वाटते?
+- ही तत्त्वे केवळ अपंग वापरकर्त्यांसाठीच नव्हे तर सर्वांसाठी डिझाइन सुधारण्यात कशी मदत करू शकतात?
+
+```mermaid
+quadrantChart
+    title POUR Principles Impact Matrix
+    x-axis Low Effort --> High Effort
+    y-axis Low Impact --> High Impact
+    quadrant-1 Quick Wins
+    quadrant-2 Major Projects
+    quadrant-3 Consider Later
+    quadrant-4 Strategic Focus
+    
+    Alt Text: [0.2, 0.9]
+    Color Contrast: [0.3, 0.8]
+    Semantic HTML: [0.4, 0.9]
+    Keyboard Nav: [0.6, 0.8]
+    ARIA Complex: [0.8, 0.7]
+    Screen Reader Testing: [0.7, 0.6]
+```
+
+> **लक्षात ठेवा**: उच्च-प्रभाव, कमी-प्रयत्न सुधारणा पासून सुरुवात करा. सेमॅंटिक HTML आणि alt टेक्स्ट तुम्हाला सर्वात कमी प्रयत्नात सर्वात मोठा प्रवेशयोग्यता फायदा देतात!
+
+## प्रवेशयोग्य व्हिज्युअल डिझाइन तयार करणे
+
+चांगले व्हिज्युअल डिझाइन आणि प्रवेशयोग्यता हातात हात घालून जातात. जेव्हा तुम्ही प्रवेशयोग्यतेचा विचार करून डिझाइन करता, तेव्हा तुम्हाला असे आढळते की या मर्यादा स्वच्छ, अधिक मोहक उपाय शोधण्यात मदत करतात जे सर्व वापरकर्त्यांना फायदेशीर ठरतात.
 
-एकदा तुम्हाला POUR चा उपयोग कसा करायचा हे समजले की, प्रवेशयोग्यता निर्णय घेणे अधिक अंतर्ज्ञानी होते. हे तुमच्या डिझाइन निवडींना मार्गदर्शन करणारी मानसिक तपासणी यादी असल्यासारखे आहे. चला याचा तपशील पाहूया:
+चला सर्वांसाठी, त्यांच्या दृश्य क्षमतेसाठी किंवा तुमची सामग्री पाहण्याच्या परिस्थितींसाठी कार्य करणारे व्हिज्युअली आकर्षक डिझाइन तयार कसे करायचे ते शोधूया.
 
-**🔍 जाणवण्यायोग्य**: माहिती वापरकर्त्यांच्या उपलब्ध संवेदनांद्वारे जाणवण्यायोग्य असावी
+### रंग आणि व्हिज्युअल प्रवेशयोग्यता धोरणे
 
-- नॉन-टेक्स्ट सामग्रीसाठी मजकूर पर्याय प्रदान करा (प्रतिमा, व्हिडिओ, ऑडिओ)
-- सर्व मजकूर आणि UI घटकांसाठी पुरेसा रंग विरोधाभास सुनिश्चित करा
-- मल्टीमीडिया सामग्रीसाठी कॅप्शन आणि
-रंग संवादासाठी प्रभावी आहे, परंतु महत्त्वाची माहिती देण्यासाठी तो एकमेव मार्ग असू नये. रंगाच्या पलीकडे डिझाइन करणे अधिक मजबूत, सर्वसमावेशक अनुभव निर्माण करते जे विविध परिस्थितींमध्ये कार्य करते.
+रंग संवादासाठी शक्तिशाली आहे, परंतु महत्त्वाची माहिती देण्यासाठी तो कधीही एकमेव मार्ग असू नये. रंगाच्या पलीकडे डिझाइन करणे अधिक मजबूत, समावेशक अनुभव तयार करते जे अधिक परिस्थितींमध्ये कार्य करते.
 
 **रंग दृष्टिकोनातील फरकांसाठी डिझाइन करा:**
 
-सुमारे 8% पुरुष आणि 0.5% महिला काही प्रकारच्या रंग दृष्टिकोनातील फरक अनुभवतात (याला "रंग अंधत्व" असेही म्हणतात). सर्वात सामान्य प्रकार आहेत:
-- **ड्युटेरॅनोपिया**: लाल आणि हिरवा ओळखण्यात अडचण
-- **प्रोटॅनोपिया**: लाल रंग अधिक मंद दिसतो
-- **ट्रायटॅनोपिया**: निळा आणि पिवळा ओळखण्यात अडचण (दुर्मिळ)
+सुमारे 8% पुरुष आणि 0.5% महिला काही प्रकारच्या रंग दृष्टिकोनातील फरक (सामान्यतः "रंग अंधत्व" म्हणतात) अनुभवतात. सर्वात सामान्य प्रकार आहेत:
+- **Deuteranopia**: लाल आणि हिरवा ओळखण्यात अडचण
+- **Protanopia**: लाल अधिक मंद दिसतो
+- **Tritanopia**: निळा आणि पिवळा ओळखण्यात अडचण (दुर्मिळ)
 
-**सर्वसमावेशक रंग धोरणे:**
+**समावेशक रंग धोरणे:**
 
 ```css
 /* ❌ Bad: Using only color to indicate status */
@@ -209,16 +305,16 @@ graph TD
 ```
 
 **मूलभूत कॉन्ट्रास्ट आवश्यकता पलीकडे:**
-- रंग अंधत्व सिम्युलेटरसह तुमच्या रंग निवडींची चाचणी करा
+- रंग अंधत्व सिम्युलेटरसह तुमच्या रंग निवडीची चाचणी करा
 - रंग कोडिंगसह नमुने, पोत किंवा आकार वापरा
-- परस्परसंवादी स्थिती रंगाशिवाय ओळखण्यायोग्य ठेवा
+- परस्परसंवादी स्थिती रंगाशिवाय वेगळ्या राहतील याची खात्री करा
 - उच्च कॉन्ट्रास्ट मोडमध्ये तुमचे डिझाइन कसे दिसते याचा विचार करा
 
-✅ **तुमची रंग प्रवेशयोग्यता तपासा**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) सारख्या साधनांचा वापर करून तुमची साइट वेगवेगळ्या प्रकारच्या रंग दृष्टिकोन असलेल्या वापरकर्त्यांना कशी दिसते ते पहा.
+✅ **तुमच्या रंग प्रवेशयोग्यतेची चाचणी करा**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) सारख्या साधनांचा वापर करून तुमची साइट वेगवेगळ्या प्रकारच्या रंग दृष्टिकोन असलेल्या वापरकर्त्यांना कशी दिसते ते पहा.
 
 ### फोकस इंडिकेटर्स आणि परस्परसंवाद डिझाइन
 
-फोकस इंडिकेटर्स डिजिटल कर्सरप्रमाणे असतात—ते कीबोर्ड वापरकर्त्यांना पृष्ठावर कुठे आहेत हे दर्शवतात. चांगले डिझाइन केलेले फोकस इंडिकेटर्स प्रत्येकासाठी अनुभव अधिक स्पष्ट आणि अंदाजानुसार बनवतात.
+फोकस इंडिकेटर्स डिजिटल कर्सरच्या समतुल्य आहेत—ते कीबोर्ड वापरकर्त्यांना पृष्ठावर कुठे आहेत हे दर्शवतात. चांगल्या प्रकारे डिझाइन केलेले फोकस इंडिकेटर्स सर्वांसाठी अनुभव वाढवतात, परस्परसंवाद स्पष्ट आणि अंदाज करण्यायोग्य बनवतात.
 
 **आधुनिक फोकस इंडिकेटर सर्वोत्तम पद्धती:**
 
@@ -250,20 +346,42 @@ button:focus:not(:focus-visible) {
 ```
 
 **फोकस इंडिकेटर आवश्यकता:**
-- **दृश्यमानता**: सभोवतालच्या घटकांशी किमान 3:1 कॉन्ट्रास्ट गुणोत्तर असले पाहिजे
-- **रुंदी**: संपूर्ण घटकाभोवती किमान 2px जाडी असावी
-- **सततता**: फोकस दुसऱ्या ठिकाणी हलवले जाईपर्यंत दृश्यमान राहावे
-- **भिन्नता**: इतर UI स्थितींपेक्षा दृश्यात्मकदृष्ट्या वेगळे असले पाहिजे
+- **दृश्यमानता**: सभोवतालच्या घटकांसह किमान 3:1 कॉन्ट्रास्ट गुणोत्तर असणे आवश्यक आहे
+- **रुंदी**: संपूर्ण घटकाभोवती किमान 2px जाडी असणे आवश्यक आहे
+- **स्थिरता**: फोकस दुसरीकडे हलवले जाईपर्यंत दृश्यमान राहावे
+- **भिन्नता**: इतर UI स्थितींपेक्षा दृश्यमानपणे वेगळे असणे आवश्यक आहे
 
 > 💡 **डिझाइन टिप**: उत्कृष्ट फोकस इंडिकेटर्स अनेकदा दृश्यता सुनिश्चित करण्यासाठी outline, box-shadow आणि रंग बदलांचा संयोजन वापरतात.
 
-✅ **तुमचे फोकस इंडिकेटर्स तपासा**: तुमच्या वेबसाइटवर टॅब करा आणि कोणते घटक स्पष्ट फोकस इंडिकेटर्स आहेत ते नोंदवा. काही पाहणे कठीण आहे का किंवा पूर्णपणे गायब आहेत का?
+✅ **फोकस इंडिकेटर्सचे ऑडिट करा**: तुमच्या वेबसाइटवर टॅब करा आणि कोणते घटक स्पष्ट फोकस इंडिकेटर्स आहेत ते नोंदवा. काही पाहणे कठीण आहे किंवा पूर्णपणे गहाळ आहेत का?
 
 ### सेमॅंटिक HTML: प्रवेशयोग्यतेचा पाया
 
-सेमॅंटिक HTML म्हणजे तुमच्या वेबसाइटसाठी सहाय्यक तंत्रज्ञानांना GPS प्रणाली देणे. जेव्हा तुम्ही योग्य HTML घटक त्याच्या इच्छित उद्देशासाठी वापरता, तेव्हा तुम्ही स्क्रीन रीडर्स, कीबोर्ड्स आणि इतर साधनांना प्रभावीपणे नेव्हिगेट करण्यासाठी तपशीलवार रोडमॅप प्रदान करता.
+सेमॅंटिक HTML म्हणजे तुमच्या वेबसाइटसाठी सहाय्यक तंत्रज्ञानासाठी GPS प्रणाली देणे. जेव्हा तुम्ही योग्य HTML घटक त्याच्या उद्देशासाठी वापरता, तेव्हा तुम्ही स्क्रीन रीडर्स, कीबोर्ड्स आणि इतर साधनांना वापरकर्त्यांना प्रभावीपणे नेव्हिगेट करण्यात मदत करण्यासाठी तपशीलवार रोडमॅप प्रदान करता.
 
-माझ्यासाठी खरोखर क्लिक केलेली एक उपमा येथे आहे: सेमॅंटिक HTML म्हणजे स्पष्ट श्रेणी आणि उपयुक्त चिन्हांसह चांगल्या प्रकारे आयोजित केलेल्या लायब्ररी आणि पुस्तके यादृच्छिकपणे विखुरलेल्या गोदामातील फरक. दोन्ही ठिकाणी समान पुस्तके आहेत, परंतु तुम्हाला त्यामध्ये काहीतरी शोधण्याचा प्रयत्न करायचा असेल तर तुम्ही कोणते ठिकाण निवडाल? अगदी!
+माझ्यासाठी खरोखर क्लिक केलेली एक उपमा येथे आहे: सेमॅंटिक HTML म्हणजे स्पष्ट श्रेणी आणि उपयुक्त चिन्हांसह चांगल्या प्रकारे आयोजित केलेल्या लायब्ररी आणि पुस्तके यादृच्छिकपणे विखुरलेल्या गोदामातील फरक. दोन्ही ठिकाणी समान पुस्तके आहेत, परंतु तुम्हाला त्यामध्ये काहीतरी शोधण्याचा प्रयत्न करायचा असेल तर तुम्हाला कोणते ठिकाण अधिक चांगले वाटेल? अगदी!
+
+```mermaid
+flowchart TD
+    A[🏠 HTML Document] --> B[📰 header]
+    A --> C[🧭 nav]
+    A --> D[📄 main]
+    A --> E[📋 footer]
+    
+    B --> B1[h1: Site Name<br/>Logo & branding]
+    C --> C1[ul: Navigation<br/>Primary links]
+    D --> D1[article: Content<br/>section: Subsections]
+    D --> D2[aside: Sidebar<br/>Related content]
+    E --> E1[nav: Footer links<br/>Copyright info]
+    
+    D1 --> D1a[h1: Page title<br/>h2: Major sections<br/>h3: Subsections]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 **प्रवेशयोग्य पृष्ठ संरचनेचे बांधकाम ब्लॉक्स:**
 
@@ -320,17 +438,17 @@ button:focus:not(:focus-visible) {
 </footer>
 ```
 
-**सेमॅंटिक HTML प्रवेशयोग्यतेला कसे बदलते:**
+**सेमॅंटिक HTML प्रवेशयोग्यता कशी बदलते:**
 
-| सेमॅंटिक घटक | उद्देश | स्क्रीन रीडर लाभ |
+| सेमॅंटिक घटक | उद्देश | स्क्रीन रीडर फायदा |
 |------------------|---------|----------------------|
 | `<header>` | पृष्ठ किंवा विभाग शीर्षलेख | "बॅनर लँडमार्क" - शीर्षस्थानी जलद नेव्हिगेशन |
 | `<nav>` | नेव्हिगेशन लिंक | "नेव्हिगेशन लँडमार्क" - नेव्हिगेशन विभागांची यादी |
-| `<main>` | प्राथमिक पृष्ठ सामग्री | "मुख्य लँडमार्क" - थेट सामग्रीकडे जा |
-| `<article>` | स्वतंत्र सामग्री | लेखाच्या सीमा जाहीर करते |
-| `<section>` | थीम असलेले सामग्री गट | सामग्री रचना प्रदान करते |
+| `<main>` | प्राथमिक पृष्ठ सामग्री | "मुख्य लँडमार्क" - थेट सामग्रीवर जा |
+| `<article>` | स्वयंपूर्ण सामग्री | लेखाच्या सीमा जाहीर करते |
+| `<section>` | थीम असलेले सामग्री गट | सामग्री संरचना प्रदान करते |
 | `<aside>` | संबंधित साइडबार सामग्री | "पूरक लँडमार्क" |
-| `<footer>` | पृष्ठ किंवा विभाग फूटर्स | "कंटेंटइन्फो लँडमार्क" |
+| `<footer>` | पृष्ठ किंवा विभाग फूटर्स | "Contentinfo लँडमार्क" |
 
 **सेमॅंटिक HTML सह स्क्रीन रीडर सुपरपॉवर्स:**
 - **लँडमार्क नेव्हिगेशन**: प्रमुख पृष्ठ विभागांमध्ये त्वरित उडी
@@ -338,16 +456,43 @@ button:focus:not(:focus-visible) {
 - **घटक यादी**: सर्व लिंक, बटणे किंवा फॉर्म नियंत्रणांची यादी तयार करा
 - **संदर्भ जागरूकता**: सामग्री विभागांमधील संबंध समजून घ्या
 
-> 🎯 **जलद चाचणी**: लँडमार्क शॉर्टकट (NVDA/JAWS मध्ये D साठी लँडमार्क, H साठी हेडिंग, K साठी लिंक) वापरून स्क्रीन रीडरसह तुमच्या साइटवर नेव्हिगेट करण्याचा प्रयत्न करा. नेव्हिगेशन अर्थपूर्ण आहे का?
+> 🎯 **जलद चाचणी**: लँडमार्क शॉर्टकट (NVDA/JAWS मध्ये D लँडमार्कसाठी, H हेडिंगसाठी, K लिंकसाठी) वापरून स्क्रीन रीडरसह तुमच्या साइटवर नेव्हिगेट करण्याचा प्रयत्न करा. नेव्हिगेशन अर्थपूर्ण आहे का?
+
+### 🏗️ **सेमॅंटिक HTML मास्टरी तपासणी: मजबूत पाया तयार करणे**
+
+**तुमच्या सेमॅंटिक समजाचे मूल्यांकन करूया:**
+- तुम्ही HTML पाहून वेबपृष्ठावरील लँडमार्क ओळखू शकता का?
+- तुम्ही तुमच्या मित्राला `<section>` आणि `<div>` मधील फरक कसा समजावून सांगाल?
+- स्क्रीन रीडर वापरकर्त्याने नेव्हिगेशन समस्यांची तक्रार केल्यास तुम्ही प्रथम काय तपासाल?
+
+```mermaid
+stateDiagram-v2
+    [*] --> UnsementicHTML: div soup
+    UnsementicHTML --> SemanticHTML: Add landmarks
+    SemanticHTML --> AccessibleHTML: Test with AT
+    AccessibleHTML --> [*]: User success!
+    
+    note right of UnsementicHTML
+        Screen readers lost
+        Keyboard nav broken
+    end note
+    
+    note right of AccessibleHTML
+        Clear navigation
+        Efficient browsing
+    end note
+```
+
+> **प्रो अंतर्दृष्टी**: चांगले सेमॅंटिक HTML स्वयंचलितपणे सुमारे 70% प्रवेशयोग्यता समस्या सोडवते. हा पाया मास्टर करा आणि तुम्ही चांगल्या मार्गावर आहात!
 
-✅ **तुमची सेमॅंटिक रचना तपासा**: तुमच्या ब्राउझरच्या DevTools मधील प्रवेशयोग्यता पॅनेल वापरून प्रवेशयोग्यता झाड पहा आणि तुमचे मार्कअप तर्कसंगत रचना तयार करते याची खात्री करा.
+✅ **तुमची सेमॅंटिक संरचना तपासा**: तुमच्या ब्राउझरच्या DevTools मधील प्रवेशयोग्यता पॅनेल वापरून प्रवेशयोग्यता झाड पहा आणि तुमचे मार्कअप तर्कसंगत संरचना तयार करते याची खात्री करा.
 
 ### हेडिंग हायरार्की: तर्कसंगत सामग्रीची रूपरेखा तयार करणे
 
-हेडिंग्स प्रवेशयोग्य सामग्रीसाठी अत्यंत महत्त्वाचे आहेत—ते सर्वकाही एकत्र ठेवणाऱ्या कण्यासारखे आहेत. स्क्रीन रीडर वापरकर्ते तुमची सामग्री समजून घेण्यासाठी आणि नेव्हिगेट करण्यासाठी हेडिंग्सवर मोठ्या प्रमाणावर अवलंबून असतात. हे तुमच्या पृष्ठासाठी सामग्रीची सूची प्रदान करण्यासारखे आहे.
+हेडिंग्स प्रवेशयोग्य सामग्रीसाठी अत्यंत महत्त्वाचे आहेत—ते सर्वकाही एकत्र ठेवणाऱ्या कण्यासारखे आहेत. स्क्रीन रीडर वापरकर्ते तुमची सामग्री समजून घेण्यासाठी आणि नेव्हिगेट करण्यासाठी हेडिंगवर मोठ्या प्रमाणावर अवलंबून असतात. हे तुमच्या पृष्ठासाठी सामग्रीची सूची प्रदान करण्यासारखे आहे.
 
 **हेडिंगसाठी सुवर्ण नियम येथे आहे:**
-कधीही स्तर वगळू नका. नेहमी `<h1>` ते `<h2>` ते `<h3>` अशा तर्कसंगतपणे प्रगती करा. शाळेत रूपरेखा तयार करताना लक्षात आहे का? हीच तीच तत्त्वे आहेत—तुम्ही "I. मुख्य मुद्दा" पासून थेट "C. उप-उप मुद्दा" कडे "A. उप-मुद्दा" न घेता उडी मारणार नाही, बरोबर?
+कधीही स्तर वगळू नका. नेहमी `<h1>` ते `<h2>` ते `<h3>` पर्यंत तर्कसंगतपणे प्रगती करा. शाळेत रूपरेखा तयार करणे लक्षात आहे का? हे अगदी त्याच तत्त्व आहे—तुम्ही "I. मुख्य मुद्दा" पासून थेट "C. उप-उप मुद्दा" कडे "A. उप मुद्दा" न घेता उडी मारणार नाही, बरोबर?
 
 **परिपूर्ण हेडिंग संरचना उदाहरण:**
 
@@ -389,33 +534,33 @@ button:focus:not(:focus-visible) {
 ```
 
 **हेडिंग सर्वोत्तम पद्धती:**
-- **प्रत्येक पृष्ठासाठी एक `<h1>`**: सामान्यतः तुमचे मुख्य पृष्ठ शीर्षक किंवा प्राथमिक सामग्री शीर्षक
+- **प्रत्येक पृष्ठावर एक `<h1>`**: सामान्यतः तुमचे मुख्य पृष्ठ शीर्षक किंवा प्राथमिक सामग्री शीर्षलेख
 - **तर्कसंगत प्रगती**: स्तर कधीही वगळू नका (h1 → h2 → h3, h1 → h3 नाही)
-- **वर्णनात्मक सामग्री**: संदर्भाशिवाय वाचल्यास हेडिंग्स अर्थपूर्ण बनवा
-- **CSS सह दृश्यात्मक शैलीकरण**: स्वरूपासाठी CSS वापरा, संरचनेसाठी HTML स्तर
+- **वर्णनात्मक सामग्री**: हेडिंग्स संदर्भाशिवाय वाचल्यावर अर्थपूर्ण बनवा
+- **CSS सह व्हिज्युअल स्टाइलिंग**: स्वरूपासाठी CSS वापरा, संरचनेसाठी HTML स्तर
 
 **स्क्रीन रीडर नेव्हिगेशन आकडेवारी:**
-- 68% स्क्रीन रीडर वापरकर्ते हेडिंग्सद्वारे नेव्हिगेट करतात ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding))
-- वापरकर्त्यांना तर्कसंगत हेडिंग रूपरेखा अपेक्षित आहे
-- हेडिंग्स पृष्ठ संरचना समजून घेण्याचा सर्वात जलद मार्ग प्रदान करतात
+- 68% स्क्रीन रीडर वापरकर्ते हेडिंगद्वारे नेव्हिगेट करतात ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding))
+- वापरकर्त्यांना तर्कसंगत हेडिंग रूपरेखा शोधण्याची अपेक्षा आहे
+- हेडिंग्स पृष्ठ संरचना समजून घेण्याचा सर्वात वेगवान मार्ग प्रदान करतात
 
-> 💡 **प्रो टिप**: "HeadingsMap" सारख्या ब्राउझर एक्सटेंशन्सचा वापर करून तुमची हेडिंग संरचना व्हिज्युअल करा. ती चांगल्या प्रकारे आयोजित केलेल्या सामग्रीच्या यादीसारखी वाचली पाहिजे.
+> 💡 **प्रो टिप**: तुमच्या हेडिंग संरचनेचे व्हिज्युअलायझेशन करण्यासाठी "HeadingsMap" सारख्या ब्राउझर एक्सटेंशनचा वापर करा. ते चांगल्या प्रकारे आयोजित केलेल्या सामग्रीच्या रूपरेखेसारखे वाचले पाहिजे.
 
 ✅ **तुमची हेडिंग संरचना तपासा**: स्क्रीन रीडरच्या हेडिंग नेव्हिगेशन (NVDA मध्ये H की) वापरून तुमच्या हेडिंग्समधून उडी मारा. प्रगती तुमच्या सामग्रीची कथा तर्कसंगतपणे सांगते का?
 
-### प्रगत दृश्य प्रवेशयोग्यता तंत्र
+### प्रगत व्हिज्युअल प्रवेशयोग्यता तंत्र
 
-कॉन्ट्रास्ट आणि रंगाच्या मूलभूत गोष्टींपलीकडे, काही परिष्कृत तंत्र आहेत जे खरोखर सर्वसमावेशक दृश्य अनुभव तयार करण्यात मदत करतात. ही पद्धती तुमची सामग्री विविध पाहण्याच्या परिस्थिती आणि सहाय्यक तंत्रज्ञानांमध्ये कार्य करते याची खात्री करतात.
+कॉन्ट्रास्ट आणि रंगाच्या मूलभूत गोष्टींपलीकडे, खरोखर समावेशक व्हिज्युअल अनुभव तयार करण्यात मदत करणारी परिष्कृत तंत्रे आहेत. ही पद्धती वेगवेगळ्या पाहण्याच्या परिस्थिती आणि सहाय्यक तंत्रज्ञानावर तुमची सामग्री कार्य करते याची खात्री करतात.
 
-**महत्त्वाच्या दृश्य संवाद धोरणे:**
+**महत्त्वाच्या व्हिज्युअल संवाद धोरणे:**
 
-- **मल्टी-मोडल फीडबॅक**: दृश्य, मजकूर आणि कधीकधी ऑडिओ संकेतांचे संयोजन करा
+- **मल्टी-मोडल फीडबॅक**: व्हिज्युअल, टेक्स्ट आणि कधीकधी ऑडिओ संकेतांचे संयोजन
 - **प्रोग्रेसिव्ह डिस्क्लोजर**: माहिती पचण्यायोग्य तुकड्यांमध्ये सादर करा
-- **सुसंगत परस्परसंवादी नमुने**: परिचित UI परंपरा वापरा
+- **सुसंगत परस्परसंवाद नमुने**: परिचित UI परंपरा वापरा
 - **प्रतिसादात्मक टायपोग्राफी**: उपकरणांमध्ये मजकूर योग्य प्रकारे स्केल करा
 - **लोडिंग आणि त्रुटी स्थिती**: सर्व वापरकर्ता क्रियांसाठी स्पष्ट फीडबॅक प्रदान करा
 
-**CSS उपयोगिता प्रवेशयोग्यता वाढवण्यासाठी:**
+**प्रवेशयोग्यतेसाठी CSS उपयोगिता:**
 
 ```css
 /* Screen reader only text - visually hidden but accessible */
@@ -471,25 +616,25 @@ button:focus:not(:focus-visible) {
 }
 ```
 
-> 🎯 **प्रवेशयोग्यता नमुना**: "स्किप लिंक" कीबोर्ड वापरकर्त्यांसाठी आवश्यक आहे. ती तुमच्या पृष्ठावरील पहिली फोकस करण्यायोग्य घटक असावी आणि मुख्य सामग्री क्षेत्रावर थेट उडी मारावी.
+> 🎯 **प्रवेशयोग्यता नमुना**: "स्किप लिंक" कीबोर्ड वापरकर्त्यांसाठी आवश्यक आहे. हे तुमच्या पृष्ठावर प्रथम फोकस करण्यायोग्य घटक असावे आणि मुख्य सामग्री क्षेत्रावर थेट उडी मारावी.
 
-✅ **स्किप नेव्हिगेशन अंमलात आणा**: तुमच्या पृष्ठांवर स्किप लिंक जोडा आणि पृष्ठ लोड झाल्यावर टॅब दाबून त्यांची चाचणी करा. ते दिसले पाहिजेत आणि तुम्हाला मुख्य सामग्रीकडे उडी मारण्याची परवानगी दिली पाहिजे.
+✅ **स्किप नेव्हिगेशन अंमलात आणा**: तुमच्या पृष्ठांवर स्किप लिंक जोडा आणि पृष्ठ लोड झाल्यावर टॅब दाबून त्यांची चाचणी करा. ते दिसले पाहिजे आणि तुम्हाला मुख्य सामग्रीवर उडी मारण्याची परवानगी दिली पाहिजे.
 
-## अर्थपूर्ण लिंक मजकूर तयार करणे
+## अर्थपूर्ण लिंक टेक्स्ट तयार करणे
 
-लिंक्स म्हणजे वेबचे महामार्ग आहेत, परंतु खराब लिहिलेला लिंक मजकूर म्हणजे "जागा" असे म्हणणारे रोड साइन असणे, "डाऊनटाउन शिकागो" ऐवजी. फारसे उपयुक्त नाही, बरोबर?
+लिंक्स म्हणजे वेबचे महामार्ग आहेत, परंतु खराब लिहिलेले लिंक टेक्स्ट म्हणजे "जागा" ऐवजी "डाउनटाउन शिकागो" म्हणणारे रोड साइन असणे. फारसे उपयुक्त नाही, बरोबर?
 
-जेव्हा मी प्रथम हे शिकलो तेव्हा मला खरोखर आश्चर्य वाटले: स्क्रीन रीडर्स पृष्ठावरील सर्व लिंक्स काढून टाकू शकतात आणि त्यांना एक मोठी यादी म्हणून दाखवू शकतात. कल्पना करा की कोणीतरी तुम्हाला तुमच्या पृष्ठावरील प्रत्येक लिंकची निर्देशिका दिली. प्रत्येक लिंक स्वतःहून अर्थपूर्ण आहे का? तुमच्या लिंक मजकूराला पास करायची चाचणी हीच आहे!
+जेव्हा मी प्रथम हे शिकलो तेव्हा माझे मन उडाले: स्क्रीन रीडर्स पृष्ठावरील सर्व लिंक्स काढून त्यांना एक मोठी यादी म्हणून दाखवू शकतात. कल्पना करा की कोणीतरी तुम्हाला तुमच्या पृष्ठावरील प्रत्येक लिंकची निर्देशिका दिली आहे. प्रत्येकाला स्वतःहून अर्थ होईल का? तुमच्या लिंक टेक्स्टला पास करायची गरज असलेली चाचणी ही आहे!
 
 ### लिंक नेव्हिगेशन नमुने समजून घेणे
 
-स्क्रीन रीडर्स चांगल्या प्रकारे लिहिलेल्या लिंक मजकूरावर आधारित शक्तिशाली लिंक नेव्हिगेशन वैशिष्ट्ये ऑफर करतात:
+स्क्रीन रीडर्स चांगल्या प्रकारे लिहिलेल्या लिंक टेक्स्टवर अवलंबून असलेल्या शक्तिशाली लिंक नेव्हिगेशन वैशिष्ट्ये ऑफर करतात:
 
 **लिंक नेव्हिगेशन पद्धती:**
-- **क्रमिक वाचन**: लिंक सामग्री प्रवाहाचा भाग म्हणून संदर्भात वाचल्या जातात
-- **लिंक यादी निर्मिती**: सर्व पृष्ठ लिंक्स शोधण्यायोग्य निर्देशिकेत संकलित
-- **जलद नेव्हिगेशन**: कीबोर्ड शॉर्टकट वापरून लिंक्समध्ये उडी (NVDA मध्ये K)
-- **शोध कार्यक्षमता**: आंशिक मजकूर टाइप करून विशिष्ट लिंक्स शोधा
+- **क्रमिक वाचन**: लिंक सामग्री प्रवाहाचा भाग म्हणून संदर्भात वाचले जातात
+- **लिंक यादी निर्मिती**: सर्व पृष्ठ लिंक शोधण्यायोग्य निर्देशिकेत संकलित
+- **जलद नेव्हिगेशन**: कीबोर्ड शॉर्टकट वापरून लिंक दरम्यान उडी (NVDA मध्ये K)
+- **शोध कार्यक्षमता**: आंशिक मजकूर टाइप करून विशिष्ट लिंक शोधा
 
 **संदर्भ का महत्त्वाचा आहे:**
 जेव्हा स्क्रीन रीडर वापरकर्ते लिंक यादी तयार करतात, तेव्हा त्यांना असे काहीतरी दिसते:
@@ -499,15 +644,15 @@ button:focus:not(:focus-visible) {
 - "गोपनीयता धोरण"
 - "येथे क्लिक करा"
 
-यापैकी फक्त दोन लिंक्स संदर्भाशिवाय उपयुक्त माहिती प्रदान करतात!
+यापैकी फक्त दोन लिंक संदर्भाशिवाय उपयुक्त माहिती प्रदान करतात!
 
-> 📊 **वापरकर्ता प्रभाव**: स्क्रीन रीडर वापरकर्ते पृष्ठ सामग्री जलद समजून घेण्यासाठी लिंक यादी स्कॅन करतात. सामान्य लिंक मजकूर त्यांना प्रत्येक लिंकच्या संदर्भावर परत नेव्हिगेट करण्यास भाग पाडतो, त्यांच्या ब्राउझिंग अनुभवाला लक्षणीयपणे धीमा करतो.
+> 📊 **वापरकर्ता प्रभाव**: स्क्रीन रीडर वापरकर्ते पृष्ठ सामग्री जलद समजून घेण्यासाठी लिंक यादी स्कॅन करतात. सामान्य लिंक टेक्स्ट त्यांना प्रत्येक लिंकच्या संदर्भात परत नेव्हिगेट करण्यास भाग पाडते, त्यांच्या ब्राउझिंग अनुभवाला लक्षणीयपणे धीमा करते.
 
-### सामान्य लिंक मजकूर चुका टाळा
+### सामान्य लिंक टेक्स्ट चुका टाळा
 
-जे काय कार्य करत नाही ते समजून घेणे विद्यमान सामग्रीतील प्रवेशयोग्यता समस्या ओळखण्यात आणि सुधारण्यात मदत करते.
+काय कार्य करत नाही ते समजून घेणे तुम्हाला विद्यमान सामग्रीतील प्रवेशयोग्यता समस्या ओळखण्यात आणि दुरुस्त करण्यात मदत करते.
 
-**❌ संदर्भ प्रदान न करणारा सामान्य लिंक मजकूर:**
+**❌ संदर्भ प्रदान न करणारे सामान्य लिंक टेक्स्ट:**
 
 ```html
 <!-- Meaningless when read from a link list -->
@@ -533,17 +678,17 @@ button:focus:not(:focus-visible) {
 <a href="/contact">Go</a> | <a href="/about">See</a> | <a href="/help">View</a>
 ```
 
-**हे नमुने का अयशस्वी होतात:**
+**हे नमुने का अपयशी ठरतात:**
 - **"येथे क्लिक करा"** वापरकर्त्यांना गंतव्यस्थानाबद्दल काहीही सांगत नाही
 - **"अधिक वाचा"** अनेक वेळा पुनरावृत्ती केल्याने गोंधळ निर्माण होतो
-- **कच्चे URLs** स्क्रीन रीडर्ससाठी स्पष्टपणे उच्चारणे कठीण आहे
-- **एकच शब्द** जसे "जा" किंवा "पहा" वर्णनात्मक संदर्भाचा अभाव आहे
+- **कच्चे URL** स्क्रीन रीडर्ससाठी स्पष्टपणे उच्चारणे कठीण आहे
+- **एकल शब्द** जसे "जा" किंवा "पहा" वर्णनात्मक संदर्भाचा अभाव आहे
 
-### उत्कृष्ट लिंक मजकूर लिहिणे
+### उत्कृष्ट लिंक टेक्स्ट लिहिणे
 
-वर्णनात्मक लिंक मजकूर सर्वांसाठी फायदेशीर आहे—दृष्टी असलेले वापरकर्ते लिंक्स जलद स्कॅन करू शकतात आणि स्क्रीन रीडर वापरकर्ते गंतव्यस्थान त्वरित समजतात.
+वर्णनात्मक लिंक टेक्स्ट सर्वांना फायदेशीर ठरते—दृष्टी असलेले वापरकर्ते लिंक्स जलद स्कॅन करू शकतात आणि स्क्रीन रीडर वापरकर्ते गंतव्यस्थान त्वरित समजतात.
 
-**✅ स्पष्ट, वर्णनात्मक लिंक मजकूर उदाहरणे:**
+**✅ स्पष्ट, वर्णनात्मक लिंक टेक्स्ट उदाहरणे:**
 
 ```html
 <!-- Descriptive text that explains the destination -->
@@ -570,104 +715,139 @@ button:focus:not(:focus-visible) {
 <a href="/help">Get help with your account</a>
 ```
 
-**लिंक मजकूर सर्वोत्तम पद्धती:**
+**लिंक टेक्स्ट सर्वोत्तम पद्धती:**
 - **विशिष्ट व्हा**: "तिमाही आर्थिक अहवाल डाउनलोड करा" विरुद्ध "डाउनलोड"
 - **फाइल प्रकार आणि आकार समाविष्ट करा**: "(PDF, 1.2MB)" डाउनलोड करण्यायोग्य फाइलसाठी
 - **लिंक्स बाहेरून उघडल्यास उल्लेख करा**: "(नवीन विंडोमध्ये उघडते)" योग्य असल्यास
 - **सक्रिय भाषा वापरा**: "आमच्याशी संपर्क साधा" विरुद्ध "संपर्क पृष्ठ"
-- **संक्षिप्त ठेवा**: शक्य असल्यास 2-8 शब्दांचे लक्ष्य ठेवा
+- **संक्ष
+**ARIA च्या पाच श्रेणी:**
 
-### प्रगत लिंक प्रवेशयोग्यता नमुने
+1. **Roles**: हा घटक काय आहे? (`button`, `tab`, `dialog`)
+2. **Properties**: त्याची वैशिष्ट्ये काय आहेत? (`aria-required`, `aria-haspopup`)
+3. **States**: त्याची सध्याची स्थिती काय आहे? (`aria-expanded`, `aria-checked`)
+4. **Landmarks**: पृष्ठाच्या संरचनेत तो कुठे आहे? (`banner`, `navigation`, `main`)
+5. **Live regions**: बदल कसे जाहीर केले पाहिजेत? (`aria-live`, `aria-atomic`)
 
-कधीकधी दृश्य डिझाइन मर्यादा किंवा तांत्रिक आवश्यकता विशेष उपायांची आवश्यकता असते. सामान्य आव्हानात्मक परिस्थितींसाठी येथे परिष्कृत तंत्र आहेत:
+### आधुनिक वेब अॅप्ससाठी आवश्यक ARIA पॅटर्न
 
-**वाढीव संदर्भासाठी ARIA वापरणे:**
+हे पॅटर्न परस्परसंवादी वेब अॅप्लिकेशन्समधील सर्वसामान्य अॅक्सेसिबिलिटी आव्हाने सोडवतात:
+
+**घटकांचे नाव आणि वर्णन देणे:**
 
 ```html
-<!-- When button text must be short but needs more context -->
-<a href="/report.pdf" 
-   aria-label="Download 2024 annual financial report, PDF format, 2.3MB">
-  Download Report
-</a>
-
-<!-- When the full context comes from surrounding content -->
-<h3 id="sustainability-heading">Sustainability Initiative</h3>
-<p>Our efforts to reduce environmental impact...</p>
-<a href="/sustainability-details" 
-   aria-labelledby="sustainability-heading"
-   aria-describedby="sustainability-summary">
-  Learn more
-</a>
-<p id="sustainability-summary">Detailed breakdown of our 2024 environmental goals and achievements</p>
+<!-- aria-label: Provides accessible name when visible text isn't sufficient -->
+<button aria-label="Close newsletter subscription dialog">×</button>
+
+<!-- aria-labelledby: References existing text as the accessible name -->
+<section aria-labelledby="news-heading">
+  <h2 id="news-heading">Latest News</h2>
+  <!-- news content -->
+</section>
+
+<!-- aria-describedby: Links to additional descriptive text -->
+<input type="password" 
+       aria-describedby="pwd-requirements pwd-strength"
+       required>
+<div id="pwd-requirements">
+  Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
+</div>
+<div id="pwd-strength" aria-live="polite">
+  <!-- Dynamic password strength indicator -->
+</div>
 ```
 
-**फाइल प्रकार आणि बाह्य गंतव्ये दर्शविणे:**
+**डायनॅमिक सामग्रीसाठी Live regions:**
 
 ```html
-<!-- Method 1: Include information in visible link text -->
-<a href="/annual-report.pdf">
-  Download our 2024 annual report (PDF, 2.3MB)
-</a>
-
-<!-- Method 2: Use screen reader-only text for file details -->
-<a href="/annual-report.pdf">
-  Download our 2024 annual report
-  <span class="sr-only">(PDF format, 2.3MB)</span>
-</a>
-
-<!-- Method 3: External link indication -->
-<a href="https://example.com" 
-   target="_blank" 
-   aria-describedby="external-link-warning">
-  Visit external resource
-</a>
-<span id="external-link-warning" class="sr-only">
-  (opens in new window)
-</span>
-
-<!-- Method 4: Using CSS for visual indicators -->
-<a href="https://example.com" class="external-link">
-  External resource
-</a>
-```
+<!-- Polite announcements (don't interrupt current speech) -->
+<div aria-live="polite" id="status-updates">
+  <!-- Status messages appear here -->
+</div>
 
-```css
-/* Visual indicator for external links */
-.external-link::after {
-  content: " ↗";
-  font-size: 0.8em;
-  color: #666;
-}
+<!-- Assertive announcements (interrupt and announce immediately) -->
+<div aria-live="assertive" id="urgent-alerts">
+  <!-- Error messages and critical alerts -->
+</div>
 
-/* Screen reader announcement for external links */
-.external-link::before {
-  content: "External link: ";
-  position: absolute;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
+<!-- Loading states with live regions -->
+<button id="submit-btn" aria-describedby="loading-status">
+  Submit Application
+</button>
+<div id="loading-status" aria-live="polite" aria-atomic="true">
+  <!-- "Processing your application..." appears here -->
+</div>
 ```
 
-> ⚠️ **महत्त्वाचे**: `target="_blank"` वापरताना, लिंक नवीन विंडो किंवा टॅबमध्ये उघडते हे नेहमी वापरकर्त्यांना कळवा. अनपेक्षित नेव्हिगेशन बदल गोंधळात टाकू शकतात.
-
-✅ **तुमच्या लिंक संदर्भाची चाचणी करा**: तुमच्या ब्राउझरच्या डेव्हलपर टूल्सचा वापर करून तुमच्या पृष्ठावरील सर्व लिंक्सची यादी तयार करा. तुम्हाला कोणत्याही सभोवतालच्या संदर्भाशिवाय प्रत्येक लिंकचा उद्देश समजतो का?
+**परस्परसंवादी विजेट उदाहरण (accordion):**
 
-## ARIA: HTML प्रवेशयोग्यता सुपरचार्ज करणे
+```html
+<div class="accordion">
+  <h3>
+    <button aria-expanded="false" 
+            aria-controls="panel-1" 
+            id="accordion-trigger-1"
+            class="accordion-trigger">
+      Accessibility Guidelines
+    </button>
+  </h3>
+  <div id="panel-1" 
+       role="region"
+       aria-labelledby="accordion-trigger-1" 
+       hidden>
+    <p>WCAG 2.1 provides comprehensive guidelines...</p>
+  </div>
+</div>
+```
 
-[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) म्हणजे तुमच्या जटिल वेब अनुप्रयोगांमध्ये आणि सहाय्यक तंत्रज्ञानांमध्ये सार्वत्रिक अनुवादक असणे. HTML एकट्याने तुमच्या परस्परसंवादी घटकांमध्ये घडत असलेल्या प्रत्येक गोष्टीचे वर्णन करू शकत नसल्यास, ARIA त्या अंतर भरून काढण्यासाठी पुढे येते.
+```javascript
+// JavaScript to manage accordion state
+function toggleAccordion(trigger) {
+  const panel = document.getElementById(trigger.getAttribute('aria-controls'));
+  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+  
+  // Toggle states
+  trigger.setAttribute('aria-expanded', !isExpanded);
+  panel.hidden = isExpanded;
+  
+  // Announce change to screen readers
+  const status = document.getElementById('status-updates');
+  status.textContent = isExpanded ? 'Section collapsed' : 'Section expanded';
+}
+```
 
-ARIA म्हणजे तुमच्या HTML मध्ये उपयुक्त टिप्पण्या जोडणे—जणू काही नाटकाच्या स्क्रिप्टमध्ये स्टेज डायरेक्शन जोडल्यासारखे जे अभिनेत्यांना त्यांच्या भूमिका आणि संबंध समजून घेण्यास मदत करते.
+### ARIA अंमलबजावणीसाठी सर्वोत्तम पद्धती
 
-**ARIA बद्दल सर्वात महत्त्वाचे नियम येथे आहेत**: नेहमी प्रथम सेमॅंटिक HTML वापरा, नंतर ARIA जोडून ते वाढवा. ARIA ला मुख्य पदार्थ नाही तर मसाला समजा. याने तुमच्या HTML संरचनेचे स्पष्टीकरण आणि वाढ करणे आवश्यक आहे, कधीही त्याची जागा घेऊ नये. प्रथम तो पाया योग्य मिळवा!
+ARIA प्रभावी आहे परंतु काळजीपूर्वक अंमलबजावणीची आवश्यकता आहे. या मार्गदर्शक तत्त्वांचे पालन केल्याने तुमचे ARIA अॅक्सेसिबिलिटी सुधारण्यास मदत करते:
 
-### ARIA अंमलबजावणीसाठी धोरणात्मक दृष्टिकोन
+**🛡️ मुख्य तत्त्वे:**
 
-ARIA शक्तिशाली आहे, परंतु शक्तीसोबत जबाबदारी येते. चुकीचे ARIA प्रवेशयोग्यता नसलेल्या ARIA पेक्षा वाईट बनवू शकते. येथे कधी आणि कसे प्रभावीपणे वापरायचे:
+```mermaid
+flowchart TD
+    A[🚀 Start with semantic HTML] --> B{Does HTML provide needed semantics?}
+    B -->|Yes| C[✅ Use HTML only]
+    B -->|No| D[Consider ARIA enhancement]
+    D --> E{Can you achieve it with simpler means?}
+    E -->|Yes| F[🔄 Simplify approach]
+    E -->|No| G[📝 Implement ARIA carefully]
+    G --> H[🧪 Test with real AT]
+    H --> I{Works as expected?}
+    I -->|No| J[🔧 Debug and fix]
+    I -->|Yes| K[✅ Success!]
+    J --> H
+    F --> C
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style K fill:#e8f5e8
+    style G fill:#fff3e0
+    style H fill:#f3e5f5
+```
 
-**✅ ARIA वापरा जेव्हा:**
-- सानुकूल परस्परसंवादी विजेट्स तयार करणे (अ‍ॅकॉर्डियन, ट
+1. **प्रथम सेमॅंटिक HTML**: नेहमी `<button>` ला `<div role="button">` वर प्राधान्य द्या
+2. **सेमॅंटिक्स खराब करू नका**: विद्यमान HTML अर्थ ओव्हरराइड करू नका (जसे `<h1 role="button">`)
+3. **कीबोर्ड अॅक्सेसिबिलिटी राखा**: सर्व परस्परसंवादी ARIA घटक पूर्णपणे कीबोर्ड अॅक्सेसिबल असले पाहिजेत
+4. **खऱ्या वापरकर्त्यांसह चाचणी करा**: सहाय्यक तंत्रज्ञानांमध्ये ARIA समर्थन लक्षणीयपणे बदलते
 5. **सोप्या गोष्टींनी सुरुवात करा**: जटिल ARIA अंमलबजावणीमध्ये त्रुटी होण्याची शक्यता जास्त असते
 
 **🔍 चाचणी कार्यप्रवाह:**
@@ -684,48 +864,65 @@ graph TD
     G --> B
 ```
 
-**🚫 टाळावयाच्या सामान्य ARIA चुका:**
+**🚫 टाळण्याच्या सामान्य ARIA चुका:**
 
 - **विरोधाभासी माहिती**: HTML सेमॅंटिक्सशी विरोधाभास करू नका
 - **अतिरिक्त लेबलिंग**: खूप जास्त ARIA माहिती वापरकर्त्यांना गोंधळात टाकते
 - **स्थिर ARIA**: सामग्री बदलल्यावर ARIA स्टेट्स अपडेट करणे विसरणे
-- **अप्रशिक्षित अंमलबजावणी**: सैद्धांतिकदृष्ट्या कार्य करणारे ARIA परंतु प्रत्यक्षात अयशस्वी
-- **किबोर्ड समर्थनाचा अभाव**: ARIA भूमिका परंतु संबंधित किबोर्ड संवाद नसणे
+- **अचाचणी केलेली अंमलबजावणी**: सिद्धांतात कार्य करणारे ARIA परंतु प्रत्यक्षात अयशस्वी
+- **कीबोर्ड समर्थनाचा अभाव**: ARIA roles शिवाय संबंधित कीबोर्ड परस्परसंवाद
+
+> 💡 **चाचणी संसाधने**: [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) सारख्या साधनांचा वापर ARIA च्या स्वयंचलित पडताळणीसाठी करा, परंतु संपूर्ण अनुभवासाठी नेहमी खऱ्या स्क्रीन रीडर्ससह चाचणी करा.
+
+### 🎭 **ARIA कौशल्य तपासणी: जटिल परस्परसंवादासाठी तयार आहात का?**
 
-> 💡 **चाचणी संसाधने**: [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) सारख्या साधनांचा वापर करून स्वयंचलित ARIA पडताळणी करा, परंतु पूर्ण अनुभवासाठी नेहमी वास्तविक स्क्रीन रीडर्ससह चाचणी करा.
+**तुमचा ARIA आत्मविश्वास मोजा:**
+- तुम्ही सेमॅंटिक HTML ऐवजी ARIA कधी निवडाल? (सूचना: जवळजवळ कधीच नाही!)
+- तुम्ही स्पष्ट करू शकता का की `<div role="button">` सहसा `<button>` पेक्षा वाईट का आहे?
+- ARIA चाचणीबद्दल लक्षात ठेवण्यासारखी सर्वात महत्त्वाची गोष्ट काय आहे?
 
-✅ **तज्ञांकडून शिका**: [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) अभ्यास करा, जटिल परस्परसंवादी विजेट्ससाठी चाचणी केलेल्या नमुन्यांसाठी.
+```mermaid
+pie title "Common ARIA Usage Patterns"
+    "Labels & Descriptions" : 40
+    "Live Regions" : 25
+    "Widget States" : 20
+    "Complex Controls" : 15
+```
 
-## प्रतिमा आणि माध्यमे सुलभ बनवणे
+> **महत्त्वाचा दृष्टिकोन**: ARIA चा सर्वाधिक वापर घटकांचे लेबलिंग आणि वर्णन करण्यासाठी केला जातो. जटिल विजेट पॅटर्न अपेक्षेपेक्षा कमी सामान्य आहेत!
 
-दृश्य आणि ऑडिओ सामग्री आधुनिक वेब अनुभवाचा महत्त्वाचा भाग आहे, परंतु विचारपूर्वक अंमलबजावणी न केल्यास अडथळे निर्माण होऊ शकतात. उद्दिष्ट म्हणजे तुमची माहिती आणि माध्यमांचा भावनिक प्रभाव प्रत्येक वापरकर्त्यापर्यंत पोहोचवणे. एकदा तुम्हाला याची सवय झाली की, ते सहजतेने होईल.
+✅ **तज्ञांकडून शिका**: [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) अभ्यास करा जटिल परस्परसंवादी विजेट्ससाठी चाचणी केलेले पॅटर्न आणि अंमलबजावणी.
 
-विविध प्रकारच्या माध्यमांसाठी वेगवेगळ्या सुलभता पद्धती आवश्यक असतात. हे स्वयंपाकासारखे आहे—तुम्ही नाजूक मासा जसा हाताळता तसा मजबूत स्टेक हाताळणार नाही. या फरकांची समज तुम्हाला प्रत्येक परिस्थितीसाठी योग्य उपाय निवडण्यास मदत करते.
+## प्रतिमा आणि माध्यमे अॅक्सेसिबल बनवणे
 
-### रणनीतिक प्रतिमा सुलभता
+दृश्य आणि ऑडिओ सामग्री आधुनिक वेब अनुभवांचा महत्त्वाचा भाग आहे, परंतु विचारपूर्वक अंमलबजावणी न केल्यास ती अडथळे निर्माण करू शकते. उद्दिष्ट म्हणजे तुमच्या माध्यमाची माहिती आणि भावनिक प्रभाव प्रत्येक वापरकर्त्यापर्यंत पोहोचवणे. एकदा तुम्हाला त्याची सवय झाली की, ते सहज होते.
+
+वेगवेगळ्या प्रकारच्या माध्यमांसाठी वेगवेगळ्या अॅक्सेसिबिलिटी पद्धती आवश्यक असतात. हे स्वयंपाकासारखे आहे—तुम्ही नाजूक मासा जसा हाताळता तसा मजबूत स्टेक हाताळणार नाही. या फरकांची समज तुम्हाला प्रत्येक परिस्थितीसाठी योग्य उपाय निवडण्यास मदत करते.
+
+### रणनीतिक प्रतिमा अॅक्सेसिबिलिटी
 
 तुमच्या वेबसाइटवरील प्रत्येक प्रतिमेचा एक उद्देश असतो. त्या उद्देशाची समज तुम्हाला चांगला पर्यायी मजकूर लिहिण्यास आणि अधिक समावेशक अनुभव तयार करण्यास मदत करते.
 
-**प्रतिमांचे चार प्रकार आणि त्यांचे alt टेक्स्ट धोरण:**
+**प्रतिमांचे चार प्रकार आणि त्यांचे alt text धोरण:**
 
 **माहितीपूर्ण प्रतिमा** - महत्त्वाची माहिती देतात:
 ```html
 <img src="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.mr.png" alt="Sales increased 25% from Q1 to Q2 2024">
 ```
 
-**सजावटीच्या प्रतिमा** - फक्त दृश्यात्मक, कोणतेही माहितीमूल्य नाही:
+**सजावटीच्या प्रतिमा** - फक्त दृश्यात्मक, कोणतेही माहितीपूर्ण मूल्य नाही:
 ```html
 <img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d57fb6357835906c16938df3d5651c1314c196c3b1c52df98.mr.png" alt="" role="presentation">
 ```
 
-**कार्यात्मक प्रतिमा** - बटणे किंवा नियंत्रण म्हणून काम करतात:
+**कार्यात्मक प्रतिमा** - बटणे किंवा नियंत्रण म्हणून कार्य करतात:
 ```html
 <button>
   <img src="search-icon.svg" alt="Search">
 </button>
 ```
 
-**जटिल प्रतिमा** - चार्ट, आकृतिबंध, माहितीपट:
+**जटिल प्रतिमा** - चार्ट, आकृतिबंध, माहितीपूर्ण ग्राफिक्स:
 ```html
 <img src="../../../../translated_images/complex-chart.c831f461a363b446a688be5ccacde20d011221758c902cb082cfd4293534ef17.mr.png" alt="Quarterly sales data" aria-describedby="chart-description">
 <div id="chart-description">
@@ -733,12 +930,12 @@ graph TD
 </div>
 ```
 
-### व्हिडिओ आणि ऑडिओ सुलभता
+### व्हिडिओ आणि ऑडिओ अॅक्सेसिबिलिटी
 
-**व्हिडिओसाठी आवश्यकताः**
+**व्हिडिओसाठी आवश्यकता:**
 - **कॅप्शन्स**: बोललेल्या सामग्रीचा आणि ध्वनी प्रभावांचा मजकूर आवृत्ती
 - **ऑडिओ वर्णन**: अंध वापरकर्त्यांसाठी दृश्य घटकांचे वर्णन
-- **ट्रान्सक्रिप्ट्स**: सर्व ऑडिओ आणि दृश्य सामग्रीची पूर्ण मजकूर आवृत्ती
+- **ट्रान्सक्रिप्ट्स**: सर्व ऑडिओ आणि व्हिज्युअल सामग्रीची संपूर्ण मजकूर आवृत्ती
 
 ```html
 <video controls>
@@ -748,13 +945,13 @@ graph TD
 </video>
 ```
 
-**ऑडिओसाठी आवश्यकताः**
+**ऑडिओसाठी आवश्यकता:**
 - **ट्रान्सक्रिप्ट्स**: सर्व बोललेल्या सामग्रीची मजकूर आवृत्ती
-- **दृश्य संकेत**: फक्त ऑडिओ सामग्रीसाठी, दृश्य संकेत प्रदान करा
+- **दृश्य निर्देशक**: फक्त ऑडिओ सामग्रीसाठी, दृश्य संकेत प्रदान करा
 
 ### आधुनिक प्रतिमा तंत्र
 
-**सजावटीच्या प्रतिमांसाठी CSS वापरणे:**
+**सजावटीच्या प्रतिमांसाठी CSS चा वापर:**
 ```css
 .hero-section {
   background-image: url('decorative-hero.jpg');
@@ -762,7 +959,7 @@ graph TD
 }
 ```
 
-**सुलभतेसह प्रतिसादक्षम प्रतिमा:**
+**अॅक्सेसिबिलिटीसह प्रतिसादात्मक प्रतिमा:**
 ```html
 <picture>
   <source media="(min-width: 800px)" srcset="large-chart.png">
@@ -771,15 +968,34 @@ graph TD
 </picture>
 ```
 
-✅ **प्रतिमा सुलभता चाचणी करा**: स्क्रीन रीडर वापरून प्रतिमांसह पृष्ठ नेव्हिगेट करा. तुम्हाला सामग्री समजण्यासाठी पुरेशी माहिती मिळते का?
+✅ **प्रतिमा अॅक्सेसिबिलिटी चाचणी करा**: स्क्रीन रीडर वापरून प्रतिमांसह पृष्ठ नेव्हिगेट करा. तुम्हाला सामग्री समजण्यासाठी पुरेशी माहिती मिळत आहे का?
 
-## किबोर्ड नेव्हिगेशन आणि फोकस व्यवस्थापन
+## कीबोर्ड नेव्हिगेशन आणि फोकस व्यवस्थापन
 
-अनेक वापरकर्ते पूर्णपणे त्यांच्या किबोर्डसह वेब नेव्हिगेट करतात. यामध्ये मोटर अपंगत्व असलेले लोक, किबोर्डला माउसपेक्षा जलद मानणारे पॉवर वापरकर्ते आणि ज्यांचा माउस काम करत नाही असे कोणीही समाविष्ट आहे. तुमची साइट किबोर्ड इनपुटसह चांगले कार्य करते याची खात्री करणे आवश्यक आहे आणि अनेकदा तुमची साइट सर्वांसाठी अधिक कार्यक्षम बनवते.
+अनेक वापरकर्ते पूर्णपणे कीबोर्डसह वेब नेव्हिगेट करतात. यामध्ये मोटर अपंगत्व असलेले लोक, कीबोर्डला माऊसपेक्षा जलद मानणारे पॉवर वापरकर्ते आणि ज्यांचा माऊस काम करत नाही असे कोणीही समाविष्ट आहे. तुमची साइट कीबोर्ड इनपुटसह चांगले कार्य करते याची खात्री करणे आवश्यक आहे आणि अनेकदा तुमची साइट सर्वांसाठी अधिक कार्यक्षम बनवते.
 
-### आवश्यक किबोर्ड नेव्हिगेशन नमुने
+```mermaid
+flowchart LR
+    A[⌨️ Keyboard Navigation] --> B[Tab Order]
+    A --> C[Focus Indicators]
+    A --> D[Skip Links]
+    A --> E[Keyboard Shortcuts]
+    
+    B --> B1[Logical sequence<br/>All interactive elements<br/>No tab traps]
+    C --> C1[Visible outlines<br/>High contrast<br/>Clear boundaries]
+    D --> D1[Skip to main<br/>Skip to nav<br/>Bypass repetitive]
+    E --> E1[Escape to close<br/>Enter to activate<br/>Arrows in groups]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-**मानक किबोर्ड संवाद:**
+### आवश्यक कीबोर्ड नेव्हिगेशन पॅटर्न
+
+**मानक कीबोर्ड परस्परसंवाद:**
 - **Tab**: परस्परसंवादी घटकांमधून पुढे फोकस हलवा
 - **Shift + Tab**: फोकस मागे हलवा
 - **Enter**: बटणे आणि दुवे सक्रिय करा
@@ -803,7 +1019,7 @@ button:focus-visible {
 }
 ```
 
-**कार्यक्षम नेव्हिगेशनसाठी स्किप लिंक:**
+**कार्यक्षम नेव्हिगेशनसाठी Skip links:**
 ```html
 <a href="#main-content" class="skip-link">Skip to main content</a>
 <a href="#navigation" class="skip-link">Skip to navigation</a>
@@ -816,7 +1032,7 @@ button:focus-visible {
 </main>
 ```
 
-**योग्य टॅब क्रम:**
+**योग्य टॅब ऑर्डर:**
 ```html
 <!-- Use semantic HTML for natural tab order -->
 <form>
@@ -865,15 +1081,15 @@ function trapFocus(element) {
 }
 ```
 
-✅ **किबोर्ड नेव्हिगेशन चाचणी करा**: फक्त Tab की वापरून तुमची वेबसाइट नेव्हिगेट करण्याचा प्रयत्न करा. तुम्ही सर्व परस्परसंवादी घटकांपर्यंत पोहोचू शकता का? फोकस क्रम तार्किक आहे का? फोकस निर्देशक स्पष्टपणे दृश्यमान आहेत का?
+✅ **कीबोर्ड नेव्हिगेशन चाचणी करा**: फक्त Tab की वापरून तुमची वेबसाइट नेव्हिगेट करण्याचा प्रयत्न करा. तुम्ही सर्व परस्परसंवादी घटकांपर्यंत पोहोचू शकता का? फोकस ऑर्डर तार्किक आहे का? फोकस निर्देशक स्पष्टपणे दृश्यमान आहेत का?
 
-## फॉर्म सुलभता
+## फॉर्म अॅक्सेसिबिलिटी
 
-फॉर्म वापरकर्त्यांच्या संवादासाठी महत्त्वाचे आहेत आणि सुलभतेसाठी विशेष लक्ष देणे आवश्यक आहे.
+फॉर्म वापरकर्त्यांच्या परस्परसंवादासाठी महत्त्वाचे आहेत आणि अॅक्सेसिबिलिटीसाठी विशेष लक्ष देणे आवश्यक आहे.
 
 ### लेबल आणि फॉर्म नियंत्रण संघटना
 
-**प्रत्येक फॉर्म नियंत्रणासाठी लेबल आवश्यक आहे:**
+**प्रत्येक फॉर्म नियंत्रणाला लेबल आवश्यक आहे:**
 ```html
 <!-- Explicit labeling (preferred) -->
 <label for="username">Username:</label>
@@ -891,7 +1107,7 @@ function trapFocus(element) {
 
 ### त्रुटी हाताळणी आणि पडताळणी
 
-**सुलभ त्रुटी संदेश:**
+**अॅक्सेसिबल त्रुटी संदेश:**
 ```html
 <label for="email">Email Address:</label>
 <input type="email" id="email" name="email" 
@@ -903,12 +1119,12 @@ function trapFocus(element) {
 ```
 
 **फॉर्म पडताळणी सर्वोत्तम पद्धती:**
-- `aria-invalid` वापरून अवैध फील्ड दर्शवा
+- `aria-invalid` चा वापर करून अवैध फील्ड दर्शवा
 - स्पष्ट, विशिष्ट त्रुटी संदेश प्रदान करा
 - महत्त्वाच्या त्रुटी घोषणांसाठी `role="alert"` वापरा
 - त्रुटी त्वरित आणि फॉर्म सबमिशनवर दर्शवा
 
-### फील्डसेट्स आणि गटबद्धीकरण
+### Fieldsets आणि गटबद्धीकरण
 
 **संबंधित फॉर्म नियंत्रण गटबद्ध करा:**
 ```html
@@ -931,153 +1147,109 @@ function trapFocus(element) {
 </fieldset>
 ```
 
-## तुमचा सुलभता प्रवास: मुख्य मुद्दे
+## तुमचा अॅक्सेसिबिलिटी प्रवास: मुख्य मुद्दे
 
-अभिनंदन! तुम्ही खरोखर समावेशक वेब अनुभव तयार करण्यासाठी मूलभूत ज्ञान मिळवले आहे. हे खूप रोमांचक आहे! वेब सुलभता फक्त अनुपालन बॉक्स तपासण्याबद्दल नाही—हे लोक डिजिटल सामग्रीशी संवाद साधण्याच्या विविध मार्गांची ओळख करून देणे आणि त्या अद्भुत गुंतागुंतीसाठी डिझाइन करणे आहे.
+अभिनंदन! तुम्ही खऱ्या अर्थाने समावेशक वेब अनुभव तयार करण्यासाठी मूलभूत ज्ञान मिळवले आहे. हे खूप रोमांचक आहे! वेब अॅक्सेसिबिलिटी फक्त अनुपालन बॉक्स तपासण्याबद्दल नाही—हे लोक डिजिटल सामग्रीशी संवाद साधण्याच्या विविध मार्गांची ओळख करून देणे आणि त्या अद्भुत जटिलतेसाठी डिझाइन करण्याबद्दल आहे.
 
 तुम्ही आता विकसकांच्या वाढत्या समुदायाचा भाग आहात ज्यांना समजते की उत्कृष्ट डिझाइन सर्वांसाठी कार्य करते. क्लबमध्ये स्वागत आहे!
 
-**🎯 तुमच्या सुलभता टूलकिटमध्ये आता समाविष्ट आहे:**
+**🎯 तुमच्या अॅक्सेसिबिलिटी टूलकिटमध्ये आता समाविष्ट आहे:**
 
 | मुख्य तत्त्व | अंमलबजावणी | परिणाम |
 |----------------|----------------|---------|
-| **सेमॅंटिक HTML पाया** | योग्य HTML घटक त्यांच्या उद्देशासाठी वापरा | स्क्रीन रीडर्स कार्यक्षमतेने नेव्हिगेट करू शकतात, किबोर्ड स्वयंचलितपणे कार्य करतात |
+| **सेमॅंटिक HTML पाया** | HTML घटक योग्य उद्देशासाठी वापरा | स्क्रीन रीडर्स कार्यक्षमतेने नेव्हिगेट करू शकतात, कीबोर्ड स्वयंचलितपणे कार्य करतात |
 | **समावेशक दृश्य डिझाइन** | पुरेसा कॉन्ट्रास्ट, अर्थपूर्ण रंग वापर, दृश्यमान फोकस निर्देशक | कोणत्याही प्रकाश परिस्थितीत सर्वांसाठी स्पष्ट |
-| **वर्णनात्मक सामग्री** | अर्थपूर्ण लिंक मजकूर, alt टेक्स्ट, हेडिंग्ज | वापरकर्त्यांना दृश्य संदर्भाशिवाय सामग्री समजते |
-| **किबोर्ड सुलभता** | टॅब क्रम, किबोर्ड शॉर्टकट्स, फोकस व्यवस्थापन | मोटर सुलभता आणि पॉवर वापरकर्ता कार्यक्षमता |
-| **ARIA सुधारणा** | सेमॅंटिक अंतर भरण्यासाठी धोरणात्मक वापर | जटिल अनुप्रयोग सहाय्यक तंत्रज्ञानासह कार्य करतात |
-| **व्यापक चाचणी** | स्वयंचलित साधने + मॅन्युअल पडताळणी + वास्तविक वापरकर्ता चाचणी | वापरकर्त्यांवर परिणाम होण्यापूर्वी समस्या शोधा |
+| **वर्णनात्मक सामग्री** | अर्थपूर्ण लिंक मजकूर, alt text, headings | वापरकर्त्यांना दृश्य संदर्भाशिवाय सामग्री समजते |
+| **कीबोर्ड अॅक्सेसिबिलिटी** | टॅब ऑर्डर, कीबोर्ड शॉर्टकट्स, फोकस व्यवस्थापन | मोटर अॅक्सेसिबिलिटी आणि पॉवर वापरकर्ता कार्यक्षमता |
+| **ARIA सुधारणा** | सेमॅंटिक अंतर भरण्यासाठी रणनीतिक वापर | जटिल अॅप्लिकेशन्स सहाय्यक तंत्रज्ञानासह कार्य करतात |
+| **संपूर्ण चाचणी** | स्वयंचलित साधने + मॅन्युअल पडताळणी + खऱ्या वापरकर्त्यांसह चाचणी | वापरकर्त्यांवर परिणाम होण्यापूर्वी समस्या शोधा |
 
 **🚀 तुमचे पुढील पाऊल:**
 
-1. **तुमच्या कार्यप्रवाहात सुलभता तयार करा**: चाचणी तुमच्या विकास प्रक्रियेचा नैसर्गिक भाग बनवा
-2. **वास्तविक वापरकर्त्यांकडून शिका**: सहाय्यक तंत्रज्ञान वापरणाऱ्या लोकांकडून अभिप्राय मिळवा
-3. **सद्यस्थितीत रहा**: नवीन तंत्रज्ञान आणि मानकांसह सुलभता तंत्र विकसित होते
-4. **समावेशासाठी वकिली करा**: तुमचे ज्ञान सामायिक करा आणि सुलभता टीम प्राधान्य बनवा
+1. **तुमच्या कार्यप्रवाहात अॅक्सेसिबिलिटी तयार करा**: चाचणी तुमच्या विकास प्रक्रियेचा नैसर्गिक भाग बनवा
+2. **खऱ्या वापरकर्त्यांकडून शिका**: सहाय्यक तंत्रज्ञान वापरणाऱ्या लोकांकडून अभिप्राय शोधा
+3. **सध्याच्या तंत्रज्ञानाशी अद्ययावत रहा**: अॅक्सेसिबिलिटी तंत्र नवीन तंत्रज्ञान आणि मानकांसह विकसित होते
+4. **समावेशासाठी वकिली करा**: तुमचे ज्ञान सामायिक करा आणि अॅक्सेसिबिलिटीला टीम प्राधान्य बनवा
 
-> 💡 **लक्षात ठेवा**: सुलभता मर्यादा अनेकदा नाविन्यपूर्ण, मोहक उपाय तयार करतात जे सर्वांसाठी फायदेशीर असतात. कर्ब कट्स, कॅप्शन्स आणि व्हॉइस कंट्रोल्स हे सर्व सुलभता वैशिष्ट्ये म्हणून सुरू झाले आणि मुख्य प्रवाहातील सुधारणा बनले.
+> 💡 **लक्षात ठेवा**: अॅक्सेसिबिलिटी मर्यादा अनेकदा नाविन्यपूर्ण, मोहक उपाय तयार करतात जे सर्वांसाठी फायदेशीर ठरतात. कर्ब कट्स, कॅप्शन्स आणि व्हॉइस कंट्रोल्स हे सर्व अॅक्सेसिबिलिटी वैशिष्ट्ये म्हणून सुरू झाले आणि मुख्य प्रवाहातील सुधारणा बनले.
 
-**व्यवसायाचा मुद्दा स्पष्ट आहे**: सुलभ वेबसाइट्स अधिक वापरकर्त्यांपर्यंत पोहोचतात, शोध इंजिनमध्ये चांगले रँक करतात, कमी देखभाल खर्च असतो आणि कायदेशीर जोखमी टाळतात. पण प्रामाणिकपणे? सुलभतेची काळजी घेण्याचे खरे कारण खूप खोलवर जाते. सुलभ वेबसाइट्स वेबच्या सर्वोत्तम मूल्यांचे प्रतीक आहेत—उघडपणा, समावेशिता आणि प्रत्येकाला माहिती समान प्रवेश मिळण्याची कल्पना.
+**व्यवसायाचा मुद्दा स्पष्ट आहे**: अॅक्सेसिबल वेबसाइट्स अधिक वापरकर्त्यांपर्यंत पोहोचतात, शोध इंजिनमध्ये चांगले रँक करतात, कमी देखभाल खर्च करतात आणि कायदेशीर जोखमी टाळतात. पण प्रामाणिकपणे? अॅक्सेसिबिलिटीची काळजी घेण्याचे खरे कारण खूप खोलवर जाते. अॅक्सेसिबल वेबसाइट्स वेबच्या सर्वोत्तम मूल्यांचे प्रतीक आहेत—उघडलेपणा, समावेशिता आणि प्रत्येकाला माहिती समान प्रवेश मिळावा ही कल्पना.
 
-तुम्ही आता भविष्यातील समावेशक वेब तयार करण्यासाठी सुसज्ज आहात. तुम्ही तयार केलेली प्रत्येक सुलभ साइट इंटरनेटला सर्वांसाठी अधिक स्वागतार्ह जागा बनवते. हे विचार केल्यावर खूप आश्चर्यकारक आहे!
+तुम्ही आता भविष्यातील समावेशक वेब तयार करण्यासाठी सुसज्ज आहात. तुम्ही तयार केलेली प्रत्येक अॅक्सेसिबल साइट इंटरनेटला सर्वांसाठी अधिक स्वागतार्ह जागा बनवते. हे विचार केल्यावर खूप आश्चर्यकारक आहे!
 
 ## अतिरिक्त संसाधने
 
-या आवश्यक संसाधनांसह तुमच्या सुलभता शिक्षण प्रवासाला पुढे चालू ठेवा:
+तुमच्या अॅक्सेसिबिलिटी शिकण्याच्या प्रवासाला या आवश्यक संसाधनांसह सुरू ठेवा:
 
 **📚 अधिकृत मानके आणि मार्गदर्शक तत्त्वे:**
-- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - अधिकृत सुलभता मानक जलद संदर्भासह
-- [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - परस्परसंवादी विजेट्ससाठी व्यापक नमुने
-- [WebAIM Guidelines](https://webaim.org/) - व्यावहारिक, नवशिक्या-अनुकूल सुलभता मार्गदर्शन
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - अधिकृत अॅक्सेसिबिलिटी मानक जलद संदर्भासह
+- [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - परस्परसंवादी विजेट्ससाठी व्यापक पॅटर्न
+- [WebAIM Guidelines](https://webaim.org/) - व्यावहारिक, नवशिक्यांसाठी अनुकूल अॅक्सेसिबिलिटी मार्गदर्शन
 
 **🛠️ साधने आणि चाचणी संसाधने:**
-- [axe DevTools](https://www.deque.com/axe/devtools/) - उद्योग-मानक सुलभता चाचणी
-- [A11y Project Checklist](https://www.a11yproject.com/checklist/) - सुलभता पडताळणी चरण-दर-चरण
-- [Accessibility Insights](https://accessibilityinsights.io/) - मायक्रोसॉफ्टचे सर्वसमावेशक चाचणी संच
+- [axe DevTools](https://www.deque.com/axe/devtools/) - उद्योग-मानक अॅक्सेसिबिलिटी चाचणी
+- [A11y Project Checklist](https://www.a11yproject.com/checklist/) - अॅक्सेसिबिलिटी पडताळणीसाठी चरण-दर-चरण तपासणी
+- [Accessibility Insights](https://accessibilityinsights.io/) - मायक्रोसॉफ्टचे सर्वसमावेशक चाचणी सूट
 - [Color Oracle](https://colororacle.org/) - डिझाइन चाचणीसाठी रंग आंधळेपणा सिम्युलेटर
 
 **🎓 शिक्षण आणि समुदाय:**
-- [WebAIM Screen Reader Survey](https://webaim.org/projects/screenreadersurvey9/) - वास्तविक वापरकर्त्यांच्या प्राधान्ये आणि वर्तन
-- [Inclusive Components](https://inclusive-components.design/) - आधुनिक सुलभ घटक नमुने
-- [A11y Coffee](https://a11y.coffee/) - जलद सुलभता टिप्स आणि अंतर्दृष्टी
-- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) - W3C चे सर्वसमावेशक सुलभता संसाधने
+- [WebAIM Screen Reader Survey](https://webaim.org/projects/screenreadersurvey9/) - खऱ्या वापरकर्त्यांच्या प्राधान्ये आणि वर्तन
+- [Inclusive Components](https://inclusive-components.design/) - आधुनिक अॅक्सेसिबल घटक पॅटर्न
+- [A11y Coffee](https://a11y.coffee/) - जलद अॅक्सेसिबिलिटी टिप्स आणि अंतर्दृष्टी
+- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) - W3C चे सर्वसमावेशक अॅक्सेसिबिलिटी संसाधने
 
-**🎥 प्रत्यक्ष शिक्षण:**
+**🎥 हाताळणी शिकणे:**
 - [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/) - व्यावहारिक अंमलबजावणी मार्गदर्शन
-- [Deque University](https://dequeuniversity.com/) - व्यावसायिक सुलभता प्रशिक्षण अभ्यासक्रम
+- [Deque University](https://dequeuniversity.com/) - व्यावसायिक अॅक्सेसिबिलिटी प्रशिक्षण अभ्यासक्रम
 
 ## GitHub Copilot Agent Challenge 🚀
 
 Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** योग्य फोकस व्यवस्थापन, ARIA गुणधर्म आणि किबोर्ड नेव्हिगेशन नमुने दर्शविणारे सुलभ मोडाल डायलॉग घटक तयार करा.
+**वर्णन:** योग्य फोकस व्यवस्थापन, ARIA गुणधर्म आणि कीबोर्ड नेव्हिगेशन पॅटर्न दर्शविणारा अॅक्सेसिबल मोडाल डायलॉग घटक तयार करा.
 
-**प्रॉम्प्ट:** HTML, CSS, आणि JavaScript सह पूर्ण मोडाल डायलॉग घटक तयार करा ज्यामध्ये: योग्य फोकस ट्रॅपिंग, ESC कीने बंद करणे, बाहेर क्लिक करून बंद करणे, स्क्रीन रीडर्ससाठी ARIA गुणधर्म, आणि दृश्यमान फोकस निर्देशक समाविष्ट आहेत. मोडालमध्ये योग्य लेबल्स आणि त्रुटी हाताळणीसह फॉर्म असावा. घटक WCAG 2.1 AA मानक पूर्ण करतो याची खात्री करा.
+**प्रॉम्प्ट:** HTML, CSS आणि JavaScript सह पूर्ण मोडाल डायलॉग घटक तयार करा ज्यामध्ये: योग्य फोकस ट्रॅपिंग, ESC कीने बंद करणे, बाहेर क्लिक करून बंद करणे, स्क्रीन रीडर्ससाठी ARIA गुणधर्म आणि दृश्यमान फोकस निर्देशक समाविष्ट आहेत. मोडालमध्ये योग्य लेबल्स आणि त्रुटी हाताळ
+- [ ] ५ वेगवेगळ्या जटिल वेबसाइट्सवर कीबोर्ड नेव्हिगेशनचा सराव करा  
+- [ ] योग्य लेबल्स, त्रुटी हाताळणी आणि ARIA सह एक साधा फॉर्म तयार करा  
+- [ ] अॅक्सेसिबिलिटी समुदायामध्ये सामील व्हा (A11y Slack, WebAIM फोरम)  
+- [ ] अपंगत्व असलेल्या वास्तविक वापरकर्त्यांना वेबसाइट्स नेव्हिगेट करताना पाहा (YouTube वर उत्कृष्ट उदाहरणे आहेत)  
 
+### 🌟 **तुमचा महिनाभराचा बदल**
+- [ ] तुमच्या विकास कार्यप्रवाहात अॅक्सेसिबिलिटी चाचणी समाविष्ट करा  
+- [ ] अॅक्सेसिबिलिटी समस्यांचे निराकरण करून ओपन सोर्स प्रकल्पात योगदान द्या  
+- [ ] सहाय्यक तंत्रज्ञान वापरणाऱ्या व्यक्तीसह वापरयोग्यता चाचणी करा  
+- [ ] तुमच्या टीमसाठी अॅक्सेसिबल घटकांची लायब्ररी तयार करा  
+- [ ] तुमच्या कार्यस्थळावर किंवा समुदायात अॅक्सेसिबिलिटीसाठी समर्थन करा  
+- [ ] अॅक्सेसिबिलिटी संकल्पनांमध्ये नवीन असलेल्या व्यक्तीला मार्गदर्शन करा  
 
-## 🚀 आव्हान
+### 🏆 **अंतिम अॅक्सेसिबिलिटी चॅम्पियन चेक-इन**
 
-हा HTML घ्या आणि तुम्ही शिकलेल्या रणनीतींनुसार तो शक्य तितका सुलभ बनवा.
+**तुमच्या अॅक्सेसिबिलिटी प्रवासाचा उत्सव साजरा करा:**  
+- लोक वेब कसे वापरतात याबद्दल तुम्हाला सर्वात आश्चर्यकारक गोष्ट काय वाटली?  
+- कोणता अॅक्सेसिबिलिटी तत्त्व तुमच्या विकास शैलीशी सर्वाधिक जुळतो?  
+- अॅक्सेसिबिलिटीबद्दल शिकल्यामुळे डिझाइनबद्दल तुमची दृष्टीकोन कशी बदलली आहे?  
+- वास्तविक प्रकल्पावर तुम्ही कोणते पहिले अॅक्सेसिबिलिटी सुधारणा करायचे आहे?  
 
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Turtle Ipsum - The World's Premier Turtle Fan Club</title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <header class="site-header">
-      <h1 class="site-title">Turtle Ipsum</h1>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </header>
-    
-    <nav class="main-nav" aria-label="Main navigation">
-      <h2 class="nav-header">Resources</h2>
-      <ul class="nav-list">
-        <li><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles" video</a></li>
-        <li><a href="https://en.wikipedia.org/wiki/Turtle">Basic turtle information</a></li>
-        <li><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate turtles candy</a></li>
-      </ul>
-    </nav>
-    
-    <main class="main-content">
-      <article>
-        <h1>Welcome to Turtle Ipsum</h1>
-        <p class="intro">
-          <a href="/about">Learn more about our turtle community</a> and discover fascinating facts about these amazing creatures.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </article>
-    </main>
-    
-    <footer class="footer">
-      <section class="newsletter-signup">
-        <h2>Stay Updated</h2>
-        <button type="button" onclick="showNewsletterForm()">Sign up for turtle news</button>
-      </section>
-      
-      <nav class="footer-nav" aria-label="Footer navigation">
-        <h2>Site Pages</h2>
-        <ul>
-          <li><a href="../">Home</a></li>
-          <li><a href="../semantic">Semantic HTML example</a></li>
-        </ul>
-      </nav>
-      
-      <p class="footer-copyright">&copy; 2024 Instrument. All rights reserved.</p>
-    </footer>
-  </body>
-</html>
+```mermaid
+journey
+    title Your Accessibility Confidence Evolution
+    section Today
+      Overwhelmed: 3: You
+      Curious: 4: You
+      Motivated: 5: You
+    section This Week
+      Practicing: 4: You
+      Testing: 5: You
+      Understanding: 5: You
+    section Next Month
+      Advocating: 5: You
+      Leading: 5: You
+      Inclusive by Default: 5: You
 ```
-
-**केलेले मुख्य सुधारणा:**
-- योग्य सेमॅंटिक HTML संरचना जोडली
-- हेडिंग श्रेणी सुधारली (एकच h1, तार्किक प्रगती)
-- "click here" ऐवजी अर्थपूर्ण लिंक मजकूर जोडला
-- नेव्हिगेशनसाठी योग्य ARIA लेबल्स समाविष्ट केले
-- lang गुणधर्म आणि योग्य meta टॅग्स जोडले
-- परस्परसंवादी घटकांसाठी button घटक वापरला
-- योग्य लँडमार्कसह फूटर सामग्री संरचित केली
-
-## व्याख्यानानंतरचा क्विझ
-[व्याख्यानानंतरचा क्विझ](https://ff-quizzes.netlify.app/web/en/)
-
-## पुनरावलोकन आणि स्व-अभ्यास
-
-अनेक सरकारांकडे सुलभता आवश्यकता संबंधित कायदे आहेत. तुमच्या देशाच्या सुलभता कायद्यांबद्दल वाचा. काय समाविष्ट आहे आणि काय नाही? उदाहरण म्हणजे [हा सरकारी वेबसाइट](https://accessibility.blog.gov.uk/).
-
-## असाइनमेंट
- 
-[असुलभ वेबसाइटचे विश्लेषण करा](assignment.md)
-
-क्रेडिट्स: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) Instrument द्वारे
+  
+> 🌍 **तुम्ही आता अॅक्सेसिबिलिटी चॅम्पियन आहात!** तुम्हाला समजले आहे की उत्कृष्ट वेब अनुभव प्रत्येकासाठी कार्य करतात, लोक वेब कसेही वापरत असले तरी. तुम्ही तयार केलेली प्रत्येक अॅक्सेसिबल सुविधा इंटरनेटला अधिक समावेशक बनवते. वेबला तुमच्यासारख्या विकसकांची गरज आहे जे अॅक्सेसिबिलिटीला मर्यादा म्हणून पाहत नाहीत, तर सर्व वापरकर्त्यांसाठी चांगले अनुभव तयार करण्याची संधी म्हणून पाहतात. या चळवळीत तुमचे स्वागत आहे! 🎉  
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/10-ai-framework-project/README.md b/translations/mr/10-ai-framework-project/README.md
index 15c76ae487..758d4c703b 100644
--- a/translations/mr/10-ai-framework-project/README.md
+++ b/translations/mr/10-ai-framework-project/README.md
@@ -1,33 +1,71 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e2c4ae5688e34b4b8b09d52aec56c79e",
-  "translation_date": "2025-10-22T16:04:36+00:00",
+  "original_hash": "3925b6a1c31c60755eaae4d578232c25",
+  "translation_date": "2025-11-03T14:30:40+00:00",
   "source_file": "10-ai-framework-project/README.md",
   "language_code": "mr"
 }
 -->
 # एआय फ्रेमवर्क
 
-कधी तुम्हाला शून्यातून एआय अॅप्लिकेशन्स तयार करताना गोंधळ वाटला आहे का? तुम्ही एकटे नाही! एआय फ्रेमवर्क म्हणजे एआय विकासासाठी स्विस आर्मी नाइफसारखे आहेत - हे शक्तिशाली साधने आहेत जी तुम्हाला बुद्धिमान अॅप्लिकेशन्स तयार करताना वेळ आणि त्रास वाचवू शकतात. एआय फ्रेमवर्कला एक व्यवस्थित लायब्ररी म्हणून विचार करा: हे पूर्व-निर्मित घटक, मानक एपीआय आणि स्मार्ट अब्स्ट्रॅक्शन्स प्रदान करते जेणेकरून तुम्ही अंमलबजावणीच्या तपशीलांशी झगडण्याऐवजी समस्यांचे निराकरण करण्यावर लक्ष केंद्रित करू शकता.
+कधी तुम्हाला शून्यातून एआय अ‍ॅप्लिकेशन्स तयार करताना गोंधळ वाटला आहे का? तुम्ही एकटे नाही! एआय फ्रेमवर्क म्हणजे एआय विकासासाठी स्विस आर्मी नाईफसारखे - हे शक्तिशाली साधने आहेत जी बुद्धिमान अ‍ॅप्लिकेशन्स तयार करताना तुमचा वेळ आणि त्रास वाचवू शकतात. एआय फ्रेमवर्कला एक व्यवस्थित लायब्ररी म्हणून विचार करा: हे पूर्व-निर्मित घटक, मानक एपीआय आणि स्मार्ट अब्स्ट्रॅक्शन्स प्रदान करते जेणेकरून तुम्ही अंमलबजावणीच्या तपशीलांशी झगडण्याऐवजी समस्यांचे निराकरण करण्यावर लक्ष केंद्रित करू शकता.
 
-या धड्यात, आपण LangChain सारख्या फ्रेमवर्क्स कसे जटिल एआय इंटिग्रेशन कार्ये स्वच्छ, वाचनीय कोडमध्ये बदलू शकतात हे शोधू. तुम्ही संभाषणांचा मागोवा ठेवणे, टूल कॉलिंग अंमलात आणणे आणि एकसंध इंटरफेसद्वारे विविध एआय मॉडेल्स हाताळणे यासारख्या वास्तविक-जगातील आव्हानांचा सामना कसा करायचा ते शोधाल.
+या धड्यात, आपण LangChain सारख्या फ्रेमवर्क्स कसे जटिल एआय एकत्रीकरण कार्ये स्वच्छ, वाचनीय कोडमध्ये बदलू शकतात हे शोधू. तुम्ही वास्तविक-जगातील आव्हाने कशी हाताळायची ते शोधाल, जसे की संभाषणांचा मागोवा ठेवणे, टूल कॉलिंग अंमलात आणणे आणि एकसंध इंटरफेसद्वारे विविध एआय मॉडेल्स हाताळणे.
 
-जेव्हा आपण पूर्ण करू, तेव्हा तुम्हाला कधी फ्रेमवर्क्सचा वापर करायचा आणि कधी कच्च्या एपीआय कॉल्सचा वापर करायचा हे माहित असेल, त्यांचे अब्स्ट्रॅक्शन्स प्रभावीपणे कसे वापरायचे आणि वास्तविक-जगातील वापरासाठी तयार एआय अॅप्लिकेशन्स कसे तयार करायचे हे समजेल. चला पाहूया की एआय फ्रेमवर्क्स तुमच्या प्रकल्पांसाठी काय करू शकतात.
+जेव्हा आपण समाप्त करू, तेव्हा तुम्हाला फ्रेमवर्क्स कधी वापरायचे ते कळेल, कच्च्या एपीआय कॉल्सऐवजी, त्यांच्या अब्स्ट्रॅक्शन्स प्रभावीपणे कसे वापरायचे आणि वास्तविक-जगातील वापरासाठी तयार एआय अ‍ॅप्लिकेशन्स कसे तयार करायचे. चला पाहूया की एआय फ्रेमवर्क्स तुमच्या प्रकल्पांसाठी काय करू शकतात.
 
-## फ्रेमवर्क का निवडावे?
+## ⚡ पुढील ५ मिनिटांत तुम्ही काय करू शकता
 
-तुम्ही एआय अॅप तयार करण्यासाठी तयार आहात - छान! पण गोष्ट अशी आहे: तुम्ही अनेक वेगवेगळ्या मार्गांनी जाऊ शकता आणि प्रत्येकाचा स्वतःचा फायदा आणि तोटा आहे. हे कुठेतरी जाण्यासाठी चालणे, सायकल चालवणे किंवा गाडी चालवणे निवडण्यासारखे आहे - ते तुम्हाला तिथे पोहोचवतील, परंतु अनुभव (आणि प्रयत्न) पूर्णपणे वेगळे असतील.
+**व्यस्त डेव्हलपर्ससाठी जलद सुरुवात मार्ग**
 
-चला पाहूया की तुम्ही तुमच्या प्रकल्पांमध्ये एआय कसा समाविष्ट करू शकता याचे तीन मुख्य मार्ग:
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Install LangChain]
+    B --> C[Create ChatOpenAI client]
+    C --> D[Send first prompt]
+    D --> E[See framework power]
+```
+
+- **पहिला मिनिट**: LangChain इंस्टॉल करा: `pip install langchain langchain-openai`
+- **दुसरा मिनिट**: तुमचा GitHub टोकन सेट करा आणि ChatOpenAI क्लायंट आयात करा
+- **तिसरा मिनिट**: सिस्टम आणि मानव संदेशांसह एक साधे संभाषण तयार करा
+- **चौथा मिनिट**: एक मूलभूत टूल (जसे की add फंक्शन) जोडा आणि एआय टूल कॉलिंग पहा
+- **पाचवा मिनिट**: कच्च्या एपीआय कॉल्स आणि फ्रेमवर्क अब्स्ट्रॅक्शनमधील फरक अनुभव
+
+**जलद चाचणी कोड**:
+```python
+from langchain_openai import ChatOpenAI
+from langchain_core.messages import SystemMessage, HumanMessage
+
+llm = ChatOpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="openai/gpt-4o-mini"
+)
+
+response = llm.invoke([
+    SystemMessage(content="You are a helpful coding assistant"),
+    HumanMessage(content="Explain Python functions briefly")
+])
+print(response.content)
+```
+
+**महत्त्व का आहे**: ५ मिनिटांत, तुम्ही अनुभवाल की एआय फ्रेमवर्क्स जटिल एआय एकत्रीकरण कसे सोप्या पद्धतींमध्ये बदलतात. हे उत्पादन एआय अ‍ॅप्लिकेशन्सला शक्ती देणारे मूलभूत तत्त्व आहे.
+
+## फ्रेमवर्क का निवडायचे?
+
+तुम्ही एआय अ‍ॅप तयार करण्यासाठी तयार आहात - छान! पण गोष्ट अशी आहे: तुम्ही अनेक वेगवेगळ्या मार्गांनी जाऊ शकता, आणि प्रत्येकाचा स्वतःचा फायदा आणि तोटा आहे. हे चालणे, सायकल चालवणे किंवा गाडी चालवणे यामधील निवडीसारखे आहे - ते तुम्हाला तिथे पोहोचवतील, पण अनुभव (आणि प्रयत्न) पूर्णपणे वेगळे असतील.
+
+चला तुमच्या प्रकल्पांमध्ये एआय एकत्रित करण्याच्या तीन मुख्य मार्गांचे विश्लेषण करूया:
 
 | दृष्टिकोन | फायदे | सर्वोत्तम उपयोग | विचार |
 |----------|------------|----------|--------------|
-| **डायरेक्ट HTTP रिक्वेस्ट्स** | पूर्ण नियंत्रण, कोणतेही डिपेंडन्सी नाही | साधे क्वेरी, मूलभूत गोष्टी शिकणे | अधिक विस्तृत कोड, मॅन्युअल एरर हँडलिंग |
-| **SDK इंटिग्रेशन** | कमी बायलरप्लेट, मॉडेल-विशिष्ट ऑप्टिमायझेशन | सिंगल-मॉडेल अॅप्लिकेशन्स | विशिष्ट प्रदात्यांपुरते मर्यादित |
-| **एआय फ्रेमवर्क्स** | एकसंध एपीआय, अंगभूत अब्स्ट्रॅक्शन्स | मल्टी-मॉडेल अॅप्स, जटिल वर्कफ्लोज | शिकण्याचा वक्र, संभाव्य अति-अब्स्ट्रॅक्शन |
+| **थेट HTTP विनंत्या** | पूर्ण नियंत्रण, कोणतेही अवलंबित्व नाही | साधे क्वेरी, मूलभूत गोष्टी शिकणे | अधिक विस्तृत कोड, मॅन्युअल एरर हँडलिंग |
+| **SDK एकत्रीकरण** | कमी बायलरप्लेट, मॉडेल-विशिष्ट ऑप्टिमायझेशन | सिंगल-मॉडेल अ‍ॅप्लिकेशन्स | विशिष्ट प्रदात्यांपुरते मर्यादित |
+| **एआय फ्रेमवर्क्स** | एकसंध एपीआय, अंगभूत अब्स्ट्रॅक्शन्स | मल्टी-मॉडेल अ‍ॅप्स, जटिल कार्यप्रवाह | शिकण्याचा वक्र, संभाव्य अतिशय अब्स्ट्रॅक्शन |
 
-### फ्रेमवर्क्सचे फायदे प्रत्यक्षात
+### फ्रेमवर्क फायदे प्रत्यक्षात
 
 ```mermaid
 graph TD
@@ -45,31 +83,109 @@ graph TD
 ```
 
 **फ्रेमवर्क्स का महत्त्वाचे आहेत:**
-- **एकत्रित करते** अनेक एआय प्रदात्यांना एकाच इंटरफेसखाली
-- **स्वतःहून** संभाषणाची मेमरी हाताळते
-- **सुलभ करते** सामान्य कार्यांसाठी तयार केलेली साधने जसे की एम्बेडिंग्ज आणि फंक्शन कॉलिंग
-- **व्यवस्थापित करते** एरर हँडलिंग आणि रिट्राय लॉजिक
-- **जटिल वर्कफ्लोज** वाचनीय मेथड कॉल्समध्ये बदलते
+- **एकत्रित करते** अनेक एआय प्रदाते एका इंटरफेसखाली
+- **स्वयंचलितपणे हाताळते** संभाषण मेमरी
+- **सामान्य कार्यांसाठी तयार केलेली साधने प्रदान करते** जसे की एम्बेडिंग्स आणि फंक्शन कॉलिंग
+- **एरर हँडलिंग आणि रीट्राय लॉजिक व्यवस्थापित करते**
+- **जटिल कार्यप्रवाह वाचनीय पद्धतींमध्ये बदलते**
 
-> 💡 **प्रो टिप**: फ्रेमवर्क्सचा वापर वेगवेगळ्या एआय मॉडेल्समध्ये स्विच करताना किंवा एजंट्स, मेमरी, किंवा टूल कॉलिंगसारख्या जटिल वैशिष्ट्ये तयार करताना करा. मूलभूत गोष्टी शिकताना किंवा साधे, लक्ष केंद्रित अॅप्लिकेशन्स तयार करताना डायरेक्ट एपीआय वापरा.
+> 💡 **प्रो टिप**: वेगवेगळ्या एआय मॉडेल्समध्ये स्विच करताना किंवा एजंट्स, मेमरी, किंवा टूल कॉलिंगसारख्या जटिल वैशिष्ट्ये तयार करताना फ्रेमवर्क्स वापरा. मूलभूत गोष्टी शिकताना किंवा साधे, लक्ष केंद्रित अ‍ॅप्लिकेशन्स तयार करताना थेट एपीआय वापरा.
 
-**तळटीप**: एखाद्या कुशल कारागीराच्या विशेष साधनांमध्ये आणि संपूर्ण कार्यशाळेत निवड करण्यासारखे, हे कार्याशी साधन जुळवण्याबद्दल आहे. फ्रेमवर्क्स जटिल, वैशिष्ट्य-समृद्ध अॅप्लिकेशन्ससाठी उत्कृष्ट आहेत, तर डायरेक्ट एपीआय सोप्या उपयोग प्रकरणांसाठी चांगले काम करतात.
+**तळटीप**: एखाद्या कारागीराच्या विशेष साधनांमध्ये आणि संपूर्ण कार्यशाळेत निवड करण्यासारखे, हे कार्याशी साधन जुळवण्याबद्दल आहे. जटिल, वैशिष्ट्य-समृद्ध अ‍ॅप्लिकेशन्ससाठी फ्रेमवर्क्स उत्कृष्ट आहेत, तर थेट एपीआय साध्या उपयोग प्रकरणांसाठी चांगले कार्य करतात.
+
+## 🗺️ एआय फ्रेमवर्क मास्टरीद्वारे तुमचा शिकण्याचा प्रवास
+
+```mermaid
+journey
+    title From Raw APIs to Production AI Applications
+    section Framework Foundations
+      Understand abstraction benefits: 4: You
+      Master LangChain basics: 6: You
+      Compare approaches: 7: You
+    section Conversation Systems
+      Build chat interfaces: 5: You
+      Implement memory patterns: 7: You
+      Handle streaming responses: 8: You
+    section Advanced Features
+      Create custom tools: 6: You
+      Master structured output: 8: You
+      Build document systems: 8: You
+    section Production Applications
+      Combine all features: 7: You
+      Handle error scenarios: 8: You
+      Deploy complete systems: 9: You
+```
+
+**तुमचा प्रवास गंतव्य**: या धड्याच्या शेवटी, तुम्ही एआय फ्रेमवर्क विकासात पारंगत व्हाल आणि व्यावसायिक एआय सहाय्यकांशी स्पर्धा करणारी प्रगत, उत्पादन-तयार एआय अ‍ॅप्लिकेशन्स तयार करू शकाल.
 
 ## परिचय
 
 या धड्यात, आपण शिकू:
 
-- सामान्य एआय फ्रेमवर्कचा वापर कसा करायचा.
-- चॅट संभाषणे, टूल वापर, मेमरी आणि संदर्भ यासारख्या सामान्य समस्यांचे निराकरण कसे करायचे.
-- एआय अॅप्स तयार करण्यासाठी याचा उपयोग कसा करायचा.
+- एक सामान्य एआय फ्रेमवर्क वापरणे.
+- चॅट संभाषणे, टूल वापर, मेमरी आणि संदर्भ यासारख्या सामान्य समस्यांचे निराकरण करणे.
+- एआय अ‍ॅप्स तयार करण्यासाठी याचा उपयोग करणे.
+
+## 🧠 एआय फ्रेमवर्क विकास इकोसिस्टम
+
+```mermaid
+mindmap
+  root((AI Frameworks))
+    Abstraction Benefits
+      Code Simplification
+        Unified APIs
+        Built-in Error Handling
+        Consistent Patterns
+        Reduced Boilerplate
+      Multi-Model Support
+        Provider Agnostic
+        Easy Switching
+        Fallback Options
+        Cost Optimization
+    Core Components
+      Conversation Management
+        Message Types
+        Memory Systems
+        Context Tracking
+        History Persistence
+      Tool Integration
+        Function Calling
+        API Connections
+        Custom Tools
+        Workflow Automation
+    Advanced Features
+      Structured Output
+        Pydantic Models
+        JSON Schemas
+        Type Safety
+        Validation Rules
+      Document Processing
+        Embeddings
+        Vector Stores
+        Similarity Search
+        RAG Systems
+    Production Patterns
+      Application Architecture
+        Modular Design
+        Error Boundaries
+        Async Operations
+        State Management
+      Deployment Strategies
+        Scalability
+        Monitoring
+        Performance
+        Security
+```
+
+**मूलभूत तत्त्व**: एआय फ्रेमवर्क्स जटिलतेचे अब्स्ट्रॅक्शन करतात आणि संभाषण व्यवस्थापन, टूल एकत्रीकरण, आणि दस्तऐवज प्रक्रिया यासाठी शक्तिशाली अब्स्ट्रॅक्शन्स प्रदान करतात, ज्यामुळे डेव्हलपर्स स्वच्छ, देखभाल करण्यायोग्य कोडसह प्रगत एआय अ‍ॅप्लिकेशन्स तयार करू शकतात.
 
 ## तुमचा पहिला एआय प्रॉम्प्ट
 
-चला मूलभूत गोष्टींनी सुरुवात करूया, एक प्रश्न पाठवून उत्तर मिळवणारा तुमचा पहिला एआय अॅप्लिकेशन तयार करून. आर्किमिडीजने आपल्या बाथमध्ये विस्थापनाचा तत्त्व शोधल्याप्रमाणे, कधी कधी सर्वात सोप्या निरीक्षणांमधून सर्वात शक्तिशाली अंतर्दृष्टी मिळते - आणि फ्रेमवर्क्स या अंतर्दृष्टी सुलभ करतात.
+चला मूलभूत गोष्टींनी सुरुवात करूया आणि तुमचा पहिला एआय अ‍ॅप्लिकेशन तयार करूया जो एक प्रश्न पाठवतो आणि उत्तर मिळवतो. जसे आर्किमिडीजने आपल्या स्नानात विस्थापनाचा तत्त्व शोधला, कधीकधी सर्वात सोप्या निरीक्षणांमधून सर्वात शक्तिशाली अंतर्दृष्टी मिळते - आणि फ्रेमवर्क्स ही अंतर्दृष्टी सुलभ करतात.
 
 ### GitHub मॉडेल्ससह LangChain सेट करणे
 
-आम्ही GitHub मॉडेल्सशी कनेक्ट करण्यासाठी LangChain वापरणार आहोत, जे खूप छान आहे कारण ते तुम्हाला विविध एआय मॉडेल्ससाठी विनामूल्य प्रवेश देते. सर्वात चांगली गोष्ट? सुरुवात करण्यासाठी तुम्हाला फक्त काही सोप्या कॉन्फिगरेशन पॅरामीटर्सची आवश्यकता आहे:
+आम्ही GitHub मॉडेल्सशी कनेक्ट होण्यासाठी LangChain वापरणार आहोत, जे खूप छान आहे कारण ते तुम्हाला विविध एआय मॉडेल्ससाठी विनामूल्य प्रवेश देते. सर्वात चांगली गोष्ट म्हणजे? सुरुवात करण्यासाठी तुम्हाला फक्त काही सोप्या कॉन्फिगरेशन पॅरामीटर्सची आवश्यकता आहे:
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -86,16 +202,16 @@ response = llm.invoke("What's the capital of France?")
 print(response.content)
 ```
 
-**इथे काय घडत आहे याचे विश्लेषण करूया:**
-- **LangChain क्लायंट तयार करते** `ChatOpenAI` क्लास वापरून - हे तुमचे एआयसाठी गेटवे आहे!
+**चला पाहूया येथे काय घडत आहे:**
+- **LangChain क्लायंट तयार करते** `ChatOpenAI` वर्ग वापरून - हे तुमचे एआयसाठी प्रवेशद्वार आहे!
 - **GitHub मॉडेल्सशी कनेक्शन कॉन्फिगर करते** तुमच्या ऑथेंटिकेशन टोकनसह
-- **कुठला एआय मॉडेल वापरायचा ते निर्दिष्ट करते** (`gpt-4o-mini`) - याला तुमचा एआय सहाय्यक निवडणे समजा
-- **तुमचा प्रश्न पाठवते** `invoke()` मेथड वापरून - इथेच जादू घडते
-- **उत्तर काढते आणि प्रदर्शित करते** - आणि voilà, तुम्ही एआयशी गप्पा मारत आहात!
+- **कोणता एआय मॉडेल वापरायचा ते निर्दिष्ट करते** (`gpt-4o-mini`) - याला तुमचा एआय सहाय्यक निवडणे समजा
+- **तुमचा प्रश्न पाठवते** `invoke()` पद्धती वापरून - येथेच जादू घडते
+- **उत्तर काढते आणि प्रदर्शित करते** - आणि voilà, तुम्ही एआयशी संभाषण करत आहात!
 
 > 🔧 **सेटअप नोट**: जर तुम्ही GitHub Codespaces वापरत असाल, तर तुम्ही भाग्यवान आहात - `GITHUB_TOKEN` आधीच सेट केले आहे! स्थानिकपणे काम करत आहात? काळजी करू नका, तुम्हाला योग्य परवानग्यांसह वैयक्तिक प्रवेश टोकन तयार करावे लागेल.
 
-**अपेक्षित आउटपुट:**
+**अपेक्षित आउटपुट**:
 ```text
 The capital of France is Paris.
 ```
@@ -117,23 +233,23 @@ sequenceDiagram
 
 ## संभाषणात्मक एआय तयार करणे
 
-पहिले उदाहरण मूलभूत गोष्टी दाखवते, पण ते फक्त एकच विनिमय आहे - तुम्ही प्रश्न विचारता, उत्तर मिळवता, आणि ते संपते. वास्तविक अॅप्लिकेशन्समध्ये, तुम्हाला तुमच्या एआयने तुम्ही काय चर्चा करत आहात ते लक्षात ठेवायचे आहे, जसे वॉटसन आणि होम्स यांनी त्यांच्या तपासात्मक संभाषणांची रचना केली.
+पहिले उदाहरण मूलभूत गोष्टी दाखवते, पण ते फक्त एकच विनिमय आहे - तुम्ही एक प्रश्न विचारता, उत्तर मिळवता, आणि तेच. वास्तविक अ‍ॅप्लिकेशन्समध्ये, तुम्हाला तुमच्या एआयने तुम्ही काय चर्चा करत आहात ते लक्षात ठेवायचे आहे, जसे वॉटसन आणि होम्सने त्यांच्या तपासात्मक संभाषणांची रचना केली.
 
-इथेच LangChain विशेषतः उपयुक्त ठरते. हे वेगवेगळ्या संदेश प्रकार प्रदान करते जे संभाषणांची रचना करण्यात मदत करतात आणि तुम्हाला तुमच्या एआयला व्यक्तिमत्त्व देण्याची परवानगी देतात. तुम्ही संदर्भ आणि पात्रता राखणारे चॅट अनुभव तयार कराल.
+LangChain येथे विशेषतः उपयुक्त ठरते. हे वेगवेगळ्या संदेश प्रकार प्रदान करते जे संभाषणांची रचना करण्यात मदत करतात आणि तुम्हाला तुमच्या एआयला व्यक्तिमत्त्व देण्याची परवानगी देतात. तुम्ही संदर्भ आणि पात्रता राखणारे चॅट अनुभव तयार कराल.
 
 ### संदेश प्रकार समजून घेणे
 
-या संदेश प्रकारांना संभाषणात सहभागी होणाऱ्या व्यक्तींच्या वेगवेगळ्या "टोपी" म्हणून विचार करा. LangChain वेगवेगळ्या संदेश वर्गांचा वापर करते जे कोण काय म्हणत आहे याचा मागोवा ठेवतात:
+या संदेश प्रकारांना संभाषणात सहभागी असलेल्या वेगवेगळ्या "टोपी" म्हणून विचार करा. LangChain वेगवेगळ्या संदेश वर्गांचा वापर करते जे कोण काय बोलत आहे याचा मागोवा ठेवतात:
 
 | संदेश प्रकार | उद्देश | उदाहरण उपयोग प्रकरण |
 |--------------|---------|------------------|
-| `SystemMessage` | एआयचे व्यक्तिमत्त्व आणि वर्तन परिभाषित करते | "तुम्ही एक उपयुक्त कोडिंग सहाय्यक आहात" |
-| `HumanMessage` | वापरकर्त्याचा इनपुट दर्शवते | "फंक्शन्स कसे कार्य करतात ते समजावून सांगा" |
+| `SystemMessage` | एआय व्यक्तिमत्त्व आणि वर्तन परिभाषित करते | "तुम्ही एक उपयुक्त कोडिंग सहाय्यक आहात" |
+| `HumanMessage` | वापरकर्ता इनपुट दर्शवते | "फंक्शन्स कसे कार्य करतात ते स्पष्ट करा" |
 | `AIMessage` | एआय प्रतिसाद साठवते | संभाषणातील मागील एआय प्रतिसाद |
 
 ### तुमचे पहिले संभाषण तयार करणे
 
-चला एक संभाषण तयार करूया जिथे आमचा एआय विशिष्ट भूमिका घेतो. आम्ही त्याला कॅप्टन पिकार्डचे रूप धारण करू देऊ - एक पात्र जे त्याच्या राजनैतिक शहाणपण आणि नेतृत्वासाठी ओळखले जाते:
+चला एक संभाषण तयार करूया जिथे आमचा एआय विशिष्ट भूमिका घेतो. आम्ही त्याला कॅप्टन पिकार्डचे रूप देऊ - एक पात्र जो त्याच्या राजनैतिक शहाणपण आणि नेतृत्वासाठी ओळखला जातो:
 
 ```python
 messages = [
@@ -142,12 +258,12 @@ messages = [
 ]
 ```
 
-**या संभाषण सेटअपचे विश्लेषण:**
-- **एआयची भूमिका आणि व्यक्तिमत्त्व स्थापन करते** `SystemMessage` द्वारे
+**या संभाषण सेटअपचे विश्लेषण करणे:**
+- **एआयची भूमिका आणि व्यक्तिमत्त्व स्थापित करते** `SystemMessage` द्वारे
 - **प्रारंभिक वापरकर्ता क्वेरी प्रदान करते** `HumanMessage` द्वारे
 - **मल्टी-टर्न संभाषणासाठी पाया तयार करते**
 
-या उदाहरणाचा संपूर्ण कोड असा दिसतो:
+या उदाहरणासाठी संपूर्ण कोड असे दिसते:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -171,7 +287,7 @@ response  = llm.invoke(messages)
 print(response.content)
 ```
 
-तुम्हाला असे काहीतरी आउटपुट दिसेल:
+तुम्हाला असे काहीतरी परिणाम दिसेल:
 
 ```text
 I am Captain Jean-Luc Picard, the commanding officer of the USS Enterprise (NCC-1701-D), a starship in the United Federation of Planets. My primary mission is to explore new worlds, seek out new life and new civilizations, and boldly go where no one has gone before. 
@@ -181,7 +297,7 @@ I believe in the importance of diplomacy, reason, and the pursuit of knowledge.
 I hold the ideals of the Federation close to my heart, believing in the importance of cooperation, understanding, and respect for all sentient beings. My experiences have shaped my leadership style, and I strive to be a thoughtful and just captain. How may I assist you further?
 ```
 
-संभाषणाची सातत्यता राखण्यासाठी (प्रत्येक वेळी संदर्भ रीसेट करण्याऐवजी), तुम्हाला तुमच्या संदेश यादीत प्रतिसाद जोडत राहावे लागेल. जसे मौखिक परंपरा कथा पिढ्यानपिढ्या जतन करत होत्या, तसेच हा दृष्टिकोन टिकाऊ मेमरी तयार करतो:
+संभाषण सातत्य राखण्यासाठी (प्रत्येक वेळी संदर्भ रीसेट करण्याऐवजी), तुम्हाला तुमच्या संदेश यादीत प्रतिसाद जोडत राहावे लागेल. जसे मौखिक परंपरा ज्यांनी पिढ्यानपिढ्या कथा जतन केल्या, ही पद्धत टिकाऊ मेमरी तयार करते:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -216,9 +332,9 @@ print(response.content)
 
 ```
 
-खूप छान, बरोबर? इथे काय घडत आहे ते म्हणजे आम्ही LLM दोनदा कॉल करत आहोत - प्रथम फक्त आमच्या प्रारंभिक दोन संदेशांसह, पण नंतर पुन्हा संपूर्ण संभाषण इतिहासासह. असे वाटते की एआय खरोखरच आमच्या चॅटचा मागोवा घेत आहे!
+खूप छान, बरोबर? येथे काय घडत आहे ते म्हणजे आम्ही LLM दोनदा कॉल करत आहोत - प्रथम फक्त आमच्या प्रारंभिक दोन संदेशांसह, पण नंतर पुन्हा संपूर्ण संभाषण इतिहासासह. असे वाटते की एआय प्रत्यक्षात आमच्या चॅटचे अनुसरण करत आहे!
 
-जेव्हा तुम्ही हा कोड चालवता, तेव्हा तुम्हाला दुसरा प्रतिसाद मिळेल जो काहीसा असा वाटेल:
+जेव्हा तुम्ही हा कोड चालवता, तेव्हा तुम्हाला दुसरे उत्तर मिळेल जे असे काहीतरी वाटते:
 
 ```text
 Welcome aboard, Chris! It's always a pleasure to meet those who share a passion for exploration and discovery. While I cannot formally offer you a position on the Enterprise right now, I encourage you to pursue your aspirations. We are always in need of talented individuals with diverse skills and backgrounds. 
@@ -226,11 +342,35 @@ Welcome aboard, Chris! It's always a pleasure to meet those who share a passion
 If you are interested in space exploration, consider education and training in the sciences, engineering, or diplomacy. The values of curiosity, resilience, and teamwork are crucial in Starfleet. Should you ever find yourself on a starship, remember to uphold the principles of the Federation: peace, understanding, and respect for all beings. Your journey can lead you to remarkable adventures, whether in the stars or on the ground. Engage!
 ```
 
+```mermaid
+sequenceDiagram
+    participant User
+    participant App
+    participant LangChain
+    participant AI
+    
+    User->>App: "Tell me about you"
+    App->>LangChain: [SystemMessage, HumanMessage]
+    LangChain->>AI: Formatted conversation
+    AI->>LangChain: Captain Picard response
+    LangChain->>App: AIMessage object
+    App->>User: Display response
+    
+    Note over App: Add AIMessage to conversation
+    
+    User->>App: "Can I join your crew?"
+    App->>LangChain: [SystemMessage, HumanMessage, AIMessage, HumanMessage]
+    LangChain->>AI: Full conversation context
+    AI->>LangChain: Contextual response
+    LangChain->>App: New AIMessage
+    App->>User: Display contextual response
+```
+
 मी याला "कदाचित" म्हणून घेईन ;)
 
 ## स्ट्रीमिंग प्रतिसाद
 
-कधी लक्षात आले की ChatGPT त्याचे प्रतिसाद रिअल-टाइममध्ये "टाइप" करत आहे? ते स्ट्रीमिंग आहे. जसे एखाद्या कुशल कॅलिग्राफरला काम करताना पाहणे - अक्षरे स्ट्रोक बाय स्ट्रोक दिसतात, एकदम नाही - स्ट्रीमिंग संवाद अधिक नैसर्गिक वाटतो आणि त्वरित फीडबॅक प्रदान करतो.
+कधी लक्षात आले की ChatGPT त्याचे प्रतिसाद रिअल-टाइममध्ये "टाइप" करत आहे? ते स्ट्रीमिंग आहे. जसे एखाद्या कुशल कॅलिग्राफरला काम करताना पाहणे - अक्षरे स्ट्रोक बाय स्ट्रोक दिसतात, एकदम प्रकट होण्याऐवजी - स्ट्रीमिंग संवाद अधिक नैसर्गिक वाटतो आणि त्वरित अभिप्राय प्रदान करतो.
 
 ### LangChain सह स्ट्रीमिंग अंमलात आणणे
 
@@ -251,18 +391,31 @@ for chunk in llm.stream("Write a short story about a robot learning to code"):
 ```
 
 **स्ट्रीमिंग का छान आहे:**
-- **सामग्री दाखवते** ती तयार होत असताना - आता अधिक वेळ थांबणे नाही!
-- **वापरकर्त्यांना वाटते** की काहीतरी खरोखरच घडत आहे
+- **सामग्री दाखवते** ती तयार होत असताना - आता अधिक विचित्र प्रतीक्षा नाही!
+- **वापरकर्त्यांना वाटते** की काहीतरी प्रत्यक्षात घडत आहे
 - **जलद वाटते**, जरी तांत्रिकदृष्ट्या तसे नसले तरी
 - **वापरकर्त्यांना वाचायला सुरुवात करू देते** एआय अजूनही "विचार करत असताना"
 
-> 💡 **वापरकर्ता अनुभव टिप**: स्ट्रीमिंग खूप चांगले काम करते जेव्हा तुम्ही कोड स्पष्टीकरण, सर्जनशील लेखन, किंवा तपशीलवार ट्यूटोरियल्ससारख्या लांब प्रतिसादांशी व्यवहार करत असता. तुमचे वापरकर्ते रिकाम्या स्क्रीनकडे पाहण्याऐवजी प्रगती पाहून आनंदित होतील!
+> 💡 **वापरकर्ता अनुभव टिप**: स्ट्रीमिंग खरोखर चमकते जेव्हा तुम्ही कोड स्पष्टीकरण, सर्जनशील लेखन, किंवा तपशीलवार ट्यूटोरियल्ससारख्या लांब प्रतिसादांशी व्यवहार करत असता. तुमचे वापरकर्ते रिकाम्या स्क्रीनकडे पाहण्याऐवजी प्रगती पाहून आनंदित होतील!
+
+### 🎯 शैक्षणिक तपासणी: फ्रेमवर्क अब्स्ट्रॅक्शन फायदे
+
+**थांबा आणि विचार करा**: तुम्ही नुकतेच एआय फ्रेमवर्क अब्स्ट्रॅक्शन्सची ताकद अनुभवली आहे. मागील धड्यांमधील कच्च्या एपीआय कॉल्सशी तुम्ही काय शिकलात याची तुलना करा.
+
+**जलद स्व-मूल्यमापन**:
+- तुम्ही स्पष्ट करू शकता की LangChain संभाषण व्यवस्थापन कसे सोपे करते तुलनेत मॅन्युअल संदेश ट्रॅकिंग?
+- `invoke()` आणि `stream()` पद्धतींमधील फरक काय आहे, आणि तुम्ही प्रत्येकाचा वापर कधी कराल?
+- फ्रेमवर्कचा संदेश प्रकार प्रणाली कोड संघटन कसे सुधारते?
+
+**वास्तविक-जगाशी कनेक्शन**: तुम्ही शिकलेले अब्स्ट्रॅक्शन पॅटर्न (मेसेज प्रकार, स्ट्रीमिंग इंटरफेस, संभाषण मेमरी) प्रत्येक प्रमुख एआय अ‍ॅप्लिकेशनमध्ये वापरले जातात - ChatGPT च्या इंटरफेसपासून GitHub Copilot च्या कोड सहाय्यापर्यंत. तुम्ही व्यावसायिक एआय विकास संघांनी वापरलेले समान आर्किटेक्चरल पॅटर्न्स मास्टर करत आहात.
+
+**चॅलेंज प्रश्न**: वेगवेगळ्या एआय मॉडेल प्रदात्यांसाठी (OpenAI, Anthropic, Google) एकसंध इंटरफेस हाताळण्यासाठी फ्रेमवर्क अब्स्ट्रॅक्शन कसे डिझाइन कराल? फायदे आणि तोटे विचार करा.
 
 ## प्रॉम्प्ट टेम्पलेट्स
 
-प्रॉम्प्ट टेम्पलेट्स क्लासिकल वक्तृत्वात वापरल्या जाणाऱ्या भाषण संरचनांसारखे काम करतात - जसे सिसेरो वेगवेगळ्या प्रेक्षकांसाठी त्याच्या भाषणाच्या पद्धतींमध्ये बदल करत असे, तरीही त्याच प्रभावी फ्रेमवर्कला टिकवून ठेवत असे. ते तुम्हाला पुनर्वापर करण्यायोग्य प्रॉम्प्ट तयार करू देतात जिथे तुम्ही वेगवेगळ्या माहितीचे तुकडे पुन्हा लिहिल्याशिवाय बदलू शकता. एकदा टेम्पलेट सेट केल्यावर, तुम्ही फक्त व्हेरिएबल्समध्ये आवश्यक मूल्ये भरता.
+प्रॉम्प्ट टेम्पलेट्स क्लासिकल वक्तृत्वात वापरल्या जाणाऱ्या भाषण संरचनांसारखे कार्य करतात - जसे सिसेरो वेगवेगळ्या प्रेक्षकांसाठी त्याचे भाषण नमुने कसे अनुकूल करेल तरीही समान प्रभावी फ्रेमवर्क राखेल. ते तुम्हाला पुनर्वापरयोग्य प्रॉम्प्ट तयार करू देतात जिथे तुम्ही सर्वकाही पुन्हा लिहिल्याशिवाय वेगवेगळ्या माहितीचे तुकडे बदलू शकता. एकदा तुम्ही टेम्पलेट सेट केल्यावर, तुम्ही फक्त आवश्यक मूल्यांसह व्हेरिएबल्स भरता.
 
-### पुनर्वापर करण्यायोग्य प्रॉम्प्ट तयार करणे
+### पुनर्वापरयोग्य प्रॉम्प्ट तयार करणे
 
 ```python
 from langchain_core.prompts import ChatPromptTemplate
@@ -286,71 +439,80 @@ for question in questions:
     print(f"Topic: {question['concept']}\n{response.content}\n---\n")
 ```
 
-**टेम्पलेट्स वापरणे का आवडेल:**
-- **तुमचे प्रॉम्प्ट** तुमच्या संपूर्ण अॅपमध्ये सुसंगत ठेवते
-- **गोंधळलेली स्ट्रिंग कन्सॅटनेशन नाही** - फक्त स्वच्छ, सोपे व्हेरिएबल्स
-- **तुमचा एआय** अंदाजे वागतो कारण संरचना समान राहते
-- **अपडेट्स** सोपे आहेत - एकदा टेम्पलेट बदला, आणि ते सर्वत्र निश्चित आहे
+**तुम्हाला टेम्पलेट्स वापरणे का आवडेल:**
+- **तुमचे प्रॉम्प्ट तुमच्या संपूर्ण अ‍ॅपमध्ये सुसंगत ठेवते**
+- **आता गोंधळलेली स्ट्रिंग कन्सॅटनेशन नाही** - फक्त स्वच्छ, सोपे व्हेरिएबल्स
+- **तुमचा एआय** अंदाजे वागतो कारण रचना समान राहते
+- **अपडेट्स सोपे आहेत** - एकदा टेम्पलेट बदला, आणि ते सर्वत्र निश्चित आहे
 
 ## संरचित आउटपुट
 
-कधी एआय प्रतिसाद परत येणाऱ्या असंरचित मजकुराचा अर्थ लावण्याचा प्रयत्न करताना निराशा वाटली आहे का? संरचित आउटपुट म्हणजे तुमच्या एआयला जैविक वर्गीकरणासाठी लिनिअसने वापरलेल्या प्रणालीबद्ध दृष्टिकोनाचे अनुसरण करण्यास शिकवणे - व्यवस्थित, अंदाजे, आणि काम करण्यास सोपे. तुम्ही JSON, विशिष्ट डेटा संरचना, किंवा तुम्हाला आवश्यक असलेला कोणताही फॉर्मॅट विनंती करू शकता.
-
-### आउटपुट स्कीम्स परिभाषित करणे
+कधी एआय प्रतिसाद परत येणाऱ्या असंरचित मजकुराचा अर्थ लावण्याचा प्रयत्न करताना निराश झाला आहे का? संरचित आउटपुट म्हणजे तुमच्या एआयला लिनिअसने जैविक वर्गीकरणासाठी वापरलेल्या प्रणालीबद्ध दृष्टिकोनाचे अनुसरण करण्यास शिकवणे - व्यवस्थित, अंदाजे, आणि काम करण्यास सोपे. तुम्ही JSON, विश
+संख्या जोडणे ही संकल्पना स्पष्ट करते, परंतु वास्तविक साधने सामान्यतः अधिक जटिल कार्ये करतात, जसे की वेब API कॉल करणे. चला आपले उदाहरण विस्तृत करूया आणि AI इंटरनेटवरून सामग्री आणेल - जसे की टेलिग्राफ ऑपरेटर एकेकाळी दूरस्थ ठिकाणे जोडत असत:
 
 ```python
-from langchain_core.prompts import ChatPromptTemplate
-from langchain_core.output_parsers import JsonOutputParser
-from pydantic import BaseModel, Field
-
-class CodeReview(BaseModel):
-    score: int = Field(description="Code quality score from 1-10")
-    strengths: list[str] = Field(description="List of code strengths")
-    improvements: list[str] = Field(description="List of suggested improvements")
-    overall_feedback: str = Field(description="Summary feedback")
-
-# Set up the parser
-parser = JsonOutputParser(pydantic_object=CodeReview)
-
-# Create prompt with format instructions
-prompt = ChatPromptTemplate.from_messages([
-    ("system", "You are a code reviewer. {format_instructions}"),
-    ("human", "Review this code: {code}")
-])
+class joke(TypedDict):
+    """Tell a joke."""
 
-# Format the prompt with instructions
-chain = prompt | llm | parser
+    # Annotations must have the type and can optionally include a default value and description (in that order).
+    category: Annotated[str, ..., "The joke category"]
 
-# Get structured response
-code_sample = """
-def calculate_average(numbers):
-    return sum(numbers) / len(numbers)
-"""
+def get_joke(category: str) -> str:
+    response = requests.get(f"https://api.chucknorris.io/jokes/random?category={category}", headers={"Accept": "application/json"})
+    if response.status_code == 200:
+        return response.json().get("value", f"Here's a {category} joke!")
+    return f"Here's a {category} joke!"
 
-result = chain.invoke({
-    "code": code_sample,
-    "format_instructions": parser.get_format_instructions()
-})
+functions = {
+    "add": lambda a, b: a + b,
+    "joke": lambda category: get_joke(category)
+}
 
-print(f"Score: {result['score']}")
-print(f"Strengths: {', '.join(result['strengths'])}")
-```
+query = "Tell me a joke about animals"
 
-**संरचित आउटपुट का गेम-चेंजर आहे:**
-- **अंदाज लावणे नाही** तुम्हाला परत कोणता फॉर्मॅट मिळेल - ते प्रत्येक वेळी सुसंगत आहे
-- **तुमच्या डेटाबेस आणि एपीआयमध्ये थेट प्लग करते** अतिरिक्त कामाशिवाय
-- **विचित्र एआय प्रतिसाद पकडते** तुमचे अॅप खराब होण्यापूर्वी
-- **तुमचा कोड स्वच्छ बनवते** कारण तुम्हाला नेमके काय काम करायचे आहे ते माहित आहे
+# the rest of the code is the same
+```
 
-## टूल कॉलिंग
+आता जर तुम्ही हा कोड चालवला तर तुम्हाला काहीतरी असे उत्तर मिळेल:
 
-आता आपण सर्वात शक्तिशाली वैशिष्ट्यांपैकी एकावर पोहोचतो: टूल्स. हे असे आहे की तुम्ही तुमच्या एआयला संभाषणाच्या पलीकडे व्यावहारिक क्षमता देता. जसे मध्ययुगीन गिल्ड्स विशिष्ट हस्तकलेसाठी विशेष साधने विकसित करत होते, तसे तुम्ही तुमच्या एआयला केंद्रित साधनांनी सुसज्ज करू शकता. तुम्ही कोणती साधने उपलब्ध आहेत ते वर्णन करता, आणि जेव्हा कोणी काहीतरी विनंती करते जे जुळते, तुमचा एआय कृती करू शकतो.
+```text
+TOOL CALL:  Chuck Norris once rode a nine foot grizzly bear through an automatic car wash, instead of taking a shower.
+CONTENT:  
+```
 
-### Python वापरणे
+```mermaid
+flowchart TD
+    A[User Query: "Tell me a joke about animals"] --> B[LangChain Analysis]
+    B --> C{Tool Available?}
+    C -->|Yes| D[Select joke tool]
+    C -->|No| E[Generate direct response]
+    
+    D --> F[Extract Parameters]
+    F --> G[Call joke(category="animals")]
+    G --> H[API Request to chucknorris.io]
+    H --> I[Return joke content]
+    I --> J[Display to user]
+    
+    E --> K[AI-generated response]
+    K --> J
+    
+    subgraph "Tool Definition Layer"
+        L[TypedDict Schema]
+        M[Function Implementation]
+        N[Parameter Validation]
+    end
+    
+    D --> L
+    F --> N
+    G --> M
+```
 
-चला काही साधने जोडूया:
+संपूर्ण कोड येथे आहे:
 
 ```python
+from langchain_openai import ChatOpenAI
+import requests
+import os
 from typing_extensions import Annotated, TypedDict
 
 class add(TypedDict):
@@ -360,18 +522,25 @@ class add(TypedDict):
     a: Annotated[int, ..., "First integer"]
     b: Annotated[int, ..., "Second integer"]
 
-tools = [add]
+class joke(TypedDict):
+    """Tell a joke."""
 
-functions = {
-    "add": lambda a, b: a + b
-}
-```
+    # Annotations must have the type and can optionally include a default value and description (in that order).
+    category: Annotated[str, ..., "The joke category"]
 
-तर इथे काय घडत आहे? आम्ही `add` नावाच्या टूलसाठी ब्लूप्रिंट तयार करत आहोत. `TypedDict` पासून वारसा घेऊन आणि `Annotated` प्रकारांसारख्या फॅन्सी प्रकारांचा `a` आणि `b` साठी वापर करून, आम्ही LLM ला या टूलचे कार्य आणि त्याला काय आवश्यक आहे याची स्पष्ट कल्पना देत आहोत. `functions` डिक्शनरी म्हणजे आमचे टूलबॉक्स - ते आमच्या कोडला सांगते की एआयने विशिष्ट टूल वापरण्याचा निर्णय घेतल्यावर काय करायचे.
+tools = [add, joke]
 
-चला पुढे पाहूया की आम्ही LLM कसे कॉल करतो:
+def get_joke(category: str) -> str:
+    response = requests.get(f"https://api.chucknorris.io/jokes/random?category={category}", headers={"Accept": "application/json"})
+    if response.status_code == 200:
+        return response.json().get("value", f"Here's a {category} joke!")
+    return f"Here's a {category} joke!"
+
+functions = {
+    "add": lambda a, b: a + b,
+    "joke": lambda category: get_joke(category)
+}
 
-```python
 llm = ChatOpenAI(
     api_key=os.environ["GITHUB_TOKEN"],
     base_url="https://models.github.ai/inference",
@@ -379,103 +548,283 @@ llm = ChatOpenAI(
 )
 
 llm_with_tools = llm.bind_tools(tools)
-```
 
-इथे आम्ही `bind_tools` आमच्या `tools` अ‍ॅरेसह कॉल करतो आणि त्यामुळे LLM `llm_with_tools` आता या टूलचे ज्ञान आहे.
-
-हे नवीन LLM वापरण्यासाठी, आम्ही खालील कोड टाइप करू शकतो:
-
-```python
-query = "What is 3 + 12?"
+query = "Tell me a joke about animals"
 
 res = llm_with_tools.invoke(query)
 if(res.tool_calls):
     for tool in res.tool_calls:
+        # print("TOOL CALL: ", tool)
         print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
 print("CONTENT: ",res.content)
 ```
 
-आता आम्ही `invoke` या नवीन llm वर कॉल करतो, ज्यामध्ये टूल्स आहेत, आम्हाला कदाचित `tool_calls` प्रॉपर्टी भरलेली दिसेल. जर तसे असेल, तर कोणत्याही ओळखलेल्या टूलमध्ये `name` आणि `args` प्रॉपर्टी असते जी कोणते टूल कॉल केले पाहिजे आणि कोणत्या अर्ग्युमेंट्ससह. संपूर्ण कोड असा दिसतो:
+## एम्बेडिंग्ज आणि दस्तऐवज प्रक्रिया
+
+एम्बेडिंग्ज आधुनिक AI मधील सर्वात सुंदर उपायांपैकी एक आहेत. कल्पना करा की तुम्ही कोणताही मजकूर घेऊन त्याचा अर्थ पकडणाऱ्या संख्यात्मक निर्देशांकांमध्ये रूपांतर करू शकता. हेच एम्बेडिंग्ज करतात - ते मजकूराला बहुआयामी जागेत बिंदूंमध्ये रूपांतरित करतात जिथे समान संकल्पना एकत्रित होतात. हे कल्पनांसाठी समन्वय प्रणाली असल्यासारखे आहे, जसे मेंडेलीवने अणु गुणधर्मांद्वारे आवर्त सारणी आयोजित केली.
+
+### एम्बेडिंग्ज तयार करणे आणि वापरणे
 
 ```python
-from langchain_core.messages import HumanMessage, SystemMessage
-from langchain_openai import ChatOpenAI
-import os
-from typing_extensions import Annotated, TypedDict
+from langchain_openai import OpenAIEmbeddings
+from langchain_community.vectorstores import FAISS
+from langchain_community.document_loaders import TextLoader
+from langchain.text_splitter import CharacterTextSplitter
 
-class add(TypedDict):
-    """Add two integers."""
+# Initialize embeddings
+embeddings = OpenAIEmbeddings(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="text-embedding-3-small"
+)
 
-    # Annotations must have the type and can optionally include a default value and description (in that order).
-    a: Annotated[int, ..., "First integer"]
-    b: Annotated[int, ..., "Second integer"]
+# Load and split documents
+loader = TextLoader("documentation.txt")
+documents = loader.load()
 
-tools = [add]
+text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0)
+texts = text_splitter.split_documents(documents)
 
-functions = {
-    "add": lambda a, b: a + b
-}
+# Create vector store
+vectorstore = FAISS.from_documents(texts, embeddings)
 
-llm = ChatOpenAI(
-    api_key=os.environ["GITHUB_TOKEN"],
-    base_url="https://models.github.ai/inference",
-    model="openai/gpt-4o-mini",
+# Perform similarity search
+query = "How do I handle user authentication?"
+similar_docs = vectorstore.similarity_search(query, k=3)
+
+for doc in similar_docs:
+    print(f"Relevant content: {doc.page_content[:200]}...")
+```
+
+### विविध स्वरूपांसाठी दस्तऐवज लोडर्स
+
+```python
+from langchain_community.document_loaders import (
+    PyPDFLoader,
+    CSVLoader,
+    JSONLoader,
+    WebBaseLoader
 )
 
-llm_with_tools = llm.bind_tools(tools)
+# Load different document types
+pdf_loader = PyPDFLoader("manual.pdf")
+csv_loader = CSVLoader("data.csv")
+json_loader = JSONLoader("config.json")
+web_loader = WebBaseLoader("https://example.com/docs")
+
+# Process all documents
+all_documents = []
+for loader in [pdf_loader, csv_loader, json_loader, web_loader]:
+    docs = loader.load()
+    all_documents.extend(docs)
+```
 
-query = "What is 3 + 12?"
+**एम्बेडिंग्जसह तुम्ही काय करू शकता:**
+- **सर्च तयार करा** जो फक्त कीवर्ड जुळवण्यापेक्षा तुमचा अर्थ समजतो
+- **AI तयार करा** जो तुमच्या दस्तऐवजांबद्दल प्रश्नांची उत्तरे देतो
+- **शिफारस प्रणाली तयार करा** जी खरोखर संबंधित सामग्री सुचवते
+- **स्वयंचलितपणे** तुमची सामग्री आयोजित आणि वर्गीकृत करा
 
-res = llm_with_tools.invoke(query)
-if(res.tool_calls):
-    for tool in res.tool_calls:
-        print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
-print("CONTENT: ",res.content)
+```mermaid
+flowchart LR
+    A[Documents] --> B[Text Splitter]
+    B --> C[Create Embeddings]
+    C --> D[Vector Store]
+    
+    E[User Query] --> F[Query Embedding]
+    F --> G[Similarity Search]
+    G --> D
+    D --> H[Relevant Documents]
+    H --> I[AI Response]
+    
+    subgraph "Vector Space"
+        J[Document A: [0.1, 0.8, 0.3...]]
+        K[Document B: [0.2, 0.7, 0.4...]]
+        L[Query: [0.15, 0.75, 0.35...]]
+    end
+    
+    C --> J
+    C --> K
+    F --> L
+    G --> J
+    G --> K
 ```
 
-हा कोड चालवल्यावर, तुम्हाला असे आउटपुट दिसेल:
+## संपूर्ण AI अनुप्रयोग तयार करणे
 
-```text
-TOOL CALL:  15
-CONTENT: 
+आता आपण शिकलेल्या सर्व गोष्टी एका व्यापक अनुप्रयोगात समाकलित करूया - एक कोडिंग सहाय्यक जो प्रश्नांची उत्तरे देतो, साधने वापरतो आणि संभाषणाची स्मृती राखतो. जसे छपाई यंत्राने विद्यमान तंत्रज्ञान (मूव्हेबल टाइप, शाई, कागद आणि दाब) एकत्रित करून काहीतरी परिवर्तनात्मक तयार केले, तसेच आपण आपल्या AI घटकांना काहीतरी व्यावहारिक आणि उपयुक्त बनवण्यासाठी एकत्र करूया.
+
+### संपूर्ण अनुप्रयोग उदाहरण
+
+```python
+from langchain_openai import ChatOpenAI, OpenAIEmbeddings
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_core.messages import HumanMessage, SystemMessage, AIMessage
+from langchain_community.vectorstores import FAISS
+from typing_extensions import Annotated, TypedDict
+import os
+import requests
+
+class CodingAssistant:
+    def __init__(self):
+        self.llm = ChatOpenAI(
+            api_key=os.environ["GITHUB_TOKEN"],
+            base_url="https://models.github.ai/inference",
+            model="openai/gpt-4o-mini"
+        )
+        
+        self.conversation_history = [
+            SystemMessage(content="""You are an expert coding assistant. 
+            Help users learn programming concepts, debug code, and write better software.
+            Use tools when needed and maintain a helpful, encouraging tone.""")
+        ]
+        
+        # Define tools
+        self.setup_tools()
+    
+    def setup_tools(self):
+        class web_search(TypedDict):
+            """Search for programming documentation or examples."""
+            query: Annotated[str, "Search query for programming help"]
+        
+        class code_formatter(TypedDict):
+            """Format and validate code snippets."""
+            code: Annotated[str, "Code to format"]
+            language: Annotated[str, "Programming language"]
+        
+        self.tools = [web_search, code_formatter]
+        self.llm_with_tools = self.llm.bind_tools(self.tools)
+    
+    def chat(self, user_input: str):
+        # Add user message to conversation
+        self.conversation_history.append(HumanMessage(content=user_input))
+        
+        # Get AI response
+        response = self.llm_with_tools.invoke(self.conversation_history)
+        
+        # Handle tool calls if any
+        if response.tool_calls:
+            for tool_call in response.tool_calls:
+                tool_result = self.execute_tool(tool_call)
+                print(f"🔧 Tool used: {tool_call['name']}")
+                print(f"📊 Result: {tool_result}")
+        
+        # Add AI response to conversation
+        self.conversation_history.append(response)
+        
+        return response.content
+    
+    def execute_tool(self, tool_call):
+        tool_name = tool_call['name']
+        args = tool_call['args']
+        
+        if tool_name == 'web_search':
+            return f"Found documentation for: {args['query']}"
+        elif tool_name == 'code_formatter':
+            return f"Formatted {args['language']} code: {args['code'][:50]}..."
+        
+        return "Tool execution completed"
+
+# Usage example
+assistant = CodingAssistant()
+
+print("🤖 Coding Assistant Ready! Type 'quit' to exit.\n")
+
+while True:
+    user_input = input("You: ")
+    if user_input.lower() == 'quit':
+        break
+    
+    response = assistant.chat(user_input)
+    print(f"🤖 Assistant: {response}\n")
 ```
 
-एआयने "What is 3 + 12" चे परीक्षण केले आणि हे `add` टूलसाठी कार्य म्हणून ओळखले. जसे कुशल ग्रंथपाल प्रश्नाच्या प्रकारावर आधारित कोणते संदर्भ सल्ला घ्यायचे ते जाणतो, तसेच टूलचे नाव, वर्णन, आणि फील्ड स्पेसिफिकेशन्समधून हे ठरवले. 15 चा परिणाम आमच्या `functions` डिक्शनरीमधून टूल अंमलात आण
-3. **वैयक्तिकृत शिक्षण**: वेगवेगळ्या कौशल्य स्तरांनुसार प्रतिसाद देण्यासाठी प्रणाली संदेशांचा वापर करा  
-4. **प्रतिसाद स्वरूपन**: क्विझ प्रश्नांसाठी संरचित आउटपुट लागू करा  
+**अनुप्रयोग आर्किटेक्चर:**
+
+```mermaid
+graph TD
+    A[User Input] --> B[Coding Assistant]
+    B --> C[Conversation Memory]
+    B --> D[Tool Detection]
+    B --> E[LLM Processing]
+    
+    D --> F[Web Search Tool]
+    D --> G[Code Formatter Tool]
+    
+    E --> H[Response Generation]
+    F --> H
+    G --> H
+    
+    H --> I[User Interface]
+    H --> C
+```
+
+**आम्ही अंमलात आणलेल्या मुख्य वैशिष्ट्ये:**
+- **तुमचे संपूर्ण संभाषण लक्षात ठेवते** संदर्भ सातत्यासाठी
+- **क्रिया करते** साधन कॉलिंगद्वारे, फक्त संभाषण नाही
+- **अनुमानित संवाद पॅटर्नचे अनुसरण करते**
+- **स्वयंचलितपणे त्रुटी हाताळणी आणि जटिल कार्यप्रवाह व्यवस्थापित करते**
+
+### 🎯 शैक्षणिक तपासणी: उत्पादन AI आर्किटेक्चर
+
+**आर्किटेक्चर समज**: तुम्ही संभाषण व्यवस्थापन, साधन कॉलिंग आणि संरचित कार्यप्रवाह एकत्रित करणारा संपूर्ण AI अनुप्रयोग तयार केला आहे. हे उत्पादन-स्तरीय AI अनुप्रयोग विकासाचे प्रतिनिधित्व करते.
+
+**मास्टर केलेले मुख्य संकल्पना**:
+- **क्लास-आधारित आर्किटेक्चर**: आयोजित, देखभाल करण्यायोग्य AI अनुप्रयोग संरचना
+- **साधन समाकलन**: संभाषणाच्या पलीकडे सानुकूल कार्यक्षमता
+- **स्मृती व्यवस्थापन**: सतत संभाषण संदर्भ
+- **त्रुटी हाताळणी**: मजबूत अनुप्रयोग वर्तन
+
+**उद्योग कनेक्शन**: तुम्ही अंमलात आणलेल्या आर्किटेक्चर पॅटर्न (संभाषण वर्ग, साधन प्रणाली, स्मृती व्यवस्थापन) हेच पॅटर्न एंटरप्राइझ AI अनुप्रयोगांमध्ये वापरले जातात जसे की Slack चा AI सहाय्यक, GitHub Copilot आणि Microsoft Copilot. तुम्ही व्यावसायिक-स्तरीय आर्किटेक्चरल विचारांसह तयार करत आहात.
 
-### अंमलबजावणी चरण  
+**चिंतन प्रश्न**: तुम्ही हा अनुप्रयोग अनेक वापरकर्त्यांना, सतत संचय किंवा बाह्य डेटाबेससह समाकलन हाताळण्यासाठी कसा विस्तृत कराल? स्केलेबिलिटी आणि राज्य व्यवस्थापन आव्हानांचा विचार करा.
 
-**चरण 1: तुमचे वातावरण सेट करा**  
+## असाइनमेंट: तुमचा स्वतःचा AI-सक्षम अभ्यास सहाय्यक तयार करा
+
+**उद्दिष्ट**: विद्यार्थ्यांना प्रोग्रामिंग संकल्पना शिकण्यास मदत करणारा AI अनुप्रयोग तयार करा जो स्पष्टीकरणे, कोड उदाहरणे आणि परस्पर क्विझ प्रदान करतो.
+
+### आवश्यकता
+
+**कोर वैशिष्ट्ये (आवश्यक):**
+1. **संवादी इंटरफेस**: अनेक प्रश्नांमध्ये संदर्भ राखणारी चॅट प्रणाली अंमलात आणा
+2. **शैक्षणिक साधने**: शिकण्यास मदत करणारी किमान दोन साधने तयार करा:
+   - कोड स्पष्टीकरण साधन
+   - संकल्पना क्विझ जनरेटर
+3. **वैयक्तिकृत शिक्षण**: वेगवेगळ्या कौशल्य स्तरांनुसार प्रतिसाद अनुकूल करण्यासाठी प्रणाली संदेश वापरा
+4. **प्रतिसाद स्वरूपन**: क्विझ प्रश्नांसाठी संरचित आउटपुट अंमलात आणा
+
+### अंमलबजावणी चरण
+
+**चरण 1: तुमचे वातावरण सेट करा**
 ```bash
 pip install langchain langchain-openai
 ```
-  
-**चरण 2: मूलभूत चॅट कार्यक्षमता**  
-- `StudyAssistant` वर्ग तयार करा  
-- संवादाची स्मृती अंमलात आणा  
-- शैक्षणिक सहाय्यासाठी व्यक्तिमत्व कॉन्फिगरेशन जोडा  
 
-**चरण 3: शैक्षणिक साधने जोडा**  
-- **कोड एक्सप्लेनर**: कोड समजण्यास सोपे भागांमध्ये विभागतो  
-- **क्विझ जनरेटर**: प्रोग्रामिंग संकल्पनांवर आधारित प्रश्न तयार करतो  
-- **प्रगती ट्रॅकर**: कव्हर केलेल्या विषयांचा मागोवा ठेवतो  
+**चरण 2: मूलभूत चॅट कार्यक्षमता**
+- `StudyAssistant` वर्ग तयार करा
+- संभाषणाची स्मृती अंमलात आणा
+- शैक्षणिक समर्थनासाठी व्यक्तिमत्व कॉन्फिगरेशन जोडा
 
-**चरण 4: सुधारित वैशिष्ट्ये (पर्यायी)**  
-- चांगल्या वापरकर्ता अनुभवासाठी स्ट्रीमिंग प्रतिसाद अंमलात आणा  
-- अभ्यासक्रम सामग्री समाविष्ट करण्यासाठी दस्तऐवज लोडिंग जोडा  
-- समानता-आधारित सामग्री पुनर्प्राप्तीसाठी एम्बेडिंग तयार करा  
+**चरण 3: शैक्षणिक साधने जोडा**
+- **कोड स्पष्टीकरण करणारे**: कोड समजण्याजोग्या भागांमध्ये विभागते
+- **क्विझ जनरेटर**: प्रोग्रामिंग संकल्पनांबद्दल प्रश्न तयार करते
+- **प्रगती ट्रॅकर**: कव्हर केलेल्या विषयांचा मागोवा ठेवतो
 
-### मूल्यांकन निकष  
+**चरण 4: सुधारित वैशिष्ट्ये (पर्यायी)**
+- चांगल्या वापरकर्ता अनुभवासाठी स्ट्रीमिंग प्रतिसाद अंमलात आणा
+- अभ्यासक्रम सामग्री समाविष्ट करण्यासाठी दस्तऐवज लोडिंग जोडा
+- समानता-आधारित सामग्री पुनर्प्राप्तीसाठी एम्बेडिंग्ज तयार करा
 
-| वैशिष्ट्य | उत्कृष्ट (4) | चांगले (3) | समाधानकारक (2) | सुधारणा आवश्यक (1) |  
-|-----------|---------------|------------|----------------|--------------------|  
-| **संवाद प्रवाह** | नैसर्गिक, संदर्भ-जाणकार प्रतिसाद | चांगला संदर्भ टिकवून ठेवणे | मूलभूत संवाद | संवादांमध्ये कोणतीही स्मृती नाही |  
-| **साधन एकत्रीकरण** | अनेक उपयुक्त साधने सुरळीत कार्यरत | 2+ साधने योग्य प्रकारे अंमलात आणली | 1-2 मूलभूत साधने | साधने कार्यक्षम नाहीत |  
-| **कोड गुणवत्ता** | स्वच्छ, चांगले दस्तऐवजीकरण, त्रुटी हाताळणी | चांगली रचना, काही दस्तऐवजीकरण | मूलभूत कार्यक्षमता कार्य करते | खराब रचना, त्रुटी हाताळणी नाही |  
-| **शैक्षणिक मूल्य** | शिकण्यासाठी खरोखर उपयुक्त, अनुकूल | चांगले शिक्षण समर्थन | मूलभूत स्पष्टीकरण | मर्यादित शैक्षणिक लाभ |  
+### मूल्यांकन निकष
 
-### नमुना कोड रचना  
+| वैशिष्ट्य | उत्कृष्ट (4) | चांगले (3) | समाधानकारक (2) | सुधारणा आवश्यक (1) |
+|-----------|---------------|------------|----------------|--------------------|
+| **संभाषण प्रवाह** | नैसर्गिक, संदर्भ-जाणकार प्रतिसाद | चांगला संदर्भ टिकवून ठेवणे | मूलभूत संभाषण | एक्सचेंजेस दरम्यान कोणतीही स्मृती नाही |
+| **साधन समाकलन** | अनेक उपयुक्त साधने सुरळीतपणे कार्यरत | 2+ साधने योग्य प्रकारे अंमलात आणली | 1-2 मूलभूत साधने | साधने कार्यक्षम नाहीत |
+| **कोड गुणवत्ता** | स्वच्छ, चांगले दस्तऐवजीकरण, त्रुटी हाताळणी | चांगली रचना, काही दस्तऐवजीकरण | मूलभूत कार्यक्षमता कार्य करते | खराब रचना, त्रुटी हाताळणी नाही |
+| **शैक्षणिक मूल्य** | शिकण्यासाठी खरोखर उपयुक्त, अनुकूल | चांगले शिक्षण समर्थन | मूलभूत स्पष्टीकरण | मर्यादित शैक्षणिक लाभ |
+
+### नमुना कोड संरचना
 
 ```python
 class StudyAssistant:
@@ -499,42 +848,101 @@ class StudyAssistant:
 assistant = StudyAssistant(skill_level="intermediate")
 response = assistant.chat("Explain how Python functions work")
 ```
-  
-**अतिरिक्त आव्हाने:**  
-- आवाज इनपुट/आउटपुट क्षमता जोडा  
-- Streamlit किंवा Flask वापरून वेब इंटरफेस अंमलात आणा  
-- एम्बेडिंग वापरून अभ्यासक्रम सामग्रीमधून ज्ञानाचा आधार तयार करा  
-- प्रगती ट्रॅकिंग आणि वैयक्तिकृत शिक्षण मार्ग जोडा  
 
-## सारांश  
+**अतिरिक्त आव्हाने:**
+- व्हॉइस इनपुट/आउटपुट क्षमता जोडा
+- Streamlit किंवा Flask वापरून वेब इंटरफेस अंमलात आणा
+- एम्बेडिंग्ज वापरून अभ्यासक्रम सामग्रीमधून ज्ञानाचा आधार तयार करा
+- प्रगती ट्रॅकिंग आणि वैयक्तिकृत शिक्षण मार्ग तयार करा
+
+## 📈 तुमचा AI फ्रेमवर्क विकास कौशल्य कालक्रम
+
+```mermaid
+timeline
+    title Production AI Framework Development Journey
+    
+    section Framework Foundations
+        Understanding Abstractions
+            : Master framework vs API decisions
+            : Learn LangChain core concepts
+            : Implement message type systems
+        
+        Basic Integration
+            : Connect to AI providers
+            : Handle authentication
+            : Manage configuration
+    
+    section Conversation Systems
+        Memory Management
+            : Build conversation history
+            : Implement context tracking
+            : Handle session persistence
+        
+        Advanced Interactions
+            : Master streaming responses
+            : Create prompt templates
+            : Implement structured output
+    
+    section Tool Integration
+        Custom Tool Development
+            : Design tool schemas
+            : Implement function calling
+            : Handle external APIs
+        
+        Workflow Automation
+            : Chain multiple tools
+            : Create decision trees
+            : Build agent behaviors
+    
+    section Production Applications
+        Complete System Architecture
+            : Combine all framework features
+            : Implement error boundaries
+            : Create maintainable code
+        
+        Enterprise Readiness
+            : Handle scalability concerns
+            : Implement monitoring
+            : Build deployment strategies
+```
+
+**🎓 पदवी मिळवण्याचा टप्पा**: तुम्ही LangChain वापरून AI फ्रेमवर्क विकासात यशस्वीरित्या प्रभुत्व मिळवले आहे. आधुनिक AI अनुप्रयोगांना चालना देणारे समान साधने आणि पॅटर्न वापरून तुम्ही कौशल्ये मिळवली आहेत. हे कौशल्ये एंटरप्राइझ-स्तरीय बुद्धिमान प्रणाली तयार करण्यासाठी तुम्हाला तयार करतात.
+
+**🔄 पुढील स्तर क्षमता**:
+- प्रगत AI आर्किटेक्चर (एजंट्स, मल्टी-एजंट सिस्टम्स) एक्सप्लोर करण्यासाठी तयार
+- RAG प्रणाली तयार करण्यासाठी सज्ज (व्हेक्टर डेटाबेससह पुनर्प्राप्ती-वर्धित निर्मिती)
+- मल्टी-मोडल AI अनुप्रयोग तयार करण्यासाठी सुसज्ज
+- AI अनुप्रयोग स्केलिंग आणि ऑप्टिमायझेशनसाठी पाया तयार
 
-🎉 तुम्ही आता AI फ्रेमवर्क विकासाची मूलभूत तत्त्वे आत्मसात केली आहेत आणि LangChain वापरून प्रगत AI अनुप्रयोग कसे तयार करायचे ते शिकले आहे. जसे की एक व्यापक प्रशिक्षण पूर्ण केल्यावर, तुम्ही कौशल्यांचा एक मोठा संच मिळवला आहे. चला, तुम्ही काय साध्य केले आहे ते पुनरावलोकन करूया.  
+## सारांश
 
-### तुम्ही काय शिकलात  
+🎉 तुम्ही आता AI फ्रेमवर्क विकासाची मूलभूत तत्त्वे आत्मसात केली आहेत आणि LangChain वापरून परिष्कृत AI अनुप्रयोग कसे तयार करायचे ते शिकले आहे. जसे की व्यापक प्रशिक्षण पूर्ण केल्यावर, तुम्ही कौशल्यांचा मोठा संच मिळवला आहे. चला तुम्ही काय साध्य केले आहे ते पुनरावलोकन करूया.
 
-**कोर फ्रेमवर्क संकल्पना:**  
-- **फ्रेमवर्कचे फायदे**: थेट API कॉल्सच्या तुलनेत फ्रेमवर्क कधी निवडायचे ते समजून घेणे  
-- **LangChain मूलभूत गोष्टी**: AI मॉडेल कनेक्शन सेट अप आणि कॉन्फिगर करणे  
-- **संदेश प्रकार**: संरचित संवादांसाठी `SystemMessage`, `HumanMessage`, आणि `AIMessage` चा वापर  
+### तुम्ही काय शिकलात
 
-**प्रगत वैशिष्ट्ये:**  
-- **साधन कॉलिंग**: प्रगत AI क्षमता वाढवण्यासाठी सानुकूल साधने तयार करणे आणि एकत्रित करणे  
-- **संवाद स्मृती**: अनेक संवादांमध्ये संदर्भ टिकवून ठेवणे  
-- **स्ट्रीमिंग प्रतिसाद**: रिअल-टाइम प्रतिसाद वितरण अंमलात आणणे  
-- **प्रॉम्प्ट टेम्पलेट्स**: पुनर्वापरयोग्य, गतिशील प्रॉम्प्ट तयार करणे  
-- **संरचित आउटपुट**: सुसंगत, पार्स करण्यायोग्य AI प्रतिसाद सुनिश्चित करणे  
-- **एम्बेडिंग्स**: सेमॅंटिक शोध आणि दस्तऐवज प्रक्रिया क्षमता तयार करणे  
+**कोर फ्रेमवर्क संकल्पना:**
+- **फ्रेमवर्कचे फायदे**: थेट API कॉल्सच्या तुलनेत फ्रेमवर्क निवडण्याची गरज समजून घेणे
+- **LangChain मूलभूत गोष्टी**: AI मॉडेल कनेक्शन सेट अप आणि कॉन्फिगर करणे
+- **संदेश प्रकार**: संरचित संभाषणासाठी `SystemMessage`, `HumanMessage`, आणि `AIMessage` वापरणे
 
-**व्यावहारिक अनुप्रयोग:**  
-- **पूर्ण अॅप्स तयार करणे**: उत्पादन-तयार अनुप्रयोगांमध्ये अनेक वैशिष्ट्ये एकत्र करणे  
-- **त्रुटी हाताळणी**: मजबूत त्रुटी व्यवस्थापन आणि सत्यापन अंमलात आणणे  
-- **साधन एकत्रीकरण**: AI क्षमता वाढवणारी सानुकूल साधने तयार करणे  
+**प्रगत वैशिष्ट्ये:**
+- **साधन कॉलिंग**: AI क्षमता वाढवण्यासाठी सानुकूल साधने तयार करणे आणि समाकलित करणे
+- **संभाषण स्मृती**: अनेक संभाषण वळणांमध्ये संदर्भ राखणे
+- **स्ट्रीमिंग प्रतिसाद**: रिअल-टाइम प्रतिसाद वितरण अंमलात आणणे
+- **प्रॉम्प्ट टेम्पलेट्स**: पुनर्वापर करण्यायोग्य, डायनॅमिक प्रॉम्प्ट्स तयार करणे
+- **संरचित आउटपुट**: सुसंगत, पार्स करण्यायोग्य AI प्रतिसाद सुनिश्चित करणे
+- **एम्बेडिंग्ज**: सिमॅंटिक सर्च आणि दस्तऐवज प्रक्रिया क्षमता तयार करणे
 
-### मुख्य मुद्दे  
+**व्यावहारिक अनुप्रयोग:**
+- **पूर्ण अनुप्रयोग तयार करणे**: उत्पादन-तयार अनुप्रयोगांमध्ये अनेक वैशिष्ट्ये एकत्रित करणे
+- **त्रुटी हाताळणी**: मजबूत त्रुटी व्यवस्थापन आणि सत्यापन अंमलात आणणे
+- **साधन समाकलन**: AI क्षमता वाढवणारी सानुकूल साधने तयार करणे
 
-> 🎯 **लक्षात ठेवा**: LangChain सारखी AI फ्रेमवर्क्स तुमचे जटिलता लपवणारे, वैशिष्ट्यांनी भरलेले सर्वोत्तम मित्र आहेत. संवाद स्मृती, साधन कॉलिंग आवश्यक असताना किंवा अनेक AI मॉडेल्ससह कार्य करताना ते परिपूर्ण आहेत.  
+### मुख्य मुद्दे
 
-**AI एकत्रीकरणासाठी निर्णय फ्रेमवर्क:**  
+> 🎯 **लक्षात ठेवा**: LangChain सारखे AI फ्रेमवर्क मूलतः तुमचे जटिलता लपवणारे, वैशिष्ट्यांनी भरलेले सर्वोत्तम मित्र आहेत. ते परिपूर्ण आहेत जेव्हा तुम्हाला संभाषण स्मृती, साधन कॉलिंग आवश्यक असते किंवा अनेक AI मॉडेल्ससह काम करायचे असते.
+
+**AI समाकलनासाठी निर्णय फ्रेमवर्क:**
 
 ```mermaid
 flowchart TD
@@ -551,45 +959,45 @@ flowchart TD
     G --> K[LangChain basic chat]
     H --> L[LangChain with tools, memory, agents]
 ```
-  
-### पुढे काय कराल?  
 
-**आता तयार करायला सुरुवात करा:**  
-- या संकल्पना घ्या आणि तुम्हाला उत्साहित करणारी काहीतरी तयार करा!  
-- LangChain द्वारे वेगवेगळ्या AI मॉडेल्ससह खेळा - हे AI मॉडेल्सचे खेळाचे मैदान आहे  
-- तुमच्या कामात किंवा प्रकल्पांमध्ये तुम्हाला भेडसावणाऱ्या वास्तविक समस्यांचे निराकरण करणारी साधने तयार करा  
+### पुढे कुठे जायचे?
+
+**आता तयार करायला सुरुवात करा:**
+- या संकल्पना घ्या आणि तुम्हाला उत्साहित करणारी काहीतरी तयार करा!
+- LangChain द्वारे वेगवेगळ्या AI मॉडेल्ससह खेळा - हे AI मॉडेल्सचे खेळाचे मैदान असल्यासारखे आहे
+- तुमच्या कामात किंवा प्रकल्पांमध्ये तुम्हाला भेडसावणाऱ्या वास्तविक समस्यांचे निराकरण करणारी साधने तयार करा
 
-**पुढील स्तरासाठी तयार आहात?**  
-- **AI एजंट्स**: स्वतःहून जटिल कार्ये योजना आणि अंमलात आणू शकणारी AI प्रणाली तयार करा  
-- **RAG (Retrieval-Augmented Generation)**: AI ला तुमच्या स्वतःच्या ज्ञानाच्या आधारासह एकत्र करा आणि सुपर-पॉवर्ड अनुप्रयोग तयार करा  
-- **मल्टी-मोडल AI**: मजकूर, प्रतिमा आणि ऑडिओ एकत्र वापरा - शक्यता अमर्याद आहेत!  
-- **उत्पादन तैनाती**: तुमचे AI अॅप्स स्केल कसे करायचे आणि वास्तविक जगात त्यांचे निरीक्षण कसे करायचे ते शिका  
+**पुढील स्तरासाठी तयार?**
+- **AI एजंट्स**: AI प्रणाली तयार करा जी स्वतःच जटिल कार्ये योजना आणि अंमलात आणू शकते
+- **RAG (पुनर्प्राप्ती-वर्धित निर्मिती)**: AI ला तुमच्या स्वतःच्या ज्ञानाच्या आधारांसह एकत्रित करा सुपर-पॉवर्ड अनुप्रयोगांसाठी
+- **मल्टी-मोडल AI**: मजकूर, प्रतिमा आणि ऑडिओ एकत्र काम करा - शक्यता अमर्याद आहेत!
+- **उत्पादन तैनाती**: तुमचे AI अनुप्रयोग कसे स्केल करायचे आणि वास्तविक जगात त्यांचे निरीक्षण कसे करायचे ते शिका
 
-**समुदायामध्ये सामील व्हा:**  
-- LangChain समुदाय अद्ययावत राहण्यासाठी आणि सर्वोत्तम पद्धती शिकण्यासाठी उत्कृष्ट आहे  
-- GitHub Models तुम्हाला अत्याधुनिक AI क्षमता प्रदान करते - प्रयोगासाठी परिपूर्ण  
-- वेगवेगळ्या उपयोग प्रकरणांसह सराव करत रहा - प्रत्येक प्रकल्प तुम्हाला काहीतरी नवीन शिकवेल  
+**समुदायात सामील व्हा:**
+- LangChain समुदाय अद्ययावत राहण्यासाठी आणि सर्वोत्तम पद्धती शिकण्यासाठी उत्कृष्ट आहे
+- GitHub Models तुम्हाला अत्याधुनिक AI क्षमता प्रदान करते - प्रयोगासाठी परिपूर्ण
+- वेगवेगळ्या उपयोग प्रकरणांसह सराव करत रहा - प्रत्येक प्रकल्प तुम्हाला काहीतरी नवीन शिकवेल
 
-तुमच्याकडे आता बुद्धिमान, संवादात्मक अनुप्रयोग तयार करण्याचे ज्ञान आहे जे लोकांना वास्तविक समस्यांचे निराकरण करण्यात मदत करू शकते. जसे पुनर्जागरण काळातील कारागीरांनी कलात्मक दृष्टिकोन तांत्रिक कौशल्यासह एकत्र केला, तसे तुम्ही आता AI क्षमता व्यावहारिक अनुप्रयोगासह एकत्र करू शकता. प्रश्न असा आहे: तुम्ही काय तयार कराल? 🚀  
+तुमच्याकडे आता बुद्धिमान, संवादात्मक अनुप्रयोग तयार करण्याचे ज्ञान आहे जे लोकांना वास्तविक समस्यांचे निराकरण करण्यात मदत करू शकते. जसे पुनर्जागरण कारागीरांनी कलात्मक दृष्टिकोन तांत्रिक कौशल्यासह एकत्रित केला, तसे तुम्ही आता AI क्षमता व्यावहारिक अनुप्रयोगासह एकत्र करू शकता. प्रश्न आहे: तुम्ही काय तयार कराल? 🚀
 
-## GitHub Copilot Agent Challenge 🚀  
+## GitHub Copilot Agent Challenge 🚀
 
-Agent मोड वापरून खालील आव्हान पूर्ण करा:  
+Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** अनेक LangChain वैशिष्ट्ये समाविष्ट करणारा प्रगत AI-संचालित कोड पुनरावलोकन सहाय्यक तयार करा ज्यामध्ये साधन कॉलिंग, संरचित आउटपुट आणि संवाद स्मृती यांचा समावेश आहे, जे कोड सबमिशनवर व्यापक अभिप्राय प्रदान करते.  
+**वर्णन:** अनेक LangChain वैशिष्ट्ये समाविष्ट करणारा प्रगत AI-सक्षम कोड पुनरावलोकन सहाय्यक तयार करा ज्यामध्ये साधन कॉलिंग, संरचित आउटपुट आणि संभाषण स्मृती समाविष्ट आहे जे कोड सबमिशनवर व्यापक अभिप्राय प्रदान करते.
 
-**प्रॉम्प्ट:** `CodeReviewAssistant` वर्ग तयार करा जो अंमलात आणतो:  
-1. कोडची जटिलता विश्लेषण करण्यासाठी आणि सुधारणा सुचवण्यासाठी साधन  
-2. सर्वोत्तम पद्धतींविरुद्ध कोड तपासण्यासाठी साधन  
-3. सुसंगत पुनरावलोकन स्वरूपासाठी Pydantic मॉडेल्स वापरून संरचित आउटपुट  
-4. पुनरावलोकन सत्रांचा मागोवा ठेवण्यासाठी संवाद स्मृती  
-5. कोड सबमिशन हाताळू शकणारा आणि तपशीलवार, कृतीयोग्य अभिप्राय प्रदान करणारा मुख्य चॅट इंटरफेस  
+**प्रॉम्प्ट:** CodeReviewAssistant वर्ग तयार करा जो अंमलात आणतो:
+1. कोडची जटिलता विश्लेषण करण्यासाठी आणि सुधारणा सुचवण्यासाठी साधन
+2. सर्वोत्तम पद्धतींविरुद्ध कोड तपासण्यासाठी साधन
+3. सुसंगत पुनरावलोकन स्वरूपासाठी Pydantic मॉडेल्स वापरून संरचित आउटपुट
+4. पुनरावलोकन सत्रांचा मागोवा ठेवण्यासाठी संभाषण स्मृती
+5. मुख्य चॅट इंटरफेस जो कोड सबमिशन हाताळू शकतो आणि तपशीलवार, कृतीक्षम अभिप्राय प्रदान करू शकतो
 
-सहाय्यकाने अनेक प्रोग्रामिंग भाषांमध्ये कोड पुनरावलोकन करण्यास सक्षम असावे, सत्रामध्ये अनेक कोड सबमिशनमध्ये संदर्भ टिकवून ठेवावा आणि सारांश स्कोअर तसेच तपशीलवार सुधारणा सूचना प्रदान कराव्यात.  
+सहाय्यकाने अनेक प्रोग्रामिंग भाषांमध्ये कोड पुनरावलोकन करण्यास सक्षम असावे, सत्रातील अनेक कोड सबमिशनमध्ये संदर्भ राखावा आणि सारांश स्कोअर तसेच सुधारणा सुचवण्यासाठी तपशीलवार सूचना प्रदान कराव्या.
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.  
+[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/2-js-basics/1-data-types/README.md b/translations/mr/2-js-basics/1-data-types/README.md
index 23f15e9a4a..0e69cc5544 100644
--- a/translations/mr/2-js-basics/1-data-types/README.md
+++ b/translations/mr/2-js-basics/1-data-types/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d0092f6533ae3ec3adad5b5ece68efaf",
-  "translation_date": "2025-10-22T15:46:41+00:00",
+  "original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
+  "translation_date": "2025-11-03T14:11:07+00:00",
   "source_file": "2-js-basics/1-data-types/README.md",
   "language_code": "mr"
 }
@@ -10,67 +10,116 @@ CO_OP_TRANSLATOR_METADATA:
 # JavaScript मूलभूत गोष्टी: डेटा प्रकार
 
 ![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.mr.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
+
+```mermaid
+journey
+    title Your JavaScript Data Types Adventure
+    section Foundation
+      Variables & Constants: 5: You
+      Declaration Syntax: 4: You
+      Assignment Concepts: 5: You
+    section Core Types
+      Numbers & Math: 4: You
+      Strings & Text: 5: You
+      Booleans & Logic: 4: You
+    section Apply Knowledge
+      Type Conversion: 4: You
+      Real-world Examples: 5: You
+      Best Practices: 5: You
+```
 
-डेटा प्रकार हे JavaScript मधील मूलभूत संकल्पनांपैकी एक आहेत, जे तुम्ही लिहिलेल्या प्रत्येक प्रोग्राममध्ये तुम्हाला भेटतील. डेटा प्रकारांना अलेक्झांड्रिया येथील प्राचीन ग्रंथपालांनी वापरलेल्या फाइलिंग सिस्टमसारखे समजून घ्या – त्यांच्याकडे कविता, गणित आणि ऐतिहासिक नोंदी असलेल्या स्क्रोल्ससाठी विशिष्ट जागा होती. JavaScript माहिती वेगवेगळ्या प्रकारच्या डेटासाठी वेगवेगळ्या श्रेणींसह अशाच प्रकारे आयोजित करते.
+डेटा प्रकार हे JavaScript मधील मूलभूत संकल्पनांपैकी एक आहेत, जे तुम्ही लिहिलेल्या प्रत्येक प्रोग्राममध्ये तुम्हाला भेटतील. डेटा प्रकारांना अलेक्झांड्रियातील प्राचीन ग्रंथालयातील फाइलिंग सिस्टमसारखे समजून घ्या – त्यांनी कविता, गणित आणि ऐतिहासिक नोंदी असलेल्या स्क्रोल्ससाठी विशिष्ट जागा ठेवल्या होत्या. JavaScript माहिती वेगवेगळ्या प्रकारच्या डेटासाठी वेगवेगळ्या श्रेणींमध्ये अशाच प्रकारे आयोजित करते.
 
-या धड्यात, आपण JavaScript कार्य करण्यासाठी आवश्यक असलेल्या मुख्य डेटा प्रकारांचा अभ्यास करू. तुम्ही संख्या, मजकूर, खरे/खोटे मूल्ये हाताळणे शिकाल आणि योग्य प्रकार निवडणे तुमच्या प्रोग्रामसाठी का आवश्यक आहे हे समजून घ्याल. सुरुवातीला हे संकल्पना थोड्या गूढ वाटू शकतात, परंतु सरावाने, त्या सहजपणे समजतील.
+या धड्यात, आपण JavaScript कार्य करण्यासाठी मुख्य डेटा प्रकारांचा अभ्यास करू. तुम्ही संख्या, मजकूर, खरे/खोटे मूल्ये हाताळण्यास शिकाल आणि योग्य प्रकार निवडणे तुमच्या प्रोग्रामसाठी का आवश्यक आहे हे समजून घ्याल. सुरुवातीला हे संकल्पना थोड्या गोंधळात टाकणाऱ्या वाटू शकतात, परंतु सरावाने, त्या सहजपणे समजतील.
 
-डेटा प्रकार समजून घेतल्याने JavaScript मधील इतर सर्व गोष्टी अधिक स्पष्ट होतील. जसे की वास्तुविशारदांना कॅथेड्रल बांधण्यापूर्वी वेगवेगळ्या बांधकाम साहित्याचा अभ्यास करावा लागतो, तसेच या मूलभूत गोष्टी तुम्ही पुढे जे काही तयार कराल त्यासाठी आधार देतील.
+डेटा प्रकार समजून घेणे JavaScript मधील इतर सर्व गोष्टी अधिक स्पष्ट करेल. जसे की वास्तुविशारदांना कॅथेड्रल बांधण्यापूर्वी वेगवेगळ्या बांधकाम साहित्याचा अभ्यास करावा लागतो, तसेच हे मूलभूत गोष्टी तुम्ही पुढे जे काही तयार कराल त्यासाठी आधार देतील.
 
-## पूर्व-व्याख्यान प्रश्नमंजुषा
-[पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/)
+## प्री-लेक्चर क्विझ
+[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/)
 
-हा धडा JavaScript च्या मूलभूत गोष्टींचा समावेश करतो, ही भाषा वेबवर संवादात्मकता प्रदान करते.
+हा धडा JavaScript च्या मूलभूत गोष्टींचा समावेश करतो, ही भाषा वेबवर संवाद साधण्यासाठी वापरली जाते.
 
 > तुम्ही हा धडा [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) वर घेऊ शकता!
 
-[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-> 🎥 वरील प्रतिमांवर क्लिक करा, व्हेरिएबल्स आणि डेटा प्रकारांवरील व्हिडिओसाठी
-
-चला व्हेरिएबल्स आणि त्यामध्ये असलेल्या डेटा प्रकारांपासून सुरुवात करूया!
+[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript मधील Variables")
+
+[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "JavaScript मधील डेटा प्रकार")
+
+> 🎥 वरील प्रतिमांवर क्लिक करा, variables आणि डेटा प्रकारांवरील व्हिडिओसाठी
+
+चला variables आणि त्यामध्ये असलेल्या डेटा प्रकारांपासून सुरुवात करूया!
+
+```mermaid
+mindmap
+  root((JavaScript Data))
+    Variables
+      let myVar
+      const PI = 3.14
+      var oldStyle
+    Primitive Types
+      number
+        42
+        3.14
+        -5
+      string
+        "Hello"
+        'World'
+        `Template`
+      boolean
+        true
+        false
+      undefined
+      null
+    Operations
+      Arithmetic
+        + - * / %
+      String Methods
+        concatenation
+        template literals
+      Type Conversion
+        implicit
+        explicit
+```
 
-## व्हेरिएबल्स
+## Variables
 
-प्रोग्रामिंगमध्ये व्हेरिएबल्स हे मूलभूत घटक आहेत. जसे की मध्ययुगीन रसायनशास्त्रज्ञांनी वेगवेगळ्या पदार्थ साठवण्यासाठी लेबल केलेल्या जार्स वापरल्या, तसेच व्हेरिएबल्स तुम्हाला माहिती साठवण्याची आणि त्याला वर्णनात्मक नाव देण्याची परवानगी देतात जेणेकरून तुम्ही नंतर त्याचा संदर्भ घेऊ शकता. कोणाचे वय लक्षात ठेवायचे आहे? `age` नावाच्या व्हेरिएबलमध्ये साठवा. वापरकर्त्याचे नाव ट्रॅक करायचे आहे? `userName` नावाच्या व्हेरिएबलमध्ये ठेवा.
+प्रोग्रामिंगमध्ये variables हे मूलभूत घटक आहेत. जसे की मध्ययुगीन अल्केमिस्ट्सने वेगवेगळ्या पदार्थांसाठी लेबल असलेल्या जार्सचा वापर केला, तसेच variables तुम्हाला माहिती साठवण्याची आणि त्याला वर्णनात्मक नाव देण्याची परवानगी देतात जेणेकरून तुम्ही नंतर त्याचा संदर्भ घेऊ शकता. कोणाचे वय लक्षात ठेवायचे आहे? `age` नावाच्या variable मध्ये साठवा. वापरकर्त्याचे नाव ट्रॅक करायचे आहे? `userName` नावाच्या variable मध्ये ठेवा.
 
-आम्ही JavaScript मध्ये व्हेरिएबल्स तयार करण्याच्या आधुनिक दृष्टिकोनावर लक्ष केंद्रित करू. तुम्ही येथे शिकाल त्या तंत्रांमध्ये भाषा उत्क्रांती आणि प्रोग्रामिंग समुदायाने विकसित केलेल्या सर्वोत्तम पद्धतींचा समावेश आहे.
+JavaScript मध्ये variables तयार करण्यासाठी आधुनिक दृष्टिकोनावर आपण लक्ष केंद्रित करू. तुम्ही येथे शिकाल त्या तंत्रांमध्ये भाषा उत्क्रांती आणि प्रोग्रामिंग समुदायाने विकसित केलेल्या सर्वोत्तम पद्धतींचा समावेश आहे.
 
-व्हेरिएबल तयार करणे आणि **घोषित करणे** खालील सिंटॅक्स आहे **[keyword] [name]**. यामध्ये दोन भाग असतात:
+Variable तयार करणे आणि **declare** करणे खालील syntax मध्ये आहे **[keyword] [name]**. हे दोन भागांपासून बनलेले आहे:
 
-- **कीवर्ड**. बदलू शकणाऱ्या व्हेरिएबल्ससाठी `let` वापरा किंवा कायमस्वरूपी मूल्यांसाठी `const` वापरा.
-- **व्हेरिएबलचे नाव**, हे तुम्ही स्वतः निवडलेले वर्णनात्मक नाव आहे.
+- **Keyword**. बदलू शकणाऱ्या variables साठी `let` वापरा, किंवा कायमस्वरूपी राहणाऱ्या मूल्यांसाठी `const` वापरा.
+- **Variable name**, हे एक वर्णनात्मक नाव आहे जे तुम्ही स्वतः निवडता.
 
-✅ ES6 मध्ये `let` कीवर्ड सादर केला गेला आणि तुमच्या व्हेरिएबलला तथाकथित _ब्लॉक स्कोप_ दिला. जुना `var` कीवर्ड वापरण्याऐवजी `let` किंवा `const` वापरण्याची शिफारस केली जाते. आम्ही पुढील भागांमध्ये ब्लॉक स्कोप्स अधिक सविस्तरपणे कव्हर करू.
+✅ ES6 मध्ये `let` keyword सादर केले गेले आणि तुमच्या variable ला तथाकथित _block scope_ देते. `let` किंवा `const` वापरण्याची शिफारस केली जाते, जुन्या `var` keyword च्या ऐवजी. आपण पुढील भागांमध्ये block scopes अधिक सविस्तरपणे कव्हर करू.
 
-### कार्य - व्हेरिएबल्ससह काम करणे
+### कार्य - variables सोबत काम करणे
 
-1. **व्हेरिएबल घोषित करा**. चला आपला पहिला व्हेरिएबल तयार करूया:
+1. **Variable declare करा**. चला आपला पहिला variable तयार करूया:
 
     ```javascript
     let myVariable;
     ```
 
    **याने काय साध्य होते:**
-   - हे JavaScript ला `myVariable` नावाचे स्टोरेज स्थान तयार करण्यास सांगते
-   - JavaScript या व्हेरिएबलसाठी मेमरीमध्ये जागा वाटप करते
-   - सध्या व्हेरिएबलकडे कोणतेही मूल्य नाही (undefined)
+   - हे JavaScript ला `myVariable` नावाचे एक स्टोरेज स्थान तयार करण्यास सांगते
+   - JavaScript या variable साठी मेमरीमध्ये जागा वाटप करते
+   - सध्या या variable ला कोणतेही मूल्य नाही (undefined)
 
-2. **त्याला मूल्य द्या**. आता आपल्या व्हेरिएबलमध्ये काहीतरी ठेवूया:
+2. **त्याला एक मूल्य द्या**. आता आपल्या variable मध्ये काहीतरी ठेऊया:
 
     ```javascript
     myVariable = 123;
     ```
 
-   **असाइनमेंट कसे कार्य करते:**
-   - `=` ऑपरेटर आमच्या व्हेरिएबलला 123 मूल्य असाइन करतो
-   - व्हेरिएबल आता undefined ऐवजी हे मूल्य ठेवते
+   **Assignment कसे कार्य करते:**
+   - `=` ऑपरेटर आमच्या variable ला 123 मूल्य असाइन करते
+   - variable आता undefined ऐवजी हे मूल्य ठेवते
    - तुम्ही तुमच्या कोडमध्ये `myVariable` वापरून या मूल्याचा संदर्भ घेऊ शकता
 
-   > टीप: या धड्यात `=` चा वापर म्हणजे आम्ही "असाइनमेंट ऑपरेटर" वापरतो, जो व्हेरिएबलला मूल्य सेट करण्यासाठी वापरला जातो. याचा समानतेचा अर्थ नाही.
+   > टीप: या धड्यात `=` चा वापर "assignment operator" म्हणून केला जातो, जो variable ला मूल्य सेट करण्यासाठी वापरला जातो. याचा समानतेचा अर्थ नाही.
 
 3. **स्मार्ट पद्धतीने करा**. प्रत्यक्षात, चला त्या दोन चरणांना एकत्र करूया:
 
@@ -79,44 +128,72 @@ CO_OP_TRANSLATOR_METADATA:
     ```
 
     **हा दृष्टिकोन अधिक कार्यक्षम आहे:**
-    - तुम्ही एका विधानात व्हेरिएबल घोषित करत आहात आणि मूल्य असाइन करत आहात
+    - तुम्ही एकाच विधानात variable declare आणि मूल्य असाइन करत आहात
     - हे विकसकांमध्ये मानक पद्धत आहे
     - कोडची लांबी कमी करते आणि स्पष्टता राखते
 
-4. **तुमचे मत बदला**. जर आपल्याला वेगळी संख्या साठवायची असेल तर काय?
+4. **तुमचे मन बदला**. जर आपल्याला वेगळी संख्या साठवायची असेल तर काय?
 
    ```javascript
    myVariable = 321;
    ```
 
-   **पुनःअसाइनमेंट समजून घेणे:**
-   - व्हेरिएबल आता 123 ऐवजी 321 ठेवते
-   - पूर्वीचे मूल्य बदलले जाते – व्हेरिएबल्स एकावेळी फक्त एकच मूल्य साठवतात
-   - `let` सह घोषित केलेल्या व्हेरिएबल्सची ही बदलण्याची क्षमता मुख्य वैशिष्ट्य आहे
+   **Reassignment समजून घेणे:**
+   - variable आता 123 ऐवजी 321 ठेवते
+   - पूर्वीचे मूल्य बदलले जाते – variables एकावेळी फक्त एकच मूल्य साठवतात
+   - `let` ने घोषित केलेल्या variables ची ही बदलण्याची क्षमता मुख्य वैशिष्ट्य आहे
+
+   ✅ प्रयत्न करा! तुम्ही तुमच्या ब्राउझरमध्ये JavaScript लिहू शकता. ब्राउझर विंडो उघडा आणि Developer Tools मध्ये जा. कन्सोलमध्ये तुम्हाला एक prompt सापडेल; `let myVariable = 123` टाइप करा, return दाबा, नंतर `myVariable` टाइप करा. काय होते? लक्षात ठेवा, तुम्ही पुढील धड्यांमध्ये या संकल्पनांबद्दल अधिक शिकाल.
 
-   ✅ प्रयत्न करा! तुम्ही तुमच्या ब्राउझरमध्ये थेट JavaScript लिहू शकता. ब्राउझर विंडो उघडा आणि Developer Tools मध्ये जा. कन्सोलमध्ये तुम्हाला एक प्रॉम्प्ट सापडेल; `let myVariable = 123` टाइप करा, रिटर्न दाबा, नंतर `myVariable` टाइप करा. काय होते? लक्षात ठेवा, तुम्ही पुढील धड्यांमध्ये या संकल्पनांबद्दल अधिक शिकाल.
+### 🧠 **Variables Mastery Check: आरामदायक होणे**
+
+**चला पाहूया तुम्ही variables बद्दल कसे वाटत आहात:**
+- तुम्ही variable declare करणे आणि assign करणे यातील फरक स्पष्ट करू शकता का?
+- जर तुम्ही variable declare करण्यापूर्वी वापरण्याचा प्रयत्न केला तर काय होते?
+- तुम्ही variable साठी `let` ऐवजी `const` कधी निवडाल?
+
+```mermaid
+stateDiagram-v2
+    [*] --> Declared: let myVar
+    Declared --> Assigned: myVar = 123
+    Assigned --> Reassigned: myVar = 456
+    Assigned --> [*]: Variable ready!
+    Reassigned --> [*]: Updated value
+    
+    note right of Declared
+        Variable exists but
+        has no value (undefined)
+    end note
+    
+    note right of Assigned
+        Variable contains
+        the value 123
+    end note
+```
+
+> **जलद टिप**: Variables ला लेबल असलेल्या स्टोरेज बॉक्स म्हणून विचार करा. तुम्ही बॉक्स तयार करता (`let`), त्यात काहीतरी ठेवता (`=`), आणि नंतर आवश्यक असल्यास सामग्री बदलू शकता!
 
 ## Constants
 
-कधीकधी तुम्हाला अशी माहिती साठवण्याची आवश्यकता असते जी प्रोग्राम चालू असताना कधीही बदलू नये. गणितीय तत्त्वांप्रमाणेच, जे युक्लिडने प्राचीन ग्रीसमध्ये स्थापित केले – एकदा सिद्ध आणि दस्तऐवजीकरण केल्यानंतर, ते भविष्यातील सर्व संदर्भांसाठी निश्चित राहिले.
+कधी कधी तुम्हाला अशी माहिती साठवायची असते जी प्रोग्राम चालू असताना कधीही बदलू नये. Constants म्हणजे गणितीय तत्त्वांसारखे आहेत जे युक्लिडने प्राचीन ग्रीस मध्ये स्थापन केले – एकदा सिद्ध आणि दस्तऐवजीकरण केल्यानंतर, ते सर्व भविष्यातील संदर्भासाठी निश्चित राहिले.
 
-Constants व्हेरिएबल्ससारखेच कार्य करतात, परंतु एक महत्त्वाचे प्रतिबंध आहे: एकदा तुम्ही त्यांचे मूल्य असाइन केल्यानंतर, ते बदलले जाऊ शकत नाही. ही स्थिरता तुमच्या प्रोग्राममधील महत्त्वाच्या मूल्यांमध्ये अनवधानाने बदल होण्यापासून प्रतिबंधित करते.
+Constants variables प्रमाणेच कार्य करतात, परंतु एक महत्त्वाचे बंधन आहे: एकदा तुम्ही त्यांचे मूल्य असाइन केले की, ते बदलले जाऊ शकत नाही. ही स्थिरता तुमच्या प्रोग्राममधील महत्त्वाच्या मूल्यांमध्ये चुकून बदल होण्यापासून प्रतिबंधित करते.
 
-Constant ची घोषणा आणि प्रारंभ व्हेरिएबलप्रमाणेच संकल्पनांचे अनुसरण करते, `const` कीवर्डच्या अपवादासह. Constants सामान्यतः सर्व अपरकेस अक्षरांमध्ये घोषित केले जातात.
+Constant च्या declaration आणि initialization चा variable प्रमाणेच विचार केला जातो, फक्त `const` keyword चा अपवाद वगळता. Constants सामान्यतः सर्व uppercase अक्षरांमध्ये घोषित केले जातात.
 
 ```javascript
 const MY_VARIABLE = 123;
 ```
 
-**या कोडने काय केले:**
-- **निर्मिती** केली `MY_VARIABLE` नावाचा constant ज्याचे मूल्य 123 आहे
-- **वापरले** constants साठी अपरकेस नामकरण पद्धत
-- **प्रतिबंधित** भविष्यातील कोणतेही मूल्य बदल
+**या कोडने काय करते:**
+- **एक constant तयार करते** ज्याचे नाव `MY_VARIABLE` आहे आणि मूल्य 123 आहे
+- **Uppercase naming convention** चा constants साठी वापर करते
+- **भविष्यातील कोणतेही बदल प्रतिबंधित करते** या मूल्यावर
 
 Constants साठी दोन मुख्य नियम आहेत:
 
 - **तुम्हाला त्यांना लगेच मूल्य द्यावे लागेल** – रिक्त constants परवानगी नाही!
-- **तुम्ही ते मूल्य कधीही बदलू शकत नाही** – तुम्ही प्रयत्न केल्यास JavaScript त्रुटी फेकते. याचा अर्थ काय ते पाहूया:
+- **तुम्ही ते मूल्य कधीही बदलू शकत नाही** – जर तुम्ही प्रयत्न केला तर JavaScript एक त्रुटी फेकते. याचा अर्थ काय आहे ते पाहूया:
 
    **साधे मूल्य** - खालील गोष्ट परवानगी नाही:
    
@@ -126,11 +203,11 @@ Constants साठी दोन मुख्य नियम आहेत:
       ```
 
    **तुम्हाला काय लक्षात ठेवायचे आहे:**
-   - **पुनःअसाइन करण्याचे प्रयत्न** त्रुटी निर्माण करतात
-   - **महत्त्वाच्या मूल्यांचे संरक्षण करते** अनवधानाने बदलांपासून
-   - **सुनिश्चित करते** की मूल्य तुमच्या प्रोग्राममध्ये सुसंगत राहते
+   - **पुन्हा असाइन करण्याचा प्रयत्न** केल्यास त्रुटी येईल
+   - **महत्त्वाच्या मूल्यांना** चुकून बदलण्यापासून संरक्षण देते
+   - **मूल्य** प्रोग्राममध्ये सातत्याने राहते याची खात्री करते
  
-   **ऑब्जेक्ट संदर्भ संरक्षित आहे** - खालील गोष्ट परवानगी नाही:
+   **Object reference संरक्षित आहे** - खालील गोष्ट परवानगी नाही:
    
       ```javascript
       const obj = { a: 3 };
@@ -138,11 +215,11 @@ Constants साठी दोन मुख्य नियम आहेत:
       ```
 
    **या संकल्पना समजून घेणे:**
-   - **प्रतिबंधित करते** मूळ ऑब्जेक्ट नवीन ऑब्जेक्टने बदलणे
-   - **मूळ ऑब्जेक्टचा संदर्भ संरक्षित करते**
-   - **ऑब्जेक्टची ओळख मेमरीमध्ये कायम ठेवते**
+   - **संपूर्ण object बदलण्यापासून प्रतिबंधित करते**
+   - **मूळ object च्या reference चे संरक्षण करते**
+   - **मेमरीमध्ये object ची ओळख कायम ठेवते**
 
-    **ऑब्जेक्ट मूल्य संरक्षित नाही** - खालील गोष्ट परवानगी आहे:
+    **Object value संरक्षित नाही** - खालील गोष्ट परवानगी आहे:
     
       ```javascript
       const obj = { a: 3 };
@@ -150,64 +227,104 @@ Constants साठी दोन मुख्य नियम आहेत:
       ```
 
       **येथे काय होते ते समजून घेणे:**
-      - **ऑब्जेक्टमधील प्रॉपर्टी मूल्य बदलते**
-      - **सारखा ऑब्जेक्ट संदर्भ ठेवते**
-      - **दर्शवते** की ऑब्जेक्टची सामग्री बदलू शकते परंतु संदर्भ स्थिर राहतो
+      - **Object च्या property value बदलते**
+      - **समान object reference ठेवते**
+      - **दर्शवते** की object contents बदलू शकतात परंतु reference स्थिर राहते
 
-   > टीप, `const` म्हणजे संदर्भ पुनःअसाइनमेंटपासून संरक्षित आहे. मूल्य _immutable_ नाही आणि बदलू शकते, विशेषतः जर ते ऑब्जेक्टसारखे जटिल रचना असेल.
+   > टीप, `const` म्हणजे reference पुनः असाइन करण्यापासून संरक्षित आहे. मूल्य _immutable_ नाही आणि बदलू शकते, विशेषतः जर ते object सारखे जटिल construct असेल.
 
 ## डेटा प्रकार
 
-JavaScript माहिती वेगवेगळ्या श्रेणींमध्ये आयोजित करते ज्याला डेटा प्रकार म्हणतात. ही संकल्पना प्राचीन विद्वानांनी ज्ञान वर्गीकृत कसे केले यासारखी आहे – अरिस्टॉटलने वेगवेगळ्या प्रकारच्या विचारांमध्ये फरक केला, हे जाणून की तार्किक तत्त्वे कविता, गणित आणि नैसर्गिक तत्त्वज्ञानावर समान रीतीने लागू केली जाऊ शकत नाहीत.
+JavaScript माहिती वेगवेगळ्या श्रेणींमध्ये आयोजित करते ज्याला डेटा प्रकार म्हणतात. ही संकल्पना प्राचीन विद्वानांनी ज्ञान वर्गीकृत करण्याच्या पद्धतीशी जुळते – अरिस्टॉटलने वेगवेगळ्या प्रकारच्या विचारसरणीमध्ये फरक केला, हे जाणून की तर्कशास्त्रीय तत्त्वे कविता, गणित आणि नैसर्गिक तत्त्वज्ञानावर समान रीतीने लागू केली जाऊ शकत नाहीत.
 
-डेटा प्रकार महत्त्वाचे आहेत कारण वेगवेगळ्या प्रकारची माहिती वेगवेगळ्या ऑपरेशन्ससह कार्य करते. जसे तुम्ही एखाद्या व्यक्तीच्या नावावर अंकगणित करू शकत नाही किंवा गणितीय समीकरणाचे वर्णमालानुसार वर्गीकरण करू शकत नाही, तसेच JavaScript प्रत्येक ऑपरेशनसाठी योग्य डेटा प्रकार आवश्यक आहे. हे समजून घेतल्याने त्रुटी टाळता येतात आणि तुमचा कोड अधिक विश्वासार्ह बनतो.
+डेटा प्रकार महत्त्वाचे आहेत कारण वेगवेगळ्या प्रकारच्या माहितीवर वेगवेगळ्या प्रकारचे ऑपरेशन्स कार्य करतात. जसे तुम्ही एखाद्या व्यक्तीच्या नावावर गणित करू शकत नाही किंवा गणितीय समीकरणाचे वर्णमालानुसार वर्गीकरण करू शकत नाही, तसेच JavaScript प्रत्येक ऑपरेशनसाठी योग्य डेटा प्रकार आवश्यक आहे. हे समजून घेणे त्रुटी टाळते आणि तुमचा कोड अधिक विश्वासार्ह बनवते.
 
-व्हेरिएबल्समध्ये संख्या आणि मजकूरासारख्या अनेक प्रकारच्या मूल्ये साठवता येतात. या विविध प्रकारच्या मूल्यांना **डेटा प्रकार** म्हणून ओळखले जाते. डेटा प्रकार सॉफ्टवेअर विकासाचा एक महत्त्वाचा भाग आहे कारण यामुळे विकसकांना कोड कसा लिहावा आणि सॉफ्टवेअर कसे चालवावे याबद्दल निर्णय घेण्यास मदत होते. याशिवाय, काही डेटा प्रकारांमध्ये अद्वितीय वैशिष्ट्ये असतात जी मूल्यामध्ये अतिरिक्त माहिती रूपांतरित करण्यास किंवा काढण्यास मदत करतात.
+Variables अनेक प्रकारच्या मूल्ये साठवू शकतात, जसे की संख्या आणि मजकूर. या विविध प्रकारच्या मूल्यांना **डेटा प्रकार** म्हणून ओळखले जाते. डेटा प्रकार सॉफ्टवेअर विकासाचा महत्त्वाचा भाग आहे कारण यामुळे विकसकांना कोड कसा लिहायचा आणि सॉफ्टवेअर कसे चालवायचे यावर निर्णय घेण्यास मदत होते. याशिवाय, काही डेटा प्रकारांमध्ये अशी अनोखी वैशिष्ट्ये असतात जी मूल्यामध्ये अतिरिक्त माहिती रूपांतरित किंवा काढण्यास मदत करतात.
 
-✅ डेटा प्रकारांना JavaScript डेटा प्रिमिटिव्ह्स असेही म्हणतात, कारण ते भाषेद्वारे प्रदान केलेले सर्वात कमी-स्तरीय डेटा प्रकार आहेत. 7 प्रिमिटिव्ह डेटा प्रकार आहेत: string, number, bigint, boolean, undefined, null आणि symbol. प्रत्येक प्रिमिटिव्ह काय दर्शवू शकतो याची कल्पना करण्यासाठी एक मिनिट घ्या. `zebra` म्हणजे काय? `0` कसे? `true`?
+✅ डेटा प्रकारांना JavaScript डेटा प्रिमिटिव्ह्स असेही म्हणतात, कारण ते भाषेद्वारे प्रदान केलेले सर्वात कमी-स्तरीय डेटा प्रकार आहेत. 7 प्रिमिटिव्ह डेटा प्रकार आहेत: string, number, bigint, boolean, undefined, null आणि symbol. प्रत्येक प्रिमिटिव्ह काय दर्शवते याची कल्पना करण्यासाठी एक मिनिट घ्या. `zebra` म्हणजे काय? `0` कसे आहे? `true`?
 
-### संख्या
+### Numbers
 
-संख्या हा JavaScript मधील सर्वात सोपा डेटा प्रकार आहे. तुम्ही 42 सारख्या पूर्णांकांसह काम करत असाल, 3.14 सारख्या दशांशांसह किंवा -5 सारख्या नकारात्मक संख्यांसह, JavaScript त्यांना एकसमानपणे हाताळते.
+Numbers हे JavaScript मधील सर्वात सोपे डेटा प्रकार आहेत. तुम्ही 42 सारख्या पूर्णांकांवर काम करत असाल, 3.14 सारख्या दशांशांवर किंवा -5 सारख्या नकारात्मक संख्यांवर, JavaScript त्यांना एकसमानपणे हाताळते.
 
-आमच्या आधीच्या व्हेरिएबलला लक्षात ठेवा? आम्ही साठवलेले 123 प्रत्यक्षात एक संख्या डेटा प्रकार होते:
+आपल्या पूर्वीच्या variable ला लक्षात ठेवा? आपण साठवलेले 123 प्रत्यक्षात एक number डेटा प्रकार होते:
 
 ```javascript
 let myVariable = 123;
 ```
 
-**मुख्य वैशिष्ट्ये:**
+**महत्त्वाचे वैशिष्ट्ये:**
 - JavaScript आपोआप संख्यात्मक मूल्ये ओळखते
-- तुम्ही या व्हेरिएबल्ससह गणितीय ऑपरेशन्स करू शकता
-- कोणत्याही स्पष्ट प्रकाराची घोषणा आवश्यक नाही
-
-व्हेरिएबल्स सर्व प्रकारच्या संख्यांचा समावेश करू शकतात, ज्यामध्ये दशांश किंवा नकारात्मक संख्या समाविष्ट आहे. संख्या अंकगणितीय ऑपरेटरसह देखील वापरली जाऊ शकते, [पुढील विभागात](../../../../2-js-basics/1-data-types) कव्हर केले आहे.
+- तुम्ही या variables सह गणितीय ऑपरेशन्स करू शकता
+- कोणत्याही प्रकारची स्पष्ट प्रकार घोषणा आवश्यक नाही
+
+Variables सर्व प्रकारच्या संख्यांना साठवू शकतात, ज्यामध्ये दशांश किंवा नकारात्मक संख्या समाविष्ट आहे. Numbers arithmetic operators सह वापरले जाऊ शकतात, जे [पुढील विभागात](../../../../2-js-basics/1-data-types) कव्हर केले आहे.
+
+```mermaid
+flowchart LR
+    A["🔢 Numbers"] --> B["➕ Addition"]
+    A --> C["➖ Subtraction"]
+    A --> D["✖️ Multiplication"]
+    A --> E["➗ Division"]
+    A --> F["📊 Remainder %"]
+    
+    B --> B1["1 + 2 = 3"]
+    C --> C1["5 - 3 = 2"]
+    D --> D1["4 * 3 = 12"]
+    E --> E1["10 / 2 = 5"]
+    F --> F1["7 % 3 = 1"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
 
-### अंकगणितीय ऑपरेटर
+### Arithmetic Operators
 
-अंकगणितीय ऑपरेटर तुम्हाला JavaScript मध्ये गणितीय गणना करण्याची परवानगी देतात. हे ऑपरेटर गणितज्ञांनी शतकानुशतके वापरलेल्या समान तत्त्वांचे अनुसरण करतात – अल-क्वारिझ्मी सारख्या विद्वानांच्या कामांमध्ये दिसणारे समान चिन्ह, ज्यांनी बीजगणितीय संकेतन विकसित केले.
+Arithmetic operators तुम्हाला JavaScript मध्ये गणितीय गणना करण्याची परवानगी देतात. हे ऑपरेटर शतकानुशतके गणितज्ञांनी वापरलेल्या तत्त्वांचे अनुसरण करतात – अल-ख्वारिज्मी सारख्या विद्वानांच्या कार्यांमध्ये दिसणारे समान चिन्ह, ज्यांनी बीजगणितीय संकेतन विकसित केले.
 
 ऑपरेटर पारंपरिक गणिताप्रमाणे कार्य करतात: बेरीजसाठी प्लस, वजाबाकीसाठी मायनस, इत्यादी.
 
-अंकगणितीय कार्ये करताना वापरण्यासाठी अनेक प्रकारचे ऑपरेटर आहेत आणि त्यापैकी काही येथे सूचीबद्ध आहेत:
+गणितीय कार्ये करताना वापरण्यासाठी अनेक प्रकारचे ऑपरेटर आहेत, आणि त्यापैकी काही येथे सूचीबद्ध आहेत:
+
+| चिन्ह | वर्णन                                                                  | उदाहरण                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Addition**: दोन संख्यांची बेरीज काढते                                  | `1 + 2 // अपेक्षित उत्तर 3 आहे`   |
+| `-`    | **Subtraction**: दोन संख्यांचा फरक काढते                                | `1 - 2 // अपेक्षित उत्तर -1 आहे`  |
+| `*`    | **Multiplication**: दोन संख्यांचा गुणाकार काढते                         | `1 * 2 // अपेक्षित उत्तर 2 आहे`   |
+| `/`    | **Division**: दोन संख्यांचा भागाकार काढते                              | `1 / 2 // अपेक्षित उत्तर 0.5 आहे` |
+| `%`    | **Remainder**: दोन संख्यांच्या भागाकारातून उरलेला भाग काढते            | `1 % 2 // अपेक्षित उत्तर 1 आहे`   |
+
+✅ प्रयत्न करा! तुमच्या ब्राउझरच्या कन्सोलमध्ये एक arithmetic operation करून पहा. परिणाम तुम्हाला आश्चर्यचकित करतो का?
+
+### 🧮 **Math Skills Check: आत्मविश्वासाने गणना करणे**
 
-| चिन्ह | वर्णन                                                               | उदाहरण                          |
-| ------ | -------------------------------------------------------------------- | -------------------------------- |
-| `+`    | **बेरीज**: दोन संख्यांची बेरीज काढते                                | `1 + 2 // अपेक्षित उत्तर 3 आहे`   |
-| `-`    | **वजाबाकी**: दोन संख्यांचा फरक काढते                               | `1 - 2 // अपेक्षित उत्तर -1 आहे`  |
-| `*`    | **गुणाकार**: दोन संख्यांचा गुणाकार काढते                           | `1 * 2 // अपेक्षित उत्तर 2 आहे`   |
-| `/`    | **भागाकार**: दोन संख्यांचा भागाकार काढते                           | `1 / 2 // अपेक्षित उत्तर 0.5 आहे` |
-| `%`    | **शिल्लक**: दोन संख्यांच्या भागाकारातून शिल्लक काढते               | `1 % 2 // अपेक्षित उत्तर 1 आहे`   |
+**तुमच्या arithmetic समजून घेण्याची चाचणी करा:**
+- `/` (division) आणि `%` (remainder) यामधील फरक काय आहे?
+- तुम्ही अंदाज लावू शकता का की `10 % 3` काय आहे? (सूचना: ते 3.33 नाही...)
+- remainder operator प्रोग्रामिंगमध्ये उपयुक्त का असू शकतो?
 
-✅ प्रयत्न करा! तुमच्या ब्राउझरच्या कन्सोलमध्ये अंकगणितीय ऑपरेशन करून पहा. परिणाम तुम्हाला आश्चर्यचकित करतो का?
+```mermaid
+pie title "JavaScript Number Operations Usage"
+    "Addition (+)" : 35
+    "Subtraction (-)" : 20
+    "Multiplication (*)" : 20
+    "Division (/)" : 15
+    "Remainder (%)" : 10
+```
+
+> **वास्तविक जगातील अंतर्दृष्टी**: remainder operator (%) अगदी उपयुक्त आहे, जसे की संख्यांचे even/odd तपासणे, pattern तयार करणे, किंवा arrays मधून cycling करणे!
 
-### स्ट्रिंग्स
+### Strings
 
-JavaScript मध्ये, मजकूर डेटा स्ट्रिंग्स म्हणून दर्शविला जातो. "स्ट्रिंग" हा शब्द अक्षरे अनुक्रमाने जोडण्याच्या संकल्पनेतून आला आहे, जसे की मध्ययुगीन मठांतील लेखक त्यांच्या हस्तलिखितांमध्ये शब्द आणि वाक्य तयार करण्यासाठी अक्षरे जोडत असत.
+JavaScript मध्ये, मजकूर डेटा strings म्हणून दर्शवला जातो. "String" हा शब्द अक्षरे अनुक्रमाने जोडण्याच्या संकल्पनेतून आला आहे, जसे की मध्ययुगीन मठांतील लेखक त्यांच्या हस्तलिखितांमध्ये शब्द आणि वाक्य तयार करण्यासाठी अक्षरे जोडत असत.
 
-वेब विकासासाठी स्ट्रिंग्स मूलभूत आहेत. वेबसाइटवर प्रदर्शित होणारा प्रत्येक मजकूर – वापरकर्त्यांची नावे, बटण लेबल्स, त्रुटी संदेश, सामग्री – स्ट्रिंग डेटा म्हणून हाताळला जातो. कार्यशील वापरकर्ता इंटरफेस तयार करण्यासाठी स्ट्रिंग्स समजून घेणे आवश्यक आहे.
+Strings वेब विकासासाठी मूलभूत आहेत. वेबसाइटवर प्रदर्शित होणारा प्रत्येक मजकूर – usernames, बटण लेबल्स, त्रुटी संदेश, सामग्री – string डेटा म्हणून हाताळला जातो. कार्यक्षम वापरकर्ता इंटरफेस तयार करण्यासाठी strings समजून घेणे आवश्यक आहे.
 
-स्ट्रिंग्स ही अक्षरे आहेत जी सिंगल किंवा डबल कोट्समध्ये असतात.
+Strings ही अक्षरे आहेत जी single किंवा double quotes मध्ये असतात.
 
 ```javascript
 'This is a string'
@@ -216,31 +333,117 @@ let myString = 'This is a string value stored in a variable';
 ```
 
 **या संकल्पना समजून घेणे:**
-- **वापरते** सिंगल कोट्स `'` किंवा डबल कोट्स `"` स्ट्रिंग्स परिभाषित करण्यासाठी
-- **साठवते** मजकूर डेटा ज्यामध्ये अक्षरे, संख्या आणि चिन्हे समाविष्ट असू शकतात
-- **असाइन करते** स्ट्रिंग मूल्ये व्हेरिएबल्समध्ये नंतर वापरण्यासाठी
-- **आवश्यक आहे** मजकूर आणि व्हेरिएबल नावे वेगळे करण्यासाठी कोट्स
+- **Single quotes `'` किंवा double quotes `"` वापरते** strings define करण्यासाठी
+- **मजकूर डेटा साठवते** ज्यामध्ये अक्षरे, संख्या आणि चिन्हे समाविष्ट असतात
+- **Strings ला variables मध्ये assign करते** जे नंतर वापरले जाऊ शकतात
+- **Quotes आवश्यक आहेत** मजकूर variable नावांपासून वेगळा करण्यासाठी
+
+Strings लिहिताना quotes वापरणे लक्षात ठेवा, अन्यथा JavaScript त्याला variable नाव समजेल.
+
+```mermaid
+flowchart TD
+    A["📝 Strings"] --> B["Single Quotes"]
+    A --> C["Double Quotes"]
+    A --> D["Template Literals"]
+    
+    B --> B1["'Hello World'"]
+    C --> C1["\"Hello World\""]
+    D --> D1["`Hello \${name}`"]
+    
+    E["String Operations"] --> F["Concatenation"]
+    E --> G["Template Insertion"]
+    E --> H["Length & Methods"]
+    
+    F --> F1["'Hello' + ' ' + 'World'"]
+    G --> G1["`Hello \${firstName} \${lastName}`"]
+    H --> H1["myString.length"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style D fill:#e8f5e8
+    style G fill:#e8f5e8
+```
+
+### Strings चे स्वरूप
+
+String manipulation तुम्हाला मजकूर घटक एकत्र करण्याची, variables समाविष्ट करण्याची आणि प्रोग्रामच्या स्थितीला प्रतिसाद देणारी dynamic सामग्री तयार करण्याची परवानगी देते. ही तंत्रज्ञान तुम्हाला प्रोग्रामेटिक पद्धतीने मजकूर तयार करण्य
+दोन किंवा अधिक स्ट्रिंग्स **जोडण्यासाठी**, किंवा त्यांना एकत्र करण्यासाठी, `+` ऑपरेटर वापरा.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
 
-स्ट्रिंग लिहिताना कोट्स वापरणे लक्षात ठेवा, अन्यथा JavaScript त्याला व्हेरिएबल नाव समजेल.
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+```
+
+**पायरी-पायरीने काय घडत आहे ते समजून घ्या:**
+- **एकत्र करते** अनेक स्ट्रिंग्स `+` ऑपरेटर वापरून
+- **जोडते** स्ट्रिंग्स थेट एकत्र, पहिल्या उदाहरणात जागा न ठेवता
+- **जोडते** वाचनीयतेसाठी स्ट्रिंग्समध्ये जागा `" "` 
+- **घालते** योग्य स्वरूपासाठी अल्पविरामासारखे चिन्ह
 
-### स्ट्रिंग्सचे स्वरूपन
+✅ का `1 + 1 = 2` जावास्क्रिप्टमध्ये, पण `'1' + '1' = 11?` विचार करा. `'1' + 1` बद्दल काय?
 
-स्ट्रिंग मॅनिप्युलेशन तुम्हाला मजकूर घटक एकत्र करण्याची, व्हेरिएबल्स समाविष्ट करण्याची आणि प्रोग्रामच्या स्थितीला प्रतिसाद देणारी डायनॅमिक सामग्री तयार करण्याची परवानगी देते. ही तंत्रज्ञान तुम्हाला प्रोग्रामॅटिक पद्धतीने मजकूर तयार करण्यास सक्षम करते.
+**टेम्पलेट लिटरल्स** स्ट्रिंग्स स्वरूपित करण्याचा आणखी एक मार्ग आहे, परंतु कोट्सऐवजी बॅकटिक वापरला जातो. जे काही साधा मजकूर नाही ते `${ }` प्लेसहोल्डरमध्ये ठेवले पाहिजे. यामध्ये स्ट्रिंग्स असलेल्या कोणत्याही व्हेरिएबल्सचा समावेश होतो.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
 
-अनेकदा तुम्हाला अनेक स्ट्रिंग्स एकत्र जोडण्याची आवश्यकता असते – या प्रक्रियेला कन्सॅटिनेशन म्हणतात.
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
 
-दोन किंवा अधिक स्ट्रिंग्स **जोडण्यासाठी
-तुम्ही तुमचे फॉर्मॅटिंग उद्दिष्टे कोणत्याही पद्धतीने साध्य करू शकता, परंतु टेम्पलेट लिटरल्स जागा आणि ओळींचे ब्रेक्स जसे आहेत तसे ठेवतात.
+**प्रत्येक भाग समजून घेऊया:**
+- **वापरते** बॅकटिक्स `` ` `` नियमित कोट्सऐवजी टेम्पलेट लिटरल्स तयार करण्यासाठी
+- **थेट समाविष्ट करते** व्हेरिएबल्स `${}` प्लेसहोल्डर सिंटॅक्स वापरून
+- **जतन करते** जागा आणि स्वरूप जसे लिहिले आहे तसेच
+- **सुलभ करते** व्हेरिएबल्ससह जटिल स्ट्रिंग्स तयार करण्याचा स्वच्छ मार्ग
+
+तुमच्या स्वरूपनाच्या उद्दिष्टांसाठी तुम्ही कोणताही पद्धत वापरू शकता, परंतु टेम्पलेट लिटरल्स जागा आणि ओळींचे ब्रेक जसे आहे तसे ठेवतील.
+
+✅ तुम्ही टेम्पलेट लिटरल्स कधी वापराल आणि साधा स्ट्रिंग कधी वापराल?
+
+### 🔤 **स्ट्रिंग मास्टरी चेक: टेक्स्ट मॅनिप्युलेशन आत्मविश्वास**
+
+**तुमच्या स्ट्रिंग कौशल्यांचे मूल्यांकन करा:**
+- तुम्ही स्पष्ट करू शकता का की `'1' + '1'` का `'11'` आहे `2` ऐवजी?
+- कोणती स्ट्रिंग पद्धत तुम्हाला अधिक वाचनीय वाटते: कन्सॅटनेशन की टेम्पलेट लिटरल्स?
+- जर तुम्ही स्ट्रिंगभोवती कोट्स विसरलात तर काय होईल?
+
+```mermaid
+stateDiagram-v2
+    [*] --> PlainText: "Hello"
+    [*] --> Variable: name = "Alice"
+    PlainText --> Concatenated: + " " + name
+    Variable --> Concatenated
+    PlainText --> Template: `Hello ${name}`
+    Variable --> Template
+    Concatenated --> Result: "Hello Alice"
+    Template --> Result
+    
+    note right of Concatenated
+        Traditional method
+        More verbose
+    end note
+    
+    note right of Template
+        Modern ES6 syntax
+        Cleaner & more readable
+    end note
+```
 
-✅ टेम्पलेट लिटरल्स आणि साध्या स्ट्रिंगचा वापर कधी कराल?
+> **प्रो टिप**: टेम्पलेट लिटरल्स सामान्यतः जटिल स्ट्रिंग बिल्डिंगसाठी प्राधान्य दिले जातात कारण ते अधिक वाचनीय आहेत आणि मल्टी-लाइन स्ट्रिंग्स उत्तम प्रकारे हाताळतात!
 
-### बूलियन
+### बूलियन्स
 
-बूलियन डेटा प्रकार सर्वात सोपा आहे: यात फक्त दोन मूल्ये असू शकतात – `true` किंवा `false`. ही बायनरी लॉजिक प्रणाली 19व्या शतकातील गणितज्ञ जॉर्ज बूल यांच्या कार्यावर आधारित आहे, ज्यांनी बूलियन बीजगणित विकसित केले.
+बूलियन्स डेटा प्रकारातील सर्वात सोपी फॉर्म दर्शवतात: ते फक्त दोन मूल्ये ठेवू शकतात – `true` किंवा `false`. ही बायनरी लॉजिक प्रणाली 19व्या शतकातील गणितज्ञ जॉर्ज बूल यांच्या कार्याशी संबंधित आहे, ज्यांनी बूलियन बीजगणित विकसित केले.
 
-त्यांच्या साधेपणामुळेही, बूलियन प्रोग्राम लॉजिकसाठी अत्यावश्यक आहेत. ते तुमच्या कोडला अटींवर आधारित निर्णय घेण्यास सक्षम करतात – जसे की वापरकर्ता लॉग इन आहे का, बटण क्लिक केले आहे का, किंवा विशिष्ट निकष पूर्ण झाले आहेत का.
+त्यांच्या साधेपणानंतरही, बूलियन्स प्रोग्राम लॉजिकसाठी अत्यावश्यक आहेत. ते तुमच्या कोडला अटींवर आधारित निर्णय घेण्यास सक्षम करतात – वापरकर्ता लॉग इन आहे का, बटण क्लिक केले गेले आहे का, किंवा विशिष्ट निकष पूर्ण झाले आहेत का.
 
-बूलियन फक्त दोन मूल्ये असू शकतात: `true` किंवा `false`. बूलियन अटी पूर्ण झाल्यावर कोणते कोड चालवायचे हे ठरवण्यासाठी मदत करतात. अनेक वेळा, [ऑपरेटर](../../../../2-js-basics/1-data-types) बूलियनचे मूल्य सेट करण्यासाठी मदत करतात आणि तुम्ही अनेकदा पाहाल की व्हेरिएबल्स इनिशियलाइज केले जात आहेत किंवा त्यांचे मूल्य ऑपरेटरसह अपडेट केले जात आहे.
+बूलियन्स फक्त दोन मूल्ये असू शकतात: `true` किंवा `false`. बूलियन्स विशिष्ट अटी पूर्ण झाल्यावर कोणत्या ओळींचा कोड चालवायचा आहे हे ठरविण्यास मदत करू शकतात. अनेक प्रकरणांमध्ये, [ऑपरेटर](../../../../2-js-basics/1-data-types) बूलियनचे मूल्य सेट करण्यासाठी मदत करतात आणि तुम्ही अनेकदा व्हेरिएबल्स सुरू करताना किंवा त्यांचे मूल्य ऑपरेटरसह अपडेट करताना पाहाल.
 
 ```javascript
 let myTrueBool = true;
@@ -248,42 +451,174 @@ let myFalseBool = false;
 ```
 
 **वरील उदाहरणात, आम्ही:**
-- **निर्मिती केली** एक व्हेरिएबल ज्यामध्ये बूलियन मूल्य `true` साठवले आहे
-- **प्रदर्शन केले** बूलियन मूल्य `false` कसे साठवायचे
+- **तयार केले** एक व्हेरिएबल जे बूलियन मूल्य `true` साठवते
+- **दाखवले** बूलियन मूल्य `false` कसे साठवायचे
 - **वापरले** अचूक कीवर्ड्स `true` आणि `false` (कोट्सची गरज नाही)
-- **तयार केले** हे व्हेरिएबल्स अटींवर आधारित स्टेटमेंट्ससाठी
+- **तयार केले** हे व्हेरिएबल्स अटींच्या विधानांमध्ये वापरण्यासाठी
+
+✅ जर एखाद्या व्हेरिएबलला बूलियन `true` म्हणून मूल्यांकन केले गेले तर त्याला 'truthy' मानले जाऊ शकते. गंमत म्हणजे, जावास्क्रिप्टमध्ये, [सर्व मूल्ये truthy असतात जोपर्यंत ती स्पष्टपणे falsy म्हणून परिभाषित केलेली नसतात](https://developer.mozilla.org/docs/Glossary/Truthy).
+
+```mermaid
+flowchart LR
+    A["🔘 Boolean Values"] --> B["true"]
+    A --> C["false"]
+    
+    D["Truthy Values"] --> D1["'hello'"]
+    D --> D2["42"]
+    D --> D3["[]"]
+    D --> D4["{}"]
+    
+    E["Falsy Values"] --> E1["false"]
+    E --> E2["0"]
+    E --> E3["''"]
+    E --> E4["null"]
+    E --> E5["undefined"]
+    E --> E6["NaN"]
+    
+    style B fill:#e8f5e8
+    style C fill:#ffebee
+    style D fill:#e3f2fd
+    style E fill:#fff3e0
+```
+
+### 🎯 **बूलियन लॉजिक चेक: निर्णय घेण्याची कौशल्ये**
 
-✅ एखाद्या व्हेरिएबलला 'truthy' मानले जाऊ शकते जर ते बूलियन `true` म्हणून मूल्यांकन करते. मजेशीर गोष्ट म्हणजे, JavaScript मध्ये, [सर्व मूल्ये truthy असतात जोपर्यंत त्यांना falsy म्हणून परिभाषित केले जात नाही](https://developer.mozilla.org/docs/Glossary/Truthy).
+**तुमच्या बूलियन समजून घेण्याची चाचणी करा:**
+- तुम्हाला का वाटते की जावास्क्रिप्टमध्ये `true` आणि `false` व्यतिरिक्त "truthy" आणि "falsy" मूल्ये आहेत?
+- तुम्ही अंदाज लावू शकता का की यापैकी कोणते falsy आहे: `0`, `"0"`, `[]`, `"false"`?
+- बूलियन्स प्रोग्राम फ्लो नियंत्रित करण्यात कसे उपयुक्त ठरू शकतात?
+
+```mermaid
+pie title "Common Boolean Use Cases"
+    "Conditional Logic" : 40
+    "User State" : 25
+    "Feature Toggles" : 20
+    "Validation" : 15
+```
+
+> **लक्षात ठेवा**: जावास्क्रिप्टमध्ये फक्त 6 मूल्ये falsy आहेत: `false`, `0`, `""`, `null`, `undefined`, आणि `NaN`. बाकी सर्व truthy आहेत!
 
 ---
 
+## 📊 **तुमचे डेटा प्रकार टूलकिट सारांश**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Data Types"] --> B["📦 Variables"]
+    A --> C["🔢 Numbers"]
+    A --> D["📝 Strings"]
+    A --> E["🔘 Booleans"]
+    
+    B --> B1["let mutable"]
+    B --> B2["const immutable"]
+    
+    C --> C1["42, 3.14, -5"]
+    C --> C2["+ - * / %"]
+    
+    D --> D1["'quotes' or \\\"quotes\\\""]
+    D --> D2["`template literals`"]
+    
+    E --> E1["true or false"]
+    E --> E2["truthy vs falsy"]
+    
+    F["⚡ Key Concepts"] --> F1["Type matters for operations"]
+    F --> F2["JavaScript is dynamically typed"]
+    F --> F3["Variables can change types"]
+    F --> F4["Naming is case-sensitive"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ## GitHub Copilot Agent Challenge 🚀
 
 Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** एक वैयक्तिक माहिती व्यवस्थापक तयार करा जो तुम्ही या धड्यात शिकलेल्या सर्व JavaScript डेटा प्रकारांचे प्रदर्शन करतो आणि वास्तविक जीवनातील डेटा परिस्थिती हाताळतो.
+**वर्णन:** एक वैयक्तिक माहिती व्यवस्थापक तयार करा जो तुम्ही या धड्यात शिकलेल्या सर्व जावास्क्रिप्ट डेटा प्रकारांचे प्रदर्शन करतो आणि वास्तविक डेटा परिस्थिती हाताळतो.
 
-**प्रॉम्प्ट:** एक JavaScript प्रोग्राम तयार करा जो एक वापरकर्ता प्रोफाइल ऑब्जेक्ट तयार करतो ज्यामध्ये: व्यक्तीचे नाव (string), वय (number), विद्यार्थी स्थिती (boolean), आवडते रंग एक array म्हणून, आणि एक पत्ता ऑब्जेक्ट ज्यामध्ये स्ट्रीट, शहर, आणि झिप कोड गुणधर्म आहेत. प्रोफाइल माहिती प्रदर्शित करण्यासाठी आणि वैयक्तिक फील्ड्स अपडेट करण्यासाठी फंक्शन्स समाविष्ट करा. स्ट्रिंग कन्सॅटनेशन, टेम्पलेट लिटरल्स, वयासह अंकगणितीय ऑपरेशन्स, आणि विद्यार्थी स्थितीसाठी बूलियन लॉजिक प्रदर्शित करा.
+**प्रॉम्प्ट:** एक जावास्क्रिप्ट प्रोग्राम तयार करा जो एक युजर प्रोफाइल ऑब्जेक्ट तयार करतो ज्यामध्ये समाविष्ट आहे: व्यक्तीचे नाव (स्ट्रिंग), वय (संख्या), विद्यार्थी स्थिती (बूलियन), आवडते रंग एक अ‍ॅरे म्हणून, आणि एक पत्ता ऑब्जेक्ट ज्यामध्ये स्ट्रीट, शहर, आणि झिप कोड गुणधर्म आहेत. प्रोफाइल माहिती प्रदर्शित करण्यासाठी आणि वैयक्तिक फील्ड्स अपडेट करण्यासाठी फंक्शन्स समाविष्ट करा. स्ट्रिंग कन्सॅटनेशन, टेम्पलेट लिटरल्स, वयासह अंकगणितीय ऑपरेशन्स, आणि विद्यार्थी स्थितीसाठी बूलियन लॉजिक प्रदर्शित करा.
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
+[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
-## 🚀 Challenge
+## 🚀 आव्हान
 
-JavaScript मध्ये काही वर्तन आहेत जे डेव्हलपर्सना गोंधळात टाकू शकतात. येथे एक क्लासिक उदाहरण आहे: तुमच्या ब्राउझर कन्सोलमध्ये हे टाइप करून पहा: `let age = 1; let Age = 2; age == Age` आणि परिणाम पाहा. ते `false` परत करते – तुम्ही कारण शोधू शकता का?
+जावास्क्रिप्टमध्ये काही वर्तन आहेत जे विकसकांना गोंधळात टाकू शकतात. येथे एक क्लासिक उदाहरण आहे: तुमच्या ब्राउझर कन्सोलमध्ये हे टाइप करा: `let age = 1; let Age = 2; age == Age` आणि परिणाम पाहा. ते `false` परत करते – तुम्ही का ते ठरवू शकता?
 
-हे JavaScript मधील अनेक वर्तनांपैकी एक आहे जे समजून घेण्यासारखे आहे. या विचित्र गोष्टींची ओळख तुम्हाला अधिक विश्वासार्ह कोड लिहिण्यास आणि समस्यांचे निराकरण अधिक प्रभावीपणे करण्यास मदत करेल.
+हे जावास्क्रिप्टच्या अनेक वर्तनांपैकी एक आहे जे समजून घेण्यासारखे आहे. या विचित्र गोष्टींची ओळख तुम्हाला अधिक विश्वासार्ह कोड लिहिण्यास आणि समस्यांचे निराकरण अधिक प्रभावीपणे करण्यास मदत करेल.
 
-## Post-Lecture Quiz
-[Post-lecture quiz](https://ff-quizzes.netlify.app)
+## पोस्ट-लेक्चर क्विझ
+[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app)
 
 ## पुनरावलोकन आणि स्व-अभ्यास
 
-[JavaScript सरावासाठी या यादीवर](https://css-tricks.com/snippets/javascript/) एक नजर टाका आणि एक प्रयत्न करा. तुम्ही काय शिकलात?
+[जावास्क्रिप्ट सराव यादी](https://css-tricks.com/snippets/javascript/) पहा आणि एक प्रयत्न करा. तुम्ही काय शिकलात?
 
 ## असाइनमेंट
 
 [डेटा प्रकार सराव](assignment.md)
 
+## 🚀 तुमचा जावास्क्रिप्ट डेटा प्रकार मास्टरी टाइमलाइन
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] तुमच्या ब्राउझर कन्सोलमध्ये 3 वेगवेगळ्या डेटा प्रकारांसह व्हेरिएबल्स तयार करा
+- [ ] आव्हानाचा प्रयत्न करा: `let age = 1; let Age = 2; age == Age` आणि का false आहे ते शोधा
+- [ ] तुमचे नाव आणि आवडता क्रमांक वापरून स्ट्रिंग कन्सॅटनेशन सराव करा
+- [ ] जेव्हा तुम्ही स्ट्रिंगमध्ये संख्या जोडता तेव्हा काय होते ते तपासा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि कोणतेही गोंधळात टाकणारे संकल्पना पुनरावलोकन करा
+- [ ] दोन संख्यांची बेरीज, वजाबाकी, गुणाकार, आणि भागाकार करणारा एक मिनी कॅल्क्युलेटर तयार करा
+- [ ] टेम्पलेट लिटरल्स वापरून एक साधा नाव स्वरूपक तयार करा
+- [ ] `==` आणि `===` तुलना ऑपरेटरमधील फरक एक्सप्लोर करा
+- [ ] वेगवेगळ्या डेटा प्रकारांमध्ये रूपांतर सराव करा
+
+### 📅 **तुमचा आठवडाभराचा जावास्क्रिप्ट पाया**
+- [ ] आत्मविश्वासाने आणि सर्जनशीलतेने असाइनमेंट पूर्ण करा
+- [ ] शिकलेल्या सर्व डेटा प्रकारांचा वापर करून वैयक्तिक प्रोफाइल ऑब्जेक्ट तयार करा
+- [ ] [CSS-Tricks मधील जावास्क्रिप्ट सराव](https://css-tricks.com/snippets/javascript/) करा
+- [ ] बूलियन लॉजिक वापरून एक साधा फॉर्म व्हॅलिडेटर तयार करा
+- [ ] अ‍ॅरे आणि ऑब्जेक्ट डेटा प्रकारांसह प्रयोग करा (आगामी धड्यांचा पूर्वावलोकन)
+- [ ] जावास्क्रिप्ट समुदायात सामील व्हा आणि डेटा प्रकारांबद्दल प्रश्न विचारा
+
+### 🌟 **तुमचा महिनाभराचा बदल**
+- [ ] मोठ्या प्रोग्रामिंग प्रोजेक्ट्समध्ये डेटा प्रकार ज्ञान समाकलित करा
+- [ ] वास्तविक अनुप्रयोगांमध्ये प्रत्येक डेटा प्रकार कधी आणि का वापरायचा ते समजून घ्या
+- [ ] इतर नवशिक्यांना जावास्क्रिप्ट मूलभूत गोष्टी समजून घेण्यास मदत करा
+- [ ] विविध प्रकारच्या युजर डेटाचा व्यवस्थापन करणारा एक छोटा अनुप्रयोग तयार करा
+- [ ] टाइप कोएर्शन आणि स्ट्रिक्ट इक्वॅलिटीसारख्या प्रगत डेटा प्रकार संकल्पना एक्सप्लोर करा
+- [ ] ओपन सोर्स जावास्क्रिप्ट प्रोजेक्ट्समध्ये दस्तऐवज सुधारणा करून योगदान द्या
+
+### 🧠 **अंतिम डेटा प्रकार मास्टरी चेक-इन**
+
+**तुमच्या जावास्क्रिप्ट पायाचा उत्सव साजरा करा:**
+- कोणता डेटा प्रकार तुम्हाला त्याच्या वर्तनाच्या दृष्टीने सर्वात जास्त आश्चर्यचकित करतो?
+- तुम्ही व्हेरिएबल्स आणि कॉन्स्टंट्स मित्राला स्पष्ट करण्यात किती आरामदायक आहात?
+- जावास्क्रिप्टच्या टाइप सिस्टमबद्दल तुम्हाला सर्वात मनोरंजक गोष्ट काय सापडली?
+- तुम्ही या मूलभूत गोष्टींसह कोणता वास्तविक अनुप्रयोग तयार करण्याची कल्पना करू शकता?
+
+```mermaid
+journey
+    title Your JavaScript Confidence Journey
+    section Today
+      Confused: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Understanding: 5: You
+      Building: 5: You
+    section Next Month
+      Problem Solving: 5: You
+      Teaching Others: 5: You
+      Real Projects: 5: You
+```
+
+> 💡 **तुम्ही पाया तयार केला आहे!** डेटा प्रकार समजून घेणे म्हणजे कथा लिहिण्यापूर्वी वर्णमाला शिकणे. तुम्ही लिहिलेला प्रत्येक जावास्क्रिप्ट प्रोग्राम या मूलभूत संकल्पनांचा वापर करेल. तुम्हाला आता परस्परसंवादी वेबसाइट्स, डायनॅमिक अनुप्रयोग तयार करण्यासाठी आणि कोडसह वास्तविक समस्यांचे निराकरण करण्यासाठी बिल्डिंग ब्लॉक्स मिळाले आहेत. जावास्क्रिप्टच्या अद्भुत जगात स्वागत आहे! 🎉
+
 ---
 
 **अस्वीकरण**:  
diff --git a/translations/mr/2-js-basics/2-functions-methods/README.md b/translations/mr/2-js-basics/2-functions-methods/README.md
index 83385ab0d5..75b3ad3514 100644
--- a/translations/mr/2-js-basics/2-functions-methods/README.md
+++ b/translations/mr/2-js-basics/2-functions-methods/README.md
@@ -1,43 +1,93 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "ec43b53e8e015cdabfd3ad877b3c28e5",
-  "translation_date": "2025-10-22T15:47:34+00:00",
+  "original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
+  "translation_date": "2025-11-03T14:12:55+00:00",
   "source_file": "2-js-basics/2-functions-methods/README.md",
   "language_code": "mr"
 }
 -->
-# JavaScript मूलभूत गोष्टी: पद्धती आणि फंक्शन्स
-
-![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.mr.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
+# जावास्क्रिप्ट मूलभूत गोष्टी: पद्धती आणि फंक्शन्स
+
+![जावास्क्रिप्ट मूलभूत गोष्टी - फंक्शन्स](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.mr.png)
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
+
+```mermaid
+journey
+    title Your JavaScript Functions Adventure
+    section Foundation
+      Function Syntax: 5: You
+      Calling Functions: 4: You
+      Parameters & Arguments: 5: You
+    section Advanced Concepts
+      Return Values: 4: You
+      Default Parameters: 5: You
+      Function Composition: 4: You
+    section Modern JavaScript
+      Arrow Functions: 5: You
+      Anonymous Functions: 4: You
+      Higher-Order Functions: 5: You
+```
 
 ## व्याख्यानपूर्व प्रश्नमंजुषा
 [व्याख्यानपूर्व प्रश्नमंजुषा](https://ff-quizzes.netlify.app)
 
-सतत एकच कोड पुन्हा पुन्हा लिहिणे हे प्रोग्रामिंगमधील सर्वात सामान्य त्रासांपैकी एक आहे. फंक्शन्स या समस्येचे निराकरण करतात कारण ते कोड पुनर्वापर करण्यायोग्य ब्लॉक्समध्ये पॅकेज करण्याची परवानगी देतात. फंक्शन्स म्हणजे हेन्री फोर्डच्या असेंब्ली लाइनला क्रांतिकारक बनवणाऱ्या प्रमाणित भागांसारखे आहेत – एकदा तुम्ही विश्वासार्ह घटक तयार केला की, तुम्ही तो पुन्हा तयार न करता आवश्यकतेनुसार वापरू शकता.
+प्रोग्रामिंगमध्ये वारंवार एकच कोड लिहिणे ही एक सामान्य निराशा आहे. फंक्शन्स या समस्येचे निराकरण करतात कारण ते कोड पुनर्वापर करण्यायोग्य ब्लॉक्समध्ये पॅकेज करण्याची परवानगी देतात. फंक्शन्स म्हणजे हेन्री फोर्डच्या असेंब्ली लाइनला क्रांतिकारी बनवणाऱ्या मानक भागांसारखे – एकदा तुम्ही विश्वासार्ह घटक तयार केला की, तुम्ही तो पुन्हा तयार न करता जिथे आवश्यक असेल तिथे वापरू शकता.
 
-फंक्शन्स तुम्हाला कोडचे तुकडे एकत्र करण्याची परवानगी देतात जेणेकरून तुम्ही ते तुमच्या प्रोग्राममध्ये पुन्हा वापरू शकता. एकाच लॉजिकची कॉपी-पेस्ट करण्याऐवजी, तुम्ही एकदा फंक्शन तयार करू शकता आणि आवश्यकतेनुसार ते कॉल करू शकता. ही पद्धत तुमचा कोड व्यवस्थित ठेवते आणि अपडेट्स खूप सोपे बनवते.
+फंक्शन्स तुम्हाला कोडचे तुकडे एकत्र करण्याची परवानगी देतात जेणेकरून तुम्ही ते तुमच्या प्रोग्राममध्ये पुन्हा वापरू शकता. एकाच लॉजिकची कॉपी आणि पेस्ट करण्याऐवजी, तुम्ही एकदा फंक्शन तयार करू शकता आणि आवश्यकतेनुसार ते कॉल करू शकता. ही पद्धत तुमचा कोड व्यवस्थित ठेवते आणि अपडेट्स करणे खूप सोपे बनवते.
 
-या धड्यात, तुम्ही स्वतःचे फंक्शन्स कसे तयार करायचे, त्यांना माहिती कशी द्यायची आणि उपयुक्त परिणाम कसे मिळवायचे हे शिकाल. तुम्ही फंक्शन्स आणि पद्धतींमधील फरक शोधाल, आधुनिक सिंटॅक्स पद्धती शिकाल आणि फंक्शन्स इतर फंक्शन्ससह कसे कार्य करू शकतात हे पाहाल. आपण हे संकल्पना टप्प्याटप्प्याने तयार करू.
+या धड्यात, तुम्ही स्वतःचे फंक्शन्स कसे तयार करायचे, त्यांना माहिती कशी द्यायची आणि उपयुक्त परिणाम कसे मिळवायचे हे शिकाल. तुम्ही फंक्शन्स आणि पद्धतींमधील फरक शोधाल, आधुनिक सिंटॅक्स पद्धती शिकाल आणि फंक्शन्स इतर फंक्शन्ससह कसे कार्य करू शकतात हे पाहाल. आपण या संकल्पना टप्प्याटप्प्याने तयार करू.
 
-[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
+[![पद्धती आणि फंक्शन्स](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "पद्धती आणि फंक्शन्स")
 
 > 🎥 वरील प्रतिमेवर क्लिक करा पद्धती आणि फंक्शन्सबद्दल व्हिडिओसाठी.
 
-> तुम्ही [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) वर हा धडा घेऊ शकता!
+> तुम्ही हा धडा [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) वर घेऊ शकता!
+
+```mermaid
+mindmap
+  root((JavaScript Functions))
+    Basic Concepts
+      Declaration
+        Traditional syntax
+        Arrow function syntax
+      Calling
+        Using parentheses
+        Parentheses required
+    Parameters
+      Input Values
+        Multiple parameters
+        Default values
+      Arguments
+        Values passed in
+        Can be any type
+    Return Values
+      Output Data
+        return statement
+        Exit function
+      Use Results
+        Store in variables
+        Chain functions
+    Advanced Patterns
+      Higher-Order
+        Functions as parameters
+        Callbacks
+      Anonymous
+        No name needed
+        Inline definition
+```
 
 ## फंक्शन्स
 
-फंक्शन म्हणजे विशिष्ट कार्य करणारा स्वयंपूर्ण कोड ब्लॉक. हे लॉजिक समाविष्ट करते जे तुम्हाला आवश्यक असताना अंमलात आणता येते.
+फंक्शन म्हणजे विशिष्ट कार्य करणारा स्वयंपूर्ण कोड ब्लॉक. हे लॉजिक समाविष्ट करते जे तुम्ही आवश्यकतेनुसार अंमलात आणू शकता.
 
-तुमच्या प्रोग्राममध्ये एकच कोड अनेक वेळा लिहिण्याऐवजी, तुम्ही तो फंक्शनमध्ये पॅकेज करू शकता आणि तुम्हाला आवश्यक असताना ते फंक्शन कॉल करू शकता. ही पद्धत तुमचा कोड स्वच्छ ठेवते आणि अपडेट्स खूप सोपे बनवते. विचार करा की तुम्हाला तुमच्या कोडबेसमधील 20 वेगवेगळ्या ठिकाणी विखुरलेले लॉजिक बदलायचे असल्यास देखभाल करणे किती आव्हानात्मक होईल.
+तुमच्या प्रोग्राममध्ये एकच कोड अनेक वेळा लिहिण्याऐवजी, तुम्ही तो फंक्शनमध्ये पॅकेज करू शकता आणि तुम्हाला आवश्यक असताना ते फंक्शन कॉल करू शकता. ही पद्धत तुमचा कोड स्वच्छ ठेवते आणि अपडेट्स करणे खूप सोपे बनवते. विचार करा की तुम्हाला तुमच्या कोडबेसमधील 20 वेगवेगळ्या ठिकाणी विखुरलेले लॉजिक बदलायचे असल्यास देखभाल करणे किती आव्हानात्मक होईल.
 
-तुमच्या फंक्शन्सचे वर्णनात्मक नाव देणे आवश्यक आहे. चांगल्या नावाचा फंक्शन त्याचा हेतू स्पष्टपणे सांगतो – जेव्हा तुम्ही `cancelTimer()` पाहता, तेव्हा तुम्हाला लगेच समजते की ते काय करते, जसे की स्पष्टपणे लेबल असलेले बटण तुम्हाला सांगते की तुम्ही त्यावर क्लिक केल्यावर काय होईल.
+तुमच्या फंक्शन्सचे वर्णनात्मक नाव देणे आवश्यक आहे. चांगल्या नावाचा फंक्शन त्याचा हेतू स्पष्टपणे सांगतो – जेव्हा तुम्ही `cancelTimer()` पाहता, तेव्हा तुम्हाला लगेच समजते की ते काय करते, जसे की स्पष्टपणे लेबल केलेले बटण तुम्हाला सांगते की तुम्ही त्यावर क्लिक केल्यावर काय होईल.
 
 ## फंक्शन तयार करणे आणि कॉल करणे
 
-फंक्शन कसे तयार करायचे ते पाहूया. सिंटॅक्स एकसंध पद्धतीचे अनुसरण करते:
+आम्ही फंक्शन कसे तयार करायचे ते तपासूया. सिंटॅक्स एकसारख्या पद्धतीचे अनुसरण करते:
 
 ```javascript
 function nameOfFunction() { // function definition
@@ -46,12 +96,12 @@ function nameOfFunction() { // function definition
 ```
 
 याचे विश्लेषण करूया:
-- `function` कीवर्ड JavaScript ला सांगतो "अरे, मी एक फंक्शन तयार करत आहे!"
-- `nameOfFunction` येथे तुम्ही तुमच्या फंक्शनला वर्णनात्मक नाव देता
-- कंस `()` येथे तुम्ही पॅरामीटर्स जोडू शकता (आम्ही लवकरच त्यावर येऊ)
-- कर्ली ब्रेसेस `{}` मध्ये प्रत्यक्ष कोड असतो जो तुम्ही फंक्शन कॉल केल्यावर चालतो
+- `function` कीवर्ड जावास्क्रिप्टला सांगतो "अरे, मी एक फंक्शन तयार करत आहे!"
+- `nameOfFunction` हे तुमच्या फंक्शनला वर्णनात्मक नाव देण्याचे ठिकाण आहे
+- कंस `()` हे जिथे तुम्ही पॅरामीटर्स जोडू शकता (आम्ही लवकरच त्यावर येऊ)
+- कर्ली ब्रेसेस `{}` वास्तविक कोड समाविष्ट करतात जेव्हा तुम्ही फंक्शन कॉल करता तेव्हा चालते
 
-चला एक साधे ग्रीटिंग फंक्शन तयार करूया आणि हे कृतीत पाहूया:
+चला एक साधे ग्रीटिंग फंक्शन तयार करूया आणि ते कसे कार्य करते ते पाहूया:
 
 ```javascript
 function displayGreeting() {
@@ -59,34 +109,58 @@ function displayGreeting() {
 }
 ```
 
-हे फंक्शन "Hello, world!" कन्सोलवर प्रिंट करते. एकदा तुम्ही ते परिभाषित केले की, तुम्ही ते आवश्यकतेनुसार कितीही वेळा वापरू शकता.
+हे फंक्शन "Hello, world!" कन्सोलवर प्रिंट करते. एकदा तुम्ही ते परिभाषित केल्यानंतर, तुम्ही ते आवश्यकतेनुसार कितीही वेळा वापरू शकता.
 
-तुमचे फंक्शन अंमलात आणण्यासाठी (किंवा "कॉल" करण्यासाठी), त्याचे नाव कंसासह लिहा. JavaScript तुम्हाला तुमचे फंक्शन कॉल करण्यापूर्वी किंवा नंतर परिभाषित करण्याची परवानगी देते – JavaScript इंजिन अंमलबजावणी क्रम हाताळेल.
+तुमचे फंक्शन अंमलात आणण्यासाठी (किंवा "कॉल" करण्यासाठी), त्याचे नाव कंसासह लिहा. जावास्क्रिप्ट तुम्हाला तुमचे फंक्शन कॉल करण्यापूर्वी किंवा नंतर परिभाषित करण्याची परवानगी देते – जावास्क्रिप्ट इंजिन अंमलबजावणी क्रम हाताळेल.
 
 ```javascript
 // calling our function
 displayGreeting();
 ```
 
-जेव्हा तुम्ही ही ओळ चालवता, तेव्हा तुमच्या `displayGreeting` फंक्शनमधील सर्व कोड अंमलात आणते, "Hello, world!" तुमच्या ब्राउझरच्या कन्सोलमध्ये प्रदर्शित करते. तुम्ही हे फंक्शन वारंवार कॉल करू शकता.
+जेव्हा तुम्ही ही ओळ चालवता, तेव्हा तुमच्या `displayGreeting` फंक्शनमधील सर्व कोड अंमलात आणते, तुमच्या ब्राउझरच्या कन्सोलमध्ये "Hello, world!" प्रदर्शित करते. तुम्ही हे फंक्शन वारंवार कॉल करू शकता.
+
+### 🧠 **फंक्शन मूलभूत गोष्टी तपासणी: तुमचे पहिले फंक्शन्स तयार करणे**
+
+**चला पाहूया की तुम्हाला मूलभूत फंक्शन्सबद्दल कसे वाटते:**
+- तुम्ही फंक्शन डिफिनिशन्समध्ये कर्ली ब्रेसेस `{}` का वापरतो हे स्पष्ट करू शकता का?
+- जर तुम्ही `displayGreeting` कंसांशिवाय लिहिले तर काय होईल?
+- तुम्ही एकाच फंक्शनला अनेक वेळा कॉल का करू इच्छिता?
+
+```mermaid
+flowchart TD
+    A["✏️ Define Function"] --> B["📦 Package Code"]
+    B --> C["🏷️ Give it a Name"]
+    C --> D["📞 Call When Needed"]
+    D --> E["🔄 Reuse Anywhere"]
+    
+    F["💡 Benefits"] --> F1["No code repetition"]
+    F --> F2["Easy to maintain"]
+    F --> F3["Clear organization"]
+    F --> F4["Easier testing"]
+    
+    style A fill:#e3f2fd
+    style E fill:#e8f5e8
+    style F fill:#fff3e0
+```
 
-> **टीप:** तुम्ही या धड्यांमध्ये **पद्धती** वापरत आहात. `console.log()` ही एक पद्धत आहे – मूलत: `console` ऑब्जेक्टशी संबंधित फंक्शन. मुख्य फरक असा आहे की पद्धती ऑब्जेक्ट्सशी जोडलेल्या असतात, तर फंक्शन्स स्वतंत्रपणे उभे असतात. अनेक डेव्हलपर्स अनौपचारिक संभाषणात हे शब्द परस्पर बदलून वापरतात.
+> **टीप:** तुम्ही या धड्यांमध्ये **पद्धती** वापरत आहात. `console.log()` ही एक पद्धत आहे – मूलत: एक फंक्शन जे `console` ऑब्जेक्टशी संबंधित आहे. मुख्य फरक म्हणजे पद्धती ऑब्जेक्ट्सशी जोडलेल्या असतात, तर फंक्शन्स स्वतंत्रपणे उभे असतात. अनेक विकसक अनौपचारिक संभाषणात हे शब्द परस्पर बदलून वापरतात.
 
-### फंक्शनसाठी सर्वोत्तम पद्धती
+### फंक्शन सर्वोत्तम पद्धती
 
 उत्तम फंक्शन्स लिहिण्यासाठी काही टिप्स येथे आहेत:
 
 - तुमच्या फंक्शन्सना स्पष्ट, वर्णनात्मक नावे द्या – तुमचे भविष्याचे स्वतः तुम्हाला धन्यवाद देतील!
-- **camelCasing** चा वापर करा बहु-शब्द नावांसाठी (उदा. `calculateTotal` ऐवजी `calculate_total`)
-- प्रत्येक फंक्शन एकाच गोष्टीवर लक्ष केंद्रित करून चांगले करण्यासाठी ठेवा
+- मल्टी-वर्ड नावांसाठी **camelCasing** वापरा (उदा. `calculateTotal` ऐवजी `calculate_total`)
+- प्रत्येक फंक्शन एकाच गोष्टीवर लक्ष केंद्रित करून चांगले करण्यावर लक्ष केंद्रित करा
 
 ## फंक्शनला माहिती देणे
 
-आपले `displayGreeting` फंक्शन मर्यादित आहे – ते प्रत्येकासाठी "Hello, world!" प्रदर्शित करू शकते. पॅरामीटर्स आम्हाला फंक्शन्स अधिक लवचिक आणि उपयुक्त बनवण्याची परवानगी देतात.
+आमचे `displayGreeting` फंक्शन मर्यादित आहे – ते प्रत्येकासाठी फक्त "Hello, world!" प्रदर्शित करू शकते. पॅरामीटर्स आम्हाला फंक्शन्स अधिक लवचिक आणि उपयुक्त बनवण्याची परवानगी देतात.
 
-**पॅरामीटर्स** प्लेसहोल्डर्ससारखे कार्य करतात जिथे तुम्ही प्रत्येक वेळी फंक्शन वापरता तेव्हा वेगवेगळ्या मूल्ये घालू शकता. अशा प्रकारे, एकच फंक्शन प्रत्येक कॉलवर वेगवेगळ्या माहितीवर कार्य करू शकते.
+**पॅरामीटर्स** प्लेसहोल्डर्ससारखे कार्य करतात जिथे तुम्ही प्रत्येक वेळी फंक्शन वापरता तेव्हा वेगवेगळ्या मूल्ये घालू शकता. अशा प्रकारे, समान फंक्शन प्रत्येक कॉलवर वेगवेगळ्या माहितीवर कार्य करू शकते.
 
-तुम्ही तुमचे फंक्शन परिभाषित करताना कंसामध्ये पॅरामीटर्स सूचीबद्ध करता, एकाधिक पॅरामीटर्स अल्पविरामाने वेगळे करता:
+तुम्ही तुमचे फंक्शन परिभाषित करताना पॅरामीटर्स कंसामध्ये सूचीबद्ध करता, एकाधिक पॅरामीटर्स अल्पविरामाने वेगळे करतात:
 
 ```javascript
 function name(param, param2, param3) {
@@ -94,9 +168,9 @@ function name(param, param2, param3) {
 }
 ```
 
-प्रत्येक पॅरामीटर प्लेसहोल्डरप्रमाणे कार्य करते – जेव्हा कोणी तुमचे फंक्शन कॉल करतो, तेव्हा ते प्रत्यक्ष मूल्ये प्रदान करतात जी या ठिकाणी प्लग केली जातात.
+प्रत्येक पॅरामीटर प्लेसहोल्डरप्रमाणे कार्य करते – जेव्हा कोणी तुमचे फंक्शन कॉल करतो, तेव्हा ते वास्तविक मूल्ये प्रदान करतात जी या ठिकाणी प्लग इन केली जातात.
 
-चला आपले ग्रीटिंग फंक्शन अपडेट करूया जेणेकरून ते कोणाचे नाव स्वीकारू शकेल:
+चला आमचे ग्रीटिंग फंक्शन अपडेट करूया जेणेकरून ते कोणाचे तरी नाव स्वीकारेल:
 
 ```javascript
 function displayGreeting(name) {
@@ -105,7 +179,7 @@ function displayGreeting(name) {
 }
 ```
 
-लक्षात घ्या की आम्ही बॅकटिक्स (`` ` ``) आणि `${}` वापरत आहोत जेणेकरून नाव थेट आमच्या संदेशात घालता येईल – याला टेम्पलेट लिटरल म्हणतात आणि व्हेरिएबल्स मिसळून स्ट्रिंग तयार करण्याचा हा खूप उपयुक्त मार्ग आहे.
+लक्षात घ्या की आम्ही नाव थेट आमच्या संदेशात घालण्यासाठी बॅकटिक्स (`` ` ``) आणि `${}` वापरत आहोत – याला टेम्पलेट लिटरल म्हणतात आणि व्हेरिएबल्स मिसळलेल्या स्ट्रिंग्स तयार करण्याचा हा एक खूप उपयुक्त मार्ग आहे.
 
 आता जेव्हा आम्ही आमचे फंक्शन कॉल करतो, तेव्हा आम्ही कोणतेही नाव पास करू शकतो:
 
@@ -114,13 +188,36 @@ displayGreeting('Christopher');
 // displays "Hello, Christopher!" when run
 ```
 
-JavaScript स्ट्रिंग `'Christopher'` घेते, ते `name` पॅरामीटरला असाइन करते आणि वैयक्तिकृत संदेश तयार करते "Hello, Christopher!"
+जावास्क्रिप्ट स्ट्रिंग `'Christopher'` घेते, ते `name` पॅरामीटरला असाइन करते आणि वैयक्तिकृत संदेश तयार करते "Hello, Christopher!"
+
+```mermaid
+flowchart LR
+    A["🎯 Function Call"] --> B["📥 Parameters"]
+    B --> C["⚙️ Function Body"]
+    C --> D["📤 Result"]
+    
+    A1["displayGreeting('Alice')"] --> A
+    B1["name = 'Alice'"] --> B
+    C1["Template literal\n\`Hello, \${name}!\`"] --> C
+    D1["'Hello, Alice!'"] --> D
+    
+    E["🔄 Parameter Types"] --> E1["Strings"]
+    E --> E2["Numbers"]
+    E --> E3["Booleans"]
+    E --> E4["Objects"]
+    E --> E5["Functions"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style D fill:#fff3e0
+    style E fill:#f3e5f5
+```
 
 ## डीफॉल्ट मूल्ये
 
-आपण काही पॅरामीटर्स वैकल्पिक बनवू इच्छित असल्यास काय? तेथे डीफॉल्ट मूल्ये उपयुक्त ठरतात!
+आपण काही पॅरामीटर्स वैकल्पिक बनवू इच्छित असल्यास काय करावे? तेथे डीफॉल्ट मूल्ये उपयुक्त ठरतात!
 
-म्हणून म्हणायचे आहे की लोकांना ग्रीटिंग शब्द सानुकूलित करण्याची परवानगी द्यायची आहे, परंतु जर त्यांनी एक निर्दिष्ट केला नाही, तर आम्ही फक्त "Hello" वापरू. तुम्ही डीफॉल्ट मूल्ये सेट करू शकता ज्याप्रमाणे व्हेरिएबल सेट करतो:
+म्हणून म्हणायचे आहे की लोकांना ग्रीटिंग शब्द सानुकूलित करण्यास सक्षम करायचे आहे, परंतु जर त्यांनी एक निर्दिष्ट केले नाही तर, आम्ही फक्त "Hello" बॅकअप म्हणून वापरू. तुम्ही डीफॉल्ट मूल्ये सेट करू शकता ज्याप्रमाणे व्हेरिएबल सेट करतो:
 
 ```javascript
 function displayGreeting(name, salutation='Hello') {
@@ -128,7 +225,7 @@ function displayGreeting(name, salutation='Hello') {
 }
 ```
 
-येथे, `name` आवश्यक आहे, परंतु `salutation` ला `'Hello'` चा बॅकअप मूल्य आहे जर कोणी वेगळे ग्रीटिंग प्रदान केले नाही.
+येथे, `name` अजूनही आवश्यक आहे, परंतु `salutation` ला बॅकअप मूल्य `'Hello'` आहे जर कोणी वेगळा ग्रीटिंग प्रदान केला नाही.
 
 आता आम्ही हे फंक्शन दोन वेगवेगळ्या प्रकारे कॉल करू शकतो:
 
@@ -140,13 +237,42 @@ displayGreeting('Christopher', 'Hi');
 // displays "Hi, Christopher"
 ```
 
-पहिल्या कॉलमध्ये, JavaScript डीफॉल्ट "Hello" वापरते कारण आम्ही सल्यूटेशन निर्दिष्ट केले नाही. दुसऱ्या कॉलमध्ये, ते आमचे सानुकूल "Hi" वापरते. ही लवचिकता फंक्शन्सला विविध परिस्थितींशी जुळवून घेण्यास सक्षम करते.
+पहिल्या कॉलमध्ये, जावास्क्रिप्ट डीफॉल्ट "Hello" वापरते कारण आम्ही ग्रीटिंग निर्दिष्ट केले नाही. दुसऱ्या कॉलमध्ये, ते आमचे सानुकूल "Hi" वापरते. ही लवचिकता फंक्शन्सना वेगवेगळ्या परिस्थितींशी जुळवून घेण्यास सक्षम करते.
+
+### 🎛️ **पॅरामीटर्स मास्टरी तपासणी: फंक्शन्स लवचिक बनवणे**
+
+**तुमच्या पॅरामीटर्सची समज तपासा:**
+- पॅरामीटर आणि आर्ग्युमेंटमध्ये काय फरक आहे?
+- वास्तविक-जगातील प्रोग्रामिंगमध्ये डीफॉल्ट मूल्ये का उपयुक्त आहेत?
+- जर तुम्ही पॅरामीटर्सपेक्षा जास्त आर्ग्युमेंट्स पास केले तर काय होईल याचा अंदाज तुम्ही लावू शकता का?
+
+```mermaid
+stateDiagram-v2
+    [*] --> NoParams: function greet() {}
+    [*] --> WithParams: function greet(name) {}
+    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
+    
+    NoParams --> Static: Same output always
+    WithParams --> Dynamic: Changes with input
+    WithDefaults --> Flexible: Optional customization
+    
+    Static --> [*]
+    Dynamic --> [*]
+    Flexible --> [*]
+    
+    note right of WithDefaults
+        Most flexible approach
+        Backwards compatible
+    end note
+```
+
+> **प्रो टिप**: डीफॉल्ट पॅरामीटर्स तुमचे फंक्शन्स अधिक वापरकर्ता-अनुकूल बनवतात. वापरकर्ते सेन्सिबल डीफॉल्ट्ससह पटकन सुरुवात करू शकतात, परंतु आवश्यक असल्यास सानुकूलित करू शकतात!
 
 ## रिटर्न मूल्ये
 
-आमचे फंक्शन्स आतापर्यंत फक्त कन्सोलवर संदेश प्रिंट करत आहेत, परंतु तुम्हाला काहीतरी गणना करायचे असेल आणि तुम्हाला त्याचा परिणाम परत हवा असेल तर काय?
+आमचे फंक्शन्स आतापर्यंत फक्त कन्सोलवर संदेश प्रिंट करत आहेत, पण जर तुम्हाला फंक्शन काहीतरी गणना करायचे असेल आणि तुम्हाला परिणाम परत द्यायचा असेल तर काय?
 
-तेथे **रिटर्न मूल्ये** उपयोगी ठरतात. काहीतरी फक्त प्रदर्शित करण्याऐवजी, फंक्शन तुम्हाला एक मूल्य परत देऊ शकते जे तुम्ही व्हेरिएबलमध्ये संग्रहित करू शकता किंवा तुमच्या कोडच्या इतर भागांमध्ये वापरू शकता.
+तेथे **रिटर्न मूल्ये** येतात. काहीतरी प्रदर्शित करण्याऐवजी, फंक्शन तुम्हाला एक मूल्य परत देऊ शकते जे तुम्ही व्हेरिएबलमध्ये संग्रहित करू शकता किंवा तुमच्या कोडच्या इतर भागांमध्ये वापरू शकता.
 
 मूल्य परत पाठवण्यासाठी, तुम्ही `return` कीवर्ड वापरता आणि त्यानंतर तुम्हाला जे परत करायचे आहे ते लिहा:
 
@@ -156,7 +282,7 @@ return myVariable;
 
 येथे एक महत्त्वाची गोष्ट आहे: जेव्हा फंक्शन `return` स्टेटमेंटवर पोहोचते, तेव्हा ते त्वरित चालणे थांबवते आणि ते मूल्य परत पाठवते ज्याने ते कॉल केले आहे.
 
-चला आपले ग्रीटिंग फंक्शन बदलूया जेणेकरून ते संदेश परत देईल आणि प्रिंट करणार नाही:
+चला आमचे ग्रीटिंग फंक्शन बदलूया जेणेकरून ते संदेश परत पाठवेल त्याऐवजी प्रिंट करेल:
 
 ```javascript
 function createGreetingMessage(name) {
@@ -165,7 +291,7 @@ function createGreetingMessage(name) {
 }
 ```
 
-आता ग्रीटिंग प्रिंट करण्याऐवजी, हे फंक्शन संदेश तयार करते आणि तो आम्हाला परत देते.
+आता ग्रीटिंग प्रिंट करण्याऐवजी, हे फंक्शन संदेश तयार करते आणि तो आम्हाला परत देतो.
 
 परत दिलेले मूल्य वापरण्यासाठी, आम्ही ते इतर कोणत्याही मूल्याप्रमाणे व्हेरिएबलमध्ये संग्रहित करू शकतो:
 
@@ -175,11 +301,51 @@ const greetingMessage = createGreetingMessage('Christopher');
 
 आता `greetingMessage` मध्ये "Hello, Christopher" आहे आणि आम्ही ते आमच्या कोडमध्ये कुठेही वापरू शकतो – वेबपेजवर प्रदर्शित करण्यासाठी, ईमेलमध्ये समाविष्ट करण्यासाठी किंवा दुसऱ्या फंक्शनला पास करण्यासाठी.
 
+```mermaid
+flowchart TD
+    A["🔧 Function Processing"] --> B{"return statement?"}
+    B -->|Yes| C["📤 Return Value"]
+    B -->|No| D["📭 Return undefined"]
+    
+    C --> E["💾 Store in Variable"]
+    C --> F["🔗 Use in Expression"]
+    C --> G["📞 Pass to Function"]
+    
+    D --> H["⚠️ Usually not useful"]
+    
+    I["📋 Return Value Uses"] --> I1["Calculate results"]
+    I --> I2["Validate input"]
+    I --> I3["Transform data"]
+    I --> I4["Create objects"]
+    
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style I fill:#e3f2fd
+```
+
+### 🔄 **रिटर्न मूल्ये तपासणी: परिणाम परत मिळवणे**
+
+**तुमच्या रिटर्न मूल्ये समजून घ्या:**
+- फंक्शनमधील `return` स्टेटमेंटनंतर कोडला काय होते?
+- फक्त कन्सोलवर प्रिंट करण्याऐवजी मूल्ये परत करणे का चांगले आहे?
+- फंक्शन वेगवेगळ्या प्रकारची मूल्ये परत करू शकते का (स्ट्रिंग, नंबर, बूलियन)?
+
+```mermaid
+pie title "Common Return Value Types"
+    "Strings" : 30
+    "Numbers" : 25
+    "Objects" : 20
+    "Booleans" : 15
+    "Arrays" : 10
+```
+
+> **महत्त्वाची अंतर्दृष्टी**: मूल्ये परत करणारे फंक्शन्स अधिक अष्टपैलू असतात कारण कॉल करणारा परिणामासह काय करायचे ते ठरवतो. यामुळे तुमचा कोड अधिक मॉड्युलर आणि पुनर्वापर करण्यायोग्य बनतो!
+
 ## फंक्शन्स फंक्शन्ससाठी पॅरामीटर्स म्हणून
 
-फंक्शन्स इतर फंक्शन्ससाठी पॅरामीटर्स म्हणून पास केले जाऊ शकतात. सुरुवातीला ही संकल्पना क्लिष्ट वाटू शकते, परंतु हे एक शक्तिशाली वैशिष्ट्य आहे जे लवचिक प्रोग्रामिंग पद्धती सक्षम करते.
+फंक्शन्स इतर फंक्शन्ससाठी पॅरामीटर्स म्हणून पास केले जाऊ शकतात. सुरुवातीला ही संकल्पना जटिल वाटू शकते, परंतु हे एक शक्तिशाली वैशिष्ट्य आहे जे लवचिक प्रोग्रामिंग पॅटर्न सक्षम करते.
 
-हा नमुना खूप सामान्य आहे जेव्हा तुम्हाला म्हणायचे असते "जेव्हा काहीतरी घडते, तेव्हा हे दुसरे काहीतरी करा." उदाहरणार्थ, "जेव्हा टाइमर संपतो, तेव्हा हा कोड चालवा" किंवा "जेव्हा वापरकर्ता बटण क्लिक करतो, तेव्हा हे फंक्शन कॉल करा."
+जेव्हा तुम्हाला "काहीतरी घडते तेव्हा हे दुसरे काहीतरी करा" असे म्हणायचे असते तेव्हा हा पॅटर्न खूप सामान्य असतो. उदाहरणार्थ, "जेव्हा टाइमर संपतो, तेव्हा हा कोड चालवा" किंवा "जेव्हा वापरकर्ता बटणावर क्लिक करतो, तेव्हा हे फंक्शन कॉल करा."
 
 चला `setTimeout` पाहूया, जे एक बिल्ट-इन फंक्शन आहे जे काही वेळ थांबते आणि नंतर काही कोड चालवते. आम्हाला ते कोणता कोड चालवायचा आहे ते सांगावे लागेल – फंक्शन पास करण्यासाठी योग्य केस!
 
@@ -193,13 +359,13 @@ function displayDone() {
 setTimeout(displayDone, 3000);
 ```
 
-लक्षात घ्या की आम्ही `displayDone` (कंसाशिवाय) `setTimeout` ला पास करतो. आम्ही स्वतः फंक्शन कॉल करत नाही – आम्ही ते `setTimeout` ला देत आहोत आणि म्हणत आहोत "हे 3 सेकंदात कॉल करा."
+लक्षात घ्या की आम्ही `displayDone` (कंसांशिवाय) `setTimeout` ला पास करतो. आम्ही स्वतः फंक्शन कॉल करत नाही – आम्ही ते `setTimeout` ला देत आहोत आणि म्हणत आहोत "हे 3 सेकंदात कॉल करा."
 
 ### अनामिक फंक्शन्स
 
-कधी कधी तुम्हाला फक्त एका गोष्टीसाठी फंक्शनची आवश्यकता असते आणि त्याला नाव देण्याची इच्छा नसते. विचार करा – जर तुम्ही फक्त एकदा फंक्शन वापरत असाल, तर अतिरिक्त नावाने तुमचा कोड का भरावा?
+कधी कधी तुम्हाला फक्त एका गोष्टीसाठी फंक्शनची आवश्यकता असते आणि त्याला नाव देण्याची इच्छा नसते. विचार करा – जर तुम्ही फक्त एकदाच फंक्शन वापरत असाल, तर अतिरिक्त नावाने तुमचा कोड का भरावा?
 
-JavaScript तुम्हाला **अनामिक फंक्शन्स** तयार करण्याची परवानगी देते – नाव नसलेले फंक्शन्स जे तुम्ही जिथे आवश्यक आहे तिथे परिभाषित करू शकता.
+जावास्क्रिप्ट तुम्हाला **अनामिक फंक्शन्स** तयार करण्याची परवानगी देते – नाव नसलेले फंक्शन्स जे तुम्ही जिथे आवश्यक असेल तिथे परिभाषित करू शकता.
 
 आमच्या टाइमर उदाहरणाला अनामिक फंक्शन वापरून पुन्हा लिहिण्यासाठी येथे आहे:
 
@@ -209,15 +375,15 @@ setTimeout(function() {
 }, 3000);
 ```
 
-हे समान परिणाम साध्य करते, परंतु फंक्शन थेट `setTimeout` कॉलमध्ये परिभाषित केले जाते, स्वतंत्र फंक्शन घोषणेसाठी गरज दूर करते.
+हे समान परिणाम साध्य करते, परंतु फंक्शन थेट `setTimeout` कॉलमध्ये परिभाषित केले जाते, स्वतंत्र फंक्शन डिक्लरेशनची आवश्यकता दूर करते.
 
-### फॅट अ‍ॅरो फंक्शन्स
+### फॅट अरो फंक्शन्स
 
-आधुनिक JavaScript मध्ये फंक्शन्स लिहिण्याचा आणखी एक लहान मार्ग आहे ज्याला **अ‍ॅरो फंक्शन्स** म्हणतात. ते `=>` वापरतात (जे बाणासारखे दिसते – समजले?) आणि डेव्हलपर्समध्ये खूप लोकप्रिय आहेत.
+आधुनिक जावास्क्रिप्टमध्ये फंक्शन्स लिहिण्याचा आणखी एक संक्षिप्त मार्ग आहे ज्याला **अरो फंक्शन्स** म्हणतात. ते `=>` वापरतात (जे अरोसारखे दिसते – समजले का?) आणि विकसकांमध्ये खूप लोकप्रिय आहेत.
 
-अ‍ॅरो फंक्शन्स तुम्हाला `function` कीवर्ड वगळण्याची आणि अधिक संक्षिप्त कोड लिहिण्याची परवानगी देतात.
+अरो फंक्शन्स तुम्हाला `function` कीवर्ड वगळण्याची आणि अधिक संक्षिप्त कोड लिहिण्याची परवानगी देतात.
 
-आमच्या टाइमर उदाहरणाला अ‍ॅरो फंक्शन वापरून पुन्हा लिहिण्यासाठी येथे आहे:
+आमच्या टाइमर उदाहरणाला अरो फंक्शन वापरून येथे आहे:
 
 ```javascript
 setTimeout(() => {
@@ -225,47 +391,96 @@ setTimeout(() => {
 }, 3000);
 ```
 
-`()` येथे पॅरामीटर्स जातील (या प्रकरणात रिक्त), नंतर बाण `=>` येतो आणि शेवटी कर्ली ब्रेसेसमध्ये फंक्शन बॉडी. हे समान कार्यक्षमता अधिक संक्षिप्त सिंटॅक्ससह प्रदान करते.
+`()` हे जिथे पॅरामीटर्स जातील (या प्रकरणात रिक्त), नंतर अरो `=>` येते आणि शेवटी कर्ली ब्रेसेसमध्ये फंक्शन बॉडी. हे अधिक संक्षिप्त सिंटॅक्ससह समान कार्यक्षमता प्रदान करते.
+
+```mermaid
+flowchart LR
+    A["📝 Function Styles"] --> B["Traditional"]
+    A --> C["Arrow"]
+    A --> D["Anonymous"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["Hoisted"]
+    B --> B3["Named"]
+    
+    C --> C1["const name = () => {}"]
+    C --> C2["Concise syntax"]
+    C --> C3["Modern style"]
+    
+    D --> D1["function() {}"]
+    D --> D2["No name"]
+    D --> D3["One-time use"]
+    
+    E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
+    E --> E2["Arrow: Short callbacks"]
+    E --> E3["Anonymous: Event handlers"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ### प्रत्येक रणनीती कधी वापरायची
 
-प्रत्येक दृष्टिकोन कधी वापरायचा? एक व्यावहारिक मार्गदर्शक: जर तुम्ही फंक्शन अनेक वेळा वापरणार असाल, तर त्याला नाव द्या आणि वेगळे परिभाषित करा. जर ते एका विशिष्ट वापरासाठी असेल, तर अनामिक फंक्शन विचारात घ्या. अ‍ॅरो फंक्शन्स आणि पारंपरिक सिंटॅक्स दोन्ही वैध पर्याय आहेत, जरी अ‍ॅरो फंक्शन्स आधुनिक JavaScript कोडबेसमध्ये प्रचलित आहेत.
-
----
-
-
-
-## 🚀 आव्हान
-
-फंक्शन्स आणि पद्धतींमधील फरक एका वाक्यात सांगू शकता का? प्रयत्न करा!
-
-## GitHub Copilot Agent Challenge 🚀
-
-Agent मोड वापरून खालील आव्हान पूर्ण करा:
-
-**वर्णन:** या धड्यात कव्हर केलेल्या विविध फंक्शन संकल्पनांचे प्रदर्शन करणारे गणितीय फंक्शन्सचे युटिलिटी लायब्ररी तयार करा, ज्यामध्ये पॅरामीटर्स, डीफॉल्ट मूल्ये, रिटर्न मूल्ये आणि अ‍ॅरो फंक्शन्स समाविष्ट आहेत.
-
-**प्रॉम्प्ट:** `mathUtils.js` नावाचा JavaScript फाइल तयार करा ज्यामध्ये खालील फंक्शन्स असतील:
-1. दोन पॅरामीटर्स घेणारे आणि त्यांची बेरीज परत करणारे `add` फंक्शन
-2. डीफॉल्ट पॅरामीटर मूल्यांसह `multiply` फंक्शन (दुसरा पॅरामीटर डीफॉल्ट 1)
-3. एक अ‍ॅरो फंक्शन `square` जे एक संख्या घेते आणि तिचा वर्ग परत करते
-4. एक फंक्शन `calculate` जे दुसऱ्या फंक्शनला पॅरामीटर म्हणून स्वीकारते आणि दोन संख्या, नंतर त्या संख्यांवर फंक्शन लागू करते
-5. प्रत्येक फंक्शन योग्य चाचणी प्रकरणांसह कॉल करणे प्रदर्शित करा
-
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
-
-## व्याख्यानोत्तर प्रश्नमंजुषा
-[व्याख्यानोत्तर प्रश्नमंजुषा](https://ff-quizzes.netlify.app)
-
-## पुनरावलोकन आणि स्व-अभ्यास
-
-[अ‍ॅरो फंक्शन्सबद्दल थोडे अधिक वाचणे](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) फायदेशीर आहे, कारण ते कोड बेसमध्ये वाढत्या प्रमाणात वापरले जात आहेत. फंक्शन लिहिण्याचा सराव करा आणि नंतर या सिंटॅक्ससह ते पुन्हा लिहा.
-
-## असाइनमेंट
-
-[Fun with Functions](assignment.md)
+प्रत्येक दृष्टिकोन कधी वापरायचा? एक व्यावहारिक मार्गदर्शक: जर तुम्ही फंक्शन अनेक वेळा वापरणार असाल, तर त्याला नाव द्या आणि वेगळे परिभाषित करा. जर ते एका विशिष्ट वापरासाठी असेल, तर अनामिक फंक्शन विचारात घ्या. अरो फंक्शन्स आणि पारंपरिक सिंटॅक्स दोन्ही वैध पर्याय आहेत, जरी अरो फंक्शन्स आधुनिक जावास्क्रिप्ट कोडबेसमध्ये प्रचलित आहेत.
+
+### 🎨 **फंक
+- [ ] पारंपरिक फंक्शनला अॅरो फंक्शन सिंटॅक्समध्ये रूपांतरित करण्याचा प्रयत्न करा  
+- [ ] आव्हानाचा सराव करा: फंक्शन्स आणि मेथड्समधील फरक समजावून सांगा  
+
+### 🎯 **या तासात तुम्ही काय साध्य करू शकता**  
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि कोणतेही गोंधळात टाकणारे संकल्पना पुनरावलोकन करा  
+- [ ] GitHub Copilot चॅलेंजमधून गणित युटिलिटी लायब्ररी तयार करा  
+- [ ] दुसऱ्या फंक्शनला पॅरामीटर म्हणून वापरणारा फंक्शन तयार करा  
+- [ ] डिफॉल्ट पॅरामीटर्ससह फंक्शन्स लिहिण्याचा सराव करा  
+- [ ] फंक्शन रिटर्न व्हॅल्यूमध्ये टेम्प्लेट लिटरल्स वापरण्याचा प्रयोग करा  
+
+### 📅 **तुमचा आठवडाभराचा फंक्शन मास्टरी**  
+- [ ] "Fun with Functions" असाइनमेंट सर्जनशीलतेने पूर्ण करा  
+- [ ] तुम्ही लिहिलेल्या पुनरावृत्ती कोडचे पुनरावलोकन करा आणि त्याला पुनर्वापर करण्यायोग्य फंक्शन्समध्ये रूपांतरित करा  
+- [ ] फक्त फंक्शन्स वापरून एक छोटा कॅल्क्युलेटर तयार करा (कोणतेही ग्लोबल व्हेरिएबल्स नाहीत)  
+- [ ] `map()` आणि `filter()` सारख्या अॅरे मेथड्ससह अॅरो फंक्शन्सचा सराव करा  
+- [ ] सामान्य कार्यांसाठी युटिलिटी फंक्शन्सचा संग्रह तयार करा  
+- [ ] हायर-ऑर्डर फंक्शन्स आणि फंक्शनल प्रोग्रामिंग संकल्पनांचा अभ्यास करा  
+
+### 🌟 **तुमचा महिनाभराचा परिवर्तन**  
+- [ ] क्लोजर्स आणि स्कोपसारख्या प्रगत फंक्शन संकल्पनांमध्ये प्राविण्य मिळवा  
+- [ ] फंक्शन कंपोझिशनचा मोठ्या प्रमाणावर वापर करणारा प्रकल्प तयार करा  
+- [ ] फंक्शन डोक्युमेंटेशन सुधारण्यासाठी ओपन सोर्समध्ये योगदान द्या  
+- [ ] इतरांना फंक्शन्स आणि वेगवेगळ्या सिंटॅक्स शैलींबद्दल शिकवा  
+- [ ] जावास्क्रिप्टमधील फंक्शनल प्रोग्रामिंग पॅराडाइम्स एक्सप्लोर करा  
+- [ ] भविष्यातील प्रकल्पांसाठी पुनर्वापर करण्यायोग्य फंक्शन्सची वैयक्तिक लायब्ररी तयार करा  
+
+### 🏆 **अंतिम फंक्शन्स चॅम्पियन चेक-इन**  
+
+**तुमच्या फंक्शन मास्टरीचा उत्सव साजरा करा:**  
+- आतापर्यंत तुम्ही तयार केलेला सर्वात उपयुक्त फंक्शन कोणता आहे?  
+- फंक्शन्सबद्दल शिकल्यामुळे कोडचे आयोजन करण्याबद्दल तुमच्या विचारांमध्ये कसा बदल झाला आहे?  
+- तुम्हाला कोणता फंक्शन सिंटॅक्स जास्त आवडतो आणि का?  
+- कोणती वास्तविक समस्या तुम्ही फंक्शन लिहून सोडवाल?  
+
+```mermaid
+journey
+    title Your Function Confidence Evolution
+    section Today
+      Confused by Syntax: 3: You
+      Understanding Basics: 4: You
+      Writing Simple Functions: 5: You
+    section This Week
+      Using Parameters: 4: You
+      Returning Values: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Function Composition: 5: You
+      Advanced Patterns: 5: You
+      Teaching Others: 5: You
+```
+  
+> 🎉 **तुम्ही प्रोग्रामिंगच्या सर्वात शक्तिशाली संकल्पनांपैकी एकावर प्रभुत्व मिळवले आहे!** फंक्शन्स हे मोठ्या प्रोग्राम्सचे मुख्य घटक आहेत. तुम्ही तयार कराल असा प्रत्येक अॅप्लिकेशन फंक्शन्सचा वापर कोडचे आयोजन, पुनर्वापर आणि संरचना करण्यासाठी करेल. तुम्ही आता लॉजिकला पुनर्वापर करण्यायोग्य घटकांमध्ये पॅकेज कसे करायचे हे समजून घेतले आहे, ज्यामुळे तुम्ही अधिक कार्यक्षम आणि प्रभावी प्रोग्रामर बनता. मॉड्युलर प्रोग्रामिंगच्या जगात तुमचे स्वागत आहे! 🚀  
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावासह असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/2-js-basics/3-making-decisions/README.md b/translations/mr/2-js-basics/3-making-decisions/README.md
index 8c04edf69d..5495f99186 100644
--- a/translations/mr/2-js-basics/3-making-decisions/README.md
+++ b/translations/mr/2-js-basics/3-making-decisions/README.md
@@ -1,41 +1,91 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90a3c32c3377f83ab750c2447c77ab98",
-  "translation_date": "2025-10-22T15:49:10+00:00",
+  "original_hash": "c688385d15dd3645e924ea0ffee8967f",
+  "translation_date": "2025-11-03T14:15:17+00:00",
   "source_file": "2-js-basics/3-making-decisions/README.md",
   "language_code": "mr"
 }
 -->
-# जावास्क्रिप्ट मूलभूत गोष्टी: निर्णय घेणे
-
-![जावास्क्रिप्ट मूलभूत गोष्टी - निर्णय घेणे](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.mr.png)
-
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
+# JavaScript मूलभूत गोष्टी: निर्णय घेणे
+
+![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.mr.png)
+
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
+
+```mermaid
+journey
+    title Your JavaScript Decision-Making Adventure
+    section Foundation
+      Boolean Values: 5: You
+      Comparison Operators: 4: You
+      Logical Thinking: 5: You
+    section Basic Decisions
+      If Statements: 4: You
+      If-Else Logic: 5: You
+      Switch Statements: 4: You
+    section Advanced Logic
+      Logical Operators: 5: You
+      Complex Conditions: 4: You
+      Ternary Expressions: 5: You
+```
 
-तुम्ही कधी विचार केला आहे की अॅप्लिकेशन्स स्मार्ट निर्णय कसे घेतात? जसे की नेव्हिगेशन सिस्टम सर्वात जलद मार्ग कसा निवडतो, किंवा थर्मोस्टॅट उष्णता चालू करण्याचा निर्णय कसा घेतो? प्रोग्रामिंगमधील निर्णय घेण्याची ही मूलभूत संकल्पना आहे.
+कधी तुम्हाला विचार आला आहे का की अ‍ॅप्लिकेशन्स स्मार्ट निर्णय कसे घेतात? जसे की नेव्हिगेशन सिस्टम सर्वात जलद मार्ग निवडते किंवा थर्मोस्टॅट उष्णता चालू करण्याचा निर्णय कसा घेतो? प्रोग्रामिंगमधील निर्णय घेण्याची ही मूलभूत संकल्पना आहे.
 
-जसे चार्ल्स बॅबेजच्या अॅनालिटिकल इंजिनला परिस्थितीनुसार वेगवेगळ्या ऑपरेशन्सच्या क्रमांचे अनुसरण करण्यासाठी डिझाइन केले गेले होते, आधुनिक जावास्क्रिप्ट प्रोग्राम्सना बदलत्या परिस्थितीनुसार निवडी करणे आवश्यक आहे. स्थिर कोडला प्रतिसाद देणाऱ्या, बुद्धिमान अॅप्लिकेशन्समध्ये बदलण्याची क्षमता म्हणजे निर्णय घेण्याची क्षमता.
+जसे चार्ल्स बॅबेजच्या अ‍ॅनालिटिकल इंजिनला परिस्थितीनुसार वेगवेगळ्या ऑपरेशन्सचे अनुक्रम अनुसरण करण्यासाठी डिझाइन केले गेले होते, आधुनिक JavaScript प्रोग्राम्सला बदलत्या परिस्थितीनुसार निवडी करणे आवश्यक आहे. स्थिर कोडला प्रतिसाद देणाऱ्या, बुद्धिमान अ‍ॅप्लिकेशन्समध्ये रूपांतरित करण्यासाठी ही शाखा आणि निर्णय घेण्याची क्षमता महत्त्वाची आहे.
 
-या धड्यात, तुम्ही तुमच्या प्रोग्राम्समध्ये सशर्त लॉजिक कसे अंमलात आणायचे ते शिकाल. आपण सशर्त स्टेटमेंट्स, तुलना ऑपरेटर आणि लॉजिकल एक्सप्रेशन्स एक्सप्लोर करू जे तुमच्या कोडला परिस्थितींचे मूल्यांकन करण्यास आणि योग्य प्रतिसाद देण्यास अनुमती देतात.
+या धड्यात, तुम्ही तुमच्या प्रोग्राम्समध्ये अटींचा वापर कसा करायचा ते शिकाल. आम्ही अटींचे विधान, तुलना ऑपरेटर आणि लॉजिकल एक्सप्रेशन्स एक्सप्लोर करू जे तुमच्या कोडला परिस्थितीचे मूल्यांकन करण्यास आणि योग्य प्रतिसाद देण्यास सक्षम करतात.
 
-## पूर्व-व्याख्यान प्रश्नमंजुषा
+## व्याख्यानपूर्व प्रश्नमंजुषा
 
-[पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/11)
+[व्याख्यानपूर्व प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/11)
 
-निर्णय घेण्याची आणि प्रोग्राम फ्लो नियंत्रित करण्याची क्षमता ही प्रोग्रामिंगचा मूलभूत पैलू आहे. या विभागात Boolean मूल्ये आणि सशर्त लॉजिक वापरून तुमच्या जावास्क्रिप्ट प्रोग्राम्सचा अंमल मार्ग कसा नियंत्रित करायचा ते समाविष्ट आहे.
+निर्णय घेण्याची आणि प्रोग्राम फ्लो नियंत्रित करण्याची क्षमता प्रोग्रामिंगचा मूलभूत पैलू आहे. या विभागात Boolean मूल्ये आणि अटींचा वापर करून तुमच्या JavaScript प्रोग्राम्सच्या अंमलबजावणीचा मार्ग कसा नियंत्रित करायचा ते समाविष्ट आहे.
 
 [![निर्णय घेणे](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "निर्णय घेणे")
 
-> 🎥 वरील प्रतिमेवर क्लिक करा निर्णय घेण्याबद्दल व्हिडिओसाठी.
-
-> तुम्ही [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) वर हा धडा घेऊ शकता!
+> 🎥 वरच्या प्रतिमेवर क्लिक करा निर्णय घेण्याबद्दल व्हिडिओसाठी.
+
+> तुम्ही हा धडा [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) वर घेऊ शकता!
+
+```mermaid
+mindmap
+  root((Decision Making))
+    Boolean Logic
+      true/false
+      Comparison results
+      Logical expressions
+    Conditional Statements
+      if statements
+        Single condition
+        Code execution
+      if-else
+        Two paths
+        Alternative actions
+      switch
+        Multiple options
+        Clean structure
+    Operators
+      Comparison
+        === !== < > <= >=
+        Value relationships
+      Logical
+        && || !
+        Combine conditions
+    Advanced Patterns
+      Ternary
+        ? : syntax
+        Inline decisions
+      Complex Logic
+        Nested conditions
+        Multiple criteria
+```
 
 ## Boolean बद्दल थोडक्यात पुनरावलोकन
 
-निर्णय घेण्याचा अभ्यास करण्यापूर्वी, आपल्या मागील धड्यातील Boolean मूल्ये पुन्हा पाहूया. गणितज्ञ जॉर्ज बूल यांच्या नावावरून ठेवलेले, हे मूल्ये द्विआधारी स्थिती दर्शवतात – `true` किंवा `false`. यात कोणतीही अस्पष्टता नाही, कोणतेही मध्यम क्षेत्र नाही.
+निर्णय घेण्यापूर्वी, आपल्या मागील धड्यातील Boolean मूल्ये पुन्हा पाहूया. गणितज्ञ जॉर्ज बूल यांच्या नावावरून ठेवलेली ही मूल्ये द्वि-राज्ये दर्शवतात – `true` किंवा `false`. यात कोणतीही अस्पष्टता नाही, कोणतेही मध्यम क्षेत्र नाही.
 
-हे द्विआधारी मूल्ये सर्व संगणकीय लॉजिकचा पाया बनवतात. तुमचा प्रोग्राम घेत असलेला प्रत्येक निर्णय शेवटी Boolean मूल्यांकनावर आधारित असतो.
+ही द्वि-मूल्ये सर्व संगणकीय तर्कशास्त्राचा पाया आहेत. तुमचा प्रोग्राम घेत असलेला प्रत्येक निर्णय शेवटी Boolean मूल्यांकनावर आधारित असतो.
 
 Boolean व्हेरिएबल्स तयार करणे सोपे आहे:
 
@@ -46,30 +96,85 @@ let myFalseBool = false;
 
 हे दोन व्हेरिएबल्स स्पष्ट Boolean मूल्यांसह तयार करते.
 
-✅ Boolean हे इंग्रजी गणितज्ञ, तत्त्वज्ञ आणि लॉजिशियन जॉर्ज बूल (1815–1864) यांच्या नावावरून ठेवले गेले आहेत.
+✅ Boolean हे इंग्रजी गणितज्ञ, तत्त्वज्ञ आणि तर्कशास्त्रज्ञ जॉर्ज बूल (1815–1864) यांच्या नावावरून ठेवले गेले आहे.
 
 ## तुलना ऑपरेटर आणि Boolean
 
-प्रत्यक्षात, तुम्ही क्वचितच Boolean मूल्ये मॅन्युअली सेट कराल. त्याऐवजी, तुम्ही परिस्थितींचे मूल्यांकन करून ती तयार कराल: "हा नंबर त्या नंबरपेक्षा मोठा आहे का?" किंवा "ही मूल्ये समान आहेत का?"
+प्रत्यक्षात, तुम्ही क्वचितच Boolean मूल्ये मॅन्युअली सेट कराल. त्याऐवजी, तुम्ही अटींचे मूल्यांकन करून ती तयार कराल: "हा नंबर त्या नंबरपेक्षा मोठा आहे का?" किंवा "ही मूल्ये समान आहेत का?"
 
-तुलना ऑपरेटर या मूल्यांकनांना सक्षम करतात. ते मूल्यांची तुलना करतात आणि ऑपरेण्ड्समधील संबंधाच्या आधारे Boolean परिणाम परत करतात.
+तुलना ऑपरेटर या मूल्यांकनांना सक्षम करतात. ते मूल्यांची तुलना करतात आणि ऑपरेटरच्या संबंधांवर आधारित Boolean परिणाम परत करतात.
 
 | चिन्ह | वर्णन                                                                                                                                                   | उदाहरण            |
 | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **कमी आहे**: दोन मूल्यांची तुलना करते आणि डाव्या बाजूचे मूल्य उजव्या बाजूच्या तुलनेत कमी असल्यास `true` Boolean डेटा प्रकार परत करते                              | `5 < 6 // true`    |
-| `<=`   | **कमी किंवा समान आहे**: दोन मूल्यांची तुलना करते आणि डाव्या बाजूचे मूल्य उजव्या बाजूच्या तुलनेत कमी किंवा समान असल्यास `true` Boolean डेटा प्रकार परत करते      | `5 <= 6 // true`   |
-| `>`    | **मोठा आहे**: दोन मूल्यांची तुलना करते आणि डाव्या बाजूचे मूल्य उजव्या बाजूच्या तुलनेत मोठे असल्यास `true` Boolean डेटा प्रकार परत करते                         | `5 > 6 // false`   |
-| `>=`   | **मोठा किंवा समान आहे**: दोन मूल्यांची तुलना करते आणि डाव्या बाजूचे मूल्य उजव्या बाजूच्या तुलनेत मोठे किंवा समान असल्यास `true` Boolean डेटा प्रकार परत करते | `5 >= 6 // false`  |
-| `===`  | **कठोर समानता**: दोन मूल्यांची तुलना करते आणि डाव्या आणि उजव्या बाजूचे मूल्य समान आणि समान डेटा प्रकार असल्यास `true` Boolean डेटा प्रकार परत करते       | `5 === 6 // false` |
+| `<`    | **कमी आहे**: दोन मूल्यांची तुलना करते आणि डाव्या बाजूचे मूल्य उजव्या बाजूच्या मूल्यापेक्षा कमी असल्यास `true` Boolean डेटा प्रकार परत करते                              | `5 < 6 // true`    |
+| `<=`   | **कमी किंवा समान आहे**: दोन मूल्यांची तुलना करते आणि डाव्या बाजूचे मूल्य उजव्या बाजूच्या मूल्यापेक्षा कमी किंवा समान असल्यास `true` Boolean डेटा प्रकार परत करते      | `5 <= 6 // true`   |
+| `>`    | **मोठा आहे**: दोन मूल्यांची तुलना करते आणि डाव्या बाजूचे मूल्य उजव्या बाजूच्या मूल्यापेक्षा मोठे असल्यास `true` Boolean डेटा प्रकार परत करते                         | `5 > 6 // false`   |
+| `>=`   | **मोठा किंवा समान आहे**: दोन मूल्यांची तुलना करते आणि डाव्या बाजूचे मूल्य उजव्या बाजूच्या मूल्यापेक्षा मोठे किंवा समान असल्यास `true` Boolean डेटा प्रकार परत करते | `5 >= 6 // false`  |
+| `===`  | **कठोर समानता**: दोन मूल्यांची तुलना करते आणि डाव्या आणि उजव्या बाजूची मूल्ये समान आहेत आणि समान डेटा प्रकार आहेत तर `true` Boolean डेटा प्रकार परत करते       | `5 === 6 // false` |
 | `!==`  | **असमानता**: दोन मूल्यांची तुलना करते आणि कठोर समानता ऑपरेटर परत करेल त्याच्या उलट Boolean मूल्य परत करते                                    | `5 !== 6 // true`  |
 
-✅ तुमच्या ब्राउझरच्या कन्सोलमध्ये काही तुलना लिहून तुमचे ज्ञान तपासा. परत आलेल्या डेटाने तुम्हाला आश्चर्य वाटते का?
+✅ तुमच्या ब्राउझरच्या कन्सोलमध्ये काही तुलना लिहून तुमचे ज्ञान तपासा. परत आलेल्या डेटाने तुम्हाला आश्चर्य वाटले का?
+
+```mermaid
+flowchart LR
+    A["🔢 Values"] --> B["⚖️ Comparison"]
+    B --> C["✅ Boolean Result"]
+    
+    D["5"] --> E["< 6"]
+    E --> F["true"]
+    
+    G["10"] --> H["=== '10'"]
+    H --> I["false"]
+    
+    J["'hello'"] --> K["!== 'world'"]
+    K --> L["true"]
+    
+    M["📋 Operator Types"] --> M1["Equality: === !=="]
+    M --> M2["Relational: < > <= >="]
+    M --> M3["Strict vs Loose"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style M fill:#fff3e0
+```
+
+### 🧠 **तुलना तज्ञ तपासणी: Boolean तर्कशास्त्र समजून घेणे**
+
+**तुमचे तुलना समजून घेणे तपासा:**
+- तुम्हाला का वाटते की `===` (कठोर समानता) सामान्यतः `==` (सैल समानता) पेक्षा प्राधान्य दिले जाते?
+- तुम्ही अंदाज लावू शकता का की `5 === '5'` काय परत करेल? `5 == '5'` बद्दल काय?
+- `!==` आणि `!=` यामध्ये काय फरक आहे?
+
+```mermaid
+stateDiagram-v2
+    [*] --> Comparison: Two values
+    Comparison --> StrictEqual: === or !==
+    Comparison --> Relational: < > <= >=
+    
+    StrictEqual --> TypeCheck: Check type AND value
+    Relational --> NumberCompare: Convert to numbers
+    
+    TypeCheck --> BooleanResult: true or false
+    NumberCompare --> BooleanResult
+    
+    note right of StrictEqual
+        Preferred approach
+        No type conversion
+    end note
+    
+    note right of Relational
+        Useful for ranges
+        Numerical comparisons
+    end note
+```
+
+> **प्रो टिप**: समानता तपासण्यासाठी नेहमी `===` आणि `!==` वापरा जोपर्यंत तुम्हाला विशिष्ट प्रकारांत रूपांतरण आवश्यक नाही. हे अनपेक्षित वर्तन टाळते!
 
-## If स्टेटमेंट
+## If विधान
 
-`if` स्टेटमेंट म्हणजे तुमच्या कोडमध्ये प्रश्न विचारण्यासारखे आहे. "जर ही अट खरी असेल, तर हे काम करा." जावास्क्रिप्टमध्ये निर्णय घेण्यासाठी तुम्ही वापरणारे हे कदाचित सर्वात महत्त्वाचे साधन आहे.
+`if` विधान म्हणजे तुमच्या कोडमध्ये प्रश्न विचारण्यासारखे आहे. "जर ही अट खरी असेल, तर हे काम करा." JavaScript मध्ये निर्णय घेण्यासाठी तुम्ही वापरणारे हे कदाचित सर्वात महत्त्वाचे साधन आहे.
 
-हे कसे कार्य करते:
+हे कसे कार्य करते ते येथे आहे:
 
 ```javascript
 if (condition) {
@@ -77,7 +182,7 @@ if (condition) {
 }
 ```
 
-अट कंसात जाते आणि जर ती `true` असेल तर जावास्क्रिप्ट कर्ली ब्रेसेसच्या आत कोड चालवते. जर ती `false` असेल, तर जावास्क्रिप्ट संपूर्ण ब्लॉक वगळते.
+अट कंसात जाते आणि जर ती `true` असेल तर JavaScript कर्ली ब्रेसेसच्या आत कोड चालवते. जर ती `false` असेल, तर JavaScript संपूर्ण ब्लॉक वगळते.
 
 तुम्ही या अटी तयार करण्यासाठी तुलना ऑपरेटर वापराल. व्यावहारिक उदाहरण पाहूया:
 
@@ -91,13 +196,31 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-`1000 >= 800` हे `true` म्हणून मूल्यांकन करते, त्यामुळे ब्लॉकच्या आत कोड चालतो आणि कन्सोलमध्ये "Getting a new laptop!" प्रदर्शित होते.
+`1000 >= 800` हे `true` म्हणून मूल्यांकन करते, त्यामुळे ब्लॉकमधील कोड अंमलात आणला जातो, कन्सोलमध्ये "Getting a new laptop!" प्रदर्शित होते.
+
+```mermaid
+flowchart TD
+    A["🚀 Program Start"] --> B{"💰 currentMoney >= laptopPrice?"}
+    B -->|true| C["🎉 'Getting a new laptop!'"]
+    B -->|false| D["⏭️ Skip code block"]
+    C --> E["📋 Continue program"]
+    D --> E
+    
+    F["📊 If Statement Structure"] --> F1["if (condition) {"]
+    F1 --> F2["  // code to run if true"]
+    F2 --> F3["}"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style F fill:#e3f2fd
+```
 
-## If..Else स्टेटमेंट
+## If..Else विधान
 
-पण जर तुम्हाला तुमच्या प्रोग्रामने अट खोटी असल्यावर काहीतरी वेगळे करायचे असेल तर काय? तिथेच `else` येते – जणू तुमच्याकडे बॅकअप योजना आहे.
+पण जर तुम्हाला तुमच्या प्रोग्रामला अट खोटी असल्यावर काहीतरी वेगळे करायचे असेल तर? तिथे `else` येते – जणू तुमच्याकडे बॅकअप योजना आहे.
 
-`else` स्टेटमेंट तुम्हाला "जर ही अट खरी नसेल, तर त्याऐवजी हे दुसरे काम करा" असे म्हणण्याचा मार्ग देते.
+`else` विधान तुम्हाला "जर ही अट खरी नसेल, तर त्याऐवजी हे दुसरे काम करा" असे सांगण्याचा मार्ग देते.
 
 ```javascript
 let currentMoney = 500;
@@ -112,15 +235,44 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-आता `500 >= 800` हे `false` असल्याने, जावास्क्रिप्ट पहिला ब्लॉक वगळते आणि त्याऐवजी `else` ब्लॉक चालवते. तुम्हाला कन्सोलमध्ये "Can't afford a new laptop, yet!" दिसेल.
+आता `500 >= 800` हे `false` असल्याने, JavaScript पहिला ब्लॉक वगळते आणि त्याऐवजी `else` ब्लॉक चालवते. तुम्हाला कन्सोलमध्ये "Can't afford a new laptop, yet!" दिसेल.
+
+✅ तुमच्या ब्राउझर कन्सोलमध्ये हे कोड चालवून तुमचे ज्ञान तपासा. `currentMoney` आणि `laptopPrice` व्हेरिएबल्सच्या मूल्यांमध्ये बदल करा आणि परत आलेल्या `console.log()` मध्ये बदल पहा.
+
+### 🎯 **If-Else लॉजिक तपासणी: शाखा मार्ग**
+
+**तुमचे अटींचे तर्कशास्त्र समजून घेणे तपासा:**
+- काय होते जर `currentMoney` नेमके `laptopPrice` च्या बरोबर असेल?
+- तुम्ही वास्तविक जीवनातील परिस्थिती विचार करू शकता जिथे if-else तर्कशास्त्र उपयुक्त ठरेल?
+- तुम्ही हे अनेक किंमतींच्या श्रेणींना हाताळण्यासाठी कसे वाढवू शकता?
+
+```mermaid
+flowchart TD
+    A["🔍 Evaluate Condition"] --> B{"Condition True?"}
+    B -->|Yes| C["📤 Execute IF block"]
+    B -->|No| D["📥 Execute ELSE block"]
+    
+    C --> E["✅ One path taken"]
+    D --> E
+    
+    F["🌐 Real-world Examples"] --> F1["User login status"]
+    F --> F2["Age verification"]
+    F --> F3["Form validation"]
+    F --> F4["Game state changes"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#e3f2fd
+    style F fill:#f3e5f5
+```
 
-✅ ब्राउझर कन्सोलमध्ये हे कोड चालवून या कोडची आणि खालील कोडची तुमची समज तपासा. `currentMoney` आणि `laptopPrice` व्हेरिएबल्सच्या मूल्यांमध्ये बदल करून परत आलेल्या `console.log()` बदल करा.
+> **महत्त्वाचा दृष्टिकोन**: If-else ने अचूक एक मार्ग घेतला जातो. हे तुमच्या प्रोग्रामला कोणत्याही अटीला नेहमी प्रतिसाद देण्याची हमी देते!
 
-## Switch स्टेटमेंट
+## Switch विधान
 
-कधी कधी तुम्हाला एक मूल्य अनेक पर्यायांशी तुलना करायचे असते. तुम्ही अनेक `if..else` स्टेटमेंट्स साखळी करू शकता, परंतु हा दृष्टिकोन अव्यवस्थित होतो. अनेक वेगवेगळ्या मूल्यांसाठी स्वच्छ संरचना प्रदान करण्यासाठी `switch` स्टेटमेंट उपयुक्त आहे.
+कधी कधी तुम्हाला एक मूल्य अनेक पर्यायांशी तुलना करायचे असते. तुम्ही अनेक `if..else` विधानांची साखळी तयार करू शकता, परंतु हा दृष्टिकोन अव्यवस्थित होतो. अनेक विशिष्ट मूल्ये हाताळण्यासाठी स्वच्छ रचना प्रदान करण्यासाठी `switch` विधान उपयुक्त आहे.
 
-संकल्पना सुरुवातीच्या टेलिफोन एक्सचेंजमध्ये वापरल्या जाणाऱ्या यांत्रिक स्विचिंग सिस्टमसारखी आहे – एक इनपुट मूल्य ठरवते की अंमलबजावणी कोणत्या विशिष्ट मार्गाने जाते.
+हा संकल्पना सुरुवातीच्या टेलिफोन एक्सचेंजमध्ये वापरल्या जाणाऱ्या यांत्रिक स्विचिंग सिस्टमसारखी आहे – एक इनपुट मूल्य अंमलबजावणी कोणत्या विशिष्ट मार्गाने जाईल ते ठरवते.
 
 ```javascript
 switch (expression) {
@@ -136,11 +288,11 @@ switch (expression) {
 ```
 
 हे कसे संरचित आहे:
-- जावास्क्रिप्ट एकदा अभिव्यक्तीचे मूल्यांकन करते
-- प्रत्येक `case` पाहते आणि जुळणारे शोधते
-- जुळणारे सापडल्यावर, तो कोड ब्लॉक चालवतो
-- `break` जावास्क्रिप्टला थांबवते आणि switch मधून बाहेर पडते
-- जर कोणतेही केस जुळत नसतील, तर तो `default` ब्लॉक चालवतो (जर तुम्ही एक ठेवला असेल तर)
+- JavaScript एकदा अभिव्यक्तीचे मूल्यांकन करते
+- प्रत्येक `case` शोधते जो जुळतो
+- जुळणारा कोड ब्लॉक चालवते
+- `break` JavaScript ला थांबवते आणि switch मधून बाहेर पडते
+- जर कोणतेही केस जुळत नसतील, तर ते `default` ब्लॉक चालवते (जर तुम्ही तो ठेवला असेल तर)
 
 ```javascript
 // Program using switch statement for day of week
@@ -164,27 +316,98 @@ switch (dayNumber) {
 console.log(`Today is ${dayName}`);
 ```
 
-या उदाहरणात, जावास्क्रिप्ट पाहते की `dayNumber` `2` आहे, जुळणारे `case 2` शोधते, `dayName` ला "Tuesday" सेट करते आणि नंतर switch मधून बाहेर पडते. परिणाम? "Today is Tuesday" कन्सोलमध्ये लॉग केले जाते.
+या उदाहरणात, JavaScript पाहते की `dayNumber` `2` आहे, जुळणारा `case 2` शोधते, `dayName` ला "Tuesday" सेट करते आणि नंतर switch मधून बाहेर पडते. परिणाम? "Today is Tuesday" कन्सोलमध्ये लॉग केले जाते.
+
+```mermaid
+flowchart TD
+    A["📥 switch(expression)"] --> B["🔍 Evaluate once"]
+    B --> C{"Match case 1?"}
+    C -->|Yes| D["📋 Execute case 1"]
+    C -->|No| E{"Match case 2?"}
+    E -->|Yes| F["📋 Execute case 2"]
+    E -->|No| G{"Match case 3?"}
+    G -->|Yes| H["📋 Execute case 3"]
+    G -->|No| I["📋 Execute default"]
+    
+    D --> J["🛑 break"]
+    F --> K["🛑 break"]
+    H --> L["🛑 break"]
+    
+    J --> M["✅ Exit switch"]
+    K --> M
+    L --> M
+    I --> M
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style M fill:#e8f5e8
+```
+
+✅ तुमच्या ब्राउझर कन्सोलमध्ये हे कोड चालवून तुमचे ज्ञान तपासा. व्हेरिएबल a च्या मूल्यांमध्ये बदल करा आणि परत आलेल्या `console.log()` मध्ये बदल पहा.
+
+### 🔄 **Switch विधान तज्ञ: अनेक पर्याय**
 
-✅ ब्राउझर कन्सोलमध्ये हे कोड चालवून या कोडची आणि खालील कोडची तुमची समज तपासा. `a` व्हेरिएबलच्या मूल्यांमध्ये बदल करून परत आलेल्या `console.log()` बदल करा.
+**तुमचे switch समजून घेणे तपासा:**
+- काय होते जर तुम्ही `break` विधान विसरला?
+- तुम्ही अनेक `if-else` विधानांऐवजी `switch` कधी वापराल?
+- तुम्ही विचार करता की तुम्ही सर्व शक्यता कव्हर केल्या आहेत तरीही `default` केस का उपयुक्त आहे?
+
+```mermaid
+pie title "When to Use Each Decision Structure"
+    "Simple if-else" : 40
+    "Complex if-else chains" : 25
+    "Switch statements" : 20
+    "Ternary operators" : 15
+```
+
+> **सर्वोत्तम सराव**: अनेक विशिष्ट मूल्यांशी एक व्हेरिएबलची तुलना करताना `switch` वापरा. श्रेणी तपासणी किंवा जटिल अटींसाठी `if-else` वापरा!
 
 ## लॉजिकल ऑपरेटर आणि Boolean
 
-जटिल निर्णयांमध्ये अनेक अटी एकाच वेळी मूल्यांकन करणे आवश्यक असते. जसे Boolean बीजगणित गणितज्ञांना लॉजिकल अभिव्यक्ती एकत्रित करण्यास अनुमती देते, प्रोग्रामिंगमध्ये अनेक Boolean अटी जोडण्यासाठी लॉजिकल ऑपरेटर प्रदान केले जातात.
+जटिल निर्णयांमध्ये अनेक अटी एकाच वेळी मूल्यांकन करणे आवश्यक असते. जसे Boolean बीजगणित गणितज्ञांना लॉजिकल अभिव्यक्ती एकत्र करण्यास अनुमती देते, प्रोग्रामिंग लॉजिकल ऑपरेटर प्रदान करते जे अनेक Boolean अटींना जोडतात.
 
-हे ऑपरेटर साध्या true/false मूल्यांकन एकत्र करून प्रगत सशर्त लॉजिक सक्षम करतात.
+हे ऑपरेटर साध्या true/false मूल्यांकन एकत्र करून परिष्कृत अटींचा तर्कशास्त्र सक्षम करतात.
 
 | चिन्ह | वर्णन                                                                                     | उदाहरण                                                                 |
 | ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
 | `&&`   | **लॉजिकल AND**: दोन Boolean अभिव्यक्तींची तुलना करते. दोन्ही बाजू true असल्यासच true परत करते | `(5 > 3) && (5 < 10) // दोन्ही बाजू true आहेत. true परत करते` |
 | `\|\|` | **लॉजिकल OR**: दोन Boolean अभिव्यक्तींची तुलना करते. किमान एक बाजू true असल्यास true परत करते     | `(5 > 10) \|\| (5 < 10) // एक बाजू false आहे, दुसरी true आहे. true परत करते` |
-| `!`    | **लॉजिकल NOT**: Boolean अभिव्यक्तीचे उलट मूल्य परत करते                             | `!(5 > 10) // 5 10 पेक्षा मोठा नाही, त्यामुळे "!" true बनवते`         |
+| `!`    | **लॉजिकल NOT**: Boolean अभिव्यक्तीचे उलट मूल्य परत करते                             | `!(5 > 10) // 5 10 पेक्षा मोठा नाही, त्यामुळे "!" ते true बनवते`         |
 
-हे ऑपरेटर तुम्हाला उपयुक्त पद्धतीने अटी एकत्रित करण्यास अनुमती देतात:
+हे ऑपरेटर तुम्हाला अटी उपयुक्त पद्धतीने एकत्र करण्यास अनुमती देतात:
 - AND (`&&`) म्हणजे दोन्ही अटी true असणे आवश्यक आहे
 - OR (`||`) म्हणजे किमान एक अट true असणे आवश्यक आहे  
 - NOT (`!`) true ला false मध्ये बदलते (आणि उलट)
 
+```mermaid
+flowchart LR
+    A["🔗 Logical Operators"] --> B["&& AND"]
+    A --> C["|| OR"]
+    A --> D["! NOT"]
+    
+    B --> B1["Both must be true"]
+    B --> B2["true && true = true"]
+    B --> B3["true && false = false"]
+    
+    C --> C1["At least one true"]
+    C --> C2["true || false = true"]
+    C --> C3["false || false = false"]
+    
+    D --> D1["Flips the value"]
+    D --> D2["!true = false"]
+    D --> D3["!false = true"]
+    
+    E["🌍 Real Examples"] --> E1["Age >= 18 && hasLicense"]
+    E --> E2["isWeekend || isHoliday"]
+    E --> E3["!isLoggedIn"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+
 ## लॉजिकल ऑपरेटरसह अटी आणि निर्णय
 
 चला या लॉजिकल ऑपरेटरचा वापर करून अधिक वास्तववादी उदाहरण पाहूया:
@@ -203,11 +426,40 @@ if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
 }
 ```
 
-या उदाहरणात: आम्ही 20% डिस्काउंट किंमत (640) मोजतो, नंतर आमची उपलब्ध फंड्स पूर्ण किंमत किंवा सवलतीच्या किंमतीसाठी पुरेशी आहेत का ते मूल्यांकन करतो. 600 सवलतीच्या किंमतीच्या मर्यादेत (640) बसते, त्यामुळे अट true म्हणून मूल्यांकन करते.
+या उदाहरणात: आम्ही 20% डिस्काउंट किंमत (640) मोजतो, नंतर मूल्यांकन करतो की आमची उपलब्ध निधी पूर्ण किंमत किंवा सवलतीच्या किंमतीसाठी पुरेशी आहे का. कारण 600 सवलतीच्या किंमतीच्या मर्यादेत (640) बसते, अट true म्हणून मूल्यांकन करते.
+
+### 🧮 **लॉजिकल ऑपरेटर तपासणी: अटी एकत्र करणे**
+
+**तुमचे लॉजिकल ऑपरेटर समजून घेणे तपासा:**
+- अभिव्यक्ती `A && B` मध्ये, काय होते जर A false असेल? B चे मूल्यांकन केले जाते का?
+- तुम्ही अशी परिस्थिती विचार करू शकता जिथे तुम्हाला सर्व तीन ऑपरेटर (&&, ||, !) एकत्र आवश्यक असतील?
+- `!user.isActive` आणि `user.isActive !== true` यामध्ये काय फरक आहे?
+
+```mermaid
+stateDiagram-v2
+    [*] --> EvaluateA: A && B
+    EvaluateA --> CheckB: A is true
+    EvaluateA --> ReturnFalse: A is false
+    CheckB --> ReturnTrue: B is true
+    CheckB --> ReturnFalse: B is false
+    
+    [*] --> EvaluateC: A || B
+    EvaluateC --> ReturnTrue: A is true
+    EvaluateC --> CheckD: A is false
+    CheckD --> ReturnTrue: B is true
+    CheckD --> ReturnFalse: B is false
+    
+    note right of EvaluateA
+        Short-circuit evaluation:
+        If A is false, B is never checked
+    end note
+```
+
+> **कामगिरी टिप**: JavaScript "शॉर्ट-सर्किट मूल्यांकन" वापरते - `A && B` मध्ये, जर A false असेल, तर B चे मूल्यांकन केले जात नाही. याचा फायदा घ्या!
 
-### नकारात्मक ऑपरेटर
+### नकार ऑपरेटर
 
-कधी कधी काहीतरी true नाही ते विचारणे सोपे असते. जसे "वापरकर्ता लॉग इन आहे का?" विचारण्याऐवजी तुम्ही "वापरकर्ता लॉग इन नाही आहे का?" विचारू शकता. उद्गार चिन्ह (`!`) ऑपरेटर तुमच्यासाठी लॉजिक उलटवतो.
+कधी कधी काहीतरी खरे नाही ते विचारणे सोपे असते. जसे "वापरकर्ता लॉग इन आहे का?" विचारण्याऐवजी, तुम्ही विचार करू शकता "वापरकर्ता लॉग इन नाही का?" उद्गार चिन्ह (`!`) ऑपरेटर तुमच्यासाठी तर्कशास्त्र उलटवतो.
 
 ```javascript
 if (!condition) {
@@ -217,17 +469,17 @@ if (!condition) {
 }
 ```
 
-`!` ऑपरेटर म्हणजे "त्याच्या उलट..." असे म्हणण्यासारखे आहे – जर काहीतरी `true` असेल, तर `!` त्याला `false` बनवते आणि उलट.
+`!` ऑपरेटर म्हणजे "त्याच्या उलट..." असे म्हणणे – जर काहीतरी `true` असेल, तर `!` त्याला `false` बनवते आणि उलट.
 
-### Ternary अभिव्यक्ती
+### टर्नरी अभिव्यक्ती
 
-सोप्या सशर्त असाइनमेंटसाठी, जावास्क्रिप्ट **ternary ऑपरेटर** प्रदान करते. ही संक्षिप्त सिंटॅक्स तुम्हाला एक सशर्त अभिव्यक्ती एका ओळीत लिहिण्याची परवानगी देते, जेव्हा तुम्हाला अटीवर आधारित दोन मूल्यांपैकी एक असाइन करायचा असेल तेव्हा उपयुक्त.
+सोप्या अटींच्या असाइनमेंटसाठी, JavaScript **टर्नरी ऑपरेटर** प्रदान करते. ही संक्षिप्त सिंटॅक्स तुम्हाला एकाच ओळीत अटींची अभिव्यक्ती लिहिण्याची परवानगी देते, जेव्हा तुम्हाला अटीवर आधारित दोन मूल्यांपैकी एक असाइन करायचा असेल तेव्हा उपयुक्त.
 
 ```javascript
 let variable = condition ? returnThisIfTrue : returnThisIfFalse;
 ```
 
-हे प्रश्नासारखे वाचते: "ही अट true आहे का? जर होय, तर हे मूल्य वापरा. जर नाही, तर ते मूल्य वापरा."
+हे प्रश्नासारखे वाचते: "ही अट खरी आहे का? जर होय, तर हे मूल्य वापरा. जर नाही, तर ते मूल्य वापरा."
 
 खाली एक अधिक ठोस उदाहरण आहे:
 
@@ -241,7 +493,7 @@ let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
 
 या ओळीत काय सांगितले आहे: "`firstNumber` `secondNumber` पेक्षा मोठा आहे का? जर होय, तर `firstNumber` `biggestNumber` मध्ये ठेवा. जर नाही, तर `secondNumber` `biggestNumber` मध्ये ठेवा."
 
-Ternary ऑपरेटर हा पारंपरिक `if..else` स्टेटमेंट लिहिण्याचा फक्त एक छोटा मार्ग आहे:
+टर्नरी ऑपरेटर हा पारंपरिक `if..else` विधान लिहिण्याचा फक्त एक छोटा मार्ग आहे:
 
 ```javascript
 let biggestNumber;
@@ -252,23 +504,45 @@ if (firstNumber > secondNumber) {
 }
 ```
 
-दोन्ही दृष्टिकोन समान परिणाम तयार करतात. Ternary ऑपरेटर संक्षिप्तता प्रदान करतो, तर पारंपरिक if-else संरचना जटिल अटींसाठी अधिक वाचनीय असू शकते.
+दोन्ही दृष्टिकोन समान परिणाम तयार करतात. टर्नरी ऑपरेटर संक्षिप्तता प्रदान करतो, तर पारंपरिक if-else रचना जटिल अटींसाठी अधिक वाचनीय असू शकते.
+
+```mermaid
+flowchart LR
+    A["🤔 Ternary Operator"] --> B["condition ?"]
+    B --> C["valueIfTrue :"]
+    C --> D["valueIfFalse"]
+    
+    E["📝 Traditional If-Else"] --> F["if (condition) {"]
+    F --> G["  return valueIfTrue"]
+    G --> H["} else {"]
+    H --> I["  return valueIfFalse"]
+    I --> J["}"]
+    
+    K["⚡ When to Use"] --> K1["Simple assignments"]
+    K --> K2["Short conditions"]
+    K --> K3["Inline decisions"]
+    K --> K4["Return statements"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style K fill:#e8f5e8
+```
 
 ---
 
 ## 🚀 आव्हान
 
-एक प्रोग्राम तयार करा जो प्रथम लॉजिकल ऑपरेटरसह लिहिला जातो आणि नंतर Ternary अभिव्यक्ती वापरून पुन्हा लिहिला जातो. तुमची पसंतीची सिंटॅक्स कोणती आहे?
+लॉजिकल ऑपरेटरसह प्रथम लिहिलेले प्रोग्राम तयार करा आणि नंतर ते टर्नरी अभिव्यक्ती वापरून पुन्हा लिहा. तुमची पसंतीची सिंटॅक्स कोणती आहे?
 
 ---
 
-## GitHub Copilot Agent आव्हान 🚀
+## GitHub Copilot Agent Challenge 🚀
 
 Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** या धड्याच्या अनेक निर्णय घेण्याच्या संकल्पना, जसे की if-else स्टेटमेंट्स, switch स्टेटमेंट्स, लॉजिकल ऑपरेटर आणि Ternary अभिव्यक्ती यांचा समावेश असलेला एक व्यापक ग्रेड कॅल्क्युलेटर तयार करा.
+**वर्णन:** या धड्याच्या अनेक निर्णय घेण्याच्या संकल्पनांचा समावेश करणारा व्यापक ग्रेड कॅल्क्युलेटर तयार करा, ज्यामध्ये if-else विधान, switch विधान, लॉजिकल ऑपरेटर आणि टर्नरी अभिव्यक्ती समाविष्ट आहे.
 
-**प्रॉम्प्ट:** एक जावास्क्रिप्ट प्रोग्राम लिहा जो विद्यार्थ्याच्या संख्यात्मक स्को (0-100) घेतो आणि खालील निकषांनुसार त्यांचा लेटर ग्रेड ठरवतो:
+**प्रॉम्प्ट:** JavaScript प्रोग्राम लिहा जो विद्यार्थ्याच्या संख्यात्मक स्कोअर (0-100) घेतो आणि खालील निकषांनुसार त्यांचा लेटर ग्रेड ठरवतो:
 - A: 90-100
 - B: 80-89  
 - C: 70-79
@@ -276,25 +550,25 @@ Agent मोड वापरून खालील आव्हान पूर
 - F: 60 च्या खाली
 
 आवश्यकता:
-1. लेटर ग्रेड ठरवण्यासाठी if-else स्टेटमेंट वापरा
-2. विद्यार्थी पास होतो का (grade >= 60) आणि त्याला सन्मान मिळतो का (grade >= 90) हे तपासण्यासाठी लॉजिकल ऑपरेटर वापरा
-3. प्रत्येक लेटर ग्रेडसाठी विशिष्ट फीडबॅक प्रदान करण्यासाठी switch स्टेटमेंट वापरा
-4. विद्यार्थी पुढच्या कोर्ससाठी पात्र आहे का (grade >= 70) हे ठरवण्यासाठी Ternary ऑपरेटर वापरा
-5. स्को 0 ते 100 दरम्यान आहे याची खात्री करण्यासाठी इनपुट व्हॅलिडेशन समाविष्ट करा
+1. लेटर ग्रेड ठ
+2. विद्यार्थ्याने पास होतो का (grade >= 60) आणि त्याला सन्मान मिळतो का (grade >= 90) हे तपासण्यासाठी लॉजिकल ऑपरेटर वापरा.
+3. प्रत्येक अक्षर ग्रेडसाठी विशिष्ट फीडबॅक देण्यासाठी switch स्टेटमेंट वापरा.
+4. विद्यार्थ्याला पुढच्या कोर्ससाठी पात्रता आहे का (grade >= 70) हे ठरवण्यासाठी टर्नरी ऑपरेटर वापरा.
+5. स्कोअर 0 ते 100 दरम्यान आहे याची खात्री करण्यासाठी इनपुट व्हॅलिडेशन समाविष्ट करा.
 
-59, 60, 89, 90 आणि अवैध इनपुट्स यासारख्या विविध स्कोर्ससह तुमचा प्रोग्राम तपासा.
+59, 60, 89, 90 आणि अमान्य इनपुट्स यासारख्या विविध स्कोअर्ससह तुमचा प्रोग्राम टेस्ट करा.
 
-[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
+[एजंट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
-## व्याख्यानानंतर प्रश्नमंजुषा
+## पोस्ट-लेक्चर क्विझ
 
-[व्याख्यानानंतर प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/12)
+[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/12)
 
 ## पुनरावलोकन आणि स्व-अभ्यास
 
 वापरकर्त्यासाठी उपलब्ध असलेल्या अनेक ऑपरेटरबद्दल अधिक वाचा [MDN वर](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
 
-Josh Comeau च्या अप्रतिम [ऑपरेटर लुकअप](https://joshwcomeau.com/operator-lookup/) वर जा!
+जॉश कोमाऊच्या अप्रतिम [ऑपरेटर लुकअप](https://joshwcomeau.com/operator-lookup/) वरून जा!
 
 ## असाइनमेंट
 
@@ -302,5 +576,105 @@ Josh Comeau च्या अप्रतिम [ऑपरेटर लुकअ
 
 ---
 
+## 🧠 **तुमचे निर्णय घेण्याचे टूलकिट सारांश**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Decisions"] --> B["🔍 Boolean Logic"]
+    A --> C["📊 Conditional Statements"]
+    A --> D["🔗 Logical Operators"]
+    A --> E["⚡ Advanced Patterns"]
+    
+    B --> B1["true/false values"]
+    B --> B2["Comparison operators"]
+    B --> B3["Truthiness concepts"]
+    
+    C --> C1["if statements"]
+    C --> C2["if-else chains"]
+    C --> C3["switch statements"]
+    
+    D --> D1["&& (AND)"]
+    D --> D2["|| (OR)"]
+    D --> D3["! (NOT)"]
+    
+    E --> E1["Ternary operator"]
+    E --> E2["Short-circuit evaluation"]
+    E --> E3["Complex conditions"]
+    
+    F["💡 Key Principles"] --> F1["Clear readable conditions"]
+    F --> F2["Consistent comparison style"]
+    F --> F3["Proper operator precedence"]
+    F --> F4["Efficient evaluation order"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 तुमचा जावास्क्रिप्ट निर्णय घेण्याचा मास्टरी टाइमलाइन
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] तुमच्या ब्राउझर कन्सोलमध्ये तुलना ऑपरेटर सराव करा
+- [ ] तुमचे वय तपासणारे साधे if-else स्टेटमेंट लिहा
+- [ ] आव्हानाचा प्रयत्न करा: टर्नरी ऑपरेटर वापरून if-else पुन्हा लिहा
+- [ ] वेगवेगळ्या "truthy" आणि "falsy" मूल्यांसह काय होते ते तपासा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि कोणतेही गोंधळात टाकणारे संकल्पना पुनरावलोकन करा
+- [ ] GitHub Copilot चॅलेंजमधून सर्वसमावेशक ग्रेड कॅल्क्युलेटर तयार करा
+- [ ] वास्तविक जीवनातील परिस्थितीसाठी साधा निर्णय वृक्ष तयार करा (जसे की काय घालायचे ते निवडणे)
+- [ ] लॉजिकल ऑपरेटरसह एकाधिक अटी एकत्र करण्याचा सराव करा
+- [ ] विविध उपयोगांसाठी switch स्टेटमेंट्ससह प्रयोग करा
+
+### 📅 **तुमचा आठवडाभराचा लॉजिक मास्टरी**
+- [ ] सर्जनशील उदाहरणांसह ऑपरेटर असाइनमेंट पूर्ण करा
+- [ ] विविध सशर्त संरचना वापरून मिनी क्विझ अॅप्लिकेशन तयार करा
+- [ ] एक फॉर्म व्हॅलिडेटर तयार करा जो एकाधिक इनपुट अटी तपासतो
+- [ ] जॉश कोमाऊच्या [ऑपरेटर लुकअप](https://joshwcomeau.com/operator-lookup/) सराव करा
+- [ ] अधिक योग्य सशर्त संरचना वापरण्यासाठी विद्यमान कोड पुनर्रचना करा
+- [ ] शॉर्ट-सर्किट मूल्यांकन आणि कार्यप्रदर्शन परिणामांचा अभ्यास करा
+
+### 🌟 **तुमचा महिनाभराचा परिवर्तन**
+- [ ] जटिल नेस्टेड अटींमध्ये प्रभुत्व मिळवा आणि कोड वाचनीयता टिकवा
+- [ ] परिष्कृत निर्णय घेण्याच्या लॉजिकसह अॅप्लिकेशन तयार करा
+- [ ] विद्यमान प्रकल्पांमध्ये सशर्त लॉजिक सुधारण्यासाठी ओपन सोर्समध्ये योगदान द्या
+- [ ] वेगवेगळ्या सशर्त संरचनांबद्दल आणि प्रत्येकाचा वापर कधी करायचा याबद्दल इतरांना शिकवा
+- [ ] सशर्त लॉजिकसाठी फंक्शनल प्रोग्रामिंग दृष्टिकोन एक्सप्लोर करा
+- [ ] सशर्त सर्वोत्तम पद्धतींसाठी वैयक्तिक संदर्भ मार्गदर्शक तयार करा
+
+### 🏆 **अंतिम निर्णय घेण्याचा चॅम्पियन चेक-इन**
+
+**तुमच्या लॉजिकल थिंकिंग मास्टरीचा उत्सव साजरा करा:**
+- तुम्ही यशस्वीरित्या अंमलात आणलेला सर्वात जटिल निर्णय लॉजिक कोणता आहे?
+- कोणती सशर्त रचना तुम्हाला सर्वात नैसर्गिक वाटते आणि का?
+- लॉजिकल ऑपरेटरबद्दल शिकल्याने तुमच्या समस्या सोडवण्याच्या दृष्टिकोनात कसा बदल झाला आहे?
+- कोणत्या वास्तविक जीवनातील अॅप्लिकेशनला परिष्कृत निर्णय घेण्याच्या लॉजिकचा फायदा होईल?
+
+```mermaid
+journey
+    title Your Logical Thinking Evolution
+    section Today
+      Boolean Confusion: 3: You
+      If-Else Understanding: 4: You
+      Operator Recognition: 5: You
+    section This Week
+      Complex Conditions: 4: You
+      Switch Mastery: 5: You
+      Logical Combinations: 5: You
+    section Next Month
+      Advanced Patterns: 5: You
+      Performance Awareness: 5: You
+      Teaching Others: 5: You
+```
+
+> 🧠 **तुम्ही डिजिटल निर्णय घेण्याच्या कलेत प्रभुत्व मिळवले आहे!** प्रत्येक परस्परसंवादी अॅप्लिकेशन वापरकर्त्याच्या कृती आणि बदलत्या परिस्थितींना हुशारीने प्रतिसाद देण्यासाठी सशर्त लॉजिकवर अवलंबून असते. तुम्हाला आता तुमचे प्रोग्राम विचार करण्यासाठी, मूल्यांकन करण्यासाठी आणि योग्य प्रतिसाद निवडण्यासाठी कसे बनवायचे हे समजले आहे. ही लॉजिकल पायाभूत सुविधा तुम्ही तयार केलेल्या प्रत्येक डायनॅमिक अॅप्लिकेशनला शक्ती देईल! 🎉
+
+---
+
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/2-js-basics/4-arrays-loops/README.md b/translations/mr/2-js-basics/4-arrays-loops/README.md
index 1077639bcc..bf64c5d77c 100644
--- a/translations/mr/2-js-basics/4-arrays-loops/README.md
+++ b/translations/mr/2-js-basics/4-arrays-loops/README.md
@@ -1,45 +1,102 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "9197f8af0fef9be6e81d4dbda23c7e7d",
-  "translation_date": "2025-10-22T15:48:19+00:00",
+  "original_hash": "1710a50a519a6e4a1b40a5638783018d",
+  "translation_date": "2025-11-03T14:14:30+00:00",
   "source_file": "2-js-basics/4-arrays-loops/README.md",
   "language_code": "mr"
 }
 -->
-# जावास्क्रिप्ट मूलभूत गोष्टी: ऍरे आणि लूप्स
-
-![जावास्क्रिप्ट मूलभूत गोष्टी - ऍरे](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.mr.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
+# JavaScript मूलभूत गोष्टी: Arrays आणि Loops
+
+![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.mr.png)
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले
+
+```mermaid
+journey
+    title Your Arrays & Loops Adventure
+    section Array Fundamentals
+      Creating Arrays: 5: You
+      Accessing Elements: 4: You
+      Array Methods: 5: You
+    section Loop Mastery
+      For Loops: 4: You
+      While Loops: 5: You
+      Modern Syntax: 4: You
+    section Data Processing
+      Array + Loops: 5: You
+      Real-world Applications: 4: You
+      Performance Optimization: 5: You
+```
 
 ## व्याख्यानपूर्व प्रश्नमंजुषा
 [व्याख्यानपूर्व प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/13)
 
-कधी विचार केला आहे का की वेबसाइट्स शॉपिंग कार्ट आयटम्स कसे ट्रॅक करतात किंवा तुमची मित्र यादी कशी दाखवतात? यासाठी ऍरे आणि लूप्स उपयोगी ठरतात. ऍरे म्हणजे डिजिटल कंटेनर ज्यामध्ये अनेक माहितीचे तुकडे साठवता येतात, तर लूप्स तुम्हाला ती माहिती कार्यक्षमतेने हाताळण्याची परवानगी देतात, पुनरावृत्ती कोड न वापरता.
+कधी विचार केला आहे की वेबसाइट्स शॉपिंग कार्ट आयटम कसे ट्रॅक करतात किंवा तुमची मित्र यादी कशी दाखवतात? यासाठी arrays आणि loops उपयोगी ठरतात. Arrays म्हणजे डिजिटल कंटेनर आहेत जे अनेक माहितीचे तुकडे ठेवतात, तर loops तुम्हाला ती माहिती कार्यक्षमतेने हाताळण्यास मदत करतात, पुनरावृत्ती कोडशिवाय.
 
-हे दोन संकल्पना एकत्र येऊन तुमच्या प्रोग्राम्समध्ये माहिती हाताळण्यासाठीचा पाया तयार करतात. तुम्ही प्रत्येक पायरी मॅन्युअली लिहिण्यापासून ते शेकडो किंवा हजारो आयटम्स जलद प्रक्रिया करण्यासाठी स्मार्ट, कार्यक्षम कोड तयार करण्यापर्यंत पोहोचाल.
+एकत्रितपणे, हे दोन संकल्पना तुमच्या प्रोग्राम्समध्ये माहिती हाताळण्यासाठी पाया तयार करतात. तुम्ही प्रत्येक पायरी मॅन्युअली लिहिण्यापासून स्मार्ट, कार्यक्षम कोड तयार करण्याकडे जाल, जो शेकडो किंवा हजारो आयटम जलद प्रक्रिया करू शकतो.
 
 या धड्याच्या शेवटी, तुम्ही काही ओळींच्या कोडसह जटिल डेटा कार्ये कशी साध्य करायची ते समजून घ्याल. चला या महत्त्वाच्या प्रोग्रामिंग संकल्पनांचा अभ्यास करूया.
 
-[![ऍरे](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "ऍरे")
+[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
 
-[![लूप्स](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "लूप्स")
+[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
 
-> 🎥 वरील प्रतिमांवर क्लिक करा ऍरे आणि लूप्सबद्दल व्हिडिओ पाहण्यासाठी.
+> 🎥 वरच्या प्रतिमांवर क्लिक करा arrays आणि loops बद्दल व्हिडिओसाठी.
 
 > तुम्ही हा धडा [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) वर घेऊ शकता!
 
-## ऍरे
+```mermaid
+mindmap
+  root((Data Processing))
+    Arrays
+      Structure
+        Square brackets syntax
+        Zero-based indexing
+        Dynamic sizing
+      Operations
+        push/pop
+        shift/unshift
+        indexOf/includes
+      Types
+        Numbers array
+        Strings array
+        Mixed types
+    Loops
+      For Loops
+        Counting iterations
+        Array processing
+        Predictable flow
+      While Loops
+        Condition-based
+        Unknown iterations
+        User input
+      Modern Syntax
+        for...of
+        forEach
+        Functional methods
+    Applications
+      Data Analysis
+        Statistics
+        Filtering
+        Transformations
+      User Interfaces
+        Lists
+        Menus
+        Galleries
+```
+
+## Arrays
 
-ऍरे म्हणजे डिजिटल फाइलिंग कॅबिनेटसारखे - एका ड्रॉवरमध्ये एक दस्तऐवज साठवण्याऐवजी, तुम्ही एकाच संरचित कंटेनरमध्ये अनेक संबंधित आयटम्स व्यवस्थित करू शकता. प्रोग्रामिंगच्या दृष्टीने, ऍरे तुम्हाला अनेक माहितीचे तुकडे एका पॅकेजमध्ये साठवण्याची परवानगी देतात.
+Arrays म्हणजे डिजिटल फाइलिंग कॅबिनेटसारखे - एका ड्रॉवरमध्ये एक दस्तऐवज साठवण्याऐवजी, तुम्ही एकाच संरचित कंटेनरमध्ये अनेक संबंधित आयटम व्यवस्थित करू शकता. प्रोग्रामिंगच्या दृष्टीने, arrays तुम्हाला अनेक माहितीचे तुकडे एका व्यवस्थित पॅकेजमध्ये साठवण्याची परवानगी देतात.
 
-तुम्ही फोटो गॅलरी तयार करत असाल, टू-डू लिस्ट व्यवस्थापित करत असाल किंवा गेममध्ये उच्च स्कोर्स ट्रॅक करत असाल, ऍरे डेटा संघटनासाठी पाया प्रदान करतात. चला ते कसे कार्य करतात ते पाहूया.
+तुम्ही फोटो गॅलरी तयार करत असाल, टू-डू लिस्ट व्यवस्थापित करत असाल किंवा गेममध्ये उच्च स्कोर्स ट्रॅक करत असाल, arrays डेटा संघटनासाठी पाया प्रदान करतात. चला ते कसे कार्य करतात ते पाहूया.
 
-✅ ऍरे सर्वत्र आहेत! तुम्ही ऍरेचा वास्तविक जीवनातील उदाहरण विचार करू शकता का, जसे की सौर पॅनेल ऍरे?
+✅ Arrays सर्वत्र आहेत! तुम्ही arrays चा वास्तविक जीवनातील उदाहरण विचार करू शकता का, जसे की सौर पॅनेल array?
 
-### ऍरे तयार करणे
+### Arrays तयार करणे
 
-ऍरे तयार करणे खूप सोपे आहे - फक्त चौकोनी कंस वापरा!
+Array तयार करणे खूप सोपे आहे - फक्त चौकोनी कंस वापरा!
 
 ```javascript
 // Empty array - like an empty shopping cart waiting for items
@@ -47,9 +104,9 @@ const myArray = [];
 ```
 
 **इथे काय घडत आहे?**
-तुम्ही फक्त चौकोनी कंस `[]` वापरून रिकामे कंटेनर तयार केले आहे. याचा विचार रिकाम्या लायब्ररी शेल्फसारखा करा - ते तुम्हाला हवे असलेले कोणतेही पुस्तक व्यवस्थित ठेवण्यासाठी तयार आहे.
+तुम्ही चौकोनी कंस `[]` वापरून एक रिकामे कंटेनर तयार केले आहे. याचा विचार रिकाम्या लायब्ररी शेल्फसारखा करा - ते तुम्हाला हवे असलेले कोणतेही पुस्तक व्यवस्थित ठेवण्यासाठी तयार आहे.
 
-तुम्ही सुरुवातीपासूनच तुमच्या ऍरेमध्ये प्रारंभिक मूल्ये भरू शकता:
+तुम्ही तुमच्या array ला सुरुवातीपासूनच प्रारंभिक मूल्ये भरून देखील तयार करू शकता:
 
 ```javascript
 // Your ice cream shop's flavor menu
@@ -63,25 +120,55 @@ const scores = [95, 87, 92, 78, 85];
 ```
 
 **थंड गोष्टी लक्षात ठेवा:**
-- तुम्ही एकाच ऍरेमध्ये मजकूर, संख्या किंवा खरे/खोटे मूल्ये साठवू शकता
+- तुम्ही एकाच array मध्ये मजकूर, संख्या किंवा अगदी true/false मूल्ये साठवू शकता
 - प्रत्येक आयटमला अल्पविरामाने वेगळे करा - सोपे!
-- संबंधित माहिती एकत्र ठेवण्यासाठी ऍरे योग्य आहेत
+- संबंधित माहिती एकत्र ठेवण्यासाठी arrays योग्य आहेत
+
+```mermaid
+flowchart LR
+    A["📦 Arrays"] --> B["Create [ ]"]
+    A --> C["Store Multiple Items"]
+    A --> D["Access by Index"]
+    
+    B --> B1["const arr = []"]
+    B --> B2["const arr = [1,2,3]"]
+    
+    C --> C1["Numbers"]
+    C --> C2["Strings"]
+    C --> C3["Booleans"]
+    C --> C4["Mixed Types"]
+    
+    D --> D1["arr[0] = first"]
+    D --> D2["arr[1] = second"]
+    D --> D3["arr[2] = third"]
+    
+    E["📊 Array Index"] --> E1["Index 0: First"]
+    E --> E2["Index 1: Second"]
+    E --> E3["Index 2: Third"]
+    E --> E4["Index n-1: Last"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-### ऍरे इंडेक्सिंग
+### Array Indexing
 
-इथे काहीतरी असामान्य वाटू शकते: ऍरे त्यांच्या आयटम्सची संख्या 0 पासून सुरू करतात, 1 पासून नाही. ही शून्य-आधारित इंडेक्सिंग संगणक मेमरी कशी कार्य करते याच्या मुळाशी आहे - प्रोग्रामिंग भाषांमध्ये जसे की C मध्ये सुरुवातीपासूनच ही पद्धत आहे. ऍरेमधील प्रत्येक जागेला **इंडेक्स** नावाचा स्वतःचा पत्ता क्रमांक मिळतो.
+इथे काहीतरी असामान्य वाटू शकते: arrays त्यांच्या आयटम्सची संख्या 0 पासून सुरू करतात, 1 पासून नाही. ही zero-based indexing संगणक मेमरी कशी कार्य करते याच्या मुळाशी आहे - प्रोग्रामिंग भाषांमध्ये C सारख्या सुरुवातीच्या दिवसांपासून ही एक परंपरा आहे. Array मधील प्रत्येक जागेला **index** नावाचा स्वतःचा पत्ता क्रमांक मिळतो.
 
-| इंडेक्स | मूल्य | वर्णन |
+| Index | Value | वर्णन |
 |-------|-------|-------------|
-| 0 | "चॉकलेट" | पहिला घटक |
-| 1 | "स्ट्रॉबेरी" | दुसरा घटक |
-| 2 | "व्हॅनिला" | तिसरा घटक |
-| 3 | "पिस्ता" | चौथा घटक |
-| 4 | "रॉकी रोड" | पाचवा घटक |
+| 0 | "Chocolate" | पहिला घटक |
+| 1 | "Strawberry" | दुसरा घटक |
+| 2 | "Vanilla" | तिसरा घटक |
+| 3 | "Pistachio" | चौथा घटक |
+| 4 | "Rocky Road" | पाचवा घटक |
 
-✅ तुम्हाला आश्चर्य वाटते का की ऍरे शून्य इंडेक्सपासून सुरू होतात? काही प्रोग्रामिंग भाषांमध्ये इंडेक्स 1 पासून सुरू होतो. यामागे एक मनोरंजक इतिहास आहे, जो तुम्ही [विकिपीडियावर वाचू शकता](https://en.wikipedia.org/wiki/Zero-based_numbering).
+✅ तुम्हाला आश्चर्य वाटते का की arrays 0 index पासून सुरू होतात? काही प्रोग्रामिंग भाषांमध्ये indexes 1 पासून सुरू होतात. यामागे एक मनोरंजक इतिहास आहे, जो तुम्ही [Wikipedia वर वाचू शकता](https://en.wikipedia.org/wiki/Zero-based_numbering).
 
-**ऍरे घटकांमध्ये प्रवेश करणे:**
+**Array घटकांमध्ये प्रवेश करणे:**
 
 ```javascript
 const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
@@ -93,11 +180,11 @@ console.log(iceCreamFlavors[4]); // "Rocky Road" - last element
 ```
 
 **इथे काय घडते ते समजून घ्या:**
-- **वापरते** चौकोनी कंस नोटेशनसह इंडेक्स क्रमांक घटकांमध्ये प्रवेश करण्यासाठी
+- **वापरते** square bracket notation index क्रमांकासह घटकांमध्ये प्रवेश करण्यासाठी
 - **परत करते** त्या विशिष्ट स्थानावर साठवलेले मूल्य
-- **सुरू करते** 0 पासून मोजणे, ज्यामुळे पहिला घटक इंडेक्स 0 बनतो
+- **सुरू करते** 0 पासून मोजणे, पहिला घटक index 0 बनवणे
 
-**ऍरे घटक बदलणे:**
+**Array घटक बदलणे:**
 
 ```javascript
 // Change an existing value
@@ -109,16 +196,16 @@ iceCreamFlavors[5] = "Cookie Dough";
 console.log(iceCreamFlavors[5]); // "Cookie Dough"
 ```
 
-**वरील उदाहरणात आम्ही:**
-- **बदलले** इंडेक्स 4 वरील घटक "रॉकी रोड" ते "बटर पेकन"
-- **जोडले** नवीन घटक "कुकी डो" इंडेक्स 5 वर
-- **स्वतःहून वाढवले** ऍरेची लांबी जेव्हा विद्यमान मर्यादेपलीकडे आयटम जोडले
+**वर दिलेल्या उदाहरणात, आम्ही:**
+- **बदलले** index 4 वरील घटक "Rocky Road" वरून "Butter Pecan" मध्ये
+- **जोडले** नवीन घटक "Cookie Dough" index 5 वर
+- **स्वतःहून वाढवले** array लांबी जेव्हा विद्यमान मर्यादेपेक्षा जास्त जोडले
 
-### ऍरेची लांबी आणि सामान्य पद्धती
+### Array लांबी आणि सामान्य पद्धती
 
-ऍरेमध्ये अंगभूत गुणधर्म आणि पद्धती असतात ज्यामुळे डेटा हाताळणे खूप सोपे होते.
+Arrays मध्ये अंगभूत गुणधर्म आणि पद्धती असतात जे डेटा हाताळणे खूप सोपे करतात.
 
-**ऍरेची लांबी शोधणे:**
+**Array लांबी शोधणे:**
 
 ```javascript
 const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
@@ -130,11 +217,11 @@ console.log(iceCreamFlavors.length); // 6
 ```
 
 **लक्षात ठेवण्याचे महत्त्वाचे मुद्दे:**
-- **परत करते** ऍरेमधील एकूण घटकांची संख्या
+- **परत करते** array मधील एकूण घटकांची संख्या
 - **स्वतःहून अपडेट होते** जेव्हा घटक जोडले किंवा काढले जातात
-- **प्रदान करते** लूप्स आणि सत्यापनासाठी उपयुक्त गतिशील संख्या
+- **प्रदान करते** loops आणि validation साठी एक गतिशील संख्या
 
-**महत्त्वाच्या ऍरे पद्धती:**
+**महत्त्वाच्या Array पद्धती:**
 
 ```javascript
 const fruits = ["apple", "banana", "orange"];
@@ -153,32 +240,99 @@ const hasApple = fruits.includes("apple"); // Returns true
 ```
 
 **या पद्धती समजून घ्या:**
-- **जोडते** घटक `push()` (शेवटी) आणि `unshift()` (सुरुवातीला)
-- **काढते** घटक `pop()` (शेवटी) आणि `shift()` (सुरुवातीला)
+- **जोडते** घटक `push()` (शेवटी) आणि `unshift()` (सुरुवातीला) सह
+- **काढते** घटक `pop()` (शेवटी) आणि `shift()` (सुरुवातीला) सह
 - **शोधते** घटक `indexOf()` सह आणि अस्तित्व तपासते `includes()` सह
-- **परत करते** उपयुक्त मूल्ये जसे की काढलेले घटक किंवा स्थान इंडेक्स
-
-✅ स्वतः प्रयत्न करा! तुमच्या ब्राउझरच्या कन्सोलमध्ये ऍरे तयार करा आणि त्यावर प्रक्रिया करा.
-
-## लूप्स
-
-चार्ल्स डिकन्सच्या कादंबऱ्यांमधील प्रसिद्ध शिक्षा आठवा जिथे विद्यार्थ्यांना स्लेटवर ओळी वारंवार लिहाव्या लागायच्या. कल्पना करा की तुम्ही कोणाला "ही वाक्ये 100 वेळा लिहा" असे सांगू शकता आणि ते आपोआप पूर्ण होईल. लूप्स तुमच्या कोडसाठी हेच करतात.
-
-लूप्स म्हणजे एक थकवा न जाणवणारा सहाय्यक जो कामे पुनरावृत्तीशिवाय अचूकपणे करू शकतो. तुम्हाला शॉपिंग कार्टमधील प्रत्येक आयटम तपासायचा असेल किंवा अल्बममधील सर्व फोटो दाखवायचे असतील, लूप्स ही पुनरावृत्ती कार्यक्षमतेने हाताळतात.
+- **परत करते** उपयुक्त मूल्ये जसे की काढलेले घटक किंवा स्थान क्रमांक
+
+✅ स्वतः प्रयत्न करा! तुमच्या ब्राउझरच्या कन्सोलमध्ये स्वतः तयार केलेल्या array वर प्रक्रिया करा.
+
+### 🧠 **Array मूलभूत गोष्टी तपासणी: तुमचा डेटा व्यवस्थित करणे**
+
+**तुमच्या array समज तपासा:**
+- तुम्हाला का वाटते की arrays 0 पासून मोजायला सुरुवात करतात, 1 पासून नाही?
+- जर तुम्ही अस्तित्वात नसलेल्या index वर प्रवेश करण्याचा प्रयत्न केला (जसे की `arr[100]` एका 5-घटकांच्या array मध्ये) तर काय होते?
+- तुम्ही arrays च्या उपयोगासाठी तीन वास्तविक जीवनातील परिस्थिती विचार करू शकता का?
+
+```mermaid
+stateDiagram-v2
+    [*] --> EmptyArray: const arr = []
+    EmptyArray --> WithItems: Add elements
+    WithItems --> Accessing: Use indexes
+    Accessing --> Modifying: Change values
+    Modifying --> Processing: Use methods
+    
+    WithItems --> WithItems: push(), unshift()
+    Processing --> Processing: pop(), shift()
+    
+    note right of Accessing
+        Zero-based indexing
+        arr[0] = first element
+    end note
+    
+    note right of Processing
+        Built-in methods
+        Dynamic operations
+    end note
+```
 
-जावास्क्रिप्टमध्ये निवडण्यासाठी अनेक प्रकारचे लूप्स आहेत. प्रत्येक प्रकार कधी वापरायचा ते समजून घेऊया.
+> **वास्तविक जगातील अंतर्दृष्टी**: प्रोग्रामिंगमध्ये arrays सर्वत्र आहेत! सोशल मीडिया फीड्स, शॉपिंग कार्ट्स, फोटो गॅलरी, प्लेलिस्ट गाणी - ते सर्व arrays आहेत!
+
+## Loops
+
+चार्ल्स डिकन्सच्या कादंबऱ्यांमधील प्रसिद्ध शिक्षा विचार करा जिथे विद्यार्थ्यांना स्लेटवर ओळी वारंवार लिहाव्या लागायच्या. कल्पना करा की तुम्ही कोणाला "ही वाक्ये 100 वेळा लिहा" असे सांगू शकता आणि ते आपोआप पूर्ण होईल. Loops तुमच्या कोडसाठी हेच करतात.
+
+Loops म्हणजे एक tireless सहायक आहे जो कार्ये पुनरावृत्तीशिवाय अचूकपणे करू शकतो. तुम्हाला शॉपिंग कार्टमधील प्रत्येक आयटम तपासायचा असेल किंवा अल्बममधील सर्व फोटो दाखवायचे असतील, loops पुनरावृत्ती कार्यक्षमतेने हाताळतात.
+
+JavaScript अनेक प्रकारचे loops प्रदान करते. प्रत्येक प्रकार तपासूया आणि ते कधी वापरायचे ते समजून घेऊया.
+
+```mermaid
+flowchart TD
+    A["🔄 Loop Types"] --> B["For Loop"]
+    A --> C["While Loop"]
+    A --> D["For...of Loop"]
+    A --> E["forEach Method"]
+    
+    B --> B1["Known iterations"]
+    B --> B2["Counter-based"]
+    B --> B3["for(init; condition; increment)"]
+    
+    C --> C1["Unknown iterations"]
+    C --> C2["Condition-based"]
+    C --> C3["while(condition)"]
+    
+    D --> D1["Modern ES6+"]
+    D --> D2["Array iteration"]
+    D --> D3["for(item of array)"]
+    
+    E --> E1["Functional style"]
+    E --> E2["Array method"]
+    E --> E3["array.forEach(callback)"]
+    
+    F["⏰ When to Use"] --> F1["For: Counting, indexes"]
+    F --> F2["While: User input, searching"]
+    F --> F3["For...of: Simple iteration"]
+    F --> F4["forEach: Functional programming"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
 
-### फॉर लूप
+### For Loop
 
-`for` लूप म्हणजे टाइमर सेट करण्यासारखे आहे - तुम्हाला नक्की किती वेळा काहीतरी घडायला हवे आहे ते माहित आहे. हे खूप व्यवस्थित आणि अंदाजानुसार आहे, ज्यामुळे ते ऍरेसह काम करताना किंवा गोष्टी मोजण्याची आवश्यकता असताना योग्य बनते.
+`for` loop म्हणजे टाइमर सेट करणे - तुम्हाला नक्की किती वेळा काहीतरी घडायचे आहे ते माहित आहे. हे खूप व्यवस्थित आणि अंदाजानुसार आहे, जेव्हा तुम्ही arrays सह काम करत असता किंवा गोष्टी मोजण्याची गरज असते तेव्हा ते परिपूर्ण बनते.
 
-**फॉर लूप संरचना:**
+**For Loop संरचना:**
 
 | घटक | उद्देश | उदाहरण |
 |-----------|---------|----------|
-| **प्रारंभ** | सुरुवातीचा बिंदू सेट करते | `let i = 0` |
-| **अट** | कधी सुरू ठेवायचे | `i < 10` |
-| **वाढ** | कसे अपडेट करायचे | `i++` |
+| **Initialization** | सुरुवातीचा बिंदू सेट करते | `let i = 0` |
+| **Condition** | कधी सुरू ठेवायचे | `i < 10` |
+| **Increment** | कसे अपडेट करायचे | `i++` |
 
 ```javascript
 // Counting from 0 to 9
@@ -193,24 +347,51 @@ for (let i = 0; i < testScores.length; i++) {
 }
 ```
 
-**पायरी-पायरीने काय घडते ते येथे आहे:**
-- **प्रारंभ करते** काउंटर व्हेरिएबल `i` 0 वर
-- **तपासते** अट `i < 10` प्रत्येक पुनरावृत्तीपूर्वी
-- **अंमलात आणते** कोड ब्लॉक जेव्हा अट खरी असते
-- **वाढवते** `i` प्रत्येक पुनरावृत्तीनंतर `i++` सह
-- **थांबते** जेव्हा अट खोटी होते (जेव्हा `i` 10 पोहोचते)
+**पायरी-पायरीने, इथे काय घडत आहे:**
+- **सुरुवात करते** counter variable `i` ला 0 वर सेट करून
+- **तपासते** condition `i < 10` प्रत्येक iteration च्या आधी
+- **अंमलात आणते** code block जेव्हा condition true असते
+- **वाढवते** `i` प्रत्येक iteration नंतर 1 ने `i++` सह
+- **थांबते** जेव्हा condition false होते (जेव्हा `i` 10 वर पोहोचते)
+
+✅ हा कोड ब्राउझर कन्सोलमध्ये चालवा. Counter, condition किंवा iteration expression मध्ये छोटे बदल केल्यावर काय होते? तुम्ही ते उलट चालवू शकता का, countdown तयार करत?
+
+### 🗓️ **For Loop मास्टरी तपासणी: नियंत्रित पुनरावृत्ती**
+
+**तुमच्या for loop समज तपासा:**
+- For loop चे तीन भाग कोणते आहेत आणि प्रत्येक भाग काय करतो?
+- तुम्ही array मधून उलट कसे loop करू शकता?
+- Increment भाग (`i++`) विसरल्यास काय होते?
+
+```mermaid
+flowchart TD
+    A["🚀 Start For Loop"] --> B["Initialize: let i = 0"]
+    B --> C{"Condition: i < array.length?"}
+    C -->|true| D["Execute code block"]
+    D --> E["Increment: i++"]
+    E --> C
+    C -->|false| F["✅ Exit loop"]
+    
+    G["📋 Common Patterns"] --> G1["for(let i=0; i<n; i++)"]
+    G --> G2["for(let i=n-1; i>=0; i--)"]
+    G --> G3["for(let i=0; i<arr.length; i+=2)"]
+    
+    style A fill:#e3f2fd
+    style F fill:#e8f5e8
+    style G fill:#fff3e0
+```
 
-✅ हे कोड ब्राउझर कन्सोलमध्ये चालवा. काउंटर, अट किंवा पुनरावृत्ती अभिव्यक्तीमध्ये छोटे बदल केल्यावर काय होते? तुम्ही ते उलट चालवू शकता का, काउंटडाउन तयार करत?
+> **Loop ज्ञान**: For loops परिपूर्ण आहेत जेव्हा तुम्हाला नक्की किती वेळा काहीतरी पुनरावृत्ती करायचे आहे ते माहित असते. Array प्रक्रिया करण्यासाठी ते सर्वात सामान्य निवड आहेत!
 
-### व्हाइल लूप
+### While Loop
 
-`while` लूप म्हणजे "हे करत रहा जोपर्यंत..." असे सांगण्यासारखे आहे - तुम्हाला नक्की किती वेळा ते चालेल हे माहित नसते, पण तुम्हाला कधी थांबायचे ते माहित असते. हे अशा गोष्टींसाठी योग्य आहे जसे की वापरकर्त्याने तुम्हाला आवश्यक असलेले इनपुट दिले नाही तोपर्यंत विचारणे किंवा तुम्हाला हवे असलेले डेटा शोधणे.
+`while` loop म्हणजे "हे करत रहा जोपर्यंत..." - तुम्हाला नक्की किती वेळा ते चालेल हे माहित नसते, पण तुम्हाला कधी थांबायचे आहे ते माहित असते. हे अशा गोष्टींसाठी परिपूर्ण आहे जसे की वापरकर्त्याला आवश्यक इनपुट देईपर्यंत विचारणे किंवा तुम्हाला हवे असलेले डेटा शोधेपर्यंत शोधणे.
 
-**व्हाइल लूप वैशिष्ट्ये:**
-- **सुरू ठेवते** अट खरी असेपर्यंत अंमलात आणणे
-- **आवश्यक आहे** कोणत्याही काउंटर व्हेरिएबल्सचे मॅन्युअल व्यवस्थापन
-- **तपासते** अट प्रत्येक पुनरावृत्तीपूर्वी
-- **जोखीम** घेते अनंत लूप्सची जर अट कधी खोटी झाली नाही
+**While Loop वैशिष्ट्ये:**
+- **सुरू ठेवते** condition true असताना अंमलात आणणे
+- **मागणी करते** कोणत्याही counter variables चे मॅन्युअल व्यवस्थापन
+- **तपासते** condition प्रत्येक iteration च्या आधी
+- **धोक्याचा** सामना करते infinite loops चा जर condition कधी false होत नसेल
 
 ```javascript
 // Basic counting example
@@ -236,16 +417,50 @@ if (attempts >= maxAttempts) {
 ```
 
 **या उदाहरणे समजून घ्या:**
-- **व्यवस्थापित करते** काउंटर व्हेरिएबल `i` लूप बॉडीमध्ये मॅन्युअली
-- **वाढवते** काउंटर अनंत लूप्स टाळण्यासाठी
+- **व्यवस्थापित करते** counter variable `i` loop body मध्ये मॅन्युअली
+- **वाढवते** counter infinite loops टाळण्यासाठी
 - **प्रात्यक्षिक देते** वापरकर्ता इनपुट आणि प्रयत्न मर्यादेसह व्यावहारिक उपयोग केस
-- **सुरक्षा यंत्रणा समाविष्ट करते** अंतहीन अंमलबजावणी टाळण्यासाठी
+- **सुरक्षितता यंत्रणा समाविष्ट करते** अंतहीन अंमलात टाळण्यासाठी
+
+### ♾️ **While Loop ज्ञान तपासणी: Condition-Based पुनरावृत्ती**
+
+**तुमच्या while loop समज तपासा:**
+- While loops वापरताना मुख्य धोका काय आहे?
+- तुम्ही for loop ऐवजी while loop कधी निवडाल?
+- तुम्ही infinite loops कसे टाळू शकता?
+
+```mermaid
+flowchart LR
+    A["🔄 While vs For"] --> B["While Loop"]
+    A --> C["For Loop"]
+    
+    B --> B1["Unknown iterations"]
+    B --> B2["Condition-driven"]
+    B --> B3["User input, searching"]
+    B --> B4["⚠️ Risk: infinite loops"]
+    
+    C --> C1["Known iterations"]
+    C --> C2["Counter-driven"]
+    C --> C3["Array processing"]
+    C --> C4["✅ Safe: predictable end"]
+    
+    D["🛡️ Safety Tips"] --> D1["Always modify condition variable"]
+    D --> D2["Include escape conditions"]
+    D --> D3["Set maximum iteration limits"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+```
+
+> **सुरक्षितता प्रथम**: While loops शक्तिशाली आहेत पण काळजीपूर्वक condition व्यवस्थापनाची आवश्यकता आहे. तुमचे loop condition शेवटी false होईल याची खात्री करा!
 
-### आधुनिक लूप पर्याय
+### आधुनिक Loop पर्याय
 
-जावास्क्रिप्ट आधुनिक लूप सिंटॅक्स ऑफर करते ज्यामुळे तुमचा कोड अधिक वाचनीय आणि कमी त्रुटी-प्रवण होतो.
+JavaScript आधुनिक loop syntax प्रदान करते जे तुमचा कोड अधिक वाचनीय आणि कमी त्रुटी-प्रवण बनवू शकतो.
 
-**फॉर...ऑफ लूप (ES6+):**
+**For...of Loop (ES6+):**
 
 ```javascript
 const colors = ["red", "green", "blue", "yellow"];
@@ -261,10 +476,10 @@ for (let i = 0; i < colors.length; i++) {
 }
 ```
 
-**फॉर...ऑफचे मुख्य फायदे:**
-- **काढून टाकते** इंडेक्स व्यवस्थापन आणि संभाव्य ऑफ-बाय-वन त्रुटी
-- **प्रदान करते** ऍरे घटकांमध्ये थेट प्रवेश
-- **सुधारते** कोड वाचनीयता आणि सिंटॅक्सची गुंतागुंत कमी करते
+**For...of चे मुख्य फायदे:**
+- **काढून टाकते** index व्यवस्थापन आणि संभाव्य off-by-one त्रुटी
+- **प्रदान करते** array घटकांमध्ये थेट प्रवेश
+- **सुधारते** कोड वाचनीयता आणि syntax जटिलता कमी करते
 
 **forEach पद्धत:**
 
@@ -280,19 +495,45 @@ prices.forEach((price, index) => {
 prices.forEach(price => console.log(`Price: $${price}`));
 ```
 
-**forEachबद्दल तुम्हाला काय माहित असणे आवश्यक आहे:**
-- **अंमलात आणते** प्रत्येक ऍरे घटकासाठी एक फंक्शन
-- **प्रदान करते** घटक मूल्य आणि इंडेक्स दोन्ही पॅरामीटर्स म्हणून
-- **थांबवू शकत नाही** लवकर (पारंपरिक लूप्सच्या विपरीत)
-- **परत करते** अनिर्दिष्ट (नवीन ऍरे तयार करत नाही)
+**forEach बद्दल तुम्हाला काय माहित असणे आवश्यक आहे:**
+- **अंमलात आणते** प्रत्येक array घटकासाठी एक function
+- **प्रदान करते** घटक मूल्य आणि index दोन्ही parameters म्हणून
+- **थांबवू शकत नाही** लवकर (पारंपरिक loops च्या विपरीत)
+- **परत करते** undefined (नवीन array तयार करत नाही)
+
+✅ तुम्ही for loop vs. while loop का निवडाल? StackOverflow वर 17K दर्शकांना याच प्रश्नाचे उत्तर हवे होते, आणि काही मते [तुमच्यासाठी मनोरंजक असू शकतात](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+### 🎨 **आधुनिक Loop Syntax तपासणी: ES6+ स्वीकारणे**
+
+**तुमच्या आधुनिक JavaScript समज तपासा:**
+- पारंपरिक for loops च्या तुलनेत `for...of` चे फायदे काय आहेत?
+- तुम्ही अजूनही पारंपरिक for loops का निवडाल?
+- `forEach` आणि `map` मध्ये काय फरक आहे?
+
+```mermaid
+quadrantChart
+    title Loop Selection Guide
+    x-axis Traditional --> Modern
+    y-axis Simple --> Complex
+    quadrant-1 Modern Complex
+    quadrant-2 Traditional Complex
+    quadrant-3 Traditional Simple
+    quadrant-4 Modern Simple
+    
+    Traditional For: [0.2, 0.7]
+    While Loop: [0.3, 0.6]
+    For...of: [0.8, 0.3]
+    forEach: [0.9, 0.4]
+    Array Methods: [0.8, 0.8]
+```
 
-✅ तुम्ही फॉर लूप आणि व्हाइल लूप का निवडाल? 17K दर्शकांना याच प्रश्नाचे उत्तर हवे होते StackOverflow वर, आणि काही मते [तुमच्यासाठी मनोरंजक असू शकतात](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+> **आधुनिक प्रवृत्ती**: ES6+ syntax जसे की `for...of` आणि `forEach` array iteration साठी प्राधान्य दिले जाते कारण ते स्वच्छ आणि कमी त्रुटी-प्रवण आहे!
 
-## लूप्स आणि ऍरे
+## Loops आणि Arrays
 
-ऍरेसह लूप्स एकत्र करणे शक्तिशाली डेटा प्रक्रिया क्षमता तयार करते. ही जोडणी अनेक प्रोग्रामिंग कार्यांसाठी मूलभूत आहे, यादी दाखवण्यापासून ते आकडेवारी मोजण्यापर्यंत.
+Arrays सह loops एकत्र करणे शक्तिशाली डेटा प्रक्रिया क्षमता तयार करते. ही जोडणी अनेक प्रोग्रामिंग कार्यांसाठी मूलभूत आहे, यादी दाखवण्यापासून ते आकडेवारी मोजण्यापर्यंत.
 
-**पारंपरिक ऍरे प्रक्रिया:**
+**पारंपरिक Array प्रक्रिया:**
 
 ```javascript
 const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
@@ -309,10 +550,10 @@ for (const flavor of iceCreamFlavors) {
 ```
 
 **प्रत्येक दृष्टिकोन समजून घ्या:**
-- **वापरते** ऍरे लांबी गुणधर्म लूप सीमा निश्चित करण्यासाठी
-- **प्रवेश करते** घटकांमध्ये पारंपरिक फॉर लूप्समध्ये इंडेक्सद्वारे
-- **प्रदान करते** थेट घटक प्रवेश फॉर...ऑफ लूप्समध्ये
-- **प्रक्रिया करते** प्रत्येक ऍरे घटक एकदाच अचूकपणे
+- **वापरते** array लांबी गुणधर्म loop सीमा निश्चित करण्यासाठी
+- **प्रवेश करते** घटक index द्वारे पारंपरिक for loops मध्ये
+- **प्रदान करते** थेट घटक प्रवेश for...of loops मध्ये
+- **प्रक्रिया करते** प्रत्येक array घटक एकदाच अचूकपणे
 
 **व्यावहारिक डेटा प्रक्रिया उदाहरण:**
 
@@ -342,45 +583,176 @@ console.log(`Highest: ${highestGrade}`);
 console.log(`Lowest: ${lowestGrade}`);
 ```
 
-**हा कोड कसा कार्य करतो ते येथे आहे:**
-- **प्रारंभ करते** ट्रॅकिंग व्हेरिएबल्स साठी एकूण आणि टोक
-- **प्रक्रिया करते** प्रत्येक ग्रेड एका कार्यक्षम लूपसह
-- **संचयित करते** सरासरी गणनेसाठी एकूण
-- **ट्रॅक करते** उच्च आणि कमी मूल्ये पुनरावृत्ती दरम्यान
-- **गणना करते** अंतिम आकडेवारी लूप पूर्ण झाल्यानंतर
-
-✅ तुमच्या स्वतःच्या ऍरेवर लूपिंग करून ब्राउझरच्या कन्सोलमध्ये प्रयोग करा.
+**हा कोड कसा कार्य करतो:**
+- **सुरुवात करते** sum आणि extremes साठी tracking variables
+- **प्रक्रिया करते** प्रत्येक grade एकाच कार्यक्षम loop सह
+- **संचयित करते** average calculation साठी एकूण
+- **ट्रॅक करते** iteration दरम्यान उच्चतम आणि न्यूनतम मूल्ये
+- **मोजते** अंतिम आकडेवारी loop पूर्ण झाल्यानंतर
+
+✅ तुमच्या ब्राउझरच्या कन्सोलमध्ये स्वतः तयार केलेल्या array वर loop करून प्रयोग करा.
+
+```mermaid
+flowchart TD
+    A["📦 Array Data"] --> B["🔄 Loop Processing"]
+    B --> C["📈 Results"]
+    
+    A1["[85, 92, 78, 96, 88]"] --> A
+    
+    B --> B1["Calculate total"]
+    B --> B2["Find min/max"]
+    B --> B3["Count conditions"]
+    B --> B4["Transform data"]
+    
+    C --> C1["Average: 87.8"]
+    C --> C2["Highest: 96"]
+    C --> C3["Passing: 5/5"]
+    C --> C4["Letter grades"]
+    
+    D["⚡ Processing Patterns"] --> D1["Accumulation (sum)"]
+    D --> D2["Comparison (min/max)"]
+    D --> D3["Filtering (conditions)"]
+    D --> D4["Mapping (transformation)"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#f3e5f5
+```
 
 ---
 
 ## GitHub Copilot Agent Challenge 🚀
 
-Agent मोड वापरून खालील आव्हान पूर्ण करा:
-
-**वर्णन:** ऍरे आणि लूप्स एकत्र करून डेटासेटचे विश्लेषण करण्यासाठी आणि अर्थपूर्ण अंतर्दृष्टी निर्माण करण्यासाठी एक व्यापक डेटा प्रक्रिया फंक्शन तयार करा.
+Agent mode वापरून खालील challenge पूर्ण करा:
 
-**प्रॉम्प्ट:** `analyzeGrades` नावाचे एक फंक्शन तयार करा जे विद्यार्थ्यांच्या ग्रेड ऑब्जेक्ट्सचा ऍरे घेते (प्रत्येकामध्ये नाव आणि स्कोअर गुणधर्म असतो) आणि आकडेवारीसह एक ऑब्जेक्ट परत करते ज्यामध्ये उच्चतम स्कोअर, सर्वात कमी स्कोअर, सरासरी स्कोअर, पास झालेल्या विद्यार्थ्यांची संख्या (स्कोअर >= 70), आणि सरासरीपेक्षा जास्त स्कोअर असलेल्या विद्यार्थ्यांची नावे असलेला ऍरे समाविष्ट आहे. तुमच्या समाधानात किमान दोन वेगवेगळ्या लूप प्रकारांचा वापर करा.
+**वर्णन:** एक व्यापक डेटा प्रक्रिया function तयार करा जे arrays आणि loops एकत्र करून dataset चे विश्लेषण करते आणि अर्थपूर्ण अंतर्दृष्टी निर्माण करते.
 
-Agent मोडबद्दल अधिक जाणून घ्या [इथे](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
+**Prompt:** `analyzeGrades` नावाचे function तयार करा जे student grade objects च्या array (प्रत्येकात name आणि score गुणधर्म असतो) घेते आणि statistics सह object परत करते ज्यामध्ये उच्चतम score, न्यूनतम score, सरासरी score, पास झालेल्या विद्यार्थ्यांची संख्या (score >= 70), आणि सरासरीपेक्षा जास्त score असलेल्या विद्यार्थ्यांची नावे असलेला array समाविष्ट आहे. तुमच्या solution मध्ये किमान दोन वेगवेगळ्या loop प्रकारांचा वापर करा.
 
-## 🚀 आव्हान
+Agent mode बद्दल अधिक जाणून घ्या [इथे](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
 
-जावास्क्रिप्ट अनेक आधुनिक ऍरे पद्धती ऑफर करते ज्या विशिष्ट कार्यांसाठी पारंपरिक लूप्सची जागा घेऊ शकतात. [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), आणि [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) यांचा अभ्यास करा.
+## 🚀 Challenge
+JavaScript अनेक आधुनिक array पद्धती प्रदान करते ज्या विशिष्ट कार्यांसाठी पारंपरिक loops ची जागा घेऊ शकतात. [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), आणि [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) यांचा अभ्यास करा.
 
-**तुमचे आव्हान:** विद्यार्थ्यांच्या ग्रेड्सचे उदाहरण किमान तीन वेगवेगळ्या ऍरे पद्धतींचा वापर करून पुन्हा तयार करा. आधुनिक जावास्क्रिप्ट सिंटॅक्ससह कोड किती स्वच्छ आणि अधिक वाचनीय होतो ते लक्षात घ्या.
+**तुमचं आव्हान:** कमीतकमी तीन वेगवेगळ्या array पद्धती वापरून विद्यार्थ्यांच्या गुणांचे उदाहरण पुन्हा लिहा. आधुनिक JavaScript सिंटॅक्ससह कोड किती स्वच्छ आणि वाचनीय होतो ते लक्षात घ्या.
 
-## व्याख्यानोत्तर प्रश्नमंजुषा
-[व्याख्यानोत्तर प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/14)
+## व्याख्यानानंतरचा क्विझ
+[व्याख्यानानंतरचा क्विझ](https://ff-quizzes.netlify.app/web/quiz/14)
 
 ## पुनरावलोकन आणि स्व-अभ्यास
 
-जावास्क्रिप्टमधील ऍरेमध्ये अनेक पद्धती असतात, ज्या डेटा हाताळण्यासाठी अत्यंत उपयुक्त असतात. [या पद्धतींबद्दल वाचा](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) आणि तुमच्या स्वतःच्या ऍरेवर काही पद्धती वापरून पहा (जसे की push, pop, slice आणि splice).
+JavaScript मधील arrays मध्ये अनेक पद्धती असतात ज्या डेटा manipulation साठी अत्यंत उपयुक्त असतात. [या पद्धतींबद्दल वाचा](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) आणि तुमच्या स्वतःच्या array वर काही पद्धती (जसे की push, pop, slice आणि splice) वापरून पहा.
 
 ## असाइनमेंट
 
-[ऍरेवर लूप करा](assignment.md)
+[Loop an Array](assignment.md)
+
+---
+
+## 📊 **तुमचं Arrays & Loops टूलकिट सारांश**
+
+```mermaid
+graph TD
+    A["🎯 Arrays & Loops Mastery"] --> B["📦 Array Fundamentals"]
+    A --> C["🔄 Loop Types"]
+    A --> D["🔗 Data Processing"]
+    A --> E["🎨 Modern Techniques"]
+    
+    B --> B1["Creation: [ ]"]
+    B --> B2["Indexing: arr[0]"]
+    B --> B3["Methods: push, pop"]
+    B --> B4["Properties: length"]
+    
+    C --> C1["For: Known iterations"]
+    C --> C2["While: Condition-based"]
+    C --> C3["For...of: Direct access"]
+    C --> C4["forEach: Functional"]
+    
+    D --> D1["Statistics calculation"]
+    D --> D2["Data transformation"]
+    D --> D3["Filtering & searching"]
+    D --> D4["Real-time processing"]
+    
+    E --> E1["Arrow functions"]
+    E --> E2["Method chaining"]
+    E --> E3["Destructuring"]
+    E --> E4["Template literals"]
+    
+    F["💡 Key Benefits"] --> F1["Efficient data handling"]
+    F --> F2["Reduced code repetition"]
+    F --> F3["Scalable solutions"]
+    F --> F4["Cleaner syntax"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 तुमचं Arrays & Loops मास्टरी टाइमलाइन
+
+### ⚡ **पुढील ५ मिनिटांत तुम्ही काय करू शकता**
+- [ ] तुमच्या आवडत्या चित्रपटांचा एक array तयार करा आणि विशिष्ट घटक access करा
+- [ ] १ ते १० पर्यंत मोजणारा एक for loop लिहा
+- [ ] व्याख्यानातील आधुनिक array पद्धतींचं आव्हान पूर्ण करा
+- [ ] तुमच्या ब्राउझर कन्सोलमध्ये array indexing सराव करा
+
+### 🎯 **तुमच्या एका तासात साध्य होणाऱ्या गोष्टी**
+- [ ] व्याख्यानानंतरचा क्विझ पूर्ण करा आणि कोणतेही आव्हानात्मक संकल्पना पुनरावलोकन करा
+- [ ] GitHub Copilot चॅलेंजमधील comprehensive grade analyzer तयार करा
+- [ ] एक साधा shopping cart तयार करा जो वस्तू add आणि remove करतो
+- [ ] वेगवेगळ्या loop प्रकारांमध्ये रूपांतर करण्याचा सराव करा
+- [ ] `push`, `pop`, `slice`, आणि `splice` सारख्या array पद्धतींचा प्रयोग करा
+
+### 📅 **तुमचा आठवडाभराचा डेटा प्रोसेसिंग प्रवास**
+- [ ] "Loop an Array" असाइनमेंट क्रिएटिव enhancements सह पूर्ण करा
+- [ ] arrays आणि loops वापरून एक to-do list application तयार करा
+- [ ] संख्यात्मक डेटासाठी एक साधा statistics calculator तयार करा
+- [ ] [MDN array पद्धती](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) वापरून सराव करा
+- [ ] एक photo gallery किंवा music playlist interface तयार करा
+- [ ] `map`, `filter`, आणि `reduce` सह functional programming चा अभ्यास करा
+
+### 🌟 **तुमचा महिनाभराचा परिवर्तन**
+- [ ] प्रगत array ऑपरेशन्स आणि कार्यक्षमता ऑप्टिमायझेशनमध्ये प्रावीण्य मिळवा
+- [ ] एक पूर्ण डेटा व्हिज्युअलायझेशन डॅशबोर्ड तयार करा
+- [ ] डेटा प्रोसेसिंगसाठी ओपन सोर्स प्रोजेक्ट्समध्ये योगदान द्या
+- [ ] व्यावहारिक उदाहरणांसह कोणाला तरी arrays आणि loops बद्दल शिकवा
+- [ ] पुन्हा वापरता येणाऱ्या डेटा प्रोसेसिंग फंक्शन्सची वैयक्तिक लायब्ररी तयार करा
+- [ ] arrays वर आधारित अल्गोरिदम आणि डेटा स्ट्रक्चर्सचा अभ्यास करा
+
+### 🏆 **अंतिम डेटा प्रोसेसिंग चॅम्पियन चेक-इन**
+
+**तुमच्या array आणि loop प्रावीण्याचा उत्सव साजरा करा:**
+- वास्तविक जगातील अनुप्रयोगांसाठी तुम्हाला शिकलेली सर्वात उपयुक्त array ऑपरेशन कोणती आहे?
+- कोणता loop प्रकार तुम्हाला सर्वात नैसर्गिक वाटतो आणि का?
+- arrays आणि loops समजून घेतल्यामुळे डेटा आयोजित करण्याच्या तुमच्या दृष्टिकोनात कसा बदल झाला आहे?
+- पुढे कोणते जटिल डेटा प्रोसेसिंग कार्य तुम्ही हाताळू इच्छिता?
+
+```mermaid
+journey
+    title Your Data Processing Evolution
+    section Today
+      Array Confusion: 3: You
+      Loop Basics: 4: You
+      Index Understanding: 5: You
+    section This Week
+      Method Mastery: 4: You
+      Efficient Processing: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Complex Algorithms: 5: You
+      Performance Optimization: 5: You
+      Teaching Others: 5: You
+```
+
+> 📦 **तुम्ही डेटा आयोजित करण्याची आणि प्रोसेसिंगची ताकद अनलॉक केली आहे!** Arrays आणि loops हे तुम्ही कधीही तयार कराल अशा जवळजवळ प्रत्येक अनुप्रयोगाचा पाया आहेत. साध्या यादींपासून ते जटिल डेटा विश्लेषणापर्यंत, माहिती कार्यक्षमतेने आणि सुंदरपणे हाताळण्यासाठी तुमच्याकडे आता साधने आहेत. प्रत्येक डायनॅमिक वेबसाइट, मोबाइल अॅप, आणि डेटा-ड्रिव्हन अनुप्रयोग या मूलभूत संकल्पनांवर अवलंबून असतो. स्केलेबल डेटा प्रोसेसिंगच्या जगात तुमचं स्वागत आहे! 🎉
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/3-terrarium/1-intro-to-html/README.md b/translations/mr/3-terrarium/1-intro-to-html/README.md
index 3da7e2ac82..eb74d5cddd 100644
--- a/translations/mr/3-terrarium/1-intro-to-html/README.md
+++ b/translations/mr/3-terrarium/1-intro-to-html/README.md
@@ -1,34 +1,81 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "20c72cf2e5b0050d38ca3cb14a75a9df",
-  "translation_date": "2025-10-22T16:14:09+00:00",
+  "original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
+  "translation_date": "2025-11-03T14:40:47+00:00",
   "source_file": "3-terrarium/1-intro-to-html/README.md",
   "language_code": "mr"
 }
 -->
 # टेरॅरियम प्रकल्प भाग 1: HTML ची ओळख
 
+```mermaid
+journey
+    title Your HTML Learning Journey
+    section Foundation
+      Create HTML file: 3: Student
+      Add DOCTYPE: 4: Student
+      Structure document: 5: Student
+    section Content
+      Add metadata: 4: Student
+      Include images: 5: Student
+      Organize layout: 5: Student
+    section Semantics
+      Use proper tags: 4: Student
+      Enhance accessibility: 5: Student
+      Build terrarium: 5: Student
+```
+
 ![HTML ची ओळख](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.mr.png)
 > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
 
-HTML, म्हणजेच हायपरटेक्स्ट मार्कअप भाषा, ही तुम्ही कधीही भेट दिलेल्या प्रत्येक वेबसाइटची पायाभूत रचना आहे. HTML ला वेब पृष्ठांचे सांगाडा समजले जाते – ते सामग्री कुठे जाते, ती कशी आयोजित केली जाते आणि प्रत्येक भागाचे प्रतिनिधित्व काय आहे हे परिभाषित करते. CSS नंतर तुमच्या HTML ला रंग आणि लेआउटसह "सजवेल", आणि JavaScript त्याला परस्परसंवादी बनवेल, HTML ही मूलभूत रचना प्रदान करते ज्यामुळे बाकी सर्व शक्य होते.
+HTML, म्हणजेच हायपरटेक्स्ट मार्कअप भाषा, ही तुम्ही कधीही भेट दिलेल्या प्रत्येक वेबसाइटची पायाभूत रचना आहे. HTML ला वेब पृष्ठांचे सांगाडा म्हणून विचार करा – ते सामग्री कुठे जाते, ती कशी आयोजित केली जाते आणि प्रत्येक भाग काय दर्शवतो हे परिभाषित करते. CSS नंतर तुमच्या HTML ला रंग आणि लेआउटसह "सजवेल", आणि JavaScript त्याला परस्परसंवादी बनवेल, HTML ही मूलभूत रचना प्रदान करते ज्यामुळे बाकी सर्व शक्य होते.
 
-या धड्यात, तुम्ही व्हर्च्युअल टेरॅरियम इंटरफेससाठी HTML रचना तयार कराल. हा प्रकल्प तुम्हाला मूलभूत HTML संकल्पना शिकवेल आणि काहीतरी दृश्यात्मक आकर्षक तयार करेल. तुम्ही सामग्रीला सेमॅंटिक घटकांचा वापर करून कसे आयोजित करायचे, प्रतिमांसोबत कसे काम करायचे आणि परस्परसंवादी वेब अनुप्रयोगासाठी पाया कसा तयार करायचा हे शिकाल.
+या धड्यात, तुम्ही आभासी टेरॅरियम इंटरफेससाठी HTML रचना तयार कराल. हा प्रकल्प तुम्हाला मूलभूत HTML संकल्पना शिकवेल आणि काहीतरी आकर्षक तयार करायला शिकवेल. तुम्ही सामग्रीला अर्थपूर्ण घटकांमध्ये कसे आयोजित करायचे, प्रतिमांसोबत कसे काम करायचे आणि परस्परसंवादी वेब अनुप्रयोगासाठी पाया कसा तयार करायचा हे शिकाल.
 
 या धड्याच्या शेवटी, तुम्ही वनस्पतींच्या प्रतिमा व्यवस्थित स्तंभांमध्ये प्रदर्शित करणारे कार्यरत HTML पृष्ठ तयार केले असेल, जे पुढील धड्यात शैलीसाठी तयार असेल. सुरुवातीला ते मूलभूत दिसत असल्यास काळजी करू नका – CSS दृश्यात्मक आकर्षण जोडण्यापूर्वी HTML नेमके तेच करायला हवे.
 
-## पूर्व-व्याख्यान प्रश्नमंजुषा
+```mermaid
+mindmap
+  root((HTML Fundamentals))
+    Structure
+      DOCTYPE Declaration
+      HTML Element
+      Head Section
+      Body Content
+    Elements
+      Tags & Attributes
+      Self-closing Tags
+      Nested Elements
+      Block vs Inline
+    Content
+      Text Elements
+      Images
+      Containers (div)
+      Lists
+    Semantics
+      Meaningful Tags
+      Accessibility
+      Screen Readers
+      SEO Benefits
+    Best Practices
+      Proper Nesting
+      Valid Markup
+      Descriptive Alt Text
+      Organized Structure
+```
+
+## प्री-लेक्चर क्विझ
 
-[पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/15)
+[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/15)
 
 > 📺 **पहा आणि शिका**: या उपयुक्त व्हिडिओचा आढावा पहा
 > 
-> [![HTML मूलभूत गोष्टी व्हिडिओ](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+> [![HTML मूलभूत व्हिडिओ](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
 
 ## तुमचा प्रकल्प सेट अप करणे
 
-HTML कोडमध्ये जाण्यापूर्वी, तुमच्या टेरॅरियम प्रकल्पासाठी योग्य कार्यक्षेत्र सेट अप करूया. सुरुवातीपासूनच एक व्यवस्थित फाइल संरचना तयार करणे ही एक महत्त्वाची सवय आहे जी तुमच्या वेब विकास प्रवासात तुम्हाला चांगली सेवा देईल.
+HTML कोडमध्ये जाण्यापूर्वी, तुमच्या टेरॅरियम प्रकल्पासाठी योग्य कार्यक्षेत्र सेट अप करूया. सुरुवातीपासूनच व्यवस्थित फाइल संरचना तयार करणे ही एक महत्त्वाची सवय आहे जी तुमच्या वेब विकास प्रवासात तुम्हाला चांगली सेवा देईल.
 
 ### कार्य: तुमची प्रकल्प संरचना तयार करा
 
@@ -41,7 +88,7 @@ HTML कोडमध्ये जाण्यापूर्वी, तुमच
 4. Explorer पॅनमध्ये, "New File" आयकॉनवर क्लिक करा
 5. तुमच्या फाइलचे नाव `index.html` ठेवा
 
-![VS Code Explorer नवीन फाइल तयार करणे दाखवत आहे](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.mr.png)
+![VS कोड एक्सप्लोरर नवीन फाइल तयार करणे दर्शवित आहे](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.mr.png)
 
 **पर्याय 2: टर्मिनल कमांड्स वापरणे**
 ```bash
@@ -51,23 +98,41 @@ touch index.html
 code index.html
 ```
 
-**या कमांड्स काय साध्य करतात:**
-- **नवीन डिरेक्टरी तयार करते** ज्याचे नाव `terrarium` आहे तुमच्या प्रकल्पासाठी
-- **डिरेक्टरीमध्ये जाते** `terrarium`
+**या कमांड्सने काय साध्य होते:**
+- **नवीन डिरेक्टरी तयार करते** ज्याचे नाव `terrarium` आहे
+- **टेरॅरियम डिरेक्टरीमध्ये जाते**
 - **रिक्त `index.html` फाइल तयार करते**
-- **फाइल उघडते** व्हिज्युअल स्टुडिओ कोडमध्ये संपादनासाठी
+- **फाइल संपादित करण्यासाठी व्हिज्युअल स्टुडिओ कोडमध्ये उघडते**
 
-> 💡 **प्रो टिप**: वेब विकासात फाइलचे नाव `index.html` विशेष आहे. जेव्हा कोणी वेबसाइटला भेट देतो, तेव्हा ब्राउझर आपोआप `index.html` ला डिफॉल्ट पृष्ठ म्हणून प्रदर्शित करण्यासाठी शोधतात. याचा अर्थ असा की `https://mysite.com/projects/` सारखा URL `projects` फोल्डरमधील `index.html` फाइल आपोआप सर्व्ह करेल, URL मध्ये फाइलचे नाव निर्दिष्ट करण्याची आवश्यकता नाही.
+> 💡 **प्रो टिप**: वेब विकासात `index.html` फाइलचे नाव विशेष आहे. जेव्हा कोणी वेबसाइटला भेट देतो, तेव्हा ब्राउझर आपोआप `index.html` ला डिफॉल्ट पृष्ठ म्हणून प्रदर्शित करण्यासाठी शोधतात. याचा अर्थ असा की `https://mysite.com/projects/` सारखा URL आपोआप `projects` फोल्डरमधून `index.html` फाइल सर्व्ह करेल, URL मध्ये फाइलचे नाव निर्दिष्ट करण्याची गरज नाही.
 
 ## HTML दस्तऐवज रचना समजून घेणे
 
-प्रत्येक HTML दस्तऐवज विशिष्ट रचना अनुसरतो ज्याची ब्राउझरला योग्यरित्या समजून घेण्यासाठी आणि प्रदर्शित करण्यासाठी आवश्यकता असते. या रचनेला औपचारिक पत्रासारखे समजा – त्यात विशिष्ट क्रमाने आवश्यक घटक असतात जे प्राप्तकर्त्याला (या प्रकरणात, ब्राउझर) सामग्री योग्य प्रकारे प्रक्रिया करण्यास मदत करतात.
+प्रत्येक HTML दस्तऐवज विशिष्ट रचनेचे अनुसरण करतो ज्याला ब्राउझर योग्य प्रकारे समजून घेण्यासाठी आणि प्रदर्शित करण्यासाठी आवश्यक असते. या रचनेला औपचारिक पत्रासारखे विचार करा – त्यात विशिष्ट क्रमाने आवश्यक घटक असतात जे प्राप्तकर्ता (या प्रकरणात, ब्राउझर) सामग्री योग्य प्रकारे प्रक्रिया करण्यास मदत करतात.
+
+```mermaid
+flowchart TD
+    A["<!DOCTYPE html>"] --> B["<html>"]
+    B --> C["<head>"]
+    C --> D["<title>"]
+    C --> E["<meta charset>"]
+    C --> F["<meta viewport>"]
+    B --> G["<body>"]
+    G --> H["<h1> Heading"]
+    G --> I["<div> Containers"]
+    G --> J["<img> Images"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style C fill:#fff3e0
+    style G fill:#e8f5e8
+```
 
 चला प्रत्येक HTML दस्तऐवजाला आवश्यक असलेला मूलभूत पाया जोडण्यास सुरुवात करूया.
 
 ### DOCTYPE घोषणा आणि मूळ घटक
 
-कोणत्याही HTML फाइलच्या पहिल्या दोन ओळी ब्राउझरला दस्तऐवजाची "ओळख" म्हणून काम करतात:
+HTML फाइलच्या पहिल्या दोन ओळी ब्राउझरला दस्तऐवजाची "ओळख" म्हणून काम करतात:
 
 ```html
 <!DOCTYPE html>
@@ -75,24 +140,32 @@ code index.html
 ```
 
 **या कोडचे कार्य समजून घेणे:**
-- **दस्तऐवज प्रकार HTML5 म्हणून घोषित करते** `<!DOCTYPE html>` वापरून
-- **मूळ `<html>` घटक तयार करते** जो सर्व पृष्ठ सामग्री समाविष्ट करेल
-- **आधुनिक वेब मानके स्थापित करते** योग्य ब्राउझर रेंडरिंगसाठी
-- **वेगवेगळ्या ब्राउझर आणि उपकरणांमध्ये सुसंगत प्रदर्शन सुनिश्चित करते**
+- **HTML5 दस्तऐवज प्रकार घोषित करते** `<!DOCTYPE html>` वापरून
+- **मूळ `<html>` घटक तयार करते** जे सर्व पृष्ठ सामग्री समाविष्ट करेल
+- **योग्य ब्राउझर रेंडरिंगसाठी आधुनिक वेब मानके स्थापित करते**
+- **विविध ब्राउझर आणि उपकरणांमध्ये सुसंगत प्रदर्शन सुनिश्चित करते**
+
+> 💡 **VS कोड टिप**: VS कोडमध्ये कोणत्याही HTML टॅगवर होवर करा आणि MDN वेब डॉक्समधून उपयुक्त माहिती पहा, ज्यामध्ये वापर उदाहरणे आणि ब्राउझर सुसंगतता तपशील समाविष्ट आहेत.
 
-> 💡 **VS Code टिप**: VS Code मध्ये कोणत्याही HTML टॅगवर होवर करा आणि MDN वेब डॉक्समधून उपयुक्त माहिती पहा, ज्यामध्ये वापर उदाहरणे आणि ब्राउझर सुसंगतता तपशील समाविष्ट आहेत.
+> 📚 **अधिक जाणून घ्या**: DOCTYPE घोषणा ब्राउझरला "quirks mode" मध्ये प्रवेश करण्यापासून प्रतिबंधित करते, जे खूप जुन्या वेबसाइट्सना समर्थन देण्यासाठी वापरले जात होते. आधुनिक वेब विकास साध्या `<!DOCTYPE html>` घोषणेसह [मानक-अनुरूप रेंडरिंग](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) सुनिश्चित करतो.
 
-> 📚 **अधिक जाणून घ्या**: DOCTYPE घोषणा ब्राउझरला "quirks mode" मध्ये प्रवेश करण्यापासून प्रतिबंधित करते, जी खूप जुनी वेबसाइट्सला समर्थन देण्यासाठी वापरली जात होती. आधुनिक वेब विकास साध्या `<!DOCTYPE html>` घोषणेसह [मानक-अनुरूप रेंडरिंग](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) सुनिश्चित करतो.
+### 🔄 **शैक्षणिक तपासणी**
+**थांबा आणि विचार करा**: पुढे जाण्यापूर्वी, सुनिश्चित करा:
+- ✅ प्रत्येक HTML दस्तऐवजाला DOCTYPE घोषणेची आवश्यकता का आहे
+- ✅ `<html>` मूळ घटक काय समाविष्ट करतो
+- ✅ ही रचना ब्राउझर पृष्ठे योग्य प्रकारे रेंडर करण्यात कशी मदत करते
+
+**जलद स्व-परीक्षण**: "मानक-अनुरूप रेंडरिंग" म्हणजे काय हे तुम्ही स्वतःच्या शब्दात स्पष्ट करू शकता का?
 
 ## आवश्यक दस्तऐवज मेटाडेटा जोडणे
 
-HTML दस्तऐवजाचा `<head>` विभाग महत्त्वाची माहिती समाविष्ट करतो जी ब्राउझर आणि शोध इंजिनला आवश्यक असते, परंतु जी अभ्यागतांना थेट पृष्ठावर दिसत नाही. याला "पर्द्यामागील" माहिती समजा जी तुमचे वेबपृष्ठ योग्य प्रकारे कार्य करण्यास आणि वेगवेगळ्या उपकरणे आणि प्लॅटफॉर्मवर योग्यरित्या दिसण्यास मदत करते.
+HTML दस्तऐवजाचा `<head>` विभाग महत्त्वाची माहिती समाविष्ट करतो जी ब्राउझर आणि शोध इंजिनला आवश्यक असते, परंतु अभ्यागतांना थेट पृष्ठावर दिसत नाही. याचा विचार "पृष्ठामागील" माहिती म्हणून करा जी तुमचे वेबपृष्ठ योग्य प्रकारे कार्य करण्यास आणि विविध उपकरणे आणि प्लॅटफॉर्मवर योग्यरित्या दिसण्यास मदत करते.
 
-हे मेटाडेटा ब्राउझरला तुमचे पृष्ठ कसे प्रदर्शित करायचे, कोणते कॅरेक्टर एन्कोडिंग वापरायचे आणि वेगवेगळ्या स्क्रीन आकारांशी कसे हाताळायचे हे सांगते – व्यावसायिक, प्रवेशयोग्य वेबपृष्ठे तयार करण्यासाठी सर्व आवश्यक.
+हे मेटाडेटा ब्राउझरला तुमचे पृष्ठ कसे प्रदर्शित करायचे, कोणते कॅरेक्टर एन्कोडिंग वापरायचे आणि वेगवेगळ्या स्क्रीन आकारांशी कसे हाताळायचे हे सांगते – व्यावसायिक, प्रवेशयोग्य वेब पृष्ठे तयार करण्यासाठी सर्व आवश्यक.
 
 ### कार्य: दस्तऐवज हेड जोडा
 
-तुमच्या उघडणाऱ्या आणि बंद होणाऱ्या `<html>` टॅगमध्ये हा `<head>` विभाग घाला:
+तुमच्या उघडणाऱ्या आणि बंद `<html>` टॅगमध्ये हा `<head>` विभाग घाला:
 
 ```html
 <head>
@@ -105,16 +178,16 @@ HTML दस्तऐवजाचा `<head>` विभाग महत्त्
 
 **प्रत्येक घटक काय साध्य करतो याचे विश्लेषण:**
 - **पृष्ठ शीर्षक सेट करते** जे ब्राउझर टॅब आणि शोध परिणामांमध्ये दिसते
-- **UTF-8 कॅरेक्टर एन्कोडिंग निर्दिष्ट करते** जगभरात योग्य मजकूर प्रदर्शनासाठी
+- **UTF-8 कॅरेक्टर एन्कोडिंग निर्दिष्ट करते** जागतिक स्तरावर योग्य मजकूर प्रदर्शनासाठी
 - **आधुनिक इंटरनेट एक्सप्लोरर आवृत्त्यांसह सुसंगतता सुनिश्चित करते**
-- **डिव्हाइस रुंदीशी जुळण्यासाठी व्ह्यूपोर्ट कॉन्फिगर करते** प्रतिसादात्मक डिझाइन सुनिश्चित करण्यासाठी
-- **प्रारंभिक झूम स्तर नियंत्रित करते** सामग्री नैसर्गिक आकारात प्रदर्शित करण्यासाठी
+- **डिव्हाइसच्या रुंदीशी जुळण्यासाठी व्ह्यूपोर्ट कॉन्फिगर करते**
+- **प्रारंभिक झूम स्तर नियंत्रित करते** नैसर्गिक आकारात सामग्री प्रदर्शित करण्यासाठी
 
-> 🤔 **याचा विचार करा**: जर तुम्ही व्ह्यूपोर्ट मेटा टॅग असे सेट केले: `<meta name="viewport" content="width=600">` तर काय होईल? यामुळे पृष्ठ नेहमी 600 पिक्सेल रुंद असेल, प्रतिसादात्मक डिझाइन खराब होईल! [योग्य व्ह्यूपोर्ट कॉन्फिगरेशन](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) बद्दल अधिक जाणून घ्या.
+> 🤔 **याचा विचार करा**: जर तुम्ही व्ह्यूपोर्ट मेटा टॅग असे सेट केले: `<meta name="viewport" content="width=600">` तर काय होईल? यामुळे पृष्ठ नेहमी 600 पिक्सेल रुंद असेल, प्रतिसादात्मक डिझाइन तुटेल! [योग्य व्ह्यूपोर्ट कॉन्फिगरेशन](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) बद्दल अधिक जाणून घ्या.
 
 ## दस्तऐवज बॉडी तयार करणे
 
-HTML दस्तऐवजाचा `<body>` घटक तुमच्या वेबपृष्ठाची सर्व दृश्यमान सामग्री समाविष्ट करतो – वापरकर्त्यांना दिसणारे आणि परस्परसंवादी असलेले सर्व काही. `<head>` विभागाने ब्राउझरला सूचना दिल्या, तर `<body>` विभागात प्रत्यक्ष सामग्री असते: मजकूर, प्रतिमा, बटणे आणि इतर घटक जे तुमचे वापरकर्ता इंटरफेस तयार करतात.
+HTML च्या `<body>` घटकात तुमच्या वेबपृष्ठाची सर्व दृश्यमान सामग्री असते – वापरकर्ते पाहतील आणि संवाद साधतील अशा सर्व गोष्टी. `<head>` विभागाने ब्राउझरला सूचना दिल्या, तर `<body>` विभागात प्रत्यक्ष सामग्री असते: मजकूर, प्रतिमा, बटणे आणि इतर घटक जे तुमचे वापरकर्ता इंटरफेस तयार करतात.
 
 चला बॉडी रचना जोडूया आणि HTML टॅग एकत्र कसे कार्य करतात ते समजून घेऊया.
 
@@ -124,7 +197,7 @@ HTML जोडलेल्या टॅगचा वापर करून घ
 
 ### कार्य: बॉडी घटक जोडा
 
-तुमच्या HTML फाइलला `<body>` घटक समाविष्ट करण्यासाठी अपडेट करा:
+तुमच्या HTML फाइलला `<body>` घटक समाविष्ट करण्यासाठी अद्यतनित करा:
 
 ```html
 <!DOCTYPE html>
@@ -139,23 +212,23 @@ HTML जोडलेल्या टॅगचा वापर करून घ
 </html>
 ```
 
-**या संपूर्ण रचनेने काय प्रदान केले आहे:**
+**ही संपूर्ण रचना काय प्रदान करते:**
 - **HTML5 दस्तऐवजाचा मूलभूत फ्रेमवर्क स्थापित करते**
 - **योग्य ब्राउझर रेंडरिंगसाठी आवश्यक मेटाडेटा समाविष्ट करते**
 - **दृश्यमान सामग्रीसाठी रिक्त बॉडी तयार करते**
 - **आधुनिक वेब विकास सर्वोत्तम पद्धतींचे अनुसरण करते**
 
-आता तुम्ही तुमच्या टेरॅरियमचे दृश्यमान घटक जोडण्यासाठी तयार आहात. आम्ही `<div>` घटकांचा वापर कंटेनर म्हणून वेगवेगळ्या सामग्री विभागांचे आयोजन करण्यासाठी करू आणि `<img>` घटकांचा वापर वनस्पतींच्या प्रतिमा प्रदर्शित करण्यासाठी करू.
+आता तुम्ही तुमच्या टेरॅरियमचे दृश्यमान घटक जोडण्यासाठी तयार आहात. आम्ही सामग्रीचे वेगवेगळे विभाग आयोजित करण्यासाठी कंटेनर म्हणून `<div>` घटक वापरू आणि वनस्पतींच्या प्रतिमा प्रदर्शित करण्यासाठी `<img>` घटक वापरू.
 
 ### प्रतिमा आणि लेआउट कंटेनरसह काम करणे
 
-HTML मध्ये प्रतिमा विशेष असतात कारण त्या "स्वत: बंद करणारे" टॅग वापरतात. `<p></p>` सारख्या घटकांप्रमाणे सामग्रीभोवती लपेटण्याऐवजी, `<img>` टॅग स्वतःच आवश्यक असलेली सर्व माहिती `src` सारख्या गुणधर्मांचा वापर करून आणि प्रतिमा फाइल पथासाठी आणि `alt` प्रवेशयोग्यतेसाठी समाविष्ट करते.
+HTML मध्ये प्रतिमा विशेष आहेत कारण त्या "स्वत: बंद करणारे" टॅग वापरतात. `<p></p>` सारख्या घटकांप्रमाणे सामग्रीभोवती लपेटण्याऐवजी, `<img>` टॅग स्वतःच आवश्यक असलेल्या सर्व माहितीचा समावेश करतो, जसे की `src` प्रतिमा फाइल पथासाठी आणि `alt` प्रवेशयोग्यतेसाठी.
 
-तुमच्या HTML मध्ये प्रतिमा जोडण्यापूर्वी, तुम्हाला तुमच्या प्रकल्प फाइल्स योग्य प्रकारे आयोजित करणे आवश्यक आहे, प्रतिमांसाठी फोल्डर तयार करून आणि वनस्पतींच्या ग्राफिक्स जोडून.
+तुमच्या HTML मध्ये प्रतिमा जोडण्यापूर्वी, तुमच्या प्रकल्प फाइल्स व्यवस्थित करण्यासाठी प्रतिमांचे फोल्डर तयार करा आणि वनस्पतींच्या ग्राफिक्स जोडा.
 
 **प्रथम, तुमच्या प्रतिमा सेट करा:**
 1. तुमच्या टेरॅरियम प्रकल्प फोल्डरमध्ये `images` नावाचा फोल्डर तयार करा
-2. [solution folder](../../../../3-terrarium/solution/images) मधून वनस्पतींच्या प्रतिमा डाउनलोड करा (एकूण 14 वनस्पतींच्या प्रतिमा)
+2. [सोल्यूशन फोल्डर](../../../../3-terrarium/solution/images) मधून वनस्पतींच्या प्रतिमा डाउनलोड करा (एकूण 14 वनस्पतींच्या प्रतिमा)
 3. सर्व वनस्पतींच्या प्रतिमा तुमच्या नवीन `images` फोल्डरमध्ये कॉपी करा
 
 ### कार्य: वनस्पती प्रदर्शन लेआउट तयार करा
@@ -213,26 +286,70 @@ HTML मध्ये प्रतिमा विशेष असतात क
 </div>
 ```
 
-**या कोडमध्ये काय होत आहे याचे चरण-दर-चरण विश्लेषण:**
-- **मुख्य पृष्ठ कंटेनर तयार करते** `id="page"` सह सर्व सामग्री ठेवण्यासाठी
+**पायरी-पायरीने, या कोडमध्ये काय घडत आहे:**
+- **`id="page"` सह मुख्य पृष्ठ कंटेनर तयार करते** सर्व सामग्री ठेवण्यासाठी
 - **दोन स्तंभ कंटेनर स्थापित करते**: `left-container` आणि `right-container`
 - **डाव्या स्तंभात 7 वनस्पती आणि उजव्या स्तंभात 7 वनस्पती आयोजित करते**
 - **प्रत्येक वनस्पती प्रतिमेला `plant-holder` div मध्ये लपेटते** वैयक्तिक स्थितीसाठी
-- **सुसंगत वर्ग नावे लागू करते** पुढील धड्यात CSS शैलीसाठी
-- **प्रत्येक वनस्पती प्रतिमेला अद्वितीय IDs नियुक्त करते** नंतर JavaScript परस्परसंवादासाठी
+- **CSS शैलीसाठी सुसंगत वर्ग नावे लागू करते** पुढील धड्यात
+- **प्रत्येक वनस्पती प्रतिमेला अद्वितीय ID असाइन करते** JavaScript परस्परसंवादासाठी नंतर
 - **प्रतिमा फोल्डरकडे निर्देश करणारे योग्य फाइल पथ समाविष्ट करते**
 
-> 🤔 **याचा विचार करा**: लक्षात घ्या की सर्व प्रतिमांमध्ये सध्या समान alt मजकूर "plant" आहे. हे प्रवेशयोग्यतेसाठी आदर्श नाही. स्क्रीन रीडर वापरकर्त्यांना "plant" 14 वेळा ऐकायला मिळेल, प्रत्येक प्रतिमा कोणती विशिष्ट वनस्पती दर्शवते हे न कळता. प्रत्येक प्रतिमेसाठी चांगले, अधिक वर्णनात्मक alt मजकूर विचार करू शकता का?
+> 🤔 **याचा विचार करा**: लक्षात घ्या की सर्व प्रतिमांमध्ये सध्या समान alt मजकूर "plant" आहे. हे प्रवेशयोग्यतेसाठी आदर्श नाही. स्क्रीन रीडर वापरकर्त्यांना "plant" 14 वेळा ऐकायला मिळेल, प्रत्येक प्रतिमा कोणती विशिष्ट वनस्पती दर्शवते हे न कळता. प्रत्येक प्रतिमेसाठी चांगला, अधिक वर्णनात्मक alt मजकूर तुम्ही विचार करू शकता का?
+
+> 📝 **HTML घटक प्रकार**: `<div>` घटक "ब्लॉक-स्तरीय" असतात आणि पूर्ण रुंदी घेतात, तर `<span>` घटक "इनलाइन" असतात आणि फक्त आवश्यक रुंदी घेतात. जर तुम्ही सर्व `<div>` टॅग `<span>` टॅगमध्ये बदलले तर काय होईल असे तुम्हाला वाटते?
+
+### 🔄 **शैक्षणिक तपासणी**
+**रचना समजून घेणे**: तुमची HTML रचना पुनरावलोकन करण्यासाठी एक क्षण घ्या:
+- ✅ तुम्ही तुमच्या लेआउटमधील मुख्य कंटेनर ओळखू शकता का?
+- ✅ प्रत्येक प्रतिमेला अद्वितीय ID का आहे हे तुम्हाला समजते का?
+- ✅ तुम्ही `plant-holder` div चा उद्देश कसा वर्णन कराल?
 
-> 📝 **HTML घटक प्रकार**: `<div>` घटक "ब्लॉक-स्तरीय" असतात आणि पूर्ण रुंदी घेतात, तर `<span>` घटक "इनलाइन" असतात आणि आवश्यक रुंदी घेतात. जर तुम्ही सर्व `<div>` टॅग्स `<span>` टॅग्समध्ये बदलले तर काय होईल असे तुम्हाला वाटते?
+**दृश्य तपासणी**: तुमची HTML फाइल ब्राउझरमध्ये उघडा. तुम्हाला दिसले पाहिजे:
+- वनस्पतींच्या प्रतिमांची मूलभूत यादी
+- प्रतिमा दोन स्तंभांमध्ये आयोजित केल्या आहेत
+- साधा, शैली नसलेला लेआउट
 
-या मार्कअपसह, वनस्पती स्क्रीनवर दिसतील, जरी ते अद्याप आकर्षक दिसणार नाहीत – त्यासाठी CSS पुढील धड्यात आहे! सध्या, तुमच्याकडे तुमची सामग्री योग्य प्रकारे आयोजित करणारा आणि प्रवेशयोग्यतेच्या सर्वोत्तम पद्धतींचे अनुसरण करणारा एक ठोस HTML पाया आहे.
+**लक्षात ठेवा**: CSS शैली जोडण्यापूर्वी HTML नेमके असेच दिसायला हवे!
+
+या मार्कअपसह, वनस्पती स्क्रीनवर दिसतील, जरी त्या अद्याप आकर्षक दिसणार नाहीत – पुढील धड्यात CSS साठी ते आहे! सध्या, तुमच्याकडे तुमची सामग्री व्यवस्थित करणारी आणि प्रवेशयोग्यता सर्वोत्तम पद्धतींचे अनुसरण करणारी ठोस HTML रचना आहे.
 
 ## प्रवेशयोग्यतेसाठी सेमॅंटिक HTML वापरणे
 
-सेमॅंटिक HTML म्हणजे HTML घटक त्यांच्या अर्थ आणि उद्देशावर आधारित निवडणे, फक्त त्यांच्या स्वरूपावर नाही. जेव्हा तुम्ही सेमॅंटिक मार्कअप वापरता, तेव्हा तुम्ही ब्राउझर, शोध इंजिन आणि स्क्रीन रीडर सारख्या सहाय्यक तंत्रज्ञानाला तुमच्या सामग्रीची रचना आणि अर्थ सांगत असता.
+सेमॅंटिक HTML म्हणजे HTML घटक त्यांच्या अर्थ आणि उद्देशावर आधारित निवडणे, फक्त त्यांच्या स्वरूपावर नाही. जेव्हा तुम्ही सेमॅंटिक मार्कअप वापरता, तेव्हा तुम्ही तुमच्या सामग्रीची रचना आणि अर्थ ब्राउझर, शोध इंजिन आणि स्क्रीन रीडर सारख्या सहाय्यक तंत्रज्ञानाला सांगता.
+
+```mermaid
+flowchart TD
+    A[Need to add content?] --> B{What type?}
+    B -->|Main heading| C["<h1>"]
+    B -->|Subheading| D["<h2>, <h3>, etc."]
+    B -->|Paragraph| E["<p>"]
+    B -->|List| F["<ul>, <ol>"]
+    B -->|Navigation| G["<nav>"]
+    B -->|Article| H["<article>"]
+    B -->|Section| I["<section>"]
+    B -->|Generic container| J["<div>"]
+    
+    C --> K[Screen readers announce as main title]
+    D --> L[Creates proper heading hierarchy]
+    E --> M[Provides proper text spacing]
+    F --> N[Enables list navigation shortcuts]
+    G --> O[Identifies navigation landmarks]
+    H --> P[Marks standalone content]
+    I --> Q[Groups related content]
+    J --> R[Use only when no semantic tag fits]
+    
+    style C fill:#4caf50
+    style D fill:#4caf50
+    style E fill:#4caf50
+    style F fill:#4caf50
+    style G fill:#2196f3
+    style H fill:#2196f3
+    style I fill:#2196f3
+    style J fill:#ff9800
+```
 
-हा दृष्टिकोन अपंगत्व असलेल्या वापरकर्त्यांसाठी तुमच्या वेबसाइट्स अधिक प्रवेशयोग्य बनवतो आणि शोध इंजिनांना तुमची सामग्री चांगल्या प्रकारे समजण्यास मदत करतो. आधुनिक वेब विकासाचा हा एक मूलभूत तत्त्व आहे जो सर्वांसाठी चांगले अनुभव तयार करतो.
+हा दृष्टिकोन अपंगत्व असलेल्या वापरकर्त्यांसाठी तुमच्या वेबसाइट्स अधिक प्रवेशयोग्य बनवतो आणि शोध इंजिनांना तुमची सामग्री अधिक चांगल्या प्रकारे समजण्यास मदत करतो. आधुनिक वेब विकासाचा हा मूलभूत तत्त्व आहे जो सर्वांसाठी चांगले अनुभव तयार करतो.
 
 ### सेमॅंटिक पृष्ठ शीर्षक जोडणे
 
@@ -244,10 +361,10 @@ HTML मध्ये प्रतिमा विशेष असतात क
 
 **सेमॅंटिक मार्कअप का महत्त्वाचे आहे:**
 - **स्क्रीन रीडरला पृष्ठ रचना नेव्हिगेट करण्यात आणि समजून घेण्यात मदत करते**
-- **शोध इंजिन ऑप्टिमायझेशन (SEO) सुधारते** सामग्री श्रेणी स्पष्ट करून
+- **SEO सुधारते** सामग्री श्रेणी स्पष्ट करून
 - **दृष्टीदोष किंवा संज्ञानात्मक फरक असलेल्या वापरकर्त्यांसाठी प्रवेशयोग्यता वाढवते**
 - **सर्व उपकरणे आणि प्लॅटफॉर्मवर चांगले वापरकर्ता अनुभव तयार करते**
-- **वेब मानके आणि व्यावसायिक विकासासाठी सर्वोत्तम पद्धतींचे अनुसरण करते**
+- **व्यावसायिक विकासासाठी वेब मानके आणि सर्वोत्तम पद्धतींचे अनुसरण करते**
 
 **सेमॅंटिक विरुद्ध गैर-सेमॅंटिक निवडींची उदाहरणे:**
 
@@ -256,95 +373,199 @@ HTML मध्ये प्रतिमा विशेष असतात क
 | मुख्य शीर्षक | `<h1>Title</h1>` | `<div class="big-text">Title</div>` |
 | नेव्हिगेशन | `<nav><ul><li></li></ul></nav>` | `<div class="menu"><div></div></div>` |
 | बटण | `<button>Click me</button>` | `<span onclick="...">Click me</span>` |
-| लेख सामग्री | `<article><p></p></article>` | `<div class="content"><div></div></div>` |
+| लेख सामग्री | `<article><p></p></article>` | `<div class="content"><div></div
+- **प्रत्येक दृश्य घटकासाठी स्वतंत्र घटक परिभाषित करते** (वरचा भाग, भिंती, माती, तळाचा भाग)
+- **काच प्रतिबिंब प्रभावांसाठी अंतर्गत घटक समाविष्ट करते** (चमकदार घटक)
+- **वर्णनात्मक वर्ग नावे वापरते** जी प्रत्येक घटकाचा उद्देश स्पष्ट करतात
+- **ग्लास टेरॅरियम दिसण्यासाठी CSS शैलीसाठी संरचना तयार करते**
+
+> 🤔 **काहीतरी लक्षात आले का?**: तुम्ही हे मार्कअप जोडले असले तरी, तुम्हाला पृष्ठावर काही नवीन दिसत नाही! हे उत्तम प्रकारे स्पष्ट करते की HTML संरचना प्रदान करते तर CSS स्वरूप प्रदान करते. हे `<div>` घटक अस्तित्वात आहेत पण त्यांना अद्याप कोणतीही दृश्य शैली नाही – ती पुढच्या धड्यात येणार आहे!
+
+```mermaid
+flowchart TD
+    A[HTML Document] --> B[Document Head]
+    A --> C[Document Body]
+    B --> D[Title Element]
+    B --> E[Meta Charset]
+    B --> F[Meta Viewport]
+    C --> G[Main Heading]
+    C --> H[Page Container]
+    H --> I[Left Container with 7 plants]
+    H --> J[Right Container with 7 plants]
+    H --> K[Terrarium Structure]
+    
+    style A fill:#e1f5fe
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style H fill:#f3e5f5
+```
 
-> 🎥 **ते कृतीत पहा**: [स्क्रीन रीडर वेब पृष्ठांशी कसे संवाद साधतात](https://www.youtube.com/watch?v=OUDV1gqs9GA) हे पहा, सेमॅंटिक मार्कअप का महत्त्वाचे आहे हे समजून घेण्यासाठी. योग्य HTML रचना वापरकर्त्यांना कार्यक्षमतेने नेव्हिगेट करण्यात कशी मदत करते ते लक्षात घ्या.
+### 🔄 **शैक्षणिक तपासणी**
+**HTML संरचना कौशल्य**: पुढे जाण्यापूर्वी, खात्री करा की तुम्ही खालील गोष्टी करू शकता:
+- ✅ HTML संरचना आणि दृश्य स्वरूप यामधील फरक स्पष्ट करा
+- ✅ सिमॅंटिक आणि नॉन-सिमॅंटिक HTML घटक ओळखा
+- ✅ योग्य मार्कअप कसे प्रवेशयोग्यता फायदे देते ते वर्णन करा
+- ✅ संपूर्ण दस्तऐवज वृक्ष संरचना ओळखा
 
-## टेरॅरियम कंटेनर तयार करणे
+**तुमच्या समजाची चाचणी**: तुमची HTML फाइल ब्राउझरमध्ये JavaScript अक्षम करून आणि CSS काढून उघडून पहा. यामुळे तुम्ही तयार केलेली शुद्ध सिमॅंटिक संरचना दिसेल!
 
-आता टेरॅरियमसाठी HTML रचना जोडूया – काचेचा कंटेनर जिथे वनस्पती अखेरीस ठेवले जातील. हा विभाग एक महत्त्वाचा संकल्पना दर्शवतो: HTML रचना प्रदान करते, परंतु CSS शैलीशिवाय, हे घटक अद्याप दृश्यमान होणार नाहीत.
+---
 
-टेरॅरियम मार्कअप वर्णनात्मक वर्ग नावे वापरतो ज्यामुळे CSS शैली पुढील धड्यात अंतर्ज्ञानी आणि देखभालक्षम होईल.
+## GitHub Copilot Agent Challenge
 
-### कार्य: टेरॅरियम रचना जोडा
+Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-शेवटच्या `</div>` टॅगच्या वर (पृष्ठ कंटेनरच्या बंद टॅगच्या आधी) हा मार्कअप घाला:
+**वर्णन:** टेरॅरियम प्रकल्पात समाविष्ट करता येईल अशा वनस्पती काळजी मार्गदर्शक विभागासाठी सिमॅंटिक HTML संरचना तयार करा.
 
-```html
-<div id="terrarium">
-	<div class="jar-top"></div>
-	<div class="jar-walls">
-		<div class="jar-glossy-long"></div>
-		<div class="jar-glossy-short"></div>
-	</div>
-	<div class="dirt"></div>
-	<div class="jar-bottom"></div>
-</div>
-```
+**प्रॉम्प्ट:** "Plant Care Guide" मुख्य शीर्षक असलेला सिमॅंटिक HTML विभाग तयार करा, ज्यामध्ये "Watering", "Light Requirements", आणि "Soil Care" या तीन उपविभागांसह प्रत्येक वनस्पती काळजी माहिती असलेला परिच्छेद असावा. `<section>`, `<h2>`, `<h3>`, आणि `<p>` सारख्या योग्य सिमॅंटिक HTML टॅग्स वापरून सामग्री योग्य प्रकारे संरचित करा.
 
-**या टेरॅ
-**प्रॉम्प्ट:** मुख्य शीर्षक "वनस्पती काळजी मार्गदर्शक" असलेला एक सेमॅंटिक HTML विभाग तयार करा, ज्यामध्ये "पाणी देणे", "प्रकाशाची आवश्यकता" आणि "मातीची काळजी" या तीन उपविभागांसह प्रत्येकामध्ये वनस्पती काळजीविषयी माहिती असलेली एक परिच्छेद असेल. योग्य सेमॅंटिक HTML टॅग्स जसे की `<section>`, `<h2>`, `<h3>`, आणि `<p>` वापरून सामग्री योग्य प्रकारे संरचित करा.
+Agent मोडबद्दल अधिक जाणून घ्या [इथे](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
 
-[एजंट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
-
-## HTML इतिहास आव्हानाचा शोध
+## HTML इतिहास आव्हान
 
 **वेब उत्क्रांतीबद्दल शिकणे**
 
-HTML मध्ये खूप बदल झाले आहेत, 1990 मध्ये टिम बर्नर्स-ली यांनी CERN येथे पहिला वेब ब्राउझर तयार केल्यापासून. काही जुन्या टॅग्स जसे की `<marquee>` आता अप्रचलित झाले आहेत कारण ते आधुनिक प्रवेशयोग्यता मानक आणि प्रतिसादात्मक डिझाइन तत्त्वांसोबत चांगले कार्य करत नाहीत.
+HTML मध्ये 1990 मध्ये CERN येथे टिम बर्नर्स-लीने पहिला वेब ब्राउझर तयार केल्यापासून लक्षणीय बदल झाले आहेत. काही जुन्या टॅग्स जसे की `<marquee>` आता अप्रचलित आहेत कारण ते आधुनिक प्रवेशयोग्यता मानकांशी आणि प्रतिसादक्षम डिझाइन तत्त्वांशी चांगले जुळत नाहीत.
 
 **हा प्रयोग करून पहा:**
-1. तुमच्या `<h1>` शीर्षकाला तात्पुरते `<marquee>` टॅगमध्ये गुंडाळा: `<marquee><h1>माझा टेरॅरियम</h1></marquee>`
-2. तुमचा पृष्ठ ब्राउझरमध्ये उघडा आणि स्क्रोलिंग प्रभाव पाहा
-3. विचार करा की हा टॅग का अप्रचलित झाला (सूचना: वापरकर्ता अनुभव आणि प्रवेशयोग्यतेबद्दल विचार करा)
-4. `<marquee>` टॅग काढा आणि सेमॅंटिक मार्कअपवर परत जा
+1. तुमच्या `<h1>` शीर्षकाला तात्पुरते `<marquee>` टॅगमध्ये गुंडाळा: `<marquee><h1>My Terrarium</h1></marquee>`
+2. तुमचे पृष्ठ ब्राउझरमध्ये उघडा आणि स्क्रोलिंग प्रभाव पाहा
+3. विचार करा की हा टॅग का अप्रचलित झाला (सूचना: वापरकर्ता अनुभव आणि प्रवेशयोग्यता विचार करा)
+4. `<marquee>` टॅग काढा आणि सिमॅंटिक मार्कअपवर परत जा
 
 **चिंतन प्रश्न:**
-- स्क्रोलिंग शीर्षकाचा व्हिज्युअल इम्पेअरमेंट किंवा मोशन सेन्सिटिव्हिटी असलेल्या वापरकर्त्यांवर कसा परिणाम होऊ शकतो?
-- समान व्हिज्युअल प्रभाव अधिक प्रवेशयोग्यतेने साध्य करण्यासाठी कोणत्या आधुनिक CSS तंत्रांचा वापर करता येईल?
-- अप्रचलित घटकांऐवजी वर्तमान वेब मानकांचा वापर करणे का महत्त्वाचे आहे?
-
-[अप्रचलित आणि अप्रचलित HTML घटक](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) बद्दल अधिक शोधा जेणेकरून वेब मानक कसे विकसित होतात आणि वापरकर्ता अनुभव सुधारतात हे समजून घेता येईल.
+- स्क्रोलिंग शीर्षकाचा दृष्टीदोष असलेल्या किंवा हालचाल संवेदनशीलता असलेल्या वापरकर्त्यांवर कसा परिणाम होऊ शकतो?
+- समान दृश्य प्रभाव अधिक प्रवेशयोग्यतेने साध्य करण्यासाठी कोणती आधुनिक CSS तंत्रे वापरता येतील?
+- अप्रचलित घटकांऐवजी वर्तमान वेब मानकांचा वापर का महत्त्वाचा आहे?
 
+[अप्रचलित आणि अप्रचलित HTML घटकांबद्दल](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) अधिक जाणून घ्या जेणेकरून वेब मानक कसे विकसित होतात ते वापरकर्ता अनुभव सुधारण्यासाठी समजून घेता येईल.
 
-## व्याख्यानानंतरचा क्विझ
+## पोस्ट-लेक्चर क्विझ
 
-[व्याख्यानानंतरचा क्विझ](https://ff-quizzes.netlify.app/web/quiz/16)
+[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/16)
 
 ## पुनरावलोकन आणि स्व-अभ्यास
 
-**तुमचे HTML ज्ञान वाढवा**
+**HTML ज्ञान सखोल करा**
 
-HTML गेल्या 30 वर्षांपासून वेबचा पाया आहे, एक साधा दस्तऐवज मार्कअप भाषा म्हणून विकसित होऊन परस्परसंवादी अनुप्रयोग तयार करण्यासाठी एक परिष्कृत प्लॅटफॉर्म बनला आहे. ही उत्क्रांती समजून घेणे तुम्हाला आधुनिक वेब मानकांचे कौतुक करण्यास मदत करते आणि चांगले विकास निर्णय घेण्यास मदत करते.
+HTML वेबचा पाया आहे आणि 30 वर्षांहून अधिक काळापासून विकसित होत आहे, साध्या दस्तऐवज मार्कअप भाषेपासून परस्परसंवादी अनुप्रयोग तयार करण्यासाठी एक प्रगत व्यासपीठ बनले आहे. या उत्क्रांतीचा अभ्यास केल्याने तुम्हाला आधुनिक वेब मानकांचे कौतुक करण्यास मदत होते आणि चांगले विकास निर्णय घेता येतात.
 
 **शिफारस केलेले शिक्षण मार्ग:**
 
 1. **HTML इतिहास आणि उत्क्रांती**
-   - HTML 1.0 पासून HTML5 पर्यंतचा टाइमलाइन शोधा
-   - विशिष्ट टॅग्स का अप्रचलित झाले याचा अभ्यास करा (प्रवेशयोग्यता, मोबाइल-फ्रेंडलीनेस, देखभालक्षमता)
-   - उदयोन्मुख HTML वैशिष्ट्ये आणि प्रस्तावांचा शोध घ्या
+   - HTML 1.0 ते HTML5 पर्यंतची टाइमलाइन संशोधन करा
+   - विशिष्ट टॅग्स का अप्रचलित झाले (प्रवेशयोग्यता, मोबाइल-अनुकूलता, देखभालक्षमता) याचा अभ्यास करा
+   - उदयोन्मुख HTML वैशिष्ट्ये आणि प्रस्ताव तपासा
 
-2. **सेमॅंटिक HTML सखोल अभ्यास**
-   - [HTML5 सेमॅंटिक घटकांची संपूर्ण यादी](https://developer.mozilla.org/docs/Web/HTML/Element) अभ्यासा
-   - `<article>`, `<section>`, `<aside>`, आणि `<main>` कधी वापरायचे हे ओळखण्याचा सराव करा
-   - वाढीव प्रवेशयोग्यतेसाठी ARIA गुणधर्मांबद्दल जाणून घ्या
+2. **सिमॅंटिक HTML सखोल अभ्यास**
+   - [HTML5 सिमॅंटिक घटकांची संपूर्ण यादी](https://developer.mozilla.org/docs/Web/HTML/Element) अभ्यासा
+   - `<article>`, `<section>`, `<aside>`, आणि `<main>` कधी वापरायचे ते ओळखण्याचा सराव करा
+   - प्रवेशयोग्यता वाढवण्यासाठी ARIA गुणधर्मांबद्दल जाणून घ्या
 
 3. **आधुनिक वेब विकास**
-   - [प्रतिसादात्मक वेबसाइट्स तयार करणे](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn वर एक्सप्लोर करा
-   - HTML कसे CSS आणि JavaScript सोबत एकत्रित होते ते समजून घ्या
+   - Microsoft Learn वर [प्रतिसादक्षम वेबसाइट तयार करणे](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) एक्सप्लोर करा
+   - HTML कसे CSS आणि JavaScript सह एकत्रित होते ते समजून घ्या
    - वेब कार्यक्षमता आणि SEO सर्वोत्तम पद्धतींबद्दल जाणून घ्या
 
 **चिंतन प्रश्न:**
-- तुम्ही कोणते अप्रचलित HTML टॅग्स शोधले आणि ते का काढून टाकले गेले?
+- तुम्हाला कोणते अप्रचलित HTML टॅग्स सापडले आणि ते का काढून टाकले गेले?
 - भविष्यातील आवृत्त्यांसाठी कोणती नवीन HTML वैशिष्ट्ये प्रस्तावित केली जात आहेत?
-- सेमॅंटिक HTML वेब प्रवेशयोग्यता आणि SEO मध्ये कसा योगदान देतो?
+- सिमॅंटिक HTML वेब प्रवेशयोग्यता आणि SEO मध्ये कसा योगदान देतो?
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] DevTools (F12) उघडा आणि तुमच्या आवडत्या वेबसाइटची HTML संरचना तपासा
+- [ ] मूलभूत टॅग्ससह एक साधी HTML फाइल तयार करा: `<h1>`, `<p>`, आणि `<img>`
+- [ ] W3C HTML Validator ऑनलाइन वापरून तुमची HTML वैधता तपासा
+- [ ] `<!-- comment -->` वापरून तुमच्या HTML मध्ये एक टिप्पणी जोडा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि सिमॅंटिक HTML संकल्पना पुनरावलोकन करा
+- [ ] योग्य HTML संरचनेसह स्वतःबद्दल एक साधे वेबपृष्ठ तयार करा
+- [ ] वेगवेगळ्या शीर्षक स्तर आणि मजकूर स्वरूपन टॅग्ससह प्रयोग करा
+- [ ] मल्टीमीडिया एकत्रीकरणाचा सराव करण्यासाठी प्रतिमा आणि दुवे जोडा
+- [ ] तुम्ही अद्याप प्रयत्न केलेले नाहीत अशा HTML5 वैशिष्ट्यांबद्दल संशोधन करा
+
+### 📅 **तुमचा आठवडाभराचा HTML प्रवास**
+- [ ] सिमॅंटिक मार्कअपसह टेरॅरियम प्रकल्प असाइनमेंट पूर्ण करा
+- [ ] ARIA लेबल्स आणि भूमिका वापरून प्रवेशयोग्य वेबपृष्ठ तयार करा
+- [ ] विविध इनपुट प्रकारांसह फॉर्म तयार करण्याचा सराव करा
+- [ ] localStorage किंवा geolocation सारख्या HTML5 APIs एक्सप्लोर करा
+- [ ] प्रतिसादक्षम HTML नमुने आणि मोबाइल-प्रथम डिझाइनचा अभ्यास करा
+- [ ] सर्वोत्तम पद्धतींसाठी इतर विकसकांचे HTML कोड पुनरावलोकन करा
+
+### 🌟 **तुमचा महिनाभराचा वेब पाया**
+- [ ] तुमच्या HTML कौशल्याचे प्रदर्शन करणारी पोर्टफोलिओ वेबसाइट तयार करा
+- [ ] Handlebars सारख्या फ्रेमवर्कसह HTML टेम्पलेटिंग शिकणे
+- [ ] HTML दस्तऐवजीकरण सुधारून ओपन सोर्स प्रकल्पांमध्ये योगदान द्या
+- [ ] कस्टम घटकांसारख्या प्रगत HTML संकल्पना मास्टर करा
+- [ ] CSS फ्रेमवर्क आणि JavaScript लायब्ररीसह HTML एकत्रित करा
+- [ ] HTML मूलभूत गोष्टी शिकणाऱ्यांना मार्गदर्शन करा
+
+## 🎯 तुमची HTML कौशल्य टाइमलाइन
+
+```mermaid
+timeline
+    title HTML Learning Progression
+    
+    section Foundation (5 minutes)
+        Document Structure: DOCTYPE declaration
+                         : HTML root element
+                         : Head vs Body understanding
+        
+    section Metadata (10 minutes)
+        Essential Meta Tags: Character encoding
+                           : Viewport configuration
+                           : Browser compatibility
+        
+    section Content Creation (15 minutes)
+        Image Integration: Proper file paths
+                         : Alt text importance
+                         : Self-closing tags
+        
+    section Layout Organization (20 minutes)
+        Container Strategy: Div elements for structure
+                          : Class and ID naming
+                          : Nested element hierarchy
+        
+    section Semantic Mastery (30 minutes)
+        Meaningful Markup: Heading hierarchy
+                         : Screen reader navigation
+                         : Accessibility best practices
+        
+    section Advanced Concepts (1 hour)
+        HTML5 Features: Modern semantic elements
+                      : ARIA attributes
+                      : Performance considerations
+        
+    section Professional Skills (1 week)
+        Code Organization: File structure patterns
+                         : Maintainable markup
+                         : Team collaboration
+        
+    section Expert Level (1 month)
+        Modern Web Standards: Progressive enhancement
+                            : Cross-browser compatibility
+                            : HTML specification updates
+```
+
+### 🛠️ तुमचा HTML टूलकिट सारांश
+
+या धड्याचा अभ्यास केल्यानंतर, तुमच्याकडे आता आहे:
+- **दस्तऐवज संरचना**: योग्य DOCTYPE सह संपूर्ण HTML5 पाया
+- **सिमॅंटिक मार्कअप**: प्रवेशयोग्यता आणि SEO सुधारण्यासाठी अर्थपूर्ण टॅग्स
+- **प्रतिमा एकत्रीकरण**: योग्य फाइल संघटन आणि alt टेक्स्ट पद्धती
+- **लेआउट कंटेनर**: वर्णनात्मक वर्ग नावे असलेल्या divs चा धोरणात्मक वापर
+- **प्रवेशयोग्यता जागरूकता**: स्क्रीन रीडर नेव्हिगेशनची समज
+- **आधुनिक मानक**: वर्तमान HTML5 पद्धती आणि अप्रचलित टॅग्सचे ज्ञान
+- **प्रकल्प पाया**: CSS शैली आणि JavaScript परस्परसंवादासाठी ठोस आधार
 
+**पुढील पायऱ्या**: तुमची HTML संरचना CSS शैलीसाठी तयार आहे! तुम्ही तयार केलेला सिमॅंटिक पाया पुढील धडा समजून घेणे सोपे करेल.
 
 ## असाइनमेंट
 
-[तुमचे HTML सराव करा: ब्लॉग मॉकअप तयार करा](assignment.md)
+[तुमची HTML सराव करा: ब्लॉग मॉकअप तयार करा](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
diff --git a/translations/mr/3-terrarium/2-intro-to-css/README.md b/translations/mr/3-terrarium/2-intro-to-css/README.md
index 785bf6bccb..a1cae27663 100644
--- a/translations/mr/3-terrarium/2-intro-to-css/README.md
+++ b/translations/mr/3-terrarium/2-intro-to-css/README.md
@@ -1,87 +1,143 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "92c4431eac70670b0450b02c1d11279a",
-  "translation_date": "2025-10-22T16:13:01+00:00",
+  "original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
+  "translation_date": "2025-11-03T14:39:45+00:00",
   "source_file": "3-terrarium/2-intro-to-css/README.md",
   "language_code": "mr"
 }
 -->
-# टेरॅरियम प्रकल्प भाग २: CSS ची ओळख
+# टेरॅरियम प्रकल्प भाग 2: CSS ची ओळख
+
+```mermaid
+journey
+    title Your CSS Styling Journey
+    section Foundation
+      Link CSS file: 3: Student
+      Understand cascade: 4: Student
+      Learn inheritance: 4: Student
+    section Selectors
+      Element targeting: 4: Student
+      Class patterns: 5: Student
+      ID specificity: 5: Student
+    section Layout
+      Position elements: 4: Student
+      Create containers: 5: Student
+      Build terrarium: 5: Student
+    section Polish
+      Add visual effects: 5: Student
+      Responsive design: 5: Student
+      Glass reflections: 5: Student
+```
 
 ![CSS ची ओळख](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.mr.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
-
-आपले HTML टेरॅरियम किती साधे दिसत होते ते लक्षात आहे का? CSS च्या मदतीने आपण त्या साध्या संरचनेला आकर्षक स्वरूपात बदलतो.
-
-जर HTML घराचा फ्रेम तयार करण्यासारखे असेल, तर CSS म्हणजे त्या घराला घरासारखे वाटण्यासाठी आवश्यक असलेले सर्व काही - रंग, फर्निचरची मांडणी, प्रकाशयोजना आणि खोल्यांची रचना. व्हर्सायच्या राजवाड्याचा विचार करा, जो सुरुवातीला एक साधा शिकारीचा निवास होता, परंतु सजावट आणि रचनेवर लक्ष केंद्रित करून तो जगातील सर्वात भव्य इमारतींपैकी एक बनला.
-
-आज आपण आपल्या टेरॅरियमला कार्यक्षमतेपासून परिपूर्णतेकडे बदलणार आहोत. आपण घटकांची अचूकपणे मांडणी कशी करायची, वेगवेगळ्या स्क्रीन आकारांनुसार लेआउट कसे प्रतिसाद देईल आणि वेबसाइट्स आकर्षक बनवण्यासाठी दृश्यात्मक आकर्षण कसे तयार करायचे हे शिकणार आहोत.
-
-या धड्याच्या शेवटी, आपण पाहाल की रणनीतिक CSS स्टाइलिंग आपल्या प्रकल्पाला किती प्रभावीपणे सुधारू शकते. चला आपल्या टेरॅरियमला थोडा स्टाइल देऊया.
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
+
+तुमचा HTML टेरॅरियम किती साधा दिसत होता हे लक्षात आहे का? CSS च्या मदतीने आपण त्या साध्या संरचनेला आकर्षक बनवतो.
+
+जर HTML घराचा फ्रेम तयार करण्यासारखा असेल, तर CSS म्हणजे घराला घरासारखे वाटण्यासाठी आवश्यक सर्व गोष्टी - रंग, फर्निचरची मांडणी, प्रकाशयोजना आणि खोल्यांची रचना. व्हर्सायचा राजवाडा सुरुवातीला एक साधा शिकारीचा निवास होता, पण सजावट आणि रचनेवर लक्ष केंद्रित करून तो जगातील सर्वात भव्य इमारतींपैकी एक बनला.
+
+आज आपण तुमचा टेरॅरियम कार्यक्षमतेपासून आकर्षकतेकडे बदलू. तुम्ही घटक अचूकपणे कसे ठेवायचे, वेगवेगळ्या स्क्रीन आकारांसाठी लेआउट कसे प्रतिसाद देईल आणि वेबसाइट्स आकर्षक बनवणारी दृश्यात्मकता कशी तयार करायची हे शिकाल.
+
+या धड्याच्या शेवटी, तुम्हाला दिसेल की रणनीतिक CSS स्टाइलिंग तुमच्या प्रकल्पाला किती सुधारू शकते. चला तुमच्या टेरॅरियमला थोडा स्टाइल देऊया.
+
+```mermaid
+mindmap
+  root((CSS Fundamentals))
+    Cascade
+      Specificity Rules
+      Inheritance
+      Priority Order
+      Conflict Resolution
+    Selectors
+      Element Tags
+      Classes (.class)
+      IDs (#id)
+      Combinators
+    Box Model
+      Margin
+      Border
+      Padding
+      Content
+    Layout
+      Positioning
+      Display Types
+      Flexbox
+      Grid
+    Visual Effects
+      Colors
+      Shadows
+      Transitions
+      Animations
+    Responsive Design
+      Media Queries
+      Flexible Units
+      Viewport Meta
+      Mobile First
+```
 
-## पूर्व-व्याख्यान प्रश्नमंजूषा
+## प्री-लेक्चर क्विझ
 
-[पूर्व-व्याख्यान प्रश्नमंजूषा](https://ff-quizzes.netlify.app/web/quiz/17)
+[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/17)
 
 ## CSS सुरू करण्याची प्रक्रिया
 
-CSS फक्त "सौंदर्य वाढवणे" म्हणून ओळखले जाते, परंतु त्याचा उद्देश खूप व्यापक आहे. CSS म्हणजे एखाद्या चित्रपटाचा दिग्दर्शक असण्यासारखे आहे - आपण फक्त कसे दिसते हेच नाही तर कसे हलते, परस्परसंवादाला कसे प्रतिसाद देते आणि वेगवेगळ्या परिस्थितींशी कसे जुळवून घेते हे नियंत्रित करता.
+CSS फक्त "सौंदर्य वाढवणे" म्हणून ओळखले जाते, परंतु त्याचा उद्देश खूप व्यापक आहे. CSS म्हणजे एखाद्या चित्रपटाचा दिग्दर्शक असण्यासारखे आहे - तुम्ही फक्त कसे दिसते हेच नाही तर ते कसे हलते, संवाद साधते आणि वेगवेगळ्या परिस्थितींशी कसे जुळवून घेते हे नियंत्रित करता.
 
-आधुनिक CSS खूप सक्षम आहे. आपण फोन, टॅब्लेट आणि डेस्कटॉप संगणकांसाठी लेआउट आपोआप समायोजित करणारा कोड लिहू शकता. आपण वापरकर्त्यांचे लक्ष आवश्यक ठिकाणी नेण्यासाठी गुळगुळीत अॅनिमेशन तयार करू शकता. जेव्हा सर्वकाही एकत्र काम करते तेव्हा परिणाम खूप प्रभावी होऊ शकतो.
+आधुनिक CSS खूप सक्षम आहे. तुम्ही फोन, टॅब्लेट आणि डेस्कटॉप संगणकांसाठी लेआउट आपोआप समायोजित करणारा कोड लिहू शकता. तुम्ही गुळगुळीत अॅनिमेशन तयार करू शकता जे वापरकर्त्यांचे लक्ष आवश्यक ठिकाणी केंद्रित करतात. जेव्हा सर्वकाही एकत्र काम करते तेव्हा परिणाम खूप प्रभावी असतो.
 
 > 💡 **प्रो टिप**: CSS सतत नवीन वैशिष्ट्ये आणि क्षमता सह विकसित होत आहे. उत्पादन प्रकल्पांमध्ये वापरण्यापूर्वी नवीन CSS वैशिष्ट्यांसाठी ब्राउझर समर्थन सत्यापित करण्यासाठी नेहमी [CanIUse.com](https://caniuse.com) तपासा.
 
 **या धड्यात आपण काय साध्य करू:**
-- **संपूर्ण दृश्यात्मक डिझाइन तयार करणे** आधुनिक CSS तंत्रांचा वापर करून
-- **मूलभूत संकल्पना शोधणे** जसे की कॅस्केड, वारसा आणि CSS निवडक
-- **प्रतिसादात्मक स्थिती आणि लेआउट रणनीती अंमलात आणणे**
-- **टेरॅरियम कंटेनर तयार करणे** CSS आकार आणि स्टाइलिंग वापरून
+- **तयार करतो** आधुनिक CSS तंत्रांचा वापर करून तुमच्या टेरॅरियमसाठी संपूर्ण दृश्यात्मक डिझाइन
+- **शोधतो** कॅस्केड, वारसा आणि CSS सिलेक्टर्स यासारखी मूलभूत संकल्पना
+- **अंमलात आणतो** प्रतिसादात्मक पोझिशनिंग आणि लेआउट रणनीती
+- **बांधतो** CSS आकार आणि स्टाइलिंग वापरून टेरॅरियम कंटेनर
 
-### पूर्वअट
+### पूर्वतयारी
 
-आपण मागील धडातून आपल्या टेरॅरियमसाठी HTML संरचना पूर्ण केली पाहिजे आणि ती स्टाइल करण्यासाठी तयार असावी.
+तुम्ही मागील धड्यातून तुमच्या टेरॅरियमसाठी HTML संरचना पूर्ण केली पाहिजे आणि ती स्टाइल करण्यासाठी तयार असावी.
 
 > 📺 **व्हिडिओ संसाधन**: या उपयुक्त व्हिडिओ वॉकथ्रूला पहा
 >
 > [![CSS बेसिक्स ट्यूटोरियल](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I)
 
-### CSS फाइल सेट करणे
+### तुमचा CSS फाइल सेट करणे
 
-स्टाइलिंग सुरू करण्यापूर्वी, आपल्याला CSS आपल्या HTML शी जोडणे आवश्यक आहे. ही कनेक्शन ब्राउझरला आपल्या टेरॅरियमसाठी स्टाइलिंग सूचना कुठे शोधायच्या ते सांगते.
+स्टाइलिंग सुरू करण्यापूर्वी, आपल्याला CSS HTML शी जोडणे आवश्यक आहे. ही कनेक्शन ब्राउझरला तुमच्या टेरॅरियमसाठी स्टाइलिंग सूचना कुठे शोधायच्या ते सांगते.
 
-आपल्या टेरॅरियम फोल्डरमध्ये, `style.css` नावाची नवीन फाइल तयार करा आणि ती आपल्या HTML दस्तऐवजाच्या `<head>` विभागात लिंक करा:
+तुमच्या टेरॅरियम फोल्डरमध्ये, `style.css` नावाची नवीन फाइल तयार करा आणि ती तुमच्या HTML डॉक्युमेंटच्या `<head>` विभागात लिंक करा:
 
 ```html
 <link rel="stylesheet" href="./style.css" />
 ```
 
 **या कोडचे कार्य:**
-- **HTML आणि CSS फाइल्समध्ये कनेक्शन तयार करणे**
-- **ब्राउझरला `style.css` मधील स्टाइल्स लोड आणि लागू करण्यास सांगणे**
-- **`rel="stylesheet"` गुणधर्माचा वापर करून CSS फाइल असल्याचे निर्दिष्ट करणे**
-- **फाइल पथ `href="./style.css"` सह संदर्भित करणे**
+- **तयार करते** तुमच्या HTML आणि CSS फाइल्समधील कनेक्शन
+- **ब्राउझरला सांगते** `style.css` मधून स्टाइल्स लोड आणि लागू करायला
+- **वापरते** `rel="stylesheet"` अॅट्रिब्युट CSS फाइल असल्याचे निर्दिष्ट करण्यासाठी
+- **संदर्भ देते** फाइल पथ `href="./style.css"` सह
 
 ## CSS कॅस्केड समजून घेणे
 
 CSS ला "कॅस्केडिंग" स्टाइल शीट्स का म्हणतात याचा विचार केला आहे का? स्टाइल्स पाण्याच्या धबधब्यासारखे खाली वाहतात आणि कधीकधी एकमेकांशी संघर्ष करतात.
 
-लष्करी आदेश संरचना कशी कार्य करते याचा विचार करा - एक सामान्य आदेश म्हणतो "सर्व सैनिकांनी हिरवा रंग घालावा," परंतु आपल्या युनिटसाठी विशिष्ट आदेश म्हणतो "समारंभासाठी ड्रेस ब्लूज घाला." अधिक विशिष्ट सूचना प्राधान्य घेते. CSS समान तर्काचे अनुसरण करते आणि ही श्रेणी समजून घेणे डीबगिंग अधिक व्यवस्थापनीय बनवते.
+लष्करी आदेश संरचना कशी कार्य करते याचा विचार करा - एक सामान्य आदेश म्हणू शकतो "सर्व सैनिक हिरवा पोशाख घाला," परंतु तुमच्या युनिटसाठी विशिष्ट आदेश म्हणू शकतो "समारंभासाठी ड्रेस ब्लूज घाला." अधिक विशिष्ट सूचना प्राधान्य घेते. CSS समान तर्काचे अनुसरण करते आणि ही श्रेणी समजून घेणे डीबगिंग अधिक व्यवस्थापनीय बनवते.
 
 ### कॅस्केड प्राधान्याचा प्रयोग
 
-चला कॅस्केड अॅक्शनमध्ये पाहूया आणि एक स्टाइल संघर्ष तयार करूया. प्रथम, आपल्या `<h1>` टॅगमध्ये एक इनलाइन स्टाइल जोडा:
+स्टाइल संघर्ष तयार करून कॅस्केड अॅक्शनमध्ये पाहूया. प्रथम, तुमच्या `<h1>` टॅगमध्ये इनलाइन स्टाइल जोडा:
 
 ```html
 <h1 style="color: red">My Terrarium</h1>
 ```
 
 **या कोडचे कार्य:**
-- **इनलाइन स्टाइलिंग वापरून `<h1>` घटकावर थेट लाल रंग लागू करणे**
-- **HTML मध्ये CSS एम्बेड करण्यासाठी `style` गुणधर्म वापरणे**
-- **या विशिष्ट घटकासाठी सर्वाधिक प्राधान्य असलेला स्टाइल नियम तयार करणे**
+- **लागू करते** इनलाइन स्टाइलिंग वापरून `<h1>` घटकावर थेट लाल रंग
+- **वापरते** `style` अॅट्रिब्युट HTML मध्ये CSS थेट एम्बेड करण्यासाठी
+- **तयार करते** या विशिष्ट घटकासाठी सर्वोच्च प्राधान्य स्टाइल नियम
 
-यानंतर, आपल्या `style.css` फाइलमध्ये हा नियम जोडा:
+यानंतर, तुमच्या `style.css` फाइलमध्ये हा नियम जोडा:
 
 ```css
 h1 {
@@ -90,28 +146,50 @@ h1 {
 ```
 
 **वरीलमध्ये आपण:**
-- **सर्व `<h1>` घटकांना लक्ष्य करणारा CSS नियम परिभाषित केला आहे**
-- **बाह्य स्टाइलशीट वापरून मजकूराचा रंग निळा सेट केला आहे**
-- **इनलाइन स्टाइल्सच्या तुलनेत कमी प्राधान्य असलेला नियम तयार केला आहे**
-
-✅ **ज्ञान तपासणी**: आपल्या वेब अॅपमध्ये कोणता रंग दिसतो? तो रंग का जिंकतो? अशा परिस्थितींचा विचार करा जिथे आपण स्टाइल्स ओव्हरराइड करू इच्छिता.
+- **परिभाषित केले** CSS नियम जो सर्व `<h1>` घटकांना लक्ष्य करतो
+- **सेट केले** बाह्य स्टाइलशीट वापरून मजकूराचा रंग निळा
+- **तयार केले** इनलाइन स्टाइल्सच्या तुलनेत कमी प्राधान्य नियम
+
+✅ **ज्ञान तपासणी**: तुमच्या वेब अॅपमध्ये कोणता रंग दिसतो? तो रंग का जिंकतो? तुम्ही स्टाइल्स ओव्हरराइड करण्याच्या परिस्थितींचा विचार करू शकता का?
+
+```mermaid
+flowchart TD
+    A["Browser encounters h1 element"] --> B{"Check for inline styles"}
+    B -->|Found| C["style='color: red'"] 
+    B -->|None| D{"Check for ID rules"}
+    C --> E["Apply red color (1000 points)"]
+    D -->|Found| F["#heading { color: green }"]
+    D -->|None| G{"Check for class rules"}
+    F --> H["Apply green color (100 points)"]
+    G -->|Found| I[".title { color: blue }"]
+    G -->|None| J{"Check element rules"}
+    I --> K["Apply blue color (10 points)"]
+    J -->|Found| L["h1 { color: purple }"]
+    J -->|None| M["Use browser default"]
+    L --> N["Apply purple color (1 point)"]
+    
+    style C fill:#ff6b6b
+    style F fill:#51cf66
+    style I fill:#339af0
+    style L fill:#9775fa
+```
 
-> 💡 **CSS प्राधान्य क्रम (सर्वाधिक ते कमी):**
-> 1. **इनलाइन स्टाइल्स** (style गुणधर्म)
+> 💡 **CSS प्राधान्य क्रम (सर्वोच्च ते निम्न):**
+> 1. **इनलाइन स्टाइल्स** (style attribute)
 > 2. **IDs** (#myId)
-> 3. **क्लासेस** (.myClass) आणि गुणधर्म
-> 4. **घटक निवडक** (h1, div, p)
+> 3. **क्लासेस** (.myClass) आणि अॅट्रिब्युट्स
+> 4. **घटक सिलेक्टर्स** (h1, div, p)
 > 5. **ब्राउझर डीफॉल्ट्स**
 
-## CSS वारसा कृतीत
+## CSS वारसा क्रियेत
 
-CSS वारसा म्हणजे अनुवांशिकतेसारखे कार्य करते - घटक त्यांच्या पालक घटकांकडून विशिष्ट गुणधर्म वारसाहक्काने घेतात. जर आपण बॉडी घटकावर फॉन्ट फॅमिली सेट केली, तर आतला सर्व मजकूर आपोआप तोच फॉन्ट वापरतो. हे जसे हॅब्सबर्ग कुटुंबाच्या विशिष्ट जबड्याची रचना पिढ्यानपिढ्या दिसून आली, परंतु प्रत्येक व्यक्तीसाठी निर्दिष्ट केली गेली नाही.
+CSS वारसा अनुवांशिकतेसारखे कार्य करते - घटक त्यांच्या पालक घटकांकडून विशिष्ट गुणधर्म वारसाहक्काने घेतात. जर तुम्ही बॉडी घटकावर फॉन्ट फॅमिली सेट केली, तर आतला सर्व मजकूर आपोआप तोच फॉन्ट वापरतो. हे हॅब्सबर्ग कुटुंबाच्या विशिष्ट जबड्याच्या रेषेसारखे आहे जे प्रत्येक व्यक्तीसाठी निर्दिष्ट न करता पिढ्यानपिढ्या दिसते.
 
-तथापि, सर्वकाही वारसाहक्काने मिळत नाही. फॉन्ट आणि रंग यासारख्या मजकूर शैली वारसाहक्काने मिळतात, परंतु मार्जिन आणि बॉर्डर यासारख्या लेआउट गुणधर्म मिळत नाहीत. जसे मुलांना शारीरिक वैशिष्ट्ये वारसाहक्काने मिळतात पण त्यांच्या पालकांची फॅशन निवड नाही.
+तथापि, सर्वकाही वारसाहक्काने मिळत नाही. फॉन्ट्स आणि रंगांसारख्या मजकूर शैली वारसाहक्काने मिळतात, परंतु मार्जिन आणि बॉर्डरसारख्या लेआउट गुणधर्म वारसाहक्काने मिळत नाहीत. जसे मुलांना शारीरिक वैशिष्ट्ये वारसाहक्काने मिळू शकतात पण त्यांच्या पालकांची फॅशन निवड नाही.
 
 ### फॉन्ट वारसा निरीक्षण करणे
 
-चला `<body>` घटकावर फॉन्ट फॅमिली सेट करून वारसा कृतीत पाहूया:
+बॉडी घटकावर फॉन्ट फॅमिली सेट करून वारसा अॅक्शनमध्ये पाहूया:
 
 ```css
 body {
@@ -120,30 +198,45 @@ body {
 ```
 
 **येथे काय होते ते समजून घेणे:**
-- **संपूर्ण पृष्ठासाठी फॉन्ट फॅमिली सेट करते** `<body>` घटकाला लक्ष्य करून
-- **फॉलबॅक पर्यायांसह फॉन्ट स्टॅक वापरते** चांगल्या ब्राउझर सुसंगततेसाठी
-- **वेगवेगळ्या ऑपरेटिंग सिस्टमवर चांगले दिसणारे आधुनिक सिस्टम फॉन्ट लागू करते**
-- **सर्व चाइल्ड घटकांना हा फॉन्ट वारसाहक्काने मिळतो** जोपर्यंत विशेषतः ओव्हरराइड केले जात नाही
+- **सेट करते** संपूर्ण पृष्ठासाठी फॉन्ट फॅमिली बॉडी घटकाला लक्ष्य करून
+- **वापरते** फॉन्ट स्टॅक फॉलबॅक पर्यायांसह चांगल्या ब्राउझर सुसंगततेसाठी
+- **लागू करते** आधुनिक सिस्टम फॉन्ट्स जे वेगवेगळ्या ऑपरेटिंग सिस्टमवर चांगले दिसतात
+- **सुनिश्चित करते** सर्व चाइल्ड घटक हा फॉन्ट वारसाहक्काने घेतात जोपर्यंत विशेषतः ओव्हरराइड केलेला नाही
 
-आपल्या ब्राउझरचे डेव्हलपर टूल्स (F12) उघडा, एलिमेंट्स टॅबवर जा आणि आपल्या `<h1>` घटकाची तपासणी करा. आपण पाहाल की ते बॉडीकडून फॉन्ट फॅमिली वारसाहक्काने घेत आहे:
+तुमच्या ब्राउझरचे डेव्हलपर टूल्स (F12) उघडा, एलिमेंट्स टॅबवर जा आणि तुमच्या `<h1>` घटकाची तपासणी करा. तुम्हाला दिसेल की ते बॉडीकडून फॉन्ट फॅमिली वारसाहक्काने घेतात:
 
 ![वारसाहक्काने मिळालेला फॉन्ट](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.mr.png)
 
-✅ **प्रयोग वेळ**: `<body>` वर `color`, `line-height`, किंवा `text-align` सारखी इतर वारसाहक्काने मिळणारी गुणधर्म सेट करण्याचा प्रयत्न करा. आपल्या हेडिंग आणि इतर घटकांवर काय परिणाम होतो?
+✅ **प्रयोग वेळ**: `<body>` वर `color`, `line-height`, किंवा `text-align` सारखी इतर वारसाहक्काने मिळणारी गुणधर्म सेट करण्याचा प्रयत्न करा. तुमच्या हेडिंग आणि इतर घटकांवर काय परिणाम होतो?
 
 > 📝 **वारसाहक्काने मिळणारे गुणधर्म समाविष्ट करतात**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
 >
 > **वारसाहक्काने न मिळणारे गुणधर्म समाविष्ट करतात**: `margin`, `padding`, `border`, `width`, `height`, `position`
 
-## CSS निवडक मास्टर करणे
+### 🔄 **शैक्षणिक तपासणी**
+**CSS फाउंडेशन समजून घेणे**: सिलेक्टर्सकडे जाण्यापूर्वी, सुनिश्चित करा की तुम्ही:
+- ✅ कॅस्केड आणि वारसाहक्कातील फरक स्पष्ट करू शकता
+- ✅ विशिष्टता संघर्षात कोणती स्टाइल जिंकेल हे अंदाज करू शकता
+- ✅ कोणते गुणधर्म पालक घटकांकडून वारसाहक्काने मिळतात हे ओळखू शकता
+- ✅ CSS फाइल्स HTML शी योग्य प्रकारे जोडू शकता
+
+**जलद चाचणी**: जर तुमच्याकडे हे स्टाइल्स असतील, तर `<div class="special">` मध्ये असलेल्या `<h1>` चा रंग काय असेल?
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*उत्तर: लाल (घटक सिलेक्टर थेट h1 ला लक्ष्य करतो)*
+
+## CSS सिलेक्टर्समध्ये प्रावीण्य मिळवणे
 
-CSS निवडक विशिष्ट घटकांना स्टाइलिंगसाठी लक्ष्य करण्याचा आपला मार्ग आहे. ते अचूक दिशानिर्देश देण्यासारखे कार्य करतात - "घर" म्हणण्याऐवजी आपण "निळ्या रंगाचे घर ज्याचे लाल दरवाजे आहेत आणि मेपल स्ट्रीटवर आहे" असे म्हणू शकता.
+CSS सिलेक्टर्स विशिष्ट घटकांना स्टाइल करण्याचा तुमचा मार्ग आहे. ते अचूक दिशानिर्देश देण्यासारखे कार्य करतात - "घर" म्हणण्याऐवजी तुम्ही "मॅपल स्ट्रीटवरील लाल दरवाजा असलेले निळे घर" म्हणू शकता.
 
-CSS विविध प्रकारे विशिष्ट असण्याचे मार्ग प्रदान करते, आणि योग्य निवडक निवडणे म्हणजे कार्यासाठी योग्य साधन निवडण्यासारखे आहे. कधी कधी आपल्याला संपूर्ण परिसरातील दरवाजे स्टाइल करायचे असतात, तर कधी फक्त एक विशिष्ट दरवाजा.
+CSS वेगवेगळ्या प्रकारे विशिष्ट असण्याचे मार्ग प्रदान करते आणि योग्य सिलेक्टर निवडणे म्हणजे कार्यासाठी योग्य साधन निवडणे. कधी कधी तुम्हाला संपूर्ण परिसरातील प्रत्येक दरवाजा स्टाइल करायचा असतो, तर कधी फक्त एक विशिष्ट दरवाजा.
 
-### घटक निवडक (टॅग्स)
+### घटक सिलेक्टर्स (टॅग्स)
 
-घटक निवडक HTML घटकांना त्यांच्या टॅग नावाने लक्ष्य करतात. ते आपल्या पृष्ठावर व्यापकपणे लागू होणाऱ्या बेस स्टाइल्स सेट करण्यासाठी योग्य आहेत:
+घटक सिलेक्टर्स HTML घटकांना त्यांच्या टॅग नावाने लक्ष्य करतात. ते तुमच्या पृष्ठावर व्यापकपणे लागू होणारे बेस स्टाइल्स सेट करण्यासाठी योग्य आहेत:
 
 ```css
 body {
@@ -161,18 +254,18 @@ h1 {
 ```
 
 **या स्टाइल्स समजून घेणे:**
-- **संपूर्ण पृष्ठावर सुसंगत टायपोग्राफी सेट करते** `body` निवडक वापरून
-- **डिफॉल्ट ब्राउझर मार्जिन आणि पॅडिंग काढून टाकते** चांगल्या नियंत्रणासाठी
-- **सर्व हेडिंग घटकांना रंग, संरेखन आणि अंतरासह स्टाइल करते**
-- **स्केलेबल, अॅक्सेसिबल फॉन्ट साइजिंगसाठी `rem` युनिट्स वापरते**
+- **सेट करते** संपूर्ण पृष्ठावर सुसंगत टायपोग्राफी `body` सिलेक्टरसह
+- **काढून टाकते** ब्राउझरचे डीफॉल्ट मार्जिन आणि पॅडिंग चांगल्या नियंत्रणासाठी
+- **स्टाइल करते** सर्व हेडिंग घटक रंग, संरेखन आणि स्पेसिंगसह
+- **वापरते** `rem` युनिट्स स्केलेबल, अॅक्सेसिबल फॉन्ट साइजिंगसाठी
 
-घटक निवडक सामान्य स्टाइलिंगसाठी चांगले कार्य करतात, परंतु आपल्याला टेरॅरियममधील झाडांसारख्या वैयक्तिक घटकांना स्टाइल करण्यासाठी अधिक विशिष्ट निवडकांची आवश्यकता असेल.
+घटक सिलेक्टर्स सामान्य स्टाइलिंगसाठी चांगले कार्य करतात, परंतु तुम्हाला टेरॅरियममधील झाडांसारख्या वैयक्तिक घटकांना स्टाइल करण्यासाठी अधिक विशिष्ट सिलेक्टर्सची आवश्यकता असेल.
 
-### अद्वितीय घटकांसाठी ID निवडक
+### अद्वितीय घटकांसाठी ID सिलेक्टर्स
 
-ID निवडक `#` चिन्ह वापरतात आणि विशिष्ट `id` गुणधर्म असलेल्या घटकांना लक्ष्य करतात. IDs पृष्ठावर अद्वितीय असणे आवश्यक असल्याने, ते आपल्या डाव्या आणि उजव्या झाडांच्या कंटेनरसारख्या वैयक्तिक, विशेष घटकांना स्टाइल करण्यासाठी योग्य आहेत.
+ID सिलेक्टर्स `#` चिन्ह वापरतात आणि विशिष्ट `id` अॅट्रिब्युट्स असलेल्या घटकांना लक्ष्य करतात. IDs पृष्ठावर अद्वितीय असणे आवश्यक असल्याने, ते टेरॅरियमच्या डाव्या आणि उजव्या बाजूच्या वनस्पती कंटेनरसारख्या वैयक्तिक, विशेष घटकांना स्टाइल करण्यासाठी योग्य आहेत.
 
-चला आपल्या टेरॅरियमच्या बाजूच्या कंटेनरसाठी स्टाइल तयार करूया जिथे झाडे राहतील:
+चला टेरॅरियमच्या बाजूच्या कंटेनरसाठी स्टाइल तयार करूया जिथे वनस्पती राहतील:
 
 ```css
 #left-container {
@@ -199,13 +292,13 @@ ID निवडक `#` चिन्ह वापरतात आणि विश
 ```
 
 **या कोडने काय साध्य केले आहे:**
-- **कंटेनर्सला `absolute` पोझिशनिंग वापरून डाव्या आणि उजव्या कडांवर ठेवते**
-- **`vh` (व्ह्यूपोर्ट हाइट) युनिट्स वापरून प्रतिसादात्मक उंची सेट करते** जी स्क्रीन आकारानुसार जुळते
-- **`box-sizing: border-box` लागू करते** जेणेकरून पॅडिंग एकूण रुंदीमध्ये समाविष्ट होईल
-- **शून्य मूल्यांमधून अनावश्यक `px` युनिट्स काढून टाकते** स्वच्छ कोडसाठी
-- **एक सूक्ष्म पार्श्वभूमी रंग सेट करते** जो चमकदार ग्रे पेक्षा डोळ्यांना अधिक आरामदायक वाटतो
+- **स्थिती** कंटेनरला `absolute` पोझिशनिंग वापरून डाव्या आणि उजव्या कडांवर ठेवते
+- **वापरते** `vh` (व्ह्यूपोर्ट हाइट) युनिट्स प्रतिसादात्मक उंचीसाठी जी स्क्रीन आकाराशी जुळवून घेते
+- **लागू करते** `box-sizing: border-box` जेणेकरून पॅडिंग एकूण रुंदीमध्ये समाविष्ट होईल
+- **काढून टाकते** शून्य मूल्यांमधून अनावश्यक `px` युनिट्स स्वच्छ कोडसाठी
+- **सेट करते** सूक्ष्म पार्श्वभूमी रंग जो गडद ग्रेच्या तुलनेत डोळ्यांसाठी सोपा आहे
 
-✅ **कोड गुणवत्ता आव्हान**: लक्षात घ्या की हा CSS DRY (Don't Repeat Yourself) तत्त्वाचे उल्लंघन करतो. आपण ID आणि क्लास दोन्ही वापरून याची पुनर्रचना करू शकता का?
+✅ **कोड गुणवत्ता आव्हान**: लक्षात घ्या की हा CSS DRY (डोंट रिपीट युअरसेल्फ) तत्त्वाचे उल्लंघन करतो. तुम्ही ID आणि क्लास दोन्ही वापरून याला कसे सुधारित करू शकता?
 
 **सुधारित दृष्टिकोन:**
 ```html
@@ -233,13 +326,13 @@ ID निवडक `#` चिन्ह वापरतात आणि विश
 }
 ```
 
-### पुनर्वापरयोग्य स्टाइलसाठी क्लास निवडक
+### पुनर्वापरयोग्य स्टाइलसाठी क्लास सिलेक्टर्स
 
-क्लास निवडक `.` चिन्ह वापरतात आणि जेव्हा आपल्याला एकाच स्टाइल्स अनेक घटकांवर लागू करायच्या असतात तेव्हा योग्य असतात. IDs च्या विपरीत, क्लासेस आपल्या HTML मध्ये पुन्हा वापरता येतात, ज्यामुळे ते सुसंगत स्टाइलिंग पॅटर्नसाठी आदर्श बनतात.
+क्लास सिलेक्टर्स `.` चिन्ह वापरतात आणि तुम्हाला एकाच स्टाइल्स अनेक घटकांवर लागू करायच्या असतील तेव्हा योग्य असतात. IDs च्या विपरीत, क्लासेस तुमच्या HTML मध्ये पुन्हा वापरता येतात, ज्यामुळे ते सुसंगत स्टाइलिंग पॅटर्नसाठी आदर्श बनतात.
 
-आपल्या टेरॅरियममध्ये, प्रत्येक झाडाला समान स्टाइलिंगची आवश्यकता आहे परंतु वैयक्तिक स्थितीची आवश्यकता आहे. आम्ही सामायिक स्टाइल्ससाठी क्लासेस आणि अद्वितीय पोझिशनिंगसाठी IDs चा संयोजन वापरणार आहोत.
+आपल्या टेरॅरियममध्ये, प्रत्येक वनस्पतीला समान स्टाइलिंगची आवश्यकता आहे परंतु वैयक्तिक पोझिशनिंगची आवश्यकता आहे. आम्ही सामायिक स्टाइलसाठी क्लासेस आणि अद्वितीय पोझिशनिंगसाठी IDs चा संयोजन वापरू.
 
-**प्रत्येक झाडासाठी HTML संरचना येथे आहे:**
+**प्रत्येक वनस्पतीसाठी HTML संरचना येथे आहे:**
 ```html
 <div class="plant-holder">
   <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.mr.png" />
@@ -247,12 +340,12 @@ ID निवडक `#` चिन्ह वापरतात आणि विश
 ```
 
 **महत्त्वाचे घटक स्पष्ट केले:**
-- **सर्व झाडांसाठी सुसंगत कंटेनर स्टाइलिंगसाठी `class="plant-holder"` वापरते**
-- **सामायिक प्रतिमा स्टाइलिंग आणि वर्तनासाठी `class="plant"` लागू करते**
-- **अद्वितीय `id="plant1"` समाविष्ट करते** वैयक्तिक पोझिशनिंग आणि JavaScript परस्परसंवादासाठी
-- **स्क्रीन रीडर अॅक्सेसिबिलिटीसाठी वर्णनात्मक alt मजकूर प्रदान करते**
+- **वापरते** `class="plant-holder"` सर्व वनस्पतींसाठी सुसंगत कंटेनर स्टाइलिंगसाठी
+- **लागू करते** `class="plant"` सामायिक प्रतिमा स्टाइलिंग आणि वर्तनासाठी
+- **समाविष्ट करते** अद्वितीय `id="plant1"` वैयक्तिक पोझिशनिंग आणि JavaScript संवादासाठी
+- **प्रदान करते** स्क्रीन रीडर अॅक्सेसिबिलिटीसाठी वर्णनात्मक alt टेक्स्ट
 
-आता हे स्टाइल्स आपल्या `style.css` फाइलमध्ये जोडा:
+आता तुमच्या `style.css` फाइलमध्ये हे स्टाइल्स जोडा:
 
 ```css
 .plant-holder {
@@ -275,32 +368,66 @@ ID निवडक `#` चिन्ह वापरतात आणि विश
 ```
 
 **या स्टाइल्सचे विश्लेषण:**
-- **सापेक्ष पोझिशनिंग तयार करते** प्लांट होल्डरसाठी पोझिशनिंग संदर्भ स्थापित करण्यासाठी
-- **प्रत्येक प्लांट होल्डरला 13% उंची सेट करते** जेणेकरून सर्व झाडे स्क्रोलिंगशिवाय उभ्या फिट होतील
-- **कंटेनर्समध्ये झाडे चांगल्या प्रकारे केंद्रित करण्यासाठी थोडेसे डावीकडे सरकवते**
-- **`max-width` आणि `max-height` गुणधर्मांसह झाडांना प्रतिसादात्मकपणे स्केल करण्यास अनुमती देते**
-- **`z-index` वापरते** टेरॅरियममधील इतर घटकांवर झाडे थर लावण्यासाठी
-- **CSS ट्रांझिशन्ससह सूक्ष्म हवर प्रभाव जोडते** चांगल्या वापरकर्ता परस्परसंवादासाठी
+- **तयार करते** वनस्पती होल्डरसाठी सापेक्ष पोझिशनिंग जे पोझिशनिंग संदर्भ तयार करते
+- **सेट करते** प्रत्येक वनस्पती होल्डर 13% उंचीवर, सर्व वनस्पती स्क्रोलिंगशिवाय उभ्या फिट होण्यासाठी
+- **थोडे हलवते** होल्डर्स डावीकडे वनस्पतींना त्यांच्या कंटेनरमध्ये चांगले केंद्रित करण्यासाठी
+- **परवानगी देते** वनस्पतींना प्रतिसादात्मकपणे स्केल करण्यासाठी `max-width` आणि `max-height` गुणधर्मांसह
+- **वापरते** `z-index` टेरॅरियममधील इतर घटकांवर वनस्पतींना स्तरित करण्यासाठी
+- **जोडते** CSS ट्रांझिशन्ससह सूक्ष्म हवर इफेक्ट चांगल्या वापरकर्ता संवादासाठी
 
-✅ **गंभीर विचार**: आपल्याला दोन्ही `.plant-holder` आणि `.plant` निवडकांची आवश्यकता का आहे? जर आपण फक्त एक वापरण्याचा प्रयत्न केला तर काय होईल?
+✅ **गंभीर विचार**: आपल्याला `.plant-holder` आणि `.plant` सिलेक्टर्स दोन्ही का आवश्यक आहेत? जर आपण फक्त एक वापरण्याचा प्रयत्न केला तर काय होईल?
 
 > 💡 **डिझाइन पॅटर्न**: कंटेनर (`.plant-holder`) लेआउट आणि पोझिशनिंग नियंत्रित करते, तर सामग्री (`.plant`) स्वरूप आणि स्केलिंग नियंत्रित करते. हा विभाजन कोड अधिक देखभालक्षम आणि लवचिक बनवतो.
 
 ## CSS पोझिशनिंग समजून घेणे
 
-CSS पोझिशनिंग म्हणजे नाटकासाठी स्टेज दिग्दर्शक असण्यासारखे आहे - आपण प्रत्येक पात्र कुठे उभे राहते आणि स्टेजवर कसे फिरते हे निर्देशित करता. काही पात्रे मानक स्वरूपाचे अनुसरण करतात, तर काही नाट्यमय परिणामासाठी विशिष्ट पोझिशनिंगची आवश्यकता असते.
-
-पोझिशनिंग समजून घेतल्यानंतर, अनेक लेआउट आव्हाने व्यवस्थापनीय बनतात. वापरकर्ते स्क्रोल करत असताना शीर्षस्थानी राहणारी नेव्हिगेशन बार आवश्यक आहे? पोझिशनिंग त्याचा सामना करते. विशिष्ट ठिकाणी दिसणारे टूलटिप हवे आहे? ते देखील पोझिशनिंगद्वारे शक्य आहे.
+CSS पोझिशनिंग म्हणजे नाटकासाठी स्टेज डायरेक्टर असण्यासारखे आहे - तुम्ही प्रत्येक अभिनेता कुठे उभा
+- `.plant-holder` जर `relative` ऐवजी `absolute` वापरत असेल तर लेआउट कसे बदलते?
+- `.plant` ला `relative` पोझिशनिंगमध्ये बदलल्यावर काय होते?
+
+### 🔄 **शैक्षणिक तपासणी**
+**CSS पोझिशनिंग कौशल्य**: तुमचे समज तपासण्यासाठी थांबा:
+- ✅ तुम्ही स्पष्ट करू शकता का की ड्रॅग-आणि-ड्रॉपसाठी प्लांट्सना absolute पोझिशनिंग का आवश्यक आहे?
+- ✅ तुम्हाला समजते का की relative कंटेनर्स पोझिशनिंग संदर्भ कसे तयार करतात?
+- ✅ साइड कंटेनर्स absolute पोझिशनिंग का वापरतात?
+- ✅ जर तुम्ही पोझिशन डिक्लेरेशन पूर्णपणे काढून टाकले तर काय होईल?
+
+**वास्तविक जगाशी संबंध**: विचार करा की CSS पोझिशनिंग वास्तविक जगातील लेआउटशी कसे जुळते:
+- **Static**: शेल्फवर ठेवलेली पुस्तके (नैसर्गिक क्रम)
+- **Relative**: पुस्तक थोडे हलवणे पण त्याच जागेवर ठेवणे
+- **Absolute**: एखाद्या पानावर बुकमार्क अचूकपणे ठेवणे
+- **Fixed**: पानं उलटताना दिसणारी स्टिकी नोट
+
+## CSS सह टेरॅरियम तयार करणे
+
+आता आपण फक्त CSS वापरून काचेचा जार तयार करू - कोणत्याही इमेजेस किंवा ग्राफिक्स सॉफ्टवेअरशिवाय.
+
+पोझिशनिंग आणि ट्रान्सपेरन्सी वापरून वास्तववादी काच, सावल्या आणि खोलीचे प्रभाव तयार करणे हे CSS च्या व्हिज्युअल क्षमता दर्शवते. ही तंत्रे बाऊहाऊस चळवळीतील आर्किटेक्ट्सने साध्या जियोमेट्रिक फॉर्म्स वापरून जटिल, सुंदर संरचना तयार करण्याच्या पद्धतीशी जुळतात. एकदा तुम्ही हे तत्त्व समजून घेतल्यावर, तुम्हाला अनेक वेब डिझाइन्समागील CSS तंत्रे ओळखता येतील.
+
+```mermaid
+flowchart LR
+    A[Jar Top] --> E[Complete Terrarium]
+    B[Jar Walls] --> E
+    C[Dirt Layer] --> E
+    D[Jar Bottom] --> E
+    F[Glass Effects] --> E
+    
+    A1["50% width<br/>5% height<br/>Top position"] --> A
+    B1["60% width<br/>80% height<br/>Rounded corners<br/>0.5 opacity"] --> B
+    C1["60% width<br/>5% height<br/>Dark brown<br/>Bottom layer"] --> C
+    D1["50% width<br/>1% height<br/>Bottom position"] --> D
+    F1["Subtle shadows<br/>Transparency<br/>Z-index layering"] --> F
+    
+    style E fill:#d1e1df,stroke:#3a241d
+    style A fill:#e8f5e8
+    style B fill:#e8f5e8
+    style C fill:#8B4513
+    style D fill:#e8f5e8
+```
 
-### पाच पोझिशन मूल्ये
+### काचेच्या जारचे घटक तयार करणे
 
-| पोझिशन मूल्य | वर्तन | उपयोग प्रकरण |
-|----------------|----------|----------|
-| `static` | डिफॉल्ट प्रवाह, top/left/right/bottom ला दुर्लक्ष करते | सामान्य दस्तऐवज लेआउट |
-| `relative` | त्याच्या सामान्य स्थितीच्या तुलनेत स्थित | लहान समायोजन, पोझिशनिंग संदर्भ तयार करणे |
-| `absolute` | जवळच्या पोझिशन केलेल्या पूर्वजाच्या तुलनेत स्थित | अचूक प्लेसमेंट, ओव्हरलॅज |
-| `fixed` | व्ह्यूपोर्टच्या तुलनेत स्थित | नेव्हिगेशन
-चला टेरॅरियम जार टप्प्याटप्प्याने तयार करूया. प्रत्येक भागासाठी absolute positioning आणि टक्केवारी-आधारित आकारमान वापरले जाते, ज्यामुळे डिझाइन प्रतिसादक्षम होते:
+आता आपण टेरॅरियम जार टप्प्याटप्प्याने तयार करू. प्रत्येक भाग absolute पोझिशनिंग आणि टक्केवारी-आधारित साइजिंग वापरतो जेणेकरून डिझाइन प्रतिसादक्षम असेल:
 
 ```css
 .jar-walls {
@@ -353,57 +480,69 @@ CSS पोझिशनिंग म्हणजे नाटकासाठी 
 ```
 
 **टेरॅरियम बांधकाम समजून घेणे:**
-- **वापरते** टक्केवारी-आधारित परिमाणे, जे सर्व स्क्रीन आकारांवर प्रतिसादक्षम स्केलिंगसाठी उपयुक्त आहेत
-- **स्थिती** घटकांना अचूकपणे स्टॅक आणि संरेखित करण्यासाठी absolute positioning वापरते
-- **लागू करते** वेगवेगळ्या अपारदर्शकता मूल्ये, ज्यामुळे काचेचा पारदर्शकता प्रभाव तयार होतो
-- **अंमलात आणते** `z-index` लेयरिंग, ज्यामुळे झाडे जारच्या आत दिसतात
-- **जोडते** सूक्ष्म बॉक्स-शॅडो आणि परिष्कृत बॉर्डर-रेडियस, ज्यामुळे अधिक वास्तववादी स्वरूप मिळते
+- **वापरते** टक्केवारी-आधारित परिमाणे जेणेकरून सर्व स्क्रीन साइजवर स्केलिंग होईल
+- **पोझिशन करते** घटक अचूकपणे स्टॅक आणि अलाईन करण्यासाठी
+- **लागू करते** वेगवेगळ्या अपॅसिटी व्हॅल्यूज जेणेकरून काचेचा ट्रान्सपेरन्सी इफेक्ट तयार होईल
+- **अंमलात आणते** `z-index` लेयरिंग जेणेकरून प्लांट्स जारच्या आत दिसतील
+- **जोडते** सूक्ष्म बॉक्स-शॅडो आणि परिष्कृत बॉर्डर-रेडियस जेणेकरून अधिक वास्तववादी दिसेल
 
 ### टक्केवारीसह प्रतिसादक्षम डिझाइन
 
-सर्व परिमाण टक्केवारी वापरतात, निश्चित पिक्सेल मूल्यांऐवजी:
+सर्व परिमाणे निश्चित पिक्सेल व्हॅल्यूजऐवजी टक्केवारी वापरत असल्याचे लक्षात घ्या:
 
-**हे का महत्त्वाचे आहे:**
-- **सुनिश्चित करते** की टेरॅरियम कोणत्याही स्क्रीन आकारावर प्रमाणबद्धपणे स्केल होते
-- **जपते** जार घटकांमधील दृश्यात्मक संबंध
-- **प्रदान करते** मोबाइल फोनपासून मोठ्या डेस्कटॉप मॉनिटर्सपर्यंत एकसंध अनुभव
-- **परवानगी देते** डिझाइनला दृश्यात्मक लेआउट न मोडता अनुकूल होण्यासाठी
+**याचे महत्त्व:**
+- **सुनिश्चित करते** की टेरॅरियम कोणत्याही स्क्रीन साइजवर प्रमाणानुसार स्केल होईल
+- **जपते** जार घटकांमधील व्हिज्युअल संबंध
+- **प्रदान करते** मोबाइल फोनपासून मोठ्या डेस्कटॉप मॉनिटर्सपर्यंत एकसारखा अनुभव
+- **परवानगी देते** डिझाइनला व्हिज्युअल लेआउट न मोडता अडॅप्ट होण्यासाठी
 
 ### CSS युनिट्सचा वापर
 
-आम्ही बॉर्डर-रेडियससाठी `rem` युनिट्स वापरत आहोत, जे मूळ फॉन्ट आकाराच्या तुलनेत स्केल होतात. यामुळे अधिक प्रवेशयोग्य डिझाइन तयार होतात, जे वापरकर्त्याच्या फॉन्ट प्राधान्यांचा आदर करतात. [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) बद्दल अधिक जाणून घ्या अधिकृत स्पेसिफिकेशनमध्ये.
+आम्ही बॉर्डर-रेडियससाठी `rem` युनिट्स वापरत आहोत, जे रूट फॉन्ट साइजच्या तुलनेत स्केल होतात. यामुळे अधिक अॅक्सेसिबल डिझाइन्स तयार होतात जे वापरकर्त्याच्या फॉन्ट प्राधान्यांचा आदर करतात. [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) बद्दल अधिक जाणून घ्या.
 
-✅ **दृश्यात्मक प्रयोग**: या मूल्यांमध्ये बदल करून परिणाम पाहा:
-- जारची अपारदर्शकता 0.5 वरून 0.8 पर्यंत बदला – यामुळे काचेच्या स्वरूपावर काय परिणाम होतो?
-- मातीचा रंग `#3a241d` वरून `#8B4513` पर्यंत बदला – याचा दृश्यात्मक प्रभाव काय आहे?
+✅ **व्हिज्युअल प्रयोग**: या व्हॅल्यूज बदलून परिणाम पाहा:
+- जारची अपॅसिटी 0.5 वरून 0.8 करा – यामुळे काचेच्या दिसण्यावर काय परिणाम होतो?
+- मातीचा रंग `#3a241d` वरून `#8B4513` करा – याचा व्हिज्युअल प्रभाव काय आहे?
 - मातीचा `z-index` 2 वर बदला – लेयरिंगवर काय परिणाम होतो?
 
+### 🔄 **शैक्षणिक तपासणी**
+**CSS व्हिज्युअल डिझाइन समजून घेणे**: तुमचे समज तपासण्यासाठी:
+- ✅ टक्केवारी-आधारित परिमाणे प्रतिसादक्षम डिझाइन कसे तयार करतात?
+- ✅ अपॅसिटी काचेचा ट्रान्सपेरन्सी इफेक्ट कसा तयार करते?
+- ✅ लेयरिंग घटकांमध्ये z-index ची भूमिका काय आहे?
+- ✅ बॉर्डर-रेडियस व्हॅल्यूज जारचा आकार कसा तयार करतात?
+
+**डिझाइन तत्त्व**: लक्षात घ्या की आपण साध्या आकारांपासून जटिल व्हिज्युअल्स तयार करत आहोत:
+1. **आयत** → **गोलसर आयत** → **जारचे घटक**
+2. **सपाट रंग** → **अपॅसिटी** → **काचेचा प्रभाव**
+3. **स्वतंत्र घटक** → **लेयर केलेली रचना** → **3D दिसणे**
+
 ---
 
 ## GitHub Copilot Agent Challenge 🚀
 
 Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** CSS अॅनिमेशन तयार करा ज्यामुळे टेरॅरियममधील झाडे हळूवारपणे डुलत राहतील, नैसर्गिक वाऱ्याचा प्रभाव निर्माण करण्यासाठी. CSS अॅनिमेशन, ट्रान्सफॉर्म्स आणि कीफ्रेम्सचा सराव करताना टेरॅरियमच्या दृश्यात्मक आकर्षणात सुधारणा करा.
+**वर्णन:** CSS अॅनिमेशन तयार करा जे टेरॅरियम प्लांट्सला हळूवारपणे डुलवते, नैसर्गिक वाऱ्याचा प्रभाव निर्माण करते. हे तुम्हाला CSS अॅनिमेशन, ट्रान्सफॉर्म्स आणि कीफ्रेम्सचा सराव करण्यास मदत करेल आणि तुमच्या टेरॅरियमची व्हिज्युअल आकर्षकता वाढवेल.
 
-**प्रॉम्प्ट:** टेरॅरियममधील झाडांना हळूवारपणे एका बाजूने दुसऱ्या बाजूला डुलवण्यासाठी CSS कीफ्रेम अॅनिमेशन जोडा. प्रत्येक झाडाला किंचित (2-3 डिग्री) डावीकडे आणि उजवीकडे फिरवणारी डुलण्याची अॅनिमेशन तयार करा, ज्याचा कालावधी 3-4 सेकंद असेल, आणि `.plant` वर्गावर लागू करा. अॅनिमेशन अनंत वेळा लूप होईल आणि नैसर्गिक हालचालीसाठी easing फंक्शन असेल याची खात्री करा.
+**प्रॉम्प्ट:** टेरॅरियममधील प्लांट्सला हळूवारपणे डावीकडे आणि उजवीकडे डुलवण्यासाठी CSS कीफ्रेम अॅनिमेशन जोडा. प्रत्येक प्लांटला थोडेसे (2-3 डिग्री) डावीकडे आणि उजवीकडे फिरवणारे डुलण्याचे अॅनिमेशन तयार करा, ज्याचा कालावधी 3-4 सेकंद असेल, आणि ते `.plant` क्लासला लागू करा. अॅनिमेशन अनंत वेळा लूप होईल आणि नैसर्गिक हालचालीसाठी ईझिंग फंक्शन असेल याची खात्री करा.
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या येथे.
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
 ## 🚀 Challenge: काचेच्या प्रतिबिंबांची भर घालणे
 
-तुमच्या टेरॅरियममध्ये वास्तववादी काचेच्या प्रतिबिंबांसह सुधारणा करण्यासाठी तयार आहात का? ही तंत्रज्ञान डिझाइनमध्ये खोली आणि वास्तववाद जोडेल.
+तुमच्या टेरॅरियममध्ये वास्तववादी काचेच्या प्रतिबिंबांसह सुधारणा करण्यासाठी तयार आहात का? ही तंत्रज्ञान तुमच्या डिझाइनमध्ये खोली आणि वास्तववाद जोडेल.
 
-तुम्ही प्रकाश काचेच्या पृष्ठभागावर कसा प्रतिबिंबित होतो ते अनुकरण करणारे सूक्ष्म हायलाइट्स तयार कराल. ही पद्धत जॅन व्हॅन आयक सारख्या पुनर्जागरण चित्रकारांनी काचेचे त्रिमितीय स्वरूप तयार करण्यासाठी वापरलेल्या तंत्रासारखी आहे. तुम्ही यासाठी प्रयत्न करत आहात:
+तुम्ही काचेच्या पृष्ठभागांवर प्रकाश कसा प्रतिबिंबित होतो हे अनुकरण करणारे सूक्ष्म हायलाइट्स तयार कराल. ही पद्धत रेनासन्स चित्रकार जॅन व्हॅन आयक यांनी काचेच्या पेंटिंगला त्रिमितीय बनवण्यासाठी प्रकाश आणि प्रतिबिंब कसे वापरले यासारखी आहे. तुम्ही यासाठी प्रयत्न कराल:
 
 ![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.mr.png)
 
 **तुमचे आव्हान:**
 - **तयार करा** काचेच्या प्रतिबिंबांसाठी सूक्ष्म पांढऱ्या किंवा हलक्या रंगाचे अंडाकृती आकार
-- **स्थिती** त्यांना जारच्या डाव्या बाजूला रणनीतिकरित्या ठेवा
-- **लागू करा** योग्य अपारदर्शकता आणि ब्लर प्रभाव वास्तववादी प्रकाश प्रतिबिंबासाठी
-- **वापरा** `border-radius` सेंद्रिय, बबलसारखे आकार तयार करण्यासाठी
-- **प्रयोग करा** ग्रेडियंट्स किंवा बॉक्स-शॅडोच्या मदतीने वास्तववाद वाढवण्यासाठी
+- **त्यांना** जारच्या डाव्या बाजूला रणनीतिकरीत्या पोझिशन करा
+- **लागू करा** योग्य अपॅसिटी आणि ब्लर इफेक्ट्स जेणेकरून वास्तववादी प्रकाश प्रतिबिंब तयार होईल
+- **वापरा** `border-radius` जेणेकरून सजीव, बबलसारखे आकार तयार होतील
+- **प्रयोग करा** ग्रेडियंट्स किंवा बॉक्स-शॅडोसह अधिक वास्तववादासाठी
 
 ## पोस्ट-लेक्चर क्विझ
 
@@ -411,24 +550,120 @@ Agent मोड वापरून खालील आव्हान पूर
 
 ## तुमचे CSS ज्ञान वाढवा
 
-CSS सुरुवातीला क्लिष्ट वाटू शकते, परंतु या मुख्य संकल्पनांचे समज अधिक प्रगत तंत्रांसाठी मजबूत पाया प्रदान करते.
+CSS सुरुवातीला जटिल वाटू शकते, परंतु या मुख्य संकल्पना समजून घेतल्याने अधिक प्रगत तंत्रज्ञानासाठी मजबूत पाया तयार होतो.
 
 **तुमचे पुढील CSS शिकण्याचे क्षेत्र:**
-- **Flexbox** - घटकांचे संरेखन आणि वितरण सुलभ करते
+- **Flexbox** - घटकांचे अलाईनमेंट आणि वितरण सोपे करते
 - **CSS Grid** - जटिल लेआउट तयार करण्यासाठी शक्तिशाली साधने प्रदान करते
 - **CSS Variables** - पुनरावृत्ती कमी करते आणि देखभाल सुधारते
-- **Responsive design** - साइट्स वेगवेगळ्या स्क्रीन आकारांवर चांगले कार्य करतात याची खात्री करते
+- **Responsive design** - साइट्स वेगवेगळ्या स्क्रीन साइजवर चांगल्या प्रकारे कार्य करतात याची खात्री करते
 
-### इंटरएक्टिव लर्निंग संसाधने
+### इंटरॅक्टिव्ह लर्निंग रिसोर्सेस
 
-या आकर्षक, हाताळण्यायोग्य गेम्ससह या संकल्पनांचा सराव करा:
+या संकल्पनांचा सराव खालील आकर्षक, हाताळण्यायोग्य गेम्ससह करा:
 - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - मजेदार आव्हानांद्वारे Flexbox मास्टर करा
-- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid शिकून आभासी गाजरे उगवा
+- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid शिकण्यासाठी आभासी गाजर वाढवा
 - 🎯 [CSS Battle](https://cssbattle.dev/) - कोडिंग आव्हानांसह तुमचे CSS कौशल्य तपासा
 
 ### अतिरिक्त शिक्षण
 
-CSS मूलभूत गोष्टींसाठी, Microsoft Learn मॉड्यूल पूर्ण करा: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+CSS मूलभूत गोष्टींसाठी Microsoft Learn मॉड्यूल पूर्ण करा: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] DevTools उघडा आणि Elements पॅनेल वापरून कोणत्याही वेबसाइटवरील CSS स्टाइल्स तपासा
+- [ ] एक साधी CSS फाइल तयार करा आणि ती HTML पेजशी लिंक करा
+- [ ] वेगवेगळ्या पद्धती वापरून रंग बदलण्याचा प्रयत्न करा: hex, RGB, आणि नामांकित रंग
+- [ ] बॉक्स मॉडेलचा सराव करा आणि padding आणि margin div ला जोडा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि CSS मूलभूत गोष्टींचा आढावा घ्या
+- [ ] तुमच्या HTML पेजला फॉन्ट्स, रंग, आणि स्पेसिंगसह स्टाइल करा
+- [ ] Flexbox किंवा Grid वापरून एक साधा लेआउट तयार करा
+- [ ] CSS ट्रान्सिशन्ससह गुळगुळीत प्रभाव तयार करण्याचा प्रयत्न करा
+- [ ] मीडिया क्वेरीसह प्रतिसादक्षम डिझाइनचा सराव करा
+
+### 📅 **तुमचा CSS आठवड्याचा प्रवास**
+- [ ] सर्जनशीलतेसह टेरॅरियम स्टाइलिंग असाइनमेंट पूर्ण करा
+- [ ] फोटो गॅलरी लेआउट तयार करून CSS Grid मास्टर करा
+- [ ] CSS अॅनिमेशन शिकून तुमच्या डिझाइन्सला जीवंत करा
+- [ ] Sass किंवा Less सारख्या CSS प्रीप्रोसेसर्स एक्सप्लोर करा
+- [ ] डिझाइन तत्त्वांचा अभ्यास करा आणि त्यांना तुमच्या CSS मध्ये लागू करा
+- [ ] ऑनलाइन सापडलेल्या मनोरंजक डिझाइन्सचे विश्लेषण करा आणि पुन्हा तयार करा
+
+### 🌟 **तुमचा महिनाभराचा डिझाइन मास्टरी प्रवास**
+- [ ] एक संपूर्ण प्रतिसादक्षम वेबसाइट डिझाइन सिस्टम तयार करा
+- [ ] CSS-in-JS किंवा Tailwind सारख्या युटिलिटी-फर्स्ट फ्रेमवर्क्स शिका
+- [ ] CSS सुधारणा करून ओपन सोर्स प्रोजेक्ट्समध्ये योगदान द्या
+- [ ] CSS कस्टम प्रॉपर्टीज आणि कंटेनमेंटसारख्या प्रगत CSS संकल्पना मास्टर करा
+- [ ] मॉड्युलर CSS सह पुनर्वापरयोग्य घटक लायब्ररी तयार करा
+- [ ] CSS शिकणाऱ्यांना मार्गदर्शन करा आणि डिझाइन ज्ञान सामायिक करा
+
+## 🎯 तुमचा CSS मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title CSS Learning Progression
+    
+    section Foundation (10 minutes)
+        File Connection: Link CSS to HTML
+                       : Understand cascade rules
+                       : Learn inheritance basics
+        
+    section Selectors (15 minutes)
+        Targeting Elements: Element selectors
+                          : Class patterns
+                          : ID specificity
+                          : Combinators
+        
+    section Box Model (20 minutes)
+        Layout Fundamentals: Margin and padding
+                           : Border properties
+                           : Content sizing
+                           : Box-sizing behavior
+        
+    section Positioning (25 minutes)
+        Element Placement: Static vs relative
+                         : Absolute positioning
+                         : Z-index layering
+                         : Responsive units
+        
+    section Visual Design (30 minutes)
+        Styling Mastery: Colors and opacity
+                       : Shadows and effects
+                       : Transitions
+                       : Transform properties
+        
+    section Responsive Design (45 minutes)
+        Multi-Device Support: Media queries
+                            : Flexible layouts
+                            : Mobile-first approach
+                            : Viewport optimization
+        
+    section Advanced Techniques (1 week)
+        Modern CSS: Flexbox layouts
+                  : CSS Grid systems
+                  : Custom properties
+                  : Animation keyframes
+        
+    section Professional Skills (1 month)
+        CSS Architecture: Component patterns
+                        : Maintainable code
+                        : Performance optimization
+                        : Cross-browser compatibility
+```
+
+### 🛠️ तुमचा CSS टूलकिट सारांश
+
+या लेसननंतर, तुमच्याकडे आता आहे:
+- **Cascade Understanding**: स्टाइल्स कसे वारसाहक्काने मिळतात आणि एकमेकांना ओव्हरराइड करतात
+- **Selector Mastery**: घटक, क्लासेस, आणि IDs सह अचूक टार्गेटिंग
+- **Positioning Skills**: घटकांचे धोरणात्मक प्लेसमेंट आणि लेयरिंग
+- **Visual Design**: काचेचे प्रभाव, सावल्या, आणि ट्रान्सपेरन्सी तयार करणे
+- **Responsive Techniques**: टक्केवारी-आधारित लेआउट्स जे कोणत्याही स्क्रीनवर अडॅप्ट होतात
+- **Code Organization**: स्वच्छ, देखभाल करण्यायोग्य CSS रचना
+- **Modern Practices**: रिलेटिव युनिट्स आणि अॅक्सेसिबल डिझाइन पॅटर्न्स वापरणे
+
+**पुढील पायऱ्या**: तुमच्या टेरॅरियममध्ये आता रचना (HTML) आणि शैली (CSS) आहे. अंतिम लेसनमध्ये JavaScript सह इंटरॅक्टिव्हिटी जोडली जाईल!
 
 ## असाइनमेंट
 
@@ -437,4 +672,4 @@ CSS मूलभूत गोष्टींसाठी, Microsoft Learn मॉ
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/mr/3-terrarium/3-intro-to-DOM-and-closures/README.md
index 3c9a54ee09..5c8fe55169 100644
--- a/translations/mr/3-terrarium/3-intro-to-DOM-and-closures/README.md
+++ b/translations/mr/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -1,22 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "bc93f6285423033ebf5b8abeb5282888",
-  "translation_date": "2025-10-22T16:11:01+00:00",
+  "original_hash": "973e48ad87d67bf5bb819746c9f8e302",
+  "translation_date": "2025-11-03T14:37:33+00:00",
   "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
   "language_code": "mr"
 }
 -->
-# टेरॅरियम प्रकल्प भाग 3: DOM मॅनिप्युलेशन आणि जावास्क्रिप्ट क्लोजर्स
+# टेरारियम प्रकल्प भाग ३: DOM मॅनिप्युलेशन आणि जावास्क्रिप्ट क्लोजर्स
+
+```mermaid
+journey
+    title Your JavaScript DOM Journey
+    section Foundation
+      Understand DOM: 3: Student
+      Learn closures: 4: Student
+      Connect elements: 4: Student
+    section Interaction
+      Setup drag events: 4: Student
+      Track coordinates: 5: Student
+      Handle movement: 5: Student
+    section Polish
+      Add cleanup: 4: Student
+      Test functionality: 5: Student
+      Complete terrarium: 5: Student
+```
 
 ![DOM आणि क्लोजर](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.mr.png)
 > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
 
-वेब डेव्हलपमेंटमधील सर्वात आकर्षक पैलूंच्या स्वागत आहे - गोष्टी परस्परसंवादी बनवणे! डॉक्युमेंट ऑब्जेक्ट मॉडेल (DOM) हे तुमच्या HTML आणि जावास्क्रिप्टमधील एक पूल आहे, आणि आज आपण त्याचा उपयोग तुमच्या टेरॅरियमला जिवंत करण्यासाठी करू. जेव्हा टिम बर्नर्स-लीने पहिला वेब ब्राउझर तयार केला, तेव्हा त्यांनी एक वेब कल्पना केली जिथे दस्तऐवज गतिशील आणि परस्परसंवादी असू शकतात - DOM त्या दृष्टिकोनाला शक्य बनवते.
+वेब विकासातील सर्वात आकर्षक पैलूंच्या स्वागतासाठी तयार व्हा - गोष्टी परस्परसंवादी बनवणे! डॉक्युमेंट ऑब्जेक्ट मॉडेल (DOM) हे तुमच्या HTML आणि जावास्क्रिप्टमधील एक पूल आहे, आणि आज आपण त्याचा उपयोग तुमच्या टेरारियमला जिवंत करण्यासाठी करू. जेव्हा टिम बर्नर्स-लीने पहिला वेब ब्राउझर तयार केला, तेव्हा त्यांनी एक वेब कल्पना केली होती जिथे दस्तऐवज गतिशील आणि परस्परसंवादी असू शकतात - DOM त्या दृष्टिकोनाला शक्य बनवते.
 
-आपण जावास्क्रिप्ट क्लोजर्स देखील एक्सप्लोर करू, जे सुरुवातीला थोडे कठीण वाटू शकतात. क्लोजर्स म्हणजे तुमच्या फंक्शन्ससाठी "मेमरी पॉकेट्स" तयार करणे जिथे ते महत्त्वाची माहिती लक्षात ठेवू शकतात. हे असे आहे जसे की तुमच्या टेरॅरियममधील प्रत्येक वनस्पतीने तिच्या स्थानाचा स्वतःचा डेटा रेकॉर्ड ठेवला आहे. या धड्याच्या शेवटी, तुम्हाला समजेल की ते किती नैसर्गिक आणि उपयुक्त आहेत.
+आपण जावास्क्रिप्ट क्लोजर्स देखील एक्सप्लोर करू, जे सुरुवातीला थोडे कठीण वाटू शकतात. क्लोजर्स म्हणजे "मेमरी पॉकेट्स" तयार करणे जिथे तुमचे फंक्शन महत्त्वाची माहिती लक्षात ठेवू शकतात. हे असे आहे जसे की तुमच्या टेरारियममधील प्रत्येक वनस्पतीला तिच्या स्थानाचा डेटा रेकॉर्ड असतो. या धड्याच्या शेवटी, तुम्हाला समजेल की ते किती नैसर्गिक आणि उपयुक्त आहेत.
 
-आम्ही काय तयार करणार आहोत: एक टेरॅरियम जिथे वापरकर्ते वनस्पती कुठेही ड्रॅग आणि ड्रॉप करू शकतात. तुम्ही DOM मॅनिप्युलेशन तंत्र शिकाल जे ड्रॅग-एंड-ड्रॉप फाइल अपलोड्सपासून परस्परसंवादी गेम्सपर्यंत सर्वकाही शक्य करतात. चला तुमचे टेरॅरियम जिवंत करूया.
+आम्ही काय तयार करत आहोत: एक टेरारियम जिथे वापरकर्ते वनस्पती कुठेही ड्रॅग आणि ड्रॉप करू शकतात. तुम्ही DOM मॅनिप्युलेशन तंत्र शिकाल जे ड्रॅग-ड्रॉप फाइल अपलोड्सपासून परस्परसंवादी गेम्सपर्यंत सर्वकाही शक्य करते. चला तुमचे टेरारियम जिवंत करूया.
+
+```mermaid
+mindmap
+  root((DOM & JavaScript))
+    DOM Tree
+      Element Selection
+      Property Access
+      Event Handling
+      Dynamic Updates
+    Events
+      Pointer Events
+      Mouse Events
+      Touch Events
+      Event Listeners
+    Closures
+      Private Variables
+      Function Scope
+      Memory Persistence
+      State Management
+    Drag & Drop
+      Position Tracking
+      Coordinate Math
+      Event Lifecycle
+      User Interaction
+    Modern Patterns
+      Event Delegation
+      Performance
+      Cross-Device
+      Accessibility
+```
 
 ## प्री-लेक्चर क्विझ
 
@@ -24,55 +71,112 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## DOM समजून घेणे: परस्परसंवादी वेब पृष्ठांसाठी तुमचा प्रवेशद्वार
 
-डॉक्युमेंट ऑब्जेक्ट मॉडेल (DOM) हे जावास्क्रिप्ट तुमच्या HTML घटकांशी संवाद साधण्याचा मार्ग आहे. जेव्हा तुमचा ब्राउझर HTML पृष्ठ लोड करतो, तेव्हा तो मेमरीमध्ये त्या पृष्ठाचे संरचित प्रतिनिधित्व तयार करतो - ते म्हणजे DOM. याला कुटुंबाच्या झाडासारखे समजा जिथे प्रत्येक HTML घटक हा एक कुटुंब सदस्य आहे ज्याला जावास्क्रिप्ट प्रवेश करू शकते, बदलू शकते किंवा पुन्हा व्यवस्थापित करू शकते.
+डॉक्युमेंट ऑब्जेक्ट मॉडेल (DOM) हे जावास्क्रिप्ट तुमच्या HTML घटकांशी संवाद साधण्याचा मार्ग आहे. जेव्हा तुमचा ब्राउझर HTML पृष्ठ लोड करतो, तेव्हा तो त्या पृष्ठाचे संरचित प्रतिनिधित्व मेमरीमध्ये तयार करतो - तेच DOM आहे. याला एक कौटुंबिक झाड समजा जिथे प्रत्येक HTML घटक एक कुटुंब सदस्य आहे ज्याला जावास्क्रिप्ट प्रवेश करू शकते, बदलू शकते किंवा पुन्हा व्यवस्थापित करू शकते.
 
-DOM मॅनिप्युलेशन स्थिर पृष्ठांना परस्परसंवादी वेबसाइट्समध्ये बदलते. तुम्ही जेव्हा बटणावर होवर केल्यावर रंग बदलताना, पृष्ठ रीफ्रेश न करता सामग्री अपडेट करताना किंवा तुम्ही ड्रॅग करू शकता असे घटक पाहता, तेव्हा DOM मॅनिप्युलेशन कार्य करत असते.
+DOM मॅनिप्युलेशन स्थिर पृष्ठांना परस्परसंवादी वेबसाइट्समध्ये बदलते. प्रत्येक वेळी तुम्हाला बटण हवरवर रंग बदलताना, पृष्ठ रीफ्रेश न करता सामग्री अपडेट करताना किंवा तुम्ही ड्रॅग करू शकणारे घटक दिसत असताना, ते DOM मॅनिप्युलेशनचे काम आहे.
+
+```mermaid
+flowchart TD
+    A["Document"] --> B["HTML"]
+    B --> C["Head"]
+    B --> D["Body"]
+    C --> E["Title"]
+    C --> F["Meta Tags"]
+    D --> G["H1: My Terrarium"]
+    D --> H["Div: Page Container"]
+    H --> I["Div: Left Container"]
+    H --> J["Div: Right Container"]
+    H --> K["Div: Terrarium"]
+    I --> L["Plant Elements 1-7"]
+    J --> M["Plant Elements 8-14"]
+    
+    L --> N["img#plant1"]
+    L --> O["img#plant2"]
+    M --> P["img#plant8"]
+    M --> Q["img#plant9"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style D fill:#e8f5e8
+    style H fill:#fff3e0
+    style N fill:#ffebee
+    style O fill:#ffebee
+    style P fill:#ffebee
+    style Q fill:#ffebee
+```
 
 ![DOM ट्रीचे प्रतिनिधित्व](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.mr.png)
 
-> DOM आणि त्याचा संदर्भ देणारा HTML मार्कअपचे प्रतिनिधित्व. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) यांच्याकडून
+> DOM आणि त्याचा संदर्भ देणारा HTML मार्कअपचे प्रतिनिधित्व. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) कडून
 
-**DOM शक्तिशाली बनवणाऱ्या गोष्टी:**
+**DOM शक्तिशाली बनवणारे घटक:**
 - **प्रदान करते** तुमच्या पृष्ठावरील कोणत्याही घटकावर प्रवेश करण्याचा संरचित मार्ग
 - **सक्षम करते** पृष्ठ रीफ्रेश न करता गतिशील सामग्री अपडेट्स
-- **परवानगी देते** वापरकर्त्याच्या परस्परसंवादांना रिअल-टाइम प्रतिसाद देणे जसे की क्लिक्स आणि ड्रॅग्स
+- **परवानगी देते** क्लिक्स आणि ड्रॅग्ससारख्या वापरकर्त्याच्या परस्परसंवादाला त्वरित प्रतिसाद
 - **निर्माण करते** आधुनिक परस्परसंवादी वेब अनुप्रयोगांसाठी पाया
 
 ## जावास्क्रिप्ट क्लोजर्स: व्यवस्थित, शक्तिशाली कोड तयार करणे
 
-[जावास्क्रिप्ट क्लोजर](https://developer.mozilla.org/docs/Web/JavaScript/Closures) म्हणजे फंक्शनला त्याचे स्वतःचे खाजगी कार्यक्षेत्र देणे ज्यामध्ये सतत मेमरी असते. विचार करा की गॅलापागोस बेटांवरील डार्विनच्या फिंचेसने त्यांच्या विशिष्ट वातावरणावर आधारित विशेष चोच कशा विकसित केल्या - क्लोजर्स त्याचप्रमाणे कार्य करतात, विशेष फंक्शन्स तयार करतात जे त्यांच्या विशिष्ट संदर्भाची "आठवण" ठेवतात जरी त्यांचे पॅरेंट फंक्शन पूर्ण झाले तरी.
+[जावास्क्रिप्ट क्लोजर](https://developer.mozilla.org/docs/Web/JavaScript/Closures) म्हणजे फंक्शनला त्याचे स्वतःचे खाजगी कार्यक्षेत्र देणे ज्यामध्ये सतत मेमरी असते. विचार करा की गॅलापागोस बेटांवरील डार्विनच्या फिंचेसने त्यांच्या विशिष्ट वातावरणावर आधारित विशेष चोच विकसित केल्या - क्लोजर्स त्याचप्रमाणे काम करतात, विशेष फंक्शन्स तयार करतात जे त्यांच्या विशिष्ट संदर्भाची "आठवण" ठेवतात जरी त्यांचे पॅरेंट फंक्शन पूर्ण झाले तरी.
+
+आमच्या टेरारियममध्ये, क्लोजर्स प्रत्येक वनस्पतीला स्वतंत्रपणे तिचे स्थान लक्षात ठेवण्यास मदत करतात. हा पॅटर्न व्यावसायिक जावास्क्रिप्ट विकासात सर्वत्र दिसतो, त्यामुळे तो समजून घेणे महत्त्वाचे आहे.
 
-आमच्या टेरॅरियममध्ये, क्लोजर्स प्रत्येक वनस्पतीला स्वतंत्रपणे तिचे स्थान लक्षात ठेवण्यास मदत करतात. व्यावसायिक जावास्क्रिप्ट डेव्हलपमेंटमध्ये हा पॅटर्न वारंवार दिसतो, त्यामुळे तो समजून घेणे महत्त्वाचे आहे.
+```mermaid
+flowchart LR
+    A["dragElement(plant1)"] --> B["Creates Closure"]
+    A2["dragElement(plant2)"] --> B2["Creates Closure"]
+    
+    B --> C["Private Variables"]
+    B2 --> C2["Private Variables"]
+    
+    C --> D["pos1, pos2, pos3, pos4"]
+    C --> E["pointerDrag function"]
+    C --> F["elementDrag function"]
+    C --> G["stopElementDrag function"]
+    
+    C2 --> D2["pos1, pos2, pos3, pos4"]
+    C2 --> E2["pointerDrag function"]
+    C2 --> F2["elementDrag function"]
+    C2 --> G2["stopElementDrag function"]
+    
+    H["Plant 1 remembers its position"] --> B
+    H2["Plant 2 remembers its position"] --> B2
+    
+    style B fill:#e8f5e8
+    style B2 fill:#e8f5e8
+    style C fill:#fff3e0
+    style C2 fill:#fff3e0
+```
 
-> 💡 **क्लोजर्स समजून घेणे**: जावास्क्रिप्टमधील क्लोजर्स हा एक महत्त्वाचा विषय आहे, आणि अनेक डेव्हलपर्स त्याचा पूर्णतः सैद्धांतिक पैलू समजण्याआधी अनेक वर्षे त्याचा वापर करतात. आज, आम्ही व्यावहारिक अनुप्रयोगावर लक्ष केंद्रित करत आहोत - तुम्ही परस्परसंवादी वैशिष्ट्ये तयार करताना क्लोजर्स नैसर्गिकरित्या उदयास येताना पाहाल. समजून घेणे विकसित होईल कारण तुम्ही पाहाल की ते वास्तविक समस्यांचे निराकरण कसे करतात.
+> 💡 **क्लोजर्स समजून घेणे**: क्लोजर्स जावास्क्रिप्टमधील एक महत्त्वाचा विषय आहे, आणि अनेक विकसक त्याचा पूर्ण सैद्धांतिक पैलू समजण्याआधी अनेक वर्षे त्याचा वापर करतात. आज, आम्ही व्यावहारिक अनुप्रयोगावर लक्ष केंद्रित करत आहोत - तुम्ही पाहाल की ते परस्परसंवादी वैशिष्ट्ये तयार करताना नैसर्गिकरित्या कसे उद्भवतात. समजून घेणे विकसित होईल कारण तुम्ही पाहाल की ते वास्तविक समस्यांचे निराकरण कसे करतात.
 
 ![DOM ट्रीचे प्रतिनिधित्व](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.mr.png)
 
-> DOM आणि त्याचा संदर्भ देणारा HTML मार्कअपचे प्रतिनिधित्व. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) यांच्याकडून
+> DOM आणि त्याचा संदर्भ देणारा HTML मार्कअपचे प्रतिनिधित्व. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) कडून
 
-या धड्यात, आपण परस्परसंवादी टेरॅरियम प्रकल्प पूर्ण करू जिथे वापरकर्त्याला पृष्ठावरील वनस्पतींमध्ये फेरफार करण्याची परवानगी देणारे जावास्क्रिप्ट तयार करू.
+या धड्यात, आपण परस्परसंवादी टेरारियम प्रकल्प पूर्ण करू जिथे वापरकर्त्याला पृष्ठावरील वनस्पतींमध्ये फेरफार करण्यासाठी जावास्क्रिप्ट तयार करायची आहे.
 
 ## सुरुवात करण्यापूर्वी: यशासाठी तयारी
 
-तुमच्याकडे मागील टेरॅरियम धड्यांमधील HTML आणि CSS फायली असणे आवश्यक आहे - आपण त्या स्थिर डिझाइनला परस्परसंवादी बनवणार आहोत. जर तुम्ही प्रथमच सामील होत असाल, तर त्या धडे पूर्ण करणे महत्त्वपूर्ण संदर्भ प्रदान करेल.
+तुम्हाला मागील टेरारियम धड्यांमधील HTML आणि CSS फाइल्सची आवश्यकता असेल - आपण त्या स्थिर डिझाइनला परस्परसंवादी बनवणार आहोत. जर तुम्ही प्रथमच सामील होत असाल, तर त्या धडे पूर्ण करणे महत्त्वाचा संदर्भ प्रदान करेल.
 
 आम्ही काय तयार करू:
-- **स्मूथ ड्रॅग-एंड-ड्रॉप** सर्व टेरॅरियम वनस्पतींसाठी
+- **स्मूथ ड्रॅग-ड्रॉप** सर्व टेरारियम वनस्पतींसाठी
 - **कोऑर्डिनेट ट्रॅकिंग** जेणेकरून वनस्पती त्यांची स्थानं लक्षात ठेवतील
 - **पूर्ण परस्परसंवादी इंटरफेस** व्हॅनिला जावास्क्रिप्ट वापरून
 - **स्वच्छ, व्यवस्थित कोड** क्लोजर पॅटर्न वापरून
 
-## तुमचा जावास्क्रिप्ट फाइल सेट करणे
+## तुमची जावास्क्रिप्ट फाइल सेट करणे
 
-चला तुमचा टेरॅरियम परस्परसंवादी बनवणारी जावास्क्रिप्ट फाइल तयार करूया.
+चला तुमची टेरारियम परस्परसंवादी बनवणारी जावास्क्रिप्ट फाइल तयार करूया.
 
-**पायरी 1: तुमची स्क्रिप्ट फाइल तयार करा**
+**पायरी १: तुमची स्क्रिप्ट फाइल तयार करा**
 
-तुमच्या टेरॅरियम फोल्डरमध्ये, `script.js` नावाची एक नवीन फाइल तयार करा.
+तुमच्या टेरारियम फोल्डरमध्ये, `script.js` नावाची नवीन फाइल तयार करा.
 
-**पायरी 2: जावास्क्रिप्टला तुमच्या HTML शी लिंक करा**
+**पायरी २: जावास्क्रिप्टला तुमच्या HTML शी लिंक करा**
 
-तुमच्या `index.html` फाइलच्या `<head>` विभागात खालील स्क्रिप्ट टॅग जोडा:
+तुमच्या `index.html` फाइलच्या `<head>` विभागात हा स्क्रिप्ट टॅग जोडा:
 
 ```html
 <script src="./script.js" defer></script>
@@ -80,23 +184,23 @@ DOM मॅनिप्युलेशन स्थिर पृष्ठां
 
 **`defer` अॅट्रिब्युट का महत्त्वाचे आहे:**
 - **सुनिश्चित करते** की तुमची जावास्क्रिप्ट सर्व HTML लोड होईपर्यंत थांबते
-- **टाळते** अशा त्रुटी जिथे जावास्क्रिप्ट अशा घटकांचा शोध घेते जे अद्याप तयार नाहीत
+- **टाळते** अशा त्रुटी जिथे जावास्क्रिप्ट तयार नसलेल्या घटकांचा शोध घेते
 - **हमी देते** की तुमचे सर्व वनस्पती घटक परस्परसंवादासाठी उपलब्ध आहेत
-- **उत्तम कार्यक्षमता प्रदान करते** पृष्ठाच्या तळाशी स्क्रिप्ट्स ठेवण्यापेक्षा
+- **उत्तम कार्यक्षमता प्रदान करते** पृष्ठाच्या तळाशी स्क्रिप्ट ठेवण्यापेक्षा
 
-> ⚠️ **महत्त्वाची टीप**: `defer` अॅट्रिब्युट सामान्य टाइमिंग समस्यांना टाळते. त्याशिवाय, जावास्क्रिप्ट HTML घटक लोड होण्याआधी त्यांचा प्रवेश करण्याचा प्रयत्न करू शकते, ज्यामुळे त्रुटी निर्माण होतात.
+> ⚠️ **महत्त्वाची टीप**: `defer` अॅट्रिब्युट सामान्य वेळेच्या समस्यांना टाळते. त्याशिवाय, जावास्क्रिप्ट HTML घटक लोड होण्याआधी त्यांचा शोध घेण्याचा प्रयत्न करू शकते, ज्यामुळे त्रुटी निर्माण होतात.
 
 ---
 
 ## जावास्क्रिप्टला तुमच्या HTML घटकांशी जोडणे
 
-आपण घटक ड्रॅग करण्यायोग्य बनवू शकण्यापूर्वी, जावास्क्रिप्टला DOM मध्ये त्यांचा शोध घेणे आवश्यक आहे. याला लायब्ररी कॅटलॉगिंग सिस्टीमसारखे समजा - एकदा तुम्हाला कॅटलॉग क्रमांक मिळाला की, तुम्ही नेमका हवा असलेला पुस्तक शोधू शकता आणि त्यातील सर्व सामग्रीचा प्रवेश करू शकता.
+घटकांना ड्रॅग करण्यायोग्य बनवण्यापूर्वी, जावास्क्रिप्टला DOM मध्ये त्यांचा शोध घेणे आवश्यक आहे. याला एक लायब्ररी कॅटलॉगिंग सिस्टम समजा - एकदा तुम्हाला कॅटलॉग नंबर मिळाला की, तुम्ही तुम्हाला हवे असलेले पुस्तक अचूकपणे शोधू शकता आणि त्यातील सर्व सामग्रीवर प्रवेश करू शकता.
 
-आपण `document.getElementById()` पद्धतीचा उपयोग करून या कनेक्शनचा उपयोग करू. हे जसे अचूक फाइलिंग सिस्टीम आहे - तुम्ही एक ID प्रदान करता आणि ते तुमच्या HTML मधील नेमका घटक शोधते.
+आपण `document.getElementById()` पद्धतीचा उपयोग करून या कनेक्शनचा उपयोग करू. हे जसे अचूक फाइलिंग सिस्टम आहे - तुम्ही एक ID प्रदान करता, आणि ते तुमच्या HTML मध्ये तुम्हाला हवे असलेले घटक अचूकपणे शोधते.
 
 ### सर्व वनस्पतींसाठी ड्रॅग फंक्शनलिटी सक्षम करणे
 
-तुमच्या `script.js` फाइलमध्ये खालील कोड जोडा:
+तुमच्या `script.js` फाइलमध्ये हा कोड जोडा:
 
 ```javascript
 // Enable drag functionality for all 14 plants
@@ -117,27 +221,37 @@ dragElement(document.getElementById('plant14'));
 ```
 
 **हा कोड काय साध्य करतो:**
-- **DOM मध्ये** प्रत्येक वनस्पती घटकाचा त्याच्या अद्वितीय ID चा उपयोग करून शोध घेतो
-- **प्राप्त करते** प्रत्येक HTML घटकाचा जावास्क्रिप्ट संदर्भ
-- **प्रत्येक घटकाला** `dragElement` फंक्शनमध्ये पास करते (जे आपण पुढे तयार करू)
-- **प्रत्येक वनस्पतीला** ड्रॅग-एंड-ड्रॉप परस्परसंवादासाठी तयार करते
-- **तुमच्या HTML संरचनेला** जावास्क्रिप्ट फंक्शनलिटीशी जोडते
+- **प्रत्येक वनस्पती घटकाचा शोध घेतो** त्याच्या अद्वितीय ID वापरून
+- **प्रत्येक HTML घटकाचा जावास्क्रिप्ट संदर्भ मिळवतो**
+- **प्रत्येक घटकाला `dragElement` फंक्शनमध्ये पास करतो** (जे आपण पुढे तयार करू)
+- **प्रत्येक वनस्पतीला ड्रॅग-ड्रॉप परस्परसंवादासाठी तयार करतो**
+- **तुमच्या HTML संरचनेला जावास्क्रिप्ट फंक्शनॅलिटीशी जोडतो**
 
-> 🎯 **ID चा वापर का करावा वर्गाऐवजी?** ID विशिष्ट घटकांसाठी अद्वितीय ओळख प्रदान करतात, तर CSS वर्ग गटातील घटकांचे स्टाइलिंग करण्यासाठी डिझाइन केले आहेत. जावास्क्रिप्टला वैयक्तिक घटकांमध्ये फेरफार करायचे असल्यास, ID आम्हाला आवश्यक अचूकता आणि कार्यक्षमता प्रदान करतात.
+> 🎯 **ID ऐवजी क्लासेस का वापरायचे नाहीत?** ID विशिष्ट घटकांसाठी अद्वितीय ओळख प्रदान करतात, तर CSS क्लासेस घटकांच्या गटांना स्टाइल करण्यासाठी डिझाइन केलेले आहेत. जावास्क्रिप्टला वैयक्तिक घटकांमध्ये फेरफार करायचे असल्यास, ID आम्हाला आवश्यक असलेली अचूकता आणि कार्यक्षमता प्रदान करतात.
 
-> 💡 **प्रो टिप**: लक्षात घ्या की आपण प्रत्येक वनस्पतीसाठी स्वतंत्रपणे `dragElement()` कॉल करत आहोत. हा दृष्टिकोन सुनिश्चित करतो की प्रत्येक वनस्पतीला तिचे स्वतःचे स्वतंत्र ड्रॅगिंग वर्तन मिळते, जे गुळगुळीत वापरकर्ता परस्परसंवादासाठी आवश्यक आहे.
+> 💡 **प्रो टिप**: लक्षात ठेवा की आपण प्रत्येक वनस्पतीसाठी स्वतंत्रपणे `dragElement()` कॉल करत आहोत. हा दृष्टिकोन सुनिश्चित करतो की प्रत्येक वनस्पतीला स्वतंत्र ड्रॅगिंग वर्तन मिळते, जे गुळगुळीत वापरकर्ता परस्परसंवादासाठी आवश्यक आहे.
+
+### 🔄 **शैक्षणिक तपासणी**
+**DOM कनेक्शन समजून घेणे**: ड्रॅग फंक्शनॅलिटीकडे जाण्यापूर्वी, तुम्ही हे सत्यापित करू शकता:
+- ✅ `document.getElementById()` HTML घटक कसे शोधते हे स्पष्ट करा
+- ✅ प्रत्येक वनस्पतीसाठी अद्वितीय ID का वापरतो हे समजून घ्या
+- ✅ स्क्रिप्ट टॅगमधील `defer` अॅट्रिब्युटचा उद्देश वर्णन करा
+- ✅ जावास्क्रिप्ट आणि HTML DOM द्वारे कसे जोडले जातात हे ओळखा
+
+**जलद स्व-परीक्षण**: दोन घटकांना समान ID असल्यास काय होईल? `getElementById()` फक्त एक घटक का परत करते?
+*उत्तर: ID अद्वितीय असावेत; जर डुप्लिकेट केले गेले तर फक्त पहिला घटक परत केला जातो*
 
 ---
 
 ## ड्रॅग एलिमेंट क्लोजर तयार करणे
 
-आता आपण आमच्या ड्रॅगिंग फंक्शनलिटीचा मुख्य भाग तयार करू: एक क्लोजर जो प्रत्येक वनस्पतीसाठी ड्रॅगिंग वर्तन व्यवस्थापित करतो. हा क्लोजर अनेक अंतर्गत फंक्शन्स समाविष्ट करेल जे माउस मूव्हमेंट ट्रॅक करण्यासाठी आणि घटक स्थान अपडेट करण्यासाठी एकत्र काम करतात.
+आता आपण आमच्या ड्रॅगिंग फंक्शनॅलिटीचे मुख्य भाग तयार करू: प्रत्येक वनस्पतीसाठी ड्रॅगिंग वर्तन व्यवस्थापित करणारा क्लोजर. हा क्लोजर अनेक अंतर्गत फंक्शन्स समाविष्ट करेल जे माउस मूव्हमेंट ट्रॅक करण्यासाठी आणि घटक स्थान अपडेट करण्यासाठी एकत्र काम करतील.
 
-क्लोजर्स या कार्यासाठी योग्य आहेत कारण ते आम्हाला "खाजगी" व्हेरिएबल्स तयार करण्याची परवानगी देतात जे फंक्शन कॉल्स दरम्यान टिकून राहतात, प्रत्येक वनस्पतीसाठी स्वतंत्र समन्वय ट्रॅकिंग सिस्टम देतात.
+क्लोजर्स या कार्यासाठी योग्य आहेत कारण ते आम्हाला "खाजगी" व्हेरिएबल्स तयार करण्यास अनुमती देतात जे फंक्शन कॉल दरम्यान टिकून राहतात, प्रत्येक वनस्पतीसाठी स्वतंत्र समन्वय ट्रॅकिंग सिस्टम देतात.
 
-### क्लोजर्स समजून घेण्यासाठी एक साधा उदाहरण
+### सोप्या उदाहरणासह क्लोजर्स समजून घेणे
 
-क्लोजर्सची संकल्पना स्पष्ट करणारे एक साधे उदाहरण देतो:
+क्लोजर्सची संकल्पना स्पष्ट करणारे सोपे उदाहरण देऊ:
 
 ```javascript
 function createCounter() {
@@ -159,24 +273,52 @@ console.log(myCounter()); // 2
 **या क्लोजर पॅटर्नमध्ये काय घडत आहे:**
 - **खाजगी `count` व्हेरिएबल तयार करते** जे फक्त या क्लोजरमध्ये अस्तित्वात आहे
 - **अंतर्गत फंक्शन** त्या बाह्य व्हेरिएबलमध्ये प्रवेश करू शकते आणि त्यात बदल करू शकते (क्लोजर यंत्रणा)
-- **जेव्हा आपण परत करतो** अंतर्गत फंक्शन, ते त्या खाजगी डेटाशी त्याचा संबंध टिकवून ठेवते
-- **जरी `createCounter()` कार्यान्वित होणे संपले तरीही**, `count` टिकून राहते आणि त्याची किंमत लक्षात ठेवते
+- **जेव्हा आम्ही परत करतो** अंतर्गत फंक्शन, ते त्या खाजगी डेटाशी त्याचे कनेक्शन टिकवते
+- **जरी `createCounter()` अंमलबजावणी पूर्ण झाली तरी**, `count` टिकून राहते आणि त्याची किंमत लक्षात ठेवते
 
-### ड्रॅग फंक्शनलिटीसाठी क्लोजर्स का योग्य आहेत
+### ड्रॅग फंक्शनॅलिटीसाठी क्लोजर्स का योग्य आहेत
 
-आमच्या टेरॅरियमसाठी, प्रत्येक वनस्पतीला तिच्या वर्तमान स्थानाच्या समन्वयाची आठवण ठेवणे आवश्यक आहे. क्लोजर्स परिपूर्ण उपाय प्रदान करतात:
+आमच्या टेरारियमसाठी, प्रत्येक वनस्पतीला तिच्या वर्तमान स्थान समन्वय लक्षात ठेवण्याची आवश्यकता आहे. क्लोजर्स परिपूर्ण उपाय प्रदान करतात:
 
 **आमच्या प्रकल्पासाठी मुख्य फायदे:**
-- **स्वतंत्रपणे टिकवून ठेवते** प्रत्येक वनस्पतीसाठी खाजगी स्थान व्हेरिएबल्स
-- **ड्रॅग इव्हेंट्स दरम्यान** समन्वय डेटा टिकवून ठेवते
-- **वेगवेगळ्या ड्रॅग करण्यायोग्य घटकांमधील व्हेरिएबल्सच्या संघर्षांना** प्रतिबंधित करते
+- **प्रत्येक वनस्पतीसाठी स्वतंत्रपणे खाजगी स्थान व्हेरिएबल्स टिकवते**
+- **ड्रॅग इव्हेंट्स दरम्यान समन्वय डेटा टिकवते**
+- **वेगवेगळ्या ड्रॅग करण्यायोग्य घटकांमधील व्हेरिएबल्सच्या संघर्षांना प्रतिबंधित करते**
 - **स्वच्छ, व्यवस्थित कोड संरचना तयार करते**
 
-> 🎯 **शिकण्याचे उद्दिष्ट**: तुम्हाला सध्या क्लोजर्सच्या प्रत्येक पैलूचे मास्टर होण्याची गरज नाही. ते आमच्या कोडला कसे व्यवस्थित ठेवतात आणि आमच्या ड्रॅगिंग फंक्शनलिटीसाठी स्टेट कसे टिकवून ठेवतात हे पाहण्यावर लक्ष केंद्रित करा.
+> 🎯 **शिकण्याचे उद्दिष्ट**: तुम्हाला क्लोजर्सचे प्रत्येक पैलू आत्ता मास्टर करण्याची गरज नाही. ते कोड कसे व्यवस्थित ठेवतात आणि आमच्या ड्रॅगिंग फंक्शनॅलिटीसाठी स्थिती कशी टिकवतात हे पाहण्यावर लक्ष केंद्रित करा.
+
+```mermaid
+stateDiagram-v2
+    [*] --> Ready: Page loads
+    Ready --> DragStart: User presses down (pointerdown)
+    DragStart --> Dragging: Mouse/finger moves (pointermove)
+    Dragging --> Dragging: Continue moving
+    Dragging --> DragEnd: User releases (pointerup)
+    DragEnd --> Ready: Reset for next drag
+    
+    state DragStart {
+        [*] --> CapturePosition
+        CapturePosition --> SetupListeners
+        SetupListeners --> [*]
+    }
+    
+    state Dragging {
+        [*] --> CalculateMovement
+        CalculateMovement --> UpdatePosition
+        UpdatePosition --> [*]
+    }
+    
+    state DragEnd {
+        [*] --> RemoveListeners
+        RemoveListeners --> CleanupState
+        CleanupState --> [*]
+    }
+```
 
-### ड्रॅग एलिमेंट फंक्शन तयार करणे
+### `dragElement` फंक्शन तयार करणे
 
-आता आपण मुख्य फंक्शन तयार करू जे सर्व ड्रॅगिंग लॉजिक हाताळेल. तुमच्या वनस्पती घटक घोषणांच्या खाली हा फंक्शन जोडा:
+आता आपण मुख्य फंक्शन तयार करू जे सर्व ड्रॅगिंग लॉजिक हाताळेल. तुमच्या वनस्पती घटक घोषणांखाली हे फंक्शन जोडा:
 
 ```javascript
 function dragElement(terrariumElement) {
@@ -192,45 +334,123 @@ function dragElement(terrariumElement) {
 ```
 
 **स्थान ट्रॅकिंग सिस्टम समजून घेणे:**
-- **`pos1` आणि `pos2`**: जुन्या आणि नवीन माउस स्थानांमधील फरक साठवते
+- **`pos1` आणि `pos2`**: जुने आणि नवीन माउस स्थानांमधील फरक साठवते
 - **`pos3` आणि `pos4`**: वर्तमान माउस समन्वय ट्रॅक करते
 - **`terrariumElement`**: विशिष्ट वनस्पती घटक ज्याला आपण ड्रॅग करण्यायोग्य बनवत आहोत
 - **`onpointerdown`**: वापरकर्ता ड्रॅगिंग सुरू करताना ट्रिगर होणारी घटना
 
 **क्लोजर पॅटर्न कसे कार्य करते:**
-- **प्रत्येक वनस्पती घटकासाठी** खाजगी स्थान व्हेरिएबल्स तयार करते
-- **ड्रॅगिंग लाइफसायकल दरम्यान** हे व्हेरिएबल्स टिकवून ठेवते
-- **प्रत्येक वनस्पतीला** स्वतंत्रपणे तिचे समन्वय ट्रॅक करण्यास सक्षम करते
-- **स्वच्छ इंटरफेस प्रदान करते** `dragElement` फंक्शनद्वारे
+- **प्रत्येक वनस्पती घटकासाठी खाजगी स्थान व्हेरिएबल्स तयार करते**
+- **ड्रॅगिंग लाइफसायकल दरम्यान या व्हेरिएबल्स टिकवते**
+- **प्रत्येक वनस्पती स्वतंत्रपणे तिचे समन्वय ट्रॅक करते याची खात्री करते**
+- **`dragElement` फंक्शनद्वारे स्वच्छ इंटरफेस प्रदान करते**
 
-### पॉइंटर इव्हेंट्स का वापरावे?
+### पॉइंटर इव्हेंट्स का वापरायचे?
 
-तुम्हाला आश्चर्य वाटेल की आपण `onclick` च्या ऐवजी `onpointerdown` का वापरतो. यामागील कारण येथे आहे:
+तुम्हाला `onpointerdown` ऐवजी अधिक परिचित `onclick` का वापरत नाही याचा विचार येऊ शकतो. याचे कारण येथे आहे:
 
 | इव्हेंट प्रकार | सर्वोत्तम उपयोग | अडचण |
 |------------|----------|-------------|
 | `onclick` | साधे बटण क्लिक | ड्रॅगिंग हाताळू शकत नाही (फक्त क्लिक आणि रिलीज) |
-| `onpointerdown` | माउस आणि टच दोन्ही | नवीन, परंतु सध्या चांगले समर्थित |
+| `onpointerdown` | माउस आणि टच दोन्ही | नवीन, पण सध्या चांगले समर्थित |
 | `onmousedown` | डेस्कटॉप माउससाठी फक्त | मोबाइल वापरकर्त्यांना वगळते |
 
-**आपण जे तयार करत आहोत त्यासाठी पॉइंटर इव्हेंट्स योग्य आहेत:**
-- **उत्तम प्रकारे कार्य करते** जरी कोणी माउस, बोट किंवा स्टायलस वापरत असेल
+**आम्ही तयार करत असलेल्या गोष्टींसाठी पॉइंटर इव्हेंट्स परिपूर्ण आहेत:**
+- **उत्तम कार्य करते** जरी कोणी माउस, बोट किंवा स्टायलस वापरत असेल
 - **समान वाटते** लॅपटॉप, टॅबलेट किंवा फोनवर
-- **ड्रॅगिंग मोशन हाताळते** (फक्त क्लिक-आणि-डन नाही)
+- **खऱ्या ड्रॅगिंग मोशनला हाताळते** (फक्त क्लिक-आणि-डन नाही)
 - **गुळगुळीत अनुभव तयार करते** जो वापरकर्त्यांना आधुनिक वेब अॅप्सकडून अपेक्षित आहे
 
-> 💡 **भविष्यातील तयारी**: पॉइंटर इव्हेंट्स वापरकर्त्याच्या परस्परसंवाद हाताळण्याचा आधुनिक मार्ग आहेत. माउस आणि टचसाठी स्वतंत्र कोड लिहिण्याऐवजी, तुम्हाला दोन्ही विनामूल्य मिळतात. खूप छान, बरोबर?
-- **`pos3` आणि `pos4`**: पुढील गणनेसाठी सध्याचा माऊसचा स्थान साठवा  
-- **`offsetTop` आणि `offsetLeft`**: पृष्ठावर घटकाचे सध्याचे स्थान मिळवा  
-- **वजाबाकी तर्क**: माऊस जितके हलते तितकेच घटक हलवते  
+> 💡 **भविष्यातील तयारी**: पॉइंटर इव्हेंट्स वापरकर्त्यांच्या परस्परसंवाद हाताळण्याचा आधुनिक मार्ग आहेत. माउस आणि टचसाठी स्वतंत्र कोड लिहिण्याऐवजी, तुम्हाला दोन्ही विनामूल्य मिळतात. खूप छान, नाही का?
+
+### 🔄 **शैक्षणिक तपासणी**
+**इव्हेंट हँडलिंग समजून घेणे**: इव्हेंट्सची तुमची समज तपासण्यासाठी थांबा:
+- ✅ माउस इव्हेंट्सऐवजी पॉइंटर इव्हेंट्स का वापरतो?
+- ✅ क्लोजर व्ह
+**या समन्वयांची समज:**
+- **पुरवते** पिक्सेल-परफेक्ट पोझिशनिंग माहिती
+- **रिअल-टाइममध्ये अपडेट होते** जेव्हा वापरकर्ता त्यांचा पॉइंटर हलवतो
+- **सर्व स्क्रीन आकार आणि झूम स्तरांवर** सुसंगत राहते
+- **सक्षम करते** गुळगुळीत, प्रतिसादक्षम ड्रॅग इंटरॅक्शन
+
+### डॉक्युमेंट-स्तरीय इव्हेंट लिसनर्स सेट करणे
+
+लक्षात घ्या की आम्ही मूव्ह आणि स्टॉप इव्हेंट संपूर्ण `document` वर जोडतो, फक्त प्लांट एलिमेंटवर नाही:
+
+```javascript
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+
+**डॉक्युमेंटवर का जोडायचे:**
+- **ट्रॅकिंग सुरू ठेवते** जरी माउस प्लांट एलिमेंट सोडतो
+- **ड्रॅग व्यत्यय टाळते** जर वापरकर्ता वेगाने हलवतो
+- **संपूर्ण स्क्रीनवर गुळगुळीत ड्रॅगिंग प्रदान करते**
+- **एज केस हाताळते** जिथे कर्सर ब्राउझर विंडोच्या बाहेर हलतो
 
-**चळवळीच्या गणनेचे विहंगावलोकन:**  
-1. जुन्या आणि नवीन माऊस स्थानांमधील फरक **मोजतो**  
-2. माऊसच्या चळवळीच्या आधारे घटक किती हलवायचा ते **गणना करतो**  
-3. घटकाच्या CSS स्थान गुणधर्मांना रिअल-टाइममध्ये **अपडेट करतो**  
-4. पुढील चळवळीच्या गणनेसाठी नवीन स्थान **साठवतो**  
+> ⚡ **परफॉर्मन्स नोट**: ड्रॅगिंग थांबल्यावर या डॉक्युमेंट-स्तरीय लिसनर्स साफ करू, जेणेकरून मेमरी लीक आणि परफॉर्मन्स समस्या टाळता येतील.
 
-### गणिताचा दृश्यात्मक आढावा  
+## ड्रॅग सिस्टम पूर्ण करणे: मूव्हमेंट आणि क्लीनअप
+
+आता आम्ही दोन उर्वरित फंक्शन्स जोडणार आहोत जे प्रत्यक्ष ड्रॅगिंग मूव्हमेंट आणि ड्रॅगिंग थांबल्यावर क्लीनअप हाताळतात. या फंक्शन्स एकत्र काम करून तुमच्या टेरॅरियममध्ये गुळगुळीत, प्रतिसादक्षम प्लांट मूव्हमेंट तयार करतात.
+
+### elementDrag फंक्शन: मूव्हमेंट ट्रॅकिंग
+
+`pointerDrag` च्या बंद कर्ली ब्रॅकेटनंतर `elementDrag` फंक्शन जोडा:
+
+```javascript
+function elementDrag(e) {
+    // Calculate the distance moved since the last event
+    pos1 = pos3 - e.clientX;  // Horizontal distance moved
+    pos2 = pos4 - e.clientY;  // Vertical distance moved
+    
+    // Update the current position tracking
+    pos3 = e.clientX;  // New current X position
+    pos4 = e.clientY;  // New current Y position
+    
+    // Apply the movement to the element's position
+    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
+}
+```
+
+**समन्वय गणित समजून घेणे:**
+- **`pos1` आणि `pos2`**: शेवटच्या अपडेटपासून माउस किती हलला आहे हे मोजते
+- **`pos3` आणि `pos4`**: पुढील गणनेसाठी वर्तमान माउस पोझिशन स्टोअर करते
+- **`offsetTop` आणि `offsetLeft`**: पृष्ठावर एलिमेंटची वर्तमान पोझिशन मिळवा
+- **वजाबाकी लॉजिक**: माउस हलल्याइतकेच एलिमेंट हलवते
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    User->>Mouse: Start drag at (100, 50)
+    Mouse->>JavaScript: pointerdown event
+    JavaScript->>JavaScript: Store initial position (pos3=100, pos4=50)
+    JavaScript->>JavaScript: Setup move/up listeners
+    
+    User->>Mouse: Move to (110, 60)
+    Mouse->>JavaScript: pointermove event
+    JavaScript->>JavaScript: Calculate: pos1=10, pos2=10
+    JavaScript->>Plant: Update: left += 10px, top += 10px
+    Plant->>Plant: Render at new position
+    
+    User->>Mouse: Release at (120, 65)
+    Mouse->>JavaScript: pointerup event
+    JavaScript->>JavaScript: Remove listeners
+    JavaScript->>JavaScript: Reset for next drag
+```
+
+**मूव्हमेंट गणना ब्रेकडाउन:**
+1. **जुने आणि नवीन माउस पोझिशनमधील फरक मोजते**
+2. **माउस मूव्हमेंटच्या आधारे एलिमेंट किती हलवायचे ते गणना करते**
+3. **रिअल-टाइममध्ये एलिमेंटच्या CSS पोझिशन प्रॉपर्टीज अपडेट करते**
+4. **पुढील मूव्हमेंट गणनेसाठी नवीन पोझिशन बेसलाइन म्हणून स्टोअर करते**
+
+### गणिताचे दृश्य प्रतिनिधित्व
 
 ```mermaid
 sequenceDiagram
@@ -243,10 +463,10 @@ sequenceDiagram
     JavaScript->>Plant: Update position by +10px right, +10px down
     Plant->>Plant: Render at new position
 ```
-  
-### stopElementDrag फंक्शन: साफसफाई  
 
-`elementDrag` च्या बंद करणाऱ्या कर्ली ब्रॅकेटनंतर साफसफाई फंक्शन जोडा:  
+### stopElementDrag फंक्शन: क्लीनअप
+
+`elementDrag` च्या बंद कर्ली ब्रॅकेटनंतर क्लीनअप फंक्शन जोडा:
 
 ```javascript
 function stopElementDrag() {
@@ -255,136 +475,174 @@ function stopElementDrag() {
     document.onpointermove = null;
 }
 ```
-  
-**साफसफाई का आवश्यक आहे:**  
-- **टाळते** मेमरी लीक्स जे शिल्लक इव्हेंट लिसनर्समुळे होऊ शकतात  
-- **थांबवते** वापरकर्त्याने प्लांट सोडल्यावर ड्रॅगिंग वर्तन  
-- **परवानगी देते** इतर घटक स्वतंत्रपणे ड्रॅग करण्यासाठी  
-- **पुढील ड्रॅग ऑपरेशनसाठी** प्रणाली रीसेट करते  
-
-**साफसफाई न केल्यास काय होते:**  
-- ड्रॅगिंग थांबल्यानंतरही इव्हेंट लिसनर्स चालू राहतात  
-- न वापरलेल्या लिसनर्स जमा झाल्यामुळे कार्यक्षमता कमी होते  
-- इतर घटकांशी संवाद साधताना अनपेक्षित वर्तन  
-- अनावश्यक इव्हेंट हँडलिंगवर ब्राउझर संसाधने वाया जातात  
-
-### CSS स्थान गुणधर्म समजून घेणे  
-
-आपली ड्रॅगिंग प्रणाली दोन मुख्य CSS गुणधर्मांवर कार्य करते:  
 
-| गुणधर्म | काय नियंत्रित करते | आपण कसे वापरतो |
-|----------|------------------|---------------|
-| `top` | वरच्या कडेकडून अंतर | ड्रॅग दरम्यान उभ्या स्थितीकरणासाठी |
-| `left` | डाव्या कडेकडून अंतर | ड्रॅग दरम्यान आडव्या स्थितीकरणासाठी |
-
-**ऑफसेट गुणधर्मांबद्दल महत्त्वाची माहिती:**  
-- **`offsetTop`**: स्थित पॅरेंट घटकाच्या वरच्या कडेकडून सध्याचे अंतर  
-- **`offsetLeft`**: स्थित पॅरेंट घटकाच्या डाव्या कडेकडून सध्याचे अंतर  
-- **स्थितीकरण संदर्भ**: ही मूल्ये सर्वात जवळच्या स्थित पूर्वजाच्या संदर्भात असतात  
-- **रिअल-टाइम अपडेट्स**: CSS गुणधर्म बदलल्यावर त्वरित बदल होतो  
-
-> 🎯 **डिझाइन तत्त्वज्ञान**: ही ड्रॅग प्रणाली हेतुपुरस्सर लवचिक आहे – येथे "ड्रॉप झोन" किंवा निर्बंध नाहीत. वापरकर्ते प्लांट्स कुठेही ठेवू शकतात, ज्यामुळे त्यांना त्यांच्या टेरॅरियम डिझाइनवर पूर्ण सर्जनशील नियंत्रण मिळते.  
+**क्लीनअप का आवश्यक आहे:**
+- **मेमरी लीक टाळते** जेव्हा इव्हेंट लिसनर्स राहतात
+- **प्लांट सोडल्यावर ड्रॅगिंग वर्तन थांबवते**
+- **इतर एलिमेंट्स स्वतंत्रपणे ड्रॅग करण्यास परवानगी देते**
+- **पुढील ड्रॅग ऑपरेशनसाठी सिस्टम रीसेट करते**
 
-## सर्वकाही एकत्र आणणे: तुमची संपूर्ण ड्रॅग प्रणाली  
+**क्लीनअप न केल्यास काय होते:**
+- ड्रॅगिंग थांबल्यानंतरही इव्हेंट लिसनर्स चालू राहतात
+- वापरलेले लिसनर्स जमा झाल्यामुळे परफॉर्मन्स कमी होतो
+- इतर एलिमेंट्सशी संवाद साधताना अनपेक्षित वर्तन
+- अनावश्यक इव्हेंट हँडलिंगवर ब्राउझर संसाधने वाया जातात
 
-अभिनंदन! तुम्ही व्हॅनिला जावास्क्रिप्ट वापरून एक परिष्कृत ड्रॅग-एंड-ड्रॉप प्रणाली तयार केली आहे. तुमचे संपूर्ण `dragElement` फंक्शन आता एक शक्तिशाली क्लोजर समाविष्ट करते जे व्यवस्थापित करते:  
+### CSS पोझिशन प्रॉपर्टीज समजून घेणे
 
-**तुमचे क्लोजर काय साध्य करते:**  
-- **खाजगी स्थान व्हेरिएबल्स** स्वतंत्रपणे प्रत्येक प्लांटसाठी राखून ठेवते  
-- **पूर्ण ड्रॅग लाइफसायकल** सुरुवातीपासून शेवटपर्यंत हाताळते  
-- **संपूर्ण स्क्रीनवर** गुळगुळीत, प्रतिसादात्मक चळवळ प्रदान करते  
-- **योग्यरित्या संसाधने साफ करते** मेमरी लीक टाळण्यासाठी  
-- **सर्जनशील, अंतर्ज्ञानी इंटरफेस तयार करते** टेरॅरियम डिझाइनसाठी  
+आमच्या ड्रॅगिंग सिस्टममध्ये दोन मुख्य CSS प्रॉपर्टीज हाताळल्या जातात:
 
-### तुमचे इंटरएक्टिव टेरॅरियम चाचणी करा  
+| प्रॉपर्टी | काय नियंत्रित करते | आम्ही कसे वापरतो |
+|----------|------------------|---------------|
+| `top` | वरच्या कडेकडून अंतर | ड्रॅग दरम्यान उभ्या पोझिशनिंगसाठी |
+| `left` | डाव्या कडेकडून अंतर | ड्रॅग दरम्यान आडव्या पोझिशनिंगसाठी |
 
-आता तुमचे इंटरएक्टिव टेरॅरियम चाचणी करा! तुमची `index.html` फाइल वेब ब्राउझरमध्ये उघडा आणि कार्यक्षमता तपासा:  
+**ऑफसेट प्रॉपर्टीजबद्दल महत्त्वाची माहिती:**
+- **`offsetTop`**: पोझिशन केलेल्या पॅरेंट एलिमेंटपासून वर्तमान अंतर
+- **`offsetLeft`**: पोझिशन केलेल्या पॅरेंट एलिमेंटपासून वर्तमान अंतर
+- **पोझिशनिंग संदर्भ**: ही मूल्ये जवळच्या पोझिशन केलेल्या पूर्वजाच्या संदर्भात असतात
+- **रिअल-टाइम अपडेट्स**: CSS प्रॉपर्टीज बदलल्यावर लगेच बदलतात
 
-1. **क्लिक करा आणि धरून ठेवा** कोणताही प्लांट ड्रॅग सुरू करण्यासाठी  
-2. **तुमचा माऊस किंवा बोट हलवा** आणि प्लांट गुळगुळीतपणे पाठलाग करताना पहा  
-3. **सोडा** प्लांट त्याच्या नवीन स्थानावर ठेवण्यासाठी  
-4. **प्रयोग करा** वेगवेगळ्या व्यवस्था करून इंटरफेस एक्सप्लोर करण्यासाठी  
+> 🎯 **डिझाइन तत्त्वज्ञान**: हा ड्रॅग सिस्टम जाणीवपूर्वक लवचिक आहे – "ड्रॉप झोन" किंवा निर्बंध नाहीत. वापरकर्ते प्लांट्स कुठेही ठेवू शकतात, त्यांना त्यांच्या टेरॅरियम डिझाइनवर पूर्ण सर्जनशील नियंत्रण देतात.
 
-🥇 **साध्य**: तुम्ही कोर संकल्पना वापरून एक पूर्णपणे इंटरएक्टिव वेब अॅप्लिकेशन तयार केले आहे जे व्यावसायिक विकसक दररोज वापरतात. त्या ड्रॅग-एंड-ड्रॉप कार्यक्षमतेत फाइल अपलोड्स, कॅनबन बोर्ड्स आणि इतर अनेक इंटरएक्टिव इंटरफेसच्या मागे असलेल्या समान तत्त्वांचा समावेश आहे.  
+## सर्व एकत्र आणणे: तुमचा पूर्ण ड्रॅग सिस्टम
 
-![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.mr.png)  
+अभिनंदन! तुम्ही व्हॅनिला जावास्क्रिप्ट वापरून एक परिष्कृत ड्रॅग-एंड-ड्रॉप सिस्टम तयार केला आहे. तुमचा पूर्ण `dragElement` फंक्शन आता एक शक्तिशाली क्लोजर समाविष्ट करतो जो व्यवस्थापित करतो:
 
----
+**तुमचा क्लोजर काय साध्य करतो:**
+- **प्रत्येक प्लांटसाठी स्वतंत्र पोझिशन व्हेरिएबल्स राखतो**
+- **ड्रॅग लाइफसायकल पूर्णपणे सुरुवातीपासून शेवटपर्यंत हाताळतो**
+- **संपूर्ण स्क्रीनवर गुळगुळीत, प्रतिसादक्षम मूव्हमेंट प्रदान करतो**
+- **मेमरी लीक टाळण्यासाठी संसाधने योग्य प्रकारे साफ करते**
+- **टेरॅरियम डिझाइनसाठी अंतर्ज्ञानी, सर्जनशील इंटरफेस तयार करतो**
 
-## GitHub Copilot Agent Challenge 🚀  
+### तुमचा इंटरॅक्टिव टेरॅरियम चाचणी करा
 
-Agent मोड वापरून खालील आव्हान पूर्ण करा:  
+आता तुमचा इंटरॅक्टिव टेरॅरियम चाचणी करा! तुमचा `index.html` फाइल वेब ब्राउझरमध्ये उघडा आणि फंक्शनलिटी वापरून पहा:
 
-**वर्णन:** टेरॅरियम प्रकल्पात रीसेट कार्यक्षमता जोडून सुधारणा करा जी सर्व प्लांट्सला त्यांच्या मूळ स्थानावर गुळगुळीत अॅनिमेशनसह परत आणते.  
+1. **क्लिक करा आणि धरून ठेवा** कोणताही प्लांट ड्रॅगिंग सुरू करण्यासाठी
+2. **तुमचा माउस किंवा बोट हलवा** आणि प्लांट गुळगुळीतपणे फॉलो करताना पहा
+3. **सोडा** प्लांट त्याच्या नवीन पोझिशनवर ठेवण्यासाठी
+4. **प्रयोग करा** वेगवेगळ्या व्यवस्था करून इंटरफेस एक्सप्लोर करण्यासाठी
 
-**प्रॉम्प्ट:** एक रीसेट बटण तयार करा जे क्लिक केल्यावर सर्व प्लांट्सला त्यांच्या मूळ साइडबार स्थानावर CSS ट्रान्झिशन्स वापरून 1 सेकंदात गुळगुळीतपणे परत आणते. फंक्शन पृष्ठ लोड झाल्यावर मूळ स्थान साठवेल आणि रीसेट बटण दाबल्यावर त्या स्थानांवर प्लांट्स गुळगुळीतपणे परत जातील.  
+🥇 **यश**: तुम्ही कोर संकल्पना वापरून एक पूर्णपणे इंटरॅक्टिव वेब अॅप्लिकेशन तयार केले आहे जे व्यावसायिक विकसक दररोज वापरतात. त्या ड्रॅग-एंड-ड्रॉप फंक्शनलिटीमध्ये फाइल अपलोड्स, कॅनबन बोर्ड्स आणि इतर अनेक इंटरॅक्टिव इंटरफेसमागील समान तत्त्वे आहेत.
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.  
+### 🔄 **शैक्षणिक तपासणी**
+**पूर्ण सिस्टम समजून घेणे**: तुमच्या पूर्ण ड्रॅग सिस्टमची मास्टरी सत्यापित करा:
+- ✅ क्लोजर्स प्रत्येक प्लांटसाठी स्वतंत्र स्थिती कशी राखतात?
+- ✅ गुळगुळीत मूव्हमेंटसाठी समन्वय गणित का आवश्यक आहे?
+- ✅ जर आम्ही इव्हेंट लिसनर्स साफ करणे विसरलो तर काय होईल?
+- ✅ हा पॅटर्न अधिक जटिल इंटरॅक्शनसाठी कसा स्केल होतो?
 
-## 🚀 अतिरिक्त आव्हान: तुमचे कौशल्य वाढवा  
+**कोड गुणवत्ता प्रतिबिंब**: तुमचे पूर्ण समाधान पुनरावलोकन करा:
+- **मॉड्युलर डिझाइन**: प्रत्येक प्लांटला त्याचा स्वतःचा क्लोजर इंस्टन्स मिळतो
+- **इव्हेंट कार्यक्षमता**: लिसनर्सची योग्य सेटअप आणि क्लीनअप
+- **क्रॉस-डिव्हाइस सपोर्ट**: डेस्कटॉप आणि मोबाइलवर कार्य करते
+- **परफॉर्मन्स कॉन्शस**: मेमरी लीक किंवा अनावश्यक गणना नाही
 
-तुमचे टेरॅरियम पुढील स्तरावर नेण्यासाठी तयार आहात? या सुधारणा अंमलात आणण्याचा प्रयत्न करा:  
+![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.mr.png)
 
-**सर्जनशील विस्तार:**  
-- **डबल-क्लिक करा** प्लांटला पुढे आणण्यासाठी (z-index manipulation)  
-- **दृश्य अभिप्राय जोडा** जसे की प्लांट्सवर होल्ड करताना हलका प्रकाश  
-- **मर्यादा अंमलात आणा** टेरॅरियमच्या बाहेर प्लांट्स ड्रॅग होण्यापासून रोखण्यासाठी  
-- **सेव्ह फंक्शन तयार करा** जे स्थान स्थानिक स्टोरेज वापरून लक्षात ठेवते  
-- **ध्वनी प्रभाव जोडा** प्लांट उचलताना आणि ठेवताना  
-
-> 💡 **शिकण्याची संधी**: या प्रत्येक आव्हानामुळे तुम्हाला DOM मॅनिप्युलेशन, इव्हेंट हँडलिंग आणि वापरकर्ता अनुभव डिझाइनबद्दल नवीन पैलू शिकायला मिळतील.  
+---
 
-## पोस्ट-लेक्चर क्विझ  
+## GitHub Copilot Agent Challenge 🚀
 
-[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/20)  
+Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-## पुनरावलोकन आणि स्व-अभ्यास: तुमची समज वाढवा  
+**वर्णन:** टेरॅरियम प्रोजेक्टमध्ये रीसेट फंक्शनलिटी जोडा जी सर्व प्लांट्स त्यांच्या मूळ पोझिशनवर गुळगुळीत अॅनिमेशनसह परत आणते.
 
-तुम्ही DOM मॅनिप्युलेशन आणि क्लोजर्सचे मूलभूत तत्त्वे आत्मसात केली आहेत, परंतु नेहमीच अधिक एक्सप्लोर करण्यासारखे असते! तुमचे ज्ञान आणि कौशल्य वाढवण्यासाठी येथे काही मार्ग आहेत.  
+**प्रॉम्प्ट:** एक रीसेट बटण तयार करा जे क्लिक केल्यावर सर्व प्लांट्स त्यांच्या मूळ साइडबार पोझिशनवर CSS ट्रान्झिशन्स वापरून 1 सेकंदात गुळगुळीतपणे परत आणते. पृष्ठ लोड झाल्यावर मूळ पोझिशन्स स्टोअर करा आणि रीसेट बटण दाबल्यावर प्लांट्स त्या पोझिशन्सवर परत आणा.
 
-### पर्यायी ड्रॅग आणि ड्रॉप पद्धती  
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
-जास्तीत जास्त लवचिकतेसाठी आम्ही पॉइंटर इव्हेंट्स वापरले, परंतु वेब डेव्हलपमेंटमध्ये अनेक पद्धती आहेत:  
+## 🚀 अतिरिक्त आव्हान: तुमचे कौशल्य वाढवा
 
-| पद्धत | सर्वोत्तम उपयोगासाठी | शिकण्याचे मूल्य |
-|----------|----------|----------------|
-| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | फाइल अपलोड्स, औपचारिक ड्रॅग झोन | ब्राउझरच्या मूळ क्षमतांची समज |
-| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | मोबाइल-विशिष्ट संवाद | मोबाइल-प्रथम विकास पॅटर्न |
-| CSS `transform` गुणधर्म | गुळगुळीत अॅनिमेशन | कार्यक्षमता ऑप्टिमायझेशन तंत्र |
+तुमचा टेरॅरियम पुढील स्तरावर नेण्यासाठी तयार आहात? या सुधारणा अंमलात आणण्याचा प्रयत्न करा:
 
-### प्रगत DOM मॅनिप्युलेशन विषय  
+**सर्जनशील विस्तार:**
+- **डबल-क्लिक** प्लांटला पुढे आणण्यासाठी (z-index manipulation)
+- **दृश्यमान फीडबॅक जोडा** जसे की प्लांट्सवर होव्हर करताना सौम्य चमक
+- **सीमारेषा अंमलात आणा** जेणेकरून प्लांट्स टेरॅरियमच्या बाहेर ड्रॅग होऊ शकत नाहीत
+- **सेव्ह फंक्शन तयार करा** जे प्लांट पोझिशन्स localStorage वापरून लक्षात ठेवते
+- **ध्वनी प्रभाव जोडा** प्लांट्स उचलताना आणि ठेवताना
 
-**तुमच्या शिकण्याच्या प्रवासातील पुढील पायऱ्या:**  
-- **इव्हेंट डेलीगेशन**: अनेक घटकांसाठी इव्हेंट्स कार्यक्षमतेने हाताळणे  
-- **इंटरसेक्शन ऑब्झर्वर**: घटक व्ह्यूपोर्टमध्ये प्रवेश करताना/सोडताना शोधणे  
-- **म्युटेशन ऑब्झर्वर**: DOM संरचनेत बदल पाहणे  
-- **वेब घटक**: पुनर्वापरयोग्य, इनकॅप्स्युलेटेड UI घटक तयार करणे  
-- **व्हर्च्युअल DOM संकल्पना**: फ्रेमवर्क्स DOM अपडेट्स कसे ऑप्टिमाइझ करतात ते समजून घेणे  
+> 💡 **शिकण्याची संधी**: या प्रत्येक आव्हानामुळे तुम्हाला DOM मॅनिप्युलेशन, इव्हेंट हँडलिंग आणि वापरकर्ता अनुभव डिझाइनबद्दल नवीन पैलू शिकायला मिळतील.
 
-### सतत शिकण्यासाठी आवश्यक संसाधने  
+## पोस्ट-लेक्चर क्विझ
 
-**तांत्रिक दस्तऐवज:**  
-- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - व्यापक पॉइंटर इव्हेंट संदर्भ  
-- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - अधिकृत मानक दस्तऐवज  
-- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - प्रगत क्लोजर पॅटर्न  
+[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/20)
 
-**ब्राउझर सुसंगतता:**  
-- [CanIUse.com](https://caniuse.com/) - ब्राउझरमध्ये वैशिष्ट्य समर्थन तपासा  
-- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - तपशीलवार सुसंगतता माहिती  
+## पुनरावलोकन आणि स्व-अभ्यास: तुमची समज वाढवणे
 
-**सराव संधी:**  
-- **तयार करा** ड्रॅग मेकॅनिक्स वापरून एक पझल गेम  
-- **तयार करा** ड्रॅग-एंड-ड्रॉप टास्क व्यवस्थापनासह कॅनबन बोर्ड  
-- **डिझाइन करा** ड्रॅग करण्यायोग्य फोटो व्यवस्था असलेली इमेज गॅलरी  
-- **प्रयोग करा** मोबाइल इंटरफेससाठी टच जेस्चर वापरून  
+तुम्ही DOM मॅनिप्युलेशन आणि क्लोजर्सच्या मूलभूत गोष्टींमध्ये पारंगत झाला आहात, परंतु नेहमीच अधिक एक्सप्लोर करण्यासारखे असते! तुमचे ज्ञान आणि कौशल्य वाढवण्यासाठी येथे काही मार्ग आहेत.
 
-> 🎯 **शिकण्याची रणनीती**: या संकल्पना ठोस करण्याचा सर्वोत्तम मार्ग म्हणजे सराव. ड्रॅग करण्यायोग्य इंटरफेसचे प्रकार तयार करण्याचा प्रयत्न करा – प्रत्येक प्रकल्प तुम्हाला वापरकर्ता संवाद आणि DOM मॅनिप्युलेशनबद्दल काहीतरी नवीन शिकवेल.  
+### पर्यायी ड्रॅग आणि ड्रॉप पद्धती
 
-## असाइनमेंट  
+जास्तीत जास्त लवचिकतेसाठी आम्ही पॉइंटर इव्हेंट्स वापरले, परंतु वेब डेव्हलपमेंटमध्ये अनेक पद्धती आहेत:
 
-[DOM सह थोडे अधिक काम करा](assignment.md)  
+| पद्धत | सर्वोत्तम उपयोग | शिकण्याचे मूल्य |
+|----------|----------|----------------|
+| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | फाइल अपलोड्स, औपचारिक ड्रॅग झोन | नेटिव्ह ब्राउझर क्षमता समजून घेणे |
+| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | मोबाइल-विशिष्ट इंटरॅक्शन | मोबाइल-फर्स्ट डेव्हलपमेंट पॅटर्न |
+| CSS `transform` प्रॉपर्टीज | गुळगुळीत अॅनिमेशन | परफॉर्मन्स ऑप्टिमायझेशन तंत्र |
+
+### प्रगत DOM मॅनिप्युलेशन विषय
+
+**तुमच्या शिकण्याच्या प्रवासातील पुढील पायऱ्या:**
+- **इव्हेंट डेलीगेशन**: अनेक एलिमेंट्ससाठी इव्हेंट्स कार्यक्षमतेने हाताळणे
+- **Intersection Observer**: एलिमेंट्स व्ह्यूपोर्टमध्ये प्रवेश करताना/सोडताना शोधणे
+- **Mutation Observer**: DOM स्ट्रक्चरमध्ये बदल पाहणे
+- **Web Components**: पुनर्वापरयोग्य, इनकॅप्स्युलेटेड UI एलिमेंट्स तयार करणे
+- **Virtual DOM संकल्पना**: फ्रेमवर्क्स DOM अपडेट्स कसे ऑप्टिमाइझ करतात ते समजून घेणे
+
+### सतत शिकण्यासाठी आवश्यक संसाधने
+
+**तांत्रिक दस्तऐवज:**
+- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - व्यापक पॉइंटर इव्हेंट संदर्भ
+- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - अधिकृत मानक दस्तऐवज
+- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - प्रगत क्लोजर पॅटर्न
+
+**ब्राउझर सुसंगतता:**
+- [CanIUse.com](https://caniuse.com/) - ब्राउझरमध्ये फीचर सपोर्ट तपासा
+- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - तपशीलवार सुसंगतता माहिती
+
+**अभ्यासाच्या संधी:**
+- **तयार करा** ड्रॅग मेकॅनिक्स वापरून पझल गेम
+- **तयार करा** ड्रॅग-एंड-ड्रॉप टास्क मॅनेजमेंटसह कॅनबन बोर्ड
+- **डिझाइन करा** ड्रॅग करण्यायोग्य फोटो व्यवस्था असलेली इमेज गॅलरी
+- **प्रयोग करा** मोबाइल इंटरफेससाठी टच जेस्चरसह
+
+> 🎯 **शिकण्याची रणनीती**: या संकल्पनांना ठोस करण्याचा सर्वोत्तम मार्ग म्हणजे सराव. ड्रॅग करण्यायोग्य इंटरफेसचे प्रकार तयार करण्याचा प्रयत्न करा – प्रत्येक प्रोजेक्ट तुम्हाला वापरकर्ता इंटरॅक्शन आणि DOM मॅनिप्युलेशनबद्दल काहीतरी नवीन शिकवेल.
+
+### ⚡ **तुम्ही पुढील 5 मिनिटांत काय करू शकता**
+- [ ] ब्राउझर DevTools उघडा आणि कन्सोलमध्ये `document.querySelector('body')` टाइप करा
+- [ ] `innerHTML` किंवा `textContent` वापरून वेबपेजचा मजकूर बदलण्याचा प्रयत्न करा
+- [ ] वेबपेजवरील कोणत्याही बटणावर किंवा लिंकवर क्लिक इव्हेंट लिसनर जोडा
+- [ ] एलिमेंट्स पॅनेल वापरून DOM ट्री स्ट्रक्चर तपासा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि DOM मॅनिप्युलेशन संकल्पना पुनरावलोकन करा
+- [ ] वापरकर्त्याच्या क्लिकला प्रतिसाद देणारी इंटरॅक्टिव वेबपेज तयार करा
+- [ ] वेगवेगळ्या इव्हेंट प्रकारांसह (क्लिक, माउसओव्हर, कीप्रेस) इव्हेंट हँडलिंग सराव करा
+- [ ] DOM मॅनिप्युलेशन वापरून साधी टू-डू लिस्ट किंवा काउंटर तयार करा
+- [ ] HTML एलिमेंट्स आणि जावास्क्रिप्ट ऑब्जेक्ट्समधील संबंध एक्सप्लोर करा
+
+### 📅 **तुमचा आठवडाभराचा जावास्क्रिप्ट प्रवास**
+- [ ] ड्रॅग-एंड-ड्रॉप फंक्शनलिटीसह इंटरॅक्टिव टेरॅरियम प्रोजेक्ट पूर्ण करा
+- [ ] कार्यक्षम इव्हेंट हँडलिंगसाठी इव्हेंट डेलीगेशन मास्टर करा
+- [ ] इव्हेंट लूप आणि असिंक्रोनस जावास्क्रिप्टबद्दल जाणून घ्या
+- [ ] क्लोजर्स सराव करून प्रायव्हेट स्टेटसह मॉड्यूल तयार करा
+- [ ] Intersection Observer सारख्या आधुनिक DOM APIs एक्सप्लोर करा
+- [ ] फ्रेमवर्क्सशिवाय इंटरॅक्टिव घटक तयार करा
+
+### 🌟 **तुमचा महिनाभराचा जावास्क्रिप्ट मास्टरी**
+- [ ] व्हॅनिला जावास्क्रिप्ट वापरून एक जटिल सिंगल-पेज अॅप्लिकेशन तयार करा
+- [ ] आधुनिक फ्रेमवर्क (React, Vue, किंवा Angular) शिकून ते व्हॅनिला DOMशी तुलना करा
+- [ ] ओपन सोर्स जावास्क्रिप्ट प्रोजेक्ट्समध्ये योगदान द्या
+- [ ] वेब घटक आणि कस्टम एलिमेंट्ससारख्या प्रगत संकल्पना मास्टर करा
+- [ ] ऑप्टिमल DOM पॅटर्नसह कार्यक्षम वेब अॅप्लिकेशन्स तयार करा
+- [ ] DOM मॅनिप्युलेशन आणि जावास्क्रिप्ट मूलभूत गोष्टी
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/4-typing-game/README.md b/translations/mr/4-typing-game/README.md
index ce24cc83dd..d6e2c6cd3f 100644
--- a/translations/mr/4-typing-game/README.md
+++ b/translations/mr/4-typing-game/README.md
@@ -1,48 +1,295 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5adea7059676fcdb1b546ccd54c956c2",
-  "translation_date": "2025-10-22T16:25:28+00:00",
+  "original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
+  "translation_date": "2025-11-03T14:51:46+00:00",
   "source_file": "4-typing-game/README.md",
   "language_code": "mr"
 }
 -->
 # इव्हेंट-ड्रिव्हन प्रोग्रामिंग - टायपिंग गेम तयार करा
 
+```mermaid
+journey
+    title Your Typing Game Development Journey
+    section Foundation
+      Plan game structure: 3: Student
+      Design user interface: 4: Student
+      Setup HTML elements: 4: Student
+    section Functionality
+      Handle user input: 4: Student
+      Track timing: 5: Student
+      Calculate accuracy: 5: Student
+    section Features
+      Add visual feedback: 5: Student
+      Implement game logic: 5: Student
+      Polish experience: 5: Student
+```
+
 ## परिचय
 
-प्रत्येक विकसकाला हे माहित असते पण क्वचितच याबद्दल बोलले जाते: वेगाने टायपिंग करणे म्हणजे एक सुपरपॉवर आहे! 🚀 विचार करा - तुमच्या कल्पना तुमच्या मेंदूपासून कोड एडिटरपर्यंत जितक्या वेगाने पोहोचतील, तितकी तुमची सर्जनशीलता अधिक प्रवाहित होईल. हे तुमच्या विचारांपासून स्क्रीनपर्यंत थेट पाइपलाइन असल्यासारखे आहे.
+प्रत्येक विकसकाला हे माहित असते पण क्वचितच बोलले जाते: जलद टायपिंग करणे म्हणजे एक सुपरपॉवर आहे! 🚀 विचार करा - तुमच्या कल्पना तुमच्या मेंदूपासून कोड एडिटरपर्यंत जितक्या जलद पोहोचतील, तितकी तुमची सर्जनशीलता अधिक प्रवाही होईल. हे तुमच्या विचारांपासून स्क्रीनपर्यंत थेट पाइपलाइन असल्यासारखे आहे.
+
+```mermaid
+pie title Game Features
+    "Real-time Feedback" : 25
+    "Performance Tracking" : 20
+    "Interactive UI" : 20
+    "Timer System" : 15
+    "Quote Management" : 10
+    "Results Display" : 10
+```
+
+या कौशल्याला सुधारण्यासाठी सर्वोत्तम मार्गांपैकी एक जाणून घ्यायचा आहे का? तुम्ही बरोबर ओळखले - आपण एक गेम तयार करणार आहोत!
 
-ही कौशल्य सुधारण्यासाठी सर्वोत्तम पद्धतींपैकी एक जाणून घ्यायची आहे का? तुम्ही बरोबर ओळखले - आपण एक गेम तयार करणार आहोत!
+```mermaid
+flowchart LR
+    A[Player starts game] --> B[Random quote displayed]
+    B --> C[Player types characters]
+    C --> D{Character correct?}
+    D -->|Yes| E[Green highlight]
+    D -->|No| F[Red highlight]
+    E --> G[Update accuracy]
+    F --> G
+    G --> H{Quote complete?}
+    H -->|No| C
+    H -->|Yes| I[Calculate WPM]
+    I --> J[Display results]
+    J --> K[Play again?]
+    K -->|Yes| B
+    K -->|No| L[Game over]
+    
+    style A fill:#e1f5fe
+    style D fill:#fff3e0
+    style E fill:#e8f5e8
+    style F fill:#ffebee
+    style I fill:#f3e5f5
+```
 
 > चला एक अप्रतिम टायपिंग गेम तयार करूया!
 
-तुम्ही शिकत असलेल्या JavaScript, HTML, आणि CSS कौशल्यांचा वापर करण्यासाठी तयार आहात का? आपण एक टायपिंग गेम तयार करणार आहोत जो तुम्हाला [शेरलॉक होम्स](https://en.wikipedia.org/wiki/Sherlock_Holmes) या प्रसिद्ध गुप्तहेराच्या रँडम कोट्ससह आव्हान देईल. हा गेम तुमची टायपिंगची गती आणि अचूकता ट्रॅक करेल - आणि विश्वास ठेवा, हे अपेक्षेपेक्षा जास्त व्यसनाधीन आहे!
+तुम्ही शिकत असलेल्या JavaScript, HTML आणि CSS कौशल्यांचा वापर करण्यासाठी तयार आहात का? आपण एक टायपिंग गेम तयार करणार आहोत जो तुम्हाला [शेरलॉक होम्स](https://en.wikipedia.org/wiki/Sherlock_Holmes) या प्रसिद्ध गुप्तहेराच्या यादृच्छिक कोट्ससह आव्हान देईल. हा गेम तुमची टायपिंगची गती आणि अचूकता ट्रॅक करेल - आणि माझ्यावर विश्वास ठेवा, हे अपेक्षेपेक्षा जास्त व्यसनाधीन आहे!
 
-![demo](../../../4-typing-game/images/demo.gif)
+```mermaid
+mindmap
+  root((Typing Game Development))
+    User Interface
+      Input Elements
+      Visual Feedback
+      Responsive Design
+      Accessibility
+    Game Logic
+      Quote Selection
+      Timer Management
+      Accuracy Tracking
+      Score Calculation
+    Event Handling
+      Keyboard Input
+      Button Clicks
+      Real-time Updates
+      Game State Changes
+    Performance Metrics
+      Words Per Minute
+      Character Accuracy
+      Error Tracking
+      Progress Display
+    User Experience
+      Immediate Feedback
+      Clear Instructions
+      Engaging Content
+      Achievement System
+```
+
+![डेमो](../../../4-typing-game/images/demo.gif)
 
 ## तुम्हाला काय माहित असणे आवश्यक आहे
 
-आम्ही सुरुवात करण्यापूर्वी, तुम्ही या संकल्पनांमध्ये सहज असणे आवश्यक आहे (जर तुम्हाला थोडा रिव्हिजन करायचा असेल तर काळजी करू नका - आपण सगळे तिथेच होतो!):
+```mermaid
+flowchart TD
+    A[User Action] --> B{Event Type?}
+    B -->|Key Press| C[Keyboard Event]
+    B -->|Button Click| D[Mouse Event]
+    B -->|Timer| E[Time Event]
+    
+    C --> F[Check Character]
+    D --> G[Start/Reset Game]
+    E --> H[Update Timer]
+    
+    F --> I{Correct?}
+    I -->|Yes| J[Highlight Green]
+    I -->|No| K[Highlight Red]
+    
+    J --> L[Update Score]
+    K --> L
+    L --> M[Check Game State]
+    
+    G --> N[Generate New Quote]
+    H --> O[Display Time]
+    
+    M --> P{Game Complete?}
+    P -->|Yes| Q[Show Results]
+    P -->|No| R[Continue Game]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#fff3e0
+    style Q fill:#f3e5f5
+```
+
+आत खोलवर जाण्यापूर्वी, तुम्ही या संकल्पनांमध्ये आरामदायक आहात याची खात्री करा (जर तुम्हाला थोडा रीफ्रेशर लागला तर काळजी करू नका - आपण सर्व तिथे गेलो आहोत!):
 
-- टेक्स्ट इनपुट आणि बटण कंट्रोल्स तयार करणे
-- CSS आणि क्लासेस वापरून स्टाइल सेट करणे  
+- टेक्स्ट इनपुट आणि बटण नियंत्रण तयार करणे
+- CSS आणि वर्गांचा वापर करून शैली सेट करणे  
 - JavaScript मूलभूत गोष्टी
   - अ‍ॅरे तयार करणे
-  - रँडम नंबर तयार करणे
+  - यादृच्छिक संख्या तयार करणे
   - वर्तमान वेळ मिळवणे
 
-जर यापैकी काही गोष्टी थोड्या विसरल्या असतील तर ते पूर्णपणे ठीक आहे! कधी कधी प्रोजेक्टमध्ये उडी मारून गोष्टी समजून घेणे हे तुमचे ज्ञान मजबूत करण्याचा सर्वोत्तम मार्ग असतो.
+जर यापैकी काही थोडेसे विसरले गेले असतील तर ते पूर्णपणे ठीक आहे! कधी कधी प्रकल्पात उडी मारणे आणि गोष्टी शोधणे हे तुमचे ज्ञान मजबूत करण्याचा सर्वोत्तम मार्ग असतो.
+
+### 🔄 **शैक्षणिक तपासणी**
+**मूलभूत मूल्यांकन**: विकास सुरू करण्यापूर्वी, तुम्हाला समजले आहे याची खात्री करा:
+- ✅ HTML फॉर्म्स आणि इनपुट घटक कसे कार्य करतात
+- ✅ CSS वर्ग आणि डायनॅमिक स्टाइलिंग
+- ✅ JavaScript इव्हेंट लिसनर्स आणि हँडलर्स
+- ✅ अ‍ॅरे मॅनिप्युलेशन आणि यादृच्छिक निवड
+- ✅ वेळ मोजमाप आणि गणना
+
+**जलद स्व-परीक्षण**: तुम्ही स्पष्ट करू शकता का की या संकल्पना परस्परसंवादी गेममध्ये एकत्र कशा कार्य करतात?
+- **इव्हेंट्स** वापरकर्त्यांनी घटकांशी संवाद साधल्यावर ट्रिगर होतात
+- **हँडलर्स** त्या इव्हेंट्सवर प्रक्रिया करतात आणि गेमची स्थिती अपडेट करतात
+- **CSS** वापरकर्त्याच्या क्रियांसाठी व्हिज्युअल फीडबॅक प्रदान करते
+- **टायमिंग** कार्यक्षमता मोजमाप आणि गेम प्रगती सक्षम करते
+
+```mermaid
+quadrantChart
+    title Typing Game Skills Development
+    x-axis Beginner --> Expert
+    y-axis Static --> Interactive
+    quadrant-1 Advanced Games
+    quadrant-2 Real-time Apps
+    quadrant-3 Basic Pages
+    quadrant-4 Interactive Sites
+    
+    HTML Forms: [0.3, 0.2]
+    CSS Styling: [0.4, 0.3]
+    Event Handling: [0.7, 0.8]
+    Game Logic: [0.8, 0.9]
+    Performance Tracking: [0.9, 0.7]
+```
 
 ## चला हे तयार करूया!
 
 [इव्हेंट-ड्रिव्हन प्रोग्रामिंग वापरून टायपिंग गेम तयार करणे](./typing-game/README.md)
 
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] तुमच्या ब्राउझर कन्सोलमध्ये उघडा आणि `addEventListener` वापरून कीबोर्ड इव्हेंट्स ऐकण्याचा प्रयत्न करा
+- [ ] इनपुट फील्डसह एक साधे HTML पृष्ठ तयार करा आणि टायपिंग डिटेक्शनची चाचणी करा
+- [ ] स्ट्रिंग मॅनिप्युलेशनचा सराव करा टाइप केलेला मजकूर लक्ष्य मजकुराशी तुलना करून
+- [ ] `setTimeout` वापरून टायमिंग फंक्शन्स समजून घेण्याचा प्रयोग करा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि इव्हेंट-ड्रिव्हन प्रोग्रामिंग समजून घ्या
+- [ ] शब्द सत्यापनासह टायपिंग गेमची मूलभूत आवृत्ती तयार करा
+- [ ] योग्य आणि चुकीच्या टायपिंगसाठी व्हिज्युअल फीडबॅक जोडा
+- [ ] गती आणि अचूकतेवर आधारित एक साधी स्कोअरिंग प्रणाली अंमलात आणा
+- [ ] CSS सह तुमचा गेम शैलीबद्ध करा आणि तो व्हिज्युअली आकर्षक बनवा
+
+### 📅 **तुमचा आठवडाभराचा गेम विकास**
+- [ ] सर्व वैशिष्ट्ये आणि पॉलिशसह पूर्ण टायपिंग गेम पूर्ण करा
+- [ ] वेगवेगळ्या शब्दांच्या जटिलतेसह अडचण पातळी जोडा
+- [ ] वापरकर्ता आकडेवारी ट्रॅकिंग अंमलात आणा (WPM, वेळोवेळी अचूकता)
+- [ ] चांगल्या वापरकर्ता अनुभवासाठी ध्वनी प्रभाव आणि अ‍ॅनिमेशन तयार करा
+- [ ] टच डिव्हाइससाठी तुमचा गेम मोबाइल-प्रतिसादक्षम बनवा
+- [ ] तुमचा गेम ऑनलाइन शेअर करा आणि वापरकर्त्यांकडून फीडबॅक मिळवा
+
+### 🌟 **तुमचा महिनाभराचा परस्पर विकास**
+- [ ] विविध संवाद पॅटर्न एक्सप्लोर करणारे एकाधिक गेम तयार करा
+- [ ] गेम लूप्स, स्टेट मॅनेजमेंट आणि कार्यक्षमता ऑप्टिमायझेशनबद्दल जाणून घ्या
+- [ ] ओपन सोर्स गेम डेव्हलपमेंट प्रोजेक्ट्समध्ये योगदान द्या
+- [ ] प्रगत टायमिंग संकल्पना आणि गुळगुळीत अ‍ॅनिमेशनमध्ये प्रभुत्व मिळवा
+- [ ] विविध परस्पर अनुप्रयोग दर्शविणारे पोर्टफोलिओ तयार करा
+- [ ] गेम डेव्हलपमेंट आणि वापरकर्ता संवादामध्ये स्वारस्य असलेल्या इतरांना मार्गदर्शन करा
+
+## 🎯 तुमचा टायपिंग गेम मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title Game Development Learning Progression
+    
+    section Setup (10 minutes)
+        Project Structure: HTML foundation
+                         : CSS styling setup
+                         : JavaScript file creation
+        
+    section User Interface (20 minutes)
+        Interactive Elements: Input fields
+                            : Button controls
+                            : Display areas
+                            : Responsive layout
+        
+    section Event Handling (25 minutes)
+        User Interaction: Keyboard events
+                        : Mouse events
+                        : Real-time feedback
+                        : State management
+        
+    section Game Logic (30 minutes)
+        Core Functionality: Quote generation
+                          : Character comparison
+                          : Accuracy calculation
+                          : Timer implementation
+        
+    section Performance Tracking (35 minutes)
+        Metrics & Analytics: WPM calculation
+                           : Error tracking
+                           : Progress visualization
+                           : Results display
+        
+    section Polish & Enhancement (45 minutes)
+        User Experience: Visual feedback
+                       : Sound effects
+                       : Animations
+                       : Accessibility features
+        
+    section Advanced Features (1 week)
+        Extended Functionality: Difficulty levels
+                              : Leaderboards
+                              : Custom quotes
+                              : Multiplayer options
+        
+    section Professional Skills (1 month)
+        Game Development: Performance optimization
+                        : Code architecture
+                        : Testing strategies
+                        : Deployment patterns
+```
+
+### 🛠️ तुमचा गेम डेव्हलपमेंट टूलकिट सारांश
+
+हा प्रकल्प पूर्ण केल्यानंतर, तुम्ही खालील गोष्टींमध्ये प्रभुत्व मिळवले असेल:
+- **इव्हेंट-ड्रिव्हन प्रोग्रामिंग**: इनपुटला प्रतिसाद देणारे परस्परसंवादी यूजर इंटरफेस
+- **रिअल-टाइम फीडबॅक**: त्वरित व्हिज्युअल आणि कार्यक्षमता अपडेट्स
+- **कार्यक्षमता मोजमाप**: अचूक टायमिंग आणि स्कोअरिंग प्रणाली
+- **गेम स्टेट मॅनेजमेंट**: अनुप्रयोग प्रवाह आणि वापरकर्ता अनुभव नियंत्रित करणे
+- **परस्पर डिझाइन**: आकर्षक, व्यसनाधीन वापरकर्ता अनुभव तयार करणे
+- **आधुनिक वेब APIs**: समृद्ध संवादांसाठी ब्राउझर क्षमता वापरणे
+- **प्रवेशयोग्यता नमुने**: सर्व वापरकर्त्यांसाठी समावेशक डिझाइन
+
+**वास्तविक-जागतिक अनुप्रयोग**: या कौशल्यांचा थेट उपयोग होतो:
+- **वेब अनुप्रयोग**: कोणतेही परस्परसंवादी इंटरफेस किंवा डॅशबोर्ड
+- **शैक्षणिक सॉफ्टवेअर**: शिक्षण प्लॅटफॉर्म आणि कौशल्य मूल्यांकन साधने
+- **उत्पादकता साधने**: टेक्स्ट एडिटर्स, IDEs आणि सहयोग सॉफ्टवेअर
+- **गेमिंग उद्योग**: ब्राउझर गेम्स आणि परस्पर मनोरंजन
+- **मोबाइल विकास**: टच-आधारित इंटरफेस आणि जेस्चर हँडलिंग
+
+**पुढील स्तर**: तुम्ही प्रगत गेम फ्रेमवर्क्स, रिअल-टाइम मल्टीप्लेअर सिस्टम्स किंवा जटिल परस्परसंवादी अनुप्रयोग एक्सप्लोर करण्यास तयार आहात!
+
 ## क्रेडिट्स
 
-♥️ सह लिहिलेले [क्रिस्टोफर हॅरिसन](http://www.twitter.com/geektrainer)
+[क्रिस्टोफर हॅरिसन](http://www.twitter.com/geektrainer) यांनी ♥️ सह लिहिले
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/4-typing-game/typing-game/README.md b/translations/mr/4-typing-game/typing-game/README.md
index c40ec5483f..c08fa4c115 100644
--- a/translations/mr/4-typing-game/typing-game/README.md
+++ b/translations/mr/4-typing-game/typing-game/README.md
@@ -1,19 +1,19 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e6b75e5b8caae906473a8a09d77b7121",
-  "translation_date": "2025-10-22T16:26:41+00:00",
+  "original_hash": "da8bc72041a2bb3826a54654ee1a8844",
+  "translation_date": "2025-11-03T14:53:04+00:00",
   "source_file": "4-typing-game/typing-game/README.md",
   "language_code": "mr"
 }
 -->
 # इव्हेंट्स वापरून गेम तयार करणे
 
-तुम्ही कधी विचार केला आहे की वेबसाइट्सला कसे कळते की तुम्ही बटण क्लिक करता किंवा टेक्स्ट बॉक्समध्ये टाइप करता? हे इव्हेंट-ड्रिव्हन प्रोग्रामिंगचे जादू आहे! ही महत्त्वाची कौशल्य शिकण्यासाठी एक उपयुक्त गोष्ट तयार करण्यापेक्षा चांगले काय असू शकते - एक टायपिंग स्पीड गेम जो तुम्ही केलेल्या प्रत्येक कीस्ट्रोकवर प्रतिक्रिया देतो.
+तुम्ही कधी विचार केला आहे का की वेबसाइट्सला कसे कळते की तुम्ही बटण क्लिक करता किंवा टेक्स्ट बॉक्समध्ये टाइप करता? हे इव्हेंट-ड्रिव्हन प्रोग्रामिंगचे जादू आहे! ही महत्त्वाची कौशल्य शिकण्यासाठी काहीतरी उपयुक्त तयार करण्यापेक्षा चांगले काय असू शकते - एक टाइपिंग स्पीड गेम जो तुम्ही केलेल्या प्रत्येक कीस्ट्रोकवर प्रतिक्रिया देतो.
 
-तुम्ही स्वतः पाहणार आहात की वेब ब्राउझर तुमच्या JavaScript कोडशी "बोलतात" कसे. तुम्ही क्लिक करता, टाइप करता किंवा तुमचा माउस हलवता तेव्हा ब्राउझर तुमच्या कोडला लहान संदेश (ज्याला आपण इव्हेंट्स म्हणतो) पाठवत असतो आणि तुम्ही त्यावर कसे प्रतिसाद द्यायचे ते ठरवता!
+तुम्ही स्वतः पाहणार आहात की वेब ब्राउझर तुमच्या JavaScript कोडशी "कसे बोलतात". तुम्ही प्रत्येक वेळी क्लिक करता, टाइप करता किंवा तुमचा माउस हलवता, ब्राउझर तुमच्या कोडला लहान संदेश (त्यांना इव्हेंट्स म्हणतात) पाठवत असतो आणि तुम्ही त्यावर कसे प्रतिसाद द्यायचे ते ठरवता!
 
-जेव्हा आपण हे पूर्ण करू, तेव्हा तुम्ही एक खरा टायपिंग गेम तयार केला असेल जो तुमचा वेग आणि अचूकता ट्रॅक करतो. त्याहून महत्त्वाचे म्हणजे, तुम्ही प्रत्येक इंटरॅक्टिव्ह वेबसाइटच्या मूलभूत संकल्पना समजून घेतल्या असतील. चला सुरुवात करूया!
+जेव्हा आपण येथे संपवतो, तेव्हा तुम्ही एक खरा टाइपिंग गेम तयार केला असेल जो तुमचा वेग आणि अचूकता ट्रॅक करतो. त्याहून महत्त्वाचे म्हणजे, तुम्ही प्रत्येक इंटरॅक्टिव्ह वेबसाइटला चालवणारे मूलभूत संकल्पना समजून घेतल्या असतील. चला सुरुवात करूया!
 
 ## प्री-लेक्चर क्विझ
 
@@ -21,34 +21,34 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## इव्हेंट-ड्रिव्हन प्रोग्रामिंग
 
-तुमचा आवडता अ‍ॅप किंवा वेबसाइट विचार करा - त्याला जिवंत आणि प्रतिसादात्मक काय बनवते? हे सर्व तुम्ही काय करता यावर कसे प्रतिक्रिया देते याबद्दल आहे! प्रत्येक टॅप, क्लिक, स्वाइप किंवा कीस्ट्रोक "इव्हेंट" तयार करते आणि वेब डेव्हलपमेंटची खरी जादू तिथेच होते.
+तुमच्या आवडत्या अॅप किंवा वेबसाइटबद्दल विचार करा - त्याला जिवंत आणि प्रतिसादात्मक काय बनवते? हे सर्व तुमच्या कृतींवर कसे प्रतिक्रिया देते याबद्दल आहे! प्रत्येक टॅप, क्लिक, स्वाइप किंवा कीस्ट्रोक "इव्हेंट" तयार करते आणि वेब डेव्हलपमेंटचे खरे जादू तिथेच घडते.
 
-वेबसाठी प्रोग्रामिंग का इतके मनोरंजक आहे ते येथे आहे: आपल्याला कधीच माहित नसते की एखादी व्यक्ती ते बटण कधी क्लिक करेल किंवा टेक्स्ट बॉक्समध्ये टाइप करायला सुरुवात करेल. ते त्वरित क्लिक करू शकतात, पाच मिनिटे थांबू शकतात किंवा कदाचित कधीच क्लिक करणार नाहीत! या अनिश्चिततेचा अर्थ असा आहे की आपल्याला आपला कोड कसा लिहायचा याबद्दल वेगळ्या प्रकारे विचार करणे आवश्यक आहे.
+वेबसाठी प्रोग्रामिंग करणे इतके मनोरंजक का आहे? कारण आपल्याला कधीच माहित नसते की एखादी व्यक्ती ते बटण कधी क्लिक करेल किंवा टेक्स्ट बॉक्समध्ये टाइप करायला सुरुवात करेल. ते त्वरित क्लिक करू शकतात, पाच मिनिटे थांबू शकतात किंवा कदाचित कधीच क्लिक करू शकत नाहीत! या अनिश्चिततेमुळे आपल्याला आपला कोड कसा लिहायचा याबद्दल वेगळ्या प्रकारे विचार करावा लागतो.
 
-रेसिपीसारखा कोड वरून खाली चालवण्याऐवजी, आपण कोड लिहितो जो काहीतरी होण्याची वाट पाहतो. हे 1800 च्या दशकातील टेलिग्राफ ऑपरेटर कसे त्यांच्या मशीनजवळ बसून संदेश येताच प्रतिसाद देण्यासाठी तयार असायचे यासारखे आहे.
+रेसिपीसारखा कोड वरून खाली चालवण्याऐवजी, आम्ही कोड लिहितो जो काहीतरी होण्याची वाट पाहत शांतपणे बसतो. हे 1800 च्या दशकातील टेलिग्राफ ऑपरेटर कसे त्यांच्या मशीनजवळ बसून, वायरद्वारे संदेश येताच प्रतिसाद देण्यासाठी तयार असायचे त्यासारखे आहे.
 
-तर "इव्हेंट" नेमके काय आहे? साध्या भाषेत सांगायचे तर, ते काहीतरी घडते! तुम्ही बटण क्लिक करता तेव्हा - ते एक इव्हेंट आहे. तुम्ही अक्षर टाइप करता तेव्हा - ते एक इव्हेंट आहे. तुम्ही तुमचा माउस हलवता तेव्हा - ते आणखी एक इव्हेंट आहे.
+तर "इव्हेंट" नेमके काय आहे? सोप्या भाषेत सांगायचे तर, ते काहीतरी घडते! तुम्ही बटण क्लिक करता तेव्हा - ते एक इव्हेंट आहे. तुम्ही अक्षर टाइप करता तेव्हा - ते एक इव्हेंट आहे. तुम्ही तुमचा माउस हलवता तेव्हा - ते आणखी एक इव्हेंट आहे.
 
-इव्हेंट-ड्रिव्हन प्रोग्रामिंग आपल्याला आपला कोड ऐकण्यासाठी आणि प्रतिसाद देण्यासाठी सेट करण्यास अनुमती देते. आम्ही **इव्हेंट लिसनर्स** नावाच्या विशेष फंक्शन्स तयार करतो जे विशिष्ट गोष्टी घडण्याची वाट पाहतात आणि त्या घडल्यावर क्रियाशील होतात.
+इव्हेंट-ड्रिव्हन प्रोग्रामिंग आपल्याला आपला कोड ऐकण्यासाठी आणि प्रतिसाद देण्यासाठी सेट करण्यास अनुमती देते. आम्ही **इव्हेंट लिसनर्स** नावाच्या विशेष फंक्शन्स तयार करतो जे विशिष्ट गोष्टी घडण्याची वाट पाहतात आणि त्या घडल्यावर लगेच अॅक्शनमध्ये येतात.
 
-इव्हेंट लिसनर्सना तुमच्या कोडसाठी डोअरबेल असल्यासारखे समजा. तुम्ही डोअरबेल सेट करता (`addEventListener()`), त्याला कोणता आवाज ऐकायचा आहे ते सांगता (जसे 'क्लिक' किंवा 'कीप्रेस') आणि मग कोणीतरी ते वाजवते तेव्हा काय घडले पाहिजे ते निर्दिष्ट करता (तुमचे कस्टम फंक्शन).
+इव्हेंट लिसनर्सना तुमच्या कोडसाठी डोअरबेल असल्यासारखे समजा. तुम्ही डोअरबेल सेट करता (`addEventListener()`), त्याला कोणता आवाज ऐकायचा आहे ते सांगता (जसे 'क्लिक' किंवा 'कीप्रेस') आणि मग कोणीतरी डोअरबेल वाजवल्यावर काय घडावे ते निर्दिष्ट करता (तुमचे कस्टम फंक्शन).
 
 **इव्हेंट लिसनर्स कसे कार्य करतात:**
-- **ऐकतात** विशिष्ट वापरकर्ता क्रिया जसे की क्लिक, कीस्ट्रोक्स किंवा माउस मूव्हमेंट्स
+- **ऐकतात** विशिष्ट वापरकर्त्याच्या क्रिया जसे की क्लिक, कीस्ट्रोक्स किंवा माउस मूव्हमेंट
 - **अंमलात आणतात** तुमचा कस्टम कोड जेव्हा निर्दिष्ट इव्हेंट घडतो
-- **त्वरित प्रतिसाद देतात** वापरकर्ता इंटरॅक्शनला, एक सहज अनुभव तयार करतात
-- **हँडल करतात** एकाच घटकावर अनेक इव्हेंट्स वेगवेगळ्या लिसनर्स वापरून
+- **तत्काळ प्रतिसाद देतात** वापरकर्त्याच्या इंटरॅक्शनला, एक सहज अनुभव तयार करतात
+- **हाताळतात** एकाच घटकावर वेगवेगळ्या लिसनर्ससह अनेक इव्हेंट्स
 
-> **NOTE:** इव्हेंट लिसनर्स तयार करण्याचे अनेक मार्ग आहेत हे अधोरेखित करणे योग्य आहे. तुम्ही अज्ञात फंक्शन्स वापरू शकता किंवा नामांकित फंक्शन्स तयार करू शकता. तुम्ही विविध शॉर्टकट्स वापरू शकता, जसे की `click` प्रॉपर्टी सेट करणे किंवा `addEventListener()` वापरणे. आपल्या व्यायामामध्ये आपण `addEventListener()` आणि अज्ञात फंक्शन्सवर लक्ष केंद्रित करणार आहोत, कारण वेब डेव्हलपर्स वापरत असलेली ही सर्वात सामान्य तंत्र आहे. हे सर्वात लवचिक देखील आहे, कारण `addEventListener()` सर्व इव्हेंट्ससाठी कार्य करते आणि इव्हेंटचे नाव पॅरामीटर म्हणून प्रदान केले जाऊ शकते.
+> **NOTE:** हे हायलाइट करणे योग्य आहे की इव्हेंट लिसनर्स तयार करण्याचे अनेक मार्ग आहेत. तुम्ही अज्ञात फंक्शन्स वापरू शकता किंवा नामांकित फंक्शन्स तयार करू शकता. तुम्ही विविध शॉर्टकट्स वापरू शकता, जसे की `click` प्रॉपर्टी सेट करणे किंवा `addEventListener()` वापरणे. आमच्या व्यायामामध्ये आम्ही `addEventListener()` आणि अज्ञात फंक्शन्सवर लक्ष केंद्रित करणार आहोत, कारण वेब डेव्हलपर्स वापरत असलेली ही सर्वात सामान्य तंत्र आहे. हे सर्वात लवचिक देखील आहे, कारण `addEventListener()` सर्व इव्हेंट्ससाठी कार्य करते आणि इव्हेंटचे नाव पॅरामीटर म्हणून प्रदान केले जाऊ शकते.
 
 ### सामान्य इव्हेंट्स
 
-वेब ब्राउझर तुम्ही ऐकण्यासाठी डझनभर वेगवेगळ्या इव्हेंट्स ऑफर करतात, परंतु बहुतेक इंटरॅक्टिव्ह अ‍ॅप्लिकेशन्स फक्त काही आवश्यक इव्हेंट्सवर अवलंबून असतात. या मुख्य इव्हेंट्स समजून घेणे तुम्हाला परिष्कृत वापरकर्ता इंटरॅक्शन तयार करण्याचा पाया देईल.
+वेब ब्राउझर तुम्हाला ऐकण्यासाठी डझनभर वेगवेगळ्या इव्हेंट्स ऑफर करतात, परंतु बहुतेक इंटरॅक्टिव्ह अॅप्लिकेशन्स फक्त काही आवश्यक इव्हेंट्सवर अवलंबून असतात. या मुख्य इव्हेंट्स समजून घेणे तुम्हाला परिष्कृत वापरकर्ता इंटरॅक्शन तयार करण्याचा पाया देईल.
 
-तुम्ही अ‍ॅप्लिकेशन तयार करताना ऐकण्यासाठी [डझनभर इव्हेंट्स](https://developer.mozilla.org/docs/Web/Events) उपलब्ध आहेत. मूलतः वापरकर्ता पृष्ठावर जे काही करतो ते एक इव्हेंट निर्माण करते, जे तुम्हाला हवे असलेले अनुभव सुनिश्चित करण्यासाठी खूप शक्ती देते. सुदैवाने, तुम्हाला सामान्यतः फक्त काही इव्हेंट्सची आवश्यकता असते. येथे काही सामान्य इव्हेंट्स आहेत (ज्यामध्ये आपण गेम तयार करताना वापरणार आहोत):
+तुम्ही अॅप्लिकेशन तयार करताना ऐकण्यासाठी [डझनभर इव्हेंट्स](https://developer.mozilla.org/docs/Web/Events) उपलब्ध आहेत. मूलत: वापरकर्ता पृष्ठावर जे काही करतो ते एक इव्हेंट निर्माण करते, ज्यामुळे तुम्हाला त्यांना हवे असलेले अनुभव मिळवून देण्यासाठी खूप ताकद मिळते. सुदैवाने, तुम्हाला सामान्यतः फक्त काही मोजक्या इव्हेंट्सची आवश्यकता असते. येथे काही सामान्य इव्हेंट्स आहेत (ज्यामध्ये दोन आम्ही आमचा गेम तयार करताना वापरणार आहोत):
 
 | इव्हेंट | वर्णन | सामान्य उपयोग |
-|--------|--------|---------------|
+|--------|-------|---------------|
 | `click` | वापरकर्त्याने काहीतरी क्लिक केले | बटण, लिंक, इंटरॅक्टिव्ह घटक |
 | `contextmenu` | वापरकर्त्याने उजव्या माउस बटणावर क्लिक केले | कस्टम राइट-क्लिक मेनू |
 | `select` | वापरकर्त्याने काही टेक्स्ट हायलाइट केले | टेक्स्ट एडिटिंग, कॉपी ऑपरेशन्स |
@@ -56,15 +56,15 @@ CO_OP_TRANSLATOR_METADATA:
 
 **या इव्हेंट प्रकार समजून घेणे:**
 - **ट्रिगर होते** जेव्हा वापरकर्ते तुमच्या पृष्ठावरील विशिष्ट घटकांशी संवाद साधतात
-- **तपशीलवार माहिती प्रदान करते** वापरकर्त्याच्या क्रियेबद्दल इव्हेंट ऑब्जेक्ट्सद्वारे
-- **तुम्हाला सक्षम करते** प्रतिसादात्मक, इंटरॅक्टिव्ह वेब अ‍ॅप्लिकेशन्स तयार करण्यासाठी
-- **वेगवेगळ्या ब्राउझर्स आणि डिव्हाइसवर** सातत्याने कार्य करते
+- **तपशीलवार माहिती प्रदान करते** वापरकर्त्याच्या कृतीबद्दल इव्हेंट ऑब्जेक्ट्सद्वारे
+- **तुम्हाला सक्षम करते** प्रतिसादात्मक, इंटरॅक्टिव्ह वेब अॅप्लिकेशन्स तयार करण्यासाठी
+- **सर्व ब्राउझर्स आणि डिव्हाइसवर कार्य करते** सातत्याने
 
 ## गेम तयार करणे
 
-आता तुम्हाला इव्हेंट्स कसे कार्य करतात हे समजले आहे, चला त्या ज्ञानाचा उपयोग करून काहीतरी उपयुक्त तयार करूया. आम्ही एक टायपिंग स्पीड गेम तयार करू जो इव्हेंट हँडलिंग प्रदर्शित करेल आणि तुम्हाला एक महत्त्वाचे डेव्हलपर कौशल्य विकसित करण्यात मदत करेल.
+आता तुम्हाला इव्हेंट्स कसे कार्य करतात हे समजले आहे, चला त्या ज्ञानाचा उपयोग करून काहीतरी उपयुक्त तयार करूया. आम्ही एक टाइपिंग स्पीड गेम तयार करू जो इव्हेंट हँडलिंग दाखवेल आणि तुम्हाला एक महत्त्वाचे डेव्हलपर कौशल्य विकसित करण्यात मदत करेल.
 
-आम्ही एक गेम तयार करणार आहोत ज्याद्वारे JavaScript मध्ये इव्हेंट्स कसे कार्य करतात हे एक्सप्लोर करता येईल. आमचा गेम खेळाडूच्या टायपिंग कौशल्याची चाचणी घेईल, जे सर्व डेव्हलपर्ससाठी एक अतिशय उपयुक्त कौशल्य आहे. एक मजेदार तथ्य: आज आपण वापरत असलेली QWERTY कीबोर्ड लेआउट प्रत्यक्षात 1870 च्या दशकात टाइपरायटर्ससाठी डिझाइन केली गेली होती - आणि चांगले टायपिंग कौशल्य आजही प्रोग्रामर्ससाठी तितकेच मौल्यवान आहे! गेमचा सामान्य प्रवाह असा असेल:
+आम्ही एक गेम तयार करणार आहोत ज्याद्वारे JavaScript मध्ये इव्हेंट्स कसे कार्य करतात हे एक्सप्लोर करू. आमचा गेम खेळाडूच्या टाइपिंग कौशल्याची चाचणी घेईल, जे सर्व डेव्हलपर्ससाठी सर्वात कमी कौतुक केलेले कौशल्य आहे. मजेदार तथ्य: आज आपण वापरत असलेली QWERTY कीबोर्ड लेआउट 1870 च्या दशकात टाइपराइटर्ससाठी डिझाइन केली गेली होती - आणि चांगले टाइपिंग कौशल्य आजही प्रोग्रामर्ससाठी तितकेच मौल्यवान आहे! गेमचा सामान्य प्रवाह असा दिसेल:
 
 ```mermaid
 flowchart TD
@@ -84,10 +84,10 @@ flowchart TD
 
 **आमचा गेम कसा कार्य करेल:**
 - **सुरू होतो** जेव्हा खेळाडू स्टार्ट बटण क्लिक करतो आणि एक रँडम कोट दाखवतो
-- **ट्रॅक करतो** खेळाडूचा टायपिंग प्रगती शब्दानुसार रिअल-टाइममध्ये
+- **ट्रॅक करतो** खेळाडूचा टाइपिंग प्रगती शब्दानुसार रिअल-टाइममध्ये
 - **हायलाइट करतो** सध्याचा शब्द खेळाडूचे लक्ष केंद्रित करण्यासाठी
-- **त्वरित व्हिज्युअल फीडबॅक प्रदान करतो** टायपिंग एरर्ससाठी
-- **गणना करतो** आणि कोट पूर्ण झाल्यावर एकूण वेळ दाखवतो
+- **तत्काळ व्हिज्युअल फीडबॅक प्रदान करतो** टाइपिंग त्रुटींसाठी
+- **एकूण वेळ मोजतो आणि दाखवतो** जेव्हा कोट पूर्ण होतो
 
 चला आपला गेम तयार करूया आणि इव्हेंट्सबद्दल शिकूया!
 
@@ -95,9 +95,9 @@ flowchart TD
 
 कोडिंग सुरू करण्यापूर्वी, चला व्यवस्थित होऊया! सुरुवातीपासून स्वच्छ फाइल स्ट्रक्चर असणे तुम्हाला नंतर डोकेदुखीपासून वाचवेल आणि तुमचा प्रोजेक्ट अधिक व्यावसायिक बनवेल. 😊
 
-आपण फक्त तीन फाइल्ससह गोष्टी सोप्या ठेवणार आहोत: `index.html` आपल्या पृष्ठ संरचनेसाठी, `script.js` आपल्या सर्व गेम लॉजिकसाठी आणि `style.css` सर्वकाही चांगले दिसण्यासाठी. हे वेबच्या बहुतेक भागांना शक्ती देणारे क्लासिक त्रिकूट आहे!
+आम्ही फक्त तीन फाइल्ससह गोष्टी सोप्या ठेवणार आहोत: `index.html` आमच्या पृष्ठ संरचनेसाठी, `script.js` आमच्या सर्व गेम लॉजिकसाठी आणि `style.css` सर्वकाही चांगले दिसण्यासाठी. ही क्लासिक तिकडी आहे जी वेबचा मोठा भाग चालवते!
 
-**कन्सोल किंवा टर्मिनल विंडो उघडून खालील कमांड जारी करून तुमच्या कामासाठी एक नवीन फोल्डर तयार करा:**
+**कन्सोल किंवा टर्मिनल विंडो उघडून खालील कमांड जारी करून तुमच्या कामासाठी नवीन फोल्डर तयार करा:**
 
 ```bash
 # Linux or macOS
@@ -108,9 +108,9 @@ md typing-game && cd typing-game
 ```
 
 **या कमांड्स काय करतात:**
-- **एक नवीन डिरेक्टरी तयार करते** ज्याचे नाव `typing-game` आहे तुमच्या प्रोजेक्ट फाइल्ससाठी
+- **नवीन डिरेक्टरी तयार करते** ज्याचे नाव `typing-game` आहे तुमच्या प्रोजेक्ट फाइल्ससाठी
 - **स्वतःच नव्याने तयार केलेल्या डिरेक्टरीमध्ये जाते**
-- **तुमच्या गेम डेव्हलपमेंटसाठी एक स्वच्छ कार्यक्षेत्र सेट करते**
+- **तुमच्या गेम डेव्हलपमेंटसाठी स्वच्छ कार्यक्षेत्र सेट करते**
 
 **Visual Studio Code उघडा:**
 
@@ -130,24 +130,24 @@ code .
 
 ## वापरकर्ता इंटरफेस तयार करा
 
-आता चला स्टेज तयार करूया जिथे आमच्या गेमची सर्व क्रिया होईल! याला स्पेसशिपसाठी कंट्रोल पॅनेल डिझाइन करणे असे समजा - आपल्याला खात्री करायची आहे की आमच्या खेळाडूंना आवश्यक असलेली प्रत्येक गोष्ट तिथेच आहे जिथे त्यांना अपेक्षित आहे.
+आता चला स्टेज तयार करूया जिथे आमच्या गेमची सर्व अॅक्शन होईल! याला स्पेसशिपसाठी कंट्रोल पॅनेल डिझाइन करणे असे समजा - आपल्याला खात्री करायची आहे की आमच्या खेळाडूंना आवश्यक असलेली प्रत्येक गोष्ट तिथेच आहे जिथे त्यांना अपेक्षित आहे.
 
-चला आपल्या गेमला प्रत्यक्षात काय आवश्यक आहे ते शोधूया. जर तुम्ही टायपिंग गेम खेळत असाल, तर तुम्हाला स्क्रीनवर काय पाहायचे आहे? येथे आपल्याला काय आवश्यक आहे:
+चला पाहूया की आमच्या गेमला प्रत्यक्षात काय आवश्यक आहे. तुम्ही टाइपिंग गेम खेळत असाल तर तुम्हाला स्क्रीनवर काय पाहायचे आहे? येथे आपल्याला काय आवश्यक आहे:
 
 | UI घटक | उद्देश | HTML घटक |
 |---------|--------|----------|
 | कोट डिस्प्ले | टाइप करण्यासाठी टेक्स्ट दाखवतो | `<p>` `id="quote"` सह |
 | मेसेज एरिया | स्टेटस आणि यशाचे संदेश दाखवतो | `<p>` `id="message"` सह |
-| टेक्स्ट इनपुट | जिथे खेळाडू कोट टाइप करतो | `<input>` `id="typed-value"` सह |
+| टेक्स्ट इनपुट | जिथे खेळाडू कोट टाइप करतात | `<input>` `id="typed-value"` सह |
 | स्टार्ट बटण | गेम सुरू करतो | `<button>` `id="start"` सह |
 
 **UI स्ट्रक्चर समजून घेणे:**
 - **सामग्री व्यवस्थित करते** वरून खाली लॉजिकल पद्धतीने
 - **युनिक IDs असाइन करते** घटकांना JavaScript टार्गेटिंगसाठी
 - **स्पष्ट व्हिज्युअल हायरार्की प्रदान करते** चांगल्या वापरकर्ता अनुभवासाठी
-- **समाविष्ट करते** अ‍ॅक्सेसिबिलिटीसाठी सेमॅंटिक HTML घटक
+- **सेमॅंटिक HTML घटक समाविष्ट करते** ऍक्सेसिबिलिटीसाठी
 
-त्यापैकी प्रत्येकाला IDs आवश्यक असतील जेणेकरून आपण त्यांना आपल्या JavaScript मध्ये काम करू शकू. आम्ही तयार करणार असलेल्या CSS आणि JavaScript फाइल्ससाठी संदर्भ देखील जोडू.
+त्यापैकी प्रत्येकाला IDs आवश्यक असतील जेणेकरून आम्ही आमच्या JavaScript मध्ये त्यांच्याशी काम करू शकू. आम्ही तयार करणार असलेल्या CSS आणि JavaScript फाइल्ससाठी संदर्भ देखील जोडू.
 
 `index.html` नावाची नवीन फाइल तयार करा. खालील HTML जोडा:
 
@@ -172,25 +172,25 @@ code .
 </html>
 ```
 
-**या HTML स्ट्रक्चरने काय साध्य केले आहे ते समजून घेणे:**
+**या HTML स्ट्रक्चरने काय साध्य केले आहे याचे विश्लेषण:**
 - **CSS स्टाइलशीट लिंक करते** `<head>` मध्ये स्टाइलिंगसाठी
 - **स्पष्ट हेडिंग आणि सूचना तयार करते** वापरकर्त्यांसाठी
-- **स्पेसिफिक IDs असलेल्या प्लेसहोल्डर पॅराग्राफ्स तयार करते** डायनॅमिक कंटेंटसाठी
-- **एक इनपुट फील्ड समाविष्ट करते** अ‍ॅक्सेसिबिलिटी अ‍ॅट्रिब्युट्ससह
+- **स्पेसिफिक IDs सह प्लेसहोल्डर पॅराग्राफ्स स्थापन करते** डायनॅमिक सामग्रीसाठी
+- **एक इनपुट फील्ड समाविष्ट करते** ऍक्सेसिबिलिटी अॅट्रिब्युट्ससह
 - **स्टार्ट बटण प्रदान करते** गेम ट्रिगर करण्यासाठी
 - **JavaScript फाइल लोड करते** शेवटी ऑप्टिमल परफॉर्मन्ससाठी
 
-### अ‍ॅप्लिकेशन लॉन्च करा
+### अॅप्लिकेशन लॉन्च करा
 
-डेव्हलपमेंट दरम्यान तुमचे अ‍ॅप्लिकेशन वारंवार टेस्ट करणे तुम्हाला लवकर समस्या पकडण्यास आणि तुमची प्रगती रिअल-टाइममध्ये पाहण्यास मदत करते. Live Server एक अमूल्य टूल आहे जे तुम्ही बदल सेव्ह करता तेव्हा तुमचा ब्राउझर आपोआप रिफ्रेश करते, ज्यामुळे डेव्हलपमेंट अधिक कार्यक्षम होते.
+डेव्हलपमेंट दरम्यान तुमचे अॅप्लिकेशन वारंवार चाचणी करणे तुम्हाला लवकर समस्या शोधण्यात आणि तुमची प्रगती रिअल-टाइममध्ये पाहण्यात मदत करते. Live Server हा एक अमूल्य टूल आहे जो तुम्ही बदल सेव्ह केल्यावर तुमचा ब्राउझर आपोआप रीफ्रेश करतो, ज्यामुळे डेव्हलपमेंट अधिक कार्यक्षम होते.
 
-नेहमीच पुनरावृत्तीने डेव्हलप करणे चांगले असते जेणेकरून गोष्टी कशा दिसतात ते पाहता येईल. चला आपले अ‍ॅप्लिकेशन लॉन्च करूया. Visual Studio Code साठी [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) नावाचा एक उत्कृष्ट एक्सटेंशन आहे जो तुमचे अ‍ॅप्लिकेशन लोकल होस्ट करेल आणि तुम्ही प्रत्येक वेळी सेव्ह केल्यावर ब्राउझर रिफ्रेश करेल.
+नेहमीच पुनरावृत्तीने डेव्हलप करणे चांगले असते जेणेकरून गोष्टी कशा दिसतात ते पाहता येईल. चला आपले अॅप्लिकेशन लॉन्च करूया. Visual Studio Code साठी [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) नावाचा एक अद्भुत विस्तार आहे जो तुमचे अॅप्लिकेशन स्थानिक पातळीवर होस्ट करेल आणि तुम्ही प्रत्येक वेळी फाइल सेव्ह केल्यावर ब्राउझर रीफ्रेश करेल.
 
-**[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) इंस्टॉल करा, लिंक फॉलो करून आणि इंस्टॉलवर क्लिक करून:**
+**[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) इंस्टॉल करा, लिंक फॉलो करून आणि इंस्टॉल क्लिक करून:**
 
 **इंस्टॉलेशन दरम्यान काय होते:**
 - **तुमच्या ब्राउझरला Visual Studio Code उघडण्यास प्रवृत्त करते**
-- **तुम्हाला एक्सटेंशन इंस्टॉलेशन प्रक्रियेद्वारे मार्गदर्शन करते**
+- **तुम्हाला विस्तार इंस्टॉल करण्याच्या प्रक्रियेत मार्गदर्शन करते**
 - **Visual Studio Code पुन्हा सुरू करणे आवश्यक असू शकते** सेटअप पूर्ण करण्यासाठी
 
 **इंस्टॉल झाल्यावर, Visual Studio Code मध्ये, Ctrl-Shift-P (किंवा Cmd-Shift-P) क्लिक करा कमांड पॅलेट उघडण्यासाठी:**
@@ -198,14 +198,14 @@ code .
 **कमांड पॅलेट समजून घेणे:**
 - **Visual Studio Code च्या सर्व कमांड्ससाठी जलद प्रवेश प्रदान करते**
 - **तुम्ही टाइप करता तेव्हा कमांड्स शोधते**
-- **फास्ट डेव्हलपमेंटसाठी कीबोर्ड शॉर्टकट्स ऑफर करते**
+- **जलद डेव्हलपमेंटसाठी कीबोर्ड शॉर्टकट्स ऑफर करते**
 
 **"Live Server: Open with Live Server" टाइप करा:**
 
 **Live Server काय करते:**
-- **तुमच्या प्रोजेक्टसाठी लोकल डेव्हलपमेंट सर्व्हर सुरू करते**
-- **तुम्ही फाइल्स सेव्ह करता तेव्हा ब्राउझर आपोआप रिफ्रेश करते**
-- **तुमच्या फाइल्स लोकल URL वर सर्व्ह करते** (सामान्यतः `localhost:5500`)
+- **तुमच्या प्रोजेक्टसाठी स्थानिक डेव्हलपमेंट सर्व्हर सुरू करते**
+- **तुम्ही फाइल्स सेव्ह करता तेव्हा ब्राउझर आपोआप रीफ्रेश करते**
+- **तुमच्या फाइल्सला स्थानिक URL वर सर्व्ह करते** (सामान्यतः `localhost:5500`)
 
 **ब्राउझर उघडा आणि `https://localhost:5500` वर जा:**
 
@@ -213,11 +213,9 @@ code .
 
 ## CSS जोडा
 
-आता गोष्टी चांगल्या दिसू द्या! व्हिज्युअल फीडबॅक संगणकीय इंटरफेससाठी सुरुवातीच्या काळापासून महत्त्वाचा आहे. 1980 च्या दशकात, संशोधकांनी शोधले की त्वरित व्हिज्युअल फीडबॅक वापरकर्त्याची कार्यक्षमता लक्षणीयरीत्या सुधारतो आणि चुका कमी करतो. हेच आपण तयार करणार आहोत.
+आता गोष्टी चांगल्या दिसू द्या! व्हिज्युअल फीडबॅक हे संगणकीय इंटरफेससाठी सुरुवातीच्या काळापासून महत्त्वाचे आहे. 1980 च्या दशकात, संशोधकांनी शोधले की तात्काळ व्हिज्युअल फीडबॅक वापरकर्त्याची कार्यक्षमता लक्षणीयरीत्या सुधारते आणि त्रुटी कमी करते. हेच आपण तयार करणार आहोत.
 
-आमच्या गेममध्ये काय चालले आहे हे स्पष्ट असणे आवश्यक आहे. खेळाडूंनी त्वरित ओळखले पाहिजे की त्यांना कोणता शब्द टाइप करायचा आहे आणि त्यांनी चूक केली तर त्यांना लगेच दिसले पाहिजे. चला काही साधे पण प्रभावी स्टाइलिंग तयार करूया:
-
-`style.css` नाव
+आपल्या गेमला काय चालले आहे हे स्पष्टपणे दाखवणे आवश्यक आहे. खेळाडूंनी त्वरित जाणले पाहिजे की त्यांना कोणता शब्द टाइप करायचा आहे आणि त्यांनी चूक केली तर त्यांना लगेच
 | कोट्सची यादी | खेळासाठी सर्व शक्य कोट्स साठवा | `['Quote 1', 'Quote 2', ...]` |
 | शब्दांची यादी | सध्याचा कोट वेगवेगळ्या शब्दांमध्ये विभागा | `['When', 'you', 'have', ...]` |
 | शब्द क्रमांक | खेळाडू कोणता शब्द टाइप करत आहे ते ट्रॅक करा | `0, 1, 2, 3...` |
@@ -265,7 +263,7 @@ const typedValueElement = document.getElementById('typed-value');
 > 💡 **प्रो टिप**: आपण कोडमध्ये कधीही घटक पुनर्प्राप्त करू शकतो `document.getElementById()` वापरून. कारण आपण या घटकांचा नियमितपणे संदर्भ घेणार आहोत, आम्ही स्ट्रिंग लिटरल्ससह टायपो टाळणार आहोत आणि कॉन्स्टंट्स वापरणार आहोत. [Vue.js](https://vuejs.org/) किंवा [React](https://reactjs.org/) सारख्या फ्रेमवर्क्स आपल्याला कोड केंद्रीकरण अधिक चांगल्या प्रकारे व्यवस्थापित करण्यात मदत करू शकतात.
 >
 **ही पद्धत इतकी प्रभावी का आहे:**
-- **स्पेलिंग त्रुटी टाळते** जेव्हा घटक अनेक वेळा संदर्भित केले जातात
+- **स्पेलिंग त्रुटी टाळते** जेव्हा घटकांचा अनेक वेळा संदर्भ घेतला जातो
 - **कोड वाचनीयता सुधारते** वर्णनात्मक कॉन्स्टंट नावांसह
 - **चांगले IDE समर्थन सक्षम करते** ऑटो-कंप्लीट आणि त्रुटी तपासणीसह
 - **रिफॅक्टरिंग सुलभ करते** जर घटक IDs नंतर बदलले
@@ -274,15 +272,15 @@ const typedValueElement = document.getElementById('typed-value');
 
 [![व्हेरिएबल प्रकार](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "व्हेरिएबल प्रकार")
 
-> 🎥 व्हेरिएबल्सबद्दल व्हिडिओसाठी वरील प्रतिमेवर क्लिक करा.
+> 🎥 व्हेरिएबल्सबद्दल व्हिडिओसाठी वरील प्रतिमा क्लिक करा.
 
 ### सुरुवात करण्याचे लॉजिक जोडा
 
-इथेच सर्वकाही एकत्र येते! 🚀 तुम्ही तुमचा पहिला खरा इव्हेंट लिसनर लिहिणार आहात, आणि "स्टार्ट" बटणावर क्लिक केल्यावर तुमचा कोड प्रतिसाद देताना पाहण्यात काहीतरी समाधानकारक आहे.
+इथेच सर्वकाही एकत्र येते! 🚀 तुम्ही तुमचा पहिला खरा इव्हेंट लिसनर लिहिणार आहात, आणि "स्टार्ट" बटण क्लिक केल्यावर तुमचा कोड प्रतिसाद देताना पाहण्यात काहीतरी समाधानकारक आहे.
 
-कल्पना करा: कुठेतरी, एक खेळाडू "स्टार्ट" बटण क्लिक करणार आहे, आणि तुमचा कोड त्यासाठी तयार असला पाहिजे. आम्हाला कल्पना नाही की ते कधी क्लिक करतील - लगेच, किंवा कॉफी घेतल्यानंतर - पण जेव्हा ते करतील, तुमचा खेळ सुरू होईल.
+कल्पना करा: कुठेतरी एक खेळाडू "स्टार्ट" बटण क्लिक करणार आहे, आणि तुमचा कोड त्यासाठी तयार असायला हवा. आम्हाला कल्पना नाही की ते कधी क्लिक करतील - त्वरित, किंवा कॉफी घेतल्यानंतर - पण जेव्हा ते करतील, तुमचा खेळ सुरू होईल.
 
-जेव्हा वापरकर्ता `start` क्लिक करतो, तेव्हा आपल्याला एक कोट निवडायचा आहे, वापरकर्ता इंटरफेस सेटअप करायचा आहे, आणि सध्याच्या शब्दासाठी आणि वेळेसाठी ट्रॅकिंग सेटअप करायचे आहे. खाली तुम्हाला आवश्यक असलेला JavaScript दिला आहे; आम्ही स्क्रिप्ट ब्लॉकनंतर त्यावर चर्चा करतो.
+जेव्हा वापरकर्ता `start` क्लिक करतो, तेव्हा आपल्याला एक कोट निवडायचा आहे, यूजर इंटरफेस सेटअप करायचा आहे, आणि सध्याच्या शब्दासाठी आणि वेळेसाठी ट्रॅकिंग सेटअप करायचे आहे. खाली तुम्हाला आवश्यक JavaScript दिले आहे; आम्ही स्क्रिप्ट ब्लॉकनंतर त्यावर चर्चा करतो.
 
 ```javascript
 // at the end of script.js
@@ -322,30 +320,30 @@ document.getElementById('start').addEventListener('click', () => {
 **📊 शब्द ट्रॅकिंग सेटअप:**
 - **निवडतो** एक रँडम कोट `Math.floor()` आणि `Math.random()` वापरून विविधतेसाठी
 - **कोटला** वेगवेगळ्या शब्दांच्या यादीत बदलतो `split(' ')` वापरून
-- **`wordIndex` रीसेट करतो** कारण खेळाडू पहिल्या शब्दापासून सुरुवात करतात
-- **गेम स्टेट तयार करतो** नवीन राउंडसाठी
+- **रीसेट करतो** `wordIndex` 0 वर कारण खेळाडू पहिल्या शब्दापासून सुरुवात करतो
+- **तयार करतो** खेळाची स्थिती एका नवीन राउंडसाठी
 
 **🎨 UI सेटअप आणि डिस्प्ले:**
-- **निर्मिती करतो** `<span>` घटकांची यादी, प्रत्येक शब्दाला वेगळ्या स्टाइलसाठी लपेटतो
-- **स्पॅन घटकांना** एकाच स्ट्रिंगमध्ये जोडतो कार्यक्षम DOM अपडेटसाठी
-- **पहिल्या शब्दाला हायलाइट करतो** `highlight` CSS क्लास जोडून
+- **निर्मिती करतो** `<span>` घटकांची यादी, प्रत्येक शब्दाला वेगळ्या शैलीसाठी वेढून
+- **जोडतो** स्पॅन घटक एका सिंगल स्ट्रिंगमध्ये कार्यक्षम DOM अपडेटसाठी
+- **हायलाइट करतो** पहिला शब्द `highlight` CSS क्लास जोडून
 - **पूर्वीचे गेम मेसेजेस साफ करतो** स्वच्छ सुरुवातीसाठी
 
 **⌨️ टेक्स्टबॉक्स तयारी:**
-- **इनपुट फील्डमधील** विद्यमान टेक्स्ट साफ करतो
-- **टेक्स्टबॉक्सवर फोकस सेट करतो** जेणेकरून खेळाडू लगेच टाइपिंग सुरू करू शकतील
-- **नवीन गेम सत्रासाठी इनपुट एरिया तयार करतो**
+- **साफ करतो** इनपुट फील्डमधील कोणतेही विद्यमान टेक्स्ट
+- **फोकस सेट करतो** टेक्स्टबॉक्सवर जेणेकरून खेळाडू त्वरित टाइपिंग सुरू करू शकतील
+- **इनपुट एरिया तयार करतो** नवीन गेम सत्रासाठी
 
 **⏱️ टाइमर इनिशियलायझेशन:**
 - **सध्याचा टाइमस्टॅम्प कॅप्चर करतो** `new Date().getTime()` वापरून
 - **टायपिंग स्पीड आणि पूर्ण वेळेची अचूक गणना सक्षम करतो**
 - **गेम सत्रासाठी परफॉर्मन्स ट्रॅकिंग सुरू करतो**
 
-### टाइपिंग लॉजिक जोडा
+### टायपिंग लॉजिक जोडा
 
-इथे आपण आपल्या खेळाचा मुख्य भाग हाताळणार आहोत! सुरुवातीला हे जास्त वाटले तरी काळजी करू नका - आपण प्रत्येक भागातून जाऊ आणि शेवटी तुम्हाला हे सर्व कसे लॉजिकल आहे ते समजेल.
+इथे आपण आपल्या खेळाचा मुख्य भाग हाताळतो! सुरुवातीला हे थोडे जास्त वाटू शकते, पण आम्ही प्रत्येक भाग समजावून सांगू, आणि शेवटी तुम्हाला हे किती लॉजिकल आहे ते समजेल.
 
-आपण जे तयार करत आहोत ते खूप प्रगत आहे: प्रत्येक वेळी कोणी अक्षर टाइप करते, आपला कोड त्याने काय टाइप केले ते तपासणार आहे, त्याला फीडबॅक देणार आहे, आणि पुढे काय करायचे ते ठरवणार आहे. हे 1970 च्या दशकातील WordStar सारख्या सुरुवातीच्या वर्ड प्रोसेसरसारखे आहे जे टायपिस्टला रिअल-टाइम फीडबॅक देत होते.
+आपण जे तयार करत आहोत ते खूप प्रगत आहे: प्रत्येक वेळी कोणी अक्षर टाइप करते, आपला कोड तपासणार आहे की त्यांनी काय टाइप केले, त्यांना फीडबॅक देणार आहे, आणि पुढे काय करायचे ते ठरवणार आहे. हे 1970 च्या दशकातील WordStar सारख्या सुरुवातीच्या वर्ड प्रोसेसरसारखे आहे जे टायपिस्टला रिअल-टाइम फीडबॅक देत होते.
 
 ```javascript
 // at the end of script.js
@@ -384,9 +382,9 @@ typedValueElement.addEventListener('input', () => {
 });
 ```
 
-**टाइपिंग लॉजिक फ्लो समजून घेणे:**
+**टायपिंग लॉजिक फ्लो समजून घेणे:**
 
-ही फंक्शन सर्वात विशिष्ट परिस्थितीपासून सर्वसामान्य परिस्थितीपर्यंत अटी तपासते. प्रत्येक परिस्थितीचे विश्लेषण करूया:
+ही फंक्शन सर्वात विशिष्ट ते सर्वसामान्य अटी तपासते. प्रत्येक परिस्थितीचे विश्लेषण करूया:
 
 ```mermaid
 flowchart TD
@@ -402,101 +400,129 @@ flowchart TD
 
 **🏁 कोट पूर्ण (परिस्थिती 1):**
 - **तपासते** की टाइप केलेले मूल्य सध्याच्या शब्दाशी जुळते आणि आपण शेवटच्या शब्दावर आहोत
-- **लागलेला वेळ मोजते** सुरुवातीच्या वेळेपासून सध्याच्या वेळेपर्यंत वजा करून
-- **मिलीसेकंद सेकंदात बदलते** 1,000 ने भागून
-- **पूर्ण वेळेसह अभिनंदन संदेश दाखवते**
+- **गणना करते** लागलेला वेळ सुरुवातीच्या वेळेपासून सध्याच्या वेळेपर्यंत वजा करून
+- **मिलीसेकंद सेकंदात बदलते** 1,000 ने भाग देऊन
+- **प्रदर्शित करते** अभिनंदन संदेश पूर्ण वेळासह
 
 **✅ शब्द पूर्ण (परिस्थिती 2):**
 - **शब्द पूर्ण होणे ओळखते** जेव्हा इनपुट स्पेसने संपते
 - **तपासते** की ट्रिम केलेले इनपुट सध्याच्या शब्दाशी अचूक जुळते
 - **इनपुट फील्ड साफ करते** पुढील शब्दासाठी
-- **पुढील शब्दावर जाते** `wordIndex` वाढवून
-- **व्हिज्युअल हायलाइटिंग अपडेट करते** सर्व क्लासेस काढून आणि नवीन शब्द हायलाइट करून
+- **पुढे जाते** पुढील शब्दावर `wordIndex` वाढवून
+- **दृश्य हायलाइटिंग अपडेट करते** सर्व क्लासेस काढून आणि नवीन शब्द हायलाइट करून
 
-**📝 टाइपिंग चालू आहे (परिस्थिती 3):**
+**📝 टायपिंग चालू आहे (परिस्थिती 3):**
 - **तपासते** की सध्याचा शब्द आतापर्यंत टाइप केलेल्या गोष्टीने सुरू होतो
-- **कोणतेही एरर स्टाइलिंग काढते** दाखवण्यासाठी की इनपुट योग्य आहे
-- **टाइपिंग सुरू ठेवण्यास परवानगी देते** कोणत्याही व्यत्ययाशिवाय
+- **कोणतेही त्रुटी स्टाइलिंग काढते** दाखवण्यासाठी की इनपुट योग्य आहे
+- **टायपिंग सुरू ठेवण्यास परवानगी देते** कोणत्याही व्यत्ययाशिवाय
 
-**❌ एरर स्टेट (परिस्थिती 4):**
+**❌ त्रुटी स्थिती (परिस्थिती 4):**
 - **ट्रिगर करते** जेव्हा टाइप केलेला मजकूर अपेक्षित शब्दाच्या सुरुवातीशी जुळत नाही
-- **एरर CSS क्लास लागू करते** त्वरित व्हिज्युअल फीडबॅक देण्यासाठी
-- **खेळाडूंना त्रुटी पटकन ओळखण्यास आणि सुधारण्यास मदत करते**
+- **त्रुटी CSS क्लास लागू करते** त्वरित दृश्य फीडबॅक प्रदान करण्यासाठी
+- **खेळाडूंना मदत करते** लवकर ओळखण्यासाठी आणि चुका सुधारण्यासाठी
 
-## तुमचे अॅप्लिकेशन टेस्ट करा
+## तुमचे अॅप्लिकेशन तपासा
 
-तुम्ही काय साध्य केले आहे ते पहा! 🎉 तुम्ही इव्हेंट-ड्रिव्हन प्रोग्रामिंग वापरून स्क्रॅचपासून एक खरा, कार्यरत टाइपिंग गेम तयार केला आहे. त्याचा आनंद घ्या - हे काही छोटे यश नाही!
+तुम्ही काय साध्य केले आहे ते पहा! 🎉 तुम्ही इव्हेंट-ड्रिव्हन प्रोग्रामिंग वापरून स्क्रॅचपासून एक वास्तविक, कार्यरत टायपिंग गेम तयार केला आहे. याचा आनंद घ्या - हे काही छोटे यश नाही!
 
-आता टेस्टिंगचा टप्पा आला आहे! हे अपेक्षेप्रमाणे कार्य करेल का? आपण काहीतरी चुकवले आहे का? गोष्ट अशी आहे: जर काहीतरी लगेच परिपूर्णपणे कार्य करत नसेल, तर ते पूर्णपणे सामान्य आहे. अनुभवी विकसक देखील नियमितपणे त्यांच्या कोडमध्ये बग शोधतात. हे विकास प्रक्रियेचा भाग आहे!
+आता चाचणी टप्पा सुरू होतो! हे अपेक्षेप्रमाणे कार्य करेल का? आपण काहीतरी चुकवले आहे का? एक गोष्ट लक्षात ठेवा: जर काहीतरी लगेच परिपूर्णपणे कार्य करत नसेल, तर ते पूर्णपणे सामान्य आहे. अनुभवी विकसक देखील नियमितपणे त्यांच्या कोडमध्ये बग शोधतात. हे विकास प्रक्रियेचा एक भाग आहे!
 
-`start` क्लिक करा, आणि टाइपिंग सुरू करा! हे थोडेसे आपण पाहिलेल्या अॅनिमेशनसारखे दिसले पाहिजे.
+`start` वर क्लिक करा, आणि टाइपिंग सुरू करा! हे थोडेसे आपण पाहिलेल्या अॅनिमेशनसारखे दिसायला हवे.
 
-![खेळ अॅक्शनमध्ये अॅनिमेशन](../../../../4-typing-game/images/demo.gif)
+![खेळ चालू असलेला अॅनिमेशन](../../../../4-typing-game/images/demo.gif)
 
-**तुमच्या अॅप्लिकेशनमध्ये काय टेस्ट करायचे:**
+**तुमच्या अॅप्लिकेशनमध्ये काय तपासायचे:**
 - **तपासते** की स्टार्ट क्लिक केल्यावर रँडम कोट दिसतो
-- **पुष्टी करते** की टाइपिंग सध्याचा शब्द योग्य प्रकारे हायलाइट करते
-- **तपासते** की चुकीच्या टाइपिंगसाठी एरर स्टाइलिंग दिसते
+- **पुष्टी करते** की टाइप करताना सध्याचा शब्द योग्य प्रकारे हायलाइट होतो
+- **तपासते** की चुकीच्या टायपिंगसाठी त्रुटी स्टाइलिंग दिसते
 - **पुष्टी करते** की शब्द पूर्ण झाल्यावर हायलाइट योग्य प्रकारे पुढे जातो
 - **तपासते** की कोट पूर्ण केल्यावर पूर्ण वेळेसह संदेश दिसतो
 
 **सामान्य डिबगिंग टिप्स:**
-- **ब्राउझर कन्सोल तपासा** (F12) JavaScript त्रुटींसाठी
-- **सर्व फाइल नावे अचूक जुळत असल्याची खात्री करा** (केस-सेंसिटिव्ह)
-- **लाइव्ह सर्व्हर चालू असल्याची खात्री करा** आणि योग्य प्रकारे रिफ्रेश होत आहे
-- **वेगवेगळे कोट्स टेस्ट करा** रँडम निवड कार्य करते याची पुष्टी करण्यासाठी
+- **तपासा** ब्राउझर कन्सोल (F12) मध्ये JavaScript त्रुटींसाठी
+- **पुष्टी करा** की सर्व फाइल नावे अचूक जुळतात (केस-संवेदनशील)
+- **पक्का करा** की Live Server चालू आहे आणि योग्य प्रकारे रिफ्रेश होत आहे
+- **वेगवेगळे कोट्स तपासा** रँडम निवड कार्य करते याची पुष्टी करण्यासाठी
 
 ---
 
 ## GitHub Copilot Agent Challenge 🎮
 
-Agent मोड वापरून खालील चॅलेंज पूर्ण करा:
+Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** खेळाडूच्या कामगिरीवर आधारित गेम समायोजित करणारी अडचण प्रणाली अंमलात आणून टाइपिंग गेम विस्तृत करा. हे चॅलेंज तुम्हाला प्रगत इव्हेंट हँडलिंग, डेटा विश्लेषण, आणि डायनॅमिक UI अपडेट्सचा सराव करण्यास मदत करेल.
+**वर्णन:** खेळाडूच्या कामगिरीवर आधारित गेम समायोजित करणारी अडचण प्रणाली अंमलात आणून टायपिंग गेम विस्तृत करा. हे आव्हान तुम्हाला प्रगत इव्हेंट हँडलिंग, डेटा विश्लेषण, आणि डायनॅमिक UI अपडेट्सचा सराव करण्यास मदत करेल.
 
-**प्रॉम्प्ट:** टाइपिंग गेमसाठी अडचण समायोजन प्रणाली तयार करा जी:
-1. खेळाडूचा टाइपिंग स्पीड (शब्द प्रति मिनिट) आणि अचूकता टक्केवारी ट्रॅक करते
-2. आपोआप तीन अडचण पातळ्यांमध्ये समायोजित करते: सोपे (सोपे कोट्स), मध्यम (सध्याचे कोट्स), कठीण (अवघड कोट्स, विरामचिन्हांसह)
-3. सध्याची अडचण पातळी आणि खेळाडूची आकडेवारी UI वर दाखवते
-4. सलग 3 चांगल्या कामगिरीनंतर अडचण वाढवणारा स्ट्रीक काउंटर अंमलात आणते
-5. अडचण बदल सूचित करण्यासाठी व्हिज्युअल फीडबॅक (रंग, अॅनिमेशन) जोडते
+**प्रॉम्प्ट:** टायपिंग गेमसाठी अडचण समायोजन प्रणाली तयार करा जी:
+1. खेळाडूचा टायपिंग वेग (शब्द प्रति मिनिट) आणि अचूकता टक्केवारी ट्रॅक करते
+2. आपोआप तीन अडचण पातळ्यांमध्ये समायोजित होते: सोपे (सोपे कोट्स), मध्यम (सध्याचे कोट्स), कठीण (विरामचिन्हांसह जटिल कोट्स)
+3. सध्याची अडचण पातळी आणि खेळाडूची आकडेवारी UI वर प्रदर्शित करते
+4. 3 सलग चांगल्या कामगिरीनंतर अडचण वाढवणारा स्ट्रीक काउंटर अंमलात आणते
+5. अडचण बदल सूचित करण्यासाठी दृश्य फीडबॅक (रंग, अॅनिमेशन) जोडते
 
-आवश्यक HTML घटक, CSS शैली, आणि JavaScript फंक्शन्स जोडा ही सुविधा अंमलात आणण्यासाठी. योग्य एरर हँडलिंग समाविष्ट करा आणि गेम योग्य ARIA लेबल्ससह प्रवेशयोग्य राहील याची खात्री करा.
+आवश्यक HTML घटक, CSS शैली, आणि JavaScript फंक्शन्स जोडा जेणेकरून ही सुविधा अंमलात आणता येईल. योग्य त्रुटी हाताळणी समाविष्ट करा आणि खेळ योग्य प्रकारे प्रवेशयोग्य राहील याची खात्री करा.
 
-[Agent मोडबद्दल अधिक जाणून घ्या](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
+[agent mode बद्दल अधिक जाणून घ्या](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) येथे.
 
-## 🚀 चॅलेंज
+## 🚀 आव्हान
 
-तुमचा टाइपिंग गेम पुढील स्तरावर नेण्यासाठी तयार आहात? इव्हेंट हँडलिंग आणि DOM मॅनिप्युलेशनची सखोल समज मिळवण्यासाठी या प्रगत वैशिष्ट्यांची अंमलबजावणी करण्याचा प्रयत्न करा:
+तुमचा टायपिंग गेम पुढील स्तरावर नेण्यासाठी तयार आहात? इव्हेंट हँडलिंग आणि DOM मॅनिप्युलेशनची सखोल समज मिळवण्यासाठी या प्रगत वैशिष्ट्ये अंमलात आणण्याचा प्रयत्न करा:
 
-**अधिक फंक्शनॅलिटी जोडा:**
+**अधिक कार्यक्षमता जोडा:**
 
-| वैशिष्ट्य | वर्णन | सराव कौशल्ये |
-|-----------|--------|--------------|
-| **इनपुट नियंत्रण** | पूर्ण झाल्यावर `input` इव्हेंट लिसनर डिसेबल करा, आणि बटण क्लिक केल्यावर पुन्हा सक्षम करा | इव्हेंट व्यवस्थापन आणि स्टेट नियंत्रण |
-| **UI स्टेट व्यवस्थापन** | खेळाडू कोट पूर्ण केल्यावर टेक्स्टबॉक्स डिसेबल करा | DOM प्रॉपर्टी मॅनिप्युलेशन |
-| **मोडल डायलॉग** | यशाचा संदेश दाखवण्यासाठी मोडल डायलॉग बॉक्स दाखवा | प्रगत UI पॅटर्न आणि प्रवेशयोग्यता |
-| **हाय स्कोअर सिस्टम** | `localStorage` वापरून हाय स्कोअर्स साठवा | ब्राउझर स्टोरेज APIs आणि डेटा टिकवणे |
+| वैशिष्ट्य | वर्णन | तुम्ही सराव कराल अशा कौशल्य |
+|-----------|-------|-----------------------------|
+| **इनपुट नियंत्रण** | पूर्ण झाल्यावर `input` इव्हेंट लिसनर अक्षम करा, आणि बटण क्लिक केल्यावर पुन्हा सक्षम करा | इव्हेंट व्यवस्थापन आणि स्थिती नियंत्रण |
+| **UI स्थिती व्यवस्थापन** | खेळाडू कोट पूर्ण केल्यावर टेक्स्टबॉक्स अक्षम करा | DOM प्रॉपर्टी मॅनिप्युलेशन |
+| **मोडल डायलॉग** | यशाचा संदेश असलेला मोडल डायलॉग बॉक्स प्रदर्शित करा | प्रगत UI पॅटर्न आणि प्रवेशयोग्यता |
+| **हाय स्कोअर प्रणाली** | `localStorage` वापरून उच्च स्कोअर साठवा | ब्राउझर स्टोरेज APIs आणि डेटा टिकवणे |
 
 **अंमलबजावणी टिप्स:**
 - **शोधा** `localStorage.setItem()` आणि `localStorage.getItem()` टिकाऊ स्टोरेजसाठी
-- **सराव करा** डायनॅमिकली इव्हेंट लिसनर्स जोडणे आणि काढणे
+- **सराव करा** इव्हेंट लिसनर्स डायनॅमिकली जोडणे आणि काढणे
 - **अन्वेषण करा** HTML डायलॉग घटक किंवा CSS मोडल पॅटर्न
-- **विचार करा** फॉर्म कंट्रोल्स डिसेबल आणि सक्षम करताना प्रवेशयोग्यतेबद्दल
+- **विचार करा** फॉर्म कंट्रोल्स अक्षम आणि सक्षम करताना प्रवेशयोग्यता
 
 ## पोस्ट-लेक्चर क्विझ
 
 [पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/22)
 
-## पुनरावलोकन आणि स्व-अभ्यास
+---
+
+## 🚀 तुमचा टायपिंग गेम मास्टरी टाइमलाइन
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] तुमचा टायपिंग गेम वेगवेगळ्या कोट्ससह तपासा की तो सुरळीत कार्य करतो
+- [ ] CSS स्टाइलिंगसह प्रयोग करा - हायलाइट आणि त्रुटी रंग बदलून पहा
+- [ ] तुमच्या ब्राउझरच्या DevTools (F12) उघडा आणि खेळताना कन्सोल पहा
+- [ ] स्वतःला आव्हान द्या की कोट शक्य तितक्या वेगाने पूर्ण करा
+
+### ⏰ **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] यादीत अधिक कोट्स जोडा (कदाचित तुमच्या आवडत्या पुस्तकांमधून किंवा चित्रपटांमधून)
+- [ ] चॅलेंज सेक्शनमधील localStorage उच्च स्कोअर प्रणाली अंमलात आणा
+- [ ] शब्द प्रति मिनिट कॅल्क्युलेटर तयार करा जो प्रत्येक खेळानंतर प्रदर्शित होतो
+- [ ] योग्य टायपिंग, चुका, आणि पूर्णतेसाठी साउंड इफेक्ट्स जोडा
+
+### 📅 **तुमचा आठवडाभराचा प्रवास**
+- [ ] एक मल्टीप्लेयर आवृत्ती तयार करा जिथे मित्र एकत्र स्पर्धा करू शकतात
+- [ ] वेगवेगळ्या कोट्सच्या जटिलतेसह विविध अडचण पातळ्या तयार करा
+- [ ] कोट किती पूर्ण झाला आहे हे दर्शवणारा प्रगती बार जोडा
+- [ ] वैयक्तिक आकडेवारी ट्रॅकिंगसह वापरकर्ता खाती अंमलात आणा
+- [ ] सानुकूल थीम डिझाइन करा आणि वापरकर्त्यांना त्यांची पसंतीची शैली निवडण्याची परवानगी द्या
 
-[वेब ब्राउझरद्वारे उपलब्ध सर्व इव्हेंट्स](https://developer.mozilla.org/docs/Web/Events) बद्दल वाचा, आणि तुम्ही प्रत्येक इव्हेंट कोणत्या परिस्थितीत वापराल याचा विचार करा.
+### 🗓️ **तुमचा महिनाभराचा बदल**
+- [ ] योग्य बोट ठेवण्याचे प्रगतपणे शिकवणाऱ्या धड्यांसह टायपिंग कोर्स तयार करा
+- [ ] विश्लेषण तयार करा जे दाखवते की कोणते अक्षरे किंवा शब्द सर्वाधिक चुका करतात
+- [ ] वेगवेगळ्या भाषा आणि कीबोर्ड लेआउटसाठी समर्थन जोडा
+- [ ] शैक्षणिक APIs सह एकत्रित करा जे साहित्य डेटाबेसमधून कोट्स आणतात
+- [ ] तुमचा सुधारित टायपिंग गेम इतरांसाठी प्रकाशित करा आणि आनंद घ्या
 
-## असाइनमेंट
+### 🎯 **अंतिम प्रतिबिंब तपासणी**
 
-[नवीन कीबोर्ड गेम तयार करा](assignment.md)
+**पुढे जाण्यापूर्वी, एक क्षण घ्या आणि साजरा करा:**
+- गेम तयार करताना सर्वात समाधानकारक क्षण कोणता होता?
+- इव्हेंट-ड्रिव्ह
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/5-browser-extension/1-about-browsers/README.md b/translations/mr/5-browser-extension/1-about-browsers/README.md
index df2bec2f69..4c5f96983a 100644
--- a/translations/mr/5-browser-extension/1-about-browsers/README.md
+++ b/translations/mr/5-browser-extension/1-about-browsers/README.md
@@ -1,177 +1,284 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "33a875c522f237a2026e4653240dfc07",
-  "translation_date": "2025-10-22T16:37:32+00:00",
+  "original_hash": "00aa85715e1efd4930c17a23e3012e69",
+  "translation_date": "2025-11-03T15:08:25+00:00",
   "source_file": "5-browser-extension/1-about-browsers/README.md",
   "language_code": "mr"
 }
 -->
-# ब्राउझर एक्स्टेंशन प्रोजेक्ट भाग 1: ब्राउझरची संपूर्ण माहिती
+# ब्राउझर विस्तार प्रकल्प भाग 1: ब्राउझर बद्दल सर्व काही
+
+```mermaid
+journey
+    title Your Browser Extension Development Journey
+    section Foundation
+      Understand browsers: 3: Student
+      Learn extension types: 4: Student
+      Setup development: 4: Student
+    section Development
+      Build interface: 4: Student
+      Add functionality: 5: Student
+      Handle data: 5: Student
+    section Integration
+      Test in browser: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
 
 ![ब्राउझर स्केच नोट](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.mr.jpg)
 > स्केच नोट [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) यांच्याकडून
 
-## प्री-लेक्चर क्विझ
+## पूर्व-व्याख्यान प्रश्नमंजुषा
 
-[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/23)
+[पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/23)
 
 ### परिचय
 
-ब्राउझर एक्स्टेंशन्स म्हणजे लहान अ‍ॅप्स आहेत जे तुमच्या वेब ब्राउझिंग अनुभवाला सुधारतात. टिम बर्नर्स-ली यांच्या परस्परसंवादी वेबच्या मूळ कल्पनेप्रमाणे, एक्स्टेंशन्स ब्राउझरच्या क्षमतांना साध्या दस्तऐवज पाहण्याच्या पलीकडे वाढवतात. पासवर्ड मॅनेजर्सपासून जे तुमचे खाते सुरक्षित ठेवतात ते रंग निवडणारे टूल्स जे डिझायनर्सना योग्य रंग निवडण्यास मदत करतात, एक्स्टेंशन्स रोजच्या ब्राउझिंग समस्यांचे निराकरण करतात.
+ब्राउझर विस्तार हे लहान अनुप्रयोग आहेत जे तुमच्या वेब ब्राउझिंग अनुभवाला सुधारित करतात. टिम बर्नर्स-ली यांच्या परस्परसंवादी वेबच्या मूळ दृष्टिकोनासारखे, विस्तार ब्राउझरच्या क्षमतांना साध्या दस्तऐवज पाहण्याच्या पलीकडे नेतात. पासवर्ड व्यवस्थापकांपासून जे तुमचे खाते सुरक्षित ठेवतात ते रंग निवडणाऱ्यांपर्यंत जे डिझायनर्सना परिपूर्ण रंग मिळविण्यास मदत करतात, विस्तार दैनंदिन ब्राउझिंग आव्हाने सोडवतात.
 
-तुमचा पहिला एक्स्टेंशन तयार करण्यापूर्वी, ब्राउझर कसे कार्य करतात हे समजून घेऊया. जसे अलेक्झांडर ग्रॅहम बेलला टेलिफोन शोधण्यापूर्वी ध्वनी प्रसारण समजून घेणे आवश्यक होते, तसेच ब्राउझरची मूलभूत माहिती जाणून घेणे तुम्हाला विद्यमान ब्राउझर सिस्टम्ससोबत सहजपणे समाकलित होणारे एक्स्टेंशन्स तयार करण्यात मदत करेल.
+तुमचा पहिला विस्तार तयार करण्यापूर्वी, ब्राउझर कसे कार्य करतात हे समजून घेऊया. जसे अलेक्झांडर ग्रॅहम बेलला टेलिफोन शोधण्यापूर्वी ध्वनी प्रसारण समजणे आवश्यक होते, तसेच ब्राउझर मूलभूत गोष्टी जाणून घेणे तुम्हाला विद्यमान ब्राउझर प्रणालींसह सहजपणे समाकलित होणारे विस्तार तयार करण्यात मदत करेल.
 
-या धड्याच्या शेवटी, तुम्हाला ब्राउझर आर्किटेक्चर समजेल आणि तुम्ही तुमचे पहिले एक्स्टेंशन तयार करण्यास सुरुवात केली असेल.
+या धड्याच्या शेवटी, तुम्हाला ब्राउझर आर्किटेक्चर समजेल आणि तुमचा पहिला विस्तार तयार करण्यास सुरुवात केली असेल.
+
+```mermaid
+mindmap
+  root((Browser Architecture))
+    Core Components
+      Rendering Engine
+      JavaScript Engine
+      Network Stack
+      Storage APIs
+    User Interface
+      Address Bar
+      Tab Management
+      Bookmarks
+      Extension Icons
+    Extension System
+      Manifest Files
+      Content Scripts
+      Background Pages
+      Popup Windows
+    Security Model
+      Same-Origin Policy
+      Permissions API
+      Content Security
+      Isolated Worlds
+    Development Tools
+      DevTools Integration
+      Debug Console
+      Performance Monitor
+      Extension Inspector
+```
 
 ## वेब ब्राउझर समजून घेणे
 
-वेब ब्राउझर म्हणजे एक प्रकारचा प्रगत दस्तऐवज व्याख्याकार आहे. जेव्हा तुम्ही "google.com" ब्राउझरच्या अ‍ॅड्रेस बारमध्ये टाइप करता, तेव्हा ब्राउझर एक जटिल प्रक्रिया करते - जगभरातील सर्व्हरकडून सामग्रीची विनंती करते, नंतर त्या कोडचे विश्लेषण करून ते परस्परसंवादी वेब पृष्ठांमध्ये रूपांतरित करते.
+वेब ब्राउझर हा मूलतः एक प्रगत दस्तऐवज व्याख्याकार आहे. जेव्हा तुम्ही "google.com" पत्त्याच्या बारमध्ये टाइप करता, तेव्हा ब्राउझर एक जटिल प्रक्रिया करते - जगभरातील सर्व्हरकडून सामग्रीची विनंती करणे, नंतर त्या कोडचे विश्लेषण आणि रेंडरिंग करणे जेणेकरून तुम्हाला परस्परसंवादी वेब पृष्ठे दिसतील.
 
-ही प्रक्रिया टिम बर्नर्स-ली यांनी 1990 मध्ये डिझाइन केलेल्या पहिल्या वेब ब्राउझर, वर्ल्डवाइडवेबच्या डिझाइनसारखी आहे, ज्यामुळे हायपरलिंक केलेले दस्तऐवज सर्वांसाठी सुलभ झाले.
+ही प्रक्रिया टिम बर्नर्स-ली यांनी 1990 मध्ये डिझाइन केलेल्या पहिल्या वेब ब्राउझर, वर्ल्डवाइडवेब, कसे तयार केले गेले यासारखी आहे, ज्यामुळे हायपरलिंक केलेले दस्तऐवज सर्वांसाठी प्रवेशयोग्य बनले.
 
-✅ **थोडा इतिहास**: पहिला ब्राउझर 'वर्ल्डवाइडवेब' नावाचा होता आणि तो सर टिमोथी बर्नर्स-ली यांनी 1990 मध्ये तयार केला होता.
+✅ **थोडा इतिहास**: पहिला ब्राउझर 'वर्ल्डवाइडवेब' म्हणून ओळखला जात होता आणि सर टिमोथी बर्नर्स-ली यांनी 1990 मध्ये तयार केला होता.
 
 ![प्रारंभिक ब्राउझर](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.mr.jpg)
 > काही प्रारंभिक ब्राउझर, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) यांच्याकडून
 
 ### ब्राउझर वेब सामग्री कशी प्रक्रिया करतात
 
-URL टाइप केल्यानंतर वेबपृष्ठ दिसण्यापर्यंतची प्रक्रिया काही सेकंदांत समन्वयित पद्धतीने होते:
+URL टाइप करण्यापासून वेबपृष्ठ पाहण्यापर्यंतची प्रक्रिया काही सेकंदांत अनेक समन्वयित चरणांमध्ये होते:
 
 ```mermaid
 sequenceDiagram
     participant User
     participant Browser
+    participant Extension
     participant DNS
     participant Server
     
     User->>Browser: Types URL and presses Enter
+    Browser->>Extension: Trigger beforeRequest event
+    Extension->>Extension: Check if URL needs modification
     Browser->>DNS: Looks up server IP address
     DNS->>Browser: Returns IP address
     Browser->>Server: Requests web page content
     Server->>Browser: Sends HTML, CSS, and JavaScript
+    Browser->>Extension: Trigger beforeResponse event
+    Extension->>Extension: Modify content if needed
     Browser->>User: Renders complete web page
+    Extension->>User: Show extension UI updates
 ```
 
 **या प्रक्रियेमुळे काय साध्य होते:**
-- **मानवी-वाचनीय URL** DNS लुकअपद्वारे सर्व्हर IP पत्त्यात रूपांतरित करते
-- **सुरक्षित कनेक्शन** HTTP किंवा HTTPS प्रोटोकॉल वापरून वेब सर्व्हरशी स्थापित करते
-- **विशिष्ट वेबपृष्ठ सामग्रीची विनंती** सर्व्हरकडून करते
-- **HTML मार्कअप, CSS स्टाइलिंग आणि JavaScript कोड** सर्व्हरकडून प्राप्त करते
-- **संपूर्ण सामग्री परस्परसंवादी वेबपृष्ठात रूपांतरित करते**
+- **मानवी-वाचनीय URL** DNS लुकअपद्वारे सर्व्हर IP पत्त्यात **अनुवादित** करते
+- HTTP किंवा HTTPS प्रोटोकॉल वापरून वेब सर्व्हरसह सुरक्षित कनेक्शन **स्थापित** करते
+- सर्व्हरकडून विशिष्ट वेब पृष्ठ सामग्रीची **विनंती** करते
+- सर्व्हरकडून HTML मार्कअप, CSS शैली आणि JavaScript कोड **प्राप्त** करते
+- सर्व सामग्री परस्परसंवादी वेब पृष्ठात **रेंडर** करते
 
-### ब्राउझरची मुख्य वैशिष्ट्ये
+### ब्राउझर मुख्य वैशिष्ट्ये
 
-आधुनिक ब्राउझर अनेक वैशिष्ट्ये प्रदान करतात ज्याचा एक्स्टेंशन डेव्हलपर्स फायदा घेऊ शकतात:
+आधुनिक ब्राउझर अनेक वैशिष्ट्ये प्रदान करतात ज्याचा विस्तार विकसक फायदा घेऊ शकतात:
 
-| वैशिष्ट्य | उद्देश | एक्स्टेंशन संधी |
-|-----------|--------|-----------------|
-| **रेंडरिंग इंजिन** | HTML, CSS आणि JavaScript प्रदर्शित करते | सामग्री बदल, स्टाइलिंग इंजेक्शन |
-| **JavaScript इंजिन** | JavaScript कोड कार्यान्वित करते | कस्टम स्क्रिप्ट्स, API परस्परसंवाद |
-| **लोकल स्टोरेज** | डेटा स्थानिक पातळीवर जतन करते | वापरकर्ता प्राधान्ये, कॅश केलेला डेटा |
+| वैशिष्ट्य | उद्देश | विस्तार संधी |
+|---------|---------|------------------------|
+| **रेंडरिंग इंजिन** | HTML, CSS आणि JavaScript प्रदर्शित करते | सामग्री सुधारणा, शैली इंजेक्शन |
+| **JavaScript इंजिन** | JavaScript कोड कार्यान्वित करते | सानुकूल स्क्रिप्ट्स, API संवाद |
+| **स्थानिक संग्रह** | स्थानिक डेटा जतन करते | वापरकर्ता प्राधान्ये, कॅश केलेला डेटा |
 | **नेटवर्क स्टॅक** | वेब विनंत्या हाताळते | विनंती निरीक्षण, डेटा विश्लेषण |
-| **सुरक्षा मॉडेल** | वापरकर्त्यांना हानिकारक सामग्रीपासून संरक्षण देते | सामग्री फिल्टरिंग, सुरक्षा सुधारणा |
+| **सुरक्षा मॉडेल** | वापरकर्त्यांना हानिकारक सामग्रीपासून संरक्षण करते | सामग्री फिल्टरिंग, सुरक्षा सुधारणा |
 
 **ही वैशिष्ट्ये समजून घेणे तुम्हाला मदत करते:**
-- **ओळखणे** की तुमचे एक्स्टेंशन सर्वाधिक मूल्य कुठे जोडू शकते
-- **योग्य ब्राउझर API निवडणे** तुमच्या एक्स्टेंशनच्या कार्यक्षमतेसाठी
-- **डिझाइन करणे** ब्राउझर सिस्टमसह कार्यक्षमतेने कार्य करणारे एक्स्टेंशन्स
-- **सुनिश्चित करणे** की तुमचे एक्स्टेंशन ब्राउझर सुरक्षा सर्वोत्तम पद्धतींचे पालन करते
+- **ओळखणे** की तुमचा विस्तार सर्वाधिक मूल्य कुठे जोडू शकतो
+- **योग्य ब्राउझर API निवडणे** तुमच्या विस्ताराच्या कार्यक्षमतेसाठी
+- **डिझाइन करणे** ब्राउझर प्रणालींसह कार्यक्षमतेने कार्य करणारे विस्तार
+- **सुनिश्चित करणे** की तुमचा विस्तार ब्राउझर सुरक्षा सर्वोत्तम पद्धतींचे पालन करतो
 
-### क्रॉस-ब्राउझर डेव्हलपमेंट विचार
+### क्रॉस-ब्राउझर विकास विचार
 
-वेगवेगळे ब्राउझर मानकांची अंमलबजावणी थोड्या फरकाने करतात, जसे की वेगवेगळ्या प्रोग्रामिंग भाषांमध्ये समान अल्गोरिदम वेगळ्या प्रकारे हाताळला जातो. Chrome, Firefox आणि Safari प्रत्येकामध्ये एक्स्टेंशन डेव्हलपमेंट दरम्यान विचारात घेण्यासारखे अनोखे वैशिष्ट्य आहे.
+वेगवेगळे ब्राउझर मानकांची अंमलबजावणी थोड्या फरकाने करतात, जसे की वेगवेगळ्या प्रोग्रामिंग भाषा समान अल्गोरिदम वेगळ्या प्रकारे हाताळू शकतात. Chrome, Firefox आणि Safari प्रत्येकामध्ये अद्वितीय वैशिष्ट्ये आहेत ज्यांचा विस्तार विकासादरम्यान विचार केला पाहिजे.
 
-> 💡 **प्रो टिप**: [caniuse.com](https://www.caniuse.com) वापरा वेगवेगळ्या ब्राउझरमध्ये कोणते वेब तंत्रज्ञान समर्थित आहे ते तपासण्यासाठी. तुमच्या एक्स्टेंशनच्या वैशिष्ट्यांची योजना करताना हे अमूल्य आहे!
+> 💡 **प्रो टिप**: [caniuse.com](https://www.caniuse.com) वापरा जेणेकरून वेगवेगळ्या ब्राउझरमध्ये कोणते वेब तंत्रज्ञान समर्थित आहे ते तपासता येईल. तुमच्या विस्ताराच्या वैशिष्ट्यांची योजना करताना हे अमूल्य आहे!
 
-**एक्स्टेंशन डेव्हलपमेंटसाठी महत्त्वाचे विचार:**
-- **तुमचे एक्स्टेंशन Chrome, Firefox आणि Edge ब्राउझरमध्ये चाचणी करा**
-- **वेगवेगळ्या ब्राउझर एक्स्टेंशन API आणि मॅनिफेस्ट स्वरूपांशी जुळवा**
+**विस्तार विकासासाठी महत्त्वाचे विचार:**
+- **तुमचा विस्तार Chrome, Firefox आणि Edge ब्राउझरमध्ये चाचणी करा**
+- **वेगवेगळ्या ब्राउझर विस्तार API आणि मॅनिफेस्ट स्वरूपांशी जुळवा**
 - **वेगवेगळ्या कार्यक्षमता वैशिष्ट्ये आणि मर्यादा हाताळा**
-- **ब्राउझर-विशिष्ट वैशिष्ट्यांसाठी फॉलबॅक प्रदान करा जे उपलब्ध नसू शकतात**
+- **ब्राउझर-विशिष्ट वैशिष्ट्यांसाठी फॉलबॅक प्रदान करा जे उपलब्ध नसतील**
 
-✅ **विश्लेषण अंतर्दृष्टी**: तुमचे वापरकर्ते कोणते ब्राउझर पसंत करतात हे ठरवण्यासाठी तुमच्या वेब डेव्हलपमेंट प्रकल्पांमध्ये विश्लेषण पॅकेजेस स्थापित करू शकता. ही माहिती तुम्हाला कोणते ब्राउझर प्रथम समर्थन देणे आवश्यक आहे हे प्राधान्य देण्यास मदत करते.
+✅ **विश्लेषण अंतर्दृष्टी**: तुमच्या वेब विकास प्रकल्पांमध्ये विश्लेषण पॅकेजेस स्थापित करून तुम्ही तुमचे वापरकर्ते कोणते ब्राउझर पसंत करतात हे ठरवू शकता. ही माहिती तुम्हाला कोणते ब्राउझर प्रथम समर्थन करायचे ते प्राधान्य देण्यास मदत करते.
 
-## ब्राउझर एक्स्टेंशन्स समजून घेणे
+## ब्राउझर विस्तार समजून घेणे
 
-ब्राउझर एक्स्टेंशन्स सामान्य वेब ब्राउझिंग समस्यांचे निराकरण करून ब्राउझर इंटरफेसमध्ये थेट कार्यक्षमता जोडतात. स्वतंत्र अ‍ॅप्स किंवा जटिल कार्यप्रवाहांची आवश्यकता न ठेवता, एक्स्टेंशन्स साधने आणि वैशिष्ट्ये त्वरित प्रवेशासाठी प्रदान करतात.
+ब्राउझर विस्तार सामान्य वेब ब्राउझिंग आव्हाने सोडवतात जे ब्राउझर इंटरफेसमध्ये थेट कार्यक्षमता जोडतात. स्वतंत्र अनुप्रयोग किंवा जटिल कार्यप्रवाहांची आवश्यकता न ठेवता, विस्तार त्वरित साधने आणि वैशिष्ट्ये प्रदान करतात.
 
-ही संकल्पना डग्लस एंगलबार्ट यांसारख्या प्रारंभिक संगणक पायोनियर्सनी तंत्रज्ञानासह मानवी क्षमता वाढवण्याची कल्पना कशी केली होती यासारखी आहे - एक्स्टेंशन्स तुमच्या ब्राउझरच्या मूलभूत कार्यक्षमतेला वाढवतात.
+हा संकल्पना लवकर संगणक पायोनियर डग्लस एंगलबर्ट यांनी तंत्रज्ञानासह मानवी क्षमता वाढवण्याच्या कल्पनेप्रमाणे आहे - विस्तार तुमच्या ब्राउझरच्या मूलभूत कार्यक्षमतेत सुधारणा करतात.
 
-**लोकप्रिय एक्स्टेंशन श्रेण्या आणि त्यांचे फायदे:**
-- **उत्पादकता साधने**: टास्क मॅनेजर्स, नोट्स घेण्याचे अ‍ॅप्स आणि वेळ ट्रॅकर्स जे तुम्हाला व्यवस्थित राहण्यास मदत करतात
-- **सुरक्षा सुधारणा**: पासवर्ड मॅनेजर्स, अ‍ॅड ब्लॉकर्स आणि गोपनीयता साधने जी तुमचा डेटा सुरक्षित ठेवतात
-- **डेव्हलपर साधने**: कोड फॉर्मॅटर्स, रंग निवडणारे टूल्स आणि डीबगिंग युटिलिटीज जे डेव्हलपमेंट सुलभ करतात
-- **सामग्री सुधारणा**: वाचन मोड्स, व्हिडिओ डाउनलोडर्स आणि स्क्रीनशॉट टूल्स जे तुमचा वेब अनुभव सुधारतात
+```mermaid
+quadrantChart
+    title Browser Extension Categories
+    x-axis Simple --> Complex
+    y-axis Personal Use --> Professional Tools
+    quadrant-1 Developer Tools
+    quadrant-2 Enterprise Solutions
+    quadrant-3 Personal Utilities
+    quadrant-4 Productivity Apps
+    
+    Ad Blockers: [0.3, 0.2]
+    Password Managers: [0.7, 0.3]
+    Color Pickers: [0.4, 0.8]
+    Code Formatters: [0.8, 0.9]
+    Note Taking: [0.6, 0.5]
+    Video Downloaders: [0.5, 0.2]
+    Time Trackers: [0.7, 0.6]
+    Screenshot Tools: [0.4, 0.4]
+```
 
-✅ **प्रतिबिंब प्रश्न**: तुमचे आवडते ब्राउझर एक्स्टेंशन्स कोणते आहेत? ते कोणते विशिष्ट कार्य करतात आणि ते तुमचा ब्राउझिंग अनुभव कसा सुधारतात?
+**लोकप्रिय विस्तार श्रेणी आणि त्यांचे फायदे:**
+- **उत्पादकता साधने**: कार्य व्यवस्थापक, नोट्स घेण्याचे अनुप्रयोग आणि वेळ ट्रॅकर्स जे तुम्हाला व्यवस्थित राहण्यास मदत करतात
+- **सुरक्षा सुधारणा**: पासवर्ड व्यवस्थापक, जाहिरात ब्लॉकर्स आणि गोपनीयता साधने जी तुमचा डेटा सुरक्षित ठेवतात
+- **विकसक साधने**: कोड फॉर्मॅटर्स, रंग निवडणारे आणि डीबगिंग युटिलिटीज जे विकास सुलभ करतात
+- **सामग्री सुधारणा**: वाचन मोड, व्हिडिओ डाउनलोडर्स आणि स्क्रीनशॉट साधने जी तुमचा वेब अनुभव सुधारतात
 
-## एक्स्टेंशन्स स्थापित करणे आणि व्यवस्थापित करणे
+✅ **प्रतिबिंब प्रश्न**: तुमचे आवडते ब्राउझर विस्तार कोणते आहेत? ते कोणते विशिष्ट कार्य करतात आणि ते तुमचा ब्राउझिंग अनुभव कसा सुधारतात?
 
-एक्स्टेंशन इंस्टॉलेशन प्रक्रिया समजून घेणे तुम्हाला लोक तुमचे एक्स्टेंशन स्थापित करताना वापरकर्ता अनुभवाची अपेक्षा करण्यास मदत करते. इंस्टॉलेशन प्रक्रिया आधुनिक ब्राउझरमध्ये प्रमाणित आहे, इंटरफेस डिझाइनमध्ये लहान फरकांसह.
+### 🔄 **शैक्षणिक तपासणी**
+**ब्राउझर आर्किटेक्चर समजून घेणे**: विस्तार विकासाकडे जाण्यापूर्वी, सुनिश्चित करा की तुम्ही:
+- ✅ ब्राउझर वेब विनंत्या कशा प्रक्रिया करतात आणि सामग्री कशी रेंडर करतात ते स्पष्ट करू शकता
+- ✅ ब्राउझर आर्किटेक्चरचे मुख्य घटक ओळखू शकता
+- ✅ विस्तार ब्राउझर कार्यक्षमतेसह कसे समाकलित होतात ते समजून घेऊ शकता
+- ✅ वापरकर्त्यांचे संरक्षण करणारे सुरक्षा मॉडेल ओळखू शकता
+
+**जलद स्व-परीक्षण**: तुम्ही URL टाइप करण्यापासून वेबपृष्ठ पाहण्यापर्यंतचा मार्ग शोधू शकता का?
+1. **DNS लुकअप** URL ला IP पत्त्यात रूपांतरित करते
+2. **HTTP विनंती** सर्व्हरकडून सामग्री प्राप्त करते
+3. **विश्लेषण** HTML, CSS आणि JavaScript प्रक्रिया करते
+4. **रेंडरिंग** अंतिम वेबपृष्ठ प्रदर्शित करते
+5. **विस्तार** अनेक चरणांमध्ये सामग्री सुधारू शकतात
+
+## विस्तार स्थापित करणे आणि व्यवस्थापित करणे
+
+विस्तार स्थापना प्रक्रिया समजून घेणे तुम्हाला तुमचा विस्तार लोकांनी स्थापित करताना अनुभव कसा असेल याचा अंदाज घेण्यास मदत करते. स्थापना प्रक्रिया आधुनिक ब्राउझरमध्ये प्रमाणित आहे, इंटरफेस डिझाइनमध्ये लहान फरकांसह.
 
 ![Edge ब्राउझरचा स्क्रीनशॉट ज्यामध्ये edge://extensions पृष्ठ उघडलेले आहे आणि सेटिंग्ज मेनू उघडलेला आहे](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.mr.png)
 
-> **महत्त्वाचे**: तुमचे स्वतःचे एक्स्टेंशन्स चाचणी करताना डेव्हलपर मोड चालू करा आणि इतर स्टोअर्समधून एक्स्टेंशन्सला परवानगी द्या.
+> **महत्त्वाचे**: तुमचे स्वतःचे विस्तार चाचणी करताना विकसक मोड चालू करा आणि इतर स्टोअरमधून विस्तारांना परवानगी द्या.
+
+### विकास विस्तार स्थापना प्रक्रिया
 
-### डेव्हलपमेंट एक्स्टेंशन इंस्टॉलेशन प्रक्रिया
+तुमचे स्वतःचे विस्तार विकसित आणि चाचणी करताना, हा कार्यप्रवाह अनुसरण करा:
 
-तुमचे स्वतःचे एक्स्टेंशन्स विकसित आणि चाचणी करताना, खालील कार्यप्रवाह अनुसरण करा:
+```mermaid
+flowchart TD
+    A[Write Code] --> B[Build Extension]
+    B --> C{First Install?}
+    C -->|Yes| D[Load Unpacked]
+    C -->|No| E[Reload Extension]
+    D --> F[Test Functionality]
+    E --> F
+    F --> G{Working Correctly?}
+    G -->|No| H[Debug Issues]
+    G -->|Yes| I[Ready for Users]
+    H --> A
+    I --> J[Publish to Store]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#f3e5f5
+    style J fill:#fff3e0
+```
 
 ```bash
 # Step 1: Build your extension
 npm run build
 ```
 
-**या कमांडने काय साध्य होते:**
-- **तुमचा सोर्स कोड ब्राउझर-रेडी फाइल्समध्ये संकलित करते**
+**या आदेशामुळे काय साध्य होते:**
+- **तुमचा स्रोत कोड ब्राउझर-तयार फाइल्समध्ये संकलित करते**
 - **JavaScript मॉड्यूल्स ऑप्टिमाइझ केलेल्या पॅकेजेसमध्ये बंडल करते**
-- **अंतिम एक्स्टेंशन फाइल्स `/dist` फोल्डरमध्ये तयार करते**
-- **तुमचे एक्स्टेंशन इंस्टॉलेशन आणि चाचणीसाठी तयार करते**
+- **अंतिम विस्तार फाइल्स `/dist` फोल्डरमध्ये तयार करते**
+- **तुमचा विस्तार स्थापना आणि चाचणीसाठी तयार करते**
 
-**पायरी 2: ब्राउझर एक्स्टेंशन्सवर जा**
-1. **तुमच्या ब्राउझरच्या एक्स्टेंशन्स व्यवस्थापन पृष्ठावर जा**
-2. **"सेटिंग्ज आणि अधिक" बटणावर क्लिक करा (`...` आयकॉन) वरच्या उजव्या बाजूला
-3. **ड्रॉपडाउन मेनूमधून "एक्स्टेंशन्स" निवडा**
+**चरण 2: ब्राउझर विस्तार पृष्ठावर जा**
+1. **तुमच्या ब्राउझरचा विस्तार व्यवस्थापन पृष्ठ उघडा**
+2. **"सेटिंग्ज आणि अधिक" बटणावर क्लिक करा (`...` चिन्ह) वरच्या उजव्या बाजूला
+3. **ड्रॉपडाउन मेनूमधून "विस्तार" निवडा**
 
-**पायरी 3: तुमचे एक्स्टेंशन लोड करा**
-- **नवीन इंस्टॉलेशन्ससाठी**: `load unpacked` निवडा आणि तुमचा `/dist` फोल्डर निवडा
-- **अपडेट्ससाठी**: तुमच्या आधीपासून इंस्टॉल केलेल्या एक्स्टेंशनच्या बाजूला `reload` क्लिक करा
-- **चाचणीसाठी**: "डेव्हलपर मोड" सक्षम करा अतिरिक्त डीबगिंग वैशिष्ट्ये प्रवेश करण्यासाठी
+**चरण 3: तुमचा विस्तार लोड करा**
+- **नवीन स्थापनेसाठी**: `लोड अनपॅक्ड` निवडा आणि तुमचा `/dist` फोल्डर निवडा
+- **अपडेटसाठी**: तुमच्या आधीच स्थापित केलेल्या विस्ताराच्या बाजूला `रिलोड` क्लिक करा
+- **चाचणीसाठी**: "विकसक मोड" सक्षम करा जेणेकरून अतिरिक्त डीबगिंग वैशिष्ट्ये प्रवेश करता येतील
 
-### उत्पादन एक्स्टेंशन इंस्टॉलेशन
+### उत्पादन विस्तार स्थापना
 
-> ✅ **टीप**: ही डेव्हलपमेंट सूचना विशेषतः तुम्ही स्वतः तयार केलेल्या एक्स्टेंशन्ससाठी आहेत. प्रकाशित एक्स्टेंशन्स इंस्टॉल करण्यासाठी, [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) सारख्या अधिकृत ब्राउझर एक्स्टेंशन स्टोअर्सला भेट द्या.
+> ✅ **टीप**: हे विकास निर्देश विशेषतः तुम्ही स्वतः तयार केलेल्या विस्तारांसाठी आहेत. प्रकाशित विस्तार स्थापित करण्यासाठी, [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) सारख्या अधिकृत ब्राउझर विस्तार स्टोअरला भेट द्या.
 
 **फरक समजून घेणे:**
-- **डेव्हलपमेंट इंस्टॉलेशन्स** तुम्हाला विकासादरम्यान अप्रकाशित एक्स्टेंशन्स चाचणी करण्यास अनुमती देतात
-- **स्टोअर इंस्टॉलेशन्स** स्वयंचलित अपडेट्ससह प्रमाणित, प्रकाशित एक्स्टेंशन्स प्रदान करतात
-- **साइडलोडिंग** अधिकृत स्टोअर्सच्या बाहेरून एक्स्टेंशन्स इंस्टॉल करण्यास अनुमती देते (डेव्हलपर मोड आवश्यक आहे)
+- **विकास स्थापने** तुम्हाला अप्रकाशित विस्तार विकासादरम्यान चाचणी करण्यास अनुमती देते
+- **स्टोअर स्थापने** प्रमाणित, प्रकाशित विस्तार प्रदान करते ज्यामध्ये स्वयंचलित अद्यतने असतात
+- **साइडलोडिंग** अधिकृत स्टोअरच्या बाहेरून विस्तार स्थापित करण्यास अनुमती देते (विकसक मोड आवश्यक आहे)
 
-## तुमचे कार्बन फूटप्रिंट एक्स्टेंशन तयार करणे
+## तुमचा कार्बन फूटप्रिंट विस्तार तयार करणे
 
-आम्ही एक ब्राउझर एक्स्टेंशन तयार करू जे तुमच्या प्रदेशाच्या ऊर्जा वापराच्या कार्बन फूटप्रिंट प्रदर्शित करते. हा प्रकल्प आवश्यक एक्स्टेंशन डेव्हलपमेंट संकल्पना प्रदर्शित करतो आणि पर्यावरण जागरूकतेसाठी एक व्यावहारिक साधन तयार करतो.
+आम्ही एक ब्राउझर विस्तार तयार करू जो तुमच्या प्रदेशाच्या ऊर्जा वापराचा कार्बन फूटप्रिंट प्रदर्शित करतो. हा प्रकल्प आवश्यक विस्तार विकास संकल्पना प्रदर्शित करतो आणि पर्यावरणीय जागरूकतेसाठी व्यावहारिक साधन तयार करतो.
 
-हा दृष्टिकोन "करून शिकणे" या तत्त्वाचे अनुसरण करतो जे जॉन डेवीच्या शैक्षणिक सिद्धांतांपासून प्रभावी असल्याचे सिद्ध झाले आहे - तांत्रिक कौशल्ये आणि अर्थपूर्ण वास्तविक-जगातील अनुप्रयोग एकत्रित करणे.
+हा दृष्टिकोन "करून शिकणे" या तत्त्वाचे अनुसरण करतो जे जॉन ड्यूईच्या शैक्षणिक सिद्धांतांपासून प्रभावी सिद्ध झाले आहे - तांत्रिक कौशल्ये अर्थपूर्ण वास्तविक-जगातील अनुप्रयोगांसह एकत्रित करणे.
 
-### प्रोजेक्ट आवश्यकता
+### प्रकल्प आवश्यकता
 
 विकास सुरू करण्यापूर्वी, आवश्यक संसाधने आणि अवलंबित्व गोळा करूया:
 
 **आवश्यक API प्रवेश:**
-- **[CO2 Signal API key](https://www.co2signal.com/)**: तुमचा ईमेल पत्ता प्रविष्ट करा तुमची मोफत API key मिळवण्यासाठी
-- **[Region code](http://api.electricitymap.org/v3/zones)**: तुमचा प्रदेश कोड शोधा [Electricity Map](https://www.electricitymap.org/map) वापरून (उदाहरणार्थ, Boston 'US-NEISO' वापरतो)
+- **[CO2 Signal API key](https://www.co2signal.com/)**: तुमचा ईमेल पत्ता प्रविष्ट करा जेणेकरून तुम्हाला तुमची मोफत API key मिळेल
+- **[Region code](http://api.electricitymap.org/v3/zones)**: तुमचा प्रदेश कोड [Electricity Map](https://www.electricitymap.org/map) वापरून शोधा (उदाहरणार्थ, बोस्टन 'US-NEISO' वापरतो)
 
 **विकास साधने:**
 - **[Node.js आणि NPM](https://www.npmjs.com)**: प्रकल्प अवलंबित्व स्थापित करण्यासाठी पॅकेज व्यवस्थापन साधन
 - **[स्टार्टर कोड](../../../../5-browser-extension/start)**: विकास सुरू करण्यासाठी `start` फोल्डर डाउनलोड करा
 
-✅ **अधिक जाणून घ्या**: तुमचे पॅकेज व्यवस्थापन कौशल्य वाढवा या [संपूर्ण Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) सह
+✅ **अधिक जाणून घ्या**: तुमचे पॅकेज व्यवस्थापन कौशल्ये सुधारण्यासाठी [संपूर्ण Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) वापरा
 
-### प्रोजेक्ट स्ट्रक्चर समजून घेणे
+### प्रकल्प संरचना समजून घेणे
 
-प्रोजेक्ट स्ट्रक्चर समजून घेणे विकास कार्य कार्यक्षमतेने आयोजित करण्यात मदत करते. जसे अलेक्झांड्रिया ग्रंथालय ज्ञान पुनर्प्राप्तीसाठी सुलभतेने आयोजित केले गेले होते, तसेच एक चांगले संरचित कोडबेस विकास अधिक कार्यक्षम बनवते:
+प्रकल्प संरचना समजून घेणे विकास कार्य कार्यक्षमतेने आयोजित करण्यात मदत करते. जसे अलेक्झांड्रिया ग्रंथालय ज्ञान पुनर्प्राप्तीसाठी सुलभतेने आयोजित केले गेले होते, तसेच एक चांगले संरचित कोडबेस विकास अधिक कार्यक्षम बनवते:
 
 ```
 project-root/
@@ -180,69 +287,202 @@ project-root/
 │   ├── index.html           # User interface markup
 │   ├── background.js        # Background script functionality
 │   └── main.js              # Compiled JavaScript bundle
-└── src/                     # Source development files
-    └── index.js             # Your main JavaScript code
+├── src/                     # Source development files
+│   └── index.js             # Your main JavaScript code
+├── package.json             # Project dependencies and scripts
+└── webpack.config.js        # Build configuration
 ```
 
-**प्रत्येक फाइल काय साध्य करते याचे विश्लेषण:**
-- **`manifest.json`**: **परिभाषित करते** एक्स्टेंशन मेटाडेटा, परवानग्या आणि प्रवेश बिंदू
-- **`index.html`**: **निर्माण करते** वापरकर्ता इंटरफेस जेव्हा वापरकर्ते तुमचे एक्स्टेंशन क्लिक करतात तेव्हा दिसते
-- **`background.js`**: **हाताळते** पार्श्वभूमी कार्ये आणि ब्राउझर इव्हेंट लिसनर्स
-- **`main.js`**: **अंतिम बंडल केलेला JavaScript** बिल्ड प्रक्रियेनंतर समाविष्ट करते
-- **`src/index.js`**: **तुमचा मुख्य विकास कोड ठेवते** जो `main.js` मध्ये संकलित केला जातो
+**प्रत्येक फाइल काय साध्य करते ते समजून घेणे:**
+- **`manifest.json`**: विस्तार मेटाडेटा, परवानग्या आणि प्रवेश बिंदू **परिभाषित** करते
+- **`index.html`**: वापरकर्ता इंटरफेस तयार करते जो वापरकर्ते तुमचा विस्तार क्लिक करताना दिसतो
+- **`background.js`**: पार्श्वभूमी कार्ये आणि ब्राउझर इव्हेंट लिसनर्स **हाताळते**
+- **`main.js`**: बिल्ड प्रक्रियेनंतर अंतिम बंडल केलेला JavaScript **सामाविष्ट** करते
+- **`src/index.js`**: तुमचा मुख्य विकास कोड **साठवतो** जो `main.js` मध्ये संकलित केला जातो
 
-> 💡 **संघटन टिप**: तुमचा API key आणि प्रदेश कोड सुरक्षित नोटमध्ये संग्रहित करा विकासादरम्यान संदर्भासाठी. तुमच्या एक्स्टेंशनची कार्यक्षमता चाचणी करण्यासाठी तुम्हाला या मूल्यांची आवश्यकता असेल.
+> 💡 **संघटन टिप**: तुमचा API key आणि प्रदेश कोड सुरक्षित नोटमध्ये साठवा जेणेकरून विकासादरम्यान संदर्भासाठी सोपे असेल. तुम्हाला तुमच्या विस्ताराची कार्यक्षमता चाचणी करण्यासाठी या मूल्यांची आवश्यकता असेल.
 
-✅ **सुरक्षा टीप**: तुमचे API key किंवा संवेदनशील क्रेडेन्शियल्स तुमच्या कोड रिपॉझिटरीमध्ये कधीही कमिट करू नका. आम्ही तुम्हाला पुढील चरणांमध्ये हे सुरक्षितपणे हाताळण्याचा मार्ग दाखवू.
+✅ **सुरक्षा टीप**: API key किंवा संवेदनशील क्रेडेन्शियल्स तुमच्या कोड रिपॉझिटरीमध्ये कधीही कमिट करू नका. आम्ही तुम्हाला पुढील चरणांमध्ये हे सुरक्षितपणे हाताळण्याचा मार्ग दाखवू.
 
-## एक्स्टेंशन इंटरफेस तयार करणे
+## विस्तार इंटरफेस तयार करणे
 
-आता आम्ही वापरकर्ता इंटरफेस घटक तयार करू. एक्स्टेंशन दोन-स्क्रीन दृष्टिकोन वापरते: प्रारंभिक सेटअपसाठी एक कॉन्फिगरेशन स्क्रीन आणि डेटा प्रदर्शनासाठी एक परिणाम स्क्रीन.
+आता आपण वापरकर्ता इंटरफेस घटक तयार करू. विस्तार दोन-स्क्रीन दृष्टिकोन वापरतो: प्रारंभिक सेटअपसाठी कॉन्फिगरेशन स्क्रीन आणि डेटा प्रदर्शनासाठी परिणाम स्क्रीन.
 
-हे संगणकाच्या सुरुवातीच्या दिवसांपासून वापरले जाणारे इंटरफेस डिझाइनमध्ये प्रगत प्रकटीकरण तत्त्व अनुसरण करते - वापरकर्त्यांना ओव्हरव्हेल्म न करता माहिती आणि पर्याय तार्किक क्रमाने उघड करणे.
+हे संगणकाच्या सुरुवातीच्या दिवसांपासून इंटरफेस डिझाइनमध्ये वापरल्या जाणाऱ्या प्रगत प्रकटीकरण तत्त्वाचे अनुसरण करते - वापरकर्त्यांना गोंधळात टाकण्यापासून टाळण्यासाठी माहिती आणि पर्याय तार्किक क्रमाने उघड करणे.
 
-### एक्स्टेंशन दृश्ये विहंगावलोकन
+### विस्तार दृश्ये विहंगावलोकन
 
 **सेटअप दृश्य** - प्रथमच वापरकर्ता कॉन्फिगरेशन:
-![ब्राउझरमध्ये उघडलेल्या पूर्ण झालेल्या एक्स्टेंशनचा स्क्रीनशॉट, ज्यामध्ये प्रदेशाचे नाव आणि API key साठी इनपुट्स असलेला फॉर्म दिसतो.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.mr.png)
+![पूर्ण विस्ताराचा स्क्रीनशॉट ब्राउझरमध्ये उघडलेला आहे, ज्यामध्ये प्रदेशाचे नाव आणि API key साठी इनपुट असलेला फॉर्म दिसतो.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.mr.png)
 
 **परिणाम दृश्य** - कार्बन फूटप्रिंट डेटा प्रदर्शन:
-![पूर्ण झालेल्या एक्स्टेंशनचा स्क्रीनशॉट जो US-NEISO प्रदेशासाठी कार्बन वापर आणि जीवाश्म इंधन टक्केवारीचे मूल्य प्रदर्शित करतो.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.mr.png)
+![पूर्ण विस्ताराचा स्क्रीनशॉट US-NEISO प्रदेशासाठी कार्बन वापर आणि जीवाश्म इंधन टक्केवारीचे मूल्य प्रदर्शित करत आहे.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.mr.png)
 
 ### कॉन्फिगरेशन फॉर्म तयार करणे
 
-सेटअप फॉर्म प्रारंभिक वापरादरम्यान वापरकर्ता कॉन्फिगरेशन डेटा गोळा करतो. एकदा कॉन्फिगर केल्यानंतर, ही माहिती भविष्यातील सत्रांसाठी ब्राउझर स्टोरेजमध्ये टिकून राहते.
+सेटअप फॉर्म प्रारंभिक वापरादरम्यान वापरकर्ता कॉन्फिगरेशन डेटा गोळा करतो. एकदा कॉन्फिगर केल्यानंतर, ही माहिती भविष्यात
+1. **बिल्ड** कमांड चालवा तुमचा कोड संकलित करण्यासाठी  
+2. **एक्स्टेंशन** तुमच्या ब्राउझरमध्ये डेव्हलपर मोड वापरून लोड करा  
+3. **पडताळा** की फॉर्म योग्य प्रकारे दिसतो आणि व्यावसायिक वाटतो  
+4. **तपासा** की सर्व फॉर्म घटक व्यवस्थित संरेखित आणि कार्यक्षम आहेत  
+
+**तुम्ही काय साध्य केले आहे:**  
+- **बनवले** तुमच्या एक्स्टेंशनसाठी मूलभूत HTML संरचना  
+- **निर्मिती केली** कॉन्फिगरेशन आणि परिणाम इंटरफेस योग्य सेमॅंटिक मार्कअपसह  
+- **सेट अप केले** आधुनिक विकास कार्यप्रवाह उद्योग-मानक साधनांसह  
+- **तयार केले** परस्परसंवादी JavaScript कार्यक्षमता जोडण्यासाठी पाया  
 
-`/dist/index.html` फाइलमध्ये, हा फॉर्म
-**वर्णन:** ब्राउझर विस्तार सुधारण्यासाठी फॉर्म सत्यापन आणि वापरकर्ता अभिप्राय वैशिष्ट्ये जोडा, जेणेकरून API की आणि प्रदेश कोड प्रविष्ट करताना वापरकर्ता अनुभव सुधारेल.
+### 🔄 **शैक्षणिक तपासणी**  
+**एक्स्टेंशन विकास प्रगती**: पुढे जाण्यापूर्वी तुमची समज तपासा:  
+- ✅ तुम्ही प्रकल्प संरचनेतील प्रत्येक फाइलचा उद्देश स्पष्ट करू शकता का?  
+- ✅ तुम्हाला समजते का की बिल्ड प्रक्रिया तुमचा सोर्स कोड कसा बदलते?  
+- ✅ आम्ही कॉन्फिगरेशन आणि परिणाम वेगवेगळ्या UI विभागांमध्ये का विभाजित करतो?  
+- ✅ फॉर्म संरचना वापरता येण्याजोगी आणि प्रवेशयोग्यता कशी समर्थन करते?  
 
-**सूचना:** जावास्क्रिप्ट सत्यापन फंक्शन्स तयार करा ज्यामुळे तपासता येईल की API की फील्डमध्ये किमान 20 अक्षरे आहेत का आणि प्रदेश कोड योग्य स्वरूपात आहे का (उदाहरणार्थ, 'US-NEISO'). वैध इनपुटसाठी इनपुट बॉर्डर रंग हिरवा आणि अवैध इनपुटसाठी लाल रंगात बदलून दृश्य अभिप्राय जोडा. तसेच सुरक्षा उद्देशाने API की दाखवणे/लपवणे यासाठी टॉगल वैशिष्ट्य जोडा.
+**विकास कार्यप्रवाह समज**: तुम्ही आता हे करू शकता:  
+1. **HTML आणि CSS बदलणे** तुमच्या एक्स्टेंशन इंटरफेससाठी  
+2. **बिल्ड कमांड चालवा** तुमचे बदल संकलित करण्यासाठी  
+3. **एक्स्टेंशन पुन्हा लोड करा** तुमच्या ब्राउझरमध्ये अद्यतने तपासण्यासाठी  
+4. **डिबग करा** ब्राउझर डेव्हलपर टूल्स वापरून समस्या  
 
-[एजंट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
+तुम्ही ब्राउझर एक्स्टेंशन विकासाचा पहिला टप्पा पूर्ण केला आहे. जसे राइट बंधूंनी उड्डाण साध्य करण्यापूर्वी एरोडायनामिक्स समजून घेणे आवश्यक होते, तसेच या मूलभूत संकल्पना समजून घेणे तुम्हाला पुढील धड्यात अधिक जटिल परस्परसंवादी वैशिष्ट्ये तयार करण्यासाठी तयार करते.  
 
-## 🚀 आव्हान
+## GitHub Copilot Agent Challenge 🚀  
 
-ब्राउझर विस्तार स्टोअरवर एक नजर टाका आणि तुमच्या ब्राउझरमध्ये एक विस्तार स्थापित करा. त्याच्या फाइल्स वेगवेगळ्या पद्धतीने तपासून पहा. तुम्हाला काय सापडते?
+Agent मोड वापरून खालील आव्हान पूर्ण करा:  
 
-## व्याख्यानानंतरचा क्विझ
+**वर्णन:** API की आणि क्षेत्र कोड प्रविष्ट करताना वापरकर्ता अनुभव सुधारण्यासाठी फॉर्म सत्यापन आणि वापरकर्ता अभिप्राय वैशिष्ट्ये जोडा.  
 
-[व्याख्यानानंतरचा क्विझ](https://ff-quizzes.netlify.app/web/quiz/24)
+**प्रॉम्प्ट:** JavaScript सत्यापन फंक्शन्स तयार करा जे तपासतात की API की फील्डमध्ये किमान 20 अक्षरे आहेत आणि क्षेत्र कोड योग्य स्वरूपाचे अनुसरण करतो (उदा. 'US-NEISO'). वैध इनपुटसाठी इनपुट बॉर्डर रंग हिरवा आणि अवैध इनपुटसाठी लाल रंग बदलून दृश्य अभिप्राय जोडा. तसेच सुरक्षा उद्देशाने API की दर्शविण्यासाठी/लपविण्यासाठी टॉगल वैशिष्ट्य जोडा.  
 
-## पुनरावलोकन आणि स्व-अभ्यास
+[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.  
 
-या धड्यात तुम्ही वेब ब्राउझरच्या इतिहासाबद्दल थोडेसे शिकले; वेबच्या इतिहासाबद्दल अधिक वाचून वर्ल्ड वाइड वेबच्या शोधकांनी त्याचा उपयोग कसा केला याबद्दल जाणून घेण्याची संधी घ्या. काही उपयुक्त साइट्स:
+## 🚀 आव्हान  
+
+ब्राउझर एक्स्टेंशन स्टोअरवर एक नजर टाका आणि तुमच्या ब्राउझरमध्ये एक एक्स्टेंशन इंस्टॉल करा. तुम्ही त्याच्या फाइल्स मनोरंजक प्रकारे तपासू शकता. तुम्हाला काय सापडते?  
+
+## पोस्ट-लेक्चर क्विझ  
+
+[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/24)  
+
+## पुनरावलोकन आणि स्व-अभ्यास  
+
+या धड्यात तुम्ही वेब ब्राउझरच्या इतिहासाबद्दल थोडेसे शिकले; वर्ल्ड वाइड वेबच्या शोधकांनी त्याचा उपयोग कसा केला जावा याबद्दल अधिक जाणून घेण्यासाठी ही संधी घ्या. काही उपयुक्त साइट्स:  
+
+[वेब ब्राउझर्सचा इतिहास](https://www.mozilla.org/firefox/browsers/browser-history/)  
+
+[वेबचा इतिहास](https://webfoundation.org/about/vision/history-of-the-web/)  
+
+[टिम बर्नर्स-ली यांची मुलाखत](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**  
+- [ ] Chrome/Edge एक्स्टेंशन्स पृष्ठ उघडा (chrome://extensions) आणि तुमच्याकडे काय इंस्टॉल आहे ते एक्सप्लोर करा  
+- [ ] तुमच्या ब्राउझरच्या DevTools नेटवर्क टॅबमध्ये वेबपेज लोड करताना पहा  
+- [ ] पेज सोर्स (Ctrl+U) पाहून HTML संरचना तपासा  
+- [ ] कोणत्याही वेबपेज घटकाची तपासणी करा आणि DevTools मध्ये त्याचा CSS बदला  
+
+### 🎯 **तुम्ही एका तासात काय साध्य करू शकता**  
+- [ ] पोस्ट-लेक्चर क्विझ पूर्ण करा आणि ब्राउझर मूलभूत गोष्टी समजून घ्या  
+- [ ] ब्राउझर एक्स्टेंशनसाठी मूलभूत manifest.json फाइल तयार करा  
+- [ ] एक साधे "Hello World" एक्स्टेंशन तयार करा जे पॉपअप दाखवते  
+- [ ] तुमचे एक्स्टेंशन डेव्हलपर मोडमध्ये लोड करण्याची चाचणी करा  
+- [ ] तुमच्या लक्ष्य ब्राउझरसाठी ब्राउझर एक्स्टेंशन दस्तऐवज एक्सप्लोर करा  
+
+### 📅 **तुमचा आठवडाभराचा एक्स्टेंशन प्रवास**  
+- [ ] वास्तविक उपयोगासह कार्यात्मक ब्राउझर एक्स्टेंशन पूर्ण करा  
+- [ ] कंटेंट स्क्रिप्ट्स, बॅकग्राउंड स्क्रिप्ट्स आणि पॉपअप इंटरॅक्शनबद्दल जाणून घ्या  
+- [ ] स्टोरेज, टॅब्स आणि मेसेजिंग यासारख्या ब्राउझर APIs मध्ये प्रावीण्य मिळवा  
+- [ ] तुमच्या एक्स्टेंशनसाठी वापरकर्ता-अनुकूल इंटरफेस डिझाइन करा  
+- [ ] वेगवेगळ्या वेबसाइट्स आणि परिस्थितींमध्ये तुमच्या एक्स्टेंशनची चाचणी करा  
+- [ ] तुमचे एक्स्टेंशन ब्राउझरच्या एक्स्टेंशन स्टोअरमध्ये प्रकाशित करा  
+
+### 🌟 **तुमचा महिनाभराचा ब्राउझर विकास**  
+- [ ] वेगवेगळ्या वापरकर्ता समस्यांचे निराकरण करणारी अनेक एक्स्टेंशन्स तयार करा  
+- [ ] प्रगत ब्राउझर APIs आणि सुरक्षा सर्वोत्तम पद्धती शिकणे  
+- [ ] ओपन सोर्स ब्राउझर एक्स्टेंशन प्रकल्पांमध्ये योगदान द्या  
+- [ ] क्रॉस-ब्राउझर सुसंगतता आणि प्रोग्रेसिव्ह एन्हांसमेंटमध्ये प्रावीण्य मिळवा  
+- [ ] इतरांसाठी एक्स्टेंशन विकास साधने आणि टेम्पलेट्स तयार करा  
+- [ ] ब्राउझर एक्स्टेंशन तज्ञ बना जो इतर विकसकांना मदत करतो  
+
+## 🎯 तुमचा ब्राउझर एक्स्टेंशन मास्टरी टाइमलाइन  
+
+```mermaid
+timeline
+    title Browser Extension Development Progression
+    
+    section Foundation (15 minutes)
+        Browser Understanding: Core architecture
+                              : Rendering process
+                              : Extension integration points
+        
+    section Setup (20 minutes)
+        Development Environment: Project structure
+                               : Build tools configuration
+                               : Browser developer mode
+                               : Extension loading process
+        
+    section Interface Design (25 minutes)
+        User Experience: HTML structure
+                       : CSS styling
+                       : Form validation
+                       : Responsive design
+        
+    section Core Functionality (35 minutes)
+        JavaScript Integration: Event handling
+                              : API interactions
+                              : Data storage
+                              : Error handling
+        
+    section Browser APIs (45 minutes)
+        Platform Integration: Permissions system
+                            : Storage APIs
+                            : Tab management
+                            : Context menus
+        
+    section Advanced Features (1 week)
+        Professional Extensions: Background scripts
+                               : Content scripts
+                               : Cross-browser compatibility
+                               : Performance optimization
+        
+    section Publishing (2 weeks)
+        Distribution: Store submission
+                   : Review process
+                   : User feedback
+                   : Update management
+        
+    section Expert Level (1 month)
+        Extension Ecosystem: Advanced APIs
+                           : Security best practices
+                           : Enterprise features
+                           : Framework integration
+```
+  
+### 🛠️ तुमचा एक्स्टेंशन विकास टूलकिट सारांश  
 
-[वेब ब्राउझर्सचा इतिहास](https://www.mozilla.org/firefox/browsers/browser-history/)
+या धड्याचा अभ्यास केल्यानंतर, तुमच्याकडे आता आहे:  
+- **ब्राउझर आर्किटेक्चर ज्ञान**: रेंडरिंग इंजिन्स, सुरक्षा मॉडेल्स आणि एक्स्टेंशन इंटिग्रेशनची समज  
+- **विकास वातावरण**: Webpack, NPM आणि डिबगिंग क्षमतांसह आधुनिक टूलचेन  
+- **UI/UX पाया**: प्रगत प्रकटीकरण पॅटर्नसह सेमॅंटिक HTML संरचना  
+- **सुरक्षा जागरूकता**: ब्राउझर परवानग्या आणि सुरक्षित विकास पद्धतींची समज  
+- **क्रॉस-ब्राउझर संकल्पना**: सुसंगतता विचार आणि चाचणी दृष्टिकोनांचे ज्ञान  
+- **API इंटिग्रेशन**: बाह्य डेटा स्रोतांसह काम करण्याचा पाया  
+- **व्यावसायिक कार्यप्रवाह**: उद्योग-मानक विकास आणि चाचणी प्रक्रिया  
 
-[वेबचा इतिहास](https://webfoundation.org/about/vision/history-of-the-web/)
+**वास्तविक-जगातील अनुप्रयोग**: या कौशल्यांचा थेट उपयोग:  
+- **वेब विकास**: सिंगल-पेज अॅप्लिकेशन्स आणि प्रोग्रेसिव्ह वेब अॅप्स  
+- **डेस्कटॉप अॅप्लिकेशन्स**: Electron आणि वेब-आधारित डेस्कटॉप सॉफ्टवेअर  
+- **मोबाइल विकास**: हायब्रिड अॅप्स आणि वेब-आधारित मोबाइल सोल्यूशन्स  
+- **एंटरप्राइज टूल्स**: अंतर्गत उत्पादकता अॅप्लिकेशन्स आणि कार्यप्रवाह ऑटोमेशन  
+- **ओपन सोर्स**: ब्राउझर एक्स्टेंशन प्रकल्प आणि वेब मानकांमध्ये योगदान  
 
-[टिम बर्नर्स-ली यांची मुलाखत](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+**पुढील स्तर**: तुम्ही परस्परसंवादी कार्यक्षमता जोडण्यासाठी, ब्राउझर APIs सह काम करण्यासाठी आणि वास्तविक वापरकर्ता समस्यांचे निराकरण करणारी एक्स्टेंशन्स तयार करण्यासाठी तयार आहात!  
 
-## असाइनमेंट 
+## असाइनमेंट  
 
-[तुमचा विस्तार पुन्हा डिझाइन करा](assignment.md)
+[तुमचे एक्स्टेंशन पुन्हा डिझाइन करा](assignment.md)  
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
diff --git a/translations/mr/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/mr/5-browser-extension/2-forms-browsers-local-storage/README.md
index af28809cb9..b91b742ea8 100644
--- a/translations/mr/5-browser-extension/2-forms-browsers-local-storage/README.md
+++ b/translations/mr/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -1,35 +1,109 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8c8cd4af6086cc1d47e1d43aa4983d20",
-  "translation_date": "2025-10-22T16:35:58+00:00",
+  "original_hash": "2b6203a48c48d8234e0948353b47d84e",
+  "translation_date": "2025-11-03T15:06:41+00:00",
   "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
   "language_code": "mr"
 }
 -->
 # ब्राउझर एक्स्टेंशन प्रोजेक्ट भाग 2: API कॉल करा, लोकल स्टोरेज वापरा
 
-## पूर्व-व्याख्यान क्विझ
+```mermaid
+journey
+    title Your API Integration & Storage Journey
+    section Foundation
+      Setup DOM references: 3: Student
+      Add event listeners: 4: Student
+      Handle form submission: 4: Student
+    section Data Management
+      Implement local storage: 4: Student
+      Build API calls: 5: Student
+      Handle async operations: 5: Student
+    section User Experience
+      Add error handling: 5: Student
+      Create loading states: 4: Student
+      Polish interactions: 5: Student
+```
+
+## प्री-लेक्चर क्विझ
 
-[पूर्व-व्याख्यान क्विझ](https://ff-quizzes.netlify.app/web/quiz/25)
+[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/25)
 
 ## परिचय
 
-आपण तयार केलेल्या ब्राउझर एक्स्टेंशनची आठवण आहे का? सध्या तुमच्याकडे एक छान दिसणारा फॉर्म आहे, पण तो मुख्यतः स्थिर आहे. आज आपण त्याला वास्तविक डेटा जोडून आणि त्याला मेमरी देऊन जिवंत करणार आहोत.
+तुम्ही तयार करत असलेल्या ब्राउझर एक्स्टेंशनची आठवण आहे का? सध्या तुमच्याकडे एक छान दिसणारा फॉर्म आहे, पण तो मुख्यतः स्थिर आहे. आज आपण त्याला वास्तविक डेटा जोडून आणि त्याला मेमरी देऊन जिवंत करू.
 
-अपोलो मिशन कंट्रोल संगणकांचा विचार करा - त्यांनी फक्त निश्चित माहिती प्रदर्शित केली नाही. ते सतत अंतराळ यानाशी संवाद साधत होते, टेलिमेट्री डेटा अपडेट करत होते आणि महत्त्वाचे मिशन पॅरामीटर्स लक्षात ठेवत होते. आज आपण तयार करत असलेल्या डायनॅमिक वर्तनाचा प्रकार आहे. तुमचे एक्स्टेंशन इंटरनेटवर पोहोचेल, वास्तविक पर्यावरणीय डेटा मिळवेल आणि पुढच्या वेळी तुमच्या सेटिंग्ज लक्षात ठेवेल.
+अपोलो मिशन कंट्रोल संगणकांचा विचार करा - त्यांनी फक्त निश्चित माहिती प्रदर्शित केली नाही. ते सतत अंतराळ यानाशी संवाद साधत होते, टेलिमेट्री डेटा अपडेट करत होते आणि महत्त्वाचे मिशन पॅरामीटर्स लक्षात ठेवत होते. आज आपण तयार करत असलेल्या एक्स्टेंशनमध्ये असाच डायनॅमिक वर्तन असेल. तुमचे एक्स्टेंशन इंटरनेटशी संपर्क साधेल, वास्तविक पर्यावरणीय डेटा मिळवेल आणि पुढच्या वेळी तुमच्या सेटिंग्ज लक्षात ठेवेल.
 
-API एकत्रीकरण जटिल वाटू शकते, परंतु हे तुमच्या कोडला इतर सेवांशी संवाद साधण्यास शिकवण्यासारखे आहे. तुम्ही हवामान डेटा, सोशल मीडिया फीड्स किंवा कार्बन फूटप्रिंट माहिती मिळवत असाल, जसे आपण आज करणार आहोत, हे सर्व या डिजिटल कनेक्शन स्थापित करण्याबद्दल आहे. ब्राउझर माहिती टिकवून ठेवू शकतात हे देखील आपण एक्सप्लोर करू - जसे की लायब्ररींनी कार्ड कॅटलॉग वापरून पुस्तके कुठे आहेत हे लक्षात ठेवले आहे.
+API इंटिग्रेशन जटिल वाटू शकते, परंतु ते इतर सेवांशी संवाद साधण्यास तुमच्या कोडला शिकवण्यासारखे आहे. तुम्ही हवामान डेटा, सोशल मीडिया फीड्स किंवा कार्बन फूटप्रिंट माहिती मिळवत असाल, जसे आपण आज करणार आहोत, ते डिजिटल कनेक्शन स्थापित करण्याबद्दल आहे. ब्राउझर माहिती टिकवून ठेवू शकतात हे कसे शोधायचे ते देखील आपण पाहू - जसे लायब्ररींनी कार्ड कॅटलॉग वापरून पुस्तके कुठे आहेत हे लक्षात ठेवले.
 
 या धड्याच्या शेवटी, तुमच्याकडे एक ब्राउझर एक्स्टेंशन असेल जे वास्तविक डेटा मिळवते, वापरकर्ता प्राधान्ये साठवते आणि एक सहज अनुभव प्रदान करते. चला सुरुवात करूया!
 
-✅ योग्य फाइल्समधील क्रमांकित विभागांचे अनुसरण करा जेथे तुमचा कोड ठेवायचा आहे ते जाणून घेण्यासाठी.
-
-## एक्स्टेंशनमध्ये घटक सेट करा
-
-तुमचा जावास्क्रिप्ट इंटरफेसमध्ये फेरफार करू शकतो, त्याआधी त्याला विशिष्ट HTML घटकांचे संदर्भ आवश्यक आहेत. गॅलिलिओने ज्युपिटरचे चंद्र अभ्यास करण्याआधी ज्युपिटरला शोधून त्यावर लक्ष केंद्रित करावे लागले होते, त्याप्रमाणे दूरदर्शकाला विशिष्ट ताऱ्यांकडे लक्ष केंद्रित करावे लागते.
+```mermaid
+mindmap
+  root((Dynamic Extensions))
+    DOM Manipulation
+      Element Selection
+      Event Handling
+      State Management
+      UI Updates
+    Local Storage
+      Data Persistence
+      Key-Value Pairs
+      Session Management
+      User Preferences
+    API Integration
+      HTTP Requests
+      Authentication
+      Data Parsing
+      Error Handling
+    Async Programming
+      Promises
+      Async/Await
+      Error Catching
+      Non-blocking Code
+    User Experience
+      Loading States
+      Error Messages
+      Smooth Transitions
+      Data Validation
+```
 
-तुमच्या `index.js` फाइलमध्ये, आम्ही `const` व्हेरिएबल्स तयार करू जे प्रत्येक महत्त्वाच्या फॉर्म घटकाचे संदर्भ कॅप्चर करतात. हे वैज्ञानिकांनी त्यांच्या उपकरणांना लेबल देण्यासारखे आहे - प्रत्येक वेळी संपूर्ण प्रयोगशाळेत शोधण्याऐवजी, ते थेट त्यांना आवश्यक असलेल्या गोष्टींमध्ये प्रवेश करू शकतात.
+✅ योग्य फाइल्समधील क्रमांकित विभागांचे अनुसरण करा आणि तुमचा कोड कुठे ठेवायचा ते जाणून घ्या
+
+## एक्स्टेंशनमध्ये बदल करण्यासाठी घटक सेट करा
+
+तुमचा जावास्क्रिप्ट इंटरफेसमध्ये बदल करू शकतो, त्याआधी त्याला विशिष्ट HTML घटकांचे संदर्भ आवश्यक आहेत. जसे दुर्बिणीला विशिष्ट ताऱ्यांकडे लक्ष केंद्रित करावे लागते - गॅलिलिओने ज्युपिटरचे चंद्र अभ्यास करण्याआधी त्याला ज्युपिटर शोधून त्यावर लक्ष केंद्रित करावे लागले.
+
+तुमच्या `index.js` फाइलमध्ये, आपण प्रत्येक महत्त्वाच्या फॉर्म घटकांचे संदर्भ कॅप्चर करणारे `const` व्हेरिएबल्स तयार करू. हे वैज्ञानिकांनी त्यांच्या उपकरणांना लेबल करण्यासारखे आहे - प्रत्येक वेळी संपूर्ण प्रयोगशाळा शोधण्याऐवजी, ते थेट त्यांना आवश्यक असलेल्या गोष्टींवर प्रवेश करू शकतात.
+
+```mermaid
+flowchart LR
+    A[JavaScript Code] --> B[document.querySelector]
+    B --> C[CSS Selectors]
+    C --> D[HTML Elements]
+    
+    D --> E[".form-data"]
+    D --> F[".region-name"]
+    D --> G[".api-key"]
+    D --> H[".loading"]
+    D --> I[".errors"]
+    D --> J[".result-container"]
+    
+    E --> K[Form Element]
+    F --> L[Input Field]
+    G --> M[Input Field]
+    H --> N[UI Element]
+    I --> O[UI Element]
+    J --> P[UI Element]
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style K fill:#fff3e0
+    style L fill:#fff3e0
+    style M fill:#fff3e0
+```
 
 ```javascript
 // form fields
@@ -47,16 +121,39 @@ const myregion = document.querySelector('.my-region');
 const clearBtn = document.querySelector('.clear-btn');
 ```
 
-**या कोडचे कार्य:**
-- **कॅप्चर करते** फॉर्म घटक `document.querySelector()` वापरून CSS वर्ग सिलेक्टर्ससह
-- **निर्माण करते** API की आणि प्रदेश नावासाठी इनपुट फील्डचे संदर्भ
-- **जोडते** कार्बन वापर डेटा प्रदर्शित करण्यासाठी परिणाम प्रदर्शन घटकांशी कनेक्शन
-- **सेट अप करते** UI घटकांमध्ये लोडिंग इंडिकेटर्स आणि त्रुटी संदेशांसाठी प्रवेश
-- **साठवते** प्रत्येक घटक संदर्भ `const` व्हेरिएबलमध्ये जेणेकरून तुमच्या कोडमध्ये सहजपणे पुन्हा वापरता येईल
+**या कोडमध्ये काय होते:**
+- **कॅप्चर करते** फॉर्म घटक `document.querySelector()` वापरून CSS क्लास सिलेक्टर्ससह
+- **निर्माण करते** इनपुट फील्ड्ससाठी संदर्भ क्षेत्राचे नाव आणि API कीसाठी
+- **जोडते** कार्बन वापर डेटा प्रदर्शित करणाऱ्या घटकांशी कनेक्शन
+- **सेट करते** UI घटकांवर प्रवेश जसे लोडिंग इंडिकेटर्स आणि एरर मेसेजेस
+- **साठवते** प्रत्येक घटक संदर्भ `const` व्हेरिएबलमध्ये जेणेकरून तुमच्या कोडमध्ये सहज वापरता येईल
 
 ## इव्हेंट लिसनर्स जोडा
 
-आता तुमचे एक्स्टेंशन वापरकर्त्याच्या क्रियांसाठी प्रतिसाद देईल. इव्हेंट लिसनर्स हे तुमच्या कोडचे वापरकर्ता संवादांचे निरीक्षण करण्याचे साधन आहे. ते सुरुवातीच्या टेलिफोन एक्सचेंजमधील ऑपरेटरसारखे आहेत - ते येणाऱ्या कॉल्ससाठी ऐकतात आणि कोणीतरी कनेक्शन करायचे असल्यास योग्य सर्किट्स जोडतात.
+आता तुमचे एक्स्टेंशन वापरकर्त्याच्या क्रियाकलापांना प्रतिसाद देईल. इव्हेंट लिसनर्स हे वापरकर्त्याच्या संवादावर लक्ष ठेवण्याचा तुमच्या कोडचा मार्ग आहे. ते सुरुवातीच्या टेलिफोन एक्सचेंजमधील ऑपरेटरसारखे आहेत - ते येणाऱ्या कॉल्ससाठी ऐकतात आणि कोणीतरी कनेक्शन करायचे असल्यास योग्य सर्किट्स जोडतात.
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Form
+    participant JavaScript
+    participant API
+    participant Storage
+    
+    User->>Form: Fills out region/API key
+    User->>Form: Clicks submit
+    Form->>JavaScript: Triggers submit event
+    JavaScript->>JavaScript: handleSubmit(e)
+    JavaScript->>Storage: Save user preferences
+    JavaScript->>API: Fetch carbon data
+    API->>JavaScript: Returns data
+    JavaScript->>Form: Update UI with results
+    
+    User->>Form: Clicks clear button
+    Form->>JavaScript: Triggers click event
+    JavaScript->>Storage: Clear saved data
+    JavaScript->>Form: Reset to initial state
+```
 
 ```javascript
 form.addEventListener('submit', (e) => handleSubmit(e));
@@ -65,16 +162,26 @@ init();
 ```
 
 **या संकल्पना समजून घ्या:**
-- **जोडते** फॉर्मला सबमिट लिसनर जेव्हा वापरकर्ते एंटर प्रेस करतात किंवा सबमिट क्लिक करतात तेव्हा ट्रिगर होते
-- **कनेक्ट करते** फॉर्म रीसेट करण्यासाठी क्लिअर बटणावर क्लिक लिसनर
+- **जोडते** फॉर्मला सबमिट लिसनर जेव्हा वापरकर्ते एंटर प्रेस करतात किंवा सबमिट क्लिक करतात
+- **कनेक्ट करते** क्लिअर बटणावर क्लिक लिसनर फॉर्म रीसेट करण्यासाठी
 - **पास करते** इव्हेंट ऑब्जेक्ट `(e)` हँडलर फंक्शन्ससाठी अतिरिक्त नियंत्रणासाठी
-- **कॉल करते** `init()` फंक्शन लगेचच तुमच्या एक्स्टेंशनची सुरुवातीची स्थिती सेट करण्यासाठी
+- **कॉल करते** `init()` फंक्शन लगेच एक्स्टेंशनची सुरुवातीची स्थिती सेट करण्यासाठी
 
-✅ येथे वापरलेले शॉर्टहँड अॅरो फंक्शन सिंटॅक्स लक्षात घ्या. पारंपरिक फंक्शन एक्सप्रेशन्सपेक्षा आधुनिक जावास्क्रिप्ट दृष्टिकोन स्वच्छ आहे, परंतु दोन्ही समान रीतीने कार्य करतात!
+✅ येथे वापरलेले शॉर्टहँड अ‍ॅरो फंक्शन सिंटॅक्स लक्षात घ्या. पारंपरिक फंक्शन एक्सप्रेशन्सपेक्षा आधुनिक जावास्क्रिप्ट दृष्टिकोन स्वच्छ आहे, परंतु दोन्ही समान कार्य करतात!
+
+### 🔄 **शैक्षणिक तपासणी**
+**इव्हेंट हँडलिंग समजून घेणे**: इनिशियलायझेशनकडे जाण्यापूर्वी, सुनिश्चित करा की तुम्ही:
+- ✅ कसे `addEventListener` वापरकर्त्याच्या क्रियाकलापांना जावास्क्रिप्ट फंक्शन्सशी जोडते ते स्पष्ट करू शकता
+- ✅ का आपण इव्हेंट ऑब्जेक्ट `(e)` हँडलर फंक्शन्सला पास करतो ते समजून घ्या
+- ✅ `submit` आणि `click` इव्हेंट्समधील फरक ओळखू शकता
+- ✅ `init()` फंक्शन कधी चालते आणि का चालते ते वर्णन करू शकता
+
+**जलद स्व-परीक्षण**: जर तुम्ही फॉर्म सबमिशनमध्ये `e.preventDefault()` विसरलात तर काय होईल?
+*उत्तर: पृष्ठ पुन्हा लोड होईल, सर्व जावास्क्रिप्ट स्थिती गमावेल आणि वापरकर्ता अनुभव खंडित होईल*
 
 ## इनिशियलायझेशन आणि रीसेट फंक्शन्स तयार करा
 
-तुमच्या एक्स्टेंशनसाठी इनिशियलायझेशन लॉजिक तयार करूया. `init()` फंक्शन हे जहाजाच्या नेव्हिगेशन सिस्टमसारखे आहे जे त्याच्या उपकरणांची तपासणी करते - ते वर्तमान स्थिती ठरवते आणि त्यानुसार इंटरफेस समायोजित करते. हे तपासते की कोणीतरी तुमचे एक्स्टेंशन आधी वापरले आहे का आणि त्यांची पूर्वीची सेटिंग्ज लोड करते.
+तुमच्या एक्स्टेंशनसाठी इनिशियलायझेशन लॉजिक तयार करूया. `init()` फंक्शन हे जहाजाच्या नेव्हिगेशन सिस्टमसारखे आहे जे त्याच्या उपकरणांची तपासणी करते - ते वर्तमान स्थिती ठरवते आणि त्यानुसार इंटरफेस समायोजित करते. हे तपासते की कोणी तुमचे एक्स्टेंशन आधी वापरले आहे का आणि त्यांचे पूर्वीचे सेटिंग्ज लोड करते.
 
 `reset()` फंक्शन वापरकर्त्यांना नवीन सुरुवात प्रदान करते - जसे वैज्ञानिक त्यांच्या उपकरणे प्रयोगांदरम्यान रीसेट करतात जेणेकरून स्वच्छ डेटा सुनिश्चित होईल.
 
@@ -113,39 +220,63 @@ function reset(e) {
 ```
 
 **येथे काय होते ते समजून घ्या:**
-- **मिळवते** ब्राउझरच्या लोकल स्टोरेजमधून साठवलेली API की आणि प्रदेश
+- **मिळवते** ब्राउझरच्या लोकल स्टोरेजमधून साठवलेली API की आणि क्षेत्र
 - **तपासते** हा प्रथमच वापरकर्ता आहे (कोणतेही साठवलेले क्रेडेन्शियल्स नाहीत) किंवा परतणारा वापरकर्ता
 - **दाखवते** नवीन वापरकर्त्यांसाठी सेटअप फॉर्म आणि इतर इंटरफेस घटक लपवते
-- **लोड करते** परतणाऱ्या वापरकर्त्यांसाठी स्वयंचलितपणे साठवलेला डेटा आणि रीसेट पर्याय प्रदर्शित करते
+- **स्वयंचलितपणे लोड करते** परतणाऱ्या वापरकर्त्यांसाठी साठवलेला डेटा आणि रीसेट पर्याय प्रदर्शित करते
 - **व्यवस्थापित करते** उपलब्ध डेटावर आधारित वापरकर्ता इंटरफेस स्थिती
 
 **लोकल स्टोरेजबद्दल महत्त्वाच्या संकल्पना:**
 - **टिकवते** ब्राउझर सत्रांदरम्यान डेटा (सेशन स्टोरेजच्या विपरीत)
 - **साठवते** डेटा की-वॅल्यू जोड्यांमध्ये `getItem()` आणि `setItem()` वापरून
-- **परत करते** `null` जेव्हा दिलेल्या कीसाठी कोणताही डेटा अस्तित्वात नाही
+- **परत करते** `null` जेव्हा दिलेल्या कीसाठी कोणताही डेटा अस्तित्वात नसतो
 - **प्रदान करते** वापरकर्ता प्राधान्ये आणि सेटिंग्ज लक्षात ठेवण्यासाठी सोपा मार्ग
 
-> 💡 **ब्राउझर स्टोरेज समजून घेणे**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) तुमच्या एक्स्टेंशनला कायमस्वरूपी मेमरी देण्यासारखे आहे. प्राचीन अलेक्झांड्रिया लायब्ररीने स्क्रोल्स कसे साठवले - माहिती विद्वान सोडून परत आल्यावरही उपलब्ध राहिली.
+> 💡 **ब्राउझर स्टोरेज समजून घेणे**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) तुमच्या एक्स्टेंशनला टिकाऊ मेमरी देण्यासारखे आहे. प्राचीन अलेक्झांड्रिया लायब्ररीने स्क्रोल्स कसे साठवले याचा विचार करा - विद्वान सोडून परत आल्यावरही माहिती उपलब्ध राहिली.
 >
-> **महत्त्वाचे वैशिष्ट्ये:**
+> **महत्त्वाच्या वैशिष्ट्ये:**
 > - **टिकवते** डेटा ब्राउझर बंद केल्यानंतरही
-> - **जिवंत राहते** संगणक रीस्टार्ट्स आणि ब्राउझर क्रॅशेसनंतर
+> - **जिवंत राहते** संगणक पुन्हा सुरू केल्यानंतर आणि ब्राउझर क्रॅश झाल्यानंतर
 > - **प्रदान करते** वापरकर्ता प्राधान्यांसाठी मोठ्या प्रमाणात स्टोरेज स्पेस
-> - **तत्काळ प्रवेश देते** नेटवर्क विलंबाशिवाय
+> - **त्वरित प्रवेश देते** नेटवर्क विलंबाशिवाय
 
-> **महत्त्वाची टीप**: तुमच्या ब्राउझर एक्स्टेंशनला त्याचे स्वतःचे वेगळे लोकल स्टोरेज आहे जे नियमित वेब पृष्ठांपासून वेगळे आहे. हे सुरक्षा प्रदान करते आणि इतर वेबसाइट्ससह संघर्ष टाळते.
+> **महत्त्वाची टीप**: तुमच्या ब्राउझर एक्स्टेंशनमध्ये त्याचे स्वतःचे वेगळे लोकल स्टोरेज आहे जे नियमित वेब पृष्ठांपासून वेगळे आहे. यामुळे सुरक्षा मिळते आणि इतर वेबसाइट्ससोबत संघर्ष टाळला जातो.
 
 तुमचा साठवलेला डेटा पाहण्यासाठी ब्राउझर डेव्हलपर टूल्स (F12) उघडा, **Application** टॅबवर जा आणि **Local Storage** विभाग विस्तृत करा.
 
+```mermaid
+stateDiagram-v2
+    [*] --> CheckStorage: Extension starts
+    CheckStorage --> FirstTime: No stored data
+    CheckStorage --> Returning: Data found
+    
+    FirstTime --> ShowForm: Display setup form
+    ShowForm --> UserInput: User enters data
+    UserInput --> SaveData: Store in localStorage
+    SaveData --> FetchAPI: Get carbon data
+    
+    Returning --> LoadData: Read from localStorage
+    LoadData --> FetchAPI: Get carbon data
+    
+    FetchAPI --> ShowResults: Display data
+    ShowResults --> UserAction: User interacts
+    
+    UserAction --> Reset: Clear button clicked
+    UserAction --> ShowResults: View data
+    
+    Reset --> ClearStorage: Remove saved data
+    ClearStorage --> FirstTime: Back to setup
+```
+
 ![लोकल स्टोरेज पॅन](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.mr.png)
 
-> ⚠️ **सुरक्षा विचार**: उत्पादन अनुप्रयोगांमध्ये, लोकल स्टोरेजमध्ये API की साठवणे सुरक्षा जोखीम निर्माण करते कारण जावास्क्रिप्टला हा डेटा प्रवेश करता येतो. शिकण्यासाठी, हा दृष्टिकोन ठीक आहे, परंतु वास्तविक अनुप्रयोग संवेदनशील क्रेडेन्शियल्ससाठी सुरक्षित सर्व्हर-साइड स्टोरेज वापरावे.
+> ⚠️ **सुरक्षा विचार**: उत्पादन ऍप्लिकेशन्समध्ये, लोकल स्टोरेजमध्ये API की साठवणे सुरक्षा जोखीम निर्माण करते कारण जावास्क्रिप्टला हा डेटा प्रवेश करता येतो. शिकण्यासाठी, हा दृष्टिकोन ठीक आहे, परंतु वास्तविक ऍप्लिकेशन्स संवेदनशील क्रेडेन्शियल्ससाठी सुरक्षित सर्व्हर-साइड स्टोरेज वापरतात.
 
 ## फॉर्म सबमिशन हाताळा
 
-आता आपण कोणीतरी तुमचा फॉर्म सबमिट केल्यावर काय होते ते हाताळू. डीफॉल्टनुसार, ब्राउझर फॉर्म सबमिट केल्यावर पृष्ठ पुन्हा लोड करतात, परंतु आम्ही या वर्तनाला इंटरसेप्ट करून अधिक सहज अनुभव तयार करू.
+आता आपण पाहू की कोणीतरी तुमचा फॉर्म सबमिट केल्यावर काय होते. डीफॉल्टनुसार, ब्राउझर फॉर्म सबमिट केल्यावर पृष्ठ पुन्हा लोड करतात, परंतु आम्ही हा वर्तन अडवून एक सहज अनुभव तयार करू.
 
-ही पद्धत मिशन कंट्रोल अंतराळ यान संप्रेषण कसे हाताळते यासारखी आहे - प्रत्येक ट्रान्समिशनसाठी संपूर्ण प्रणाली रीसेट करण्याऐवजी, ते नवीन माहिती प्रक्रिया करत असताना सतत ऑपरेशन राखतात.
+हा दृष्टिकोन मिशन कंट्रोल अंतराळ यान संवाद कसा हाताळतो यासारखा आहे - प्रत्येक ट्रान्समिशनसाठी संपूर्ण सिस्टम रीसेट करण्याऐवजी, ते नवीन माहिती प्रक्रिया करत असताना सतत ऑपरेशन टिकवून ठेवतात.
 
 फॉर्म सबमिशन इव्हेंट कॅप्चर करणारे आणि वापरकर्त्याचा इनपुट काढणारे फंक्शन तयार करा:
 
@@ -158,15 +289,15 @@ function handleSubmit(e) {
 
 **वरीलमध्ये, आम्ही:**
 - **थांबवते** डीफॉल्ट फॉर्म सबमिशन वर्तन जे पृष्ठ रीफ्रेश करेल
-- **काढते** API की आणि प्रदेश फील्डमधून वापरकर्ता इनपुट मूल्ये
+- **काढते** API की आणि क्षेत्र फील्डमधून वापरकर्ता इनपुट मूल्ये
 - **पास करते** फॉर्म डेटा `setUpUser()` फंक्शनला प्रक्रिया करण्यासाठी
-- **राखते** पृष्ठ रीफ्रेश न करता सिंगल-पेज अॅप्लिकेशन वर्तन
+- **टिकवते** सिंगल-पेज ऍप्लिकेशन वर्तन पृष्ठ रीफ्रेश टाळून
 
-✅ लक्षात ठेवा की तुमच्या HTML फॉर्म फील्ड्समध्ये `required` अॅट्रिब्यूट समाविष्ट आहे, त्यामुळे ब्राउझर आपोआप सत्यापित करतो की वापरकर्त्यांनी हे फंक्शन चालण्यापूर्वी API की आणि प्रदेश प्रदान केला आहे.
+✅ लक्षात ठेवा की तुमच्या HTML फॉर्म फील्ड्समध्ये `required` अट आहे, त्यामुळे ब्राउझर आपोआप पडताळणी करतो की वापरकर्त्यांनी हे फंक्शन चालण्यापूर्वी API की आणि क्षेत्र प्रदान केले आहे.
 
 ## वापरकर्ता प्राधान्ये सेट करा
 
-`setUpUser` फंक्शन वापरकर्त्याच्या क्रेडेन्शियल्स साठवण्यासाठी आणि पहिला API कॉल सुरू करण्यासाठी जबाबदार आहे. हे सेटअपपासून परिणाम प्रदर्शित करण्यासाठी गुळगुळीत संक्रमण तयार करते.
+`setUpUser` फंक्शन वापरकर्त्याचे क्रेडेन्शियल्स साठवण्यास आणि पहिला API कॉल सुरू करण्यास जबाबदार आहे. हे सेटअपपासून परिणाम प्रदर्शित करण्यासाठी एक सहज संक्रमण तयार करते.
 
 ```javascript
 function setUpUser(apiKey, regionName) {
@@ -184,38 +315,68 @@ function setUpUser(apiKey, regionName) {
 }
 ```
 
-**पायरी-पायरीने, येथे काय होते:**
-- **साठवते** API की आणि प्रदेश नाव भविष्यातील वापरासाठी लोकल स्टोरेजमध्ये
-- **दाखवते** डेटा मिळवला जात आहे हे सूचित करण्यासाठी लोडिंग इंडिकेटर
-- **क्लिअर करते** प्रदर्शनातून कोणतेही पूर्वीचे त्रुटी संदेश
-- **दाखवते** वापरकर्त्यांसाठी क्लिअर बटण जेणेकरून ते नंतर त्यांच्या सेटिंग्ज रीसेट करू शकतील
-- **सुरू करते** वास्तविक कार्बन वापर डेटा मिळवण्यासाठी API कॉल
+**पायऱ्या-पायऱ्यांनी, येथे काय होते:**
+- **साठवते** API की आणि क्षेत्र नाव भविष्यातील वापरासाठी लोकल स्टोरेजमध्ये
+- **दाखवते** लोडिंग इंडिकेटर वापरकर्त्यांना डेटा मिळवला जात आहे हे कळवण्यासाठी
+- **क्लिअर करते** पूर्वीचे एरर मेसेजेस डिस्प्लेवरून
+- **दाखवते** क्लिअर बटण वापरकर्त्यांना नंतर त्यांचे सेटिंग्ज रीसेट करण्यासाठी
+- **सुरू करते** API कॉल वास्तविक कार्बन वापर डेटा मिळवण्यासाठी
 
-हे फंक्शन डेटा टिकवून ठेवणे आणि वापरकर्ता इंटरफेस अपडेट्स एकाच समन्वित क्रियेत व्यवस्थापित करून गुळगुळीत वापरकर्ता अनुभव तयार करते.
+हे फंक्शन डेटा टिकवून ठेवणे आणि वापरकर्ता इंटरफेस अपडेट्स एकत्रितपणे व्यवस्थापित करून एक सहज वापरकर्ता अनुभव तयार करते.
 
 ## कार्बन वापर डेटा प्रदर्शित करा
 
-आता आपण तुमचे एक्स्टेंशन बाह्य डेटा स्रोतांशी API द्वारे कनेक्ट करू. हे तुमचे एक्स्टेंशन एक स्वतंत्र साधन म्हणून बदलते जे इंटरनेटवरून रिअल-टाइम माहिती मिळवू शकते.
+आता आपण तुमचे एक्स्टेंशन बाह्य डेटा स्रोतांशी API द्वारे जोडू. हे तुमचे एक्स्टेंशन एक स्वतंत्र साधन म्हणून बदलते जे इंटरनेटवरून रिअल-टाइम माहिती मिळवू शकते.
 
 **API समजून घेणे**
 
-[APIs](https://www.webopedia.com/TERM/A/API.html) वेगवेगळ्या अनुप्रयोगांना एकमेकांशी संवाद साधण्याचा मार्ग आहेत. ते 19व्या शतकातील टेलिग्राफ सिस्टमसारखे आहेत ज्याने दूरच्या शहरांना जोडले - ऑपरेटर दूरच्या स्टेशनला विनंत्या पाठवतात आणि विनंती केलेल्या माहितीने प्रतिसाद मिळवतात. तुम्ही सोशल मीडिया तपासता, व्हॉइस असिस्टंटला प्रश्न विचारता किंवा डिलिव्हरी अॅप वापरता, APIs हे डेटा एक्सचेंज सुलभ करत आहेत.
+[APIs](https://www.webopedia.com/TERM/A/API.html) वेगवेगळ्या ऍप्लिकेशन्स एकमेकांशी संवाद साधण्याचा मार्ग आहेत. ते 19व्या शतकातील दूरच्या शहरांना जोडणाऱ्या टेलिग्राफ सिस्टमसारखे आहेत - ऑपरेटर दूरच्या स्टेशनला विनंत्या पाठवतात आणि विनंती केलेली माहिती मिळवतात. तुम्ही सोशल मीडिया तपासता, व्हॉइस असिस्टंटला प्रश्न विचारता किंवा डिलिव्हरी ऍप वापरता, तेव्हा API डेटा एक्सचेंज सुलभ करत असतात.
+
+```mermaid
+flowchart TD
+    A[Your Extension] --> B[HTTP Request]
+    B --> C[CO2 Signal API]
+    C --> D{Valid Request?}
+    D -->|Yes| E[Query Database]
+    D -->|No| F[Return Error]
+    E --> G[Carbon Data]
+    G --> H[JSON Response]
+    H --> I[Your Extension]
+    F --> I
+    I --> J[Update UI]
+    
+    subgraph "API Request"
+        K[Headers: auth-token]
+        L[Parameters: countryCode]
+        M[Method: GET]
+    end
+    
+    subgraph "API Response"
+        N[Carbon Intensity]
+        O[Fossil Fuel %]
+        P[Timestamp]
+    end
+    
+    style C fill:#e8f5e8
+    style G fill:#fff3e0
+    style I fill:#e1f5fe
+```
 
 **REST APIs बद्दल महत्त्वाच्या संकल्पना:**
 - **REST** म्हणजे 'Representational State Transfer'
-- **वापरते** मानक HTTP पद्धती (GET, POST, PUT, DELETE) डेटा संवाद साधण्यासाठी
-- **परत करते** डेटा अंदाजे स्वरूपात, सामान्यतः JSON
+- **वापरते** स्टँडर्ड HTTP पद्धती (GET, POST, PUT, DELETE) डेटा संवाद साधण्यासाठी
+- **परत करते** डेटा प्रेडिक्टेबल फॉरमॅट्समध्ये, सामान्यतः JSON
 - **प्रदान करते** वेगवेगळ्या प्रकारच्या विनंत्यांसाठी सुसंगत, URL-आधारित एंडपॉइंट्स
 
-✅ [CO2 Signal API](https://www.co2signal.com/) आम्ही वापरणार आहोत ते जगभरातील इलेक्ट्रिकल ग्रिड्समधून रिअल-टाइम कार्बन तीव्रता डेटा प्रदान करते. हे वापरकर्त्यांना त्यांच्या वीज वापराचा पर्यावरणीय प्रभाव समजून घेण्यास मदत करते!
+✅ [CO2 Signal API](https://www.co2signal.com/) आम्ही वापरणार आहोत ते जगभरातील इलेक्ट्रिकल ग्रिड्समधून रिअल-टाइम कार्बन इंटेन्सिटी डेटा प्रदान करते. हे वापरकर्त्यांना त्यांच्या वीज वापराचा पर्यावरणीय प्रभाव समजून घेण्यास मदत करते!
 
-> 💡 **असिंक्रोनस जावास्क्रिप्ट समजून घेणे**: [`async` कीवर्ड](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) तुमच्या कोडला एकाच वेळी अनेक ऑपरेशन्स हाताळण्यास सक्षम करते. जेव्हा तुम्ही सर्व्हरकडून डेटा विनंती करता, तेव्हा तुम्हाला तुमचे संपूर्ण एक्स्टेंशन गोठवायचे नाही - ते एअर ट्रॅफिक कंट्रोलसारखे असेल जे एका विमानाच्या प्रतिसादाची वाट पाहत असताना सर्व ऑपरेशन्स थांबवते.
+> 💡 **असिंक्रोनस जावास्क्रिप्ट समजून घेणे**: [`async` कीवर्ड](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) तुमच्या कोडला एकाच वेळी अनेक ऑपरेशन्स हाताळण्यास सक्षम करते. जेव्हा तुम्ही सर्व्हरकडून डेटा विनंती करता, तेव्हा तुम्हाला तुमचे संपूर्ण एक्स्टेंशन थांबवायचे नाही - ते एखाद्या विमानाला प्रतिसाद देण्यासाठी हवाई वाहतूक नियंत्रण सर्व ऑपरेशन्स थांबवण्यासारखे असेल.
 >
 > **महत्त्वाचे फायदे:**
-> - **राखते** डेटा लोड करत असताना एक्स्टेंशन प्रतिसादक्षमता
+> - **टिकवते** डेटा लोड करत असताना एक्स्टेंशन प्रतिसादक्षमता
 > - **परवानगी देते** नेटवर्क विनंत्यांदरम्यान इतर कोड चालू ठेवण्यासाठी
-> - **वाढवते** पारंपरिक कॉलबॅक पॅटर्नच्या तुलनेत कोड वाचनीयता
-> - **सक्षम करते** नेटवर्क समस्यांसाठी ग्रेसफुल त्रुटी हाताळणी
+> - **वाढवते** पारंपरिक कॉलबॅक पॅटर्नच्या तुलनेत कोड वाचण्यायोग्यता
+> - **सक्षम करते** नेटवर्क समस्यांसाठी ग्रेसफुल एरर हँडलिंग
 
 `async` बद्दल एक जलद व्हिडिओ येथे आहे:
 
@@ -223,83 +384,170 @@ function setUpUser(apiKey, regionName) {
 
 > 🎥 वरच्या प्रतिमेवर क्लिक करा `async/await` बद्दल व्हिडिओसाठी.
 
+### 🔄 **शैक्षणिक तपासणी**
+**असिंक्रोनस प्रोग्रामिंग समजून घेणे**: API फंक्शनमध्ये जाण्यापूर्वी, सुनिश्चित करा की तुम्ही समजता:
+- ✅ का आपण `async/await` वापरतो संपूर्ण एक्स्टेंशन थांबवण्याऐवजी
+- ✅ कसे `try/catch` ब्लॉक्स नेटवर्क एरर ग्रेसफुली हाताळतात
+- ✅ समकालीन आणि असिंक्रोनस ऑपरेशन्समधील फरक
+- ✅ API कॉल्स का अयशस्वी होऊ शकतात आणि त्या अयशस्वीतेचे व्यवस्थापन कसे करावे
+
+**वास्तविक-जगातील कनेक्शन**: या रोजच्या असिंक्रोनस उदाहरणांचा विचार करा:
+- **अन्न ऑर्डर करणे**: तुम्ही स्वयंपाकघराजवळ थांबत नाही - तुम्हाला पावती मिळते आणि इतर क्रियाकलाप सुरू ठेवता
+- **ईमेल पाठवणे**: तुमचे ईमेल ऍप पाठवताना थांबत नाही - तुम्ही अधिक ईमेल तयार करू शकता
+- **वेब पृष्ठे लोड करणे**: प्रतिमा प्रगतपणे लोड होतात आणि तुम्ही आधीच मजकूर वाचू शकता
+
+**API ऑथेंटिकेशन फ्लो**:
+```mermaid
+sequenceDiagram
+    participant Ext as Extension
+    participant API as CO2 Signal API
+    participant DB as Database
+    
+    Ext->>API: Request with auth-token
+    API->>API: Validate token
+    API->>DB: Query carbon data
+    DB->>API: Return data
+    API->>Ext: JSON response
+    Ext->>Ext: Update UI
+```
+
 कार्बन वापर डेटा मिळवण्यासाठी आणि प्रदर्शित करण्यासाठी फंक्शन तयार करा:
 
-```javascript
-// Modern fetch API approach (no external dependencies needed)
-async function displayCarbonUsage(apiKey, region) {
-	try {
-		// Fetch carbon intensity data from CO2 Signal API
-		const response = await fetch('https://api.co2signal.com/v1/latest', {
-			method: 'GET',
-			headers: {
-				'auth-token': apiKey,
-				'Content-Type': 'application/json'
-			},
-			// Add query parameters for the specific region
-			...new URLSearchParams({ countryCode: region }) && {
-				url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
-			}
-		});
-
-		// Check if the API request was successful
-		if (!response.ok) {
-			throw new Error(`API request failed: ${response.status}`);
-		}
-
-		const data = await response.json();
-		const carbonData = data.data;
-
-		// Calculate rounded carbon intensity value
-		const carbonIntensity = Math.round(carbonData.carbonIntensity);
-
-		// Update the user interface with fetched data
-		loading.style.display = 'none';
-		form.style.display = 'none';
-		myregion.textContent = region.toUpperCase();
-		usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
-		fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
-		results.style.display = 'block';
+@@
+**वर्णन:** ब्राउझर विस्तारामध्ये सुधारणा करून त्रुटी हाताळणी सुधारणा आणि वापरकर्ता अनुभव वैशिष्ट्ये जोडा. ही आव्हाने तुम्हाला API, स्थानिक स्टोरेज आणि आधुनिक JavaScript पॅटर्न वापरून DOM मॅनिप्युलेशनवर काम करण्याचा सराव करण्यास मदत करेल.
+
+**सूचना:** displayCarbonUsage फंक्शनची सुधारित आवृत्ती तयार करा ज्यामध्ये समाविष्ट असेल: 1) API कॉल अयशस्वी झाल्यास एक्स्पोनेंशियल बॅकऑफसह पुन्हा प्रयत्न करण्याचा यंत्रणा, 2) API कॉल करण्यापूर्वी क्षेत्र कोडसाठी इनपुट सत्यापन, 3) प्रगती निर्देशकांसह लोडिंग अ‍ॅनिमेशन, 4) स्थानिक स्टोरेजमध्ये API प्रतिसादांचे 30 मिनिटांसाठी कालबाह्य टाइमस्टॅम्पसह कॅशिंग, आणि 5) मागील API कॉलमधून ऐतिहासिक डेटा प्रदर्शित करण्याचे वैशिष्ट्य. तसेच सर्व फंक्शन पॅरामीटर्स आणि रिटर्न प्रकारांचे दस्तऐवजीकरण करण्यासाठी योग्य TypeScript-शैलीतील JSDoc टिप्पण्या जोडा.
+
+[एजंट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
+
+## 🚀 आव्हान
+
+API चा अभ्यास करून वेब विकासासाठी उपलब्ध असलेल्या ब्राउझर-आधारित API चा सखोल अभ्यास करा. या ब्राउझर API पैकी एक निवडा आणि एक छोटा डेमो तयार करा:
+
+- [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - वापरकर्त्याचे वर्तमान स्थान मिळवा
+- [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - डेस्कटॉप सूचना पाठवा
+- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - परस्परसंवादी ड्रॅग इंटरफेस तयार करा
+- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - प्रगत स्थानिक स्टोरेज तंत्रज्ञान
+- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - XMLHttpRequest साठी आधुनिक पर्याय
+
+**संशोधनासाठी प्रश्न विचारात घ्या:**
+- हा API कोणती वास्तविक समस्या सोडवतो?
+- API त्रुटी आणि काठाच्या प्रकरणांशी कसे हाताळतो?
+- हा API वापरताना कोणते सुरक्षा विचार आहेत?
+- वेगवेगळ्या ब्राउझरमध्ये हा API किती प्रमाणात समर्थित आहे?
+
+तुमच्या संशोधनानंतर, कोणत्या वैशिष्ट्यांमुळे API विकसक-अनुकूल आणि विश्वासार्ह बनतो हे ओळखा.
+
+## पोस्ट-लेक्चर क्विझ
+
+[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/26)
+
+## पुनरावलोकन आणि स्व-अभ्यास
+
+या धड्यात तुम्ही स्थानिक स्टोरेज आणि API बद्दल शिकले, जे व्यावसायिक वेब विकसकासाठी खूप उपयुक्त आहेत. हे दोन गोष्टी एकत्र कशा कार्य करतात याचा विचार करू शकता का? अशा वेबसाइटची रचना कशी कराल याचा विचार करा जी API द्वारे वापरण्यासाठी आयटम संग्रहित करेल.
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] DevTools Application टॅब उघडा आणि कोणत्याही वेबसाइटवरील स्थानिक स्टोरेज एक्सप्लोर करा
+- [ ] एक साधा HTML फॉर्म तयार करा आणि ब्राउझरमध्ये फॉर्म सत्यापन तपासा
+- [ ] ब्राउझर कन्सोलमध्ये स्थानिक स्टोरेज वापरून डेटा संग्रहित आणि पुनर्प्राप्त करण्याचा प्रयत्न करा
+- [ ] सबमिट केलेल्या फॉर्म डेटाचा नेटवर्क टॅब वापरून तपास करा
+
+### 🎯 **तुम्ही एका तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि फॉर्म हाताळणी संकल्पना समजून घ्या
+- [ ] वापरकर्ता प्राधान्ये जतन करणारा ब्राउझर विस्तार फॉर्म तयार करा
+- [ ] उपयुक्त त्रुटी संदेशांसह क्लायंट-साइड फॉर्म सत्यापन लागू करा
+- [ ] विस्तार डेटा टिकवण्यासाठी chrome.storage API वापरण्याचा सराव करा
+- [ ] जतन केलेल्या वापरकर्ता सेटिंग्जला प्रतिसाद देणारे वापरकर्ता इंटरफेस तयार करा
+
+### 📅 **तुमचा आठवडाभराचा विस्तार तयार करणे**
+- [ ] फॉर्म कार्यक्षमतेसह पूर्ण-वैशिष्ट्यीकृत ब्राउझर विस्तार पूर्ण करा
+- [ ] वेगवेगळ्या स्टोरेज पर्यायांमध्ये प्रावीण्य मिळवा: स्थानिक, सिंक आणि सत्र स्टोरेज
+- [ ] ऑटो-कंप्लीट आणि सत्यापन यासारख्या प्रगत फॉर्म वैशिष्ट्ये लागू करा
+- [ ] वापरकर्ता डेटासाठी आयात/निर्यात कार्यक्षमता जोडा
+- [ ] वेगवेगळ्या ब्राउझरमध्ये तुमचा विस्तार पूर्णपणे तपासा
+- [ ] तुमच्या विस्ताराचा वापरकर्ता अनुभव आणि त्रुटी हाताळणी सुधारित करा
+
+### 🌟 **तुमचा महिनाभराचा वेब API प्रावीण्य**
+- [ ] विविध ब्राउझर स्टोरेज API वापरून जटिल अनुप्रयोग तयार करा
+- [ ] ऑफलाइन-प्रथम विकास पॅटर्नबद्दल शिका
+- [ ] डेटा टिकवण्याशी संबंधित ओपन सोर्स प्रकल्पांमध्ये योगदान द्या
+- [ ] गोपनीयता-केंद्रित विकास आणि GDPR अनुपालनात प्रावीण्य मिळवा
+- [ ] फॉर्म हाताळणी आणि डेटा व्यवस्थापनासाठी पुनर्वापरयोग्य लायब्ररी तयार करा
+- [ ] वेब API आणि विस्तार विकासाबद्दल ज्ञान सामायिक करा
+
+## 🎯 तुमचा विस्तार विकास प्रावीण्य टाइमलाइन
+
+```mermaid
+timeline
+    title API Integration & Storage Learning Progression
+    
+    section DOM Fundamentals (15 minutes)
+        Element References: querySelector mastery
+                          : Event listener setup
+                          : State management basics
+        
+    section Local Storage (20 minutes)
+        Data Persistence: Key-value storage
+                        : Session management
+                        : User preference handling
+                        : Storage inspection tools
+        
+    section Form Handling (25 minutes)
+        User Input: Form validation
+                  : Event prevention
+                  : Data extraction
+                  : UI state transitions
+        
+    section API Integration (35 minutes)
+        External Communication: HTTP requests
+                              : Authentication patterns
+                              : JSON data parsing
+                              : Response handling
+        
+    section Async Programming (40 minutes)
+        Modern JavaScript: Promise handling
+                         : Async/await patterns
+                         : Error management
+                         : Non-blocking operations
+        
+    section Error Handling (30 minutes)
+        Robust Applications: Try/catch blocks
+                           : User-friendly messages
+                           : Graceful degradation
+                           : Debugging techniques
+        
+    section Advanced Patterns (1 week)
+        Professional Development: Caching strategies
+                                : Rate limiting
+                                : Retry mechanisms
+                                : Performance optimization
+        
+    section Production Skills (1 month)
+        Enterprise Features: Security best practices
+                           : API versioning
+                           : Monitoring & logging
+                           : Scalable architecture
+```
 
-		// TODO: calculateColor(carbonIntensity) - implement in next lesson
+### 🛠️ तुमचा फुल-स्टॅक विकास टूलकिट सारांश
 
-	} catch (error) {
-		console.error('Error fetching carbon data:', error);
-		
-		// Show user-friendly error message
-		loading.style.display = 'none';
-		results.style.display = 'none';
-		errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
-	}
-}
-```
+या धड्याचा अभ्यास केल्यानंतर, तुमच्याकडे आता आहे:
+- **DOM प्रावीण्य**: अचूक घटक लक्ष्यीकरण आणि मॅनिप्युलेशन
+- **स्टोरेज कौशल्य**: स्थानिक स्टोरेजसह टिकाऊ डेटा व्यवस्थापन
+- **API एकत्रीकरण**: रिअल-टाइम डेटा फेचिंग आणि प्रमाणीकरण
+- **असिंक्रोनस प्रोग्रामिंग**: आधुनिक JavaScript सह नॉन-ब्लॉकिंग ऑपरेशन्स
+- **त्रुटी हाताळणी**: अपयशांना सौम्यपणे हाताळणारे मजबूत अनुप्रयोग
+- **वापरकर्ता अनुभव**: लोडिंग स्टेट्स, सत्यापन आणि गुळगुळीत संवाद
+- **आधुनिक पॅटर्न्स**: fetch API, async/await, आणि ES6+ वैशिष्ट्ये
 
-**येथे काय होते ते समजून घ्या:**
-- **वापरते** आधुनिक `fetch()` API बाह्य लायब्ररींसारख्या Axios ऐवजी स्वच्छ, dependency-free कोडसाठी
-- **अंमलात आणते** योग्य त्रुटी तपासणी `response.ok` सह API अपयश लवकर पकडण्यासाठी
-- **हाताळते** असिंक्रोनस ऑपरेशन्स `async/await` सह अधिक वाचनीय कोड फ्लोसाठी
-- **प्रमाणित करते** CO2 Signal API `auth-token` हेडर वापरून
-- **पार्स करते** JSON प्रतिसाद डेटा आणि कार्बन तीव्रता माहिती काढते
-- **अपडेट करते** अनेक UI घटक स्वरूपित पर्यावरणीय डेटासह
-- **प्रदान करते** वापरकर्त्यासाठी त्रुटी संदेश जेव्हा API कॉल अपयशी होतात
-
-**महत्त्वाच्या आधुनिक जावास्क्रिप्ट संकल्पना प्रदर्शित केल्या:**
-- **टेम्पलेट लिटरल्स** `${}` सिंटॅक्ससह स्वच्छ स्ट्रिंग स्वरूपनासाठी
-- **त्रुटी हाताळणी** मजबूत अनुप्रयोगांसाठी try/catch ब्लॉक्ससह
-- **Async/await** पॅटर्न नेटवर्क विनंत्या ग्रेसफुली हाताळण्यासाठी
-- **ऑब्जेक्ट डीस्ट्रक्चरिंग** API प्रतिसादांमधून विशिष्ट डेटा काढण्यासाठी
-- **मेथड चेनिंग** अनेक DOM फेरफारांसाठी
-
-✅ हे फंक्शन अनेक महत्त्वाच्या वेब विकास संकल्पना प्रदर्शित करते - बाह्य सर्व्हरशी संवाद साधणे, प्रमाणीकरण हाताळणे, डेटा प्रक्रिया करणे, इंटरफेस अपडेट करणे आणि त्रुटी ग्रेसफुली व्यवस्थापित करणे. हे व्यावसायिक विकसक नियमितपणे वापरत असलेल्या मूलभूत कौशल्यांपैकी आहेत.
-
-🎉 **तुम्ही काय साध्य केले आहे:** तुम्ही एक ब्राउझर एक्स्टेंशन तयार केले आहे जे:
-- **कनेक्ट करते** इंटरनेटशी आणि वास्तविक पर्यावरणीय डेटा मिळवते
-- **टिकवते** वापरकर्ता सेटिंग्ज सत्रांदरम्यान
-- **हाताळते** त्रुटी ग्रेसफुली क्रॅश होण्याऐवजी
-- **प्रदान करते** गुळगुळीत, व्यावसायिक वापरकर्ता अनुभव
-
-तुमचे काम तपासा `npm run build` चालवून आणि ब्राउझरमध्ये तुमचे एक्स्टेंशन रीफ्रेश करून. आता तुमच्याकडे एक कार्यक्षम कार्बन फूटप्रिं
-तुम्ही या धड्यात LocalStorage आणि APIs बद्दल शिकला, जे व्यावसायिक वेब डेव्हलपरसाठी खूप उपयुक्त आहेत. तुम्ही विचार करू शकता की हे दोन गोष्टी एकत्र कशा कार्य करतात? अशा वेबसाइटची रचना कशी कराल जी API द्वारे वापरण्यासाठी आयटम्स संग्रहित करेल याचा विचार करा.
+**व्यावसायिक कौशल्ये मिळवली:** तुम्ही खालील पद्धती लागू केल्या आहेत:
+- **वेब अनुप्रयोग**: बाह्य डेटा स्रोतांसह सिंगल-पेज अ‍ॅप्स
+- **मोबाइल विकास**: ऑफलाइन क्षमता असलेले API-चालित अ‍ॅप्स
+- **डेस्कटॉप सॉफ्टवेअर**: टिकाऊ स्टोरेजसह इलेक्ट्रॉन अ‍ॅप्स
+- **एंटरप्राइज सिस्टीम्स**: प्रमाणीकरण, कॅशिंग आणि त्रुटी हाताळणी
+- **आधुनिक फ्रेमवर्क्स**: React/Vue/Angular डेटा व्यवस्थापन पॅटर्न्स
+
+**पुढील स्तर:** तुम्ही कॅशिंग रणनीती, रिअल-टाइम WebSocket कनेक्शन किंवा जटिल स्टेट व्यवस्थापन यासारख्या प्रगत विषयांचा अभ्यास करण्यास तयार आहात!
 
 ## असाइनमेंट
 
@@ -308,4 +556,4 @@ async function displayCarbonUsage(apiKey, region) {
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/mr/5-browser-extension/3-background-tasks-and-performance/README.md
index 414fd19d5f..161ba29ad6 100644
--- a/translations/mr/5-browser-extension/3-background-tasks-and-performance/README.md
+++ b/translations/mr/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -1,111 +1,265 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "eb358f3f4c2c082f9f3a4f98efa1d337",
-  "translation_date": "2025-10-22T16:34:23+00:00",
+  "original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
+  "translation_date": "2025-11-03T15:04:54+00:00",
   "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
   "language_code": "mr"
 }
 -->
-# ब्राउझर विस्तार प्रकल्प भाग ३: पार्श्वभूमी कार्ये आणि कार्यक्षमता जाणून घ्या
+# ब्राउझर विस्तार प्रकल्प भाग 3: पार्श्वभूमी कार्ये आणि कार्यक्षमता जाणून घ्या
+
+```mermaid
+journey
+    title Your Performance Optimization Journey
+    section Foundation
+      Learn browser tools: 3: Student
+      Understand profiling: 4: Student
+      Identify bottlenecks: 4: Student
+    section Extension Features
+      Build color system: 4: Student
+      Create background tasks: 5: Student
+      Update icons dynamically: 5: Student
+    section Optimization
+      Monitor performance: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
 
-कधी विचार केला आहे का की काही ब्राउझर विस्तार जलद आणि प्रतिसादात्मक वाटतात तर काही मंद वाटतात? यामागचे रहस्य पडद्यामागे काय चालले आहे यामध्ये आहे. वापरकर्ते तुमच्या विस्ताराच्या इंटरफेसवर क्लिक करत असताना, डेटा फेचिंग, आयकॉन अपडेट्स आणि सिस्टम संसाधने व्यवस्थापित करणाऱ्या पार्श्वभूमी प्रक्रियांचा एक संपूर्ण जग शांतपणे कार्यरत असतो.
+कधी विचार केला आहे का की काही ब्राउझर विस्तार जलद आणि प्रतिसादात्मक का वाटतात तर काही मंद वाटतात? यामागचे रहस्य पडद्यामागे काय चालले आहे यामध्ये आहे. जेव्हा वापरकर्ते तुमच्या विस्ताराच्या इंटरफेसवर क्लिक करतात, तेव्हा पार्श्वभूमी प्रक्रियांचा एक संपूर्ण जग डेटा मिळवणे, आयकॉन अपडेट्स आणि सिस्टम संसाधनांचे व्यवस्थापन शांतपणे करत असते.
 
-हा ब्राउझर विस्तार मालिकेतील आमचा अंतिम धडा आहे आणि आम्ही तुमचा कार्बन फूटप्रिंट ट्रॅकर सुरळीत चालेल याची खात्री करणार आहोत. तुम्ही डायनॅमिक आयकॉन अपडेट्स जोडाल आणि समस्या होण्यापूर्वी कार्यक्षमता समस्या कशा ओळखायच्या ते शिकाल. हे रेस कार ट्यूनिंगसारखे आहे - लहान ऑप्टिमायझेशन्समुळे सर्वकाही कसे चालते यावर मोठा फरक पडतो.
+हा ब्राउझर विस्तार मालिकेतील आमचा अंतिम धडा आहे आणि आम्ही तुमचा कार्बन फूटप्रिंट ट्रॅकर सुरळीतपणे कार्य करेल याची खात्री करणार आहोत. तुम्ही डायनॅमिक आयकॉन अपडेट्स जोडाल आणि कार्यक्षमता समस्या ओळखायला शिकाल, जेणेकरून त्या समस्या होण्याआधीच टाळता येतील. हे रेस कार ट्यून करण्यासारखे आहे - लहान सुधारणा सर्वकाही कसे चालते यामध्ये मोठा फरक करू शकतात.
 
-जेव्हा आपण पूर्ण करू, तेव्हा तुमच्याकडे एक पॉलिश केलेला विस्तार असेल आणि चांगल्या वेब अॅप्स आणि उत्कृष्ट वेब अॅप्समधील कार्यक्षमता तत्त्वे समजतील. चला ब्राउझर ऑप्टिमायझेशनच्या जगात डुबकी मारूया.
+जेव्हा आपण पूर्ण करू, तेव्हा तुमच्याकडे एक परिपूर्ण विस्तार असेल आणि चांगल्या वेब अॅप्स आणि उत्कृष्ट वेब अॅप्समधील कार्यक्षमता तत्त्वे समजतील. चला ब्राउझर ऑप्टिमायझेशनच्या जगात डुबकी मारूया.
 
-## प्री-लेक्चर क्विझ
+## पूर्व-व्याख्यान प्रश्नमंजुषा
 
-[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/27)
+[पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/27)
 
 ### परिचय
 
-आमच्या मागील धड्यांमध्ये, तुम्ही एक फॉर्म तयार केला, API शी कनेक्ट केला आणि असिंक्रोनस डेटा फेचिंग हाताळले. तुमचा विस्तार चांगल्या प्रकारे आकार घेत आहे.
-
-आता आपल्याला अंतिम टच जोडण्याची आवश्यकता आहे - जसे की त्या विस्तार आयकॉनला कार्बन डेटावर आधारित रंग बदलणे. हे मला आठवण करून देते की नासाला अपोलो अंतराळ यानावर प्रत्येक प्रणाली ऑप्टिमाइझ करावी लागली. ते कोणतेही सायकल किंवा मेमरी वाया घालवू शकत नव्हते कारण कार्यक्षमतेवर जीव अवलंबून होते. जरी आमचा ब्राउझर विस्तार तितका गंभीर नाही, तरीही त्याच तत्त्वे लागू होतात - कार्यक्षम कोड चांगले वापरकर्ता अनुभव तयार करतो.
+आमच्या मागील धड्यांमध्ये, तुम्ही एक फॉर्म तयार केला, API शी जोडले आणि असिंक्रोनस डेटा मिळवण्याचा सामना केला. तुमचा विस्तार चांगल्या प्रकारे आकार घेत आहे.
+
+आता आपल्याला अंतिम टच जोडायचे आहेत - जसे की कार्बन डेटावर आधारित विस्तार आयकॉनचे रंग बदलणे. हे मला आठवण करून देते की NASA ला अपोलो अंतराळयानावर प्रत्येक प्रणाली ऑप्टिमाइझ करावी लागली. त्यांना कोणतेही वाया जाणारे सायकल किंवा मेमरी परवडत नव्हते कारण कार्यक्षमता महत्त्वाची होती. जरी आपला ब्राउझर विस्तार तितका गंभीर नाही, तरीही त्याच तत्त्वे लागू होतात - कार्यक्षम कोड चांगले वापरकर्ता अनुभव तयार करतो.
+
+```mermaid
+mindmap
+  root((Performance & Background Tasks))
+    Browser Performance
+      Rendering Pipeline
+      Asset Optimization
+      DOM Manipulation
+      JavaScript Execution
+    Profiling Tools
+      Developer Tools
+      Performance Tab
+      Timeline Analysis
+      Bottleneck Detection
+    Extension Architecture
+      Background Scripts
+      Content Scripts
+      Message Passing
+      Icon Management
+    Optimization Strategies
+      Code Splitting
+      Lazy Loading
+      Caching
+      Resource Compression
+    Visual Feedback
+      Dynamic Icons
+      Color Coding
+      Real-time Updates
+      User Experience
+```
 
 ## वेब कार्यक्षमता मूलभूत गोष्टी
 
-जेव्हा तुमचा कोड कार्यक्षमतेने चालतो, तेव्हा लोकांना प्रत्यक्षात *फरक* जाणवतो. तुम्हाला माहित आहे का तो क्षण जेव्हा पृष्ठ त्वरित लोड होते किंवा अॅनिमेशन सहजतेने चालते? ती चांगली कार्यक्षमता आहे.
-
-कार्यक्षमता ही केवळ वेगाबद्दल नाही - ती वेब अनुभव नैसर्गिक वाटण्याबद्दल आहे, क्लंकी आणि निराशाजनक वाटण्याऐवजी. संगणकाच्या सुरुवातीच्या काळात, ग्रेस हॉपरने तिच्या डेस्कवर एक नॅनोसेकंद (सुमारे एक फूट लांब वायरचा तुकडा) ठेवला होता, ज्यामुळे प्रकाश एका सेकंदाच्या एक अब्जांशात किती अंतर प्रवास करतो हे दाखवले. संगणकीय प्रत्येक मायक्रोसेकंद का महत्त्वाचा आहे हे समजावून सांगण्याचा तिचा मार्ग होता. चला शोध साधनांचा शोध घेऊया जे तुम्हाला काय धीमे करत आहे ते शोधण्यात मदत करतात.
-
-> "वेबसाइट कार्यक्षमता दोन गोष्टींबद्दल आहे: पृष्ठ किती वेगाने लोड होते आणि त्यावरील कोड किती वेगाने चालतो." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
-
-तुमची वेबसाइट्स सर्व प्रकारच्या डिव्हाइसवर, सर्व प्रकारच्या वापरकर्त्यांसाठी, सर्व प्रकारच्या परिस्थितीत वेगाने कशा बनवायच्या याचा विषय, आश्चर्यकारकपणे विस्तृत आहे. तुम्ही मानक वेब प्रकल्प किंवा ब्राउझर विस्तार तयार करत असाल तर लक्षात ठेवण्यासारखे काही मुद्दे येथे आहेत.
-
-तुमच्या साइटला ऑप्टिमाइझ करण्याचा पहिला टप्पा म्हणजे हुडखाली काय चालले आहे ते समजून घेणे. सुदैवाने, तुमच्या ब्राउझरमध्ये शक्तिशाली शोध साधने अंगभूत आहेत.
+जेव्हा तुमचा कोड कार्यक्षमतेने चालतो, तेव्हा लोकांना प्रत्यक्षात *फरक* जाणवतो. तुम्हाला माहित आहे का तो क्षण जेव्हा एखादी पृष्ठ झटकन लोड होते किंवा अॅनिमेशन सहजतेने चालते? ती चांगली कार्यक्षमता आहे.
+
+कार्यक्षमता केवळ वेगाबद्दल नाही - ती वेब अनुभवांना नैसर्गिक वाटण्याबद्दल आहे, क्लंकी आणि निराशाजनक वाटण्याऐवजी. संगणकाच्या सुरुवातीच्या काळात, ग्रेस हॉपरने तिच्या डेस्कवर एक नॅनोसेकंद (सुमारे एक फूट लांब वायरचा तुकडा) ठेवला होता, ज्यामुळे प्रकाश एका सेकंदाच्या एक अब्जव्या भागात किती अंतर प्रवास करतो हे दाखवले. संगणनात प्रत्येक मायक्रोसेकंद का महत्त्वाचा आहे हे स्पष्ट करण्याचा तिचा मार्ग होता. चला शोध साधनांचा शोध घेऊया जे तुम्हाला गोष्टी मंदावण्याचे कारण शोधण्यात मदत करतात.
+
+> "वेबसाइट कार्यक्षमता दोन गोष्टींवर आधारित आहे: पृष्ठ किती वेगाने लोड होते आणि त्यावरील कोड किती वेगाने चालतो." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+तुमची वेबसाइट्स सर्व प्रकारच्या उपकरणांवर, सर्व प्रकारच्या वापरकर्त्यांसाठी, सर्व प्रकारच्या परिस्थितीत झपाट्याने कशी चालवायची याचा विषय, आश्चर्यकारकपणे विस्तृत आहे. येथे काही मुद्दे आहेत जे तुम्ही मानक वेब प्रकल्प किंवा ब्राउझर विस्तार तयार करताना लक्षात ठेवले पाहिजेत.
+
+तुमच्या साइटला ऑप्टिमाइझ करण्याचा पहिला टप्पा म्हणजे प्रत्यक्षात काय चालले आहे ते समजून घेणे. सुदैवाने, तुमच्या ब्राउझरमध्ये शक्तिशाली शोध साधने अंगभूत आहेत.
+
+```mermaid
+flowchart LR
+    A[HTML] --> B[Parse]
+    B --> C[DOM Tree]
+    D[CSS] --> E[Parse]
+    E --> F[CSSOM]
+    G[JavaScript] --> H[Execute]
+    
+    C --> I[Render Tree]
+    F --> I
+    H --> I
+    
+    I --> J[Layout]
+    J --> K[Paint]
+    K --> L[Composite]
+    L --> M[Display]
+    
+    subgraph "Critical Rendering Path"
+        N["1. Parse HTML"]
+        O["2. Parse CSS"]
+        P["3. Execute JS"]
+        Q["4. Build Render Tree"]
+        R["5. Layout Elements"]
+        S["6. Paint Pixels"]
+        T["7. Composite Layers"]
+    end
+    
+    style M fill:#e8f5e8
+    style I fill:#fff3e0
+    style H fill:#ffebee
+```
 
-Edge मध्ये Developer Tools उघडण्यासाठी, वरच्या उजव्या कोपर्यातील तीन डॉट्सवर क्लिक करा, नंतर More Tools > Developer Tools वर जा. किंवा कीबोर्ड शॉर्टकट वापरा: Windows वर `Ctrl` + `Shift` + `I` किंवा Mac वर `Option` + `Command` + `I`. एकदा तुम्ही तिथे गेल्यावर, Performance टॅबवर क्लिक करा - येथे तुम्ही तुमची तपासणी कराल.
+Edge मध्ये Developer Tools उघडण्यासाठी, वरच्या उजव्या कोपऱ्यातील तीन डॉट्सवर क्लिक करा, नंतर More Tools > Developer Tools वर जा. किंवा कीबोर्ड शॉर्टकट वापरा: Windows वर `Ctrl` + `Shift` + `I` किंवा Mac वर `Option` + `Command` + `I`. एकदा तुम्ही तिथे पोहोचलात की, Performance टॅबवर क्लिक करा - येथे तुम्ही तुमची तपासणी कराल.
 
 **तुमचे कार्यक्षमता शोध साधन:**
-- **उघडा** Developer Tools (तुम्ही हे सतत वापराल!)
+- **उघडा** Developer Tools (तुम्ही हे सतत वापरणार आहात!)
 - **जा** Performance टॅबवर - तुमच्या वेब अॅपचा फिटनेस ट्रॅकर समजा
-- **दाबा** Record बटण आणि तुमचे पृष्ठ क्रियेत पहा
-- **अभ्यास करा** परिणाम जे काय धीमे करत आहे ते शोधण्यासाठी
+- **दाबा** Record बटण आणि तुमच्या पृष्ठाला क्रियेत पहा
+- **अभ्यास करा** परिणाम जे गोष्टी मंदावण्याचे कारण शोधण्यात मदत करतील
 
-चला हे करून पाहूया. वेबसाइट उघडा (Microsoft.com चांगले काम करते) आणि 'Record' बटणावर क्लिक करा. आता पृष्ठ रीफ्रेश करा आणि प्रोफाइलरने काय घडते ते कॅप्चर करताना पहा. जेव्हा तुम्ही रेकॉर्डिंग थांबवाल, तेव्हा तुम्हाला ब्राउझर 'स्क्रिप्ट्स', 'रेंडर्स' आणि 'पेंट्स' साइट कशी करते याचे तपशीलवार ब्रेकडाउन दिसेल. हे मला आठवण करून देते की रॉकेट लॉन्च दरम्यान मिशन कंट्रोल प्रत्येक प्रणालीचे निरीक्षण कसे करते - तुम्हाला नेमके काय आणि कधी घडते यावर रिअल-टाइम डेटा मिळतो.
+चला हे करून पाहूया. एखादी वेबसाइट उघडा (Microsoft.com चांगली काम करते) आणि 'Record' बटणावर क्लिक करा. आता पृष्ठ रीफ्रेश करा आणि प्रोफाइलरने काय होते ते कॅप्चर करताना पहा. जेव्हा तुम्ही रेकॉर्डिंग थांबवाल, तेव्हा तुम्हाला ब्राउझर 'स्क्रिप्ट्स', 'रेंडर्स', आणि 'पेंट्स' साइट कशी करते याचे तपशीलवार विहंगावलोकन दिसेल. हे मला रॉकेट लॉन्च दरम्यान मिशन कंट्रोल प्रत्येक प्रणालीचे निरीक्षण कसे करते याची आठवण करून देते - तुम्हाला नेमके काय आणि कधी घडते याचे रिअल-टाइम डेटा मिळतो.
 
 ![Edge प्रोफाइलर](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.mr.png)
 
 ✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मध्ये अधिक तपशील आहेत जर तुम्हाला अधिक खोलवर जाण्याची इच्छा असेल
 
-> प्रो टिप: प्रथमच भेट देणाऱ्या अभ्यागतांसाठी तुमची साइट कशी कार्य करते हे पाहण्यासाठी चाचणीपूर्वी तुमचा ब्राउझर कॅशे साफ करा - ते सहसा पुनरावृत्ती भेटींपेक्षा खूप वेगळे असते!
+> प्रो टिप: चाचणी करण्यापूर्वी तुमचा ब्राउझर कॅशे साफ करा जेणेकरून तुमची साइट प्रथमच भेट देणाऱ्या वापरकर्त्यांसाठी कशी कार्य करते ते पाहता येईल - हे पुनरावृत्ती भेटींपेक्षा वेगळे असते!
 
-प्रोफाइल टाइमलाइनच्या घटकांची निवड करा जेणेकरून तुमचे पृष्ठ लोड होत असताना घडणाऱ्या घटनांवर झूम करता येईल.
+प्रोफाइल टाइमलाइनमधील घटक निवडा जेणेकरून तुमच्या पृष्ठ लोड होत असताना घडणाऱ्या घटनांवर झूम करता येईल.
 
 प्रोफाइल टाइमलाइनचा एक भाग निवडून आणि सारांश पॅन पाहून तुमच्या पृष्ठाच्या कार्यक्षमतेचा स्नॅपशॉट मिळवा:
 
 ![Edge प्रोफाइलर स्नॅपशॉट](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.mr.png)
 
-इव्हेंट लॉग पॅन तपासा की कोणत्याही इव्हेंटला १५ एमएसपेक्षा जास्त वेळ लागला आहे का:
+इव्हेंट लॉग पॅन तपासा की कोणत्याही इव्हेंटला 15 ms पेक्षा जास्त वेळ लागला आहे का:
 
 ![Edge इव्हेंट लॉग](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.mr.png)
 
-✅ तुमचा प्रोफाइलर ओळखा! या साइटवर डेव्हलपर टूल्स उघडा आणि काही अडथळे आहेत का ते पहा. सर्वात धीमे लोड होणारा घटक कोणता आहे? सर्वात जलद कोणता आहे?
+✅ तुमच्या प्रोफाइलरला ओळखा! या साइटवर Developer Tools उघडा आणि कोणतेही अडथळे आहेत का ते पहा. सर्वात मंद लोड होणारा घटक कोणता आहे? सर्वात जलद कोणता आहे?
+
+```mermaid
+flowchart TD
+    A[Open DevTools] --> B[Navigate to Performance Tab]
+    B --> C[Click Record Button]
+    C --> D[Perform Actions]
+    D --> E[Stop Recording]
+    E --> F{Analyze Results}
+    
+    F --> G[Check Timeline]
+    F --> H[Review Network]
+    F --> I[Examine Scripts]
+    F --> J[Identify Paint Events]
+    
+    G --> K{Long Tasks?}
+    H --> L{Large Assets?}
+    I --> M{Render Blocking?}
+    J --> N{Expensive Paints?}
+    
+    K -->|Yes| O[Optimize JavaScript]
+    L -->|Yes| P[Compress Assets]
+    M -->|Yes| Q[Add Async/Defer]
+    N -->|Yes| R[Simplify Styles]
+    
+    O --> S[Test Again]
+    P --> S
+    Q --> S
+    R --> S
+    
+    style A fill:#e1f5fe
+    style F fill:#fff3e0
+    style S fill:#e8f5e8
+```
 
-## प्रोफाइलिंग करताना काय शोधायचे
+## प्रोफाइलिंग करताना काय शोधावे
 
-प्रोफाइलर चालवणे ही फक्त सुरुवात आहे - खरी कौशल्य म्हणजे त्या रंगीत चार्ट्स तुम्हाला काय सांगत आहेत ते जाणून घेणे. काळजी करू नका, तुम्हाला ते वाचण्याची सवय होईल. अनुभवी विकसकांनी पूर्ण-फ्लॉन समस्या होण्यापूर्वी चेतावणी चिन्हे ओळखणे शिकले आहे.
+प्रोफाइलर चालवणे ही फक्त सुरुवात आहे - खरी कौशल्य म्हणजे त्या रंगीत चार्ट्स तुम्हाला काय सांगत आहेत ते समजून घेणे. काळजी करू नका, तुम्हाला ते वाचण्याची सवय होईल. अनुभवी विकसकांना पूर्ण-फुललेल्या समस्यांमध्ये बदलण्यापूर्वी चेतावणी चिन्हे ओळखण्याची सवय असते.
 
-चला सामान्य संशयितांबद्दल बोलूया - कार्यक्षमता अडचणी ज्या वेब प्रकल्पांमध्ये घुसण्याची प्रवृत्ती असते. जसे मेरी क्युरीला तिच्या प्रयोगशाळेत रेडिएशन पातळी काळजीपूर्वक निरीक्षण करावी लागली, तसे आम्हाला काही नमुन्यांसाठी पाहावे लागेल जे अडचणी निर्माण होण्याचे संकेत देतात. हे लवकर पकडल्याने तुम्हाला (आणि तुमच्या वापरकर्त्यांना) खूप निराशा वाचवता येईल.
+चला सामान्य संशयितांबद्दल बोलूया - कार्यक्षमता अडचणी ज्या वेब प्रकल्पांमध्ये घुसण्याची प्रवृत्ती असते. जसे मेरी क्युरीला तिच्या प्रयोगशाळेत रेडिएशन पातळी काळजीपूर्वक निरीक्षण करावी लागली, तसे आपल्याला काही नमुन्यांसाठी लक्ष ठेवावे लागते जे अडचणी निर्माण होण्याचे संकेत देतात. हे लवकर पकडल्याने तुम्हाला (आणि तुमच्या वापरकर्त्यांना) खूप निराशा वाचवेल.
 
-**अ‍ॅसेट साइजेस**: वेबसाइट्स वर्षानुवर्षे "जड" होत आहेत आणि त्या अतिरिक्त वजनाचा मोठा भाग प्रतिमांमधून येतो. जणू आपण आपल्या डिजिटल सूटकेसमध्ये अधिकाधिक भरत आहोत.
+**असेट आकार**: वेबसाइट्स वर्षानुवर्षे "जड" होत आहेत, आणि त्या अतिरिक्त वजनाचा मोठा भाग प्रतिमांमुळे आहे. जणू आपण आपल्या डिजिटल सूटकेसमध्ये अधिकाधिक भरत आहोत.
 
-✅ [Internet Archive](https://httparchive.org/reports/page-weight) तपासा की पृष्ठ आकार कसे वाढले आहेत - हे खूप उघड करणारे आहे.
+✅ [Internet Archive](https://httparchive.org/reports/page-weight) तपासा जे पृष्ठ आकार कसे वाढले आहेत ते दाखवते - हे खूप उघड करणारे आहे.
 
-**तुमची अ‍ॅसेट्स ऑप्टिमाइझ कशी ठेवायची:**
-- **कॉम्प्रेस करा** त्या प्रतिमा! WebP सारख्या आधुनिक स्वरूपामुळे फाइल आकार नाटकीयपणे कमी होऊ शकतो
-- **योग्य आकारात** प्रतिमा प्रत्येक डिव्हाइससाठी पाठवा - फोनवर मोठ्या डेस्कटॉप प्रतिमा पाठवण्याची गरज नाही
+**तुमच्या असेट्स ऑप्टिमाइझ कसे ठेवायचे:**
+- **कॉम्प्रेस करा** त्या प्रतिमा! WebP सारख्या आधुनिक स्वरूपात फाइल आकार मोठ्या प्रमाणात कमी होऊ शकतो
+- **योग्य प्रतिमा आकार** प्रत्येक उपकरणासाठी पाठवा - फोनवर मोठ्या डेस्कटॉप प्रतिमा पाठवण्याची गरज नाही
 - **मिनिफाय करा** तुमचे CSS आणि JavaScript - प्रत्येक बाइट महत्त्वाचा आहे
-- **लेझी लोडिंग वापरा** जेणेकरून प्रतिमा फक्त वापरकर्त्यांनी त्यांच्याकडे स्क्रोल केल्यावर डाउनलोड होतात
+- **लेझी लोडिंग वापरा** जेणेकरून प्रतिमा फक्त वापरकर्ते प्रत्यक्षात स्क्रोल केल्यावर डाउनलोड होतात
 
-**DOM ट्रॅव्हर्सल्स**: ब्राउझरला तुमच्या कोडवर आधारित त्याचा Document Object Model तयार करावा लागतो, त्यामुळे चांगल्या पृष्ठ कार्यक्षमतेच्या हितासाठी तुमचे टॅग्स कमीत कमी ठेवणे, पृष्ठाला आवश्यक असलेलेच वापरणे आणि स्टाइल करणे महत्त्वाचे आहे. या मुद्द्याला, पृष्ठाशी संबंधित अतिरिक्त CSS ऑप्टिमाइझ केले जाऊ शकते; ज्या शैली एका पृष्ठावरच वापरल्या जाणे आवश्यक आहेत त्या मुख्य शैली पत्रकात समाविष्ट करण्याची आवश्यकता नाही, उदाहरणार्थ.
+**DOM ट्रॅव्हर्सल्स**: ब्राउझरला तुमच्या कोडवर आधारित त्याचा Document Object Model तयार करावा लागतो, त्यामुळे चांगल्या पृष्ठ कार्यक्षमतेसाठी तुमचे टॅग्स कमी ठेवणे, पृष्ठाला आवश्यक असलेलेच वापरणे आणि स्टाइल करणे महत्त्वाचे आहे. या मुद्द्याला, पृष्ठाशी संबंधित अतिरिक्त CSS ऑप्टिमाइझ केले जाऊ शकते; ज्या शैली एका पृष्ठावर वापरल्या जाण्याची आवश्यकता आहे त्या मुख्य शैली पत्रकात समाविष्ट करण्याची आवश्यकता नाही, उदाहरणार्थ.
 
 **DOM ऑप्टिमायझेशनसाठी मुख्य रणनीती:**
-- **HTML घटकांची आणि नेस्टिंग स्तरांची संख्या कमी करा**
+- **HTML घटकांची संख्या आणि नेस्टिंग स्तर कमी करा**
 - **अवांछित CSS नियम काढून टाका आणि शैली पत्रके कार्यक्षमतेने एकत्र करा**
 - **प्रत्येक पृष्ठासाठी आवश्यक असलेले CSS लोड करा**
-- **HTML संरचना ब्राउझर पार्सिंगसाठी सेमॅंटिकली तयार करा**
+- **ब्राउझर पार्सिंगसाठी HTML संरचना अर्थपूर्ण ठेवा**
 
-**JavaScript**: प्रत्येक JavaScript विकसकाने 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्ससाठी पाहिले पाहिजे ज्यांना DOM ट्रॅव्हर्स आणि ब्राउझरवर पेंट करण्यापूर्वी लोड करणे आवश्यक आहे. तुमच्या इनलाइन स्क्रिप्ट्ससह `defer` वापरण्याचा विचार करा (जसे की Terrarium मॉड्यूलमध्ये केले जाते).
+**JavaScript**: प्रत्येक JavaScript विकसकाने 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्ससाठी लक्ष ठेवले पाहिजे ज्यांना DOM ट्रॅव्हर्सल आणि ब्राउझरवर पेंटिंग करण्यापूर्वी लोड करणे आवश्यक आहे. तुमच्या इनलाइन स्क्रिप्ट्ससह `defer` वापरण्याचा विचार करा (जसे की Terrarium मॉड्यूलमध्ये केले जाते).
 
 **आधुनिक JavaScript ऑप्टिमायझेशन तंत्र:**
-- **`defer` अॅट्रिब्यूट वापरा** जेणेकरून स्क्रिप्ट्स DOM पार्सिंगनंतर लोड होतील
-- **कोड स्प्लिटिंग अंमलात आणा** जेणेकरून फक्त आवश्यक JavaScript लोड होईल
+- **`defer` गुणधर्म वापरा** DOM पार्सिंगनंतर स्क्रिप्ट्स लोड करण्यासाठी
+- **कोड स्प्लिटिंग अंमलात आणा** फक्त आवश्यक JavaScript लोड करण्यासाठी
 - **नॉन-क्रिटिकल फंक्शनॅलिटीसाठी लेझी लोडिंग लागू करा**
 - **जड लायब्ररी आणि फ्रेमवर्कचा वापर शक्य असल्यास कमी करा**
 
-✅ साइट कार्यक्षमतेचा निर्धारण करण्यासाठी सामान्य तपासणीबद्दल अधिक जाणून घेण्यासाठी [Site Speed Test website](https://www.webpagetest.org/) वर काही साइट्स वापरून पहा.
+✅ साइट कार्यक्षमतेबद्दल सामान्य तपासणी शिकण्यासाठी [Site Speed Test website](https://www.webpagetest.org/) वर काही साइट्स वापरून पहा.
 
-आता तुम्हाला ब्राउझरने तुम्ही पाठवलेली अ‍ॅसेट्स कशी रेंडर केली याची कल्पना आहे, चला तुमचा विस्तार पूर्ण करण्यासाठी तुम्हाला करायच्या शेवटच्या काही गोष्टी पाहूया:
+### 🔄 **शैक्षणिक तपासणी**
+**कार्यक्षमता समजून घेणे**: विस्तार वैशिष्ट्ये तयार करण्यापूर्वी, खात्री करा की तुम्ही करू शकता:
+- ✅ HTML ते पिक्सलपर्यंतच्या महत्त्वाच्या रेंडरिंग पथाचे स्पष्टीकरण द्या
+- ✅ वेब अनुप्रयोगांमधील सामान्य कार्यक्षमता अडथळे ओळखा
+- ✅ ब्राउझर डेव्हलपर टूल्स वापरून पृष्ठ कार्यक्षमता प्रोफाइल करा
+- ✅ असेट आकार आणि DOM जटिलतेचा वेगावर होणारा परिणाम समजून घ्या
 
-### रंग गणना करण्यासाठी फंक्शन तयार करा
+**जलद स्व-परीक्षण**: रेंडर-ब्लॉकिंग JavaScript असल्यास काय होते?
+*उत्तर: ब्राउझरला स्क्रिप्ट डाउनलोड आणि अंमलात आणावी लागते, त्यानंतरच HTML पार्सिंग आणि पृष्ठ रेंडरिंग सुरू ठेवता येते*
 
-आता आपण एक फंक्शन तयार करू जे संख्यात्मक डेटाला अर्थपूर्ण रंगांमध्ये बदलते. याचा विचार ट्रॅफिक लाइट सिस्टमसारखा करा - स्वच्छ ऊर्जेसाठी हिरवा, उच्च कार्बन तीव्रतेसाठी लाल.
+**वास्तविक-जागतिक कार्यक्षमता परिणाम**:
+- **100ms विलंब**: वापरकर्त्यांना मंदी जाणवते
+- **1 सेकंद विलंब**: वापरकर्ते लक्ष केंद्रित करणे सोडतात
+- **3+ सेकंद**: 40% वापरकर्ते पृष्ठ सोडून जातात
+- **मोबाइल नेटवर्क्स**: कार्यक्षमता अधिक महत्त्वाची आहे
 
-हे फंक्शन आमच्या API मधून CO2 डेटा घेईल आणि पर्यावरणीय प्रभावाचे सर्वोत्तम प्रतिनिधित्व करणारा रंग ठरवेल. हे वैज्ञानिक जटिल डेटा नमुन्यांचे व्हिज्युअलायझेशन करण्यासाठी उष्णता नकाशांमध्ये रंग-कोडिंग कसे वापरतात यासारखे आहे - महासागर तापमानापासून ते तारा निर्मितीपर्यंत. चला हे `/src/index.js` मध्ये जोडूया, ज्या `const` व्हेरिएबल्स आम्ही आधी सेट केले होते त्यानंतर:
+आता तुम्हाला ब्राउझर तुमच्याकडून पाठवलेल्या असेट्स कसे रेंडर करतो याची कल्पना आहे, चला तुमचा विस्तार पूर्ण करण्यासाठी तुम्हाला करायच्या शेवटच्या काही गोष्टी पाहूया:
+
+### रंग गणना करण्यासाठी फंक्शन तयार करा
+
+आता आपण एक फंक्शन तयार करू जे संख्यात्मक डेटा अर्थपूर्ण रंगांमध्ये बदलते. याचा विचार ट्रॅफिक लाइट सिस्टमसारखा करा - स्वच्छ ऊर्जेसाठी हिरवा, उच्च कार्बन तीव्रतेसाठी लाल.
+
+हे फंक्शन आमच्या API मधून CO2 डेटा घेईल आणि पर्यावरणीय परिणामाचे सर्वोत्तम प्रतिनिधित्व करणारा रंग ठरवेल. हे वैज्ञानिक उष्णता नकाशांमध्ये जटिल डेटा नमुने व्हिज्युअलाइझ करण्यासाठी रंग-कोडिंग कसे वापरतात यासारखे आहे - महासागर तापमानापासून ते तारा निर्मितीपर्यंत. चला हे `/src/index.js` मध्ये जोडूया, ज्या `const` व्हेरिएबल्स आम्ही आधी सेट केले होते त्यानंतर:
+
+```mermaid
+flowchart LR
+    A[CO2 Value] --> B[Find Closest Scale Point]
+    B --> C[Get Scale Index]
+    C --> D[Map to Color]
+    D --> E[Send to Background]
+    
+    subgraph "Color Scale"
+        F["0-150: Green (Clean)"]
+        G["150-600: Yellow (Moderate)"]
+        H["600-750: Orange (High)"]
+        I["750+: Brown (Very High)"]
+    end
+    
+    subgraph "Message Passing"
+        J[Content Script]
+        K[chrome.runtime.sendMessage]
+        L[Background Script]
+        M[Icon Update]
+    end
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style E fill:#fff3e0
+```
 
 ```javascript
 function calculateColor(value) {
@@ -133,31 +287,50 @@ function calculateColor(value) {
 }
 ```
 
-**या हुशार लहान फंक्शनचे ब्रेकडाउन:**
+**चला या हुशार लहान फंक्शनचे विश्लेषण करूया:**
 - **दोन अ‍ॅरे सेट करते** - एक CO2 स्तरांसाठी, दुसरा रंगांसाठी (हिरवा = स्वच्छ, तपकिरी = घाणेरडा!)
 - **आमच्या वास्तविक CO2 मूल्याशी सर्वात जवळचा जुळणारा शोधतो** काही छान अ‍ॅरे सॉर्टिंग वापरून
 - **findIndex() पद्धतीचा वापर करून जुळणारा रंग मिळवतो**
 - **आमच्या निवडलेल्या रंगासह Chrome च्या पार्श्वभूमी स्क्रिप्टला संदेश पाठवतो**
-- **क्लीनर स्ट्रिंग फॉरमॅटिंगसाठी टेम्पलेट लिटरल्स (त्या बॅकटिक्स) वापरतो**
-- **const घोषणांसह सर्वकाही व्यवस्थित ठेवतो**
+- **स्वच्छ स्ट्रिंग स्वरूपनासाठी टेम्पलेट लिटरल्स (त्या बॅकटिक्स) वापरतो**
+- **सर्वकाही const घोषणांसह व्यवस्थित ठेवतो**
 
 `chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) तुमच्या विस्ताराचा मज्जासंस्था आहे - ते सर्व पडद्यामागील संवाद आणि कार्ये हाताळते:
 
-> "chrome.runtime API वापरून पार्श्वभूमी पृष्ठ पुनर्प्राप्त करा, मॅनिफेस्टबद्दल तपशील परत करा आणि अॅप किंवा विस्तार जीवनचक्रातील घटनांसाठी ऐका आणि प्रतिसाद द्या. तुम्ही URL च्या सापेक्ष मार्गांना पूर्णपणे पात्र URL मध्ये रूपांतरित करण्यासाठी देखील हे API वापरू शकता."
+> "chrome.runtime API वापरून पार्श्वभूमी पृष्ठ मिळवा, मॅनिफेस्टबद्दल तपशील परत करा आणि अॅप किंवा विस्तार जीवनचक्रातील घटनांसाठी ऐका आणि प्रतिसाद द्या. तुम्ही URL च्या सापेक्ष पथांना पूर्णपणे-योग्य URL मध्ये रूपांतरित करण्यासाठी देखील हे API वापरू शकता."
 
 **Chrome Runtime API का उपयुक्त आहे:**
-- **तुमच्या विस्ताराचे वेगवेगळे भाग एकमेकांशी संवाद साधू देते**
-- **पार्श्वभूमीचे कार्य UI गोठवण्याशिवाय हाताळते**
-- **तुमच्या विस्ताराच्या जीवनचक्राच्या घटनांचे व्यवस्थापन करते**
-- **स्क्रिप्ट्समधील संदेश पासिंग सुपर सोपे बनवते**
-
-✅ जर तुम्ही Edge साठी हा ब्राउझर विस्तार विकसित करत असाल, तर तुम्हाला आश्चर्य वाटेल की तुम्ही Chrome API वापरत आहात. Edge ब्राउझरच्या नवीन आवृत्त्या Chromium ब्राउझर इंजिनवर चालतात, त्यामुळे तुम्ही या साधनांचा लाभ घेऊ शकता.
+- **तुमच्या विस्ताराच्या वेगवेगळ्या भागांना एकमेकांशी संवाद साधू देते**
+- **पार्श्वभूमी कामे वापरकर्ता इंटरफेस गोठवण्याशिवाय हाताळते**
+- **तुमच्या विस्ताराच्या जीवनचक्रातील घटनांचे व्यवस्थापन करते**
+- **स्क्रिप्ट्समधील संदेश पासिंग खूप सोपे करते**
+
+✅ जर तुम्ही Edge साठी हा ब्राउझर विस्तार विकसित करत असाल, तर तुम्हाला आश्चर्य वाटेल की तुम्ही chrome API वापरत आहात. Edge ब्राउझरच्या नवीन आवृत्त्या Chromium ब्राउझर इंजिनवर चालतात, त्यामुळे तुम्ही या साधनांचा लाभ घेऊ शकता.
+
+```mermaid
+architecture-beta
+    group browser(logos:chrome)[Browser]
+    
+    service popup(logos:html5)[Popup UI] in browser
+    service content(logos:javascript)[Content Script] in browser
+    service background(database)[Background Script] in browser
+    service api(logos:api)[External API] in browser
+    
+    popup:R -- L:content
+    content:R -- L:background
+    background:T -- B:api
+    content:T -- B:api
+    
+    junction junctionCenter in browser
+    popup:R -- L:junctionCenter
+    junctionCenter:R -- L:background
+```
 
-> **प्रो टिप**: जर तुम्हाला ब्राउझर विस्तार प्रोफाइल करायचा असेल, तर विस्ताराच्या आतून डेव्हलपर टूल्स लॉन्च करा, कारण ते स्वतःचे स्वतंत्र ब्राउझर उदाहरण आहे. यामुळे तुम्हाला विस्तार-विशिष्ट कार्यक्षमता मेट्रिक्समध्ये प्रवेश मिळतो.
+> **प्रो टिप**: जर तुम्हाला ब्राउझर विस्तार प्रोफाइल करायचा असेल, तर विस्ताराच्या आतून Developer Tools लॉन्च करा, कारण ते स्वतःचे स्वतंत्र ब्राउझर उदाहरण आहे. यामुळे तुम्हाला विस्तार-विशिष्ट कार्यक्षमता मेट्रिक्स मिळतात.
 
 ### डीफॉल्ट आयकॉन रंग सेट करा
 
-आम्ही वास्तविक डेटा फेच करण्यास सुरुवात करण्यापूर्वी, चला आमच्या विस्ताराला सुरुवातीचा बिंदू देऊया. कोणीही रिकाम्या किंवा तुटलेल्या दिसणाऱ्या आयकॉनकडे पाहायला आवडत नाही. आम्ही हिरव्या रंगाने सुरुवात करू जेणेकरून वापरकर्त्यांना ते स्थापित करताच विस्तार कार्यरत असल्याचे कळेल.
+आम्ही वास्तविक डेटा मिळवण्यास सुरुवात करण्यापूर्वी, चला आमच्या विस्ताराला सुरुवातीचा बिंदू देऊया. कोणीही रिकाम्या किंवा तुटलेल्या दिसणाऱ्या आयकॉनकडे पाहायला आवडत नाही. आम्ही हिरव्या रंगाने सुरुवात करू जेणेकरून वापरकर्त्यांना विस्तार स्थापित केल्याच्या क्षणापासून कार्यरत असल्याचे कळेल.
 
 तुमच्या `init()` फंक्शनमध्ये, चला तो डीफॉल्ट हिरवा आयकॉन सेट करूया:
 
@@ -170,83 +343,183 @@ chrome.runtime.sendMessage({
 });
 ```
 
-**या इनिशियलायझेशनने काय साध्य केले:**
+**या प्रारंभिक सेटअपने काय साध्य केले:**
 - **तटस्थ हिरवा रंग डीफॉल्ट स्थिती म्हणून सेट करतो**
 - **विस्तार लोड झाल्यावर त्वरित व्हिज्युअल फीडबॅक प्रदान करतो**
 - **पार्श्वभूमी स्क्रिप्टसह संवाद पद्धती स्थापित करतो**
-- **डेटा लोड होण्यापूर्वी वापरकर्त्यांना कार्यशील विस्तार दिसतो याची खात्री करतो**
-
-### फंक्शन कॉल करा, कॉल अंमलात आणा
-
-आता नवीन CO2 डेटा आल्यावर तुमचा आयकॉन योग्य रंगाने स्वयंचलितपणे अपडेट होईल याची खात्री करण्यासाठी सर्वकाही एकत्र जोडूया. हे इलेक्ट्रॉनिक डिव्हाइसच्या अंतिम सर्किटला जोडण्यासारखे आहे - अचानक सर्व वैयक्तिक घटक एक प्रणाली म्हणून कार्य करतात.
-
-API मधून CO2 डेटा मिळाल्यानंतर लगेचच ही ओळ जोडा:
-
-```javascript
-// After retrieving CO2 data from the API
-// let CO2 = data.data[0].intensity.actual;
-calculateColor(CO2);
-```
-
-**या एकत्रीकरणाने काय साध्य केले:**
-- **API डेटा प्रवाह व्हिज्युअल इंडिकेटर सिस्टमशी जोडतो**
-- **नवीन डेटा आल्यावर आयकॉन अपडेट्स स्वयंचलितपणे ट्रिगर करतो**
-- **सध्याच्या कार्बन तीव्रतेवर आधारित रिअल-टाइम व्हिज्युअल फीडबॅक सुनिश्चित करतो**
-- **डेटा फेचिंग आणि डिस्प्ले लॉजिक दरम्यान चिंता वेगळ्या ठेवतो**
-
-आणि शेवटी, `/dist/background.js` मध्ये, या पार्श्वभूमी क्रिया कॉलसाठी लिसनर जोडा:
-
-```javascript
-// Listen for messages from the content script
-chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
-	if (msg.action === 'updateIcon') {
-		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
-	}
-});
-
-// Draw dynamic icon using Canvas API
-// Borrowed from energy lollipop extension - nice feature!
-function drawIcon(value) {
-	// Create an offscreen canvas for better performance
-	const canvas = new OffscreenCanvas(200, 200);
-	const context = canvas.getContext('2d');
-
-	// Draw a colored circle representing carbon intensity
-	context.beginPath();
-	context.fillStyle = value.color;
-	context.arc(100, 100, 50, 0, 2 * Math.PI);
-	context.fill();
-
-	// Return the image data for the browser icon
-	return context.getImageData(50, 50, 100, 100);
-}
+- **डेटा लोड होण्यापूर्वी वाप
+- ✅ Chrome Runtime API विस्तार आर्किटेक्चरमध्ये कोणती भूमिका बजावते?
+- ✅ रंग गणना अल्गोरिदम डेटा दृश्य प्रतिसादाशी कसा जोडतो?
+
+**कामगिरी विचार**: तुमचा विस्तार आता दाखवतो:
+- **प्रभावी संदेशवहन**: स्क्रिप्ट संदर्भांमध्ये स्वच्छ संवाद
+- **ऑप्टिमाइझ केलेले रेंडरिंग**: OffscreenCanvas UI ब्लॉकिंग टाळतो
+- **रिअल-टाइम अपडेट्स**: थेट डेटावर आधारित डायनॅमिक आयकॉन बदल
+- **मेमरी व्यवस्थापन**: योग्य साफसफाई आणि संसाधन हाताळणी
+
+**तुमचा विस्तार तपासण्याची वेळ आली आहे:**
+- **Build** सर्वकाही `npm run build` वापरून तयार करा
+- **Reload** तुमचा विस्तार ब्राउझरमध्ये पुन्हा लोड करा (हा टप्पा विसरू नका)
+- **Open** तुमचा विस्तार उघडा आणि आयकॉन रंग बदलताना पहा
+- **Check** तो जगभरातील वास्तविक कार्बन डेटावर कसा प्रतिसाद देतो
+
+आता तुम्हाला एका नजरेत कळेल की कपडे धुण्यासाठी योग्य वेळ आहे की स्वच्छ ऊर्जा येईपर्यंत थांबावे. तुम्ही काहीतरी खरोखर उपयुक्त तयार केले आहे आणि ब्राउझरच्या कामगिरीबद्दल शिकले आहात.
+
+## GitHub Copilot Agent Challenge 🚀
+
+Agent मोड वापरून खालील आव्हान पूर्ण करा:
+
+**वर्णन:** ब्राउझर विस्ताराच्या कामगिरी निरीक्षण क्षमता वाढवण्यासाठी एक फिचर जोडा जे विस्ताराच्या विविध घटकांचे लोड वेळ ट्रॅक करते आणि प्रदर्शित करते.
+
+**सूचना:** ब्राउझर विस्तारासाठी एक कामगिरी निरीक्षण प्रणाली तयार करा जी API मधून CO2 डेटा मिळविण्यासाठी, रंगांची गणना करण्यासाठी आणि आयकॉन अपडेट करण्यासाठी लागणारा वेळ मोजते आणि ब्राउझर कन्सोलमध्ये टाइमस्टॅम्प आणि कालावधी मेट्रिक्ससह परिणाम दाखवते. `performanceTracker` नावाची एक फंक्शन जोडा जी Performance API वापरते.
+
+[agent mode बद्दल अधिक जाणून घ्या](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) येथे.
+
+## 🚀 Challenge
+
+येथे एक मनोरंजक गुप्तहेर मिशन आहे: काही ओपन सोर्स वेबसाइट्स निवडा ज्या अनेक वर्षांपासून अस्तित्वात आहेत (जसे Wikipedia, GitHub, किंवा Stack Overflow) आणि त्यांच्या कमिट इतिहासाचा शोध घ्या. तुम्हाला कुठे कामगिरी सुधारणा केल्या आहेत हे दिसते का? कोणती समस्या वारंवार येत राहते?
+
+**तुमचा तपास करण्याचा दृष्टिकोन:**
+- **Search** कमिट संदेशांमध्ये "optimize," "performance," किंवा "faster" सारख्या शब्दांचा शोध घ्या
+- **Look** नमुने शोधा - ते सतत त्याच प्रकारच्या समस्यांचे निराकरण करत आहेत का?
+- **Identify** वेबसाइट्स धीम्या होण्याचे सामान्य कारण शोधा
+- **Share** तुम्ही काय शोधले - इतर विकसकांना वास्तविक उदाहरणांमधून शिकायला मिळेल
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28)
+
+## Review & Self Study
+
+[performance newsletter](https://perf.email/) साठी साइन अप करण्याचा विचार करा.
+
+ब्राउझर त्यांच्या वेब कामगिरीचे मोजमाप कसे करतात याचा अभ्यास करण्यासाठी त्यांच्या वेब टूल्समधील कामगिरी टॅब पाहा. तुम्हाला काही मोठे फरक आढळतात का?
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] ब्राउझर Task Manager (Chrome मध्ये Shift+Esc) उघडा आणि विस्तार संसाधन वापर पहा
+- [ ] DevTools Performance टॅब वापरून वेबपेज कामगिरी रेकॉर्ड आणि विश्लेषण करा
+- [ ] ब्राउझरच्या Extensions पृष्ठावर जा आणि कोणते विस्तार स्टार्टअप वेळेवर परिणाम करतात ते पहा
+- [ ] तात्पुरते विस्तार अक्षम करून कामगिरीतील फरक पहा
+
+### 🎯 **तुम्ही एका तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि कामगिरी संकल्पना समजून घ्या
+- [ ] तुमच्या ब्राउझर विस्तारासाठी एक बॅकग्राउंड स्क्रिप्ट लागू करा
+- [ ] ब्राउझर.alarms वापरून कार्यक्षम बॅकग्राउंड कार्ये शिकून घ्या
+- [ ] कंटेंट स्क्रिप्ट्स आणि बॅकग्राउंड स्क्रिप्ट्स दरम्यान संदेश पासिंगचा सराव करा
+- [ ] तुमच्या विस्ताराचा संसाधन वापर मोजा आणि ऑप्टिमाइझ करा
+
+### 📅 **तुमचा आठवडाभराचा कामगिरी प्रवास**
+- [ ] बॅकग्राउंड फंक्शनॅलिटीसह उच्च-कार्यक्षम ब्राउझर विस्तार पूर्ण करा
+- [ ] सर्व्हिस वर्कर्स आणि आधुनिक विस्तार आर्किटेक्चरमध्ये प्रावीण्य मिळवा
+- [ ] कार्यक्षम डेटा सिंक्रोनायझेशन आणि कॅशिंग रणनीती लागू करा
+- [ ] विस्तार कामगिरीसाठी प्रगत डीबगिंग तंत्रे शिका
+- [ ] तुमच्या विस्तारासाठी कार्यक्षमता आणि संसाधन कार्यक्षमतेसाठी ऑप्टिमाइझ करा
+- [ ] विस्तार कामगिरी परिस्थितींसाठी व्यापक चाचण्या तयार करा
+
+### 🌟 **तुमचा महिनाभराचा ऑप्टिमायझेशन मास्टरी**
+- [ ] ऑप्टिमल कामगिरीसह एंटरप्राइज-ग्रेड ब्राउझर विस्तार तयार करा
+- [ ] Web Workers, Service Workers, आणि आधुनिक वेब कामगिरीबद्दल शिका
+- [ ] कामगिरी ऑप्टिमायझेशनवर लक्ष केंद्रित करणाऱ्या ओपन सोर्स प्रकल्पांमध्ये योगदान द्या
+- [ ] ब्राउझर अंतर्गत आणि प्रगत डीबगिंग तंत्रे मास्टर करा
+- [ ] कामगिरी निरीक्षण साधने आणि सर्वोत्तम पद्धती मार्गदर्शक तयार करा
+- [ ] वेब अनुप्रयोग ऑप्टिमाइझ करण्यात मदत करणारे कामगिरी तज्ञ बना
+
+## 🎯 तुमचा ब्राउझर विस्तार मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title Complete Extension Development Progression
+    
+    section Performance Fundamentals (20 minutes)
+        Browser Profiling: DevTools mastery
+                         : Timeline analysis
+                         : Bottleneck identification
+                         : Critical rendering path
+        
+    section Background Tasks (25 minutes)
+        Extension Architecture: Message passing
+                              : Background scripts
+                              : Runtime API usage
+                              : Cross-context communication
+        
+    section Visual Feedback (30 minutes)
+        Dynamic UI: Color calculation algorithms
+                  : Canvas API integration
+                  : Icon generation
+                  : Real-time updates
+        
+    section Performance Optimization (35 minutes)
+        Efficient Code: Async operations
+                      : Memory management
+                      : Resource cleanup
+                      : Performance monitoring
+        
+    section Production Ready (45 minutes)
+        Polish & Testing: Cross-browser compatibility
+                        : Error handling
+                        : User experience
+                        : Performance validation
+        
+    section Advanced Features (1 week)
+        Extension Ecosystem: Chrome Web Store
+                           : User feedback
+                           : Analytics integration
+                           : Update management
+        
+    section Professional Development (2 weeks)
+        Enterprise Extensions: Team collaboration
+                             : Code reviews
+                             : CI/CD pipelines
+                             : Security audits
+        
+    section Expert Mastery (1 month)
+        Platform Expertise: Advanced Chrome APIs
+                          : Performance optimization
+                          : Architecture patterns
+                          : Open source contribution
 ```
 
-**या पार्श्वभूमी स्क्रिप्टने काय साध्य केले:**
-- **तुमच्या मुख्य स्क्रिप्टमधून संदेश ऐकतो** (जसे की रिसेप्शन
-येथे एक मनोरंजक गुप्तहेर मिशन आहे: काही ओपन सोर्स वेबसाइट्स निवडा ज्या अनेक वर्षांपासून अस्तित्वात आहेत (उदाहरणार्थ Wikipedia, GitHub, किंवा Stack Overflow) आणि त्यांच्या कमिट इतिहासाचा अभ्यास करा. त्यांनी कार्यक्षमता सुधारण्यासाठी कोणते बदल केले आहेत हे तुम्ही ओळखू शकता का? कोणत्या समस्या वारंवार समोर आल्या?
-
-**तुमचा तपासाचा दृष्टिकोन:**
-- **शोधा** कमिट संदेशांमध्ये "optimize," "performance," किंवा "faster" यासारखे शब्द
-- **पहा** नमुने - ते वारंवार एकाच प्रकारच्या समस्यांचे निराकरण करत आहेत का?
-- **ओळखा** वेबसाइट्स धीम्या होण्यामागील सामान्य कारणे
-- **सामायिक करा** तुम्ही काय शोधले - इतर विकसकांना वास्तविक उदाहरणांमधून शिकता येईल
-
-## व्याख्यानानंतरचा प्रश्नमंजूषा
-
-[व्याख्यानानंतरचा प्रश्नमंजूषा](https://ff-quizzes.netlify.app/web/quiz/28)
-
-## पुनरावलोकन आणि स्व-अभ्यास
-
-[कार्यक्षमता न्यूजलेटर](https://perf.email/) साठी साइन अप करण्याचा विचार करा.
-
-वेब टूल्समधील कार्यक्षमता टॅब्स पाहून ब्राउझर वेब कार्यक्षमता कशी मोजतात याचा अभ्यास करा. तुम्हाला काही मोठे फरक आढळतात का?
-
-## असाइनमेंट
-
-[साइटचे कार्यक्षमता विश्लेषण करा](assignment.md)
+### 🛠️ तुमचे संपूर्ण विस्तार विकास साधनसंच
+
+या त्रयी पूर्ण केल्यानंतर, तुम्ही मास्टर केले आहे:
+- **ब्राउझर आर्किटेक्चर**: ब्राउझर प्रणालींसह विस्तार कसे समाकलित करतात याचे सखोल ज्ञान
+- **कामगिरी प्रोफाइलिंग**: विकसक साधने वापरून बॉटलनेक्स ओळखणे आणि निराकरण करणे
+- **Async प्रोग्रामिंग**: प्रतिसादक्षम, नॉन-ब्लॉकिंग ऑपरेशन्ससाठी आधुनिक JavaScript पॅटर्न
+- **API एकत्रीकरण**: प्रमाणीकरण आणि त्रुटी हाताळणीसह बाह्य डेटा मिळवणे
+- **व्हिज्युअल डिझाइन**: डायनॅमिक UI अपडेट्स आणि Canvas-आधारित ग्राफिक्स निर्मिती
+- **Message Passing**: विस्तार आर्किटेक्चरमध्ये इंटर-स्क्रिप्ट संवाद
+- **User Experience**: लोडिंग स्टेट्स, त्रुटी हाताळणी, आणि अंतर्ज्ञानी संवाद
+- **Production Skills**: वास्तविक-जगातील तैनातीसाठी चाचणी, डीबगिंग, आणि ऑप्टिमायझेशन
+
+**वास्तविक-जगातील अनुप्रयोग**: तुमचे विस्तार विकास कौशल्य थेट लागू होते:
+- **Progressive Web Apps**: समान आर्किटेक्चर आणि कामगिरी नमुने
+- **Electron Desktop Apps**: वेब तंत्रज्ञान वापरून क्रॉस-प्लॅटफॉर्म अनुप्रयोग
+- **Mobile Hybrid Apps**: Cordova/PhoneGap वापरून वेब API विकास
+- **Enterprise Web Applications**: जटिल डॅशबोर्ड आणि उत्पादकता साधने
+- **Chrome DevTools Extensions**: प्रगत विकसक साधने आणि डीबगिंग
+- **Web API Integration**: बाह्य सेवांशी संवाद साधणारे कोणतेही अनुप्रयोग
+
+**व्यावसायिक प्रभाव**: तुम्ही आता:
+- **Build** संकल्पनेपासून तैनातीपर्यंत उत्पादन-तयार ब्राउझर विस्तार तयार करू शकता
+- **Optimize** वेब अनुप्रयोग कामगिरी उद्योग-मानक प्रोफाइलिंग साधने वापरून
+- **Architect** योग्य चिंता विभाजनासह स्केलेबल प्रणाली
+- **Debug** जटिल async ऑपरेशन्स आणि क्रॉस-कॉन्टेक्स्ट संवाद
+- **Contribute** ओपन सोर्स विस्तार प्रकल्प आणि ब्राउझर मानकांमध्ये योगदान द्या
+
+**पुढील स्तर संधी**:
+- **Chrome Web Store Developer**: लाखो वापरकर्त्यांसाठी विस्तार प्रकाशित करा
+- **Web Performance Engineer**: ऑप्टिमायझेशन आणि वापरकर्ता अनुभवात विशेष प्रावीण्य मिळवा
+- **Browser Platform Developer**: ब्राउझर इंजिन विकासात योगदान द्या
+- **Extension Framework Creator**: इतर विकसकांना मदत करणारी साधने तयार करा
+- **Developer Relations**: शिक्षण आणि सामग्री निर्मितीद्वारे ज्ञान सामायिक करा
+
+🌟 **Achievement Unlocked**: तुम्ही एक संपूर्ण, कार्यक्षम ब्राउझर विस्तार तयार केला आहे जो व्यावसायिक विकास पद्धती आणि आधुनिक वेब मानकांचे प्रदर्शन करतो!
+
+## Assignment
+
+[Analyze a site for performance](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
diff --git a/translations/mr/6-space-game/1-introduction/README.md b/translations/mr/6-space-game/1-introduction/README.md
index a709820bc1..e1887d0eea 100644
--- a/translations/mr/6-space-game/1-introduction/README.md
+++ b/translations/mr/6-space-game/1-introduction/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "862f7f2ef320f6f8950fae379e6ece45",
-  "translation_date": "2025-10-22T16:33:11+00:00",
+  "original_hash": "a6332a7bb4d0be3bfd24199c83993777",
+  "translation_date": "2025-11-03T15:02:35+00:00",
   "source_file": "6-space-game/1-introduction/README.md",
   "language_code": "mr"
 }
 -->
 # स्पेस गेम तयार करा भाग 1: परिचय
 
-![स्पेस गेम अ‍ॅनिमेशन गेमप्ले दाखवत आहे](../../../../6-space-game/images/pewpew.gif)
-
-जसे NASA चे मिशन कंट्रोल स्पेस लॉन्च दरम्यान अनेक प्रणालींचे समन्वय साधते, तसेच आपण एक स्पेस गेम तयार करणार आहोत जो दाखवेल की प्रोग्रामचे विविध भाग एकत्र कसे कार्य करू शकतात. काहीतरी खेळण्यायोग्य तयार करताना, तुम्ही महत्त्वाचे प्रोग्रामिंग संकल्पना शिकाल ज्या कोणत्याही सॉफ्टवेअर प्रकल्पासाठी लागू होतात.
-
-आपण कोड आयोजित करण्यासाठी दोन मूलभूत दृष्टिकोनांचा अभ्यास करू: इनहेरिटन्स आणि कंपोझिशन. हे केवळ शैक्षणिक संकल्पना नाहीत – हेच पद्धती आहेत ज्या व्हिडिओ गेम्सपासून बँकिंग सिस्टमपर्यंत सर्वकाही चालवतात. आपण एक कम्युनिकेशन सिस्टम देखील अंमलात आणू ज्याला pub/sub म्हणतात, जे स्पेसक्राफ्टमध्ये वापरल्या जाणाऱ्या कम्युनिकेशन नेटवर्क्ससारखे कार्य करते, विविध घटकांना परस्पर अवलंबित्व निर्माण न करता माहिती सामायिक करण्यास अनुमती देते.
+```mermaid
+journey
+    title Your Game Development Journey
+    section Foundation
+      Learn game architecture: 3: Student
+      Understand inheritance: 4: Student
+      Explore composition: 4: Student
+    section Communication
+      Build pub/sub system: 4: Student
+      Design event flow: 5: Student
+      Connect components: 5: Student
+    section Application
+      Create game objects: 5: Student
+      Implement patterns: 5: Student
+      Plan game structure: 5: Student
+```
 
-या मालिकेच्या शेवटी, तुम्हाला गेम्स, वेब अ‍ॅप्लिकेशन्स किंवा कोणत्याही सॉफ्टवेअर सिस्टम विकसित करताना स्केल आणि विकसित होणाऱ्या अ‍ॅप्लिकेशन्स कसे तयार करायचे हे समजेल.
+![स्पेस गेम अ‍ॅनिमेशन गेमप्ले दर्शवित आहे](../../../../6-space-game/images/pewpew.gif)
+
+जसे NASA चे मिशन कंट्रोल स्पेस लॉन्च दरम्यान अनेक प्रणालींचे समन्वय करते, तसेच आपण एक स्पेस गेम तयार करणार आहोत जो दाखवेल की प्रोग्रामचे विविध भाग एकत्र कसे सुरळीतपणे कार्य करू शकतात. काहीतरी खेळण्यायोग्य तयार करताना, तुम्ही कोणत्याही सॉफ्टवेअर प्रकल्पासाठी लागू होणाऱ्या महत्त्वाच्या प्रोग्रामिंग संकल्पना शिकाल.
+
+आपण कोड आयोजित करण्यासाठी दोन मूलभूत दृष्टिकोनांचा अभ्यास करू: इनहेरिटन्स आणि कंपोझिशन. हे केवळ शैक्षणिक संकल्पना नाहीत – हेच पद्धती व्हिडिओ गेम्सपासून बँकिंग सिस्टमपर्यंत सर्वकाही चालवतात. आपण एक कम्युनिकेशन सिस्टम देखील अंमलात आणू ज्याला pub/sub म्हणतात, जे स्पेसक्राफ्टमध्ये वापरल्या जाणाऱ्या कम्युनिकेशन नेटवर्क्ससारखे कार्य करते, विविध घटकांना परस्पर अवलंबित्व निर्माण न करता माहिती सामायिक करण्यास अनुमती देते.
+
+या मालिकेच्या शेवटी, तुम्हाला स्केल आणि विकसित होणाऱ्या अ‍ॅप्लिकेशन्स तयार करण्याची समज असेल – मग तुम्ही गेम्स, वेब अ‍ॅप्लिकेशन्स किंवा इतर कोणतेही सॉफ्टवेअर सिस्टम विकसित करत असाल.
+
+```mermaid
+mindmap
+  root((Game Architecture))
+    Object Organization
+      Inheritance
+      Composition
+      Class Hierarchies
+      Behavior Mixing
+    Communication Patterns
+      Pub/Sub System
+      Event Emitters
+      Message Passing
+      Loose Coupling
+    Game Objects
+      Properties (x, y)
+      Behaviors (move, collide)
+      Lifecycle Management
+      State Management
+    Design Patterns
+      Factory Functions
+      Observer Pattern
+      Component System
+      Event-Driven Architecture
+    Scalability
+      Modular Design
+      Maintainable Code
+      Testing Strategies
+      Performance Optimization
+```
 
 ## प्री-लेक्चर क्विझ
 
@@ -23,34 +70,73 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## गेम डेव्हलपमेंटमध्ये इनहेरिटन्स आणि कंपोझिशन
 
-प्रकल्प जसे जसे जटिल होतात, कोडचे आयोजन महत्त्वाचे बनते. जे एक साधे स्क्रिप्ट म्हणून सुरू होते ते योग्य संरचनेशिवाय देखभाल करणे कठीण होऊ शकते – जसे अपोलो मिशन्समध्ये हजारो घटकांमध्ये काळजीपूर्वक समन्वय आवश्यक होता.
+प्रकल्प जसे जसे जटिल होतात, कोडचे आयोजन महत्त्वाचे बनते. जे एक साधे स्क्रिप्ट म्हणून सुरू होते ते योग्य संरचनेशिवाय देखभाल करणे कठीण होऊ शकते – जसे अपोलो मिशनमध्ये हजारो घटकांमध्ये काळजीपूर्वक समन्वय आवश्यक होता.
 
-आपण कोड आयोजित करण्यासाठी दोन मूलभूत दृष्टिकोनांचा अभ्यास करू: इनहेरिटन्स आणि कंपोझिशन. प्रत्येकाचे वेगळे फायदे आहेत आणि दोन्ही समजून घेणे तुम्हाला वेगवेगळ्या परिस्थितीत योग्य दृष्टिकोन निवडण्यास मदत करते. आपण आमच्या स्पेस गेमद्वारे या संकल्पनांचे प्रदर्शन करू, जिथे हिरो, शत्रू, पॉवर-अप्स आणि इतर वस्तूंना कार्यक्षमतेने संवाद साधावा लागतो.
+आपण कोड आयोजित करण्यासाठी दोन मूलभूत दृष्टिकोनांचा अभ्यास करू: इनहेरिटन्स आणि कंपोझिशन. प्रत्येकाचे वेगळे फायदे आहेत आणि दोन्ही समजून घेणे तुम्हाला वेगवेगळ्या परिस्थितीत योग्य दृष्टिकोन निवडण्यास मदत करते. आपण आमच्या स्पेस गेमद्वारे या संकल्पनांचे प्रदर्शन करू, जिथे हिरो, शत्रू, पॉवर-अप्स आणि इतर ऑब्जेक्ट्स कार्यक्षमतेने संवाद साधणे आवश्यक आहे.
 
 ✅ सर्वात प्रसिद्ध प्रोग्रामिंग पुस्तकांपैकी एक [डिझाइन पॅटर्न्स](https://en.wikipedia.org/wiki/Design_Patterns) बद्दल आहे.
 
-कोणत्याही गेममध्ये, तुम्हाला `गेम ऑब्जेक्ट्स` असतात – परस्परसंवादी घटक जे तुमच्या गेमच्या जगात भर घालतात. हिरो, शत्रू, पॉवर-अप्स आणि व्हिज्युअल इफेक्ट्स हे सर्व गेम ऑब्जेक्ट्स आहेत. प्रत्येक विशिष्ट स्क्रीन कोऑर्डिनेट्सवर `x` आणि `y` मूल्यांचा वापर करून अस्तित्वात असतो, ज्यामुळे बिंदू प्लॉटिंगसारखे कार्य होते.
+कोणत्याही गेममध्ये, तुमच्याकडे `गेम ऑब्जेक्ट्स` असतात – तुमच्या गेमच्या जगात परस्परसंवादी घटक. हिरो, शत्रू, पॉवर-अप्स आणि व्हिज्युअल इफेक्ट्स हे सर्व गेम ऑब्जेक्ट्स आहेत. प्रत्येक विशिष्ट स्क्रीन कोऑर्डिनेट्सवर `x` आणि `y` मूल्ये वापरून अस्तित्वात असतो, जसे की कोऑर्डिनेट प्लेनवर पॉइंट्स प्लॉट करणे.
 
-त्यांच्या व्हिज्युअल फरक असूनही, या वस्तूंमध्ये सामान्यतः मूलभूत वर्तन सामायिक असते:
+त्यांच्या व्हिज्युअल फरक असूनही, या ऑब्जेक्ट्समध्ये सामान्यतः मूलभूत वर्तन सामायिक असते:
 
-- **ते कुठेतरी अस्तित्वात असतात** – प्रत्येक वस्तूला x आणि y कोऑर्डिनेट्स असतात जेणेकरून गेमला ते कुठे काढायचे ते माहित असते
+- **ते कुठेतरी अस्तित्वात असतात** – प्रत्येक ऑब्जेक्टमध्ये x आणि y कोऑर्डिनेट्स असतात जेणेकरून गेमला ते कुठे काढायचे ते माहित असते
 - **अनेक फिरू शकतात** – हिरो धावतात, शत्रू पाठलाग करतात, बुलेट्स स्क्रीनवर उडतात
-- **त्यांना आयुष्यकाल असतो** – काही कायम राहतात, तर काही (उदाहरणार्थ, स्फोट) थोड्या वेळासाठी दिसतात आणि गायब होतात
-- **ते गोष्टींवर प्रतिक्रिया देतात** – जेव्हा वस्तू एकमेकांवर आदळतात, पॉवर-अप्स गोळा होतात, हेल्थ बार अपडेट होतो
-
-✅ पॅक-मॅन सारख्या गेमबद्दल विचार करा. तुम्ही या गेममध्ये वरील चार ऑब्जेक्ट प्रकार ओळखू शकता का?
+- **त्यांचा आयुष्यकाल असतो** – काही कायम राहतात, तर काही (जसे की स्फोट) थोड्या वेळासाठी दिसतात आणि गायब होतात
+- **ते गोष्टींवर प्रतिक्रिया देतात** – जेव्हा गोष्टी टक्कर घेतात, पॉवर-अप्स गोळा केले जातात, हेल्थ बार अपडेट होतात
+
+✅ पॅक-मॅन सारख्या गेमचा विचार करा. तुम्ही या गेममध्ये वरील चार ऑब्जेक्ट प्रकार ओळखू शकता का?
+
+```mermaid
+classDiagram
+    class GameObject {
+        +x: number
+        +y: number
+        +type: string
+        +exists_somewhere()
+    }
+    
+    class MovableObject {
+        +moveTo(x, y)
+        +can_move_around()
+    }
+    
+    class TemporaryObject {
+        +lifespan: number
+        +has_lifespan()
+    }
+    
+    class InteractiveObject {
+        +onCollision()
+        +reacts_to_stuff()
+    }
+    
+    GameObject <|-- MovableObject
+    GameObject <|-- TemporaryObject
+    GameObject <|-- InteractiveObject
+    
+    MovableObject <|-- Hero
+    MovableObject <|-- Enemy
+    MovableObject <|-- Bullet
+    
+    TemporaryObject <|-- PowerUp
+    TemporaryObject <|-- Explosion
+    
+    InteractiveObject <|-- Collectible
+    InteractiveObject <|-- Obstacle
+```
 
 ### कोडद्वारे वर्तन व्यक्त करणे
 
-आता तुम्हाला गेम ऑब्जेक्ट्स सामायिक करतात अशा सामान्य वर्तनाची समज आहे, चला जावास्क्रिप्टमध्ये या वर्तनाची अंमलबजावणी कशी करायची ते शोधूया. तुम्ही वर्ग किंवा वैयक्तिक वस्तूंशी संलग्न पद्धतींद्वारे ऑब्जेक्ट वर्तन व्यक्त करू शकता आणि निवडण्यासाठी अनेक दृष्टिकोन आहेत.
+आता तुम्हाला गेम ऑब्जेक्ट्स सामायिक करतात अशा सामान्य वर्तनाची समज आहे, चला जावास्क्रिप्टमध्ये ही वर्तन कशी अंमलात आणायची ते शोधूया. तुम्ही वर्ग किंवा वैयक्तिक ऑब्जेक्ट्सशी संलग्न पद्धतींद्वारे ऑब्जेक्ट वर्तन व्यक्त करू शकता आणि निवडण्यासाठी अनेक दृष्टिकोन आहेत.
 
 **क्लास-आधारित दृष्टिकोन**
 
-क्लासेस आणि इनहेरिटन्स गेम ऑब्जेक्ट्स आयोजित करण्यासाठी संरचित दृष्टिकोन प्रदान करतात. कार्ल लिनिअसने विकसित केलेल्या वर्गीकरण प्रणालीसारखे, तुम्ही सामान्य गुणधर्म असलेल्या बेस क्लाससह प्रारंभ करता, नंतर विशिष्ट क्षमता जोडत असलेल्या विशेष वर्ग तयार करता.
+क्लासेस आणि इनहेरिटन्स गेम ऑब्जेक्ट्स आयोजित करण्यासाठी संरचित दृष्टिकोन प्रदान करतात. कार्ल लिनियसने विकसित केलेल्या टॅक्सोनॉमिक वर्गीकरण प्रणालीसारखे, तुम्ही सामान्य गुणधर्म असलेल्या बेस क्लाससह प्रारंभ करता, नंतर विशेष क्षमता जोडताना या मूलभूत गोष्टी वारसाहक्काने घेणारे विशेष वर्ग तयार करता.
 
 ✅ इनहेरिटन्स समजून घेणे महत्त्वाचे आहे. [MDN च्या इनहेरिटन्सवरील लेख](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) वर अधिक जाणून घ्या.
 
-गेम ऑब्जेक्ट्स क्लासेस आणि इनहेरिटन्स वापरून कसे अंमलात आणता येतील ते येथे आहे:
+क्लासेस आणि इनहेरिटन्स वापरून गेम ऑब्जेक्ट्स कसे अंमलात आणता येतील ते येथे आहे:
 
 ```javascript
 // Step 1: Create the base GameObject class
@@ -64,7 +150,7 @@ class GameObject {
 ```
 
 **चला हे टप्प्याटप्प्याने समजून घेऊया:**
-- आपण प्रत्येक गेम ऑब्जेक्ट वापरू शकणारे एक मूलभूत टेम्पलेट तयार करत आहोत
+- आपण प्रत्येक गेम ऑब्जेक्ट वापरू शकणारे मूलभूत टेम्पलेट तयार करत आहोत
 - कन्स्ट्रक्टर ऑब्जेक्ट कुठे आहे (`x`, `y`) आणि ते कोणत्या प्रकारचे आहे हे जतन करते
 - हे तुमच्या सर्व गेम ऑब्जेक्ट्ससाठी पाया बनते
 
@@ -85,8 +171,8 @@ class Movable extends GameObject {
 
 **वरीलमध्ये, आपण:**
 - गेमऑब्जेक्ट क्लास **वाढवला** जेणेकरून मूव्हमेंट फंक्शनॅलिटी जोडता येईल
-- `super()` वापरून पॅरेंट कन्स्ट्रक्टर **कॉल केला** जेणेकरून वारसाहक्क गुणधर्म प्रारंभ होऊ शकतील
-- ऑब्जेक्टची स्थिती अपडेट करणारी `moveTo()` पद्धत **जोडली**
+- `super()` वापरून पॅरेंट कन्स्ट्रक्टर **कॉल केला** जेणेकरून वारसाहक्काने घेतलेले गुणधर्म प्रारंभ होऊ शकतील
+- ऑब्जेक्टची स्थिती अपडेट करणारा `moveTo()` मेथड **जोडला**
 
 ```javascript
 // Step 3: Create specific game object types
@@ -111,16 +197,16 @@ const tree = new Tree(10, 15);
 ```
 
 **या संकल्पना समजून घेणे:**
-- योग्य वर्तन वारसाहक्क घेणारे विशेष ऑब्जेक्ट प्रकार **तयार करते**
+- योग्य वर्तन वारसाहक्काने घेणारे विशेष ऑब्जेक्ट प्रकार **तयार करते**
 - इनहेरिटन्स कसे निवडक वैशिष्ट्य समाविष्ट करण्यास अनुमती देते हे **दाखवते**
 - हिरो हलू शकतात तर झाडे स्थिर राहतात हे **दाखवते**
-- क्लास हायरार्की अयोग्य क्रिया टाळते हे **दर्शवते**
+- क्लास हायरार्की अनुचित क्रिया टाळते हे **समजावते**
 
-✅ काही मिनिटे घ्या आणि पॅक-मॅन हिरो (उदाहरणार्थ, इन्की, पिंकी किंवा ब्लिंकी) पुन्हा कसे लिहिले जाईल याचा विचार करा.
+✅ काही मिनिटे घ्या आणि पॅक-मॅन हिरो (उदा. इन्की, पिंकी किंवा ब्लिंकी) पुन्हा कसा लिहिला जाईल याचा विचार करा.
 
 **कंपोझिशन दृष्टिकोन**
 
-कंपोझिशन मॉड्युलर डिझाइन तत्त्वज्ञानाचे अनुसरण करते, जसे अभियंते इंटरचेंज करण्यायोग्य घटकांसह स्पेसक्राफ्ट डिझाइन करतात. पॅरेंट क्लासकडून वारसाहक्क घेण्याऐवजी, तुम्ही विशिष्ट वर्तन एकत्र करून ऑब्जेक्ट्स तयार करता ज्यांना त्यांना आवश्यक असलेली अचूक कार्यक्षमता मिळते. हा दृष्टिकोन कठोर श्रेणीबद्ध मर्यादा न ठेवता लवचिकता प्रदान करतो.
+कंपोझिशन मॉड्युलर डिझाइन तत्त्वज्ञानाचे अनुसरण करते, जसे अभियंते इंटरचेंज करण्यायोग्य घटकांसह स्पेसक्राफ्ट डिझाइन करतात. पॅरेंट क्लासकडून वारसाहक्काने घेण्याऐवजी, तुम्ही विशिष्ट वर्तन एकत्र करून ऑब्जेक्ट्स तयार करता ज्यांना त्यांना आवश्यक असलेली कार्यक्षमता मिळते. हा दृष्टिकोन कठोर श्रेणीबद्ध मर्यादा न ठेवता लवचिकता प्रदान करतो.
 
 ```javascript
 // Step 1: Create base behavior objects
@@ -169,9 +255,9 @@ function createStatic(x, y, type) {
 
 **वरीलमध्ये, आपण:**
 - स्प्रेड सिंटॅक्स वापरून मूव्हमेंट वर्तनासह बेस ऑब्जेक्ट गुणधर्म **एकत्र केले**
-- सानुकूलित ऑब्जेक्ट्स परत करणारे फॅक्टरी फंक्शन्स **तयार केले**
+- कस्टमाइज्ड ऑब्जेक्ट्स परत करणारे फॅक्टरी फंक्शन्स **तयार केले**
 - कठोर क्लास हायरार्कीजशिवाय लवचिक ऑब्जेक्ट निर्मिती **सक्षम केली**
-- ऑब्जेक्ट्सना त्यांना आवश्यक असलेले अचूक वर्तन असण्याची **परवानगी दिली**
+- ऑब्जेक्ट्सना त्यांना आवश्यक असलेले वर्तन **असण्यास अनुमती दिली**
 
 ```javascript
 // Step 4: Create and use your composed objects
@@ -183,44 +269,103 @@ const tree = createStatic(0, 0, 'Tree');
 ```
 
 **महत्त्वाचे मुद्दे लक्षात ठेवा:**
-- वर्तन मिसळून ऑब्जेक्ट्स **कंपोज करते** त्याऐवजी त्यांना वारसाहक्क देते
+- वर्तन वारसाहक्काने घेण्याऐवजी ऑब्जेक्ट्स **मिश्रित करते**
 - कठोर इनहेरिटन्स हायरार्कीजपेक्षा अधिक लवचिकता **प्रदान करते**
-- ऑब्जेक्ट्सना त्यांना आवश्यक असलेली अचूक वैशिष्ट्ये असण्याची **परवानगी देते**
+- ऑब्जेक्ट्सना त्यांना आवश्यक असलेली वैशिष्ट्ये **असण्यास अनुमती देते**
 - स्वच्छ ऑब्जेक्ट संयोजनासाठी आधुनिक जावास्क्रिप्ट स्प्रेड सिंटॅक्स **वापरते**
-
 ```
 
 **Which Pattern Should You Choose?**
 
-> 💡 **Pro Tip**: Both patterns have their place in modern JavaScript development. Classes work well for clearly defined hierarchies, while composition shines when you need maximum flexibility.
-> 
-**Here's when to use each approach:**
-- **Choose** inheritance when you have clear "is-a" relationships (a Hero *is-a* Movable object)
-- **Select** composition when you need "has-a" relationships (a Hero *has* movement abilities)
-- **Consider** your team's preferences and project requirements
-- **Remember** that you can mix both approaches in the same application
-
-## Communication Patterns: The Pub/Sub System
-
-As applications grow complex, managing communication between components becomes challenging. The publish-subscribe pattern (pub/sub) solves this problem using principles similar to radio broadcasting – one transmitter can reach multiple receivers without knowing who's listening.
+**Which Pattern Should You Choose?**
 
-Consider what happens when a hero takes damage: the health bar updates, sound effects play, visual feedback appears. Rather than coupling the hero object directly to these systems, pub/sub allows the hero to broadcast a "damage taken" message. Any system that needs to respond can subscribe to this message type and react accordingly.
+```mermaid
+quadrantChart
+    title Code Organization Patterns
+    x-axis Simple --> Complex
+    y-axis Rigid --> Flexible
+    quadrant-1 Advanced Composition
+    quadrant-2 Hybrid Approaches
+    quadrant-3 Basic Inheritance
+    quadrant-4 Modern Composition
+    
+    Class Inheritance: [0.3, 0.2]
+    Interface Implementation: [0.6, 0.4]
+    Mixin Patterns: [0.7, 0.7]
+    Pure Composition: [0.8, 0.9]
+    Factory Functions: [0.5, 0.8]
+    Prototype Chain: [0.4, 0.3]
+```
 
-✅ **Pub/Sub** stands for 'publish-subscribe'
+> 💡 **प्रो टिप**: आधुनिक जावास्क्रिप्ट डेव्हलपमेंटमध्ये दोन्ही पद्धतींचे स्थान आहे. क्लासेस स्पष्टपणे परिभाषित हायरार्कीजसाठी चांगले कार्य करतात, तर कंपोझिशन तुम्हाला जास्तीत जास्त लवचिकता आवश्यक असते तेव्हा चमकते.
+> 
+**प्रत्येक दृष्टिकोन कधी वापरायचा:**
+- **इनहेरिटन्स निवडा** जेव्हा तुमच्याकडे स्पष्ट "is-a" संबंध असतात (हिरो *is-a* मूव्हेबल ऑब्जेक्ट)
+- **कंपोझिशन निवडा** जेव्हा तुम्हाला "has-a" संबंध आवश्यक असतात (हिरो *has* मूव्हमेंट क्षमता)
+- **तुमच्या टीमच्या प्राधान्ये आणि प्रकल्पाच्या गरजा विचारात घ्या**
+- **लक्षात ठेवा** की तुम्ही एकाच अ‍ॅप्लिकेशनमध्ये दोन्ही दृष्टिकोन मिसळू शकता
+
+### 🔄 **शैक्षणिक तपासणी**
+**ऑब्जेक्ट ऑर्गनायझेशन समज**: कम्युनिकेशन पॅटर्नकडे जाण्यापूर्वी, तुम्ही हे समजू शकता:
+- ✅ इनहेरिटन्स आणि कंपोझिशनमधील फरक स्पष्ट करा
+- ✅ क्लासेस विरुद्ध फॅक्टरी फंक्शन्स कधी वापरायचे ते ओळखा
+- ✅ इनहेरिटन्समध्ये `super()` कीवर्ड कसा कार्य करतो ते समजून घ्या
+- ✅ गेम डेव्हलपमेंटसाठी प्रत्येक दृष्टिकोनाचे फायदे ओळखा
+
+**जलद स्व-परीक्षण**: तुम्ही मूव्ह आणि फ्लाय करू शकणारा फ्लाइंग एनिमी कसा तयार कराल?
+- **इनहेरिटन्स दृष्टिकोन**: `class FlyingEnemy extends Movable`
+- **कंपोझिशन दृष्टिकोन**: `{ ...movable, ...flyable, ...gameObject }`
+
+**वास्तविक-जगाशी संबंध**: हे पॅटर्न सर्वत्र दिसतात:
+- **React Components**: Props (कंपोझिशन) विरुद्ध क्लास इनहेरिटन्स
+- **Game Engines**: Entity-component systems कंपोझिशन वापरतात
+- **Mobile Apps**: UI फ्रेमवर्क्स अनेकदा इनहेरिटन्स हायरार्कीज वापरतात
+
+## कम्युनिकेशन पॅटर्न्स: Pub/Sub सिस्टम
+
+अ‍ॅप्लिकेशन्स जसे जसे जटिल होतात, घटकांमधील कम्युनिकेशन व्यवस्थापित करणे आव्हानात्मक बनते. पब्लिश-सबस्क्राइब पॅटर्न (pub/sub) रेडिओ ब्रॉडकास्टिंगसारख्या तत्त्वांचा वापर करून हा प्रश्न सोडवतो – एक ट्रान्समीटर कोण ऐकत आहे हे न जाणता अनेक रिसिव्हर्सपर्यंत पोहोचू शकतो.
+
+हिरोला इजा झाल्यावर काय होते ते विचार करा: हेल्थ बार अपडेट होतो, साउंड इफेक्ट्स प्ले होतात, व्हिज्युअल फीडबॅक दिसतो. हिरो ऑब्जेक्टला थेट या सिस्टमशी जोडण्याऐवजी, pub/sub हिरोला "इजा झाली" असा संदेश प्रसारित करण्यास अनुमती देते. प्रतिसाद देण्याची आवश्यकता असलेली कोणतीही प्रणाली या संदेश प्रकाराची सदस्यता घेऊ शकते आणि त्यानुसार प्रतिक्रिया देऊ शकते.
+
+✅ **Pub/Sub** म्हणजे 'पब्लिश-सबस्क्राइब'
+
+```mermaid
+flowchart TD
+    A[Hero Takes Damage] --> B[Publish: HERO_DAMAGED]
+    B --> C[Event System]
+    
+    C --> D[Health Bar Subscriber]
+    C --> E[Sound System Subscriber]
+    C --> F[Visual Effects Subscriber]
+    C --> G[Achievement System Subscriber]
+    
+    D --> H[Update Health Display]
+    E --> I[Play Damage Sound]
+    F --> J[Show Red Flash]
+    G --> K[Check Survival Achievements]
+    
+    style A fill:#ffebee
+    style B fill:#e1f5fe
+    style C fill:#e8f5e8
+    style H fill:#fff3e0
+    style I fill:#fff3e0
+    style J fill:#fff3e0
+    style K fill:#fff3e0
+```
 
-### Understanding the Pub/Sub Architecture
+### Pub/Sub आर्किटेक्चर समजून घेणे
 
-The pub/sub pattern keeps different parts of your application loosely coupled, meaning they can work together without being directly dependent on each other. This separation makes your code more maintainable, testable, and flexible to changes.
+Pub/Sub पॅटर्न तुमच्या अ‍ॅप्लिकेशनच्या वेगवेगळ्या भागांना सैल जोडलेले ठेवते, म्हणजे ते एकमेकांवर थेट अवलंबून न राहता एकत्र काम करू शकतात. हा वेगळेपणा तुमचा कोड अधिक टिकाऊ, चाचणीयोग्य आणि बदलांसाठी लवचिक बनवतो.
 
-**The key players in pub/sub:**
-- **Messages** – Simple text labels like `'PLAYER_SCORED'` that describe what happened (plus any extra info)
-- **Publishers** – The objects that shout out "Something happened!" to anyone who's listening
-- **Subscribers** – The objects that say "I care about that event" and react when it happens
-- **Event System** – The middleman that makes sure messages get to the right listeners
+**Pub/Sub मधील मुख्य घटक:**
+- **संदेश** – 'PLAYER_SCORED' सारख्या साध्या मजकूर लेबल्स जे काय घडले ते वर्णन करतात (प्लस कोणतीही अतिरिक्त माहिती)
+- **पब्लिशर्स** – ऑब्जेक्ट्स जे "काहीतरी घडले!" असे कोणालाही ऐकवतात
+- **सबस्क्रायबर्स** – ऑब्जेक्ट्स जे "मला त्या इव्हेंटची काळजी आहे" असे म्हणतात आणि ते घडल्यावर प्रतिक्रिया देतात
+- **इव्हेंट सिस्टम** – मध्यस्थ जो संदेश योग्य श्रोत्यांपर्यंत पोहोचतो याची खात्री करतो
 
-### Building an Event System
+### इव्हेंट सिस्टम तयार करणे
 
-Let's create a simple but powerful event system that demonstrates these concepts:
+चला या संकल्पनांचे प्रदर्शन करणारी एक साधी पण शक्तिशाली इव्हेंट सिस्टम तयार करूया:
 
 ```javascript
 // Step 1: Create the EventEmitter class
@@ -248,14 +393,14 @@ class EventEmitter {
 }
 ```
 
-**येथे काय होते ते समजून घेणे:**
-- एक साधा क्लास वापरून केंद्रीय इव्हेंट मॅनेजमेंट सिस्टम **तयार करते**
-- संदेश प्रकारानुसार आयोजित केलेल्या ऑब्जेक्टमध्ये लिसनर्स **साठवते**
-- `on()` पद्धत वापरून नवीन लिसनर्स **नोंदवते**
-- `emit()` वापरून सर्व इच्छुक लिसनर्सना संदेश **प्रसारित करते**
-- संबंधित माहिती पास करण्यासाठी वैकल्पिक डेटा पेलोड्स **समर्थित करते**
+**इथे काय होते ते समजून घेणे:**
+- एक साधा क्लास वापरून केंद्रीय इव्हेंट व्यवस्थापन प्रणाली **तयार करते**
+- संदेश प्रकारानुसार आयोजित केलेल्या ऑब्जेक्टमध्ये श्रोते **साठवते**
+- `on()` मेथड वापरून नवीन श्रोते **नोंदवते**
+- `emit()` वापरून सर्व इच्छुक श्रोत्यांना संदेश **प्रसारित करते**
+- संबंधित माहिती पास करण्यासाठी पर्यायी डेटा पेलोड्स **समर्थन करते**
 
-### सर्वकाही एकत्र ठेवणे: एक व्यावहारिक उदाहरण
+### सर्व एकत्र आणणे: एक व्यावहारिक उदाहरण
 
 ठीक आहे, चला हे कृतीत पाहूया! आपण एक साधी मूव्हमेंट सिस्टम तयार करू जी pub/sub किती स्वच्छ आणि लवचिक असू शकते हे दर्शवते:
 
@@ -273,8 +418,8 @@ const hero = createHero(0, 0);
 ```
 
 **या कोडमध्ये काय होते:**
-- संदेश नावांमध्ये टायपो टाळण्यासाठी एक constants ऑब्जेक्ट **परिभाषित करते**
-- सर्व कम्युनिकेशन हाताळण्यासाठी एक इव्हेंट एमिटर उदाहरण **तयार करते**
+- संदेश नावांमध्ये टायपो टाळण्यासाठी एक कॉन्स्टंट्स ऑब्जेक्ट **परिभाषित करते**
+- सर्व कम्युनिकेशन हाताळण्यासाठी एक इव्हेंट एमिटर इंस्टन्स **तयार करते**
 - सुरुवातीच्या स्थितीत हिरो ऑब्जेक्ट **प्रारंभ करते**
 
 ```javascript
@@ -291,10 +436,10 @@ eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
 ```
 
 **वरीलमध्ये, आपण:**
-- मूव्हमेंट संदेशांना प्रतिसाद देणारे इव्हेंट लिसनर्स **नोंदवले**
-- मूव्हमेंट दिशेच्या आधारे हिरोची स्थिती **अपडेट केली**
+- मूव्हमेंट संदेशांना प्रतिसाद देणारे इव्हेंट श्रोते **नोंदवले**
+- मूव्हमेंटच्या दिशेनुसार हिरोची स्थिती **अपडेट केली**
 - हिरोच्या स्थिती बदलांचा मागोवा घेण्यासाठी कन्सोल लॉगिंग **जोडले**
-- मूव्हमेंट लॉजिक इनपुट हँडलिंगपासून **वेगळे केले**
+- इनपुट हँडलिंगपासून मूव्हमेंट लॉजिक **वेगळे केले**
 
 ```javascript
 // Step 4: Connect keyboard input to events (publishers)
@@ -311,54 +456,165 @@ window.addEventListener('keydown', (event) => {
 ```
 
 **या संकल्पना समजून घेणे:**
-- कीबोर्ड इनपुटला गेम इव्हेंट्सशी घट्ट जोडणी न करता **कनेक्ट करते**
+- कीबोर्ड इनपुटला गेम इव्हेंट्सशी **जोडते** परंतु घट्ट जोडणीशिवाय
 - इनपुट सिस्टमला अप्रत्यक्षपणे गेम ऑब्जेक्ट्सशी संवाद साधण्यास **सक्षम करते**
-- समान कीबोर्ड इव्हेंट्सला प्रतिसाद देण्यासाठी एकाधिक सिस्टम्सला **परवानगी देते**
+- समान कीबोर्ड इव्हेंट्सला प्रतिसाद देण्यासाठी एकाधिक सिस्टम्सना **परवानगी देते**
 - की बाइंडिंग बदलणे किंवा नवीन इनपुट पद्धती जोडणे **सुलभ करते**
 
-> 💡 **प्रो टिप**: या पॅटर्नचे सौंदर्य म्हणजे लवचिकता! तुम्ही फक्त अधिक इव्हेंट लिसनर्स जोडून ध्वनी प्रभाव, स्क्रीन शेक किंवा पार्टिकल इफेक्ट्स सहजपणे जोडू शकता – विद्यमान कीबोर्ड किंवा मूव्हमेंट कोड बदलण्याची गरज नाही.
+```mermaid
+sequenceDiagram
+    participant User
+    participant Keyboard
+    participant EventEmitter
+    participant Hero
+    participant SoundSystem
+    participant Camera
+    
+    User->>Keyboard: Presses ArrowLeft
+    Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
+    EventEmitter->>Hero: Move left 5 pixels
+    EventEmitter->>SoundSystem: Play footstep sound
+    EventEmitter->>Camera: Follow hero
+    
+    Hero->>Hero: Update position
+    SoundSystem->>SoundSystem: Play audio
+    Camera->>Camera: Adjust viewport
+```
+
+> 💡 **प्रो टिप**: या पॅटर्नचे सौंदर्य म्हणजे लवचिकता! तुम्ही फक्त तुम्हाला काळजी असलेल्या इव्हेंट्ससाठी ऐकून सहज नवीन वैशिष्ट्ये जोडू शकता – विद्यमान कीबोर्ड किंवा मूव्हमेंट कोड बदलण्याची गरज नाही.
 > 
 **तुम्हाला हा दृष्टिकोन का आवडेल:**
-- नवीन वैशिष्ट्ये जोडणे खूप सोपे होते – फक्त तुम्हाला हवे असलेल्या इव्हेंट्ससाठी ऐका
-- एकाच इव्हेंटला प्रतिसाद देण्यासाठी अनेक गोष्टी एकमेकांवर परिणाम न करता कार्य करू शकतात
+- नवीन वैशिष्ट्ये जोडणे खूप सोपे होते – फक्त तुम्हाला काळजी असलेल्या इव्हेंट्ससाठी ऐका
+- एकाच इव्हेंटला प्रतिसाद देण्यासाठी एकाधिक गोष्टी एकमेकांवर परिणाम न करता करू शकतात
 - चाचणी खूप सोपी होते कारण प्रत्येक भाग स्वतंत्रपणे कार्य करतो
-- काहीतरी बिघडल्यास, तुम्हाला अचूकपणे कुठे पाहायचे आहे हे माहित असते
-
-### Pub/Sub स्केलिंग प्रभावीपणे का करते
+- काहीतरी बिघडल्यास, तुम्हाला नेमके कुठे पाहायचे आहे हे माहित आहे
 
-Pub/Sub पॅटर्न अ‍ॅप्लिकेशन्स जटिलतेत वाढत असताना साधेपणा टिकवून ठेवतो. शत्रूंच्या डझनभर व्यवस्थापन, डायनॅमिक UI अपडेट्स किंवा साउंड सिस्टम्स असो, पॅटर्न आर्किटेक्चरल बदलांशिवाय वाढीव स्केल हाताळतो. नवीन वैशिष्ट्ये विद्यमान इव्हेंट सिस्टममध्ये समाकलित होतात ज्यामुळे स्थापन केलेल्या कार्यक्षमतेवर परिणाम होत नाही.
+### Pub/Sub प्रभावीपणे स्केल का करते
 
-> ⚠️ **सामान्य चूक**: सुरुवातीला खूप विशिष्ट संदेश प्रकार तयार करू नका. विस्तृत श्रेणींनी प्रारंभ करा आणि तुमच्या गेमच्या गरजा स्पष्ट झाल्यामुळे त्यांना परिष्कृत करा.
-> 
-**पालन करण्यासाठी सर्वोत्तम पद्धती:**
-- संबंधित संदेशांना तार्किक श्रेणींमध्ये **गटबद्ध करते**
-- काय घडले आहे हे स्पष्टपणे सूचित करणारी वर्णनात्मक नावे **वापरते**
-- संदेश पेलोड्स साधे आणि लक्ष केंद्रित **ठेवते**
-- तुमच्या टीमसाठी संदेश प्रकार **दस्तऐवजीकरण करते**
-
----
-
-## GitHub Copilot Agent Challenge 🚀
+Pub/Sub पॅटर्न अ‍ॅप्लिकेशन्स जसे जसे जटिल होतात तसतसे साधेपणा टिकवून ठेवतो. शत्रूंचे डझनभर व्यवस्थापित करणे, डायनॅमिक UI अपडेट्स किंवा साउंड सिस्टम्स असो, पॅटर्न आर्किटेक्चरल बदल न करता वाढीव स्केल हाताळतो. नवीन
+पब-सब पॅटर्न गेम आर्किटेक्चर सुधारण्यासाठी कसा उपयोगी ठरतो याचा विचार करा. कोणते घटक इव्हेंट्स उत्सर्जित करावेत आणि प्रणालीने कसे प्रतिसाद द्यावे याची ओळख करा. एक गेम संकल्पना तयार करा आणि त्याच्या घटकांमधील संवाद पॅटर्न मॅप करा.
 
-Agent मोड वापरून खालील आव्हान पूर्ण करा:
+## व्याख्यानानंतरचा क्विझ
 
-**वर्णन:** इनहेरिटन्स आणि Pub/Sub पॅटर्न दोन्ही वापरून एक साधी गेम ऑब्जेक्ट सिस्टम तयार करा. तुम्ही एक मूलभूत गेम अंमलात आणाल जिथे विविध ऑब्जेक्ट्स इव्हेंट्सद्वारे एकमेकांबद्दल थेट माहिती न घेता संवाद साधू शकतात.
+[व्याख्यानानंतरचा क्विझ](https://ff-quizzes.netlify.app/web/quiz/30)
 
-**प्रॉम्प्ट:** खालील आवश्यकता असलेली जावास्क्रिप्ट गेम सिस्टम तयार करा: 1) x, y कोऑर्डिनेट्स आणि प्रकार गुणधर्मांसह बेस GameObject क्लास तयार करा. 2) GameObject क्लासचा विस्तार करणारा आणि हलू शकणारा Hero क्लास तयार करा. 3) GameObject क्लासचा विस्तार करणारा आणि हिरोचा पाठलाग करणारा Enemy क्लास तयार करा. 4) Pub/Sub पॅटर्नसाठी EventEmitter क्लास अंमलात आणा. 5) इव्हेंट लिसनर्स सेट करा जेणेकरून हिरो हलल्यावर, जवळच्या शत्रूंना 'HERO_MOVED' इव्हेंट प्राप्त होईल आणि हिरोकडे हलण्यासाठी त्यांची स्थिती अपडेट होईल. ऑब्जेक्ट्समधील संवाद दर्शवण्यासाठी console.log स्टेटमेंट्स समाविष्ट करा.
+## पुनरावलोकन आणि स्व-अभ्यास
 
-Agent मोडबद्दल अधिक जाणून घ्या [येथे](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
+पब/सब बद्दल अधिक जाणून घ्या [त्याबद्दल वाचा](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+
+### ⚡ **पुढील ५ मिनिटांत तुम्ही काय करू शकता**
+- [ ] कोणताही HTML5 गेम ऑनलाइन उघडा आणि त्याचा कोड DevTools वापरून तपासा
+- [ ] एक साधा HTML5 कॅनव्हास घटक तयार करा आणि एक मूलभूत आकार काढा
+- [ ] `setInterval` वापरून एक साधा अॅनिमेशन लूप तयार करण्याचा प्रयत्न करा
+- [ ] कॅनव्हास API दस्तऐवज एक्सप्लोर करा आणि एक ड्रॉइंग पद्धत वापरून पहा
+
+### 🎯 **तुम्ही एका तासात काय साध्य करू शकता**
+- [ ] व्याख्यानानंतरचा क्विझ पूर्ण करा आणि गेम डेव्हलपमेंट संकल्पना समजून घ्या
+- [ ] HTML, CSS, आणि JavaScript फाइल्ससह तुमच्या गेम प्रोजेक्टची रचना सेट करा
+- [ ] एक मूलभूत गेम लूप तयार करा जो सतत अपडेट आणि रेंडर करतो
+- [ ] कॅनव्हासवर तुमचे पहिले गेम स्प्राइट्स काढा
+- [ ] प्रतिमा आणि ध्वनीसाठी मूलभूत अॅसेट लोडिंग अंमलात आणा
+
+### 📅 **तुमचा आठवडाभराचा गेम तयार करण्याचा प्रवास**
+- [ ] सर्व नियोजित वैशिष्ट्यांसह पूर्ण स्पेस गेम तयार करा
+- [ ] गुळगुळीत ग्राफिक्स, ध्वनी प्रभाव, आणि अॅनिमेशन जोडा
+- [ ] गेम स्टेट्स अंमलात आणा (स्टार्ट स्क्रीन, गेमप्ले, गेम ओव्हर)
+- [ ] स्कोअरिंग सिस्टम आणि खेळाडू प्रगती ट्रॅकिंग तयार करा
+- [ ] तुमचा गेम डिव्हाइसवर प्रतिसादक्षम आणि प्रवेशयोग्य बनवा
+- [ ] तुमचा गेम ऑनलाइन शेअर करा आणि खेळाडूंकडून फीडबॅक मिळवा
+
+### 🌟 **तुमचा महिनाभराचा गेम डेव्हलपमेंट प्रवास**
+- [ ] विविध शैली आणि यांत्रिकी एक्सप्लोर करत अनेक गेम तयार करा
+- [ ] Phaser किंवा Three.js सारख्या गेम डेव्हलपमेंट फ्रेमवर्क शिकणे
+- [ ] ओपन सोर्स गेम डेव्हलपमेंट प्रोजेक्ट्समध्ये योगदान द्या
+- [ ] प्रगत गेम प्रोग्रामिंग पॅटर्न आणि ऑप्टिमायझेशनमध्ये प्रावीण्य मिळवा
+- [ ] तुमच्या गेम डेव्हलपमेंट कौशल्यांचे प्रदर्शन करणारे पोर्टफोलिओ तयार करा
+- [ ] गेम डेव्हलपमेंट आणि इंटरॅक्टिव्ह मीडियामध्ये स्वारस्य असलेल्या इतरांना मार्गदर्शन करा
+
+## 🎯 तुमचा गेम डेव्हलपमेंट मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title Game Architecture Learning Progression
+    
+    section Object Patterns (20 minutes)
+        Code Organization: Class inheritance
+                         : Composition patterns
+                         : Factory functions
+                         : Behavior mixing
+        
+    section Communication Systems (25 minutes)
+        Event Architecture: Pub/Sub implementation
+                          : Message design
+                          : Event emitters
+                          : Loose coupling
+        
+    section Game Object Design (30 minutes)
+        Entity Systems: Property management
+                      : Behavior composition
+                      : State handling
+                      : Lifecycle management
+        
+    section Architecture Patterns (35 minutes)
+        System Design: Component systems
+                     : Observer pattern
+                     : Command pattern
+                     : State machines
+        
+    section Advanced Concepts (45 minutes)
+        Scalable Architecture: Performance optimization
+                             : Memory management
+                             : Modular design
+                             : Testing strategies
+        
+    section Game Engine Concepts (1 week)
+        Professional Development: Scene graphs
+                                 : Asset management
+                                 : Rendering pipelines
+                                 : Physics integration
+        
+    section Framework Mastery (2 weeks)
+        Modern Game Development: React game patterns
+                               : Canvas optimization
+                               : WebGL basics
+                               : PWA games
+        
+    section Industry Practices (1 month)
+        Professional Skills: Team collaboration
+                           : Code reviews
+                           : Game design patterns
+                           : Performance profiling
+```
 
-## 🚀 आव्हान
+### 🛠️ तुमचा गेम आर्किटेक्चर टूलकिट सारांश
 
-Pub/Sub पॅटर्न गेम आर्किटेक्चर कसे सुधारू शकतो याचा विचार करा. कोणते घटक इव्हेंट्स प्रसारित करावेत आणि सिस्टम कसे प्रतिसाद द्यावे याची ओळख करा. गेम संकल्पना डिझाइन करा आणि त्याच्या घटकांमधील कम्युनिकेशन पॅटर्न मॅप करा.
+या धड्याचा अभ्यास केल्यानंतर, तुमच्याकडे आता आहे:
+- **डिझाइन पॅटर्न प्रावीण्य**: इनहेरिटन्स विरुद्ध कंपोझिशनचे फायदे आणि तोटे समजणे
+- **इव्हेंट-ड्रिव्हन आर्किटेक्चर**: स्केलेबल संवादासाठी पब/सब अंमलात आणणे
+- **ऑब्जेक्ट-ओरिएंटेड डिझाइन**: क्लास हायरार्कीज आणि बिहेवियर कंपोझिशन
+- **आधुनिक JavaScript**: फॅक्टरी फंक्शन्स, स्प्रेड सिंटॅक्स, आणि ES6+ पॅटर्न्स
+- **स्केलेबल आर्किटेक्चर**: लूज कपलिंग आणि मॉड्युलर डिझाइन तत्त्वे
+- **गेम डेव्हलपमेंट फाउंडेशन**: एंटिटी सिस्टम्स आणि कंपोनेंट पॅटर्न्स
+- **प्रोफेशनल पॅटर्न्स**: कोड ऑर्गनायझेशनसाठी इंडस्ट्री-स्टँडर्ड दृष्टिकोन
 
-## पोस्ट-लेक्चर क्विझ
+**वास्तविक-जगातील अनुप्रयोग**: हे पॅटर्न थेट लागू होतात:
+- **फ्रंटएंड फ्रेमवर्क्स**: React/Vue कंपोनेंट आर्किटेक्चर आणि स्टेट मॅनेजमेंट
+- **बॅकएंड सर्व्हिसेस**: मायक्रोसर्व्हिस संवाद आणि इव्हेंट-ड्रिव्हन सिस्टम्स
+- **मोबाईल डेव्हलपमेंट**: iOS/Android अॅप आर्किटेक्चर आणि नोटिफिकेशन सिस्टम्स
+- **गेम इंजिन्स**: Unity, Unreal, आणि वेब-आधारित गेम डेव्हलपमेंट
+- **एंटरप्राइज सॉफ्टवेअर**: इव्हेंट सोर्सिंग आणि डिस्ट्रिब्युटेड सिस्टम डिझाइन
+- **API डिझाइन**: RESTful सर्व्हिसेस आणि रिअल-टाइम संवाद
 
-[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/30)
+**प्रोफेशनल कौशल्ये मिळवली**: तुम्ही आता करू शकता:
+- **डिझाइन** स्केलेबल सॉफ्टवेअर आर्किटेक्चर वापरून सिद्ध पॅटर्न्स
+- **अंमलात आणा** इव्हेंट-ड्रिव्हन सिस्टम्स जे जटिल संवाद हाताळतात
+- **निवडा** वेगवेगळ्या परिस्थितीसाठी योग्य कोड ऑर्गनायझेशन स्ट्रॅटेजीज
+- **डिबग** आणि लूजली कपल्ड सिस्टम्स प्रभावीपणे देखरेख करा
+- **संवाद साधा** तांत्रिक निर्णय इंडस्ट्री-स्टँडर्ड टर्मिनोलॉजी वापरून
 
-## पुनरावलोकन आणि स्व-अभ्यास
+**पुढील स्तर**: तुम्ही हे पॅटर्न्स वास्तविक गेममध्ये अंमलात आणण्यासाठी, प्रगत गेम डेव्हलपमेंट विषय एक्सप्लोर करण्यासाठी, किंवा वेब अनुप्रयोगांमध्ये या आर्किटेक्चरल संकल्पनांचा उपयोग करण्यासाठी तयार आहात!
 
-Pub/Sub बद्दल अधिक जाणून घ्या [याबद्दल वाचून](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
+🌟 **साध्य केलेले यश**: तुम्ही मूलभूत सॉफ्टवेअर आर्किटेक्चर पॅटर्न्समध्ये प्रावीण्य मिळवले आहे जे साध्या गेम्सपासून ते जटिल एंटरप्राइज सिस्टम्सपर्यंत सर्वकाही समर्थित करतात!
 
 ## असाइनमेंट
 
@@ -367,4 +623,4 @@ Pub/Sub बद्दल अधिक जाणून घ्या [याबद
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/6-space-game/2-drawing-to-canvas/README.md b/translations/mr/6-space-game/2-drawing-to-canvas/README.md
index ee58791fae..7ac4316bba 100644
--- a/translations/mr/6-space-game/2-drawing-to-canvas/README.md
+++ b/translations/mr/6-space-game/2-drawing-to-canvas/README.md
@@ -1,29 +1,76 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "84053695dca714e16ed064366503ebd5",
-  "translation_date": "2025-10-22T16:30:27+00:00",
+  "original_hash": "7994743c5b21fdcceb36307916ef249a",
+  "translation_date": "2025-11-03T14:57:22+00:00",
   "source_file": "6-space-game/2-drawing-to-canvas/README.md",
   "language_code": "mr"
 }
 -->
 # स्पेस गेम तयार करा भाग 2: हिरो आणि मॉन्स्टर्स कॅनव्हासवर काढा
 
-कॅनव्हास API ही वेब डेव्हलपमेंटमधील सर्वात शक्तिशाली वैशिष्ट्यांपैकी एक आहे, जी तुमच्या ब्राउझरमध्ये डायनॅमिक, इंटरॅक्टिव्ह ग्राफिक्स तयार करण्यासाठी वापरली जाते. या धड्यात, आपण त्या रिकाम्या HTML `<canvas>` घटकाला हिरो आणि मॉन्स्टर्सने भरलेल्या गेमच्या जगात बदलू. कॅनव्हासला तुमचा डिजिटल आर्ट बोर्ड समजा जिथे कोड व्हिज्युअल बनतो.
-
-आम्ही मागील धड्यात शिकलेल्या गोष्टींवर काम करत आहोत आणि आता आम्ही व्हिज्युअल पैलूंमध्ये खोलवर जाऊ. तुम्ही गेम स्प्राइट्स कसे लोड करायचे आणि प्रदर्शित करायचे, घटक अचूकपणे कसे स्थानबद्ध करायचे आणि तुमच्या स्पेस गेमसाठी व्हिज्युअल पाया कसा तयार करायचा हे शिकाल. हे स्थिर वेब पृष्ठे आणि डायनॅमिक, इंटरॅक्टिव्ह अनुभव यांच्यातील अंतर कमी करते.
+```mermaid
+journey
+    title Your Canvas Graphics Journey
+    section Foundation
+      Understand Canvas API: 3: Student
+      Learn coordinate system: 4: Student
+      Draw basic shapes: 4: Student
+    section Image Handling
+      Load game assets: 4: Student
+      Handle async loading: 5: Student
+      Position sprites: 5: Student
+    section Game Rendering
+      Create game screen: 5: Student
+      Build formations: 5: Student
+      Optimize performance: 4: Student
+```
 
-या धड्याच्या शेवटी, तुमच्याकडे तुमच्या हिरो शिप योग्य प्रकारे स्थित असलेल्या आणि शत्रूंच्या फॉर्मेशन्स लढाईसाठी तयार असलेल्या पूर्ण गेम सीन असेल. तुम्हाला समजेल की आधुनिक गेम ब्राउझरमध्ये ग्राफिक्स कसे रेंडर करतात आणि तुमचे स्वतःचे इंटरॅक्टिव्ह व्हिज्युअल अनुभव तयार करण्यासाठी कौशल्य मिळेल. चला कॅनव्हास ग्राफिक्स एक्सप्लोर करूया आणि तुमचा स्पेस गेम जिवंत करूया!
+कॅनव्हास API ही वेब डेव्हलपमेंटमधील सर्वात शक्तिशाली वैशिष्ट्यांपैकी एक आहे, जी तुमच्या ब्राउझरमध्ये डायनॅमिक, इंटरॅक्टिव ग्राफिक्स तयार करण्यासाठी वापरली जाते. या धड्यात, आपण त्या रिकाम्या HTML `<canvas>` घटकाला हिरो आणि मॉन्स्टर्सने भरलेल्या गेम वर्ल्डमध्ये बदलू. कॅनव्हासला तुमचा डिजिटल आर्ट बोर्ड समजा जिथे कोड दृश्यात बदलतो.
+
+आम्ही मागील धड्यात शिकलेल्या गोष्टींवर आधारित काम करत आहोत आणि आता आम्ही दृश्यात्मक पैलूंमध्ये खोलवर जाऊ. तुम्ही गेम स्प्राइट्स कसे लोड करायचे आणि प्रदर्शित करायचे, घटक अचूकपणे कसे स्थानबद्ध करायचे आणि तुमच्या स्पेस गेमसाठी दृश्यात्मक पाया कसा तयार करायचा हे शिकाल. हे स्थिर वेब पृष्ठे आणि डायनॅमिक, इंटरॅक्टिव अनुभव यांच्यातील अंतर कमी करते.
+
+या धड्याच्या शेवटी, तुमच्याकडे तुमच्या हिरो शिपला योग्यरित्या स्थानबद्ध केलेले आणि शत्रूंच्या फॉर्मेशन्स लढाईसाठी तयार असलेले पूर्ण गेम दृश्य असेल. तुम्हाला समजेल की आधुनिक गेम्स ब्राउझरमध्ये ग्राफिक्स कसे रेंडर करतात आणि तुमचे स्वतःचे इंटरॅक्टिव दृश्यात्मक अनुभव तयार करण्यासाठी कौशल्य मिळेल. चला कॅनव्हास ग्राफिक्स एक्सप्लोर करूया आणि तुमच्या स्पेस गेमला जीवंत करूया!
+
+```mermaid
+mindmap
+  root((Canvas Graphics))
+    Canvas Element
+      HTML5 Feature
+      2D Context
+      Coordinate System
+      Pixel Control
+    Drawing Operations
+      Basic Shapes
+      Text Rendering
+      Image Display
+      Path Drawing
+    Asset Management
+      Image Loading
+      Async Operations
+      Error Handling
+      Performance
+    Game Rendering
+      Sprite Positioning
+      Formation Layout
+      Scene Composition
+      Frame Updates
+    Visual Effects
+      Colors & Styles
+      Transformations
+      Animations
+      Layering
+```
 
 ## प्री-लेक्चर क्विझ
 
 [प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/31)
 
-## कॅनव्हास
+## कॅनव्हास म्हणजे काय?
 
-तर हे `<canvas>` घटक नेमके काय आहे? वेब ब्राउझरमध्ये डायनॅमिक ग्राफिक्स आणि अ‍ॅनिमेशन तयार करण्यासाठी HTML5 चे समाधान आहे. नियमित प्रतिमा किंवा व्हिडिओ स्थिर असतात, परंतु कॅनव्हास तुम्हाला स्क्रीनवर दिसणाऱ्या प्रत्येक गोष्टीवर पिक्सेल-स्तरीय नियंत्रण देते. हे गेम्स, डेटा व्हिज्युअलायझेशन आणि इंटरॅक्टिव्ह आर्टसाठी परिपूर्ण बनवते. याला प्रोग्राम करण्यायोग्य ड्रॉइंग पृष्ठभाग म्हणून विचार करा जिथे जावास्क्रिप्ट तुमचा ब्रश बनतो.
+तर हे `<canvas>` घटक नेमके काय आहे? हे HTML5 चे वेब ब्राउझरमध्ये डायनॅमिक ग्राफिक्स आणि अ‍ॅनिमेशन तयार करण्याचे समाधान आहे. नियमित प्रतिमा किंवा व्हिडिओ जे स्थिर असतात त्याऐवजी, कॅनव्हास तुम्हाला स्क्रीनवर दिसणाऱ्या प्रत्येक गोष्टीवर पिक्सेल-स्तरीय नियंत्रण देते. हे गेम्स, डेटा व्हिज्युअलायझेशन आणि इंटरॅक्टिव आर्टसाठी परिपूर्ण बनवते. याला प्रोग्रामेबल ड्रॉइंग पृष्ठभाग समजा जिथे जावास्क्रिप्ट तुमचा ब्रश बनते.
 
-डिफॉल्टनुसार, कॅनव्हास घटक तुमच्या पृष्ठावर रिक्त, पारदर्शक आयतासारखा दिसतो. पण इथेच त्याची खरी ताकद आहे! जेव्हा तुम्ही जावास्क्रिप्ट वापरून आकार काढता, प्रतिमा लोड करता, अ‍ॅनिमेशन तयार करता आणि वापरकर्त्याच्या संवादांना प्रतिसाद देण्यासाठी गोष्टी तयार करता तेव्हा त्याची खरी ताकद दिसून येते. हे 1960 च्या दशकातील बेल लॅब्समधील सुरुवातीच्या संगणक ग्राफिक्स पायोनियर्सनी पहिल्या डिजिटल अ‍ॅनिमेशन तयार करण्यासाठी प्रत्येक पिक्सेल प्रोग्राम करावा लागला त्यासारखे आहे.
+डिफॉल्टनुसार, कॅनव्हास घटक तुमच्या पृष्ठावर रिक्त, पारदर्शक आयतासारखा दिसतो. पण इथेच त्याची क्षमता आहे! जेव्हा तुम्ही जावास्क्रिप्ट वापरून आकार काढता, प्रतिमा लोड करता, अ‍ॅनिमेशन तयार करता आणि गोष्टी वापरकर्त्याच्या संवादांना प्रतिसाद देण्यासाठी बनवता तेव्हा त्याची खरी ताकद दिसून येते. हे 1960 च्या दशकातील बेल लॅब्समधील सुरुवातीच्या संगणक ग्राफिक्स पायोनियर्सप्रमाणे आहे ज्यांना पहिल्या डिजिटल अ‍ॅनिमेशन तयार करण्यासाठी प्रत्येक पिक्सेल प्रोग्राम करावा लागला.
 
 ✅ [कॅनव्हास API बद्दल अधिक वाचा](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN वर.
 
@@ -36,24 +83,62 @@ CO_OP_TRANSLATOR_METADATA:
 **या कोडमध्ये काय होते:**
 - **सेट करते** `id` अ‍ॅट्रिब्युट जेणेकरून तुम्ही जावास्क्रिप्टमध्ये या विशिष्ट कॅनव्हास घटकाचा संदर्भ घेऊ शकता
 - **परिभाषित करते** पिक्सेलमधील `width` जे कॅनव्हासचा आडवा आकार नियंत्रित करते
-- **स्थापित करते** पिक्सेलमधील `height` जे कॅनव्हासचा उभा आकार ठरवते
-
-## साधी भूमितीय आकृती काढणे
-
-आता तुम्हाला कॅनव्हास घटक काय आहे हे माहित आहे, चला प्रत्यक्षात त्यावर काढण्याचा शोध घेऊया! कॅनव्हास एक समन्वय प्रणाली वापरते जी गणित वर्गातून परिचित वाटू शकते, परंतु संगणक ग्राफिक्ससाठी विशिष्ट एक महत्त्वाचा ट्विस्ट आहे.
-
-कॅनव्हास x-अक्ष (आडवा) आणि y-अक्ष (उभा) असलेल्या कार्टेशियन समन्वय प्रणालीचा वापर करतो ज्यामुळे तुम्ही काढलेल्या प्रत्येक गोष्टीचे स्थान ठरवता येते. परंतु येथे मुख्य फरक आहे: गणित वर्गातील समन्वय प्रणालीच्या विपरीत, मूळ बिंदू `(0,0)` वरून सुरू होते वरच्या डाव्या कोपऱ्यात, x-मूल्ये उजवीकडे जाताना वाढतात आणि y-मूल्ये खाली जाताना वाढतात. ही पद्धत सुरुवातीच्या संगणक डिस्प्लेपासून सुरू झाली जिथे इलेक्ट्रॉन बीम वरून खाली स्कॅन करत होते, ज्यामुळे वरचा डावा कोपरा नैसर्गिक प्रारंभ बिंदू बनला.
+- **स्थापित करते** पिक्सेलमधील `height` जे कॅनव्हासची उभी परिमाणे ठरवते
+
+## साध्या भूमितीय आकृत्या काढणे
+
+आता तुम्हाला कॅनव्हास घटक काय आहे हे माहित आहे, चला प्रत्यक्षात त्यावर काढण्याचा शोध घेऊया! कॅनव्हास एक समन्वय प्रणाली वापरते जी गणित वर्गातून परिचित वाटू शकते, परंतु संगणक ग्राफिक्ससाठी एक महत्त्वाचा ट्विस्ट आहे.
+
+कॅनव्हास x-अक्ष (आडवा) आणि y-अक्ष (उभा) असलेल्या कार्टेशियन समन्वय प्रणालीचा वापर करतो ज्यावर तुम्ही काढलेल्या प्रत्येक गोष्टीचे स्थान ठरवता. पण इथे मुख्य फरक आहे: गणित वर्गातील समन्वय प्रणालीच्या विपरीत, मूळ बिंदू `(0,0)` वरच्या डाव्या कोपऱ्यात सुरू होते, x-मूल्ये उजवीकडे जाताना वाढतात आणि y-मूल्ये खाली जाताना वाढतात. ही पद्धत सुरुवातीच्या संगणक डिस्प्लेपासून सुरू झाली जिथे इलेक्ट्रॉन बीम वरून खाली स्कॅन करत होते, ज्यामुळे वरचा डावा नैसर्गिक प्रारंभ बिंदू बनला.
+
+```mermaid
+quadrantChart
+    title Canvas Coordinate System
+    x-axis Left --> Right
+    y-axis Top --> Bottom
+    quadrant-1 Quadrant 1
+    quadrant-2 Quadrant 2  
+    quadrant-3 Quadrant 3
+    quadrant-4 Quadrant 4
+    
+    Origin Point: [0.1, 0.1]
+    Hero Center: [0.5, 0.8]
+    Enemy Formation: [0.3, 0.2]
+    Power-up: [0.7, 0.6]
+    UI Elements: [0.9, 0.1]
+```
 
 ![कॅनव्हासचा ग्रिड](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.mr.png)
 > प्रतिमा [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) वरून
 
-कॅनव्हास घटकावर काढण्यासाठी, तुम्ही कॅनव्हास ग्राफिक्सच्या सर्वात महत्त्वाच्या तीन-स्टेप प्रक्रियेचे अनुसरण कराल. तुम्ही हे काही वेळा केल्यानंतर, ते सहज होईल:
+कॅनव्हास घटकावर काढण्यासाठी, तुम्ही कॅनव्हास ग्राफिक्सच्या सर्व मूलभूत गोष्टी तयार करणारी तीच तीन-चरण प्रक्रिया अनुसरण कराल. तुम्ही हे काही वेळा केल्यानंतर, ते सहज होईल:
+
+```mermaid
+flowchart LR
+    A[HTML Canvas Element] --> B[Get Canvas Reference]
+    B --> C[Get 2D Context]
+    C --> D[Drawing Operations]
+    
+    D --> E[Draw Shapes]
+    D --> F[Draw Text]
+    D --> G[Draw Images]
+    D --> H[Apply Styles]
+    
+    E --> I[Render to Screen]
+    F --> I
+    G --> I
+    H --> I
+    
+    style A fill:#e1f5fe
+    style C fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 1. **तुमच्या कॅनव्हास घटकाचा संदर्भ मिळवा** DOM मधून (इतर HTML घटकांप्रमाणेच)
 2. **2D रेंडरिंग संदर्भ मिळवा** – हे सर्व ड्रॉइंग पद्धती प्रदान करते
 3. **काढायला सुरुवात करा!** संदर्भाच्या अंगभूत पद्धतींचा वापर करून तुमचे ग्राफिक्स तयार करा
 
-हे कोडमध्ये कसे दिसते:
+कोडमध्ये हे कसे दिसते:
 
 ```javascript
 // Step 1: Get the canvas element
@@ -67,29 +152,68 @@ ctx.fillStyle = 'red';
 ctx.fillRect(0, 0, 200, 200); // x, y, width, height
 ```
 
-**चला हे टप्प्याटप्प्याने समजून घेऊया:**
-- आम्ही **आमचा कॅनव्हास घटक** त्याच्या ID वापरून पकडतो आणि एका व्हेरिएबलमध्ये साठवतो
+**चरण-दर-चरण याचे विश्लेषण करूया:**
+- आम्ही **आमचा कॅनव्हास घटक** त्याच्या ID वापरून पकडतो आणि तो एका व्हेरिएबलमध्ये साठवतो
 - आम्ही **2D रेंडरिंग संदर्भ मिळवतो** – हे आमचे ड्रॉइंग टूलकिट आहे
 - आम्ही **कॅनव्हासला सांगतो** की आम्हाला `fillStyle` प्रॉपर्टी वापरून गोष्टी लाल रंगाने भरायच्या आहेत
 - आम्ही **आयत काढतो** जो वरच्या डाव्या कोपऱ्यात (0,0) सुरू होतो आणि 200 पिक्सेल रुंद आणि उंच आहे
 
 ✅ कॅनव्हास API मुख्यतः 2D आकारांवर लक्ष केंद्रित करते, परंतु तुम्ही वेबसाइटवर 3D घटक देखील काढू शकता; यासाठी तुम्ही [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) वापरू शकता.
 
-तुम्ही कॅनव्हास API सह अनेक गोष्टी काढू शकता जसे की:
+तुम्ही कॅनव्हास API चा वापर करून अनेक गोष्टी काढू शकता जसे की:
 
-- **भूमितीय आकार**, आम्ही आधीच आयत कसा काढायचा ते दाखवले आहे, परंतु तुम्ही आणखी बरेच काही काढू शकता.
+- **भूमितीय आकार**, आम्ही आयत कसे काढायचे ते आधीच दाखवले आहे, परंतु तुम्ही आणखी बरेच काही काढू शकता.
 - **मजकूर**, तुम्ही कोणत्याही फॉन्ट आणि रंगासह मजकूर काढू शकता.
-- **प्रतिमा**, तुम्ही .jpg किंवा .png सारख्या प्रतिमा अ‍ॅसेटवरून प्रतिमा काढू शकता.
+- **प्रतिमा**, तुम्ही .jpg किंवा .png सारख्या प्रतिमा अ‍ॅसेटवर आधारित प्रतिमा काढू शकता.
 
-✅ प्रयत्न करा! तुम्हाला आयत कसा काढायचा माहित आहे, तुम्ही पृष्ठावर वर्तुळ काढू शकता का? CodePen वर काही मनोरंजक कॅनव्हास ड्रॉइंग्स पहा. येथे एक [खूप प्रभावी उदाहरण](https://codepen.io/dissimulate/pen/KrAwx) आहे.
+✅ प्रयत्न करा! तुम्हाला आयत कसे काढायचे माहित आहे, तुम्ही पृष्ठावर वर्तुळ काढू शकता का? CodePen वर काही मनोरंजक कॅनव्हास ड्रॉइंग्स पहा. येथे एक [विशेषतः प्रभावी उदाहरण](https://codepen.io/dissimulate/pen/KrAwx) आहे.
 
-## प्रतिमा अ‍ॅसेट लोड करा आणि काढा
+### 🔄 **शैक्षणिक तपासणी**
+**कॅनव्हास मूलभूत गोष्टींचे समज**: प्रतिमा लोडिंगकडे जाण्यापूर्वी, सुनिश्चित करा की तुम्ही:
+- ✅ कॅनव्हास समन्वय प्रणाली गणितीय समन्वयांपेक्षा कशी वेगळी आहे हे स्पष्ट करू शकता
+- ✅ कॅनव्हास ड्रॉइंग ऑपरेशन्ससाठी तीन-चरण प्रक्रिया समजून घ्या
+- ✅ 2D रेंडरिंग संदर्भ काय प्रदान करते हे ओळखा
+- ✅ fillStyle आणि fillRect एकत्र कसे कार्य करतात हे वर्णन करा
 
-मूलभूत आकार काढणे सुरुवात करण्यासाठी उपयुक्त आहे, परंतु बहुतेक गेम्सना प्रत्यक्ष प्रतिमा आवश्यक असतात! स्प्राइट्स, पार्श्वभूमी आणि टेक्सचर्स गेम्सना त्यांचे व्हिज्युअल आकर्षण देतात. कॅनव्हासवर प्रतिमा लोड करणे आणि प्रदर्शित करणे भूमितीय आकार काढण्यापेक्षा वेगळे कार्य करते, परंतु एकदा प्रक्रिया समजल्यावर ते सोपे आहे.
+**जलद स्व-परीक्षण**: तुम्ही (100, 50) स्थितीवर 25 त्रिज्याचा निळा वर्तुळ कसा काढाल?
+```javascript
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(100, 50, 25, 0, 2 * Math.PI);
+ctx.fill();
+```
 
-आपल्याला एक `Image` ऑब्जेक्ट तयार करणे, आमची प्रतिमा फाइल लोड करणे (हे असिंक्रोनसपणे होते, म्हणजे "पार्श्वभूमीत"), आणि प्रतिमा तयार झाल्यावर कॅनव्हासवर काढणे आवश्यक आहे. ही पद्धत सुनिश्चित करते की तुमच्या प्रतिमा योग्य प्रकारे प्रदर्शित होतात आणि लोड करताना तुमचा अ‍ॅप्लिकेशन ब्लॉक होत नाही.
+**कॅनव्हास ड्रॉइंग पद्धती तुम्हाला आता माहित आहेत:**
+- **fillRect()**: भरलेले आयत काढते
+- **fillStyle**: रंग आणि नमुने सेट करते
+- **beginPath()**: नवीन ड्रॉइंग पथ सुरू करते
+- **arc()**: वर्तुळे आणि वक्र तयार करते
 
-### मूलभूत प्रतिमा लोड करणे
+## प्रतिमा अ‍ॅसेट लोड करा आणि काढा
+
+मूलभूत आकार काढणे सुरुवातीसाठी उपयुक्त आहे, परंतु बहुतेक गेम्सना प्रत्यक्ष प्रतिमा आवश्यक असतात! स्प्राइट्स, पार्श्वभूमी आणि टेक्सचर्स गेम्सना त्यांचे दृश्यात्मक आकर्षण देतात. कॅनव्हासवर प्रतिमा लोड करणे आणि प्रदर्शित करणे भूमितीय आकार काढण्यापेक्षा वेगळे कार्य करते, परंतु एकदा प्रक्रिया समजल्यावर ते सोपे होते.
+
+आपल्याला एक `Image` ऑब्जेक्ट तयार करणे, आमची प्रतिमा फाइल लोड करणे (हे असिंक्रोनसपणे होते, म्हणजे "पार्श्वभूमीत"), आणि ती कॅनव्हासवर तयार झाल्यावर काढणे आवश्यक आहे. ही पद्धत सुनिश्चित करते की तुमच्या प्रतिमा योग्यरित्या प्रदर्शित होतात आणि लोड होत असताना तुमच्या अ‍ॅप्लिकेशनला ब्लॉक करत नाहीत.
+
+```mermaid
+sequenceDiagram
+    participant JS as JavaScript
+    participant Img as Image Object
+    participant Server as File Server
+    participant Canvas as Canvas Context
+    
+    JS->>Img: new Image()
+    JS->>Img: Set src property
+    Img->>Server: Request image file
+    Server->>Img: Return image data
+    Img->>JS: Trigger onload event
+    JS->>Canvas: drawImage(img, x, y)
+    Canvas->>Canvas: Render to screen
+    
+    Note over JS,Canvas: Async loading prevents UI blocking
+```
+
+### मूलभूत प्रतिमा लोडिंग
 
 ```javascript
 const img = new Image();
@@ -102,12 +226,12 @@ img.onload = () => {
 
 **या कोडमध्ये काय होते:**
 - आम्ही **नवीन प्रतिमा ऑब्जेक्ट तयार करतो** जे आमचे स्प्राइट किंवा टेक्सचर ठेवेल
-- आम्ही **त्याला सांगतो** कोणती प्रतिमा फाइल लोड करायची `source` पथ सेट करून
-- आम्ही **लोड इव्हेंटसाठी ऐकतो** जेणेकरून प्रतिमा वापरण्यासाठी तयार झाल्याची अचूक वेळ आम्हाला माहित होईल
+- आम्ही **त्याला सांगतो** कोणती प्रतिमा फाइल लोड करायची ती स्रोत पथ सेट करून
+- आम्ही **लोड इव्हेंटसाठी ऐकतो** जेणेकरून आम्हाला अचूकपणे माहित होईल की प्रतिमा वापरण्यास तयार आहे
 
-### प्रतिमा लोड करण्याचा चांगला मार्ग
+### प्रतिमा लोड करण्याचा एक चांगला मार्ग
 
-येथे व्यावसायिक डेव्हलपर्स सामान्यतः वापरत असलेल्या प्रतिमा लोडिंग हाताळण्याचा अधिक मजबूत मार्ग आहे. आम्ही प्रतिमा लोडिंग Promise-आधारित फंक्शनमध्ये रॅप करू – ही पद्धत, ES6 मध्ये जावास्क्रिप्ट प्रॉमिसेस मानक बनल्यानंतर लोकप्रिय झाली, तुमचा कोड अधिक व्यवस्थित करते आणि त्रुटींचे सौम्यपणे व्यवस्थापन करते:
+येथे प्रतिमा लोडिंग हाताळण्यासाठी एक अधिक मजबूत पद्धत आहे जी व्यावसायिक डेव्हलपर्स सामान्यतः वापरतात. आम्ही प्रतिमा लोडिंग Promise-आधारित फंक्शनमध्ये रॅप करू – ही पद्धत, जेव्हा जावास्क्रिप्ट प्रॉमिसेस ES6 मध्ये मानक बनली तेव्हा लोकप्रिय झाली, तुमचा कोड अधिक व्यवस्थित बनवते आणि त्रुटींचे व्यवस्थितपणे व्यवस्थापन करते:
 
 ```javascript
 function loadAsset(path) {
@@ -136,12 +260,12 @@ async function initializeGame() {
 ```
 
 **आम्ही येथे काय केले आहे:**
-- **संपूर्ण प्रतिमा लोडिंग लॉजिक Promise मध्ये रॅप केले** जेणेकरून आम्ही ते चांगल्या प्रकारे हाताळू शकू
-- **त्रुटी हाताळणी जोडली** जी आम्हाला काहीतरी चुकल्यास प्रत्यक्षात सांगते
+- **संपूर्ण प्रतिमा लोडिंग लॉजिक Promise मध्ये रॅप केले** जेणेकरून आम्ही ते चांगल्या प्रकारे हाताळू शकतो
+- **त्रुटी हाताळणी जोडली** जी आम्हाला प्रत्यक्षात सांगते की काहीतरी चुकले आहे
 - **आधुनिक async/await सिंटॅक्स वापरला** कारण तो वाचण्यासाठी खूप स्वच्छ आहे
-- **try/catch ब्लॉक्स समाविष्ट केले** जेणेकरून लोडिंगमध्ये काही अडचण आल्यास सौम्यपणे हाताळता येईल
+- **try/catch ब्लॉक्स समाविष्ट केले** जेणेकरून लोडिंगमध्ये कोणत्याही अडचणींना व्यवस्थितपणे हाताळता येईल
 
-तुमच्या प्रतिमा लोड झाल्यावर, कॅनव्हासवर त्यांना काढणे प्रत्यक्षात खूप सोपे आहे:
+तुमच्या प्रतिमा लोड झाल्यावर, त्या कॅनव्हासवर काढणे प्रत्यक्षात खूप सोपे आहे:
 
 ```javascript
 async function renderGameScreen() {
@@ -163,16 +287,41 @@ async function renderGameScreen() {
 }
 ```
 
-**चला हे टप्प्याटप्प्याने समजून घेऊया:**
+**चरण-दर-चरण याचे विश्लेषण करूया:**
 - आम्ही **आमच्या हिरो आणि मॉन्स्टर प्रतिमा पार्श्वभूमीत लोड करतो** await वापरून
 - आम्ही **आमचा कॅनव्हास घटक पकडतो** आणि आम्हाला आवश्यक असलेला 2D रेंडरिंग संदर्भ मिळवतो
-- आम्ही **हिरो प्रतिमा केंद्रात ठेवतो** काही जलद समन्वय गणित वापरून
-- आम्ही **मॉन्स्टर प्रतिमा वरच्या डाव्या कोपऱ्यात ठेवतो** शत्रू फॉर्मेशन सुरू करण्यासाठी
-- आम्ही **लोडिंग किंवा रेंडरिंग दरम्यान होणाऱ्या कोणत्याही त्रुटी पकडतो**
+- आम्ही **हिरो प्रतिमा केंद्रात स्थानबद्ध करतो** काही जलद समन्वय गणित वापरून
+- आम्ही **मॉन्स्टर प्रतिमा वरच्या डाव्या कोपऱ्यात ठेवतो** शत्रूंच्या फॉर्मेशनसाठी सुरुवात करण्यासाठी
+- आम्ही **कोणत्याही त्रुटी पकडतो** ज्या लोडिंग किंवा रेंडरिंग दरम्यान होऊ शकतात
+
+```mermaid
+flowchart TD
+    A[Load Assets] --> B{All Images Loaded?}
+    B -->|No| C[Show Loading]
+    B -->|Yes| D[Get Canvas Context]
+    C --> B
+    D --> E[Clear Screen]
+    E --> F[Draw Background]
+    F --> G[Draw Enemy Formation]
+    G --> H[Draw Hero Ship]
+    H --> I[Apply Visual Effects]
+    I --> J[Render Frame]
+    
+    subgraph "Rendering Pipeline"
+        K[Asset Management]
+        L[Scene Composition]
+        M[Drawing Operations]
+        N[Frame Output]
+    end
+    
+    style A fill:#e1f5fe
+    style J fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 ## आता तुमचा गेम तयार करण्याची वेळ आली आहे
 
-आता आम्ही सर्वकाही एकत्र ठेवून तुमच्या स्पेस गेमचा व्हिज्युअल पाया तयार करू. तुम्हाला कॅनव्हास मूलभूत गोष्टी आणि प्रतिमा लोडिंग तंत्रांची ठोस समज आहे, त्यामुळे हा हाताळणी विभाग तुम्हाला योग्य प्रकारे स्थित स्प्राइट्ससह पूर्ण गेम स्क्रीन तयार करण्यासाठी मार्गदर्शन करेल.
+आता आम्ही सर्वकाही एकत्र ठेवून तुमच्या स्पेस गेमचा दृश्यात्मक पाया तयार करू. तुम्हाला कॅनव्हास मूलभूत गोष्टी आणि प्रतिमा लोडिंग तंत्रांची ठोस समज आहे, त्यामुळे हा हाताळण्याचा विभाग तुम्हाला योग्यरित्या स्थानबद्ध स्प्राइट्ससह पूर्ण गेम स्क्रीन तयार करण्यासाठी मार्गदर्शन करेल.
 
 ### काय तयार करायचे
 
@@ -186,7 +335,7 @@ async function renderGameScreen() {
 
    ![मॉन्स्टर शिप](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.mr.png)
 
-### विकास सुरू करण्यासाठी शिफारस केलेले चरण
+### विकास सुरू करण्यासाठी शिफारस केलेली पावले
 
 `your-work` सब फोल्डरमध्ये तयार केलेल्या स्टार्टर फाइल्स शोधा. तुमच्या प्रोजेक्ट स्ट्रक्चरमध्ये खालील गोष्टी असाव्यात:
 
@@ -200,15 +349,15 @@ your-work/
 └── package.json
 ```
 
-**तुम्ही कशावर काम करत आहात:**
+**तुमच्याकडे काय आहे:**
 - **गेम स्प्राइट्स** `assets/` फोल्डरमध्ये राहतात त्यामुळे सर्वकाही व्यवस्थित राहते
 - **तुमची मुख्य HTML फाइल** कॅनव्हास घटक सेट करते आणि सर्वकाही तयार करते
-- **एक जावास्क्रिप्ट फाइल** जिथे तुम्ही तुमचे गेम रेंडरिंग मॅजिक लिहाल
-- **एक package.json** जे विकास सर्व्हर सेट करते जेणेकरून तुम्ही स्थानिक पातळीवर चाचणी करू शकता
+- **जावास्क्रिप्ट फाइल** जिथे तुम्ही तुमचे सर्व गेम रेंडरिंग मॅजिक लिहाल
+- **package.json** जे विकास सर्व्हर सेट करते जेणेकरून तुम्ही स्थानिकपणे चाचणी करू शकता
 
-हा फोल्डर Visual Studio Code मध्ये उघडा आणि विकास सुरू करा. तुम्हाला Visual Studio Code, NPM, आणि Node.js सह स्थानिक विकास वातावरणाची आवश्यकता असेल. तुमच्या संगणकावर `npm` सेट केले नसेल, तर [ते कसे स्थापित करायचे ते येथे आहे](https://www.npmjs.com/get-npm).
+विकास सुरू करण्यासाठी हे फोल्डर Visual Studio Code मध्ये उघडा. तुम्हाला Visual Studio Code, NPM, आणि Node.js स्थापित असलेले स्थानिक विकास वातावरण आवश्यक आहे. तुमच्या संगणकावर `npm` सेट केलेले नसेल तर, [ते कसे स्थापित करायचे](https://www.npmjs.com/get-npm) येथे आहे.
 
-तुमचा विकास सर्व्हर सुरू करा `your-work` फोल्डरमध्ये जाऊन:
+`your-work` फोल्डरमध्ये नेव्हिगेट करून तुमचा विकास सर्व्हर सुरू करा:
 
 ```bash
 cd your-work
@@ -217,57 +366,186 @@ npm start
 
 **हा आदेश काही छान गोष्टी करतो:**
 - **स्थानिक सर्व्हर सुरू करतो** `http://localhost:5000` वर जेणेकरून तुम्ही तुमचा गेम चाचणी करू शकता
-- **तुमच्या फाइल्स योग्य प्रकारे सर्व्ह करतो** जेणेकरून तुमचा ब्राउझर त्यांना योग्य प्रकारे लोड करू शकेल
-- **तुमच्या फाइल्ससाठी बदल पाहतो** जेणेकरून तुम्ही सहज विकास करू शकता
+- **तुमच्या सर्व फाइल्स योग्यरित्या सर्व्ह करतो** जेणेकरून तुमचा ब्राउझर त्यांना योग्यरित्या लोड करू शकेल
+- **तुमच्या फाइल्ससाठी बदल पाहतो** जेणेकरून तुम्ही सहजपणे विकास करू शकता
 - **तुम्हाला एक व्यावसायिक विकास वातावरण देते** सर्वकाही चाचणी करण्यासाठी
 
-> 💡 **टीप**: तुमचा ब्राउझर सुरुवातीला रिकामे पृष्ठ दाखवेल – ते अपेक्षित आहे! तुम्ही कोड जोडत असताना, तुमचे बदल पाहण्यासाठी तुमचा ब्राउझर रीफ्रेश करा. NASA ने अपोलो मार्गदर्शन संगणक तयार करण्यासाठी प्रत्येक घटकाची चाचणी करून मोठ्या प्रणालीमध्ये समाकलित करण्यापूर्वी ही पुनरावृत्ती विकास पद्धत वापरली.
+> 💡 **टीप**: तुमचा ब्राउझर सुरुवातीला रिकामे पृष्ठ दाखवेल – ते अपेक्षित आहे! तुम्ही कोड जोडत असताना, तुमचे बदल पाहण्यासाठी तुमचा ब्राउझर रीफ्रेश करा. NASA ने अपोलो मार्गदर्शन संगणक तयार करण्यासाठी प्रत्येक घटकाची चाचणी घेऊन त्याला मोठ्या प्रणालीमध्ये समाकलित करण्यापूर्वी केलेल्या पद्धतीसारखा हा पुनरावृत्ती विकास दृष्टिकोन आहे.
 
 ### कोड जोडा
 
 `your-work/app.js` मध्ये आवश्यक कोड जोडा खालील कार्ये पूर्ण करण्यासाठी:
 
 1. **काळ्या पार्श्वभूमीसह कॅनव्हास काढा**
-   > 💡 **कसे करायचे**: `/app.js` मध्ये TODO शोधा आणि फक्त दोन ओळी जोडा. `ctx.fillStyle` काळा सेट करा, नंतर तुमच्या कॅनव्हासच्या परिमाणांसह (0,0) पासून सुरू होणारे `ctx.fillRect()` वापरा. सोपे!
+   > 💡 **कसे करायचे**: `/app.js` मधील TODO शोधा आणि फक्त दोन ओळी जोडा. `ctx.fillStyle` काळा सेट करा, नंतर तुमच्या कॅनव्हास परिमाणांसह (0,0) पासून सुरू होणारा `ctx.fillRect()` वापरा. सोपे!
 
 2. **गेम टेक्सचर्स लोड करा**
-   > 💡 **कसे करायचे**: तुमच्या प्लेयर आणि शत्रू प्रतिमा लोड करण्यासाठी `await loadAsset()` वापरा. त्यांना व्हेरिएबल्समध्ये साठवा जेणेकरून तुम्ही त्यांचा नंतर वापर करू शकता. लक्षात ठेवा – तुम्ही त्यांना प्रत्यक्षात काढेपर्यंत ते दिसणार नाहीत!
+   > 💡 **कसे करायचे**: तुमच्या प्लेयर आणि शत्रू प्रतिमा लोड करण्यासाठी `await loadAsset()` वापरा. त्यांना व्हेरिएबल्समध्ये साठवा जेणेकरून तुम्ही त्यांचा नंतर वापर करू शकता. लक्षात ठेवा – तुम्ही प्रत्यक्षात त्यांना काढेपर्यंत ते दिसणार नाहीत!
 
 3. **हिरो शिप केंद्र-तळाच्या स्थितीत काढा**
-   > 💡 **कसे करायचे**: तुमच्या हिरोला स्थान देण्यासाठी `ctx.drawImage()` वापरा. x-समन्वयासाठी, `canvas.width / 2 - 45` वापरून ते केंद्रित करा आणि y-समन्वयासाठी `canvas.height - canvas.height / 4` वापरा जेणेकरून ते तळाच्या भागात ठेवता येईल.
+   > 💡 **कसे करायचे**: तुमच्या हिरोला स्थानबद्ध करण्यासाठी `ctx.drawImage()` वापरा. x-समन्वयासाठी, ते केंद्रित करण्यासाठी `canvas.width / 2 - 45` वापरून पहा आणि y-समन्वयासाठी `canvas.height - canvas.height / 4` वापरा
+- **समन्वय प्रणाली**: गणिताचे स्क्रीनवरील स्थानांमध्ये रूपांतर
+- **स्प्राइट व्यवस्थापन**: गेम ग्राफिक्स लोड करणे आणि दाखवणे
+- **गठन अल्गोरिदम**: व्यवस्थित लेआउटसाठी गणितीय नमुने
+- **असिंक्रोनस ऑपरेशन्स**: आधुनिक JavaScript वापरून गुळगुळीत वापरकर्ता अनुभव
 
-4. **शत्रू जहाजांची 5×5 फॉर्मेशन काढा**
-   > 💡 **कसे करायचे**: `createEnemies` फंक्शन शोधा आणि एक नेस्टेड लूप सेट करा. तुम्हाला स्पेसिंग आणि पोझिशनिंगसाठी काही गणित करावे लागेल, पण काळजी करू नका – मी तुम्हाला नेमके कसे करायचे ते दाखवतो!
+## परिणाम
 
-प्रथम, योग्य शत्रू फॉर्मेशन लेआउटसाठी स्थिरांक स्थापित करा:
+अंतिम परिणाम असा दिसायला हवा:
 
-```javascript
-const ENEMY_TOTAL = 5;
-const ENEMY_SPACING = 98;
-const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
-const START_X = (canvas.width - FORMATION_WIDTH) / 2;
-const STOP_X = START_X + FORMATION_WIDTH;
-```
+![काळा स्क्रीन ज्यामध्ये एक हिरो आणि 5*5 मॉन्स्टर्स आहेत](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.mr.png)
 
-**या स्थिरांक काय करतात ते समजून घेऊया:**
-- आम्ही **प्रत्येक पंक्ती आणि स्तंभासाठी 5 शत्रू सेट करतो** (एक छान 5×5 ग्रिड)
-- आम्ही **शत्रूंमध्ये किती जागा ठेवायची ते परिभाषित करतो** जेणेकरून ते गुदमरलेले दिसणार नाहीत
-- आम्ही **आमच्या संपूर्ण फॉर्मेशनची रुंदी मोजतो**
-- आम्ही **केंद्रित दिसण्यासाठी फॉर्मेशन कुठे सुरू आणि थांबवायचे ते शोधतो**
+## उपाय
 
-मग, शत्रू फॉर्मेशन काढण्यासाठी नेस्टेड लूप तयार करा:
+कृपया स्वतः प्रयत्न करा, पण जर अडचण आली तर [उपाय](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) पहा.
 
-```javascript
-for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
-  for (let y = 0; y < 50 * 5; y += 50) {
-    ctx.drawImage(enemyImg, x, y);
-  }
-}
+---
+
+## GitHub Copilot Agent Challenge 🚀
+
+Agent मोड वापरून खालील आव्हान पूर्ण करा:
+
+**वर्णन:** Canvas API तंत्रज्ञान वापरून तुमच्या स्पेस गेम कॅनव्हासमध्ये व्हिज्युअल इफेक्ट्स आणि इंटरॅक्टिव्ह घटक जोडा.
+
+**प्रॉम्प्ट:** `enhanced-canvas.html` नावाची नवीन फाइल तयार करा ज्यामध्ये कॅनव्हासवर पार्श्वभूमीमध्ये अॅनिमेटेड तारे, हिरो शिपसाठी पल्सिंग हेल्थ बार, आणि शत्रू जहाजे हळूहळू खाली सरकताना दिसतील. JavaScript कोड समाविष्ट करा जो रँडम पोझिशन्स आणि अपॅसिटी वापरून चमकणारे तारे काढतो, हेल्थ लेव्हलनुसार रंग बदलणारा हेल्थ बार (हिरवा > पिवळा > लाल) अंमलात आणतो, आणि शत्रू जहाजे वेगवेगळ्या गतीने स्क्रीनवर खाली सरकवतो.
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
+
+## 🚀 आव्हान
+
+तुम्ही 2D-केंद्रित Canvas API बद्दल शिकला आहात; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) पहा आणि 3D ऑब्जेक्ट काढण्याचा प्रयत्न करा.
+
+## पोस्ट-लेक्चर क्विझ
+
+[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/32)
+
+## पुनरावलोकन आणि स्व-अभ्यास
+
+Canvas API बद्दल अधिक जाणून घ्या [वाचून](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] ब्राउझर कन्सोल उघडा आणि `document.createElement('canvas')` वापरून कॅनव्हास एलिमेंट तयार करा
+- [ ] कॅनव्हास कॉन्टेक्स्टवर `fillRect()` वापरून एक आयत काढण्याचा प्रयत्न करा
+- [ ] `fillStyle` प्रॉपर्टी वापरून वेगवेगळ्या रंगांसह प्रयोग करा
+- [ ] `arc()` पद्धत वापरून एक साधा वर्तुळ काढा
+
+### 🎯 **तुम्ही एका तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि कॅनव्हास मूलभूत गोष्टी समजून घ्या
+- [ ] एकाधिक आकार आणि रंगांसह कॅनव्हास ड्रॉइंग अॅप्लिकेशन तयार करा
+- [ ] तुमच्या गेमसाठी इमेज लोडिंग आणि स्प्राइट रेंडरिंग अंमलात आणा
+- [ ] कॅनव्हासवर वस्तू हलवणारी साधी अॅनिमेशन तयार करा
+- [ ] स्केलिंग, रोटेशन आणि ट्रान्सलेशनसारख्या कॅनव्हास ट्रान्सफॉर्मेशनचा सराव करा
+
+### 📅 **तुमचा आठवडाभराचा कॅनव्हास प्रवास**
+- [ ] पॉलिश ग्राफिक्स आणि स्प्राइट अॅनिमेशनसह स्पेस गेम पूर्ण करा
+- [ ] ग्रेडियंट्स, पॅटर्न्स आणि कंपोझिटिंगसारख्या प्रगत कॅनव्हास तंत्रज्ञानात प्रावीण्य मिळवा
+- [ ] डेटा प्रतिनिधित्वासाठी कॅनव्हास वापरून इंटरॅक्टिव्ह व्हिज्युअलायझेशन तयार करा
+- [ ] गुळगुळीत कार्यक्षमतेसाठी कॅनव्हास ऑप्टिमायझेशन तंत्रज्ञान जाणून घ्या
+- [ ] विविध साधनांसह ड्रॉइंग किंवा पेंटिंग अॅप्लिकेशन तयार करा
+- [ ] कॅनव्हाससह क्रिएटिव्ह कोडिंग पॅटर्न्स आणि जनरेटिव्ह आर्ट एक्सप्लोर करा
+
+### 🌟 **तुमचा महिनाभराचा ग्राफिक्स प्रावीण्य**
+- [ ] Canvas 2D आणि WebGL वापरून जटिल व्हिज्युअल अॅप्लिकेशन्स तयार करा
+- [ ] ग्राफिक्स प्रोग्रामिंग संकल्पना आणि शेडर मूलभूत गोष्टी शिका
+- [ ] ओपन सोर्स ग्राफिक्स लायब्ररी आणि व्हिज्युअलायझेशन टूल्समध्ये योगदान द्या
+- [ ] ग्राफिक्स-इंटेन्सिव्ह अॅप्लिकेशन्ससाठी कार्यक्षमता ऑप्टिमायझेशनमध्ये प्रावीण्य मिळवा
+- [ ] कॅनव्हास प्रोग्रामिंग आणि संगणक ग्राफिक्सबद्दल शैक्षणिक सामग्री तयार करा
+- [ ] व्हिज्युअल अनुभव तयार करण्यात इतरांना मदत करणारा ग्राफिक्स प्रोग्रामिंग तज्ञ बना
+
+## 🎯 तुमचा कॅनव्हास ग्राफिक्स प्रावीण्य टाइमलाइन
+
+```mermaid
+timeline
+    title Canvas API Learning Progression
+    
+    section Canvas Fundamentals (15 minutes)
+        Basic Operations: Element reference
+                        : 2D context access
+                        : Coordinate system
+                        : Simple shape drawing
+        
+    section Drawing Techniques (20 minutes)
+        Graphics Primitives: Rectangles and circles
+                           : Colors and styles
+                           : Text rendering
+                           : Path operations
+        
+    section Image Handling (25 minutes)
+        Asset Management: Image object creation
+                        : Async loading patterns
+                        : Error handling
+                        : Performance optimization
+        
+    section Game Graphics (30 minutes)
+        Sprite Rendering: Positioning algorithms
+                        : Formation calculations
+                        : Scene composition
+                        : Frame rendering
+        
+    section Advanced Techniques (40 minutes)
+        Visual Effects: Transformations
+                      : Animations
+                      : Layering
+                      : State management
+        
+    section Performance (35 minutes)
+        Optimization: Efficient drawing
+                    : Memory management
+                    : Frame rate control
+                    : Asset caching
+        
+    section Professional Skills (1 week)
+        Production Graphics: WebGL integration
+                           : Canvas libraries
+                           : Game engines
+                           : Cross-platform considerations
+        
+    section Advanced Graphics (1 month)
+        Specialized Applications: Data visualization
+                                : Interactive art
+                                : Real-time effects
+                                : 3D graphics
 ```
 
-**या नेस्टेड लूपमध्ये काय होते:**
-- बाह्य लूप **डावीकडून उजवीकडे हलतो** आमच्या फॉर्मेशनमध्ये
-- अंतर्गत लूप **वरून खाली जातो**
+### 🛠️ तुमचा कॅनव्हास ग्राफिक्स टूलकिट सारांश
+
+या धड्याचा अभ्यास केल्यानंतर, आता तुमच्याकडे आहे:
+- **Canvas API प्रावीण्य**: 2D ग्राफिक्स प्रोग्रामिंगचे संपूर्ण ज्ञान
+- **समन्वय गणित**: अचूक पोझिशनिंग आणि लेआउट अल्गोरिदम
+- **असेट व्यवस्थापन**: व्यावसायिक इमेज लोडिंग आणि एरर हँडलिंग
+- **रेंडरिंग पाइपलाइन**: सीन कंपोझिशनसाठी संरचित दृष्टिकोन
+- **गेम ग्राफिक्स**: स्प्राइट पोझिशनिंग आणि गठन गणना
+- **असिंक्रोनस प्रोग्रामिंग**: गुळगुळीत कार्यक्षमतेसाठी आधुनिक JavaScript पॅटर्न्स
+- **व्हिज्युअल प्रोग्रामिंग**: गणितीय संकल्पना स्क्रीन ग्राफिक्समध्ये रूपांतरित करणे
+
+**वास्तविक-जगातील अनुप्रयोग**: तुमचे कॅनव्हास कौशल्य थेट लागू होते:
+- **डेटा व्हिज्युअलायझेशन**: चार्ट्स, ग्राफ्स आणि इंटरॅक्टिव्ह डॅशबोर्ड्स
+- **गेम डेव्हलपमेंट**: 2D गेम्स, सिम्युलेशन्स आणि इंटरॅक्टिव्ह अनुभव
+- **डिजिटल आर्ट**: क्रिएटिव्ह कोडिंग आणि जनरेटिव्ह आर्ट प्रोजेक्ट्स
+- **UI/UX डिझाइन**: कस्टम ग्राफिक्स आणि इंटरॅक्टिव्ह घटक
+- **शैक्षणिक सॉफ्टवेअर**: व्हिज्युअल लर्निंग टूल्स आणि सिम्युलेशन्स
+- **वेब अॅप्लिकेशन्स**: डायनॅमिक ग्राफिक्स आणि रिअल-टाइम व्हिज्युअलायझेशन्स
+
+**व्यावसायिक कौशल्ये मिळवली**: तुम्ही आता करू शकता:
+- **बनवा** बाह्य लायब्ररीशिवाय कस्टम ग्राफिक्स सोल्यूशन्स
+- **ऑप्टिमाइझ** गुळगुळीत वापरकर्ता अनुभवासाठी रेंडरिंग कार्यक्षमता
+- **डिबग** ब्राउझर डेव्हलपर टूल्स वापरून जटिल व्हिज्युअल समस्या
+- **डिझाइन** गणितीय तत्त्वे वापरून स्केलेबल ग्राफिक्स प्रणाली
+- **इंटिग्रेट** आधुनिक वेब अॅप्लिकेशन फ्रेमवर्कसह कॅनव्हास ग्राफिक्स
+
+**Canvas API पद्धती ज्यामध्ये तुम्ही प्रावीण्य मिळवले आहे**:
+- **एलिमेंट व्यवस्थापन**: getElementById, getContext
+- **ड्रॉइंग ऑपरेशन्स**: fillRect, drawImage, fillStyle
+- **असेट लोडिंग**: इमेज ऑब्जेक्ट्स, Promise पॅटर्न्स
+- **गणितीय पोझिशनिंग**: समन्वय गणना, गठन अल्गोरिदम
+
+**पुढील स्तर**: तुम्ही अॅनिमेशन, वापरकर्ता इंटरॅक्शन, कोलिजन डिटेक्शन जोडण्यासाठी तयार आहात किंवा 3D ग्राफिक्ससाठी WebGL एक्सप्लोर करा!
+
+🌟 **साध्य केलेले यश**: तुम्ही मूलभूत Canvas API तंत्रज्ञान वापरून संपूर्ण गेम रेंडरिंग प्रणाली तयार केली आहे!
+
+## असाइनमेंट
+
+[Canvas API सोबत खेळा](assignment.md)
 
 ---
 
diff --git a/translations/mr/6-space-game/3-moving-elements-around/README.md b/translations/mr/6-space-game/3-moving-elements-around/README.md
index b51f27bd67..901d02913e 100644
--- a/translations/mr/6-space-game/3-moving-elements-around/README.md
+++ b/translations/mr/6-space-game/3-moving-elements-around/README.md
@@ -1,44 +1,112 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "022bbb5c869091b98f19e408e0c51d5d",
-  "translation_date": "2025-10-22T16:28:50+00:00",
+  "original_hash": "8c55a2bd4bc0ebe4c88198fd563a9e09",
+  "translation_date": "2025-11-03T14:55:19+00:00",
   "source_file": "6-space-game/3-moving-elements-around/README.md",
   "language_code": "mr"
 }
 -->
 # स्पेस गेम तयार करा भाग 3: गती जोडणे
 
-तुमच्या आवडत्या गेम्सचा विचार करा – त्यांना आकर्षक बनवणारी गोष्ट फक्त सुंदर ग्राफिक्स नाही, तर सर्वकाही कसे हलते आणि तुमच्या कृतींना प्रतिसाद देते हे आहे. सध्या, तुमचा स्पेस गेम एका सुंदर चित्रासारखा आहे, पण आता आपण त्यात गती जोडणार आहोत ज्यामुळे तो जिवंत होईल.
-
-जेव्हा नासाच्या अभियंत्यांनी अपोलो मोहिमांसाठी मार्गदर्शन संगणक प्रोग्राम केला, तेव्हा त्यांना असाच आव्हानाचा सामना करावा लागला: पायलटच्या इनपुटला प्रतिसाद देताना अंतराळयान आपोआप कोर्स सुधारणा कसे राखेल? आज आपण शिकत असलेल्या तत्त्वे त्याच संकल्पनांना प्रतिध्वनी करतात – खेळाडू-नियंत्रित गती व्यवस्थापनासह स्वयंचलित प्रणालीचे वर्तन व्यवस्थापित करणे.
-
-या धड्यात, तुम्ही शिकाल की अंतराळयान स्क्रीनवर कसे सरकवायचे, खेळाडूच्या आदेशांना कसे प्रतिसाद द्यायचे आणि गुळगुळीत गती नमुने कसे तयार करायचे. आम्ही सर्वकाही व्यवस्थापित संकल्पनांमध्ये विभागून नैसर्गिकपणे एकमेकांवर आधारित बनवू.
+```mermaid
+journey
+    title Your Game Animation Journey
+    section Movement Basics
+      Understand motion principles: 3: Student
+      Learn coordinate updates: 4: Student
+      Implement basic movement: 4: Student
+    section Player Controls
+      Handle keyboard events: 4: Student
+      Prevent default behaviors: 5: Student
+      Create responsive controls: 5: Student
+    section Game Systems
+      Build game loop: 5: Student
+      Manage object lifecycle: 5: Student
+      Implement pub/sub pattern: 5: Student
+```
 
-शेवटी, खेळाडू त्यांचे हिरो जहाज स्क्रीनवर उडवतील आणि शत्रू जहाजे वर गस्त घालतील. त्याहून महत्त्वाचे म्हणजे, तुम्हाला गेम गती प्रणालींचे मुख्य तत्त्व समजेल.
+तुमच्या आवडत्या गेम्सबद्दल विचार करा – त्यांना आकर्षक बनवणारी गोष्ट फक्त सुंदर ग्राफिक्स नाही, तर ती गोष्ट कशी हलते आणि तुमच्या कृतींना कशी प्रतिसाद देते. सध्या, तुमचा स्पेस गेम एक सुंदर चित्रासारखा आहे, पण आता आपण त्यात गती जोडणार आहोत ज्यामुळे तो जिवंत वाटेल.
+
+जेव्हा NASA चे अभियंते अपोलो मिशनसाठी मार्गदर्शन संगणक प्रोग्राम करत होते, तेव्हा त्यांना असाच एक आव्हान होता: पायलटच्या इनपुटला प्रतिसाद देताना अंतराळयान आपोआप कोर्स सुधारणा कसे राखेल? आज आपण शिकणार असलेल्या तत्त्वे त्याच संकल्पनांना प्रतिध्वनी देतात – खेळाडू-नियंत्रित गती व्यवस्थापनासह स्वयंचलित प्रणालीचे वर्तन.
+
+या धड्यात, तुम्ही अंतराळयान स्क्रीनवर कसे सरकवायचे, खेळाडूच्या आदेशांना कसे प्रतिसाद द्यायचे आणि गतीचे गुळगुळीत नमुने कसे तयार करायचे हे शिकाल. आम्ही सर्वकाही व्यवस्थापित संकल्पनांमध्ये विभागून नैसर्गिकरित्या एकमेकांवर आधारित शिकवू.
+
+शेवटी, खेळाडू त्यांचे हिरो जहाज स्क्रीनवर उडवतील आणि शत्रू जहाजे वर गस्त घालतील. त्याहून महत्त्वाचे म्हणजे, तुम्हाला गेम गती प्रणालींना चालवणारी मुख्य तत्त्वे समजतील.
+
+```mermaid
+mindmap
+  root((Game Animation))
+    Movement Types
+      Player Controlled
+      Automatic Motion
+      Physics Based
+      Scripted Paths
+    Event Handling
+      Keyboard Input
+      Mouse Events
+      Touch Controls
+      Default Prevention
+    Game Loop
+      Update Logic
+      Render Frame
+      Clear Canvas
+      Frame Rate Control
+    Object Management
+      Position Updates
+      Collision Detection
+      Lifecycle Management
+      State Tracking
+    Communication
+      Pub/Sub Pattern
+      Event Emitters
+      Message Passing
+      Loose Coupling
+```
 
-## पूर्व-व्याख्यान प्रश्नमंजुषा
+## प्री-लेक्चर क्विझ
 
-[पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/33)
+[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/33)
 
 ## गेम गती समजून घेणे
 
-गेम्स जिवंत वाटतात जेव्हा गोष्टी हलायला लागतात, आणि मूलत: दोन प्रकारे हे घडते:
+गेम्स खऱ्या अर्थाने जिवंत वाटतात जेव्हा गोष्टी हलायला लागतात, आणि मूलतः दोन प्रकारे हे घडते:
 
-- **खेळाडू-नियंत्रित गती**: जेव्हा तुम्ही एखाद्या कीवर क्लिक करता किंवा माऊस क्लिक करता, तेव्हा काहीतरी हलते. हे तुमचं आणि तुमच्या गेमच्या जगाचं थेट कनेक्शन आहे.
+- **खेळाडू-नियंत्रित गती**: जेव्हा तुम्ही एखादी की दाबता किंवा माउस क्लिक करता, तेव्हा काहीतरी हलते. हा तुमच्या आणि गेमच्या जगामधील थेट संबंध आहे.
 - **स्वयंचलित गती**: जेव्हा गेम स्वतःच गोष्टी हलवण्याचा निर्णय घेतो – जसे की शत्रू जहाजे स्क्रीनवर गस्त घालतात, तुम्ही काहीही करत नसल्यास.
 
-संगणक स्क्रीनवर वस्तू हलवणे अपेक्षेपेक्षा सोपे आहे. गणित वर्गातील x आणि y समन्वय लक्षात आहे का? आपण याच गोष्टींवर काम करत आहोत. जेव्हा गॅलिलिओने 1610 मध्ये ज्युपिटरच्या चंद्रांचा मागोवा घेतला, तेव्हा तो मूलत: तेच करत होता – गती नमुने समजून घेण्यासाठी वेळोवेळी स्थानांचे प्लॉटिंग.
+संगणक स्क्रीनवर वस्तू हलवणे अपेक्षेपेक्षा सोपे आहे. गणित वर्गातील x आणि y निर्देशांक लक्षात आहेत का? आपण याच गोष्टींवर काम करत आहोत. जेव्हा गॅलिलिओने 1610 मध्ये ज्युपिटरच्या चंद्रांचा मागोवा घेतला, तेव्हा तो मूलतः तेच करत होता – गती नमुने समजण्यासाठी वेळोवेळी स्थानांचे प्लॉटिंग.
+
+स्क्रीनवर गोष्टी हलवणे म्हणजे फ्लिपबुक अॅनिमेशन तयार करण्यासारखे आहे – तुम्हाला हे तीन सोप्या पायऱ्या फॉलो कराव्या लागतील:
 
-स्क्रीनवर गोष्टी हलवणे म्हणजे फ्लिपबुक अॅनिमेशन तयार करण्यासारखे आहे – तुम्हाला या तीन सोप्या चरणांचे अनुसरण करणे आवश्यक आहे:
+```mermaid
+flowchart LR
+    A["Frame N"] --> B["Update Positions"]
+    B --> C["Clear Canvas"]
+    C --> D["Draw Objects"]
+    D --> E["Frame N+1"]
+    E --> F{Continue?}
+    F -->|Yes| B
+    F -->|No| G["Game Over"]
+    
+    subgraph "Animation Cycle"
+        H["1. Calculate new positions"]
+        I["2. Erase previous frame"]
+        J["3. Render new frame"]
+    end
+    
+    style B fill:#e1f5fe
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+```
 
 1. **स्थान अपडेट करा** – तुमची वस्तू कुठे असावी ते बदला (कदाचित ती उजवीकडे 5 पिक्सल हलवा)
-2. **जुना फ्रेम मिटवा** – स्क्रीन साफ करा जेणेकरून तुम्हाला सर्वत्र भूतासारखे ट्रेल्स दिसणार नाहीत
+2. **जुना फ्रेम मिटवा** – स्क्रीन साफ करा जेणेकरून तुम्हाला भूतासारखे मागचे चिन्ह दिसणार नाही
 3. **नवीन फ्रेम काढा** – तुमची वस्तू तिच्या नवीन ठिकाणी ठेवा
 
-हे पुरेसे वेगाने करा, आणि बूम! तुम्हाला गुळगुळीत गती मिळाली आहे जी खेळाडूंना नैसर्गिक वाटते.
+हे पुरेसे वेगाने करा, आणि बघा! तुम्हाला गुळगुळीत गती मिळेल जी खेळाडूंना नैसर्गिक वाटेल.
 
-कोडमध्ये हे असे दिसू शकते:
+कोडमध्ये हे कसे दिसते ते येथे आहे:
 
 ```javascript
 // Set the hero's location
@@ -52,24 +120,24 @@ ctx.drawImage(heroImg, hero.x, hero.y);
 ```
 
 **या कोडचे कार्य:**
-- **अपडेट करते** हिरोचा x-कोऑर्डिनेट 5 पिक्सलने, त्याला आडव्या दिशेने हलवण्यासाठी
-- **क्लिअर करते** संपूर्ण कॅनव्हास क्षेत्र, मागील फ्रेम काढून टाकण्यासाठी
-- **भरते** कॅनव्हास काळ्या पार्श्वभूमी रंगाने
-- **पुन्हा काढते** हिरो प्रतिमा त्याच्या नवीन स्थानावर
+- **अपडेट करते** हिरोचा x-निर्देशांक 5 पिक्सलने, त्याला आडव्या दिशेने हलवण्यासाठी
+- **संपूर्ण कॅनव्हास क्षेत्र साफ करते** मागील फ्रेम काढून टाकण्यासाठी
+- **कॅनव्हासला काळ्या पार्श्वभूमीच्या रंगाने भरते**
+- **हिरोची प्रतिमा त्याच्या नवीन स्थानावर पुन्हा काढते**
 
-✅ तुम्ही विचार करू शकता का की तुमचा हिरो अनेक फ्रेम्स प्रति सेकंद पुन्हा काढल्याने कार्यक्षमतेवर परिणाम का होऊ शकतो? [या पॅटर्नच्या पर्यायांबद्दल वाचा](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
+✅ तुम्हाला असे का वाटते की तुमच्या हिरोला अनेक फ्रेम्स प्रति सेकंद पुन्हा काढल्याने कार्यक्षमतेवर परिणाम होऊ शकतो? [या पॅटर्नच्या पर्यायांबद्दल वाचा](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
 
 ## कीबोर्ड इव्हेंट्स हाताळा
 
-हे खेळाडू इनपुटला गेम अॅक्शनशी जोडण्याचे ठिकाण आहे. जेव्हा कोणी लेसर फायर करण्यासाठी स्पेसबार दाबतो किंवा अॅस्टेरॉइड टाळण्यासाठी अॅरो की दाबतो, तेव्हा तुमच्या गेमला ते इनपुट शोधणे आणि त्याला प्रतिसाद देणे आवश्यक आहे.
+हेथे आपण खेळाडूच्या इनपुटला गेमच्या कृतीशी जोडतो. जेव्हा कोणी लेझर फायर करण्यासाठी स्पेसबार दाबतो किंवा अॅस्टरॉइड टाळण्यासाठी अॅरो की दाबतो, तेव्हा तुमच्या गेमला तो इनपुट शोधून त्याला प्रतिसाद द्यावा लागतो.
 
-कीबोर्ड इव्हेंट्स विंडो स्तरावर घडतात, म्हणजे तुमचे संपूर्ण ब्राउझर विंडो त्या कीप्रेससाठी ऐकत असते. माऊस क्लिक, दुसऱ्या बाजूला, विशिष्ट घटकांशी जोडले जाऊ शकते (जसे की बटण क्लिक करणे). आमच्या स्पेस गेमसाठी, आम्ही कीबोर्ड कंट्रोल्सवर लक्ष केंद्रित करू कारण ते खेळाडूंना क्लासिक आर्केड अनुभव देते.
+कीबोर्ड इव्हेंट्स विंडो स्तरावर घडतात, म्हणजे तुमचे संपूर्ण ब्राउझर विंडो त्या कीप्रेससाठी ऐकत असते. माउस क्लिक, दुसऱ्या बाजूला, विशिष्ट घटकांशी जोडले जाऊ शकते (जसे की बटण क्लिक करणे). आपल्या स्पेस गेमसाठी, आपण कीबोर्ड कंट्रोल्सवर लक्ष केंद्रित करू कारण ते खेळाडूंना क्लासिक आर्केड अनुभव देते.
 
-हे मला आठवण करून देते की 1800 च्या दशकातील टेलिग्राफ ऑपरेटरना मोर्स कोड इनपुटला अर्थपूर्ण संदेशांमध्ये अनुवाद करावा लागला – आम्ही काहीसे समान करत आहोत, कीप्रेसला गेम कमांडमध्ये अनुवादित करत आहोत.
+हे मला आठवते की 1800 च्या दशकातील टेलिग्राफ ऑपरेटरला मोर्स कोड इनपुटला अर्थपूर्ण संदेशांमध्ये अनुवाद करावा लागायचा – आपण काहीसे तसेच करत आहोत, कीप्रेसला गेम कमांडमध्ये अनुवादित करत आहोत.
 
-इव्हेंट हाताळण्यासाठी तुम्हाला विंडोच्या `addEventListener()` पद्धतीचा वापर करावा लागतो आणि त्याला दोन इनपुट पॅरामीटर्स प्रदान करावे लागतात. पहिला पॅरामीटर इव्हेंटचे नाव आहे, उदाहरणार्थ `keyup`. दुसरा पॅरामीटर इव्हेंट घडल्यामुळे कॉल केला जाणारा फंक्शन आहे.
+इव्हेंट हाताळण्यासाठी तुम्हाला विंडोच्या `addEventListener()` पद्धतीचा वापर करावा लागतो आणि त्याला दोन इनपुट पॅरामीटर्स द्यावे लागतात. पहिला पॅरामीटर इव्हेंटचे नाव आहे, उदाहरणार्थ `keyup`. दुसरा पॅरामीटर इव्हेंट घडल्यामुळे कॉल केला जाणारा फंक्शन आहे.
 
-उदाहरण येथे आहे:
+येथे एक उदाहरण आहे:
 
 ```javascript
 window.addEventListener('keyup', (evt) => {
@@ -80,24 +148,43 @@ window.addEventListener('keyup', (evt) => {
 });
 ```
 
-**येथे काय घडते ते समजून घेणे:**
-- **ऐकते** संपूर्ण विंडोवर कीबोर्ड इव्हेंट्ससाठी
-- **कॅप्चर करते** इव्हेंट ऑब्जेक्ट ज्यामध्ये कोणती की दाबली गेली याची माहिती असते
-- **तपासते** की दाबलेली की विशिष्ट कीशी जुळते का (या प्रकरणात, वरचा अॅरो)
-- **अंमलात आणते** कोड जेव्हा अटी पूर्ण होतात
+**येथे काय घडते ते समजून घ्या:**
+- **कीबोर्ड इव्हेंट्ससाठी ऐकते** संपूर्ण विंडोवर
+- **इव्हेंट ऑब्जेक्ट कॅप्चर करते** ज्यामध्ये कोणती की दाबली गेली याची माहिती असते
+- **तपासते** की दाबलेली की विशिष्ट कीशी जुळते का (या प्रकरणात, वरची अॅरो की)
+- **कोड अंमलात आणते** जेव्हा अटी पूर्ण होतात
+
+की इव्हेंट्ससाठी इव्हेंटवर दोन प्रॉपर्टीज असतात ज्याचा वापर तुम्ही कोणती की दाबली गेली हे पाहण्यासाठी करू शकता:
 
-की इव्हेंट्ससाठी इव्हेंटवर दोन प्रॉपर्टीज आहेत ज्याचा वापर तुम्ही कोणती की दाबली गेली हे पाहण्यासाठी करू शकता:
+- `key` - दाबलेल्या कीचे स्ट्रिंग प्रतिनिधित्व, उदाहरणार्थ `'ArrowUp'`
+- `keyCode` - याचा संख्यात्मक प्रतिनिधित्व, उदाहरणार्थ `37`, जो `ArrowLeft` शी संबंधित आहे
 
-- `key` - ही दाबलेल्या कीची स्ट्रिंग प्रतिनिधित्व आहे, उदाहरणार्थ `'ArrowUp'`
-- `keyCode` - ही एक संख्या प्रतिनिधित्व आहे, उदाहरणार्थ `37`, ज्याचा संबंध `ArrowLeft` शी आहे
+✅ गेम डेव्हलपमेंटच्या बाहेर की इव्हेंट मॅनिप्युलेशन उपयुक्त आहे. या तंत्राचा आणखी कोणत्या उपयोगासाठी विचार करू शकता?
 
-✅ गेम डेव्हलपमेंटच्या बाहेर की इव्हेंट मॅनिप्युलेशन उपयुक्त आहे. या तंत्रासाठी तुम्ही आणखी कोणते उपयोग विचार करू शकता?
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant EventSystem
+    participant GameLogic
+    participant Hero
+    
+    User->>Browser: Presses ArrowUp key
+    Browser->>EventSystem: keydown event
+    EventSystem->>EventSystem: preventDefault()
+    EventSystem->>GameLogic: emit('KEY_EVENT_UP')
+    GameLogic->>Hero: hero.y -= 5
+    Hero->>Hero: Update position
+    
+    Note over Browser,GameLogic: Event flow prevents browser defaults
+    Note over GameLogic,Hero: Pub/sub pattern enables clean communication
+```
 
 ### विशेष की: एक सूचना!
 
 काही कींमध्ये अंगभूत ब्राउझर वर्तन असते जे तुमच्या गेममध्ये अडथळा आणू शकते. अॅरो की पृष्ठ स्क्रोल करतात आणि स्पेसबार खाली उडी मारतो – जेव्हा कोणी त्यांचे अंतराळयान चालवण्याचा प्रयत्न करत असतो तेव्हा तुम्हाला हे वर्तन नको असते.
 
-आम्ही ही डीफॉल्ट वर्तन रोखू शकतो आणि त्याऐवजी आमचा गेम इनपुट हाताळू शकतो. हे अगदी सुरुवातीच्या संगणक प्रोग्रामरप्रमाणे आहे ज्यांना कस्टम वर्तन तयार करण्यासाठी सिस्टम इंटरप्ट्स ओव्हरराइड करावे लागले – आम्ही फक्त ब्राउझर स्तरावर ते करत आहोत. हे कसे करायचे:
+आपण ही डीफॉल्ट वर्तन रोखू शकतो आणि त्याऐवजी आपला गेम इनपुट हाताळू शकतो. हे अगदी तसेच आहे जसे की सुरुवातीच्या संगणक प्रोग्रामरला सिस्टिम इंटरप्ट्स ओव्हरराइड करावे लागले जेणेकरून सानुकूल वर्तन तयार करता येईल – आपण फक्त ब्राउझर स्तरावर ते करत आहोत. हे कसे करायचे:
 
 ```javascript
 const onKeyDown = function (e) {
@@ -118,17 +205,33 @@ const onKeyDown = function (e) {
 window.addEventListener('keydown', onKeyDown);
 ```
 
-**या प्रतिबंध कोडचे समजून घेणे:**
-- **तपासते** विशिष्ट की कोड्ससाठी जे अवांछित ब्राउझर वर्तन कारणीभूत ठरू शकतात
-- **प्रतिबंधित करते** अॅरो की आणि स्पेसबारसाठी डीफॉल्ट ब्राउझर क्रिया
-- **अनुमती देते** इतर कींना सामान्यपणे कार्य करण्यासाठी
-- **वापरते** `e.preventDefault()` ब्राउझरचे अंगभूत वर्तन थांबवण्यासाठी
+**या प्रतिबंध कोडचे समजून घ्या:**
+- **तपासते** विशिष्ट की कोड्ससाठी जे अवांछित ब्राउझर वर्तन निर्माण करू शकतात
+- **डीफॉल्ट ब्राउझर क्रिया रोखते** अॅरो की आणि स्पेसबारसाठी
+- **इतर कींना सामान्यपणे कार्य करण्यास परवानगी देते**
+- **`e.preventDefault()` वापरते** ब्राउझरचे अंगभूत वर्तन थांबवण्यासाठी
+
+### 🔄 **शैक्षणिक तपासणी**
+**इव्हेंट हाताळणी समजून घेणे**: स्वयंचलित गतीकडे जाण्यापूर्वी, तुम्ही हे करू शकता:
+- ✅ `keydown` आणि `keyup` इव्हेंट्समधील फरक स्पष्ट करा
+- ✅ डीफॉल्ट ब्राउझर वर्तन का रोखतो हे समजून घ्या
+- ✅ इव्हेंट लिसनर्स कसे वापरकर्त्याच्या इनपुटला गेम लॉजिकशी जोडतात हे वर्णन करा
+- ✅ कोणत्या की गेम कंट्रोल्समध्ये अडथळा आणू शकतात हे ओळखा
+
+**जलद स्व-परीक्षण**: जर तुम्ही अॅरो कीसाठी डीफॉल्ट वर्तन रोखले नाही तर काय होईल?
+*उत्तर: ब्राउझर पृष्ठ स्क्रोल करेल, गेम गतीमध्ये अडथळा आणेल*
+
+**इव्हेंट सिस्टीम आर्किटेक्चर**: तुम्हाला आता समजले आहे:
+- **विंडो-स्तरीय ऐकणे**: ब्राउझर स्तरावर इव्हेंट्स कॅप्चर करणे
+- **इव्हेंट ऑब्जेक्ट प्रॉपर्टीज**: `key` स्ट्रिंग्स विरुद्ध `keyCode` नंबर
+- **डीफॉल्ट प्रतिबंध**: अवांछित ब्राउझर वर्तन थांबवणे
+- **शर्ती लॉजिक**: विशिष्ट की संयोजनांना प्रतिसाद देणे
 
 ## गेम प्रेरित गती
 
-आता खेळाडूच्या इनपुटशिवाय वस्तू हलवण्याबद्दल बोलूया. स्क्रीनवर फिरणाऱ्या शत्रू जहाजांचा विचार करा, सरळ रेषेत उडणाऱ्या गोळ्या किंवा पार्श्वभूमीतील ढग. ही स्वायत्त गती तुमच्या गेमच्या जगाला जिवंत वाटते जरी कोणीही नियंत्रणाला स्पर्श करत नसेल.
+आता आपण खेळाडूच्या इनपुटशिवाय वस्तू हलवण्याबद्दल बोलूया. स्क्रीनवर फिरणाऱ्या शत्रू जहाजांचा विचार करा, सरळ रेषेत उडणाऱ्या गोळ्यांचा किंवा पार्श्वभूमीतील ढगांचा. ही स्वायंचलित गती तुमच्या गेमच्या जगाला जिवंत वाटते जरी कोणीही नियंत्रणाला स्पर्श करत नसेल.
 
-जावास्क्रिप्टच्या अंगभूत टाइमर्सचा वापर करून नियमित अंतराने स्थान अपडेट केले जाते. ही संकल्पना पेंडुलम घड्याळे कशी कार्य करतात यासारखी आहे – एक नियमित यंत्रणा जी सुसंगत, वेळेवर क्रिया ट्रिगर करते. हे किती सोपे असू शकते:
+आपण JavaScript च्या अंगभूत टाइमर्सचा वापर करून नियमित अंतराने स्थान अपडेट करतो. ही संकल्पना पेंडुलम घड्याळ कसे कार्य करते यासारखी आहे – एक नियमित यंत्रणा जी सुसंगत, वेळेवर क्रिया ट्रिगर करते. हे किती सोपे असू शकते ते येथे आहे:
 
 ```javascript
 const id = setInterval(() => {
@@ -138,20 +241,45 @@ const id = setInterval(() => {
 ```
 
 **या गती कोडचे कार्य:**
-- **तयार करते** एक टाइमर जो प्रत्येक 100 मिलिसेकंदांमध्ये चालतो
-- **अपडेट करते** शत्रूचा y-कोऑर्डिनेट प्रत्येक वेळी 10 पिक्सलने
-- **साठवते** इंटरव्हल आयडी जेणेकरून नंतर ते थांबवता येईल
-- **हलवते** शत्रूला स्क्रीनवर खाली स्वयंचलितपणे
+- **टायमर तयार करते** जो प्रत्येक 100 मिलिसेकंदांनी चालतो
+- **शत्रूचा y-निर्देशांक 10 पिक्सलने अपडेट करते** प्रत्येक वेळी
+- **इंटरवल आयडी साठवते** जेणेकरून नंतर ते थांबवता येईल
+- **शत्रूला स्क्रीनवर खाली हलवते** स्वयंचलितपणे
 
 ## गेम लूप
 
-येथे संकल्पना आहे जी सर्वकाही एकत्र बांधते – गेम लूप. तुमचा गेम जर एक चित्रपट असेल, तर गेम लूप हा फिल्म प्रोजेक्टर असेल, फ्रेम नंतर फ्रेम इतक्या वेगाने दाखवत की सर्वकाही गुळगुळीतपणे हलत असल्याचे दिसते.
+येथे एक संकल्पना आहे जी सर्वकाही एकत्र बांधते – गेम लूप. जर तुमचा गेम एक चित्रपट असेल, तर गेम लूप हा फिल्म प्रोजेक्टर असेल, जो फ्रेम नंतर फ्रेम इतक्या वेगाने दाखवतो की सर्वकाही गुळगुळीतपणे हलत असल्याचे दिसते.
 
-प्रत्येक गेमच्या मागे एक लूप चालू असतो. ही एक फंक्शन आहे जी सर्व गेम ऑब्जेक्ट्स अपडेट करते, स्क्रीन पुन्हा काढते आणि सतत हा प्रक्रिया पुन्हा करते. हे तुमच्या हिरो, सर्व शत्रू, उडणाऱ्या लेसर – संपूर्ण गेम स्टेटचा मागोवा ठेवते.
+प्रत्येक गेमच्या मागे एक लूप चालू असतो. ही एक फंक्शन आहे जी सर्व गेम ऑब्जेक्ट्स अपडेट करते, स्क्रीन पुन्हा काढते आणि सतत हा प्रक्रिया पुन्हा करते. हे तुमच्या हिरो, सर्व शत्रू, उडणाऱ्या लेझर्स – संपूर्ण गेम स्टेटचा मागोवा ठेवते.
 
-ही संकल्पना मला आठवण करून देते की सुरुवातीच्या फिल्म अॅनिमेटर्स जसे की वॉल्ट डिस्ने यांना गतीचा भ्रम निर्माण करण्यासाठी फ्रेम बाय फ्रेम पात्रे पुन्हा काढावी लागली. आम्ही तेच करत आहोत, फक्त पेन्सिल्सऐवजी कोडसह.
+ही संकल्पना मला आठवते की सुरुवातीच्या फिल्म अॅनिमेटर्स जसे की वॉल्ट डिस्नेने पात्रांना फ्रेम बाय फ्रेम पुन्हा काढले होते जेणेकरून गतीचा भ्रम निर्माण होईल. आपण तेच करत आहोत, फक्त पेन्सिल्सऐवजी कोडसह.
 
-गेम लूप कोडमध्ये सामान्यतः कसे दिसते:
+गेम लूप कोडमध्ये कसे दिसते ते येथे आहे:
+
+```mermaid
+flowchart TD
+    A["Start Game Loop"] --> B["Clear Canvas"]
+    B --> C["Fill Background"]
+    C --> D["Update Game Objects"]
+    D --> E["Draw Hero"]
+    E --> F["Draw Enemies"]
+    F --> G["Draw UI Elements"]
+    G --> H["Wait for Next Frame"]
+    H --> I{Game Running?}
+    I -->|Yes| B
+    I -->|No| J["End Game"]
+    
+    subgraph "Frame Rate Control"
+        K["60 FPS = 16.67ms"]
+        L["30 FPS = 33.33ms"]
+        M["10 FPS = 100ms"]
+    end
+    
+    style B fill:#ffebee
+    style D fill:#e1f5fe
+    style E fill:#e8f5e8
+    style F fill:#e8f5e8
+```
 
 ```javascript
 const gameLoopId = setInterval(() => {
@@ -167,28 +295,28 @@ const gameLoopId = setInterval(() => {
 }, 200);
 ```
 
-**गेम लूप संरचनेचे समजून घेणे:**
-- **क्लिअर करते** संपूर्ण कॅनव्हास मागील फ्रेम काढून टाकण्यासाठी
-- **भरते** पार्श्वभूमी एका ठोस रंगाने
-- **काढते** सर्व गेम ऑब्जेक्ट्स त्यांच्या वर्तमान स्थानांवर
-- **पुन्हा करते** ही प्रक्रिया प्रत्येक 200 मिलिसेकंदांमध्ये गुळगुळीत अॅनिमेशन तयार करण्यासाठी
-- **व्यवस्थापित करते** फ्रेम रेट इंटरव्हल टाइमिंग नियंत्रित करून
+**गेम लूप संरचना समजून घ्या:**
+- **संपूर्ण कॅनव्हास साफ करते** मागील फ्रेम काढण्यासाठी
+- **पार्श्वभूमीला एकसंध रंगाने भरते**
+- **सर्व गेम ऑब्जेक्ट्स त्यांच्या वर्तमान स्थानांवर काढते**
+- **200 मिलिसेकंदांच्या अंतराने ही प्रक्रिया पुन्हा करते** गुळगुळीत अॅनिमेशन तयार करण्यासाठी
+- **फ्रेम रेट व्यवस्थापित करते** इंटरवल टाइमिंग नियंत्रित करून
 
 ## स्पेस गेम सुरू ठेवणे
 
-आता आपण यापूर्वी तयार केलेल्या स्थिर दृश्यात गती जोडणार आहोत. आपण त्याला स्क्रीनशॉटमधून परस्पर अनुभवामध्ये रूपांतरित करणार आहोत. आम्ही प्रत्येक तुकडा शेवटच्या तुकड्यावर आधारित असेल याची खात्री करण्यासाठी चरण-दर-चरण काम करू.
+आता आपण स्थिर दृश्याला गती देणार आहोत जे तुम्ही यापूर्वी तयार केले होते. आपण ते स्क्रीनशॉटमधून एक परस्पर अनुभवामध्ये रूपांतरित करणार आहोत. प्रत्येक भाग मागील भागावर आधारित असेल याची खात्री करून आपण हे पायऱ्यांमध्ये काम करू.
 
-मागील धड्यातून कोड घ्या (किंवा तुम्हाला नवीन सुरुवात करायची असल्यास [भाग II- स्टार्टर](../../../../6-space-game/3-moving-elements-around/your-work) फोल्डरमधील कोडने सुरुवात करा).
+मागील धड्यातून कोड घ्या (किंवा तुम्हाला नवीन सुरुवात करायची असल्यास [भाग II- स्टार्टर](../../../../6-space-game/3-moving-elements-around/your-work) फोल्डरमधील कोड वापरा).
 
-**आज आपण काय तयार करत आहोत:**
-- **हिरो नियंत्रण**: अॅरो की तुमचे अंतराळयान स्क्रीनवर चालवतील
-- **शत्रू गती**: ती परग्रह जहाजे त्यांचा हल्ला सुरू करतील
+**आज आपण काय तयार करणार आहोत:**
+- **हिरो कंट्रोल्स**: अॅरो की तुमचे अंतराळयान स्क्रीनवर चालवतील
+- **शत्रू गती**: ती एलियन जहाजे त्यांचा हल्ला सुरू करतील
 
 चला या वैशिष्ट्यांची अंमलबजावणी सुरू करूया.
 
-## शिफारस केलेले चरण
+## शिफारस केलेल्या पायऱ्या
 
-`your-work` उप फोल्डरमध्ये तयार केलेल्या फाइल्स शोधा. त्यात खालील गोष्टी असाव्यात:
+`your-work` सब फोल्डरमध्ये तयार केलेल्या फाइल्स शोधा. त्यात खालील गोष्टी असाव्यात:
 
 ```bash
 -| assets
@@ -207,15 +335,15 @@ npm start
 ```
 
 **या कमांडचे कार्य:**
-- **नेव्हिगेट करते** तुमच्या प्रोजेक्ट डिरेक्टरीकडे
-- **सुरू करते** HTTP सर्व्हर पत्त्यावर `http://localhost:5000`
-- **सर्व्ह करते** तुमच्या गेम फाइल्स जेणेकरून तुम्ही त्यांना ब्राउझरमध्ये चाचणी करू शकता
+- **तुमच्या प्रोजेक्ट डायरेक्टरीमध्ये नेते**
+- **HTTP सर्व्हर सुरू करते** पत्त्यावर `http://localhost:5000`
+- **तुमच्या गेम फाइल्स सर्व्ह करते** जेणेकरून तुम्ही ब्राउझरमध्ये त्यांची चाचणी करू शकता
 
-वरील HTTP सर्व्हर पत्त्यावर `http://localhost:5000` सुरू करेल. ब्राउझर उघडा आणि तो पत्ता इनपुट करा, सध्या तो हिरो आणि सर्व शत्रूंना रेंडर करेल; काहीही हलत नाही - अजून!
+वरील HTTP सर्व्हर पत्त्यावर `http://localhost:5000` सुरू होईल. ब्राउझर उघडा आणि तो पत्ता टाइप करा, सध्या ते हिरो आणि सर्व शत्रूंना रेंडर करेल; काहीही हलत नाही - अजून!
 
 ### कोड जोडा
 
-1. **समर्पित ऑब्जेक्ट्स जोडा** `hero`, `enemy` आणि `game object` साठी, त्यांच्याकडे `x` आणि `y` गुणधर्म असावेत. (याबद्दल [Inheritance किंवा composition](../README.md) भाग लक्षात ठेवा).
+1. **`hero`, `enemy` आणि `game object` साठी समर्पित ऑब्जेक्ट्स जोडा**, त्यांच्याकडे `x` आणि `y` प्रॉपर्टीज असाव्यात. (याबद्दल [Inheritance किंवा composition](../README.md) भाग लक्षात ठेवा).
 
    *सूचना* `game object` हा तोच असावा ज्यामध्ये `x` आणि `y` असतील आणि स्वतःला कॅनव्हासवर काढण्याची क्षमता असेल.
 
@@ -239,115 +367,88 @@ npm start
     }
     ```
 
-    **या बेस क्लासचे समजून घेणे:**
-    - **सामान्य गुणधर्म परिभाषित करते** जे सर्व गेम ऑब्जेक्ट्स सामायिक करतात (स्थान, आकार, प्रतिमा)
-    - **समाविष्ट करते** एक `dead` फ्लॅग जो ऑब्जेक्ट काढून टाकला पाहिजे का ते ट्रॅक करतो
-    - **प्रदान करते** एक `draw()` पद्धत जी कॅनव्हासवर ऑब्जेक्ट रेंडर करते
-    - **सेट करते** सर्व गुणधर्मांसाठी डीफॉल्ट मूल्ये जी चाइल्ड क्लासेस ओव्हरराइड करू शकतात
+    **या बेस क्लासचे समजून घ्या:**
+    - **सामान्य प्रॉपर्टीज परिभाषित करते** जे सर्व गेम ऑब्जेक्ट्स सामाय
+   - **सुरुवात करते** सर्व गेम ऑब्जेक्ट्स ठेवण्यासाठी एक array तयार करते
+
+   4. **गेम सुरू करा**
+
+       ```javascript
+       function initGame() {
+         gameObjects = [];
+         createEnemies();
+         createHero();
+       
+         eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+           hero.y -= 5;
+         });
+       
+         eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+           hero.y += 5;
+         });
+       
+         eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+           hero.x -= 5;
+         });
+       
+4. **गेम लूप सेटअप करा**
+
+   `window.onload` फंक्शनला पुनर्रचना करा जेणेकरून गेम सुरू होईल आणि योग्य अंतराने गेम लूप सेटअप होईल. तुम्ही लेझर बीम देखील जोडाल:
 
-    आता, `GameObject` विस्तृत करा आणि `Hero` आणि `Enemy` तयार करा:
-    
     ```javascript
-    class Hero extends GameObject {
-      constructor(x, y) {
-        super(x, y);
-        this.width = 98;
-        this.height = 75;
-        this.type = "Hero";
-        this.speed = 5;
-      }
-    }
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      const gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100);
+    };
     ```
 
+   **गेम सेटअप समजून घेणे:**
+   - **प्रतीक्षा करते** पृष्ठ पूर्णपणे लोड होईपर्यंत
+   - **कॅनव्हास एलिमेंट आणि त्याचा 2D रेंडरिंग संदर्भ मिळवते**
+   - **सर्व इमेज अॅसेट्स असिंक्रोनसली लोड करते** `await` वापरून
+   - **गेम लूप सुरू करते** 100ms अंतराने चालणारे (10 FPS)
+   - **स्क्रीन साफ करते आणि प्रत्येक फ्रेममध्ये पुन्हा रेखाटते**
+
+5. **कोड जोडा** जेणेकरून ठराविक अंतराने शत्रू हलतील
+
+    `createEnemies()` फंक्शनला पुनर्रचना करा जेणेकरून शत्रू तयार होतील आणि त्यांना नवीन gameObjects वर्गात ढकलले जाईल:
+
     ```javascript
-    class Enemy extends GameObject {
-      constructor(x, y) {
-        super(x, y);
-        this.width = 98;
-        this.height = 50;
-        this.type = "Enemy";
-        const id = setInterval(() => {
-          if (this.y < canvas.height - this.height) {
-            this.y += 5;
-          } else {
-            console.log('Stopped at', this.y);
-            clearInterval(id);
-          }
-        }, 300);
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
       }
     }
     ```
 
-    **या क्लासेसमधील मुख्य संकल्पना:**
-    - **विस्तारित करते** `GameObject` चा `extends` कीवर्ड वापरून
-    - **कॉल करते** पॅरेंट कन्स्ट्रक्टर `super(x, y)` सह
-    - **सेट करते** प्रत्येक ऑब्जेक्ट प्रकारासाठी विशिष्ट परिमाणे आणि गुणधर्म
-    - **अंमलात आणते** शत्रूंसाठी स्वयंचलित गती `setInterval()` वापरून
-
-2. **की-इव्हेंट हँडलर्स जोडा** की नेव्हिगेशन हाताळण्यासाठी (हिरोला वर/खाली डाव्या/उजव्या बाजूला हलवा)
-
-   *लक्षात ठेवा* हे एक कार्टेशियन सिस्टम आहे, वरचा डाव्या कोपरा `0,0` आहे. तसेच डीफॉल्ट वर्तन थांबवण्यासाठी कोड जोडणे लक्षात ठेवा.
-
-   > **टीप**: तुमचे `onKeyDown` फंक्शन तयार करा आणि ते विंडोला जोडून द्या:
-
-   ```javascript
-   const onKeyDown = function (e) {
-     console.log(e.keyCode);
-     // Add the code from the lesson above to stop default behavior
-     switch (e.keyCode) {
-       case 37:
-       case 39:
-       case 38:
-       case 40: // Arrow keys
-       case 32:
-         e.preventDefault();
-         break; // Space
-       default:
-         break; // do not block other keys
-     }
-   };
-
-   window.addEventListener("keydown", onKeyDown);
-   ```
+    **शत्रू तयार करण्याचे कार्य:**
+    - **पोजिशन्सची गणना करते** जेणेकरून शत्रू स्क्रीनच्या मध्यभागी असतील
+    - **शत्रूंचा ग्रिड तयार करते** नेस्टेड लूप्स वापरून
+    - **प्रत्येक शत्रू ऑब्जेक्टला शत्रू इमेज असाइन करते**
+    - **प्रत्येक शत्रूला ग्लोबल गेम ऑब्जेक्ट्स array मध्ये जोडते**
+    
+    आणि `createHero()` फंक्शन जोडा जे नायकासाठी समान प्रक्रिया करेल.
     
-   **या इव्हेंट हँडलरचे कार्य:**
-   - **ऐकते** संपूर्ण विंडोवर कीडाउन इव्हेंट्ससाठी
-   - **लॉग करते** की कोड जेणेकरून तुम्ही कोणत्या की दाबल्या जात आहेत हे डीबग करू शकता
-   - **प्रतिबंधित करते** अॅरो की आणि स्पेसबारसाठी डीफॉल्ट ब्राउझर वर्तन
-   - **अनुमती देते** इतर कींना सामान्यपणे कार्य करण्यासाठी
-   
-   या टप्प्यावर तुमच्या ब्राउझर कन्सोलमध्ये तपासा आणि कीप्रेस लॉग होत असल्याचे पहा.
-
-3. **अंमलात आणा** [Pub sub pattern](../README.md), हे तुमचा कोड स्वच्छ ठेवेल कारण तुम्ही उर्वरित भागांचे अनुसरण करता.
-
-   पब्लिश-सबस्क्राइब पॅटर्न तुमचा कोड व्यवस्थित ठेवण्यास मदत करतो, इव्हेंट डिटेक्शनला इव्हेंट हँडलिंगपासून वेगळे करून. यामुळे तुमचा कोड अधिक मॉड्युलर आणि देखभाल करणे सोपे होते.
-
-   हे शेवटचे भाग करण्यासाठी, तुम्ही:
-
-   1. **इव्हेंट लिसनर जोडा** विंडोवर:
-
-       ```javascript
-       window.addEventListener("keyup", (evt) => {
-         if (evt.key === "ArrowUp") {
-           eventEmitter.emit(Messages.KEY_EVENT_UP);
-         } else if (evt.key === "ArrowDown") {
-           eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-         } else if (evt.key === "ArrowLeft") {
-           eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-         } else if (evt.key === "ArrowRight") {
-           eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-         }
-       });
-       ```
-
-   **या इव्हेंट सिस्टमचे कार्य:**
-   - **शोधते** कीबोर्ड इनपुट आणि त्याला कस्टम गेम इव्हेंट्समध्ये
-- **शत्रूंच्या ग्रीडची निर्मिती** nested loops वापरून केली जाते  
-- **शत्रूंच्या प्रतिमेची नियुक्ती** प्रत्येक शत्रू ऑब्जेक्टला केली जाते  
-- **प्रत्येक शत्रूला** ग्लोबल गेम ऑब्जेक्ट्स array मध्ये जोडले जाते  
-
-आणि `createHero()` फंक्शन जोडा, जो नायकासाठी समान प्रक्रिया करेल.  
-
     ```javascript
     function createHero() {
       hero = new Hero(
@@ -358,28 +459,48 @@ npm start
       gameObjects.push(hero);
     }
     ```
-  
-**नायक निर्मिती काय करते:**  
-- **नायकाला** स्क्रीनच्या तळाशी मध्यभागी स्थान देतो  
-- **नायकाच्या प्रतिमेची नियुक्ती** नायक ऑब्जेक्टला केली जाते  
-- **नायकाला** गेम ऑब्जेक्ट्स array मध्ये जोडतो जेणेकरून तो रेंडर होईल  
 
-आणि शेवटी, `drawGameObjects()` फंक्शन जोडा जे ड्रॉइंग सुरू करेल:  
+    **नायक तयार करण्याचे कार्य:**
+    - **नायकाला स्क्रीनच्या तळाशी मध्यभागी ठेवते**
+    - **नायक ऑब्जेक्टला नायक इमेज असाइन करते**
+    - **नायकाला गेम ऑब्जेक्ट्स array मध्ये रेंडरिंगसाठी जोडते**
+
+    आणि शेवटी, `drawGameObjects()` फंक्शन जोडा जे रेखाटन सुरू करेल:
 
     ```javascript
     function drawGameObjects(ctx) {
       gameObjects.forEach(go => go.draw(ctx));
     }
     ```
-  
-**ड्रॉइंग फंक्शन समजून घेणे:**  
-- **सर्व गेम ऑब्जेक्ट्सवर** array मध्ये iterate करते  
-- **प्रत्येक ऑब्जेक्टवर** `draw()` मेथड कॉल करते  
-- **कॅनव्हास कॉन्टेक्स्ट पास करते** जेणेकरून ऑब्जेक्ट्स स्वतःला रेंडर करू शकतील  
-
-तुमचे शत्रू तुमच्या नायकाच्या स्पेसशिपकडे पुढे सरकायला सुरुवात करतील!  
-}  
-}  
+
+    **रेखाटन फंक्शन समजून घेणे:**
+    - **सर्व गेम ऑब्जेक्ट्स array मधून iterate करते**
+    - **प्रत्येक ऑब्जेक्टवर `draw()` मेथड कॉल करते**
+    - **कॅनव्हास संदर्भ पास करते जेणेकरून ऑब्जेक्ट्स स्वतःला रेंडर करू शकतील**
+
+    ### 🔄 **शैक्षणिक तपासणी**
+    **पूर्ण गेम सिस्टम समजून घेणे**: संपूर्ण आर्किटेक्चरची तुमची मास्टरी तपासा:
+    - ✅ वारसाहक्क कसा नायक आणि शत्रूंना सामान्य GameObject गुणधर्म शेअर करण्यास अनुमती देतो?
+    - ✅ pub/sub पॅटर्न तुमचा कोड अधिक टिकाऊ का बनवतो?
+    - ✅ गेम लूप गुळगुळीत अॅनिमेशन तयार करण्यात कोणती भूमिका बजावतो?
+    - ✅ इव्हेंट लिसनर्स गेम ऑब्जेक्टच्या वर्तनाशी वापरकर्ता इनपुट कसे जोडतात?
+
+    **सिस्टम इंटिग्रेशन**: तुमचा गेम आता दाखवतो:
+    - **ऑब्जेक्ट-ओरिएंटेड डिझाइन**: बेस क्लासेससह विशेष वारसाहक्क
+    - **इव्हेंट-ड्रिव्हन आर्किटेक्चर**: pub/sub पॅटर्नसाठी सैल कपलिंग
+    - **अॅनिमेशन फ्रेमवर्क**: गेम लूपसह सुसंगत फ्रेम अपडेट्स
+    - **इनपुट हँडलिंग**: कीबोर्ड इव्हेंट्ससह डिफॉल्ट प्रिव्हेंशन
+    - **अॅसेट मॅनेजमेंट**: इमेज लोडिंग आणि स्प्राइट रेंडरिंग
+
+    **प्रोफेशनल पॅटर्न्स**: तुम्ही अंमलात आणले आहे:
+    - **सेपरेशन ऑफ कन्सर्न्स**: इनपुट, लॉजिक आणि रेंडरिंग वेगळे
+    - **पॉलिमॉर्फिझम**: सर्व गेम ऑब्जेक्ट्स सामान्य रेखाटन इंटरफेस शेअर करतात
+    - **मेस्सेज पासिंग**: घटकांमधील स्वच्छ संवाद
+    - **रिसोर्स मॅनेजमेंट**: कार्यक्षम स्प्राइट आणि अॅनिमेशन हँडलिंग
+
+    तुमचे शत्रू तुमच्या नायकाच्या स्पेसशिपकडे पुढे सरकायला सुरुवात करायला हवे!
+      }
+    }
     ```
     
     and add a `createHero()` function to do a similar process for the hero.
@@ -394,68 +515,187 @@ npm start
       gameObjects.push(hero);
     }
     ```
-  
-आणि शेवटी, `drawGameObjects()` फंक्शन जोडा जे ड्रॉइंग सुरू करेल:  
+
+    आणि शेवटी, `drawGameObjects()` फंक्शन जोडा जे रेखाटन सुरू करेल:
 
     ```javascript
     function drawGameObjects(ctx) {
       gameObjects.forEach(go => go.draw(ctx));
     }
     ```
-  
-तुमचे शत्रू तुमच्या नायकाच्या स्पेसशिपकडे पुढे सरकायला सुरुवात करतील!  
+
+    तुमचे शत्रू तुमच्या नायकाच्या स्पेसशिपकडे पुढे सरकायला सुरुवात करायला हवे!
 
 ---
 
-## GitHub Copilot Agent Challenge 🚀  
+## GitHub Copilot Agent Challenge 🚀
 
-तुमच्या गेमचा polish सुधारण्यासाठी एक आव्हान येथे आहे: boundaries आणि smooth controls जोडणे. सध्या, तुमचा नायक स्क्रीनच्या बाहेर जाऊ शकतो आणि हालचाल थोडी खडबडीत वाटू शकते.  
+तुमच्या गेमची चमक वाढवण्यासाठी एक आव्हान: सीमा आणि गुळगुळीत नियंत्रण जोडणे. सध्या, तुमचा नायक स्क्रीनच्या बाहेर जाऊ शकतो आणि हालचाल थोडी खडबडीत वाटू शकते.
 
-**तुमचे मिशन:** स्क्रीन boundaries आणि fluid movement अंमलात आणून तुमच्या स्पेसशिपला अधिक वास्तववादी बनवा. हे NASA च्या फ्लाइट कंट्रोल सिस्टीमसारखे आहे जे spacecraft ला सुरक्षित ऑपरेशनल पॅरामीटर्स ओलांडण्यापासून प्रतिबंधित करते.  
+**तुमचे मिशन:** स्क्रीनवर तुमचे स्पेसशिप ठेवण्यासाठी एक प्रणाली तयार करा आणि नियंत्रण गुळगुळीत करा. जेव्हा खेळाडू एरो की दाबून ठेवतात, तेव्हा जहाज सतत सरकायला हवे, डिस्क्रीट स्टेप्सऐवजी. स्क्रीनच्या सीमांवर पोहोचल्यावर व्हिज्युअल फीडबॅक विचारात घ्या – कदाचित प्ले एरियाच्या कडेला सूचक प्रभाव.
 
-**काय तयार करायचे आहे:** एक प्रणाली तयार करा जी तुमच्या नायकाच्या स्पेसशिपला स्क्रीनवर ठेवते आणि controls smooth बनवते. जेव्हा खेळाडू arrow key दाबून ठेवतो, तेव्हा जहाज discrete steps मध्ये न हलता सतत glide करावे. स्क्रीन boundaries वर पोहोचल्यावर visual feedback जोडण्याचा विचार करा – कदाचित प्ले एरियाच्या कडेला subtle effect दाखवणे.  
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.  
+## 🚀 Challenge
 
-## 🚀 Challenge  
+प्रकल्प वाढत असताना कोडचे आयोजन अधिक महत्त्वाचे होते. तुम्ही कदाचित लक्षात घेतले असेल की तुमची फाइल फंक्शन्स, व्हेरिएबल्स आणि क्लासेससह गोंधळलेली आहे. हे मला आठवते की अपोलो मिशन कोडचे आयोजन करणाऱ्या अभियंत्यांना एक स्पष्ट, टिकाऊ प्रणाली तयार करावी लागली ज्यावर अनेक टीम्स एकत्र काम करू शकतील.
 
-प्रोजेक्ट्स वाढत असताना कोडचे organization अधिक महत्त्वाचे बनते. तुम्ही कदाचित लक्षात घेतले असेल की तुमची फाइल functions, variables, आणि classes यांच्याने भरलेली आहे. हे मला Apollo mission code organize करणाऱ्या इंजिनिअर्सची आठवण करून देते ज्यांनी एकाच वेळी अनेक टीम्स काम करू शकतील अशा स्पष्ट, maintainable systems तयार केल्या.  
+**तुमचे मिशन:**
+सॉफ्टवेअर आर्किटेक्टसारखे विचार करा. तुम्ही तुमचा कोड कसा आयोजित कराल जेणेकरून सहा महिन्यांनंतर तुम्ही (किंवा तुमचा सहकारी) काय चालले आहे ते समजू शकाल? जरी सर्व काही सध्या एका फाइलमध्ये राहिले तरी, तुम्ही चांगले आयोजन तयार करू शकता:
 
-**तुमचे मिशन:**  
-सॉफ्टवेअर आर्किटेक्टसारखे विचार करा. तुम्ही तुमचा कोड कसा organize कराल जेणेकरून सहा महिन्यांनंतर तुम्ही (किंवा तुमचा सहकारी) काय चालले आहे ते समजू शकाल? सध्या सर्व काही एका फाइलमध्ये ठेवले असले तरी, तुम्ही चांगले organization तयार करू शकता:  
+- **संबंधित फंक्शन्स गटबद्ध करणे** स्पष्ट कमेंट हेडर्ससह
+- **कन्सर्न्स वेगळे करणे** - गेम लॉजिक रेंडरिंगपासून वेगळे ठेवा
+- **सुसंगत नाव देणे** व्हेरिएबल्स आणि फंक्शन्ससाठी
+- **मॉड्यूल्स किंवा नेमस्पेस तयार करणे** गेमच्या वेगवेगळ्या पैलूंना आयोजित करण्यासाठी
+- **डॉक्युमेंटेशन जोडणे** जे प्रत्येक मुख्य विभागाचा उद्देश स्पष्ट करते
 
-- **संबंधित functions** स्पष्ट comment headers सह एकत्र करणे  
-- **Concern वेगळे करणे** - गेम लॉजिक आणि rendering वेगळे ठेवणे  
-- **सुसंगत नाव देणे** variables आणि functions साठी  
-- **Modules किंवा namespaces तयार करणे** गेमच्या वेगवेगळ्या पैलूंना organize करण्यासाठी  
-- **Documentation जोडणे** जे प्रत्येक मुख्य विभागाचा उद्देश स्पष्ट करते  
+**प्रतिबिंब प्रश्न:**
+- तुमच्या कोडचे कोणते भाग परत आल्यावर समजणे सर्वात कठीण आहे?
+- तुमचा कोड दुसऱ्या व्यक्तीला योगदान देण्यासाठी सोपा कसा बनवता येईल?
+- तुम्हाला पॉवर-अप्स किंवा वेगळ्या प्रकारचे शत्रू जोडायचे असल्यास काय होईल?
 
-**Reflection questions:**  
-- तुमच्या कोडमधील कोणते भाग परत आल्यावर समजायला सर्वात कठीण वाटतात?  
-- तुमचा कोड कसा organize करता येईल जेणेकरून दुसऱ्या व्यक्तीला योगदान देणे सोपे होईल?  
-- तुम्हाला नवीन features जसे की power-ups किंवा वेगवेगळ्या प्रकारचे शत्रू जोडायचे असल्यास काय होईल?  
+## Post-Lecture Quiz
 
-## Post-Lecture Quiz  
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/34)
 
-[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/34)  
+## Review & Self Study
 
-## Review & Self Study  
+आम्ही सर्व काही सुरुवातीपासून तयार करत आहोत, जे शिकण्यासाठी उत्कृष्ट आहे, परंतु येथे एक छोटासा गुपित आहे – काही अद्भुत JavaScript फ्रेमवर्क्स आहेत जे तुमच्यासाठी बरेच काम करू शकतात. आम्ही कव्हर केलेल्या मूलभूत गोष्टींमध्ये तुम्हाला आराम वाटल्यावर, [उपलब्ध असलेल्या गोष्टींचा शोध घेणे](https://github.com/collections/javascript-game-engines) योग्य ठरेल.
 
-आम्ही सर्व काही सुरुवातीपासून तयार करत आहोत, जे शिकण्यासाठी उत्कृष्ट आहे, पण येथे एक छोटासा गुपित आहे – काही आश्चर्यकारक JavaScript frameworks आहेत जे तुमच्यासाठी बरेच काम करू शकतात. आम्ही कव्हर केलेल्या मूलभूत गोष्टींमध्ये तुम्हाला आराम वाटल्यावर, [जे उपलब्ध आहे ते एक्सप्लोर करणे](https://github.com/collections/javascript-game-engines) योग्य ठरेल.  
+फ्रेमवर्क्स म्हणजे प्रत्येक साधन हाताने बनवण्याऐवजी चांगल्या प्रकारे सुसज्ज टूलबॉक्स असणे. ते त्या कोड आयोजन आव्हानांपैकी अनेक सोडवू शकतात, तसेच अशा वैशिष्ट्यांची ऑफर देतात जी स्वतः तयार करण्यासाठी आठवडे लागतील.
 
-Frameworks म्हणजे प्रत्येक साधन हाताने बनवण्याऐवजी एक चांगले stocked toolbox असल्यासारखे आहे. ते कोड organization च्या अनेक आव्हानांवर उपाय करू शकतात, तसेच अशा features ऑफर करू शकतात ज्यासाठी स्वतः तयार करण्यासाठी आठवडे लागतील.  
+**शोधण्यासारख्या गोष्टी:**
+- गेम इंजिन्स कोड कसे आयोजित करतात – तुम्ही वापरत असलेल्या हुशार पॅटर्न्स पाहून तुम्हाला आश्चर्य वाटेल
+- कॅनव्हास गेम्स गुळगुळीत चालवण्यासाठी परफॉर्मन्स ट्रिक्स  
+- आधुनिक JavaScript वैशिष्ट्ये जी तुमचा कोड स्वच्छ आणि अधिक टिकाऊ बनवू शकतात
+- गेम ऑब्जेक्ट्स आणि त्यांच्या नातेसंबंधांचे व्यवस्थापन करण्याचे वेगवेगळे दृष्टिकोन
 
-**एक्सप्लोर करण्यासारख्या गोष्टी:**  
-- गेम इंजिन्स कोड कसे organize करतात – तुम्ही त्यांच्या वापरलेल्या हुशार patterns पाहून आश्चर्यचकित व्हाल  
-- कॅनव्हास गेम्स butter-smooth चालवण्यासाठी performance tricks  
-- आधुनिक JavaScript features जे तुमचा कोड अधिक स्वच्छ आणि maintainable बनवू शकतात  
-- गेम ऑब्जेक्ट्स आणि त्यांच्या संबंधांचे व्यवस्थापन करण्याचे वेगवेगळे दृष्टिकोन  
+## 🎯 Your Game Animation Mastery Timeline
 
-## Assignment  
+```mermaid
+timeline
+    title Game Animation & Interaction Learning Progression
+    
+    section Movement Fundamentals (20 minutes)
+        Animation Principles: Frame-based animation
+                            : Position updates
+                            : Coordinate systems
+                            : Smooth movement
+        
+    section Event Systems (25 minutes)
+        User Input: Keyboard event handling
+                  : Default behavior prevention
+                  : Event object properties
+                  : Window-level listening
+        
+    section Game Architecture (30 minutes)
+        Object Design: Inheritance patterns
+                     : Base class creation
+                     : Specialized behaviors
+                     : Polymorphic interfaces
+        
+    section Communication Patterns (35 minutes)
+        Pub/Sub Implementation: Event emitters
+                              : Message constants
+                              : Loose coupling
+                              : System integration
+        
+    section Game Loop Mastery (40 minutes)
+        Real-time Systems: Frame rate control
+                         : Update/render cycle
+                         : State management
+                         : Performance optimization
+        
+    section Advanced Techniques (45 minutes)
+        Professional Features: Collision detection
+                             : Physics simulation
+                             : State machines
+                             : Component systems
+        
+    section Game Engine Concepts (1 week)
+        Framework Understanding: Entity-component systems
+                               : Scene graphs
+                               : Asset pipelines
+                               : Performance profiling
+        
+    section Production Skills (1 month)
+        Professional Development: Code organization
+                                : Team collaboration
+                                : Testing strategies
+                                : Deployment optimization
+```
 
-[तुमच्या कोडवर टिप्पणी द्या](assignment.md)  
+### 🛠️ तुमचा गेम डेव्हलपमेंट टूलकिट सारांश
+
+या धड्याचा अभ्यास केल्यानंतर, तुम्ही आता मास्टर केले आहे:
+- **अॅनिमेशन तत्त्वे**: फ्रेम-आधारित हालचाल आणि गुळगुळीत संक्रमण
+- **इव्हेंट-ड्रिव्हन प्रोग्रामिंग**: कीबोर्ड इनपुट हँडलिंगसह योग्य इव्हेंट व्यवस्थापन
+- **ऑब्जेक्ट-ओरिएंटेड डिझाइन**: वारसाहक्क श्रेणी आणि पॉलिमॉर्फिक इंटरफेस
+- **संवाद पॅटर्न्स**: टिकाऊ कोडसाठी pub/sub आर्किटेक्चर
+- **गेम लूप आर्किटेक्चर**: रिअल-टाइम अपडेट आणि रेंडरिंग सायकल्स
+- **इनपुट सिस्टम्स**: वापरकर्ता नियंत्रण मॅपिंगसह डिफॉल्ट वर्तन प्रतिबंध
+- **अॅसेट मॅनेजमेंट**: स्प्राइट लोडिंग आणि कार्यक्षम रेंडरिंग तंत्र
+
+### ⚡ **तुम्ही पुढील 5 मिनिटांत काय करू शकता**
+- [ ] ब्राउझर कन्सोल उघडा आणि `addEventListener('keydown', console.log)` वापरून कीबोर्ड इव्हेंट्स पहा
+- [ ] एक साधा div एलिमेंट तयार करा आणि एरो की वापरून हलवा
+- [ ] सतत हालचाल तयार करण्यासाठी `setInterval` वापरून प्रयोग करा
+- [ ] `event.preventDefault()` वापरून डिफॉल्ट वर्तन प्रतिबंध करण्याचा प्रयत्न करा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि इव्हेंट-ड्रिव्हन प्रोग्रामिंग समजून घ्या
+- [ ] पूर्ण कीबोर्ड नियंत्रणासह हलणारे नायक स्पेसशिप तयार करा
+- [ ] गुळगुळीत शत्रू हालचाल पॅटर्न अंमलात आणा
+- [ ] गेम ऑब्जेक्ट्स स्क्रीनच्या बाहेर जाण्यापासून रोखण्यासाठी सीमा जोडा
+- [ ] गेम ऑब्जेक्ट्समधील मूलभूत टक्कर शोध तयार करा
+
+### 📅 **तुमचा आठवडाभराचा अॅनिमेशन प्रवास**
+- [ ] गुळगुळीत हालचाल आणि परस्परसंवादासह पूर्ण स्पेस गेम तयार करा
+- [ ] वक्र, प्रवेग आणि भौतिकशास्त्रासारखे प्रगत हालचाल पॅटर्न जोडा
+- [ ] गुळगुळीत संक्रमण आणि ईझिंग फंक्शन्स अंमलात आणा
+- [ ] कण प्रभाव आणि व्हिज्युअल फीडबॅक सिस्टम तयार करा
+- [ ] गुळगुळीत 60fps गेमप्ले साठी गेम परफॉर्मन्स ऑप्टिमाइझ करा
+- [ ] मोबाइल टच नियंत्रण आणि प्रतिसादात्मक डिझाइन जोडा
+
+### 🌟 **तुमचा महिनाभराचा परस्पर विकास**
+- [ ] प्रगत अॅनिमेशन सिस्टमसह जटिल परस्पर अनुप्रयोग तयार करा
+- [ ] GSAP सारख्या अॅनिमेशन लायब्ररी शिकणे किंवा तुमचे स्वतःचे अॅनिमेशन इंजिन तयार करणे
+- [ ] ओपन सोर्स गेम डेव्हलपमेंट आणि अॅनिमेशन प्रकल्पांमध्ये योगदान द्या
+- [ ] ग्राफिक्स-इंटेन्सिव्ह अनुप्रयोगांसाठी परफॉर्मन्स ऑप्टिमायझेशन मास्टर करा
+- [ ] गेम डेव्हलपमेंट आणि अॅनिमेशनबद्दल शैक्षणिक सामग्री तयार करा
+- [ ] प्रगत परस्पर प्रोग्रामिंग कौशल्ये दर्शविणारे पोर्टफोलिओ तयार करा
+
+**वास्तविक-जगातील अनुप्रयोग**: तुमचे गेम अॅनिमेशन कौशल्य थेट लागू होते:
+- **परस्पर वेब अनुप्रयोग**: डायनॅमिक डॅशबोर्ड आणि रिअल-टाइम इंटरफेस
+- **डेटा व्हिज्युअलायझेशन**: अॅनिमेटेड चार्ट्स आणि परस्पर ग्राफिक्स
+- **शैक्षणिक सॉफ्टवेअर**: परस्पर सिम्युलेशन्स आणि शिकण्याची साधने
+- **मोबाइल डेव्हलपमेंट**: टच-आधारित गेम्स आणि जेस्चर हँडलिंग
+- **डेस्कटॉप अनुप्रयोग**: इलेक्ट्रॉन अॅप्ससह गुळगुळीत अॅनिमेशन
+- **वेब अॅनिमेशन**: CSS आणि JavaScript अॅनिमेशन लायब्ररी
+
+**प्रोफेशनल कौशल्ये मिळवली**: तुम्ही आता करू शकता:
+- **आर्किटेक्ट** इव्हेंट-ड्रिव्हन सिस्टम्स जे जटिलतेसह स्केल होतात
+- **अंमलात आणा** गुळगुळीत अॅनिमेशन गणितीय तत्त्वे वापरून
+- **डिबग** ब्राउझर डेव्हलपर टूल्स वापरून जटिल परस्पर प्रणाली
+- **ऑप्टिमाइझ** गेम परफॉर्मन्स वेगवेगळ्या डिव्हाइस आणि ब्राउझरसाठी
+- **डिझाइन** टिकाऊ कोड संरचना सिद्ध पॅटर्न्स वापरून
+
+**गेम डेव्हलपमेंट संकल्पना मास्टर केल्या**:
+- **फ्रेम रेट व्यवस्थापन**: FPS आणि टाइमिंग कंट्रोल्स समजून घेणे
+- **इनपुट हँडलिंग**: क्रॉस-प्लॅटफॉर्म कीबोर्ड आणि इव्हेंट सिस्टम्स
+- **ऑब्जेक्ट लाइफसायकल**: निर्मिती, अपडेट आणि नाश पॅटर्न्स
+- **स्टेट सिंक्रोनायझेशन**: फ्रेम्समध्ये गेम स्टेट सुसंगत ठेवणे
+- **इव्हेंट आर्किटेक्चर**: गेम सिस्टम्समधील डिस्कपल्ड संवाद
+
+**पुढील स्तर**: तुम्ही टक्कर शोध, स्कोअरिंग सिस्टम्स, साउंड इफेक्ट्स जोडण्यासाठी तयार आहात किंवा Phaser किंवा Three.js सारख्या आधुनिक गेम फ्रेमवर्क्सचा शोध घेण्यासाठी तयार आहात!
+
+🌟 **अचिव्हमेंट अनलॉक**: तुम्ही व्यावसायिक आर्किटेक्चर पॅटर्न्ससह पूर्ण परस्पर गेम सिस्टम तयार केले आहे!
+
+## Assignment
+
+[तुमच्या कोडवर टिप्पणी द्या](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
diff --git a/translations/mr/6-space-game/4-collision-detection/README.md b/translations/mr/6-space-game/4-collision-detection/README.md
index 57778e3dfa..9669482d5d 100644
--- a/translations/mr/6-space-game/4-collision-detection/README.md
+++ b/translations/mr/6-space-game/4-collision-detection/README.md
@@ -1,35 +1,105 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "4b1d441cfd31924084956000c0fee5a5",
-  "translation_date": "2025-10-22T16:32:20+00:00",
+  "original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
+  "translation_date": "2025-11-03T15:00:54+00:00",
   "source_file": "6-space-game/4-collision-detection/README.md",
   "language_code": "mr"
 }
 -->
 # स्पेस गेम तयार करा भाग 4: लेसर जोडणे आणि टक्कर शोधणे
 
-## व्याख्यानपूर्व प्रश्नमंजुषा
+```mermaid
+journey
+    title Your Collision Detection Journey
+    section Physics Foundation
+      Understand rectangles: 3: Student
+      Learn intersection math: 4: Student
+      Grasp coordinate systems: 4: Student
+    section Game Mechanics
+      Implement laser firing: 4: Student
+      Add object lifecycle: 5: Student
+      Create collision rules: 5: Student
+    section System Integration
+      Build collision detection: 5: Student
+      Optimize performance: 5: Student
+      Test interaction systems: 5: Student
+```
 
-[व्याख्यानपूर्व प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/35)
+## प्री-लेक्चर क्विझ
 
-स्टार वॉर्समधील तो क्षण आठवा जेव्हा ल्यूकच्या प्रोटॉन टॉरपीडोने डेथ स्टारच्या एक्झॉस्ट पोर्टला हिट केले. त्या अचूक टक्कर शोधामुळे आकाशगंगेचे भविष्य बदलले! गेम्समध्ये, टक्कर शोधणे याच प्रकारे कार्य करते - ते वस्तू कधी परस्परसंवाद करतात आणि पुढे काय होते हे ठरवते.
+[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/35)
 
-या धड्यात, तुम्ही तुमच्या स्पेस गेममध्ये लेसर शस्त्रे जोडाल आणि टक्कर शोधणे अंमलात आणाल. जसे नासाचे मिशन नियोजक मलबा टाळण्यासाठी अंतराळ यानाचे मार्ग काढतात, तसे तुम्ही गेम ऑब्जेक्ट्स कधी एकमेकांना छेदतात ते शोधायला शिकाल. आम्ही हे व्यवस्थापित करण्यायोग्य टप्प्यांमध्ये विभागू जे एकमेकांवर आधारित असतील.
+स्टार वॉर्समधील तो क्षण आठवा जेव्हा ल्यूकच्या प्रोटॉन टॉरपीडोने डेथ स्टारच्या एक्झॉस्ट पोर्टला हिट केले. त्या अचूक टक्कर शोधामुळे आकाशगंगेचे भविष्य बदलले! गेम्समध्ये, टक्कर शोधणे याच प्रकारे कार्य करते - ते वस्तू कधी परस्परसंवाद करतात आणि पुढे काय होते हे ठरवते.
 
-शेवटी, तुमच्याकडे एक कार्यरत कॉम्बॅट सिस्टम असेल जिथे लेसर शत्रूंना नष्ट करतात आणि टक्कर गेम इव्हेंट्स ट्रिगर करतात. हेच टक्कर तत्त्व भौतिकशास्त्राच्या सिम्युलेशनपासून ते परस्पर वेब इंटरफेसपर्यंत सर्वत्र वापरले जातात.
+या धड्यात, तुम्ही तुमच्या स्पेस गेममध्ये लेसर शस्त्रे जोडाल आणि टक्कर शोधणे अंमलात आणाल. जसे नासाचे मिशन नियोजक मलबा टाळण्यासाठी अंतराळ यानाच्या कक्षांचा हिशोब करतात, तसे तुम्ही गेम ऑब्जेक्ट्स कधी एकमेकांना छेदतात ते शोधायला शिकाल. आम्ही हे व्यवस्थापित करण्यायोग्य टप्प्यांमध्ये विभागू जे एकमेकांवर आधारित असतील.
+
+शेवटी, तुमच्याकडे एक कार्यरत कॉम्बॅट सिस्टम असेल जिथे लेसर शत्रूंना नष्ट करतात आणि टक्कर गेम इव्हेंट्स ट्रिगर करतात. हेच टक्कर तत्त्व भौतिकशास्त्राच्या सिम्युलेशनपासून ते इंटरॅक्टिव्ह वेब इंटरफेसपर्यंत सर्वत्र वापरले जातात.
+
+```mermaid
+mindmap
+  root((Collision Detection))
+    Physics Concepts
+      Rectangle Boundaries
+      Intersection Testing
+      Coordinate Systems
+      Separation Logic
+    Game Objects
+      Laser Projectiles
+      Enemy Ships
+      Hero Character
+      Collision Zones
+    Lifecycle Management
+      Object Creation
+      Movement Updates
+      Destruction Marking
+      Memory Cleanup
+    Event Systems
+      Keyboard Input
+      Collision Events
+      Game State Changes
+      Audio/Visual Effects
+    Performance
+      Efficient Algorithms
+      Frame Rate Optimization
+      Memory Management
+      Spatial Partitioning
+```
 
-✅ पहिल्या संगणक गेमबद्दल थोडे संशोधन करा. त्याची कार्यक्षमता काय होती?
+✅ पहिला संगणक गेम कधी लिहिला गेला यावर थोडे संशोधन करा. त्याची कार्यक्षमता काय होती?
 
 ## टक्कर शोधणे
 
-टक्कर शोधणे अपोलो लूनर मॉड्यूलवरील निकटता सेन्सर्ससारखे कार्य करते - ते सतत अंतर तपासते आणि वस्तू खूप जवळ आल्यावर अलर्ट ट्रिगर करते. गेम्समध्ये, ही प्रणाली वस्तू कधी परस्परसंवाद करतात आणि पुढे काय घडले पाहिजे हे ठरवते.
+टक्कर शोधणे अपोलो लूनर मॉड्यूलवरील प्रॉक्सिमिटी सेन्सर्ससारखे कार्य करते - ते सतत अंतर तपासते आणि वस्तू खूप जवळ आल्यावर अलर्ट ट्रिगर करते. गेम्समध्ये, ही प्रणाली ठरवते की वस्तू कधी परस्परसंवाद करतात आणि पुढे काय घडले पाहिजे.
 
-आम्ही वापरणार असलेली पद्धत प्रत्येक गेम ऑब्जेक्टला आयत म्हणून मानते, जसे की एअर ट्रॅफिक कंट्रोल सिस्टम विमानाचा मागोवा घेण्यासाठी सरलीकृत भूमितीय आकार वापरतात. ही आयताकृती पद्धत मूलभूत वाटू शकते, परंतु ती संगणकीयदृष्ट्या कार्यक्षम आहे आणि बहुतेक गेम परिस्थितींसाठी चांगले कार्य करते.
+आपण वापरणार असलेला दृष्टिकोन प्रत्येक गेम ऑब्जेक्टला आयत म्हणून मानतो, जसे की एअर ट्रॅफिक कंट्रोल सिस्टम्स विमानाचा मागोवा घेण्यासाठी सोप्या भूमितीय आकारांचा वापर करतात. हा आयताकृती पद्धत मूलभूत वाटू शकते, परंतु ती संगणकीयदृष्ट्या कार्यक्षम आहे आणि बहुतेक गेम परिस्थितीसाठी चांगले कार्य करते.
 
 ### आयताचे प्रतिनिधित्व
 
-प्रत्येक गेम ऑब्जेक्टला समन्वय सीमा आवश्यक असते, जसे की मंगळ ग्रहावरील मंगळ पाथफाइंडर रोव्हरने त्याचे स्थान मॅप केले. येथे आम्ही या सीमा समन्वय कसे परिभाषित करतो:
+प्रत्येक गेम ऑब्जेक्टला समन्वय सीमा आवश्यक असते, जसे की मंगळावर मंगळ पाथफाइंडर रोव्हरने त्याचे स्थान मॅप केले. येथे आम्ही या सीमा समन्वय कसे परिभाषित करतो:
+
+```mermaid
+flowchart TD
+    A["🎯 Game Object"] --> B["📍 Position (x, y)"]
+    A --> C["📏 Dimensions (width, height)"]
+    
+    B --> D["Top: y"]
+    B --> E["Left: x"]
+    
+    C --> F["Bottom: y + height"]
+    C --> G["Right: x + width"]
+    
+    D --> H["🔲 Rectangle Bounds"]
+    E --> H
+    F --> H
+    G --> H
+    
+    H --> I["Collision Detection Ready"]
+    
+    style A fill:#e3f2fd
+    style H fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 ```javascript
 rectFromGameObject() {
@@ -42,15 +112,38 @@ rectFromGameObject() {
 }
 ```
 
-**याचा अर्थ समजून घेऊया:**
+**याचा अर्थ असा आहे:**
 - **वरचा कडा**: तुमचा ऑब्जेक्ट उभ्या दिशेने कुठे सुरू होतो (त्याचा y स्थान)
 - **डावा कडा**: तो आडव्या दिशेने कुठे सुरू होतो (त्याचा x स्थान)
 - **खालचा कडा**: y स्थानात उंची जोडा - आता तुम्हाला ते कुठे संपते हे माहित आहे!
 - **उजवा कडा**: x स्थानात रुंदी जोडा - आणि तुमच्याकडे संपूर्ण सीमा आहे
 
-### छेदन अल्गोरिदम
+### इंटरसेक्शन अल्गोरिदम
 
-आयत छेद शोधणे हबल स्पेस टेलिस्कोप कसे ठरवते की त्याच्या दृश्य क्षेत्रात खगोलीय वस्तू ओव्हरलॅप होत आहेत की नाही यासारखे तर्क वापरते. अल्गोरिदम विभाजन तपासतो:
+आयताच्या इंटरसेक्शनचा शोध घेणे हबल स्पेस टेलिस्कोपने त्याच्या दृश्य क्षेत्रात खगोलीय वस्तू ओव्हरलॅप होत आहेत की नाही हे ठरवण्यासाठी वापरलेल्या तर्कासारखे आहे. अल्गोरिदम विभाजन तपासतो:
+
+```mermaid
+flowchart LR
+    A["Rectangle 1"] --> B{"Separation Tests"}
+    C["Rectangle 2"] --> B
+    
+    B --> D["R2 left > R1 right?"]
+    B --> E["R2 right < R1 left?"]
+    B --> F["R2 top > R1 bottom?"]
+    B --> G["R2 bottom < R1 top?"]
+    
+    D --> H{"Any True?"}
+    E --> H
+    F --> H
+    G --> H
+    
+    H -->|Yes| I["❌ No Collision"]
+    H -->|No| J["✅ Collision Detected"]
+    
+    style B fill:#e3f2fd
+    style I fill:#ffebee
+    style J fill:#e8f5e8
+```
 
 ```javascript
 function intersectRect(r1, r2) {
@@ -61,31 +154,53 @@ function intersectRect(r1, r2) {
 }
 ```
 
-**विभाजन चाचणी रडार प्रणालीसारखी कार्य करते:**
+**विभाजन चाचणी रडार सिस्टमसारखी कार्य करते:**
 - आयत 2 पूर्णपणे आयत 1 च्या उजवीकडे आहे का?
 - आयत 2 पूर्णपणे आयत 1 च्या डावीकडे आहे का?
 - आयत 2 पूर्णपणे आयत 1 च्या खाली आहे का?
 - आयत 2 पूर्णपणे आयत 1 च्या वर आहे का?
 
-जर या अटींपैकी एकही खरी नसेल, तर आयत ओव्हरलॅप होत असले पाहिजे. ही पद्धत रडार ऑपरेटर कसे ठरवतात की दोन विमान सुरक्षित अंतरावर आहेत की नाही यासारखी आहे.
+जर या अटींपैकी कोणतीही खरी नसेल, तर आयत ओव्हरलॅप होत असले पाहिजे. हा दृष्टिकोन रडार ऑपरेटर दोन विमान सुरक्षित अंतरावर आहेत की नाही हे ठरवण्यासाठी कसे कार्य करतात यासारखा आहे.
 
-## ऑब्जेक्ट जीवनचक्र व्यवस्थापित करणे
+## ऑब्जेक्ट्सचे जीवनचक्र व्यवस्थापित करणे
 
-जेव्हा लेसर शत्रूला हिट करते, तेव्हा दोन्ही वस्तू गेममधून काढून टाकणे आवश्यक असते. तथापि, ऑब्जेक्ट्स मिड-लूप हटवणे क्रॅश होऊ शकते - अपोलो गाइडन्स संगणकासारख्या सुरुवातीच्या संगणक प्रणालींमध्ये कठोरपणे शिकलेला धडा. त्याऐवजी, आम्ही "डिलीटसाठी चिन्हांकित करा" पद्धत वापरतो जी फ्रेम्स दरम्यान वस्तू सुरक्षितपणे काढून टाकते.
+जेव्हा लेसर शत्रूला हिट करते, तेव्हा दोन्ही वस्तू गेममधून काढून टाकल्या पाहिजेत. तथापि, ऑब्जेक्ट्स मिड-लूप हटवणे क्रॅश होऊ शकते - अपोलो गाइडन्स संगणकासारख्या सुरुवातीच्या संगणक प्रणालींमध्ये कठोरपणे शिकलेला धडा. त्याऐवजी, आम्ही "हटवण्यासाठी चिन्हांकित करा" दृष्टिकोन वापरतो जो फ्रेम्स दरम्यान वस्तू सुरक्षितपणे काढून टाकतो.
 
-येथे आम्ही काहीतरी कसे काढून टाकतो:
+```mermaid
+stateDiagram-v2
+    [*] --> Active: Object Created
+    Active --> Collided: Collision Detected
+    Collided --> MarkedDead: Set dead = true
+    MarkedDead --> Filtered: Next Frame
+    Filtered --> [*]: Object Removed
+    
+    Active --> OutOfBounds: Leaves Screen
+    OutOfBounds --> MarkedDead
+    
+    note right of MarkedDead
+        Safe to continue
+        current frame
+    end note
+    
+    note right of Filtered
+        Objects removed
+        between frames
+    end note
+```
+
+आम्ही काहीतरी काढून टाकण्यासाठी कसे चिन्हांकित करतो:
 
 ```javascript
 // Mark object for removal
 enemy.dead = true;
 ```
 
-**ही पद्धत का कार्य करते:**
-- आम्ही ऑब्जेक्टला "मृत" म्हणून चिन्हांकित करतो परंतु लगेच हटवत नाही
-- हे चालू गेम फ्रेम सुरक्षितपणे पूर्ण होऊ देते
-- आधीच हटवलेल्या वस्तू वापरण्याचा प्रयत्न केल्यामुळे कोणतेही क्रॅश होत नाहीत!
+**हा दृष्टिकोन का कार्य करतो:**
+- आम्ही ऑब्जेक्टला "मृत" म्हणून चिन्हांकित करतो परंतु लगेच काढून टाकत नाही
+- हे चालू गेम फ्रेम सुरक्षितपणे पूर्ण करू देते
+- आधीच निघून गेलेल्या वस्तूचा वापर करण्याचा प्रयत्न केल्यामुळे कोणतेही क्रॅश होत नाही!
 
-नंतर पुढील रेंडर सायकलपूर्वी चिन्हांकित वस्तू फिल्टर करा:
+मग पुढील रेंडर सायकलपूर्वी चिन्हांकित ऑब्जेक्ट्स फिल्टर करा:
 
 ```javascript
 gameObjects = gameObjects.filter(go => !go.dead);
@@ -93,27 +208,52 @@ gameObjects = gameObjects.filter(go => !go.dead);
 
 **हे फिल्टरिंग काय करते:**
 - फक्त "जिवंत" वस्तूंसह ताजी यादी तयार करते
-- "मृत" म्हणून चिन्हांकित केलेल्या वस्तू काढून टाकते
-- तुमचा गेम सुरळीत चालू ठेवते
+- "मृत" म्हणून चिन्हांकित केलेल्या कोणत्याही गोष्टीला टाकून देते
+- तुमचा गेम सुरळीत चालू ठेवतो
 - नष्ट झालेल्या वस्तूंच्या संचयामुळे मेमरी बोट टाळते
 
 ## लेसर यांत्रिकी अंमलात आणणे
 
-गेम्समधील लेसर प्रोजेक्टाइल स्टार ट्रेकमधील फोटॉन टॉरपीडोसारख्या तत्त्वावर कार्य करतात - ते वेगळ्या वस्तू असतात ज्या सरळ रेषेत प्रवास करतात जोपर्यंत ते काहीतरी हिट करत नाहीत. प्रत्येक स्पेसबार प्रेस एक नवीन लेसर ऑब्जेक्ट तयार करते जे स्क्रीनवर फिरते.
+गेम्समधील लेसर प्रोजेक्टाइल्स स्टार ट्रेकमधील फोटॉन टॉरपीडोसारख्या तत्त्वावर कार्य करतात - ते वेगळ्या वस्तू असतात जे सरळ रेषेत प्रवास करतात जोपर्यंत ते काहीतरी हिट करत नाहीत. प्रत्येक स्पेसबार प्रेस एक नवीन लेसर ऑब्जेक्ट तयार करते जे स्क्रीनवर फिरते.
 
 हे कार्य करण्यासाठी, आम्हाला काही वेगवेगळ्या भागांचे समन्वय साधणे आवश्यक आहे:
 
 **अंमलात आणण्यासाठी मुख्य घटक:**
 - **तयार करा** लेसर ऑब्जेक्ट्स जे हिरोच्या स्थानावरून तयार होतात
 - **हँडल करा** कीबोर्ड इनपुट लेसर तयार करणे ट्रिगर करण्यासाठी
-- **व्यवस्थापित करा** लेसर हालचाल आणि जीवनचक्र
-- **अंमलात आणा** लेसर प्रोजेक्टाइलसाठी दृश्य प्रतिनिधित्व
+- **व्यवस्थापित करा** लेसरची हालचाल आणि जीवनचक्र
+- **अंमलात आणा** लेसर प्रोजेक्टाइल्ससाठी व्हिज्युअल प्रतिनिधित्व
+
+## फायरिंग रेट नियंत्रण अंमलात आणणे
 
-## फायरिंग दर नियंत्रण अंमलात आणणे
+अमर्यादित फायरिंग रेट्स गेम इंजिनला ओव्हरव्हेल्म करतील आणि गेमप्ले खूप सोपे करतील. वास्तविक शस्त्र प्रणालींना समान मर्यादा असतात - USS एंटरप्राइझच्या फेजर्सलाही शॉट्स दरम्यान रिचार्ज करण्यासाठी वेळ आवश्यक होता.
 
-अमर्यादित फायरिंग दर गेम इंजिनला ओव्हरव्हेल्म करतील आणि गेमप्ले खूप सोपे करतील. वास्तविक शस्त्र प्रणालींना समान मर्यादा असतात - USS एंटरप्राइझच्या फेजर्सलाही शॉट्स दरम्यान रिचार्ज करण्यासाठी वेळ आवश्यक होता.
+आम्ही एक कूलडाउन सिस्टम अंमलात आणू जी जलद फायर स्पॅमिंग रोखते आणि प्रतिसादात्मक नियंत्रण राखते:
 
-आम्ही एक कूलडाउन प्रणाली अंमलात आणू जी जलद फायर स्पॅमिंग रोखते आणि प्रतिसादात्मक नियंत्रण राखते:
+```mermaid
+sequenceDiagram
+    participant Player
+    participant Weapon
+    participant Cooldown
+    participant Game
+    
+    Player->>Weapon: Press Spacebar
+    Weapon->>Cooldown: Check if cool
+    
+    alt Weapon is Ready
+        Cooldown->>Weapon: cool = true
+        Weapon->>Game: Create Laser
+        Weapon->>Cooldown: Start new cooldown
+        Cooldown->>Cooldown: cool = false
+        
+        Note over Cooldown: Wait 500ms
+        
+        Cooldown->>Cooldown: cool = true
+    else Weapon is Cooling
+        Cooldown->>Weapon: cool = false
+        Weapon->>Player: No action
+    end
+```
 
 ```javascript
 class Cooldown {
@@ -147,27 +287,43 @@ class Weapon {
 - फायर करण्यापूर्वी, आम्ही तपासतो: "शस्त्र कूल आहे का?"
 - हे स्पॅम-क्लिकिंग रोखते आणि नियंत्रण प्रतिसादात्मक ठेवते
 
-✅ स्पेस गेम मालिकेतील धडा 1 पहा आणि कूलडाउनबद्दल आठवण करून द्या.
+✅ स्पेस गेम मालिकेतील धडा 1 पहा कूलडाउनबद्दल आठवण करून देण्यासाठी.
 
 ## टक्कर प्रणाली तयार करणे
 
-तुम्ही तुमच्या विद्यमान स्पेस गेम कोडला टक्कर शोध प्रणाली तयार करण्यासाठी विस्तारित कराल. आंतरराष्ट्रीय स्पेस स्टेशनच्या स्वयंचलित टक्कर टाळण्याच्या प्रणालीसारखे, तुमचा गेम सतत वस्तूंच्या स्थानावर नजर ठेवेल आणि छेदनांना प्रतिसाद देईल.
+तुम्ही तुमच्या विद्यमान स्पेस गेम कोडला टक्कर शोधण्याची प्रणाली तयार करण्यासाठी विस्तारित कराल. आंतरराष्ट्रीय स्पेस स्टेशनच्या स्वयंचलित टक्कर टाळण्याच्या प्रणालीसारखे, तुमचा गेम सतत ऑब्जेक्ट्सच्या स्थानावर नजर ठेवेल आणि इंटरसेक्शनला प्रतिसाद देईल.
 
-तुमच्या मागील धड्याच्या कोडपासून सुरुवात करून, तुम्ही टक्कर शोधणे विशिष्ट नियमांसह जोडाल जे वस्तूंच्या परस्परसंवादाचे नियमन करतात.
+तुमच्या मागील धड्याच्या कोडपासून सुरुवात करून, तुम्ही टक्कर शोधणे विशिष्ट नियमांसह जोडाल जे ऑब्जेक्ट्सच्या परस्परसंवादाचे नियमन करतात.
 
-> 💡 **प्रो टिप**: लेसर स्प्राइट आधीच तुमच्या अ‍ॅसेट्स फोल्डरमध्ये समाविष्ट आहे आणि तुमच्या कोडमध्ये संदर्भित आहे, अंमलात आणण्यासाठी तयार आहे.
+> 💡 **प्रो टिप**: लेसर स्प्राइट आधीच तुमच्या अॅसेट्स फोल्डरमध्ये समाविष्ट आहे आणि तुमच्या कोडमध्ये संदर्भित आहे, अंमलात आणण्यासाठी तयार आहे.
 
 ### अंमलात आणण्यासाठी टक्कर नियम
 
 **गेम यांत्रिकी जोडण्यासाठी:**
 1. **लेसर शत्रूला हिट करते**: लेसर प्रोजेक्टाइलने हिट केल्यावर शत्रू ऑब्जेक्ट नष्ट होतो
 2. **लेसर स्क्रीनच्या सीमेला हिट करते**: स्क्रीनच्या वरच्या कडावर पोहोचल्यावर लेसर काढून टाकला जातो
-3. **शत्रू आणि हिरो टक्कर**: छेदन झाल्यावर दोन्ही वस्तू नष्ट होतात
+3. **शत्रू आणि हिरो टक्कर**: दोन्ही वस्तू एकमेकांना छेदल्यावर नष्ट होतात
 4. **शत्रू तळाशी पोहोचतो**: शत्रू स्क्रीनच्या तळाशी पोहोचल्यावर गेम ओव्हर स्थिती
 
+### 🔄 **शैक्षणिक तपासणी**
+**टक्कर शोधण्याचा पाया**: अंमलात आणण्यापूर्वी, सुनिश्चित करा की तुम्हाला समजते:
+- ✅ आयताच्या सीमा टक्कर झोन कसे परिभाषित करतात
+- ✅ विभाजन चाचणी इंटरसेक्शन गणनेपेक्षा अधिक कार्यक्षम का आहे
+- ✅ गेम लूपमध्ये ऑब्जेक्ट्सचे जीवनचक्र व्यवस्थापन का महत्त्वाचे आहे
+- ✅ टक्कर प्रतिसाद समन्वयित करण्यासाठी इव्हेंट-ड्रिव्हन सिस्टम कसे कार्य करते
+
+**जलद स्व-परीक्षण**: जर तुम्ही ऑब्जेक्ट्स त्वरित हटवले तर काय होईल?
+*उत्तर: मिड-लूप हटवणे क्रॅश होऊ शकते किंवा पुनरावृत्तीत ऑब्जेक्ट्स वगळू शकते*
+
+**भौतिकशास्त्र समजणे**: तुम्हाला आता समजले आहे:
+- **समन्वय प्रणाली**: स्थान आणि परिमाण सीमा कशा तयार करतात
+- **इंटरसेक्शन लॉजिक**: टक्कर शोधण्यामागील गणितीय तत्त्वे
+- **कामगिरी ऑप्टिमायझेशन**: रिअल-टाइम सिस्टममध्ये कार्यक्षम अल्गोरिदम का महत्त्वाचे आहेत
+- **मेमरी व्यवस्थापन**: स्थिरतेसाठी सुरक्षित ऑब्जेक्ट जीवनचक्र पॅटर्न
+
 ## तुमचे विकास वातावरण सेट करणे
 
-चांगली बातमी - आम्ही तुमच्यासाठी आधीच बहुतेक तयारी केली आहे! तुमच्या सर्व गेम अ‍ॅसेट्स आणि मूलभूत रचना `your-work` सबफोल्डरमध्ये तयार आहेत, थंड टक्कर वैशिष्ट्ये जोडण्यासाठी तयार आहेत.
+चांगली बातमी - आम्ही तुमच्यासाठी बहुतेक तयारी आधीच केली आहे! तुमचे सर्व गेम अॅसेट्स आणि मूलभूत रचना `your-work` सबफोल्डरमध्ये आहेत, थंड टक्कर वैशिष्ट्ये जोडण्यासाठी तयार आहेत.
 
 ### प्रकल्प रचना
 
@@ -182,8 +338,8 @@ class Weapon {
 ```
 
 **फाइल संरचना समजून घेणे:**
-- **सामाविष्ट करते** गेम ऑब्जेक्ट्ससाठी आवश्यक असलेले सर्व स्प्राइट प्रतिमा
-- **समाविष्ट करते** मुख्य HTML दस्तऐवज आणि जावास्क्रिप्ट अ‍ॅप्लिकेशन फाइल
+- **समाविष्ट करते** गेम ऑब्जेक्ट्ससाठी आवश्यक सर्व स्प्राइट प्रतिमा
+- **समाविष्ट करते** मुख्य HTML दस्तऐवज आणि जावास्क्रिप्ट अनुप्रयोग फाइल
 - **प्रदान करते** स्थानिक विकास सर्व्हरसाठी पॅकेज कॉन्फिगरेशन
 
 ### विकास सर्व्हर सुरू करणे
@@ -195,17 +351,43 @@ cd your-work
 npm start
 ```
 
-**ही कमांड अनुक्रमिका:**
+**ही कमांड अनुक्रम:**
 - **डायरेक्टरी बदलते** तुमच्या कार्यरत प्रकल्प फोल्डरमध्ये
 - **स्थानिक HTTP सर्व्हर सुरू करते** `http://localhost:5000` वर
 - **तुमच्या गेम फाइल्स सर्व्ह करते** चाचणी आणि विकासासाठी
-- **सक्षम करते** स्वयंचलित रीलोडिंगसह थेट विकास
+- **लाइव्ह विकास सक्षम करते** स्वयंचलित रीलोडिंगसह
 
-तुमच्या ब्राउझरमध्ये `http://localhost:5000` उघडा आणि हिरो आणि शत्रू स्क्रीनवर रेंडर केलेले तुमचे चालू गेम स्टेट पहा.
+तुमच्या ब्राउझरमध्ये `http://localhost:5000` वर जा आणि हिरो आणि शत्रू स्क्रीनवर रेंडर केलेले तुमचे चालू गेम स्टेट पहा.
 
 ### टप्प्याटप्प्याने अंमलबजावणी
 
-नासा कसे व्हॉयेजर अंतराळ यान प्रोग्राम करण्यासाठी पद्धतशीर दृष्टिकोन वापरले, तसेच आम्ही टक्कर शोधणे पद्धतशीरपणे अंमलात आणू, प्रत्येक घटक टप्प्याटप्प्याने तयार करू.
+नासाने व्हॉयजर अंतराळ यान प्रोग्राम करण्यासाठी वापरलेल्या पद्धतशीर दृष्टिकोनासारखे, आम्ही टक्कर शोधणे पद्धतशीरपणे अंमलात आणू, प्रत्येक घटक टप्प्याटप्प्याने तयार करू.
+
+```mermaid
+flowchart TD
+    A["1. Rectangle Bounds"] --> B["2. Intersection Detection"]
+    B --> C["3. Laser System"]
+    C --> D["4. Event Handling"]
+    D --> E["5. Collision Rules"]
+    E --> F["6. Cooldown System"]
+    
+    G["Object Boundaries"] --> A
+    H["Physics Algorithm"] --> B
+    I["Projectile Creation"] --> C
+    J["Keyboard Input"] --> D
+    K["Game Logic"] --> E
+    L["Rate Limiting"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 #### 1. आयत टक्कर सीमा जोडा
 
@@ -224,13 +406,13 @@ rectFromGameObject() {
 
 **ही पद्धत साध्य करते:**
 - **तयार करते** अचूक सीमा समन्वयांसह आयत ऑब्जेक्ट
-- **खालचा आणि उजवा कडा गणना करते** स्थान प्लस परिमाणे वापरून
+- **तळ आणि उजवे कडे गणना करते** स्थान आणि परिमाण वापरून
 - **परत करते** टक्कर शोध अल्गोरिदमसाठी तयार ऑब्जेक्ट
-- **सर्व गेम ऑब्जेक्ट्ससाठी मानक इंटरफेस प्रदान करते
+- **सर्व गेम ऑब्जेक्ट्ससाठी मानक इंटरफेस प्रदान करते**
 
-#### 2. छेदन शोध अंमलात आणा
+#### 2. इंटरसेक्शन शोध अंमलात आणा
 
-आता आपला टक्कर शोधक तयार करूया - एक फंक्शन जे सांगू शकते की दोन आयत ओव्हरलॅप होत आहेत की नाही:
+आता आपण टक्कर शोधण्याचा गुप्तहेर तयार करूया - एक फंक्शन जे दोन आयत ओव्हरलॅप होत आहेत की नाही हे सांगू शकते:
 
 ```javascript
 function intersectRect(r1, r2) {
@@ -247,11 +429,11 @@ function intersectRect(r1, r2) {
 - **चाचणी घेतो** आयतांमधील चार विभाजन अटी
 - **`false` परत करते** जर कोणतीही विभाजन अट खरी असेल
 - **टक्कर सूचित करते** जेव्हा कोणतेही विभाजन अस्तित्वात नसते
-- **कार्यक्षम छेदन चाचणीसाठी** नकारात्मक तर्क वापरतो
+- **कार्यक्षम इंटरसेक्शन चाचणीसाठी नकारात्मक तर्क वापरतो**
 
 #### 3. लेसर फायरिंग प्रणाली अंमलात आणा
 
-येथे गोष्टी रोमांचक होतात! लेसर फायरिंग प्रणाली सेट करूया.
+येथे गोष्टी रोमांचक होतात! चला लेसर फायरिंग प्रणाली सेट करूया.
 
 ##### संदेश स्थिरांक
 
@@ -264,7 +446,7 @@ COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
 ```
 
 **हे स्थिरांक प्रदान करतात:**
-- **अ‍ॅप्लिकेशनमध्ये इव्हेंट नावे प्रमाणित करतात**
+- **अर्जभर इव्हेंट नावे मानकीकृत करतात**
 - **गेम सिस्टम्समधील सुसंगत संवाद सक्षम करतात**
 - **इव्हेंट हँडलर नोंदणीमध्ये टायपो टाळतात**
 
@@ -280,12 +462,12 @@ COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
 
 **हा इनपुट हँडलर:**
 - **स्पेस की प्रेस शोधतो** keyCode 32 वापरून
-- **प्रमाणित इव्हेंट संदेश प्रसारित करतो**
+- **मानकीकृत इव्हेंट संदेश प्रसारित करतो**
 - **डिकपल्ड फायरिंग लॉजिक सक्षम करतो**
 
 ##### इव्हेंट लिसनर सेटअप
 
-तुमच्या `initGame()` फंक्शनमध्ये फायरिंग वर्तन नोंदवा:
+तुमच्या `initGame()` फंक्शनमध्ये फायरिंग वर्तन नोंदणी करा:
 
 ```javascript
 eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
@@ -298,9 +480,9 @@ eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
 **हा इव्हेंट लिसनर:**
 - **स्पेस की इव्हेंट्सला प्रतिसाद देतो**
 - **फायरिंग कूलडाउन स्थिती तपासतो**
-- **परवानगी असल्यास लेसर तयार करणे ट्रिगर करतो**
+- **परवानगी दिल्यास लेसर तयार करणे ट्रिगर करते**
 
-लेसर-शत्रू परस्परसंवादांसाठी टक्कर हाताळणी जोडा:
+लेसर-शत्रू परस्परसंवादासाठी टक्कर हाताळणी जोडा:
 
 ```javascript
 eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -309,14 +491,14 @@ eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
 });
 ```
 
-**हा टक्कर हँडलर:**
-- **दोन्ही वस्तूंसह टक्कर इव्हेंट डेटा प्राप्त करतो**
-- **दोन्ही वस्तूंना काढून टाकण्यासाठी चिन्हांकित करतो**
-- **टक्कर नंतर योग्य साफसफाई सुनिश्चित करतो**
+**ही टक्कर हाताळणी:**
+- **दोन्ही वस्तूंसह टक्कर इव्हेंट डेटा प्राप्त करते**
+- **दोन्ही वस्तूंना काढून टाकण्यासाठी चिन्हांकित करते**
+- **टक्करनंतर योग्य साफसफाई सुनिश्चित करते**
 
 #### 4. लेसर वर्ग तयार करा
 
-एक लेसर प्रोजेक्टाइल अंमलात आणा जे वर हलते आणि त्याचे स्वतःचे जीवनचक्र व्यवस्थापित करते:
+वरच्या दिशेने हलणारे आणि त्याचे स्वतःचे जीवनचक्र व्यवस्थापित करणारे लेसर प्रोजेक्टाइल अंमलात आणा:
 
 ```javascript
 class Laser extends GameObject {
@@ -339,12 +521,12 @@ class Laser extends GameObject {
 }
 ```
 
-**हा वर्ग अंमलबजावणी:**
+**हा वर्ग अंमलात आणणे:**
 - **GameObject विस्तारित करते** मूलभूत कार्यक्षमता वारसा मिळवण्यासाठी
 - **लेसर स्प्राइटसाठी योग्य परिमाण सेट करते**
-- **`setInterval()` वापरून स्वयंचलित वर हलणे तयार करते**
+- **`setInterval()` वापरून स्वयंचलित वरच्या दिशेने हालचाल तयार करते**
 - **स्क्रीन टॉपवर पोहोचल्यावर स्वतःचा नाश हाताळतो**
-- **त्याचे स्वतःचे अ‍ॅनिमेशन टाइमिंग आणि साफसफाई व्यवस्थापित करते**
+- **त्याचे स्वतःचे अॅनिमेशन टाइमिंग आणि साफसफाई व्यवस्थापित करते**
 
 #### 5. टक्कर शोध प्रणाली अंमलात आणा
 
@@ -373,65 +555,149 @@ function updateGameObjects() {
 ```
 
 **ही टक्कर प्रणाली:**
-- **प्रकारानुसार गेम ऑब्जेक्ट्स फिल्टर करते** कार्यक्षम चाचणीसाठी
-- **प्रत्येक लेसर प्रत्येक शत्रूवर छेदनांसाठी चाचणी करते**
-- **छेदन आढळल्यावर टक्कर इव्हेंट्स प्रसारित करते**
-- **टक्कर प्रक्रिया केल्यानंतर नष्ट झालेल्या वस्तू साफ करते**
+- **टेस्टिंगसाठी प्रकारानुसार गेम ऑब्जेक्ट्स फिल्टर करते**
+- **प्रत्येक लेसर प्रत्येक शत्रूविरुद्ध इंटरसेक्शनसाठी चाचणी करते**
+- **इंटरसेक्शन आढळल्य
+- [ ] रिअल-टाइममध्ये टक्कर घटना ट्रॅक करण्यासाठी `console.log` स्टेटमेंट्स जोडा
+
+### 🎯 **या तासात तुम्ही काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि टक्कर शोधण्याचे अल्गोरिदम समजून घ्या
+- [ ] टक्कर झाल्यावर स्फोटासारखे व्हिज्युअल इफेक्ट्स जोडा
+- [ ] वेगवेगळ्या गुणधर्मांसह विविध प्रकारचे प्रोजेक्टाइल्स लागू करा
+- [ ] खेळाडूंच्या क्षमतेत तात्पुरती सुधारणा करणारे पॉवर-अप्स तयार करा
+- [ ] टक्कर अधिक समाधानकारक बनवण्यासाठी साउंड इफेक्ट्स जोडा
+
+### 📅 **तुमचे आठवडाभराचे फिजिक्स प्रोग्रामिंग**
+- [ ] पॉलिश केलेल्या टक्कर प्रणालीसह संपूर्ण स्पेस गेम पूर्ण करा
+- [ ] आयतांव्यतिरिक्त प्रगत टक्कर आकार लागू करा (गोल, बहुभुज)
+- [ ] वास्तववादी स्फोट प्रभावांसाठी पार्टिकल सिस्टम्स जोडा
+- [ ] टक्कर टाळण्यासाठी जटिल शत्रूंचे वर्तन तयार करा
+- [ ] अनेक वस्तूंसह चांगल्या कार्यक्षमतेसाठी टक्कर शोधणे ऑप्टिमाइझ करा
+- [ ] गती आणि वास्तववादी हालचालीसारखे फिजिक्स सिम्युलेशन जोडा
+
+### 🌟 **तुमचे महिनाभराचे गेम फिजिक्स मास्टरी**
+- [ ] प्रगत फिजिक्स इंजिन्स आणि वास्तववादी सिम्युलेशन्ससह गेम्स तयार करा
+- [ ] 3D टक्कर शोधणे आणि स्पेशल पार्टिशनिंग अल्गोरिदम शिकणे
+- [ ] ओपन सोर्स फिजिक्स लायब्ररी आणि गेम इंजिन्समध्ये योगदान द्या
+- [ ] ग्राफिक्स-इंटेन्सिव्ह अॅप्लिकेशन्ससाठी कार्यक्षमता ऑप्टिमायझेशन मास्टर करा
+- [ ] गेम फिजिक्स आणि टक्कर शोधण्याबद्दल शैक्षणिक सामग्री तयार करा
+- [ ] प्रगत फिजिक्स प्रोग्रामिंग कौशल्ये दर्शविणारे पोर्टफोलिओ तयार करा
+
+## 🎯 तुमचे टक्कर शोधण्याचे मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title Collision Detection & Game Physics Learning Progression
+    
+    section Foundation (10 minutes)
+        Rectangle Math: Coordinate systems
+                      : Boundary calculations
+                      : Position tracking
+                      : Dimension management
+        
+    section Algorithm Design (20 minutes)
+        Intersection Logic: Separation testing
+                          : Overlap detection
+                          : Performance optimization
+                          : Edge case handling
+        
+    section Game Implementation (30 minutes)
+        Object Systems: Lifecycle management
+                      : Event coordination
+                      : State tracking
+                      : Memory cleanup
+        
+    section Interactive Features (40 minutes)
+        Combat Mechanics: Projectile systems
+                        : Weapon cooldowns
+                        : Damage calculation
+                        : Visual feedback
+        
+    section Advanced Physics (50 minutes)
+        Real-time Systems: Frame rate optimization
+                         : Spatial partitioning
+                         : Collision response
+                         : Physics simulation
+        
+    section Professional Techniques (1 week)
+        Game Engine Concepts: Component systems
+                             : Physics pipelines
+                             : Performance profiling
+                             : Cross-platform optimization
+        
+    section Industry Applications (1 month)
+        Production Skills: Large-scale optimization
+                         : Team collaboration
+                         : Engine development
+                         : Platform deployment
+```
 
-> ⚠️ **महत्त्वाचे**: तुमच्या मुख्य गेम लूपमध्ये `window.onload` मध्ये `updateGameObjects()` जोडा टक्कर शोधणे सक्षम करण्यासाठी.
+### 🛠️ तुमचे गेम फिजिक्स टूलकिट सारांश
 
-#### 6. हिरो वर्गात कूलडाउन प्रणाली जोडा
+या लेसननंतर, तुम्ही आता मास्टर केले आहे:
+- **टक्कर गणित**: आयत इंटरसेक्शन अल्गोरिदम आणि कोऑर्डिनेट सिस्टम्स
+- **कार्यक्षमता ऑप्टिमायझेशन**: रिअल-टाइम अॅप्लिकेशन्ससाठी कार्यक्षम टक्कर शोधणे
+- **ऑब्जेक्ट लाइफसायकल व्यवस्थापन**: सुरक्षित निर्मिती, अपडेटिंग आणि नष्ट करण्याचे पॅटर्न्स
+- **इव्हेंट-ड्रिव्हन आर्किटेक्चर**: टक्कर प्रतिसादासाठी डिस्कपल्ड सिस्टम्स
+- **गेम लूप इंटिग्रेशन**: फ्रेम-आधारित फिजिक्स अपडेट्स आणि रेंडरिंग समन्वय
+- **इनपुट सिस्टम्स**: दर मर्यादित आणि फीडबॅकसह प्रतिसादात्मक नियंत्रण
+- **मेमरी व्यवस्थापन**: कार्यक्षम ऑब्जेक्ट पूलिंग आणि क्लीनअप स्ट्रॅटेजीज
 
-फायरिंग यांत्रिकी आणि दर मर्यादेसह हिरो वर्ग वाढवा:
+**वास्तविक-जगातील अनुप्रयोग**: तुमचे टक्कर शोधण्याचे कौशल्य थेट लागू होते:
+- **इंटरॅक्टिव्ह सिम्युलेशन्स**: वैज्ञानिक मॉडेलिंग आणि शैक्षणिक साधने
+- **यूजर इंटरफेस डिझाइन**: ड्रॅग-आणि-ड्रॉप इंटरॅक्शन आणि टच शोधणे
+- **डेटा व्हिज्युअलायझेशन**: इंटरॅक्टिव्ह चार्ट्स आणि क्लिक करण्यायोग्य घटक
+- **मोबाइल डेव्हलपमेंट**: टच जेस्चर ओळख आणि टक्कर हाताळणे
+- **रोबोटिक्स प्रोग्रामिंग**: पथ नियोजन आणि अडथळा टाळणे
+- **कंप्युटर ग्राफिक्स**: रे ट्रेसिंग आणि स्पेशल अल्गोरिदम्स
 
-```javascript
-class Hero extends GameObject {
-  constructor(x, y) {
-    super(x, y);
-    this.width = 99;
-    this.height = 75;
-    this.type = "Hero";
-    this.speed = { x: 0, y: 0 };
-    this.cooldown = 0;
-  }
-  
-  fire() {
-    gameObjects.push(new Laser(this.x + 45, this.y - 10));
-    this.cooldown = 500;
+**प्रोफेशनल कौशल्ये मिळवली**: तुम्ही आता करू शकता:
+- **डिझाइन** रिअल-टाइम टक्कर शोधण्यासाठी कार्यक्षम अल्गोरिदम्स
+- **अंमलात आणा** ऑब्जेक्ट्सच्या जटिलतेसह स्केल होणारी फिजिक्स सिस्टम्स
+- **डिबग** गणितीय तत्त्वांचा वापर करून जटिल इंटरॅक्शन सिस्टम्स
+- **ऑप्टिमाइझ** विविध हार्डवेअर आणि ब्राउझर क्षमतांसाठी कार्यक्षमता
+- **आर्किटेक्ट** सिद्ध डिझाइन पॅटर्न्स वापरून टिकाऊ गेम सिस्टम्स
 
-    let id = setInterval(() => {
-      if (this.cooldown > 0) {
-        this.cooldown -= 100;
-      } else {
-        clearInterval(id);
-      }
-    }, 200);
-  }
-  
-  canFire() {
-    return this.cooldown === 0;
-  }
-}
-```
+**गेम डेव्हलपमेंट संकल्पना मास्टर केल्या**:
+- **फिजिक्स सिम्युलेशन**: रिअल-टाइम टक्कर शोधणे आणि प्रतिसाद
+- **कार्यक्षमता अभियांत्रिकी**: इंटरॅक्टिव्ह अॅप्लिकेशन्ससाठी ऑप्टिमाइझ केलेले अल्गोरिदम्स
+- **इव्हेंट सिस्टम्स**: गेम घटकांमधील डिस्कपल्ड कम्युनिकेशन
+- **ऑब्जेक्ट व्यवस्थापन**: डायनॅमिक कंटेंटसाठी कार्यक्षम लाइफसायकल पॅटर्न्स
+- **इनपुट हाताळणी**: योग्य फीडबॅकसह प्रतिसादात्मक नियंत्रण
+
+**पुढील स्तर**: तुम्ही आता Matter.js सारख्या प्रगत फिजिक्स इंजिन्स एक्सप्लोर करण्यासाठी, 3D टक्कर शोधणे लागू करण्यासाठी किंवा जटिल पार्टिकल सिस्टम्स तयार करण्यासाठी तयार आहात!
+
+🌟 **अचिव्हमेंट अनलॉक**: तुम्ही व्यावसायिक-ग्रेड टक्कर शोधण्यासह संपूर्ण फिजिक्स-आधारित इंटरॅक्शन सिस्टम तयार केले आहे!
+
+## GitHub Copilot Agent Challenge 🚀
+
+Agent मोड वापरून खालील चॅलेंज पूर्ण करा:
+
+**वर्णन:** टक्कर शोधण्याच्या प्रणालीला सुधारित करा ज्यामध्ये पॉवर-अप्स समाविष्ट आहेत जे रँडमली स्पॉन होतात आणि हिरो शिपने गोळा केल्यावर तात्पुरत्या क्षमतेची ऑफर देतात.
+
+**प्रॉम्प्ट:** PowerUp वर्ग तयार करा जो GameObject ला विस्तारतो आणि हिरो आणि पॉवर-अप्स यांच्यात टक्कर शोधणे लागू करा. किमान दोन प्रकारचे पॉवर-अप्स जोडा: एक जो फायर रेट वाढवतो (कूलडाउन कमी करतो) आणि दुसरा जो तात्पुरता शील्ड तयार करतो. पॉवर-अप्स रँडम अंतर आणि स्थानांवर तयार करणारी स्पॉन लॉजिक समाविष्ट करा.
+
+---
+
+
+
+## 🚀 चॅलेंज
+
+स्फोट जोडा! [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) मधील गेम अॅसेट्स पहा आणि लेसर एलियनला हिट करताच स्फोट जोडण्याचा प्रयत्न करा
+
+## पोस्ट-लेसन क्विझ
+
+[पोस्ट-लेसन क्विझ](https://ff-quizzes.netlify.app/web/quiz/36)
 
-**वाढवलेल्या हिरो वर्गाचे समजून घेणे:**
-- **कूलडाउन टाइमर शून्यावर प्रारंभ करते** (फायर करण्यासाठी तयार)
-- **हिरो जहाजाच्या वर स्थित लेसर ऑब्जेक्ट तयार करते**
-- **जलद फायरिंग रोखण्यासाठी कूलडाउन कालावधी सेट करते**
-- **इंटरव्हल-आधारित अद्यतनांचा वापर करून कूलडाउन टाइमर कमी करते**
-- **`canFire()` पद्धतीद्वारे फायरिंग स्थिती तपासणी प्रदान करते**
+## पुनरावलोकन आणि स्व-अभ्यास
 
-### तुमची अंमलबजावणी चाचणी करणे
+तुमच्या गेममधील अंतरांवर प्रयोग करा. तुम्ही त्यांना बदलल्यास काय होते? [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) बद्दल अधिक वाचा.
 
-तुमच्या स्पेस गेममध्ये आता पूर्ण टक्कर शोधणे आणि कॉम्बॅट यांत्रिकी आहेत. 🚀 या नवीन क्षमता चाचणी करा:
-- **नेव्हिगेट करा** बाण कीजसह हालचाल नियंत्रण सत्यापित करण्यासाठी
-- **लेसर फायर करा** स्पेसबारसह - कूलडाउन स्पॅम-क्लिकिंग कसे रोखते ते पहा
-- **टक्कर निरीक्षण करा** जेव्हा लेसर शत्रूंना हिट करतात, काढून टाकणे ट्रिगर करतात
-- **साफसफाई सत्यापित करा** नष्ट झालेल्या वस्तू गेममधून गायब झाल्यामुळे
+## असाइनमेंट
 
-तुम्ही अंतराळ यान नेव्हिगेशन आणि रोबोटिक्स मार्गदर्शन करणाऱ्या
+[टक्कर एक्सप्लोर करा](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/6-space-game/5-keeping-score/README.md b/translations/mr/6-space-game/5-keeping-score/README.md
index d995e0a44a..fd89af4f06 100644
--- a/translations/mr/6-space-game/5-keeping-score/README.md
+++ b/translations/mr/6-space-game/5-keeping-score/README.md
@@ -1,23 +1,90 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d642759cf1542f554871f74956a59af9",
-  "translation_date": "2025-10-22T16:34:03+00:00",
+  "original_hash": "2ed9145a16cf576faa2a973dff84d099",
+  "translation_date": "2025-11-03T15:03:26+00:00",
   "source_file": "6-space-game/5-keeping-score/README.md",
   "language_code": "mr"
 }
 -->
-# स्पेस गेम तयार करा भाग ५: स्कोरिंग आणि जीवन
+# स्पेस गेम तयार करा भाग ५: स्कोअरिंग आणि जीवन
+
+```mermaid
+journey
+    title Your Game Design Journey
+    section Player Feedback
+      Understand scoring psychology: 3: Student
+      Learn visual communication: 4: Student
+      Design reward systems: 4: Student
+    section Technical Implementation
+      Canvas text rendering: 4: Student
+      State management: 5: Student
+      Event-driven updates: 5: Student
+    section Game Polish
+      User experience design: 5: Student
+      Balance challenge and reward: 5: Student
+      Create engaging gameplay: 5: Student
+```
 
 ## प्री-लेक्चर क्विझ
 
 [प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/37)
 
-तुमचा स्पेस गेम खऱ्या गेमसारखा वाटेल असं तयार करण्यासाठी तयार आहात का? चला, स्कोरिंग पॉइंट्स आणि जीवन व्यवस्थापन जोडूया - मुख्य यांत्रिकी ज्यामुळे स्पेस इनव्हेडर्ससारखे सुरुवातीचे आर्केड गेम्स साध्या डेमोमधून व्यसनाधीन मनोरंजनात बदलले. यामुळे तुमचा गेम खऱ्या अर्थाने खेळण्यायोग्य होतो.
+तुमचा स्पेस गेम खऱ्या गेमसारखा वाटेल असं तयार करायला तयार आहात का? चला, स्कोअरिंग पॉइंट्स आणि जीवन व्यवस्थापन जोडूया - मुख्य यांत्रिकी ज्यामुळे स्पेस इनव्हेडर्ससारखे सुरुवातीचे आर्केड गेम्स साध्या प्रदर्शनांपासून व्यसनमुक्त मनोरंजनात बदलले. यामुळे तुमचा गेम खरोखर खेळण्यायोग्य होतो.
+
+```mermaid
+mindmap
+  root((Game Feedback Systems))
+    Visual Communication
+      Text Rendering
+      Icon Display
+      Color Psychology
+      Layout Design
+    Scoring Mechanics
+      Point Values
+      Reward Timing
+      Progress Tracking
+      Achievement Systems
+    Life Management
+      Risk vs Reward
+      Player Agency
+      Difficulty Balance
+      Recovery Mechanics
+    User Experience
+      Immediate Feedback
+      Clear Information
+      Emotional Response
+      Engagement Loops
+    Implementation
+      Canvas API
+      State Management
+      Event Systems
+      Performance
+```
 
 ## स्क्रीनवर मजकूर काढणे - तुमच्या गेमचा आवाज
 
-तुमचा स्कोअर दाखवण्यासाठी, कॅनव्हासवर मजकूर रेंडर कसा करायचा हे शिकणे आवश्यक आहे. `fillText()` पद्धत तुमचं मुख्य साधन आहे - क्लासिक आर्केड गेम्समध्ये स्कोअर आणि स्टेटस माहिती दाखवण्यासाठी याच तंत्राचा वापर केला जातो.
+तुमचा स्कोअर दाखवण्यासाठी, आम्हाला कॅनव्हासवर मजकूर रेंडर कसा करायचा ते शिकावे लागेल. `fillText()` पद्धत तुमचं मुख्य साधन आहे - क्लासिक आर्केड गेम्समध्ये स्कोअर आणि स्थिती माहिती दाखवण्यासाठी याच तंत्राचा वापर केला जातो.
+
+```mermaid
+flowchart LR
+    A["📝 Text Content"] --> B["🎨 Styling"]
+    B --> C["📍 Positioning"]
+    C --> D["🖼️ Canvas Render"]
+    
+    E["Font Family"] --> B
+    F["Font Size"] --> B
+    G["Color"] --> B
+    H["Alignment"] --> B
+    
+    I["X Coordinate"] --> C
+    J["Y Coordinate"] --> C
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
 
 तुमच्याकडे मजकूराच्या स्वरूपावर पूर्ण नियंत्रण आहे:
 
@@ -28,24 +95,76 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ [कॅनव्हासवर मजकूर जोडणे](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) यावर अधिक सखोल जा - तुम्ही फॉन्ट्स आणि स्टाइलिंगसह किती सर्जनशील होऊ शकता याबद्दल तुम्हाला आश्चर्य वाटेल!
+✅ [कॅनव्हासवर मजकूर जोडण्याबद्दल](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) अधिक सखोल माहिती मिळवा - तुम्ही फॉन्ट्स आणि स्टाइलिंगसह किती सर्जनशील होऊ शकता याबद्दल तुम्हाला आश्चर्य वाटेल!
 
 ## जीवन - फक्त एक संख्या नाही
 
 गेम डिझाइनमध्ये, "जीवन" खेळाडूच्या चुका करण्याच्या मर्यादेचे प्रतिनिधित्व करते. ही संकल्पना पिनबॉल मशीनपासून सुरू झाली, जिथे तुम्हाला खेळण्यासाठी अनेक बॉल्स मिळायचे. अ‍ॅस्टरॉइड्ससारख्या सुरुवातीच्या व्हिडिओ गेम्समध्ये, जीवन खेळाडूंना धोका पत्करण्याची आणि चुका करून शिकण्याची परवानगी देत असे.
 
-दृश्य प्रतिनिधित्व खूप महत्त्वाचे आहे - "Lives: 3" फक्त मजकूर दाखवण्याऐवजी जहाजाच्या आयकॉन दाखवणे त्वरित दृश्य ओळख निर्माण करते, जसे की सुरुवातीच्या आर्केड कॅबिनेट्सने भाषा अडथळ्यांवर संवाद साधण्यासाठी आयकॉनोग्राफीचा वापर केला.
+```mermaid
+flowchart TD
+    A["🎮 Player Action"] --> B{"Risk Assessment"}
+    
+    B --> C["High Risk, High Reward"]
+    B --> D["Safe Strategy"]
+    
+    C --> E{"Outcome"}
+    D --> F["Steady Progress"]
+    
+    E -->|Success| G["🏆 Big Points"]
+    E -->|Failure| H["💔 Lose Life"]
+    
+    H --> I{"Lives Remaining?"}
+    I -->|Yes| J["🔄 Try Again"]
+    I -->|No| K["💀 Game Over"]
+    
+    J --> B
+    G --> B
+    F --> B
+    
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+    style G fill:#e3f2fd
+    style H fill:#fff3e0
+```
+
+दृश्य प्रतिनिधित्व खूप महत्त्वाचे आहे - फक्त "Lives: 3" ऐवजी जहाजाच्या आयकॉन दाखवणे त्वरित दृश्य ओळख निर्माण करते, जसे की सुरुवातीच्या आर्केड कॅबिनेट्सने भाषा अडथळ्यांवर संवाद साधण्यासाठी आयकॉनोग्राफीचा वापर केला.
 
-## तुमच्या गेमचा रिवॉर्ड सिस्टम तयार करणे
+## तुमच्या गेमचा बक्षीस प्रणाली तयार करणे
 
-आता आपण मुख्य फीडबॅक सिस्टम लागू करू जे खेळाडूंना गुंतवून ठेवतात:
+आता आपण कोर फीडबॅक सिस्टम्स लागू करू जे खेळाडूंना गुंतवून ठेवतात:
+
+```mermaid
+sequenceDiagram
+    participant Player
+    participant GameEngine
+    participant ScoreSystem
+    participant LifeSystem
+    participant Display
+    
+    Player->>GameEngine: Shoots Enemy
+    GameEngine->>ScoreSystem: Award Points
+    ScoreSystem->>ScoreSystem: +100 points
+    ScoreSystem->>Display: Update Score
+    
+    Player->>GameEngine: Collides with Enemy
+    GameEngine->>LifeSystem: Lose Life
+    LifeSystem->>LifeSystem: -1 life
+    LifeSystem->>Display: Update Lives
+    
+    alt Lives > 0
+        LifeSystem->>Player: Continue Playing
+    else Lives = 0
+        LifeSystem->>GameEngine: Game Over
+    end
+```
 
-- **स्कोरिंग सिस्टम**: प्रत्येक नष्ट केलेल्या शत्रूच्या जहाजासाठी १०० पॉइंट्स मिळतात (गोल संख्या खेळाडूंना मानसिक गणना करणे सोपे करते). स्कोअर तळाच्या डाव्या कोपऱ्यात दिसेल.
-- **जीवन काउंटर**: तुमचा हिरो तीन जीवनांसह सुरू होतो - सुरुवातीच्या आर्केड गेम्सने आव्हान आणि खेळण्यायोग्यता संतुलित करण्यासाठी स्थापित केलेला मानक. प्रत्येक शत्रूशी झालेल्या टक्करमुळे एक जीवन कमी होते. उर्वरित जीवन तळाच्या उजव्या बाजूला जहाजाच्या आयकॉनद्वारे दाखवले जाईल ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.mr.png).
+- **स्कोअरिंग सिस्टम**: प्रत्येक नष्ट केलेल्या शत्रूच्या जहाजासाठी १०० गुण दिले जातात (गोल संख्या खेळाडूंना मानसिक गणना करणे सोपे करते). स्कोअर तळाच्या डाव्या कोपऱ्यात दिसेल.
+- **जीवन काउंटर**: तुमचा हिरो तीन जीवनांसह सुरू होतो - सुरुवातीच्या आर्केड गेम्सने आव्हान आणि खेळण्यायोग्यता संतुलित करण्यासाठी स्थापित केलेला मानक. प्रत्येक शत्रूशी टक्कर झाल्यावर एक जीवन कमी होते. उर्वरित जीवन तळाच्या उजव्या कोपऱ्यात जहाजाच्या आयकॉनद्वारे दाखवले जातील ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.mr.png).
 
 ## चला तयार करूया!
 
-प्रथम, तुमचं वर्कस्पेस सेट करा. तुमच्या `your-work` सब फोल्डरमधील फाइल्सकडे जा. तुम्हाला या फाइल्स दिसायला हव्यात:
+प्रथम, तुमचं कार्यक्षेत्र सेट करा. `your-work` सब फोल्डरमधील फाइल्समध्ये जा. तुम्हाला या फाइल्स दिसायला हव्यात:
 
 ```bash
 -| assets
@@ -57,24 +176,50 @@ ctx.fillText("show this on the screen", 0, 0);
 -| package.json
 ```
 
-तुमचा गेम टेस्ट करण्यासाठी, `your_work` फोल्डरमधून डेव्हलपमेंट सर्व्हर सुरू करा:
+तुमचा गेम तपासण्यासाठी, `your_work` फोल्डरमधून विकास सर्व्हर सुरू करा:
 
 ```bash
 cd your-work
 npm start
 ```
 
-हे `http://localhost:5000` वर लोकल सर्व्हर चालवते. तुमच्या ब्राउझरमध्ये हा पत्ता उघडा आणि तुमचा गेम पहा. अॅरो कीजसह कंट्रोल्स टेस्ट करा आणि शत्रूंवर शूट करण्याचा प्रयत्न करा की सर्व काही व्यवस्थित कार्य करते का ते तपासा.
+हे `http://localhost:5000` वर स्थानिक सर्व्हर चालवते. तुमच्या ब्राउझरमध्ये हा पत्ता उघडा आणि तुमचा गेम पहा. अॅरो कीजसह नियंत्रण तपासा आणि शत्रूंवर शूट करण्याचा प्रयत्न करा की सर्व काही कार्य करते का.
+
+```mermaid
+flowchart TD
+    A["1. Asset Loading"] --> B["2. Game Variables"]
+    B --> C["3. Collision Detection"]
+    C --> D["4. Hero Enhancement"]
+    D --> E["5. Display Functions"]
+    E --> F["6. Event Handlers"]
+    
+    G["Life Icon Image"] --> A
+    H["Score & Lives Tracking"] --> B
+    I["Hero-Enemy Intersections"] --> C
+    J["Points & Life Methods"] --> D
+    K["Text & Icon Rendering"] --> E
+    L["Reward & Penalty Logic"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
-### कोड लिहिण्याची वेळ आली!
+### कोड लिहिण्याची वेळ!
 
-1. **तुम्हाला आवश्यक असलेली दृश्यात्मक संसाधने मिळवा**. `solution/assets/` फोल्डरमधून `life.png` संसाधन तुमच्या `your-work` फोल्डरमध्ये कॉपी करा. नंतर `lifeImg` तुमच्या window.onload फंक्शनमध्ये जोडा:
+1. **तुम्हाला आवश्यक असलेली दृश्यात्मक संसाधने मिळवा**. `solution/assets/` फोल्डरमधून `life.png` संसाधन कॉपी करा आणि तुमच्या `your-work` फोल्डरमध्ये ठेवा. नंतर `lifeImg` तुमच्या window.onload फंक्शनमध्ये जोडा:
 
     ```javascript
     lifeImg = await loadTexture("assets/life.png");
     ```
 
-1. `lifeImg` तुमच्या अॅसेट्स लिस्टमध्ये जोडायला विसरू नका:
+1. `lifeImg` तुमच्या संसाधन यादीत जोडायला विसरू नका:
 
     ```javascript
     let heroImg,
@@ -84,9 +229,9 @@ npm start
     eventEmitter = new EventEmitter();
     ```
   
-2. **तुमच्या गेम व्हेरिएबल्स सेट करा**. तुमचा एकूण स्कोअर (० पासून सुरू) आणि उर्वरित जीवन (३ पासून सुरू) ट्रॅक करण्यासाठी काही कोड जोडा. हे स्क्रीनवर दाखवू जेणेकरून खेळाडूंना नेहमी त्यांची स्थिती माहित असेल.
+2. **तुमच्या गेम व्हेरिएबल्स सेट करा**. तुमचा एकूण स्कोअर (० पासून सुरू होणारा) आणि उर्वरित जीवन (३ पासून सुरू होणारे) ट्रॅक करण्यासाठी काही कोड जोडा. आम्ही हे स्क्रीनवर दाखवू जेणेकरून खेळाडूंना नेहमी त्यांची स्थिती माहित असेल.
 
-3. **कोलिजन डिटेक्शन लागू करा**. तुमच्या `updateGameObjects()` फंक्शनला विस्तारित करा जेणेकरून शत्रू तुमच्या हिरोशी टक्कर करत आहेत का ते शोधता येईल:
+3. **कोलिजन डिटेक्शन लागू करा**. तुमच्या `updateGameObjects()` फंक्शनला विस्तारित करा जेणेकरून शत्रू तुमच्या हिरोशी टक्कर घेतात तेव्हा ओळखता येईल:
 
     ```javascript
     enemies.forEach(enemy => {
@@ -98,7 +243,7 @@ npm start
     ```
 
 4. **तुमच्या हिरोमध्ये जीवन आणि पॉइंट ट्रॅकिंग जोडा**. 
-   1. **काउंटर प्रारंभ करा**. तुमच्या `Hero` क्लासमध्ये `this.cooldown = 0` च्या खाली जीवन आणि पॉइंट्स सेट करा:
+   1. **काउंटर प्रारंभ करा**. `this.cooldown = 0` च्या खाली तुमच्या `Hero` वर्गात, जीवन आणि पॉइंट्स सेट करा:
 
         ```javascript
         this.life = 3;
@@ -132,18 +277,34 @@ npm start
 
         ```
 
-   1. **हे सर्व तुमच्या गेम लूपमध्ये जोडा**. `updateGameObjects()` नंतर window.onload फंक्शनमध्ये हे फंक्शन्स जोडा:
+   1. **हे सर्व तुमच्या गेम लूपमध्ये जोडा**. `updateGameObjects()` नंतर हे फंक्शन्स तुमच्या window.onload फंक्शनमध्ये जोडा:
 
         ```javascript
         drawPoints();
         drawLife();
         ```
 
-1. **गेमचे परिणाम आणि रिवॉर्ड्स लागू करा**. आता आपण फीडबॅक सिस्टम जोडू जे खेळाडूंच्या कृतींना अर्थपूर्ण बनवतात:
+### 🔄 **शैक्षणिक तपासणी**
+**गेम डिझाइन समज**: परिणाम लागू करण्यापूर्वी, सुनिश्चित करा की तुम्हाला समजते:
+- ✅ दृश्यात्मक फीडबॅक खेळाडूंना गेमची स्थिती कशी सांगते
+- ✅ UI घटकांची सुसंगत जागा का उपयोगिता सुधारते
+- ✅ पॉइंट मूल्ये आणि जीवन व्यवस्थापनामागील मानसशास्त्र
+- ✅ कॅनव्हास मजकूर रेंडरिंग HTML मजकूरापेक्षा कसे वेगळे आहे
+
+**जलद स्व-परीक्षण**: आर्केड गेम्स सामान्यतः पॉइंट मूल्यांसाठी गोल संख्या का वापरतात?
+*उत्तर: गोल संख्या खेळाडूंना मानसिक गणना करणे सोपे करते आणि समाधानकारक मानसशास्त्रीय बक्षीस निर्माण करते*
+
+**वापरकर्ता अनुभव तत्त्वे**: तुम्ही आता लागू करत आहात:
+- **दृश्यात्मक श्रेणीक्रम**: महत्त्वाची माहिती प्रमुखपणे ठेवणे
+- **तत्काळ फीडबॅक**: खेळाडूच्या क्रियांसाठी रिअल-टाइम अपडेट्स
+- **संज्ञानात्मक भार**: सोपी, स्पष्ट माहिती सादरीकरण
+- **भावनिक डिझाइन**: आयकॉन आणि रंग जे खेळाडूशी कनेक्शन निर्माण करतात
 
-   1. **टक्कर झाल्यावर जीवन कमी होते**. प्रत्येक वेळी तुमचा हिरो शत्रूशी टक्कर घेतो, तुम्ही एक जीवन गमावले पाहिजे.
+1. **गेम परिणाम आणि बक्षीस लागू करा**. आता आपण फीडबॅक सिस्टम्स जोडू जे खेळाडूच्या क्रियांना अर्थपूर्ण बनवतात:
+
+   1. **टक्कर झाल्यावर जीवन कमी होते**. प्रत्येक वेळी तुमचा हिरो शत्रूशी टक्कर घेतो, तुम्ही एक जीवन गमवायला हवे.
    
-      तुमच्या `Hero` क्लासमध्ये हा मेथड जोडा:
+      तुमच्या `Hero` वर्गात ही पद्धत जोडा:
 
         ```javascript
         decrementLife() {
@@ -154,9 +315,9 @@ npm start
         }
         ```
 
-   2. **शत्रूंवर शूट केल्यावर पॉइंट्स मिळतात**. प्रत्येक यशस्वी हिटसाठी १०० पॉइंट्स मिळतात, जे अचूक शूटिंगसाठी त्वरित सकारात्मक फीडबॅक प्रदान करतात.
+   2. **शत्रूंवर शूट केल्यावर पॉइंट्स मिळतात**. प्रत्येक यशस्वी हिटसाठी १०० पॉइंट्स दिले जातात, अचूक शूटिंगसाठी त्वरित सकारात्मक फीडबॅक प्रदान करते.
 
-      तुमच्या Hero क्लासमध्ये हा इन्क्रिमेंट मेथड विस्तारित करा:
+      तुमच्या Hero वर्गात ही वाढीची पद्धत विस्तारित करा:
     
         ```javascript
           incrementPoints() {
@@ -164,7 +325,7 @@ npm start
           }
         ```
 
-        आता हे फंक्शन्स तुमच्या कोलिजन इव्हेंट्सशी कनेक्ट करा:
+        आता या फंक्शन्स तुमच्या टक्कर घटनांशी जोडा:
 
         ```javascript
         eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -179,41 +340,156 @@ npm start
         });
         ```
 
-✅ जावास्क्रिप्ट आणि कॅनव्हाससह तयार केलेल्या इतर गेम्सबद्दल उत्सुक आहात? काही एक्सप्लोर करा - तुम्हाला काय शक्य आहे याबद्दल आश्चर्य वाटेल!
-
-या फीचर्स लागू केल्यानंतर, तुमचा गेम टेस्ट करा आणि संपूर्ण फीडबॅक सिस्टम अॅक्शनमध्ये पहा. तुम्हाला तळाच्या उजव्या बाजूला जीवनाचे आयकॉन, तळाच्या डाव्या बाजूला तुमचा स्कोअर दिसेल आणि टक्कर झाल्यावर जीवन कमी होताना आणि यशस्वी शॉट्समुळे स्कोअर वाढताना पहा.
+✅ जावास्क्रिप्ट आणि कॅनव्हाससह तयार केलेल्या इतर गेम्सबद्दल उत्सुक आहात? काही शोध करा - तुम्हाला काय शक्य आहे याबद्दल आश्चर्य वाटेल!
+
+या वैशिष्ट्ये लागू केल्यानंतर, तुमचा गेम तपासा आणि संपूर्ण फीडबॅक सिस्टम क्रियाशील आहे का ते पहा. तुम्हाला तळाच्या उजव्या कोपऱ्यात जीवन आयकॉन, तळाच्या डाव्या कोपऱ्यात तुमचा स्कोअर दिसेल आणि टक्कर झाल्यावर जीवन कमी होताना आणि यशस्वी शॉट्सने स्कोअर वाढताना पहा.
+
+तुमच्या गेममध्ये आता सुरुवातीच्या आर्केड गेम्सला इतके आकर्षक बनवणारे आवश्यक यांत्रिकी आहेत - स्पष्ट उद्दिष्टे, त्वरित फीडबॅक आणि खेळाडूच्या क्रियांसाठी अर्थपूर्ण परिणाम.
+
+### 🔄 **शैक्षणिक तपासणी**
+**पूर्ण गेम डिझाइन सिस्टम**: खेळाडू फीडबॅक सिस्टम्सची तुमची प्रावीण्य सत्यापित करा:
+- ✅ स्कोअरिंग यांत्रिकी खेळाडूंची प्रेरणा आणि गुंतवणूक कशी निर्माण करतात?
+- ✅ वापरकर्ता इंटरफेस डिझाइनसाठी दृश्यात्मक सुसंगतता का महत्त्वाची आहे?
+- ✅ जीवन प्रणाली आव्हान आणि खेळाडू टिकवून ठेवण्याचे संतुलन कसे राखते?
+- ✅ समाधानकारक गेमप्ले तयार करण्यासाठी त्वरित फीडबॅकची भूमिका काय आहे?
+
+**सिस्टम इंटिग्रेशन**: तुमची फीडबॅक प्रणाली दाखवते:
+- **वापरकर्ता अनुभव डिझाइन**: स्पष्ट दृश्यात्मक संवाद आणि माहिती श्रेणीक्रम
+- **इव्हेंट-ड्रिव्हन आर्किटेक्चर**: खेळाडूच्या क्रियांसाठी प्रतिसादात्मक अपडेट्स
+- **स्टेट मॅनेजमेंट**: डायनॅमिक गेम डेटा ट्रॅक करणे आणि दाखवणे
+- **कॅनव्हास कौशल्य**: मजकूर रेंडरिंग आणि स्प्राइट पोझिशनिंग
+- **गेम मानसशास्त्र**: खेळाडूंची प्रेरणा आणि गुंतवणूक समजणे
+
+**व्यावसायिक नमुने**: तुम्ही लागू केले आहे:
+- **MVC आर्किटेक्चर**: गेम लॉजिक, डेटा आणि सादरीकरणाचे विभाजन
+- **ऑब्झर्व्हर पॅटर्न**: गेम स्टेट बदलांसाठी इव्हेंट-ड्रिव्हन अपडेट्स
+- **कंपोनेंट डिझाइन**: रेंडरिंग आणि लॉजिकसाठी पुनर्वापरयोग्य फंक्शन्स
+- **परफॉर्मन्स ऑप्टिमायझेशन**: गेम लूप्समध्ये कार्यक्षम रेंडरिंग
+
+### ⚡ **पुढील ५ मिनिटांत तुम्ही काय करू शकता**
+- [ ] स्कोअर डिस्प्लेसाठी वेगवेगळ्या फॉन्ट साइज आणि रंगांसह प्रयोग करा
+- [ ] पॉइंट मूल्ये बदलण्याचा प्रयत्न करा आणि गेमप्लेच्या अनुभवावर त्याचा कसा परिणाम होतो ते पहा
+- [ ] पॉइंट्स आणि जीवन बदलल्यावर ट्रॅक करण्यासाठी console.log स्टेटमेंट्स जोडा
+- [ ] जीवन संपणे किंवा उच्च स्कोअर मिळवणे यासारख्या एज केस तपासा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि गेम डिझाइन मानसशास्त्र समजून घ्या
+- [ ] स्कोअरिंग आणि जीवन गमावण्याचे साउंड इफेक्ट्स जोडा
+- [ ] localStorage वापरून उच्च स्कोअर प्रणाली लागू करा
+- [ ] वेगवेगळ्या शत्रू प्रकारांसाठी वेगवेगळे पॉइंट मूल्ये तयार करा
+- [ ] जीवन गमावल्यावर स्क्रीन शेकसारखे दृश्यात्मक प्रभाव जोडा
+
+### 📅 **तुमचा आठवडाभराचा गेम डिझाइन प्रवास**
+- [ ] पूर्ण फीडबॅक सिस्टमसह संपूर्ण स्पेस गेम पूर्ण करा
+- [ ] कॉम्बो मल्टीप्लायरसारख्या प्रगत स्कोअरिंग यांत्रिकी लागू करा
+- [ ] अचिव्हमेंट्स आणि अनलॉक करण्यायोग्य सामग्री जोडा
+- [ ] अडचण प्रगती आणि संतुलन प्रणाली तयार करा
+- [ ] मेनू आणि गेम ओव्हर स्क्रीनसाठी वापरकर्ता इंटरफेस डिझाइन करा
+- [ ] इतर गेम्सचा अभ्यास करा जे गुंतवणूक यंत्रणा समजून घेण्यासाठी
+
+### 🌟 **तुमचा महिनाभराचा गेम डेव्हलपमेंट कौशल्य मास्टरी**
+- [ ] प्रगत प्रगती प्रणालीसह संपूर्ण गेम्स तयार करा
+- [ ] गेम अॅनालिटिक्स आणि खेळाडूंच्या वर्तनाचे मोजमाप शिकणे
+- [ ] ओपन सोर्स गेम डेव्हलपमेंट प्रकल्पांमध्ये योगदान द्या
+- [ ] प्रगत गेम डिझाइन नमुने आणि उत्पन्नाचे स्रोत मास्टर करा
+- [ ] गेम डिझाइन आणि वापरकर्ता अनुभवाबद्दल शैक्षणिक सामग्री तयार करा
+- [ ] गेम डिझाइन आणि डेव्हलपमेंट कौशल्ये दाखवणारे पोर्टफोलिओ तयार करा
+
+## 🎯 तुमचा गेम डिझाइन मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title Game Design & Player Feedback Learning Progression
+    
+    section Foundation (10 minutes)
+        Visual Communication: Text rendering
+                           : Icon design
+                           : Layout principles
+                           : Color psychology
+        
+    section Player Psychology (20 minutes)
+        Motivation Systems: Point values
+                          : Risk vs reward
+                          : Progress feedback
+                          : Achievement design
+        
+    section Technical Implementation (30 minutes)
+        Canvas Mastery: Text positioning
+                      : Sprite rendering
+                      : State management
+                      : Performance optimization
+        
+    section Game Balance (40 minutes)
+        Difficulty Design: Life management
+                         : Scoring curves
+                         : Player retention
+                         : Accessibility
+        
+    section User Experience (50 minutes)
+        Interface Design: Information hierarchy
+                        : Responsive feedback
+                        : Emotional design
+                        : Usability testing
+        
+    section Advanced Systems (1 week)
+        Game Mechanics: Progression systems
+                      : Analytics integration
+                      : Monetization design
+                      : Community features
+        
+    section Industry Skills (1 month)
+        Professional Development: Team collaboration
+                                : Design documentation
+                                : Player research
+                                : Platform optimization
+```
 
-तुमच्या गेममध्ये आता सुरुवातीच्या आर्केड गेम्सला इतके आकर्षक बनवणारे आवश्यक यांत्रिकी आहेत - स्पष्ट उद्दिष्टे, त्वरित फीडबॅक आणि खेळाडूंच्या कृतींसाठी अर्थपूर्ण परिणाम.
+### 🛠️ तुमचा गेम डिझाइन टूलकिट सारांश
+
+या धड्याचा अभ्यास केल्यानंतर, तुम्ही आता मास्टर केले आहे:
+- **खेळाडू मानसशास्त्र**: प्रेरणा, धोका/बक्षीस आणि गुंतवणूक लूप समजणे
+- **दृश्यात्मक संवाद**: मजकूर, आयकॉन आणि लेआउट वापरून प्रभावी UI डिझाइन
+- **फीडबॅक सिस्टम्स**: खेळाडूच्या क्रिया आणि गेम इव्हेंट्ससाठी रिअल-टाइम प्रतिसाद
+- **स्टेट मॅनेजमेंट**: डायनॅमिक गेम डेटा कार्यक्षमतेने ट्रॅक करणे आणि दाखवणे
+- **कॅनव्हास मजकूर रेंडरिंग**: स्टाइलिंग आणि पोझिशनिंगसह व्यावसायिक मजकूर प्रदर्शन
+- **इव्हेंट इंटिग्रेशन**: वापरकर्ता क्रियांसाठी अर्थपूर्ण गेम परिणाम जोडणे
+- **गेम संतुलन**: अडचण वक्र आणि खेळाडू प्रगती प्रणाली डिझाइन करणे
+
+**वास्तविक-जगातील अनुप्रयोग**: तुमची गेम डिझाइन कौशल्ये थेट लागू होतात:
+- **वापरकर्ता इंटरफेस डिझाइन**: आकर्षक आणि अंतर्ज्ञानी इंटरफेस तयार करणे
+- **उत्पादन विकास**: वापरकर्ता प्रेरणा आणि फीडबॅक लूप समजणे
+- **शैक्षणिक तंत्रज्ञान**: गेमिफिकेशन आणि शिक्षण गुंतवणूक प्रणाली
+- **डेटा व्हिज्युअलायझेशन**: जटिल माहिती सुलभ आणि आकर्षक बनवणे
+- **मोबाइल अॅप विकास**: टिकाव यांत्रिकी आणि वापरकर्ता अनुभव डिझाइन
+- **मार्केटिंग तंत्रज्ञान**: वापरकर्ता वर्तन आणि रूपांतरण ऑप्टिमायझेशन समजणे
+
+**प्रोफेशनल कौशल्ये मिळवली**: तुम्ही आता करू शकता:
+- **डिझाइन** वापरकर्ता अनुभव जे वापरकर्त्यांना प्रेरित आणि गुंतवणूक करतात
+- **अंमलबजावणी** फीडबॅक सिस्टम्स जे वापरकर्ता वर्तन प्रभावीपणे मार्गदर्शन करतात
+- **संतुलन** आव्हान आणि परस्पर प्रणालींमध्ये प्रवेशयोग्यता
+- **निर्मिती** दृश्यात्मक संवाद जो वेगवेगळ्या वापरकर्ता गटांसाठी कार्य करतो
+- **विश्लेषण** वापरकर्ता वर्तन आणि डिझाइन सुधारणा पुनरावृत्ती करणे
+
+**गेम डेव्हलपमेंट संकल्पना मास्टर केल्या**:
+- **खेळाडू प्रेरणा**: गुंतवणूक आणि टिकाव काय चालवते ते समजणे
+- **दृश्यात्मक डिझाइन**: स्पष्ट, आकर्षक आणि कार्यात्मक इंटरफेस तयार करणे
+- **सिस्टम इंटिग्रेशन**: एकसंध अनुभवासाठी एकाधिक गेम सिस्टम्स कनेक्ट करणे
+- **परफॉर्मन्स ऑप्टिमायझेशन**: कार्यक्षम रेंडरिंग आणि स्टेट मॅनेजमेंट
+- **प्रवेशयोग्यता**: वेगवेगळ्या कौशल्य स्तरांसाठी आणि खेळाडूंच्या गरजांसाठी डिझाइन करणे
+
+**पुढील स्तर**: तुम्ही प्रगत गेम डिझाइन नमुने एक्सप्लोर करण्यासाठी, अॅनालिटिक्स सिस्टम्स लागू करण्यासाठी किंवा गेम उत्पन्न आणि खेळाडू टिकाव धोरणांचा अभ्यास करण्यासाठी तयार आहात!
+
+🌟 **साध्य केलेली उपलब्धी**: तुम्ही व्यावसायिक गेम डिझाइन तत्त्वांसह संपूर्ण खेळाडू फीडबॅक प्रणाली तयार केली आहे!
 
 ---
 
 ## GitHub Copilot Agent Challenge 🚀
 
-Agent मोड वापरून खालील चॅलेंज पूर्ण करा:
-
-**वर्णन:** स्पेस गेमच्या स्कोरिंग सिस्टमला उच्च स्कोअर फीचर, स्थायी स्टोरेज आणि बोनस स्कोरिंग यांत्रिकीसह सुधारित करा.
-
-**प्रॉम्प्ट:** खेळाडूचा सर्वोत्तम स्कोअर `localStorage` मध्ये सेव्ह करणारी उच्च स्कोअर सिस्टम तयार करा. सलग शत्रू ठार मारल्यावर बोनस पॉइंट्स (कॉम्बो सिस्टम) जोडा आणि वेगवेगळ्या शत्रू प्रकारांसाठी वेगवेगळे पॉइंट्स मूल्ये लागू करा. खेळाडूने नवीन उच्च स्कोअर मिळवल्यावर व्हिज्युअल इंडिकेटर समाविष्ट करा आणि गेम स्क्रीनवर चालू उच्च स्कोअर दाखवा.
-
-
-
-## 🚀 चॅलेंज
-
-आता तुमच्याकडे स्कोरिंग आणि जीवन असलेला कार्यक्षम गेम आहे. खेळाडूंचा अनुभव वाढवण्यासाठी कोणते अतिरिक्त फीचर्स उपयुक्त ठरतील याचा विचार करा.
-
-## पोस्ट-लेक्चर क्विझ
-
-[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/38)
-
-## पुनरावलोकन आणि स्व-अभ्यास
-
-अधिक एक्सप्लोर करू इच्छिता? गेम स्कोरिंग आणि जीवन प्रणालींना वेगवेगळ्या पद्धतीने संशोधन करा. [PlayFab](https://playfab.com) सारख्या आकर्षक गेम इंजिन्स आहेत जी स्कोरिंग, लीडरबोर्ड्स आणि खेळाडूंची प्रगती हाताळतात. अशा गोष्टींचा समावेश करून तुमचा गेम पुढच्या स्तरावर कसा जाऊ शकतो याचा विचार करा.
-
-## असाइनमेंट
+Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-[स्कोरिंग गेम तयार करा](assignment.md)
+**वर्णन:** स्पेस गेमच्या स्कोअरिंग सिस्टमला उच्च स्कोअर वैशिष्ट्य लागू करून सुधारित
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/6-space-game/6-end-condition/README.md b/translations/mr/6-space-game/6-end-condition/README.md
index 24edfbbcb3..f86aed0475 100644
--- a/translations/mr/6-space-game/6-end-condition/README.md
+++ b/translations/mr/6-space-game/6-end-condition/README.md
@@ -1,57 +1,165 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46bcdd9a0174031655a49bb062aa279c",
-  "translation_date": "2025-10-22T16:31:21+00:00",
+  "original_hash": "a4b78043f4d64bf3ee24e0689b8b391d",
+  "translation_date": "2025-11-03T14:59:11+00:00",
   "source_file": "6-space-game/6-end-condition/README.md",
   "language_code": "mr"
 }
 -->
 # स्पेस गेम तयार करा भाग 6: शेवट आणि पुन्हा सुरू करा
 
-प्रत्येक उत्कृष्ट गेमसाठी स्पष्ट शेवटची अट आणि गुळगुळीत पुन्हा सुरू करण्याची यंत्रणा आवश्यक असते. तुम्ही हालचाल, लढाई आणि स्कोअरिंगसह एक प्रभावी स्पेस गेम तयार केला आहे - आता ते पूर्ण वाटावे यासाठी अंतिम तुकडे जोडण्याची वेळ आली आहे.
-
-तुमचा गेम सध्या अनिश्चित काळासाठी चालतो, जसे NASA ने 1977 मध्ये लॉन्च केलेले Voyager probes - अजूनही दशकांनंतर अंतराळात प्रवास करत आहेत. अंतराळ संशोधनासाठी ते ठीक असले तरी, समाधानकारक अनुभव निर्माण करण्यासाठी गेम्सना निश्चित शेवटाची आवश्यकता असते.
-
-आज, आपण योग्य विजय/पराजय अटी आणि पुन्हा सुरू करण्याची प्रणाली लागू करू. या धड्याच्या शेवटी, तुमच्याकडे एक पॉलिश गेम असेल जो खेळाडू पूर्ण करू शकतील आणि पुन्हा खेळू शकतील, जसे की माध्यमाची व्याख्या करणारे क्लासिक आर्केड गेम्स.
+```mermaid
+journey
+    title Your Game Completion Journey
+    section End Conditions
+      Define win/lose states: 3: Student
+      Implement condition checking: 4: Student
+      Handle state transitions: 4: Student
+    section Player Experience
+      Design feedback systems: 4: Student
+      Create restart mechanics: 5: Student
+      Polish user interface: 5: Student
+    section System Integration
+      Manage game lifecycle: 5: Student
+      Handle memory cleanup: 5: Student
+      Create complete experience: 5: Student
+```
 
-## पूर्व-व्याख्यान प्रश्नमंजुषा
+प्रत्येक उत्कृष्ट खेळासाठी स्पष्ट शेवटाच्या अटी आणि गुळगुळीत पुन्हा सुरू करण्याची यंत्रणा आवश्यक असते. तुम्ही हालचाल, लढाई आणि स्कोअरिंगसह एक प्रभावी स्पेस गेम तयार केला आहे - आता ते पूर्ण वाटावे यासाठी अंतिम तुकडे जोडण्याची वेळ आली आहे.
 
-[पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/39)
+तुमचा गेम सध्या अनिश्चित काळासाठी चालतो, जसे NASA ने 1977 मध्ये लॉन्च केलेले व्हॉयजर प्रोब्स - अजूनही दशकांनंतर अंतराळात प्रवास करत आहेत. अंतराळ संशोधनासाठी ते ठीक असले तरी, खेळांना समाधानकारक अनुभव निर्माण करण्यासाठी निश्चित शेवटाचे बिंदू आवश्यक असतात.
 
-## गेमच्या शेवटच्या अटी समजून घेणे
+आज, आपण योग्य विजय/पराजय अटी आणि पुन्हा सुरू करण्याची प्रणाली लागू करू. या धड्याच्या शेवटी, तुमच्याकडे एक पॉलिश गेम असेल जो खेळाडू पूर्ण करू शकतील आणि पुन्हा खेळू शकतील, जसे की माध्यमाची व्याख्या करणारे क्लासिक आर्केड गेम्स.
 
-तुमचा गेम कधी संपावा? हा मूलभूत प्रश्न गेम डिझाइनला आकार देत आला आहे. पॅक-मॅनमध्ये तुम्ही भूतांद्वारे पकडले गेल्यावर किंवा सर्व डॉट्स साफ केल्यावर गेम संपतो, तर स्पेस इनव्हेडर्समध्ये एलियन्स तळाशी पोहोचल्यावर किंवा तुम्ही त्यांना नष्ट केल्यावर गेम संपतो.
+```mermaid
+mindmap
+  root((Game Completion))
+    End Conditions
+      Victory States
+      Defeat Conditions
+      Progress Tracking
+      State Validation
+    Player Feedback
+      Visual Messages
+      Color Psychology
+      Clear Communication
+      Emotional Response
+    State Management
+      Game Loop Control
+      Memory Cleanup
+      Object Lifecycle
+      Event Handling
+    Restart Systems
+      Input Handling
+      State Reset
+      Fresh Initialization
+      User Experience
+    Polish Elements
+      Message Display
+      Smooth Transitions
+      Error Prevention
+      Accessibility
+```
 
-गेम निर्माता म्हणून, तुम्ही विजय आणि पराजयाच्या अटी ठरवता. आमच्या स्पेस गेमसाठी, येथे काही सिद्ध दृष्टिकोन आहेत जे आकर्षक गेमप्ले तयार करतात:
+## प्री-लेक्चर क्विझ
+
+[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/39)
+
+## गेमच्या शेवटाच्या अटी समजून घेणे
+
+तुमचा गेम कधी संपायला हवा? हा मूलभूत प्रश्न गेम डिझाइनला सुरुवातीच्या आर्केड युगापासून आकार देत आहे. पॅक-मॅनमध्ये तुम्ही भूतांनी पकडले किंवा सर्व डॉट्स साफ केले की खेळ संपतो, तर स्पेस इनव्हेडर्समध्ये एलियन्स तळाशी पोहोचले किंवा तुम्ही त्यांना नष्ट केले की खेळ संपतो.
+
+गेम निर्माता म्हणून, तुम्ही विजय आणि पराजयाच्या अटी ठरवता. आमच्या स्पेस गेमसाठी, येथे सिद्ध दृष्टिकोन आहेत जे आकर्षक गेमप्ले तयार करतात:
+
+```mermaid
+flowchart TD
+    A["🎮 Game Start"] --> B{"Check Conditions"}
+    
+    B --> C["Enemy Count"]
+    B --> D["Hero Lives"]
+    B --> E["Score Threshold"]
+    B --> F["Level Progress"]
+    
+    C --> C1{"Enemies = 0?"}
+    D --> D1{"Lives = 0?"}
+    E --> E1{"Score ≥ Target?"}
+    F --> F1{"Objectives Complete?"}
+    
+    C1 -->|Yes| G["🏆 Victory"]
+    D1 -->|Yes| H["💀 Defeat"]
+    E1 -->|Yes| G
+    F1 -->|Yes| G
+    
+    C1 -->|No| B
+    D1 -->|No| B
+    E1 -->|No| B
+    F1 -->|No| B
+    
+    G --> I["🔄 Restart Option"]
+    H --> I
+    
+    style G fill:#e8f5e8
+    style H fill:#ffebee
+    style I fill:#e3f2fd
+```
 
-- **`N` शत्रू जहाजे नष्ट केली गेली आहेत**: गेम वेगवेगळ्या स्तरांमध्ये विभागल्यास, स्तर पूर्ण करण्यासाठी तुम्हाला `N` शत्रू जहाजे नष्ट करावी लागतील.
-- **तुमचे जहाज नष्ट झाले आहे**: काही गेम्समध्ये तुमचे जहाज नष्ट झाल्यास तुम्ही गेम हरता. आणखी एक सामान्य दृष्टिकोन म्हणजे जीवनाची संकल्पना असणे. प्रत्येक वेळी तुमचे जहाज नष्ट होते तेव्हा एक जीवन कमी होते. सर्व जीवन संपल्यावर तुम्ही गेम हरता.
-- **तुम्ही `N` गुण गोळा केले आहेत**: आणखी एक सामान्य शेवटची अट म्हणजे तुम्ही गुण गोळा करणे. तुम्ही गुण कसे मिळवता हे तुमच्यावर अवलंबून आहे, परंतु शत्रू जहाज नष्ट करणे किंवा कदाचित वस्तू गोळा करणे ज्यांना नष्ट केल्यावर वस्तू *ड्रॉप* होतात अशा विविध क्रियाकलापांना गुण देणे सामान्य आहे.
-- **एक स्तर पूर्ण करा**: यामध्ये `X` शत्रू जहाजे नष्ट करणे, `Y` गुण गोळा करणे किंवा कदाचित विशिष्ट वस्तू गोळा करणे यासारख्या अनेक अटींचा समावेश असू शकतो.
+- **`N` शत्रू जहाजे नष्ट केली गेली आहेत**: जर तुम्ही गेम वेगवेगळ्या स्तरांमध्ये विभागला असेल तर तुम्हाला स्तर पूर्ण करण्यासाठी `N` शत्रू जहाजे नष्ट करावी लागतील.
+- **तुमचे जहाज नष्ट झाले आहे**: असे नक्कीच गेम्स आहेत जिथे तुमचे जहाज नष्ट झाले तर तुम्ही गेम हराल. आणखी एक सामान्य दृष्टिकोन म्हणजे तुमच्याकडे जीवनाची संकल्पना आहे. प्रत्येक वेळी तुमचे जहाज नष्ट होते तेव्हा ते एक जीवन कमी करते. सर्व जीवन संपल्यावर तुम्ही गेम हराल.
+- **तुम्ही `N` गुण गोळा केले आहेत**: आणखी एक सामान्य शेवटाची अट म्हणजे तुम्ही गुण गोळा करणे. तुम्ही गुण कसे मिळवता हे तुमच्यावर अवलंबून आहे परंतु शत्रू जहाज नष्ट करणे किंवा कदाचित वस्तू गोळा करणे ज्या वस्तू नष्ट झाल्यावर *ड्रॉप* होतात अशा विविध क्रियाकलापांना गुण देणे सामान्य आहे.
+- **स्तर पूर्ण करा**: यामध्ये `X` शत्रू जहाजे नष्ट करणे, `Y` गुण गोळा करणे किंवा कदाचित विशिष्ट वस्तू गोळा करणे यासारख्या अनेक अटींचा समावेश असू शकतो.
 
 ## गेम पुन्हा सुरू करण्याची कार्यक्षमता लागू करणे
 
-चांगले गेम गुळगुळीत पुन्हा सुरू करण्याच्या यंत्रणेद्वारे पुनरावृत्ती करण्यास प्रोत्साहित करतात. जेव्हा खेळाडू गेम पूर्ण करतात (किंवा पराभवाला सामोरे जातात), तेव्हा ते लगेच पुन्हा प्रयत्न करू इच्छितात - त्यांचा स्कोअर पराभूत करण्यासाठी किंवा त्यांची कामगिरी सुधारण्यासाठी.
+चांगले गेम गुळगुळीत पुन्हा सुरू करण्याच्या यंत्रणेद्वारे पुनरावृत्तीला प्रोत्साहन देतात. जेव्हा खेळाडू गेम पूर्ण करतात (किंवा पराजयाला सामोरे जातात), तेव्हा ते लगेच पुन्हा प्रयत्न करू इच्छितात - त्यांचा स्कोअर पराभूत करण्यासाठी किंवा त्यांची कामगिरी सुधारण्यासाठी.
+
+```mermaid
+stateDiagram-v2
+    [*] --> Playing: Game Start
+    Playing --> Victory: All enemies destroyed
+    Playing --> Defeat: Lives = 0
+    
+    Victory --> MessageDisplay: Show win message
+    Defeat --> MessageDisplay: Show lose message
+    
+    MessageDisplay --> WaitingRestart: Press Enter prompt
+    WaitingRestart --> Resetting: Enter key pressed
+    
+    Resetting --> CleanupMemory: Clear intervals
+    CleanupMemory --> ClearEvents: Remove listeners
+    ClearEvents --> InitializeGame: Fresh start
+    InitializeGame --> Playing: New game begins
+    
+    note right of MessageDisplay
+        Color-coded feedback:
+        Green = Victory
+        Red = Defeat
+    end note
+    
+    note right of Resetting
+        Complete state reset
+        prevents memory leaks
+    end note
+```
 
 टेट्रिस याचे उत्तम उदाहरण आहे: जेव्हा तुमचे ब्लॉक्स वर पोहोचतात, तेव्हा तुम्ही जटिल मेनू नेव्हिगेट न करता लगेच नवीन गेम सुरू करू शकता. आम्ही एक समान रीस्टार्ट सिस्टम तयार करू जे गेम स्टेट स्वच्छपणे रीसेट करते आणि खेळाडूंना त्वरीत कृतीत परत आणते.
 
-✅ **प्रतिबिंब**: तुम्ही खेळलेले गेम विचार करा. कोणत्या अटींनुसार ते संपतात आणि तुम्हाला पुन्हा सुरू करण्यास कसे प्रवृत्त केले जाते? रीस्टार्ट अनुभव गुळगुळीत विरुद्ध निराशाजनक वाटतो ते काय बनवते?
+✅ **प्रतिबिंब**: तुम्ही खेळलेले गेम विचार करा. कोणत्या अटींनुसार ते संपतात आणि तुम्हाला पुन्हा सुरू करण्यास कसे प्रवृत्त केले जाते? रीस्टार्ट अनुभव गुळगुळीत विरुद्ध निराशाजनक वाटतो असे काय बनवते?
 
 ## तुम्ही काय तयार कराल
 
-तुम्ही तुमच्या प्रकल्पाला पूर्ण गेम अनुभवात बदलणाऱ्या अंतिम वैशिष्ट्यांची अंमलबजावणी कराल. हे घटक पॉलिश गेम्सना मूलभूत प्रोटोटाइप्सपासून वेगळे करतात.
+तुम्ही अंतिम वैशिष्ट्ये लागू कराल जी तुमच्या प्रकल्पाला पूर्ण गेम अनुभवात रूपांतरित करतात. हे घटक पॉलिश गेम्सना मूलभूत प्रोटोटाइप्सपासून वेगळे करतात.
 
 **आज आपण काय जोडत आहोत:**
 
 1. **विजय अट**: सर्व शत्रूंना नष्ट करा आणि योग्य सेलिब्रेशन मिळवा (तुम्ही ते कमावले आहे!)
 2. **पराजय अट**: जीवन संपवा आणि पराजय स्क्रीनसह संगीताचा सामना करा
-3. **रीस्टार्ट यंत्रणा**: Enter दाबा आणि लगेच परत जा - कारण एक गेम कधीच पुरेसा नसतो
+3. **रीस्टार्ट यंत्रणा**: Enter दाबा आणि पुन्हा खेळायला सुरुवात करा - कारण एक गेम कधीच पुरेसा नसतो
 4. **स्टेट व्यवस्थापन**: प्रत्येक वेळी स्वच्छ सुरुवात - मागील गेममधील शत्रू किंवा विचित्र गडबड नाही
 
 ## सुरुवात करणे
 
-तुमचे विकास वातावरण तयार करूया. तुम्ही मागील धड्यांमधील सर्व स्पेस गेम फाइल्स तयार ठेवल्या पाहिजेत.
+तुमचे विकास वातावरण तयार करूया. तुम्ही मागील धड्यांमधून तुमच्या स्पेस गेम फाइल्स तयार ठेवल्या पाहिजेत.
 
 **तुमचा प्रकल्प काहीसा असा दिसायला हवा:**
 
@@ -76,17 +184,43 @@ npm start
 **हा आदेश:**
 - `http://localhost:5000` वर स्थानिक सर्व्हर चालवतो
 - तुमच्या फाइल्स योग्य प्रकारे सर्व्ह करतो
-- तुम्ही बदल केल्यावर आपोआप रीफ्रेश होतो
-
-तुमच्या ब्राउझरमध्ये `http://localhost:5000` उघडा आणि तुमचा गेम चालू असल्याची खात्री करा. तुम्ही हलवू, शूट करू शकता आणि शत्रूंशी संवाद साधू शकता. एकदा पुष्टी झाल्यावर, आम्ही अंमलबजावणीसह पुढे जाऊ शकतो.
-
-> 💡 **प्रो टिप**: Visual Studio Code मध्ये चेतावणी टाळण्यासाठी, `gameLoopId` तुमच्या फाइलच्या शीर्षस्थानी `let gameLoopId;` म्हणून घोषित करा, `window.onload` फंक्शनमध्ये घोषित करण्याऐवजी. हे आधुनिक JavaScript व्हेरिएबल डिक्लेरेशन सर्वोत्तम पद्धतींचे अनुसरण करते.
+- तुम्ही बदल केल्यावर आपोआप रीफ्रेश होते
+
+`http://localhost:5000` तुमच्या ब्राउझरमध्ये उघडा आणि तुमचा गेम चालू असल्याची पुष्टी करा. तुम्ही हलवू, शूट करू आणि शत्रूंशी संवाद साधू शकता. एकदा पुष्टी झाल्यावर, आम्ही अंमलबजावणीसह पुढे जाऊ शकतो.
+
+> 💡 **प्रो टिप**: व्हिज्युअल स्टुडिओ कोडमध्ये चेतावणी टाळण्यासाठी, `gameLoopId` तुमच्या फाइलच्या शीर्षस्थानी `let gameLoopId;` म्हणून घोषित करा, `window.onload` फंक्शनमध्ये घोषित करण्याऐवजी. हे आधुनिक JavaScript व्हेरिएबल डिक्लेरेशन सर्वोत्तम पद्धतींचे अनुसरण करते.
+
+```mermaid
+flowchart TD
+    A["1. Condition Tracking"] --> B["2. Event Handlers"]
+    B --> C["3. Message Constants"]
+    C --> D["4. Restart Controls"]
+    D --> E["5. Message Display"]
+    E --> F["6. Reset System"]
+    
+    G["isHeroDead()\nisEnemiesDead()"] --> A
+    H["Collision Events\nEnd Game Events"] --> B
+    I["GAME_END_WIN\nGAME_END_LOSS"] --> C
+    J["Enter Key\nRestart Trigger"] --> D
+    K["Victory/Defeat\nColor-coded Text"] --> E
+    L["State Cleanup\nFresh Initialization"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 ## अंमलबजावणी चरण
 
 ### चरण 1: शेवटच्या अटी ट्रॅकिंग फंक्शन्स तयार करा
 
-आपण गेम कधी संपावा हे मॉनिटर करण्यासाठी फंक्शन्सची आवश्यकता आहे. जसे की आंतरराष्ट्रीय स्पेस स्टेशनवरील सेन्सर्स सतत महत्त्वाच्या प्रणालींचे निरीक्षण करतात, हे फंक्शन्स गेम स्टेट सतत तपासतील.
+आपल्या गेमचा शेवट कधी व्हायला हवा हे सतत तपासण्यासाठी आपल्याला फंक्शन्सची आवश्यकता आहे. आंतरराष्ट्रीय स्पेस स्टेशनवरील सेन्सर्सप्रमाणे जे महत्त्वाच्या प्रणालींचे सतत निरीक्षण करतात, हे फंक्शन्स गेम स्टेट सतत तपासतील.
 
 ```javascript
 function isHeroDead() {
@@ -99,16 +233,50 @@ function isEnemiesDead() {
 }
 ```
 
-**येथे अंतर्गत काय चालले आहे:**
-- **तपासते** की आपला हिरो जीवन संपवतो का (ओह!)
-- **मोजते** की किती शत्रू अजूनही जिवंत आहेत
-- **परत करते** `true` जेव्हा युद्धक्षेत्र शत्रूंनी रिक्त होते
-- **सोप्या true/false लॉजिकचा वापर करते** गोष्टी सोप्या ठेवण्यासाठी
-- **सर्व गेम ऑब्जेक्ट्समधून फिल्टर करते** जिवंत राहिलेल्यांना शोधण्यासाठी
+**येथे काय चालले आहे:**
+- **तपासते** की आपला हिरो जीवन संपला आहे का (अरेरे!)
+- **मोजते** किती शत्रू अजूनही जिवंत आहेत
+- **परत करते** `true` जेव्हा युद्धभूमी शत्रूंनी रिक्त होते
+- **वापरते** सोपी true/false लॉजिक गोष्टी सोप्या ठेवण्यासाठी
+- **फिल्टर करते** सर्व गेम ऑब्जेक्ट्समधून वाचलेल्यांना शोधण्यासाठी
 
 ### चरण 2: शेवटच्या अटींसाठी इव्हेंट हँडलर्स अपडेट करा
 
-आता आपण या अटी तपासणी गेमच्या इव्हेंट सिस्टमशी जोडू. प्रत्येक वेळी टक्कर होते, गेम मूल्यांकन करेल की ते शेवटची अट ट्रिगर करते का. हे महत्त्वाच्या गेम इव्हेंटसाठी त्वरित फीडबॅक तयार करते.
+आता आपण या अटी तपासण्यांना गेमच्या इव्हेंट सिस्टमशी जोडू. प्रत्येक वेळी टक्कर होते, गेम मूल्यांकन करेल की ते शेवटच्या अटींना ट्रिगर करते का. हे महत्त्वाच्या गेम इव्हेंटसाठी त्वरित फीडबॅक तयार करते.
+
+```mermaid
+sequenceDiagram
+    participant Collision
+    participant GameLogic
+    participant Conditions
+    participant EventSystem
+    participant Display
+    
+    Collision->>GameLogic: Laser hits enemy
+    GameLogic->>GameLogic: Destroy objects
+    GameLogic->>Conditions: Check isEnemiesDead()
+    
+    alt All enemies defeated
+        Conditions->>EventSystem: Emit GAME_END_WIN
+        EventSystem->>Display: Show victory message
+    else Enemies remain
+        Conditions->>GameLogic: Continue game
+    end
+    
+    Collision->>GameLogic: Enemy hits hero
+    GameLogic->>GameLogic: Decrease lives
+    GameLogic->>Conditions: Check isHeroDead()
+    
+    alt Lives = 0
+        Conditions->>EventSystem: Emit GAME_END_LOSS
+        EventSystem->>Display: Show defeat message
+    else Lives remain
+        GameLogic->>Conditions: Check isEnemiesDead()
+        alt All enemies defeated
+            Conditions->>EventSystem: Emit GAME_END_WIN
+        end
+    end
+```
 
 ```javascript
 eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -143,10 +311,10 @@ eventEmitter.on(Messages.GAME_END_LOSS, () => {
 ```
 
 **येथे काय चालले आहे:**
-- **लेझर शत्रूला मारते**: दोघे गायब होतात, तुम्हाला गुण मिळतात आणि आम्ही तपासतो की तुम्ही जिंकलात का
-- **शत्रू तुम्हाला मारतो**: तुम्ही एक जीवन गमावता आणि आम्ही तपासतो की तुम्ही अजून श्वास घेत आहात का
+- **लेसर शत्रूला लागतो**: दोघे गायब होतात, तुम्हाला गुण मिळतात आणि आम्ही तपासतो की तुम्ही जिंकलात का
+- **शत्रू तुम्हाला लागतो**: तुम्ही एक जीवन गमावता आणि आम्ही तपासतो की तुम्ही अजून श्वास घेत आहात का
 - **स्मार्ट ऑर्डरिंग**: आम्ही प्रथम पराजय तपासतो (कोणीही एकाच वेळी जिंकणे आणि हरवणे इच्छित नाही!)
-- **त्वरित प्रतिक्रिया**: काहीतरी महत्त्वाचे घडताच, गेम त्याबद्दल जाणतो
+- **त्वरित प्रतिक्रिया**: काहीतरी महत्त्वाचे घडताच, गेमला त्याबद्दल माहिती मिळते
 
 ### चरण 3: नवीन संदेश स्थिरांक जोडा
 
@@ -158,13 +326,13 @@ GAME_END_WIN: "GAME_END_WIN",
 ```
 
 **वरीलमध्ये, आम्ही:**
-- **गेम एंड इव्हेंटसाठी स्थिरांक जोडले** सुसंगतता राखण्यासाठी
-- **स्पष्टपणे इव्हेंटचा उद्देश दर्शविणारे वर्णनात्मक नावे वापरली**
-- **संदेश प्रकारांसाठी विद्यमान नामकरण पद्धतीचे अनुसरण केले**
+- **जोडले** गेम एंड इव्हेंटसाठी स्थिरांक सुसंगतता राखण्यासाठी
+- **वापरले** वर्णनात्मक नावे जी इव्हेंटचा हेतू स्पष्टपणे दर्शवतात
+- **अनुसरण केले** संदेश प्रकारांसाठी विद्यमान नामकरण पद्धत
 
 ### चरण 4: रीस्टार्ट कंट्रोल्स लागू करा
 
-आता तुम्ही खेळाडूंना गेम पुन्हा सुरू करण्याची परवानगी देणारे कीबोर्ड कंट्रोल्स जोडाल. Enter की हा एक नैसर्गिक पर्याय आहे कारण तो सामान्यतः क्रिया पुष्टी करण्यासाठी आणि नवीन गेम सुरू करण्यासाठी संबंधित असतो.
+आता तुम्ही कीबोर्ड कंट्रोल्स जोडाल जे खेळाडूंना गेम पुन्हा सुरू करण्याची परवानगी देतात. Enter की हा एक नैसर्गिक पर्याय आहे कारण तो क्रिया पुष्टी करण्यासाठी आणि नवीन गेम सुरू करण्यासाठी सामान्यतः संबंधित आहे.
 
 **तुमच्या विद्यमान कीडाउन इव्हेंट लिसनरमध्ये Enter की डिटेक्शन जोडा:**
 
@@ -181,14 +349,14 @@ KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
 ```
 
 **तुम्हाला काय माहित असणे आवश्यक आहे:**
-- **तुमच्या विद्यमान कीबोर्ड इव्हेंट हँडलिंग सिस्टमचा विस्तार करते**
-- **Enter कीचा वापर रीस्टार्ट ट्रिगर म्हणून अंतर्ज्ञानी वापरकर्ता अनुभवासाठी करते**
-- **कस्टम इव्हेंट उत्सर्जित करते ज्यासाठी तुमच्या गेमचे इतर भाग ऐकू शकतात**
-- **तुमच्या इतर कीबोर्ड कंट्रोल्ससारखा समान नमुना राखतो**
+- **विस्तारित करते** तुमची विद्यमान कीबोर्ड इव्हेंट हँडलिंग प्रणाली
+- **वापरते** रीस्टार्ट ट्रिगरसाठी Enter की, जे वापरकर्त्यांसाठी सहज समजण्यासारखे आहे
+- **उत्पन्न करते** एक सानुकूल इव्हेंट ज्यासाठी तुमच्या गेमचे इतर भाग ऐकू शकतात
+- **जतन करते** तुमच्या इतर कीबोर्ड कंट्रोल्ससारखा समान नमुना
 
 ### चरण 5: संदेश प्रदर्शन प्रणाली तयार करा
 
-तुमच्या गेमला खेळाडूंना परिणाम स्पष्टपणे सांगण्याची आवश्यकता आहे. आम्ही एक संदेश प्रणाली तयार करू जी विजय आणि पराजय स्थिती रंग-कोडेड मजकूर वापरून प्रदर्शित करते, जसे की प्रारंभिक संगणक प्रणालींच्या टर्मिनल इंटरफेससारखे जेथे हिरवा यश दर्शवतो आणि लाल त्रुटी दर्शवतो.
+तुमच्या गेमला खेळाडूंना परिणाम स्पष्टपणे सांगण्याची आवश्यकता आहे. आम्ही एक संदेश प्रणाली तयार करू जी विजय आणि पराजयाच्या स्थिती रंग-कोडित मजकूर वापरून प्रदर्शित करते, जसे की प्रारंभिक संगणक प्रणालींच्या टर्मिनल इंटरफेससाठी हिरवा यश दर्शवतो आणि लाल त्रुटी दर्शवतो.
 
 **`displayMessage()` फंक्शन तयार करा:**
 
@@ -202,11 +370,11 @@ function displayMessage(message, color = "red") {
 ```
 
 **पायरी-पायरीने, येथे काय घडत आहे:**
-- **स्पष्ट, वाचनीय मजकूरासाठी फॉन्ट आकार आणि कुटुंब सेट करते**
-- **"लाल" चेतावणीसाठी डीफॉल्ट रंगासह रंग पॅरामीटर लागू करते**
-- **कॅनव्हासवर मजकूर आडव्या आणि उभ्या केंद्रित करते**
-- **लवचिक रंग पर्यायांसाठी आधुनिक JavaScript डीफॉल्ट पॅरामीटर वापरते**
-- **कॅनव्हास 2D संदर्भाचा वापर थेट मजकूर रेंडरिंगसाठी करते**
+- **सेट करते** फॉन्ट आकार आणि कुटुंब स्पष्ट, वाचण्यायोग्य मजकूरासाठी
+- **लागू करते** रंग पॅरामीटर "लाल" चेतावणीसाठी डीफॉल्ट म्हणून
+- **केंद्रित करते** कॅनव्हासवर मजकूर आडव्या आणि उभ्या
+- **वापरते** आधुनिक JavaScript डीफॉल्ट पॅरामीटर्स लवचिक रंग पर्यायांसाठी
+- **लेव्हरेज करते** कॅनव्हास 2D संदर्भ थेट मजकूर रेंडरिंगसाठी
 
 **`endGame()` फंक्शन तयार करा:**
 
@@ -234,16 +402,32 @@ function endGame(win) {
 ```
 
 **हे फंक्शन काय करते:**
-- **सर्वकाही स्थिर करते - हलणारे जहाज किंवा लेझर नाही**
-- **लहान विराम घेतो (200ms) शेवटचा फ्रेम काढण्यास परवानगी देण्यासाठी**
-- **स्क्रीन स्वच्छ करते आणि नाट्यमय प्रभावासाठी काळा रंग देते**
-- **विजेत्यांसाठी आणि पराभूतांसाठी वेगवेगळे संदेश दर्शवते**
-- **चांगल्या बातम्यांसाठी हिरवा, वाईटसाठी लाल रंग कोड करते**
-- **खेळाडूंना परत कसे उडी मारायचे ते अचूकपणे सांगते**
+- **गोठवते** सर्व काही जागेवर - आता हलणारे जहाज किंवा लेसर नाही
+- **घेतो** एक छोटासा विराम (200ms) शेवटचा फ्रेम काढण्यास परवानगी देण्यासाठी
+- **स्वच्छ करते** स्क्रीन आणि नाट्यमय प्रभावासाठी ती काळी रंगवते
+- **दाखवते** विजेत्यांसाठी आणि पराभूतांसाठी वेगवेगळे संदेश
+- **रंग कोड करते** बातम्या - चांगल्यासाठी हिरवा, लाल... बरं, चांगलं नाही
+- **सांगते** खेळाडूंना पुन्हा सुरुवात कशी करायची
+
+### 🔄 **शैक्षणिक तपासणी**
+**गेम स्टेट व्यवस्थापन**: रीसेट कार्यक्षमता लागू करण्यापूर्वी, सुनिश्चित करा की तुम्हाला समजते:
+- ✅ शेवटच्या अटी स्पष्ट गेमप्ले उद्दिष्टे कशा तयार करतात
+- ✅ व्हिज्युअल फीडबॅक खेळाडूंच्या समजून घेण्यास का आवश्यक आहे
+- ✅ मेमरी लीक टाळण्यासाठी योग्य साफसफाईचे महत्त्व
+- ✅ इव्हेंट-ड्रिव्हन आर्किटेक्चर स्वच्छ स्टेट ट्रान्सिशन्स सक्षम कसे करते
+
+**जलद स्व-परीक्षण**: जर तुम्ही रीसेट दरम्यान इव्हेंट लिसनर्स साफ केले नाहीत तर काय होईल?
+*उत्तर: मेमरी लीक आणि डुप्लिकेट इव्हेंट हँडलर्समुळे अनपेक्षित वर्तन*
+
+**गेम डिझाइन तत्त्वे**: तुम्ही आता अंमलात आणत आहात:
+- **स्पष्ट उद्दिष्टे**: खेळाडूंना यश आणि अपयश काय परिभाषित करते हे अचूकपणे माहित आहे
+- **त्वरित फीडबॅक**: गेम स्टेट बदल त्वरित संवाद साधतात
+- **वापरकर्ता नियंत्रण**: खेळाडू तयार झाल्यावर पुन्हा सुरू करू शकतात
+- **सिस्टम विश्वसनीयता**: योग्य साफसफाई बग आणि कार्यक्षमतेच्या समस्यांना प्रतिबंधित करते
 
 ### चरण 6: गेम रीसेट कार्यक्षमता लागू करा
 
-रीसेट सिस्टमला विद्यमान गेम स्टेट पूर्णपणे साफ करणे आणि नवीन गेम सत्र सुरू करणे आवश्यक आहे. हे खेळाडूंना मागील गेममधील कोणत्याही शिल्लक डेटाशिवाय स्वच्छ सुरुवात मिळण्याची खात्री देते.
+रीसेट सिस्टमला विद्यमान गेम स्टेट पूर्णपणे साफ करणे आणि नवीन गेम सत्र सुरू करणे आवश्यक आहे. हे सुनिश्चित करते की खेळाडूंना मागील गेममधील कोणत्याही शिल्लक डेटाशिवाय स्वच्छ सुरुवात मिळते.
 
 **`resetGame()` फंक्शन तयार करा:**
 
@@ -267,12 +451,12 @@ function resetGame() {
 ```
 
 **प्रत्येक भाग समजून घेऊया:**
-- **सध्याचा गेम लूप चालू आहे का ते तपासते**
-- **सर्व विद्यमान गेम क्रियाकलाप थांबवण्यासाठी विद्यमान गेम लूप साफ करते**
-- **मेमरी लीक टाळण्यासाठी सर्व इव्हेंट लिसनर्स काढून टाकते**
-- **ताज्या ऑब्जेक्ट्स आणि व्हेरिएबल्ससह गेम स्टेट पुन्हा सुरू करते**
-- **सर्व आवश्यक गेम फंक्शन्ससह नवीन गेम लूप सुरू करते**
-- **सुसंगत गेम कार्यक्षमतेसाठी समान 100ms अंतर राखते**
+- **तपासते** की रीसेट करण्यापूर्वी गेम लूप सध्या चालू आहे का
+- **साफ करते** विद्यमान गेम लूप सर्व वर्तमान गेम क्रियाकलाप थांबवण्यासाठी
+- **काढून टाकते** सर्व इव्हेंट लिसनर्स मेमरी लीक टाळण्यासाठी
+- **पुनरारंभ करते** नवीन ऑब्जेक्ट्स आणि व्हेरिएबल्ससह गेम स्टेट
+- **सुरू करते** सर्व आवश्यक गेम फंक्शन्ससह नवीन गेम लूप
+- **जतन करते** समान 100ms अंतर सुसंगत गेम कार्यक्षमतेसाठी
 
 **तुमच्या `initGame()` फंक्शनमध्ये Enter की इव्हेंट हँडलर जोडा:**
 
@@ -290,44 +474,147 @@ clear() {
 }
 ```
 
-**लक्षात ठेवण्याच्या मुख्य गोष्टी:**
-- **Enter की प्रेस गेम रीसेट कार्यक्षमतेशी जोडते**
-- **गेम प्रारंभ करताना हा इव्हेंट लिसनर नोंदवतो**
-- **गेम्स दरम्यान इव्हेंट हँडलर्स साफ करून मेमरी लीक टाळते**
-- **ताज्या प्रारंभासाठी लिसनर्स ऑब्जेक्ट रिक्त स्थितीत रीसेट करते**
+**लक्षात ठेवण्याचे महत्त्वाचे मुद्दे:**
+- **जोडते** Enter की प्रेस रीसेट गेम कार्यक्षमतेशी
+- **नोंदणी करते** गेम प्रारंभ दरम्यान हा इव्हेंट लिसनर
+- **प्रदान करते** सर्व इव्हेंट लिसनर्स काढून टाकण्याचा स्वच्छ मार्ग गेम्स दरम्यान
+- **टाळते** मेमरी लीक गेम्स दरम्यान इव्हेंट हँडलर्स साफ करून
+- **रीसेट करते** लिसनर्स ऑब्जेक्ट रिक्त स्टेटसाठी ताज्या प्रारंभासाठी
 
 ## अभिनंदन! 🎉
 
-👽 💥 🚀 तुम्ही जमिनीपासून पूर्ण गेम यशस्वीरित्या तयार केला आहे. जसे की 1970 च्या दशकात पहिले व्हिडिओ गेम तयार करणारे प्रोग्रामर, तुम्ही कोडच्या ओळींना योग्य गेम यांत्रिकी आणि वापरकर्ता फीडबॅकसह परस्पर अनुभवात बदलले आहे. 🚀 💥 👽
+👽 💥 🚀 तुम्ही जमिनीपासून पूर्ण गेम यशस्वीरित्या तयार केला आहे. जसे 1970 च्या दशकात पहिल्या व्हिडिओ गेम्स तयार करणारे प्रोग्रामर, तुम्ही कोडच्या ओळींना योग्य गेम यांत्रिकी आणि वापरकर्ता फीडबॅकसह परस्पर अनुभवात रूपांतरित केले आहे. 🚀 💥 👽
 
 **तुम्ही साध्य केले आहे:**
-- **विजय आणि पराजय अटी अंमलात आणल्या** वापरकर्ता फीडबॅकसह
-- **सतत गेमप्लेसाठी गुळगुळीत रीस्टार्ट सिस्टम तयार केली**
-- **गेम स्टेट्ससाठी स्पष्ट व्हिज्युअल संवाद डिझाइन केला**
-- **जटिल गेम स्टेट ट्रान्झिशन्स आणि क्लीनअप व्यवस्थापित केले**
-- **सर्व घटक एकत्र करून सुसंगत, खेळण्यायोग्य गेम तयार केला**
+- **अंमलात आणले** पूर्ण विजय आणि पराजय अटी वापरकर्ता फीडबॅकसह
+- **तयार केले** सतत गेमप्लेसाठी गुळगुळीत रीस्टार्ट सिस्टम
+- **डिझाइन केले** गेम स्टेट्ससाठी स्पष्ट व्हिज्युअल संवाद
+- **व्यवस्थापित केले** जटिल गेम स्टेट ट्रान्सिशन्स आणि साफसफाई
+- **सर्व घटक एकत्र केले** एक सुसंगत, खेळण्यायोग्य गेममध्ये
+
+### 🔄 **शैक्षणिक तपासणी**
+**पूर्ण गेम विकास प्रणाली**: पूर्ण गेम विकास चक्रातील तुमच्या प्रभुत्वाचा आनंद घ्या:
+- ✅ शेवटच्या अटी समाधानकारक खेळाडू अनुभव कशा तयार करतात?
+- ✅ गेम स्थिरतेसाठी योग्य स्टेट व्यवस्थापन का महत्त्वाचे आहे?
+- ✅ व्हिज्युअल फीडबॅक खेळाडूंच्या समजून घेण्यास कसे वाढवते?
+- ✅ खेळाडूंच्या टिकावासाठी रीस्टार्ट सिस्टमची भूमिका काय आहे
+### 🌟 **तुमचा महिनाभराचा गेम डेव्हलपमेंट करिअर**
+- [ ] विविध प्रकार आणि यांत्रिकींचा अभ्यास करत अनेक पूर्ण गेम तयार करा
+- [ ] Phaser किंवा Three.js सारख्या प्रगत गेम डेव्हलपमेंट फ्रेमवर्क शिकणे
+- [ ] ओपन सोर्स गेम डेव्हलपमेंट प्रकल्पांमध्ये योगदान द्या
+- [ ] गेम डिझाइन तत्त्वे आणि खेळाडूंच्या मानसशास्त्राचा अभ्यास करा
+- [ ] तुमच्या गेम डेव्हलपमेंट कौशल्यांचे प्रदर्शन करणारे पोर्टफोलिओ तयार करा
+- [ ] गेम डेव्हलपमेंट समुदायाशी संपर्क साधा आणि शिकत राहा
+
+## 🎯 तुमचा संपूर्ण गेम डेव्हलपमेंट मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title Complete Game Development Learning Progression
+    
+    section Foundation (Lessons 1-2)
+        Game Architecture: Project structure
+                         : Asset management
+                         : Canvas basics
+                         : Event systems
+        
+    section Interaction Systems (Lessons 3-4)
+        Player Control: Input handling
+                      : Movement mechanics
+                      : Collision detection
+                      : Physics simulation
+        
+    section Game Mechanics (Lesson 5)
+        Feedback Systems: Scoring mechanisms
+                        : Life management
+                        : Visual communication
+                        : Player motivation
+        
+    section Game Completion (Lesson 6)
+        Polish & Flow: End conditions
+                     : State management
+                     : Restart systems
+                     : User experience
+        
+    section Advanced Features (1 week)
+        Enhancement Skills: Audio integration
+                          : Visual effects
+                          : Level progression
+                          : Performance optimization
+        
+    section Professional Development (1 month)
+        Industry Readiness: Framework mastery
+                          : Team collaboration
+                          : Portfolio development
+                          : Community engagement
+        
+    section Career Advancement (3 months)
+        Specialization: Advanced game engines
+                      : Platform deployment
+                      : Monetization strategies
+                      : Industry networking
+```
+
+### 🛠️ तुमचा संपूर्ण गेम डेव्हलपमेंट टूलकिट सारांश
+
+या संपूर्ण स्पेस गेम मालिकेचे पूर्ण केल्यानंतर, तुम्ही खालील गोष्टींमध्ये प्राविण्य मिळवले आहे:
+- **गेम आर्किटेक्चर**: इव्हेंट-ड्रिव्हन सिस्टीम, गेम लूप्स आणि स्टेट मॅनेजमेंट
+- **ग्राफिक्स प्रोग्रामिंग**: कॅनव्हास API, स्प्राइट रेंडरिंग आणि व्हिज्युअल इफेक्ट्स
+- **इनपुट सिस्टीम्स**: कीबोर्ड हाताळणी, कोलिजन डिटेक्शन आणि प्रतिसादक्षम नियंत्रण
+- **गेम डिझाइन**: खेळाडूंचा फीडबॅक, प्रगती प्रणाली आणि गुंतवणूक यांत्रिकी
+- **परफॉर्मन्स ऑप्टिमायझेशन**: कार्यक्षम रेंडरिंग, मेमरी व्यवस्थापन आणि फ्रेम रेट नियंत्रण
+- **युजर एक्सपीरियन्स**: स्पष्ट संवाद, अंतर्ज्ञानी नियंत्रण आणि बारकावे
+- **प्रोफेशनल पॅटर्न्स**: स्वच्छ कोड, डीबगिंग तंत्र आणि प्रकल्प संघटना
+
+**वास्तविक-जगातील अनुप्रयोग**: तुमचे गेम डेव्हलपमेंट कौशल्य थेट लागू होते:
+- **इंटरॅक्टिव वेब अनुप्रयोग**: डायनॅमिक इंटरफेस आणि रिअल-टाइम सिस्टीम्स
+- **डेटा व्हिज्युअलायझेशन**: अॅनिमेटेड चार्ट्स आणि इंटरॅक्टिव ग्राफिक्स
+- **शैक्षणिक तंत्रज्ञान**: गेमिफिकेशन आणि आकर्षक शिक्षण अनुभव
+- **मोबाइल डेव्हलपमेंट**: टच-आधारित संवाद आणि कार्यक्षमता ऑप्टिमायझेशन
+- **सिम्युलेशन सॉफ्टवेअर**: फिजिक्स इंजिन्स आणि रिअल-टाइम मॉडेलिंग
+- **क्रिएटिव इंडस्ट्रीज**: इंटरॅक्टिव आर्ट, मनोरंजन आणि डिजिटल अनुभव
+
+**प्रोफेशनल कौशल्ये मिळवली**: तुम्ही आता करू शकता:
+- **आर्किटेक्ट** स्क्रॅचपासून जटिल इंटरॅक्टिव सिस्टीम्स तयार करा
+- **डीबग** रिअल-टाइम अनुप्रयोगांसाठी प्रणालीबद्ध दृष्टिकोन वापरा
+- **ऑप्टिमाइझ** गुळगुळीत युजर अनुभवासाठी कार्यक्षमता
+- **डिझाइन** आकर्षक युजर इंटरफेस आणि संवाद पॅटर्न्स
+- **सहकार्य** तांत्रिक प्रकल्पांवर योग्य कोड संघटनेसह प्रभावीपणे काम करा
+
+**गेम डेव्हलपमेंट संकल्पना ज्यामध्ये प्राविण्य मिळवले**:
+- **रिअल-टाइम सिस्टीम्स**: गेम लूप्स, फ्रेम रेट व्यवस्थापन आणि कार्यक्षमता
+- **इव्हेंट-ड्रिव्हन आर्किटेक्चर**: डिस्कपल्ड सिस्टीम्स आणि मेसेज पासिंग
+- **स्टेट मॅनेजमेंट**: जटिल डेटा हाताळणी आणि जीवनचक्र व्यवस्थापन
+- **युजर इंटरफेस प्रोग्रामिंग**: कॅनव्हास ग्राफिक्स आणि प्रतिसादक्षम डिझाइन
+- **गेम डिझाइन थिअरी**: खेळाडूंचे मानसशास्त्र आणि गुंतवणूक यांत्रिकी
+
+**पुढील स्तर**: तुम्ही प्रगत गेम फ्रेमवर्क्स, 3D ग्राफिक्स, मल्टीप्लेयर सिस्टीम्स एक्सप्लोर करण्यासाठी किंवा व्यावसायिक गेम डेव्हलपमेंट भूमिकांमध्ये संक्रमण करण्यासाठी तयार आहात!
+
+🌟 **अचिव्हमेंट अनलॉक**: तुम्ही संपूर्ण गेम डेव्हलपमेंट प्रवास पूर्ण केला आहे आणि स्क्रॅचपासून व्यावसायिक-गुणवत्तेचा इंटरॅक्टिव अनुभव तयार केला आहे!
+
+**गेम डेव्हलपमेंट समुदायात स्वागत आहे!** 🎮✨
 
 ## GitHub Copilot Agent Challenge 🚀
 
 Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** स्तर प्रगती प्रणालीसह स्पेस गेम सुधारित करा ज्यामध्ये वाढती अडचण आणि बोनस वैशिष्ट्ये आहेत.
+**वर्णन:** लेव्हल प्रगती प्रणाली लागू करून स्पेस गेम सुधारित करा ज्यामध्ये वाढती अडचण आणि बोनस वैशिष्ट्ये असतील.
 
-**प्रॉम्प्ट:** एक मल्टी-लेव्हल स्पेस गेम सिस्टम तयार करा जिथे प्रत्येक स्तरावर अधिक शत्रू जहाजे वाढत्या गती आणि आरोग्यासह असतात. प्रत्येक स्तरासह वाढणारा स्कोअरिंग गुणक जोडा आणि पॉवर-अप्स (जसे की जलद फायर किंवा शील्ड) अंमलात आणा जेव्हा शत्रू नष्ट होतात तेव्हा यादृच्छिकपणे दिसतात. स्तर पूर्णता बोनस समाविष्ट करा आणि विद्यमान स्कोअर आणि जीवनासह स्क्रीनवर वर्तमान स्तर प्रदर्शित करा.
+**प्रॉम्प्ट:** मल्टी-लेव्हल स्पेस गेम प्रणाली तयार करा जिथे प्रत्येक स्तरावर अधिक शत्रू जहाजे असतील ज्यांची गती आणि आरोग्य वाढेल. प्रत्येक स्तरासह वाढणारा स्कोअरिंग मल्टिप्लायर जोडा आणि पॉवर-अप्स (जसे की रॅपिड फायर किंवा शील्ड) लागू करा जेव्हा शत्रू नष्ट होतात तेव्हा यादृच्छिकपणे दिसतात. स्तर पूर्णता बोनस समाविष्ट करा आणि विद्यमान स्कोअर आणि लाइव्ह्ससह स्क्रीनवर वर्तमान स्तर प्रदर्शित करा.
 
-[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
+Agent मोडबद्दल अधिक जाणून घ्या [इथे](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
 
 ## 🚀 पर्यायी सुधारणा आव्हान
 
-**तुमच्या गेममध्ये ऑडिओ जोडा**: ध्वनी प्रभाव अंमलात आणून तुमचा गेमप्ले अनुभव वाढवा! विचार करा:
+**तुमच्या गेममध्ये ऑडिओ जोडा**: ध्वनी प्रभाव लागू करून तुमचा गेमप्ले अनुभव सुधारित करा! खालीलसाठी ऑडिओ विचार करा:
 
 - **लेझर शॉट्स** जेव्हा खेळाडू फायर करतो
-- **शत्रू नाश** जेव्हा जहाजे हिट होतात
+- **शत्रूंचा नाश** जेव्हा जहाजे हिट होतात
 - **हिरो डॅमेज** जेव्हा खेळाडू हिट घेतो
 - **विजय संगीत** जेव्हा गेम जिंकला जातो
-- **पराजय ध्वनी** जेव्हा गेम हरला जातो
+- **पराभव ध्वनी** जेव्हा गेम हरला जातो
 
-**ऑडिओ अंमलबजावणी उदाहरण:**
+**ऑडिओ अंमलबजावणीचे उदाहरण:**
 
 ```javascript
 // Create audio objects
@@ -342,22 +629,26 @@ function playLaserSound() {
 ```
 
 **तुम्हाला काय माहित असणे आवश्यक आहे:**
-- **वेगवेगळ्या ध्वनी प्रभावांसाठी ऑडिओ ऑब्जेक्ट तयार करते**
-- **वेगवान फायर ध्वनी प्रभावांना परवानगी देण्यासाठी `currentTime` रीसेट करते**
-- **ब्राउझर ऑटोप्ले धोरणे हाताळते वापरकर्ता संवादांमधून ध्वनी ट्रिगर करून**
-- **चांगल्या गेम अनुभवासाठी ऑडिओ व्हॉल्यूम आणि वेळ व्यवस्थापित करते**
+- **ऑडिओ ऑब्जेक्ट्स तयार करते** विविध ध्वनी प्रभावांसाठी
+- **`currentTime` रीसेट करते** जलद फायर ध्वनी प्रभावांना परवानगी देण्यासाठी
+- **ब्राउझर ऑटोप्ले धोरणे हाताळते** वापरकर्त्याच्या संवादांमधून ध्वनी ट्रिगर करून
+- **ऑडिओ व्हॉल्यूम आणि टाइमिंग व्यवस्थापित करते** चांगल्या गेम अनुभवासाठी
 
-> 💡 **शिकण्याचा स्रोत**: JavaScript गेम्समध्ये ऑडिओ अंमलबजावणीबद्दल अधिक जाणून घेण्यासाठी [ऑडिओ सॅंडबॉक्स](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) एक्सप्लोर करा.
+> 💡 **शिकण्याचा स्रोत**: JavaScript गेम्समध्ये ऑडिओ लागू करण्याबद्दल अधिक जाणून घेण्यासाठी [ऑडिओ सॅंडबॉक्स एक्सप्लोर करा](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play).
 
-## पोस्ट-व्याख्यान प्रश्नमंजुषा
+## पोस्ट-लेक्चर क्विझ
 
-[पोस्ट-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/40)
+[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/40)
 
 ## पुनरावलोकन आणि स्व-अभ्यास
 
-तुमचे
+तुमचे असाइनमेंट म्हणजे एक नवीन नमुना गेम तयार करणे, त्यामुळे तुम्ही बाहेर काही मनोरंजक गेम्स एक्सप्लोर करा आणि तुम्ही कोणत्या प्रकारचा गेम तयार करू शकता ते पहा.
+
+## असाइनमेंट
+
+[नमुना गेम तयार करा](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/7-bank-project/1-template-route/README.md b/translations/mr/7-bank-project/1-template-route/README.md
index 6bcb690e53..a3fa049e08 100644
--- a/translations/mr/7-bank-project/1-template-route/README.md
+++ b/translations/mr/7-bank-project/1-template-route/README.md
@@ -1,39 +1,86 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5d259f6962464ad91e671083aa0398f4",
-  "translation_date": "2025-10-22T16:21:41+00:00",
+  "original_hash": "351678bece18f07d9daa987a881fb062",
+  "translation_date": "2025-11-03T14:47:54+00:00",
   "source_file": "7-bank-project/1-template-route/README.md",
   "language_code": "mr"
 }
 -->
 # बँकिंग अ‍ॅप तयार करा भाग 1: HTML टेम्पलेट्स आणि वेब अ‍ॅपमधील रूट्स
 
-जेव्हा अपोलो 11 च्या मार्गदर्शन संगणकाने 1969 मध्ये चंद्रावर नेव्हिगेशन केले, तेव्हा त्याला संपूर्ण प्रणाली पुन्हा सुरू न करता वेगवेगळ्या प्रोग्राम्समध्ये स्विच करावे लागले. आधुनिक वेब अ‍ॅप्सही असंच काम करतात – ते तुम्हाला जे दिसतं ते बदलतात, परंतु सर्वकाही सुरुवातीपासून पुन्हा लोड करत नाहीत. यामुळे वापरकर्त्यांना अपेक्षित असलेला गुळगुळीत, प्रतिसादात्मक अनुभव निर्माण होतो.
+```mermaid
+journey
+    title Your Banking App Development Journey
+    section SPA Fundamentals
+      Understand single-page apps: 3: Student
+      Learn template concepts: 4: Student
+      Master DOM manipulation: 4: Student
+    section Routing Systems
+      Implement client-side routing: 4: Student
+      Handle browser history: 5: Student
+      Create navigation systems: 5: Student
+    section Professional Patterns
+      Build modular architecture: 5: Student
+      Apply best practices: 5: Student
+      Create user experiences: 5: Student
+```
 
-पारंपरिक वेबसाइट्स ज्या प्रत्येक संवादासाठी संपूर्ण पृष्ठे पुन्हा लोड करतात, त्यापेक्षा आधुनिक वेब अ‍ॅप्स फक्त बदलण्याची गरज असलेल्या भागांचे अपडेट्स करतात. हे दृष्टिकोन, जसे मिशन कंट्रोल वेगवेगळ्या डिस्प्ले दरम्यान स्विच करते आणि सतत संवाद ठेवते, तसाच गुळगुळीत अनुभव निर्माण करतो.
+जेव्हा अपोलो 11 च्या मार्गदर्शन संगणकाने 1969 मध्ये चंद्रावर नेव्हिगेशन केले, तेव्हा त्याला संपूर्ण प्रणाली पुन्हा सुरू न करता वेगवेगळ्या प्रोग्राम्समध्ये स्विच करावे लागले. आधुनिक वेब अ‍ॅप्सही असंच काम करतात – ते तुम्हाला जे दिसतं ते बदलतात, परंतु सर्वकाही पुन्हा लोड करत नाहीत. यामुळे वापरकर्त्यांना अपेक्षित असलेला गुळगुळीत, प्रतिसादात्मक अनुभव निर्माण होतो.
+
+पारंपरिक वेबसाइट्स जिथे प्रत्येक संवादासाठी संपूर्ण पृष्ठ पुन्हा लोड करतात, तिथे आधुनिक वेब अ‍ॅप्स फक्त बदलण्याची गरज असलेल्या भागांचे अद्यतन करतात. हे दृष्टिकोन, जसे मिशन कंट्रोल सतत संवाद ठेवत वेगवेगळ्या डिस्प्ले दरम्यान स्विच करते, तसाच गुळगुळीत अनुभव निर्माण करतो.
 
 यामुळे फरक इतका नाट्यमय का वाटतो:
 
 | पारंपरिक मल्टी-पेज अ‍ॅप्स | आधुनिक सिंगल-पेज अ‍ॅप्स |
 |----------------------------|-------------------------|
 | **नेव्हिगेशन** | प्रत्येक स्क्रीनसाठी संपूर्ण पृष्ठ पुन्हा लोड | त्वरित सामग्री स्विचिंग |
-| **कामगिरी** | संपूर्ण HTML डाउनलोडमुळे धीमे | अंशतः अपडेट्समुळे जलद |
+| **कामगिरी** | संपूर्ण HTML डाउनलोडमुळे धीमे | अंशतः अद्यतनांमुळे जलद |
 | **वापरकर्ता अनुभव** | पृष्ठ फ्लॅशेस त्रासदायक | गुळगुळीत, अ‍ॅपसारखे संक्रमण |
 | **डेटा शेअरिंग** | पृष्ठांमध्ये कठीण | सोपे स्टेट मॅनेजमेंट |
-| **विकास** | अनेक HTML फाइल्स सांभाळणे | एक HTML फाइल आणि डायनॅमिक टेम्पलेट्स |
+| **विकसन** | अनेक HTML फायलींचे व्यवस्थापन | डायनॅमिक टेम्पलेट्ससह एक HTML |
 
 **उत्क्रांती समजून घेणे:**
 - **पारंपरिक अ‍ॅप्स** प्रत्येक नेव्हिगेशन क्रियेसाठी सर्व्हर विनंत्या करतात
-- **आधुनिक SPAs** एकदाच लोड होतात आणि JavaScript वापरून सामग्री डायनॅमिकपणे अपडेट करतात
+- **आधुनिक SPAs** एकदाच लोड होतात आणि जावास्क्रिप्ट वापरून सामग्री गतिशीलपणे अद्यतनित करतात
 - **वापरकर्त्यांच्या अपेक्षा** आता त्वरित, अखंड संवादांना प्राधान्य देतात
-- **कामगिरी फायदे** बँडविड्थ कमी होणे आणि जलद प्रतिसाद
+- **कामगिरी फायदे** बँडविड्थ कमी आणि जलद प्रतिसाद यांचा समावेश करतात
+
+या धड्यात, आम्ही अनेक स्क्रीन असलेला बँकिंग अ‍ॅप तयार करू जो अखंडपणे एकत्रित होतो. जसे वैज्ञानिक वेगवेगळ्या प्रयोगांसाठी पुन्हा कॉन्फिगर करता येणारी मॉड्युलर उपकरणे वापरतात, तसेच आम्ही HTML टेम्पलेट्स वापरू जे पुनर्वापरयोग्य घटक म्हणून आवश्यकतेनुसार प्रदर्शित केले जाऊ शकतात.
 
-या धड्यात, आम्ही अनेक स्क्रीन असलेला बँकिंग अ‍ॅप तयार करू जो अखंडपणे एकत्रित होतो. जसे वैज्ञानिक वेगवेगळ्या प्रयोगांसाठी पुन्हा कॉन्फिगर करता येणारी मॉड्यूलर उपकरणे वापरतात, तसेच आम्ही HTML टेम्पलेट्स वापरू जे पुनर्वापर करता येणारे घटक आहेत आणि गरजेनुसार प्रदर्शित करता येतात.
+तुम्ही HTML टेम्पलेट्स (वेगवेगळ्या स्क्रीनसाठी पुनर्वापरयोग्य ब्लूप्रिंट्स), जावास्क्रिप्ट रूटिंग (स्क्रीन दरम्यान स्विच करणारी प्रणाली) आणि ब्राउझरचा इतिहास API (जो बॅक बटण अपेक्षेप्रमाणे कार्यरत ठेवतो) यासह काम कराल. React, Vue आणि Angular सारख्या फ्रेमवर्कद्वारे वापरल्या जाणाऱ्या मूलभूत तंत्रांचा वापर येथे केला जातो.
 
-तुम्ही HTML टेम्पलेट्स (वेगवेगळ्या स्क्रीनसाठी पुनर्वापर करता येणारे ब्लूप्रिंट्स), JavaScript रूटिंग (स्क्रीन दरम्यान स्विचिंगची प्रणाली) आणि ब्राउझरचा इतिहास API (बॅक बटण अपेक्षेप्रमाणे कार्य करते याची खात्री करणारी) यावर काम कराल. React, Vue आणि Angular सारख्या फ्रेमवर्क्समध्ये वापरल्या जाणाऱ्या मूलभूत तंत्रांचा वापर येथे केला जातो.
+शेवटी, तुम्हाला व्यावसायिक सिंगल-पेज अ‍ॅप्लिकेशन तत्त्वांचे प्रदर्शन करणारा कार्यरत बँकिंग अ‍ॅप मिळेल.
 
-शेवटी, तुम्हाला व्यावसायिक सिंगल-पेज अ‍ॅप्लिकेशन तत्त्वे दाखवणारा कार्यरत बँकिंग अ‍ॅप तयार होईल.
+```mermaid
+mindmap
+  root((Single-Page Applications))
+    Architecture
+      Template System
+      Client-side Routing
+      State Management
+      Event Handling
+    Templates
+      Reusable Components
+      Dynamic Content
+      DOM Manipulation
+      Content Switching
+    Routing
+      URL Management
+      History API
+      Navigation Logic
+      Browser Integration
+    User Experience
+      Fast Navigation
+      Smooth Transitions
+      Consistent State
+      Modern Interactions
+    Performance
+      Reduced Server Requests
+      Faster Page Transitions
+      Efficient Resource Usage
+      Better Responsiveness
+```
 
 ## प्री-लेक्चर क्विझ
 
@@ -41,11 +88,11 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### तुम्हाला काय लागेल
 
-आपल्या बँकिंग अ‍ॅपची चाचणी घेण्यासाठी स्थानिक वेब सर्व्हरची आवश्यकता असेल – काळजी करू नका, हे सोपे आहे! जर तुमच्याकडे आधीपासून सेटअप नसेल, तर फक्त [Node.js](https://nodejs.org) इंस्टॉल करा आणि तुमच्या प्रोजेक्ट फोल्डरमधून `npx lite-server` चालवा. ही सोपी कमांड स्थानिक सर्व्हर सुरू करते आणि तुमचा अ‍ॅप ब्राउझरमध्ये आपोआप उघडतो.
+आपल्या बँकिंग अ‍ॅपची चाचणी घेण्यासाठी स्थानिक वेब सर्व्हरची आवश्यकता असेल – काळजी करू नका, हे सोपे आहे! जर तुमच्याकडे आधीपासून सेटअप नसेल, तर फक्त [Node.js](https://nodejs.org) इंस्टॉल करा आणि तुमच्या प्रोजेक्ट फोल्डरमधून `npx lite-server` चालवा. ही सोपी कमांड स्थानिक सर्व्हर चालवते आणि तुमचा अ‍ॅप ब्राउझरमध्ये आपोआप उघडते.
 
 ### तयारी
 
-तुमच्या संगणकावर `bank` नावाचा फोल्डर तयार करा आणि त्यामध्ये `index.html` नावाची फाइल ठेवा. आपण या HTML [बॉयलरप्लेट](https://en.wikipedia.org/wiki/Boilerplate_code) पासून सुरुवात करू:
+तुमच्या संगणकावर `bank` नावाचा फोल्डर तयार करा आणि त्यात `index.html` नावाची फाइल ठेवा. आम्ही या HTML [बॉयलरप्लेट](https://en.wikipedia.org/wiki/Boilerplate_code) पासून सुरुवात करू:
 
 ```html
 <!DOCTYPE html>
@@ -62,13 +109,13 @@ CO_OP_TRANSLATOR_METADATA:
 ```
 
 **या बॉयलरप्लेटमध्ये काय आहे:**
-- **HTML5 दस्तऐवज संरचना** योग्य DOCTYPE घोषणेसह स्थापित करते
-- **कॅरेक्टर एन्कोडिंग** UTF-8 म्हणून कॉन्फिगर करते, आंतरराष्ट्रीय मजकूर समर्थनासाठी
-- **रेस्पॉन्सिव्ह डिझाइन सक्षम करते** मोबाइल सुसंगततेसाठी व्ह्यूपोर्ट मेटा टॅगसह
-- **वर्णनात्मक शीर्षक सेट करते** जे ब्राउझर टॅबमध्ये दिसते
-- **स्वच्छ बॉडी सेक्शन तयार करते** जिथे आपण आपला अ‍ॅप तयार करू
+- **स्थापना करते** HTML5 दस्तऐवज संरचना योग्य DOCTYPE घोषणेसह
+- **कॉन्फिगर करते** आंतरराष्ट्रीय मजकूर समर्थनासाठी UTF-8 कॅरेक्टर एन्कोडिंग
+- **सक्षम करते** मोबाइल सुसंगततेसाठी व्ह्यूपोर्ट मेटा टॅगसह प्रतिसादात्मक डिझाइन
+- **सेट करते** ब्राउझर टॅबमध्ये दिसणारे वर्णनात्मक शीर्षक
+- **तयार करते** स्वच्छ बॉडी सेक्शन जिथे आम्ही आमचा अ‍ॅप तयार करू
 
-> 📁 **प्रोजेक्ट स्ट्रक्चर प्रिव्ह्यू**
+> 📁 **प्रोजेक्ट संरचना पूर्वावलोकन**
 > 
 > **या धड्याच्या शेवटी, तुमच्या प्रोजेक्टमध्ये खालील गोष्टी असतील:**
 > ```
@@ -79,7 +126,7 @@ CO_OP_TRANSLATOR_METADATA:
 > ```
 > 
 > **फाइल जबाबदाऱ्या:**
-> - **index.html**: सर्व टेम्पलेट्स समाविष्ट करते आणि अ‍ॅपची संरचना प्रदान करते
+> - **index.html**: सर्व टेम्पलेट्स समाविष्ट करते आणि अ‍ॅप संरचना प्रदान करते
 > - **app.js**: रूटिंग, नेव्हिगेशन आणि टेम्पलेट व्यवस्थापन हाताळते
 > - **टेम्पलेट्स**: लॉगिन, डॅशबोर्ड आणि इतर स्क्रीनसाठी UI परिभाषित करतात
 
@@ -87,34 +134,52 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## HTML टेम्पलेट्स
 
-टेम्पलेट्स वेब विकासातील मूलभूत समस्येचे निराकरण करतात. जेव्हा गुटेनबर्गने 1440 च्या दशकात हलणाऱ्या टाइप प्रिंटिंगचा शोध लावला, तेव्हा त्याला समजले की संपूर्ण पृष्ठे कोरण्याऐवजी, तो पुनर्वापर करता येणारे अक्षर ब्लॉक्स तयार करू शकतो आणि गरजेनुसार त्यांची व्यवस्था करू शकतो. HTML टेम्पलेट्स याच तत्त्वावर काम करतात – प्रत्येक स्क्रीनसाठी वेगळ्या HTML फाइल्स तयार करण्याऐवजी, तुम्ही पुनर्वापर करता येणाऱ्या संरचना परिभाषित करता ज्या गरजेनुसार प्रदर्शित केल्या जाऊ शकतात.
+टेम्पलेट्स वेब विकासातील मूलभूत समस्या सोडवतात. जेव्हा गुटेनबर्गने 1440 च्या दशकात हलणाऱ्या टाइप प्रिंटिंगचा शोध लावला, तेव्हा त्याला समजले की संपूर्ण पृष्ठे कोरण्याऐवजी, तो पुनर्वापरयोग्य अक्षर ब्लॉक्स तयार करू शकतो आणि आवश्यकतेनुसार त्यांची व्यवस्था करू शकतो. HTML टेम्पलेट्स याच तत्त्वावर काम करतात – प्रत्येक स्क्रीनसाठी स्वतंत्र HTML फाइल्स तयार करण्याऐवजी, तुम्ही पुनर्वापरयोग्य संरचना परिभाषित करता ज्या आवश्यकतेनुसार प्रदर्शित केल्या जाऊ शकतात.
+
+```mermaid
+flowchart TD
+    A["📋 Template Definition"] --> B["💬 Hidden in DOM"]
+    B --> C["🔍 JavaScript Finds Template"]
+    C --> D["📋 Clone Template Content"]
+    D --> E["🔗 Attach to Visible DOM"]
+    E --> F["👁️ User Sees Content"]
+    
+    G["Login Template"] --> A
+    H["Dashboard Template"] --> A
+    I["Future Templates"] --> A
+    
+    style A fill:#e3f2fd
+    style D fill:#e8f5e8
+    style F fill:#fff3e0
+    style B fill:#f3e5f5
+```
 
-टेम्पलेट्सला तुमच्या अ‍ॅपच्या वेगवेगळ्या भागांसाठी ब्लूप्रिंट्स म्हणून विचार करा. जसे एखादा आर्किटेक्ट एक ब्लूप्रिंट तयार करतो आणि त्याचा अनेक वेळा वापर करतो, त्याऐवजी समान खोल्या पुन्हा काढत नाही, तसेच आम्ही टेम्पलेट्स एकदाच तयार करतो आणि गरजेनुसार त्यांचा वापर करतो. ब्राउझर हे टेम्पलेट्स लपवून ठेवतो जोपर्यंत JavaScript त्यांना सक्रिय करत नाही.
+टेम्पलेट्सला तुमच्या अ‍ॅपच्या वेगवेगळ्या भागांसाठी ब्लूप्रिंट्स म्हणून विचार करा. जसे एक आर्किटेक्ट एक ब्लूप्रिंट तयार करतो आणि त्याचा अनेक वेळा वापर करतो, त्याऐवजी समान खोल्या पुन्हा काढतो, तसेच आम्ही टेम्पलेट्स एकदाच तयार करतो आणि आवश्यकतेनुसार त्यांचा वापर करतो. ब्राउझर हे टेम्पलेट्स लपवून ठेवतो जोपर्यंत जावास्क्रिप्ट त्यांना सक्रिय करत नाही.
 
-जर तुम्हाला वेब पेजसाठी अनेक स्क्रीन तयार करायच्या असतील, तर एक उपाय म्हणजे तुम्हाला प्रत्येक स्क्रीनसाठी एक HTML फाइल तयार करावी लागेल. परंतु, या उपायामध्ये काही असुविधा आहेत:
+जर तुम्हाला वेब पृष्ठासाठी अनेक स्क्रीन तयार करायच्या असतील, तर एक उपाय म्हणजे तुम्हाला प्रत्येक स्क्रीनसाठी एक HTML फाइल तयार करावी लागेल. परंतु, या उपायामध्ये काही अडचणी आहेत:
 
-- स्क्रीन स्विच करताना तुम्हाला संपूर्ण HTML पुन्हा लोड करावी लागते, ज्यामुळे प्रक्रिया धीमी होऊ शकते.
-- वेगवेगळ्या स्क्रीनमध्ये डेटा शेअर करणे कठीण होते.
+- स्क्रीन स्विच करताना तुम्हाला संपूर्ण HTML पुन्हा लोड करावे लागते, जे धीमे होऊ शकते.
+- वेगवेगळ्या स्क्रीनमध्ये डेटा शेअर करणे कठीण आहे.
 
-दुसरा दृष्टिकोन म्हणजे फक्त एक HTML फाइल असणे आणि `<template>` घटक वापरून अनेक [HTML टेम्पलेट्स](https://developer.mozilla.org/docs/Web/HTML/Element/template) परिभाषित करणे. टेम्पलेट हा पुनर्वापर करता येणारा HTML ब्लॉक आहे जो ब्राउझरद्वारे प्रदर्शित केला जात नाही आणि JavaScript वापरून रनटाइमवर इंस्टंटेट करावा लागतो.
+दुसरा दृष्टिकोन म्हणजे फक्त एक HTML फाइल असणे आणि `<template>` घटक वापरून अनेक [HTML टेम्पलेट्स](https://developer.mozilla.org/docs/Web/HTML/Element/template) परिभाषित करणे. टेम्पलेट हा पुनर्वापरयोग्य HTML ब्लॉक आहे जो ब्राउझरद्वारे प्रदर्शित केला जात नाही आणि जावास्क्रिप्ट वापरून रनटाइमवर इंस्टंटेट करावा लागतो.
 
 ### चला तयार करूया
 
-आम्ही दोन मुख्य स्क्रीन असलेला बँक अ‍ॅप तयार करणार आहोत: लॉगिन पेज आणि डॅशबोर्ड. प्रथम, आपल्या HTML बॉडीमध्ये एक प्लेसहोल्डर घटक जोडूया – येथे आपले वेगवेगळे स्क्रीन दिसतील:
+आम्ही दोन मुख्य स्क्रीन असलेला बँक अ‍ॅप तयार करणार आहोत: लॉगिन पृष्ठ आणि डॅशबोर्ड. प्रथम, आपल्या HTML बॉडीमध्ये एक प्लेसहोल्डर घटक जोडा – येथे आपले वेगवेगळे स्क्रीन दिसतील:
 
 ```html
 <div id="app">Loading...</div>
 ```
 
 **या प्लेसहोल्डरचे समजून घेणे:**
-- **ID "app" असलेला कंटेनर तयार करते** जिथे सर्व स्क्रीन प्रदर्शित होतील
-- **लोडिंग संदेश दाखवते** जोपर्यंत JavaScript पहिला स्क्रीन सुरू करत नाही
-- **डायनॅमिक सामग्रीसाठी एकच माउंटिंग पॉइंट प्रदान करते**
-- **JavaScript वापरून `document.getElementById()` द्वारे सहज लक्ष्यीकरण सक्षम करते**
+- **तयार करते** "app" आयडी असलेला कंटेनर जिथे सर्व स्क्रीन प्रदर्शित केल्या जातील
+- **दाखवते** एक लोडिंग संदेश जोपर्यंत जावास्क्रिप्ट पहिला स्क्रीन सुरू करत नाही
+- **प्रदान करते** गतिशील सामग्रीसाठी एकच माउंटिंग पॉइंट
+- **सुलभ करते** जावास्क्रिप्टद्वारे `document.getElementById()` वापरून लक्ष्य करणे
 
 > 💡 **प्रो टिप**: या घटकाची सामग्री बदलली जाणार असल्याने, आम्ही लोडिंग संदेश किंवा इंडिकेटर ठेवू शकतो जो अ‍ॅप लोड होत असताना दिसेल.
 
-यानंतर, HTML टेम्पलेट लॉगिन पेजसाठी खाली जोडूया. सध्या आम्ही फक्त एक शीर्षक आणि एक सेक्शन ठेवू ज्यामध्ये नेव्हिगेशनसाठी लिंक असेल.
+यानंतर, HTML टेम्पलेट लॉगिन पृष्ठासाठी जोडा. सध्या आम्ही फक्त एक शीर्षक आणि एक सेक्शन ठेवू जिथे नेव्हिगेशनसाठी लिंक असेल.
 
 ```html
 <template id="login">
@@ -126,12 +191,12 @@ CO_OP_TRANSLATOR_METADATA:
 ```
 
 **या लॉगिन टेम्पलेटचे विश्लेषण:**
-- **JavaScript लक्ष्यीकरणासाठी "login" हा अनोखा ओळखकर्ता परिभाषित करते**
-- **मुख्य शीर्षक समाविष्ट करते** जे अ‍ॅपचे ब्रँडिंग स्थापित करते
-- **संबंधित सामग्री गटबद्ध करण्यासाठी सेमॅंटिक `<section>` घटक समाविष्ट करते**
-- **नेव्हिगेशन लिंक प्रदान करते** जी वापरकर्त्यांना डॅशबोर्डकडे नेईल
+- **परिभाषित करते** "login" आयडीसह टेम्पलेट जावास्क्रिप्ट लक्ष्य करण्यासाठी
+- **समाविष्ट करते** मुख्य शीर्षक जे अ‍ॅपचे ब्रँडिंग स्थापित करते
+- **अंतर्भूत करते** संबंधित सामग्री गटबद्ध करण्यासाठी एक सेमॅंटिक `<section>` घटक
+- **प्रदान करते** नेव्हिगेशन लिंक जी वापरकर्त्यांना डॅशबोर्डकडे नेईल
 
-यानंतर, डॅशबोर्ड पेजसाठी आणखी एक HTML टेम्पलेट जोडूया. या पेजमध्ये वेगवेगळ्या सेक्शन असतील:
+यानंतर, डॅशबोर्ड पृष्ठासाठी आणखी एक HTML टेम्पलेट जोडा. या पृष्ठामध्ये वेगवेगळ्या विभागांचा समावेश असेल:
 
 - शीर्षकासह हेडर आणि लॉगआउट लिंक
 - बँक खात्याचा वर्तमान शिल्लक
@@ -163,31 +228,47 @@ CO_OP_TRANSLATOR_METADATA:
 ```
 
 **या डॅशबोर्डचा प्रत्येक भाग समजून घेणे:**
-- **पृष्ठ संरचना तयार करते** सेमॅंटिक `<header>` घटकासह ज्यामध्ये नेव्हिगेशन आहे
-- **अ‍ॅप शीर्षक सतत प्रदर्शित करते** स्क्रीनवर ब्रँडिंगसाठी
-- **लॉगआउट लिंक प्रदान करते** जी लॉगिन स्क्रीनकडे परत जाते
-- **वर्तमान खाते शिल्लक दाखवते** समर्पित सेक्शनमध्ये
-- **व्यवहार डेटा व्यवस्थित करते** योग्य संरचित HTML टेबल वापरून
-- **टेबल हेडर्स परिभाषित करते** तारीख, वस्तू आणि रक्कम कॉलमसाठी
-- **टेबल बॉडी रिक्त ठेवते** डायनॅमिक सामग्री इंजेक्शनसाठी
+- **पृष्ठ संरचना तयार करते** नेव्हिगेशनसाठी सेमॅंटिक `<header>` घटकासह
+- **सुसंगतपणे प्रदर्शित करते** अ‍ॅप शीर्षक स्क्रीनवर ब्रँडिंगसाठी
+- **प्रदान करते** लॉगआउट लिंक जी लॉगिन स्क्रीनकडे परत जाते
+- **दाखवते** समर्पित विभागात चालू खाते शिल्लक
+- **व्यवस्थित करते** व्यवहार डेटा योग्य संरचित HTML टेबल वापरून
+- **परिभाषित करते** टेबल हेडर्स तारीख, ऑब्जेक्ट आणि रक्कम स्तंभांसाठी
+- **रिक्त ठेवते** टेबल बॉडी पुढील गतिशील सामग्री इंजेक्शनसाठी
 
 > 💡 **प्रो टिप**: HTML टेम्पलेट्स तयार करताना, तुम्हाला ते कसे दिसेल हे पाहायचे असल्यास, तुम्ही `<template>` आणि `</template>` ओळी `<!-- -->` ने कॉमेंट करू शकता.
 
-✅ तुम्हाला का वाटते की आम्ही टेम्पलेट्सवर `id` गुणधर्म वापरतो? आपण क्लासेससारखे काहीतरी वापरू शकतो का?
+### 🔄 **शैक्षणिक तपासणी**
+**टेम्पलेट सिस्टम समजून घेणे**: जावास्क्रिप्ट अंमलात आणण्यापूर्वी, सुनिश्चित करा:
+- ✅ टेम्पलेट्स नियमित HTML घटकांपेक्षा कसे वेगळे आहेत
+- ✅ टेम्पलेट्स जावास्क्रिप्टद्वारे सक्रिय होईपर्यंत लपून राहतात का
+- ✅ टेम्पलेट्समध्ये सेमॅंटिक HTML संरचनेचे महत्त्व
+- ✅ टेम्पलेट्स पुनर्वापरयोग्य UI घटक सक्षम कसे करतात
+
+**जलद स्व-परीक्षण**: जर तुम्ही तुमच्या HTML मधून `<template>` टॅग काढले तर काय होईल?
+*उत्तर: सामग्री लगेच दिसते आणि तिचे टेम्पलेट कार्यक्षमता गमावते*
+
+**आर्किटेक्चर फायदे**: टेम्पलेट्स प्रदान करतात:
+- **पुनर्वापरयोग्यता**: एक परिभाषित, अनेक उदाहरणे
+- **कामगिरी**: अनावश्यक HTML पार्सिंग नाही
+- **देखभालक्षमता**: केंद्रीकृत UI संरचना
+- **लवचिकता**: गतिशील सामग्री स्विचिंग
+
+✅ तुम्हाला का वाटते की आम्ही टेम्पलेट्सवर `id` गुणधर्म वापरतो? आम्ही काहीतरी वेगळे जसे की क्लासेस वापरू शकतो का?
 
-## JavaScript वापरून टेम्पलेट्स कार्यक्षम बनवणे
+## जावास्क्रिप्टसह टेम्पलेट्स कार्यक्षम बनवणे
 
-आता आपल्याला आपल्या टेम्पलेट्स कार्यक्षम बनवायचे आहेत. जसे 3D प्रिंटर डिजिटल ब्लूप्रिंट घेतो आणि भौतिक वस्तू तयार करतो, तसेच JavaScript आमच्या लपवलेल्या टेम्पलेट्स घेतो आणि वापरकर्त्यांना दिसणारे, संवादात्मक घटक तयार करतो.
+आता आपल्याला आपल्या टेम्पलेट्स कार्यक्षम बनवायचे आहेत. जसे 3D प्रिंटर डिजिटल ब्लूप्रिंट घेतो आणि भौतिक वस्तू तयार करतो, तसेच जावास्क्रिप्ट आमचे लपवलेले टेम्पलेट्स घेतो आणि दृश्यमान, परस्परसंवादी घटक तयार करतो जे वापरकर्ते पाहू आणि वापरू शकतात.
 
-प्रक्रिया तीन सातत्यपूर्ण चरणांचे अनुसरण करते जी आधुनिक वेब विकासाची पायाभूत रचना तयार करतात. एकदा तुम्ही हा पॅटर्न समजून घेतला की, तुम्हाला तो अनेक फ्रेमवर्क्स आणि लायब्ररीमध्ये ओळखता येईल.
+प्रक्रिया तीन सुसंगत चरणांचे अनुसरण करते जे आधुनिक वेब विकासाचा पाया तयार करतात. एकदा तुम्ही हा नमुना समजून घेतला की, तुम्हाला तो अनेक फ्रेमवर्क्स आणि लायब्ररीमध्ये ओळखता येईल.
 
-जर तुम्ही तुमची सध्याची HTML फाइल ब्राउझरमध्ये वापरली, तर तुम्हाला दिसेल की ती `Loading...` दाखवण्यात अडकते. कारण आपल्याला HTML टेम्पलेट्स इंस्टंटेट आणि प्रदर्शित करण्यासाठी काही JavaScript कोड जोडण्याची आवश्यकता आहे.
+जर तुम्ही तुमची सध्याची HTML फाइल ब्राउझरमध्ये वापरली, तर तुम्हाला `Loading...` दिसत राहील. कारण आम्हाला HTML टेम्पलेट्स इंस्टंटेट आणि प्रदर्शित करण्यासाठी काही जावास्क्रिप्ट कोड जोडण्याची आवश्यकता आहे.
 
 टेम्पलेट इंस्टंटेट करणे सामान्यतः 3 चरणांमध्ये केले जाते:
 
 1. DOM मध्ये टेम्पलेट घटक मिळवा, उदाहरणार्थ [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) वापरून.
 2. टेम्पलेट घटक क्लोन करा, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) वापरून.
-3. ते दृश्यमान घटकाखाली DOM मध्ये जोडून द्या, उदाहरणार्थ [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) वापरून.
+3. दृश्यमान घटकाखाली DOM मध्ये जोडणे, उदाहरणार्थ [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) वापरून.
 
 ```mermaid
 flowchart TD
@@ -209,26 +290,26 @@ flowchart TD
 **प्रक्रियेचे दृश्यात्मक विश्लेषण:**
 - **चरण 1** DOM संरचनेत लपवलेला टेम्पलेट शोधतो
 - **चरण 2** सुरक्षितपणे बदलता येणारी कार्यरत प्रत तयार करतो
-- **चरण 3** प्रत दृश्यमान पृष्ठ क्षेत्रामध्ये घालतो
-- **परिणाम** म्हणजे कार्यक्षम स्क्रीन जी वापरकर्ते पाहू आणि वापरू शकतात
+- **चरण 3** प्रत दृश्यमान पृष्ठ क्षेत्रात घालतो
+- **परिणाम** एक कार्यक्षम स्क्रीन आहे ज्यावर वापरकर्ते संवाद साधू शकतात
 
-✅ आपण टेम्पलेट क्लोन करण्यापूर्वी ते DOM मध्ये जोडण्याची आवश्यकता का आहे? जर आपण हा चरण वगळला तर काय होईल?
+✅ आम्हाला टेम्पलेट क्लोन करण्याची आवश्यकता का आहे? जर आपण हा चरण वगळला तर काय होईल असे तुम्हाला वाटते?
 
 ### कार्य
 
-तुमच्या प्रोजेक्ट फोल्डरमध्ये `app.js` नावाची नवीन फाइल तयार करा आणि ती फाइल तुमच्या HTML च्या `<head>` सेक्शनमध्ये इम्पोर्ट करा:
+तुमच्या प्रोजेक्ट फोल्डरमध्ये `app.js` नावाची नवीन फाइल तयार करा आणि ती फाइल तुमच्या HTML च्या `<head>` विभागात आयात करा:
 
 ```html
 <script src="app.js" defer></script>
 ```
 
-**या स्क्रिप्ट इम्पोर्टचे समजून घेणे:**
-- **JavaScript फाइल HTML दस्तऐवजाशी लिंक करते**
-- **`defer` गुणधर्म वापरते** जेणेकरून HTML पार्सिंग पूर्ण झाल्यानंतर स्क्रिप्ट चालते
-- **सर्व DOM घटकांमध्ये प्रवेश सक्षम करते** कारण ते स्क्रिप्ट अंमलबजावणीपूर्वी पूर्णपणे लोड केले जातात
-- **स्क्रिप्ट लोडिंग आणि कामगिरीसाठी आधुनिक सर्वोत्तम पद्धतींचे अनुसरण करते**
+**या स्क्रिप्ट आयात समजून घेणे:**
+- **जोडते** जावास्क्रिप्ट फाइल HTML दस्तऐवजाशी
+- **वापरते** `defer` गुणधर्म जेणेकरून स्क्रिप्ट HTML पार्सिंग पूर्ण झाल्यानंतर चालते
+- **सक्षम करते** सर्व DOM घटकांमध्ये प्रवेश कारण ते स्क्रिप्ट अंमलात आणण्यापूर्वी पूर्णपणे लोड होतात
+- **अनुसरण करते** स्क्रिप्ट लोडिंग आणि कामगिरीसाठी आधुनिक सर्वोत्तम पद्धती
 
-आता `app.js` मध्ये, आपण एक नवीन फंक्शन `updateRoute` तयार करूया:
+आता `app.js` मध्ये, आम्ही एक नवीन फंक्शन `updateRoute` तयार करू:
 
 ```js
 function updateRoute(templateId) {
@@ -240,8 +321,8 @@ function updateRoute(templateId) {
 }
 ```
 
-**चरणानुसार काय घडते ते येथे आहे:**
-- **टेम्पलेट घटक शोधतो** त्याच्या अनोख्या ID वापरून
+**चरण-दर-चरण, येथे काय घडत आहे:**
+- **टेम्पलेट घटक शोधतो** त्याच्या अद्वितीय आयडी वापरून
 - **टेम्पलेटच्या सामग्रीची डीप कॉपी तयार करतो** `cloneNode(true)` वापरून
 - **अ‍ॅप कंटेनर शोधतो** जिथे सामग्री प्रदर्शित केली जाईल
 - **अ‍ॅप कंटेनरमधून कोणतीही विद्यमान सामग्री साफ करतो**
@@ -254,82 +335,121 @@ updateRoute('login');
 ```
 
 **या फंक्शन कॉलने काय साध्य केले:**
-- **लॉगिन टेम्पलेट सक्रिय करते** त्याचा ID पॅरामीटर म्हणून पास करून
-- **वेगवेगळ्या अ‍ॅप स्क्रीन दरम्यान प्रोग्रामॅटिकली स्विच कसे करावे ते दाखवते**
+- **लॉगिन टेम्पलेट सक्रिय करते** त्याचा आयडी पॅरामीटर म्हणून पास करून
+- **प्रदर्शन करते** वेगवेगळ्या अ‍ॅप स्क्रीन दरम्यान प्रोग्रामॅटिक स्विचिंग कसे करावे
 - **"Loading..." संदेशाच्या जागी लॉगिन स्क्रीन दाखवते**
 
 ✅ या कोडचा उद्देश काय आहे `app.innerHTML = '';`? त्याशिवाय काय होते?
 
 ## रूट्स तयार करणे
 
-रूटिंग म्हणजे URL ला योग्य सामग्रीशी जोडणे. जसे सुरुवातीच्या टेलिफोन ऑपरेटर्सने कॉल्स कनेक्ट करण्यासाठी स्विचबोर्ड्स वापरले – ते येणाऱ्या विनंती घेत आणि योग्य गंतव्याशी जोडत. वेब रूटिंगही तसंच काम करते, URL विनंती घेत आणि कोणती सामग्री प्रदर्शित करायची ते ठरवते.
+रूटिंग म्हणजे URL ला योग्य सामग्रीशी जोडणे. जसे की सुरुवातीच्या टेलिफोन ऑपरेटरने स्विचबोर्ड वापरून कॉल्स जोडले – ते येणारी विनंती घेत आणि योग्य गंतव्यस्थानी रूट करत. वेब रूट
+आता आपण `updateRoute` फंक्शनमध्ये थोडा बदल करूया. `templateId` थेट आर्ग्युमेंट म्हणून पास करण्याऐवजी, आपण प्रथम वर्तमान URL पाहून आणि नंतर आमच्या मॅपचा वापर करून संबंधित टेम्पलेट ID मूल्य मिळवू इच्छितो. URL मधून फक्त पथ विभाग मिळवण्यासाठी आपण [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) वापरू शकतो.
 
-पारंपरिकपणे, वेब सर्व्हर्सने वेगवेगळ्या URL साठी वेगवेगळ्या HTML फाइल्स दिल्या. आपण सिंगल-पेज अ‍ॅप तयार करत असल्याने, आपल्याला JavaScript वापरून हे रूटिंग स्वतः हाताळावे लागेल. या दृष्टिकोनामुळे वापरकर्ता अनुभव आणि कामगिरीवर अधिक नियंत्रण मिळते.
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
 
-```mermaid
-flowchart LR
-    A["🌐 URL Path<br/>/dashboard"] --> B["🗺️ Routes Object<br/>Lookup"]
-    B --> C["🎯 Template ID<br/>'dashboard'"]
-    C --> D["📄 Find Template<br/>getElementById"]
-    D --> E["👁️ Display Screen<br/>Clone & Append"]
-    
-    F["📍 /login"] --> G["🎯 'login'"]
-    H["📍 /unknown"] --> I["❌ Not Found"]
-    I --> J["🔄 Redirect to /login"]
-    
-    style B fill:#e3f2fd
-    style E fill:#e8f5e8
-    style I fill:#ffebee
-    style J fill:#fff3e0
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
 ```
 
-**रूटिंग फ्लो समजून घेणे:**
-- **URL बदल** आमच्या रूट्स कॉन्फिगरेशनमध्ये लुकअप ट्रिगर करतो
-- **वैध रूट्स** विशिष्ट टेम्पलेट IDs शी मॅप करतात जे रेंडरिंगसाठी आहेत
-- **अवैध रूट्स** तुटलेल्या स्टेट्स टाळण्यासाठी फॉलबॅक वर्तन ट्रिगर करतात
-- **टेम्पलेट रेंडरिंग** आपण शिकलेल्या तीन-चरण प्रक्रियेचे अनुसरण करते
-
-वेब अ‍ॅपबद्दल बोलताना, आम्ही *रूटिंग* म्हणजे URL ला विशिष्ट स्क्रीनशी मॅप करण्याचा हेतू म्हणतो जो प्रदर्शित केला जावा. अनेक HTML फाइल्स असलेल्या वेबसाइटवर, हे आपोआप केले जाते कारण फाइल पथ URL वर प्रतिबिंबित होतात. उदाहरणार्थ, तुमच्या प्रोजेक्ट फोल्डरमध्ये या फाइल्स असल्यास:
+**येथे काय घडते याचे विश्लेषण:**
+- **ब्राउझरच्या URL मधून** `window.location.pathname` वापरून वर्तमान पथ काढतो
+- **आमच्या routes ऑब्जेक्टमध्ये** संबंधित route कॉन्फिगरेशन शोधतो
+- **route कॉन्फिगरेशनमधून** टेम्पलेट ID मिळवतो
+- **पूर्वीप्रमाणेच** टेम्पलेट रेंडरिंग प्रक्रिया अनुसरतो
+- **URL बदलांना प्रतिसाद देणारी** डायनॅमिक प्रणाली तयार करतो
 
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
+येथे आम्ही घोषित केलेल्या routes ला संबंधित टेम्पलेटशी मॅप केले आहे. तुम्ही ब्राउझरमध्ये URL मॅन्युअली बदलून ते योग्य प्रकारे कार्य करते का ते तपासू शकता.
 
-जर तुम्ही `mywebsite` र
-✅ URL मध्ये अज्ञात मार्ग प्रविष्ट केल्यास काय होते? आपण हे कसे सोडवू शकतो?
+✅ जर तुम्ही URL मध्ये अज्ञात पथ प्रविष्ट केला तर काय होते? आपण हे कसे सोडवू शकतो?
 
 ## नेव्हिगेशन जोडणे
 
-रूटिंग सेट केल्यानंतर, वापरकर्त्यांना अॅपमधून नेव्हिगेट करण्याचा मार्ग आवश्यक आहे. पारंपरिक वेबसाइट्सवर लिंकवर क्लिक केल्यावर संपूर्ण पृष्ठ पुन्हा लोड होते, परंतु आम्हाला URL आणि सामग्री पृष्ठ रीफ्रेश न करता अपडेट करायची आहे. यामुळे डेस्कटॉप अॅप्लिकेशन्सप्रमाणे वेगवेगळ्या दृश्यांमध्ये स्विच करताना अधिक गुळगुळीत अनुभव तयार होतो.
+रूटिंग स्थापित झाल्यानंतर, वापरकर्त्यांना अॅपमधून नेव्हिगेट करण्याचा मार्ग आवश्यक आहे. पारंपरिक वेबसाइट्सवर लिंकवर क्लिक केल्यावर संपूर्ण पृष्ठे पुन्हा लोड होतात, परंतु आम्हाला URL आणि सामग्री पृष्ठ रीफ्रेश न करता अपडेट करायची आहे. यामुळे डेस्कटॉप अॅप्लिकेशन्स जसे वेगवेगळ्या दृश्यांमध्ये स्विच करतात तसा गुळगुळीत अनुभव तयार होतो.
 
-आपल्याला दोन गोष्टी समन्वयित कराव्या लागतील: ब्राउझरचा URL अपडेट करणे जेणेकरून वापरकर्ते पृष्ठे बुकमार्क करू शकतील आणि लिंक शेअर करू शकतील, आणि योग्य सामग्री प्रदर्शित करणे. योग्य प्रकारे अंमलात आणल्यास, हे आधुनिक अॅप्लिकेशन्समधून वापरकर्त्यांना अपेक्षित असलेले अखंड नेव्हिगेशन तयार करते.
+आपल्याला दोन गोष्टी समन्वयित करणे आवश्यक आहे: ब्राउझरचा URL अपडेट करणे जेणेकरून वापरकर्ते पृष्ठे बुकमार्क करू शकतील आणि लिंक शेअर करू शकतील, आणि योग्य सामग्री प्रदर्शित करणे. योग्य प्रकारे अंमलात आणल्यास, हे आधुनिक अॅप्लिकेशन्सकडून अपेक्षित गुळगुळीत नेव्हिगेशन तयार करते.
 
-> 🏗️ **आर्किटेक्चर अंतर्दृष्टी**: नेव्हिगेशन सिस्टम घटक
->
-> **आपण काय तयार करत आहात:**
-> - **🔄 URL व्यवस्थापन**: पृष्ठ पुन्हा लोड न करता ब्राउझर अॅड्रेस बार अपडेट करते
-> - **📋 टेम्पलेट सिस्टम**: वर्तमान रूटवर आधारित सामग्री गतिशीलपणे बदलते  
-> - **📚 इतिहास एकत्रीकरण**: ब्राउझरच्या मागे/पुढे बटण कार्यक्षमता राखते
-> - **🛡️ त्रुटी हाताळणी**: अवैध किंवा गहाळ रूटसाठी सौम्य फॉलबॅक
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant App
+    participant Template
+    
+    User->>Browser: Clicks "Login" link
+    Browser->>App: onclick event triggered
+    App->>App: preventDefault() & navigate('/dashboard')
+    App->>Browser: history.pushState('/dashboard')
+    Browser->>Browser: URL updates to /dashboard
+    App->>App: updateRoute() called
+    App->>Template: Find & clone dashboard template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display dashboard screen
+    
+    Note over User,Template: User clicks browser back button
+    
+    User->>Browser: Clicks back button
+    Browser->>Browser: History moves back to /login
+    Browser->>App: popstate event fired
+    App->>App: updateRoute() called automatically
+    App->>Template: Find & clone login template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display login screen
+```
+
+### 🔄 **शैक्षणिक तपासणी**
+**सिंगल-पेज अॅप्लिकेशन आर्किटेक्चर**: संपूर्ण प्रणालीची तुमची समज तपासा:
+- ✅ क्लायंट-साइड रूटिंग पारंपरिक सर्व्हर-साइड रूटिंगपेक्षा कसे वेगळे आहे?
+- ✅ SPA नेव्हिगेशनसाठी History API का आवश्यक आहे?
+- ✅ टेम्पलेट्स पृष्ठ रीफ्रेश न करता डायनॅमिक सामग्री कशी सक्षम करतात?
+- ✅ नेव्हिगेशन इंटरसेप्ट करण्यासाठी इव्हेंट हँडलिंगची भूमिका काय आहे?
+
+**सिस्टम इंटिग्रेशन**: तुमचे SPA दाखवते:
+- **टेम्पलेट व्यवस्थापन**: डायनॅमिक सामग्रीसह पुनर्वापरयोग्य UI घटक
+- **क्लायंट-साइड रूटिंग**: सर्व्हर विनंतीशिवाय URL व्यवस्थापन
+- **इव्हेंट-ड्रिव्हन आर्किटेक्चर**: प्रतिसादात्मक नेव्हिगेशन आणि वापरकर्ता संवाद
+- **ब्राउझर इंटिग्रेशन**: योग्य इतिहास आणि बॅक/फॉरवर्ड बटण समर्थन
+- **परफॉर्मन्स ऑप्टिमायझेशन**: जलद संक्रमण आणि कमी सर्व्हर लोड
+
+**प्रोफेशनल पॅटर्न्स**: तुम्ही अंमलात आणले:
+- **मॉडेल-व्ह्यू विभाजन**: टेम्पलेट्स अॅप्लिकेशन लॉजिकपासून वेगळे
+- **स्टेट व्यवस्थापन**: URL स्टेट प्रदर्शित सामग्रीसह समक्रमित
+- **प्रोग्रेसिव्ह एन्हांसमेंट**: जावास्क्रिप्ट मूलभूत HTML कार्यक्षमता वाढवते
+- **वापरकर्ता अनुभव**: पृष्ठ रीफ्रेश न करता गुळगुळीत, अॅपसारखे नेव्हिगेशन
+
+> � **आर्किटेक्चर अंतर्दृष्टी**: नेव्हिगेशन सिस्टम घटक
 >
-> **घटक कसे एकत्र काम करतात:**
-> - नेव्हिगेशन इव्हेंट्स (क्लिक्स, इतिहास बदल) ऐकते
-> - इतिहास API वापरून URL अपडेट करते
-> - नवीन रूटसाठी योग्य टेम्पलेट रेंडर करते
-> - अखंड वापरकर्ता अनुभव कायम ठेवते
+> **तुम्ही काय तयार करत आहात:**
+> - **🔄 URL व्यवस्थापन**: पृष्ठ रीफ्रेश न करता ब्राउझर अॅड्रेस बार अपडेट करते
+> - **📋 टेम्पलेट सिस्टम**: वर्तमान रूटवर आधारित सामग्री डायनॅमिकपणे बदलते  
+> - **📚 इतिहास समाकलन**: ब्राउझर बॅक/फॉरवर्ड बटण कार्यक्षमता राखते
+> - **🛡️ त्रुटी हाताळणी**: अवैध किंवा गहाळ रूटसाठी ग्रेसफुल फॉलबॅक
+
+> **घटक एकत्र कसे कार्य करतात:**
+> - **नेव्हिगेशन इव्हेंट्स** (क्लिक्स, इतिहास बदल) ऐकते
+> - **URL अपडेट करते** History API वापरून
+> - **योग्य टेम्पलेट रेंडर करते** नवीन रूटसाठी
+> - **गुळगुळीत वापरकर्ता अनुभव राखते** संपूर्ण अॅपमध्ये
 
-आमच्या अॅपसाठी पुढील पायरी म्हणजे URL मॅन्युअली बदलण्याची गरज न पडता पृष्ठांमध्ये नेव्हिगेट करण्याची शक्यता जोडणे. याचा अर्थ दोन गोष्टी आहेत:
+आमच्या अॅपसाठी पुढील पायरी म्हणजे URL मॅन्युअली बदलण्याची आवश्यकता न ठेवता पृष्ठांमध्ये नेव्हिगेट करण्याची शक्यता जोडणे. याचा अर्थ दोन गोष्टी आहेत:
 
   1. वर्तमान URL अपडेट करणे
   2. नवीन URL वर आधारित प्रदर्शित टेम्पलेट अपडेट करणे
 
-आम्ही `updateRoute` फंक्शनसह दुसऱ्या भागाची आधीच काळजी घेतली आहे, त्यामुळे आम्हाला वर्तमान URL कसे अपडेट करायचे ते शोधावे लागेल.
+आम्ही `updateRoute` फंक्शनसह दुसऱ्या भागाची काळजी घेतली आहे, त्यामुळे आम्हाला वर्तमान URL कसे अपडेट करायचे ते शोधावे लागेल.
 
-आपल्याला JavaScript आणि विशेषतः [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) वापरावे लागेल जे URL अपडेट करण्यास आणि HTML पुन्हा लोड न करता ब्राउझिंग इतिहासात नवीन नोंदी तयार करण्यास अनुमती देते.
+आपल्याला जावास्क्रिप्ट आणि विशेषतः [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) वापरावे लागेल जे URL अपडेट करण्यास आणि HTML पुन्हा लोड न करता ब्राउझिंग इतिहासात नवीन एंट्री तयार करण्यास अनुमती देते.
 
-> ⚠️ **महत्त्वाची टीप**: HTML अँकर एलिमेंट [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) स्वतःच वेगवेगळ्या URL साठी हायपरलिंक्स तयार करण्यासाठी वापरले जाऊ शकते, परंतु ते ब्राउझरला HTML पुन्हा लोड करण्यास प्रवृत्त करेल. कस्टम जावास्क्रिप्टसह रूटिंग हाताळताना, क्लिक इव्हेंटवर `preventDefault()` फंक्शन वापरून हे वर्तन टाळणे आवश्यक आहे.
+> ⚠️ **महत्त्वाची टीप**: HTML अँकर एलिमेंट [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) स्वतःच वेगवेगळ्या URL वर हायपरलिंक्स तयार करण्यासाठी वापरले जाऊ शकते, परंतु ते ब्राउझरला डिफॉल्टनुसार HTML पुन्हा लोड करेल. कस्टम जावास्क्रिप्टसह रूटिंग हाताळताना, क्लिक इव्हेंटवर `preventDefault()` फंक्शन वापरून हे वर्तन टाळणे आवश्यक आहे.
 
 ### कार्य
 
@@ -343,14 +463,14 @@ function navigate(path) {
 ```
 
 **या नेव्हिगेशन फंक्शनचे समजून घेणे:**
-- `history.pushState` वापरून ब्राउझरचा URL नवीन मार्गावर अपडेट करते
-- योग्य मागे/पुढे बटण समर्थनासाठी ब्राउझरच्या इतिहास स्टॅकमध्ये नवीन नोंदी जोडते
-- संबंधित टेम्पलेट प्रदर्शित करण्यासाठी `updateRoute()` फंक्शन ट्रिगर करते
-- पृष्ठ पुन्हा लोड न करता सिंगल-पेज अॅप अनुभव राखते
+- **ब्राउझरचा URL** `history.pushState` वापरून नवीन पथावर अपडेट करते
+- **ब्राउझरच्या इतिहास स्टॅकमध्ये** योग्य बॅक/फॉरवर्ड बटण समर्थनासाठी नवीन एंट्री जोडते
+- **`updateRoute()` फंक्शन ट्रिगर करते** संबंधित टेम्पलेट प्रदर्शित करण्यासाठी
+- **पृष्ठ रीफ्रेश न करता** सिंगल-पेज अॅप अनुभव राखते
 
-ही पद्धत प्रथम दिलेल्या मार्गावर आधारित वर्तमान URL अपडेट करते, नंतर टेम्पलेट अपडेट करते. `window.location.origin` प्रॉपर्टी URL रूट परत करते, ज्यामुळे दिलेल्या मार्गावरून संपूर्ण URL पुन्हा तयार करणे शक्य होते.
+ही पद्धत प्रथम दिलेल्या पथावर आधारित वर्तमान URL अपडेट करते, नंतर टेम्पलेट अपडेट करते. `window.location.origin` प्रॉपर्टी URL रूट परत करते, ज्यामुळे दिलेल्या पथावरून संपूर्ण URL पुन्हा तयार करणे शक्य होते.
 
-आता आमच्याकडे हे फंक्शन आहे, आम्ही समस्या सोडवू शकतो जेव्हा एखादा मार्ग कोणत्याही परिभाषित रूटशी जुळत नाही. आम्ही `updateRoute` फंक्शनमध्ये बदल करून एखाद्या विद्यमान रूटवर फॉलबॅक जोडू जेव्हा जुळणारा मार्ग सापडत नाही.
+आता आमच्याकडे हे फंक्शन आहे, आम्ही रूट परिभाषित केलेल्या कोणत्याही रूटशी जुळत नसल्यास आमच्याकडे असलेल्या समस्येची काळजी घेऊ शकतो. आम्ही `updateRoute` फंक्शन बदलून एखाद्या विद्यमान रूटवर फॉलबॅक जोडू जेव्हा आम्हाला जुळणारा रूट सापडत नाही.
 
 ```js
 function updateRoute() {
@@ -369,15 +489,15 @@ function updateRoute() {
 }
 ```
 
-**लक्षात ठेवण्याचे महत्त्वाचे मुद्दे:**
-- वर्तमान मार्गासाठी रूट अस्तित्वात आहे का ते तपासते
-- अवैध रूटवर प्रवेश केल्यावर लॉगिन पृष्ठावर पुनर्निर्देशित करते
-- तुटलेले नेव्हिगेशन टाळण्यासाठी फॉलबॅक यंत्रणा प्रदान करते
-- चुकीच्या URL सह देखील वापरकर्त्यांना नेहमी वैध स्क्रीन दिसते याची खात्री करते
+**महत्त्वाचे मुद्दे लक्षात ठेवा:**
+- **तपासते** की वर्तमान पथासाठी रूट अस्तित्वात आहे का
+- **लॉगिन पृष्ठावर पुनर्निर्देशित करते** जेव्हा अवैध रूट प्रवेश केला जातो
+- **फॉलबॅक यंत्रणा प्रदान करते** जी तुटलेले नेव्हिगेशन टाळते
+- **सुनिश्चित करते** की वापरकर्त्यांना नेहमी वैध स्क्रीन दिसते, अगदी चुकीच्या URL सह
 
 जर रूट सापडला नाही, तर आम्ही आता `login` पृष्ठावर पुनर्निर्देशित करू.
 
-आता लिंकवर क्लिक केल्यावर URL मिळवण्यासाठी आणि ब्राउझरच्या डिफॉल्ट लिंक वर्तन टाळण्यासाठी एक फंक्शन तयार करूया:
+आता लिंक क्लिक केल्यावर URL मिळवण्यासाठी आणि ब्राउझरच्या डिफॉल्ट लिंक वर्तन टाळण्यासाठी एक फंक्शन तयार करूया:
 
 ```js
 function onLinkClick(event) {
@@ -387,10 +507,10 @@ function onLinkClick(event) {
 ```
 
 **या क्लिक हँडलरचे विश्लेषण:**
-- `preventDefault()` वापरून ब्राउझरचे डिफॉल्ट लिंक वर्तन टाळते
-- क्लिक केलेल्या लिंक एलिमेंटमधून गंतव्य URL काढते
-- पृष्ठ पुन्हा लोड न करता आमचे कस्टम नेव्हिगेट फंक्शन कॉल करते
-- गुळगुळीत सिंगल-पेज अॅप्लिकेशन अनुभव राखते
+- **ब्राउझरचे डिफॉल्ट लिंक वर्तन टाळते** `preventDefault()` वापरून
+- **क्लिक केलेल्या लिंक एलिमेंटमधून** गंतव्य URL काढते
+- **पृष्ठ पुन्हा लोड न करता** आमच्या कस्टम नेव्हिगेट फंक्शनला कॉल करते
+- **सिंगल-पेज अॅप अनुभव राखते**
 
 ```html
 <a href="/dashboard" onclick="onLinkClick(event)">Login</a>
@@ -399,22 +519,22 @@ function onLinkClick(event) {
 ```
 
 **या onclick बाइंडिंगने काय साध्य केले:**
-- प्रत्येक लिंकला आमच्या कस्टम नेव्हिगेशन सिस्टमशी जोडते
-- प्रक्रिया करण्यासाठी क्लिक इव्हेंट आमच्या `onLinkClick` फंक्शनला पास करते
-- पृष्ठ पुन्हा लोड न करता गुळगुळीत नेव्हिगेशन सक्षम करते
-- वापरकर्त्यांना बुकमार्क किंवा शेअर करता येईल अशी योग्य URL रचना राखते
+- **प्रत्येक लिंकला** आमच्या कस्टम नेव्हिगेशन सिस्टमशी जोडते
+- **क्लिक इव्हेंटला** आमच्या `onLinkClick` फंक्शनकडे प्रक्रिया करण्यासाठी पास करते
+- **पृष्ठ रीफ्रेश न करता गुळगुळीत नेव्हिगेशन सक्षम करते**
+- **योग्य URL संरचना राखते** जी वापरकर्ते बुकमार्क किंवा शेअर करू शकतात
 
-[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) अॅट्रिब्युट क्लिक इव्हेंटला जावास्क्रिप्ट कोडशी बाइंड करते, येथे `navigate()` फंक्शन कॉल.
+[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) अॅट्रिब्युट `click` इव्हेंटला जावास्क्रिप्ट कोडशी बाइंड करते, येथे `navigate()` फंक्शनला कॉल.
 
 या लिंकवर क्लिक करून पहा, आता तुम्ही तुमच्या अॅपच्या वेगवेगळ्या स्क्रीनमध्ये नेव्हिगेट करू शकता.
 
-✅ `history.pushState` पद्धत HTML5 मानकाचा भाग आहे आणि [सर्व आधुनिक ब्राउझरमध्ये](https://caniuse.com/?search=pushState) अंमलात आणली आहे. जर तुम्ही जुन्या ब्राउझरसाठी वेब अॅप तयार करत असाल, तर तुम्ही या API च्या जागी एक युक्ती वापरू शकता: मार्गाच्या आधी [हॅश (`#`)](https://en.wikipedia.org/wiki/URI_fragment) वापरून तुम्ही रूटिंग अंमलात आणू शकता जे नियमित अँकर नेव्हिगेशनसह कार्य करते आणि पृष्ठ पुन्हा लोड करत नाही, कारण त्याचा उद्देश पृष्ठामध्ये अंतर्गत लिंक तयार करणे होता.
+✅ `history.pushState` पद्धत HTML5 मानकाचा भाग आहे आणि [सर्व आधुनिक ब्राउझर्समध्ये](https://caniuse.com/?search=pushState) अंमलात आणली आहे. तुम्ही जुने ब्राउझरसाठी वेब अॅप तयार करत असल्यास, तुम्ही या API च्या जागी एक युक्ती वापरू शकता: पथाच्या आधी [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) वापरून तुम्ही रूटिंग अंमलात आणू शकता जे नियमित अँकर नेव्हिगेशनसह कार्य करते आणि पृष्ठ पुन्हा लोड करत नाही, कारण त्याचा उद्देश पृष्ठामध्ये अंतर्गत लिंक तयार करणे होता.
 
-## मागे आणि पुढे बटणे कार्यरत करणे
+## बॅक आणि फॉरवर्ड बटणे कार्यरत करणे
 
-मागे आणि पुढे बटणे वेब ब्राउझिंगसाठी मूलभूत आहेत, जसे NASA मिशन कंट्रोलर्स स्पेस मिशन दरम्यान मागील सिस्टम स्टेट्स पुनरावलोकन करू शकतात. वापरकर्त्यांना ही बटणे कार्यरत असणे अपेक्षित आहे, आणि ती कार्य करत नसल्यास, अपेक्षित ब्राउझिंग अनुभव खंडित होतो.
+बॅक आणि फॉरवर्ड बटणे वेब ब्राउझिंगसाठी मूलभूत आहेत, जसे NASA मिशन कंट्रोलर्स स्पेस मिशन दरम्यान मागील सिस्टम स्टेट्स पुनरावलोकन करू शकतात. वापरकर्ते अपेक्षा करतात की ही बटणे कार्य करतील, आणि जेव्हा ती कार्य करत नाहीत, तेव्हा अपेक्षित ब्राउझिंग अनुभव खंडित होतो.
 
-आमच्या सिंगल-पेज अॅपला हे समर्थन करण्यासाठी अतिरिक्त कॉन्फिगरेशन आवश्यक आहे. ब्राउझर इतिहास स्टॅक राखतो (ज्यामध्ये आम्ही `history.pushState` सह नोंदी जोडत आहोत), परंतु जेव्हा वापरकर्ते या इतिहासाद्वारे नेव्हिगेट करतात, तेव्हा आमच्या अॅपला योग्यरित्या प्रतिसाद देऊन प्रदर्शित सामग्री अपडेट करणे आवश्यक आहे.
+आमच्या सिंगल-पेज अॅपला यासाठी अतिरिक्त कॉन्फिगरेशनची आवश्यकता आहे. ब्राउझर इतिहास स्टॅक राखतो (ज्यामध्ये आम्ही `history.pushState` सह जोडत आहोत), परंतु जेव्हा वापरकर्ते या इतिहासाद्वारे नेव्हिगेट करतात, तेव्हा आमच्या अॅपला योग्यरित्या प्रतिसाद देण्यासाठी प्रदर्शित सामग्री अपडेट करणे आवश्यक आहे.
 
 ```mermaid
 sequenceDiagram
@@ -447,19 +567,19 @@ sequenceDiagram
 ```
 
 **महत्त्वाचे संवाद बिंदू:**
-- वापरकर्त्याच्या क्रिया क्लिक किंवा ब्राउझर बटणांद्वारे नेव्हिगेशन ट्रिगर करतात
-- अॅप पृष्ठ पुन्हा लोड टाळण्यासाठी लिंक क्लिक इंटरसेप्ट करते
-- इतिहास API URL बदल आणि ब्राउझर इतिहास स्टॅक व्यवस्थापित करते
-- टेम्पलेट्स प्रत्येक स्क्रीनसाठी सामग्री संरचना प्रदान करतात
-- इव्हेंट लिसनर्स अॅप सर्व प्रकारच्या नेव्हिगेशनला प्रतिसाद देते याची खात्री करतात
+- **वापरकर्ता क्रिया** क्लिक किंवा ब्राउझर बटणांद्वारे नेव्हिगेशन ट्रिगर करते
+- **अॅप इंटरसेप्ट करते** लिंक क्लिक्स पृष्ठ रीफ्रेश टाळण्यासाठी
+- **History API** URL बदल आणि ब्राउझर इतिहास स्टॅक व्यवस्थापित करते
+- **टेम्पलेट्स** प्रत्येक स्क्रीनसाठी सामग्री संरचना प्रदान करतात
+- **इव्हेंट लिसनर्स** सुनिश्चित करतात की अॅप सर्व प्रकारच्या नेव्हिगेशनला प्रतिसाद देते
 
-`history.pushState` ब्राउझरच्या नेव्हिगेशन इतिहासात नवीन नोंदी तयार करते. तुम्ही तुमच्या ब्राउझरचा *मागे बटण* धरून ठेवून ते तपासू शकता, त्यात असे काहीतरी दिसले पाहिजे:
+`history.pushState` वापरून ब्राउझरच्या नेव्हिगेशन इतिहासात नवीन एंट्री तयार होते. तुम्ही ब्राउझरचा *बॅक बटन* धरून तपासू शकता, ते असे काहीतरी प्रदर्शित करेल:
 
 ![नेव्हिगेशन इतिहासाचा स्क्रीनशॉट](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.mr.png)
 
-जर तुम्ही काही वेळा मागे बटणावर क्लिक केले, तर तुम्हाला दिसेल की वर्तमान URL बदलतो आणि इतिहास अपडेट होतो, परंतु समान टेम्पलेट प्रदर्शित होत राहते.
+जर तुम्ही बॅक बटनवर काही वेळा क्लिक केले, तर तुम्ही पाहाल की वर्तमान URL बदलतो आणि इतिहास अपडेट होतो, परंतु समान टेम्पलेट प्रदर्शित होत राहते.
 
-कारण अॅप्लिकेशनला माहित नाही की इतिहास बदलला की प्रत्येक वेळी `updateRoute()` कॉल करणे आवश्यक आहे. जर तुम्ही [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) दस्तऐवज पाहिल्यास, तुम्हाला दिसेल की जर स्टेट बदलला - म्हणजे आम्ही वेगळ्या URL वर गेलो - तर [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) इव्हेंट ट्रिगर होतो. आम्ही ते वापरून तो मुद्दा सोडवू.
+कारण अॅपला माहित नाही की इतिहास बदलला आहे - म्हणजे आपण वेगळ्या URL वर गेलो आहोत - प्रत्येक वेळी `updateRoute()` कॉल करणे आवश्यक आहे. जर तुम्ही [`history.pushState` दस्तऐवज](https://developer.mozilla.org/docs/Web/API/History/pushState) पाहिले, तर तुम्ही पाहू शकता की जर स्टेट बदलला - म्हणजे आपण वेगळ्या URL वर गेलो - तर [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) इव्हेंट ट्रिगर होतो. आम्ही ते समस्या सोडवण्यासाठी वापरू.
 
 ### कार्य
 
@@ -470,22 +590,59 @@ window.onpopstate = () => updateRoute();
 updateRoute();
 ```
 
-**या इतिहास एकत्रीकरणाचे समजून घेणे:**
-- वापरकर्ते ब्राउझर बटणांसह नेव्हिगेट करताना `popstate` इव्हेंट्ससाठी ऐकते
-- संक्षिप्त इव्हेंट हँडलर सिंटॅक्ससाठी अॅरो फंक्शन वापरते
-- इतिहास स्टेट बदलल्यावर `updateRoute()` आपोआप कॉल करते
-- पृष्ठ प्रथम लोड झाल्यावर `updateRoute()` कॉल करून अॅप प्रारंभ करते
-- वापरकर्ते कसे नेव्हिगेट करतात याची पर्वा न करता योग्य टेम्पलेट प्रदर्शित करते
+**या इतिहास समाकलनाचे समजून घेणे:**
+- **`popstate` इव्हेंट्ससाठी ऐकते** जेव्हा वापरकर्ते ब्राउझर बटणांसह नेव्हिगेट करतात
+- **संक्षिप्त इव्हेंट हँडलर सिंटॅक्ससाठी** अॅरो फंक्शन वापरते
+- **`updateRoute()` आपोआप कॉल करते** जेव्हा इतिहास स्टेट बदलतो
+- **अॅप प्रारंभ करते** पृष्ठ प्रथम लोड झाल्यावर `updateRoute()` कॉल करून
+- **योग्य टेम्पलेट प्रदर्शित करते** वापरकर्ते कसेही नेव्हिगेट करत असले तरी
 
-> 💡 **प्रो टीप**: आम्ही [अॅरो फंक्शन](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) वापरून आमच्या `popstate` इव्हेंट हँडलरची घोषणा केली आहे, परंतु नियमित फंक्शन देखील त्याचप्रमाणे कार्य करेल.
+> 💡 **प्रो टिप**: आम्ही [अॅरो फंक्शन](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) वापरून आमच्या `popstate` इव्हेंट हँडलर घोषित केला आहे, परंतु नियमित फंक्शन देखील त्याचप्रकारे कार्य करेल.
 
-अॅरो फंक्शन्सवर रिफ्रेशर व्हिडिओ येथे आहे:
+अॅरो फंक्शन्सवरील रिफ्रेशर व्हिडिओ येथे आहे:
 
 [![अॅरो फंक्शन्स](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "अॅरो फंक्शन्स")
 
 > 🎥 अॅरो फंक्शन्सबद्दल व्हिडिओसाठी वरील प्रतिमेवर क्लिक करा.
 
-आता तुमच्या ब्राउझरचे मागे आणि पुढे बटणे वापरून पहा आणि यावेळी प्रदर्शित रूट योग्यरित्या अपडेट होत आहे का ते तपासा.
+आता तुमच्या ब्राउझरच्या बॅक आणि फॉरवर्ड बटणांचा वापर करून पहा आणि यावेळी प्रदर्शित रूट योग्य प्रकारे अपडेट होत आहे का ते तपासा.
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] तुमच्या बँकिंग अॅपच्या नेव्हिगेशनची ब्राउझर बॅक/फॉरवर्ड बटणांचा वापर करून चाचणी करा
+- [ ] अॅड्रेस बारमध्ये वेगवेगळे URL मॅन्युअली टाइप करून रूटिंगची चाचणी करा
+- [ ] ब्राउझर DevTools उघडा आणि टेम्पलेट्स DOM मध्ये कसे क्लोन केले जातात ते तपासा
+- [ ] रूटिंग फ्लो ट्रॅक करण्यासाठी `console.log` स्टेटमेंट्स जोडण्याचा प्रयत्न करा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि SPA आर्किटेक्चर संकल्पना समजून घ्या
+- [ ] तुमच्या बँकिंग अॅप टेम्पलेट्सला व्यावसायिक दिसण्यासाठी CSS स्टाइलिंग जोडा
+- [ ] योग्य त्रुटी हाताळणीसह 404 एरर पृष्ठ आव्हान पूर्ण करा
+- [ ] अतिरिक्त रूटिंग कार्यक्षमतेसह क्रेडिट्स पृष्ठ आव्हान तयार करा
+- [ ] टेम्पलेट स्विचेस दरम्यान लोडिंग स्टेट्स आणि ट्रांझिशन्स जोडा
+
+### 📅 **तुमचा आठवडाभराचा SPA विकास प्रवास**
+- [ ] फॉर्म्स, डेटा व्यवस्थापन आणि टिकावासह संपूर्ण बँकिंग अॅप पूर्ण करा
+- [ ] रूट पॅरामीटर्स आणि नेस्टेड रूट्ससारख्या प्रगत रूटिंग वैशिष्ट्ये जोडा
+- [ ] नेव्हिगेशन गार्ड्स आणि प्रमाणीकरण-आधारित रूटिंग अंमलात आणा
+- [ ] पुनर्वापरयोग्य टेम्पलेट घटक आणि घटक लायब्ररी तयार करा
+- [ ] गुळगुळीत वापरकर्ता अनुभवासाठी अॅनिमेशन आणि ट्रांझिशन्स जोडा
+- [ ] तुमचे SPA होस्टिंग प्लॅटफॉर्मवर तैनात करा आणि रूटिंग योग्यरित
+- **सिंगल-पेज अ‍ॅप्लिकेशन्स** योग्य विभागणीसह डिझाइन करा
+- **अंमलात आणा** क्लायंट-साइड राउटिंग सिस्टीम्स जे अ‍ॅप्लिकेशनच्या जटिलतेसह स्केल होतात
+- **डिबग करा** ब्राउझर डेव्हलपर टूल्स वापरून जटिल नेव्हिगेशन फ्लो
+- **ऑप्टिमाइझ करा** टेम्पलेट व्यवस्थापनाद्वारे अ‍ॅप्लिकेशनची कार्यक्षमता
+- **डिझाइन करा** वापरकर्त्याचा अनुभव जो नैसर्गिक आणि प्रतिसादात्मक वाटतो
+
+**फ्रंटएंड डेव्हलपमेंट संकल्पना आत्मसात केल्या**:
+- **कंपोनेंट आर्किटेक्चर**: पुनर्वापरयोग्य UI पॅटर्न्स आणि टेम्पलेट सिस्टीम्स
+- **स्टेट सिंक्रोनायझेशन**: URL स्टेट व्यवस्थापन आणि ब्राउझर इतिहास
+- **इव्हेंट-ड्रिव्हन प्रोग्रामिंग**: वापरकर्ता संवाद हाताळणी आणि नेव्हिगेशन
+- **परफॉर्मन्स ऑप्टिमायझेशन**: कार्यक्षम DOM मॅनिप्युलेशन आणि सामग्री लोडिंग
+- **युजर एक्सपीरियन्स डिझाइन**: गुळगुळीत ट्रान्झिशन्स आणि सहज नेव्हिगेशन
+
+**पुढील स्तर**: तुम्ही आधुनिक फ्रंटएंड फ्रेमवर्क्स, प्रगत स्टेट व्यवस्थापन, किंवा जटिल एंटरप्राइझ अ‍ॅप्लिकेशन्स तयार करण्यासाठी तयार आहात!
+
+🌟 **साध्य केले**: तुम्ही आधुनिक वेब आर्किटेक्चर पॅटर्न्ससह व्यावसायिक सिंगल-पेज अ‍ॅप्लिकेशनची पायाभूत सुविधा तयार केली आहे!
 
 ---
 
@@ -493,41 +650,41 @@ updateRoute();
 
 Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** बँकिंग अॅपमध्ये त्रुटी हाताळणी आणि अवैध रूटसाठी 404 पृष्ठ टेम्पलेट अंमलात आणून वापरकर्ता अनुभव सुधारित करा.
+**वर्णन:** बँकिंग अ‍ॅपमध्ये त्रुटी हाताळणी आणि अवैध रूट्ससाठी 404 पृष्ठ टेम्पलेट अंमलात आणा, ज्यामुळे वापरकर्त्याचा अनुभव सुधारेल जेव्हा ते अस्तित्वात नसलेल्या पृष्ठांवर नेव्हिगेट करतात.
 
-**प्रॉम्प्ट:** "not-found" आयडीसह नवीन HTML टेम्पलेट तयार करा जे शैलीसह वापरकर्ता-अनुकूल 404 त्रुटी पृष्ठ प्रदर्शित करते. नंतर जावास्क्रिप्ट रूटिंग लॉजिक बदलून वापरकर्ते अवैध URL वर नेव्हिगेट करताना हे टेम्पलेट दाखवा आणि "Go Home" बटण जोडा जे लॉगिन पृष्ठावर परत नेव्हिगेट करते.
+**प्रॉम्प्ट:** "not-found" आयडीसह एक नवीन HTML टेम्पलेट तयार करा जे वापरकर्त्यास अनुकूल 404 त्रुटी पृष्ठ शैलीसह दर्शवते. नंतर जावास्क्रिप्ट राउटिंग लॉजिकमध्ये बदल करा जेणेकरून वापरकर्ते अवैध URL वर नेव्हिगेट करताना हे टेम्पलेट दिसेल, आणि "Go Home" बटण जोडा जो लॉगिन पृष्ठावर परत नेतो.
 
-Agent मोडबद्दल अधिक जाणून घ्या [येथे](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
-## 🚀 आव्हान
+## 🚀 Challenge
 
-या अॅपसाठी क्रेडिट्स दर्शविणाऱ्या तिसऱ्या पृष्ठासाठी नवीन टेम्पलेट आणि रूट जोडा.
+या अ‍ॅपसाठी क्रेडिट्स दर्शवणारे तिसऱ्या पृष्ठासाठी नवीन टेम्पलेट आणि रूट जोडा.
 
-**आव्हानाचे उद्दिष्ट:**
-- योग्य सामग्री संरचनेसह नवीन HTML टेम्पलेट तयार करा
-- तुमच्या रूट्स कॉन्फिगरेशन ऑब्जेक्टमध्ये नवीन रूट जोडा
-- क्रेडिट्स पृष्ठावर आणि तेथून नेव्हिगेशन लिंक समाविष्ट करा
-- ब्राउझर इतिहासासह सर्व नेव्हिगेशन योग्यरित्या कार्य करत आहे का ते तपासा
+**आव्हानाचे उद्दिष्टे**:
+- **तयार करा** योग्य सामग्री संरचनेसह नवीन HTML टेम्पलेट
+- **नवीन रूट** तुमच्या राउट्स कॉन्फिगरेशन ऑब्जेक्टमध्ये जोडा
+- **नेव्हिगेशन लिंक** क्रेडिट्स पृष्ठावर आणि त्यापासून समाविष्ट करा
+- **चाचणी करा** की सर्व नेव्हिगेशन ब्राउझर इतिहासासह योग्य प्रकारे कार्य करते
 
-## पोस्ट-लेक्चर क्विझ
+## Post-Lecture Quiz
 
-[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/42)
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/42)
 
 ## पुनरावलोकन आणि स्व-अभ्यास
 
-वेब विकासातील रूटिंग हे आश्चर्यकारकपणे क्लिष्ट भागांपैकी एक आहे, विशेषतः वेब पृष्ठ रीफ्रेश वर्तनांपासून सिंगल पेज अॅप्लिकेशन पृष्ठ रीफ्रेशेसकडे जात आहे. [Azure Static Web App सेवा](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) रूटिंग कसे हाताळते याबद्दल थोडे वाचा. त्या दस्तऐवजावर वर्णन केलेले काही निर्णय का आवश्यक आहेत हे तुम्ही स्पष्ट करू शकता का?
+राउटिंग वेब डेव्हलपमेंटमधील आश्चर्यकारकपणे कठीण भागांपैकी एक आहे, विशेषतः वेब पृष्ठ रीफ्रेश वर्तनांपासून सिंगल पेज अ‍ॅप्लिकेशन पृष्ठ रीफ्रेशेसकडे जात असताना. [Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) राउटिंग कसे हाताळते याबद्दल थोडे वाचा. त्या दस्तऐवजात वर्णन केलेल्या काही निर्णय आवश्यक का आहेत हे तुम्ही स्पष्ट करू शकता का?
 
-**अतिरिक्त शिक्षण संसाधने:**
-- React Router आणि Vue Router सारख्या लोकप्रिय फ्रेमवर्क्स क्लायंट-साइड रूटिंग कसे अंमलात आणतात ते एक्सप्लोर करा
-- हॅश-आधारित रूटिंग आणि इतिहास API रूटिंगमधील फरक संशोधन करा
-- सर्व्हर-साइड रेंडरिंग (SSR) आणि ते रूटिंग रणनीतींवर कसा परिणाम करते ते जाणून घ्या
-- प्रोग्रेसिव्ह वेब अॅप्स (PWAs) रूटिंग आणि नेव्हिगेशन कसे हाताळतात ते तपासा
+**अतिरिक्त शिक्षण संसाधने**:
+- **अन्वेषण करा** की React Router आणि Vue Router सारख्या लोकप्रिय फ्रेमवर्क्स क्लायंट-साइड राउटिंग कसे अंमलात आणतात
+- **शोधा** हॅश-आधारित राउटिंग आणि इतिहास API राउटिंगमधील फरक
+- **शिका** सर्व्हर-साइड रेंडरिंग (SSR) बद्दल आणि ते राउटिंग धोरणांवर कसा परिणाम करते
+- **तपासा** प्रोग्रेसिव्ह वेब अ‍ॅप्स (PWAs) राउटिंग आणि नेव्हिगेशन कसे हाताळतात
 
 ## असाइनमेंट
 
-[रूटिंग सुधारित करा](assignment.md)
+[Improve the routing](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/7-bank-project/2-forms/README.md b/translations/mr/7-bank-project/2-forms/README.md
index 7e9a4ae818..3742de7b4c 100644
--- a/translations/mr/7-bank-project/2-forms/README.md
+++ b/translations/mr/7-bank-project/2-forms/README.md
@@ -1,43 +1,90 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b24f28fc46dd473aa9080f174182adde",
-  "translation_date": "2025-10-22T16:23:50+00:00",
+  "original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
+  "translation_date": "2025-11-03T14:50:29+00:00",
   "source_file": "7-bank-project/2-forms/README.md",
   "language_code": "mr"
 }
 -->
 # बँकिंग अ‍ॅप तयार करा भाग 2: लॉगिन आणि नोंदणी फॉर्म तयार करा
 
+```mermaid
+journey
+    title Your Form Development Journey
+    section HTML Foundation
+      Understand form elements: 3: Student
+      Learn input types: 4: Student
+      Master accessibility: 4: Student
+    section JavaScript Integration
+      Handle form submission: 4: Student
+      Implement AJAX communication: 5: Student
+      Process server responses: 5: Student
+    section Validation Systems
+      Create multi-layer validation: 5: Student
+      Enhance user experience: 5: Student
+      Ensure data integrity: 5: Student
+```
+
 ## पूर्व-व्याख्यान प्रश्नमंजुषा
 
 [पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/43)
 
-कधी ऑनलाइन फॉर्म भरताना तुमचा ईमेल फॉर्मेट चुकीचा असल्याचे सांगितले आहे का? किंवा सबमिट क्लिक केल्यावर सर्व माहिती गमावली आहे का? आपण सर्वांनी अशा त्रासदायक अनुभवांना सामोरे गेले आहे.
+कधी ऑनलाइन फॉर्म भरताना तुमचा ईमेल फॉर्मेट चुकीचा असल्यामुळे नाकारला गेला आहे का? किंवा सबमिट क्लिक केल्यावर तुमची सर्व माहिती गमावली आहे का? आपण सर्वांनी या त्रासदायक अनुभवांना सामोरे गेले आहे.
 
-फॉर्म हे तुमच्या वापरकर्त्यांना आणि तुमच्या अ‍ॅप्लिकेशनच्या कार्यक्षमतेला जोडणारे पूल आहेत. जसे विमानतळ नियंत्रक विमानांना त्यांच्या गंतव्यस्थानी सुरक्षितपणे पोहोचवण्यासाठी काळजीपूर्वक प्रोटोकॉल वापरतात, तसेच चांगल्या प्रकारे डिझाइन केलेले फॉर्म स्पष्ट अभिप्राय देतात आणि महागड्या चुका टाळतात. दुसरीकडे, खराब फॉर्म वापरकर्त्यांना वेगाने दूर करू शकतात.
+फॉर्म हे तुमच्या वापरकर्त्यांना आणि तुमच्या अ‍ॅप्लिकेशनच्या कार्यक्षमतेला जोडणारे पूल आहेत. जसे विमानतळ नियंत्रक विमानांना सुरक्षितपणे त्यांच्या गंतव्यस्थानी पोहोचवण्यासाठी काळजीपूर्वक प्रोटोकॉल वापरतात, तसेच चांगल्या प्रकारे डिझाइन केलेले फॉर्म स्पष्ट अभिप्राय देतात आणि महागड्या चुका टाळतात. दुसरीकडे, खराब फॉर्म वापरकर्त्यांना व्यस्त विमानतळातील गैरसमजापेक्षा वेगाने दूर करू शकतात.
 
-या धड्यात, आपण तुमचे स्थिर बँकिंग अ‍ॅप एक परस्परसंवादी अ‍ॅप्लिकेशनमध्ये रूपांतरित करू. तुम्ही वापरकर्त्याच्या इनपुटची पडताळणी करणारे, सर्व्हरशी संवाद साधणारे आणि उपयुक्त अभिप्राय देणारे फॉर्म तयार करणे शिकाल. याला वापरकर्त्यांना तुमच्या अ‍ॅप्लिकेशनच्या वैशिष्ट्यांमध्ये नेव्हिगेट करण्यास अनुमती देणारे नियंत्रण इंटरफेस तयार करणे असे समजून घ्या.
+या धड्यात, आपण तुमच्या स्थिर बँकिंग अ‍ॅपला एक परस्परसंवादी अ‍ॅप्लिकेशनमध्ये रूपांतरित करू. तुम्ही वापरकर्त्याच्या इनपुटची पडताळणी करणारे, सर्व्हरशी संवाद साधणारे आणि उपयुक्त अभिप्राय देणारे फॉर्म तयार करणे शिकाल. याला तुमच्या अ‍ॅप्लिकेशनच्या वैशिष्ट्यांमध्ये नेव्हिगेट करण्यासाठी वापरकर्त्यांना नियंत्रण इंटरफेस तयार करणे असे समजा.
 
-शेवटी, तुमच्याकडे एक संपूर्ण लॉगिन आणि नोंदणी प्रणाली असेल ज्यामध्ये वापरकर्त्यांना निराशा न होता यशाकडे मार्गदर्शन करणारी पडताळणी असेल.
+शेवटी, तुमच्याकडे पडताळणीसह संपूर्ण लॉगिन आणि नोंदणी प्रणाली असेल जी वापरकर्त्यांना निराशा न करता यशाकडे मार्गदर्शन करेल.
+
+```mermaid
+mindmap
+  root((Form Development))
+    HTML Foundation
+      Semantic Elements
+      Input Types
+      Accessibility
+      Label Association
+    User Experience
+      Validation Feedback
+      Error Prevention
+      Loading States
+      Success Messaging
+    JavaScript Integration
+      Event Handling
+      AJAX Communication
+      Data Processing
+      Error Management
+    Validation Layers
+      HTML5 Validation
+      Client-side Logic
+      Server-side Security
+      Progressive Enhancement
+    Modern Patterns
+      Fetch API
+      Async/Await
+      Form Data API
+      Promise Handling
+```
 
-## पूर्वापेक्षित गोष्टी
+## पूर्वतयारी
 
-फॉर्म तयार करण्यास सुरुवात करण्यापूर्वी, तुमच्याकडे सर्व काही योग्य प्रकारे सेट केले आहे याची खात्री करूया. हा धडा आपण मागील धड्याच्या शेवटी जिथे सोडला होता तिथून सुरू होतो, त्यामुळे जर तुम्ही पुढे गेले असाल तर तुम्हाला परत जाऊन मूलभूत गोष्टी प्रथम कार्यरत कराव्या लागतील.
+फॉर्म तयार करण्यास सुरुवात करण्यापूर्वी, तुमच्याकडे सर्व काही योग्य प्रकारे सेट आहे याची खात्री करूया. हा धडा आपण मागील धड्याच्या शेवटी जिथे थांबलो होतो तिथून सुरू होतो, त्यामुळे जर तुम्ही पुढे उडी मारली असेल, तर तुम्हाला परत जाऊन मूलभूत गोष्टी प्रथम कार्यरत कराव्या लागतील.
 
 ### आवश्यक सेटअप
 
 | घटक | स्थिती | वर्णन |
 |-----------|--------|-------------|
-| [HTML टेम्पलेट्स](../1-template-route/README.md) | ✅ आवश्यक | तुमचे मूलभूत बँकिंग अ‍ॅप स्ट्रक्चर |
-| [Node.js](https://nodejs.org) | ✅ आवश्यक | सर्व्हरसाठी JavaScript रनटाइम |
+| [HTML टेम्पलेट्स](../1-template-route/README.md) | ✅ आवश्यक | तुमच्या बँकिंग अ‍ॅपची मूलभूत रचना |
+| [Node.js](https://nodejs.org) | ✅ आवश्यक | सर्व्हरसाठी जावास्क्रिप्ट रनटाइम |
 | [बँक API सर्व्हर](../api/README.md) | ✅ आवश्यक | डेटा स्टोरेजसाठी बॅकएंड सेवा |
 
-> 💡 **विकास टिप**: तुम्ही दोन स्वतंत्र सर्व्हर एकाच वेळी चालवणार आहात – एक तुमच्या फ्रंट-एंड बँकिंग अ‍ॅपसाठी आणि दुसरा बॅकएंड API साठी. ही सेटअप वास्तविक-जगातील विकासाचे प्रतिबिंब आहे जिथे फ्रंटएंड आणि बॅकएंड सेवा स्वतंत्रपणे कार्य करतात.
+> 💡 **विकसनशील टिप**: तुम्ही दोन स्वतंत्र सर्व्हर एकाच वेळी चालवणार आहात – एक तुमच्या फ्रंट-एंड बँकिंग अ‍ॅपसाठी आणि दुसरा बॅकएंड API साठी. ही सेटअप वास्तविक-जगातील विकासाचे प्रतिबिंब आहे जिथे फ्रंटएंड आणि बॅकएंड सेवा स्वतंत्रपणे कार्य करतात.
 
 ### सर्व्हर कॉन्फिगरेशन
 
-**तुमच्या विकास वातावरणात समाविष्ट असेल:**
+**तुमच्या विकासाच्या वातावरणात समाविष्ट असेल:**
 - **फ्रंटएंड सर्व्हर**: तुमचे बँकिंग अ‍ॅप सर्व्ह करतो (सामान्यतः पोर्ट `3000`)
 - **बॅकएंड API सर्व्हर**: डेटा स्टोरेज आणि पुनर्प्राप्ती हाताळतो (पोर्ट `5000`)
 - **दोन्ही सर्व्हर** कोणत्याही संघर्षाशिवाय एकाच वेळी चालवू शकतात
@@ -54,13 +101,13 @@ curl http://localhost:5000/api
 
 ## HTML फॉर्म आणि नियंत्रण समजून घेणे
 
-HTML फॉर्म हे तुमच्या वेब अ‍ॅप्लिकेशनशी संवाद साधण्याचा वापरकर्त्यांचा मार्ग आहे. त्यांना 19व्या शतकातील दूरस्थ ठिकाणांना जोडणाऱ्या टेलिग्राफ सिस्टमप्रमाणे समजून घ्या – ते वापरकर्त्याच्या हेतू आणि अ‍ॅप्लिकेशन प्रतिसाद यांच्यातील संवाद प्रोटोकॉल आहेत. विचारपूर्वक डिझाइन केलेले असल्यास, ते चुका पकडतात, इनपुट फॉर्मेटिंग मार्गदर्शन करतात आणि उपयुक्त सूचना देतात.
+HTML फॉर्म हे तुमच्या वेब अ‍ॅप्लिकेशनशी संवाद साधण्याचा वापरकर्त्यांचा मार्ग आहे. त्यांना 19व्या शतकातील दूरस्थ ठिकाणांना जोडणाऱ्या टेलिग्राफ सिस्टमसारखे समजा – ते वापरकर्त्याच्या हेतू आणि अ‍ॅप्लिकेशन प्रतिसाद यांच्यातील संवाद प्रोटोकॉल आहेत. विचारपूर्वक डिझाइन केलेले असल्यास, ते चुका पकडतात, इनपुट फॉर्मेटिंग मार्गदर्शन करतात आणि उपयुक्त सूचना देतात.
 
-आधुनिक फॉर्म मूलभूत टेक्स्ट इनपुटपेक्षा लक्षणीय अधिक प्रगत आहेत. HTML5 ने विशेष इनपुट प्रकार सादर केले जे ईमेल पडताळणी, क्रमांक फॉर्मेटिंग आणि तारीख निवड आपोआप हाताळतात. या सुधारणा अ‍ॅक्सेसिबिलिटी आणि मोबाइल वापरकर्ता अनुभव दोन्हींसाठी फायदेशीर आहेत.
+आधुनिक फॉर्म मूलभूत मजकूर इनपुटपेक्षा लक्षणीय अधिक प्रगत आहेत. HTML5 ने विशेष इनपुट प्रकार सादर केले जे ईमेल पडताळणी, क्रमांक फॉर्मेटिंग आणि तारीख निवड आपोआप हाताळतात. या सुधारणा प्रवेशयोग्यता आणि मोबाइल वापरकर्ता अनुभव दोन्हींसाठी फायदेशीर आहेत.
 
 ### आवश्यक फॉर्म घटक
 
-**प्रत्येक फॉर्मला आवश्यक असलेले बिल्डिंग ब्लॉक्स:**
+**प्रत्येक फॉर्मला आवश्यक असलेले बांधकाम ब्लॉक्स:**
 
 ```html
 <!-- Basic form structure -->
@@ -74,21 +121,21 @@ HTML फॉर्म हे तुमच्या वेब अ‍ॅप्ल
 
 **या कोडमध्ये काय होते:**
 - **तयार करते** एक फॉर्म कंटेनर ज्याला एक अद्वितीय आयडेंटिफायर आहे
-- **निर्दिष्ट करते** डेटा सबमिशनसाठी HTTP पद्धत
-- **जोडते** लेबल्स इनपुटशी अ‍ॅक्सेसिबिलिटीसाठी
-- **परिभाषित करते** एक सबमिट बटण फॉर्म प्रक्रिया करण्यासाठी
+- **निर्धारित करते** डेटा सबमिशनसाठी HTTP पद्धत
+- **जोडते** लेबल्स इनपुट्सशी प्रवेशयोग्यतेसाठी
+- **परिभाषित करते** फॉर्म प्रक्रिया करण्यासाठी सबमिट बटण
 
 ### आधुनिक इनपुट प्रकार आणि गुणधर्म
 
 | इनपुट प्रकार | उद्देश | उदाहरण वापर |
 |------------|---------|---------------|
-| `text` | सामान्य टेक्स्ट इनपुट | `<input type="text" name="username">` |
+| `text` | सामान्य मजकूर इनपुट | `<input type="text" name="username">` |
 | `email` | ईमेल पडताळणी | `<input type="email" name="email">` |
-| `password` | लपवलेला टेक्स्ट एंट्री | `<input type="password" name="password">` |
+| `password` | लपवलेला मजकूर प्रवेश | `<input type="password" name="password">` |
 | `number` | संख्यात्मक इनपुट | `<input type="number" name="balance" min="0">` |
 | `tel` | फोन नंबर | `<input type="tel" name="phone">` |
 
-> 💡 **आधुनिक HTML5 फायदा**: विशिष्ट इनपुट प्रकार वापरणे आपोआप पडताळणी, योग्य मोबाइल कीबोर्ड आणि अतिरिक्त JavaScript शिवाय चांगले अ‍ॅक्सेसिबिलिटी समर्थन प्रदान करते!
+> 💡 **आधुनिक HTML5 फायदा**: विशिष्ट इनपुट प्रकार वापरणे स्वयंचलित पडताळणी, योग्य मोबाइल कीबोर्ड आणि अतिरिक्त जावास्क्रिप्टशिवाय चांगले प्रवेशयोग्यता समर्थन प्रदान करते!
 
 ### बटण प्रकार आणि वर्तन
 
@@ -100,15 +147,15 @@ HTML फॉर्म हे तुमच्या वेब अ‍ॅप्ल
 ```
 
 **प्रत्येक बटण प्रकार काय करतो:**
-- **सबमिट बटणे**: फॉर्म सबमिशन ट्रिगर करतात आणि डेटा निर्दिष्ट केलेल्या एंडपॉइंटवर पाठवतात
+- **सबमिट बटणे**: फॉर्म सबमिशन ट्रिगर करतात आणि डेटा निर्दिष्ट एंडपॉइंटवर पाठवतात
 - **रीसेट बटणे**: सर्व फॉर्म फील्ड्स त्यांच्या सुरुवातीच्या स्थितीत पुनर्संचयित करतात
-- **सामान्य बटणे**: कोणतेही डिफॉल्ट वर्तन प्रदान करत नाहीत, कार्यक्षमतेसाठी सानुकूल JavaScript आवश्यक आहे
+- **सामान्य बटणे**: कोणतेही डीफॉल्ट वर्तन प्रदान करत नाहीत, कार्यक्षमतेसाठी सानुकूल जावास्क्रिप्ट आवश्यक आहे
 
 > ⚠️ **महत्त्वाची टीप**: `<input>` घटक स्वतः बंद होतो आणि बंद करणारा टॅग आवश्यक नाही. आधुनिक सर्वोत्तम पद्धत म्हणजे `<input>` स्लॅशशिवाय लिहिणे.
 
 ### तुमचा लॉगिन फॉर्म तयार करणे
 
-आता आधुनिक HTML फॉर्म पद्धतींचे प्रदर्शन करणारा व्यावहारिक लॉगिन फॉर्म तयार करूया. आपण मूलभूत संरचनेपासून सुरुवात करू आणि अ‍ॅक्सेसिबिलिटी वैशिष्ट्ये आणि पडताळणीसह हळूहळू सुधारणा करू.
+आता आधुनिक HTML फॉर्म पद्धतींचे प्रदर्शन करणारा व्यावहारिक लॉगिन फॉर्म तयार करूया. आपण मूलभूत रचनेपासून सुरुवात करू आणि प्रवेशयोग्यता वैशिष्ट्ये आणि पडताळणीसह हळूहळू सुधारणा करू.
 
 ```html
 <template id="login">
@@ -127,12 +174,12 @@ HTML फॉर्म हे तुमच्या वेब अ‍ॅप्ल
 </template>
 ```
 
-**येथे काय होते ते समजून घेणे:**
-- **संरचना तयार करते** फॉर्मसाठी सेमॅंटिक HTML5 घटकांसह
-- **संबंधित घटक गटबद्ध करते** `div` कंटेनर वापरून अर्थपूर्ण वर्गांसह
-- **लेबल्स इनपुटशी जोडते** `for` आणि `id` गुणधर्म वापरून
-- **आधुनिक गुणधर्म समाविष्ट करते** जसे की `autocomplete` आणि `placeholder` चांगल्या UX साठी
-- **`novalidate` जोडते** ब्राउझर डिफॉल्ट्सऐवजी JavaScript सह पडताळणी हाताळण्यासाठी
+**येथे काय होते याचे विश्लेषण:**
+- **रचना तयार करते** फॉर्मसाठी अर्थपूर्ण HTML5 घटकांसह
+- **गटबद्ध करते** संबंधित घटक `div` कंटेनर्ससह अर्थपूर्ण वर्गांसह
+- **जोडते** लेबल्स इनपुट्सशी `for` आणि `id` गुणधर्म वापरून
+- **समाविष्ट करते** आधुनिक गुणधर्म जसे की `autocomplete` आणि `placeholder` चांगल्या UX साठी
+- **जोडते** `novalidate` ब्राउझर डीफॉल्ट्सऐवजी जावास्क्रिप्टसह पडताळणी हाताळण्यासाठी
 
 ### योग्य लेबल्सचे महत्त्व
 
@@ -152,17 +199,17 @@ graph TD
 ```
 
 **योग्य लेबल्स काय साध्य करतात:**
-- **स्क्रीन रीडर्स सक्षम करतात** फॉर्म फील्ड्स स्पष्टपणे जाहीर करण्यासाठी
-- **क्लिक करण्यायोग्य क्षेत्र वाढवतात** (लेबलवर क्लिक केल्यावर इनपुटवर लक्ष केंद्रित होते)
-- **मोबाइल वापरयोग्यता सुधारतात** मोठ्या टच टार्गेट्ससह
-- **फॉर्म पडताळणीस समर्थन देतात** अर्थपूर्ण त्रुटी संदेशांसह
-- **SEO सुधारतात** फॉर्म घटकांना सेमॅंटिक अर्थ प्रदान करून
+- **सक्षम करतात** स्क्रीन रीडर्स फॉर्म फील्ड्स स्पष्टपणे जाहीर करतात
+- **वाढवतात** क्लिक करण्यायोग्य क्षेत्र (लेबलवर क्लिक केल्यावर इनपुटवर लक्ष केंद्रित होते)
+- **सुधारतात** मोबाइल वापरयोग्यता मोठ्या टच टार्गेट्ससह
+- **समर्थन करतात** फॉर्म पडताळणी अर्थपूर्ण त्रुटी संदेशांसह
+- **सुधारतात** SEO फॉर्म घटकांना अर्थपूर्ण अर्थ प्रदान करून
 
-> 🎯 **अ‍ॅक्सेसिबिलिटी लक्ष्य**: प्रत्येक फॉर्म इनपुटसाठी संबंधित लेबल असावे. ही साधी पद्धत तुमचे फॉर्म सर्वांसाठी, अपंग वापरकर्त्यांसह, वापरण्यायोग्य बनवते आणि सर्व वापरकर्त्यांसाठी अनुभव सुधारते.
+> 🎯 **प्रवेशयोग्यता उद्देश**: प्रत्येक फॉर्म इनपुटसाठी संबंधित लेबल असावे. ही साधी पद्धत तुमचे फॉर्म सर्वांसाठी, अपंग वापरकर्त्यांसह, वापरण्यायोग्य बनवते आणि सर्व वापरकर्त्यांसाठी अनुभव सुधारते.
 
 ### नोंदणी फॉर्म तयार करणे
 
-नोंदणी फॉर्मला संपूर्ण वापरकर्ता खाते तयार करण्यासाठी अधिक तपशीलवार माहिती आवश्यक आहे. आधुनिक HTML5 वैशिष्ट्ये आणि सुधारित अ‍ॅक्सेसिबिलिटीसह ते तयार करूया.
+नोंदणी फॉर्मला संपूर्ण वापरकर्ता खाते तयार करण्यासाठी अधिक तपशीलवार माहिती आवश्यक आहे. आधुनिक HTML5 वैशिष्ट्यांसह आणि सुधारित प्रवेशयोग्यतेसह ते तयार करूया.
 
 ```html
 <hr/>
@@ -197,42 +244,58 @@ graph TD
 ```
 
 **वरीलमध्ये, आम्ही:**
-- **प्रत्येक फील्ड व्यवस्थित केले** चांगल्या स्टाइलिंग आणि लेआउटसाठी कंटेनर divs मध्ये
-- **योग्य `autocomplete` गुणधर्म जोडले** ब्राउझर ऑटोफिल समर्थनासाठी
-- **उपयुक्त `placeholder` मजकूर समाविष्ट केला** वापरकर्त्याच्या इनपुटला मार्गदर्शन करण्यासाठी
-- **सामान्य डिफॉल्ट्स सेट केले** `value` गुणधर्म वापरून
-- **पडताळणी गुणधर्म लागू केले** जसे की `required`, `maxlength`, आणि `min`
-- **`type="number"` वापरले** बॅलन्स फील्डसाठी दशांश समर्थनासह
+- **संगठित केले** प्रत्येक फील्ड कंटेनर divs मध्ये चांगल्या स्टाइलिंग आणि लेआउटसाठी
+- **जोडले** योग्य `autocomplete` गुणधर्म ब्राउझर ऑटोफिल समर्थनासाठी
+- **समाविष्ट केले** उपयुक्त प्लेसहोल्डर मजकूर वापरकर्त्याच्या इनपुटला मार्गदर्शन करण्यासाठी
+- **सेट केले** `value` गुणधर्म वापरून संवेदनशील डीफॉल्ट्स
+- **लागू केले** पडताळणी गुणधर्म जसे की `required`, `maxlength`, आणि `min`
+- **वापरले** `type="number"` बॅलन्स फील्डसाठी दशांश समर्थनासह
 
-### इनपुट प्रकार आणि वर्तन एक्सप्लोर करणे
+### इनपुट प्रकार आणि वर्तन शोधणे
 
 **आधुनिक इनपुट प्रकार सुधारित कार्यक्षमता प्रदान करतात:**
 
 | वैशिष्ट्य | फायदा | उदाहरण |
 |---------|---------|----------|
 | `type="number"` | मोबाइलवर संख्यात्मक कीपॅड | बॅलन्स एंट्री सोपी |
-| `step="0.01"` | दशांश अचूकता नियंत्रण | चलनात सेंट्सला अनुमती देते |
+| `step="0.01"` | दशांश अचूकता नियंत्रण | चलनात सेंट्स परवानगी देते |
 | `autocomplete` | ब्राउझर ऑटोफिल | फॉर्म पूर्ण करणे जलद |
 | `placeholder` | संदर्भात्मक सूचना | वापरकर्त्याच्या अपेक्षांना मार्गदर्शन करते |
 
-> 🎯 **अ‍ॅक्सेसिबिलिटी आव्हान**: फक्त तुमच्या कीबोर्डचा वापर करून फॉर्म नेव्हिगेट करण्याचा प्रयत्न करा! फील्ड्समध्ये जाण्यासाठी `Tab` वापरा, चेक बॉक्ससाठी `Space` वापरा आणि सबमिट करण्यासाठी `Enter` वापरा. हा अनुभव तुम्हाला स्क्रीन रीडर वापरकर्ते तुमच्या फॉर्मशी कसे संवाद साधतात हे समजण्यास मदत करतो.
+> 🎯 **प्रवेशयोग्यता आव्हान**: फक्त तुमच्या कीबोर्डचा वापर करून फॉर्म नेव्हिगेट करण्याचा प्रयत्न करा! `Tab` वापरून फील्ड्समध्ये जा, `Space` वापरून चेक बॉक्स तपासा, आणि `Enter` वापरून सबमिट करा. हा अनुभव तुम्हाला स्क्रीन रीडर वापरकर्ते तुमच्या फॉर्मशी कसा संवाद साधतात हे समजण्यास मदत करतो.
+
+### 🔄 **शैक्षणिक तपासणी**
+**फॉर्म फाउंडेशन समजून घेणे**: जावास्क्रिप्ट लागू करण्यापूर्वी, याची खात्री करा की तुम्हाला समजते:
+- ✅ कसे अर्थपूर्ण HTML प्रवेशयोग्य फॉर्म रचना तयार करते
+- ✅ मोबाइल कीबोर्ड्स आणि पडताळणीसाठी इनपुट प्रकार का महत्त्वाचे आहेत
+- ✅ लेबल्स आणि फॉर्म नियंत्रण यांच्यातील संबंध
+- ✅ फॉर्म गुणधर्म ब्राउझरच्या डीफॉल्ट वर्तनावर कसा परिणाम करतात
+
+**जलद स्व-परीक्षण**: जावास्क्रिप्ट हाताळणीशिवाय फॉर्म सबमिट केल्यावर काय होते?
+*उत्तर: ब्राउझर डीफॉल्ट सबमिशन करतो, सामान्यतः क्रिया URL वर पुनर्निर्देशित करतो*
+
+**HTML5 फॉर्म फायदे**: आधुनिक फॉर्म प्रदान करतात:
+- **अंतर्निहित पडताळणी**: स्वयंचलित ईमेल आणि क्रमांक फॉर्मेट तपासणी
+- **मोबाइल ऑप्टिमायझेशन**: विविध इनपुट प्रकारांसाठी योग्य कीबोर्ड
+- **प्रवेशयोग्यता**: स्क्रीन रीडर समर्थन आणि कीबोर्ड नेव्हिगेशन
+- **प्रगत सुधारणा**: जावास्क्रिप्ट अक्षम असताना देखील कार्य करते
 
 ## फॉर्म सबमिशन पद्धती समजून घेणे
 
-जेव्हा कोणी तुमचा फॉर्म भरतो आणि सबमिट क्लिक करतो, तेव्हा तो डेटा कुठेतरी जावा लागतो – सामान्यतः सर्व्हरवर जो तो जतन करू शकतो. हे दोन वेगवेगळ्या प्रकारे होऊ शकते आणि कोणता वापरायचा हे जाणून घेणे तुम्हाला नंतर काही डोकेदुखीपासून वाचवू शकते.
+कोणी तुमचा फॉर्म भरतो आणि सबमिट क्लिक करतो तेव्हा, तो डेटा कुठेतरी जायला हवा – सामान्यतः सर्व्हरवर जो तो जतन करू शकतो. हे घडण्याचे काही वेगवेगळे मार्ग आहेत, आणि कोणता वापरायचा हे जाणून घेणे तुम्हाला नंतर काही त्रासांपासून वाचवू शकते.
 
-चला पाहूया की जेव्हा कोणी सबमिट बटण क्लिक करतो तेव्हा प्रत्यक्षात काय होते.
+चला पाहूया की कोणी सबमिट बटण क्लिक केल्यावर प्रत्यक्षात काय होते.
 
-### डिफॉल्ट फॉर्म वर्तन
+### डीफॉल्ट फॉर्म वर्तन
 
 प्रथम, मूलभूत फॉर्म सबमिशनसह काय होते ते पाहूया:
 
-**तुमचे वर्तमान फॉर्म तपासा:**
+**तुमचे सध्याचे फॉर्म तपासा:**
 1. तुमच्या फॉर्ममधील *नोंदणी करा* बटणावर क्लिक करा
 2. तुमच्या ब्राउझरच्या अ‍ॅड्रेस बारमधील बदलांचे निरीक्षण करा
 3. पृष्ठ कसे रीलोड होते आणि डेटा URL मध्ये कसा दिसतो ते पहा
 
-![नोंदणी बटण क्लिक केल्यानंतर ब्राउझरच्या URL बदलाचा स्क्रीनशॉट](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.mr.png)
+![नोंदणी बटणावर क्लिक केल्यानंतर ब्राउझरच्या URL बदलाचा स्क्रीनशॉट](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.mr.png)
 
 ### HTTP पद्धतींची तुलना
 
@@ -260,9 +323,9 @@ graph TD
 
 **मूलभूत फरक समजून घेणे:**
 - **GET**: फॉर्म डेटा URL मध्ये क्वेरी पॅरामीटर्स म्हणून जोडतो (शोध ऑपरेशन्ससाठी योग्य)
-- **POST**: डेटा विनंती बॉडीमध्ये समाविष्ट करतो (संवेदनशील माहिती आवश्यक)
-- **GET मर्यादा**: आकार मर्यादा, दृश्यमान डेटा, सतत ब्राउझर इतिहास
-- **POST फायदे**: मोठ्या डेटा क्षमता, गोपनीयता संरक्षण, फाइल अपलोड समर्थन
+- **POST**: डेटा विनंती बॉडीमध्ये समाविष्ट करतो (संवेदनशील माहिती आवश्यक आहे)
+- **GET मर्यादा**: आकार मर्यादा, दृश्यमान डेटा, टिकाऊ ब्राउझर इतिहास
+- **POST फायदे**: मोठी डेटा क्षमता, गोपनीयता संरक्षण, फाइल अपलोड समर्थन
 
 > 💡 **सर्वोत्तम पद्धत**: शोध फॉर्म आणि फिल्टर्ससाठी `GET` वापरा (डेटा पुनर्प्राप्ती), वापरकर्ता नोंदणी, लॉगिन आणि डेटा निर्मितीसाठी `POST` वापरा.
 
@@ -276,25 +339,25 @@ graph TD
 ```
 
 **या कॉन्फिगरेशनमध्ये काय होते:**
-- **फॉर्म सबमिशन निर्देशित करते** तुमच्या API एंडपॉइंटवर
-- **POST पद्धत वापरते** सुरक्षित डेटा ट्रान्समिशनसाठी
-- **`novalidate` समाविष्ट करते** ब्राउझर डिफॉल्ट्सऐवजी JavaScript सह पडताळणी हाताळण्यासाठी
+- **दिशा देते** फॉर्म सबमिशन तुमच्या API एंडपॉइंटकडे
+- **वापरते** POST पद्धत सुरक्षित डेटा ट्रान्समिशनसाठी
+- **समाविष्ट करते** `novalidate` ब्राउझर डीफॉल्ट्सऐवजी जावास्क्रिप्टसह पडताळणी हाताळण्यासाठी
 
 ### फॉर्म सबमिशनची चाचणी करणे
 
-**तुमच्या फॉर्मची चाचणी करण्यासाठी हे चरण अनुसरण करा:**
+**तुमचा फॉर्म तपासण्यासाठी या चरणांचे अनुसरण करा:**
 1. **नोंदणी फॉर्म भरा** तुमच्या माहितीने
-2. **"खाते तयार करा" बटणावर क्लिक करा**
-3. **तुमच्या ब्राउझरमधील सर्व्हर प्रतिसादाचे निरीक्षण करा**
+2. **क्लिक करा** "खाते तयार करा" बटण
+3. **सर्व्हर प्रतिसाद** तुमच्या ब्राउझरमध्ये निरीक्षण करा
 
-![ब्राउझर विंडो localhost:5000/api/accounts अ‍ॅड्रेसवर, वापरकर्ता डेटासह JSON स्ट्रिंग दर्शवित आहे](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.mr.png)
+![ब्राउझर विंडो अ‍ॅड्रेस localhost:5000/api/accounts वर, वापरकर्त्याच्या डेटासह JSON स्ट्रिंग दर्शवित आहे](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.mr.png)
 
-**तुम्हाला काय दिसले पाहिजे:**
+**तुम्हाला काय दिसायला हवे:**
 - **ब्राउझर पुनर्निर्देशित करते** API एंडपॉइंट URL वर
 - **JSON प्रतिसाद** तुमच्या नव्याने तयार केलेल्या खाते डेटासह
-- **सर्व्हर पुष्टीकरण** की खाते यशस्वीरित्या तयार केले गेले आहे
+- **सर्व्हर पुष्टी** खाते यशस्वीरित्या तयार केले गेले आहे
 
-> 🧪 **प्रयोग वेळ**: समान वापरकर्तानावासह पुन्हा नोंदणी करण्याचा प्रयत्न करा. तुम्हाला कोणता प्रतिसाद मिळतो? हे तुम्हाला डुप्लिकेट डेटा आणि त्रुटी अटी कशा हाताळल्या जातात हे समजण्यास मदत करते.
+> 🧪 **प्रयोग वेळ**: समान वापरकर्तानावासह पुन्हा नोंदणी करण्याचा प्रयत्न करा. तुम्हाला कोणता प्रतिसाद मिळतो? हे तुम्हाला समजण्यास मदत करते की सर्व्हर डुप्लिकेट डेटा आणि त्रुटी अटी कशा हाताळतो.
 
 ### JSON प्रतिसाद समजून घेणे
 
@@ -311,61 +374,101 @@ graph TD
 
 **हा प्रतिसाद पुष्टी करतो:**
 - **तयार करते** तुमच्या निर्दिष्ट डेटासह नवीन खाते
-- **एक अद्वितीय आयडेंटिफायर नियुक्त करते** भविष्यातील संदर्भासाठी
-- **सर्व खाते माहिती परत करते** पडताळणीसाठी
-- **यशस्वी डेटाबेस स्टोरेज सूचित करते**
+- **असाइन करते** भविष्यातील संदर्भासाठी एक अद्वितीय आयडेंटिफायर
+- **पर
+```javascript
+// Example of what FormData captures
+const formData = new FormData(registerForm);
+
+// FormData automatically captures:
+// {
+//   "user": "john_doe",
+//   "currency": "$", 
+//   "description": "Personal account",
+//   "balance": "100"
+// }
+```
 
-## आधुनिक फॉर्म हाताळणी JavaScript सह
+**FormData API चे फायदे:**
+- **संपूर्ण संग्रह**: सर्व फॉर्म घटक जसे की मजकूर, फाइल्स आणि जटिल इनपुट्स कॅप्चर करते
+- **प्रकाराची जाणीव**: विविध इनपुट प्रकार आपोआप हाताळते, सानुकूल कोडिंगची गरज नाही
+- **कार्यक्षमता**: एकाच API कॉलसह मॅन्युअल फील्ड संग्रह काढून टाकते
+- **अनुकूलता**: फॉर्मची रचना बदलत असताना कार्यक्षमता टिकवून ठेवते
 
-पारंपरिक फॉर्म सबमिशन पूर्ण पृष्ठ रीलोड्स करतात, जसे की सुरुवातीच्या अंतराळ मोहिमांना कोर्स सुधारण्यासाठी संपूर्ण सिस्टम रीसेट आवश्यक होते. हा दृष्टिकोन वापरकर्ता अनुभवात अडथळा आणतो आणि अ‍ॅप्लिकेशन स्थिती गमावतो.
+### सर्व्हर कम्युनिकेशन फंक्शन तयार करणे
 
-JavaScript फॉर्म हाताळणी आधुनिक अंतराळ यानांद्वारे वापरल्या जाणाऱ्या सतत मार्गदर्शन प्रणालीसारखी कार्य करते – नेव्हिगेशन संदर्भ गमावल्याशिवाय रिअल-टाइम समायोजन करणे. आपण फॉर्म सबमिशन इंटरसेप्ट करू शकतो, त्वरित अभिप्राय प्रदान करू शकतो, त्रुटी सौम्यपणे हाताळू शकतो आणि वापरकर्त्याच्या अ‍ॅप्लिकेशनमधील स्थिती राखून सर्व्हर प्रतिसादांवर आधारित इंटरफेस अपडेट करू शकतो.
+आता आधुनिक JavaScript पॅटर्न्स वापरून तुमच्या API सर्व्हरशी संवाद साधण्यासाठी एक मजबूत फंक्शन तयार करूया:
+
+```javascript
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: account
+    });
+    
+    // Check if the response was successful
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    return await response.json();
+  } catch (error) {
+    console.error('Account creation failed:', error);
+    return { error: error.message || 'Network error occurred' };
+  }
+}
+```
 
-### पृष्ठ रीलोड्स का टाळावेत?
+**असिंक्रोनस JavaScript समजून घेणे:**
 
 ```mermaid
 sequenceDiagram
-    participant User
-    participant SPA
-    participant Server
+    participant JS as JavaScript
+    participant Fetch as Fetch API
+    participant Server as Backend Server
     
-    User->>SPA: Submits form
-    SPA->>Server: AJAX request
-    Server-->>SPA: JSON response
-    SPA->>User: Updates interface
-    
-    Note over User,SPA: No page reload!
+    JS->>Fetch: fetch() request
+    Fetch->>Server: HTTP POST
+    Server-->>Fetch: JSON response
+    Fetch-->>JS: await response
+    JS->>JS: Process data
 ```
 
-**JavaScript फॉर्म हाताळणीचे फायदे:**
-- **अ‍ॅप्लिकेशन स्थिती आणि वापरकर्ता संदर्भ राखते**
-- **त्वरित अभिप्राय आणि लोडिंग इंडिकेटर्स प्रदान करते**
-- **
-- **सविस्तर** त्रुटी संदेशे डिबगिंगसाठी प्रदान करते  
-- **सुसंगत** डेटा संरचना यश आणि त्रुटी प्रकरणांसाठी परत करते  
+**या आधुनिक अंमलबजावणीने काय साध्य केले आहे:**
+- **वापरते** `async/await` वाचण्यास सुलभ असिंक्रोनस कोडसाठी
+- **योग्य त्रुटी हाताळणी समाविष्ट करते** try/catch ब्लॉक्ससह
+- **डेटा प्रक्रिया करण्यापूर्वी प्रतिसाद स्थिती तपासते**
+- **JSON कम्युनिकेशनसाठी योग्य हेडर्स सेट करते**
+- **डिबगिंगसाठी तपशीलवार त्रुटी संदेश प्रदान करते**
+- **यश आणि त्रुटी प्रकरणांसाठी सुसंगत डेटा संरचना परत करते**
 
-### आधुनिक Fetch API ची ताकद  
+### आधुनिक Fetch API ची ताकद
 
-**Fetch API च्या जुन्या पद्धतींवरील फायदे:**  
+**Fetch API चे जुन्या पद्धतींवर फायदे:**
 
-| वैशिष्ट्य | फायदा | अंमलबजावणी |  
-|-----------|-------|------------|  
-| प्रॉमिस-आधारित | स्वच्छ असिंक्रोन कोड | `await fetch()` |  
-| विनंती सानुकूलन | पूर्ण HTTP नियंत्रण | हेडर्स, पद्धती, बॉडी |  
-| प्रतिसाद हाताळणी | लवचिक डेटा पार्सिंग | `.json()`, `.text()`, `.blob()` |  
-| त्रुटी हाताळणी | व्यापक त्रुटी पकडणे | Try/catch ब्लॉक्स |  
+| वैशिष्ट्य | फायदा | अंमलबजावणी |
+|-----------|-------|------------|
+| प्रॉमिस-आधारित | स्वच्छ असिंक्रोनस कोड | `await fetch()` |
+| विनंती सानुकूलन | पूर्ण HTTP नियंत्रण | हेडर्स, पद्धती, बॉडी |
+| प्रतिसाद हाताळणी | लवचिक डेटा पार्सिंग | `.json()`, `.text()`, `.blob()` |
+| त्रुटी हाताळणी | व्यापक त्रुटी पकडणे | Try/catch ब्लॉक्स |
 
-> 🎥 **अधिक जाणून घ्या**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - आधुनिक वेब विकासासाठी असिंक्रोनस JavaScript पॅटर्न समजून घेणे.  
+> 🎥 **अधिक जाणून घ्या**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - आधुनिक वेब विकासासाठी असिंक्रोनस JavaScript पॅटर्न्स समजून घेणे.
 
-**सर्व्हर कम्युनिकेशनसाठी महत्त्वाचे संकल्पना:**  
-- **Async फंक्शन्स** सर्व्हर प्रतिसादांची वाट पाहण्यासाठी अंमलबजावणी थांबवू शकतात  
-- **Await कीवर्ड** असिंक्रोनस कोडला सिंक्रोनस कोडसारखे वाचण्यास सोपे बनवते  
-- **Fetch API** आधुनिक, प्रॉमिस-आधारित HTTP विनंत्या प्रदान करते  
-- **त्रुटी हाताळणी** तुमच्या अॅपला नेटवर्क समस्यांवर सौम्य प्रतिसाद देण्यास सक्षम करते  
+**सर्व्हर कम्युनिकेशनसाठी मुख्य संकल्पना:**
+- **Async फंक्शन्स** सर्व्हर प्रतिसादांची वाट पाहण्यासाठी अंमलबजावणी थांबवण्याची परवानगी देतात
+- **Await कीवर्ड** असिंक्रोनस कोडला सिंक्रोनस कोडसारखे वाचण्यास सुलभ बनवते
+- **Fetch API** आधुनिक, प्रॉमिस-आधारित HTTP विनंत्या प्रदान करते
+- **त्रुटी हाताळणी** तुमचे अॅप नेटवर्क समस्यांना अनुग्रहाने प्रतिसाद देते याची खात्री करते
 
-### नोंदणी फंक्शन पूर्ण करणे  
+### नोंदणी फंक्शन पूर्ण करणे
 
-चला सर्वकाही एकत्र आणून एक संपूर्ण, उत्पादन-तयार नोंदणी फंक्शन तयार करूया:  
+आता सर्वकाही एकत्र आणून एक संपूर्ण, उत्पादन-तयार नोंदणी फंक्शन तयार करूया:
 
 ```javascript
 async function register() {
@@ -406,41 +509,60 @@ async function register() {
   }
 }
 ```
-  
-**या सुधारित अंमलबजावणीत समाविष्ट आहे:**  
-- **दृश्यमान फीडबॅक** फॉर्म सबमिशन दरम्यान प्रदान करते  
-- **सबमिट बटण अक्षम करते** डुप्लिकेट सबमिशन टाळण्यासाठी  
-- **अपेक्षित आणि अनपेक्षित त्रुटी सौम्यपणे हाताळते**  
-- **वापरकर्ता-अनुकूल यश आणि त्रुटी संदेश दाखवते**  
-- **यशस्वी नोंदणीनंतर फॉर्म रीसेट करते**  
-- **परिणाम काहीही असो, UI स्थिती पुनर्संचयित करते**  
 
-### तुमची अंमलबजावणी तपासणे  
+**या सुधारित अंमलबजावणीमध्ये समाविष्ट आहे:**
+- **फॉर्म सबमिशन दरम्यान व्हिज्युअल फीडबॅक प्रदान करते**
+- **डुप्लिकेट सबमिशन टाळण्यासाठी सबमिट बटण अक्षम करते**
+- **अपेक्षित आणि अनपेक्षित त्रुटी दोन्ही अनुग्रहाने हाताळते**
+- **यशस्वी नोंदणीनंतर फॉर्म रीसेट करते**
+- **परिणाम काहीही असो, UI स्थिती पुनर्संचयित करते**
+
+### तुमच्या अंमलबजावणीची चाचणी करणे
+
+**तुमच्या ब्राउझर डेव्हलपर टूल्स उघडा आणि नोंदणीची चाचणी करा:**
+
+1. **ब्राउझर कन्सोल उघडा** (F12 → कन्सोल टॅब)
+2. **नोंदणी फॉर्म भरा**
+3. **"Create Account" वर क्लिक करा**
+4. **कन्सोल संदेश आणि वापरकर्ता फीडबॅक निरीक्षण करा**
 
-**तुमच्या ब्राउझर डेव्हलपर टूल्स उघडा आणि नोंदणी तपासा:**  
+![ब्राउझर कन्सोलमध्ये लॉग संदेश दर्शवणारा स्क्रीनशॉट](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.mr.png)
 
-1. **ब्राउझर कन्सोल उघडा** (F12 → Console टॅब)  
-2. **नोंदणी फॉर्म भरा**  
-3. **"Create Account" वर क्लिक करा**  
-4. **कन्सोल संदेश आणि वापरकर्ता फीडबॅक निरीक्षण करा**  
+**तुम्हाला काय दिसेल:**
+- **लोडिंग स्थिती** सबमिट बटणावर दिसते
+- **कन्सोल लॉग्स** प्रक्रियेबद्दल तपशीलवार माहिती दर्शवतात
+- **यश संदेश** खाते तयार होण्यास यशस्वी झाल्यावर दिसतो
+- **फॉर्म यशस्वी सबमिशननंतर आपोआप रीसेट होतो**
 
-![ब्राउझर कन्सोलमध्ये लॉग संदेश दाखवणारा स्क्रीनशॉट](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.mr.png)  
+> 🔒 **सुरक्षा विचार**: सध्या, डेटा HTTP वरून प्रवास करतो, जो उत्पादनासाठी सुरक्षित नाही. वास्तविक अनुप्रयोगांमध्ये, नेहमी डेटा ट्रान्समिशन एन्क्रिप्ट करण्यासाठी HTTPS वापरा. [HTTPS सुरक्षा](https://en.wikipedia.org/wiki/HTTPS) आणि वापरकर्ता डेटा संरक्षित करण्यासाठी ते का आवश्यक आहे याबद्दल अधिक जाणून घ्या.
 
-**तुम्हाला काय दिसेल:**  
-- **लोडिंग स्थिती** सबमिट बटणावर दिसते  
-- **कन्सोल लॉग्स** प्रक्रियेबद्दल सविस्तर माहिती दाखवतात  
-- **यश संदेश** खाते तयार होण्यास यशस्वी झाल्यावर दिसतो  
-- **फॉर्म यशस्वी सबमिशननंतर आपोआप रीसेट होतो**  
+### 🔄 **शैक्षणिक तपासणी**
+**आधुनिक JavaScript एकत्रीकरण**: असिंक्रोनस फॉर्म हाताळणीची तुमची समज तपासा:
+- ✅ `event.preventDefault()` फॉर्मच्या डीफॉल्ट वर्तनात कसा बदल करतो?
+- ✅ FormData API मॅन्युअल फील्ड संग्रहापेक्षा अधिक कार्यक्षम का आहे?
+- ✅ Async/await पॅटर्न्स कोड वाचण्यास सुलभ कसे बनवतात?
+- ✅ त्रुटी हाताळणी वापरकर्ता अनुभवात काय भूमिका बजावते?
 
-> 🔒 **सुरक्षा विचार**: सध्या, डेटा HTTP वर प्रवास करतो, जो उत्पादनासाठी सुरक्षित नाही. वास्तविक अॅप्लिकेशन्समध्ये, नेहमीच HTTPS वापरा डेटा ट्रान्समिशन एन्क्रिप्ट करण्यासाठी. [HTTPS सुरक्षा](https://en.wikipedia.org/wiki/HTTPS) आणि वापरकर्ता डेटा संरक्षित करण्यासाठी ते का आवश्यक आहे याबद्दल अधिक जाणून घ्या.  
+**सिस्टम आर्किटेक्चर**: तुमचे फॉर्म हाताळणी दर्शवते:
+- **इव्हेंट-ड्रिव्हन प्रोग्रामिंग**: पृष्ठ रीलोड न करता फॉर्म वापरकर्ता क्रियांना प्रतिसाद देतात
+- **असिंक्रोनस कम्युनिकेशन**: सर्व्हर विनंत्या वापरकर्ता इंटरफेस ब्लॉक करत नाहीत
+- **त्रुटी हाताळणी**: नेटवर्क विनंत्या अयशस्वी झाल्यावर अनुग्रहाने ह्रास
+- **स्थिती व्यवस्थापन**: UI अद्यतने सर्व्हर प्रतिसाद योग्य प्रकारे प्रतिबिंबित करतात
+- **प्रोग्रेसिव्ह एन्हांसमेंट**: बेस कार्यक्षमता कार्य करते, JavaScript त्यात सुधारणा करते
 
-## सर्वसमावेशक फॉर्म व्हॅलिडेशन  
+**व्यावसायिक पॅटर्न्स**: तुम्ही अंमलबजावणी केली आहे:
+- **सिंगल रिस्पॉन्सिबिलिटी**: फंक्शन्सचे स्पष्ट, केंद्रित उद्देश आहेत
+- **त्रुटी सीमा**: Try/catch ब्लॉक्स अनुप्रयोग क्रॅश होण्यापासून प्रतिबंधित करतात
+- **वापरकर्ता फीडबॅक**: लोडिंग स्थिती आणि यश/त्रुटी संदेश
+- **डेटा ट्रान्सफॉर्मेशन**: सर्व्हर कम्युनिकेशनसाठी FormData ते JSON
 
-फॉर्म व्हॅलिडेशन सबमिशननंतर त्रुटी शोधण्याचा त्रासदायक अनुभव टाळते. आंतरराष्ट्रीय स्पेस स्टेशनवरील अनेक redundant प्रणालींसारखे, प्रभावी व्हॅलिडेशन अनेक सुरक्षा तपासण्यांचे स्तर वापरते.  
+## सर्वसमावेशक फॉर्म व्हॅलिडेशन
 
-सर्वोत्तम दृष्टिकोन ब्राउझर-स्तरीय व्हॅलिडेशन त्वरित फीडबॅकसाठी, JavaScript व्हॅलिडेशन सुधारित वापरकर्ता अनुभवासाठी, आणि सर्व्हर-साइड व्हॅलिडेशन सुरक्षा आणि डेटा अखंडतेसाठी एकत्रित करतो. ही redundancy वापरकर्ता समाधान आणि प्रणाली संरक्षण सुनिश्चित करते.  
+फॉर्म व्हॅलिडेशन सबमिशननंतर त्रुटी शोधण्याचा त्रासदायक अनुभव टाळते. आंतरराष्ट्रीय अंतराळ स्थानकावरील अनेक पुनरावृत्ती प्रणालींप्रमाणे, प्रभावी व्हॅलिडेशन अनेक स्तरांचे सुरक्षा तपासणी वापरते.
 
-### व्हॅलिडेशन स्तर समजून घेणे  
+सर्वोत्तम दृष्टिकोन ब्राउझर-स्तरीय व्हॅलिडेशन त्वरित फीडबॅकसाठी, JavaScript व्हॅलिडेशन सुधारित वापरकर्ता अनुभवासाठी आणि सुरक्षा आणि डेटा अखंडतेसाठी सर्व्हर-साइड व्हॅलिडेशन एकत्र करतो. ही पुनरावृत्ती वापरकर्ता समाधान आणि सिस्टम संरक्षण सुनिश्चित करते.
+
+### व्हॅलिडेशन स्तर समजून घेणे
 
 ```mermaid
 graph TD
@@ -454,28 +576,28 @@ graph TD
     C -->|Invalid| H[Custom Error Display]
     E -->|Invalid| I[Server Error Response]
 ```
-  
-**मल्टी-लेयर व्हॅलिडेशन धोरण:**  
-- **HTML5 व्हॅलिडेशन**: त्वरित ब्राउझर-आधारित तपासणी  
-- **JavaScript व्हॅलिडेशन**: सानुकूल लॉजिक आणि वापरकर्ता अनुभव  
-- **सर्व्हर व्हॅलिडेशन**: अंतिम सुरक्षा आणि डेटा अखंडता तपासणी  
-- **प्रोग्रेसिव्ह एन्हांसमेंट**: JavaScript अक्षम असले तरी कार्य करते  
 
-### HTML5 व्हॅलिडेशन अॅट्रिब्यूट्स  
+**मल्टी-लेयर व्हॅलिडेशन धोरण:**
+- **HTML5 व्हॅलिडेशन**: त्वरित ब्राउझर-आधारित तपासणी
+- **JavaScript व्हॅलिडेशन**: सानुकूल लॉजिक आणि वापरकर्ता अनुभव
+- **सर्व्हर व्हॅलिडेशन**: अंतिम सुरक्षा आणि डेटा अखंडता तपासणी
+- **प्रोग्रेसिव्ह एन्हांसमेंट**: JavaScript अक्षम असल्यासही कार्य करते
+
+### HTML5 व्हॅलिडेशन अॅट्रिब्यूट्स
 
-**तुमच्या आधुनिक व्हॅलिडेशन टूल्स:**  
+**तुमच्या आधुनिक व्हॅलिडेशन साधनांचा उपयोग:**
 
-| अॅट्रिब्यूट | उद्देश | उदाहरण वापर | ब्राउझर वर्तन |  
-|------------|--------|-------------|----------------|  
-| `required` | अनिवार्य फील्ड्स | `<input required>` | रिक्त सबमिशन रोखते |  
-| `minlength`/`maxlength` | मजकूर लांबी मर्यादा | `<input maxlength="20">` | कॅरेक्टर मर्यादा लागू करते |  
-| `min`/`max` | संख्यात्मक श्रेणी | `<input min="0" max="1000">` | संख्या मर्यादा तपासते |  
-| `pattern` | सानुकूल regex नियम | `<input pattern="[A-Za-z]+">` | विशिष्ट स्वरूप जुळवते |  
-| `type` | डेटा प्रकार व्हॅलिडेशन | `<input type="email">` | स्वरूप-विशिष्ट व्हॅलिडेशन |  
+| अॅट्रिब्यूट | उद्देश | उदाहरण वापर | ब्राउझर वर्तन |
+|------------|--------|-------------|----------------|
+| `required` | अनिवार्य फील्ड्स | `<input required>` | रिक्त सबमिशन प्रतिबंधित करते |
+| `minlength`/`maxlength` | मजकूर लांबी मर्यादा | `<input maxlength="20">` | कॅरेक्टर मर्यादा लागू करते |
+| `min`/`max` | संख्यात्मक श्रेणी | `<input min="0" max="1000">` | संख्या मर्यादा सत्यापित करते |
+| `pattern` | सानुकूल regex नियम | `<input pattern="[A-Za-z]+">` | विशिष्ट स्वरूप जुळवते |
+| `type` | डेटा प्रकार व्हॅलिडेशन | `<input type="email">` | स्वरूप-विशिष्ट व्हॅलिडेशन |
 
-### CSS व्हॅलिडेशन स्टाइलिंग  
+### CSS व्हॅलिडेशन स्टायलिंग
 
-**व्हॅलिडेशन स्थितींसाठी दृश्यात्मक फीडबॅक तयार करा:**  
+**व्हॅलिडेशन स्थितींसाठी व्हिज्युअल फीडबॅक तयार करा:**
 
 ```css
 /* Valid input styling */
@@ -499,18 +621,18 @@ input:focus:invalid {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
 ```
-  
-**या दृश्य संकेत काय साध्य करतात:**  
-- **हिरवे बॉर्डर**: यशस्वी व्हॅलिडेशन सूचित करतात, जसे मिशन कंट्रोलमधील हिरवी लाईट्स  
-- **लाल बॉर्डर**: व्हॅलिडेशन त्रुटी सूचित करतात ज्यांना लक्ष देणे आवश्यक आहे  
-- **फोकस हायलाइट्स**: वर्तमान इनपुट स्थानासाठी स्पष्ट दृश्य संदर्भ प्रदान करतात  
-- **सुसंगत स्टाइलिंग**: वापरकर्ते शिकू शकतील अशा अंदाजे इंटरफेस पॅटर्न्स स्थापित करतात  
 
-> 💡 **प्रो टिप**: `:valid` आणि `:invalid` CSS pseudo-classes वापरून वापरकर्ते टाइप करत असताना त्वरित दृश्यात्मक फीडबॅक प्रदान करा, प्रतिसादात्मक आणि उपयुक्त इंटरफेस तयार करा.  
+**या व्हिज्युअल संकेतांनी काय साध्य केले आहे:**
+- **हिरवे बॉर्डर्स**: यशस्वी व्हॅलिडेशन दर्शवतात, जसे मिशन कंट्रोलमधील हिरव्या दिवे
+- **लाल बॉर्डर्स**: लक्ष देण्याची आवश्यकता असलेल्या व्हॅलिडेशन त्रुटी दर्शवतात
+- **फोकस हायलाइट्स**: वर्तमान इनपुट स्थानासाठी स्पष्ट व्हिज्युअल संदर्भ प्रदान करतात
+- **सुसंगत स्टायलिंग**: वापरकर्ते शिकू शकतील अशा अंदाजे इंटरफेस पॅटर्न्स स्थापित करतात
+
+> 💡 **प्रो टिप**: `:valid` आणि `:invalid` CSS प्सूडो-क्लासेस वापरून वापरकर्ते टाइप करत असताना त्वरित व्हिज्युअल फीडबॅक प्रदान करा, प्रतिसादात्मक आणि उपयुक्त इंटरफेस तयार करा.
 
-### सर्वसमावेशक व्हॅलिडेशन अंमलबजावणी  
+### सर्वसमावेशक व्हॅलिडेशन अंमलबजावणी
 
-चला तुमच्या नोंदणी फॉर्मला उत्कृष्ट वापरकर्ता अनुभव आणि डेटा गुणवत्तेसह मजबूत व्हॅलिडेशनसह सुधारित करूया:  
+तुमच्या नोंदणी फॉर्मला उत्कृष्ट वापरकर्ता अनुभव आणि डेटा गुणवत्तेसह मजबूत व्हॅलिडेशनसह सुधारूया:
 
 ```html
 <form id="registerForm" method="POST" novalidate>
@@ -552,42 +674,42 @@ input:focus:invalid {
   <button type="submit">Create Account</button>
 </form>
 ```
-  
-**सुधारित व्हॅलिडेशन समजून घेणे:**  
-- **आवश्यक फील्ड इंडिकेटर्स** सह उपयुक्त वर्णन एकत्रित करते  
-- **`pattern` अॅट्रिब्यूट्स** स्वरूप व्हॅलिडेशनसाठी समाविष्ट करते  
-- **`title` अॅट्रिब्यूट्स** accessibility आणि टूलटिप्ससाठी प्रदान करते  
-- **वापरकर्ता इनपुट मार्गदर्शन करण्यासाठी मदत करणारा मजकूर समाविष्ट करते**  
-- **बेहतर accessibility साठी सेमॅंटिक HTML संरचना वापरते**  
 
-### प्रगत व्हॅलिडेशन नियम  
+**सुधारित व्हॅलिडेशन समजून घेणे:**
+- **अनिवार्य फील्ड इंडिकेटर्ससह उपयुक्त वर्णन एकत्र करते**
+- **फॉर्मॅट व्हॅलिडेशनसाठी `pattern` अॅट्रिब्यूट्स समाविष्ट करते**
+- **अॅक्सेसिबिलिटी आणि टूलटिप्ससाठी `title` अॅट्रिब्यूट्स प्रदान करते**
+- **वापरकर्ता इनपुट मार्गदर्शन करण्यासाठी मदत करणारा मजकूर जोडते**
+- **चांगल्या अॅक्सेसिबिलिटीसाठी सेमॅंटिक HTML रचना वापरते**
+
+### प्रगत व्हॅलिडेशन नियम
 
-**प्रत्येक व्हॅलिडेशन नियम काय साध्य करतो:**  
+**प्रत्येक व्हॅलिडेशन नियम काय साध्य करतो:**
 
-| फील्ड | व्हॅलिडेशन नियम | वापरकर्ता फायदा |  
-|-------|-----------------|-----------------|  
-| Username | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | वैध, अद्वितीय ओळख सुनिश्चित करते |  
-| Currency | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | सामान्य चलन चिन्ह स्वीकारते |  
-| Balance | `min="0"`, `step="0.01"`, `type="number"` | नकारात्मक शिल्लक टाळते |  
-| Description | `maxlength="100"` | वाजवी लांबी मर्यादा |  
+| फील्ड | व्हॅलिडेशन नियम | वापरकर्ता फायदा |
+|-------|-----------------|-----------------|
+| Username | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | वैध, अद्वितीय ओळख सुनिश्चित करते |
+| Currency | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | सामान्य चलन चिन्ह स्वीकारते |
+| Balance | `min="0"`, `step="0.01"`, `type="number"` | नकारात्मक शिल्लक प्रतिबंधित करते |
+| Description | `maxlength="100"` | वाजवी लांबी मर्यादा |
 
-### व्हॅलिडेशन वर्तन तपासणे  
+### व्हॅलिडेशन वर्तनाची चाचणी करणे
 
-**या व्हॅलिडेशन परिस्थितींचा प्रयत्न करा:**  
-1. **रिक्त आवश्यक फील्डसह फॉर्म सबमिट करा**  
-2. **3 कॅरेक्टरपेक्षा कमी युजरनेम प्रविष्ट करा**  
-3. **युजरनेम फील्डमध्ये विशेष कॅरेक्टर वापरण्याचा प्रयत्न करा**  
-4. **नकारात्मक शिल्लक रक्कम प्रविष्ट करा**  
+**या व्हॅलिडेशन परिस्थितींची चाचणी करा:**
+1. **रिक्त अनिवार्य फील्डसह फॉर्म सबमिट करा**
+2. **3 वर्णांपेक्षा कमी युजरनेम प्रविष्ट करा**
+3. **युजरनेम फील्डमध्ये विशेष वर्ण वापरून पहा**
+4. **नकारात्मक शिल्लक रक्कम प्रविष्ट करा**
 
-![फॉर्म सबमिट करण्याचा प्रयत्न करताना व्हॅलिडेशन त्रुटी दाखवणारा स्क्रीनशॉट](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.mr.png)  
+![फॉर्म सबमिट करण्याचा प्रयत्न करताना व्हॅलिडेशन त्रुटी दर्शवणारा स्क्रीनशॉट](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.mr.png)
 
-**तुम्ही काय निरीक्षण कराल:**  
-- **ब्राउझर दाखवतो** नैसर्गिक व्हॅलिडेशन संदेश  
-- **`valid` आणि `invalid` स्थितींवर आधारित स्टाइलिंग बदलते**  
-- **सर्व व्हॅलिडेशन पास होईपर्यंत फॉर्म सबमिशन रोखले जाते**  
-- **फोकस आपोआप** पहिल्या अवैध फील्डवर हलते  
+**तुम्ही काय निरीक्षण कराल:**
+- **ब्राउझर दर्शवतो** मूळ व्हॅलिडेशन संदेश
+- **स्टायलिंग बदलते** `:valid` आणि `:invalid` स्थितींवर आधारित
+- **फॉर्म सबमिशन** सर्व व्हॅलिडेशन पास होईपर्यंत प्रतिबंधित केले जाते
+- **फोकस आपोआप** पहिल्या अवैध फील्डवर हलते
 
-### क्लायंट-साइड vs सर्व्हर-साइड व्हॅलिडेशन  
+### क्लायंट-साइड वि. सर्व्हर-साइड व्हॅलिडेशन
 
 ```mermaid
 graph LR
@@ -602,50 +724,118 @@ graph LR
     A -.-> I[Both Required]
     E -.-> I
 ```
-  
-**तुम्हाला दोन्ही स्तर का आवश्यक आहेत:**  
-- **क्लायंट-साइड व्हॅलिडेशन**: त्वरित फीडबॅक प्रदान करते आणि वापरकर्ता अनुभव सुधारते  
-- **सर्व्हर-साइड व्हॅलिडेशन**: सुरक्षा सुनिश्चित करते आणि जटिल व्यवसाय नियम हाताळते  
-- **संयुक्त दृष्टिकोन**: मजबूत, वापरकर्ता-अनुकूल आणि सुरक्षित अॅप्लिकेशन्स तयार करते  
-- **प्रोग्रेसिव्ह एन्हांसमेंट**: JavaScript अक्षम असले तरी कार्य करते  
-
-> 🛡️ **सुरक्षा स्मरणपत्र**: केवळ क्लायंट-साइड व्हॅलिडेशनवर विश्वास ठेवू नका! दुर्भावनायुक्त वापरकर्ते क्लायंट-साइड तपासण्या टाळू शकतात, त्यामुळे सुरक्षा आणि डेटा अखंडतेसाठी सर्व्हर-साइड व्हॅलिडेशन आवश्यक आहे.  
-
----  
 
----
-
-## GitHub Copilot Agent Challenge 🚀  
+**तुम्हाला दोन्ही स्तरांची आवश्यकता का आहे:**
+- **क्लायंट-साइड व्हॅलिडेशन**: त्वरित फीडबॅक प्रदान करते आणि वापरकर्ता अनुभव सुधारते
+- **सर्व्हर-साइड व्हॅलिडेशन**: सुरक्षा सुनिश्चित करते आणि जटिल व्यवसाय नियम हाताळते
+- **संयुक्त दृष्टिकोन**: मजबूत, वापरकर्ता-अनुकूल आणि सुरक्षित अनुप्रयोग तयार करते
+- **प्रोग्रेसिव्ह एन्हांसमेंट**: JavaScript अक्षम असतानाही कार्य करते
+
+> 🛡️ **सुरक्षा स्मरणपत्र**: क्लायंट-साइड व्हॅलिडेशनवर कधीही विश्वास ठेवू नका! क्लायंट-साइड तपासण्या वगळण्यासाठी दुर्भावनायुक्त वापरकर्ते सक्षम असतात, त्यामुळे सुरक्षा आणि डेटा अखंडतेसाठी सर्व्हर-साइड व्हॅलिडेशन आवश्यक आहे.
+
+### ⚡ **पुढील 5 मिनिटांत तुम्ही काय करू शकता**
+- [ ] अवैध डेटासह तुमच्या फॉर्मची चाचणी करा आणि व्हॅलिडेशन संदेश पहा
+- [ ] HTML5 व्हॅलिडेशन पाहण्यासाठी JavaScript अक्षम करून फॉर्म सबमिट करण्याचा प्रयत्न करा
+- [ ] ब्राउझर DevTools उघडा आणि सर्व्हरला पाठवलेला फॉर्म डेटा तपासा
+- [ ] मोबाइल कीबोर्ड बदल पाहण्यासाठी विविध इनपुट प्रकारांसह प्रयोग करा
+
+### 🎯 **तुम्ही या तासात काय साध्य करू शकता**
+- [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि फॉर्म हाताळणी संकल्पना समजून घ्या
+- [ ] रिअल-टाइम फीडबॅकसह सर्वसमावेशक व्हॅलिडेशन आव्हान अंमलात आणा
+- [ ] व्यावसायिक-दिसणारे फॉर्म तयार करण्यासाठी CSS स्टायलिंग जोडा
+- [ ] डुप्लिकेट युजरनेम्स आणि सर्व्हर त्रुटींसाठी त्रुटी हाताळणी तयार करा
+- [ ] जुळणाऱ्या व्हॅलिडेशनसह पासवर्ड पुष्टीकरण फील्ड जोडा
+
+### 📅 **तुमचा आठवडाभराचा फॉर्म मास्टरी प्रवास**
+- [ ] प्रगत फॉर्म वैशिष्ट्यांसह संपूर्ण बँकिंग अॅप पूर्ण करा
+- [ ] प्रोफाइल चित्रे किंवा दस्तऐवजांसाठी फाइल अपलोड क्षमता अंमलात आणा
+- [ ] प्रगती निर्देशक आणि स्थिती व्यवस्थापनासह मल्टी-स्टेप फॉर्म जोडा
+- [ ] वापरकर्त्याच्या निवडींवर आधारित अनुकूल होणारे डायनॅमिक फॉर्म तयार करा
+- [ ] चांगल्या वापरकर्ता अनुभवासाठी फॉर्म ऑटोसेव्ह आणि पुनर्प्राप्ती अंमलात आणा
+- [ ] ईमेल सत्यापन आणि फोन नंबर स्वरूपनासारखे प्रगत व्हॅलिडेशन जोडा
+
+### 🌟 **तुमचा महिनाभराचा फ्रंटएंड विकास मास्टरी**
+- [ ] सशर्त लॉजिक आणि वर्कफ्लो असलेल्या जटिल फॉर्म अनुप्रयोग तयार करा
+- [ ] जलद विकासासाठी फॉर्म लायब्ररी आणि फ्रेमवर्क शिका
+- [ ] अॅक्सेसिबिलिटी मार्गदर्शक तत्त्वे आणि समावेशक डिझाइन तत्त्वे मास्टर करा
+- [ ] जागतिक फॉर्मसाठी आंतरराष्ट्रीयीकरण आणि स्थानिकीकरण अंमलात आणा
+- [ ] पुनर्वापर करण्यायोग्य फॉर्म घटक लायब्ररी आणि डिझाइन सिस्टम तयार करा
+- [ ] ओपन सोर्स फॉर्म प्रकल्पांमध्ये योगदान द्या आणि सर्वोत्तम पद्धती सामायिक करा
+
+## 🎯 तुमचा फॉर्म विकास मास्टरी टाइमलाइन
 
-Agent मोड वापरून खालील आव्हान पूर्ण करा:  
+```mermaid
+timeline
+    title Form Development & User Experience Learning Progression
+    
+    section HTML Foundation (15 minutes)
+        Semantic Forms: Form elements
+                      : Input types
+                      : Labels and accessibility
+                      : Progressive enhancement
+        
+    section JavaScript Integration (25 minutes)
+        Event Handling: Form submission
+                      : Data collection
+                      : AJAX communication
+                      : Async/await patterns
+        
+    section Validation Systems (35 minutes)
+        Multi-layer Security: HTML5 validation
+                            : Client-side logic
+                            : Server-side verification
+                            : Error handling
+        
+    section User Experience (45 minutes)
+        Interface Polish: Loading states
+                        : Success messaging
+                        : Error recovery
+                        : Accessibility features
+        
+    section Advanced Patterns (1 week)
+        Professional Forms: Dynamic validation
+                          : Multi-step workflows
+                          : File uploads
+                          : Real-time feedback
+        
+    section Enterprise Skills (1 month)
+        Production Applications: Form libraries
+                               : Testing strategies
+                               : Performance optimization
+                               : Security best practices
+```
 
-**वर्णन:** नोंदणी फॉर्मला सर्वसमावेशक क्लायंट-साइड व्हॅलिडेशन आणि वापरकर्ता फीडबॅकसह सुधारित करा. हे आव्हान तुम्हाला फॉर्म व्हॅलिडेशन, त्रुटी हाताळणी, आणि परस्पर फीडबॅकसह वापरकर्ता अनुभव सुधारण्याचा सराव करण्यास मदत करेल.  
+### 🛠️ तुमचा फॉर्म विकास टूलकिट सारांश
 
-**प्रॉम्प्ट:** नोंदणी फॉर्मसाठी संपूर्ण फॉर्म व्हॅलिडेशन प्रणाली तयार करा ज्यामध्ये समाविष्ट आहे: 1) वापरकर्ता टाइप करत असताना प्रत्येक फील्डसाठी रिअल-टाइम व्हॅलिडेशन फीडबॅक, 2) प्रत्येक इनपुट फील्डखाली सानुकूल व्हॅलिडेशन संदेश, 3) पासवर्ड पुष्टीकरण फील्डसह जुळणारे व्हॅलिडेशन, 4) दृश्यात्मक संकेत (जसे की वैध फील्डसाठी हिरवे चेकमार्क आणि अवैध फील्डसाठी लाल चेतावणी), 5) सर्व व्हॅलिडेशन पास झाल्यावरच सक्षम होणारे सबमिट बटण. HTML5 व्हॅलिडेशन अॅट्रिब्यूट्स, CSS स्टाइलिंगसाठी, आणि JavaScript परस्पर वर्तनासाठी वापरा.  
+या धड्याचा अभ्यास केल्यानंतर, तुम्ही आता मास्टर केले आहे:
+- **HTML5 फॉर्म्स**: सेमॅंटिक रचना, इनपुट प्रकार आणि अॅक्सेसिबिलिटी वैशिष्ट्ये
+- **JavaScript फॉर्म हाताळणी**: इव्हेंट व्यवस्थापन, डेटा संग्रह आणि AJAX कम्युनिकेशन
+- **व्हॅलिडेशन आर्किटेक्चर**: सुरक्षा आणि वापरकर्ता अनुभवासाठी मल्टी-
+**प्रॉम्प्ट:** नोंदणी फॉर्मसाठी एक संपूर्ण फॉर्म सत्यापन प्रणाली तयार करा ज्यामध्ये समाविष्ट आहे: 1) वापरकर्ता टाइप करत असताना प्रत्येक फील्डसाठी रिअल-टाइम सत्यापन फीडबॅक, 2) प्रत्येक इनपुट फील्डखाली सानुकूल सत्यापन संदेश, 3) पासवर्ड पुष्टीकरण फील्डसह जुळणारे सत्यापन, 4) व्हिज्युअल इंडिकेटर्स (जसे की वैध फील्डसाठी हिरवे चिन्ह आणि अवैध फील्डसाठी लाल चेतावणी), 5) सबमिट बटण जेव्हा सर्व सत्यापन पास होतात तेव्हाच सक्षम होते. HTML5 सत्यापन गुणधर्म, CSS सत्यापन स्थितींसाठी आणि JavaScript परस्पर वर्तनासाठी वापरा.
 
-[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.  
+[एजंट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
-## 🚀 आव्हान  
+## 🚀 आव्हान
 
-HTML मध्ये त्रुटी संदेश दाखवा जर वापरकर्ता आधीच अस्तित्वात असेल.  
+जर वापरकर्ता आधीच अस्तित्वात असेल तर HTML मध्ये एक त्रुटी संदेश दाखवा.
 
-अंतिम लॉगिन पृष्ठ थोड्या स्टाइलिंगनंतर कसे दिसू शकते याचे उदाहरण येथे आहे:  
+थोड्या CSS शैली जोडल्यावर अंतिम लॉगिन पृष्ठ कसे दिसू शकते याचे उदाहरण येथे आहे:
 
-![CSS शैली जोडल्यावर लॉगिन पृष्ठाचा स्क्रीनशॉट](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.mr.png)  
+![लॉगिन पृष्ठाचा स्क्रीनशॉट CSS शैली जोडल्यावर](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.mr.png)
 
-## पोस्ट-लेक्चर क्विझ  
+## व्याख्यानानंतरचा क्विझ
 
-[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/44)  
+[व्याख्यानानंतरचा क्विझ](https://ff-quizzes.netlify.app/web/quiz/44)
 
-## पुनरावलोकन आणि स्व-अभ्यास  
+## पुनरावलोकन आणि स्व-अभ्यास
 
-डेव्हलपर्स त्यांच्या फॉर्म बिल्डिंग प्रयत्नांबद्दल खूप सर्जनशील झाले आहेत, विशेषतः व्हॅलिडेशन धोरणांबद्दल. [CodePen](https://codepen.com) पाहून वेगवेगळ्या फॉर्म फ्लोबद्दल जाणून घ्या; तुम्हाला काही मनोरंजक आणि प्रेरणादायक फॉर्म सापडतात का?  
+विकसक त्यांच्या फॉर्म तयार करण्याच्या प्रयत्नांबद्दल खूपच सर्जनशील झाले आहेत, विशेषतः सत्यापन धोरणांबाबत. [CodePen](https://codepen.com) पाहून वेगवेगळ्या फॉर्म फ्लोबद्दल जाणून घ्या; तुम्हाला काही मनोरंजक आणि प्रेरणादायक फॉर्म सापडतात का?
 
-## असाइनमेंट  
+## असाइनमेंट
 
-[तुमच्या बँक अॅपला स्टाइल करा](assignment.md)  
+[तुमच्या बँक अ‍ॅपला शैली द्या](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावासह असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावासह असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/7-bank-project/3-data/README.md b/translations/mr/7-bank-project/3-data/README.md
index bc8f72d050..7cb2327347 100644
--- a/translations/mr/7-bank-project/3-data/README.md
+++ b/translations/mr/7-bank-project/3-data/README.md
@@ -1,19 +1,72 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "2c1164912414820c8efd699b43f64954",
-  "translation_date": "2025-10-22T16:19:03+00:00",
+  "original_hash": "86ee5069f27ea3151389d8687c95fac9",
+  "translation_date": "2025-11-03T14:45:17+00:00",
   "source_file": "7-bank-project/3-data/README.md",
   "language_code": "mr"
 }
 -->
 # बँकिंग अ‍ॅप तयार करा भाग 3: डेटा मिळवण्याचे आणि वापरण्याचे पद्धती
 
-स्टार ट्रेकमधील एंटरप्राइझच्या संगणकाचा विचार करा - जेव्हा कॅप्टन पिकार्ड जहाजाची स्थिती विचारतो, तेव्हा माहिती त्वरित दिसते, संपूर्ण इंटरफेस बंद न होता आणि पुन्हा तयार न होता. माहितीचा हा अखंड प्रवाहच आपण येथे तयार करत आहोत, डायनॅमिक डेटा मिळवून.
+स्टार ट्रेकमधील एंटरप्राइझचा संगणक आठवा - जेव्हा कॅप्टन पिकार्ड जहाजाची स्थिती विचारतो, तेव्हा माहिती त्वरित दिसते, संपूर्ण इंटरफेस बंद न होता आणि पुन्हा तयार न होता. माहितीचा हा अखंड प्रवाहच आपण येथे डायनॅमिक डेटा फेचिंगसह तयार करत आहोत.
 
-सध्या, तुमचे बँकिंग अ‍ॅप छापील वृत्तपत्रासारखे आहे - माहितीपूर्ण पण स्थिर. आपण ते नासाच्या मिशन कंट्रोलसारखे काहीतरी रूपांतरित करणार आहोत, जिथे डेटा सतत प्रवाहित होतो आणि वापरकर्त्याच्या कार्यप्रवाहात व्यत्यय न आणता रिअल-टाइममध्ये अपडेट होतो.
+सध्या, तुमचे बँकिंग अ‍ॅप छापील वृत्तपत्रासारखे आहे - माहितीपूर्ण पण स्थिर. आपण ते नासाच्या मिशन कंट्रोलसारखे काहीतरी रूपांतरित करणार आहोत, जिथे डेटा सतत वाहतो आणि वापरकर्त्याच्या कामकाजात व्यत्यय न आणता रिअल-टाइममध्ये अपडेट होतो.
 
-तुम्ही सर्व्हरशी असिंक्रोनसपणे संवाद साधणे, वेगवेगळ्या वेळेस येणारा डेटा हाताळणे आणि कच्च्या माहितीचे वापरकर्त्यांसाठी अर्थपूर्ण गोष्टींमध्ये रूपांतर करणे शिकाल. हे डेमो आणि उत्पादन-तयार सॉफ्टवेअरमधील फरक आहे.
+तुम्ही सर्व्हरशी असिंक्रोनसपणे संवाद साधणे, वेगवेगळ्या वेळेस येणारा डेटा हाताळणे आणि कच्च्या माहितीचे वापरकर्त्यांसाठी अर्थपूर्ण काहीतरी रूपांतर कसे करावे हे शिकाल. हे डेमो आणि प्रॉडक्शन-रेडी सॉफ्टवेअरमधील फरक आहे.
+
+## ⚡ पुढील 5 मिनिटांत तुम्ही काय करू शकता
+
+**व्यस्त डेव्हलपर्ससाठी जलद प्रारंभ मार्ग**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Set up API server]
+    B --> C[Test fetch with curl]
+    C --> D[Create login function]
+    D --> E[See data in action]
+```
+
+- **मिनिट 1-2**: तुमचा API सर्व्हर सुरू करा (`cd api && npm start`) आणि कनेक्शन तपासा
+- **मिनिट 3**: `getAccount()` फंक्शन तयार करा ज्यामध्ये fetch वापरले आहे
+- **मिनिट 4**: लॉगिन फॉर्म `action="javascript:login()"` सह वायर करा
+- **मिनिट 5**: लॉगिन तपासा आणि अकाउंट डेटा कन्सोलमध्ये दिसत असल्याचे पहा
+
+**जलद चाचणी आदेश**:
+```bash
+# Verify API is running
+curl http://localhost:5000/api
+
+# Test account data fetch
+curl http://localhost:5000/api/accounts/test
+```
+
+**महत्त्व का आहे**: 5 मिनिटांत, तुम्ही असिंक्रोनस डेटा फेचिंगचे जादू पाहाल जे प्रत्येक आधुनिक वेब अ‍ॅप्लिकेशनला चालवते. हे अ‍ॅप्स प्रतिसादात्मक आणि जिवंत वाटण्याचे फाउंडेशन आहे.
+
+## 🗺️ डेटा-ड्रिव्हन वेब अ‍ॅप्लिकेशन्समधील तुमचा शिक्षण प्रवास
+
+```mermaid
+journey
+    title From Static Pages to Dynamic Applications
+    section Understanding the Evolution
+      Traditional page reloads: 3: You
+      Discover AJAX/SPA benefits: 5: You
+      Master Fetch API patterns: 7: You
+    section Building Authentication
+      Create login functions: 4: You
+      Handle async operations: 6: You
+      Manage user sessions: 8: You
+    section Dynamic UI Updates
+      Learn DOM manipulation: 5: You
+      Build transaction displays: 7: You
+      Create responsive dashboards: 9: You
+    section Professional Patterns
+      Template-based rendering: 6: You
+      Error handling strategies: 7: You
+      Performance optimization: 8: You
+```
+
+**तुमचा प्रवासाचा गंतव्य**: या धड्याच्या शेवटी, तुम्हाला समजेल की आधुनिक वेब अ‍ॅप्लिकेशन्स डेटा कसे फेच करतात, प्रक्रिया करतात आणि डायनॅमिकली प्रदर्शित करतात, व्यावसायिक अ‍ॅप्लिकेशन्सकडून अपेक्षित अखंड वापरकर्ता अनुभव तयार करतात.
 
 ## प्री-लेक्चर क्विझ
 
@@ -21,33 +74,78 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### पूर्वतयारी
 
-डेटा मिळवण्याच्या प्रक्रियेत जाण्यापूर्वी, खालील घटक तयार असल्याची खात्री करा:
+डेटा फेचिंगमध्ये जाण्यापूर्वी, खालील घटक तयार असल्याची खात्री करा:
 
-- **मागील धडा**: [लॉगिन आणि नोंदणी फॉर्म](../2-forms/README.md) पूर्ण करा - आपण या पायावर पुढे काम करू
-- **लोकल सर्व्हर**: [Node.js](https://nodejs.org) इंस्टॉल करा आणि [सर्व्हर API चालवा](../api/README.md) खाते डेटा प्रदान करण्यासाठी
-- **API कनेक्शन**: तुमच्या सर्व्हर कनेक्शनची चाचणी या कमांडने करा:
+- **मागील धडा**: [लॉगिन आणि रजिस्ट्रेशन फॉर्म](../2-forms/README.md) पूर्ण करा - आपण या फाउंडेशनवर तयार करू
+- **लोकल सर्व्हर**: [Node.js](https://nodejs.org) इंस्टॉल करा आणि [सर्व्हर API चालवा](../api/README.md) अकाउंट डेटा प्रदान करण्यासाठी
+- **API कनेक्शन**: तुमच्या सर्व्हर कनेक्शनची चाचणी या आदेशाने करा:
 
 ```bash
 curl http://localhost:5000/api
 # Expected response: "Bank API v1.0.0"
 ```
 
-ही जलद चाचणी सर्व घटक योग्य प्रकारे संवाद साधत आहेत याची खात्री करते:
-- तुमच्या सिस्टमवर Node.js योग्य प्रकारे चालत आहे याची पडताळणी करते
-- तुमचा API सर्व्हर सक्रिय आहे आणि प्रतिसाद देत आहे याची पुष्टी करते
-- तुमचे अ‍ॅप सर्व्हरपर्यंत पोहोचू शकते याची खात्री करते (मिशनपूर्व रेडिओ संपर्क तपासल्यासारखे)
+ही जलद चाचणी सर्व घटक योग्य प्रकारे संवाद साधत असल्याची खात्री करते:
+- तुमच्या सिस्टमवर Node.js योग्य प्रकारे चालत असल्याचे सत्यापित करते
+- तुमचा API सर्व्हर सक्रिय आणि प्रतिसाद देत असल्याचे पुष्टी करते
+- तुमचे अ‍ॅप सर्व्हरपर्यंत पोहोचू शकते याची खात्री करते (मिशनपूर्व रेडिओ संपर्क तपासण्यासारखे)
+
+## 🧠 डेटा व्यवस्थापन इकोसिस्टमचा आढावा
+
+```mermaid
+mindmap
+  root((Data Management))
+    Authentication Flow
+      Login Process
+        Form Validation
+        Credential Verification
+        Session Management
+      User State
+        Global Account Object
+        Navigation Guards
+        Error Handling
+    API Communication
+      Fetch Patterns
+        GET Requests
+        POST Requests
+        Error Responses
+      Data Formats
+        JSON Processing
+        URL Encoding
+        Response Parsing
+    Dynamic UI Updates
+      DOM Manipulation
+        Safe Text Updates
+        Element Creation
+        Template Cloning
+      User Experience
+        Real-time Updates
+        Error Messages
+        Loading States
+    Security Considerations
+      XSS Prevention
+        textContent Usage
+        Input Sanitization
+        Safe HTML Creation
+      CORS Handling
+        Cross-Origin Requests
+        Header Configuration
+        Development Setup
+```
+
+**मुख्य तत्त्व**: आधुनिक वेब अ‍ॅप्लिकेशन्स डेटा ऑर्केस्ट्रेशन सिस्टम आहेत - ते वापरकर्ता इंटरफेस, सर्व्हर API आणि ब्राउझर सुरक्षा मॉडेल्समध्ये समन्वय साधतात जे अखंड, प्रतिसादात्मक अनुभव तयार करतात.
 
 ---
 
-## आधुनिक वेब अ‍ॅप्समध्ये डेटा मिळवण्याचे समजून घेणे
+## आधुनिक वेब अ‍ॅप्समध्ये डेटा फेचिंग समजून घेणे
 
-वेब अ‍ॅप्लिकेशन्स डेटा कसा हाताळतात यामध्ये गेल्या दोन दशकांत नाट्यमय बदल झाला आहे. आधुनिक तंत्रज्ञान जसे की AJAX आणि Fetch API का शक्तिशाली आहेत आणि ते वेब डेव्हलपर्ससाठी आवश्यक साधने का बनले आहेत हे समजून घेण्यासाठी ही उत्क्रांती समजून घेणे महत्त्वाचे आहे.
+वेब अ‍ॅप्लिकेशन्स डेटा कसे हाताळतात यामध्ये गेल्या दोन दशकांत नाट्यमय बदल झाला आहे. आधुनिक तंत्रज्ञान जसे की AJAX आणि Fetch API का इतके शक्तिशाली आहेत आणि वेब डेव्हलपर्ससाठी आवश्यक साधने का बनली आहेत हे समजून घेण्यासाठी ही उत्क्रांती समजून घेणे महत्त्वाचे आहे.
 
-चला पारंपरिक वेबसाइट्स कशा कार्य करतात याची तुलना आपण आज तयार करत असलेल्या डायनॅमिक, प्रतिसादक्षम अ‍ॅप्लिकेशन्सशी करूया.
+चला पारंपरिक वेबसाइट्स कशा कार्य करायच्या याचा आणि आज आपण तयार करत असलेल्या डायनॅमिक, प्रतिसादात्मक अ‍ॅप्लिकेशन्सचा अभ्यास करूया.
 
 ### पारंपरिक मल्टी-पेज अ‍ॅप्लिकेशन्स (MPA)
 
-वेबच्या सुरुवातीच्या काळात, प्रत्येक क्लिक जुन्या टेलिव्हिजनवर चॅनेल बदलण्यासारखे होते - स्क्रीन रिक्त होई, नंतर नवीन सामग्रीमध्ये हळूहळू ट्यून होई. ही सुरुवातीच्या वेब अ‍ॅप्लिकेशन्सची वास्तविकता होती, जिथे प्रत्येक संवादाचा अर्थ संपूर्ण पृष्ठ पुन्हा तयार करणे होता.
+वेबच्या सुरुवातीच्या काळात, प्रत्येक क्लिक जुन्या टेलिव्हिजनवर चॅनेल बदलण्यासारखे होते - स्क्रीन रिकामी होई, नंतर हळूहळू नवीन सामग्रीमध्ये ट्यून होई. ही सुरुवातीच्या वेब अ‍ॅप्लिकेशन्सची वास्तविकता होती, जिथे प्रत्येक संवाद संपूर्ण पृष्ठ पुन्हा तयार करण्याचा अर्थ होता.
 
 ```mermaid
 sequenceDiagram
@@ -62,17 +160,17 @@ sequenceDiagram
     Browser->>User: Displays new page (flash/reload)
 ```
 
-![मल्टी-पेज अ‍ॅप्लिकेशनमधील अपडेट कार्यप्रवाह](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.mr.png)
+![मल्टी-पेज अ‍ॅप्लिकेशनमधील अपडेट वर्कफ्लो](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.mr.png)
 
-**का ही पद्धत क्लंकी वाटली:**
-- प्रत्येक क्लिकने संपूर्ण पृष्ठ पुन्हा तयार केले
-- वापरकर्त्यांना विचारांच्या मध्यभागी त्रास झाला
+**हा दृष्टिकोन क्लंकी का वाटला:**
+- प्रत्येक क्लिकने संपूर्ण पृष्ठ पुन्हा तयार करणे आवश्यक होते
+- वापरकर्त्यांना त्या त्रासदायक पृष्ठ फ्लॅशेसने विचारमग्नतेत व्यत्यय आला
 - तुमचे इंटरनेट कनेक्शन पुन्हा पुन्हा समान हेडर आणि फूटर्स डाउनलोड करण्यात व्यस्त होते
 - अ‍ॅप्स सॉफ्टवेअर वापरण्यापेक्षा फाइलिंग कॅबिनेटमधून क्लिक करण्यासारखे वाटले
 
 ### आधुनिक सिंगल-पेज अ‍ॅप्लिकेशन्स (SPA)
 
-AJAX (Asynchronous JavaScript and XML) ने ही पद्धत पूर्णपणे बदलली. जसे आंतरराष्ट्रीय स्पेस स्टेशनचे मॉड्यूलर डिझाइन, जिथे अंतराळवीर संपूर्ण संरचना पुन्हा तयार न करता वैयक्तिक घटक बदलू शकतात, AJAX आम्हाला संपूर्ण वेबपृष्ठ पुन्हा लोड न करता विशिष्ट भाग अपडेट करण्याची परवानगी देते. नावात XMLचा उल्लेख असूनही, आपण आज प्रामुख्याने JSON वापरतो, परंतु मुख्य तत्त्व कायम आहे: फक्त जे बदलण्याची गरज आहे ते अपडेट करा.
+AJAX (असिंक्रोनस जावास्क्रिप्ट आणि XML) ने ही पद्धत पूर्णपणे बदलली. जसे आंतरराष्ट्रीय स्पेस स्टेशनचे मॉड्यूलर डिझाइन, जिथे अंतराळवीर संपूर्ण संरचना पुन्हा तयार न करता वैयक्तिक घटक बदलू शकतात, AJAX आम्हाला संपूर्ण पृष्ठ पुन्हा लोड न करता वेबपृष्ठाचा विशिष्ट भाग अपडेट करण्याची परवानगी देते. नावात XMLचा उल्लेख असूनही, आपण आज प्रामुख्याने JSON वापरतो, परंतु मुख्य तत्त्व कायम आहे: फक्त बदलण्याची गरज असलेला भाग अपडेट करा.
 
 ```mermaid
 sequenceDiagram
@@ -89,17 +187,17 @@ sequenceDiagram
     Browser->>User: Shows updated content (no reload)
 ```
 
-![सिंगल-पेज अ‍ॅप्लिकेशनमधील अपडेट कार्यप्रवाह](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.mr.png)
+![सिंगल-पेज अ‍ॅप्लिकेशनमधील अपडेट वर्कफ्लो](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.mr.png)
 
-**का SPAs अधिक चांगले वाटतात:**
-- फक्त जे भाग प्रत्यक्षात बदलले ते अपडेट होतात (स्मार्ट, बरोबर?)
-- त्रासदायक व्यत्यय नाहीत - तुमचे वापरकर्ते त्यांच्या प्रवाहात राहतात
+**SPAs चांगले का वाटतात:**
+- फक्त बदललेले भाग अपडेट होतात (चतुर, बरोबर?)
+- त्रासदायक व्यत्यय नाही - तुमचे वापरकर्ते त्यांच्या प्रवाहात राहतात
 - वायरवर कमी डेटा प्रवास करतो म्हणजे जलद लोडिंग
-- सर्व काही तुमच्या फोनवरील अ‍ॅप्ससारखे जलद आणि प्रतिसादक्षम वाटते
+- सर्व काही स्नॅपी आणि प्रतिसादात्मक वाटते, जसे तुमच्या फोनवरील अ‍ॅप्स
 
 ### आधुनिक Fetch API कडे उत्क्रांती
 
-आधुनिक ब्राउझर [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) प्रदान करतात, जे जुन्या [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ची जागा घेतात. टेलिग्राफ ऑपरेट करण्याच्या आणि ईमेल वापरण्याच्या फरकासारखे, Fetch API स्वच्छ असिंक्रोनस कोडसाठी प्रॉमिसेस वापरते आणि JSON नैसर्गिकरित्या हाताळते.
+आधुनिक ब्राउझर [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) प्रदान करतात, जे जुन्या [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ची जागा घेते. टेलिग्राफ ऑपरेट करण्याच्या आणि ईमेल वापरण्याच्या फरकासारखे, Fetch API स्वच्छ असिंक्रोनस कोडसाठी प्रॉमिसेस वापरते आणि नैसर्गिकरित्या JSON हाताळते.
 
 | वैशिष्ट्य | XMLHttpRequest | Fetch API |
 |---------|----------------|----------|
@@ -112,14 +210,14 @@ sequenceDiagram
 > 
 **तळटीप:**
 - Chrome, Firefox, Safari, आणि Edge मध्ये उत्तम प्रकारे कार्य करते (म्हणजे तुमचे वापरकर्ते जिथे आहेत तिथे)
-- फक्त Internet Explorer ला अतिरिक्त मदतीची गरज आहे (आणि प्रामाणिकपणे, IE सोडण्याची वेळ आली आहे)
-- आपण नंतर वापरणार असलेल्या मोहक async/await पॅटर्नसाठी तुम्हाला उत्तम प्रकारे सेट करते
+- फक्त Internet Explorer ला अतिरिक्त मदतीची गरज आहे (आणि प्रामाणिकपणे, IE ला सोडण्याची वेळ आली आहे)
+- आम्ही नंतर वापरणार असलेल्या एलिगंट async/await पॅटर्नसाठी तुम्हाला उत्तम प्रकारे सेट करते
 
-### वापरकर्ता लॉगिन आणि डेटा मिळवणे अंमलात आणणे
+### वापरकर्ता लॉगिन आणि डेटा पुनर्प्राप्ती अंमलात आणणे
 
-आता तुमच्या बँकिंग अ‍ॅपला स्थिर प्रदर्शनातून कार्यात्मक अ‍ॅप्लिकेशनमध्ये रूपांतरित करणारी लॉगिन प्रणाली अंमलात आणूया. जसे सुरक्षित लष्करी सुविधांमध्ये वापरले जाणारे प्रमाणीकरण प्रोटोकॉल, आपण वापरकर्त्याच्या क्रेडेन्शियल्सची पडताळणी करू आणि नंतर त्यांच्या विशिष्ट डेटावर प्रवेश प्रदान करू.
+आता तुमच्या बँकिंग अ‍ॅपला स्थिर प्रदर्शनातून कार्यात्मक अ‍ॅप्लिकेशनमध्ये रूपांतरित करणारी लॉगिन प्रणाली अंमलात आणूया. सुरक्षित लष्करी सुविधांमध्ये वापरल्या जाणाऱ्या प्रमाणीकरण प्रोटोकॉलप्रमाणे, आम्ही वापरकर्त्याच्या क्रेडेन्शियल्सची पडताळणी करू आणि नंतर त्यांचा विशिष्ट डेटा प्रदान करू.
 
-आम्ही हे टप्प्याटप्प्याने तयार करू, मूलभूत प्रमाणीकरणाने सुरुवात करून डेटा मिळवण्याच्या क्षमतेसह.
+आम्ही मूलभूत प्रमाणीकरणासह सुरुवात करून डेटा फेचिंग क्षमता जोडून हे टप्प्याटप्प्याने तयार करू.
 
 #### चरण 1: लॉगिन फंक्शन फाउंडेशन तयार करा
 
@@ -133,16 +231,16 @@ async function login() {
 ```
 
 **याचे विश्लेषण करूया:**
-- `async` कीवर्ड? तो JavaScript ला सांगतो "अरे, या फंक्शनला कदाचित गोष्टींसाठी थांबावे लागेल"
+- `async` कीवर्ड? हे जावास्क्रिप्टला सांगत आहे "अरे, या फंक्शनला कदाचित गोष्टींसाठी थांबावे लागेल"
 - आम्ही पृष्ठावरून आमचा फॉर्म घेत आहोत (काहीही फॅन्सी नाही, फक्त त्याचा ID शोधत आहोत)
 - नंतर आम्ही वापरकर्त्याने टाइप केलेले युजरनेम काढत आहोत
-- एक छान ट्रिक: तुम्ही HTML मधील `name` अ‍ॅट्रिब्युटद्वारे कोणत्याही फॉर्म इनपुटमध्ये प्रवेश करू शकता - अतिरिक्त getElementById कॉल्सची गरज नाही!
+- एक छान ट्रिक: तुम्ही HTML मधील `name` अ‍ॅट्रिब्युटने सेट केलेल्या कोणत्याही फॉर्म इनपुटला फॉर्म एलिमेंटच्या प्रॉपर्टी म्हणून ऍक्सेस करू शकता - अतिरिक्त getElementById कॉल्सची गरज नाही!
 
-> 💡 **फॉर्म ऍक्सेस पॅटर्न**: प्रत्येक फॉर्म कंट्रोलला त्याच्या नावाने (HTML मध्ये `name` अ‍ॅट्रिब्युट वापरून सेट केलेले) फॉर्म एलिमेंटच्या प्रॉपर्टी म्हणून प्रवेश करता येतो. हे फॉर्म डेटा मिळवण्याचा स्वच्छ, वाचनीय मार्ग प्रदान करते.
+> 💡 **फॉर्म ऍक्सेस पॅटर्न**: प्रत्येक फॉर्म कंट्रोलला त्याच्या नावाने (HTML मध्ये `name` अ‍ॅट्रिब्युट वापरून सेट केलेले) फॉर्म एलिमेंटच्या प्रॉपर्टी म्हणून ऍक्सेस करता येते. हे फॉर्म डेटा मिळवण्याचा स्वच्छ, वाचनीय मार्ग प्रदान करते.
 
-#### चरण 2: खाते डेटा मिळवण्याचे फंक्शन तयार करा
+#### चरण 2: अकाउंट डेटा फेचिंग फंक्शन तयार करा
 
-आता, आम्ही सर्व्हरवरून खाते डेटा मिळवण्यासाठी समर्पित फंक्शन तयार करू. हे तुमच्या नोंदणी फंक्शनसारखेच पॅटर्न अनुसरण करते पण डेटा मिळवण्यावर लक्ष केंद्रित करते:
+पुढे, आम्ही सर्व्हरवरून अकाउंट डेटा पुनर्प्राप्त करण्यासाठी समर्पित फंक्शन तयार करू. हे तुमच्या रजिस्ट्रेशन फंक्शनसारखेच पॅटर्न फॉलो करते पण डेटा पुनर्प्राप्तीवर लक्ष केंद्रित करते:
 
 ```javascript
 async function getAccount(user) {
@@ -155,37 +253,55 @@ async function getAccount(user) {
 }
 ```
 
-**या कोडने काय साध्य केले आहे:**
-- आधुनिक `fetch` API वापरून डेटा असिंक्रोनसपणे विनंती करतो
-- युजरनेम पॅरामीटरसह GET विनंती URL तयार करतो
-- URL मध्ये विशेष वर्ण सुरक्षितपणे हाताळण्यासाठी `encodeURIComponent()` लागू करतो
-- प्रतिसाद JSON स्वरूपात रूपांतरित करतो जेणेकरून डेटा सहजपणे हाताळता येईल
-- त्रुटी सौम्यपणे हाताळतो, क्रॅश होण्याऐवजी त्रुटी ऑब्जेक्ट परत करतो
+**हे कोड काय साध्य करते:**
+- आधुनिक `fetch` API वापरून डेटा असिंक्रोनसपणे विनंती करते
+- युजरनेम पॅरामीटरसह GET विनंती URL तयार करते
+- URL मध्ये विशेष वर्ण सुरक्षितपणे हाताळण्यासाठी `encodeURIComponent()` लागू करते
+- JSON स्वरूपात प्रतिसाद रूपांतरित करते जेणेकरून डेटा सहजपणे हाताळता येईल
+- त्रुटी सौम्यपणे हाताळते, क्रॅश होण्याऐवजी त्रुटी ऑब्जेक्ट परत करते
 
-> ⚠️ **सुरक्षा टीप**: `encodeURIComponent()` फंक्शन URL मध्ये विशेष वर्ण हाताळते. जसे नौदल संप्रेषण प्रणालींमध्ये वापरले जाणारे एन्कोडिंग, ते सुनिश्चित करते की तुमचा संदेश नेमका तसा पोहोचतो, "#" किंवा "&" सारखे वर्ण चुकीचे समजले जाण्यापासून प्रतिबंधित करते.
+> ⚠️ **सुरक्षा टीप**: `encodeURIComponent()` फंक्शन URL मध्ये विशेष वर्ण हाताळते. नेव्हल कम्युनिकेशन्समध्ये वापरल्या जाणाऱ्या एन्कोडिंग सिस्टम्ससारखे, ते तुमचा संदेश नेमका अपेक्षित असल्याप्रमाणे पोहोचतो याची खात्री करते, "#" किंवा "&" सारख्या वर्णांना चुकीच्या प्रकारे समजण्यापासून प्रतिबंधित करते.
 > 
-**याचे महत्त्व:**
+**महत्त्व का आहे:**
 - विशेष वर्ण URL तोडण्यापासून प्रतिबंधित करते
 - URL मॅनिप्युलेशन हल्ल्यांपासून संरक्षण करते
-- तुमच्या सर्व्हरला इच्छित डेटा प्राप्त होतो याची खात्री करते
+- तुमच्या सर्व्हरला अपेक्षित डेटा प्राप्त होतो याची खात्री करते
 - सुरक्षित कोडिंग पद्धतींचे अनुसरण करते
 
 #### HTTP GET विनंत्या समजून घेणे
 
-तुम्हाला आश्चर्य वाटेल: जेव्हा तुम्ही `fetch` अतिरिक्त पर्यायांशिवाय वापरता, तेव्हा ते आपोआप [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) विनंती तयार करते. हे आपल्यासाठी योग्य आहे - सर्व्हरला विचारणे "अरे, मी या वापरकर्त्याचा खाते डेटा पाहू शकतो का?"
+तुम्हाला आश्चर्य वाटेल: जेव्हा तुम्ही `fetch` अतिरिक्त पर्यायांशिवाय वापरता, तेव्हा ते आपोआप [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) विनंती तयार करते. हे आपल्यासाठी योग्य आहे - सर्व्हरला विचारणे "अरे, मी या वापरकर्त्याचा अकाउंट डेटा पाहू शकतो का?"
 
-GET विनंत्या पुस्तकालयातून पुस्तक उधार घेण्यासारख्या आहेत - तुम्ही आधीच अस्तित्वात असलेल्या गोष्टी पाहण्याची विनंती करत आहात. POST विनंत्या (ज्या आपण नोंदणीसाठी वापरल्या) संग्रहात जोडण्यासाठी नवीन पुस्तक सबमिट करण्यासारख्या आहेत.
+GET विनंत्या पुस्तकालयातून पुस्तक उधार घेण्यासारख्या आहेत - तुम्ही आधीच अस्तित्वात असलेल्या गोष्टी पाहण्याची विनंती करत आहात. POST विनंत्या (ज्या आम्ही नोंदणीसाठी वापरल्या) संग्रहात जोडण्यासाठी नवीन पुस्तक सबमिट करण्यासारख्या आहेत.
 
 | GET विनंती | POST विनंती |
 |-------------|-------------|
-| **उद्देश** | विद्यमान डेटा मिळवा | सर्व्हरला नवीन डेटा पाठवा |
+| **उद्देश** | विद्यमान डेटा पुनर्प्राप्त करा | सर्व्हरला नवीन डेटा पाठवा |
 | **पॅरामीटर्स** | URL पथ/क्वेरी स्ट्रिंगमध्ये | विनंती बॉडीमध्ये |
 | **कॅशिंग** | ब्राउझरद्वारे कॅश केले जाऊ शकते | सामान्यतः कॅश केले जात नाही |
 | **सुरक्षा** | URL/लॉगमध्ये दृश्यमान | विनंती बॉडीमध्ये लपलेले |
 
+```mermaid
+sequenceDiagram
+    participant B as Browser
+    participant S as Server
+    
+    Note over B,S: GET Request (Data Retrieval)
+    B->>S: GET /api/accounts/test
+    S-->>B: 200 OK + Account Data
+    
+    Note over B,S: POST Request (Data Submission)
+    B->>S: POST /api/accounts + New Account Data
+    S-->>B: 201 Created + Confirmation
+    
+    Note over B,S: Error Handling
+    B->>S: GET /api/accounts/nonexistent
+    S-->>B: 404 Not Found + Error Message
+```
+
 #### चरण 3: सर्व काही एकत्र आणणे
 
-आता समाधानकारक भाग - चला तुमच्या खाते मिळवण्याच्या फंक्शनला लॉगिन प्रक्रियेशी जोडूया. येथे सर्व काही एकत्र येते:
+आता समाधानकारक भाग - चला तुमच्या अकाउंट फेचिंग फंक्शनला लॉगिन प्रक्रियेशी जोडूया. येथे सर्व काही जागेवर क्लिक करते:
 
 ```javascript
 async function login() {
@@ -204,15 +320,15 @@ async function login() {
 
 हे फंक्शन स्पष्ट क्रम अनुसरण करते:
 - फॉर्म इनपुटमधून युजरनेम काढा
-- सर्व्हरकडून वापरकर्त्याचा खाते डेटा विनंती करा
+- सर्व्हरकडून वापरकर्त्याचा अकाउंट डेटा विनंती करा
 - प्रक्रियेदरम्यान उद्भवलेल्या कोणत्याही त्रुटी हाताळा
-- खाते डेटा संग्रहित करा आणि यशस्वी लॉगिननंतर डॅशबोर्डवर जा
+- अकाउंट डेटा स्टोअर करा आणि यशस्वी झाल्यावर डॅशबोर्डवर जा
 
-> 🎯 **Async/Await पॅटर्न**: कारण `getAccount` हे असिंक्रोनस फंक्शन आहे, आम्ही `await` कीवर्ड वापरतो जेणेकरून सर्व्हर प्रतिसाद देईपर्यंत अंमलबजावणी थांबते. हे कोड अनिर्दिष्ट डेटासह पुढे जाण्यापासून प्रतिबंधित करते.
+> 🎯 **Async/Await पॅटर्न**: कारण `getAccount` एक असिंक्रोनस फंक्शन आहे, आम्ही `await` कीवर्ड वापरतो जो सर्व्हर प्रतिसाद देईपर्यंत अंमलबजावणी थांबवतो. हे कोड undefined डेटासह पुढे जाण्यापासून प्रतिबंधित करते.
 
 #### चरण 4: तुमच्या डेटासाठी घर तयार करणे
 
-तुमच्या अ‍ॅपला एक जागा हवी जिथे लोड झाल्यानंतर खाते माहिती लक्षात ठेवता येईल. याला तुमच्या अ‍ॅपची अल्पकालीन स्मृती समजा - सध्याच्या वापरकर्त्याचा डेटा सोयीस्कर ठेवण्यासाठी एक जागा. तुमच्या `app.js` फाइलच्या शीर्षस्थानी ही ओळ जोडा:
+तुमच्या अ‍ॅपला एक ठिकाण हवे जे एकदा लोड झाल्यानंतर अकाउंट माहिती लक्षात ठेवेल. याला तुमच्या अ‍ॅपची अल्पकालीन स्मृती समजा - सध्याच्या वापरकर्त्याचा डेटा सोयीस्कर ठेवण्यासाठी एक जागा. तुमच्या `app.js` फाइलच्या शीर्षस्थानी ही ओळ जोडा:
 
 ```javascript
 // This holds the current user's account data
@@ -220,14 +336,14 @@ let account = null;
 ```
 
 **आपल्याला याची आवश्यकता का आहे:**
-- तुमच्या अ‍ॅपमधील कोणत्याही ठिकाणाहून खाते डेटा प्रवेशयोग्य ठेवते
+- अकाउंट डेटा तुमच्या अ‍ॅपमधील कुठूनही ऍक्सेस करण्यायोग्य ठेवते
 - `null` सह प्रारंभ करणे म्हणजे "कोणीही अद्याप लॉग इन केलेले नाही"
 - कोणी यशस्वीरित्या लॉग इन किंवा नोंदणी केल्यावर अपडेट होते
-- सत्याचा एकच स्रोत म्हणून कार्य करते - कोण लॉग इन आहे याबद्दल गोंधळ नाही
+- एकल सत्याचा स्रोत म्हणून कार्य करते - कोण लॉग इन आहे याबद्दल गोंधळ नाही
 
 #### चरण 5: तुमचा फॉर्म वायर करा
 
-आता तुमच्या नवीन चमकदार लॉगिन फंक्शनला तुमच्या HTML फॉर्मशी कनेक्ट करूया. तुमचा फॉर्म टॅग असे अपडेट करा:
+आता तुमच्या चमकदार नवीन लॉगिन फंक्शनला तुमच्या HTML फॉर्मशी कनेक्ट करूया. तुमच्या फॉर्म टॅगला असे अपडेट करा:
 
 ```html
 <form id="loginForm" action="javascript:login()">
@@ -235,15 +351,15 @@ let account = null;
 </form>
 ```
 
-**या छोट्या बदलाने काय होते:**
+**हा छोटासा बदल काय करतो:**
 - फॉर्मला त्याचे डीफॉल्ट "संपूर्ण पृष्ठ पुन्हा लोड करा" वर्तन थांबवते
-- त्याऐवजी तुमचे कस्टम JavaScript फंक्शन कॉल करते
+- त्याऐवजी तुमचे कस्टम जावास्क्रिप्ट फंक्शन कॉल करते
 - सर्व काही गुळगुळीत आणि सिंगल-पेज-अ‍ॅपसारखे ठेवते
 - वापरकर्त्यांनी "लॉगिन" दाबल्यावर काय होते यावर तुम्हाला पूर्ण नियंत्रण देते
 
-#### चरण 6: तुमच्या नोंदणी फंक्शनला सुधारित करा
+#### चरण 6: तुमच्या रजिस्ट्रेशन फंक्शनला सुधारित करा
 
-सुसंगततेसाठी, तुमचे `register` फंक्शन देखील खाते डेटा संग्रहित करण्यासाठी आणि डॅशबोर्डवर नेव्हिगेट करण्यासाठी अपडेट करा:
+सुसंगततेसाठी, तुमच्या `register` फंक्शनला अकाउंट डेटा स्टोअर करण्यासाठी आणि डॅशबोर्डवर नेव्हिगेट करण्यासाठी देखील अपडेट करा:
 
 ```javascript
 // Add these lines at the end of your register function
@@ -251,42 +367,37 @@ account = result;
 navigate('/dashboard');
 ```
 
-**या सुधारिततेने प्रदान केले:**
-- नोंदणीपासून डॅशबोर्डपर्यंत **सहज** संक्रमण
-- लॉगिन आणि नोंदणी प्रवाहांमध्ये **सुसंगत** वापरकर्ता अनुभव
-- यशस्वी नोंदणीनंतर खाते डेटावर **तत्काळ** प्रवेश
+**ही सुधारणा
+DOM मॅनिप्युलेशन ही एक तंत्र आहे जी स्थिर वेब पृष्ठांना गतिशील अनुप्रयोगांमध्ये रूपांतरित करते, जे वापरकर्त्याच्या संवादांवर आणि सर्व्हर प्रतिसादांवर आधारित सामग्री अद्यतनित करतात.
 
-#### तुमच्या अंमलबजावणीची चाचणी
+### योग्य साधन निवडणे
 
-```mermaid
-flowchart TD
-    A[User enters credentials] --> B[Login function called]
-    B --> C[Fetch account data from server]
-    C --> D{Data received successfully?}
-    D -->|Yes| E[Store account data globally]
-    D -->|No| F[Display error message]
-    E --> G[Navigate to dashboard]
-    F --> H[User stays on login page]
-```
+तुमच्या HTML ला JavaScript सह अद्यतनित करण्याचा विचार करत असाल, तर तुमच्याकडे अनेक पर्याय आहेत. यांना टूलबॉक्समधील वेगवेगळ्या साधनांसारखे समजा - प्रत्येक विशिष्ट कामासाठी योग्य:
 
-**चाचणी घेण्याची वेळ:**
-1. सर्व काही कार्यरत आहे याची खात्री करण्यासाठी नवीन खाते तयार करा
-2. त्याच क्रेडेन्शियल्ससह लॉगिन करण्याचा प्रयत्न करा
-3. काहीतरी चुकीचे वाटल्यास तुमच्या ब्राउझरचा कन्सोल (F12) पहा
-4. यशस्वी लॉगिननंतर तुम्ही डॅशबोर्डवर पोहोचला याची खात्री करा
+| पद्धत | कशासाठी चांगली आहे | कधी वापरायची | सुरक्षिततेचा स्तर |
+|-------|---------------------|--------------|--------------------|
+| `textContent` | वापरकर्त्याचा डेटा सुरक्षितपणे दाखवणे | कधीही तुम्ही मजकूर दाखवत असाल | ✅ अतिशय सुरक्षित |
+| `createElement()` + `append()` | जटिल लेआउट तयार करणे | नवीन विभाग/यादी तयार करणे | ✅ अतिशय सुरक्षित |
+| `innerHTML` | HTML सामग्री सेट करणे | ⚠️ शक्यतो टाळा | ❌ धोकादायक |
 
-काहीतरी कार्य करत नसेल तर घाबरू नका! बहुतेक समस्या सोप्या दुरुस्त्या आहेत जसे की टायपो किंवा API सर्व्हर सुरू करण्यास विसरणे.
+#### मजकूर सुरक्षितपणे दाखवण्याचा सुरक्षित मार्ग: textContent
 
-#### क्रॉस-ऑरिजिन मॅजिकबद्दल एक जलद शब्द
+[`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) प्रॉपर्टी वापरकर्त्याचा डेटा दाखवण्यासाठी तुमचा सर्वोत्तम मित्र आहे. हे तुमच्या वेबपृष्ठासाठी बाउन्सर असल्यासारखे आहे - काहीही हानिकारक आत येत नाही:
 
-तुम्हाला आश्चर्य वाटेल: "माझे वेब अ‍ॅप वेगवेगळ्या पोर्टवर चालत असलेल्या या API सर्व्हरशी कसे बोलत आहे?" उत्तम प्रश्न! हे प्रत्येक वेब डेव्हलपरला शेवटी सामोरे जावे लागते.
+```javascript
+// The safe, reliable way to update text
+const balanceElement = document.getElementById('balance');
+balanceElement.textContent = account.balance;
+```
+
+**textContent चे फायदे:**
+- सर्वकाही सामान्य मजकूर म्हणून हाताळते (स्क्रिप्ट कार्यान्वयन टाळते)
+- विद्यमान सामग्री आपोआप साफ करते
+- सोप्या मजकूर अद्यतनांसाठी कार्यक्षम
+- हानिकारक सामग्रीपासून अंगभूत सुरक्षा प्रदान करते
+
+#### गतिशील HTML घटक तयार करणे
 
-> 🔒 **क्रॉस-ऑरिजिन सुरक्षा**: ब्राउझर "समान-ऑरिजिन पॉलिसी" लागू करतात जे वेगवेगळ्या डोमेनमधील अनधिकृत संवाद रोखण्यासाठी. पेंटागॉनमधील चेकपॉइंट सिस्टमसारखे, ते डेटा ट्रान्सफर करण्यापूर्वी संवाद अधिकृत असल्याची पडताळणी करतात.
-> 
-**आमच्या सेटअपमध्ये:**
-- तुमचे वेब अ‍ॅप `localhost:3000` वर चालते (डेव्हलपमेंट सर्व्हर)
-- तुमचा API सर्व्हर `localhost:5000` वर चालतो (बॅकएंड सर्व्हर)
-- API सर्व्हर [CORS हेडर्स](https://developer.mozilla.org/docs/Web/HTTP/CORS) समाविष्ट करतो जे तुमच्या वेब अ‍ॅपकडून संवाद
 अधिक जटिल सामग्रीसाठी, [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) आणि [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) पद्धती एकत्र करा:
 
 ```javascript
@@ -297,29 +408,29 @@ transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
 container.append(transactionItem);
 ```
 
-**या दृष्टिकोनाची समज:**
-- **नवीन DOM घटक** प्रोग्रामॅटिक पद्धतीने तयार करतो
-- **घटकांचे गुणधर्म आणि सामग्रीवर** पूर्ण नियंत्रण ठेवतो
-- **जटिल, नेस्टेड घटक संरचना** तयार करण्यास अनुमती देतो
-- **सुरक्षितता राखतो** कारण संरचना आणि सामग्री वेगळी ठेवली जाते
+**या दृष्टिकोनाचे समजून घेणे:**
+- **नवीन DOM घटक** प्रोग्रामॅटिकली तयार करते
+- घटकांचे गुणधर्म आणि सामग्रीवर **पूर्ण नियंत्रण ठेवते**
+- **जटिल, नेस्टेड घटक संरचना** तयार करण्यास अनुमती देते
+- **सुरक्षा जपते** संरचना आणि सामग्री वेगळे करून
 
-> ⚠️ **सुरक्षिततेचा विचार**: जरी [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) अनेक ट्युटोरियल्समध्ये दिसते, तरी ते एम्बेड केलेल्या स्क्रिप्ट्स चालवू शकते. CERN मधील सुरक्षा प्रोटोकॉल्सप्रमाणे जे अनधिकृत कोड कार्यान्वित होण्यापासून प्रतिबंधित करतात, `textContent` आणि `createElement` वापरणे सुरक्षित पर्याय प्रदान करते.
+> ⚠️ **सुरक्षा विचार**: जरी [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) अनेक ट्यूटोरियलमध्ये दिसते, तरीही ते एम्बेड केलेल्या स्क्रिप्ट्स कार्यान्वित करू शकते. CERN मधील सुरक्षा प्रोटोकॉलप्रमाणे जे अनधिकृत कोड कार्यान्वयन टाळतात, `textContent` आणि `createElement` वापरणे सुरक्षित पर्याय प्रदान करते.
 > 
-**innerHTML चा धोका:**
-- वापरकर्ता डेटामधील कोणत्याही `<script>` टॅग्स कार्यान्वित करते
+**innerHTML चे धोके:**
+- वापरकर्त्याच्या डेटामधील कोणत्याही `<script>` टॅग्स कार्यान्वित करते
 - कोड इंजेक्शन हल्ल्यांसाठी असुरक्षित
 - संभाव्य सुरक्षा त्रुटी निर्माण करते
 - आम्ही वापरत असलेले सुरक्षित पर्याय समतुल्य कार्यक्षमता प्रदान करतात
 
-### त्रुटी वापरकर्त्यास अनुकूल बनवणे
+### त्रुटी वापरकर्त्यासाठी सोप्या बनवणे
 
-सध्या, लॉगिन त्रुटी फक्त ब्राउझर कन्सोलमध्ये दिसतात, जे वापरकर्त्यांसाठी अदृश्य आहे. जसे पायलटच्या अंतर्गत डायग्नोस्टिक्स आणि प्रवाशांच्या माहिती प्रणालीमधील फरक, तसेच आम्हाला योग्य चॅनेलद्वारे महत्त्वाची माहिती संवाद साधणे आवश्यक आहे.
+सध्या, लॉगिन त्रुटी फक्त ब्राउझर कन्सोलमध्ये दिसतात, जे वापरकर्त्यांसाठी अदृश्य आहे. पायलटच्या अंतर्गत निदान आणि प्रवासी माहिती प्रणालीमधील फरकासारखे, आम्हाला योग्य चॅनेलद्वारे महत्त्वाची माहिती संवाद साधण्याची आवश्यकता आहे.
 
-दृश्यमान त्रुटी संदेश लागू करणे वापरकर्त्यांना काय चुकले आणि पुढे कसे जायचे याबद्दल त्वरित अभिप्राय प्रदान करते.
+दृश्यमान त्रुटी संदेश लागू केल्याने वापरकर्त्यांना काय चुकले आणि पुढे कसे जायचे याबद्दल त्वरित अभिप्राय मिळतो.
 
-#### चरण 1: त्रुटी संदेशांसाठी जागा तयार करा
+#### चरण 1: त्रुटी संदेशांसाठी जागा जोडा
 
-सर्वप्रथम, आपल्या HTML मध्ये त्रुटी संदेशांसाठी जागा तयार करा. हे आपल्या लॉगिन बटणाच्या अगोदर जोडा जेणेकरून वापरकर्त्यांना ते सहज दिसेल:
+प्रथम, तुमच्या HTML मध्ये त्रुटी संदेशांसाठी जागा तयार करा. हे तुमच्या लॉगिन बटणाच्या अगोदर जोडा जेणेकरून वापरकर्त्यांना ते सहज दिसेल:
 
 ```html
 <!-- This is where error messages will appear -->
@@ -327,15 +438,15 @@ container.append(transactionItem);
 <button>Login</button>
 ```
 
-**येथे काय घडत आहे:**
-- आम्ही एक रिक्त कंटेनर तयार करत आहोत जो आवश्यकतेपर्यंत अदृश्य राहतो
-- हे "लॉगिन" क्लिक केल्यानंतर वापरकर्त्यांनी नैसर्गिकरित्या पाहिलेल्या ठिकाणी ठेवले आहे
-- स्क्रीन रीडर्ससाठी `role="alert"` एक चांगला पर्याय आहे - हे सहाय्यक तंत्रज्ञानाला सांगते "हे महत्त्वाचे आहे!"
-- अनन्य `id` आमच्या JavaScript ला सोपे लक्ष्य प्रदान करते
+**इथे काय घडत आहे:**
+- आम्ही एक रिक्त कंटेनर तयार करत आहोत जो आवश्यक होईपर्यंत अदृश्य राहतो
+- हे "लॉगिन" क्लिक केल्यानंतर वापरकर्ते नैसर्गिकरित्या जिथे पाहतात तिथे ठेवले आहे
+- स्क्रीन रीडर्ससाठी `role="alert"` एक चांगली गोष्ट आहे - ते सहाय्यक तंत्रज्ञानाला सांगते "हे महत्त्वाचे आहे!"
+- अनोखा `id` आमच्या JavaScript ला सोपे लक्ष्य प्रदान करतो
 
 #### चरण 2: एक उपयुक्त सहाय्यक फंक्शन तयार करा
 
-चला एक छोटी युटिलिटी फंक्शन तयार करू जी कोणत्याही घटकाचा मजकूर अपडेट करू शकते. हे "एकदा लिहा, सर्वत्र वापरा" प्रकारचे फंक्शन आहे जे आपला वेळ वाचवेल:
+आम्ही एक छोटी युटिलिटी फंक्शन तयार करूया जी कोणत्याही घटकाचा मजकूर अद्यतनित करू शकते. हे "एकदा लिहा, सर्वत्र वापरा" प्रकारचे फंक्शन आहे जे तुमचा वेळ वाचवेल:
 
 ```javascript
 function updateElement(id, text) {
@@ -346,13 +457,13 @@ function updateElement(id, text) {
 
 **फंक्शनचे फायदे:**
 - फक्त घटक ID आणि मजकूर सामग्री आवश्यक असलेला सोपा इंटरफेस
-- DOM घटक सुरक्षितपणे शोधतो आणि अपडेट करतो
-- कोड डुप्लिकेशन कमी करणारा पुनर्वापरयोग्य नमुना
-- अनुप्रयोगामध्ये सुसंगत अद्यतन वर्तन राखतो
+- DOM घटक सुरक्षितपणे शोधतो आणि अद्यतनित करतो
+- कोड डुप्लिकेशन कमी करणारा पुनरावृत्ती होणारा नमुना
+- अनुप्रयोगामध्ये सुसंगत अद्यतन वर्तन राखते
 
 #### चरण 3: त्रुटी वापरकर्त्यांना दिसेल अशा ठिकाणी दाखवा
 
-आता त्या लपलेल्या कन्सोल संदेशाला काहीतरी वापरकर्त्यांना प्रत्यक्षात दिसेल अशा गोष्टीने बदला. आपले लॉगिन फंक्शन अपडेट करा:
+आता त्या लपलेल्या कन्सोल संदेशाची जागा अशा गोष्टीने बदला जी वापरकर्त्यांना प्रत्यक्षात दिसेल. तुमच्या लॉगिन फंक्शनला अद्यतनित करा:
 
 ```javascript
 // Instead of just logging to console, show the user what's wrong
@@ -361,42 +472,55 @@ if (data.error) {
 }
 ```
 
-**हा छोटासा बदल मोठा फरक करतो:**
-- त्रुटी संदेश वापरकर्त्यांनी पाहिलेल्या ठिकाणी दिसतात
-- गूढ शांत अपयश नाही
+**या छोट्या बदलामुळे मोठा फरक पडतो:**
+- त्रुटी संदेश वापरकर्त्यांना दिसेल अशा ठिकाणी दिसतात
+- गुप्त शांत अपयश नाही
 - वापरकर्त्यांना त्वरित, कृतीयोग्य अभिप्राय मिळतो
-- आपला अॅप व्यावसायिक आणि विचारशील वाटू लागतो
+- तुमचे अॅप व्यावसायिक आणि विचारशील वाटू लागते
 
-आता जेव्हा आपण अवैध खाते वापरून चाचणी करता, तेव्हा आपल्याला पृष्ठावरच एक उपयुक्त त्रुटी संदेश दिसेल!
+आता जेव्हा तुम्ही अवैध खात्याने चाचणी कराल, तेव्हा तुम्हाला पृष्ठावरच एक उपयुक्त त्रुटी संदेश दिसेल!
 
-![लॉगिन दरम्यान त्रुटी संदेश प्रदर्शित करणारा स्क्रीनशॉट](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.mr.png)
+![लॉगिन दरम्यान त्रुटी संदेश दर्शवणारा स्क्रीनशॉट](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.mr.png)
 
-#### चरण 4: समावेशकता आणि अॅक्सेसिबिलिटी
+#### चरण 4: अॅक्सेसिबिलिटीसह समावेशक असणे
 
-आम्ही पूर्वी जोडलेल्या `role="alert"` बद्दल एक छान गोष्ट आहे - ते फक्त सजावट नाही! हे छोटे गुणधर्म [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) तयार करते जे स्क्रीन रीडर्सना त्वरित बदलांची घोषणा करते:
+आम्ही आधी जोडलेल्या `role="alert"` बद्दल एक छान गोष्ट आहे - ते फक्त सजावट नाही! हे छोटे गुणधर्म [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) तयार करते जे स्क्रीन रीडर्सना त्वरित बदलांची घोषणा करते:
 
 ```html
 <div id="loginError" role="alert"></div>
 ```
 
 **हे का महत्त्वाचे आहे:**
-- स्क्रीन रीडर वापरकर्त्यांना त्रुटी संदेश दिसताच ऐकायला मिळतो
+- स्क्रीन रीडर वापरकर्ते त्रुटी संदेश दिसताच ऐकतात
 - प्रत्येकाला महत्त्वाची माहिती मिळते, ते कसे नेव्हिगेट करतात याची पर्वा न करता
-- आपला अॅप अधिक लोकांसाठी कार्य करण्यासाठी एक साधा मार्ग
-- समावेशक अनुभव तयार करण्याची काळजी दाखवते
+- तुमचे अॅप अधिक लोकांसाठी कार्य करण्यासाठी सोपे बनवते
+- समावेशक अनुभव तयार करण्याची तुमची काळजी दर्शवते
+
+अशा छोट्या गोष्टी चांगल्या विकसकांना महान बनवतात!
+
+### 🎯 शैक्षणिक तपासणी: प्रमाणीकरण नमुने
+
+**थांबा आणि विचार करा**: तुम्ही पूर्ण प्रमाणीकरण प्रवाह अंमलात आणला आहे. वेब विकासातील हा एक मूलभूत नमुना आहे.
+
+**जलद स्व-मूल्यांकन**:
+- API कॉलसाठी async/await का वापरतो हे तुम्ही स्पष्ट करू शकता का?
+- आपण `encodeURIComponent()` फंक्शन विसरलो तर काय होईल?
+- आमचे त्रुटी हाताळणे वापरकर्ता अनुभव कसे सुधारते?
+
+**वास्तविक-जगाशी कनेक्शन**: तुम्ही येथे शिकलेले नमुने (असिंक्रोनस डेटा फेचिंग, त्रुटी हाताळणे, वापरकर्ता अभिप्राय) प्रत्येक प्रमुख वेब अनुप्रयोगामध्ये वापरले जातात, सोशल मीडिया प्लॅटफॉर्मपासून ई-कॉमर्स साइट्सपर्यंत. तुम्ही उत्पादन-स्तरीय कौशल्ये तयार करत आहात!
 
-अशा छोट्या गोष्टी चांगल्या डेव्हलपर्सना महान बनवतात!
+**चॅलेंज प्रश्न**: तुम्ही ग्राहक, प्रशासक, टेलर यासारख्या एकाधिक वापरकर्ता भूमिका हाताळण्यासाठी या प्रमाणीकरण प्रणालीमध्ये कसे बदल करू शकता? आवश्यक डेटा संरचना आणि UI बदलांबद्दल विचार करा.
 
 #### चरण 5: नोंदणीसाठी समान नमुना लागू करा
 
-सुसंगततेसाठी, आपल्या नोंदणी फॉर्ममध्ये समान त्रुटी हाताळणी लागू करा:
+सुसंगततेसाठी, तुमच्या नोंदणी फॉर्ममध्ये समान त्रुटी हाताळणी अंमलात आणा:
 
-1. **नोंदणी HTML मध्ये** त्रुटी प्रदर्शन घटक जोडा:
+1. **जोडा** नोंदणी HTML मध्ये त्रुटी प्रदर्शन घटक:
 ```html
 <div id="registerError" role="alert"></div>
 ```
 
-2. **आपले नोंदणी फंक्शन** समान त्रुटी प्रदर्शन नमुना वापरण्यासाठी अपडेट करा:
+2. **अद्यतनित करा** तुमचे नोंदणी फंक्शन समान त्रुटी प्रदर्शन नमुना वापरण्यासाठी:
 ```javascript
 if (data.error) {
   return updateElement('registerError', data.error);
@@ -406,18 +530,18 @@ if (data.error) {
 **सुसंगत त्रुटी हाताळणीचे फायदे:**
 - **सर्व फॉर्ममध्ये** एकसमान वापरकर्ता अनुभव प्रदान करते
 - **परिचित नमुने वापरून** संज्ञानात्मक भार कमी करते
-- **पुनर्वापरयोग्य कोडसह** देखभाल सुलभ करते
-- **अॅक्सेसिबिलिटी मानकांचे** अनुप्रयोगभर पालन सुनिश्चित करते
+- **पुनरावृत्ती होणाऱ्या कोडसह देखभाल सुलभ करते**
+- **संपूर्ण अॅपमध्ये** अॅक्सेसिबिलिटी मानकांचे पालन सुनिश्चित करते
 
-## आपला डायनॅमिक डॅशबोर्ड तयार करणे
+## तुमचा गतिशील डॅशबोर्ड तयार करणे
 
-आता आपण आपला स्थिर डॅशबोर्ड वास्तविक खाते डेटा प्रदर्शित करणाऱ्या डायनॅमिक इंटरफेसमध्ये रूपांतरित करू. जसे मुद्रित फ्लाइट वेळापत्रक आणि विमानतळांवरील थेट प्रस्थान बोर्डांमधील फरक, तसेच आपण स्थिर माहितीपासून वास्तविक-वेळ, प्रतिसादात्मक प्रदर्शनाकडे जात आहोत.
+आता आम्ही तुमचा स्थिर डॅशबोर्ड बदलून गतिशील इंटरफेसमध्ये रूपांतरित करू जो वास्तविक खाते डेटा प्रदर्शित करतो. मुद्रित फ्लाइट वेळापत्रक आणि विमानतळावरील थेट प्रस्थान बोर्ड यामधील फरकासारखे, आम्ही स्थिर माहितीपासून वास्तविक-वेळ, प्रतिसादात्मक प्रदर्शनाकडे जात आहोत.
 
-आपण शिकलेल्या DOM मॅनिप्युलेशन तंत्रांचा वापर करून, आम्ही एक डॅशबोर्ड तयार करू जो स्वयंचलितपणे चालू खाते माहितीने अपडेट होतो.
+तुम्ही शिकलेल्या DOM मॅनिप्युलेशन तंत्रांचा वापर करून, आम्ही एक डॅशबोर्ड तयार करू जो सध्याच्या खाते माहितीसह आपोआप अद्यतनित होतो.
 
-### आपला डेटा समजून घेणे
+### तुमच्या डेटाशी परिचित होणे
 
-आम्ही तयार करण्यास सुरुवात करण्यापूर्वी, आपला सर्व्हर कोणत्या प्रकारचा डेटा परत पाठवतो ते पाहू. जेव्हा कोणी यशस्वीरित्या लॉगिन करते, तेव्हा आपल्याला काम करण्यासाठी माहितीचा खजिना मिळतो:
+आम्ही तयार करायला सुरुवात करण्यापूर्वी, तुमचा सर्व्हर परत पाठवतो त्या प्रकारच्या डेटावर एक नजर टाकूया. जेव्हा कोणी यशस्वीरित्या लॉग इन करतो, तेव्हा तुम्हाला काम करण्यासाठी माहितीचा खजिना मिळतो:
 
 ```json
 {
@@ -435,28 +559,44 @@ if (data.error) {
 
 **या डेटा संरचनेत समाविष्ट आहे:**
 - **`user`**: अनुभव वैयक्तिकृत करण्यासाठी योग्य ("पुन्हा स्वागत आहे, सारा!")
-- **`currency`**: पैसे योग्य प्रकारे प्रदर्शित करण्यासाठी सुनिश्चित करते
-- **`description`**: खात्यासाठी एक मैत्रीपूर्ण नाव
-- **`balance`**: सर्वात महत्त्वाचा चालू शिल्लक
+- **`currency`**: पैसे योग्य प्रकारे प्रदर्शित करण्यासाठी मदत करते
+- **`description`**: खात्याचे एक मैत्रीपूर्ण नाव
+- **`balance`**: सर्वात महत्त्वाचा वर्तमान शिल्लक
 - **`transactions`**: सर्व तपशीलांसह संपूर्ण व्यवहार इतिहास
 
-आपल्या व्यावसायिक-दिसणाऱ्या बँकिंग डॅशबोर्ड तयार करण्यासाठी आवश्यक सर्वकाही!
+व्यावसायिक दिसणारा बँकिंग डॅशबोर्ड तयार करण्यासाठी तुम्हाला आवश्यक सर्वकाही!
 
-> 💡 **प्रो टिप**: आपला डॅशबोर्ड त्वरित क्रियाशील पाहायचा आहे? लॉगिन करताना `test` वापरकर्तानाव वापरा - ते नमुना डेटासह प्री-लोड केलेले आहे जेणेकरून आपल्याला प्रथम व्यवहार तयार न करता सर्वकाही कार्यरत दिसेल.
+```mermaid
+flowchart TD
+    A[User Login] --> B[Fetch Account Data]
+    B --> C{Data Valid?}
+    C -->|Yes| D[Store in Global Variable]
+    C -->|No| E[Show Error Message]
+    D --> F[Navigate to Dashboard]
+    F --> G[Update UI Elements]
+    G --> H[Display Balance]
+    G --> I[Show Description]
+    G --> J[Render Transactions]
+    J --> K[Create Table Rows]
+    K --> L[Format Currency]
+    L --> M[User Sees Live Data]
+```
+
+> 💡 **प्रो टिप**: तुमचा डॅशबोर्ड त्वरित क्रियाशील पाहायचा आहे का? लॉग इन करताना `test` वापरकर्तानाव वापरा - यामध्ये नमुना डेटा आधीच लोड केलेला आहे जेणेकरून तुम्ही सर्वकाही कार्य करताना पाहू शकता.
 > 
 **टेस्ट अकाउंट का उपयुक्त आहे:**
-- यामध्ये आधीच वास्तववादी नमुना डेटा लोड केलेला आहे
+- आधीच लोड केलेल्या वास्तववादी नमुना डेटासह येते
 - व्यवहार कसे प्रदर्शित होतात ते पाहण्यासाठी योग्य
-- आपले डॅशबोर्ड वैशिष्ट्ये चाचणीसाठी उत्कृष्ट
-- आपल्याला मॅन्युअली डमी डेटा तयार करण्यापासून वाचवते
+- तुमच्या डॅशबोर्ड वैशिष्ट्यांची चाचणी घेण्यासाठी उत्तम
+- तुम्हाला डमी डेटा मॅन्युअली तयार करण्यापासून वाचवते
 
 ### डॅशबोर्ड प्रदर्शन घटक तयार करणे
 
-चला आपल्या डॅशबोर्ड इंटरफेसची पायरी-पायरीने रचना करू, खाते सारांश माहितीपासून सुरुवात करून आणि नंतर व्यवहार यादीसारख्या अधिक जटिल वैशिष्ट्यांकडे जाऊ.
+आम्ही तुमचा डॅशबोर्ड इंटरफेस चरण-दर-चरण तयार करू, खाते सारांश माहितीपासून सुरुवात करून आणि नंतर व्यवहार यादीसारख्या अधिक जटिल वैशिष्ट्यांकडे जाऊ.
 
-#### चरण 1: आपली HTML रचना अपडेट करा
+#### चरण 1: तुमची HTML रचना अद्यतनित करा
 
-सर्वप्रथम, स्थिर "शिल्लक" विभाग डायनॅमिक प्लेसहोल्डर घटकांसह बदला जे आपले JavaScript भरू शकते:
+प्रथम, स्थिर "शिल्लक" विभाग गतिशील प्लेसहोल्डर घटकांसह बदला जे तुमचा JavaScript भरू शकेल:
 
 ```html
 <section>
@@ -464,23 +604,23 @@ if (data.error) {
 </section>
 ```
 
-यानंतर, खाते वर्णनासाठी एक विभाग जोडा. कारण हे डॅशबोर्ड सामग्रीसाठी शीर्षक म्हणून कार्य करते, सेमॅंटिक HTML वापरा:
+यानंतर, खात्याच्या वर्णनासाठी एक विभाग जोडा. कारण हे डॅशबोर्ड सामग्रीसाठी शीर्षक म्हणून कार्य करते, सेमॅंटिक HTML वापरा:
 
 ```html
 <h2 id="description"></h2>
 ```
 
 **HTML रचना समजून घेणे:**
-- **शिल्लक आणि चलनासाठी** स्वतंत्र `<span>` घटक वापरते वैयक्तिक नियंत्रणासाठी
-- **प्रत्येक घटकासाठी** अनन्य IDs लागू करते JavaScript लक्ष्यीकरणासाठी
-- **सेमॅंटिक HTML अनुसरण करते** `<h2>` खाते वर्णनासाठी वापरून
-- **स्क्रीन रीडर्स आणि SEO साठी** एक तार्किक श्रेणी तयार करते
+- **वेगळ्या `<span>` घटकांचा वापर** शिल्लक आणि चलनासाठी स्वतंत्र नियंत्रणासाठी
+- प्रत्येक घटकासाठी **अनोख्या IDs लागू करते** JavaScript लक्ष्यित करण्यासाठी
+- सेमॅंटिक HTML चे अनुसरण करते, डॅशबोर्ड सामग्रीसाठी `<h2>` वापरून
+- स्क्रीन रीडर्स आणि SEO साठी तर्कसंगत श्रेणी तयार करते
 
-> ✅ **अॅक्सेसिबिलिटी अंतर्दृष्टी**: खाते वर्णन डॅशबोर्ड सामग्रीसाठी शीर्षक म्हणून कार्य करते, म्हणून ते सेमॅंटिकपणे शीर्षक म्हणून चिन्हांकित केले आहे. [शीर्षक रचना](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) अॅक्सेसिबिलिटीवर कसा परिणाम करते याबद्दल अधिक जाणून घ्या. आपल्या पृष्ठावरील इतर कोणते घटक शीर्षक टॅग्सचा लाभ घेऊ शकतात ते ओळखू शकता का?
+> ✅ **अॅक्सेसिबिलिटी अंतर्दृष्टी**: खाते वर्णन डॅशबोर्ड सामग्रीसाठी शीर्षक म्हणून कार्य करते, म्हणून ते शीर्षक म्हणून सेमॅंटिकली चिन्हांकित केले आहे. [शीर्षक संरचना](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) अॅक्सेसिबिलिटीवर कसा परिणाम करते याबद्दल अधिक जाणून घ्या. तुमच्या पृष्ठावरील इतर घटक ओळखू शकता का जे शीर्षक टॅग्सचा लाभ घेऊ शकतात?
 
-#### चरण 2: डॅशबोर्ड अपडेट फंक्शन तयार करा
+#### चरण 2: डॅशबोर्ड अद्यतन फंक्शन तयार करा
 
-आता एक फंक्शन तयार करा जे वास्तविक खाते डेटासह आपला डॅशबोर्ड भरते:
+आता एक फंक्शन तयार करा जे वास्तविक खाते डेटासह तुमचा डॅशबोर्ड भरते:
 
 ```javascript
 function updateDashboard() {
@@ -494,20 +634,20 @@ function updateDashboard() {
 }
 ```
 
-**हे फंक्शन काय करते याचे चरण-दर-चरण विश्लेषण:**
-- **पुष्टी करते** की खाते डेटा अस्तित्वात आहे
-- **प्रमाणित वापरकर्त्यांना** लॉगिन पृष्ठावर पुनर्निर्देशित करते
-- **पुनर्वापरयोग्य `updateElement` फंक्शन वापरून** खाते वर्णन अपडेट करते
-- **शिल्लक नेहमी दोन दशांश स्थान दर्शविण्यासाठी स्वरूपित करते**
-- **योग्य चलन चिन्ह प्रदर्शित करते**
+**हे फंक्शन काय करते:**
+- खाते डेटा अस्तित्वात आहे याची **पडताळणी** करते
+- अनधिकृत वापरकर्त्यांना लॉगिन पृष्ठावर परत **पाठवते**
+- पुनरावृत्ती होणाऱ्या `updateElement` फंक्शनचा वापर करून खाते वर्णन **अद्यतनित करते**
+- शिल्लक नेहमी दोन दशांश स्थान दर्शविण्यासाठी **स्वरूपित करते**
+- योग्य चलन चिन्ह **प्रदर्शित करते**
 
-> 💰 **पैशाचे स्वरूपन**: [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) पद्धत खूप उपयुक्त आहे! हे सुनिश्चित करते की आपली शिल्लक नेहमी वास्तविक पैशासारखी दिसते - "75.00" ऐवजी फक्त "75". आपल्या वापरकर्त्यांना परिचित चलन स्वरूपन पाहून आनंद होईल.
+> 💰 **पैशाचे स्वरूप**: [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) पद्धत खूप उपयुक्त आहे! हे सुनिश्चित करते की तुमची शिल्लक नेहमी वास्तविक पैशासारखी दिसते - "75.00" ऐवजी फक्त "75". तुमचे वापरकर्ते परिचित चलन स्वरूपन पाहून आनंदित होतील.
 
-#### चरण 3: आपला डॅशबोर्ड अपडेट होत असल्याची खात्री करा
+#### चरण 3: तुमचा डॅशबोर्ड अद्यतनित होत असल्याची खात्री करा
 
-आपला डॅशबोर्ड प्रत्येक वेळी कोणीही त्याला भेट देतो तेव्हा चालू डेटासह ताजेतवाने होतो याची खात्री करण्यासाठी, आपल्याला आपल्या नेव्हिगेशन सिस्टममध्ये हुक करणे आवश्यक आहे. आपण [पाठ 1 असाइनमेंट](../1-template-route/assignment.md) पूर्ण केली असल्यास, हे परिचित वाटेल. अन्यथा, काळजी करू नका - आपल्याला काय आवश्यक आहे ते येथे आहे:
+तुमचा डॅशबोर्ड प्रत्येक वेळी कोणी त्याला भेट देतो तेव्हा ताज्या डेटासह रिफ्रेश होतो याची खात्री करण्यासाठी, आम्हाला तुमच्या नेव्हिगेशन सिस्टममध्ये हुक करणे आवश्यक आहे. तुम्ही [पाठ 1 असाइनमेंट](../1-template-route/assignment.md) पूर्ण केली असल्यास, हे परिचित वाटले पाहिजे. जर नाही, तर काळजी करू नका - तुम्हाला काय आवश्यक आहे ते येथे आहे:
 
-आपल्या `updateRoute()` फंक्शनच्या शेवटी हे जोडा:
+तुमच्या `updateRoute()` फंक्शनच्या शेवटी हे जोडा:
 
 ```javascript
 if (typeof route.init === 'function') {
@@ -515,7 +655,7 @@ if (typeof route.init === 'function') {
 }
 ```
 
-यानंतर आपल्या मार्गांमध्ये डॅशबोर्ड प्रारंभ समाविष्ट करण्यासाठी अपडेट करा:
+यानंतर तुमच्या रूट्सला डॅशबोर्ड इनिशियलायझेशन समाविष्ट करण्यासाठी अद्यतनित करा:
 
 ```javascript
 const routes = {
@@ -524,28 +664,46 @@ const routes = {
 };
 ```
 
-**हे हुशार सेटअप काय करते:**
-- तपासते की मार्गामध्ये विशेष प्रारंभ कोड आहे का
-- मार्ग लोड झाल्यावर तो कोड स्वयंचलितपणे चालवते
-- सुनिश्चित करते की आपला डॅशबोर्ड नेहमी ताजे, चालू डेटा दर्शवतो
-- आपली रूटिंग लॉजिक स्वच्छ आणि व्यवस्थित ठेवते
+**या हुशार सेटअपने काय साध्य होते:**
+- रूटमध्ये विशेष इनिशियलायझेशन कोड आहे का ते तपासते
+- रूट लोड झाल्यावर तो कोड आपोआप चालवते
+- तुमचा डॅशबोर्ड नेहमी ताज्या, वर्तमान डेटासह दर्शवतो
+- तुमचे रूटिंग लॉजिक स्वच्छ आणि व्यवस्थित ठेवते
 
-#### आपला डॅशबोर्ड चाचणी करणे
+#### तुमचा डॅशबोर्ड चाचणी करणे
 
-या बदलांची अंमलबजावणी केल्यानंतर, आपला डॅशबोर्ड चाचणी करा:
+या बदलांची अंमलबजावणी केल्यानंतर, तुमचा डॅशबोर्ड चाचणी करा:
 
-1. **टेस्ट अकाउंटसह लॉगिन करा**
-2. **आपण डॅशबोर्डवर पुनर्निर्देशित झाल्याची पुष्टी करा**
-3. **खाते वर्णन, शिल्लक आणि चलन योग्यरित्या प्रदर्शित होत असल्याची खात्री करा**
-4. **लॉगआउट आणि पुन्हा लॉगिन करून डेटा योग्यरित्या ताजेतवाने होत असल्याची खात्री करा**
+1. **लॉग इन करा** टेस्ट अकाउंटसह
+2. **पडताळा** तुम्हाला डॅशबोर्डवर पुनर्निर्देशित केले आहे
+3. **तपासा** खाते वर्णन, शिल्लक आणि चलन योग्यरित्या प्रदर्शित होते
+4. **लॉग आउट आणि पुन्हा लॉग इन करून पहा** डेटा योग्यरित्या रिफ्रेश होतो याची खात्री करा
 
-आपला डॅशबोर्ड आता लॉगिन केलेल्या वापरकर्त्याच्या डेटावर आधारित डायनॅमिक खाते माहिती प्रदर्शित करावा!
+तुमचा डॅशबोर्ड आता गतिशील खाते माहिती प्रदर्शित करतो जो लॉग इन केलेल्या वापरकर्त्याच्या डेटावर आधारित अद्यतनित होतो!
 
 ## टेम्पलेट्ससह स्मार्ट व्यवहार यादी तयार करणे
 
-प्रत्येक व्यवहारासाठी मॅन्युअली HTML तयार करण्याऐवजी, आम्ही टेम्पलेट्स वापरून स्वयंचलितपणे सुसंगत स्वरूपन तयार करू. जसे अंतराळ यान उत्पादनामध्ये वापरले जाणारे मानकीकृत घटक, तसेच टेम्पलेट्स प्रत्येक व्यवहार रांगेसाठी समान संरचना आणि स्वरूपन सुनिश्चित करतात.
+प्रत्येक व्यवहारासाठी मॅन्युअली HTML तयार करण्याऐवजी, आम्ही टेम्पलेट्स वापरून स्वयंचलितपणे सुसंगत स्वरूपन तयार करू. अंतराळ यान उत्पादनासाठी वापरल्या जाणाऱ्या प्रमाणित घटकांप्रमाणे, टेम्पलेट्स सुनिश्चित करतात की प्रत्येक व्यवहार रांग समान संरचना आणि स्वरूपनाचे अनुसरण करते.
 
-हे तंत्र काही व्यवहारांपासून हजारोपर्यंत कार्यक्षमतेने स्केल करते, सुसंगत कार्यक्षमता आणि सादरीकरण राखते.
+ही तंत्रज्ञान काही व्यवहारांपासून हजारोपर्यंत कार्यक्षमतेने स्केल करते, सुसंगत कार्यप्रदर्शन आणि सादरीकरण राखते.
+
+```mermaid
+graph LR
+    A[HTML Template] --> B[JavaScript Clone]
+    B --> C[Populate with Data]
+    C --> D[Add to Fragment]
+    D --> E[Batch Insert to DOM]
+    
+    subgraph "Performance Benefits"
+        F[Single DOM Update]
+        G[Consistent Formatting]
+        H[Reusable Pattern]
+    end
+    
+    E --> F
+    E --> G
+    E --> H
+```
 
 ```mermaid
 flowchart LR
@@ -556,121 +714,142 @@ flowchart LR
     E --> F[Repeat for Each Transaction]
 ```
 
-### चरण 1: व्यवहार टेम्पलेट तयार करा
+### चरण 1:
+> ⚡ **प्रदर्शन सुधारणा**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) बोईंगच्या असेंब्ली प्रक्रियेप्रमाणे कार्य करते - घटक मुख्य रेषेपासून दूर तयार केले जातात आणि नंतर पूर्ण युनिट म्हणून स्थापित केले जातात. या बॅचिंग पद्धतीमुळे अनेक स्वतंत्र ऑपरेशन्सऐवजी एकाच समावेशाद्वारे DOM रीफ्लो कमी होतो.
 
-सर्वप्रथम, आपल्या HTML `<body>` मध्ये व्यवहार रांगेसाठी पुनर्वापरयोग्य टेम्पलेट जोडा:
+### चरण 5: मिश्रित सामग्रीसाठी अपडेट फंक्शन सुधारित करा
 
-```html
-<template id="transaction">
-  <tr>
-    <td></td>
-    <td></td>
-    <td></td>
-  </tr>
-</template>
+तुमचे `updateElement()` फंक्शन सध्या फक्त मजकूर सामग्री हाताळते. ते मजकूर आणि DOM नोड्स दोन्हीवर कार्य करण्यासाठी अद्यतनित करा:
+
+```javascript
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
 ```
 
-**HTML टेम्पलेट्स समजून घेणे:**
-- **एकल टेबल रांगेसाठी** संरचना परिभाषित करते
-- **JavaScript द्वारे क्लोन आणि भरले जाण्यापर्यंत** अदृश्य राहते
-- **तारीख, वर्णन आणि रक्कमसाठी** तीन सेल्स समाविष्ट करते
-- **सुसंगत स्वरूपनासाठी** पुनर्वापरयोग्य नमुना प्रदान करते
+**या अद्यतनातील मुख्य सुधारणा:**
+- नवीन सामग्री जोडण्यापूर्वी **मौजूदा सामग्री साफ करते**
+- **मजकूर स्ट्रिंग्स किंवा DOM नोड्स** दोन्ही पॅरामीटर्स म्हणून स्वीकारते
+- लवचिकतेसाठी [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) पद्धतीचा वापर करते
+- **मजकूर-आधारित विद्यमान वापरासह मागील सुसंगतता राखते**
 
-### चरण 2: डायनॅमिक सामग्रीसाठी आपली टेबल तयार करा
+### तुमचा डॅशबोर्ड चाचणीसाठी तयार करा
 
-यानंतर, आपल्या टेबल बॉडीला `id` जोडा जेणेकरून JavaScript सहजपणे लक्ष्य करू शकेल:
+सत्याचा क्षण आला आहे! तुमचा डायनॅमिक डॅशबोर्ड अॅक्शनमध्ये पाहूया:
 
-```html
-<tbody id="transactions"></tbody>
-```
+1. `test` खाते वापरून लॉग इन करा (त्यात नमुना डेटा तयार आहे)
+2. तुमच्या डॅशबोर्डवर जा
+3. व्यवहाराच्या रांगा योग्य स्वरूपनासह दिसत आहेत का ते तपासा
+4. तारीख, वर्णन आणि रक्कम व्यवस्थित दिसत आहेत याची खात्री करा
 
-**हे काय साध्य करते:**
-- **व्यवहार रांगा घालण्यासाठी** स्पष्ट लक्ष्य तयार करते
-- **टेबल संरचना आणि डायनॅमिक सामग्री वेगळी ठेवते**
-- **व्यवहार डेटा सहजपणे साफ आणि पुन्हा भरण्यास सक्षम करते**
+जर सर्व काही कार्यरत असेल, तर तुम्हाला तुमच्या डॅशबोर्डवर पूर्णपणे कार्यशील व्यवहार सूची दिसेल! 🎉
 
-### चरण 3: व्यवहार रांगा तयार करणारे फॅक्टरी फंक्शन तयार करा
+**तुम्ही काय साध्य केले आहे:**
+- कोणत्याही प्रमाणातील डेटासह स्केल होणारा डॅशबोर्ड तयार केला
+- सुसंगत स्वरूपनासाठी पुनर्वापरयोग्य टेम्पलेट्स तयार केले
+- कार्यक्षम DOM मॅनिप्युलेशन तंत्रे अंमलात आणली
+- उत्पादन बँकिंग अनुप्रयोगांशी तुलनात्मक कार्यक्षमता विकसित केली
 
-आता एक फंक्शन तयार करा जे व्यवहार डेटा HTML घटकांमध्ये रूपांतरित करते:
+तुम्ही स्थिर वेबपृष्ठाला डायनॅमिक वेब अनुप्रयोगात यशस्वीरित्या रूपांतरित केले आहे.
 
-```javascript
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
-}
-```
+### 🎯 शैक्षणिक तपासणी: डायनॅमिक सामग्री निर्मिती
 
-**या फॅक्टरी फंक्शनचे विश्लेषण:**
-- **टेम्पलेट घटक त्याच्या ID द्वारे शोधते**
-- **सुरक्षित हेरफेरसाठी टेम्पलेट सामग्री क्लोन करते**
-- **क्लोन केलेल्या सामग्रीमधील टेबल रांग निवडते**
-- **प्रत्येक सेल व्यवहार डेटाने भरते**
-- **रक्कम योग्य दशांश स्थान दर्शविण्यासाठी स्वरूपित करते**
-- **घालण्यासाठी तयार पूर्ण रांग परत करते**
+**आर्किटेक्चर समज**: तुम्ही डेटा-टू-UI पाइपलाइन अंमलात आणली आहे जी React, Vue आणि Angular सारख्या फ्रेमवर्कमध्ये वापरल्या जाणाऱ्या पॅटर्न्सशी जुळते.
 
-### चरण 4: अनेक व्यवहार रांगा कार्यक्षमतेने तयार करा
+**मास्टर केलेले मुख्य संकल्पना**:
+- **टेम्पलेट-आधारित रेंडरिंग**: पुनर्वापरयोग्य UI घटक तयार करणे
+- **डॉक्युमेंट फ्रॅगमेंट्स**: DOM कार्यक्षमतेत सुधारणा करणे
+- **सुरक्षित DOM मॅनिप्युलेशन**: सुरक्षा असुरक्षितता टाळणे
+- **डेटा ट्रान्सफॉर्मेशन**: सर्व्हर डेटा वापरकर्ता इंटरफेसमध्ये रूपांतरित करणे
 
-आपल्या `updateDashboard()` फंक्शनमध्ये हे कोड जोडा जेणेकरून सर्व व्यवहार प्रदर्शित होतील:
+**उद्योग कनेक्शन**: या तंत्रांवर आधुनिक फ्रंटएंड फ्रेमवर्कची पायाभूत रचना तयार केली जाते. React चा व्हर्च्युअल DOM, Vue चा टेम्पलेट सिस्टम आणि Angular चा घटक आर्किटेक्चर हे सर्व या मुख्य संकल्पनांवर आधारित आहेत.
 
-```javascript
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
+**चिंतन प्रश्न**: तुम्ही रिअल-टाइम अपडेट्स (जसे की नवीन व्यवहार स्वयंचलितपणे दिसणे) हाताळण्यासाठी ही प्रणाली कशी विस्तारित कराल? WebSockets किंवा Server-Sent Events विचारात घ्या.
+
+---
+
+## 📈 तुमचा डेटा व्यवस्थापन कौशल्य टाइमलाइन
+
+```mermaid
+timeline
+    title Data-Driven Development Journey
+    
+    section Foundation Building
+        API Setup & Testing
+            : Understand client-server communication
+            : Master HTTP request/response cycle
+            : Learn debugging techniques
+    
+    section Authentication Mastery
+        Async Function Patterns
+            : Write clean async/await code
+            : Handle promises effectively
+            : Implement error boundaries
+        User Session Management
+            : Create global state patterns
+            : Build navigation guards
+            : Design user feedback systems
+    
+    section Dynamic UI Development
+        Safe DOM Manipulation
+            : Prevent XSS vulnerabilities
+            : Use textContent over innerHTML
+            : Create accessibility-friendly interfaces
+        Template Systems
+            : Build reusable UI components
+            : Optimize performance with fragments
+            : Scale to handle large datasets
+    
+    section Professional Patterns
+        Production-Ready Code
+            : Implement comprehensive error handling
+            : Follow security best practices
+            : Create maintainable architectures
+        Modern Web Standards
+            : Master Fetch API patterns
+            : Understand CORS configurations
+            : Build responsive, accessible UIs
 ```
 
-**या कार्यक्षम दृष्टिकोनाची समज:**
-- **DOM ऑपरेशन्स बॅच करण्यासाठी** दस्तऐवज फ्रॅगमेंट तयार करते
-- **खाते डेटामधील सर्व व्यवहारांमधून** पुनरावृत्ती करते
-- **फॅक्टरी फंक्शन वापरून** प्रत्येक व्यवहारासाठी रांग तयार करते
-- **सर्व रांगा फ्रॅगमेंटमध्ये गोळा करते आणि नंतर DOM मध्ये जोडते**
-- **अनेक वैयक्तिक घालण्याऐवजी** एकच DOM अपडेट करते
+**🎓 पदवी माइलस्टोन**: तुम्ही आधुनिक JavaScript पॅटर्न्स वापरून पूर्ण डेटा-चालित वेब अनुप्रयोग यशस्वीरित्या तयार केला आहे. ही कौशल्ये React, Vue किंवा Angular सारख्या फ्रेमवर्कसह कार्य करण्यासाठी थेट अनुवादित होतात.
 
-> ⚡ **कार्यक्षमता ऑप्टिमायझेशन**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) बोईंगच्या असेंबली प्रक्रियेसारखे कार्य करते - घटक मुख्य लाइनवर तयार केले जातात आणि नंतर पूर्ण युनिट म्हणून स्थापित केले जातात. ही बॅचिंग पद्धत अनेक वैयक्तिक ऑपरेशन्सऐवजी एकच घालण्याद्वारे DOM रीफ्लो कमी करते.
+**🔄 पुढील स्तर क्षमता**:
+- या संकल्पनांवर आधारित फ्रंटएंड फ्रेमवर्क एक्सप्लोर करण्यासाठी तयार
+- WebSockets सह रिअल-टाइम वैशिष्ट्ये अंमलात आणण्यासाठी तयार
+- ऑफलाइन क्षमता असलेल्या प्रोग्रेसिव्ह वेब अॅप्स तयार करण्यासाठी सुसज्ज
+- प्रगत स्टेट मॅनेजमेंट पॅटर्न शिकण्यासाठी पाया तयार
 
-### चरण 5: मिश्रित सामग्रीसाठी अपडेट फंक्शन सुधारित करा
+## GitHub Copilot Agent Challenge 🚀
 
-आपले `updateElement()` फंक्शन सध्या फक्त मजकूर सामग्री हाताळते. ते मजकूर आणि DOM नोड्स दोन्ही कार्य करण्यासाठी अपडेट करा:
+Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-```javascript
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
-  element.append(textOrNode);
-}
-```
+**वर्णन:** बँकिंग अॅपमध्ये व्यवहार शोध आणि फिल्टर वैशिष्ट्य अंमलात आणा जे वापरकर्त्यांना तारीख श्रेणी, रक्कम किंवा वर्णनाद्वारे विशिष्ट व्यवहार शोधण्याची परवानगी देते.
 
-**या अपडेटमधील मुख्य
-**प्रॉम्प्ट:** बँकिंग अ‍ॅपसाठी शोध कार्यक्षमता तयार करा ज्यामध्ये समाविष्ट आहे: 1) तारीख श्रेणी (पासून/पर्यंत), किमान/कमाल रक्कम, आणि व्यवहार वर्णन कीवर्डसाठी इनपुट फील्डसह शोध फॉर्म, 2) `filterTransactions()` फंक्शन जे शोध निकषांवर आधारित account.transactions अ‍ॅरे फिल्टर करते, 3) `updateDashboard()` फंक्शन अद्यतनित करा जेणेकरून फिल्टर केलेले निकाल दाखवता येतील, आणि 4) "Clear Filters" बटण जोडा ज्यामुळे दृश्य रीसेट करता येईल. आधुनिक JavaScript अ‍ॅरे पद्धती जसे की `filter()` वापरा आणि रिक्त शोध निकषांसाठी एज केस हाताळा.
+**प्रॉम्प्ट:** बँकिंग अॅपसाठी शोध कार्यक्षमता तयार करा ज्यामध्ये समाविष्ट आहे: 1) तारीख श्रेणी (पासून/पर्यंत), किमान/कमाल रक्कम आणि व्यवहार वर्णन कीवर्डसाठी इनपुट फील्डसह शोध फॉर्म, 2) `filterTransactions()` फंक्शन जे शोध निकषांवर आधारित account.transactions अॅरे फिल्टर करते, 3) `updateDashboard()` फंक्शन अद्यतनित करा जे फिल्टर केलेले परिणाम दर्शवते, आणि 4) दृश्य रीसेट करण्यासाठी "Clear Filters" बटण जोडा. आधुनिक JavaScript अॅरे पद्धती जसे की `filter()` वापरा आणि रिक्त शोध निकषांसाठी एज केस हाताळा.
 
 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
 ## 🚀 आव्हान
 
-तुमच्या बँकिंग अ‍ॅपला पुढच्या स्तरावर नेण्यासाठी तयार आहात का? ते काहीतरी आकर्षक आणि वापरण्यास सोपे वाटेल असे बनवूया. तुमच्या सर्जनशीलतेला प्रेरणा देण्यासाठी काही कल्पना येथे दिल्या आहेत:
+तुमचे बँकिंग अॅप पुढील स्तरावर नेण्यासाठी तयार आहात? ते असे बनवूया की तुम्हाला ते वापरायचे वाटेल. तुमच्या सर्जनशीलतेला प्रेरणा देण्यासाठी काही कल्पना येथे आहेत:
 
-**ते सुंदर बनवा**: CSS स्टाइलिंग जोडा ज्यामुळे तुमचा कार्यशील डॅशबोर्ड काहीतरी आकर्षक दिसेल. स्वच्छ रेषा, चांगले अंतर, आणि कदाचित काही सूक्ष्म अ‍ॅनिमेशन विचारात घ्या.
+**ते सुंदर बनवा**: CSS स्टाइलिंग जोडा जे तुमच्या कार्यात्मक डॅशबोर्डला व्हिज्युअली आकर्षक बनवेल. स्वच्छ रेषा, चांगले अंतर आणि कदाचित काही सूक्ष्म अॅनिमेशन विचार करा.
 
 **ते प्रतिसादक्षम बनवा**: [मीडिया क्वेरीज](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) वापरून [प्रतिसादक्षम डिझाइन](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) तयार करण्याचा प्रयत्न करा जे फोन, टॅब्लेट आणि डेस्कटॉपवर उत्तम प्रकारे कार्य करते. तुमचे वापरकर्ते तुमचे आभार मानतील!
 
-**थोडी चमक जोडा**: व्यवहारांना रंग-कोडिंग विचारात घ्या (उत्पन्नासाठी हिरवा, खर्चासाठी लाल), आयकॉन जोडा, किंवा इंटरफेस परस्परसंवादी वाटेल असे हवर इफेक्ट तयार करा.
+**थोडा आकर्षण जोडा**: व्यवहारांना रंग-कोडिंग करण्याचा विचार करा (उत्पन्नासाठी हिरवा, खर्चासाठी लाल), आयकॉन जोडणे किंवा इंटरफेसला परस्परसंवादी वाटण्यासाठी हवर इफेक्ट तयार करणे.
 
-पॉलिश केलेल्या डॅशबोर्डचे उदाहरण कसे दिसू शकते ते येथे आहे:
+पॉलिश केलेला डॅशबोर्ड कसा दिसू शकतो याचे उदाहरण येथे आहे:
 
-![डॅशबोर्डच्या स्टाइलिंगनंतरच्या परिणामाचे स्क्रीनशॉट](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.mr.png)
+![डॅशबोर्डचे स्टाइलिंगनंतरचे उदाहरण परिणामाचे स्क्रीनशॉट](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.mr.png)
 
-तुम्हाला हे अचूकपणे जुळवायचे आहे असे वाटत नाही - याचा प्रेरणेसाठी वापर करा आणि ते तुमच्या पद्धतीने तयार करा!
+तुम्हाला हे अचूकपणे जुळवायचे आहे असे वाटत नाही - याचा प्रेरणास्रोत म्हणून वापर करा आणि ते तुमचे स्वतःचे बनवा!
 
-## व्याख्यानानंतरचा क्विझ
+## पोस्ट-लेक्चर क्विझ
 
-[व्याख्यानानंतरचा क्विझ](https://ff-quizzes.netlify.app/web/quiz/46)
+[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/46)
 
 ## असाइनमेंट
 
@@ -679,4 +858,4 @@ function updateElement(id, textOrNode) {
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेचा अभाव असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/7-bank-project/4-state-management/README.md b/translations/mr/7-bank-project/4-state-management/README.md
index cbe3d9ab87..48c3ac4b49 100644
--- a/translations/mr/7-bank-project/4-state-management/README.md
+++ b/translations/mr/7-bank-project/4-state-management/README.md
@@ -1,110 +1,238 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "32bd800759c3e943c38ad9ae6e1f51e0",
-  "translation_date": "2025-10-22T16:16:19+00:00",
+  "original_hash": "b807b09df716dc48a2b750835bf8e933",
+  "translation_date": "2025-11-03T14:42:51+00:00",
   "source_file": "7-bank-project/4-state-management/README.md",
   "language_code": "mr"
 }
 -->
 # बँकिंग अ‍ॅप तयार करा भाग 4: स्टेट मॅनेजमेंटची संकल्पना
 
+## ⚡ पुढील 5 मिनिटांत तुम्ही काय करू शकता
+
+**व्यस्त डेव्हलपर्ससाठी जलद सुरुवात मार्ग**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Diagnose state issues]
+    B --> C[Create central state object]
+    C --> D[Add updateState function]
+    D --> E[See immediate improvements]
+```
+
+- **पहिला मिनिट**: सध्याच्या स्टेट समस्येची चाचणी करा - लॉगिन करा, पृष्ठ रीफ्रेश करा, लॉगआउट निरीक्षण करा
+- **दुसरा मिनिट**: `let account = null` बदलून `let state = { account: null }` करा
+- **तिसरा मिनिट**: नियंत्रित अद्यतनांसाठी साधा `updateState()` फंक्शन तयार करा
+- **चौथा मिनिट**: नवीन पॅटर्न वापरण्यासाठी एक फंक्शन अपडेट करा
+- **पाचवा मिनिट**: सुधारित अंदाज आणि डीबगिंग क्षमता तपासा
+
+**जलद निदान चाचणी**:
+```javascript
+// Before: Scattered state
+let account = null; // Lost on refresh!
+
+// After: Centralized state
+let state = Object.freeze({ account: null }); // Controlled and trackable!
+```
+
+**महत्त्व का आहे**: 5 मिनिटांत तुम्ही अराजक स्टेट मॅनेजमेंटमधून अंदाज लावता येणाऱ्या, डीबग करण्यायोग्य पॅटर्नमध्ये रूपांतर अनुभवाल. हे जटिल अ‍ॅप्लिकेशन्स टिकाऊ बनवण्याचा पाया आहे.
+
+## 🗺️ स्टेट मॅनेजमेंट मास्टरीद्वारे तुमचा शिक्षण प्रवास
+
+```mermaid
+journey
+    title From Scattered State to Professional Architecture
+    section Diagnosing Problems
+      Identify state loss issues: 3: You
+      Understand scattered updates: 4: You
+      Recognize architecture needs: 6: You
+    section Centralizing Control
+      Create unified state object: 5: You
+      Implement controlled updates: 7: You
+      Add immutable patterns: 8: You
+    section Adding Persistence
+      Implement localStorage: 6: You
+      Handle serialization: 7: You
+      Create session continuity: 9: You
+    section Balancing Freshness
+      Address data staleness: 5: You
+      Build refresh systems: 8: You
+      Achieve optimal balance: 9: You
+```
+
+**तुमचा प्रवासाचा गंतव्य**: या धड्याच्या शेवटी, तुम्ही एक व्यावसायिक दर्जाचे स्टेट मॅनेजमेंट सिस्टम तयार केले असेल जे टिकाऊपणा, डेटा ताजेपणा आणि अंदाज लावता येणारे अद्यतन हाताळते - उत्पादन अ‍ॅप्लिकेशन्समध्ये वापरलेले समान पॅटर्न.
+
 ## प्री-लेक्चर क्विझ
 
 [प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/47)
 
 ## परिचय
 
-स्टेट मॅनेजमेंट म्हणजे व्हॉयजर अंतराळ यानावरील नेव्हिगेशन सिस्टमसारखे आहे – जेव्हा सर्व काही सुरळीत चालू असते, तेव्हा त्याची उपस्थिती फारशी जाणवत नाही. पण जेव्हा काहीतरी चुकते, तेव्हा ते आंतरतारकीय अवकाश गाठण्याचा किंवा ब्रह्मांडाच्या पोकळीत हरवण्याचा फरक बनतो. वेब डेव्हलपमेंटमध्ये, स्टेट म्हणजे तुमच्या अ‍ॅप्लिकेशनला लक्षात ठेवण्याची गरज असलेली सर्व गोष्टी: वापरकर्त्याची लॉगिन स्थिती, फॉर्म डेटा, नेव्हिगेशन इतिहास आणि तात्पुरते इंटरफेस स्टेट्स.
+स्टेट मॅनेजमेंट म्हणजे व्हॉयजर स्पेसक्राफ्टवरील नेव्हिगेशन सिस्टमसारखे आहे – जेव्हा सर्व काही सुरळीत चालू असते, तेव्हा तुम्हाला त्याची जाणीवही होत नाही. पण जेव्हा गोष्टी चुकतात, तेव्हा ते आंतरतारकीय जागेत पोहोचण्याचा आणि ब्रह्मांडीय पोकळीत हरवण्याचा फरक बनतो. वेब डेव्हलपमेंटमध्ये, स्टेट म्हणजे तुमच्या अ‍ॅप्लिकेशनला लक्षात ठेवण्याची गरज असलेली प्रत्येक गोष्ट: वापरकर्ता लॉगिन स्थिती, फॉर्म डेटा, नेव्हिगेशन इतिहास आणि तात्पुरते इंटरफेस स्टेट्स.
 
-तुमचे बँकिंग अ‍ॅप एक साधा लॉगिन फॉर्मपासून अधिक प्रगत अ‍ॅप्लिकेशनमध्ये विकसित झाले आहे, त्यामुळे तुम्हाला काही सामान्य आव्हाने जाणवली असतील. पृष्ठ रीफ्रेश करा आणि वापरकर्ते अनपेक्षितपणे लॉगआउट होतात. ब्राउझर बंद करा आणि सर्व प्रगती गायब होते. समस्या डीबग करा आणि तुम्ही अनेक फंक्शन्समध्ये शोध घेत आहात जे वेगवेगळ्या प्रकारे समान डेटा बदलतात.
+तुमचे बँकिंग अ‍ॅप साध्या लॉगिन फॉर्ममधून अधिक प्रगत अ‍ॅप्लिकेशनमध्ये विकसित झाल्यामुळे, तुम्हाला काही सामान्य आव्हाने आढळली असतील. पृष्ठ रीफ्रेश करा आणि वापरकर्ते अनपेक्षितपणे लॉगआउट होतात. ब्राउझर बंद करा आणि सर्व प्रगती गायब होते. समस्या डीबग करा आणि तुम्ही अनेक फंक्शन्समधून डेटा बदलत असलेल्या समस्यांचा शोध घेत आहात.
 
-हे खराब कोडिंगचे संकेत नाहीत – जेव्हा अ‍ॅप्लिकेशन्स विशिष्ट जटिलतेच्या टप्प्यावर पोहोचतात तेव्हा होणारे नैसर्गिक वाढीचे वेदना आहेत. प्रत्येक डेव्हलपरला ही आव्हाने सामोरी जावी लागतात कारण त्यांचे अ‍ॅप्स "प्रूफ ऑफ कॉन्सेप्ट" पासून "प्रॉडक्शन रेडी" मध्ये संक्रमण करतात.
+हे खराब कोडिंगचे संकेत नाहीत – जेव्हा अ‍ॅप्लिकेशन्स विशिष्ट जटिलतेच्या थ्रेशोल्डवर पोहोचतात तेव्हा नैसर्गिक वाढीच्या वेदना होतात. प्रत्येक डेव्हलपरला ही आव्हाने सामोरे जावे लागतात कारण त्यांचे अ‍ॅप्स "प्रूफ ऑफ कॉन्सेप्ट" पासून "प्रॉडक्शन रेडी" मध्ये संक्रमण करतात.
 
-या धड्यात, आम्ही एक केंद्रीकृत स्टेट मॅनेजमेंट सिस्टम लागू करू जी तुमच्या बँकिंग अ‍ॅपला एक विश्वासार्ह, व्यावसायिक अ‍ॅप्लिकेशनमध्ये रूपांतरित करेल. तुम्ही डेटा प्रवाह व्यवस्थापित करण्यास शिकाल, वापरकर्त्याचे सत्र योग्य प्रकारे टिकवून ठेवाल आणि आधुनिक वेब अ‍ॅप्लिकेशन्ससाठी आवश्यक असलेला गुळगुळीत वापरकर्ता अनुभव तयार कराल.
+या धड्यात, आम्ही एक केंद्रीकृत स्टेट मॅनेजमेंट सिस्टम लागू करू जी तुमचे बँकिंग अ‍ॅप एक विश्वासार्ह, व्यावसायिक अ‍ॅप्लिकेशनमध्ये रूपांतरित करते. तुम्ही डेटा प्रवाह अंदाज लावता येण्यासारखे व्यवस्थापित करणे, वापरकर्ता सत्र योग्य प्रकारे टिकवणे आणि आधुनिक वेब अ‍ॅप्लिकेशन्ससाठी आवश्यक असलेला गुळगुळीत वापरकर्ता अनुभव तयार करणे शिकाल.
 
 ## पूर्वतयारी
 
 स्टेट मॅनेजमेंट संकल्पनांमध्ये जाण्यापूर्वी, तुमचे डेव्हलपमेंट वातावरण योग्य प्रकारे सेट केलेले असणे आणि तुमचे बँकिंग अ‍ॅप फाउंडेशन तयार असणे आवश्यक आहे. या मालिकेच्या मागील भागांमधील संकल्पना आणि कोडवर हा धडा थेट तयार केला आहे.
 
-पुढे जाण्यापूर्वी खालील घटक तयार ठेवा:
+पुढे जाण्यापूर्वी खालील घटक तयार असल्याची खात्री करा:
 
 **आवश्यक सेटअप:**
-- [डेटा फेचिंग धडा](../3-data/README.md) पूर्ण करा - तुमचे अ‍ॅप खाते डेटा यशस्वीरित्या लोड आणि प्रदर्शित करायला हवे
+- [डेटा फेचिंग धडा](../3-data/README.md) पूर्ण करा - तुमचे अ‍ॅप खाते डेटा यशस्वीरित्या लोड आणि प्रदर्शित करावे
 - तुमच्या सिस्टमवर [Node.js](https://nodejs.org) इंस्टॉल करा बॅकएंड API चालवण्यासाठी
 - खाते डेटा ऑपरेशन्स हाताळण्यासाठी [सर्व्हर API](../api/README.md) स्थानिकपणे सुरू करा
 
 **तुमचे वातावरण तपासणे:**
 
-तुमचा API सर्व्हर योग्यरित्या चालू आहे का ते तपासण्यासाठी टर्मिनलमध्ये हा आदेश चालवा:
+तुमचा API सर्व्हर योग्यरित्या चालू आहे की नाही हे खालील कमांड टर्मिनलमध्ये चालवून सत्यापित करा:
 
 ```sh
 curl http://localhost:5000/api
 # -> should return "Bank API v1.0.0" as a result
 ```
 
-**हा आदेश काय करतो:**
-- **GET विनंती पाठवतो** तुमच्या स्थानिक API सर्व्हरला
-- **कनेक्शनची चाचणी करतो** आणि सर्व्हर प्रतिसाद देत आहे का ते सत्यापित करतो
-- **API आवृत्ती माहिती परत करतो** जर सर्व काही योग्य प्रकारे कार्य करत असेल
+**ही कमांड काय करते:**
+- **GET विनंती पाठवते** तुमच्या स्थानिक API सर्व्हरला
+- **कनेक्शन तपासते** आणि सर्व्हर प्रतिसाद देत आहे की नाही हे सत्यापित करते
+- **API आवृत्ती माहिती परत करते** जर सर्व काही योग्य प्रकारे कार्य करत असेल
+
+## 🧠 स्टेट मॅनेजमेंट आर्किटेक्चरचा आढावा
+
+```mermaid
+mindmap
+  root((State Management))
+    Current Problems
+      Session Loss
+        Page Refresh Issues
+        Browser Close Impact
+        Variable Reset Problems
+      Scattered Updates
+        Multiple Modification Points
+        Debugging Challenges
+        Unpredictable Behavior
+      Incomplete Cleanup
+        Logout State Issues
+        Memory Leaks
+        Security Concerns
+    Centralized Solutions
+      Unified State Object
+        Single Source of Truth
+        Predictable Structure
+        Scalable Foundation
+      Controlled Updates
+        Immutable Patterns
+        Object.freeze Usage
+        Function-Based Changes
+      State Tracking
+        History Management
+        Debug Visibility
+        Change Auditing
+    Persistence Strategies
+      localStorage Integration
+        Session Continuity
+        JSON Serialization
+        Automatic Sync
+      Data Freshness
+        Server Refresh
+        Stale Data Handling
+        Balance Optimization
+      Storage Optimization
+        Minimal Data
+        Performance Focus
+        Security Considerations
+```
+
+**मुख्य तत्त्व**: व्यावसायिक स्टेट मॅनेजमेंट अंदाज लावता येण्याजोगा, टिकाऊपणा आणि कार्यक्षमता यांचे संतुलन राखते जे साध्या संवादांपासून ते जटिल अ‍ॅप्लिकेशन वर्कफ्लोपर्यंत विश्वासार्ह वापरकर्ता अनुभव तयार करते.
 
 ---
 
-## वर्तमान स्टेट समस्यांचे निदान
+## सध्याच्या स्टेट समस्यांचे निदान
 
-शेरलॉक होम्सने गुन्ह्याच्या ठिकाणाचा अभ्यास केल्याप्रमाणे, आपण आपल्या वर्तमान अंमलबजावणीमध्ये नेमके काय घडत आहे ते समजून घेतले पाहिजे जेणेकरून वापरकर्त्याच्या सत्राच्या गायब होण्याचे रहस्य सोडवता येईल.
+शेरलॉक होम्सने गुन्ह्याच्या ठिकाणाचा तपास केल्याप्रमाणे, वापरकर्ता सत्र गायब होण्याच्या रहस्याचा उलगडा करण्यापूर्वी आपल्याला आपल्या सध्याच्या अंमलबजावणीमध्ये नेमके काय घडत आहे हे समजून घेणे आवश्यक आहे.
 
 चला एक साधा प्रयोग करूया जो अंतर्निहित स्टेट मॅनेजमेंट आव्हाने उघड करतो:
 
-**🧪 हा डायग्नोस्टिक चाचणी करा:**
+**🧪 हा निदान चाचणी करा:**
 1. तुमच्या बँकिंग अ‍ॅपमध्ये लॉगिन करा आणि डॅशबोर्डवर जा
 2. ब्राउझर पृष्ठ रीफ्रेश करा
 3. तुमच्या लॉगिन स्थितीवर काय परिणाम होतो ते निरीक्षण करा
 
-जर तुम्हाला लॉगिन स्क्रीनवर परत पाठवले गेले असेल, तर तुम्ही क्लासिक स्टेट टिकवून ठेवण्याची समस्या शोधली आहे. हे वर्तन घडते कारण आमची वर्तमान अंमलबजावणी वापरकर्त्याचा डेटा जावास्क्रिप्ट व्हेरिएबल्समध्ये संग्रहित करते जे प्रत्येक पृष्ठ लोडसह रीसेट होतात.
+जर तुम्हाला लॉगिन स्क्रीनवर परत पाठवले गेले असेल, तर तुम्ही क्लासिक स्टेट टिकाऊपणा समस्या शोधली आहे. हे वर्तन घडते कारण आमची सध्याची अंमलबजावणी वापरकर्ता डेटा जावास्क्रिप्ट व्हेरिएबल्समध्ये संग्रहित करते जे प्रत्येक पृष्ठ लोडसह रीसेट होते.
 
-**वर्तमान अंमलबजावणी समस्या:**
+**सध्याच्या अंमलबजावणीतील समस्या:**
 
-आमच्या [मागील धड्यातील](../3-data/README.md) साध्या `account` व्हेरिएबलमुळे तीन महत्त्वाच्या समस्या निर्माण होतात ज्या वापरकर्ता अनुभव आणि कोड टिकवून ठेवण्यावर परिणाम करतात:
+आमच्या [मागील धड्याच्या](../3-data/README.md) साध्या `account` व्हेरिएबलमुळे तीन महत्त्वाच्या समस्या निर्माण होतात ज्या वापरकर्ता अनुभव आणि कोड टिकाऊपणावर परिणाम करतात:
 
 | समस्या | तांत्रिक कारण | वापरकर्त्याचा परिणाम |
 |---------|--------|----------------|
 | **सत्र गमावणे** | पृष्ठ रीफ्रेश जावास्क्रिप्ट व्हेरिएबल्स साफ करते | वापरकर्त्यांना वारंवार पुन्हा प्रमाणीकरण करावे लागते |
-| **विखुरलेले अपडेट्स** | अनेक फंक्शन्स थेट स्टेट बदलतात | डीबगिंग अधिकाधिक कठीण होते |
+| **विखुरलेले अद्यतन** | अनेक फंक्शन्स थेट स्टेट बदलतात | डीबगिंग अधिकाधिक कठीण होते |
 | **अपूर्ण साफसफाई** | लॉगआउट सर्व स्टेट संदर्भ साफ करत नाही | संभाव्य सुरक्षा आणि गोपनीयता चिंता |
 
 **आर्किटेक्चरल आव्हान:**
 
-टायटॅनिकच्या विभागीकृत डिझाइनप्रमाणे जे अनेक विभाग एकाच वेळी पाण्याने भरले तेव्हा मजबूत वाटले, या समस्यांचे स्वतंत्रपणे निराकरण करणे अंतर्निहित आर्किटेक्चरल समस्येचे निराकरण करणार नाही. आपल्याला एक व्यापक स्टेट मॅनेजमेंट सोल्यूशन आवश्यक आहे.
+टायटॅनिकच्या विभागीकृत डिझाइनप्रमाणे जे अनेक विभाग एकाच वेळी भरले तेव्हा मजबूत वाटले, या समस्यांचे स्वतंत्रपणे निराकरण करणे अंतर्निहित आर्किटेक्चरल समस्येचे निराकरण करणार नाही. आपल्याला एक व्यापक स्टेट मॅनेजमेंट सोल्यूशन आवश्यक आहे.
 
 > 💡 **आपण येथे नेमके काय साध्य करण्याचा प्रयत्न करत आहोत?**
 
-[स्टेट मॅनेजमेंट](https://en.wikipedia.org/wiki/State_management) म्हणजे दोन मूलभूत कोड्यांचे निराकरण करणे:
+[स्टेट मॅनेजमेंट](https://en.wikipedia.org/wiki/State_management) खरोखर दोन मूलभूत कोड सोडवण्याबद्दल आहे:
 
-1. **माझा डेटा कुठे आहे?**: आपल्याकडे कोणती माहिती आहे आणि ती कुठून येत आहे हे लक्षात ठेवणे
-2. **सर्वजण एकाच पानावर आहेत का?**: वापरकर्त्यांना जे दिसते ते प्रत्यक्षात काय घडत आहे याशी जुळवून घेणे
+1. **माझा डेटा कुठे आहे?**: आपल्याकडे कोणती माहिती आहे आणि ती कोठून येत आहे हे लक्षात ठेवणे
+2. **सर्वजण एकाच पानावर आहेत का?**: वापरकर्त्यांना जे दिसते ते प्रत्यक्षात काय घडत आहे याशी जुळते याची खात्री करणे
 
 **आमची गेम योजना:**
 
-आपल्या शेपटीचा पाठलाग करण्याऐवजी, आम्ही एक **केंद्रीकृत स्टेट मॅनेजमेंट** प्रणाली तयार करणार आहोत. हे सर्व महत्त्वाच्या गोष्टींच्या व्यवस्थापनासाठी एक अत्यंत संघटित व्यक्ती असल्यासारखे आहे:
+आम्ही आमच्या शेपटीचा पाठलाग करण्याऐवजी, आम्ही एक **केंद्रीकृत स्टेट मॅनेजमेंट** सिस्टम तयार करणार आहोत. हे सर्व महत्त्वाच्या गोष्टींच्या व्यवस्थेसाठी एक अतिशय व्यवस्थित व्यक्ती असल्यासारखे विचार करा:
 
 ![HTML, वापरकर्ता क्रिया आणि स्टेट दरम्यान डेटा प्रवाह दर्शवणारी योजना](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.mr.png)
 
+```mermaid
+flowchart TD
+    A[User Action] --> B[Event Handler]
+    B --> C[updateState Function]
+    C --> D{State Validation}
+    D -->|Valid| E[Create New State]
+    D -->|Invalid| F[Error Handling]
+    E --> G[Object.freeze]
+    G --> H[Update localStorage]
+    H --> I[Trigger UI Update]
+    I --> J[User Sees Changes]
+    F --> K[User Sees Error]
+    
+    subgraph "State Management Layer"
+        C
+        E
+        G
+    end
+    
+    subgraph "Persistence Layer"
+        H
+        L[localStorage]
+        H -.-> L
+    end
+```
+
 **या डेटा प्रवाहाचे समजून घेणे:**
-- **केंद्रीकृत करते** सर्व अ‍ॅप्लिकेशन स्टेट एका ठिकाणी
-- **मार्गदर्शन करते** सर्व स्टेट बदल नियंत्रित फंक्शन्सद्वारे
-- **सुनिश्चित करते** UI वर्तमान स्टेटशी समक्रमित राहते
-- **पुरवते** डेटा व्यवस्थापनासाठी स्पष्ट, अंदाजे पॅटर्न
+- **केंद्रीकृत** सर्व अ‍ॅप्लिकेशन स्टेट एका ठिकाणी
+- **मार्गदर्शन** सर्व स्टेट बदल नियंत्रित फंक्शन्सद्वारे
+- **सुनिश्चित करते** UI सध्याच्या स्टेटशी समक्रमित राहते
+- **प्रदान करते** डेटा व्यवस्थापनासाठी स्पष्ट, अंदाज लावता येण्याजोगा पॅटर्न
 
-> 💡 **व्यावसायिक अंतर्दृष्टी**: हा धडा मूलभूत संकल्पनांवर लक्ष केंद्रित करतो. जटिल अ‍ॅप्लिकेशन्ससाठी, [Redux](https://redux.js.org) सारख्या लायब्ररी अधिक प्रगत स्टेट मॅनेजमेंट वैशिष्ट्ये प्रदान करतात. या मूलभूत तत्त्वांचे समजून घेणे तुम्हाला कोणत्याही स्टेट मॅनेजमेंट लायब्ररीमध्ये प्रभुत्व मिळविण्यास मदत करेल.
+> 💡 **व्यावसायिक अंतर्दृष्टी**: हा धडा मूलभूत संकल्पनांवर लक्ष केंद्रित करतो. जटिल अ‍ॅप्लिकेशन्ससाठी, [Redux](https://redux.js.org) सारख्या लायब्ररी अधिक प्रगत स्टेट मॅनेजमेंट वैशिष्ट्ये प्रदान करतात. या मूलभूत तत्त्वांचे समजून घेणे तुम्हाला कोणत्याही स्टेट मॅनेजमेंट लायब्ररीमध्ये प्रभुत्व मिळविण्यात मदत करेल.
 
-> ⚠️ **प्रगत विषय**: स्टेट बदलांद्वारे ट्रिगर केलेल्या स्वयंचलित UI अपडेट्स कव्हर केले जाणार नाहीत, कारण यामध्ये [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming) संकल्पना समाविष्ट आहेत. तुमच्या शिक्षण प्रवासासाठी हा एक उत्कृष्ट पुढचा टप्पा मानला जाऊ शकतो!
+> ⚠️ **प्रगत विषय**: आम्ही स्टेट बदलांद्वारे ट्रिगर केलेल्या स्वयंचलित UI अद्यतनांचा समावेश करणार नाही, कारण यामध्ये [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming) संकल्पनांचा समावेश आहे. तुमच्या शिक्षण प्रवासासाठी हा एक उत्कृष्ट पुढील टप्पा मानला जाऊ शकतो!
 
 ### कार्य: स्टेट स्ट्रक्चर केंद्रीकृत करा
 
-चला आपल्या विखुरलेल्या स्टेट मॅनेजमेंटला केंद्रीकृत प्रणालीमध्ये रूपांतरित करण्यास सुरुवात करूया. हा पहिला टप्पा पुढील सुधारणा करण्यासाठी पाया तयार करतो.
+चला आपल्या विखुरलेल्या स्टेट मॅनेजमेंटला केंद्रीकृत सिस्टममध्ये रूपांतरित करण्यास सुरुवात करूया. हे पहिले पाऊल सर्व सुधारणांसाठी पाया तयार करते.
 
-**पायरी 1: केंद्रीकृत स्टेट ऑब्जेक्ट तयार करा**
+**पाऊल 1: केंद्रीकृत स्टेट ऑब्जेक्ट तयार करा**
 
 साध्या `account` घोषणेला बदला:
 
@@ -112,7 +240,7 @@ curl http://localhost:5000/api
 let account = null;
 ```
 
-एक संरचित स्टेट ऑब्जेक्टसह:
+स्ट्रक्चर्ड स्टेट ऑब्जेक्टसह:
 
 ```js
 let state = {
@@ -120,15 +248,15 @@ let state = {
 };
 ```
 
-**या बदलाचा महत्त्व:**
+**या बदलाचा महत्त्व का आहे:**
 - **केंद्रीकृत करते** सर्व अ‍ॅप्लिकेशन डेटा एका ठिकाणी
-- **तयार करते** संरचना नंतर अधिक स्टेट गुणधर्म जोडण्यासाठी
+- **तयार करते** नंतर अधिक स्टेट गुणधर्म जोडण्यासाठी संरचना
 - **निर्माण करते** स्टेट आणि इतर व्हेरिएबल्स दरम्यान स्पष्ट सीमा
-- **स्थापित करते** एक पॅटर्न जो तुमच्या अ‍ॅपच्या वाढीसोबत स्केल होतो
+- **स्थापित करते** पॅटर्न जो तुमचे अ‍ॅप वाढत असताना स्केल होतो
 
-**पायरी 2: स्टेट ऍक्सेस पॅटर्न अपडेट करा**
+**पाऊल 2: स्टेट ऍक्सेस पॅटर्न अपडेट करा**
 
-तुमच्या फंक्शन्सला नवीन स्टेट संरचना वापरण्यासाठी अपडेट करा:
+तुमच्या फंक्शन्सला नवीन स्टेट स्ट्रक्चर वापरण्यासाठी अपडेट करा:
 
 **`register()` आणि `login()` फंक्शन्समध्ये**, बदला:
 ```js
@@ -145,138 +273,145 @@ state.account = ...
 const account = state.account;
 ```
 
-**या अपडेट्सने काय साध्य केले:**
-- **सध्याचे कार्यक्षमता टिकवून ठेवते** आणि संरचनेत सुधारणा करते
+**या अद्यतनांमुळे काय साध्य होते:**
+- **सध्याची कार्यक्षमता टिकवते** आणि संरचनेत सुधारणा करते
 - **तयार करते** तुमचा कोड अधिक प्रगत स्टेट मॅनेजमेंटसाठी
-- **निर्माण करते** स्टेट डेटा ऍक्सेस करण्यासाठी सुसंगत पॅटर्न
-- **स्थापित करते** केंद्रीकृत स्टेट अपडेट्ससाठी पाया
+- **सुसंगत पॅटर्न तयार करते** स्टेट डेटा ऍक्सेस करण्यासाठी
+- **स्थापित करते** केंद्रीकृत स्टेट अद्यतनांसाठी पाया
+
+> 💡 **टीप**: हे पुनर्रचना त्वरित आमच्या समस्यांचे निराकरण करत नाही, परंतु येणाऱ्या शक्तिशाली सुधारणांसाठी आवश्यक पाया तयार करते!
 
-> 💡 **टीप**: हे पुनर्रचना त्वरित आमच्या समस्यांचे निराकरण करत नाही, परंतु येणाऱ्या शक्तिशाली सुधारणा करण्यासाठी आवश्यक पाया तयार करते!
+### 🎯 शैक्षणिक तपासणी: केंद्रीकरण तत्त्वे
 
-## नियंत्रित स्टेट अपडेट्स अंमलात आणणे
+**थांबा आणि विचार करा**: तुम्ही केंद्रीकृत स्टेट मॅनेजमेंटचा पाया अंमलात आणला आहे. हा एक महत्त्वाचा आर्किटेक्चरल निर्णय आहे.
 
-आमचा स्टेट केंद्रीकृत झाल्यानंतर, पुढील टप्पा डेटा बदलांसाठी नियंत्रित यंत्रणा स्थापित करणे आहे. ही पद्धत अंदाजे स्टेट बदल आणि सोपे डीबगिंग सुनिश्चित करते.
+**जलद स्व-मूल्यांकन**:
+- तुम्ही स्पष्ट करू शकता का की स्टेट एका ऑब्जेक्टमध्ये केंद्रीकृत करणे विखुरलेल्या व्हेरिएबल्सपेक्षा चांगले का आहे?
+- जर तुम्ही `state.account` वापरण्यासाठी फंक्शन अपडेट करणे विसरलात तर काय होईल?
+- हा पॅटर्न तुमच्या कोडला अधिक प्रगत वैशिष्ट्यांसाठी कसा तयार करतो?
 
-मुख्य तत्त्व एअर ट्रॅफिक कंट्रोलसारखे आहे: अनेक फंक्शन्सना स्वतंत्रपणे स्टेट बदलण्याची परवानगी देण्याऐवजी, आम्ही सर्व बदल एका नियंत्रित फंक्शनद्वारे चॅनेल करू. हा पॅटर्न डेटा कधी आणि कसा बदलतो यावर स्पष्ट देखरेख प्रदान करतो.
+**वास्तविक-जगाशी कनेक्शन**: तुम्ही शिकलेला केंद्रीकरण पॅटर्न Redux, Vuex आणि React Context सारख्या आधुनिक फ्रेमवर्कचा पाया आहे. तुम्ही प्रमुख अ‍ॅप्लिकेशन्समध्ये वापरलेले समान आर्किटेक्चरल विचार तयार करत आहात.
 
-**Immutable स्टेट मॅनेजमेंट:**
+**चॅलेंज प्रश्न**: जर तुम्हाला तुमच्या अ‍ॅपमध्ये वापरकर्ता प्राधान्ये (थीम, भाषा) जोडायची असतील, तर तुम्ही ती स्टेट स्ट्रक्चरमध्ये कुठे जोडाल? हे कसे स्केल होईल?
 
-आम्ही आमच्या `state` ऑब्जेक्टला [*immutable*](https://en.wikipedia.org/wiki/Immutable_object) मानणार आहोत, म्हणजे आम्ही त्याला थेट बदलणार नाही. त्याऐवजी, प्रत्येक बदल नवीन स्टेट ऑब्जेक्ट तयार करतो ज्यामध्ये अपडेट केलेला डेटा असतो.
+## नियंत्रित स्टेट अद्यतनांची अंमलबजावणी
 
-ही पद्धत थेट बदलांच्या तुलनेत सुरुवातीला अकार्यक्षम वाटू शकते, परंतु डीबगिंग, चाचणी आणि अ‍ॅप्लिकेशन अंदाजे टिकवून ठेवण्यासाठी ती महत्त्वपूर्ण फायदे प्रदान करते.
+आमचा स्टेट केंद्रीकृत झाल्यामुळे, पुढील पाऊल म्हणजे डेटा बदलांसाठी नियंत्रित यंत्रणा स्थापित करणे. ही पद्धत अंदाज लावता येण्याजोगे स्टेट बदल आणि सोपे डीबगिंग सुनिश्चित करते.
 
-**Immutable स्टेट मॅनेजमेंटचे फायदे:**
+मुख्य तत्त्व एअर ट्रॅफिक कंट्रोलसारखे आहे: अनेक फंक्शन्सना स्वतंत्रपणे स्टेट बदलण्याची परवानगी देण्याऐवजी, आम्ही सर्व बदल एका नियंत्रित फंक्शनद्वारे चॅनेल करतो. ही पद्धत डेटा बदल कधी आणि कसे घडतात याचे स्पष्ट निरीक्षण प्रदान करते.
+
+**इम्युटेबल स्टेट मॅनेजमेंट:**
+
+आम्ही आमच्या `state` ऑब्जेक्टला [*immutable*](https://en.wikipedia.org/wiki/Immutable_object) मानणार आहोत, म्हणजे आम्ही त्याला थेट बदलणार नाही. त्याऐवजी, प्रत्येक बदल नवीन स्टेट ऑब्जेक्ट तयार करतो ज्यामध्ये अद्यतनित डेटा असतो.
+
+ही पद्धत थेट बदलांच्या तुलनेत सुरुवातीला अकार्यक्षम वाटू शकते, परंतु डीबगिंग, चाचणी आणि अ‍ॅप्लिकेशन अंदाज लावता येण्याजोगे ठेवण्यासाठी ती महत्त्वपूर्ण फायदे प्रदान करते.
+
+**इम्युटेबल स्टेट मॅनेजमेंटचे फायदे:**
 
 | फायदा | वर्णन | परिणाम |
 |---------|-------------|--------|
-| **अंदाजे** | बदल फक्त नियंत्रित फंक्शन्सद्वारे होतात | डीबगिंग आणि चाचणी सोपे |
+| **अंदाज लावता येण्याजोगा** | बदल फक्त नियंत्रित फंक्शन्सद्वारे होतात | डीबग आणि चाचणी करणे सोपे |
 | **इतिहास ट्रॅकिंग** | प्रत्येक स्टेट बदल नवीन ऑब्जेक्ट तयार करतो | Undo/Redo कार्यक्षमता सक्षम करते |
-| **साइड इफेक्ट प्रतिबंध** | कोणतेही अपघाती बदल नाहीत | रहस्यमय बग्स टाळते |
-| **कामगिरी ऑप्टिमायझेशन** | स्टेट प्रत्यक्षात बदलला तेव्हा शोधणे सोपे | कार्यक्षम UI अपडेट्स सक्षम करते |
+| **साइड इफेक्ट प्रतिबंध** | कोणतेही अनपेक्षित बदल नाहीत | रहस्यमय बग्स टाळते |
+| **कार्यक्षमता ऑप्टिमायझेशन** | स्टेट प्रत्यक्षात बदलला आहे की नाही हे शोधणे सोपे | कार्यक्षम UI अद्यतन सक्षम करते |
 
-**JavaScript Immutable `Object.freeze()` सह:**
+**जावास्क्रिप्ट इम्युटेबिलिटी `Object.freeze()` सह:**
 
-JavaScript [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) प्रदान करते ऑब्जेक्ट बदल प्रतिबंधित करण्यासाठी:
+जावास्क्रिप्ट [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) प्रदान करते ऑब्जेक्ट बदल रोखण्यासाठी:
 
 ```js
 const immutableState = Object.freeze({ account: userData });
 // Any attempt to modify immutableState will throw an error
 ```
 
-**येथे काय घडते ते समजून घेणे:**
-- **प्रतिबंधित करते** थेट प्रॉपर्टी असाइनमेंट्स किंवा डिलीशन्स
-- **अपवाद फेकते** जर बदल करण्याचे प्रयत्न केले गेले
+**येथे काय घडते याचे विश्लेषण:**
+- **थेट प्रॉपर्टी असाइनमेंट किंवा हटवणे रोखते**
+- **बदल करण्याच्या प्रयत्नांवर अपवाद फेकते**
 - **सुनिश्चित करते** स्टेट बदल नियंत्रित फंक्शन्सद्वारे होणे आवश्यक आहे
-- **निर्माण करते** स्टेट कसा अपडेट केला जाऊ शकतो यासाठी स्पष्ट करार
-
-> 💡 **सखोल अभ्यास**: [MDN दस्तऐवज](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) मध्ये *shallow* आणि *deep* immutable ऑब्जेक्ट्समधील फरक जाणून घ्या. जटिल स्टेट संरचनेसाठी हा फरक समजून घेणे महत्त्वाचे आहे.
+- **स्पष्ट करार तयार करते** स्टेट कसा अपडेट केला जाऊ शकतो यासाठी
 
-### कार्य
+> 💡 **सखोल अभ्यास**: [MDN दस्तऐवज](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) मध्ये *शॅलो* आणि *डीप* इम्युटेबल ऑब्जेक्ट्समधील फरक जाणून घ्या. जटिल
+| **ते किती काळ टिकावे?** | लॉगिन स्थिती व तात्पुरते UI प्राधान्य | योग्य संचयन कालावधी निवडा |
+| **सर्व्हरला याची गरज आहे का?** | प्रमाणीकरण टोकन व UI सेटिंग्ज | सामायिकरणाच्या गरजा ठरवा |
 
-चला एक नवीन `updateState()` फंक्शन तयार करूया:
+**ब्राउझर संचयन पर्याय:**
 
-```js
-function updateState(property, newData) {
-  state = Object.freeze({
-    ...state,
-    [property]: newData
-  });
-}
-```
+आधुनिक ब्राउझर विविध संचयन यंत्रणा प्रदान करतात, प्रत्येक वेगवेगळ्या उपयोगासाठी डिझाइन केलेली आहे:
 
-या फंक्शनमध्ये, आम्ही नवीन स्टेट ऑब्जेक्ट तयार करतो आणि [*spread (`...`) ऑपरेटर*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) वापरून मागील स्टेटमधून डेटा कॉपी करतो. नंतर आम्ही [bracket notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` वापरून स्टेट ऑब्जेक्टच्या विशिष्ट प्रॉपर्टीला नवीन डेटा असाइन करतो. शेवटी, आम्ही `Object.freeze()` वापरून ऑब्जेक्ट लॉक करतो जेणेकरून बदल प्रतिबंधित होतात. सध्या स्टेटमध्ये फक्त `account` प्रॉपर्टी संग्रहित आहे, पण या पद्धतीने तुम्ही स्टेटमध्ये जितके हवे तितके प्रॉपर्टी जोडू शकता.
+**प्राथमिक संचयन API:**
 
-आम्ही `state` इनिशियलायझेशन अपडेट करू जेणेकरून प्रारंभिक स्टेट देखील फ्रोझन असेल:
+1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: कायमस्वरूपी [की/मूल्य संचयन](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
+   - **कायम टिकते** ब्राउझर सत्रांमध्ये अनिश्चित काळासाठी  
+   - **ब्राउझर पुन्हा सुरू केल्यावर आणि संगणक रीबूट केल्यावर टिकते**
+   - **विशिष्ट वेबसाइट डोमेनसाठी मर्यादित**
+   - **उत्तम** वापरकर्ता प्राधान्ये आणि लॉगिन स्थितीसाठी
 
-```js
-let state = Object.freeze({
-  account: null
-});
-```
+2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: तात्पुरते सत्र संचयन
+   - **localStorage प्रमाणेच कार्य करते** सक्रिय सत्रांमध्ये
+   - **स्वतःहून साफ होते** ब्राउझर टॅब बंद झाल्यावर
+   - **आदर्श** तात्पुरत्या डेटासाठी जी टिकून राहू नये
 
-यानंतर, `register` फंक्शनमध्ये `state.account = result;` असाइनमेंट बदलून:
+3. **[HTTP Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: सर्व्हर-सामायिक संचयन
+   - **स्वतःहून पाठवले जाते** प्रत्येक सर्व्हर विनंतीसह
+   - **उत्तम** [प्रमाणीकरण](https://en.wikipedia.org/wiki/Authentication) टोकनसाठी
+   - **मर्यादित** आकारात आणि कार्यक्षमतेवर परिणाम करू शकते
 
-```js
-updateState('account', result);
-```
+**डेटा सिरियलायझेशनची आवश्यकता:**
 
-`login` फंक्शनमध्ये देखील, `state.account = data;` बदलून:
+`localStorage` आणि `sessionStorage` फक्त [स्ट्रिंग्स](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) संचयित करतात:
 
 ```js
-updateState('account', data);
-```
-
-आता आम्ही वापरकर्त्याने *Logout* क्लिक केल्यावर खाते डेटा साफ न होण्याची समस्या सोडवण्याची संधी घेऊ.
+// Convert objects to JSON strings for storage
+const accountData = { user: 'john', balance: 150 };
+localStorage.setItem('account', JSON.stringify(accountData));
 
-नवीन `logout()` फंक्शन तयार करा:
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
+// Parse JSON strings back to objects when retrieving
+const savedAccount = JSON.parse(localStorage.getItem('account'));
 ```
 
-`updateDashboard()` मध्ये, `return navigate('/login');` पुनर्निर्देशन बदलून `return logout();` करा;
-
-नवीन खाते नोंदणी करण्याचा प्रयत्न करा, लॉगआउट करा आणि पुन्हा लॉगिन करा आणि सर्व काही अद्याप योग्य प्रकारे कार्य करत आहे का ते तपासा.
-
-> टीप: तुम्ही `updateState()` च्या तळाशी `console.log(state)` जोडून आणि तुमच्या ब्राउझरच्या डेव्हलपमेंट टूल्समध्ये कन्सोल उघडून सर्व स्टेट बदल पाहू शकता.
-
-## डेटा टिकवून ठेवणे अंमलात आणणे
-
-आम्ही पूर्वी ओळखलेल्या सत्र गमावण्याच्या समस्येस ब्राउझर सत्रांमध्ये वापरकर्त्याचे स्टेट टिकवून ठेवणारे टिकवून ठेवण्याचे समाधान आवश्यक आहे. हे आमच्या अ‍ॅप्लिकेशनला तात्पुरत्या अनुभवातून एक विश्वासार्ह, व्यावसायिक साधनात रूपांतरित करते.
-
-अणु घड्याळे वीज खंडित झाल्यानंतरही नॉन-वोलाटाइल मेमरीमध्ये महत्त्वाचा स्टेट संग्रहित करून अचूक वेळ कसा टिकवून ठेवतात याचा विचार करा. त्याचप्रमाणे, वेब अ‍ॅप्लिकेशन्सना ब्राउझर सत्रांमध्ये आणि पृष्ठ रीफ्रेशमध्ये आवश्यक वापरकर्त्याचा डेटा टिकवून ठेवण्यासाठी टिकवून ठेवण्याच्या यंत्रणा आवश्यक आहेत.
-
-**डेटा टिकवून ठेवण्यासाठी धोरणात्मक प्रश्न:**
-
-टिकवून ठेवण्याची अंमलबजावणी करण्यापूर्वी, या महत्त्वाच्या घटकांचा विचार करा:
-
-| प्रश्न | बँकिंग अ‍ॅप संदर्भ | निर्णयाचा परिणाम |
-|----------|-------------------|----------------|
-| **डेटा संवेदनशील आहे का?** | खाते शिल्लक, व्यवहार इतिहास | सुरक्षित संग्रहण पद्धती निवडा |
-| **ते किती काळ टिकवले पाहिजे?** | लॉगिन स्थिती विरुद्ध तात्पुरत्या UI प्राधान्ये | योग्य संग्रहण कालावधी निवडा |
-|
-> 💡 **प्रगत पर्याय**: मोठ्या डेटासेटसह जटिल ऑफलाइन अनुप्रयोगांसाठी [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) विचारात घ्या. हे पूर्ण क्लायंट-साइड डेटाबेस प्रदान करते परंतु अधिक जटिल अंमलबजावणीची आवश्यकता असते.
+**सिरियलायझेशन समजून घेणे:**
+- **जावास्क्रिप्ट ऑब्जेक्ट्सना JSON स्ट्रिंग्समध्ये रूपांतरित करते** [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) वापरून
+- **JSON मधून ऑब्जेक्ट्स पुन्हा तयार करते** [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) वापरून
+- **स्वतःहून जटिल नेस्टेड ऑब्जेक्ट्स आणि अ‍ॅरे हाताळते**
+- **फेल होते** फंक्शन्स, अनिर्दिष्ट मूल्ये, आणि सर्क्युलर संदर्भांवर
+
+> 💡 **प्रगत पर्याय**: मोठ्या डेटासेटसह जटिल ऑफलाइन अ‍ॅप्ससाठी, [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) विचारात घ्या. हे पूर्ण क्लायंट-साइड डेटाबेस प्रदान करते परंतु अधिक जटिल अंमलबजावणीची आवश्यकता असते.
+
+```mermaid
+quadrantChart
+    title Browser Storage Options
+    x-axis Low Complexity --> High Complexity
+    y-axis Short Duration --> Long Duration
+    
+    quadrant-1 Professional Tools
+    quadrant-2 Simple Persistence
+    quadrant-3 Temporary Storage
+    quadrant-4 Advanced Systems
+    
+    localStorage: [0.3, 0.8]
+    sessionStorage: [0.2, 0.2]
+    HTTP Cookies: [0.6, 0.7]
+    IndexedDB: [0.9, 0.9]
+    Memory Variables: [0.1, 0.1]
+```
 
-### कार्य: localStorage स्थिरता अंमलात आणा
+### कार्य: localStorage टिकवून ठेवणे अंमलात आणा
 
-चला स्थिर स्टोरेज अंमलात आणूया जेणेकरून वापरकर्ते स्पष्टपणे लॉग आउट होईपर्यंत लॉग इन राहतील. आम्ही `localStorage` वापरून ब्राउझर सत्रांमध्ये खाते डेटा साठवू.
+चला टिकाऊ संचयन अंमलात आणूया जेणेकरून वापरकर्ते स्पष्टपणे लॉगआउट होईपर्यंत लॉग इन राहतील. आम्ही `localStorage` वापरून खाते डेटा ब्राउझर सत्रांमध्ये संचयित करू.
 
-**पायरी 1: स्टोरेज कॉन्फिगरेशन परिभाषित करा**
+**पायरी 1: संचयन कॉन्फिगरेशन परिभाषित करा**
 
 ```js
 const storageKey = 'savedAccount';
 ```
 
-**या स्थिरतेने काय प्रदान केले आहे:**
-- **सुसंगत आयडेंटिफायर तयार करते** साठवलेल्या डेटासाठी
-- **टायपो टाळते** स्टोरेज की संदर्भांमध्ये
-- **साठवण की बदलणे सोपे करते** जर आवश्यक असेल तर
-- **सर्वोत्तम पद्धतींचे अनुसरण करते** देखभालक्षम कोडसाठी
+**हा स्थिरांक काय प्रदान करतो:**
+- **आमच्या संचयित डेटासाठी सुसंगत ओळखकर्ता तयार करतो**
+- **संचयन की संदर्भांमध्ये टायपो टाळतो**
+- **संचयन की बदलणे सोपे बनवतो**
+- **देखभालक्षम कोडसाठी सर्वोत्तम पद्धतींचे अनुसरण करतो**
 
-**पायरी 2: स्वयंचलित स्थिरता जोडा**
+**पायरी 2: स्वयंचलित टिकवून ठेवणे जोडा**
 
 `updateState()` फंक्शनच्या शेवटी ही ओळ जोडा:
 
@@ -285,16 +420,16 @@ localStorage.setItem(storageKey, JSON.stringify(state.account));
 ```
 
 **येथे काय घडते याचे विश्लेषण:**
-- **खाते ऑब्जेक्ट JSON स्ट्रिंगमध्ये रूपांतरित करते** साठवण्यासाठी
-- **डेटा साठवते** आमच्या सुसंगत स्टोरेज की वापरून
-- **स्वयंचलितपणे अंमलात आणते** जेव्हा राज्य बदल होतो
-- **सुनिश्चित करते** की साठवलेला डेटा सद्यस्थितीसह नेहमी समक्रमित असतो
+- **खाते ऑब्जेक्ट JSON स्ट्रिंगमध्ये रूपांतरित करते** संचयनासाठी
+- **आमच्या सुसंगत संचयन की वापरून डेटा सेव्ह करते**
+- **स्वयंचलितपणे अंमलात आणते** जेव्हा राज्य बदल होतात
+- **सुनिश्चित करते** की संचयित डेटा सद्य स्थितीसह नेहमी समक्रमित असतो
 
-> 💡 **आर्किटेक्चरचा फायदा**: कारण आम्ही सर्व राज्य अद्यतने `updateState()` मध्ये केंद्रीकृत केली आहेत, स्थिरता जोडण्यासाठी फक्त एक ओळ कोड आवश्यक होती. हे चांगल्या आर्किटेक्चरल निर्णयाचे सामर्थ्य दर्शवते!
+> 💡 **आर्किटेक्चरचा फायदा**: कारण आम्ही सर्व राज्य अद्यतने `updateState()` मध्ये केंद्रीकृत केली आहेत, टिकवून ठेवणे जोडण्यासाठी फक्त एक ओळ कोड आवश्यक होती. हे चांगल्या आर्किटेक्चरल निर्णयांचे सामर्थ्य दर्शवते!
 
-**पायरी 3: अॅप लोडवर राज्य पुनर्संचयित करा**
+**पायरी 3: अ‍ॅप लोडवर राज्य पुनर्संचयित करा**
 
-साठवलेला डेटा पुनर्संचयित करण्यासाठी एक प्रारंभिक फंक्शन तयार करा:
+संचयित डेटा पुनर्संचयित करण्यासाठी एक प्रारंभिक फंक्शन तयार करा:
 
 ```js
 function init() {
@@ -312,15 +447,15 @@ init();
 ```
 
 **प्रारंभिक प्रक्रियेचे समजून घेणे:**
-- **पूर्वी साठवलेला खाते डेटा पुनर्प्राप्त करते** localStorage मधून
-- **JSON स्ट्रिंग परत JavaScript ऑब्जेक्टमध्ये पार्स करते**
+- **localStorage मधून पूर्वी सेव्ह केलेला खाते डेटा पुनर्प्राप्त करते**
+- **JSON स्ट्रिंग पुन्हा जावास्क्रिप्ट ऑब्जेक्टमध्ये पार्स करते**
 - **आमच्या नियंत्रित अद्यतन फंक्शनचा वापर करून राज्य अद्यतनित करते**
-- **वापरकर्त्याचे सत्र स्वयंचलितपणे पुनर्संचयित करते** पृष्ठ लोडवर
+- **पृष्ठ लोडवर वापरकर्त्याचे सत्र स्वयंचलितपणे पुनर्संचयित करते**
 - **मार्ग अद्यतनांपूर्वी अंमलात आणते** जेणेकरून राज्य उपलब्ध असेल
 
 **पायरी 4: डीफॉल्ट मार्ग ऑप्टिमाइझ करा**
 
-स्थिरतेचा फायदा घेण्यासाठी डीफॉल्ट मार्ग अद्यतनित करा:
+टिकवून ठेवण्याचा फायदा घेण्यासाठी डीफॉल्ट मार्ग अद्यतनित करा:
 
 `updateRoute()` मध्ये, बदला:
 ```js
@@ -328,29 +463,43 @@ init();
 return navigate('/dashboard');
 ```
 
-**या बदलाचा अर्थ:**
-- **आमच्या नवीन स्थिरता प्रणालीचा प्रभावीपणे उपयोग करते**
+**का हा बदल योग्य आहे:**
+- **आमच्या नवीन टिकवून ठेवण्याच्या प्रणालीचा प्रभावीपणे उपयोग करते**
 - **डॅशबोर्डला प्रमाणीकरण तपासणी हाताळण्याची परवानगी देते**
-- **स्वयंचलितपणे लॉगिनकडे पुनर्निर्देशित करते** जर साठवलेले सत्र अस्तित्वात नसेल
+- **संचयित सत्र अस्तित्वात नसल्यास स्वयंचलितपणे लॉगिनकडे पुनर्निर्देशित करते**
 - **वापरकर्त्याचा अनुभव अधिक सहज बनवते**
 
-**तुमच्या अंमलबजावणीची चाचणी करणे:**
+**तुमच्या अंमलबजावणीची चाचणी:**
 
-1. तुमच्या बँकिंग अॅपमध्ये लॉग इन करा
+1. तुमच्या बँकिंग अ‍ॅपमध्ये लॉग इन करा
 2. ब्राउझर पृष्ठ रीफ्रेश करा
 3. खात्री करा की तुम्ही लॉग इन राहता आणि डॅशबोर्डवर असता
 4. तुमचा ब्राउझर बंद करा आणि पुन्हा उघडा
-5. तुमच्या अॅपवर परत जा आणि खात्री करा की तुम्ही अजूनही लॉग इन आहात
+5. तुमच्या अ‍ॅपकडे परत जा आणि खात्री करा की तुम्ही अजूनही लॉग इन आहात
+
+🎉 **साध्य केलेले यश**: तुम्ही टिकाऊ राज्य व्यवस्थापन यशस्वीरित्या अंमलात आणले आहे! तुमचे अ‍ॅप आता व्यावसायिक वेब अ‍ॅप्लिकेशनसारखे वागते.
+
+### 🎯 शैक्षणिक तपासणी: टिकवून ठेवण्याचे आर्किटेक्चर
+
+**आर्किटेक्चर समजून घेणे**: तुम्ही एक परिष्कृत टिकवून ठेवण्याची प्रणाली अंमलात आणली आहे जी वापरकर्त्याचा अनुभव आणि डेटा व्यवस्थापनाची गुंतागुंत यामध्ये संतुलन राखते.
+
+**मुख्य संकल्पना आत्मसात केल्या**:
+- **JSON सिरियलायझेशन**: जटिल ऑब्जेक्ट्स स्टोरेबल स्ट्रिंग्समध्ये रूपांतरित करणे
+- **स्वयंचलित समक्रमण**: राज्य बदल टिकाऊ संचयन ट्रिगर करतात
+- **सत्र पुनर्प्राप्ती**: अ‍ॅप्स व्यत्ययांनंतर वापरकर्त्याचा संदर्भ पुनर्संचयित करू शकतात
+- **केंद्रीकृत टिकवून ठेवणे**: एक अद्यतन फंक्शन सर्व संचयन हाताळते
 
-🎉 **साध्य केलेले यश**: तुम्ही यशस्वीरित्या स्थिर राज्य व्यवस्थापन अंमलात आणले आहे! तुमचे अॅप आता व्यावसायिक वेब अॅप्लिकेशनसारखे वागते.
+**उद्योग कनेक्शन**: ही टिकवून ठेवण्याची पद्धत प्रोग्रेसिव वेब अ‍ॅप्स (PWAs), ऑफलाइन-प्रथम अ‍ॅप्लिकेशन्स, आणि आधुनिक मोबाइल वेब अनुभवांसाठी मूलभूत आहे. तुम्ही उत्पादन-स्तरीय क्षमता तयार करत आहात.
 
-## स्थिरतेसह डेटा ताजेपणा संतुलित करणे
+**चिंतन प्रश्न**: तुम्ही ही प्रणाली कशी बदलाल जेणेकरून एकाच डिव्हाइसवर अनेक वापरकर्त्यांची खाती हाताळता येतील? गोपनीयता आणि सुरक्षा परिणामांचा विचार करा.
 
-आमची स्थिरता प्रणाली यशस्वीरित्या वापरकर्त्याचे सत्र टिकवून ठेवते, परंतु एक नवीन आव्हान निर्माण करते: डेटा जुना होणे. जेव्हा अनेक वापरकर्ते किंवा अनुप्रयोग समान सर्व्हर डेटा बदलतात, तेव्हा स्थानिक कॅश केलेली माहिती कालबाह्य होते.
+## टिकवून ठेवणे आणि डेटा ताजेपणामध्ये संतुलन राखणे
 
-ही परिस्थिती वायकिंग नेव्हिगेटर्ससारखी आहे ज्यांनी साठवलेल्या ताऱ्यांच्या चार्ट्सवर आणि वर्तमान आकाशीय निरीक्षणांवर अवलंबून राहिले. चार्ट्स सातत्य प्रदान करतात, परंतु बदलत्या परिस्थितींचा विचार करण्यासाठी नेव्हिगेटर्सना ताजी निरीक्षणे आवश्यक असतात. त्याचप्रमाणे, आमच्या अॅप्लिकेशनला स्थिर वापरकर्ता राज्य आणि वर्तमान सर्व्हर डेटा दोन्ही आवश्यक आहेत.
+आपली टिकवून ठेवण्याची प्रणाली यशस्वीरित्या वापरकर्त्याची सत्रे टिकवून ठेवते, परंतु एक नवीन आव्हान निर्माण करते: डेटा जुना होणे. जेव्हा अनेक वापरकर्ते किंवा अ‍ॅप्स समान सर्व्हर डेटा बदलतात, तेव्हा स्थानिक कॅश केलेली माहिती कालबाह्य होते.
 
-**🧪 डेटा ताजेपणा समस्येचा शोध घेणे:**
+ही परिस्थिती वायकिंग नेव्हिगेटर्ससारखी आहे ज्यांनी संग्रहित ताऱ्यांच्या चार्ट्सवर आणि वर्तमान आकाशीय निरीक्षणांवर अवलंबून राहिले. चार्ट्स सातत्य प्रदान करतात, परंतु नेव्हिगेटर्सना बदलत्या परिस्थितींचा विचार करण्यासाठी ताजी निरीक्षणे आवश्यक असतात. त्याचप्रमाणे, आपल्या अ‍ॅप्लिकेशनला टिकाऊ वापरकर्ता स्थिती आणि वर्तमान सर्व्हर डेटा दोन्ही आवश्यक आहे.
+
+**🧪 डेटा ताजेपणाचा समस्या शोधणे:**
 
 1. `test` खाते वापरून डॅशबोर्डमध्ये लॉग इन करा
 2. दुसऱ्या स्रोताकडून व्यवहार अनुकरण करण्यासाठी टर्मिनलमध्ये हा आदेश चालवा:
@@ -362,31 +511,48 @@ curl --request POST \
      http://localhost:5000/api/accounts/test/transactions
 ```
 
-3. तुमच्या ब्राउझरमध्ये डॅशबोर्ड पृष्ठ रीफ्रेश करा
+3. ब्राउझरमध्ये तुमचे डॅशबोर्ड पृष्ठ रीफ्रेश करा
 4. नवीन व्यवहार दिसतो का ते निरीक्षण करा
 
 **ही चाचणी काय दर्शवते:**
-- **दाखवते** की localStorage "जुना" (कालबाह्य) होऊ शकतो
-- **अनुकरण करते** वास्तविक परिस्थिती जिथे डेटा बदल अॅपच्या बाहेर होतो
-- **स्थिरता आणि डेटा ताजेपणामधील तणाव उघड करते**
+- **दाखवते** की स्थानिक संचयन "जुने" (कालबाह्य) होऊ शकते
+- **अनुकरण करते** वास्तविक परिस्थिती जिथे डेटा बदल अ‍ॅपच्या बाहेर होतो
+- **प्रकट करते** टिकवून ठेवणे आणि डेटा ताजेपणामधील तणाव
 
 **डेटा जुना होण्याचे आव्हान:**
 
 | समस्या | कारण | वापरकर्त्याचा परिणाम |
 |--------|-------|-----------------------|
-| **जुना डेटा** | localStorage स्वयंचलितपणे कालबाह्य होत नाही | वापरकर्त्यांना जुनी माहिती दिसते |
-| **सर्व्हर बदल** | इतर अॅप्स/वापरकर्ते समान डेटा बदलतात | प्लॅटफॉर्मवर विसंगत दृश्ये |
-| **कॅश विरुद्ध वास्तव** | स्थानिक कॅश सर्व्हर राज्याशी जुळत नाही | खराब वापरकर्ता अनुभव आणि गोंधळ |
+| **जुना डेटा** | localStorage स्वयंचलितपणे कालबाह्य होत नाही | वापरकर्त्यांना कालबाह्य माहिती दिसते |
+| **सर्व्हर बदल** | इतर अ‍ॅप्स/वापरकर्ते समान डेटा बदलतात | प्लॅटफॉर्म्समध्ये विसंगत दृश्ये |
+| **कॅश वि. वास्तव** | स्थानिक कॅश सर्व्हर स्थितीशी जुळत नाही | खराब वापरकर्ता अनुभव आणि गोंधळ |
 
 **समाधान धोरण:**
 
-आम्ही "लोडवर रीफ्रेश" पॅटर्न अंमलात आणू जो स्थिरतेच्या फायद्यांसह ताज्या डेटाची आवश्यकता संतुलित करतो. हा दृष्टिकोन गुळगुळीत वापरकर्ता अनुभव राखतो आणि डेटा अचूकता सुनिश्चित करतो.
+आम्ही "लोडवर रीफ्रेश" पॅटर्न अंमलात आणू जो टिकवून ठेवण्याचे फायदे आणि ताज्या डेटाची आवश्यकता यामध्ये संतुलन राखतो. हा दृष्टिकोन गुळगुळीत वापरकर्ता अनुभव राखतो आणि डेटा अचूकता सुनिश्चित करतो.
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant A as App
+    participant L as localStorage
+    participant S as Server
+    
+    U->>A: Opens app
+    A->>L: Load saved state
+    L-->>A: Return cached data
+    A->>U: Show UI immediately
+    A->>S: Fetch fresh data
+    S-->>A: Return current data
+    A->>L: Update cache
+    A->>U: Update UI with fresh data
+```
 
 ### कार्य: डेटा रीफ्रेश प्रणाली अंमलात आणा
 
-आम्ही एक प्रणाली तयार करू जी सर्व्हरवरून ताजी डेटा स्वयंचलितपणे आणते आणि आमच्या स्थिर राज्य व्यवस्थापनाचे फायदे राखते.
+आम्ही एक प्रणाली तयार करू जी टिकाऊ राज्य व्यवस्थापनाच्या फायद्यांसह सर्व्हरकडून स्वयंचलितपणे ताजे डेटा प्राप्त करते.
 
-**पायरी 1: खाते डेटा अपडेटर तयार करा**
+**पायरी 1: खाते डेटा अद्यतनकर्ता तयार करा**
 
 ```js
 async function updateAccountData() {
@@ -405,12 +571,12 @@ async function updateAccountData() {
 ```
 
 **या फंक्शनच्या लॉजिकचे समजून घेणे:**
-- **तपासते** की वापरकर्ता सध्या लॉग इन आहे का (state.account अस्तित्वात आहे)
-- **लॉगआउटकडे पुनर्निर्देशित करते** जर वैध सत्र सापडले नाही
-- **सर्व्हरवरून ताजा खाते डेटा आणते** विद्यमान `getAccount()` फंक्शन वापरून
-- **सर्व्हर त्रुटींचे सौम्यपणे हाताळते** अवैध सत्र लॉग आउट करून
-- **ताज्या डेटासह राज्य अद्यतनित करते** आमच्या नियंत्रित अद्यतन प्रणालीचा वापर करून
-- **स्वयंचलित localStorage स्थिरता ट्रिगर करते** `updateState()` फंक्शनद्वारे
+- **तपासते** की सध्या वापरकर्ता लॉग इन आहे का (state.account अस्तित्वात आहे)
+- **वैध सत्र नसल्यास लॉगआउटकडे पुनर्निर्देशित करते**
+- **अस्तित्वात असलेल्या `getAccount()` फंक्शनचा वापर करून सर्व्हरकडून ताजे खाते डेटा प्राप्त करते**
+- **सर्व्हर त्रुटींचा सौम्यपणे सामना करते** अमान्य सत्र लॉग आउट करून
+- **आमच्या नियंत्रित अद्यतन प्रणालीचा वापर करून ताज्या डेटासह राज्य अद्यतनित करते**
+- **`updateState()` फंक्शनद्वारे स्वयंचलित localStorage टिकवून ठेवणे ट्रिगर करते**
 
 **पायरी 2: डॅशबोर्ड रीफ्रेश हँडलर तयार करा**
 
@@ -422,14 +588,14 @@ async function refresh() {
 ```
 
 **हा रीफ्रेश फंक्शन काय साध्य करतो:**
-- **डेटा रीफ्रेश आणि UI अद्यतन प्रक्रिया समन्वयित करते**
-- **ताजा डेटा लोड होईपर्यंत थांबते** डिस्प्ले अद्यतनित करण्यापूर्वी
-- **डॅशबोर्डवर सर्वात वर्तमान माहिती दर्शवते**
+- **डेटा रीफ्रेश आणि UI अद्यतन प्रक्रियेचे समन्वय साधतो**
+- **ताज्या डेटा लोड होईपर्यंत थांबतो** प्रदर्शन अद्यतनित करण्यापूर्वी
+- **डॅशबोर्डवर सर्वात ताजी माहिती दर्शवण्याचे सुनिश्चित करते**
 - **डेटा व्यवस्थापन आणि UI अद्यतनांमध्ये स्वच्छ विभाजन राखते**
 
 **पायरी 3: मार्ग प्रणालीसह समाकलित करा**
 
-ताजी डेटा स्वयंचलितपणे ट्रिगर करण्यासाठी तुमची मार्ग कॉन्फिगरेशन अद्यतनित करा:
+डॅशबोर्ड मार्ग लोड झाल्यावर स्वयंचलितपणे रीफ्रेश ट्रिगर करण्यासाठी तुमची मार्ग कॉन्फिगरेशन अद्यतनित करा:
 
 ```js
 const routes = {
@@ -439,68 +605,91 @@ const routes = {
 ```
 
 **ही समाकलन कसे कार्य करते:**
-- **डॅशबोर्ड मार्ग लोड होईल तेव्हा रीफ्रेश फंक्शन अंमलात आणते**
-- **वापरकर्ते डॅशबोर्डवर नेव्हिगेट करताना ताजा डेटा नेहमी प्रदर्शित करते**
-- **डेटा ताजेपणा जोडताना विद्यमान मार्ग संरचना राखते**
-- **मार्ग-विशिष्ट प्रारंभिकतेसाठी सुसंगत पॅटर्न प्रदान करते**
+- **डॅशबोर्ड मार्गावर नेव्हिगेट केल्यावर प्रत्येक वेळी रीफ्रेश फंक्शन अंमलात आणते**
+- **ताज्या डेटा नेहमी प्रदर्शित होतो याची खात्री करते**
+- **डेटा ताजेपण जोडताना विद्यमान मार्ग संरचना राखते**
+- **मार्ग-विशिष्ट प्रारंभिक अंमलबजावणीसाठी सुसंगत पॅटर्न प्रदान करते**
 
-**तुमच्या डेटा रीफ्रेश प्रणालीची चाचणी करणे:**
+**तुमच्या डेटा रीफ्रेश प्रणालीची चाचणी:**
 
-1. तुमच्या बँकिंग अॅपमध्ये लॉग इन करा
+1. तुमच्या बँकिंग अ‍ॅपमध्ये लॉग इन करा
 2. नवीन व्यवहार तयार करण्यासाठी पूर्वीचा curl आदेश चालवा
-3. तुमचे डॅशबोर्ड पृष्ठ रीफ्रेश करा किंवा दूर जा आणि परत या
-4. खात्री करा की नवीन व्यवहार त्वरित दिसतो
+3. तुमचे डॅशबोर्ड पृष्ठ रीफ्रेश करा किंवा दुसऱ्या पृष्ठावर जा आणि परत या
+4. नवीन व्यवहार त्वरित दिसतो का ते खात्री करा
+
+🎉 **परिपूर्ण संतुलन साध्य केले**: तुमचे अ‍ॅप आता टिकाऊ राज्याचा गुळगुळीत अनुभव आणि ताज्या सर्व्हर डेटाची अचूकता यांचे संयोजन करते!
+
+## 📈 तुमची राज्य व्यवस्थापन कौशल्याची टाइमलाइन
+
+```mermaid
+timeline
+    title Professional State Management Journey
+    
+    section Problem Recognition
+        State Issues Diagnosis
+            : Identify session loss problems
+            : Understand scattered update issues
+            : Recognize architectural needs
+    
+    section Architecture Foundation
+        Centralized State Design
+            : Create unified state objects
+            : Implement controlled update patterns
+            : Establish immutable principles
+        
+        Predictable Updates
+            : Master Object.freeze() usage
+            : Build debug-friendly systems
+            : Create scalable patterns
+    
+    section Persistence Mastery
+        localStorage Integration
+            : Handle JSON serialization
+            : Implement automatic synchronization
+            : Create session continuity
+        
+        Data Freshness Balance
+            : Address staleness challenges
+            : Build refresh mechanisms
+            : Optimize performance vs accuracy
+    
+    section Professional Patterns
+        Production-Ready Systems
+            : Implement error handling
+            : Create maintainable architectures
+            : Follow industry best practices
+        
+        Advanced Capabilities
+            : Ready for framework integration
+            : Prepared for complex state needs
+            : Foundation for real-time features
+```
+
+**🎓 पदवी मिळवण्याचा टप्पा**: तुम्ही Redux, Vuex, आणि इतर व्यावसायिक राज्य लायब्ररींच्या शक्तीचा उपयोग करून संपूर्ण राज्य व्यवस्थापन प्रणाली तयार केली आहे. हे पॅटर्न साध्या अ‍ॅप्सपासून एंटरप्राइज अ‍ॅप्लिकेशन्सपर्यंत स्केल होतात.
 
-🎉 **परिपूर्ण संतुलन साध्य केले**: तुमचे अॅप आता स्थिर राज्याचा गुळगुळीत अनुभव आणि ताज्या सर्व्हर डेटाची अचूकता एकत्र करते!
+**🔄 पुढील स्तर क्षमता**:
+- राज्य व्यवस्थापन फ्रेमवर्क (Redux, Zustand, Pinia) मास्टर करण्यासाठी तयार
+- WebSockets सह रिअल-टाइम वैशिष्ट्ये अंमलात आणण्यासाठी तयार
+- ऑफलाइन-प्रथम प्रोग्रेसिव वेब अ‍ॅप्स तयार करण्यासाठी सुसज्ज
+- प्रगत पॅटर्नसाठी पाया सेट केला आहे जसे की राज्य मशीन आणि निरीक्षक
 
 ## GitHub Copilot Agent Challenge 🚀
 
 Agent मोड वापरून खालील आव्हान पूर्ण करा:
 
-**वर्णन:** बँकिंग अॅपसाठी undo/redo कार्यक्षमतेसह व्यापक राज्य व्यवस्थापन प्रणाली अंमलात आणा. हे आव्हान तुम्हाला प्रगत राज्य व्यवस्थापन संकल्पना सराव करण्यास मदत करेल ज्यामध्ये राज्य इतिहास ट्रॅकिंग, अपरिवर्तनीय अद्यतने आणि वापरकर्ता इंटरफेस समक्रमण समाविष्ट आहे.
+**वर्णन:** बँकिंग अ‍ॅपसाठी undo/redo कार्यक्षमतेसह व्यापक राज्य व्यवस्थापन प्रणाली अंमलात आणा. हे आव्हान तुम्हाला प्रगत राज्य व्यवस्थापन संकल्पना सराव करण्यास मदत करेल ज्यामध्ये राज्य इतिहास ट्रॅकिंग, अपरिवर्तनीय अद्यतने, आणि वापरकर्ता इंटरफेस समक्रमण समाविष्ट आहे.
 
-**प्रॉम्प्ट:** एक सुधारित राज्य व्यवस्थापन प्रणाली तयार करा ज्यामध्ये: 1) सर्व पूर्वीच्या राज्यांचा मागोवा घेणारा राज्य इतिहास अॅरे, 2) पूर्वीच्या राज्यांवर परत जाण्यासाठी undo आणि redo फंक्शन्स, 3) डॅशबोर्डवर undo/redo ऑपरेशन्ससाठी UI बटणे, 4) मेमरी समस्यांपासून बचाव करण्यासाठी 10 राज्यांचा कमाल इतिहास मर्यादा, आणि 5) वापरकर्ता लॉग आउट झाल्यावर इतिहासाची योग्य साफसफाई. खात्री करा की undo/redo कार्यक्षमता खाते शिल्लक बदलांसह कार्य करते आणि ब्राउझर रीफ्रेशमध्ये टिकून राहते.
+**प्रॉम्प्ट:** एक सुधारित राज्य व्यवस्थापन प्रणाली तयार करा ज्यामध्ये: 1) सर्व पूर्वीच्या राज्यांचा ट्रॅक ठेवणारा राज्य इतिहास अ‍ॅरे, 2) पूर्वीच्या राज्यांवर परत जाण्यासाठी undo आणि redo फंक्शन्स, 3) डॅशबोर्डवर undo/redo ऑपरेशन्ससाठी UI बटणे, 4) मेमरी समस्यांपासून बचाव करण्यासाठी 10 राज्यांचा कमाल इतिहास मर्यादा, आणि 5) वापरकर्ता लॉग आउट झाल्यावर इतिहासाची योग्य साफसफाई. खात्री करा की undo/redo कार्यक्षमता खाते शिल्लक बदलांसह कार्य करते आणि ब्राउझर रीफ्रेशेसमध्ये टिकते.
 
 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
-## 🚀 आव्हान: स्टोरेज ऑप्टिमायझेशन
-
-तुमची अंमलबजावणी आता वापरकर्ता सत्र, डेटा रीफ्रेश आणि राज्य व्यवस्थापन प्रभावीपणे हाताळते. तथापि, विचार करा की आमचा सध्याचा दृष्टिकोन स्टोरेज कार्यक्षमता आणि कार्यक्षमतेचे संतुलन योग्य प्रकारे राखतो का.
-
-जसे बुद्धिबळ मास्टर्स आवश्यक तुकड्यांमध्ये आणि खर्च करण्यायोग्य प्याद्यांमध्ये फरक करतात, प्रभावी राज्य व्यवस्थापनासाठी कोणता डेटा टिकवून ठेवायचा आहे आणि कोणता नेहमी सर्व्हरवरून ताजा असावा हे ओळखणे आवश्यक आहे.
-
-**ऑप्टिमायझेशन विश्लेषण:**
-
-तुमच्या सध्याच्या localStorage अंमलबजावणीचे मूल्यांकन करा आणि या धोरणात्मक प्रश्नांचा विचार करा:
-- वापरकर्ता प्रमाणीकरण टिकवून ठेवण्यासाठी आवश्यक किमान माहिती काय आहे?
-- कोणता डेटा इतक्या वारंवार बदलतो की स्थानिक कॅशिंगचा फारसा फायदा होत नाही?
-- स्टोरेज ऑप्टिमायझेशन वापरकर्ता अनुभव खराब न करता कार्यक्षमता कशी सुधारू शकते?
-
-**अंमलबजावणी धोरण:**
-- **आवश्यक डेटा ओळखा** जो टिकवून ठेवला पाहिजे (बहुधा फक्त वापरकर्ता ओळख)
-- **तुमची localStorage अंमलबजावणी सुधारित करा** फक्त महत्त्वपूर्ण सत्र डेटा साठवण्यासाठी
-- **ताजा डेटा नेहमी सर्व्हरवरून लोड करा** डॅशबोर्ड भेटीवर
-- **चाचणी करा** की तुमचा ऑप्टिमाइझ केलेला दृष्टिकोन समान वापरकर्ता अनुभव राखतो
-
-**प्रगत विचार:**
-- **पूर्ण खाते डेटा साठवणे आणि फक्त प्रमाणीकरण टोकन साठवणे यामधील व्यापार-उतारांचा तुलना करा**
-- **तुमचे निर्णय आणि भविष्यातील टीम सदस्यांसाठी कारणे दस्तऐवजीकरण करा**
-
-हे आव्हान तुम्हाला एक व्यावसायिक विकसकासारखे विचार करण्यास मदत करेल जो त्यांच्या उपायांमध्ये कार्यक्षमता आणि कार्यक्षमतेचा विचार करतो. वेगवेगळ्या दृष्टिकोनांसह प्रयोग करण्यासाठी तुमचा वेळ घ्या!
-
-## पोस्ट-लेक्चर क्विझ
-
-[पोस्ट-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/48)
-
-## असाइनमेंट
-
-["Add transaction" डायलॉग अंमलात आणा](assignment.md)
+## 🚀 आव्हान: संचयन ऑप्टिमायझेशन
 
-असाइनमेंट पूर्ण केल्यानंतरचे उदाहरण परिणाम:
+तुमची अंमलबजावणी आता वापरकर्ता सत्रे, डेटा रीफ्रेश, आणि राज्य व्यवस्थापन प्रभावीपणे हाताळते. तथापि, आमचा सध्याचा दृष्टिकोन कार्यक्षमतेसह कार्यक्षमता संतुलित करतो का याचा विचार करा.
 
-!["Add transaction" डायलॉगचे उदाहरण स्क्रीनशॉट](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.mr.png)
+जसे बुद्धिबळ मास्टर्स आवश्यक तुकड्यांमध्ये आणि खर्च करण्यायोग्य प्याद्यांमध्ये फरक करतात, प्रभावी राज्य व्यवस्थापनासाठी कोणता डेटा टिकवून ठेवणे आवश्यक आहे
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयाः लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/8-code-editor/1-using-a-code-editor/README.md b/translations/mr/8-code-editor/1-using-a-code-editor/README.md
index a98ef164b6..16cc82c832 100644
--- a/translations/mr/8-code-editor/1-using-a-code-editor/README.md
+++ b/translations/mr/8-code-editor/1-using-a-code-editor/README.md
@@ -1,45 +1,152 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "cfd4a15974168ca426d50c67682ab9d4",
-  "translation_date": "2025-10-22T15:50:53+00:00",
+  "original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
+  "translation_date": "2025-11-03T14:17:13+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/README.md",
   "language_code": "mr"
 }
 -->
 # कोड एडिटर वापरणे: VSCode.dev मध्ये प्राविण्य मिळवा
 
-*द मॅट्रिक्स* मध्ये निओला डिजिटल जगात प्रवेश करण्यासाठी मोठ्या संगणक टर्मिनलमध्ये प्लग इन करावे लागले होते, हे लक्षात आहे का? आजचे वेब विकास साधने याच्या अगदी उलट आहेत – अत्यंत शक्तिशाली क्षमता कुठूनही उपलब्ध. VSCode.dev हा ब्राउझर-आधारित कोड एडिटर आहे जो कोणत्याही इंटरनेट कनेक्शन असलेल्या डिव्हाइसवर व्यावसायिक विकास साधने आणतो.
+*द मॅट्रिक्स* मध्ये निओला डिजिटल जगात प्रवेश करण्यासाठी मोठ्या संगणक टर्मिनलमध्ये प्लग इन करावे लागले होते, हे लक्षात आहे का? आजचे वेब विकास साधने याच्या अगदी उलट आहेत – अत्यंत शक्तिशाली क्षमता कुठूनही उपलब्ध आहेत. VSCode.dev हा ब्राउझर-आधारित कोड एडिटर आहे जो कोणत्याही इंटरनेट कनेक्शन असलेल्या डिव्हाइसवर व्यावसायिक विकास साधने आणतो.
 
-जसे छपाई यंत्राने पुस्तके सर्वांसाठी उपलब्ध केली, फक्त मठातील लेखकांसाठी नाही, तसेच VSCode.dev कोडिंगला लोकशाही बनवते. तुम्ही लायब्ररीच्या संगणकावर, शाळेच्या लॅबमध्ये किंवा ब्राउझर प्रवेश असलेल्या कोणत्याही ठिकाणी प्रकल्पांवर काम करू शकता. कोणतीही स्थापना नाही, कोणतेही "माझ्या विशिष्ट सेटअपची गरज आहे" मर्यादा नाहीत.
+जसे छपाई यंत्राने पुस्तकं सर्वांसाठी उपलब्ध केली, फक्त मठातील लेखकांसाठी नाही, तसेच VSCode.dev कोडिंगला लोकशाहीसाठी खुले करते. तुम्ही लायब्ररीच्या संगणकावर, शाळेच्या प्रयोगशाळेत किंवा ब्राउझर प्रवेश असलेल्या कोणत्याही ठिकाणी प्रकल्पांवर काम करू शकता. कोणतीही स्थापना नाही, कोणतेही "माझ्या विशिष्ट सेटअपची गरज आहे" असे बंधन नाही.
 
-या धड्याच्या शेवटी, तुम्हाला VSCode.dev नेव्हिगेट कसे करायचे, GitHub रिपॉझिटरी थेट ब्राउझरमध्ये उघडायची आणि Git वापरून व्हर्जन कंट्रोल कसे करायचे हे समजेल – व्यावसायिक विकासक दररोज अवलंबून असलेल्या सर्व कौशल्ये.
+या धड्याच्या शेवटी, तुम्हाला VSCode.dev नेव्हिगेट कसे करायचे, GitHub रिपॉझिटरी थेट ब्राउझरमध्ये उघडायची आणि Git वापरून व्हर्जन कंट्रोल कसे करायचे हे समजेल – व्यावसायिक विकासक दररोज अवलंबून असलेल्या कौशल्ये.
+
+## ⚡ पुढील ५ मिनिटांत तुम्ही काय करू शकता
+
+**व्यस्त विकासकांसाठी जलद सुरुवात मार्ग**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Visit vscode.dev]
+    B --> C[Connect GitHub account]
+    C --> D[Open any repository]
+    D --> E[Start editing immediately]
+```
+
+- **पहिला मिनिट**: [vscode.dev](https://vscode.dev) वर जा - कोणतीही स्थापना आवश्यक नाही
+- **दुसरा मिनिट**: GitHub सह साइन इन करा आणि तुमच्या रिपॉझिटरी कनेक्ट करा
+- **तिसरा मिनिट**: URL ट्रिक वापरून पहा: कोणत्याही रिपॉझिटरी URL मध्ये `github.com` ला `vscode.dev/github` मध्ये बदला
+- **चौथा मिनिट**: नवीन फाइल तयार करा आणि सिंटॅक्स हायलाइटिंग आपोआप कार्य करताना पहा
+- **पाचवा मिनिट**: बदल करा आणि Source Control पॅनेलद्वारे ते कमिट करा
+
+**जलद चाचणी URL**:
+```
+# Transform this:
+github.com/microsoft/Web-Dev-For-Beginners
+
+# Into this:
+vscode.dev/github/microsoft/Web-Dev-For-Beginners
+```
+
+**महत्त्व का आहे**: ५ मिनिटांत, तुम्ही व्यावसायिक साधनांसह कोठूनही कोडिंग करण्याचा अनुभव घ्याल. हे विकासाचे भविष्य दर्शवते - प्रवेशयोग्य, शक्तिशाली आणि त्वरित.
+
+## 🗺️ क्लाउड-आधारित विकासामधील तुमचा शिक्षण प्रवास
+
+```mermaid
+journey
+    title From Local Setup to Cloud Development Mastery
+    section Understanding the Platform
+      Discover web-based editing: 4: You
+      Connect to GitHub ecosystem: 6: You
+      Master interface navigation: 7: You
+    section File Management Skills
+      Create and organize files: 5: You
+      Edit with syntax highlighting: 7: You
+      Navigate project structures: 8: You
+    section Version Control Mastery
+      Understand Git integration: 6: You
+      Practice commit workflows: 8: You
+      Master collaboration patterns: 9: You
+    section Professional Customization
+      Install powerful extensions: 7: You
+      Configure development environment: 8: You
+      Build personal workflows: 9: You
+```
+
+**तुमचा प्रवासाचा गंतव्य**: या धड्याच्या शेवटी, तुम्ही कोणत्याही डिव्हाइसवरून कार्य करणारे व्यावसायिक क्लाउड विकास वातावरण मास्टर केले असेल, जे तुम्हाला प्रमुख तंत्रज्ञान कंपन्यांतील विकासक वापरत असलेल्या साधनांसह कोड करण्यास सक्षम करते.
 
 ## तुम्ही काय शिकाल
 
-आपण हे एकत्र चालून गेल्यानंतर, तुम्ही हे करू शकाल:
+आपण हे एकत्रितपणे चालविल्यानंतर, तुम्ही हे करू शकाल:
 
-- VSCode.dev नेव्हिगेट करा जणू ते तुमचे दुसरे घर आहे – तुम्हाला आवश्यक असलेले सर्व काही न हरवता शोधा
-- कोणतीही GitHub रिपॉझिटरी तुमच्या ब्राउझरमध्ये उघडा आणि त्वरित संपादन सुरू करा (हे खूप जादुई आहे!)
-- Git वापरून तुमचे बदल ट्रॅक करा आणि तुमची प्रगती व्यावसायिकासारखी जतन करा
-- कोडिंग जलद आणि मजेदार बनवणाऱ्या एक्स्टेंशन्ससह तुमचा एडिटर सुपरचार्ज करा
-- प्रकल्प फाइल्स आत्मविश्वासाने तयार करा आणि व्यवस्थित करा
+- VSCode.dev नेव्हिगेट करा जणू ते तुमचे दुसरे घर आहे – तुम्हाला आवश्यक असलेले सर्व काही न सापडता शोधा
+- कोणतीही GitHub रिपॉझिटरी ब्राउझरमध्ये उघडा आणि त्वरित संपादन सुरू करा (हे खूप जादुई आहे!)
+- Git वापरून तुमचे बदल ट्रॅक करा आणि व्यावसायिकासारखे तुमची प्रगती जतन करा
+- कोडिंग जलद आणि मजेदार बनवणाऱ्या एक्सटेंशन्ससह तुमचा एडिटर सुपरचार्ज करा
+- आत्मविश्वासाने प्रकल्प फाइल्स तयार करा आणि आयोजित करा
 
-## तुम्हाला काय लागेल
+## तुम्हाला काय आवश्यक आहे
 
-आवश्यकता सोप्या आहेत:
+आवश्यकता सोपी आहेत:
 
-- एक विनामूल्य [GitHub खाते](https://github.com) (आवश्यक असल्यास आम्ही तयार करण्यात मार्गदर्शन करू)
+- एक विनामूल्य [GitHub खाते](https://github.com) (आवश्यक असल्यास आम्ही तुम्हाला तयार करण्यात मार्गदर्शन करू)
 - वेब ब्राउझरची मूलभूत ओळख
 - GitHub बेसिक्स धडा उपयुक्त पार्श्वभूमी प्रदान करतो, जरी तो आवश्यक नाही
 
 > 💡 **GitHub साठी नवीन?** खाते तयार करणे विनामूल्य आहे आणि काही मिनिटांत पूर्ण होते. जसे लायब्ररी कार्ड तुम्हाला जगभरातील पुस्तकांमध्ये प्रवेश देते, तसे GitHub खाते तुम्हाला इंटरनेटवरील कोड रिपॉझिटरीमध्ये प्रवेश देते.
 
+## 🧠 क्लाउड विकास इकोसिस्टमचा आढावा
+
+```mermaid
+mindmap
+  root((VSCode.dev Mastery))
+    Platform Benefits
+      Accessibility
+        Device Independence
+        No Installation Required
+        Instant Updates
+        Universal Access
+      Integration
+        GitHub Connection
+        Repository Sync
+        Settings Persistence
+        Collaboration Ready
+    Development Workflow
+      File Management
+        Project Structure
+        Syntax Highlighting
+        Multi-tab Editing
+        Auto-save Features
+      Version Control
+        Git Integration
+        Commit Workflows
+        Branch Management
+        Change Tracking
+    Customization Power
+      Extensions Ecosystem
+        Productivity Tools
+        Language Support
+        Theme Options
+        Custom Shortcuts
+      Environment Setup
+        Personal Preferences
+        Workspace Configuration
+        Tool Integration
+        Workflow Optimization
+    Professional Skills
+      Industry Standards
+        Version Control
+        Code Quality
+        Collaboration
+        Documentation
+      Career Readiness
+        Remote Work
+        Cloud Development
+        Team Projects
+        Open Source
+```
+
+**मुख्य तत्त्व**: क्लाउड-आधारित विकास वातावरण कोडिंगचे भविष्य दर्शवते - व्यावसायिक दर्जाचे साधने प्रदान करणे जे प्रवेशयोग्य, सहयोगी आणि प्लॅटफॉर्म-स्वतंत्र आहेत.
+
 ## वेब-आधारित कोड एडिटर का महत्त्वाचे आहेत
 
-इंटरनेटच्या आधी, वेगवेगळ्या विद्यापीठांतील वैज्ञानिकांना संशोधन सहजपणे शेअर करता येत नव्हते. मग 1960 च्या दशकात ARPANET आले, ज्याने अंतरावर संगणक जोडले. वेब-आधारित कोड एडिटर याच तत्त्वाचे अनुसरण करतात – शक्तिशाली साधने तुमच्या भौतिक स्थान किंवा डिव्हाइसच्या मर्यादेशिवाय उपलब्ध करणे.
+इंटरनेटच्या आधी, वेगवेगळ्या विद्यापीठांतील वैज्ञानिकांना संशोधन सहजपणे शेअर करता येत नव्हते. मग १९६० च्या दशकात ARPANET आले, ज्याने अंतरावर संगणकांना जोडले. वेब-आधारित कोड एडिटर याच तत्त्वाचे अनुसरण करतात – शक्तिशाली साधने तुमच्या भौतिक स्थान किंवा डिव्हाइसच्या मर्यादेपासून स्वतंत्रपणे उपलब्ध करणे.
 
-कोड एडिटर तुमचे विकास कार्यक्षेत्र म्हणून काम करते, जिथे तुम्ही कोड फाइल्स लिहिता, संपादित करता आणि व्यवस्थित करता. साध्या टेक्स्ट एडिटरच्या विपरीत, व्यावसायिक कोड एडिटर सिंटॅक्स हायलाइटिंग, त्रुटी शोधणे आणि प्रकल्प व्यवस्थापन वैशिष्ट्ये प्रदान करतात.
+कोड एडिटर तुमचे विकास कार्यक्षेत्र म्हणून काम करते, जिथे तुम्ही कोड फाइल्स लिहिता, संपादित करता आणि आयोजित करता. साध्या टेक्स्ट एडिटरपेक्षा वेगळे, व्यावसायिक कोड एडिटर सिंटॅक्स हायलाइटिंग, त्रुटी शोधणे आणि प्रकल्प व्यवस्थापन वैशिष्ट्ये प्रदान करतात.
 
 VSCode.dev या क्षमतांना तुमच्या ब्राउझरमध्ये आणते:
 
@@ -47,67 +154,88 @@ VSCode.dev या क्षमतांना तुमच्या ब्रा
 
 | वैशिष्ट्य | वर्णन | व्यावहारिक फायदा |
 |---------|-------------|----------|
-| **प्लॅटफॉर्म इंडिपेंडन्स** | कोणत्याही ब्राउझर असलेल्या डिव्हाइसवर चालते | वेगवेगळ्या संगणकांवर सहज काम करा |
+| **प्लॅटफॉर्म स्वतंत्रता** | कोणत्याही ब्राउझर असलेल्या डिव्हाइसवर चालते | वेगवेगळ्या संगणकांवर सहज काम करा |
 | **स्थापना आवश्यक नाही** | वेब URL द्वारे प्रवेश | सॉफ्टवेअर स्थापना निर्बंध टाळा |
-| **स्वयंचलित अद्यतने** | नेहमी नवीनतम आवृत्ती चालते | मॅन्युअल अद्यतनांशिवाय नवीन वैशिष्ट्ये मिळवा |
-| **रिपॉझिटरी इंटिग्रेशन** | GitHub शी थेट कनेक्शन | स्थानिक फाइल व्यवस्थापनाशिवाय कोड संपादित करा |
+| **स्वयंचलित अद्यतने** | नेहमी नवीनतम आवृत्ती चालवते | मॅन्युअल अद्यतनांशिवाय नवीन वैशिष्ट्ये प्रवेश करा |
+| **रिपॉझिटरी एकत्रीकरण** | GitHub शी थेट कनेक्शन | स्थानिक फाइल व्यवस्थापनाशिवाय कोड संपादित करा |
 
 **व्यावहारिक परिणाम:**
 - वेगवेगळ्या वातावरणांमध्ये कामाची सातत्यता
-- ऑपरेटिंग सिस्टमच्या मर्यादेशिवाय सुसंगत इंटरफेस
+- ऑपरेटिंग सिस्टमच्या मर्यादेपासून स्वतंत्र इंटरफेस
 - त्वरित सहयोग क्षमता
 - स्थानिक स्टोरेज आवश्यकता कमी
 
 ## VSCode.dev एक्सप्लोर करणे
 
-जसे मेरी क्युरीचे प्रयोगशाळा साध्या जागेत अत्याधुनिक उपकरणे होती, तसेच VSCode.dev ब्राउझर इंटरफेसमध्ये व्यावसायिक विकास साधने पॅक करते. ही वेब अ‍ॅप्लिकेशन डेस्कटॉप कोड एडिटरप्रमाणेच मुख्य कार्यक्षमता प्रदान करते.
+जसे मेरी क्युरीचे प्रयोगशाळा साध्या जागेत अत्याधुनिक उपकरणे होती, तसेच VSCode.dev व्यावसायिक विकास साधने ब्राउझर इंटरफेसमध्ये पॅक करते. ही वेब अॅप्लिकेशन डेस्कटॉप कोड एडिटरच्या समान मुख्य कार्यक्षमता प्रदान करते.
 
-तुमच्या ब्राउझरमध्ये [vscode.dev](https://vscode.dev) वर नेव्हिगेट करून प्रारंभ करा. इंटरफेस डाउनलोड किंवा सिस्टम स्थापना न करता लोड होते – क्लाउड कंप्युटिंग तत्त्वांचा थेट अनुप्रयोग.
+[VSCode.dev](https://vscode.dev) वर ब्राउझरमध्ये जा. इंटरफेस कोणत्याही डाउनलोड किंवा सिस्टम स्थापनेशिवाय लोड होते – क्लाउड कंप्युटिंग तत्त्वांचा थेट अनुप्रयोग.
 
 ### तुमचे GitHub खाते कनेक्ट करणे
 
-जसे अलेक्झांडर ग्रॅहम बेलचा टेलिफोन दूरस्थ ठिकाणे जोडतो, तसे तुमचे GitHub खाते लिंक करणे VSCode.dev ला तुमच्या कोड रिपॉझिटरीशी जोडते. GitHub सह साइन इन करण्यास सांगितले असता, हे कनेक्शन स्वीकारणे शिफारसीय आहे.
+जसे अलेक्झांडर ग्रॅहम बेलचा टेलिफोन दूरस्थ ठिकाणांना जोडतो, तसे तुमचे GitHub खाते लिंक करणे VSCode.dev ला तुमच्या कोड रिपॉझिटरीशी जोडते. GitHub सह साइन इन करण्यास सांगितले असता, हे कनेक्शन स्वीकारणे शिफारसीय आहे.
 
-**GitHub इंटिग्रेशन प्रदान करते:**
-- एडिटरमध्ये तुमच्या रिपॉझिटरींमध्ये थेट प्रवेश
-- डिव्हाइसवर समक्रमित सेटिंग्ज आणि एक्स्टेंशन्स
-- GitHub वर जतन करण्यासाठी सुलभ कार्यप्रवाह
+**GitHub एकत्रीकरण प्रदान करते:**
+- संपादकामध्ये तुमच्या रिपॉझिटरींना थेट प्रवेश
+- डिव्हाइसवर समक्रमित सेटिंग्ज आणि एक्सटेंशन्स
+- GitHub वर जतन करण्यासाठी सुलभ वर्कफ्लो
 - वैयक्तिकृत विकास वातावरण
 
 ### तुमच्या नवीन कार्यक्षेत्राशी परिचित होणे
 
-सर्व काही लोड झाल्यानंतर, तुम्हाला एक सुंदर स्वच्छ कार्यक्षेत्र दिसेल जे तुम्हाला महत्त्वाच्या गोष्टींवर लक्ष केंद्रित ठेवण्यासाठी डिझाइन केले आहे – तुमचा कोड!
+सर्व काही लोड झाल्यावर, तुम्हाला एक सुंदर स्वच्छ कार्यक्षेत्र दिसेल जे तुम्हाला महत्त्वाच्या गोष्टींवर लक्ष केंद्रित ठेवण्यासाठी डिझाइन केले आहे – तुमचा कोड!
 
 ![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.mr.png)
 
 **तुमच्या परिसराचा दौरा:**
-- **अ‍ॅक्टिव्हिटी बार** (डाव्या बाजूचा पट्टा): तुमची मुख्य नेव्हिगेशन एक्सप्लोरर 📁, शोध 🔍, सोर्स कंट्रोल 🌿, एक्स्टेंशन्स 🧩, आणि सेटिंग्ज ⚙️
+- **अॅक्टिव्हिटी बार** (डाव्या बाजूचा पट्टा): तुमची मुख्य नेव्हिगेशन Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, आणि Settings ⚙️ सह
 - **साइडबार** (त्याच्या शेजारी असलेला पॅनेल): तुम्ही निवडलेल्या गोष्टींवर आधारित संबंधित माहिती दर्शविण्यासाठी बदलतो
 - **एडिटर एरिया** (मधला मोठा जागा): येथेच जादू होते – तुमचे मुख्य कोडिंग क्षेत्र
 
 **थोडा वेळ एक्सप्लोर करा:**
-- त्या अ‍ॅक्टिव्हिटी बार आयकॉनवर क्लिक करा आणि प्रत्येकाने काय केले ते पहा
-- साइडबार वेगवेगळ्या माहिती दर्शविण्यासाठी कसा अपडेट होतो ते लक्षात घ्या – खूप छान, बरोबर?
-- एक्सप्लोरर दृश्य (📁) कदाचित जिथे तुम्ही तुमचा जास्त वेळ घालवाल, त्यामुळे त्यासह आरामदायक व्हा
+- त्या अॅक्टिव्हिटी बार आयकॉनवर क्लिक करा आणि प्रत्येक काय करते ते पहा
+- साइडबार वेगवेगळ्या माहिती दर्शविण्यासाठी कसे अपडेट होते ते पहा – खूप छान, नाही का?
+- Explorer दृश्य (📁) कदाचित तुम्ही तुमचा जास्त वेळ घालवाल, त्यामुळे त्यासह आरामदायक व्हा
+
+```mermaid
+flowchart TB
+    subgraph "VSCode.dev Interface Architecture"
+        A[Activity Bar] --> B[Explorer 📁]
+        A --> C[Search 🔍]
+        A --> D[Source Control 🌿]
+        A --> E[Extensions 🧩]
+        A --> F[Settings ⚙️]
+        
+        B --> G[File Tree]
+        C --> H[Find & Replace]
+        D --> I[Git Status]
+        E --> J[Extension Marketplace]
+        F --> K[Configuration]
+        
+        L[Sidebar] --> M[Context Panel]
+        N[Editor Area] --> O[Code Files]
+        P[Terminal/Output] --> Q[Command Line]
+    end
+```
 
 ## GitHub रिपॉझिटरी उघडणे
 
-इंटरनेटच्या आधी, संशोधकांना दस्तऐवजांमध्ये प्रवेश करण्यासाठी शारीरिकरित्या लायब्ररीत जावे लागले. GitHub रिपॉझिटरी त्याचप्रमाणे कार्य करतात – ते दूरस्थपणे संग्रहित कोडचे संग्रह आहेत. VSCode.dev स्थानिक मशीनवर रिपॉझिटरी डाउनलोड करण्याच्या पारंपरिक चरणाशिवाय संपादन करण्यासाठी त्वरित प्रवेश सक्षम करते.
+इंटरनेटच्या आधी, संशोधकांना दस्तऐवजांमध्ये प्रवेश करण्यासाठी लायब्ररीमध्ये शारीरिक प्रवास करावा लागायचा. GitHub रिपॉझिटरी त्याचप्रमाणे कार्य करतात – ते दूरस्थपणे संग्रहित कोडचे संग्रह आहेत. VSCode.dev पारंपरिक पायरी काढून टाकते ज्यामध्ये स्थानिक मशीनवर रिपॉझिटरी डाउनलोड करणे आवश्यक होते.
 
 ही क्षमता कोणत्याही सार्वजनिक रिपॉझिटरीमध्ये त्वरित प्रवेश सक्षम करते, पाहण्यासाठी, संपादित करण्यासाठी किंवा योगदान देण्यासाठी. रिपॉझिटरी उघडण्यासाठी येथे दोन पद्धती आहेत:
 
-### पद्धत 1: पॉइंट-आणि-क्लिक मार्ग
+### पद्धत १: पॉइंट-आणि-क्लिक मार्ग
 
-जेव्हा तुम्ही VSCode.dev मध्ये नवीन सुरुवात करत असता आणि विशिष्ट रिपॉझिटरी उघडायची असते तेव्हा हे परिपूर्ण आहे. हे सोपे आणि नवशिक्यांसाठी अनुकूल आहे:
+VSCode.dev मध्ये नवीन सुरुवात करत असताना आणि विशिष्ट रिपॉझिटरी उघडायची असल्यास हे परिपूर्ण आहे. हे सोपे आणि नवशिक्यांसाठी अनुकूल आहे:
 
 **हे कसे करायचे:**
 
-1. [vscode.dev](https://vscode.dev) वर जा जर तुम्ही आधीच तिथे नसाल
-2. स्वागत स्क्रीनवर "ओपन रिमोट रिपॉझिटरी" बटण शोधा आणि त्यावर क्लिक करा
+1. [VSCode.dev](https://vscode.dev) वर जा जर तुम्ही आधीपासून तिथे नसाल
+2. स्वागत स्क्रीनवरील "Open Remote Repository" बटण शोधा आणि त्यावर क्लिक करा
 
    ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.mr.png)
 
-3. कोणत्याही GitHub रिपॉझिटरी URL मध्ये पेस्ट करा (हे वापरून पहा: `https://github.com/microsoft/Web-Dev-For-Beginners`)
+3. कोणत्याही GitHub रिपॉझिटरी URL पेस्ट करा (हे वापरून पहा: `https://github.com/microsoft/Web-Dev-For-Beginners`)
 4. Enter दाबा आणि जादू पहा!
 
 **प्रो टिप - कमांड पॅलेट शॉर्टकट:**
@@ -116,15 +244,15 @@ VSCode.dev या क्षमतांना तुमच्या ब्रा
 
 ![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.mr.png)
 
-**कमांड पॅलेट म्हणजे तुम्ही करू शकता अशा प्रत्येक गोष्टीसाठी शोध इंजिन असण्यासारखे आहे:**
-- "ओपन रिमोट" टाइप करा आणि ते तुमच्यासाठी रिपॉझिटरी ओपनर शोधेल
+**कमांड पॅलेट म्हणजे तुम्ही करू शकता अशा प्रत्येक गोष्टीसाठी शोध इंजिन असल्यासारखे आहे:**
+- "open remote" टाइप करा आणि ते तुमच्यासाठी रिपॉझिटरी ओपनर शोधेल
 - तुम्ही अलीकडे उघडलेल्या रिपॉझिटरी लक्षात ठेवते (खूप उपयुक्त!)
-- एकदा तुम्ही याचा वापर करण्यास सुरुवात केली की, तुम्हाला कोडिंग वीजेच्या वेगाने वाटेल
-- हे मूलत: VSCode.dev चे "हे Siri, पण कोडिंगसाठी" आहे
+- एकदा तुम्ही याचा वापर करण्यास सुरुवात केली की, तुम्हाला कोडिंग वीजेच्या वेगाने होत असल्यासारखे वाटेल
+- हे मूलत: VSCode.dev चे "Hey Siri, पण कोडिंगसाठी" आवृत्ती आहे
 
-### पद्धत 2: URL मॉडिफिकेशन तंत्र
+### पद्धत २: URL बदलण्याची तंत्र
 
-जसे HTTP आणि HTTPS वेगवेगळ्या प्रोटोकॉल वापरतात तरीही समान डोमेन संरचना राखतात, तसे VSCode.dev GitHub च्या अ‍ॅड्रेसिंग सिस्टमचे प्रतिबिंबित करणारे URL पॅटर्न वापरते. कोणत्याही GitHub रिपॉझिटरी URL ला VSCode.dev मध्ये थेट उघडण्यासाठी बदलले जाऊ शकते.
+जसे HTTP आणि HTTPS वेगवेगळ्या प्रोटोकॉल वापरतात परंतु समान डोमेन संरचना राखतात, तसे VSCode.dev GitHub च्या अ‍ॅड्रेसिंग सिस्टमचे प्रतिबिंबित करणारे URL पॅटर्न वापरते. कोणत्याही GitHub रिपॉझिटरी URL ला VSCode.dev मध्ये थेट उघडण्यासाठी बदलले जाऊ शकते.
 
 **URL ट्रान्सफॉर्मेशन पॅटर्न:**
 
@@ -140,212 +268,325 @@ VSCode.dev या क्षमतांना तुमच्या ब्रा
 - कोणत्याही सार्वजनिकपणे प्रवेशयोग्य रिपॉझिटरीसह कार्य करते
 - त्वरित संपादन प्रवेश प्रदान करते
 
-> 💡 **जीवन बदलणारी टिप**: तुमच्या आवडत्या रिपॉझिटरीच्या VSCode.dev आवृत्त्या बुकमार्क करा. माझ्याकडे "माझे पोर्टफोलिओ संपादित करा" आणि "डॉक्युमेंटेशन दुरुस्त करा" सारखे बुकमार्क आहेत जे मला थेट संपादन मोडमध्ये घेऊन जातात!
+> 💡 **जीवन बदलणारी टिप**: तुमच्या आवडत्या रिपॉझिटरीच्या VSCode.dev आवृत्त्या बुकमार्क करा. माझ्याकडे "Edit My Portfolio" आणि "Fix Documentation" सारखे बुकमार्क आहेत जे मला थेट संपादन मोडमध्ये घेऊन जातात!
 
 **तुम्ही कोणती पद्धत वापरावी?**
-- **इंटरफेस मार्ग**: जेव्हा तुम्ही एक्सप्लोर करत असता किंवा अचूक रिपॉझिटरी नावे लक्षात ठेवू शकत नाही
-- **URL ट्रिक**: जेव्हा तुम्हाला अचूकपणे कुठे जायचे आहे हे माहित असते तेव्हा वीजेच्या वेगाने प्रवेशासाठी परिपूर्ण
+- **इंटरफेस मार्ग**: जेव्हा तुम्ही एक्सप्लोर करत असता किंवा अचूक रिपॉझिटरी नावे लक्षात ठेवू शकत नाही तेव्हा उत्तम
+- **URL ट्रिक**: जेव्हा तुम्हाला नक्की कुठे जायचे आहे हे माहित असेल तेव्हा वीजेच्या वेगाने प्रवेशासाठी परिपूर्ण
+
+### 🎯 शैक्षणिक तपासणी: क्लाउड विकास प्रवेश
+
+**थांबा आणि विचार करा**: तुम्ही वेब ब्राउझरद्वारे कोड रिपॉझिटरीमध्ये प्रवेश करण्याच्या दोन पद्धती शिकल्या आहेत. हे विकास कसे कार्य करते यामध्ये मूलभूत बदल दर्शवते.
+
+**जलद स्व-मूल्यांकन**:
+- वेब-आधारित संपादन पारंपरिक "विकास वातावरण सेटअप" का काढून टाकते हे तुम्ही स्पष्ट करू शकता का?
+- स्थानिक git क्लोनिंगच्या तुलनेत URL बदलण्याच्या तंत्राचा कोणता फायदा आहे?
+- तुम्ही ओपन सोर्स प्रकल्पांमध्ये योगदान देण्याचा दृष्टिकोन कसा बदलतो?
+
+**वास्तविक-जगाशी कनेक्शन**: GitHub, GitLab, आणि Replit सारख्या प्रमुख कंपन्यांनी त्यांच्या विकास प्लॅटफॉर्म्स क्लाउड-फर्स्ट तत्त्वांवर आधारित तयार केले आहेत. तुम्ही व्यावसायिक विकास संघांनी जगभरात वापरलेल्या समान वर्कफ्लो शिकत आहात.
+
+**चॅलेंज प्रश्न**: क्लाउड-आधारित विकास शाळांमध्ये कोडिंग शिकवण्याचा दृष्टिकोन कसा बदलू शकतो? डिव्हाइस आवश्यकता, सॉफ्टवेअर व्यवस्थापन, आणि सहयोगी शक्यता विचारात घ्या.
 
 ## फाइल्स आणि प्रकल्पांसह काम करणे
 
-आता तुमच्याकडे रिपॉझिटरी उघडली आहे, चला बांधायला सुरुवात करूया! VSCode.dev तुम्हाला कोड फाइल्स तयार करण्यासाठी, संपादित करण्यासाठी आणि व्यवस्थित करण्यासाठी आवश्यक असलेली प्रत्येक गोष्ट देते. याला तुमचे डिजिटल कार्यशाळा समजा – प्रत्येक साधन तुम्हाला आवश्यक असलेल्या ठिकाणी आहे.
+आता तुम्ही रिपॉझिटरी उघडली आहे, चला बांधायला सुरुवात करूया! VSCode.dev तुम्हाला तुमच्या कोड फाइल्स तयार करण्यासाठी, संपादित करण्यासाठी आणि आयोजित करण्यासाठी आवश्यक असलेली प्रत्येक गोष्ट देते. याला तुमचे डिजिटल कार्यशाळा समजा – प्रत्येक साधन तुम्हाला आवश्यक असलेल्या ठिकाणी आहे.
 
-चला तुमच्या कोडिंग कार्यप्रवाहाचा जास्तीत जास्त भाग बनवणाऱ्या रोजच्या कामांमध्ये डुबकी मारूया.
+चला तुमच्या कोडिंग वर्कफ्लोचा मोठा भाग बनवणाऱ्या रोजच्या कामांमध्ये डुबकी मारूया.
 
 ### नवीन फाइल्स तयार करणे
 
-जसे आर्किटेक्टच्या ऑफिसमध्ये ब्लूप्रिंट्स व्यवस्थित करणे, VSCode.dev मध्ये फाइल तयार करणे संरचित दृष्टिकोनाचे अनुसरण करते. प्रणाली सर्व मानक वेब विकास फाइल प्रकारांना समर्थन देते.
+जसे आर्किटेक्टच्या ऑफिसमध्ये ब्लूप्रिंट्स आयोजित करणे, VSCode.dev मध्ये फाइल तयार करणे संरचित दृष्टिकोनाचे अनुसरण करते. प्रणाली सर्व मानक वेब विकास फाइल प्रकारांना समर्थन देते.
 
 **फाइल तयार करण्याची प्रक्रिया:**
 
-1. एक्सप्लोरर साइडबारमधील लक्ष्य फोल्डरवर नेव्हिगेट करा
-2. फोल्डरच्या नावावर होवर करा "नवीन फाइल" आयकॉन (📄+) प्रकट करण्यासाठी
-3. योग्य एक्स्टेंशनसह फाइलचे नाव प्रविष्ट करा (`style.css`, `script.js`, `index.html`)
+1. Explorer साइडबारमधील लक्ष्य फोल्डरवर जा
+2. फोल्डरच्या नावावर होवर करा आणि "New File" आयकॉन (📄+) उघडा
+3. योग्य एक्सटेंशनसह फाइलचे नाव प्रविष्ट करा (`style.css`, `script.js`, `index.html`)
 4. फाइल तयार करण्यासाठी Enter दाबा
 
 ![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.mr.png)
 
 **नाव देण्याचे नियम:**
 - फाइलचा उद्देश सूचित करणारी वर्णनात्मक नावे वापरा
-- योग्य सिंटॅक्स हायलाइटिंगसाठी फाइल एक्स्टेंशन्स समाविष्ट करा
+- योग्य सिंटॅक्स हायलाइटिंगसाठी फाइल एक्सटेंशन्स समाविष्ट करा
 - प्रकल्पांमध्ये सुसंगत नाव देण्याचे नमुने अनुसरण करा
-- स्पेसऐवजी लोअरकेस अक्षरे आणि हायफन्स वापरा
+- लोअरकेस अक्षरे आणि हायफन्स वापरा, जागा टाळा
 
 ### फाइल्स संपादित करणे आणि जतन करणे
 
 येथे खरी मजा सुरू होते! VSCode.dev चा एडिटर उपयुक्त वैशिष्ट्यांनी भरलेला आहे ज्यामुळे कोडिंग गुळगुळीत आणि अंतर्ज्ञानी वाटते. हे कोडसाठी खूप हुशार लेखन सहाय्यक असल्यासारखे आहे.
 
-**तुमचा संपादन कार्यप्रवाह:**
+**तुमचा संपादन वर्कफ्लो:**
 
-1. एक्सप्लोररमधील कोणत्याही फाइलवर क्लिक करा ती मुख्य क्षेत्रात उघडण्यासाठी
-2. टाइप करायला सुरुवात करा आणि VSCode.dev तुम्हाला रंग, सूचना आणि त्रुटी शोधण्यास मदत करताना पहा
-3. तुमचे काम Ctrl+S (Windows/Linux) किंवा Cmd+S (Mac) सह जतन करा – जरी ते ऑटो-सेव्ह करते!
+1. Explorer मध्ये कोणत्याही फाइलवर क्लिक करा आणि ती मुख्य क्षेत्रात
+- आपल्या सर्व स्टेज केलेल्या बदलांबद्दल आपण समाधानी आहात याची खात्री करा
+- आपण काय केले याचे एक छोटेसे नोट लिहा (हेच आपले "commit message" आहे)
+- सर्व काही GitHub वर सेव्ह करण्यासाठी चेकमार्क बटणावर क्लिक करा
+- जर काहीतरी बदलायचे ठरवले असेल, तर undo आयकॉन वापरून बदल रद्द करू शकता
 
-![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.mr.png)
+**चांगले commit messages लिहिणे (हे सोपे आहे!):**
+- फक्त आपण काय केले ते वर्णन करा, जसे "Add contact form" किंवा "Fix broken navigation"
+- ते लहान आणि सोपे ठेवा – ट्वीट लांबीसारखे, निबंधासारखे नाही
+- "Add", "Fix", "Update", किंवा "Remove" सारख्या क्रियापदांनी सुरुवात करा
+- **चांगले उदाहरणे**: "Add responsive navigation menu", "Fix mobile layout issues", "Update colors for better accessibility"
 
-**तुम्ही कोड करत असताना घडणाऱ्या छान गोष्टी:**
-- तुमचा कोड सुंदरपणे रंग-कोडेड होतो त्यामुळे वाचायला सोपे होते
-- VSCode.dev तुम्ही टाइप करत असताना पूर्णता सुचवते (ऑटोकरेक्टसारखे, पण खूप हुशार)
-- तुम्ही जतन करण्यापूर्वी टायपो आणि त्रुटी पकडते
-- तुम्ही ब्राउझरमध्ये जसे अनेक फाइल्स टॅबमध्ये उघडू शकता
-- सर्व काही पार्श्वभूमीमध्ये स्वयंचलितपणे जतन होते
+> 💡 **जलद नेव्हिगेशन टिप**: वरच्या डाव्या बाजूला असलेल्या हॅमबर्गर मेनू (☰) वापरून आपल्या GitHub रिपॉझिटरीकडे परत जा आणि आपले committed बदल ऑनलाइन पहा. हे आपल्या संपादन वातावरण आणि GitHub प्रोजेक्टच्या मुख्य पृष्ठामधील एक पोर्टलसारखे आहे!
 
-> ⚠️ **जलद टिप**: जरी ऑटो-सेव्ह तुमच्या पाठीशी आहे, Ctrl+S किंवा Cmd+S दाबणे अजूनही चांगली सवय आहे. हे सर्व काही त्वरित जतन करते आणि त्रुटी तपासणीसारख्या काही अतिरिक्त उपयुक्त वैशिष्ट्यांना ट्रिगर करते.
+## एक्स्टेंशन्ससह कार्यक्षमता वाढवणे
 
-### Git सह व्हर्जन कंट्रोल
+जसे एखाद्या कारागीराच्या कार्यशाळेत विविध कामांसाठी विशेष साधने असतात, तसेच VSCode.dev एक्स्टेंशन्ससह सानुकूलित केले जाऊ शकते जे विशिष्ट क्षमता जोडतात. या समुदाय-निर्मित प्लगिन्स कोड फॉर्मॅटिंग, लाईव्ह प्रिव्ह्यू, आणि Git इंटिग्रेशन सुधारण्यासारख्या सामान्य विकास गरजा पूर्ण करतात.
 
-जसे पुरातत्वशास्त्रज्ञ उत्खननाच्या स्तरांचे तपशीलवार रेकॉर्ड तयार करतात, तसे Git तुमच्या कोडमधील बदल वेळोवेळी ट्रॅक करते. ही प्रणाली प्रकल्प इतिहास जतन करते आणि तुम्हाला आवश्यक असल्यास मागील आवृत्त्यांमध्ये परत जाण्याची परवानगी देते. VSCode.dev मध्ये समाकलित Git कार्यक्षमता समाविष्ट आहे.
+एक्स्टेंशन मार्केटप्लेसमध्ये जगभरातील विकसकांनी तयार केलेली हजारो मोफत साधने आहेत. प्रत्येक एक्स्टेंशन विशिष्ट कार्यप्रवाह आव्हाने सोडवते, ज्यामुळे आपल्याला आपल्या गरजा आणि प्राधान्यांनुसार वैयक्तिक विकास वातावरण तयार करता येते.
 
-**सोर्स कंट्रोल इंटरफेस:**
+```mermaid
+mindmap
+  root((Extension Ecosystem))
+    Essential Categories
+      Productivity
+        Live Server
+        Auto Rename Tag
+        Bracket Pair Colorizer
+        GitLens
+      Code Quality
+        Prettier
+        ESLint
+        Spell Checker
+        Error Lens
+      Language Support
+        HTML CSS Support
+        JavaScript ES6
+        Python Extension
+        Markdown Preview
+      Themes & UI
+        Dark+ Modern
+        Material Icon Theme
+        Peacock
+        Rainbow Brackets
+    Discovery Methods
+      Popular Rankings
+        Download Counts
+        User Ratings
+        Recent Updates
+        Community Reviews
+      Recommendations
+        Workspace Suggestions
+        Language-based
+        Workflow-specific
+        Team Standards
+```
 
-1. अ‍ॅक्टिव्हिटी बारमधील 🌿 आयकॉनद्वारे सोर्स कंट्रोल पॅनेलमध्ये प्रवेश करा
-2. बदललेल्या फाइल्स "बदल" विभागात दिसतात
-3. रंग कोडिंग बदल प्रकार सूचित करते: जोडण्यांसाठी हिरवा, वगळण्यासाठी लाल
+### आपले परिपूर्ण एक्स्टेंशन्स शोधणे
 
-![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.mr.png)
+एक्स्टेंशन मार्केटप्लेस खूप चांगल्या प्रकारे आयोजित केलेले आहे, त्यामुळे आपल्याला आवश्यक असलेले शोधण्यात अडचण येणार नाही. हे आपल्याला विशिष्ट साधने शोधण्यात तसेच आपल्याला माहित नसलेल्या छान गोष्टी शोधण्यात मदत करण्यासाठी डिझाइन केले आहे!
 
-**तुमचे काम जतन करणे (कमिट कार्यप्रवाह):**
+**मार्केटप्लेसमध्ये जाणे:**
 
-```mermaid
-flowchart TD
-    A[Make changes to files] --> B[View changes in Source Control]
-    B --> C[Stage changes by clicking +]
-    C --> D[Write descriptive commit message]
-    D --> E[Click checkmark to commit]
-    E --> F[Changes pushed to GitHub]
-```
+1. अ‍ॅक्टिव्हिटी बारमधील एक्स्टेंशन्स आयकॉन (🧩) वर क्लिक करा
+2. ब्राउझ करा किंवा काहीतरी विशिष्ट शोधा
+3. जे काही मनोरंजक वाटते त्यावर क्लिक करा आणि त्याबद्दल अधिक जाणून घ्या
+
+![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.mr.png)
+
+**आपण तिथे काय पाहाल:**
 
-**तुमची चरण-दर-चरण प्रक्रिया येथे आहे:**
-- तुम्ही ज्या फाइल्स जतन करू इच्छिता त्याच्या शेजारी "+" आयकॉनवर क्लिक करा (हे त्यांना "स्टेज" करते)
-- तुम्ही तुमच्या सर्व स्टेज केलेल्या बदलांवर समाधानी आहात याची डबल-चेक करा
-- तुम्ही काय केले याचे एक छोटेसे नोट लिहा (हे तुमचे "कमिट मेसेज" आहे)
-- सर्व काही GitHub वर जतन करण्यासाठी चेकमार्क बटणावर क्लिक करा
-- जर तुम्ही एखाद्या गोष्टीबद्दल तुमचे मन बदलले असेल, तर अंडू आयकॉन तुम्हाला बदल रद्द करू देते
+| विभाग | काय आहे | का उपयुक्त आहे |
+|----------|---------|----------|
+| **Installed** | आपण आधीच जोडलेले एक्स्टेंशन्स | आपले वैयक्तिक कोडिंग टूलकिट |
+| **Popular** | लोकप्रिय एक्स्टेंशन्स | बहुतेक विकसकांनी शिफारस केलेले |
+| **Recommended** | आपल्या प्रोजेक्टसाठी स्मार्ट शिफारसी | VSCode.dev च्या उपयुक्त शिफारसी |
 
-**च
-- प्रत्येक विस्तारामध्ये रेटिंग्स, डाउनलोड संख्या आणि वास्तविक वापरकर्त्यांच्या पुनरावलोकनांचा समावेश असतो
-- तुम्हाला स्क्रीनशॉट्स आणि प्रत्येक विस्तार काय करतो याचे स्पष्ट वर्णन मिळते
-- सर्वकाही सुस्पष्टपणे सुसंगततेच्या माहितीसह चिन्हांकित केलेले असते
-- तुलनात्मक विस्तार सुचवले जातात जेणेकरून तुम्ही पर्यायांची तुलना करू शकता
+**ब्राउझिंग सोपे कसे आहे:**
+- प्रत्येक एक्स्टेंशनमध्ये रेटिंग्स, डाउनलोड संख्या, आणि वास्तविक वापरकर्त्यांच्या पुनरावलोकनांचा समावेश आहे
+- प्रत्येक एक्स्टेंशन काय करते याचे स्पष्ट वर्णन आणि स्क्रीनशॉट्स उपलब्ध आहेत
+- सर्वकाही सुसंगततेच्या माहितीसह स्पष्टपणे चिन्हांकित केलेले आहे
+- समान एक्स्टेंशन्स सुचवले जातात जेणेकरून आपण पर्यायांची तुलना करू शकता
 
-### विस्तार स्थापित करणे (हे खूप सोपे आहे!)
+### एक्स्टेंशन्स इंस्टॉल करणे (हे खूप सोपे आहे!)
 
-तुमच्या संपादकाला नवीन क्षमता देणे एका बटणावर क्लिक करण्याइतके सोपे आहे. विस्तार सेकंदांत स्थापित होतात आणि त्वरित कार्य करायला सुरुवात करतात – कोणतेही रीस्टार्ट नाही, कोणतीही प्रतीक्षा नाही.
+आपल्या संपादकाला नवीन क्षमता जोडणे म्हणजे फक्त एका बटणावर क्लिक करणे. एक्स्टेंशन्स काही सेकंदात इंस्टॉल होतात आणि लगेच कार्य करायला सुरुवात करतात – कोणतेही रिस्टार्ट नाही, कोणतीही प्रतीक्षा नाही.
 
-**तुम्हाला फक्त हे करायचे आहे:**
+**आपल्याला फक्त हे करायचे आहे:**
 
-1. तुम्हाला हवे ते शोधा (उदाहरणार्थ "live server" किंवा "prettier" शोधा)
-2. चांगले दिसणाऱ्या विस्तारावर क्लिक करा आणि अधिक तपशील पहा
-3. त्याचे कार्य काय आहे ते वाचा आणि रेटिंग्स तपासा
-4. त्या निळ्या "Install" बटणावर क्लिक करा आणि काम पूर्ण!
+1. आपल्याला हवे ते शोधा (उदाहरणार्थ "live server" किंवा "prettier" शोधा)
+2. जे चांगले वाटते त्यावर क्लिक करा आणि अधिक तपशील पहा
+3. ते काय करते ते वाचा आणि रेटिंग्स तपासा
+4. निळ्या "Install" बटणावर क्लिक करा आणि काम पूर्ण!
 
-![विस्तार स्थापित करणे](../../../../8-code-editor/images/install-extension.gif)
+![Installing extensions](../../../../8-code-editor/images/install-extension.gif)
 
-**पडद्यामागे काय घडते:**
-- विस्तार आपोआप डाउनलोड होतो आणि सेटअप होतो
-- नवीन वैशिष्ट्ये तुमच्या इंटरफेसमध्ये त्वरित दिसतात
+**पडद्यामागे काय होते:**
+- एक्स्टेंशन आपोआप डाउनलोड होते आणि सेटअप होते
+- नवीन वैशिष्ट्ये लगेचच आपल्या इंटरफेसमध्ये दिसतात
 - सर्वकाही त्वरित कार्य करायला सुरुवात करते (खरोखर, हे इतके जलद आहे!)
-- जर तुम्ही साइन इन केले असेल, तर विस्तार तुमच्या सर्व डिव्हाइसवर सिंक होतो
+- आपण साइन इन केले असल्यास, एक्स्टेंशन सर्व डिव्हाइसवर सिंक होते
 
-**मी सुरुवातीला शिफारस करतो असे काही विस्तार:**
-- **Live Server**: कोड करताना तुमची वेबसाइट रिअल-टाइममध्ये अपडेट होते (हे जादू सारखे आहे!)
-- **Prettier**: तुमचा कोड स्वच्छ आणि व्यावसायिक दिसण्यासाठी आपोआप स्वरूपित करते
-- **Auto Rename Tag**: एक HTML टॅग बदला आणि त्याचा जोडीदार टॅगही अपडेट होतो
-- **Bracket Pair Colorizer**: तुमचे ब्रॅकेट्स रंगीत कोड करते जेणेकरून तुम्ही गोंधळात पडणार नाही
-- **GitLens**: तुमच्या Git वैशिष्ट्यांना भरपूर उपयुक्त माहितीने सुपरचार्ज करते
+**मी शिफारस करतो की आपण यापासून सुरुवात करा:**
+- **Live Server**: कोड करताना आपली वेबसाइट रिअल-टाइममध्ये अपडेट होते (हे जादू सारखे आहे!)
+- **Prettier**: आपला कोड स्वच्छ आणि व्यावसायिक दिसण्यासाठी आपोआप फॉर्मॅट करते
+- **Auto Rename Tag**: एक HTML टॅग बदला आणि त्याचा जोडीदार टॅग आपोआप अपडेट होतो
+- **Bracket Pair Colorizer**: आपल्या ब्रॅकेट्स रंग-कोड करते जेणेकरून आपण गोंधळात पडणार नाही
+- **GitLens**: आपल्या Git वैशिष्ट्यांना भरपूर उपयुक्त माहितीने सुपरचार्ज करते
 
-### तुमचे विस्तार सानुकूलित करणे
+### आपल्या एक्स्टेंशन्स सानुकूलित करणे
 
-बहुतेक विस्तार सेटिंग्जसह येतात ज्यामुळे तुम्ही त्यांना तुमच्या आवडीनुसार कार्य करण्यासाठी सानुकूलित करू शकता. हे कारमध्ये सीट आणि मिरर समायोजित करण्यासारखे आहे – प्रत्येकाची स्वतःची प्राधान्ये असतात!
+बहुतेक एक्स्टेंशन्समध्ये सेटिंग्ज असतात ज्यामुळे आपण त्यांना आपल्या गरजेनुसार सानुकूलित करू शकता. हे कारमध्ये सीट आणि मिरर समायोजित करण्यासारखे आहे – प्रत्येकाची स्वतःची प्राधान्ये असतात!
 
-**विस्तार सेटिंग्ज समायोजित करणे:**
+**एक्स्टेंशन सेटिंग्ज समायोजित करणे:**
 
-1. विस्तार पॅनेलमध्ये तुमचा स्थापित विस्तार शोधा
-2. त्याच्या नावाजवळ असलेल्या लहान गियर आयकॉन (⚙️) शोधा आणि त्यावर क्लिक करा
+1. एक्स्टेंशन्स पॅनेलमध्ये आपले इंस्टॉल केलेले एक्स्टेंशन शोधा
+2. त्याच्या नावाजवळ असलेल्या छोटे गियर आयकॉन (⚙️) शोधा आणि क्लिक करा
 3. ड्रॉपडाउनमधून "Extension Settings" निवडा
-4. तुमच्या कार्यप्रवाहासाठी योग्य वाटेपर्यंत गोष्टी समायोजित करा
+4. आपल्या कार्यप्रवाहासाठी योग्य वाटेपर्यंत गोष्टी समायोजित करा
 
-![विस्तार सेटिंग्ज सानुकूलित करणे](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.mr.png)
+![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.mr.png)
 
-**तुम्हाला समायोजित करायचे असलेले सामान्य गोष्टी:**
-- तुमचा कोड कसा स्वरूपित होतो (tabs vs spaces, line length, इ.)
+**आपण समायोजित करू इच्छित सामान्य गोष्टी:**
+- आपला कोड कसा फॉर्मॅट होतो (tabs vs spaces, line length, इ.)
 - कोणते कीबोर्ड शॉर्टकट विविध क्रिया ट्रिगर करतात
-- कोणत्या फाइल प्रकारांवर विस्तार कार्य करावा
+- कोणत्या फाइल प्रकारांवर एक्स्टेंशन कार्य करावे
 - विशिष्ट वैशिष्ट्ये चालू किंवा बंद करणे जेणेकरून गोष्टी स्वच्छ राहतील
 
-### तुमचे विस्तार व्यवस्थित ठेवणे
+### आपल्या एक्स्टेंशन्स व्यवस्थित ठेवणे
 
-तुम्हाला अधिक छान विस्तार सापडत असताना, तुम्हाला तुमचा संग्रह व्यवस्थित आणि सुरळीत चालू ठेवायचा असेल. VSCode.dev हे व्यवस्थापित करणे खूप सोपे करते.
+आपण अधिक छान एक्स्टेंशन्स शोधत असताना, आपली संग्रह व्यवस्थित आणि सुरळीत चालू ठेवू इच्छाल. VSCode.dev हे व्यवस्थापित करणे खूप सोपे करते.
 
-**तुमचे विस्तार व्यवस्थापन पर्याय:**
+**आपल्या एक्स्टेंशन व्यवस्थापन पर्याय:**
 
-| तुम्ही काय करू शकता | कधी उपयुक्त आहे | प्रो टिप |
+| आपण काय करू शकता | कधी उपयुक्त आहे | प्रो टिप |
 |--------|---------|----------|
-| **Disable** | एखादा विस्तार समस्या निर्माण करत आहे का हे तपासण्यासाठी | पुन्हा वापरण्याची शक्यता असल्यास अनइंस्टॉल करण्यापेक्षा चांगले |
-| **Uninstall** | तुम्हाला गरज नसलेल्या विस्तारांना पूर्णपणे काढून टाकणे | तुमचे वातावरण स्वच्छ आणि जलद ठेवते |
-| **Update** | नवीनतम वैशिष्ट्ये आणि बग फिक्सेस मिळवणे | सहसा आपोआप होते, परंतु तपासणे योग्य आहे |
+| **Disable** | एखाद्या एक्स्टेंशनमुळे समस्या निर्माण होत आहे का हे तपासणे | पुन्हा वापरण्याची शक्यता असल्यास अनइंस्टॉल करण्यापेक्षा चांगले |
+| **Uninstall** | आपल्याला आवश्यक नसलेल्या एक्स्टेंशन्स पूर्णपणे काढून टाकणे | आपले वातावरण स्वच्छ आणि जलद ठेवते |
+| **Update** | नवीन वैशिष्ट्ये आणि बग फिक्सेस मिळवणे | सहसा आपोआप होते, परंतु तपासणे योग्य आहे |
+
+**मी एक्स्टेंशन्स कसे व्यवस्थापित करतो:**
+- काही महिन्यांनी, मी जे काही इंस्टॉल केले आहे त्याचा आढावा घेतो आणि जे मी वापरत नाही ते काढून टाकतो
+- मी एक्स्टेंशन्स अपडेट ठेवतो जेणेकरून मला नवीन सुधारणा आणि सुरक्षा फिक्सेस मिळतील
+- जर काहीतरी मंद वाटत असेल, तर मी तात्पुरते एक्स्टेंशन्स डिसेबल करतो आणि कोणते कारणीभूत आहे ते पाहतो
+- जेव्हा एक्स्टेंशन्सला मोठे अपडेट्स मिळतात तेव्हा मी अपडेट नोट्स वाचतो – कधी कधी छान नवीन वैशिष्ट्ये असतात!
+
+> ⚠️ **परफॉर्मन्स टिप**: एक्स्टेंशन्स अप्रतिम आहेत, परंतु खूप जास्त असल्यास गोष्टी मंद होऊ शकतात. जे खरोखर आपले जीवन सोपे करतात त्यावर लक्ष केंद्रित करा आणि जे आपण कधीही वापरत नाही ते अनइंस्टॉल करण्यास घाबरू नका.
+
+### 🎯 शैक्षणिक तपासणी: विकास वातावरण सानुकूलन
+
+**आर्किटेक्चर समजून घेणे**: आपण समुदाय-निर्मित एक्स्टेंशन्स वापरून व्यावसायिक विकास वातावरण सानुकूलित करणे शिकले. हे प्रतिबिंबित करते की एंटरप्राइझ विकास संघ कसे मानक टूलचेन तयार करतात.
+
+**मुख्य संकल्पना आत्मसात केल्या**:
+- **एक्स्टेंशन शोध**: विशिष्ट विकास आव्हाने सोडवणारी साधने शोधणे
+- **वातावरण कॉन्फिगरेशन**: वैयक्तिक किंवा संघाच्या प्राधान्यांनुसार साधने सानुकूलित करणे
+- **परफॉर्मन्स ऑप्टिमायझेशन**: कार्यक्षमता आणि प्रणाली कार्यक्षमतेचा समतोल राखणे
+- **समुदाय सहकार्य**: जागतिक विकसक समुदायाने तयार केलेल्या साधनांचा लाभ घेणे
+
+**उद्योग कनेक्शन**: एक्स्टेंशन इकोसिस्टम्स VS Code, Chrome DevTools, आणि आधुनिक IDEs सारख्या प्रमुख विकास प्लॅटफॉर्म्सला शक्ती देतात. एक्स्टेंशन्सचे मूल्यांकन, इंस्टॉल, आणि कॉन्फिगर कसे करावे हे समजून घेणे व्यावसायिक विकास कार्यप्रवाहांसाठी आवश्यक आहे.
+
+**चिंतन प्रश्न**: 10 विकसकांच्या संघासाठी मानक विकास वातावरण सेट करण्यासाठी आपण कसे पुढे जाल? सुसंगतता, कार्यक्षमता, आणि वैयक्तिक प्राधान्ये विचारात घ्या.
+
+## 📈 आपली क्लाउड विकास कौशल्ये सुधारण्याची वेळापत्रक
+
+```mermaid
+timeline
+    title Professional Cloud Development Journey
+    
+    section Platform Foundations
+        Cloud Development Understanding
+            : Master web-based editing concepts
+            : Connect GitHub integration patterns
+            : Navigate professional interfaces
+    
+    section Workflow Mastery
+        File & Project Management
+            : Create organized project structures
+            : Master syntax highlighting benefits
+            : Handle multi-file editing workflows
+        
+        Version Control Integration
+            : Understand Git visualization
+            : Practice commit message standards
+            : Master change tracking workflows
+    
+    section Environment Customization
+        Extension Ecosystem
+            : Discover productivity extensions
+            : Configure development preferences
+            : Optimize performance vs functionality
+        
+        Professional Setup
+            : Build consistent workflows
+            : Create reusable configurations
+            : Establish team standards
+    
+    section Industry Readiness
+        Cloud-First Development
+            : Master remote development practices
+            : Understand collaborative workflows
+            : Build platform-independent skills
+        
+        Professional Practices
+            : Follow industry standards
+            : Create maintainable workflows
+            : Prepare for team environments
+```
 
-**मी विस्तार कसे व्यवस्थापित करतो:**
-- काही महिन्यांनी, मी स्थापित केलेल्या गोष्टींचा आढावा घेतो आणि मी वापरत नसलेल्या गोष्टी काढून टाकतो
-- मी विस्तार अद्यतनित ठेवतो जेणेकरून मला नवीन सुधारणा आणि सुरक्षा फिक्सेस मिळतील
-- जर काही गोष्ट मंद वाटत असेल, तर मी तात्पुरते विस्तार अक्षम करतो आणि त्यापैकी एक कारण आहे का ते पाहतो
-- जेव्हा विस्तारांना मोठी अद्यतने मिळतात तेव्हा मी अद्यतन नोट्स वाचतो – कधी कधी छान नवीन वैशिष्ट्ये असतात!
+**🎓 ग्रॅज्युएशन माइलस्टोन**: आपण प्रमुख तंत्रज्ञान कंपन्यांतील व्यावसायिक विकसकांनी वापरलेल्या समान साधने आणि कार्यप्रवाहांचा वापर करून क्लाउड-आधारित विकास यशस्वीरित्या आत्मसात केला आहे. ही कौशल्ये सॉफ्टवेअर विकासाच्या भविष्यासाठी महत्त्वपूर्ण आहेत.
 
-> ⚠️ **कामगिरी टिप**: विस्तार अप्रतिम आहेत, परंतु खूप जास्त असल्यास गोष्टी मंद होऊ शकतात. जे खरोखर तुमचे जीवन सोपे करतात त्यावर लक्ष केंद्रित करा आणि जे तुम्ही कधीही वापरत नाही ते काढून टाकण्यास घाबरू नका.
+**🔄 पुढील स्तर क्षमता**:
+- प्रगत क्लाउड विकास प्लॅटफॉर्म्स (Codespaces, GitPod) एक्सप्लोर करण्यासाठी तयार
+- वितरित विकास संघांमध्ये काम करण्यासाठी तयार
+- जागतिक स्तरावर ओपन सोर्स प्रोजेक्ट्समध्ये योगदान देण्यासाठी सुसज्ज
+- आधुनिक DevOps आणि सतत इंटिग्रेशन पद्धतींसाठी पाया तयार
 
 ## GitHub Copilot Agent Challenge 🚀
 
-जसे NASA त्यांच्या अंतराळ मोहिमांसाठी संरचित दृष्टिकोन वापरते, तसेच VSCode.dev कौशल्यांचा संपूर्ण कार्यप्रवाह परिस्थितीत प्रणालीबद्ध अनुप्रयोग यामध्ये समाविष्ट आहे.
+जसे NASA त्यांच्या स्पेस मिशन्ससाठी संरचित दृष्टिकोन वापरते, तसेच या आव्हानात VSCode.dev कौशल्यांचा संपूर्ण कार्यप्रवाह परिदृश्यात प्रणालीबद्ध अनुप्रयोग समाविष्ट आहे.
 
-**उद्दिष्ट:** VSCode.dev मध्ये प्रवीणता दाखवून एक व्यापक वेब विकास कार्यप्रवाह स्थापित करणे.
+**उद्दिष्ट:** VSCode.dev च्या कौशल्यांचा वापर करून व्यापक वेब विकास कार्यप्रवाह स्थापित करणे.
 
-**प्रकल्प आवश्यकता:** Agent mode सहाय्य वापरून, या कार्ये पूर्ण करा:
+**प्रोजेक्ट आवश्यकता:** Agent mode सहाय्य वापरून, या कार्ये पूर्ण करा:
 1. विद्यमान रिपॉझिटरी फोर्क करा किंवा नवीन तयार करा
-2. HTML, CSS, आणि JavaScript फाइल्ससह कार्यक्षम प्रकल्प संरचना स्थापित करा
-3. विकास-वर्धित तीन विस्तार स्थापित आणि कॉन्फिगर करा
+2. HTML, CSS, आणि JavaScript फाइल्ससह कार्यक्षम प्रोजेक्ट संरचना स्थापित करा
+3. तीन विकास-सुधारक एक्स्टेंशन्स इंस्टॉल आणि कॉन्फिगर करा
 4. वर्णनात्मक commit messages सह आवृत्ती नियंत्रणाचा सराव करा
 5. फीचर ब्रांच तयार करणे आणि बदल करणे याचा प्रयोग करा
-6. README.md फाइलमध्ये प्रक्रिया आणि शिकवण्या दस्तऐवजीकरण करा
+6. README.md फाइलमध्ये प्रक्रिया आणि शिकवणींचे दस्तऐवजीकरण करा
 
-हे व्यायाम सर्व VSCode.dev संकल्पना व्यावहारिक कार्यप्रवाहात एकत्रित करते जे भविष्यातील विकास प्रकल्पांमध्ये लागू केले जाऊ शकते.
+हा व्यायाम सर्व VSCode.dev संकल्पनांना एक व्यावहारिक कार्यप्रवाहात एकत्रित करतो जो भविष्यातील विकास प्रोजेक्ट्ससाठी लागू केला जाऊ शकतो.
 
 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
 
 ## असाइनमेंट
 
-आता या कौशल्यांची खरी चाचणी घेण्याची वेळ आली आहे! मी एक प्रॅक्टिकल प्रोजेक्ट तयार केला आहे ज्यामुळे तुम्हाला आपण कव्हर केलेल्या सर्व गोष्टींचा सराव करता येईल: [VSCode.dev वापरून एक रिज्युम वेबसाइट तयार करा](./assignment.md)
+आता या कौशल्यांची खऱ्या प्रोजेक्टमध्ये चाचणी घेण्याची वेळ आली आहे! मी एक हँड्स-ऑन प्रोजेक्ट तयार केला आहे जो आपल्याला आपण कव्हर केलेल्या प्रत्येक गोष्टीचा सराव करण्यास अनुमती देईल: [VSCode.dev वापरून एक रिझ्युमे वेबसाइट तयार करा](./assignment.md)
 
-हे असाइनमेंट तुम्हाला संपूर्णपणे तुमच्या ब्राउझरमध्ये एक व्यावसायिक रिज्युम वेबसाइट तयार करण्यासाठी मार्गदर्शन करते. तुम्ही एक्सप्लोर केलेल्या सर्व VSCode.dev वैशिष्ट्यांचा वापर कराल आणि शेवटी, तुमच्याकडे एक छान दिसणारी वेबसाइट आणि तुमच्या नवीन कार्यप्रवाहावर ठाम आत्मविश्वास असेल.
+ही असाइनमेंट आपल्याला संपूर्णपणे आपल्या ब्राउझरमध्ये एक व्यावसायिक रिझ्युमे वेबसाइट तयार करण्यासाठी मार्गदर्शन करते. आपण एक्सप्लोर केलेल्या सर्व VSCode.dev वैशिष्ट्यांचा वापर कराल, आणि शेवटी, आपल्याकडे एक उत्कृष्ट वेबसाइट आणि आपल्या नवीन कार्यप्रवाहावर ठाम आत्मविश्वास असेल.
 
-## शोधत राहा आणि तुमची कौशल्ये वाढवा
+## आपल्या कौशल्ये एक्सप्लोर करणे आणि वाढवणे सुरू ठेवा
 
-तुमच्याकडे आता एक मजबूत पाया आहे, परंतु अजून खूप छान गोष्टी शोधायच्या आहेत! तुमची VSCode.dev कौशल्ये पुढील स्तरावर नेण्यासाठी काही संसाधने आणि कल्पना येथे आहेत:
+आपल्याकडे आता एक मजबूत पाया आहे, परंतु शोधण्यासाठी अजून खूप छान गोष्टी आहेत! आपल्या VSCode.dev कौशल्ये पुढील स्तरावर नेण्यासाठी काही संसाधने आणि कल्पना येथे आहेत:
 
 **बुकमार्क करण्यासाठी अधिकृत दस्तऐवज:**
 - [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – ब्राउझर-आधारित संपादनासाठी संपूर्ण मार्गदर्शक
-- [GitHub Codespaces](https://docs.github.com/en/codespaces) – जेव्हा तुम्हाला क्लाउडमध्ये अधिक शक्ती हवी असते
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) – क्लाउडमध्ये अधिक शक्ती हवी असल्यास
 
 **पुढील प्रयोग करण्यासाठी छान वैशिष्ट्ये:**
-- **Keyboard Shortcuts**: कीबोर्ड शॉर्टकट्स शिकून कोडिंग निंजा सारखे वाटा
-- **Workspace Settings**: विविध प्रकारच्या प्रकल्पांसाठी वेगवेगळे वातावरण सेट करा
-- **Multi-root Workspaces**: एकाच वेळी अनेक रिपॉझिटरीवर काम करा (खूप उपयुक्त!)
-- **Terminal Integration**: तुमच्या ब्राउझरमध्ये कमांड-लाइन टूल्समध्ये प्रवेश करा
+- **Keyboard Shortcuts**: कीबोर्ड शॉर्टकट्स शिकून कोडिंग निंजा सारखे वाटेल
+- **Workspace Settings**: विविध प्रकारच्या प्रोजेक्ट्ससाठी वेगवेगळे वातावरण सेट करा
+- **Multi-root Workspaces**: एकाच वेळी अनेक रिपॉझिटरींवर काम करा (खूप उपयुक्त!)
+- **Terminal Integration**: आपल्या ब्राउझरमध्ये कमांड-लाइन साधनांमध्ये प्रवेश करा
 
 **सरावासाठी कल्पना:**
-- काही ओपन-सोर्स प्रकल्पांमध्ये उडी मारा आणि VSCode.dev वापरून योगदान द्या – हे परत देण्याचा एक उत्तम मार्ग आहे!
-- वेगवेगळे विस्तार वापरून पहा आणि तुमची परिपूर्ण सेटअप शोधा
-- तुम्ही सर्वाधिक प्रकारच्या साइट्स तयार करता त्यासाठी प्रकल्प टेम्पलेट्स तयार करा
-- Git कार्यप्रवाहांचा सराव करा जसे की ब्रांचिंग आणि मर्जिंग – टीम प्रोजेक्ट्समध्ये ही कौशल्ये खूप महत्त्वाची आहेत
+- काही ओपन-सोर्स प्रोजेक्ट्समध्ये उडी मारा आणि VSCode.dev वापरून योगदान द्या – हे परत देण्याचा एक उत्तम मार्ग आहे!
+- आपले परिपूर्ण सेटअप शोधण्यासाठी विविध एक्स्टेंशन्स वापरून पहा
+- आपण सर्वात जास्त तयार केलेल्या साइट्सच्या प्रकारांसाठी प्रोजेक्ट टेम्पलेट्स तयार करा
+- Git कार्यप्रवाहांचा सराव करा जसे की ब्रांचिंग आणि मर्जिंग – संघ प्रोजेक्ट्समध्ये ही कौशल्ये खूप उपयुक्त आहेत
 
 ---
 
-**तुम्ही ब्राउझर-आधारित विकासात प्रवीण झाला आहात!** 🎉 जसे पोर्टेबल उपकरणांच्या शोधामुळे वैज्ञानिकांना दुर्गम ठिकाणी संशोधन करता आले, तसेच VSCode.dev तुम्हाला कोणत्याही इंटरनेट-कनेक्टेड डिव्हाइसवर व्यावसायिक कोडिंग करण्यास सक्षम करते.
+**आपण ब्राउझर-आधारित विकासात पारंगत झाला आहात!** 🎉 जसे पोर्टेबल उपकरणांच्या शोधामुळे वैज्ञानिकांना दुर्गम ठिकाणी संशोधन करण्याची परवानगी मिळाली, तसेच VSCode.dev कोणत्याही इंटरनेट-कनेक्टेड डिव्हाइसवरून व्यावसायिक कोडिंग सक्षम करते.
 
-ही कौशल्ये सध्याच्या उद्योग पद्धतींशी जुळतात – अनेक व्यावसायिक विकासक त्यांच्या लवचिकता आणि प्रवेशयोग्यतेसाठी क्लाउड-आधारित विकास वातावरण वापरतात. तुम्ही एक कार्यप्रवाह शिकला आहे जो वैयक्तिक प्रकल्पांपासून मोठ्या टीम सहयोगांपर्यंत वाढतो.
+ही कौशल्ये वर्तमान उद्योग पद्धतींशी जुळतात – अनेक व्यावसायिक विकसक त्यांच्या लवचिकता आणि प्रवेशयोग्यतेसाठी क्लाउड-आधारित विकास वातावरण वापरतात. आपण एक कार्यप्रवाह शिकला आहे जो वैयक्तिक प्रोजेक्ट्सपासून मोठ्या संघ सहयोगांपर्यंत स्केल होतो.
 
-तुमच्या पुढील विकास प्रकल्पावर या तंत्रांचा उपयोग करा! 🚀
+आपल्या पुढील विकास प्रोजेक्टसाठी या तंत्रांचा वापर करा! 🚀
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात घ्या की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
\ No newline at end of file
diff --git a/translations/mr/9-chat-project/README.md b/translations/mr/9-chat-project/README.md
index 20c463dd12..f5d6c987c7 100644
--- a/translations/mr/9-chat-project/README.md
+++ b/translations/mr/9-chat-project/README.md
@@ -1,44 +1,107 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46d665af66e51524598af34a42b9b663",
-  "translation_date": "2025-10-22T16:07:53+00:00",
+  "original_hash": "2066c17078e9d18b5e309f31d8e8bc24",
+  "translation_date": "2025-11-03T14:34:15+00:00",
   "source_file": "9-chat-project/README.md",
   "language_code": "mr"
 }
 -->
 # एआयसह चॅट असिस्टंट तयार करा
 
-स्टार ट्रेकमध्ये जहाजाच्या संगणकाशी सहज संवाद साधत, जटिल प्रश्न विचारत आणि विचारपूर्वक उत्तर मिळवत असलेल्या क्रूची आठवण आहे का? 1960 च्या दशकातील विज्ञान कल्पनेप्रमाणे वाटणारी गोष्ट आता तुम्ही वेब तंत्रज्ञानाचा वापर करून तयार करू शकता.
+स्टार ट्रेकमध्ये, जेव्हा क्रू सहजपणे जहाजाच्या संगणकाशी संवाद साधत असे, जटिल प्रश्न विचारत असे आणि विचारपूर्वक उत्तर मिळवत असे, तेव्हा ते 1960 च्या दशकातील शुद्ध विज्ञान कल्पनारम्य वाटत होते. परंतु आता, तुम्ही आधीपासूनच ओळखत असलेल्या वेब तंत्रज्ञानाचा वापर करून तुम्ही ते तयार करू शकता.
 
-या धड्यात, आपण HTML, CSS, JavaScript आणि काही बॅकएंड इंटिग्रेशन वापरून एआय चॅट असिस्टंट तयार करू. तुम्ही शिकत असलेल्या कौशल्यांचा उपयोग करून शक्तिशाली एआय सेवांशी कसे जोडले जाऊ शकते हे तुम्हाला समजेल, ज्या संदर्भ समजून घेऊन अर्थपूर्ण उत्तर तयार करू शकतात.
+या धड्यात, आपण HTML, CSS, JavaScript आणि काही बॅकएंड इंटिग्रेशन वापरून एआय चॅट असिस्टंट तयार करू. तुम्हाला कळेल की तुम्ही शिकत असलेल्या कौशल्यांचा वापर करून शक्तिशाली एआय सेवांशी कसे जोडले जाऊ शकते, ज्या संदर्भ समजून घेऊ शकतात आणि अर्थपूर्ण उत्तर तयार करू शकतात.
 
-एआयला एका विशाल ग्रंथालयासारखे समजा जे केवळ माहिती शोधत नाही तर ती एकत्र करून तुमच्या विशिष्ट प्रश्नांसाठी सुसंगत उत्तर तयार करते. हजारो पृष्ठे शोधण्याऐवजी तुम्हाला थेट, संदर्भासह उत्तर मिळते.
+एआयला एक विशाल ग्रंथालय असल्यासारखे समजून घ्या जे केवळ माहिती शोधू शकत नाही तर ती एकत्रित करून तुमच्या विशिष्ट प्रश्नांसाठी सुसंगत उत्तर तयार करू शकते. हजारो पृष्ठे शोधण्याऐवजी, तुम्हाला थेट, संदर्भात्मक उत्तर मिळते.
 
-हे इंटिग्रेशन परिचित वेब तंत्रज्ञानाच्या सहकार्याने होते. HTML चॅट इंटरफेस तयार करते, CSS व्हिज्युअल डिझाइन हाताळते, JavaScript वापरकर्ता संवाद व्यवस्थापित करते आणि बॅकएंड API सर्वकाही एआय सेवांशी जोडते. हे ऑर्केस्ट्राच्या वेगवेगळ्या विभागांनी एकत्रितपणे सिम्फनी तयार करण्यासारखे आहे.
+हे इंटिग्रेशन परिचित वेब तंत्रज्ञान एकत्र काम करून होते. HTML चॅट इंटरफेस तयार करते, CSS व्हिज्युअल डिझाइन हाताळते, JavaScript वापरकर्ता संवाद व्यवस्थापित करते आणि बॅकएंड API सर्वकाही एआय सेवांशी जोडते. हे ऑर्केस्ट्राच्या वेगवेगळ्या विभागांनी एकत्र काम करून सिंफनी तयार करण्यासारखे आहे.
 
-आपण नैसर्गिक मानवी संवाद आणि मशीन प्रोसेसिंग यांच्यातील पूल तयार करत आहोत. तुम्ही एआय सेवा इंटिग्रेशनची तांत्रिक अंमलबजावणी आणि संवादांना अंतर्ज्ञानी वाटण्यासाठी डिझाइन पॅटर्न शिकाल.
+आम्ही नैसर्गिक मानवी संवाद आणि मशीन प्रोसेसिंग यांच्यातील एक पूल तयार करत आहोत. तुम्ही एआय सेवा इंटिग्रेशनची तांत्रिक अंमलबजावणी आणि संवादांना अंतर्ज्ञानी वाटण्यासाठी डिझाइन पॅटर्न शिकाल.
 
-या धड्याच्या शेवटी, एआय इंटिग्रेशन तुम्हाला रहस्यमय प्रक्रियेसारखे वाटणार नाही, तर तुम्ही काम करू शकणाऱ्या आणखी एका API सारखे वाटेल. तुम्ही ChatGPT आणि Claude सारख्या अॅप्लिकेशन्सना चालवणारे मूलभूत पॅटर्न समजून घ्याल, ज्यासाठी तुम्ही शिकत असलेल्या वेब डेव्हलपमेंट तत्त्वांचा उपयोग केला जातो.
+या धड्याच्या शेवटी, एआय इंटिग्रेशन तुम्हाला रहस्यमय प्रक्रियेसारखे वाटणार नाही, तर तुम्ही काम करू शकता अशा आणखी एका API सारखे वाटेल. तुम्ही ChatGPT आणि Claude सारख्या आधुनिक एआय असिस्टंट्सना चालवणाऱ्या अॅप्लिकेशन्सच्या मूलभूत पॅटर्न्स समजून घ्याल, ज्यामध्ये तुम्ही शिकत असलेल्या वेब डेव्हलपमेंट तत्त्वांचा वापर केला आहे.
 
-तुमच्या पूर्ण प्रकल्पाचे स्वरूप असे दिसेल:
+## ⚡ पुढील 5 मिनिटांत तुम्ही काय करू शकता
 
-![चॅट अॅप इंटरफेस ज्यामध्ये वापरकर्ता आणि एआय असिस्टंटमधील संवाद दिसतो](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.mr.png)
+**व्यस्त डेव्हलपर्ससाठी जलद सुरुवात मार्ग**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Get GitHub token]
+    B --> C[Test AI playground]
+    C --> D[Copy Python code]
+    D --> E[See AI responses]
+```
+
+- **पहिला मिनिट**: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ला भेट द्या आणि वैयक्तिक प्रवेश टोकन तयार करा
+- **दुसरा मिनिट**: प्लेग्राउंड इंटरफेसमध्ये थेट एआय संवादांची चाचणी करा
+- **तिसरा मिनिट**: "Code" टॅबवर क्लिक करा आणि Python स्निपेट कॉपी करा
+- **चौथा मिनिट**: तुमच्या टोकनसह स्थानिक स्तरावर कोड चालवा: `GITHUB_TOKEN=your_token python test.py`
+- **पाचवा मिनिट**: तुमच्या स्वतःच्या कोडमधून तुमचे पहिले एआय उत्तर तयार होताना पहा
+
+**जलद चाचणी कोड**:
+```python
+import os
+from openai import OpenAI
+
+client = OpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key="your_token_here"
+)
+
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Hello AI!"}],
+    model="openai/gpt-4o-mini"
+)
+
+print(response.choices[0].message.content)
+```
+
+**याचा महत्त्व**: 5 मिनिटांत, तुम्ही प्रोग्रामॅटिक एआय संवादाची जादू अनुभवाल. हे तुम्ही वापरत असलेल्या प्रत्येक एआय अॅप्लिकेशनला चालवणारे मूलभूत बांधकाम ब्लॉक दर्शवते.
+
+तुमच्या पूर्ण प्रकल्पाचे अंतिम स्वरूप असे दिसेल:
+
+![चॅट अॅप इंटरफेस वापरकर्ता आणि एआय असिस्टंटमधील संवाद दर्शवित आहे](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.mr.png)
+
+## 🗺️ एआय अॅप्लिकेशन डेव्हलपमेंटमधील तुमचा शिक्षण प्रवास
+
+```mermaid
+journey
+    title From Web Development to AI Integration
+    section Understanding AI Foundations
+      Discover generative AI concepts: 4: You
+      Explore GitHub Models platform: 6: You
+      Master AI parameters and prompts: 8: You
+    section Backend Integration
+      Build Python API server: 5: You
+      Implement AI function calls: 7: You
+      Handle async operations: 8: You
+    section Frontend Development
+      Create modern chat interface: 6: You
+      Master real-time interactions: 8: You
+      Build responsive user experience: 9: You
+    section Professional Application
+      Deploy complete AI system: 7: You
+      Optimize performance patterns: 8: You
+      Create production-ready app: 9: You
+```
+
+**तुमचा प्रवासाचा गंतव्य**: या धड्याच्या शेवटी, तुम्ही आधुनिक एआय असिस्टंट्स जसे की ChatGPT, Claude आणि Google Bard चालवणाऱ्या तंत्रज्ञान आणि पॅटर्न्सचा वापर करून एक संपूर्ण एआय-संचालित अॅप्लिकेशन तयार केले असेल.
 
 ## एआय समजून घेणे: रहस्यापासून प्रावीण्यापर्यंत
 
-कोडमध्ये जाण्यापूर्वी, आपण काय काम करत आहोत ते समजून घेऊया. जर तुम्ही यापूर्वी API वापरले असतील, तर तुम्हाला मूलभूत पॅटर्न माहित आहे: विनंती पाठवा, प्रतिसाद मिळवा.
+कोडमध्ये जाण्यापूर्वी, आपण ज्या गोष्टींवर काम करत आहोत त्या समजून घेऊया. जर तुम्ही यापूर्वी API वापरले असतील, तर तुम्हाला मूलभूत पॅटर्न माहित आहे: विनंती पाठवा, उत्तर प्राप्त करा.
 
-एआय API समान संरचनेचे अनुसरण करतात, परंतु डेटाबेसमधून पूर्व-संचयित डेटा पुनर्प्राप्त करण्याऐवजी, ते मोठ्या प्रमाणात मजकुरातून शिकलेल्या पॅटर्नवर आधारित नवीन प्रतिसाद तयार करतात. हे ग्रंथालयाच्या कॅटलॉग सिस्टम आणि अनेक स्रोतांमधून माहिती एकत्र करू शकणाऱ्या ज्ञानी ग्रंथपालामधील फरकासारखे आहे.
+एआय API समान संरचनेचे अनुसरण करतात, परंतु डेटाबेसमधून पूर्व-साठवलेला डेटा पुनर्प्राप्त करण्याऐवजी, ते मोठ्या प्रमाणात मजकूरातून शिकलेल्या पॅटर्नवर आधारित नवीन प्रतिसाद तयार करतात. ग्रंथालयाच्या कॅटलॉग सिस्टम आणि अनेक स्रोतांमधून माहिती एकत्रित करू शकणाऱ्या ज्ञानी ग्रंथपालातील फरकासारखे विचार करा.
 
 ### "जनरेटिव्ह एआय" म्हणजे काय?
 
-रोसेटा स्टोनने ज्ञात आणि अज्ञात भाषांमधील पॅटर्न शोधून इजिप्शियन हायरोग्लिफिक्स समजून घेण्यास विद्वानांना कसे सक्षम केले, याचा विचार करा. एआय मॉडेल्स अशाच प्रकारे काम करतात – ते मोठ्या प्रमाणात मजकुरातील पॅटर्न शोधतात जेणेकरून भाषा कशी कार्य करते हे समजून घेता येईल आणि नंतर नवीन प्रश्नांना योग्य प्रतिसाद तयार करण्यासाठी त्या पॅटर्नचा वापर केला जातो.
+रोसेटा स्टोनने ज्ञात आणि अज्ञात भाषांमधील पॅटर्न शोधून इजिप्शियन हायेरोग्लिफिक्स समजून घेण्यास विद्वानांना कसे सक्षम केले, याचा विचार करा. एआय मॉडेल्स त्याचप्रमाणे कार्य करतात – ते मजकूराच्या प्रचंड प्रमाणात पॅटर्न शोधतात जेणेकरून भाषा कशी कार्य करते हे समजून घेता येईल आणि नंतर त्या पॅटर्न्सचा वापर करून नवीन प्रश्नांना योग्य प्रतिसाद तयार करता येईल.
 
 **याचे सोपे उदाहरण देतो:**
-- **पारंपरिक डेटाबेस**: जसे तुमचा जन्म प्रमाणपत्र मागणे – तुम्हाला प्रत्येक वेळी एकच दस्तऐवज मिळतो
-- **सर्च इंजिन**: जसे ग्रंथपालाला मांजरींवरील पुस्तके शोधण्यास सांगणे – ते तुम्हाला उपलब्ध असलेले दाखवतात
-- **जनरेटिव्ह एआय**: जसे ज्ञानी मित्राला मांजरींबद्दल विचारणे – ते तुम्हाला तुमच्या गरजेनुसार सुसंगत माहिती सांगतात
+- **पारंपरिक डेटाबेस**: जसे तुमचा जन्म प्रमाणपत्र विचारणे – तुम्हाला प्रत्येक वेळी एकच दस्तऐवज मिळतो
+- **सर्च इंजिन**: जसे ग्रंथपालाला मांजरींवर पुस्तके शोधण्यास सांगणे – ते तुम्हाला उपलब्ध असलेले दाखवतात
+- **जनरेटिव्ह एआय**: जसे ज्ञानी मित्राला मांजरींविषयी विचारणे – ते तुम्हाला तुमच्या गरजेनुसार सुसंगत गोष्टी सांगतात
 
 ```mermaid
 graph LR
@@ -50,21 +113,19 @@ graph LR
     F[Training Data<br/>Books, Articles, Web] --> B
 ```
 
-### एआय मॉडेल्स कसे शिकतात (सोप्या भाषेत)
+### एआय मॉडेल्स कसे शिकतात (सोपे आवृत्ती)
 
-एआय मॉडेल्स मोठ्या प्रमाणात मजकुराच्या डेटासेट्सच्या संपर्कातून शिकतात ज्यामध्ये पुस्तके, लेख आणि संवादांचा समावेश असतो. या प्रक्रियेद्वारे, ते खालील गोष्टींमधील पॅटर्न ओळखतात:
+एआय मॉडेल्स पुस्तकं, लेख आणि संभाषणांमधील मजकूर असलेल्या प्रचंड डेटासेट्सच्या संपर्कातून शिकतात. या प्रक्रियेद्वारे, ते खालील गोष्टींमधील पॅटर्न ओळखतात:
 - लिखित संवादामध्ये विचार कसे रचले जातात
 - कोणते शब्द सामान्यतः एकत्र दिसतात
-- संवाद सामान्यतः कसे चालतात
-- औपचारिक आणि अनौपचारिक संवादातील संदर्भात्मक फरक
+- संभाषण सामान्यतः कसे चालते
+- औपचारिक आणि अनौपचारिक संवादांमधील संदर्भात्मक फरक
 
-**हे पुरातत्वज्ञ प्राचीन भाषा डिकोड कशा करतात यासारखे आहे**: ते व्याकरण, शब्दसंग्रह आणि सांस्कृतिक संदर्भ समजून घेण्यासाठी हजारो उदाहरणांचे विश्लेषण करतात, शेवटी शिकलेल्या पॅटर्नचा वापर करून नवीन मजकूरांचे अर्थ लावण्यास सक्षम होतात.
+**हे पुरातत्वज्ञ प्राचीन भाषांचे डिकोडिंग कसे करतात यासारखे आहे**: ते व्याकरण, शब्दसंग्रह आणि सांस्कृतिक संदर्भ समजून घेण्यासाठी हजारो उदाहरणांचे विश्लेषण करतात, शेवटी शिकलेल्या पॅटर्न्सचा वापर करून नवीन मजकूरांचे अर्थ लावण्यास सक्षम होतात.
 
 ### GitHub Models का?
 
-आम्ही GitHub Models वापरत आहोत कारण ते व्यावसायिक-स्तरीय एआयसाठी प्रवेश देते ज्यासाठी आपली स्वतःची एआय पायाभूत सुविधा सेट करण्याची आवश्यकता नाही (जे सध्या तुम्हाला करायचे नाही!). हे हवामान API वापरण्यासारखे आहे, स्वतः हवामान अंदाज करण्यासाठी सर्वत्र हवामान स्टेशन सेट करण्याऐवजी.
-
-हे मूलतः "AI-as-a-Service" आहे, आणि सर्वात चांगली गोष्ट म्हणजे? सुरुवात करण्यासाठी ते विनामूल्य आहे, त्यामुळे तुम्ही मोठा खर्च न करता प्रयोग करू शकता.
+आम्ही GitHub Models वापरत आहोत कारण ते एक व्यावसायिक कारण आहे – ते आपल्याला आपले स्वतःचे एआय इन्फ्रास्ट्रक्चर सेट अप न करता एंटरप्राइझ-स्तरीय एआयमध्ये प्रवेश देते (जे, माझ्यावर विश्वास ठेवा, तुम्हाला सध्या करायचे नाही!). हे मूलतः "AI-as-a-Service" आहे आणि सर्वोत्तम भाग? सुरुवात करण्यासाठी ते विनामूल्य आहे, त्यामुळे तुम्ही मोठ्या बिलाची चिंता न करता प्रयोग करू शकता.
 
 ```mermaid
 graph LR
@@ -76,27 +137,80 @@ graph LR
     B --> A
 ```
 
-आम्ही GitHub Models आमच्या बॅकएंड इंटिग्रेशनसाठी वापरणार आहोत, जे व्यावसायिक-स्तरीय एआय क्षमतांसाठी विकसक-अनुकूल इंटरफेस प्रदान करते. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) हे एक चाचणी वातावरण आहे जिथे तुम्ही वेगवेगळ्या एआय मॉडेल्ससह प्रयोग करू शकता आणि कोडमध्ये अंमलबजावणी करण्यापूर्वी त्यांची क्षमता समजू शकता.
+आम्ही GitHub Models आमच्या बॅकएंड इंटिग्रेशनसाठी वापरू, जे व्यावसायिक दर्जाच्या एआय क्षमतेसाठी डेव्हलपर-अनुकूल इंटरफेसद्वारे प्रवेश प्रदान करते. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) एक चाचणी वातावरण म्हणून काम करते जिथे तुम्ही वेगवेगळ्या एआय मॉडेल्ससह प्रयोग करू शकता आणि कोडमध्ये त्यांची अंमलबजावणी करण्यापूर्वी त्यांची क्षमता समजू शकता.
+
+## 🧠 एआय अॅप्लिकेशन डेव्हलपमेंट इकोसिस्टम
+
+```mermaid
+mindmap
+  root((AI Development))
+    Understanding AI
+      Generative Models
+        Pattern Recognition
+        Content Generation
+        Context Understanding
+        Response Synthesis
+      AI Parameters
+        Temperature Control
+        Token Limits
+        Top-p Filtering
+        System Prompts
+    Backend Architecture
+      API Integration
+        GitHub Models
+        Authentication
+        Request Handling
+        Error Management
+      Python Infrastructure
+        FastAPI Framework
+        Async Operations
+        Environment Security
+        CORS Configuration
+    Frontend Experience
+      Chat Interface
+        Real-time Updates
+        Message History
+        User Feedback
+        Loading States
+      Modern Web Tech
+        ES6 Classes
+        Async/Await
+        DOM Manipulation
+        Event Handling
+    Professional Patterns
+      Security Best Practices
+        Token Management
+        Input Validation
+        XSS Prevention
+        Error Boundaries
+      Production Readiness
+        Performance Optimization
+        Responsive Design
+        Accessibility
+        Testing Strategies
+```
+
+**मूलभूत तत्त्व**: एआय अॅप्लिकेशन डेव्हलपमेंट पारंपरिक वेब डेव्हलपमेंट कौशल्यांना एआय सेवा इंटिग्रेशनसह एकत्र करते, बुद्धिमान अॅप्लिकेशन्स तयार करते जे वापरकर्त्यांना नैसर्गिक आणि प्रतिसादात्मक वाटतात.
 
-![GitHub Models AI Playground इंटरफेस ज्यामध्ये मॉडेल निवड आणि चाचणी क्षेत्र आहे](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.mr.png)
+![GitHub Models AI Playground इंटरफेस मॉडेल निवड आणि चाचणी क्षेत्रासह](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.mr.png)
 
 **प्लेग्राउंड इतके उपयुक्त का आहे:**
 - **वेगवेगळे एआय मॉडेल्स** जसे GPT-4o-mini, Claude आणि इतर (सर्व विनामूल्य!) वापरून पहा
 - **तुमच्या कल्पना आणि प्रॉम्प्ट्स** कोड लिहिण्यापूर्वी चाचणी करा
-- **तुमच्या आवडत्या प्रोग्रामिंग भाषेत** तयार कोड स्निपेट्स मिळवा
-- **सेटिंग्ज बदलून पहा** जसे सर्जनशीलता स्तर आणि प्रतिसादाची लांबी, त्याचा आउटपुटवर कसा परिणाम होतो ते पाहा
+- **तयार कोड स्निपेट्स** तुमच्या आवडत्या प्रोग्रामिंग भाषेत मिळवा
+- **सेटिंग्ज बदलून पहा** जसे की क्रिएटिव्हिटी लेव्हल आणि प्रतिसादाची लांबी, त्याचा आउटपुटवर कसा परिणाम होतो ते पाहा
 
-थोडा प्रयोग केल्यानंतर, फक्त "Code" टॅबवर क्लिक करा आणि तुमची प्रोग्रामिंग भाषा निवडा, ज्यामुळे तुम्हाला आवश्यक अंमलबजावणी कोड मिळेल.
+थोडा प्रयोग केल्यानंतर, फक्त "Code" टॅबवर क्लिक करा आणि तुमची प्रोग्रामिंग भाषा निवडा, ज्यामुळे तुम्हाला लागणारा अंमलबजावणी कोड मिळेल.
 
-![प्लेग्राउंड निवड ज्यामध्ये वेगवेगळ्या प्रोग्रामिंग भाषांसाठी कोड जनरेशन पर्याय आहेत](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.mr.png)
+![प्लेग्राउंड निवड कोड जनरेशन पर्याय वेगवेगळ्या प्रोग्रामिंग भाषांसाठी दर्शवित आहे](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.mr.png)
 
 ## Python बॅकएंड इंटिग्रेशन सेट करणे
 
-आता Python वापरून एआय इंटिग्रेशन अंमलात आणूया. Python एआय अॅप्लिकेशन्ससाठी उत्कृष्ट आहे कारण त्याचा साधा सिंटॅक्स आणि शक्तिशाली लायब्ररी आहेत. आपण GitHub Models प्लेग्राउंडमधील कोडसह प्रारंभ करू आणि नंतर ते पुनर्रचना करून पुनर्वापरयोग्य, उत्पादन-तयार फंक्शनमध्ये बदलू.
+आता Python वापरून एआय इंटिग्रेशन अंमलात आणूया. Python एआय अॅप्लिकेशन्ससाठी उत्कृष्ट आहे कारण त्याचा साधा सिंटॅक्स आणि शक्तिशाली लायब्ररी आहेत. आपण GitHub Models प्लेग्राउंडमधून कोड सुरू करू आणि नंतर त्याला पुनर्वापर करण्यायोग्य, उत्पादन-तयार फंक्शनमध्ये सुधारित करू.
 
 ### बेस इंप्लिमेंटेशन समजून घेणे
 
-जेव्हा तुम्ही प्लेग्राउंडमधून Python कोड घेतात, तेव्हा तुम्हाला असे काहीतरी मिळेल. सुरुवातीला ते जास्त वाटत असल्यास काळजी करू नका – चला त्याचा तुकड्यांमध्ये अभ्यास करूया:
+जेव्हा तुम्ही प्लेग्राउंडमधून Python कोड घेता, तेव्हा तुम्हाला असे काहीतरी दिसेल. जर ते सुरुवातीला खूप वाटत असेल तर काळजी करू नका – चला त्यावर तुकड्यांमध्ये चर्चा करूया:
 
 ```python
 """Run this model in Python
@@ -113,7 +227,6 @@ client = OpenAI(
     api_key=os.environ["GITHUB_TOKEN"],
 )
 
-```python
 response = client.chat.completions.create(
     messages=[
         {
@@ -134,17 +247,17 @@ response = client.chat.completions.create(
 print(response.choices[0].message.content)
 ```
 
-**या कोडमध्ये काय घडते:**
+**या कोडमध्ये काय घडत आहे:**
 - **आम्ही आवश्यक टूल्स आयात करतो**: `os` पर्यावरणीय व्हेरिएबल्स वाचण्यासाठी आणि `OpenAI` एआयशी संवाद साधण्यासाठी
-- **आम्ही OpenAI क्लायंट सेट करतो** GitHub च्या एआय सर्व्हर्सकडे निर्देशित करण्यासाठी
-- **आम्ही GitHub टोकन वापरून प्रमाणीकरण करतो** (यावर नंतर अधिक!)
-- **आम्ही संवाद संरचित करतो** वेगवेगळ्या "भूमिका"सह – नाटकासाठी दृश्य सेट करण्यासारखे
-- **आम्ही एआयला विनंती पाठवतो** काही फाइन-ट्यूनिंग पॅरामीटर्ससह
-- **आम्ही प्रतिसाद मजकूर काढतो** परत आलेल्या सर्व डेटामधून
+- **OpenAI क्लायंट सेट करतो**: GitHub च्या एआय सर्व्हर्सकडे निर्देशित करण्यासाठी
+- **प्रमाणीकरण करतो**: विशेष GitHub टोकन वापरून (यावर थोडक्यात चर्चा करू!)
+- **संवाद संरचना करतो**: वेगवेगळ्या "भूमिका"सह – नाटकासाठी दृश्य सेट करण्यासारखे
+- **विनंती पाठवतो**: एआयकडे काही फाइन-ट्यूनिंग पॅरामीटर्ससह
+- **प्रतिसाद मजकूर काढतो**: परत आलेल्या सर्व डेटामधून
 
-### संदेश भूमिकांचे महत्त्व: एआय संवाद फ्रेमवर्क
+### संदेश भूमिका समजून घेणे: एआय संवाद फ्रेमवर्क
 
-एआय संवाद विशिष्ट संरचनेचा वापर करतात ज्यामध्ये वेगवेगळ्या "भूमिका" असतात ज्यांचे वेगवेगळे उद्देश असतात:
+एआय संवाद विशिष्ट संरचना वापरतात ज्यामध्ये वेगवेगळ्या "भूमिका" असतात ज्यांचे वेगवेगळे उद्देश असतात:
 
 ```python
 messages=[
@@ -160,27 +273,27 @@ messages=[
 ```
 
 **हे नाटक दिग्दर्शित करण्यासारखे आहे:**
-- **सिस्टम भूमिका**: अभिनेताासाठी स्टेज निर्देशांसारखे – एआयला कसे वागायचे, कोणत्या व्यक्तिमत्त्वाने उत्तर द्यायचे ते सांगते
-- **वापरकर्ता भूमिका**: अॅप्लिकेशन वापरणाऱ्या व्यक्तीचा प्रत्यक्ष प्रश्न किंवा संदेश
-- **असिस्टंट भूमिका**: एआयचे उत्तर (तुम्ही हे पाठवत नाही, पण ते संवाद इतिहासात दिसते)
+- **सिस्टम भूमिका**: अभिनेता/अभिनेत्रीसाठी स्टेजचे निर्देश – एआयला कसे वागायचे, कोणती व्यक्तिमत्त्व असावी आणि कसे प्रतिसाद द्यायचे ते सांगते
+- **वापरकर्ता भूमिका**: अॅप्लिकेशन वापरणाऱ्या व्यक्तीचा वास्तविक प्रश्न किंवा संदेश
+- **असिस्टंट भूमिका**: एआयचा प्रतिसाद (तुम्ही हे पाठवत नाही, परंतु ते संवाद इतिहासात दिसते)
 
-**वास्तविक जगातील उदाहरण**: कल्पना करा की तुम्ही पार्टीत तुमच्या मित्राची ओळख करून देत आहात:
-- **सिस्टम संदेश**: "हा माझा मित्र सारा आहे, ती एक डॉक्टर आहे जी वैद्यकीय संकल्पना सोप्या भाषेत स्पष्ट करण्यात उत्कृष्ट आहे"
-- **वापरकर्ता संदेश**: "तुम्ही लसी कशा कार्य करतात ते स्पष्ट करू शकता का?"
-- **असिस्टंट प्रतिसाद**: सारा एक मैत्रीपूर्ण डॉक्टर म्हणून उत्तर देते, वकील किंवा शेफ म्हणून नाही
+**वास्तविक जीवनातील उदाहरण**: कल्पना करा की तुम्ही पार्टीत एखाद्या मित्राला कोणीतरी ओळख करून देत आहात:
+- **सिस्टम संदेश**: "ही माझी मैत्रीण सारा आहे, ती एक डॉक्टर आहे जी वैद्यकीय संकल्पना सोप्या शब्दात स्पष्ट करण्यात उत्कृष्ट आहे"
+- **वापरकर्ता संदेश**: "तुम्ही मला लसी कशा कार्य करतात ते स्पष्ट करू शकता का?"
+- **असिस्टंट प्रतिसाद**: सारा एक मैत्रीपूर्ण डॉक्टर म्हणून प्रतिसाद देते, वकील किंवा शेफ म्हणून नाही
 
 ### एआय पॅरामीटर्स समजून घेणे: प्रतिसाद वर्तनाचे फाइन-ट्यूनिंग
 
-एआय API कॉलमधील संख्यात्मक पॅरामीटर्स मॉडेल प्रतिसाद कसे तयार करतात ते नियंत्रित करतात. हे सेटिंग्ज तुम्हाला वेगवेगळ्या वापर प्रकरणांसाठी एआयचे वर्तन समायोजित करण्याची परवानगी देतात:
+एआय API कॉल्समधील संख्यात्मक पॅरामीटर्स मॉडेल प्रतिसाद कसा तयार करतो हे नियंत्रित करतात. हे सेटिंग्ज तुम्हाला वेगवेगळ्या वापराच्या प्रकरणांसाठी एआयचे वर्तन समायोजित करण्यास अनुमती देतात:
 
-#### तापमान (0.0 ते 2.0): सर्जनशीलता नियंत्रण
+#### तापमान (0.0 ते 2.0): क्रिएटिव्हिटी डायल
 
 **याचा उपयोग**: एआयचे प्रतिसाद किती सर्जनशील किंवा अंदाजानुसार असतील ते नियंत्रित करते.
 
-**जॅझ संगीतकाराच्या इम्प्रोव्हायझेशन स्तरासारखे विचार करा:**
-- **तापमान = 0.1**: प्रत्येक वेळी एकच धून वाजवणे (अत्यंत अंदाजानुसार)
-- **तापमान = 0.7**: काही चवदार बदलांसह ओळखण्यायोग्य राहणे (संतुलित सर्जनशीलता)
-- **तापमान = 1.5**: पूर्ण प्रयोगात्मक जॅझ अनपेक्षित वळणांसह (अत्यंत सर्जनशील)
+**जॅझ संगीतकाराच्या सुधारणा पातळीप्रमाणे विचार करा**:
+- **तापमान = 0.1**: प्रत्येक वेळी अगदी समान धून वाजवणे (अत्यंत अंदाजानुसार)
+- **तापमान = 0.7**: ओळखण्यायोग्य राहून काही चवदार बदल जोडणे (संतुलित सर्जनशीलता)
+- **तापमान = 1.5**: अनपेक्षित वळणांसह पूर्ण प्रायोगिक जॅझ (अत्यंत अप्रत्याशित)
 
 ```python
 # Very predictable responses (good for factual questions)
@@ -200,10 +313,10 @@ response = client.chat.completions.create(
 
 **याचा उपयोग**: एआयच्या प्रतिसादाची लांबी किती असावी यावर मर्यादा सेट करते.
 
-**टोकन्स साधारणतः शब्दांशी समतुल्य असतात** (अंदाजे 1 टोकन = इंग्रजीतील 0.75 शब्द):
-- **max_tokens=50**: लहान आणि सोपे (जसे टेक्स्ट संदेश)
-- **max_tokens=500**: एक किंवा दोन परिच्छेद
-- **max_tokens=2000**: उदाहरणांसह सविस्तर स्पष्टीकरण
+**टोकन्स साधारणतः शब्दांशी समतुल्य असतात** (सुमारे 1 टोकन = इंग्रजीमध्ये 0.75 शब्द):
+- **max_tokens=50**: लहान आणि गोड (जसे की टेक्स्ट संदेश)
+- **max_tokens=500**: एक किंवा दोन चांगले परिच्छेद
+- **max_tokens=2000**: उदाहरणांसह तपशीलवार स्पष्टीकरण
 
 ```python
 # Short, concise answers
@@ -223,16 +336,16 @@ response = client.chat.completions.create(
 
 **याचा उपयोग**: एआय सर्वात संभाव्य प्रतिसादांवर किती लक्ष केंद्रित करते ते नियंत्रित करते.
 
-**एआयकडे मोठा शब्दसंग्रह आहे, प्रत्येक शब्द किती संभाव्य आहे यावर आधारित रँकिंग विचार करा:**
-- **top_p=0.1**: फक्त टॉप 10% संभाव्य शब्द विचारात घेतो (अत्यंत लक्ष केंद्रित)
-- **top_p=0.9**: संभाव्य शब्दांपैकी 90% विचारात घेतो (जास्त सर्जनशील)
+**एआयकडे प्रचंड शब्दसंग्रह आहे, प्रत्येक शब्द किती संभाव्य आहे यावर आधारित रँक केलेला आहे असे चित्रित करा**:
+- **top_p=0.1**: फक्त शीर्ष 10% संभाव्य शब्द विचारात घेतो (अत्यंत लक्ष केंद्रित)
+- **top_p=0.9**: संभाव्य शब्दांपैकी 90% विचारात घेतो (अधिक सर्जनशील)
 - **top_p=1.0**: सर्वकाही विचारात घेतो (कमाल विविधता)
 
 **उदाहरणार्थ**: जर तुम्ही विचारले "आकाश सामान्यतः..."
 - **कमी top_p**: जवळजवळ निश्चितपणे "निळे" म्हणेल
 - **उच्च top_p**: "निळे", "ढगाळ", "विशाल", "बदलणारे", "सुंदर" इत्यादी म्हणू शकते
 
-### सर्वकाही एकत्र ठेवणे: वेगवेगळ्या वापर प्रकरणांसाठी पॅरामीटर संयोजन
+### सर्वकाही एकत्र ठेवणे: वेगवेगळ्या वापराच्या प्रकरणांसाठी पॅरामीटर संयोजन
 
 ```python
 # For factual, consistent answers (like a documentation bot)
@@ -257,7 +370,25 @@ conversational_params = {
 }
 ```
 
-**हे पॅरामीटर का महत्त्वाचे आहेत हे समजून घेणे**: वेगवेगळ्या अॅप्लिकेशन्सना वेगवेगळ्या प्रकारच्या प्रतिसादांची आवश्यकता असते. ग्राहक सेवा बॉटने सुसंगत आणि तथ्यात्मक असावे (कमी तापमान), तर सर्जनशील लेखन सहाय्यकाने कल्पक आणि विविध असावे (उच्च तापमान). या पॅरामीटर्स समजून घेणे तुम्हाला तुमच्या एआयच्या व्यक्तिमत्त्वावर आणि प्रतिसाद शैलीवर नियंत्रण देते.
+```mermaid
+quadrantChart
+    title AI Parameter Optimization Matrix
+    x-axis Low Creativity --> High Creativity
+    y-axis Short Response --> Long Response
+    
+    quadrant-1 Creative Content
+    quadrant-2 Detailed Analysis
+    quadrant-3 Quick Facts
+    quadrant-4 Conversational AI
+    
+    Documentation Bot: [0.2, 0.3]
+    Customer Service: [0.4, 0.4]
+    General Assistant: [0.7, 0.5]
+    Creative Writer: [0.9, 0.9]
+    Brainstorming Tool: [0.8, 0.8]
+```
+
+**हे पॅरामीटर्स का महत्त्वाचे आहेत हे समजून घेणे**: वेगवेगळ्या अॅप्लिकेशन्सना वेगवेगळ्या प्रकारच्या प्रतिसादांची आवश्यकता असते. ग्राहक सेवा बॉटने सुसंगत आणि तथ्यात्मक असावे (कमी तापमान), तर सर्जनशील लेखन सहाय्यकाने कल्पक आणि विविध असावे (उच्च तापमान). या पॅरामीटर्स समजून घेणे तुम्हाला तुमच्या एआयच्या व्यक्तिमत्त्वावर आणि प्रतिसाद शैलीवर नियंत्रण देते.
 ```
 
 **Here's what's happening in this code:**
@@ -323,96 +454,89 @@ def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
     return asyncio.run(call_llm_async(prompt, system_message))
 ```
 
-**या सुधारित फंक्शनचे समजून घेणे:**
+**या सुधारित फंक्शनचे समजून घेणे**:
 - **दोन पॅरामीटर्स स्वीकारते**: वापरकर्त्याचा प्रॉम्प्ट आणि पर्यायी सिस्टम संदेश
-- **सामान्य सहाय्यक वर्तनासाठी** डीफॉल्ट सिस्टम संदेश प्रदान करते
+- **सामान्य सहाय्यक वर्तनासाठी** एक डीफॉल्ट सिस्टम संदेश प्रदान करते
 - **योग्य Python प्रकाराच्या सूचनांचा वापर करते** चांगल्या कोड दस्तऐवजीकरणासाठी
-- **फक्त प्रतिसाद सामग्री परत करते**, ज्यामुळे आमच्या वेब API मध्ये वापरणे सोपे होते
-- **सारखे मॉडेल पॅरामीटर्स राखते** सुसंगत एआय वर्तनासाठी
+- **फक्त प्रतिसाद सामग्री परत करते**,
+**2. आउटपुट स्वरूपन**: AI ला प्रतिसाद कसा संरचित करायचा ते सांगा  
+```python
+system_prompt = """
+You are a technical mentor. Always structure your responses as:
+1. Quick Answer (1-2 sentences)
+2. Detailed Explanation 
+3. Code Example
+4. Common Pitfalls to Avoid
+5. Next Steps for Learning
+"""
+```
+  
+**3. बंधन सेट करणे**: AI ने काय करू नये ते परिभाषित करा  
+```python
+system_prompt = """
+You are a coding tutor focused on teaching best practices. Never write complete 
+solutions for the user - instead, guide them with hints and questions so they 
+learn by doing. Always explain the 'why' behind coding decisions.
+"""
+```
+  
+#### तुमच्या चॅट असिस्टंटसाठी हे का महत्त्वाचे आहे  
 
-### सिस्टम प्रॉम्प्ट्सचे जादू: एआय व्यक्तिमत्त्व प्रोग्रामिंग
+सिस्टम प्रॉम्प्ट्स समजून घेणे तुम्हाला विशेष AI असिस्टंट्स तयार करण्याची अविश्वसनीय क्षमता देते:  
+- **ग्राहक सेवा बॉट**: मदत करणारा, संयमी, धोरण-समज  
+- **शिक्षण ट्यूटर**: प्रोत्साहन देणारा, पायरी-पायरीने शिकवणारा, समजून घेण्याची खात्री करणारा  
+- **सर्जनशील भागीदार**: कल्पक, कल्पनांवर काम करणारा, "काय असेल?" विचारणारा  
+- **तांत्रिक तज्ज्ञ**: अचूक, तपशीलवार, सुरक्षा-जागरूक  
 
-जर पॅरामीटर्स एआय कसे विचार करते ते नियंत्रित करत असतील, तर सिस्टम प्रॉम्प्ट्स एआय कोण आहे असे विचार करते ते नियंत्रित करतात. एआयसह काम करण्याचा हा प्रामाणिकपणे सर्वात रोमांचक भाग आहे – तुम्ही एआयला संपूर्ण व्यक्तिमत्त्व, तज्ज्ञ स्तर आणि संवाद शैली देत आहात.
+**मुख्य अंतर्दृष्टी**: तुम्ही फक्त AI API कॉल करत नाही आहात – तुम्ही तुमच्या विशिष्ट उपयोगासाठी सेवा देणारी सानुकूल AI व्यक्तिमत्व तयार करत आहात. हे आधुनिक AI अनुप्रयोगांना सामान्य वाटण्याऐवजी सानुकूल आणि उपयुक्त बनवते.  
 
-**सिस्टम प्रॉम्प्ट्स वेगवेगळ्या भूमिकांसाठी वेगवेगळ्या अभिनेत्यांना कास्ट करण्यासारखे आहेत**: एक सामान्य सहाय्यक असण्याऐवजी, तुम्ही वेगवेगळ्या परिस्थितींसाठी विशेष तज्ज्ञ तयार करू शकता. तुम्हाला संयमी शिक्षक हवा आहे? सर्जनशील कल्पनांचा साथीदार हवा आहे? व्यवसाय सल्लागार हवा आहे? फक्त सिस्टम प्रॉम्प्ट बदला!
+### 🎯 शैक्षणिक तपासणी: AI व्यक्तिमत्व प्रोग्रामिंग  
 
-#### सिस्टम प्रॉम्प्ट्स इतके शक्तिशाली का आहेत
+**थांबा आणि विचार करा**: तुम्ही नुकतेच सिस्टम प्रॉम्प्ट्सद्वारे AI व्यक्तिमत्व प्रोग्राम करण्यास शिकले. हे आधुनिक AI अनुप्रयोग विकासातील मूलभूत कौशल्य आहे.  
 
-येथे आकर्षक भाग आहे: एआय मॉडेल्स असंख्य संवादांवर प्रशिक्षित केले गेले आहेत जिथे लोक वेगवेगळ्या भूमिका आणि तज्ज्ञ स्तर स्वीकारतात. जेव्हा तुम्ही एआयला विशिष्ट भूमिका देता, तेव्हा ते सर्व शिकलेल्या पॅटर्न सक्रिय करणारे स्विच चालू करण्यासारखे आहे.
+**जलद स्व-मूल्यांकन**:  
+- तुम्ही स्पष्ट करू शकता की सिस्टम प्रॉम्प्ट्स नियमित वापरकर्ता संदेशांपेक्षा कसे वेगळे आहेत?  
+- तापमान आणि top_p पॅरामीटर्समध्ये काय फरक आहे?  
+- तुम्ही विशिष्ट उपयोगासाठी (जसे की कोडिंग ट्यूटर) सिस्टम प्रॉम्प्ट कसे तयार कराल?  
 
-**हे एआयसाठी पद्धत अभिनयासारखे आहे**: अभिनेत्याला सांगा "तुम्ही एक ज्ञानी वृद्ध प्राध्यापक आहात" आणि ते आपोआप त्यांची मुद्रा, शब्दसंग्रह आणि वर्तन समायोजित कसे करतात ते पहा. एआय भाषेच्या पॅटर्नसह काहीसे आश्चर्यकारकपणे समान करते.
+**वास्तविक-जगाशी संबंध**: तुम्ही शिकलेली सिस्टम प्रॉम्प्ट तंत्रे प्रत्येक प्रमुख AI अनुप्रयोगांमध्ये वापरली जातात - GitHub Copilot च्या कोडिंग सहाय्यापासून ChatGPT च्या संवादात्मक इंटरफेसपर्यंत. तुम्ही प्रमुख तंत्रज्ञान कंपन्यांमधील AI उत्पादन संघांनी वापरलेले समान नमुने शिकत आहात.  
 
-#### प्रभावी सिस्टम प्रॉम्प्ट्स तयार करणे: कला आणि विज्ञान
+**चॅलेंज प्रश्न**: तुम्ही वेगवेगळ्या वापरकर्त्यांसाठी (नवशिक्या विरुद्ध तज्ज्ञ) वेगवेगळ्या AI व्यक्तिमत्वांची रचना कशी कराल? प्रॉम्प्ट इंजिनिअरिंगद्वारे समान अंतर्गत AI मॉडेल वेगवेगळ्या प्रेक्षकांना कसे सेवा देऊ शकते याचा विचार करा.  
 
-**उत्कृष्ट सिस्टम प्रॉम्प्टची रचना:**
-1. **भूमिका/ओळख**: एआय कोण आहे?
-2. **तज्ज्ञता**: त्यांना काय माहित आहे?
-3. **संवाद शैली**: ते कसे बोलतात?
-4. **विशिष्ट सूचना**: त्यांना कशावर लक्ष केंद्रित करावे?
+## FastAPI सह वेब API तयार करणे: तुमचा उच्च-प्रदर्शन AI संवाद केंद्र  
 
-```python
-# ❌ Vague system prompt
-"You are helpful."
+आता तुमच्या फ्रंटएंडला AI सेवांशी जोडणारा बॅकएंड तयार करूया. आम्ही FastAPI वापरू, एक आधुनिक Python फ्रेमवर्क जे AI अनुप्रयोगांसाठी API तयार करण्यात उत्कृष्ट आहे.  
 
-# ✅ Detailed, effective system prompt
-"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
-```
+FastAPI या प्रकारच्या प्रकल्पासाठी अनेक फायदे देते: समवर्ती विनंत्या हाताळण्यासाठी अंगभूत async समर्थन, स्वयंचलित API दस्तऐवज निर्मिती, आणि उत्कृष्ट कार्यक्षमता. तुमचा FastAPI सर्व्हर फ्रंटएंडकडून विनंत्या प्राप्त करणारा, AI सेवांशी संवाद साधणारा आणि स्वरूपित प्रतिसाद परत करणारा मध्यस्थ म्हणून कार्य करतो.  
 
-#### संदर्भासह सिस्टम प्रॉम्प्ट्सचे उदाहरण
+### AI अनुप्रयोगांसाठी FastAPI का?  
 
-चला वेगवेगळ्या सिस्टम प्रॉम्प्ट्स कसे पूर्णपणे वेगळ्या एआय व्यक्तिमत्त्व तयार करतात ते पाहूया:
+तुम्हाला आश्चर्य वाटू शकते: "मी फक्त माझ्या फ्रंटएंड JavaScript मधून थेट AI ला कॉल करू शकत नाही का?" किंवा "Flask किंवा Django ऐवजी FastAPI का?" उत्तम प्रश्न!  
 
-```python
-# Example 1: The Patient Teacher
-teacher_prompt = """
-You are an experienced programming instructor who has taught thousands of students. 
-You break down complex concepts into simple steps, use analogies from everyday life, 
-and always check if the student understands before moving on. You're encouraging 
-and never make students feel bad for not knowing something.
-"""
+**आम्ही जे तयार करत आहोत त्यासाठी FastAPI योग्य का आहे:**  
+- **मूलतः Async**: अनेक AI विनंत्या एकाच वेळी अडथळा न येता हाताळू शकते  
+- **स्वयंचलित दस्तऐवज**: `/docs` ला भेट द्या आणि एक सुंदर, परस्परसंवादी API दस्तऐवज पृष्ठ विनामूल्य मिळवा  
+- **अंगभूत सत्यापन**: समस्या निर्माण होण्यापूर्वी त्रुटी पकडते  
+- **अत्यंत वेगवान**: सर्वात वेगवान Python फ्रेमवर्कपैकी एक  
+- **आधुनिक Python**: Python च्या सर्व नवीनतम आणि उत्कृष्ट वैशिष्ट्यांचा वापर करते  
 
-# Example 2: The Creative Collaborator  
-creative_prompt = """
-You are a creative writing partner who loves brainstorming wild ideas. You're 
-enthusiastic, imaginative, and always build on the user's ideas rather than 
-replacing them. You ask thought-provoking questions to spark creativity and 
-offer unexpected perspectives that make stories more interesting.
-"""
-
-# Example 3: The Strategic Business Advisor
-business_prompt = """
-You are a strategic business consultant with an MBA and 20 years of experience 
-helping startups scale. You think in frameworks, provide structured advice, 
-and always consider both short-term tactics and long-term strategy. You ask 
-probing questions to understand the full business context before giving advice.
-"""
-```
-
-#### सिस्टम प्रॉम्प्ट
-**आम्ही जे तयार करत आहोत त्यासाठी FastAPI का योग्य आहे:**
-- **डिफॉल्टने Async**: एकाच वेळी अनेक AI विनंत्या हाताळू शकते, अडचण न येता
-- **स्वयंचलित दस्तऐवज**: `/docs` ला भेट द्या आणि सुंदर, परस्परसंवादी API दस्तऐवजीकरण पृष्ठ विनामूल्य मिळवा
-- **अंतर्गत सत्यापन**: समस्या होण्यापूर्वी त्रुटी पकडते
-- **अतिशय वेगवान**: Python च्या सर्वात जलद फ्रेमवर्कपैकी एक
-- **आधुनिक Python**: Python च्या सर्व नवीनतम आणि उत्कृष्ट वैशिष्ट्यांचा वापर करते
-
-**आणि आम्हाला बॅकएंड का आवश्यक आहे:**
+**आणि आपल्याला बॅकएंड का आवश्यक आहे:**  
 
-**सुरक्षा**: तुमचा AI API की हा पासवर्डसारखा आहे – जर तुम्ही तो फ्रंटएंड JavaScript मध्ये ठेवला, तर तुमच्या वेबसाइटचा सोर्स कोड पाहणारा कोणीही तो चोरू शकतो आणि तुमचे AI क्रेडिट्स वापरू शकतो. बॅकएंड संवेदनशील क्रेडेन्शियल्स सुरक्षित ठेवतो.
+**सुरक्षा**: तुमचा AI API की पासवर्डसारखा आहे – जर तुम्ही तो फ्रंटएंड JavaScript मध्ये ठेवला तर, तुमच्या वेबसाइटचा स्त्रोत कोड पाहणारा कोणीही तो चोरू शकतो आणि तुमचे AI क्रेडिट्स वापरू शकतो. बॅकएंड संवेदनशील क्रेडेन्शियल्स सुरक्षित ठेवतो.  
 
-**रेट लिमिटिंग आणि नियंत्रण**: बॅकएंड तुम्हाला वापरकर्ते किती वेळा विनंत्या करू शकतात हे नियंत्रित करण्यास, वापरकर्ता प्रमाणीकरण लागू करण्यास आणि वापर ट्रॅक करण्यासाठी लॉगिंग जोडण्यास अनुमती देते.
+**रेट लिमिटिंग आणि नियंत्रण**: बॅकएंड तुम्हाला वापरकर्ते किती वेळा विनंत्या करू शकतात हे नियंत्रित करण्यास, वापरकर्ता प्रमाणीकरण लागू करण्यास आणि वापर ट्रॅक करण्यासाठी लॉगिंग जोडण्यास अनुमती देते.  
 
-**डेटा प्रक्रिया**: तुम्हाला संभाषणे जतन करायची असतील, अयोग्य सामग्री फिल्टर करायची असेल किंवा अनेक AI सेवा एकत्र करायच्या असतील. बॅकएंडमध्ये ही लॉजिक राहते.
+**डेटा प्रक्रिया**: तुम्हाला संभाषणे जतन करायची असतील, अयोग्य सामग्री फिल्टर करायची असेल किंवा अनेक AI सेवा एकत्र करायच्या असतील. बॅकएंड ही लॉजिक ठेवण्याचे ठिकाण आहे.  
 
-**आर्किटेक्चर क्लायंट-सर्व्हर मॉडेलसारखे आहे:**
-- **फ्रंटएंड**: संवादासाठी वापरकर्ता इंटरफेस स्तर
-- **बॅकएंड API**: विनंती प्रक्रिया आणि रूटिंग स्तर
-- **AI सेवा**: बाह्य गणना आणि प्रतिसाद निर्मिती
-- **पर्यावरणीय व्हेरिएबल्स**: सुरक्षित कॉन्फिगरेशन आणि क्रेडेन्शियल्स संग्रह
+**आर्किटेक्चर क्लायंट-सर्व्हर मॉडेलसारखे आहे:**  
+- **फ्रंटएंड**: संवादासाठी वापरकर्ता इंटरफेस स्तर  
+- **बॅकएंड API**: विनंती प्रक्रिया आणि रूटिंग स्तर  
+- **AI सेवा**: बाह्य संगणन आणि प्रतिसाद निर्मिती  
+- **पर्यावरणीय व्हेरिएबल्स**: सुरक्षित कॉन्फिगरेशन आणि क्रेडेन्शियल्स स्टोरेज  
 
-### विनंती-प्रतिसाद प्रवाह समजून घेणे
+### विनंती-प्रतिसाद प्रवाह समजून घेणे  
 
-चला पाहूया जेव्हा वापरकर्ता संदेश पाठवतो तेव्हा काय होते:
+चला पाहूया जेव्हा वापरकर्ता संदेश पाठवतो तेव्हा काय होते:  
 
 ```mermaid
 sequenceDiagram
@@ -430,16 +554,16 @@ sequenceDiagram
     API->>Frontend: {"response": "Hello! How can I help?"}
     Frontend->>User: Displays AI message
 ```
+  
+**प्रत्येक चरण समजून घेणे:**  
+1. **वापरकर्ता संवाद**: व्यक्ती चॅट इंटरफेसमध्ये टाइप करते  
+2. **फ्रंटएंड प्रक्रिया**: JavaScript इनपुट कॅप्चर करते आणि JSON म्हणून स्वरूपित करते  
+3. **API सत्यापन**: FastAPI स्वयंचलितपणे Pydantic मॉडेल्स वापरून विनंती सत्यापित करते  
+4. **AI एकत्रीकरण**: बॅकएंड संदर्भ (सिस्टम प्रॉम्प्ट) जोडतो आणि AI सेवेला कॉल करतो  
+5. **प्रतिसाद हाताळणी**: API AI प्रतिसाद प्राप्त करते आणि आवश्यक असल्यास ते बदलू शकते  
+6. **फ्रंटएंड प्रदर्शन**: JavaScript चॅट इंटरफेसमध्ये प्रतिसाद दर्शवते  
 
-**प्रत्येक चरण समजून घेणे:**
-1. **वापरकर्ता संवाद**: व्यक्ती चॅट इंटरफेसमध्ये टाइप करते
-2. **फ्रंटएंड प्रक्रिया**: JavaScript इनपुट कॅप्चर करते आणि JSON म्हणून स्वरूपित करते
-3. **API सत्यापन**: FastAPI Pydantic मॉडेल्स वापरून विनंती स्वयंचलितपणे सत्यापित करते
-4. **AI एकत्रीकरण**: बॅकएंड संदर्भ (सिस्टम प्रॉम्प्ट) जोडतो आणि AI सेवेला कॉल करतो
-5. **प्रतिसाद हाताळणी**: API AI प्रतिसाद प्राप्त करते आणि आवश्यक असल्यास ते बदलू शकते
-6. **फ्रंटएंड प्रदर्शन**: JavaScript चॅट इंटरफेसमध्ये प्रतिसाद दर्शवते
-
-### API आर्किटेक्चर समजून घेणे
+### API आर्किटेक्चर समजून घेणे  
 
 ```mermaid
 sequenceDiagram
@@ -455,10 +579,33 @@ sequenceDiagram
     AI Function->>FastAPI: response text
     FastAPI->>Frontend: {"response": "Hello! How can I help?"}
 ```
+  
+```mermaid
+flowchart TD
+    A[User Input] --> B[Frontend Validation]
+    B --> C[HTTP POST Request]
+    C --> D[FastAPI Router]
+    D --> E[Pydantic Validation]
+    E --> F[AI Function Call]
+    F --> G[GitHub Models API]
+    G --> H[Response Processing]
+    H --> I[JSON Response]
+    I --> J[Frontend Update]
+    
+    subgraph "Security Layer"
+        K[CORS Middleware]
+        L[Environment Variables]
+        M[Error Handling]
+    end
+    
+    D --> K
+    F --> L
+    H --> M
+```
+  
+### FastAPI अनुप्रयोग तयार करणे  
 
-### FastAPI अॅप्लिकेशन तयार करणे
-
-चला आपले API चरण-दर-चरण तयार करूया. `api.py` नावाची फाइल तयार करा आणि खालील FastAPI कोड जोडा:
+चला आपला API पायरी-पायरीने तयार करूया. `api.py` नावाची फाइल तयार करा आणि खालील FastAPI कोड लिहा:  
 
 ```python
 # api.py
@@ -536,43 +683,43 @@ if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
 ```
+  
+**FastAPI अंमलबजावणी समजून घेणे:**  
+- **आयात करते** FastAPI आधुनिक वेब फ्रेमवर्क कार्यक्षमता आणि Pydantic डेटा सत्यापनासाठी  
+- **स्वयंचलित API दस्तऐवज तयार करते** (सर्व्हर चालू असताना `/docs` वर उपलब्ध)  
+- **CORS मिडलवेअर सक्षम करते** वेगवेगळ्या उत्पत्तीमधून फ्रंटएंड विनंत्या परवानगी देण्यासाठी  
+- **Pydantic मॉडेल्स परिभाषित करते** स्वयंचलित विनंती/प्रतिसाद सत्यापन आणि दस्तऐवजासाठी  
+- **अधिक चांगल्या कार्यक्षमतेसाठी async एंडपॉइंट्स वापरते**  
+- **योग्य HTTP स्थिती कोड आणि त्रुटी हाताळणी अंमलात आणते** HTTPException सह  
+- **संरचित लॉगिंग समाविष्ट करते** मॉनिटरिंग आणि डीबगिंगसाठी  
+- **सेवा स्थिती मॉनिटरिंगसाठी हेल्थ चेक एंडपॉइंट प्रदान करते**  
 
-**FastAPI अंमलबजावणी समजून घेणे:**
-- **आयात करते** FastAPI आधुनिक वेब फ्रेमवर्क कार्यक्षमतेसाठी आणि Pydantic डेटा सत्यापनासाठी
-- **स्वयंचलित API दस्तऐवजीकरण तयार करते** (सर्व्हर चालू असताना `/docs` वर उपलब्ध)
-- **CORS मिडलवेअर सक्षम करते** विविध उत्पत्तीमधून फ्रंटएंड विनंत्या अनुमती देण्यासाठी
-- **Pydantic मॉडेल्स परिभाषित करते** स्वयंचलित विनंती/प्रतिसाद सत्यापन आणि दस्तऐवजीकरणासाठी
-- **Async एंडपॉइंट्स वापरते** एकाच वेळी अनेक विनंत्या हाताळण्यासाठी चांगली कार्यक्षमता
-- **योग्य HTTP स्थिती कोड आणि त्रुटी हाताळणी अंमलात आणते** HTTPException सह
-- **संरचित लॉगिंग समाविष्ट करते** मॉनिटरिंग आणि डीबगिंगसाठी
-- **सेवा स्थितीचे निरीक्षण करण्यासाठी हेल्थ चेक एंडपॉइंट प्रदान करते**
+**FastAPI च्या पारंपरिक फ्रेमवर्क्सवरील मुख्य फायदे:**  
+- **स्वयंचलित सत्यापन**: Pydantic मॉडेल्स प्रक्रिया करण्यापूर्वी डेटा अखंडता सुनिश्चित करतात  
+- **परस्परसंवादी दस्तऐवज**: `/docs` ला भेट द्या स्वयंचलित, चाचणीयोग्य API दस्तऐवजासाठी  
+- **प्रकार सुरक्षा**: Python प्रकार संकेत runtime त्रुटी टाळतात आणि कोड गुणवत्ता सुधारतात  
+- **Async समर्थन**: अनेक AI विनंत्या एकाच वेळी अडथळा न येता हाताळा  
+- **कार्यक्षमता**: रिअल-टाइम अनुप्रयोगांसाठी लक्षणीय वेगवान विनंती प्रक्रिया  
 
-**पारंपरिक फ्रेमवर्कच्या तुलनेत FastAPI चे मुख्य फायदे:**
-- **स्वयंचलित सत्यापन**: Pydantic मॉडेल्स प्रक्रिया करण्यापूर्वी डेटा अखंडता सुनिश्चित करतात
-- **परस्परसंवादी दस्तऐवज**: स्वयंचलित, चाचणीयोग्य API दस्तऐवजीकरणासाठी `/docs` ला भेट द्या
-- **टाइप सुरक्षा**: Python टाइप हिन्ट्स रनटाइम त्रुटी टाळतात आणि कोड गुणवत्ता सुधारतात
-- **Async समर्थन**: एकाच वेळी अनेक AI विनंत्या अडथळा न येता हाताळा
-- **कार्यक्षमता**: रिअल-टाइम अॅप्लिकेशन्ससाठी लक्षणीय वेगवान विनंती प्रक्रिया
+### CORS समजून घेणे: वेबचा सुरक्षा रक्षक  
 
-### CORS समजून घेणे: वेबचा सुरक्षा रक्षक
+CORS (Cross-Origin Resource Sharing) म्हणजे इमारतीतील सुरक्षा रक्षकासारखे आहे जो पाहुण्यांना प्रवेश करण्यास परवानगी आहे की नाही हे तपासतो. चला हे का महत्त्वाचे आहे आणि तुमच्या अनुप्रयोगावर कसा परिणाम होतो ते समजून घेऊया.  
 
-CORS (Cross-Origin Resource Sharing) म्हणजे इमारतीतील सुरक्षा रक्षकासारखे आहे जो पाहुण्यांना प्रवेश करण्याची परवानगी आहे की नाही हे तपासतो. चला समजून घेऊया की याचा तुमच्या अॅप्लिकेशनवर कसा परिणाम होतो.
+#### CORS म्हणजे काय आणि ते का अस्तित्वात आहे?  
 
-#### CORS म्हणजे काय आणि ते का अस्तित्वात आहे?
+**समस्या**: कल्पना करा की कोणतीही वेबसाइट तुमच्या परवानगीशिवाय तुमच्या बँकेच्या वेबसाइटला विनंत्या करू शकते. ते सुरक्षा संकट असेल! ब्राउझर हे "समान-उत्पत्ती धोरण" द्वारे डीफॉल्टने प्रतिबंधित करतात.  
 
-**समस्या**: कल्पना करा की कोणतीही वेबसाइट तुमच्या परवानगीशिवाय तुमच्या बँकेच्या वेबसाइटवर विनंत्या करू शकते. ते सुरक्षा संकट असेल! ब्राउझर "समान-उत्पत्ती धोरण" द्वारे हे डिफॉल्टने प्रतिबंधित करतात.
+**समान-उत्पत्ती धोरण**: ब्राउझर फक्त वेब पृष्ठांना समान डोमेन, पोर्ट आणि प्रोटोकॉलमधून विनंत्या करण्याची परवानगी देतात.  
 
-**समान-उत्पत्ती धोरण**: ब्राउझर फक्त वेब पृष्ठांना त्याच डोमेन, पोर्ट आणि प्रोटोकॉलवर विनंत्या करण्याची परवानगी देतात जिथून ते लोड केले गेले.
+**वास्तविक-जगातील उपमा**: हे अपार्टमेंट इमारतीच्या सुरक्षेसारखे आहे – फक्त रहिवासी (समान उत्पत्ती) डीफॉल्टने इमारतीत प्रवेश करू शकतात. जर तुम्हाला मित्राला (वेगळ्या उत्पत्ती) भेट देऊ द्यायचे असेल, तर तुम्हाला स्पष्टपणे सुरक्षा सांगावी लागेल की ते ठीक आहे.  
 
-**वास्तविक जगातील उपमा**: हे अपार्टमेंट इमारतीच्या सुरक्षेसारखे आहे – फक्त रहिवासी (समान उत्पत्ती) डिफॉल्टने इमारतीमध्ये प्रवेश करू शकतात. जर तुम्हाला मित्राला (वेगळ्या उत्पत्ती) भेट देऊ द्यायचे असेल, तर तुम्हाला स्पष्टपणे सुरक्षा सांगणे आवश्यक आहे की ते ठीक आहे.
+#### तुमच्या विकासाच्या वातावरणातील CORS  
 
-#### तुमच्या विकासाच्या वातावरणातील CORS
+विकसनादरम्यान, तुमचा फ्रंटएंड आणि बॅकएंड वेगवेगळ्या पोर्टवर चालतो:  
+- फ्रंटएंड: `http://localhost:3000` (किंवा file:// जर HTML थेट उघडत असेल)  
+- बॅकएंड: `http://localhost:5000`  
 
-विकासादरम्यान, तुमचा फ्रंटएंड आणि बॅकएंड वेगवेगळ्या पोर्टवर चालतो:
-- फ्रंटएंड: `http://localhost:3000` (किंवा file:// जर HTML थेट उघडत असाल)
-- बॅकएंड: `http://localhost:5000`
-
-हे "वेगळ्या उत्पत्ती" मानले जातात जरी ते एकाच संगणकावर असले तरी!
+हे "वेगळ्या उत्पत्ती" मानले जातात जरी ते एकाच संगणकावर असले तरी!  
 
 ```python
 from fastapi.middleware.cors import CORSMiddleware
@@ -580,13 +727,13 @@ from fastapi.middleware.cors import CORSMiddleware
 app = FastAPI(__name__)
 CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"
 ```
+  
+**CORS कॉन्फिगरेशन प्रत्यक्षात काय करते:**  
+- **विशेष HTTP हेडर्स API प्रतिसादांमध्ये जोडते** जे ब्राउझरला सांगतात "ही क्रॉस-उत्पत्ती विनंती परवानगी आहे"  
+- **"प्रीफ्लाइट" विनंत्या हाताळते** (ब्राउझर कधीकधी वास्तविक विनंती पाठवण्यापूर्वी परवान्या तपासतात)  
+- **तुमच्या ब्राउझर कन्सोलमधील "CORS धोरणाद्वारे अवरोधित" त्रुटी टाळते**  
 
-**CORS कॉन्फिगरेशन प्रत्यक्षात काय करते:**
-- **विशेष HTTP हेडर्स API प्रतिसादांमध्ये जोडते** जे ब्राउझरला सांगतात "ही क्रॉस-उत्पत्ती विनंती अनुमत आहे"
-- **"प्रीफ्लाइट" विनंत्या हाताळते** (कधीकधी ब्राउझर वास्तविक विनंती पाठवण्यापूर्वी परवानग्या तपासतात)
-- **तुमच्या ब्राउझर कन्सोलमधील "CORS धोरणाद्वारे अवरोधित" त्रुटी टाळते**
-
-#### CORS सुरक्षा: विकास विरुद्ध उत्पादन
+#### CORS सुरक्षा: विकास विरुद्ध उत्पादन  
 
 ```python
 # 🚨 Development: Allows ALL origins (convenient but insecure)
@@ -601,43 +748,43 @@ if app.debug:  # Development mode
 else:  # Production mode
     CORS(app, origins=["https://yourdomain.com"])
 ```
+  
+**हे का महत्त्वाचे आहे**: विकासामध्ये, `CORS(app)` म्हणजे तुमचा दरवाजा अनलॉक ठेवण्यासारखे आहे – सोयीस्कर पण सुरक्षित नाही. उत्पादनामध्ये, तुम्हाला अचूकपणे सांगायचे आहे की कोणत्या वेबसाइट्स तुमच्या API शी संवाद साधू शकतात.  
 
-**हे का महत्त्वाचे आहे**: विकासामध्ये, `CORS(app)` म्हणजे तुमचा दरवाजा अनलॉक ठेवण्यासारखे आहे – सोयीस्कर पण सुरक्षित नाही. उत्पादनामध्ये, तुम्हाला अचूकपणे निर्दिष्ट करायचे आहे की कोणत्या वेबसाइट्स तुमच्या API शी संवाद साधू शकतात.
+#### सामान्य CORS परिस्थिती आणि उपाय  
 
-#### सामान्य CORS परिस्थिती आणि उपाय
+| परिस्थिती | समस्या | उपाय |  
+|----------|---------|----------|  
+| **स्थानिक विकास** | फ्रंटएंड बॅकएंडपर्यंत पोहोचू शकत नाही | FastAPI मध्ये CORSMiddleware जोडा |  
+| **GitHub Pages + Heroku** | तैनात फ्रंटएंड API पर्यंत पोहोचू शकत नाही | तुमच्या GitHub Pages URL ला CORS उत्पत्तीमध्ये जोडा |  
+| **कस्टम डोमेन** | उत्पादनामध्ये CORS त्रुटी | CORS उत्पत्ती तुमच्या डोमेनशी जुळवून अद्यतनित करा |  
+| **मोबाइल अ‍ॅप** | अ‍ॅप वेब API पर्यंत पोहोचू शकत नाही | तुमच्या अ‍ॅपचा डोमेन जोडा किंवा काळजीपूर्वक `*` वापरा |  
 
-| परिस्थिती | समस्या | उपाय |
-|-----------|--------|------|
-| **स्थानिक विकास** | फ्रंटएंड बॅकएंडपर्यंत पोहोचू शकत नाही | FastAPI मध्ये CORSMiddleware जोडा |
-| **GitHub Pages + Heroku** | तैनात फ्रंटएंड API पर्यंत पोहोचू शकत नाही | CORS उत्पत्तीमध्ये तुमचा GitHub Pages URL जोडा |
-| **कस्टम डोमेन** | उत्पादनात CORS त्रुटी | CORS उत्पत्ती तुमच्या डोमेनशी जुळवून अद्यतनित करा |
-| **मोबाइल अॅप** | अॅप वेब API पर्यंत पोहोचू शकत नाही | तुमच्या अॅपचा डोमेन जोडा किंवा काळजीपूर्वक `*` वापरा |
+**प्रो टिप**: तुम्ही तुमच्या ब्राउझरच्या डेव्हलपर टूल्समध्ये नेटवर्क टॅब अंतर्गत CORS हेडर्स तपासू शकता. प्रतिसादामध्ये `Access-Control-Allow-Origin` सारखे हेडर्स शोधा.  
 
-**प्रो टिप**: तुम्ही तुमच्या ब्राउझरच्या डेव्हलपर टूल्समध्ये नेटवर्क टॅब अंतर्गत CORS हेडर्स तपासू शकता. प्रतिसादामध्ये `Access-Control-Allow-Origin` सारखे हेडर्स शोधा.
+### त्रुटी हाताळणी आणि सत्यापन  
 
-### त्रुटी हाताळणी आणि सत्यापन
-
-आमच्या API मध्ये योग्य त्रुटी हाताळणी कशी समाविष्ट आहे हे लक्षात घ्या:
+आमच्या API मध्ये योग्य त्रुटी हाताळणी कशी समाविष्ट आहे हे लक्षात घ्या:  
 
 ```python
 # Validate that we received a message
 if not message:
     return jsonify({"error": "Message field is required"}), 400
 ```
+  
+**मुख्य सत्यापन तत्त्वे:**  
+- **आवश्यक फील्ड्ससाठी तपासते** विनंत्या प्रक्रिया करण्यापूर्वी  
+- **अर्थपूर्ण त्रुटी संदेश JSON स्वरूपात परत करते**  
+- **योग्य HTTP स्थिती कोड वापरते** (वाईट विनंत्यांसाठी 400)  
+- **समोरच्या विकासकांना समस्या डीबग करण्यात मदत करण्यासाठी स्पष्ट अभिप्राय प्रदान करते**  
 
-**मुख्य सत्यापन तत्त्वे:**
-- **आवश्यक फील्ड्ससाठी तपासते** विनंत्या प्रक्रिया करण्यापूर्वी
-- **अर्थपूर्ण त्रुटी संदेश JSON स्वरूपात परत करते**
-- **योग्य HTTP स्थिती कोड वापरते** (वाईट विनंत्यांसाठी 400)
-- **फ्रंटएंड विकसकांना समस्या डीबग करण्यात मदत करण्यासाठी स्पष्ट अभिप्राय प्रदान करते**
-
-## तुमचा बॅकएंड सेट करणे आणि चालवणे
+## तुमचा बॅकएंड सेट करणे आणि चालवणे  
 
-आता आमच्याकडे आमची AI एकत्रीकरण आणि FastAPI सर्व्हर तयार आहे, चला सर्व काही चालवूया. सेटअप प्रक्रियेमध्ये Python डिपेंडन्सी इंस्टॉल करणे, पर्यावरणीय व्हेरिएबल्स कॉन्फिगर करणे आणि तुमचा विकास सर्व्हर सुरू करणे समाविष्ट आहे.
+आता आमच्याकडे आमचा AI एकत्रीकरण आणि FastAPI सर्व्हर तयार आहे, चला सर्व काही चालवूया. सेटअप प्रक्रियेमध्ये Python अवलंबित्व स्थापित करणे, पर्यावरणीय व्हेरिएबल्स कॉन्फिगर करणे आणि तुमचा विकास सर्व्हर सुरू करणे समाविष्ट आहे.  
 
-### Python पर्यावरण सेटअप
+### Python पर्यावरण सेटअप  
 
-तुमचे Python विकास वातावरण सेट करूया. व्हर्च्युअल वातावरण म्हणजे मॅनहॅटन प्रोजेक्टच्या विभागीय दृष्टिकोनासारखे – प्रत्येक प्रकल्पाला विशिष्ट साधने आणि डिपेंडन्सीसह स्वतःची वेगळी जागा मिळते, विविध प्रकल्पांमधील संघर्ष टाळण्यासाठी.
+तुमचे Python विकास पर्यावरण सेट करूया. आभासी वातावरण म्हणजे मॅनहॅटन प्रोजेक्टच्या compartmentalized दृष्टिकोनासारखे – प्रत्येक प्रकल्पाला विशिष्ट साधने आणि अवलंबित्वांसह स्वतःचे वेगळे स्थान मिळते, वेगवेगळ्या प्रकल्पांमधील संघर्ष टाळतो.  
 
 ```bash
 # Navigate to your backend directory
@@ -655,31 +802,31 @@ source ./venv/bin/activate
 # Install the good stuff
 pip install openai fastapi uvicorn python-dotenv
 ```
+  
+**आम्ही काय केले:**  
+- **आमचा स्वतःचा छोटासा Python बबल तयार केला** जिथे आम्ही पॅकेजेस स्थापित करू शकतो ज्याचा इतर कोणत्याही गोष्टीवर परिणाम होणार नाही  
+- **ते सक्रिय केले** जेणेकरून आमचा टर्मिनल या विशिष्ट पर्यावरणाचा वापर करेल  
+- **आवश्यक गोष्टी स्थापित केल्या**: OpenAI AI मॅजिकसाठी, FastAPI आमच्या वेब API साठी, Uvicorn ते प्रत्यक्षात चालवण्यासाठी, आणि python-dotenv सुरक्षित गुपित व्यवस्थापनासाठी  
 
-**आम्ही काय केले:**
-- **आमचा स्वतःचा छोटासा Python बबल तयार केला** जिथे आम्ही पॅकेजेस इंस्टॉल करू शकतो इतर कोणत्याही गोष्टीवर परिणाम न करता
-- **ते सक्रिय केले** जेणेकरून आमचा टर्मिनल या विशिष्ट वातावरणाचा वापर करेल
-- **आवश्यक गोष्टी इंस्टॉल केल्या**: OpenAI AI साठी, FastAPI वेब API साठी, Uvicorn ते प्रत्यक्षात चालवण्यासाठी आणि python-dotenv सुरक्षित गुपित व्यवस्थापनासाठी
-
-**मुख्य डिपेंडन्सी स्पष्ट केल्या:**
-- **FastAPI**: आधुनिक, जलद वेब फ्रेमवर्क स्वयंचलित API दस्तऐवजीकरणासह
-- **Uvicorn**: FastAPI अॅप्लिकेशन्स चालवणारा अतिशय वेगवान ASGI सर्व्हर
-- **OpenAI**: GitHub मॉडेल्स आणि OpenAI API एकत्रीकरणासाठी अधिकृत लायब्ररी
-- **python-dotenv**: .env फाइल्समधून सुरक्षित पर्यावरणीय व्हेरिएबल्स लोड करणे
+**मुख्य अवलंबित्वे स्पष्ट केली:**  
+- **FastAPI**: आधुनिक, जलद वेब फ्रेमवर्क स्वयंचलित API दस्तऐवजांसह  
+- **Uvicorn**: FastAPI अनुप्रयोग चालवणारा अत्यंत जलद ASGI सर्व्हर  
+- **OpenAI**: GitHub मॉडेल्स आणि OpenAI API एकत्रीकरणासाठी अधिकृत लायब्ररी  
+- **python-dotenv**: .env फाइल्समधून सुरक्षित पर्यावरणीय व्हेरिएबल्स लोड करणे  
 
-### पर्यावरणीय कॉन्फिगरेशन: गुपित सुरक्षित ठेवणे
+### पर्यावरणीय कॉन्फिगरेशन: गुपिते सुरक्षित ठेवणे  
 
-API सुरू करण्यापूर्वी, वेब विकासातील सर्वात महत्त्वाचा धडा म्हणजे तुमची गुपिते खरोखर गुप्त कशी ठेवायची याबद्दल बोलणे आवश्यक आहे. पर्यावरणीय व्हेरिएबल्स म्हणजे सुरक्षित तिजोरीसारखे आहेत ज्यामध्ये फक्त तुमचा अॅप्लिकेशन प्रवेश करू शकतो.
+आमचा API सुरू करण्यापूर्वी, वेब विकासातील सर्वात महत्त्वाचा धडा म्हणजे गुपिते खरोखर गुपित कशी ठेवायची. पर्यावरणीय व्हेरिएबल्स म्हणजे एक सुरक्षित तिजोरी जिथे फक्त तुमचा अनुप्रयोग प्रवेश करू शकतो.  
 
-#### पर्यावरणीय व्हेरिएबल्स म्हणजे काय?
+#### पर्यावरणीय व्हेरिएबल्स म्हणजे काय?  
 
-**पर्यावरणीय व्हेरिएबल्स म्हणजे सुरक्षित ठेवण्याचे बॉक्स** – तुम्ही तुमची मौल्यवान सामग्री त्यात ठेवता आणि फक्त तुम्ही (आणि तुमचा अॅप) ती बाहेर काढण्यासाठी किल्ली असते. तुमच्या कोडमध्ये संवेदनशील माहिती थेट लिहिण्याऐवजी (जिथे अक्षरशः कोणीही ती पाहू शकतो), तुम्ही ती सुरक्षितपणे पर्यावरणात संग्रहित करता.
+**पर्यावरणीय व्हेरिएबल्स म्हणजे सुरक्षित ठेवण्याचे बॉक्स** – तुम्ही तुमची मौल्यवान सामग्री तिथे ठेवता, आणि फक्त तुम्ही (आणि तुमचा अ‍ॅप) ती बाहेर काढण्यासाठी किल्ली असते. तुमच्या कोडमध्ये संवेदनशील माहिती थेट लिहिण्याऐवजी (जिथे अक्षरशः कोणीही ती पाहू शकतो), तुम्ही ती सुरक्षितपणे पर्यावरणात साठवता.  
 
-**येथे फरक आहे:**
-- **चुकीचा मार्ग**: तुमचा पासवर्ड स्टिकी नोटवर लिहून तुमच्या मॉनिटरवर ठेवणे
-- **योग्य मार्ग**: तुमचा पासवर्ड सुरक्षित पासवर्ड व्यवस्थापकामध्ये ठेवणे ज्यामध्ये फक्त तुम्हाला प्रवेश आहे
+**येथे फरक आहे:**  
+- **चुकीचा मार्ग**: तुमचा पासवर्ड स्टिकी नोटवर लिहून तुमच्या मॉनिटरवर ठेवणे  
+- **योग्य मार्ग**: तुमचा पासवर्ड सुरक्षित पासवर्ड व्यवस्थापकामध्ये ठेवणे ज्यामध्ये फक्त तुम्ही प्रवेश करू शकता  
 
-#### पर्यावरणीय व्हेरिएबल्स का महत्त्वाचे आहेत
+#### पर्यावरणीय व्हेरिएबल्स का महत्त्वाचे आहेत  
 
 ```python
 # 🚨 NEVER DO THIS - API key visible to everyone
@@ -694,125 +841,88 @@ client = OpenAI(
     base_url="https://models.github.ai/inference"
 )
 ```
+  
+**जेव्हा तुम्ही गुपिते हार्डकोड करता तेव्हा काय होते:**  
+1. **आवृत्ती नियंत्रण प्रदर्शन**: तुमच्या Git रिपॉझिटरीमध्ये प्रवेश असलेल्या कोणालाही तुमची API की दिसते  
+2. **सार्वजनिक रिपॉझिटरीज**: जर तुम्ही GitHub वर पुश केले तर तुमची की संपूर्ण इंटरनेटला दिसते  
+3. **संघ सामायिकरण**: तुमच्या प्रकल्पावर काम करणाऱ्या इतर विकासकांना तुमच्या वैयक्तिक API की चा प्रवेश मिळतो  
+4. **सुरक्षा उल्लंघन**: जर कोणी तुमची API की चोरली तर ते
+आता येतो तो रोमांचक क्षण – तुमचा FastAPI विकास सर्व्हर सुरू करणे आणि तुमची AI एकत्रीकरण जिवंत पाहणे! FastAPI Uvicorn वापरतो, जो एक अत्यंत वेगवान ASGI सर्व्हर आहे, जो विशेषतः async Python अनुप्रयोगांसाठी डिझाइन केलेला आहे.
 
-**जेव्हा तुम्ही गुपिते हार्डकोड करता तेव्हा काय होते:**
-1. **आवृत्ती नियंत्रण प्रदर्शन**: तुमच्या Git रिपॉझिटरीमध्ये प्रवेश असलेल्या कोणालाही तुमचा API की दिसतो
-2. **सार्वजनिक रिपॉझिटरी**: जर तुम्ही GitHub वर पुश केले, तर तुमचा की संपूर्ण इंटरनेटला दिसतो
-3. **टीम शेअरिंग**: तुमच्या प्रकल्पावर काम करणाऱ्या इतर विकसकांना तुमच्या वैयक्तिक API कीचा प्रवेश मिळतो
-4. **सुरक्षा उल्लंघन**: जर कोणी तुमचा API की चोरला, तर ते तुमचे AI क्रेडिट्स वापरू शकतात
-
-#### तुमची पर्यावरणीय फाइल सेट करणे
-
-तुमच्या बॅकएंड डिरेक्टरीमध्ये `.env` फाइल तयार करा. ही फाइल तुमची गुपिते स्थानिक पातळीवर संग्रहित करते:
+#### FastAPI सर्व्हर स्टार्टअप प्रक्रिया समजून घेणे
 
 ```bash
-# .env file - This should NEVER be committed to Git
-GITHUB_TOKEN=your_github_personal_access_token_here
-FASTAPI_DEBUG=True
-ENVIRONMENT=development
-```
-
-**.env फाइल समजून घेणे:**
-- **प्रत्येक ओळीत एक गुपित** `KEY=value` स्वरूपात
-- **समान चिन्हाभोवती कोणतेही स्पेस नाहीत**
-- **मूल्यांभोवती कोट्स आवश्यक नाहीत** (सामान्यतः)
-- **टिप्पण्या** `#` ने सुरू होतात
-
-#### तुमचा GitHub वैयक्तिक प्रवेश टोकन तयार करणे
-
-तुमचा GitHub टोकन म्हणजे एक विशेष पासवर्ड आहे जो तुमच्या अॅप्लिकेशनला GitHub च्या AI सेवांचा वापर करण्याची परवानगी देतो:
-
-**टोकन तयार करण्याचे चरण:**
-1. **GitHub सेटिंग्जला जा** → Developer settings → Personal access tokens → Tokens (classic)
-2. **"Generate new token (classic)" वर क्लिक करा**
-3. **कालबाह्य तारीख सेट करा** (चाचणीसाठी 30 दिवस, उत्पादनासाठी जास्त)
-4. **स्कोप्स निवडा**: "repo" आणि तुम्हाला आवश्यक असलेल्या इतर परवानग्या तपासा
-5. **टोकन तयार करा** आणि ताबडतोब कॉपी करा (तुम्ही ते पुन्हा पाहू शकत नाही!)
-6. **तुमच्या .env फाइलमध्ये पेस्ट करा**
+# Method 1: Direct Python execution (includes auto-reload)
+python api.py
 
-```bash
-# Example of what your token looks like (this is fake!)
-GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
+# Method 2: Using Uvicorn directly (more control)
+uvicorn api:app --host 0.0.0.0 --port 5000 --reload
 ```
 
-#### Python मध्ये पर्यावरणीय व्हेरिएबल्स लोड करणे
+जेव्हा तुम्ही हा आदेश चालवता, तेव्हा मागील बाजूस काय घडते:
 
-```python
-import os
-from dotenv import load_dotenv
+**1. Python तुमचा FastAPI अनुप्रयोग लोड करतो**:
+- सर्व आवश्यक लायब्ररी आयात करतो (FastAPI, Pydantic, OpenAI, इ.)
+- तुमच्या `.env` फाइलमधून पर्यावरणीय व्हेरिएबल्स लोड करतो
+- स्वयंचलित दस्तऐवजीकरणासह FastAPI अनुप्रयोगाची उदाहरण तयार करतो
 
-# Load environment variables from .env file
-load_dotenv()
+**2. Uvicorn ASGI सर्व्हर कॉन्फिगर करतो**:
+- async विनंती हाताळणी क्षमतांसह पोर्ट 5000 वर बाइंड करतो
+- स्वयंचलित सत्यापनासह विनंती रूटिंग सेट करतो
+- विकासासाठी हॉट रीलोड सक्षम करतो (फाइल बदलांवर पुन्हा सुरू करतो)
+- परस्पर API दस्तऐवज तयार करतो
 
-# Now you can access them securely
-api_key = os.environ.get("GITHUB_TOKEN")
-if not api_key:
-    raise ValueError("GITHUB_TOKEN not found in environment variables!")
+**3. सर्व्हर ऐकण्यास सुरुवात करतो**:
+- तुमच्या टर्मिनलवर दिसते: `INFO: Uvicorn running on http://0.0.0.0:5000`
+- सर्व्हर अनेक समकालीन AI विनंत्या हाताळू शकतो
+- तुमचा API `http://localhost:5000/docs` वर स्वयंचलित दस्तऐवजांसह तयार आहे
 
-client = OpenAI(
-    api_key=api_key,
-    base_url="https://models.github.ai/inference"
-)
-```
-
-**हा कोड काय करतो:**
-- **तुमची .env फाइल लोड करतो** आणि Python ला व्हेरिएबल्स उपलब्ध करतो
-- **आवश्यक टोकन अस्तित्वात आहे का ते तपासते** (चांगली त्रुटी हाताळणी!)
-- **टोकन गहाळ असल्यास स्पष्ट त्रुटी उचलते**
-- **कोडमध्ये उघड न करता टोकन सुरक्षितपणे वापरते**
-
-#### Git सुरक्षा: .gitignore फाइल
-
-तुमची `.gitignore` फाइल Git ला सांगते की कोणत्या फाइल्स कधीही ट्रॅक किंवा अपलोड करू नयेत:
+#### सर्व काही व्यवस्थित कार्य करत असल्यास तुम्हाला काय दिसेल
 
 ```bash
-# .gitignore - Add these lines
-.env
-*.env
-.env.local
-.env.production
-__pycache__/
-venv/
-.vscode/
+$ python api.py
+INFO:     Will watch for changes in these directories: ['/your/project/path']
+INFO:     Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
+INFO:     Started reloader process [12345] using WatchFiles
+INFO:     Started server process [12346]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
 ```
 
-**हे का महत्त्वाचे आहे**: एकदा तुम्ही `.env` `.gitignore` मध्ये जोडल्यावर, Git तुमची पर्यावरणीय फाइल दुर्लक्षित करेल, तुमची गुपिते GitHub वर अपलोड करण्याची चूक टाळेल.
+**FastAPI आउटपुट समजून घेणे:**
+- **बदलांसाठी पाहील**: विकासासाठी ऑटो-रिलोड सक्षम
+- **Uvicorn चालू आहे**: उच्च-प्रदर्शन ASGI सर्व्हर सक्रिय आहे
+- **रिलोडर प्रक्रिया सुरू केली**: स्वयंचलित पुनःप्रारंभासाठी फाइल वॉचर
+- **अनुप्रयोग स्टार्टअप पूर्ण**: FastAPI अॅप यशस्वीरित्या प्रारंभ झाले
+- **परस्पर दस्तऐवज उपलब्ध**: स्वयंचलित API दस्तऐवजांसाठी `/docs` ला भेट द्या
 
-#### वेगवेगळ्या वातावरणासाठी वेगवेगळी गुपिते
+#### तुमचा FastAPI चाचणी करणे: अनेक शक्तिशाली पद्धती
 
-व्यावसायिक अॅप्लिकेशन्स वेगवेगळ्या वातावरणासाठी वेगवेगळ्या API की वापरतात:
+FastAPI तुमच्या API ची चाचणी घेण्यासाठी अनेक सोयीस्कर पद्धती प्रदान करते, ज्यामध्ये स्वयंचलित परस्पर दस्तऐवज समाविष्ट आहे:
 
-```bash
-# .env.development
-GITHUB_TOKEN=your_development_token
-DEBUG=True
+**पद्धत 1: परस्पर API दस्तऐवज (शिफारस केलेली)**
+1. तुमचा ब्राउझर उघडा आणि `http://localhost:5000/docs` ला जा
+2. तुम्हाला Swagger UI दिसेल ज्यामध्ये तुमचे सर्व एंडपॉइंट्स दस्तऐवजीकरण केलेले आहेत
+3. `/hello` वर क्लिक करा → "Try it out" → एक चाचणी संदेश प्रविष्ट करा → "Execute"
+4. योग्य स्वरूपनासह ब्राउझरमध्ये थेट प्रतिसाद पहा
 
-# .env.production  
-GITHUB_TOKEN=your_production_token
-DEBUG=False
-```
-
-**हे का महत्त्वाचे आहे**: तुम्हाला तुमच्या विकास प्रयोगांचा तुमच्या उत्पादन AI वापर कोट्यावर परिणाम होऊ नये, आणि वेगवेगळ्या वातावरणासाठी वेगवेगळ्या सुरक्षा स्तरांची आवश्यकता आहे.
-
-### तुमचा विकास सर्व्हर सुरू करणे: तुमचा FastAPI जिवंत करणे
-
-आता रोमांचक क्षण आला आहे – तुमचा FastAPI विकास सर्व्हर सुरू करणे आणि तुमचे AI एकत्रीकरण जिवंत पाहणे! FastAPI Uvicorn वापरतो, जो Async Python अॅप्लिकेशन्ससाठी विशेषतः डिझाइन केलेला अतिशय वेगवान ASGI सर्व्हर आहे.
-
-#### FastAPI सर्व्हर स्टार्टअप प्रक्रिया समजून घेणे
+**पद्धत 2: मूलभूत ब्राउझर चाचणी**
+1. रूट एंडपॉइंटसाठी `http://localhost:5000` ला जा
+2. सर्व्हरची आरोग्य स्थिती तपासण्यासाठी `http://localhost:5000/health` ला जा
+3. हे तुमचा FastAPI सर्व्हर योग्यरित्या चालू असल्याची पुष्टी करते
 
+**पद्धत 3: कमांड लाइन चाचणी (प्रगत)**
 ```bash
-# Method 1: Direct Python execution (includes auto-reload)
-python api.py
+# Test with curl (if available)
+curl -X POST http://localhost:5000/hello \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello AI!"}'
 
-# Method 2: Using Uvicorn directly (more control)
-uvicorn api:app --host 0.0.0.0 --port 5000 --reload
+# Expected response:
+# {"response": "Hello! I'm your AI assistant. How can I help you today?"}
 ```
 
-जेव्हा तुम्ही हा आदेश चालवता, तेव्हा मागील बाजूस काय होते:
-
-**1. Python तुमचे FastAPI अॅप्लिकेशन लोड करते**:
-- आवश्यक सर्व लायब्ररी आयात करते (FastAPI, Pydantic, OpenAI, इ.)
-- तुमच्या `.env` फाइलमधून
+**पद्धत 4: Python चाचणी स्क्रिप्ट**
 ```python
 # test_api.py - Create this file to test your API
 import requests
@@ -832,19 +942,19 @@ else:
 
 #### सामान्य स्टार्टअप समस्यांचे निराकरण
 
-| त्रुटी संदेश | याचा अर्थ काय | कसे दुरुस्त करावे |
-|---------------|---------------|-------------------|
-| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI स्थापित केलेले नाही | आपल्या व्हर्च्युअल एन्व्हायर्नमेंटमध्ये `pip install fastapi uvicorn` चालवा |
-| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI सर्व्हर स्थापित केलेले नाही | आपल्या व्हर्च्युअल एन्व्हायर्नमेंटमध्ये `pip install uvicorn` चालवा |
-| `KeyError: 'GITHUB_TOKEN'` | एन्व्हायर्नमेंट व्हेरिएबल सापडले नाही | आपल्या `.env` फाइल आणि `load_dotenv()` कॉल तपासा |
-| `Address already in use` | पोर्ट 5000 व्यस्त आहे | पोर्ट 5000 वापरणारे इतर प्रोसेस बंद करा किंवा पोर्ट बदला |
-| `ValidationError` | विनंती डेटा Pydantic मॉडेलशी जुळत नाही | आपली विनंती अपेक्षित स्कीमाशी जुळते का ते तपासा |
-| `HTTPException 422` | प्रक्रिया न करता येणारी एंटिटी | विनंतीची पडताळणी अयशस्वी झाली, योग्य फॉर्मॅटसाठी `/docs` तपासा |
-| `OpenAI API error` | AI सेवा प्रमाणीकरण अयशस्वी | आपला GitHub टोकन योग्य आहे आणि त्याला योग्य परवानग्या आहेत का ते तपासा |
+| त्रुटी संदेश | याचा अर्थ | कसे दुरुस्त करावे |
+|---------------|---------------|------------|
+| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI स्थापित नाही | तुमच्या व्हर्च्युअल वातावरणात `pip install fastapi uvicorn` चालवा |
+| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI सर्व्हर स्थापित नाही | तुमच्या व्हर्च्युअल वातावरणात `pip install uvicorn` चालवा |
+| `KeyError: 'GITHUB_TOKEN'` | पर्यावरणीय व्हेरिएबल सापडले नाही | तुमच्या `.env` फाइल आणि `load_dotenv()` कॉल तपासा |
+| `Address already in use` | पोर्ट 5000 व्यस्त आहे | पोर्ट 5000 वापरणारे इतर प्रक्रिया बंद करा किंवा पोर्ट बदला |
+| `ValidationError` | विनंती डेटा Pydantic मॉडेलशी जुळत नाही | तुमचा विनंती स्वरूप अपेक्षित स्कीमाशी जुळतो का ते तपासा |
+| `HTTPException 422` | प्रक्रिया न करता येणारी घटक | विनंती सत्यापन अयशस्वी, योग्य स्वरूपासाठी `/docs` तपासा |
+| `OpenAI API error` | AI सेवा प्रमाणीकरण अयशस्वी | तुमचा GitHub टोकन योग्य आहे आणि योग्य परवानग्या आहेत याची पुष्टी करा |
 
 #### विकासासाठी सर्वोत्तम पद्धती
 
-**हॉट रीलोडिंग**: FastAPI आणि Uvicorn आपल्याला Python फाइल्समध्ये बदल केल्यावर स्वयंचलित रीलोडिंग प्रदान करतात. याचा अर्थ असा की आपल्याला कोड बदलून त्वरित चाचणी करता येते, सर्व्हर पुन्हा सुरू करण्याची गरज नाही.
+**हॉट रीलोडिंग**: FastAPI सह Uvicorn स्वयंचलित रीलोडिंग प्रदान करते जेव्हा तुम्ही तुमच्या Python फाइल्समध्ये बदल साठवता. याचा अर्थ तुम्ही तुमचा कोड बदलू शकता आणि मॅन्युअली पुन्हा सुरू न करता त्वरित चाचणी करू शकता.
 
 ```python
 # Enable hot reloading explicitly
@@ -881,11 +991,11 @@ def hello():
         return jsonify({"error": "AI service temporarily unavailable"}), 500
 ```
 
-**लॉगिंग का उपयुक्त आहे**: विकासादरम्यान, आपल्याला नेमके कोणत्या विनंत्या येत आहेत, AI कशाचे उत्तर देत आहे आणि त्रुटी कुठे येत आहेत हे पाहता येते. यामुळे डीबगिंग खूप जलद होते.
+**लॉगिंग का मदत करते**: विकासादरम्यान, तुम्हाला नेमक्या कोणत्या विनंत्या येत आहेत, AI कशाचे उत्तर देत आहे आणि त्रुटी कुठे घडत आहेत हे पाहता येते. यामुळे डीबगिंग खूप जलद होते.
 
-### GitHub Codespaces साठी कॉन्फिगरेशन: क्लाउड विकास सोपे केले
+### GitHub Codespaces साठी कॉन्फिगर करणे: क्लाउड विकास सोपे केले
 
-GitHub Codespaces म्हणजे क्लाउडमध्ये एक शक्तिशाली विकास संगणक आहे ज्यामध्ये आपण कोणत्याही ब्राउझरमधून प्रवेश करू शकता. जर आपण Codespaces मध्ये काम करत असाल, तर आपल्या बॅकएंडला फ्रंटएंडसाठी प्रवेशयोग्य बनवण्यासाठी काही अतिरिक्त पायऱ्या आवश्यक आहेत.
+GitHub Codespaces म्हणजे क्लाउडमध्ये एक शक्तिशाली विकास संगणक असणे ज्याचा तुम्ही कोणत्याही ब्राउझरमधून प्रवेश करू शकता. जर तुम्ही Codespaces मध्ये काम करत असाल, तर तुमचा बॅकएंड तुमच्या फ्रंटएंडसाठी प्रवेशयोग्य बनवण्यासाठी काही अतिरिक्त पायऱ्या आहेत.
 
 #### Codespaces नेटवर्किंग समजून घेणे
 
@@ -893,54 +1003,54 @@ GitHub Codespaces म्हणजे क्लाउडमध्ये एक 
 - बॅकएंड: `http://localhost:5000`
 - फ्रंटएंड: `http://localhost:3000` (किंवा file://)
 
-Codespaces मध्ये, आपले विकास वातावरण GitHub च्या सर्व्हरवर चालते, त्यामुळे "localhost" चा अर्थ वेगळा आहे. GitHub आपल्यासाठी आपली सेवा सार्वजनिक URL तयार करते, परंतु आपल्याला योग्य प्रकारे कॉन्फिगर करणे आवश्यक आहे.
+Codespaces मध्ये, तुमचे विकास वातावरण GitHub च्या सर्व्हरवर चालते, त्यामुळे "localhost" चा अर्थ वेगळा आहे. GitHub तुमच्या सेवांसाठी स्वयंचलितपणे सार्वजनिक URL तयार करतो, परंतु तुम्हाला त्यांना योग्यरित्या कॉन्फिगर करणे आवश्यक आहे.
 
 #### Codespaces कॉन्फिगरेशन चरण-दर-चरण
 
-**1. आपला बॅकएंड सर्व्हर सुरू करा**:
+**1. तुमचा बॅकएंड सर्व्हर सुरू करा**:
 ```bash
 cd backend
 python api.py
 ```
 
-आपल्याला परिचित FastAPI/Uvicorn स्टार्टअप संदेश दिसेल, परंतु लक्षात घ्या की ते Codespace वातावरणात चालत आहे.
+तुम्हाला परिचित FastAPI/Uvicorn स्टार्टअप संदेश दिसेल, परंतु लक्षात घ्या की तो Codespace वातावरणात चालू आहे.
 
 **2. पोर्ट दृश्यमानता कॉन्फिगर करा**:
 - VS Code च्या तळाच्या पॅनेलमध्ये "Ports" टॅब शोधा
 - यादीमध्ये पोर्ट 5000 शोधा
-- पोर्ट 5000 वर राईट-क्लिक करा
+- पोर्ट 5000 वर उजवे क्लिक करा
 - "Port Visibility" → "Public" निवडा
 
-**ते सार्वजनिक का करावे?** डीफॉल्टनुसार, Codespace पोर्ट्स खाजगी असतात (फक्त आपल्यासाठी प्रवेशयोग्य). ते सार्वजनिक केल्याने आपला फ्रंटएंड (जो ब्राउझरमध्ये चालतो) आपल्या बॅकएंडशी संवाद साधू शकतो.
+**ते सार्वजनिक का करावे?** सामान्यतः, Codespace पोर्ट्स खाजगी असतात (फक्त तुम्हाला प्रवेशयोग्य). ते सार्वजनिक बनवणे तुमच्या फ्रंटएंडला (जो ब्राउझरमध्ये चालतो) तुमच्या बॅकएंडशी संवाद साधण्यास अनुमती देते.
 
-**3. आपला सार्वजनिक URL मिळवा**:
-पोर्ट सार्वजनिक केल्यानंतर, आपल्याला असा URL दिसेल:
+**3. तुमचा सार्वजनिक URL मिळवा**:
+पोर्ट सार्वजनिक केल्यानंतर, तुम्हाला असे URL दिसेल:
 ```
 https://your-codespace-name-5000.app.github.dev
 ```
 
-**4. आपल्या फ्रंटएंड कॉन्फिगरेशन अपडेट करा**:
+**4. तुमच्या फ्रंटएंड कॉन्फिगरेशनला अपडेट करा**:
 ```javascript
 // In your frontend app.js, update the BASE_URL:
 this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 ```
 
-#### Codespace URLs समजून घेणे
+#### Codespace URL समजून घेणे
 
-Codespace URLs एक अंदाजे पॅटर्न अनुसरतात:
+Codespace URL एक अंदाजे नमुना अनुसरण करतो:
 ```
 https://[codespace-name]-[port].app.github.dev
 ```
 
-**याचे विश्लेषण**:
-- `codespace-name`: आपल्या Codespace साठी एक अद्वितीय ओळखकर्ता (सामान्यतः आपल्या युजरनेमसह)
-- `port`: पोर्ट क्रमांक ज्यावर आपली सेवा चालत आहे (आपल्या FastAPI अॅपसाठी 5000)
-- `app.github.dev`: Codespace अॅप्ससाठी GitHub चे डोमेन
+**याचे विश्लेषण करणे:**
+- `codespace-name`: तुमच्या Codespace साठी एक अद्वितीय ओळखकर्ता (सामान्यतः तुमचे वापरकर्तानाव समाविष्ट करते)
+- `port`: तुमची सेवा चालू असलेला पोर्ट क्रमांक (आपल्या FastAPI अॅपसाठी 5000)
+- `app.github.dev`: Codespace अनुप्रयोगांसाठी GitHub चे डोमेन
 
-#### आपल्या Codespace सेटअपची चाचणी करणे
+#### तुमची Codespace सेटअप चाचणी करणे
 
 **1. बॅकएंड थेट चाचणी करा**:
-आपला सार्वजनिक URL नवीन ब्राउझर टॅबमध्ये उघडा. आपल्याला हे दिसले पाहिजे:
+तुमच्या सार्वजनिक URL ला नवीन ब्राउझर टॅबमध्ये उघडा. तुम्हाला दिसले पाहिजे:
 ```
 Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
 ```
@@ -957,7 +1067,7 @@ fetch('https://your-codespace-name-5000.app.github.dev/hello', {
 .then(data => console.log(data));
 ```
 
-#### Codespaces vs स्थानिक विकास
+#### Codespaces विरुद्ध स्थानिक विकास
 
 | पैलू | स्थानिक विकास | GitHub Codespaces |
 |--------|-------------------|-------------------|
@@ -965,13 +1075,13 @@ fetch('https://your-codespace-name-5000.app.github.dev/hello', {
 | **URL प्रवेश** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
 | **पोर्ट कॉन्फिगरेशन** | स्वयंचलित | मॅन्युअल (पोर्ट्स सार्वजनिक करा) |
 | **फाइल टिकाव** | स्थानिक मशीन | GitHub रेपॉजिटरी |
-| **सहकार्य** | वातावरण शेअर करणे कठीण | Codespace लिंक सहज शेअर करा |
-| **इंटरनेट अवलंबित्व** | फक्त AI API कॉलसाठी | सर्व गोष्टींसाठी आवश्यक |
+| **सहकार्य** | वातावरण शेअर करणे कठीण | Codespace लिंक शेअर करणे सोपे |
+| **इंटरनेट अवलंबित्व** | फक्त AI API कॉलसाठी | सर्वकाहीसाठी आवश्यक |
 
 #### Codespace विकास टिप्स
 
-**Codespaces मध्ये एन्व्हायर्नमेंट व्हेरिएबल्स**:
-आपली `.env` फाइल Codespaces मध्ये तशीच कार्य करते, परंतु आपण Codespace मध्ये थेट एन्व्हायर्नमेंट व्हेरिएबल्स सेट करू शकता:
+**Codespaces मधील पर्यावरणीय व्हेरिएबल्स**:
+तुमची `.env` फाइल Codespaces मध्ये त्याच प्रकारे कार्य करते, परंतु तुम्ही पर्यावरणीय व्हेरिएबल्स थेट Codespace मध्ये सेट करू शकता:
 
 ```bash
 # Set environment variable for the current session
@@ -982,9 +1092,9 @@ echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
 ```
 
 **पोर्ट व्यवस्थापन**:
-- Codespaces आपले अॅप्लिकेशन पोर्टवर ऐकायला सुरुवात करताच स्वयंचलितपणे शोधते
-- आपण एकाच वेळी एकाधिक पोर्ट्स फॉरवर्ड करू शकता (जर आपण नंतर डेटाबेस जोडला तर उपयुक्त)
-- पोर्ट्स आपल्या Codespace चालू असताना प्रवेशयोग्य राहतात
+- Codespaces स्वयंचलितपणे शोधतो जेव्हा तुमचा अनुप्रयोग पोर्टवर ऐकण्यास सुरुवात करतो
+- तुम्ही एकाच वेळी अनेक पोर्ट्स फॉरवर्ड करू शकता (जर तुम्ही नंतर डेटाबेस जोडला तर उपयुक्त)
+- तुमचा Codespace चालू असेपर्यंत पोर्ट्स प्रवेशयोग्य राहतात
 
 **विकास कार्यप्रवाह**:
 1. VS Code मध्ये कोड बदल करा
@@ -992,18 +1102,18 @@ echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
 3. सार्वजनिक URL द्वारे त्वरित बदलांची चाचणी करा
 4. तयार झाल्यावर कमिट आणि पुश करा
 
-> 💡 **प्रो टिप**: विकासादरम्यान आपल्या Codespace बॅकएंड URL बुकमार्क करा. Codespace नावे स्थिर असल्याने, आपण समान Codespace वापरत असताना URL बदलणार नाही.
+> 💡 **प्रो टिप**: विकासादरम्यान तुमचा Codespace बॅकएंड URL बुकमार्क करा. कारण Codespace नावे स्थिर असतात, तुम्ही समान Codespace वापरत असाल तोपर्यंत URL बदलणार नाही.
 
-## फ्रंटएंड चॅट इंटरफेस तयार करणे: जिथे मानव AI शी संवाद साधतो
+## फ्रंटएंड चॅट इंटरफेस तयार करणे: जिथे मानव AI ला भेटतो
 
-आता आपण वापरकर्ता इंटरफेस तयार करू – जिथे लोक आपल्या AI सहायकाशी संवाद साधण्याचा मार्ग ठरतो. मूळ iPhone च्या इंटरफेसच्या डिझाइनप्रमाणे, आपण जटिल तंत्रज्ञान सहज आणि नैसर्गिक वापरासाठी बनवण्यावर लक्ष केंद्रित करत आहोत.
+आता आपण वापरकर्ता इंटरफेस तयार करू – तो भाग जो लोकांना तुमच्या AI सहाय्यकाशी संवाद साधण्यास सक्षम करतो. मूळ iPhone च्या इंटरफेसच्या डिझाइनप्रमाणे, आम्ही जटिल तंत्रज्ञान सहज आणि नैसर्गिकपणे वापरण्यासारखे बनवण्यावर लक्ष केंद्रित करत आहोत.
 
 ### आधुनिक फ्रंटएंड आर्किटेक्चर समजून घेणे
 
-आपले चॅट इंटरफेस "सिंगल पेज अॅप्लिकेशन" किंवा SPA असेल. जुन्या पद्धतीच्या दृष्टिकोनाऐवजी जिथे प्रत्येक क्लिक नवीन पृष्ठ लोड करते, आपले अॅप सहज आणि त्वरित अपडेट होते:
+आपला चॅट इंटरफेस "सिंगल पेज अॅप्लिकेशन" किंवा SPA असे म्हणतात. जुन्या पद्धतीच्या दृष्टिकोनाऐवजी जिथे प्रत्येक क्लिक नवीन पृष्ठ लोड करते, आमचे अॅप सहज आणि त्वरित अद्यतनित होते:
 
-**जुनी वेबसाइट्स**: जणू एखादे भौतिक पुस्तक वाचत आहात – आपण पूर्णपणे नवीन पृष्ठांवर जात आहात
-**आपले चॅट अॅप**: जणू आपला फोन वापरत आहात – सर्व काही सहजतेने वाहते आणि अपडेट होते
+**जुनी वेबसाइट्स**: जसे एखादे भौतिक पुस्तक वाचणे – तुम्ही पूर्णपणे नवीन पृष्ठे पलटवता
+**आमचे चॅट अॅप**: जसे तुमचा फोन वापरणे – सर्व काही सहजतेने आणि त्वरित अद्यतनित होते
 
 ```mermaid
 graph TD
@@ -1016,42 +1126,66 @@ graph TD
     G --> H[Ready for Next Message]
 ```
 
+```mermaid
+classDiagram
+    class ChatApp {
+        +messages: HTMLElement
+        +form: HTMLElement
+        +input: HTMLElement
+        +sendButton: HTMLElement
+        +BASE_URL: string
+        +API_ENDPOINT: string
+        
+        +constructor()
+        +initializeEventListeners()
+        +handleSubmit(event)
+        +callAPI(message)
+        +appendMessage(text, role)
+        +escapeHtml(text)
+        +scrollToBottom()
+        +setLoading(isLoading)
+    }
+    
+    ChatApp --> DOM : manipulates
+    ChatApp --> FastAPI : sends requests
+```
+
 ### फ्रंटएंड विकासाचे तीन स्तंभ
 
-प्रत्येक फ्रंटएंड अॅप्लिकेशन – साध्या वेबसाइट्सपासून Discord किंवा Slack सारख्या जटिल अॅप्सपर्यंत – तीन मुख्य तंत्रज्ञानावर आधारित असते. त्यांना आपण वेबवर दिसणाऱ्या आणि संवाद साधणाऱ्या प्रत्येक गोष्टीचा पाया समजतो:
+प्रत्येक फ्रंटएंड अॅप्लिकेशन – साध्या वेबसाइट्सपासून डिस्कॉर्ड किंवा स्लॅकसारख्या जटिल अॅप्सपर्यंत – तीन मुख्य तंत्रज्ञानावर आधारित असते. त्यांना तुम्ही वेबवर दिसणाऱ्या आणि संवाद साधणाऱ्या प्रत्येक गोष्टीचा पाया समजून घ्या:
 
-**HTML (रचना)**: हा आपला पाया आहे
-- कोणते घटक अस्तित्वात आहेत हे ठरवते (बटण, टेक्स्ट एरिया, कंटेनर)
-- सामग्रीला अर्थ देते (हे हेडर आहे, हे फॉर्म आहे, इ.)
+**HTML (रचना)**: हा तुमचा पाया आहे
+- कोणते घटक अस्तित्वात आहेत हे ठरवते (बटणे, टेक्स्ट एरिया, कंटेनर)
+- सामग्रीला अर्थ देते (हे शीर्षक आहे, हे फॉर्म आहे, इ.)
 - मूलभूत रचना तयार करते ज्यावर सर्वकाही तयार होते
 
-**CSS (प्रस्तुतीकरण)**: हा आपला अंतर्गत डिझायनर आहे
-- सर्वकाही सुंदर बनवते (रंग, फॉन्ट्स, लेआउट्स)
-- वेगवेगळ्या स्क्रीन आकारांशी जुळवून घेते (फोन vs लॅपटॉप vs टॅबलेट)
+**CSS (सादरीकरण)**: हा तुमचा अंतर्गत डिझायनर आहे
+- सर्वकाही सुंदर बनवते (रंग, फॉन्ट, लेआउट्स)
+- वेगवेगळ्या स्क्रीन आकारांशी हाताळते (फोन विरुद्ध लॅपटॉप विरुद्ध टॅबलेट)
 - गुळगुळीत अॅनिमेशन आणि व्हिज्युअल फीडबॅक तयार करते
 
-**JavaScript (वर्तन)**: हा आपला मेंदू आहे
-- वापरकर्त्याने काय केले यावर प्रतिक्रिया देते (क्लिक्स, टायपिंग, स्क्रोलिंग)
-- आपल्या बॅकएंडशी संवाद साधते आणि पृष्ठ अपडेट करते
+**JavaScript (वर्तन)**: हा तुमचा मेंदू आहे
+- वापरकर्ते काय करतात यावर प्रतिक्रिया देते (क्लिक्स, टाइपिंग, स्क्रोलिंग)
+- तुमच्या बॅकएंडशी संवाद साधते आणि पृष्ठ अद्यतनित करते
 - सर्वकाही परस्परसंवादी आणि गतिशील बनवते
 
-**याला आर्किटेक्चरल डिझाइनप्रमाणे विचार करा:**
+**याला वास्तुशिल्पीय डिझाइनसारखे समजा:**
 - **HTML**: संरचनात्मक ब्लूप्रिंट (स्पेस आणि नातेसंबंध परिभाषित करणे)
-- **CSS**: सौंदर्य आणि पर्यावरणीय डिझाइन (व्हिज्युअल शैली आणि वापरकर्ता अनुभव)
-- **JavaScript**: यांत्रिक प्रणाली (कार्यशीलता आणि परस्परसंवाद)
+- **CSS**: सौंदर्यात्मक आणि पर्यावरणीय डिझाइन (व्हिज्युअल शैली आणि वापरकर्ता अनुभव)
+- **JavaScript**: यांत्रिक प्रणाली (कार्यक्षमता आणि परस्परसंवाद)
 
 ### आधुनिक JavaScript आर्किटेक्चर का महत्त्वाचे आहे
 
-आपले चॅट अॅप्लिकेशन आधुनिक JavaScript पॅटर्न वापरेल जे आपल्याला व्यावसायिक अॅप्लिकेशन्समध्ये दिसतील. हे संकल्पना समजून घेणे आपल्याला एक विकसक म्हणून वाढण्यास मदत करेल:
+आपले चॅट अनुप्रयोग आधुनिक JavaScript नमुने वापरेल जे तुम्हाला व्यावसायिक अनुप्रयोगांमध्ये दिसतील. हे संकल्पना समजून घेणे तुम्हाला विकसक म्हणून वाढण्यास मदत करेल:
 
-**क्लास-आधारित आर्किटेक्चर**: आपण आपला कोड वर्गांमध्ये आयोजित करू, जे वस्तूंसाठी ब्लूप्रिंट तयार करण्यासारखे आहे
-**Async/Await**: वेळ घेणाऱ्या ऑपरेशन्स हाताळण्याचा आधुनिक मार्ग (जसे की API कॉल्स)
-**इव्हेंट-ड्रिव्हन प्रोग्रामिंग**: आपले अॅप वापरकर्त्याच्या क्रियांसाठी (क्लिक्स, की प्रेस) प्रतिसाद देते, लूपमध्ये चालत नाही
-**DOM Manipulation**: वापरकर्त्याच्या संवाद आणि API प्रतिसादांवर आधारित वेबपृष्ठ सामग्री गतिशीलपणे अपडेट करणे
+**Class-Based Architecture**: आपण आपला कोड वर्गांमध्ये आयोजित करू, जे वस्तूंसाठी ब्लूप्रिंट तयार करण्यासारखे आहे
+**Async/Await**: वेळ घेणाऱ्या ऑपरेशन्स हाताळण्याचा आधुनिक मार्ग (जसे API कॉल्स)
+**Event-Driven Programming**: आमचे अॅप वापरकर्त्याच्या क्रियांवर प्रतिक्रिया देते (क्लिक्स, की प्रेस) लूपमध्ये चालण्याऐवजी
+**DOM Manipulation**: वापरकर्त्याच्या संवाद आणि API प्रतिसादांवर आधारित वेबपृष्ठ सामग्री गतिशीलपणे अद्यतनित करणे
 
-### प्रोजेक्ट स्ट्रक्चर सेटअप
+### प्रकल्प संरचना सेटअप
 
-फ्रंटएंड डिरेक्टरी तयार करा आणि ही संरचना ठेवा:
+सुसंगत संरचनेसह फ्रंटएंड डिरेक्टरी तयार करा:
 
 ```text
 frontend/
@@ -1061,17 +1195,17 @@ frontend/
 ```
 
 **आर्किटेक्चर समजून घेणे:**
-- **रचना** HTML, JavaScript आणि CSS यांच्यात चिंता वेगवेगळ्या करते
-- **साधेपणा** नेव्हिगेट आणि बदलण्यासाठी सोपी फाइल संरचना राखते
+- **वेगळे करते** रचना (HTML), वर्तन (JavaScript), आणि सादरीकरण (CSS) यामध्ये चिंता
+- **साधी फाइल संरचना राखते** जी नेव्हिगेट आणि सुधारित करणे सोपे आहे
 - **वेब विकास सर्वोत्तम पद्धतींचे अनुसरण करते** संघटन आणि टिकावासाठी
 
-### HTML पाया तयार करणे: ऍक्सेसिबिलिटीसाठी सेमॅंटिक रचना
+### HTML पाया तयार करणे: प्रवेशयोग्यतेसाठी अर्थपूर्ण रचना
 
-आता HTML रचना तयार करूया. आधुनिक वेब विकास "सेमॅंटिक HTML" वर जोर देते – HTML घटक वापरणे जे त्यांच्या उद्देशाचे स्पष्टपणे वर्णन करतात, फक्त त्यांचे स्वरूप नाही. यामुळे आपले अॅप्लिकेशन स्क्रीन रीडर्स, सर्च इंजिन्स आणि इतर साधनांसाठी ऍक्सेसिबल बनते.
+चला HTML रचनेपासून सुरुवात करूया. आधुनिक वेब विकास "अर्थपूर्ण HTML" वर जोर देते – HTML घटक वापरणे जे त्यांच्या उद्देशाचे स्पष्टपणे वर्णन करतात, फक्त त्यांच्या स्वरूपाचे नाही. यामुळे तुमचा अनुप्रयोग स्क्रीन रीडर्स, सर्च इंजिन्स आणि इतर साधनांसाठी प्रवेशयोग्य बनतो.
 
-**सेमॅंटिक HTML का महत्त्वाचे आहे**: कल्पना करा की आपण आपल्या चॅट अॅपचे वर्णन फोनवर कोणाला करत आहात. आपण म्हणाल "तेथे शीर्षकासह एक हेडर आहे, मुख्य क्षेत्र जिथे संभाषणे दिसतात, आणि संदेश टाइप करण्यासाठी तळाशी एक फॉर्म आहे." सेमॅंटिक HTML घटक नैसर्गिक वर्णनाशी जुळतात.
+**अर्थपूर्ण HTML का महत्त्वाचे आहे**: कल्पना करा की तुम्ही तुमचे चॅट अॅप फोनवर कोणाला वर्णन करत आहात. तुम्ही म्हणाल "तेथे शीर्षकासह एक हेडर आहे, एक मुख्य क्षेत्र जिथे संभाषणे दिसतात, आणि संदेश टाइप करण्यासाठी तळाशी एक फॉर्म आहे." अर्थपूर्ण HTML घटक वापरते जे या नैसर्गिक वर्णनाशी जुळते.
 
-`index.html` तयार करा आणि ही विचारपूर्वक संरचित मार्कअप वापरा:
+`index.html` तयार करा या विचारपूर्वक संरचित मार्कअपसह:
 
 ```html
 <!DOCTYPE html>
@@ -1116,49 +1250,26 @@ frontend/
 **प्रत्येक HTML घटक आणि त्याचा उद्देश समजून घेणे:**
 
 #### दस्तऐवज रचना
-- **`<!DOCTYPE html>`**: ब्राउझरला हे आधुनिक HTML5 आहे हे सांगते
+- **`<!DOCTYPE html>`**: ब्राउझरला सांगते की हे आधुनिक HTML5 आहे
 - **`<html lang="en">`**: स्क्रीन रीडर्स आणि भाषांतर साधनांसाठी पृष्ठ भाषा निर्दिष्ट करते
 - **`<meta charset="UTF-8">`**: आंतरराष्ट्रीय मजकुरासाठी योग्य कॅरेक्टर एन्कोडिंग सुनिश्चित करते
-- **`<meta name="viewport"...>`**: झूम आणि स्केल नियंत्रित करून पृष्ठ मोबाइल-प्रतिसादक्षम बनवते
-
-#### सेमॅंटिक घटक
-- **`<header>`**: शीर्षक आणि वर्णनासह शीर्ष विभाग स्पष्टपणे ओळखतो
-- **`<main>`**: प्राथमिक सामग्री क्षेत्र नियुक्त करते (जिथे संभाषणे होतात)
-- **`<form>`**: वापरकर्ता इनपुटसाठी सेमॅंटिकदृष्ट्या योग्य, योग्य कीबोर्ड नेव्हिगेशन सक्षम करते
+- **`<meta name="viewport"...>`**: पृष्ठ मोबाइल-प्रतिसादक्षम बनवते झूम आणि स्केल नियंत्रित करून
 
-#### ऍक्सेसिबिलिटी वैशिष्ट्ये
-- **`role="log"`**: स्क्रीन रीडर्सना हे क्षेत्र संदेशांचा कालक्रमानुसार लॉग आहे हे सांगते
-- **`aria-live="polite"`**: स्क्रीन रीडर्सना नवीन संदेश व्यत्यय न आणता जाहीर करते
-- **`aria-label`**: फॉर्म नियंत्रणांसाठी वर्णनात्मक लेबल प्रदान करते
-- **`required`**: ब्राउझर वापरकर्त्यांना संदेश पाठवण्यापूर्वी टाइप करण्याची पडताळणी करते
-
-#### CSS आणि JavaScript एकत्रीकरण
-- **`class` गुणधर्म**: CSS साठी स्टाइलिंग हुक प्रदान करते (उदा., `chat-container`, `input-group`)
-- **`id` गुणधर्म**: JavaScript विशिष्ट घटक शोधण्यासाठी आणि हाताळण्यासाठी सक्षम करते
-- **स्क्रिप्ट प्लेसमेंट**: JavaScript फाइल शेवटी लोड केली जाते जेणेकरून HTML प्रथम लोड होईल
-
-**ही रचना का कार्य करते:**
-- **तार्किक प्रवाह**: हेडर → मुख्य सामग्री → इनपुट फॉर्म नैसर्गिक वाचन क्रमाशी जुळतो
-- **कीबोर्ड ऍक्सेसिबल**: वापरकर्ते सर्व परस्परसंवादी घटकांमधून टॅब करू शकतात
-- **स्क्रीन रीडर फ्रेंडली**: व्हिज्युअली इम्पेअर्ड वापरकर्त्यांसाठी स्पष्ट लँडमार्क्स आणि वर्णने
-- **मोबाइल प्रतिसादक्षम**: व्ह्यूपोर्ट मेटा टॅग प्रतिसादात्मक डिझाइन सक्षम करते
-- **प्रोग्रेसिव्ह एन्हांसमेंट**: CSS किंवा JavaScript लोड करण्यात अयशस्वी झाले तरी कार्य करते
-
-### परस्परसंवादी JavaScript जोडणे: आधुनिक वेब अॅप्लिकेशन लॉजिक
-
-आता JavaScript तयार करूया जे आपले चॅट इंटरफेस जिवंत करते. आम्ही व्यावसायिक वेब विकासात आपल्याला भेटणारे आधुनिक JavaScript पॅटर्न वापरू, ज्यामध्ये ES6 क्लासेस, async/await, आणि इव्हेंट-ड्रिव्हन प्रोग्रामिंग समाविष्ट आहे.
+#### अर्थपूर्ण घटक
+- **`<header>`**: शीर्षक आणि वर्णनासह शीर्ष विभाग स्पष्टपणे
+आता आपण JavaScript तयार करूया ज्यामुळे आपले चॅट इंटरफेस कार्यक्षम होईल. आपण व्यावसायिक वेब विकासात आढळणारे आधुनिक JavaScript पॅटर्न वापरणार आहोत, ज्यामध्ये ES6 क्लासेस, async/await, आणि इव्हेंट-ड्रिव्हन प्रोग्रामिंग समाविष्ट आहे.
 
 #### आधुनिक JavaScript आर्किटेक्चर समजून घेणे
 
-प्रक्रियात्मक कोड लिहिण्याऐवजी (एकमेकांच्या क्रमाने चालणाऱ्या फंक्शन्सची मालिका), आम्ही **क्लास-आधारित आर्किटेक्चर** तयार करू. वर्ग म्हणजे वस्तू तयार करण्यासाठी ब्लूप्रिंट आहे – जसे की आर्किटेक्टचा ब्लूप्रिंट एकाधिक घरे तयार करण्यासाठी वापरला जाऊ शकतो.
+प्रोसीजरल कोड (क्रमाने चालणाऱ्या फंक्शन्सची मालिका) लिहिण्याऐवजी, आपण **क्लास-बेस्ड आर्किटेक्चर** तयार करू. क्लास म्हणजे ऑब्जेक्ट तयार करण्यासाठी एक ब्लूप्रिंट आहे – जसे की आर्किटेक्टचा ब्लूप्रिंट अनेक घरे बांधण्यासाठी वापरला जाऊ शकतो.
 
-**वेब अॅप्लिकेशन्ससाठी वर्ग का वापरावे?**
-- **संघटन**: सर्व संबंधित कार्यक्षमता एकत्रित केली जाते
-- **पुनर्वापरयोग्यता**: आपण एकाच पृष्ठावर एकाधिक चॅट उदाहरणे तयार करू शकता
-- **देखभालक्षमता**: विशिष्ट वैशिष्ट्ये डीबग आणि बदलणे सोपे
+**वेब अॅप्लिकेशन्ससाठी क्लासेस का वापरावेत?**
+- **संघटन**: संबंधित सर्व फंक्शनॅलिटी एकत्रित केली जाते
+- **पुनर्वापरयोग्यता**: तुम्ही एका पृष्ठावर अनेक चॅट इंस्टन्स तयार करू शकता
+- **देखभाल सुलभता**: विशिष्ट वैशिष्ट्ये डीबग आणि सुधारित करणे सोपे
 - **व्यावसायिक मानक**: React, Vue, आणि Angular सारख्या फ्रेमवर्कमध्ये हा पॅटर्न वापरला जातो
 
-`app.js` तयार करा आणि हा आधुनिक, चांगल्या प्रकारे संरचित JavaScript वापरा:
+`app.js` तयार करा आधुनिक, चांगल्या प्रकारे संरचित JavaScript सह:
 
 ```javascript
 // app.js - Modern chat application logic
@@ -1278,7 +1389,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
 #### प्रत्येक JavaScript संकल्पना समजून घेणे
 
-**ES6 क्लास संरचना**:
+**ES6 क्लास स्ट्रक्चर**:
 ```javascript
 class ChatApp {
     constructor() {
@@ -1311,14 +1422,90 @@ try {
 }
 ```
 
-**इव्हेंट-ड्रिव्ह
-ही आर्किटेक्चर स्केलेबल आहे – तुम्ही सहजपणे संदेश संपादन, फाइल अपलोड्स किंवा एकाधिक संभाषण थ्रेड्स सारख्या वैशिष्ट्ये जोडू शकता, मुख्य संरचना पुन्हा लिहिण्याची गरज नाही.
+**इव्हेंट-ड्रिव्हन प्रोग्रामिंग**:
+काहीतरी घडले आहे का हे सतत तपासण्याऐवजी, आपण इव्हेंटसाठी "ऐकतो":
+```javascript
+// When form is submitted, run handleSubmit
+this.form.addEventListener("submit", (e) => this.handleSubmit(e));
+
+// When Enter key is pressed, also run handleSubmit
+this.input.addEventListener("keypress", (e) => { /* ... */ });
+```
+
+**DOM मॅनिप्युलेशन**:
+```javascript
+// Create new elements
+const messageElement = document.createElement("div");
+
+// Modify their properties
+messageElement.className = "message user";
+messageElement.innerHTML = "Hello world!";
+
+// Add to the page
+this.messages.appendChild(messageElement);
+```
+
+#### सुरक्षा आणि सर्वोत्तम पद्धती
+
+**XSS प्रतिबंध**:
+```javascript
+escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;  // This automatically escapes HTML
+    return div.innerHTML;
+}
+```
+
+**महत्त्व का आहे**: जर एखादा वापरकर्ता `<script>alert('hack')</script>` टाइप केला, तर ही फंक्शन त्याला कोड म्हणून अंमलात आणण्याऐवजी टेक्स्ट म्हणून प्रदर्शित करते.
+
+**एरर हँडलिंग**:
+```javascript
+try {
+    const reply = await this.callAPI(messageText);
+    this.appendMessage(reply, "assistant");
+} catch (error) {
+    // Show user-friendly error instead of breaking the app
+    this.appendMessage("Sorry, I'm having trouble...", "error");
+}
+```
+
+**वापरकर्ता अनुभव विचार**:
+- **ऑप्टिमिस्टिक UI**: वापरकर्त्याचा संदेश त्वरित जोडा, सर्व्हर प्रतिसादाची वाट पाहू नका
+- **लोडिंग स्टेट्स**: बटणे अक्षम करा आणि "सेंडिंग..." दर्शवा
+- **ऑटो-स्क्रोल**: नवीनतम संदेश दृश्यमान ठेवा
+- **इनपुट व्हॅलिडेशन**: रिकामे संदेश पाठवू नका
+- **कीबोर्ड शॉर्टकट्स**: एंटर की संदेश पाठवते (खऱ्या चॅट अॅप्ससारखे)
+
+#### अॅप्लिकेशन फ्लो समजून घेणे
+
+1. **पृष्ठ लोड होते** → `DOMContentLoaded` इव्हेंट फायर होते → `new ChatApp()` तयार होते
+2. **कन्स्ट्रक्टर चालतो** → DOM एलिमेंट संदर्भ मिळवतो → इव्हेंट लिसनर्स सेट करतो
+3. **वापरकर्ता संदेश टाइप करतो** → एंटर प्रेस करतो किंवा सेंड क्लिक करतो → `handleSubmit` चालतो
+4. **handleSubmit** → इनपुट व्हॅलिडेट करतो → लोडिंग स्टेट दाखवतो → API कॉल करतो
+5. **API प्रतिसाद देते** → AI संदेश चॅटमध्ये जोडते → इंटरफेस पुन्हा सक्षम करते
+6. **पुढील संदेशासाठी तयार** → वापरकर्ता चॅटिंग सुरू ठेवू शकतो
+
+हे आर्किटेक्चर स्केलेबल आहे – तुम्ही संदेश संपादन, फाइल अपलोड्स, किंवा अनेक संभाषण थ्रेड्स सारखी वैशिष्ट्ये कोर स्ट्रक्चर पुन्हा लिहिल्याशिवाय सहजपणे जोडू शकता.
+
+### 🎯 शैक्षणिक तपासणी: आधुनिक फ्रंटएंड आर्किटेक्चर
+
+**आर्किटेक्चर समजून घेणे**: तुम्ही आधुनिक JavaScript पॅटर्न वापरून पूर्ण सिंगल-पेज अॅप्लिकेशन अंमलात आणले आहे. हे व्यावसायिक-स्तरीय फ्रंटएंड विकासाचे प्रतिनिधित्व करते.
 
-### तुमच्या चॅट इंटरफेसचे स्टाइलिंग
+**मुख्य संकल्पना आत्मसात**:
+- **ES6 क्लास आर्किटेक्चर**: संघटित, देखभालक्षम कोड स्ट्रक्चर
+- **Async/Await पॅटर्न्स**: आधुनिक असिंक्रोनस प्रोग्रामिंग
+- **इव्हेंट-ड्रिव्हन प्रोग्रामिंग**: प्रतिसादात्मक वापरकर्ता इंटरफेस डिझाइन
+- **सुरक्षा सर्वोत्तम पद्धती**: XSS प्रतिबंध आणि इनपुट व्हॅलिडेशन
 
-आता CSS वापरून आधुनिक, आकर्षक चॅट इंटरफेस तयार करूया. चांगले स्टाइलिंग तुमच्या अॅप्लिकेशनला व्यावसायिक वाटते आणि एकूणच वापरकर्ता अनुभव सुधारते. आम्ही Flexbox, CSS Grid आणि कस्टम प्रॉपर्टीजसारख्या आधुनिक CSS वैशिष्ट्यांचा वापर करून प्रतिसादक्षम, प्रवेशयोग्य डिझाइन तयार करू.
+**उद्योग कनेक्शन**: तुम्ही शिकलेले पॅटर्न (क्लास-बेस्ड आर्किटेक्चर, असिंक्रोनस ऑपरेशन्स, DOM मॅनिप्युलेशन) आधुनिक फ्रेमवर्कसाठी (React, Vue, Angular) पाया आहेत. तुम्ही उत्पादन अॅप्लिकेशन्समध्ये वापरल्या जाणाऱ्या समान आर्किटेक्चरल विचारांसह तयार करत आहात.
 
-`styles.css` तयार करा आणि खालील संपूर्ण स्टाइल्स वापरा:
+**प्रतिबिंब प्रश्न**: तुम्ही या चॅट अॅप्लिकेशनला अनेक संभाषण किंवा वापरकर्ता प्रमाणीकरण हाताळण्यासाठी कसे विस्तारित कराल? आवश्यक आर्किटेक्चरल बदलांचा विचार करा आणि क्लास स्ट्रक्चर कसे विकसित होईल याचा विचार करा.
+
+### तुमचे चॅट इंटरफेस स्टाइलिंग
+
+आता CSS सह आधुनिक, आकर्षक चॅट इंटरफेस तयार करूया. चांगले स्टाइलिंग तुमच्या अॅप्लिकेशनला व्यावसायिक वाटते आणि एकूण वापरकर्ता अनुभव सुधारते. आम्ही Flexbox, CSS Grid, आणि कस्टम प्रॉपर्टीजसारख्या आधुनिक CSS वैशिष्ट्यांचा वापर करून प्रतिसादक्षम, प्रवेशयोग्य डिझाइन तयार करू.
+
+`styles.css` तयार करा या सर्वसमावेशक शैलींसह:
 
 ```css
 /* styles.css - Modern chat interface styling */
@@ -1580,15 +1767,15 @@ body {
 **CSS आर्किटेक्चर समजून घेणे:**
 - **वापरते** CSS कस्टम प्रॉपर्टीज (व्हेरिएबल्स) सुसंगत थीमिंग आणि सोपी देखभालसाठी
 - **अंमलात आणते** Flexbox लेआउट प्रतिसादक्षम डिझाइन आणि योग्य संरेखनासाठी
-- **समाविष्ट करते** संदेश दिसण्यासाठी गुळगुळीत अॅनिमेशन, विचलित न करता
-- **प्रदान करते** वापरकर्ता संदेश, AI प्रतिसाद आणि त्रुटी स्थितींमध्ये दृश्य फरक
+- **समाविष्ट करते** गुळगुळीत अॅनिमेशन संदेश दिसण्यासाठी, विचलित न करता
+- **प्रदान करते** वापरकर्ता संदेश, AI प्रतिसाद, आणि एरर स्टेट्समध्ये दृश्यात्मक फरक
 - **समर्थन करते** प्रतिसादक्षम डिझाइन जे डेस्कटॉप आणि मोबाइल डिव्हाइसवर कार्य करते
 - **विचार करते** प्रवेशयोग्यता कमी मोशन प्राधान्ये आणि योग्य कॉन्ट्रास्ट रेशो सह
-- **ऑफर करते** वापरकर्त्याच्या सिस्टम प्राधान्यांवर आधारित डार्क मोड समर्थन
+- **ऑफर करते** डार्क मोड समर्थन वापरकर्त्याच्या सिस्टम प्राधान्यांवर आधारित
 
-### तुमच्या बॅकएंड URL चे कॉन्फिगरेशन
+### तुमचा बॅकएंड URL कॉन्फिगर करणे
 
-तुमच्या जावास्क्रिप्टमधील `BASE_URL` अद्यतनित करणे हा अंतिम टप्पा आहे, जो तुमच्या बॅकएंड सर्व्हरशी जुळतो:
+तुमच्या JavaScript मध्ये `BASE_URL` अद्यतनित करणे अंतिम पायरी आहे जेणेकरून ते तुमच्या बॅकएंड सर्व्हरशी जुळेल:
 
 ```javascript
 // For local development
@@ -1599,256 +1786,128 @@ this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 ```
 
 **तुमचा बॅकएंड URL निश्चित करणे:**
-- **स्थानिक विकास**: जर तुम्ही फ्रंटएंड आणि बॅकएंड स्थानिकपणे चालवत असाल तर `http://localhost:5000` वापरा
+- **स्थानिक विकास**: फ्रंटएंड आणि बॅकएंड दोन्ही स्थानिकपणे चालवत असल्यास `http://localhost:5000` वापरा
 - **Codespaces**: पोर्ट 5000 सार्वजनिक केल्यानंतर पोर्ट्स टॅबमध्ये तुमचा बॅकएंड URL शोधा
-- **प्रोडक्शन**: होस्टिंग सेवेमध्ये तैनात करताना तुमच्या वास्तविक डोमेनसह बदला
+- **उत्पादन**: होस्टिंग सेवेसाठी तैनात करताना तुमच्या वास्तविक डोमेनसह बदला
 
 > 💡 **चाचणी टिप**: तुम्ही तुमच्या ब्राउझरमध्ये रूट URL ला भेट देऊन तुमचा बॅकएंड थेट चाचणी करू शकता. तुम्हाला तुमच्या FastAPI सर्व्हरकडून स्वागत संदेश दिसायला हवा.
+- **संवादाच्या विषयावर आधारित** स्मार्ट सुचनेची अंमलबजावणी करा  
+- **सामान्य प्रश्नांसाठी** जलद उत्तर बटणे तयार करा  
 
+> 🎯 **शिकण्याचे उद्दिष्ट**: या अतिरिक्त आव्हानांमुळे तुम्हाला प्रगत वेब विकास पद्धती आणि उत्पादन अनुप्रयोगांमध्ये वापरल्या जाणाऱ्या AI एकत्रीकरण तंत्रज्ञानाची समज मिळेल.  
 
+## सारांश आणि पुढील पावले  
 
-## चाचणी आणि तैनाती
+अभिनंदन! तुम्ही यशस्वीरित्या सुरवातीपासून एक संपूर्ण AI-सक्षम चॅट सहाय्यक तयार केला आहे. या प्रकल्पामुळे तुम्हाला आधुनिक वेब विकास तंत्रज्ञान आणि AI एकत्रीकरणासह प्रत्यक्ष अनुभव मिळाला आहे – आजच्या तंत्रज्ञानाच्या क्षेत्रात अत्यंत मौल्यवान कौशल्ये.  
 
-आता तुमच्याकडे फ्रंटएंड आणि बॅकएंड घटक तयार आहेत, चला सर्वकाही एकत्र कार्य करते याची चाचणी करूया आणि तुमचा चॅट असिस्टंट इतरांसोबत शेअर करण्यासाठी तैनाती पर्याय एक्सप्लोर करूया.
+### तुम्ही काय साध्य केले आहे  
 
-### स्थानिक चाचणी कार्यप्रवाह
+या धड्यादरम्यान, तुम्ही अनेक महत्त्वाच्या तंत्रज्ञान आणि संकल्पनांमध्ये प्राविण्य मिळवले आहे:  
 
-तुमचे संपूर्ण अॅप्लिकेशन चाचणी करण्यासाठी खालील चरणांचे अनुसरण करा:
+**बॅकएंड विकास:**  
+- **GitHub Models API** सह AI कार्यक्षमतेसाठी एकत्रीकरण केले  
+- **Flask वापरून** योग्य त्रुटी हाताळणीसह RESTful API तयार केला  
+- **पर्यावरणीय व्हेरिएबल्स वापरून** सुरक्षित प्रमाणीकरण अंमलात आणले  
+- **CORS कॉन्फिगर केले** जेणेकरून फ्रंटएंड आणि बॅकएंड दरम्यान क्रॉस-ऑरिजिन विनंत्या होऊ शकतील  
 
-```mermaid
-graph TD
-    A[Start Backend Server] --> B[Configure Environment Variables]
-    B --> C[Test API Endpoints]
-    C --> D[Open Frontend in Browser]
-    D --> E[Test Chat Functionality]
-    E --> F[Debug Any Issues]
-```
+**फ्रंटएंड विकास:**  
+- **सामाजिक HTML वापरून** प्रतिसादक्षम चॅट इंटरफेस तयार केला  
+- **आधुनिक JavaScript** सह async/await आणि वर्ग-आधारित आर्किटेक्चर अंमलात आणले  
+- **CSS Grid, Flexbox आणि अ‍ॅनिमेशनसह** आकर्षक वापरकर्ता इंटरफेस डिझाइन केला  
+- **प्रवेशयोग्यता वैशिष्ट्ये आणि प्रतिसादक्षम डिझाइन तत्त्वे** जोडली  
 
-**चरण-दर-चरण चाचणी प्रक्रिया:**
+**फुल-स्टॅक एकत्रीकरण:**  
+- **HTTP API कॉल्सद्वारे** फ्रंटएंड आणि बॅकएंड कनेक्ट केले  
+- **वास्तविक वेळेतील वापरकर्ता संवाद आणि असिंक्रोनस डेटा प्रवाह** हाताळला  
+- **अर्जामध्ये त्रुटी हाताळणी आणि वापरकर्ता अभिप्राय अंमलात आणला**  
+- **वापरकर्ता इनपुटपासून AI प्रतिसादापर्यंत संपूर्ण अर्ज कार्यप्रवाहाची चाचणी केली**  
 
-1. **तुमचा बॅकएंड सर्व्हर सुरू करा**:
-   ```bash
-   cd backend
-   source venv/bin/activate  # or venv\Scripts\activate on Windows
-   python api.py
-   ```
+### मुख्य शिकण्याचे परिणाम  
 
-2. **API कार्यरत आहे याची खात्री करा**:
-   - तुमच्या ब्राउझरमध्ये `http://localhost:5000` उघडा
-   - तुम्हाला तुमच्या FastAPI सर्व्हरकडून स्वागत संदेश दिसायला हवा
-
-3. **तुमचा फ्रंटएंड उघडा**:
-   - तुमच्या फ्रंटएंड डिरेक्टरीमध्ये जा
-   - तुमच्या वेब ब्राउझरमध्ये `index.html` उघडा
-   - किंवा चांगल्या विकास अनुभवासाठी VS Code चा Live Server विस्तार वापरा
-
-4. **चॅट कार्यक्षमता चाचणी करा**:
-   - इनपुट फील्डमध्ये संदेश टाइप करा
-   - "Send" वर क्लिक करा किंवा Enter दाबा
-   - AI योग्य प्रतिसाद देत आहे याची खात्री करा
-   - कोणत्याही जावास्क्रिप्ट त्रुटींसाठी ब्राउझर कन्सोल तपासा
-
-### सामान्य समस्यांचे निराकरण
-
-| समस्या | लक्षणे | उपाय |
-|---------|----------|----------|
-| **CORS त्रुटी** | फ्रंटएंड बॅकएंडपर्यंत पोहोचू शकत नाही | FastAPI CORSMiddleware योग्यरित्या कॉन्फिगर केले आहे याची खात्री करा |
-| **API की त्रुटी** | 401 अनधिकृत प्रतिसाद | तुमच्या `GITHUB_TOKEN` पर्यावरण व्हेरिएबल तपासा |
-| **कनेक्शन नाकारले** | फ्रंटएंडमध्ये नेटवर्क त्रुटी | बॅकएंड URL आणि Flask सर्व्हर चालू आहे याची खात्री करा |
-| **AI प्रतिसाद नाही** | रिक्त किंवा त्रुटी प्रतिसाद | API कोटा किंवा प्रमाणीकरण समस्यांसाठी बॅकएंड लॉग तपासा |
-
-**सामान्य डीबगिंग चरण:**
-- **तपासा** ब्राउझर डेव्हलपर टूल्स कन्सोलमध्ये जावास्क्रिप्ट त्रुटी
-- **तपासा** नेटवर्क टॅब यशस्वी API विनंत्या आणि प्रतिसाद दर्शवते
-- **पुनरावलोकन करा** बॅकएंड टर्मिनल आउटपुट Python त्रुटी किंवा API समस्यांसाठी
-- **पुष्टी करा** पर्यावरण व्हेरिएबल्स योग्यरित्या लोड केले आहेत आणि प्रवेशयोग्य आहेत
-
-## GitHub Copilot Agent Challenge 🚀
-
-Agent मोड वापरून खालील आव्हान पूर्ण करा:
-
-**वर्णन:** संभाषण इतिहास आणि संदेश टिकवून ठेवण्याची सुविधा जोडून चॅट असिस्टंट सुधारित करा. हे आव्हान तुम्हाला चॅट अॅप्लिकेशन्समध्ये स्टेट कसे व्यवस्थापित करायचे आणि चांगल्या वापरकर्ता अनुभवासाठी डेटा स्टोरेज कसे अंमलात आणायचे हे समजून घेण्यास मदत करेल.
-
-**प्रॉम्प्ट:** चॅट अॅप्लिकेशनमध्ये संभाषण इतिहास समाविष्ट करण्यासाठी सुधारित करा जो सत्रांदरम्यान टिकून राहतो. चॅट संदेश स्थानिक स्टोरेजमध्ये सेव्ह करण्याची सुविधा जोडा, पृष्ठ लोड झाल्यावर संभाषण इतिहास प्रदर्शित करा आणि "Clear History" बटण समाविष्ट करा. तसेच टायपिंग इंडिकेटर्स आणि संदेश टाइमस्टॅम्प्स अंमलात आणा जेणेकरून चॅट अनुभव अधिक वास्तववादी होईल.
-
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
-
-## असाइनमेंट: तुमचा वैयक्तिक AI असिस्टंट तयार करा
-
-आता तुम्ही तुमचा स्वतःचा AI असिस्टंट अंमलात आणण्याची वेळ आली आहे. फक्त ट्यूटोरियल कोडची पुनरावृत्ती करण्याऐवजी, ही संधी संकल्पना लागू करण्याची आहे, जे तुम्हाला तुमच्या स्वतःच्या आवडी आणि वापर प्रकरणे प्रतिबिंबित करणारे काहीतरी तयार करण्याची परवानगी देते.
-
-### प्रकल्प आवश्यकता
-
-तुमचा प्रकल्प स्वच्छ, व्यवस्थित संरचनेसह सेट करूया:
-
-```text
-my-ai-assistant/
-├── backend/
-│   ├── api.py          # Your FastAPI server
-│   ├── llm.py          # AI integration functions
-│   ├── .env            # Your secrets (keep this safe!)
-│   └── requirements.txt # Python dependencies
-├── frontend/
-│   ├── index.html      # Your chat interface
-│   ├── app.js          # The JavaScript magic
-│   └── styles.css      # Make it look amazing
-└── README.md           # Tell the world about your creation
-```
-
-### मुख्य अंमलबजावणी कार्ये
-
-**बॅकएंड विकास:**
-- **आमचा** FastAPI कोड घ्या आणि तो तुमचा स्वतःचा बनवा
-- **एक अद्वितीय AI व्यक्तिमत्व तयार करा** – कदाचित एक उपयुक्त स्वयंपाक सहाय्यक, एक सर्जनशील लेखन भागीदार किंवा एक अभ्यास साथीदार?
-- **मजबूत त्रुटी हाताळणी जोडा** जेणेकरून गोष्टी चुकीच्या झाल्यास तुमचे अॅप तुटणार नाही
-- **स्पष्ट दस्तऐवजीकरण लिहा** ज्यामुळे कोणीही तुमचा API कसा कार्य करतो हे समजू शकेल
-
-**फ्रंटएंड विकास:**
-- **एक चॅट इंटरफेस तयार करा** जो अंतर्ज्ञानी आणि स्वागतार्ह वाटतो
-- **स्वच्छ, आधुनिक जावास्क्रिप्ट लिहा** जे तुम्ही इतर विकसकांना अभिमानाने दाखवू शकता
-- **कस्टम स्टाइलिंग डिझाइन करा** जे तुमच्या AI च्या व्यक्तिमत्वाचे प्रतिबिंबित करते – मजेदार आणि रंगीत? स्वच्छ आणि किमान? पूर्णपणे तुमच्यावर अवलंबून आहे!
-- **याची खात्री करा** की ते फोन आणि संगणकांवर उत्तम प्रकारे कार्य करते
-
-**वैयक्तिकरण आवश्यकता:**
-- **एक अद्वितीय नाव आणि व्यक्तिमत्व निवडा** तुमच्या AI असिस्टंटसाठी – कदाचित असे काहीतरी जे तुमच्या आवडी किंवा तुम्हाला सोडवायच्या समस्या प्रतिबिंबित करते
-- **दृश्य डिझाइन सानुकूलित करा** तुमच्या असिस्टंटच्या वायबशी जुळण्यासाठी
-- **एक आकर्षक स्वागत संदेश लिहा** जो लोकांना चॅटिंग सुरू करण्याची इच्छा निर्माण करतो
-- **तुमच्या असिस्टंटला वेगवेगळ्या प्रकारच्या प्रश्नांसह चाचणी करा** ते कसे प्रतिसाद देते हे पाहण्यासाठी
-
-### सुधारणा कल्पना (ऐच्छिक)
-
-तुमचा प्रकल्प पुढील स्तरावर नेऊ इच्छिता? एक्सप्लोर करण्यासाठी येथे काही मजेदार कल्पना आहेत:
-
-| वैशिष्ट्य | वर्णन | तुम्ही सराव कराल अशा कौशल्ये |
-|---------|-------------|------------------------|
-| **संदेश इतिहास** | पृष्ठ रीफ्रेश झाल्यानंतरही संभाषण लक्षात ठेवा | localStorage सह काम करणे, JSON हाताळणी |
-| **टायपिंग इंडिकेटर्स** | प्रतिसादाची वाट पाहत असताना "AI टायपिंग आहे..." दर्शवा | CSS अॅनिमेशन, असिंक्रोनस प्रोग्रामिंग |
-| **संदेश टाइमस्टॅम्प्स** | प्रत्येक संदेश कधी पाठवला गेला ते दर्शवा | तारीख/वेळ स्वरूपन, UX डिझाइन |
-| **चॅट निर्यात करा** | वापरकर्त्यांना त्यांचे संभाषण डाउनलोड करू द्या | फाइल हाताळणी, डेटा निर्यात |
-| **थीम स्विचिंग** | लाइट/डार्क मोड टॉगल | CSS व्हेरिएबल्स, वापरकर्ता प्राधान्ये |
-| **व्हॉइस इनपुट** | स्पीच-टू-टेक्स्ट कार्यक्षमता जोडा | वेब APIs, प्रवेशयोग्यता |
-
-### चाचणी आणि दस्तऐवजीकरण
-
-**गुणवत्ता हमी:**
-- **तुमचे अॅप्लिकेशन विविध इनपुट प्रकार आणि एज केससह चाचणी करा**
-- **तपासा** प्रतिसादक्षम डिझाइन वेगवेगळ्या स्क्रीन आकारांवर कार्य करते
-- **तपासा** कीबोर्ड नेव्हिगेशन आणि स्क्रीन रीडर्ससह प्रवेशयोग्यता
-- **HTML आणि CSS वैध करा** मानकांचे पालन करण्यासाठी
-
-**दस्तऐवजीकरण आवश्यकता:**
-- **README.md लिहा** तुमच्या प्रकल्पाचे वर्णन आणि ते कसे चालवायचे
-- **तुमच्या चॅट इंटरफेसची कृतीत स्क्रीनशॉट समाविष्ट करा**
-- **तुम्ही जोडलेली कोणतीही अद्वितीय वैशिष्ट्ये किंवा सानुकूलने दस्तऐवजीकृत करा**
-- **इतर विकसकांसाठी स्पष्ट सेटअप सूचना प्रदान करा**
-
-### सबमिशन मार्गदर्शक तत्त्वे
-
-**प्रकल्प वितरित:**
-1. सर्व स्त्रोत कोडसह संपूर्ण प्रकल्प फोल्डर
-2. README.md प्रकल्पाचे वर्णन आणि सेटअप सूचना
-3. तुमच्या चॅट असिस्टंटची कृतीत स्क्रीनशॉट
-4. तुम्ही काय शिकलात आणि तुम्हाला कोणत्या आव्हानांचा सामना करावा लागला यावर थोडक्यात विचार
-
-**मूल्यांकन निकष:**
-- **कार्यक्षमता**: चॅट असिस्टंट अपेक्षेप्रमाणे कार्य करते का?
-- **कोड गुणवत्ता**: कोड चांगल्या प्रकारे आयोजित, टिप्पणी केलेला आणि देखभाल करण्यायोग्य आहे का?
-- **डिझाइन**: इंटरफेस व्हिज्युअली आकर्षक आणि वापरण्यास सुलभ आहे का?
-- **सर्जनशीलता**: तुमची अंमलबजावणी किती अद्वितीय आणि वैयक्तिकृत आहे?
-- **दस्तऐवजीकरण**: सेटअप सूचना स्पष्ट आणि संपूर्ण आहेत का?
-
-> 💡 **यशस्वी टिप**: प्रथम मूलभूत आवश्यकता पूर्ण करण्यास सुरुवात करा, नंतर सर्वकाही कार्य करत असल्यावर सुधारणा जोडा. प्रगत वैशिष्ट्ये जोडण्यापूर्वी एक पॉलिश कोर अनुभव तयार करण्यावर लक्ष केंद्रित करा.
-
-## समाधान
-
-[समाधान](./solution/README.md)
-
-## बोनस आव्हाने
-
-तुमचा AI असिस्टंट पुढील स्तरावर नेण्यासाठी तयार आहात? AI एकत्रीकरण आणि वेब विकासाची सखोल समजून घेण्यासाठी तुम्हाला मदत करणारी ही प्रगत आव्हाने आजमावून पहा.
-
-### व्यक्तिमत्व सानुकूलन
-
-तुमच्या AI असिस्टंटला एक अद्वितीय व्यक्तिमत्व दिल्यावर खरी जादू होते. विशेष सहाय्यक तयार करण्यासाठी वेगवेगळ्या सिस्टम प्रॉम्प्टसह प्रयोग करा:
-
-**व्यावसायिक सहाय्यक उदाहरण:**
-```python
-call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
-```
-
-**सर्जनशील लेखन सहाय्यक उदाहरण:**
-```python
-call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
-```
-
-**तांत्रिक मार्गदर्शक उदाहरण:**
-```python
-call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
+```mermaid
+mindmap
+  root((AI Chat App Skills))
+    API Integration
+      Authentication
+      Error Handling
+      Async Programming
+    Web Development
+      HTML5 Semantics
+      Modern CSS
+      ES6+ JavaScript
+    User Experience
+      Responsive Design
+      Accessibility
+      Real-time Interaction
+    AI Understanding
+      Prompt Engineering
+      Model Parameters
+      Conversation Flow
 ```
+  
+या प्रकल्पाने तुम्हाला AI-सक्षम अनुप्रयोग तयार करण्याच्या मूलभूत गोष्टींची ओळख करून दिली आहे, जे वेब विकासाचे भविष्य दर्शवते. तुम्हाला पारंपरिक वेब अनुप्रयोगांमध्ये AI क्षमता कशी एकत्रित करायची हे आता समजले आहे, ज्यामुळे बुद्धिमान आणि प्रतिसादक्षम वापरकर्ता अनुभव तयार होतो.  
 
-### फ्रंटएंड सुधारणा
-
-तुमच्या चॅट इंटरफेसला या दृश्य आणि कार्यात्मक सुधारणा करून रूपांतरित करा:
+### व्यावसायिक उपयोग  
 
-**प्रगत CSS वैशिष्ट्ये:**
-- **गुळगुळीत संदेश अॅनिमेशन आणि ट्रान्झिशन्स अंमलात आणा**
-- **CSS आकार आणि ग्रेडियंटसह कस्टम चॅट बबल डिझाइन जोडा**
-- **AI "विचार करत आहे" असताना टायपिंग इंडिकेटर अॅनिमेशन तयार करा**
-- **इमोजी प्रतिक्रिया किंवा संदेश रेटिंग प्रणाली डिझाइन करा**
+या धड्यादरम्यान तुम्ही विकसित केलेली कौशल्ये आधुनिक सॉफ्टवेअर विकास करिअरमध्ये थेट लागू होतात:  
 
-**जावास्क्रिप्ट सुधारणा:**
-- **कीबोर्ड शॉर्टकट जोडा** (Ctrl+Enter पाठवण्यासाठी, इनपुट साफ करण्यासाठी Escape)
-- **संदेश शोध आणि फिल्टरिंग कार्यक्षमता अंमलात आणा**
-- **संभाषण निर्यात वैशिष्ट्य तयार करा** (टेक्स्ट किंवा JSON म्हणून डाउनलोड करा)
-- **संदेश गमावणे टाळण्यासाठी स्थानिक स्टोरेजमध्ये ऑटो-सेव्ह जोडा**
+- **आधुनिक फ्रेमवर्क आणि API वापरून फुल-स्टॅक वेब विकास**  
+- **वेब अनुप्रयोग आणि मोबाइल अ‍ॅप्समध्ये AI एकत्रीकरण**  
+- **मायक्रोसर्व्हिस आर्किटेक्चरसाठी API डिझाइन आणि विकास**  
+- **प्रवेशयोग्यता आणि प्रतिसादक्षम डिझाइनवर लक्ष केंद्रित करून वापरकर्ता इंटरफेस विकास**  
+- **DevOps पद्धती** ज्यामध्ये पर्यावरण कॉन्फिगरेशन आणि डिप्लॉयमेंट समाविष्ट आहे  
 
-### प्रगत AI एकत्रीकरण
+### तुमच्या AI विकास प्रवासाची पुढील पायरी  
 
-**एकाधिक AI व्यक्तिमत्वे:**
-- **ड्रॉपडाउन तयार करा** वेगवेगळ्या AI व्यक्तिमत्वांमध्ये स्विच करण्यासाठी
-- **वापरकर्त्याचे प्राधान्य व्यक्तिमत्व स्थानिक स्टोरेजमध्ये सेव्ह करा**
-- **संभाषण प्रवाह राखणारे संदर्भ स्विचिंग अंमलात आणा**
+**पुढील शिकण्याची पावले:**  
+- **अधिक प्रगत AI मॉडेल्स आणि API (GPT-4, Claude, Gemini)** एक्सप्लोर करा  
+- **AI प्रतिसाद सुधारण्यासाठी प्रॉम्प्ट इंजिनिअरिंग तंत्रज्ञान शिकणे**  
+- **संवाद डिझाइन आणि चॅटबॉट वापरकर्ता अनुभव तत्त्वे अभ्यासणे**  
+- **AI सुरक्षा, नैतिकता आणि जबाबदार AI विकास पद्धतींचा अभ्यास करणे**  
+- **संवादाची स्मृती आणि संदर्भ जागरूकता असलेल्या अधिक जटिल अनुप्रयोगांची निर्मिती करणे**  
 
-**स्मार्ट प्रतिसाद वैशिष्ट्ये:**
-- **संभाषण संदर्भ जागरूकता जोडा** (AI मागील संदेश लक्षात ठेवते)
-- **संभाषण विषयावर आधारित स्मार्ट सूचना अंमलात आणा**
-- **सामान्य प्रश्नांसाठी जलद प्रतिसाद बटणे तयार करा**
+**प्रगत प्रकल्प कल्पना:**  
+- AI मॉडरेशनसह मल्टी-युजर चॅट रूम्स  
+- AI-सक्षम ग्राहक सेवा चॅटबॉट्स  
+- वैयक्तिक शिक्षणासह शैक्षणिक ट्युटरिंग सहाय्यक  
+- वेगवेगळ्या AI व्यक्तिमत्त्वांसह सर्जनशील लेखन सहकारी  
+- विकसकांसाठी तांत्रिक दस्तऐवज सहाय्यक  
 
-> 🎯 **शिकण्याचे उद्दिष्ट**: ही बोनस आव्हाने तुम्हाला प्रॉडक्शन अॅप्लिकेशन्समध्ये वापरल्या जाणाऱ्या प्रगत वेब विकास पद्धती आणि AI एकत्रीकरण तंत्र समजून घेण्यास मदत करतात.
+## GitHub Codespaces सह सुरुवात करा  
 
-## सारांश आणि पुढील पावले
+या प्रकल्पाचा क्लाउड विकास वातावरणात प्रयत्न करायचा आहे का? GitHub Codespaces तुमच्या ब्राउझरमध्ये संपूर्ण विकास सेटअप प्रदान करते, स्थानिक सेटअप आवश्यकता न करता AI अनुप्रयोगांसह प्रयोग करण्यासाठी परिपूर्ण आहे.  
 
-अभिनंदन! तुम्ही स्क्रॅचपासून AI-सक्षम चॅट असिस्टंट यशस्वीरित्या तयार केला आहे. या प्रकल्पाने तुम्हाला आधुनिक वेब विकास तंत्रज्ञान आणि AI एकत्रीकरणाचा प्रत्यक्ष अनुभव दिला आहे – आजच्या तंत्रज्ञानाच्या लँडस्केपमध्ये अधिकाधिक मौल्यवान कौशल्ये.
+### तुमचे विकास वातावरण सेट करणे  
 
-### तुम्ही काय साध्य केले आहे
+**पायरी 1: टेम्पलेटमधून तयार करा**  
+- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) वर जा  
+- वरच्या उजव्या कोपऱ्यात "Use this template" वर क्लिक करा (तुम्ही GitHub मध्ये लॉग इन असल्याची खात्री करा)  
 
-या धड्यादरम्यान, तुम्ही अनेक महत्त्वाच्या तंत्रज्ञान आणि संकल्पनांमध्ये प्राविण्य मिळवले आहे:
+![टेम्पलेट इंटरफेस तयार करा ज्यामध्ये हिरव्या "Use this template" बटणाचा समावेश आहे](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.mr.png)  
 
-**बॅकएंड विकास:**
-- **GitHub Models API सह एकत्रित केले** AI कार्यक्षमतेसाठी
-- **Flask वापरून RESTful API तयार केले** योग्य त्रुटी हाताळणीसह
-- **सुरक्षित प्रमाणीकरण अंमलात आणले** पर्यावरण व्हेरिएबल्स वापरून
-- **CORS कॉन्फिगर केले** फ्रंटएंड आणि बॅकएंड दरम्यान क्रॉस-ऑरिजिन विनंत्यांसाठी
+**पायरी 2: Codespaces लॉन्च करा**  
+- तुमच्या नव्याने तयार केलेल्या रिपॉझिटरी उघडा  
+- हिरव्या "Code" बटणावर क्लिक करा आणि "Codespaces" निवडा  
+- "Create codespace on main" निवडा आणि तुमचे विकास वातावरण सुरू करा  
 
-**फ्रंटएंड विकास:**
-- **सामान्य HTML वापरून प्रतिसादक्षम चॅट इंटरफेस तयार केला**
-- **आधुनिक जावास्क्रिप्ट अंमलात आणले** async/await आणि वर्ग-आधारित आर्किटेक्चरसह
-- **CSS Grid, Flexbox आणि अॅनिमेशनसह आकर्षक वापरकर्ता इंटरफेस डिझाइन केले**
-- **प्रवेशयोग्यता वैशिष्ट्ये आणि प्रतिसादक्षम डिझाइन तत्त्वे जोडली**
+![Codespace इंटरफेस तयार करा ज्यामध्ये क्लाउड विकास वातावरण सुरू करण्याचे पर्याय आहेत](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.mr.png)  
 
-**पूर्ण-स्टॅक एकत्रीकरण:**
-- **HTTP
-- **पोर्ट फॉरवर्डिंग** तुमच्या अ‍ॅप्लिकेशन्सची चाचणी करण्यासाठी
+**पायरी 3: वातावरण कॉन्फिगरेशन**  
+तुमचे Codespace लोड झाल्यावर, तुम्हाला खालील गोष्टींमध्ये प्रवेश मिळेल:  
+- **पूर्व-स्थापित** Python, Node.js, आणि सर्व आवश्यक विकास साधने  
+- **VS Code इंटरफेस** वेब विकासासाठी एक्सटेंशन्ससह  
+- **टर्मिनल प्रवेश** बॅकएंड आणि फ्रंटएंड सर्व्हर चालवण्यासाठी  
+- **पोर्ट फॉरवर्डिंग** तुमचे अनुप्रयोग चाचणी करण्यासाठी  
 
-**Codespaces काय प्रदान करते:**
-- स्थानिक वातावरण सेटअप आणि कॉन्फिगरेशन समस्यांचे **निर्मूलन करते**
-- विविध उपकरणांवर एकसंध विकास वातावरण **प्रदान करते**
-- वेब विकासासाठी पूर्व-कॉन्फिगर केलेली साधने आणि विस्तारांचा **समावेश करते**
-- आवृत्ती नियंत्रण आणि सहकार्यासाठी GitHub सोबत अखंड एकत्रीकरण **प्रदान करते**
+**Codespaces काय प्रदान करते:**  
+- **स्थानिक वातावरण सेटअप आणि कॉन्फिगरेशन समस्यांचे निराकरण करते**  
+- **विविध उपकरणांमध्ये सुसंगत विकास वातावरण प्रदान करते**  
+- **वेब विकासासाठी पूर्व-कॉन्फिगर केलेली साधने आणि एक्सटेंशन्स समाविष्ट करते**  
+- **आवृत्ती नियंत्रण आणि सहयोगासाठी GitHub सह अखंड एकत्रीकरण प्रदान करते**  
 
-> 🚀 **प्रो टिप**: Codespaces AI अ‍ॅप्लिकेशन्स शिकणे आणि प्रोटोटाइपिंगसाठी उत्तम आहे कारण ते सर्व क्लिष्ट वातावरण सेटअप आपोआप हाताळते, ज्यामुळे तुम्ही कॉन्फिगरेशन समस्यांऐवजी बांधणी आणि शिकण्यावर लक्ष केंद्रित करू शकता.
+> 🚀 **प्रो टिप**: Codespaces AI अनुप्रयोग शिकण्यासाठी आणि प्रोटोटाइपिंगसाठी परिपूर्ण आहे कारण ते सर्व जटिल वातावरण सेटअप स्वयंचलितपणे हाताळते, तुम्हाला कॉन्फिगरेशन समस्या सोडवण्याऐवजी तयार करणे आणि शिकणे यावर लक्ष केंद्रित करण्यास अनुमती देते.  
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/mr/README.md b/translations/mr/README.md
index bb4bcdbac2..8bb233370d 100644
--- a/translations/mr/README.md
+++ b/translations/mr/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3fd21589b9bb0a90b9c9dd7d587f7e43",
-  "translation_date": "2025-10-20T21:12:35+00:00",
+  "original_hash": "8b9d0562ea649b6012d1a67acc630681",
+  "translation_date": "2025-11-03T14:10:03+00:00",
   "source_file": "README.md",
   "language_code": "mr"
 }
@@ -19,9 +19,9 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
 
-# नवशिक्यांसाठी वेब विकास - एक अभ्यासक्रम
+# नवशिक्यांसाठी वेब विकास - अभ्यासक्रम
 
-मायक्रोसॉफ्ट क्लाउड अॅडव्होकेट्सद्वारे दिल्या जाणाऱ्या 12 आठवड्यांच्या व्यापक कोर्ससह वेब विकासाचे मूलभूत तत्त्वे शिकवा. 24 धड्यांपैकी प्रत्येक धडा जावास्क्रिप्ट, CSS आणि HTML मध्ये टेरॅरियम्स, ब्राउझर एक्सटेंशन्स आणि स्पेस गेम्ससारख्या प्रोजेक्ट्सद्वारे सखोलपणे शिकवतो. क्विझ, चर्चासत्रे आणि व्यावहारिक असाइनमेंट्ससह सहभाग घ्या. आमच्या प्रभावी प्रोजेक्ट-आधारित शिक्षण पद्धतीसह तुमचे कौशल्य वाढवा आणि तुमचे ज्ञान टिकवून ठेवा. आजच तुमचा कोडिंग प्रवास सुरू करा!
+मायक्रोसॉफ्ट क्लाउड अॅडव्होकेट्सद्वारे तयार केलेल्या 12 आठवड्यांच्या व्यापक कोर्ससह वेब विकासाची मूलभूत तत्त्वे शिका. प्रत्येक 24 धड्यांमध्ये जावास्क्रिप्ट, CSS आणि HTML यावर सखोल प्रकल्पांद्वारे चर्चा केली जाते जसे की टेरॅरियम्स, ब्राउझर एक्सटेंशन आणि स्पेस गेम्स. क्विझ, चर्चासत्रे आणि व्यावहारिक असाइनमेंट्ससह सहभाग घ्या. आमच्या प्रभावी प्रकल्प-आधारित शिक्षण पद्धतीसह तुमचे कौशल्य वाढवा आणि तुमचे ज्ञान टिकवून ठेवा. आजच तुमचा कोडिंग प्रवास सुरू करा!
 
 Azure AI Foundry Discord समुदायामध्ये सामील व्हा
 
@@ -37,24 +37,24 @@ Azure AI Foundry Discord समुदायामध्ये सामील 
 #### GitHub Action द्वारे समर्थित (स्वयंचलित आणि नेहमी अद्ययावत)
 
 <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
-[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](./README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
+[अरबी](../ar/README.md) | [बंगाली](../bn/README.md) | [बल्गेरियन](../bg/README.md) | [बर्मी (म्यानमार)](../my/README.md) | [चिनी (सरलीकृत)](../zh/README.md) | [चिनी (पारंपरिक, हाँगकाँग)](../hk/README.md) | [चिनी (पारंपरिक, मकाऊ)](../mo/README.md) | [चिनी (पारंपरिक, तैवान)](../tw/README.md) | [क्रोएशियन](../hr/README.md) | [झेक](../cs/README.md) | [डॅनिश](../da/README.md) | [डच](../nl/README.md) | [एस्टोनियन](../et/README.md) | [फिनिश](../fi/README.md) | [फ्रेंच](../fr/README.md) | [जर्मन](../de/README.md) | [ग्रीक](../el/README.md) | [हिब्रू](../he/README.md) | [हिंदी](../hi/README.md) | [हंगेरियन](../hu/README.md) | [इंडोनेशियन](../id/README.md) | [इटालियन](../it/README.md) | [जपानी](../ja/README.md) | [कोरियन](../ko/README.md) | [लिथुआनियन](../lt/README.md) | [मलय](../ms/README.md) | [मराठी](./README.md) | [नेपाळी](../ne/README.md) | [नॉर्वेजियन](../no/README.md) | [पर्शियन (फारसी)](../fa/README.md) | [पोलिश](../pl/README.md) | [पोर्तुगीज (ब्राझील)](../br/README.md) | [पोर्तुगीज (पोर्तुगाल)](../pt/README.md) | [पंजाबी (गुरुमुखी)](../pa/README.md) | [रोमानियन](../ro/README.md) | [रशियन](../ru/README.md) | [सर्बियन (सिरिलिक)](../sr/README.md) | [स्लोव्हाक](../sk/README.md) | [स्लोव्हेनियन](../sl/README.md) | [स्पॅनिश](../es/README.md) | [स्वाहिली](../sw/README.md) | [स्वीडिश](../sv/README.md) | [टागालोग (फिलिपिनो)](../tl/README.md) | [तमिळ](../ta/README.md) | [थाई](../th/README.md) | [तुर्की](../tr/README.md) | [युक्रेनियन](../uk/README.md) | [उर्दू](../ur/README.md) | [व्हिएतनामी](../vi/README.md)
 <!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
 
-**जर तुम्हाला अतिरिक्त भाषांमध्ये भाषांतर हवे असेल तर [येथे सूचीबद्ध](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) भाषांमध्ये समर्थन उपलब्ध आहे**
+**जर तुम्हाला अतिरिक्त भाषांमध्ये भाषांतर हवे असेल तर समर्थित भाषांची यादी [येथे](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) दिली आहे**
 
-[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
+[![Visual Studio Code मध्ये उघडा](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
 
 #### 🧑‍🎓 _तुम्ही विद्यार्थी आहात का?_
 
-[**Student Hub पृष्ठाला भेट द्या**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) जिथे तुम्हाला नवशिक्यांसाठी संसाधने, विद्यार्थी पॅक आणि अगदी मोफत प्रमाणपत्र व्हाउचर मिळवण्याचे मार्ग सापडतील. हे पृष्ठ बुकमार्क करा आणि वेळोवेळी तपासा कारण आम्ही दर महिन्याला सामग्री बदलतो.
+[**Student Hub पृष्ठाला**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) भेट द्या जिथे तुम्हाला नवशिक्या संसाधने, विद्यार्थी पॅक आणि अगदी मोफत प्रमाणपत्र व्हाउचर मिळवण्याचे मार्ग सापडतील. हे पृष्ठ बुकमार्क करा आणि वेळोवेळी तपासा कारण आम्ही दरमहा सामग्री बदलतो.
 
 ### 📣 घोषणा - GitHub Copilot Agent मोड आव्हाने पूर्ण करण्यासाठी नवीन!
 
-नवीन आव्हान जोडले गेले आहे, "GitHub Copilot Agent Challenge 🚀" बहुतेक अध्यायांमध्ये शोधा. हे एक नवीन आव्हान आहे जे तुम्ही GitHub Copilot आणि Agent मोड वापरून पूर्ण करू शकता. जर तुम्ही यापूर्वी Agent मोड वापरला नसेल तर तो केवळ मजकूर तयार करण्यास सक्षम नाही तर फाइल्स तयार आणि संपादित करू शकतो, कमांड चालवू शकतो आणि बरेच काही करू शकतो.
+नवीन आव्हान जोडले गेले आहे, "GitHub Copilot Agent Challenge 🚀" बहुतेक अध्यायांमध्ये शोधा. हे GitHub Copilot आणि Agent मोड वापरून पूर्ण करण्यासाठी एक नवीन आव्हान आहे. जर तुम्ही Agent मोड वापरला नसेल तर तो केवळ मजकूर तयार करण्यास सक्षम नाही तर फाइल्स तयार आणि संपादित करू शकतो, कमांड चालवू शकतो आणि बरेच काही करू शकतो.
 
-### 📣 घोषणा - _Generative AI वापरून नवीन प्रोजेक्ट तयार करा_
+### 📣 घोषणा - _Generative AI वापरून तयार करण्यासाठी नवीन प्रकल्प_
 
-नवीन AI सहाय्यक प्रोजेक्ट नुकताच जोडला आहे, तपासा [प्रोजेक्ट](./09-chat-project/README.md)
+नवीन AI सहाय्यक प्रकल्प नुकताच जोडला आहे, तपासा [प्रकल्प](./09-chat-project/README.md)
 
 ### 📣 घोषणा - _नवीन अभ्यासक्रम_ JavaScript साठी Generative AI वर नुकताच प्रसिद्ध झाला
 
@@ -70,31 +70,31 @@ Azure AI Foundry Discord समुदायामध्ये सामील 
 
 ![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.mr.png)
 
-प्रत्येक धड्यात पूर्ण करण्यासाठी एक असाइनमेंट, ज्ञान तपासणी आणि आव्हान समाविष्ट आहे जे तुम्हाला खालील विषय शिकण्यासाठी मार्गदर्शन करेल:
+प्रत्येक धड्यात पूर्ण करण्यासाठी असाइनमेंट, ज्ञान तपासणी आणि आव्हान समाविष्ट आहे जे तुम्हाला खालील विषय शिकण्यासाठी मार्गदर्शन करेल:
 - प्रॉम्प्टिंग आणि प्रॉम्प्ट इंजिनिअरिंग
 - मजकूर आणि प्रतिमा अॅप निर्मिती
 - शोध अॅप्स
 
-[https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) ला भेट द्या आणि सुरुवात करा!
+[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ला भेट द्या आणि सुरुवात करा!
 
 
 
 ## 🌱 सुरुवात करणे
 
-> **शिक्षक**, आम्ही [काही सूचना समाविष्ट केल्या आहेत](for-teachers.md) की हा अभ्यासक्रम कसा वापरायचा. आमच्या [चर्चा मंचावर](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) तुमचे अभिप्राय आम्हाला आवडतील!
+> **शिक्षक**, आम्ही [काही सूचना समाविष्ट केल्या आहेत](for-teachers.md) या अभ्यासक्रमाचा वापर कसा करायचा याबद्दल. आम्हाला तुमचे अभिप्राय [आमच्या चर्चा मंचावर](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) आवडेल!
 
-**[विद्यार्थी](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक धड्यासाठी, प्री-लेक्चर क्विझसह प्रारंभ करा आणि लेक्चर सामग्री वाचून, विविध क्रियाकलाप पूर्ण करून आणि पोस्ट-लेक्चर क्विझसह तुमची समज तपासून पुढे जा.
+**[शिकणारे](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक धड्यासाठी, प्री-लेक्चर क्विझसह प्रारंभ करा आणि लेक्चर सामग्री वाचून, विविध क्रियाकलाप पूर्ण करून आणि पोस्ट-लेक्चर क्विझसह तुमची समज तपासून पुढे जा.
 
-तुमचा शिक्षणाचा अनुभव वाढवण्यासाठी, प्रोजेक्ट्सवर एकत्र काम करण्यासाठी तुमच्या सहकाऱ्यांशी कनेक्ट व्हा! आमच्या [चर्चा मंचावर](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) चर्चांना प्रोत्साहन दिले जाते जिथे आमचे मॉडरेटर तुमच्या प्रश्नांची उत्तरे देण्यासाठी उपलब्ध असतील.
+तुमचा शिक्षणाचा अनुभव वाढवण्यासाठी, प्रकल्पांवर एकत्र काम करण्यासाठी तुमच्या सहकाऱ्यांशी संपर्क साधा! आमच्या [चर्चा मंचावर](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) चर्चांना प्रोत्साहन दिले जाते जिथे आमची मॉडरेटर टीम तुमच्या प्रश्नांची उत्तरे देण्यासाठी उपलब्ध असेल.
 
-तुमचे शिक्षण पुढे नेण्यासाठी, आम्ही [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) एक्सप्लोर करण्याची अत्यंत शिफारस करतो जे अतिरिक्त अभ्यास सामग्रीसाठी आहे.
+तुमचे शिक्षण पुढे नेण्यासाठी, आम्ही [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) एक्सप्लोर करण्याची अत्यंत शिफारस करतो जे अतिरिक्त अभ्यास साहित्य प्रदान करते.
 
 ### 📋 तुमचे वातावरण सेट करणे
 
-या अभ्यासक्रमासाठी विकासाचे वातावरण तयार आहे! सुरुवात करताना तुम्ही [Codespace](https://github.com/features/codespaces/) (_ब्राउझर-आधारित, कोणत्याही इंस्टॉलची गरज नाही_) मध्ये किंवा तुमच्या संगणकावर स्थानिक पातळीवर [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) सारख्या टेक्स्ट एडिटरचा वापर करून चालवू शकता.
+या अभ्यासक्रमासाठी विकास वातावरण तयार आहे! सुरुवात करताना तुम्ही [Codespace](https://github.com/features/codespaces/) (_ब्राउझर-आधारित, कोणत्याही इंस्टॉलची गरज नाही_) किंवा तुमच्या संगणकावर स्थानिकपणे [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) सारख्या टेक्स्ट एडिटरचा वापर करून चालवू शकता.
 
 #### तुमची रेपॉझिटरी तयार करा
-तुमचे काम सहजपणे सेव्ह करण्यासाठी, तुमच्या रेपॉझिटरीची स्वतःची प्रत तयार करणे शिफारसीय आहे. तुम्ही पृष्ठाच्या शीर्षस्थानी असलेल्या **Use this template** बटणावर क्लिक करून हे करू शकता. यामुळे तुमच्या GitHub खात्यात अभ्यासक्रमाची प्रत असलेली नवीन रेपॉझिटरी तयार होईल.
+तुमचे काम सहजपणे सेव्ह करण्यासाठी, तुम्ही या रेपॉझिटरीची स्वतःची प्रत तयार करणे शिफारसीय आहे. तुम्ही पृष्ठाच्या शीर्षस्थानी **Use this template** बटणावर क्लिक करून हे करू शकता. यामुळे तुमच्या GitHub खात्यात अभ्यासक्रमाची प्रत असलेली नवीन रेपॉझिटरी तयार होईल.
 
 या चरणांचे अनुसरण करा:
 1. **रेपॉझिटरी फोर्क करा**: या पृष्ठाच्या वरच्या उजव्या कोपऱ्यातील "Fork" बटणावर क्लिक करा.
@@ -106,12 +106,11 @@ Azure AI Foundry Discord समुदायामध्ये सामील 
 
 ![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.mr.png)
 
-#### तुमच्या संगणकावर स्थानिक पातळीवर अभ्यासक्रम चालवणे
-
-तुमच्या संगणकावर स्थानिक पातळीवर हा अभ्यासक्रम चालवण्यासाठी, तुम्हाला टेक्स्ट एडिटर, ब्राउझर आणि कमांड लाइन टूलची आवश्यकता असेल. आमचा पहिला धडा, [प्रोग्रामिंग भाषांची ओळख आणि व्यापाराचे साधने](../../1-getting-started-lessons/1-intro-to-programming-languages), तुम्हाला या साधनांपैकी प्रत्येकासाठी विविध पर्यायांमधून मार्गदर्शन करेल जे तुम्हाला सर्वात चांगले वाटते ते निवडण्यासाठी.
+#### तुमच्या संगणकावर स्थानिकपणे अभ्यासक्रम चालवणे
 
-आमची शिफारस आहे की तुम्ही [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) एडिटर म्हणून वापरा, ज्यामध्ये एक अंगभूत [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) देखील आहे. तुम्ही [इथे](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) Visual Studio Code डाउनलोड करू शकता.
+तुमच्या संगणकावर स्थानिकपणे अभ्यासक्रम चालवण्यासाठी, तुम्हाला टेक्स्ट एडिटर, ब्राउझर आणि कमांड लाइन टूलची आवश्यकता असेल. आमचा पहिला धडा, [प्रोग्रामिंग भाषांची ओळख आणि व्यापाराचे साधने](../../1-getting-started-lessons/1-intro-to-programming-languages), तुम्हाला या साधनांसाठी विविध पर्यायांमधून मार्गदर्शन करेल जे तुम्हाला सर्वोत्तम वाटेल ते निवडण्यासाठी.
 
+आमची शिफारस आहे की तुम्ही [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) एडिटर म्हणून वापरा, ज्यामध्ये [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) देखील समाविष्ट आहे. तुम्ही [इथे](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) Visual Studio Code डाउनलोड करू शकता.
 
 1. तुमच्या रेपॉझिटरीला तुमच्या संगणकावर क्लोन करा. तुम्ही **Code** बटणावर क्लिक करून आणि URL कॉपी करून हे करू शकता:
 
@@ -125,7 +124,6 @@ Azure AI Foundry Discord समुदायामध्ये सामील 
 
 2. Visual Studio Code मध्ये फोल्डर उघडा. तुम्ही **File** > **Open Folder** वर क्लिक करून आणि तुम्ही नुकतेच क्लोन केलेले फोल्डर निवडून हे करू शकता.
 
-
 >  शिफारस केलेले Visual Studio Code एक्सटेंशन्स:
 >
 > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML पृष्ठ Visual Studio Code मध्ये प्रीव्ह्यू करण्यासाठी
@@ -137,68 +135,68 @@ Azure AI Foundry Discord समुदायामध्ये सामील 
 - पर्यायी पूरक व्हिडिओ
 - धड्यापूर्वीचा वॉर्मअप क्विझ
 - लेखी धडा
-- प्रकल्प-आधारित धड्यांसाठी, प्रकल्प कसा तयार करायचा यासाठी चरण-दर-चरण मार्गदर्शक
+- प्रकल्प-आधारित धड्यांसाठी, प्रकल्प कसा तयार करायचा याचे चरण-दर-चरण मार्गदर्शन
 - ज्ञान तपासणी
 - एक आव्हान
 - पूरक वाचन
 - असाइनमेंट
 - [धड्यानंतरचा क्विझ](https://ff-quizzes.netlify.app/web/)
 
-> **क्विझबद्दल एक टीप**: सर्व क्विझ Quiz-app फोल्डरमध्ये समाविष्ट आहेत, एकूण 48 क्विझेस, प्रत्येकामध्ये तीन प्रश्न आहेत. ते [येथे उपलब्ध आहेत](https://ff-quizzes.netlify.app/web/) आणि Quiz-app स्थानिक पातळीवर चालवता येतो किंवा Azure वर तैनात करता येतो; `quiz-app` फोल्डरमधील सूचनांचे अनुसरण करा.
+> **क्विझबद्दल एक टीप**: सर्व क्विझ Quiz-app फोल्डरमध्ये समाविष्ट आहेत, प्रत्येक तीन प्रश्नांसह एकूण 48 क्विझ. ते [येथे](https://ff-quizzes.netlify.app/web/) उपलब्ध आहेत. Quiz app स्थानिक पातळीवर चालवता येते किंवा Azure वर तैनात करता येते; `quiz-app` फोल्डरमधील सूचनांचे अनुसरण करा.
 
 ## 🗃️ धडे
 
 |     |                       प्रकल्पाचे नाव                       |                            शिकवलेले संकल्पना                             | शिकण्याचे उद्दिष्ट                                                                                                                 |                                                         संबंधित धडा                                                          |         लेखक          |
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
-| 01  |                     सुरुवात करा                      |           प्रोग्रामिंगची ओळख आणि वापरायचे साधने           | बहुतेक प्रोग्रामिंग भाषांच्या मूलभूत गोष्टी आणि व्यावसायिक विकसकांना त्यांचे काम करण्यास मदत करणाऱ्या सॉफ्टवेअरबद्दल जाणून घ्या | [प्रोग्रामिंग भाषांची ओळख आणि वापरायचे साधने](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
-| 02  |                     सुरुवात करा                      |             GitHub च्या मूलभूत गोष्टी, टीमसोबत काम करणे             | आपल्या प्रकल्पात GitHub कसे वापरायचे, कोड बेसवर इतरांसोबत कसे सहकार्य करायचे                                                    |                            [GitHub ची ओळख](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
+| 01  |                     सुरुवात करा                      |           प्रोग्रामिंगची ओळख आणि वापरण्यात येणारे साधन           | बहुतेक प्रोग्रामिंग भाषांच्या मूलभूत गोष्टी आणि व्यावसायिक विकसकांना त्यांचे काम करण्यास मदत करणाऱ्या सॉफ्टवेअरबद्दल जाणून घ्या | [प्रोग्रामिंग भाषांची ओळख आणि वापरण्यात येणारे साधन](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+| 02  |                     सुरुवात करा                      |             GitHub च्या मूलभूत गोष्टी, टीमसोबत काम करणे             | तुमच्या प्रकल्पात GitHub कसे वापरायचे, कोड बेसवर इतरांसोबत कसे सहयोग करायचे                                                    |                            [GitHub ची ओळख](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
 | 03  |                     सुरुवात करा                      |                             ऍक्सेसिबिलिटी                              | वेब ऍक्सेसिबिलिटीच्या मूलभूत गोष्टी जाणून घ्या                                                                                               |                       [ऍक्सेसिबिलिटी मूलभूत गोष्टी](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
-| 04  |                        JS मूलभूत गोष्टी                         |                         JavaScript डेटा प्रकार                          | JavaScript डेटा प्रकारांची मूलभूत माहिती                                                                                                 |                                       [डेटा प्रकार](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+| 04  |                        JS मूलभूत गोष्टी                         |                         जावास्क्रिप्ट डेटा प्रकार                          | जावास्क्रिप्ट डेटा प्रकारांची मूलभूत माहिती                                                                                                 |                                       [डेटा प्रकार](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
 | 05  |                        JS मूलभूत गोष्टी                         |                         फंक्शन्स आणि मेथड्स                          | अॅप्लिकेशनच्या लॉजिक फ्लोचे व्यवस्थापन करण्यासाठी फंक्शन्स आणि मेथड्सबद्दल जाणून घ्या                                                             |                              [फंक्शन्स आणि मेथड्स](./2-js-basics/2-functions-methods/README.md)                               | Jasmine आणि Christopher |
-| 06  |                        JS मूलभूत गोष्टी                         |                        JS सह निर्णय घेणे                        | निर्णय घेण्याच्या पद्धती वापरून आपल्या कोडमध्ये अटी कशा तयार करायच्या ते जाणून घ्या                                                           |                                 [निर्णय घेणे](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
-| 07  |                        JS मूलभूत गोष्टी                         |                            ऍरे आणि लूप्स                            | JavaScript मध्ये ऍरे आणि लूप्स वापरून डेटा व्यवस्थापित करा                                                                                 |                                   [ऍरे आणि लूप्स](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
+| 06  |                        JS मूलभूत गोष्टी                         |                        जावास्क्रिप्टसह निर्णय घेणे                        | निर्णय घेण्याच्या पद्धती वापरून तुमच्या कोडमध्ये अटी कशा तयार करायच्या ते जाणून घ्या                                                           |                                 [निर्णय घेणे](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
+| 07  |                        JS मूलभूत गोष्टी                         |                            ऍरे आणि लूप्स                            | जावास्क्रिप्टमध्ये ऍरे आणि लूप्स वापरून डेटा व्यवस्थापित करा                                                                                 |                                   [ऍरे आणि लूप्स](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
 | 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML चा सराव                            | ऑनलाइन टेरॅरियम तयार करण्यासाठी HTML तयार करा, लेआउट तयार करण्यावर लक्ष केंद्रित करा                                                         |                                 [HTML ची ओळख](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
 | 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS चा सराव                             | ऑनलाइन टेरॅरियमला शैली देण्यासाठी CSS तयार करा, CSS च्या मूलभूत गोष्टींवर लक्ष केंद्रित करा ज्यामध्ये पृष्ठ प्रतिसादक्षम बनवणे समाविष्ट आहे                     |                                  [CSS ची ओळख](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
-| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript क्लोजर्स, DOM मॅनिप्युलेशन                  | टेरॅरियमला ड्रॅग/ड्रॉप इंटरफेस म्हणून कार्य करण्यासाठी JavaScript तयार करा, क्लोजर्स आणि DOM मॅनिप्युलेशनवर लक्ष केंद्रित करा             |                  [JavaScript क्लोजर्स, DOM मॅनिप्युलेशन](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
-| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          टायपिंग गेम तयार करा                           | आपल्या JavaScript अॅपच्या लॉजिकला चालवण्यासाठी कीबोर्ड इव्हेंट्स कसे वापरायचे ते जाणून घ्या                                                          |                                [इव्हेंट-ड्रिव्हन प्रोग्रामिंग](./4-typing-game/typing-game/README.md)                                |       Christopher       |
-| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         ब्राउझरसह काम करणे                          | ब्राउझर कसे कार्य करतात, त्यांचा इतिहास आणि ब्राउझर एक्सटेंशनच्या पहिल्या घटकांचे स्कॅफोल्ड कसे तयार करायचे ते जाणून घ्या                               |                               [ब्राउझरबद्दल](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक स्टोरेजमध्ये व्हेरिएबल्स साठवणे | स्थानिक स्टोरेजमध्ये साठवलेल्या व्हेरिएबल्स वापरून API कॉल करण्यासाठी आपल्या ब्राउझर एक्सटेंशनचे JavaScript घटक तयार करा                      |                [APIs, फॉर्म्स, आणि स्थानिक स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          ब्राउझरमधील बॅकग्राउंड प्रक्रिया, वेब कार्यक्षमता          | ब्राउझरच्या बॅकग्राउंड प्रक्रियांद्वारे एक्सटेंशनचे आयकॉन व्यवस्थापित करा; वेब कार्यक्षमता आणि काही ऑप्टिमायझेशनबद्दल जाणून घ्या   |             [बॅकग्राउंड टास्क्स आणि कार्यक्षमता](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](./6-space-game/solution/README.md)           |             JavaScript सह अधिक प्रगत गेम विकास             | वर्ग आणि रचना आणि पब/सब पॅटर्न वापरून वारसा बद्दल जाणून घ्या, गेम तयार करण्याच्या तयारीसाठी              |                      [प्रगत गेम विकासाची ओळख](./6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           कॅनव्हासवर रेखाटन                            | स्क्रीनवर घटक काढण्यासाठी वापरल्या जाणाऱ्या कॅनव्हास API बद्दल जाणून घ्या                                                                       |                                [कॅनव्हासवर रेखाटन](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   स्क्रीनवर घटक हलवणे                    | कसे घटक कार्टेशियन कोऑर्डिनेट्स आणि कॅनव्हास API वापरून गती प्राप्त करू शकतात                                            |                           [घटक हलवणे](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          टक्कर शोधणे                           | घटकांना एकमेकांशी टक्कर देणे आणि कीप्रेस वापरून प्रतिक्रिया देणे आणि गेमची कार्यक्षमता सुनिश्चित करण्यासाठी कूलडाउन फंक्शन प्रदान करणे    |                              [टक्कर शोधणे](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             स्कोअर ठेवणे                              | गेमची स्थिती आणि कार्यक्षमता यावर आधारित गणितीय गणना करा                                                                |                                    [स्कोअर ठेवणे](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 जावास्क्रिप्ट क्लोजर्स, DOM मॅनिप्युलेशन                  | टेरॅरियमला ड्रॅग/ड्रॉप इंटरफेस म्हणून कार्य करण्यासाठी जावास्क्रिप्ट तयार करा, क्लोजर्स आणि DOM मॅनिप्युलेशनवर लक्ष केंद्रित करा             |                  [जावास्क्रिप्ट क्लोजर्स, DOM मॅनिप्युलेशन](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          टायपिंग गेम तयार करा                           | तुमच्या जावास्क्रिप्ट अॅपच्या लॉजिकला चालवण्यासाठी कीबोर्ड इव्हेंट्स कसे वापरायचे ते जाणून घ्या                                                          |                                [इव्हेंट-ड्रिव्हन प्रोग्रामिंग](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         ब्राउझरसह काम करणे                          | ब्राउझर कसे कार्य करतात, त्यांचा इतिहास आणि ब्राउझर एक्सटेंशनच्या पहिल्या घटकांची संरचना कशी तयार करायची ते जाणून घ्या                               |                               [ब्राउझरबद्दल](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक स्टोरेजमध्ये व्हेरिएबल्स साठवणे | स्थानिक स्टोरेजमध्ये साठवलेल्या व्हेरिएबल्स वापरून API कॉल करण्यासाठी तुमच्या ब्राउझर एक्सटेंशनचे जावास्क्रिप्ट घटक तयार करा                      |                [APIs, फॉर्म्स, आणि स्थानिक स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          ब्राउझरमधील पार्श्वभूमी प्रक्रिया, वेब कार्यक्षमता          | एक्सटेंशनच्या आयकॉनचे व्यवस्थापन करण्यासाठी ब्राउझरच्या पार्श्वभूमी प्रक्रियेचा वापर करा; वेब कार्यक्षमता आणि काही ऑप्टिमायझेशनबद्दल जाणून घ्या   |             [पार्श्वभूमी कार्ये आणि कार्यक्षमता](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             जावास्क्रिप्टसह अधिक प्रगत गेम विकास             | गेम तयार करण्याच्या तयारीसाठी क्लासेस आणि कंपोझिशन वापरून इनहेरिटन्स आणि पब/सब पॅटर्नबद्दल जाणून घ्या              |                      [प्रगत गेम विकासाची ओळख](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           कॅनव्हासवर रेखाटन                            | स्क्रीनवर घटक रेखाटण्यासाठी वापरल्या जाणाऱ्या कॅनव्हास API बद्दल जाणून घ्या                                                                       |                                [कॅनव्हासवर रेखाटन](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   स्क्रीनवर घटक हलवणे                    | घटकांना कसे गती मिळू शकते ते शोधा, कार्टेशियन कोऑर्डिनेट्स आणि कॅनव्हास API वापरून                                            |                           [घटक हलवणे](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          टक्कर शोधणे                           | घटकांना एकमेकांशी टक्कर करणे आणि प्रतिक्रिया देणे, कीप्रेस वापरून आणि गेमची कार्यक्षमता सुनिश्चित करण्यासाठी कूलडाउन फंक्शन प्रदान करणे    |                              [टक्कर शोधणे](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             स्कोअर ठेवणे                              | गेमच्या स्थिती आणि कार्यक्षमतेवर आधारित गणितीय गणना करा                                                                |                                    [स्कोअर ठेवणे](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
 | 20  |           [Space Game](./6-space-game/solution/README.md)           |                     गेम संपवणे आणि पुन्हा सुरू करणे                     | गेम संपवणे आणि पुन्हा सुरू करणे, अॅसेट्स साफ करणे आणि व्हेरिएबल व्हॅल्यूज रीसेट करणे याबद्दल जाणून घ्या                              |                                [समाप्ती अट](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML टेम्पलेट्स आणि वेब अॅपमधील रूट्स                 | रूटिंग आणि HTML टेम्पलेट्स वापरून मल्टीपेज वेबसाइटची आर्किटेक्चर तयार कशी करायची ते जाणून घ्या                             |                            [HTML टेम्पलेट्स आणि रूट्स](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  लॉगिन आणि नोंदणी फॉर्म तयार करा                   | फॉर्म तयार करणे आणि व्हॅलिडेशन रूटीन हाताळण्याबद्दल जाणून घ्या                                                                          |                                           [फॉर्म्स](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   डेटा मिळवण्याचे आणि वापरण्याचे पद्धती                   | आपल्या अॅपमध्ये डेटा कसा प्रवाहित होतो, तो कसा मिळवायचा, साठवायचा आणि त्याचा नाश कसा करायचा                                                 |                                            [डेटा](./7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      स्टेट मॅनेजमेंटची संकल्पना                      | आपला अॅप स्टेट कसा टिकवतो आणि तो प्रोग्रामॅटिकली कसा व्यवस्थापित करायचा ते जाणून घ्या                                                              |                                [स्टेट मॅनेजमेंट](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
-| 25 | [Browser/VScode Code](../../8-code-editor) | VScode सह काम करणे | कोड एडिटर वापरणे कसे शिकावे | [VScode कोड एडिटर वापरा](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
-| 26 | [AI Assistants](./9-chat-project/README.md) | AI सह काम करणे | आपला स्वतःचा AI सहाय्यक कसा तयार करायचा ते शिकणे | [AI सहाय्यक प्रकल्प](./9-chat-project/README.md) | Chris |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML टेम्पलेट्स आणि वेब अॅपमधील रूट्स                 | रूटिंग आणि HTML टेम्पलेट्स वापरून मल्टीपेज वेबसाइटच्या आर्किटेक्चरची संरचना कशी तयार करायची ते जाणून घ्या                             |                            [HTML टेम्पलेट्स आणि रूट्स](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  लॉगिन आणि नोंदणी फॉर्म तयार करा                   | फॉर्म तयार करणे आणि व्हॅलिडेशन रूटीन हाताळणे याबद्दल जाणून घ्या                                                                          |                                           [फॉर्म्स](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   डेटा मिळवण्याचे आणि वापरण्याचे पद्धती                   | तुमच्या अॅपमध्ये डेटा कसा प्रवाहित होतो, तो कसा मिळवायचा, साठवायचा आणि त्याचा निपटारा कसा करायचा                                                 |                                            [डेटा](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      स्टेट मॅनेजमेंटची संकल्पना                      | तुमचे अॅप स्टेट कसे टिकवते आणि ते प्रोग्रामॅटिकली कसे व्यवस्थापित करायचे ते जाणून घ्या                                                              |                                [स्टेट मॅनेजमेंट](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
+| 25 | [Browser/VScode Code](../../8-code-editor) | VScode सह काम करणे | कोड एडिटर वापरण्याबद्दल जाणून घ्या| [VScode कोड एडिटर वापरा](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
+| 26 | [AI Assistants](./9-chat-project/README.md) | AI सह काम करणे | तुमचा स्वतःचा AI सहाय्यक कसा तयार करायचा ते जाणून घ्या | [AI सहाय्यक प्रकल्प](./9-chat-project/README.md) | Chris |
 
 ## 🏫 शिक्षण पद्धती
 
 आमचा अभ्यासक्रम दोन प्रमुख शिक्षण पद्धतींच्या तत्त्वांवर आधारित आहे:
 * प्रकल्प-आधारित शिक्षण
-* वारंवार क्विझेस
+* वारंवार क्विझ
 
-हा कार्यक्रम JavaScript, HTML, आणि CSS च्या मूलभूत गोष्टी तसेच आजच्या वेब विकसकांद्वारे वापरल्या जाणाऱ्या नवीनतम साधने आणि तंत्र शिकवतो. विद्यार्थ्यांना टायपिंग गेम, व्हर्च्युअल टेरॅरियम, पर्यावरणास अनुकूल ब्राउझर एक्सटेंशन, स्पेस-इनव्हेडर-शैलीतील गेम आणि व्यवसायांसाठी बँकिंग अॅप तयार करून व्यावहारिक अनुभव विकसित करण्याची संधी मिळेल. या मालिकेच्या शेवटी, विद्यार्थ्यांना वेब विकासाची ठोस समज प्राप्त होईल.
+कार्यक्रम जावास्क्रिप्ट, HTML, आणि CSS च्या मूलभूत गोष्टी तसेच आजच्या वेब विकसकांद्वारे वापरल्या जाणाऱ्या नवीनतम साधने आणि तंत्र शिकवतो. विद्यार्थ्यांना टायपिंग गेम, व्हर्च्युअल टेरॅरियम, पर्यावरणास अनुकूल ब्राउझर एक्सटेंशन, स्पेस-इनव्हेडर-शैलीतील गेम आणि व्यवसायांसाठी बँकिंग अॅप तयार करून व्यावहारिक अनुभव मिळवण्याची संधी मिळेल. मालिकेच्या शेवटी, विद्यार्थ्यांना वेब विकासाची ठोस समज प्राप्त होईल.
 
-> 🎓 आपण Microsoft Learn वर [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) म्हणून या अभ्यासक्रमातील पहिली काही धडे घेऊ शकता!
+> 🎓 तुम्ही Microsoft Learn वर [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) म्हणून या अभ्यासक्रमातील काही सुरुवातीचे धडे घेऊ शकता!
 
-सामग्री प्रकल्पांशी संरेखित असल्याचे सुनिश्चित करून, प्रक्रिया विद्यार्थ्यांसाठी अधिक आकर्षक बनवली जाते आणि संकल्पनांचे स्मरणशक्ती वाढवले जाते. आम्ही JavaScript मूलभूत गोष्टींच्या अनेक प्रारंभिक धडे लिहिले आहेत जे संकल्पना सादर करतात, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" व्हिडिओ ट्यूटोरियल संग्रहातील व्हिडिओसह जोडलेले आहेत, ज्यांचे काही लेखक या अभ्यासक्रमात योगदान देतात.
+सामग्री प्रकल्पांशी संरेखित असल्याचे सुनिश्चित करून, प्रक्रिया विद्यार्थ्यांसाठी अधिक आकर्षक बनवली जाते आणि संकल्पनांचे धारणा वाढवले जाते. आम्ही जावास्क्रिप्टच्या मूलभूत गोष्टींच्या अनेक प्रारंभिक धडे लिहिले आहेत, ज्यामध्ये "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" व्हिडिओ ट्यूटोरियल संग्रहातील व्हिडिओ जोडले आहेत, ज्यांचे काही लेखक या अभ्यासक्रमात योगदान देतात.
 
-याव्यतिरिक्त, वर्गापूर्वी कमी-जोखीम क्विझ विद्यार्थ्याला विषय शिकण्याच्या हेतूने सेट करते, तर वर्गानंतरचा दुसरा क्विझ पुढील स्मरणशक्ती सुनिश्चित करतो. हा अभ्यासक्रम लवचिक आणि मजेदार बनवण्यासाठी डिझाइन केला गेला आहे आणि संपूर्ण किंवा अंशतः घेतला जाऊ शकतो. प्रकल्प लहान सुरू होतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी अधिकाधिक जटिल बनतात.
+याशिवाय, वर्गापूर्वीचा कमी-जोखीम क्विझ विद्यार्थ्याला विषय शिकण्याच्या उद्देशाने सेट करतो, तर वर्गानंतरचा दुसरा क्विझ संकल्पनांची धारणा सुनिश्चित करतो. हा अभ्यासक्रम लवचिक आणि मजेदार बनवण्यासाठी डिझाइन केला गेला आहे आणि संपूर्ण किंवा अंशतः घेतला जाऊ शकतो. प्रकल्प लहान सुरू होतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी अधिकाधिक जटिल होतात.
 
-आम्ही जाणीवपूर्वक JavaScript फ्रेमवर्क सादर करण्याचे टाळले आहे जे वेब विकसक म्हणून फ्रेमवर्क स्वीकारण्यापूर्वी आवश्यक असलेल्या मूलभूत कौशल्यांवर लक्ष केंद्रित करण्यासाठी आहे, या अभ्यासक्रमाला पूर्ण करण्यासाठी पुढील चांगले पाऊल म्हणजे "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" व्हिडिओंच्या आणखी एका संग्रहाबद्दल शिकणे.
+आम्ही जावास्क्रिप्ट फ्रेमवर्क्सची ओळख टाळण्याचा हेतू ठेवला आहे जेणेकरून फ्रेमवर्क स्वीकारण्यापूर्वी वेब विकसक म्हणून आवश्यक मूलभूत कौशल्यांवर लक्ष केंद्रित करता येईल, या अभ्यासक्रम पूर्ण केल्यानंतर पुढील चांगले पाऊल म्हणजे Node.js बद्दल शिकणे, व्हिडिओंच्या आणखी एका संग्रहाद्वारे: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
 
-> आमच्या [Code of Conduct](CODE_OF_CONDUCT.md) आणि [Contributing](CONTRIBUTING.md) मार्गदर्शक तत्त्वांना भेट द्या. आम्ही आपले रचनात्मक अभिप्राय स्वागत करतो!
+> आमच्या [Code of Conduct](CODE_OF_CONDUCT.md) आणि [Contributing](CONTRIBUTING.md) मार्गदर्शक तत्त्वांना भेट द्या. आम्ही तुमच्या रचनात्मक अभिप्रायाचे स्वागत करतो!
 
 
 ## 🧭 ऑफलाइन प्रवेश
 
-आपण [Docsify](https://docsify.js.org/#/) वापरून हे दस्तऐवज ऑफलाइन चालवू शकता. या रेपोला फोर्क करा, आपल्या स्थानिक मशीनवर [Docsify इंस्टॉल करा](https://docsify.js.org/#/quickstart), आणि नंतर या रेपोच्या रूट फोल्डरमध्ये `docsify serve` टाइप करा. वेबसाइट आपल्या लोकलहोस्टवर पोर्ट 3000 वर सर्व्ह केली जाईल: `localhost:3000`.
+तुम्ही [Docsify](https://docsify.js.org/#/) वापरून हे दस्तऐवज ऑफलाइन चालवू शकता. या रेपोला फोर्क करा, तुमच्या स्थानिक मशीनवर [Docsify इंस्टॉल करा](https://docsify.js.org/#/quickstart), आणि मग या रेपोच्या रूट फोल्डरमध्ये `docsify serve` टाइप करा. वेबसाइट तुमच्या लोकलहोस्टवर पोर्ट 3000 वर चालवली जाईल: `localhost:3000`.
 
 ## 📘 PDF
 
@@ -207,40 +205,56 @@ Azure AI Foundry Discord समुदायामध्ये सामील 
 
 ## 🎒 इतर अभ्यासक्रम
 
-आमची टीम इतर अभ्यासक्रम तयार करते! तपासा:
-
-- [MCP for Beginners](https://aka.ms/mcp-for-beginners)
-- [Edge AI for Beginners](https://aka.ms/edgeai-for-beginners)
-- [AI Agents for Beginners](https://aka.ms/ai-agents-beginners)
-- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
-- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
-- [जेनरेटिव AI विथ Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
-- [सुरुवातीसाठी AI](https://aka.ms/ai-beginners)
-- [सुरुवातीसाठी डेटा सायन्स](https://aka.ms/datascience-beginners)
-- [सुरुवातीसाठी ML](https://aka.ms/ml-beginners)
-- [सुरुवातीसाठी सायबरसुरक्षा](https://github.com/microsoft/Security-101)
-- [सुरुवातीसाठी वेब डेव्हलपमेंट](https://aka.ms/webdev-beginners)
-- [सुरुवातीसाठी IoT](https://aka.ms/iot-beginners)
-- [सुरुवातीसाठी XR डेव्हलपमेंट](https://github.com/microsoft/xr-development-for-beginners)
-- [एजेंटिक वापरासाठी GitHub Copilot मध्ये प्राविण्य मिळवा](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
-- [C#/.NET डेव्हलपर्ससाठी GitHub Copilot मध्ये प्राविण्य मिळवा](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
-- [आपल्या स्वतःच्या Copilot साहसाची निवड करा](https://github.com/microsoft/CopilotAdventures)
+आमची टीम इतर अभ्यासक्रम तयार करते! पहा:
+
+### Azure / Edge / MCP / Agents
+[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![एज AI सुरुवातीसाठी](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![MCP सुरुवातीसाठी](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![AI एजंट्स सुरुवातीसाठी](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
+
+---
+
+### जनरेटिव AI मालिका
+[![जनरेटिव AI सुरुवातीसाठी](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![जनरेटिव AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
+[![जनरेटिव AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
+[![जनरेटिव AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
+
+---
+
+### मुख्य शिक्षण
+[![सुरुवातीसाठी मशीन लर्निंग](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
+[![सुरुवातीसाठी डेटा सायन्स](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
+[![सुरुवातीसाठी AI](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
+[![सुरुवातीसाठी सायबर सुरक्षा](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
+[![सुरुवातीसाठी वेब डेव्हलपमेंट](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
+[![सुरुवातीसाठी IoT](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
+[![सुरुवातीसाठी XR डेव्हलपमेंट](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
+
+---
+
+### कोपायलट मालिका
+[![AI जोडप्यांसाठी कोपायलट प्रोग्रामिंग](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
+[![C#/.NET साठी कोपायलट](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
+[![कोपायलट साहस](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
+<!-- CO-OP TRANSLATOR OTHER COURSES END -->
 
 ## मदत मिळवा
 
-जर तुम्हाला अडचण आली किंवा AI अ‍ॅप्स तयार करताना काही प्रश्न असतील तर येथे सामील व्हा:
+जर तुम्हाला अडचण आली किंवा AI अ‍ॅप्स तयार करण्याबद्दल काही प्रश्न असतील, तर येथे सामील व्हा:
 
 [![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)
 
-जर तुम्हाला उत्पादनाबद्दल अभिप्राय द्यायचा असेल किंवा तयार करताना काही त्रुटी आढळल्या तर येथे भेट द्या:
+जर तुम्हाला उत्पादनाबद्दल अभिप्राय द्यायचा असेल किंवा तयार करताना काही त्रुटी आढळल्यास येथे भेट द्या:
 
 [![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
 
 ## परवाना
 
-या रिपॉझिटरीला MIT परवान्याअंतर्गत परवाना देण्यात आला आहे. अधिक माहितीसाठी [LICENSE](../../LICENSE) फाइल पहा.
+हे रिपॉझिटरी MIT परवान्याअंतर्गत परवानाकृत आहे. अधिक माहितीसाठी [LICENSE](../../LICENSE) फाईल पहा.
 
 ---
 
 **अस्वीकरण**:  
-हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
+हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
\ No newline at end of file
diff --git a/translations/ne/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ne/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index e66fff3322..49a5742d68 100644
--- a/translations/ne/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/translations/ne/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -1,103 +1,190 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3e0da5eb9b275fe3cb431033c1413ec2",
-  "translation_date": "2025-10-22T16:45:44+00:00",
+  "original_hash": "d45ddcc54eb9232a76d08328b09d792e",
+  "translation_date": "2025-11-03T15:19:18+00:00",
   "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
   "language_code": "ne"
 }
 -->
 # प्रोग्रामिङ भाषा र आधुनिक डेभलपर उपकरणहरूको परिचय
 
-नमस्ते, भविष्यका डेभलपर! 👋 के म तपाईंलाई केही भन्न सक्छु जसले मलाई हरेक दिन रोमाञ्चित बनाउँछ? तपाईंले पत्ता लगाउन लाग्नुभएको छ कि प्रोग्रामिङ केवल कम्प्युटरको बारेमा मात्र होइन – यो तपाईंको सबैभन्दा पागल विचारहरूलाई जीवनमा ल्याउनको लागि वास्तविक सुपरपावर हो!
+नमस्ते, भविष्यका डेभलपर! 👋 के म तपाईंलाई केही भन्न सक्छु जसले मलाई हरेक दिन रोमाञ्चित बनाउँछ? तपाईंले पत्ता लगाउन लाग्नुभएको छ कि प्रोग्रामिङ केवल कम्प्युटरको बारेमा मात्र होइन – यो तपाईंको सबैभन्दा पागल विचारहरूलाई जीवनमा ल्याउन सक्ने वास्तविक सुपरपावर हो!
 
-तपाईंलाई थाहा छ त्यो क्षण जब तपाईं आफ्नो मनपर्ने एप प्रयोग गर्दै हुनुहुन्छ र सबै कुरा पूर्ण रूपमा मिल्छ? जब तपाईं एउटा बटन थिच्नुहुन्छ र केही जादुई हुन्छ जसले तपाईंलाई "वाह, उनीहरूले यो कसरी गरे?" भन्न बाध्य बनाउँछ। खैर, तपाईं जस्तै कोही – सम्भवतः रातको २ बजे आफ्नो मनपर्ने कफी शपमा तेस्रो एस्प्रेसोको साथ बस्दै – त्यो जादु सिर्जना गर्ने कोड लेखेका थिए। र यहाँ के कुरा तपाईंलाई चकित पार्नेछ: यो पाठको अन्त्यसम्ममा, तपाईंले मात्र उनीहरूले यो कसरी गरे भनेर बुझ्नुहुने छैन, तर तपाईं आफैंले प्रयास गर्न उत्साहित हुनुहुनेछ!
+तपाईंलाई थाहा छ त्यो क्षण जब तपाईं आफ्नो मनपर्ने एप प्रयोग गर्दै हुनुहुन्छ र सबै कुरा पूर्ण रूपमा मिल्छ? जब तपाईं एउटा बटन थिच्नुहुन्छ र केही जादुई हुन्छ जसले तपाईंलाई "वाह, उनीहरूले यो कसरी गरे?" भन्न बाध्य बनाउँछ। खैर, तपाईं जस्तै कोही – सम्भवतः रातको २ बजे आफ्नो मनपर्ने कफी शपमा तेस्रो एस्प्रेसोको साथ बसेर – त्यो जादु सिर्जना गर्ने कोड लेखेका थिए। र यहाँ तपाईंलाई चकित पार्ने कुरा छ: यो पाठको अन्त्यसम्ममा, तपाईंले उनीहरूले कसरी गरे भनेर मात्र बुझ्नुहुने छैन, तर तपाईं आफैंले प्रयास गर्न उत्सुक हुनुहुनेछ!
 
-हेर्नुहोस्, यदि प्रोग्रामिङ अहिले डर लाग्दो लाग्छ भने म पूर्ण रूपमा बुझ्छु। जब मैले सुरु गरेँ, मैले इमानदारीपूर्वक सोचेको थिएँ कि तपाईंलाई कुनै प्रकारको गणितको जीनियस हुनुपर्छ वा पाँच वर्षको उमेरदेखि कोडिङ गरिरहेको हुनुपर्छ। तर यहाँ के कुरा मेरो दृष्टिकोणलाई पूर्ण रूपमा परिवर्तन गर्यो: प्रोग्रामिङ नयाँ भाषामा संवाद गर्न सिक्न जस्तै हो। तपाईं "नमस्ते" र "धन्यवाद" बाट सुरु गर्नुहुन्छ, त्यसपछि कफी अर्डर गर्न सिक्नुहुन्छ, र थाहा पाउनुहुन्छ, तपाईं गहिरो दार्शनिक छलफल गर्दै हुनुहुन्छ! तर यस अवस्थामा, तपाईं कम्प्युटरसँग संवाद गर्दै हुनुहुन्छ, र इमानदारीपूर्वक? तिनीहरू सबैभन्दा धैर्यवान संवाद साझेदार हुन् – तिनीहरूले कहिल्यै तपाईंको गल्तीको न्याय गर्दैनन् र सधैं फेरि प्रयास गर्न उत्साहित हुन्छन्!
+हेर्नुहोस्, यदि प्रोग्रामिङ अहिले डर लाग्दो लाग्छ भने म पूर्ण रूपमा बुझ्छु। जब मैले सुरु गरें, मैले इमानदारीपूर्वक सोचेको थिए कि तपाईंलाई कुनै प्रकारको गणितको जीनियस हुनुपर्छ वा पाँच वर्षको उमेरदेखि कोडिङ गरिरहेको हुनुपर्छ। तर यहाँ के कुराले मेरो दृष्टिकोणलाई पूर्ण रूपमा परिवर्तन गर्यो: प्रोग्रामिङ नयाँ भाषामा संवाद गर्न सिक्ने जस्तै हो। तपाईं "नमस्ते" र "धन्यवाद" बाट सुरु गर्नुहुन्छ, त्यसपछि कफी अर्डर गर्न सिक्नुहुन्छ, र थाहा पाउनुहुन्छ, तपाईं गहिरो दार्शनिक छलफल गर्दै हुनुहुन्छ! तर यस अवस्थामा, तपाईं कम्प्युटरसँग संवाद गर्दै हुनुहुन्छ, र इमानदारीपूर्वक? तिनीहरू तपाईंले कहिल्यै गरेको सबैभन्दा धैर्यवान संवाद साझेदार हुन् – तिनीहरूले कहिल्यै तपाईंको गल्तीको न्याय गर्दैनन् र तिनीहरू सँधै फेरि प्रयास गर्न उत्साहित हुन्छन्!
 
-आज, हामी ती अद्भुत उपकरणहरूको अन्वेषण गर्नेछौं जसले आधुनिक वेब विकासलाई मात्र सम्भव बनाउँछ, तर गम्भीर रूपमा लत लाग्दो बनाउँछ। म ती नै सम्पादकहरू, ब्राउजरहरू, र वर्कफ्लोहरूको कुरा गर्दैछु जुन नेटफ्लिक्स, स्पोटिफाई, र तपाईंको मनपर्ने इन्डी एप स्टुडियोका डेभलपरहरूले हरेक दिन प्रयोग गर्छन्। र यहाँ के कुरा तपाईंलाई खुशीको नाच गर्न बनाउनेछ: यी पेशेवर-ग्रेड, उद्योग-मानक उपकरणहरूको अधिकांश पूर्ण रूपमा निःशुल्क छन्!
+आज, हामी ती अद्भुत उपकरणहरूको अन्वेषण गर्नेछौं जसले आधुनिक वेब विकासलाई सम्भव मात्र होइन, गम्भीर रूपमा लत लाग्ने बनाउँछ। म त्यही सम्पादकहरू, ब्राउजरहरू, र वर्कफ्लोहरूको कुरा गर्दैछु जुन नेटफ्लिक्स, स्पोटिफाई, र तपाईंको मनपर्ने इन्डी एप स्टुडियोका डेभलपरहरूले हरेक दिन प्रयोग गर्छन्। र यहाँ तपाईंलाई खुशीको नाच गर्न बनाउने भाग छ: यी पेशेवर-ग्रेड, उद्योग-मानक उपकरणहरूको अधिकांश पूर्ण रूपमा निःशुल्क छन्!
 
 ![प्रोग्रामिङ परिचय](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ne.png)
 > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
 
-## हेर्नुहोस् तपाईंलाई पहिले नै के थाहा छ!
+```mermaid
+journey
+    title Your Programming Journey Today
+    section Discover
+      What is Programming: 5: You
+      Programming Languages: 4: You
+      Tools Overview: 5: You
+    section Explore
+      Code Editors: 4: You
+      Browsers & DevTools: 5: You
+      Command Line: 3: You
+    section Practice
+      Language Detective: 4: You
+      Tool Exploration: 5: You
+      Community Connection: 5: You
+```
+
+## तपाईंले पहिले नै के जान्नुहुन्छ हेर्नुहोस्!
 
-मजाको कुरामा जानु अघि, म उत्सुक छु – तपाईंलाई यो प्रोग्रामिङ संसारको बारेमा पहिले नै के थाहा छ? र सुन्नुहोस्, यदि तपाईं यी प्रश्नहरू हेर्दै हुनुहुन्छ र सोच्दै हुनुहुन्छ "मलाई यसको बारेमा शून्य थाहा छ," त्यो मात्र ठीक छैन, यो उत्तम छ! यसको मतलब तपाईं बिल्कुल सही ठाउँमा हुनुहुन्छ। यो क्विजलाई व्यायाम अघि स्ट्रेचिङ जस्तै सोच्नुहोस् – हामी केवल ती मस्तिष्क मांसपेशीहरू तातो बनाउँदैछौं!
+मजाको कुरामा जानु अघि, म उत्सुक छु – तपाईंले यस प्रोग्रामिङ संसारको बारेमा पहिले नै के जान्नुहुन्छ? र सुन्नुहोस्, यदि तपाईं यी प्रश्नहरू हेर्दै हुनुहुन्छ र सोच्दै हुनुहुन्छ "मलाई यसको बारेमा शून्य थाहा छ," त्यो मात्र ठीक छैन, यो उत्तम छ! यसको मतलब तपाईं बिल्कुल सही ठाउँमा हुनुहुन्छ। यो क्विजलाई व्यायाम अघि स्ट्रेचिङ जस्तै सोच्नुहोस् – हामी ती मस्तिष्क मांसपेशीहरूलाई मात्र तातो बनाउँदैछौं!
 
 [पाठ अघि क्विज लिनुहोस्](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
 
+
 ## हामी सँगै जान लागेका साहसिक यात्रा
 
-ठीक छ, म साँच्चै उत्साहित छु कि हामी आज के अन्वेषण गर्न जाँदैछौं! गम्भीर रूपमा, म तपाईंको अनुहार देख्न चाहन्छु जब यी अवधारणाहरू क्लिक हुन्छन्। यहाँ हाम्रो अविश्वसनीय यात्रा छ:
+ठीक छ, म साँच्चै उत्साहित छु कि हामी आज के अन्वेषण गर्न जाँदैछौं! गम्भीर रूपमा, म तपाईंको अनुहार देख्न चाहन्छु जब यी अवधारणाहरू क्लिक हुन्छन्। यहाँ हामी सँगै लिने अविश्वसनीय यात्रा छ:
 
-- **प्रोग्रामिङ वास्तवमा के हो (र किन यो सबैभन्दा चिसो कुरा हो!)** – हामी पत्ता लगाउनेछौं कि कोड वास्तवमा अदृश्य जादु हो जसले तपाईंको वरिपरि सबै कुरा शक्ति दिन्छ, त्यो अलार्मबाट जसले कसरी थाहा पाउँछ कि सोमबार बिहान हो, त्यो एल्गोरिदमसम्म जसले तपाईंको नेटफ्लिक्स सिफारिसहरूलाई पूर्ण रूपमा क्युरेट गर्दछ।
-- **प्रोग्रामिङ भाषाहरू र तिनीहरूको अद्भुत व्यक्तित्वहरू** – कल्पना गर्नुहोस् कि तपाईं एउटा पार्टीमा प्रवेश गर्दै हुनुहुन्छ जहाँ प्रत्येक व्यक्तिसँग समस्या समाधान गर्ने पूर्ण रूपमा फरक सुपरपावरहरू छन्। प्रोग्रामिङ भाषा संसार यस्तै हो, र तपाईं तिनीहरूलाई भेट्न मन पराउनुहुनेछ!
-- **डिजिटल जादु बनाउनका लागि आधारभूत निर्माण ब्लकहरू** – यीलाई अन्तिम रचनात्मक LEGO सेटको रूपमा सोच्नुहोस्। एकपटक तपाईंले यी टुक्राहरू कसरी मिल्छन् भनेर बुझ्नुभयो भने, तपाईंले महसुस गर्नुहुनेछ कि तपाईंले शाब्दिक रूपमा आफ्नो कल्पनाले सपना देखेको कुनै पनि कुरा निर्माण गर्न सक्नुहुन्छ।
-- **पेशेवर उपकरणहरू जसले तपाईंलाई जादूगरको छडी दिइएको जस्तो महसुस गराउँछ** – म यहाँ नाटकीय हुँदै छैन – यी उपकरणहरूले तपाईंलाई साँच्चै सुपरपावर भएको महसुस गराउँछन्, र सबैभन्दा राम्रो कुरा? तिनीहरू नै हुन् जुन पेशेवरहरूले प्रयोग गर्छन्!
+- **प्रोग्रामिङ वास्तवमा के हो (र यो किन सबैभन्दा चिसो कुरा हो!)** – हामी पत्ता लगाउनेछौं कि कोड वास्तवमा तपाईंको वरिपरि सबै कुरालाई शक्ति दिने अदृश्य जादु हो, त्यो अलार्मबाट जसले कसरी सोमबार बिहान हो भनेर थाहा पाउँछदेखि तपाईंको नेटफ्लिक्स सिफारिसहरूलाई पूर्ण रूपमा क्युरेट गर्ने एल्गोरिदमसम्म
+- **प्रोग्रामिङ भाषाहरू र तिनीहरूको अद्भुत व्यक्तित्वहरू** – कल्पना गर्नुहोस् कि तपाईं एउटा पार्टीमा हिँड्दै हुनुहुन्छ जहाँ प्रत्येक व्यक्तिसँग समस्या समाधान गर्ने पूर्ण रूपमा फरक सुपरपावरहरू छन्। प्रोग्रामिङ भाषा संसार यस्तै हो, र तपाईं तिनीहरूलाई भेट्न मन पराउनुहुनेछ!
+- **डिजिटल जादु बनाउनका लागि आधारभूत निर्माण ब्लकहरू** – यीलाई अन्तिम रचनात्मक LEGO सेटको रूपमा सोच्नुहोस्। एकपटक तपाईंले यी टुक्राहरू कसरी फिट हुन्छन् भनेर बुझ्नुभयो भने, तपाईंले महसुस गर्नुहुनेछ कि तपाईंले आफ्नो कल्पनाले सपना देखेको कुनै पनि कुरा निर्माण गर्न सक्नुहुन्छ
+- **पेशेवर उपकरणहरू जसले तपाईंलाई जादूगरको छडी दिइएको जस्तो महसुस गराउँछ** – म यहाँ नाटकीय हुँदै छैन – यी उपकरणहरूले तपाईंलाई वास्तवमा सुपरपावर भएको महसुस गराउँछ, र सबैभन्दा राम्रो भाग? तिनीहरू पेशेवरहरूले प्रयोग गर्ने समान हुन्!
 
-> 💡 **यहाँ कुरा छ**: आज सबै कुरा सम्झन प्रयास गर्ने बारे सोच्न पनि नहोस्! अहिले, म केवल तपाईंलाई सम्भव के छ भन्ने बारे उत्साहको झिल्को महसुस गर्न चाहन्छु। विवरणहरू स्वाभाविक रूपमा अभ्यास गर्दा टाँसिन्छन् – वास्तविक सिकाइ यसरी नै हुन्छ!
+> 💡 **यहाँ कुरा छ**: आज सबै कुरा सम्झन प्रयास गर्ने बारे सोच्न पनि नहोस्! अहिले, म केवल तपाईंलाई सम्भव के छ भन्ने बारे उत्साहको झिल्को महसुस गर्न चाहन्छु। विवरणहरू अभ्यास गर्दा स्वाभाविक रूपमा अडिन्छन् – वास्तविक सिकाइ यसरी हुन्छ!
 
 > तपाईं यो पाठ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) मा लिन सक्नुहुन्छ!
 
 ## त प्रोग्रामिङ वास्तवमा *के हो*?
 
-ठीक छ, अब हामी लाखौं डलरको प्रश्नलाई सम्बोधन गर्नेछौं: प्रोग्रामिङ वास्तवमा के हो?
+ठीक छ, हामी लाखौं डलरको प्रश्नलाई सम्बोधन गरौं: प्रोग्रामिङ वास्तवमा के हो?
+
+म तपाईंलाई एउटा कथा दिनेछु जसले मेरो सोच्ने तरिका पूर्ण रूपमा परिवर्तन गर्यो। गत हप्ता, म मेरी आमालाई हाम्रो नयाँ स्मार्ट टिभी रिमोट कसरी प्रयोग गर्ने भनेर व्याख्या गर्ने प्रयास गर्दै थिएँ। मैले आफैंलाई यस्तो कुरा भन्दै गरेको पाएँ "रातो बटन थिच्नुहोस्, तर ठूलो रातो बटन होइन, सानो रातो बटन बायाँतिर... होइन, तपाईंको अर्को बायाँ... ठीक छ, अब यसलाई दुई सेकेन्डको लागि थिच्नुहोस्, एक होइन, तीन होइन..." परिचित लाग्छ? 😅
+
+त्यो प्रोग्रामिङ हो! यो धेरै शक्तिशाली तर सबै कुरा पूर्ण रूपमा व्याख्या गर्न आवश्यक पर्ने चीजलाई अत्यन्त विस्तृत, चरण-दर-चरण निर्देशनहरू दिने कला हो। तर तपाईंको आमालाई व्याख्या गर्ने सट्टा (जो "कुन रातो बटन?!" सोध्न सक्छ), तपाईं कम्प्युटरलाई व्याख्या गर्दै हुनुहुन्छ (जसले तपाईंले भनेको कुरा ठीक गर्छ, तपाईंले भनेको कुरा तपाईंले भन्न चाहनुभएको कुरा होइन भने पनि)।
 
-म तपाईंलाई एउटा कथा दिनेछु जसले मेरो सोचाइलाई पूर्ण रूपमा परिवर्तन गर्यो। गत हप्ता, म मेरी आमालाई हाम्रो नयाँ स्मार्ट टिभी रिमोट कसरी प्रयोग गर्ने भनेर व्याख्या गर्ने प्रयास गर्दै थिएँ। मैले आफैंलाई यस्तो कुरा भन्दै गरेको पाएँ "रातो बटन थिच्नुहोस्, तर ठूलो रातो बटन होइन, सानो रातो बटन बायाँतिर... होइन, तपाईंको अर्को बायाँ... ठीक छ, अब यसलाई दुई सेकेन्डको लागि थिच्नुहोस्, एक होइन, तीन होइन..." चिनिन्छ? 😅
+जब मैले यो पहिलो पटक सिकें, यो मेरो दिमागलाई उडाएको कुरा यहाँ छ: कम्प्युटरहरू वास्तवमा आफ्नो मूलमा धेरै सरल छन्। तिनीहरूले शाब्दिक रूपमा केवल दुई चीजहरू बुझ्छन् – १ र ०, जुन मूल रूपमा "हो" र "होइन" वा "अन" र "अफ" मात्र हो। बस यति! तर यहाँ यो जादुई हुन्छ – हामीलाई १ र ० मा बोल्न आवश्यक छैन जस्तो कि हामी म्याट्रिक्समा छौं। त्यहाँ **प्रोग्रामिङ भाषाहरू** उद्धार गर्न आउँछन्। तिनीहरू संसारको सबैभन्दा राम्रो अनुवादक भएको जस्तै हुन् जसले तपाईंको पूर्ण रूपमा सामान्य मानव विचारहरूलाई कम्प्युटर भाषामा रूपान्तरण गर्दछ।
 
-त्यो प्रोग्रामिङ हो! यो अत्यन्त शक्तिशाली तर सबै कुरा पूर्ण रूपमा व्याख्या गर्न आवश्यक पर्ने चीजलाई विस्तृत, चरण-दर-चरण निर्देशनहरू दिने कला हो। तर तपाईंको आमालाई व्याख्या गर्ने सट्टा (जो "कुन रातो बटन?!" सोध्न सक्छ), तपाईं कम्प्युटरलाई व्याख्या गर्दै हुनुहुन्छ (जो तपाईंले भनेको कुरा ठीक त्यस्तै गर्छ, तपाईंले भनेको कुरा तपाईंले भन्न चाहेको कुरा नभए पनि)।
+र यहाँ के कुरा छ जसले मलाई हरेक बिहान वास्तविक झिल्को दिन्छ: तपाईंको जीवनमा शाब्दिक *सबै* डिजिटल कुरा तपाईं जस्तै कोहीबाट सुरु भएको थियो, सम्भवतः आफ्नो पजामा लगाएर कफीको कपको साथ, आफ्नो ल्यापटपमा कोड टाइप गर्दै। त्यो इन्स्टाग्राम फिल्टर जसले तपाईंलाई निर्दोष देखिन्छ? कसैले त्यो कोड गर्यो। सिफारिस जसले तपाईंलाई तपाईंको नयाँ मनपर्ने गीतमा पुर्‍यायो? डेभलपरले त्यो एल्गोरिदम निर्माण गर्यो। एप जसले तपाईंलाई साथीहरूसँग डिनर बिल विभाजन गर्न मद्दत गर्दछ? हो, कसैले सोच्यो "यो झन्झट छ, म यसलाई ठीक गर्न सक्छु जस्तो लाग्छ" र त्यसपछि... तिनीहरूले गरे!
 
-यहाँ के कुरा मेरो दिमागलाई उडायो जब मैले पहिलो पटक यो सिकें: कम्प्युटरहरू वास्तवमा मूल रूपमा धेरै सरल छन्। तिनीहरूले शाब्दिक रूपमा केवल दुई कुरा बुझ्छन् – १ र ०, जुन आधारभूत रूपमा "हो" र "होइन" वा "अन" र "अफ" मात्र हो। बस यति! तर यहाँ यो जादुई हुन्छ – हामीलाई १ र ० मा बोल्न पर्दैन जस्तो कि हामी म्याट्रिक्समा छौं। त्यहाँ **प्रोग्रामिङ भाषाहरू** उद्धार गर्न आउँछन्। तिनीहरू संसारका सबैभन्दा राम्रो अनुवादक जस्तै हुन् जसले तपाईंको पूर्ण रूपमा सामान्य मानव विचारहरूलाई कम्प्युटर भाषामा रूपान्तरण गर्छ।
+जब तपाईंले प्रोग्राम गर्न सिक्नुहुन्छ, तपाईंले केवल नयाँ सीप उठाउनुहुन्न – तपाईं समस्या समाधान गर्नेहरूको यो अविश्वसनीय समुदायको हिस्सा बन्नुहुन्छ जसले आफ्नो दिन सोच्दै बिताउँछन्, "यदि मैले केही निर्माण गर्न सकें जसले कसैको दिनलाई अलिकति राम्रो बनाउँछ भने के हुन्छ?" इमानदारीपूर्वक, त्यो भन्दा चिसो केहि छ?
 
-र यहाँ के कुरा अझै पनि मलाई हरेक बिहान वास्तविक रोमाञ्चित बनाउँछ: तपाईंको जीवनको *सबै डिजिटल* कुरा केवल तपाईं जस्तै कोहीबाट सुरु भएको थियो, सम्भवतः आफ्नो पजामा कफीको कपको साथ बस्दै, आफ्नो ल्यापटपमा कोड टाइप गर्दै। त्यो इन्स्टाग्राम फिल्टर जसले तपाईंलाई निर्दोष देखाउँछ? कसैले त्यो कोड गरे। त्यो सिफारिस जसले तपाईंलाई तपाईंको नयाँ मनपर्ने गीतमा पुर्‍यायो? एक डेभलपरले त्यो एल्गोरिदम निर्माण गरे। त्यो एप जसले तपाईंलाई साथीहरूसँग डिनर बिल विभाजन गर्न मद्दत गर्छ? हो, कसैले सोच्यो "यो झन्झट छ, म यसलाई ठीक गर्न सक्छु" र त्यसपछि... तिनीहरूले गरे!
+✅ **मजाको तथ्य खोज**: यहाँ केही सुपर कूल छ जब तपाईंसँग खाली समय छ – तपाईंलाई लाग्छ कि संसारको पहिलो कम्प्युटर प्रोग्रामर को थियो? म तपाईंलाई संकेत दिनेछु: यो तपाईंले अपेक्षा गरेको व्यक्ति नहुन सक्छ! यस व्यक्तिको पछाडि कथा बिल्कुल आकर्षक छ र देखाउँछ कि प्रोग्रामिङ सधैं रचनात्मक समस्या समाधान र बक्स बाहिर सोच्ने बारेमा भएको छ।
 
-जब तपाईं प्रोग्राम गर्न सिक्नुहुन्छ, तपाईं केवल नयाँ सीप उठाउँदै हुनुहुन्न – तपाईं समस्या समाधानकर्ताहरूको यो अविश्वसनीय समुदायको हिस्सा बन्दै हुनुहुन्छ जसले आफ्नो दिन सोच्दै बिताउँछन्, "यदि मैले केहि निर्माण गर्न सकें जसले कसैको दिनलाई अलिकति राम्रो बनाउँछ भने के हुन्छ?" इमानदारीपूर्वक, त्यो भन्दा चिसो केहि छ?
+### 🧠 **जाँच समय: तपाईं कस्तो महसुस गर्दै हुनुहुन्छ?**
 
-✅ **मजाको तथ्य खोज**: यहाँ केहि सुपर चिसो हेर्नुहोस् जब तपाईंलाई खाली समय छ – तपाईंलाई लाग्छ कि संसारको पहिलो कम्प्युटर प्रोग्रामर को थियो? म तपाईंलाई एउटा संकेत दिनेछु: यो तपाईंले अपेक्षा गरेको व्यक्ति नहुन सक्छ! यस व्यक्तिको पछाडि कथा पूर्ण रूपमा आकर्षक छ र देखाउँछ कि प्रोग्रामिङ सधैं रचनात्मक समस्या समाधान र बक्स बाहिर सोच्ने बारेमा भएको छ।
+**एक क्षणको लागि विचार गर्नुहोस्:**
+- "कम्प्युटरलाई निर्देशन दिनु" भन्ने विचार अब तपाईंलाई अर्थपूर्ण लाग्छ?
+- के तपाईं कुनै दैनिक कार्यको बारेमा सोच्न सक्नुहुन्छ जुन तपाईं प्रोग्रामिङको साथ स्वचालित गर्न चाहनुहुन्छ?
+- यस सम्पूर्ण प्रोग्रामिङ कुराको बारेमा तपाईंको दिमागमा के प्रश्नहरू उठिरहेका छन्?
+
+> **स्मरण गर्नुहोस्**: यदि केही अवधारणाहरू अहिले अस्पष्ट लाग्छ भने यो पूर्ण रूपमा सामान्य हो। प्रोग्रामिङ सिक्नु नयाँ भाषा सिक्न जस्तै हो – तपाईंको मस्तिष्कले ती न्युरल मार्गहरू निर्माण गर्न समय लाग्छ। तपाईं राम्रो गर्दै हुनुहुन्छ!
 
 ## प्रोग्रामिङ भाषाहरू जादुको विभिन्न स्वादहरू जस्तै छन्
 
-ठीक छ, यो अजीब लाग्न सक्छ, तर मलाई विश्वास गर्नुहोस् – प्रोग्रामिङ भाषाहरू विभिन्न प्रकारका संगीत जस्तै छन्। सोच्नुहोस्: तपाईंसँग जाज छ, जुन स्मूथ र इम्प्रोभाइजेशनल छ, रक जुन शक्तिशाली र सरल छ, क्लासिकल जुन सुरुचिपूर्ण र संरचित छ, र हिप-हप जुन रचनात्मक र अभिव्यक्तिपूर्ण छ। प्रत्येक शैलीको आफ्नै माहौल छ, आफ्नै उत्साही प्रशंसकहरूको समुदाय छ, र प्रत्येक विभिन्न मूड र अवसरहरूको लागि उत्तम छ।
+ठीक छ, यो अजीब लाग्न सक्छ, तर मेरो साथमा रहनुहोस् – प्रोग्रामिङ भाषाहरू विभिन्न प्रकारका संगीत जस्तै छन्। सोच्नुहोस्: तपाईंसँग जाज छ, जुन स्मूथ र इम्प्रोभाइजेशनल छ, रक जुन शक्तिशाली र सरल छ, क्लासिकल जुन सुरुचिपूर्ण र संरचित छ, र हिप-हप जुन रचनात्मक र अभिव्यक्तिपूर्ण छ। प्रत्येक शैलीको आफ्नै माहोल छ, आफ्नै उत्साही प्रशंसकहरूको समुदाय छ, र प्रत्येक विभिन्न मूड र अवसरहरूको लागि उत्तम छ।
 
-प्रोग्रामिङ भाषाहरू ठीक त्यस्तै काम गर्छन्! तपाईंले जलवायु डाटाको ठूलो मात्रामा गणना गर्न प्रयोग गर्ने भाषा र रमाइलो मोबाइल गेम निर्माण गर्न प्रयोग गर्ने भाषा एउटै हुँदैन, जस्तै तपाईं योग कक्षामा डेथ मेटल बजाउनुहुन्न (खैर, अधिकांश योग कक्षाहरूमा! 😄)।
+प्रोग्रामिङ भाषाहरू ठीक त्यस्तै काम गर्छन्! तपाईंले जलवायु डाटा ठूलो मात्रामा क्रन्च गर्न प्रयोग गर्ने भाषा र मजाको मोबाइल गेम निर्माण गर्न प्रयोग गर्ने भाषा एउटै हुँदैन, जस्तै तपाईं योग क्लासमा डेथ मेटल बजाउनुहुन्न (खैर, अधिकांश योग क्लासहरूमा! 😄)।
 
-तर यहाँ के कुरा मलाई हरेक पटक सोच्दा चकित पार्छ: यी भाषाहरू तपाईंको छेउमा बसिरहेको संसारको सबैभन्दा धैर्यवान, प्रतिभाशाली अनुवादक जस्तै छन्। तपाईं आफ्नो मानव मस्तिष्कलाई प्राकृतिक लाग्ने तरिकामा आफ्नो विचारहरू व्यक्त गर्न सक्नुहुन्छ, र तिनीहरूले त्यो कम्प्युटरले वास्तवमा बोल्ने १ र ० मा अनुवाद गर्ने सबै अविश्वसनीय जटिल कामहरू सम्हाल्छन्। यो जस्तो छ कि तपाईंको छेउमा "मानव रचनात्मकता" र "कम्प्युटर तर्क" मा पूर्ण रूपमा दक्ष साथी छ – र तिनीहरू कहिल्यै थाक्दैनन्, कहिल्यै कफी ब्रेकको आवश्यकता पर्दैन, र तपाईंले एउटै प्रश्न दुई पटक सोध्नुभएकोमा कहिल्यै न्याय गर्दैनन्!
+तर यहाँ के कुरा छ जसले मलाई हरेक पटक सोच्दा मेरो दिमागलाई उडाउँछ: यी भाषाहरू संसारको सबैभन्दा धैर्यवान, प्रतिभाशाली अनुवादक भएको जस्तै छन्। तपाईं आफ्नो मानव मस्तिष्कलाई प्राकृतिक लाग्ने तरिकामा आफ्नो विचारहरू व्यक्त गर्न सक्नुहुन्छ, र तिनीहरूले त्यो कम्प्युटरले वास्तवमा बोल्ने १ र ० मा अनुवाद गर्ने अत्यन्त जटिल कामलाई ह्यान्डल गर्छन्। यो जस्तो छ कि तपाईंको साथमा "मानव रचनात्मकता" र "कम्प्युटर तर्क" मा पूर्ण रूपमा धाराप्रवाह भएको साथी छ – र तिनीहरू कहिल्यै थाक्दैनन्, कहिल्यै कफी ब्रेकको आवश्यकता पर्दैन, र तपाईंले सोधेको प्रश्नको लागि तपाईंलाई कहिल्यै न्याय गर्दैनन्!
 
 ### लोकप्रिय प्रोग्रामिङ भाषाहरू र तिनीहरूको प्रयोग
 
-| भाषा | उत्तम लागि | किन यो लोकप्रिय छ |
-|------|------------|--------------------|
-| **JavaScript** | वेब विकास, प्रयोगकर्ता इन्टरफेसहरू | ब्राउजरमा चल्छ र अन्तरक्रियात्मक वेबसाइटहरूलाई शक्ति दिन्छ |
-| **Python** | डाटा विज्ञान, स्वचालन, AI | पढ्न र सिक्न सजिलो, शक्तिशाली लाइब्रेरीहरू |
-| **Java** | उद्यम एप्लिकेसनहरू, एन्ड्रोइड एप्स | प्लेटफर्म-स्वतन्त्र, ठूला प्रणालीहरूको लागि बलियो |
-| **C#** | विन्डोज एप्लिकेसनहरू, गेम विकास | माइक्रोसफ्ट इकोसिस्टमको बलियो समर्थन |
+```mermaid
+mindmap
+  root((Programming Languages))
+    Web Development
+      JavaScript
+        Frontend Magic
+        Interactive Websites
+      TypeScript
+        JavaScript + Types
+        Enterprise Apps
+    Data & AI
+      Python
+        Data Science
+        Machine Learning
+        Automation
+      R
+        Statistics
+        Research
+    Mobile Apps
+      Java
+        Android
+        Enterprise
+      Swift
+        iOS
+        Apple Ecosystem
+      Kotlin
+        Modern Android
+        Cross-platform
+    Systems & Performance
+      C++
+        Games
+        Performance Critical
+      Rust
+        Memory Safety
+        System Programming
+      Go
+        Cloud Services
+        Scalable Backend
+```
+
+| भाषा | उत्तम प्रयोग | किन यो लोकप्रिय छ |
+|----------|----------|------------------|
+| **जाभास्क्रिप्ट** | वेब विकास, प्रयोगकर्ता इन्टरफेस | ब्राउजरमा चल्छ र अन्तरक्रियात्मक वेबसाइटहरूलाई शक्ति दिन्छ |
+| **पाइथन** | डाटा विज्ञान, स्वचालन, एआई | पढ्न र सिक्न सजिलो, शक्तिशाली लाइब्रेरीहरू |
+| **जाभा** | उद्यम एप्लिकेसनहरू, एन्ड्रोइड एप्स | प्लेटफर्म-स्वतन्त्र, ठूला प्रणालीहरूको लागि बलियो |
+| **C#** | विन्डोज एप्लिकेसनहरू, खेल विकास | माइक्रोसफ्ट इकोसिस्टमको बलियो समर्थन |
 | **Go** | क्लाउड सेवाहरू, ब्याकएन्ड प्रणालीहरू | छिटो, सरल, आधुनिक कम्प्युटिङको लागि डिजाइन गरिएको |
 
 ### उच्च-स्तर बनाम निम्न-स्तर भाषाहरू
 
-ठीक छ, यो इमानदारीपूर्वक अवधारणा थियो जसले मलाई पहिलो पटक सिक्दा चकित बनायो, त्यसैले म तपाईंलाई त्यो उपमा साझा गर्नेछु जसले अन्ततः मलाई यो बुझ्न मद्दत गर्यो – र म साँच्चै आशा गर्दछु कि यसले तपाईंलाई पनि मद्दत गर्दछ!
+ठीक छ, यो इमानदारीपूर्वक अवधारणा थियो जसले मलाई पहिलो पटक सिक्दा मेरो दिमागलाई तोड्यो, त्यसैले म तपाईंलाई त्यो उपमा साझा गर्न जाँदैछु जसले अन्ततः मलाई क्लिक गरायो – र म साँच्चै आशा गर्दछु कि यसले तपाईंलाई पनि मद्दत गर्दछ!
 
-कल्पना गर्नुहोस् कि तपाईं एउटा देशमा भ्रमण गर्दै हुनुहुन्छ जहाँ तपाईंले भाषा बोल्न सक्नुहुन्न, र तपाईंलाई अत्यन्तै बाथरूम खोज्न आवश्यक छ (हामी सबै त्यहाँ पुगेका छौं, हैन? 😅):
+कल्पना गर्नुहोस् कि तपाईं एउटा देशमा भ्रमण गर्दै हुनुहुन्छ जहाँ तपाईंले भाषा बोल्नुहुन्न, र तपाईंलाई नजिकको बाथरूम खोज्न अत्यन्त आवश्यक छ (हामी सबै त्यहाँ पुगेका छौं, हैन? 😅):
 
-- **निम्न-स्तर प्रोग्रामिङ** स्थानीय बोलीलाई यति राम्रोसँग सिक्न जस्तै हो कि तपाईं कुनामा फल बेच्ने हजुरआमासँग सांस्कृतिक सन्दर्भहरू, स्थानीय स्ल्याङ, र भित्री मजाकहरू प्रयोग गरेर कुरा गर्न सक्नुहुन्छ। सुपर प्रभावशाली र अविश्वसनीय रूपमा कुशल... यदि तपाईंलाई धाराप्रवाह छ भने! तर तपाईं केवल बाथरूम खोज्न प्रयास गर्दै हुनुहुन्छ भने यो धेरै भारी हुन सक्छ।
+- **निम्न-स्तर प्रोग्रामिङ** स्थानीय बोलीलाई यति राम्रोसँग सिक्न जस्तै हो कि तपाईं कुनामा फल बेच्ने हजुरआमासँग सांस्कृतिक सन्दर्भहरू, स्थानीय स्ल्याङ, र भित्री मजाकहरू प्रयोग गरेर कुरा गर्न सक्नुहुन्छ जुन केवल त्यहाँ हुर्केका व्यक्तिले मात्र बुझ्न सक्छ। सुपर प्रभावशाली र अविश्वसनीय रूपमा कुशल... यदि तपाईं धाराप्रवाह हुनुहुन्छ भने! तर तपाईं केवल बाथरूम खोज्न प्रयास गर्दै हुनुहुन्छ भने धेरै भारी।
 
-- **उच्च-स्तर प्रोग्रामिङ** त्यो अद्भुत स्थानीय साथी जस्तै हो जसले तपाईंलाई मात्र बुझ्छ। तपाईं "मलाई साँच्चै बाथरूम खोज्न आवश्यक छ" सामान्य अंग्रेजीमा भन्न सक्नुहुन्छ, र तिनीहरूले सबै सांस्कृतिक अनुवाद सम्हाल्छन् र तपाईंलाई यस्तो तरिकामा दिशा दिन्छन् जसले तपाईंको गैर-स्थानीय मस्तिष्कलाई पूर्ण रूपमा अर्थ दिन्छ।
+- **उच्च-स्तर प्रोग्रामिङ** त्यो अद्भुत स्थानीय साथी भएको जस्तै हो जसले तपाईंलाई मात्र बुझ्छ। तपाईं "मलाई साँच्चै शौचालय खोज्न आवश्यक छ" सामान्य अंग्रेजीमा भन्न सक्नुहुन्छ, र तिनीहरूले सबै सांस्कृतिक अनुवादलाई ह्यान्डल गर्छन् र तपाईंलाई यस्तो तरिकामा निर्देशन दिन्छन् जुन तपाईंको गैर-स्थानीय मस्तिष्कमा पूर्ण रूपमा अर्थपूर्ण हुन्छ।
 
 प्रोग्रामिङ सर्तहरूमा:
-- **निम्न-स्तर भाषाहरू** (जस्तै Assembly वा C) तपाईंलाई कम्प्युटरको वास्तविक हार्डवेयरसँग अविश्वसनीय रूपमा विस्तृत संवाद गर्न दिन्छ, तर तपाईंलाई मेसिन जस्तै सोच्न आवश्यक छ, जुन... खैर, यो एकदम ठूलो मानसिक परिवर्तन हो!
-- **उच्च-स्तर भाषाहरू** (जस्तै JavaScript, Python, वा C#) तपाईंलाई मानव जस्तै सोच्न दिन्छ जबकि तिनीहरूले सबै मेसिन-भाषा पछाडि दृश्यहरू सम्हाल्छन्। साथै, तिनीहरूसँग यी अविश्वसनीय स्वागतयोग्य समुदायहरू छन् जसले नयाँ भएको कस्तो महसुस हुन्छ भनेर सम्झन्छन् र वास्तवमा मद्दत गर्न चाहन्छन्!
-
-तपाईंलाई सुरु गर्न म कुन सिफारिस गर्नेछु भनेर अनुमान गर्नुहोस्? 😉 उच्च-स्तर भाषाहरू प्रशिक्षण पाङ्ग्राहरू जस्तै छन् जुन तपाईं वास्तवमा कहिल्यै हटाउन चाहनुहुन्न किनभने तिनीहरूले सम्पूर्ण अनुभवलाई धेरै रमाइलो बनाउँछन्!
+- **निम्न-स्तर भाषाहरू** (जस्तै Assembly वा C) तपाईंलाई कम्प्युटरको वास्तविक हार्डवेयरसँग अविश्वसनीय रूपमा विस्तृत कुराकानी गर्न दिन्छ, तर तपाईंलाई मेसिन जस्तै सोच्न आवश्यक छ, जुन... खैर, हामी केवल यो ठूलो मानसिक परिवर्तन हो भनेर भनौं!
+- **उच्च-स्तर भाषाहरू** (जस्तै जाभास्क्रिप्ट, पाइथन, वा C#) तपाईंलाई मानव जस्तै सोच्न दिन्छ जबकि तिनीहरूले दृश्य पछाडि सबै मेसिन-भाषा ह्यान्डल गर्छन्। साथै, तिनीहरूसँग यी अविश्वसनीय स्वागतयोग्य समुदायहरू छन् जसले नयाँ भएको कस्तो महसुस हुन्छ भनेर सम्झन्छन् र वास्तवमा मद्दत गर्न चाहन्छन्!
+
+तपाईंलाई सुरु गर्न म कुन सुझाव दिनेछु भनेर अनुमान गर्नुहोस्? 😉 उच्च-स्तर भाषाहरू प्रशिक्षण पाङ्ग्राहरू भएको जस्तै छन् जुन तपाईं वास्तवमा कहिल्यै हटाउन चाहनुहुन्न किनभने तिनीहरूले सम्पूर्ण अनुभवलाई धेरै रमाइलो बनाउँछन्!
+
+```mermaid
+flowchart TB
+    A["👤 Human Thought:<br/>'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level}
+    
+    B -->|High-Level| C["🌟 JavaScript/Python<br/>Easy to read and write"]
+    B -->|Low-Level| D["⚙️ Assembly/C<br/>Direct hardware control"]
+    
+    C --> E["📝 Write: fibonacci(10)"]
+    D --> F["📝 Write: mov r0,#00<br/>sub r0,r0,#01"]
+    
+    E --> G["🤖 Computer Understanding:<br/>Translator handles complexity"]
+    F --> G
+    
+    G --> H["💻 Same Result:<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
+    
+    style C fill:#e1f5fe
+    style D fill:#fff3e0
+    style H fill:#e8f5e8
+```
 
-### किन उच्च-स्तर भाषाहरू धेरै मैत्रीपूर्ण छन् भनेर म तपाईंलाई देखाउँछु
+### उच्च-स्तर भाषाहरू किन धेरै मैत्रीपूर्ण छन् भनेर म तपाईंलाई देखाउँछु
 
-ठीक छ, म तपाईंलाई केहि देखाउन जाँदैछु जसले उच्च-स्तर भाषाहरूमा म किन प्रेममा परें भनेर पूर्ण रूपमा प्रदर्शन गर्दछ, तर पहिले – म तपाईंलाई केहि वाचा गर्न आवश्यक छ। जब तपाईंले त्यो पहिलो कोड उदाहरण देख्नुहुन्छ, आतंक नगर्नुहोस्! यो डर लाग्दो देखिनु पर्ने हो। यही कुरा म बनाउँदैछु!
+ठीक छ, म तपाईंलाई केही देखाउन जाँदैछु जसले उच्च-स्तर भाषाहरू किन माया गरें भनेर पूर्ण रूपमा प्रदर्शन गर्दछ, तर पहिले – म तपाईंलाई केहि वाचा गर्न आवश्यक छ। जब तपाईंले त्यो पहिलो कोड उदाहरण देख्नुहुन्छ, आतंक नगर्नुहोस्! यो डर लाग्दो देखिनु पर्ने हो। त्यो ठीक त्यही बिन्दु हो जुन म बनाउँदैछु!
 
-हामी एकै कार्यलाई दुई पूर्ण रूपमा फरक शैलीमा लेखिएको हेर्नेछौं। दुवैले फिबोनाच्ची अनुक्रम सिर्जना गर्छन् – यो एक सुन्दर गणितीय ढाँचा हो जहाँ प्रत्येक संख्या अघिल्लो दुईको योग हो: ०, १, १, २, ३, ५, ८, १३... (मजाको तथ्य: तपाईं यो ढाँचा प्रकृतिमा शाब्दिक रूपमा सबै ठाउँमा पाउनुहुन्छ – सूर्यफूलको बीउको घुमाउरो, पाइनकोन ढाँचा, यहाँसम्म कि आकाशगंगाहरूको बनावट!)
+हामी एकदमै समान कार्य दुई पूर्ण रूपमा फरक शैलीमा लेखिएको हेर्नेछौं। दुवैले फिबोनाच्ची अनुक्रम सिर्जना गर्छन् – यो यो सुन्दर गणितीय ढाँचा हो जहाँ प्रत्येक संख्या अघिल्लो दुईको योग हो: ०, १, १, २, ३, ५, ८, १३... (मजाको तथ्य: तपाईंले यो ढाँचा प्रकृतिमा शाब्दिक रूपमा सबै ठाउँमा पाउनुहुनेछ – घामफूलको बीउको घुमाउरो, सल्लाको शंकु ढाँचा, यहाँसम्म कि आकाशगंगाहरू बनाउने तरिका!)
 
-तयार हुनुहुन्छ फरक हेर्न? सुरु गरौं!
+तयार हुनुहुन्छ फरक देख्न? सुरु गरौं!
 
-**उच्च-स्तर भाषा (JavaScript) – मानव-मैत्रीपूर्ण:**
+**उच्च-स्तर भाषा (जाभास्क्रिप्ट) – मानव-मैत्रीपूर्ण:**
 
 ```javascript
 // Step 1: Basic Fibonacci setup
@@ -111,61 +198,24 @@ console.log('Fibonacci sequence:');
 **यो कोडले के गर्छ:**
 - **घोषणा गर्नुहोस्** कि हामी कति फिबोनाच्ची संख्या उत्पन्न गर्न चाहन्छौं
 - **आरम्भ गर्नुहोस्** दुई भेरिएबलहरू अनुक्रममा हालको र अर्को संख्याहरू ट्र्याक गर्न
-- **सेट अप गर्नुहोस्** फिबोनाच्ची ढाँचा परिभाषित गर्ने सुरुवात मानहरू (० र १)
-- **प्रदर्शन गर्नुहोस्** हाम्रो आउटपुट पहिचान गर्न हेडर सन्देश
+- **सेट अप गर्नुहोस्** फिबोनाच्ची ढ
+- **टिप्पणीहरू**: उच्च-स्तरीय भाषाहरूले व्याख्यात्मक टिप्पणीहरूलाई प्रोत्साहन गर्छन् जसले कोडलाई आफैंले बुझ्न सक्ने बनाउँछ।  
+- **संरचना**: जाभास्क्रिप्टको तार्किक प्रवाहले मानिसहरूले समस्याहरूलाई चरण-दर-चरण सोच्ने तरिकासँग मेल खान्छ।  
+- **मर्मतसम्भार**: विभिन्न आवश्यकताहरूका लागि जाभास्क्रिप्ट संस्करण अद्यावधिक गर्नु सरल र स्पष्ट छ।  
 
-```javascript
-// Step 2: Generate the sequence with a loop
-for (let i = 0; i < fibonacciCount; i++) {
-  console.log(`Position ${i + 1}: ${current}`);
-  
-  // Calculate next number in sequence
-  const sum = current + next;
-  current = next;
-  next = sum;
-}
-```
+✅ **फिबोनाची अनुक्रमको बारेमा**: यो अत्यन्तै सुन्दर संख्याको ढाँचा (जहाँ प्रत्येक संख्या अघिल्लो दुईको योग बराबर हुन्छ: ०, १, १, २, ३, ५, ८...) प्रकृतिमा *जताततै* देखिन्छ! तपाईंले यसलाई सूर्यफूलको घुमाउरो, सल्लाको शंकुका ढाँचाहरू, नौटिलस खोलको घुमाउरो, र यहाँसम्म कि रुखका हाँगाहरू बढ्ने तरिकामा पनि पाउनुहुनेछ। गणित र कोडले प्रकृतिले सौन्दर्य सिर्जना गर्न प्रयोग गर्ने ढाँचाहरूलाई बुझ्न र पुनः सिर्जना गर्न मद्दत गर्न सक्छ भन्ने कुरा साँच्चै चमत्कारी छ!  
 
-**यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
-- **लूप गर्नुहोस्** प्रत्येक स्थानमा हाम्रो अनुक्रममा `for` लूप प्रयोग गरेर
-- **प्रदर्शन गर्नुहोस्** प्रत्येक संख्या यसको स्थानसँग टेम्पलेट लिटरल ढाँचाको प्रयोग गरेर
-- **गणना गर्नुहोस्** अर्को फिबोनाच्ची संख्या हालको र अर्को मानहरू थपेर
-- **अपडेट गर्नुहोस्** हाम्रो ट्र्याकिङ भेरिएबलहरू अर्को पुनरावृत्तिमा जान
+## जादू सिर्जना गर्ने आधारभूत तत्वहरू  
 
-```javascript
-// Step 3: Modern functional approach
-const generateFibonacci = (count) => {
-  const sequence = [0, 1];
-  
-  for (let i = 2; i < count; i++) {
-    sequence[i] = sequence[i - 1] + sequence[i - 2];
-  }
-  
-  return sequence;
-};
+ठिक छ, अब तपाईंले प्रोग्रामिङ भाषाहरूलाई काममा देख्नुभयो, आउनुहोस् ती आधारभूत टुक्राहरूलाई तोडौं जसले अहिलेसम्म लेखिएको प्रत्येक प्रोग्राम बनाउँछ। यीलाई तपाईंको मनपर्ने रेसिपीका आवश्यक सामग्रीहरू जस्तै सोच्नुहोस् – एकपटक तपाईंले प्रत्येकले के गर्छ बुझ्नुभयो भने, तपाईंले लगभग कुनै पनि भाषामा कोड पढ्न र लेख्न सक्नुहुन्छ!  
 
-// Usage example
-const fibSequence = generateFibonacci(10);
-console.log(fibSequence);
-```
+यो प्रोग्रामिङको व्याकरण सिक्ने जस्तै हो। विद्यालयमा तपाईंले संज्ञा, क्रियापद, र वाक्यहरू कसरी मिलाउने भनेर सिक्नुभएको सम्झनुहुन्छ? प्रोग्रामिङको आफ्नै व्याकरण छ, र इमानदारीपूर्वक भन्नुपर्दा, यो अंग्रेजी व्याकरणभन्दा धेरै तार्किक र क्षमाशील छ! 😄  
 
-**माथिकोमा, हामीले:**
-- **पुन: प्रयोग गर्न सकिने कार्य सिर्जना गर्यौं** आधुनिक एरो फंक्शन सिन्ट्याक्स प्रयोग गरेर
-- **एरे निर्माण गर्यौं** सम्पूर्ण अनुक्रम भण्डारण गर्न एक-एक गरेर प्रदर्शन गर्नको सट्टा
-- **एरे अनु
-✅ **फिबोनाची अनुक्रमको बारेमा**: यो अत्यन्तै सुन्दर संख्याको ढाँचा (जहाँ प्रत्येक संख्या अघिल्लो दुई संख्याको योग बराबर हुन्छ: ०, १, १, २, ३, ५, ८...) प्रकृतिमा *जताततै* देखिन्छ! तपाईंले यसलाई घामफूलको घुमाउरो, सल्लाको शंकुका ढाँचाहरू, नौटिलस खोलको घुमाउरो, र यहाँसम्म कि रुखका हाँगाहरू बढ्ने तरिकामा पनि पाउनुहुन्छ। गणित र कोडले प्रकृतिले सौन्दर्य सिर्जना गर्न प्रयोग गर्ने ढाँचाहरूलाई बुझ्न र पुनः सिर्जना गर्न मद्दत गर्न सक्छ भन्ने कुरा साँच्चै चकित पार्ने खालको छ!
+### स्टेटमेन्टहरू: चरण-दर-चरण निर्देशनहरू  
 
-## जादू सिर्जना गर्ने आधारभूत तत्वहरू
+आउनुहोस् **स्टेटमेन्टहरू**बाट सुरु गरौं – यी तपाईंको कम्प्युटरसँगको कुराकानीका व्यक्तिगत वाक्यहरू जस्तै हुन्। प्रत्येक स्टेटमेन्टले कम्प्युटरलाई एक विशिष्ट काम गर्न भन्छ, जस्तै निर्देशन दिनु: "यहाँ बायाँ मोड्नुहोस्," "रातो बत्तीमा रोक्नुहोस्," "त्यो ठाउँमा पार्क गर्नुहोस्।"  
 
-ठिक छ, अब तपाईंले प्रोग्रामिङ भाषाहरूलाई काममा देख्नुभयो, आउनुहोस् हरेक प्रोग्रामको आधारभूत टुक्राहरूलाई तोडौं जुन कहिल्यै लेखिएको छ। यीलाई तपाईंको मनपर्ने रेसिपीका आवश्यक सामग्रीहरू जस्तै सोच्नुहोस् – एकपटक तपाईंले प्रत्येकले के गर्छ भन्ने कुरा बुझ्नुभयो भने, तपाईंले लगभग कुनै पनि भाषामा कोड पढ्न र लेख्न सक्नुहुन्छ!
-
-यो प्रोग्रामिङको व्याकरण सिक्ने जस्तै हो। विद्यालयमा तपाईंले संज्ञा, क्रियापद, र वाक्यहरू कसरी मिलाउने भन्ने कुरा सिक्नुभएको सम्झनुहुन्छ? प्रोग्रामिङको आफ्नै व्याकरण छ, र इमानदारीपूर्वक भन्नुपर्दा, यो अंग्रेजी व्याकरणभन्दा धेरै तार्किक र क्षमाशील छ! 😄
-
-### स्टेटमेन्टहरू: चरण-दर-चरण निर्देशनहरू
-
-आउनुहोस् **स्टेटमेन्टहरू**बाट सुरु गरौं – यी तपाईंको कम्प्युटरसँगको कुराकानीमा व्यक्तिगत वाक्यहरू जस्तै हुन्। प्रत्येक स्टेटमेन्टले कम्प्युटरलाई एक विशिष्ट काम गर्न भन्छ, जस्तै निर्देशन दिनु: "यहाँ बायाँ मोड्नुहोस्," "रातो बत्तीमा रोक्नुहोस्," "त्यो ठाउँमा पार्क गर्नुहोस्।"
-
-मलाई स्टेटमेन्टहरू मनपर्छ किनभने यी सामान्यतया पढ्न सजिलो हुन्छन्। यो हेर्नुहोस्:
+मलाई स्टेटमेन्टहरू मनपर्छ किनभने ती सामान्यतया पढ्न सजिलो हुन्छन्। यो हेर्नुहोस्:  
 
 ```javascript
 // Basic statements that perform single actions
@@ -173,31 +223,31 @@ const userName = "Alex";
 console.log("Hello, world!");              
 const sum = 5 + 3;                         
 ```
-
-**यो कोडले के गर्छ:**
-- **घोषणा गर्नुहोस्** स्थिर भेरिएबल प्रयोगकर्ताको नाम भण्डारण गर्न
-- **प्रदर्शन गर्नुहोस्** अभिवादन सन्देश कन्सोल आउटपुटमा
-- **गणना गर्नुहोस्** र गणितीय अपरेशनको परिणाम भण्डारण गर्नुहोस्
+  
+**यो कोडले के गर्छ:**  
+- **घोषणा गर्नुहोस्** स्थिर भेरिएबल प्रयोगकर्ताको नाम भण्डारण गर्न।  
+- **देखाउनुहोस्** अभिवादन सन्देश कन्सोल आउटपुटमा।  
+- **गणना गर्नुहोस्** र गणितीय अपरेशनको नतिजा भण्डारण गर्नुहोस्।  
 
 ```javascript
 // Statements that interact with web pages
 document.title = "My Awesome Website";      
 document.body.style.backgroundColor = "lightblue";
 ```
+  
+**चरण-दर-चरण, यहाँ के भइरहेको छ:**  
+- **परिवर्तन गर्नुहोस्** ब्राउजर ट्याबमा देखिने वेबपेजको शीर्षक।  
+- **बदल्नुहोस्** सम्पूर्ण पृष्ठको पृष्ठभूमि रंग।  
 
-**चरण-दर-चरण, यहाँ के भइरहेको छ:**
-- **वेबपेजको शीर्षक परिमार्जन गर्नुहोस्** जुन ब्राउजर ट्याबमा देखिन्छ
-- **पृष्ठको सम्पूर्ण पृष्ठभूमि रंग परिवर्तन गर्नुहोस्**
-
-### भेरिएबलहरू: तपाईंको प्रोग्रामको मेमोरी प्रणाली
+### भेरिएबलहरू: तपाईंको प्रोग्रामको मेमोरी प्रणाली  
 
-ठिक छ, **भेरिएबलहरू** इमानदारीपूर्वक मेरो मनपर्ने अवधारणाहरू मध्ये एक हो किनभने यी तपाईंले दैनिक जीवनमा प्रयोग गर्ने चीजहरू जस्तै छन्!
+ठिक छ, **भेरिएबलहरू** इमानदारीपूर्वक मेरो मनपर्ने अवधारणाहरू मध्ये एक हो किनभने ती तपाईंले दैनिक जीवनमा प्रयोग गर्ने चीजहरू जस्तै छन्!  
 
-तपाईंको फोनको सम्पर्क सूचीको बारेमा सोच्नुहोस्। तपाईंले सबैको फोन नम्बर याद गर्नुहुन्न – यसको सट्टा, तपाईंले "आमा," "सबैभन्दा राम्रो साथी," वा "पिज्जा स्थान जसले रातको २ बजेसम्म डेलिभर गर्छ" बचत गर्नुहुन्छ र तपाईंको फोनले वास्तविक नम्बरहरू सम्झन्छ। भेरिएबलहरू ठीक त्यस्तै काम गर्छन्! यी लेबल गरिएको कन्टेनरहरू जस्तै हुन् जहाँ तपाईंको प्रोग्रामले जानकारी भण्डारण गर्न सक्छ र पछि बुझ्न सक्ने नाम प्रयोग गरेर पुनः प्राप्त गर्न सक्छ।
+तपाईंको फोनको सम्पर्क सूचीको बारेमा सोच्नुहोस्। तपाईंले सबैको फोन नम्बर याद गर्नुहुन्न – यसको सट्टा, तपाईं "आमा," "सबैभन्दा राम्रो साथी," वा "पिज्जा स्थान जसले रातको २ बजेसम्म डेलिभर गर्छ" बचत गर्नुहुन्छ र तपाईंको फोनले वास्तविक नम्बरहरू सम्झन्छ। भेरिएबलहरू ठीक त्यस्तै काम गर्छन्! ती लेबल गरिएको कन्टेनरहरू जस्तै हुन् जहाँ तपाईंको प्रोग्रामले जानकारी भण्डारण गर्न सक्छ र पछि नाम प्रयोग गरेर पुनः प्राप्त गर्न सक्छ।  
 
-यहाँ के साँच्चै रमाइलो छ: भेरिएबलहरू तपाईंको प्रोग्राम चल्दा परिवर्तन हुन सक्छन् (त्यसैले नाम "भेरिएबल" – हेर्नुहोस् उनीहरूले के गरे)। जस्तै तपाईंले त्यो पिज्जा स्थान सम्पर्क अपडेट गर्न सक्नुहुन्छ जब तपाईंले अझ राम्रो ठाउँ पत्ता लगाउनुहुन्छ, भेरिएबलहरू तपाईंको प्रोग्रामले नयाँ जानकारी सिक्दा वा परिस्थितिहरू परिवर्तन हुँदा अपडेट गर्न सकिन्छ!
+यहाँ के साँच्चै चाखलाग्दो छ: भेरिएबलहरू तपाईंको प्रोग्राम चल्दा परिवर्तन गर्न सक्छन् (त्यसैले नाम "भेरिएबल" – हेर्नुहोस् उनीहरूले के गरे?)। जस्तै तपाईंले त्यो पिज्जा स्थान सम्पर्क अपडेट गर्न सक्नुहुन्छ जब तपाईंले अझ राम्रो ठाउँ पत्ता लगाउनुहुन्छ, भेरिएबलहरू तपाईंको प्रोग्रामले नयाँ जानकारी सिक्दा वा परिस्थितिहरू परिवर्तन हुँदा अपडेट गर्न सकिन्छ!  
 
-म तपाईंलाई यो कति सरल हुन सक्छ भनेर देखाउँछु:
+म तपाईंलाई यो कति सुन्दर सरल हुन सक्छ भनेर देखाउँछु:  
 
 ```javascript
 // Step 1: Creating basic variables
@@ -206,12 +256,12 @@ let currentWeather = "sunny";
 let temperature = 75;                       
 let isRaining = false;                      
 ```
-
-**यी अवधारणाहरू बुझ्दै:**
-- **स्थिर मानहरू भण्डारण गर्नुहोस्** `const` भेरिएबलहरूमा (जस्तै साइट नाम)
-- **प्रयोग गर्नुहोस्** `let` मानहरूको लागि जुन तपाईंको प्रोग्राममा परिवर्तन हुन सक्छ
-- **विभिन्न डेटा प्रकारहरू असाइन गर्नुहोस्**: स्ट्रिङहरू (पाठ), नम्बरहरू, र बूलियनहरू (साँचो/झुटो)
-- **वर्णनात्मक नामहरू रोज्नुहोस्** जसले प्रत्येक भेरिएबलले के समावेश गर्दछ भन्ने कुरा स्पष्ट पार्छ
+  
+**यी अवधारणाहरू बुझ्दै:**  
+- **भण्डारण गर्नुहोस्** स्थिर मानहरू `const` भेरिएबलहरूमा (जस्तै साइट नाम)।  
+- **प्रयोग गर्नुहोस्** `let` मानहरूको लागि जुन तपाईंको प्रोग्राममा परिवर्तन हुन सक्छ।  
+- **असाइन गर्नुहोस्** विभिन्न डेटा प्रकारहरू: स्ट्रिङहरू (पाठ), नम्बरहरू, र बूलियनहरू (सत्य/झुटो)।  
+- **चयन गर्नुहोस्** वर्णनात्मक नामहरू जसले प्रत्येक भेरिएबलले के समावेश गर्छ व्याख्या गर्छ।  
 
 ```javascript
 // Step 2: Working with objects to group related data
@@ -221,11 +271,11 @@ const weatherData = {
   windSpeed: 12
 };
 ```
-
-**माथिको कोडमा हामीले:**
-- **एक वस्तु सिर्जना गर्यौं** सम्बन्धित मौसम जानकारीलाई एकसाथ समूह गर्न
-- **धेरै डेटा टुक्राहरू व्यवस्थित गर्यौं** एक भेरिएबल नाम अन्तर्गत
-- **प्रत्येक जानकारीलाई स्पष्ट रूपमा लेबल गर्न** की-भ्यालु जोडीहरू प्रयोग गर्यौं
+  
+**माथिको कोडमा, हामीले:**  
+- **सिर्जना गर्यौं** सम्बन्धित मौसम जानकारीलाई एकसाथ समूह गर्न एक वस्तु।  
+- **व्यवस्थित गर्यौं** एक भेरिएबल नाम अन्तर्गत धेरै डेटा टुक्राहरू।  
+- **प्रयोग गर्यौं** प्रत्येक टुक्रालाई स्पष्ट रूपमा लेबल गर्न कुञ्जी-मूल्य जोडीहरू।  
 
 ```javascript
 // Step 3: Using and updating variables
@@ -236,33 +286,33 @@ console.log(`Wind speed: ${weatherData.windSpeed} mph`);
 currentWeather = "cloudy";                  
 temperature = 68;                          
 ```
-
-**प्रत्येक भाग बुझौं:**
-- **जानकारी प्रदर्शन गर्नुहोस्** टेम्प्लेट लिटरलहरू `${}` सिन्ट्याक्स प्रयोग गरेर
-- **वस्तु गुणहरू पहुँच गर्नुहोस्** डट नोटेशन (`weatherData.windSpeed`) प्रयोग गरेर
-- **अपडेट गर्नुहोस्** `let` भेरिएबलहरू बदलिँदो अवस्थाहरू प्रतिबिम्बित गर्न
-- **धेरै भेरिएबलहरू संयोजन गर्नुहोस्** अर्थपूर्ण सन्देशहरू सिर्जना गर्न
+  
+**प्रत्येक भाग बुझौं:**  
+- **देखाउनुहोस्** जानकारी टेम्प्लेट लिटरलहरू प्रयोग गरेर `${}` सिन्ट्याक्स।  
+- **पहुंच गर्नुहोस्** वस्तु गुणहरू डट नोटेशन (`weatherData.windSpeed`) प्रयोग गरेर।  
+- **अपडेट गर्नुहोस्** `let` भेरिएबलहरू बदलिने अवस्थाहरू प्रतिबिम्बित गर्न।  
+- **संयोजन गर्नुहोस्** धेरै भेरिएबलहरू अर्थपूर्ण सन्देशहरू सिर्जना गर्न।  
 
 ```javascript
 // Step 4: Modern destructuring for cleaner code
 const { location, humidity } = weatherData; 
 console.log(`${location} humidity: ${humidity}%`);
 ```
+  
+**तपाईंलाई थाहा हुनुपर्ने कुरा:**  
+- **निकाल्नुहोस्** वस्तुहरूबाट विशिष्ट गुणहरू डेस्ट्रक्चरिङ असाइनमेन्ट प्रयोग गरेर।  
+- **सिर्जना गर्नुहोस्** नयाँ भेरिएबलहरू स्वतः वस्तु कुञ्जीहरूको समान नामहरू प्रयोग गरेर।  
+- **सरल बनाउनुहोस्** कोड दोहोरिने डट नोटेशनबाट बचेर।  
 
-**तपाईंलाई थाहा हुनुपर्ने कुरा:**
-- **वस्तुबाट विशिष्ट गुणहरू निकाल्नुहोस्** डेस्ट्रक्चरिङ असाइनमेन्ट प्रयोग गरेर
-- **नयाँ भेरिएबलहरू स्वतः सिर्जना गर्नुहोस्** वस्तु कुञ्जीहरूको समान नामहरू प्रयोग गरेर
-- **कोडलाई सरल बनाउनुहोस्** दोहोरिने डट नोटेशनबाट बचेर
-
-### नियन्त्रण प्रवाह: तपाईंको प्रोग्रामलाई सोच्न सिकाउँदै
+### नियन्त्रण प्रवाह: तपाईंको प्रोग्रामलाई सोच्न सिकाउँदै  
 
-ठिक छ, यहाँ प्रोग्रामिङ साँच्चै चकित पार्ने खालको हुन्छ! **नियन्त्रण प्रवाह** भनेको तपाईंको प्रोग्रामलाई स्मार्ट निर्णय गर्न सिकाउनु हो, ठीक तपाईंले दैनिक जीवनमा सोच्नै नपरी गर्ने जस्तै।
+ठिक छ, यहाँ प्रोग्रामिङ साँच्चै चमत्कारी हुन्छ! **नियन्त्रण प्रवाह** भनेको तपाईंको प्रोग्रामलाई स्मार्ट निर्णय गर्न सिकाउनु हो, ठीक तपाईंले दैनिक जीवनमा सोच्नुभएको जस्तै।  
 
-कल्पना गर्नुहोस्: आज बिहान तपाईंले सम्भवतः यस्तो सोच्नुभयो "यदि पानी परिरहेको छ भने, म छाता लिन्छु। यदि चिसो छ भने, म ज्याकेट लगाउँछु। यदि म ढिलो छु भने, म नास्ता छोड्छु र बाटोमा कफी लिन्छु।" तपाईंको मस्तिष्कले यो यदि-त्यसपछि तर्क स्वाभाविक रूपमा दैनिक जीवनमा दर्जनौं पटक अनुसरण गर्छ!
+कल्पना गर्नुहोस्: आज बिहान तपाईंले सम्भवतः यस्तो सोच्नुभयो "यदि पानी परिरहेको छ भने, म छाता लिन्छु। यदि चिसो छ भने, म ज्याकेट लगाउँछु। यदि म ढिलो छु भने, म नास्ता छोड्छु र बाटोमा कफी लिन्छु।" तपाईंको मस्तिष्कले यो यदि-त्यसपछि तर्क स्वाभाविक रूपमा दैनिक जीवनमा दर्जनौं पटक अनुसरण गर्छ!  
 
-यसले प्रोग्रामहरूलाई बोरिंग, पूर्वानुमानित स्क्रिप्टको सट्टा बौद्धिक र जीवित महसुस गराउँछ। तिनीहरूले वास्तवमा स्थिति हेर्न सक्छन्, के भइरहेको छ मूल्यांकन गर्न सक्छन्, र उपयुक्त रूपमा प्रतिक्रिया दिन सक्छन्। यो तपाईंको प्रोग्रामलाई अनुकूलन गर्न र निर्णय गर्न सक्ने मस्तिष्क दिनु जस्तै हो!
+यसले प्रोग्रामहरूलाई बोरिंग, पूर्वानुमानित स्क्रिप्टको सट्टा बौद्धिक र जीवित महसुस गराउँछ। तिनीहरूले वास्तवमा स्थिति हेर्न सक्छन्, के भइरहेको छ मूल्याङ्कन गर्न सक्छन्, र उपयुक्त रूपमा प्रतिक्रिया दिन सक्छन्। यो तपाईंको प्रोग्रामलाई अनुकूलन गर्न र निर्णय गर्न सक्ने मस्तिष्क दिने जस्तै हो!  
 
-यो कति सुन्दर काम गर्छ हेर्न चाहनुहुन्छ? म तपाईंलाई देखाउँछु:
+यो कति सुन्दर काम गर्छ हेर्न चाहनुहुन्छ? म तपाईंलाई देखाउँछु:  
 
 ```javascript
 // Step 1: Basic conditional logic
@@ -275,12 +325,12 @@ if (userAge >= 18) {
   console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
 }
 ```
-
-**यो कोडले के गर्छ:**
-- **जाँच गर्नुहोस्** प्रयोगकर्ताको उमेर मतदान आवश्यकतासँग मेल खान्छ कि
-- **विभिन्न कोड ब्लकहरू कार्यान्वयन गर्नुहोस्** सर्तको परिणामको आधारमा
-- **गणना गर्नुहोस्** र मतदान योग्यतासम्म कति समय बाँकी छ प्रदर्शन गर्नुहोस् यदि १८ भन्दा कम उमेर छ भने
-- **प्रत्येक परिदृश्यको लागि विशिष्ट, उपयोगी प्रतिक्रिया प्रदान गर्नुहोस्**
+  
+**यो कोडले के गर्छ:**  
+- **जाँच गर्नुहोस्** प्रयोगकर्ताको उमेर मतदान आवश्यकतासँग मेल खान्छ कि छैन।  
+- **कार्यान्वयन गर्नुहोस्** विभिन्न कोड ब्लकहरू सर्तको परिणामको आधारमा।  
+- **गणना गर्नुहोस्** र मतदान योग्यता प्राप्त गर्न कति समय बाँकी छ देखाउनुहोस्।  
+- **प्रदान गर्नुहोस्** प्रत्येक परिदृश्यको लागि विशिष्ट, उपयोगी प्रतिक्रिया।  
 
 ```javascript
 // Step 2: Multiple conditions with logical operators
@@ -295,23 +345,23 @@ if (userAge >= 18 && hasPermission) {
   console.log("Sorry, you must be at least 16 years old.");
 }
 ```
-
-**यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
-- **धेरै सर्तहरू संयोजन गर्नुहोस्** `&&` (र) अपरेटर प्रयोग गरेर
-- **सर्तहरूको पदानुक्रम सिर्जना गर्नुहोस्** `else if` प्रयोग गरेर धेरै परिदृश्यहरूको लागि
-- **सबै सम्भावित केसहरू ह्यान्डल गर्नुहोस्** अन्तिम `else` स्टेटमेन्ट प्रयोग गरेर
-- **प्रत्येक फरक परिस्थितिको लागि स्पष्ट, कार्ययोग्य प्रतिक्रिया प्रदान गर्नुहोस्**
+  
+**यहाँ के भइरहेको छ तोड्दै:**  
+- **संयोजन गर्नुहोस्** धेरै सर्तहरू `&&` (र) अपरेटर प्रयोग गरेर।  
+- **सिर्जना गर्नुहोस्** सर्तहरूको पदानुक्रम `else if` प्रयोग गरेर धेरै परिदृश्यहरूको लागि।  
+- **सम्भावित सबै केसहरू ह्यान्डल गर्नुहोस्** अन्तिम `else` स्टेटमेन्टसँग।  
+- **प्रदान गर्नुहोस्** प्रत्येक फरक परिस्थितिको लागि स्पष्ट, कार्ययोग्य प्रतिक्रिया।  
 
 ```javascript
 // Step 3: Concise conditional with ternary operator
 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
 console.log(`Status: ${votingStatus}`);
 ```
-
-**तपाईंले सम्झनुपर्ने कुरा:**
-- **साधारण दुई-विकल्प सर्तहरूको लागि टर्नरी अपरेटर (`? :`) प्रयोग गर्नुहोस्**
-- **पहिले सर्त लेख्नुहोस्**, त्यसपछि `?`, त्यसपछि साँचो परिणाम, त्यसपछि `:`, त्यसपछि झुटो परिणाम
-- **यो ढाँचा लागू गर्नुहोस्** जब तपाईंलाई सर्तहरूको आधारमा मानहरू असाइन गर्न आवश्यक छ
+  
+**तपाईंले सम्झनुपर्ने कुरा:**  
+- **प्रयोग गर्नुहोस्** टर्नरी अपरेटर (`? :`) सरल दुई-विकल्प सर्तहरूको लागि।  
+- **लेख्नुहोस्** सर्त पहिले, त्यसपछि `?`, त्यसपछि सत्य परिणाम, त्यसपछि `:`, त्यसपछि झुटो परिणाम।  
+- **लागू गर्नुहोस्** यो ढाँचा जब तपाईंलाई सर्तहरूको आधारमा मानहरू असाइन गर्न आवश्यक छ।  
 
 ```javascript
 // Step 4: Handling multiple specific cases
@@ -333,100 +383,131 @@ switch (dayOfWeek) {
     console.log("Invalid day of the week");
 }
 ```
+  
+**यो कोडले निम्न कार्यहरू पूरा गर्छ:**  
+- **मिलाउनुहोस्** भेरिएबल मानलाई धेरै विशिष्ट केसहरूसँग।  
+- **समूह बनाउनुहोस्** समान केसहरू (सप्ताहका दिन बनाम सप्ताहन्त)।  
+- **कार्यान्वयन गर्नुहोस्** उपयुक्त कोड ब्लक जब मिलान भेटिन्छ।  
+- **समावेश गर्नुहोस्** अप्रत्याशित मानहरू ह्यान्डल गर्न `default` केस।  
+- **प्रयोग गर्नुहोस्** `break` स्टेटमेन्टहरू कोडलाई अर्को केसमा जारी राख्नबाट रोक्न।  
+
+> 💡 **वास्तविक जीवनको उपमा**: नियन्त्रण प्रवाहलाई संसारकै सबैभन्दा धैर्यवान जीपीएसले तपाईंलाई निर्देशन दिइरहेको जस्तै सोच्नुहोस्। यो भन्न सक्छ "यदि मेन स्ट्रीटमा ट्राफिक छ भने, राजमार्ग लिनुहोस्। यदि राजमार्गमा निर्माण भइरहेको छ भने, रमणीय मार्ग प्रयास गर्नुहोस्।" प्रोग्रामहरूले ठीक त्यस्तै प्रकारको सर्तात्मक तर्क प्रयोग गर्छन् विभिन्न परिस्थितिहरूमा बुद्धिमानीपूर्वक प्रतिक्रिया दिन र सधैं प्रयोगकर्ताहरूलाई उत्तम सम्भावित अनुभव दिन।  
+
+### 🎯 **अवधारणाको जाँच: आधारभूत तत्वहरूको मास्टरी**  
+
+**आउनुहोस् हेर्नुहोस् तपाईं आधारभूत कुराहरूमा कत्तिको राम्रो गर्दै हुनुहुन्छ:**  
+- के तपाईं आफ्नो शब्दमा भेरिएबल र स्टेटमेन्टको बीचको फरक व्याख्या गर्न सक्नुहुन्छ?  
+- तपाईंले यदि-त्यसपछि निर्णय प्रयोग गर्ने वास्तविक जीवनको परिदृश्य सोच्न सक्नुहुन्छ (जस्तै हाम्रो मतदान उदाहरण)?  
+- प्रोग्रामिङ तर्कको बारेमा तपाईंलाई चकित पार्ने एउटा कुरा के हो?  
+
+**छिटो आत्मविश्वास बूस्टर:**  
+```mermaid
+flowchart LR
+    A["📝 Statements<br/>(Instructions)"] --> B["📦 Variables<br/>(Storage)"] --> C["🔀 Control Flow<br/>(Decisions)"] --> D["🎉 Working Program!"]
+    
+    style A fill:#ffeb3b
+    style B fill:#4caf50
+    style C fill:#2196f3
+    style D fill:#ff4081
+```
+  
+✅ **अर्को के आउँदैछ**: हामी यी अवधारणाहरूमा अझ गहिरो डुब्न जाँदैछौं र यो अविश्वसनीय यात्रामा सँगै अगाडि बढ्दै जाँदा पूर्ण रूपमा रमाइलो गर्नेछौं! अहिले, तपाईंले अगाडि रहेका सबै अद्भुत सम्भावनाहरूको बारेमा उत्साहित महसुस गर्न ध्यान दिनुहोस्। विशिष्ट सीपहरू र प्रविधिहरू अभ्यास गर्दा स्वाभाविक रूपमा अडिनेछन् – म वाचा गर्छु यो तपाईंले अपेक्षा गर्नुभएको भन्दा धेरै रमाइलो हुनेछ!  
+
+## व्यापारका उपकरणहरू  
+
+ठिक छ, यो इमानदारीपूर्वक जहाँ म यति उत्साहित हुन्छु कि म आफूलाई सम्हाल्न सक्दिन! 🚀 हामी ती अविश्वसनीय उपकरणहरूको बारेमा कुरा गर्न जाँदैछौं जसले तपाईंलाई डिजिटल अन्तरिक्ष यानको चाबी दिइएको जस्तो महसुस गराउनेछ।  
+
+तपाईंलाई थाहा छ कसरी शेफसँग ती पूर्ण रूपमा सन्तुलित चक्कुहरू हुन्छन् जसले उनीहरूको हातको विस्तार जस्तो महसुस गराउँछ? वा कसरी संगीतकारसँग त्यो एक गिटार हुन्छ जसले उनीहरूले छोएपछि गाउन जस्तो देखिन्छ? ठिक छ, विकासकर्ताहरूको आफ्नै संस्करणका यी जादुई उपकरणहरू छन्, र यहाँ के तपाईंलाई पूर्ण रूपमा चकित पार्नेछ – ती मध्ये अधिकांश पूर्ण रूपमा निःशुल्क छन्!  
+
+म तपाईंलाई यी उपकरणहरू साझा गर्न सोच्दै मेरो कुर्सीमा उफ्रिरहेको छु किनभने तिनीहरूले हामीले सफ्टवेयर निर्माण गर्ने तरिकालाई पूर्ण रूपमा क्रान्तिकारी बनाएका छन्। हामी एआई-संचालित कोडिङ सहायकहरूको बारेमा कुरा गर्दैछौं जसले तपाईंको कोड लेख्न मद्दत गर्न सक्छ (म मजाक गरिरहेको छैन!), क्लाउड वातावरण जहाँ तपाईं शाब्दिक रूपमा वाइफाइ भएको कुनै पनि ठाउँबाट सम्पूर्ण एप्लिकेसनहरू निर्माण गर्न सक्नुहुन्छ, र डिबगिङ उपकरणहरू यति परिष्कृत छन् कि तिनीहरू तपाईंको प्रोग्रामहरूको लागि एक्स-रे दृष्टि भएको जस्तो छन्।  
+
+र यहाँ भाग छ जसले अझै मलाई चिसो दिन्छ: यी "सुरुवात उपकरणहरू" होइनन् जुन तपाईंले बढ्दै जानुहुन्छ। यी Google, Netflix, र तपाईंले मन पराउने त्यो इन्डी एप स्टुडियोका विकासकर्ताहरूले अहिलेको क्षणमा प्रयोग गरिरहेका ठ्याक्कै समान व्यावसायिक-ग्रेड उपकरणहरू हुन्। तिनीहरू प्रयोग गर्दा तपाईंलाई यति धेरै प्रो महसुस हुनेछ!  
+
+```mermaid
+graph TD
+    A["💡 Your Idea"] --> B["⌨️ Code Editor<br/>(VS Code)"] 
+    B --> C["🌐 Browser DevTools<br/>(Testing & Debugging)"]
+    C --> D["⚡ Command Line<br/>(Automation & Tools)"]
+    D --> E["📚 Documentation<br/>(Learning & Reference)"]
+    E --> F["🚀 Amazing Web App!"]
+    
+    B -.-> G["🤖 AI Assistant<br/>(GitHub Copilot)"]
+    C -.-> H["📱 Device Testing<br/>(Responsive Design)"]
+    D -.-> I["📦 Package Managers<br/>(npm, yarn)"]
+    E -.-> J["👥 Community<br/>(Stack Overflow)"]
+    
+    style A fill:#fff59d
+    style F fill:#c8e6c9
+    style G fill:#e1f5fe
+    style H fill:#f3e5f5
+    style I fill:#ffccbc
+    style J fill:#e8eaf6
+```
+  
+### कोड सम्पादकहरू र IDEs: तपाईंको नयाँ डिजिटल सबैभन्दा राम्रो साथीहरू  
 
-**यो कोडले निम्न कार्यहरू पूरा गर्छ:**
-- **भेरिएबल मानलाई धेरै विशिष्ट केसहरूसँग मिलाउनुहोस्**
-- **सम्बन्धित केसहरू एकसाथ समूह गर्नुहोस्** (सप्ताहका दिन बनाम सप्ताहन्त)
-- **मिलान भेटिएपछि उपयुक्त कोड ब्लक कार्यान्वयन गर्नुहोस्**
-- **अनपेक्षित मानहरू ह्यान्डल गर्न `default` केस समावेश गर्नुहोस्**
-- **कोडलाई अर्को केसमा जानबाट रोक्न `break` स्टेटमेन्टहरू प्रयोग गर्नुहोस्**
-
-> 💡 **वास्तविक जीवनको उपमा**: नियन्त्रण प्रवाहलाई संसारकै सबैभन्दा धैर्यवान जीपीएसले तपाईंलाई निर्देशन दिइरहेको जस्तै सोच्नुहोस्। यसले भन्न सक्छ "यदि मेन स्ट्रीटमा ट्राफिक छ भने, राजमार्ग लिनुहोस्। यदि राजमार्गमा निर्माण भइरहेको छ भने, रमणीय मार्ग प्रयास गर्नुहोस्।" प्रोग्रामहरूले ठीक त्यस्तै प्रकारको सर्तात्मक तर्क प्रयोग गर्छन् विभिन्न परिस्थितिहरूमा बुद्धिमानीपूर्वक प्रतिक्रिया दिन र सधैं प्रयोगकर्ताहरूलाई उत्तम सम्भावित अनुभव दिन।
-
-✅ **अर्को के आउँदैछ**: हामी यी अवधारणाहरूमा अझ गहिरो डुबुल्की मार्दै यो अविश्वसनीय यात्रालाई सँगै जारी राख्न एकदम रमाइलो गर्नेछौं! अहिले, तपाईंले अगाडि रहेका सबै अद्भुत सम्भावनाहरूको बारेमा उत्साह महसुस गर्नमा ध्यान दिनुहोस्। विशिष्ट सीप र प्रविधिहरू अभ्यास गर्दा स्वाभाविक रूपमा अडिनेछन् – म वाचा गर्छु यो तपाईंले अपेक्षा गर्नुभएको भन्दा धेरै रमाइलो हुनेछ!
-
-
-## व्यापारका उपकरणहरू
-
-ठिक छ, यो इमानदारीपूर्वक त्यस्तो ठाउँ हो जहाँ म यति उत्साहित हुन्छु कि म आफूलाई रोक्न सक्दिन! 🚀 हामी ती अविश्वसनीय उपकरणहरूको बारेमा कुरा गर्न जाँदैछौं जसले तपाईंलाई डिजिटल स्पेसशिपको चाबी दिइएको जस्तो महसुस गराउनेछ।
-
-तपाईंलाई थाहा छ कसरी शेफसँग ती पूर्ण रूपमा सन्तुलित चक्कुहरू हुन्छन् जसले उनीहरूको हातको विस्तार जस्तो महसुस गराउँछ? वा कसरी संगीतकारसँग त्यो एक गिटार हुन्छ जसले उनीहरूले छोएपछि गाउन जस्तो देखिन्छ? ठिक छ, डेभलपरहरूसँग यी जादुई उपकरणहरूको आफ्नै संस्करण छ, र यहाँ के कुरा तपाईंलाई पूर्ण रूपमा चकित पार्नेछ – तिनीहरू मध्ये अधिकांश पूर्ण रूपमा निःशुल्क छन्!
-
-म तपाईंलाई यी उपकरणहरू साझा गर्न सोच्दै मेरो कुर्सीमा उफ्रिरहेको छु किनभने तिनीहरूले हामीले सफ्टवेयर निर्माण गर्ने तरिकालाई पूर्ण रूपमा क्रान्तिकारी बनाएका छन्। हामी एआई-संचालित कोडिङ सहायकहरूको बारेमा कुरा गर्दैछौं जसले तपाईंको कोड लेख्न मद्दत गर्न सक्छ (म मजाक गरिरहेको छैन!), क्लाउड वातावरणहरू जहाँ तपाईंले वाइ-फाइ भएको कुनै पनि ठाउँबाट सम्पूर्ण एप्लिकेसनहरू निर्माण गर्न सक्नुहुन्छ, र डिबगिङ उपकरणहरू यति परिष्कृत छन् कि तिनीहरू तपाईंको प्रोग्रामहरूको लागि एक्स-रे दृष्टि भएको जस्तो छन्।
-
-र यहाँ भाग हो जसले अझै मलाई चिसो दिन्छ: यी "सुरुवात उपकरणहरू" होइनन् जुन तपाईंले बढ्दै जानुहुन्छ। यी Google, Netflix, र तपाईंले मन पराउने इन्डी एप स्टुडियोका डेभलपरहरूले अहिलेको क्षणमा प्रयोग गरिरहेका ठ्याक्कै समान व्यावसायिक-ग्रेड उपकरणहरू हुन्। तिनीहरू प्रयोग गर्दा तपाईंलाई यति धेरै प्रो महसुस हुनेछ!
-
-
-### कोड एडिटरहरू र IDEs: तपाईंको नयाँ डिजिटल साथीहरू
-
-आउनुहोस् कोड एडिटरहरूको बारेमा कुरा गरौं – यी गम्भीर रूपमा तपाईंको नयाँ मनपर्ने ठाउँहरू बन्नेछन्! तिनीहरूलाई तपाईंको व्यक्तिगत कोडिङ अभयारण्य जस्तै सोच्नुहोस् जहाँ तपाईं आफ्नो डिजिटल सिर्जनाहरू निर्माण र परिष्कृत गर्न अधिकांश समय बिताउनुहुनेछ।
-
-तर यहाँ के कुरा आधुनिक एडिटरहरूको बारेमा पूर्ण रूपमा जादुई छ: तिनीहरू केवल फ्यान्सी टेक्स्ट एडिटरहरू मात्र होइनन्। तिनीहरू जस्तै छन् कि तपाईंको छेउमा २४/७ बस्ने सबैभन्दा प्रतिभाशाली, सहयोगी कोडिङ मेन्टर। तिनीहरूले तपाईंको टाइपोहरू तपाईंले नोटिस गर्नु अघि नै समात्छन्, सुधारहरूको सुझाव दिन्छन् जसले तपाईंलाई प्रतिभाशाली जस्तो देखाउँछ, तपाईंलाई प्रत्येक कोडको टुक्राले के गर्छ भन्ने कुरा बुझ्न मद्दत गर्छन्, र तिनीहरू मध्ये केहीले तपाईंले टाइप गर्न लागेको कुरा भविष्यवाणी गर्न सक्छन् र तपाईंको विचारहरू समाप्त गर्न प्रस्ताव गर्न सक्छन्!
+आउनुहोस् कोड सम्पादकहरूको बारेमा कुरा गरौं – यी गम्भीर रूपमा तपाईंको नयाँ मनपर्ने ठाउँहरू बन्न जाँदैछन्! तिनीहरूलाई तपाईंको व्यक्तिगत कोडिङ अभयारण्य जस्तै सोच्नुहोस् जहाँ तपाईं आफ्नो डिजिटल सिर्जनाहरू निर्माण र परिष्कृत गर्न अधिकांश समय बिताउनुहुनेछ।  
 
-मलाई याद छ जब मैले पहिलो पटक अटो-कम्प्लिसन पत्ता लगाएँ – मलाई साँच्चै लाग्यो कि म भविष्यमा बाँचिरहेको छु। तपाईंले केही टाइप गर्न सुरु गर्नुहुन्छ, र तपाईंको एडिटर भन्छ, "हे, तपाईंले चाहिएको ठीक यही फङ्सनको बारेमा सोच्दै हुनुहुन्थ्यो?" यो जस्तै छ कि तपाईंको कोडिङ साथीको रूपमा मन पढ्ने व्यक्ति छ!
+तर यहाँ के पूर्ण रूपमा जादुई छ आधुनिक सम्पादकहरूको बारेमा: तिनीहरू केवल फ्यान्सी पाठ सम्पादकहरू मात्र होइनन्। तिनीहरू जस्तै छन् कि तपाईंको छेउमा २४/७ बस्ने सबैभन्दा प्रतिभाशाली, सहयोगी कोडिङ गुरु। तिनीहरूले तपाईंको टाइपोहरू तपाईंले नोटिस गर्नु अघि नै समात्छन्, सुधारहरूको सुझाव दिन्छन् जसले तपाईंलाई प्रतिभाशाली जस्तो देखाउँछ, तपाईंलाई प्रत्येक कोडको टुक्राले के गर्छ बुझ्न मद्दत गर्छ, र तिनीहरू मध्ये केहीले तपाईंले टाइप गर्न लागेको कुरा भविष्यवाणी गर्न सक्छन् र तपाईंको विचारहरू समाप्त गर्न प्रस्ताव गर्न सक्छन्!  
 
-**यी एडिटरहरूलाई अविश्वसनीय बनाउने के हो?**
+मलाई याद छ जब मैले पहिलो पटक अटो-कम्प्लिसन पत्ता लगाएँ – म शाब्दिक रूपमा भविष्यमा बाँचिरहेको जस्तो महसुस गरें। तपाईंले केही टाइप गर्न सुरु गर्नुहुन्छ, र तपाईंको सम्पादकले भन्छ, "हेर्नुहोस्, के तपाईंलाई यो फङ्सन चाहिएको थियो जसले तपाईंलाई चाहिएको कुरा ठीक गर्छ?" यो तपाईंको कोडिङ साथीको रूपमा मन पढ्ने जस्तो छ!  
 
-आधुनिक कोड एडिटरहरूले तपाईंको उत्पादकता बढाउन डिजाइन गरिएको प्रभावशाली सुविधाहरूको श्रृंखला प्रदान गर्छन्:
+**यी सम्पादकहरूलाई यति अविश्वसनीय बनाउने के हो?**  
 
-| सुविधा | यसले के गर्छ | यसले किन मद्दत गर्छ |
-|---------|--------------|--------------|
-| **सिन्ट्याक्स हाइलाइटिङ** | तपाईंको कोडका विभिन्न भागहरूलाई रंग दिन्छ | कोड पढ्न र त्रुटि पत्ता लगाउन सजिलो बनाउँछ |
-| **अटो-कम्प्लिसन** | तपाईंले टाइप गर्दा कोडको सुझाव दिन्छ | कोडिङलाई छिटो बनाउँछ र टाइपोहरू घटाउँछ |
-| **डिबगिङ उपकरणहरू** | त्रुटि पत्ता लगाउन र सुधार गर्न मद्दत गर्छ | समस्या समाधान गर्ने समय बचाउँछ |
-| **एक्सटेन्सनहरू** | विशेष सुविधाहरू थप्नुहोस् | कुनै पनि प्रविधिका लागि तपाईंको एडिटरलाई अनुकूलित गर्नुहोस् |
-| **एआई सहायकहरू** | कोड र व्याख्याको सुझाव दिन्छ | सिकाइ र उत्पादकता बढाउँछ |
+आधुनिक कोड सम्पादकहरूले तपाईंको उत्पादकता बढाउन डिजाइन गरिएको प्रभावशाली सुविधाहरूको श्रृंखला प्रस्ताव गर्छन्:  
 
-> 🎥 **भिडियो स्रोत**: यी उपकरणहरूलाई काममा देख्न चाहनुहुन्छ? [Tools of the Trade भिडियो](https://youtube.com/watch?v=69WJeXGBdxg) हेर्नुहोस् विस्तृत अवलोकनको लागि।
+| सुविधा | यसले के गर्छ | यसले किन मद्दत गर्छ |  
+|---------|--------------|--------------|  
+| **सिन्ट्याक्स हाइलाइटिङ** | तपाईंको कोडका विभिन्न भागहरूलाई रंग दिन्छ | कोड पढ्न र त्रुटि पत्ता लगाउन सजिलो बनाउँछ |  
+| **अटो-कम्प्लिसन** | तपाईंले टाइप गर्दा कोडको सुझाव दिन्छ | कोडिङ गति बढाउँछ र टाइपोहरू कम गर्छ |  
+| **डिबगिङ उपकरणहरू** | त्रुटि पत्ता लगाउन र सुधार गर्न मद्दत गर्छ | समस्या समाधान गर्ने समय बचाउँछ |  
+| **एक्सटेन्सनहरू** | विशेष सुविधाहरू थप्छ | कुनै पनि प्रविधिका लागि तपाईंको सम्पादकलाई अनुकूलित गर्नुहोस् |  
+| **एआई सहायकहरू** | कोड र व्याख्याको सुझाव दिन्छ | सिकाइ र उत्पादकता बढाउँछ |  
 
-#### वेब विकासका लागि सिफारिस गरिएका एडिटरहरू
+> 🎥 **भिडियो स्रोत**: यी उपकरणहरूलाई काममा देख्न चाहनुहुन्छ? [टूल्स अफ द ट्रेड भिडियो](https://youtube.com/watch?v=69WJeXGBdxg) हेर्नुहोस् विस्तृत अवलोकनको लागि।  
 
-**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (निःशुल्क)
-- वेब डेभलपरहरू बीच सबैभन्दा लोकप्रिय
-- उत्कृष्ट एक्सटेन्सन इकोसिस्टम
-- बिल्ट-इन टर्मिनल र Git एकीकरण
-- **आवश्यक एक्सटेन्सनहरू**:
-  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - एआई-संचालित कोड सुझावहरू
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - वास्तविक समय सहयोग
-  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - स्वचालित कोड फर्म्याटिङ
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - तपाईंको कोडमा टाइपोहरू समात्नुहोस्
+#### वेब विकासका लागि सिफारिस गरिएका सम्पादकहरू  
 
-**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (भुक्तान गरिएको, विद्यार्थीहरूका लागि निःशुल्क)
-- उन्नत डिबगिङ र परीक्षण उपकरणहरू
-- बौद्धिक कोड कम्प्लिसन
-- बिल्ट-इन संस्करण नियन्त्रण
+**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (निःशुल्क)  
+- वेब विकासकर्ताहरू बीच सबैभन्दा लोकप्रिय।  
+- उत्कृष्ट एक्सटेन्सन इकोसिस्टम।  
+- बिल्ट-इन टर्मिनल र Git एकीकरण।  
+- **आवश्यक एक्सटेन्सनहरू**:  
+  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - एआई-संचालित कोड सुझावहरू।  
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - वास्तविक
+पहिलो पटक कसैले मलाई ब्राउजरको DevTools देखाएको थियो, म तीन घण्टा जति क्लिक गर्दै "पर्खिनुहोस्, यसले यो पनि गर्न सक्छ?!" भन्दै बिताएँ। तपाईं कुनै पनि वेबसाइटलाई वास्तविक समयमा सम्पादन गर्न सक्नुहुन्छ, सबै कुरा कति छिटो लोड हुन्छ भनेर हेर्न सक्नुहुन्छ, विभिन्न उपकरणहरूमा तपाईंको साइट कस्तो देखिन्छ भनेर परीक्षण गर्न सक्नुहुन्छ, र JavaScript लाई पूर्ण प्रो जस्तै डिबग गर्न सक्नुहुन्छ। यो साँच्चै अचम्मको कुरा हो!
 
-**क्लाउड-आधारित IDEs** (विभिन्न मूल्य निर्धारण)
-- [GitHub Codespaces](https://github.com/features/codespaces) - तपाईंको ब्राउजरमा पूर्ण VS Code
-- [Replit](https://replit.com/) - सिक्न र कोड साझा गर्न उत्कृष्ट
-- [StackBlitz](https://stackblitz.com/) - तत्काल, पूर्ण-स्ट्याक वेब विकास
+**किन ब्राउजरहरू तपाईंको गोप्य हतियार हुन्:**
 
-> 💡 **सुरुवात सुझाव**: Visual Studio Code बाट सुरु गर्नुहोस् – यो निःशुल्क छ, उद्योगमा व्यापक रूपमा प्रयोग गरिन्छ, र सहायक ट्यूटोरियलहरू र एक्सटेन्सनहरू सिर्जना गर्ने ठूलो समुदाय छ।
+जब तपाईं वेबसाइट वा वेब एप्लिकेसन बनाउनुहुन्छ, तपाईंलाई यो वास्तविक संसारमा कस्तो देखिन्छ र कस्तो व्यवहार गर्छ भनेर हेर्न आवश्यक छ। ब्राउजरहरूले तपाईंको काम मात्र देखाउँदैनन्, तर प्रदर्शन, पहुँचयोग्यता, र सम्भावित समस्याहरूको विस्तृत प्रतिक्रिया पनि प्रदान गर्छन्।
 
+#### ब्राउजर डेभलपर टूल्स (DevTools)
 
-### वेब ब्राउजरहरू: तपाईंको गोप्य विकास प्रयोगशाला
+आधुनिक ब्राउजरहरूले व्यापक विकास उपकरणहरू समावेश गर्छन्:
 
-ठिक छ, तपाईंको दिमाग पूर्ण रूपमा चकित पार्न तयार हुनुहोस्! तपाईंलाई थाहा
-| **कन्सोल** | त्रुटि सन्देशहरू हेर्नुहोस् र जाभास्क्रिप्ट परीक्षण गर्नुहोस् | समस्याहरू डिबग गर्नुहोस् र कोडमा प्रयोग गर्नुहोस् |
-| **नेटवर्क मोनिटर** | स्रोतहरू कसरी लोड हुन्छन् ट्र्याक गर्नुहोस् | प्रदर्शन र लोड समयलाई अनुकूलित गर्नुहोस् |
-| **एक्सेसिबिलिटी चेकर** | समावेशी डिजाइनको परीक्षण गर्नुहोस् | सुनिश्चित गर्नुहोस् कि तपाईंको साइट सबै प्रयोगकर्ताहरूका लागि काम गर्छ |
-| **डिभाइस सिमुलेटर** | विभिन्न स्क्रिन साइजहरूमा पूर्वावलोकन गर्नुहोस् | धेरै उपकरणहरू बिना उत्तरदायी डिजाइन परीक्षण गर्नुहोस् |
+| टूल श्रेणी | यसले के गर्छ | उदाहरण प्रयोग केस |
+|------------|--------------|--------------------|
+| **Element Inspector** | HTML/CSS लाई वास्तविक समयमा हेर्न र सम्पादन गर्न | स्टाइल समायोजन गरेर तत्काल परिणाम हेर्नुहोस् |
+| **Console** | त्रुटि सन्देशहरू हेर्नुहोस् र JavaScript परीक्षण गर्नुहोस् | समस्याहरू डिबग गर्नुहोस् र कोडमा प्रयोग गर्नुहोस् |
+| **Network Monitor** | स्रोतहरू कसरी लोड हुन्छन् ट्र्याक गर्नुहोस् | प्रदर्शन र लोड समय अनुकूलित गर्नुहोस् |
+| **Accessibility Checker** | समावेशी डिजाइनको लागि परीक्षण गर्नुहोस् | सुनिश्चित गर्नुहोस् कि तपाईंको साइट सबै प्रयोगकर्ताहरूको लागि काम गर्छ |
+| **Device Simulator** | विभिन्न स्क्रिन साइजहरूमा पूर्वावलोकन गर्नुहोस् | धेरै उपकरणहरू बिना उत्तरदायी डिजाइन परीक्षण गर्नुहोस् |
 
-#### विकासका लागि सिफारिस गरिएका ब्राउजरहरू
+#### विकासको लागि सिफारिस गरिएका ब्राउजरहरू
 
-- **[क्रोम](https://developers.google.com/web/tools/chrome-devtools/)** - उद्योग-मानक डेभटूल्स विस्तृत दस्तावेजसहित
-- **[फायरफक्स](https://developer.mozilla.org/docs/Tools)** - उत्कृष्ट CSS ग्रिड र एक्सेसिबिलिटी उपकरणहरू
-- **[एज](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - क्रोमियममा आधारित माइक्रोसफ्टको विकास स्रोतहरूसहित
+- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - विस्तृत दस्तावेजसहित उद्योग-मानक DevTools
+- **[Firefox](https://developer.mozilla.org/docs/Tools)** - उत्कृष्ट CSS Grid र पहुँचयोग्यता उपकरणहरू
+- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium मा आधारित Microsoft को विकास स्रोतहरूसँग
 
-> ⚠️ **महत्वपूर्ण परीक्षण सुझाव**: सधैं आफ्नो वेबसाइटहरू विभिन्न ब्राउजरहरूमा परीक्षण गर्नुहोस्! क्रोममा राम्रोसँग काम गर्ने कुरा सफारी वा फायरफक्समा फरक देखिन सक्छ। व्यावसायिक विकासकर्ताहरूले सबै प्रमुख ब्राउजरहरूमा परीक्षण गर्छन् ताकि प्रयोगकर्ताको अनुभव समान होस्।
+> ⚠️ **महत्वपूर्ण परीक्षण सुझाव**: तपाईंको वेबसाइटहरू धेरै ब्राउजरहरूमा सधैं परीक्षण गर्नुहोस्! Chrome मा पूर्ण रूपमा काम गर्ने कुरा Safari वा Firefox मा फरक देखिन सक्छ। व्यावसायिक विकासकर्ताहरूले सबै प्रमुख ब्राउजरहरूमा परीक्षण गर्छन् ताकि प्रयोगकर्ताको अनुभव सुसंगत होस्।
 
-### कमाण्ड लाइन उपकरणहरू: विकासकर्ताको सुपरपावरको प्रवेशद्वार
+### कमाण्ड लाइन टूल्स: विकासकर्ताको सुपरपावरको प्रवेशद्वार
 
-ठिक छ, कमाण्ड लाइनको बारेमा इमान्दार क्षणको कुरा गरौं, किनकि म चाहन्छु तपाईंले यो कुरा कसैबाट सुन्नुहोस् जसले यो कुरा वास्तवमै बुझ्छ। जब मैले पहिलो पटक यो देखेँ – केवल यो डर लाग्दो कालो स्क्रिन झिलमिल गर्दै – मैले सचमुच सोचेँ, "होइन, बिल्कुल होइन! यो १९८० को ह्याकर फिल्मबाट केही जस्तो देखिन्छ, र म यसका लागि पर्याप्त स्मार्ट छैन!" 😅
+ठिक छ, कमाण्ड लाइनको बारेमा यहाँ एकदम इमानदार क्षण राखौं, किनकि म चाहन्छु तपाईंले यो कुरा कसैबाट सुन्नुहोस् जसले यो वास्तवमै बुझ्छ। जब मैले पहिलो पटक देखेँ – बस यो डर लाग्दो कालो स्क्रिन झिल्किरहेको पाठसँग – मैले शाब्दिक रूपमा सोचेँ, "होइन, बिल्कुल होइन! यो 1980 को ह्याकर फिल्मबाट केही जस्तो देखिन्छ, र म यसका लागि पर्याप्त स्मार्ट छैन!" 😅
 
-तर यहाँ के कुरा म चाहन्छु कसैले मलाई त्यो समयमा भनेको होस्, र म अहिले तपाईंलाई बताउँदैछु: कमाण्ड लाइन डर लाग्दो छैन – यो वास्तवमा तपाईंको कम्प्युटरसँग प्रत्यक्ष कुराकानी जस्तै हो। यसलाई सोच्नुहोस् जस्तै तपाईंको मनपर्ने स्थानीय रेस्टुरेन्टमा जानु जहाँ शेफले तपाईंलाई के मनपर्छ भनेर थाहा छ र तपाईंले "मलाई केही अद्भुत चिजले आश्चर्यचकित गराउनुहोस्" भनेर भनेपछि केही परिपूर्ण तयार गर्न सक्छ।
+तर यहाँ के हो जुन म चाहन्छु कसैले मलाई त्यतिबेला भनेको होस्, र म तपाईंलाई अहिले बताउँदैछु: कमाण्ड लाइन डर लाग्दो छैन – यो वास्तवमा तपाईंको कम्प्युटरसँग प्रत्यक्ष कुराकानी जस्तै हो। यसलाई सोच्नुहोस् कि तपाईंको मनपर्ने स्थानीय रेस्टुरेन्टमा जानु जहाँ शेफलाई तपाईंले के मन पराउनुहुन्छ भन्ने थाहा छ र तपाईंले "मलाई केही अद्भुत चिजले आश्चर्यचकित बनाउनुहोस्" भनेको मात्रले केही उत्तम तयार गर्न सक्छ।
 
-कमाण्ड लाइन त्यहाँ हो जहाँ विकासकर्ताहरू जादूगर जस्तै महसुस गर्न जान्छन्। तपाईं केही जादुई शब्दहरू टाइप गर्नुहुन्छ (ठिक छ, ती केवल कमाण्डहरू हुन्, तर तिनीहरू जादुई महसुस हुन्छन्!), इन्टर थिच्नुहोस्, र बूम – तपाईंले सम्पूर्ण परियोजना संरचनाहरू सिर्जना गर्नुभयो, संसारभरका शक्तिशाली उपकरणहरू स्थापना गर्नुभयो, वा तपाईंको एपलाई इन्टरनेटमा लाखौं मानिसहरूका लागि देखाउन तैनात गर्नुभयो। एक पटक तपाईंले त्यो शक्तिको पहिलो स्वाद पाउनुभयो भने, यो वास्तवमा धेरै नशालु हुन्छ!
+कमाण्ड लाइन त्यहाँ हो जहाँ विकासकर्ताहरू पूर्ण जादूगर जस्तो महसुस गर्न जान्छन्। तपाईं केही जादुई शब्दहरू टाइप गर्नुहुन्छ (ठिक छ, तिनीहरू केवल कमाण्डहरू हुन्, तर तिनीहरू जादुई महसुस हुन्छन्!), इन्टर थिच्नुहोस्, र BOOM – तपाईंले सम्पूर्ण परियोजना संरचनाहरू सिर्जना गर्नुभएको छ, संसारभरका शक्तिशाली उपकरणहरू स्थापना गर्नुभएको छ, वा तपाईंको एपलाई इन्टरनेटमा लाखौं मानिसहरूले हेर्नका लागि तैनात गर्नुभएको छ। तपाईंले त्यो शक्ति पहिलो पटक अनुभव गरेपछि, यो वास्तवमै धेरै नशालु हुन्छ!
 
 **किन कमाण्ड लाइन तपाईंको मनपर्ने उपकरण बन्नेछ:**
 
@@ -440,7 +521,7 @@ cd my-awesome-website
 
 **यो कोडले के गर्छ:**
 - **नयाँ डाइरेक्टरी सिर्जना गर्नुहोस्** "my-awesome-website" नामक तपाईंको परियोजनाको लागि
-- **नयाँ सिर्जना गरिएको डाइरेक्टरीमा जानुहोस्** काम सुरु गर्न
+- **नयाँ सिर्जित डाइरेक्टरीमा जानुहोस्** काम सुरु गर्न
 
 ```bash
 # Step 2: Initialize project with package.json
@@ -452,10 +533,10 @@ npm install --save-dev @eslint/js
 ```
 
 **चरणबद्ध रूपमा, यहाँ के भइरहेको छ:**
-- **नोड.जेस परियोजना आरम्भ गर्नुहोस्** डिफल्ट सेटिङ्ससहित `npm init -y` प्रयोग गरेर
-- **वाइट स्थापना गर्नुहोस्** आधुनिक निर्माण उपकरणको रूपमा छिटो विकास र उत्पादन निर्माणहरूको लागि
-- **प्रेटियर थप्नुहोस्** स्वचालित कोड फर्म्याटिङको लागि र ESLint कोड गुणस्तर जाँचको लागि
-- **`--save-dev` फ्ल्याग प्रयोग गर्नुहोस्** यी विकास-मात्र निर्भरता रूपमा चिन्हित गर्न
+- **नयाँ Node.js परियोजना आरम्भ गर्नुहोस्** डिफल्ट सेटिङ्सको साथ `npm init -y` प्रयोग गरेर
+- **Vite स्थापना गर्नुहोस्** आधुनिक निर्माण उपकरणको रूपमा छिटो विकास र उत्पादन निर्माणहरूको लागि
+- **Prettier थप्नुहोस्** स्वचालित कोड फर्म्याटिङको लागि र ESLint कोड गुणस्तर जाँचको लागि
+- **`--save-dev` फ्ल्याग प्रयोग गर्नुहोस्** यीलाई विकास-केवल निर्भरता रूपमा चिन्हित गर्न
 
 ```bash
 # Step 3: Create project structure and files
@@ -466,142 +547,220 @@ echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello Wo
 npx vite
 ```
 
-**माथिको कोडमा, हामीले:**
-- **हाम्रो परियोजना व्यवस्थित गर्यौं** स्रोत कोड र सम्पत्तिहरूका लागि छुट्टाछुट्टै फोल्डरहरू सिर्जना गरेर
+**माथिकोमा, हामीले:**
+- **हाम्रो परियोजना व्यवस्थित गर्यौं** स्रोत कोड र सम्पत्ताहरूको लागि छुट्टै फोल्डरहरू सिर्जना गरेर
 - **मूल HTML फाइल उत्पन्न गर्यौं** उचित दस्तावेज संरचनासहित
-- **वाइट विकास सर्भर सुरु गर्यौं** लाइभ रीलोडिङ र हट मोड्युल प्रतिस्थापनको लागि
+- **Vite विकास सर्भर सुरु गर्यौं** लाइभ रीलोडिङ र हट मोड्युल प्रतिस्थापनको लागि
 
-#### वेब विकासका लागि आवश्यक कमाण्ड लाइन उपकरणहरू
+#### वेब विकासको लागि आवश्यक कमाण्ड लाइन उपकरणहरू
 
 | उपकरण | उद्देश्य | किन तपाईंलाई यसको आवश्यकता छ |
-|------|---------|-----------------|
-| **[Git](https://git-scm.com/)** | संस्करण नियन्त्रण | परिवर्तनहरू ट्र्याक गर्नुहोस्, अरूसँग सहकार्य गर्नुहोस्, आफ्नो काम ब्याकअप गर्नुहोस् |
-| **[Node.js & npm](https://nodejs.org/)** | जाभास्क्रिप्ट रनटाइम र प्याकेज व्यवस्थापन | ब्राउजर बाहिर जाभास्क्रिप्ट चलाउनुहोस्, आधुनिक विकास उपकरणहरू स्थापना गर्नुहोस् |
-| **[Vite](https://vitejs.dev/)** | निर्माण उपकरण र विकास सर्भर | हट मोड्युल प्रतिस्थापनसहित छिटो विकास |
-| **[ESLint](https://eslint.org/)** | कोड गुणस्तर | जाभास्क्रिप्टमा समस्या स्वचालित रूपमा फेला पार्नुहोस् र समाधान गर्नुहोस् |
-| **[Prettier](https://prettier.io/)** | कोड फर्म्याटिङ | आफ्नो कोडलाई निरन्तर रूपमा फर्म्याटेड र पढ्न योग्य राख्नुहोस् |
+|-------|---------|-----------------------------|
+| **[Git](https://git-scm.com/)** | संस्करण नियन्त्रण | परिवर्तनहरू ट्र्याक गर्नुहोस्, अरूसँग सहकार्य गर्नुहोस्, तपाईंको काम ब्याकअप गर्नुहोस् |
+| **[Node.js & npm](https://nodejs.org/)** | JavaScript रनटाइम र प्याकेज व्यवस्थापन | ब्राउजर बाहिर JavaScript चलाउनुहोस्, आधुनिक विकास उपकरणहरू स्थापना गर्नुहोस् |
+| **[Vite](https://vitejs.dev/)** | निर्माण उपकरण र विकास सर्भर | हट मोड्युल प्रतिस्थापनको साथ छिटो विकास |
+| **[ESLint](https://eslint.org/)** | कोड गुणस्तर | तपाईंको JavaScript मा समस्या स्वचालित रूपमा फेला पार्नुहोस् र समाधान गर्नुहोस् |
+| **[Prettier](https://prettier.io/)** | कोड फर्म्याटिङ | तपाईंको कोडलाई सुसंगत रूपमा फर्म्याटेड र पढ्न योग्य राख्नुहोस् |
 
 #### प्लेटफर्म-विशिष्ट विकल्पहरू
 
-**विन्डोज:**
-- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - आधुनिक, सुविधायुक्त टर्मिनल
+**Windows:**
+- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - आधुनिक, सुविधा सम्पन्न टर्मिनल
 - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - शक्तिशाली स्क्रिप्टिङ वातावरण
-- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - परम्परागत विन्डोज कमाण्ड लाइन
+- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - परम्परागत Windows कमाण्ड लाइन
 
-**म्याकओएस:**
+**macOS:**
 - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - बिल्ट-इन टर्मिनल एप्लिकेसन
 - **[iTerm2](https://iterm2.com/)** - उन्नत सुविधाहरू भएको टर्मिनल
 
-**लिनक्स:**
-- **[Bash](https://www.gnu.org/software/bash/)** 💻 - मानक लिनक्स शेल
+**Linux:**
+- **[Bash](https://www.gnu.org/software/bash/)** 💻 - मानक Linux शेल
 - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - उन्नत टर्मिनल इम्युलेटर
 
 > 💻 = अपरेटिङ सिस्टममा पूर्व-स्थापित
 
-> 🎯 **अध्ययन मार्ग**: `cd` (डाइरेक्टरी परिवर्तन गर्नुहोस्), `ls` वा `dir` (फाइलहरूको सूची हेर्नुहोस्), र `mkdir` (फोल्डर सिर्जना गर्नुहोस्) जस्ता आधारभूत कमाण्डहरूबाट सुरु गर्नुहोस्। आधुनिक वर्कफ्लो कमाण्डहरू जस्तै `npm install`, `git status`, र `code .` (VS कोडमा हालको डाइरेक्टरी खोल्नुहोस्) अभ्यास गर्नुहोस्। तपाईंलाई सहज महसुस हुने बित्तिकै, तपाईं स्वाभाविक रूपमा थप उन्नत कमाण्डहरू र स्वचालन प्रविधिहरू सिक्नुहुनेछ।
+> 🎯 **अध्ययन मार्ग**: `cd` (डाइरेक्टरी परिवर्तन गर्नुहोस्), `ls` वा `dir` (फाइलहरूको सूची), र `mkdir` (फोल्डर सिर्जना गर्नुहोस्) जस्ता आधारभूत कमाण्डहरूबाट सुरु गर्नुहोस्। आधुनिक वर्कफ्लो कमाण्डहरू जस्तै `npm install`, `git status`, र `code .` (VS Code मा हालको डाइरेक्टरी खोल्छ) अभ्यास गर्नुहोस्। तपाईं अधिक सहज हुँदै जानुहुन्छ, तपाईं स्वाभाविक रूपमा अधिक उन्नत कमाण्डहरू र स्वचालन प्रविधिहरू सिक्नुहुनेछ।
 
 ### दस्तावेज: तपाईंको सधैं उपलब्ध सिकाइ गुरु
 
-ठिक छ, म एउटा सानो रहस्य साझा गर्न चाहन्छु जसले तपाईंलाई नयाँ सिक्न सहज महसुस गराउनेछ: सबैभन्दा अनुभवी विकासकर्ताहरूले आफ्नो समयको ठूलो हिस्सा दस्तावेज पढ्नमा बिताउँछन्। र त्यो किनभने उनीहरूलाई थाहा छैन भन्ने होइन – यो वास्तवमा बुद्धिमताको संकेत हो!
-
-दस्तावेजलाई २४/७ उपलब्ध विश्वको सबैभन्दा धैर्यवान, जानकार शिक्षकहरूको पहुँच भएको जस्तो सोच्नुहोस्। रातको २ बजे समस्यामा अड्किनुभयो? दस्तावेज त्यहाँ छ, न्यानो भर्चुअल अँगालो र तपाईंलाई चाहिएको उत्तरसहित। कुनै नयाँ सुविधाको बारेमा जान्न चाहनुहुन्छ जुन सबैले कुरा गरिरहेका छन्? दस्तावेजले तपाईंलाई चरण-दर-चरण उदाहरणहरूसहित समर्थन गर्दछ। केहि किन काम गर्छ भनेर बुझ्न चाहनुहुन्छ? तपाईंले अनुमान गर्नुभयो – दस्तावेजले यसलाई अन्ततः क्लिक गराउने तरिकामा व्याख्या गर्न तयार छ!
-
-**यहाँ वास्तविक जादू कहाँ हुन्छ:**
+ठिक छ, म एउटा सानो रहस्य साझा गर्न चाहन्छु जसले तपाईंलाई नयाँ सिक्नेमा धेरै राम्रो महसुस गराउनेछ: सबैभन्दा अनुभवी विकासकर्ताहरूले आफ्नो समयको ठूलो हिस्सा दस्तावेज पढ्नमा बिताउँछन्। र त्यो किनभने उनीहरूलाई थाहा छैन भन्ने होइन – यो वास्तवमा बुद्धिमताको संकेत हो!
 
-व्यावसायिक विकासकर्ताहरूले आफ्नो समयको महत्वपूर्ण भाग दस्तावेज पढ्नमा बिताउँछन् – किनभने वेब विकासको परिदृश्य यति छिटो विकसित हुन्छ कि अद्यावधिक रहन निरन्तर सिकाइ आवश्यक छ। उत्कृष्ट दस्तावेजले तपाईंलाई केहि प्रयोग गर्ने मात्र होइन, तर किन र कहिले प्रयोग गर्ने भन्ने कुरा बुझ्न मद्दत गर्दछ।
+दस्तावेजलाई २४/७ उपलब्ध विश्वको सबैभन्दा धैर्यवान, जानकार शिक्षकहरूको पहुँच भएको जस्तो सोच्नुहोस्। रातको २ बजे समस्यामा अड्किनु भयो? दस्तावेज त्यहाँ छ न्यानो भर्चुअल अँगालो र तपाईंलाई चाहिएको उत्तरको साथ। सबैले कुरा गरिरहेको नयाँ सुविधाको बारेमा सिक्न चाहनुहुन्छ? दस्तावेजले तपाईंलाई चरणबद्ध उदाहरणहरूको साथ समर्थन गरेको छ। केहि किन काम गर्छ भनेर बुझ्न प्रयास गर्दै हुनुहुन्छ? तपाईंले अनुमान गर्नुभयो – दस्तावेजले यसलाई अन्ततः क्लिक गराउने तरिकामा व्याख्या गर्न तयार छ!
 
 #### आवश्यक दस्तावेज स्रोतहरू
 
 **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
 - वेब प्रविधि दस्तावेजको सुनौलो मानक
-- HTML, CSS, र जाभास्क्रिप्टका लागि व्यापक मार्गदर्शकहरू
+- HTML, CSS, र JavaScript का लागि व्यापक मार्गदर्शकहरू
 - ब्राउजर अनुकूलता जानकारी समावेश गर्दछ
 - व्यावहारिक उदाहरणहरू र अन्तरक्रियात्मक डेमोहरू समावेश गर्दछ
 
-**[Web.dev](https://web.dev)** (गुगलद्वारा)
+**[Web.dev](https://web.dev)** (Google द्वारा)
 - आधुनिक वेब विकासका उत्कृष्ट अभ्यासहरू
 - प्रदर्शन अनुकूलन मार्गदर्शकहरू
 - पहुँचयोग्यता र समावेशी डिजाइन सिद्धान्तहरू
 - वास्तविक परियोजनाहरूबाट केस अध्ययनहरू
 
 **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
-- एज ब्राउजर विकास स्रोतहरू
+- Edge ब्राउजर विकास स्रोतहरू
 - प्रोग्रेसिभ वेब एप मार्गदर्शकहरू
 - क्रस-प्लेटफर्म विकास अन्तर्दृष्टिहरू
 
 **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
 - संरचित सिकाइ पाठ्यक्रमहरू
-- उद्योग विशेषज्ञहरूबाट भिडियो पाठ्यक्रमहरू
-- व्यावहारिक कोडिङ अभ्यासहरू
+- उद्योग विशेषज्ञहरूबाट भिडियो पाठहरू
+- हातमा कोडिङ अभ्यासहरू
+
+> 📚 **अध्ययन रणनीति**: दस्तावेजलाई याद गर्न प्रयास नगर्नुहोस् – यसको सट्टा, यसलाई कुशलतापूर्वक नेभिगेट गर्न सिक्नुहोस्। बारम्बार प्रयोग गरिएका सन्दर्भहरू बुकमार्क गर्नुहोस् र विशिष्ट जानकारी छिटो फेला पार्न खोज कार्यहरू प्रयोग गर्ने अभ्यास गर्नुहोस्।
+
+### 🔧 **टूल मास्टरी चेक: तपाईंलाई के आकर्षित गर्छ?**
+
+**एक क्षण लिनुहोस् विचार गर्न:**
+- कुन उपकरण तपाईंलाई पहिलो पटक प्रयास गर्न सबैभन्दा उत्साहित बनाउँछ? (यहाँ कुनै गलत उत्तर छैन!)
+- के कमाण्ड लाइन अझै डर लाग्दो महसुस हुन्छ, वा तपाईं यसमा जिज्ञासु हुनुहुन्छ?
+- के तपाईं आफ्नो मनपर्ने वेबसाइटहरूको पर्दा पछाडि हेर्न ब्राउजर DevTools प्रयोग गर्ने कल्पना गर्न सक्नुहुन्छ?
+
+```mermaid
+pie title "Developer Time Spent With Tools"
+    "Code Editor" : 40
+    "Browser Testing" : 25
+    "Command Line" : 15
+    "Reading Docs" : 15
+    "Debugging" : 5
+```
 
-> 📚 **अध्ययन रणनीति**: दस्तावेजलाई याद गर्न प्रयास नगर्नुहोस् – यसको सट्टा, यसलाई कुशलतापूर्वक नेभिगेट गर्न सिक्नुहोस्। बारम्बार प्रयोग गरिएका सन्दर्भहरू बुकमार्क गर्नुहोस् र विशिष्ट जानकारी छिटो फेला पार्न खोज कार्यहरू अभ्यास गर्नुहोस्।
+> **मजाको जानकारी**: अधिकांश विकासकर्ताहरू आफ्नो समयको लगभग ४०% आफ्नो कोड सम्पादकमा बिताउँछन्, तर ध्यान दिनुहोस् कि परीक्षण, सिकाइ, र समस्या समाधानमा कति समय जान्छ। प्रोग्रामिङ केवल कोड लेख्ने बारे होइन – यो अनुभवहरू सिर्जना गर्ने बारे हो!
 
-✅ **सोच्नका लागि खाना**: यहाँ सोच्नका लागि रोचक कुरा छ – वेबसाइटहरू निर्माण गर्ने उपकरणहरू (विकास) र तिनीहरूलाई कस्तो देखिन्छ भनेर डिजाइन गर्ने उपकरणहरू (डिजाइन) कसरी फरक हुन सक्छन्? यो सुन्दर घर डिजाइन गर्ने आर्किटेक्ट र वास्तवमा निर्माण गर्ने ठेकेदारको बीचको फरक जस्तै हो। दुवै महत्त्वपूर्ण छन्, तर तिनीहरूलाई फरक टूलबक्स चाहिन्छ! यस्तो सोचले तपाईंलाई वेबसाइटहरू कसरी जीवनमा आउँछन् भन्ने ठूलो चित्र देख्न मद्दत गर्नेछ।
+✅ **विचारको लागि खाना**: यहाँ केहि रोचक सोच्नको लागि छ – वेबसाइटहरू निर्माण गर्नका लागि उपकरणहरू (विकास) वेबसाइटहरू कस्तो देखिन्छ भनेर डिजाइन गर्नका लागि उपकरणहरू (डिजाइन) भन्दा कसरी फरक हुन सक्छन्? यो सुन्दर घर डिजाइन गर्ने आर्किटेक्ट र वास्तवमा यसलाई निर्माण गर्ने ठेकेदारको बीचको फरक जस्तै हो। दुवै महत्त्वपूर्ण छन्, तर तिनीहरूलाई फरक उपकरण बक्सहरू चाहिन्छ! यस प्रकारको सोचले तपाईंलाई वेबसाइटहरू कसरी जीवनमा आउँछन् भन्ने ठूलो चित्र देख्न वास्तवमै मद्दत गर्नेछ।
 
-## GitHub Copilot एजेन्ट चुनौती 🚀
+## GitHub Copilot Agent Challenge 🚀
 
-एजेन्ट मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** आधुनिक कोड सम्पादक वा IDE का सुविधाहरू अन्वेषण गर्नुहोस् र वेब विकासकर्ताको रूपमा तपाईंको वर्कफ्लो सुधार गर्न कसरी मद्दत गर्न सक्छ भनेर प्रदर्शन गर्नुहोस्।
+**विवरण:** आधुनिक कोड सम्पादक वा IDE को सुविधाहरू अन्वेषण गर्नुहोस् र यसले वेब विकासकर्ताको रूपमा तपाईंको वर्कफ्लो सुधार गर्न कसरी सक्छ भनेर प्रदर्शन गर्नुहोस्।
 
-**प्रेरणा:** कुनै कोड सम्पादक वा IDE (जस्तै Visual Studio Code, WebStorm, वा क्लाउड-आधारित IDE) चयन गर्नुहोस्। तीन सुविधाहरू वा एक्सटेन्सनहरूको सूची बनाउनुहोस् जसले तपाईंलाई कोड लेख्न, डिबग गर्न, वा कुशलतापूर्वक मर्मत गर्न मद्दत गर्दछ। प्रत्येकको लागि, यो तपाईंको वर्कफ्लोमा कसरी फाइदा पुर्‍याउँछ भन्ने संक्षिप्त व्याख्या प्रदान गर्नुहोस्।
+**प्रेरणा:** कोड सम्पादक वा IDE (जस्तै Visual Studio Code, WebStorm, वा क्लाउड-आधारित IDE) चयन गर्नुहोस्। तीन सुविधाहरू वा एक्सटेन्सनहरूको सूची बनाउनुहोस् जसले तपाईंलाई कोड लेख्न, डिबग गर्न, वा कुशलतापूर्वक मर्मत गर्न मद्दत गर्छ। प्रत्येकको लागि, यसले तपाईंको वर्कफ्लोमा कसरी फाइदा पुर्‍याउँछ भन्ने संक्षिप्त व्याख्या प्रदान गर्नुहोस्।
 
 ---
 
 ## 🚀 चुनौती
 
-**ठिक छ, जासूस, तपाईं आफ्नो पहिलो केसको लागि तयार हुनुहुन्छ?**
+**ठिक छ, जासूस, तपाईंको पहिलो केसको लागि तयार?**
 
-अब तपाईंले यो अद्भुत आधार प्राप्त गर्नुभएको छ, मसँग एउटा साहसिक कार्य छ जसले तपाईंलाई देखाउन मद्दत गर्नेछ कि प्रोग्रामिङ संसार कति विविध र आकर्षक छ। र सुन्नुहोस् – यो कोड लेख्ने बारेमा होइन, त्यसैले त्यहाँ कुनै दबाब छैन! तपाईंलाई आफ्नो पहिलो रोमाञ्चक केसमा प्रोग्रामिङ भाषा जासूसको रूपमा सोच्नुहोस्!
+अब तपाईंले यो अद्भुत आधार प्राप्त गर्नुभएको छ, मसँग एउटा साहसिक कार्य छ जसले तपाईंलाई प्रोग्रामिङ संसार कति विविध र आकर्षक छ भनेर देख्न मद्दत गर्नेछ। र सुन्नुहोस् – यो कोड लेख्ने बारे होइन, त्यसैले यहाँ कुनै दबाब छैन! तपाईंलाई आफ्नो पहिलो रोमाञ्चक केसमा प्रोग्रामिङ भाषा जासूसको रूपमा सोच्नुहोस्!
 
 **तपाईंको मिशन, यदि तपाईंले स्वीकार गर्नुभयो भने:**
-1. **भाषा अन्वेषक बन्नुहोस्**: तीनवटा प्रोग्रामिङ भाषाहरू चयन गर्नुहोस् जुन पूर्ण रूपमा फरक क्षेत्रहरूबाट आउँछन् – सायद एउटा वेबसाइट निर्माण गर्ने, एउटा मोबाइल एप्स बनाउने, र एउटा वैज्ञानिकहरूको लागि डेटा विश्लेषण गर्ने। प्रत्येक भाषामा लेखिएको एउटै साधारण कार्यको उदाहरणहरू फेला पार्नुहोस्। म वाचा गर्छु कि तिनीहरू एकै काम गर्दै कति फरक देखिन्छन् भनेर तपाईं निश्चित रूपमा चकित हुनुहुनेछ!
+1. **भाषा अन्वेषक बन्नुहोस्**: तीन प्रोग्रामिङ भाषाहरू चयन गर्नुहोस् जुन पूर्ण रूपमा फरक ब्रह्माण्डबाट आउँछन् – सायद एउटा वेबसाइटहरू निर्माण गर्ने, एउटा मोबाइल एपहरू बनाउने, र एउटा वैज्ञानिकहरूको लागि डेटा विश्लेषण गर्ने। प्रत्येक भाषामा लेखिएको एउटै साधारण कार्यको उदाहरणहरू फेला पार्नुहोस्। म वाचा गर्छु तपाईं पूर्ण रूपमा चकित हुनुहुनेछ कि तिनीहरूले एकै काम गर्न कति फरक देखिन्छन्!
 
-2. **तिनीहरूको उत्पत्ति कथाहरू पत्ता लगाउनुहोस्**: प्रत्येक भाषा विशेष के बनाउँछ? यहाँ एउटा चाखलाग्दो तथ्य छ – प्रत्येक प्रोग्रामिङ भाषा सिर्जना गरिएको थियो किनभने कसैले सोचे, "तपाईंलाई थाहा छ के? यो विशेष समस्या समाधान गर्न राम्रो तरिका हुनुपर्छ।" के तपाईं ती समस्याहरू के थिए भनेर पत्ता लगाउन सक्नुहुन्छ? यी कथाहरू साँच्चै आकर्षक छन्!
+2. **तिनीहरूको उत्पत्ति कथाहरू पत्ता लगाउनुहोस्**: प्रत्येक भाषा विशेष के बनाउँछ? यहाँ एउटा चाखलाग्दो तथ्य छ – प्रत्येक प्रोग्रामिङ भाषा सिर्जना गरिएको थियो किनभने कसैले सोचे, "तपाईंलाई थाहा छ के? यो विशिष्ट समस्या समाधान गर्नको लागि राम्रो तरिका हुनुपर्छ।" के तपाईं ती समस्याहरू के थिए भनेर पत्ता लगाउन सक्नुहुन्छ? यी कथाहरू साँच्चै आकर्षक छन्!
 
 3. **समुदायहरू भेट्नुहोस्**: प्रत्येक भाषाको समुदाय कत्तिको स्वागतयोग्य र उत्साही छ हेर्नुहोस्। केहीसँग लाखौं विकासकर्ताहरू छन् जो ज्ञान साझा गर्दै र एकअर्कालाई मद्दत गर्दैछन्, अरू साना तर अविश्वसनीय रूपमा नजिक र सहयोगी छन्। तपाईंलाई यी समुदायहरूको फरक व्यक्तित्व देख्न मनपर्नेछ!
 
 4. **आफ्नो आन्तरिक भावना पछ्याउनुहोस्**: कुन भाषा अहिले तपाईंलाई सबैभन्दा पहुँचयोग्य लाग्छ? "सही" छनोट गर्ने बारे तनाव नगर्नुहोस् – केवल आफ्नो अन्तर्ज्ञान सुन्नुहोस्! यहाँ कुनै गलत उत्तर छैन, र तपाईं पछि अरू अन्वेषण गर्न सक्नुहुन्छ।
 
-**बोनस जासूस कार्य**: प्रत्येक भाषामा निर्माण गरिएका प्रमुख वेबसाइटहरू वा एपहरू के हुन् भनेर पत्ता लगाउन प्रयास गर्नुहोस्। म ग्यारेन्टी दिन्छु कि तपाईंलाई थाहा पाउँदा झट्का लाग्नेछ कि Instagram, Netflix, वा त्यो मोबाइल गेम जसलाई तपाईं रोक्न सक्नुहुन्न केले शक्ति दिन्छ!
+**बोनस जासूस कार्य**: प्रत्येक भाषाले कुन प्रमुख वेबसाइटहरू वा एपहरू निर्माण गरेको छ पत्ता लगाउन प्रयास गर्नुहोस्। म ग्यारेन्टी दिन्छु तपाईं चकित हुनुहुनेछ कि Instagram, Netflix, वा त्यो मोबाइल गेम जसलाई तपाईं रोक्न सक्नुहुन्न केले शक्ति दिन्छ!
 
-> 💡 **स्मरण गर्नुहोस्**: तपाईं आज यी भाषाहरू मध्ये कुनैमा विशेषज्ञ बन्न प्रयास गरिरहनुभएको छैन। तपाईं केवल छिमेकलाई चिन्न प्रयास गर्दै हुनुहुन्छ अघि तपाईंले कहाँ बस्ने निर्णय गर्नुहुन्छ। आफ्नो समय लिनुहोस्, यससँग रमाइलो गर्नुहोस्, र आफ्नो जिज्ञासाले तपाईंलाई मार्गदर्शन गर्न दिनुहोस्!
+> 💡 **स्मरण गर्नुहोस्**: तपाईं आज यी भाषाहरूको कुनै पनि मा विशेषज्ञ बन्न प्रयास गर्दै हुनुहुन्न। तपाईं केवल छिमेकलाई चिन्न प्रयास गर्दै हुनुहुन्छ अघि तपाईंले कहाँ पसल स्थापना गर्न चाहनुहुन्छ निर्णय गर्नुहोस्। आफ्नो समय लिनुहोस्, यससँग रमाइलो गर्नुहोस्, र तपाईंको जिज्ञासाले तपाईंलाई मार्गदर्शन गर्न दिनुहोस्!
 
-## तपाईंले पत्ता लगाएको कुरा मनाउन तयार हुनुहोस्!
+## तपाईंले पत्ता लगाउनुभएको कुरा मनाउन तयार हुनुहोस्!
 
-वाह, तपाईंले आज यति धेरै अविश्वसनीय जानकारी अवशोषित गर्नुभएको छ! म साँच्चै उत्साहित छु कि तपाईंले यो अद्भुत यात्राबाट कति सिक्नुभएको छ। र सम्झनुहोस् – यो कुनै परीक्षण होइन जहाँ तपाईंले सबै कुरा सही गर्न आवश्यक छ। यो तपाईंले सिकेको सबै चिजको उत्सव जस्तै हो!
+हे भगवान, तपाईंले आज कति अविश्वसनीय जानकारी अवशोषित गर्नुभएको छ! म साँच्चै उत्साहित छु कि तपाईंले यस अद्भुत यात्राको कति भाग सम्झनुभएको छ। र सम्झनुहोस् – यो कुनै परीक्षा होइन जहाँ तपाईंले सबै कुरा सही गर्न आवश्यक छ। यो तपाईंले सिक्नुभएको सबै चाखलाग्दो कुराको उत्सव जस्तै हो!
 
 [पाठ-पछिको क्विज लिनुहोस्](https://ff-quizzes.netlify.app/web/)
-
 ## समीक्षा र आत्म अध्ययन
 
-**अन्वेषण गर्न र यससँग रमाइलो गर्न आफ्नो समय लिनुहोस्!**
+**आफ्नो समय लिनुहोस् र यसलाई रमाइलो बनाउनुहोस्!**
+
+तपाईंले आज धेरै कुरा सिक्नुभएको छ, र यो गर्व गर्न लायक कुरा हो! अब रमाइलो भाग आउँछ – ती विषयहरू अन्वेषण गर्नुहोस् जसले तपाईंको जिज्ञासा जगायो। सम्झनुहोस्, यो गृहकार्य होइन – यो एउटा साहसिक यात्रा हो!
+
+**तपाईंलाई उत्साहित गर्ने कुरामा गहिरो डुबुल्की मार्नुहोस्:**
+
+**प्रोग्रामिङ भाषाहरूमा व्यावहारिक अनुभव लिनुहोस्:**
+- तपाईंलाई मन परेको २-३ भाषाहरूको आधिकारिक वेबसाइटहरूमा जानुहोस्। प्रत्येकको आफ्नै विशेषता र कथा छ!
+- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), वा [Replit](https://replit.com/) जस्ता अनलाइन कोडिङ प्लेग्राउन्डहरू प्रयास गर्नुहोस्। प्रयोग गर्न डराउनुहोस् – तपाईंले केही बिगार्न सक्नुहुन्न!
+- तपाईंको मनपर्ने भाषाको उत्पत्ति कसरी भयो भन्नेबारे पढ्नुहोस्। साँच्चै, यी उत्पत्ति कथाहरू रोचक छन् र तपाईंलाई भाषाहरू किन यसरी काम गर्छन् भन्ने बुझ्न मद्दत गर्नेछन्।
+
+**आफ्नो नयाँ उपकरणहरूसँग सहज हुनुहोस्:**
+- Visual Studio Code डाउनलोड गर्नुहोस् यदि तपाईंले अझै डाउनलोड गर्नुभएको छैन भने – यो निःशुल्क छ र तपाईंलाई यो मनपर्नेछ!
+- Extensions marketplace ब्राउज गर्न केही मिनेट खर्च गर्नुहोस्। यो तपाईंको कोड एडिटरको लागि एप स्टोर जस्तै हो!
+- तपाईंको ब्राउजरको Developer Tools खोल्नुहोस् र क्लिक गर्न सुरु गर्नुहोस्। सबै कुरा बुझ्न चिन्ता नगर्नुहोस् – त्यहाँ के छ भनेर परिचित हुनुहोस्।
 
-तपाईंले आज धेरै कुरा कभर गर्नुभएको छ, र त्यो गर्व गर्न लायक कुरा हो! अब रमाइलो भाग आउँछ – तपाईंको जिज्ञासा जगाएको विषयहरू अन्वेषण गर्नुहोस्। सम्झनुहोस्, यो गृहकार्य होइन – यो एक साहसिक कार्य हो!
+**समुदायमा सामेल हुनुहोस्:**
+- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), वा [GitHub](https://github.com/) मा केही डेभलपर समुदायहरूलाई फलो गर्नुहोस्। प्रोग्रामिङ समुदाय नयाँ व्यक्तिहरूलाई स्वागत गर्न धेरै उत्सुक छ!
+- YouTube मा केही शुरुआती मैत्री कोडिङ भिडियोहरू हेर्नुहोस्। त्यहाँ धेरै उत्कृष्ट सिर्जनाकर्ताहरू छन् जसले सुरु गर्दा कस्तो महसुस हुन्छ भन्ने सम्झन्छन्।
+- स्थानीय मिटअपहरू वा अनलाइन समुदायहरूमा सामेल हुने विचार गर्नुहोस्। विश्वास गर्नुहोस्, डेभलपरहरू नयाँ व्यक्तिहरूलाई मद्दत गर्न मन पराउँछन्!
 
-**तपाईंलाई उत्साहित गर्ने कुरामा गहिरो डुब्नुहोस्:**
+> 🎯 **सुन्नुहोस्, यहाँ म तपाईंलाई सम्झाउन चाहन्छु**: तपाईंलाई रातारात कोडिङ विशेषज्ञ बन्ने अपेक्षा गरिएको छैन! अहिले, तपाईं यो अद्भुत नयाँ संसारलाई चिन्न सुरु गर्दै हुनुहुन्छ जसको तपाईं भाग बन्न लाग्नुभएको छ। आफ्नो समय लिनुहोस्, यात्रा रमाइलो बनाउनुहोस्, र सम्झनुहोस् – तपाईंले प्रशंसा गर्ने प्रत्येक डेभलपर एकपटक तपाईं जस्तै स्थानमा बसेका थिए, उत्साहित र सायद अलि अलमलमा परेका। यो पूर्ण रूपमा सामान्य हो, र यसको मतलब तपाईं सही गरिरहनुभएको छ।
 
-**प्रोग्रामिङ भाषाहरूको साथ व्यावहारिक बनाउनुहोस्:**
-- तपाईंको ध्यान खिच्ने २-३ भाषाहरूको आधिकारिक वेबसाइटहरूमा जानुहोस्। प्रत्येकको आफ्नै व्यक्तित्व र कथा छ!
-- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), वा [Replit](https://replit.com/) जस्ता अनलाइन कोडिङ खेलमैदानहरू प्रयास गर्नुहोस्। प्रयोग गर्न डराउनुहोस् – तपाईंले केही बिगार्न सक्नुहुन्न!
-- तपाईंको मनपर्ने भाषा कसरी आयो भन्ने बारे पढ्नुहोस्। गम्भीर रूपमा, यी उत्पत्ति कथाहरू आकर्षक छन् र तपाईंलाई भाषाहरू किन काम गर्छन् भन्ने कुरा बुझ्न मद्दत गर्नेछ।
 
-**तपाईंको नयाँ उपकरणहरूसँग सहज हुनुहोस्:**
-- यदि तपाईंले अझै डाउनलोड गर्नुभएको छैन भने Visual Studio Code डाउनलोड गर्नुहोस् – यो निःशुल्क छ र तपाईंलाई यो मनपर्नेछ!
-- एक्सटेन्सन मार्केटप्लेस ब्राउज गर्न केही मिनेट खर्च गर्नुहोस्। यो तपाईंको कोड सम्पादकको लागि एप स्टोर जस्तै छ!
-- आफ्नो ब्राउजरको डेभलपर टूल्स खोल्नुहोस् र क्लिक गर्नुहोस्। सबै
-- YouTube मा केही शुरुवाती स्तरका कोडिङ भिडियोहरू हेर्नुहोस्। त्यहाँ धेरै उत्कृष्ट सिर्जनाकर्ताहरू छन् जसले शुरुवातमा कस्तो महसुस हुन्छ भन्ने कुरा सम्झन्छन्।  
-- स्थानीय भेटघाटहरू वा अनलाइन समुदायहरूमा सामेल हुने विचार गर्नुहोस्। विश्वास गर्नुहोस्, डेभलपरहरू नयाँ आउनेहरूलाई सहयोग गर्न मन पराउँछन्!
 
-> 🎯 **सुन्नुहोस्, यहाँ मैले तपाईंलाई सम्झन चाहेको कुरा छ**: तपाईंलाई एकै रातमा कोडिङ जादूगर बन्ने अपेक्षा गरिएको छैन! अहिले तपाईं यो अद्भुत नयाँ संसारलाई चिन्न सुरु गर्दै हुनुहुन्छ, जसको तपाईं चाँडै हिस्सा बन्ने तयारी गर्दै हुनुहुन्छ। आफ्नो समय लिनुहोस्, यात्रा आनन्दित बनाउनुहोस्, र सम्झनुहोस् – तपाईंले प्रशंसा गर्ने प्रत्येक डेभलपर एकपटक तपाईं जस्तै स्थानमा बसेका थिए, उत्साहित र सायद अलिकति तनावग्रस्त महसुस गर्दै। यो पूर्ण रूपमा सामान्य हो, र यसको मतलब तपाईं सही गरिरहनुभएको छ।  
+## असाइनमेन्ट
 
-## असाइनमेन्ट  
+[Reading the Docs](assignment.md)
 
-[डक्स पढ्दै](assignment.md)  
+> 💡 **तपाईंको असाइनमेन्टको लागि सानो प्रेरणा**: म तपाईंलाई केही उपकरणहरू अन्वेषण गर्न देख्न चाहन्छु जुन हामीले अझै कभर गरेका छैनौं! हामीले पहिले नै चर्चा गरेका एडिटरहरू, ब्राउजरहरू, र कमाण्ड लाइन उपकरणहरू छोड्नुहोस् – त्यहाँ विकासका लागि अद्भुत उपकरणहरूको सम्पूर्ण ब्रह्माण्ड छ जुन पत्ता लगाउन तपाईंलाई पर्खिरहेको छ। ती उपकरणहरू खोज्नुहोस् जुन सक्रिय रूपमा मर्मत गरिन्छ र जीवंत, सहयोगी समुदायहरू छन् (यीसँग उत्कृष्ट ट्यूटोरियलहरू र सहयोगी व्यक्तिहरू हुने सम्भावना बढी हुन्छ जब तपाईं अनिवार्य रूपमा अड्किनुहुन्छ र सहयोगी हातको आवश्यकता हुन्छ)।
+
+---
+
+## 🚀 तपाईंको प्रोग्रामिङ यात्रा समयरेखा
+
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] तपाईंलाई मन परेको २-३ प्रोग्रामिङ भाषाको वेबसाइट बुकमार्क गर्नुहोस्
+- [ ] Visual Studio Code डाउनलोड गर्नुहोस् यदि तपाईंले अझै डाउनलोड गर्नुभएको छैन भने
+- [ ] तपाईंको ब्राउजरको DevTools (F12) खोल्नुहोस् र कुनै पनि वेबसाइटमा क्लिक गर्नुहोस्
+- [ ] एउटा प्रोग्रामिङ समुदायमा सामेल हुनुहोस् (Dev.to, Reddit r/webdev, वा Stack Overflow)
+
+### ⏰ **यो घण्टामा तपाईं के हासिल गर्न सक्नुहुन्छ**
+- [ ] पाठपछिको क्विज पूरा गर्नुहोस् र तपाईंको उत्तरहरूमा विचार गर्नुहोस्
+- [ ] GitHub Copilot एक्सटेन्सनको साथ VS Code सेटअप गर्नुहोस्
+- [ ] अनलाइनमा २ फरक प्रोग्रामिङ भाषाहरूमा "Hello World" उदाहरण प्रयास गर्नुहोस्
+- [ ] YouTube मा "Day in the Life of a Developer" भिडियो हेर्नुहोस्
+- [ ] तपाईंको प्रोग्रामिङ भाषा डिटेक्टिभ कार्य सुरु गर्नुहोस् (चुनौतीबाट)
+
+### 📅 **तपाईंको हप्ताको साहसिक यात्रा**
+- [ ] असाइनमेन्ट पूरा गर्नुहोस् र ३ नयाँ विकास उपकरणहरू अन्वेषण गर्नुहोस्
+- [ ] सामाजिक सञ्जालमा ५ डेभलपरहरू वा प्रोग्रामिङ खाताहरू फलो गर्नुहोस्
+- [ ] CodePen वा Replit मा केही सानो निर्माण प्रयास गर्नुहोस् (यहाँसम्म कि "Hello, [तपाईंको नाम]!")
+- [ ] कसैको कोडिङ यात्राबारे एक डेभलपर ब्लग पोस्ट पढ्नुहोस्
+- [ ] भर्चुअल मिटअपमा सामेल हुनुहोस् वा प्रोग्रामिङ टक हेर्नुहोस्
+- [ ] अनलाइन ट्यूटोरियलहरूसँग तपाईंले रोजेको भाषा सिक्न सुरु गर्नुहोस्
+
+### 🗓️ **तपाईंको महिनाको रूपान्तरण**
+- [ ] तपाईंको पहिलो सानो प्रोजेक्ट निर्माण गर्नुहोस् (यहाँसम्म कि एउटा साधारण वेबपेज पनि गनिन्छ!)
+- [ ] ओपन-सोर्स प्रोजेक्टमा योगदान गर्नुहोस् (डकुमेन्टेसन सुधारबाट सुरु गर्नुहोस्)
+- [ ] कोहीलाई मार्गदर्शन गर्नुहोस् जो आफ्नो प्रोग्रामिङ यात्रा सुरु गर्दैछ
+- [ ] तपाईंको डेभलपर पोर्टफोलियो वेबसाइट बनाउनुहोस्
+- [ ] स्थानीय डेभलपर समुदायहरू वा अध्ययन समूहहरूसँग जडान गर्नुहोस्
+- [ ] तपाईंको अर्को सिकाइको लक्ष्य योजना गर्न सुरु गर्नुहोस्
+
+### 🎯 **अन्तिम प्रतिबिम्ब जाँच**
+
+**अगाडि बढ्नु अघि, एक क्षण लिनुहोस् र उत्सव मनाउनुहोस्:**
+- आज प्रोग्रामिङको बारेमा तपाईंलाई उत्साहित गर्ने एउटा कुरा के हो?
+- कुन उपकरण वा अवधारणा तपाईंले पहिलो अन्वेषण गर्न चाहनुहुन्छ?
+- यो प्रोग्रामिङ यात्रा सुरु गर्दा तपाईंलाई कस्तो महसुस भइरहेको छ?
+- अहिले तपाईंले डेभलपरलाई सोध्न चाहनुभएको एउटा प्रश्न के हो?
+
+```mermaid
+journey
+    title Your Confidence Building Journey
+    section Today
+      Curious: 3: You
+      Overwhelmed: 4: You
+      Excited: 5: You
+    section This Week
+      Exploring: 4: You
+      Learning: 5: You
+      Connecting: 4: You
+    section Next Month
+      Building: 5: You
+      Confident: 5: You
+      Helping Others: 5: You
+```
 
-> 💡 **तपाईंको असाइनमेन्टको लागि सानो प्रेरणा**: म साँच्चै चाहन्छु कि तपाईंले केही उपकरणहरू अन्वेषण गर्नुहोस् जुन हामीले अझै कभर गरेका छैनौं! हामीले पहिले नै कुरा गरेका एडिटरहरू, ब्राउजरहरू, र कमाण्ड लाइन उपकरणहरू छोड्नुहोस् – त्यहाँ विकासका अद्भुत उपकरणहरूको सम्पूर्ण संसार छ जुन पत्ता लगाउनको लागि पर्खिरहेको छ। सक्रिय रूपमा मर्मत गरिएका र जीवन्त, सहयोगी समुदायहरू भएका उपकरणहरू खोज्नुहोस् (यीसँग प्रायः उत्कृष्ट ट्युटोरियलहरू र सहयोगी व्यक्तिहरू हुन्छन् जब तपाईं अनिवार्य रूपमा अड्किनुहुन्छ र सहयोगी हात चाहिन्छ)।  
+> 🌟 **सम्झनुहोस्**: प्रत्येक विशेषज्ञ एकपटक नयाँ सिक्ने व्यक्ति थिए। प्रत्येक वरिष्ठ डेभलपरले एकपटक तपाईं जस्तै महसुस गरेका थिए – उत्साहित, सायद अलि अलमलमा, र के सम्भव छ भन्ने बारेमा निश्चित रूपमा जिज्ञासु। तपाईं अद्भुत कम्पनीमा हुनुहुन्छ, र यो यात्रा अविश्वसनीय हुने छ। प्रोग्रामिङको अद्भुत संसारमा स्वागत छ! 🎉
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/1-getting-started-lessons/2-github-basics/README.md b/translations/ne/1-getting-started-lessons/2-github-basics/README.md
index b575669bf5..f4fb895d98 100644
--- a/translations/ne/1-getting-started-lessons/2-github-basics/README.md
+++ b/translations/ne/1-getting-started-lessons/2-github-basics/README.md
@@ -1,52 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "acad15f3164cd6348e065ff38619aae9",
-  "translation_date": "2025-10-22T16:50:38+00:00",
+  "original_hash": "0fe3ff66299b447f1c8cb34dcbf0c5ef",
+  "translation_date": "2025-11-03T15:24:43+00:00",
   "source_file": "1-getting-started-lessons/2-github-basics/README.md",
   "language_code": "ne"
 }
 -->
 # GitHub परिचय
 
-नमस्ते, भविष्यका डेभलपर! 👋 संसारभरका लाखौं कोडरहरूसँग सामेल हुन तयार हुनुहुन्छ? म तपाईंलाई GitHub मा परिचय गराउन साँच्चै उत्साहित छु – यसलाई प्रोग्रामरहरूको लागि सामाजिक मिडिया प्लेटफर्मको रूपमा सोच्नुहोस्, तर यहाँ लन्चको फोटोहरू साझा गर्ने सट्टा, हामी कोड साझा गर्दैछौं र सँगै अद्भुत चीजहरू निर्माण गर्दैछौं!
+नमस्ते, भविष्यका डेभलपर! 👋 संसारभरका लाखौं कोडरहरूसँग सामेल हुन तयार हुनुहुन्छ? म साँच्चै उत्साहित छु तपाईंलाई GitHub मा परिचय गराउन – यसलाई प्रोग्रामरहरूको लागि सामाजिक मिडिया प्लेटफर्मको रूपमा सोच्नुहोस्, तर यहाँ लन्चको फोटोहरू साझा गर्ने सट्टा, हामी कोड साझा गर्दैछौं र सँगै अद्भुत चीजहरू निर्माण गर्दैछौं!
 
-यो कुरा साँच्चै मेरो दिमागलाई उडाउँछ: तपाईंको फोनमा रहेको प्रत्येक एप, तपाईंले भ्रमण गर्ने प्रत्येक वेबसाइट, र तपाईंले प्रयोग गर्न सिक्ने अधिकांश उपकरणहरू विकासकर्ताहरूको टोलीले GitHub जस्ता प्लेटफर्महरूमा सहयोग गरेर निर्माण गरेका हुन्। तपाईंलाई मनपर्ने संगीत एप? तपाईं जस्तै कसैले यसमा योगदान दिएका छन्। त्यो खेल जसलाई तपाईं छोड्न सक्नुहुन्न? हो, सम्भवतः GitHub सहयोगको साथ निर्माण गरिएको। र अब तपाईं त्यो अद्भुत समुदायको हिस्सा बन्न सिक्दै हुनुहुन्छ!
+यो कुरा साँच्चै मनमा पर्छ: तपाईंको फोनमा रहेको प्रत्येक एप, तपाईंले भ्रमण गर्ने प्रत्येक वेबसाइट, र तपाईंले प्रयोग गर्न सिक्ने अधिकांश उपकरणहरू विकासकर्ताहरूको टोलीले GitHub जस्ता प्लेटफर्महरूमा सहकार्य गरेर निर्माण गरेका हुन्। तपाईंलाई मनपर्ने संगीत एप? तपाईंजस्तै कसैले यसमा योगदान दिएको हो। त्यो खेल जसलाई तपाईं छोड्न सक्नुहुन्न? हो, सम्भवतः GitHub सहकार्यको साथ निर्माण गरिएको। र अब तपाईं त्यो अद्भुत समुदायको हिस्सा बन्न सिक्दै हुनुहुन्छ!
 
-मलाई थाहा छ यो सुरुमा धेरै जस्तो लाग्न सक्छ – म पनि मेरो पहिलो GitHub पृष्ठलाई हेर्दै "यो सबैको मतलब के हो?" भनेर सोच्दै थिएँ। तर कुरा के हो भने: प्रत्येक विकासकर्ता ठीक त्यही ठाउँबाट सुरु गरेका थिए जहाँ तपाईं अहिले हुनुहुन्छ। यो पाठको अन्त्यसम्ममा, तपाईंको आफ्नै GitHub रिपोजिटरी हुनेछ (यसलाई क्लाउडमा तपाईंको व्यक्तिगत परियोजना प्रदर्शनको रूपमा सोच्नुहोस्), र तपाईंले आफ्नो काम बचत गर्ने, अरूसँग साझा गर्ने, र लाखौं मानिसहरूले प्रयोग गर्ने परियोजनाहरूमा योगदान गर्ने तरिका सिक्नुहुनेछ।
+मलाई थाहा छ यो सुरुमा धेरै जस्तो लाग्न सक्छ – म पनि मेरो पहिलो GitHub पेजमा हेर्दै "यो सबैको अर्थ के हो?" भनेर सोच्दै थिएँ। तर कुरा के छ भने: प्रत्येक डेभलपर ठीक त्यही ठाउँबाट सुरु गरेका छन् जहाँ तपाईं अहिले हुनुहुन्छ। यो पाठको अन्त्यसम्ममा, तपाईंको आफ्नै GitHub रिपोजिटरी हुनेछ (यसलाई क्लाउडमा तपाईंको व्यक्तिगत परियोजना प्रदर्शनको रूपमा सोच्नुहोस्), र तपाईंले आफ्नो काम बचत गर्ने, अरूसँग साझा गर्ने, र लाखौं मानिसहरूले प्रयोग गर्ने परियोजनाहरूमा योगदान दिन सिक्नुहुनेछ।
 
-हामी यो यात्रा सँगै लिनेछौं, एक कदममा। कुनै हतार छैन, कुनै दबाब छैन – केवल तपाईं, म, र केही साँच्चै चिसो उपकरणहरू जुन तपाईंको नयाँ साथी बन्नेछन्!
+हामी यो यात्रा सँगै गर्नेछौं, एक कदममा। कुनै हतार छैन, कुनै दबाब छैन – केवल तपाईं, म, र केही साँच्चै चिसो उपकरणहरू जुन तपाईंको नयाँ साथी बन्नेछन्!
 
 ![GitHub परिचय](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ne.png)
 > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
 
+```mermaid
+journey
+    title Your GitHub Adventure Today
+    section Setup
+      Install Git: 4: You
+      Create Account: 5: You
+      First Repository: 5: You
+    section Master Git
+      Local Changes: 4: You
+      Commits & Pushes: 5: You
+      Branching: 4: You
+    section Collaborate
+      Fork Projects: 4: You
+      Pull Requests: 5: You
+      Open Source: 5: You
+```
+
 ## प्रि-लेक्चर क्विज
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app)
 
 ## परिचय
 
-रोचक कुराहरूमा डुब्नु अघि, तपाईंको कम्प्युटरलाई केही GitHub जादूको लागि तयार गरौं! यसलाई उत्कृष्ट कृति सिर्जना गर्नु अघि तपाईंको कला सामग्रीहरू व्यवस्थित गर्ने जस्तो सोच्नुहोस् – सही उपकरणहरू तयार हुँदा सबै कुरा धेरै सहज र धेरै रमाइलो हुन्छ।
+रोचक कुराहरूमा डुब्नु अघि, तपाईंको कम्प्युटरलाई केही GitHub जादुका लागि तयार गरौं! यसलाई उत्कृष्ट कृति सिर्जना गर्नु अघि तपाईंको कला सामग्रीहरू व्यवस्थित गर्ने जस्तै सोच्नुहोस् – सही उपकरणहरू तयार हुँदा सबै कुरा धेरै सहज र रमाइलो हुन्छ।
 
-म तपाईंलाई प्रत्येक सेटअप चरण व्यक्तिगत रूपमा हिँडाउँछु, र म वाचा गर्छु कि यो सुरुमा जति डरावना देखिन्छ त्यति छैन। यदि केही तुरुन्तै क्लिक गर्दैन भने, त्यो पूर्ण रूपमा सामान्य हो! मैले मेरो पहिलो विकास वातावरण सेटअप गर्दा प्राचीन हाइरोग्लिफिक्स पढ्ने प्रयास गरिरहेको जस्तो महसुस गरेको सम्झन्छु। प्रत्येक विकासकर्ता ठीक त्यही ठाउँमा थिए जहाँ तपाईं अहिले हुनुहुन्छ, सोच्दै कि उनीहरूले यो सही गरिरहेका छन् कि छैनन्। स्पोइलर अलर्ट: यदि तपाईं यहाँ सिक्दै हुनुहुन्छ भने, तपाईं पहिले नै सही गरिरहनुभएको छ! 🌟
+म तपाईंलाई प्रत्येक सेटअप चरण व्यक्तिगत रूपमा मार्गदर्शन गर्नेछु, र म वाचा गर्छु कि यो सुरुमा जति डर लाग्दो देखिन्छ त्यति छैन। यदि केही कुरा तुरुन्तै क्लिक गर्दैन भने, त्यो पूर्ण रूपमा सामान्य हो! मैले मेरो पहिलो विकास वातावरण सेटअप गर्दा प्राचीन हाइरोग्लिफिक्स पढ्न खोजिरहेको जस्तो महसुस गरेको थिएँ। प्रत्येक डेभलपर ठीक त्यही ठाउँमा छन् जहाँ तपाईं अहिले हुनुहुन्छ, सोच्दै कि उनीहरूले यो सही गरिरहेका छन् कि छैनन्। स्पोइलर अलर्ट: यदि तपाईं यहाँ सिक्दै हुनुहुन्छ भने, तपाईं पहिले नै सही गरिरहनुभएको छ! 🌟
 
 यस पाठमा, हामी कभर गर्नेछौं:
 
 - तपाईंले आफ्नो मेसिनमा गरेको काम ट्र्याक गर्ने
 - अरूसँग परियोजनाहरूमा काम गर्ने
-- ओपन सोर्स सफ्टवेयरमा योगदान गर्ने तरिका
+- ओपन सोर्स सफ्टवेयरमा योगदान कसरी गर्ने
 
 ### पूर्वापेक्षाहरू
 
-तपाईंको कम्प्युटरलाई केही GitHub जादूको लागि तयार गरौं! चिन्ता नगर्नुहोस् – यो सेटअप तपाईंले केवल एक पटक गर्नुपर्ने कुरा हो, र त्यसपछि तपाईंको सम्पूर्ण कोडिङ यात्राको लागि तपाईं तयार हुनुहुनेछ।
+तपाईंको कम्प्युटरलाई केही GitHub जादुका लागि तयार गरौं! चिन्ता नगर्नुहोस् – यो सेटअप तपाईंले केवल एक पटक गर्नुपर्ने कुरा हो, र त्यसपछि तपाईंको सम्पूर्ण कोडिङ यात्राको लागि तयार हुनुहुनेछ।
 
-ठीक छ, आधारबाट सुरु गरौं! पहिलो, हामी जाँच गर्न आवश्यक छ कि Git पहिले नै तपाईंको कम्प्युटरमा छ कि छैन। Git मूलतः एक सुपर-स्मार्ट सहायक जस्तै हो जसले तपाईंको कोडमा तपाईंले गरेको प्रत्येक परिवर्तन सम्झन्छ – प्रत्येक दुई सेकेन्डमा हतारमा Ctrl+S हिट गर्ने भन्दा धेरै राम्रो (हामी सबै त्यहाँ पुगेका छौं!)।
+ठीक छ, आधारबाट सुरु गरौं! पहिलो, हामी जाँच गर्न आवश्यक छ कि Git पहिले नै तपाईंको कम्प्युटरमा छ कि छैन। Git मूलतः सुपर-स्मार्ट सहायक जस्तै हो जसले तपाईंको कोडमा तपाईंले गरेको प्रत्येक परिवर्तन सम्झन्छ – प्रत्येक दुई सेकेन्डमा हतारमा Ctrl+S हिट गर्ने भन्दा धेरै राम्रो (हामी सबै त्यहाँ पुगेका छौं!)।
 
-Git पहिले नै स्थापना गरिएको छ कि छैन भनेर हेर्नको लागि यो जादुई कमाण्ड तपाईंको टर्मिनलमा टाइप गर्नुहोस्:
+Git पहिले नै स्थापना भएको छ कि छैन भनेर जाँच्नको लागि, तपाईंको टर्मिनलमा यो जादुई कमाण्ड टाइप गर्नुहोस्:
 `git --version`
 
-यदि Git त्यहाँ छैन भने, चिन्ता नगर्नुहोस्! [Git डाउनलोड गर्नुहोस्](https://git-scm.com/downloads) मा जानुहोस् र यसलाई प्राप्त गर्नुहोस्। एकपटक तपाईंले यसलाई स्थापना गरेपछि, हामीले Git लाई तपाईंलाई ठीकसँग परिचय गराउन आवश्यक छ:
+यदि Git त्यहाँ छैन भने, चिन्ता नगर्नुहोस्! [Git डाउनलोड गर्नुहोस्](https://git-scm.com/downloads) मा जानुहोस् र यसलाई प्राप्त गर्नुहोस्। एकपटक तपाईंले यसलाई स्थापना गर्नुभयो भने, हामीले Git लाई तपाईंलाई ठीकसँग परिचय गराउन आवश्यक छ:
 
-> 💡 **पहिलो पटक सेटअप**: यी आदेशहरूले Git लाई तपाईं को हुनुहुन्छ भनेर बताउँछन्। यो जानकारी तपाईंले गर्ने प्रत्येक कमिटमा संलग्न हुनेछ, त्यसैले सार्वजनिक रूपमा साझा गर्न आरामदायक नाम र इमेल छनौट गर्नुहोस्।
+> 💡 **पहिलो पटक सेटअप**: यी कमाण्डहरूले Git लाई तपाईं को हुनुहुन्छ भनेर बताउँछन्। यो जानकारी तपाईंले गर्ने प्रत्येक कमिटमा संलग्न हुनेछ, त्यसैले सार्वजनिक रूपमा साझा गर्न सहज नाम र इमेल चयन गर्नुहोस्।
 
 ```bash
 git config --global user.name "your-name"
@@ -60,32 +77,32 @@ git config --list
 
 तपाईंलाई GitHub खाता, कोड एडिटर (जस्तै Visual Studio Code), र तपाईंको टर्मिनल खोल्न आवश्यक छ (वा: कमाण्ड प्रम्प्ट)।
 
-[github.com](https://github.com/) मा जानुहोस् र यदि तपाईंले पहिले नै खाता सिर्जना गर्नुभएको छैन भने खाता सिर्जना गर्नुहोस्, वा लग इन गरेर आफ्नो प्रोफाइल भर्नुहोस्।
+[github.com](https://github.com/) मा जानुहोस् र खाता सिर्जना गर्नुहोस् यदि तपाईंले पहिले नै गर्नुभएको छैन भने, वा लग इन गरेर आफ्नो प्रोफाइल भर्नुहोस्।
 
-💡 **आधुनिक सुझाव**: पासवर्ड बिना सजिलो प्रमाणीकरणको लागि [SSH कुञ्जीहरू](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) सेटअप गर्ने वा [GitHub CLI](https://cli.github.com/) प्रयोग गर्ने विचार गर्नुहोस्।
+💡 **आधुनिक सुझाव**: पासवर्ड बिना सजिलो प्रमाणीकरणको लागि [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) सेटअप गर्ने वा [GitHub CLI](https://cli.github.com/) प्रयोग गर्ने विचार गर्नुहोस्।
 
-✅ GitHub संसारको एकमात्र कोड रिपोजिटरी होइन; अरू पनि छन्, तर GitHub सबैभन्दा परिचित छ।
+✅ GitHub संसारको एकमात्र कोड रिपोजिटरी होइन; अरू पनि छन्, तर GitHub सबैभन्दा परिचित हो।
 
 ### तयारी
 
-तपाईंलाई तपाईंको स्थानीय मेसिन (ल्यापटप वा पीसी) मा कोड परियोजनाको साथ एक फोल्डर, र GitHub मा एक सार्वजनिक रिपोजिटरी आवश्यक हुनेछ, जसले अरूको परियोजनाहरूमा योगदान कसरी गर्ने भन्ने उदाहरणको रूपमा काम गर्नेछ।
+तपाईंलाई स्थानीय मेसिन (ल्यापटप वा पीसी) मा कोड परियोजनाको साथ एक फोल्डर, र GitHub मा सार्वजनिक रिपोजिटरी आवश्यक हुनेछ, जसले अरूको परियोजनामा योगदान कसरी गर्ने उदाहरणको रूपमा काम गर्नेछ।
 
 ### तपाईंको कोड सुरक्षित राख्नुहोस्
 
-हामी एक क्षणको लागि सुरक्षा बारे कुरा गरौं – तर चिन्ता नगर्नुहोस्, हामी तपाईंलाई डराउने कुरा गर्दैनौं! यी सुरक्षा अभ्यासहरूलाई तपाईंको कार वा तपाईंको घर लक गर्ने जस्तै सोच्नुहोस्। तिनीहरू सरल बानीहरू हुन् जुन स्वाभाविक बन्छन् र तपाईंको कडा परिश्रमलाई सुरक्षित राख्छन्।
+हामी एक क्षणको लागि सुरक्षा बारे कुरा गरौं – तर चिन्ता नगर्नुहोस्, हामी तपाईंलाई डराउने कुरा गर्दैनौं! यी सुरक्षा अभ्यासहरूलाई तपाईंको कार वा घर लक गर्ने जस्तै सोच्नुहोस्। यी सरल बानीहरू स्वाभाविक बन्छन् र तपाईंको कडा परिश्रमलाई सुरक्षित राख्छन्।
 
-हामी तपाईंलाई सुरुबाटै GitHub सँग काम गर्ने आधुनिक, सुरक्षित तरिकाहरू देखाउनेछौं। यसरी, तपाईंले राम्रो बानीहरू विकास गर्नुहुनेछ जसले तपाईंलाई तपाईंको कोडिङ करियरभरि राम्रो सेवा दिनेछ।
+हामी तपाईंलाई GitHub सँग काम गर्ने आधुनिक, सुरक्षित तरिकाहरू देखाउनेछौं। यसरी, तपाईंले राम्रो बानीहरू विकास गर्नुहुनेछ जसले तपाईंको कोडिङ करियरभरि तपाईंलाई राम्रो सेवा दिनेछ।
 
 GitHub सँग काम गर्दा, सुरक्षा उत्तम अभ्यासहरू पालना गर्नु महत्त्वपूर्ण छ:
 
 | सुरक्षा क्षेत्र | उत्तम अभ्यास | किन यो महत्त्वपूर्ण छ |
-|------------------|---------------|------------------------|
-| **प्रमाणीकरण** | SSH कुञ्जीहरू वा व्यक्तिगत पहुँच टोकनहरू प्रयोग गर्नुहोस् | पासवर्डहरू कम सुरक्षित छन् र चरणबद्ध रूपमा हटाइँदैछन् |
-| **दुई-कारक प्रमाणीकरण** | तपाईंको GitHub खातामा 2FA सक्षम गर्नुहोस् | खाताको सुरक्षामा थप तह थप्छ |
-| **रिपोजिटरी सुरक्षा** | संवेदनशील जानकारी कहिल्यै कमिट नगर्नुहोस् | API कुञ्जीहरू र पासवर्डहरू सार्वजनिक रिपोजमा कहिल्यै हुनु हुँदैन |
-| **निर्भरता व्यवस्थापन** | Dependabot अपडेटहरूको लागि सक्षम गर्नुहोस् | तपाईंको निर्भरता सुरक्षित र अद्यावधिक राख्छ |
+|---------------|---------------|----------------|
+| **प्रमाणीकरण** | SSH keys वा Personal Access Tokens प्रयोग गर्नुहोस् | पासवर्ड कम सुरक्षित छन् र चरणबद्ध रूपमा हटाइँदैछन् |
+| **दुई-फ्याक्टर प्रमाणीकरण** | तपाईंको GitHub खातामा 2FA सक्षम गर्नुहोस् | खाताको सुरक्षा थप तह थप्छ |
+| **रिपोजिटरी सुरक्षा** | संवेदनशील जानकारी कहिल्यै कमिट नगर्नुहोस् | API keys र पासवर्डहरू सार्वजनिक रिपोजमा कहिल्यै हुनु हुँदैन |
+| **निर्भरता व्यवस्थापन** | Dependabot अपडेटहरूको लागि सक्षम गर्नुहोस् | तपाईंको निर्भरतालाई सुरक्षित र अद्यावधिक राख्छ |
 
-> ⚠️ **महत्त्वपूर्ण सुरक्षा सम्झना**: कुनै पनि रिपोजिटरीमा API कुञ्जीहरू, पासवर्डहरू, वा अन्य संवेदनशील जानकारी कहिल्यै कमिट नगर्नुहोस्। संवेदनशील डाटालाई सुरक्षित गर्न वातावरण चरहरू र `.gitignore` फाइलहरू प्रयोग गर्नुहोस्।
+> ⚠️ **महत्त्वपूर्ण सुरक्षा सम्झना**: API keys, पासवर्डहरू, वा अन्य संवेदनशील जानकारी कुनै पनि रिपोजिटरीमा कहिल्यै कमिट नगर्नुहोस्। संवेदनशील डाटालाई सुरक्षित गर्न environment variables र `.gitignore` फाइलहरू प्रयोग गर्नुहोस्।
 
 **आधुनिक प्रमाणीकरण सेटअप:**
 
@@ -97,72 +114,96 @@ ssh-keygen -t ed25519 -C "your_email@example.com"
 git remote set-url origin git@github.com:username/repository.git
 ```
 
-> 💡 **प्रो टिप**: SSH कुञ्जीहरूले बारम्बार पासवर्डहरू प्रविष्ट गर्न आवश्यकतालाई हटाउँछ र परम्परागत प्रमाणीकरण विधिहरू भन्दा सुरक्षित छन्।
+> 💡 **प्रो टिप**: SSH keys ले बारम्बार पासवर्ड प्रविष्ट गर्न आवश्यकतालाई हटाउँछ र परम्परागत प्रमाणीकरण विधिहरू भन्दा सुरक्षित हुन्छ।
 
 ---
 
 ## तपाईंको कोडलाई प्रो जस्तै व्यवस्थापन गर्नुहोस्
 
-ठीक छ, अब कुरा साँच्चै रोमाञ्चक हुँदैछ! 🎉 हामी तपाईंको कोडलाई प्रोहरू जस्तै ट्र्याक र व्यवस्थापन गर्ने तरिका सिक्दैछौं, र इमानदारीपूर्वक, यो मेरो मनपर्ने कुरा हो किनभने यो यति परिवर्तनकारी छ।
-
-कल्पना गर्नुहोस्: तपाईं एक अद्भुत कथा लेख्दै हुनुहुन्छ, र तपाईं प्रत्येक ड्राफ्ट, प्रत्येक शानदार सम्पादन, र प्रत्येक "पर्खनुहोस्, यो अद्भुत छ!" क्षणलाई ट्र्याक गर्न चाहनुहुन्छ। यही हो Git तपाईंको कोडको लागि गर्छ! यो सबै कुरा सम्झने सबैभन्दा अविश्वसनीय समय-यात्रा नोटबुक भएको जस्तै हो – प्रत्येक कुञ्जी स्ट्रोक, प्रत्येक परिवर्तन, प्रत्येक "ओहो, यसले सबै कुरा बिगार्यो" क्षण जुन तपाईं तुरुन्तै उल्टाउन सक्नुहुन्छ।
-
-म इमानदारीपूर्वक भन्न सक्छु – यो सुरुमा भारी लाग्न सक्छ। जब मैले सुरु गरे, मैले सोचेँ "किन म केवल मेरो फाइलहरू सामान्य रूपमा बचत गर्न सक्दिन?" तर यसमा विश्वास गर्नुहोस्: एकपटक Git तपाईंलाई क्लिक गरेपछि (र यो हुनेछ!), तपाईंको एउटा प्रकाश बल क्षण हुनेछ जहाँ तपाईं सोच्नुहुन्छ "मैले यो बिना कहिल्यै कोड कसरी गरे?" यो तपाईंले आफ्नो जीवनभर हिँड्दै गर्दा उड्न सक्ने कुरा पत्ता लगाउने जस्तै हो!
-
-मानौं तपाईंको स्थानीय रूपमा केही कोड परियोजनाको साथ एक फोल्डर छ र तपाईं आफ्नो प्रगति ट्र्याक गर्न चाहनुहुन्छ। केही मानिसहरूले Git प्रयोग गर्न भविष्यको आफ्नै लागि प्रेम पत्र लेख्न जस्तो तुलना गर्छन्। तपाईंको कमिट सन्देशहरू दिन, हप्ता वा महिना पछि पढ्दा तपाईंले किन निर्णय गर्नुभयो भनेर सम्झन सक्नुहुन्छ, वा परिवर्तन "रोलब्याक" गर्न सक्नुहुन्छ - त्यो हो, जब तपाईं राम्रो "कमिट सन्देशहरू" लेख्नुहुन्छ।
+ठीक छ, अब कुरा साँच्चै रोमाञ्चक हुँदैछ! 🎉 हामी तपाईंको कोडलाई प्रोहरू जस्तै ट्र्याक र व्यवस्थापन गर्ने तरिका सिक्दैछौं, र इमानदारीपूर्वक, यो मेरो मनपर्ने कुरा हो किनभने यो पूर्ण रूपमा गेम-चेंजर हो।
+
+कल्पना गर्नुहोस्: तपाईं एक अद्भुत कथा लेख्दै हुनुहुन्छ, र तपाईं प्रत्येक ड्राफ्ट, प्रत्येक उत्कृष्ट सम्पादन, र प्रत्येक "पर्खनुहोस्, यो प्रतिभा हो!" क्षणलाई ट्र्याक गर्न चाहनुहुन्छ। यही कुरा Git तपाईंको कोडको लागि गर्छ! यो सबै कुरा सम्झने सबैभन्दा अविश्वसनीय समय-यात्रा नोटबुक जस्तै हो – प्रत्येक कीस्ट्रोक, प्रत्येक परिवर्तन, प्रत्येक "ओह, यसले सबै कुरा बिगार्यो" क्षण जुन तपाईं तुरुन्तै पूर्ववत गर्न सक्नुहुन्छ।
+
+म इमान्दारीपूर्वक भन्न सक्छु – यो सुरुमा भारी लाग्न सक्छ। जब मैले सुरु गरे, मैले सोचेँ "किन म केवल मेरो फाइलहरू सामान्य रूपमा बचत गर्न सक्दिन?" तर यसमा विश्वास गर्नुहोस्: एकपटक Git तपाईंलाई क्लिक गरेपछि (र यो हुनेछ!), तपाईंको एउटा प्रकाश बल क्षण हुनेछ जहाँ तपाईं सोच्नुहुन्छ "मैले यस बिना कहिल्यै कोड कसरी गरे?" यो जस्तै हो जब तपाईं हिँड्दै आफ्नो जीवन बिताएपछि उड्न सक्नुहुन्छ!
+
+मानौं तपाईंको स्थानीय रूपमा कोड परियोजनाको साथ एक फोल्डर छ र तपाईं git - संस्करण नियन्त्रण प्रणाली प्रयोग गरेर आफ्नो प्रगति ट्र्याक गर्न चाहनुहुन्छ। केही मानिसहरूले git प्रयोग गर्न भविष्यको आफ्नै लागि प्रेम पत्र लेख्नको रूपमा तुलना गर्छन्। तपाईंको कमिट सन्देशहरू दिनहरू वा हप्ताहरू वा महिनाहरू पछि पढ्दा तपाईंले किन निर्णय गर्नुभयो भनेर सम्झन सक्नुहुन्छ, वा परिवर्तन "रोलब्याक" गर्न सक्नुहुन्छ – त्यो हो, जब तपाईंले राम्रो "कमिट सन्देशहरू" लेख्नुहुन्छ।
+
+```mermaid
+flowchart TD
+    A[📁 Your Project Files] --> B{Is it a Git Repository?}
+    B -->|No| C[git init]
+    B -->|Yes| D[Make Changes]
+    C --> D
+    D --> E[git add .]
+    E --> F["git commit -m 'message'"]
+    F --> G[git push]
+    G --> H[🌟 Code on GitHub!]
+    
+    H --> I{Want to collaborate?}
+    I -->|Yes| J[Fork & Clone]
+    I -->|No| D
+    J --> K[Create Branch]
+    K --> L[Make Changes]
+    L --> M[Pull Request]
+    M --> N[🎉 Contributing!]
+    
+    style A fill:#fff59d
+    style H fill:#c8e6c9
+    style N fill:#ff4081,color:#fff
+```
 
 ### कार्य: तपाईंको पहिलो रिपोजिटरी सिर्जना गर्नुहोस्!
 
-> 🎯 **तपाईंको मिशन (र म तपाईंको लागि यति उत्साहित छु!)**: हामी सँगै तपाईंको पहिलो GitHub रिपोजिटरी सिर्जना गर्न जाँदैछौं! यहाँ समाप्त भएपछि, तपाईंको कोड बस्ने इन्टरनेटको आफ्नै सानो कुनो हुनेछ, र तपाईंले आफ्नो पहिलो "कमिट" (यो डेभलपरको भाषामा तपाईंको कामलाई साँच्चै स्मार्ट तरिकाले बचत गर्ने) बनाउनुहुनेछ।
+> 🎯 **तपाईंको मिशन (र म तपाईंको लागि धेरै उत्साहित छु!)**: हामी सँगै तपाईंको पहिलो GitHub रिपोजिटरी सिर्जना गर्नेछौं! यहाँ समाप्त भएपछि, तपाईंको कोड बस्ने इन्टरनेटको आफ्नै सानो कुनो हुनेछ, र तपाईंले आफ्नो पहिलो "कमिट" (यो डेभलपरको भाषामा तपाईंको कामलाई साँच्चै स्मार्ट तरिकाले बचत गर्ने) गर्नुभएको हुनेछ।
 >
-> यो साँच्चै यति विशेष क्षण हो – तपाईं आधिकारिक रूपमा विकासकर्ताहरूको विश्वव्यापी समुदायमा सामेल हुन जाँदै हुनुहुन्छ! मैले मेरो पहिलो रिपो सिर्जना गर्दा "वाह, म साँच्चै यो गर्दैछु!" भन्ने रोमाञ्चकता अझै सम्झन्छु।
+> यो साँच्चै यस्तो विशेष क्षण हो – तपाईं आधिकारिक रूपमा विकासकर्ताहरूको विश्वव्यापी समुदायमा सामेल हुन लाग्नुभएको छ! मैले मेरो पहिलो रिपो सिर्जना गर्दा र "वाह, म साँच्चै यो गर्दैछु!" भनेर सोच्दा आएको रोमाञ्चकता अझै सम्झन्छु।
 
-हामी यो साहसिक यात्रा सँगै लिनेछौं, चरणबद्ध रूपमा। प्रत्येक भागमा समय लिनुहोस् – हतारको लागि कुनै पुरस्कार छैन, र म वाचा गर्छु कि प्रत्येक चरणले अर्थ राख्नेछ। सम्झनुहोस्, तपाईंले प्रशंसा गर्ने प्रत्येक कोडिङ सुपरस्टार एकपटक ठीक त्यही ठाउँमा थिए जहाँ तपाईं हुनुहुन्छ, आफ्नो पहिलो रिपोजिटरी सिर्जना गर्न जाँदै। कति चिसो छ, हैन?
+हामी यो साहसिक यात्रा सँगै गर्नेछौं, चरणबद्ध रूपमा। प्रत्येक भागमा आफ्नो समय लिनुहोस् – हतारको लागि कुनै पुरस्कार छैन, र म वाचा गर्छु कि प्रत्येक चरणले अर्थ राख्नेछ। सम्झनुहोस्, तपाईंले प्रशंसा गर्ने प्रत्येक कोडिङ सुपरस्टार एकपटक ठीक त्यही ठाउँमा थिए जहाँ तपाईं हुनुहुन्छ, आफ्नो पहिलो रिपोजिटरी सिर्जना गर्न लागेका। यो कति चिसो छ?
 
 > भिडियो हेर्नुहोस्
 > 
 > [![Git र GitHub आधारभूत भिडियो](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
 
-**यसलाई सँगै गरौं:**
+**सँगै गरौं:**
 
-1. **GitHub मा तपाईंको रिपोजिटरी सिर्जना गर्नुहोस्**। GitHub.com मा जानुहोस् र त्यो चम्किलो हरियो **नयाँ** बटन (वा माथि दायाँ कुनामा **+** चिन्ह) खोज्नुहोस्। यसलाई क्लिक गर्नुहोस् र **नयाँ रिपोजिटरी** चयन गर्नुहोस्।
+1. **GitHub मा आफ्नो रिपोजिटरी सिर्जना गर्नुहोस्**। GitHub.com मा जानुहोस् र त्यो चम्किलो हरियो **New** बटन (वा माथि दायाँ कुनामा **+** चिन्ह) खोज्नुहोस्। यसलाई क्लिक गर्नुहोस् र **New repository** चयन गर्नुहोस्।
 
    यहाँ के गर्ने:
    1. तपाईंको रिपोजिटरीलाई नाम दिनुहोस् – यसलाई तपाईंको लागि अर्थपूर्ण बनाउनुहोस्!
    1. चाहनुहुन्छ भने विवरण थप्नुहोस् (यसले अरूलाई तपाईंको परियोजना के बारेमा हो भनेर बुझ्न मद्दत गर्दछ)
-   1. तपाईं यसलाई सार्वजनिक (सबैले देख्न सक्छन्) वा निजी (केवल तपाईंको लागि) चाहनुहुन्छ कि छैन निर्णय गर्नुहोस्
-   1. म सिफारिस गर्दछु कि README फाइल थप्नको लागि बाकस जाँच गर्नुहोस् – यो तपाईंको परियोजनाको अगाडिको पृष्ठ जस्तै हो
-   1. **रिपोजिटरी सिर्जना गर्नुहोस्** क्लिक गर्नुहोस् र उत्सव मनाउनुहोस् – तपाईंले आफ्नो पहिलो रिपो सिर्जना गर्नुभयो! 🎉
+   1. तपाईं यसलाई सार्वजनिक (सबैले देख्न सक्छन्) वा निजी (केवल तपाईंको लागि) बनाउन चाहनुहुन्छ कि निर्णय गर्नुहोस्
+   1. म सिफारिस गर्छु कि README फाइल थप्नको लागि बक्स जाँच गर्नुहोस् – यो तपाईंको परियोजनाको अगाडिको पृष्ठ जस्तै हो
+   1. **Create repository** क्लिक गर्नुहोस् र उत्सव मनाउनुहोस् – तपाईंले आफ्नो पहिलो रिपो सिर्जना गर्नुभयो! 🎉
 
-2. **तपाईंको परियोजना फोल्डरमा जानुहोस्**। अब हामी तपाईंको टर्मिनल खोलौं (चिन्ता नगर्नुहोस्, यो देखिने जस्तो डरावना छैन!)। हामीले तपाईंको कम्प्युटरलाई तपाईंको परियोजना फाइलहरू कहाँ छन् भनेर भन्न आवश्यक छ। यो कमाण्ड टाइप गर्नुहोस्:
+2. **तपाईंको परियोजना फोल्डरमा जानुहोस्**। अब हामी तपाईंको टर्मिनल खोलौं (चिन्ता नगर्नुहोस्, यो देखिए जस्तो डर लाग्दो छैन!)। हामीले तपाईंको कम्प्युटरलाई तपाईंको परियोजना फाइलहरू कहाँ छन् भनेर बताउन आवश्यक छ। यो कमाण्ड टाइप गर्नुहोस्:
 
    ```bash
    cd [name of your folder]
    ```
 
    **यहाँ हामी के गर्दैछौं:**
-   - हामी मूलतः भनिरहेका छौं "हे कम्प्युटर, मलाई मेरो परियोजना फोल्डरमा लैजाऊ"
-   - यो तपाईंको डेस्कटपमा विशिष्ट फोल्डर खोल्न जस्तै हो, तर हामी यसलाई पाठ कमाण्डहरूसँग गर्दैछौं
-   - `[तपाईंको फोल्डरको नाम]` लाई तपाईंको परियोजना फोल्डरको वास्तविक नामले प्रतिस्थापन गर्नुहोस्
+   - हामी मूलतः "हे कम्प्युटर, मलाई मेरो परियोजना फोल्डरमा लैजाऊ" भनिरहेका छौं
+   - यो तपाईंको डेस्कटपमा विशिष्ट फोल्डर खोल्ने जस्तै हो, तर हामी यसलाई टेक्स्ट कमाण्डहरूसँग गर्दैछौं
+   - `[name of your folder]` लाई तपाईंको परियोजना फोल्डरको वास्तविक नामले प्रतिस्थापन गर्नुहोस्
 
-3. **तपाईंको फोल्डरलाई Git रिपोजिटरीमा बदल्नुहोस्**। यहाँ जादू हुन्छ! टाइप गर्नुहोस्:
+3. **तपाईंको फोल्डरलाई Git रिपोजिटरीमा परिवर्तन गर्नुहोस्**। यहाँ जादु हुन्छ! टाइप गर्नुहोस्:
 
    ```bash
    git init
    ```
 
    **यहाँ के भयो (साँच्चै चिसो कुरा!):**
-   - Git ले तपाईंको परियोजनामा ​​लुकेको `.git` फोल्डर सिर्जना गर्‍यो – तपाईंले यो देख्नुहुने छैन, तर यो त्यहाँ छ!
-   - तपाईंको नियमित फोल्डर अब एक "रिपोजिटरी" हो जसले तपाईंले गरेको प्रत्येक परिवर्तन ट्र्याक गर्न सक्छ
-   - यसलाई तपाईंको फोल्डरलाई सबै कुरा सम्झनको लागि सुपरपावर दिने जस्तो सोच्नुहोस्
+   - Git ले तपाईंको परियोजनामा ​​लुकेको `.git` फोल्डर सिर्जना गर्यो – तपाईंले यो देख्नुहुनेछैन, तर यो त्यहाँ छ!
+   - तपाईंको नियमित फोल्डर अब "रिपोजिटरी" हो जसले तपाईंले गरेको प्रत्येक परिवर्तन ट्र्याक गर्न सक्छ
+   - यसलाई तपाईंको फोल्डरलाई सबै कुरा सम्झन सुपरपावर दिने जस्तै सोच्नुहोस्
 
-4. **के भइरहेको छ जाँच गर्नुहोस्**। अहिले Git ले तपाईंको परियोजनाको बारेमा के सोचिरहेको छ हेर्नुहोस्:
+4. **के भइरहेको छ जाँच गर्नुहोस्**। अहिले Git ले तपाईंको परियोजनाबारे के सोचिरहेको छ हेर्नुहोस्:
 
    ```bash
    git status
    ```
 
-   **Git ले तपाईंलाई के बताइरहेको छ बुझ्दै:**
+   **Git तपाईंलाई के बताउँदैछ बुझ्दै:**
    
    तपाईंले यस्तो देख्न सक्नुहुन्छ:
 
@@ -175,23 +216,23 @@ git remote set-url origin git@github.com:username/repository.git
         modified:   file2.txt
    ```
 
-   **प्यानिक नगर्नुहोस्! यसको मतलब के हो:**
-   - **रातो** फाइलहरू ती फाइलहरू हुन् जसमा परिवर्तनहरू छन् तर बचतको लागि तयार छैनन्
-   - **हरियो** फाइलहरू (जब तपाईं तिनीहरूलाई देख्नुहुन्छ) बचतको लागि तयार छन्
-   - Git तपाईंलाई अगाडि के गर्न सकिन्छ भनेर ठीक बताउँदैछ
+   **प्यानिक नगर्नुहोस्! यसको अर्थ के हो:**
+   - **रातो** मा फाइलहरू फाइलहरू हुन् जसमा परिवर्तनहरू छन् तर बचत गर्न तयार छैनन्
+   - **हरियो** मा फाइलहरू (जब तपाईंले देख्नुहुन्छ) बचत गर्न तयार छन्
+   - Git तपाईंलाई अगाडि के गर्न सकिन्छ भनेर ठीकसँग बताउँदैछ
 
-   > 💡 **प्रो टिप**: `git status` कमाण्ड तपाईंको सबैभन्दा राम्रो साथी हो! तपाईंलाई के भइरहेको छ भनेर भ्रमित हुँदा यो प्रयोग गर्नुहोस्। यो Git लाई सोध्न जस्तै हो "हे, अहिलेको स्थिति के हो?"
+   > 💡 **प्रो टिप**: `git status` कमाण्ड तपाईंको सबैभन्दा राम्रो साथी हो! तपाईंलाई के भइरहेको छ भनेर थाहा छैन भने यो प्रयोग गर्नुहोस्। यो जस्तै हो कि Git लाई सोध्दै "हे, अहिले स्थिति के हो?"
 
-5. **तपाईंको फाइलहरू बचतको लागि तयार गर्नुहोस्** (यसलाई "स्टेजिङ" भनिन्छ):
+5. **तपाईंको फाइलहरू बचत गर्न तयार गर्नुहोस्** (यसलाई "स्टेजिङ" भनिन्छ):
 
    ```bash
    git add .
    ```
 
    **हामीले के गर्यौं:**
-   - हामीले Git लाई भन्यौं "हे, म मेरो फोल्डरमा सबै फाइलहरूलाई अर्को बचतमा समावेश गर्न चाहन्छु"
-   - `.` भन्नु भनेको "यस फोल्डरमा सबै कुरा" जस्तै हो
-   - अब तपाईंको फाइलहरू "स्टेज गरिएको" छ र अर्को चरणको लागि तयार छ
+   - हामीले Git लाई "हे, म मेरो फोल्डरका सबै फाइलहरूलाई अर्को बचतमा समावेश गर्न चाहन्छु" भनेका छौं
+   - `.` जस्तै हो "यस फोल्डरमा सबै कुरा"
+   - अब तपाईंको फाइलहरू "स्टेज गरिएको" छन् र अर्को चरणको लागि तयार छन्
 
    **अझ चयनात्मक हुन चाहनुहुन्छ?** तपाईं केवल विशिष्ट फाइलहरू थप्न सक्नुहुन्छ:
 
@@ -199,10 +240,10 @@ git remote set-url origin git@github.com:username/repository.git
    git add [file or folder name]
    ```
 
-   **किन तपाईंले यो गर्न चाहनुहुन्छ?**
+   **किन तपाईं यसो गर्न चाहनुहुन्छ?**
    - कहिलेकाहीं तपाईं सम्बन्धित परिवर्तनहरू सँगै बचत गर्न चाहनुहुन्छ
    - यसले तपाईंलाई तपाईंको कामलाई तार्किक टुक्रामा व्यवस्थित गर्न मद्दत गर्दछ
-   - के परिवर्तन भयो र कहिले भयो भनेर बुझ्न सजिलो बनाउँछ
+   - के परिवर्तन भयो र कहिले भनेर बुझ्न सजिलो बनाउँछ
 
    **तपाईंको विचार परिवर्तन भयो?** चिन्ता नगर्नुहोस्! तपाईं फाइलहरूलाई यसरी अनस्टेज गर्न सक्नुहुन्छ:
 
@@ -214,7 +255,7 @@ git remote set-url origin git@github.com:username/repository.git
    git reset [file name]
    ```
 
-   चिन्ता नगर्नुहोस् – यसले तपाईंको काम मेटाउँदैन, यसले केवल फाइलहरूलाई "बचतको लागि तयार" ढेरबाट हटाउँछ।
+   चिन्ता नगर्नुहोस् – यसले तपाईंको काम मेटाउँदैन, यसले केवल फाइलहरूलाई "बचत गर्न तयार" थुप्रोबाट हटाउँछ।
 
 6. **तपाईंको काम स्थायी रूपमा बचत गर्नुहोस्** (तपाईंको पहिलो कमिट बनाउँदै!):
 
@@ -230,12 +271,15 @@ git remote set-url origin git@github.com:username/repository.git
    - Git ले यस स्न्यापशटलाई एक अद्वितीय ID दियो ताकि तपाईंले यसलाई पछि सधैं फेला पार्न सक्नुहुन्छ
    - तपाईंले आधिकारिक रूपमा तपाईंको परियोजनाको इतिहास ट्र्याक गर्न सुरु गर्नुभएको छ!
 
-   > 💡 **भविष्यका कमिट सन्देशहरू**: तपाईंको अर्को कमिटहरूको लागि, अझ वर्णनात्मक बनाउनुहोस्! "अपडेट गरिएको सामग्री" सट्टा, "होमपेजमा सम्पर्क फारम थप
-   - हामीले तपाईंको स्थानीय प्रोजेक्ट र तपाईंको GitHub रिपोजिटरी बीच कनेक्शन बनायौं।
-   - "Origin" तपाईंको GitHub रिपोजिटरीको उपनाम मात्र हो – यो फोनमा सम्पर्क थप्ने जस्तै हो।
-   - अब तपाईंको स्थानीय Gitलाई थाहा छ कि तपाईं आफ्नो कोड साझा गर्न तयार हुँदा कहाँ पठाउने।
+   > 💡 **भविष्यका कमिट सन्देशहरू**: तपाईंको अर्को कमिटहरूको लागि, अझ वर्णनात्मक बनाउनुहोस्! "अपडेट गरिएको सामान" सट्टा, "होमपेजमा सम्पर्क फारम थप्नुहोस्" वा "नेभिगेसन मेनु बग ठीक गर्नुहोस्" प्रयास गर्नुहोस्। तपाईंको भविष्यको स्वयम् तपाईंलाई धन्यवाद दिनेछ!
+
+7. **तपाईंको स्थानीय परियोजनालाई GitHub सँग जडान गर्नुहोस्**। अहिले, तपाईंको परियोजना केवल तपाईंको कम्प्युटर
+**हामीले के गर्यौं:**
+- तपाईंको स्थानीय प्रोजेक्ट र GitHub रिपोजिटरी बीच कनेक्शन बनायौं
+- "Origin" भनेको तपाईंको GitHub रिपोजिटरीको उपनाम हो – यो तपाईंको फोनमा सम्पर्क थप्ने जस्तै हो
+- अब तपाईंको स्थानीय Git लाई थाहा छ कि तपाईंको कोड कहिले र कहाँ पठाउनुपर्छ
 
-   💡 **सजिलो तरिका**: यदि तपाईंले GitHub CLI स्थापना गर्नुभएको छ भने, तपाईंले यो एक आदेशमा गर्न सक्नुहुन्छ:
+💡 **सजिलो तरिका**: यदि तपाईंले GitHub CLI स्थापना गर्नुभएको छ भने, तपाईंले यो एक आदेशमा गर्न सक्नुहुन्छ:
    ```bash
    gh repo create my-repo --public --push --source=.
    ```
@@ -246,19 +290,19 @@ git remote set-url origin git@github.com:username/repository.git
    git push -u origin main
    ```
 
-   **🚀 यही हो! तपाईं आफ्नो कोड GitHub मा अपलोड गर्दै हुनुहुन्छ!**
-   
-   **के भइरहेको छ:**
-   - तपाईंको कमिटहरू तपाईंको कम्प्युटरबाट GitHub मा यात्रा गर्दैछन्।
-   - `-u` फ्ल्यागले स्थायी कनेक्शन सेटअप गर्दछ ताकि भविष्यमा पुशहरू सजिलो होस्।
-   - "main" तपाईंको प्राथमिक ब्रान्चको नाम हो (जस्तै मुख्य फोल्डर)।
-   - यसपछि, तपाईं भविष्यका अपलोडहरूको लागि मात्र `git push` टाइप गर्न सक्नुहुन्छ!
+**🚀 यही हो! तपाईं आफ्नो कोड GitHub मा अपलोड गर्दै हुनुहुन्छ!**
+
+**के भइरहेको छ:**
+- तपाईंको commits तपाईंको कम्प्युटरबाट GitHub मा यात्रा गर्दैछन्
+- `-u` फ्ल्यागले स्थायी कनेक्शन सेटअप गर्छ ताकि भविष्यमा push गर्न सजिलो होस्
+- "main" भनेको तपाईंको प्राथमिक शाखाको नाम हो (मुख्य फोल्डर जस्तै)
+- यसपछि, तपाईं भविष्यका अपलोडहरूको लागि केवल `git push` टाइप गर्न सक्नुहुन्छ!
 
-   💡 **छोटो नोट**: यदि तपाईंको ब्रान्चको नाम केही फरक छ (जस्तै "master"), त्यो नाम प्रयोग गर्नुहोस्। तपाईं `git branch --show-current` प्रयोग गरेर जाँच गर्न सक्नुहुन्छ।
+💡 **छोटो नोट**: यदि तपाईंको शाखाको नाम "master" जस्तै केही हो भने, त्यो नाम प्रयोग गर्नुहोस्। तपाईं `git branch --show-current` प्रयोग गरेर जाँच गर्न सक्नुहुन्छ।
 
 9. **तपाईंको नयाँ दैनिक कोडिङ ताल** (यो लत लाग्ने ठाउँ हो!):
 
-   अबदेखि, जब तपाईं आफ्नो प्रोजेक्टमा परिवर्तन गर्नुहुन्छ, तपाईंले यो सरल तीन चरणको नृत्य गर्नुभएको छ:
+अबदेखि, जब तपाईं आफ्नो प्रोजेक्टमा परिवर्तन गर्नुहुन्छ, तपाईंले यो सरल तीन-चरणको नृत्य गर्न सक्नुहुन्छ:
 
    ```bash
    git add .
@@ -266,69 +310,115 @@ git remote set-url origin git@github.com:username/repository.git
    git push
    ```
 
-   **यो तपाईंको कोडिङको मुटुको धड्कन बन्छ:**
-   - तपाईंको कोडमा केही अद्भुत परिवर्तन गर्नुहोस् ✨
-   - `git add` प्रयोग गरेर तिनीहरूलाई स्टेज गर्नुहोस् ("हे Git, यी परिवर्तनहरूमा ध्यान दिनुहोस्!")
-   - `git commit` र वर्णनात्मक सन्देशको साथ तिनीहरूलाई बचत गर्नुहोस् (भविष्यमा तपाईंलाई धन्यवाद दिनुहुनेछ!)
-   - `git push` प्रयोग गरेर तिनीहरूलाई संसारसँग साझा गर्नुहोस् 🚀
-   - दोहोर्याउनुहोस् – गम्भीर रूपमा, यो सास फेर्ने जस्तै प्राकृतिक बन्छ!
-
-   म यो वर्कफ्लोलाई माया गर्छु किनभने यो भिडियो गेममा धेरै बचत बिन्दुहरू भएको जस्तै हो। तपाईंले मनपर्ने परिवर्तन गर्नुभयो? कमिट गर्नुहोस्! केही जोखिमपूर्ण प्रयास गर्न चाहनुहुन्छ? कुनै समस्या छैन – यदि चीजहरू गलत दिशामा जान्छ भने तपाईं सधैं आफ्नो अन्तिम कमिटमा फर्कन सक्नुहुन्छ!
+**यो तपाईंको कोडिङको धड्कन बन्छ:**
+- आफ्नो कोडमा केही अद्भुत परिवर्तन गर्नुहोस् ✨
+- `git add` प्रयोग गरेर stage गर्नुहोस् ("हे Git, यी परिवर्तनहरूमा ध्यान दिनुहोस्!")
+- `git commit` र वर्णनात्मक सन्देशको साथ save गर्नुहोस् (भविष्यको तपाईंलाई धन्यवाद!)
+- `git push` प्रयोग गरेर संसारसँग share गर्नुहोस् 🚀
+- दोहोर्याउनुहोस् – गम्भीर रूपमा, यो सास फेर्ने जस्तै प्राकृतिक बन्छ!
+
+म यो workflow मन पराउँछु किनभने यो भिडियो गेममा धेरै save points भएको जस्तै हो। तपाईंले मन पराएको परिवर्तन गर्नुभयो? Commit गर्नुहोस्! केही जोखिमपूर्ण प्रयास गर्न चाहनुहुन्छ? कुनै समस्या छैन – यदि चीजहरू गलत भए भने तपाईं सधैं आफ्नो अन्तिम commit मा फर्कन सक्नुहुन्छ!
+
+> 💡 **Tip**: तपाईंले `.gitignore` फाइल अपनाउन चाहनुहुन्छ जसले तपाईं GitHub मा track गर्न नचाहेको फाइलहरू रोक्छ - जस्तै त्यो नोट्स फाइल जुन तपाईंले त्यही फोल्डरमा राख्नुहुन्छ तर सार्वजनिक रिपोजिटरीमा कुनै स्थान छैन। तपाईं [.gitignore templates](https://github.com/github/gitignore) मा टेम्प्लेटहरू पाउन सक्नुहुन्छ वा [gitignore.io](https://www.toptal.com/developers/gitignore) प्रयोग गरेर एउटा बनाउन सक्नुहुन्छ।
+
+### 🧠 **पहिलो रिपोजिटरी चेक-इन: कस्तो लाग्यो?**
+
+**एक क्षणको लागि उत्सव मनाउनुहोस् र विचार गर्नुहोस्:**
+- पहिलो पटक तपाईंको कोड GitHub मा देख्दा कस्तो लाग्यो?
+- कुन चरण सबैभन्दा भ्रमित लाग्यो, र कुन चरण आश्चर्यजनक रूपमा सजिलो लाग्यो?
+- तपाईं आफ्नो शब्दमा `git add`, `git commit`, र `git push` बीचको भिन्नता व्याख्या गर्न सक्नुहुन्छ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> LocalFiles: Create project
+    LocalFiles --> Staged: git add .
+    Staged --> Committed: git commit
+    Committed --> GitHub: git push
+    GitHub --> [*]: Success! 🎉
+    
+    note right of Staged
+        Files ready to save
+    end note
+    
+    note right of Committed
+        Snapshot created
+    end note
+```
 
-   > 💡 **टिप**: तपाईंले `.gitignore` फाइल अपनाउन चाहनुहुन्छ जसले तपाईं ट्र्याक गर्न चाहनुहुन्न फाइलहरू GitHub मा देखिनबाट रोक्छ - जस्तै नोट्स फाइल जुन तपाईंले त्यही फोल्डरमा भण्डारण गर्नुहुन्छ तर सार्वजनिक रिपोजिटरीमा कुनै स्थान छैन। तपाईं `.gitignore` फाइलहरूको टेम्प्लेटहरू [.gitignore templates](https://github.com/github/gitignore) मा पाउन सक्नुहुन्छ वा [gitignore.io](https://www.toptal.com/developers/gitignore) प्रयोग गरेर एउटा सिर्जना गर्न सक्नुहुन्छ।
+> **स्मरण गर्नुहोस्**: अनुभवी विकासकर्ताहरूले पनि कहिलेकाहीं ठ्याक्कै आदेशहरू बिर्सन्छन्। यो workflow मांसपेशी स्मृति बन्न अभ्यास चाहिन्छ - तपाईं राम्रो गर्दै हुनुहुन्छ!
 
-#### आधुनिक Git वर्कफ्लोहरू
+#### आधुनिक Git workflow
 
 यी आधुनिक अभ्यासहरू अपनाउने विचार गर्नुहोस्:
 
-- **Conventional Commits**: `feat:`, `fix:`, `docs:` जस्ता मानकीकृत कमिट सन्देश ढाँचा प्रयोग गर्नुहोस्। थप जान्नका लागि [conventionalcommits.org](https://www.conventionalcommits.org/) हेर्नुहोस्।
-- **Atomic commits**: प्रत्येक कमिटलाई एकल तार्किक परिवर्तनको प्रतिनिधित्व गराउनुहोस्।
-- **Frequent commits**: ठूला, कम कमिटहरू भन्दा वर्णनात्मक सन्देशहरू सहित बारम्बार कमिट गर्नुहोस्।
+- **Conventional Commits**: `feat:`, `fix:`, `docs:` जस्ता मानकीकृत commit सन्देश ढाँचा प्रयोग गर्नुहोस्। [conventionalcommits.org](https://www.conventionalcommits.org/) मा थप जान्नुहोस्।
+- **Atomic commits**: प्रत्येक commit लाई एकल तार्किक परिवर्तनको प्रतिनिधित्व गराउनुहोस्।
+- **Frequent commits**: ठूला, कम बारम्बार हुने commits को सट्टा वर्णनात्मक सन्देशहरू सहित बारम्बार commit गर्नुहोस्।
 
-#### कमिट सन्देशहरू
+#### Commit सन्देशहरू
 
-एक उत्कृष्ट Git कमिट विषय लाइनले निम्न वाक्य पूरा गर्दछ:
-यदि लागू गरियो भने, यो कमिट <तपाईंको विषय लाइन यहाँ> हुनेछ।
+एक उत्कृष्ट Git commit विषय लाइनले निम्न वाक्य पूरा गर्छ:
+यदि लागू गरियो भने, यो commit <तपाईंको विषय लाइन यहाँ>
 
-विषयको लागि अनिवार्य, वर्तमान काल प्रयोग गर्नुहोस्: "change" होइन "changed" वा "changes"। 
-विषयमा जस्तै, शरीरमा (वैकल्पिक) पनि अनिवार्य, वर्तमान काल प्रयोग गर्नुहोस्। शरीरले परिवर्तनको प्रेरणा समावेश गर्नुपर्छ र यसलाई अघिल्लो व्यवहारसँग तुलना गर्नुपर्छ। तपाईं `किन` व्याख्या गर्दै हुनुहुन्छ, `कसरी` होइन।
+विषयको लागि imperative, present tense प्रयोग गर्नुहोस्: "change" होइन "changed" वा "changes"। 
+विषयमा जस्तै, body (वैकल्पिक) मा पनि imperative, present tense प्रयोग गर्नुहोस्। body ले परिवर्तनको प्रेरणा समावेश गर्नुपर्छ र यसलाई अघिल्लो व्यवहारसँग तुलना गर्नुपर्छ। तपाईं `किन` व्याख्या गर्दै हुनुहुन्छ, `कसरी` होइन।
 
-✅ GitHub वरिपरि केही मिनेट सर्फ गर्नुहोस्। के तपाईं साँच्चै उत्कृष्ट कमिट सन्देश पाउन सक्नुहुन्छ? के तपाईं साँच्चै न्यूनतम एक पाउन सक्नुहुन्छ? कमिट सन्देशमा जानकारीको सबैभन्दा महत्त्वपूर्ण र उपयोगी के हो भन्ने तपाईंलाई लाग्छ?
+✅ केही समय GitHub वरिपरि सर्फ गर्न लिनुहोस्। के तपाईं साँच्चै उत्कृष्ट commit सन्देश पाउन सक्नुहुन्छ? के तपाईं साँच्चै न्यूनतम commit सन्देश पाउन सक्नुहुन्छ? commit सन्देशमा कुन जानकारी सबैभन्दा महत्त्वपूर्ण र उपयोगी छ भन्ने तपाईंलाई के लाग्छ?
 
 ## अरूसँग काम गर्ने (मजाको भाग!)
 
-तपाईंको टोपी समात्नुहोस् किनभने यही हो जहाँ GitHub पूर्ण रूपमा जादुई बन्छ! 🪄 तपाईंले आफ्नो कोड व्यवस्थापन गर्न सिक्नुभयो, तर अब हामी मेरो पूर्ण मनपर्ने भागमा डुब्न गइरहेका छौं – संसारभरका अद्भुत व्यक्तिहरूसँग सहकार्य।
+तपाईंको टोपी समात्नुहोस् किनभने यो GitHub बिल्कुल जादुई बन्ने ठाउँ हो! 🪄 तपाईंले आफ्नो कोड व्यवस्थापन गर्न सिक्नुभयो, तर अब हामी मेरो सबैभन्दा मनपर्ने भागमा डुब्न जाँदैछौं – संसारभरका अद्भुत व्यक्तिहरूसँग सहकार्य।
 
-यो चित्रण गर्नुहोस्: तपाईं भोलि बिहान उठ्नुहुन्छ र देख्नुहुन्छ कि टोकियोमा कसैले तपाईंको कोड सुधार गरेको छ जब तपाईं सुतिरहनुभएको थियो। त्यसपछि बर्लिनमा कसैले तपाईं अड्किएको बगलाई ठीक गर्छ। दिउँसोसम्म, साओ पाउलोमा एक डेभलपरले तपाईंले कहिल्यै सोच्न नसकेको सुविधा थपेको छ। यो विज्ञान कल्पना होइन – यो GitHub ब्रह्माण्डमा सामान्य मंगलवार मात्र हो!
+यो कल्पना गर्नुहोस्: तपाईं भोलि बिहान उठ्नुहुन्छ र देख्नुहुन्छ कि टोकियोमा कसैले तपाईंको कोड सुधार गरेको छ जब तपाईं सुतिरहनुभएको थियो। त्यसपछि बर्लिनमा कसैले तपाईंलाई अड्किएको बग ठीक गर्छ। दिउँसोसम्म, साओ पाउलोमा एक विकासकर्ताले तपाईंले कहिल्यै सोच्न नसकेको सुविधा थप्छ। यो विज्ञान कल्पना होइन – यो GitHub ब्रह्माण्डमा सामान्य मंगलवार हो!
 
-मलाई साँच्चै उत्साहित बनाउने कुरा के हो भने तपाईंले सिक्न लागेको सहकार्य कौशल? यी EXACT उही वर्कफ्लोहरू हुन् जुन Google, Microsoft, र तपाईंको मनपर्ने स्टार्टअपहरूका टोलीहरूले प्रत्येक दिन प्रयोग गर्छन्। तपाईं केवल एक चिसो उपकरण सिक्दै हुनुहुन्न – तपाईं सम्पूर्ण सफ्टवेयर संसारलाई सँगै काम गर्न बनाउने गोप्य भाषा सिक्दै हुनुहुन्छ।
+मलाई साँच्चै उत्साहित बनाउने कुरा के हो भने तपाईंले सिक्न लागेको सहकार्य कौशल? यी EXACT workflow हरू हुन् जुन Google, Microsoft, र तपाईंको मनपर्ने स्टार्टअपहरूका टोलीहरूले प्रत्येक दिन प्रयोग गर्छन्। तपाईं केवल एक चिसो उपकरण सिक्दै हुनुहुन्न – तपाईं सम्पूर्ण सफ्टवेयर संसारलाई सँगै काम गर्न बनाउने गोप्य भाषा सिक्दै हुनुहुन्छ।
 
-गम्भीर रूपमा, जब तपाईंले कसैले तपाईंको पहिलो पुल अनुरोध मर्ज गरेको अनुभव गर्नुभयो भने, तपाईंले बुझ्नुहुनेछ किन डेभलपरहरू खुला स्रोतको बारेमा यति भावुक हुन्छन्। यो संसारको सबैभन्दा ठूलो, सबैभन्दा रचनात्मक टोली परियोजनाको हिस्सा भएको जस्तै हो!
+गम्भीर रूपमा, जब तपाईंले कसैले तपाईंको पहिलो pull request merge गरेको अनुभव गर्नुहुन्छ, तपाईंले बुझ्नुहुनेछ किन विकासकर्ताहरू खुला स्रोतको बारेमा यति भावुक हुन्छन्। यो संसारको सबैभन्दा ठूलो, सबैभन्दा रचनात्मक टोली परियोजनाको हिस्सा भएको जस्तै हो!
 
 > भिडियो हेर्नुहोस्
 >
 > [![Git र GitHub आधारभूत भिडियो](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
 
-GitHub मा चीजहरू राख्ने मुख्य कारण अन्य डेभलपरहरूसँग सहकार्य गर्न सम्भव बनाउनु थियो।
+GitHub मा चीजहरू राख्ने मुख्य कारण भनेको अन्य विकासकर्ताहरूसँग सहकार्य गर्न सम्भव बनाउनु हो।
+
+```mermaid
+flowchart LR
+    A[🔍 Find Project] --> B[🍴 Fork Repository]
+    B --> C[📥 Clone to Local]
+    C --> D[🌿 Create Branch]
+    D --> E[✏️ Make Changes]
+    E --> F[💾 Commit Changes]
+    F --> G[📤 Push Branch]
+    G --> H[🔄 Create Pull Request]
+    H --> I{Maintainer Review}
+    I -->|✅ Approved| J[🎉 Merge!]
+    I -->|❓ Changes Requested| K[📝 Make Updates]
+    K --> F
+    J --> L[🧹 Clean Up Branches]
+    
+    style A fill:#e3f2fd
+    style J fill:#e8f5e8
+    style L fill:#fff3e0
+```
 
-तपाईंको रिपोजिटरीमा, `Insights > Community` मा नेभिगेट गर्नुहोस् र तपाईंको प्रोजेक्ट सिफारिस गरिएको समुदाय मापदण्डहरूसँग कसरी तुलना हुन्छ हेर्नुहोस्।
+तपाईंको रिपोजिटरीमा, `Insights > Community` मा नेभिगेट गर्नुहोस् ताकि तपाईंको प्रोजेक्ट सिफारिस गरिएको समुदाय मापदण्डहरूसँग कसरी तुलना हुन्छ हेर्न सक्नुहुन्छ।
 
-तपाईंको रिपोजिटरीलाई व्यावसायिक र स्वागतयोग्य देखाउन चाहनुहुन्छ? तपाईंको रिपोजिटरीमा जानुहोस् र `Insights > Community` मा क्लिक गर्नुहोस्। यो चिसो सुविधा तपाईंको प्रोजेक्ट GitHub समुदायले "राम्रो रिपोजिटरी अभ्यासहरू" मान्ने कुरासँग कसरी तुलना हुन्छ भनेर देखाउँछ।
+तपाईंको रिपोजिटरीलाई व्यावसायिक र स्वागतयोग्य देखाउन चाहनुहुन्छ? तपाईंको रिपोजिटरीमा जानुहोस् र `Insights > Community` क्लिक गर्नुहोस्। यो चिसो सुविधा तपाईंको प्रोजेक्ट GitHub समुदायले "राम्रो रिपोजिटरी अभ्यास" मान्ने कुरासँग कसरी तुलना हुन्छ भनेर देखाउँछ।
 
-> 🎯 **तपाईंको प्रोजेक्टलाई चम्काउनुहोस्**: राम्रोसँग व्यवस्थित रिपोजिटरी राम्रो दस्तावेजीकरणको साथ सफा, स्वागतयोग्य स्टोरफ्रन्ट भएको जस्तै हो। यसले मानिसहरूलाई तपाईंको कामको हेरचाह गर्ने बताउँछ र अरूलाई योगदान गर्न चाहना बनाउँछ!
+> 🎯 **तपाईंको प्रोजेक्टलाई चम्काउनुहोस्**: राम्रो दस्तावेजीकरण भएको राम्रोसँग व्यवस्थित रिपोजिटरी सफा, स्वागतयोग्य स्टोरफ्रन्ट भएको जस्तै हो। यसले मानिसहरूलाई तपाईंको कामको हेरचाह गर्छ र अरूलाई योगदान गर्न चाहना बनाउँछ!
 
 **रिपोजिटरीलाई उत्कृष्ट बनाउने कुरा:**
 
-| के थप्ने | किन यो महत्त्वपूर्ण छ | तपाईंको लागि के गर्छ |
+| के थप्ने | किन यो महत्त्वपूर्ण छ | यसले तपाईंको लागि के गर्छ |
 |-------------|-------------------|---------------------|
 | **Description** | पहिलो प्रभाव महत्त्वपूर्ण छ! | मानिसहरूले तुरुन्तै तपाईंको प्रोजेक्ट के गर्छ थाहा पाउँछन् |
 | **README** | तपाईंको प्रोजेक्टको अगाडिको पृष्ठ | नयाँ आगन्तुकहरूको लागि जस्तै मैत्रीपूर्ण टुर गाइड |
-| **Contributing Guidelines** | तपाईं सहयोग स्वागत गर्नुहुन्छ देखाउँछ | मानिसहरूले तपाईंलाई कसरी सहयोग गर्न सकिन्छ थाहा पाउँछन् |
-| **Code of Conduct** | मैत्रीपूर्ण स्थान सिर्जना गर्दछ | सबैले सहभागी हुन स्वागत महसुस गर्छन् |
-| **License** | कानुनी स्पष्टता | अरूले तपाईंको कोड कसरी प्रयोग गर्न सकिन्छ थाहा पाउँछन् |
-| **Security Policy** | तपाईं जिम्मेवार हुनुहुन्छ देखाउँछ | व्यावसायिक अभ्यासहरू प्रदर्शन गर्दछ |
+| **Contributing Guidelines** | तपाईं सहयोग स्वागत गर्नुहुन्छ देखाउँछ | मानिसहरूले तपाईंलाई कसरी सहयोग गर्न सकिन्छ भन्ने कुरा थाहा पाउँछन् |
+| **Code of Conduct** | मैत्रीपूर्ण स्थान सिर्जना गर्छ | सबैले सहभागी हुन स्वागत महसुस गर्छन् |
+| **License** | कानूनी स्पष्टता | अरूले तपाईंको कोड कसरी प्रयोग गर्न सकिन्छ भन्ने कुरा थाहा पाउँछन् |
+| **Security Policy** | तपाईं जिम्मेवार हुनुहुन्छ देखाउँछ | व्यावसायिक अभ्यासहरू प्रदर्शन गर्छ |
 
-> 💡 **प्रो टिप**: GitHub ले यी सबै फाइलहरूको लागि टेम्प्लेटहरू प्रदान गर्दछ। नयाँ रिपोजिटरी सिर्जना गर्दा, यी फाइलहरू स्वचालित रूपमा उत्पन्न गर्न बक्सहरू जाँच गर्नुहोस्।
+> 💡 **Pro Tip**: GitHub ले यी सबै फाइलहरूको लागि टेम्प्लेटहरू प्रदान गर्दछ। नयाँ रिपोजिटरी बनाउँदा, यी फाइलहरू स्वचालित रूपमा उत्पन्न गर्न बक्सहरू जाँच गर्नुहोस्।
 
 **आधुनिक GitHub सुविधाहरू अन्वेषण गर्न:**
 
@@ -337,137 +427,183 @@ GitHub मा चीजहरू राख्ने मुख्य कारण
 - **Dependabot** स्वचालित निर्भरता अपडेटहरूको लागि
 
 💬 **समुदाय र प्रोजेक्ट व्यवस्थापन:**
-- **GitHub Discussions** मुद्दाहरू भन्दा बाहिर समुदाय वार्तालापहरूको लागि
-- **GitHub Projects** कानबान-शैली प्रोजेक्ट व्यवस्थापनको लागि
+- **GitHub Discussions** मुद्दाहरू बाहिर समुदाय वार्तालापहरूको लागि
+- **GitHub Projects** kanban-शैली प्रोजेक्ट व्यवस्थापनको लागि
 - **Branch protection rules** कोड गुणस्तर मापदण्ड लागू गर्न
 
-यी सबै स्रोतहरूले नयाँ टोली सदस्यहरूलाई अनबोर्डिङमा फाइदा पुर्‍याउँछन्। र ती सामान्यतया नयाँ योगदानकर्ताहरूले तपाईंको कोड हेर्नु अघि हेर्ने प्रकारका चीजहरू हुन्, यो पत्ता लगाउन कि तपाईंको प्रोजेक्ट उनीहरूको समय खर्च गर्नको लागि सही स्थान हो।
+यी सबै स्रोतहरूले नयाँ टोली सदस्यहरूलाई onboard गर्न फाइदा पुर्‍याउँछन्। र ती सामान्यतया नयाँ योगदानकर्ताहरूले तपाईंको कोड हेर्नु अघि हेर्ने प्रकारका चीजहरू हुन्, यो पत्ता लगाउन कि तपाईंको प्रोजेक्ट उनीहरूको समय खर्च गर्नको लागि सही स्थान हो।
 
-✅ README फाइलहरू, यद्यपि तिनीहरू तयार गर्न समय लाग्छ, व्यस्त मर्मतकर्ताहरूले अक्सर बेवास्ता गर्छन्। के तपाईं विशेष रूपमा वर्णनात्मक एक उदाहरण पाउन सक्नुहुन्छ? नोट: त्यहाँ केही [README राम्रो बनाउन मद्दत गर्ने उपकरणहरू](https://www.makeareadme.com/) छन् जुन तपाईंले प्रयास गर्न चाहन सक्नुहुन्छ।
+✅ README फाइलहरू, यद्यपि तिनीहरू तयार गर्न समय लाग्छ, अक्सर व्यस्त मर्मतकर्ताहरूले बेवास्ता गर्छन्। के तपाईं विशेष रूपमा वर्णनात्मक एक उदाहरण पाउन सक्नुहुन्छ? नोट: त्यहाँ केही [उपकरणहरू राम्रो README बनाउन मद्दत गर्न](https://www.makeareadme.com/) छन् जुन तपाईंले प्रयास गर्न चाहन सक्नुहुन्छ।
 
 ### कार्य: केही कोड मर्ज गर्नुहोस्
 
-Contributing docs ले मानिसहरूलाई प्रोजेक्टमा योगदान गर्न मद्दत गर्दछ। यसले तपाईंले खोजिरहेको योगदानको प्रकार र प्रक्रिया कसरी काम गर्दछ भनेर व्याख्या गर्दछ। योगदानकर्ताहरूले GitHub मा तपाईंको रिपोजिटरीमा योगदान गर्न सक्षम हुन चरणहरूको श्रृंखला मार्फत जान आवश्यक छ:
+Contributing docs ले मानिसहरूलाई प्रोजेक्टमा योगदान गर्न मद्दत गर्छ। यसले तपाईंले खोजिरहेको योगदानको प्रकार र प्रक्रिया कसरी काम गर्छ भन्ने व्याख्या गर्छ। योगदानकर्ताहरूले GitHub मा तपाईंको रिपोजिटरीमा योगदान गर्न सक्षम हुन चरणहरूको श्रृंखला मार्फत जान आवश्यक छ:
 
-1. **तपाईंको रिपोजिटरीलाई Fork गर्नुहोस्** तपाईंले सम्भवतः मानिसहरूलाई तपाईंको प्रोजेक्ट _fork_ गर्न चाहनुहुन्छ। Forking भनेको उनीहरूको GitHub प्रोफाइलमा तपाईंको रिपोजिटरीको प्रतिकृति सिर्जना गर्नु हो।
-1. **Clone**। त्यहाँबाट उनीहरूले प्रोजेक्टलाई आफ्नो स्थानीय मेसिनमा क्लोन गर्नेछन्।
-1. **ब्रान्च सिर्जना गर्नुहोस्**। तपाईंले उनीहरूलाई आफ्नो कामको लागि _ब्रान्च_ सिर्जना गर्न सोध्न चाहनुहुन्छ।
-1. **एक क्षेत्रमा परिवर्तन केन्द्रित गर्नुहोस्**। योगदानकर्ताहरूलाई एक पटकमा एक कुरामा आफ्नो योगदान केन्द्रित गर्न सोध्नुहोस् - यसले तपाईंको काम _merge_ गर्ने सम्भावनालाई बढाउँछ। कल्पना गर्नुहोस् उनीहरूले बग फिक्स लेख्छन्, नयाँ सुविधा थप्छन्, र धेरै परीक्षणहरू अपडेट गर्छन् - के हुन्छ यदि तपाईं २ मध्ये ३, वा १ मध्ये ३ परिवर्तन मात्र लागू गर्न चाहनुहुन्छ वा सक्नुहुन्छ?
+1. **तपाईंको रिपोजिटरी fork गर्नुहोस्** तपाईंले सम्भवतः मानिसहरूलाई तपाईंको प्रोजेक्ट _fork_ गर्न चाहनुहुन्छ। Forking भनेको तपाईंको रिपोजिटरीको प्रतिलिपि उनीहरूको GitHub प्रोफाइलमा बनाउनु हो।
+1. **Clone**। त्यहाँबाट उनीहरूले प्रोजेक्टलाई आफ्नो स्थानीय मेसिनमा clone गर्नेछन्।
+1. **शाखा बनाउनुहोस्**। तपाईंले उनीहरूलाई आफ्नो कामको लागि _शाखा_ बनाउन सोध्न चाहनुहुन्छ।
+1. **एक क्षेत्रमा परिवर्तन केन्द्रित गर्नुहोस्**। योगदानकर्ताहरूलाई एक पटकमा एक कुरामा आफ्नो योगदान केन्द्रित गर्न सोध्नुहोस् - यसले तपाईंले उनीहरूको काम _merge_ गर्ने सम्भावना उच्च बनाउँछ। कल्पना गर्नुहोस् उनीहरूले बग फिक्स लेख्छन्, नयाँ सुविधा थप्छन्, र धेरै परीक्षणहरू अपडेट गर्छन् - के हुन्छ यदि तपाईं ३ मध्ये २ वा ३ मध्ये १ परिवर्तन मात्र लागू गर्न चाहनुहुन्छ वा सक्नुहुन्छ?
 
-✅ ब्रान्चहरू विशेष रूपमा राम्रो कोड लेख्न र पठाउन महत्त्वपूर्ण हुने स्थिति कल्पना गर्नुहोस्। तपाईं के उपयोग केसहरू सोच्न सक्नुहुन्छ?
+✅ शाखाहरू लेख्न र राम्रो कोड पठाउन विशेष रूपमा महत्त्वपूर्ण हुने स्थिति कल्पना गर्नुहोस्। तपाईं के उपयोग केसहरू सोच्न सक्नुहुन्छ?
 
-> नोट, तपाईं संसारमा देख्न चाहनुभएको परिवर्तन हुनुहोस्, र आफ्नो कामको लागि ब्रान्चहरू सिर्जना गर्नुहोस्। तपाईंले गर्ने कुनै पनि कमिटहरू तपाईं हाल "चेक आउट" गरिएको ब्रान्चमा गरिनेछ। `git status` प्रयोग गरेर त्यो कुन ब्रान्च हो हेर्नुहोस्।
+> नोट, तपाईं संसारमा देख्न चाहनुहुन्छ परिवर्तन हुनुहोस्, र आफ्नो कामको लागि शाखाहरू सिर्जना गर्नुहोस्। तपाईंले गर्ने कुनै पनि commits तपाईं हाल "checked out" शाखामा गरिनेछ। `git status` प्रयोग गरेर त्यो कुन शाखा हो हेर्नुहोस्।
 
-आउनुहोस् योगदानकर्ताको वर्कफ्लोमा जाऔं। मानौं योगदानकर्ताले रिपोजिटरीलाई _fork_ र _clone_ गरिसकेका छन् त्यसैले उनीहरूको स्थानीय मेसिनमा काम गर्न तयार Git रिपोजिटरी छ:
+आउनुहोस् एक योगदानकर्ता workflow मार्फत जानुहोस्। मानौं योगदानकर्ताले पहिले नै _forked_ र _cloned_ रिपोजिटरी गरिसकेका छन् ताकि उनीहरूसँग काम गर्न तयार Git repo छ, उनीहरूको स्थानीय मेसिनमा:
 
-1. **ब्रान्च सिर्जना गर्नुहोस्**। `git branch` आदेश प्रयोग गरेर ब्रान्च सिर्जना गर्नुहोस् जसले उनीहरूले योगदान गर्न चाहेको परिवर्तनहरू समावेश गर्दछ:
+1. **शाखा बनाउनुहोस्**। `git branch` आदेश प्रयोग गरेर शाखा बनाउनुहोस् जसले उनीहरूले योगदान गर्न चाहेको परिवर्तनहरू समावेश गर्नेछ:
 
    ```bash
    git branch [branch-name]
    ```
 
-   > 💡 **आधुनिक दृष्टिकोण**: तपाईं एक आदेशमा नयाँ ब्रान्च सिर्जना र स्विच गर्न सक्नुहुन्छ:
+   > 💡 **आधुनिक दृष्टिकोण**: तपाईं एक आदेशमा नयाँ शाखा सिर्जना र स्विच गर्न सक्नुहुन्छ:
    ```bash
    git switch -c [branch-name]
    ```
 
-1. **काम गर्ने ब्रान्चमा स्विच गर्नुहोस्**। निर्दिष्ट ब्रान्चमा स्विच गर्नुहोस् र `git switch` प्रयोग गरेर कार्यरत निर्देशिका अपडेट गर्नुहोस्:
+1. **काम गर्ने शाखामा स्विच गर्नुहोस्**। निर्दिष्ट शाखामा स्विच गर्नुहोस् र `git switch` प्रयोग गरेर कार्यरत निर्देशिका अपडेट गर्नुहोस्:
 
    ```bash
    git switch [branch-name]
    ```
 
-   > 💡 **आधुनिक नोट**: ब्रान्च परिवर्तन गर्दा `git switch` `git checkout` को आधुनिक प्रतिस्थापन हो। यो स्पष्ट र सुरक्षात्मक छ।
+   > 💡 **आधुनिक नोट**: शाखाहरू परिवर्तन गर्दा `git switch` `git checkout` को आधुनिक प्रतिस्थापन हो। यो स्पष्ट र सुरक्षात्मक छ।
 
-1. **काम गर्नुहोस्**। यस बिन्दुमा तपाईंले आफ्नो परिवर्तनहरू थप्न चाहनुहुन्छ। Git लाई निम्न आदेशहरू प्रयोग गरेर यसबारे नबिर्सनुहोस्:
+1. **काम गर्नुहोस्**। यस बिन्दुमा तपाईंले आफ्नो परिवर्तनहरू थप्न चाहनुहुन्छ। Git लाई यसबारे भन्न नबिर्सनुहोस् निम्न आदेशहरू प्रयोग गरेर:
 
    ```bash
    git add .
    git commit -m "my changes"
    ```
 
-   > ⚠️ **कमिट सन्देशको गुणस्तर**: सुनिश्चित गर्नुहोस् कि तपाईंले आफ्नो कमिटलाई राम्रो नाम दिनुहुन्छ, तपाईंको लागि र तपाईंले सहयोग गरिरहेको रिपोजिटरीको मर्मतकर्ताको लागि। तपाईंले के परिवर्तन गर्नुभयो भन्ने बारेमा विशिष्ट हुनुहोस्!
+   > ⚠️ **Commit सन्देशको गुणस्तर**: सुनिश्चित गर्नुहोस् तपाईंले आफ्नो commit लाई राम्रो नाम दिनुहुन्छ, तपाईंको लागि र तपाईंले मद्दत गरिरहेको रिपोजिटरीको मर्मतकर्ताको लागि। तपाईंले के परिवर्तन गर्नुभयो भन्ने बारेमा विशिष्ट हुनुहोस्!
 
-1. **तपाईंको कामलाई `main` ब्रान्चसँग मिलाउनुहोस्**। कुनै बिन्दुमा तपाईं काम सक्नुहुन्छ र तपाईं आफ्नो कामलाई `main` ब्रान्चको कामसँग मिलाउन चाहनुहुन्छ। यस बीचमा `main` ब्रान्च परिवर्तन भएको हुन सक्छ त्यसैले सुनिश्चित गर्नुहोस् कि तपाईंले यसलाई निम्न आदेशहरू प्रयोग गरेर पछिल्लोमा अपडेट गर्नुभयो:
+1. **तपाईंको कामलाई `main` शाखासँग मिलाउनुहोस्**। कुनै बिन्दुमा तपाईं काम सक्नुहुन्छ र तपाईं आफ्नो कामलाई `main` शाखाको कामसँग मिलाउन चाहनुहुन्छ। `main` शाखा यस बीचमा परिवर्तन भएको हुन सक्छ त्यसैले सुनिश्चित गर्नुहोस् तपाईंले पहिले यसलाई निम्न आदेशहरू प्रयोग गरेर नवीनतममा अपडेट गर्नुहोस्:
 
    ```bash
    git switch main
    git pull
    ```
 
-   यस बिन्दुमा तपाईं सुनिश्चित गर्न चाहनुहुन्छ कि कुनै पनि _conflicts_, स्थिति जहाँ Git सजिलै _combine_ परिवर्तनहरू गर्न सक्दैन, तपाईंको कार्यरत ब्रान्चमा हुन्छ। त्यसैले निम्न आदेशहरू चलाउनुहोस्:
+   यस बिन्दुमा तपाईं सुनिश्चित गर्न चाहनुहुन्छ कि कुनै पनि _conflicts_, स्थिति जहाँ Git सजिलै _combine_ परिवर्तनहरू गर्न सक्दैन, तपाईंको कार्यरत शाखामा हुन्छ। त्यसैले निम्न आदेशहरू चलाउनुहोस्:
 
    ```bash
    git switch [branch_name]
    git merge main
    ```
 
-   `git merge main` आदेशले `main` बाट सबै परिवर्तनहरू तपाईंको ब्रान्चमा ल्याउनेछ। आशा छ तपाईं केवल जारी राख्न सक्नुहुन्छ। यदि छैन भने, VS Code ले तपाईंलाई Git _confused_ भएको ठाउँ बताउनेछ र तपाईंले प्रभावित फाइलहरू परिवर्तन गर्नुपर्नेछ कि कुन सामग्री सबैभन्दा सही छ।
+   `git merge main` आदेशले `main` बाट सबै परिवर्तनहरू तपाईंको शाखामा ल्याउनेछ। आशा छ तपाईं केवल जारी राख्न सक्नुहुन्छ। यदि छैन भने, VS Code ले तपाईंलाई बताउनेछ कि Git कहाँ _confused_ छ र तपाईंले प्रभावित फाइलहरू परिवर्तन गर्न सक्नुहुन्छ ताकि कुन सामग्री सबैभन्दा सही छ भन्ने कुरा भन्न सक्नुहुन्छ।
 
    💡 **आधुनिक विकल्प**: सफा इतिहासको लागि `git rebase` प्रयोग गर्ने विचार गर्नुहोस्:
    ```bash
    git rebase main
    ```
-   यसले तपाईंको कमिटहरू पछिल्लो मुख्य ब्रान्चको शीर्षमा पुनः प्ले गर्दछ, रेखीय इतिहास सिर्जना गर्दछ।
+   यसले तपाईंको commits लाई नवीनतम main शाखाको शीर्षमा पुनः चलाउँछ, रेखीय इतिहास सिर्जना गर्दै।
 
-1. **तपाईंको काम GitHub मा पठाउनुहोस्**। तपाईंको काम GitHub मा पठाउनुको मतलब दुई कुरा हो। तपाईंको ब्रान्चलाई तपाईंको रिपोजिटरीमा पुश गर्नुहोस् र त्यसपछि PR, Pull Request खोल्नुहोस्।
+1. **तपाईंको काम GitHub मा पठाउनुहोस्**। तपाईंको काम GitHub मा पठाउनु भनेको दुई कुरा हो। तपाईंको शाखालाई तपाईंको रिपोजिटरीमा push गर्नुहोस् र त्यसपछि PR, Pull Request खोल्नुहोस्।
 
    ```bash
    git push --set-upstream origin [branch-name]
    ```
 
-   माथिको आदेशले तपाईंको फोर्क गरिएको रिपोजिटरीमा ब्रान्च सिर्जना गर्दछ।
+   माथिको आदेशले तपाईंको forked रिपोजिटरीमा शाखा सिर्जना गर्दछ।
+
+### 🤝 **सहकार्य कौशल जाँच: अरूसँग काम गर्न तयार?**
+
+**आउनुहोस् हेर्नुहोस् कि तपाईं सहकार्यको बारेमा कस्तो महसुस गर्दै हुनुहुन्छ:**
+- Forking र pull requests को विचार अब तपाईंलाई अर्थपूर्ण लाग्छ?
+- शाखाहरूको साथ काम गर्ने बारे तपाईंले अभ्यास गर्न चाहनुभएको एक कुरा के हो?
+- अरूको प्रोजेक्टमा योगदान गर्न तपाईं कति सहज महसुस गर्नुहुन्छ?
+
+```mermaid
+mindmap
+  root((Git Collaboration))
+    Branching
+      Feature branches
+      Bug fix branches
+      Experimental work
+    Pull Requests
+      Code review
+      Discussion
+      Testing
+    Best Practices
+      Clear commit messages
+      Small focused changes
+      Good documentation
+```
 
-1. **PR खोल्नुहोस्**। त्यसपछि, तपाईं PR खोल्न चाहनुहुन्छ। तपाईंले GitHub मा फोर्क गरिएको रिपोजिटरीमा नेभिगेट गरेर यो गर्नुहुन्छ। GitHub मा तपाईंले नयाँ PR सिर्जना गर्न चाहनुहुन्छ कि भनेर संकेत देख्नुहुनेछ, तपाईंले त्यसमा क्लिक गर्नुहुन्छ र तपाईंलाई एउटा इन्टरफेसमा लगिन्छ जहाँ तपाईं कमिट सन्देश शीर्षक परिवर्तन गर्न सक्नुहुन्छ, यसलाई उपयुक्त विवरण दिन सक्नुहुन्छ। अब तपाईंले फोर्क गरेको रिपोजिटरीको मर्मतकर्ताले यो PR देख्नेछन् र _fingers crossed_ उनीहरूले तपाईंको PR लाई सराहना गर्नेछन् र _merge_ गर्नेछन्। तपाईं अब योगदानकर्ता हुनुहुन्छ, याय :)
+> **आत्मविश्वास बढाउने कुरा**: तपाईंले प्रशंसा गर्ने प्रत्येक विकासकर्ता एक पटक आफ्नो पहिलो pull request को बारेमा नर्भस थिए। GitHub समुदाय नयाँ आगन्तुकहरूलाई अत्यन्त स्वागतयोग्य छ!
+
+1. **PR खोल्नुहोस्**। त्यसपछि, तपाईं PR खोल्न चाहनुहुन्छ। तपाईं GitHub मा forked रिपोजिटरीमा नेभिगेट गरेर यो गर्नुहुन्छ। GitHub मा तपाईंले नयाँ PR सिर्जना गर्न चाहनुहुन्छ कि भनेर संकेत देख्नुहुनेछ, तपाईंले त्यो क्लिक गर्नुहुन्छ र तपाईंलाई commit सन्देश शीर्षक परिवर्तन गर्न, यसलाई उपयुक्त वर्णन दिनको लागि इन्टरफेसमा लगिन्छ। अब तपाईंले fork गरेको रिपोजिटरीको मर्मतकर्ताले यो PR देख्नेछन् र _आशा छ_ उनीहरूले तपाईंको PR लाई सराहना गर्नेछन् र _merge_ गर्नेछन्। तपाईं अब योगदानकर्ता हुनुहुन्छ, बधाई छ :)
 
    💡 **आधुनिक टिप**: तपाईं GitHub CLI प्रयोग गरेर पनि PR सिर्जना गर्न सक्नुहुन्छ:
    ```bash
    gh pr create --title "Your PR title" --body "Description of changes"
    ```
 
-   🔧 **PRs को लागि उत्तम अभ्यासहरू**:
-   - "Fixes #123" जस्ता कुञ्जी शब्दहरू प्रयोग गरेर सम्बन्धित मुद्दाहरू लिंक गर्नुहोस्।
-   - UI परिवर्तनहरूको लागि स्क्रिनशटहरू थप्नुहोस्।
-   - विशिष्ट समीक्षकहरू अनुरोध गर्नुहोस्।
-   - काम-प्रगति PRs प्रयोग गर्नुहोस्।
-   - समीक्षा अनुरोध गर्नु अघि सबै CI जाँचहरू पास सुनिश्चित गर्नुहोस्।
-
-1. **सफा गर्नुहोस्**। तपाईंले सफलतापूर्वक PR मर्ज गरेपछि _सफा गर्नु_ राम्रो अभ्यास मानिन्छ। तपाईं आफ्नो स्थानीय ब्रान्च र GitHub मा पुश गरिएको ब्रान्च दुवै सफा गर्न चाहनुहुन्छ। पहिलो स्थानीय रूपमा निम्न आदेश प्रयोग गरेर यसलाई मेटाउनुहोस्:
+   🔧 **PR को लागि उत्तम अभ्यासहरू**:
+   - "Fixes #123" जस्ता कीवर्डहरू प्रयोग गरेर सम्बन्धित मुद्दाहरू लिंक गर्नुहोस्
+   - UI परिवर्तनहरूको लागि screenshots थप्नुहोस्
+   - विशिष्ट reviewers अनुरोध गर्नुहोस्
+   - काम-प्रगति को लागि draft PRs प्रयोग गर्नुहोस्
+   - समीक्षा अनुरोध गर्नु अघि सबै CI जाँचहरू पास सुनिश्चित गर्नुहोस्
+1. **सफा गर्नुहोस्**। PR सफलतापूर्वक मर्ज गरेपछि आफ्नो स्थानीय शाखा र GitHub मा पठाइएको शाखा सफा गर्नु राम्रो अभ्यास मानिन्छ। पहिलो चरणमा, तलको आदेश प्रयोग गरेर स्थानीय शाखा मेटाउनुहोस्:
 
    ```bash
    git branch -d [branch-name]
    ```
 
-   सुनिश्चित गर्नुहोस् कि तपाईं फोर्क गरिएको रिपोजिटरीको GitHub पृष्ठमा जानुहोस् र तपाईंले यसमा पुश गरेको रिमोट ब्रान्च हटाउनुहोस्।
+   त्यसपछि GitHub मा फोर्क गरिएको रिपोजिटरीको पृष्ठमा जानुहोस् र तपाईंले पठाएको रिमोट शाखा हटाउनुहोस्।
+
+`Pull request` शब्द अलि अचम्मको लाग्न सक्छ किनभने वास्तवमा तपाईं आफ्नो परिवर्तनहरू परियोजनामा धकेल्न चाहनुहुन्छ। तर परियोजनाको मालिक वा कोर टिमले तपाईंको परिवर्तनलाई परियोजनाको "मुख्य" शाखासँग मर्ज गर्नु अघि विचार गर्नुपर्छ, त्यसैले तपाईं वास्तवमा मर्मतकर्ताबाट परिवर्तनको निर्णयको अनुरोध गर्दै हुनुहुन्छ।
 
-`Pull request` मूर्खतापूर्ण शब्द जस्तो लाग्छ किनभने वास्तवमा तपाईं आफ्नो परिवर्तनहरू प्रोजेक्टमा पुश गर्न चाहनुहुन्छ। तर मर्मतकर्ताले (प्रोजेक्ट मालिक) वा कोर टोलीले तपाईंको परिवर्तनहरूलाई प्रोजेक्टको "main" ब्रान्चसँग मर्ज गर्नु अघि विचार गर्न आवश्यक छ, त्यसैले तपाईं वास्तवमा मर्मतकर्ताबाट परिवर्तन निर्णयको अनुरोध गर्दै हुनुहुन्छ।
+Pull request भनेको शाखामा गरिएको परिवर्तनहरूको तुलना र छलफल गर्ने ठाउँ हो, जहाँ समीक्षा, टिप्पणीहरू, एकीकृत परीक्षणहरू र अन्य धेरै कुराहरू समावेश हुन्छन्। राम्रो pull request ले लगभग commit message जस्तै नियमहरू पालना गर्दछ। तपाईं आफ्नो कामले कुनै समस्या समाधान गरेको छ भने, समस्या ट्र्याकरमा समस्या सन्दर्भ थप्न सक्नुहुन्छ। यो `#` पछि तपाईंको समस्याको नम्बर प्रयोग गरेर गरिन्छ। उदाहरणका लागि `#97`।
 
-Pull request ब्रान्चमा परिचय गरिएका भिन्नताहरू समीक्षा, टिप्पणी, एकीकृत परीक्षणहरू, र थपको साथ तुलना र छलफल गर्ने ठाउँ
-🤞 सबै चेक पास होस् र परियोजना मालिक(हरू)ले तपाईंको परिवर्तनहरू परियोजनामा ​​मर्ज गरून् 🤞
+🤞 आशा गरौं कि सबै जाँच पास हुन्छन् र परियोजनाको मालिकहरूले तपाईंको परिवर्तनहरू परियोजनामा मर्ज गर्छन् 🤞
 
-तपाईंको स्थानीय कार्य शाखालाई GitHub मा रहेको सम्बन्धित रिमोट शाखाबाट सबै नयाँ कमिटहरूसँग अपडेट गर्नुहोस्:
+GitHub मा रहेको सम्बन्धित रिमोट शाखाबाट सबै नयाँ commits सहित आफ्नो हालको स्थानीय कार्य शाखा अपडेट गर्नुहोस्:
 
 `git pull`
 
 ## ओपन सोर्समा योगदान गर्नुहोस् (तपाईंको प्रभाव पार्ने मौका!)
 
-के तपाईं केही यस्तो गर्न तयार हुनुहुन्छ जसले तपाईंलाई पूर्ण रूपमा चकित बनाउनेछ? 🤯 आउनुहोस्, ओपन सोर्स परियोजनाहरूमा योगदान गर्ने कुरा गरौं – र यो कुरा तपाईंलाई बताउन पाउँदा म उत्साहित छु!
-
-यो तपाईंको असाधारण कुराको हिस्सा बन्ने मौका हो। कल्पना गर्नुहोस्, ती उपकरणहरू सुधार गर्दै जुन लाखौं विकासकर्ताहरूले दैनिक प्रयोग गर्छन्, वा तपाईंका साथीहरूले मन पराउने एपमा बग फिक्स गर्दै। यो केवल सपना होइन – यो नै ओपन सोर्स योगदानको सार हो!
-
-यो सोच्दा मलाई सधैं रोमाञ्चक लाग्छ: तपाईंले सिक्दै गरेको प्रत्येक उपकरण – तपाईंको कोड एडिटर, हामीले अन्वेषण गर्ने फ्रेमवर्कहरू, यहाँसम्म कि तपाईंले यो पढ्न प्रयोग गरिरहेको ब्राउजर – कुनै व्यक्तिले आफ्नो पहिलो योगदान गर्दै सुरु गरेको थियो। तपाईंको मनपर्ने VS Code एक्सटेन्सन बनाउने प्रतिभाशाली विकासकर्ता? उनी पनि एक पटक तपाईं जस्तै नयाँ थिए, "create pull request" क्लिक गर्दा हात काँपिरहेको थियो।
-
-र सबैभन्दा सुन्दर कुरा के छ भने: ओपन सोर्स समुदाय इन्टरनेटको सबैभन्दा ठूलो समूहजस्तो छ। धेरै परियोजनाहरू नयाँ व्यक्तिहरूको खोजीमा हुन्छन् र "good first issue" ट्याग भएका समस्याहरू राख्छन् विशेष गरी तपाईंजस्ता व्यक्तिहरूका लागि! मेन्टेनरहरू नयाँ योगदानकर्ताहरू देख्दा साँच्चै उत्साहित हुन्छन् किनभने उनीहरूले आफ्ना पहिलो कदमहरू सम्झन्छन्।
+के तपाईं केही यस्तो कुरा गर्न तयार हुनुहुन्छ जसले तपाईंलाई पूर्ण रूपमा चकित पार्नेछ? 🤯 आउनुहोस्, ओपन सोर्स परियोजनाहरूमा योगदान गर्ने बारे कुरा गरौं – र म यो तपाईंलाई साझा गर्न पाउँदा उत्साहित छु!
+
+यो तपाईंको असाधारण कुराको हिस्सा बन्ने मौका हो। कल्पना गर्नुहोस्, लाखौं विकासकर्ताहरूले दैनिक रूपमा प्रयोग गर्ने उपकरणहरू सुधार गर्नुहोस्, वा तपाईंको साथीहरूले मन पराउने एपमा बग समाधान गर्नुहोस्। यो केवल सपना मात्र होइन – यो नै ओपन सोर्स योगदानको सार हो!
+
+यो सोच्दा मलाई सधैं रोमाञ्चक लाग्छ: तपाईंले सिक्दै गरेको प्रत्येक उपकरण – तपाईंको कोड एडिटर, हामीले अन्वेषण गर्ने फ्रेमवर्कहरू, यहाँसम्म कि तपाईंले यो पढ्दै गरेको ब्राउजर – कुनै समय तपाईं जस्तै कसैले आफ्नो पहिलो योगदान गरेको थियो। तपाईंको मनपर्ने VS Code एक्सटेन्सन बनाउने प्रतिभाशाली विकासकर्ता? उनी पनि कहिल्यै "create pull request" क्लिक गर्दा नर्भस भएका थिए, ठीक तपाईं जस्तै।
+
+र यहाँ सबैभन्दा सुन्दर कुरा छ: ओपन सोर्स समुदाय इन्टरनेटको सबैभन्दा ठूलो समूहको जस्तो छ। धेरै परियोजनाहरू नयाँ व्यक्तिहरूको खोजीमा सक्रिय छन् र "good first issue" ट्याग गरिएको समस्याहरू विशेष रूपमा तपाईं जस्ता व्यक्तिहरूका लागि राखिएको छ! मर्मतकर्ताहरू नयाँ योगदानकर्ताहरू देख्दा वास्तवमै उत्साहित हुन्छन् किनभने उनीहरूले आफ्नै पहिलो कदम सम्झन्छन्।
+
+```mermaid
+flowchart TD
+    A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
+    B --> C[📖 Read Contributing Guidelines]
+    C --> D[🍴 Fork Repository]
+    D --> E[💻 Set Up Local Environment]
+    E --> F[🌿 Create Feature Branch]
+    F --> G[✨ Make Your Contribution]
+    G --> H[🧪 Test Your Changes]
+    H --> I[📝 Write Clear Commit]
+    I --> J[📤 Push & Create PR]
+    J --> K[💬 Engage with Feedback]
+    K --> L[🎉 Merged! You're a Contributor!]
+    L --> M[🌟 Find Next Issue]
+    
+    style A fill:#e1f5fe
+    style L fill:#c8e6c9
+    style M fill:#fff59d
+```
 
-तपाईं यहाँ केवल कोड सिक्दै हुनुहुन्न – तपाईं एक विश्वव्यापी परिवारको हिस्सा बन्न तयार हुनुहुन्छ जसले प्रत्येक दिन "डिजिटल संसारलाई अलिकति राम्रो कसरी बनाउने?" भन्ने सोच्दै उठ्छ। क्लबमा स्वागत छ! 🌟
+तपाईं यहाँ केवल कोड सिक्दै हुनुहुन्न – तपाईं एक विश्वव्यापी निर्माणकर्ताहरूको परिवारमा सामेल हुन तयार हुँदै हुनुहुन्छ जो प्रत्येक दिन "डिजिटल संसारलाई अलिकति राम्रो कसरी बनाउन सकिन्छ?" भनेर सोच्दै उठ्छन्। क्लबमा स्वागत छ! 🌟
 
-पहिले, GitHub मा तपाईंलाई चासो लाग्ने र जसमा तपाईं परिवर्तन गर्न चाहनुहुन्छ त्यस्तो रिपोजिटरी (वा **repo**) खोजौं। तपाईं यसको सामग्रीलाई आफ्नो मेसिनमा कपी गर्न चाहनुहुन्छ।
+पहिलो चरणमा, GitHub मा तपाईंलाई चासो लाग्ने र परिवर्तन गर्न चाहनुभएको रिपोजिटरी (वा **repo**) खोज्नुहोस्। तपाईं यसको सामग्री आफ्नो मेसिनमा प्रतिलिपि गर्न चाहनुहुन्छ।
 
-✅ 'beginner-friendly' रिपोजिटरीहरू खोज्नको लागि [ट्याग 'good-first-issue' द्वारा खोजी गर्नुहोस्](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)।
+✅ 'सुरुवाती मैत्रीपूर्ण' रिपोजिटरीहरू खोज्नको लागि [ट्याग 'good-first-issue' द्वारा खोज्नुहोस्](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)।
 
-![रिपो स्थानीय रूपमा कपी गर्नुहोस्](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ne.png)
+![रिपो स्थानीय रूपमा प्रतिलिपि गर्नुहोस्](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ne.png)
 
-कोड कपी गर्ने धेरै तरिकाहरू छन्। एउटा तरिका भनेको HTTPS, SSH, वा GitHub CLI (Command Line Interface) प्रयोग गरेर रिपोजिटरीको सामग्री "क्लोन" गर्नु हो।
+कोड प्रतिलिपि गर्ने धेरै तरिकाहरू छन्। एउटा तरिका भनेको HTTPS, SSH, वा GitHub CLI (Command Line Interface) प्रयोग गरेर रिपोजिटरीको सामग्री "क्लोन" गर्नु हो।
 
 तपाईंको टर्मिनल खोल्नुहोस् र रिपोजिटरी यसरी क्लोन गर्नुहोस्:
 ```bash
@@ -484,92 +620,152 @@ gh repo clone username/repository
 परियोजनामा काम गर्न, सही फोल्डरमा स्विच गर्नुहोस्:
 `cd ProjectURL`
 
-तपाईं सम्पूर्ण परियोजना यसरी खोल्न सक्नुहुन्छ:
+तपाईं सम्पूर्ण परियोजना यसरी पनि खोल्न सक्नुहुन्छ:
 - **[GitHub Codespaces](https://github.com/features/codespaces)** - ब्राउजरमा VS Code सहित GitHub को क्लाउड विकास वातावरण
 - **[GitHub Desktop](https://desktop.github.com/)** - Git अपरेसनहरूको लागि GUI एप्लिकेसन  
-- **[GitHub.dev](https://github.dev)** - कुनै पनि GitHub रिपोजिटरीमा `.` थिचेर ब्राउजरमा VS Code खोल्नुहोस्
-- **VS Code** GitHub Pull Requests एक्सटेन्सनसहित
+- **[GitHub.dev](https://github.dev)** - कुनै पनि GitHub रिपोमा `.` कुञ्जी थिचेर ब्राउजरमा VS Code खोल्नुहोस्
+- **VS Code** GitHub Pull Requests एक्सटेन्सन सहित
 
 अन्तमा, तपाईं कोडलाई जिप गरिएको फोल्डरमा डाउनलोड गर्न सक्नुहुन्छ।
 
-### GitHub का केही रोचक कुरा
+### GitHub का केही रोचक कुराहरू
 
-तपाईं GitHub मा कुनै पनि सार्वजनिक रिपोजिटरीलाई स्टार, वाच र/वा "fork" गर्न सक्नुहुन्छ। तपाईंले आफ्नो स्टार गरिएको रिपोजिटरीहरूलाई माथि दायाँ ड्रप-डाउन मेनुमा फेला पार्न सक्नुहुन्छ। यो कोडको लागि बुकमार्क गर्ने जस्तै हो।
+तपाईं GitHub मा कुनै पनि सार्वजनिक रिपोजिटरीलाई स्टार, वाच र/वा "fork" गर्न सक्नुहुन्छ। तपाईंले स्टार गरेका रिपोजिटरीहरू शीर्ष-दायाँ ड्रप-डाउन मेनुमा फेला पार्न सक्नुहुन्छ। यो कोडको लागि बुकमार्क जस्तै हो।
 
-परियोजनाहरूमा प्रायः GitHub मा "Issues" ट्याबमा (अर्कोथा उल्लेख नगरिएको भए) समस्या ट्र्याकर हुन्छ जहाँ मानिसहरूले परियोजनासँग सम्बन्धित समस्याहरूको बारेमा छलफल गर्छन्। र Pull Requests ट्याबमा मानिसहरूले प्रगतिको क्रममा रहेका परिवर्तनहरूको बारेमा छलफल र समीक्षा गर्छन्।
+परियोजनाहरूमा प्रायः GitHub मा "Issues" ट्याबमा समस्या ट्र्याकर हुन्छ, जहाँ परियोजनासँग सम्बन्धित समस्याहरूको बारेमा छलफल गरिन्छ। र Pull Requests ट्याबमा मानिसहरूले प्रगतिको क्रममा रहेका परिवर्तनहरूको बारेमा छलफल र समीक्षा गर्छन्।
 
-परियोजनाहरूमा फोरम, मेलिङ लिस्ट, वा Slack, Discord वा IRC जस्ता च्याट च्यानलहरूमा पनि छलफल हुन सक्छ।
+परियोजनाहरूले फोरमहरू, मेलिङ सूचीहरू, वा Slack, Discord वा IRC जस्ता च्याट च्यानलहरूमा पनि छलफल गर्न सक्छ।
 
 🔧 **आधुनिक GitHub सुविधाहरू**:
-- **GitHub Discussions** - समुदाय संवादहरूको लागि बिल्ट-इन फोरम
-- **GitHub Sponsors** - मेन्टेनरहरूलाई आर्थिक रूपमा समर्थन गर्नुहोस्  
-- **Security tab** - भल्नरेबिलिटी रिपोर्टहरू र सुरक्षा सल्लाहहरू
+- **GitHub Discussions** - समुदाय वार्तालापहरूको लागि बिल्ट-इन फोरम
+- **GitHub Sponsors** - मर्मतकर्ताहरूलाई आर्थिक रूपमा समर्थन गर्नुहोस्  
+- **Security tab** - कमजोर रिपोर्टहरू र सुरक्षा सल्लाहहरू
 - **Actions tab** - स्वचालित वर्कफ्लोहरू र CI/CD पाइपलाइनहरू हेर्नुहोस्
-- **Insights tab** - योगदानकर्ता, कमिटहरू, र परियोजनाको स्वास्थ्यको बारेमा एनालिटिक्स
+- **Insights tab** - योगदानकर्ताहरू, commits, र परियोजनाको स्वास्थ्यको बारेमा एनालिटिक्स
 - **Projects tab** - GitHub को बिल्ट-इन परियोजना व्यवस्थापन उपकरणहरू
 
-✅ आफ्नो नयाँ GitHub रिपोजिटरीको वरिपरि हेर्नुहोस् र केही कुरा प्रयास गर्नुहोस्, जस्तै सेटिङहरू सम्पादन गर्नु, आफ्नो रिपोजिटरीमा जानकारी थप्नु, परियोजना सिर्जना गर्नु (जस्तै Kanban बोर्ड), र स्वचालनको लागि GitHub Actions सेट गर्नु। तपाईं धेरै कुरा गर्न सक्नुहुन्छ!
+✅ आफ्नो नयाँ GitHub रिपोजिटरी वरिपरि हेर्नुहोस् र केही कुराहरू प्रयास गर्नुहोस्, जस्तै सेटिङहरू सम्पादन गर्नु, आफ्नो रिपोमा जानकारी थप्नु, परियोजना सिर्जना गर्नु (जस्तै Kanban बोर्ड), र स्वचालनको लागि GitHub Actions सेट गर्नुहोस्। तपाईं धेरै गर्न सक्नुहुन्छ!
 
 ---
 
 ## 🚀 चुनौती 
 
-ठिक छ, तपाईंको नयाँ GitHub सुपरपावरहरू परीक्षण गर्ने समय हो! 🚀 यहाँ एउटा चुनौती छ जसले सबै कुरा सबैभन्दा सन्तोषजनक तरिकामा क्लिक गराउनेछ:
+ठीक छ, अब तपाईंको नयाँ GitHub सुपरपावरहरू परीक्षण गर्ने समय हो! 🚀 यहाँ एक चुनौती छ जसले सबै कुरा सबैभन्दा सन्तोषजनक तरिकामा क्लिक गराउनेछ:
 
-एउटा साथी (वा त्यो परिवारको सदस्य जो सधैं सोध्छ कि तपाईं "कम्प्युटरको काम" के गर्दै हुनुहुन्छ) समात्नुहोस् र सँगै एक सहकारी कोडिङ साहसिक कार्यमा सामेल हुनुहोस्! यहीँ वास्तविक जादू हुन्छ – एउटा परियोजना सिर्जना गर्नुहोस्, उनीहरूलाई यसलाई फोर्क गर्न दिनुहोस्, केही शाखाहरू बनाउनुहोस्, र तपाईं बन्ने पेशेवरहरू जस्तै परिवर्तनहरू मर्ज गर्नुहोस्।
+एउटा साथी (वा त्यो परिवारको सदस्य जो सधैं तपाईंको "कम्प्युटरको कुरा" के हो भनेर सोध्छ) समात्नुहोस् र सँगै एक सहयोगात्मक कोडिङ साहसिक कार्यमा जानुहोस्! यहीँ वास्तविक जादू हुन्छ – परियोजना सिर्जना गर्नुहोस्, उनीहरूलाई यसलाई फोर्क गर्न दिनुहोस्, केही शाखाहरू बनाउनुहोस्, र तपाईं बन्ने पेशेवरहरू जस्तै परिवर्तनहरू मर्ज गर्नुहोस्।
 
-म झुट बोल्दिन – तपाईं कुनै बिन्दुमा हाँस्नुहुनेछ (विशेष गरी जब तपाईं दुवैले एउटै लाइन परिवर्तन गर्न प्रयास गर्नुहुन्छ), सायद अलमलमा पर्नुहुनेछ, तर तपाईं निश्चित रूपमा ती अद्भुत "आहा!" क्षणहरू पाउनुहुनेछ जसले सबै सिकाइलाई सार्थक बनाउँछ। साथै, कसैसँग त्यो पहिलो सफल मर्ज साझा गर्ने कुरा विशेष हुन्छ – यो तपाईंले कति टाढा आइपुग्नुभएको छ भन्ने सानो उत्सव जस्तै हो!
+म झूट बोल्दिन – तपाईं शायद कुनै बिन्दुमा हाँस्नुहुनेछ (विशेष गरी जब तपाईं दुवैले एउटै लाइन परिवर्तन गर्न प्रयास गर्नुहुन्छ), शायद अलिकति भ्रमित हुनुहुनेछ, तर तपाईं निश्चित रूपमा ती अद्भुत "आहा!" क्षणहरू पाउनुहुनेछ जसले सबै सिकाइलाई सार्थक बनाउँछ। साथै, कसैसँग पहिलो सफल मर्ज साझा गर्ने कुरा विशेष छ – यो तपाईंले कति टाढा आइपुग्नुभएको छ भन्ने सानो उत्सव जस्तै हो!
 
-अझै कोडिङ साथी छैन? कुनै चिन्ता छैन! GitHub समुदायमा धेरै स्वागतयोग्य मानिसहरू छन् जसले नयाँ भएको अनुभव सम्झन्छन्। "good first issue" लेबल भएका रिपोजिटरीहरू खोज्नुहोस् – तिनीहरू मूलतः भन्छन् "हे नयाँहरू, हामीसँग सिक्न आउनुहोस्!" यो कति राम्रो छ?
+अझै कोडिङ साथी छैन? कुनै चिन्ता छैन! GitHub समुदायमा धेरै स्वागत गर्ने मानिसहरू छन् जसले नयाँ भएको अनुभव सम्झन्छन्। "good first issue" लेबल भएका रिपोजिटरीहरू खोज्नुहोस् – तिनीहरूले मूलतः "हे नयाँ व्यक्तिहरू, हामीसँग सिक्न आउनुहोस्!" भनिरहेका छन्। यो कति राम्रो छ?
 
-## पोस्ट-लेक्चर क्विज
-[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/en/)
+## पोस्ट-व्याख्यान क्विज
+[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/en/)
 
 ## समीक्षा गर्नुहोस् र सिक्न जारी राख्नुहोस्
 
-वाह! 🎉 तपाईं – तपाईंले GitHub को आधारभूत कुराहरू एकदम च्याम्पियन जस्तै जित्नुभयो! यदि तपाईंको दिमाग अहिले अलिकति भरिएको जस्तो लाग्छ भने, त्यो पूर्ण रूपमा सामान्य हो र इमानदारीपूर्वक राम्रो संकेत हो। तपाईंले अहिले मात्र ती उपकरणहरू सिक्नुभयो जुन मैले सुरु गर्दा सिक्न हप्ताहरू लाग्यो।
+वाह! 🎉 हेर्नुहोस् तपाईं – तपाईंले GitHub को आधारभूत कुराहरू एकदम च्याम्पियन जस्तै जित्नुभएको छ! यदि तपाईंको दिमाग अहिले अलिकति भरिएको जस्तो लाग्छ भने, त्यो पूर्ण रूपमा सामान्य हो र इमानदारीपूर्वक राम्रो संकेत हो। तपाईंले अहिले मात्र उपकरणहरू सिक्नुभएको छ जुन मैले सुरु गर्दा सहज महसुस गर्न हप्ताहरू लाग्यो।
 
-Git र GitHub अविश्वसनीय रूपमा शक्तिशाली छन् (जस्तै, साँच्चै शक्तिशाली), र मैले चिनेका प्रत्येक विकासकर्ताले – जसले अहिले जादूगर जस्तो देखिन्छ – अभ्यास गर्नुपरेको थियो र यो सबै क्लिक गर्नुअघि अलमलमा पर्नुपरेको थियो। तपाईंले यो पाठ पूरा गर्नुभएको तथ्यले तपाईंलाई विकासकर्ताको टूलकिटका सबैभन्दा महत्त्वपूर्ण उपकरणहरूमा महारत हासिल गर्नको लागि पहिले नै बाटोमा राखेको छ।
+Git र GitHub अविश्वसनीय रूपमा शक्तिशाली छन् (जस्तै, साँच्चै शक्तिशाली), र म चिनेका प्रत्येक विकासकर्ताले – जसले अहिले जादूगर जस्तो देखिन्छ – अभ्यास गर्नुपरेको थियो र यो सबै क्लिक गर्नु अघि अलिकति संघर्ष गर्नुपरेको थियो। तपाईंले यो पाठ पार गर्नुभएको तथ्यले तपाईंलाई विकासकर्ताको टूलकिटका केही सबैभन्दा महत्त्वपूर्ण उपकरणहरूमा महारत हासिल गर्नको लागि पहिले नै बाटोमा राखेको छ।
 
-यहाँ केही उत्कृष्ट स्रोतहरू छन् जसले तपाईंलाई अभ्यास गर्न र अझ अद्भुत बन्न मद्दत गर्नेछ:
+यहाँ अभ्यास गर्न र अझ बढी अद्भुत बन्न मद्दत गर्ने केही उत्कृष्ट स्रोतहरू छन्:
 
-- [ओपन सोर्स सफ्टवेयर गाइडमा योगदान](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – फरक पार्ने तपाईंको रोडम्याप
-- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – छिटो सन्दर्भको लागि यो हातमा राख्नुहोस्!
+- [ओपन सोर्स सफ्टवेयरमा योगदान गर्ने मार्गदर्शन](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – फरक पार्ने तपाईंको रोडम्याप
+- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – छिटो सन्दर्भको लागि यो handy राख्नुहोस्!
 
-र सम्झनुहोस्: अभ्यासले प्रगति ल्याउँछ, पूर्णता होइन! तपाईंले Git र GitHub जति धेरै प्रयोग गर्नुहुन्छ, यो त्यति नै स्वाभाविक हुन्छ। GitHub ले केही अद्भुत अन्तरक्रियात्मक पाठ्यक्रमहरू सिर्जना गरेको छ जसले तपाईंलाई सुरक्षित वातावरणमा अभ्यास गर्न दिन्छ:
+र सम्झनुहोस्: अभ्यासले प्रगति ल्याउँछ, पूर्णता होइन! तपाईंले Git र GitHub जति धेरै प्रयोग गर्नुहुन्छ, यो त्यति नै प्राकृतिक हुन्छ। GitHub ले तपाईंलाई सुरक्षित वातावरणमा अभ्यास गर्न दिने केही अद्भुत अन्तरक्रियात्मक पाठ्यक्रमहरू सिर्जना गरेको छ:
 
 - [GitHub को परिचय](https://github.com/skills/introduction-to-github)
 - [Markdown प्रयोग गरेर संवाद गर्नुहोस्](https://github.com/skills/communicate-using-markdown)  
 - [GitHub Pages](https://github.com/skills/github-pages)
-- [मर्ज कन्फ्लिक्टहरू व्यवस्थापन गर्नुहोस्](https://github.com/skills/resolve-merge-conflicts)
+- [मर्ज विवादहरू व्यवस्थापन गर्नुहोस्](https://github.com/skills/resolve-merge-conflicts)
 
 **साहसी महसुस गर्दै हुनुहुन्छ? यी आधुनिक उपकरणहरू जाँच गर्नुहोस्:**
 - [GitHub CLI दस्तावेज](https://cli.github.com/manual/) – जब तपाईं कमाण्ड-लाइन जादूगर जस्तो महसुस गर्न चाहनुहुन्छ
 - [GitHub Codespaces दस्तावेज](https://docs.github.com/en/codespaces) – क्लाउडमा कोड गर्नुहोस्!
-- [GitHub Actions दस्तावेज](https://docs.github.com/en/actions) – सबै कुरा स्वचालित गर्नुहोस्
+- [GitHub Actions दस्तावेज](https://docs.github.com/en/actions) – सबै कुराहरू स्वचालित गर्नुहोस्
 - [Git को उत्कृष्ट अभ्यासहरू](https://www.atlassian.com/git/tutorials/comparing-workflows) – तपाईंको वर्कफ्लो खेल स्तर अप गर्नुहोस् 
 
-## GitHub Copilot Agent चुनौती 🚀
+## GitHub Copilot Agent Challenge 🚀
 
 Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** तपाईंले यस पाठमा सिकेको सम्पूर्ण GitHub वर्कफ्लो प्रदर्शन गर्ने सहकारी वेब विकास परियोजना सिर्जना गर्नुहोस्। यो चुनौतीले तपाईंलाई वास्तविक संसारको परिदृश्यमा रिपोजिटरी सिर्जना, सहकार्य सुविधाहरू, र आधुनिक Git वर्कफ्लोहरू अभ्यास गर्न मद्दत गर्नेछ।
+**विवरण:** तपाईंले यस पाठमा सिक्नुभएको सम्पूर्ण GitHub वर्कफ्लो प्रदर्शन गर्ने सहयोगात्मक वेब विकास परियोजना सिर्जना गर्नुहोस्। यो चुनौतीले तपाईंलाई रिपोजिटरी सिर्जना, सहयोग सुविधाहरू, र आधुनिक Git वर्कफ्लोहरू वास्तविक संसारको परिदृश्यमा अभ्यास गर्न मद्दत गर्नेछ।
 
-**प्रेरणा:** "Web Development Resources" परियोजनाको लागि नयाँ सार्वजनिक GitHub रिपोजिटरी सिर्जना गर्नुहोस्। रिपोजिटरीमा राम्रो संरचित README.md फाइल समावेश गर्नुहोस् जसमा उपयोगी वेब विकास उपकरणहरू र स्रोतहरू सूचीबद्ध गरिएको हो, श्रेणीहरू (HTML, CSS, JavaScript, आदि) द्वारा व्यवस्थित। रिपोजिटरीलाई उचित समुदाय मापदण्डहरू सहित सेट गर्नुहोस् जसमा लाइसेन्स, योगदान दिशानिर्देशहरू, र आचार संहिता समावेश छ। CSS स्रोतहरू थप्नको लागि एउटा शाखा र JavaScript स्रोतहरू थप्नको लागि अर्को शाखा सिर्जना गर्नुहोस्। प्रत्येक शाखामा वर्णनात्मक कमिट सन्देशहरू सहित कमिटहरू गर्नुहोस्, त्यसपछि परिवर्तनहरू मुख्यमा मर्ज गर्न Pull Requests सिर्जना गर्नुहोस्। Issues, Discussions जस्ता GitHub सुविधाहरू सक्षम गर्नुहोस् र स्वचालित चेकहरूको लागि आधारभूत GitHub Actions वर्कफ्लो सेट गर्नुहोस्।
+**प्रेरणा:** "वेब विकास स्रोतहरू" परियोजनाको लागि नयाँ सार्वजनिक GitHub रिपोजिटरी सिर्जना गर्नुहोस्। रिपोजिटरीमा HTML, CSS, JavaScript आदि श्रेणीहरूद्वारा व्यवस्थित उपयोगी वेब विकास उपकरणहरू र स्रोतहरूको सूची समावेश भएको राम्रो संरचित README.md फाइल समावेश गर्नुहोस्। लाइसेन्स, योगदान दिशानिर्देशहरू, र आचार संहिता सहित उचित समुदाय मापदण्डहरू सहित रिपोजिटरी सेट अप गर्नुहोस्। CSS स्रोतहरू थप्नको लागि एउटा शाखा र JavaScript स्रोतहरू थप्नको लागि अर्को शाखा सिर्जना गर्नुहोस्। प्रत्येक शाखामा वर्णनात्मक commit messages सहित commits गर्नुहोस्, त्यसपछि परिवर्तनहरू मुख्यमा मर्ज गर्न pull requests सिर्जना गर्नुहोस्। Issues, Discussions जस्ता GitHub सुविधाहरू सक्षम गर्नुहोस् र स्वचालित जाँचहरूको लागि आधारभूत GitHub Actions वर्कफ्लो सेट अप गर्नुहोस्।
 
 ## असाइनमेन्ट 
 
-तपाईंको मिशन, यदि तपाईंले स्वीकार गर्नुभयो भने: GitHub Skills मा [GitHub को परिचय](https://github.com/skills/introduction-to-github) पाठ्यक्रम पूरा गर्नुहोस्। यो अन्तरक्रियात्मक पाठ्यक्रमले तपाईंलाई सुरक्षित, निर्देशित वातावरणमा तपाईंले सिकेको सबै कुरा अभ्यास गर्न दिन्छ। साथै, तपाईंले पूरा गरेपछि एउटा राम्रो ब्याज पाउनुहुनेछ! 🏅
+तपाईंको मिशन, यदि तपाईंले स्वीकार गर्नुभयो भने: GitHub Skills मा [GitHub को परिचय](https://github.com/skills/introduction-to-github) पाठ्यक्रम पूरा गर्नुहोस्। यो अन्तरक्रियात्मक पाठ्यक्रमले तपाईंलाई सुरक्षित, निर्देशित वातावरणमा तपाईंले सिक्नुभएको सबै कुरा अभ्यास गर्न दिनेछ। साथै, तपाईंले पूरा गरेपछि एक शानदार ब्याज प्राप्त गर्नुहुनेछ! 🏅
 
-**अझै चुनौतीहरूको लागि तयार हुनुहुन्छ?**
-- आफ्नो GitHub खाताको लागि SSH प्रमाणीकरण सेट गर्नुहोस् (अब पासवर्ड आवश्यक छैन!)
+**अझै चुनौतीहरूको लागि तयार महसुस गर्दै हुनुहुन्छ?**
+- आफ्नो GitHub खाताको लागि SSH प्रमाणीकरण सेट अप गर्नुहोस् (अब पासवर्डहरू छैनन्!)
 - आफ्नो दैनिक Git अपरेसनहरूको लागि GitHub CLI प्रयोग गर्ने प्रयास गर्नुहोस्
-- GitHub Actions वर्कफ्लो भएको रिपोजिटरी सिर्जना गर्नुहोस्
+- GitHub Actions वर्कफ्लो सहित रिपोजिटरी सिर्जना गर्नुहोस्
 - यो रिपोजिटरीलाई क्लाउड-आधारित सम्पादकमा खोल्दै GitHub Codespaces अन्वेषण गर्नुहोस्
 
+---
+
+## 🚀 तपाईंको GitHub महारतको समयरेखा
+
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] यो रिपोजिटरी र तपाईंलाई चासो लाग्ने अन्य ३ परियोजनाहरूलाई स्टार गर्नुहोस्
+- [ ] आफ्नो GitHub खातामा दुई-कारक प्रमाणीकरण सेट अप गर्नुहोस्
+- [ ] आफ्नो पहिलो रिपोजिटरीको लागि साधारण README सिर्जना गर्नुहोस्
+- [ ] तपाईंलाई प्रेरित गर्ने ५ विकासकर्ताहरूलाई फलो गर्नुहोस्
+
+### 🎯 **यो घण्टामा तपाईं के हासिल गर्न सक्नुहुन्छ**
+- [ ] पोस्ट-लेसन क्विज पूरा गर्नुहोस् र आफ्नो GitHub यात्रा प्रतिबिम्बित गर्नुहोस्
+- [ ] SSH कुञ्जीहरू सेट अप गर्नुहोस् पासवर्ड-रहित GitHub प्रमाणीकरणको लागि
+- [ ] उत्कृष्ट commit message सहित आफ्नो पहिलो अर्थपूर्ण commit सिर्जना गर्नुहोस्
+- [ ] GitHub को "Explore" ट्याब अन्वेषण गर्नुहोस् र ट्रेन्डिङ परियोजनाहरू पत्ता लगाउनुहोस्
+- [ ] रिपोजिटरी फोर्क गर्ने अभ्यास गर्नुहोस् र सानो परिवर्तन गर्नुहोस्
+
+### 📅 **तपाईंको हप्ताको GitHub साहसिक कार्य**
+- [ ] GitHub Skills पाठ्यक्रमहरू पूरा गर्नुहोस् (GitHub को परिचय, Markdown)
+- [ ] ओपन सोर्स परियोजनामा आफ्नो पहिलो pull request गर्नुहोस्
+- [ ] आफ्नो काम प्रदर्शन गर्न GitHub Pages साइट सेट अप गर्नुहोस्
+- [ ] तपाईंलाई चासो लाग्ने परियोजनाहरूमा GitHub Discussions मा सामेल हुनुहोस्
+- [ ] उचित समुदाय मापदण्डहरू (README, लाइसेन्स आदि) सहित रिपोजिटरी सिर्जना गर्नुहोस्
+- [ ] क्लाउड-आधारित विकासको लागि GitHub Codespaces प्रयास गर्नुहोस्
+
+### 🌟 **तपाईंको महिनाको रूपान्तरण**
+- [ ] ३ विभिन्न ओपन सोर्स परियोजनाहरूमा योगदान गर्नुहोस्
+- [ ] GitHub मा नयाँ व्यक्तिलाई मार्गदर्शन गर्नुहोस् (अगाडि बढाउनुहोस्!)
+- [ ] GitHub Actions सहित स्वचालित वर्कफ्लोहरू सेट अप गर्नुहोस्
+- [ ] आफ्नो GitHub योगदानहरू प्रदर्शन गर्ने पोर्टफोलियो निर्माण गर्नुहोस्
+- [ ] Hacktoberfest वा यस्तै समुदाय घटनाहरूमा भाग लिनुहोस्
+- [ ] अरूले योगदान गर्ने आफ्नो परियोजनाको मर्मतकर्ता बन्नुहोस्
+
+### 🎓 **अन्तिम GitHub महारत जाँच**
+
+**तपाईंले कति टाढा आइपुग्नुभएको छ भन्ने कुरा मनाउन:**
+- GitHub प्रयोग गर्ने बारे तपाईंको मनपर्ने कुरा के हो?
+- कुन सहयोग सुविधा तपाईंलाई सबैभन्दा रोमाञ्चक लाग्छ?
+- ओपन सोर्समा योगदान गर्ने बारे तपाईं कति आत्मविश्वासी महसुस गर्नुहुन्छ?
+- तपाईंले योगदान गर्न चाहनुभएको पहिलो परियोजना के हो?
+
+```mermaid
+journey
+    title Your GitHub Confidence Journey
+    section Today
+      Nervous: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Contributing: 5: You
+      Connecting: 5: You
+    section Next Month
+      Collaborating: 5: You
+      Leading: 5: You
+      Inspiring Others: 5: You
+```
+
+> 🌍 **विश्वव्यापी विकासकर्ता समुदायमा स्वागत छ!** तपाईंले अब विश्वभरका लाखौं विकासकर्ताहरूसँग सहयोग गर्न उपकरणहरू पाउनुभएको छ। तपाईंको पहिलो योगदान सानो देखिन सक्छ, तर सम्झनुहोस् - प्रत्येक प्रमुख ओपन सोर्स परियोजना कसैले आफ्नो पहिलो commit बनाएकोबाट सुरु भएको थियो। प्रश्न यो होइन कि तपाईंले प्रभाव पार्नुहुनेछ कि होइन, तर कुन अद्भुत परियोजनाले पहिलो पटक तपाईंको अनौठो दृष्टिकोणबाट फाइदा उठाउनेछ! 🚀
+
 सम्झनुहोस्: प्रत्येक विशेषज्ञ एक पटक नयाँ थियो। तपाईंले यो गर्न सक्नुहुन्छ! 💪
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/1-getting-started-lessons/3-accessibility/README.md b/translations/ne/1-getting-started-lessons/3-accessibility/README.md
index 8f5930157f..662020b0ab 100644
--- a/translations/ne/1-getting-started-lessons/3-accessibility/README.md
+++ b/translations/ne/1-getting-started-lessons/3-accessibility/README.md
@@ -1,122 +1,172 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90b19cde5b79b29e91babd3138cd8035",
-  "translation_date": "2025-10-22T16:49:05+00:00",
+  "original_hash": "7f2c48e04754724123ea100a822765e5",
+  "translation_date": "2025-11-03T15:23:04+00:00",
   "source_file": "1-getting-started-lessons/3-accessibility/README.md",
   "language_code": "ne"
 }
 -->
-# पहुँचयोग्य वेबपृष्ठहरू बनाउने
+# पहुँचयोग्य वेबपेजहरू बनाउने
 
-![पहुंचको बारेमा सबै](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ne.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
+![पहुंचयोग्यता सम्बन्धी सबै कुरा](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ne.png)
+> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
+
+```mermaid
+journey
+    title Your Accessibility Learning Adventure
+    section Foundation
+      Understanding Users: 5: You
+      Testing Tools: 4: You
+      POUR Principles: 5: You
+    section Build Skills
+      Semantic HTML: 4: You
+      Visual Design: 5: You
+      ARIA Techniques: 4: You
+    section Master Practice
+      Keyboard Navigation: 5: You
+      Form Accessibility: 4: You
+      Real-world Testing: 5: You
+```
 
 ## प्रि-लेक्चर क्विज
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/)
 
-> वेबको शक्ति यसको सार्वभौमिकतामा छ। अपाङ्गता भए पनि सबैको पहुँच एक महत्वपूर्ण पक्ष हो।
+> वेबको शक्ति यसको सार्वभौमिकतामा छ। अपाङ्गता भए पनि सबैले पहुँच पाउनु अनिवार्य पक्ष हो।
 >
 > \- सर टिमोथी बर्नर्स-ली, W3C निर्देशक र वर्ल्ड वाइड वेबका आविष्कारक
 
-यहाँ केही चकित पार्ने कुरा छ: जब तपाईं पहुँचयोग्य वेबसाइटहरू बनाउनुहुन्छ, तपाईं केवल अपाङ्गता भएका व्यक्तिहरूलाई सहयोग गरिरहनुभएको छैन—तपाईं वास्तवमा सबैका लागि वेबलाई राम्रो बनाइरहनुभएको छ!
+तपाईंलाई यो थाहा पाउँदा अचम्म लाग्न सक्छ: जब तपाईं पहुँचयोग्य वेबसाइटहरू बनाउनुहुन्छ, तपाईं केवल अपाङ्गता भएका व्यक्तिहरूलाई सहयोग गरिरहनुभएको छैन—तपाईं वास्तवमा सबैका लागि वेबलाई अझ राम्रो बनाइरहनुभएको छ!
 
-के तपाईंले कहिल्यै सडकको कुनामा भएका 'कर्ब कट्स' देख्नुभएको छ? ती मूलतः व्हीलचेयरका लागि डिजाइन गरिएका थिए, तर अहिले तिनीहरूले बच्चाको गाडी, डेलिभरी कामदारहरू, यात्रुहरू, र साइकल चालकहरूलाई पनि सहयोग गर्छन्। पहुँचयोग्य वेब डिजाइन ठीक यस्तै काम गर्छ—एक समूहलाई सहयोग गर्ने समाधानले प्रायः सबैलाई फाइदा पुर्‍याउँछ। कस्तो चाखलाग्दो कुरा, हैन?
+के तपाईंले कहिल्यै सडकको कुनामा भएका ती साना ढलानहरू देख्नुभएको छ? ती मूल रूपमा व्हीलचेयरका लागि डिजाइन गरिएका थिए, तर अहिले तिनीहरूले बच्चाको गाडी, डेलिभरी कामदारहरू, यात्रुहरू, र साइकल चालकहरूलाई पनि सहयोग गर्छन्। पहुँचयोग्य वेब डिजाइन पनि यस्तै हो—एक समूहलाई सहयोग गर्ने समाधानले प्रायः सबैलाई फाइदा पुर्‍याउँछ। रमाइलो, हैन?
 
-यस पाठमा, हामी वेबसाइटहरू कसरी बनाउने भनेर अन्वेषण गर्नेछौं जसले सबैका लागि काम गर्छ, चाहे उनीहरूले वेब कसरी ब्राउज गरे पनि। तपाईं व्यावहारिक प्रविधिहरू पत्ता लगाउनुहुनेछ जुन पहिले नै वेब मापदण्डहरूमा समावेश छन्, परीक्षण उपकरणहरूसँग काम गर्नुहुनेछ, र कसरी पहुँचले तपाईंको साइटहरू सबै प्रयोगकर्ताहरूका लागि बढी उपयोगी बनाउँछ भन्ने देख्नुहुनेछ।
+यस पाठमा, हामी वेबसाइटहरू कसरी बनाउने भनेर अन्वेषण गर्नेछौं जसले सबैका लागि काम गर्छ, चाहे उनीहरूले वेब कसरी ब्राउज गरे पनि। तपाईंले वेब मापदण्डहरूमा पहिले नै समावेश गरिएका व्यावहारिक प्रविधिहरू पत्ता लगाउनुहुनेछ, परीक्षण उपकरणहरूसँग काम गर्नुहुनेछ, र पहुँचयोग्यता कसरी सबै प्रयोगकर्ताहरूका लागि तपाईंको साइटहरूलाई अझ उपयोगी बनाउँछ भन्ने देख्नुहुनेछ।
 
-यस पाठको अन्त्यसम्ममा, तपाईंलाई पहुँचलाई तपाईंको विकास कार्यप्रवाहको प्राकृतिक भाग बनाउन आत्मविश्वास हुनेछ। वेबलाई अर्बौं प्रयोगकर्ताहरूका लागि खुला बनाउन विचारशील डिजाइन विकल्पहरूले कसरी मद्दत गर्न सक्छन् भनेर अन्वेषण गर्न तयार हुनुहुन्छ? सुरु गरौं!
+पाठको अन्त्यसम्ममा, तपाईंले पहुँचयोग्यतालाई तपाईंको विकास कार्यप्रवाहको प्राकृतिक भाग बनाउन आत्मविश्वास पाउनुहुनेछ। विचारशील डिजाइन विकल्पहरूले अरबौं प्रयोगकर्ताहरूका लागि वेब खोल्न कसरी मद्दत गर्न सक्छ भन्ने अन्वेषण गर्न तयार हुनुहुन्छ? सुरु गरौं!
+
+```mermaid
+mindmap
+  root((Web Accessibility))
+    Users
+      Screen readers
+      Keyboard navigation
+      Voice control
+      Magnification
+    Technologies
+      HTML semantics
+      ARIA attributes
+      CSS focus indicators
+      Keyboard events
+    Benefits
+      Wider audience
+      Better SEO
+      Legal compliance
+      Universal design
+    Testing
+      Automated tools
+      Manual testing
+      User feedback
+      Real assistive tech
+```
 
 > तपाईं यो पाठ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) मा लिन सक्नुहुन्छ!
 
-## सहायक प्रविधिहरूको समझ
+## सहायक प्रविधिहरू बुझ्दै
 
-कोडिङमा जानु अघि, विभिन्न क्षमताका व्यक्तिहरूले वेबलाई वास्तवमा कसरी अनुभव गर्छन् भन्ने कुरा बुझ्न एक क्षण लिऔं। यो केवल सिद्धान्त होइन—यी वास्तविक संसारका नेभिगेसन ढाँचाहरू बुझ्दा तपाईं एकदम राम्रो विकासकर्ता बन्नुहुनेछ!
+कोडिङमा जानु अघि, विभिन्न क्षमताका व्यक्तिहरूले वेबलाई वास्तवमा कसरी अनुभव गर्छन् भन्ने कुरा बुझ्न एक क्षण लिऔं। यो केवल सिद्धान्त होइन—यी वास्तविक-विश्व नेभिगेसन ढाँचाहरू बुझ्दा तपाईं एकदम राम्रो विकासकर्ता बन्नुहुनेछ!
 
-सहायक प्रविधिहरू अद्भुत उपकरणहरू हुन् जसले अपाङ्गता भएका व्यक्तिहरूलाई वेबसाइटहरूसँग अन्तर्क्रिया गर्न मद्दत गर्छ। एकपटक तपाईंले यी प्रविधिहरू कसरी काम गर्छन् भन्ने कुरा बुझ्नुभयो भने, पहुँचयोग्य वेब अनुभवहरू सिर्जना गर्नु धेरै सहज हुन्छ। यो तपाईंको कोडलाई अरूको आँखाबाट हेर्न सिक्न जस्तै हो।
+सहायक प्रविधिहरू अपाङ्गता भएका व्यक्तिहरूलाई वेबसाइटहरूसँग अन्तरक्रिया गर्न मद्दत गर्ने अद्भुत उपकरणहरू हुन्। एकपटक तपाईंले यी प्रविधिहरू कसरी काम गर्छन् भन्ने कुरा बुझ्नुभयो भने, पहुँचयोग्य वेब अनुभवहरू सिर्जना गर्नु धेरै सहज हुन्छ। यो कसैको आँखाबाट तपाईंको कोड हेर्न सिक्न जस्तै हो।
 
 ### स्क्रिन रिडरहरू
 
-[स्क्रिन रिडरहरू](https://en.wikipedia.org/wiki/Screen_reader) डिजिटल पाठलाई भाषण वा ब्रेल आउटपुटमा रूपान्तरण गर्ने अत्यन्त परिष्कृत प्रविधिहरू हुन्। तिनीहरू मुख्य रूपमा दृष्टि अपाङ्गता भएका व्यक्तिहरूले प्रयोग गर्छन्, तर तिनीहरू सिकाइ अपाङ्गता भएका प्रयोगकर्ताहरूका लागि पनि धेरै उपयोगी छन्, जस्तै डिस्लेक्सिया।
+[स्क्रिन रिडरहरू](https://en.wikipedia.org/wiki/Screen_reader) डिजिटल पाठलाई भाषण वा ब्रेल आउटपुटमा रूपान्तरण गर्ने अत्यन्त परिष्कृत प्रविधिहरू हुन्। यद्यपि तिनीहरू मुख्य रूपमा दृष्टि अपाङ्गता भएका व्यक्तिहरूले प्रयोग गर्छन्, तिनीहरू डिस्लेक्सिया जस्ता सिकाइ अपाङ्गता भएका प्रयोगकर्ताहरूका लागि पनि धेरै उपयोगी छन्।
 
-म स्क्रिन रिडरलाई एकदम स्मार्ट कथावाचकले तपाईंलाई पुस्तक पढिरहेको जस्तो सोच्न मन पराउँछु। यसले सामग्रीलाई तार्किक क्रममा पढ्छ, "बटन" वा "लिंक" जस्ता अन्तरक्रियात्मक तत्वहरू घोषणा गर्छ, र पृष्ठमा हिँड्नको लागि किबोर्ड सर्टकटहरू प्रदान गर्छ। तर यहाँ कुरा छ—स्क्रिन रिडरहरूले केवल आफ्नो जादू काम गर्न सक्छन् यदि हामीले वेबसाइटहरू उचित संरचना र अर्थपूर्ण सामग्रीको साथ निर्माण गरेका छौं। यहाँ तपाईं विकासकर्ता रूपमा आउनुहुन्छ!
+म स्क्रिन रिडरलाई एकदमै स्मार्ट कथावाचकले पुस्तक पढिरहेको जस्तो सोच्न मन पराउँछु। यसले सामग्रीलाई तार्किक क्रममा पढ्छ, "बटन" वा "लिंक" जस्ता अन्तरक्रियात्मक तत्वहरू घोषणा गर्छ, र पृष्ठमा हिँड्नका लागि किबोर्ड सर्टकटहरू प्रदान गर्छ। तर यहाँ कुरा के छ—स्क्रिन रिडरहरूले आफ्नो जादू मात्र तब गर्न सक्छन् जब हामीले वेबसाइटहरू उचित संरचना र अर्थपूर्ण सामग्रीका साथ निर्माण गर्छौं। यो तपाईंको जिम्मेवारी हो विकासकर्ता!
 
 **प्लेटफर्महरूमा लोकप्रिय स्क्रिन रिडरहरू:**
-- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (निःशुल्क र सबैभन्दा लोकप्रिय), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (बिल्ट-इन)
+- **विन्डोज**: [NVDA](https://www.nvaccess.org/about-nvda/) (निःशुल्क र सबैभन्दा लोकप्रिय), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (बिल्ट-इन)
 - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (बिल्ट-इन र धेरै सक्षम)
-- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (बिल्ट-इन)
-- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (निःशुल्क र ओपन-सोर्स)
+- **एन्ड्रोइड**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (बिल्ट-इन)
+- **लिनक्स**: [Orca](https://wiki.gnome.org/Projects/Orca) (निःशुल्क र ओपन-सोर्स)
 
 **स्क्रिन रिडरहरूले वेब सामग्री कसरी नेभिगेट गर्छन्:**
 
-स्क्रिन रिडरहरूले धेरै नेभिगेसन विधिहरू प्रदान गर्छन् जसले अनुभवी प्रयोगकर्ताहरूका लागि ब्राउजिङलाई प्रभावकारी बनाउँछ:
-- **क्रमिक पढाइ**: सामग्रीलाई माथिबाट तलसम्म पढ्छ, पुस्तकको जस्तै
-- **ल्यान्डमार्क नेभिगेसन**: पृष्ठका भागहरूमा (हेडर, नेभ, मेन, फुटर) हिँड्न
-- **हेडिङ नेभिगेसन**: हेडिङहरू बीचमा हिँड्न पृष्ठ संरचना बुझ्न
-- **लिंक सूचीहरू**: सबै लिंकहरूको सूची उत्पन्न गरेर छिटो पहुँच
-- **फारम नियन्त्रणहरू**: इनपुट फिल्डहरू र बटनहरू बीचमा सिधै नेभिगेट गर्नुहोस्
+स्क्रिन रिडरहरूले अनुभवी प्रयोगकर्ताहरूका लागि ब्राउजिङलाई प्रभावकारी बनाउने धेरै नेभिगेसन विधिहरू प्रदान गर्छन्:
+- **क्रमिक पढाइ**: सामग्रीलाई माथिबाट तलसम्म पढ्छ, पुस्तकको अनुसरण गरेजस्तै
+- **ल्यान्डमार्क नेभिगेसन**: पृष्ठका भागहरूमा (हेडर, नेभ, मेन, फुटर) हाम फाल्छ
+- **हेडिङ नेभिगेसन**: हेडिङहरू बीचमा हाम फाल्छ र पृष्ठ संरचना बुझ्छ
+- **लिंक सूचीहरू**: छिटो पहुँचका लागि सबै लिंकहरूको सूची उत्पन्न गर्छ
+- **फर्म नियन्त्रणहरू**: इनपुट फिल्डहरू र बटनहरू बीचमा सिधै नेभिगेट गर्छ
 
-> 💡 **यहाँ केही चकित पार्ने कुरा छ**: 68% स्क्रिन रिडर प्रयोगकर्ताहरू मुख्य रूपमा हेडिङहरूद्वारा नेभिगेट गर्छन् ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding))। यसको मतलब तपाईंको हेडिङ संरचना प्रयोगकर्ताहरूका लागि रोडम्याप जस्तै हो—जब तपाईंले यसलाई सही बनाउनुहुन्छ, तपाईंले मानिसहरूलाई छिटो सामग्री वरिपरि हिँड्न मद्दत गरिरहनुभएको छ!
+> 💡 **यो कुरा सुनेर तपाईंलाई अचम्म लाग्न सक्छ**: 68% स्क्रिन रिडर प्रयोगकर्ताहरू मुख्य रूपमा हेडिङहरूद्वारा नेभिगेट गर्छन् ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding))। यसको मतलब तपाईंको हेडिङ संरचना प्रयोगकर्ताहरूका लागि रोडम्याप जस्तै हो—जब तपाईंले यसलाई सही बनाउनुहुन्छ, तपाईंले मानिसहरूलाई तपाईंको सामग्री वरिपरि छिटो बाटो पत्ता लगाउन मद्दत गरिरहनुभएको छ!
 
-### परीक्षण कार्यप्रवाह निर्माण गर्दै
+### तपाईंको परीक्षण कार्यप्रवाह निर्माण गर्दै
 
-यहाँ केही राम्रो समाचार छ—प्रभावकारी पहुँच परीक्षणले तपाईंलाई तनावग्रस्त बनाउनु पर्दैन! तपाईंले स्वचालित उपकरणहरू (तिनीहरूले स्पष्ट समस्याहरू पत्ता लगाउन उत्कृष्ट छन्) र केही हातले परीक्षणलाई संयोजन गर्न चाहनुहुन्छ। यहाँ एक व्यवस्थित दृष्टिकोण छ जसले धेरै समस्याहरू पत्ता लगाउँछ बिना तपाईंको सारा दिन खाइदिने:
+यहाँ केही राम्रो समाचार छ—प्रभावकारी पहुँचयोग्यता परीक्षणले तपाईंलाई तनावग्रस्त बनाउनु पर्दैन! तपाईंले स्वचालित उपकरणहरू (तिनीहरूले स्पष्ट समस्याहरू पत्ता लगाउन उत्कृष्ट छन्) र केही हातले परीक्षणलाई संयोजन गर्न चाहनुहुन्छ। यहाँ एक व्यवस्थित दृष्टिकोण छ जसले धेरै समस्याहरू पत्ता लगाउँछ बिना तपाईंको सारा दिन खाइदिने:
 
 **आवश्यक म्यानुअल परीक्षण कार्यप्रवाह:**
 
 ```mermaid
-graph TD
-    A[Start Testing] --> B{Keyboard Navigation}
+flowchart TD
+    A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation}
     B --> C[Tab through all interactive elements]
-    C --> D{Screen Reader Testing}
+    C --> D{🎧 Screen Reader Testing}
     D --> E[Test with NVDA/VoiceOver]
-    E --> F{Zoom Testing}
+    E --> F{🔍 Zoom Testing}
     F --> G[Zoom to 200% and test functionality]
-    G --> H{Color/Contrast Check}
+    G --> H{🎨 Color/Contrast Check}
     H --> I[Verify all text meets contrast ratios]
-    I --> J{Focus Management}
+    I --> J{👁️ Focus Management}
     J --> K[Ensure focus indicators are visible]
-    K --> L[Testing Complete]
+    K --> L[✅ Testing Complete]
+    
+    style A fill:#e3f2fd
+    style L fill:#e8f5e8
+    style B fill:#fff3e0
+    style D fill:#f3e5f5
+    style F fill:#e0f2f1
+    style H fill:#fce4ec
+    style J fill:#e8eaf6
 ```
 
 **चरण-दर-चरण परीक्षण चेकलिस्ट:**
 1. **किबोर्ड नेभिगेसन**: केवल Tab, Shift+Tab, Enter, Space, र Arrow कुञ्जीहरू प्रयोग गर्नुहोस्
 2. **स्क्रिन रिडर परीक्षण**: NVDA, VoiceOver, वा Narrator सक्षम गर्नुहोस् र आँखा बन्द गरेर नेभिगेट गर्नुहोस्
-3. **जूम परीक्षण**: 200% र 400% जूम स्तरहरूमा परीक्षण गर्नुहोस्
-4. **रंग कन्ट्रास्ट प्रमाणीकरण**: सबै पाठ र UI घटकहरू जाँच गर्नुहोस्
-5. **फोकस सूचक परीक्षण**: सबै अन्तरक्रियात्मक तत्वहरूमा दृश्य फोकस अवस्थाहरू सुनिश्चित गर्नुहोस्
+3. **जुम परीक्षण**: 200% र 400% जुम स्तरहरूमा परीक्षण गर्नुहोस्
+4. **रङ कन्ट्रास्ट प्रमाणीकरण**: सबै पाठ र UI घटकहरू जाँच गर्नुहोस्
+5. **फोकस सूचक परीक्षण**: सुनिश्चित गर्नुहोस् कि सबै अन्तरक्रियात्मक तत्वहरूमा देखिने फोकस अवस्था छ
 
-✅ **Lighthouse बाट सुरु गर्नुहोस्**: तपाईंको ब्राउजरको DevTools खोल्नुहोस्, Lighthouse पहुँच अडिट चलाउनुहोस्, त्यसपछि परिणामहरूलाई तपाईंको म्यानुअल परीक्षण फोकस क्षेत्रहरू मार्गदर्शन गर्न प्रयोग गर्नुहोस्।
+✅ **लाइटहाउसबाट सुरु गर्नुहोस्**: तपाईंको ब्राउजरको DevTools खोल्नुहोस्, लाइटहाउस पहुँचयोग्यता अडिट चलाउनुहोस्, त्यसपछि परिणामहरूलाई तपाईंको म्यानुअल परीक्षण फोकस क्षेत्रहरू मार्गदर्शन गर्न प्रयोग गर्नुहोस्।
 
-### जूम र म्याग्निफिकेसन उपकरणहरू
+### जुम र म्याग्निफिकेसन उपकरणहरू
 
-तपाईंले कहिल्यै आफ्नो फोनमा पाठ सानो हुँदा पिन्च गरेर जूम गर्नुभएको छ, वा उज्यालो घाममा आफ्नो ल्यापटप स्क्रिनमा आँखा चिम्लेर हेर्नुभएको छ? धेरै प्रयोगकर्ताहरूले सामग्रीलाई पढ्न योग्य बनाउन म्याग्निफिकेसन उपकरणहरूमा दैनिक निर्भर गर्छन्। यसमा कम दृष्टि भएका व्यक्तिहरू, वृद्ध व्यक्तिहरू, र कहिल्यै बाहिर वेबसाइट पढ्ने प्रयास गर्ने जो कोही समावेश छन्।
+तपाईंले कहिल्यै आफ्नो फोनमा पाठ सानो हुँदा जुम गर्नको लागि पिन्च गर्नुभएको छ, वा उज्यालो घाममा आफ्नो ल्यापटप स्क्रिनमा आँखा चिम्लेर हेर्नुभएको छ? धेरै प्रयोगकर्ताहरूले सामग्रीलाई पढ्न योग्य बनाउन म्याग्निफिकेसन उपकरणहरूमा दैनिक निर्भर गर्छन्। यसमा कम दृष्टि भएका व्यक्तिहरू, वृद्ध व्यक्तिहरू, र कहिल्यै बाहिर वेबसाइट पढ्ने प्रयास गर्ने जो कोही समावेश छन्।
 
-आधुनिक जूम प्रविधिहरूले केवल चीजहरू ठूलो बनाउने भन्दा पर विकास गरेका छन्। यी उपकरणहरू कसरी काम गर्छन् भन्ने कुरा बुझ्दा तपाईंले उत्तरदायी डिजाइनहरू सिर्जना गर्न मद्दत गर्नेछ जुन कुनै पनि म्याग्निफिकेसन स्तरमा कार्यात्मक र आकर्षक रहन्छ।
+आधुनिक जुम प्रविधिहरू केवल चीजहरू ठूलो बनाउने भन्दा पर विकसित भएका छन्। यी उपकरणहरू कसरी काम गर्छन् भन्ने कुरा बुझ्दा तपाईंले उत्तरदायी डिजाइनहरू सिर्जना गर्न सक्नुहुन्छ जसले कुनै पनि म्याग्निफिकेसन स्तरमा कार्यात्मक र आकर्षक रहन्छ।
 
-**आधुनिक ब्राउजर जूम क्षमताहरू:**
-- **पृष्ठ जूम**: सबै सामग्रीलाई समानुपातिक रूपमा स्केल गर्छ (पाठ, छविहरू, लेआउट) - यो प्राथमिक विधि हो
-- **केवल पाठ जूम**: मूल लेआउट कायम राख्दै फन्ट आकार बढाउँछ
-- **पिन्च-टु-जूम**: मोबाइल इशारा समर्थन अस्थायी म्याग्निफिकेसनको लागि
-- **ब्राउजर समर्थन**: सबै आधुनिक ब्राउजरहरूले 500% सम्म जूम समर्थन गर्छन् बिना कार्यक्षमता बिग्रने
+**आधुनिक ब्राउजर जुम क्षमताहरू:**
+- **पृष्ठ जुम**: सबै सामग्रीलाई समानुपातिक रूपमा स्केल गर्छ (पाठ, छविहरू, लेआउट) - यो प्राथमिक विधि हो
+- **केवल पाठ जुम**: मूल लेआउट कायम राख्दै फन्ट आकार बढाउँछ
+- **पिन्च-टु-जुम**: अस्थायी म्याग्निफिकेसनको लागि मोबाइल इशारा समर्थन
+- **ब्राउजर समर्थन**: सबै आधुनिक ब्राउजरहरूले कार्यक्षमता बिग्रन बिना 500% सम्म जुम समर्थन गर्छन्
 
 **विशेष म्याग्निफिकेसन सफ्टवेयर:**
-- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (बिल्ट-इन), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
-- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (बिल्ट-इन उन्नत सुविधाहरू सहित)
+- **विन्डोज**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (बिल्ट-इन), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
+- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (बिल्ट-इन र उन्नत सुविधाहरू सहित)
 
-> ⚠️ **डिजाइन विचार**: WCAG ले सामग्रीलाई 200% जूम गर्दा कार्यात्मक रहन आवश्यक छ। यस स्तरमा, क्षैतिज स्क्रोलिङ न्यूनतम हुनुपर्छ, र सबै अन्तरक्रियात्मक तत्वहरू पहुँचयोग्य रहनुपर्छ।
+> ⚠️ **डिजाइन विचार**: WCAG ले सामग्रीलाई 200% जुम गर्दा कार्यात्मक रहन आवश्यक छ। यस स्तरमा, क्षैतिज स्क्रोलिङ न्यूनतम हुनुपर्छ, र सबै अन्तरक्रियात्मक तत्वहरू पहुँचयोग्य रहनुपर्छ।
 
-✅ **तपाईंको उत्तरदायी डिजाइन परीक्षण गर्नुहोस्**: तपाईंको ब्राउजरलाई 200% र 400% मा जूम गर्नुहोस्। के तपाईंको लेआउट सुन्दर रूपमा अनुकूल हुन्छ? के तपाईं अझै अत्यधिक स्क्रोलिङ बिना सबै कार्यक्षमतामा पहुँच गर्न सक्नुहुन्छ?
+✅ **तपाईंको उत्तरदायी डिजाइन परीक्षण गर्नुहोस्**: तपाईंको ब्राउजरलाई 200% र 400% जुम गर्नुहोस्। के तपाईंको लेआउट सुन्दर रूपमा अनुकूल हुन्छ? के तपाईं अझै पनि अत्यधिक स्क्रोलिङ बिना सबै कार्यक्षमतामा पहुँच गर्न सक्नुहुन्छ?
 
-## आधुनिक पहुँच परीक्षण उपकरणहरू
+## आधुनिक पहुँचयोग्यता परीक्षण उपकरणहरू
 
-अब तपाईंले सहायक प्रविधिहरूको साथमा मानिसहरूले वेब कसरी नेभिगेट गर्छन् भन्ने कुरा बुझ्नुभयो, आउनुहोस् उपकरणहरू अन्वेषण गरौं जसले तपाईंलाई पहुँचयोग्य वेबसाइटहरू निर्माण गर्न र परीक्षण गर्न मद्दत गर्छ।
+अब तपाईंले सहायक प्रविधिहरूको साथ मानिसहरूले वेब कसरी नेभिगेट गर्छन् भन्ने कुरा बुझ्नुभयो, आउनुहोस् उपकरणहरू अन्वेषण गरौं जसले तपाईंलाई पहुँचयोग्य वेबसाइटहरू निर्माण गर्न र परीक्षण गर्न मद्दत गर्छ।
 
-यसलाई यसरी सोच्नुहोस्: स्वचालित उपकरणहरूले स्पष्ट समस्याहरू (जस्तै, हराएको alt पाठ) पत्ता लगाउन उत्कृष्ट छन्, जबकि हातले परीक्षणले तपाईंको साइट वास्तविक संसारमा प्रयोग गर्न राम्रो महसुस गर्छ भन्ने सुनिश्चित गर्न मद्दत गर्छ। सँगै, तिनीहरूले तपाईंलाई विश्वास दिन्छन् कि तपाईंको साइटहरू सबैका लागि काम गर्छन्।
+यसलाई यसरी सोच्नुहोस्: स्वचालित उपकरणहरूले स्पष्ट समस्याहरू (जस्तै, हराएको alt पाठ) पत्ता लगाउन उत्कृष्ट छन्, जबकि हातले परीक्षणले तपाईंको साइट वास्तविक संसारमा प्रयोग गर्न राम्रो महसुस गर्छ भन्ने सुनिश्चित गर्न मद्दत गर्छ। सँगै, तिनीहरूले तपाईंलाई तपाईंको साइटहरू सबैका लागि काम गर्छन् भन्ने विश्वास दिन्छन्।
 
-### रंग कन्ट्रास्ट परीक्षण
+### रङ कन्ट्रास्ट परीक्षण
 
-यहाँ केही राम्रो समाचार छ: रंग कन्ट्रास्ट पहुँचको सबैभन्दा सामान्य समस्या हो, तर यो समाधान गर्न सबैभन्दा सजिलो हो। राम्रो कन्ट्रास्टले सबैलाई फाइदा पुर्‍याउँछ—दृष्टि अपाङ्गता भएका व्यक्तिहरूदेखि समुद्र किनारमा आफ्नो फोन पढ्ने प्रयास गर्ने व्यक्तिहरूसम्म।
+यहाँ केही राम्रो समाचार छ: रङ कन्ट्रास्ट पहुँचयोग्यताको सबैभन्दा सामान्य समस्या हो, तर यो समाधान गर्न सबैभन्दा सजिलो पनि हो। राम्रो कन्ट्रास्टले सबैलाई फाइदा पुर्‍याउँछ—दृष्टि अपाङ्गता भएका व्यक्तिहरूदेखि समुद्र किनारमा आफ्नो फोन पढ्ने प्रयास गर्ने व्यक्तिहरूसम्म।
 
 **WCAG कन्ट्रास्ट आवश्यकताहरू:**
 
@@ -124,80 +174,136 @@ graph TD
 |-----------|-------------------|---------------------|
 | **सामान्य पाठ** (18pt भन्दा कम) | 4.5:1 कन्ट्रास्ट अनुपात | 7:1 कन्ट्रास्ट अनुपात |
 | **ठूलो पाठ** (18pt+ वा 14pt+ बोल्ड) | 3:1 कन्ट्रास्ट अनुपात | 4.5:1 कन्ट्रास्ट अनुपात |
-| **UI घटकहरू** (बटनहरू, फारम सीमा) | 3:1 कन्ट्रास्ट अनुपात | 3:1 कन्ट्रास्ट अनुपात |
+| **UI घटकहरू** (बटनहरू, फर्म सीमा) | 3:1 कन्ट्रास्ट अनुपात | 3:1 कन्ट्रास्ट अनुपात |
 
 **आवश्यक परीक्षण उपकरणहरू:**
 - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - कलर पिकर सहित डेस्कटप एप
 - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - वेब-आधारित तत्काल प्रतिक्रिया सहित
 - [Stark](https://www.getstark.co/) - Figma, Sketch, Adobe XD का लागि डिजाइन टूल प्लगइन
-- [Accessible Colors](https://accessible-colors.com/) - पहुँचयोग्य रंग प्यालेटहरू फेला पार्नुहोस्
+- [Accessible Colors](https://accessible-colors.com/) - पहुँचयोग्य रङ प्यालेटहरू फेला पार्नुहोस्
 
-✅ **रंग प्यालेटहरू राम्रो बनाउनुहोस्**: तपाईंको ब्रान्ड रंगहरूबाट सुरु गर्नुहोस् र पहुँचयोग्य भेरिएसनहरू सिर्जना गर्न कन्ट्रास्ट चेकरहरू प्रयोग गर्नुहोस्। यीलाई तपाईंको डिजाइन प्रणालीको पहुँचयोग्य रंग टोकनको रूपमा दस्तावेज गर्नुहोस्।
+✅ **रङ प्यालेटहरू राम्रो बनाउनुहोस्**: तपाईंको ब्रान्ड रङहरूबाट सुरु गर्नुहोस् र पहुँचयोग्य भेरिएसनहरू सिर्जना गर्न कन्ट्रास्ट चेकरहरू प्रयोग गर्नुहोस्। यीलाई तपाईंको डिजाइन प्रणालीको पहुँचयोग्य रङ टोकनको रूपमा दस्तावेज गर्नुहोस्।
 
-### व्यापक पहुँच अडिट
+### व्यापक पहुँचयोग्यता अडिट
 
-सबैभन्दा प्रभावकारी पहुँच परीक्षणले धेरै दृष्टिकोणहरू संयोजन गर्छ। कुनै एकल उपकरणले सबै कुरा पत्ता लगाउँदैन, त्यसैले विभिन्न विधिहरूको साथ परीक्षण दिनचर्या निर्माण गर्दा व्यापक कवरेज सुनिश्चित हुन्छ।
+सबैभन्दा प्रभावकारी पहुँचयोग्यता परीक्षणले धेरै दृष्टिकोणहरूलाई संयोजन गर्छ। कुनै एकल उपकरणले सबै कुरा पत्ता लगाउँदैन, त्यसैले विभिन्न विधिहरूको साथ परीक्षण दिनचर्या निर्माण गर्दा व्यापक कवरेज सुनिश्चित हुन्छ।
 
 **ब्राउजर-आधारित परीक्षण (DevTools मा निर्मित):**
-- **Chrome/Edge**: Lighthouse पहुँच अडिट + पहुँच प्यानल
-- **Firefox**: पहुँच निरीक्षक विस्तृत ट्री दृश्य सहित
-- **Safari**: वेब निरीक्षकको अडिट ट्याब VoiceOver सिमुलेशन सहित
+- **क्रोम/एज**: लाइटहाउस पहुँचयोग्यता अडिट + पहुँचयोग्यता प्यानल
+- **फायरफक्स**: विस्तृत ट्री भ्यू सहित पहुँचयोग्यता निरीक्षक
+- **सफारी**: वेब निरीक्षकमा अडिट ट्याब VoiceOver सिमुलेशन सहित
 
 **व्यावसायिक परीक्षण एक्सटेन्सनहरू:**
 - [axe DevTools](https://www.deque.com/axe/devtools/) - उद्योग-मानक स्वचालित परीक्षण
-- [WAVE](https://wave.webaim.org/extension/) - त्रुटि हाइलाइटिङ सहित दृश्य प्रतिक्रिया
-- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft को व्यापक परीक्षण सूट
+- [WAVE](https://wave.webaim.org/extension/) - त्रुटि हाइलाइटिङको साथ दृश्य प्रतिक्रिया
+- [Accessibility Insights](https://accessibilityinsights.io/) - माइक्रोसफ्टको व्यापक परीक्षण सूट
 
 **कमाण्ड-लाइन र CI/CD एकीकरण:**
-- [axe-core](https://github.com/dequelabs/axe-core) - स्वचालित परीक्षणका लागि JavaScript लाइब्रेरी
-- [Pa11y](https://pa11y.org/) - कमाण्ड-लाइन पहुँच परीक्षण उपकरण
-- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - स्वचालित पहुँच स्कोरिङ
+- [axe-core](https://github.com/dequelabs/axe-core) - स्वचालित परीक्षणको लागि जाभास्क्रिप्ट लाइब्रेरी
+- [Pa11y](https://pa11y.org/) - कमाण्ड-लाइन पहुँचयोग्यता परीक्षण उपकरण
+- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - स्वचालित पहुँचयोग्यता स्कोरिङ
 
-> 🎯 **परीक्षण लक्ष्य**: 95+ को Lighthouse पहुँच स्कोरलाई तपाईंको आधार रेखाको रूपमा लक्ष्य राख्नुहोस्। सम्झनुहोस्, स्वचालित उपकरणहरूले केवल 30-40% पहुँच समस्याहरू पत्ता लगाउँछन्—म्यानुअल परीक्षण अझै आवश्यक छ!
+> 🎯 **परीक्षण लक्ष्य**: लाइटहाउस पहुँचयोग्यता स्कोर 95+ लाई तपाईंको आधाररेखा बनाउने लक्ष्य राख्नुहोस्। याद गर्नुहोस्, स्वचालित उपकरणहरूले केवल 30-40% पहुँचयोग्यता समस्याहरू पत्ता लगाउँछन्—म्यानुअल परीक्षण अझै आवश्यक छ!
 
-## सुरुबाट पहुँच निर्माण गर्दै
+### 🧠 **परीक्षण सीप जाँच: समस्या पत्ता लगाउन तयार?**
 
-पहुंचको सफलताको कुञ्जी भनेको यसलाई पहिलो दिनदेखि नै तपाईंको आधारमा निर्माण गर्नु हो। मलाई थाहा छ "म पछि पहुँच थप्छु" भन्ने सोच्न लोभलाग्दो छ, तर यो घर बनाइसकेपछि र्याम्प थप्न खोज्न जस्तै हो। सम्भव? हो। सजिलो? खासै होइन।
+**आउनुहोस् हेर्नुहोस् कि तपाईं पहुँचयोग्यता परीक्षणको बारेमा कस्तो महसुस गर्दै हुनुहुन्छ:**
+- कुन परीक्षण विधि अहिले तपाईंलाई सबैभन्दा सहज लाग्छ?
+- के तपाईं एक दिनभरि केवल किबोर्ड नेभिगेसन प्रयोग गर्ने कल्पना गर्न सक्नुहुन्छ?
+- अनलाइन तपाईंले व्यक्तिगत रूपमा अनुभव गरेको एक पहुँचयोग्यता बाधा के हो?
 
-पहुंचलाई घर योजना बनाउने जस्तै सोच्नुहोस्—तपाईंको प्रारम्भिक वास्तुकला योजनामा व्हीलचेयर पहुँच समावेश गर्नु धेरै सजिलो छ, पछि सबै कुरा पुनः निर्माण गर्नुभन्दा।
+```mermaid
+pie title "Accessibility Issues Caught by Different Methods"
+    "Automated Tools" : 35
+    "Manual Testing" : 40
+    "User Feedback" : 25
+```
 
-### POUR सिद्धान्तहरू: तपाईंको पहुँचको आधार
+> **आत्मविश्वास बढाउने कुरा**: व्यावसायिक पहुँचयोग्यता परीक्षकहरूले यस्तै विधिहरूको संयोजन प्रयोग गर्छन्। तपाईं उद्योग-मानक अभ्यासहरू सिक्दै हुनुहुन्छ!
 
-वेब सामग्री पहुँच दिशानिर्देशहरू (WCAG) चार मौलिक सिद्धान्तहरू वरिपरि निर्माण गरिएको छ जसले POUR बनाउँछ। चिन्ता नगर्नुहोस्—यी कुनै गम्भीर शैक्षिक अवधारणाहरू होइनन्! तिनीहरू वास्तवमा सबैका लागि काम गर्ने सामग्री बनाउने व्यावहारिक दिशानिर्देशहरू हुन्।
+## सुरुबाट पहुँचयोग्यता निर्माण गर्दै
 
-एकपटक तपाईंले POUR को समझ पाउनुभयो भने, पहुँच निर्णयहरू लिनु धेरै सहज हुन्छ। यो तपाईंको डिजाइन विकल्पहरू मार्गदर्शन गर्ने मानसिक चेकलिस्ट भएको जस्तै हो। यसलाई तोडौं:
+पहिलो दिनदेखि नै पहुँचयोग्यता सफलताको कुञ्जी हो। मलाई थाहा छ "म पछि पहुँचयोग्यता थप्छु" भन्ने सोच्न लोभलाग्दो छ, तर यो घर बनाइसकेपछि र्याम्प थप्न खोज्न जस्तै हो। सम्भव? हो। सजिलो? खासै होइन।
 
-**🔍 देखिने (Perceivable)**: जानकारी प्रयोगकर्ताहरूले आफ्नो उपलब्ध इन्द्रियहरू मार्फत बुझ्न सक्ने तरिकामा प्रस्तुत गर्नुपर्छ
+पहुँचयोग्यतालाई घर योजना जस्तै सोच्नुहोस्—पहिलो वास्तुकला योजनामा व्हीलचेयर पहुँच समावेश गर्नु धेरै सजिलो हुन्छ, पछि सबै कुरा पुनःनिर्माण गर्नुभन्दा।
 
-- गैर-पाठ सामग्रीको लागि पाठ विकल्पहरू प्रदान गर्नुहोस् (छविहरू, भिडियोहरू, अडियो)
-- सबै पाठ र UI घटकहरूको लागि पर्याप्त रंग कन्ट्रास्ट सुनिश्चित गर्नुहोस्
-- मल्टिमिडिया सामग्रीको लागि क्याप्सन र ट्रान्सक्रिप्टहरू प्रस्ताव गर्नुहोस्
-- सामग्रीलाई 200% सम्म पुनः आकार दिँदा कार्यात्मक रहन डिजाइन गर्नुहोस्
-- जानकारी व्यक्त गर्न (केवल रंग मात्र होइन) बहु-संवेदी विशेषताहरू प्रयोग गर्नुहोस्
+### POUR सिद्धान्तहरू: तपाईंको पहुँचयोग्यता आधार
 
-**🎮 सञ्चालन योग्य (Operable)**: सबै इन्टरफेस घटकहरू उपलब्ध इनपुट विधिहरू मार्फत सञ्चालन योग्य हुनुपर्छ
+वेब सामग्री पहुँचयोग्यता दिशानिर्देशहरू (WCAG) चार मौलिक सिद्धान्तहरूमा आधारित छन् जसले POUR बनाउँछन्। चिन्ता नगर्नुहोस्—यी शैक्षिक अवधारणाहरू होइनन्! तिनीहरू वास्तवमा सबैका लागि काम गर्ने सामग्री बनाउने व्यावहारिक दिशानिर्देशहरू हुन्।
 
-- सबै कार्यक्षमता किबोर्ड नेभिगेसन मार्फत पहुँचयोग्य बनाउनुहोस्
-- प्रयोगकर्ताहरूलाई सामग्री पढ्न र अन्तर्क्रिया गर्न पर्याप्त समय प्रदान गर्नुहोस्
-- ज्वरो वा भर्टिगो विकारहरू निम्त्याउने सामग्रीबाट बच्नुहोस्
-- स्पष्ट संरचना र ल्यान्डमार्कहरूसँग प्रयोगकर्ताहरूलाई प्रभावकारी रूपमा नेभिगेट गर्न मद्दत गर्नुहोस्
-- अन्तरक्रियात्मक तत्वहरूमा पर्याप्त लक्ष्य आकारहरू सुनिश्चित गर्नुहोस् (44px न्यूनतम)
+एकपटक तपाईंले POUR को अभ्यास गर्नुभयो भने, पहुँचयोग्यता निर्णयहरू लिन धेरै सहज हुन्छ। यो तपाईंको डिजाइन विकल्पहरू मार्गदर्शन गर्ने मानसिक चेकलिस्ट जस्तै हो। यसलाई टुक्रा टुक्रामा बुझौं:
 
-**📖 बुझ्न योग्य (Understandable)**: जानकारी र UI सञ्चालन स्पष्ट र बुझ्न योग्य हुनुपर्छ
+```mermaid
+flowchart LR
+    A[🔍 PERCEIVABLE<br/>Can users sense it?] --> B[🎮 OPERABLE<br/>Can users use it?]
+    B --> C[📖 UNDERSTANDABLE<br/>Can users get it?]
+    C --> D[💪 ROBUST<br/>Does it work everywhere?]
+    
+    A1[Alt text<br/>Captions<br/>Contrast] --> A
+    B1[Keyboard access<br/>No seizures<br/>Time limits] --> B
+    C1[Clear language<br/>Predictable<br/>Error help] --> C
+    D1[Valid code<br/>Compatible<br/>Future-proof] --> D
+    
+    style A fill:#e1f5fe
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
+
+**🔍 बुझ्न सकिने**: जानकारी प्रयोगकर्ताहरूले आफ्नो उपलब्ध इन्द्रियहरू मार्फत बुझ्न सक्ने तरिकामा प्रस्तुत गर्नुपर्छ
+
+- गैर-पाठ सामग्री (छविहरू, भिडियोहरू, अडियो) का लागि पाठ विकल्पहरू प्रदान गर्नुहोस्
+- सबै पाठ र UI घटकहरूको लागि पर्याप्त रङ कन्ट्रास्ट सुनिश्चित गर्नुहोस्
+- मल्टिमिडिया सामग्रीका लागि क्याप्सन र ट्रान्सक्रिप्टहरू प्रस्ताव गर्नुहोस्
+- सामग्रीलाई 200% सम्म पुनःआकार
+- **विभिन्न ब्राउजर, उपकरण, र सहायक उपकरणहरूमा परीक्षण गर्नुहोस्**
+- **सामग्रीलाई यसरी संरचना गर्नुहोस् कि उन्नत सुविधाहरू समर्थित नभएको अवस्थामा पनि राम्रोसँग काम गरोस्**
 
-- तपाईंको दर्शकका लागि उपयुक्त स्पष्ट, सरल भाषा प्रयोग गर्नुहोस्
-- सामग्रीले पूर्वानुमान योग्य, सुसंगत तरिकामा देखा पर्नुपर्छ र सञ्चालन गर्नुपर्छ
-- प्रयोगकर्ता इनपुटका लागि स्पष्ट निर्देशनहरू र त्रुटि सन्देशहरू
-रङ्ग सञ्चारको लागि शक्तिशाली हुन्छ, तर यो कहिल्यै मात्र महत्त्वपूर्ण जानकारी व्यक्त गर्ने माध्यम हुनु हुँदैन। रङ्गको सीमाभन्दा बाहिर डिजाइन गर्दा धेरै बलियो, समावेशी अनुभवहरू सिर्जना हुन्छन् जसले धेरै परिस्थितिहरूमा काम गर्छ।
+### 🎯 **POUR सिद्धान्तहरूको जाँच: यसलाई प्रभावकारी बनाउने**
+
+**आधारभूत कुराहरूको छिटो समीक्षा:**
+- के तपाईं कुनै वेबसाइट सुविधाको बारेमा सोच्न सक्नुहुन्छ जसले प्रत्येक POUR सिद्धान्तलाई असफल बनाउँछ?
+- कुन सिद्धान्त तपाईंलाई विकासकर्ता रूपमा सबैभन्दा प्राकृतिक लाग्छ?
+- यी सिद्धान्तहरूले अपांगता भएका प्रयोगकर्ताहरू मात्र नभई सबैका लागि डिजाइन सुधार गर्न कसरी मद्दत गर्न सक्छन्?
+
+```mermaid
+quadrantChart
+    title POUR Principles Impact Matrix
+    x-axis Low Effort --> High Effort
+    y-axis Low Impact --> High Impact
+    quadrant-1 Quick Wins
+    quadrant-2 Major Projects
+    quadrant-3 Consider Later
+    quadrant-4 Strategic Focus
+    
+    Alt Text: [0.2, 0.9]
+    Color Contrast: [0.3, 0.8]
+    Semantic HTML: [0.4, 0.9]
+    Keyboard Nav: [0.6, 0.8]
+    ARIA Complex: [0.8, 0.7]
+    Screen Reader Testing: [0.7, 0.6]
+```
 
-**रङ्ग दृष्टि भिन्नताका लागि डिजाइन गर्नुहोस्:**
+> **याद गर्नुहोस्**: उच्च प्रभाव र कम प्रयास सुधारहरूबाट सुरु गर्नुहोस्। सेम्यान्टिक HTML र alt टेक्स्टले न्यूनतम प्रयासमा सबैभन्दा ठूलो पहुँचयोग्यता सुधार दिन्छ!
 
-लगभग ८% पुरुष र ०.५% महिलाहरूमा रङ्ग दृष्टि भिन्नता (प्रायः "रङ्ग अन्धोपन" भनिन्छ) हुन्छ। सबैभन्दा सामान्य प्रकारहरू हुन्:
-- **Deuteranopia**: रातो र हरियो छुट्याउन कठिनाइ
-- **Protanopia**: रातो झनै धमिलो देखिन्छ
-- **Tritanopia**: नीलो र पहेलो छुट्याउन कठिनाइ (दुर्लभ)
+## पहुँचयोग्य दृश्य डिजाइन सिर्जना गर्दै
 
-**समावेशी रङ्ग रणनीतिहरू:**
+राम्रो दृश्य डिजाइन र पहुँचयोग्यता हातमा हात मिलाएर जान्छ। जब तपाईं पहुँचयोग्यताको ध्यानमा राखेर डिजाइन गर्नुहुन्छ, तपाईंले प्रायः पत्ता लगाउनुहुन्छ कि यी सीमाहरूले सफा, अधिक आकर्षक समाधानहरू सिर्जना गर्छन् जसले सबै प्रयोगकर्ताहरूलाई फाइदा पुर्‍याउँछ।
+
+आउनुहोस्, सबैका लागि काम गर्ने दृश्यात्मक रूपमा आकर्षक डिजाइनहरू कसरी सिर्जना गर्ने भनेर अन्वेषण गरौं, चाहे तिनीहरूको दृश्य क्षमता वा सामग्री हेर्ने सर्तहरू जस्तोसुकै किन नहोस्।
+
+### रंग र दृश्य पहुँचयोग्यता रणनीतिहरू
+
+रंग सञ्चारको लागि शक्तिशाली हो, तर यो कहिल्यै महत्वपूर्ण जानकारी व्यक्त गर्ने एकमात्र तरिका हुनु हुँदैन। रंगको सीमाभन्दा बाहिर डिजाइन गर्दा अधिक बलियो, समावेशी अनुभवहरू सिर्जना हुन्छन् जसले धेरै परिस्थितिहरूमा काम गर्छ।
+
+**रंग दृष्टि भिन्नताहरूको लागि डिजाइन गर्नुहोस्:**
+
+लगभग ८% पुरुष र ०.५% महिलाहरूमा केही प्रकारको रंग दृष्टि भिन्नता (प्रायः "रंग अन्धोपन" भनिन्छ) हुन्छ। सबैभन्दा सामान्य प्रकारहरू हुन्:
+- **Deuteranopia**: रातो र हरियो छुट्याउन गाह्रो
+- **Protanopia**: रातो अधिक धुमिल देखिन्छ
+- **Tritanopia**: नीलो र पहेंलो छुट्याउन गाह्रो (दुर्लभ)
+
+**समावेशी रंग रणनीतिहरू:**
 
 ```css
 /* ❌ Bad: Using only color to indicate status */
@@ -224,17 +330,17 @@ graph TD
 }
 ```
 
-**मूलभूत कन्ट्रास्ट आवश्यकताहरूभन्दा बाहिर:**
-- रङ्ग छनोटलाई रङ्ग अन्धोपन सिमुलेटरहरूसँग परीक्षण गर्नुहोस्
-- रङ्ग कोडिङसँगै ढाँचाहरू, बनावटहरू, वा आकारहरू प्रयोग गर्नुहोस्
-- अन्तरक्रियात्मक अवस्थाहरू रङ्ग बिना छुट्याउन योग्य बनाउनुहोस्
+**मूलभूत कन्ट्रास्ट आवश्यकताहरूभन्दा पर:**
+- रंग अन्धोपन सिमुलेटरहरूसँग तपाईंको रंग छनोट परीक्षण गर्नुहोस्
+- रंग कोडिङसँगै ढाँचाहरू, बनावटहरू, वा आकारहरू प्रयोग गर्नुहोस्
+- अन्तरक्रियात्मक अवस्थाहरू रंग बिना पनि छुट्याउन सकिने सुनिश्चित गर्नुहोस्
 - उच्च कन्ट्रास्ट मोडमा तपाईंको डिजाइन कस्तो देखिन्छ विचार गर्नुहोस्
 
-✅ **तपाईंको रङ्ग पहुँचयोग्यता परीक्षण गर्नुहोस्**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) जस्ता उपकरणहरू प्रयोग गरेर विभिन्न प्रकारका रङ्ग दृष्टि भएका प्रयोगकर्ताहरूको लागि तपाईंको साइट कस्तो देखिन्छ हेर्नुहोस्।
+✅ **तपाईंको रंग पहुँचयोग्यता परीक्षण गर्नुहोस्**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) जस्ता उपकरणहरू प्रयोग गरेर तपाईंको साइट विभिन्न प्रकारका रंग दृष्टि भएका प्रयोगकर्ताहरूलाई कस्तो देखिन्छ हेर्नुहोस्।
 
 ### फोकस संकेतकहरू र अन्तरक्रिया डिजाइन
 
-फोकस संकेतकहरू डिजिटल कर्सरको बराबर हुन्—तिनीहरूले किबोर्ड प्रयोगकर्ताहरूलाई पृष्ठमा कहाँ छन् भनेर देखाउँछन्। राम्रोसँग डिजाइन गरिएका फोकस संकेतकहरूले सबैका लागि अनुभवलाई स्पष्ट र अनुमान योग्य बनाउँछन्।
+फोकस संकेतकहरू डिजिटल कर्सरको बराबर हुन्—तिनीहरूले किबोर्ड प्रयोगकर्ताहरूलाई पृष्ठमा कहाँ छन् भनेर देखाउँछन्। राम्रोसँग डिजाइन गरिएका फोकस संकेतकहरूले सबैका लागि अन्तरक्रियाहरू स्पष्ट र अनुमान योग्य बनाउँछन्।
 
 **आधुनिक फोकस संकेतकका उत्कृष्ट अभ्यासहरू:**
 
@@ -268,20 +374,42 @@ button:focus:not(:focus-visible) {
 **फोकस संकेतक आवश्यकताहरू:**
 - **दृश्यता**: वरपरका तत्वहरूसँग कम्तिमा ३:१ कन्ट्रास्ट अनुपात हुनुपर्छ
 - **चौडाइ**: सम्पूर्ण तत्व वरिपरि न्यूनतम २px मोटाई
-- **स्थायित्व**: फोकस अन्यत्र सर्दासम्म दृश्यमान रहनुपर्छ
+- **स्थिरता**: फोकस अन्यत्र सर्दासम्म दृश्य रहनुपर्छ
 - **भिन्नता**: अन्य UI अवस्थाहरूबाट दृश्य रूपमा फरक हुनुपर्छ
 
-> 💡 **डिजाइन सुझाव**: उत्कृष्ट फोकस संकेतकहरूले अक्सर दृश्यता सुनिश्चित गर्न outline, box-shadow, र रङ्ग परिवर्तनको संयोजन प्रयोग गर्छन्।
+> 💡 **डिजाइन सुझाव**: उत्कृष्ट फोकस संकेतकहरूले दृश्यता सुनिश्चित गर्न outline, box-shadow, र रंग परिवर्तनको संयोजन प्रयोग गर्छन्।
+
+✅ **तपाईंको फोकस संकेतकहरूको अडिट गर्नुहोस्**: तपाईंको वेबसाइटमा ट्याब मार्फत जानुहोस् र कुन तत्वहरूमा स्पष्ट फोकस संकेतकहरू छन् नोट गर्नुहोस्। के कुनै देख्न गाह्रो छ वा पूर्ण रूपमा हराइरहेको छ?
 
-✅ **फोकस संकेतकहरूको अडिट गर्नुहोस्**: तपाईंको वेबसाइटमा ट्याब गरेर हेर्नुहोस् र कुन तत्वहरूमा स्पष्ट फोकस संकेतक छन् नोट गर्नुहोस्। के कुनै देख्न गाह्रो छ वा पूर्ण रूपमा हराइरहेको छ?
+### सेम्यान्टिक HTML: पहुँचयोग्यताको आधार
 
-### Semantic HTML: पहुँचयोग्यताको आधार
+सेम्यान्टिक HTML भनेको सहायक प्रविधिहरूलाई तपाईंको वेबसाइटको लागि GPS प्रणाली दिनु जस्तै हो। जब तपाईं HTML तत्वहरूलाई तिनीहरूको उद्देश्यका लागि सही रूपमा प्रयोग गर्नुहुन्छ, तपाईं स्क्रिन रिडरहरू, किबोर्डहरू, र अन्य उपकरणहरूलाई प्रभावकारी रूपमा नेभिगेट गर्न मद्दत गर्न विस्तृत रोडम्याप प्रदान गर्दै हुनुहुन्छ।
 
-Semantic HTML भनेको तपाईंको वेबसाइटको लागि सहायक प्रविधिहरूलाई GPS प्रणाली दिनु जस्तै हो। जब तपाईं HTML तत्वहरूलाई तिनीहरूको उद्देश्यका लागि सही रूपमा प्रयोग गर्नुहुन्छ, तपाईं स्क्रिन रिडरहरू, किबोर्डहरू, र अन्य उपकरणहरूलाई प्रयोगकर्ताहरूलाई प्रभावकारी रूपमा नेभिगेट गर्न मद्दत गर्न विस्तृत रोडम्याप प्रदान गर्दै हुनुहुन्छ।
+मलाई लाग्छ सेम्यान्टिक HTML भनेको राम्रोसँग व्यवस्थित पुस्तकालय र स्पष्ट श्रेणीहरू र सहायक संकेतहरू भएको गोदामको बीचको भिन्नता हो। दुवै ठाउँमा समान पुस्तकहरू छन्, तर कुन ठाउँमा तपाईंले केही खोज्न चाहनुहुन्छ? ठीक छ!
 
-यहाँ एउटा उपमा छ जसले मलाई साँच्चै बुझायो: Semantic HTML भनेको स्पष्ट श्रेणीहरू र उपयोगी संकेतहरू भएको राम्रोसँग व्यवस्थित पुस्तकालय र पुस्तकहरू अनियमित रूपमा छरिएका गोदामको बीचको फरक हो। दुवै ठाउँमा समान पुस्तकहरू छन्, तर तपाईं कुन ठाउँमा केही खोज्न चाहनुहुन्छ? ठीक छ!
+```mermaid
+flowchart TD
+    A[🏠 HTML Document] --> B[📰 header]
+    A --> C[🧭 nav]
+    A --> D[📄 main]
+    A --> E[📋 footer]
+    
+    B --> B1[h1: Site Name<br/>Logo & branding]
+    C --> C1[ul: Navigation<br/>Primary links]
+    D --> D1[article: Content<br/>section: Subsections]
+    D --> D2[aside: Sidebar<br/>Related content]
+    E --> E1[nav: Footer links<br/>Copyright info]
+    
+    D1 --> D1a[h1: Page title<br/>h2: Major sections<br/>h3: Subsections]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-**पृष्ठ संरचनाको पहुँचयोग्य निर्माण ब्लकहरू:**
+**पहुँचयोग्य पृष्ठ संरचनाको निर्माण ब्लकहरू:**
 
 ```html
 <!-- Landmark elements provide page navigation structure -->
@@ -336,36 +464,63 @@ Semantic HTML भनेको तपाईंको वेबसाइटको
 </footer>
 ```
 
-**किन Semantic HTML पहुँचयोग्यतालाई रूपान्तरण गर्छ:**
+**किन सेम्यान्टिक HTML पहुँचयोग्यता परिवर्तन गर्छ:**
 
-| Semantic Element | उद्देश्य | स्क्रिन रिडर लाभ |
+| सेम्यान्टिक तत्व | उद्देश्य | स्क्रिन रिडर लाभ |
 |------------------|---------|----------------------|
-| `<header>` | पृष्ठ वा खण्डको हेडर | "Banner landmark" - शीर्षमा छिटो नेभिगेसन |
-| `<nav>` | नेभिगेसन लिंकहरू | "Navigation landmark" - नेभ खण्डहरूको सूची |
-| `<main>` | प्राथमिक पृष्ठ सामग्री | "Main landmark" - सामग्रीमा सिधै जानुहोस् |
+| `<header>` | पृष्ठ वा खण्ड शीर्षक | "ब्यानर ल्यान्डमार्क" - शीर्षमा छिटो नेभिगेसन |
+| `<nav>` | नेभिगेसन लिंकहरू | "नेभिगेसन ल्यान्डमार्क" - नेभ खण्डहरूको सूची |
+| `<main>` | प्राथमिक पृष्ठ सामग्री | "मुख्य ल्यान्डमार्क" - सामग्रीमा सिधै जानुहोस् |
 | `<article>` | आत्म-समावेश सामग्री | लेखको सीमा घोषणा गर्छ |
 | `<section>` | विषयवस्तु समूहहरू | सामग्री संरचना प्रदान गर्छ |
-| `<aside>` | सम्बन्धित साइडबार सामग्री | "Complementary landmark" |
-| `<footer>` | पृष्ठ वा खण्डको फूटर | "Contentinfo landmark" |
+| `<aside>` | सम्बन्धित साइडबार सामग्री | "पूरक ल्यान्डमार्क" |
+| `<footer>` | पृष्ठ वा खण्डको अन्त्य | "सामग्री जानकारी ल्यान्डमार्क" |
+
+**स्क्रिन रिडरको सुपरपावरहरू सेम्यान्टिक HTMLसँग:**
+- **ल्यान्डमार्क नेभिगेसन**: प्रमुख पृष्ठ खण्डहरू बीच तुरुन्तै जम्प गर्नुहोस्
+- **हेडिङ रूपरेखा**: तपाईंको हेडिङ संरचनाबाट सामग्रीको तालिका उत्पन्न गर्नुहोस्
+- **तत्व सूचीहरू**: सबै लिंक, बटन, वा फारम नियन्त्रणहरूको सूची सिर्जना गर्नुहोस्
+- **सन्दर्भ जागरूकता**: सामग्री खण्डहरू बीचको सम्बन्ध बुझ्नुहोस्
+
+> 🎯 **छिटो परीक्षण**: तपाईंको साइटमा स्क्रिन रिडरको साथ ल्यान्डमार्क सर्टकटहरू (NVDA/JAWS मा D ल्यान्डमार्कका लागि, H हेडिङका लागि, K लिंकका लागि) प्रयोग गरेर नेभिगेट गर्न प्रयास गर्नुहोस्। के नेभिगेसनले तपाईंको सामग्रीको अर्थ बनाउँछ?
+
+### 🏗️ **सेम्यान्टिक HTML मास्टरी जाँच: बलियो आधार निर्माण गर्दै**
 
-**स्क्रिन रिडरको सुपरपावरहरू Semantic HTMLसँग:**
-- **Landmark नेभिगेसन**: प्रमुख पृष्ठ खण्डहरू बीच तुरुन्तै जम्प गर्नुहोस्
-- **Heading outlines**: तपाईंको हेडिंग संरचनाबाट सामग्रीको तालिका उत्पन्न गर्नुहोस्
-- **Element lists**: सबै लिंकहरू, बटनहरू, वा फारम नियन्त्रणहरूको सूची सिर्जना गर्नुहोस्
-- **Context awareness**: सामग्री खण्डहरू बीचको सम्बन्ध बुझ्नुहोस्
+**आउनुहोस्, तपाईंको सेम्यान्टिक बुझाइको मूल्यांकन गरौं:**
+- के तपाईं HTML हेरेर मात्र पृष्ठका ल्यान्डमार्कहरू पहिचान गर्न सक्नुहुन्छ?
+- तपाईं कसरी आफ्नो साथीलाई `<section>` र `<div>` बीचको भिन्नता व्याख्या गर्नुहुन्छ?
+- यदि स्क्रिन रिडर प्रयोगकर्ताले नेभिगेसन समस्याहरू रिपोर्ट गरे भने तपाईंले पहिलो कुरा के जाँच गर्नुहुन्छ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> UnsementicHTML: div soup
+    UnsementicHTML --> SemanticHTML: Add landmarks
+    SemanticHTML --> AccessibleHTML: Test with AT
+    AccessibleHTML --> [*]: User success!
+    
+    note right of UnsementicHTML
+        Screen readers lost
+        Keyboard nav broken
+    end note
+    
+    note right of AccessibleHTML
+        Clear navigation
+        Efficient browsing
+    end note
+```
 
-> 🎯 **छिटो परीक्षण**: NVDA/JAWS मा landmark shortcuts (D for landmark, H for heading, K for link) प्रयोग गरेर तपाईंको साइट नेभिगेट गर्न प्रयास गर्नुहोस्। के नेभिगेसनले अर्थ राख्छ?
+> **प्रो सुझाव**: राम्रो सेम्यान्टिक HTMLले स्वचालित रूपमा लगभग ७०% पहुँचयोग्यता समस्याहरू समाधान गर्छ। यो आधार मास्टर गर्नुहोस् र तपाईं राम्रो बाटोमा हुनुहुन्छ!
 
-✅ **तपाईंको Semantic संरचनाको अडिट गर्नुहोस्**: तपाईंको ब्राउजरको DevTools मा Accessibility प्यानल प्रयोग गरेर पहुँचयोग्यता ट्री हेर्नुहोस् र तपाईंको मार्कअपले तार्किक संरचना सिर्जना गरेको सुनिश्चित गर्नुहोस्।
+✅ **तपाईंको सेम्यान्टिक संरचनाको अडिट गर्नुहोस्**: तपाईंको ब्राउजरको DevTools मा पहुँचयोग्यता प्यानल प्रयोग गरेर पहुँचयोग्यता रूख हेर्नुहोस् र तपाईंको मार्कअपले तार्किक संरचना सिर्जना गरेको सुनिश्चित गर्नुहोस्।
 
-### हेडिंग पदानुक्रम: तार्किक सामग्री रूपरेखा सिर्जना गर्नु
+### हेडिङ पदानुक्रम: तार्किक सामग्री रूपरेखा सिर्जना गर्दै
 
-हेडिंगहरू पहुँचयोग्य सामग्रीको लागि अत्यन्त महत्त्वपूर्ण छन्—तिनीहरू सबै कुरालाई सँगै राख्ने मेरुदण्ड जस्तै हुन्। स्क्रिन रिडर प्रयोगकर्ताहरूले तपाईंको सामग्री बुझ्न र नेभिगेट गर्न हेडिंगहरूमा धेरै निर्भर गर्छन्। यसलाई तपाईंको पृष्ठको लागि सामग्रीको तालिका प्रदान गर्नु जस्तै सोच्नुहोस्।
+हेडिङहरू पहुँचयोग्य सामग्रीको लागि अत्यन्त महत्त्वपूर्ण छन्—यी सबैलाई सँगै राख्ने मेरुदण्ड जस्तै हुन्। स्क्रिन रिडर प्रयोगकर्ताहरूले तपाईंको सामग्री बुझ्न र नेभिगेट गर्न हेडिङहरूमा धेरै निर्भर गर्छन्। यो स्कूलमा outline बनाउने जस्तै हो—तपाईं "I. मुख्य बिन्दु" बाट सिधै "C. उप-बिन्दु" मा नजाने, हैन?
 
-**हेडिंगहरूको सुनौलो नियम यहाँ छ:**
-कहिल्यै स्तरहरू नछोड्नुहोस्। सधैं तार्किक रूपमा `<h1>` बाट `<h2>` र `<h3>` मा प्रगति गर्नुहोस्। विद्यालयमा रूपरेखा बनाउने सम्झनुहुन्छ? यो बिल्कुल त्यही सिद्धान्त हो—तपाईं "I. मुख्य बिन्दु" बाट सिधै "C. उप-उप-बिन्दु" मा "A. उप-बिन्दु" बिना जानुहुन्न, हैन?
+**हेडिङको सुनौलो नियम यहाँ छ:**
+कहिल्यै स्तरहरू नछोड्नुहोस्। सधैं तार्किक रूपमा `<h1>` बाट `<h2>` र त्यसपछि `<h3>` मा प्रगति गर्नुहोस्। 
 
-**सिद्ध हेडिंग संरचना उदाहरण:**
+**सिद्ध हेडिङ संरचना उदाहरण:**
 
 ```html
 <!-- ✅ Excellent: Logical, hierarchical progression -->
@@ -404,21 +559,375 @@ Semantic HTML भनेको तपाईंको वेबसाइटको
 <h1>Another main heading?</h1> <!-- Multiple h1s -->
 ```
 
-**हेडिंग उत्कृष्ट अभ्यासहरू:**
-- **प्रति पृष्ठ एक `<h1>`**: सामान्यतया तपाईंको मुख्य पृष्ठ शीर्षक वा प्राथमिक सामग्री हेडिंग
+**हेडिङका उत्कृष्ट अभ्यासहरू:**
+- **प्रत्येक पृष्ठमा एक `<h1>`**: सामान्यतया तपाईंको मुख्य पृष्ठ शीर्षक वा प्राथमिक सामग्री शीर्षक
 - **तार्किक प्रगति**: स्तरहरू कहिल्यै नछोड्नुहोस् (h1 → h2 → h3, h1 → h3 होइन)
-- **वर्णनात्मक सामग्री**: हेडिंगहरूलाई सन्दर्भ बाहिर पढ्दा अर्थपूर्ण बनाउनुहोस्
-- **CSS प्रयोग गरेर दृश्य शैली**: उपस्थिति को लागी CSS प्रयोग गर्नुहोस्, संरचनाको लागि HTML स्तरहरू
+- **वर्णनात्मक सामग्री**: हेडिङहरूलाई सन्दर्भ बाहिर पढ्दा पनि अर्थपूर्ण बनाउनुहोस्
+- **CSSसँग दृश्य शैलीकरण**: उपस्थिति को लागी CSS प्रयोग गर्नुहोस्, संरचनाको लागि HTML स्तरहरू
 
 **स्क्रिन रिडर नेभिगेसन तथ्याङ्क:**
-- ६८% स्क्रिन रिडर प्रयोगकर्ताहरू हेडिंगहरूद्वारा नेभिगेट गर्छन् ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding))
-- प्रयोगकर्ताहरू तार्किक हेडिंग रूपरेखा खोज्ने अपेक्षा गर्छन्
-- हेडिंगहरूले पृष्ठ संरचना बुझ्नको लागि सबैभन्दा छिटो तरिका प्रदान गर्छन्
+- ६८% स्क्रिन रिडर प्रयोगकर्ताहरू हेडिङद्वारा नेभिगेट गर्छन् ([WebAIM सर्वेक्षण](https://webaim.org/projects/screenreadersurvey9/#finding))
+- प्रयोगकर्ताहरू तार्किक हेडिङ रूपरेखा पाउने अपेक्षा गर्छन्
+- हेडिङहरूले पृष्ठ संरचना बुझ्नको लागि छिटो तरिका प्रदान गर्छन्
+
+> 💡 **प्रो सुझाव**: "HeadingsMap" जस्ता ब्राउजर एक्सटेन्सनहरू प्रयोग गरेर तपाईंको हेडिङ संरचना दृश्य बनाउनुहोस्। यो राम्रोसँग व्यवस्थित सामग्रीको तालिका जस्तै पढ्नुपर्छ।
+
+✅ **तपाईंको हेडिङ संरचना परीक्षण गर्नुहोस्**: स्क्रिन रिडरको हेडिङ नेभिगेसन (NVDA मा H कुञ्जी) प्रयोग गरेर तपाईंको हेडिङहरू मार्फत जम्प गर्नुहोस्। के प्रगति तार्किक रूपमा तपाईंको सामग्रीको कथा बताउँछ?
+
+### उन्नत दृश्य पहुँचयोग्यता प्रविधिहरू
+
+कन्ट्रास्ट र रंगको आधारभूत कुराहरूभन्दा पर, परिष्कृत प्रविधिहरू छन् जसले साँच्चै समावेशी दृश्य अनुभवहरू सिर्जना गर्न मद्दत गर्छ। यी विधिहरूले तपाईंको सामग्रीलाई विभिन्न हेर्ने सर्तहरू र सहायक प्रविधिहरूमा काम गर्न सुनिश्चित गर्छ।
+
+**आवश्यक दृश्य सञ्चार रणनीतिहरू:**
+
+- **बहु-ढाँचाको प्रतिक्रिया**: दृश्य, पाठ्य, र कहिलेकाहीं अडियो संकेतहरू संयोजन गर्नुहोस्
+- **प्रगतिशील खुलासा**: जानकारीलाई पचाउन सकिने खण्डहरूमा प्रस्तुत गर्नुहोस्
+- **सुसंगत अन्तरक्रिया ढाँचाहरू**: परिचित UI परम्पराहरू प्रयोग गर्नुहोस्
+- **प्रतिक्रियात्मक टाइपोग्राफी**: उपकरणहरूमा पाठलाई उपयुक्त रूपमा स्केल गर्नुहोस्
+- **लोडिङ र त्रुटि अवस्थाहरू**: सबै प्रयोगकर्ता कार्यहरूको लागि स्पष्ट प्रतिक्रिया प्रदान गर्नुहोस्
+
+**CSS पहुँचयोग्यता सुधारका लागि उपयोगिताहरू:**
+
+```css
+/* Screen reader only text - visually hidden but accessible */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Skip link for keyboard navigation */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: #000000;
+  color: #ffffff;
+  padding: 8px 16px;
+  text-decoration: none;
+  border-radius: 4px;
+  font-weight: bold;
+  transition: top 0.3s ease;
+  z-index: 1000;
+}
+
+.skip-link:focus {
+  top: 6px;
+}
+
+/* Reduced motion respect */
+@media (prefers-reduced-motion: reduce) {
+  .skip-link {
+    transition: none;
+  }
+  
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .button {
+    border: 2px solid;
+  }
+}
+```
+
+> 🎯 **पहुँचयोग्यता ढाँचा**: "स्किप लिंक" किबोर्ड प्रयोगकर्ताहरूको लागि आवश्यक छ। यो तपाईंको पृष्ठमा पहिलो फोकसयोग्य तत्व हुनुपर्छ र मुख्य सामग्री क्षेत्रमा सिधै जम्प गर्नुपर्छ।
+
+✅ **स्किप नेभिगेसन कार्यान्वयन गर्नुहोस्**: तपाईंको पृष्ठहरूमा स्किप लिंकहरू थप्नुहोस् र पृष्ठ लोड भएपछि ट्याब थिचेर तिनीहरूलाई परीक्षण गर्नुहोस्। तिनीहरूले देखा पर्नुपर्छ र तपाईंलाई मुख्य सामग्रीमा जम्प गर्न अनुमति दिनुपर्छ।
+
+## अर्थपूर्ण लिंक टेक्स्ट तयार गर्दै
+
+लिंकहरू वेबका राजमार्गहरू हुन्, तर खराब लेखिएको लिंक टेक्स्ट भनेको "स्थान" मात्र लेखिएको सडक संकेतहरू जस्तै हो। धेरै उपयोगी छैन, हैन?
+
+### लिंक नेभिगेसन ढाँचाहरू बुझ्दै
+
+स्क्रिन रिडरहरूले राम्रोसँग लेखिएको लिंक टेक्स्टमा निर्भर गर्ने शक्तिशाली लिंक नेभिगेसन सुविधाहरू प्रदान गर्छन्:
+
+**लिंक नेभिगेसन विधिहरू:**
+- **क्रमिक पढाइ**: लिंकहरू सामग्री प्रवाहको भागको रूपमा सन्दर्भमा पढिन्छ
+- **लिंक सूची सिर्जना**: सबै पृष्ठ लिंकहरू खोजयोग्य निर्देशिकामा संकलन गरिन्छ
+- **छिटो नेभिगेसन**: किबोर्ड सर्टकटहरू प्रयोग गरेर लिंकहरू बीच जम्प गर्नुहोस् (NVDA मा K)
+- **खोज कार्यक्षमता**: आंशिक पाठ टाइप गरेर विशिष्ट लिंकहरू फेला पार्नुहोस्
+
+**किन सन्दर्भ महत्त्वपूर्ण छ:**
+जब स्क्रिन रिडर प्रयोगकर्ताहरूले लिंक सूची सिर्जना गर्छन्, तिनीहरूले यस्तो देख्छन्:
+- "रिपोर्ट डाउनलोड गर्नुहोस्"
+- "थप जान्नुहोस्"
+- "यहाँ क्लिक गर्नुहोस्"
+- "गोपनीयता नीति"
+- "यहाँ क्लिक गर्नुहोस्"
+
+यी लिंकहरू मध्ये केवल दुईले सन्दर्भ बाहिर पढ्दा उपयोगी जानकारी प्रदान गर्छन्!
+
+> 📊 **प्रयोगकर्ता प्रभाव**: स्क्रिन रिडर प्रयोगकर्ताहरूले लिंक सूची स्क्यान गरेर पृष्ठ सामग्री छिटो बुझ्न खोज्छन्। सामान्य लिंक टेक्स्टले तिनीहरूलाई प्रत्येक लिंकको सन्दर्भमा फर्केर नेभिगेट गर्न बाध्य पार्छ, जसले तिनीहरूको ब्राउजिङ अनुभवलाई धेरै ढिलो बनाउँछ।
+
+### उत्कृष्ट लिंक टेक्स्ट लेख्दै
+
+वर्णनात्मक लिंक टेक्स्टले सबैलाई फाइदा पुर्‍याउँछ—दृष्टि भएका प्रयोगकर्ताहरूले लिंकहरू छिटो स्क्यान गर्न सक्छन्, र स्क्रिन रिडर प्रयोगकर्ताहरूले गन्तव्यहरू तुरुन्तै बुझ्छन्।
+
+**✅ स्पष्ट, वर्णनात्मक लिंक टेक्स्ट उदाहरणहरू:**
+
+```html
+<!-- Descriptive text that explains the destination -->
+<p>Our comprehensive <a href="/sustainability-2024.pdf">2024 sustainability report (PDF, 2.1MB)</a> details our environmental initiatives.</p>
+
+<!-- Specific, unique link text for each card -->
+<div class="article-card">
+  <h3>Web Accessibility Guide</h3>
+  <p>Learn the fundamentals of inclusive design...</p>
+  <a href="/accessibility-guide">Read our complete web accessibility guide</a>
+</div>
+<div class="article-card">
+  <h3>Color Contrast Tips</h3>
+  <p>Improve your design with better color choices...</p>
+  <a href="/color-contrast">Explore color contrast best practices</a>
+</div>
+
+<!-- Meaningful text instead of raw URLs -->
+<p>The <a href="https://www.w3.org/WAI/WCAG21/quickref/">WCAG 2.1 Quick Reference guide</a> provides comprehensive accessibility guidelines.</p>
+
+<!-- Descriptive action links -->
+<a href="/contact">Contact our support team</a> | 
+<a href="/about">About our company</a> | 
+<a href="/help">Get help with your account</a>
+```
 
-> 💡 **प्रो सुझाव**: "HeadingsMap" जस्ता ब्राउजर एक्सटेन्सनहरू प्रयोग गरेर तपाईंको हेडिंग संरचना दृश्य बनाउनुहोस्। यसले राम्रोसँग व्यवस्थित सामग्रीको तालिका जस्तै पढ्नुपर्छ।
+**लिंक टेक्स्टका उत्कृष्ट अभ्यासहरू:**
+- **विशिष्ट हुनुहोस्**: "त्रैमासिक वित्तीय रिपोर्ट डाउनलोड गर्नुहोस्" vs. "डाउनलोड"
+- **फाइल प्रकार र आकार समावेश गर्नुहोस्**: "(PDF, 1.2MB)" डाउनलोड योग्य फाइलहरूको लागि
+- **बाह्य रूपमा खुल्छ भने उल्लेख गर्नुहोस्**: "(नयाँ विन्डोमा खुल्छ)" उपयुक्त हुँदा
+- **सक्रिय भाषा प्रयोग गर्नुहोस्**: "हामीलाई सम्पर्क गर्नुहोस्" vs. "सम्पर्क पृष्ठ"
+- **संक्षिप्त राख्नुहोस्**: सकेसम्म २-८ शब्दको लक्ष्य राख्नुहोस्
 
-✅ **तपाईंको हेडिंग संरचना परीक्षण गर्नुहोस्**: स्क्रिन रिडरको हेडिंग नेभिगेसन (NVDA मा H कुञ्जी) प्रयोग गरेर तपाईंको हेडिंगहरू मार्फत जम्प गर्नुहोस्। के प्रगति तार्किक रूपमा तपाईंको सामग्रीको कथा बताउँछ?
-5. **साधारणबाट सुरु गर्नुहोस्**: जटिल ARIA कार्यान्वयनहरूमा त्रुटि हुने सम्भावना बढी हुन्छ
+### उन्नत लिंक पहुँचयोग्यता ढाँचाहरू
+
+कहिलेकाहीं दृश्य डिजाइन सीमाहरू वा प्राविधिक आवश्यकताहरूले विशेष समाधानहरू आवश्यक पर्छ। यहाँ सामान्य चुनौतीपूर्ण परिदृश्यहरूको लागि परिष्कृत प्रविधिहरू छन्:
+
+**ARIA प्रयोग गरेर उन्नत सन्दर्भ प्रदान गर्दै:**
+
+```html
+<!-- When button text must be short but needs more context -->
+<a href="/report.pdf" 
+   aria-label="Download 2024 annual financial report, PDF format, 2.3MB">
+  Download Report
+</a>
+
+<!-- When the full context comes from surrounding content -->
+<h3 id="sustainability-heading">Sustainability Initiative</h3>
+<p>Our efforts to reduce environmental impact...</p>
+<a href="/sustainability-details" 
+   aria-labelledby="sustainability-heading"
+   aria-describedby="sustainability-summary">
+  Learn more
+</a>
+<p id="sustainability-summary">Detailed breakdown of our 2024 environmental goals and achievements</p>
+```
+
+**फाइल प्रकार र बाह्य गन्तव्यहरू संकेत गर्दै:**
+
+```html
+<!-- Method 1: Include information in visible link text -->
+<a href="/annual-report.pdf">
+  Download our 2024 annual report (PDF, 2.3MB)
+</a>
+
+<!-- Method 2: Use screen reader-only text for file details -->
+<a href="/annual-report.pdf">
+  Download our 2024 annual report
+  <span class="sr-only">(PDF format, 2.3MB)</span>
+</a>
+
+<!-- Method 3: External link indication -->
+<a href="https://example.com" 
+   target="_blank" 
+   aria-describedby="external-link-warning">
+  Visit external resource
+</a>
+<span id="external-link-warning" class="sr-only">
+  (opens in new window)
+</span>
+
+<!-- Method 4: Using CSS for visual indicators -->
+<a href="https://example.com" class="external-link">
+  External resource
+</a>
+```
+
+```css
+/* Visual indicator for external links */
+.external-link::after {
+  content: " ↗";
+  font-size: 0.8em;
+  color: #666;
+}
+
+/* Screen reader announcement for external links */
+.external-link::before {
+  content: "External link: ";
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+```
+
+> ⚠️ **महत्त्वपूर्ण**: जब `target="_blank"` प्रयोग गर्नुहुन्छ, सधैं प्रयोगकर्ताहरूलाई लिंक नयाँ विन्डो वा ट्याबमा खुल्छ भनेर जानकारी दिनुहोस्। अप्रत्याशित नेभिगेसन परिवर्तनहरू भ्रमित गर्न सक्छ।
+
+✅ **तपाईंको लिंक सन्दर्भ परीक्षण गर्नुहोस्**: तपाईंको ब्राउजरको डेभलपर उपकरणहरू प्रयोग गरेर तपाईंको पृष्ठका सबै लिंकहरूको सूची सिर्जना गर्नुहोस्। के तपाईं प्रत्येक लिंकको उद्देश्य कुनै पनि वरपरको सन्दर्भ बिना बुझ्न सक्नुहुन्छ?
+
+## ARIA: HTML पहुँचयोग्यता सुपरचार्ज गर्दै
+
+[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) भनेको तपाईंको जटिल वेब अनुप्रयोगहरू र सहायक प्रविधिहरू बीचको सार्वभौम अनुवादक जस्तै हो। जब HTML मात्रले तपाईंको अन्तरक्रियात्मक घटकहरूले गरिरहेको सबै कुरा व्यक्त गर्न सक्दैन, ARIAले ती खाली ठाउँहरू भर्न मद्दत गर्छ।
+
+मलाई लाग्छ ARIA भनेको तपाईंको HTMLमा सहायक टिप्पणीहरू थप्नु जस्तै हो—जसरी नाटकको स्क्रिप्टमा स्टेज निर्देशनहरूले कलाकारहरूलाई तिनीहरूको भूमिका र सम्बन्धहरू बुझ्न मद्दत गर्छ।
+
+**ARIAको सबैभन्दा महत्त्वपूर्ण नियम यहाँ छ**: सधैं पहिले सेम्यान्टिक HTML प्रयोग गर्नुहोस्, त्यसपछि ARIA थपेर यसलाई सुधार गर्नुहोस्। ARIAलाई मुख्य पकवान होइन, मसला जस्तै सोच्नुहोस्। यसले तपाईंको HTML संरचना स्पष्ट र सुधार गर्नुपर्छ, कहिल्यै प्रतिस्थापन गर्नु हुँदैन। पहिले त्यो आधार सही बनाउनुहोस्!
+
+### रणनीतिक ARIA कार्यान्वयन
+
+ARIA शक्तिशाली छ, तर शक्ति संग जिम्मेवारी आउँछ। गलत ARIAले पहुँचयोग्यता बिना ARIA भन्दा खराब बनाउन सक्छ। यहाँ कहिले र कसरी प्रभावकारी रूपमा प्रयोग गर्ने:
+
+**✅ ARIA प्रयोग गर्नुहोस् जब
+**ARIA का पाँच श्रेणीहरू:**
+
+1. **Roles**: यो तत्व के हो? (`button`, `tab`, `dialog`)
+2. **Properties**: यसको विशेषताहरू के हुन्? (`aria-required`, `aria-haspopup`)
+3. **States**: यसको वर्तमान अवस्था के हो? (`aria-expanded`, `aria-checked`)
+4. **Landmarks**: पृष्ठ संरचनामा यो कहाँ छ? (`banner`, `navigation`, `main`)
+5. **Live regions**: परिवर्तनहरू कसरी घोषणा गरिनु पर्छ? (`aria-live`, `aria-atomic`)
+
+### आधुनिक वेब एप्सका लागि आवश्यक ARIA ढाँचाहरू
+
+यी ढाँचाहरू अन्तरक्रियात्मक वेब एप्लिकेसनहरूमा सामान्य पहुँचयोग्यता चुनौतीहरू समाधान गर्छन्:
+
+**तत्वहरूको नामकरण र वर्णन:**
+
+```html
+<!-- aria-label: Provides accessible name when visible text isn't sufficient -->
+<button aria-label="Close newsletter subscription dialog">×</button>
+
+<!-- aria-labelledby: References existing text as the accessible name -->
+<section aria-labelledby="news-heading">
+  <h2 id="news-heading">Latest News</h2>
+  <!-- news content -->
+</section>
+
+<!-- aria-describedby: Links to additional descriptive text -->
+<input type="password" 
+       aria-describedby="pwd-requirements pwd-strength"
+       required>
+<div id="pwd-requirements">
+  Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
+</div>
+<div id="pwd-strength" aria-live="polite">
+  <!-- Dynamic password strength indicator -->
+</div>
+```
+
+**डायनामिक सामग्रीका लागि Live regions:**
+
+```html
+<!-- Polite announcements (don't interrupt current speech) -->
+<div aria-live="polite" id="status-updates">
+  <!-- Status messages appear here -->
+</div>
+
+<!-- Assertive announcements (interrupt and announce immediately) -->
+<div aria-live="assertive" id="urgent-alerts">
+  <!-- Error messages and critical alerts -->
+</div>
+
+<!-- Loading states with live regions -->
+<button id="submit-btn" aria-describedby="loading-status">
+  Submit Application
+</button>
+<div id="loading-status" aria-live="polite" aria-atomic="true">
+  <!-- "Processing your application..." appears here -->
+</div>
+```
+
+**इंटरएक्टिभ विजेट उदाहरण (accordion):**
+
+```html
+<div class="accordion">
+  <h3>
+    <button aria-expanded="false" 
+            aria-controls="panel-1" 
+            id="accordion-trigger-1"
+            class="accordion-trigger">
+      Accessibility Guidelines
+    </button>
+  </h3>
+  <div id="panel-1" 
+       role="region"
+       aria-labelledby="accordion-trigger-1" 
+       hidden>
+    <p>WCAG 2.1 provides comprehensive guidelines...</p>
+  </div>
+</div>
+```
+
+```javascript
+// JavaScript to manage accordion state
+function toggleAccordion(trigger) {
+  const panel = document.getElementById(trigger.getAttribute('aria-controls'));
+  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+  
+  // Toggle states
+  trigger.setAttribute('aria-expanded', !isExpanded);
+  panel.hidden = isExpanded;
+  
+  // Announce change to screen readers
+  const status = document.getElementById('status-updates');
+  status.textContent = isExpanded ? 'Section collapsed' : 'Section expanded';
+}
+```
+
+### ARIA कार्यान्वयनका उत्कृष्ट अभ्यासहरू
+
+ARIA शक्तिशाली छ तर सावधानीपूर्वक कार्यान्वयन आवश्यक छ। यी दिशानिर्देशहरू पालना गर्दा तपाईंको ARIA पहुँचयोग्यता सुधार गर्न मद्दत गर्छ:
+
+**🛡️ मुख्य सिद्धान्तहरू:**
+
+```mermaid
+flowchart TD
+    A[🚀 Start with semantic HTML] --> B{Does HTML provide needed semantics?}
+    B -->|Yes| C[✅ Use HTML only]
+    B -->|No| D[Consider ARIA enhancement]
+    D --> E{Can you achieve it with simpler means?}
+    E -->|Yes| F[🔄 Simplify approach]
+    E -->|No| G[📝 Implement ARIA carefully]
+    G --> H[🧪 Test with real AT]
+    H --> I{Works as expected?}
+    I -->|No| J[🔧 Debug and fix]
+    I -->|Yes| K[✅ Success!]
+    J --> H
+    F --> C
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style K fill:#e8f5e8
+    style G fill:#fff3e0
+    style H fill:#f3e5f5
+```
+
+1. **पहिले Semantic HTML**: सधैं `<button>` लाई `<div role="button">` भन्दा प्राथमिकता दिनुहोस्
+2. **अर्थ नबिगार्नुहोस्**: HTML को मौलिक अर्थलाई कहिल्यै ओभरराइड नगर्नुहोस् (जस्तै `<h1 role="button">` प्रयोग नगर्नुहोस्)
+3. **किबोर्ड पहुँचयोग्यता कायम राख्नुहोस्**: सबै अन्तरक्रियात्मक ARIA तत्वहरू पूर्ण रूपमा किबोर्ड पहुँचयोग्य हुनुपर्छ
+4. **वास्तविक प्रयोगकर्तासँग परीक्षण गर्नुहोस्**: ARIA समर्थन सहायक प्रविधिहरूमा धेरै फरक हुन्छ
+5. **सजिलोबाट सुरु गर्नुहोस्**: जटिल ARIA कार्यान्वयनहरूमा त्रुटिहरूको सम्भावना बढी हुन्छ
 
 **🔍 परीक्षण कार्यप्रवाह:**
 
@@ -434,31 +943,48 @@ graph TD
     G --> B
 ```
 
-**🚫 सामान्य ARIA गल्तीहरू जसलाई टार्नुपर्छ:**
+**🚫 सामान्य ARIA त्रुटिहरूबाट बच्नुहोस्:**
+
+- **विरोधाभासी जानकारी**: HTML अर्थसँग विरोध नगर्नुहोस्
+- **अत्यधिक लेबलिङ**: धेरै ARIA जानकारीले प्रयोगकर्तालाई भारी बनाउँछ
+- **स्थिर ARIA**: सामग्री परिवर्तन हुँदा ARIA अवस्थाहरू अपडेट गर्न बिर्सनु
+- **परीक्षण नगरिएको कार्यान्वयनहरू**: सैद्धान्तिक रूपमा काम गर्ने तर व्यवहारमा असफल हुने ARIA
+- **किबोर्ड समर्थनको अभाव**: ARIA roles बिना सम्बन्धित किबोर्ड अन्तरक्रिया
+
+> 💡 **परीक्षण स्रोतहरू**: [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) जस्ता उपकरणहरू प्रयोग गरेर स्वचालित ARIA मान्यता प्राप्त गर्नुहोस्, तर पूर्ण अनुभवको लागि सधैं वास्तविक स्क्रीन रिडरहरूसँग परीक्षण गर्नुहोस्।
+
+### 🎭 **ARIA सीप जाँच: जटिल अन्तरक्रियाहरूको लागि तयार?**
 
-- **विरोधाभासी जानकारी**: HTML semantics सँग विरोधाभास नगर्नुहोस्
-- **अत्यधिक लेबलिङ**: धेरै ARIA जानकारीले प्रयोगकर्तालाई अलमल्याउँछ
-- **स्थिर ARIA**: सामग्री परिवर्तन हुँदा ARIA अवस्थाहरू अद्यावधिक गर्न बिर्सनु
-- **परीक्षण नगरिएका कार्यान्वयनहरू**: सैद्धान्तिक रूपमा काम गर्ने ARIA तर व्यवहारमा असफल
-- **किबोर्ड समर्थनको अभाव**: ARIA भूमिकाहरू बिना किबोर्ड अन्तरक्रियाहरू
+**तपाईंको ARIA आत्मविश्वासको मूल्याङ्कन गर्नुहोस्:**
+- तपाईं कहिले ARIA लाई Semantic HTML भन्दा प्राथमिकता दिनुहुन्छ? (सुझाव: लगभग कहिल्यै होइन!)
+- तपाईं व्याख्या गर्न सक्नुहुन्छ कि किन `<div role="button">` सामान्यतया `<button>` भन्दा खराब छ?
+- ARIA परीक्षणको बारेमा सम्झन सबैभन्दा महत्त्वपूर्ण कुरा के हो?
 
-> 💡 **परीक्षण स्रोतहरू**: [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) जस्ता उपकरणहरू प्रयोग गरेर स्वचालित ARIA मान्यकरण गर्नुहोस्, तर पूर्ण अनुभवका लागि सधैं वास्तविक स्क्रिन रिडरहरूसँग परीक्षण गर्नुहोस्।
+```mermaid
+pie title "Common ARIA Usage Patterns"
+    "Labels & Descriptions" : 40
+    "Live Regions" : 25
+    "Widget States" : 20
+    "Complex Controls" : 15
+```
+
+> **महत्त्वपूर्ण जानकारी**: अधिकांश ARIA प्रयोग तत्वहरूको नामकरण र वर्णनको लागि हो। जटिल विजेट ढाँचाहरू तपाईंले सोच्नुभएको भन्दा धेरै कम सामान्य छन्!
 
-✅ **विशेषज्ञहरूबाट सिक्नुहोस्**: [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) अध्ययन गर्नुहोस्, जसले जटिल अन्तरक्रियात्मक विजेटहरूको लागि परीक्षण गरिएका ढाँचाहरू र कार्यान्वयनहरू प्रदान गर्दछ।
+✅ **विशेषज्ञहरूबाट सिक्नुहोस्**: [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) अध्ययन गर्नुहोस् जटिल अन्तरक्रियात्मक विजेटहरूको लागि परीक्षण गरिएको ढाँचाहरू र कार्यान्वयनहरूको लागि।
 
 ## छविहरू र मिडियालाई पहुँचयोग्य बनाउने
 
-दृश्य र अडियो सामग्री आधुनिक वेब अनुभवहरूको महत्त्वपूर्ण हिस्सा हुन्, तर यदि विचारपूर्वक कार्यान्वयन नगरिएमा तिनीहरूले अवरोध सिर्जना गर्न सक्छन्। लक्ष्य भनेको तपाईंको मिडियाको जानकारी र भावनात्मक प्रभाव प्रत्येक प्रयोगकर्तासम्म पुर्‍याउनु हो। एकपटक तपाईंले यसलाई बुझ्नुभयो भने, यो स्वाभाविक बन्छ।
+दृश्य र अडियो सामग्री आधुनिक वेब अनुभवहरूको महत्त्वपूर्ण भाग हो, तर यदि सोचपूर्वक कार्यान्वयन नगरिएमा तिनीहरूले बाधा सिर्जना गर्न सक्छन्। लक्ष्य भनेको तपाईंको मिडियाको जानकारी र भावनात्मक प्रभाव प्रत्येक प्रयोगकर्तासम्म पुग्न सुनिश्चित गर्नु हो। एकपटक तपाईंले यसलाई बुझ्नुभयो भने, यो स्वाभाविक बन्छ।
 
-विभिन्न प्रकारका मिडियाहरूले विभिन्न पहुँचयोग्य दृष्टिकोणहरू आवश्यक पार्छन्। यो खाना पकाउने जस्तै हो—तपाईंले नाजुक माछालाई बलियो स्टेक जस्तै व्यवहार गर्नुहुन्न। यी भिन्नताहरू बुझ्दा प्रत्येक परिस्थितिका लागि सही समाधान छनोट गर्न मद्दत गर्दछ।
+विभिन्न प्रकारका मिडियाले विभिन्न पहुँचयोग्यता दृष्टिकोणहरू आवश्यक पार्छ। यो खाना पकाउने जस्तै हो—तपाईंले नाजुक माछालाई बलियो स्टेक जस्तै व्यवहार गर्नुहुन्न। यी भिन्नताहरू बुझ्दा प्रत्येक परिस्थितिका लागि सही समाधान चयन गर्न मद्दत गर्छ।
 
 ### रणनीतिक छवि पहुँचयोग्यता
 
-तपाईंको वेबसाइटमा प्रत्येक छविले कुनै उद्देश्य पूरा गर्छ। त्यो उद्देश्य बुझ्दा तपाईंले राम्रो वैकल्पिक पाठ लेख्न र थप समावेशी अनुभवहरू सिर्जना गर्न सक्नुहुन्छ।
+तपाईंको वेबसाइटमा प्रत्येक छविले उद्देश्य पूरा गर्छ। त्यो उद्देश्य बुझ्दा तपाईंले राम्रो वैकल्पिक पाठ लेख्न र समावेशी अनुभवहरू सिर्जना गर्न मद्दत गर्छ।
 
 **छविहरूका चार प्रकार र तिनीहरूको alt पाठ रणनीतिहरू:**
 
-**जानकारीमूलक छविहरू** - महत्त्वपूर्ण जानकारी प्रदान गर्ने:
+**सूचनात्मक छविहरू** - महत्त्वपूर्ण जानकारी प्रदान गर्ने:
 ```html
 <img src="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.ne.png" alt="Sales increased 25% from Q1 to Q2 2024">
 ```
@@ -475,7 +1001,7 @@ graph TD
 </button>
 ```
 
-**जटिल छविहरू** - चार्ट, आरेख, इन्फोग्राफिक्स:
+**जटिल छविहरू** - चार्ट, डायग्राम, इन्फोग्राफिक्स:
 ```html
 <img src="../../../../translated_images/complex-chart.c831f461a363b446a688be5ccacde20d011221758c902cb082cfd4293534ef17.ne.png" alt="Quarterly sales data" aria-describedby="chart-description">
 <div id="chart-description">
@@ -500,11 +1026,11 @@ graph TD
 
 **अडियो आवश्यकताहरू:**
 - **ट्रान्सक्रिप्टहरू**: सबै बोलेको सामग्रीको पाठ संस्करण
-- **दृश्य संकेतहरू**: केवल अडियो सामग्रीका लागि, दृश्य संकेतहरू प्रदान गर्नुहोस्
+- **दृश्य संकेतहरू**: केवल अडियो सामग्रीको लागि, दृश्य संकेतहरू प्रदान गर्नुहोस्
 
 ### आधुनिक छवि प्रविधिहरू
 
-**सजावटी छविहरूका लागि CSS प्रयोग गर्दै:**
+**सजावटी छविहरूको लागि CSS प्रयोग गर्दै:**
 ```css
 .hero-section {
   background-image: url('decorative-hero.jpg');
@@ -512,7 +1038,7 @@ graph TD
 }
 ```
 
-**पहुंचयोग्य प्रतिक्रियाशील छविहरू:**
+**पहुंचयोग्यतासहितको उत्तरदायी छविहरू:**
 ```html
 <picture>
   <source media="(min-width: 800px)" srcset="large-chart.png">
@@ -521,25 +1047,44 @@ graph TD
 </picture>
 ```
 
-✅ **छवि पहुँचयोग्यता परीक्षण गर्नुहोस्**: स्क्रिन रिडर प्रयोग गरेर छविहरू भएको पृष्ठ नेभिगेट गर्नुहोस्। के तपाईं सामग्री बुझ्न पर्याप्त जानकारी प्राप्त गर्दै हुनुहुन्छ?
+✅ **छवि पहुँचयोग्यता परीक्षण गर्नुहोस्**: स्क्रीन रिडर प्रयोग गरेर छविहरू भएको पृष्ठमा नेभिगेट गर्नुहोस्। के तपाईं सामग्री बुझ्न पर्याप्त जानकारी प्राप्त गर्दै हुनुहुन्छ?
 
 ## किबोर्ड नेभिगेसन र फोकस व्यवस्थापन
 
-धेरै प्रयोगकर्ताहरूले पूर्ण रूपमा किबोर्डको माध्यमबाट वेब नेभिगेट गर्छन्। यसमा मोटर अपाङ्गता भएका व्यक्तिहरू, ती प्रयोगकर्ताहरू जो किबोर्डलाई माउसभन्दा छिटो मान्छन्, र जसको माउसले काम गर्न छोडेको छ, समावेश छन्। तपाईंको साइट किबोर्ड इनपुटसँग राम्रोसँग काम गर्छ भन्ने सुनिश्चित गर्नु महत्त्वपूर्ण छ र यसले प्रायः सबैका लागि तपाईंको साइटलाई थप प्रभावकारी बनाउँछ।
+धेरै प्रयोगकर्ताहरूले किबोर्डको माध्यमबाट मात्र वेब नेभिगेट गर्छन्। यसमा मोटर अपाङ्गता भएका व्यक्तिहरू, किबोर्डलाई माउसभन्दा छिटो मान्ने पावर प्रयोगकर्ताहरू, र जसको माउस काम गर्दैन त्यस्ता सबै समावेश छन्। तपाईंको साइट किबोर्ड इनपुटसँग राम्रोसँग काम गर्ने सुनिश्चित गर्नु महत्त्वपूर्ण छ र प्रायः सबैका लागि तपाईंको साइटलाई अझ प्रभावकारी बनाउँछ।
+
+```mermaid
+flowchart LR
+    A[⌨️ Keyboard Navigation] --> B[Tab Order]
+    A --> C[Focus Indicators]
+    A --> D[Skip Links]
+    A --> E[Keyboard Shortcuts]
+    
+    B --> B1[Logical sequence<br/>All interactive elements<br/>No tab traps]
+    C --> C1[Visible outlines<br/>High contrast<br/>Clear boundaries]
+    D --> D1[Skip to main<br/>Skip to nav<br/>Bypass repetitive]
+    E --> E1[Escape to close<br/>Enter to activate<br/>Arrows in groups]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ### आवश्यक किबोर्ड नेभिगेसन ढाँचाहरू
 
 **मानक किबोर्ड अन्तरक्रियाहरू:**
-- **Tab**: अन्तरक्रियात्मक तत्वहरूमा फोकस अगाडि सार्नुहोस्
+- **Tab**: अन्तरक्रियात्मक तत्वहरू मार्फत अगाडि फोकस सार्नुहोस्
 - **Shift + Tab**: फोकस पछाडि सार्नुहोस्
-- **Enter**: बटन र लिङ्क सक्रिय गर्नुहोस्
+- **Enter**: बटन र लिंक सक्रिय गर्नुहोस्
 - **Space**: बटन सक्रिय गर्नुहोस्, चेकबक्सहरू जाँच गर्नुहोस्
-- **Arrow keys**: कम्पोनेन्ट समूहहरू भित्र नेभिगेट गर्नुहोस् (रेडियो बटन, मेनुहरू)
-- **Escape**: मोडलहरू, ड्रपडाउनहरू बन्द गर्नुहोस्, वा अपरेसन रद्द गर्नुहोस्
+- **Arrow keys**: कम्पोनेन्ट समूहहरू भित्र नेभिगेट गर्नुहोस् (रेडियो बटनहरू, मेनुहरू)
+- **Escape**: मोडलहरू, ड्रपडाउनहरू बन्द गर्नुहोस्, वा अपरेशन रद्द गर्नुहोस्
 
 ### फोकस व्यवस्थापनका उत्कृष्ट अभ्यासहरू
 
-**दृश्य फोकस संकेतकहरू:**
+**दृश्य फोकस संकेतहरू:**
 ```css
 /* Ensure focus is always visible */
 button:focus-visible {
@@ -553,7 +1098,7 @@ button:focus-visible {
 }
 ```
 
-**द्रुत नेभिगेसनका लागि स्किप लिङ्कहरू:**
+**द्रुत नेभिगेसनका लागि Skip links:**
 ```html
 <a href="#main-content" class="skip-link">Skip to main content</a>
 <a href="#navigation" class="skip-link">Skip to navigation</a>
@@ -566,7 +1111,7 @@ button:focus-visible {
 </main>
 ```
 
-**सही ट्याब क्रम:**
+**सही Tab क्रम:**
 ```html
 <!-- Use semantic HTML for natural tab order -->
 <form>
@@ -582,7 +1127,7 @@ button:focus-visible {
 
 ### मोडलहरूमा फोकस ट्र्यापिङ
 
-मोडल संवादहरू खोल्दा, फोकस मोडल भित्रै सीमित हुनुपर्छ:
+मोडल संवादहरू खोल्दा, फोकस मोडल भित्र मात्र सीमित हुनुपर्छ:
 
 ```javascript
 // Modern focus trap implementation
@@ -615,15 +1160,15 @@ function trapFocus(element) {
 }
 ```
 
-✅ **किबोर्ड नेभिगेसन परीक्षण गर्नुहोस्**: केवल Tab कुञ्जी प्रयोग गरेर तपाईंको वेबसाइट नेभिगेट गर्न प्रयास गर्नुहोस्। के तपाईं सबै अन्तरक्रियात्मक तत्वहरूमा पुग्न सक्नुहुन्छ? के फोकस क्रम तार्किक छ? के फोकस संकेतकहरू स्पष्ट रूपमा देखिन्छन्?
+✅ **किबोर्ड नेभिगेसन परीक्षण गर्नुहोस्**: केवल Tab कुञ्जी प्रयोग गरेर तपाईंको वेबसाइट नेभिगेट गर्न प्रयास गर्नुहोस्। के तपाईं सबै अन्तरक्रियात्मक तत्वहरूमा पुग्न सक्नुहुन्छ? के फोकस क्रम तार्किक छ? के फोकस संकेतहरू स्पष्ट रूपमा देखिन्छन्?
 
 ## फारम पहुँचयोग्यता
 
-फारमहरू प्रयोगकर्ता अन्तरक्रियाका लागि महत्त्वपूर्ण छन् र पहुँचयोग्यतामा विशेष ध्यान आवश्यक छ।
+फारमहरू प्रयोगकर्ता अन्तरक्रियाको लागि महत्त्वपूर्ण छन् र पहुँचयोग्यतामा विशेष ध्यान आवश्यक छ।
 
 ### लेबल र फारम नियन्त्रणको सम्बन्ध
 
-**प्रत्येक फारम नियन्त्रणलाई लेबल चाहिन्छ:**
+**प्रत्येक फारम नियन्त्रणलाई लेबल आवश्यक छ:**
 ```html
 <!-- Explicit labeling (preferred) -->
 <label for="username">Username:</label>
@@ -639,7 +1184,7 @@ function trapFocus(element) {
 <input type="search" aria-label="Search products" placeholder="Search...">
 ```
 
-### त्रुटि ह्यान्डलिङ र मान्यकरण
+### त्रुटि ह्यान्डलिङ र मान्यता
 
 **पहुंचयोग्य त्रुटि सन्देशहरू:**
 ```html
@@ -652,15 +1197,15 @@ function trapFocus(element) {
 </div>
 ```
 
-**फारम मान्यकरणका उत्कृष्ट अभ्यासहरू:**
+**फारम मान्यता उत्कृष्ट अभ्यासहरू:**
 - `aria-invalid` प्रयोग गरेर अमान्य क्षेत्रहरू संकेत गर्नुहोस्
 - स्पष्ट, विशिष्ट त्रुटि सन्देशहरू प्रदान गर्नुहोस्
 - महत्त्वपूर्ण त्रुटि घोषणाहरूका लागि `role="alert"` प्रयोग गर्नुहोस्
 - त्रुटिहरू तुरुन्तै र फारम सबमिशनमा देखाउनुहोस्
 
-### फील्डसेट र समूह बनाउने
+### Fieldsets र समूह बनाउने
 
-**सम्बन्धित फारम नियन्त्रणहरू समूह गर्नुहोस्:**
+**सम्बन्धित फारम नियन्त्रणहरू समूह बनाउनुहोस्:**
 ```html
 <fieldset>
   <legend>Shipping Address</legend>
@@ -683,53 +1228,53 @@ function trapFocus(element) {
 
 ## तपाईंको पहुँचयोग्यता यात्रा: मुख्य निष्कर्षहरू
 
-बधाई छ! तपाईंले वास्तवमै समावेशी वेब अनुभवहरू सिर्जना गर्न आधारभूत ज्ञान प्राप्त गर्नुभयो। यो साँच्चै रोमाञ्चक कुरा हो! वेब पहुँचयोग्यता केवल अनुपालन बक्सहरू जाँच गर्ने कुरा होइन—यो मानिसहरूले डिजिटल सामग्रीसँग अन्तरक्रिया गर्ने विविध तरिकाहरूलाई पहिचान गर्ने र त्यो अद्भुत जटिलताका लागि डिजाइन गर्ने कुरा हो।
+बधाई छ! तपाईंले वास्तवमै समावेशी वेब अनुभवहरू सिर्जना गर्न आधारभूत ज्ञान प्राप्त गर्नुभएको छ। यो निकै रोमाञ्चक कुरा हो! वेब पहुँचयोग्यता केवल अनुपालन बक्सहरू जाँच गर्ने बारे होइन—यो मानिसहरूले डिजिटल सामग्रीसँग अन्तरक्रिया गर्ने विविध तरिकाहरूलाई पहिचान गर्ने र त्यो अद्भुत जटिलताको लागि डिजाइन गर्ने बारे हो।
 
-अब तपाईं विकासकर्ताहरूको बढ्दो समुदायको हिस्सा हुनुहुन्छ जसले बुझ्छ कि उत्कृष्ट डिजाइन सबैका लागि काम गर्छ। क्लबमा स्वागत छ!
+तपाईं अब विकासकर्ताहरूको बढ्दो समुदायको हिस्सा हुनुहुन्छ जसले बुझ्छ कि उत्कृष्ट डिजाइन सबैका लागि काम गर्छ। क्लबमा स्वागत छ!
 
 **🎯 तपाईंको पहुँचयोग्यता उपकरण किटमा अब समावेश छ:**
 
 | मुख्य सिद्धान्त | कार्यान्वयन | प्रभाव |
 |----------------|----------------|---------|
-| **सेम्यान्टिक HTML आधार** | HTML तत्वहरूलाई तिनीहरूको उद्देश्यका लागि सही प्रयोग गर्नुहोस् | स्क्रिन रिडरहरूले कुशलतापूर्वक नेभिगेट गर्न सक्छन्, किबोर्डहरू स्वचालित रूपमा काम गर्छन् |
-| **समावेशी दृश्य डिजाइन** | पर्याप्त कन्ट्रास्ट, अर्थपूर्ण रंग प्रयोग, दृश्य फोकस संकेतकहरू | कुनै पनि प्रकाश अवस्थामा सबैका लागि स्पष्ट |
-| **वर्णनात्मक सामग्री** | अर्थपूर्ण लिङ्क पाठ, alt पाठ, हेडिङहरू | प्रयोगकर्ताहरूले दृश्य सन्दर्भ बिना सामग्री बुझ्छन् |
-| **किबोर्ड पहुँचयोग्यता** | ट्याब क्रम, किबोर्ड सर्टकटहरू, फोकस व्यवस्थापन | मोटर पहुँचयोग्यता र पावर प्रयोगकर्ता दक्षता |
-| **ARIA सुधार** | सेम्यान्टिक खाडलहरू भर्न रणनीतिक प्रयोग | जटिल अनुप्रयोगहरू सहायक प्रविधिहरूसँग काम गर्छन् |
-| **व्यापक परीक्षण** | स्वचालित उपकरणहरू + म्यानुअल प्रमाणीकरण + वास्तविक प्रयोगकर्ता परीक्षण | प्रयोगकर्ताहरूलाई असर गर्नु अघि समस्याहरू पत्ता लगाउनुहोस् |
+| **Semantic HTML आधार** | HTML तत्वहरूलाई तिनीहरूको उद्देश्य अनुसार प्रयोग गर्नुहोस् | स्क्रीन रिडरहरूले कुशलतापूर्वक नेभिगेट गर्न सक्छन्, किबोर्डहरू स्वतः काम गर्छन् |
+| **समावेशी दृश्य डिजाइन** | पर्याप्त कन्ट्रास्ट, अर्थपूर्ण रंग प्रयोग, दृश्य फोकस संकेतहरू | कुनै पनि प्रकाश अवस्थामा सबैका लागि स्पष्ट |
+| **वर्णनात्मक सामग्री** | अर्थपूर्ण लिंक पाठ, alt पाठ, हेडिङहरू | प्रयोगकर्ताहरूले दृश्य सन्दर्भ बिना सामग्री बुझ्छन् |
+| **किबोर्ड पहुँचयोग्यता** | Tab क्रम, किबोर्ड सर्टकटहरू, फोकस व्यवस्थापन | मोटर पहुँचयोग्यता र पावर प्रयोगकर्ता दक्षता |
+| **ARIA सुधार** | Semantic खाली ठाउँहरू भर्न रणनीतिक प्रयोग | जटिल एप्लिकेसनहरू सहायक प्रविधिहरूसँग काम गर्छन् |
+| **व्यापक परीक्षण** | स्वचालित उपकरणहरू + म्यानुअल सत्यापन + वास्तविक प्रयोगकर्ता परीक्षण | समस्याहरू प्रयोगकर्तालाई असर गर्नु अघि पत्ता लगाउनुहोस् |
 
-**🚀 तपाईंका आगामी कदमहरू:**
+**🚀 तपाईंको अर्को कदमहरू:**
 
-1. **तपाईंको कार्यप्रवाहमा पहुँचयोग्यता निर्माण गर्नुहोस्**: परीक्षणलाई तपाईंको विकास प्रक्रियाको स्वाभाविक हिस्सा बनाउनुहोस्
-2. **वास्तविक प्रयोगकर्ताहरूबाट सिक्नुहोस्**: सहायक प्रविधिहरू प्रयोग गर्ने व्यक्तिहरूबाट प्रतिक्रिया खोज्नुहोस्
-3. **अप-टु-डेट रहनुहोस्**: पहुँचयोग्यता प्रविधिहरू नयाँ प्रविधि र मापदण्डहरूसँग विकसित हुन्छन्
-4. **समावेशीकरणको वकालत गर्नुहोस्**: तपाईंको ज्ञान साझा गर्नुहोस् र पहुँचयोग्यतालाई टोलीको प्राथमिकता बनाउनुहोस्
+1. **तपाईंको कार्यप्रवाहमा पहुँचयोग्यता निर्माण गर्नुहोस्**: परीक्षणलाई तपाईंको विकास प्रक्रियाको प्राकृतिक भाग बनाउनुहोस्
+2. **वास्तविक प्रयोगकर्ताबाट सिक्नुहोस्**: सहायक प्रविधिहरू प्रयोग गर्ने व्यक्तिहरूबाट प्रतिक्रिया खोज्नुहोस्
+3. **वर्तमान रहनुहोस्**: पहुँचयोग्यता प्रविधिहरू नयाँ प्रविधिहरू र मापदण्डहरूसँग विकसित हुन्छन्
+4. **समावेशीता वकालत गर्नुहोस्**: तपाईंको ज्ञान साझा गर्नुहोस् र पहुँचयोग्यता टोलीको प्राथमिकता बनाउनुहोस्
 
-> 💡 **स्मरण गर्नुहोस्**: पहुँचयोग्यता सीमाहरूले प्रायः सबैका लागि नवीन, सुरुचिपूर्ण समाधानहरू ल्याउँछन्। कर्ब कट, क्याप्सनहरू, र भ्वाइस कन्ट्रोलहरू सबै पहुँचयोग्यता सुविधाहरूको रूपमा सुरु भए र मुख्यधारका सुधारहरू बने।
+> 💡 **स्मरण गर्नुहोस्**: पहुँचयोग्यता सीमाहरूले प्रायः सबैलाई फाइदा पुग्ने नवीन, सुरुचिपूर्ण समाधानहरू जन्माउँछन्। कर्ब कट्स, क्याप्सनहरू, र भ्वाइस नियन्त्रणहरू सबै पहुँचयोग्यता सुविधाहरूको रूपमा सुरु भए र मुख्यधार सुधार बने।
 
-**व्यावसायिक मामला स्पष्ट छ**: पहुँचयोग्य वेबसाइटहरूले बढी प्रयोगकर्ताहरूलाई पुग्छन्, खोज इन्जिनहरूमा राम्रो स्थानमा रहन्छन्, कम मर्मत खर्च हुन्छ, र कानुनी जोखिमहरू टार्छन्। तर इमानदारीपूर्वक भन्नुपर्दा? पहुँचयोग्यतामा ध्यान दिनुको वास्तविक कारण अझ गहिरो छ। पहुँचयोग्य वेबसाइटहरूले वेबका उत्कृष्ट मूल्यहरू—खुलापन, समावेशीकरण, र सबैलाई जानकारीमा समान पहुँचको विचार—लाई मूर्त रूप दिन्छन्।
+**व्यावसायिक मामला स्पष्ट छ**: पहुँचयोग्य वेबसाइटहरूले बढी प्रयोगकर्ताहरूलाई पुग्छन्, खोज इन्जिनहरूमा राम्रो स्थानमा रहन्छन्, कम मर्मत लागत हुन्छ, र कानुनी जोखिमहरूबाट बच्छन्। तर इमानदारीपूर्वक? पहुँचयोग्यतामा ध्यान दिनको वास्तविक कारण अझ गहिरो छ। पहुँचयोग्य वेबसाइटहरूले वेबका उत्कृष्ट मूल्यहरू—खुलापन, समावेशिता, र सबैलाई जानकारीमा समान पहुँचको विचारलाई मूर्त रूप दिन्छन्।
 
-अब तपाईं भविष्यको समावेशी वेब निर्माण गर्न तयार हुनुहुन्छ। तपाईंले सिर्जना गर्ने प्रत्येक पहुँचयोग्य साइटले इन्टरनेटलाई सबैका लागि थप स्वागतयोग्य स्थान बनाउँछ। यो सोच्दा साँच्चै अद्भुत छ, हैन?
+तपाईं अब भविष्यको समावेशी वेब निर्माण गर्न तयार हुनुहुन्छ। तपाईंले सिर्जना गर्ने प्रत्येक पहुँचयोग्य साइटले इन्टरनेटलाई सबैका लागि अझ स्वागतयोग्य स्थान बनाउँछ। यो सोच्दा निकै अद्भुत लाग्छ!
 
 ## थप स्रोतहरू
 
-यी महत्त्वपूर्ण स्रोतहरूसँग तपाईंको पहुँचयोग्यता सिकाइ यात्रा जारी राख्नुहोस्:
+पहुंचयोग्यता सिक्ने यात्रालाई यी आवश्यक स्रोतहरूसँग जारी राख्नुहोस्:
 
 **📚 आधिकारिक मापदण्ड र दिशानिर्देशहरू:**
-- [WCAG 2.1 दिशानिर्देशहरू](https://www.w3.org/WAI/WCAG21/quickref/) - आधिकारिक पहुँचयोग्यता मापदण्डको छिटो सन्दर्भ
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - आधिकारिक पहुँचयोग्यता मापदण्डको द्रुत सन्दर्भ
 - [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - अन्तरक्रियात्मक विजेटहरूको लागि व्यापक ढाँचाहरू
-- [WebAIM दिशानिर्देशहरू](https://webaim.org/) - व्यावहारिक, सुरुवाती अनुकूल पहुँचयोग्यता मार्गदर्शन
+- [WebAIM Guidelines](https://webaim.org/) - व्यावहारिक, शुरुवात मैत्री पहुँचयोग्यता मार्गदर्शन
 
 **🛠️ उपकरणहरू र परीक्षण स्रोतहरू:**
 - [axe DevTools](https://www.deque.com/axe/devtools/) - उद्योग-मानक पहुँचयोग्यता परीक्षण
-- [A11y Project Checklist](https://www.a11yproject.com/checklist/) - चरण-दर-चरण पहुँचयोग्यता प्रमाणीकरण
-- [Accessibility Insights](https://accessibilityinsights.io/) - माइक्रोसफ्टको व्यापक परीक्षण सुइट
-- [Color Oracle](https://colororacle.org/) - डिजाइन परीक्षणका लागि रंग अन्धोपन सिमुलेटर
+- [A11y Project Checklist](https://www.a11yproject.com/checklist/) - चरण-दर-चरण पहुँचयोग्यता सत्यापन
+- [Accessibility Insights](https://accessibilityinsights.io/) - माइक्रोसफ्टको व्यापक परीक्षण सूट
+- [Color Oracle](https://colororacle.org/) - डिजाइन परीक्षणको लागि रंग अन्धोपन सिमुलेटर
 
 **🎓 सिकाइ र समुदाय:**
 - [WebAIM Screen Reader Survey](https://webaim.org/projects/screenreadersurvey9/) - वास्तविक प्रयोगकर्ता प्राथमिकता र व्यवहार
 - [Inclusive Components](https://inclusive-components.design/) - आधुनिक पहुँचयोग्य कम्पोनेन्ट ढाँचाहरू
-- [A11y Coffee](https://a11y.coffee/) - छिटो पहुँचयोग्यता सुझावहरू र अन्तर्दृष्टिहरू
+- [A11y Coffee](https://a11y.coffee/) - द्रुत पहुँचयोग्यता सुझावहरू र जानकारी
 - [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) - W3C को व्यापक पहुँचयोग्यता स्रोतहरू
 
 **🎥 व्यावहारिक सिकाइ:**
@@ -742,11 +1287,11 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
 
 **विवरण:** उचित फोकस व्यवस्थापन, ARIA विशेषताहरू, र किबोर्ड नेभिगेसन ढाँचाहरू प्रदर्शन गर्ने पहुँचयोग्य मोडल संवाद कम्पोनेन्ट सिर्जना गर्नुहोस्।
 
-**प्रेरणा:** HTML, CSS, र JavaScript सहित पूर्ण मोडल संवाद कम्पोनेन्ट निर्माण गर्नुहोस् जसमा: उचित फोकस ट्र्यापिङ, ESC कुञ्जीले बन्द गर्ने, बाहिर क्लिक गर्दा बन्द गर्ने, स्क्रिन रिडरहरूको लागि ARIA विशेषताहरू, र दृश्य फोकस संकेतकहरू समावेश छन्। मोडलमा उचित लेबल र त्रुटि ह्यान्डलिङ भएको फारम समावेश हुनुपर्छ। कम्पोनेन्टले WCAG 2.1 AA मापदण्डहरू पूरा गर्नुपर्छ।
+**प्रेरणा:** HTML, CSS, र JavaScript सहित पूर्ण मोडल संवाद कम्पोनेन्ट निर्माण गर्नुहोस् जसमा समावेश छ: उचित फोकस ट्र्यापिङ, ESC कुञ्जीले बन्द गर्ने, बाहिर क्लिक गरेर बन्द गर्ने, स्क्रीन रिडरहरूको लागि ARIA विशेषताहरू, र दृश्य फोकस संकेतहरू। मोडलमा उचित लेबल र त्रुटि ह्यान्डलिङ भएको फारम समावेश हुनुपर्छ। सुनिश्चित गर्नुहोस् कि कम्पोनेन्ट WCAG 2.1 AA मापदण्डहरू पूरा गर्छ।
 
 ## 🚀 चुनौती
 
-यो HTML लिनुहोस् र तपाईंले सिकेका रणनीतिहरूलाई ध्यानमा राख्दै यसलाई सकेसम्म पहुँचयोग्य बनाउन पुनःलेखन गर्नुहोस्।
+यो HTML लिनुहोस् र तपाईंले सिकेका रणनीतिहरूलाई ध्यानमा राख्दै यसलाई सकेसम्म पहुँचयोग्य बनाउनुहोस्।
 
 ```html
 <!DOCTYPE html>
@@ -804,29 +1349,77 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
 </html>
 ```
 
-**मुख्य सुधारहरू गरिएका:**
-- उचित सेम्यान्टिक HTML संरचना थपियो
-- शीर्षक पदानुक्रम ठीक गरियो (एकल h1, तार्किक प्रगति)
-- "यहाँ क्लिक गर्नुहोस्" को सट्टा अर्थपूर्ण लिङ्क पाठ थपियो
+**गरेका मुख्य सुधारहरू:**
+- उचित Semantic HTML संरचना थपियो
+- हेडिङको पदानुक्रम सुधार गरियो (एकल h1, तार्किक प्रगति)
+- "click here" को सट्टा अर्थपूर्ण लिंक पाठ थपियो
 - नेभिगेसनका लागि उचित ARIA लेबलहरू समावेश गरियो
-- lang विशेषता र उचित meta ट्यागहरू थपियो
-- अन्तरक्रियात्मक तत्वहरूको लागि बटन तत्व प्रयोग गरियो
-- उचित ल्यान्डमार्कहरूसँग फुटर सामग्री संरचना गरियो
+- lang attribute र उचित meta tags थपियो
+- अन्तरक्रियात्मक तत्वहरूको लागि button तत्व प्रयोग गरियो
+- footer सामग्रीलाई उचित landmarks सहित संरचना गरियो
 
 ## पोस्ट-व्याख्यान क्विज
 [पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/en/)
 
 ## समीक्षा र आत्म अध्ययन
 
-धेरै सरकारहरूले पहुँचयोग्यता आवश्यकताहरू सम्बन्धी कानूनहरू बनाएका छन्। तपाईंको देशको पहुँचयोग्यता कानूनहरूबारे पढ्नुहोस्। के समेटिएको छ, र के छैन? उदाहरणका लागि [यो सरकारी वेबसाइट](https://accessibility.blog.gov.uk/) हेर्नुहोस्।
+धेरै सरकारहरूले पहुँचयोग्यता आवश्यकताहरूको सम्बन्धमा कानूनहरू राखेका छन्। तपाईंको देशको पहुँचयोग्यता कानूनहरूको बारेमा पढ्नुहोस्। के समावेश छ, र के छैन? उदाहरणका लागि [यो सरकारी वेबसाइट](https://accessibility.blog.gov.uk/)।
 
 ## असाइनमेन्ट
  
-[एक गैर-पहुँचयोग्य वेबसाइटको विश्लेषण गर्नुहोस्](assignment.md)
+[एक गैर-पहुंचयोग्य वेबसाइटको विश्लेषण गर्नुहोस्](assignment.md)
+
+Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
+
+---
+
+## 🚀 तपाईंको पहुँचयोग्यता मास्टरी समयरेखा
+
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] तपाईंको ब्राउजरमा axe DevTools एक्सटेन्सन स्थापना गर्नुहोस्
+- [ ] तपाईंको मनपर्ने वेबसाइटमा Lighthouse पहुँचयोग्यता अडिट चलाउनुहोस्
+- [ ] केवल Tab कुञ्जी प्रयोग
+- [ ] ५ वटा जटिल वेबसाइटहरूमा किबोर्ड नेभिगेसन अभ्यास गर्नुहोस्  
+- [ ] सही लेबल, त्रुटि ह्यान्डलिङ, र ARIA सहित एक साधारण फारम बनाउनुहोस्  
+- [ ] पहुँचयोग्यता समुदायमा सामेल हुनुहोस् (A11y Slack, WebAIM फोरम)  
+- [ ] अपाङ्गता भएका वास्तविक प्रयोगकर्ताहरूले वेबसाइटहरू कसरी नेभिगेट गर्छन् हेर्नुहोस् (YouTube मा उत्कृष्ट उदाहरणहरू छन्)  
+
+### 🌟 **तपाईंको महिनाभरि परिवर्तन**  
+- [ ] आफ्नो विकास कार्यप्रवाहमा पहुँचयोग्यता परीक्षण समावेश गर्नुहोस्  
+- [ ] पहुँचयोग्यता समस्याहरू समाधान गरेर खुला स्रोत परियोजनामा योगदान गर्नुहोस्  
+- [ ] सहायक प्रविधि प्रयोग गर्ने कसैसँग उपयोगिता परीक्षण गर्नुहोस्  
+- [ ] आफ्नो टिमको लागि पहुँचयोग्य कम्पोनेन्ट लाइब्रेरी बनाउनुहोस्  
+- [ ] आफ्नो कार्यस्थल वा समुदायमा पहुँचयोग्यताको वकालत गर्नुहोस्  
+- [ ] पहुँचयोग्यता अवधारणाहरूमा नयाँ व्यक्तिलाई मार्गदर्शन गर्नुहोस्  
+
+### 🏆 **अन्तिम पहुँचयोग्यता च्याम्पियन जाँच**
+
+**आफ्नो पहुँचयोग्यता यात्रा मनाउनुहोस्:**  
+- वेब प्रयोग गर्ने तरिकाबारे तपाईंले सबैभन्दा आश्चर्यजनक कुरा के सिक्नुभयो?  
+- कुन पहुँचयोग्यता सिद्धान्त तपाईंको विकास शैलीसँग सबैभन्दा मेल खान्छ?  
+- पहुँचयोग्यता सिकेपछि डिजाइनप्रति तपाईंको दृष्टिकोण कसरी परिवर्तन भयो?  
+- वास्तविक परियोजनामा तपाईंले गर्न चाहेको पहिलो पहुँचयोग्यता सुधार के हो?  
 
-श्रेय: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) Instrument द्वारा
+```mermaid
+journey
+    title Your Accessibility Confidence Evolution
+    section Today
+      Overwhelmed: 3: You
+      Curious: 4: You
+      Motivated: 5: You
+    section This Week
+      Practicing: 4: You
+      Testing: 5: You
+      Understanding: 5: You
+    section Next Month
+      Advocating: 5: You
+      Leading: 5: You
+      Inclusive by Default: 5: You
+```
+  
+> 🌍 **अब तपाईं पहुँचयोग्यता च्याम्पियन हुनुहुन्छ!** तपाईंले बुझ्नुभयो कि उत्कृष्ट वेब अनुभवहरू सबैका लागि काम गर्छन्, चाहे उनीहरूले वेब कसरी पहुँच गर्छन्। तपाईंले बनाएको प्रत्येक पहुँचयोग्य सुविधाले इन्टरनेटलाई अझ समावेशी बनाउँछ। वेबलाई तपाईंजस्ता विकासकर्ताहरूको आवश्यकता छ जसले पहुँचयोग्यतालाई बाधा होइन, सबै प्रयोगकर्ताहरूका लागि राम्रो अनुभव सिर्जना गर्ने अवसरको रूपमा हेर्छन्। आन्दोलनमा स्वागत छ! 🎉  
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषामा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुनेछैनौं।
\ No newline at end of file
diff --git a/translations/ne/10-ai-framework-project/README.md b/translations/ne/10-ai-framework-project/README.md
index bf16d3584e..b9444c1b7f 100644
--- a/translations/ne/10-ai-framework-project/README.md
+++ b/translations/ne/10-ai-framework-project/README.md
@@ -1,33 +1,71 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e2c4ae5688e34b4b8b09d52aec56c79e",
-  "translation_date": "2025-10-22T16:52:53+00:00",
+  "original_hash": "3925b6a1c31c60755eaae4d578232c25",
+  "translation_date": "2025-11-03T15:27:21+00:00",
   "source_file": "10-ai-framework-project/README.md",
   "language_code": "ne"
 }
 -->
 # एआई फ्रेमवर्क
 
-कहिल्यै एआई एप्लिकेसनहरू स्क्र्याचबाट निर्माण गर्न प्रयास गर्दा तनाव महसुस गर्नुभएको छ? तपाईं एक्लो हुनुहुन्न! एआई फ्रेमवर्कहरू एआई विकासको लागि स्विस आर्मी चक्कु जस्तै हुन् - ती शक्तिशाली उपकरणहरू हुन् जसले तपाईंलाई बुद्धिमान एप्लिकेसनहरू निर्माण गर्दा समय र झन्झट बचत गर्न मद्दत गर्छ। एआई फ्रेमवर्कलाई राम्रोसँग व्यवस्थित पुस्तकालयको रूपमा सोच्नुहोस्: यसले पूर्वनिर्मित कम्पोनेन्टहरू, मानकीकृत एपीआईहरू, र स्मार्ट एब्स्ट्र्याक्सनहरू प्रदान गर्दछ ताकि तपाईं कार्यान्वयन विवरणहरूसँग संघर्ष नगरी समस्याहरू समाधान गर्न ध्यान केन्द्रित गर्न सक्नुहुन्छ।
+कहिल्यै एआई एप्लिकेशनहरू स्क्र्याचबाट निर्माण गर्न प्रयास गर्दा तनाव महसुस गर्नुभएको छ? तपाईं एक्लै हुनुहुन्न! एआई फ्रेमवर्कहरू एआई विकासको लागि स्विस आर्मी चक्कु जस्तै हुन् - ती शक्तिशाली उपकरणहरू हुन् जसले तपाईंलाई बुद्धिमान एप्लिकेशनहरू निर्माण गर्दा समय र झन्झट बचत गर्न सक्छ। एआई फ्रेमवर्कलाई राम्रोसँग व्यवस्थित पुस्तकालयको रूपमा सोच्नुहोस्: यसले पूर्वनिर्मित कम्पोनेन्टहरू, मानकीकृत एपीआईहरू, र स्मार्ट एब्स्ट्र्याक्सनहरू प्रदान गर्दछ ताकि तपाईं कार्यान्वयन विवरणसँग संघर्ष नगरी समस्याहरू समाधान गर्न ध्यान दिन सक्नुहुन्छ।
 
-यस पाठमा, हामी LangChain जस्ता फ्रेमवर्कहरूले जटिल एआई एकीकरण कार्यहरूलाई कसरी सफा, पढ्न मिल्ने कोडमा परिणत गर्न सक्छन् भन्ने कुरा अन्वेषण गर्नेछौं। तपाईंले वास्तविक-विश्व चुनौतीहरू जस्तै कुराकानीको ट्र्याक राख्ने, टूल कलिंग कार्यान्वयन गर्ने, र एकीकृत इन्टरफेस मार्फत विभिन्न एआई मोडेलहरू सम्हाल्ने तरिका पत्ता लगाउनुहुनेछ।
+यस पाठमा, हामी LangChain जस्ता फ्रेमवर्कहरूले जटिल एआई एकीकरण कार्यहरूलाई कसरी सफा, पढ्न मिल्ने कोडमा परिणत गर्न सक्छन् भन्ने कुरा अन्वेषण गर्नेछौं। तपाईंले वास्तविक-जीवन चुनौतीहरू जस्तै कुराकानीको ट्र्याक राख्ने, उपकरण कलिंग कार्यान्वयन गर्ने, र एकीकृत इन्टरफेस मार्फत विभिन्न एआई मोडेलहरू सम्हाल्ने तरिका पत्ता लगाउनुहुनेछ।
 
-हामी समाप्त हुँदा, तपाईंलाई थाहा हुनेछ कि कच्चा एपीआई कलहरूको सट्टा फ्रेमवर्कहरू कहिले प्रयोग गर्ने, तिनीहरूको एब्स्ट्र्याक्सनहरू प्रभावकारी रूपमा कसरी प्रयोग गर्ने, र वास्तविक-विश्व प्रयोगको लागि तयार एआई एप्लिकेसनहरू कसरी निर्माण गर्ने। आउनुहोस्, एआई फ्रेमवर्कहरूले तपाईंको परियोजनाहरूको लागि के गर्न सक्छन् भनेर अन्वेषण गरौं।
+हामी समाप्त हुँदा, तपाईंलाई थाहा हुनेछ कि कच्चा एपीआई कलहरूको सट्टा फ्रेमवर्कहरू कहिले प्रयोग गर्ने, तिनीहरूको एब्स्ट्र्याक्सनहरू प्रभावकारी रूपमा कसरी प्रयोग गर्ने, र वास्तविक-जीवन प्रयोगको लागि तयार एआई एप्लिकेशनहरू कसरी निर्माण गर्ने। आउनुहोस्, एआई फ्रेमवर्कहरूले तपाईंको परियोजनाहरूको लागि के गर्न सक्छन् भनेर अन्वेषण गरौं।
+
+## ⚡ तपाईंले अर्को ५ मिनेटमा के गर्न सक्नुहुन्छ
+
+**व्यस्त डेभलपरहरूको लागि छिटो सुरु गर्ने मार्ग**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Install LangChain]
+    B --> C[Create ChatOpenAI client]
+    C --> D[Send first prompt]
+    D --> E[See framework power]
+```
+
+- **मिनेट १**: LangChain स्थापना गर्नुहोस्: `pip install langchain langchain-openai`
+- **मिनेट २**: आफ्नो GitHub टोकन सेटअप गर्नुहोस् र ChatOpenAI क्लाइन्ट आयात गर्नुहोस्
+- **मिनेट ३**: प्रणाली र मानव सन्देशहरू सहित सरल कुराकानी सिर्जना गर्नुहोस्
+- **मिनेट ४**: आधारभूत उपकरण (जस्तै एक add function) थप्नुहोस् र एआई उपकरण कलिंग हेर्नुहोस्
+- **मिनेट ५**: कच्चा एपीआई कलहरू र फ्रेमवर्क एब्स्ट्र्याक्सनको बीचको फरक अनुभव गर्नुहोस्
+
+**छिटो परीक्षण कोड**:
+```python
+from langchain_openai import ChatOpenAI
+from langchain_core.messages import SystemMessage, HumanMessage
+
+llm = ChatOpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="openai/gpt-4o-mini"
+)
+
+response = llm.invoke([
+    SystemMessage(content="You are a helpful coding assistant"),
+    HumanMessage(content="Explain Python functions briefly")
+])
+print(response.content)
+```
+
+**किन यो महत्त्वपूर्ण छ**: ५ मिनेटमा, तपाईंले अनुभव गर्नुहुनेछ कि एआई फ्रेमवर्कहरूले जटिल एआई एकीकरणलाई सरल विधि कलहरूमा कसरी रूपान्तरण गर्छ। यही आधार हो जसले उत्पादन एआई एप्लिकेशनहरूलाई शक्ति दिन्छ।
 
 ## किन फ्रेमवर्क रोज्ने?
 
-तपाईं एआई एप निर्माण गर्न तयार हुनुहुन्छ - शानदार! तर यहाँ कुरा छ: तपाईंले विभिन्न मार्गहरू लिन सक्नुहुन्छ, र प्रत्येकको आफ्नै फाइदा र बेफाइदा छन्। यो कतै पुग्न हिँड्ने, साइकल चलाउने, वा ड्राइभ गर्ने बीचको छनोट जस्तै हो - तिनीहरूले तपाईंलाई त्यहाँ पुर्‍याउँछन्, तर अनुभव (र प्रयास) पूर्ण रूपमा फरक हुनेछ।
+तपाईं एआई एप निर्माण गर्न तयार हुनुहुन्छ - उत्कृष्ट! तर यहाँ कुरा छ: तपाईंले विभिन्न मार्गहरू लिन सक्नुहुन्छ, र प्रत्येकको आफ्नै फाइदा र बेफाइदा छन्। यो पैदल हिँड्ने, साइकल चलाउने, वा गाडी चलाएर कतै पुग्न छनोट गर्ने जस्तै हो - तिनीहरूले तपाईंलाई त्यहाँ पुर्‍याउँछन्, तर अनुभव (र प्रयास) पूर्ण रूपमा फरक हुनेछ।
 
-आउनुहोस्, तपाईंको परियोजनाहरूमा एआई एकीकृत गर्न सक्ने तीन मुख्य तरिकाहरूलाई तोडौं:
+आउनुहोस्, तपाईंले आफ्नो परियोजनाहरूमा एआई एकीकृत गर्न सक्ने तीन मुख्य तरिकाहरूलाई तोडौं:
 
 | दृष्टिकोण | फाइदाहरू | उत्तम लागि | विचारहरू |
 |----------|------------|----------|--------------|
-| **प्रत्यक्ष HTTP अनुरोधहरू** | पूर्ण नियन्त्रण, कुनै निर्भरता छैन | साधारण प्रश्नहरू, आधारभूत कुरा सिक्ने | बढी विस्तृत कोड, म्यानुअल त्रुटि ह्यान्डलिंग |
-| **SDK एकीकरण** | कम बोइलरप्लेट, मोडेल-विशिष्ट अनुकूलन | एकल-मोडेल एप्लिकेसनहरू | विशिष्ट प्रदायकहरूमा सीमित |
-| **एआई फ्रेमवर्कहरू** | एकीकृत एपीआई, निर्मित एब्स्ट्र्याक्सनहरू | बहु-मोडेल एपहरू, जटिल वर्कफ्लोहरू | सिकाइ वक्र, सम्भावित अत्यधिक एब्स्ट्र्याक्सन |
+| **प्रत्यक्ष HTTP अनुरोधहरू** | पूर्ण नियन्त्रण, कुनै निर्भरता छैन | सरल प्रश्नहरू, आधारभूत कुरा सिक्ने | बढी विस्तृत कोड, म्यानुअल त्रुटि ह्यान्डलिंग |
+| **SDK एकीकरण** | कम बोइलरप्लेट, मोडेल-विशिष्ट अनुकूलन | एकल-मोडेल एप्लिकेशनहरू | विशिष्ट प्रदायकहरूमा सीमित |
+| **एआई फ्रेमवर्कहरू** | एकीकृत एपीआई, निर्मित एब्स्ट्र्याक्सनहरू | बहु-मोडेल एपहरू, जटिल कार्यप्रवाहहरू | सिक्ने वक्र, सम्भावित अत्यधिक एब्स्ट्र्याक्सन |
 
-### फ्रेमवर्कको व्यावहारिक फाइदाहरू
+### फ्रेमवर्क लाभहरू व्यवहारमा
 
 ```mermaid
 graph TD
@@ -45,31 +83,109 @@ graph TD
 ```
 
 **किन फ्रेमवर्कहरू महत्त्वपूर्ण छन्:**
-- **एकीकृत** विभिन्न एआई प्रदायकहरूलाई एउटै इन्टरफेस अन्तर्गत
-- **स्वचालित रूपमा** कुराकानी मेमोरी ह्यान्डल गर्छ
-- **सामान्य कार्यहरूको लागि** तयार उपकरणहरू प्रदान गर्दछ जस्तै एम्बेडिङ र फङ्सन कलिंग
-- **त्रुटि ह्यान्डलिंग र पुन: प्रयास तर्क** व्यवस्थापन गर्छ
-- **जटिल वर्कफ्लोहरूलाई** पढ्न मिल्ने मेथड कलहरूमा परिणत गर्छ
+- **एकीकृत** विभिन्न एआई प्रदायकहरू एक इन्टरफेस अन्तर्गत
+- **स्वचालित रूपमा ह्यान्डल गर्छ** कुराकानी मेमोरी
+- **तयार उपकरणहरू प्रदान गर्छ** सामान्य कार्यहरूको लागि जस्तै embeddings र function calling
+- **त्रुटि ह्यान्डलिंग र पुन: प्रयास तर्क व्यवस्थापन गर्छ**
+- **जटिल कार्यप्रवाहहरूलाई रूपान्तरण गर्छ** पढ्न मिल्ने विधि कलहरूमा
+
+> 💡 **प्रो टिप**: विभिन्न एआई मोडेलहरू बीच स्विच गर्दा वा एजेन्टहरू, मेमोरी, वा उपकरण कलिंग जस्ता जटिल सुविधाहरू निर्माण गर्दा फ्रेमवर्कहरू प्रयोग गर्नुहोस्। आधारभूत कुरा सिक्दा वा सरल, केन्द्रित एप्लिकेशनहरू निर्माण गर्दा प्रत्यक्ष एपीआईहरूमा अडिग रहनुहोस्।
 
-> 💡 **प्रो टिप**: विभिन्न एआई मोडेलहरू बीच स्विच गर्दा वा एजेन्टहरू, मेमोरी, वा टूल कलिंग जस्ता जटिल सुविधाहरू निर्माण गर्दा फ्रेमवर्कहरू प्रयोग गर्नुहोस्। आधारभूत कुरा सिक्दा वा साधारण, केन्द्रित एप्लिकेसनहरू निर्माण गर्दा प्रत्यक्ष एपीआईहरूमा अडिग रहनुहोस्।
+**तलको रेखा**: जस्तै एक कुशल कारीगरको विशेष उपकरणहरू र पूर्ण कार्यशालाको बीचमा छनोट गर्ने, यो कार्यको लागि उपकरण मिलाउनको बारेमा हो। जटिल, सुविधा-समृद्ध एप्लिकेशनहरूको लागि फ्रेमवर्कहरू उत्कृष्ट छन्, जबकि प्रत्यक्ष एपीआईहरू सरल प्रयोग केसहरूको लागि राम्रो काम गर्छन्।
 
-**निचोडमा**: जस्तै एक कुशल कारीगरको विशेष उपकरणहरू र पूर्ण कार्यशालाको बीचको छनोट, यो कार्यको लागि उपकरण मिलाउनको कुरा हो। जटिल, सुविधायुक्त एप्लिकेसनहरूको लागि फ्रेमवर्कहरू उत्कृष्ट छन्, जबकि साधारण प्रयोगका मामिलाहरूको लागि प्रत्यक्ष एपीआईहरू राम्रो काम गर्छन्।
+## 🗺️ एआई फ्रेमवर्क मास्टरीको माध्यमबाट तपाईंको सिक्ने यात्रा
+
+```mermaid
+journey
+    title From Raw APIs to Production AI Applications
+    section Framework Foundations
+      Understand abstraction benefits: 4: You
+      Master LangChain basics: 6: You
+      Compare approaches: 7: You
+    section Conversation Systems
+      Build chat interfaces: 5: You
+      Implement memory patterns: 7: You
+      Handle streaming responses: 8: You
+    section Advanced Features
+      Create custom tools: 6: You
+      Master structured output: 8: You
+      Build document systems: 8: You
+    section Production Applications
+      Combine all features: 7: You
+      Handle error scenarios: 8: You
+      Deploy complete systems: 9: You
+```
+
+**तपाईंको यात्रा गन्तव्य**: यस पाठको अन्त्यसम्ममा, तपाईंले एआई फ्रेमवर्क विकासमा महारत हासिल गर्नुभएको हुनेछ र व्यावसायिक एआई सहायकहरूको प्रतिस्पर्धा गर्ने परिष्कृत, उत्पादन-तयार एआई एप्लिकेशनहरू निर्माण गर्न सक्षम हुनुहुनेछ।
 
 ## परिचय
 
 यस पाठमा, हामी सिक्नेछौं:
 
-- सामान्य एआई फ्रेमवर्क प्रयोग गर्न।
-- च्याट कुराकानी, टूल प्रयोग, मेमोरी र सन्दर्भ जस्ता सामान्य समस्याहरू समाधान गर्न।
+- सामान्य एआई फ्रेमवर्क प्रयोग गर्ने।
+- च्याट कुराकानी, उपकरण प्रयोग, मेमोरी र सन्दर्भ जस्ता सामान्य समस्याहरू समाधान गर्ने।
 - यसलाई एआई एप्स निर्माण गर्न उपयोग गर्ने।
 
+## 🧠 एआई फ्रेमवर्क विकास पारिस्थितिकी तन्त्र
+
+```mermaid
+mindmap
+  root((AI Frameworks))
+    Abstraction Benefits
+      Code Simplification
+        Unified APIs
+        Built-in Error Handling
+        Consistent Patterns
+        Reduced Boilerplate
+      Multi-Model Support
+        Provider Agnostic
+        Easy Switching
+        Fallback Options
+        Cost Optimization
+    Core Components
+      Conversation Management
+        Message Types
+        Memory Systems
+        Context Tracking
+        History Persistence
+      Tool Integration
+        Function Calling
+        API Connections
+        Custom Tools
+        Workflow Automation
+    Advanced Features
+      Structured Output
+        Pydantic Models
+        JSON Schemas
+        Type Safety
+        Validation Rules
+      Document Processing
+        Embeddings
+        Vector Stores
+        Similarity Search
+        RAG Systems
+    Production Patterns
+      Application Architecture
+        Modular Design
+        Error Boundaries
+        Async Operations
+        State Management
+      Deployment Strategies
+        Scalability
+        Monitoring
+        Performance
+        Security
+```
+
+**मुख्य सिद्धान्त**: एआई फ्रेमवर्कहरूले जटिलतालाई एब्स्ट्र्याक्ट गर्दै कुराकानी व्यवस्थापन, उपकरण एकीकरण, र कागजात प्रशोधनको लागि शक्तिशाली एब्स्ट्र्याक्सनहरू प्रदान गर्छन्, जसले सफा, मर्मतयोग्य कोडको साथ परिष्कृत एआई एप्लिकेशनहरू निर्माण गर्न डेभलपरहरूलाई सक्षम बनाउँछ।
+
 ## तपाईंको पहिलो एआई प्रम्प्ट
 
-आउनुहोस्, आधारभूत कुराबाट सुरु गरौं र तपाईंको पहिलो एआई एप्लिकेसन निर्माण गरौं जसले प्रश्न पठाउँछ र उत्तर फिर्ता ल्याउँछ। जस्तै आर्किमिडिजले आफ्नो स्नानमा विस्थापनको सिद्धान्त पत्ता लगाए, कहिलेकाहीँ सबैभन्दा साधारण अवलोकनहरूले सबैभन्दा शक्तिशाली अन्तर्दृष्टि दिन्छन् - र फ्रेमवर्कहरूले यी अन्तर्दृष्टिहरू पहुँचयोग्य बनाउँछन्।
+आउनुहोस्, आधारभूत कुराबाट सुरु गरौं र तपाईंको पहिलो एआई एप्लिकेशन सिर्जना गरौं जसले प्रश्न पठाउँछ र उत्तर फिर्ता ल्याउँछ। जस्तै आर्किमिडिजले आफ्नो स्नानमा विस्थापनको सिद्धान्त पत्ता लगाए, कहिलेकाहीँ सबैभन्दा सरल अवलोकनहरूले सबैभन्दा शक्तिशाली अन्तर्दृष्टिहरू ल्याउँछन् - र फ्रेमवर्कहरूले यी अन्तर्दृष्टिहरू पहुँचयोग्य बनाउँछन्।
 
 ### LangChain सेटअप गर्दै GitHub मोडेलहरूसँग
 
-हामी LangChain प्रयोग गर्नेछौं GitHub मोडेलहरूसँग जडान गर्न, जुन धेरै राम्रो छ किनभने यसले तपाईंलाई विभिन्न एआई मोडेलहरूको नि:शुल्क पहुँच दिन्छ। सबैभन्दा राम्रो भाग? सुरु गर्न तपाईंलाई केही साधारण कन्फिगरेसन प्यारामिटरहरू मात्र आवश्यक छ:
+हामी LangChain प्रयोग गर्नेछौं GitHub मोडेलहरूसँग जडान गर्न, जुन धेरै राम्रो छ किनभने यसले तपाईंलाई विभिन्न एआई मोडेलहरूमा निःशुल्क पहुँच दिन्छ। सबैभन्दा राम्रो कुरा? तपाईंलाई सुरु गर्न केही सरल कन्फिगरेसन प्यारामिटरहरू मात्र आवश्यक छ:
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -90,12 +206,12 @@ print(response.content)
 - **LangChain क्लाइन्ट सिर्जना गर्छ** `ChatOpenAI` क्लास प्रयोग गरेर - यो तपाईंको एआईमा प्रवेशद्वार हो!
 - **GitHub मोडेलहरूसँग जडान कन्फिगर गर्छ** तपाईंको प्रमाणीकरण टोकनको साथ
 - **कुन एआई मोडेल प्रयोग गर्ने निर्दिष्ट गर्छ** (`gpt-4o-mini`) - यसलाई तपाईंको एआई सहायक चयन गर्ने सोच्नुहोस्
-- **तपाईंको प्रश्न पठाउँछ** `invoke()` मेथड प्रयोग गरेर - यहीँ जादू हुन्छ
-- **प्रतिक्रिया निकाल्छ र प्रदर्शन गर्छ** - र voilà, तपाईं एआईसँग कुराकानी गर्दै हुनुहुन्छ!
+- **तपाईंको प्रश्न पठाउँछ** `invoke()` विधि प्रयोग गरेर - यहाँ जादू हुन्छ
+- **उत्तर निकाल्छ र प्रदर्शन गर्छ** - र voilà, तपाईं एआईसँग च्याट गर्दै हुनुहुन्छ!
 
-> 🔧 **सेटअप नोट**: यदि तपाईं GitHub Codespaces प्रयोग गर्दै हुनुहुन्छ भने, तपाईं भाग्यमानी हुनुहुन्छ - `GITHUB_TOKEN` पहिले नै सेटअप गरिएको छ! स्थानीय रूपमा काम गर्दै हुनुहुन्छ? चिन्ता नगर्नुहोस्, तपाईंले सही अनुमतिहरूको साथ व्यक्तिगत पहुँच टोकन सिर्जना गर्न आवश्यक हुनेछ।
+> 🔧 **सेटअप नोट**: यदि तपाईं GitHub Codespaces प्रयोग गर्दै हुनुहुन्छ भने, तपाईं भाग्यमानी हुनुहुन्छ - `GITHUB_TOKEN` पहिले नै सेटअप गरिएको छ! स्थानीय रूपमा काम गर्दै हुनुहुन्छ? चिन्ता नगर्नुहोस्, तपाईंले सही अनुमतिहरूको साथ व्यक्तिगत पहुँच टोकन सिर्जना गर्न आवश्यक छ।
 
-**अपेक्षित आउटपुट:**
+**अपेक्षित आउटपुट**:
 ```text
 The capital of France is Paris.
 ```
@@ -117,23 +233,23 @@ sequenceDiagram
 
 ## कुराकानी एआई निर्माण गर्दै
 
-पहिलो उदाहरणले आधारभूत कुरा प्रदर्शन गर्छ, तर यो केवल एकल आदानप्रदान हो - तपाईंले प्रश्न सोध्नुहुन्छ, उत्तर प्राप्त गर्नुहुन्छ, र त्यति नै। वास्तविक एप्लिकेसनहरूमा, तपाईंको एआईले तपाईंले के कुरा गरिरहनुभएको छ भनेर सम्झन चाहनुहुन्छ, जस्तै वॉटसन र होम्सले समयसँगै आफ्नो अनुसन्धानात्मक कुराकानी निर्माण गरे।
+पहिलो उदाहरणले आधारभूत कुरा प्रदर्शन गर्छ, तर यो केवल एकल आदानप्रदान हो - तपाईंले प्रश्न सोध्नुहुन्छ, उत्तर प्राप्त गर्नुहुन्छ, र त्यति मात्र। वास्तविक एप्लिकेशनहरूमा, तपाईंले आफ्नो एआईलाई तपाईंले छलफल गरिरहनुभएको कुराको सम्झना गर्न चाहनुहुन्छ, जस्तै वाट्सन र होम्सले समयसँगै आफ्नो अनुसन्धानात्मक कुराकानी निर्माण गरे।
 
-यहीँ LangChain विशेष रूपमा उपयोगी हुन्छ। यसले विभिन्न सन्देश प्रकारहरू प्रदान गर्दछ जसले कुराकानी संरचना गर्न मद्दत गर्छ र तपाईंलाई तपाईंको एआईलाई व्यक्तित्व दिन अनुमति दिन्छ। तपाईं च्याट अनुभवहरू निर्माण गर्दै हुनुहुनेछ जसले सन्दर्भ र चरित्र कायम राख्छ।
+यही ठाउँ हो जहाँ LangChain विशेष रूपमा उपयोगी हुन्छ। यसले विभिन्न सन्देश प्रकारहरू प्रदान गर्दछ जसले कुराकानी संरचना गर्न मद्दत गर्दछ र तपाईंलाई आफ्नो एआईलाई व्यक्तित्व दिन अनुमति दिन्छ। तपाईं च्याट अनुभवहरू निर्माण गर्दै हुनुहुनेछ जसले सन्दर्भ र चरित्र कायम राख्छ।
 
 ### सन्देश प्रकारहरू बुझ्दै
 
-यी सन्देश प्रकारहरूलाई कुराकानीमा सहभागीहरूले लगाउने विभिन्न "टोपीहरू" जस्तै सोच्नुहोस्। LangChainले विभिन्न सन्देश वर्गहरू प्रयोग गर्दछ जसले को के भनिरहेको छ भनेर ट्र्याक राख्न मद्दत गर्छ:
+यी सन्देश प्रकारहरूलाई कुराकानीमा सहभागीहरूले लगाउने विभिन्न "टोपीहरू" जस्तै सोच्नुहोस्। LangChain ले विभिन्न सन्देश वर्गहरू प्रयोग गर्दछ जसले को के भन्छ भनेर ट्र्याक राख्छ:
 
 | सन्देश प्रकार | उद्देश्य | उदाहरण प्रयोग केस |
 |--------------|---------|------------------|
-| `SystemMessage` | एआईको व्यक्तित्व र व्यवहार परिभाषित गर्छ | "तपाईं एक सहयोगी कोडिङ सहायक हुनुहुन्छ" |
-| `HumanMessage` | प्रयोगकर्ताको इनपुट प्रतिनिधित्व गर्छ | "फङ्सनहरू कसरी काम गर्छन् भनेर व्याख्या गर्नुहोस्" |
+| `SystemMessage` | एआई व्यक्तित्व र व्यवहार परिभाषित गर्छ | "तपाईं एक सहयोगी कोडिङ सहायक हुनुहुन्छ" |
+| `HumanMessage` | प्रयोगकर्ता इनपुट प्रतिनिधित्व गर्छ | "फङ्सनहरू कसरी काम गर्छन् भनेर व्याख्या गर्नुहोस्" |
 | `AIMessage` | एआई प्रतिक्रियाहरू भण्डारण गर्छ | कुराकानीमा अघिल्लो एआई प्रतिक्रियाहरू |
 
 ### तपाईंको पहिलो कुराकानी सिर्जना गर्दै
 
-आउनुहोस्, एउटा कुराकानी सिर्जना गरौं जहाँ हाम्रो एआईले विशिष्ट भूमिका ग्रहण गर्छ। हामी यसलाई क्याप्टन पिकार्डको भूमिका दिन्छौं - कूटनीतिक बुद्धिमत्ता र नेतृत्वका लागि परिचित पात्र:
+आउनुहोस्, एउटा कुराकानी सिर्जना गरौं जहाँ हाम्रो एआईले विशिष्ट भूमिका ग्रहण गर्छ। हामीले यसलाई क्याप्टेन पिकार्डको रूपमा अवतार दिन्छौं - कूटनीतिक बुद्धिमत्ता र नेतृत्वका लागि परिचित पात्र:
 
 ```python
 messages = [
@@ -181,7 +297,7 @@ I believe in the importance of diplomacy, reason, and the pursuit of knowledge.
 I hold the ideals of the Federation close to my heart, believing in the importance of cooperation, understanding, and respect for all sentient beings. My experiences have shaped my leadership style, and I strive to be a thoughtful and just captain. How may I assist you further?
 ```
 
-कुराकानी निरन्तरता कायम गर्न (प्रत्येक पटक सन्दर्भ रिसेट नगरी), तपाईंले आफ्नो सन्देश सूचीमा प्रतिक्रियाहरू थपिरहनु पर्छ। जस्तै मौखिक परम्पराहरूले पुस्ताहरूमा कथाहरू संरक्षण गरे, यो दृष्टिकोणले स्थायी मेमोरी निर्माण गर्छ:
+कुराकानी निरन्तरता कायम गर्न (प्रत्येक पटक सन्दर्भ रिसेट नगरी), तपाईंले आफ्नो सन्देश सूचीमा प्रतिक्रियाहरू थपिरहनु आवश्यक छ। जस्तै मौखिक परम्पराहरूले पुस्ताहरूमा कथाहरू संरक्षण गरे, यो दृष्टिकोणले स्थायी मेमोरी निर्माण गर्छ:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -216,9 +332,9 @@ print(response.content)
 
 ```
 
-धेरै राम्रो, हैन? यहाँ के भइरहेको छ भने हामीले LLMलाई दुई पटक कल गर्यौं - पहिलो पटक केवल हाम्रो प्रारम्भिक दुई सन्देशहरूसँग, तर फेरि हाम्रो पूर्ण कुराकानी इतिहासको साथ। यो एआई वास्तवमा हाम्रो च्याटको पालना गरिरहेको जस्तो छ!
+धेरै राम्रो, हैन? यहाँ के भइरहेको छ भने हामीले LLMलाई दुई पटक कल गरिरहेका छौं - पहिलो पटक हाम्रो प्रारम्भिक दुई सन्देशहरूसँग, तर त्यसपछि पूर्ण कुराकानी इतिहाससँग। यो एआई वास्तवमा हाम्रो च्याट पछ्याउँदै छ जस्तो छ!
 
-जब तपाईं यो कोड चलाउनुहुन्छ, तपाईंले दोस्रो प्रतिक्रिया प्राप्त गर्नुहुनेछ जुन निम्न जस्तै सुनिन्छ:
+जब तपाईं यो कोड चलाउनुहुन्छ, तपाईंले दोस्रो प्रतिक्रिया प्राप्त गर्नुहुनेछ जुन केही यस प्रकारको देखिन्छ:
 
 ```text
 Welcome aboard, Chris! It's always a pleasure to meet those who share a passion for exploration and discovery. While I cannot formally offer you a position on the Enterprise right now, I encourage you to pursue your aspirations. We are always in need of talented individuals with diverse skills and backgrounds. 
@@ -226,11 +342,35 @@ Welcome aboard, Chris! It's always a pleasure to meet those who share a passion
 If you are interested in space exploration, consider education and training in the sciences, engineering, or diplomacy. The values of curiosity, resilience, and teamwork are crucial in Starfleet. Should you ever find yourself on a starship, remember to uphold the principles of the Federation: peace, understanding, and respect for all beings. Your journey can lead you to remarkable adventures, whether in the stars or on the ground. Engage!
 ```
 
+```mermaid
+sequenceDiagram
+    participant User
+    participant App
+    participant LangChain
+    participant AI
+    
+    User->>App: "Tell me about you"
+    App->>LangChain: [SystemMessage, HumanMessage]
+    LangChain->>AI: Formatted conversation
+    AI->>LangChain: Captain Picard response
+    LangChain->>App: AIMessage object
+    App->>User: Display response
+    
+    Note over App: Add AIMessage to conversation
+    
+    User->>App: "Can I join your crew?"
+    App->>LangChain: [SystemMessage, HumanMessage, AIMessage, HumanMessage]
+    LangChain->>AI: Full conversation context
+    AI->>LangChain: Contextual response
+    LangChain->>App: New AIMessage
+    App->>User: Display contextual response
+```
+
 मलाई लाग्छ यो सम्भव छ ;)
 
 ## स्ट्रिमिङ प्रतिक्रियाहरू
 
-कहिल्यै ध्यान दिनुभएको छ कि ChatGPTले आफ्नो प्रतिक्रियाहरू वास्तविक समयमा "टाइप" गरिरहेको जस्तो देखिन्छ? यो स्ट्रिमिङको कार्य हो। जस्तै कुशल क्यालिग्राफरले काम गरिरहेको हेर्दा - स्ट्रोक बाई स्ट्रोक अक्षरहरू देखा पर्दा - स्ट्रिमिङले अन्तरक्रिया प्राकृतिक महसुस गराउँछ र तत्काल प्रतिक्रिया प्रदान गर्छ।
+कहिल्यै ध्यान दिनुभएको छ कि ChatGPTले आफ्नो प्रतिक्रियाहरू वास्तविक समयमा "टाइप" गरिरहेको जस्तो देखिन्छ? यो स्ट्रिमिङको कार्य हो। जस्तै कुशल क्यालिग्राफरले काम गरिरहेको हेर्दा - अक्षरहरू स्ट्रोक बाई स्ट्रोक देखा पर्दैछन् बरु तुरुन्तै प्रकट हुँदैछन् - स्ट्रिमिङले अन्तरक्रिया प्राकृतिक महसुस गराउँछ र तत्काल प्रतिक्रिया प्रदान गर्छ।
 
 ### LangChainसँग स्ट्रिमिङ कार्यान्वयन गर्दै
 
@@ -253,14 +393,27 @@ for chunk in llm.stream("Write a short story about a robot learning to code"):
 **किन स्ट्रिमिङ उत्कृष्ट छ:**
 - **सामग्री देखाउँछ** यो सिर्जना भइरहेको छ - अब कुनै अजीब प्रतीक्षा छैन!
 - **प्रयोगकर्ताहरूलाई महसुस गराउँछ** कि केही वास्तवमै भइरहेको छ
-- **छिटो महसुस हुन्छ**, यद्यपि यो प्राविधिक रूपमा छैन
+- **छिटो महसुस हुन्छ**, जब यो प्राविधिक रूपमा छैन
 - **प्रयोगकर्ताहरूलाई पढ्न दिन्छ** जबकि एआई अझै "सोच्दै" छ
 
-> 💡 **प्रयोगकर्ता अनुभव टिप**: स्ट्रिमिङले वास्तवमै लामो प्रतिक्रियाहरू जस्तै कोड व्याख्या, रचनात्मक लेखन, वा विस्तृत ट्यूटोरियलहरूमा चम्किन्छ। तपाईंका प्रयोगकर्ताहरूले खाली स्क्रिनमा घुरेर हेर्ने सट्टा प्रगति देखेर माया गर्नेछन्!
+> 💡 **प्रयोगकर्ता अनुभव टिप**: स्ट्रिमिङ वास्तवमै चम्किन्छ जब तपाईं कोड व्याख्या, रचनात्मक लेखन, वा विस्तृत ट्यूटोरियलहरू जस्ता लामो प्रतिक्रियाहरूको सामना गर्दै हुनुहुन्छ। तपाईंका प्रयोगकर्ताहरूले खाली स्क्रिनमा घुरेर हेर्ने सट्टा प्रगति देख्न मन पराउनेछन्!
+
+### 🎯 शैक्षिक जाँच: फ्रेमवर्क एब्स्ट्र्याक्सन लाभहरू
+
+**रोक्नुहोस् र प्रतिबिम्ब गर्नुहोस्**: तपाईंले एआई फ्रेमवर्क एब्स्ट्र्याक्सनहरूको शक्ति अनुभव गर्नुभएको छ। कच्चा एपीआई कलहरूबाट सिकेको कुरासँग तुलना गर्नुहोस्।
+
+**छिटो आत्म-मूल्यांकन**:
+- तपाईं LangChainले म्यानुअल सन्देश ट्र्याकिङको तुलनामा कुराकानी व्यवस्थापनलाई कसरी सरल बनाउँछ भनेर व्याख्या गर्न सक्नुहुन्छ?
+- `invoke()` र `stream()` विधिहरूको बीचको फरक के हो, र तपाईंले प्रत्येकलाई कहिले प्रयोग गर्नुहुन्छ?
+- फ्रेमवर्कको सन्देश प्रकार प्रणालीले कोड संगठनलाई कसरी सुधार गर्छ?
+
+**वास्तविक-जीवन जडान**: तपाईंले सिकेका एब्स्ट्र्याक्सन ढाँचाहरू (सन्देश प्रकारहरू, स्ट्रिमिङ इन्टरफेसहरू, कुराकानी मेमोरी) प्रत्येक प्रमुख एआई एप्लिकेशनमा प्रयोग गरिन्छ - ChatGPTको इन्टरफेसदेखि GitHub Copilotको कोड सहायता सम्म। तपाईं व्यावसायिक एआई विकास टोलीहरूले प्रयोग गर्ने समान वास्तुकला ढाँचाहरूमा महारत हासिल गर्दै हुनुहुन्छ।
+
+**चुनौती प्रश्न**: विभिन्न एआई मोडेल प्रदायकहरू (OpenAI, Anthropic, Google) एकल इन्टरफेसको साथ ह्यान्डल गर्न फ्रेमवर्क एब्स्ट्र्याक्सन कसरी डिजाइन गर्नुहुन्छ? फाइदाहरू र बेफाइदाहरू विचार गर्नुहोस्।
 
 ## प्रम्प्ट टेम्प्लेटहरू
 
-प्रम्प्ट टेम्प्लेटहरू शास्त्रीय वक्तृत्वमा प्रयोग गरिएका रेटोरिकल संरचनाहरू जस्तै काम गर्छन् - सोच्नुहोस् कि कसरी सिसेरोले आफ्नो भाषण शैलीहरू विभिन्न दर्शकहरूको लागि अनुकूलन गर्थे जबकि उही प्रेरक फ्रेमवर्क कायम राख्दै। तिनीहरूले तपाईंलाई पुन: प्रयोग गर्न मिल्ने प्रम्प्टहरू सिर्जना गर्न अनुमति दिन्छन् जहाँ तपाईंले सबै कुरा स्क्र्याचबाट पुन: लेख्न बिना विभिन्न जानकारीका टुक्राहरू स्वैप गर्न सक्नुहुन्छ। एक पटक तपाईंले टेम्प्लेट सेटअप गर्नुभयो भने, तपाईंले केवल आवश्यक मानहरू सहित भर्नु पर्छ।
+प्रम्प्ट टेम्प्लेटहरू शास्त्रीय वक्तृत्वमा प्रयोग गरिएका रेटोरिकल संरचनाहरू जस्तै काम गर्छन् - सोच्नुहोस् कि कसरी सिसेरोले आफ्नो भाषण शैलीहरू विभिन्न श्रोताहरूको लागि अनुकूलन गर्थे जबकि समान प्रेरक फ्रेमवर्क कायम राख्दै। तिनीहरूले तपाईंलाई पुन: प्रयोग गर्न मिल्ने प्रम्प्टहरू सिर्जना गर्न अनुमति दिन्छन् जहाँ तपाईंले सबै कुरा स्क्र्याचबाट पुन: लेख्न बिना विभिन्न जानकारीका टुक्राहरू साट्न सक्नुहुन्छ। एक पटक तपाईंले टेम्प्लेट सेटअप गर्नुभयो, तपाईंले आवश्यक मानहरू सहित भेरिएबलहरू भर्नु मात्र आवश्यक छ।
 
 ### पुन: प्रयोग गर्न मिल्ने प्रम्प्टहरू सिर्जना गर्दै
 
@@ -288,13 +441,13 @@ for question in questions:
 
 **किन तपाईंलाई टेम्प्लेटहरू मनपर्नेछ:**
 - **तपाईंको प्रम्प्टहरूलाई** तपाईंको सम्पूर्ण एपमा स्थिर राख्छ
-- **अब कुनै गडबड स्ट्रिङ कन्केटनेसन छैन** - केवल सफा, सरल भेरिएबलहरू
+- **अब कुनै पनि** अव्यवस्थित स्ट्रिङ कन्काटेनेशन छैन - केवल सफा, सरल भेरिएबलहरू
 - **तपाईंको एआई** पूर्वानुमान योग्य व्यवहार गर्छ किनभने संरचना उस्तै रहन्छ
-- **अपडेटहरू सजिलो छन्** - एक पटक टेम्प्लेट परिवर्तन गर्नुहोस्, र यो सबै ठाउँमा ठीक हुन्छ
+- **अपडेटहरू** सजिलो हुन्छ - एक पटक टेम्प्लेट परिवर्तन गर्नुहोस्, र यो सबै ठाउँमा ठीक हुन्छ
 
 ## संरचित आउटपुट
 
-कहिलेकाहीँ एआई प्रतिक्रियाहरूलाई पार्स गर्न प्रयास गर्दा निराश महसुस गर्नुहुन्छ जुन असंरचित पाठको रूपमा फिर्ता आउँछ? संरचित आउटपुट एआईलाई जैविक वर्गीकरणको लागि लिनियसले प्रयोग गरेको प्रणालीगत दृष्टिकोण अनुसरण गर्न सिकाउने जस्तै हो - व्यवस्थित, पूर्वानुमान योग्य, र काम गर्न सजिलो। तपाईं JSON, विशिष्ट डेटा संरचनाहरू, वा तपाईंलाई आवश्यक कुनै पनि ढाँचा अनुरोध गर्न सक्नुहुन्छ।
+कहिल्यै एआई प्रतिक्रियाहरूलाई पार्स गर्न प्रयास गर्दा निराश महसुस गर्नुभएको छ जुन असंरचित पाठको रूपमा फिर्ता आउँछ? संरचित आउटपुट जस्तै तपाईंको एआईलाई लिनियसले जैविक वर्गीकरणको लागि प्रयोग गरेको प्रणालीगत दृष्टिकोण अनुसरण गर्न सिकाउँदै - व्यवस्थित, पूर्वानुमान योग्य, र काम गर्न सजिलो। तपाईं JSON, विशिष्ट डेटा संरचनाहरू, वा तपाईंलाई आवश्यक कुनै पनि ढाँचा अनुरोध गर्न सक्नुहुन्छ।
 
 ### आउटपुट स्किमाहरू परिभाषित गर्दै
 
@@ -337,118 +490,15 @@ print(f"Strengths: {', '.join(result['strengths'])}")
 ```
 
 **किन संरचित आउटपुट गेम-चेन्जर हो:**
-- **अब कुनै अनुमान छैन** तपाईंले फिर्ता के ढाँचा प्राप्त गर्नुहुनेछ - यो प्रत्येक पटक स्थिर छ
-- **तपाईंको डेटाबेसहरू र एपीआईहरूमा** अतिरिक्त काम बिना सीधा प्लग गर्छ
-- **अजीब एआई प्रतिक्रियाहरूलाई समात्छ** तपाईंको एपलाई तोड्नुअघि
+- **अब कुनै पनि अनुमान छैन** कि तपाईंले फिर्ता के ढाँचा प्राप्त गर्नुहुनेछ - यो प्रत्येक पटक स्थिर छ
+- **तुरुन्तै प्लग हुन्छ** तपाईंको डेटाबेसहरू र एपीआईहरूमा अतिरिक्त काम बिना
+- **अजीब एआई प्रतिक्रियाहरू समात्छ** तपाईंको एपलाई बिग्रनु अघि
 - **तपाईंको कोडलाई सफा बनाउँछ** किनभने तपाईंलाई थाहा छ कि तपाईं केसँग काम गर्दै हुनुहुन्छ
 
-## टूल कलिंग
-
-अब हामी सबैभन्दा शक्तिशाली सुविधाहरूमा पुग्छौं: टूलहरू। यो कसरी तपाईंले आफ्नो एआईलाई कुराकानी बाहेक व्यावहारिक क्षमताहरू दिनुहुन्छ। जस्तै मध्यकालीन गिल्डहरूले विशिष्ट शिल्पहरूको लागि विशेष उपकरणहरू विकास गरे, तपाईं आफ्नो एआईलाई केन्द्रित उपकरणहरू प्रदान गर्न सक्नुहुन्छ। तपाईंले उपलब्ध टूलहरू वर्णन गर्नुहुन्छ, र जब कसैले केही अनुरोध गर्छ जुन मेल खान्छ, तपाईंको एआईले कार्य गर्न सक्छ। 
-
-### Python प्रयोग गर्दै
+## उपकरण कलिंग
 
-आउनुहोस्, केही टूलहरू थपौं:
-
-```python
-from typing_extensions import Annotated, TypedDict
-
-class add(TypedDict):
-    """Add two integers."""
-
-    # Annotations must have the type and can optionally include a default value and description (in that order).
-    a: Annotated[int, ..., "First integer"]
-    b: Annotated[int, ..., "Second integer"]
-
-tools = [add]
-
-functions = {
-    "add": lambda a, b: a + b
-}
-```
-
-यहाँ के भइरहेको छ भने हामी `add` नामक टूलको ब्लूप्रिन्ट सिर्जना गर्दैछौं। `TypedDict` बाट उत्तराधिकार लिएर र `Annotated` प्रकारहरू प्रयोग गरेर `a` र `b` को लागि, हामी LLMलाई यो टूल के गर्छ र यसलाई के चाहिन्छ भन्ने स्पष्ट चित्र दिइरहेका छौं। `functions` डिक्सनरी हाम्रो टूलबक्स जस्तै हो - यसले हाम्रो कोडलाई ठीक के गर्नुपर्छ जब एआईले विशिष्ट टूल प्रयोग गर्ने निर्णय गर्छ।
-
-आउनुहोस्, हामीले यो टूलसँग LLMलाई कसरी कल गर्छौं हेर्नुहोस्:
-
-```python
-llm = ChatOpenAI(
-    api_key=os.environ["GITHUB_TOKEN"],
-    base_url="https://models.github.ai/inference",
-    model="openai/gpt-4o-mini",
-)
-
-llm_with_tools = llm.bind_tools(tools)
-```
-
-यहाँ हामीले `bind_tools` लाई हाम्रो `tools` एरेसँग कल गर्यौं र यसरी LLM `llm_with_tools` अब यो टूलको ज्ञान छ।
-
-यो नयाँ LLM प्रयोग गर्न, हामी निम्न कोड टाइप गर्न सक्छौं:
-
-```python
-query = "What is 3 + 12?"
-
-res = llm_with_tools.invoke(query)
-if(res.tool_calls):
-    for tool in res.tool_calls:
-        print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
-print("CONTENT: ",res.content)
-```
-
-अब हामीले टूल भएको नयाँ llm मा `invoke` कल गर्दा, हामीले `tool_calls` गुण भरिएको पाउन सक्छौं। यदि हो भने, कुनै पनि पहिचान गरिएको टूलको `name` र `args` गुण हुन्छ जसले कुन टूल कल गर्नुपर्छ र कुन तर्कहरू। पूर्ण कोड यस प्रकार देखिन्छ:
-
-```python
-from langchain_core.messages import HumanMessage, SystemMessage
-from langchain_openai import ChatOpenAI
-import os
-from typing_extensions import Annotated, TypedDict
-
-class add(TypedDict):
-    """Add two integers."""
-
-    # Annotations must have the type and can optionally include a default value and description (in that order).
-    a: Annotated[int, ..., "First integer"]
-    b: Annotated[int, ..., "Second integer"]
-
-tools = [add]
-
-functions = {
-    "add": lambda a, b: a + b
-}
-
-llm = ChatOpenAI(
-    api_key=os.environ["GITHUB_TOKEN"],
-    base_url="https://models.github.ai/inference",
-    model="openai/gpt-4o-mini",
-)
-
-llm_with_tools = llm.bind_tools(tools)
-
-query = "What is 3 + 12?"
-
-res = llm_with_tools.invoke(query)
-if(res.tool_calls):
-    for tool in res.tool_calls:
-        print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
-print("CONTENT: ",res.content)
-```
-
-यो कोड चलाउँदा, तपाईंले निम्न जस्तै आउटपुट देख्नुहुनेछ:
-
-```text
-TOOL CALL:  15
-CONTENT: 
-```
-
-एआईले "What is 3 + 12" लाई जाँच गर्यो र यो `add` टूलको लागि कार्यको रूपमा पहिचान गर्यो। जस्तै कुशल पुस्तकालयकारले सोधिएको प्रश्नको प्रकारको आधारमा कुन सन्दर्भ परामर्श गर्नुपर्छ भनेर जान्दछ, यसले टूलको नाम, विवरण, र क्षेत्र निर्दिष्टीकरणबाट यो निर्धारण गर्यो। 15 को परिणाम हाम्रो `functions` डिक्सनरीबाट टूल कार्यान्वयन गरेर आउँछ:
-
-```python
-print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
-```
-
-### वेब एपीआई कल गर्ने थप रोचक टूल
-
-संख्या थप्नेले अवधारणालाई प्रदर्शन गर्छ, तर वास्तविक टूलहरूले सामान्यतया वेब एपीआई कल गर्ने जस्ता जटिल कार्यहरू प्रदर्शन गर्छ। आउनुहोस्, हाम्रो उदाहरणलाई विस्तार गरौं ताकि एआईले इन्टरनेटबाट सामग्री ल्याउन सक्दछ - जस्तै टेलिग्राफ अपरेटरहरूले कहिल्यै टाढा स्थानहरू जडान गरे:
+अब हामी सबैभन्दा शक्तिशाली सुविधाहरूमा पुग्छौं: उपकरणहरू। यही हो जसले तपाईंको एआईलाई कुराकानीभन्दा बाहिर व्यावहारिक क्षमता दिन्छ। ज
+संख्या थप्नुले अवधारणा देखाउँछ, तर वास्तविक उपकरणहरूले सामान्यतया थप जटिल कार्यहरू गर्छन्, जस्तै वेब API कल गर्नु। अब हाम्रो उदाहरणलाई विस्तार गरौं जसले AI लाई इन्टरनेटबाट सामग्री ल्याउन सक्षम बनाउँछ - ठीक त्यस्तै जस्तो टेलिग्राफ अपरेटरहरूले कहिल्यै टाढा रहेका स्थानहरूलाई जोड्थे:
 
 ```python
 class joke(TypedDict):
@@ -473,14 +523,41 @@ query = "Tell me a joke about animals"
 # the rest of the code is the same
 ```
 
-अब यदि तपाईंले यो कोड चलाउनुभयो भने तपाईंले निम्न जस्तै प्रतिक्रिया प्राप्त गर्नुहुनेछ:
+अब यदि तपाईंले यो कोड चलाउनुभयो भने तपाईंलाई केही यस्तै प्रतिक्रिया प्राप्त हुनेछ:
 
 ```text
 TOOL CALL:  Chuck Norris once rode a nine foot grizzly bear through an automatic car wash, instead of taking a shower.
 CONTENT:  
 ```
 
-यहाँ कोड पूर्ण रूपमा:
+```mermaid
+flowchart TD
+    A[User Query: "Tell me a joke about animals"] --> B[LangChain Analysis]
+    B --> C{Tool Available?}
+    C -->|Yes| D[Select joke tool]
+    C -->|No| E[Generate direct response]
+    
+    D --> F[Extract Parameters]
+    F --> G[Call joke(category="animals")]
+    G --> H[API Request to chucknorris.io]
+    H --> I[Return joke content]
+    I --> J[Display to user]
+    
+    E --> K[AI-generated response]
+    K --> J
+    
+    subgraph "Tool Definition Layer"
+        L[TypedDict Schema]
+        M[Function Implementation]
+        N[Parameter Validation]
+    end
+    
+    D --> L
+    F --> N
+    G --> M
+```
+
+यहाँ कोडको सम्पूर्णता छ:
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -532,44 +609,272 @@ if(res.tool_calls):
 print("CONTENT: ",res.content)
 ```
 
-## एम्बेडिङ र दस्तावेज प्रशोधन
+## एम्बेडिङ्स र दस्तावेज प्रक्रिया
+
+एम्बेडिङ्स आधुनिक AI मा सबैभन्दा सुन्दर समाधानहरू मध्ये एक हो। कल्पना गर्नुहोस् कि तपाईं कुनै पनि पाठलाई लिइरहनु भएको छ र त्यसलाई यसको अर्थ समेट्ने संख्यात्मक समन्वयमा रूपान्तरण गर्न सक्नुहुन्छ। यही कुरा एम्बेडिङ्सले गर्छ - तिनीहरूले पाठलाई बहु-आयामिक स्थानमा बिन्दुहरूमा रूपान्तरण गर्छन् जहाँ समान अवधारणाहरू एकसाथ समूह हुन्छन्। यो विचारहरूको लागि समन्वय प्रणाली जस्तै हो, जसरी मेन्डेलीभले परमाणु गुणहरूद्वारा आवधिक तालिका व्यवस्थित गरे।
+
+### एम्बेडिङ्स सिर्जना र प्रयोग गर्ने
+
+```python
+from langchain_openai import OpenAIEmbeddings
+from langchain_community.vectorstores import FAISS
+from langchain_community.document_loaders import TextLoader
+from langchain.text_splitter import CharacterTextSplitter
+
+# Initialize embeddings
+embeddings = OpenAIEmbeddings(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="text-embedding-3-small"
+)
+
+# Load and split documents
+loader = TextLoader("documentation.txt")
+documents = loader.load()
+
+text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0)
+texts = text_splitter.split_documents(documents)
+
+# Create vector store
+vectorstore = FAISS.from_documents(texts, embeddings)
+
+# Perform similarity search
+query = "How do I handle user authentication?"
+similar_docs = vectorstore.similarity_search(query, k=3)
+
+for doc in similar_docs:
+    print(f"Relevant content: {doc.page_content[:200]}...")
+```
+
+### विभिन्न ढाँचाका लागि दस्तावेज लोडरहरू
+
+```python
+from langchain_community.document_loaders import (
+    PyPDFLoader,
+    CSVLoader,
+    JSONLoader,
+    WebBaseLoader
+)
+
+# Load different document types
+pdf_loader = PyPDFLoader("manual.pdf")
+csv_loader = CSVLoader("data.csv")
+json_loader = JSONLoader("config.json")
+web_loader = WebBaseLoader("https://example.com/docs")
+
+# Process all documents
+all_documents = []
+for loader in [pdf_loader, csv_loader, json_loader, web_loader]:
+    docs = loader.load()
+    all_documents.extend(docs)
+```
+
+**एम्बेडिङ्सले तपाईंलाई के गर्न सक्षम बनाउँछ:**
+- **खोज निर्माण गर्नुहोस्** जसले वास्तवमा तपाईंको अर्थ बुझ्छ, केवल कीवर्ड मिलान मात्र होइन
+- **AI सिर्जना गर्नुहोस्** जसले तपाईंको दस्तावेजहरूको बारेमा प्रश्नहरूको उत्तर दिन सक्छ
+- **सिफारिस प्रणाली बनाउनुहोस्** जसले वास्तवमै सान्दर्भिक सामग्री सुझाव दिन्छ
+- **स्वतः** तपाईंको सामग्रीलाई व्यवस्थित र वर्गीकृत गर्नुहोस्
 
-एम्बेडिङहरू आधुनिक एआईमा सबैभन्दा सुन्दर समाधानहरू मध्ये एक प्रतिनिधित्व गर्छ। कल्पना गर्नुहोस् यदि तपाईंले कुनै पनि पाठलाई संख्यात्मक निर्देशांकहरूमा रूपान्तरण गर्न सक्नुहुन्छ जसले यसको अर्थलाई समेट्छ। यही एम्बेडिङहरूले गर्छन् - तिनीहरूले पाठलाई बहु-आयामिक स्थानमा बिन्दुहरूमा रूपान्तरण गर्छन् जहाँ समान अवधारणाहरू सँगै समूहबद्ध हुन्छन्। यो विचारहरूको लागि समन्वय प्रणाली भएको जस्तै हो, जसले मेन्डेलेभले परमाणु गुणहरूद्वारा आव
-3. **व्यक्तिगत शिक्षण**: प्रणाली सन्देशहरू प्रयोग गरेर विभिन्न सीप स्तरहरूमा प्रतिक्रिया अनुकूल बनाउनुहोस्  
-4. **प्रतिक्रिया स्वरूप**: क्विज प्रश्नहरूको लागि संरचित आउटपुट लागू गर्नुहोस्  
+```mermaid
+flowchart LR
+    A[Documents] --> B[Text Splitter]
+    B --> C[Create Embeddings]
+    C --> D[Vector Store]
+    
+    E[User Query] --> F[Query Embedding]
+    F --> G[Similarity Search]
+    G --> D
+    D --> H[Relevant Documents]
+    H --> I[AI Response]
+    
+    subgraph "Vector Space"
+        J[Document A: [0.1, 0.8, 0.3...]]
+        K[Document B: [0.2, 0.7, 0.4...]]
+        L[Query: [0.15, 0.75, 0.35...]]
+    end
+    
+    C --> J
+    C --> K
+    F --> L
+    G --> J
+    G --> K
+```
+
+## पूर्ण AI एप्लिकेसन निर्माण
+
+अब हामीले सिकेका सबै कुरा एक व्यापक एप्लिकेसनमा समाहित गर्नेछौं - एक कोडिङ सहायक जसले प्रश्नहरूको उत्तर दिन सक्छ, उपकरणहरू प्रयोग गर्न सक्छ, र संवाद स्मृति कायम राख्न सक्छ। जस्तै छापाखानाले विद्यमान प्रविधिहरू (चलायमान प्रकार, मसी, कागज, र दबाब) लाई केही परिवर्तनकारीमा संयोजन गर्यो, हामीले हाम्रो AI घटकहरूलाई केही व्यावहारिक र उपयोगीमा संयोजन गर्नेछौं।
+
+### पूर्ण एप्लिकेसन उदाहरण
+
+```python
+from langchain_openai import ChatOpenAI, OpenAIEmbeddings
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_core.messages import HumanMessage, SystemMessage, AIMessage
+from langchain_community.vectorstores import FAISS
+from typing_extensions import Annotated, TypedDict
+import os
+import requests
+
+class CodingAssistant:
+    def __init__(self):
+        self.llm = ChatOpenAI(
+            api_key=os.environ["GITHUB_TOKEN"],
+            base_url="https://models.github.ai/inference",
+            model="openai/gpt-4o-mini"
+        )
+        
+        self.conversation_history = [
+            SystemMessage(content="""You are an expert coding assistant. 
+            Help users learn programming concepts, debug code, and write better software.
+            Use tools when needed and maintain a helpful, encouraging tone.""")
+        ]
+        
+        # Define tools
+        self.setup_tools()
+    
+    def setup_tools(self):
+        class web_search(TypedDict):
+            """Search for programming documentation or examples."""
+            query: Annotated[str, "Search query for programming help"]
+        
+        class code_formatter(TypedDict):
+            """Format and validate code snippets."""
+            code: Annotated[str, "Code to format"]
+            language: Annotated[str, "Programming language"]
+        
+        self.tools = [web_search, code_formatter]
+        self.llm_with_tools = self.llm.bind_tools(self.tools)
+    
+    def chat(self, user_input: str):
+        # Add user message to conversation
+        self.conversation_history.append(HumanMessage(content=user_input))
+        
+        # Get AI response
+        response = self.llm_with_tools.invoke(self.conversation_history)
+        
+        # Handle tool calls if any
+        if response.tool_calls:
+            for tool_call in response.tool_calls:
+                tool_result = self.execute_tool(tool_call)
+                print(f"🔧 Tool used: {tool_call['name']}")
+                print(f"📊 Result: {tool_result}")
+        
+        # Add AI response to conversation
+        self.conversation_history.append(response)
+        
+        return response.content
+    
+    def execute_tool(self, tool_call):
+        tool_name = tool_call['name']
+        args = tool_call['args']
+        
+        if tool_name == 'web_search':
+            return f"Found documentation for: {args['query']}"
+        elif tool_name == 'code_formatter':
+            return f"Formatted {args['language']} code: {args['code'][:50]}..."
+        
+        return "Tool execution completed"
+
+# Usage example
+assistant = CodingAssistant()
+
+print("🤖 Coding Assistant Ready! Type 'quit' to exit.\n")
+
+while True:
+    user_input = input("You: ")
+    if user_input.lower() == 'quit':
+        break
+    
+    response = assistant.chat(user_input)
+    print(f"🤖 Assistant: {response}\n")
+```
 
-### कार्यान्वयन चरणहरू  
+**एप्लिकेसन आर्किटेक्चर:**
 
-**चरण १: आफ्नो वातावरण सेटअप गर्नुहोस्**  
+```mermaid
+graph TD
+    A[User Input] --> B[Coding Assistant]
+    B --> C[Conversation Memory]
+    B --> D[Tool Detection]
+    B --> E[LLM Processing]
+    
+    D --> F[Web Search Tool]
+    D --> G[Code Formatter Tool]
+    
+    E --> H[Response Generation]
+    F --> H
+    G --> H
+    
+    H --> I[User Interface]
+    H --> C
+```
+
+**हामीले कार्यान्वयन गरेका मुख्य विशेषताहरू:**
+- **तपाईंको सम्पूर्ण संवाद सम्झन्छ** सन्दर्भ निरन्तरता सुनिश्चित गर्न
+- **कार्यहरू प्रदर्शन गर्छ** उपकरण कल मार्फत, केवल संवाद मात्र होइन
+- **अनुसरण गर्छ** पूर्वानुमान योग्य अन्तरक्रिया ढाँचाहरू
+- **स्वतः त्रुटि व्यवस्थापन र जटिल कार्यप्रवाहहरू व्यवस्थापन गर्छ**
+
+### 🎯 शैक्षिक जाँच: उत्पादन AI आर्किटेक्चर
+
+**आर्किटेक्चर बुझाइ**: तपाईंले संवाद व्यवस्थापन, उपकरण कल, र संरचित कार्यप्रवाहहरू संयोजन गर्ने पूर्ण AI एप्लिकेसन निर्माण गर्नुभएको छ। यो उत्पादन-स्तर AI एप्लिकेसन विकासको प्रतिनिधित्व गर्दछ।
+
+**मुख्य अवधारणाहरूमा महारत हासिल गरियो**:
+- **क्लास-आधारित आर्किटेक्चर**: व्यवस्थित, मर्मतयोग्य AI एप्लिकेसन संरचना
+- **उपकरण एकीकरण**: संवादभन्दा बाहिरको अनुकूल कार्यक्षमता
+- **स्मृति व्यवस्थापन**: स्थायी संवाद सन्दर्भ
+- **त्रुटि व्यवस्थापन**: बलियो एप्लिकेसन व्यवहार
+
+**उद्योग जडान**: तपाईंले कार्यान्वयन गरेका आर्किटेक्चर ढाँचाहरू (संवाद कक्षाहरू, उपकरण प्रणालीहरू, स्मृति व्यवस्थापन) Slack को AI सहायक, GitHub Copilot, र Microsoft Copilot जस्ता उद्यम AI एप्लिकेसनहरूमा प्रयोग गरिएका समान ढाँचाहरू हुन्। तपाईंले व्यावसायिक-ग्रेड आर्किटेक्चरल सोचको साथ निर्माण गर्दै हुनुहुन्छ।
+
+**प्रतिबिम्ब प्रश्न**: तपाईंले यो एप्लिकेसनलाई बहु-प्रयोगकर्ता, स्थायी भण्डारण, वा बाह्य डाटाबेसहरूसँग एकीकरण गर्न कसरी विस्तार गर्नुहुन्छ? स्केलेबिलिटी र राज्य व्यवस्थापन चुनौतीहरूको बारेमा विचार गर्नुहोस्।
+
+## असाइनमेन्ट: आफ्नो AI-संचालित अध्ययन सहायक निर्माण गर्नुहोस्
+
+**उद्देश्य**: एक AI एप्लिकेसन सिर्जना गर्नुहोस् जसले विद्यार्थीहरूलाई प्रोग्रामिङ अवधारणाहरू सिक्न मद्दत गर्दछ व्याख्या, कोड उदाहरणहरू, र अन्तरक्रियात्मक क्विजहरू प्रदान गरेर।
+
+### आवश्यकताहरू
+
+**मुख्य विशेषताहरू (आवश्यक):**
+1. **संवादात्मक इन्टरफेस**: एक च्याट प्रणाली कार्यान्वयन गर्नुहोस् जसले बहु प्रश्नहरूमा सन्दर्भ कायम राख्छ
+2. **शैक्षिक उपकरणहरू**: सिकाइमा मद्दत गर्ने कम्तीमा दुई उपकरणहरू सिर्जना गर्नुहोस्:
+   - कोड व्याख्या उपकरण
+   - अवधारणा क्विज जनरेटर
+3. **व्यक्तिगत सिकाइ**: विभिन्न सीप स्तरहरूमा प्रतिक्रिया अनुकूलन गर्न प्रणाली सन्देशहरू प्रयोग गर्नुहोस्
+4. **प्रतिक्रिया ढाँचा**: क्विज प्रश्नहरूको लागि संरचित आउटपुट कार्यान्वयन गर्नुहोस्
+
+### कार्यान्वयन चरणहरू
+
+**चरण 1: आफ्नो वातावरण सेटअप गर्नुहोस्**
 ```bash
 pip install langchain langchain-openai
 ```
-  
-**चरण २: आधारभूत च्याट कार्यक्षमता**  
-- `StudyAssistant` नामक कक्षा बनाउनुहोस्  
-- संवाद स्मृति कार्यान्वयन गर्नुहोस्  
-- शैक्षिक सहयोगको लागि व्यक्तित्व कन्फिगरेसन थप्नुहोस्  
 
-**चरण ३: शैक्षिक उपकरणहरू थप्नुहोस्**  
-- **कोड व्याख्याकार**: कोडलाई बुझ्न सकिने भागहरूमा विभाजन गर्छ  
-- **क्विज जनरेटर**: प्रोग्रामिङ अवधारणाहरूको बारेमा प्रश्नहरू सिर्जना गर्छ  
-- **प्रगति ट्र्याकर**: कभर गरिएका विषयहरूको ट्र्याक राख्छ  
+**चरण 2: आधारभूत च्याट कार्यक्षमता**
+- `StudyAssistant` कक्षा सिर्जना गर्नुहोस्
+- संवाद स्मृति कार्यान्वयन गर्नुहोस्
+- शैक्षिक समर्थनको लागि व्यक्तित्व कन्फिगरेसन थप्नुहोस्
+
+**चरण 3: शैक्षिक उपकरणहरू थप्नुहोस्**
+- **कोड व्याख्याकार**: कोडलाई बुझ्न सकिने भागहरूमा तोड्छ
+- **क्विज जनरेटर**: प्रोग्रामिङ अवधारणाहरूको बारेमा प्रश्नहरू सिर्जना गर्छ
+- **प्रगति ट्र्याकर**: समेटिएका विषयहरूको ट्र्याक राख्छ
 
-**चरण ४: उन्नत सुविधाहरू (वैकल्पिक)**  
-- राम्रो प्रयोगकर्ता अनुभवको लागि स्ट्रिमिङ प्रतिक्रियाहरू कार्यान्वयन गर्नुहोस्  
-- पाठ्यक्रम सामग्री समावेश गर्न कागजात लोडिंग थप्नुहोस्  
-- समानता-आधारित सामग्री पुनःप्राप्तिको लागि एम्बेडिङहरू सिर्जना गर्नुहोस्  
+**चरण 4: उन्नत विशेषताहरू (वैकल्पिक)**
+- राम्रो प्रयोगकर्ता अनुभवको लागि स्ट्रिमिङ प्रतिक्रियाहरू कार्यान्वयन गर्नुहोस्
+- पाठ्यक्रम सामग्री समावेश गर्न दस्तावेज लोडिंग थप्नुहोस्
+- समानता-आधारित सामग्री पुनःप्राप्तिको लागि एम्बेडिङ्स सिर्जना गर्नुहोस्
 
-### मूल्यांकन मापदण्ड  
+### मूल्यांकन मापदण्ड
 
-| सुविधा | उत्कृष्ट (४) | राम्रो (३) | सन्तोषजनक (२) | सुधार आवश्यक (१) |  
-|--------|--------------|------------|----------------|-------------------|  
-| **संवाद प्रवाह** | प्राकृतिक, सन्दर्भ-सचेत प्रतिक्रिया | राम्रो सन्दर्भ प्रतिधारण | आधारभूत संवाद | आदानप्रदान बीच कुनै स्मृति छैन |  
-| **उपकरण एकीकरण** | धेरै उपयोगी उपकरणहरू सहज रूपमा काम गर्दै | २+ उपकरणहरू सही कार्यान्वयन गरिएको | १-२ आधारभूत उपकरणहरू | उपकरणहरू कार्यात्मक छैनन् |  
-| **कोड गुणस्तर** | सफा, राम्रोसँग दस्तावेज गरिएको, त्रुटि ह्यान्डलिङ | राम्रो संरचना, केही दस्तावेज | आधारभूत कार्यक्षमता काम गर्छ | खराब संरचना, कुनै त्रुटि ह्यान्डलिङ छैन |  
-| **शैक्षिक मूल्य** | सिकाइको लागि वास्तवमै उपयोगी, अनुकूलन योग्य | राम्रो सिकाइ समर्थन | आधारभूत व्याख्या | सीमित शैक्षिक लाभ |  
+| विशेषता | उत्कृष्ट (4) | राम्रो (3) | सन्तोषजनक (2) | सुधार आवश्यक (1) |
+|---------|---------------|----------|------------------|----------------|
+| **संवाद प्रवाह** | प्राकृतिक, सन्दर्भ-सचेत प्रतिक्रियाहरू | राम्रो सन्दर्भ प्रतिधारण | आधारभूत संवाद | विनिमयहरू बीच कुनै स्मृति छैन |
+| **उपकरण एकीकरण** | धेरै उपयोगी उपकरणहरू सहज रूपमा काम गर्दै | २+ उपकरणहरू सही कार्यान्वयन गरिएको | १-२ आधारभूत उपकरणहरू | उपकरणहरू कार्यात्मक छैनन् |
+| **कोड गुणस्तर** | सफा, राम्रोसँग दस्तावेज गरिएको, त्रुटि व्यवस्थापन | राम्रो संरचना, केही दस्तावेज | आधारभूत कार्यक्षमता काम गर्छ | खराब संरचना, कुनै त्रुटि व्यवस्थापन छैन |
+| **शैक्षिक मूल्य** | सिकाइको लागि वास्तवमै उपयोगी, अनुकूलन योग्य | राम्रो सिकाइ समर्थन | आधारभूत व्याख्याहरू | सीमित शैक्षिक लाभ |
 
-### नमूना कोड संरचना  
+### नमूना कोड संरचना
 
 ```python
 class StudyAssistant:
@@ -593,42 +898,101 @@ class StudyAssistant:
 assistant = StudyAssistant(skill_level="intermediate")
 response = assistant.chat("Explain how Python functions work")
 ```
-  
-**बोनस चुनौतीहरू:**  
-- आवाज इनपुट/आउटपुट क्षमताहरू थप्नुहोस्  
-- Streamlit वा Flask प्रयोग गरेर वेब इन्टरफेस कार्यान्वयन गर्नुहोस्  
-- एम्बेडिङहरू प्रयोग गरेर पाठ्यक्रम सामग्रीबाट ज्ञान आधार सिर्जना गर्नुहोस्  
-- प्रगति ट्र्याकिङ र व्यक्तिगत शिक्षण मार्गहरू थप्नुहोस्  
 
-## सारांश  
+**बोनस चुनौतीहरू:**
+- आवाज इनपुट/आउटपुट क्षमताहरू थप्नुहोस्
+- Streamlit वा Flask प्रयोग गरेर वेब इन्टरफेस कार्यान्वयन गर्नुहोस्
+- एम्बेडिङ्स प्रयोग गरेर पाठ्यक्रम सामग्रीबाट ज्ञान आधार सिर्जना गर्नुहोस्
+- प्रगति ट्र्याकिङ र व्यक्तिगत सिकाइ मार्गहरू थप्नुहोस्
 
-🎉 अब तपाईंले AI फ्रेमवर्क विकासको आधारभूत कुरा सिक्नुभएको छ र LangChain प्रयोग गरेर परिष्कृत AI अनुप्रयोगहरू निर्माण गर्न सिक्नुभएको छ। यो एक व्यापक शिक्षुता पूरा गरेजस्तै, तपाईंले सीपहरूको महत्वपूर्ण उपकरण किट प्राप्त गर्नुभएको छ। आउनुहोस्, तपाईंले के हासिल गर्नुभएको छ समीक्षा गरौं।  
+## 📈 तपाईंको AI फ्रेमवर्क विकास महारत समयरेखा
 
-### तपाईंले के सिक्नुभयो  
+```mermaid
+timeline
+    title Production AI Framework Development Journey
+    
+    section Framework Foundations
+        Understanding Abstractions
+            : Master framework vs API decisions
+            : Learn LangChain core concepts
+            : Implement message type systems
+        
+        Basic Integration
+            : Connect to AI providers
+            : Handle authentication
+            : Manage configuration
+    
+    section Conversation Systems
+        Memory Management
+            : Build conversation history
+            : Implement context tracking
+            : Handle session persistence
+        
+        Advanced Interactions
+            : Master streaming responses
+            : Create prompt templates
+            : Implement structured output
+    
+    section Tool Integration
+        Custom Tool Development
+            : Design tool schemas
+            : Implement function calling
+            : Handle external APIs
+        
+        Workflow Automation
+            : Chain multiple tools
+            : Create decision trees
+            : Build agent behaviors
+    
+    section Production Applications
+        Complete System Architecture
+            : Combine all framework features
+            : Implement error boundaries
+            : Create maintainable code
+        
+        Enterprise Readiness
+            : Handle scalability concerns
+            : Implement monitoring
+            : Build deployment strategies
+```
 
-**मुख्य फ्रेमवर्क अवधारणाहरू:**  
-- **फ्रेमवर्क लाभहरू**: फ्रेमवर्कहरू प्रत्यक्ष API कलहरूको सट्टा कहिले छनोट गर्ने बुझ्दै  
-- **LangChain आधारभूत कुरा**: AI मोडेल कनेक्शन सेटअप र कन्फिगर गर्दै  
-- **सन्देश प्रकारहरू**: संरचित संवादहरूको लागि `SystemMessage`, `HumanMessage`, र `AIMessage` प्रयोग गर्दै  
+**🎓 स्नातक माइलस्टोन**: तपाईंले आधुनिक AI एप्लिकेसनहरूलाई शक्ति प्रदान गर्ने उही उपकरणहरू र ढाँचाहरू प्रयोग गरेर AI फ्रेमवर्क विकासमा सफलतापूर्वक महारत हासिल गर्नुभएको छ। यी सीपहरूले AI एप्लिकेसन विकासको अत्याधुनिक प्रतिनिधित्व गर्दछ र तपाईंलाई उद्यम-ग्रेड बौद्धिक प्रणालीहरू निर्माण गर्न तयार बनाउँछ।
 
-**उन्नत सुविधाहरू:**  
-- **उपकरण कलिङ**: उन्नत AI क्षमताहरूको लागि अनुकूलित उपकरणहरू सिर्जना र एकीकृत गर्दै  
-- **संवाद स्मृति**: धेरै संवाद मोडहरूमा सन्दर्भ कायम राख्दै  
-- **स्ट्रिमिङ प्रतिक्रियाहरू**: वास्तविक-समय प्रतिक्रिया डेलिभरी कार्यान्वयन गर्दै  
-- **प्रम्प्ट टेम्प्लेटहरू**: पुन: प्रयोग गर्न मिल्ने, गतिशील प्रम्प्टहरू निर्माण गर्दै  
-- **संरचित आउटपुट**: निरन्तर, पार्स गर्न मिल्ने AI प्रतिक्रियाहरू सुनिश्चित गर्दै  
-- **एम्बेडिङहरू**: सेम्यान्टिक खोज र कागजात प्रशोधन क्षमताहरू सिर्जना गर्दै  
+**🔄 अर्को स्तर क्षमताहरू**:
+- उन्नत AI आर्किटेक्चर (एजेन्टहरू, बहु-एजेन्ट प्रणालीहरू) अन्वेषण गर्न तयार
+- RAG प्रणालीहरू वेक्टर डाटाबेसहरूसँग निर्माण गर्न तयार
+- बहु-मोडल AI एप्लिकेसनहरू सिर्जना गर्न सुसज्जित
+- AI एप्लिकेसन स्केलिङ र अनुकूलनको लागि आधार सेट
 
-**व्यावहारिक अनुप्रयोगहरू:**  
-- **पूर्ण अनुप्रयोगहरू निर्माण गर्दै**: उत्पादन-तयार अनुप्रयोगहरूमा धेरै सुविधाहरू संयोजन गर्दै  
-- **त्रुटि ह्यान्डलिङ**: बलियो त्रुटि व्यवस्थापन र मान्यकरण कार्यान्वयन गर्दै  
-- **उपकरण एकीकरण**: AI क्षमताहरू विस्तार गर्ने अनुकूलित उपकरणहरू सिर्जना गर्दै  
+## सारांश
 
-### मुख्य निष्कर्षहरू  
+🎉 तपाईंले अब AI फ्रेमवर्क विकासको आधारभूत कुराहरूमा महारत हासिल गर्नुभएको छ र LangChain प्रयोग गरेर परिष्कृत AI एप्लिकेसनहरू निर्माण गर्न सिक्नुभएको छ। जस्तै व्यापक शिक्षुता पूरा गरेपछि, तपाईंले सीपहरूको पर्याप्त उपकरण किट प्राप्त गर्नुभएको छ। आउनुहोस् तपाईंले के हासिल गर्नुभएको छ समीक्षा गरौं।
 
-> 🎯 **स्मरण गर्नुहोस्**: LangChain जस्ता AI फ्रेमवर्कहरू तपाईंको जटिलता लुकाउने, सुविधाले भरिएको उत्कृष्ट साथी हुन्। जब तपाईंलाई संवाद स्मृति, उपकरण कलिङ चाहिन्छ, वा धेरै AI मोडेलहरूसँग काम गर्नुपर्छ, यो उत्तम विकल्प हो।  
+### तपाईंले के सिक्नुभयो
 
-**AI एकीकरणको लागि निर्णय फ्रेमवर्क:**  
+**मुख्य फ्रेमवर्क अवधारणाहरू:**
+- **फ्रेमवर्क लाभहरू**: फ्रेमवर्कहरूलाई प्रत्यक्ष API कलहरू भन्दा कहिले छनोट गर्ने भन्ने कुरा बुझ्दै
+- **LangChain आधारभूत कुरा**: AI मोडेल जडान सेटअप र कन्फिगर गर्दै
+- **सन्देश प्रकारहरू**: संरचित संवादहरूको लागि `SystemMessage`, `HumanMessage`, र `AIMessage` प्रयोग गर्दै
+
+**उन्नत विशेषताहरू:**
+- **उपकरण कल**: उन्नत AI क्षमताहरूको लागि अनुकूल उपकरणहरू सिर्जना र एकीकरण गर्दै
+- **संवाद स्मृति**: बहु संवाद मोडहरूमा सन्दर्भ कायम राख्दै
+- **स्ट्रिमिङ प्रतिक्रियाहरू**: वास्तविक-समय प्रतिक्रिया वितरण कार्यान्वयन गर्दै
+- **प्रम्प्ट टेम्प्लेटहरू**: पुनः प्रयोगयोग्य, गतिशील प्रम्प्टहरू निर्माण गर्दै
+- **संरचित आउटपुट**: निरन्तर, पार्स गर्न मिल्ने AI प्रतिक्रियाहरू सुनिश्चित गर्दै
+- **एम्बेडिङ्स**: अर्थपूर्ण खोज र दस्तावेज प्रक्रिया क्षमताहरू सिर्जना गर्दै
+
+**व्यावहारिक अनुप्रयोगहरू:**
+- **पूर्ण एप्लिकेसन निर्माण**: उत्पादन-तयार एप्लिकेसनहरूमा धेरै सुविधाहरू संयोजन गर्दै
+- **त्रुटि व्यवस्थापन**: बलियो त्रुटि व्यवस्थापन र प्रमाणीकरण कार्यान्वयन गर्दै
+- **उपकरण एकीकरण**: AI क्षमताहरू विस्तार गर्ने अनुकूल उपकरणहरू सिर्जना गर्दै
+
+### मुख्य निष्कर्षहरू
+
+> 🎯 **स्मरण गर्नुहोस्**: LangChain जस्ता AI फ्रेमवर्कहरू आधारभूत रूपमा तपाईंको जटिलता लुकाउने, सुविधा-प्याक गरिएको सबैभन्दा राम्रो साथी हुन्। तिनीहरू उत्तम छन् जब तपाईंलाई संवाद स्मृति, उपकरण कल, वा धेरै AI मोडेलहरूसँग काम गर्न आवश्यक छ।
+
+**AI एकीकरणको लागि निर्णय फ्रेमवर्क:**
 
 ```mermaid
 flowchart TD
@@ -645,45 +1009,45 @@ flowchart TD
     G --> K[LangChain basic chat]
     H --> L[LangChain with tools, memory, agents]
 ```
-  
-### अब यहाँबाट कहाँ जाने?  
 
-**अहिले नै निर्माण सुरु गर्नुहोस्:**  
-- यी अवधारणाहरू लिनुहोस् र तपाईंलाई उत्साहित गर्ने केही निर्माण गर्नुहोस्!  
-- LangChain मार्फत विभिन्न AI मोडेलहरूसँग खेल्नुहोस् - यो AI मोडेलहरूको खेल मैदानजस्तै हो  
-- तपाईंको काम वा परियोजनाहरूमा सामना गर्ने वास्तविक समस्याहरू समाधान गर्ने उपकरणहरू सिर्जना गर्नुहोस्  
+### अब तपाईं कहाँ जानुहुन्छ?
+
+**अहिले नै निर्माण सुरु गर्नुहोस्:**
+- यी अवधारणाहरू लिई केही निर्माण गर्नुहोस् जसले तपाईंलाई उत्साहित बनाउँछ!
+- LangChain मार्फत विभिन्न AI मोडेलहरूसँग खेल्नुहोस् - यो AI मोडेलहरूको खेल मैदान जस्तै छ
+- उपकरणहरू सिर्जना गर्नुहोस् जसले तपाईंको काम वा परियोजनाहरूमा वास्तविक समस्याहरू समाधान गर्छ
 
-**अर्को स्तरको लागि तयार हुनुहुन्छ?**  
-- **AI एजेन्टहरू**: जटिल कार्यहरू आफैं योजना र कार्यान्वयन गर्न सक्ने AI प्रणालीहरू निर्माण गर्नुहोस्  
-- **RAG (Retrieval-Augmented Generation)**: AI लाई तपाईंको आफ्नै ज्ञान आधारहरूसँग संयोजन गर्दै सुपर-पावर अनुप्रयोगहरू सिर्जना गर्नुहोस्  
-- **मल्टी-मोडल AI**: पाठ, छवि, र अडियो सबैसँग काम गर्दै - सम्भावनाहरू अनन्त छन्!  
-- **उत्पादन परिनियोजन**: तपाईंको AI अनुप्रयोगहरू स्केल गर्ने र वास्तविक संसारमा तिनीहरूलाई अनुगमन गर्ने तरिका सिक्नुहोस्  
+**अर्को स्तरको लागि तयार?**
+- **AI एजेन्टहरू**: AI प्रणालीहरू निर्माण गर्नुहोस् जसले आफैं जटिल कार्यहरू योजना बनाउन र कार्यान्वयन गर्न सक्छ
+- **RAG (रिट्रिभल-अग्मेन्टेड जेनेरेसन)**: AI लाई तपाईंको आफ्नै ज्ञान आधारहरूसँग संयोजन गरेर सुपर-पावर एप्लिकेसनहरू निर्माण गर्नुहोस्
+- **बहु-मोडल AI**: पाठ, छवि, र अडियो सबै सँगै काम गर्नुहोस् - सम्भावनाहरू असीमित छन्!
+- **उत्पादन परिनियोजन**: आफ्नो AI एप्लिकेसनहरू स्केल गर्ने र वास्तविक संसारमा तिनीहरूलाई अनुगमन गर्ने तरिका सिक्नुहोस्
 
-**समुदायमा सामेल हुनुहोस्:**  
-- LangChain समुदाय अद्यावधिक रहन र उत्कृष्ट अभ्यासहरू सिक्नको लागि शानदार छ  
-- GitHub Models तपाईंलाई अत्याधुनिक AI क्षमताहरूमा पहुँच दिन्छ - प्रयोग गर्नको लागि उत्तम  
-- विभिन्न प्रयोग केसहरूसँग अभ्यास गर्दै जानुहोस् - प्रत्येक परियोजनाले तपाईंलाई नयाँ कुरा सिकाउँछ  
+**समुदायमा सामेल हुनुहोस्:**
+- LangChain समुदाय अद्यावधिक रहन र उत्कृष्ट अभ्यासहरू सिक्नको लागि शानदार छ
+- GitHub मोडेलहरूले तपाईंलाई अत्याधुनिक AI क्षमताहरूमा पहुँच दिन्छ - प्रयोग गर्नको लागि उत्तम
+- विभिन्न प्रयोग केसहरूसँग अभ्यास गर्दै राख्नुहोस् - प्रत्येक परियोजनाले तपाईंलाई नयाँ कुरा सिकाउँछ
 
-अब तपाईंले बौद्धिक, संवादात्मक अनुप्रयोगहरू निर्माण गर्ने ज्ञान प्राप्त गर्नुभएको छ जसले मानिसहरूलाई वास्तविक समस्याहरू समाधान गर्न मद्दत गर्न सक्छ। पुनर्जागरणका शिल्पकारहरूले कलात्मक दृष्टि र प्राविधिक सीपलाई संयोजन गरेजस्तै, तपाईंले अब AI क्षमताहरूलाई व्यावहारिक अनुप्रयोगसँग मिलाउन सक्नुहुन्छ। प्रश्न यो हो: तपाईं के सिर्जना गर्नुहुन्छ? 🚀  
+अब तपाईंसँग बौद्धिक, संवादात्मक एप्लिकेसनहरू निर्माण गर्ने ज्ञान छ जसले मानिसहरूलाई वास्तविक समस्याहरू समाधान गर्न मद्दत गर्न सक्छ। जस्तै पुनर्जागरणका कारीगरहरूले कलात्मक दृष्टि र प्राविधिक सीपलाई संयोजन गरे, तपाईंले अब AI क्षमताहरूलाई व्यावहारिक अनुप्रयोगसँग संयोजन गर्न सक्नुहुन्छ। प्रश्न यो हो: तपाईं के सिर्जना गर्नुहुन्छ? 🚀
 
-## GitHub Copilot Agent Challenge 🚀  
+## GitHub Copilot एजेन्ट चुनौती 🚀
 
-Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:  
+एजेन्ट मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** धेरै LangChain सुविधाहरू समावेश गर्ने उन्नत AI-संचालित कोड समीक्षा सहायक निर्माण गर्नुहोस् जसमा उपकरण कलिङ, संरचित आउटपुट, र संवाद स्मृति समावेश छ ताकि कोड सबमिशनहरूमा व्यापक प्रतिक्रिया प्रदान गर्न सकियोस्।  
+**विवरण:** एक उन्नत AI-संचालित कोड समीक्षा सहायक निर्माण गर्नुहोस् जसले उपकरण कल, संरचित आउटपुट, र संवाद स्मृति सहित धेरै LangChain सुविधाहरू संयोजन गर्दछ ताकि कोड सबमिशनहरूमा व्यापक प्रतिक्रिया प्रदान गर्न सकियोस्।
 
-**प्रम्प्ट:** `CodeReviewAssistant` कक्षा सिर्जना गर्नुहोस् जसले कार्यान्वयन गर्छ:  
-1. कोड जटिलता विश्लेषण गर्ने र सुधारको सुझाव दिने उपकरण  
-2. कोडलाई उत्कृष्ट अभ्यासहरूसँग जाँच गर्ने उपकरण  
-3. Pydantic मोडेलहरू प्रयोग गरेर निरन्तर समीक्षा स्वरूपको लागि संरचित आउटपुट  
-4. समीक्षा सत्रहरू ट्र्याक गर्न संवाद स्मृति  
-5. मुख्य च्याट इन्टरफेस जसले कोड सबमिशनहरू ह्यान्डल गर्न सक्छ र विस्तृत, कार्यान्वयन योग्य प्रतिक्रिया प्रदान गर्न सक्छ  
+**प्रम्प्ट:** `CodeReviewAssistant` कक्षा सिर्जना गर्नुहोस् जसले कार्यान्वयन गर्छ:
+1. कोड जटिलता विश्लेषण गर्ने र सुधारको सुझाव दिने उपकरण
+2. कोडलाई उत्कृष्ट अभ्यासहरूसँग जाँच गर्ने उपकरण
+3. संरचित आउटपुटको लागि Pydantic मोडेलहरू प्रयोग गरेर निरन्तर समीक्षा ढाँचा
+4. समीक्षा सत्रहरू ट्र्याक गर्न संवाद स्मृति
+5. मुख्य च्याट इन्टरफेस जसले कोड सबमिशनहरू ह्यान्डल गर्न सक्छ र विस्तृत, कार्यान्वयन योग्य प्रतिक्रिया प्रदान गर्न सक्छ
 
-सहायकले धेरै प्रोग्रामिङ भाषाहरूमा कोड समीक्षा गर्न सक्षम हुनुपर्छ, सत्रमा धेरै कोड सबमिशनहरूमा सन्दर्भ कायम राख्नुपर्छ, र संक्षेप स्कोरहरू र विस्तृत सुधार सुझावहरू दुवै प्रदान गर्नुपर्छ।  
+सहायकले बहु प्रोग्रामिङ भाषाहरूमा कोड समीक्षा गर्न सक्षम हुनुपर्छ, सत्रमा बहु कोड सबमिशनहरूमा सन्दर्भ कायम राख्नुपर्छ, र सारांश स्कोरहरू र विस्तृत सुधार सुझावहरू दुवै प्रदान गर्नुपर्छ।
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।  
+[एजेन्ट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषामा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/2-js-basics/1-data-types/README.md b/translations/ne/2-js-basics/1-data-types/README.md
index fda4200fd6..2bbc4807a0 100644
--- a/translations/ne/2-js-basics/1-data-types/README.md
+++ b/translations/ne/2-js-basics/1-data-types/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d0092f6533ae3ec3adad5b5ece68efaf",
-  "translation_date": "2025-10-22T16:38:32+00:00",
+  "original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
+  "translation_date": "2025-11-03T15:11:19+00:00",
   "source_file": "2-js-basics/1-data-types/README.md",
   "language_code": "ne"
 }
@@ -10,18 +10,35 @@ CO_OP_TRANSLATOR_METADATA:
 # जाभास्क्रिप्ट आधारभूत: डाटा प्रकारहरू
 
 ![जाभास्क्रिप्ट आधारभूत - डाटा प्रकारहरू](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ne.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
+> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
+
+```mermaid
+journey
+    title Your JavaScript Data Types Adventure
+    section Foundation
+      Variables & Constants: 5: You
+      Declaration Syntax: 4: You
+      Assignment Concepts: 5: You
+    section Core Types
+      Numbers & Math: 4: You
+      Strings & Text: 5: You
+      Booleans & Logic: 4: You
+    section Apply Knowledge
+      Type Conversion: 4: You
+      Real-world Examples: 5: You
+      Best Practices: 5: You
+```
 
-डाटा प्रकारहरू जाभास्क्रिप्टको आधारभूत अवधारणाहरू मध्ये एक हुन्, जुन तपाईंले लेख्ने प्रत्येक प्रोग्राममा भेट्नुहुनेछ। डाटा प्रकारहरूलाई प्राचीन अलेक्जान्ड्रिया पुस्तकालयका पुस्तकपालहरूले प्रयोग गरेको फाइलिङ प्रणाली जस्तै सोच्नुहोस् – उनीहरूले कविता, गणित, र ऐतिहासिक अभिलेखहरू समेट्ने स्क्रोलहरूका लागि विशिष्ट स्थानहरू राखेका थिए। जाभास्क्रिप्टले जानकारीलाई विभिन्न प्रकारका डाटामा वर्गीकृत गरेर यस्तै तरिकाले व्यवस्थित गर्दछ।
+डाटा प्रकारहरू जाभास्क्रिप्टको आधारभूत अवधारणाहरू मध्ये एक हो जुन तपाईंले लेख्ने प्रत्येक प्रोग्राममा भेट्नुहुनेछ। डाटा प्रकारहरूलाई अलेक्जान्ड्रिया शहरका प्राचीन पुस्तकालयका पुस्तकहरू वर्गीकरण गर्ने प्रणाली जस्तै सोच्नुहोस् – उनीहरूले कविता, गणित, र ऐतिहासिक अभिलेखहरू समेट्ने स्क्रोलहरूका लागि विशेष स्थानहरू राखेका थिए। जाभास्क्रिप्टले विभिन्न प्रकारका डाटाहरूलाई वर्गीकृत गरेर यस्तै तरिकाले जानकारी व्यवस्थित गर्दछ।
 
-यस पाठमा, हामी जाभास्क्रिप्टलाई काम गर्न बनाउने मुख्य डाटा प्रकारहरू अन्वेषण गर्नेछौं। तपाईंले नम्बरहरू, पाठ, सत्य/झुटो मानहरू कसरी ह्यान्डल गर्ने सिक्नुहुनेछ, र किन सही प्रकारको चयन गर्नु तपाईंको प्रोग्रामहरूको लागि आवश्यक छ भन्ने कुरा बुझ्नुहुनेछ। यी अवधारणाहरू सुरुमा अमूर्त लाग्न सक्छन्, तर अभ्यासले तिनीहरूलाई स्वाभाविक बनाउँछ।
+यस पाठमा, हामी जाभास्क्रिप्टलाई काम गर्न बनाउने मुख्य डाटा प्रकारहरूको अन्वेषण गर्नेछौं। तपाईंले नम्बरहरू, पाठ, सत्य/झुटो मानहरू कसरी ह्यान्डल गर्ने र किन सही प्रकार चयन गर्नु महत्त्वपूर्ण छ भन्ने कुरा बुझ्नुहुनेछ। यी अवधारणाहरू सुरुमा केही जटिल लाग्न सक्छन्, तर अभ्यासले गर्दा यी स्वाभाविक हुनेछन्।
 
-डाटा प्रकारहरू बुझ्दा जाभास्क्रिप्टको अन्य सबै कुरा धेरै स्पष्ट हुनेछ। जस्तै वास्तुकारहरूले क्याथेड्रल निर्माण गर्नुअघि विभिन्न निर्माण सामग्रीहरू बुझ्न आवश्यक छ, यी आधारभूत कुराहरूले तपाईंले अगाडि निर्माण गर्ने सबै कुरालाई समर्थन गर्नेछन्।
+डाटा प्रकारहरू बुझ्नाले जाभास्क्रिप्टको अन्य सबै कुरा धेरै स्पष्ट बनाउँछ। जस्तै वास्तुकारहरूले क्याथेड्रल निर्माण गर्नु अघि विभिन्न निर्माण सामग्रीहरू बुझ्न आवश्यक छ, यी आधारभूत कुराहरूले तपाईंले अगाडि निर्माण गर्ने सबै कुरालाई समर्थन गर्नेछ।
 
-## प्रि-लेक्चर क्विज
-[प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/)
+## पाठ अघि क्विज
+[पाठ अघि क्विज](https://ff-quizzes.netlify.app/web/)
 
-यो पाठ जाभास्क्रिप्टको आधारभूत कुरा समेट्छ, जुन वेबमा अन्तरक्रियात्मकता प्रदान गर्ने भाषा हो।
+यो पाठ जाभास्क्रिप्टको आधारभूत कुराहरू समेट्छ, जुन वेबमा अन्तरक्रियात्मकता प्रदान गर्ने भाषा हो।
 
 > तपाईं यो पाठ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) मा लिन सक्नुहुन्छ!
 
@@ -29,26 +46,58 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![जाभास्क्रिप्टमा डाटा प्रकारहरू](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "जाभास्क्रिप्टमा डाटा प्रकारहरू")
 
-> 🎥 माथिका छविहरूमा क्लिक गरेर भेरिएबल र डाटा प्रकारहरूबारे भिडियोहरू हेर्नुहोस्
-
-आउनुहोस्, भेरिएबलहरू र तिनीहरूमा भरिने डाटा प्रकारहरूबाट सुरु गरौं!
+> 🎥 माथिका तस्बिरहरूमा क्लिक गरेर भेरिएबलहरू र डाटा प्रकारहरूबारे भिडियोहरू हेर्नुहोस्
+
+आउनुहोस्, भेरिएबलहरू र तिनीहरूमा राखिने डाटा प्रकारहरूबाट सुरु गरौं!
+
+```mermaid
+mindmap
+  root((JavaScript Data))
+    Variables
+      let myVar
+      const PI = 3.14
+      var oldStyle
+    Primitive Types
+      number
+        42
+        3.14
+        -5
+      string
+        "Hello"
+        'World'
+        `Template`
+      boolean
+        true
+        false
+      undefined
+      null
+    Operations
+      Arithmetic
+        + - * / %
+      String Methods
+        concatenation
+        template literals
+      Type Conversion
+        implicit
+        explicit
+```
 
 ## भेरिएबलहरू
 
-भेरिएबलहरू प्रोग्रामिङमा आधारभूत निर्माण ब्लकहरू हुन्। जस्तै मध्ययुगीन रसायनशास्त्रीहरूले विभिन्न पदार्थहरू भण्डारण गर्न लेबल गरिएको जारहरू प्रयोग गर्थे, भेरिएबलहरूले तपाईंलाई जानकारी भण्डारण गर्न र त्यसलाई वर्णनात्मक नाम दिन अनुमति दिन्छ ताकि तपाईं पछि यसलाई सन्दर्भ गर्न सक्नुहुन्छ। कसैको उमेर सम्झनु छ? `age` नामको भेरिएबलमा भण्डारण गर्नुहोस्। प्रयोगकर्ताको नाम ट्र्याक गर्न चाहनुहुन्छ? `userName` नामको भेरिएबलमा राख्नुहोस्।
+भेरिएबलहरू प्रोग्रामिङको आधारभूत निर्माण ब्लकहरू हुन्। जस्तै मध्यकालीन रसायनशास्त्रीहरूले विभिन्न पदार्थहरू भण्डारण गर्न लेबल गरिएको जारहरू प्रयोग गर्थे, भेरिएबलहरूले तपाईंलाई जानकारी भण्डारण गर्न र त्यसलाई पछि सन्दर्भ गर्न वर्णनात्मक नाम दिन अनुमति दिन्छ। कसैको उमेर सम्झनु छ? `age` नामको भेरिएबलमा राख्नुहोस्। प्रयोगकर्ताको नाम ट्र्याक गर्न चाहनुहुन्छ? `userName` नामको भेरिएबलमा राख्नुहोस्।
 
 हामी जाभास्क्रिप्टमा भेरिएबलहरू सिर्जना गर्ने आधुनिक दृष्टिकोणमा ध्यान केन्द्रित गर्नेछौं। यहाँ तपाईंले सिक्ने प्रविधिहरू भाषा विकास र प्रोग्रामिङ समुदायद्वारा विकसित गरिएको उत्कृष्ट अभ्यासहरूको प्रतिनिधित्व गर्दछ।
 
-भेरिएबल सिर्जना र **घोषणा** गर्ने निम्न प्रकारको सिंट्याक्स छ **[keyword] [name]**। यो दुई भागहरू मिलेर बनेको छ:
+भेरिएबल सिर्जना र **घोषणा** गर्ने निम्नलिखित सिन्ट्याक्स छ **[keyword] [name]**। यो दुई भागहरू मिलेर बनेको छ:
 
 - **कीवर्ड**। परिवर्तन गर्न सकिने भेरिएबलहरूको लागि `let` प्रयोग गर्नुहोस्, वा स्थिर रहने मानहरूको लागि `const` प्रयोग गर्नुहोस्।
-- **भेरिएबलको नाम**, यो तपाईंले आफैं चयन गर्ने वर्णनात्मक नाम हो।
+- **भेरिएबल नाम**, यो तपाईंले आफैं चयन गर्ने वर्णनात्मक नाम हो।
 
-✅ `let` कीवर्ड ES6 मा परिचय गराइएको थियो र यसले तपाईंको भेरिएबललाई _ब्लक स्कोप_ दिन्छ। `var` कीवर्डको सट्टा `let` वा `const` प्रयोग गर्न सिफारिस गरिन्छ। हामी भविष्यका भागहरूमा ब्लक स्कोपहरू थप गहिरो रूपमा कभर गर्नेछौं।
+✅ `let` कीवर्ड ES6 मा परिचय गराइएको थियो र तपाईंको भेरिएबललाई _ब्लक स्कोप_ दिन्छ। `let` वा `const` प्रयोग गर्न सिफारिस गरिन्छ पुरानो `var` कीवर्डको सट्टा। हामी भविष्यका भागहरूमा ब्लक स्कोपहरू थप गहिरो रूपमा कभर गर्नेछौं।
 
 ### कार्य - भेरिएबलहरूसँग काम गर्ने
 
-1. **भेरिएबल घोषणा गर्नुहोस्**। आउनुहोस्, हाम्रो पहिलो भेरिएबल सिर्जना गरौं:
+1. **भेरिएबल घोषणा गर्नुहोस्**। आउनुहोस् हाम्रो पहिलो भेरिएबल सिर्जना गरेर सुरु गरौं:
 
     ```javascript
     let myVariable;
@@ -70,9 +119,9 @@ CO_OP_TRANSLATOR_METADATA:
    - भेरिएबलले अब यो मान समावेश गर्दछ, undefined नभई
    - तपाईं आफ्नो कोडमा `myVariable` प्रयोग गरेर यो मान सन्दर्भ गर्न सक्नुहुन्छ
 
-   > नोट: यस पाठमा `=` को प्रयोगले "असाइनमेन्ट अपरेटर" को प्रयोगलाई जनाउँछ, जुन भेरिएबलमा मान सेट गर्न प्रयोग गरिन्छ। यसले समानता जनाउँदैन।
+   > नोट: यस पाठमा `=` को प्रयोगले "असाइनमेन्ट अपरेटर" को प्रयोगलाई जनाउँछ, जसले भेरिएबलमा मान सेट गर्न प्रयोग गरिन्छ। यसले समानता जनाउँदैन।
 
-3. **स्मार्ट तरिकाले गर्नुहोस्**। वास्तवमा, आउनुहोस् ती दुई चरणहरूलाई मिलाउँ:
+3. **स्मार्ट तरिकाले गर्नुहोस्**। वास्तवमा, आउनुहोस् ती दुई चरणहरूलाई संयोजन गरौं:
 
     ```javascript
     let myVariable = 123;
@@ -81,28 +130,56 @@ CO_OP_TRANSLATOR_METADATA:
     **यो दृष्टिकोण अधिक प्रभावकारी छ:**
     - तपाईं एकै वक्तव्यमा भेरिएबल घोषणा गर्दै र मान असाइन गर्दै हुनुहुन्छ
     - यो विकासकर्ताहरू बीचको मानक अभ्यास हो
-    - यसले कोडको लम्बाइ घटाउँछ जबकि स्पष्टता कायम राख्छ
+    - यसले कोडको लम्बाइ घटाउँछ र स्पष्टता कायम राख्छ
 
-4. **आफ्नो विचार परिवर्तन गर्नुहोस्**। यदि हामीले भिन्न नम्बर भण्डारण गर्न चाह्यौं भने के हुन्छ?
+4. **आफ्नो विचार परिवर्तन गर्नुहोस्**। यदि हामीले फरक नम्बर भण्डारण गर्न चाह्यौं भने के हुन्छ?
 
    ```javascript
    myVariable = 321;
    ```
 
    **पुनः असाइनमेन्ट बुझ्दै:**
-   - भेरिएबलले अब 321 समावेश गर्दछ, 123 को सट्टा
-   - अघिल्लो मान प्रतिस्थापित हुन्छ – भेरिएबलहरूले एक पटकमा मात्र एक मान भण्डारण गर्छन्
-   - यो परिवर्तनशीलता `let` द्वारा घोषणा गरिएका भेरिएबलहरूको मुख्य विशेषता हो
+   - भेरिएबलले अब 123 को सट्टा 321 समावेश गर्दछ
+   - अघिल्लो मान प्रतिस्थापित गरिएको छ – भेरिएबलहरूले एक पटकमा मात्र एक मान भण्डारण गर्छन्
+   - यो परिवर्तनशीलता `let` द्वारा घोषणा गरिएको भेरिएबलहरूको मुख्य विशेषता हो
+
+   ✅ प्रयास गर्नुहोस्! तपाईं आफ्नो ब्राउजरमै जाभास्क्रिप्ट लेख्न सक्नुहुन्छ। ब्राउजर विन्डो खोल्नुहोस् र डेभलपर टूल्समा जानुहोस्। कन्सोलमा तपाईंले एक प्रम्प्ट पाउनुहुनेछ; `let myVariable = 123` टाइप गर्नुहोस्, रिटर्न थिच्नुहोस्, त्यसपछि `myVariable` टाइप गर्नुहोस्। के हुन्छ? नोट गर्नुहोस्, तपाईंले यी अवधारणाहरू थप पाठहरूमा सिक्नुहुनेछ।
+
+### 🧠 **भेरिएबल मास्टरी चेक: सहज महसुस गर्दै**
+
+**आउनुहोस्, भेरिएबलहरूको बारेमा तपाईं कत्तिको सहज महसुस गर्दै हुनुहुन्छ हेर्नुहोस्:**
+- के तपाईं भेरिएबल घोषणा र असाइन गर्ने बीचको फरक व्याख्या गर्न सक्नुहुन्छ?
+- यदि तपाईंले भेरिएबल घोषणा गर्नु अघि प्रयोग गर्न खोज्नुभयो भने के हुन्छ?
+- तपाईं कहिले `let` को सट्टा `const` चयन गर्नुहुन्छ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> Declared: let myVar
+    Declared --> Assigned: myVar = 123
+    Assigned --> Reassigned: myVar = 456
+    Assigned --> [*]: Variable ready!
+    Reassigned --> [*]: Updated value
+    
+    note right of Declared
+        Variable exists but
+        has no value (undefined)
+    end note
+    
+    note right of Assigned
+        Variable contains
+        the value 123
+    end note
+```
 
-   ✅ प्रयास गर्नुहोस्! तपाईं आफ्नो ब्राउजरमै जाभास्क्रिप्ट लेख्न सक्नुहुन्छ। ब्राउजर विन्डो खोल्नुहोस् र डेभलपर टूल्समा जानुहोस्। कन्सोलमा तपाईंले एक प्रम्प्ट पाउनुहुनेछ; `let myVariable = 123` टाइप गर्नुहोस्, रिटर्न थिच्नुहोस्, त्यसपछि `myVariable` टाइप गर्नुहोस्। के हुन्छ? नोट गर्नुहोस्, तपाईंले यी अवधारणाहरू आगामी पाठहरूमा थप सिक्नुहुनेछ।
+> **छोटो सुझाव**: भेरिएबलहरूलाई लेबल गरिएको भण्डारण बक्सहरू जस्तै सोच्नुहोस्। तपाईं बक्स सिर्जना गर्नुहुन्छ (`let`), त्यसमा केही राख्नुहुन्छ (`=`), र आवश्यक परेमा सामग्री परिवर्तन गर्न सक्नुहुन्छ!
 
 ## स्थिरांकहरू
 
-कहिलेकाहीं तपाईंलाई प्रोग्रामको कार्यान्वयनको क्रममा कहिल्यै परिवर्तन गर्न नहुने जानकारी भण्डारण गर्न आवश्यक हुन्छ। स्थिरांकहरू प्राचीन ग्रीसमा युक्लिडले स्थापना गरेका गणितीय सिद्धान्तहरू जस्तै हुन् – एकपटक प्रमाणित र दस्तावेज गरिएको, तिनीहरू भविष्यको सन्दर्भका लागि स्थिर रहन्छन्।
+कहिलेकाहीं तपाईंलाई प्रोग्रामको कार्यान्वयनको क्रममा कहिल्यै परिवर्तन गर्न नहुने जानकारी भण्डारण गर्न आवश्यक हुन्छ। स्थिरांकहरू प्राचीन ग्रीसका गणितीय सिद्धान्तहरू जस्तै हुन् – एकपटक प्रमाणित र दस्तावेज गरिएको, तिनीहरू भविष्यको सन्दर्भका लागि स्थिर रहन्छन्।
 
-स्थिरांकहरू भेरिएबलहरू जस्तै काम गर्छन्, तर एउटा महत्त्वपूर्ण प्रतिबन्धका साथ: एकपटक तपाईंले तिनीहरूको मान असाइन गरेपछि, यसलाई परिवर्तन गर्न सकिँदैन। यो अपरिवर्तनीयताले तपाईंको प्रोग्राममा महत्त्वपूर्ण मानहरूमा अनियमित संशोधनहरू रोक्न मद्दत गर्दछ।
+स्थिरांकहरू भेरिएबलहरू जस्तै काम गर्छन्, तर एउटा महत्त्वपूर्ण प्रतिबन्धका साथ: एकपटक तपाईंले तिनीहरूको मान असाइन गरेपछि, यसलाई परिवर्तन गर्न सकिँदैन। यो अपरिवर्तनीयताले तपाईंको प्रोग्राममा महत्त्वपूर्ण मानहरूमा अनियन्त्रित परिवर्तनहरू रोक्न मद्दत गर्दछ।
 
-स्थिरांकको घोषणा र सुरुवात भेरिएबलको जस्तै अवधारणाहरू अनुसरण गर्दछ, `const` कीवर्डको अपवादका साथ। स्थिरांकहरू सामान्यतया सबै क्याप्स अक्षरहरूमा घोषणा गरिन्छ।
+स्थिरांकको घोषणा र आरम्भ भेरिएबलको जस्तै अवधारणाहरू अनुसरण गर्दछ, `const` कीवर्डको अपवादको साथ। स्थिरांकहरू सामान्यतया सबै क्याप्स अक्षरहरूमा घोषणा गरिन्छ।
 
 ```javascript
 const MY_VARIABLE = 123;
@@ -126,11 +203,11 @@ const MY_VARIABLE = 123;
       ```
 
    **तपाईंले सम्झनुपर्ने कुरा:**
-   - **पुनः असाइन गर्न प्रयासहरू** त्रुटि उत्पन्न गर्छ
-   - **महत्त्वपूर्ण मानहरूलाई** अनियमित परिवर्तनबाट बचाउँछ
+   - **पुनः असाइन गर्ने प्रयासहरू** स्थिरांकमा त्रुटि उत्पन्न गर्छ
+   - **महत्त्वपूर्ण मानहरूलाई** अनियन्त्रित परिवर्तनबाट जोगाउँछ
    - **प्रोग्रामभरि** मानलाई स्थिर राख्छ
- 
-   **वस्तुको सन्दर्भ सुरक्षित छ** - निम्न अनुमति छैन:
+
+   **अवजेक्ट सन्दर्भ सुरक्षित छ** - निम्न अनुमति छैन:
    
       ```javascript
       const obj = { a: 3 };
@@ -138,11 +215,11 @@ const MY_VARIABLE = 123;
       ```
 
    **यी अवधारणाहरू बुझ्दै:**
-   - **सम्पूर्ण वस्तुलाई** नयाँसँग प्रतिस्थापन गर्न रोक्छ
-   - **मूल वस्तुको सन्दर्भलाई** सुरक्षित राख्छ
-   - **मेमोरीमा वस्तुको पहिचानलाई** कायम राख्छ
+   - **सम्पूर्ण वस्तु प्रतिस्थापन गर्नबाट रोक्छ**
+   - **मूल वस्तुको सन्दर्भलाई सुरक्षित राख्छ**
+   - **मेमोरीमा वस्तुको पहिचान कायम राख्छ**
 
-    **वस्तुको मान सुरक्षित छैन** - निम्न अनुमति छ:
+    **अवजेक्ट मान सुरक्षित छैन** - निम्न अनुमति छ:
     
       ```javascript
       const obj = { a: 3 };
@@ -150,27 +227,27 @@ const MY_VARIABLE = 123;
       ```
 
       **यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
-      - **वस्तु भित्रको सम्पत्ति मानलाई** परिवर्तन गर्छ
-      - **उही वस्तुको सन्दर्भलाई** कायम राख्छ
-      - **देखाउँछ** कि वस्तुको सामग्री परिवर्तन गर्न सकिन्छ जबकि सन्दर्भ स्थिर रहन्छ
+      - **वस्तु भित्रको सम्पत्ति मानलाई परिवर्तन गर्छ**
+      - **उही वस्तु सन्दर्भ राख्छ**
+      - **देखाउँछ कि वस्तु सामग्री परिवर्तन गर्न सकिन्छ जबकि सन्दर्भ स्थिर रहन्छ**
 
-   > नोट गर्नुहोस्, `const` ले सन्दर्भलाई पुनः असाइनमेन्टबाट सुरक्षित राख्छ। मान _अपरिवर्तनीय_ भने होइन र परिवर्तन गर्न सकिन्छ, विशेष गरी यदि यो वस्तु जस्तो जटिल संरचना हो भने।
+   > नोट, `const` ले सन्दर्भलाई पुनः असाइनमेन्टबाट सुरक्षित राख्छ। मान _अपरिवर्तनीय_ भने होइन र परिवर्तन गर्न सकिन्छ, विशेष गरी यदि यो वस्तु जस्तो जटिल संरचना हो भने।
 
 ## डाटा प्रकारहरू
 
-जाभास्क्रिप्टले जानकारीलाई विभिन्न प्रकारका डाटामा वर्गीकृत गर्दछ। यो अवधारणा प्राचीन विद्वानहरूले ज्ञानलाई वर्गीकृत गरेको तरिकालाई प्रतिबिम्बित गर्दछ – अरिस्टोटलले विभिन्न प्रकारका तर्कहरू बीच भिन्नता देखाए, थाहा पाएर कि तार्किक सिद्धान्तहरू कविता, गणित, र प्राकृतिक दर्शनमा समान रूपमा लागू गर्न सकिँदैन।
+जाभास्क्रिप्टले जानकारीलाई विभिन्न वर्गहरूमा व्यवस्थित गर्दछ जसलाई डाटा प्रकारहरू भनिन्छ। यो अवधारणाले प्राचीन विद्वानहरूले ज्ञान वर्गीकरण गरेको तरिकालाई प्रतिबिम्बित गर्दछ – अरिस्टोटलले विभिन्न प्रकारका तर्कहरू छुट्याए, थाहा पाएर कि तार्किक सिद्धान्तहरू कविता, गणित, र प्राकृतिक दर्शनमा समान रूपमा लागू गर्न सकिँदैन।
 
-डाटा प्रकारहरू महत्त्वपूर्ण छन् किनभने विभिन्न कार्यहरू विभिन्न प्रकारका जानकारीसँग काम गर्छन्। जस्तै तपाईंले कसैको नाममा अंकगणित गर्न सक्नुहुन्न वा गणितीय समीकरणलाई वर्णमालामा राख्न सक्नुहुन्न, जाभास्क्रिप्टले प्रत्येक कार्यको लागि उपयुक्त डाटा प्रकार आवश्यक छ। यसलाई बुझ्दा त्रुटिहरू रोक्न मद्दत गर्दछ र तपाईंको कोडलाई बढी भरपर्दो बनाउँछ।
+डाटा प्रकारहरू महत्त्वपूर्ण छन् किनभने विभिन्न कार्यहरू विभिन्न प्रकारका जानकारीहरूसँग काम गर्छन्। जस्तै तपाईंले कसैको नाममा अंकगणित गर्न सक्नुहुन्न वा गणितीय समीकरणलाई वर्णमालामा राख्न सक्नुहुन्न, जाभास्क्रिप्टले प्रत्येक कार्यका लागि उपयुक्त डाटा प्रकार आवश्यक गर्दछ। यसलाई बुझ्नाले त्रुटिहरू रोक्छ र तपाईंको कोडलाई बढी भरपर्दो बनाउँछ।
 
-भेरिएबलहरूले नम्बर र पाठ जस्ता विभिन्न प्रकारका मानहरू भण्डारण गर्न सक्छन्। यी विभिन्न प्रकारका मानहरूलाई **डाटा प्रकार** भनिन्छ। डाटा प्रकारहरू सफ्टवेयर विकासको महत्त्वपूर्ण भाग हुन् किनभने यसले विकासकर्ताहरूलाई कोड कसरी लेख्नुपर्छ र सफ्टवेयर कसरी चल्नुपर्छ भन्ने निर्णय गर्न मद्दत गर्दछ। साथै, केही डाटा प्रकारहरूमा अनौठो विशेषताहरू हुन्छन् जसले मानमा थप जानकारी परिवर्तन गर्न वा निकाल्न मद्दत गर्दछ।
+भेरिएबलहरूले नम्बरहरू र पाठ जस्ता विभिन्न प्रकारका मानहरू भण्डारण गर्न सक्छन्। यी विभिन्न प्रकारका मानहरूलाई **डाटा प्रकार** भनिन्छ। डाटा प्रकारहरू सफ्टवेयर विकासको महत्त्वपूर्ण हिस्सा हुन् किनभने यसले विकासकर्ताहरूलाई कोड कसरी लेख्नुपर्छ र सफ्टवेयर कसरी चल्नुपर्छ भन्ने निर्णय गर्न मद्दत गर्दछ। साथै, केही डाटा प्रकारहरूमा अनौठो विशेषताहरू हुन्छन् जसले मानमा थप जानकारी परिवर्तन गर्न वा निकाल्न मद्दत गर्दछ।
 
-✅ डाटा प्रकारहरूलाई जाभास्क्रिप्ट डाटा प्रिमिटिभहरू पनि भनिन्छ, किनभने तिनीहरू भाषा द्वारा प्रदान गरिएका सबैभन्दा तल्लो स्तरका डाटा प्रकारहरू हुन्। त्यहाँ 7 प्रिमिटिभ डाटा प्रकारहरू छन्: string, number, bigint, boolean, undefined, null, र symbol। एक मिनेट लिनुहोस् र यी प्रत्येक प्रिमिटिभहरूले के प्रतिनिधित्व गर्न सक्छन् भनेर कल्पना गर्नुहोस्। `zebra` के हो? `0` कस्तो छ? `true`?
+✅ डाटा प्रकारहरूलाई जाभास्क्रिप्ट डाटा प्रिमिटिभहरू पनि भनिन्छ, किनभने तिनीहरू भाषा द्वारा प्रदान गरिएका सबैभन्दा तल्लो स्तरका डाटा प्रकारहरू हुन्। त्यहाँ ७ प्रिमिटिभ डाटा प्रकारहरू छन्: string, number, bigint, boolean, undefined, null र symbol। यी प्रत्येक प्रिमिटिभहरूले के प्रतिनिधित्व गर्न सक्छन् भनेर कल्पना गर्न एक मिनेट समय लिनुहोस्। `zebra` के हो? `0` कस्तो छ? `true`?
 
 ### नम्बरहरू
 
-नम्बरहरू जाभास्क्रिप्टमा सबैभन्दा सरल डाटा प्रकार हुन्। चाहे तपाईं 42 जस्ता पूर्णांकहरूसँग काम गर्दै हुनुहुन्छ, 3.14 जस्ता दशमलवहरू, वा -5 जस्ता नकारात्मक नम्बरहरू, जाभास्क्रिप्टले तिनीहरूलाई समान रूपमा ह्यान्डल गर्छ।
+नम्बरहरू जाभास्क्रिप्टमा सबैभन्दा सरल डाटा प्रकार हुन्। तपाईं 42 जस्ता पूर्णांक, 3.14 जस्ता दशमलव, वा -5 जस्ता नकारात्मक संख्याहरूमा काम गरिरहनु भएको भए पनि, जाभास्क्रिप्टले तिनीहरूलाई समान रूपमा ह्यान्डल गर्छ।
 
-हाम्रो अघिल्लो भेरिएबल सम्झनुहोस्? त्यो 123 वास्तवमा नम्बर डाटा प्रकार थियो:
+हाम्रो पहिलेको भेरिएबल सम्झनुहोस्? त्यो 123 हामीले भण्डारण गरेको वास्तवमा नम्बर डाटा प्रकार थियो:
 
 ```javascript
 let myVariable = 123;
@@ -183,29 +260,69 @@ let myVariable = 123;
 
 भेरिएबलहरूले सबै प्रकारका नम्बरहरू भण्डारण गर्न सक्छन्, जसमा दशमलव वा नकारात्मक नम्बरहरू समावेश छन्। नम्बरहरू अंकगणित अपरेटरहरूसँग पनि प्रयोग गर्न सकिन्छ, जुन [अर्को खण्डमा](../../../../2-js-basics/1-data-types) समेटिएको छ।
 
+```mermaid
+flowchart LR
+    A["🔢 Numbers"] --> B["➕ Addition"]
+    A --> C["➖ Subtraction"]
+    A --> D["✖️ Multiplication"]
+    A --> E["➗ Division"]
+    A --> F["📊 Remainder %"]
+    
+    B --> B1["1 + 2 = 3"]
+    C --> C1["5 - 3 = 2"]
+    D --> D1["4 * 3 = 12"]
+    E --> E1["10 / 2 = 5"]
+    F --> F1["7 % 3 = 1"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ### अंकगणित अपरेटरहरू
 
-अंकगणित अपरेटरहरूले तपाईंलाई जाभास्क्रिप्टमा गणितीय गणना गर्न अनुमति दिन्छ। यी अपरेटरहरूले गणितज्ञहरूले शताब्दीयौंदेखि प्रयोग गरेका समान सिद्धान्तहरू अनुसरण गर्छन् – अल-ख्वारिज्मी जस्ता विद्वानहरूको काममा देखा परेका समान प्रतीकहरू, जसले बीजगणितीय नोटेशन विकास गरे।
+अंकगणित अपरेटरहरूले तपाईंलाई जाभास्क्रिप्टमा गणितीय गणना गर्न अनुमति दिन्छ। यी अपरेटरहरूले गणितज्ञहरूले शताब्दीयौंदेखि प्रयोग गरेका समान सिद्धान्तहरू अनुसरण गर्छन् – अल-ख्वारिज्मी जस्ता विद्वानहरूले विकास गरेको बीजगणितीय नोटेशनमा देखा पर्ने समान प्रतीकहरू।
 
-अपरेटरहरूले परम्परागत गणितबाट अपेक्षित तरिकामा काम गर्छन्: थपका लागि प्लस, घटाउनेका लागि माइनस, आदि।
+अपरेटरहरूले परम्परागत गणितबाट अपेक्षित रूपमा काम गर्छन्: थप्नको लागि प्लस, घटाउनको लागि माइनस, र यस्तै।
 
 अंकगणित कार्यहरू गर्दा प्रयोग गर्न सकिने अपरेटरहरूको विभिन्न प्रकारहरू छन्, र केही यहाँ सूचीबद्ध छन्:
 
 | प्रतीक | विवरण                                                               | उदाहरण                          |
 | ------ | -------------------------------------------------------------------- | -------------------------------- |
-| `+`    | **थप**: दुई नम्बरहरूको योग गणना गर्छ                                | `1 + 2 //अपेक्षित उत्तर 3 हो`   |
-| `-`    | **घटाउने**: दुई नम्बरहरूको अन्तर गणना गर्छ                          | `1 - 2 //अपेक्षित उत्तर -1 हो`  |
-| `*`    | **गुणन**: दुई नम्बरहरूको गुणनफल गणना गर्छ                          | `1 * 2 //अपेक्षित उत्तर 2 हो`   |
-| `/`    | **भाग**: दुई नम्बरहरूको भागफल गणना गर्छ                            | `1 / 2 //अपेक्षित उत्तर 0.5 हो` |
-| `%`    | **बाकी**: दुई नम्बरहरूको भागबाट बाँकी गणना गर्छ                    | `1 % 2 //अपेक्षित उत्तर 1 हो`   |
+| `+`    | **थप**: दुई नम्बरहरूको योग गणना गर्छ                                | `1 + 2 //expected answer is 3`   |
+| `-`    | **घटाउ**: दुई नम्बरहरूको अन्तर गणना गर्छ                            | `1 - 2 //expected answer is -1`  |
+| `*`    | **गुणन**: दुई नम्बरहरूको गुणनफल गणना गर्छ                           | `1 * 2 //expected answer is 2`   |
+| `/`    | **भाग**: दुई नम्बरहरूको भागफल गणना गर्छ                             | `1 / 2 //expected answer is 0.5` |
+| `%`    | **बाकी**: दुई नम्बरहरूको भागबाट बाँकी गणना गर्छ                    | `1 % 2 //expected answer is 1`   |
 
 ✅ प्रयास गर्नुहोस्! आफ्नो ब्राउजरको कन्सोलमा अंकगणित कार्य प्रयास गर्नुहोस्। नतिजाले तपाईंलाई अचम्मित बनाउँछ?
 
+### 🧮 **गणित सीप जाँच: आत्मविश्वासका साथ गणना गर्दै**
+
+**आफ्नो अंकगणित बुझाइको परीक्षण गर्नुहोस्:**
+- `/` (भाग) र `%` (बाकी) बीचको फरक के हो?
+- तपाईं अनुमान गर्न सक्नुहुन्छ कि `10 % 3` के बराबर छ? (संकेत: यो 3.33 होइन...)
+- किन बाँकी अपरेटर प्रोग्रामिङमा उपयोगी हुन सक्छ?
+
+```mermaid
+pie title "JavaScript Number Operations Usage"
+    "Addition (+)" : 35
+    "Subtraction (-)" : 20
+    "Multiplication (*)" : 20
+    "Division (/)" : 15
+    "Remainder (%)" : 10
+```
+
+> **वास्तविक संसारको जानकारी**: बाँकी अपरेटर (%) नम्बरहरू सम र विषम छन् कि छैनन् जाँच गर्न, ढाँचाहरू सिर्जना गर्न, वा एरेहरूमा चक्र चलाउन धेरै उपयोगी छ!
+
 ### स्ट्रिङहरू
 
-जाभास्क्रिप्टमा, पाठ्य डाटा स्ट्रिङको रूपमा प्रतिनिधित्व गरिन्छ। "स्ट्रिङ" शब्द अक्षरहरूलाई अनुक्रममा जोडिएको अवधारणाबाट आएको हो, जस्तै मध्ययुगीन मठहरूमा लेखकहरूले अक्षरहरू जोडेर शब्द र वाक्यहरू बनाउँथे।
+जाभास्क्रिप्टमा, पाठ्य डाटालाई स्ट्रिङको रूपमा प्रतिनिधित्व गरिन्छ। "स्ट्रिङ" शब्द अक्षरहरूलाई अनुक्रममा जोड्ने अवधारणाबाट आएको हो, जस्तै मध्यकालीन मठहरूमा लेखकहरूले शब्दहरू र वाक्यहरू बनाउन अक्षरहरू जोड्थे।
 
-स्ट्रिङहरू वेब विकासको आधारभूत हुन्। वेबसाइटमा देखाइने प्रत्येक पाठ – प्रयोगकर्ता नामहरू, बटन लेबलहरू, त्रुटि सन्देशहरू, सामग्री – स्ट्रिङ डाटाको रूपमा ह्यान्डल गरिन्छ। स्ट्रिङहरू बुझ्नु कार्यात्मक प्रयोगकर्ता इन्टरफेसहरू सिर्जना गर्न आवश्यक छ।
+स्ट्रिङहरू वेब विकासका लागि आधारभूत हुन्। वेबसाइटमा देखाइने प्रत्येक पाठ – प्रयोगकर्ता नामहरू, बटन लेबलहरू, त्रुटि सन्देशहरू, सामग्री – स्ट्रिङ डाटा रूपमा ह्यान्डल गरिन्छ। कार्यात्मक प्रयोगकर्ता इन्टरफेसहरू सिर्जना गर्न स्ट्रिङहरू बुझ्न आवश्यक छ।
 
 स्ट्रिङहरू अक्षरहरूको सेट हुन् जुन एकल वा दोहोरो उद्धरण चिन्हहरू बीचमा हुन्छन्।
 
@@ -215,45 +332,84 @@ let myVariable = 123;
 let myString = 'This is a string value stored in a variable';
 ```
 
-**यी अवधारणाहरू बुझ्दै:**
-- **एकल उद्धरण `'` वा दोहोरो उद्धरण `"` प्रयोग गरेर स्ट्रिङहरू परिभाषित गर्छ
-- **पाठ्य डाटा भण्डारण गर्छ** जसमा अक्षर, नम्बर, र प्रतीकहरू समावेश हुन सक्छन्
-- **भेरिएबलहरूमा स्ट्रिङ मानहरू असाइन गर्छ** ताकि पछि प्रयोग गर्न सकियोस्
-- **पाठ र भेरिएबल नामहरू छुट्याउन उद्धरण आवश्यक छ**
+**यी अवध
+दुई वा बढी स्ट्रिङहरूलाई **जोड्न**, वा एकसाथ मिलाउन, `+` अपरेटर प्रयोग गर्नुहोस्।
 
-स्ट्रिङ लेख्दा उद्धरण प्रयोग गर्न सम्झनुहोस्, अन्यथा जाभास्क्रिप्टले यसलाई भेरिएबल नाम मान्नेछ।
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
 
-### स्ट्रिङहरूलाई स्वरूप दिनु
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+```
 
-स्ट्रिङ हेरफेरले तपाईंलाई पाठ्य तत्वहरू जोड्न, भेरिएबलहरू समावेश गर्न, र प्रोग्रामको अवस्थाको प्रतिक्रिया दिने गतिशील सामग्री सिर्जना गर्न अनुमति दिन्छ। यो प्रविधिले तपाईंलाई प्रोग्रामेटिक रूपमा पाठ निर्माण गर्न सक्षम बनाउँछ।
+**चरणबद्ध रूपमा, यहाँ के भइरहेको छ:**
+- **जोड्छ** धेरै स्ट्रिङहरू `+` अपरेटर प्रयोग गरेर
+- पहिलो उदाहरणमा स्ट्रिङहरूलाई सिधै बिना स्पेस जोड्छ
+- **स्पेस क्यारेक्टरहरू** `" "` स्ट्रिङहरू बीचमा थप्छ ताकि पढ्न सजिलो होस्
+- **विराम चिन्हहरू** जस्तै कमाहरू थप्छ ताकि सही ढाँचामा बनाइयोस्
 
-प्रायः तपाईंलाई धेरै स्ट्रिङहरू जोड्न आवश्यक हुन्छ – यो प्रक्रिया कन्क्याटेनेसन भनिन्छ।
+✅ किन `1 + 1 = 2` हुन्छ JavaScript मा, तर `'1' + '1' = 11` हुन्छ? सोच्नुहोस्। अनि `'1' + 1` को बारेमा के भन्नुहुन्छ?
 
-दुई वा बढी स्ट्रिङहरूलाई **कन्क्याटेनेट** गर्न, वा तिनीहरूलाई जोड्न, `+` अपरेटर प्रयोग गर्नुहोस्।
+**टेम्प्लेट लिटरलहरू** स्ट्रिङहरूलाई ढाँचाबद्ध गर्ने अर्को तरिका हो, जहाँ उद्धरणको सट्टा ब्याकटिक प्रयोग गरिन्छ। कुनै पनि साधारण पाठ नभएको कुरा `${ }` प्लेसहोल्डरभित्र राख्नुपर्छ। यसमा स्ट्रिङ हुन सक्ने कुनै पनि भेरिएबलहरू समावेश छन्।
 
 ```javascript
 let myString1 = "Hello";
 let myString2 = "World";
 
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
 ```
 
-**चरणबद्ध रूपमा, यहाँ के भइरहेको छ:**
-- **धेरै स्ट्रिङहरूलाई `+` अपरेटर प्रयोग गरेर जोड्छ**
-- **पहिलो उदाहरणमा
-तपाईं आफ्नो फर्म्याटिङ लक्ष्यहरू कुनै पनि विधि प्रयोग गरेर प्राप्त गर्न सक्नुहुन्छ, तर टेम्प्लेट लिटरलहरूले कुनै पनि खाली ठाउँ र लाइन ब्रेकलाई सम्मान गर्नेछन्।
+**प्रत्येक भागलाई बुझौं:**
+- **ब्याकटिकहरू** `` ` `` प्रयोग गर्दछ नियमित उद्धरणको सट्टा टेम्प्लेट लिटरलहरू बनाउन
+- `${}` प्लेसहोल्डर सिन्ट्याक्स प्रयोग गरेर भेरिएबलहरू सिधै **समावेश** गर्दछ
+- **स्पेसहरू र ढाँचालाई** ठीक त्यस्तै जोगाउँछ जस्तो लेखिएको छ
+- **जटिल स्ट्रिङहरू** भेरिएबलहरूसँग बनाउनको लागि सफा तरिका प्रदान गर्दछ
+
+तपाईं आफ्नो ढाँचाबद्ध लक्ष्यहरू कुनै पनि विधिबाट प्राप्त गर्न सक्नुहुन्छ, तर टेम्प्लेट लिटरलहरूले कुनै पनि स्पेस र लाइन ब्रेकलाई सम्मान गर्दछ।
+
+✅ कहिले टेम्प्लेट लिटरल प्रयोग गर्नुहुन्छ र कहिले साधारण स्ट्रिङ?
+
+### 🔤 **स्ट्रिङ मास्टरी चेक: टेक्स्ट म्यानिपुलेसन आत्मविश्वास**
+
+**आफ्नो स्ट्रिङ सीप मूल्यांकन गर्नुहोस्:**
+- के तपाईं व्याख्या गर्न सक्नुहुन्छ किन `'1' + '1'` बराबर `'11'` हुन्छ `2` को सट्टा?
+- कुन स्ट्रिङ विधि तपाईंलाई बढी पढ्न सजिलो लाग्छ: कन्काटेनेसन वा टेम्प्लेट लिटरल?
+- के हुन्छ यदि तपाईं स्ट्रिङ वरिपरि उद्धरणहरू बिर्सनुहुन्छ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> PlainText: "Hello"
+    [*] --> Variable: name = "Alice"
+    PlainText --> Concatenated: + " " + name
+    Variable --> Concatenated
+    PlainText --> Template: `Hello ${name}`
+    Variable --> Template
+    Concatenated --> Result: "Hello Alice"
+    Template --> Result
+    
+    note right of Concatenated
+        Traditional method
+        More verbose
+    end note
+    
+    note right of Template
+        Modern ES6 syntax
+        Cleaner & more readable
+    end note
+```
 
-✅ टेम्प्लेट लिटरल कहिले प्रयोग गर्ने र साधारण स्ट्रिङ कहिले प्रयोग गर्ने?
+> **प्रो टिप**: टेम्प्लेट लिटरलहरू सामान्यतया जटिल स्ट्रिङ निर्माणको लागि रुचाइन्छन् किनभने तिनीहरू बढी पढ्न सजिलो हुन्छन् र बहु-लाइन स्ट्रिङहरूलाई सुन्दर रूपमा ह्यान्डल गर्छन्!
 
 ### बूलियनहरू
 
-बूलियनहरू सबैभन्दा सरल डेटा प्रकारको प्रतिनिधित्व गर्छन्: तिनीहरूले केवल दुई मानहरू राख्न सक्छन् – `true` वा `false`। यो द्विआधारी तर्क प्रणाली १९ औं शताब्दीका गणितज्ञ जर्ज बूलको काममा आधारित छ, जसले बूलियन बीजगणित विकास गरेका थिए।
+बूलियनहरू सबैभन्दा सरल डेटा रूपलाई प्रतिनिधित्व गर्छन्: तिनीहरूले केवल दुई मानहरू राख्न सक्छन् – `true` वा `false`। यो द्विपक्षीय तर्क प्रणाली १९ औं शताब्दीका गणितज्ञ जर्ज बूलको काममा आधारित छ जसले बूलियन एल्जेब्रा विकास गरे।
 
-तिनीहरूको सरलताका बाबजुद, बूलियनहरू प्रोग्राम तर्कका लागि अत्यावश्यक छन्। तिनीहरूले तपाईंको कोडलाई सर्तहरूमा आधारित निर्णय लिन सक्षम बनाउँछन् – प्रयोगकर्ता लगइन भएको छ कि छैन, बटन क्लिक गरिएको छ कि छैन, वा निश्चित मापदण्डहरू पूरा भएका छन् कि छैन।
+तिनीहरूको सरलताका बाबजुद, बूलियनहरू प्रोग्राम तर्कको लागि अत्यावश्यक छन्। तिनीहरूले तपाईंको कोडलाई सर्तहरूमा आधारित निर्णय लिन सक्षम बनाउँछन् – चाहे प्रयोगकर्ता लग इन भएको छ, बटन क्लिक गरिएको छ, वा निश्चित मापदण्डहरू पूरा भएका छन्।
 
-बूलियनहरू केवल दुई मानहरू हुन सक्छन्: `true` वा `false`। बूलियनहरूले निर्णय लिन मद्दत गर्छन् कि कुन लाइनको कोड निश्चित सर्तहरू पूरा हुँदा चलाउनुपर्छ। धेरै अवस्थामा, [अपरेटरहरू](../../../../2-js-basics/1-data-types) बूलियनको मान सेट गर्न मद्दत गर्छन् र तपाईंले प्रायः देख्नुहुनेछ र भेरिएबलहरू आरम्भ गरिएको वा तिनीहरूको मान अपरेटरको साथ अपडेट गरिएको लेख्नुहुनेछ।
+बूलियनहरू केवल दुई मानहरू हुन सक्छन्: `true` वा `false`। बूलियनहरूले सर्तहरू पूरा हुँदा कुन लाइनको कोड चलाउनुपर्छ भन्ने निर्णय गर्न मद्दत गर्छ। धेरै अवस्थामा, [अपरेटरहरू](../../../../2-js-basics/1-data-types) बूलियनको मान सेट गर्न मद्दत गर्छन् र तपाईं अक्सर भेरिएबलहरू आरम्भ गरिएको वा तिनीहरूको मानहरू अपरेटरको साथ अपडेट गरिएको देख्नुहुनेछ।
 
 ```javascript
 let myTrueBool = true;
@@ -261,30 +417,104 @@ let myFalseBool = false;
 ```
 
 **माथिको उदाहरणमा, हामीले:**
-- **सिर्जना गरेका छौं** एउटा भेरिएबल जसले बूलियन मान `true` भण्डारण गर्छ
-- **प्रदर्शन गरेका छौं** कसरी बूलियन मान `false` भण्डारण गर्ने
-- **प्रयोग गरेका छौं** ठ्याक्कै कीवर्डहरू `true` र `false` (कुनै उद्धरण आवश्यक छैन)
-- **तयार गरेका छौं** यी भेरिएबलहरू सर्तात्मक कथनहरूमा प्रयोग गर्न
+- **भेरिएबल सिर्जना गरेका छौं** जसले बूलियन मान `true` भण्डारण गर्छ
+- बूलियन मान `false` भण्डारण गर्ने तरिका **प्रदर्शन** गरेका छौं
+- **ठीक शब्दहरू** `true` र `false` प्रयोग गरेका छौं (कुनै उद्धरण आवश्यक छैन)
+- यी भेरिएबलहरू सर्तात्मक कथनहरूमा प्रयोगको लागि **तयार** गरेका छौं
+
+✅ कुनै भेरिएबललाई 'truthy' मान्न सकिन्छ यदि यो बूलियन `true` मा मूल्याङ्कन हुन्छ। रोचक कुरा, JavaScript मा, [सबै मानहरू truthy हुन्छन् जबसम्म तिनीहरू falsy भनेर परिभाषित गरिएको छैन](https://developer.mozilla.org/docs/Glossary/Truthy)।
+
+```mermaid
+flowchart LR
+    A["🔘 Boolean Values"] --> B["true"]
+    A --> C["false"]
+    
+    D["Truthy Values"] --> D1["'hello'"]
+    D --> D2["42"]
+    D --> D3["[]"]
+    D --> D4["{}"]
+    
+    E["Falsy Values"] --> E1["false"]
+    E --> E2["0"]
+    E --> E3["''"]
+    E --> E4["null"]
+    E --> E5["undefined"]
+    E --> E6["NaN"]
+    
+    style B fill:#e8f5e8
+    style C fill:#ffebee
+    style D fill:#e3f2fd
+    style E fill:#fff3e0
+```
+
+### 🎯 **बूलियन तर्क चेक: निर्णय लिने सीप**
+
+**आफ्नो बूलियन बुझाइ परीक्षण गर्नुहोस्:**
+- किन तपाईंलाई लाग्छ JavaScript मा `true` र `false` बाहेक "truthy" र "falsy" मानहरू छन्?
+- तपाईं अनुमान गर्न सक्नुहुन्छ कुन falsy हो: `0`, `"0"`, `[]`, `"false"`?
+- बूलियनहरू प्रोग्राम फ्लो नियन्त्रण गर्न कसरी उपयोगी हुन सक्छन्?
+
+```mermaid
+pie title "Common Boolean Use Cases"
+    "Conditional Logic" : 40
+    "User State" : 25
+    "Feature Toggles" : 20
+    "Validation" : 15
+```
 
-✅ कुनै भेरिएबललाई 'truthy' मान्न सकिन्छ यदि यो बूलियन `true` मा मूल्याङ्कन हुन्छ। रोचक कुरा, JavaScript मा, [सबै मानहरू truthy हुन्छन् जबसम्म तिनीहरूलाई falsy भनेर परिभाषित गरिएको छैन](https://developer.mozilla.org/docs/Glossary/Truthy)।
+> **स्मरण गर्नुहोस्**: JavaScript मा, केवल ६ मानहरू falsy छन्: `false`, `0`, `""`, `null`, `undefined`, र `NaN`। बाँकी सबै truthy छन्!
 
 ---
 
+## 📊 **तपाईंको डेटा प्रकार टूलकिट सारांश**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Data Types"] --> B["📦 Variables"]
+    A --> C["🔢 Numbers"]
+    A --> D["📝 Strings"]
+    A --> E["🔘 Booleans"]
+    
+    B --> B1["let mutable"]
+    B --> B2["const immutable"]
+    
+    C --> C1["42, 3.14, -5"]
+    C --> C2["+ - * / %"]
+    
+    D --> D1["'quotes' or \\\"quotes\\\""]
+    D --> D2["`template literals`"]
+    
+    E --> E1["true or false"]
+    E --> E2["truthy vs falsy"]
+    
+    F["⚡ Key Concepts"] --> F1["Type matters for operations"]
+    F --> F2["JavaScript is dynamically typed"]
+    F --> F3["Variables can change types"]
+    F --> F4["Naming is case-sensitive"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ## GitHub Copilot Agent Challenge 🚀
 
-एजेन्ट मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** व्यक्तिगत जानकारी व्यवस्थापक सिर्जना गर्नुहोस् जसले तपाईंले यस पाठमा सिकेका सबै JavaScript डेटा प्रकारहरू प्रदर्शन गर्दछ र वास्तविक-विश्व डेटा परिदृश्यहरूलाई ह्यान्डल गर्दछ।
+**विवरण:** व्यक्तिगत जानकारी प्रबन्धक बनाउनुहोस् जसले तपाईंले यस पाठमा सिकेका सबै JavaScript डेटा प्रकारहरू प्रदर्शन गर्दछ र वास्तविक संसारको डेटा परिदृश्यहरूलाई ह्यान्डल गर्दछ।
 
-**प्रेरणा:** एउटा JavaScript प्रोग्राम बनाउनुहोस् जसले प्रयोगकर्ता प्रोफाइल वस्तु सिर्जना गर्छ जसमा समावेश छ: व्यक्तिको नाम (string), उमेर (number), विद्यार्थी स्थिति (boolean), मनपर्ने रंगहरूको array, र एउटा ठेगाना वस्तु जसमा सडक, शहर, र zip code गुणहरू छन्। प्रोफाइल जानकारी प्रदर्शन गर्न र व्यक्तिगत क्षेत्रहरू अपडेट गर्न कार्यहरू समावेश गर्नुहोस्। स्ट्रिङ कन्काटेनेशन, टेम्प्लेट लिटरल, उमेरसँग गणितीय अपरेसनहरू, र विद्यार्थी स्थितिको लागि बूलियन तर्क प्रदर्शन गर्न निश्चित गर्नुहोस्।
+**प्रेरणा:** एउटा JavaScript प्रोग्राम बनाउनुहोस् जसले प्रयोगकर्ता प्रोफाइल वस्तु सिर्जना गर्छ जसमा समावेश छ: व्यक्तिको नाम (स्ट्रिङ), उमेर (संख्या), विद्यार्थी स्थिति (बूलियन), मनपर्ने रंगहरूको सूची, र ठेगाना वस्तु जसमा सडक, शहर, र जिप कोड गुणहरू छन्। प्रोफाइल जानकारी प्रदर्शन गर्न र व्यक्तिगत क्षेत्रहरू अपडेट गर्न कार्यहरू समावेश गर्नुहोस्। स्ट्रिङ कन्काटेनेसन, टेम्प्लेट लिटरल, उमेरसँग गणितीय अपरेसनहरू, र विद्यार्थी स्थितिको लागि बूलियन तर्क प्रदर्शन गर्न सुनिश्चित गर्नुहोस्।
 
-[एजेन्ट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
 
 ## 🚀 चुनौती
 
-JavaScript मा केही व्यवहारहरू छन् जसले विकासकर्ताहरूलाई चकित पार्न सक्छ। यहाँ अन्वेषण गर्नको लागि एउटा क्लासिक उदाहरण छ: आफ्नो ब्राउजर कन्सोलमा यो टाइप गरेर हेर्नुहोस्: `let age = 1; let Age = 2; age == Age` र परिणाम अवलोकन गर्नुहोस्। यसले `false` फर्काउँछ – के तपाईं कारण पत्ता लगाउन सक्नुहुन्छ?
+JavaScript मा केही व्यवहारहरू छन् जसले विकासकर्ताहरूलाई चकित पार्न सक्छ। यहाँ अन्वेषण गर्नको लागि एक क्लासिक उदाहरण छ: यो तपाईंको ब्राउजर कन्सोलमा टाइप गर्नुहोस्: `let age = 1; let Age = 2; age == Age` र परिणाम अवलोकन गर्नुहोस्। यसले `false` फर्काउँछ – तपाईं किन निर्धारण गर्न सक्नुहुन्छ?
 
-यो JavaScript को धेरै व्यवहारहरू मध्ये एक हो जुन बुझ्न लायक छ। यी विचित्रताहरूको परिचितताले तपाईंलाई अधिक भरपर्दो कोड लेख्न र समस्याहरूलाई प्रभावकारी रूपमा डिबग गर्न मद्दत गर्नेछ।
+यो JavaScript को धेरै व्यवहारहरू मध्ये एक हो जुन बुझ्न लायक छ। यी विचित्रताहरूको परिचितताले तपाईंलाई अधिक विश्वसनीय कोड लेख्न र समस्याहरूलाई प्रभावकारी रूपमा डिबग गर्न मद्दत गर्नेछ।
 
 ## पोस्ट-व्याख्यान क्विज
 [पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app)
@@ -297,6 +527,64 @@ JavaScript मा केही व्यवहारहरू छन् जस
 
 [डेटा प्रकार अभ्यास](assignment.md)
 
+## 🚀 तपाईंको JavaScript डेटा प्रकार मास्टरी टाइमलाइन
+
+### ⚡ **तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा**
+- [ ] आफ्नो ब्राउजर कन्सोल खोल्नुहोस् र विभिन्न डेटा प्रकारका ३ भेरिएबलहरू सिर्जना गर्नुहोस्
+- [ ] चुनौती प्रयास गर्नुहोस्: `let age = 1; let Age = 2; age == Age` र किन false हो भनेर पत्ता लगाउनुहोस्
+- [ ] आफ्नो नाम र मनपर्ने नम्बरसँग स्ट्रिङ कन्काटेनेसन अभ्यास गर्नुहोस्
+- [ ] स्ट्रिङमा नम्बर थप्दा के हुन्छ परीक्षण गर्नुहोस्
+
+### 🎯 **तपाईंले यो घण्टामा पूरा गर्न सक्ने कुरा**
+- [ ] पोस्ट-पाठ क्विज पूरा गर्नुहोस् र कुनै पनि भ्रमित अवधारणाहरू समीक्षा गर्नुहोस्
+- [ ] दुई नम्बरहरू थप्ने, घटाउने, गुणा गर्ने, र भाग गर्ने एउटा सानो क्यालकुलेटर बनाउनुहोस्
+- [ ] टेम्प्लेट लिटरल प्रयोग गरेर एउटा साधारण नाम ढाँचाबद्धकर्ता बनाउनुहोस्
+- [ ] `==` र `===` तुलना अपरेटरहरूको बीचको भिन्नता अन्वेषण गर्नुहोस्
+- [ ] विभिन्न डेटा प्रकारहरू बीच रूपान्तरण अभ्यास गर्नुहोस्
+
+### 📅 **तपाईंको हप्ताको JavaScript आधार**
+- [ ] आत्मविश्वास र रचनात्मकतासँग असाइनमेन्ट पूरा गर्नुहोस्
+- [ ] सिकेका सबै डेटा प्रकारहरू प्रयोग गरेर व्यक्तिगत प्रोफाइल वस्तु बनाउनुहोस्
+- [ ] [CSS-Tricks बाट JavaScript अभ्यासहरू](https://css-tricks.com/snippets/javascript/) संग अभ्यास गर्नुहोस्
+- [ ] बूलियन तर्क प्रयोग गरेर एउटा साधारण फारम मान्यकर्ता बनाउनुहोस्
+- [ ] सूची र वस्तु डेटा प्रकारहरू (आगामी पाठहरूको पूर्वावलोकन) संग प्रयोग गर्नुहोस्
+- [ ] JavaScript समुदायमा सामेल हुनुहोस् र डेटा प्रकारहरूको बारेमा प्रश्नहरू सोध्नुहोस्
+
+### 🌟 **तपाईंको महिनाको रूपान्तरण**
+- [ ] ठूलो प्रोग्रामिङ परियोजनाहरूमा डेटा प्रकार ज्ञान समाहित गर्नुहोस्
+- [ ] वास्तविक अनुप्रयोगहरूमा प्रत्येक डेटा प्रकार कहिले र किन प्रयोग गर्ने बुझ्नुहोस्
+- [ ] अन्य प्रारम्भिक सिक्नेहरूलाई JavaScript आधारभूत कुरा बुझ्न मद्दत गर्नुहोस्
+- [ ] विभिन्न प्रकारका प्रयोगकर्ता डेटा प्रबन्ध गर्ने सानो अनुप्रयोग बनाउनुहोस्
+- [ ] उन्नत डेटा प्रकार अवधारणाहरू जस्तै प्रकार कोअर्सन र कडा समानता अन्वेषण गर्नुहोस्
+- [ ] खुला स्रोत JavaScript परियोजनाहरूमा प्रलेखन सुधारको साथ योगदान गर्नुहोस्
+
+### 🧠 **अन्तिम डेटा प्रकार मास्टरी चेक-इन**
+
+**तपाईंको JavaScript आधारभूत कुरा मनाउनुहोस्:**
+- कुन डेटा प्रकारले तपाईंलाई यसको व्यवहारको सन्दर्भमा सबैभन्दा चकित बनायो?
+- तपाईंलाई साथीलाई भेरिएबलहरू र स्थिरांकहरू व्याख्या गर्न कति सहज महसुस हुन्छ?
+- JavaScript को प्रकार प्रणालीको बारेमा तपाईंले पत्ता लगाएको सबैभन्दा रोचक कुरा के हो?
+- यी आधारभूत कुराहरूको साथ तपाईंले निर्माण गर्न सक्ने वास्तविक अनुप्रयोग के हो?
+
+```mermaid
+journey
+    title Your JavaScript Confidence Journey
+    section Today
+      Confused: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Understanding: 5: You
+      Building: 5: You
+    section Next Month
+      Problem Solving: 5: You
+      Teaching Others: 5: You
+      Real Projects: 5: You
+```
+
+> 💡 **तपाईंले आधारभूत कुरा निर्माण गर्नुभयो!** डेटा प्रकारहरू बुझ्नु भनेको कथाहरू लेख्नुअघि वर्णमाला सिक्न जस्तै हो। तपाईंले कहिल्यै लेख्ने प्रत्येक JavaScript प्रोग्रामले यी आधारभूत अवधारणाहरू प्रयोग गर्नेछ। तपाईंले अन्तरक्रियात्मक वेबसाइटहरू, गतिशील अनुप्रयोगहरू, र कोडको साथ वास्तविक समस्याहरू समाधान गर्नको लागि निर्माण ब्लकहरू पाउनुभएको छ। JavaScript को अद्भुत संसारमा स्वागत छ! 🎉
+
 ---
 
 **अस्वीकरण**:  
diff --git a/translations/ne/2-js-basics/2-functions-methods/README.md b/translations/ne/2-js-basics/2-functions-methods/README.md
index 8ef7f9e14b..55b6438a1d 100644
--- a/translations/ne/2-js-basics/2-functions-methods/README.md
+++ b/translations/ne/2-js-basics/2-functions-methods/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "ec43b53e8e015cdabfd3ad877b3c28e5",
-  "translation_date": "2025-10-22T16:39:23+00:00",
+  "original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
+  "translation_date": "2025-11-03T15:13:02+00:00",
   "source_file": "2-js-basics/2-functions-methods/README.md",
   "language_code": "ne"
 }
@@ -10,34 +10,84 @@ CO_OP_TRANSLATOR_METADATA:
 # जाभास्क्रिप्ट आधारभूत: मेथड्स र फङ्सन्स
 
 ![जाभास्क्रिप्ट आधारभूत - फङ्सन्स](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ne.png)
-> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
+
+```mermaid
+journey
+    title Your JavaScript Functions Adventure
+    section Foundation
+      Function Syntax: 5: You
+      Calling Functions: 4: You
+      Parameters & Arguments: 5: You
+    section Advanced Concepts
+      Return Values: 4: You
+      Default Parameters: 5: You
+      Function Composition: 4: You
+    section Modern JavaScript
+      Arrow Functions: 5: You
+      Anonymous Functions: 4: You
+      Higher-Order Functions: 5: You
+```
 
 ## प्रि-लेक्चर क्विज
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app)
 
-बारम्बार एउटै कोड लेख्नु प्रोग्रामिङको सबैभन्दा सामान्य निराशाजनक पक्षहरूमध्ये एक हो। फङ्सन्सले यो समस्या समाधान गर्छन्, जसले कोडलाई पुन: प्रयोग गर्न मिल्ने ब्लकहरूमा प्याकेज गर्न अनुमति दिन्छ। फङ्सन्सलाई हेनरी फोर्डको एसेम्बली लाइनलाई क्रान्तिकारी बनाउने मानकीकृत भागहरू जस्तै सोच्नुहोस् – एकपटक तपाईंले भरपर्दो कम्पोनेन्ट बनाउनु भयो भने, तपाईंले यसलाई जहाँ आवश्यक छ त्यहाँ पुन: प्रयोग गर्न सक्नुहुन्छ, सुरुबाट पुन: निर्माण नगरी।
+एकै कोड बारम्बार लेख्नु प्रोग्रामिङको सबैभन्दा सामान्य निराशाजनक पक्ष हो। फङ्सन्सले यो समस्या समाधान गर्छन् जसले कोडलाई पुनः प्रयोग गर्न मिल्ने ब्लकहरूमा प्याकेज गर्न अनुमति दिन्छ। फङ्सन्सलाई हेनरी फोर्डको असेंब्ली लाइनलाई क्रान्तिकारी बनाउने मानकीकृत भागहरू जस्तै सोच्नुहोस् – एकपटक तपाईंले भरपर्दो कम्पोनेन्ट बनाउनु भयो भने, तपाईंले यसलाई जहाँ आवश्यक छ त्यहाँ पुनः निर्माण नगरी प्रयोग गर्न सक्नुहुन्छ।
 
-फङ्सन्सले तपाईंलाई कोडका टुक्राहरूलाई प्याकेज गर्न अनुमति दिन्छ ताकि तपाईंले आफ्नो प्रोग्रामभरि तिनीहरूलाई पुन: प्रयोग गर्न सक्नुहुन्छ। एउटै तर्कलाई हरेक ठाउँमा प्रतिलिपि र पेस्ट गर्नुको सट्टा, तपाईंले एकपटक फङ्सन बनाउन सक्नुहुन्छ र जहाँ आवश्यक छ त्यहाँ कल गर्न सक्नुहुन्छ। यसले तपाईंको कोडलाई व्यवस्थित राख्छ र अपडेटहरू धेरै सजिलो बनाउँछ।
+फङ्सन्सले कोडका टुक्राहरूलाई एकसाथ बाँध्न अनुमति दिन्छ ताकि तपाईंले आफ्नो प्रोग्रामभरि तिनीहरूलाई पुनः प्रयोग गर्न सक्नुहुन्छ। एउटै तर्कलाई सबै ठाउँमा प्रतिलिपि गरेर टाँस्नुको सट्टा, तपाईंले एकपटक फङ्सन बनाउन सक्नुहुन्छ र जहाँ आवश्यक छ त्यहाँ कल गर्न सक्नुहुन्छ। यसले तपाईंको कोडलाई व्यवस्थित राख्छ र अपडेटहरू धेरै सजिलो बनाउँछ।
 
-यस पाठमा, तपाईंले आफ्नै फङ्सन्स कसरी बनाउने, तिनीहरूलाई जानकारी पास गर्ने, र उपयोगी नतिजा फिर्ता पाउने कुरा सिक्नुहुनेछ। तपाईंले फङ्सन्स र मेथड्सको बीचको भिन्नता पत्ता लगाउनुहुनेछ, आधुनिक सिन्ट्याक्स दृष्टिकोणहरू सिक्नुहुनेछ, र फङ्सन्सले अन्य फङ्सन्ससँग कसरी काम गर्न सक्छन् भन्ने देख्नुहुनेछ। हामी यी अवधारणाहरूलाई चरणबद्ध रूपमा निर्माण गर्नेछौं।
+यस पाठमा, तपाईंले आफ्नै फङ्सन्स कसरी बनाउने, तिनीहरूलाई जानकारी पास गर्ने, र उपयोगी परिणामहरू फिर्ता प्राप्त गर्ने सिक्नुहुनेछ। तपाईंले फङ्सन्स र मेथड्सको बीचको भिन्नता पत्ता लगाउनुहुनेछ, आधुनिक सिन्ट्याक्स दृष्टिकोणहरू सिक्नुहुनेछ, र फङ्सन्सले अन्य फङ्सन्ससँग कसरी काम गर्न सक्छन् भन्ने देख्नुहुनेछ। हामी यी अवधारणाहरू चरणबद्ध रूपमा निर्माण गर्नेछौं।
 
 [![मेथड्स र फङ्सन्स](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "मेथड्स र फङ्सन्स")
 
-> 🎥 माथिको तस्बिरमा क्लिक गरेर मेथड्स र फङ्सन्सको बारेमा भिडियो हेर्नुहोस्।
+> 🎥 माथिको तस्बिरमा क्लिक गर्नुहोस् मेथड्स र फङ्सन्सको बारेमा भिडियो हेर्न।
 
 > तपाईंले यो पाठ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) मा लिन सक्नुहुन्छ!
 
+```mermaid
+mindmap
+  root((JavaScript Functions))
+    Basic Concepts
+      Declaration
+        Traditional syntax
+        Arrow function syntax
+      Calling
+        Using parentheses
+        Parentheses required
+    Parameters
+      Input Values
+        Multiple parameters
+        Default values
+      Arguments
+        Values passed in
+        Can be any type
+    Return Values
+      Output Data
+        return statement
+        Exit function
+      Use Results
+        Store in variables
+        Chain functions
+    Advanced Patterns
+      Higher-Order
+        Functions as parameters
+        Callbacks
+      Anonymous
+        No name needed
+        Inline definition
+```
+
 ## फङ्सन्स
 
-फङ्सन भनेको कोडको एउटा आत्म-निहित ब्लक हो जसले विशेष कार्य गर्दछ। यसले तर्कलाई समेट्छ जुन तपाईंले आवश्यक पर्दा कार्यान्वयन गर्न सक्नुहुन्छ।
+फङ्सन भनेको एक स्व-समावेशित कोड ब्लक हो जसले विशिष्ट कार्य गर्दछ। यसले तर्कलाई समेट्छ जुन तपाईंले आवश्यक पर्दा कार्यान्वयन गर्न सक्नुहुन्छ।
 
-तपाईंको प्रोग्रामभरि एउटै कोड धेरै पटक लेख्नुको सट्टा, तपाईंले यसलाई फङ्सनमा प्याकेज गर्न सक्नुहुन्छ र जहाँ आवश्यक छ त्यहाँ कल गर्न सक्नुहुन्छ। यसले तपाईंको कोडलाई सफा राख्छ र अपडेटहरू धेरै सजिलो बनाउँछ। कल्पना गर्नुहोस्, यदि तपाईंले आफ्नो कोडबेसका २० विभिन्न स्थानहरूमा छरिएको तर्क परिवर्तन गर्नुपर्ने भयो भने कस्तो मर्मत चुनौती हुनेछ।
+तपाईंको प्रोग्रामभरि एउटै कोड बारम्बार लेख्नुको सट्टा, तपाईंले यसलाई फङ्सनमा प्याकेज गर्न सक्नुहुन्छ र जहाँ आवश्यक छ त्यहाँ फङ्सन कल गर्न सक्नुहुन्छ। यसले तपाईंको कोडलाई सफा राख्छ र अपडेटहरू धेरै सजिलो बनाउँछ। कल्पना गर्नुहोस् यदि तपाईंले आफ्नो कोडबेसका २० विभिन्न स्थानहरूमा फैलिएको तर्क परिवर्तन गर्नुपर्ने चुनौती सामना गर्नुपरेको छ भने।
 
-तपाईंको फङ्सन्सलाई वर्णनात्मक नाम दिनु महत्त्वपूर्ण छ। राम्रो नाम दिइएको फङ्सनले यसको उद्देश्य स्पष्ट रूपमा सञ्चार गर्दछ – जब तपाईंले `cancelTimer()` देख्नुहुन्छ, तपाईंले तुरुन्तै बुझ्नुहुन्छ कि यसले के गर्छ, जस्तै स्पष्ट रूपमा लेबल गरिएको बटनले तपाईंलाई क्लिक गर्दा के हुनेछ भन्ने कुरा बताउँछ।
+तपाईंको फङ्सन्सलाई वर्णनात्मक नाम दिनु महत्त्वपूर्ण छ। राम्रो नाम दिइएको फङ्सनले यसको उद्देश्य स्पष्ट रूपमा सञ्चार गर्दछ – जब तपाईंले `cancelTimer()` देख्नुहुन्छ, तपाईंले तुरुन्तै बुझ्नुहुन्छ कि यसले के गर्छ, जस्तै स्पष्ट रूपमा लेबल गरिएको बटनले तपाईंलाई बताउँछ कि तपाईंले क्लिक गर्दा के हुनेछ।
 
 ## फङ्सन बनाउने र कल गर्ने
 
-हामी फङ्सन कसरी बनाउने भन्ने कुरा अध्ययन गरौं। यसको सिन्ट्याक्सले एक सुसंगत ढाँचा पछ्याउँछ:
+आउनुहोस् फङ्सन कसरी बनाउने भनेर हेर्नुहोस्। सिन्ट्याक्सले एक सुसंगत ढाँचा पछ्याउँछ:
 
 ```javascript
 function nameOfFunction() { // function definition
@@ -47,11 +97,11 @@ function nameOfFunction() { // function definition
 
 यसलाई टुक्रा-टुक्रामा बुझौं:
 - `function` कीवर्डले जाभास्क्रिप्टलाई "हे, म फङ्सन बनाउँदैछु!" भन्छ।
-- `nameOfFunction` तपाईंले आफ्नो फङ्सनलाई दिने वर्णनात्मक नाम हो
-- कोष्ठक `()` मा तपाईंले प्यारामिटरहरू थप्न सक्नुहुन्छ (हामी चाँडै यसमा पुग्नेछौं)
-- कर्ली ब्रेसेस `{}` मा तपाईंले फङ्सन कल गर्दा चल्ने वास्तविक कोड हुन्छ
+- `nameOfFunction` तपाईंले आफ्नो फङ्सनलाई वर्णनात्मक नाम दिने ठाउँ हो।
+- कोष्ठक `()` तपाईंले प्यारामिटरहरू थप्न सक्ने ठाउँ हो (हामी चाँडै यसमा पुग्नेछौं)।
+- कर्ली ब्रेसेस `{}`ले वास्तविक कोड समावेश गर्दछ जुन तपाईंले फङ्सन कल गर्दा चल्छ।
 
-अब एउटा साधारण अभिवादन फङ्सन बनाऔं:
+आउनुहोस् एउटा साधारण अभिवादन फङ्सन बनाऔं र यसलाई कार्यमा हेर्नुहोस्:
 
 ```javascript
 function displayGreeting() {
@@ -61,31 +111,56 @@ function displayGreeting() {
 
 यो फङ्सनले "Hello, world!" कन्सोलमा प्रिन्ट गर्छ। एकपटक तपाईंले यसलाई परिभाषित गरेपछि, तपाईंले यसलाई आवश्यक पर्दा जति पटक पनि प्रयोग गर्न सक्नुहुन्छ।
 
-तपाईंको फङ्सन कार्यान्वयन गर्न (वा "कल" गर्न), यसको नाम लेख्नुहोस् र त्यसपछि कोष्ठक राख्नुहोस्। जाभास्क्रिप्टले तपाईंलाई फङ्सन परिभाषित गर्नु अघि वा पछि कल गर्न अनुमति दिन्छ – जाभास्क्रिप्ट इन्जिनले कार्यान्वयन क्रम सम्हाल्नेछ।
+तपाईंको फङ्सनलाई कार्यान्वयन गर्न (वा "कल" गर्न), यसको नाम लेख्नुहोस् र त्यसपछि कोष्ठक राख्नुहोस्। जाभास्क्रिप्टले तपाईंलाई फङ्सन परिभाषित गर्नु अघि वा पछि कल गर्न अनुमति दिन्छ – जाभास्क्रिप्ट इन्जिनले कार्यान्वयन क्रमलाई ह्यान्डल गर्नेछ।
 
 ```javascript
 // calling our function
 displayGreeting();
 ```
 
-जब तपाईंले यो लाइन चलाउनुहुन्छ, यसले तपाईंको `displayGreeting` फङ्सनभित्रको सबै कोड कार्यान्वयन गर्छ, र "Hello, world!" तपाईंको ब्राउजरको कन्सोलमा देखाउँछ। तपाईंले यो फङ्सन बारम्बार कल गर्न सक्नुहुन्छ।
+जब तपाईंले यो लाइन चलाउनुहुन्छ, यसले तपाईंको `displayGreeting` फङ्सनभित्रको सबै कोड कार्यान्वयन गर्छ, "Hello, world!" तपाईंको ब्राउजरको कन्सोलमा देखाउँछ। तपाईंले यो फङ्सन बारम्बार कल गर्न सक्नुहुन्छ।
+
+### 🧠 **फङ्सन आधारभूत जाँच: तपाईंको पहिलो फङ्सन्स निर्माण गर्दै**
+
+**आउनुहोस् तपाईंको आधारभूत फङ्सन्सको बारेमा कस्तो महसुस गर्दै हुनुहुन्छ हेर्नुहोस्:**
+- तपाईं फङ्सन परिभाषामा कर्ली ब्रेसेस `{}` किन प्रयोग गर्छौं भनेर व्याख्या गर्न सक्नुहुन्छ?
+- यदि तपाईंले `displayGreeting` कोष्ठक बिना लेख्नुभयो भने के हुन्छ?
+- तपाईंले एउटै फङ्सन बारम्बार कल गर्न किन चाहनुहुन्छ?
+
+```mermaid
+flowchart TD
+    A["✏️ Define Function"] --> B["📦 Package Code"]
+    B --> C["🏷️ Give it a Name"]
+    C --> D["📞 Call When Needed"]
+    D --> E["🔄 Reuse Anywhere"]
+    
+    F["💡 Benefits"] --> F1["No code repetition"]
+    F --> F2["Easy to maintain"]
+    F --> F3["Clear organization"]
+    F --> F4["Easier testing"]
+    
+    style A fill:#e3f2fd
+    style E fill:#e8f5e8
+    style F fill:#fff3e0
+```
+
+> **Note:** तपाईंले यी पाठहरूमा **मेथड्स** प्रयोग गर्दै हुनुहुन्छ। `console.log()` एउटा मेथड हो – मूलतः `console` वस्तुमा सम्बन्धित फङ्सन। मुख्य भिन्नता भनेको मेथड्स वस्तुमा जोडिएका हुन्छन्, जबकि फङ्सन्स स्वतन्त्र रूपमा उभिन्छन्। धेरै डेभलपर्सले अनौपचारिक कुराकानीमा यी शब्दहरू परस्पर प्रयोग गर्छन्।
 
-> **Note:** तपाईंले यी पाठहरूमा **मेथड्स** प्रयोग गर्दै आउनुभएको छ। `console.log()` एउटा मेथड हो – मूलतः `console` वस्तुमा सम्बन्धित फङ्सन। मुख्य भिन्नता भनेको मेथड्स वस्तुहरूसँग जोडिएका हुन्छन्, जबकि फङ्सन्स स्वतन्त्र रूपमा उभिन्छन्। धेरै विकासकर्ताहरूले यी शब्दहरूलाई अनौपचारिक कुराकानीमा परस्पर प्रयोग गर्छन्।
+### फङ्सनको राम्रो अभ्यासहरू
 
-### फङ्सनका उत्कृष्ट अभ्यासहरू
+यहाँ तपाईंलाई उत्कृष्ट फङ्सन्स लेख्न मद्दत गर्ने केही सुझावहरू छन्:
 
-यहाँ केही सुझावहरू छन् जसले तपाईंलाई उत्कृष्ट फङ्सन्स लेख्न मद्दत गर्छ:
 - तपाईंको फङ्सन्सलाई स्पष्ट, वर्णनात्मक नाम दिनुहोस् – तपाईंको भविष्यको स्वयम्ले तपाईंलाई धन्यवाद दिनेछ!
 - बहु-शब्द नामहरूको लागि **camelCasing** प्रयोग गर्नुहोस् (जस्तै `calculateTotal` को सट्टा `calculate_total`)
-- प्रत्येक फङ्सनलाई एउटा काम राम्रोसँग गर्न केन्द्रित राख्नुहोस्
+- प्रत्येक फङ्सनलाई एक काम राम्रोसँग गर्न केन्द्रित राख्नुहोस्
 
-## फङ्सनमा जानकारी पास गर्ने
+## फङ्सनमा जानकारी पास गर्दै
 
 हाम्रो `displayGreeting` फङ्सन सीमित छ – यसले सबैका लागि "Hello, world!" मात्र देखाउन सक्छ। प्यारामिटरहरूले फङ्सन्सलाई अझ लचिलो र उपयोगी बनाउँछन्।
 
-**प्यारामिटरहरू** प्लेसहोल्डर जस्तै काम गर्छन् जहाँ तपाईंले प्रत्येक पटक फङ्सन प्रयोग गर्दा फरक मानहरू राख्न सक्नुहुन्छ। यसरी, एउटै फङ्सनले प्रत्येक कलमा फरक जानकारीसँग काम गर्न सक्छ।
+**प्यारामिटरहरू** प्लेसहोल्डर जस्तै काम गर्छन् जहाँ तपाईंले प्रत्येक पटक फङ्सन प्रयोग गर्दा विभिन्न मानहरू राख्न सक्नुहुन्छ। यसरी, एउटै फङ्सनले प्रत्येक कलमा विभिन्न जानकारीसँग काम गर्न सक्छ।
 
-तपाईंले आफ्नो फङ्सन परिभाषित गर्दा प्यारामिटरहरू कोष्ठकभित्र सूचीबद्ध गर्नुहुन्छ, धेरै प्यारामिटरहरूलाई कमासँग छुट्याउनुहोस्:
+तपाईंले फङ्सन परिभाषा गर्दा कोष्ठकभित्र प्यारामिटरहरूको सूची बनाउनुहुन्छ, धेरै प्यारामिटरहरूलाई कमासँग छुट्याउनुहोस्:
 
 ```javascript
 function name(param, param2, param3) {
@@ -95,7 +170,7 @@ function name(param, param2, param3) {
 
 प्रत्येक प्यारामिटर प्लेसहोल्डर जस्तै काम गर्छ – जब कसैले तपाईंको फङ्सन कल गर्छ, तिनीहरूले वास्तविक मानहरू प्रदान गर्नेछन् जुन यी स्थानहरूमा प्लग गरिन्छ।
 
-अब हाम्रो अभिवादन फङ्सनलाई कसैको नाम स्वीकार गर्न अद्यावधिक गरौं:
+आउनुहोस् हाम्रो अभिवादन फङ्सनलाई कसैको नाम स्वीकार गर्न अद्यावधिक गरौं:
 
 ```javascript
 function displayGreeting(name) {
@@ -104,7 +179,7 @@ function displayGreeting(name) {
 }
 ```
 
-ध्यान दिनुहोस् हामीले कसरी ब्याकटिक्स (`` ` ``) र `${}` प्रयोग गरेर नामलाई सन्देशमा सिधै राखिरहेका छौं – यसलाई टेम्प्लेट लिटेरल भनिन्छ, र यो भेरिएबलहरू मिसाएर स्ट्रिङहरू बनाउनको लागि धेरै उपयोगी तरिका हो।
+ध्यान दिनुहोस् हामीले कसरी ब्याकटिक्स (`` ` ``) र `${}` प्रयोग गरेर नामलाई सन्देशमा सिधै राख्दैछौं – यसलाई टेम्प्लेट लिटरल भनिन्छ, र यो चरहरूसँग मिसिएको स्ट्रिङहरू निर्माण गर्नको लागि धेरै उपयोगी तरिका हो।
 
 अब जब हामीले हाम्रो फङ्सन कल गर्छौं, हामीले कुनै पनि नाम पास गर्न सक्छौं:
 
@@ -115,11 +190,34 @@ displayGreeting('Christopher');
 
 जाभास्क्रिप्टले स्ट्रिङ `'Christopher'` लिन्छ, यसलाई `name` प्यारामिटरमा असाइन गर्छ, र व्यक्तिगत सन्देश "Hello, Christopher!" बनाउँछ।
 
+```mermaid
+flowchart LR
+    A["🎯 Function Call"] --> B["📥 Parameters"]
+    B --> C["⚙️ Function Body"]
+    C --> D["📤 Result"]
+    
+    A1["displayGreeting('Alice')"] --> A
+    B1["name = 'Alice'"] --> B
+    C1["Template literal\n\`Hello, \${name}!\`"] --> C
+    D1["'Hello, Alice!'"] --> D
+    
+    E["🔄 Parameter Types"] --> E1["Strings"]
+    E --> E2["Numbers"]
+    E --> E3["Booleans"]
+    E --> E4["Objects"]
+    E --> E5["Functions"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style D fill:#fff3e0
+    style E fill:#f3e5f5
+```
+
 ## डिफल्ट मानहरू
 
-यदि हामीले केही प्यारामिटरहरू वैकल्पिक बनाउन चाह्यौं भने के गर्ने? त्यहाँ डिफल्ट मानहरू उपयोगी हुन्छन्!
+यदि हामीले केही प्यारामिटरहरू वैकल्पिक बनाउन चाह्यौं भने के हुन्छ? त्यहाँ डिफल्ट मानहरू उपयोगी हुन्छन्!
 
-मानौं हामीले मानिसहरूलाई अभिवादन शब्द अनुकूलन गर्न दिन चाहन्छौं, तर यदि तिनीहरूले कुनै निर्दिष्ट गरेनन् भने, हामीले "Hello" लाई ब्याकअपको रूपमा प्रयोग गर्नेछौं। तपाईंले डिफल्ट मानहरू बराबर चिन्ह प्रयोग गरेर सेट गर्न सक्नुहुन्छ, जस्तै भेरिएबल सेट गर्दा:
+मानौं हामी चाहन्छौं कि मानिसहरूले अभिवादन शब्दलाई अनुकूलित गर्न सकून्, तर यदि तिनीहरूले कुनै निर्दिष्ट गरेनन् भने, हामीले "Hello" लाई ब्याकअपको रूपमा प्रयोग गर्नेछौं। तपाईंले डिफल्ट मानहरू सेट गर्न सक्नुहुन्छ बराबर चिन्ह प्रयोग गरेर, ठीक चर सेट गरेजस्तै:
 
 ```javascript
 function displayGreeting(name, salutation='Hello') {
@@ -129,7 +227,7 @@ function displayGreeting(name, salutation='Hello') {
 
 यहाँ, `name` अझै आवश्यक छ, तर `salutation` को ब्याकअप मान `'Hello'` छ यदि कसैले फरक अभिवादन प्रदान गरेन भने।
 
-अब हामीले यो फङ्सन दुई फरक तरिकामा कल गर्न सक्छौं:
+अब हामीले यो फङ्सनलाई दुई फरक तरिकामा कल गर्न सक्छौं:
 
 ```javascript
 displayGreeting('Christopher');
@@ -139,23 +237,52 @@ displayGreeting('Christopher', 'Hi');
 // displays "Hi, Christopher"
 ```
 
-पहिलो कलमा, जाभास्क्रिप्टले डिफल्ट "Hello" प्रयोग गर्छ किनभने हामीले कुनै अभिवादन निर्दिष्ट गरेका छैनौं। दोस्रो कलमा, यसले हाम्रो अनुकूल "Hi" प्रयोग गर्छ। यस लचकताले फङ्सन्सलाई विभिन्न परिदृश्यहरूमा अनुकूल बनाउँछ।
+पहिलो कलमा, जाभास्क्रिप्टले डिफल्ट "Hello" प्रयोग गर्छ किनभने हामीले कुनै सल्युटेसन निर्दिष्ट गरेका छैनौं। दोस्रो कलमा, यसले हाम्रो अनुकूलित "Hi" प्रयोग गर्छ। यो लचकताले फङ्सन्सलाई विभिन्न परिदृश्यहरूमा अनुकूल बनाउँछ।
+
+### 🎛️ **प्यारामिटर मास्टरी जाँच: फङ्सन्सलाई लचिलो बनाउँदै**
+
+**तपाईंको प्यारामिटर बुझाइ जाँच गर्नुहोस्:**
+- प्यारामिटर र आर्गुमेन्टको बीचको भिन्नता के हो?
+- वास्तविक संसारको प्रोग्रामिङमा डिफल्ट मानहरू किन उपयोगी छन्?
+- यदि तपाईंले प्यारामिटरभन्दा बढी आर्गुमेन्ट पास गर्नुभयो भने के हुन्छ भनेर अनुमान गर्न सक्नुहुन्छ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> NoParams: function greet() {}
+    [*] --> WithParams: function greet(name) {}
+    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
+    
+    NoParams --> Static: Same output always
+    WithParams --> Dynamic: Changes with input
+    WithDefaults --> Flexible: Optional customization
+    
+    Static --> [*]
+    Dynamic --> [*]
+    Flexible --> [*]
+    
+    note right of WithDefaults
+        Most flexible approach
+        Backwards compatible
+    end note
+```
+
+> **Pro tip**: डिफल्ट प्यारामिटरहरूले तपाईंको फङ्सन्सलाई प्रयोगकर्ता-अनुकूल बनाउँछ। प्रयोगकर्ताहरूले संवेदनशील डिफल्टहरूसँग छिटो सुरु गर्न सक्छन्, तर आवश्यक पर्दा अझै अनुकूलन गर्न सक्छन्!
 
-## रिटर्न मानहरू
+## फिर्ता मानहरू
 
-हाम्रो फङ्सन्सले अहिलेसम्म कन्सोलमा सन्देशहरू मात्र प्रिन्ट गरेका छन्, तर यदि तपाईंले फङ्सनलाई केही गणना गर्न र तपाईंलाई नतिजा फिर्ता दिन चाहनुभयो भने के गर्ने?
+हाम्रो फङ्सन्सले अहिलेसम्म कन्सोलमा सन्देशहरू मात्र प्रिन्ट गर्दै आएका छन्, तर यदि तपाईंले फङ्सनलाई केही गणना गर्न र परिणाम फिर्ता दिन चाहनुभयो भने के हुन्छ?
 
-त्यहाँ **रिटर्न मानहरू** काम लाग्छन्। केही देखाउने सट्टा, फङ्सनले तपाईंलाई एउटा मान फिर्ता दिन सक्छ जुन तपाईंले भेरिएबलमा भण्डारण गर्न वा तपाईंको कोडका अन्य भागहरूमा प्रयोग गर्न सक्नुहुन्छ।
+त्यहाँ **फिर्ता मानहरू** आउँछन्। केही देखाउने सट्टा, फङ्सनले तपाईंलाई एउटा मान फिर्ता दिन सक्छ जुन तपाईंले चरमा भण्डारण गर्न वा तपाईंको कोडका अन्य भागहरूमा प्रयोग गर्न सक्नुहुन्छ।
 
-मान फिर्ता पठाउन, तपाईंले `return` कीवर्ड प्रयोग गर्नुहुन्छ र त्यसपछि तपाईंले फिर्ता गर्न चाहनुभएको कुरा लेख्नुहुन्छ:
+मान फिर्ता पठाउन, तपाईंले `return` कीवर्ड प्रयोग गर्नुहुन्छ र त्यसपछि तपाईंले फिर्ता दिन चाहेको कुरा:
 
 ```javascript
 return myVariable;
 ```
 
-यहाँ एउटा महत्त्वपूर्ण कुरा छ: जब फङ्सनले `return` स्टेटमेन्टमा पुग्छ, यसले तुरुन्तै चल्न रोक्छ र त्यो मानलाई फङ्सन कल गर्ने व्यक्तिलाई फिर्ता पठाउँछ।
+यहाँ महत्त्वपूर्ण कुरा छ: जब फङ्सनले `return` स्टेटमेन्टलाई हिट गर्छ, यसले तुरुन्तै चल्न बन्द गर्छ र त्यो मानलाई फङ्सन कल गर्ने व्यक्तिलाई फिर्ता पठाउँछ।
 
-अब हाम्रो अभिवादन फङ्सनलाई सन्देश प्रिन्ट गर्ने सट्टा फिर्ता गर्न परिमार्जन गरौं:
+आउनुहोस् हाम्रो अभिवादन फङ्सनलाई सन्देश प्रिन्ट गर्ने सट्टा सन्देश फिर्ता दिन संशोधित गरौं:
 
 ```javascript
 function createGreetingMessage(name) {
@@ -166,21 +293,61 @@ function createGreetingMessage(name) {
 
 अब यो फङ्सनले अभिवादन प्रिन्ट गर्ने सट्टा सन्देश बनाउँछ र हामीलाई फिर्ता दिन्छ।
 
-फिर्ता गरिएको मान प्रयोग गर्न, हामीले यसलाई कुनै अन्य मान जस्तै भेरिएबलमा भण्डारण गर्न सक्छौं:
+फिर्ता गरिएको मान प्रयोग गर्न, हामीले यसलाई अन्य कुनै पनि मान जस्तै चरमा भण्डारण गर्न सक्छौं:
 
 ```javascript
 const greetingMessage = createGreetingMessage('Christopher');
 ```
 
-अब `greetingMessage` मा "Hello, Christopher" छ र हामीले यसलाई हाम्रो कोडमा जहाँसुकै प्रयोग गर्न सक्छौं – वेबपेजमा देखाउन, इमेलमा समावेश गर्न, वा अर्को फङ्सनमा पास गर्न।
+अब `greetingMessage`मा "Hello, Christopher" छ र हामीले यसलाई हाम्रो कोडमा जहाँ पनि प्रयोग गर्न सक्छौं – वेबपेजमा देखाउन, इमेलमा समावेश गर्न, वा अर्को फङ्सनमा पास गर्न।
+
+```mermaid
+flowchart TD
+    A["🔧 Function Processing"] --> B{"return statement?"}
+    B -->|Yes| C["📤 Return Value"]
+    B -->|No| D["📭 Return undefined"]
+    
+    C --> E["💾 Store in Variable"]
+    C --> F["🔗 Use in Expression"]
+    C --> G["📞 Pass to Function"]
+    
+    D --> H["⚠️ Usually not useful"]
+    
+    I["📋 Return Value Uses"] --> I1["Calculate results"]
+    I --> I2["Validate input"]
+    I --> I3["Transform data"]
+    I --> I4["Create objects"]
+    
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style I fill:#e3f2fd
+```
+
+### 🔄 **फिर्ता मान जाँच: परिणामहरू फिर्ता प्राप्त गर्दै**
+
+**तपाईंको फिर्ता मान बुझाइ मूल्याङ्कन गर्नुहोस्:**
+- फङ्सनमा `return` स्टेटमेन्टपछि कोडमा के हुन्छ?
+- कन्सोलमा मात्र प्रिन्ट गर्ने सट्टा मान फिर्ता गर्नु किन राम्रो हो?
+- के फङ्सनले विभिन्न प्रकारका मानहरू (स्ट्रिङ, नम्बर, बूलियन) फिर्ता गर्न सक्छ?
+
+```mermaid
+pie title "Common Return Value Types"
+    "Strings" : 30
+    "Numbers" : 25
+    "Objects" : 20
+    "Booleans" : 15
+    "Arrays" : 10
+```
+
+> **Key insight**: मान फिर्ता गर्ने फङ्सन्स अधिक बहुमुखी हुन्छन् किनभने कल गर्ने व्यक्तिले परिणामसँग के गर्ने निर्णय गर्छ। यसले तपाईंको कोडलाई अधिक मोड्युलर र पुनः प्रयोगयोग्य बनाउँछ!
 
-## फङ्सन्सलाई फङ्सन्सका प्यारामिटरको रूपमा प्रयोग गर्ने
+## फङ्सन्सलाई फङ्सन्सका प्यारामिटरको रूपमा प्रयोग गर्दै
 
-फङ्सन्सलाई अन्य फङ्सन्सका प्यारामिटरको रूपमा पास गर्न सकिन्छ। यो अवधारणा सुरुमा जटिल लाग्न सक्छ, तर यो लचिलो प्रोग्रामिङ ढाँचाहरू सक्षम पार्ने शक्तिशाली सुविधा हो।
+फङ्सन्सलाई अन्य फङ्सन्सका प्यारामिटरको रूपमा पास गर्न सकिन्छ। यो अवधारणा सुरुमा जटिल लाग्न सक्छ, तर यो एक शक्तिशाली सुविधा हो जसले लचिलो प्रोग्रामिङ ढाँचाहरू सक्षम बनाउँछ।
 
-यो ढाँचा "केही हुन्छ भने, यो अर्को कुरा गर" भन्न चाहनुहुन्छ भने धेरै सामान्य छ। उदाहरणका लागि, "जब टाइमर समाप्त हुन्छ, यो कोड चलाउनुहोस्" वा "जब प्रयोगकर्ताले बटन क्लिक गर्छ, यो फङ्सन कल गर्नुहोस्।"
+यो ढाँचा धेरै सामान्य छ जब तपाईं भन्न चाहनुहुन्छ "केही हुन्छ भने, यो अर्को कुरा गर।" उदाहरणका लागि, "जब टाइमर समाप्त हुन्छ, यो कोड चलाउनुहोस्" वा "जब प्रयोगकर्ताले बटन क्लिक गर्छ, यो फङ्सन कल गर्नुहोस्।"
 
-`setTimeout` लाई हेरौं, जुन एउटा बिल्ट-इन फङ्सन हो जसले निश्चित समय पर्खन्छ र त्यसपछि केही कोड चलाउँछ। हामीले यसलाई के कोड चलाउने भन्ने बताउनुपर्छ – फङ्सन पास गर्नको लागि उत्तम प्रयोग केस!
+आउनुहोस् `setTimeout` हेर्नुहोस्, जुन एक बिल्ट-इन फङ्सन हो जसले निश्चित समय पर्खन्छ र त्यसपछि केही कोड चलाउँछ। हामीले यसलाई के कोड चलाउने बताउनुपर्छ – फङ्सन पास गर्नको लागि उत्तम प्रयोग केस!
 
 यो कोड प्रयास गर्नुहोस् – ३ सेकेन्डपछि, तपाईंले सन्देश देख्नुहुनेछ:
 
@@ -192,15 +359,15 @@ function displayDone() {
 setTimeout(displayDone, 3000);
 ```
 
-ध्यान दिनुहोस् हामीले `displayDone` (कोष्ठक बिना) `setTimeout` मा पास गरेका छौं। हामी आफैंले फङ्सन कल गरिरहेका छैनौं – हामी यसलाई `setTimeout` लाई हस्तान्तरण गर्दैछौं र भनिरहेका छौं "यो ३ सेकेन्डमा कल गर्नुहोस्।"
+ध्यान दिनुहोस् हामीले `displayDone` (कोष्ठक बिना) `setTimeout`मा पास गर्दैछौं। हामी आफैंले फङ्सन कल गर्दै छैनौं – हामी यसलाई `setTimeout`मा हस्तान्तरण गर्दैछौं र भनिरहेका छौं "यो ३ सेकेन्डमा कल गर्नुहोस्।"
 
-### एनोनिमस फङ्सन्स
+### अनाम फङ्सन्स
 
-कहिलेकाहीँ तपाईंलाई कुनै एक कामको लागि मात्र फङ्सन चाहिन्छ र यसलाई नाम दिन चाहनुहुन्न। सोच्नुहोस् – यदि तपाईंले फङ्सनलाई केवल एकपटक प्रयोग गर्नुभयो भने, किन आफ्नो कोडलाई अतिरिक्त नामले अव्यवस्थित बनाउनुहुन्छ?
+कहिलेकाहीं तपाईंलाई केवल एक पटकको लागि फङ्सन चाहिन्छ र यसलाई नाम दिन चाहनुहुन्न। सोच्नुहोस् – यदि तपाईंले फङ्सनलाई मात्र एक पटक प्रयोग गर्नुपर्छ भने, किन आफ्नो कोडलाई अतिरिक्त नामले भरमग्दुर बनाउनुहोस्?
 
-जाभास्क्रिप्टले तपाईंलाई **एनोनिमस फङ्सन्स** बनाउन अनुमति दिन्छ – नाम बिना फङ्सन्स जुन तपाईंले जहाँ आवश्यक छ त्यही परिभाषित गर्न सक्नुहुन्छ।
+जाभास्क्रिप्टले तपाईंलाई **अनाम फङ्सन्स** बनाउन अनुमति दिन्छ – नाम बिना फङ्सन्स जुन तपाईंले जहाँ आवश्यक छ त्यही परिभाषित गर्न सक्नुहुन्छ।
 
-यहाँ हामीले हाम्रो टाइमर उदाहरणलाई एनोनिमस फङ्सन प्रयोग गरेर कसरी पुन: लेख्न सक्छौं:
+यहाँ हामीले हाम्रो टाइमर उदाहरणलाई अनाम फङ्सन प्रयोग गरेर पुनः लेख्न सक्छौं:
 
 ```javascript
 setTimeout(function() {
@@ -208,15 +375,15 @@ setTimeout(function() {
 }, 3000);
 ```
 
-यसले उस्तै नतिजा प्राप्त गर्छ, तर फङ्सन `setTimeout` कलभित्र सिधै परिभाषित गरिएको छ, छुट्टै फङ्सन घोषणा आवश्यक छैन।
+यसले उस्तै परिणाम प्राप्त गर्छ, तर फङ्सन `setTimeout` कलभित्रै परिभाषित गरिएको छ, अलग फङ्सन घोषणा आवश्यक छैन।
 
 ### फ्याट एरो फङ्सन्स
 
-आधुनिक जाभास्क्रिप्टमा फङ्सन्स लेख्न अझ छोटो तरिका छ जसलाई **एरो फङ्सन्स** भनिन्छ। तिनीहरूले `=>` प्रयोग गर्छन् (जसले एरो जस्तो देखिन्छ – बुझ्नुभयो?) र विकासकर्ताहरूमा धेरै लोकप्रिय छन्।
+आधुनिक जाभास्क्रिप्टमा फङ्सन्स लेख्न अझ छोटो तरिका छ जसलाई **एरो फङ्सन्स** भनिन्छ। तिनीहरूले `=>` प्रयोग गर्छन् (जसले एरो जस्तो देखिन्छ – बुझ्नुभयो?) र डेभलपर्ससँग धेरै लोकप्रिय छन्।
 
-एरो फङ्सन्सले तपाईंलाई `function` कीवर्ड छोड्न र अझ संक्षिप्त कोड लेख्न अनुमति दिन्छ।
+एरो फङ्सन्सले तपाईंलाई `function` कीवर्ड छोड्न र अधिक संक्षिप्त कोड लेख्न अनुमति दिन्छ।
 
-यहाँ हाम्रो टाइमर उदाहरण एरो फङ्सन प्रयोग गरेर छ:
+यहाँ हाम्रो टाइमर उदाहरण एरो फङ्सन प्रयोग गरेर:
 
 ```javascript
 setTimeout(() => {
@@ -224,45 +391,120 @@ setTimeout(() => {
 }, 3000);
 ```
 
-`()` प्यारामिटरहरू जाने ठाउँ हो (यो केसमा खाली), त्यसपछि एरो `=>` आउँछ, र अन्तमा कर्ली ब्रेसेसमा फङ्सन बडी। यसले उस्तै कार्यक्षमता प्रदान गर्दछ तर अझ संक्षिप्त सिन्ट्याक्ससँग।
+`()` प्यारामिटरहरू जाने ठाउँ हो (यो केसमा खाली), त्यसपछि एरो `=>` आउँछ, र अन्तमा कर्ली ब्रेसेसमा फङ्सन बडी। यसले उस्तै कार्यक्षमता प्रदान गर्दछ अधिक संक्षिप्त सिन्ट्याक्ससँग।
+
+```mermaid
+flowchart LR
+    A["📝 Function Styles"] --> B["Traditional"]
+    A --> C["Arrow"]
+    A --> D["Anonymous"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["Hoisted"]
+    B --> B3["Named"]
+    
+    C --> C1["const name = () => {}"]
+    C --> C2["Concise syntax"]
+    C --> C3["Modern style"]
+    
+    D --> D1["function() {}"]
+    D --> D2["No name"]
+    D --> D3["One-time use"]
+    
+    E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
+    E --> E2["Arrow: Short callbacks"]
+    E --> E3["Anonymous: Event handlers"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ### प्रत्येक रणनीति कहिले प्रयोग गर्ने
 
-प्रत्येक दृष्टिकोण कहिले प्रयोग गर्ने? व्यावहारिक दिशानिर्देश: यदि तपाईंले फङ्सनलाई धेरै पटक प्रयोग गर्नुहुनेछ भने, यसलाई नाम दिनुहोस् र छुट्टै परिभाषित गर्नुहोस्। यदि यो एक विशिष्ट प्रयोगको लागि हो भने, एनोनिमस फङ्सन विचार गर्नुहोस्। एरो फङ्सन्स र परम्परागत सिन्ट्याक्स दुवै मान्य छनोटहरू हुन्, यद्यपि एरो फङ्सन्स आधुनिक जाभास्क्रिप्ट कोडबेसहरूमा प्रचलित छन्।
-
----
-
-## 🚀 चुनौती
-
-के तपाईं एक वाक्यमा फङ्सन्स र मेथड्सको बीचको भिन्नता स्पष्ट गर्न सक्नुहुन्छ? प्रयास गर्नुहोस्!
-
-## GitHub Copilot Agent चुनौती 🚀
-
-Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
-
-**विवरण:** यस पाठमा समेटिएका विभिन्न फङ्सन अवधारणाहरू प्रदर्शन गर्ने गणितीय फङ्सन्सको युटिलिटी लाइब्रेरी बनाउनुहोस्, जसमा प्यारामिटरहरू, डिफल्ट मानहरू, रिटर्न मानहरू, र एरो फङ्सन्स समावेश छन्।
-
-**प्रम्ट:** `mathUtils.js` नामक जाभास्क्रिप्ट फाइल बनाउनुहोस् जसमा निम्न फङ्सन्स समावेश छन्:
-1. दुई प्यारामिटर लिने र तिनीहरूको योग फिर्ता गर्ने `add` फङ्सन
-2. डिफल्ट प्यारामिटर मानहरू भएको `multiply` फङ्सन (दोस्रो प्यारामिटरको डिफल्ट मान १)
-3. एउटा नम्बर लिने र यसको वर्ग फिर्ता गर्ने एरो फङ्सन `square`
-4. अर्को फङ्सनलाई प्यारामिटरको रूपमा स्वीकार गर्ने र दुई नम्बरमा फङ्सन लागू गर्ने `calculate` फङ्सन
-5. प्रत्येक फङ्सनलाई उपयुक्त परीक्षण केसहरूसँग कल गर्ने प्रदर्शन गर्नुहोस्
-
-[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
-
-## पोस्ट-लेक्चर क्विज
-[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app)
-
-## समीक्षा र आत्म-अध्ययन
-
-[एरो फङ्सन्सको बारेमा अलिकति बढी पढ्न](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) लायक छ, किनभने तिनीहरू कोड बेसहरूमा बढ्दो रूपमा प्रयोग गरिन्छ। एउटा फङ्सन लेख्ने अभ्यास गर्नुहोस्, र त्यसपछि यसलाई यो सिन्ट्याक्ससँग पुन: लेख्नुहोस्।
-
-## असाइनमेन्ट
+तपाईंले प्रत्येक दृष्टिकोण कहिले प्रयोग गर्नुपर्छ? व्यावहारिक दिशानिर्देश: यदि तपाईंले फङ्सनलाई धेरै पटक प्रयोग गर्नुहुनेछ भने, यसलाई नाम दिनुहोस् र अलग रूपमा परिभाषित गर्नुहोस्। यदि यो एक विशिष्ट प्रयोगको लागि हो भने, अनाम फङ्सन विचार गर्नुहोस्। एरो फङ्सन्स र परम्परागत सिन्ट्याक्स दुवै मान्य विकल्पहरू हुन्, यद्यपि एरो फङ्सन्स आधुनिक जाभास्क्रिप्ट कोडबेसहरूमा प्रचलित छन्।
+
+### 🎨 **फङ्सन शैली मास्टरी जाँच: सही सिन्ट्याक्स चयन गर्दै**
+
+**तपाईंको सिन्ट्याक्स बुझाइ जाँच गर्नुहोस्:**
+- तपाईंले परम्परागत फङ्सन सिन्ट्याक्सको सट्टा एरो फङ्सन्स कहिले प्राथमिकता दिनुहुन्छ?
+- अनाम फङ्सन्सको मुख्य फाइदा के हो?
+- तपाईंले अनाम फङ्सनभन्दा नाम दिइएको फङ्सन राम्रो हुने स्थिति सोच्न सक्नुहुन्छ?
+
+```mermaid
+quadrantChart
+    title Function Choice Decision Matrix
+    x-axis Simple --> Complex
+    y-axis One-time use --> Reusable
+    quadrant-1 Arrow Functions
+    quadrant-2 Named Functions
+    quadrant-3 Anonymous Functions
+    quadrant-4 Traditional Functions
+    
+    Event Handlers: [0.3, 0.2]
+    Utility Functions: [0.7, 0.8]
+    Callbacks: [0.2, 0.3]
+    Class Methods: [0.8, 0.7]
+    Mathematical Operations: [0.4, 0.6]
+```
 
-[फन विथ फङ्सन्स](assignment.md)
+> **आधुनिक प्रवृत्ति**: एरो फङ्सन्स धेरै डेभलपर्सको लागि डिफल्ट विकल्प
+- [ ] परम्परागत फङ्सनलाई एरो फङ्सन सिन्ट्याक्समा परिवर्तन गर्ने प्रयास गर्नुहोस्  
+- [ ] चुनौती अभ्यास गर्नुहोस्: फङ्सन र मेथडको बीचको फरक व्याख्या गर्नुहोस्  
+
+### 🎯 **यो घण्टामा तपाईंले के हासिल गर्न सक्नुहुन्छ**  
+- [ ] पाठपछिको क्विज पूरा गर्नुहोस् र कुनै पनि भ्रमित अवधारणाहरू समीक्षा गर्नुहोस्  
+- [ ] GitHub Copilot चुनौतीबाट गणित उपयोगिता पुस्तकालय निर्माण गर्नुहोस्  
+- [ ] अर्को फङ्सनलाई प्यारामिटरको रूपमा प्रयोग गर्ने फङ्सन सिर्जना गर्नुहोस्  
+- [ ] डिफल्ट प्यारामिटरहरू सहित फङ्सन लेख्ने अभ्यास गर्नुहोस्  
+- [ ] फङ्सनको रिटर्न मानहरूमा टेम्प्लेट लिटरल्स प्रयोग गरेर प्रयोग गर्नुहोस्  
+
+### 📅 **तपाईंको हप्ताभरि फङ्सन मास्टरी**  
+- [ ] "Fun with Functions" असाइनमेन्ट सिर्जनात्मकतासँग पूरा गर्नुहोस्  
+- [ ] तपाईंले लेखेको दोहोरिएको कोडलाई पुन: प्रयोग गर्न मिल्ने फङ्सनहरूमा सुधार गर्नुहोस्  
+- [ ] केवल फङ्सनहरू प्रयोग गरेर सानो क्यालकुलेटर निर्माण गर्नुहोस् (कुनै ग्लोबल भेरिएबलहरू प्रयोग नगरी)  
+- [ ] `map()` र `filter()` जस्ता एरो फङ्सनहरू अभ्यास गर्नुहोस्  
+- [ ] सामान्य कार्यहरूको लागि उपयोगिता फङ्सनहरूको संग्रह सिर्जना गर्नुहोस्  
+- [ ] उच्च-स्तरीय फङ्सनहरू र फङ्सनल प्रोग्रामिङ अवधारणाहरू अध्ययन गर्नुहोस्  
+
+### 🌟 **तपाईंको महिनाभरि रूपान्तरण**  
+- [ ] क्लोजर र स्कोप जस्ता उन्नत फङ्सन अवधारणाहरूमा महारत हासिल गर्नुहोस्  
+- [ ] फङ्सन कम्पोजिसनलाई व्यापक रूपमा प्रयोग गर्ने परियोजना निर्माण गर्नुहोस्  
+- [ ] फङ्सन डकुमेन्टेसन सुधार गरेर ओपन सोर्समा योगदान गर्नुहोस्  
+- [ ] कसैलाई फङ्सन र विभिन्न सिन्ट्याक्स शैलीहरूको बारेमा सिकाउनुहोस्  
+- [ ] JavaScript मा फङ्सनल प्रोग्रामिङ पद्धतिहरू अन्वेषण गर्नुहोस्  
+- [ ] भविष्यका परियोजनाहरूको लागि पुन: प्रयोग गर्न मिल्ने फङ्सनहरूको व्यक्तिगत पुस्तकालय सिर्जना गर्नुहोस्  
+
+### 🏆 **अन्तिम फङ्सन च्याम्पियन चेक-इन**  
+
+**तपाईंको फङ्सन मास्टरीको उत्सव मनाउनुहोस्:**  
+- अहिलेसम्म तपाईंले सिर्जना गरेको सबैभन्दा उपयोगी फङ्सन के हो?  
+- फङ्सनको बारेमा सिक्दा कोड संगठनको बारेमा तपाईंको सोच कसरी परिवर्तन भयो?  
+- तपाईं कुन फङ्सन सिन्ट्याक्सलाई प्राथमिकता दिनुहुन्छ र किन?  
+- तपाईं कुन वास्तविक समस्या फङ्सन लेखेर समाधान गर्नुहुन्छ?  
+
+```mermaid
+journey
+    title Your Function Confidence Evolution
+    section Today
+      Confused by Syntax: 3: You
+      Understanding Basics: 4: You
+      Writing Simple Functions: 5: You
+    section This Week
+      Using Parameters: 4: You
+      Returning Values: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Function Composition: 5: You
+      Advanced Patterns: 5: You
+      Teaching Others: 5: You
+```
+  
+> 🎉 **तपाईंले प्रोग्रामिङको सबैभन्दा शक्तिशाली अवधारणाहरूमा महारत हासिल गर्नुभएको छ!** फङ्सनहरू ठूला प्रोग्रामहरूको निर्माण ब्लक हुन्। तपाईंले कहिल्यै निर्माण गर्ने प्रत्येक एप्लिकेसनले कोडलाई व्यवस्थित, पुन: प्रयोग गर्न मिल्ने, र संरचना गर्न फङ्सनहरू प्रयोग गर्नेछ। तपाईंले अब तर्कलाई पुन: प्रयोग गर्न मिल्ने कम्पोनेन्टहरूमा प्याकेज गर्ने तरिका बुझ्नुभएको छ, जसले तपाईंलाई अधिक कुशल र प्रभावकारी प्रोग्रामर बनाउँछ। मोडुलर प्रोग्रामिङको संसारमा स्वागत छ! 🚀  
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/2-js-basics/3-making-decisions/README.md b/translations/ne/2-js-basics/3-making-decisions/README.md
index 9714f3ae21..7b17fe06b1 100644
--- a/translations/ne/2-js-basics/3-making-decisions/README.md
+++ b/translations/ne/2-js-basics/3-making-decisions/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90a3c32c3377f83ab750c2447c77ab98",
-  "translation_date": "2025-10-22T16:41:44+00:00",
+  "original_hash": "c688385d15dd3645e924ea0ffee8967f",
+  "translation_date": "2025-11-03T15:14:28+00:00",
   "source_file": "2-js-basics/3-making-decisions/README.md",
   "language_code": "ne"
 }
@@ -11,65 +11,170 @@ CO_OP_TRANSLATOR_METADATA:
 
 ![जाभास्क्रिप्ट आधारभूत - निर्णय लिनु](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ne.png)
 
-> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
+> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
+
+```mermaid
+journey
+    title Your JavaScript Decision-Making Adventure
+    section Foundation
+      Boolean Values: 5: You
+      Comparison Operators: 4: You
+      Logical Thinking: 5: You
+    section Basic Decisions
+      If Statements: 4: You
+      If-Else Logic: 5: You
+      Switch Statements: 4: You
+    section Advanced Logic
+      Logical Operators: 5: You
+      Complex Conditions: 4: You
+      Ternary Expressions: 5: You
+```
 
-के तपाईंले कहिल्यै सोच्नुभएको छ कि एप्लिकेसनहरूले कसरी स्मार्ट निर्णय लिन्छन्? जस्तै, नेभिगेसन प्रणालीले छिटो मार्ग कसरी छान्छ, वा थर्मोस्टेटले तापक्रम कहिले चालु गर्ने निर्णय कसरी गर्छ? यो प्रोग्रामिङमा निर्णय लिने आधारभूत अवधारणा हो।
+के तपाईंले कहिल्यै सोच्नुभएको छ कि एप्लिकेसनहरूले कसरी स्मार्ट निर्णय लिन्छन्? जस्तै, नेभिगेसन प्रणालीले छिटो मार्ग कसरी चयन गर्छ, वा थर्मोस्टेटले तापक्रम कहिले चालु गर्ने निर्णय कसरी गर्छ? यो प्रोग्रामिङमा निर्णय लिने आधारभूत अवधारणा हो।
 
-जस्तै चार्ल्स बेबेजको एनालिटिकल इन्जिन विभिन्न सर्तहरूमा आधारित अपरेशनको क्रम अनुसरण गर्न डिजाइन गरिएको थियो, आधुनिक जाभास्क्रिप्ट प्रोग्रामहरूले विभिन्न परिस्थितिमा आधारित निर्णय लिन आवश्यक छ। यो शाखा बनाउने र निर्णय लिने क्षमता स्थिर कोडलाई प्रतिक्रियाशील, बौद्धिक एप्लिकेसनमा रूपान्तरण गर्ने हो।
+जस्तै चार्ल्स बबेजको एनालिटिकल इन्जिन विभिन्न सर्तहरूमा आधारित अपरेशनहरूको क्रम अनुसरण गर्न डिजाइन गरिएको थियो, आधुनिक जाभास्क्रिप्ट प्रोग्रामहरूले विभिन्न परिस्थितिमा आधारित निर्णय लिन आवश्यक छ। यो शाखा बनाउने र निर्णय लिने क्षमता स्थिर कोडलाई प्रतिक्रियाशील, बौद्धिक एप्लिकेसनमा रूपान्तरण गर्ने हो।
 
-यस पाठमा, तपाईंले आफ्नो प्रोग्रामहरूमा सर्तात्मक तर्क कार्यान्वयन गर्ने तरिका सिक्नुहुनेछ। हामी सर्तात्मक कथनहरू, तुलना अपरेटरहरू, र तार्किक अभिव्यक्तिहरू अन्वेषण गर्नेछौं जसले तपाईंको कोडलाई परिस्थितिहरू मूल्याङ्कन गर्न र उपयुक्त रूपमा प्रतिक्रिया दिन अनुमति दिन्छ।
+यस पाठमा, तपाईंले आफ्नो प्रोग्रामहरूमा सर्तात्मक तर्क कार्यान्वयन गर्न सिक्नुहुनेछ। हामी सर्तात्मक कथनहरू, तुलना अपरेटरहरू, र तार्किक अभिव्यक्तिहरू अन्वेषण गर्नेछौं जसले तपाईंको कोडलाई परिस्थितिहरू मूल्याङ्कन गर्न र उपयुक्त रूपमा प्रतिक्रिया दिन अनुमति दिन्छ।
 
 ## प्रि-लेक्चर क्विज
 
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/11)
 
-निर्णय लिन र प्रोग्रामको प्रवाहलाई नियन्त्रण गर्ने क्षमता प्रोग्रामिङको एक आधारभूत पक्ष हो। यो खण्डले बूलियन मानहरू र सर्तात्मक तर्क प्रयोग गरेर तपाईंको जाभास्क्रिप्ट प्रोग्रामहरूको कार्यान्वयन मार्गलाई कसरी नियन्त्रण गर्ने भन्ने कुरा समेट्छ।
+निर्णय लिनु र प्रोग्रामको प्रवाह नियन्त्रण गर्नु प्रोग्रामिङको आधारभूत पक्ष हो। यो खण्डले तपाईंको जाभास्क्रिप्ट प्रोग्रामहरूको कार्यान्वयन मार्गलाई बूलियन मानहरू र सर्तात्मक तर्क प्रयोग गरेर कसरी नियन्त्रण गर्ने भन्ने कुरा समेट्छ।
 
 [![निर्णय लिनु](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "निर्णय लिनु")
 
-> 🎥 माथिको तस्बिरमा क्लिक गरेर निर्णय लिने बारेको भिडियो हेर्नुहोस्।
+> 🎥 माथिको तस्बिरमा क्लिक गर्नुहोस् निर्णय लिने बारेको भिडियोका लागि।
 
 > तपाईं यो पाठ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) मा लिन सक्नुहुन्छ!
 
+```mermaid
+mindmap
+  root((Decision Making))
+    Boolean Logic
+      true/false
+      Comparison results
+      Logical expressions
+    Conditional Statements
+      if statements
+        Single condition
+        Code execution
+      if-else
+        Two paths
+        Alternative actions
+      switch
+        Multiple options
+        Clean structure
+    Operators
+      Comparison
+        === !== < > <= >=
+        Value relationships
+      Logical
+        && || !
+        Combine conditions
+    Advanced Patterns
+      Ternary
+        ? : syntax
+        Inline decisions
+      Complex Logic
+        Nested conditions
+        Multiple criteria
+```
+
 ## बूलियनको संक्षिप्त पुनरावलोकन
 
-निर्णय लिने कुरा अन्वेषण गर्नु अघि, हाम्रो अघिल्लो पाठबाट बूलियन मानहरूलाई पुनरावलोकन गरौं। गणितज्ञ जर्ज बूलको नाममा राखिएको, यी मानहरूले द्विआधारी अवस्था प्रतिनिधित्व गर्छन् – या त `true` वा `false`। यहाँ कुनै अस्पष्टता छैन, कुनै बीचको अवस्था छैन।
+निर्णय लिने कुरा अन्वेषण गर्नु अघि, हाम्रो अघिल्लो पाठबाट बूलियन मानहरूलाई पुनरावलोकन गरौं। गणितज्ञ जर्ज बूलको नाममा राखिएको, यी मानहरूले द्विआधारी अवस्था प्रतिनिधित्व गर्छन् – `true` वा `false`। कुनै अस्पष्टता छैन, कुनै बीचको अवस्था छैन।
 
-यी द्विआधारी मानहरूले सबै कम्प्युटेशनल तर्कको आधार बनाउँछन्। तपाईंको प्रोग्रामले गर्ने प्रत्येक निर्णय अन्ततः बूलियन मूल्याङ्कनमा झर्छ।
+यी द्विआधारी मानहरूले सबै कम्प्युटेशनल तर्कको आधार बनाउँछन्। तपाईंको प्रोग्रामले गर्ने प्रत्येक निर्णय अन्ततः बूलियन मूल्याङ्कनमा घट्छ।
 
-बूलियन भेरिएबलहरू बनाउनु सरल छ:
+बूलियन भेरिएबलहरू सिर्जना गर्नु सरल छ:
 
 ```javascript
 let myTrueBool = true;
 let myFalseBool = false;
 ```
 
-यसले स्पष्ट बूलियन मानहरू भएका दुई भेरिएबलहरू बनाउँछ।
+यसले स्पष्ट बूलियन मानहरू भएका दुई भेरिएबलहरू सिर्जना गर्छ।
 
-✅ बूलियनहरू अंग्रेज गणितज्ञ, दार्शनिक र तर्कशास्त्री जर्ज बूल (1815–1864) को नाममा राखिएको हो।
+✅ बूलियनहरू अंग्रेजी गणितज्ञ, दार्शनिक र तर्कशास्त्री जर्ज बूल (1815–1864) को नाममा राखिएको हो।
 
 ## तुलना अपरेटरहरू र बूलियनहरू
 
-व्यवहारमा, तपाईंले बूलियन मानहरू म्यानुअली सेट गर्न विरलै गर्नुहुन्छ। यसको सट्टा, तपाईंले सर्तहरू मूल्याङ्कन गरेर तिनीहरू उत्पन्न गर्नुहुन्छ: "के यो संख्या त्यो भन्दा ठूलो छ?" वा "के यी मानहरू बराबर छन्?"
+व्यवहारमा, तपाईंले बूलियन मानहरू म्यानुअल रूपमा सेट गर्न विरलै गर्नुहुन्छ। यसको सट्टा, तपाईंले सर्तहरू मूल्याङ्कन गरेर तिनीहरूलाई उत्पन्न गर्नुहुन्छ: "के यो संख्या त्यो भन्दा ठूलो छ?" वा "के यी मानहरू बराबर छन्?"
 
 तुलना अपरेटरहरूले यी मूल्याङ्कनहरू सक्षम बनाउँछन्। तिनीहरूले मानहरू तुलना गर्छन् र अपरेन्डहरू बीचको सम्बन्धको आधारमा बूलियन परिणामहरू फर्काउँछन्।
 
 | प्रतीक | विवरण                                                                                                                                                   | उदाहरण            |
 | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **कम छ**: दुई मानहरू तुलना गर्छ र यदि बायाँ पक्षको मान दायाँ भन्दा कम छ भने `true` बूलियन डाटा प्रकार फर्काउँछ                              | `5 < 6 // true`    |
-| `<=`   | **कम वा बराबर छ**: दुई मानहरू तुलना गर्छ र यदि बायाँ पक्षको मान दायाँ भन्दा कम वा बराबर छ भने `true` बूलियन डाटा प्रकार फर्काउँछ      | `5 <= 6 // true`   |
-| `>`    | **ठूलो छ**: दुई मानहरू तुलना गर्छ र यदि बायाँ पक्षको मान दायाँ भन्दा ठूलो छ भने `true` बूलियन डाटा प्रकार फर्काउँछ                         | `5 > 6 // false`   |
-| `>=`   | **ठूलो वा बराबर छ**: दुई मानहरू तुलना गर्छ र यदि बायाँ पक्षको मान दायाँ भन्दा ठूलो वा बराबर छ भने `true` बूलियन डाटा प्रकार फर्काउँछ | `5 >= 6 // false`  |
-| `===`  | **कडा समानता**: दुई मानहरू तुलना गर्छ र यदि दायाँ र बायाँका मानहरू बराबर छन् र समान डाटा प्रकारका छन् भने `true` बूलियन डाटा प्रकार फर्काउँछ।       | `5 === 6 // false` |
-| `!==`  | **असमानता**: दुई मानहरू तुलना गर्छ र कडा समानता अपरेटरले फर्काउने विपरीत बूलियन मान फर्काउँछ                                    | `5 !== 6 // true`  |
+| `<`    | **कम भन्दा**: दुई मानहरू तुलना गर्छ र यदि बायाँ पक्षको मान दायाँ भन्दा कम छ भने `true` बूलियन डाटा प्रकार फर्काउँछ                              | `5 < 6 // true`    |
+| `<=`   | **कम वा बराबर**: दुई मानहरू तुलना गर्छ र यदि बायाँ पक्षको मान दायाँ भन्दा कम वा बराबर छ भने `true` बूलियन डाटा प्रकार फर्काउँछ      | `5 <= 6 // true`   |
+| `>`    | **ठूलो भन्दा**: दुई मानहरू तुलना गर्छ र यदि बायाँ पक्षको मान दायाँ भन्दा ठूलो छ भने `true` बूलियन डाटा प्रकार फर्काउँछ                         | `5 > 6 // false`   |
+| `>=`   | **ठूलो वा बराबर**: दुई मानहरू तुलना गर्छ र यदि बायाँ पक्षको मान दायाँ भन्दा ठूलो वा बराबर छ भने `true` बूलियन डाटा प्रकार फर्काउँछ | `5 >= 6 // false`  |
+| `===`  | **सख्त समानता**: दुई मानहरू तुलना गर्छ र यदि दायाँ र बायाँका मानहरू समान छन् र समान डाटा प्रकारका छन् भने `true` बूलियन डाटा प्रकार फर्काउँछ।       | `5 === 6 // false` |
+| `!==`  | **असमानता**: दुई मानहरू तुलना गर्छ र सख्त समानता अपरेटरले फर्काउने विपरीत बूलियन मान फर्काउँछ                                    | `5 !== 6 // true`  |
+
+✅ आफ्नो ज्ञान जाँच गर्न ब्राउजरको कन्सोलमा केही तुलना लेख्नुहोस्। के कुनै फर्काइएको डाटाले तपाईंलाई अचम्मित बनाउँछ?
+
+```mermaid
+flowchart LR
+    A["🔢 Values"] --> B["⚖️ Comparison"]
+    B --> C["✅ Boolean Result"]
+    
+    D["5"] --> E["< 6"]
+    E --> F["true"]
+    
+    G["10"] --> H["=== '10'"]
+    H --> I["false"]
+    
+    J["'hello'"] --> K["!== 'world'"]
+    K --> L["true"]
+    
+    M["📋 Operator Types"] --> M1["Equality: === !=="]
+    M --> M2["Relational: < > <= >="]
+    M --> M3["Strict vs Loose"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style M fill:#fff3e0
+```
 
-✅ आफ्नो ब्राउजरको कन्सोलमा केही तुलना लेखेर आफ्नो ज्ञान जाँच गर्नुहोस्। के कुनै फर्काइएको डाटाले तपाईंलाई अचम्मित बनायो?
+### 🧠 **तुलना तर्कको महारत जाँच: बूलियन तर्क बुझ्न**
+
+**तपाईंको तुलना बुझाइ जाँच गर्नुहोस्:**
+- किन `===` (सख्त समानता) सामान्यतया `==` (ढिलो समानता) भन्दा बढी प्राथमिकता दिइन्छ?
+- के तपाईं अनुमान गर्न सक्नुहुन्छ `5 === '5'` के फर्काउँछ? `5 == '5'` के हुन्छ?
+- `!==` र `!=` बीचको फरक के हो?
+
+```mermaid
+stateDiagram-v2
+    [*] --> Comparison: Two values
+    Comparison --> StrictEqual: === or !==
+    Comparison --> Relational: < > <= >=
+    
+    StrictEqual --> TypeCheck: Check type AND value
+    Relational --> NumberCompare: Convert to numbers
+    
+    TypeCheck --> BooleanResult: true or false
+    NumberCompare --> BooleanResult
+    
+    note right of StrictEqual
+        Preferred approach
+        No type conversion
+    end note
+    
+    note right of Relational
+        Useful for ranges
+        Numerical comparisons
+    end note
+```
+
+> **प्रो टिप**: समानता जाँचका लागि सधैं `===` र `!==` प्रयोग गर्नुहोस् जबसम्म तपाईंलाई विशेष रूपमा प्रकार रूपान्तरण आवश्यक छैन। यसले अप्रत्याशित व्यवहार रोक्छ!
 
 ## If Statement
 
-`if` स्टेटमेन्ट तपाईंको कोडमा प्रश्न सोध्ने जस्तै हो। "यदि यो सर्त सत्य छ भने, यो काम गर।" यो जाभास्क्रिप्टमा निर्णय लिनको लागि तपाईंले प्रयोग गर्ने सबैभन्दा महत्त्वपूर्ण उपकरण हो।
+`if` कथन तपाईंको कोडमा प्रश्न सोध्ने जस्तै हो। "यदि यो सर्त सत्य हो भने, यो काम गर।" यो सम्भवतः जाभास्क्रिप्टमा निर्णय लिनको लागि तपाईंले प्रयोग गर्ने सबैभन्दा महत्त्वपूर्ण उपकरण हो।
 
-यसले यसरी काम गर्छ:
+यसले कसरी काम गर्छ:
 
 ```javascript
 if (condition) {
@@ -77,9 +182,9 @@ if (condition) {
 }
 ```
 
-सर्त कोष्ठकभित्र जान्छ, र यदि यो `true` छ भने, जाभास्क्रिप्टले कर्ली ब्रेसेसभित्रको कोड चलाउँछ। यदि यो `false` छ भने, जाभास्क्रिप्टले त्यो सम्पूर्ण ब्लकलाई छोड्छ।
+सर्त कोष्ठकभित्र जान्छ, र यदि यो `true` हो भने, जाभास्क्रिप्टले कर्ली ब्रेसेसभित्रको कोड चलाउँछ। यदि यो `false` हो भने, जाभास्क्रिप्टले त्यो सम्पूर्ण ब्लकलाई छोड्छ।
 
-तपाईंले यी सर्तहरू बनाउन तुलना अपरेटरहरू प्राय: प्रयोग गर्नुहुनेछ। व्यावहारिक उदाहरण हेरौं:
+तपाईंले यी सर्तहरू सिर्जना गर्न अक्सर तुलना अपरेटरहरू प्रयोग गर्नुहुनेछ। व्यावहारिक उदाहरण हेरौं:
 
 ```javascript
 let currentMoney = 1000;
@@ -91,13 +196,31 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-किनभने `1000 >= 800` `true` मा मूल्याङ्कन हुन्छ, ब्लकभित्रको कोड कार्यान्वयन हुन्छ, कन्सोलमा "नयाँ ल्यापटप प्राप्त गर्दै!" देखाउँदै।
+किनभने `1000 >= 800` `true` मा मूल्याङ्कन हुन्छ, ब्लकभित्रको कोड कार्यान्वयन हुन्छ, कन्सोलमा "नयाँ ल्यापटप प्राप्त गर्दैछु!" देखाउँछ।
+
+```mermaid
+flowchart TD
+    A["🚀 Program Start"] --> B{"💰 currentMoney >= laptopPrice?"}
+    B -->|true| C["🎉 'Getting a new laptop!'"]
+    B -->|false| D["⏭️ Skip code block"]
+    C --> E["📋 Continue program"]
+    D --> E
+    
+    F["📊 If Statement Structure"] --> F1["if (condition) {"]
+    F1 --> F2["  // code to run if true"]
+    F2 --> F3["}"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style F fill:#e3f2fd
+```
 
 ## If..Else Statement
 
-तर यदि तपाईं आफ्नो प्रोग्रामले सर्त झुटो हुँदा केही फरक काम गर्न चाहनुहुन्छ भने के गर्ने? त्यहाँ `else` आउँछ – यो जस्तै छ कि ब्याकअप योजना छ।
+तर यदि तपाईं चाहनुहुन्छ कि तपाईंको प्रोग्रामले सर्त गलत हुँदा केही फरक काम गरोस् भने के गर्ने? त्यहाँ `else` आउँछ – यो जस्तै हो कि "यदि यो सर्त सत्य छैन भने, यसको सट्टा यो अर्को काम गर।"
 
-`else` स्टेटमेन्टले तपाईंलाई "यदि यो सर्त सत्य छैन भने, यसको सट्टा यो अर्को काम गर।" भन्ने तरिका दिन्छ।
+`else` कथनले तपाईंलाई भन्नको लागि एक तरिका दिन्छ "यदि यो सर्त सत्य छैन भने, यसको सट्टा यो अर्को काम गर।"
 
 ```javascript
 let currentMoney = 500;
@@ -112,13 +235,42 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-अब किनभने `500 >= 800` `false` छ, जाभास्क्रिप्टले पहिलो ब्लकलाई छोड्छ र `else` ब्लक चलाउँछ। तपाईं कन्सोलमा "अहिलेसम्म नयाँ ल्यापटप किन्न सक्दिन!" देख्नुहुनेछ।
+अब किनभने `500 >= 800` `false` हो, जाभास्क्रिप्टले पहिलो ब्लकलाई छोड्छ र `else` ब्लक चलाउँछ। तपाईं कन्सोलमा "अहिलेसम्म नयाँ ल्यापटप किन्न सक्दिन!" देख्नुहुनेछ।
+
+✅ ब्राउजर कन्सोलमा यो कोड र तलको कोड चलाएर आफ्नो बुझाइ जाँच गर्नुहोस्। `currentMoney` र `laptopPrice` भेरिएबलहरूको मान परिवर्तन गरेर फर्काइएको `console.log()` परिवर्तन गर्नुहोस्।
+
+### 🎯 **If-Else तर्क जाँच: शाखा मार्गहरू**
+
+**तपाईंको सर्तात्मक तर्क बुझाइ मूल्याङ्कन गर्नुहोस्:**
+- के हुन्छ यदि `currentMoney` ठीक `laptopPrice` बराबर छ भने?
+- के तपाईं वास्तविक जीवनको परिदृश्य सोच्न सक्नुहुन्छ जहाँ if-else तर्क उपयोगी हुनेछ?
+- तपाईं यसलाई कसरी विस्तार गर्न सक्नुहुन्छ धेरै मूल्य दायराहरू सम्हाल्न?
+
+```mermaid
+flowchart TD
+    A["🔍 Evaluate Condition"] --> B{"Condition True?"}
+    B -->|Yes| C["📤 Execute IF block"]
+    B -->|No| D["📥 Execute ELSE block"]
+    
+    C --> E["✅ One path taken"]
+    D --> E
+    
+    F["🌐 Real-world Examples"] --> F1["User login status"]
+    F --> F2["Age verification"]
+    F --> F3["Form validation"]
+    F --> F4["Game state changes"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#e3f2fd
+    style F fill:#f3e5f5
+```
 
-✅ यो कोड र तलको कोडलाई ब्राउजर कन्सोलमा चलाएर आफ्नो बुझाइ जाँच गर्नुहोस्। `currentMoney` र `laptopPrice` भेरिएबलहरूको मान परिवर्तन गरेर फर्काइएको `console.log()` परिवर्तन गर्नुहोस्।
+> **महत्त्वपूर्ण जानकारी**: If-else ले ठीक एक मार्ग लिन्छ। यसले तपाईंको प्रोग्रामले कुनै पनि सर्तमा सधैं प्रतिक्रिया सुनिश्चित गर्दछ!
 
 ## Switch Statement
 
-कहिलेकाहीं तपाईंले एक मानलाई धेरै विकल्पहरूसँग तुलना गर्न आवश्यक छ। जबकि तपाईंले धेरै `if..else` स्टेटमेन्टहरू चेन गर्न सक्नुहुन्छ, यो दृष्टिकोण असुविधाजनक हुन्छ। `switch` स्टेटमेन्टले धेरै छुट्टै मानहरूलाई ह्यान्डल गर्न सफा संरचना प्रदान गर्दछ।
+कहिलेकाहीं तपाईंले एक मानलाई धेरै विकल्पहरूसँग तुलना गर्न आवश्यक पर्न सक्छ। जबकि तपाईंले धेरै `if..else` कथनहरू श्रृंखला बनाउन सक्नुहुन्छ, यो दृष्टिकोण असुविधाजनक हुन्छ। `switch` कथनले धेरै छुट्टै मानहरू सम्हाल्न सफा संरचना प्रदान गर्दछ।
 
 यो अवधारणा प्रारम्भिक टेलिफोन एक्सचेन्जहरूमा प्रयोग गरिएका मेकानिकल स्विचिङ प्रणालीसँग मिल्दोजुल्दो छ – एक इनपुट मानले कार्यान्वयनले कुन विशिष्ट मार्ग अनुसरण गर्ने निर्धारण गर्छ।
 
@@ -135,12 +287,12 @@ switch (expression) {
 }
 ```
 
-यसको संरचना यसरी छ:
+यसको संरचना यस प्रकार छ:
 - जाभास्क्रिप्टले अभिव्यक्तिलाई एकपटक मूल्याङ्कन गर्छ
-- प्रत्येक `case` मा मिलान खोज्छ
-- मिलान भेट्दा, त्यो कोड ब्लक चलाउँछ
-- `break` ले जाभास्क्रिप्टलाई रोक्न र स्विचबाट बाहिर जान भन्छ
-- कुनै केसहरू मिल्दैन भने, यो `default` ब्लक चलाउँछ (यदि तपाईंले राख्नुभएको छ भने)
+- यसले प्रत्येक `case` हेर्छ र मिल्दो खोज्छ
+- जब यसले मिल्दो भेट्छ, यसले त्यो कोड ब्लक चलाउँछ
+- `break` ले जाभास्क्रिप्टलाई रोक्न र switch बाट बाहिर जान भन्छ
+- यदि कुनै केसहरू मिल्दैनन् भने, यसले `default` ब्लक चलाउँछ (यदि तपाईंसँग छ भने)
 
 ```javascript
 // Program using switch statement for day of week
@@ -164,30 +316,101 @@ switch (dayNumber) {
 console.log(`Today is ${dayName}`);
 ```
 
-यस उदाहरणमा, जाभास्क्रिप्टले देख्छ कि `dayNumber` `2` हो, मिल्दो `case 2` भेट्छ, `dayName` लाई "Tuesday" मा सेट गर्छ, र त्यसपछि स्विचबाट बाहिर जान्छ। परिणाम? "आज Tuesday हो" कन्सोलमा देखिन्छ।
+यस उदाहरणमा, जाभास्क्रिप्टले देख्छ कि `dayNumber` `2` हो, मिल्दो `case 2` भेट्छ, `dayName` लाई "Tuesday" मा सेट गर्छ, र त्यसपछि switch बाट बाहिर निस्कन्छ। परिणाम? "आज मंगलवार हो" कन्सोलमा देखिन्छ।
+
+```mermaid
+flowchart TD
+    A["📥 switch(expression)"] --> B["🔍 Evaluate once"]
+    B --> C{"Match case 1?"}
+    C -->|Yes| D["📋 Execute case 1"]
+    C -->|No| E{"Match case 2?"}
+    E -->|Yes| F["📋 Execute case 2"]
+    E -->|No| G{"Match case 3?"}
+    G -->|Yes| H["📋 Execute case 3"]
+    G -->|No| I["📋 Execute default"]
+    
+    D --> J["🛑 break"]
+    F --> K["🛑 break"]
+    H --> L["🛑 break"]
+    
+    J --> M["✅ Exit switch"]
+    K --> M
+    L --> M
+    I --> M
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style M fill:#e8f5e8
+```
+
+✅ आफ्नो बुझाइ जाँच गर्न ब्राउजरको कन्सोलमा यो कोड र तलको कोड चलाउनुहोस्। भेरिएबल `a` को मान परिवर्तन गरेर फर्काइएको `console.log()` परिवर्तन गर्नुहोस्।
+
+### 🔄 **Switch Statement महारत: धेरै विकल्पहरू**
+
+**तपाईंको switch बुझाइ जाँच गर्नुहोस्:**
+- के हुन्छ यदि तपाईंले `break` कथन बिर्सनुभयो भने?
+- तपाईंले कहिले `switch` प्रयोग गर्नुहुन्छ धेरै `if-else` कथनहरूको सट्टा?
+- किन `default` केस उपयोगी छ, तपाईंले सबै सम्भावनाहरू समेटेको सोच्दा पनि?
+
+```mermaid
+pie title "When to Use Each Decision Structure"
+    "Simple if-else" : 40
+    "Complex if-else chains" : 25
+    "Switch statements" : 20
+    "Ternary operators" : 15
+```
 
-✅ यो कोड र तलको कोडलाई ब्राउजर कन्सोलमा चलाएर आफ्नो बुझाइ जाँच गर्नुहोस्। भेरिएबल `a` को मान परिवर्तन गरेर फर्काइएको `console.log()` परिवर्तन गर्नुहोस्।
+> **सर्वोत्तम अभ्यास**: एक भेरिएबललाई धेरै विशिष्ट मानहरूसँग तुलना गर्दा `switch` प्रयोग गर्नुहोस्। दायरा जाँच वा जटिल सर्तहरूको लागि `if-else` प्रयोग गर्नुहोस्!
 
 ## तार्किक अपरेटरहरू र बूलियनहरू
 
-जटिल निर्णयहरूले प्राय: एकै समयमा धेरै सर्तहरू मूल्याङ्कन गर्न आवश्यक हुन्छ। जस्तै बूलियन एल्जेब्राले गणितज्ञहरूलाई तार्किक अभिव्यक्तिहरू जोड्न अनुमति दिन्छ, प्रोग्रामिङले धेरै बूलियन सर्तहरू जोड्न तार्किक अपरेटरहरू प्रदान गर्दछ।
+जटिल निर्णयहरूले प्रायः एकै समयमा धेरै सर्तहरू मूल्याङ्कन गर्न आवश्यक हुन्छ। जस्तै बूलियन बीजगणितले गणितज्ञहरूलाई तार्किक अभिव्यक्तिहरू संयोजन गर्न अनुमति दिन्छ, प्रोग्रामिङले धेरै बूलियन सर्तहरू जोड्न तार्किक अपरेटरहरू प्रदान गर्दछ।
 
-यी अपरेटरहरूले सरल सत्य/झुटो मूल्याङ्कनहरू जोडेर परिष्कृत सर्तात्मक तर्क सक्षम बनाउँछन्।
+यी अपरेटरहरूले सरल सत्य/झुटो मूल्याङ्कनहरू संयोजन गरेर परिष्कृत सर्तात्मक तर्क सक्षम बनाउँछन्।
 
 | प्रतीक | विवरण                                                                                     | उदाहरण                                                                 |
 | ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| `&&`   | **तार्किक AND**: दुई बूलियन अभिव्यक्तिहरू तुलना गर्छ। दुवै पक्ष सत्य भए मात्र `true` फर्काउँछ | `(5 > 3) && (5 < 10) // दुवै पक्ष सत्य छन्। `true` फर्काउँछ` |
-| `\|\|` | **तार्किक OR**: दुई बूलियन अभिव्यक्तिहरू तुलना गर्छ। कम्तीमा एक पक्ष सत्य भए `true` फर्काउँछ     | `(5 > 10) \|\| (5 < 10) // एक पक्ष झुटो छ, अर्को सत्य छ। `true` फर्काउँछ` |
+| `&&`   | **तार्किक AND**: दुई बूलियन अभिव्यक्तिहरू तुलना गर्छ। दुवै पक्ष सत्य भए मात्र सत्य फर्काउँछ | `(5 > 3) && (5 < 10) // दुवै पक्ष सत्य छन्। सत्य फर्काउँछ` |
+| `\|\|` | **तार्किक OR**: दुई बूलियन अभिव्यक्तिहरू तुलना गर्छ। कम्तीमा एक पक्ष सत्य भए सत्य फर्काउँछ     | `(5 > 10) \|\| (5 < 10) // एक पक्ष झुटो छ, अर्को सत्य छ। सत्य फर्काउँछ` |
 | `!`    | **तार्किक NOT**: बूलियन अभिव्यक्तिको विपरीत मान फर्काउँछ                             | `!(5 > 10) // 5 10 भन्दा ठूलो छैन, त्यसैले "!" यसलाई सत्य बनाउँछ`         |
 
-यी अपरेटरहरूले उपयोगी तरिकामा सर्तहरू जोड्न अनुमति दिन्छ:
-- AND (`&&`) को मतलब दुवै सर्त सत्य हुनुपर्छ
-- OR (`||`) को मतलब कम्तीमा एक सर्त सत्य हुनुपर्छ  
-- NOT (`!`) सत्यलाई झुटोमा (र विपरीत) बदल्छ
+यी अपरेटरहरूले सर्तहरू उपयोगी तरिकामा संयोजन गर्न अनुमति दिन्छ:
+- AND (`&&`) को अर्थ दुवै सर्तहरू सत्य हुनुपर्छ
+- OR (`||`) को अर्थ कम्तीमा एक सर्त सत्य हुनुपर्छ  
+- NOT (`!`) सत्यलाई झुटोमा (र विपरीत) परिवर्तन गर्छ
+
+```mermaid
+flowchart LR
+    A["🔗 Logical Operators"] --> B["&& AND"]
+    A --> C["|| OR"]
+    A --> D["! NOT"]
+    
+    B --> B1["Both must be true"]
+    B --> B2["true && true = true"]
+    B --> B3["true && false = false"]
+    
+    C --> C1["At least one true"]
+    C --> C2["true || false = true"]
+    C --> C3["false || false = false"]
+    
+    D --> D1["Flips the value"]
+    D --> D2["!true = false"]
+    D --> D3["!false = true"]
+    
+    E["🌍 Real Examples"] --> E1["Age >= 18 && hasLicense"]
+    E --> E2["isWeekend || isHoliday"]
+    E --> E3["!isLoggedIn"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ## तार्किक अपरेटरहरूसँग सर्तहरू र निर्णयहरू
 
-यी तार्किक अपरेटरहरूलाई यथार्थपरक उदाहरणसँग प्रयोग गरौं:
+आउनुहोस् यी तार्किक अपरेटरहरूलाई थप यथार्थपरक उदाहरणमा प्रयोग गरौं:
 
 ```javascript
 let currentMoney = 600;
@@ -203,11 +426,40 @@ if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
 }
 ```
 
-यस उदाहरणमा: हामी २०% छुट मूल्य (६४०) गणना गर्छौं, त्यसपछि मूल्याङ्कन गर्छौं कि हाम्रो उपलब्ध रकमले पूर्ण मूल्य वा छुट मूल्य कभर गर्छ। किनभने ६०० छुट मूल्यको थ्रेसहोल्ड ६४० पूरा गर्छ, सर्त `true` मा मूल्याङ्कन हुन्छ।
+यस उदाहरणमा: हामी २०% छुट मूल्य (६४०) गणना गर्छौं, त्यसपछि मूल्याङ्कन गर्छौं कि हाम्रो उपलब्ध रकमले पूर्ण मूल्य वा छुट मूल्य किन्न सक्छ। किनभने ६०० छुट मूल्यको सीमा ६४० पूरा गर्छ, सर्त सत्यमा मूल्याङ्कन हुन्छ।
+
+### 🧮 **तार्किक अपरेटर जाँच: सर्तहरू संयोजन गर्नु**
+
+**तपाईंको तार्किक अपरेटर बुझाइ जाँच गर्नुहोस्:**
+- अभिव्यक्तिमा `A && B`, के हुन्छ यदि A झुटो छ भने? के B पनि मूल्याङ्कन हुन्छ?
+- के तपाईं यस्तो स्थिति सोच्न सक्नुहुन्छ जहाँ तपाईंलाई तीनवटा अपरेटर (&&, ||, !) सँगै आवश्यक पर्छ?
+- `!user.isActive` र `user.isActive !== true` बीचको फरक के हो?
+
+```mermaid
+stateDiagram-v2
+    [*] --> EvaluateA: A && B
+    EvaluateA --> CheckB: A is true
+    EvaluateA --> ReturnFalse: A is false
+    CheckB --> ReturnTrue: B is true
+    CheckB --> ReturnFalse: B is false
+    
+    [*] --> EvaluateC: A || B
+    EvaluateC --> ReturnTrue: A is true
+    EvaluateC --> CheckD: A is false
+    CheckD --> ReturnTrue: B is true
+    CheckD --> ReturnFalse: B is false
+    
+    note right of EvaluateA
+        Short-circuit evaluation:
+        If A is false, B is never checked
+    end note
+```
+
+> **प्रदर्शन टिप**: जाभास्क्रिप्टले "छोटो-सर्किट मूल्याङ्कन" प्रयोग गर्छ - `A && B` मा, यदि A झुटो छ भने, B पनि मूल्याङ्कन हुँदैन। यसलाई आफ्नो फाइदाको लागि प्रयोग गर्नुहोस्!
 
-### नेगेसन अपरेटर
+### नकारात्मक अपरेटर
 
-कहिलेकाहीं केहि सत्य छैन भन्ने कुरा सोध्नु सजिलो हुन्छ। जस्तै "प्रयोगकर्ता लगइन भएको छ?" सोध्नुको सट्टा, तपाईं "प्रयोगकर्ता लगइन भएको छैन?" सोध्न चाहनुहुन्छ। विस्मयादिबोधक चिन्ह (`!`) अपरेटरले तपाईंको लागि तर्क उल्टाउँछ।
+कहिलेकाहीं केहि सत्य छैन भने सोच्नु सजिलो हुन्छ। जस्तै "प्रयोगकर्ता लगइन छ?" सोध्नुको सट्टा, तपाईं "प्रयोगकर्ता लगइन छैन?" सोध्न चाहनुहुन्छ। विस्मयादिबोधक चिन्ह (`!`) अपरेटरले तपाईंको लागि तर्क उल्टाउँछ।
 
 ```javascript
 if (!condition) {
@@ -227,7 +479,7 @@ if (!condition) {
 let variable = condition ? returnThisIfTrue : returnThisIfFalse;
 ```
 
-यो प्रश्न जस्तै पढिन्छ: "के यो सर्त सत्य छ? यदि हो भने, यो मान प्रयोग गर। यदि होइन भने, त्यो मान प्रयोग गर।"
+यो प्रश्न जस्तै पढिन्छ: "के यो सर्त सत्य हो? यदि हो भने, यो मान प्रयोग गर्नुहोस्। यदि होइन भने, त्यो मान प्रयोग गर्नुहोस्।"
 
 तल एक थप ठोस उदाहरण छ:
 
@@ -237,11 +489,11 @@ let secondNumber = 10;
 let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
 ```
 
-✅ यो कोडलाई केही पटक पढ्न समय लिनुहोस्। के तपाईं यी अपरेटरहरू कसरी काम गरिरहेका छन् भन्ने कुरा बुझ्नुभएको छ?
+✅ यो कोडलाई केही पटक पढ्न समय लिनुहोस्। के तपाईं बुझ्न सक्नुहुन्छ कि यी अपरेटरहरू कसरी काम गरिरहेका छन्?
 
-यो लाइनले के भन्छ: "के `firstNumber` `secondNumber` भन्दा ठूलो छ? यदि हो भने, `firstNumber` लाई `biggestNumber` मा राख। यदि होइन भने, `secondNumber` लाई `biggestNumber` मा राख।"
+यो लाइनले के भन्छ: "के `firstNumber` `secondNumber` भन्दा ठूलो छ? यदि हो भने, `firstNumber` लाई `biggestNumber` मा राख्नुहोस्। यदि होइन भने, `secondNumber` लाई `biggestNumber` मा राख्नुहोस्।"
 
-टर्नरी अपरेटरले यो पारम्परिक `if..else` स्टेटमेन्ट लेख्ने छोटो तरिका मात्र हो:
+टर्नरी अपरेटरले यो परम्परागत `if..else` कथन लेख्न छोटो तरिका मात्र हो:
 
 ```javascript
 let biggestNumber;
@@ -252,55 +504,171 @@ if (firstNumber > secondNumber) {
 }
 ```
 
-दुवै दृष्टिकोणले समान परिणाम उत्पादन गर्छ। टर्नरी अपरेटरले संक्षिप्तता प्रदान गर्छ, जबकि पारम्परिक if-else संरचना जटिल सर्तहरूको लागि बढी पढ्न योग्य हुन सक्छ।
+दुबै दृष्टिकोणहरूले समान परिणाम उत्पादन गर्छन्। टर्नरी अपरेटरले संक्षिप्तता प्रदान गर्दछ, जबकि परम्परागत if-else संरचना जटिल सर्तहरूको लागि बढी पढ्न योग्य हुन सक्छ।
+
+```mermaid
+flowchart LR
+    A["🤔 Ternary Operator"] --> B["condition ?"]
+    B --> C["valueIfTrue :"]
+    C --> D["valueIfFalse"]
+    
+    E["📝 Traditional If-Else"] --> F["if (condition) {"]
+    F --> G["  return valueIfTrue"]
+    G --> H["} else {"]
+    H --> I["  return valueIfFalse"]
+    I --> J["}"]
+    
+    K["⚡ When to Use"] --> K1["Simple assignments"]
+    K --> K2["Short conditions"]
+    K --> K3["Inline decisions"]
+    K --> K4["Return statements"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style K fill:#e8f5e8
+```
 
 ---
 
+
+
 ## 🚀 चुनौती
 
-पहिले तार्किक अपरेटरहरूसँग लेखिएको प्रोग्राम बनाउनुहोस्, र त्यसपछि टर्नरी अभिव्यक्तिको प्रयोग गरेर यसलाई पुनःलेख्नुहोस्। तपाईंको मनपर्ने वाक्यविन्यास कुन हो?
+पहिले तार्किक अपरेटरहरू प्रयोग गरेर लेखिएको प्रोग्राम सिर्जना गर्नुहोस्, र त्यसपछि यसलाई टर्नरी अभिव्यक्तिको प्रयोग गरेर पुनःलेख्नुहोस्। तपाईंको मनपर्ने वाक्यविन्यास के हो?
 
 ---
 
 ## GitHub Copilot Agent चुनौती 🚀
 
-Agent मोड प्रयोग गरेर तलको चुनौती पूरा गर्नुहोस्:
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** यस पाठबाट धेरै निर्णय लिने अवधारणाहरू प्रदर्शन गर्ने व्यापक ग्रेड क्यालकुलेटर बनाउनुहोस्, जसमा if-else स्टेटमेन्टहरू, switch स्टेटमेन्टहरू, तार्किक अपरेटरहरू, र टर्नरी अभिव्यक्तिहरू समावेश छन्।
+**विवरण:** यस पाठबाट धेरै निर्णय लिने अवधारणाहरू प्रदर्शन गर्ने व्यापक ग्रेड क्यालकुलेटर सिर्जना गर्नुहोस्, जसमा if-else कथनहरू, switch कथनहरू, तार्किक अपरेटरहरू, र टर्नरी अभिव्यक्तिहरू समावेश छन्।
 
-**प्रेरणा:** जाभास्क्रिप्ट प्रोग्राम लेख्नुहोस् जसले विद्यार्थीको संख्यात्मक स्कोर (०-१००) लिन्छ र निम्न मापदण्ड प्रयोग गरेर तिनीहरूको अक्षर ग्रेड निर्धारण गर्छ:
-- A: 90-100
-- B: 80-89  
-- C: 70-79
-- D: 60-69
-- F: 60 भन्दा तल
+**प्रोम्प्ट:** जाभास्क्रिप्ट प्रोग्राम लेख्नुहोस् जसले विद्यार्थीको संख्यात्मक स्कोर (0-100) लिन्छ र निम्न माप
+२. विद्यार्थी पास हुन्छ (grade >= 60) र सम्मानित हुन्छ (grade >= 90) भनेर जाँच गर्न तार्किक अपरेटरहरू प्रयोग गर्नुहोस्।  
+३. प्रत्येक अक्षर ग्रेडको लागि विशेष प्रतिक्रिया दिन switch statement प्रयोग गर्नुहोस्।  
+४. विद्यार्थी अर्को पाठ्यक्रमको लागि योग्य छ कि छैन (grade >= 70) भनेर निर्धारण गर्न ternary operator प्रयोग गर्नुहोस्।  
+५. स्कोर ० देखि १०० बीचमा छ भनेर सुनिश्चित गर्न इनपुट मान्यता समावेश गर्नुहोस्।  
 
-आवश्यकताहरू:
-1. अक्षर ग्रेड निर्धारण गर्न if-else स्टेटमेन्ट प्रयोग गर्नुहोस्
-2. विद्यार्थी पास भएको (ग्रेड >= 60) र सम्मानित (ग्रेड >= 90) छ कि छैन जाँच गर्न तार्किक अपरेटरहरू प्रयोग गर्नुहोस्
-3. प्रत्येक अक्षर ग्रेडको लागि विशिष्ट प्रतिक्रिया प्रदान गर्न switch स्टेटमेन्ट प्रयोग गर्नुहोस्
-4. विद्यार्थी अर्को पाठ्यक्रमको लागि योग्य छ कि छैन (ग्रेड >= 70) निर्धारण गर्न टर्नरी अपरेटर प्रयोग गर्नुहोस्
-5. स्कोर ० देखि १०० बीचमा छ भन्ने कुरा सुनिश्चित गर्न इनपुट मान्यता समावेश गर्नुहोस्
+तपाईंको प्रोग्रामलाई विभिन्न स्कोरहरू, जस्तै ५९, ६०, ८९, ९०, र अमान्य इनपुटहरू सहित परीक्षण गर्नुहोस्।  
 
-स्कोरहरू सहित विभिन्न परीक्षणहरू गर्नुहोस्, जस्तै ५९, ६०, ८९, ९०, र अमान्य इनपुटहरू।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा यहाँ थप जान्नुहोस्।  
 
-[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बारे थप जान्नुहोस्।
+## पोस्ट-व्याख्यान क्विज  
 
-## पोस्ट-लेक्चर क्विज
+[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/12)  
 
-[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/12)
+## समीक्षा र आत्म-अध्ययन  
 
-## समीक्षा र आत्म अध्ययन
+प्रयोगकर्ताले प्रयोग गर्न सक्ने धेरै अपरेटरहरूको बारेमा [MDN मा](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) थप पढ्नुहोस्।  
 
-प्रयोगकर्तालाई उपलब्ध धेरै अपरेटरहरूको बारेमा [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) मा पढ्नुहोस्।
+जोश कमाउको उत्कृष्ट [अपरेटर लुकअप](https://joshwcomeau.com/operator-lookup/) हेर्नुहोस्!  
 
-जोश कमाउको अद्भुत [अपरेटर लुकअप](https://joshwcomeau.com/operator-lookup/) हेर्नुहोस्!
+## असाइनमेन्ट  
 
-## असाइनमेन्ट
+[अपरेटरहरू](assignment.md)  
 
-[अपरेटरहरू](assignment.md)
+---
+
+## 🧠 **तपाईंको निर्णय-लिने उपकरणको सारांश**  
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Decisions"] --> B["🔍 Boolean Logic"]
+    A --> C["📊 Conditional Statements"]
+    A --> D["🔗 Logical Operators"]
+    A --> E["⚡ Advanced Patterns"]
+    
+    B --> B1["true/false values"]
+    B --> B2["Comparison operators"]
+    B --> B3["Truthiness concepts"]
+    
+    C --> C1["if statements"]
+    C --> C2["if-else chains"]
+    C --> C3["switch statements"]
+    
+    D --> D1["&& (AND)"]
+    D --> D2["|| (OR)"]
+    D --> D3["! (NOT)"]
+    
+    E --> E1["Ternary operator"]
+    E --> E2["Short-circuit evaluation"]
+    E --> E3["Complex conditions"]
+    
+    F["💡 Key Principles"] --> F1["Clear readable conditions"]
+    F --> F2["Consistent comparison style"]
+    F --> F3["Proper operator precedence"]
+    F --> F4["Efficient evaluation order"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+  
+---
+
+## 🚀 तपाईंको जाभास्क्रिप्ट निर्णय-लिने सीपको समयरेखा  
+
+### ⚡ **तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा**  
+- [ ] तपाईंको ब्राउजर कन्सोलमा तुलना अपरेटरहरू अभ्यास गर्नुहोस्।  
+- [ ] तपाईंको उमेर जाँच गर्ने एउटा साधारण if-else statement लेख्नुहोस्।  
+- [ ] चुनौती प्रयास गर्नुहोस्: if-else लाई ternary operator प्रयोग गरेर पुनःलेखन गर्नुहोस्।  
+- [ ] विभिन्न "truthy" र "falsy" मानहरूको साथ के हुन्छ परीक्षण गर्नुहोस्।  
+
+### 🎯 **तपाईंले यो घण्टामा हासिल गर्न सक्ने कुरा**  
+- [ ] पाठ-पछिको क्विज पूरा गर्नुहोस् र कुनै पनि भ्रमित अवधारणाहरू समीक्षा गर्नुहोस्।  
+- [ ] GitHub Copilot चुनौतीबाट व्यापक ग्रेड क्यालकुलेटर बनाउनुहोस्।  
+- [ ] वास्तविक जीवनको परिदृश्यको लागि एउटा साधारण निर्णय वृक्ष बनाउनुहोस् (जस्तै के लगाउने छनोट गर्नु)।  
+- [ ] तार्किक अपरेटरहरूसँग धेरै सर्तहरू संयोजन गर्ने अभ्यास गर्नुहोस्।  
+- [ ] विभिन्न प्रयोगहरूको लागि switch statement प्रयोग गरेर परीक्षण गर्नुहोस्।  
+
+### 📅 **तपाईंको हप्ताको तार्किक सीपको मास्टरी**  
+- [ ] रचनात्मक उदाहरणहरूको साथ अपरेटरहरूको असाइनमेन्ट पूरा गर्नुहोस्।  
+- [ ] विभिन्न सर्त संरचनाहरू प्रयोग गरेर एउटा सानो क्विज एप्लिकेसन बनाउनुहोस्।  
+- [ ] धेरै इनपुट सर्तहरू जाँच गर्ने फर्म मान्यता बनाउनुहोस्।  
+- [ ] जोश कमाउको [अपरेटर लुकअप](https://joshwcomeau.com/operator-lookup/) अभ्यासहरू अभ्यास गर्नुहोस्।  
+- [ ] अधिक उपयुक्त सर्त संरचनाहरू प्रयोग गर्न विद्यमान कोडलाई पुनःलेखन गर्नुहोस्।  
+- [ ] छोटो-सर्किट मूल्यांकन र प्रदर्शन प्रभावहरूको अध्ययन गर्नुहोस्।  
+
+### 🌟 **तपाईंको महिनाको रूपान्तरण**  
+- [ ] जटिल नेस्टेड सर्तहरूमा महारत हासिल गर्नुहोस् र कोड पढ्न सजिलो बनाउनुहोस्।  
+- [ ] परिष्कृत निर्णय-लिने तर्कको साथ एप्लिकेसन बनाउनुहोस्।  
+- [ ] विद्यमान परियोजनाहरूमा सर्त तर्क सुधार गरेर ओपन सोर्समा योगदान गर्नुहोस्।  
+- [ ] विभिन्न सर्त संरचनाहरूको बारेमा अरूलाई सिकाउनुहोस् र प्रत्येक कहिले प्रयोग गर्ने।  
+- [ ] सर्त तर्कको लागि कार्यात्मक प्रोग्रामिङ दृष्टिकोण अन्वेषण गर्नुहोस्।  
+- [ ] सर्तहरूको उत्कृष्ट अभ्यासहरूको लागि व्यक्तिगत सन्दर्भ मार्गदर्शक बनाउनुहोस्।  
+
+### 🏆 **अन्तिम निर्णय-लिने च्याम्पियन जाँच**  
+
+**तपाईंको तार्किक सोचको मास्टरीको उत्सव मनाउनुहोस्:**  
+- तपाईंले सफलतापूर्वक कार्यान्वयन गरेको सबैभन्दा जटिल निर्णय तर्क के हो?  
+- कुन सर्त संरचना तपाईंलाई सबैभन्दा प्राकृतिक लाग्छ र किन?  
+- तार्किक अपरेटरहरूको बारेमा सिक्नाले तपाईंको समस्या समाधान गर्ने दृष्टिकोणलाई कसरी परिवर्तन गरेको छ?  
+- कुन वास्तविक जीवनको एप्लिकेसन परिष्कृत निर्णय-लिने तर्कबाट लाभ उठाउँछ?  
+
+```mermaid
+journey
+    title Your Logical Thinking Evolution
+    section Today
+      Boolean Confusion: 3: You
+      If-Else Understanding: 4: You
+      Operator Recognition: 5: You
+    section This Week
+      Complex Conditions: 4: You
+      Switch Mastery: 5: You
+      Logical Combinations: 5: You
+    section Next Month
+      Advanced Patterns: 5: You
+      Performance Awareness: 5: You
+      Teaching Others: 5: You
+```
+  
+> 🧠 **तपाईंले डिजिटल निर्णय-लिने कलाको मास्टरी हासिल गर्नुभएको छ!** प्रत्येक अन्तरक्रियात्मक एप्लिकेसनले प्रयोगकर्ताको कार्यहरू र परिवर्तनशील अवस्थाहरूमा बुद्धिमानीपूर्वक प्रतिक्रिया दिन सर्त तर्कमा निर्भर गर्दछ। तपाईंले अब तपाईंको प्रोग्रामलाई सोच्न, मूल्याङ्कन गर्न, र उपयुक्त प्रतिक्रिया छनोट गर्न कसरी बनाउने भन्ने कुरा बुझ्नुभएको छ। यो तार्किक आधारले तपाईंले निर्माण गर्ने प्रत्येक गतिशील एप्लिकेसनलाई शक्ति प्रदान गर्नेछ! 🎉  
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/2-js-basics/4-arrays-loops/README.md b/translations/ne/2-js-basics/4-arrays-loops/README.md
index 908b6d3a99..eeb406055b 100644
--- a/translations/ne/2-js-basics/4-arrays-loops/README.md
+++ b/translations/ne/2-js-basics/4-arrays-loops/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "9197f8af0fef9be6e81d4dbda23c7e7d",
-  "translation_date": "2025-10-22T16:41:00+00:00",
+  "original_hash": "1710a50a519a6e4a1b40a5638783018d",
+  "translation_date": "2025-11-03T15:13:43+00:00",
   "source_file": "2-js-basics/4-arrays-loops/README.md",
   "language_code": "ne"
 }
@@ -12,34 +12,91 @@ CO_OP_TRANSLATOR_METADATA:
 ![जाभास्क्रिप्ट आधारभूत - एरेहरू](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ne.png)
 > स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
 
-## प्रि-लेक्चर क्विज
-[प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/13)
+```mermaid
+journey
+    title Your Arrays & Loops Adventure
+    section Array Fundamentals
+      Creating Arrays: 5: You
+      Accessing Elements: 4: You
+      Array Methods: 5: You
+    section Loop Mastery
+      For Loops: 4: You
+      While Loops: 5: You
+      Modern Syntax: 4: You
+    section Data Processing
+      Array + Loops: 5: You
+      Real-world Applications: 4: You
+      Performance Optimization: 5: You
+```
+
+## व्याख्यान अघि क्विज
+[व्याख्यान अघि क्विज](https://ff-quizzes.netlify.app/web/quiz/13)
 
-के तपाईंले कहिल्यै सोच्नुभएको छ कि वेबसाइटहरूले किन शपिङ कार्टका वस्तुहरू ट्र्याक गर्छन् वा तपाईंको साथीहरूको सूची देखाउँछन्? यहीँ एरेहरू र लूपहरूको भूमिका आउँछ। एरेहरू डिजिटल कन्टेनर जस्तै हुन् जसले धेरै जानकारीहरू राख्छन्, जबकि लूपहरूले तपाईंलाई त्यो सबै डेटा कुशलतापूर्वक काम गर्न अनुमति दिन्छन्।
+के तपाईंले कहिल्यै सोच्नुभएको छ कि वेबसाइटहरूले किन किनमेल कार्टका वस्तुहरू ट्र्याक गर्छन् वा तपाईंको साथीहरूको सूची देखाउँछन्? यहीँ एरेहरू र लूपहरू काममा आउँछन्। एरेहरू डिजिटल कन्टेनर जस्तै हुन् जसले धेरै जानकारीहरू राख्छन्, जबकि लूपहरूले तपाईंलाई त्यो डेटा कुशलतापूर्वक काम गर्न अनुमति दिन्छन् बिना दोहोरिने कोड।
 
-यी दुई अवधारणाहरूले तपाईंको प्रोग्रामहरूमा जानकारी व्यवस्थापनको आधार बनाउँछन्। तपाईंले प्रत्येक चरणलाई म्यानुअली लेख्ने कामबाट स्मार्ट, कुशल कोड सिर्जना गर्न सिक्नुहुनेछ जसले सयौं वा हजारौं वस्तुहरू छिटो प्रक्रिया गर्न सक्छ।
+यी दुई अवधारणाहरूले तपाईंको प्रोग्रामहरूमा जानकारी व्यवस्थापनको आधार बनाउँछन्। तपाईंले प्रत्येक चरण म्यानुअल रूपमा लेख्नेबाट स्मार्ट, कुशल कोड सिर्जना गर्न सिक्नुहुनेछ जसले सयौं वा हजारौं वस्तुहरू छिटो प्रक्रिया गर्न सक्छ।
 
-यस पाठको अन्त्यसम्ममा, तपाईंले केही लाइनको कोडले जटिल डेटा कार्यहरू कसरी पूरा गर्ने भन्ने कुरा बुझ्नुहुनेछ। यी आवश्यक प्रोग्रामिङ अवधारणाहरू अन्वेषण गरौं।
+यस पाठको अन्त्यसम्ममा, तपाईंले केही लाइनको कोडले जटिल डेटा कार्यहरू कसरी पूरा गर्ने भन्ने बुझ्नुहुनेछ। यी आवश्यक प्रोग्रामिङ अवधारणाहरू अन्वेषण गरौं।
 
 [![एरेहरू](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "एरेहरू")
 
 [![लूपहरू](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "लूपहरू")
 
-> 🎥 माथिका तस्बिरहरूमा क्लिक गरेर एरेहरू र लूपहरूको भिडियो हेर्नुहोस्।
+> 🎥 माथिका तस्बिरहरूमा क्लिक गर्नुहोस् एरेहरू र लूपहरूबारे भिडियोहरूका लागि।
 
 > तपाईं यो पाठ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) मा लिन सक्नुहुन्छ!
 
+```mermaid
+mindmap
+  root((Data Processing))
+    Arrays
+      Structure
+        Square brackets syntax
+        Zero-based indexing
+        Dynamic sizing
+      Operations
+        push/pop
+        shift/unshift
+        indexOf/includes
+      Types
+        Numbers array
+        Strings array
+        Mixed types
+    Loops
+      For Loops
+        Counting iterations
+        Array processing
+        Predictable flow
+      While Loops
+        Condition-based
+        Unknown iterations
+        User input
+      Modern Syntax
+        for...of
+        forEach
+        Functional methods
+    Applications
+      Data Analysis
+        Statistics
+        Filtering
+        Transformations
+      User Interfaces
+        Lists
+        Menus
+        Galleries
+```
+
 ## एरेहरू
 
-एरेहरूलाई डिजिटल फाइलिङ क्याबिनेटको रूपमा सोच्नुहोस् - एउटा दराजमा एउटा कागजात भण्डारण गर्नुको सट्टा, तपाईं धेरै सम्बन्धित वस्तुहरूलाई एउटै संरचित कन्टेनरमा व्यवस्थित गर्न सक्नुहुन्छ। प्रोग्रामिङ सन्दर्भमा, एरेहरूले तपाईंलाई धेरै जानकारीहरू एउटै प्याकेजमा भण्डारण गर्न अनुमति दिन्छ।
+एरेहरूलाई डिजिटल फाइलिङ क्याबिनेटको रूपमा सोच्नुहोस् - एउटा दराजमा एउटा कागजात भण्डारण गर्ने सट्टा, तपाईं धेरै सम्बन्धित वस्तुहरूलाई एउटै संरचित कन्टेनरमा व्यवस्थित गर्न सक्नुहुन्छ। प्रोग्रामिङ सन्दर्भमा, एरेहरूले तपाईंलाई धेरै जानकारीहरू एउटै संगठित प्याकेजमा भण्डारण गर्न अनुमति दिन्छ।
 
-चाहे तपाईं फोटो ग्यालरी बनाउँदै हुनुहुन्छ, टु-डु सूची व्यवस्थापन गर्दै हुनुहुन्छ, वा खेलमा उच्च स्कोरहरू ट्र्याक गर्दै हुनुहुन्छ, एरेहरूले डेटा संगठनको आधार प्रदान गर्छन्। हेर्नुहोस्, यो कसरी काम गर्छ।
+तपाईं फोटो ग्यालरी बनाउँदै हुनुहुन्छ, टु-डु सूची व्यवस्थापन गर्दै हुनुहुन्छ, वा खेलमा उच्च स्कोरहरू ट्र्याक गर्दै हुनुहुन्छ भने, एरेहरूले डेटा संगठनको आधार प्रदान गर्छन्। आउनुहोस्, यसले कसरी काम गर्छ हेर्नुहोस्।
 
-✅ एरेहरू हाम्रो वरिपरि छन्! के तपाईं एरेको वास्तविक जीवन उदाहरण सोच्न सक्नुहुन्छ, जस्तै सौर्य प्यानल एरे?
+✅ एरेहरू हरेक ठाउँमा छन्! के तपाईं एरेको वास्तविक जीवन उदाहरण सोच्न सक्नुहुन्छ, जस्तै सौर्य प्यानल एरे?
 
-### एरेहरू सिर्जना गर्नु
+### एरेहरू सिर्जना गर्दै
 
-एरे सिर्जना गर्नु धेरै सरल छ - केवल स्क्वायर ब्र्याकेटहरू प्रयोग गर्नुहोस्!
+एरे सिर्जना गर्नु धेरै सरल छ - केवल वर्ग ब्र्याकेटहरू प्रयोग गर्नुहोस्!
 
 ```javascript
 // Empty array - like an empty shopping cart waiting for items
@@ -47,9 +104,9 @@ const myArray = [];
 ```
 
 **यहाँ के भइरहेको छ?**
-तपाईंले स्क्वायर ब्र्याकेटहरू `[]` प्रयोग गरेर एउटा खाली कन्टेनर सिर्जना गर्नुभएको छ। यसलाई खाली पुस्तकालयको शेल्फ जस्तै सोच्नुहोस् - यो तपाईंले त्यहाँ व्यवस्थित गर्न चाहनुभएको कुनै पनि पुस्तकहरू राख्न तयार छ।
+तपाईंले ती वर्ग ब्र्याकेटहरू `[]` प्रयोग गरेर खाली कन्टेनर सिर्जना गर्नुभएको छ। यसलाई खाली पुस्तकालय शेल्फ जस्तै सोच्नुहोस् - यो तपाईंले त्यहाँ व्यवस्थित गर्न चाहनुभएको किताबहरू राख्न तयार छ।
 
-तपाईं आफ्नो एरेलाई सुरुमा नै प्रारम्भिक मानहरूद्वारा भरिएको बनाउन सक्नुहुन्छ:
+तपाईं आफ्नो एरेलाई सुरुवातमै प्रारम्भिक मानहरूद्वारा भरिन पनि सक्नुहुन्छ:
 
 ```javascript
 // Your ice cream shop's flavor menu
@@ -65,23 +122,53 @@ const scores = [95, 87, 92, 78, 85];
 **ध्यान दिन लायक कुराहरू:**
 - तपाईंले एउटै एरेमा पाठ, संख्या, वा सत्य/झुटो मानहरू भण्डारण गर्न सक्नुहुन्छ
 - प्रत्येक वस्तुलाई अल्पविरामले छुट्याउनुहोस् - सजिलो!
-- एरेहरू सम्बन्धित जानकारीहरू सँगै राख्नको लागि उत्तम छन्
+- एरेहरू सम्बन्धित जानकारीहरू सँगै राख्नका लागि उत्तम छन्
+
+```mermaid
+flowchart LR
+    A["📦 Arrays"] --> B["Create [ ]"]
+    A --> C["Store Multiple Items"]
+    A --> D["Access by Index"]
+    
+    B --> B1["const arr = []"]
+    B --> B2["const arr = [1,2,3]"]
+    
+    C --> C1["Numbers"]
+    C --> C2["Strings"]
+    C --> C3["Booleans"]
+    C --> C4["Mixed Types"]
+    
+    D --> D1["arr[0] = first"]
+    D --> D2["arr[1] = second"]
+    D --> D3["arr[2] = third"]
+    
+    E["📊 Array Index"] --> E1["Index 0: First"]
+    E --> E2["Index 1: Second"]
+    E --> E3["Index 2: Third"]
+    E --> E4["Index n-1: Last"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ### एरे इन्डेक्सिङ
 
-यहाँ केहि असामान्य लाग्न सक्छ: एरेहरूले आफ्नो वस्तुहरूलाई 0 बाट सुरु गरेर नम्बर गर्छन्, 1 बाट होइन। यो शून्य-आधारित इन्डेक्सिङ कम्प्युटर मेमोरी कसरी काम गर्छ भन्ने कुरामा आधारित छ - यो प्रोग्रामिङ परम्परा कम्प्युटिङ भाषाहरू जस्तै C को प्रारम्भिक दिनदेखि चल्दै आएको छ। एरेको प्रत्येक स्थानले **इन्डेक्स** भनिने ठेगाना नम्बर पाउँछ।
+यहाँ केहि असामान्य लाग्न सक्छ: एरेहरूले आफ्नो वस्तुहरू 0 बाट सुरु गरेर नम्बर गर्छन्, 1 बाट होइन। यो शून्य-आधारित इन्डेक्सिङ कम्प्युटर मेमोरी कसरी काम गर्छ भन्ने कुरामा आधारित छ - यो प्रोग्रामिङ परम्परा कम्प्युटिङ भाषाहरू जस्तै C को प्रारम्भिक दिनदेखि चल्दै आएको छ। एरेको प्रत्येक स्थानले आफ्नो ठेगाना नम्बर पाउँछ जसलाई **इन्डेक्स** भनिन्छ।
 
 | इन्डेक्स | मान | विवरण |
-|----------|------|--------|
+|-------|-------|-------------|
 | 0 | "चकलेट" | पहिलो तत्व |
 | 1 | "स्ट्रबेरी" | दोस्रो तत्व |
 | 2 | "भ्यानिला" | तेस्रो तत्व |
-| 3 | "पिस्टाचियो" | चौथो तत्व |
+| 3 | "पिस्ताचियो" | चौथो तत्व |
 | 4 | "रकी रोड" | पाँचौं तत्व |
 
-✅ के तपाईंलाई एरेहरू शून्य इन्डेक्सबाट सुरु हुन्छ भन्ने कुरा अचम्म लाग्छ? केही प्रोग्रामिङ भाषाहरूमा इन्डेक्सहरू 1 बाट सुरु हुन्छ। यसको बारेमा रोचक इतिहास [विकिपिडिया](https://en.wikipedia.org/wiki/Zero-based_numbering) मा पढ्न सक्नुहुन्छ।
+✅ के तपाईंलाई एरेहरू शून्य इन्डेक्सबाट सुरु हुन्छ भन्ने कुरा अचम्म लाग्छ? केही प्रोग्रामिङ भाषाहरूमा, इन्डेक्सहरू 1 बाट सुरु हुन्छ। यसको बारेमा रोचक इतिहास छ, जुन तपाईं [विकिपिडियामा पढ्न सक्नुहुन्छ](https://en.wikipedia.org/wiki/Zero-based_numbering)।
 
-**एरे तत्वहरू पहुँच गर्नु:**
+**एरे तत्वहरू पहुँच गर्दै:**
 
 ```javascript
 const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
@@ -93,11 +180,11 @@ console.log(iceCreamFlavors[4]); // "Rocky Road" - last element
 ```
 
 **यहाँ के भइरहेको छ:**
-- **प्रयोग गर्छ** स्क्वायर ब्र्याकेट नोटेशन इन्डेक्स नम्बरसँग तत्वहरू पहुँच गर्न
-- **फिर्ता गर्छ** एरेको सो विशेष स्थानमा भण्डारण गरिएको मान
-- **सुरु गर्छ** 0 बाट गन्न, पहिलो तत्वको इन्डेक्स 0 बनाउँछ
+- **प्रयोग गर्छ** इन्डेक्स नम्बरको साथ वर्ग ब्र्याकेट नोटेशन तत्वहरू पहुँच गर्न
+- **फिर्ता दिन्छ** एरेको सो विशेष स्थानमा भण्डारण गरिएको मान
+- **सुरु गर्छ** 0 बाट गणना गर्दै, पहिलो तत्व इन्डेक्स 0 बनाउँदै
 
-**एरे तत्वहरू परिमार्जन गर्नु:**
+**एरे तत्वहरू परिमार्जन गर्दै:**
 
 ```javascript
 // Change an existing value
@@ -110,15 +197,15 @@ console.log(iceCreamFlavors[5]); // "Cookie Dough"
 ```
 
 **माथिको उदाहरणमा हामीले:**
-- **परिमार्जन गर्‍यौं** इन्डेक्स 4 मा रहेको "रकी रोड" लाई "बटर पेकन" मा
-- **थप गर्‍यौं** नयाँ तत्व "कुकी डो" इन्डेक्स 5 मा
-- **स्वतः विस्तार गर्‍यो** एरेको लम्बाइ जब वर्तमान सीमा भन्दा बाहिर थपियो
+- **परिमार्जन गर्‍यौं** इन्डेक्स 4 मा रहेको तत्व "रकी रोड" बाट "बटर पेकन" मा
+- **नयाँ तत्व थप्यौं** "कुकी डो" इन्डेक्स 5 मा
+- **स्वचालित रूपमा विस्तार गर्‍यो** एरेको लम्बाइ जब वर्तमान सीमा भन्दा पर थपियो
 
 ### एरे लम्बाइ र सामान्य विधिहरू
 
-एरेहरूमा बिल्ट-इन गुणहरू र विधिहरू हुन्छन् जसले डेटा काम गर्न धेरै सजिलो बनाउँछ।
+एरेहरूमा बिल्ट-इन गुणहरू र विधिहरू छन् जसले डेटा काम गर्न धेरै सजिलो बनाउँछ।
 
-**एरे लम्बाइ पत्ता लगाउनु:**
+**एरे लम्बाइ पत्ता लगाउँदै:**
 
 ```javascript
 const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
@@ -130,8 +217,8 @@ console.log(iceCreamFlavors.length); // 6
 ```
 
 **महत्वपूर्ण बुँदाहरू सम्झनुहोस्:**
-- **फिर्ता गर्छ** एरेमा कुल तत्वहरूको संख्या
-- **स्वतः अपडेट हुन्छ** जब तत्वहरू थपिन्छन् वा हटाइन्छन्
+- **फिर्ता दिन्छ** एरेमा कुल तत्वहरूको संख्या
+- **स्वचालित रूपमा अपडेट हुन्छ** जब तत्वहरू थपिन्छन् वा हटाइन्छन्
 - **प्रदान गर्छ** लूपहरू र मान्यताका लागि गतिशील गणना
 
 **आवश्यक एरे विधिहरू:**
@@ -152,30 +239,97 @@ const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
 const hasApple = fruits.includes("apple"); // Returns true
 ```
 
-**यी विधिहरू बुझ्नुहोस्:**
+**यी विधिहरू बुझ्दै:**
 - **थप्छ** `push()` (अन्त्यमा) र `unshift()` (सुरुमा) द्वारा तत्वहरू
 - **हटाउँछ** `pop()` (अन्त्यमा) र `shift()` (सुरुमा) द्वारा तत्वहरू
 - **पत्ता लगाउँछ** `indexOf()` द्वारा तत्वहरू र `includes()` द्वारा अस्तित्व जाँच्छ
-- **फिर्ता गर्छ** उपयोगी मानहरू जस्तै हटाइएका तत्वहरू वा स्थिति इन्डेक्सहरू
+- **फिर्ता दिन्छ** उपयोगी मानहरू जस्तै हटाइएका तत्वहरू वा स्थिति इन्डेक्सहरू
 
 ✅ आफैं प्रयास गर्नुहोस्! आफ्नो ब्राउजरको कन्सोलमा एरे सिर्जना गरेर परिमार्जन गर्नुहोस्।
 
+### 🧠 **एरे आधारभूत जाँच: तपाईंको डेटा व्यवस्थित गर्दै**
+
+**तपाईंको एरे बुझाइ परीक्षण गर्नुहोस्:**
+- तपाईंलाई किन लाग्छ एरेहरू 0 बाट गणना सुरु गर्छन् 1 बाट होइन?
+- के हुन्छ यदि तपाईंले त्यस्तो इन्डेक्स पहुँच गर्न खोज्नुभयो जुन अस्तित्वमा छैन (जस्तै `arr[100]` 5-तत्व एरेमा)?
+- एरेहरू उपयोगी हुने तीन वास्तविक जीवन परिदृश्य सोच्न सक्नुहुन्छ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> EmptyArray: const arr = []
+    EmptyArray --> WithItems: Add elements
+    WithItems --> Accessing: Use indexes
+    Accessing --> Modifying: Change values
+    Modifying --> Processing: Use methods
+    
+    WithItems --> WithItems: push(), unshift()
+    Processing --> Processing: pop(), shift()
+    
+    note right of Accessing
+        Zero-based indexing
+        arr[0] = first element
+    end note
+    
+    note right of Processing
+        Built-in methods
+        Dynamic operations
+    end note
+```
+
+> **वास्तविक जीवन अन्तर्दृष्टि**: एरेहरू प्रोग्रामिङमा हरेक ठाउँमा छन्! सामाजिक मिडिया फिडहरू, किनमेल कार्टहरू, फोटो ग्यालरीहरू, प्लेलिस्ट गीतहरू - यी सबै एरेहरू हुन् पर्दा पछाडि!
+
 ## लूपहरू
 
-चार्ल्स डिकेन्सका उपन्यासहरूमा प्रसिद्ध सजायको बारेमा सोच्नुहोस् जहाँ विद्यार्थीहरूले स्लेटमा बारम्बार लाइनहरू लेख्नुपर्थ्यो। कल्पना गर्नुहोस् यदि तपाईं कसैलाई "यो वाक्य १०० पटक लेख्नुहोस्" भनेर निर्देशन दिन सक्नुहुन्छ र यो स्वचालित रूपमा पूरा हुन्छ। यही कुरा लूपहरूले तपाईंको कोडका लागि गर्छ।
+चार्ल्स डिकेन्सका उपन्यासहरूमा प्रसिद्ध सजायको बारेमा सोच्नुहोस् जहाँ विद्यार्थीहरूले स्लेटमा लाइनहरू बारम्बार लेख्नुपर्थ्यो। कल्पना गर्नुहोस् यदि तपाईं कसैलाई "यो वाक्य 100 पटक लेख" भन्न सक्नुहुन्छ र यो स्वचालित रूपमा पूरा हुन्छ। यही कुरा लूपहरूले तपाईंको कोडका लागि गर्छन्।
 
-लूपहरू tireless सहायक जस्तै हुन् जसले कार्यहरू दोहोर्याउन सक्छ। चाहे तपाईं शपिङ कार्टको प्रत्येक वस्तु जाँच गर्न चाहनुहुन्छ वा एल्बममा सबै फोटोहरू देखाउन चाहनुहुन्छ, लूपहरूले दोहोर्याइलाई कुशलतापूर्वक व्यवस्थापन गर्छ।
+लूपहरू tireless सहायक जस्तै हुन् जसले कार्यहरू दोहोर्याउन सक्छन् बिना त्रुटि। तपाईंलाई किनमेल कार्टको प्रत्येक वस्तु जाँच गर्न वा एल्बममा सबै फोटोहरू देखाउन आवश्यक छ भने, लूपहरूले दोहोर्याइलाई कुशलतापूर्वक व्यवस्थापन गर्छन्।
 
 जाभास्क्रिप्टले छनोट गर्नका लागि धेरै प्रकारका लूपहरू प्रदान गर्दछ। प्रत्येकलाई जाँच गरौं र कहिले प्रयोग गर्ने बुझौं।
 
+```mermaid
+flowchart TD
+    A["🔄 Loop Types"] --> B["For Loop"]
+    A --> C["While Loop"]
+    A --> D["For...of Loop"]
+    A --> E["forEach Method"]
+    
+    B --> B1["Known iterations"]
+    B --> B2["Counter-based"]
+    B --> B3["for(init; condition; increment)"]
+    
+    C --> C1["Unknown iterations"]
+    C --> C2["Condition-based"]
+    C --> C3["while(condition)"]
+    
+    D --> D1["Modern ES6+"]
+    D --> D2["Array iteration"]
+    D --> D3["for(item of array)"]
+    
+    E --> E1["Functional style"]
+    E --> E2["Array method"]
+    E --> E3["array.forEach(callback)"]
+    
+    F["⏰ When to Use"] --> F1["For: Counting, indexes"]
+    F --> F2["While: User input, searching"]
+    F --> F3["For...of: Simple iteration"]
+    F --> F4["forEach: Functional programming"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ### फोर लूप
 
-`for` लूप टाइमर सेट गर्ने जस्तै हो - तपाईंलाई थाहा छ कि तपाईंले कति पटक केहि गर्न चाहनुहुन्छ। यो धेरै व्यवस्थित र पूर्वानुमान योग्य छ, जसले गर्दा यो एरेहरूसँग काम गर्दा वा वस्तुहरू गणना गर्न उत्तम बनाउँछ।
+`for` लूप टाइमर सेट गर्ने जस्तै हो - तपाईंलाई थाहा छ कि तपाईंले कति पटक केहि गर्न चाहनुहुन्छ। यो धेरै व्यवस्थित र पूर्वानुमान योग्य छ, जसले यसलाई एरेहरूसँग काम गर्दा वा वस्तुहरू गणना गर्न उत्तम बनाउँछ।
 
 **फोर लूप संरचना:**
 
 | घटक | उद्देश्य | उदाहरण |
-|------|---------|---------|
+|-----------|---------|----------|
 | **सुरुवात** | सुरु बिन्दु सेट गर्छ | `let i = 0` |
 | **सर्त** | कहिले जारी राख्ने | `i < 10` |
 | **वृद्धि** | कसरी अपडेट गर्ने | `i++` |
@@ -194,20 +348,47 @@ for (let i = 0; i < testScores.length; i++) {
 ```
 
 **चरणबद्ध रूपमा, यहाँ के भइरहेको छ:**
-- **सुरु गर्छ** काउन्टर भेरिएबल `i` लाई 0 मा
+- **सुरु गर्छ** काउन्टर भेरिएबल `i` लाई 0 मा सेट गर्दै
 - **जाँच गर्छ** सर्त `i < 10` प्रत्येक पुनरावृत्तिको अघि
 - **कार्यान्वयन गर्छ** कोड ब्लक जब सर्त सत्य हुन्छ
-- **वृद्धि गर्छ** `i` लाई प्रत्येक पुनरावृत्तिपछि `i++` द्वारा
+- **वृद्धि गर्छ** `i` लाई प्रत्येक पुनरावृत्तिपछि 1 द्वारा `i++` प्रयोग गर्दै
 - **रोक्छ** जब सर्त झुटो हुन्छ (जब `i` 10 पुग्छ)
 
-✅ यो कोड ब्राउजर कन्सोलमा चलाउनुहोस्। काउन्टर, सर्त, वा पुनरावृत्ति अभिव्यक्तिमा सानो परिवर्तन गर्दा के हुन्छ? के तपाईं यसलाई उल्टो चलाउन सक्नुहुन्छ, काउन्टडाउन सिर्जना गर्दै?
+✅ यो कोड ब्राउजर कन्सोलमा चलाउनुहोस्। काउन्टर, सर्त, वा पुनरावृत्ति अभिव्यक्तिमा साना परिवर्तन गर्दा के हुन्छ? के तपाईं यसलाई उल्टो चलाउन सक्नुहुन्छ, काउन्टडाउन सिर्जना गर्दै?
+
+### 🗓️ **फोर लूप मास्टरी जाँच: नियन्त्रित दोहोर्याइ**
+
+**तपाईंको फोर लूप बुझाइ मूल्यांकन गर्नुहोस्:**
+- फोर लूपका तीन भागहरू के हुन्, र प्रत्येकले के गर्छ?
+- तपाईं कसरी एरेलाई उल्टो लूप गर्न सक्नुहुन्छ?
+- यदि तपाईंले वृद्धि भाग (`i++`) बिर्सनुभयो भने के हुन्छ?
+
+```mermaid
+flowchart TD
+    A["🚀 Start For Loop"] --> B["Initialize: let i = 0"]
+    B --> C{"Condition: i < array.length?"}
+    C -->|true| D["Execute code block"]
+    D --> E["Increment: i++"]
+    E --> C
+    C -->|false| F["✅ Exit loop"]
+    
+    G["📋 Common Patterns"] --> G1["for(let i=0; i<n; i++)"]
+    G --> G2["for(let i=n-1; i>=0; i--)"]
+    G --> G3["for(let i=0; i<arr.length; i+=2)"]
+    
+    style A fill:#e3f2fd
+    style F fill:#e8f5e8
+    style G fill:#fff3e0
+```
+
+> **लूप ज्ञान**: फोर लूपहरू उत्तम हुन्छन् जब तपाईंलाई थाहा छ कि तपाईंले कति पटक केहि दोहोर्याउन आवश्यक छ। एरे प्रशोधनका लागि तिनीहरू सबैभन्दा सामान्य छनोट हुन्!
 
 ### ह्वाइल लूप
 
-`while` लूप "यो गरिराख्नुहोस् जबसम्म..." भन्ने जस्तै हो - तपाईंलाई थाहा नहुन सक्छ कि यो कति पटक चल्छ, तर तपाईंलाई थाहा छ कहिले रोक्ने। यो जस्तै प्रयोगका लागि उत्तम छ जहाँ तपाईंले प्रयोगकर्ताबाट इनपुट माग्नुपर्छ जबसम्म तपाईंलाई आवश्यक कुरा प्राप्त हुँदैन, वा डेटा खोज्नुपर्छ जबसम्म तपाईंले खोजेको कुरा भेट्नुहुन्न।
+`while` लूप "यो गरिराख... सम्म" भन्ने जस्तै हो - तपाईंलाई थाहा नहुन सक्छ कि यो कति पटक चल्छ, तर तपाईंलाई थाहा छ कहिले रोक्ने। यो त्यस्तो कुराहरूका लागि उत्तम हो जस्तै प्रयोगकर्ताबाट इनपुट माग्ने जबसम्म उनीहरूले तपाईंलाई चाहिएको कुरा दिन्छन्, वा तपाईंले खोज्न चाहनुभएको डेटा पत्ता लगाउँदासम्म।
 
 **ह्वाइल लूप विशेषताहरू:**
-- **जारी राख्छ** सर्त सत्य रहँदासम्म कार्यान्वयन
+- **जारी राख्छ** सर्त सत्य रहँदासम्म कार्यान्वयन गर्दै
 - **आवश्यक छ** कुनै पनि काउन्टर भेरिएबलहरूको म्यानुअल व्यवस्थापन
 - **जाँच गर्छ** सर्त प्रत्येक पुनरावृत्तिको अघि
 - **जोखिम छ** अनन्त लूपहरू यदि सर्त कहिल्यै झुटो हुँदैन भने
@@ -235,15 +416,49 @@ if (attempts >= maxAttempts) {
 }
 ```
 
-**यी उदाहरणहरू बुझ्नुहोस्:**
+**यी उदाहरणहरू बुझ्दै:**
 - **व्यवस्थापन गर्छ** काउन्टर भेरिएबल `i` लूपको भित्र म्यानुअल रूपमा
 - **वृद्धि गर्छ** काउन्टर अनन्त लूपहरू रोक्न
 - **व्यावहारिक प्रयोग केस देखाउँछ** प्रयोगकर्ता इनपुट र प्रयास सीमित गर्दै
-- **सुरक्षा संयन्त्रहरू समावेश गर्छ** अन्तहीन कार्यान्वयन रोक्न
+- **सुरक्षा संयन्त्रहरू समावेश गर्छ** अनन्त कार्यान्वयन रोक्न
+
+### ♾️ **ह्वाइल लूप ज्ञान जाँच: सर्त-आधारित दोहोर्याइ**
+
+**तपाईंको ह्वाइल लूप बुझाइ परीक्षण गर्नुहोस्:**
+- ह्वाइल लूप प्रयोग गर्दा मुख्य खतरा के हो?
+- तपाईंले फोर लूपको सट्टा ह्वाइल लूप कहिले रोज्नुहुन्छ?
+- तपाईं कसरी अनन्त लूपहरू रोक्न सक्नुहुन्छ?
+
+```mermaid
+flowchart LR
+    A["🔄 While vs For"] --> B["While Loop"]
+    A --> C["For Loop"]
+    
+    B --> B1["Unknown iterations"]
+    B --> B2["Condition-driven"]
+    B --> B3["User input, searching"]
+    B --> B4["⚠️ Risk: infinite loops"]
+    
+    C --> C1["Known iterations"]
+    C --> C2["Counter-driven"]
+    C --> C3["Array processing"]
+    C --> C4["✅ Safe: predictable end"]
+    
+    D["🛡️ Safety Tips"] --> D1["Always modify condition variable"]
+    D --> D2["Include escape conditions"]
+    D --> D3["Set maximum iteration limits"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+```
+
+> **सुरक्षा पहिलो**: ह्वाइल लूपहरू शक्तिशाली छन् तर सर्त व्यवस्थापनमा सावधानी आवश्यक छ। सधैं सुनिश्चित गर्नुहोस् कि तपाईंको लूप सर्त अन्ततः झुटो हुनेछ!
 
 ### आधुनिक लूप विकल्पहरू
 
-जाभास्क्रिप्टले आधुनिक लूप सिन्ट्याक्स प्रदान गर्दछ जसले तपाईंको कोडलाई पढ्न सजिलो र कम त्रुटिपूर्ण बनाउँछ।
+जाभास्क्रिप्टले आधुनिक लूप सिन्ट्याक्स प्रदान गर्दछ जसले तपाईंको कोडलाई पढ्न योग्य र कम त्रुटिपूर्ण बनाउँछ।
 
 **फोर...अफ लूप (ES6+):**
 
@@ -262,9 +477,9 @@ for (let i = 0; i < colors.length; i++) {
 ```
 
 **फोर...अफका मुख्य फाइदाहरू:**
-- **इन्डेक्स व्यवस्थापन हटाउँछ** र सम्भावित त्रुटिहरू
+- **इन्डेक्स व्यवस्थापन हटाउँछ** र सम्भावित त्रुटिहरू कम गर्छ
 - **प्रत्यक्ष पहुँच प्रदान गर्छ** एरे तत्वहरूमा
-- **कोड पढ्न सजिलो बनाउँछ** र सिन्ट्याक्स जटिलता घटाउँछ
+- **कोड पढ्न सजिलो बनाउँछ** र सिन्ट्याक्स जटिलता कम गर्छ
 
 **forEach विधि:**
 
@@ -281,18 +496,44 @@ prices.forEach(price => console.log(`Price: $${price}`));
 ```
 
 **forEachको बारेमा जान्नुपर्ने कुरा:**
-- **प्रत्येक एरे तत्वको लागि कार्यान्वयन गर्छ** एक कार्य
-- **प्रदान गर्छ** तत्व मान र इन्डेक्सलाई प्यारामिटरको रूपमा
-- **छोड्न सकिँदैन** प्रारम्भिक रूपमा (पारम्परिक लूपहरू जस्तो)
-- **फिर्ता गर्छ** undefined (नयाँ एरे सिर्जना गर्दैन)
+- **प्रत्येक एरे तत्वका लागि कार्यान्वयन गर्छ** एक कार्य
+- **प्रदान गर्छ** तत्व मान र इन्डेक्स दुवैलाई प्यारामिटरको रूपमा
+- **रोक्न सकिँदैन** प्रारम्भिक रूपमा (परम्परागत लूपहरू विपरीत)
+- **फिर्ता दिन्छ** undefined (नयाँ एरे सिर्जना गर्दैन)
+
+✅ तपाईं किन फोर लूप बनाम ह्वाइल लूप रोज्नुहुन्छ? 17K दर्शकहरूले StackOverflowमा यही प्रश्न गरेका थिए, र केही विचारहरू [तपाईंलाई रोचक लाग्न सक्छ](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)।
+
+### 🎨 **आधुनिक लूप सिन्ट्याक्स जाँच: ES6+ अपनाउँदै**
+
+**तपाईंको आधुनिक जाभास्क्रिप्ट बुझाइ मूल्यांकन गर्नुहोस्:**
+- परम्परागत फोर लूपहरूमा `for...of` का फाइदाहरू के हुन्?
+- तपाईं कहिले परम्परागत फोर लूपहरू रोज्न सक्नुहुन्छ?
+- `forEach` र `map` बीचको फरक के हो?
+
+```mermaid
+quadrantChart
+    title Loop Selection Guide
+    x-axis Traditional --> Modern
+    y-axis Simple --> Complex
+    quadrant-1 Modern Complex
+    quadrant-2 Traditional Complex
+    quadrant-3 Traditional Simple
+    quadrant-4 Modern Simple
+    
+    Traditional For: [0.2, 0.7]
+    While Loop: [0.3, 0.6]
+    For...of: [0.8, 0.3]
+    forEach: [0.9, 0.4]
+    Array Methods: [0.8, 0.8]
+```
 
-✅ किन तपाईंले फोर लूप बनाम ह्वाइल लूप छनोट गर्नुहुन्छ? १७ हजार दर्शकहरूले StackOverflow मा यही प्रश्न गरेका थिए, र केही विचारहरू [तपाईंलाई रोचक लाग्न सक्छ](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)।
+> **आधुनिक प्रवृत्ति**: ES6+ सिन्ट्याक्स जस्तै `for...of` र `forEach` एरे पुनरावृत्तिका लागि प्राथमिक दृष्टिकोण बनिरहेको छ किनभने यो सफा र कम त्रुटिपूर्ण छ!
 
 ## लूपहरू र एरेहरू
 
-एरेहरूलाई लूपहरूसँग मिलाएर शक्तिशाली डेटा प्रशोधन क्षमता सिर्जना हुन्छ। यो जोडी धेरै प्रोग्रामिङ कार्यहरूको लागि आधारभूत हो, सूचीहरू देखाउनेदेखि लिएर तथ्याङ्क गणना गर्नसम्म।
+एरेहरूलाई लूपहरूसँग संयोजन गर्दा शक्तिशाली डेटा प्रशोधन क्षमता सिर्जना हुन्छ। यो जोडी धेरै प्रोग्रामिङ कार्यहरूको लागि आधारभूत हो, सूचीहरू देखाउनेदेखि लिएर तथ्याङ्कहरू गणना गर्नसम्म।
 
-**पारम्परिक एरे प्रशोधन:**
+**परम्परागत एरे प्रशोधन:**
 
 ```javascript
 const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
@@ -310,7 +551,7 @@ for (const flavor of iceCreamFlavors) {
 
 **प्रत्येक दृष्टिकोण बुझौं:**
 - **प्रयोग गर्छ** एरे लम्बाइ गुण लूप सीमा निर्धारण गर्न
-- **पहुंच गर्छ** पारम्परिक फोर लूपहरूमा इन्डेक्सद्वारा तत्वहरू
+- **पहुंच गर्छ** परम्परागत फोर लूपहरूमा इन्डेक्सद्वारा तत्वहरू
 - **प्रत्यक्ष तत्व पहुँच प्रदान गर्छ** फोर...अफ लूपहरूमा
 - **प्रत्येक एरे तत्वलाई ठीक एक पटक प्रक्रिया गर्छ**
 
@@ -343,39 +584,61 @@ console.log(`Lowest: ${lowestGrade}`);
 ```
 
 **यो कोड कसरी काम गर्छ:**
-- **सुरु गर्छ** ट्र्याकिङ भेरिएबलहरू कुल र चरमहरूको लागि
-- **प्रत्येक ग्रेड प्रक्रिया गर्छ** एकल कुशल लूपसँग
-- **कुल जम्मा गर्छ** औसत गणनाको लागि
+- **सुरु गर्छ** ट्र्याकिङ भेरिएबलहरू सम, चरम मानहरूको लागि
+- **प्रत्येक ग्रेड प्रक्रिया गर्छ** एकल कुशल लूपद्वारा
+- **कुल जम्मा गर्छ** औसत गणनाका लागि
 - **ट्र्याक गर्छ** उच्चतम र न्यूनतम मानहरू पुनरावृत्तिको क्रममा
-- **अन्तिम तथ्याङ्क गणना गर्छ** लूप पूरा भएपछि
+- **अन्तिम तथ्याङ्कहरू गणना गर्छ** लूप पूरा भएपछि
 
 ✅ आफ्नो ब्राउजरको कन्सोलमा आफ्नै एरेमा लूप गर्दै प्रयोग गर्नुहोस्।
 
----
-
-## GitHub Copilot Agent Challenge 🚀
-
-Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
+```mermaid
+flowchart TD
+    A["📦 Array Data"] --> B["🔄 Loop Processing"]
+    B --> C["📈 Results"]
+    
+    A1["[85, 92, 78, 96, 88]"] --> A
+    
+    B --> B1["Calculate total"]
+    B --> B2["Find min/max"]
+    B --> B3["Count conditions"]
+    B --> B4["Transform data"]
+    
+    C --> C1["Average: 87.8"]
+    C --> C2["Highest: 96"]
+    C --> C3["Passing: 5/5"]
+    C --> C4["Letter grades"]
+    
+    D["⚡ Processing Patterns"] --> D1["Accumulation (sum)"]
+    D --> D2["Comparison (min/max)"]
+    D --> D3["Filtering (conditions)"]
+    D --> D4["Mapping (transformation)"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#f3e5f5
+```
 
-**विवरण:** एरेहरू र लूपहरूलाई संयोजन गरेर डेटा सेट विश्लेषण गर्ने र अर्थपूर्ण जानकारी उत्पन्न गर्ने व्यापक डेटा प्रशोधन कार्य सिर्जना गर्नुहोस्।
+---
 
-**प्रेरणा:** `analyzeGrades` नामक एक कार्य सिर्जना गर्नुहोस् जसले विद्यार्थी ग्रेड वस्तुहरूको एरे (प्रत्येकमा नाम र स्कोर गुणहरू समावेश छ) लिन्छ र तथ्याङ्कहरू सहितको वस्तु फिर्ता गर्छ जस्तै उच्चतम स्कोर, न्यूनतम स्कोर, औसत स्कोर, पास भएका विद्यार्थीहरूको संख्या (स्कोर >= 70), र औसतभन्दा माथि स्कोर गर्ने विद्यार्थीहरूको नामहरूको एरे। आफ्नो समाधानमा कम्तीमा दुई फरक लूप प्रकार प्रयोग गर्नुहोस्।
+## GitHub Copilot एजेन्ट चुनौती 🚀
 
-Agent मोडको बारेमा [यहाँ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) थप जान्नुहोस्।
+एजेन्ट मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-## 🚀 चुनौती
+**विवरण:** एरेहरू र लूपहरू संयोजन गरेर डेटासेट विश्लेषण गर्ने र अर्थपूर्ण अन्तर्दृष्टि उत्पन्न गर्ने व्यापक डेटा प्रशोधन कार्य सिर्जना गर्नुहोस्।
 
-जाभास्क्रिप्टले परम्परागत लूपहरूको लागि विशिष्ट कार्यहरू प्रतिस्थापन गर्न धेरै आधुनिक एरे विधिहरू प्रदान गर्दछ। [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), र [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) अन्वेषण गर्नुहोस्। 
+**प्रम्ट:** `analyzeGrades` नामक एक कार्य सिर्जना गर्नुहोस् जसले विद्यार्थी ग्रेड वस्तुहरूको एरे (प्रत्येकमा नाम र स्कोर गुणहरू समावेश छन्) लिन्छ र तथ्याङ्कहरू सहितको वस्तु फिर्ता गर्छ जस्तै उच्चतम स्कोर, न्यूनतम स्कोर, औसत स्कोर, पास भएका विद्यार्थीहरूको संख्या (स्कोर >= 70
+जाभास्क्रिप्टले केही आधुनिक एरे मेथडहरू प्रदान गर्दछ जसले विशेष कार्यहरूको लागि परम्परागत लूपहरूलाई प्रतिस्थापन गर्न सक्छ। [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), र [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) को अन्वेषण गर्नुहोस्।
 
-**तपाईंको चुनौती:** विद्यार्थी ग्रेड उदाहरणलाई कम्तीमा तीन फरक एरे विधिहरू प्रयोग गरेर पुनःलेखन गर्नुहोस्। आधुनिक जाभास्क्रिप्ट सिन्ट्याक्सले कोड कति सफा र पढ्न सजिलो बनाउँछ ध्यान दिनुहोस्।
+**तपाईंको चुनौती:** विद्यार्थी ग्रेडको उदाहरणलाई कम्तीमा तीन फरक एरे मेथडहरू प्रयोग गरेर पुनःलेखन गर्नुहोस्। आधुनिक जाभास्क्रिप्ट सिन्ट्याक्सले कोड कति सफा र पढ्न सजिलो बनाउँछ भन्ने कुरामा ध्यान दिनुहोस्।
 
 ## पोस्ट-लेक्चर क्विज
 [पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/14)
 
+## समीक्षा र आत्म-अध्ययन
 
-## समीक्षा र आत्म अध्ययन
-
-जाभास्क्रिप्टमा एरेहरूमा धेरै विधिहरू संलग्न छन्, जुन डेटा हेरफेरको लागि अत्यन्त उपयोगी छन्। [यी विधिहरूको बारेमा पढ्नुहोस्](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) र आफ्नो सिर्जना गरिएको एरेमा केही विधिहरू (जस्तै push, pop, slice र splice) प्रयास गर्नुहोस्।
+जाभास्क्रिप्टमा एरेहरूमा धेरै मेथडहरू जोडिएका छन्, जुन डाटा हेरफेरको लागि अत्यन्त उपयोगी छन्। [यी मेथडहरूबारे पढ्नुहोस्](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) र आफ्नो सिर्जनाको एरेमा केही प्रयास गर्नुहोस् (जस्तै push, pop, slice र splice)।
 
 ## असाइनमेन्ट
 
@@ -383,5 +646,109 @@ Agent मोडको बारेमा [यहाँ](https://code.visualstudi
 
 ---
 
+## 📊 **तपाईंको एरेहरू र लूप टूलकिट सारांश**
+
+```mermaid
+graph TD
+    A["🎯 Arrays & Loops Mastery"] --> B["📦 Array Fundamentals"]
+    A --> C["🔄 Loop Types"]
+    A --> D["🔗 Data Processing"]
+    A --> E["🎨 Modern Techniques"]
+    
+    B --> B1["Creation: [ ]"]
+    B --> B2["Indexing: arr[0]"]
+    B --> B3["Methods: push, pop"]
+    B --> B4["Properties: length"]
+    
+    C --> C1["For: Known iterations"]
+    C --> C2["While: Condition-based"]
+    C --> C3["For...of: Direct access"]
+    C --> C4["forEach: Functional"]
+    
+    D --> D1["Statistics calculation"]
+    D --> D2["Data transformation"]
+    D --> D3["Filtering & searching"]
+    D --> D4["Real-time processing"]
+    
+    E --> E1["Arrow functions"]
+    E --> E2["Method chaining"]
+    E --> E3["Destructuring"]
+    E --> E4["Template literals"]
+    
+    F["💡 Key Benefits"] --> F1["Efficient data handling"]
+    F --> F2["Reduced code repetition"]
+    F --> F3["Scalable solutions"]
+    F --> F4["Cleaner syntax"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 तपाईंको एरेहरू र लूप मास्टरी टाइमलाइन
+
+### ⚡ **तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा**
+- [ ] आफ्नो मनपर्ने फिल्महरूको एरे सिर्जना गर्नुहोस् र विशिष्ट तत्वहरू पहुँच गर्नुहोस्
+- [ ] १ देखि १० सम्म गणना गर्ने एउटा for लूप लेख्नुहोस्
+- [ ] पाठबाट आधुनिक एरे मेथडहरूको चुनौती प्रयास गर्नुहोस्
+- [ ] आफ्नो ब्राउजर कन्सोलमा एरे इन्डेक्सिङ अभ्यास गर्नुहोस्
+
+### 🎯 **तपाईंले यो घण्टामा हासिल गर्न सक्ने कुरा**
+- [ ] पोस्ट-लेक्चर क्विज पूरा गर्नुहोस् र कुनै चुनौतीपूर्ण अवधारणाहरू समीक्षा गर्नुहोस्
+- [ ] GitHub Copilot चुनौतीबाट व्यापक ग्रेड एनालाइजर निर्माण गर्नुहोस्
+- [ ] वस्तुहरू थप्ने र हटाउने एउटा साधारण किनमेल कार्ट बनाउनुहोस्
+- [ ] विभिन्न लूप प्रकारहरूमा रूपान्तरण अभ्यास गर्नुहोस्
+- [ ] `push`, `pop`, `slice`, र `splice` जस्ता एरे मेथडहरूमा प्रयोग गर्नुहोस्
+
+### 📅 **तपाईंको हप्ताभरि डाटा प्रोसेसिङ यात्रा**
+- [ ] "एरे लूप गर्नुहोस्" असाइनमेन्ट रचनात्मक सुधारसहित पूरा गर्नुहोस्
+- [ ] एरेहरू र लूपहरू प्रयोग गरेर टु-डु सूची एप्लिकेसन बनाउनुहोस्
+- [ ] संख्यात्मक डाटाको लागि साधारण तथ्यांक क्यालकुलेटर बनाउनुहोस्
+- [ ] [MDN एरे मेथडहरू](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) संग अभ्यास गर्नुहोस्
+- [ ] फोटो ग्यालरी वा संगीत प्लेलिस्ट इन्टरफेस निर्माण गर्नुहोस्
+- [ ] `map`, `filter`, र `reduce` संग फङ्सनल प्रोग्रामिङ अन्वेषण गर्नुहोस्
+
+### 🌟 **तपाईंको महिनाभरि रूपान्तरण**
+- [ ] उन्नत एरे अपरेसनहरू र प्रदर्शन अनुकूलनमा महारत हासिल गर्नुहोस्
+- [ ] पूर्ण डाटा भिजुअलाइजेसन ड्यासबोर्ड निर्माण गर्नुहोस्
+- [ ] डाटा प्रोसेसिङ समावेश गर्ने ओपन सोर्स प्रोजेक्टहरूमा योगदान गर्नुहोस्
+- [ ] व्यावहारिक उदाहरणहरूसँग कसैलाई एरेहरू र लूपहरूबारे सिकाउनुहोस्
+- [ ] पुनः प्रयोग गर्न मिल्ने डाटा प्रोसेसिङ फङ्सनहरूको व्यक्तिगत पुस्तकालय सिर्जना गर्नुहोस्
+- [ ] एरेहरूमा आधारित एल्गोरिदम र डाटा संरचनाहरू अन्वेषण गर्नुहोस्
+
+### 🏆 **अन्तिम डाटा प्रोसेसिङ च्याम्पियन चेक-इन**
+
+**तपाईंको एरे र लूप मास्टरीको उत्सव मनाउनुहोस्:**
+- वास्तविक संसारको अनुप्रयोगहरूको लागि तपाईंले सिकेको सबैभन्दा उपयोगी एरे अपरेसन के हो?
+- कुन लूप प्रकार तपाईंलाई सबैभन्दा प्राकृतिक लाग्छ र किन?
+- एरेहरू र लूपहरूको समझले डाटा व्यवस्थित गर्ने तपाईंको दृष्टिकोणलाई कसरी परिवर्तन गर्यो?
+- तपाईंले अर्को कुन जटिल डाटा प्रोसेसिङ कार्यलाई सम्बोधन गर्न चाहनुहुन्छ?
+
+```mermaid
+journey
+    title Your Data Processing Evolution
+    section Today
+      Array Confusion: 3: You
+      Loop Basics: 4: You
+      Index Understanding: 5: You
+    section This Week
+      Method Mastery: 4: You
+      Efficient Processing: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Complex Algorithms: 5: You
+      Performance Optimization: 5: You
+      Teaching Others: 5: You
+```
+
+> 📦 **तपाईंले डाटा संगठन र प्रोसेसिङको शक्ति अनलक गर्नुभएको छ!** एरेहरू र लूपहरू लगभग हरेक एप्लिकेसनको आधार हुन् जुन तपाईंले कहिल्यै निर्माण गर्नुहुनेछ। साधारण सूचीहरूदेखि जटिल डाटा विश्लेषणसम्म, तपाईंसँग अब जानकारीलाई कुशलतापूर्वक र सुन्दर रूपमा ह्यान्डल गर्ने उपकरणहरू छन्। प्रत्येक गतिशील वेबसाइट, मोबाइल एप, र डाटा-चालित एप्लिकेसन यी आधारभूत अवधारणाहरूमा निर्भर गर्दछ। स्केलेबल डाटा प्रोसेसिङको संसारमा स्वागत छ! 🎉
+
+---
+
 **अस्वीकरण**:  
 यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/3-terrarium/1-intro-to-html/README.md b/translations/ne/3-terrarium/1-intro-to-html/README.md
index 8452447a41..f03632c7bc 100644
--- a/translations/ne/3-terrarium/1-intro-to-html/README.md
+++ b/translations/ne/3-terrarium/1-intro-to-html/README.md
@@ -1,22 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "20c72cf2e5b0050d38ca3cb14a75a9df",
-  "translation_date": "2025-10-22T17:01:03+00:00",
+  "original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
+  "translation_date": "2025-11-03T15:36:01+00:00",
   "source_file": "3-terrarium/1-intro-to-html/README.md",
   "language_code": "ne"
 }
 -->
 # टेरारियम परियोजना भाग १: HTML को परिचय
 
+```mermaid
+journey
+    title Your HTML Learning Journey
+    section Foundation
+      Create HTML file: 3: Student
+      Add DOCTYPE: 4: Student
+      Structure document: 5: Student
+    section Content
+      Add metadata: 4: Student
+      Include images: 5: Student
+      Organize layout: 5: Student
+    section Semantics
+      Use proper tags: 4: Student
+      Enhance accessibility: 5: Student
+      Build terrarium: 5: Student
+```
+
 ![HTML को परिचय](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ne.png)
 > स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
 
-HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, तपाईंले कहिल्यै भ्रमण गरेको प्रत्येक वेबसाइटको आधार हो। HTML लाई वेब पृष्ठहरूको संरचना दिने हड्डीको रूपमा सोच्नुहोस् – यसले सामग्री कहाँ जान्छ, कसरी व्यवस्थित हुन्छ, र प्रत्येक टुक्राले के प्रतिनिधित्व गर्छ भनेर परिभाषित गर्दछ। CSS पछि तपाईंको HTML लाई रंग र लेआउटले "सजाउनेछ", र JavaScript ले अन्तरक्रियात्मकता संग यसलाई जीवन्त बनाउनेछ, HTML ले आवश्यक संरचना प्रदान गर्दछ जसले अरू सबै सम्भव बनाउँछ।
-
-यस पाठमा, तपाईंले भर्चुअल टेरारियम इन्टरफेसको लागि HTML संरचना सिर्जना गर्नुहुनेछ। यो व्यावहारिक परियोजनाले तपाईंलाई HTML को आधारभूत अवधारणाहरू सिकाउँछ जबकि दृश्यात्मक रूपमा आकर्षक केहि निर्माण गर्दै। तपाईंले सामग्रीलाई अर्थपूर्ण तत्वहरू प्रयोग गरेर व्यवस्थित गर्ने, छविहरूसँग काम गर्ने, र अन्तरक्रियात्मक वेब अनुप्रयोगको आधार सिर्जना गर्ने सिक्नुहुनेछ।
-
-पाठको अन्त्यसम्ममा, तपाईंले HTML पृष्ठ तयार गर्नुहुनेछ जसले व्यवस्थित स्तम्भहरूमा बिरुवाका छविहरू प्रदर्शन गर्दछ, अर्को पाठमा शैलीको लागि तयार। चिन्ता नगर्नुहोस् यदि यो सुरुमा आधारभूत देखिन्छ – CSS ले दृश्यात्मक चमक थप्नु अघि HTML ले ठीक यही गर्नुपर्छ।
+HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, तपाईंले कहिल्यै भ्रमण गरेको प्रत्येक वेबसाइटको आधार हो। HTML लाई वेब पृष्ठहरूको संरचना दिने कंकालको रूपमा सोच्नुहोस् – यसले सामग्री कहाँ जान्छ, कसरी व्यवस्थित हुन्छ, र प्रत्येक टुक्राले के प्रतिनिधित्व गर्दछ भनेर परिभाषित गर्दछ। CSS ले पछि तपाईंको HTML लाई रंग र लेआउटको साथ "सजाउनेछ", र जाभास्क्रिप्टले अन्तरक्रियात्मकता संग यसलाई जीवनमा ल्याउनेछ, HTML ले सबै कुरा सम्भव बनाउने आवश्यक संरचना प्रदान गर्दछ।
+
+यस पाठमा, तपाईंले भर्चुअल टेरारियम इन्टरफेसको लागि HTML संरचना सिर्जना गर्नुहुनेछ। यो व्यावहारिक परियोजनाले तपाईंलाई मौलिक HTML अवधारणाहरू सिकाउँछ जबकि दृश्य रूपमा आकर्षक केहि निर्माण गर्दै। तपाईंले सामग्रीलाई सेम्यान्टिक तत्वहरू प्रयोग गरेर कसरी व्यवस्थित गर्ने, छविहरूसँग काम गर्ने, र अन्तरक्रियात्मक वेब अनुप्रयोगको लागि आधार सिर्जना गर्ने सिक्नुहुनेछ।
+
+यस पाठको अन्त्यमा, तपाईंले व्यवस्थित स्तम्भहरूमा बिरुवाको छविहरू प्रदर्शन गर्ने कार्यरत HTML पृष्ठ पाउनुहुनेछ, जुन अर्को पाठमा शैलीको लागि तयार हुनेछ। यदि यो सुरुमा आधारभूत देखिन्छ भने चिन्ता नगर्नुहोस् – CSS ले दृश्य चमक थप्नुअघि HTML ले ठीक यही गर्नुपर्छ।
+
+```mermaid
+mindmap
+  root((HTML Fundamentals))
+    Structure
+      DOCTYPE Declaration
+      HTML Element
+      Head Section
+      Body Content
+    Elements
+      Tags & Attributes
+      Self-closing Tags
+      Nested Elements
+      Block vs Inline
+    Content
+      Text Elements
+      Images
+      Containers (div)
+      Lists
+    Semantics
+      Meaningful Tags
+      Accessibility
+      Screen Readers
+      SEO Benefits
+    Best Practices
+      Proper Nesting
+      Valid Markup
+      Descriptive Alt Text
+      Organized Structure
+```
 
 ## प्रि-लेक्चर क्विज
 
@@ -24,24 +71,24 @@ HTML, वा हाइपरटेक्स्ट मार्कअप भा
 
 > 📺 **हेर्नुहोस् र सिक्नुहोस्**: यो उपयोगी भिडियो अवलोकन हेर्नुहोस्
 > 
-> [![HTML को आधारभूत भिडियो](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+> [![HTML आधारभूत भिडियो](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
 
 ## तपाईंको परियोजना सेट अप गर्दै
 
-HTML को कोडमा प्रवेश गर्नु अघि, तपाईंको टेरारियम परियोजनाको लागि उचित कार्यक्षेत्र सेट अप गरौं। सुरुबाट व्यवस्थित फाइल संरचना सिर्जना गर्नु वेब विकासको यात्रामा तपाईंलाई राम्रो सेवा दिने महत्त्वपूर्ण बानी हो।
+HTML कोडमा प्रवेश गर्नु अघि, तपाईंको टेरारियम परियोजनाको लागि उचित कार्यक्षेत्र सेट अप गरौं। सुरुबाट व्यवस्थित फाइल संरचना सिर्जना गर्नु वेब विकासको यात्रामा तपाईंलाई राम्रो सेवा दिने महत्त्वपूर्ण बानी हो।
 
 ### कार्य: तपाईंको परियोजना संरचना सिर्जना गर्नुहोस्
 
 तपाईंले आफ्नो टेरारियम परियोजनाको लागि समर्पित फोल्डर सिर्जना गर्नुहुनेछ र आफ्नो पहिलो HTML फाइल थप्नुहुनेछ। यहाँ दुई दृष्टिकोणहरू छन् जुन तपाईं प्रयोग गर्न सक्नुहुन्छ:
 
-**विकल्प १: Visual Studio Code प्रयोग गर्दै**
-1. Visual Studio Code खोल्नुहोस्
-2. "File" → "Open Folder" मा क्लिक गर्नुहोस् वा `Ctrl+K, Ctrl+O` (Windows/Linux) वा `Cmd+K, Cmd+O` (Mac) प्रयोग गर्नुहोस्
-3. `terrarium` नामको नयाँ फोल्डर सिर्जना गर्नुहोस् र यसलाई चयन गर्नुहोस्
-4. Explorer प्यानमा, "New File" आइकनमा क्लिक गर्नुहोस्
+**विकल्प १: भिजुअल स्टुडियो कोड प्रयोग गर्दै**
+1. भिजुअल स्टुडियो कोड खोल्नुहोस्
+2. "फाइल" → "फोल्डर खोल्नुहोस्" क्लिक गर्नुहोस् वा `Ctrl+K, Ctrl+O` (विन्डोज/लिनक्स) वा `Cmd+K, Cmd+O` (म्याक) प्रयोग गर्नुहोस्
+3. `terrarium` नामक नयाँ फोल्डर सिर्जना गर्नुहोस् र यसलाई चयन गर्नुहोस्
+4. एक्सप्लोरर प्यानमा, "नयाँ फाइल" आइकन क्लिक गर्नुहोस्
 5. तपाईंको फाइललाई `index.html` नाम दिनुहोस्
 
-![VS Code Explorer नयाँ फाइल सिर्जना देखाउँदै](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ne.png)
+![VS कोड एक्सप्लोरर नयाँ फाइल सिर्जना देखाउँदै](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ne.png)
 
 **विकल्प २: टर्मिनल कमाण्डहरू प्रयोग गर्दै**
 ```bash
@@ -52,22 +99,40 @@ code index.html
 ```
 
 **यी कमाण्डहरूले के गर्छन्:**
-- **नयाँ डाइरेक्टरी सिर्जना गर्छन्** जसको नाम `terrarium` छ
-- **टेरारियम डाइरेक्टरीमा जान्छ**
-- **खाली `index.html` फाइल सिर्जना गर्छ**
-- **फाइललाई Visual Studio Code मा सम्पादनको लागि खोल्छ**
+- **नयाँ डाइरेक्टरी सिर्जना गर्छन्** `terrarium` नामक तपाईंको परियोजनाको लागि
+- **डाइरेक्टरीमा जान्छन्** `terrarium`
+- **खाली `index.html` फाइल सिर्जना गर्छन्**
+- **फाइललाई भिजुअल स्टुडियो कोडमा सम्पादनको लागि खोल्छन्**
 
-> 💡 **प्रो टिप**: फाइल नाम `index.html` वेब विकासमा विशेष छ। जब कोही वेबसाइट भ्रमण गर्छ, ब्राउजरहरूले स्वतः `index.html` लाई डिफल्ट पृष्ठको रूपमा प्रदर्शन गर्न खोज्छ। यसको मतलब `https://mysite.com/projects/` जस्तो URL ले `projects` फोल्डरबाट `index.html` फाइल स्वतः सेवा गर्नेछ बिना URL मा फाइल नाम निर्दिष्ट नगरी।
+> 💡 **प्रो टिप**: फाइल नाम `index.html` वेब विकासमा विशेष छ। जब कसैले वेबसाइट भ्रमण गर्छ, ब्राउजरहरूले स्वतः `index.html` लाई डिफल्ट पृष्ठको रूपमा प्रदर्शन गर्न खोज्छन्। यसको मतलब `https://mysite.com/projects/` जस्तो URL ले `projects` फोल्डरबाट `index.html` फाइल स्वतः सेवा गर्नेछ बिना URL मा फाइल नाम निर्दिष्ट नगरी।
 
 ## HTML डकुमेन्ट संरचना बुझ्दै
 
-प्रत्येक HTML डकुमेन्टले ब्राउजरहरूले सही रूपमा बुझ्न र प्रदर्शन गर्न आवश्यक विशिष्ट संरचना अनुसरण गर्दछ। यस संरचनालाई औपचारिक पत्र जस्तै सोच्नुहोस् – यसमा आवश्यक तत्वहरू छन् जुन ब्राउजरले सामग्रीलाई सही रूपमा प्रक्रिया गर्न मद्दत गर्दछ।
+प्रत्येक HTML डकुमेन्टले ब्राउजरहरूले सही रूपमा बुझ्न र प्रदर्शन गर्न आवश्यक विशिष्ट संरचनाको पालना गर्दछ। यस संरचनालाई औपचारिक पत्र जस्तै सोच्नुहोस् – यसमा विशेष क्रममा आवश्यक तत्वहरू छन् जसले प्राप्तकर्तालाई (यस अवस्थामा, ब्राउजर) सामग्री सही रूपमा प्रक्रिया गर्न मद्दत गर्दछ।
+
+```mermaid
+flowchart TD
+    A["<!DOCTYPE html>"] --> B["<html>"]
+    B --> C["<head>"]
+    C --> D["<title>"]
+    C --> E["<meta charset>"]
+    C --> F["<meta viewport>"]
+    B --> G["<body>"]
+    G --> H["<h1> Heading"]
+    G --> I["<div> Containers"]
+    G --> J["<img> Images"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style C fill:#fff3e0
+    style G fill:#e8f5e8
+```
 
 आउनुहोस्, प्रत्येक HTML डकुमेन्टलाई आवश्यक पर्ने आधारभूत संरचना थप्न सुरु गरौं।
 
 ### DOCTYPE घोषणा र रूट तत्व
 
-कुनै पनि HTML फाइलको पहिलो दुई लाइनले ब्राउजरलाई डकुमेन्टको "परिचय" दिन्छ:
+कुनै पनि HTML फाइलको पहिलो दुई लाइनहरूले ब्राउजरलाई डकुमेन्टको "परिचय" को रूपमा सेवा गर्छन्:
 
 ```html
 <!DOCTYPE html>
@@ -75,24 +140,32 @@ code index.html
 ```
 
 **यस कोडले के गर्छ:**
-- **डकुमेन्ट प्रकारलाई HTML5 को रूपमा घोषणा गर्छ** `<!DOCTYPE html>` प्रयोग गरेर
+- **डकुमेन्ट प्रकार HTML5 घोषणा गर्छ** `<!DOCTYPE html>` प्रयोग गरेर
 - **रूट `<html>` तत्व सिर्जना गर्छ** जसले सबै पृष्ठ सामग्री समावेश गर्दछ
 - **आधुनिक वेब मापदण्डहरू स्थापना गर्छ** सही ब्राउजर रेंडरिंगको लागि
 - **विभिन्न ब्राउजर र उपकरणहरूमा स्थिर प्रदर्शन सुनिश्चित गर्छ**
 
-> 💡 **VS Code टिप**: VS Code मा कुनै पनि HTML ट्यागमा होभर गर्नुहोस् र MDN Web Docs बाट उपयोगी जानकारी हेर्नुहोस्, जसमा प्रयोगका उदाहरणहरू र ब्राउजर अनुकूलता विवरणहरू समावेश छन्।
+> 💡 **VS कोड टिप**: VS कोडमा कुनै पनि HTML ट्यागमा होभर गर्नुहोस् र MDN वेब डक्सबाट उपयोगी जानकारी हेर्नुहोस्, जसमा प्रयोग उदाहरणहरू र ब्राउजर अनुकूलता विवरणहरू समावेश छन्।
+
+> 📚 **थप जान्नुहोस्**: DOCTYPE घोषणाले ब्राउजरहरूलाई "क्विर्क्स मोड" मा प्रवेश गर्नबाट रोक्छ, जुन धेरै पुरानो वेबसाइटहरूलाई समर्थन गर्न प्रयोग गरिएको थियो। आधुनिक वेब विकासले सरल `<!DOCTYPE html>` घोषणाको प्रयोग गर्दछ [मापदण्ड-अनुकूल रेंडरिंग](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) सुनिश्चित गर्न।
 
-> 📚 **थप जान्नुहोस्**: DOCTYPE घोषणा ब्राउजरहरूलाई "quirks mode" मा प्रवेश गर्न रोक्छ, जुन धेरै पुरानो वेबसाइटहरूलाई समर्थन गर्न प्रयोग गरिएको थियो। आधुनिक वेब विकासले सरल `<!DOCTYPE html>` घोषणा प्रयोग गर्दछ [मापदण्ड-अनुकूल रेंडरिंग](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) सुनिश्चित गर्न।
+### 🔄 **शिक्षण जाँच**
+**रोक्नुहोस् र विचार गर्नुहोस्**: अगाडि बढ्नु अघि, सुनिश्चित गर्नुहोस् कि तपाईं बुझ्नुहुन्छ:
+- ✅ किन प्रत्येक HTML डकुमेन्टलाई DOCTYPE घोषणाको आवश्यकता हुन्छ
+- ✅ `<html>` रूट तत्वले के समावेश गर्दछ
+- ✅ यो संरचनाले ब्राउजरहरूलाई पृष्ठहरू सही रूपमा रेंडर गर्न कसरी मद्दत गर्छ
+
+**छिटो आत्म-परीक्षण**: के तपाईं "मापदण्ड-अनुकूल रेंडरिंग" को मतलब आफ्नै शब्दमा व्याख्या गर्न सक्नुहुन्छ?
 
 ## आवश्यक डकुमेन्ट मेटाडाटा थप्दै
 
-HTML डकुमेन्टको `<head>` खण्डले ब्राउजरहरू र सर्च इन्जिनहरूलाई आवश्यक जानकारी समावेश गर्दछ, तर आगन्तुकहरूले पृष्ठमा प्रत्यक्ष रूपमा देख्दैनन्। यसलाई "पृष्ठको पछाडि" जानकारीको रूपमा सोच्नुहोस् जसले तपाईंको वेबपृष्ठलाई सही रूपमा काम गर्न र विभिन्न उपकरणहरू र प्लेटफर्महरूमा सही रूपमा देखिन मद्दत गर्दछ।
+HTML डकुमेन्टको `<head>` सेक्सनमा ब्राउजरहरू र सर्च इन्जिनहरूले आवश्यक पर्ने महत्त्वपूर्ण जानकारी समावेश हुन्छ, तर आगन्तुकहरूले पृष्ठमा प्रत्यक्ष रूपमा देख्दैनन्। यसलाई "पर्दा पछाडि" जानकारीको रूपमा सोच्नुहोस् जसले तपाईंको वेबपृष्ठलाई सही रूपमा काम गर्न र विभिन्न उपकरणहरू र प्लेटफर्महरूमा सही रूपमा देखिन मद्दत गर्दछ।
 
 यो मेटाडाटाले ब्राउजरहरूलाई तपाईंको पृष्ठ कसरी प्रदर्शन गर्ने, कुन क्यारेक्टर एन्कोडिङ प्रयोग गर्ने, र विभिन्न स्क्रिन साइजहरू कसरी ह्यान्डल गर्ने भन्ने बताउँछ – व्यावसायिक, पहुँचयोग्य वेबपृष्ठहरू सिर्जना गर्न आवश्यक सबै।
 
 ### कार्य: डकुमेन्ट हेड थप्नुहोस्
 
-तपाईंको `<html>` ट्यागहरूको बीचमा यो `<head>` खण्ड समावेश गर्नुहोस्:
+तपाईंको `<html>` ट्यागहरूको बीचमा यो `<head>` सेक्सन थप्नुहोस्:
 
 ```html
 <head>
@@ -103,24 +176,24 @@ HTML डकुमेन्टको `<head>` खण्डले ब्राउ
 </head>
 ```
 
-**प्रत्येक तत्वले के गर्छ:**
-- **पृष्ठ शीर्षक सेट गर्छ** जुन ब्राउजर ट्याबहरू र सर्च परिणामहरूमा देखिन्छ
+**प्रत्येक तत्वले के गर्छ भन्ने कुरा तोड्दै:**
+- **पृष्ठ शीर्षक सेट गर्छ** जुन ब्राउजर ट्याबहरू र सर्च परिणामहरूमा देखा पर्छ
 - **UTF-8 क्यारेक्टर एन्कोडिङ निर्दिष्ट गर्छ** विश्वव्यापी रूपमा सही पाठ प्रदर्शनको लागि
-- **आधुनिक Internet Explorer संस्करणहरूसँग अनुकूलता सुनिश्चित गर्छ**
-- **उत्तरदायी डिजाइन कन्फिगर गर्छ** उपकरण चौडाइसँग मिल्ने भ्यूपोर्ट सेट गरेर
+- **आधुनिक इन्टरनेट एक्सप्लोरर संस्करणहरूसँग अनुकूलता सुनिश्चित गर्छ**
+- **उत्तरदायी डिजाइन कन्फिगर गर्छ** उपकरण चौडाइसँग मिल्दो भ्यूपोर्ट सेट गरेर
 - **प्रारम्भिक जूम स्तर नियन्त्रण गर्छ** सामग्रीलाई प्राकृतिक आकारमा प्रदर्शन गर्न
 
-> 🤔 **यसको बारेमा सोच्नुहोस्**: यदि तपाईंले यस्तो भ्यूपोर्ट मेटा ट्याग सेट गर्नुभयो भने के हुन्छ: `<meta name="viewport" content="width=600">`? यसले पृष्ठलाई सधैं 600 पिक्सेल चौडाइमा बाध्य पार्नेछ, उत्तरदायी डिजाइनलाई बिगार्नेछ! [सही भ्यूपोर्ट कन्फिगरेसन](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) को बारेमा थप जान्नुहोस्।
+> 🤔 **यसको बारेमा सोच्नुहोस्**: यदि तपाईंले भ्यूपोर्ट मेटा ट्यागलाई यसरी सेट गर्नुभयो भने के हुन्छ: `<meta name="viewport" content="width=600">`? यसले पृष्ठलाई सधैं ६०० पिक्सेल चौडा बनाउँछ, उत्तरदायी डिजाइनलाई बिगार्छ! [सही भ्यूपोर्ट कन्फिगरेसन](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) को बारेमा थप जान्नुहोस्।
 
 ## डकुमेन्ट बडी निर्माण गर्दै
 
-HTML को `<body>` तत्वले तपाईंको वेबपृष्ठको सबै दृश्य सामग्री समावेश गर्दछ – प्रयोगकर्ताहरूले देख्ने र अन्तरक्रिया गर्ने सबै कुरा। `<head>` खण्डले ब्राउजरलाई निर्देशन प्रदान गर्‍यो भने, `<body>` खण्डले वास्तविक सामग्री समावेश गर्दछ: पाठ, छविहरू, बटनहरू, र अन्य तत्वहरू जसले तपाईंको प्रयोगकर्ता इन्टरफेस सिर्जना गर्छ।
+HTML को `<body>` तत्वले तपाईंको वेबपृष्ठको सबै दृश्य सामग्री समावेश गर्दछ – प्रयोगकर्ताहरूले देख्ने र अन्तरक्रिया गर्ने सबै कुरा। जबकि `<head>` सेक्सनले ब्राउजरलाई निर्देशनहरू प्रदान गर्‍यो, `<body>` सेक्सनले वास्तविक सामग्री समावेश गर्दछ: पाठ, छविहरू, बटनहरू, र अन्य तत्वहरू जसले तपाईंको प्रयोगकर्ता इन्टरफेस सिर्जना गर्छ।
 
-आउनुहोस्, बडी संरचना थपौं र HTML ट्यागहरू कसरी सँगै काम गर्छन् भन्ने बुझौं।
+आउनुहोस्, बडी संरचना थपौं र HTML ट्यागहरू कसरी सँगै काम गर्छन् भन्ने कुरा बुझौं।
 
 ### HTML ट्याग संरचना बुझ्दै
 
-HTML ले तत्वहरू परिभाषित गर्न जोडी ट्यागहरू प्रयोग गर्दछ। अधिकांश ट्यागहरूमा `<p>` जस्तो खोल्ने ट्याग र `</p>` जस्तो बन्द गर्ने ट्याग हुन्छ, बीचमा सामग्री सहित: `<p>Hello, world!</p>`। यसले "Hello, world!" पाठ समावेश गर्ने अनुच्छेद तत्व सिर्जना गर्छ।
+HTML ले तत्वहरू परिभाषित गर्न जोडी ट्यागहरू प्रयोग गर्दछ। अधिकांश ट्यागहरूमा `<p>` जस्तै खोल्ने ट्याग र `</p>` जस्तै बन्द गर्ने ट्याग हुन्छ, बीचमा सामग्रीको साथ: `<p>Hello, world!</p>`। यसले "Hello, world!" पाठ समावेश गर्ने अनुच्छेद तत्व सिर्जना गर्छ।
 
 ### कार्य: बडी तत्व थप्नुहोस्
 
@@ -140,27 +213,27 @@ HTML ले तत्वहरू परिभाषित गर्न जो
 ```
 
 **यस पूर्ण संरचनाले के प्रदान गर्छ:**
-- **HTML5 डकुमेन्टको आधारभूत फ्रेमवर्क स्थापना गर्छ**
+- **आधारभूत HTML5 डकुमेन्ट फ्रेमवर्क स्थापना गर्छ**
 - **सही ब्राउजर रेंडरिंगको लागि आवश्यक मेटाडाटा समावेश गर्छ**
 - **तपाईंको दृश्य सामग्रीको लागि खाली बडी सिर्जना गर्छ**
-- **आधुनिक वेब विकासको उत्कृष्ट अभ्यासहरू अनुसरण गर्छ**
+- **व्यावसायिक वेब विकासको उत्कृष्ट अभ्यासहरू पालना गर्छ**
 
-अब तपाईं आफ्नो टेरारियमको दृश्य तत्वहरू थप्न तयार हुनुहुन्छ। हामी `<div>` तत्वहरूलाई कन्टेनरको रूपमा प्रयोग गर्नेछौं विभिन्न सामग्री खण्डहरू व्यवस्थित गर्न, र `<img>` तत्वहरू बिरुवाका छविहरू प्रदर्शन गर्न।
+अब तपाईं आफ्नो टेरारियमको दृश्य तत्वहरू थप्न तयार हुनुहुन्छ। हामी `<div>` तत्वहरूलाई कन्टेनरको रूपमा प्रयोग गर्नेछौं विभिन्न सामग्री खण्डहरू व्यवस्थित गर्न, र `<img>` तत्वहरू बिरुवाको छविहरू प्रदर्शन गर्न।
 
 ### छविहरू र लेआउट कन्टेनरहरूसँग काम गर्दै
 
-HTML मा छविहरू विशेष छन् किनभने तिनीहरूले "स्व-समापन" ट्यागहरू प्रयोग गर्छन्। `<p></p>` जस्ता तत्वहरू सामग्री वरिपरि घेरिन्छन् भने, `<img>` ट्यागले सबै जानकारी ट्याग भित्रै समावेश गर्दछ जस्तै `src` छवि फाइल पथको लागि र `alt` पहुँचयोग्यताको लागि।
+HTML मा छविहरू विशेष हुन्छन् किनभने तिनीहरूले "सेल्फ-क्लोजिङ" ट्यागहरू प्रयोग गर्छन्। `<p></p>` जस्ता तत्वहरू सामग्री वरिपरि घुम्छन्, जबकि `<img>` ट्यागले सबै जानकारी समावेश गर्दछ जुन यसले आफैंमा आवश्यक छ, जस्तै `src` छवि फाइल पथको लागि र `alt` पहुँचयोग्यताको लागि।
 
-छविहरूलाई HTML मा थप्नु अघि, तपाईंले आफ्नो परियोजना फाइलहरू व्यवस्थित गर्न आवश्यक छविहरूको फोल्डर सिर्जना गर्नुपर्नेछ र बिरुवाका ग्राफिक्सहरू थप्नुपर्नेछ।
+छविहरूलाई तपाईंको HTML मा थप्न अघि, तपाईंले आफ्नो परियोजना फाइलहरू सही रूपमा व्यवस्थित गर्न आवश्यक छविहरूको फोल्डर सिर्जना गर्नुपर्नेछ र बिरुवाको ग्राफिक्सहरू थप्नुपर्नेछ।
 
-**पहिले, तपाईंको छविहरू सेट अप गर्नुहोस्:**
-1. तपाईंको टेरारियम परियोजना फोल्डर भित्र `images` नामको फोल्डर सिर्जना गर्नुहोस्
-2. [समाधान फोल्डर](../../../../3-terrarium/solution/images) बाट बिरुवाका छविहरू डाउनलोड गर्नुहोस् (कुल १४ बिरुवाका छविहरू)
-3. सबै बिरुवाका छविहरू तपाईंको नयाँ `images` फोल्डरमा प्रतिलिपि गर्नुहोस्
+**पहिले, तपाईंको छविहरू सेट गर्नुहोस्:**
+1. तपाईंको टेरारियम परियोजना फोल्डर भित्र `images` नामक फोल्डर सिर्जना गर्नुहोस्
+2. [समाधान फोल्डर](../../../../3-terrarium/solution/images) बाट बिरुवाको छविहरू डाउनलोड गर्नुहोस् (कुल १४ बिरुवा छविहरू)
+3. सबै बिरुवा छविहरू तपाईंको नयाँ `images` फोल्डरमा प्रतिलिपि गर्नुहोस्
 
 ### कार्य: बिरुवा प्रदर्शन लेआउट सिर्जना गर्नुहोस्
 
-अब तपाईंको `<body></body>` ट्यागहरूको बीचमा दुई स्तम्भहरूमा व्यवस्थित बिरुवाका छविहरू थप्नुहोस्:
+अब तपाईंको `<body></body>` ट्यागहरूको बीचमा दुई स्तम्भहरूमा व्यवस्थित बिरुवा छविहरू थप्नुहोस्:
 
 ```html
 <div id="page">
@@ -213,82 +286,288 @@ HTML मा छविहरू विशेष छन् किनभने त
 </div>
 ```
 
-**चरणबद्ध रूपमा, यस कोडमा के भइरहेको छ:**
+**चरण-दर-चरण, यस कोडमा के भइरहेको छ:**
 - **मुख्य पृष्ठ कन्टेनर सिर्जना गर्छ** `id="page"` सबै सामग्री समावेश गर्न
 - **दुई स्तम्भ कन्टेनर स्थापना गर्छ**: `left-container` र `right-container`
-- **बायाँ स्तम्भमा ७ बिरुवा र दायाँ स्तम्भमा ७ बिरुवा व्यवस्थित गर्छ**
-- **प्रत्येक बिरुवा छवि `plant-holder` div मा घेरिन्छ व्यक्तिगत स्थिति निर्धारण गर्न**
-- **CSS शैलीको लागि सुसंगत वर्ग नामहरू लागू गर्छ अर्को पाठमा**
-- **प्रत्येक बिरुवा छविलाई JavaScript अन्तरक्रियाको लागि अद्वितीय ID प्रदान गर्छ**
-- **छविहरू फोल्डरमा सही फाइल पथ समावेश गर्छ**
+- **७ बिरुवाहरूलाई बायाँ स्तम्भमा र ७ बिरुवाहरूलाई दायाँ स्तम्भमा व्यवस्थित गर्छ**
+- **प्रत्येक बिरुवा छविलाई `plant-holder` div मा घुमाउँछ** व्यक्तिगत स्थिति निर्धारणको लागि
+- **CSS शैलीको लागि समान वर्ग नामहरू लागू गर्छ** अर्को पाठमा
+- **प्रत्येक बिरुवा छविलाई अनौठो ID प्रदान गर्छ** जाभास्क्रिप्ट अन्तरक्रियाको लागि पछि
+- **छविहरूको फोल्डरमा सही फाइल पथ समावेश गर्छ**
+
+> 🤔 **यसको बारेमा विचार गर्नुहोस्**: ध्यान दिनुहोस् कि सबै छविहरूको हाल समान alt पाठ "plant" छ। यो पहुँचयोग्यताको लागि आदर्श छैन। स्क्रिन रिडर प्रयोगकर्ताहरूले "plant" १४ पटक दोहोरिएको सुन्नेछन् बिना प्रत्येक छविले कुन विशिष्ट बिरुवा देखाउँछ भन्ने थाहा पाए। के तपाईं प्रत्येक छविको लागि राम्रो, थप वर्णनात्मक alt पाठ सोच्न सक्नुहुन्छ?
+
+> 📝 **HTML तत्व प्रकारहरू**: `<div>` तत्वहरू "ब्लक-स्तर" हुन् र पूर्ण चौडाइ लिन्छन्, जबकि `<span>` तत्वहरू "इनलाइन" हुन् र केवल आवश्यक चौडाइ लिन्छन्। तपाईंले यी सबै `<div>` ट्यागहरूलाई `<span>` ट्यागहरूमा परिवर्तन गर्नुभयो भने के हुन्छ?
+
+### 🔄 **शिक्षण जाँच**
+**संरचना बुझाइ**: तपाईंको HTML संरचनालाई समीक्षा गर्न एक क्षण लिनुहोस्:
+- ✅ के तपाईं लेआउटमा मुख्य कन्टेनरहरू पहिचान गर्न सक्नुहुन्छ?
+- ✅ के तपाईं बुझ्नुहुन्छ किन प्रत्येक छविलाई अनौठो ID छ?
+- ✅ तपाईं `plant-holder` div को उद्देश्यलाई कसरी वर्णन गर्नुहुन्छ?
+
+**दृश्य निरीक्षण**: तपाईंको HTML फाइललाई ब्राउजरमा खोल्नुहोस्। तपाईंले देख्नुपर्छ:
+- बिरुवाको छविहरूको आधारभूत सूची
+- छविहरू दुई स्तम्भहरूमा व्यवस्थित
+- सरल, बिना शैलीको लेआउट
+
+**स्मरण गर्नुहोस्**: यो साधारण उपस्थिति ठीक HTML ले CSS शैलीको अघि देखिनु पर्ने हो!
+
+यस मार्कअपलाई थपेर, बिरुवाहरू स्क्रिनमा देखा पर्नेछन्, यद्यपि तिनीहरू अझै चमकदार देखिने छैनन् – त्यसका लागि CSS अर्को पाठमा हो! अहिलेको लागि, तपाईंले आफ्नो सामग्रीलाई सही रूपमा व्यवस्थित गर्ने र पहुँचयोग्यता उत्कृष्ट अभ्यासहरू पालना गर्ने ठोस HTML आधार पाउनुभएको छ।
+
+## पहुँचयोग्यताको लागि सेम्यान्टिक HTML प्रयोग गर्दै
+
+सेम्यान्टिक HTML भनेको HTML तत्वहरूलाई तिनीहरूको अर्थ र उद्देश्यको आधारमा चयन गर्नु हो, केवल तिनीहरूको उपस्थिति होइन। जब तपाईं सेम्यान्टिक मार्कअप प्रयोग गर्नुहुन्छ, तपाईं ब्राउजरहरू, सर्च इन्जिनहरू, र स्क्रिन रिडर जस्ता सहायक प्रविधिहरूसँग तपाईंको सामग्रीको संरचना र अर्थ सञ्चार गर्दै हुनुहुन्छ।
+
+```mermaid
+flowchart TD
+    A[Need to add content?] --> B{What type?}
+    B -->|Main heading| C["<h1>"]
+    B -->|Subheading| D["<h2>, <h3>, etc."]
+    B -->|Paragraph| E["<p>"]
+    B -->|List| F["<ul>, <ol>"]
+    B -->|Navigation| G["<nav>"]
+    B -->|Article| H["<article>"]
+    B -->|Section| I["<section>"]
+    B -->|Generic container| J["<div>"]
+    
+    C --> K[Screen readers announce as main title]
+    D --> L[Creates proper heading hierarchy]
+    E --> M[Provides proper text spacing]
+    F --> N[Enables list navigation shortcuts]
+    G --> O[Identifies navigation landmarks]
+    H --> P[Marks standalone content]
+    I --> Q[Groups related content]
+    J --> R[Use only when no semantic tag fits]
+    
+    style C fill:#4caf50
+    style D fill:#4caf50
+    style E fill:#4caf50
+    style F fill:#4caf50
+    style G fill:#2196f3
+    style H fill:#2196f3
+    style I fill:#2196f3
+    style J fill:#ff9800
+```
+
+यो दृष्टिकोणले अपाङ्गता भएका प्रयोगकर्ताहरूको लागि तपाईंको वेबसाइटहरूलाई थप पहुँचयोग्य बनाउँछ र सर्च इन्जिनहरूले तपाईंको सामग्रीलाई राम्रोसँग बुझ्न मद्दत गर्छ। यो आधुनिक वेब विकासको मौलिक सिद्धान्त हो जसले सबैका लागि राम्रो अनुभवहरू सिर्जना गर्छ।
+
+### सेम्यान्टिक पृष्ठ शीर्षक थप्दै
+
+आउनुहोस्, तपाईंको टेरारियम पृष्ठमा उचित शीर्षक थपौं। तपाईंको खोल्ने `<body>` ट्यागको ठीक पछि यो लाइन थप्नुहोस्:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+**किन सेम्यान्टिक मार्कअप महत्त्वपूर्ण छ:**
+- **स्क्रिन रिडरहरूलाई पृष्ठ संरचना नेभिगेट गर्न र बुझ्न मद्दत गर्छ**
+- **सर्च इन्जिन अप्टिमाइजेसन (SEO) सुधार गर्छ** सामग्रीको पदानुक्रम स्पष्ट गरेर
+- **दृष्टि अपाङ्गता वा संज्ञानात्मक भिन्नता भएका प्रयोगकर्ताहरूको पहुँचयोग्यता बढाउँछ**
+- **सबै उपकरणहरू र प्लेटफर्महरूमा राम्रो प्रयोगकर्ता अनुभव सिर्जना गर्छ**
+- **व्यावसायिक विकासका लागि वेब मापदण्डहरू र उत्कृष्ट अभ्यासहरू पालना गर्छ**
+
+**सेम्यान्टिक बनाम गैर-सेम्यान्टिक विकल्पहरूको उदाहरणहरू:**
+
+| उद्देश्य | ✅ सेम्यान्टिक विकल्प | ❌ गैर-सेम्यान्टिक विकल्प |
+|---------|-------------------|------------------------|
+| मुख्य शीर्षक | `<h1>शीर्षक</h1>` | `<div class="big-text">शीर्षक</div>` |
+| नेभिगेसन | `<nav><ul><li></li></ul></nav>` | `<div class="menu"><div></div></div>` |
+| बटन | `<button>क्लिक गर्नुहोस्</button>` | `<span onclick="...">क्लिक गर्नुहोस्</span>` |
+| लेख सामग्री | `<article><p></p></article>` | `<div class="content"><div></div></div>` |
+
+> 🎥 **यसलाई कार्यमा हेर्नुहोस्**: [स्क्रिन रिडरहरूले वेब पृष्ठहरूसँग कसरी अन्तरक्रिया गर्छन्
+- **प्रत्येक दृश्य घटक (माथि, पर्खाल, माटो, तल) को लागि अलग तत्वहरू परिभाषित गर्दछ।**
+- **ग्लास प्रतिबिम्ब प्रभावहरूको लागि नेस्टेड तत्वहरू समावेश गर्दछ (चमकदार तत्वहरू)।**
+- **प्रत्येक तत्वको उद्देश्य स्पष्ट रूपमा संकेत गर्ने वर्णनात्मक क्लास नामहरू प्रयोग गर्दछ।**
+- **ग्लास टेरारियमको स्वरूप सिर्जना गर्ने CSS स्टाइलिङको संरचना तयार गर्दछ।**
+
+> 🤔 **केहि देख्नुभयो?**: तपाईंले यो मार्कअप थपे पनि, पृष्ठमा नयाँ केहि देख्न सक्नुहुन्न! यसले HTML संरचना प्रदान गर्दछ जबकि CSS स्वरूप प्रदान गर्दछ भन्ने कुरा स्पष्ट रूपमा देखाउँछ। यी `<div>` तत्वहरू छन् तर हालसम्म कुनै दृश्य शैली छैन – यो अर्को पाठमा आउँदैछ!
+
+```mermaid
+flowchart TD
+    A[HTML Document] --> B[Document Head]
+    A --> C[Document Body]
+    B --> D[Title Element]
+    B --> E[Meta Charset]
+    B --> F[Meta Viewport]
+    C --> G[Main Heading]
+    C --> H[Page Container]
+    H --> I[Left Container with 7 plants]
+    H --> J[Right Container with 7 plants]
+    H --> K[Terrarium Structure]
+    
+    style A fill:#e1f5fe
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style H fill:#f3e5f5
+```
 
-> 🤔 **यसको बारेमा सोच्नुहोस्**: ध्यान दिनुहोस् कि सबै छविहरू हाल "plant" जस्तै समान alt पाठ छ। यो पहुँचयोग्यताको लागि आदर्श होइन। स्क्रिन रिडर प्रयोगकर्ताहरूले "plant" १४ पटक दोहोरिएको सुन्थे तर प्रत्येक छविले कुन विशिष्ट बिरुवा देखाउँछ भन्ने थाहा पाउँदैनन्। के तपाईं प्रत्येक छविको लागि राम्रो, अधिक वर्णनात्मक alt पाठ सोच्न सक्नुहुन्छ?
+### 🔄 **शिक्षण जाँच**
+**HTML संरचना दक्षता**: अगाडि बढ्नु अघि सुनिश्चित गर्नुहोस् कि तपाईं:
+- ✅ HTML संरचना र दृश्य स्वरूपको बीचको भिन्नता व्याख्या गर्न सक्नुहुन्छ।
+- ✅ सेम्यान्टिक र गैर-सेम्यान्टिक HTML तत्वहरू पहिचान गर्न सक्नुहुन्छ।
+- ✅ उचित मार्कअपले पहुँचयोग्यता कसरी लाभ पुर्‍याउँछ व्याख्या गर्न सक्नुहुन्छ।
+- ✅ पूर्ण दस्तावेज ट्री संरचना पहिचान गर्न सक्नुहुन्छ।
+
+**तपाईंको बुझाइ परीक्षण गर्नुहोस्**: आफ्नो HTML फाइल ब्राउजरमा खोल्नुहोस् जहाँ JavaScript अक्षम गरिएको छ र CSS हटाइएको छ। यसले तपाईंले सिर्जना गरेको शुद्ध सेम्यान्टिक संरचना देखाउँछ!
+
+---
 
-> 📝 **HTML तत्व प्रकारहरू**: `<div>` तत्वहरू "ब्लक-स्तर" हुन् र पूर्ण चौडाइ लिन्छन्, जबकि `<span>` तत्वहरू "इनलाइन" हुन् र आवश्यक चौडाइ मात्र लिन्छन्। तपाईंले यी सबै `<div>` ट्यागहरूलाई `<span>` ट्यागहरूमा परिवर्तन गर्नुभयो भने के हुन्छ?
+## GitHub Copilot Agent Challenge
 
-यस मार्कअप थपेपछि, बिरुवाहरू स्क्रिनमा देखिनेछन्, यद्यपि तिनीहरू अझै चमकदार देखिने छैनन् – त्यसका लागि CSS अर्को पाठमा छ! अहिलेको लागि, तपाईंले सामग्रीलाई सही रूपमा व्यवस्थित गर्ने र पहुँचयोग्यताको उत्कृष्ट अभ्यासहरू अनुसरण गर्ने ठोस HTML आधार छ।
-**प्रस्तावना:** "प्लान्ट केयर गाइड" शीर्षकको साथमा एक सेम्यान्टिक HTML सेक्सन बनाउनुहोस् जसमा "पानी दिने तरिका", "प्रकाशको आवश्यकता", र "माटोको हेरचाह" शीर्षक भएका तीन उप-सेक्सनहरू समावेश छन्। प्रत्येक उप-सेक्सनमा बिरुवाको हेरचाह सम्बन्धी जानकारी भएको एउटा अनुच्छेद समावेश गर्नुहोस्। सामग्रीलाई उपयुक्त रूपमा संरचना गर्न `<section>`, `<h2>`, `<h3>`, र `<p>` जस्ता सेम्यान्टिक HTML ट्यागहरू प्रयोग गर्नुहोस्।
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-[एजेन्ट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+**विवरण:** टेरारियम परियोजनामा ​​थप्न सकिने प्लान्ट केयर गाइड सेक्सनको लागि सेम्यान्टिक HTML संरचना सिर्जना गर्नुहोस्।
 
-## HTML इतिहास चुनौती अन्वेषण गर्नुहोस्
+**प्रेरणा:** "प्लान्ट केयर गाइड" मुख्य शीर्षक, "पानी दिने", "प्रकाश आवश्यकताहरू", र "माटोको हेरचाह" शीर्षक भएका तीन उप-सेक्सनहरू, प्रत्येकमा प्लान्ट केयर जानकारीको अनुच्छेद समावेश गर्ने सेम्यान्टिक HTML सेक्सन सिर्जना गर्नुहोस्। सामग्रीलाई उपयुक्त रूपमा संरचना गर्न `<section>`, `<h2>`, `<h3>`, र `<p>` जस्ता उचित सेम्यान्टिक HTML ट्यागहरू प्रयोग गर्नुहोस्।
+
+[Agent मोडको बारेमा थप जान्नुहोस्](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)।
+
+## HTML इतिहास चुनौती
 
 **वेबको विकासबारे सिक्दै**
 
-HTML ले १९९० मा टिम बर्नर्स-लीले CERN मा पहिलो वेब ब्राउजर बनाएको समयदेखि धेरै विकास गरेको छ। केही पुराना ट्यागहरू जस्तै `<marquee>` अहिले डिप्रिकेटेड छन् किनभने तिनीहरू आधुनिक पहुँचयोग्यता मापदण्ड र उत्तरदायी डिजाइन सिद्धान्तहरूसँग राम्रोसँग काम गर्दैनन्।
+HTML ले १९९० मा टिम बर्नर्स-लीले CERN मा पहिलो वेब ब्राउजर सिर्जना गरेदेखि धेरै विकास गरेको छ। केही पुराना ट्यागहरू जस्तै `<marquee>` अब डिप्रिकेटेड छन् किनभने तिनीहरू आधुनिक पहुँचयोग्यता मापदण्ड र उत्तरदायी डिजाइन सिद्धान्तहरूसँग राम्रोसँग काम गर्दैनन्।
 
 **यो प्रयोग प्रयास गर्नुहोस्:**
-1. आफ्नो `<h1>` शीर्षकलाई अस्थायी रूपमा `<marquee>` ट्यागमा राख्नुहोस्: `<marquee><h1>मेरो टेरारियम</h1></marquee>`
-2. आफ्नो पृष्ठ ब्राउजरमा खोल्नुहोस् र स्क्रोल गर्ने प्रभावलाई अवलोकन गर्नुहोस्
-3. यो ट्याग किन डिप्रिकेटेड भयो भनेर विचार गर्नुहोस् (सुझाव: प्रयोगकर्ता अनुभव र पहुँचयोग्यता बारे सोच्नुहोस्)
-4. `<marquee>` ट्याग हटाउनुहोस् र सेम्यान्टिक मार्कअपमा फर्कनुहोस्
+1. आफ्नो `<h1>` शीर्षकलाई अस्थायी रूपमा `<marquee>` ट्यागमा राख्नुहोस्: `<marquee><h1>मेरो टेरारियम</h1></marquee>`।
+2. आफ्नो पृष्ठ ब्राउजरमा खोल्नुहोस् र स्क्रोलिङ प्रभाव अवलोकन गर्नुहोस्।
+3. यो ट्याग किन डिप्रिकेटेड भयो भनेर विचार गर्नुहोस् (संकेत: प्रयोगकर्ता अनुभव र पहुँचयोग्यता सोच्नुहोस्)।
+4. `<marquee>` ट्याग हटाउनुहोस् र सेम्यान्टिक मार्कअपमा फर्कनुहोस्।
 
 **प्रतिबिम्ब प्रश्नहरू:**
-- स्क्रोल गर्ने शीर्षकले दृश्य अपाङ्गता वा गति संवेदनशीलता भएका प्रयोगकर्ताहरूलाई कसरी असर गर्न सक्छ?
-- आधुनिक CSS प्रविधिहरूले समान दृश्य प्रभावलाई कसरी अधिक पहुँचयोग्य रूपमा प्राप्त गर्न सक्छ?
+- स्क्रोलिङ शीर्षकले दृश्य अपाङ्गता वा गति संवेदनशीलता भएका प्रयोगकर्ताहरूलाई कसरी असर गर्न सक्छ?
+- समान दृश्य प्रभावहरू अधिक पहुँचयोग्य रूपमा प्राप्त गर्न के आधुनिक CSS प्रविधिहरू प्रयोग गर्न सकिन्छ?
 - डिप्रिकेटेड तत्वहरूको सट्टा वर्तमान वेब मापदण्ड प्रयोग गर्नु किन महत्त्वपूर्ण छ?
 
-[पुराना र डिप्रिकेटेड HTML तत्वहरू](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) को बारेमा थप अन्वेषण गर्नुहोस् ताकि वेब मापदण्डले प्रयोगकर्ता अनुभव सुधार गर्न कसरी विकास गर्छ भन्ने बुझ्न सकियोस्।
-
+[पुराना र डिप्रिकेटेड HTML तत्वहरूको बारेमा थप अन्वेषण गर्नुहोस्](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) ताकि वेब मापदण्डले प्रयोगकर्ता अनुभव सुधार गर्न कसरी विकास गर्छन् भन्ने बुझ्न सकियो।
 
-## पोस्ट-व्याख्यान क्विज
+## पोस्ट-लेक्चर क्विज
 
-[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/16)
+[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/16)
 
-## समीक्षा र आत्म अध्ययन
+## समीक्षा र आत्म-अध्ययन
 
 **HTML ज्ञानलाई गहिरो बनाउनुहोस्**
 
-HTML वेबको आधार ३० वर्षभन्दा बढी समयदेखि रहँदै आएको छ, साधारण दस्तावेज मार्कअप भाषाबाट अन्तरक्रियात्मक एप्लिकेसनहरू निर्माण गर्ने परिष्कृत प्लेटफर्ममा विकसित हुँदै। यस विकासलाई बुझ्नाले आधुनिक वेब मापदण्डको कदर गर्न र राम्रो विकास निर्णय लिन मद्दत गर्दछ।
+HTML वेबको आधार हो, ३० वर्षभन्दा बढी समयदेखि, साधारण दस्तावेज मार्कअप भाषाबाट अन्तरक्रियात्मक अनुप्रयोगहरू निर्माण गर्ने परिष्कृत प्लेटफर्ममा विकसित हुँदै। यस विकासलाई बुझ्दा आधुनिक वेब मापदण्डहरूको प्रशंसा गर्न मद्दत गर्दछ र राम्रो विकास निर्णयहरू लिन सकिन्छ।
 
 **सिफारिस गरिएको सिकाइ मार्गहरू:**
 
 1. **HTML इतिहास र विकास**
-   - HTML 1.0 देखि HTML5 सम्मको समयरेखा अनुसन्धान गर्नुहोस्
-   - किन केही ट्यागहरू डिप्रिकेटेड भए (पहुंचयोग्यता, मोबाइल-अनुकूलता, मर्मतयोग्यता)
-   - उदयमान HTML सुविधाहरू र प्रस्तावहरूको अनुसन्धान गर्नुहोस्
+   - HTML 1.0 देखि HTML5 सम्मको समयरेखा अनुसन्धान गर्नुहोस्।
+   - किन केही ट्यागहरू डिप्रिकेटेड भए (पहुंचयोग्यता, मोबाइल-अनुकूलता, मर्मतयोग्यता) अन्वेषण गर्नुहोस्।
+   - उदीयमान HTML सुविधाहरू र प्रस्तावहरूको अनुसन्धान गर्नुहोस्।
 
 2. **सेम्यान्टिक HTML गहिरो अध्ययन**
-   - [HTML5 सेम्यान्टिक तत्वहरूको पूर्ण सूची](https://developer.mozilla.org/docs/Web/HTML/Element) अध्ययन गर्नुहोस्
-   - कहिले `<article>`, `<section>`, `<aside>`, र `<main>` प्रयोग गर्ने भनेर पहिचान गर्ने अभ्यास गर्नुहोस्
-   - पहुँचयोग्यता सुधार गर्न ARIA विशेषताहरूको बारेमा जान्नुहोस्
+   - [HTML5 सेम्यान्टिक तत्वहरूको पूर्ण सूची](https://developer.mozilla.org/docs/Web/HTML/Element) अध्ययन गर्नुहोस्।
+   - कहिले `<article>`, `<section>`, `<aside>`, र `<main>` प्रयोग गर्ने पहिचान अभ्यास गर्नुहोस्।
+   - पहुँचयोग्यता सुधार गर्न ARIA विशेषताहरूको बारेमा जान्नुहोस्।
 
 3. **आधुनिक वेब विकास**
-   - [उत्तरदायी वेबसाइट निर्माण](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) मा Microsoft Learn मा अन्वेषण गर्नुहोस्
-   - HTML कसरी CSS र JavaScript सँग एकीकृत हुन्छ भन्ने बुझ्नुहोस्
-   - वेब प्रदर्शन र SEO को उत्कृष्ट अभ्यासहरूको बारेमा जान्नुहोस्
+   - [उत्तरदायी वेबसाइट निर्माण](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn मा अन्वेषण गर्नुहोस्।
+   - HTML कसरी CSS र JavaScript सँग एकीकृत हुन्छ बुझ्नुहोस्।
+   - वेब प्रदर्शन र SEO उत्तम अभ्यासहरूको बारेमा जान्नुहोस्।
 
 **प्रतिबिम्ब प्रश्नहरू:**
-- तपाईले कुन डिप्रिकेटेड HTML ट्यागहरू पत्ता लगाउनुभयो, र किन तिनीहरू हटाइयो?
+- कुन डिप्रिकेटेड HTML ट्यागहरू तपाईंले पत्ता लगाउनुभयो, र किन तिनीहरू हटाइयो?
 - भविष्यका संस्करणहरूको लागि प्रस्तावित नयाँ HTML सुविधाहरू के हुन्?
-- सेम्यान्टिक HTML ले वेब पहुँचयोग्यता र SEO मा कसरी योगदान पुर्‍याउँछ?
+- सेम्यान्टिक HTML वेब पहुँचयोग्यता र SEO मा कसरी योगदान पुर्‍याउँछ?
+
+### ⚡ **तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा**
+- [ ] DevTools (F12) खोल्नुहोस् र आफ्नो मनपर्ने वेबसाइटको HTML संरचना निरीक्षण गर्नुहोस्।
+- [ ] आधारभूत ट्यागहरू `<h1>`, `<p>`, र `<img>` सहित साधारण HTML फाइल सिर्जना गर्नुहोस्।
+- [ ] W3C HTML Validator अनलाइन प्रयोग गरेर आफ्नो HTML मान्य गर्नुहोस्।
+- [ ] `<!-- टिप्पणी -->` प्रयोग गरेर आफ्नो HTML मा टिप्पणी थप्ने प्रयास गर्नुहोस्।
+
+### 🎯 **तपाईंले यो घण्टामा हासिल गर्न सक्ने कुरा**
+- [ ] पोस्ट-पाठ क्विज पूरा गर्नुहोस् र सेम्यान्टिक HTML अवधारणाहरू समीक्षा गर्नुहोस्।
+- [ ] उचित HTML संरचना प्रयोग गरेर आफ्नो बारेमा साधारण वेबपृष्ठ निर्माण गर्नुहोस्।
+- [ ] विभिन्न शीर्षक स्तरहरू र पाठ स्वरूप ट्यागहरू प्रयोग गरेर प्रयोग गर्नुहोस्।
+- [ ] मल्टिमिडिया एकीकरण अभ्यास गर्न छविहरू र लिंकहरू थप्नुहोस्।
+- [ ] तपाईंले अझै प्रयास नगरेका HTML5 सुविधाहरूको अनुसन्धान गर्नुहोस्।
+
+### 📅 **तपाईंको हप्ताको HTML यात्रा**
+- [ ] सेम्यान्टिक मार्कअपको साथ टेरारियम परियोजना असाइनमेन्ट पूरा गर्नुहोस्।
+- [ ] ARIA लेबलहरू र भूमिकाहरू प्रयोग गरेर पहुँचयोग्य वेबपृष्ठ सिर्जना गर्नुहोस्।
+- [ ] विभिन्न इनपुट प्रकारहरू सहित फारम सिर्जना अभ्यास गर्नुहोस्।
+- [ ] स्थानीयStorage वा geolocation जस्ता HTML5 APIs अन्वेषण गर्नुहोस्।
+- [ ] उत्तरदायी HTML ढाँचाहरू र मोबाइल-प्रथम डिजाइन अध्ययन गर्नुहोस्।
+- [ ] उत्तम अभ्यासहरूको लागि अन्य विकासकर्ताहरूको HTML कोड समीक्षा गर्नुहोस्।
+
+### 🌟 **तपाईंको महिनाको वेब आधार**
+- [ ] आफ्नो HTML दक्षता प्रदर्शन गर्ने पोर्टफोलियो वेबसाइट निर्माण गर्नुहोस्।
+- [ ] Handlebars जस्ता फ्रेमवर्कको साथ HTML टेम्प्लेटिङ सिक्नुहोस्।
+- [ ] HTML दस्तावेज सुधार गरेर ओपन सोर्स परियोजनाहरूमा योगदान गर्नुहोस्।
+- [ ] कस्टम तत्वहरू जस्ता उन्नत HTML अवधारणाहरूमा महारत हासिल गर्नुहोस्।
+- [ ] CSS फ्रेमवर्क र JavaScript पुस्तकालयहरूसँग HTML एकीकृत गर्नुहोस्।
+- [ ] HTML आधारभूत कुराहरू सिक्दै अरूलाई मार्गदर्शन गर्नुहोस्।
+
+## 🎯 तपाईंको HTML दक्षता समयरेखा
+
+```mermaid
+timeline
+    title HTML Learning Progression
+    
+    section Foundation (5 minutes)
+        Document Structure: DOCTYPE declaration
+                         : HTML root element
+                         : Head vs Body understanding
+        
+    section Metadata (10 minutes)
+        Essential Meta Tags: Character encoding
+                           : Viewport configuration
+                           : Browser compatibility
+        
+    section Content Creation (15 minutes)
+        Image Integration: Proper file paths
+                         : Alt text importance
+                         : Self-closing tags
+        
+    section Layout Organization (20 minutes)
+        Container Strategy: Div elements for structure
+                          : Class and ID naming
+                          : Nested element hierarchy
+        
+    section Semantic Mastery (30 minutes)
+        Meaningful Markup: Heading hierarchy
+                         : Screen reader navigation
+                         : Accessibility best practices
+        
+    section Advanced Concepts (1 hour)
+        HTML5 Features: Modern semantic elements
+                      : ARIA attributes
+                      : Performance considerations
+        
+    section Professional Skills (1 week)
+        Code Organization: File structure patterns
+                         : Maintainable markup
+                         : Team collaboration
+        
+    section Expert Level (1 month)
+        Modern Web Standards: Progressive enhancement
+                            : Cross-browser compatibility
+                            : HTML specification updates
+```
+
+### 🛠️ तपाईंको HTML उपकरण किट सारांश
+
+यो पाठ पूरा गरेपछि, तपाईंसँग अब छ:
+- **दस्तावेज संरचना**: उचित DOCTYPE सहित पूर्ण HTML5 आधार।
+- **सेम्यान्टिक मार्कअप**: पहुँचयोग्यता र SEO सुधार गर्ने अर्थपूर्ण ट्यागहरू।
+- **छवि एकीकरण**: उचित फाइल संगठन र alt पाठ अभ्यासहरू।
+- **लेआउट कन्टेनरहरू**: वर्णनात्मक क्लास नामहरू सहित divs को रणनीतिक प्रयोग।
+- **पहुंचयोग्यता सचेतता**: स्क्रिन रिडर नेभिगेसनको समझ।
+- **आधुनिक मापदण्डहरू**: वर्तमान HTML5 अभ्यासहरू र डिप्रिकेटेड ट्याग ज्ञान।
+- **परियोजना आधार**: CSS स्टाइलिङ र JavaScript अन्तरक्रियाको लागि ठोस आधार।
 
+**अर्को चरणहरू**: तपाईंको HTML संरचना CSS स्टाइलिङको लागि तयार छ! तपाईंले निर्माण गरेको सेम्यान्टिक आधारले अर्को पाठलाई बुझ्न धेरै सजिलो बनाउनेछ।
 
 ## असाइनमेन्ट
 
-[आफ्नो HTML अभ्यास गर्नुहोस्: ब्लग मोकअप निर्माण गर्नुहोस्](assignment.md)
+[HTML अभ्यास गर्नुहोस्: ब्लग मोकअप निर्माण गर्नुहोस्](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुनेछैनौं।
\ No newline at end of file
diff --git a/translations/ne/3-terrarium/2-intro-to-css/README.md b/translations/ne/3-terrarium/2-intro-to-css/README.md
index 7529b85ec1..0c6c405afc 100644
--- a/translations/ne/3-terrarium/2-intro-to-css/README.md
+++ b/translations/ne/3-terrarium/2-intro-to-css/README.md
@@ -1,24 +1,80 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "92c4431eac70670b0450b02c1d11279a",
-  "translation_date": "2025-10-22T16:59:29+00:00",
+  "original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
+  "translation_date": "2025-11-03T15:35:03+00:00",
   "source_file": "3-terrarium/2-intro-to-css/README.md",
   "language_code": "ne"
 }
 -->
-# टेरारियम परियोजना भाग २: CSS को परिचय
+# टेरारियम प्रोजेक्ट भाग २: CSS को परिचय
+
+```mermaid
+journey
+    title Your CSS Styling Journey
+    section Foundation
+      Link CSS file: 3: Student
+      Understand cascade: 4: Student
+      Learn inheritance: 4: Student
+    section Selectors
+      Element targeting: 4: Student
+      Class patterns: 5: Student
+      ID specificity: 5: Student
+    section Layout
+      Position elements: 4: Student
+      Create containers: 5: Student
+      Build terrarium: 5: Student
+    section Polish
+      Add visual effects: 5: Student
+      Responsive design: 5: Student
+      Glass reflections: 5: Student
+```
 
 ![CSS को परिचय](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ne.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
-
-तपाईंको HTML टेरारियम कति सामान्य देखिन्थ्यो भन्ने सम्झनुहोस्? CSS नै हो जसले त्यो साधारण संरचनालाई दृश्यात्मक रूपमा आकर्षक बनाउँछ।
-
-यदि HTML घरको फ्रेम बनाउने जस्तै हो भने, CSS भनेको घरलाई घरजस्तो बनाउने सबै कुरा हो - रंग, फर्निचरको व्यवस्था, बत्तीको सेटअप, र कोठाहरू कसरी एकअर्कासँग जोडिन्छन्। सोच्नुहोस् कि कसरी भर्सायको दरबार एक साधारण शिकारको कुटीबाट सुरु भयो, तर सजावट र लेआउटमा ध्यान दिएर यसलाई संसारको सबैभन्दा भव्य भवनहरू मध्ये एकमा परिणत गरियो।
-
-आज, हामी तपाईंको टेरारियमलाई कार्यात्मकबाट परिष्कृतमा रूपान्तरण गर्नेछौं। तपाईंले तत्वहरूलाई ठ्याक्कै स्थान दिन, विभिन्न स्क्रिन साइजहरूमा लेआउटहरू अनुकूल बनाउने, र वेबसाइटहरूलाई आकर्षक बनाउने दृश्यात्मक आकर्षण सिर्जना गर्न सिक्नुहुनेछ।
-
-यस पाठको अन्त्यमा, तपाईंले देख्नुहुनेछ कि रणनीतिक CSS शैलीले तपाईंको परियोजनालाई नाटकीय रूपमा कसरी सुधार गर्न सक्छ। अब तपाईंको टेरारियममा केही शैली थपौं।
+> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
+
+तपाईंको HTML टेरारियम कति सामान्य देखिन्थ्यो भन्ने सम्झनुहुन्छ? CSS ले त्यो साधारण संरचनालाई दृश्यात्मक रूपमा आकर्षक बनाउने काम गर्छ।
+
+यदि HTML घरको फ्रेम बनाउने जस्तो हो भने, CSS भनेको घरलाई घरजस्तो बनाउने सबै कुरा हो - रंग, फर्निचरको व्यवस्था, बत्ती, र कोठाहरूको प्रवाह। सोच्नुहोस् कि भर्सायको दरबार साधारण शिकारको कुटीबाट सुरु भयो, तर सजावट र लेआउटमा ध्यान दिएर यसलाई संसारको सबैभन्दा भव्य भवनहरू मध्ये एकमा परिणत गरियो।
+
+आज, हामी तपाईंको टेरारियमलाई कार्यात्मकबाट परिष्कृतमा रूपान्तरण गर्नेछौं। तपाईंले तत्वहरूलाई ठीकसँग स्थिति दिन, विभिन्न स्क्रिन आकारहरूमा लेआउटहरूलाई प्रतिक्रिया दिन, र वेबसाइटहरूलाई आकर्षक बनाउने दृश्यात्मक अपील सिर्जना गर्न सिक्नुहुनेछ।
+
+यस पाठको अन्त्यमा, तपाईंले देख्नुहुनेछ कि रणनीतिक CSS शैलीले तपाईंको प्रोजेक्टलाई नाटकीय रूपमा सुधार गर्न सक्छ। अब तपाईंको टेरारियममा केही शैली थपौं।
+
+```mermaid
+mindmap
+  root((CSS Fundamentals))
+    Cascade
+      Specificity Rules
+      Inheritance
+      Priority Order
+      Conflict Resolution
+    Selectors
+      Element Tags
+      Classes (.class)
+      IDs (#id)
+      Combinators
+    Box Model
+      Margin
+      Border
+      Padding
+      Content
+    Layout
+      Positioning
+      Display Types
+      Flexbox
+      Grid
+    Visual Effects
+      Colors
+      Shadows
+      Transitions
+      Animations
+    Responsive Design
+      Media Queries
+      Flexible Units
+      Viewport Meta
+      Mobile First
+```
 
 ## प्रि-लेक्चर क्विज
 
@@ -26,21 +82,21 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## CSS को साथ सुरु गर्दै
 
-CSS लाई प्रायः "चिजहरू सुन्दर बनाउने" मात्र मानिन्छ, तर यसले धेरै व्यापक उद्देश्य पूरा गर्दछ। CSS फिल्मको निर्देशक जस्तै हो - तपाईंले केवल सबै कुरा कस्तो देखिन्छ भन्ने मात्र होइन, तर कसरी यो चल्छ, अन्तरक्रियामा प्रतिक्रिया दिन्छ, र विभिन्न परिस्थितिहरूमा अनुकूल हुन्छ भन्ने पनि नियन्त्रण गर्नुहुन्छ।
+CSS लाई प्रायः "चिजहरू सुन्दर बनाउने" मात्र मानिन्छ, तर यसले धेरै व्यापक उद्देश्य पूरा गर्छ। CSS फिल्मको निर्देशक जस्तै हो - तपाईंले सबै कुरा कस्तो देखिन्छ, कसरी चल्छ, अन्तरक्रियामा कसरी प्रतिक्रिया दिन्छ, र विभिन्न परिस्थितिहरूमा कसरी अनुकूलन हुन्छ भन्ने नियन्त्रण गर्नुहुन्छ।
 
-आधुनिक CSS उल्लेखनीय रूपमा सक्षम छ। तपाईंले फोन, ट्याब्लेट, र डेस्कटप कम्प्युटरहरूको लागि लेआउटहरू स्वतः समायोजन गर्ने कोड लेख्न सक्नुहुन्छ। तपाईंले प्रयोगकर्ताको ध्यान आवश्यक ठाउँमा लैजाने स्मूथ एनिमेसनहरू सिर्जना गर्न सक्नुहुन्छ। जब सबै कुरा सँगै काम गर्छ, परिणाम निकै प्रभावशाली हुन सक्छ।
+आधुनिक CSS उल्लेखनीय रूपमा सक्षम छ। तपाईंले फोन, ट्याब्लेट, र डेस्कटप कम्प्युटरहरूको लागि लेआउटहरू स्वतः समायोजन गर्ने कोड लेख्न सक्नुहुन्छ। तपाईंले प्रयोगकर्ताको ध्यान आवश्यक ठाउँमा मार्गदर्शन गर्ने सहज एनिमेसनहरू सिर्जना गर्न सक्नुहुन्छ। जब सबै कुरा सँगै काम गर्छ, परिणामहरू निकै प्रभावशाली हुन सक्छ।
 
-> 💡 **प्रो टिप**: CSS नयाँ सुविधाहरू र क्षमताहरूको साथ निरन्तर विकसित हुँदैछ। उत्पादन परियोजनाहरूमा प्रयोग गर्नु अघि नयाँ CSS सुविधाहरूको लागि ब्राउजर समर्थन प्रमाणित गर्न सधैं [CanIUse.com](https://caniuse.com) जाँच गर्नुहोस्।
+> 💡 **प्रो टिप**: CSS नयाँ सुविधाहरू र क्षमताहरूको साथ निरन्तर विकसित हुँदैछ। उत्पादन प्रोजेक्टहरूमा प्रयोग गर्नु अघि नयाँ CSS सुविधाहरूको ब्राउजर समर्थन प्रमाणित गर्न सधैं [CanIUse.com](https://caniuse.com) जाँच गर्नुहोस्।
 
 **यस पाठमा हामीले के हासिल गर्नेछौं:**
-- **पूरा गर्नेछौं** आधुनिक CSS प्रविधिहरू प्रयोग गरेर तपाईंको टेरारियमको पूर्ण दृश्यात्मक डिजाइन
-- **अनुसन्धान गर्नेछौं** क्यास्केड, इनहेरिटेन्स, र CSS सेलेक्टरहरू जस्ता आधारभूत अवधारणाहरू
-- **लागू गर्नेछौं** उत्तरदायी पोजिसनिङ र लेआउट रणनीतिहरू
-- **निर्माण गर्नेछौं** CSS आकारहरू र शैली प्रयोग गरेर टेरारियम कन्टेनर
+- **सिर्जना गर्नेछौं** आधुनिक CSS प्रविधिहरू प्रयोग गरेर तपाईंको टेरारियमको पूर्ण दृश्य डिजाइन
+- **अन्वेषण गर्नेछौं** क्यास्केड, इनहेरिटेन्स, र CSS चयनकर्ताहरू जस्ता आधारभूत अवधारणाहरू
+- **कार्यान्वयन गर्नेछौं** उत्तरदायी स्थिति र लेआउट रणनीतिहरू
+- **निर्माण गर्नेछौं** CSS आकार र शैली प्रयोग गरेर टेरारियम कन्टेनर
 
 ### पूर्वापेक्षा
 
-तपाईंले अघिल्लो पाठबाट तपाईंको टेरारियमको HTML संरचना पूरा गर्नुपर्छ र यसलाई शैली दिन तयार हुनुपर्छ।
+तपाईंले अघिल्लो पाठबाट तपाईंको टेरारियमको HTML संरचना पूरा गर्नुपर्छ र यसलाई शैली बनाउन तयार राख्नुपर्छ।
 
 > 📺 **भिडियो स्रोत**: यो उपयोगी भिडियो वाकथ्रु हेर्नुहोस्
 >
@@ -48,27 +104,27 @@ CSS लाई प्रायः "चिजहरू सुन्दर बन
 
 ### तपाईंको CSS फाइल सेट अप गर्दै
 
-शैली सुरु गर्नुअघि, हामीले CSS लाई HTML सँग जडान गर्न आवश्यक छ। यस जडानले ब्राउजरलाई हाम्रो टेरारियमको लागि शैली निर्देशनहरू कहाँ फेला पार्ने भनेर बताउँछ।
+शैली सुरु गर्न अघि, हामीले CSS लाई HTML सँग जडान गर्न आवश्यक छ। यो जडानले ब्राउजरलाई हाम्रो टेरारियमको लागि शैली निर्देशनहरू कहाँ फेला पार्ने बताउँछ।
 
-तपाईंको टेरारियम फोल्डरमा, `style.css` नामको नयाँ फाइल बनाउनुहोस्, त्यसपछि यसलाई तपाईंको HTML डकुमेन्टको `<head>` सेक्सनमा लिंक गर्नुहोस्:
+तपाईंको टेरारियम फोल्डरमा, `style.css` नामक नयाँ फाइल सिर्जना गर्नुहोस्, त्यसपछि यसलाई तपाईंको HTML डकुमेन्टको `<head>` सेक्सनमा लिंक गर्नुहोस्:
 
 ```html
 <link rel="stylesheet" href="./style.css" />
 ```
 
 **यस कोडले के गर्छ:**
-- **HTML र CSS फाइलहरू बीच जडान बनाउँछ**
-- **ब्राउजरलाई `style.css` बाट शैलीहरू लोड र लागू गर्न भन्छ**
-- **यो CSS फाइल हो भनेर निर्दिष्ट गर्न `rel="stylesheet"` एट्रिब्युट प्रयोग गर्दछ**
-- **फाइल पथलाई `href="./style.css"` द्वारा सन्दर्भित गर्दछ**
+- **जडान बनाउँछ** तपाईंको HTML र CSS फाइलहरू बीच
+- **ब्राउजरलाई बताउँछ** `style.css` बाट शैलीहरू लोड र लागू गर्न
+- **प्रयोग गर्छ** `rel="stylesheet"` विशेषता CSS फाइल हो भनेर निर्दिष्ट गर्न
+- **सन्दर्भ दिन्छ** फाइल पथ `href="./style.css"` प्रयोग गरेर
 
 ## CSS क्यास्केडको समझ
 
-कहिल्यै सोच्नुभएको छ किन CSS लाई "क्यास्केडिङ" स्टाइल शीट्स भनिन्छ? शैलीहरू झरनाको जस्तै तल झर्छन्, र कहिलेकाहीं तिनीहरू एकअर्कासँग विरोध गर्छन्।
+CSS लाई "क्यास्केडिङ" शैली शीट्स किन भनिन्छ भनेर कहिल्यै सोच्नुभएको छ? शैलीहरू झरनाजस्तै तल झर्छन्, र कहिलेकाहीं तिनीहरू एकअर्कासँग विरोध गर्छन्।
 
-सोच्नुहोस् कि कसरी सैन्य आदेश संरचनाहरू काम गर्छन् - एक सामान्य आदेशले "सबै सैनिकहरूले हरियो लगाउनुहोस्" भन्न सक्छ, तर तपाईंको युनिटलाई विशिष्ट आदेशले "समारोहको लागि निलो पोशाक लगाउनुहोस्" भन्न सक्छ। थप विशिष्ट निर्देशनले प्राथमिकता लिन्छ। CSS ले यस्तै तर्क अनुसरण गर्छ, र यो पदानुक्रमको समझले डिबगिङलाई धेरै प्रबन्धनीय बनाउँछ।
+कसरी सैन्य आदेश संरचनाहरू काम गर्छन् भनेर विचार गर्नुहोस् - सामान्य आदेशले "सबै सैनिकहरूले हरियो लगाउनुहोस्" भन्न सक्छ, तर तपाईंको युनिटलाई विशिष्ट आदेशले "समारोहको लागि ड्रेस ब्लुज लगाउनुहोस्" भन्न सक्छ। थप विशिष्ट निर्देशनलाई प्राथमिकता दिइन्छ। CSS ले यस्तै तर्क अनुसरण गर्छ, र यो पदानुक्रमको समझले डिबगिङलाई धेरै व्यवस्थापनयोग्य बनाउँछ।
 
-### क्यास्केड प्राथमिकतामा प्रयोग
+### क्यास्केड प्राथमिकतासँग प्रयोग
 
 क्यास्केडलाई कार्यमा देखौं र शैलीको द्वन्द्व सिर्जना गरौं। पहिलो, तपाईंको `<h1>` ट्यागमा इनलाइन शैली थप्नुहोस्:
 
@@ -77,9 +133,9 @@ CSS लाई प्रायः "चिजहरू सुन्दर बन
 ```
 
 **यस कोडले के गर्छ:**
-- **इनलाइन स्टाइलिङ प्रयोग गरेर `<h1>` एलिमेन्टमा सीधा रातो रंग लागू गर्छ**
-- **HTML मा CSS इनलाइन रूपमा एम्बेड गर्न `style` एट्रिब्युट प्रयोग गर्दछ**
-- **यो विशिष्ट एलिमेन्टको लागि उच्च प्राथमिकता शैली नियम सिर्जना गर्छ**
+- **रंग लागू गर्छ** इनलाइन शैली प्रयोग गरेर `<h1>` तत्वमा
+- **प्रयोग गर्छ** `style` विशेषता CSS लाई HTML मा सीधा एम्बेड गर्न
+- **सिर्जना गर्छ** यो विशिष्ट तत्वको लागि उच्च प्राथमिकता शैली नियम
 
 अब, तपाईंको `style.css` फाइलमा यो नियम थप्नुहोस्:
 
@@ -89,29 +145,51 @@ h1 {
 }
 ```
 
-**माथिको कोडमा हामीले:**
-- **सबै `<h1>` एलिमेन्टहरूलाई लक्षित गर्ने CSS नियम परिभाषित गरेका छौं**
-- **एक्स्टर्नल स्टाइलशीट प्रयोग गरेर टेक्स्ट रंग निलो सेट गरेका छौं**
-- **इनलाइन शैलीहरूको तुलनामा कम प्राथमिकता नियम सिर्जना गरेका छौं**
-
-✅ **ज्ञान जाँच**: तपाईंको वेब एपमा कुन रंग देखिन्छ? किन त्यो रंग जित्छ? तपाईंले शैलीहरू ओभरराइड गर्न चाहनुहुने परिदृश्यहरू सोच्न सक्नुहुन्छ?
+**माथिको कोडमा:**
+- **परिभाषित गर्छ** CSS नियम जसले सबै `<h1>` तत्वहरूलाई लक्षित गर्छ
+- **सेट गर्छ** पाठको रंग नीलो बाह्य शैली शीट प्रयोग गरेर
+- **सिर्जना गर्छ** इनलाइन शैलीहरूको तुलनामा कम प्राथमिकता नियम
+
+✅ **ज्ञान जाँच**: तपाईंको वेब एपमा कुन रंग देखिन्छ? किन त्यो रंग जित्छ? तपाईंले शैलीहरूलाई ओभरराइड गर्न चाहनुहुने परिदृश्यहरू सोच्न सक्नुहुन्छ?
+
+```mermaid
+flowchart TD
+    A["Browser encounters h1 element"] --> B{"Check for inline styles"}
+    B -->|Found| C["style='color: red'"] 
+    B -->|None| D{"Check for ID rules"}
+    C --> E["Apply red color (1000 points)"]
+    D -->|Found| F["#heading { color: green }"]
+    D -->|None| G{"Check for class rules"}
+    F --> H["Apply green color (100 points)"]
+    G -->|Found| I[".title { color: blue }"]
+    G -->|None| J{"Check element rules"}
+    I --> K["Apply blue color (10 points)"]
+    J -->|Found| L["h1 { color: purple }"]
+    J -->|None| M["Use browser default"]
+    L --> N["Apply purple color (1 point)"]
+    
+    style C fill:#ff6b6b
+    style F fill:#51cf66
+    style I fill:#339af0
+    style L fill:#9775fa
+```
 
 > 💡 **CSS प्राथमिकता क्रम (उच्चतमदेखि न्यूनतम):**
 > 1. **इनलाइन शैलीहरू** (style attribute)
 > 2. **IDs** (#myId)
-> 3. **क्लासहरू** (.myClass) र एट्रिब्युटहरू
-> 4. **एलिमेन्ट सेलेक्टरहरू** (h1, div, p)
+> 3. **क्लासहरू** (.myClass) र विशेषताहरू
+> 4. **तत्व चयनकर्ताहरू** (h1, div, p)
 > 5. **ब्राउजर डिफल्टहरू**
 
-## CSS इनहेरिटेन्सको प्रयोग
+## CSS इनहेरिटेन्सको कार्यमा समझ
 
-CSS इनहेरिटेन्स आनुवंशिकता जस्तै काम गर्छ - एलिमेन्टहरूले तिनीहरूको अभिभावक एलिमेन्टहरूबाट निश्चित गुणहरू प्राप्त गर्छन्। यदि तपाईंले `body` एलिमेन्टमा फन्ट परिवार सेट गर्नुभयो भने, भित्रको सबै टेक्स्टले स्वचालित रूपमा त्यही फन्ट प्रयोग गर्छ। यो Habsburg परिवारको विशिष्ट जबडा रेखा पीढीहरूमा देखा परे जस्तै हो।
+CSS इनहेरिटेन्स आनुवंशिकता जस्तै काम गर्छ - तत्वहरूले तिनीहरूको अभिभावक तत्वहरूबाट निश्चित गुणहरू प्राप्त गर्छन्। यदि तपाईंले शरीर तत्वमा फन्ट परिवार सेट गर्नुभयो भने, भित्रको सबै पाठले स्वचालित रूपमा त्यही फन्ट प्रयोग गर्छ। यो ह्याब्सबर्ग परिवारको विशिष्ट जबडा रेखा पीढीहरूमा देखा परे जस्तै हो।
 
-तर, सबै कुरा इनहेरिट हुँदैन। फन्ट र रंग जस्ता टेक्स्ट शैलीहरू इनहेरिट हुन्छन्, तर मार्जिन र बोर्डर जस्ता लेआउट गुणहरू इनहेरिट हुँदैनन्। जस्तै बच्चाहरूले शारीरिक विशेषताहरू इनहेरिट गर्न सक्छन् तर तिनीहरूको अभिभावकको फेसन छनोटहरू होइन।
+तर सबै कुरा इनहेरिट हुँदैन। फन्ट र रंग जस्ता पाठ शैलीहरू इनहेरिट हुन्छन्, तर मार्जिन र बोर्डर जस्ता लेआउट गुणहरू हुँदैनन्। जस्तै बच्चाहरूले शारीरिक विशेषताहरू प्राप्त गर्न सक्छन् तर तिनीहरूको अभिभावकको फेसन छनोटहरू होइन।
 
 ### फन्ट इनहेरिटेन्सको अवलोकन
 
-आउनुहोस् `<body>` एलिमेन्टमा फन्ट परिवार सेट गरेर इनहेरिटेन्सलाई कार्यमा देखौं:
+तपाईंको `<body>` तत्वमा फन्ट परिवार सेट गरेर इनहेरिटेन्सलाई कार्यमा देखौं:
 
 ```css
 body {
@@ -120,30 +198,45 @@ body {
 ```
 
 **यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
-- **पूरा पृष्ठको लागि फन्ट परिवार सेट गर्दछ `body` एलिमेन्टलाई लक्षित गरेर**
-- **बेहतर ब्राउजर अनुकूलताको लागि फन्ट स्ट्याक प्रयोग गर्दछ**
-- **विभिन्न अपरेटिङ सिस्टमहरूमा राम्रो देखिने आधुनिक सिस्टम फन्टहरू लागू गर्दछ**
-- **सबै बच्चा एलिमेन्टहरूले यो फन्ट इनहेरिट गर्छन् जबसम्म विशेष रूपमा ओभरराइड गरिएको छैन**
+- **सेट गर्छ** सम्पूर्ण पृष्ठको लागि फन्ट परिवार `<body>` तत्वलाई लक्षित गरेर
+- **प्रयोग गर्छ** फन्ट स्ट्याक फालब्याक विकल्पहरूसँग राम्रो ब्राउजर अनुकूलताको लागि
+- **लागू गर्छ** आधुनिक प्रणाली फन्टहरू जुन विभिन्न अपरेटिङ सिस्टमहरूमा राम्रो देखिन्छ
+- **सुनिश्चित गर्छ** सबै बच्चा तत्वहरूले यो फन्ट प्राप्त गर्छन् जबसम्म विशेष रूपमा ओभरराइड गरिएको छैन
 
-तपाईंको ब्राउजरको डेभलपर टूल्स (F12) खोल्नुहोस्, एलिमेन्ट्स ट्याबमा जानुहोस्, र तपाईंको `<h1>` एलिमेन्टलाई निरीक्षण गर्नुहोस्। तपाईंले देख्नुहुनेछ कि यसले `body` बाट फन्ट परिवार इनहेरिट गर्छ:
+तपाईंको ब्राउजरको डेभलपर टूल्स (F12) खोल्नुहोस्, एलिमेन्ट्स ट्याबमा जानुहोस्, र तपाईंको `<h1>` तत्व निरीक्षण गर्नुहोस्। तपाईंले देख्नुहुनेछ कि यसले शरीरबाट फन्ट परिवार इनहेरिट गर्छ:
 
-![इनहेरिटेड फन्ट](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ne.png)
+![इनहेरिट गरिएको फन्ट](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ne.png)
 
-✅ **प्रयोग समय**: `<body>` मा `color`, `line-height`, वा `text-align` जस्ता अन्य इनहेरिटेबल गुणहरू सेट गर्न प्रयास गर्नुहोस्। तपाईंको हेडिङ र अन्य एलिमेन्टहरूमा के हुन्छ?
+✅ **प्रयोग समय**: `<body>` मा `color`, `line-height`, वा `text-align` जस्ता अन्य इनहेरिटेबल गुणहरू सेट गर्न प्रयास गर्नुहोस्। तपाईंको हेडिङ र अन्य तत्वहरूमा के हुन्छ?
 
 > 📝 **इनहेरिटेबल गुणहरू समावेश छन्**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
 >
 > **गैर-इनहेरिटेबल गुणहरू समावेश छन्**: `margin`, `padding`, `border`, `width`, `height`, `position`
 
-## CSS सेलेक्टरहरूको मास्टरी
+### 🔄 **शिक्षण जाँच**
+**CSS आधारभूत समझ**: चयनकर्ताहरूमा जानु अघि सुनिश्चित गर्नुहोस् कि तपाईं:
+- ✅ क्यास्केड र इनहेरिटेन्सको बीचको भिन्नता व्याख्या गर्न सक्नुहुन्छ
+- ✅ विशिष्टता द्वन्द्वमा कुन शैली जित्छ भविष्यवाणी गर्न सक्नुहुन्छ
+- ✅ कुन गुणहरू अभिभावक तत्वहरूबाट इनहेरिट हुन्छन् पहिचान गर्न सक्नुहुन्छ
+- ✅ CSS फाइलहरू HTML सँग ठीकसँग जडान गर्न सक्नुहुन्छ
+
+**छिटो परीक्षण**: यदि तपाईंसँग यी शैलीहरू छन् भने, `<div class="special">` भित्रको `<h1>` को रंग के हुनेछ?
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*उत्तर: रातो (तत्व चयनकर्ताले सिधै h1 लाई लक्षित गर्छ)*
+
+## CSS चयनकर्ताहरूमा महारत हासिल गर्दै
 
-CSS सेलेक्टरहरू तपाईंको शैलीको लागि विशिष्ट एलिमेन्टहरूलाई लक्षित गर्ने तरिका हो। यो ठ्याक्कै निर्देशन दिने जस्तै काम गर्छ - "घर" भन्नुको सट्टा, तपाईं "निलो घर जसको रातो ढोका छ म्यापल स्ट्रीटमा" भन्न सक्नुहुन्छ।
+CSS चयनकर्ताहरू तपाईंको शैलीको लागि विशिष्ट तत्वहरूलाई लक्षित गर्ने तरिका हो। तिनीहरू सटीक निर्देशन दिने जस्तै काम गर्छन् - "घर" भन्नुको सट्टा, तपाईं "म्यापल स्ट्रिटमा रातो ढोकासहितको नीलो घर" भन्न सक्नुहुन्छ।
 
-CSS ले विभिन्न तरिकाहरू प्रदान गर्दछ विशिष्ट हुन, र सही सेलेक्टर चयन गर्नु भनेको कार्यको लागि उपयुक्त उपकरण चयन गर्नु जस्तै हो। कहिलेकाहीं तपाईंले छिमेकका सबै ढोकाहरूलाई शैली दिनुपर्छ, र कहिलेकाहीं केवल एक विशिष्ट ढोकालाई।
+CSS ले विशिष्ट हुन विभिन्न तरिकाहरू प्रदान गर्दछ, र सही चयनकर्ता छनोट गर्नु भनेको कार्यको लागि उपयुक्त उपकरण छनोट गर्नु जस्तै हो। कहिलेकाहीं तपाईंले छिमेकका सबै ढोकाहरूलाई शैली दिन आवश्यक छ, र कहिलेकाहीं केवल एक विशिष्ट ढोका।
 
-### एलिमेन्ट सेलेक्टरहरू (ट्यागहरू)
+### तत्व चयनकर्ताहरू (ट्यागहरू)
 
-एलिमेन्ट सेलेक्टरहरूले HTML एलिमेन्टहरूलाई तिनीहरूको ट्याग नामद्वारा लक्षित गर्छ। तिनीहरू आधारभूत शैली सेट गर्नका लागि उपयुक्त छन् जुन तपाईंको पृष्ठभरि व्यापक रूपमा लागू हुन्छ:
+तत्व चयनकर्ताहरू HTML तत्वहरूलाई तिनीहरूको ट्याग नामद्वारा लक्षित गर्छन्। तिनीहरू तपाईंको पृष्ठभरि व्यापक रूपमा लागू हुने आधारभूत शैलीहरू सेट गर्न उत्तम छन्:
 
 ```css
 body {
@@ -160,19 +253,19 @@ h1 {
 }
 ```
 
-**यी शैलीहरू बुझ्दै:**
-- **`body` सेलेक्टरले सम्पूर्ण पृष्ठमा सुसंगत टाइपोग्राफी सेट गर्दछ**
-- **डिफल्ट ब्राउजर मार्जिन र प्याडिङ हटाउँछ राम्रो नियन्त्रणको लागि**
-- **सबै हेडिङ एलिमेन्टहरूलाई रंग, एलाइनमेन्ट, र स्पेसिङको साथ शैली दिन्छ**
-- **स्केलेबल, पहुँचयोग्य फन्ट साइजिङको लागि `rem` युनिटहरू प्रयोग गर्दछ**
+**यी शैलीहरूको समझ:**
+- **सेट गर्छ** सम्पूर्ण पृष्ठमा सुसंगत टाइपोग्राफी `body` चयनकर्ता प्रयोग गरेर
+- **हटाउँछ** ब्राउजरको डिफल्ट मार्जिन र प्याडिङ राम्रो नियन्त्रणको लागि
+- **शैली दिन्छ** सबै हेडिङ तत्वहरूलाई रंग, संरेखण, र स्पेसिङको साथ
+- **प्रयोग गर्छ** `rem` युनिटहरू स्केलेबल, पहुँचयोग्य फन्ट साइजको लागि
 
-एलिमेन्ट सेलेक्टरहरूले सामान्य शैलीका लागि राम्रो काम गर्छन्, तर तपाईंलाई टेरारियममा बोटबिरुवाहरू जस्ता व्यक्तिगत कम्पोनेन्टहरूलाई शैली दिन थप विशिष्ट सेलेक्टरहरू चाहिन्छ।
+तत्व चयनकर्ताहरू सामान्य शैलीको लागि राम्रोसँग काम गर्छन्, तर तपाईंलाई टेरारियममा बोटबिरुवाहरू जस्ता व्यक्तिगत कम्पोनेन्टहरूलाई शैली दिन अधिक विशिष्ट चयनकर्ताहरू आवश्यक हुनेछ।
 
-### अद्वितीय एलिमेन्टहरूको लागि ID सेलेक्टरहरू
+### अद्वितीय तत्वहरूको लागि ID चयनकर्ताहरू
 
-ID सेलेक्टरहरूले `#` प्रतीक प्रयोग गर्छन् र विशिष्ट `id` एट्रिब्युट भएका एलिमेन्टहरूलाई लक्षित गर्छन्। IDs पृष्ठमा अद्वितीय हुनुपर्छ, त्यसैले तिनीहरू व्यक्तिगत, विशेष एलिमेन्टहरू जस्तै हाम्रो बायाँ र दायाँ बोट कन्टेनरहरूलाई शैली दिनका लागि उपयुक्त छन्।
+ID चयनकर्ताहरू `#` प्रतीक प्रयोग गर्छन् र विशिष्ट `id` विशेषताहरू भएका तत्वहरूलाई लक्षित गर्छन्। IDs पृष्ठमा अद्वितीय हुनुपर्छ, त्यसैले तिनीहरू हाम्रो बायाँ र दायाँ बोट कन्टेनरहरू जस्ता व्यक्तिगत, विशेष तत्वहरूलाई शैली दिन उत्तम छन्।
 
-आउनुहोस् हाम्रो टेरारियमको साइड कन्टेनरहरूको लागि शैली सिर्जना गरौं जहाँ बोटहरू रहनेछन्:
+हाम्रो टेरारियमको साइड कन्टेनरहरूको शैली सिर्जना गरौं जहाँ बोटहरू बस्नेछन्:
 
 ```css
 #left-container {
@@ -198,16 +291,16 @@ ID सेलेक्टरहरूले `#` प्रतीक प्रय
 }
 ```
 
-**यस कोडले के गर्छ:**
-- **कन्टेनरहरूलाई `absolute` पोजिसनिङ प्रयोग गरेर बायाँ र दायाँ किनारमा राख्छ**
-- **स्क्रिन साइजमा अनुकूल हुने उत्तरदायी उचाइको लागि `vh` युनिटहरू प्रयोग गर्दछ**
-- **`box-sizing: border-box` लागू गर्दछ ताकि प्याडिङ कुल चौडाइमा समावेश होस्**
-- **शून्य मानहरूबाट अनावश्यक `px` युनिटहरू हटाउँछ सफा कोडको लागि**
-- **स्टार्क ग्रे भन्दा सजिलो पृष्ठभूमि रंग सेट गर्दछ**
+**यस कोडले के हासिल गर्छ:**
+- **स्थिति दिन्छ** कन्टेनरहरूलाई `absolute` स्थिति प्रयोग गरेर टाढाको बायाँ र दायाँ किनारहरूमा
+- **प्रयोग गर्छ** `vh` (भ्यूपोर्ट उचाइ) युनिटहरू उत्तरदायी उचाइको लागि जुन स्क्रिन आकारमा अनुकूलन हुन्छ
+- **लागू गर्छ** `box-sizing: border-box` ताकि प्याडिङ कुल चौडाइमा समावेश होस्
+- **हटाउँछ** अनावश्यक `px` युनिटहरू शून्य मानहरूबाट सफा कोडको लागि
+- **सेट गर्छ** हल्का पृष्ठभूमि रंग जुन गाढा खैरोको तुलनामा आँखामा सजिलो छ
 
-✅ **कोड गुणस्तर चुनौती**: ध्यान दिनुहोस् कि यो CSS ले DRY (Don't Repeat Yourself) सिद्धान्तको उल्लङ्घन गर्छ। तपाईं यसलाई ID र क्लास दुवै प्रयोग गरेर कसरी सुधार गर्न सक्नुहुन्छ?
+✅ **कोड गुणस्तर चुनौती**: ध्यान दिनुहोस् कि यो CSS ले DRY (Don't Repeat Yourself) सिद्धान्तको उल्लङ्घन गर्छ। तपाईंले यसलाई ID र क्लास दुवै प्रयोग गरेर कसरी पुनःफारम्याट गर्न सक्नुहुन्छ?
 
-**सुधार गरिएको दृष्टिकोण:**
+**सुधारिएको दृष्टिकोण:**
 ```html
 <div id="left-container" class="container"></div>
 <div id="right-container" class="container"></div>
@@ -233,11 +326,11 @@ ID सेलेक्टरहरूले `#` प्रतीक प्रय
 }
 ```
 
-### पुन: प्रयोगयोग्य शैलीहरूको लागि क्लास सेलेक्टरहरू
+### पुन: प्रयोगयोग्य शैलीहरूको लागि क्लास चयनकर्ताहरू
 
-क्लास सेलेक्टरहरूले `.` प्रतीक प्रयोग गर्छन् र तपाईंले एउटै शैलीहरू धेरै एलिमेन्टहरूमा लागू गर्न चाहनुहुन्छ भने उपयुक्त छन्। IDs भन्दा फरक, क्लासहरू तपाईंको HTML भरि पुन: प्रयोग गर्न सकिन्छ, जसले तिनीहरूलाई सुसंगत शैलीका ढाँचाहरूका लागि आदर्श बनाउँछ।
+क्लास चयनकर्ताहरू `.` प्रतीक प्रयोग गर्छन् र तपाईंले धेरै तत्वहरूमा समान शैलीहरू लागू गर्न चाहनुहुन्छ भने उत्तम हुन्छ। IDs को विपरीत, क्लासहरू तपाईंको HTML भरि पुन: प्रयोग गर्न सकिन्छ, जसले तिनीहरूलाई सुसंगत शैलीका ढाँचाहरूको लागि आदर्श बनाउँछ।
 
-हाम्रो टेरारियममा, प्रत्येक बोटलाई समान शैली चाहिन्छ तर व्यक्तिगत पोजिसनिङ पनि चाहिन्छ। हामीले साझा शैलीहरूको लागि क्लासहरूको संयोजन र अद्वितीय पोजिसनिङ र जाभास्क्रिप्ट अन्तरक्रियाको लागि IDs प्रयोग गर्नेछौं।
+हाम्रो टेरारियममा, प्रत्येक बोटलाई समान शैलीको आवश्यकता छ तर व्यक्तिगत स्थिति पनि आवश्यक छ। हामीले साझा शैलीहरूको लागि क्लासहरूको संयोजन र अद्वितीय स्थिति र जाभास्क्रिप्ट अन्तरक्रियाको लागि IDs प्रयोग गर्नेछौं।
 
 **प्रत्येक बोटको लागि HTML संरचना यहाँ छ:**
 ```html
@@ -246,11 +339,11 @@ ID सेलेक्टरहरूले `#` प्रतीक प्रय
 </div>
 ```
 
-**मुख्य तत्वहरू व्याख्या गरिएको:**
-- **सुसंगत कन्टेनर शैलीको लागि `class="plant-holder"` प्रयोग गर्दछ**
-- **साझा छवि शैली र व्यवहारको लागि `class="plant"` लागू गर्दछ**
-- **अद्वितीय पोजिसनिङ र जाभास्क्रिप्ट अन्तरक्रियाको लागि `id="plant1"` समावेश गर्दछ**
-- **स्क्रिन रिडर पहुँचयोग्यताको लागि वर्णनात्मक alt टेक्स्ट प्रदान गर्दछ**
+**मुख्य तत्वहरू व्याख्या गरियो:**
+- **प्रयोग गर्छ** `class="plant-holder"` सबै बोटहरूको लागि सुसंगत कन्टेनर शैली
+- **लागू गर्छ** `class="plant"` साझा छवि शैली र व्यवहारको लागि
+- **समावेश गर्छ** अद्वितीय `id="plant1"` व्यक्तिगत स्थिति र जाभास्क्रिप्ट अन्तरक्रियाको लागि
+- **प्रदान गर्छ** स्क्रिन रिडर पहुँचयोग्यताको लागि वर्णनात्मक alt पाठ
 
 अब यी शैलीहरू तपाईंको `style.css` फाइलमा थप्नुहोस्:
 
@@ -274,62 +367,96 @@ ID सेलेक्टरहरूले `#` प्रतीक प्रय
 }
 ```
 
-**यी शैलीहरूलाई तोड्दै:**
-- **पोजिसनिङ सन्दर्भ स्थापना गर्न प्लान्ट होल्डरको लागि सापेक्ष पोजिसनिङ सिर्जना गर्दछ**
-- **प्रत्येक प्लान्ट होल्डरलाई १३% उचाइ सेट गर्दछ, सुनिश्चित गर्दै सबै बोटहरू स्क्रोल बिना ठडिन्छन्**
-- **कन्टेनरहरू भित्र बोटहरूलाई राम्रोसँग केन्द्रित गर्न हल्का बायाँ सिफ्ट गर्दछ**
-- **`max-width` र `max-height` गुणहरू प्रयोग गरेर बोटहरूलाई उत्तरदायी रूपमा स्केल गर्न अनुमति दिन्छ**
-- **टेरारियममा अन्य एलिमेन्टहरू भन्दा माथि बोटहरू तहबद्ध गर्न `z-index` प्रयोग गर्दछ**
-- **CSS ट्रान्जिसनहरू सहित सानो होभर प्रभाव थप्छ राम्रो प्रयोगकर्ता अन्तरक्रियाको लागि**
-
-✅ **महत्वपूर्ण सोचाइ**: किन हामीलाई `.plant-holder` र `.plant` दुवै सेलेक्टरहरू चाहिन्छ? यदि हामीले केवल एउटा प्रयोग गर्ने प्रयास गर्यौं भने के हुन्छ?
-
-> 💡 **डिजाइन ढाँचा**: कन्टेनर (`.plant-holder`) ले लेआउट र पोजिसनिङ नियन्त्रण गर्छ, जबकि सामग्री (`.plant`) ले उपस्थिति र स्केलिङ नियन्त्रण गर्छ। यस विभाजनले कोडलाई अझ बढी मर्मतयोग्य र लचिलो बनाउँछ।
-
-## CSS पोजिसनिङको समझ
-
-CSS पोजिसनिङ भनेको नाटकको लागि स्टेज निर्देशक हुनु जस्तै हो - तपाईंले प्रत्येक पात्र कहाँ उभिन्छ र कसरी स्टेज वरिपरि सर्छ भन्ने निर्देशन दिनुहुन्छ। केही पात्रहरूले मानक संरचना अनुसरण गर्छन्, जबकि अन्यलाई नाटकीय प्रभावका लागि विशिष्ट पोजिसनिङ चाहिन्छ।
-
-पोजिसनिङ बुझिसकेपछि, धेरै लेआउट चुनौतीहरू प्रबन्धनीय हुन्छन्। तपाईंलाई नेभिगेसन बार चाहिन्छ जुन स्क्रोल गर्दा शीर्षमा रहन्छ? पोजिसनिङले त्यो सम्भव बनाउँछ। तपाईंलाई टूलटिप चाहिन्छ जुन विशिष्ट स्थानमा देखा पर्छ? त्यो पनि पोजिसनिङले सम्भव बनाउँछ।
-
-### पाँच पोजिसन मानहरू
-
-| पोजिसन मान | व्यवहार | प्रयोग केस |
-|----------------|----------|----------|
-| `static` | डिफल्ट फ्लो, top/left/right/bottom लाई बेवास्ता गर्छ | सामान्य डकुमेन्ट लेआउट |
-| `relative` | यसको सामान्य स्थितिको सापेक्ष पोजिसन गरिएको | साना समायोजनहरू, पोजिसनिङ सन्दर्भ सिर्जना गर्दै |
-| `absolute` | नजिकको पोजिसन गरिएको पूर्वजको सापेक्ष पोजिसन गरिएको | ठ्याक्कै प्लेसमेन्ट, ओभरलेहरू |
-| `fixed` | viewport को सापेक्ष पोजिसन गरिएको | नेभिगेसन बारहरू, फ्लोटिङ एलिमेन्टहरू |
-| `sticky` | स्क्रोलको आधारमा relative र fixed बीच स्विच गर्छ | स्क्रोल गर्दा टाँसिने हेडरहरू |
-
-### हाम्रो टेरारियममा पोजिसनिङ
-
-हाम्रो टेरारियमले चाहिएको लेआउट सिर्जना गर्न पोजिसनिङ प्रकारहरूको रणनीतिक संयोजन प्रयोग गर्दछ:
-
-```css
-/* Container positioning */
-.container {
-  position: absolute; /* Removes from normal flow */
-  /* ... other styles ... */
-}
-
-/* Plant holder positioning */
-.plant-holder {
-  position: relative; /* Creates positioning context */
-  /* ... other styles ... */
-}
+**यी शैलीहरूको विश्लेषण:**
+- **सिर्जना गर्छ** बोट होल्डरको लागि सापेक्ष स्थिति स्थिति सन्दर्भ स्थापना गर्न
+- **सेट गर्छ** प्रत्येक बोट होल्डरलाई १३% उचाइ, सुनिश्चित गर्दै सबै बोटहरू स्क्रोल नगरी ठडिन्छन्
+- **थोरै बायाँ सर्छ** होल्डरहरूलाई बोटहरूलाई कन्टेनरभित्र राम्रोसँग केन्द्रित गर्न
+- **अनुमति दिन्छ** बोटहरूलाई `max-width` र `max-height` गुणहरू प्रयोग गरेर उत्तरदायी रूपमा स्केल गर्न
+- **प्रयोग गर्छ** `z-index` बोटहरूलाई टेरारियमका अन्य तत्वहरू माथि तह गर्न
+- **थप्छ** CSS ट्रान्जिसनहरूसँग हल्का होभर प्रभाव राम्रो प्रयोगकर्ता अन्तरक्रियाको लागि
+
+✅ **महत्वपूर्ण सोचाइ**: किन हामीलाई `.plant-holder` र `.plant` चयनकर्ताहरू दुवै आवश्यक छ? यदि हामीले केवल एउटा प्रयोग गर्ने प्रयास गर्यौं भने के हुन्छ?
+
+> 💡 **डिजाइन ढाँचा**: कन्टेनर (`.plant-holder`) ले लेआउट र स्थिति नियन्त्रण गर्छ, जबकि सामग्री (`.plant`) ले उपस्थिति र स्केलिङ नियन्त्रण गर्छ। यस विभाजनले कोडलाई अधिक मर्मतयोग्य र लचिलो बनाउँछ।
+
+## CSS स्थिति समझ
+
+CSS स्थिति नाटकको लागि स्टेज निर्देशक जस्तै हो - तपाईंले प्रत्येक पात्र कहाँ उभिन्छ र कसरी स्टेज वरिपरि सर्छ भन्ने निर्देशन दिनुहुन्छ। केही पात्रहरूले मानक संरचना अनुसरण गर्छन्, जबकि अन्यलाई नाटकीय प्रभावको लागि विशिष्ट स्थिति आवश्यक छ।
+
+एकपटक तपाईंले स्थिति बुझ्नुभयो भने, धेरै लेआउट चुनौतीहरू व्यवस्थापनयोग्य हुन्छन्। तपाईंलाई नेभिगेसन बार चाहिन्छ जुन प्रयोगकर्ताहरू स्क्रोल गर्दा शीर्षमा रहन्छ? स्थिति त्यसलाई सम्हाल्छ। तपाईंलाई एक टूलटिप चाहिन्छ जुन विशिष्ट स्थानमा देखा पर्छ? त्यो पनि स्थिति हो।
+
+### पाँच स्थिति मानहरू
+
+```mermaid
+quadrantChart
+    title CSS Positioning Strategy
+    x-axis Document Flow --> Removed from Flow
+    y-axis Static Position --> Precise Control
+    quadrant-1 Absolute
+    quadrant-2 Fixed
+    quadrant-3 Static
+    quadrant-4 Sticky
+    
+    Static: [0.2, 0.2]
+    Relative: [0.3, 0.6]
+    Absolute: [0.8, 0.8]
+    Fixed: [0.9, 0.7]
+    Sticky: [0.5, 0.9]
+```
 
-/* Plant positioning */
-.plant {
-  position: absolute; /* Allows precise placement within holder */
-  /* ... other styles ... */
-}
+| स्थिति मान | व्यवहार | प्रयोग केस |
+|------------|---------|------------|
+| `static` | डिफल्ट प्रवाह, top/left/right/bottom लाई बेवास्ता गर्छ | सामान्य डकुमेन्ट लेआउट |
+| `relative` | यसको सामान्य स्थितिको सापेक्ष स्थित | साना समायोजनहरू, स्थिति सन्दर्भ सिर्जना गर्दै |
+| `absolute` | नजिकको स्थित अभिभावकको सापेक्ष स्थित | सटीक प्लेसमेन्ट, ओभरलेहरू |
+| `fixed` | भ्यूपोर्टको सापेक्ष स्थित | नेभिगेसन बारहरू, फ्लोटिङ तत्वहरू |
+| `sticky` | स्क्रोलको आधारमा सापेक्ष र फिक्स
+- यदि `.plant-holder` ले `relative` को सट्टा `absolute` प्रयोग गर्‍यो भने लेआउट कसरी परिवर्तन हुन्छ?
+- जब तपाईं `.plant` लाई `relative` पोजिसनिङमा परिवर्तन गर्नुहुन्छ, के हुन्छ?
+
+### 🔄 **शैक्षिक जाँच**
+**CSS पोजिसनिङको मास्टरी**: आफ्नो बुझाइलाई पुष्टि गर्न रोक्नुहोस्:
+- ✅ के तपाईं व्याख्या गर्न सक्नुहुन्छ कि ड्र्याग-एन्ड-ड्रपको लागि बिरुवाहरूलाई किन absolute पोजिसनिङ चाहिन्छ?
+- ✅ के तपाईं बुझ्नुहुन्छ कि relative कन्टेनरहरूले पोजिसनिङको सन्दर्भ कसरी सिर्जना गर्छन्?
+- ✅ किन साइड कन्टेनरहरूले absolute पोजिसनिङ प्रयोग गर्छन्?
+- ✅ यदि तपाईंले पोजिसन घोषणा पूर्ण रूपमा हटाउनुभयो भने के हुन्छ?
+
+**वास्तविक संसारको जडान**: CSS पोजिसनिङले वास्तविक संसारको लेआउटलाई कसरी प्रतिबिम्बित गर्छ भन्ने सोच्नुहोस्:
+- **Static**: शेल्फमा किताबहरू (प्राकृतिक क्रम)
+- **Relative**: किताबलाई अलिकति सार्ने तर यसको स्थानमा राख्ने
+- **Absolute**: पृष्ठ नम्बरमा ठ्याक्कै बुकमार्क राख्ने
+- **Fixed**: स्टिकी नोट जसले पृष्ठ पल्टाउँदा पनि देखिन्छ
+
+## CSS प्रयोग गरेर टेरारियम बनाउने
+
+अब हामी केवल CSS प्रयोग गरेर ग्लास जार बनाउनेछौं - कुनै छवि वा ग्राफिक्स सफ्टवेयर आवश्यक छैन।
+
+पोजिसनिङ र ट्रान्सपरेन्सी प्रयोग गरेर यथार्थपरक ग्लास, छायाँ, र गहिराइ प्रभावहरू सिर्जना गर्नु CSS को दृश्य क्षमताहरू देखाउँछ। यो प्रविधिले Bauhaus आन्दोलनका आर्किटेक्टहरूले सरल ज्यामितीय रूपहरू प्रयोग गरेर जटिल, सुन्दर संरचनाहरू कसरी बनाएका थिए भन्ने कुरा प्रतिबिम्बित गर्छ। यी सिद्धान्तहरू बुझिसकेपछि, तपाईं धेरै वेब डिजाइनहरू पछाडि CSS प्रविधिहरू चिन्न सक्नुहुन्छ।
+
+```mermaid
+flowchart LR
+    A[Jar Top] --> E[Complete Terrarium]
+    B[Jar Walls] --> E
+    C[Dirt Layer] --> E
+    D[Jar Bottom] --> E
+    F[Glass Effects] --> E
+    
+    A1["50% width<br/>5% height<br/>Top position"] --> A
+    B1["60% width<br/>80% height<br/>Rounded corners<br/>0.5 opacity"] --> B
+    C1["60% width<br/>5% height<br/>Dark brown<br/>Bottom layer"] --> C
+    D1["50% width<br/>1% height<br/>Bottom position"] --> D
+    F1["Subtle shadows<br/>Transparency<br/>Z-index layering"] --> F
+    
+    style E fill:#d1e1df,stroke:#3a241d
+    style A fill:#e8f5e8
+    style B fill:#e8f5e8
+    style C fill:#8B4513
+    style D fill:#e8f5e8
 ```
 
-**पोजिसनिङ रणनीति बुझ्दै:**
-- **Absolute कन्टेनरहरू** सामान्य डकुमेन्ट फ्लोबाट हटाइन्छन् र स्क्रिन किनारमा पिन गरिन्छन्
-- **Relative प्लान्ट होल
-आउनुहोस्, टेरारियम जारलाई टुक्रा-टुक्रामा निर्माण गरौं। प्रत्येक भागले उत्तरदायी डिजाइनको लागि पूर्ण स्थिति र प्रतिशत-आधारित आकार प्रयोग गर्दछ:
+### ग्लास जारका कम्पोनेन्टहरू बनाउने
+
+आउनुहोस् टेरारियम जारलाई टुक्रा-टुक्रामा बनाऔं। प्रत्येक भागले absolute पोजिसनिङ र प्रतिशत-आधारित साइजिङ प्रयोग गर्दछ ताकि डिजाइन उत्तरदायी होस्:
 
 ```css
 .jar-walls {
@@ -381,31 +508,43 @@ CSS पोजिसनिङ भनेको नाटकको लागि स
 }
 ```
 
-**टेरारियम निर्माणको समझ:**
-- **प्रयोग गर्दछ** प्रतिशत-आधारित आयामहरू सबै स्क्रिन आकारहरूमा उत्तरदायी स्केलिङको लागि
-- **तत्वहरूलाई** पूर्ण रूपमा स्थिति दिन्छ ताकि तिनीहरूलाई ठीकसँग मिलाउन र सँगै राख्न सकियोस्
-- **विभिन्न अपारदर्शिता मानहरू लागू गर्दछ** ताकि गिलासको पारदर्शिता प्रभाव सिर्जना गर्न सकियोस्
-- **`z-index` लेयरिङ लागू गर्दछ** ताकि बिरुवाहरू जारभित्र देखिन्छन्
-- **सजिलो बक्स-छायाँ र परिष्कृत सीमा-व्यास लागू गर्दछ** ताकि थप वास्तविक देखावट प्रदान गर्न सकियोस्
+**टेरारियम निर्माणको बुझाइ:**
+- **प्रयोग गर्दछ** उत्तरदायी स्केलिङको लागि प्रतिशत-आधारित आयामहरू
+- **पोजिसन गर्दछ** तत्वहरूलाई ठ्याक्कै मिलाउन र स्ट्याक गर्न absolute पोजिसनिङ प्रयोग गरेर
+- **लागु गर्दछ** विभिन्न अपासिटी मानहरू ताकि ग्लास ट्रान्सपरेन्सी प्रभाव सिर्जना होस्
+- **प्रयोग गर्दछ** `z-index` लेयरिङ ताकि बिरुवाहरू जारभित्र देखिन्छन्
+- **थप्छ** सूक्ष्म बक्स-छायाँ र परिष्कृत border-radius ताकि यथार्थपरक देखिन्छ
 
 ### प्रतिशतको साथ उत्तरदायी डिजाइन
 
-ध्यान दिनुहोस् कि सबै आयामहरूले निश्चित पिक्सेल मानहरू भन्दा प्रतिशत प्रयोग गर्छन्:
+ध्यान दिनुहोस् कि सबै आयामहरूले निश्चित पिक्सेल मानहरूको सट्टा प्रतिशत प्रयोग गर्छन्:
+
+**किन यो महत्त्वपूर्ण छ:**
+- **सुनिश्चित गर्दछ** टेरारियम कुनै पनि स्क्रिन साइजमा समानुपातिक रूपमा स्केल हुन्छ
+- **राख्छ** जार कम्पोनेन्टहरू बीचको दृश्य सम्बन्ध
+- **प्रदान गर्दछ** मोबाइल फोनदेखि ठूला डेस्कटप मोनिटरसम्मको लागि एक सुसंगत अनुभव
+- **अनुकूलन गर्दछ** डिजाइनलाई भत्किन नदिई परिवर्तन गर्न
+
+### CSS युनिटहरूको प्रयोग
 
-**यसको महत्त्व किन छ:**
-- **सुनिश्चित गर्दछ** कि टेरारियम कुनै पनि स्क्रिन आकारमा अनुपातिक रूपमा स्केल हुन्छ
-- **जारका घटकहरू बीचको दृश्य सम्बन्ध कायम राख्छ**
-- **मोबाइल फोनदेखि ठूला डेस्कटप मोनिटरसम्मको अनुभवलाई स्थिर बनाउँछ**
-- **डिजाइनलाई भाँच्न नदिई अनुकूलन गर्न अनुमति दिन्छ**
+हामी `rem` युनिटहरू border-radius को लागि प्रयोग गर्दैछौं, जसले रूट फन्ट साइजको सापेक्ष स्केल गर्दछ। यसले अधिक पहुँचयोग्य डिजाइनहरू सिर्जना गर्दछ जसले प्रयोगकर्ताको फन्ट प्राथमिकताहरूलाई सम्मान गर्दछ। [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) को आधिकारिक स्पेसिफिकेशनमा थप जान्नुहोस्।
 
-### CSS इकाइहरूको प्रयोग
+✅ **दृश्य प्रयोग**: यी मानहरू परिवर्तन गरेर प्रभावहरू अवलोकन गर्नुहोस्:
+- जारको अपासिटीलाई 0.5 बाट 0.8 मा परिवर्तन गर्नुहोस् - यसले ग्लासको देखावटलाई कसरी असर गर्छ?
+- माटोको रंगलाई `#3a241d` बाट `#8B4513` मा समायोजन गर्नुहोस् - यसले के दृश्य प्रभाव पार्छ?
+- माटोको `z-index` लाई 2 मा परिवर्तन गर्नुहोस् - लेयरिङमा के हुन्छ?
 
-हामी सीमा-व्यासको लागि `rem` इकाइहरू प्रयोग गर्दैछौं, जसले मूल फन्ट आकारको सापेक्ष स्केल गर्दछ। यसले प्रयोगकर्ताको फन्ट प्राथमिकताहरूलाई सम्मान गर्ने थप पहुँचयोग्य डिजाइनहरू सिर्जना गर्दछ। [CSS सापेक्ष इकाइहरू](https://www.w3.org/TR/css-values-3/#font-relative-lengths) को आधिकारिक विशिष्टतामा थप जान्नुहोस्।
+### 🔄 **शैक्षिक जाँच**
+**CSS दृश्य डिजाइनको बुझाइ**: दृश्य CSS को आफ्नो समझ पुष्टि गर्नुहोस्:
+- ✅ प्रतिशत-आधारित आयामहरूले उत्तरदायी डिजाइन कसरी सिर्जना गर्छन्?
+- ✅ अपासिटीले ग्लास ट्रान्सपरेन्सी प्रभाव कसरी सिर्जना गर्छ?
+- ✅ लेयरिङ तत्वहरूमा z-index को भूमिका के हो?
+- ✅ border-radius मानहरूले जारको आकार कसरी सिर्जना गर्छन्?
 
-✅ **दृश्य प्रयोग:** यी मानहरू परिवर्तन गरेर प्रभावहरू अवलोकन गर्नुहोस्:
-- जारको अपारदर्शिता 0.5 बाट 0.8 मा परिवर्तन गर्नुहोस् – यसले गिलासको देखावटलाई कसरी असर गर्छ?
-- माटोको रंग `#3a241d` बाट `#8B4513` मा समायोजन गर्नुहोस् – यसले के दृश्य प्रभाव पार्छ?
-- माटोको `z-index` लाई 2 मा परिवर्तन गर्नुहोस् – लेयरिङमा के हुन्छ?
+**डिजाइन सिद्धान्त**: ध्यान दिनुहोस् कि हामी सरल आकारहरूबाट जटिल दृश्यहरू बनाउँदैछौं:
+1. **आयतहरू** → **गोलो आयतहरू** → **जार कम्पोनेन्टहरू**
+2. **समतल रंगहरू** → **अपासिटी** → **ग्लास प्रभाव**
+3. **व्यक्तिगत तत्वहरू** → **लेयर गरिएको संरचना** → **3D देखावट**
 
 ---
 
@@ -413,51 +552,147 @@ CSS पोजिसनिङ भनेको नाटकको लागि स
 
 Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** CSS एनिमेशन सिर्जना गर्नुहोस् जसले टेरारियमका बिरुवाहरूलाई प्राकृतिक हावा प्रभावको अनुकरण गर्दै हल्का हल्ला गराउँछ। यसले CSS एनिमेशन, ट्रान्सफर्म्स, र कीफ्रेमहरू अभ्यास गर्न मद्दत गर्नेछ र टेरारियमको दृश्य आकर्षण बढाउनेछ।
+**विवरण:** CSS एनिमेसन सिर्जना गर्नुहोस् जसले टेरारियमका बिरुवाहरूलाई प्राकृतिक हावाको प्रभाव जस्तै बिस्तारै हल्लाउँछ। CSS एनिमेसन, ट्रान्सफर्म्स, र keyframes अभ्यास गर्दै टेरारियमको दृश्य आकर्षण बढाउनुहोस्।
 
-**प्रेरणा:** CSS कीफ्रेम एनिमेशनहरू थपेर टेरारियमका बिरुवाहरूलाई हल्का हल्ला गराउनुहोस्। एक हल्ला गर्ने एनिमेशन सिर्जना गर्नुहोस् जसले प्रत्येक बिरुवालाई हल्का (2-3 डिग्री) बायाँ र दायाँ घुमाउँछ, 3-4 सेकेन्डको अवधि सहित। यसलाई `.plant` वर्गमा लागू गर्नुहोस्। सुनिश्चित गर्नुहोस् कि एनिमेशन अनन्त रूपमा लूप हुन्छ र प्राकृतिक गतिका लागि इजिङ फङ्सन छ।
+**प्रेरणा:** CSS keyframe एनिमेसन थपेर टेरारियमका बिरुवाहरूलाई बिस्तारै दायाँ-बायाँ हल्लाउने बनाउनुहोस्। प्रत्येक बिरुवालाई अलिकति (2-3 डिग्री) दायाँ-बायाँ घुमाउने एनिमेसन सिर्जना गर्नुहोस् जसको अवधि 3-4 सेकेन्ड होस्, र यसलाई `.plant` क्लासमा लागू गर्नुहोस्। सुनिश्चित गर्नुहोस् कि एनिमेसन अनन्त रूपमा लूप हुन्छ र प्राकृतिक गतिका लागि easing function प्रयोग गर्दछ।
 
-[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
 
-## 🚀 चुनौती: गिलासको प्रतिबिम्ब थप्दै
+## 🚀 चुनौती: ग्लास रिफ्लेक्सन थप्ने
 
-तपाईंको टेरारियमलाई यथार्थपरक गिलास प्रतिबिम्बहरूद्वारा सुधार गर्न तयार हुनुहुन्छ? यो प्रविधिले डिजाइनमा गहिराई र यथार्थता थप्नेछ।
+के तपाईं आफ्नो टेरारियमलाई यथार्थपरक ग्लास रिफ्लेक्सनको साथ सुधार गर्न तयार हुनुहुन्छ? यो प्रविधिले डिजाइनमा गहिराइ र यथार्थता थप्नेछ।
 
-तपाईंले हल्का रंगका अण्डाकार आकारहरू सिर्जना गर्नुहुनेछ जसले गिलासको सतहमा प्रकाशको प्रतिबिम्बलाई अनुकरण गर्दछ। यो प्रविधि पुनर्जागरणका चित्रकारहरू जस्तै Jan van Eyck ले चित्रित गिलासलाई तीन-आयामीय देखाउन प्रयोग गरेको जस्तै हो। तपाईंले निम्न लक्ष्य राख्नु भएको छ:
+तपाईंले हल्का रंगका अण्डाकार आकारहरू सिर्जना गर्नुहुनेछ जसले ग्लास रिफ्लेक्सनलाई नक्कल गर्छ। यो प्रविधि Renaissance चित्रकारहरू जस्तै Jan van Eyck ले चित्रित ग्लासलाई तीन-आयामीय देखाउन प्रकाश र रिफ्लेक्सन प्रयोग गरेको जस्तै हो। तपाईंले निम्न लक्ष्य राख्नुहुनेछ:
 
 ![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ne.png)
 
 **तपाईंको चुनौती:**
-- **सिर्जना गर्नुहोस्** गिलास प्रतिबिम्बहरूको लागि हल्का सेतो वा हल्का रंगका अण्डाकार आकारहरू
-- **तिनीहरूलाई रणनीतिक रूपमा जारको बायाँ पक्षमा स्थिति दिनुहोस्**
-- **उपयुक्त अपारदर्शिता र ब्लर प्रभावहरू लागू गर्नुहोस्** ताकि यथार्थपरक प्रकाश प्रतिबिम्ब सिर्जना गर्न सकियोस्
-- **`border-radius` प्रयोग गर्नुहोस्** ताकि जैविक, बबल-जस्ता आकारहरू सिर्जना गर्न सकियोस्
-- **ग्रेडियन्ट वा बक्स-छायाँसँग प्रयोग गर्नुहोस्** ताकि सुधारिएको यथार्थता प्रदान गर्न सकियोस्
+- **सिर्जना गर्नुहोस्** ग्लास रिफ्लेक्सनका लागि हल्का रंगका अण्डाकार आकारहरू
+- **पोजिसन गर्नुहोस्** तिनीहरूलाई जारको बायाँतिर रणनीतिक रूपमा
+- **लागु गर्नुहोस्** उपयुक्त अपासिटी र ब्लर प्रभावहरू ताकि यथार्थपरक प्रकाश रिफ्लेक्सन होस्
+- **प्रयोग गर्नुहोस्** `border-radius` ताकि जैविक, बबल-जस्ता आकारहरू बनोस्
+- **अनुसन्धान गर्नुहोस्** ग्रेडियन्ट वा बक्स-छायाँहरू प्रयोग गरेर यथार्थता सुधार गर्न
 
-## पोस्ट-व्याख्यान क्विज
+## पोस्ट-लेक्चर क्विज
 
-[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/18)
+[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/18)
 
 ## CSS ज्ञान विस्तार गर्नुहोस्
 
-CSS सुरुमा जटिल लाग्न सक्छ, तर यी मुख्य अवधारणाहरूको समझले उन्नत प्रविधिहरूको लागि बलियो आधार प्रदान गर्दछ।
+CSS सुरुमा जटिल लाग्न सक्छ, तर यी मुख्य अवधारणाहरू बुझ्दा उन्नत प्रविधिहरूको लागि बलियो आधार प्रदान गर्दछ।
 
-**तपाईंको CSS सिक्ने अर्को क्षेत्रहरू:**
-- **Flexbox** - तत्वहरूको मिलान र वितरणलाई सरल बनाउँछ
+**तपाईंको अर्को CSS सिक्ने क्षेत्रहरू:**
+- **Flexbox** - तत्वहरूको संरेखण र वितरणलाई सरल बनाउँछ
 - **CSS Grid** - जटिल लेआउटहरू सिर्जना गर्न शक्तिशाली उपकरणहरू प्रदान गर्दछ
 - **CSS Variables** - पुनरावृत्ति घटाउँछ र मर्मतयोग्यता सुधार गर्दछ
-- **उत्तरदायी डिजाइन** - साइटहरू विभिन्न स्क्रिन आकारहरूमा राम्रोसँग काम गर्न सुनिश्चित गर्दछ
+- **उत्तरदायी डिजाइन** - विभिन्न स्क्रिन साइजहरूमा साइटहरू राम्रोसँग काम गर्न सुनिश्चित गर्दछ
 
-### अन्तरक्रियात्मक सिकाइ स्रोतहरू
+### अन्तरक्रियात्मक सिक्ने स्रोतहरू
 
-यी आकर्षक, व्यावहारिक खेलहरूसँग अवधारणाहरू अभ्यास गर्नुहोस्:
-- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - रमाइलो चुनौतीहरू मार्फत Flexbox सिक्नुहोस्
-- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid सिक्दै भर्चुअल गाजरहरू उमार्नुहोस्
-- 🎯 [CSS Battle](https://cssbattle.dev/) - कोडिङ चुनौतीहरूसँग तपाईंको CSS कौशल परीक्षण गर्नुहोस्
+यी रोचक, व्यावहारिक खेलहरूसँग अवधारणाहरू अभ्यास गर्नुहोस्:
+- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Flexbox मास्टर गर्न रमाइलो चुनौतीहरू
+- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid सिक्न भर्चुअल गाजर उमार्ने
+- 🎯 [CSS Battle](https://cssbattle.dev/) - कोडिङ चुनौतीहरूसँग आफ्नो CSS कौशल परीक्षण गर्नुहोस्
 
 ### थप सिकाइ
 
-CSS को आधारभूत ज्ञानको लागि, यो Microsoft Learn मोड्युल पूरा गर्नुहोस्: [तपाईंको HTML एपलाई CSS द्वारा शैली दिनुहोस्](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+CSS को आधारभूत ज्ञानको लागि, यो Microsoft Learn मोड्युल पूरा गर्नुहोस्: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा**
+- [ ] DevTools खोल्नुहोस् र कुनै पनि वेबसाइटमा CSS शैलीहरू निरीक्षण गर्नुहोस्
+- [ ] साधारण CSS फाइल सिर्जना गर्नुहोस् र HTML पेजमा लिंक गर्नुहोस्
+- [ ] विभिन्न विधिहरू प्रयोग गरेर रंगहरू परिवर्तन गर्नुहोस्: hex, RGB, र नामित रंगहरू
+- [ ] बक्स मोडेल अभ्यास गर्नुहोस् र div मा padding र margin थप्नुहोस्
+
+### 🎯 **तपाईंले यो घण्टामा हासिल गर्न सक्ने कुरा**
+- [ ] पोस्ट-लेसन क्विज पूरा गर्नुहोस् र CSS को आधारभूत कुराहरू समीक्षा गर्नुहोस्
+- [ ] आफ्नो HTML पेजलाई फन्ट, रंग, र स्पेसिङको साथ स्टाइल गर्नुहोस्
+- [ ] Flexbox वा Grid प्रयोग गरेर साधारण लेआउट सिर्जना गर्नुहोस्
+- [ ] CSS ट्रान्सिसनहरू प्रयोग गरेर स्मूथ प्रभावहरू अभ्यास गर्नुहोस्
+- [ ] मिडिया क्वेरीहरू प्रयोग गरेर उत्तरदायी डिजाइन अभ्यास गर्नुहोस्
+
+### 📅 **तपाईंको हप्ताको CSS साहसिक यात्रा**
+- [ ] टेरारियम स्टाइलिङ असाइनमेन्ट पूरा गर्नुहोस् र रचनात्मकता थप्नुहोस्
+- [ ] फोटो ग्यालरी लेआउट बनाउँदै CSS Grid मास्टर गर्नुहोस्
+- [ ] CSS एनिमेसन सिक्नुहोस् ताकि तपाईंको डिजाइनहरू जीवन्त बनोस्
+- [ ] Sass वा Less जस्ता CSS प्रिप्रोसेसरहरू अन्वेषण गर्नुहोस्
+- [ ] डिजाइन सिद्धान्तहरू अध्ययन गर्नुहोस् र CSS मा लागू गर्नुहोस्
+- [ ] अनलाइन भेटिएका रोचक डिजाइनहरू विश्लेषण गर्नुहोस् र पुनः सिर्जना गर्नुहोस्
+
+### 🌟 **तपाईंको महिनाको डिजाइन मास्टरी**
+- [ ] पूर्ण उत्तरदायी वेबसाइट डिजाइन प्रणाली बनाउनुहोस्
+- [ ] CSS-in-JS वा Tailwind जस्ता युटिलिटी-फर्स्ट फ्रेमवर्कहरू सिक्नुहोस्
+- [ ] CSS सुधारका साथ ओपन सोर्स प्रोजेक्टहरूमा योगदान गर्नुहोस्
+- [ ] CSS का उन्नत अवधारणाहरू जस्तै CSS कस्टम प्रोपर्टीहरू र कन्टेन्मेन्ट मास्टर गर्नुहोस्
+- [ ] मोड्युलर CSS को साथ पुन: प्रयोग गर्न मिल्ने कम्पोनेन्ट लाइब्रेरीहरू सिर्जना गर्नुहोस्
+- [ ] CSS सिक्दै अरूलाई मार्गदर्शन गर्नुहोस् र डिजाइन ज्ञान साझा गर्नुहोस्
+
+## 🎯 तपाईंको CSS मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title CSS Learning Progression
+    
+    section Foundation (10 minutes)
+        File Connection: Link CSS to HTML
+                       : Understand cascade rules
+                       : Learn inheritance basics
+        
+    section Selectors (15 minutes)
+        Targeting Elements: Element selectors
+                          : Class patterns
+                          : ID specificity
+                          : Combinators
+        
+    section Box Model (20 minutes)
+        Layout Fundamentals: Margin and padding
+                           : Border properties
+                           : Content sizing
+                           : Box-sizing behavior
+        
+    section Positioning (25 minutes)
+        Element Placement: Static vs relative
+                         : Absolute positioning
+                         : Z-index layering
+                         : Responsive units
+        
+    section Visual Design (30 minutes)
+        Styling Mastery: Colors and opacity
+                       : Shadows and effects
+                       : Transitions
+                       : Transform properties
+        
+    section Responsive Design (45 minutes)
+        Multi-Device Support: Media queries
+                            : Flexible layouts
+                            : Mobile-first approach
+                            : Viewport optimization
+        
+    section Advanced Techniques (1 week)
+        Modern CSS: Flexbox layouts
+                  : CSS Grid systems
+                  : Custom properties
+                  : Animation keyframes
+        
+    section Professional Skills (1 month)
+        CSS Architecture: Component patterns
+                        : Maintainable code
+                        : Performance optimization
+                        : Cross-browser compatibility
+```
+
+### 🛠️ तपाईंको CSS टूलकिटको सारांश
+
+यो पाठ पूरा गरेपछि, तपाईंसँग अब छ:
+- **क्यास्केड बुझाइ**: शैलीहरू कसरी इनहेरिट र ओभरराइड हुन्छन्
+- **सेलेक्टर मास्टरी**: तत्वहरू, क्लासहरू, र IDs को साथ सटीक लक्ष्यीकरण
+- **पोजिसनिङ कौशल**: रणनीतिक तत्व प्लेसमेन्ट र लेयरिङ
+- **दृश्य डिजाइन**: ग्लास प्रभाव, छायाँ, र ट्रान्सपरेन्सी सिर्जना गर्ने
+- **उत्तरदायी प्रविधिहरू**: प्रतिशत-आधारित लेआउटहरू जुन कुनै पनि स्क्रिनमा अनुकूल हुन्छन्
+- **कोड संगठन**: सफा, मर्मतयोग्य CSS संरचना
+- **आधुनिक अभ्यासहरू**: सापेक्ष युनिटहरू र पहुँचयोग्य डिजाइन ढाँचाहरू प्रयोग गर्दै
+
+**अर्को चरणहरू**: तपाईंको टेरारियममा अब संरचना (HTML) र शैली (CSS) छ। अन्तिम पाठले JavaScript को साथ अन्तरक्रियात्मकता थप्नेछ!
 
 ## असाइनमेन्ट
 
@@ -466,4 +701,4 @@ CSS को आधारभूत ज्ञानको लागि, यो Micr
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ne/3-terrarium/3-intro-to-DOM-and-closures/README.md
index 6aeefac8c6..2782396607 100644
--- a/translations/ne/3-terrarium/3-intro-to-DOM-and-closures/README.md
+++ b/translations/ne/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -1,22 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "bc93f6285423033ebf5b8abeb5282888",
-  "translation_date": "2025-10-22T16:58:19+00:00",
+  "original_hash": "973e48ad87d67bf5bb819746c9f8e302",
+  "translation_date": "2025-11-03T15:33:04+00:00",
   "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
   "language_code": "ne"
 }
 -->
-# टेरारियम परियोजना भाग ३: DOM म्यानिपुलेसन र जाभास्क्रिप्ट क्लोजरहरू
+# टेरारियम परियोजना भाग ३: DOM म्यानिपुलेसन र जाभास्क्रिप्ट क्लोजर
+
+```mermaid
+journey
+    title Your JavaScript DOM Journey
+    section Foundation
+      Understand DOM: 3: Student
+      Learn closures: 4: Student
+      Connect elements: 4: Student
+    section Interaction
+      Setup drag events: 4: Student
+      Track coordinates: 5: Student
+      Handle movement: 5: Student
+    section Polish
+      Add cleanup: 4: Student
+      Test functionality: 5: Student
+      Complete terrarium: 5: Student
+```
 
 ![DOM र क्लोजर](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ne.png)
-> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
+> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
 
-वेब विकासको सबैभन्दा रोचक पक्षहरू मध्ये एकमा स्वागत छ - चीजहरू अन्तरक्रियात्मक बनाउनु! डकुमेन्ट अब्जेक्ट मोडेल (DOM) तपाईंको HTML र जाभास्क्रिप्ट बीचको पुल जस्तै हो, र आज हामी यसलाई तपाईंको टेरारियमलाई जीवन्त बनाउन प्रयोग गर्नेछौं। जब टिम बर्नर्स-लीले पहिलो वेब ब्राउजर बनाएका थिए, उनले वेबलाई गतिशील र अन्तरक्रियात्मक बनाउन सक्ने कल्पना गरेका थिए - DOM ले त्यो कल्पनालाई सम्भव बनाउँछ।
+वेब विकासको सबैभन्दा रोचक पक्षमा स्वागत छ - चीजहरूलाई अन्तरक्रियात्मक बनाउने! डकुमेन्ट अब्जेक्ट मोडेल (DOM) तपाईंको HTML र जाभास्क्रिप्ट बीचको पुल जस्तै हो, र आज हामी यसलाई तपाईंको टेरारियमलाई जीवन्त बनाउन प्रयोग गर्नेछौं। जब टिम बर्नर्स-लीले पहिलो वेब ब्राउजर बनाएका थिए, उनले वेबलाई गतिशील र अन्तरक्रियात्मक बनाउन सक्ने दस्तावेजहरूको कल्पना गरेका थिए - DOM ले त्यो दृष्टिकोणलाई सम्भव बनाउँछ।
 
-हामी जाभास्क्रिप्ट क्लोजरहरू पनि अन्वेषण गर्नेछौं, जुन सुरुमा डर लाग्दो लाग्न सक्छ। क्लोजरहरूलाई "स्मृति खल्तीहरू" सिर्जना गर्ने जस्तै सोच्नुहोस् जहाँ तपाईंको फङ्सनहरूले महत्त्वपूर्ण जानकारी सम्झन सक्छ। यो तपाईंको टेरारियमको प्रत्येक बिरुवाले आफ्नो स्थिति ट्र्याक गर्नको लागि आफ्नै डेटा रेकर्ड भएको जस्तै हो। यो पाठको अन्त्यसम्ममा, तपाईंले तिनीहरू कति प्राकृतिक र उपयोगी छन् भन्ने बुझ्नुहुनेछ।
+हामी जाभास्क्रिप्ट क्लोजरहरू पनि अन्वेषण गर्नेछौं, जुन सुरुमा डर लाग्दो लाग्न सक्छ। क्लोजरलाई "स्मृति खल्तीहरू" सिर्जना गर्ने जस्तै सोच्नुहोस् जहाँ तपाईंको फङ्सनहरूले महत्त्वपूर्ण जानकारी सम्झन सक्छ। यो तपाईंको टेरारियमको प्रत्येक बिरुवाले आफ्नो स्थिति ट्र्याक गर्न आफ्नै डेटा रेकर्ड भएको जस्तै हो। यस पाठको अन्त्यसम्ममा, तपाईंले तिनीहरू कति प्राकृतिक र उपयोगी छन् भन्ने बुझ्नुहुनेछ।
 
-हामी के निर्माण गर्दैछौं: एक टेरारियम जहाँ प्रयोगकर्ताहरूले बिरुवाहरूलाई जहाँ चाहिन्छ त्यहाँ तान्न र राख्न सक्छन्। तपाईंले DOM म्यानिपुलेसन प्रविधिहरू सिक्नुहुनेछ जसले ड्र्याग-एन्ड-ड्रप फाइल अपलोडदेखि अन्तरक्रियात्मक खेलहरूसम्म सबैलाई शक्ति दिन्छ। तपाईंको टेरारियमलाई जीवन्त बनाऔं।
+हामीले निर्माण गर्न लागेको कुरा यहाँ छ: एउटा टेरारियम जहाँ प्रयोगकर्ताहरूले बिरुवाहरूलाई जहाँ चाहिन्छ त्यहाँ तान्न र राख्न सक्छन्। तपाईंले DOM म्यानिपुलेसन प्रविधिहरू सिक्नुहुनेछ जसले ड्र्याग-एन्ड-ड्रप फाइल अपलोडदेखि अन्तरक्रियात्मक खेलहरू सम्म सबैलाई शक्ति दिन्छ। तपाईंको टेरारियमलाई जीवन्त बनाऔं।
+
+```mermaid
+mindmap
+  root((DOM & JavaScript))
+    DOM Tree
+      Element Selection
+      Property Access
+      Event Handling
+      Dynamic Updates
+    Events
+      Pointer Events
+      Mouse Events
+      Touch Events
+      Event Listeners
+    Closures
+      Private Variables
+      Function Scope
+      Memory Persistence
+      State Management
+    Drag & Drop
+      Position Tracking
+      Coordinate Math
+      Event Lifecycle
+      User Interaction
+    Modern Patterns
+      Event Delegation
+      Performance
+      Cross-Device
+      Accessibility
+```
 
 ## प्रि-लेक्चर क्विज
 
@@ -24,43 +71,100 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## DOM बुझ्दै: अन्तरक्रियात्मक वेब पृष्ठहरूको प्रवेशद्वार
 
-डकुमेन्ट अब्जेक्ट मोडेल (DOM) जाभास्क्रिप्टले तपाईंको HTML तत्वहरूसँग संवाद गर्ने तरिका हो। जब तपाईंको ब्राउजरले HTML पृष्ठ लोड गर्छ, यसले स्मृतिमा त्यो पृष्ठको संरचित प्रतिनिधित्व सिर्जना गर्छ - त्यो हो DOM। यसलाई परिवारको रुख जस्तै सोच्नुहोस् जहाँ प्रत्येक HTML तत्व एक परिवार सदस्य हो जसलाई जाभास्क्रिप्टले पहुँच गर्न, परिवर्तन गर्न, वा पुनः व्यवस्था गर्न सक्छ।
+डकुमेन्ट अब्जेक्ट मोडेल (DOM) जाभास्क्रिप्टले तपाईंको HTML तत्वहरूसँग संवाद गर्ने तरिका हो। जब तपाईंको ब्राउजरले HTML पृष्ठ लोड गर्छ, यसले मेमोरीमा त्यो पृष्ठको संरचित प्रतिनिधित्व सिर्जना गर्छ - त्यो DOM हो। यसलाई परिवारको रुख जस्तै सोच्नुहोस् जहाँ प्रत्येक HTML तत्व एक परिवार सदस्य हो जसलाई जाभास्क्रिप्टले पहुँच गर्न, परिवर्तन गर्न, वा पुन: व्यवस्था गर्न सक्छ।
 
-DOM म्यानिपुलेसनले स्थिर पृष्ठहरूलाई अन्तरक्रियात्मक वेबसाइटहरूमा रूपान्तरण गर्छ। जब तपाईंले बटनले होभर गर्दा रंग परिवर्तन गरेको देख्नुहुन्छ, पृष्ठ रिफ्रेस नगरी सामग्री अपडेट भएको देख्नुहुन्छ, वा तान्न सकिने तत्वहरू देख्नुहुन्छ, त्यो DOM म्यानिपुलेसनको काम हो।
+DOM म्यानिपुलेसनले स्थिर पृष्ठहरूलाई अन्तरक्रियात्मक वेबसाइटहरूमा रूपान्तरण गर्छ। जब तपाईंले बटनलाई होभर गर्दा रंग परिवर्तन भएको देख्नुहुन्छ, पृष्ठ रिफ्रेस नगरी सामग्री अपडेट भएको देख्नुहुन्छ, वा तान्न सकिने तत्वहरू देख्नुहुन्छ, त्यो DOM म्यानिपुलेसनको काम हो।
+
+```mermaid
+flowchart TD
+    A["Document"] --> B["HTML"]
+    B --> C["Head"]
+    B --> D["Body"]
+    C --> E["Title"]
+    C --> F["Meta Tags"]
+    D --> G["H1: My Terrarium"]
+    D --> H["Div: Page Container"]
+    H --> I["Div: Left Container"]
+    H --> J["Div: Right Container"]
+    H --> K["Div: Terrarium"]
+    I --> L["Plant Elements 1-7"]
+    J --> M["Plant Elements 8-14"]
+    
+    L --> N["img#plant1"]
+    L --> O["img#plant2"]
+    M --> P["img#plant8"]
+    M --> Q["img#plant9"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style D fill:#e8f5e8
+    style H fill:#fff3e0
+    style N fill:#ffebee
+    style O fill:#ffebee
+    style P fill:#ffebee
+    style Q fill:#ffebee
+```
 
 ![DOM ट्री प्रतिनिधित्व](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ne.png)
 
-> DOM र HTML मार्कअपको प्रतिनिधित्व। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट।
+> DOM र HTML मार्कअपको प्रतिनिधित्व जसले यसलाई सन्दर्भित गर्छ। [ओल्फा नासराओई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट
 
-**DOM लाई शक्तिशाली बनाउने कुराहरू:**
-- **प्रदान गर्छ** तपाईंको पृष्ठको कुनै पनि तत्वमा पहुँचको संरचित तरिका
+**DOM लाई शक्तिशाली बनाउने कुरा:**
+- **प्रदान गर्छ** तपाईंको पृष्ठको कुनै पनि तत्वमा पहुँच गर्ने संरचित तरिका
 - **सक्षम बनाउँछ** पृष्ठ रिफ्रेस नगरी गतिशील सामग्री अपडेट
-- **अनुमति दिन्छ** क्लिक र ड्र्याग जस्ता प्रयोगकर्ता अन्तरक्रियाहरूमा वास्तविक समय प्रतिक्रिया
+- **अनुमति दिन्छ** क्लिक र ड्र्याग्स जस्ता प्रयोगकर्ता अन्तरक्रियाहरूको वास्तविक समय प्रतिक्रिया
 - **सिर्जना गर्छ** आधुनिक अन्तरक्रियात्मक वेब अनुप्रयोगहरूको आधार
 
 ## जाभास्क्रिप्ट क्लोजरहरू: व्यवस्थित, शक्तिशाली कोड सिर्जना गर्दै
 
-[जाभास्क्रिप्ट क्लोजर](https://developer.mozilla.org/docs/Web/JavaScript/Closures) भनेको फङ्सनलाई यसको आफ्नै निजी कार्यक्षेत्र दिनु जस्तै हो जसमा स्थायी स्मृति हुन्छ। डार्विनका फिन्चहरू जस्तै, जसले गालापागोस टापुमा आफ्नो विशेष वातावरणको आधारमा विशेष चोंच विकास गरे - क्लोजरहरूले पनि त्यस्तै काम गर्छन्, विशेष फङ्सनहरू सिर्जना गर्दै जसले आफ्नो विशेष सन्दर्भ "सम्झन्छ"।
+[जाभास्क्रिप्ट क्लोजर](https://developer.mozilla.org/docs/Web/JavaScript/Closures) एउटा फङ्सनलाई यसको आफ्नै निजी कार्यक्षेत्र दिने जस्तै हो जसमा स्थायी मेमोरी हुन्छ। डार्विनका फिन्चहरूले गालापागोस टापुमा आफ्नो विशिष्ट वातावरणको आधारमा विशेष चोंच विकास गरे जस्तै - क्लोजरले पनि काम गर्छ, विशेष फङ्सनहरू सिर्जना गर्दै जसले आफ्नो विशिष्ट सन्दर्भ "सम्झन्छ"।
 
-हाम्रो टेरारियममा, क्लोजरहरूले प्रत्येक बिरुवालाई स्वतन्त्र रूपमा आफ्नो स्थिति सम्झन मद्दत गर्छ। यो ढाँचा व्यावसायिक जाभास्क्रिप्ट विकासमा व्यापक रूपमा देखा पर्छ, जसले यसलाई बुझ्न महत्त्वपूर्ण बनाउँछ।
+हाम्रो टेरारियममा, क्लोजरहरूले प्रत्येक बिरुवालाई स्वतन्त्र रूपमा आफ्नो स्थिति सम्झन मद्दत गर्छ। यो ढाँचा व्यावसायिक जाभास्क्रिप्ट विकासमा व्यापक रूपमा देखा पर्छ, जसले यसलाई बुझ्नको लागि महत्त्वपूर्ण अवधारणा बनाउँछ।
+
+```mermaid
+flowchart LR
+    A["dragElement(plant1)"] --> B["Creates Closure"]
+    A2["dragElement(plant2)"] --> B2["Creates Closure"]
+    
+    B --> C["Private Variables"]
+    B2 --> C2["Private Variables"]
+    
+    C --> D["pos1, pos2, pos3, pos4"]
+    C --> E["pointerDrag function"]
+    C --> F["elementDrag function"]
+    C --> G["stopElementDrag function"]
+    
+    C2 --> D2["pos1, pos2, pos3, pos4"]
+    C2 --> E2["pointerDrag function"]
+    C2 --> F2["elementDrag function"]
+    C2 --> G2["stopElementDrag function"]
+    
+    H["Plant 1 remembers its position"] --> B
+    H2["Plant 2 remembers its position"] --> B2
+    
+    style B fill:#e8f5e8
+    style B2 fill:#e8f5e8
+    style C fill:#fff3e0
+    style C2 fill:#fff3e0
+```
 
-> 💡 **क्लोजरहरू बुझ्दै**: क्लोजरहरू जाभास्क्रिप्टमा महत्त्वपूर्ण विषय हुन्, र धेरै विकासकर्ताहरूले तिनीहरूलाई पूर्ण रूपमा सैद्धान्तिक पक्षहरू बुझ्नुअघि वर्षौंसम्म प्रयोग गर्छन्। आज, हामी व्यावहारिक अनुप्रयोगमा केन्द्रित छौं - तपाईंले अन्तरक्रियात्मक सुविधाहरू निर्माण गर्दा क्लोजरहरू स्वाभाविक रूपमा देखा पर्ने देख्नुहुनेछ। बुझाइ वास्तविक समस्याहरू समाधान गर्ने तरिकामा विकसित हुनेछ।
+> 💡 **क्लोजर बुझ्दै**: क्लोजरहरू जाभास्क्रिप्टमा महत्त्वपूर्ण विषय हुन्, र धेरै विकासकर्ताहरूले तिनीहरूलाई पूर्ण रूपमा सैद्धान्तिक पक्षहरू बुझ्नुअघि वर्षौंसम्म प्रयोग गर्छन्। आज, हामी व्यावहारिक अनुप्रयोगमा केन्द्रित छौं - तपाईंले अन्तरक्रियात्मक सुविधाहरू निर्माण गर्दा क्लोजरहरू स्वाभाविक रूपमा देखा पर्ने देख्नुहुनेछ। बुझाइ वास्तविक समस्याहरू समाधान गर्ने तरिकामा देखेर विकास हुनेछ।
 
 ![DOM ट्री प्रतिनिधित्व](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ne.png)
 
-> DOM र HTML मार्कअपको प्रतिनिधित्व। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट।
+> DOM र HTML मार्कअपको प्रतिनिधित्व जसले यसलाई सन्दर्भित गर्छ। [ओल्फा नासराओई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट
 
-यस पाठमा, हामी हाम्रो अन्तरक्रियात्मक टेरारियम परियोजना पूरा गर्नेछौं जसले प्रयोगकर्तालाई पृष्ठमा बिरुवाहरूलाई हेरफेर गर्न अनुमति दिने जाभास्क्रिप्ट सिर्जना गर्नेछ।
+यस पाठमा, हामी हाम्रो अन्तरक्रियात्मक टेरारियम परियोजना पूरा गर्नेछौं जसले प्रयोगकर्तालाई पृष्ठमा बिरुवाहरूलाई म्यानिपुलेट गर्न अनुमति दिने जाभास्क्रिप्ट सिर्जना गरेर।
 
-## सुरु गर्नु अघि: सफलताको लागि सेटअप गर्दै
+## सुरु गर्नु अघि: सफलताको लागि सेटअप
 
-तपाईंलाई अघिल्लो टेरारियम पाठहरूबाट तपाईंको HTML र CSS फाइलहरू चाहिन्छ - हामी त्यो स्थिर डिजाइनलाई अन्तरक्रियात्मक बनाउन लागिरहेका छौं। यदि तपाईं पहिलो पटक सामेल हुँदै हुनुहुन्छ भने, ती पाठहरू पूरा गर्दा महत्त्वपूर्ण सन्दर्भ प्रदान गर्नेछ।
+तपाईंलाई अघिल्लो टेरारियम पाठहरूबाट तपाईंको HTML र CSS फाइलहरू चाहिन्छ - हामी त्यो स्थिर डिजाइनलाई अन्तरक्रियात्मक बनाउन लागेका छौं। यदि तपाईं पहिलो पटक सामेल हुँदै हुनुहुन्छ भने, ती पाठहरू पूरा गर्नुले महत्त्वपूर्ण सन्दर्भ प्रदान गर्नेछ।
 
-हामी के निर्माण गर्नेछौं:
+हामीले निर्माण गर्न लागेको कुरा यहाँ छ:
 - **स्मूथ ड्र्याग-एन्ड-ड्रप** सबै टेरारियम बिरुवाहरूको लागि
-- **समन्वय ट्र्याकिङ** ताकि बिरुवाहरूले आफ्नो स्थितिहरू सम्झन सकून्
-- **पूर्ण अन्तरक्रियात्मक इन्टरफेस** भ्यानिला जाभास्क्रिप्ट प्रयोग गर्दै
-- **सफा, व्यवस्थित कोड** क्लोजर ढाँचाहरू प्रयोग गर्दै
+- **कोअर्डिनेट ट्र्याकिङ** जसले बिरुवाहरूलाई आफ्नो स्थिति सम्झन मद्दत गर्छ
+- **पूर्ण अन्तरक्रियात्मक इन्टरफेस** भ्यानिला जाभास्क्रिप्ट प्रयोग गरेर
+- **सफा, व्यवस्थित कोड** क्लोजर ढाँचाहरू प्रयोग गरेर
 
 ## तपाईंको जाभास्क्रिप्ट फाइल सेटअप गर्दै
 
@@ -70,7 +174,7 @@ DOM म्यानिपुलेसनले स्थिर पृष्ठ
 
 तपाईंको टेरारियम फोल्डरमा, `script.js` नामको नयाँ फाइल सिर्जना गर्नुहोस्।
 
-**चरण २: जाभास्क्रिप्टलाई तपाईंको HTML सँग लिंक गर्नुहोस्**
+**चरण २: जाभास्क्रिप्टलाई तपाईंको HTML मा लिंक गर्नुहोस्**
 
 तपाईंको `index.html` फाइलको `<head>` सेक्सनमा यो स्क्रिप्ट ट्याग थप्नुहोस्:
 
@@ -80,19 +184,19 @@ DOM म्यानिपुलेसनले स्थिर पृष्ठ
 
 **किन `defer` एट्रिब्युट महत्त्वपूर्ण छ:**
 - **सुनिश्चित गर्छ** तपाईंको जाभास्क्रिप्टले सबै HTML लोड नभएसम्म पर्खन्छ
-- **रोक्छ** त्रुटिहरू जहाँ जाभास्क्रिप्टले तयार नभएका तत्वहरू खोज्छ
-- **ग्यारेन्टी गर्छ** सबै तपाईंको बिरुवा तत्वहरू अन्तरक्रियाको लागि उपलब्ध छन्
-- **प्रदर्शन सुधार गर्छ** पृष्ठको तल स्क्रिप्ट राख्नुभन्दा
+- **रोक्छ** जाभास्क्रिप्टले तयार नभएका तत्वहरू खोज्ने त्रुटिहरू
+- **ग्यारेन्टी गर्छ** सबै बिरुवा तत्वहरू अन्तरक्रियाको लागि उपलब्ध छन्
+- **बेहतर प्रदर्शन प्रदान गर्छ** पृष्ठको तल स्क्रिप्ट राख्नुभन्दा
 
-> ⚠️ **महत्त्वपूर्ण नोट**: `defer` एट्रिब्युटले सामान्य टाइमिङ समस्याहरू रोक्छ। यसको बिना, जाभास्क्रिप्टले HTML तत्वहरू लोड हुनु अघि पहुँच गर्न प्रयास गर्न सक्छ, जसले त्रुटि उत्पन्न गर्न सक्छ।
+> ⚠️ **महत्त्वपूर्ण नोट**: `defer` एट्रिब्युटले सामान्य टाइमिङ समस्याहरू रोक्छ। यसको बिना, जाभास्क्रिप्टले HTML तत्वहरू लोड हुनु अघि पहुँच गर्न प्रयास गर्न सक्छ, जसले त्रुटिहरू निम्त्याउँछ।
 
 ---
 
 ## जाभास्क्रिप्टलाई तपाईंको HTML तत्वहरूसँग जडान गर्दै
 
-तत्वहरूलाई तान्न मिल्ने बनाउनुअघि, जाभास्क्रिप्टले DOM मा तिनीहरूलाई पत्ता लगाउन आवश्यक छ। यसलाई पुस्तकालयको सूची प्रणाली जस्तै सोच्नुहोस् - एकपटक तपाईंले सूची नम्बर पाउनुभयो भने, तपाईंले चाहिएको पुस्तक ठीक पत्ता लगाउन सक्नुहुन्छ र यसको सबै सामग्री पहुँच गर्न सक्नुहुन्छ।
+तत्वहरूलाई तान्न योग्य बनाउनुअघि, जाभास्क्रिप्टले DOM मा तिनीहरूलाई पत्ता लगाउन आवश्यक छ। यसलाई पुस्तकालयको क्याटलगिङ प्रणाली जस्तै सोच्नुहोस् - एकपटक तपाईंले क्याटलग नम्बर पाएपछि, तपाईंले चाहिएको पुस्तकलाई ठीकसँग पत्ता लगाउन सक्नुहुन्छ र यसको सबै सामग्री पहुँच गर्न सक्नुहुन्छ।
 
-हामी `document.getElementById()` विधि प्रयोग गर्नेछौं यी जडानहरू बनाउन। यो एक सटीक फाइलिङ प्रणाली जस्तै हो - तपाईंले एक ID प्रदान गर्नुहुन्छ, र यसले तपाईंलाई चाहिएको HTML तत्व ठीक पत्ता लगाउँछ।
+हामी `document.getElementById()` विधि प्रयोग गर्नेछौं यी जडानहरू बनाउन। यो एक सटीक फाइलिङ प्रणाली जस्तै हो - तपाईंले एक ID प्रदान गर्नुहुन्छ, र यसले तपाईंको HTML मा ठीक त्यही तत्व पत्ता लगाउँछ।
 
 ### सबै बिरुवाहरूको लागि ड्र्याग कार्यक्षमता सक्षम गर्दै
 
@@ -117,27 +221,37 @@ dragElement(document.getElementById('plant14'));
 ```
 
 **यो कोडले के पूरा गर्छ:**
-- **प्रत्येक बिरुवा तत्वलाई** यसको अद्वितीय ID प्रयोग गरेर DOM मा पत्ता लगाउँछ
-- **प्राप्त गर्छ** प्रत्येक HTML तत्वको जाभास्क्रिप्ट सन्दर्भ
-- **प्रत्येक तत्वलाई** `dragElement` फङ्सनमा पास गर्छ (जसलाई हामी अब सिर्जना गर्नेछौं)
-- **प्रत्येक बिरुवालाई** ड्र्याग-एन्ड-ड्रप अन्तरक्रियाको लागि तयार बनाउँछ
-- **तपाईंको HTML संरचनालाई** जाभास्क्रिप्ट कार्यक्षमतासँग जडान गर्छ
+- **प्रत्येक बिरुवा तत्वलाई DOM मा पत्ता लगाउँछ** यसको अद्वितीय ID प्रयोग गरेर
+- **प्रत्येक HTML तत्वको जाभास्क्रिप्ट रेफरेन्स प्राप्त गर्छ**
+- **प्रत्येक तत्वलाई `dragElement` फङ्सनमा पास गर्छ** (जसलाई हामी अब सिर्जना गर्नेछौं)
+- **प्रत्येक बिरुवालाई ड्र्याग-एन्ड-ड्रप अन्तरक्रियाको लागि तयार गर्छ**
+- **तपाईंको HTML संरचनालाई जाभास्क्रिप्ट कार्यक्षमतासँग जडान गर्छ**
+
+> 🎯 **किन क्लासको सट्टा ID प्रयोग गर्ने?** ID ले विशिष्ट तत्वहरूको लागि अद्वितीय पहिचानकर्ता प्रदान गर्छ, जबकि CSS क्लासहरू तत्वहरूको समूहलाई स्टाइल गर्न डिजाइन गरिएको हो। जब जाभास्क्रिप्टले व्यक्तिगत तत्वहरू म्यानिपुलेट गर्न आवश्यक छ, ID ले हामीलाई चाहिएको सटीकता र प्रदर्शन प्रदान गर्छ।
 
-> 🎯 **किन ID प्रयोग गर्ने क्लासको सट्टा?** ID ले विशिष्ट तत्वहरूको लागि अद्वितीय पहिचानकर्ता प्रदान गर्छ, जबकि CSS क्लासहरू तत्वहरूको समूहलाई स्टाइल गर्न डिजाइन गरिएको हो। जब जाभास्क्रिप्टले व्यक्तिगत तत्वहरूलाई हेरफेर गर्न आवश्यक छ, ID ले हामीलाई चाहिएको सटीकता र प्रदर्शन प्रदान गर्छ।
+> 💡 **प्रो टिप**: ध्यान दिनुहोस् हामी प्रत्येक बिरुवाको लागि व्यक्तिगत रूपमा `dragElement()` कल गर्दैछौं। यो दृष्टिकोणले सुनिश्चित गर्छ कि प्रत्येक बिरुवाले आफ्नो स्वतन्त्र ड्र्यागिङ व्यवहार प्राप्त गर्छ, जुन सहज प्रयोगकर्ता अन्तरक्रियाको लागि आवश्यक छ।
 
-> 💡 **प्रो टिप**: ध्यान दिनुहोस् हामीले प्रत्येक बिरुवाको लागि व्यक्तिगत रूपमा `dragElement()` कल गरिरहेका छौं। यो दृष्टिकोणले सुनिश्चित गर्छ कि प्रत्येक बिरुवाले आफ्नो स्वतन्त्र ड्र्यागिङ व्यवहार प्राप्त गर्छ, जुन सहज प्रयोगकर्ता अन्तरक्रियाको लागि आवश्यक छ।
+### 🔄 **शैक्षिक जाँच**
+**DOM जडान बुझाइ**: ड्र्याग कार्यक्षमतामा जानुअघि, सुनिश्चित गर्नुहोस् तपाईं:
+- ✅ कसरी `document.getElementById()` ले HTML तत्वहरू पत्ता लगाउँछ भन्ने व्याख्या गर्न सक्नुहुन्छ
+- ✅ किन प्रत्येक बिरुवाको लागि अद्वितीय ID प्रयोग गरिन्छ भन्ने बुझ्नुहुन्छ
+- ✅ स्क्रिप्ट ट्यागमा `defer` एट्रिब्युटको उद्देश्य वर्णन गर्न सक्नुहुन्छ
+- ✅ कसरी जाभास्क्रिप्ट र HTML DOM मार्फत जडान हुन्छ भन्ने चिन्न सक्नुहुन्छ
+
+**छिटो आत्म-परीक्षण**: यदि दुई तत्वहरूको समान ID भएमा के हुन्छ? किन `getElementById()` ले केवल एक तत्व फर्काउँछ?
+*उत्तर: ID अद्वितीय हुनुपर्छ; यदि दोहोरिन्छ भने, केवल पहिलो तत्व फर्काइन्छ*
 
 ---
 
 ## ड्र्याग एलिमेन्ट क्लोजर निर्माण गर्दै
 
-अब हामी हाम्रो ड्र्यागिङ कार्यक्षमताको मुख्य भाग सिर्जना गर्नेछौं: एक क्लोजर जसले प्रत्येक बिरुवाको ड्र्यागिङ व्यवहारलाई व्यवस्थापन गर्छ। यो क्लोजरमा धेरै आन्तरिक फङ्सनहरू समावेश हुनेछ जसले माउसको गतिविधि ट्र्याक गर्न र तत्वको स्थितिहरू अपडेट गर्न सँगै काम गर्छ।
+अब हामी प्रत्येक बिरुवाको ड्र्यागिङ व्यवहार व्यवस्थापन गर्ने क्लोजर सिर्जना गर्नेछौं। यो क्लोजरले माउसको चाल ट्र्याक गर्न र तत्वको स्थिति अपडेट गर्न सँगै काम गर्ने धेरै इनर फङ्सनहरू समावेश गर्नेछ।
 
-क्लोजरहरू यस कार्यको लागि उत्तम हुन् किनभने तिनीहरूले हामीलाई "निजी" भेरिएबलहरू सिर्जना गर्न अनुमति दिन्छन् जो फङ्सन कलहरू बीचमा कायम रहन्छन्, प्रत्येक बिरुवालाई आफ्नो स्वतन्त्र समन्वय ट्र्याकिङ प्रणाली दिन्छ।
+क्लोजरहरू यस कार्यको लागि उत्तम छन् किनभने तिनीहरूले "निजी" भेरिएबलहरू सिर्जना गर्न अनुमति दिन्छन् जसले फङ्सन कलहरू बीचमा निरन्तरता कायम राख्छ, प्रत्येक बिरुवालाई आफ्नो स्वतन्त्र कोअर्डिनेट ट्र्याकिङ प्रणाली दिन्छ।
 
-### क्लोजरहरू बुझ्ने सरल उदाहरणसँग
+### सरल उदाहरणको साथ क्लोजर बुझ्दै
 
-क्लोजरहरूको अवधारणा देखाउनको लागि एउटा सरल उदाहरण प्रस्तुत गरौं:
+क्लोजरको अवधारणा चित्रण गर्ने सरल उदाहरणको साथ म तपाईंलाई प्रदर्शन गर्नेछु:
 
 ```javascript
 function createCounter() {
@@ -157,24 +271,52 @@ console.log(myCounter()); // 2
 ```
 
 **यो क्लोजर ढाँचामा के भइरहेको छ:**
-- **सिर्जना गर्छ** एउटा निजी `count` भेरिएबल जो यो क्लोजर भित्र मात्र अवस्थित हुन्छ
-- **आन्तरिक फङ्सनले** त्यो बाह्य भेरिएबलमा पहुँच गर्न र परिवर्तन गर्न सक्छ (क्लोजर मेकानिज्म)
-- **जब हामी फर्काउँछौं** आन्तरिक फङ्सन, यसले त्यो निजी डाटासँगको आफ्नो जडान कायम राख्छ
-- **यहाँसम्म कि** `createCounter()` कार्यान्वयन समाप्त भएपछि पनि, `count` कायम रहन्छ र यसको मान सम्झन्छ
+- **निजी `count` भेरिएबल सिर्जना गर्छ** जुन केवल यो क्लोजर भित्र मात्र हुन्छ
+- **इनर फङ्सनले** त्यो बाहिरी भेरिएबलमा पहुँच गर्न र परिवर्तन गर्न सक्छ (क्लोजर मेकानिज्म)
+- **जब हामी फर्काउँछौं** इनर फङ्सन, यसले त्यो निजी डाटासँगको जडान कायम राख्छ
+- **यहाँसम्म कि** `createCounter()` कार्यान्वयन समाप्त भएपछि पनि, `count` आफ्नो मान सम्झन्छ
 
 ### किन ड्र्याग कार्यक्षमताको लागि क्लोजरहरू उत्तम छन्
 
-हाम्रो टेरारियमको लागि, प्रत्येक बिरुवाले आफ्नो वर्तमान स्थिति समन्वयहरू सम्झन आवश्यक छ। क्लोजरहरूले उत्तम समाधान प्रदान गर्छन्:
+हाम्रो टेरारियमको लागि, प्रत्येक बिरुवाले आफ्नो हालको स्थिति कोअर्डिनेटहरू सम्झन आवश्यक छ। क्लोजरहरूले उत्तम समाधान प्रदान गर्छन्:
 
-**हाम्रो परियोजनाको लागि मुख्य फाइदाहरू:**
-- **निजी स्थिति भेरिएबलहरू कायम राख्छ** प्रत्येक बिरुवा स्वतन्त्र रूपमा
-- **ड्र्याग घटनाहरू बीचमा** समन्वय डाटा कायम राख्छ
-- **विभिन्न ड्र्याग गर्न मिल्ने तत्वहरू बीचमा** भेरिएबल द्वन्द्व रोक्छ
+**हाम्रो परियोजनाका लागि मुख्य फाइदाहरू:**
+- **प्रत्येक बिरुवा स्वतन्त्र रूपमा आफ्नो स्थिति भेरिएबलहरू कायम राख्छ**
+- **ड्र्याग घटनाहरू बीचमा कोअर्डिनेट डाटा कायम राख्छ**
+- **विभिन्न तान्न सकिने तत्वहरू बीचमा भेरिएबल द्वन्द्व रोक्छ**
 - **सफा, व्यवस्थित कोड संरचना सिर्जना गर्छ**
 
-> 🎯 **सिक्ने लक्ष्य**: तपाईंले अहिले क्लोजरहरूको प्रत्येक पक्षलाई पूर्ण रूपमा बुझ्न आवश्यक छैन। तिनीहरूले हाम्रो ड्र्यागिङ कार्यक्षमताको लागि कोडलाई कसरी व्यवस्थित गर्न र स्थिति कायम राख्न मद्दत गर्छन् भन्ने देख्नमा ध्यान केन्द्रित गर्नुहोस्।
+> 🎯 **सिक्ने लक्ष्य**: तपाईंले अहिले क्लोजरहरूको प्रत्येक पक्षमा महारत हासिल गर्न आवश्यक छैन। तिनीहरूले हाम्रो कोडलाई व्यवस्थित गर्न र हाम्रो ड्र्यागिङ कार्यक्षमताको लागि अवस्था कायम राख्न कसरी मद्दत गर्छन् भन्ने हेर्नमा ध्यान केन्द्रित गर्नुहोस्।
 
-### ड्र्याग एलिमेन्ट फङ्सन सिर्जना गर्दै
+```mermaid
+stateDiagram-v2
+    [*] --> Ready: Page loads
+    Ready --> DragStart: User presses down (pointerdown)
+    DragStart --> Dragging: Mouse/finger moves (pointermove)
+    Dragging --> Dragging: Continue moving
+    Dragging --> DragEnd: User releases (pointerup)
+    DragEnd --> Ready: Reset for next drag
+    
+    state DragStart {
+        [*] --> CapturePosition
+        CapturePosition --> SetupListeners
+        SetupListeners --> [*]
+    }
+    
+    state Dragging {
+        [*] --> CalculateMovement
+        CalculateMovement --> UpdatePosition
+        UpdatePosition --> [*]
+    }
+    
+    state DragEnd {
+        [*] --> RemoveListeners
+        RemoveListeners --> CleanupState
+        CleanupState --> [*]
+    }
+```
+
+### `dragElement` फङ्सन सिर्जना गर्दै
 
 अब हामी मुख्य फङ्सन निर्माण गर्नेछौं जसले सबै ड्र्यागिङ तर्कलाई व्यवस्थापन गर्नेछ। तपाईंको बिरुवा तत्व घोषणाहरूको तल यो फङ्सन थप्नुहोस्:
 
@@ -192,99 +334,139 @@ function dragElement(terrariumElement) {
 ```
 
 **स्थिति ट्र्याकिङ प्रणाली बुझ्दै:**
-- **`pos1` र `pos2`**: पुरानो र नयाँ माउस स्थितिहरू बीचको भिन्नता भण्डारण गर्छ
-- **`pos3` र `pos4`**: वर्तमान माउस समन्वयहरू ट्र्याक गर्छ
-- **`terrariumElement`**: विशिष्ट बिरुवा तत्व जसलाई हामी ड्र्याग गर्न मिल्ने बनाउँदैछौं
-- **`onpointerdown`**: प्रयोगकर्ताले ड्र्याग सुरु गर्दा ट्रिगर हुने घटना
+- **`pos1` र `pos2`**: पुरानो र नयाँ माउस स्थितिहरू बीचको भिन्नता भण्डारण गर्नुहोस्
+- **`pos3` र `pos4`**: हालको माउस कोअर्डिनेटहरू ट्र्याक गर्नुहोस्
+- **`terrariumElement`**: विशिष्ट बिरुवा तत्व जसलाई हामी तान्न योग्य बनाउँदैछौं
+- **`onpointerdown`**: घटना जसले प्रयोगकर्ताले तान्न सुरु गर्दा ट्रिगर गर्छ
 
 **क्लोजर ढाँचाले कसरी काम गर्छ:**
-- **सिर्जना गर्छ** प्रत्येक बिरुवा तत्वको लागि निजी स्थिति भेरिएबलहरू
-- **यी भेरिएबलहरू कायम राख्छ** ड्र्यागिङ जीवनचक्रभर
-- **सुनिश्चित गर्छ** प्रत्येक बिरुवाले स्वतन्त्र रूपमा आफ्नो समन्वय ट्र्याक गर्छ
+- **प्रत्येक बिरुवा तत्वको लागि निजी स्थिति भेरिएबलहरू सिर्जना गर्छ**
+- **यी भेरिएबलहरू ड्र्यागिङ जीवनचक्रभरि कायम राख्छ**
+- **प्रत्येक बिरुवाले स्वतन्त्र रूपमा आफ्नो कोअर्डिनेट ट्र्याक गर्छ भन्ने सुनिश्चित गर्छ**
 - **सफा इन्टरफेस प्रदान गर्छ** `dragElement` फङ्सन मार्फत
 
 ### किन पोइन्टर इभेन्टहरू प्रयोग गर्ने?
 
-तपाईं सोच्न सक्नुहुन्छ किन हामी `onpointerdown` प्रयोग गर्छौं `onclick` को सट्टा। यहाँ कारण छ:
+तपाईं सोच्न सक्नुहुन्छ किन हामी `onpointerdown` प्रयोग गर्छौं `onclick` भन्दा। यहाँ कारण छ:
 
-| इभेन्ट प्रकार | उत्तम प्रयोग | समस्या |
+| इभेन्ट प्रकार | उत्तम लागि | समस्या |
 |------------|----------|-------------|
-| `onclick` | साधारण बटन क्लिकहरू | ड्र्यागिङलाई ह्यान्डल गर्न सक्दैन (मात्र क्लिक र रिलिज) |
+| `onclick` | साधारण बटन क्लिकहरू | तान्न सक्दैन (केवल क्लिक र रिलिज) |
 | `onpointerdown` | माउस र टच दुवै | नयाँ, तर आजकल राम्रोसँग समर्थित |
 | `onmousedown` | डेस्कटप माउस मात्र | मोबाइल प्रयोगकर्ताहरूलाई छुटाउँछ |
 
-**हामीले निर्माण गरिरहेको कुराको लागि पोइन्टर इभेन्टहरू किन उत्तम छन्:**
-- **उत्तम काम गर्छ** चाहे कसैले माउस, औंला, वा स्टाइलस प्रयोग गरिरहेको होस्
-- **उस्तै महसुस हुन्छ** ल्यापटप, ट्याब्लेट, वा फोनमा
-- **ड्र्यागिङ गति ह्यान्डल गर्छ** (मात्र क्लिक-एन्ड-डन होइन)
-- **सजिलो अनुभव सिर्जना गर्छ** जुन प्रयोगकर्ताहरूले आधुनिक वेब अनुप्रयोगबाट अपेक्षा गर्छन्
+**हामीले निर्माण गरिरहेको कुराको लागि पोइन्टर इभेन्टहरू उत्तम किन छन्:**
+- **माउस, औंला, वा स्टाइलस प्रयोग गर्दा पनि राम्रोसँग काम गर्छ**
+- **ल्यापटप, ट्याब्लेट, वा फोनमा समान अनुभव दिन्छ**
+- **वास्तविक तान्ने गति सम्हाल्छ** (केवल क्लिक-एन्ड-डन होइन)
+- **स्मूथ अनुभव सिर्जना गर्छ** जुन प्रयोगकर्ताहरूले आधुनिक वेब अनुप्रयोगबाट अपेक्षा गर्छन्
 
-> 💡 **भविष्यको लागि तयार गर्दै**: पोइन्टर इभेन्टहरू प्रयोगकर्ता अन्तरक्रियाहरू ह्यान्डल गर्ने आधुनिक तरिका हुन्। माउस र टचको लागि अलग-अलग कोड लेख्नुभन्दा, तपाईंले दुवै स्वतः प्राप्त गर्नुहुन्छ। धेरै राम्रो, हैन?
+> 💡 **भविष्यको लागि तयार गर्दै**: पोइन्टर इभेन्टहरू प्रयोगकर्ता अन्तरक्रियाहरूलाई सम्हाल्ने आधुनिक तरिका हुन्। माउस र टचको लागि अलग-अलग कोड लेख्नुभन्दा, तपाईंले दुवैलाई स्वत: प्राप्त गर्नुहुन्छ। धेरै राम्रो, हैन?
+
+### 🔄 **शैक्षिक जाँच**
+**इभेन्ट ह्यान्डलिङ बुझाइ**: इभेन्टहरू बुझ्नको लागि आफ्नो समझ पुष्टि गर्न रोक्नुहोस्:
+- ✅ किन हामी माउस इभेन्टहरूको सट्टा पोइन्टर इभेन्टहरू प्रयोग गर्छौं?
+- ✅ क्लोजर भेरिएबलहरू फङ्सन कलहरू बीचमा कसरी कायम रहन्छन्?
+- ✅ `preventDefault()` ले स्मूथ ड्र्यागिङमा के भूमिका खेल्छ?
+- ✅ किन हामी व्यक्तिगत तत्वहरूको सट्टा डकुमेन्टमा लिसनरहरू जोड्छौं?
+
+**वास्तविक संसारको जडान**: तपाईंले दैनिक प्रयोग गर्ने ड्र्याग-एन्ड-ड्रप इन्टरफेसहरूको बारेमा सोच्नुहोस्:
+- **फाइल अपलोडहरू**: ब्राउजर विन्डोमा फाइलहरू तान्दै
+- **कानबन बोर्डहरू**: कार्यहरू स्तम्भहरू बीचमा सार्दै
+- **इमेज ग्यालरीहरू**: फोटोहरूको क्रम पुन: व्यवस्था गर्दै
+- **मोबाइल इन्टरफेसहरू**: टचस्क्रिनमा स्वाइप र तान्दै
 
 ---
 
-## पोइन्टरड्र्याग फङ्सन: ड्र्यागको सुरुवात कब्जा गर्दै
+## `pointerDrag` फङ्सन: ड्र्यागको सुरुवात कब्जा गर्दै
 
-जब प्रयोगकर्ताले बिरुवामा थिच्छ (माउस क्लिक वा औंलाको टचसँग), `pointerDrag` फङ्सन सक्रिय हुन्छ। यो फङ्सनले प्रारम्भिक समन्वयहरू कब्जा गर्छ र ड्र्यागिङ प्रणाली सेटअप गर्छ।
+जब प्रयोगकर्ताले बिरुवामा थिच्छ (माउस क्लिक वा औंलाको टचसँग), `pointerDrag` फङ्सन सक्रिय हुन्छ। यो फङ्सनले प्रारम्भिक कोअर्डिनेटहरू कब्जा गर्छ र ड्र्यागिङ प्रणाली सेटअप गर्छ।
+
+यो फङ्स
+**यी समन्वयहरू बुझ्दै:**
+- **प्रदान गर्दछ** पिक्सेल-परफेक्ट पोजिसनिङ जानकारी
+- **रियल-टाइममा अपडेट हुन्छ** जब प्रयोगकर्ताले आफ्नो पोइन्टर सार्छन्
+- **विभिन्न स्क्रिन साइज र जूम स्तरहरूमा स्थिर रहन्छ**
+- **सजिलो र प्रतिक्रियात्मक ड्र्याग अन्तरक्रिया सक्षम बनाउँछ**
 
-`terrariumElement.onpointerdown = pointerDrag;` लाइनको ठीक पछि तपाईंको `dragElement` क्लोजर भित्र यो फङ्सन थप्नुहोस्:
+### डकुमेन्ट-स्तर इभेन्ट लिसनर सेटअप गर्दै
+
+ध्यान दिनुहोस् कि हामीले `document` मा मूभ र स्टप इभेन्टहरू जोडेका छौं, केवल प्लान्ट एलिमेन्टमा होइन:
 
 ```javascript
-function pointerDrag(e) {
-    // Prevent default browser behavior (like text selection)
-    e.preventDefault();
-    
-    // Capture the initial mouse/touch position
-    pos3 = e.clientX;  // X coordinate where drag started
-    pos4 = e.clientY;  // Y coordinate where drag started
-    
-    // Set up event listeners for the dragging process
-    document.onpointermove = elementDrag;
-    document.onpointerup = stopElementDrag;
-}
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
 ```
 
-**चरणबद्ध रूपमा, यहाँ के भइरहेको छ:**
-- **रोक्छ** ब्राउजरको डिफल्ट व्यवहारहरू जसले ड्र्यागिङमा बाधा पुर्याउन सक्छ
-- **ठ्याक्कै समन्वयहरू रेकर्ड गर्छ** जहाँ प्रयोगकर्ताले ड्र्याग इशारा सुरु गरेको हो
-- **इभेन्ट लिसनरहरू स्थापना गर्छ** जारी ड्र्याग गतिविधिको लागि
-- **प्रणाली तयार गर्छ** माउस/औंलाको गति पृष्ठभरि ट्र्याक गर्न
+**किन डकुमेन्टमा जोड्ने:**
+- **ट्र्याकिङ जारी राख्छ** जब माउस प्लान्ट एलिमेन्टबाट बाहिर जान्छ
+- **ड्र्याग अवरोध रोक्छ** यदि प्रयोगकर्ताले छिटो सर्छन्
+- **पूरे स्क्रिनमा सहज ड्र्यागिङ प्रदान गर्दछ**
+- **एज केसहरू ह्यान्डल गर्दछ** जहाँ कर्सर ब्राउजर विन्डो बाहिर जान्छ
 
-### इभेन्ट रोकथाम बुझ्दै
+> ⚡ **प्रदर्शन नोट**: ड्र्यागिङ रोक्दा यी डकुमेन्ट-स्तर लिसनरहरू सफा गरिनेछ ताकि मेमोरी लीक र प्रदर्शन समस्याहरू रोक्न सकियोस्।
 
-`e.preventDefault()` लाइनले स्मूथ ड्र्यागिङको लागि महत्त्वपूर्ण छ:
+## ड्र्याग प्रणाली पूरा गर्दै: मूभमेन्ट र सफाइ
 
-**रोकथाम बिना, ब्राउजरहरूले:**
-- **पाठ चयन गर्न सक्छन्** पृष्ठभरि ड्र्याग गर्दा
-- **सन्दर्भ मेनु ट्रिगर गर्न सक्छन्** राइट-क्लिक ड्र्यागमा
-- **हाम्रो कस्टम ड्र्यागिङ व्यवहारमा बाधा पुर्याउन सक्छन्**
-- **ड्र्याग अपरेशनको दौरान दृश्य कलाकृति सिर्जना गर्न सक्छन्**
+अब हामी दुई बाँकी फङ्सनहरू थप्नेछौं जसले वास्तविक ड्र्यागिङ मूभमेन्ट र ड्र्यागिङ रोक्दा सफाइ ह्यान्डल गर्छ। यी फङ्सनहरूले मिलेर तपाईंको टेरारियममा प्लान्टको सहज, प्रतिक्रियात्मक मूभमेन्ट सिर्जना गर्छ।
 
-> 🔍 **प्रयोग गर्नुहोस्**: यो पाठ पूरा गरेपछि, `e.preventDefault()` हटाएर हेर्नुहोस् यसले ड्र्यागिङ अनुभवलाई कसरी प्रभावित गर्छ। तपाईंले छिट्टै बुझ्नुहुनेछ किन यो लाइन आवश्यक छ!
+### elementDrag फङ्सन: मूभमेन्ट ट्र्याकिङ
 
-### समन्वय ट्र्याकिङ प्रणाली
+`pointerDrag` को बन्द कर्ली ब्र्याकेटपछि `elementDrag` फङ्सन थप्नुहोस्:
 
-`e.clientX` र `e.clientY` गुणहरूले हामीलाई सटीक माउस/टच समन्वयहरू प्रदान गर्छ:
+```javascript
+function elementDrag(e) {
+    // Calculate the distance moved since the last event
+    pos1 = pos3 - e.clientX;  // Horizontal distance moved
+    pos2 = pos4 - e.clientY;  // Vertical distance moved
+    
+    // Update the current position tracking
+    pos3 = e.clientX;  // New current X position
+    pos4 = e.clientY;  // New current Y position
+    
+    // Apply the movement to the element's position
+    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
+}
+```
 
-| गुण | के मापन गर्छ | प्रयोग केस |
-|----------|------------------|----------|
-| `clientX` | भ्यूपोर्टको सापेक्ष क्षैतिज स्थिति | बायाँ-दायाँ गति ट्र्याक गर्दै |
-| `clientY` | भ्यूपोर्टको सापेक्ष ठाडो स्थिति | माथि-तल गति ट्र्याक गर्दै |
+**समन्वय गणित बुझ्दै:**
+- **`pos1` र `pos2`**: माउसले अन्तिम अपडेटदेखि कति टाढा सरेको छ गणना गर्छ
+- **`pos3` र `pos4`**: अर्को गणनाको लागि हालको माउस पोजिसन स्टोर गर्छ
+- **`offsetTop` र `offsetLeft`**: पृष्ठमा एलिमेन्टको हालको पोजिसन प्राप्त गर्छ
+- **घटाउने तर्क**: माउसले सरेको जति नै एलिमेन्टलाई सार्छ
 
-**यी समन्वयहरू बुझ्दै:**
-- **पिक्सेल-परफेक्ट स्थिति जानकारी प्रदान गर्छ**
-- **वास्तविक समयमा अपडेट हुन्छ** प्रयोगकर्ताले
-- **`pos3` र `pos4`**: अर्को गणनाको लागि माउसको हालको स्थिति भण्डारण गर्नुहोस्  
-- **`offsetTop` र `offsetLeft`**: पृष्ठमा तत्वको हालको स्थिति प्राप्त गर्नुहोस्  
-- **घटाउने तर्क**: माउसले जति सरेको छ, तत्वलाई त्यति नै सर्नुहोस्  
+```mermaid
+sequenceDiagram
+    participant User
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    User->>Mouse: Start drag at (100, 50)
+    Mouse->>JavaScript: pointerdown event
+    JavaScript->>JavaScript: Store initial position (pos3=100, pos4=50)
+    JavaScript->>JavaScript: Setup move/up listeners
+    
+    User->>Mouse: Move to (110, 60)
+    Mouse->>JavaScript: pointermove event
+    JavaScript->>JavaScript: Calculate: pos1=10, pos2=10
+    JavaScript->>Plant: Update: left += 10px, top += 10px
+    Plant->>Plant: Render at new position
+    
+    User->>Mouse: Release at (120, 65)
+    Mouse->>JavaScript: pointerup event
+    JavaScript->>JavaScript: Remove listeners
+    JavaScript->>JavaScript: Reset for next drag
+```
 
-**यहाँ आन्दोलन गणनाको विवरण छ:**  
-1. पुरानो र नयाँ माउसको स्थितिबीचको फरक **मापन गर्नुहोस्**  
-2. माउसको आन्दोलनको आधारमा तत्वलाई कति सर्नु पर्ने हो **गणना गर्नुहोस्**  
-3. वास्तविक समयमा तत्वको CSS स्थिति गुणहरू **अपडेट गर्नुहोस्**  
-4. अर्को आन्दोलन गणनाको लागि आधार रेखाको रूपमा नयाँ स्थिति **भण्डारण गर्नुहोस्**  
+**मूभमेन्ट गणनाको विवरण:**
+1. **पुरानो र नयाँ माउस पोजिसनको भिन्नता मापन गर्छ**
+2. **माउस मूभमेन्टको आधारमा एलिमेन्टलाई कति सार्ने गणना गर्छ**
+3. **रियल-टाइममा एलिमेन्टको CSS पोजिसन प्रोपर्टीहरू अपडेट गर्छ**
+4. **अर्को मूभमेन्ट गणनाको लागि नयाँ पोजिसनलाई आधाररेखा बनाउँछ**
 
-### गणितको दृश्यात्मक प्रतिनिधित्व  
+### गणितको दृश्य प्रतिनिधित्व
 
 ```mermaid
 sequenceDiagram
@@ -297,10 +479,10 @@ sequenceDiagram
     JavaScript->>Plant: Update position by +10px right, +10px down
     Plant->>Plant: Render at new position
 ```
-  
-### stopElementDrag Function: सफा गर्ने प्रक्रिया  
 
-`elementDrag` को बन्द कर्ली ब्र्याकेट पछि सफा गर्ने कार्य थप्नुहोस्:  
+### stopElementDrag फङ्सन: सफाइ गर्दै
+
+`elementDrag` को बन्द कर्ली ब्र्याकेटपछि सफाइ फङ्सन थप्नुहोस्:
 
 ```javascript
 function stopElementDrag() {
@@ -309,136 +491,231 @@ function stopElementDrag() {
     document.onpointermove = null;
 }
 ```
-  
-**सफा गर्ने प्रक्रिया किन आवश्यक छ:**  
-- **स्मृति चुहावट रोक्छ** जुन घटनाको श्रोताहरूले लामो समयसम्म चलिरहन्छ  
-- प्रयोगकर्ताले प्लान्ट छोड्दा तान्ने व्यवहार **रोक्छ**  
-- अन्य तत्वहरू स्वतन्त्र रूपमा तान्न **सक्षम बनाउँछ**  
-- अर्को तान्ने कार्यको लागि प्रणालीलाई **रिसेट गर्छ**  
 
-**सफा नगर्दा के हुन्छ:**  
-- तान्ने कार्य रोकिएपछि पनि घटनाको श्रोताहरू चलिरहन्छन्  
-- प्रयोगमा नआएका श्रोतहरूले प्रदर्शनलाई कमजोर बनाउँछ  
-- अन्य तत्वहरूसँग अन्तरक्रिया गर्दा अप्रत्याशित व्यवहार  
-- अनावश्यक घटनाको ह्यान्डलिङले ब्राउजरको स्रोतहरू खेर जान्छ  
+**किन सफाइ आवश्यक छ:**
+- **मेमोरी लीक रोक्छ** जुन बाँकी इभेन्ट लिसनरहरूबाट हुन सक्छ
+- **प्लान्ट छोड्दा ड्र्यागिङ व्यवहार रोक्छ**
+- **अन्य एलिमेन्टहरू स्वतन्त्र रूपमा ड्र्याग गर्न अनुमति दिन्छ**
+- **अर्को ड्र्याग अपरेशनको लागि प्रणाली रिसेट गर्छ**
 
-### CSS स्थिति गुणहरू बुझ्दै  
+**सफाइ नगर्दा के हुन्छ:**
+- इभेन्ट लिसनरहरू ड्र्यागिङ रोकिएपछि पनि चलिरहन्छन्
+- प्रदर्शन बिग्रिन्छ किनकि प्रयोग नगरिएका लिसनरहरू जम्मा हुन्छन्
+- अन्य एलिमेन्टहरूसँग अन्तरक्रिया गर्दा अप्रत्याशित व्यवहार
+- अनावश्यक इभेन्ट ह्यान्डलिङमा ब्राउजर स्रोतहरू खेर जान्छन्
 
-हाम्रो तान्ने प्रणालीले दुई मुख्य CSS गुणहरूलाई हेरफेर गर्छ:  
+### CSS पोजिसन प्रोपर्टीहरू बुझ्दै
 
-| गुण | के नियन्त्रण गर्छ | हामी यसलाई कसरी प्रयोग गर्छौं |  
-|----------|------------------|---------------|  
-| `top` | माथिल्लो किनारबाट दूरी | तान्ने क्रममा ठाडो स्थिति |  
-| `left` | बायाँ किनारबाट दूरी | तान्ने क्रममा तेर्सो स्थिति |  
+हाम्रो ड्र्यागिङ प्रणालीले दुई प्रमुख CSS प्रोपर्टीहरूलाई ह्यान्डल गर्छ:
 
-**offset गुणहरूको मुख्य जानकारी:**  
-- **`offsetTop`**: स्थितिबद्ध अभिभावक तत्वको माथिल्लो भागबाट हालको दूरी  
-- **`offsetLeft`**: स्थितिबद्ध अभिभावक तत्वको बायाँ भागबाट हालको दूरी  
-- **स्थिति सन्दर्भ**: यी मानहरू नजिकको स्थितिबद्ध पूर्वजको सन्दर्भमा हुन्छन्  
-- **वास्तविक समय अपडेटहरू**: CSS गुणहरू परिवर्तन गर्दा तुरुन्तै परिवर्तन हुन्छ  
+| प्रोपर्टी | के नियन्त्रण गर्छ | हामी कसरी प्रयोग गर्छौं |
+|----------|------------------|---------------|
+| `top` | माथिल्लो किनारबाट दूरी | ड्र्यागको क्रममा ठाडो पोजिसनिङ |
+| `left` | बायाँ किनारबाट दूरी | ड्र्यागको क्रममा तेर्सो पोजिसनिङ |
 
-> 🎯 **डिजाइन दर्शन**: यो तान्ने प्रणाली जानाजानी लचिलो बनाइएको छ – यहाँ कुनै "ड्रप जोन" वा प्रतिबन्धहरू छैनन्। प्रयोगकर्ताहरूले प्लान्टहरूलाई जहाँ पनि राख्न सक्छन्, जसले उनीहरूलाई आफ्नो टेरारियम डिजाइनमा पूर्ण रचनात्मक नियन्त्रण दिन्छ।  
+**ऑफसेट प्रोपर्टीहरूको प्रमुख जानकारी:**
+- **`offsetTop`**: पोजिसन गरिएको अभिभावक एलिमेन्टबाट हालको दूरी
+- **`offsetLeft`**: पोजिसन गरिएको अभिभावक एलिमेन्टबाट हालको दूरी
+- **पोजिसनिङ सन्दर्भ**: यी मानहरू नजिकको पोजिसन गरिएको पूर्वजसँग सम्बन्धित छन्
+- **रियल-टाइम अपडेटहरू**: जब हामी CSS प्रोपर्टीहरू परिवर्तन गर्छौं, यी मानहरू तुरुन्तै परिवर्तन हुन्छन्
 
-## सबै कुरा एकसाथ ल्याउँदै: तपाईंको पूर्ण तान्ने प्रणाली  
+> 🎯 **डिजाइन दर्शन**: यो ड्र्याग प्रणाली जानाजानी लचिलो बनाइएको छ – कुनै "ड्रप जोन" वा प्रतिबन्धहरू छैनन्। प्रयोगकर्ताहरूले प्लान्टहरू जहाँ पनि राख्न सक्छन्, जसले उनीहरूलाई आफ्नो टेरारियम डिजाइनमा पूर्ण रचनात्मक नियन्त्रण दिन्छ।
 
-बधाई छ! तपाईंले भ्यानिला जाभास्क्रिप्ट प्रयोग गरेर एक परिष्कृत तान्ने प्रणाली निर्माण गर्नुभएको छ। तपाईंको पूर्ण `dragElement` कार्यले अब एक शक्तिशाली क्लोजर समावेश गर्दछ जसले व्यवस्थापन गर्छ:  
+## सबै कुरा जोड्दै: तपाईंको पूर्ण ड्र्याग प्रणाली
 
-**तपाईंको क्लोजरले के हासिल गर्छ:**  
-- प्रत्येक प्लान्टको लागि निजी स्थिति चरहरू **राख्छ**  
-- सुरुदेखि अन्त्यसम्मको सम्पूर्ण तान्ने जीवनचक्र **ह्यान्डल गर्छ**  
-- सम्पूर्ण स्क्रिनमा सहज, प्रतिक्रियात्मक आन्दोलन **प्रदान गर्छ**  
-- स्मृति चुहावट रोक्न श्रोतहरू **सफा गर्छ**  
-- टेरारियम डिजाइनको लागि सहज, रचनात्मक इन्टरफेस **सिर्जना गर्छ**  
+बधाई छ! तपाईंले भ्यानिला जाभास्क्रिप्ट प्रयोग गरेर एक परिष्कृत ड्र्याग-एन्ड-ड्रप प्रणाली निर्माण गर्नुभयो। तपाईंको पूर्ण `dragElement` फङ्सनमा अब एक शक्तिशाली क्लोजर समावेश छ जसले व्यवस्थापन गर्छ:
 
-### तपाईंको अन्तरक्रियात्मक टेरारियम परीक्षण गर्दै  
+**तपाईंको क्लोजरले के हासिल गर्छ:**
+- **प्रत्येक प्लान्टको लागि निजी पोजिसन भेरिएबलहरू कायम राख्छ**
+- **ड्र्याग जीवनचक्रको सुरुदेखि अन्त्यसम्म ह्यान्डल गर्छ**
+- **पूरे स्क्रिनमा सहज, प्रतिक्रियात्मक मूभमेन्ट प्रदान गर्छ**
+- **स्रोतहरू ठीकसँग सफा गर्छ ताकि मेमोरी लीक रोक्न सकियोस्**
+- **टेरारियम डिजाइनको लागि सहज, रचनात्मक इन्टरफेस सिर्जना गर्छ**
 
-अब तपाईंको अन्तरक्रियात्मक टेरारियम परीक्षण गर्नुहोस्! आफ्नो `index.html` फाइल वेब ब्राउजरमा खोल्नुहोस् र कार्यक्षमता प्रयास गर्नुहोस्:  
+### तपाईंको अन्तरक्रियात्मक टेरारियम परीक्षण गर्दै
 
-1. कुनै पनि प्लान्टलाई **क्लिक र होल्ड** गरेर तान्न सुरु गर्नुहोस्  
-2. **माउस वा औंला सार्नुहोस्** र प्लान्टलाई सहज रूपमा पछ्याउँदै हेर्नुहोस्  
-3. **छोड्नुहोस्** र प्लान्टलाई नयाँ स्थितिमा राख्नुहोस्  
-4. **विभिन्न व्यवस्थाहरूको साथ प्रयोग गर्नुहोस्** र इन्टरफेस अन्वेषण गर्नुहोस्  
+अब तपाईंको अन्तरक्रियात्मक टेरारियम परीक्षण गर्नुहोस्! आफ्नो `index.html` फाइल ब्राउजरमा खोल्नुहोस् र कार्यक्षमता प्रयास गर्नुहोस्:
 
-🥇 **उपलब्धि**: तपाईंले कोर अवधारणाहरू प्रयोग गरेर पूर्ण रूपमा अन्तरक्रियात्मक वेब एप्लिकेसन सिर्जना गर्नुभएको छ जुन पेशेवर विकासकर्ताहरूले दैनिक रूपमा प्रयोग गर्छन्। यो तान्ने कार्यक्षमता फाइल अपलोडहरू, कानबान बोर्डहरू, र धेरै अन्य अन्तरक्रियात्मक इन्टरफेसहरूको पछाडि समान सिद्धान्तहरू प्रयोग गर्छ।  
+1. **क्लिक र होल्ड गर्नुहोस्** कुनै पनि प्लान्टलाई ड्र्याग सुरु गर्न
+2. **माउस वा औंला सार्नुहोस्** र प्लान्टलाई सहज रूपमा पछ्याउँदै हेर्नुहोस्
+3. **छोड्नुहोस्** प्लान्टलाई नयाँ पोजिसनमा राख्न
+4. **विभिन्न व्यवस्थाहरूको साथ प्रयोग गर्नुहोस्** इन्टरफेस अन्वेषण गर्न
 
-![समाप्त टेरारियम](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ne.png)  
+🥇 **उपलब्धि**: तपाईंले पेशेवर विकासकर्ताहरूले दैनिक प्रयोग गर्ने कोर अवधारणाहरू प्रयोग गरेर पूर्ण रूपमा अन्तरक्रियात्मक वेब एप्लिकेसन सिर्जना गर्नुभयो। त्यो ड्र्याग-एन्ड-ड्रप कार्यक्षमता फाइल अपलोडहरू, कानबान बोर्डहरू, र धेरै अन्य अन्तरक्रियात्मक इन्टरफेसहरू पछाडि समान सिद्धान्तहरू प्रयोग गर्दछ।
+
+### 🔄 **शिक्षणात्मक जाँच**
+**पूर्ण प्रणाली बुझाइ**: तपाईंको पूर्ण ड्र्याग प्रणालीको मास्टरी प्रमाणित गर्नुहोस्:
+- ✅ क्लोजरहरूले प्रत्येक प्लान्टको लागि स्वतन्त्र अवस्था कसरी कायम राख्छन्?
+- ✅ सहज मूभमेन्टको लागि समन्वय गणित किन आवश्यक छ?
+- ✅ यदि हामीले इभेन्ट लिसनरहरू सफा गर्न बिर्स्यौं भने के हुन्छ?
+- ✅ यो ढाँचा जटिल अन्तरक्रियाहरूमा कसरी स्केल हुन्छ?
+
+**कोड गुणस्तर प्रतिबिम्ब**: तपाईंको पूर्ण समाधान समीक्षा गर्नुहोस्:
+- **मोड्युलर डिजाइन**: प्रत्येक प्लान्टले आफ्नो क्लोजर इन्स्ट्यान्स प्राप्त गर्छ
+- **इभेन्ट दक्षता**: लिसनरहरूको उचित सेटअप र सफाइ
+- **क्रस-डिभाइस समर्थन**: डेस्कटप र मोबाइलमा काम गर्छ
+- **प्रदर्शन सचेत**: कुनै मेमोरी लीक वा अनावश्यक गणनाहरू छैनन्
+
+![समाप्त टेरारियम](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ne.png)
 
 ---
 
-## GitHub Copilot Agent Challenge 🚀  
+## GitHub Copilot Agent Challenge 🚀
+
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:  
+**विवरण:** टेरारियम प्रोजेक्टमा रिसेट कार्यक्षमता थप्नुहोस् जसले सबै प्लान्टहरूलाई उनीहरूको मूल पोजिसनमा स्मूथ एनिमेसनको साथ फर्काउँछ।
 
-**विवरण:** टेरारियम परियोजनामा ​​एक रिसेट कार्यक्षमता थप्नुहोस् जसले सबै प्लान्टहरूलाई उनीहरूको मूल स्थितिमा सहज एनिमेसनको साथ फर्काउँछ।  
+**प्रम्ट:** एक रिसेट बटन सिर्जना गर्नुहोस्, जसलाई क्लिक गर्दा सबै प्लान्टहरूलाई उनीहरूको मूल साइडबार पोजिसनमा CSS ट्रान्जिसन प्रयोग गरेर १ सेकेन्डमा स्मूथली ट्रान्जिसन गराउँछ। फङ्सनले पेज लोड हुँदा मूल पोजिसनहरू स्टोर गर्नुपर्छ र रिसेट बटन थिच्दा ती पोजिसनहरूमा प्लान्टहरू फर्काउँछ।
 
-**प्रेरणा:** एक रिसेट बटन सिर्जना गर्नुहोस्, जसलाई क्लिक गर्दा सबै प्लान्टहरूलाई उनीहरूको मूल साइडबार स्थितिमा CSS ट्रान्जिसन प्रयोग गरेर १ सेकेन्डमा सहज रूपमा फर्काउँछ। पृष्ठ लोड हुँदा मूल स्थितिहरू भण्डारण गर्ने कार्यले यो सुनिश्चित गर्नुपर्छ।  
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।  
+## 🚀 थप चुनौती: आफ्नो सीप विस्तार गर्नुहोस्
 
-## 🚀 थप चुनौती: आफ्नो सीप विस्तार गर्नुहोस्  
+तपाईंको टेरारियमलाई अर्को स्तरमा लैजान तयार हुनुहुन्छ? यी सुधारहरू कार्यान्वयन गर्ने प्रयास गर्नुहोस्:
 
-तपाईंको टेरारियमलाई अर्को स्तरमा लैजान तयार हुनुहुन्छ? यी सुधारहरू कार्यान्वयन गर्ने प्रयास गर्नुहोस्:  
+**रचनात्मक विस्तारहरू:**
+- **डबल-क्लिक** प्लान्टलाई अगाडि ल्याउन (z-index म्यानिपुलेसन)
+- **दृश्य प्रतिक्रिया थप्नुहोस्** जस्तै प्लान्टहरूमा होभर गर्दा हल्का चमक
+- **सीमाहरू कार्यान्वयन गर्नुहोस्** प्लान्टहरूलाई टेरारियम बाहिर ड्र्याग गर्न रोक्न
+- **सेभ फङ्सन सिर्जना गर्नुहोस्** जसले प्लान्ट पोजिसनहरूलाई localStorage प्रयोग गरेर सम्झन्छ
+- **ध्वनि प्रभावहरू थप्नुहोस्** प्लान्ट उठाउँदा र राख्दा
 
-**रचनात्मक विस्तारहरू:**  
-- प्लान्टलाई अगाडि ल्याउन **डबल-क्लिक** गर्नुहोस् (z-index हेरफेर)  
-- प्लान्टहरूमा होभर गर्दा **सजिलो चमक** जस्तो दृश्यात्मक प्रतिक्रिया थप्नुहोस्  
-- प्लान्टहरूलाई टेरारियम बाहिर तान्नबाट रोक्न **सीमाहरू लागू गर्नुहोस्**  
-- प्लान्टको स्थिति सम्झनको लागि **सेभ कार्य** सिर्जना गर्नुहोस् (localStorage प्रयोग गरेर)  
-- प्लान्ट उठाउने र राख्ने क्रममा **ध्वनि प्रभावहरू थप्नुहोस्**  
+> 💡 **शिक्षण अवसर**: यी चुनौतीहरूले तपाईंलाई DOM म्यानिपुलेसन, इभेन्ट ह्यान्डलिङ, र प्रयोगकर्ता अनुभव डिजाइनको नयाँ पक्षहरू सिकाउनेछन्।
 
-> 💡 **अध्ययनको अवसर**: यी चुनौतीहरूले तपाईंलाई DOM हेरफेर, घटनाको ह्यान्डलिङ, र प्रयोगकर्ता अनुभव डिजाइनको नयाँ पक्षहरू सिकाउनेछन्।  
+## पोस्ट-लेक्चर क्विज
 
-## पोस्ट-व्याख्यान क्विज  
+[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/20)
 
-[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/20)  
+## समीक्षा र आत्म अध्ययन: तपाईंको बुझाइलाई गहिरो बनाउँदै
 
-## समीक्षा र आत्म-अध्ययन: तपाईंको बुझाइलाई गहिरो बनाउँदै  
+तपाईंले DOM म्यानिपुलेसन र क्लोजरहरूको आधारभूत कुरा मास्टर गर्नुभएको छ, तर अझै अन्वेषण गर्न धेरै छ! यहाँ तपाईंको ज्ञान र सीप विस्तार गर्नका लागि केही मार्गहरू छन्।
 
-तपाईंले DOM हेरफेर र क्लोजरहरूको आधारभूत कुराहरूमा महारत हासिल गर्नुभएको छ, तर अझै अन्वेषण गर्न धेरै छ! यहाँ तपाईंको ज्ञान र सीप विस्तार गर्नका लागि केही मार्गहरू छन्।  
+### वैकल्पिक ड्र्याग र ड्रप दृष्टिकोणहरू
 
-### वैकल्पिक तान्ने र छोड्ने दृष्टिकोणहरू  
+हामीले अधिकतम लचीलापनको लागि पोइन्टर इभेन्टहरू प्रयोग गर्यौं, तर वेब विकासले धेरै दृष्टिकोणहरू प्रदान गर्दछ:
 
-हामीले अधिकतम लचिलोताका लागि पोइन्टर घटनाहरू प्रयोग गर्यौं, तर वेब विकासले धेरै दृष्टिकोणहरू प्रदान गर्दछ:  
+| दृष्टिकोण | सबैभन्दा राम्रो लागि | सिक्ने मूल्य |
+|----------|----------|----------------|
+| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | फाइल अपलोडहरू, औपचारिक ड्र्याग जोनहरू | ब्राउजरको प्राकृतिक क्षमता बुझ्दै |
+| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | मोबाइल-विशिष्ट अन्तरक्रिया | मोबाइल-प्रथम विकास ढाँचाहरू |
+| CSS `transform` प्रोपर्टीहरू | स्मूथ एनिमेसनहरू | प्रदर्शन अनुकूलन प्रविधिहरू |
 
-| दृष्टिकोण | केको लागि उत्तम | सिकाइ मूल्य |  
-|----------|----------|----------------|  
-| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | फाइल अपलोडहरू, औपचारिक तान्ने क्षेत्रहरू | ब्राउजरको प्राकृतिक क्षमता बुझ्दै |  
-| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | मोबाइल-विशिष्ट अन्तरक्रियाहरू | मोबाइल-प्रथम विकास ढाँचाहरू |  
-| CSS `transform` गुणहरू | सहज एनिमेसनहरू | प्रदर्शन अनुकूलन प्रविधिहरू |  
+### उन्नत DOM म्यानिपुलेसन विषयहरू
 
-### उन्नत DOM हेरफेर विषयहरू  
+**तपाईंको सिकाइ यात्रामा अर्को चरणहरू:**
+- **इभेन्ट डेलिगेसन**: धेरै एलिमेन्टहरूको लागि इभेन्टहरू कुशलतापूर्वक ह्यान्डल गर्दै
+- **इंटरसेक्सन अब्जर्भर**: एलिमेन्टहरू भ्यूपोर्टमा प्रवेश/निस्कने समय पत्ता लगाउँदै
+- **म्युटेसन अब्जर्भर**: DOM संरचनामा परिवर्तनहरूको लागि हेर्दै
+- **वेब कम्पोनेन्टहरू**: पुन: प्रयोग गर्न मिल्ने, इन्क्याप्सुलेटेड UI एलिमेन्टहरू सिर्जना गर्दै
+- **भर्चुअल DOM अवधारणाहरू**: फ्रेमवर्कहरूले DOM अपडेटहरू कसरी अनुकूलित गर्छन् बुझ्दै
 
-**तपाईंको सिकाइ यात्राको अर्को चरणहरू:**  
-- **घटना प्रतिनिधित्व**: धेरै तत्वहरूको लागि घटनाहरू कुशलतापूर्वक ह्यान्डल गर्दै  
-- **Intersection Observer**: तत्वहरू दृश्यमा प्रवेश गर्दा/छोड्दा पत्ता लगाउँदै  
-- **Mutation Observer**: DOM संरचनामा परिवर्तनहरू हेर्दै  
-- **Web Components**: पुन: प्रयोगयोग्य, समावेशित UI तत्वहरू सिर्जना गर्दै  
-- **Virtual DOM अवधारणाहरू**: फ्रेमवर्कहरूले DOM अपडेटहरू कसरी अनुकूलित गर्छन् बुझ्दै  
+### निरन्तर सिकाइका लागि आवश्यक स्रोतहरू
 
-### निरन्तर सिकाइका लागि आवश्यक स्रोतहरू  
+**प्राविधिक डकुमेन्टेसन:**
+- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - व्यापक पोइन्टर इभेन्ट सन्दर्भ
+- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - आधिकारिक मापदण्ड डकुमेन्टेसन
+- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - उन्नत क्लोजर ढाँचाहरू
 
-**प्राविधिक दस्तावेजहरू:**  
-- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - व्यापक पोइन्टर घटना सन्दर्भ  
-- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - आधिकारिक मापदण्ड दस्तावेज  
-- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - उन्नत क्लोजर ढाँचाहरू  
+**ब्राउजर अनुकूलता:**
+- [CanIUse.com](https://caniuse.com/) - ब्राउजरहरूमा फिचर समर्थन जाँच गर्नुहोस्
+- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - विस्तृत अनुकूलता जानकारी
 
-**ब्राउजर अनुकूलता:**  
-- [CanIUse.com](https://caniuse.com/) - ब्राउजरहरूमा सुविधा समर्थन जाँच गर्नुहोस्  
-- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - विस्तृत अनुकूलता जानकारी  
+**अभ्यास अवसरहरू:**
+- **निर्माण गर्नुहोस्** ड्र्याग म्याकानिक्स प्रयोग गरेर पजल गेम
+- **सिर्जना गर्नुहोस्** ड्र्याग-एन्ड-ड्रप टास्क व्यवस्थापनको साथ कानबान बोर्ड
+- **डिजाइन गर्नुहोस्** ड्र्याग गर्न मिल्ने फोटो व्यवस्थापनको साथ इमेज ग्यालरी
+- **प्रयोग गर्नुहोस्** मोबाइल इन्टरफेसहरूको लागि टच जेस्चरहरू
 
-**अभ्यासका अवसरहरू:**  
-- **सिर्जना गर्नुहोस्**: समान तान्ने मेकानिक्स प्रयोग गरेर पजल खेल  
-- **डिजाइन गर्नुहोस्**: तान्न र छोड्न सकिने कार्य व्यवस्थापनको साथ कानबान बोर्ड  
-- **सजाउनुहोस्**: तस्बिरहरूको व्यवस्था गर्न सकिने फोटो ग्यालरी  
-- **प्रयोग गर्नुहोस्**: मोबाइल इन्टरफेसहरूको लागि टच इशाराहरू  
+> 🎯 **सिकाइ रणनीति**: यी अवधारणाहरूलाई ठोस बनाउनको लागि उत्तम तरिका अभ्यास हो। ड्र्याग गर्न मिल्ने इन्टरफेसहरूको भिन्नता निर्माण गर्ने प्रयास गर्नुहोस् – प्रत्येक प्रोजेक्टले तपाईंलाई प्रयोगकर्ता अन्तरक्रिया र DOM म्यानिपुलेसनको बारेमा नयाँ कुरा सिकाउनेछ।
 
-> 🎯 **सिकाइ रणनीति**: यी अवधारणाहरूलाई बलियो बनाउनको लागि उत्तम तरिका भनेको अभ्यास हो। तान्न सकिने इन्टरफेसहरूको भिन्नता निर्माण गर्ने प्रयास गर्नुहोस् – प्रत्येक परियोजनाले तपाईंलाई प्रयोगकर्ता अन्तरक्रिया र DOM हेरफेरको बारेमा नयाँ कुरा सिकाउनेछ।  
+### ⚡ **तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा**
+- [ ] ब्राउजर DevTools खोल्नुहोस् र कन्सोलमा `document.querySelector('body')` टाइप गर्नुहोस्
+- [ ] `innerHTML` वा `textContent` प्रयोग गरेर वेबपेजको टेक्स्ट परिवर्तन गर्ने प्रयास गर्नुहोस्
+- [ ] वेबपेजमा कुनै पनि बटन वा लिंकमा क्लिक इभेन्ट लिसनर थप्नुहोस्
+- [ ] Elements प्यानल प्रयोग गरेर DOM ट्री संरचना निरीक्षण गर्नुहोस्
+
+### 🎯 **तपाईंले यो घण्टामा हासिल गर्न सक्ने कुरा**
+- [ ] पोस्ट-लेसन क्विज पूरा गर्नुहोस् र DOM म्यानिपुलेसन अवधारणाहरू समीक्षा गर्नुहोस्
+- [ ] प्रयोगकर्ताको क्लिकहरूमा प्रतिक्रिया दिने अन्तरक्रियात्मक वेबपेज सिर्जना गर्नुहोस्
+- [ ] विभिन्न इभेन्ट प्रकारहरू (क्लिक, माउसओभर, कीप्रेस) संग इभेन्ट ह्यान्डलिङ अभ्यास गर्नुहोस्
+- [ ] DOM म्यानिपुलेसन प्रयोग गरेर साधारण टु-डु लिस्ट वा काउन्टर निर्माण गर्नुहोस्
+- [ ] HTML एलिमेन्टहरू र जाभास्क्रिप्ट वस्तुहरू बीचको सम्बन्ध अन्वेषण गर्नुहोस्
+
+### 📅 **तपाईंको हप्ताको जाभास्क्रिप्ट यात्रा**
+- [ ] ड्र्याग-एन्ड-ड्रप कार्यक्षमता सहित अन्तरक्रियात्मक टेरारियम प्रोजेक्ट पूरा गर्नुहोस्
+- [ ] कुशल इभेन्ट ह्यान्डलिङको लागि इभेन्ट डेलिगेसन मास्टर गर्नुहोस्
+- [ ] इभेन्ट लूप र एसिंक्रोनस जाभास्क्रिप्टको बारेमा जान्नुहोस्
+- [ ] निजी अवस्थाको साथ मोड्युलहरू निर्माण गरेर क्लोजरहरू अभ्यास गर्नुहोस्
+- [ ] Intersection Observer जस्ता आधुनिक DOM API अन्वेषण गर्नुहोस्
+- [ ] फ्रेमवर्क प्रयोग नगरी अन्तरक्रियात्मक कम्पोनेन्टहरू निर्माण गर्नुहोस्
+
+### 🌟 **तपाईंको महिनाको जाभास्क्रिप्ट मास्टरी**
+- [ ] भ्यानिला जाभास्क्रिप्ट प्रयोग गरेर जटिल सिंगल-पेज एप्लिकेसन सिर्जना गर्नुहोस्
+- [ ] आधुनिक फ्रेमवर्क (React, Vue, वा Angular) सिक्नुहोस् र यसलाई भ्यानिला DOM सँग तुलना गर्नुहोस्
+- [ ] ओपन सोर्स जाभास्क्रिप्ट प्रोजेक्टहरूमा योगदान गर्नुहोस्
+- [ ] वेब कम्पोनेन्टहरू र कस्टम एलिमेन्टहरू जस्ता उन्नत अवधारणाहरू मास्टर गर्नुहोस्
+- [ ] इष्टतम DOM ढाँचाहरूको साथ प्रदर्शनकारी वेब एप्लिकेसनहरू निर्माण गर्नुहोस्
+- [ ] DOM म्यानिपुलेसन र जाभास्क्रिप्ट आधारभूत कुराहरूको बारेमा अरूलाई सिकाउनुहोस्
+
+## 🎯 तपाईंको जाभास्क्रिप्ट DOM मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title DOM & JavaScript Learning Progression
+    
+    section Foundation (15 minutes)
+        DOM Understanding: Element selection methods
+                         : Tree structure navigation
+                         : Property access patterns
+        
+    section Event Handling (20 minutes)
+        User Interaction: Pointer event basics
+                        : Event listener setup
+                        : Cross-device compatibility
+                        : Event prevention techniques
+        
+    section Closures (25 minutes)
+        Scope Management: Private variable creation
+                        : Function persistence
+                        : State management patterns
+                        : Memory efficiency
+        
+    section Drag System (30 minutes)
+        Interactive Features: Coordinate tracking
+                            : Position calculation
+                            : Movement mathematics
+                            : Cleanup procedures
+        
+    section Advanced Patterns (45 minutes)
+        Professional Skills: Event delegation
+                           : Performance optimization
+                           : Error handling
+                           : Accessibility considerations
+        
+    section Framework Understanding (1 week)
+        Modern Development: Virtual DOM concepts
+                          : State management libraries
+                          : Component architectures
+                          : Build tool integration
+        
+    section Expert Level (1 month)
+        Advanced DOM APIs: Intersection Observer
+                         : Mutation Observer
+                         : Custom Elements
+                         : Web Components
+```
 
-## असाइनमेन्ट  
+### 🛠️ तपाईंको जाभास्क्रिप्ट टूलकिट सारांश
 
-[DOMसँग अलिकति बढी काम गर्नुहोस्](assignment.md)  
+यो पाठ पूरा गरेपछि, तपाईंसँग अब छ:
+- **DOM मास्टरी**: एलिमेन्ट चयन, प्रोपर्टी म्यानिपुलेसन, र ट्री नेभिगेसन
+- **इभेन्ट विशेषज्ञता**: पोइन्टर इभेन्टहरूको साथ क्रस-डिभाइस अन्तरक्रिया ह्यान्डलिङ
+- **क्लोजर बुझाइ**: निजी अवस्था व्यवस्थापन र फङ्सन स्थायित्व
+- **अन्तरक्रियात्मक प्रणालीहरू**: स्क्र्याचबाट पूर्ण ड्र्याग-एन्ड-ड्रप कार्यान्वयन
+- **प्रदर्शन सचेतता**: उचित इभेन्ट
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/4-typing-game/README.md b/translations/ne/4-typing-game/README.md
index 87c80de978..4a4762c287 100644
--- a/translations/ne/4-typing-game/README.md
+++ b/translations/ne/4-typing-game/README.md
@@ -1,42 +1,289 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5adea7059676fcdb1b546ccd54c956c2",
-  "translation_date": "2025-10-22T17:10:17+00:00",
+  "original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
+  "translation_date": "2025-11-03T15:46:44+00:00",
   "source_file": "4-typing-game/README.md",
   "language_code": "ne"
 }
 -->
-# इभेन्ट-ड्रिभन प्रोग्रामिङ - टाइपिङ गेम बनाउनुहोस्
+# इभेन्ट-ड्रिभन प्रोग्रामिङ - टाइपिङ खेल बनाउनुहोस्
+
+```mermaid
+journey
+    title Your Typing Game Development Journey
+    section Foundation
+      Plan game structure: 3: Student
+      Design user interface: 4: Student
+      Setup HTML elements: 4: Student
+    section Functionality
+      Handle user input: 4: Student
+      Track timing: 5: Student
+      Calculate accuracy: 5: Student
+    section Features
+      Add visual feedback: 5: Student
+      Implement game logic: 5: Student
+      Polish experience: 5: Student
+```
 
 ## परिचय
 
-यहाँ एउटा कुरा छ जुन हरेक डेभलपरलाई थाहा छ तर कमै कुरा गरिन्छ: छिटो टाइप गर्न सक्नु एक सुपरपावर हो! 🚀 सोच्नुहोस् - तपाईंको विचारलाई मस्तिष्कबाट कोड एडिटरमा छिटो पुर्‍याउन सक्ने क्षमता, तपाईंको सिर्जनशीलता झन् प्रवाह गर्न सक्छ। यो तपाईंको विचार र स्क्रिनको बीचमा सीधा पाइपलाइन जस्तै हो।
+यहाँ एउटा कुरा छ जुन हरेक डेभलपरलाई थाहा छ तर कमै मात्र कुरा गर्छन्: छिटो टाइप गर्न सक्नु एक सुपरपावर हो! 🚀 सोच्नुहोस् - तपाईंको विचारलाई तपाईंको मस्तिष्कबाट कोड एडिटरमा छिटो पुर्‍याउन सक्नुहुन्छ भने, तपाईंको सिर्जनशीलता अझ राम्रोसँग प्रवाह गर्न सक्छ। यो तपाईंको विचार र स्क्रिन बीचको सीधा पाइपलाइन जस्तै हो।
+
+```mermaid
+pie title Game Features
+    "Real-time Feedback" : 25
+    "Performance Tracking" : 20
+    "Interactive UI" : 20
+    "Timer System" : 15
+    "Quote Management" : 10
+    "Results Display" : 10
+```
+
+यो सीपलाई स्तरवृद्धि गर्ने उत्तम तरिका जान्न चाहनुहुन्छ? तपाईंले सही अनुमान गर्नुभयो - हामी खेल बनाउन जाँदैछौं!
 
-यो सीपलाई स्तरवृद्धि गर्ने सबैभन्दा राम्रो तरिका जान्न चाहनुहुन्छ? तपाईंले ठ्याक्कै अनुमान गर्नुभयो - हामी एउटा गेम बनाउन जाँदैछौं!
+```mermaid
+flowchart LR
+    A[Player starts game] --> B[Random quote displayed]
+    B --> C[Player types characters]
+    C --> D{Character correct?}
+    D -->|Yes| E[Green highlight]
+    D -->|No| F[Red highlight]
+    E --> G[Update accuracy]
+    F --> G
+    G --> H{Quote complete?}
+    H -->|No| C
+    H -->|Yes| I[Calculate WPM]
+    I --> J[Display results]
+    J --> K[Play again?]
+    K -->|Yes| B
+    K -->|No| L[Game over]
+    
+    style A fill:#e1f5fe
+    style D fill:#fff3e0
+    style E fill:#e8f5e8
+    style F fill:#ffebee
+    style I fill:#f3e5f5
+```
 
-> आउनुहोस्, सँगै एउटा उत्कृष्ट टाइपिङ गेम बनाऔं!
+> आउनुहोस्, सँगै एउटा उत्कृष्ट टाइपिङ खेल बनाउँ!
 
-तपाईंले सिक्दै आएको JavaScript, HTML, र CSS सीपलाई काममा लगाउन तयार हुनुहुन्छ? हामी एउटा टाइपिङ गेम बनाउनेछौं जसले तपाईंलाई प्रसिद्ध जासूस [शर्लक होम्स](https://en.wikipedia.org/wiki/Sherlock_Holmes) का र्यान्डम उद्धरणहरूसँग चुनौती दिनेछ। खेलले तपाईंले कति छिटो र सही टाइप गर्न सक्नुहुन्छ भनेर ट्र्याक गर्नेछ - र विश्वास गर्नुहोस्, यो तपाईंले सोचेभन्दा धेरै रोचक छ!
+तपाईंले सिक्दै आएको JavaScript, HTML, र CSS सीपलाई काममा लगाउन तयार हुनुहुन्छ? हामी एउटा टाइपिङ खेल बनाउनेछौं जसले तपाईंलाई प्रसिद्ध जासूस [शर्लक होम्स](https://en.wikipedia.org/wiki/Sherlock_Holmes) का र्यान्डम उद्धरणहरूसँग चुनौती दिनेछ। खेलले तपाईं कति छिटो र सही टाइप गर्न सक्नुहुन्छ भनेर ट्र्याक गर्नेछ - र विश्वास गर्नुहोस्, यो तपाईंले सोचेभन्दा धेरै नशालु छ!
+
+```mermaid
+mindmap
+  root((Typing Game Development))
+    User Interface
+      Input Elements
+      Visual Feedback
+      Responsive Design
+      Accessibility
+    Game Logic
+      Quote Selection
+      Timer Management
+      Accuracy Tracking
+      Score Calculation
+    Event Handling
+      Keyboard Input
+      Button Clicks
+      Real-time Updates
+      Game State Changes
+    Performance Metrics
+      Words Per Minute
+      Character Accuracy
+      Error Tracking
+      Progress Display
+    User Experience
+      Immediate Feedback
+      Clear Instructions
+      Engaging Content
+      Achievement System
+```
 
 ![डेमो](../../../4-typing-game/images/demo.gif)
 
 ## तपाईंलाई थाहा हुनुपर्ने कुरा
 
-हामी सुरु गर्नु अघि, यी अवधारणाहरूमा तपाईं सहज हुनुहोस् भन्ने सुनिश्चित गर्नुहोस् (यदि तपाईंलाई छिटो पुनरावलोकनको आवश्यकता छ भने चिन्ता नगर्नुहोस् - हामी सबै त्यहाँ पुगेका छौं!):
+```mermaid
+flowchart TD
+    A[User Action] --> B{Event Type?}
+    B -->|Key Press| C[Keyboard Event]
+    B -->|Button Click| D[Mouse Event]
+    B -->|Timer| E[Time Event]
+    
+    C --> F[Check Character]
+    D --> G[Start/Reset Game]
+    E --> H[Update Timer]
+    
+    F --> I{Correct?}
+    I -->|Yes| J[Highlight Green]
+    I -->|No| K[Highlight Red]
+    
+    J --> L[Update Score]
+    K --> L
+    L --> M[Check Game State]
+    
+    G --> N[Generate New Quote]
+    H --> O[Display Time]
+    
+    M --> P{Game Complete?}
+    P -->|Yes| Q[Show Results]
+    P -->|No| R[Continue Game]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#fff3e0
+    style Q fill:#f3e5f5
+```
+
+हामी सुरु गर्नु अघि, सुनिश्चित गर्नुहोस् कि तपाईं यी अवधारणाहरूमा सहज हुनुहुन्छ (यदि तपाईंलाई छिटो पुनरावलोकनको आवश्यकता छ भने चिन्ता नगर्नुहोस् - हामी सबै त्यहाँ पुगेका छौं!):
 
-- टेक्स्ट इनपुट र बटन कन्ट्रोलहरू बनाउने
-- CSS र क्लासहरू प्रयोग गरेर स्टाइल सेट गर्ने  
-- JavaScript को आधारभूत कुरा
-  - एरे बनाउने
-  - र्यान्डम नम्बर बनाउने
-  - हालको समय प्राप्त गर्ने
+- टेक्स्ट इनपुट र बटन कन्ट्रोलहरू सिर्जना गर्नु
+- CSS र क्लासहरू प्रयोग गरेर स्टाइल सेट गर्नु  
+- JavaScript आधारभूत कुरा
+  - एरे सिर्जना गर्नु
+  - र्यान्डम नम्बर सिर्जना गर्नु
+  - वर्तमान समय प्राप्त गर्नु
 
-यदि यी मध्ये कुनै कुरा अलि कमजोर लाग्छ भने, चिन्ता नगर्नुहोस्! कहिलेकाहीं परियोजनामा ​​हाम फालेर र सिक्दै जानु नै ज्ञानलाई बलियो बनाउने सबैभन्दा राम्रो तरिका हो।
+यदि यी मध्ये कुनै पनि कुरा अलि कमजोर लाग्छ भने, त्यो पूर्ण रूपमा ठीक छ! कहिलेकाहीं तपाईंको ज्ञानलाई बलियो बनाउने उत्तम तरिका भनेको परियोजनामा ​​हाम फाल्नु र काम गर्दै जानु हो।
+
+### 🔄 **शैक्षिक जाँच**
+**आधार मूल्याङ्कन**: विकास सुरु गर्नु अघि सुनिश्चित गर्नुहोस् कि तपाईं बुझ्नुहुन्छ:
+- ✅ HTML फारम र इनपुट एलिमेन्टहरू कसरी काम गर्छन्
+- ✅ CSS क्लासहरू र गतिशील स्टाइलिङ
+- ✅ JavaScript इभेन्ट लिस्नरहरू र ह्यान्डलरहरू
+- ✅ एरे म्यानिपुलेसन र र्यान्डम चयन
+- ✅ समय मापन र गणना
+
+**छिटो आत्म-परीक्षण**: के तपाईं व्याख्या गर्न सक्नुहुन्छ कि यी अवधारणाहरूले इन्टरएक्टिभ खेलमा कसरी सँगै काम गर्छन्?
+- **इभेन्टहरू** प्रयोगकर्ताले एलिमेन्टहरूसँग अन्तरक्रिया गर्दा ट्रिगर हुन्छन्
+- **ह्यान्डलरहरू** ती इभेन्टहरूलाई प्रक्रिया गर्छन् र खेलको अवस्था अपडेट गर्छन्
+- **CSS** प्रयोगकर्ताको क्रियाकलापको लागि दृश्य प्रतिक्रिया प्रदान गर्छ
+- **समय मापन** प्रदर्शन मापन र खेलको प्रगतिको लागि सक्षम बनाउँछ
+
+```mermaid
+quadrantChart
+    title Typing Game Skills Development
+    x-axis Beginner --> Expert
+    y-axis Static --> Interactive
+    quadrant-1 Advanced Games
+    quadrant-2 Real-time Apps
+    quadrant-3 Basic Pages
+    quadrant-4 Interactive Sites
+    
+    HTML Forms: [0.3, 0.2]
+    CSS Styling: [0.4, 0.3]
+    Event Handling: [0.7, 0.8]
+    Game Logic: [0.8, 0.9]
+    Performance Tracking: [0.9, 0.7]
+```
 
 ## आउनुहोस्, यो बनाऔं!
 
-[इभेन्ट ड्रिभन प्रोग्रामिङ प्रयोग गरेर टाइपिङ गेम बनाउने](./typing-game/README.md)
+[इभेन्ट ड्रिभन प्रोग्रामिङ प्रयोग गरेर टाइपिङ खेल बनाउने](./typing-game/README.md)
+
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] तपाईंको ब्राउजर कन्सोल खोल्नुहोस् र `addEventListener` प्रयोग गरेर किबोर्ड इभेन्टहरू सुन्न प्रयास गर्नुहोस्
+- [ ] इनपुट फिल्ड भएको साधारण HTML पेज सिर्जना गर्नुहोस् र टाइपिङ डिटेक्शन परीक्षण गर्नुहोस्
+- [ ] टाइप गरिएको टेक्स्टलाई लक्ष्य टेक्स्टसँग तुलना गरेर स्ट्रिङ म्यानिपुलेसन अभ्यास गर्नुहोस्
+- [ ] टाइमिङ फङ्सनहरू बुझ्न `setTimeout` प्रयोग गरेर प्रयोग गर्नुहोस्
+
+### 🎯 **यो घण्टामा तपाईं के हासिल गर्न सक्नुहुन्छ**
+- [ ] पाठ-अन्तिम क्विज पूरा गर्नुहोस् र इभेन्ट-ड्रिभन प्रोग्रामिङ बुझ्नुहोस्
+- [ ] शब्द मान्यतासहित टाइपिङ खेलको आधारभूत संस्करण बनाउनुहोस्
+- [ ] सही र गलत टाइपिङको लागि दृश्य प्रतिक्रिया थप्नुहोस्
+- [ ] गति र शुद्धतामा आधारित सरल स्कोरिङ प्रणाली कार्यान्वयन गर्नुहोस्
+- [ ] CSS प्रयोग गरेर तपाईंको खेललाई दृश्य रूपमा आकर्षक बनाउनुहोस्
+
+### 📅 **तपाईंको हप्ताको खेल विकास**
+- [ ] सबै सुविधाहरू र पोलिशसहित पूर्ण टाइपिङ खेल पूरा गर्नुहोस्
+- [ ] विभिन्न शब्द जटिलतासहित कठिनाई स्तरहरू थप्नुहोस्
+- [ ] प्रयोगकर्ता तथ्याङ्क ट्र्याकिङ कार्यान्वयन गर्नुहोस् (WPM, समय अनुसार शुद्धता)
+- [ ] राम्रो प्रयोगकर्ता अनुभवको लागि ध्वनि प्रभाव र एनिमेसनहरू सिर्जना गर्नुहोस्
+- [ ] तपाईंको खेललाई टच डिभाइसहरूको लागि मोबाइल-उत्तरदायी बनाउनुहोस्
+- [ ] तपाईंको खेल अनलाइन साझा गर्नुहोस् र प्रयोगकर्ताहरूबाट प्रतिक्रिया संकलन गर्नुहोस्
+
+### 🌟 **तपाईंको महिनाको इन्टरएक्टिभ विकास**
+- [ ] विभिन्न अन्तरक्रिया ढाँचाहरू अन्वेषण गर्दै धेरै खेलहरू बनाउनुहोस्
+- [ ] खेल लूप, अवस्था व्यवस्थापन, र प्रदर्शन अनुकूलनको बारेमा जान्नुहोस्
+- [ ] ओपन सोर्स खेल विकास परियोजनाहरूमा योगदान गर्नुहोस्
+- [ ] उन्नत टाइमिङ अवधारणाहरू र स्मूथ एनिमेसनहरू मास्टर गर्नुहोस्
+- [ ] विभिन्न इन्टरएक्टिभ एप्लिकेसनहरू प्रदर्शन गर्ने पोर्टफोलियो सिर्जना गर्नुहोस्
+- [ ] खेल विकास र प्रयोगकर्ता अन्तरक्रियामा रुचि राख्ने अन्यलाई मार्गदर्शन गर्नुहोस्
+
+## 🎯 तपाईंको टाइपिङ खेल मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title Game Development Learning Progression
+    
+    section Setup (10 minutes)
+        Project Structure: HTML foundation
+                         : CSS styling setup
+                         : JavaScript file creation
+        
+    section User Interface (20 minutes)
+        Interactive Elements: Input fields
+                            : Button controls
+                            : Display areas
+                            : Responsive layout
+        
+    section Event Handling (25 minutes)
+        User Interaction: Keyboard events
+                        : Mouse events
+                        : Real-time feedback
+                        : State management
+        
+    section Game Logic (30 minutes)
+        Core Functionality: Quote generation
+                          : Character comparison
+                          : Accuracy calculation
+                          : Timer implementation
+        
+    section Performance Tracking (35 minutes)
+        Metrics & Analytics: WPM calculation
+                           : Error tracking
+                           : Progress visualization
+                           : Results display
+        
+    section Polish & Enhancement (45 minutes)
+        User Experience: Visual feedback
+                       : Sound effects
+                       : Animations
+                       : Accessibility features
+        
+    section Advanced Features (1 week)
+        Extended Functionality: Difficulty levels
+                              : Leaderboards
+                              : Custom quotes
+                              : Multiplayer options
+        
+    section Professional Skills (1 month)
+        Game Development: Performance optimization
+                        : Code architecture
+                        : Testing strategies
+                        : Deployment patterns
+```
+
+### 🛠️ तपाईंको खेल विकास टूलकिट सारांश
+
+यो परियोजना पूरा गरेपछि, तपाईंले निम्न कुराहरूमा महारत हासिल गर्नुहुनेछ:
+- **इभेन्ट-ड्रिभन प्रोग्रामिङ**: प्रयोगकर्ता इन्टरफेसहरू जो इनपुटमा प्रतिक्रिया दिन्छन्
+- **रियल-टाइम प्रतिक्रिया**: तत्काल दृश्य र प्रदर्शन अपडेटहरू
+- **प्रदर्शन मापन**: सटीक टाइमिङ र स्कोरिङ प्रणालीहरू
+- **खेल अवस्था व्यवस्थापन**: एप्लिकेसन प्रवाह र प्रयोगकर्ता अनुभव नियन्त्रण
+- **इन्टरएक्टिभ डिजाइन**: आकर्षक, नशालु प्रयोगकर्ता अनुभव सिर्जना गर्नु
+- **आधुनिक वेब APIs**: समृद्ध अन्तरक्रियाको लागि ब्राउजर क्षमताहरूको उपयोग
+- **पहुंचयोग्यता ढाँचाहरू**: सबै प्रयोगकर्ताहरूको लागि समावेशी डिजाइन
+
+**वास्तविक-विश्व अनुप्रयोगहरू**: यी सीपहरू सीधा लागू हुन्छन्:
+- **वेब अनुप्रयोगहरू**: कुनै पनि इन्टरएक्टिभ इन्टरफेस वा ड्यासबोर्ड
+- **शैक्षिक सफ्टवेयर**: सिकाइ प्लेटफर्महरू र सीप मूल्याङ्कन उपकरणहरू
+- **उत्पादकता उपकरणहरू**: टेक्स्ट एडिटरहरू, IDEs, र सहयोग सफ्टवेयर
+- **गेमिङ उद्योग**: ब्राउजर खेलहरू र इन्टरएक्टिभ मनोरञ्जन
+- **मोबाइल विकास**: टच-आधारित इन्टरफेसहरू र इशारा ह्यान्डलिङ
+
+**अर्को स्तर**: तपाईं उन्नत खेल फ्रेमवर्कहरू, रियल-टाइम मल्टिप्लेयर प्रणालीहरू, वा जटिल इन्टरएक्टिभ अनुप्रयोगहरू अन्वेषण गर्न तयार हुनुहुन्छ!
 
 ## क्रेडिट्स
 
@@ -45,4 +292,4 @@ CO_OP_TRANSLATOR_METADATA:
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/4-typing-game/typing-game/README.md b/translations/ne/4-typing-game/typing-game/README.md
index 758a2f5fa7..b821e791d2 100644
--- a/translations/ne/4-typing-game/typing-game/README.md
+++ b/translations/ne/4-typing-game/typing-game/README.md
@@ -1,70 +1,70 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e6b75e5b8caae906473a8a09d77b7121",
-  "translation_date": "2025-10-22T17:10:25+00:00",
+  "original_hash": "da8bc72041a2bb3826a54654ee1a8844",
+  "translation_date": "2025-11-03T15:47:01+00:00",
   "source_file": "4-typing-game/typing-game/README.md",
   "language_code": "ne"
 }
 -->
-# इभेन्टहरू प्रयोग गरेर खेल बनाउने
+# इभेन्ट्स प्रयोग गरेर खेल बनाउने
 
-के तपाईंले कहिल्यै सोच्नुभएको छ कि वेबसाइटहरूले कसरी थाहा पाउँछन् जब तपाईंले बटन क्लिक गर्नुहुन्छ वा टेक्स्ट बक्समा टाइप गर्नुहुन्छ? यो इभेन्ट-ड्राइभन प्रोग्रामिङको जादू हो! यो महत्वपूर्ण सीप सिक्नको लागि के राम्रो तरिका हुन सक्छ - एक टाइपिङ स्पीड खेल बनाउनुहोस् जसले तपाईंले गरेको प्रत्येक कीस्ट्रोकमा प्रतिक्रिया दिन्छ।
+के तपाईंले कहिल्यै सोच्नुभएको छ कि वेबसाइटहरूले कसरी थाहा पाउँछन् कि तपाईंले बटन क्लिक गर्नुभयो वा टेक्स्ट बक्समा टाइप गर्नुभयो? यो इभेन्ट-ड्रिभन प्रोग्रामिङको जादू हो! यो महत्वपूर्ण सीप सिक्नको लागि के राम्रो तरिका हुन सक्छ - एउटा टाइपिङ स्पीड खेल बनाउनुहोस् जसले तपाईंले गरेको प्रत्येक कीस्ट्रोकमा प्रतिक्रिया दिन्छ।
 
-तपाईंले प्रत्यक्ष रूपमा देख्नुहुनेछ कि वेब ब्राउजरहरूले तपाईंको JavaScript कोडसँग "कसरी कुरा गर्छन्।" जब तपाईं क्लिक गर्नुहुन्छ, टाइप गर्नुहुन्छ, वा माउस सार्नुहुन्छ, ब्राउजरले साना सन्देशहरू (हामी तिनीहरूलाई इभेन्ट्स भन्छौं) तपाईंको कोडमा पठाइरहेको छ, र तपाईंले कसरी प्रतिक्रिया दिने निर्णय गर्न सक्नुहुन्छ!
+तपाईंले प्रत्यक्ष रूपमा देख्नुहुनेछ कि वेब ब्राउजरहरूले तपाईंको JavaScript कोडसँग "कसरी कुरा गर्छन्।" तपाईंले क्लिक गर्दा, टाइप गर्दा, वा माउस सार्दा, ब्राउजरले साना सन्देशहरू (हामी तिनीहरूलाई इभेन्ट्स भन्छौं) तपाईंको कोडमा पठाइरहेको हुन्छ, र तपाईंले कसरी प्रतिक्रिया दिने निर्णय गर्न सक्नुहुन्छ!
 
-यहाँ काम सकिएपछि, तपाईंले आफ्नो स्पीड र शुद्धता ट्र्याक गर्ने वास्तविक टाइपिङ खेल बनाइसक्नु हुनेछ। अझ महत्त्वपूर्ण कुरा, तपाईंले प्रत्येक इन्टरएक्टिभ वेबसाइटलाई शक्ति दिने आधारभूत अवधारणाहरू बुझ्नुहुनेछ। सुरु गरौं!
+यहाँ काम सकिएपछि, तपाईंले आफ्नो स्पीड र एक्युरेसी ट्र्याक गर्ने वास्तविक टाइपिङ खेल बनाइसक्नुहुनेछ। अझ महत्त्वपूर्ण कुरा, तपाईंले हरेक इन्टरएक्टिभ वेबसाइटलाई शक्ति दिने आधारभूत अवधारणाहरू बुझ्नुहुनेछ। सुरु गरौं!
 
 ## प्रि-लेक्चर क्विज
 
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/21)
 
-## इभेन्ट-ड्राइभन प्रोग्रामिङ
+## इभेन्ट-ड्रिभन प्रोग्रामिङ
 
-तपाईंको मनपर्ने एप वा वेबसाइटको बारेमा सोच्नुहोस् - यसलाई जीवित र प्रतिक्रियात्मक बनाउने के हो? यो तपाईंले के गर्नुहुन्छ भन्ने कुरामा प्रतिक्रिया कसरी दिन्छ भन्ने कुरामा आधारित छ! प्रत्येक ट्याप, क्लिक, स्वाइप, वा कीस्ट्रोकले "इभेन्ट" सिर्जना गर्छ, र त्यहाँ वेब विकासको वास्तविक जादू हुन्छ।
+तपाईंको मनपर्ने एप वा वेबसाइटको बारेमा सोच्नुहोस् - यसले कसरी जीवित र प्रतिक्रियाशील महसुस गराउँछ? यो तपाईंले के गर्नुहुन्छ भन्ने कुरामा कसरी प्रतिक्रिया दिन्छ भन्ने कुरामा आधारित छ! प्रत्येक ट्याप, क्लिक, स्वाइप, वा कीस्ट्रोकले "इभेन्ट" सिर्जना गर्छ, र त्यहाँ नै वेब विकासको वास्तविक जादू हुन्छ।
 
-वेबको लागि प्रोग्रामिङलाई रोचक बनाउने कुरा यहाँ छ: हामीले कहिल्यै थाहा पाउँदैनौं कि कसैले त्यो बटन कहिले क्लिक गर्नेछ वा टेक्स्ट बक्समा टाइप गर्न सुरु गर्नेछ। उनीहरूले तुरुन्त क्लिक गर्न सक्छन्, पाँच मिनेट पर्खन सक्छन्, वा सायद कहिल्यै क्लिक नगर्न सक्छन्! यो अनिश्चितताले हामीलाई हाम्रो कोड कसरी लेख्ने भन्ने बारे फरक सोच्न बाध्य बनाउँछ।
+वेबको लागि प्रोग्रामिङलाई रोचक बनाउने कुरा के हो भने: हामीलाई कहिल्यै थाहा हुँदैन कि कसैले त्यो बटन कहिले क्लिक गर्नेछ वा टेक्स्ट बक्समा टाइप गर्न सुरु गर्नेछ। उनीहरूले तुरुन्तै क्लिक गर्न सक्छन्, पाँच मिनेट पर्खन सक्छन्, वा सायद कहिल्यै क्लिक नगर्न सक्छन्! यो अनिश्चितताले हामीलाई हाम्रो कोड कसरी लेख्ने भन्ने कुरामा फरक सोच्न बाध्य बनाउँछ।
 
-रिसिपी जस्तै माथिबाट तलसम्म चल्ने कोड लेख्नको सट्टा, हामीले कोड लेख्छौं जुन केही हुने प्रतीक्षा गर्छ। यो १८०० को दशकमा टेलिग्राफ अपरेटरहरूले आफ्नो मेसिनको छेउमा बस्ने तरिकासँग मिल्दोजुल्दो छ, तारबाट सन्देश आउँदा तुरुन्त प्रतिक्रिया दिन तयार।
+रेसिपी जस्तै माथिबाट तलसम्म चल्ने कोड लेख्नको सट्टा, हामी कोड लेख्छौं जुन केही हुने प्रतीक्षा गर्छ। यो १८०० को दशकमा टेलिग्राफ अपरेटरहरूले आफ्नो मेसिनको छेउमा बस्ने तरिकासँग मिल्दोजुल्दो छ, तारबाट सन्देश आउँदा तुरुन्तै प्रतिक्रिया दिन तयार।
 
-त्यसो भए "इभेन्ट" भनेको वास्तवमा के हो? सरल शब्दमा भन्नुपर्दा, यो केही हो जुन हुन्छ! जब तपाईं बटन क्लिक गर्नुहुन्छ - त्यो एक इभेन्ट हो। जब तपाईं अक्षर टाइप गर्नुहुन्छ - त्यो एक इभेन्ट हो। जब तपाईं आफ्नो माउस सार्नुहुन्छ - त्यो अर्को इभेन्ट हो।
+त्यसो भए "इभेन्ट" भनेको वास्तवमा के हो? सरल शब्दमा भन्नुपर्दा, यो केही हो जुन हुन्छ! तपाईंले बटन क्लिक गर्दा - त्यो इभेन्ट हो। तपाईंले अक्षर टाइप गर्दा - त्यो इभेन्ट हो। तपाईंले माउस सार्दा - त्यो अर्को इभेन्ट हो।
 
-इभेन्ट-ड्राइभन प्रोग्रामिङले हामीलाई सुन्न र प्रतिक्रिया दिनको लागि हाम्रो कोड सेटअप गर्न दिन्छ। हामीले विशेष कार्यहरू सिर्जना गर्छौं जसलाई **इभेन्ट लिस्नरहरू** भनिन्छ, जुन विशेष कुराहरू हुने प्रतीक्षा गर्छन्, त्यसपछि तिनीहरू हुँदा तुरुन्तै सक्रिय हुन्छन्।
+इभेन्ट-ड्रिभन प्रोग्रामिङले हामीलाई हाम्रो कोडलाई सुन्न र प्रतिक्रिया दिन सेटअप गर्न दिन्छ। हामीले विशेष प्रकारका कार्यहरू सिर्जना गर्छौं जसलाई **इभेन्ट लिस्नर** भनिन्छ, जुन केही विशेष घटना हुनको लागि प्रतीक्षा गर्छ, अनि त्यो हुँदा तुरुन्तै सक्रिय हुन्छ।
 
-इभेन्ट लिस्नरहरूलाई तपाईंको कोडको लागि डोरबेल भएको जस्तै सोच्नुहोस्। तपाईंले डोरबेल सेटअप गर्नुहुन्छ (`addEventListener()`), यसलाई कुन आवाज सुन्नु पर्ने हो भनेर भन्नुहुन्छ (जस्तै 'क्लिक' वा 'कीप्रेस'), र त्यसपछि कसैले यसलाई बजाउँदा के हुनुपर्छ भनेर निर्दिष्ट गर्नुहुन्छ (तपाईंको कस्टम फङ्सन)।
+इभेन्ट लिस्नरलाई तपाईंको कोडको लागि डोरबेल भएको जस्तो सोच्नुहोस्। तपाईंले डोरबेल सेटअप गर्नुहुन्छ (`addEventListener()`), यसलाई कुन आवाज सुन्ने भनेर बताउनुहुन्छ (जस्तै 'क्लिक' वा 'कीप्रेस'), अनि कसैले यसलाई बजाउँदा के हुनुपर्छ भनेर निर्दिष्ट गर्नुहुन्छ (तपाईंको कस्टम फङ्सन)।
 
 **इभेन्ट लिस्नरहरू यसरी काम गर्छन्:**
-- **सुन्छ** विशेष प्रयोगकर्ता क्रियाहरू जस्तै क्लिक, कीस्ट्रोक, वा माउस मूभमेन्ट
-- **कार्यान्वयन गर्छ** तपाईंको कस्टम कोड जब निर्दिष्ट इभेन्ट हुन्छ
-- **तुरुन्त प्रतिक्रिया दिन्छ** प्रयोगकर्ता इन्टरएक्शनहरूमा, सहज अनुभव सिर्जना गर्दै
-- **एकै तत्वमा** विभिन्न लिस्नरहरू प्रयोग गरेर धेरै इभेन्टहरू ह्यान्डल गर्छ
+- **सुन्छन्** विशेष प्रयोगकर्ता क्रियाकलापहरू जस्तै क्लिक, कीस्ट्रोक, वा माउस मूभमेन्ट
+- **तुरुन्तै कार्यान्वयन गर्छन्** जब निर्दिष्ट इभेन्ट हुन्छ
+- **प्रतिक्रिया दिन्छन्** प्रयोगकर्ता इन्टरएक्शनमा, सहज अनुभव सिर्जना गर्दै
+- **एकै तत्वमा** विभिन्न लिस्नरहरू प्रयोग गरेर धेरै इभेन्टहरू ह्यान्डल गर्छन्
 
-> **NOTE:** यो उल्लेख गर्न लायक छ कि इभेन्ट लिस्नरहरू सिर्जना गर्न धेरै तरिकाहरू छन्। तपाईंले एनोनिमस फङ्सनहरू प्रयोग गर्न सक्नुहुन्छ, वा नामित फङ्सनहरू सिर्जना गर्न सक्नुहुन्छ। तपाईंले विभिन्न सर्टकटहरू प्रयोग गर्न सक्नुहुन्छ, जस्तै `click` प्रोपर्टी सेट गर्नु, वा `addEventListener()` प्रयोग गर्नु। हाम्रो अभ्यासमा हामी `addEventListener()` र एनोनिमस फङ्सनहरूमा ध्यान केन्द्रित गर्नेछौं, किनकि यो सम्भवतः वेब डेभलपरहरूले प्रयोग गर्ने सबैभन्दा सामान्य प्रविधि हो। यो सबैभन्दा लचिलो पनि हो, किनकि `addEventListener()` सबै इभेन्टहरूको लागि काम गर्छ, र इभेन्ट नामलाई प्यारामिटरको रूपमा प्रदान गर्न सकिन्छ।
+> **NOTE:** इभेन्ट लिस्नरहरू सिर्जना गर्ने धेरै तरिकाहरू छन्। तपाईंले अनोनिमस फङ्सनहरू प्रयोग गर्न सक्नुहुन्छ, वा नामित फङ्सनहरू सिर्जना गर्न सक्नुहुन्छ। तपाईंले विभिन्न सर्टकटहरू प्रयोग गर्न सक्नुहुन्छ, जस्तै `click` प्रोपर्टी सेट गर्ने, वा `addEventListener()` प्रयोग गर्ने। हाम्रो अभ्यासमा हामी `addEventListener()` र अनोनिमस फङ्सनहरूमा ध्यान केन्द्रित गर्नेछौं, किनकि यो वेब डेभलपरहरूले सबैभन्दा धेरै प्रयोग गर्ने प्रविधि हो। यो सबैभन्दा लचिलो पनि हो, किनकि `addEventListener()` सबै इभेन्टहरूको लागि काम गर्छ, र इभेन्ट नामलाई पेरामिटरको रूपमा प्रदान गर्न सकिन्छ।
 
 ### सामान्य इभेन्टहरू
 
-जबकि वेब ब्राउजरहरूले सुन्नको लागि दर्जनौं विभिन्न इभेन्टहरू प्रदान गर्छन्, अधिकांश इन्टरएक्टिभ एप्लिकेसनहरूले केवल केही आवश्यक इभेन्टहरूमा निर्भर गर्छन्। यी कोर इभेन्टहरू बुझ्नाले तपाईंलाई परिष्कृत प्रयोगकर्ता इन्टरएक्शनहरू निर्माण गर्न आधार प्रदान गर्नेछ।
+जबकि वेब ब्राउजरहरूले सुन्नको लागि दर्जनौं विभिन्न इभेन्टहरू प्रदान गर्छन्, अधिकांश इन्टरएक्टिभ एप्लिकेसनहरू केवल केही आवश्यक इभेन्टहरूमा निर्भर गर्छन्। यी मुख्य इभेन्टहरू बुझ्नाले तपाईंलाई परिष्कृत प्रयोगकर्ता इन्टरएक्शनहरू निर्माण गर्न आधार प्रदान गर्नेछ।
 
-जब तपाईं एप्लिकेसन बनाउँदा सुन्नको लागि [दर्जनौं इभेन्टहरू](https://developer.mozilla.org/docs/Web/Events) उपलब्ध छन्। आधारभूत रूपमा प्रयोगकर्ताले पेजमा गरेको कुनै पनि कुराले इभेन्ट उठाउँछ, जसले तपाईंलाई उनीहरूले चाहेको अनुभव सुनिश्चित गर्न धेरै शक्ति दिन्छ। भाग्यवश, तपाईंलाई सामान्यतया केवल केही इभेन्टहरू चाहिन्छ। यहाँ केही सामान्य इभेन्टहरू छन् (जसमा दुई हामीले हाम्रो खेल बनाउँदा प्रयोग गर्नेछौं):
+[दर्जनौं इभेन्टहरू](https://developer.mozilla.org/docs/Web/Events) छन् जुन तपाईंले एप्लिकेसन बनाउँदा सुन्न सक्नुहुन्छ। आधारभूत रूपमा प्रयोगकर्ताले पेजमा गरेको कुनै पनि क्रियाकलापले इभेन्ट उठाउँछ, जसले तपाईंलाई उनीहरूले चाहेको अनुभव सुनिश्चित गर्न धेरै शक्ति दिन्छ। भाग्यवश, तपाईंलाई सामान्यतया केवल केही इभेन्टहरू चाहिन्छ। यहाँ केही सामान्य इभेन्टहरू छन् (जसमा हामीले हाम्रो खेल बनाउँदा प्रयोग गर्ने दुई इभेन्टहरू पनि समावेश छन्):
 
 | इभेन्ट | विवरण | सामान्य प्रयोग केसहरू |
 |-------|-------------|------------------|
-| `click` | प्रयोगकर्ताले केही क्लिक गर्यो | बटनहरू, लिंकहरू, इन्टरएक्टिभ तत्वहरू |
-| `contextmenu` | प्रयोगकर्ताले दायाँ माउस बटन क्लिक गर्यो | कस्टम राइट-क्लिक मेनुहरू |
-| `select` | प्रयोगकर्ताले केही टेक्स्ट हाइलाइट गर्यो | टेक्स्ट एडिटिङ, कपी अपरेसनहरू |
-| `input` | प्रयोगकर्ताले केही टेक्स्ट इनपुट गर्यो | फर्म भ्यालिडेसन, रियल-टाइम सर्च |
+| `click` | प्रयोगकर्ताले केही क्लिक गरे | बटनहरू, लिंकहरू, इन्टरएक्टिभ तत्वहरू |
+| `contextmenu` | प्रयोगकर्ताले दायाँ माउस बटन क्लिक गरे | कस्टम राइट-क्लिक मेनुहरू |
+| `select` | प्रयोगकर्ताले केही टेक्स्ट हाइलाइट गरे | टेक्स्ट एडिटिङ, कपी अपरेसनहरू |
+| `input` | प्रयोगकर्ताले केही टेक्स्ट इनपुट गरे | फर्म भ्यालिडेसन, रियल-टाइम सर्च |
 
 **यी इभेन्ट प्रकारहरू बुझ्दै:**
-- **ट्रिगर गर्छ** जब प्रयोगकर्ताहरूले तपाईंको पेजमा विशेष तत्वहरूसँग इन्टरएक्ट गर्छन्
-- **विस्तृत जानकारी प्रदान गर्छ** प्रयोगकर्ताको क्रियाको बारेमा इभेन्ट वस्तुहरू मार्फत
-- **सक्षम बनाउँछ** तपाईंलाई प्रतिक्रियात्मक, इन्टरएक्टिभ वेब एप्लिकेसनहरू सिर्जना गर्न
-- **सुसंगत रूपमा काम गर्छ** विभिन्न ब्राउजरहरू र उपकरणहरूमा
+- **ट्रिगर हुन्छन्** जब प्रयोगकर्ताले तपाईंको पेजका विशेष तत्वहरूसँग इन्टरएक्ट गर्छन्
+- **प्रदान गर्छन्** प्रयोगकर्ताको क्रियाकलापको विस्तृत जानकारी इभेन्ट वस्तुहरू मार्फत
+- **सक्षम बनाउँछन्** तपाईंलाई प्रतिक्रियाशील, इन्टरएक्टिभ वेब एप्लिकेसनहरू सिर्जना गर्न
+- **काम गर्छन्** विभिन्न ब्राउजर र उपकरणहरूमा निरन्तर
 
 ## खेल बनाउने
 
-अब तपाईंले इभेन्टहरू कसरी काम गर्छन् भन्ने कुरा बुझ्नुभयो, त्यस ज्ञानलाई अभ्यासमा राखेर केही उपयोगी बनाऔं। हामी इभेन्ट ह्यान्डलिङ प्रदर्शन गर्ने टाइपिङ स्पीड खेल बनाउनेछौं जसले तपाईंलाई महत्त्वपूर्ण डेभलपर सीप विकास गर्न मद्दत गर्नेछ।
+अब तपाईंले इभेन्टहरू कसरी काम गर्छन् भन्ने कुरा बुझ्नुभयो, त्यस ज्ञानलाई अभ्यासमा राखेर केही उपयोगी बनाऔं। हामी एउटा टाइपिङ स्पीड खेल बनाउनेछौं जसले इभेन्ट ह्यान्डलिङ प्रदर्शन गर्नेछ र तपाईंलाई महत्त्वपूर्ण डेभलपर सीप विकास गर्न मद्दत गर्नेछ।
 
-हामी खेल बनाउनेछौं जसले JavaScript मा इभेन्टहरू कसरी काम गर्छन् भनेर अन्वेषण गर्नेछ। हाम्रो खेलले खेलाडीको टाइपिङ सीप परीक्षण गर्नेछ, जुन सबै डेभलपरहरूले राख्नुपर्ने सबैभन्दा कम मूल्याङ्कन गरिएको सीप हो। रमाइलो तथ्य: आज हामीले प्रयोग गर्ने QWERTY किबोर्ड लेआउट वास्तवमा १८७० को दशकमा टाइपराइटरहरूको लागि डिजाइन गरिएको थियो - र राम्रो टाइपिङ सीप आज पनि प्रोग्रामरहरूको लागि उत्तिकै मूल्यवान छ! खेलको सामान्य प्रवाह यस प्रकार देखिनेछ:
+हामी एउटा खेल बनाउनेछौं जसले JavaScript मा इभेन्टहरू कसरी काम गर्छन् भन्ने कुरा अन्वेषण गर्नेछ। हाम्रो खेलले खेलाडीको टाइपिङ सीप परीक्षण गर्नेछ, जुन सबै डेभलपरहरूले राख्नुपर्ने सबैभन्दा कम मूल्याङ्कन गरिएको सीप हो। रोचक तथ्य: आज हामीले प्रयोग गर्ने QWERTY किबोर्ड लेआउट वास्तवमा १८७० को दशकमा टाइपराइटरहरूको लागि डिजाइन गरिएको थियो - र राम्रो टाइपिङ सीप आज पनि प्रोग्रामरहरूको लागि उत्तिकै मूल्यवान छ! खेलको सामान्य प्रवाह यस प्रकार देखिनेछ:
 
 ```mermaid
 flowchart TD
@@ -83,13 +83,13 @@ flowchart TD
 ```
 
 **हाम्रो खेल यसरी काम गर्नेछ:**
-- **सुरु हुन्छ** जब खेलाडीले स्टार्ट बटन क्लिक गर्छ र र्यान्डम कोट देखाउँछ
+- **सुरु हुन्छ** जब खेलाडीले स्टार्ट बटन क्लिक गर्छ र एउटा र्यान्डम कोट देखाउँछ
 - **ट्र्याक गर्छ** खेलाडीको टाइपिङ प्रगति शब्द-प्रति-शब्द रियल-टाइममा
-- **हाइलाइट गर्छ** हालको शब्द खेलाडीको ध्यान मार्गदर्शन गर्न
-- **तुरुन्त दृश्य प्रतिक्रिया प्रदान गर्छ** टाइपिङ त्रुटिहरूको लागि
-- **क्याल्कुलेट गर्छ** र कोट पूरा हुँदा कुल समय देखाउँछ
+- **हाइलाइट गर्छ** हालको शब्द खेलाडीको ध्यान केन्द्रित गर्न
+- **तुरुन्तै दृश्यात्मक प्रतिक्रिया दिन्छ** टाइपिङ त्रुटिहरूको लागि
+- **गणना गर्छ** र कोट पूरा हुँदा कुल समय देखाउँछ
 
-आउनुहोस्, हाम्रो खेल बनाऔं, र इभेन्टहरूको बारेमा सिकौं!
+आउनुहोस्, खेल बनाऔं र इभेन्टहरूको बारेमा सिकौं!
 
 ### फाइल संरचना
 
@@ -97,7 +97,7 @@ flowchart TD
 
 हामी केवल तीन फाइलहरू राखेर चीजहरू सरल बनाउनेछौं: `index.html` हाम्रो पेज संरचनाको लागि, `script.js` हाम्रो खेलको सम्पूर्ण तर्कको लागि, र `style.css` सबै कुरालाई राम्रो देखाउन। यो वेबको अधिकांश भागलाई शक्ति दिने क्लासिक त्रय हो!
 
-**कन्सोल वा टर्मिनल विन्डो खोल्नुहोस् र निम्न आदेश जारी गरेर आफ्नो कामको लागि नयाँ फोल्डर बनाउनुहोस्:**
+**कन्सोल वा टर्मिनल विन्डो खोल्दै नयाँ फोल्डर सिर्जना गर्नुहोस् र निम्न कमाण्ड जारी गर्नुहोस्:**
 
 ```bash
 # Linux or macOS
@@ -107,9 +107,9 @@ mkdir typing-game && cd typing-game
 md typing-game && cd typing-game
 ```
 
-**यी आदेशहरूले के गर्छन्:**
-- **नयाँ डाइरेक्टरी बनाउँछ** जसलाई `typing-game` भनिन्छ तपाईंको प्रोजेक्ट फाइलहरूको लागि
-- **नयाँ बनाइएको डाइरेक्टरीमा जान्छ** स्वचालित रूपमा
+**यी कमाण्डहरूले के गर्छन्:**
+- **नयाँ डाइरेक्टरी बनाउँछ** जसको नाम `typing-game` छ, तपाईंको प्रोजेक्ट फाइलहरूको लागि
+- **नयाँ बनाइएको डाइरेक्टरीमा स्वतः नेभिगेट गर्छ**
 - **सफा कार्यक्षेत्र सेटअप गर्छ** तपाईंको खेल विकासको लागि
 
 **भिजुअल स्टुडियो कोड खोल्नुहोस्:**
@@ -118,38 +118,38 @@ md typing-game && cd typing-game
 code .
 ```
 
-**यो आदेश:**
-- **भिजुअल स्टुडियो कोड सुरु गर्छ** हालको डाइरेक्टरीमा
+**यो कमाण्ड:**
+- **भिजुअल स्टुडियो कोड लन्च गर्छ** हालको डाइरेक्टरीमा
 - **तपाईंको प्रोजेक्ट फोल्डर खोल्छ** एडिटरमा
-- **तपाईंलाई आवश्यक पर्ने सबै विकास उपकरणहरूमा पहुँच प्रदान गर्छ**
+- **तपाईंलाई आवश्यक सबै विकास उपकरणहरूमा पहुँच प्रदान गर्छ**
 
-**भिजुअल स्टुडियो कोडमा फोल्डरमा तीन फाइलहरू निम्न नामहरूका साथ थप्नुहोस्:**
+**भिजुअल स्टुडियो कोडमा फोल्डरमा तीन फाइलहरू निम्न नामहरूमा थप्नुहोस्:**
 - `index.html` - तपाईंको खेलको संरचना र सामग्री समावेश गर्दछ
 - `script.js` - सम्पूर्ण खेल तर्क र इभेन्ट लिस्नरहरू ह्यान्डल गर्छ
-- `style.css` - दृश्य उपस्थिति र स्टाइल परिभाषित गर्छ
+- `style.css` - दृश्यात्मक उपस्थिति र स्टाइल परिभाषित गर्छ
 
 ## प्रयोगकर्ता इन्टरफेस बनाउनुहोस्
 
-अब हाम्रो खेलको सबै कार्यहरू हुने स्टेज बनाऔं! यसलाई स्पेसशिपको कन्ट्रोल प्यानल डिजाइन गर्ने जस्तै सोच्नुहोस् - हामीले सुनिश्चित गर्नुपर्छ कि हाम्रो खेलाडीलाई आवश्यक पर्ने सबै कुरा त्यहाँ छ।
+अब हाम्रो खेलको सम्पूर्ण क्रियाकलाप हुने स्टेज बनाऔं! यसलाई स्पेसशिपको कन्ट्रोल प्यानल डिजाइन गर्ने जस्तो सोच्नुहोस् - हामीले सुनिश्चित गर्नुपर्छ कि खेलाडीहरूले चाहिने सबै कुरा त्यहीँ छ जहाँ उनीहरूले अपेक्षा गर्छन्।
 
 आउनुहोस्, हाम्रो खेललाई वास्तवमा के चाहिन्छ भनेर पत्ता लगाऔं। यदि तपाईं टाइपिङ खेल खेल्दै हुनुहुन्थ्यो भने, तपाईंले स्क्रिनमा के देख्न चाहनुहुन्छ? यहाँ हामीलाई चाहिने कुरा हो:
 
 | UI तत्व | उद्देश्य | HTML तत्व |
 |------------|---------|-------------|
 | कोट डिस्प्ले | टाइप गर्नको लागि टेक्स्ट देखाउँछ | `<p>` `id="quote"` सहित |
-| सन्देश क्षेत्र | स्थिति र सफलताको सन्देश देखाउँछ | `<p>` `id="message"` सहित |
-| टेक्स्ट इनपुट | खेलाडीहरूले कोट टाइप गर्ने ठाउँ | `<input>` `id="typed-value"` सहित |
+| मेसेज क्षेत्र | स्टाटस र सफलता सन्देशहरू देखाउँछ | `<p>` `id="message"` सहित |
+| टेक्स्ट इनपुट | जहाँ खेलाडीहरूले कोट टाइप गर्छन् | `<input>` `id="typed-value"` सहित |
 | स्टार्ट बटन | खेल सुरु गर्छ | `<button>` `id="start"` सहित |
 
 **UI संरचना बुझ्दै:**
-- **सामग्रीलाई व्यवस्थित गर्छ** माथिबाट तलसम्म तार्किक रूपमा
-- **युनिक IDहरू प्रदान गर्छ** तत्वहरूलाई JavaScript टार्गेट गर्न
-- **स्पष्ट दृश्य पदानुक्रम प्रदान गर्छ** राम्रो प्रयोगकर्ता अनुभवको लागि
+- **सामग्रीलाई** माथिबाट तलसम्म तार्किक रूपमा व्यवस्थित गर्छ
+- **तत्वहरूलाई** JavaScript टार्गेटिङको लागि युनिक IDs प्रदान गर्छ
+- **स्पष्ट दृश्यात्मक पदानुक्रम प्रदान गर्छ** राम्रो प्रयोगकर्ता अनुभवको लागि
 - **सामाजिक HTML तत्वहरू समावेश गर्छ** पहुँचयोग्यताको लागि
 
-यी सबैलाई ID चाहिन्छ ताकि हामी तिनीहरूसँग हाम्रो JavaScript मा काम गर्न सकौं। हामीले सिर्जना गर्न लागेको CSS र JavaScript फाइलहरूको सन्दर्भ पनि थप्नेछौं।
+यी सबैलाई JavaScript मा काम गर्नको लागि IDs चाहिन्छ। हामीले सिर्जना गर्न लागेको CSS र JavaScript फाइलहरूको सन्दर्भ पनि थप्नेछौं।
 
-`index.html` नामको नयाँ फाइल बनाउनुहोस्। निम्न HTML थप्नुहोस्:
+`index.html` नामको नयाँ फाइल सिर्जना गर्नुहोस्। निम्न HTML थप्नुहोस्:
 
 ```html
 <!-- inside index.html -->
@@ -173,51 +173,51 @@ code .
 ```
 
 **यो HTML संरचनाले के हासिल गर्छ:**
-- **CSS स्टाइलशीट लिंक गर्छ** `<head>` मा स्टाइलिङको लागि
-- **स्पष्ट हेडिङ र निर्देशनहरू सिर्जना गर्छ** प्रयोगकर्ताहरूको लागि
-- **स्पेसिफिक ID सहित प्लेसहोल्डर प्याराग्राफहरू स्थापना गर्छ** गतिशील सामग्रीको लागि
+- **CSS स्टाइलशीटलाई लिंक गर्छ** `<head>` मा स्टाइलिङको लागि
+- **प्रयोगकर्ताहरूको लागि स्पष्ट हेडिङ र निर्देशनहरू सिर्जना गर्छ**
+- **विशिष्ट IDs सहित प्लेसहोल्डर प्याराग्राफहरू स्थापना गर्छ** गतिशील सामग्रीको लागि
 - **एक इनपुट फिल्ड समावेश गर्छ** पहुँचयोग्यता विशेषताहरू सहित
 - **स्टार्ट बटन प्रदान गर्छ** खेल ट्रिगर गर्न
 - **JavaScript फाइल लोड गर्छ** अन्त्यमा, इष्टतम प्रदर्शनको लागि
 
-### एप्लिकेसन सुरु गर्नुहोस्
+### एप्लिकेसन लन्च गर्नुहोस्
 
-विकासको क्रममा बारम्बार आफ्नो एप्लिकेसन परीक्षण गर्दा तपाईंले समस्या चाँडै पत्ता लगाउन सक्नुहुन्छ र वास्तविक समयमा आफ्नो प्रगति देख्न सक्नुहुन्छ। लाइभ सर्भर एक अमूल्य उपकरण हो जसले तपाईंले फाइलहरू बचत गर्दा स्वचालित रूपमा तपाईंको ब्राउजरलाई रिफ्रेस गर्छ, विकासलाई धेरै कुशल बनाउँछ।
+विकासको क्रममा बारम्बार तपाईंको एप्लिकेसन परीक्षण गर्दा तपाईंले समस्या चाँडै पत्ता लगाउन सक्नुहुन्छ र वास्तविक समयमा तपाईंको प्रगति देख्न सक्नुहुन्छ। लाइभ सर्भर एक अमूल्य उपकरण हो जसले तपाईंले फाइलहरू बचत गर्दा तपाईंको ब्राउजरलाई स्वतः रिफ्रेस गर्छ, विकासलाई धेरै कुशल बनाउँछ।
 
-सधैं उत्तम हुन्छ कि चीजहरू कस्तो देखिन्छ भनेर हेर्नको लागि क्रमिक रूपमा विकास गर्नुहोस्। आउनुहोस् हाम्रो एप्लिकेसन सुरु गरौं। भिजुअल स्टुडियो कोडको लागि [लाइभ सर्भर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) नामक एक अद्भुत एक्सटेन्सन छ जसले तपाईंको एप्लिकेसनलाई स्थानीय रूपमा होस्ट गर्नेछ र तपाईंले फाइलहरू बचत गर्दा ब्राउजरलाई रिफ्रेस गर्नेछ।
+सधैं उत्तम हुन्छ कि विकास क्रमिक रूपमा गरौं र चीजहरू कस्तो देखिन्छ हेर्नुहोस्। हाम्रो एप्लिकेसन लन्च गरौं। भिजुअल स्टुडियो कोडको लागि [लाइभ सर्भर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) नामक एक अद्भुत एक्सटेन्सन छ जसले तपाईंको एप्लिकेसनलाई स्थानीय रूपमा होस्ट गर्नेछ र तपाईंले फाइलहरू बचत गर्दा ब्राउजरलाई रिफ्रेस गर्नेछ।
 
-**[लाइभ सर्भर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) स्थापना गर्नुहोस् लिंकमा गएर र इन्स्टल क्लिक गरेर:**
+**[लाइभ सर्भर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) इन्स्टल गर्नुहोस् र लिंकमा क्लिक गरेर इन्स्टल गर्नुहोस्:**
 
-**स्थापनाको क्रममा के हुन्छ:**
+**इन्स्टलेसनको क्रममा के हुन्छ:**
 - **तपाईंको ब्राउजरलाई भिजुअल स्टुडियो कोड खोल्न प्रेरित गर्छ**
-- **तपाईंलाई एक्सटेन्सन स्थापना प्रक्रियामा मार्गदर्शन गर्छ**
+- **एक्सटेन्सन इन्स्टलेसन प्रक्रियामा मार्गदर्शन गर्छ**
 - **भिजुअल स्टुडियो कोडलाई पुनः सुरु गर्न आवश्यक हुन सक्छ** सेटअप पूरा गर्न
 
-**स्थापना भएपछि, भिजुअल स्टुडियो कोडमा, Ctrl-Shift-P (वा Cmd-Shift-P) क्लिक गर्नुहोस् कमाण्ड प्यालेट खोल्न:**
+**इन्स्टल भएपछि, भिजुअल स्टुडियो कोडमा, Ctrl-Shift-P (वा Cmd-Shift-P) क्लिक गरेर कमाण्ड प्यालेट खोल्नुहोस्:**
 
 **कमाण्ड प्यालेट बुझ्दै:**
-- **भिजुअल स्टुडियो कोडका सबै कमाण्डहरूमा छिटो पहुँच प्रदान गर्छ**
+- **भिजुअल स्टुडियो कोडका सबै कमाण्डहरूमा** छिटो पहुँच प्रदान गर्छ
 - **टाइप गर्दा कमाण्डहरू खोज्छ**
-- **छिटो विकासको लागि किबोर्ड सर्टकटहरू प्रदान गर्छ**
+- **छिटो विकासको लागि** किबोर्ड सर्टकटहरू प्रदान गर्छ
 
 **"Live Server: Open with Live Server" टाइप गर्नुहोस्:**
 
 **लाइभ सर्भरले के गर्छ:**
 - **तपाईंको प्रोजेक्टको लागि स्थानीय विकास सर्भर सुरु गर्छ**
-- **तपाईंले फाइलहरू बचत गर्दा स्वचालित रूपमा ब्राउजर रिफ्रेस गर्छ**
-- **तपाईंको फाइलहरू स्थानीय URL (सामान्यतया `localhost:5500`) बाट सर्भ गर्छ**
+- **तपाईंले फाइलहरू बचत गर्दा ब्राउजरलाई स्वतः रिफ्रेस गर्छ**
+- **तपाईंको फाइलहरूलाई स्थानीय URL (सामान्यतया `localhost:5500`) बाट सर्भ गर्छ**
 
 **ब्राउजर खोल्नुहोस् र `https://localhost:5500` मा नेभिगेट गर्नुहोस्:**
 
-अब तपाईंले बनाएको पेज देख्न सक्नुहुन्छ! आउनुहोस् केही कार्यक्षमता थपौं।
+अब तपाईंले बनाएको पेज देख्न सक्नुहुन्छ! केही कार्यक्षमता थपौं।
 
 ## CSS थप्नुहोस्
 
-अब चीजहरू राम्रो देखिने बनाऔं! दृश्य प्रतिक्रिया कम्प्युटिङको प्रारम्भिक दिनदेखि नै प्रयोगकर्ता इन्टरफेसहरूको लागि महत्त्वपूर्ण छ। १९८० को दशकमा, अनुसन्धानकर्ताहरूले पत्ता लगाए कि तुरुन्त दृश्य प्रतिक्रिया प्रयोगकर्ता प्रदर्शनलाई नाटकीय रूपमा सुधार गर्छ र त्रुटिहरू कम गर्छ। यही कुरा हामी सिर्जना गर्न गइरहेका छौं।
+अब चीजहरू राम्रो देखाऔं! दृश्यात्मक प्रतिक्रिया कम्प्युटिङको सुरुवाती दिनदेखि नै प्रयोगकर्ता इन्टरफेसहरूको लागि महत्त्वपूर्ण भएको छ। १९८० को दशकमा, अनुसन्धानकर्ताहरूले पत्ता लगाए कि तत्काल दृश्यात्मक प्रतिक्रिया प्रयोगकर्ताको प्रदर्शनलाई नाटकीय रूपमा सुधार गर्छ र त्रुटिहरू कम गर्छ। यही कुरा हामी सिर्जना गर्नेछौं।
 
-हाम्रो खेलले के भइरहेको छ भन्ने कुरामा स्पष्ट हुनुपर्छ। खेलाडीहरूले तुरुन्तै थाहा पाउनुपर्छ कि कुन शब्द टाइप गर्नुपर्ने हो, र यदि उनीहरूले गल्ती गरे भने, उनीहरूले तुरुन्तै देख्नुपर्छ। आउनुहोस् केही सरल तर प्रभावकारी स्टाइलिङ बनाऔं:
+हाम्रो खेलले के भइरहेको छ भन्ने कुरामा स्पष्ट हुनुपर्छ। खेलाडीहरूले तुरुन्तै थाहा पाउनुपर्छ कि कुन शब्द टाइप गर्नुपर्ने हो, र यदि उनीहरूले गल्ती गरे भने, उनीहरूले तुरुन्तै देख्नुपर्छ। केही सरल तर प्रभावकारी स्टाइलिङ सिर्जना गरौं:
 
-`style.css` नामको नयाँ फाइल बनाउनुहोस् र निम्न सिंट्याक्स थप्नुहोस्।
+`style.css` नामको नयाँ फाइल सिर्जना गर्नुहोस् र निम्न सिंट्याक्स थप्नुहोस्।
 
 ```css
 /* inside style.css */
@@ -232,29 +232,29 @@ code .
 ```
 
 **यी CSS क्लासहरू बुझ्दै:**
-- **हालको शब्दलाई हाइलाइट गर्छ** स्पष्ट दृश्य मार्गदर्शनको लागि पहेँलो पृष्ठभूमिसँग
-- **टाइपिङ त्रुटिहरू संकेत गर्छ** हल्का कोरल पृष्ठभूमि रंगको साथ
-- **तुरुन्त प्रतिक्रिया प्रदान गर्छ** प्रयोगकर्ताको टाइपिङ प्रवाहलाई बाधा नपुर्‍याई
-- **विपरीत रंगहरू प्रयोग गर्छ** पहुँचयोग्यता र स्पष्ट दृश्य सञ्चारको लागि
+- **हालको शब्दलाई हाइलाइट गर्छ** स्पष्ट दृश्यात्मक मार्गदर्शनको लागि पहेँलो पृष्ठभूमि सहित
+- **टाइपिङ त्रुटिहरूलाई संकेत गर्छ** हल्का कोरल पृष्ठभूमि रंगको साथ
+- **तुरुन्तै प्रतिक्रिया प्रदान गर्छ** प्रयोगकर्ताको टाइपिङ प्रवाहलाई बाधा नपुर्‍याई
+- **पहुंचयोग्यताको लागि** र स्पष्ट दृश्यात्मक सञ्चारको लागि विरोधाभासी रंगहरू प्रयोग गर्छ
 
-✅ CSS को कुरा गर्दा तपाईं आफ्नो पेजलाई जस्तो चाहनुहुन्छ त्यस्तै लेआउट गर्न सक्नुहुन्छ। अलिकति समय लिनुहोस् र पेजलाई अझ आकर्षक बनाउनुहोस्:
+✅ CSS को कुरा गर्दा तपाईं आफ्नो पेजलाई जस्तो चाहनुहुन्छ त्यस्तै लेआउट गर्न सक्नुहुन्छ। अलिकति समय निकालेर पेजलाई अझ आकर्षक बनाउनुहोस्:
 
-- फरक फन्ट रोज्नुहोस्
+- फरक फन्ट चयन गर्नुहोस्
 - हेडरहरूलाई रंग दिनुहोस्
 - वस्तुहरूलाई पुनः आकार दिनुहोस्
 
 ## JavaScript
 
-अब रोचक कुरा सुरु हुन्छ! 🎉 हामीसँग हाम्रो HTML संरचना र CSS स्टाइलिङ छ, तर अहिले हाम्रो खेल एउटा सुन्दर कार जस्तै छ जसमा इन्ज
+अब चाखलाग्दो कुरा सुरु हुन्छ! 🎉 हामीसँग हाम्रो HTML संरचना र CSS स्टाइलिङ छ, तर अहिले हाम्रो खेल एउटा सुन्दर कार
 | उद्धरणहरूको सूची | खेलका लागि सबै सम्भावित उद्धरणहरू भण्डारण गर्नुहोस् | `['उद्धरण १', 'उद्धरण २', ...]` |
-| शब्दहरूको सूची | हालको उद्धरणलाई छुट्टाछुट्टै शब्दहरूमा विभाजन गर्नुहोस् | `['जब', 'तपाईं', 'सँग', ...]` |
+| शब्दहरूको सूची | हालको उद्धरणलाई व्यक्तिगत शब्दहरूमा विभाजन गर्नुहोस् | `['जब', 'तपाईं', 'सँग', ...]` |
 | शब्द सूचकांक | खेलाडीले कुन शब्द टाइप गरिरहेको छ ट्र्याक गर्नुहोस् | `0, 1, 2, 3...` |
 | सुरु समय | स्कोरिङको लागि बितेको समय गणना गर्नुहोस् | `Date.now()` |
 
 **हामीलाई हाम्रो UI तत्वहरूको सन्दर्भ पनि चाहिन्छ:**
 | तत्व | ID | उद्देश्य |
 |------|----|---------|
-| पाठ इनपुट | `typed-value` | जहाँ खेलाडीहरूले टाइप गर्छन् |
+| पाठ इनपुट | `typed-value` | जहाँ खेलाडीले टाइप गर्छन् |
 | उद्धरण प्रदर्शन | `quote` | टाइप गर्न उद्धरण देखाउँछ |
 | सन्देश क्षेत्र | `message` | स्थिति अपडेटहरू देखाउँछ |
 
@@ -281,36 +281,36 @@ const messageElement = document.getElementById('message');
 const typedValueElement = document.getElementById('typed-value');
 ```
 
-**यस सेटअप कोडले के हासिल गर्छ भन्ने कुरा टुक्रा-टुक्रामा बुझौं:**
-- **भण्डारण गर्छ** Sherlock Holmes का उद्धरणहरूको सूची `const` प्रयोग गरेर किनभने उद्धरणहरू परिवर्तन हुँदैनन्
-- **सुरु गर्छ** ट्र्याकिङ भेरिएबलहरू `let` प्रयोग गरेर किनभने यी मानहरू खेलको क्रममा अपडेट हुन्छन्
-- **सङ्कलन गर्छ** DOM तत्वहरूको सन्दर्भ `document.getElementById()` प्रयोग गरेर प्रभावकारी पहुँचको लागि
-- **सेटअप गर्छ** खेलको सम्पूर्ण कार्यक्षमता स्पष्ट र वर्णनात्मक भेरिएबल नामहरूको साथ
-- **व्यवस्थित गर्छ** सम्बन्धित डेटा र तत्वहरू तार्किक रूपमा ताकि कोड मर्मत गर्न सजिलो होस्
+**यो सेटअप कोडले के हासिल गर्छ भन्ने कुरा तोड्दै:**
+- उद्धरणहरू परिवर्तन नहुने भएकाले `const` प्रयोग गरेर शर्लक होम्स उद्धरणहरूको सूची **भण्डारण** गर्दछ
+- खेलको क्रममा यी मानहरू अपडेट हुने भएकाले `let` प्रयोग गरेर ट्र्याकिङ भेरिएबलहरू **सुरु** गर्दछ
+- DOM तत्वहरूको सन्दर्भहरू **क्याप्चर** गर्दछ `document.getElementById()` प्रयोग गरेर प्रभावकारी पहुँचको लागि
+- स्पष्ट र वर्णनात्मक भेरिएबल नामहरूको साथ सबै खेल कार्यक्षमता **सेटअप** गर्दछ
+- सम्बन्धित डेटा र तत्वहरू **व्यवस्थित** गर्दछ कोड मर्मतलाई सजिलो बनाउन
 
 ✅ आफ्नो खेलमा थप उद्धरणहरू थप्न अगाडि बढ्नुहोस्
 
-> 💡 **प्रो टिप**: हामी `document.getElementById()` प्रयोग गरेर तत्वहरूलाई जबसुकै कोडमा पुनः प्राप्त गर्न सक्छौं। किनभने हामी यी तत्वहरूलाई नियमित रूपमा सन्दर्भ गर्नेछौं, हामी स्ट्रिङ लिटरलहरूमा टाइपोहरूबाट बच्न `const` प्रयोग गर्नेछौं। [Vue.js](https://vuejs.org/) वा [React](https://reactjs.org/) जस्ता फ्रेमवर्कहरूले तपाईंलाई आफ्नो कोडलाई केन्द्रित गर्न मद्दत गर्न सक्छ।
+> 💡 **प्रो टिप**: हामीले `document.getElementById()` प्रयोग गरेर कोडमा जबसुकै तत्वहरू पुनः प्राप्त गर्न सक्छौं। किनकि हामीले यी तत्वहरूलाई नियमित रूपमा सन्दर्भ गर्नुपर्नेछ, हामी स्ट्रिङ लिटरलहरूमा टाइपोग्राफिकल त्रुटिहरूबाट बच्नका लागि स्थिरांकहरू प्रयोग गर्नेछौं। [Vue.js](https://vuejs.org/) वा [React](https://reactjs.org/) जस्ता फ्रेमवर्कहरूले तपाईंलाई आफ्नो कोडलाई केन्द्रित गर्न मद्दत गर्न सक्छ।
 >
-**यो दृष्टिकोण किन राम्रोसँग काम गर्छ:**
-- **स्पेलिङ त्रुटिहरू रोक्छ** जब तत्वहरूलाई बारम्बार सन्दर्भ गरिन्छ
-- **कोड पढ्न सजिलो बनाउँछ** वर्णनात्मक स्थिर नामहरूको साथ
-- **IDE समर्थन सुधार गर्छ** ऑटो कम्प्लीट र त्रुटि जाँचको साथ
-- **पुनः संरचना गर्न सजिलो बनाउँछ** यदि पछि तत्व ID परिवर्तन हुन्छ भने
+**यो दृष्टिकोण किन यति राम्रोसँग काम गर्छ:**
+- **स्पष्टता** प्रदान गर्दछ जब तत्वहरू बारम्बार सन्दर्भ गरिन्छ
+- **कोड पढ्न सजिलो बनाउँछ** वर्णनात्मक स्थिरांक नामहरूको साथ
+- **IDE समर्थन सुधार गर्दछ** स्वतः पूर्ण र त्रुटि जाँचको साथ
+- **पुनः संरचना गर्न सजिलो बनाउँछ** यदि पछि तत्व ID परिवर्तन हुन्छ
 
 `const`, `let` र `var` प्रयोग गर्नेबारे भिडियो हेर्न एक मिनेट समय लिनुहोस्
 
-[![भेरिएबलका प्रकारहरू](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "भेरिएबलका प्रकारहरू")
+[![भेरिएबल प्रकारहरू](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "भेरिएबल प्रकारहरू")
 
 > 🎥 माथिको छवि क्लिक गरेर भेरिएबलबारे भिडियो हेर्नुहोस्।
 
 ### सुरु गर्ने तर्क थप्नुहोस्
 
-अब सबै कुरा मिल्न थाल्छ! 🚀 तपाईं आफ्नो पहिलो वास्तविक इभेन्ट लिस्नर लेख्न जाँदै हुनुहुन्छ, र "स्टार्ट" बटन क्लिक गर्दा तपाईंको कोडले प्रतिक्रिया दिने कुरा देख्दा केही सन्तोषजनक महसुस हुन्छ।
+अब सबै कुरा मिल्न थाल्छ! 🚀 तपाईं आफ्नो पहिलो वास्तविक इभेन्ट लिस्नर लेख्न जाँदै हुनुहुन्छ, र कोडले बटन क्लिकमा प्रतिक्रिया देखाउँदा केही सन्तोषजनक महसुस हुन्छ।
 
-सोच्नुहोस्: कतै बाहिर, कुनै खेलाडीले "स्टार्ट" बटन क्लिक गर्न जाँदैछ, र तपाईंको कोडले त्यसको लागि तयार हुनुपर्छ। हामीलाई थाहा छैन उनीहरूले कहिले क्लिक गर्नेछन् - तुरुन्तै, वा कफी लिन गएपछि - तर जब उनीहरूले क्लिक गर्छन्, तपाईंको खेल जीवन्त हुन्छ।
+सोच्नुहोस्: कतै बाहिर, एक खेलाडीले "सुरु" बटन क्लिक गर्न जाँदैछन्, र तपाईंको कोडले उनीहरूको लागि तयार हुनुपर्छ। हामीलाई थाहा छैन उनीहरूले कहिले क्लिक गर्नेछन् - तुरुन्तै हुन सक्छ, कफी लिन गएपछि हुन सक्छ - तर जब उनीहरूले क्लिक गर्छन्, तपाईंको खेल जीवन्त हुन्छ।
 
-जब प्रयोगकर्ताले `start` क्लिक गर्छ, हामीले उद्धरण चयन गर्न, प्रयोगकर्ता इन्टरफेस सेटअप गर्न, र हालको शब्द र समय ट्र्याकिङ सेटअप गर्न आवश्यक छ। तल तपाईंले थप्नुपर्ने JavaScript छ; हामी स्क्रिप्ट ब्लकपछि यसलाई छलफल गर्छौं।
+जब प्रयोगकर्ताले `start` क्लिक गर्छ, हामीले उद्धरण चयन गर्न, प्रयोगकर्ता इन्टरफेस सेटअप गर्न, र हालको शब्द र समय ट्र्याकिङ सेटअप गर्न आवश्यक छ। तल तपाईंले थप्नुपर्ने JavaScript छ; हामी यसलाई स्क्रिप्ट ब्लकपछि छलफल गर्छौं।
 
 ```javascript
 // at the end of script.js
@@ -345,35 +345,35 @@ document.getElementById('start').addEventListener('click', () => {
 });
 ```
 
-**कोडलाई तार्किक खण्डहरूमा टुक्रा-टुक्रा गरौं:**
+**कोडलाई तार्किक खण्डहरूमा तोड्दै:**
 
 **📊 शब्द ट्र्याकिङ सेटअप:**
 - **चयन गर्छ** `Math.floor()` र `Math.random()` प्रयोग गरेर विविधताको लागि एउटा र्यान्डम उद्धरण
-- **रूपान्तरण गर्छ** उद्धरणलाई छुट्टाछुट्टै शब्दहरूको सूचीमा `split(' ')` प्रयोग गरेर
-- **रीसेट गर्छ** `wordIndex` लाई 0 मा किनभने खेलाडीहरू पहिलो शब्दबाट सुरु गर्छन्
-- **तयार गर्छ** खेलको अवस्था नयाँ चरणको लागि
+- **रूपान्तरण गर्छ** उद्धरणलाई व्यक्तिगत शब्दहरूको सूचीमा `split(' ')` प्रयोग गरेर
+- **रीसेट गर्छ** `wordIndex` लाई 0 मा किनकि खेलाडी पहिलो शब्दबाट सुरु गर्छन्
+- **तयार गर्छ** खेलको अवस्था नयाँ राउन्डको लागि
 
 **🎨 UI सेटअप र प्रदर्शन:**
 - **सिर्जना गर्छ** `<span>` तत्वहरूको सूची, प्रत्येक शब्दलाई व्यक्तिगत शैलीको लागि र्याप गर्दै
 - **जोड्छ** span तत्वहरूलाई एकल स्ट्रिङमा प्रभावकारी DOM अपडेटको लागि
 - **हाइलाइट गर्छ** पहिलो शब्दलाई `highlight` CSS क्लास थपेर
-- **पछिल्लो खेल सन्देशहरू हटाउँछ** ताकि सफा सुरुवात होस्
+- **पछिल्लो खेल सन्देशहरू मेट्छ** सफा स्लेट प्रदान गर्न
 
 **⌨️ टेक्स्टबक्स तयारी:**
-- **अस्तित्वमा रहेको पाठ हटाउँछ** इनपुट फिल्डमा
-- **फोकस सेट गर्छ** टेक्स्टबक्समा ताकि खेलाडीहरू तुरुन्तै टाइप गर्न सुरु गर्न सकून्
+- **मेट्छ** इनपुट फिल्डमा कुनै पनि विद्यमान पाठ
+- **फोकस सेट गर्छ** टेक्स्टबक्समा ताकि खेलाडी तुरुन्तै टाइप गर्न सुरु गर्न सकून्
 - **इनपुट क्षेत्र तयार गर्छ** नयाँ खेल सत्रको लागि
 
 **⏱️ टाइमर सुरुवात:**
-- **हालको टाइमस्ट्याम्प सङ्कलन गर्छ** `new Date().getTime()` प्रयोग गरेर
-- **टाइपिङ गति र पूरा गर्ने समयको सही गणना सक्षम बनाउँछ**
-- **प्रदर्शन ट्र्याकिङ सुरु गर्छ** खेल सत्रको लागि
+- **क्याप्चर गर्छ** हालको टाइमस्ट्याम्प `new Date().getTime()` प्रयोग गरेर
+- **सटीक गणना सक्षम गर्छ** टाइपिङ गति र पूरा गर्ने समयको
+- **सुरु गर्छ** खेल सत्रको लागि प्रदर्शन ट्र्याकिङ
 
 ### टाइपिङ तर्क थप्नुहोस्
 
-यहाँ हामी हाम्रो खेलको मुख्य भागलाई सम्बोधन गर्दैछौं! यदि यो सुरुमा धेरै जस्तो लाग्छ भने चिन्ता नगर्नुहोस् - हामी प्रत्येक भागलाई व्याख्या गर्नेछौं, र अन्त्यमा तपाईंले यो सबै तार्किक देख्नुहुनेछ।
+यहाँ हामी हाम्रो खेलको मुटु सम्हाल्छौं! यदि यो सुरुमा धेरै जस्तो लाग्छ भने चिन्ता नगर्नुहोस् - हामी प्रत्येक भागमा हिँड्नेछौं, र अन्त्यमा, तपाईंले यो सबै तार्किक देख्नुहुनेछ।
 
-हामी यहाँ निर्माण गर्दैछौं के भने धेरै परिष्कृत छ: जब कसैले अक्षर टाइप गर्छ, हाम्रो कोडले उनीहरूले के टाइप गरे जाँच गर्नेछ, उनीहरूलाई प्रतिक्रिया दिनेछ, र के गर्नुपर्ने निर्णय गर्नेछ। यो 1970 को दशकमा WordStar जस्ता प्रारम्भिक वर्ड प्रोसेसरहरूले टाइपिस्टहरूलाई वास्तविक समय प्रतिक्रिया प्रदान गर्ने तरिकासँग मिल्दोजुल्दो छ।
+हामी यहाँ निर्माण गर्दैछौं केहि परिष्कृत: जब कसैले अक्षर टाइप गर्छ, हाम्रो कोडले उनीहरूले के टाइप गरे जाँच गर्नेछ, उनीहरूलाई प्रतिक्रिया दिनेछ, र के गर्नुपर्ने निर्णय गर्नेछ। यो 1970 को दशकमा WordStar जस्ता प्रारम्भिक वर्ड प्रोसेसरहरूले टाइपिस्टहरूलाई वास्तविक समय प्रतिक्रिया प्रदान गर्ने तरिकासँग मिल्दोजुल्दो छ।
 
 ```javascript
 // at the end of script.js
@@ -412,9 +412,9 @@ typedValueElement.addEventListener('input', () => {
 });
 ```
 
-**टाइपिङ तर्कको प्रवाह बुझ्दै:**
+**टाइपिङ तर्क प्रवाह बुझ्दै:**
 
-यो फङ्क्सनले सबैभन्दा विशिष्ट अवस्थाबाट सामान्य अवस्थासम्मको अवस्था जाँच गर्ने "वाटरफल" दृष्टिकोण प्रयोग गर्छ। प्रत्येक परिदृश्यलाई टुक्रा-टुक्रामा बुझौं:
+यो फङ्सनले सबैभन्दा विशिष्टदेखि सामान्यसम्मका अवस्थाहरू जाँच गर्दै वाटरफल दृष्टिकोण प्रयोग गर्छ। प्रत्येक परिदृश्यलाई तोडौं:
 
 ```mermaid
 flowchart TD
@@ -428,51 +428,51 @@ flowchart TD
     G -->|No| I[Show error styling]
 ```
 
-**🏁 उद्धरण पूरा (परिदृश्य १):**
-- **जाँच गर्छ** यदि टाइप गरिएको मान हालको शब्दसँग मेल खान्छ र हामी अन्तिम शब्दमा छौं
-- **गणना गर्छ** बितेको समय सुरु समयबाट हालको समय घटाएर
+**🏁 उद्धरण पूरा भयो (परिदृश्य १):**
+- **जाँच गर्छ** कि टाइप गरिएको मान हालको शब्दसँग मेल खान्छ र हामी अन्तिम शब्दमा छौं
+- **गणना गर्छ** सुरु समयबाट हालको समय घटाएर बितेको समय
 - **मिलिसेकेन्डलाई सेकेन्डमा रूपान्तरण गर्छ** 1,000 ले भाग गरेर
-- **बधाई सन्देश देखाउँछ** पूरा गर्ने समयको साथ
+- **प्रदर्शन गर्छ** बधाई सन्देश पूरा गर्ने समयको साथ
 
-**✅ शब्द पूरा (परिदृश्य २):**
+**✅ शब्द पूरा भयो (परिदृश्य २):**
 - **पत्ता लगाउँछ** शब्द पूरा भएको जब इनपुट स्पेसमा समाप्त हुन्छ
-- **प्रमाणित गर्छ** कि ट्रिम गरिएको इनपुट हालको शब्दसँग ठ्याक्कै मेल खान्छ
-- **इनपुट फिल्ड खाली गर्छ** अर्को शब्दको लागि
+- **मान्य बनाउँछ** कि ट्रिम गरिएको इनपुट हालको शब्दसँग ठीक मेल खान्छ
+- **इनपुट फिल्ड मेट्छ** अर्को शब्दको लागि
 - **अगाडि बढ्छ** अर्को शब्दमा `wordIndex` बढाएर
 - **दृश्य हाइलाइटिङ अपडेट गर्छ** सबै क्लासहरू हटाएर र नयाँ शब्दलाई हाइलाइट गरेर
 
-**📝 टाइपिङ जारी (परिदृश्य ३):**
-- **प्रमाणित गर्छ** कि हालको शब्दले अहिलेसम्म टाइप गरिएको कुराबाट सुरु हुन्छ
-- **त्रुटि शैली हटाउँछ** ताकि इनपुट सही छ भनेर देखाउन सकियोस्
+**📝 टाइपिङ प्रगति (परिदृश्य ३):**
+- **पुष्टि गर्छ** कि हालको शब्दले अहिलेसम्म टाइप गरिएको कुराबाट सुरु हुन्छ
+- **कुनै पनि त्रुटि शैली हटाउँछ** इनपुट सही छ भनेर देखाउन
 - **टाइपिङ जारी राख्न अनुमति दिन्छ** बिना अवरोध
 
 **❌ त्रुटि अवस्था (परिदृश्य ४):**
-- **ट्रिगर गर्छ** जब टाइप गरिएको पाठ अपेक्षित शब्दको सुरुवातसँग मेल खाँदैन
-- **त्रुटि CSS क्लास लागू गर्छ** तत्काल दृश्य प्रतिक्रिया प्रदान गर्न
-- **खेलाडीहरूलाई छिटो त्रुटि पहिचान गर्न र सुधार गर्न मद्दत गर्छ**
+- **ट्रिगर गर्छ** जब टाइप गरिएको पाठले अपेक्षित शब्दको सुरुवातसँग मेल खाँदैन
+- **त्रुटि CSS क्लास लागू गर्छ** तुरुन्त दृश्य प्रतिक्रिया प्रदान गर्न
+- **मदत गर्छ** खेलाडीहरूलाई छिटो त्रुटिहरू पहिचान गर्न र सुधार गर्न
 
 ## आफ्नो एप्लिकेसन परीक्षण गर्नुहोस्
 
-तपाईंले के हासिल गर्नुभयो हेर्नुहोस्! 🎉 तपाईंले इभेन्ट-ड्रिभन प्रोग्रामिङ प्रयोग गरेर स्क्र्याचबाट वास्तविक, काम गर्ने टाइपिङ खेल निर्माण गर्नुभयो। यसलाई सराहना गर्न एक क्षण लिनुहोस् - यो सानो उपलब्धि होइन!
+हेर्नुहोस् तपाईंले के हासिल गर्नुभयो! 🎉 तपाईंले इभेन्ट-ड्राइभन प्रोग्रामिङ प्रयोग गरेर स्क्र्याचबाट वास्तविक, काम गर्ने टाइपिङ खेल निर्माण गर्नुभयो। यसलाई सराहना गर्न एक क्षण लिनुहोस् - यो सानो उपलब्धि होइन!
 
-अब परीक्षण चरण आउँछ! के यो अपेक्षित रूपमा काम गर्नेछ? के हामीले केही छुटायौं? यहाँ कुरा छ: यदि केही कुरा तुरुन्तै पूर्ण रूपमा काम गर्दैन भने, त्यो पूर्ण रूपमा सामान्य हो। अनुभवी विकासकर्ताहरूले नियमित रूपमा आफ्नो कोडमा बगहरू फेला पार्छन्। यो विकास प्रक्रियाको हिस्सा हो!
+अब परीक्षण चरण आउँछ! के यो अपेक्षाकृत काम गर्नेछ? के हामीले केही छुटायौं? यहाँ कुरा छ: यदि केहि तुरुन्तै पूर्ण रूपमा काम गर्दैन भने, त्यो पूर्ण रूपमा सामान्य हो। अनुभवी विकासकर्ताहरूले नियमित रूपमा आफ्नो कोडमा बगहरू पाउँछन्। यो विकास प्रक्रियाको हिस्सा हो!
 
-`start` मा क्लिक गर्नुहोस्, र टाइप गर्न सुरु गर्नुहोस्! यो पहिले देखिएको एनिमेसन जस्तै देखिनुपर्छ।
+`start` मा क्लिक गर्नुहोस्, र टाइप गर्न सुरु गर्नुहोस्! यो पहिले देखिएको एनिमेसन जस्तै देखिनु पर्छ।
 
-![खेलको क्रियाशीलता एनिमेसन](../../../../4-typing-game/images/demo.gif)
+![खेलको एनिमेसन](../../../../4-typing-game/images/demo.gif)
 
 **तपाईंको एप्लिकेसनमा के परीक्षण गर्ने:**
 - **पुष्टि गर्छ** कि Start क्लिक गर्दा र्यान्डम उद्धरण देखिन्छ
-- **पक्का गर्छ** कि टाइप गर्दा हालको शब्द सही रूपमा हाइलाइट हुन्छ
+- **पुष्टि गर्छ** कि टाइप गर्दा हालको शब्द सही रूपमा हाइलाइट हुन्छ
 - **जाँच गर्छ** कि गलत टाइपिङको लागि त्रुटि शैली देखिन्छ
-- **पक्का गर्छ** कि शब्द पूरा गर्दा हाइलाइट सही रूपमा अगाडि बढ्छ
-- **परीक्षण गर्छ** कि उद्धरण पूरा गर्दा समयसहितको सन्देश देखिन्छ
+- **पुष्टि गर्छ** कि शब्दहरू पूरा गर्दा हाइलाइट सही रूपमा अगाडि बढ्छ
+- **पुष्टि गर्छ** कि उद्धरण पूरा गर्दा समयको साथ पूरा गर्ने सन्देश देखिन्छ
 
 **सामान्य डिबगिङ सुझावहरू:**
-- **ब्राउजर कन्सोल जाँच गर्नुहोस्** (F12) JavaScript त्रुटिहरूको लागि
-- **पुष्टि गर्नुहोस्** कि सबै फाइल नामहरू ठ्याक्कै मेल खान्छन् (केस-संवेदी)
-- **पक्का गर्नुहोस्** कि Live Server चलिरहेको छ र ठीकसँग रिफ्रेस भइरहेको छ
-- **विभिन्न उद्धरणहरू परीक्षण गर्नुहोस्** र्यान्डम चयन काम गरिरहेको छ भनेर पुष्टि गर्न
+- **जाँच गर्नुहोस्** ब्राउजर कन्सोल (F12) मा JavaScript त्रुटिहरू
+- **पुष्टि गर्नुहोस्** कि सबै फाइल नामहरू ठीकसँग मेल खान्छन् (केस-संवेदनशील)
+- **पक्का गर्नुहोस्** कि लाइभ सर्भर चलिरहेको छ र ठीकसँग रिफ्रेस भइरहेको छ
+- **विभिन्न उद्धरणहरू परीक्षण गर्नुहोस्** र्यान्डम चयन काम गरिरहेको छ कि छैन भनेर पुष्टि गर्न
 
 ---
 
@@ -482,16 +482,16 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
 
 **विवरण:** खेलाडीको प्रदर्शनको आधारमा खेल समायोजन गर्ने कठिनाई प्रणाली कार्यान्वयन गरेर टाइपिङ खेल विस्तार गर्नुहोस्। यो चुनौतीले तपाईंलाई उन्नत इभेन्ट ह्यान्डलिङ, डेटा विश्लेषण, र गतिशील UI अपडेट अभ्यास गर्न मद्दत गर्नेछ।
 
-**प्रेरणा:** टाइपिङ खेलको लागि कठिनाई समायोजन प्रणाली बनाउनुहोस् जसले:
+**प्रस्तावना:** टाइपिङ खेलको लागि कठिनाई समायोजन प्रणाली सिर्जना गर्नुहोस् जसले:
 1. खेलाडीको टाइपिङ गति (शब्द प्रति मिनेट) र शुद्धता प्रतिशत ट्र्याक गर्छ
-2. स्वतः तीन कठिनाई स्तरमा समायोजन गर्छ: सजिलो (साधारण उद्धरणहरू), मध्यम (हालको उद्धरणहरू), कठिन (जटिल उद्धरणहरू पङ्क्तिविन्याससहित)
-3. हालको कठिनाई स्तर र खेलाडीको तथ्याङ्क UI मा देखाउँछ
-4. लगातार ३ राम्रो प्रदर्शनपछि कठिनाई बढाउने स्ट्रीक काउन्टर कार्यान्वयन गर्छ
-5. कठिनाई परिवर्तन संकेत गर्न दृश्य प्रतिक्रिया (रङ, एनिमेसन) थप्छ
+2. स्वचालित रूपमा तीन कठिनाई स्तरहरूमा समायोजन गर्छ: सजिलो (साधारण उद्धरणहरू), मध्यम (हालको उद्धरणहरू), कठिन (वर्ण विराम चिह्न सहित जटिल उद्धरणहरू)
+3. UI मा हालको कठिनाई स्तर र खेलाडीको तथ्याङ्कहरू प्रदर्शन गर्छ
+4. लगातार तीन राम्रो प्रदर्शन पछि कठिनाई बढाउने स्ट्रिक काउन्टर कार्यान्वयन गर्छ
+5. कठिनाई परिवर्तनहरू संकेत गर्न दृश्य प्रतिक्रिया (रङहरू, एनिमेसनहरू) थप्छ
 
-आवश्यक HTML तत्वहरू, CSS शैलीहरू, र JavaScript फङ्क्सनहरू थपेर यो सुविधा कार्यान्वयन गर्नुहोस्। उचित त्रुटि ह्यान्डलिङ समावेश गर्नुहोस् र खेललाई उपयुक्त ARIA लेबलहरूसहित पहुँचयोग्य बनाउनुहोस्।
+आवश्यक HTML तत्वहरू, CSS शैलीहरू, र JavaScript फङ्सनहरू थप्नुहोस् यो सुविधा कार्यान्वयन गर्न। उचित त्रुटि ह्यान्डलिङ समावेश गर्नुहोस् र खेल पहुँचयोग्य रहन्छ सुनिश्चित गर्नुहोस्।
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बारे थप जान्नुहोस्।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
 
 ## 🚀 चुनौती
 
@@ -500,31 +500,90 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
 **थप कार्यक्षमता थप्नुहोस्:**
 
 | सुविधा | विवरण | तपाईंले अभ्यास गर्ने सीपहरू |
-|--------|-------|---------------------------|
+|--------|--------|---------------------------|
 | **इनपुट नियन्त्रण** | उद्धरण पूरा भएपछि `input` इभेन्ट लिस्नरलाई निष्क्रिय गर्नुहोस्, र बटन क्लिक गर्दा पुनः सक्रिय गर्नुहोस् | इभेन्ट व्यवस्थापन र अवस्था नियन्त्रण |
-| **UI अवस्था व्यवस्थापन** | खेलाडीले उद्धरण पूरा गर्दा टेक्स्टबक्स निष्क्रिय गर्नुहोस् | DOM सम्पत्ति म्यानिपुलेसन |
-| **मोडल संवाद** | सफलताको सन्देशसहित मोडल संवाद बक्स देखाउनुहोस् | उन्नत UI ढाँचा र पहुँचयोग्यता |
+| **UI अवस्था व्यवस्थापन** | खेलाडीले उद्धरण पूरा गरेपछि टेक्स्टबक्स निष्क्रिय गर्नुहोस् | DOM सम्पत्ति हेरफेर |
+| **मोडल संवाद** | सफलता सन्देशको साथ मोडल संवाद बक्स प्रदर्शन गर्नुहोस् | उन्नत UI ढाँचा र पहुँचयोग्यता |
 | **उच्च स्कोर प्रणाली** | `localStorage` प्रयोग गरेर उच्च स्कोरहरू भण्डारण गर्नुहोस् | ब्राउजर भण्डारण API र डेटा स्थायित्व |
 
 **कार्यान्वयन सुझावहरू:**
-- **अनुसन्धान गर्नुहोस्** `localStorage.setItem()` र `localStorage.getItem()` स्थायी भण्डारणको लागि
-- **अभ्यास गर्नुहोस्** गतिशील रूपमा इभेन्ट लिस्नरहरू थप्ने र हटाउने
-- **अन्वेषण गर्नुहोस्** HTML संवाद तत्वहरू वा CSS मोडल ढाँचा
-- **विचार गर्नुहोस्** पहुँचयोग्यता जब फारम नियन्त्रणहरू निष्क्रिय र सक्रिय गरिन्छ
+- स्थायी भण्डारणको लागि `localStorage.setItem()` र `localStorage.getItem()` अनुसन्धान गर्नुहोस्
+- गतिशील रूपमा इभेन्ट लिस्नरहरू थप्ने र हटाउने अभ्यास गर्नुहोस्
+- HTML संवाद तत्वहरू वा CSS मोडल ढाँचाहरू अन्वेषण गर्नुहोस्
+- फारम नियन्त्रणहरू निष्क्रिय र सक्रिय गर्दा पहुँचयोग्यता विचार गर्नुहोस्
 
-## पोस्ट-लेक्चर क्विज
+## पोस्ट-व्याख्यान क्विज
 
-[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/22)
+[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/22)
+
+---
+
+## 🚀 तपाईंको टाइपिङ खेल मास्टरी समयरेखा
+
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] विभिन्न उद्धरणहरूसँग आफ्नो टाइपिङ खेल परीक्षण गर्नुहोस् ताकि यो सहज रूपमा काम गर्छ भनेर सुनिश्चित गर्न सकून्
+- [ ] CSS शैलीको साथ प्रयोग गर्नुहोस् - हाइलाइट र त्रुटि रङहरू परिवर्तन गर्न प्रयास गर्नुहोस्
+- [ ] आफ्नो ब्राउजरको DevTools (F12) खोल्नुहोस् र खेल्दा कन्सोल हेर्नुहोस्
+- [ ] आफैंलाई चुनौती दिनुहोस् कि उद्धरण सकेसम्म छिटो पूरा गर्नुहोस्
+
+### ⏰ **यो घण्टामा तपाईं के हासिल गर्न सक्नुहुन्छ**
+- [ ] सूचीमा थप उद्धरणहरू थप्नुहोस् (शायद तपाईंको मनपर्ने पुस्तकहरू वा चलचित्रहरूबाट)
+- [ ] चुनौती खण्डबाट localStorage उच्च स्कोर प्रणाली कार्यान्वयन गर्नुहोस्
+- [ ] प्रत्येक खेल पछि प्रदर्शन हुने शब्द प्रति मिनेट गणक सिर्जना गर्नुहोस्
+- [ ] सही टाइपिङ, त्रुटिहरू, र पूरा गर्नेका लागि ध्वनि प्रभावहरू थप्नुहोस्
+
+### 📅 **तपाईंको हप्ताको साहसिक यात्रा**
+- [ ] मल्टिप्लेयर संस्करण निर्माण गर्नुहोस् जहाँ साथीहरूले सँगै प्रतिस्पर्धा गर्न सकून्
+- [ ] उद्धरण जटिलतासँग विभिन्न कठिनाई स्तरहरू सिर्जना गर्नुहोस्
+- [ ] उद्धरणको कति भाग पूरा भएको छ भनेर देखाउने प्रगति बार थप्नुहोस्
+- [ ] व्यक्तिगत तथ्याङ्क ट्र्याकिङको साथ प्रयोगकर्ता खाता कार्यान्वयन गर्नुहोस्
+- [ ] अनुकूलन थिमहरू डिजाइन गर्नुहोस् र प्रयोगकर्ताहरूलाई उनीहरूको मनपर्ने शैली चयन गर्न दिनुहोस्
+
+### 🗓️ **तपाईंको महिनाको रूपान्तरण**
+- [ ] पाठको उचित औंलाको स्थान क्रमशः सिकाउने पाठहरू सहित टाइपिङ कोर्स सिर्जना गर्नुहोस्
+- [ ] विश्लेषण निर्माण गर्नुहोस् जसले देखाउँछ कि कुन अक्षर वा शब्दहरूले सबैभन्दा धेरै त्रुटिहरू उत्पन्न गर्छन्
+- [ ] विभिन्न भाषाहरू र किबोर्ड लेआउटहरूको लागि समर्थन थप्नुहोस्
+- [ ] साहित्य डेटाबेसबाट उद्धरणहरू तान्न शैक्षिक API हरूसँग एकीकृत गर्नुहोस्
+- [ ] अन्य प्रयोगकर्ताहरूले प्रयोग गर्न र रमाइलो गर्नको लागि आफ्नो उन्नत टाइपिङ खेल प्रकाशित गर्नुहोस्
+
+### 🎯 **अन्तिम प्रतिबिम्ब जाँच**
+
+**अर्को चरणमा जानु अघि, एक क्षण लिनुहोस् र उत्सव मनाउनुहोस्:**
+- खेल निर्माण गर्दा सबैभन्दा सन्तोषजनक क्षण के थियो?
+- इभेन्ट-ड्राइभन प्रोग्रामिङको बारेमा तपाईंको अनुभव सुरुमा भन्दा अहिले कस्तो छ?
+- यो खेललाई अद्वितीय बनाउन थप्नको लागि तपाईं उत्साहित हुनुहुन्छ कि एक सुविधा के हो?
+- तपाईं अन्य परियोजनाहरूमा इभेन्ट ह्यान्डलिङ अवधारणाहरू कसरी लागू गर्न सक्नुहुन्छ?
+
+```mermaid
+journey
+    title Your Event Programming Confidence Journey
+    section Today
+      Understanding Events: 3: You
+      Building UI: 4: You
+      Writing Event Listeners: 5: You
+    section This Week
+      Adding Features: 4: You
+      Debugging Issues: 5: You
+      Enhancing UX: 4: You
+    section Next Month
+      Building Complex Apps: 5: You
+      Teaching Others: 5: You
+      Creating Frameworks: 5: You
+```
+
+> 🌟 **याद गर्नुहोस्**: तपाईंले अहिले मात्र अन्तरक्रियात्मक वेबसाइट र एप्लिकेसनलाई शक्ति दिने मुख्य अवधारणाहरूमा महारत हासिल गर्नुभएको छ। इभेन्ट-ड्राइभन प्रोग्रामिङले वेबलाई जीवन्त र प्रतिक्रियाशील महसुस गराउँछ। जब तपाईंले ड्रपडाउन मेनु, टाइप गर्दा मान्य गर्ने फारम, वा खेल जसले तपाईंको क्लिकहरूमा प्रतिक्रिया दिन्छ देख्नुहुन्छ, तपाईंले अब यसको पछाडि रहेको जादू बुझ्नुभएको छ। तपाईं केवल कोड सिक्दै हुनुहुन्न - तपाईं अनुभवहरू सिर्जना गर्न सिक्दै हुनुहुन्छ जसले सहज र आकर्षक महसुस गराउँछ! 🎉
+
+---
 
 ## समीक्षा र आत्म अध्ययन
 
-[वेब ब्राउजरमार्फत उपलब्ध सबै इभेन्टहरू](https://developer.mozilla.org/docs/Web/Events) पढ्नुहोस्, र तपाईंले प्रत्येकलाई कुन परिदृश्यमा प्रयोग गर्नुहुन्छ भन्ने विचार गर्नुहोस्।
+[वेब ब्राउजर मार्फत विकासकर्तालाई उपलब्ध सबै इभेन्टहरू](https://developer.mozilla.org/docs/Web/Events) को बारेमा पढ्नुहोस्, र तपाईंले प्रत्येकलाई प्रयोग गर्ने परिदृश्यहरू विचार गर्नुहोस्।
 
 ## असाइनमेन्ट
 
-[नयाँ किबोर्ड खेल बनाउनुहोस्](assignment.md)
+[नयाँ किबोर्ड खेल सिर्जना गर्नुहोस्](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुनेछैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/5-browser-extension/1-about-browsers/README.md b/translations/ne/5-browser-extension/1-about-browsers/README.md
index 6a57235c54..2064561ed2 100644
--- a/translations/ne/5-browser-extension/1-about-browsers/README.md
+++ b/translations/ne/5-browser-extension/1-about-browsers/README.md
@@ -1,13 +1,30 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "33a875c522f237a2026e4653240dfc07",
-  "translation_date": "2025-10-22T17:19:20+00:00",
+  "original_hash": "00aa85715e1efd4930c17a23e3012e69",
+  "translation_date": "2025-11-03T16:00:45+00:00",
   "source_file": "5-browser-extension/1-about-browsers/README.md",
   "language_code": "ne"
 }
 -->
-# ब्राउजर एक्सटेन्सन परियोजना भाग १: ब्राउजरको बारेमा सबै कुरा
+# ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग १: ब्राउजरको बारेमा सबै कुरा
+
+```mermaid
+journey
+    title Your Browser Extension Development Journey
+    section Foundation
+      Understand browsers: 3: Student
+      Learn extension types: 4: Student
+      Setup development: 4: Student
+    section Development
+      Build interface: 4: Student
+      Add functionality: 5: Student
+      Handle data: 5: Student
+    section Integration
+      Test in browser: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
 
 ![ब्राउजर स्केच नोट](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ne.jpg)
 > स्केच नोट [वसिम चेघम](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) द्वारा
@@ -22,44 +39,80 @@ CO_OP_TRANSLATOR_METADATA:
 
 तपाईंको पहिलो एक्सटेन्सन निर्माण गर्नु अघि, ब्राउजरहरू कसरी काम गर्छन् भन्ने कुरा बुझौं। जस्तै अलेक्जेन्डर ग्राहम बेलले टेलिफोन आविष्कार गर्नु अघि ध्वनि प्रसारण बुझ्न आवश्यक थियो, ब्राउजरको आधारभूत कुराहरू जान्नाले तपाईंलाई ब्राउजर प्रणालीहरूसँग सहज रूपमा एकीकृत हुने एक्सटेन्सनहरू बनाउन मद्दत गर्नेछ।
 
-यस पाठको अन्त्यसम्ममा, तपाईं ब्राउजरको संरचना बुझ्नुहुनेछ र आफ्नो पहिलो एक्सटेन्सन निर्माण गर्न सुरु गरिसक्नु हुनेछ।
+यस पाठको अन्त्यसम्म, तपाईं ब्राउजरको संरचना बुझ्नुहुनेछ र आफ्नो पहिलो एक्सटेन्सन निर्माण गर्न सुरु गरिसक्नु हुनेछ।
+
+```mermaid
+mindmap
+  root((Browser Architecture))
+    Core Components
+      Rendering Engine
+      JavaScript Engine
+      Network Stack
+      Storage APIs
+    User Interface
+      Address Bar
+      Tab Management
+      Bookmarks
+      Extension Icons
+    Extension System
+      Manifest Files
+      Content Scripts
+      Background Pages
+      Popup Windows
+    Security Model
+      Same-Origin Policy
+      Permissions API
+      Content Security
+      Isolated Worlds
+    Development Tools
+      DevTools Integration
+      Debug Console
+      Performance Monitor
+      Extension Inspector
+```
 
-## वेब ब्राउजरहरू बुझ्दै
+## वेब ब्राउजरको समझ
 
-वेब ब्राउजर मूलतः एक जटिल दस्तावेज व्याख्याकार हो। जब तपाईं "google.com" ब्राउजरको एड्रेस बारमा टाइप गर्नुहुन्छ, ब्राउजरले विश्वभरका सर्भरहरूबाट सामग्री अनुरोध गर्ने, त्यसपछि कोडलाई पार्स र रेंडर गर्ने जटिल प्रक्रिया गर्छ - जसले तपाईंले देख्ने इन्टरएक्टिभ वेब पृष्ठहरूमा परिणत हुन्छ।
+वेब ब्राउजर मूलतः एक जटिल दस्तावेज व्याख्याकार हो। जब तपाईं "google.com" एड्रेस बारमा टाइप गर्नुहुन्छ, ब्राउजरले विश्वभरका सर्भरहरूबाट सामग्री अनुरोध गर्ने, त्यसपछि कोडलाई पार्स र रेंडर गरेर तपाईंले देख्ने इन्टरएक्टिभ वेब पृष्ठहरूमा परिणत गर्ने जटिल प्रक्रिया पूरा गर्छ।
 
-यो प्रक्रिया टिम बर्नर्स-लीले १९९० मा डिजाइन गरेको पहिलो वेब ब्राउजर, वर्ल्डवाइडवेब, जसले हाइपरलिंक गरिएको दस्तावेजहरू सबैका लागि पहुँचयोग्य बनायो, जस्तै हो।
+यो प्रक्रिया टिम बर्नर्स-लीले १९९० मा सबैलाई हाइपरलिंक गरिएको दस्तावेजहरू पहुँचयोग्य बनाउन डिजाइन गरेको पहिलो वेब ब्राउजर, वर्ल्डवाइडवेब, को डिजाइनसँग मेल खान्छ।
 
-✅ **थोरै इतिहास**: पहिलो ब्राउजर 'वर्ल्डवाइडवेब' भनिन्थ्यो र यसलाई सर टिमोथी बर्नर्स-लीले १९९० मा निर्माण गरेका थिए।
+✅ **थोरै इतिहास**: पहिलो ब्राउजर 'वर्ल्डवाइडवेब' भनिन्थ्यो र यो सर टिमोथी बर्नर्स-लीले १९९० मा निर्माण गरेका थिए।
 
 ![प्रारम्भिक ब्राउजरहरू](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ne.jpg)
 > केही प्रारम्भिक ब्राउजरहरू, [करेन म्याकग्रेन](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) मार्फत
 
-### ब्राउजरले वेब सामग्री कसरी प्रक्रिया गर्छ
+### ब्राउजरहरूले वेब सामग्री कसरी प्रक्रिया गर्छन्
 
-URL प्रविष्टि गर्ने र वेबपेज देखिने बीचको प्रक्रिया केही सेकेन्डभित्र हुने धेरै समन्वित चरणहरू समावेश गर्दछ:
+URL टाइप गरेर वेबपेज देख्नसम्मको प्रक्रिया केही सेकेन्डभित्र हुने धेरै समन्वित चरणहरू समावेश गर्दछ:
 
 ```mermaid
 sequenceDiagram
     participant User
     participant Browser
+    participant Extension
     participant DNS
     participant Server
     
     User->>Browser: Types URL and presses Enter
+    Browser->>Extension: Trigger beforeRequest event
+    Extension->>Extension: Check if URL needs modification
     Browser->>DNS: Looks up server IP address
     DNS->>Browser: Returns IP address
     Browser->>Server: Requests web page content
     Server->>Browser: Sends HTML, CSS, and JavaScript
+    Browser->>Extension: Trigger beforeResponse event
+    Extension->>Extension: Modify content if needed
     Browser->>User: Renders complete web page
+    Extension->>User: Show extension UI updates
 ```
 
 **यस प्रक्रियाले के हासिल गर्छ:**
 - **मानव-पढ्न सकिने URL** लाई DNS लुकअप मार्फत सर्भर IP ठेगानामा अनुवाद गर्छ
-- HTTP वा HTTPS प्रोटोकल प्रयोग गरेर वेब सर्भरसँग सुरक्षित कनेक्शन स्थापना गर्छ
-- सर्भरबाट विशिष्ट वेब पृष्ठ सामग्री अनुरोध गर्छ
-- HTML मार्कअप, CSS स्टाइलिङ, र JavaScript कोड सर्भरबाट प्राप्त गर्छ
-- सबै सामग्रीलाई इन्टरएक्टिभ वेब पृष्ठमा रेंडर गर्छ
+- **HTTP वा HTTPS प्रोटोकलहरू प्रयोग गरेर** वेब सर्भरसँग सुरक्षित कनेक्शन स्थापना गर्छ
+- **विशिष्ट वेब पृष्ठ सामग्री** सर्भरबाट अनुरोध गर्छ
+- **HTML मार्कअप, CSS स्टाइलिङ, र JavaScript कोड** सर्भरबाट प्राप्त गर्छ
+- **सामग्रीलाई रेंडर गर्छ** र तपाईंले देख्ने इन्टरएक्टिभ वेब पृष्ठमा परिणत गर्छ
 
 ### ब्राउजरको मुख्य विशेषताहरू
 
@@ -67,111 +120,165 @@ sequenceDiagram
 
 | विशेषता | उद्देश्य | एक्सटेन्सन अवसरहरू |
 |---------|---------|------------------------|
-| **रेंडरिङ इन्जिन** | HTML, CSS, र JavaScript प्रदर्शन गर्छ | सामग्री परिमार्जन, स्टाइलिङ इन्जेक्सन |
+| **रेंडरिङ इन्जिन** | HTML, CSS, र JavaScript देखाउँछ | सामग्री परिमार्जन, स्टाइलिङ इन्जेक्सन |
 | **JavaScript इन्जिन** | JavaScript कोड कार्यान्वयन गर्छ | कस्टम स्क्रिप्टहरू, API अन्तर्क्रिया |
 | **स्थानीय भण्डारण** | डेटा स्थानीय रूपमा बचत गर्छ | प्रयोगकर्ता प्राथमिकताहरू, क्यास गरिएको डेटा |
-| **नेटवर्क स्ट्याक** | वेब अनुरोधहरू ह्यान्डल गर्छ | अनुरोध अनुगमन, डेटा विश्लेषण |
-| **सुरक्षा मोडेल** | प्रयोगकर्ताहरूलाई हानिकारक सामग्रीबाट सुरक्षा दिन्छ | सामग्री फिल्टरिङ, सुरक्षा सुधार |
+| **नेटवर्क स्ट्याक** | वेब अनुरोधहरू ह्यान्डल गर्छ | अनुरोध निगरानी, डेटा विश्लेषण |
+| **सुरक्षा मोडेल** | प्रयोगकर्ताहरूलाई हानिकारक सामग्रीबाट बचाउँछ | सामग्री फिल्टरिङ, सुरक्षा सुधारहरू |
 
 **यी विशेषताहरू बुझ्नाले तपाईंलाई मद्दत गर्छ:**
-- **पहिचान** गर्नुहोस् कि तपाईंको एक्सटेन्सनले सबैभन्दा धेरै मूल्य कहाँ थप्न सक्छ
-- **चयन** गर्नुहोस् कि तपाईंको एक्सटेन्सनको कार्यक्षमताको लागि सही ब्राउजर API
-- **डिजाइन** गर्नुहोस् कि ब्राउजर प्रणालीहरूसँग कुशलतापूर्वक काम गर्ने एक्सटेन्सनहरू
-- **सुनिश्चित** गर्नुहोस् कि तपाईंको एक्सटेन्सनले ब्राउजर सुरक्षा उत्तम अभ्यासहरू पालना गर्छ
+- **पहिचान गर्न** कि तपाईंको एक्सटेन्सनले सबैभन्दा धेरै मूल्य कहाँ थप्न सक्छ
+- **सही ब्राउजर API चयन गर्न** तपाईंको एक्सटेन्सनको कार्यक्षमताका लागि
+- **डिजाइन गर्न** ब्राउजर प्रणालीहरूसँग कुशलतापूर्वक काम गर्ने एक्सटेन्सनहरू
+- **सुनिश्चित गर्न** कि तपाईंको एक्सटेन्सनले ब्राउजर सुरक्षा उत्तम अभ्यासहरू पालना गर्छ
 
 ### क्रस-ब्राउजर विकास विचारहरू
 
-विभिन्न ब्राउजरहरूले थोरै भिन्नतासहित मानकहरू कार्यान्वयन गर्छन्, जस्तै विभिन्न प्रोग्रामिङ भाषाहरूले समान एल्गोरिदमलाई फरक तरिकाले ह्यान्डल गर्न सक्छन्। क्रोम, फायरफक्स, र सफारी प्रत्येकमा अनौठो विशेषताहरू छन् जसलाई एक्सटेन्सन विकासको क्रममा विकासकर्ताहरूले विचार गर्नुपर्छ।
+विभिन्न ब्राउजरहरूले मानकहरूलाई थोरै भिन्नतासहित कार्यान्वयन गर्छन्, जस्तै विभिन्न प्रोग्रामिङ भाषाहरूले एउटै एल्गोरिथमलाई फरक तरिकाले ह्यान्डल गर्न सक्छन्। क्रोम, फायरफक्स, र सफारी प्रत्येकमा विकासकर्ताहरूले एक्सटेन्सन विकासको क्रममा विचार गर्नुपर्ने अनौठो विशेषताहरू छन्।
 
-> 💡 **प्रो टिप**: [caniuse.com](https://www.caniuse.com) प्रयोग गरेर विभिन्न ब्राउजरहरूमा कुन वेब प्रविधिहरू समर्थित छन् जाँच गर्नुहोस्। तपाईंको एक्सटेन्सनको विशेषताहरू योजना गर्दा यो अमूल्य छ!
+> 💡 **प्रो टिप**: [caniuse.com](https://www.caniuse.com) प्रयोग गरेर विभिन्न ब्राउजरहरूमा कुन वेब प्रविधिहरू समर्थित छन् जाँच गर्नुहोस्। यो तपाईंको एक्सटेन्सनको सुविधाहरू योजना गर्दा अमूल्य छ!
 
 **एक्सटेन्सन विकासका लागि मुख्य विचारहरू:**
-- **परीक्षण** गर्नुहोस् कि तपाईंको एक्सटेन्सन क्रोम, फायरफक्स, र एज ब्राउजरहरूमा काम गर्छ
-- **अनुकूलन** गर्नुहोस् विभिन्न ब्राउजर एक्सटेन्सन API र म्यानिफेस्ट ढाँचाहरूमा
-- **ह्यान्डल** गर्नुहोस् विभिन्न ब्राउजर-विशिष्ट विशेषताहरू र सीमाहरू
-- **फिर्ता विकल्पहरू प्रदान गर्नुहोस्** ब्राउजर-विशिष्ट विशेषताहरूको लागि जुन उपलब्ध नहुन सक्छ
+- **क्रोम, फायरफक्स, र एज ब्राउजरहरूमा** तपाईंको एक्सटेन्सन परीक्षण गर्नुहोस्
+- **विभिन्न ब्राउजर एक्सटेन्सन API र म्यानिफेस्ट ढाँचाहरूमा** अनुकूलन गर्नुहोस्
+- **विभिन्न प्रदर्शन विशेषताहरू र सीमाहरू ह्यान्डल गर्नुहोस्**
+- **ब्राउजर-विशिष्ट सुविधाहरूको लागि फलब्याकहरू प्रदान गर्नुहोस्** जुन उपलब्ध नहुन सक्छ
 
-✅ **एनालिटिक्स इनसाइट**: तपाईं आफ्नो वेब विकास परियोजनाहरूमा एनालिटिक्स प्याकेजहरू स्थापना गरेर प्रयोगकर्ताहरूले कुन ब्राउजरहरू प्राथमिकता दिन्छन् भनेर निर्धारण गर्न सक्नुहुन्छ। यस डेटा तपाईंलाई कुन ब्राउजरहरूलाई पहिले समर्थन गर्ने प्राथमिकता दिन मद्दत गर्छ।
+✅ **एनालिटिक्स इनसाइट**: तपाईं आफ्नो वेब विकास परियोजनाहरूमा एनालिटिक्स प्याकेजहरू स्थापना गरेर प्रयोगकर्ताहरूले कुन ब्राउजरहरू प्राथमिकता दिन्छन् निर्धारण गर्न सक्नुहुन्छ। यस डेटा ले तपाईंलाई कुन ब्राउजरहरूलाई पहिले समर्थन गर्ने प्राथमिकता दिन मद्दत गर्छ।
 
-## ब्राउजर एक्सटेन्सनहरू बुझ्दै
+## ब्राउजर एक्सटेन्सनको समझ
 
 ब्राउजर एक्सटेन्सनहरूले सामान्य वेब ब्राउजिङ चुनौतीहरूको समाधान ब्राउजर इन्टरफेसमा सीधा कार्यक्षमता थपेर गर्छन्। अलग एप्लिकेसनहरू वा जटिल वर्कफ्लोहरू आवश्यक पार्नुभन्दा, एक्सटेन्सनहरूले उपकरणहरू र सुविधाहरूमा तत्काल पहुँच प्रदान गर्छन्।
 
 यो अवधारणा प्रारम्भिक कम्प्युटर अग्रदूतहरू जस्तै डगलस एङ्गलबर्टले प्रविधिको साथ मानव क्षमताहरू बढाउने कल्पना गरे जस्तै हो - एक्सटेन्सनहरूले तपाईंको ब्राउजरको आधारभूत कार्यक्षमता बढाउँछन्।
 
-**लोकप्रिय एक्सटेन्सन कोटीहरू र तिनीहरूको फाइदाहरू:**
-- **उत्पादकता उपकरणहरू**: कार्य व्यवस्थापकहरू, नोट लिने एप्स, र समय ट्र्याकर्स जसले तपाईंलाई व्यवस्थित रहन मद्दत गर्छ
+```mermaid
+quadrantChart
+    title Browser Extension Categories
+    x-axis Simple --> Complex
+    y-axis Personal Use --> Professional Tools
+    quadrant-1 Developer Tools
+    quadrant-2 Enterprise Solutions
+    quadrant-3 Personal Utilities
+    quadrant-4 Productivity Apps
+    
+    Ad Blockers: [0.3, 0.2]
+    Password Managers: [0.7, 0.3]
+    Color Pickers: [0.4, 0.8]
+    Code Formatters: [0.8, 0.9]
+    Note Taking: [0.6, 0.5]
+    Video Downloaders: [0.5, 0.2]
+    Time Trackers: [0.7, 0.6]
+    Screenshot Tools: [0.4, 0.4]
+```
+
+**लोकप्रिय एक्सटेन्सन श्रेणीहरू र तिनका फाइदाहरू:**
+- **उत्पादकता उपकरणहरू**: टास्क म्यानेजरहरू, नोट-टेकिङ एप्स, र टाइम ट्र्याकर्स जसले तपाईंलाई व्यवस्थित रहन मद्दत गर्छ
 - **सुरक्षा सुधारहरू**: पासवर्ड म्यानेजरहरू, विज्ञापन ब्लकरहरू, र गोपनीयता उपकरणहरू जसले तपाईंको डेटा सुरक्षित राख्छ
-- **विकासकर्ता उपकरणहरू**: कोड फर्म्याटरहरू, कलर पिकरहरू, र डिबगिङ युटिलिटीहरू जसले विकासलाई सरल बनाउँछ
+- **विकासकर्ता उपकरणहरू**: कोड फर्म्याटरहरू, कलर पिकरहरू, र डिबगिङ युटिलिटीज जसले विकासलाई सरल बनाउँछ
 - **सामग्री सुधार**: पढ्ने मोडहरू, भिडियो डाउनलोडरहरू, र स्क्रिनशट उपकरणहरू जसले तपाईंको वेब अनुभव सुधार गर्छ
 
 ✅ **प्रतिबिम्ब प्रश्न**: तपाईंको मनपर्ने ब्राउजर एक्सटेन्सनहरू के हुन्? तिनीहरूले कुन विशिष्ट कार्यहरू गर्छन्, र तिनीहरूले तपाईंको ब्राउजिङ अनुभवलाई कसरी सुधार गर्छन्?
 
-## एक्सटेन्सन स्थापना र व्यवस्थापन गर्दै
+### 🔄 **शैक्षिक जाँच**
+**ब्राउजर संरचना समझ**: एक्सटेन्सन विकासमा जानु अघि, सुनिश्चित गर्नुहोस् कि तपाईं:
+- ✅ ब्राउजरहरूले वेब अनुरोधहरू कसरी प्रक्रिया गर्छन् र सामग्री कसरी रेंडर गर्छन् व्याख्या गर्न सक्नुहुन्छ
+- ✅ ब्राउजर संरचनाका मुख्य घटकहरू पहिचान गर्न सक्नुहुन्छ
+- ✅ एक्सटेन्सनहरू ब्राउजर कार्यक्षमतासँग कसरी एकीकृत हुन्छन् बुझ्न सक्नुहुन्छ
+- ✅ प्रयोगकर्ताहरूलाई सुरक्षा प्रदान गर्ने सुरक्षा मोडेललाई पहिचान गर्न सक्नुहुन्छ
+
+**छिटो आत्म-परीक्षण**: तपाईं URL टाइप गरेर वेबपेज देख्नसम्मको बाटो ट्रेस गर्न सक्नुहुन्छ?
+1. **DNS लुकअप** URL लाई IP ठेगानामा रूपान्तरण गर्छ
+2. **HTTP अनुरोध** सर्भरबाट सामग्री ल्याउँछ
+3. **पार्सिङ** HTML, CSS, र JavaScript प्रक्रिया गर्छ
+4. **रेंडरिङ** अन्तिम वेबपेज देखाउँछ
+5. **एक्सटेन्सनहरू** विभिन्न चरणहरूमा सामग्री परिमार्जन गर्न सक्छ
+
+## एक्सटेन्सन स्थापना र व्यवस्थापन
 
-एक्सटेन्सन स्थापना प्रक्रिया बुझ्नाले तपाईंलाई मानिसहरूले तपाईंको एक्सटेन्सन स्थापना गर्दा अनुभव गर्ने कुराको पूर्वानुमान गर्न मद्दत गर्छ। स्थापना प्रक्रिया आधुनिक ब्राउजरहरूमा मानकीकृत छ, इन्टरफेस डिजाइनमा साना भिन्नताहरूका साथ।
+एक्सटेन्सन स्थापना प्रक्रिया बुझ्नाले तपाईंलाई प्रयोगकर्ताहरूले तपाईंको एक्सटेन्सन स्थापना गर्दा अनुभव गर्ने कुराको पूर्वानुमान गर्न मद्दत गर्छ। स्थापना प्रक्रिया आधुनिक ब्राउजरहरूमा मानकीकृत छ, इन्टरफेस डिजाइनमा साना भिन्नताहरूका साथ।
 
-![एज ब्राउजरको स्क्रिनशट जसले edge://extensions पृष्ठ र सेटिङ मेनु खुला देखाउँछ](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ne.png)
+![एज ब्राउजरको स्क्रिनशट जसमा edge://extensions पृष्ठ र सेटिङ मेनु खुला छ](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ne.png)
 
-> **महत्वपूर्ण**: आफ्नो एक्सटेन्सन परीक्षण गर्दा डेभलपर मोड अन गर्नुहोस् र अन्य स्टोरहरूबाट एक्सटेन्सनहरू अनुमति दिनुहोस्।
+> **महत्वपूर्ण**: आफ्नो एक्सटेन्सन परीक्षण गर्दा डेभलपर मोड अन गर्नुहोस् र अन्य स्टोरहरूबाट एक्सटेन्सनहरू अनुमति दिन सुनिश्चित गर्नुहोस्।
 
 ### विकास एक्सटेन्सन स्थापना प्रक्रिया
 
 जब तपाईं आफ्नो एक्सटेन्सन विकास र परीक्षण गर्दै हुनुहुन्छ, यो वर्कफ्लो पालना गर्नुहोस्:
 
+```mermaid
+flowchart TD
+    A[Write Code] --> B[Build Extension]
+    B --> C{First Install?}
+    C -->|Yes| D[Load Unpacked]
+    C -->|No| E[Reload Extension]
+    D --> F[Test Functionality]
+    E --> F
+    F --> G{Working Correctly?}
+    G -->|No| H[Debug Issues]
+    G -->|Yes| I[Ready for Users]
+    H --> A
+    I --> J[Publish to Store]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#f3e5f5
+    style J fill:#fff3e0
+```
+
 ```bash
 # Step 1: Build your extension
 npm run build
 ```
 
-**यस आदेशले के हासिल गर्छ:**
+**यस कमाण्डले के हासिल गर्छ:**
 - **तपाईंको स्रोत कोडलाई** ब्राउजर-तयार फाइलहरूमा कम्पाइल गर्छ
 - **JavaScript मोड्युलहरूलाई** अनुकूलित प्याकेजहरूमा बन्डल गर्छ
 - **अन्तिम एक्सटेन्सन फाइलहरूलाई** `/dist` फोल्डरमा उत्पन्न गर्छ
 - **तपाईंको एक्सटेन्सनलाई** स्थापना र परीक्षणको लागि तयार गर्छ
 
-**चरण २: ब्राउजर एक्सटेन्सनहरूमा जानुहोस्**
-1. **खोल्नुहोस्** आफ्नो ब्राउजरको एक्सटेन्सन व्यवस्थापन पृष्ठ
-2. **क्लिक गर्नुहोस्** "सेटिङ्स र थप" बटन (माथि दायाँमा `...` आइकन)
-3. **चयन गर्नुहोस्** ड्रपडाउन मेनुबाट "एक्सटेन्सनहरू"
+**चरण २: ब्राउजर एक्सटेन्सनहरूमा नेभिगेट गर्नुहोस्**
+1. **तपाईंको ब्राउजरको एक्सटेन्सन व्यवस्थापन पृष्ठ खोल्नुहोस्**
+2. **"सेटिङ्स र थप" बटन ( `...` आइकन) माथि दायाँ क्लिक गर्नुहोस्**
+3. **ड्रपडाउन मेनुबाट "एक्सटेन्सनहरू" चयन गर्नुहोस्**
 
 **चरण ३: आफ्नो एक्सटेन्सन लोड गर्नुहोस्**
 - **नयाँ स्थापनाहरूको लागि**: `लोड अनप्याक्ड` चयन गर्नुहोस् र आफ्नो `/dist` फोल्डर चयन गर्नुहोस्
-- **अपडेटहरूको लागि**: पहिले नै स्थापना गरिएको एक्सटेन्सनको छेउमा `रिलोड` क्लिक गर्नुहोस्
-- **परीक्षणको लागि**: "डेभलपर मोड" सक्षम गर्नुहोस् थप डिबगिङ सुविधाहरू पहुँच गर्न
+- **अपडेटहरूको लागि**: तपाईंको पहिले नै स्थापित एक्सटेन्सनको छेउमा `रिलोड` क्लिक गर्नुहोस्
+- **परीक्षणको लागि**: "डेभलपर मोड" सक्षम गर्नुहोस् ताकि थप डिबगिङ सुविधाहरू पहुँच गर्न सकियोस्
 
 ### उत्पादन एक्सटेन्सन स्थापना
 
-> ✅ **नोट**: यी विकास निर्देशनहरू तपाईंले आफैंले निर्माण गरेका एक्सटेन्सनहरूको लागि विशेष रूपमा हुन्। प्रकाशित एक्सटेन्सनहरू स्थापना गर्न, [माइक्रोसफ्ट एज एड-ऑन्स स्टोर](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) जस्ता आधिकारिक ब्राउजर एक्सटेन्सन स्टोरहरूमा जानुहोस्।
+> ✅ **नोट**: यी विकास निर्देशनहरू तपाईंले आफैं निर्माण गरेका एक्सटेन्सनहरूको लागि विशेष रूपमा हुन्। प्रकाशित एक्सटेन्सनहरू स्थापना गर्न, आधिकारिक ब्राउजर एक्सटेन्सन स्टोरहरू जस्तै [माइक्रोसफ्ट एज एड-अन्स स्टोर](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) मा जानुहोस्।
 
-**भिन्नता बुझ्दै:**
-- **विकास स्थापना**हरूले तपाईंलाई विकासको क्रममा अप्रकाशित एक्सटेन्सनहरू परीक्षण गर्न दिन्छ
-- **स्टोर स्थापना**हरूले स्वचालित अपडेटहरूसँग प्रमाणित, प्रकाशित एक्सटेन्सनहरू प्रदान गर्छ
+**अन्तर बुझ्दै:**
+- **विकास स्थापना**हरूले तपाईंलाई विकासको क्रममा अप्रकाशित एक्सटेन्सनहरू परीक्षण गर्न अनुमति दिन्छ
+- **स्टोर स्थापना**हरूले स्वीकृत, प्रकाशित एक्सटेन्सनहरू स्वचालित अपडेटहरूसहित प्रदान गर्छ
 - **साइडलोडिङ**ले आधिकारिक स्टोरहरू बाहिरबाट एक्सटेन्सन स्थापना गर्न अनुमति दिन्छ (डेभलपर मोड आवश्यक छ)
 
 ## तपाईंको कार्बन फुटप्रिन्ट एक्सटेन्सन निर्माण गर्दै
 
-हामी एउटा ब्राउजर एक्सटेन्सन निर्माण गर्नेछौं जसले तपाईंको क्षेत्रको ऊर्जा प्रयोगको कार्बन फुटप्रिन्ट देखाउँछ। यो परियोजनाले आवश्यक एक्सटेन्सन विकास अवधारणाहरू प्रदर्शन गर्दछ भने वातावरणीय सचेतनाको लागि व्यावहारिक उपकरण सिर्जना गर्छ।
+हामी एउटा ब्राउजर एक्सटेन्सन निर्माण गर्नेछौं जसले तपाईंको क्षेत्रको ऊर्जा प्रयोगको कार्बन फुटप्रिन्ट देखाउँछ। यो परियोजनाले आवश्यक एक्सटेन्सन विकास अवधारणाहरू प्रदर्शन गर्दछ जबकि वातावरणीय सचेतनाको लागि व्यावहारिक उपकरण सिर्जना गर्छ।
 
 यो दृष्टिकोण "गर्दै सिक्ने" सिद्धान्तलाई पछ्याउँछ जुन जॉन डेवीको शैक्षिक सिद्धान्तहरूदेखि प्रभावकारी साबित भएको छ - प्राविधिक सीपहरूलाई अर्थपूर्ण वास्तविक-विश्व अनुप्रयोगहरूसँग संयोजन गर्दै।
 
 ### परियोजना आवश्यकताहरू
 
-विकास सुरु गर्नु अघि, आवश्यक स्रोतहरू र निर्भरता सङ्कलन गरौं:
+विकास सुरु गर्नु अघि, आवश्यक स्रोतहरू र निर्भरता संकलन गरौं:
 
 **आवश्यक API पहुँच:**
-- **[CO2 सिग्नल API कुञ्जी](https://www.co2signal.com/)**: आफ्नो इमेल ठेगाना प्रविष्ट गरेर आफ्नो निःशुल्क API कुञ्जी प्राप्त गर्नुहोस्
-- **[क्षेत्र कोड](http://api.electricitymap.org/v3/zones)**: आफ्नो क्षेत्र कोड [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) प्रयोग गरेर पत्ता लगाउनुहोस् (उदाहरणका लागि, बोस्टनले 'US-NEISO' प्रयोग गर्छ)
+- **[CO2 सिग्नल API की](https://www.co2signal.com/)**: आफ्नो इमेल ठेगाना प्रविष्ट गरेर आफ्नो नि:शुल्क API की प्राप्त गर्नुहोस्
+- **[क्षेत्र कोड](http://api.electricitymap.org/v3/zones)**: [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) प्रयोग गरेर आफ्नो क्षेत्र कोड पत्ता लगाउनुहोस् (उदाहरणका लागि, बोस्टनले 'US-NEISO' प्रयोग गर्छ)
 
 **विकास उपकरणहरू:**
 - **[Node.js र NPM](https://www.npmjs.com)**: परियोजना निर्भरता स्थापना गर्नको लागि प्याकेज व्यवस्थापन उपकरण
 - **[स्टार्टर कोड](../../../../5-browser-extension/start)**: विकास सुरु गर्न `start` फोल्डर डाउनलोड गर्नुहोस्
 
-✅ **थप जान्नुहोस्**: आफ्नो प्याकेज व्यवस्थापन सीपहरू सुधार गर्न यो [व्यापक सिकाइ मोड्युल](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) हेर्नुहोस्
+✅ **थप जान्नुहोस्**: आफ्नो प्याकेज व्यवस्थापन सीपहरू सुधार गर्न यो [व्यापक सिक्ने मोड्युल](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) हेर्नुहोस्
 
 ### परियोजना संरचना बुझ्दै
 
-परियोजना संरचना बुझ्नाले विकास कार्यलाई कुशलतापूर्वक व्यवस्थित गर्न मद्दत गर्छ। जस्तै अलेक्जेन्ड्रिया पुस्तकालयलाई सजिलो ज्ञान पुनःप्राप्तिको लागि व्यवस्थित गरिएको थियो, राम्रोसँग संरचित कोडबेसले विकासलाई अधिक कुशल बनाउँछ:
+परियोजना संरचना बुझ्नाले विकास कार्यलाई कुशलतापूर्वक व्यवस्थित गर्न मद्दत गर्छ। जस्तै अलेक्जेन्ड्रिया पुस्तकालयलाई सजिलो ज्ञान पुनःप्राप्तिको लागि व्यवस्थित गरिएको थियो, राम्रोसँग संरचित कोडबेसले विकासलाई कुशल बनाउँछ:
 
 ```
 project-root/
@@ -180,114 +287,202 @@ project-root/
 │   ├── index.html           # User interface markup
 │   ├── background.js        # Background script functionality
 │   └── main.js              # Compiled JavaScript bundle
-└── src/                     # Source development files
-    └── index.js             # Your main JavaScript code
+├── src/                     # Source development files
+│   └── index.js             # Your main JavaScript code
+├── package.json             # Project dependencies and scripts
+└── webpack.config.js        # Build configuration
 ```
 
 **प्रत्येक फाइलले के हासिल गर्छ:**
-- **`manifest.json`**: एक्सटेन्सन मेटाडेटा, अनुमति, र इन्ट्री पोइन्टहरू परिभाषित गर्छ
+- **`manifest.json`**: एक्सटेन्सन मेटाडेटा, अनुमति, र प्रवेश बिन्दुहरू परिभाषित गर्छ
 - **`index.html`**: प्रयोगकर्ता इन्टरफेस सिर्जना गर्छ जुन प्रयोगकर्ताहरूले तपाईंको एक्सटेन्सन क्लिक गर्दा देख्छन्
 - **`background.js`**: पृष्ठभूमि कार्यहरू र ब्राउजर इभेन्ट लिसनरहरू ह्यान्डल गर्छ
-- **`main.js`**: निर्माण प्रक्रियापछि अन्तिम बन्डल गरिएको JavaScript समावेश गर्छ
+- **`main.js`**: निर्माण प्रक्रिया पछि अन्तिम बन्डल गरिएको JavaScript समावेश गर्छ
 - **`src/index.js`**: तपाईंको मुख्य विकास कोड समावेश गर्छ जुन `main.js` मा कम्पाइल हुन्छ
 
-> 💡 **संगठन टिप**: आफ्नो API कुञ्जी र क्षेत्र कोडलाई सुरक्षित नोटमा भण्डारण गर्नुहोस् ताकि विकासको क्रममा सजिलै सन्दर्भ गर्न सकियोस्। तपाईंलाई आफ्नो एक्सटेन्सनको कार्यक्षमता परीक्षण गर्न यी मानहरू आवश्यक हुनेछ।
+> 💡 **संरचना टिप**: आफ्नो API की र क्षेत्र कोडलाई सुरक्षित नोटमा भण्डारण गर्नुहोस् ताकि विकासको क्रममा सजिलै सन्दर्भ गर्न सकियोस्। तपाईंलाई यी मानहरू आफ्नो एक्सटेन्सनको कार्यक्षमता परीक्षण गर्न आवश्यक हुनेछ।
 
-✅ **सुरक्षा नोट**: कहिल्यै आफ्नो कोड रिपोजिटरीमा API कुञ्जी वा संवेदनशील प्रमाणहरू कमिट नगर्नुहोस्। हामी तपाईंलाई यी सुरक्षित रूपमा ह्यान्डल गर्ने तरिका अर्को चरणहरूमा देखाउनेछौं।
+✅ **सुरक्षा नोट**: कहिल्यै आफ्नो कोड रिपोजिटरीमा API की वा संवेदनशील प्रमाणहरू कमिट नगर्नुहोस्। हामी तपाईंलाई यी सुरक्षित रूपमा ह्यान्डल गर्ने तरिका अर्को चरणहरूमा देखाउनेछौं।
 
 ## एक्सटेन्सन इन्टरफेस सिर्जना गर्दै
 
 अब हामी प्रयोगकर्ता इन्टरफेस कम्पोनेन्टहरू निर्माण गर्नेछौं। एक्सटेन्सनले दुई-स्क्रिन दृष्टिकोण प्रयोग गर्छ: प्रारम्भिक सेटअपको लागि कन्फिगरेसन स्क्रिन र डेटा प्रदर्शनको लागि परिणाम स्क्रिन।
 
-यो कम्प्युटिङको प्रारम्भिक दिनदेखि प्रयोग गरिएको इन्टरफेस डिजाइनमा प्रगतिशील खुलासा सिद्धान्तलाई पछ्याउँछ - प्रयोगकर्ताहरूलाई अभिभूत नगर्ने तर्कसंगत क्रममा जानकारी र विकल्पहरू प्रकट गर्दै।
+यो कम्प्युटिङको प्रारम्भिक दिनदेखि प्रयोग गरिएको इन्टरफेस डिजाइनमा प्रगतिशील खुलासा सिद्धान्तलाई पछ्याउँछ - प्रयोगकर्ताहरूलाई अभिभूत नगरी जानकारी र विकल्पहरू तार्किक क्रममा देखाउँदै।
 
 ### एक्सटेन्सन दृश्यहरूको अवलोकन
 
 **सेटअप दृश्य** - पहिलो पटक प्रयोगकर्ता कन्फिगरेसन:
-![ब्राउजरमा खुला एक्सटेन्सनको पूर्ण स्क्रिनशट, क्षेत्र नाम र API कुञ्जीका लागि इनपुटहरू सहितको फारम देखाउँदै।](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ne.png)
+![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले क्षेत्र नाम र API कीको लागि इनपुटहरू भएको फारम देखाउँछ।](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ne.png)
 
 **परिणाम दृश्य** - कार्बन फुटप्रिन्ट डेटा प्रदर्शन:
-![US-NEISO क्षेत्रको लागि कार्बन प्रयोग र फोसिल इन्धन प्रतिशतका मानहरू प्रदर्शन गर्दै एक्सटेन्सनको पूर्ण स्क्रिनशट।](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ne.png)
+![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले US-NEISO क्षेत्रको लागि कार्बन प्रयोग र फोसिल इन्धन प्रतिशतको मानहरू देखाउँछ।](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ne.png)
 
 ### कन्फिगरेसन फारम निर्माण गर्दै
 
 सेटअप फारमले प्रारम्भिक प्रयोगको क्रममा प्रयोगकर्ता कन्फिगरेसन डेटा सङ्कलन गर्छ। एक पटक कन्फिगर गरेपछि, यो जानकारी भविष्यका सत्रहरूको लागि ब्राउजर भण्डारणमा रहन्छ।
 
-`/dist/index.html` फाइलमा, यो फारम संरचना थप्नुहोस्:
-
-```html
-<form class="form-data" autocomplete="on">
-    <div>
-        <h2>New? Add your Information</h2>
-    </div>
-    <div>
-        <label for="region">Region Name</label>
-        <input type="text" id="region" required class="region-name" />
-    </div>
-    <div>
-        <label for="api">Your API Key from tmrow</label>
-        <input type="text" id="api" required class="api-key" />
-    </div>
-    <button class="search-btn">Submit</button>
-</form>
-```
+`/dist/index.html` फाइलमा, यो फारम संर
+1. **निर्माण गर्नुहोस्** आफ्नो कोड कम्पाइल गर्न निर्माण आदेश चलाउनुहोस्  
+2. **लोड गर्नुहोस्** विकासकर्ता मोड प्रयोग गरेर आफ्नो ब्राउजरमा एक्सटेन्सन  
+3. **पुष्टि गर्नुहोस्** कि फारम सही ढंगले देखिन्छ र व्यावसायिक देखिन्छ  
+4. **जाँच गर्नुहोस्** कि सबै फारम तत्वहरू सही रूपमा मिलाइएको र कार्यात्मक छन्  
 
-**यस फारमले के हासिल गर्छ:**
-- **सामान्य फारम संरचना सिर्जना गर्छ** उचित लेबल र इनपुट संघहरूको साथ
-- **ब्राउजर स्वतः पूर्ण कार्यक्षमता सक्षम गर्छ** सुधारिएको प्रयोगकर्ता अनुभवको लागि
-- **दुवै क्षेत्रहरू भरिएको हुनुपर्छ** फारम सबमिट गर्नु अघि `required` विशेषता प्रयोग गरेर
-- **इनपुटहरूलाई व्यवस्थित गर्छ** वर्णनात्मक क्लास नामहरूको साथ सजिलो स्टाइलिङ र JavaScript लक्ष्यको लागि
-- **प्रयोगकर्ताहरूलाई स्पष्ट निर्देशन प्रदान गर्छ** जो पहिलो पटक एक्सटेन्सन सेटअप गर्दैछन्
-
-### परिणाम प्रदर्शन निर्माण गर्दै
-
-अब, कार्बन फुटप्रिन्ट डेटा देखाउने परिणाम क्षेत्र सिर्जना गर्नुहोस्। फारमको तल यो HTML थप्नुहोस्:
-
-```html
-<div class="result">
-    <div class="loading">loading...</div>
-    <div class="errors"></div>
-    <div class="data"></div>
-    <div class="result-container">
-        <p><strong>Region: </strong><span class="my-region"></span></p>
-        <p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
-        <p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
-    </div>
-    <button class="clear-btn">Change region</button>
-</div>
-```
+**तपाईंले के हासिल गर्नुभयो:**  
+- **निर्माण गर्नुभयो** आफ्नो एक्सटेन्सनको आधारभूत HTML संरचना  
+- **तयार गर्नुभयो** कन्फिगरेसन र परिणाम इन्टरफेसहरू सही सेम्यान्टिक मार्कअपको साथ  
+- **सेट अप गर्नुभयो** उद्योग-मानक उपकरणहरू प्रयोग गरेर आधुनिक विकास कार्यप्रवाह  
+- **तयार गर्नुभयो** अन्तरक्रियात्मक JavaScript कार्यक्षमता थप्नको लागि आधार  
+
+### 🔄 **शैक्षिक जाँच-पडताल**  
+**एक्सटेन्सन विकास प्रगति**: अगाडि बढ्नु अघि आफ्नो बुझाइ पुष्टि गर्नुहोस्:  
+- ✅ के तपाईं परियोजना संरचनामा प्रत्येक फाइलको उद्देश्य व्याख्या गर्न सक्नुहुन्छ?  
+- ✅ के तपाईं बुझ्नुहुन्छ कि निर्माण प्रक्रिया कसरी तपाईंको स्रोत कोडलाई रूपान्तरण गर्छ?  
+- ✅ किन हामी कन्फिगरेसन र परिणामलाई फरक UI खण्डहरूमा विभाजित गर्छौं?  
+- ✅ फारम संरचनाले प्रयोगकर्ता अनुभव र पहुँचयोग्यता कसरी समर्थन गर्छ?  
+
+**विकास कार्यप्रवाह बुझाइ**: अब तपाईं सक्षम हुनुहुन्छ:  
+1. **परिवर्तन गर्नुहोस्** HTML र CSS आफ्नो एक्सटेन्सन इन्टरफेसको लागि  
+2. **चलाउनुहोस्** निर्माण आदेश आफ्नो परिवर्तनहरू कम्पाइल गर्न  
+3. **पुनः लोड गर्नुहोस्** आफ्नो ब्राउजरमा एक्सटेन्सन अपडेट परीक्षण गर्न  
+4. **डिबग गर्नुहोस्** ब्राउजर विकासकर्ता उपकरणहरू प्रयोग गरेर समस्या  
+
+तपाईंले ब्राउजर एक्सटेन्सन विकासको पहिलो चरण पूरा गर्नुभएको छ। जस्तै राइट भाइहरूले उडान प्राप्त गर्नु अघि एरोडायनामिक्स बुझ्न आवश्यक थियो, यी आधारभूत अवधारणाहरू बुझ्नुले तपाईंलाई अर्को पाठमा थप जटिल अन्तरक्रियात्मक सुविधाहरू निर्माण गर्न तयार बनाउँछ।  
+
+## GitHub Copilot Agent चुनौती 🚀  
+
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:  
 
-**यस संरचनाले के प्रदान गर्छ:**
-- **`loading`**: API डेटा फेच गर्दा लोडिङ सन्देश प्रदर्शन गर्छ
-- **`errors`**: API कलहरू असफल भए वा डेटा अमान्य भएमा त्रुटि सन्देश देखाउँछ
-- **`data`**: विकासको क्रममा डिबगिङ उद्देश्यका लागि कच्चा डेटा समावेश
-**विवरण:** ब्राउजर एक्सटेन्सनलाई सुधार गरेर फर्म भ्यालिडेसन र प्रयोगकर्ता प्रतिक्रिया सुविधाहरू थप्नुहोस् ताकि API की र क्षेत्र कोडहरू प्रविष्ट गर्दा प्रयोगकर्ता अनुभव सुधार होस्।
+**विवरण:** API की र क्षेत्र कोडहरू प्रविष्ट गर्दा प्रयोगकर्ता अनुभव सुधार गर्न फारम मान्यता र प्रयोगकर्ता प्रतिक्रिया सुविधाहरू थप्नुहोस्।  
 
-**प्रेरणा:** JavaScript भ्यालिडेसन फङ्सनहरू बनाउनुहोस् जसले API की फिल्डमा कम्तीमा २० क्यारेक्टरहरू छन् कि छैनन् भनेर जाँच गर्छ र क्षेत्र कोड सही ढाँचामा छ कि छैन (जस्तै 'US-NEISO')। मान्य इनपुटहरूको लागि इनपुटको सीमा रंगलाई हरियोमा परिवर्तन गर्नुहोस् र अमान्य इनपुटहरूको लागि रातोमा परिवर्तन गर्नुहोस्। साथै सुरक्षा उद्देश्यका लागि API की देखाउने/लुकाउने टगल सुविधा थप्नुहोस्।
+**प्रेरणा:** JavaScript मान्यता कार्यहरू सिर्जना गर्नुहोस् जसले API की क्षेत्रले कम्तीमा २० अक्षर समावेश गरेको छ कि छैन र क्षेत्र कोड सही ढाँचामा छ कि छैन (जस्तै 'US-NEISO') जाँच गर्छ। मान्य इनपुटहरूको लागि इनपुट सीमा रंगलाई हरियोमा परिवर्तन गर्नुहोस् र अमान्यहरूको लागि रातोमा। साथै सुरक्षा उद्देश्यका लागि API की देखाउने/लुकाउने सुविधा थप्नुहोस्।  
 
-[एजेन्ट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+[Agent मोडको बारेमा थप जान्नुहोस्](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) यहाँ।  
 
-## 🚀 चुनौती
+## 🚀 चुनौती  
 
-ब्राउजर एक्सटेन्सन स्टोरमा हेर्नुहोस् र आफ्नो ब्राउजरमा एउटा एक्सटेन्सन इन्स्टल गर्नुहोस्। यसको फाइलहरू रोचक तरिकामा जाँच गर्नुहोस्। तपाईंले के पत्ता लगाउनुहुन्छ?
+ब्राउजर एक्सटेन्सन स्टोर हेर्नुहोस् र आफ्नो ब्राउजरमा एउटा स्थापना गर्नुहोस्। तपाईं यसको फाइलहरू रोचक तरिकामा जाँच गर्न सक्नुहुन्छ। तपाईंले के पत्ता लगाउनुहुन्छ?  
 
-## पोस्ट-लेक्चर क्विज
+## पोस्ट-व्याख्यान क्विज  
 
-[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/24)
+[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/24)  
 
-## समीक्षा र आत्म अध्ययन
+## समीक्षा र आत्म-अध्ययन  
 
-यस पाठमा तपाईंले वेब ब्राउजरको इतिहासको बारेमा थोरै सिक्नुभयो; यस अवसरलाई प्रयोग गरेर विश्वव्यापी वेबका आविष्कारकहरूले यसको प्रयोगको कल्पना कसरी गरेका थिए भन्ने बारेमा थप जान्नको लागि यसको इतिहासको बारेमा पढ्नुहोस्। केही उपयोगी साइटहरू समावेश छन्:
+यस पाठमा तपाईंले वेब ब्राउजरको इतिहासको बारेमा थोरै सिक्नुभयो; यस अवसरलाई वेबको इतिहासको बारेमा थप जान्न प्रयोग गर्नुहोस्। केही उपयोगी साइटहरू समावेश छन्:  
 
-[वेब ब्राउजरहरूको इतिहास](https://www.mozilla.org/firefox/browsers/browser-history/)
+[वेब ब्राउजरहरूको इतिहास](https://www.mozilla.org/firefox/browsers/browser-history/)  
 
-[वेबको इतिहास](https://webfoundation.org/about/vision/history-of-the-web/)
+[वेबको इतिहास](https://webfoundation.org/about/vision/history-of-the-web/)  
 
-[टिम बर्नर्स-लीसँगको अन्तर्वार्ता](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+[टिम बर्नर्स-लीसँगको अन्तर्वार्ता](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  
 
-## असाइनमेन्ट 
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**  
+- [ ] Chrome/Edge एक्सटेन्सन पृष्ठ खोल्नुहोस् (chrome://extensions) र तपाईंले के स्थापना गर्नुभएको छ हेर्नुहोस्  
+- [ ] वेबपेज लोड गर्दा आफ्नो ब्राउजरको DevTools नेटवर्क ट्याब हेर्नुहोस्  
+- [ ] पेज स्रोत हेर्ने प्रयास गर्नुहोस् (Ctrl+U) HTML संरचना हेर्न  
+- [ ] कुनै पनि वेबपेज तत्व निरीक्षण गर्नुहोस् र DevTools मा यसको CSS परिवर्तन गर्नुहोस्  
 
-[आफ्नो एक्सटेन्सनलाई पुनःस्टाइल गर्नुहोस्](assignment.md)
+### 🎯 **अर्को एक घण्टामा तपाईं के हासिल गर्न सक्नुहुन्छ**  
+- [ ] पोस्ट-पाठ क्विज पूरा गर्नुहोस् र ब्राउजरको आधारभूत कुराहरू बुझ्नुहोस्  
+- [ ] ब्राउजर एक्सटेन्सनको लागि आधारभूत manifest.json फाइल सिर्जना गर्नुहोस्  
+- [ ] एउटा साधारण "Hello World" एक्सटेन्सन बनाउनुहोस् जसले पपअप देखाउँछ  
+- [ ] विकासकर्ता मोडमा आफ्नो एक्सटेन्सन लोड परीक्षण गर्नुहोस्  
+- [ ] आफ्नो लक्ष्य ब्राउजरको लागि ब्राउजर एक्सटेन्सन डकुमेन्टेसन अन्वेषण गर्नुहोस्  
+
+### 📅 **तपाईंको हप्ताको एक्सटेन्सन यात्रा**  
+- [ ] वास्तविक उपयोगितासहितको कार्यात्मक ब्राउजर एक्सटेन्सन पूरा गर्नुहोस्  
+- [ ] सामग्री स्क्रिप्टहरू, पृष्ठभूमि स्क्रिप्टहरू, र पपअप अन्तरक्रियाहरूको बारेमा जान्नुहोस्  
+- [ ] स्टोरेज, ट्याब्स, र मेसेजिङ जस्ता ब्राउजर API मास्टर गर्नुहोस्  
+- [ ] आफ्नो एक्सटेन्सनको लागि प्रयोगकर्ता-अनुकूल इन्टरफेस डिजाइन गर्नुहोस्  
+- [ ] विभिन्न वेबसाइटहरू र परिदृश्यहरूमा आफ्नो एक्सटेन्सन परीक्षण गर्नुहोस्  
+- [ ] ब्राउजरको एक्सटेन्सन स्टोरमा आफ्नो एक्सटेन्सन प्रकाशित गर्नुहोस्  
+
+### 🌟 **तपाईंको महिनाको ब्राउजर विकास**  
+- [ ] विभिन्न प्रयोगकर्ता समस्याहरू समाधान गर्ने बहु एक्सटेन्सनहरू निर्माण गर्नुहोस्  
+- [ ] उन्नत ब्राउजर API र सुरक्षा उत्तम अभ्यासहरू सिक्नुहोस्  
+- [ ] ओपन सोर्स ब्राउजर एक्सटेन्सन परियोजनाहरूमा योगदान गर्नुहोस्  
+- [ ] क्रस-ब्राउजर अनुकूलता र प्रगतिशील सुधार मास्टर गर्नुहोस्  
+- [ ] अन्यको लागि एक्सटेन्सन विकास उपकरणहरू र टेम्प्लेटहरू सिर्जना गर्नुहोस्  
+- [ ] ब्राउजर एक्सटेन्सन विशेषज्ञ बन्नुहोस् जो अन्य विकासकर्ताहरूलाई मद्दत गर्छ  
+
+## 🎯 तपाईंको ब्राउजर एक्सटेन्सन मास्टरी समयरेखा  
+
+```mermaid
+timeline
+    title Browser Extension Development Progression
+    
+    section Foundation (15 minutes)
+        Browser Understanding: Core architecture
+                              : Rendering process
+                              : Extension integration points
+        
+    section Setup (20 minutes)
+        Development Environment: Project structure
+                               : Build tools configuration
+                               : Browser developer mode
+                               : Extension loading process
+        
+    section Interface Design (25 minutes)
+        User Experience: HTML structure
+                       : CSS styling
+                       : Form validation
+                       : Responsive design
+        
+    section Core Functionality (35 minutes)
+        JavaScript Integration: Event handling
+                              : API interactions
+                              : Data storage
+                              : Error handling
+        
+    section Browser APIs (45 minutes)
+        Platform Integration: Permissions system
+                            : Storage APIs
+                            : Tab management
+                            : Context menus
+        
+    section Advanced Features (1 week)
+        Professional Extensions: Background scripts
+                               : Content scripts
+                               : Cross-browser compatibility
+                               : Performance optimization
+        
+    section Publishing (2 weeks)
+        Distribution: Store submission
+                   : Review process
+                   : User feedback
+                   : Update management
+        
+    section Expert Level (1 month)
+        Extension Ecosystem: Advanced APIs
+                           : Security best practices
+                           : Enterprise features
+                           : Framework integration
+```
+  
+### 🛠️ तपाईंको एक्सटेन्सन विकास उपकरणको सारांश  
+
+यस पाठ पूरा गरेपछि, अब तपाईंसँग छ:  
+- **ब्राउजर आर्किटेक्चर ज्ञान**: रेंडरिङ इन्जिन, सुरक्षा मोडेल, र एक्सटेन्सन एकीकरणको बुझाइ  
+- **विकास वातावरण**: Webpack, NPM, र डिबगिङ क्षमताहरूको साथ आधुनिक टूलचेन  
+- **UI/UX आधारभूत संरचना**: प्रगतिशील डिस्क्लोजर ढाँचाहरूको साथ सेम्यान्टिक HTML संरचना  
+- **सुरक्षा सचेतता**: ब्राउजर अनुमति र सुरक्षित विकास अभ्यासहरूको बुझाइ  
+- **क्रस-ब्राउजर अवधारणाहरू**: अनुकूलता विचारहरू र परीक्षण दृष्टिकोणहरूको ज्ञान  
+- **API एकीकरण**: बाह्य डेटा स्रोतहरूसँग काम गर्ने आधार  
+- **व्यावसायिक कार्यप्रवाह**: उद्योग-मानक विकास र परीक्षण प्रक्रियाहरू  
+
+**वास्तविक-विश्व अनुप्रयोगहरू**: यी सीपहरू सीधा लागू हुन्छन्:  
+- **वेब विकास**: सिंगल-पेज एप्लिकेसनहरू र प्रगतिशील वेब एपहरू  
+- **डेस्कटप अनुप्रयोगहरू**: इलेक्ट्रोन र वेब-आधारित डेस्कटप सफ्टवेयर  
+- **मोबाइल विकास**: हाइब्रिड एपहरू र वेब-आधारित मोबाइल समाधानहरू  
+- **उद्यम उपकरणहरू**: आन्तरिक उत्पादकता अनुप्रयोगहरू र कार्यप्रवाह स्वचालन  
+- **ओपन सोर्स**: ब्राउजर एक्सटेन्सन परियोजनाहरू र वेब मानकहरूमा योगदान  
+
+**अर्को स्तर**: अब तपाईं अन्तरक्रियात्मक कार्यक्षमता थप्न, ब्राउजर API सँग काम गर्न, र वास्तविक प्रयोगकर्ता समस्याहरू समाधान गर्ने एक्सटेन्सनहरू सिर्जना गर्न तयार हुनुहुन्छ!  
+
+## असाइनमेन्ट  
+
+[आफ्नो एक्सटेन्सनलाई पुनःस्टाइल गर्नुहोस्](assignment.md)  
 
 ---
 
diff --git a/translations/ne/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ne/5-browser-extension/2-forms-browsers-local-storage/README.md
index ad01895665..2e93845c8d 100644
--- a/translations/ne/5-browser-extension/2-forms-browsers-local-storage/README.md
+++ b/translations/ne/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -1,35 +1,109 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8c8cd4af6086cc1d47e1d43aa4983d20",
-  "translation_date": "2025-10-22T17:17:46+00:00",
+  "original_hash": "2b6203a48c48d8234e0948353b47d84e",
+  "translation_date": "2025-11-03T15:58:57+00:00",
   "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
   "language_code": "ne"
 }
 -->
 # ब्राउजर एक्सटेन्सन प्रोजेक्ट भाग २: API कल गर्नुहोस्, लोकल स्टोरेज प्रयोग गर्नुहोस्
 
+```mermaid
+journey
+    title Your API Integration & Storage Journey
+    section Foundation
+      Setup DOM references: 3: Student
+      Add event listeners: 4: Student
+      Handle form submission: 4: Student
+    section Data Management
+      Implement local storage: 4: Student
+      Build API calls: 5: Student
+      Handle async operations: 5: Student
+    section User Experience
+      Add error handling: 5: Student
+      Create loading states: 4: Student
+      Polish interactions: 5: Student
+```
+
 ## प्रि-लेक्चर क्विज
 
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/25)
 
 ## परिचय
 
-तपाईंले सुरु गरेको ब्राउजर एक्सटेन्सन सम्झनुहोस्? अहिले तपाईंले राम्रो देखिने फारम बनाउनु भएको छ, तर यो मुख्य रूपमा स्थिर छ। आज हामी यसलाई वास्तविक डाटासँग जोडेर र यसलाई मेमोरी दिने काम गरेर जीवन्त बनाउनेछौं।
-
-अपोलो मिशन कन्ट्रोल कम्प्युटरहरूको बारेमा सोच्नुहोस् - तिनीहरूले स्थिर जानकारी मात्र देखाएनन्। तिनीहरूले लगातार अन्तरिक्ष यानसँग संवाद गरे, टेलिमेट्री डाटासँग अपडेट गरे, र महत्वपूर्ण मिशन प्यारामिटरहरू सम्झिए। आज हामी यस्तै गतिशील व्यवहार निर्माण गर्दैछौं। तपाईंको एक्सटेन्सनले इन्टरनेटमा पुग्नेछ, वास्तविक वातावरणीय डाटा लिनेछ, र अर्को पटकका लागि तपाईंको सेटिङहरू सम्झिनेछ।
-
-API एकीकरण जटिल लाग्न सक्छ, तर यो वास्तवमा तपाईंको कोडलाई अन्य सेवाहरूसँग संवाद गर्न सिकाउने कुरा हो। चाहे तपाईं मौसम डाटा, सामाजिक मिडिया फिडहरू, वा कार्बन फुटप्रिन्ट जानकारी जस्तै हामी आज गर्नेछौं, यो सबै डिजिटल कनेक्शन स्थापना गर्ने बारे हो। हामी ब्राउजरहरूले जानकारी कसरी स्थायी बनाउन सक्छन् भन्ने कुरा पनि अन्वेषण गर्नेछौं - जस्तै पुस्तकालयहरूले पुस्तकहरू कहाँ राख्ने भनेर सम्झन कार्ड क्याटलग प्रयोग गरेका थिए।
-
-यस पाठको अन्त्यसम्ममा, तपाईंले वास्तविक डाटा ल्याउने, प्रयोगकर्ता प्राथमिकताहरू भण्डारण गर्ने, र सहज अनुभव प्रदान गर्ने ब्राउजर एक्सटेन्सन बनाउनु हुनेछ। सुरु गरौं!
+तपाईंले सुरु गरेको ब्राउजर एक्सटेन्सन सम्झनुहोस्? अहिले तपाईंको फर्म राम्रो देखिन्छ, तर यो मुख्य रूपमा स्थिर छ। आज हामी यसलाई वास्तविक डाटासँग जोडेर र यसलाई मेमोरी दिनेर जीवन्त बनाउनेछौं।
+
+अपोलो मिशन कन्ट्रोल कम्प्युटरहरूको बारेमा सोच्नुहोस् - तिनीहरूले स्थिर जानकारी मात्र देखाएनन्। तिनीहरूले लगातार अन्तरिक्ष यानसँग संवाद गरे, टेलिमेट्री डाटासँग अपडेट गरे, र महत्वपूर्ण मिशन प्यारामिटरहरू सम्झिए। आज हामी त्यस्तै गतिशील व्यवहार निर्माण गर्दैछौं। तपाईंको एक्सटेन्सनले इन्टरनेटमा पुग्नेछ, वास्तविक वातावरणीय डाटा लिनेछ, र अर्को पटकका लागि तपाईंको सेटिङहरू सम्झिनेछ।
+
+API एकीकरण जटिल लाग्न सक्छ, तर यो वास्तवमा तपाईंको कोडलाई अन्य सेवाहरूसँग कसरी संवाद गर्ने सिकाउने कुरा हो। चाहे तपाईं मौसम डाटा, सामाजिक मिडिया फिडहरू, वा कार्बन फुटप्रिन्ट जानकारी जस्तै हामी आज गर्नेछौं, यो डिजिटल कनेक्शनहरू स्थापना गर्ने बारे हो। हामी ब्राउजरहरूले जानकारी कसरी स्थायी बनाउन सक्छन् भन्ने पनि अन्वेषण गर्नेछौं - जस्तै पुस्तकालयहरूले कार्ड क्याटलग प्रयोग गरेर पुस्तकहरू कहाँ राख्ने सम्झन्छन्।
+
+यस पाठको अन्त्यमा, तपाईंको ब्राउजर एक्सटेन्सनले वास्तविक डाटा ल्याउनेछ, प्रयोगकर्ता प्राथमिकताहरू भण्डारण गर्नेछ, र एक सहज अनुभव प्रदान गर्नेछ। सुरु गरौं!
+
+```mermaid
+mindmap
+  root((Dynamic Extensions))
+    DOM Manipulation
+      Element Selection
+      Event Handling
+      State Management
+      UI Updates
+    Local Storage
+      Data Persistence
+      Key-Value Pairs
+      Session Management
+      User Preferences
+    API Integration
+      HTTP Requests
+      Authentication
+      Data Parsing
+      Error Handling
+    Async Programming
+      Promises
+      Async/Await
+      Error Catching
+      Non-blocking Code
+    User Experience
+      Loading States
+      Error Messages
+      Smooth Transitions
+      Data Validation
+```
 
 ✅ उपयुक्त फाइलहरूमा क्रमांकित खण्डहरू अनुसरण गर्नुहोस् ताकि तपाईंको कोड कहाँ राख्ने थाहा पाउन सक्नुहोस्।
 
 ## एक्सटेन्सनमा परिवर्तन गर्नका लागि तत्वहरू सेट गर्नुहोस्
 
-तपाईंको जाभास्क्रिप्टले इन्टरफेसलाई परिवर्तन गर्न सक्नु अघि, यसलाई विशिष्ट HTML तत्वहरूको सन्दर्भहरू चाहिन्छ। यसलाई टेलिस्कोपले विशेष ताराहरूमा केन्द्रित हुन आवश्यक छ जस्तै सोच्नुहोस् - ग्यालिलियोले बृहस्पति ग्रहको चन्द्रमाहरू अध्ययन गर्नुअघि, उसले बृहस्पति आफैंलाई पत्ता लगाउन र केन्द्रित गर्नुपर्थ्यो।
-
-तपाईंको `index.js` फाइलमा, हामी `const` भेरिएबलहरू सिर्जना गर्नेछौं जसले प्रत्येक महत्वपूर्ण फारम तत्वको सन्दर्भहरू कब्जा गर्छ। यो वैज्ञानिकहरूले आफ्नो उपकरणहरू लेबल गर्ने तरिकासँग मिल्दोजुल्दो छ - प्रत्येक पटक प्रयोगशालामा खोजी गर्नको सट्टा, उनीहरूले सीधा आवश्यक वस्तुहरू पहुँच गर्न सक्छन्।
+तपाईंको जाभास्क्रिप्टले इन्टरफेसलाई परिवर्तन गर्न सक्नु अघि, यसलाई विशिष्ट HTML तत्वहरूको सन्दर्भहरू आवश्यक छ। यो टेलिस्कोपलाई विशेष ताराहरूमा लक्षित गर्न आवश्यक जस्तै हो - ग्यालिलियोले बृहस्पति अध्ययन गर्नुअघि, उसले बृहस्पतिलाई पत्ता लगाउन र ध्यान केन्द्रित गर्नुपर्थ्यो।
+
+तपाईंको `index.js` फाइलमा, हामी `const` भेरिएबलहरू सिर्जना गर्नेछौं जसले प्रत्येक महत्वपूर्ण फर्म तत्वको सन्दर्भहरू कब्जा गर्छ। यो वैज्ञानिकहरूले आफ्नो उपकरणहरू लेबल गर्ने तरिकासँग मिल्दोजुल्दो छ - प्रत्येक पटक प्रयोगशालामा खोजी गर्नुको सट्टा, उनीहरूले सीधा आवश्यक वस्तुहरू पहुँच गर्न सक्छन्।
+
+```mermaid
+flowchart LR
+    A[JavaScript Code] --> B[document.querySelector]
+    B --> C[CSS Selectors]
+    C --> D[HTML Elements]
+    
+    D --> E[".form-data"]
+    D --> F[".region-name"]
+    D --> G[".api-key"]
+    D --> H[".loading"]
+    D --> I[".errors"]
+    D --> J[".result-container"]
+    
+    E --> K[Form Element]
+    F --> L[Input Field]
+    G --> M[Input Field]
+    H --> N[UI Element]
+    I --> O[UI Element]
+    J --> P[UI Element]
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style K fill:#fff3e0
+    style L fill:#fff3e0
+    style M fill:#fff3e0
+```
 
 ```javascript
 // form fields
@@ -47,16 +121,39 @@ const myregion = document.querySelector('.my-region');
 const clearBtn = document.querySelector('.clear-btn');
 ```
 
-**यस कोडले के गर्छ:**
-- फारम तत्वहरूलाई `document.querySelector()` प्रयोग गरेर CSS क्लास चयनकर्तासँग **कब्जा गर्छ**।
-- क्षेत्र नाम र API कुञ्जीका लागि इनपुट फिल्डहरूको सन्दर्भहरू **सिर्जना गर्छ**।
-- कार्बन प्रयोग डाटाका लागि परिणाम प्रदर्शन तत्वहरूसँग **जोड्दछ**।
-- लोडिङ संकेतकहरू र त्रुटि सन्देशहरू जस्ता UI तत्वहरूमा पहुँच **सेट अप गर्छ**।
-- **प्रत्येक तत्व सन्दर्भलाई** `const` भेरिएबलमा भण्डारण गर्छ ताकि तपाईंको कोडमा सजिलै पुन: प्रयोग गर्न सकियोस्।
+**यो कोडले के गर्छ:**
+- **क्याप्चर गर्छ** फर्म तत्वहरू `document.querySelector()` प्रयोग गरेर CSS क्लास चयनकर्ताहरूको साथ
+- **सिर्जना गर्छ** क्षेत्र नाम र API कुञ्जीको लागि इनपुट फिल्डहरूको सन्दर्भहरू
+- **जोड्छ** कार्बन प्रयोग डाटाको लागि परिणाम प्रदर्शन तत्वहरूसँग कनेक्शन
+- **सेट अप गर्छ** लोडिङ संकेतकहरू र त्रुटि सन्देशहरू जस्ता UI तत्वहरूमा पहुँच
+- **भण्डारण गर्छ** प्रत्येक तत्व सन्दर्भलाई `const` भेरिएबलमा ताकि तपाईंको कोडमा सजिलै पुन: प्रयोग गर्न सकियोस्
 
 ## इभेन्ट लिसनरहरू थप्नुहोस्
 
-अब हामी तपाईंको एक्सटेन्सनलाई प्रयोगकर्ताको क्रियाकलापहरूमा प्रतिक्रिया दिन बनाउनेछौं। इभेन्ट लिसनरहरू तपाईंको कोडले प्रयोगकर्ताको अन्तरक्रियाहरू निगरानी गर्ने तरिका हो। यसलाई प्रारम्भिक टेलिफोन एक्सचेन्जका अपरेटरहरू जस्तै सोच्नुहोस् - उनीहरूले आउने कलहरूको लागि सुने र कसैले जडान गर्न चाहेको बेला सही सर्किटहरू जडान गरे।
+अब हामी तपाईंको एक्सटेन्सनलाई प्रयोगकर्ताको क्रियाकलापहरूमा प्रतिक्रिया दिन बनाउनेछौं। इभेन्ट लिसनरहरू तपाईंको कोडको प्रयोगकर्ता अन्तरक्रियाहरू निगरानी गर्ने तरिका हो। तिनीहरू प्रारम्भिक टेलिफोन एक्सचेन्जका अपरेटरहरू जस्तै हुन् - तिनीहरूले इनकमिङ कलहरूको लागि सुने र कसैले कनेक्शन गर्न चाहँदा सही सर्किटहरू जोड्ने।
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Form
+    participant JavaScript
+    participant API
+    participant Storage
+    
+    User->>Form: Fills out region/API key
+    User->>Form: Clicks submit
+    Form->>JavaScript: Triggers submit event
+    JavaScript->>JavaScript: handleSubmit(e)
+    JavaScript->>Storage: Save user preferences
+    JavaScript->>API: Fetch carbon data
+    API->>JavaScript: Returns data
+    JavaScript->>Form: Update UI with results
+    
+    User->>Form: Clicks clear button
+    Form->>JavaScript: Triggers click event
+    JavaScript->>Storage: Clear saved data
+    JavaScript->>Form: Reset to initial state
+```
 
 ```javascript
 form.addEventListener('submit', (e) => handleSubmit(e));
@@ -65,18 +162,28 @@ init();
 ```
 
 **यी अवधारणाहरू बुझ्दै:**
-- फारममा सबमिट लिसनर **जोड्छ**, जसले प्रयोगकर्ताहरूले इन्टर थिच्दा वा सबमिट क्लिक गर्दा ट्रिगर गर्छ।
-- फारम रिसेट गर्नका लागि क्लियर बटनमा क्लिक लिसनर **जोड्छ**।
-- थप नियन्त्रणका लागि इभेन्ट वस्तु `(e)` ह्यान्डलर फङ्सनहरूमा **पठाउँछ**।
-- तपाईंको एक्सटेन्सनको प्रारम्भिक अवस्था सेट अप गर्न `init()` फङ्सनलाई तुरुन्तै **कल गर्छ**।
+- **जोड्छ** फर्ममा सबमिट लिसनर जसले प्रयोगकर्ताहरूले इन्टर थिच्दा वा सबमिट क्लिक गर्दा ट्रिगर गर्छ
+- **कनेक्ट गर्छ** क्लियर बटनमा क्लिक लिसनर जसले फर्म रिसेट गर्न ट्रिगर गर्छ
+- **पास गर्छ** इभेन्ट वस्तु `(e)` ह्यान्डलर फङ्सनहरूमा थप नियन्त्रणको लागि
+- **कल गर्छ** `init()` फङ्सन तुरुन्तै ताकि तपाईंको एक्सटेन्सनको प्रारम्भिक अवस्था सेटअप होस्
+
+✅ यहाँ प्रयोग गरिएको छोटो एरो फङ्सन सिन्ट्याक्सलाई ध्यान दिनुहोस्। यो आधुनिक जाभास्क्रिप्ट दृष्टिकोण परम्परागत फङ्सन अभिव्यक्तिहरू भन्दा सफा छ, तर दुवै समान रूपमा काम गर्छन्!
 
-✅ यहाँ प्रयोग गरिएको छोटो एरो फङ्सन सिन्ट्याक्सलाई नोट गर्नुहोस्। यो आधुनिक जाभास्क्रिप्ट दृष्टिकोण परम्परागत फङ्सन अभिव्यक्तिहरू भन्दा सफा छ, तर दुवै समान रूपमा काम गर्छन्!
+### 🔄 **शैक्षिक जाँच**
+**इभेन्ट ह्यान्डलिङ बुझाइ**: इनिसियलाइजेसनमा जानु अघि सुनिश्चित गर्नुहोस् कि तपाईं:
+- ✅ कसरी `addEventListener` प्रयोगकर्ता क्रियाकलापहरूलाई जाभास्क्रिप्ट फङ्सनहरूसँग जोड्छ भन्ने व्याख्या गर्न सक्नुहुन्छ
+- ✅ किन हामी इभेन्ट वस्तु `(e)` ह्यान्डलर फङ्सनहरूमा पास गर्छौं भन्ने बुझ्न सक्नुहुन्छ
+- ✅ `submit` र `click` इभेन्टहरू बीचको भिन्नता चिन्न सक्नुहुन्छ
+- ✅ `init()` फङ्सन कहिले चल्छ र किन भन्ने वर्णन गर्न सक्नुहुन्छ
+
+**छोटो आत्म-परीक्षण**: यदि तपाईंले फर्म सबमिशनमा `e.preventDefault()` बिर्सनुभयो भने के हुन्छ?
+*उत्तर: पृष्ठ पुनः लोड हुनेछ, सबै जाभास्क्रिप्ट अवस्था हराउनेछ र प्रयोगकर्ता अनुभवलाई बाधा पुर्‍याउनेछ*
 
 ## इनिसियलाइजेसन र रिसेट फङ्सनहरू निर्माण गर्नुहोस्
 
-अब तपाईंको एक्सटेन्सनको इनिसियलाइजेसन तर्क सिर्जना गरौं। `init()` फङ्सन जहाजको नेभिगेसन प्रणाली जस्तै हो जसले आफ्नो उपकरणहरू जाँच गर्छ - यसले वर्तमान अवस्था निर्धारण गर्छ र इन्टरफेसलाई तदनुसार समायोजन गर्छ। यसले कसैले पहिले तपाईंको एक्सटेन्सन प्रयोग गरेको छ कि छैन जाँच गर्छ र तिनीहरूको अघिल्लो सेटिङहरू लोड गर्छ।
+अब तपाईंको एक्सटेन्सनको इनिसियलाइजेसन तर्क सिर्जना गरौं। `init()` फङ्सन जहाजको नेभिगेसन प्रणाली जस्तै हो जसले यसको उपकरणहरू जाँच्छ - यसले वर्तमान अवस्था निर्धारण गर्छ र इन्टरफेसलाई त्यस अनुसार समायोजन गर्छ। यसले कसैले पहिले तपाईंको एक्सटेन्सन प्रयोग गरेको छ कि छैन जाँच्छ र तिनीहरूको अघिल्लो सेटिङहरू लोड गर्छ।
 
-`reset()` फङ्सनले प्रयोगकर्ताहरूलाई नयाँ सुरुवात प्रदान गर्छ - जस्तै वैज्ञानिकहरूले आफ्नो उपकरणहरू प्रयोगहरू बीच रिसेट गर्छन् ताकि सफा डाटा सुनिश्चित गर्न सकियोस्।
+`reset()` फङ्सनले प्रयोगकर्ताहरूलाई नयाँ सुरुवात प्रदान गर्दछ - जस्तै वैज्ञानिकहरूले आफ्नो उपकरणहरू सफा डाटाको सुनिश्चित गर्न प्रयोगहरू बीच रिसेट गर्छन्।
 
 ```javascript
 function init() {
@@ -113,41 +220,65 @@ function reset(e) {
 ```
 
 **यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
-- ब्राउजरको लोकल स्टोरेजबाट भण्डारित API कुञ्जी र क्षेत्र पुन: प्राप्त **गर्छ**।
-- यो पहिलो पटक प्रयोगकर्ता हो (कुनै भण्डारित प्रमाणहरू छैनन्) वा पुन: आउने प्रयोगकर्ता हो भनेर **जाँच गर्छ**।
-- नयाँ प्रयोगकर्ताहरूका लागि सेटअप फारम **देखाउँछ** र अन्य इन्टरफेस तत्वहरू लुकाउँछ।
-- पुन: आउने प्रयोगकर्ताहरूका लागि स्वत: भण्डारित डाटा **लोड गर्छ** र रिसेट विकल्प **देखाउँछ**।
-- उपलब्ध डाटाको आधारमा प्रयोगकर्ता इन्टरफेसको अवस्था **व्यवस्थापन गर्छ**।
+- **पुनः प्राप्त गर्छ** ब्राउजरको लोकल स्टोरेजबाट भण्डारण गरिएको API कुञ्जी र क्षेत्र
+- **जाँच्छ** यो पहिलो पटक प्रयोगकर्ता हो (कुनै भण्डारण गरिएको प्रमाणपत्र छैन) वा फर्कने प्रयोगकर्ता
+- **देखाउँछ** नयाँ प्रयोगकर्ताहरूको लागि सेटअप फर्म र अन्य इन्टरफेस तत्वहरू लुकाउँछ
+- **स्वचालित रूपमा लोड गर्छ** फर्कने प्रयोगकर्ताहरूको लागि बचत गरिएको डाटा र रिसेट विकल्प देखाउँछ
+- **प्रबन्ध गर्छ** उपलब्ध डाटाको आधारमा प्रयोगकर्ता इन्टरफेस अवस्था
 
 **लोकल स्टोरेजको बारेमा मुख्य अवधारणाहरू:**
-- ब्राउजर सत्रहरू बीच डाटा **स्थायी बनाउँछ** (सत्र स्टोरेजको विपरीत)।
-- `getItem()` र `setItem()` प्रयोग गरेर डाटालाई कुञ्जी-मूल्य जोडीको रूपमा **भण्डारण गर्छ**।
-- दिइएको कुञ्जीको लागि कुनै डाटा नभएको अवस्थामा `null` **फिर्ता गर्छ**।
-- प्रयोगकर्ता प्राथमिकताहरू र सेटिङहरू सम्झनको लागि सरल तरिका **प्रदान गर्छ**।
+- **स्थायी बनाउँछ** ब्राउजर सत्रहरू बीच डाटा (सेसन स्टोरेजको विपरीत)
+- **भण्डारण गर्छ** `getItem()` र `setItem()` प्रयोग गरेर की-वैल्यू जोडीहरूमा डाटा
+- **फर्काउँछ** `null` जब कुनै डाटा दिइएको कीको लागि अवस्थित छैन
+- **सजिलो बनाउँछ** प्रयोगकर्ता प्राथमिकताहरू र सेटिङहरू सम्झन
 
-> 💡 **ब्राउजर स्टोरेज बुझ्दै**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) तपाईंको एक्सटेन्सनलाई स्थायी मेमोरी दिने जस्तै हो। प्राचीन अलेक्जेन्ड्रिया पुस्तकालयले स्क्रोलहरू भण्डारण गरेको जस्तै - जानकारी उपलब्ध रहन्थ्यो जब विद्वानहरू छोड्थे र फर्कन्थे।
+> 💡 **ब्राउजर स्टोरेज बुझाइ**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) तपाईंको एक्सटेन्सनलाई स्थायी मेमोरी दिने जस्तै हो। प्राचीन अलेक्जेन्ड्रिया पुस्तकालयले स्क्रोलहरू भण्डारण गरेको जस्तै - जानकारी उपलब्ध रहन्थ्यो जब विद्वानहरू गएर फर्कन्थे।
 >
 > **मुख्य विशेषताहरू:**
-> - ब्राउजर बन्द गरेपछि पनि डाटा **स्थायी रहन्छ**।
-> - कम्प्युटर पुन: सुरु र ब्राउजर क्र्यासपछि पनि **बाँच्छ**।
-> - प्रयोगकर्ता प्राथमिकताहरूका लागि पर्याप्त भण्डारण स्थान **प्रदान गर्छ**।
-> - नेटवर्क ढिलाइ बिना तुरुन्त पहुँच **प्रदान गर्छ**।
+> - **स्थायी बनाउँछ** डाटा तपाईंको ब्राउजर बन्द गरेपछि पनि
+> - **बाँच्छ** कम्प्युटर पुनः सुरु र ब्राउजर क्र्यासहरू
+> - **प्रदान गर्छ** प्रयोगकर्ता प्राथमिकताहरूको लागि पर्याप्त भण्डारण स्थान
+> - **तत्काल पहुँच दिन्छ** नेटवर्क ढिलाइ बिना
 
 > **महत्वपूर्ण नोट**: तपाईंको ब्राउजर एक्सटेन्सनको आफ्नै अलग लोकल स्टोरेज छ जुन नियमित वेब पृष्ठहरूबाट अलग छ। यसले सुरक्षा प्रदान गर्छ र अन्य वेबसाइटहरूसँग द्वन्द्व रोक्छ।
 
-तपाईं आफ्नो भण्डारित डाटा ब्राउजर डेभलपर टूल्स (F12) खोल्दै, **Application** ट्याबमा नेभिगेट गर्दै, र **Local Storage** सेक्सन विस्तार गरेर हेर्न सक्नुहुन्छ।
+तपाईं आफ्नो भण्डारण गरिएको डाटा ब्राउजर डेभलपर टूल्स (F12) खोल्दै, **Application** ट्याबमा नेभिगेट गर्दै, र **Local Storage** सेक्सन विस्तार गरेर हेर्न सक्नुहुन्छ।
+
+```mermaid
+stateDiagram-v2
+    [*] --> CheckStorage: Extension starts
+    CheckStorage --> FirstTime: No stored data
+    CheckStorage --> Returning: Data found
+    
+    FirstTime --> ShowForm: Display setup form
+    ShowForm --> UserInput: User enters data
+    UserInput --> SaveData: Store in localStorage
+    SaveData --> FetchAPI: Get carbon data
+    
+    Returning --> LoadData: Read from localStorage
+    LoadData --> FetchAPI: Get carbon data
+    
+    FetchAPI --> ShowResults: Display data
+    ShowResults --> UserAction: User interacts
+    
+    UserAction --> Reset: Clear button clicked
+    UserAction --> ShowResults: View data
+    
+    Reset --> ClearStorage: Remove saved data
+    ClearStorage --> FirstTime: Back to setup
+```
 
 ![लोकल स्टोरेज प्यान](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ne.png)
 
-> ⚠️ **सुरक्षा विचार**: उत्पादन अनुप्रयोगहरूमा, लोकल स्टोरेजमा API कुञ्जीहरू भण्डारण गर्दा सुरक्षा जोखिमहरू हुन्छन् किनभने जाभास्क्रिप्टले यो डाटामा पहुँच गर्न सक्छ। सिक्ने उद्देश्यका लागि, यो दृष्टिकोण ठीक छ, तर वास्तविक अनुप्रयोगहरूले संवेदनशील प्रमाणहरूको लागि सुरक्षित सर्भर-साइड स्टोरेज प्रयोग गर्नुपर्छ।
+> ⚠️ **सुरक्षा विचार**: उत्पादन अनुप्रयोगहरूमा, लोकल स्टोरेजमा API कुञ्जीहरू भण्डारण गर्दा सुरक्षा जोखिमहरू हुन्छन् किनभने जाभास्क्रिप्टले यो डाटामा पहुँच गर्न सक्छ। सिक्ने उद्देश्यका लागि, यो दृष्टिकोण ठीक छ, तर वास्तविक अनुप्रयोगहरूले संवेदनशील प्रमाणपत्रहरूको लागि सुरक्षित सर्भर-साइड स्टोरेज प्रयोग गर्नुपर्छ।
 
-## फारम सबमिशन ह्यान्डल गर्नुहोस्
+## फर्म सबमिशन ह्यान्डल गर्नुहोस्
 
-अब हामी कसैले तपाईंको फारम सबमिट गर्दा के हुन्छ भन्ने कुरा ह्यान्डल गर्नेछौं। डिफल्ट रूपमा, ब्राउजरहरूले फारम सबमिट गर्दा पृष्ठ पुन: लोड गर्छन्, तर हामी यस व्यवहारलाई रोक्नेछौं ताकि सहज अनुभव सिर्जना गर्न सकियोस्।
+अब हामी कसैले तपाईंको फर्म सबमिट गर्दा के हुन्छ भन्ने ह्यान्डल गर्नेछौं। डिफल्ट रूपमा, ब्राउजरहरूले फर्म सबमिट गर्दा पृष्ठ पुनः लोड गर्छन्, तर हामी यो व्यवहारलाई रोक्नेछौं ताकि एक सहज अनुभव सिर्जना गर्न सकियोस्।
 
-यो दृष्टिकोण मिशन कन्ट्रोलले अन्तरिक्ष यानसँगको संवाद ह्यान्डल गर्ने तरिकासँग मेल खान्छ - प्रत्येक प्रसारणको लागि सम्पूर्ण प्रणाली रिसेट गर्ने सट्टा, तिनीहरूले नयाँ जानकारी प्रशोधन गर्दा निरन्तर सञ्चालन कायम राख्छन्।
+यो दृष्टिकोण मिशन कन्ट्रोलले अन्तरिक्ष यान संचार ह्यान्डल गर्ने तरिकासँग मेल खान्छ - प्रत्येक ट्रान्समिशनको लागि सम्पूर्ण प्रणाली रिसेट गर्नुको सट्टा, तिनीहरूले नयाँ जानकारी प्रशोधन गर्दा निरन्तर सञ्चालन कायम राख्छन्।
 
-फारम सबमिशन इभेन्टलाई कब्जा गर्ने र प्रयोगकर्ताको इनपुट निकाल्ने फङ्सन सिर्जना गर्नुहोस्:
+फर्म सबमिशन इभेन्टलाई क्याप्चर गर्ने र प्रयोगकर्ताको इनपुट निकाल्ने फङ्सन सिर्जना गर्नुहोस्:
 
 ```javascript
 function handleSubmit(e) {
@@ -156,17 +287,17 @@ function handleSubmit(e) {
 }
 ```
 
-**माथिकोमा, हामीले:**
-- पृष्ठलाई रिफ्रेस गर्ने डिफल्ट फारम सबमिशन व्यवहारलाई **रोक्छ**।
-- API कुञ्जी र क्षेत्र फिल्डहरूबाट प्रयोगकर्ता इनपुट मानहरू **निकाल्छ**।
-- फारम डाटालाई `setUpUser()` फङ्सनमा प्रशोधनका लागि **पठाउँछ**।
-- पृष्ठ रिफ्रेस नगरी एकल-पृष्ठ अनुप्रयोग व्यवहार **राख्छ**।
+**माथिको कोडमा:**
+- **रोक्छ** डिफल्ट फर्म सबमिशन व्यवहार जसले पृष्ठलाई रिफ्रेस गर्नेछ
+- **निकाल्छ** प्रयोगकर्ताको इनपुट मानहरू API कुञ्जी र क्षेत्र फिल्डहरूबाट
+- **पास गर्छ** फर्म डाटालाई `setUpUser()` फङ्सनमा प्रशोधनको लागि
+- **राख्छ** पृष्ठ रिफ्रेस नगरी सिंगल-पेज एप्लिकेसन व्यवहार
 
-✅ तपाईंको HTML फारम फिल्डहरूमा `required` एट्रिब्युट समावेश छ, त्यसैले ब्राउजरले स्वत: मान्य गर्छ कि प्रयोगकर्ताहरूले यो फङ्सन चल्नु अघि API कुञ्जी र क्षेत्र दुवै प्रदान गरेका छन्।
+✅ याद गर्नुहोस् कि तपाईंको HTML फर्म फिल्डहरूमा `required` एट्रिब्युट समावेश छ, त्यसैले ब्राउजरले स्वतः मान्य गर्दछ कि प्रयोगकर्ताहरूले यो फङ्सन चल्नु अघि API कुञ्जी र क्षेत्र दुवै प्रदान गरेका छन्।
 
 ## प्रयोगकर्ता प्राथमिकताहरू सेट गर्नुहोस्
 
-`setUpUser` फङ्सन प्रयोगकर्ताको प्रमाणहरू बचत गर्ने र पहिलो API कल सुरु गर्ने जिम्मेवार छ। यसले सेटअपबाट परिणामहरू प्रदर्शन गर्न सहज संक्रमण सिर्जना गर्छ।
+`setUpUser` फङ्सन प्रयोगकर्ताको प्रमाणपत्रहरू बचत गर्ने र पहिलो API कल सुरु गर्ने जिम्मेवार छ। यसले सेटअपबाट परिणामहरू प्रदर्शन गर्न सहज संक्रमण सिर्जना गर्छ।
 
 ```javascript
 function setUpUser(apiKey, regionName) {
@@ -185,43 +316,100 @@ function setUpUser(apiKey, regionName) {
 ```
 
 **चरणबद्ध रूपमा, यहाँ के हुन्छ:**
-- भविष्यमा प्रयोगका लागि API कुञ्जी र क्षेत्र नाम लोकल स्टोरेजमा **बचत गर्छ**।
-- डाटा लिइरहेको जानकारी दिन प्रयोगकर्ताहरूलाई लोडिङ संकेतक **देखाउँछ**।
-- प्रदर्शनबाट कुनै पनि अघिल्लो त्रुटि सन्देशहरू **मेट्छ**।
-- प्रयोगकर्ताहरूलाई पछि आफ्नो सेटिङहरू रिसेट गर्न क्लियर बटन **देखाउँछ**।
-- वास्तविक कार्बन प्रयोग डाटा ल्याउन API कल **सुरु गर्छ**।
+- **बचत गर्छ** API कुञ्जी र क्षेत्र नामलाई भविष्यको प्रयोगको लागि लोकल स्टोरेजमा
+- **देखाउँछ** लोडिङ संकेतक ताकि प्रयोगकर्ताहरूलाई जानकारी दिइयो कि डाटा ल्याइँदैछ
+- **सफा गर्छ** प्रदर्शनबाट कुनै पनि अघिल्लो त्रुटि सन्देशहरू
+- **देखाउँछ** क्लियर बटन ताकि प्रयोगकर्ताहरूले पछि आफ्नो सेटिङहरू रिसेट गर्न सकून्
+- **सुरु गर्छ** API कल ताकि वास्तविक कार्बन प्रयोग डाटा ल्याउन सकियोस्
 
-यस फङ्सनले डाटा स्थायित्व र प्रयोगकर्ता इन्टरफेस अपडेटहरूलाई एक समन्वित कार्यमा व्यवस्थापन गरेर सहज प्रयोगकर्ता अनुभव सिर्जना गर्छ।
+यो फङ्सनले डाटा स्थायित्व र प्रयोगकर्ता इन्टरफेस अपडेटहरूलाई एक समन्वित कार्यमा व्यवस्थापन गरेर एक सहज प्रयोगकर्ता अनुभव सिर्जना गर्छ।
 
 ## कार्बन प्रयोग डाटा प्रदर्शन गर्नुहोस्
 
-अब हामी तपाईंको एक्सटेन्सनलाई API मार्फत बाह्य डाटा स्रोतहरूसँग जडान गर्नेछौं। यसले तपाईंको एक्सटेन्सनलाई एकल उपकरणबाट इन्टरनेटभरि वास्तविक-समय जानकारी पहुँच गर्न सक्ने चीजमा रूपान्तरण गर्छ।
-
-**API बुझ्दै**
-
-[APIs](https://www.webopedia.com/TERM/A/API.html) विभिन्न अनुप्रयोगहरू एकअर्कासँग संवाद गर्ने तरिका हो। यसलाई १९ औं शताब्दीमा टेलिग्राफ प्रणाली जस्तै सोच्नुहोस् - अपरेटरहरूले टाढाका स्टेशनहरूमा अनुरोध पठाउँथे र अनुरोध गरिएको जानकारीको साथ प्रतिक्रिया प्राप्त गर्थे। तपाईंले सामाजिक मिडिया जाँच गर्दा, भ्वाइस असिस्टेन्टलाई प्रश्न सोध्दा, वा डेलिभरी एप प्रयोग गर्दा, APIहरूले यी डाटा आदानप्रदानहरूलाई सहज बनाइरहेका छन्।
+अब हामी तपाईंको एक्सटेन्सनलाई API मार्फत बाह्य डाटा स्रोतहरूसँग जोड्नेछौं। यसले तपाईंको एक्सटेन्सनलाई एक स्वतन्त्र उपकरणबाट इन्टरनेटभरि वास्तविक-समय जानकारी पहुँच गर्न सक्ने चीजमा रूपान्तरण गर्छ।
+
+**API बुझाइ**
+
+[APIs](https://www.webopedia.com/TERM/A/API.html) विभिन्न अनुप्रयोगहरूले एकअर्कासँग कसरी संवाद गर्छन् भन्ने तरिका हो। तिनीहरू १९ औं शताब्दीमा टेलिग्राफ प्रणाली जस्तै हुन् जसले टाढा शहरहरूलाई जोड्थ्यो - अपरेटरहरूले टाढा स्टेशनहरूमा अनुरोध पठाउँथे र अनुरोधित जानकारीको साथ प्रतिक्रिया प्राप्त गर्थे। जब तपाईं सामाजिक मिडिया जाँच गर्नुहुन्छ, भ्वाइस असिस्टेन्टलाई प्रश्न सोध्नुहुन्छ, वा डेलिभरी एप प्रयोग गर्नुहुन्छ, APIहरूले यी डाटा एक्सचेन्जहरूलाई सहज बनाइरहेका छन्।
+
+```mermaid
+flowchart TD
+    A[Your Extension] --> B[HTTP Request]
+    B --> C[CO2 Signal API]
+    C --> D{Valid Request?}
+    D -->|Yes| E[Query Database]
+    D -->|No| F[Return Error]
+    E --> G[Carbon Data]
+    G --> H[JSON Response]
+    H --> I[Your Extension]
+    F --> I
+    I --> J[Update UI]
+    
+    subgraph "API Request"
+        K[Headers: auth-token]
+        L[Parameters: countryCode]
+        M[Method: GET]
+    end
+    
+    subgraph "API Response"
+        N[Carbon Intensity]
+        O[Fossil Fuel %]
+        P[Timestamp]
+    end
+    
+    style C fill:#e8f5e8
+    style G fill:#fff3e0
+    style I fill:#e1f5fe
+```
 
-**REST APIहरूको मुख्य अवधारणाहरू:**
-- **REST** को अर्थ 'Representational State Transfer' हो।
-- डाटासँग अन्तरक्रिया गर्न मानक HTTP विधिहरू (GET, POST, PUT, DELETE) **प्रयोग गर्छ**।
-- सामान्यतया JSON मा डाटा **फिर्ता गर्छ**।
-- विभिन्न प्रकारका अनुरोधहरूको लागि URL-आधारित अन्त बिन्दुहरू **प्रदान गर्छ**।
+**REST APIहरूको बारेमा मुख्य अवधारणाहरू:**
+- **REST** को अर्थ 'Representational State Transfer' हो
+- **प्रयोग गर्छ** मानक HTTP विधिहरू (GET, POST, PUT, DELETE) डाटासँग अन्तरक्रिया गर्न
+- **फर्काउँछ** डाटा पूर्वानुमान योग्य ढाँचाहरूमा, सामान्यतया JSON
+- **प्रदान गर्छ** विभिन्न प्रकारका अनुरोधहरूको लागि स्थिर, URL-आधारित अन्त बिन्दुहरू
 
-✅ [CO2 Signal API](https://www.co2signal.com/) हामीले प्रयोग गर्नेछौं, विश्वभरि विद्युत ग्रिडहरूबाट वास्तविक-समय कार्बन तीव्रता डाटा प्रदान गर्छ। यसले प्रयोगकर्ताहरूलाई उनीहरूको विद्युत प्रयोगको वातावरणीय प्रभाव बुझ्न मद्दत गर्छ!
+✅ [CO2 Signal API](https://www.co2signal.com/) हामीले प्रयोग गर्ने वास्तविक-समय कार्बन तीव्रता डाटा विश्वव्यापी विद्युत ग्रिडहरूबाट प्रदान गर्छ। यसले प्रयोगकर्ताहरूलाई उनीहरूको बिजुली प्रयोगको वातावरणीय प्रभाव बुझ्न मद्दत गर्छ!
 
-> 💡 **असिन्क्रोनस जाभास्क्रिप्ट बुझ्दै**: [`async` कीवर्ड](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) तपाईंको कोडलाई एकै समयमा धेरै अपरेसनहरू ह्यान्डल गर्न सक्षम बनाउँछ। जब तपाईं सर्भरबाट डाटा अनुरोध गर्नुहुन्छ, तपाईं आफ्नो सम्पूर्ण एक्सटेन्सनलाई फ्रिज गर्न चाहनुहुन्न - यो एउटा विमानले प्रतिक्रिया दिन पर्खँदा एयर ट्राफिक कन्ट्रोलले सबै अपरेसनहरू रोक्ने जस्तै हुनेछ।
+> 💡 **असिन्क्रोनस जाभास्क्रिप्ट बुझाइ**: [`async` कीवर्ड](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) तपाईंको कोडलाई एकै समयमा धेरै अपरेसनहरू ह्यान्डल गर्न सक्षम बनाउँछ। जब तपाईं सर्भरबाट डाटा अनुरोध गर्नुहुन्छ, तपाईं आफ्नो सम्पूर्ण एक्सटेन्सनलाई फ्रिज गर्न चाहनुहुन्न - यो हवाई यातायात नियन्त्रणले एक विमानको प्रतिक्रिया पर्खँदा सबै अपरेसनहरू रोक्ने जस्तै हुनेछ।
 >
 > **मुख्य फाइदाहरू:**
-> - डाटा लोड हुँदा एक्सटेन्सनको प्रतिक्रिया क्षमता **राख्छ**।
-> - नेटवर्क अनुरोधहरूका क्रममा अन्य कोड **सञ्चालन गर्न अनुमति दिन्छ**।
-> - परम्परागत कलब्याक ढाँचाहरूको तुलनामा कोड पढ्न सजिलो **बनाउँछ**।
-> - नेटवर्क समस्याहरूको लागि ग्रेसफुल त्रुटि ह्यान्डलिङ **सक्षम बनाउँछ**।
-
-`async` को बारेमा छिटो भिडियो यहाँ छ:
-
-[![Async र Await द्वारा प्रबन्धित प्रॉमिसहरू](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async र Await द्वारा प्रबन्धित प्रॉमिसहरू")
-
-> 🎥 Async/await को बारेमा भिडियो हेर्न माथिको छवि क्लिक गर्नुहोस्।
+> - **राख्छ** डाटा लोड हुँदा एक्सटेन्सनको प्रतिक्रियाशीलता
+> - **अनुमति दिन्छ** अन्य कोड नेटवर्क अनुरोधहरू चल्दा कार्यान्वयन गर्न
+> - **सुधार गर्छ** परम्परागत कलब्याक ढाँचाहरूको तुलनामा कोड पढ्न सजिलो बनाउँछ
+> - **सक्षम बनाउँछ** नेटवर्क समस्याहरूको लागि ग्रेसफुल त्रुटि ह्यान्डलिङ
+
+यहाँ `async` को बारेमा छिटो भिडियो छ:
+
+[![Async र Await प्रबन्ध गर्न](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async र Await प्रबन्ध गर्न")
+
+> 🎥 माथिको छवि क्लिक गरेर async/await को बारेमा भिडियो हेर्नुहोस्।
+
+### 🔄 **शैक्षिक जाँच**
+**असिन्क्रोनस प्रोग्रामिङ बुझाइ**: API फङ्सनमा जानु अघि सुनिश्चित गर्नुहोस् कि तपाईं बुझ्नुहुन्छ:
+- ✅ किन हामी `async/await` प्रयोग गर्छौं सम्पूर्ण एक्सटेन्सनलाई फ्रिज नगरी
+- ✅ कसरी `try/catch` ब्लकहरूले नेटवर्क त्रुटिहरूलाई ग्रेसफुली ह्यान्डल गर्छन्
+- ✅ सिन्क्रोनस र असिन्क्रोनस अपरेसनहरू बीचको भिन्नता
+- ✅ किन API कलहरू असफल हुन सक्छन् र ती असफलताहरूलाई कसरी ह्यान्डल गर्ने
+
+**वास्तविक-विश्व जडान**: यी दैनिक असिन्क्रोनस उदाहरणहरू विचार गर्नुहोस्:
+- **खाना अर्डर गर्नुहोस्**: तपाईं भान्सामा पर्खनुहुन्न - तपाईंले रसीद पाउनुहुन्छ र अन्य गतिविधिहरू जारी राख्नुहुन्छ
+- **इमेल पठाउनुहोस्**: तपाईंको इमेल एप पठाउँदा फ्रिज हुँदैन - तपाईं थप इमेलहरू लेख्न सक्नुहुन्छ
+- **वेब पृष्ठहरू लोड गर्दै**: छविहरू क्रमिक रूपमा लोड हुन्छन् जबकि तपाईं पहिले नै पाठ पढ्न सक्नुहुन्छ
+
+**API प्रमाणिकरण प्रवाह**:
+```mermaid
+sequenceDiagram
+    participant Ext as Extension
+    participant API as CO2 Signal API
+    participant DB as Database
+    
+    Ext->>API: Request with auth-token
+    API->>API: Validate token
+    API->>DB: Query carbon data
+    DB->>API: Return data
+    API->>Ext: JSON response
+    Ext->>Ext: Update UI
+```
 
 कार्बन प्रयोग डाटा ल्याउन र प्रदर्शन गर्न फङ्सन सिर्जना गर्नुहोस्:
 
@@ -275,47 +463,151 @@ async function displayCarbonUsage(apiKey, region) {
 ```
 
 **यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
-- बाह्य पुस्तकालयहरू जस्तै Axios को सट्टा आधुनिक `fetch()` API **प्रयोग गर्छ** ताकि सफा, निर्भरता-रहित कोड होस्।
-- `response.ok` को साथ उचित त्रुटि जाँच **लागु गर्छ** ताकि API असफलताहरूलाई प्रारम्भिक रूपमा समात्न सकियोस्।
-- असिन्क्रोनस अपरेसनहरू `async/await` को साथ **ह्यान्डल गर्छ** ताकि कोड फ्लो पढ्न सजिलो होस्।
-- CO2 Signal APIसँग `auth-token` हेडर प्रयोग गरेर **प्रमाणिकरण गर्छ**।
-- JSON प्रतिक्रिया डाटा **पार्स गर्छ** र कार्बन तीव्रता जानकारी निकाल्छ।
-- धेरै UI तत्वहरूलाई स्वरूपित वातावरणीय डाटासँग **अपडेट गर्छ**।
-- API कल असफल हुँदा प्रयोगकर्ता-अनुकूल त्रुटि सन्देशहरू **प्रदान गर्छ**।
-
-**प्रदर्शन गरिएको आधुनिक जाभास्क्रिप्ट अवधारणाहरू:**
-- `${}` सिन्ट्याक्सको साथ **टेम्पलेट लिटरलहरू** सफा स्ट्रिङ स्वरूपणका लागि।
-- **त्रुटि ह्यान्डलिङ** try/catch ब्लकहरूको साथ मजबुत अनुप्रयोगहरूको लागि।
-- **Async/await** ढाँचा नेटवर्क अनुरोधहरूलाई ग्रेसफुली ह्यान्डल गर्न।
-- API प्रतिक्रियाबाट विशिष्ट डाटा निकाल्न **अवजेक्ट डेस्ट्रक्चरिङ**।
-- धेरै DOM परिवर्तनहरूको लागि **म्याथड चेनिङ**।
-
-✅ यो फङ्सनले धेरै महत्त्वपूर्ण वेब विकास अवधारणाहरू प्रदर्शन गर्छ - बाह्य सर्भरहरूसँग संवाद गर्ने, प्रमाणीकरण ह्यान्डल गर्ने, डाटा प्रशोधन गर्ने, इन्टरफेस अपडेट गर्ने, र त्रुटिहरूलाई ग्रेसफुली व्यवस्थापन गर्ने। यी पेशेवर विकासकर्ताहरूले नियमित रूपमा प्रयोग गर्ने आधारभूत सीपहरू हुन्।
-
-🎉 **तपाईंले के हासिल गर्नुभयो:** तपाईंले यस्तो ब्राउजर एक्सटेन्सन सिर्जना गर्नुभयो जसले:
-- इन्टरनेटसँग **जोड्छ** र वास्तविक वातावरणीय डाटा ल्याउँछ।
-- प्रयोगकर्ता सेटिङहरू सत्रहरू बीच **स्थायी बनाउँछ**।
-- त्रुटिहरूलाई ग्रेसफुली ह्यान्डल गर्छ, क्र्यास नगरी।
-- **सजिलो, व्यावसायिक प्रयोगकर्ता अनुभव प्रदान गर्छ**।
-
-`npm run build` चलाएर र ब्राउजरमा तपाईंको एक्सटेन्सन रिफ्रेस गरेर आफ्नो काम परीक्षण गर्नुहोस्। तपाईंले अब एक कार्यात्मक कार्बन फुटप्रिन्ट ट्र्याकर बनाउनु भएको छ। अर्को पाठले एक्सटेन्सन पूरा गर्न गतिशील आइकन कार्यक्षमता थप्नेछ।
-
----
-
-## GitHub Copilot Agent चुनौती 🚀
-
-Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
-
-**विवरण:** ब्राउजर एक्सटेन्सनलाई त्रुटि ह्यान्डलिङ सुधार र प्रयोगकर्ता अनुभव सुविधाहरू थपेर सुधार गर्नुहोस्। यो चुनौतीले तपाईंलाई API, लोकल स्टोरेज, र आधुनिक जाभास्क्रिप्ट ढाँचाहरू प्रयोग गरेर DOM म्यानिपुलेसनको अभ्यास गर्न मद्दत गर्नेछ।
-
-**प्रेरणा:** `displayCarbonUsage` फङ्सनको सुधार गरिएको संस्करण सिर्जना गर्नुहोस् जसमा समावेश छ: १) असफल API कलहरूको लागि एक्सपोनेंश
-तपाईंले यस पाठमा LocalStorage र APIs को बारेमा सिक्नुभयो, जुन पेशेवर वेब विकासकर्ताका लागि धेरै उपयोगी छन्। के तपाईं यी दुई चीजहरू कसरी सँगै काम गर्छन् भनेर सोच्न सक्नुहुन्छ? सोच्नुहोस् कि तपाईं कसरी एउटा वेबसाइट डिजाइन गर्नुहुन्छ जसले API द्वारा प्रयोग गरिने वस्तुहरू भण्डारण गर्दछ।
+- **प्रयोग गर्छ** आधुनिक `fetch()` API बाह्य पुस्तकालयहरू जस्तै Axios प्रयोग नगरी सफा, निर्भरता-रहित कोडको लागि
+- **सही त्रुटि जाँच लागू गर्छ** `response.ok` को साथ ताकि API असफलताहरूलाई चाँडै पत्ता लगाउन सकियोस्
+- **ह्यान्डल गर्छ** असिन्क्रोनस अपरेसनहरू `async/await` को साथ ताकि कोड फ्लो पढ्न सजिलो होस्
+- **प्रमाणिकरण गर्छ** CO2 Signal APIसँग `auth-token` हेडर प्रयोग गरेर
+- **पार्स गर्छ** JSON प्रतिक्रिया ड
+**विवरण:** ब्राउजर एक्सटेन्सनलाई सुधार गरेर त्रुटि व्यवस्थापन सुधार र प्रयोगकर्ता अनुभव सुविधाहरू थप्नुहोस्। यो चुनौतीले तपाईंलाई API, स्थानीय भण्डारण, र आधुनिक जाभास्क्रिप्ट ढाँचाहरू प्रयोग गरेर DOM म्यानिपुलेशनमा अभ्यास गर्न मद्दत गर्नेछ।
+
+**प्रेरणा:** displayCarbonUsage फङ्सनको सुधारिएको संस्करण बनाउनुहोस् जसमा समावेश होस्: १) असफल API कलहरूको लागि पुन: प्रयास गर्ने मेकानिजम (exponential backoff सहित), २) API कल गर्नु अघि क्षेत्र कोडको इनपुट मान्यता, ३) प्रगति सूचकसहितको लोडिङ एनिमेसन, ४) स्थानीय भण्डारणमा API प्रतिक्रियाहरूको क्यासिङ (३० मिनेटको लागि क्यास), र ५) अघिल्लो API कलहरूको ऐतिहासिक डाटा देखाउने सुविधा। साथै, सबै फङ्सन प्यारामिटरहरू र रिटर्न प्रकारहरूलाई दस्तावेज गर्न TypeScript शैलीको JSDoc टिप्पणीहरू थप्नुहोस्।
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+
+## 🚀 चुनौती
+
+API को ज्ञान विस्तार गर्न ब्राउजर-आधारित APIहरूको विविधता अन्वेषण गर्नुहोस्। यी ब्राउजर API मध्ये एक छान्नुहोस् र सानो डेमो बनाउनुहोस्:
+
+- [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - प्रयोगकर्ताको हालको स्थान प्राप्त गर्नुहोस्
+- [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - डेस्कटप सूचनाहरू पठाउनुहोस्
+- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - अन्तरक्रियात्मक ड्र्याग इन्टरफेस बनाउनुहोस्
+- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - स्थानीय भण्डारण प्रविधिहरूको उन्नत प्रयोग
+- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - XMLHttpRequest को आधुनिक विकल्प
+
+**अनुसन्धानका प्रश्नहरू विचार गर्न:**  
+- यो API ले कुन वास्तविक समस्याहरू समाधान गर्छ?  
+- API ले त्रुटिहरू र किनाराका केसहरू कसरी व्यवस्थापन गर्छ?  
+- यो API प्रयोग गर्दा सुरक्षा सम्बन्धी के विचारहरू छन्?  
+- विभिन्न ब्राउजरहरूमा यो API कति व्यापक रूपमा समर्थित छ?  
+
+अनुसन्धानपछि, कुन विशेषताहरूले API लाई विकासकर्ता-अनुकूल र भरपर्दो बनाउँछ भनेर पहिचान गर्नुहोस्।
+
+## पोस्ट-व्याख्यान क्विज
+
+[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/26)
+
+## समीक्षा र आत्म-अध्ययन
+
+यस पाठमा तपाईंले LocalStorage र APIहरूको बारेमा सिक्नुभयो, जुन व्यावसायिक वेब विकासकर्ताका लागि धेरै उपयोगी छन्। के तपाईं यी दुई चीजहरू कसरी सँगै काम गर्छन् भनेर सोच्न सक्नुहुन्छ? वेबसाइटको वास्तुकला कसरी बनाउने भनेर सोच्नुहोस् जसले API द्वारा प्रयोग गरिने वस्तुहरू भण्डारण गर्छ।
+
+### ⚡ **अगाडि ५ मिनेटमा तपाईंले गर्न सक्ने कुरा**
+- [ ] DevTools को Application ट्याब खोल्नुहोस् र कुनै पनि वेबसाइटमा localStorage अन्वेषण गर्नुहोस्  
+- [ ] साधारण HTML फारम बनाउनुहोस् र ब्राउजरमा फारम मान्यता परीक्षण गर्नुहोस्  
+- [ ] ब्राउजर कन्सोलमा localStorage प्रयोग गरेर डाटा भण्डारण र पुन: प्राप्ति प्रयास गर्नुहोस्  
+- [ ] Network ट्याब प्रयोग गरेर फारम डाटा पेश गरिएको निरीक्षण गर्नुहोस्  
+
+### 🎯 **अगाडि एक घण्टामा तपाईंले गर्न सक्ने कुरा**
+- [ ] पोस्ट-पाठ क्विज पूरा गर्नुहोस् र फारम ह्यान्डलिङ अवधारणाहरू बुझ्नुहोस्  
+- [ ] प्रयोगकर्ता प्राथमिकताहरू बचत गर्ने ब्राउजर एक्सटेन्सन फारम बनाउनुहोस्  
+- [ ] सहायक त्रुटि सन्देशहरू सहित क्लाइन्ट-साइड फारम मान्यता कार्यान्वयन गर्नुहोस्  
+- [ ] एक्सटेन्सन डाटा स्थायित्वको लागि chrome.storage API प्रयोग अभ्यास गर्नुहोस्  
+- [ ] बचत गरिएका प्रयोगकर्ता सेटिङहरूमा प्रतिक्रिया दिने प्रयोगकर्ता इन्टरफेस बनाउनुहोस्  
+
+### 📅 **तपाईंको हप्ताको एक्सटेन्सन निर्माण**
+- [ ] फारम कार्यक्षमतासहित पूर्ण-विशेषता ब्राउजर एक्सटेन्सन पूरा गर्नुहोस्  
+- [ ] विभिन्न भण्डारण विकल्पहरूमा महारत हासिल गर्नुहोस्: स्थानीय, सिंक, र सत्र भण्डारण  
+- [ ] उन्नत फारम सुविधाहरू जस्तै autocomplete र मान्यता कार्यान्वयन गर्नुहोस्  
+- [ ] प्रयोगकर्ता डाटाको लागि आयात/निर्यात कार्यक्षमता थप्नुहोस्  
+- [ ] विभिन्न ब्राउजरहरूमा तपाईंको एक्सटेन्सनलाई राम्रोसँग परीक्षण गर्नुहोस्  
+- [ ] तपाईंको एक्सटेन्सनको प्रयोगकर्ता अनुभव र त्रुटि व्यवस्थापनलाई सुधार गर्नुहोस्  
+
+### 🌟 **तपाईंको महिनाको वेब API महारत**
+- [ ] विभिन्न ब्राउजर भण्डारण APIहरू प्रयोग गरेर जटिल एप्लिकेसनहरू निर्माण गर्नुहोस्  
+- [ ] अफलाइन-प्रथम विकास ढाँचाहरूको बारेमा जान्नुहोस्  
+- [ ] डाटा स्थायित्व समावेश गर्ने ओपन सोर्स प्रोजेक्टहरूमा योगदान गर्नुहोस्  
+- [ ] गोपनीयता-केंद्रित विकास र GDPR अनुपालनमा महारत हासिल गर्नुहोस्  
+- [ ] फारम ह्यान्डलिङ र डाटा व्यवस्थापनका लागि पुन: प्रयोग गर्न मिल्ने लाइब्रेरीहरू बनाउनुहोस्  
+- [ ] वेब API र एक्सटेन्सन विकासको बारेमा ज्ञान साझा गर्नुहोस्  
+
+## 🎯 तपाईंको एक्सटेन्सन विकास महारतको समयरेखा
+
+```mermaid
+timeline
+    title API Integration & Storage Learning Progression
+    
+    section DOM Fundamentals (15 minutes)
+        Element References: querySelector mastery
+                          : Event listener setup
+                          : State management basics
+        
+    section Local Storage (20 minutes)
+        Data Persistence: Key-value storage
+                        : Session management
+                        : User preference handling
+                        : Storage inspection tools
+        
+    section Form Handling (25 minutes)
+        User Input: Form validation
+                  : Event prevention
+                  : Data extraction
+                  : UI state transitions
+        
+    section API Integration (35 minutes)
+        External Communication: HTTP requests
+                              : Authentication patterns
+                              : JSON data parsing
+                              : Response handling
+        
+    section Async Programming (40 minutes)
+        Modern JavaScript: Promise handling
+                         : Async/await patterns
+                         : Error management
+                         : Non-blocking operations
+        
+    section Error Handling (30 minutes)
+        Robust Applications: Try/catch blocks
+                           : User-friendly messages
+                           : Graceful degradation
+                           : Debugging techniques
+        
+    section Advanced Patterns (1 week)
+        Professional Development: Caching strategies
+                                : Rate limiting
+                                : Retry mechanisms
+                                : Performance optimization
+        
+    section Production Skills (1 month)
+        Enterprise Features: Security best practices
+                           : API versioning
+                           : Monitoring & logging
+                           : Scalable architecture
+```
+  
+### 🛠️ तपाईंको पूर्ण-स्ट्याक विकास उपकरणको सारांश
+
+यस पाठ पूरा गरेपछि, तपाईंसँग अब छ:  
+- **DOM महारत**: सटीक तत्व लक्ष्यीकरण र म्यानिपुलेशन  
+- **भण्डारण विशेषज्ञता**: localStorage द्वारा स्थायी डाटा व्यवस्थापन  
+- **API एकीकरण**: वास्तविक-समय डाटा फेचिङ र प्रमाणीकरण  
+- **Async प्रोग्रामिङ**: आधुनिक जाभास्क्रिप्टसँग गैर-अवरोधक अपरेशनहरू  
+- **त्रुटि व्यवस्थापन**: असफलताहरूलाई सुन्दर रूपमा व्यवस्थापन गर्ने बलियो एप्लिकेसनहरू  
+- **प्रयोगकर्ता अनुभव**: लोडिङ अवस्था, मान्यता, र सहज अन्तरक्रिया  
+- **आधुनिक ढाँचाहरू**: fetch API, async/await, र ES6+ सुविधाहरू  
+
+**व्यावसायिक सीपहरू प्राप्त गरियो**: तपाईंले यी ढाँचाहरू कार्यान्वयन गर्नुभयो:  
+- **वेब एप्लिकेसनहरू**: बाह्य डाटा स्रोतहरूसहितको एकल-पृष्ठ एप्स  
+- **मोबाइल विकास**: API-चालित एप्स अफलाइन क्षमतासहित  
+- **डेस्कटप सफ्टवेयर**: स्थानीय भण्डारणसहितको Electron एप्स  
+- **उद्यम प्रणालीहरू**: प्रमाणीकरण, क्यासिङ, र त्रुटि व्यवस्थापन  
+- **आधुनिक फ्रेमवर्कहरू**: React/Vue/Angular डाटा व्यवस्थापन ढाँचाहरू  
+
+**अर्को स्तर**: तपाईं क्यासिङ रणनीतिहरू, वास्तविक-समय WebSocket कनेक्शनहरू, वा जटिल राज्य व्यवस्थापन जस्ता उन्नत विषयहरू अन्वेषण गर्न तयार हुनुहुन्छ!
 
 ## असाइनमेन्ट
 
-[एडप्ट एन API](assignment.md)
+[एक API अपनाउनुहोस्](assignment.md)  
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md
index b3c73ef397..3040949fd8 100644
--- a/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md
+++ b/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -1,19 +1,36 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "eb358f3f4c2c082f9f3a4f98efa1d337",
-  "translation_date": "2025-10-22T17:16:49+00:00",
+  "original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
+  "translation_date": "2025-11-03T15:57:11+00:00",
   "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
   "language_code": "ne"
 }
 -->
 # ब्राउजर एक्सटेन्सन परियोजना भाग ३: पृष्ठभूमि कार्यहरू र प्रदर्शनको बारेमा जान्नुहोस्
 
-के तपाईं कहिल्यै सोच्नुभएको छ कि किन केही ब्राउजर एक्सटेन्सनहरू छिटो र प्रतिक्रियात्मक महसुस हुन्छन् भने अरू सुस्त देखिन्छन्? यसको रहस्य पर्दा पछाडि के भइरहेको छ भन्नेमा छ। जब प्रयोगकर्ताहरू तपाईंको एक्सटेन्सनको इन्टरफेसमा क्लिक गरिरहेका हुन्छन्, त्यहाँ डेटा फेचिंग, आइकन अपडेटहरू, र प्रणाली स्रोतहरू शान्त रूपमा व्यवस्थापन गर्ने पृष्ठभूमि प्रक्रियाहरूको संसार चलिरहेको हुन्छ।
+```mermaid
+journey
+    title Your Performance Optimization Journey
+    section Foundation
+      Learn browser tools: 3: Student
+      Understand profiling: 4: Student
+      Identify bottlenecks: 4: Student
+    section Extension Features
+      Build color system: 4: Student
+      Create background tasks: 5: Student
+      Update icons dynamically: 5: Student
+    section Optimization
+      Monitor performance: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
+
+के तपाईं कहिल्यै सोच्नुभएको छ कि किन केही ब्राउजर एक्सटेन्सनहरू चाँडो र प्रतिक्रियात्मक महसुस हुन्छन् भने अरू सुस्त देखिन्छन्? यसको रहस्य पर्दा पछाडि के भइरहेको छ भन्ने कुरामा छ। जब प्रयोगकर्ताहरू तपाईंको एक्सटेन्सनको इन्टरफेसमा क्लिक गरिरहेका हुन्छन्, त्यहाँ पृष्ठभूमि प्रक्रियाहरूको एक संसार हुन्छ जसले डेटा फेचिंग, आइकन अपडेटहरू, र प्रणाली स्रोतहरू शान्त रूपमा व्यवस्थापन गरिरहेको हुन्छ।
 
-यो ब्राउजर एक्सटेन्सन श्रृंखलाको अन्तिम पाठ हो, र हामी तपाईंको कार्बन फुटप्रिन्ट ट्र्याकरलाई सहज रूपमा काम गर्ने बनाउनेछौं। तपाईंले गतिशील आइकन अपडेटहरू थप्नुहुनेछ र प्रदर्शन समस्याहरू पहिचान गर्न सिक्नुहुनेछ। यो रेस कार ट्युनिङ जस्तै हो - साना अनुकूलनहरूले सबै कुरा कसरी चल्छ भन्नेमा ठूलो फरक पार्न सक्छ।
+यो ब्राउजर एक्सटेन्सन श्रृंखलाको अन्तिम पाठ हो, र हामी तपाईंको कार्बन फुटप्रिन्ट ट्र्याकरलाई सहज रूपमा काम गर्ने बनाउनेछौं। तपाईंले गतिशील आइकन अपडेटहरू थप्नुहुनेछ र प्रदर्शन समस्याहरूलाई समस्या बन्नु अघि नै पहिचान गर्न सिक्नुहुनेछ। यो रेस कार ट्युनिङ जस्तै हो - साना अनुकूलनहरूले सबै कुरा कसरी चल्छ भन्नेमा ठूलो फरक पार्न सक्छ।
 
-हामीले काम सक्दा, तपाईंको एक्सटेन्सन राम्रोसँग तयार हुनेछ र प्रदर्शनका सिद्धान्तहरू बुझ्नुहुनेछ जसले राम्रो वेब एप्सलाई उत्कृष्ट बनाउँछ। आउनुहोस्, ब्राउजर अनुकूलनको संसारमा डुबौं।
+जब हामी समाप्त गर्छौं, तपाईंसँग एक परिष्कृत एक्सटेन्सन हुनेछ र प्रदर्शनका सिद्धान्तहरू बुझ्नुहुनेछ जसले राम्रो वेब एप्सलाई उत्कृष्ट बनाउँछ। ब्राउजर अनुकूलनको संसारमा डुबौं।
 
 ## प्रि-लेक्चर क्विज
 
@@ -21,89 +38,228 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### परिचय
 
-हाम्रो अघिल्लो पाठहरूमा, तपाईंले एउटा फारम बनाउनु भयो, यसलाई API सँग जोड्नुभयो, र असिंक्रोनस डेटा फेचिंगको सामना गर्नुभयो। तपाईंको एक्सटेन्सन राम्रो आकारमा छ।
-
-अब हामी अन्तिम टचहरू थप्न आवश्यक छ - जस्तै कार्बन डेटा अनुसार एक्सटेन्सन आइकनको रंग परिवर्तन गर्नु। यसले मलाई सम्झाउँछ कि नासा कसरी अपोलो अन्तरिक्ष यानको प्रत्येक प्रणालीलाई अनुकूलित गर्नुपर्‍यो। उनीहरूले कुनै पनि अनावश्यक चक्र वा मेमोरीको लागि जोखिम लिन सक्दैनन् किनकि प्रदर्शनमा जीवन निर्भर थियो। जबकि हाम्रो ब्राउजर एक्सटेन्सन त्यति महत्वपूर्ण छैन, त्यही सिद्धान्तहरू लागू हुन्छन् - कुशल कोडले राम्रो प्रयोगकर्ता अनुभव सिर्जना गर्दछ।
+हाम्रो अघिल्लो पाठहरूमा, तपाईंले एउटा फारम निर्माण गर्नुभयो, यसलाई API सँग जडान गर्नुभयो, र एसिंक्रोनस डेटा फेचिंगलाई सामना गर्नुभयो। तपाईंको एक्सटेन्सन राम्रो आकारमा छ।
+
+अब हामी अन्तिम टचहरू थप्न आवश्यक छ - जस्तै कार्बन डेटा अनुसार एक्सटेन्सन आइकनको रंग परिवर्तन गराउनु। यसले मलाई नासाले अपोलो अन्तरिक्ष यानको प्रत्येक प्रणालीलाई अनुकूलित गर्नुपरेको कुरा सम्झाउँछ। उनीहरूले कुनै पनि अनावश्यक चक्र वा मेमोरी खर्च गर्न सक्दैनथे किनभने प्रदर्शनमा जीवन निर्भर थियो। जबकि हाम्रो ब्राउजर एक्सटेन्सन त्यति महत्वपूर्ण छैन, त्यही सिद्धान्तहरू लागू हुन्छन् - कुशल कोडले राम्रो प्रयोगकर्ता अनुभव सिर्जना गर्दछ।
+
+```mermaid
+mindmap
+  root((Performance & Background Tasks))
+    Browser Performance
+      Rendering Pipeline
+      Asset Optimization
+      DOM Manipulation
+      JavaScript Execution
+    Profiling Tools
+      Developer Tools
+      Performance Tab
+      Timeline Analysis
+      Bottleneck Detection
+    Extension Architecture
+      Background Scripts
+      Content Scripts
+      Message Passing
+      Icon Management
+    Optimization Strategies
+      Code Splitting
+      Lazy Loading
+      Caching
+      Resource Compression
+    Visual Feedback
+      Dynamic Icons
+      Color Coding
+      Real-time Updates
+      User Experience
+```
 
 ## वेब प्रदर्शनको आधारभूत कुरा
 
-जब तपाईंको कोड कुशलतापूर्वक चल्छ, मानिसहरूले वास्तवमा *महसुस* गर्न सक्छन्। तपाईंलाई थाहा छ त्यो क्षण जब पृष्ठ तुरुन्तै लोड हुन्छ वा एनिमेसन सहज रूपमा बग्छ? त्यो राम्रो प्रदर्शनको काम हो।
+जब तपाईंको कोड कुशलतापूर्वक चल्छ, मानिसहरूले वास्तवमै *महसुस* गर्न सक्छन्। तपाईंलाई थाहा छ त्यो क्षण जब पृष्ठ तुरुन्तै लोड हुन्छ वा एनिमेसन सहज रूपमा बग्छ? त्यो राम्रो प्रदर्शनको काम हो।
 
-प्रदर्शन केवल गति मात्र होइन - यो वेब अनुभवहरूलाई प्राकृतिक बनाउने बारे हो, क्लंकी र निराशाजनकको सट्टा। कम्प्युटिङको प्रारम्भिक दिनहरूमा, ग्रेस होपरले आफ्नो डेस्कमा एक नानोसेकेन्ड (लगभग एक फिट लामो तारको टुक्रा) राख्थिन् ताकि प्रकाश एक अर्बौं सेकेन्डमा कति टाढा यात्रा गर्छ भनेर देखाउन सकियोस्। यो कम्प्युटिङमा प्रत्येक माइक्रोसेकेन्ड किन महत्त्वपूर्ण छ भन्ने व्याख्या गर्ने उनको तरिका थियो। आउनुहोस्, के चीजले गति कम गरिरहेको छ भनेर पत्ता लगाउन मद्दत गर्ने डिटेक्टिभ उपकरणहरू अन्वेषण गरौं।
+प्रदर्शन केवल गति मात्र होइन - यो वेब अनुभवहरूलाई प्राकृतिक महसुस गराउने बारे हो, क्लंकी र निराशाजनक होइन। कम्प्युटिङको प्रारम्भिक दिनहरूमा, ग्रेस होपरले आफ्नो डेस्कमा एक न्यानोसेकेन्ड (लगभग एक फिट लामो तारको टुक्रा) राख्थिन् ताकि एक अर्बौं सेकेन्डमा प्रकाश कति टाढा यात्रा गर्छ भनेर देखाउन सकियोस्। यो कम्प्युटिङमा प्रत्येक माइक्रोसेकेन्ड किन महत्त्वपूर्ण छ भन्ने व्याख्या गर्ने उनको तरिका थियो। आउनुहोस्, के चीजले गति ढिलो बनाइरहेको छ भनेर पत्ता लगाउन मद्दत गर्ने जासुसी उपकरणहरू अन्वेषण गरौं।
 
 > "वेबसाइट प्रदर्शन दुई कुराको बारेमा हो: पृष्ठ कति छिटो लोड हुन्छ, र यसमा कोड कति छिटो चल्छ।" -- [ज्याक ग्रोसबार्ट](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
 
-तपाईंको वेबसाइटलाई सबै प्रकारका उपकरणहरूमा, सबै प्रकारका प्रयोगकर्ताहरूका लागि, सबै प्रकारका परिस्थितिहरूमा चकाचक छिटो बनाउने विषय, आश्चर्यजनक रूपमा विशाल छ। यहाँ केही बुँदाहरू छन् जुन तपाईंले मानक वेब परियोजना वा ब्राउजर एक्सटेन्सन निर्माण गर्दा ध्यानमा राख्नुपर्छ।
+तपाईंको वेबसाइटहरूलाई सबै प्रकारका उपकरणहरूमा, सबै प्रकारका प्रयोगकर्ताहरूका लागि, सबै प्रकारका परिस्थितिहरूमा अत्यन्त छिटो बनाउने विषय, आश्चर्यजनक रूपमा विशाल छ। यहाँ केहि बुँदाहरू छन् जुन तपाईंले मानक वेब परियोजना वा ब्राउजर एक्सटेन्सन निर्माण गर्दा ध्यानमा राख्नुपर्छ।
+
+तपाईंको साइटलाई अनुकूलित गर्ने पहिलो कदम भनेको वास्तवमा पर्दा पछाडि के भइरहेको छ भन्ने कुरा बुझ्नु हो। भाग्यवश, तपाईंको ब्राउजरमा शक्तिशाली जासुसी उपकरणहरू पहिले नै समावेश छन्।
+
+```mermaid
+flowchart LR
+    A[HTML] --> B[Parse]
+    B --> C[DOM Tree]
+    D[CSS] --> E[Parse]
+    E --> F[CSSOM]
+    G[JavaScript] --> H[Execute]
+    
+    C --> I[Render Tree]
+    F --> I
+    H --> I
+    
+    I --> J[Layout]
+    J --> K[Paint]
+    K --> L[Composite]
+    L --> M[Display]
+    
+    subgraph "Critical Rendering Path"
+        N["1. Parse HTML"]
+        O["2. Parse CSS"]
+        P["3. Execute JS"]
+        Q["4. Build Render Tree"]
+        R["5. Layout Elements"]
+        S["6. Paint Pixels"]
+        T["7. Composite Layers"]
+    end
+    
+    style M fill:#e8f5e8
+    style I fill:#fff3e0
+    style H fill:#ffebee
+```
 
-तपाईंको साइटलाई अनुकूलित गर्ने पहिलो कदम भनेको वास्तवमा पर्दा पछाडि के भइरहेको छ भन्ने कुरा बुझ्नु हो। सौभाग्यवश, तपाईंको ब्राउजरमा शक्तिशाली डिटेक्टिभ उपकरणहरू पहिले नै समावेश छन्।
+एजमा डेभलपर टूल्स खोल्न, माथि दायाँ कुनामा तीन डटहरू क्लिक गर्नुहोस्, त्यसपछि More Tools > Developer Tools मा जानुहोस्। वा किबोर्ड सर्टकट प्रयोग गर्नुहोस्: Windows मा `Ctrl` + `Shift` + `I` वा Mac मा `Option` + `Command` + `I`। एकपटक त्यहाँ पुगेपछि, Performance ट्याबमा क्लिक गर्नुहोस् - यहीँ तपाईं आफ्नो अनुसन्धान गर्नुहुनेछ।
 
-Edge मा Developer Tools खोल्न, माथि दायाँ कुनामा तीन डटहरू क्लिक गर्नुहोस्, त्यसपछि More Tools > Developer Tools मा जानुहोस्। वा किबोर्ड सर्टकट प्रयोग गर्नुहोस्: `Ctrl` + `Shift` + `I` Windows मा वा `Option` + `Command` + `I` Mac मा। एकपटक त्यहाँ पुगेपछि, Performance ट्याबमा क्लिक गर्नुहोस् - यहीँ तपाईं आफ्नो अनुसन्धान गर्नुहुनेछ।
+**यहाँ तपाईंको प्रदर्शन जासुसी टूलकिट छ:**
+- **खोल्नुहोस्** डेभलपर टूल्स (तपाईंले यो बारम्बार प्रयोग गर्नुहुनेछ!)
+- **हेड गर्नुहोस्** Performance ट्याबमा - यसलाई तपाईंको वेब एपको फिटनेस ट्र्याकरको रूपमा सोच्नुहोस्
+- **रिकर्ड बटन थिच्नुहोस्** र तपाईंको पृष्ठलाई क्रियाशील अवस्थामा हेर्नुहोस्
+- **परिणामहरू अध्ययन गर्नुहोस्** के चीजले गति ढिलो बनाइरहेको छ भनेर पत्ता लगाउन
 
-**यहाँ तपाईंको प्रदर्शन डिटेक्टिभ टूलकिट छ:**
-- **खोल्नुहोस्** Developer Tools (तपाईंले यो बारम्बार प्रयोग गर्नुहुनेछ!)
-- **Performance ट्याबमा जानुहोस्** - यसलाई तपाईंको वेब एपको फिटनेस ट्र्याकरको रूपमा सोच्नुहोस्
-- **Record बटन थिच्नुहोस्** र आफ्नो पृष्ठलाई क्रियाशील अवस्थामा हेर्नुहोस्
-- **परिणामहरू अध्ययन गर्नुहोस्** के चीजले गति कम गरिरहेको छ भनेर पत्ता लगाउन
+यसलाई प्रयास गरौं। एउटा वेबसाइट खोल्नुहोस् (Microsoft.com राम्रो काम गर्दछ) र 'रिकर्ड' बटन क्लिक गर्नुहोस्। अब पृष्ठलाई रिफ्रेस गर्नुहोस् र प्रोफाइलरले के भइरहेको छ भनेर क्याप्चर गर्न हेर्नुहोस्। जब तपाईं रेकर्डिङ रोक्नुहुन्छ, तपाईंले ब्राउजरले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्ने तरिकाको विस्तृत विवरण देख्नुहुनेछ। यो मिशन कन्ट्रोलले रकेट प्रक्षेपणको समयमा प्रत्येक प्रणालीलाई अनुगमन गर्ने तरिकाको जस्तै हो - तपाईंलाई वास्तविक समयमा के भइरहेको छ र कहिले भइरहेको छ भन्ने डेटा प्राप्त हुन्छ।
 
-आउनुहोस्, यसलाई प्रयास गरौं। एउटा वेबसाइट खोल्नुहोस् (Microsoft.com राम्रो काम गर्छ) र 'Record' बटन क्लिक गर्नुहोस्। अब पृष्ठलाई रिफ्रेस गर्नुहोस् र प्रोफाइलरले के भइरहेको छ भनेर क्याप्चर गर्न हेर्नुहोस्। जब तपाईं रेकर्डिङ रोक्नुहुन्छ, तपाईंले ब्राउजरले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्ने तरिकाको विस्तृत विवरण देख्नुहुनेछ। यो मिशन कन्ट्रोलले रकेट प्रक्षेपणको समयमा प्रत्येक प्रणालीलाई अनुगमन गर्ने तरिकाको जस्तै हो - तपाईंलाई वास्तविक समयको डेटा प्राप्त हुन्छ कि के भइरहेको छ र कहिले।
+![एज प्रोफाइलर](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ne.png)
 
-✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मा थप विवरणहरू छन् यदि तपाईं गहिरो जान्न चाहनुहुन्छ भने
+✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मा थप विवरणहरू छन् यदि तपाईं गहिराइमा जान चाहनुहुन्छ भने।
 
-> प्रो टिप: परीक्षण गर्नु अघि आफ्नो ब्राउजर क्यास खाली गर्नुहोस् ताकि तपाईंको साइट पहिलो पटक आगन्तुकहरूको लागि कस्तो प्रदर्शन गर्छ हेर्न सक्नुहोस् - यो सामान्यत: दोहोरिने आगन्तुकहरू भन्दा धेरै फरक हुन्छ!
+> प्रो टिप: परीक्षण गर्नु अघि तपाईंको ब्राउजर क्यास खाली गर्नुहोस् ताकि तपाईंको साइटले पहिलो पटक आगन्तुकहरूको लागि कस्तो प्रदर्शन गर्छ हेर्न सक्नुहोस् - यो सामान्यतया दोहोरिने भ्रमणहरू भन्दा धेरै फरक हुन्छ!
 
 प्रोफाइल टाइमलाइनका तत्वहरू चयन गरेर पृष्ठ लोड हुँदा हुने घटनाहरूमा जुम इन गर्नुहोस्।
 
-प्रोफाइल टाइमलाइनको भाग चयन गरेर र सारांश प्यानमा हेरेर आफ्नो पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्:
-
-![Edge प्रोफाइलर स्न्यापशट](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ne.png)
-
-Event Log प्यान जाँच गर्नुहोस् कि कुनै घटना १५ मिलिसेकेन्ड भन्दा लामो समय लागेको छ कि छैन:
-
-![Edge इभेन्ट लग](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ne.png)
-
-✅ आफ्नो प्रोफाइलरलाई चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र कुनै बाधा छ कि छैन हेर्नुहोस्। सबैभन्दा सुस्त लोड हुने सम्पत्ति के हो? सबैभन्दा छिटो?
+प्रोफाइल टाइमलाइनको एक भाग चयन गरेर र सारांश प्यान हेरेर तपाईंको पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्:
+
+![एज प्रोफाइलर स्न्यापशट](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ne.png)
+
+इभेन्ट लग प्यान जाँच गर्नुहोस् कि कुनै इभेन्ट १५ मिलिसेकेन्ड भन्दा लामो समय लागेको छ कि छैन:
+
+![एज इभेन्ट लग](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ne.png)
+
+✅ तपाईंको प्रोफाइलरलाई चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र कुनै पनि बाधाहरू छन् कि छैनन् हेर्नुहोस्। सबैभन्दा ढिलो लोड हुने सम्पत्ति के हो? सबैभन्दा छिटो?
+
+```mermaid
+flowchart TD
+    A[Open DevTools] --> B[Navigate to Performance Tab]
+    B --> C[Click Record Button]
+    C --> D[Perform Actions]
+    D --> E[Stop Recording]
+    E --> F{Analyze Results}
+    
+    F --> G[Check Timeline]
+    F --> H[Review Network]
+    F --> I[Examine Scripts]
+    F --> J[Identify Paint Events]
+    
+    G --> K{Long Tasks?}
+    H --> L{Large Assets?}
+    I --> M{Render Blocking?}
+    J --> N{Expensive Paints?}
+    
+    K -->|Yes| O[Optimize JavaScript]
+    L -->|Yes| P[Compress Assets]
+    M -->|Yes| Q[Add Async/Defer]
+    N -->|Yes| R[Simplify Styles]
+    
+    O --> S[Test Again]
+    P --> S
+    Q --> S
+    R --> S
+    
+    style A fill:#e1f5fe
+    style F fill:#fff3e0
+    style S fill:#e8f5e8
+```
 
 ## प्रोफाइलिङ गर्दा के हेर्ने
 
-प्रोफाइलर चलाउनु भनेको सुरुवात मात्र हो - वास्तविक सीप भनेको ती रंगीन चार्टहरूले वास्तवमा के बताइरहेका छन् भन्ने कुरा जान्नु हो। चिन्ता नगर्नुहोस्, तपाईंले तिनीहरूलाई पढ्न सिक्नुहुनेछ। अनुभवी डेभलपरहरूले पूर्ण समस्या बन्नु अघि चेतावनी संकेतहरू पहिचान गर्न सिकेका छन्।
+प्रोफाइलर चलाउनु भनेको केवल सुरुवात हो - वास्तविक सीप भनेको ती रंगीन चार्टहरूले वास्तवमा के बताइरहेका छन् भन्ने कुरा जान्नु हो। चिन्ता नगर्नुहोस्, तपाईंले तिनीहरूलाई पढ्न सिक्नुहुनेछ। अनुभवी डेभलपरहरूले समस्या पूर्ण रूपमा विकसित हुनुअघि चेतावनी संकेतहरू पहिचान गर्न सिकेका छन्।
 
-आउनुहोस्, सामान्य संदिग्धहरूको बारेमा कुरा गरौं - प्रदर्शन समस्याहरू जसले वेब परियोजनाहरूमा चुपचाप प्रवेश गर्न रुचाउँछन्। जस्तै मारी क्युरीले आफ्नो प्रयोगशालामा विकिरण स्तरलाई सावधानीपूर्वक अनुगमन गर्नुपरेको थियो, हामीले निश्चित ढाँचाहरूको लागि हेर्नुपर्छ जसले समस्या उत्पन्न गरिरहेको संकेत गर्दछ। यी चाँडै समात्नुले तपाईंलाई (र तपाईंका प्रयोगकर्ताहरूलाई) धेरै निराशा बचत गर्नेछ।
+आउनुहोस्, सामान्य संदिग्धहरूको बारेमा कुरा गरौं - प्रदर्शन समस्याहरू जसले वेब परियोजनाहरूमा छिप्न रुचाउँछन्। जस्तै मेरी क्युरीले आफ्नो प्रयोगशालामा विकिरण स्तरलाई सावधानीपूर्वक अनुगमन गर्नुपरेको थियो, हामीले निश्चित ढाँचाहरूको लागि हेर्नु आवश्यक छ जसले समस्या उत्पन्न गरिरहेको संकेत गर्दछ। यीलाई चाँडै समात्दा तपाईं (र तपाईंका प्रयोगकर्ताहरू) धेरै निराशाबाट बचाउनुहुनेछ।
 
-**सम्पत्ति आकारहरू**: वेबसाइटहरू वर्षौंमा "गह्रौं" हुँदै गएका छन्, र त्यो अतिरिक्त वजनको धेरै भाग छविहरूबाट आउँछ। यो जस्तै हामीले हाम्रो डिजिटल सुटकेसहरूमा थप र थप सामानहरू भरिरहेका छौं।
+**सम्पत्ति आकारहरू**: वेबसाइटहरू वर्षौंदेखि "गह्रौं" हुँदै गएका छन्, र त्यो अतिरिक्त वजनको धेरै हिस्सा छविहरूबाट आउँछ। यो जस्तै हामीले हाम्रो डिजिटल सुटकेसहरूमा थप र थप सामान भरिरहेका छौं।
 
-✅ [Internet Archive](https://httparchive.org/reports/page-weight) हेर्नुहोस् कि पृष्ठ आकारहरू समयसँगै कसरी बढेका छन् - यो धेरै खुलासा छ।
+✅ [इन्टरनेट आर्काइभ](https://httparchive.org/reports/page-weight) हेर्नुहोस् कि पृष्ठ आकारहरू समयसँगै कसरी बढेका छन् - यो धेरै खुलासा छ।
 
-**यहाँ तपाईंको सम्पत्तिहरू अनुकूलित गर्ने तरिका छ:**
-- **छविहरूलाई कम्प्रेस गर्नुहोस्!** आधुनिक फर्म्याटहरू जस्तै WebP ले फाइल आकारलाई नाटकीय रूपमा कटौती गर्न सक्छ
-- **प्रत्येक उपकरणको लागि सही छवि आकार प्रदान गर्नुहोस्** - फोनहरूमा ठूला डेस्कटप छविहरू पठाउन आवश्यक छैन
-- **CSS र JavaScriptलाई मिनिफाइ गर्नुहोस्** - प्रत्येक बाइट महत्त्वपूर्ण छ
-- **लेजी लोडिङ प्रयोग गर्नुहोस्** ताकि छविहरू केवल प्रयोगकर्ताहरूले वास्तवमा स्क्रोल गर्दा मात्र डाउनलोड हुन्छ
+**तपाईंको सम्पत्तिहरूलाई अनुकूलित राख्ने तरिका:**
+- **कम्प्रेस गर्नुहोस्** ती छविहरू! WebP जस्ता आधुनिक ढाँचाहरूले फाइल आकारलाई नाटकीय रूपमा कटौती गर्न सक्छन्
+- **सर्भ गर्नुहोस्** प्रत्येक उपकरणको लागि सही छवि आकार - फोनहरूमा ठूला डेस्कटप छविहरू पठाउन आवश्यक छैन
+- **मिनिफाइ गर्नुहोस्** तपाईंको CSS र JavaScript - प्रत्येक बाइट महत्त्वपूर्ण छ
+- **लेजी लोडिङ प्रयोग गर्नुहोस्** ताकि छविहरू केवल प्रयोगकर्ताहरूले वास्तवमा स्क्रोल गर्दा मात्र डाउनलोड हुन्छन्
 
-**DOM ट्राभर्सलहरू**: ब्राउजरले तपाईंले लेखेको कोडको आधारमा यसको Document Object Model निर्माण गर्नुपर्छ, त्यसैले राम्रो पृष्ठ प्रदर्शनको लागि तपाईंको ट्यागहरू न्यूनतम राख्नु राम्रो हुन्छ, पृष्ठले आवश्यक पर्ने मात्र प्रयोग र शैली गर्नुहोस्। यस बिन्दुमा, पृष्ठसँग सम्बन्धित अतिरिक्त CSS अनुकूलित गर्न सकिन्छ; केवल एक पृष्ठमा प्रयोग गर्न आवश्यक शैलीहरू मुख्य शैली शीटमा समावेश गर्न आवश्यक छैन, उदाहरणका लागि।
+**DOM ट्राभर्सलहरू**: ब्राउजरले तपाईंले लेखेको कोडको आधारमा यसको Document Object Model निर्माण गर्नुपर्छ, त्यसैले राम्रो पृष्ठ प्रदर्शनको चासोमा तपाईंको ट्यागहरू न्यूनतम राख्नु महत्त्वपूर्ण छ, केवल पृष्ठलाई आवश्यक पर्ने कुराहरू प्रयोग गरेर र स्टाइलिङ गरेर। यस बिन्दुमा, पृष्ठसँग सम्बन्धित अतिरिक्त CSS अनुकूलित गर्न सकिन्छ; केवल एक पृष्ठमा प्रयोग गर्न आवश्यक शैलीहरू मुख्य शैली शीटमा समावेश गर्न आवश्यक छैन, उदाहरणका लागि।
 
-**DOM अनुकूलनका प्रमुख रणनीतिहरू:**
-- **HTML तत्वहरूको संख्या र नेस्टिङ स्तरलाई न्यूनतम बनाउनुहोस्**
-- **अप्रयुक्त CSS नियमहरू हटाउनुहोस् र शैली शीटहरूलाई कुशलतापूर्वक समेकित गर्नुहोस्**
-- **CSSलाई प्रत्येक पृष्ठको लागि आवश्यक पर्ने मात्र लोड गर्न व्यवस्थित गर्नुहोस्**
-- **HTMLलाई ब्राउजर पार्सिङको लागि राम्रो बनाउन सेम्यान्टिक रूपमा संरचना गर्नुहोस्**
+**DOM अनुकूलनका लागि मुख्य रणनीतिहरू:**
+- **HTML तत्वहरूको संख्या र नेस्टिङ स्तरहरू कम गर्नुहोस्**
+- **अप्रयुक्त CSS नियमहरू हटाउनुहोस् र शैली शीटहरू कुशलतापूर्वक समेकित गर्नुहोस्**
+- **CSS लाई प्रत्येक पृष्ठको लागि आवश्यक पर्ने मात्र लोड गर्न व्यवस्थित गर्नुहोस्**
+- **HTML लाई ब्राउजर पार्सिङको लागि राम्रो बनाउन संरचना गर्नुहोस्**
 
-**JavaScript**: प्रत्येक JavaScript डेभलपरले 'रेन्डर-ब्लकिङ' स्क्रिप्टहरूको लागि हेर्नुपर्छ जसले DOMलाई ट्राभर्स र ब्राउजरमा पेन्ट गर्न सक्नु अघि लोड गर्नुपर्छ। तपाईंको इनलाइन स्क्रिप्टहरूसँग `defer` प्रयोग गर्ने विचार गर्नुहोस् (जसरी Terrarium मोड्युलमा गरिएको छ)।
+**JavaScript**: प्रत्येक JavaScript डेभलपरले 'रेन्डर-ब्लकिङ' स्क्रिप्टहरूको लागि हेर्नु पर्छ जुन बाँकी DOM ट्राभर्स र ब्राउजरमा पेन्ट गर्न अघि लोड गर्नुपर्छ। तपाईंको इनलाइन स्क्रिप्टहरूसँग `defer` प्रयोग गर्ने विचार गर्नुहोस् (जसरी Terrarium मोड्युलमा गरिएको छ)।
 
 **आधुनिक JavaScript अनुकूलन प्रविधिहरू:**
-- **स्क्रिप्टहरू DOM पार्सिङ पछि लोड गर्न `defer` एट्रिब्युट प्रयोग गर्नुहोस्**
+- **स्क्रिप्टहरू DOM पार्सिङ पछि लोड गर्न `defer` विशेषता प्रयोग गर्नुहोस्**
 - **कोड स्प्लिटिङ कार्यान्वयन गर्नुहोस् ताकि केवल आवश्यक JavaScript लोड होस्**
 - **गैर-आवश्यक कार्यक्षमताको लागि लेजी लोडिङ लागू गर्नुहोस्**
-- **भारी लाइब्रेरीहरू र फ्रेमवर्कहरूको प्रयोग न्यूनतम गर्नुहोस् जब सम्भव छ**
-
-✅ साइट प्रदर्शन जाँच गर्ने सामान्य चेकहरूको बारेमा जान्न [Site Speed Test वेबसाइट](https://www.webpagetest.org/) मा केही साइटहरू प्रयास गर्नुहोस्।
-
-अब तपाईंलाई ब्राउजरले तपाईंले पठाएको सम्पत्तिहरू कसरी रेन्डर गर्छ भन्ने विचार छ, आउनुहोस् तपाईंको एक्सटेन्सन पूरा गर्न आवश्यक अन्तिम केही कुराहरू हेर्नुहोस्:
-
-### रंग गणना गर्ने फंक्शन बनाउनुहोस्
-
-अब हामी एउटा फंक्शन बनाउनेछौं जसले संख्यात्मक डेटा meaningful रंगहरूमा परिवर्तन गर्छ। यसलाई ट्राफिक लाइट प्रणाली जस्तै सोच्नुहोस् - हरियो सफा ऊर्जा, रातो उच्च कार्बन तीव्रता।
-
-यो फंक्शनले हाम्रो API बाट CO2 डेटा लिनेछ र वातावरणीय प्रभावलाई प्रतिनिधित्व गर्ने सबैभन्दा राम्रो रंग निर्धारण गर्नेछ। यो वैज्ञानिकहरूले जटिल डेटा ढाँचाहरूलाई दृश्यात्मक बनाउन ताप नक्साहरूमा रंग-कोडिङ प्रयोग गर्ने तरिकाको जस्तै हो - महासागरको तापक्रमदेखि ताराको निर्माणसम्म। यसलाई `/src/index.js` मा ती `const` भेरिएबलहरू सेटअप गरेपछि थपौं:
+- **भारी पुस्तकालयहरू र फ्रेमवर्कहरूको प्रयोग सकेसम्म कम गर्नुहोस्**
+
+✅ साइट प्रदर्शन निर्धारण गर्न गरिने सामान्य जाँचहरूको बारेमा थप जान्न [साइट स्पीड टेस्ट वेबसाइट](https://www.webpagetest.org/) मा केही साइटहरू प्रयास गर्नुहोस्।
+
+### 🔄 **शैक्षिक जाँच**
+**प्रदर्शन बुझाइ**: एक्सटेन्सन सुविधाहरू निर्माण गर्नु अघि सुनिश्चित गर्नुहोस् कि तपाईं:
+- ✅ HTML देखि पिक्सेलसम्मको क्रिटिकल रेंडरिंग पथ व्याख्या गर्न सक्नुहुन्छ
+- ✅ वेब एप्लिकेसनहरूमा सामान्य प्रदर्शन बाधाहरू पहिचान गर्न सक्नुहुन्छ
+- ✅ पृष्ठ प्रदर्शन प्रोफाइल गर्न ब्राउजर डेभलपर टूल्स प्रयोग गर्न सक्नुहुन्छ
+- ✅ सम्पत्ति आकार र DOM जटिलताले गति कसरी प्रभावित गर्छ भन्ने कुरा बुझ्नुहुन्छ
+
+**छिटो आत्म-परीक्षण**: जब तपाईंसँग रेंडर-ब्लकिङ JavaScript हुन्छ के हुन्छ?
+*उत्तर: ब्राउजरले स्क्रिप्ट डाउनलोड र कार्यान्वयन गर्नुपर्छ त्यसपछि मात्र HTML पार्सिङ र पृष्ठ रेंडर गर्न जारी राख्न सक्छ*
+
+**वास्तविक-विश्व प्रदर्शन प्रभाव**:
+- **१००ms ढिलाइ**: प्रयोगकर्ताहरूले ढिलाइ महसुस गर्छन्
+- **१ सेकेन्ड ढिलाइ**: प्रयोगकर्ताहरूको ध्यान गुम्न थाल्छ
+- **३+ सेकेन्ड**: ४०% प्रयोगकर्ताहरू पृष्ठ छोड्छन्
+- **मोबाइल नेटवर्कहरू**: प्रदर्शन अझ बढी महत्त्वपूर्ण छ
+
+अब तपाईंले ब्राउजरले तपाईंले पठाएको सम्पत्तिहरू कसरी रेंडर गर्छ भन्ने बारेमा विचार पाउनुभएको छ, आउनुहोस् तपाईंको एक्सटेन्सन पूरा गर्न आवश्यक अन्तिम केही कुराहरू हेर्नुहोस्:
+
+### रंग गणना गर्न एक फंक्शन सिर्जना गर्नुहोस्
+
+अब हामी एउटा फंक्शन सिर्जना गर्नेछौं जसले संख्यात्मक डेटा अर्थपूर्ण रंगहरूमा परिणत गर्छ। यसलाई ट्राफिक लाइट प्रणाली जस्तै सोच्नुहोस् - हरियो सफा ऊर्जा, रातो उच्च कार्बन तीव्रता।
+
+यो फंक्शनले हाम्रो API बाट CO2 डेटा लिनेछ र वातावरणीय प्रभावलाई प्रतिनिधित्व गर्ने सबैभन्दा राम्रो रंग निर्धारण गर्नेछ। यो वैज्ञानिकहरूले जटिल डेटा ढाँचाहरूलाई दृश्यात्मक बनाउन ताप नक्साहरूमा रंग-कोडिङ प्रयोग गर्ने तरिकाको जस्तै हो - महासागरको तापक्रमदेखि ताराहरूको निर्माणसम्म। आउनुहोस् यसलाई `/src/index.js` मा थपौं, ती `const` भेरिएबलहरू सेट गरेपछि:
+
+```mermaid
+flowchart LR
+    A[CO2 Value] --> B[Find Closest Scale Point]
+    B --> C[Get Scale Index]
+    C --> D[Map to Color]
+    D --> E[Send to Background]
+    
+    subgraph "Color Scale"
+        F["0-150: Green (Clean)"]
+        G["150-600: Yellow (Moderate)"]
+        H["600-750: Orange (High)"]
+        I["750+: Brown (Very High)"]
+    end
+    
+    subgraph "Message Passing"
+        J[Content Script]
+        K[chrome.runtime.sendMessage]
+        L[Background Script]
+        M[Icon Update]
+    end
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style E fill:#fff3e0
+```
 
 ```javascript
 function calculateColor(value) {
@@ -131,33 +287,52 @@ function calculateColor(value) {
 }
 ```
 
-**आउनुहोस्, यो चतुर सानो फंक्शनलाई टुक्रा-टुक्रामा बुझौं:**
-- **दुई एरेहरू सेटअप गर्नुहोस्** - एउटा CO2 स्तरहरूको लागि, अर्को रंगहरूको लागि (हरियो = सफा, खैरो = फोहोर!)
-- **हाम्रो वास्तविक CO2 मानसँग सबैभन्दा नजिकको मिलान फेला पार्नुहोस्** केही चाखलाग्दो एरे सर्टिङ प्रयोग गरेर
-- **findIndex() मेथड प्रयोग गरेर मिल्दो रंग समात्नुहोस्**
-- **हाम्रो छनोट गरिएको रंगको साथ Chrome को पृष्ठभूमि स्क्रिप्टमा सन्देश पठाउनुहोस्**
-- **क्लिनर स्ट्रिङ फर्म्याटिङको लागि टेम्प्लेट लिटरलहरू (ती ब्याकटिक्स) प्रयोग गर्नुहोस्**
-- **सबै कुरा संगठित राख्नुहोस्** `const` घोषणाहरूको साथ
+**आउनुहोस्, यस चतुर सानो फंक्शनलाई तोडौं:**
+- **दुई एरेहरू सेट अप गर्दछ** - एउटा CO2 स्तरहरूको लागि, अर्को रंगहरूको लागि (हरियो = सफा, खैरो = फोहोर!)
+- **हाम्रो वास्तविक CO2 मानसँग सबैभन्दा नजिकको मिलान पत्ता लगाउँछ** केही चाखलाग्दो एरे सर्टिङ प्रयोग गरेर
+- **मिल्दो रंग समात्छ** findIndex() विधि प्रयोग गरेर
+- **हाम्रो रोजिएको रंगको साथ Chrome को पृष्ठभूमि स्क्रिप्टमा सन्देश पठाउँछ**
+- **टेम्प्लेट लिटरलहरू प्रयोग गर्दछ** (ती ब्याकटिक्स) सफा स्ट्रिङ फर्म्याटिङको लागि
+- **सबै कुरा व्यवस्थित राख्छ** const घोषणाहरूको साथ
 
-`chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) तपाईंको एक्सटेन्सनको नर्भस सिस्टम जस्तै हो - यसले पर्दा पछाडि सबै संचार र कार्यहरू ह्यान्डल गर्दछ:
+`chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) तपाईंको एक्सटेन्सनको स्नायु प्रणाली जस्तै हो - यसले पर्दा पछाडि सबै संचार र कार्यहरू व्यवस्थापन गर्दछ:
 
-> "chrome.runtime API प्रयोग गरेर पृष्ठभूमि पृष्ठ पुनः प्राप्त गर्नुहोस्, म्यानिफेस्टको बारेमा विवरणहरू फर्काउनुहोस्, र एप वा एक्सटेन्सन जीवनचक्रमा घटनाहरूको लागि सुन्नुहोस् र प्रतिक्रिया दिनुहोस्। तपाईं यस API प्रयोग गरेर URLहरूको सापेक्ष पथलाई पूर्ण-योग्य URLहरूमा रूपान्तरण गर्न सक्नुहुन्छ।"
+> "chrome.runtime API प्रयोग गरेर पृष्ठभूमि पृष्ठ पुनःप्राप्त गर्नुहोस्, म्यानिफेस्टको बारेमा विवरणहरू फर्काउनुहोस्, र एप वा एक्सटेन्सन जीवनचक्रमा घटनाहरूको लागि सुन्नुहोस् र प्रतिक्रिया दिनुहोस्। तपाईं यस API लाई URL को सापेक्ष पथलाई पूर्ण-योग्य URL मा रूपान्तरण गर्न पनि प्रयोग गर्न सक्नुहुन्छ।"
 
-**किन Chrome Runtime API यति उपयोगी छ:**
+**किन Chrome Runtime API उपयोगी छ:**
 - **तपाईंको एक्सटेन्सनका विभिन्न भागहरूलाई एकअर्कासँग कुरा गर्न दिन्छ**
-- **पृष्ठभूमि कार्यहरू ह्यान्डल गर्दछ** प्रयोगकर्ता इन्टरफेस फ्रिज नगरी
+- **पृष्ठभूमि कार्यहरू व्यवस्थापन गर्दछ** प्रयोगकर्ता इन्टरफेसलाई फ्रिज नगरी
 - **तपाईंको एक्सटेन्सनको जीवनचक्र घटनाहरू व्यवस्थापन गर्दछ**
-- **स्क्रिप्टहरू बीच सन्देश पासिङलाई सुपर सजिलो बनाउँछ**
-
-✅ यदि तपाईं Edge को लागि यो ब्राउजर एक्सटेन्सन विकास गर्दै हुनुहुन्छ भने, तपाईंलाई आश्चर्य लाग्न सक्छ कि तपाईं chrome API प्रयोग गर्दै हुनुहुन्छ। नयाँ Edge ब्राउजर संस्करणहरू Chromium ब्राउजर इन्जिनमा चल्छन्, त्यसैले तपाईं यी उपकरणहरू प्रयोग गर्न सक्नुहुन्छ।
+- **स्क्रिप्टहरू बीच सन्देश पास गर्न सजिलो बनाउँछ**
+
+✅ यदि तपाईं यो ब्राउजर एक्सटेन्सन Edge को लागि विकास गर्दै हुनुहुन्छ भने, तपाईंलाई आश्चर्य लाग्न सक्छ कि तपाईं chrome API प्रयोग गर्दै हुनुहुन्छ। नयाँ Edge ब्राउजर संस्करणहरू Chromium ब्राउजर इन्जिनमा चल्छन्, त्यसैले तपाईं यी उपकरणहरूको लाभ उठाउन सक्नुहुन्छ।
+
+```mermaid
+architecture-beta
+    group browser(logos:chrome)[Browser]
+    
+    service popup(logos:html5)[Popup UI] in browser
+    service content(logos:javascript)[Content Script] in browser
+    service background(database)[Background Script] in browser
+    service api(logos:api)[External API] in browser
+    
+    popup:R -- L:content
+    content:R -- L:background
+    background:T -- B:api
+    content:T -- B:api
+    
+    junction junctionCenter in browser
+    popup:R -- L:junctionCenter
+    junctionCenter:R -- L:background
+```
 
-> **प्रो टिप**: यदि तपाईं ब्राउजर एक्सटेन्सन प्रोफाइल गर्न चाहनुहुन्छ भने, एक्सटेन्सन भित्रबाट डेभलपर टूल्स सुरू गर्नुहोस्, किनकि यो आफ्नै अलग ब्राउजर इन्स्ट्यान्स हो। यसले तपाईंलाई एक्सटेन्सन-विशिष्ट प्रदर्शन मेट्रिक्समा पहुँच दिन्छ।
+> **प्रो टिप**: यदि तपाईं ब्राउजर एक्सटेन्सन प्रोफाइल गर्न चाहनुहुन्छ भने, एक्सटेन्सन भित्रैबाट डेभलपर टूल्स सुरू गर्नुहोस्, किनभने यो आफ्नै अलग ब्राउजर इन्स्ट्यान्स हो। यसले तपाईंलाई एक्सटेन्सन-विशिष्ट प्रदर्शन मेट्रिक्समा पहुँच दिन्छ।
 
 ### डिफल्ट आइकन रंग सेट गर्नुहोस्
 
-हामी वास्तविक डेटा फेच गर्न सुरु गर्नु अघि, आउनुहोस् हाम्रो एक्सटेन्सनलाई सुरुवात बिन्दु दिउँ। कसैलाई खाली वा बिग्रिएको देखिने आइकन मन पर्दैन। हामी हरियो रंगबाट सुरु गर्नेछौं ताकि प्रयोगकर्ताहरूले एक्सटेन्सन स्थापना गर्ने क्षणदेखि नै यो काम गरिरहेको थाहा पाउन सकून्।
+वास्तविक डेटा फेच गर्न सुरु गर्नु अघि, आउनुहोस् हाम्रो एक्सटेन्सनलाई सुरुवात बिन्दु दिउँ। कसैलाई खाली वा बिग्रिएको देखिने आइकन हेर्न मन पर्दैन। हामी हरियो रंगबाट सुरु गर्नेछौं ताकि प्रयोगकर्ताहरूले एक्सटेन्सन स्थापना गर्ने क्षणदेखि नै काम गरिरहेको देख्न सकून्।
 
-तपाईंको `init()` फंक्शनमा, आउनुहोस् त्यो डिफल्ट हरियो आइकन सेटअप गरौं:
+तपाईंको `init()` फंक्शनमा, आउनुहोस् त्यो डिफल्ट हरियो आइकन सेट गरौं:
 
 ```javascript
 chrome.runtime.sendMessage({
@@ -168,15 +343,15 @@ chrome.runtime.sendMessage({
 });
 ```
 
-**यो इनिसियलाइजेसनले के हासिल गर्छ:**
-- **डिफल्ट अवस्था** को रूपमा एक तटस्थ हरियो रंग सेट गर्दछ
+**यो सुरुवातले के पूरा गर्छ:**
+- **डिफल्ट अवस्थाको रूपमा तटस्थ हरियो रंग सेट गर्दछ**
 - **एक्सटेन्सन लोड हुँदा तुरुन्तै दृश्यात्मक प्रतिक्रिया प्रदान गर्दछ**
-- **पृष्ठभूमि स्क्रिप्टसँग संचार ढाँचाको स्थापना गर्दछ**
+- **पृष्ठभूमि स्क्रिप्टसँग संचार ढाँचा स्थापना गर्दछ**
 - **डेटा लोड हुनु अघि प्रयोगकर्ताहरूले कार्यात्मक एक्सटेन्सन देख्न सुनिश्चित गर्दछ**
 
 ### फंक्शनलाई कल गर्नुहोस्, कल कार्यान्वयन गर्नुहोस्
 
-अब आउनुहोस् सबै कुरा जोडौं ताकि ताजा CO2 डेटा आउँदा, तपाईंको आइकन स्वतः सही रंगसँग अपडेट होस्। यो इलेक्ट्रोनिक उपकरणमा अन्तिम सर्किट जडान गर्ने जस्तै हो - अचानक सबै व्यक्तिगत कम्पोनेन्टहरू एक प्रणालीको रूपमा काम गर्छन्।
+अब आउनुहोस् सबै कुरा जोडौं ताकि ताजा CO2 डेटा आउँदा, तपाईंको आइकनले सही रंगसँग स्वतः अपडेट होस्। यो इलेक्ट्रोनिक उपकरणमा अन्तिम सर्किट जडान गर्ने जस्तै हो - अचानक सबै व्यक्तिगत कम्पोनेन्टहरू एक प्रणालीको रूपमा काम गर्छन्।
 
 API बाट CO2 डेटा प्राप्त गरेपछि यो लाइन थप्नुहोस्:
 
@@ -186,77 +361,179 @@ API बाट CO2 डेटा प्राप्त गरेपछि यो 
 calculateColor(CO2);
 ```
 
-**यो एकीकरणले के हासिल गर्छ:**
-- **API डेटा प्रवाहलाई दृश्य संकेत प्रणालीसँग जोड्छ**
-- **नयाँ डेटा आउँदा आइकन अपडेटहरू स्वतः ट्रिगर गर्दछ**
-- **वर्तमान कार्बन तीव्रतामा आधारित वास्तविक समय दृश्यात्मक प्रतिक्रिया सुनिश्चित गर्दछ**
-- **डेटा फेचिङ र प्रदर्शन तर्क बीचको चिन्ताको अलगाव कायम राख्छ**
-
-अन्तमा, `/dist/background.js` मा, यी पृष्ठभूमि कार्य कलहरूको लागि लिस्नर थप्नुहोस्:
-
-```javascript
-// Listen for messages from the content script
-chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
-	if (msg.action === 'updateIcon') {
-		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
-	}
-});
-
-// Draw dynamic icon using Canvas API
-// Borrowed from energy lollipop extension - nice feature!
-function drawIcon(value) {
-	// Create an offscreen canvas for better performance
-	const canvas = new OffscreenCanvas(200, 200);
-	const context = canvas.getContext('2d');
-
-	// Draw a colored circle representing carbon intensity
-	context.beginPath();
-	context.fillStyle = value.color;
-	context.arc(100, 100, 50, 0, 2 * Math.PI);
-	context.fill();
-
-	// Return the image data for the browser icon
-	return context.getImageData(50, 50, 100, 100);
-}
-```
-
-**यो पृष्ठभूमि स्क्रिप्टले के गर्छ:**
-- **तपाईंको मुख्य स्क्रिप्टबाट सन्देशहरू सुन्छ** (जस्तै रिसेप्सनिस्टले कलहरू लिन्छ)
-- **तिनी 'updateIcon' अनुरोधहरूलाई प्रक्रिया गर्छ** तपाईंको टूलबार आइकन परिवर्तन गर्न
-- **Canvas API प्रयोग गरेर नयाँ आइकनहरू बनाउँछ**
-- **साधारण रंगीन वृत्त कोरेर वर्तमान कार्बन तीव्रता देखाउँछ**
-- **ताजा आइकनसँग तपाईंको ब्राउजर टूलबार अपडेट गर्छ**
-- **स्मूथ प्रदर्शनको लागि OffscreenCanvas प्रयोग गर्छ** (कुनै UI ब्लकिङ छैन)
+**यो
+- ✅ क्रोम Runtime API ले एक्सटेन्सन आर्किटेक्चरमा के भूमिका खेल्छ?
+- ✅ रंग गणना एल्गोरिदमले डाटा दृश्यात्मक प्रतिक्रिया संग कसरी नक्सा बनाउँछ?
 
-✅ तपाईं [Space Game पाठहरू](../../6-space-game/2-drawing-to-canvas/README.md) मा Canvas API को बारेमा थप जान्नुहुनेछ।
+**प्रदर्शन विचारहरू**: तपाईंको एक्सटेन्सनले अब निम्न देखाउँछ:
+- **प्रभावकारी सन्देश आदानप्रदान**: स्क्रिप्ट सन्दर्भहरू बीच सफा संचार
+- **अनुकूलित रेंडरिंग**: OffscreenCanvas ले UI ब्लकिंग रोक्छ
+- **रियल-टाइम अपडेटहरू**: प्रत्यक्ष डाटामा आधारित गतिशील आइकन परिवर्तन
+- **मेमोरी व्यवस्थापन**: सही सफाई र स्रोत ह्यान्डलिंग
 
 **तपाईंको एक्सटेन्सन परीक्षण गर्ने समय:**
-- **सबै कुरा निर्माण गर्नुहोस्** `npm run build` प्रयोग गरेर
-- **ब्राउजरमा आफ्नो एक्सटेन्सन पुनःलोड गर्नुहोस्** (यो चरण नबिर्सनुहोस्)
-- **आफ्नो एक्सटे
-यहाँ एउटा रोचक जासुसी मिशन छ: केही पुराना ओपन सोर्स वेबसाइटहरू (जस्तै Wikipedia, GitHub, वा Stack Overflow) छनोट गर्नुहोस् र तिनीहरूको कमिट इतिहासमा गहिरो अध्ययन गर्नुहोस्। के तपाईंले देख्न सक्नुहुन्छ कि तिनीहरूले कहिले प्रदर्शन सुधार गरेका थिए? कुन समस्याहरू बारम्बार देखा परिरहेका थिए?
-
-**तपाईंको अनुसन्धानको तरिका:**
-- **खोज्नुहोस्** कमिट सन्देशहरूमा "optimize," "performance," वा "faster" जस्ता शब्दहरू
-- **हेर्नुहोस्** ढाँचाहरू - के तिनीहरूले बारम्बार एउटै प्रकारका समस्याहरू समाधान गरिरहेका छन्?
-- **पहिचान गर्नुहोस्** वेबसाइटहरू सुस्त बनाउने सामान्य कारणहरू
-- **साझा गर्नुहोस्** तपाईंले के पत्ता लगाउनुभयो - अन्य विकासकर्ताहरूले वास्तविक उदाहरणहरूबाट सिक्न सक्छन्
-
-## पोस्ट-व्याख्यान क्विज
-
-[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/28)
-
-## समीक्षा र आत्म-अध्ययन
-
-[प्रदर्शन समाचारपत्र](https://perf.email/) को लागि साइन अप गर्ने विचार गर्नुहोस्।
+- **Build** सबै कुरा `npm run build` प्रयोग गरेर
+- **Reload** आफ्नो एक्सटेन्सन ब्राउजरमा (यो चरण बिर्सनु हुँदैन)
+- **Open** आफ्नो एक्सटेन्सन र आइकन रंग परिवर्तन हेर्नुहोस्
+- **Check** यो विश्वभरको वास्तविक कार्बन डाटामा कसरी प्रतिक्रिया दिन्छ
+
+अब तपाईंलाई थाहा हुनेछ कि कपडा धुने समय राम्रो छ कि सफा ऊर्जा कुर्नु पर्छ। तपाईंले केही साँच्चै उपयोगी निर्माण गर्नुभयो र ब्राउजर प्रदर्शनको बारेमा सिक्नुभयो।
+
+## GitHub Copilot Agent Challenge 🚀
+
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
+
+**विवरण:** ब्राउजर एक्सटेन्सनको प्रदर्शन निगरानी क्षमता सुधार गर्न एक सुविधा थप्नुहोस् जसले एक्सटेन्सनका विभिन्न कम्पोनेन्टहरूको लोड समय ट्र्याक र प्रदर्शन गर्दछ।
+
+**प्रेरणा:** Performance API प्रयोग गरेर CO2 डाटा API बाट फेच गर्न, रंग गणना गर्न, र आइकन अपडेट गर्न लाग्ने समय मापन गर्ने र ब्राउजर कन्सोलमा टाइमस्ट्याम्प र अवधि मेट्रिक्ससहित परिणाम देखाउने `performanceTracker` नामक एक फंक्शन बनाउनुहोस्।
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+
+## 🚀 चुनौती
+
+यहाँ एक रोचक जासुसी मिशन छ: केही पुराना ओपन सोर्स वेबसाइटहरू (जस्तै Wikipedia, GitHub, वा Stack Overflow) छनोट गर्नुहोस् र तिनीहरूको कमिट इतिहासमा डुब्नुहोस्। के तपाईंले प्रदर्शन सुधार कहाँ गरिएको छ पत्ता लगाउन सक्नुहुन्छ? कुन समस्याहरू बारम्बार देखा परिरहेका छन्?
+
+**तपाईंको अनुसन्धान दृष्टिकोण:**
+- **Search** कमिट सन्देशहरूमा "optimize," "performance," वा "faster" जस्ता शब्दहरू खोज्नुहोस्
+- **Look** ढाँचाहरूको लागि - के तिनीहरूले बारम्बार उस्तै प्रकारका समस्याहरू समाधान गरिरहेका छन्?
+- **Identify** वेबसाइटहरू सुस्त बनाउने सामान्य दोषीहरू
+- **Share** तपाईंले के पत्ता लगाउनुभयो - अन्य विकासकर्ताहरू वास्तविक उदाहरणहरूबाट सिक्छन्
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28)
+
+## समीक्षा र आत्म अध्ययन
+
+[performance newsletter](https://perf.email/) को लागि साइन अप गर्ने विचार गर्नुहोस्।
+
+ब्राउजरहरूले वेब प्रदर्शन कसरी मापन गर्छन् भनेर तिनीहरूको वेब उपकरणहरूको प्रदर्शन ट्याबहरू हेरेर अनुसन्धान गर्नुहोस्। के तपाईंले कुनै ठूला भिन्नता पाउनुभयो?
+
+### ⚡ **तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा**
+- [ ] ब्राउजर टास्क म्यानेजर खोल्नुहोस् (Chrome मा Shift+Esc) एक्सटेन्सन स्रोत उपयोग हेर्न
+- [ ] DevTools प्रदर्शन ट्याब प्रयोग गरेर वेबपेज प्रदर्शन रेकर्ड र विश्लेषण गर्नुहोस्
+- [ ] ब्राउजरको एक्सटेन्सन पृष्ठ जाँच गर्नुहोस् कुन एक्सटेन्सनहरूले स्टार्टअप समयमा प्रभाव पार्छ
+- [ ] एक्सटेन्सनहरू अस्थायी रूपमा अक्षम गरेर प्रदर्शन भिन्नता हेर्न प्रयास गर्नुहोस्
+
+### 🎯 **तपाईंले यो घण्टामा पूरा गर्न सक्ने कुरा**
+- [ ] पोस्ट-लेसन क्विज पूरा गर्नुहोस् र प्रदर्शन अवधारणाहरू बुझ्नुहोस्
+- [ ] आफ्नो ब्राउजर एक्सटेन्सनको लागि ब्याकग्राउन्ड स्क्रिप्ट कार्यान्वयन गर्नुहोस्
+- [ ] ब्राउजर.alarms प्रयोग गरेर प्रभावकारी ब्याकग्राउन्ड कार्यहरू सिक्नुहोस्
+- [ ] सामग्री स्क्रिप्टहरू र ब्याकग्राउन्ड स्क्रिप्टहरू बीच सन्देश आदानप्रदान अभ्यास गर्नुहोस्
+- [ ] आफ्नो एक्सटेन्सनको स्रोत उपयोग मापन र अनुकूलन गर्नुहोस्
+
+### 📅 **तपाईंको हप्ताको प्रदर्शन यात्रा**
+- [ ] ब्याकग्राउन्ड कार्यक्षमता सहित उच्च प्रदर्शन ब्राउजर एक्सटेन्सन पूरा गर्नुहोस्
+- [ ] सेवा कार्यकर्ता र आधुनिक एक्सटेन्सन आर्किटेक्चरमा महारत हासिल गर्नुहोस्
+- [ ] प्रभावकारी डाटा समिकरण र क्यासिङ रणनीतिहरू कार्यान्वयन गर्नुहोस्
+- [ ] एक्सटेन्सन प्रदर्शनको लागि उन्नत डिबगिङ प्रविधिहरू सिक्नुहोस्
+- [ ] कार्यक्षमता र स्रोत दक्षताको लागि आफ्नो एक्सटेन्सन अनुकूलित गर्नुहोस्
+- [ ] एक्सटेन्सन प्रदर्शन परिदृश्यहरूको लागि व्यापक परीक्षणहरू सिर्जना गर्नुहोस्
+
+### 🌟 **तपाईंको महिनाको अनुकूलन महारत**
+- [ ] इन्प्राइज-ग्रेड ब्राउजर एक्सटेन्सनहरू निर्माण गर्नुहोस् जसको प्रदर्शन उत्कृष्ट छ
+- [ ] वेब वर्करहरू, सेवा कार्यकर्ता, र आधुनिक वेब प्रदर्शनको बारेमा सिक्नुहोस्
+- [ ] प्रदर्शन अनुकूलनमा केन्द्रित ओपन सोर्स प्रोजेक्टहरूमा योगदान गर्नुहोस्
+- [ ] ब्राउजर आन्तरिक र उन्नत डिबगिङ प्रविधिहरूमा महारत हासिल गर्नुहोस्
+- [ ] प्रदर्शन निगरानी उपकरणहरू र उत्कृष्ट अभ्यास मार्गदर्शकहरू सिर्जना गर्नुहोस्
+- [ ] वेब अनुप्रयोगहरू अनुकूलन गर्ने प्रदर्शन विशेषज्ञ बन्नुहोस्
+
+## 🎯 तपाईंको ब्राउजर एक्सटेन्सन महारत समयरेखा
+
+```mermaid
+timeline
+    title Complete Extension Development Progression
+    
+    section Performance Fundamentals (20 minutes)
+        Browser Profiling: DevTools mastery
+                         : Timeline analysis
+                         : Bottleneck identification
+                         : Critical rendering path
+        
+    section Background Tasks (25 minutes)
+        Extension Architecture: Message passing
+                              : Background scripts
+                              : Runtime API usage
+                              : Cross-context communication
+        
+    section Visual Feedback (30 minutes)
+        Dynamic UI: Color calculation algorithms
+                  : Canvas API integration
+                  : Icon generation
+                  : Real-time updates
+        
+    section Performance Optimization (35 minutes)
+        Efficient Code: Async operations
+                      : Memory management
+                      : Resource cleanup
+                      : Performance monitoring
+        
+    section Production Ready (45 minutes)
+        Polish & Testing: Cross-browser compatibility
+                        : Error handling
+                        : User experience
+                        : Performance validation
+        
+    section Advanced Features (1 week)
+        Extension Ecosystem: Chrome Web Store
+                           : User feedback
+                           : Analytics integration
+                           : Update management
+        
+    section Professional Development (2 weeks)
+        Enterprise Extensions: Team collaboration
+                             : Code reviews
+                             : CI/CD pipelines
+                             : Security audits
+        
+    section Expert Mastery (1 month)
+        Platform Expertise: Advanced Chrome APIs
+                          : Performance optimization
+                          : Architecture patterns
+                          : Open source contribution
+```
 
-ब्राउजरहरूले वेब प्रदर्शन कसरी मापन गर्छन् भन्ने केही तरिकाहरूको अनुसन्धान गर्नुहोस्। तिनीहरूको वेब उपकरणहरूको प्रदर्शन ट्याबहरू हेर्दा के तपाईंले कुनै ठूला भिन्नता पाउनुभयो?
+### 🛠️ तपाईंको पूर्ण एक्सटेन्सन विकास उपकरण किट
+
+यो त्रयी पूरा गरेपछि, तपाईंले निम्नमा महारत हासिल गर्नुभएको छ:
+- **ब्राउजर आर्किटेक्चर**: एक्सटेन्सनहरू ब्राउजर प्रणालीहरूसँग कसरी एकीकृत हुन्छन् भन्ने गहिरो समझ
+- **प्रदर्शन प्रोफाइलिङ**: विकासकर्ता उपकरणहरू प्रयोग गरेर बाधाहरू पहिचान र समाधान गर्ने क्षमता
+- **Async प्रोग्रामिङ**: उत्तरदायी, गैर-अवरोधक अपरेशनहरूको लागि आधुनिक JavaScript ढाँचाहरू
+- **API एकीकरण**: प्रमाणीकरण र त्रुटि ह्यान्डलिङसहित बाह्य डाटा फेच गर्ने
+- **दृश्य डिजाइन**: गतिशील UI अपडेटहरू र Canvas-आधारित ग्राफिक्स उत्पादन
+- **सन्देश आदानप्रदान**: एक्सटेन्सन आर्किटेक्चरमा स्क्रिप्टहरू बीच संचार
+- **प्रयोगकर्ता अनुभव**: लोडिङ अवस्थाहरू, त्रुटि ह्यान्डलिङ, र सहज अन्तरक्रियाहरू
+- **उत्पादन कौशल**: वास्तविक संसारमा परिनियोजनको लागि परीक्षण, डिबगिङ, र अनुकूलन
+
+**वास्तविक संसार अनुप्रयोगहरू**: तपाईंको एक्सटेन्सन विकास कौशल सीधा लागू हुन्छ:
+- **प्रोग्रेसिव वेब एप्स**: समान आर्किटेक्चर र प्रदर्शन ढाँचाहरू
+- **Electron डेस्कटप एप्स**: वेब प्रविधिहरू प्रयोग गरेर क्रस-प्ल्याटफर्म अनुप्रयोगहरू
+- **मोबाइल हाइब्रिड एप्स**: Cordova/PhoneGap विकास वेब APIs प्रयोग गरेर
+- **इन्प्राइज वेब अनुप्रयोगहरू**: जटिल ड्यासबोर्ड र उत्पादकता उपकरणहरू
+- **Chrome DevTools एक्सटेन्सनहरू**: उन्नत विकासकर्ता उपकरण र डिबगिङ
+- **वेब API एकीकरण**: कुनै पनि अनुप्रयोग जसले बाह्य सेवाहरूसँग संचार गर्छ
+
+**व्यावसायिक प्रभाव**: अब तपाईं:
+- **Build** उत्पादन-तयार ब्राउजर एक्सटेन्सनहरू अवधारणा देखि परिनियोजनसम्म निर्माण गर्न सक्नुहुन्छ
+- **Optimize** वेब अनुप्रयोग प्रदर्शन उद्योग-मानक प्रोफाइलिङ उपकरणहरू प्रयोग गरेर
+- **Architect** उचित चिन्ताको अलगावसहित स्केलेबल प्रणालीहरू डिजाइन गर्न सक्नुहुन्छ
+- **Debug** जटिल async अपरेशनहरू र क्रस-कन्टेक्स्ट संचार
+- **Contribute** ओपन सोर्स एक्सटेन्सन प्रोजेक्टहरू र ब्राउजर मापदण्डहरूमा योगदान गर्न
+
+**अर्को स्तरका अवसरहरू**:
+- **Chrome Web Store Developer**: लाखौं प्रयोगकर्ताहरूका लागि एक्सटेन्सनहरू प्रकाशित गर्नुहोस्
+- **Web Performance Engineer**: अनुकूलन र प्रयोगकर्ता अनुभवमा विशेषज्ञता हासिल गर्नुहोस्
+- **Browser Platform Developer**: ब्राउजर इन्जिन विकासमा योगदान गर्नुहोस्
+- **Extension Framework Creator**: अन्य विकासकर्ताहरूलाई मद्दत गर्ने उपकरणहरू निर्माण गर्नुहोस्
+- **Developer Relations**: शिक्षण र सामग्री सिर्जनाको माध्यमबाट ज्ञान साझा गर्नुहोस्
+
+🌟 **उपलब्धि अनलक गरियो**: तपाईंले एक पूर्ण, कार्यात्मक ब्राउजर एक्सटेन्सन निर्माण गर्नुभएको छ जसले व्यावसायिक विकास अभ्यासहरू र आधुनिक वेब मापदण्डहरू प्रदर्शन गर्दछ!
 
 ## असाइनमेन्ट
 
-[साइटको प्रदर्शन विश्लेषण गर्नुहोस्](assignment.md)
+[Analyze a site for performance](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/6-space-game/1-introduction/README.md b/translations/ne/6-space-game/1-introduction/README.md
index a24f72cd2b..4cfe571418 100644
--- a/translations/ne/6-space-game/1-introduction/README.md
+++ b/translations/ne/6-space-game/1-introduction/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "862f7f2ef320f6f8950fae379e6ece45",
-  "translation_date": "2025-10-22T17:15:48+00:00",
+  "original_hash": "a6332a7bb4d0be3bfd24199c83993777",
+  "translation_date": "2025-11-03T15:54:53+00:00",
   "source_file": "6-space-game/1-introduction/README.md",
   "language_code": "ne"
 }
 -->
 # स्पेस गेम बनाउनुहोस् भाग १: परिचय
 
-![स्पेस गेमको एनिमेशन जसले गेमप्ले देखाउँछ](../../../../6-space-game/images/pewpew.gif)
-
-जसरी नासा मिशन कन्ट्रोलले स्पेस लन्चको समयमा विभिन्न प्रणालीहरू समन्वय गर्छ, हामी एक स्पेस गेम बनाउनेछौं जसले देखाउँछ कि कसरी प्रोग्रामका विभिन्न भागहरू एकसाथ काम गर्न सक्छन्। तपाईंले खेल्न सक्ने केही बनाउँदै, तपाईंले कुनै पनि सफ्टवेयर प्रोजेक्टमा लागू गर्न सकिने आवश्यक प्रोग्रामिङ अवधारणाहरू सिक्नुहुनेछ।
-
-हामी कोडलाई व्यवस्थित गर्ने दुई आधारभूत दृष्टिकोणहरू अन्वेषण गर्नेछौं: इनहेरिटेन्स र कम्पोजिसन। यी केवल शैक्षिक अवधारणाहरू मात्र होइनन् – यी नै ढाँचाहरू हुन् जसले भिडियो गेमदेखि बैंकिङ प्रणालीसम्म सबैलाई शक्ति प्रदान गर्छ। हामी एक कम्युनिकेशन प्रणाली पनि कार्यान्वयन गर्नेछौं जसलाई पब/सब भनिन्छ, जसले स्पेसक्राफ्टमा प्रयोग गरिने कम्युनिकेशन नेटवर्कहरू जस्तै विभिन्न कम्पोनेन्टहरूलाई निर्भरता सिर्जना नगरी जानकारी साझा गर्न अनुमति दिन्छ।
+```mermaid
+journey
+    title Your Game Development Journey
+    section Foundation
+      Learn game architecture: 3: Student
+      Understand inheritance: 4: Student
+      Explore composition: 4: Student
+    section Communication
+      Build pub/sub system: 4: Student
+      Design event flow: 5: Student
+      Connect components: 5: Student
+    section Application
+      Create game objects: 5: Student
+      Implement patterns: 5: Student
+      Plan game structure: 5: Student
+```
 
-यस श्रृंखलाको अन्त्यसम्ममा, तपाईंले स्केल र विकास गर्न सक्ने एप्लिकेसनहरू निर्माण गर्ने तरिका बुझ्नुहुनेछ – चाहे तपाईं गेमहरू, वेब एप्लिकेसनहरू, वा कुनै अन्य सफ्टवेयर प्रणाली विकास गर्दै हुनुहुन्छ।
+![स्पेस गेमको एनिमेसन जसले गेमप्ले देखाउँछ](../../../../6-space-game/images/pewpew.gif)
+
+जसरी नासाको मिशन कन्ट्रोलले स्पेस लन्चको समयमा विभिन्न प्रणालीहरू समन्वय गर्छ, हामी एउटा स्पेस गेम बनाउनेछौं जसले देखाउँछ कि कसरी प्रोग्रामका विभिन्न भागहरू सहज रूपमा सँगै काम गर्न सक्छन्। तपाईंले वास्तवमा खेल्न सक्ने केही सिर्जना गर्दा, तपाईंले कुनै पनि सफ्टवेयर परियोजनामा लागू हुने आवश्यक प्रोग्रामिङ अवधारणाहरू सिक्नुहुनेछ।
+
+हामी कोडलाई व्यवस्थित गर्ने दुई आधारभूत दृष्टिकोणहरू अन्वेषण गर्नेछौं: इनहेरिटेन्स र कम्पोजिसन। यी केवल शैक्षिक अवधारणाहरू मात्र होइनन् - यी त्यस्ता ढाँचाहरू हुन् जसले भिडियो गेमदेखि बैंकिङ प्रणालीसम्म सबैलाई शक्ति दिन्छ। हामीले स्पेसक्राफ्टमा प्रयोग हुने संचार नेटवर्क जस्तै काम गर्ने पब/सब नामक संचार प्रणाली पनि कार्यान्वयन गर्नेछौं, जसले विभिन्न कम्पोनेन्टहरूलाई निर्भरता सिर्जना नगरी जानकारी साझा गर्न अनुमति दिन्छ।
+
+यस श्रृंखलाको अन्त्यसम्ममा, तपाईंले स्केल र विकास गर्न सक्ने एप्लिकेसनहरू निर्माण गर्ने तरिका बुझ्नुहुनेछ - चाहे तपाईं गेमहरू, वेब एप्लिकेसनहरू, वा कुनै अन्य सफ्टवेयर प्रणाली विकास गर्दै हुनुहुन्छ।
+
+```mermaid
+mindmap
+  root((Game Architecture))
+    Object Organization
+      Inheritance
+      Composition
+      Class Hierarchies
+      Behavior Mixing
+    Communication Patterns
+      Pub/Sub System
+      Event Emitters
+      Message Passing
+      Loose Coupling
+    Game Objects
+      Properties (x, y)
+      Behaviors (move, collide)
+      Lifecycle Management
+      State Management
+    Design Patterns
+      Factory Functions
+      Observer Pattern
+      Component System
+      Event-Driven Architecture
+    Scalability
+      Modular Design
+      Maintainable Code
+      Testing Strategies
+      Performance Optimization
+```
 
 ## प्रि-लेक्चर क्विज
 
@@ -23,32 +70,71 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## गेम विकासमा इनहेरिटेन्स र कम्पोजिसन
 
-जसरी प्रोजेक्टहरू जटिलतामा बढ्छन्, कोडको संगठन महत्वपूर्ण हुन्छ। साधारण स्क्रिप्टको रूपमा सुरु भएको कुरा उचित संरचना बिना मर्मत गर्न गाह्रो हुन सक्छ – ठीक त्यस्तै जस्तो अपोलो मिशनहरूले हजारौं कम्पोनेन्टहरू बीच सावधानीपूर्वक समन्वयको आवश्यकता थियो।
+जब परियोजनाहरू जटिलतामा बढ्छन्, कोडको संगठन महत्वपूर्ण हुन्छ। साधारण स्क्रिप्टको रूपमा सुरु भएको कुरा उचित संरचना बिना मर्मत गर्न गाह्रो हुन सक्छ - ठीक त्यस्तै जस्तो अपोलो मिशनहरूले हजारौं कम्पोनेन्टहरू बीच सावधानीपूर्वक समन्वयको आवश्यकता थियो।
 
-हामी कोडलाई व्यवस्थित गर्नका लागि दुई आधारभूत दृष्टिकोणहरू अन्वेषण गर्नेछौं: इनहेरिटेन्स र कम्पोजिसन। प्रत्येकको अलग-अलग फाइदाहरू छन्, र दुवैलाई बुझ्नाले विभिन्न परिस्थितिहरूका लागि सही दृष्टिकोण चयन गर्न मद्दत गर्दछ। हामी यी अवधारणाहरू हाम्रो स्पेस गेम मार्फत प्रदर्शन गर्नेछौं, जहाँ नायकहरू, शत्रुहरू, पावर-अपहरू, र अन्य वस्तुहरूले कुशलतापूर्वक अन्तरक्रिया गर्नुपर्छ।
+हामी कोडलाई व्यवस्थित गर्न दुई आधारभूत दृष्टिकोणहरू अन्वेषण गर्नेछौं: इनहेरिटेन्स र कम्पोजिसन। प्रत्येकको अलग-अलग फाइदाहरू छन्, र दुवैलाई बुझ्नाले विभिन्न परिस्थितिहरूको लागि सही दृष्टिकोण छनोट गर्न मद्दत गर्दछ। हामी यी अवधारणाहरू हाम्रो स्पेस गेम मार्फत प्रदर्शन गर्नेछौं, जहाँ नायकहरू, शत्रुहरू, पावर-अपहरू, र अन्य वस्तुहरूले कुशलतापूर्वक अन्तरक्रिया गर्नुपर्छ।
 
-✅ सबैभन्दा प्रसिद्ध प्रोग्रामिङ पुस्तकहरू मध्ये एक [डिजाइन प्याटर्नहरू](https://en.wikipedia.org/wiki/Design_Patterns)सँग सम्बन्धित छ।
+✅ सबैभन्दा प्रसिद्ध प्रोग्रामिङ पुस्तकहरू मध्ये एक [डिजाइन प्याटर्न्स](https://en.wikipedia.org/wiki/Design_Patterns) को बारेमा हो।
 
-कुनै पनि गेममा, तपाईंसँग `गेम वस्तुहरू` हुन्छन् – तपाईंको गेम संसारलाई भरपर्दा अन्तरक्रियात्मक तत्वहरू। नायकहरू, शत्रुहरू, पावर-अपहरू, र दृश्य प्रभावहरू सबै गेम वस्तुहरू हुन्। प्रत्येकले `x` र `y` मानहरू प्रयोग गरेर विशिष्ट स्क्रिन समन्वयमा अवस्थित हुन्छ, ठीक जस्तै समन्वय प्लेनमा बिन्दुहरू प्लट गर्दै।
+कुनै पनि गेममा, तपाईंको `गेम वस्तुहरू` हुन्छन् - अन्तरक्रियात्मक तत्वहरू जसले तपाईंको गेम संसारलाई भरिदिन्छ। नायकहरू, शत्रुहरू, पावर-अपहरू, र दृश्य प्रभावहरू सबै गेम वस्तुहरू हुन्। प्रत्येक `x` र `y` मानहरू प्रयोग गरेर विशिष्ट स्क्रिन समन्वयमा अवस्थित हुन्छ, ठीक जस्तै समन्वय प्लेनमा बिन्दुहरू प्लट गर्दै।
 
 तिनीहरूको दृश्य भिन्नताहरूको बाबजुद, यी वस्तुहरूले प्रायः आधारभूत व्यवहारहरू साझा गर्छन्:
 
-- **तिनीहरू कतै अवस्थित छन्** – प्रत्येक वस्तुमा x र y समन्वय हुन्छ ताकि गेमले यसलाई कहाँ ड्र गर्नुपर्छ थाहा पाओस्
-- **धेरैले वरिपरि सर्न सक्छन्** – नायकहरू दौडन्छन्, शत्रुहरू पछ्याउँछन्, गोलीहरू स्क्रिनभरि उड्छन्
-- **तिनीहरूको जीवनकाल हुन्छ** – केही सधैं रहन्छन्, अरू (जस्तै विस्फोटहरू) छोटो समयको लागि देखा पर्छन् र हराउँछन्
-- **तिनीहरू कुराहरूमा प्रतिक्रिया दिन्छन्** – जब चीजहरू ठोक्किन्छन्, पावर-अपहरू सङ्कलन गरिन्छ, स्वास्थ्य बारहरू अपडेट हुन्छन्
+- **तिनीहरू कतै अवस्थित छन्** - प्रत्येक वस्तुमा `x` र `y` समन्वय हुन्छ ताकि गेमले यसलाई कहाँ चित्रण गर्ने थाहा पाओस्।
+- **धेरैले वरिपरि सर्न सक्छन्** - नायकहरू दौडन्छन्, शत्रुहरूले पछ्याउँछन्, गोलीहरू स्क्रिनभरि उड्छन्।
+- **तिनीहरूको जीवनकाल हुन्छ** - केही सधैं रहन्छन्, अरू (जस्तै विस्फोटहरू) छोटो समयको लागि देखा पर्छन् र हराउँछन्।
+- **तिनीहरूले प्रतिक्रिया दिन्छन्** - जब चीजहरू ठोक्किन्छन्, पावर-अपहरू सङ्कलन गरिन्छ, स्वास्थ्य बारहरू अपडेट हुन्छन्।
 
-✅ प्याक-म्यान जस्तो गेमको बारेमा सोच्नुहोस्। के तपाईं यस गेममा माथि सूचीबद्ध चार वस्तु प्रकारहरू पहिचान गर्न सक्नुहुन्छ?
+✅ प्याक-म्यान जस्तो गेमको बारेमा सोच्नुहोस्। के तपाईं यस खेलमा चार वस्तु प्रकारहरू पहिचान गर्न सक्नुहुन्छ?
+
+```mermaid
+classDiagram
+    class GameObject {
+        +x: number
+        +y: number
+        +type: string
+        +exists_somewhere()
+    }
+    
+    class MovableObject {
+        +moveTo(x, y)
+        +can_move_around()
+    }
+    
+    class TemporaryObject {
+        +lifespan: number
+        +has_lifespan()
+    }
+    
+    class InteractiveObject {
+        +onCollision()
+        +reacts_to_stuff()
+    }
+    
+    GameObject <|-- MovableObject
+    GameObject <|-- TemporaryObject
+    GameObject <|-- InteractiveObject
+    
+    MovableObject <|-- Hero
+    MovableObject <|-- Enemy
+    MovableObject <|-- Bullet
+    
+    TemporaryObject <|-- PowerUp
+    TemporaryObject <|-- Explosion
+    
+    InteractiveObject <|-- Collectible
+    InteractiveObject <|-- Obstacle
+```
 
 ### कोड मार्फत व्यवहार व्यक्त गर्दै
 
-अब तपाईंले बुझ्नुभयो कि गेम वस्तुहरूले साझा गर्ने सामान्य व्यवहारहरू के हुन्, आउनुहोस् यी व्यवहारहरूलाई JavaScript मा कार्यान्वयन गर्ने तरिका अन्वेषण गरौं। तपाईंले वस्तुको व्यवहारलाई कक्षाहरू वा व्यक्तिगत वस्तुहरूमा संलग्न विधिहरू मार्फत व्यक्त गर्न सक्नुहुन्छ, र छनौट गर्नका लागि धेरै दृष्टिकोणहरू छन्।
+अब तपाईंले बुझ्नुभयो कि गेम वस्तुहरूले साझा गर्ने सामान्य व्यवहारहरू के हुन्, आउनुहोस् यी व्यवहारहरूलाई जाभास्क्रिप्टमा कार्यान्वयन गर्ने तरिका अन्वेषण गरौं। तपाईं कक्षाहरू वा व्यक्तिगत वस्तुहरूमा संलग्न विधिहरू मार्फत वस्तु व्यवहार व्यक्त गर्न सक्नुहुन्छ, र छनोट गर्नका लागि धेरै दृष्टिकोणहरू छन्।
 
 **क्लास-आधारित दृष्टिकोण**
 
-कक्षाहरू र इनहेरिटेन्सले गेम वस्तुहरूलाई व्यवस्थित गर्न संरचित दृष्टिकोण प्रदान गर्दछ। कार्ल लिनियसद्वारा विकसित कर प्रणाली जस्तै, तपाईं सामान्य गुणहरू समावेश गर्ने आधार कक्षा संग सुरु गर्नुहुन्छ, त्यसपछि विशेष क्षमताहरू थप्दै यी आधारभूतहरूलाई इनहेरिट गर्ने विशेष कक्षाहरू सिर्जना गर्नुहुन्छ।
+क्लासहरू र इनहेरिटेन्सले गेम वस्तुहरूलाई व्यवस्थित गर्न संरचित दृष्टिकोण प्रदान गर्दछ। कार्ल लिनियसद्वारा विकसित कर प्रणाली जस्तै, तपाईं सामान्य गुणहरू समावेश गर्ने आधार कक्षा संग सुरु गर्नुहुन्छ, त्यसपछि विशेष क्षमताहरू थप्दै यी आधारभूतहरूलाई इनहेरिट गर्ने विशेष कक्षाहरू सिर्जना गर्नुहुन्छ।
 
-✅ इनहेरिटेन्स बुझ्न महत्त्वपूर्ण अवधारणा हो। [MDN को इनहेरिटेन्सको बारेमा लेख](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) मा थप जान्नुहोस्।
+✅ इनहेरिटेन्स बुझ्न महत्त्वपूर्ण अवधारणा हो। [MDN को इनहेरिटेन्सको लेख](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) मा थप जान्नुहोस्।
 
 यहाँ कसरी तपाईं कक्षाहरू र इनहेरिटेन्स प्रयोग गरेर गेम वस्तुहरू कार्यान्वयन गर्न सक्नुहुन्छ:
 
@@ -64,9 +150,9 @@ class GameObject {
 ```
 
 **यसलाई चरणबद्ध रूपमा तोडौं:**
-- हामी प्रत्येक गेम वस्तुले प्रयोग गर्न सक्ने आधारभूत टेम्प्लेट सिर्जना गर्दैछौं
-- कन्स्ट्रक्टरले वस्तु कहाँ छ (`x`, `y`) र कस्तो प्रकारको वस्तु हो भनेर बचत गर्दछ
-- यो आधार बनिन्छ जसमा तपाईंका सबै गेम वस्तुहरू निर्माण हुनेछ
+- हामी एउटा आधारभूत टेम्प्लेट सिर्जना गर्दैछौं जुन प्रत्येक गेम वस्तुले प्रयोग गर्न सक्छ।
+- कन्स्ट्रक्टरले वस्तु कहाँ छ (`x`, `y`) र कस्तो प्रकारको वस्तु हो भनेर बचत गर्छ।
+- यो आधार बनिन्छ जसमा तपाईंका सबै गेम वस्तुहरू निर्माण हुनेछ।
 
 ```javascript
 // Step 2: Add movement capability through inheritance
@@ -84,9 +170,9 @@ class Movable extends GameObject {
 ```
 
 **माथिको कोडमा, हामीले:**
-- गेमओब्जेक्ट कक्षालाई विस्तार गरेर मूभमेन्ट कार्यक्षमता थपेका छौं
-- `super()` प्रयोग गरेर अभिभावक कन्स्ट्रक्टरलाई कल गरेका छौं ताकि इनहेरिटेड गुणहरू आरम्भ गर्न सकियोस्
-- `moveTo()` विधि थपेका छौं जसले वस्तुको स्थिति अपडेट गर्दछ
+- **विस्तारित** GameObject कक्षालाई आन्दोलन कार्यक्षमता थप्न।
+- **पेरेन्ट कन्स्ट्रक्टरलाई बोलाएको** `super()` प्रयोग गरेर इनहेरिटेड गुणहरू आरम्भ गर्न।
+- **थपिएको** `moveTo()` विधि जसले वस्तुको स्थिति अपडेट गर्दछ।
 
 ```javascript
 // Step 3: Create specific game object types
@@ -111,16 +197,16 @@ const tree = new Tree(10, 15);
 ```
 
 **यी अवधारणाहरू बुझ्दै:**
-- उपयुक्त व्यवहारहरू इनहेरिट गर्ने विशेष वस्तु प्रकारहरू सिर्जना गर्दछ
-- इनहेरिटेन्सले चयनात्मक सुविधा समावेश गर्न कसरी अनुमति दिन्छ देखाउँछ
-- नायकहरू सर्न सक्छन् जबकि रूखहरू स्थिर रहन्छन्
-- कक्षा पदानुक्रमले अनुपयुक्त कार्यहरू रोक्छ भनेर चित्रण गर्दछ
+- **विशेषीकृत वस्तु प्रकारहरू सिर्जना गर्दछ** जसले उपयुक्त व्यवहारहरू इनहेरिट गर्छ।
+- **देखाउँछ** कि इनहेरिटेन्सले चयनात्मक सुविधा समावेश गर्न अनुमति दिन्छ।
+- **देखाउँछ** कि नायकहरू सर्न सक्छन् जबकि रूखहरू स्थिर रहन्छन्।
+- **चित्रण गर्दछ** कि कक्षा पदानुक्रमले अनुपयुक्त कार्यहरू रोक्छ।
 
-✅ प्याक-म्यान नायक (जस्तै इन्की, पिन्की वा ब्लिन्की) लाई पुनः कल्पना गर्न केही मिनेट लिनुहोस् र यसलाई JavaScript मा कसरी लेख्न सकिन्छ भनेर सोच्नुहोस्।
+✅ केही मिनेट लिनुहोस् र प्याक-म्यान नायक (जस्तै, इन्की, पिन्की वा ब्लिन्की) पुनः कल्पना गर्नुहोस् र यसलाई जाभास्क्रिप्टमा कसरी लेखिनेछ।
 
 **कम्पोजिसन दृष्टिकोण**
 
-कम्पोजिसनले मोड्युलर डिजाइन दर्शन अनुसरण गर्दछ, जस्तै इन्जिनियरहरूले अन्तरिक्ष यानलाई विनिमेय कम्पोनेन्टहरूसँग डिजाइन गर्छन्। अभिभावक कक्षाबाट इनहेरिट गर्ने सट्टा, तपाईंले विशिष्ट व्यवहारहरू संयोजन गरेर वस्तुहरू सिर्जना गर्नुहुन्छ जसमा तिनीहरूलाई चाहिने कार्यक्षमता मात्र हुन्छ। यस दृष्टिकोणले कठोर पदानुक्रमीय बाधाहरू बिना लचिलोपन प्रदान गर्दछ।
+कम्पोजिसनले मोड्युलर डिजाइन दर्शन अनुसरण गर्दछ, ठीक जस्तै इन्जिनियरहरूले अन्तरिक्ष यानलाई विनिमेय कम्पोनेन्टहरूसँग डिजाइन गर्छन्। पेरेन्ट कक्षाबाट इनहेरिट गर्ने सट्टा, तपाईंले विशिष्ट व्यवहारहरू संयोजन गरेर वस्तुहरू सिर्जना गर्नुहुन्छ जसमा तिनीहरूलाई चाहिने कार्यक्षमता मात्र हुन्छ। यस दृष्टिकोणले कठोर पदानुक्रमीय बाधाहरू बिना लचिलोपन प्रदान गर्दछ।
 
 ```javascript
 // Step 1: Create base behavior objects
@@ -139,9 +225,9 @@ const movable = {
 ```
 
 **यस कोडले के गर्छ:**
-- स्थिति र प्रकार गुणहरूसँग आधार `gameObject` परिभाषित गर्दछ
-- मूभमेन्ट कार्यक्षमतासहित अलग `movable` व्यवहार वस्तु सिर्जना गर्दछ
-- स्थिति डेटा र मूभमेन्ट तर्कलाई स्वतन्त्र राखेर चिन्ता अलग गर्दछ
+- **परिभाषित गर्दछ** आधार `gameObject` स्थिति र प्रकार गुणहरूसँग।
+- **सिर्जना गर्दछ** अलग `movable` व्यवहार वस्तु आन्दोलन कार्यक्षमतासँग।
+- **चिन्ता अलग गर्दछ** स्थिति डेटा र आन्दोलन तर्कलाई स्वतन्त्र राखेर।
 
 ```javascript
 // Step 2: Compose objects by combining behaviors
@@ -168,10 +254,10 @@ function createStatic(x, y, type) {
 ```
 
 **माथिको कोडमा, हामीले:**
-- आधार वस्तु गुणहरू मूभमेन्ट व्यवहारसँग संयोजन गरेका छौं स्प्रेड सिन्ट्याक्स प्रयोग गरेर
-- कस्टमाइज्ड वस्तुहरू फर्काउने फ्याक्टरी कार्यहरू सिर्जना गरेका छौं
-- कठोर कक्षा पदानुक्रम बिना लचिलो वस्तु सिर्जना सक्षम गरेका छौं
-- वस्तुहरूलाई तिनीहरूलाई चाहिने व्यवहारहरू मात्र दिन अनुमति दिएका छौं
+- **संयोजन गरेको** आधार वस्तु गुणहरू र आन्दोलन व्यवहारलाई स्प्रेड सिन्ट्याक्स प्रयोग गरेर।
+- **फ्याक्टरी कार्यहरू सिर्जना गरेको** जसले अनुकूलित वस्तुहरू फर्काउँछ।
+- **लचिलो वस्तु सिर्जना सक्षम गरेको** कठोर कक्षा पदानुक्रम बिना।
+- **वस्तुहरूलाई ठीक त्यस्तै व्यवहारहरू दिन अनुमति दिएको** जसमा तिनीहरूलाई आवश्यकता छ।
 
 ```javascript
 // Step 4: Create and use your composed objects
@@ -182,44 +268,104 @@ const tree = createStatic(0, 0, 'Tree');
 // tree.moveTo() is undefined - no movement behavior was composed
 ```
 
-**महत्त्वपूर्ण बुँदाहरू सम्झनुहोस्:**
-- वस्तुहरूलाई इनहेरिट गर्ने सट्टा व्यवहारहरू मिलाएर कम्पोज गर्छ
-- कठोर इनहेरिटेन्स पदानुक्रमभन्दा बढी लचिलोपन प्रदान गर्छ
-- वस्तुहरूलाई तिनीहरूलाई चाहिने सुविधाहरू मात्र दिन अनुमति दिन्छ
-- सफा वस्तु संयोजनको लागि आधुनिक JavaScript स्प्रेड सिन्ट्याक्स प्रयोग गर्छ 
+**स्मरण गर्नका लागि मुख्य बिन्दुहरू:**
+- **वस्तुहरूलाई मिश्रण गरेर कम्पोज गर्छ** व्यवहारहरू इनहेरिट गर्ने सट्टा।
+- **कठोर इनहेरिटेन्स पदानुक्रमभन्दा बढी लचिलोपन प्रदान गर्छ।**
+- **वस्तुहरूलाई ठीक त्यस्तै सुविधाहरू दिन अनुमति दिन्छ।**
+- **सफा वस्तु संयोजनको लागि आधुनिक जाभास्क्रिप्ट स्प्रेड सिन्ट्याक्स प्रयोग गर्छ।**
 ```
 
 **Which Pattern Should You Choose?**
 
-> 💡 **Pro Tip**: Both patterns have their place in modern JavaScript development. Classes work well for clearly defined hierarchies, while composition shines when you need maximum flexibility.
-> 
-**Here's when to use each approach:**
-- **Choose** inheritance when you have clear "is-a" relationships (a Hero *is-a* Movable object)
-- **Select** composition when you need "has-a" relationships (a Hero *has* movement abilities)
-- **Consider** your team's preferences and project requirements
-- **Remember** that you can mix both approaches in the same application
-
-## Communication Patterns: The Pub/Sub System
-
-As applications grow complex, managing communication between components becomes challenging. The publish-subscribe pattern (pub/sub) solves this problem using principles similar to radio broadcasting – one transmitter can reach multiple receivers without knowing who's listening.
+**Which Pattern Should You Choose?**
 
-Consider what happens when a hero takes damage: the health bar updates, sound effects play, visual feedback appears. Rather than coupling the hero object directly to these systems, pub/sub allows the hero to broadcast a "damage taken" message. Any system that needs to respond can subscribe to this message type and react accordingly.
+```mermaid
+quadrantChart
+    title Code Organization Patterns
+    x-axis Simple --> Complex
+    y-axis Rigid --> Flexible
+    quadrant-1 Advanced Composition
+    quadrant-2 Hybrid Approaches
+    quadrant-3 Basic Inheritance
+    quadrant-4 Modern Composition
+    
+    Class Inheritance: [0.3, 0.2]
+    Interface Implementation: [0.6, 0.4]
+    Mixin Patterns: [0.7, 0.7]
+    Pure Composition: [0.8, 0.9]
+    Factory Functions: [0.5, 0.8]
+    Prototype Chain: [0.4, 0.3]
+```
 
-✅ **Pub/Sub** stands for 'publish-subscribe'
+> 💡 **प्रो टिप**: दुवै ढाँचाहरू आधुनिक जाभास्क्रिप्ट विकासमा आफ्नो स्थान राख्छन्। कक्षाहरू स्पष्ट रूपमा परिभाषित पदानुक्रमहरूको लागि राम्रो काम गर्छन्, जबकि कम्पोजिसनले अधिकतम लचिलोपनको आवश्यकता पर्दा चम्किन्छ।
+> 
+**कुन दृष्टिकोण कहिले प्रयोग गर्ने:**
+- **इनहेरिटेन्स छनोट गर्नुहोस्** जब तपाईंसँग स्पष्ट "is-a" सम्बन्धहरू छन् (नायक *is-a* Movable वस्तु हो)।
+- **कम्पोजिसन चयन गर्नुहोस्** जब तपाईंलाई "has-a" सम्बन्धहरू चाहिन्छ (नायकसँग *movement abilities* छन्)।
+- **तपाईंको टोलीको प्राथमिकता र परियोजना आवश्यकताहरू विचार गर्नुहोस्।**
+- **स्मरण गर्नुहोस्** कि तपाईं एउटै एप्लिकेसनमा दुवै दृष्टिकोणहरू मिश्रण गर्न सक्नुहुन्छ।
+
+### 🔄 **शैक्षिक जाँच**
+**वस्तु संगठन बुझाइ**: संचार ढाँचाहरूमा जानु अघि सुनिश्चित गर्नुहोस् कि तपाईं:
+- ✅ इनहेरिटेन्स र कम्पोजिसनको बीचको फरक व्याख्या गर्न सक्नुहुन्छ।
+- ✅ कक्षाहरू बनाम फ्याक्टरी कार्यहरू कहिले प्रयोग गर्ने पहिचान गर्न सक्नुहुन्छ।
+- ✅ इनहेरिटेन्समा `super()` कुञ्जी शब्द कसरी काम गर्छ बुझ्न सक्नुहुन्छ।
+- ✅ गेम विकासको लागि प्रत्येक दृष्टिकोणको फाइदाहरू पहिचान गर्न सक्नुहुन्छ।
+
+**छोटो आत्म-परीक्षण**: तपाईं कसरी उड्ने शत्रु सिर्जना गर्नुहुन्छ जसले सर्न र उड्न दुवै सक्छ?
+- **इनहेरिटेन्स दृष्टिकोण**: `class FlyingEnemy extends Movable`
+- **कम्पोजिसन दृष्टिकोण**: `{ ...movable, ...flyable, ...gameObject }`
+
+**वास्तविक-विश्व जडान**: यी ढाँचाहरू हरेक ठाउँमा देखा पर्दछन्:
+- **React कम्पोनेंटहरू**: Props (कम्पोजिसन) बनाम कक्षा इनहेरिटेन्स।
+- **गेम इन्जिनहरू**: इकाई-कम्पोनेंट प्रणालीहरूले कम्पोजिसन प्रयोग गर्छ।
+- **मोबाइल एप्स**: UI फ्रेमवर्कहरूले प्रायः इनहेरिटेन्स पदानुक्रम प्रयोग गर्छ।
+
+## संचार ढाँचाहरू: पब/सब प्रणाली
+
+जब एप्लिकेसनहरू जटिल हुन्छन्, कम्पोनेंटहरू बीच संचार व्यवस्थापन चुनौतीपूर्ण हुन्छ। पब्लिश-सब्सक्राइब ढाँचाले (पब/सब) रेडियो प्रसारण जस्तै सिद्धान्तहरू प्रयोग गरेर यो समस्या समाधान गर्छ - एक ट्रान्समिटरले धेरै रिसीभरहरूलाई थाहा नपाई पुग्न सक्छ।
+
+जब नायकले क्षति लिन्छ, के हुन्छ विचार गर्नुहोस्: स्वास्थ्य बार अपडेट हुन्छ, ध्वनि प्रभावहरू बज्छ, दृश्य प्रतिक्रिया देखा पर्दछ। नायक वस्तुलाई यी प्रणालीहरूसँग सीधा जोड्ने सट्टा, पब/सबले नायकलाई "क्षति लिइएको" सन्देश प्रसारण गर्न अनुमति दिन्छ। प्रतिक्रिया दिन आवश्यक पर्ने कुनै पनि प्रणालीले यस सन्देश प्रकारलाई सब्सक्राइब गर्न सक्छ र तदनुसार प्रतिक्रिया दिन सक्छ।
+
+✅ **पब/सब** को अर्थ 'पब्लिश-सब्सक्राइब' हो।
+
+```mermaid
+flowchart TD
+    A[Hero Takes Damage] --> B[Publish: HERO_DAMAGED]
+    B --> C[Event System]
+    
+    C --> D[Health Bar Subscriber]
+    C --> E[Sound System Subscriber]
+    C --> F[Visual Effects Subscriber]
+    C --> G[Achievement System Subscriber]
+    
+    D --> H[Update Health Display]
+    E --> I[Play Damage Sound]
+    F --> J[Show Red Flash]
+    G --> K[Check Survival Achievements]
+    
+    style A fill:#ffebee
+    style B fill:#e1f5fe
+    style C fill:#e8f5e8
+    style H fill:#fff3e0
+    style I fill:#fff3e0
+    style J fill:#fff3e0
+    style K fill:#fff3e0
+```
 
-### Understanding the Pub/Sub Architecture
+### पब/सब आर्किटेक्चर बुझ्दै
 
-The pub/sub pattern keeps different parts of your application loosely coupled, meaning they can work together without being directly dependent on each other. This separation makes your code more maintainable, testable, and flexible to changes.
+पब/सब ढाँचाले तपाईंको एप्लिकेसनका विभिन्न भागहरूलाई ढिलोसँग जोडिएको राख्छ, जसको अर्थ तिनीहरू एकअर्कामा सीधा निर्भर नभई सँगै काम गर्न सक्छन्। यो अलगावले तपाईंको कोडलाई अधिक मर्मतयोग्य, परीक्षणयोग्य, र परिवर्तनहरूको लागि लचिलो बनाउँछ।
 
-**The key players in pub/sub:**
-- **Messages** – Simple text labels like `'PLAYER_SCORED'` that describe what happened (plus any extra info)
-- **Publishers** – The objects that shout out "Something happened!" to anyone who's listening
-- **Subscribers** – The objects that say "I care about that event" and react when it happens
-- **Event System** – The middleman that makes sure messages get to the right listeners
+**पब/सबका मुख्य खेलाडीहरू:**
+- **सन्देशहरू** – साधारण पाठ लेबलहरू जस्तै `'PLAYER_SCORED'` जसले के भयो वर्णन गर्छ (प्लस कुनै अतिरिक्त जानकारी)।
+- **पब्लिशरहरू** – वस्तुहरू जसले "केही भयो!" भनेर चिच्याउँछन् जो कोही सुन्छ।
+- **सब्सक्राइबरहरू** – वस्तुहरू जसले "म त्यो घटनाको बारेमा चासो राख्छु" भन्छन् र जब यो हुन्छ प्रतिक्रिया दिन्छन्।
+- **इभेन्ट प्रणाली** – मध्यस्थ जसले सुनिश्चित गर्छ कि सन्देशहरू सही श्रोताहरूमा पुग्छ।
 
-### Building an Event System
+### इभेन्ट प्रणाली निर्माण गर्दै
 
-Let's create a simple but powerful event system that demonstrates these concepts:
+आउनुहोस् यी अवधारणाहरू प्रदर्शन गर्ने सरल तर शक्तिशाली इभेन्ट प्रणाली सिर्जना गरौं:
 
 ```javascript
 // Step 1: Create the EventEmitter class
@@ -247,16 +393,16 @@ class EventEmitter {
 }
 ```
 
-**यहाँ के हुन्छ भनेर तोड्दै:**
-- साधारण कक्षाको प्रयोग गरेर केन्द्रीय इभेन्ट व्यवस्थापन प्रणाली सिर्जना गर्दछ
-- सन्देश प्रकारद्वारा व्यवस्थित वस्तुमा श्रोताहरू भण्डारण गर्दछ
-- `on()` विधि प्रयोग गरेर नयाँ श्रोताहरू दर्ता गर्दछ
-- सबै इच्छुक श्रोताहरूलाई सन्देशहरू प्रसारण गर्दछ `emit()` प्रयोग गरेर
-- सान्दर्भिक जानकारी पास गर्न वैकल्पिक डेटा पेलोडहरू समर्थन गर्दछ
+**यहाँ के हुन्छ तोड्दै:**
+- **सिर्जना गर्छ** एक केन्द्रीय इभेन्ट व्यवस्थापन प्रणाली एक साधारण कक्षा प्रयोग गरेर।
+- **स्रोताहरूलाई भण्डारण गर्छ** सन्देश प्रकारद्वारा व्यवस्थित वस्तुमा।
+- **नयाँ स्रोताहरू दर्ता गर्छ** `on()` विधि प्रयोग गरेर।
+- **सन्देशहरू प्रसारण गर्छ** सबै इच्छुक स्रोताहरूलाई `emit()` प्रयोग गरेर।
+- **वैकल्पिक डेटा पेलोडहरूलाई समर्थन गर्छ** सम्बन्धित जानकारी पास गर्न।
 
-### सबैलाई एकसाथ राख्दै: व्यावहारिक उदाहरण
+### सबै सँगै राख्दै: व्यावहारिक उदाहरण
 
-ठीक छ, यसलाई कार्यमा देखौं! हामी एक साधारण मूभमेन्ट प्रणाली निर्माण गर्नेछौं जसले पब/सब कति सफा र लचिलो हुन सक्छ देखाउँछ:
+ठिक छ, आउनुहोस् यसलाई कार्यमा हेर्नुहोस्! हामी एउटा साधारण आन्दोलन प्रणाली निर्माण गर्नेछौं जसले देखाउँछ कि पब/सब कति सफा र लचिलो हुन सक्छ:
 
 ```javascript
 // Step 1: Define your message types
@@ -272,9 +418,9 @@ const hero = createHero(0, 0);
 ```
 
 **यस कोडले के गर्छ:**
-- सन्देश नामहरूमा टाइपो रोक्न स्थिर वस्तु परिभाषित गर्दछ
-- सबै कम्युनिकेसन ह्यान्डल गर्न इभेन्ट इमिटर उदाहरण सिर्जना गर्दछ
-- सुरुवात स्थितिमा नायक वस्तु आरम्भ गर्दछ
+- **परिभाषित गर्छ** सन्देश नामहरूमा टाइपो रोक्नको लागि एक स्थिरांक वस्तु।
+- **सिर्जना गर्छ** एक इभेन्ट इमिटर उदाहरण सबै संचार व्यवस्थापन गर्न।
+- **आरम्भ गर्छ** नायक वस्तु सुरुवात स्थितिमा।
 
 ```javascript
 // Step 3: Set up event listeners (subscribers)
@@ -290,10 +436,10 @@ eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
 ```
 
 **माथिको कोडमा, हामीले:**
-- मूभमेन्ट सन्देशहरूमा प्रतिक्रिया दिने इभेन्ट श्रोताहरू दर्ता गरेका छौं
-- मूभमेन्ट दिशाको आधारमा नायकको स्थिति अपडेट गरेका छौं
-- नायकको स्थिति परिवर्तनहरू ट्र्याक गर्न कन्सोल लगिङ थपेका छौं
-- इनपुट ह्यान्डलिङबाट मूभमेन्ट तर्क अलग गरेका छौं
+- **दर्ता गरेको** इभेन्ट स्रोताहरू जसले आन्दोलन सन्देशहरूमा प्रतिक्रिया दिन्छ।
+- **नायकको स्थिति अपडेट गरेको** आन्दोलन दिशाको आधारमा।
+- **कन्सोल लगिङ थपेको** नायकको स्थिति परिवर्तनहरू ट्र्याक गर्न।
+- **आन्दोलन तर्कलाई इनपुट ह्यान्डलिङबाट अलग गरेको।**
 
 ```javascript
 // Step 4: Connect keyboard input to events (publishers)
@@ -310,60 +456,182 @@ window.addEventListener('keydown', (event) => {
 ```
 
 **यी अवधारणाहरू बुझ्दै:**
-- टाइट कपलिङ बिना गेम इभेन्टहरूसँग किबोर्ड इनपुट जडान गर्दछ
-- इनपुट प्रणालीलाई अप्रत्यक्ष रूपमा गेम वस्तुहरूसँग कम्युनिकेसन गर्न सक्षम बनाउँछ
-- एउटै किबोर्ड इभेन्टहरूमा धेरै प्रणालीहरू प्रतिक्रिया दिन अनुमति दिन्छ
-- की बाइन्डिङ परिवर्तन गर्न वा नयाँ इनपुट विधिहरू थप्न सजिलो बनाउँछ
+- **किबोर्ड इनपुटलाई गेम इभेन्टहरूसँग जोड्छ** बिना कडा जोड।
+- **इनपुट प्रणालीलाई गेम वस्तुहरूसँग अप्रत्यक्ष रूपमा संचार गर्न सक्षम बनाउँछ।**
+- **एकै किबोर्ड घटनाहरूमा धेरै प्रणालीहरूलाई प्रतिक्रिया दिन अनुमति दिन्छ।**
+- **किबोर्ड वा आन्दोलन कोडलाई परिवर्तन नगरी नयाँ इनपुट विधिहरू थप्न सजिलो बनाउँछ।**
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Keyboard
+    participant EventEmitter
+    participant Hero
+    participant SoundSystem
+    participant Camera
+    
+    User->>Keyboard: Presses ArrowLeft
+    Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
+    EventEmitter->>Hero: Move left 5 pixels
+    EventEmitter->>SoundSystem: Play footstep sound
+    EventEmitter->>Camera: Follow hero
+    
+    Hero->>Hero: Update position
+    SoundSystem->>SoundSystem: Play audio
+    Camera->>Camera: Adjust viewport
+```
 
-> 💡 **प्रो टिप**: यस ढाँचाको सुन्दरता लचिलोपनमा छ! तपाईंले ध्वनि प्रभावहरू, स्क्रिन शेक, वा पार्टिकल प्रभावहरू सजिलै थप्न सक्नुहुन्छ – केवल थप इभेन्ट श्रोताहरू थप्नुहोस् – विद्यमान किबोर्ड वा मूभमेन्ट कोडलाई परिवर्तन गर्न आवश्यक छैन।
+> 💡 **प्रो टिप**: यस ढाँचाको सुन्दरता लचिलोपनमा छ! तपाईंले ध्वनि प्रभावहरू, स्क्रिन शेक, वा पार्टिकल प्रभावहरू सजिलै थप्न सक्नुहुन्छ केवल थप इभेन्ट स्रोताहरू थपेर – विद्यमान किबोर्ड वा आन्दोलन कोडलाई संशोधन गर्न आवश्यक छैन।
 > 
 **तपाईंलाई यो दृष्टिकोण किन मनपर्छ:**
-- नयाँ सुविधाहरू थप्न धेरै सजिलो हुन्छ – केवल तपाईंलाई चासो लाग्ने इभेन्टहरूको लागि सुन्नुहोस्
-- एउटै इभेन्टमा धेरै चीजहरूले एकअर्कामा बाधा नपुगिकन प्रतिक्रिया दिन सक्छन्
-- परीक्षण धेरै सरल हुन्छ किनकि प्रत्येक टुक्रा स्वतन्त्र रूपमा काम गर्छ
-- जब केही बिग्रन्छ, तपाईंलाई ठीक कहाँ हेर्नुपर्छ थाहा हुन्छ
+- नयाँ सुविधाहरू थप्न धेरै सजिलो हुन्छ – केवल तपाईंलाई चासो लाग्ने घटनाहरू सुन्नुहोस्।
+- एउटै घटनामा धेरै चीजहरूले एकअर्कामा बाधा नपारी प्रतिक्रिया दिन सक्छ।
+- परीक्षण धेरै सरल हुन्छ किनकि प्रत्येक टुक्रा स्वतन्त्र रूपमा काम गर्छ।
+- जब केही बिग्रन्छ, तपाईंलाई थाहा हुन्छ कि कहाँ हेर्ने।
 
 ### किन पब/सब प्रभावकारी रूपमा स्केल हुन्छ
 
-पब/सब ढाँचाले एप्लिकेसनहरू जटिलतामा बढ्दै जाँदा सरलता कायम राख्छ। दर्जनौं शत्रुहरू, गतिशील UI अपडेटहरू, वा ध्वनि प्रणालीहरू व्यवस्थापन गर्दा, ढाँचाले वास्तुकलामा परिवर्तन नगरी बढ्दो स्केललाई ह्यान्डल गर्छ। नयाँ सुविधाहरू स्थापित कार्यक्षमतालाई असर नगरी विद्यमान इभेन्ट प्रणालीमा एकीकृत हुन्छन्।
+पब/सब ढाँचाले एप्लिकेसनहरू जटिलतामा बढ्दै जाँदा सरलता कायम राख्छ। दर्जनौं शत्रुहरू, गतिशील UI अपडेटहरू, वा ध्वनि प्रणालीहरू व्यवस्थापन गर्दा, ढाँचाले वास्तुकलामा परिवर्तन नगरी बढ्दो स्केललाई सम्हाल्छ। नयाँ सुविधाहरू विद्यमान इभेन्ट प्रणालीमा एकीकृत हुन्छन् बिना स्थापित कार्यक्षमतामा असर नगरी।
 
 > ⚠️ **सामान्य गल्ती**: धेरै विशिष्ट सन्देश प्रकारहरू प्रारम्भमा सिर्जना नगर्नुहोस्। व्यापक श्रेणीहरूसँग सुरु गर्नुहोस् र तपाईंको गेमको आवश्यकताहरू स्पष्ट हुँदै जाँदा तिनीहरूलाई परिष्कृत गर्नुहोस्।
 > 
-**पालना गर्नुपर्ने उत्कृष्ट अभ्यासहरू:**
-- सम्बन्धित सन्देशहरूलाई तार्किक श्रेणीहरूमा समूह बनाउँछ
-- के भयो भनेर स्पष्ट रूपमा संकेत गर्ने वर्णनात्मक नामहरू प्रयोग गर्छ
-- सन्देश पेलोडहरूलाई सरल र केन्द्रित राख्छ
-- टोली सहयोगका लागि तपाईंको सन्देश प्रकारहरूलाई कागजात बनाउँछ
-
----
-
-## GitHub Copilot एजेन्ट चुनौती 🚀
-
-एजेन्ट मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
-
-**विवरण:** इनहेरिटेन्स र पब/सब ढाँचाको प्रयोग गरेर एक साधारण गेम वस्तु प्रणाली सिर्जना गर्नुहोस्। तपाईंले एक आधारभूत गेम कार्यान्वयन गर्नुहुनेछ जहाँ विभिन्न वस्तुहरूले एकअर्काको बारेमा प्रत्यक्ष रूपमा थाहा नपाई इभेन्टहरू मार्फत कम्युनिकेसन गर्न सक्छन्।
-
-**प्रेरणा:** निम्न आवश्यकताहरू सहित एक JavaScript गेम प्रणाली सिर्जना गर्नुहोस्: १) x, y समन्वय र प्रकार गुणहरूसहित आधार GameObject कक्षा सिर्जना गर्नुहोस्। २) GameObject विस्तार गर्ने र सर्न सक्ने Hero कक्षा सिर्जना गर्नुहोस्। ३) GameObject विस्तार गर्ने र नायकलाई पछ्याउन सक्ने Enemy कक्षा सिर्जना गर्नुहोस्। ४) पब/सब ढाँचाको लागि EventEmitter कक्षा कार्यान्वयन गर्नुहोस्। ५) इभेन्ट श्रोताहरू सेटअप गर्नुहोस् ताकि जब नायक सर्छ, नजिकका शत्रुहरूले 'HERO_MOVED' इभेन्ट प्राप्त गर्छन् र नायकतर्फ सर्ने आफ्नो स्थिति अपडेट गर्छन्। वस्तुहरू बीचको कम्युनिकेसन देखाउन कन्सोल लग स्टेटमेन्टहरू समावेश गर्नुहोस्।
-
-[एजेन्ट मोडको बारेमा थप जान्नुहोस्](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) यहाँ।
+**पालना गर्नका लागि उत्तम अभ्यासहरू:**
+- **समूह बनाउँछ** सम्बन्धित सन्देशहरूलाई तार्किक श्रेणीहरूमा।
+- **वर्णनात्मक नामहरू प्रयोग गर्छ** जसले स्पष्ट रूपमा के भयो संकेत गर्छ।
+- **सन्देश पेलोडहरू सरल र केन्द्रित राख्छ।**
+- **तपाईंको सन्देश प्रकारहरूलाई दस्तावेज बनाउँछ** टोली सहयोगका लागि।
+
+### 🔄 **शैक्षिक जाँच**
+**इभेन्ट-ड्राइभन आर्किटेक्चर बुझाइ**: पूर्ण प्रणालीको तपाईंको
+खेलको आर्किटेक्चरलाई सुधार गर्न पब-सब ढाँचाले कसरी मद्दत गर्न सक्छ भन्ने विचार गर्नुहोस्। कुन कम्पोनेन्टहरूले घटनाहरू उत्पन्न गर्नुपर्छ र प्रणालीले कसरी प्रतिक्रिया दिनुपर्छ भन्ने पहिचान गर्नुहोस्। खेलको अवधारणा डिजाइन गर्नुहोस् र यसको कम्पोनेन्टहरू बीचको सञ्चार ढाँचाको नक्सा बनाउनुहोस्।
+
+## पोस्ट-व्याख्यान क्विज
+
+[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/30)
+
+## समीक्षा र आत्म-अध्ययन
+
+पब/सबको बारेमा थप जान्नको लागि [यसको बारेमा पढ्नुहोस्](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon)।
+
+### ⚡ **अर्को ५ मिनेटमा तपाईंले गर्न सक्ने कुरा**
+- [ ] कुनै पनि HTML5 खेल अनलाइन खोल्नुहोस् र यसको कोडलाई DevTools प्रयोग गरेर जाँच गर्नुहोस्
+- [ ] एउटा साधारण HTML5 क्यानभास तत्व सिर्जना गर्नुहोस् र आधारभूत आकार कोर्नुहोस्
+- [ ] `setInterval` प्रयोग गरेर साधारण एनिमेसन लूप बनाउन प्रयास गर्नुहोस्
+- [ ] क्यानभास API दस्तावेज अन्वेषण गर्नुहोस् र कोर्ने विधि प्रयास गर्नुहोस्
+
+### 🎯 **यो घण्टामा तपाईंले हासिल गर्न सक्ने कुरा**
+- [ ] पोस्ट-पाठ क्विज पूरा गर्नुहोस् र खेल विकास अवधारणाहरू बुझ्नुहोस्
+- [ ] HTML, CSS, र JavaScript फाइलहरूको साथमा आफ्नो खेल परियोजना संरचना सेट गर्नुहोस्
+- [ ] निरन्तर अपडेट र रेंडर गर्ने आधारभूत खेल लूप सिर्जना गर्नुहोस्
+- [ ] क्यानभासमा आफ्नो पहिलो खेल स्प्राइटहरू कोर्नुहोस्
+- [ ] छविहरू र ध्वनिहरूको लागि आधारभूत सम्पत्ति लोडिंग कार्यान्वयन गर्नुहोस्
+
+### 📅 **तपाईंको साप्ताहिक खेल सिर्जना**
+- [ ] सबै योजना गरिएका सुविधाहरू सहित पूर्ण स्पेस खेल पूरा गर्नुहोस्
+- [ ] परिष्कृत ग्राफिक्स, ध्वनि प्रभावहरू, र सहज एनिमेसनहरू थप्नुहोस्
+- [ ] खेल अवस्थाहरू कार्यान्वयन गर्नुहोस् (सुरुवात स्क्रिन, गेमप्ले, गेम ओभर)
+- [ ] स्कोरिङ प्रणाली र खेलाडी प्रगति ट्र्याकिङ सिर्जना गर्नुहोस्
+- [ ] आफ्नो खेललाई उपकरणहरूमा उत्तरदायी र पहुँचयोग्य बनाउनुहोस्
+- [ ] आफ्नो खेल अनलाइन साझा गर्नुहोस् र खेलाडीहरूबाट प्रतिक्रिया संकलन गर्नुहोस्
+
+### 🌟 **तपाईंको मासिक खेल विकास**
+- [ ] विभिन्न विधा र यान्त्रिकी अन्वेषण गर्दै बहु खेलहरू निर्माण गर्नुहोस्
+- [ ] Phaser वा Three.js जस्ता खेल विकास फ्रेमवर्क सिक्नुहोस्
+- [ ] ओपन सोर्स खेल विकास परियोजनाहरूमा योगदान गर्नुहोस्
+- [ ] उन्नत खेल प्रोग्रामिङ ढाँचाहरू र अनुकूलनमा महारत हासिल गर्नुहोस्
+- [ ] आफ्नो खेल विकास सीपहरू प्रदर्शन गर्ने पोर्टफोलियो सिर्जना गर्नुहोस्
+- [ ] खेल विकास र अन्तरक्रियात्मक मिडियामा रुचि राख्ने अन्यलाई मार्गदर्शन गर्नुहोस्
+
+## 🎯 तपाईंको खेल विकास महारत समयरेखा
+
+```mermaid
+timeline
+    title Game Architecture Learning Progression
+    
+    section Object Patterns (20 minutes)
+        Code Organization: Class inheritance
+                         : Composition patterns
+                         : Factory functions
+                         : Behavior mixing
+        
+    section Communication Systems (25 minutes)
+        Event Architecture: Pub/Sub implementation
+                          : Message design
+                          : Event emitters
+                          : Loose coupling
+        
+    section Game Object Design (30 minutes)
+        Entity Systems: Property management
+                      : Behavior composition
+                      : State handling
+                      : Lifecycle management
+        
+    section Architecture Patterns (35 minutes)
+        System Design: Component systems
+                     : Observer pattern
+                     : Command pattern
+                     : State machines
+        
+    section Advanced Concepts (45 minutes)
+        Scalable Architecture: Performance optimization
+                             : Memory management
+                             : Modular design
+                             : Testing strategies
+        
+    section Game Engine Concepts (1 week)
+        Professional Development: Scene graphs
+                                 : Asset management
+                                 : Rendering pipelines
+                                 : Physics integration
+        
+    section Framework Mastery (2 weeks)
+        Modern Game Development: React game patterns
+                               : Canvas optimization
+                               : WebGL basics
+                               : PWA games
+        
+    section Industry Practices (1 month)
+        Professional Skills: Team collaboration
+                           : Code reviews
+                           : Game design patterns
+                           : Performance profiling
+```
 
-## 🚀 चुनौती
+### 🛠️ तपाईंको खेल आर्किटेक्चर टूलकिट सारांश
 
-पब-सब ढाँचाले गेम आर्किटेक्चरलाई कसरी सुधार गर्न सक्छ भनेर विचार गर्नुहोस्। कुन कम्पोनेन्टहरूले इभेन्टहरू प्रसारण गर्नुपर्छ र प्रणालीले कसरी प्रतिक्रिया दिनुपर्छ भनेर पहिचान गर्नुहोस्। गेम अवधारणा डिजाइन गर्नुहोस् र यसको कम्पोनेन्टहरू बीचको कम्युनिकेसन ढाँचाहरूको नक्सा बनाउनुहोस्।
+यो पाठ पूरा गरेपछि, तपाईंले अब:
+- **डिजाइन ढाँचा महारत**: उत्तराधिकार बनाम संरचना व्यापार-अफहरूको समझ
+- **घटनामा आधारित आर्किटेक्चर**: स्केलेबल सञ्चारको लागि पब/सब कार्यान्वयन
+- **वस्तु-उन्मुख डिजाइन**: वर्ग पदानुक्रम र व्यवहार संरचना
+- **आधुनिक JavaScript**: फ्याक्टरी कार्यहरू, स्प्रेड सिन्ट्याक्स, र ES6+ ढाँचाहरू
+- **स्केलेबल आर्किटेक्चर**: ढिलो युग्मन र मोड्युलर डिजाइन सिद्धान्तहरू
+- **खेल विकास आधार**: इकाई प्रणालीहरू र कम्पोनेन्ट ढाँचाहरू
+- **व्यावसायिक ढाँचाहरू**: कोड संगठनको लागि उद्योग-मानक दृष्टिकोणहरू
 
-## पोस्ट-लेक्चर क्विज
+**वास्तविक-विश्व अनुप्रयोगहरू**: यी ढाँचाहरू सीधा लागू हुन्छन्:
+- **फ्रन्टएन्ड फ्रेमवर्कहरू**: React/Vue कम्पोनेन्ट आर्किटेक्चर र राज्य व्यवस्थापन
+- **ब्याकएन्ड सेवाहरू**: माइक्रोसर्भिस सञ्चार र घटनामा आधारित प्रणालीहरू
+- **मोबाइल विकास**: iOS/Android एप आर्किटेक्चर र सूचना प्रणालीहरू
+- **खेल इन्जिनहरू**: Unity, Unreal, र वेब-आधारित खेल विकास
+- **उद्यम सफ्टवेयर**: घटनाको स्रोत र वितरित प्रणाली डिजाइन
+- **API डिजाइन**: RESTful सेवाहरू र वास्तविक-समय सञ्चार
 
-[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/30)
+**व्यावसायिक सीपहरू प्राप्त गरियो**: अब तपाईं:
+- **डिजाइन** प्रमाणित ढाँचाहरू प्रयोग गरेर स्केलेबल सफ्टवेयर आर्किटेक्चरहरू
+- **कार्यान्वयन** जटिल अन्तरक्रियाहरू ह्यान्डल गर्ने घटनामा आधारित प्रणालीहरू
+- **चयन** विभिन्न परिदृश्यहरूको लागि उपयुक्त कोड संगठन रणनीतिहरू
+- **डिबग** र ढिलो युग्मन प्रणालीहरू प्रभावकारी रूपमा मर्मत गर्नुहोस्
+- **सञ्चार** उद्योग-मानक शब्दावली प्रयोग गरेर प्राविधिक निर्णयहरू
 
-## समीक्षा र आत्म अध्ययन
+**अर्को स्तर**: तपाईं यी ढाँचाहरूलाई वास्तविक खेलमा कार्यान्वयन गर्न, उन्नत खेल विकास विषयहरू अन्वेषण गर्न, वा वेब अनुप्रयोगहरूमा यी आर्किटेक्चरल अवधारणाहरू लागू गर्न तयार हुनुहुन्छ!
 
-पब/सबको बारेमा [यसको बारेमा पढेर](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon) थप जान्नुहोस्।
+🌟 **उपलब्धि अनलक गरियो**: तपाईंले साधारण खेलदेखि जटिल उद्यम प्रणालीसम्म शक्ति प्रदान गर्ने मौलिक सफ्टवेयर आर्किटेक्चर ढाँचाहरूमा महारत हासिल गर्नुभएको छ!
 
 ## असाइनमेन्ट
 
-[एक गेमको मोडेल बनाउनुहोस्](assignment.md)
+[खेलको मोकअप बनाउनुहोस्](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको हो। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुनेछैनौं।
\ No newline at end of file
diff --git a/translations/ne/6-space-game/2-drawing-to-canvas/README.md b/translations/ne/6-space-game/2-drawing-to-canvas/README.md
index 95ed8cf2cc..1b9c6991a7 100644
--- a/translations/ne/6-space-game/2-drawing-to-canvas/README.md
+++ b/translations/ne/6-space-game/2-drawing-to-canvas/README.md
@@ -1,19 +1,66 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "84053695dca714e16ed064366503ebd5",
-  "translation_date": "2025-10-22T17:13:22+00:00",
+  "original_hash": "7994743c5b21fdcceb36307916ef249a",
+  "translation_date": "2025-11-03T15:50:53+00:00",
   "source_file": "6-space-game/2-drawing-to-canvas/README.md",
   "language_code": "ne"
 }
 -->
 # स्पेस गेम निर्माण भाग २: हिरो र राक्षसलाई क्यानभासमा चित्रण गर्नुहोस्
 
-क्यानभास API वेब विकासको एक शक्तिशाली विशेषता हो जसले तपाईंको ब्राउजरमै गतिशील, अन्तरक्रियात्मक ग्राफिक्स सिर्जना गर्न अनुमति दिन्छ। यस पाठमा, हामी खाली HTML `<canvas>` तत्वलाई हिरो र राक्षसले भरिएको खेलको संसारमा रूपान्तरण गर्नेछौं। क्यानभासलाई तपाईंको डिजिटल कला बोर्डको रूपमा सोच्नुहोस् जहाँ कोड दृश्यमा परिणत हुन्छ।
-
-हामीले अघिल्लो पाठमा सिकेको कुरालाई अगाडि बढाउँदैछौं, र अब हामी दृश्य पक्षमा गहिरो जान्छौं। तपाईंले खेलका स्प्राइटहरू लोड र प्रदर्शन गर्ने, तत्वहरूलाई ठ्याक्कै स्थानमा राख्ने, र तपाईंको स्पेस गेमको दृश्य आधार सिर्जना गर्ने सिक्नुहुनेछ। यसले स्थिर वेब पृष्ठहरू र गतिशील, अन्तरक्रियात्मक अनुभवहरू बीचको खाडललाई पुल गर्दछ।
+```mermaid
+journey
+    title Your Canvas Graphics Journey
+    section Foundation
+      Understand Canvas API: 3: Student
+      Learn coordinate system: 4: Student
+      Draw basic shapes: 4: Student
+    section Image Handling
+      Load game assets: 4: Student
+      Handle async loading: 5: Student
+      Position sprites: 5: Student
+    section Game Rendering
+      Create game screen: 5: Student
+      Build formations: 5: Student
+      Optimize performance: 4: Student
+```
 
-यस पाठको अन्त्यसम्ममा, तपाईंको हिरो जहाज सही रूपमा स्थित हुनेछ र शत्रुहरूको संरचना युद्धको लागि तयार हुनेछ। तपाईंले आधुनिक खेलहरू ब्राउजरमा कसरी ग्राफिक्स रेंडर गर्छन् भन्ने बुझ्नुहुनेछ र आफ्नै अन्तरक्रियात्मक दृश्य अनुभवहरू सिर्जना गर्ने सीप प्राप्त गर्नुहुनेछ। क्यानभास ग्राफिक्स अन्वेषण गरौं र तपाईंको स्पेस गेमलाई जीवन्त बनाऔं!
+क्यानभास एपीआई वेब विकासको एक शक्तिशाली विशेषता हो जसले तपाईंको ब्राउजरमा नै गतिशील, अन्तरक्रियात्मक ग्राफिक्स सिर्जना गर्न अनुमति दिन्छ। यस पाठमा, हामी खाली HTML `<canvas>` तत्वलाई हिरो र राक्षसहरूले भरिएको खेलको संसारमा रूपान्तरण गर्नेछौं। क्यानभासलाई तपाईंको डिजिटल कला बोर्डको रूपमा सोच्नुहोस् जहाँ कोड दृश्यमा परिणत हुन्छ।
+
+हामीले अघिल्लो पाठमा सिकेको कुरालाई अगाडि बढाउँदैछौं, र अब हामी दृश्य पक्षमा गहिरो रूपमा जान्छौं। तपाईं खेलका स्प्राइटहरू लोड र प्रदर्शन गर्न, तत्वहरूलाई ठ्याक्कै स्थान दिन, र तपाईंको स्पेस गेमको दृश्य आधार सिर्जना गर्न सिक्नुहुनेछ। यसले स्थिर वेब पृष्ठहरू र गतिशील, अन्तरक्रियात्मक अनुभवहरू बीचको खाडललाई पुल गर्दछ।
+
+यस पाठको अन्त्यसम्ममा, तपाईंको हिरो जहाज सही रूपमा स्थित हुनेछ र शत्रुहरूको गठन युद्धको लागि तयार हुनेछ। तपाईंले आधुनिक खेलहरूले ब्राउजरमा ग्राफिक्स कसरी रेंडर गर्छन् भन्ने बुझ्नुहुनेछ र आफ्नै अन्तरक्रियात्मक दृश्य अनुभवहरू सिर्जना गर्ने सीप प्राप्त गर्नुहुनेछ। क्यानभास ग्राफिक्स अन्वेषण गरौं र तपाईंको स्पेस गेमलाई जीवन्त बनाऔं!
+
+```mermaid
+mindmap
+  root((Canvas Graphics))
+    Canvas Element
+      HTML5 Feature
+      2D Context
+      Coordinate System
+      Pixel Control
+    Drawing Operations
+      Basic Shapes
+      Text Rendering
+      Image Display
+      Path Drawing
+    Asset Management
+      Image Loading
+      Async Operations
+      Error Handling
+      Performance
+    Game Rendering
+      Sprite Positioning
+      Formation Layout
+      Scene Composition
+      Frame Updates
+    Visual Effects
+      Colors & Styles
+      Transformations
+      Animations
+      Layering
+```
 
 ## प्रि-लेक्चर क्विज
 
@@ -23,9 +70,9 @@ CO_OP_TRANSLATOR_METADATA:
 
 तपाईंको `<canvas>` तत्व वास्तवमा के हो? यो HTML5 को समाधान हो जसले वेब ब्राउजरहरूमा गतिशील ग्राफिक्स र एनिमेसनहरू सिर्जना गर्न अनुमति दिन्छ। नियमित छविहरू वा भिडियोहरू स्थिर हुन्छन्, तर क्यानभासले स्क्रिनमा देखिने सबै कुरामा पिक्सेल-स्तरको नियन्त्रण दिन्छ। यसले खेलहरू, डेटा भिजुअलाइजेसनहरू, र अन्तरक्रियात्मक कलाका लागि यो उत्तम बनाउँछ। यसलाई प्रोग्राम गर्न मिल्ने ड्रइङ सतहको रूपमा सोच्नुहोस् जहाँ जाभास्क्रिप्ट तपाईंको ब्रश बन्छ।
 
-डिफल्टमा, क्यानभास तत्व तपाईंको पृष्ठमा खाली, पारदर्शी आयतको रूपमा देखिन्छ। तर यहीँ यसको सम्भावना लुकेको छ! यसको वास्तविक शक्ति तब देखा पर्छ जब तपाईं जाभास्क्रिप्ट प्रयोग गरेर आकारहरू चित्रण गर्नुहुन्छ, छविहरू लोड गर्नुहुन्छ, एनिमेसनहरू सिर्जना गर्नुहुन्छ, र प्रयोगकर्ताको अन्तरक्रियामा प्रतिक्रिया दिनुहुन्छ। यो १९६० को दशकमा बेल ल्याब्सका प्रारम्भिक कम्प्युटर ग्राफिक्स अग्रगामीहरूले पहिलो डिजिटल एनिमेसन सिर्जना गर्न प्रत्येक पिक्सेल प्रोग्राम गर्नुपरेको जस्तै हो।
+डिफल्टमा, क्यानभास तत्व तपाईंको पृष्ठमा खाली, पारदर्शी आयतजस्तो देखिन्छ। तर यहीँ यसको सम्भावना लुकेको छ! यसको वास्तविक शक्ति तब प्रकट हुन्छ जब तपाईं जाभास्क्रिप्ट प्रयोग गरेर आकारहरू चित्रण गर्नुहुन्छ, छविहरू लोड गर्नुहुन्छ, एनिमेसनहरू सिर्जना गर्नुहुन्छ, र चीजहरूलाई प्रयोगकर्ताको अन्तरक्रियामा प्रतिक्रिया दिन बनाउनुहुन्छ। यो १९६० को दशकमा बेल ल्याब्सका प्रारम्भिक कम्प्युटर ग्राफिक्स अग्रगामीहरूले पहिलो डिजिटल एनिमेसनहरू सिर्जना गर्न प्रत्येक पिक्सेल प्रोग्राम गर्नुपरेको जस्तै हो।
 
-✅ [क्यानभास API](https://developer.mozilla.org/docs/Web/API/Canvas_API) को बारेमा MDN मा थप पढ्नुहोस्।
+✅ [क्यानभास एपीआईको बारेमा थप पढ्नुहोस्](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN मा।
 
 यो सामान्यतया पृष्ठको बडीको भागको रूपमा यसरी घोषणा गरिन्छ:
 
@@ -33,27 +80,65 @@ CO_OP_TRANSLATOR_METADATA:
 <canvas id="myCanvas" width="200" height="100"></canvas>
 ```
 
-**यस कोडले के गर्छ:**
-- `id` एट्रिब्युट सेट गरेर तपाईंले यस विशेष क्यानभास तत्वलाई जाभास्क्रिप्टमा सन्दर्भ गर्न सक्नुहुन्छ
-- क्यानभासको क्षैतिज आकार नियन्त्रण गर्न पिक्सेलमा `width` परिभाषित गर्दछ
-- क्यानभासको ठाडो आयाम निर्धारण गर्न पिक्सेलमा `height` स्थापना गर्दछ
+**यो कोडले के गर्छ:**
+- **सेट गर्छ** `id` एट्रिब्युट ताकि तपाईं यस विशेष क्यानभास तत्वलाई जाभास्क्रिप्टमा सन्दर्भ गर्न सक्नुहुन्छ
+- **परिभाषित गर्छ** पिक्सेलमा `width` ताकि क्यानभासको क्षैतिज आकार नियन्त्रण गर्न सकियोस्
+- **स्थापना गर्छ** पिक्सेलमा `height` ताकि क्यानभासको ठाडो आयाम निर्धारण गर्न सकियोस्
 
-## साधारण ज्यामिति चित्रण
+## साधारण ज्यामिति चित्रण गर्नुहोस्
 
 अब तपाईंलाई क्यानभास तत्व के हो भन्ने थाहा छ, आउनुहोस् यसमा वास्तवमा चित्रण गर्ने अन्वेषण गरौं! क्यानभासले एक समन्वय प्रणाली प्रयोग गर्दछ जुन गणितको कक्षाबाट परिचित लाग्न सक्छ, तर कम्प्युटर ग्राफिक्ससँग विशेष रूपमा एक महत्त्वपूर्ण मोड छ।
 
-क्यानभासले कार्टेसियन समन्वय प्रणाली प्रयोग गर्दछ जसमा x-अक्ष (क्षैतिज) र y-अक्ष (ठाडो) हुन्छ जसले तपाईंले चित्रण गर्ने सबै कुराको स्थिति निर्धारण गर्दछ। तर यहाँ मुख्य भिन्नता छ: गणितको कक्षाको समन्वय प्रणालीको विपरीत, मूल बिन्दु `(0,0)` माथि-बायाँ कुनामा सुरु हुन्छ, x-मूल्यहरू दायाँतिर सर्दै बढ्छन् र y-मूल्यहरू तलतिर सर्दै बढ्छन्। यो दृष्टिकोण प्रारम्भिक कम्प्युटर डिस्प्लेहरूमा इलेक्ट्रोन बीमहरू माथिबाट तल स्क्यान गर्ने ठाउँबाट आएको हो, जसले माथि-बायाँलाई प्राकृतिक सुरुवात बिन्दु बनायो।
+क्यानभासले कार्टेसियन समन्वय प्रणाली प्रयोग गर्दछ जसमा x-अक्ष (क्षैतिज) र y-अक्ष (ठाडो) हुन्छ। तर यहाँ मुख्य भिन्नता छ: गणितको कक्षाको समन्वय प्रणालीको विपरीत, मूल बिन्दु `(0,0)` माथि-बायाँ कुनाबाट सुरु हुन्छ, जहाँ x-मूल्यहरू दायाँतिर बढ्छन् र y-मूल्यहरू तलतिर बढ्छन्। यो दृष्टिकोण प्रारम्भिक कम्प्युटर डिस्प्लेहरूबाट आएको हो जहाँ इलेक्ट्रोन बीमहरू माथिबाट तल स्क्यान गर्थे, जसले माथि-बायाँलाई प्राकृतिक सुरुवात बिन्दु बनायो।
+
+```mermaid
+quadrantChart
+    title Canvas Coordinate System
+    x-axis Left --> Right
+    y-axis Top --> Bottom
+    quadrant-1 Quadrant 1
+    quadrant-2 Quadrant 2  
+    quadrant-3 Quadrant 3
+    quadrant-4 Quadrant 4
+    
+    Origin Point: [0.1, 0.1]
+    Hero Center: [0.5, 0.8]
+    Enemy Formation: [0.3, 0.2]
+    Power-up: [0.7, 0.6]
+    UI Elements: [0.9, 0.1]
+```
 
 ![क्यानभासको ग्रिड](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ne.png)
 > छवि [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) बाट
 
-क्यानभास तत्वमा चित्रण गर्न, तपाईंले क्यानभास ग्राफिक्सको आधार बनाउने तीन-चरण प्रक्रिया पछ्याउनुहुनेछ। तपाईंले यो केही पटक गरेपछि, यो स्वाभाविक हुन्छ:
+क्यानभास तत्वमा चित्रण गर्न, तपाईंले क्यानभास ग्राफिक्सको आधार बनाउने तीन-चरण प्रक्रिया पछ्याउनुहुनेछ। तपाईंले यो केही पटक गरेपछि, यो स्वाभाविक बन्छ:
+
+```mermaid
+flowchart LR
+    A[HTML Canvas Element] --> B[Get Canvas Reference]
+    B --> C[Get 2D Context]
+    C --> D[Drawing Operations]
+    
+    D --> E[Draw Shapes]
+    D --> F[Draw Text]
+    D --> G[Draw Images]
+    D --> H[Apply Styles]
+    
+    E --> I[Render to Screen]
+    F --> I
+    G --> I
+    H --> I
+    
+    style A fill:#e1f5fe
+    style C fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
-1. **तपाईंको क्यानभास तत्वलाई DOM बाट सन्दर्भ गर्नुहोस्** (अन्य HTML तत्व जस्तै)
-2. **2D रेंडरिङ सन्दर्भ प्राप्त गर्नुहोस्** – यसले सबै चित्रण विधिहरू प्रदान गर्दछ
+1. **क्यानभास तत्वको सन्दर्भ प्राप्त गर्नुहोस्** (अन्य HTML तत्व जस्तै)
+2. **२D रेंडरिङ सन्दर्भ प्राप्त गर्नुहोस्** – यसले सबै चित्रण विधिहरू प्रदान गर्दछ
 3. **चित्रण सुरु गर्नुहोस्!** सन्दर्भको बिल्ट-इन विधिहरू प्रयोग गरेर तपाईंको ग्राफिक्स सिर्जना गर्नुहोस्
 
-यसले कोडमा कस्तो देखिन्छ:
+यो कोडमा यसरी देखिन्छ:
 
 ```javascript
 // Step 1: Get the canvas element
@@ -68,26 +153,65 @@ ctx.fillRect(0, 0, 200, 200); // x, y, width, height
 ```
 
 **यसलाई चरणबद्ध रूपमा तोडौं:**
-- हामीले हाम्रो क्यानभास तत्वलाई यसको ID प्रयोग गरेर समात्यौं र यसलाई भेरिएबलमा स्टोर गर्यौं
-- हामीले 2D रेंडरिङ सन्दर्भ प्राप्त गर्यौं – यो हाम्रो चित्रण विधिहरूको टूलकिट हो
-- हामीले क्यानभासलाई `fillStyle` प्रोपर्टी प्रयोग गरेर रातो रंगले भरिएको कुरा बतायौं
-- हामीले माथि-बायाँ कुनाबाट सुरु गर्दै (0,0) २०० पिक्सेल चौडा र अग्लो आयत चित्रण गर्यौं
+- हामीले **क्यानभास तत्वलाई समात्यौं** यसको ID प्रयोग गरेर र यसलाई भेरिएबलमा स्टोर गर्यौं
+- हामीले **२D रेंडरिङ सन्दर्भ प्राप्त गर्यौं** – यो हाम्रो चित्रण विधिहरूको टूलकिट हो
+- हामीले क्यानभासलाई **बतायौं** कि हामी `fillStyle` प्रोपर्टी प्रयोग गरेर चीजहरू रातो रंगले भरना चाहन्छौं
+- हामीले **चित्रण गर्यौं** एक आयत जसको सुरुवात बिन्दु (0,0) हो र २०० पिक्सेल चौडाइ र उचाइ छ
 
-✅ क्यानभास API मुख्य रूपमा 2D आकारहरूमा केन्द्रित छ, तर तपाईं वेब साइटमा 3D तत्वहरू पनि चित्रण गर्न सक्नुहुन्छ; यसका लागि तपाईंले [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) प्रयोग गर्न सक्नुहुन्छ।
+✅ क्यानभास एपीआई मुख्य रूपमा २D आकारहरूमा केन्द्रित छ, तर तपाईं वेब साइटमा ३D तत्वहरू पनि चित्रण गर्न सक्नुहुन्छ; यसका लागि तपाईं [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) प्रयोग गर्न सक्नुहुन्छ।
 
-तपाईं क्यानभास API प्रयोग गरेर विभिन्न कुराहरू चित्रण गर्न सक्नुहुन्छ जस्तै:
+तपाईं क्यानभास एपीआईको साथमा धेरै प्रकारका चीजहरू चित्रण गर्न सक्नुहुन्छ जस्तै:
 
-- **ज्यामितीय आकारहरू**, हामीले आयत चित्रण गर्ने तरिका देखाइसकेका छौं, तर तपाईंले धेरै अन्य कुराहरू पनि चित्रण गर्न सक्नुहुन्छ।
-- **पाठ**, तपाईंले कुनै पनि फन्ट र रंगको पाठ चित्रण गर्न सक्नुहुन्छ।
-- **छविहरू**, तपाईंले .jpg वा .png जस्ता छवि सम्पत्तिमा आधारित छवि चित्रण गर्न सक्नुहुन्छ।
+- **ज्यामितीय आकारहरू**, हामीले आयत चित्रण गर्ने तरिका देखाइसकेका छौं, तर तपाईं धेरै अन्य चीजहरू पनि चित्रण गर्न सक्नुहुन्छ।
+- **पाठ**, तपाईं कुनै पनि फन्ट र रंगको साथमा पाठ चित्रण गर्न सक्नुहुन्छ।
+- **छविहरू**, तपाईं छवि सम्पत्तिमा आधारित छवि जस्तै .jpg वा .png चित्रण गर्न सक्नुहुन्छ।
 
-✅ प्रयास गर्नुहोस्! तपाईंले आयत चित्रण गर्ने तरिका सिक्नुभयो, के तपाईं पृष्ठमा वृत्त चित्रण गर्न सक्नुहुन्छ? CodePen मा केही रोचक क्यानभास चित्रणहरू हेर्नुहोस्। यहाँ एक [विशेष रूपमा प्रभावशाली उदाहरण](https://codepen.io/dissimulate/pen/KrAwx) छ।
+✅ प्रयास गर्नुहोस्! तपाईंलाई आयत चित्रण गर्ने तरिका थाहा छ, के तपाईं पृष्ठमा वृत्त चित्रण गर्न सक्नुहुन्छ? CodePen मा केही रोचक क्यानभास चित्रणहरू हेर्नुहोस्। यहाँ एक [विशेष प्रभावशाली उदाहरण](https://codepen.io/dissimulate/pen/KrAwx) छ।
 
-## छवि सम्पत्ति लोड र चित्रण गर्नुहोस्
+### 🔄 **शैक्षिक जाँच**
+**क्यानभासको आधारभूत ज्ञान**: छविहरू लोड गर्न अघि सुनिश्चित गर्नुहोस् कि तपाईं:
+- ✅ क्यानभास समन्वय प्रणाली गणितीय समन्वय प्रणालीबाट कसरी फरक छ भनेर व्याख्या गर्न सक्नुहुन्छ
+- ✅ क्यानभास चित्रण अपरेशनहरूको तीन-चरण प्रक्रिया बुझ्न सक्नुहुन्छ
+- ✅ २D रेंडरिङ सन्दर्भले के प्रदान गर्छ भनेर पहिचान गर्न सक्नुहुन्छ
+- ✅ fillStyle र fillRect कसरी सँगै काम गर्छन् भनेर वर्णन गर्न सक्नुहुन्छ
+
+**छोटो आत्म-परीक्षण**: तपाईं कसरी (100, 50) स्थितिमा २५ रेडियसको निलो वृत्त चित्रण गर्नुहुन्छ?
+```javascript
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(100, 50, 25, 0, 2 * Math.PI);
+ctx.fill();
+```
 
-साधारण आकारहरू चित्रण गर्नु सुरु गर्न उपयोगी छ, तर अधिकांश खेलहरूलाई वास्तविक छविहरू चाहिन्छ! स्प्राइटहरू, पृष्ठभूमि, र टेक्स्चरहरूले खेललाई यसको दृश्य अपील दिन्छ। क्यानभासमा छविहरू लोड र प्रदर्शन गर्ने तरिका ज्यामितीय आकारहरू चित्रण गर्ने तरिकाभन्दा फरक छ, तर प्रक्रिया बुझिसकेपछि यो सरल छ।
+**क्यानभास चित्रण विधिहरू जुन तपाईंले अब जान्नुभयो:**
+- **fillRect()**: भरिएको आयत चित्रण गर्दछ
+- **fillStyle**: रंग र ढाँचाहरू सेट गर्दछ
+- **beginPath()**: नयाँ चित्रण पथ सुरु गर्दछ
+- **arc()**: वृत्त र वक्रहरू सिर्जना गर्दछ
 
-हामीले एउटा `Image` वस्तु सिर्जना गर्नुपर्छ, हाम्रो छवि फाइल लोड गर्नुपर्छ (यो असिंक्रोनस रूपमा हुन्छ, जसको अर्थ "पृष्ठभूमिमा"), र त्यसपछि छवि तयार भएपछि क्यानभासमा चित्रण गर्नुपर्छ। यसले सुनिश्चित गर्दछ कि तपाईंको छविहरू ठीकसँग प्रदर्शन हुन्छन् र लोड हुँदा तपाईंको एप्लिकेसनलाई अवरोध गर्दैन।
+## छवि सम्पत्ति लोड र चित्रण गर्नुहोस्
+
+साधारण आकारहरू चित्रण गर्नु सुरूवातका लागि उपयोगी छ, तर अधिकांश खेलहरूलाई वास्तविक छविहरू चाहिन्छ! स्प्राइटहरू, पृष्ठभूमि, र टेक्स्चरहरूले खेलहरूलाई दृश्य अपील दिन्छ। क्यानभासमा छविहरू लोड र प्रदर्शन गर्नु ज्यामितीय आकारहरू चित्रण गर्ने भन्दा फरक छ, तर प्रक्रिया बुझिसकेपछि यो सरल छ।
+
+हामीले एउटा `Image` वस्तु सिर्जना गर्नुपर्छ, हाम्रो छवि फाइल लोड गर्नुपर्छ (यो असिंक्रोनस रूपमा हुन्छ, जसको अर्थ "पृष्ठभूमिमा"), र यो तयार भएपछि क्यानभासमा चित्रण गर्नुपर्छ। यो दृष्टिकोणले सुनिश्चित गर्दछ कि तपाईंको छविहरू सही रूपमा प्रदर्शन हुन्छन् बिना तपाईंको एप्लिकेशनलाई अवरोध नगरी।
+
+```mermaid
+sequenceDiagram
+    participant JS as JavaScript
+    participant Img as Image Object
+    participant Server as File Server
+    participant Canvas as Canvas Context
+    
+    JS->>Img: new Image()
+    JS->>Img: Set src property
+    Img->>Server: Request image file
+    Server->>Img: Return image data
+    Img->>JS: Trigger onload event
+    JS->>Canvas: drawImage(img, x, y)
+    Canvas->>Canvas: Render to screen
+    
+    Note over JS,Canvas: Async loading prevents UI blocking
+```
 
 ### आधारभूत छवि लोडिङ
 
@@ -100,14 +224,14 @@ img.onload = () => {
 };
 ```
 
-**यस कोडमा के भइरहेको छ:**
-- हामीले नयाँ Image वस्तु सिर्जना गर्यौं जसले हाम्रो स्प्राइट वा टेक्स्चर समात्छ
-- हामीले यसलाई कुन छवि फाइल लोड गर्ने बतायौं स्रोत पथ सेट गरेर
-- हामीले लोड इभेन्टको लागि सुनेर छवि प्रयोग गर्न तयार भएको समय थाहा पायौं
+**यो कोडमा के भइरहेको छ:**
+- हामीले **नयाँ Image वस्तु सिर्जना गर्यौं** हाम्रो स्प्राइट वा टेक्स्चर राख्न
+- हामीले **बतायौं** कुन छवि फाइल लोड गर्न स्रोत पथ सेट गरेर
+- हामीले **लोड इभेन्टको लागि सुनेका छौं** ताकि छवि प्रयोग गर्न तयार भएको समय थाहा पाउन सकियोस्
 
-### छविहरू लोड गर्ने राम्रो तरिका
+### छवि लोड गर्नको लागि राम्रो तरिका
 
-यहाँ छविहरू लोड गर्ने एक अधिक बलियो तरिका छ जुन व्यावसायिक विकासकर्ताहरूले सामान्यतया प्रयोग गर्छन्। हामी छवि लोडिङलाई Promise-आधारित कार्यमा समेट्नेछौं – यो दृष्टिकोण, जब जाभास्क्रिप्ट Promises ES6 मा मानक बनेपछि लोकप्रिय भयो, तपाईंको कोडलाई अधिक व्यवस्थित बनाउँछ र त्रुटिहरूलाई सुन्दर रूपमा ह्यान्डल गर्दछ:
+यहाँ छवि लोडिङलाई सम्हाल्नको लागि एक अधिक मजबुत तरिका छ जुन व्यावसायिक विकासकर्ताहरूले सामान्यतया प्रयोग गर्छन्। हामी छवि लोडिङलाई Promise-आधारित कार्यमा राख्नेछौं – यो दृष्टिकोण, जब जाभास्क्रिप्ट Promises ES6 मा मानक बन्यो, तपाईंको कोडलाई अधिक व्यवस्थित बनाउँछ र त्रुटिहरूलाई सुन्दर रूपमा सम्हाल्छ:
 
 ```javascript
 function loadAsset(path) {
@@ -136,12 +260,12 @@ async function initializeGame() {
 ```
 
 **हामीले यहाँ के गरेका छौं:**
-- छवि लोडिङको सम्पूर्ण तर्कलाई Promise मा समेट्यौं ताकि हामी यसलाई राम्रोसँग ह्यान्डल गर्न सकौं
-- त्रुटि ह्यान्डलिङ थप गर्यौं जसले वास्तवमा केहि गलत हुँदा हामीलाई बताउँछ
-- आधुनिक async/await सिन्ट्याक्स प्रयोग गर्यौं किनकि यो पढ्न धेरै सफा छ
-- कुनै पनि लोडिङ समस्या सुन्दर रूपमा ह्यान्डल गर्न try/catch ब्लकहरू समावेश गर्यौं
+- **Promise मा लपेटेका छौं** सबै छवि लोडिङ तर्क ताकि हामी यसलाई राम्रोसँग सम्हाल्न सकौं
+- **त्रुटि ह्यान्डलिङ थपेका छौं** जसले वास्तवमा हामीलाई केहि गलत भएको बताउँछ
+- **आधुनिक async/await सिन्ट्याक्स प्रयोग गरेका छौं** किनकि यो पढ्न धेरै सफा छ
+- **try/catch ब्लकहरू समावेश गरेका छौं** कुनै पनि लोडिङ समस्यालाई सुन्दर रूपमा सम्हाल्न
 
-एकपटक तपाईंको छविहरू लोड भएपछि, तिनीहरूलाई क्यानभासमा चित्रण गर्नु वास्तवमा धेरै सरल छ:
+तपाईंको छविहरू लोड भएपछि, तिनीहरूलाई क्यानभासमा चित्रण गर्नु वास्तवमा धेरै सरल छ:
 
 ```javascript
 async function renderGameScreen() {
@@ -164,15 +288,40 @@ async function renderGameScreen() {
 ```
 
 **यसलाई चरणबद्ध रूपमा व्याख्या गरौं:**
-- हामीले हाम्रो हिरो र राक्षस छविहरू पृष्ठभूमिमा await प्रयोग गरेर लोड गर्यौं
-- हामीले हाम्रो क्यानभास तत्व समात्यौं र आवश्यक 2D रेंडरिङ सन्दर्भ प्राप्त गर्यौं
-- हामीले केही छिटो समन्वय गणित प्रयोग गरेर हिरो छविलाई ठीक बीचमा स्थित गर्यौं
-- हामीले राक्षस छविलाई माथि-बायाँ कुनामा राख्यौं ताकि हाम्रो शत्रु संरचना सुरु होस्
-- हामीले लोडिङ वा रेंडरिङको क्रममा हुन सक्ने कुनै पनि त्रुटिहरू समात्यौं
+- हामीले **हाम्रो हिरो र राक्षस छविहरू लोड गर्यौं** पृष्ठभूमिमा await प्रयोग गरेर
+- हामीले **हाम्रो क्यानभास तत्व समात्यौं** र आवश्यक २D रेंडरिङ सन्दर्भ प्राप्त गर्यौं
+- हामीले **हिरो छवि केन्द्रमा स्थित गर्यौं** केही छिटो समन्वय गणित प्रयोग गरेर
+- हामीले **राक्षस छवि माथि-बायाँ कुनामा राख्यौं** हाम्रो शत्रु गठन सुरु गर्न
+- हामीले **कुनै पनि त्रुटि समात्यौं** जुन लोडिङ वा रेंडरिङको क्रममा हुन सक्छ
+
+```mermaid
+flowchart TD
+    A[Load Assets] --> B{All Images Loaded?}
+    B -->|No| C[Show Loading]
+    B -->|Yes| D[Get Canvas Context]
+    C --> B
+    D --> E[Clear Screen]
+    E --> F[Draw Background]
+    F --> G[Draw Enemy Formation]
+    G --> H[Draw Hero Ship]
+    H --> I[Apply Visual Effects]
+    I --> J[Render Frame]
+    
+    subgraph "Rendering Pipeline"
+        K[Asset Management]
+        L[Scene Composition]
+        M[Drawing Operations]
+        N[Frame Output]
+    end
+    
+    style A fill:#e1f5fe
+    style J fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 ## अब तपाईंको खेल निर्माण सुरु गर्ने समय हो
 
-अब हामी सबै कुरा एकसाथ राखेर तपाईंको स्पेस गेमको दृश्य आधार सिर्जना गर्नेछौं। तपाईंले क्यानभासको आधारभूत कुराहरू र छवि लोडिङ प्रविधिहरूको ठोस समझ पाउनुभएको छ, त्यसैले यो व्यावहारिक खण्डले तपाईंलाई सही रूपमा स्थित स्प्राइटहरूसहितको पूर्ण खेल स्क्रिन निर्माण गर्न मार्गदर्शन गर्नेछ।
+अब हामी सबै कुरा एकसाथ राखेर तपाईंको स्पेस गेमको दृश्य आधार सिर्जना गर्नेछौं। तपाईंले क्यानभासको आधारभूत ज्ञान र छवि लोडिङ प्रविधिहरूको ठोस समझ पाउनुभएको छ, त्यसैले यो व्यावहारिक खण्डले तपाईंलाई सही रूपमा स्थित स्प्राइटहरूसहितको पूर्ण खेल स्क्रिन निर्माण गर्न मार्गदर्शन गर्नेछ।
 
 ### के निर्माण गर्ने
 
@@ -188,7 +337,7 @@ async function renderGameScreen() {
 
 ### विकास सुरु गर्न सिफारिस गरिएका चरणहरू
 
-`your-work` सब फोल्डरमा सिर्जना गरिएका स्टार्ट फाइलहरू पत्ता लगाउनुहोस्। तपाईंको परियोजना संरचनामा समावेश हुनुपर्छ:
+`your-work` उप फोल्डरमा सिर्जना गरिएका स्टार्ट फाइलहरू पत्ता लगाउनुहोस्। तपाईंको प्रोजेक्ट संरचनामा समावेश हुनुपर्छ:
 
 ```bash
 your-work/
@@ -200,46 +349,46 @@ your-work/
 └── package.json
 ```
 
-**तपाईंसँग के छ:**
-- **खेलका स्प्राइटहरू** `assets/` फोल्डरमा छन् ताकि सबै व्यवस्थित रहोस्
-- **तपाईंको मुख्य HTML फाइल** क्यानभास तत्व सेटअप गर्छ र सबै कुरा तयार गर्छ
-- **जाभास्क्रिप्ट फाइल** जहाँ तपाईं आफ्नो खेल रेंडरिङ जादू लेख्नुहुनेछ
-- **एक package.json** जसले विकास सर्भर सेटअप गर्छ ताकि तपाईं स्थानीय रूपमा परीक्षण गर्न सक्नुहुन्छ
+**तपाईंले केसँग काम गर्दै हुनुहुन्छ:**
+- **खेल स्प्राइटहरू** `assets/` फोल्डरमा छन् ताकि सबै व्यवस्थित रहोस्
+- **तपाईंको मुख्य HTML फाइल** क्यानभास तत्व सेटअप गर्दछ र सबै कुरा तयार गर्दछ
+- **एक जाभास्क्रिप्ट फाइल** जहाँ तपाईं आफ्नो खेल रेंडरिङ जादू लेख्नुहुनेछ
+- **एक package.json** जसले विकास सर्भर सेटअप गर्दछ ताकि तपाईं स्थानीय रूपमा परीक्षण गर्न सक्नुहुन्छ
 
-यो फोल्डरलाई Visual Studio Code मा खोल्नुहोस् र विकास सुरु गर्नुहोस्। तपाईंलाई Visual Studio Code, NPM, र Node.js सहितको स्थानीय विकास वातावरण चाहिन्छ। यदि तपाईंको कम्प्युटरमा `npm` सेटअप छैन भने, [यसलाई कसरी इन्स्टल गर्ने](https://www.npmjs.com/get-npm) हेर्नुहोस्।
+यो फोल्डरलाई Visual Studio Code मा खोल्नुहोस् विकास सुरु गर्न। तपाईंलाई Visual Studio Code, NPM, र Node.js स्थापना भएको स्थानीय विकास वातावरण चाहिन्छ। यदि तपाईंको कम्प्युटरमा `npm` सेटअप छैन भने, [यसलाई कसरी स्थापना गर्ने](https://www.npmjs.com/get-npm) हेर्नुहोस्।
 
-`your-work` फोल्डरमा नेभिगेट गरेर तपाईंको विकास सर्भर सुरु गर्नुहोस्:
+`your-work` फोल्डरमा नेभिगेट गरेर आफ्नो विकास सर्भर सुरु गर्नुहोस्:
 
 ```bash
 cd your-work
 npm start
 ```
 
-**यो आदेशले केही चाखलाग्दो काम गर्छ:**
+**यो कमाण्डले केही धेरै राम्रो काम गर्छ:**
 - **स्थानीय सर्भर सुरु गर्छ** `http://localhost:5000` मा ताकि तपाईं आफ्नो खेल परीक्षण गर्न सक्नुहुन्छ
-- **तपाईंका सबै फाइलहरू सही रूपमा सर्भ गर्छ** ताकि तपाईंको ब्राउजरले तिनीहरूलाई सही रूपमा लोड गर्न सकोस्
+- **तपाईंका सबै फाइलहरू सही रूपमा सर्भ गर्छ** ताकि तपाईंको ब्राउजरले तिनीहरूलाई सही रूपमा लोड गर्न सकियोस्
 - **तपाईंका फाइलहरू परिवर्तनको लागि हेर्छ** ताकि तपाईं सहज रूपमा विकास गर्न सक्नुहुन्छ
-- **तपाईंलाई** व्यावसायिक विकास वातावरण दिन्छ ताकि तपाईं सबै कुरा परीक्षण गर्न सक्नुहुन्छ
+- **तपाईंलाई** व्यावसायिक विकास वातावरण दिन्छ ताकि सबै कुरा परीक्षण गर्न सकियोस्
 
-> 💡 **नोट**: तपाईंको ब्राउजरले सुरुमा खाली पृष्ठ देखाउनेछ – यो अपेक्षित हो! तपाईंले कोड थप्दै जाँदा, आफ्नो ब्राउजरलाई रिफ्रेस गर्नुहोस् ताकि तपाईंको परिवर्तनहरू देख्न सक्नुहुन्छ। यो पुनरावृत्त विकास दृष्टिकोण NASA ले अपोलो गाइडेन्स कम्प्युटर निर्माण गर्दा अपनाएको जस्तै हो – प्रत्येक कम्पोनेन्ट परीक्षण गर्दै ठूलो प्रणालीमा एकीकृत गर्नु अघि।
+> 💡 **नोट**: तपाईंको ब्राउजरले सुरुमा खाली पृष्ठ देखाउनेछ – यो अपेक्षित हो! तपाईंले कोड थप्दै जाँदा, आफ्नो ब्राउजरलाई रिफ्रेस गर्नुहोस् परिवर्तनहरू हेर्न। यो पुनरावृत्त विकास दृष्टिकोण नासाले अपोलो गाइडन्स कम्प्युटर निर्माण गर्दा अपनाएको जस्तै हो – प्रत्येक कम्पोनेन्ट परीक्षण गर्दै यसलाई ठूलो प्रणालीमा एकीकृत गर्नु अघि।
 
 ### कोड थप्नुहोस्
 
-`your-work/app.js` मा आवश्यक कोड थपेर निम्न कार्यहरू पूरा गर्नुहोस्:
+`your-work/app.js` मा आवश्यक कोड थप्नुहोस् निम्न कार्यहरू पूरा गर्न:
 
 1. **कालो पृष्ठभूमि भएको क्यानभास चित्रण गर्नुहोस्**
-   > 💡 **यसरी गर्नुहोस्**: `/app.js` मा TODO पत्ता लगाउनुहोस् र दुई लाइन मात्र थप्नुहोस्। `ctx.fillStyle` लाई कालो सेट गर्नुहोस्, त्यसपछि `ctx.fillRect()` प्रयोग गरेर (0,0) बाट क्यानभास आयामहरू प्रयोग गर्नुहोस्। सजिलो!
+   > 💡 **यसरी गर्नुहोस्**: `/app.js` मा TODO पत्ता लगाउनुहोस् र दुई लाइन मात्र थप्नुहोस्। `ctx.fillStyle` लाई कालोमा सेट गर्नुहोस्, त्यसपछि `ctx.fillRect()` प्रयोग गरेर (0,0) बाट सुरु गर्दै क्यानभासको आयामहरू प्रयोग गर्नुहोस्। सजिलो!
 
-2. **खेलका टेक्स्चरहरू लोड गर्नुहोस्**
-   > 💡 **यसरी गर्नुहोस्**: `await loadAsset()` प्रयोग गरेर तपाईंको प्लेयर र शत्रु छविहरू लोड गर्नुहोस्। तिनीहरूलाई भेरिएबलमा स्टोर गर्नुहोस् ताकि तपाईं पछि प्रयोग गर्न सक्नुहुन्छ। सम्झनुहोस् – तिनीहरू तबसम्म देखिने छैनन् जबसम्म तपाईंले वास्तवमा तिनीहरूलाई चित्रण गर्नुहुन्न!
+2. **खेल टेक्स्चरहरू लोड गर्नुहोस्**
+   > 💡 **यसरी गर्नुहोस्**: `await loadAsset()` प्रयोग गरेर तपाईंको प्लेयर र शत्रु छविहरू लोड गर्नुहोस्। तिनीहरूलाई भेरिएबलहरूमा स्टोर गर्नुहोस् ताकि तपाईं पछि प्रयोग गर्न सक्नुहुन्छ। सम्झनुहोस् – तिनीहरू देखिने छैनन् जबसम्म तपाईं वास्तवमा तिनीहरूलाई चित्रण गर्नुहुन्न!
 
 3. **हिरो जहाजलाई केन्द्र-तलको स्थितिमा चित्रण गर्नुहोस्**
-   > 💡 **यसरी गर्नुहोस्**: `ctx.drawImage()` प्रयोग गरेर तपाईंको हिरोलाई स्थित गर्नुहोस्। x-कोअर्डिनेटको लागि, `canvas.width / 2 - 45` प्रयोग गरेर यसलाई केन्द्रित गर्नुहोस्, र y-कोअर्डिनेटको लागि `canvas.height - canvas.height / 4` प्रयोग गरेर यसलाई तलको क्षेत्रमा राख्नुहोस्।
+   > 💡 **यसरी गर्नुहोस्**: `ctx.drawImage()` प्रयोग गरेर तपाईंको हिरोलाई स्थित गर्नुहोस्। x-समन्वयको लागि, `canvas.width / 2 - 45` प्रयोग गर्नुहोस् केन्द्रमा राख्न, र y-समन्वयको लागि `canvas.height - canvas.height / 4` प्रयोग गर्नुहोस् तलको क्षेत्रमा राख्न।
 
-4. **राक्षस जहाजहरूको 5×5 संरचना चित्रण गर्नुहोस्**
-   > 💡 **यसरी गर्नुहोस्**: `createEnemies` फंक्शन पत्ता लगाउनुहोस् र नेस्टेड लूप सेटअप गर्नुहोस्। तपाईंले स्पेसिङ र पोजिसनिङको लागि केही गणित गर्नुपर्नेछ, तर चिन्ता नगर्नुहोस् – म तपाईंलाई ठीकसँग देखाउँछु!
+4. **राक्षस जहाजहरूको 5×5 गठन चित्रण गर्नुहोस्**
+   > 💡 **यसरी गर्नुहोस्**: `createEnemies` कार्य पत्ता लगाउनुहोस् र नेस्टेड लूप सेटअप गर्नुहोस्। तपाईंले स्पेसिङ र पोजिसनिङको लागि केही गणित गर्नुपर्नेछ, तर चिन्ता नगर्नुहोस् – म तपाईंलाई ठ्याक्कै कसरी गर्ने देखाउँछु!
 
-पहिले, सही शत्रु संरचना लेआउटको लागि Constants स्थापना गर्नुहोस्:
+पहिले, सही शत्रु गठन लेआउटको लागि Constants स्थापना गर्नुहोस्:
 
 ```javascript
 const ENEMY_TOTAL = 5;
@@ -249,49 +398,177 @@ const START_X = (canvas.width - FORMATION_WIDTH) / 2;
 const STOP_X = START_X + FORMATION_WIDTH;
 ```
 
-**यी Constants के गर्छन्:**
-- हामीले प्रति पङ्क्ति र स्तम्भ ५ शत्रुहरू सेट गर्यौं (एक राम्रो 5×5 ग्रिड)
-- हामीले शत्रुहरू बीच कति स्पेस राख्ने परिभाषित गर्यौं ताकि तिनीहरू खचाखच नदेखिउन्
-- हामीले हाम्रो सम्पूर्ण संरचना कति चौडा हुनेछ भनेर गणना गर्यौं
-- हामीले सुरु र अन्त्य कहाँ गर्ने भनेर पत्ता लगायौं ताकि संरचना केन्द्रित देखियोस्
-
-त्यसपछि, शत्रु संरचना चित्रण गर्न नेस्टेड लूप सिर्जना गर्नुहोस्:
+**यी Constants के गर्छन् भनेर तोडौं:**
+- हामीले **प्रति पङ्क्ति र स्तम्भ ५ शत्रुहरू सेट गरेका छौं** (एक राम्रो 5×5 ग्रिड)
+- हामीले **शत्रुहरू बीच कति स्पेस राख्ने परिभाषित गरेका छौं** ताकि तिनीहरू भीडभाड देखिएनन्
+- हामीले **हाम्रो सम्पूर्ण गठन कति चौडा हुनेछ गणना गरेका छौं**
+- हामीले **कहाँ सुरु र रोक्ने गणना गरेका छौं** ताकि गठन केन्द्रित देखियोस्
 
-```javascript
-for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
-  for (let y = 0; y < 50 * 5; y += 50) {
-    ctx.drawImage(enemyImg, x, y);
-  }
-}
-```
-
-**यस नेस्टेड लूपले के गर्छ:**
-- बाहिरी लूपले हाम्रो संरचनामा बायाँदेखि दायाँ सर्छ
-- भित्री लूपले माथिबाट तल जान्छ ताकि सफा पङ्क्तिहरू सिर्जना होस्
-- हामीले प्रत्येक शत्रु स्प्राइटलाई हामीले गणना गरेका ठ्याक्कै x,y समन्वयमा चित्रण गर्यौं
-- सबै कुरा समान रूपमा स्पेस गरिएको छ ताकि यो व्यावसायिक र व्यवस्थित देखियोस्
+@@CODE
+- **समन्वय प्रणालीहरू**: गणितलाई स्क्रिन स्थितिमा अनुवाद गर्ने
+- **स्प्राइट व्यवस्थापन**: खेलको ग्राफिक्स लोड गर्ने र देखाउने
+- **गठन एल्गोरिदमहरू**: व्यवस्थित लेआउटका लागि गणितीय ढाँचाहरू
+- **एसिंक्रोनस अपरेशनहरू**: आधुनिक जाभास्क्रिप्ट प्रयोग गरेर सहज प्रयोगकर्ता अनुभव
 
 ## परिणाम
 
-समाप्त परिणाम यसरी देखिनुपर्छ:
+तयार परिणाम यसरी देखिनुपर्छ:
 
-![कालो स्क्रिनमा हिरो र 5*5 राक्षसहरू](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ne.png)
+![कालो स्क्रिनमा एक नायक र ५*५ राक्षसहरू](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ne.png)
 
 ## समाधान
 
-कृपया पहिले आफैं समाधान गर्न प्रयास गर्नुहोस् तर यदि तपाईं अड्किनुहुन्छ भने, [समाधान](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) हेर्नुहोस्।
+पहिला आफैं प्रयास गर्नुहोस् तर यदि अड्किनुभयो भने, [समाधान](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) हेर्नुहोस्।
 
 ---
 
-## GitHub Copilot Agent चुनौती 🚀
+## GitHub Copilot Agent Challenge 🚀
 
 Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** तपाईंले सिक्नुभएको क्यानभास API प्रविधिहरू प्रयोग गरेर दृश्य प्रभावहरू र अन्तरक्रियात्मक तत्वहरू थपेर तपाईंको स्पेस गेम क्यानभासलाई सुधार गर्नुहोस्।
+**विवरण:** Canvas API प्रविधिहरू प्रयोग गरेर आफ्नो स्पेस गेम क्यानभासमा दृश्य प्रभावहरू र अन्तरक्रियात्मक तत्वहरू थप्नुहोस्।
+
+**प्रेरणा:** `enhanced-canvas.html` नामको नयाँ फाइल बनाउनुहोस् जसमा पृष्ठभूमिमा एनिमेटेड ताराहरू, नायक जहाजको लागि पल्सिंग स्वास्थ्य बार, र शत्रु जहाजहरू तल सर्दै जाने देखिन्छ। ताराहरूको चमक र अपासिटीको लागि र्यान्डम स्थान प्रयोग गरेर तिनीहरूलाई क्यानभासमा बनाउनुहोस्, स्वास्थ्य स्तरको आधारमा रंग परिवर्तन गर्ने स्वास्थ्य बार (हरियो > पहेंलो > रातो) कार्यान्वयन गर्नुहोस्, र शत्रु जहाजहरूलाई विभिन्न गतिमा स्क्रिन तल सर्दै जाने एनिमेट गर्नुहोस्।
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+
+## 🚀 चुनौती
+
+तपाईंले 2D-केंद्रित Canvas API को बारेमा सिक्नुभएको छ; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) हेर्नुहोस्, र 3D वस्तु बनाउने प्रयास गर्नुहोस्।
+
+## पोस्ट-व्याख्यान क्विज
+
+[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/32)
+
+## समीक्षा र आत्म अध्ययन
+
+Canvas API को बारेमा [पढेर](https://developer.mozilla.org/docs/Web/API/Canvas_API) थप जान्नुहोस्।
+
+### ⚡ **अगाडि ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] ब्राउजर कन्सोल खोल्नुहोस् र `document.createElement('canvas')` प्रयोग गरेर क्यानभास तत्व बनाउनुहोस्
+- [ ] क्यानभास सन्दर्भमा `fillRect()` प्रयोग गरेर आयत बनाउने प्रयास गर्नुहोस्
+- [ ] `fillStyle` प्रोपर्टी प्रयोग गरेर विभिन्न रंगहरू प्रयोग गर्नुहोस्
+- [ ] `arc()` विधि प्रयोग गरेर साधारण वृत्त बनाउनुहोस्
+
+### 🎯 **अगाडि एक घण्टामा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] पाठ-पछिको क्विज पूरा गर्नुहोस् र क्यानभासको आधारभूत कुराहरू बुझ्नुहोस्
+- [ ] बहु आकार र रंगहरू भएको क्यानभास ड्रइङ एप्लिकेसन बनाउनुहोस्
+- [ ] आफ्नो खेलको लागि छवि लोड गर्ने र स्प्राइट रेंडरिङ कार्यान्वयन गर्नुहोस्
+- [ ] वस्तुहरू क्यानभासमा सर्दै जाने साधारण एनिमेशन बनाउनुहोस्
+- [ ] क्यानभास रूपान्तरणहरू जस्तै स्केलिङ, घुमाउने, र अनुवाद अभ्यास गर्नुहोस्
+
+### 📅 **तपाईंको हप्ताको क्यानभास यात्रा**
+- [ ] परिष्कृत ग्राफिक्स र स्प्राइट एनिमेशनसहित स्पेस गेम पूरा गर्नुहोस्
+- [ ] ग्रेडियेन्ट, ढाँचाहरू, र कम्पोजिटिङ जस्ता उन्नत क्यानभास प्रविधिहरूमा महारत हासिल गर्नुहोस्
+- [ ] क्यानभास प्रयोग गरेर अन्तरक्रियात्मक दृश्यहरू बनाउनुहोस्
+- [ ] सहज प्रदर्शनको लागि क्यानभास अनुकूलन प्रविधिहरू सिक्नुहोस्
+- [ ] विभिन्न उपकरणहरू भएको ड्रइङ वा पेन्टिङ एप्लिकेसन बनाउनुहोस्
+- [ ] क्यानभाससँग रचनात्मक कोडिङ ढाँचाहरू र जेनेरेटिभ आर्ट अन्वेषण गर्नुहोस्
+
+### 🌟 **तपाईंको महिनाको ग्राफिक्स महारत**
+- [ ] Canvas 2D र WebGL प्रयोग गरेर जटिल दृश्य एप्लिकेसनहरू बनाउनुहोस्
+- [ ] ग्राफिक्स प्रोग्रामिङ अवधारणाहरू र शेडर आधारभूत कुराहरू सिक्नुहोस्
+- [ ] ओपन सोर्स ग्राफिक्स लाइब्रेरीहरू र दृश्य उपकरणहरूमा योगदान गर्नुहोस्
+- [ ] ग्राफिक्स-गहन एप्लिकेसनहरूको लागि प्रदर्शन अनुकूलनमा महारत हासिल गर्नुहोस्
+- [ ] क्यानभास प्रोग्रामिङ र कम्प्युटर ग्राफिक्सको बारेमा शैक्षिक सामग्री बनाउनुहोस्
+- [ ] दृश्य अनुभवहरू सिर्जना गर्न अरूलाई मद्दत गर्ने ग्राफिक्स प्रोग्रामिङ विशेषज्ञ बन्नुहोस्
+
+## 🎯 तपाईंको क्यानभास ग्राफिक्स महारतको समयरेखा
+
+```mermaid
+timeline
+    title Canvas API Learning Progression
+    
+    section Canvas Fundamentals (15 minutes)
+        Basic Operations: Element reference
+                        : 2D context access
+                        : Coordinate system
+                        : Simple shape drawing
+        
+    section Drawing Techniques (20 minutes)
+        Graphics Primitives: Rectangles and circles
+                           : Colors and styles
+                           : Text rendering
+                           : Path operations
+        
+    section Image Handling (25 minutes)
+        Asset Management: Image object creation
+                        : Async loading patterns
+                        : Error handling
+                        : Performance optimization
+        
+    section Game Graphics (30 minutes)
+        Sprite Rendering: Positioning algorithms
+                        : Formation calculations
+                        : Scene composition
+                        : Frame rendering
+        
+    section Advanced Techniques (40 minutes)
+        Visual Effects: Transformations
+                      : Animations
+                      : Layering
+                      : State management
+        
+    section Performance (35 minutes)
+        Optimization: Efficient drawing
+                    : Memory management
+                    : Frame rate control
+                    : Asset caching
+        
+    section Professional Skills (1 week)
+        Production Graphics: WebGL integration
+                           : Canvas libraries
+                           : Game engines
+                           : Cross-platform considerations
+        
+    section Advanced Graphics (1 month)
+        Specialized Applications: Data visualization
+                                : Interactive art
+                                : Real-time effects
+                                : 3D graphics
+```
+
+### 🛠️ तपाईंको क्यानभास ग्राफिक्स टूलकिट सारांश
+
+यस पाठ पूरा गरेपछि, तपाईंसँग अब छ:
+- **Canvas API महारत**: 2D ग्राफिक्स प्रोग्रामिङको पूर्ण समझ
+- **समन्वय गणित**: सटीक स्थिति र लेआउट एल्गोरिदमहरू
+- **संपत्ति व्यवस्थापन**: व्यावसायिक छवि लोड गर्ने र त्रुटि ह्यान्डल गर्ने
+- **रेंडरिङ पाइपलाइन**: दृश्य संरचना गर्न व्यवस्थित दृष्टिकोण
+- **खेल ग्राफिक्स**: स्प्राइट स्थिति र गठन गणनाहरू
+- **एसिंक्रोनस प्रोग्रामिङ**: सहज प्रदर्शनको लागि आधुनिक जाभास्क्रिप्ट ढाँचाहरू
+- **दृश्य प्रोग्रामिङ**: गणितीय अवधारणाहरूलाई स्क्रिन ग्राफिक्समा अनुवाद गर्ने
+
+**वास्तविक-विश्व अनुप्रयोगहरू**: तपाईंको क्यानभास सीपहरू सीधा लागू हुन्छन्:
+- **डाटा दृश्यकरण**: चार्टहरू, ग्राफहरू, र अन्तरक्रियात्मक ड्यासबोर्डहरू
+- **खेल विकास**: 2D खेलहरू, सिमुलेशनहरू, र अन्तरक्रियात्मक अनुभवहरू
+- **डिजिटल कला**: रचनात्मक कोडिङ र जेनेरेटिभ आर्ट परियोजनाहरू
+- **UI/UX डिजाइन**: अनुकूल ग्राफिक्स र अन्तरक्रियात्मक तत्वहरू
+- **शैक्षिक सफ्टवेयर**: दृश्य शिक्षण उपकरणहरू र सिमुलेशनहरू
+- **वेब अनुप्रयोगहरू**: गतिशील ग्राफिक्स र वास्तविक-समय दृश्यहरू
+
+**व्यावसायिक सीपहरू प्राप्त गरियो**: अब तपाईं गर्न सक्नुहुन्छ:
+- **निर्माण गर्नुहोस्** बाह्य लाइब्रेरीहरू बिना अनुकूल ग्राफिक्स समाधानहरू
+- **अनुकूलन गर्नुहोस्** सहज प्रयोगकर्ता अनुभवको लागि रेंडरिङ प्रदर्शन
+- **डिबग गर्नुहोस्** ब्राउजर डेभलपर टूलहरू प्रयोग गरेर जटिल दृश्य समस्याहरू
+- **डिजाइन गर्नुहोस्** गणितीय सिद्धान्तहरू प्रयोग गरेर स्केलेबल ग्राफिक्स प्रणालीहरू
+- **एकीकृत गर्नुहोस्** आधुनिक वेब एप्लिकेसन फ्रेमवर्कहरूसँग क्यानभास ग्राफिक्स
+
+**Canvas API विधिहरू तपाईंले महारत हासिल गर्नुभएको छ**:
+- **तत्व व्यवस्थापन**: getElementById, getContext
+- **ड्रइङ अपरेशनहरू**: fillRect, drawImage, fillStyle
+- **संपत्ति लोड गर्ने**: छवि वस्तुहरू, वाचा ढाँचाहरू
+- **गणितीय स्थिति**: समन्वय गणनाहरू, गठन एल्गोरिदमहरू
+
+**अर्को स्तर**: अब तपाईं एनिमेशन, प्रयोगकर्ता अन्तरक्रिया, टक्कर पत्ता लगाउने थप्न तयार हुनुहुन्छ, वा 3D ग्राफिक्सको लागि WebGL अन्वेषण गर्नुहोस्!
+
+🌟 **उपलब्धि अनलक गरियो**: तपाईंले आधारभूत Canvas API प्रविधिहरू प्रयोग गरेर पूर्ण खेल रेंडरिङ प्रणाली निर्माण गर्नुभएको छ!
+
+## असाइनमेन्ट
 
-**प्रेरणा:** `enhanced-canvas.html` नामको नयाँ फाइल सिर्जना गर्नुहोस् जसमा क्यानभासले पृष्ठभूमिमा एनिमेटेड ताराहरू, हिरो जहाजको लागि पल्सिङ
+[Canvas API संग खेल्नुहोस्](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/6-space-game/3-moving-elements-around/README.md b/translations/ne/6-space-game/3-moving-elements-around/README.md
index 3c06396ade..adbbc93c95 100644
--- a/translations/ne/6-space-game/3-moving-elements-around/README.md
+++ b/translations/ne/6-space-game/3-moving-elements-around/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "022bbb5c869091b98f19e408e0c51d5d",
-  "translation_date": "2025-10-22T17:12:27+00:00",
+  "original_hash": "8c55a2bd4bc0ebe4c88198fd563a9e09",
+  "translation_date": "2025-11-03T15:49:07+00:00",
   "source_file": "6-space-game/3-moving-elements-around/README.md",
   "language_code": "ne"
 }
 -->
-# स्पेस गेम बनाउने भाग ३: गति थप्ने
-
-आफ्नो मनपर्ने खेलहरूको बारेमा सोच्नुहोस् – तिनीहरूलाई आकर्षक बनाउने कुरा केवल राम्रो ग्राफिक्स मात्र होइन, तर सबै कुरा कसरी चल्छ र तपाईंको क्रियाकलापमा प्रतिक्रिया दिन्छ भन्ने हो। अहिले, तपाईंको स्पेस गेम एउटा सुन्दर चित्रजस्तै छ, तर हामी यसलाई जीवन्त बनाउने गति थप्न जाँदैछौं।
-
-जब नासाका इन्जिनियरहरूले अपोलो मिशनहरूको लागि गाइडेंस कम्प्युटर प्रोग्राम गरे, उनीहरूले यस्तै चुनौतीको सामना गरे: कसरी एउटा अन्तरिक्ष यानलाई पाइलटको इनपुटमा प्रतिक्रिया दिनुहोस् र स्वचालित रूपमा कोर्स सुधारहरू कायम राख्नुहोस्? आज हामीले सिक्ने सिद्धान्तहरू त्यस्तै अवधारणाहरूको प्रतिध्वनि गर्छन् – खेलाडी-नियन्त्रित गति व्यवस्थापन र स्वचालित प्रणाली व्यवहारहरू।
-
-यस पाठमा, तपाईंले सिक्नुहुनेछ कि कसरी स्पेसशिपलाई स्क्रिनमा ग्लाइड गराउने, खेलाडीको आदेशहरूमा प्रतिक्रिया दिने, र चिल्लो गति ढाँचाहरू सिर्जना गर्ने। हामी सबै कुरा व्यवस्थित अवधारणाहरूमा तोड्नेछौं जसले एकअर्कामा स्वाभाविक रूपमा निर्माण गर्छ।
+# स्पेस गेम बनाउनुहोस् भाग ३: गति थप्दै
+
+```mermaid
+journey
+    title Your Game Animation Journey
+    section Movement Basics
+      Understand motion principles: 3: Student
+      Learn coordinate updates: 4: Student
+      Implement basic movement: 4: Student
+    section Player Controls
+      Handle keyboard events: 4: Student
+      Prevent default behaviors: 5: Student
+      Create responsive controls: 5: Student
+    section Game Systems
+      Build game loop: 5: Student
+      Manage object lifecycle: 5: Student
+      Implement pub/sub pattern: 5: Student
+```
 
-अन्त्यमा, तपाईंले खेलाडीहरूलाई आफ्नो हिरो जहाजलाई स्क्रिनमा उडाउने र शत्रु जहाजहरू माथि गस्ती गर्ने देख्नुहुनेछ। अझ महत्त्वपूर्ण कुरा, तपाईंले खेल गति प्रणालीहरूलाई शक्ति दिने मुख्य सिद्धान्तहरू बुझ्नुहुनेछ।
+तपाईंको मनपर्ने खेलहरूको बारेमा सोच्नुहोस् – तिनीहरूलाई आकर्षक बनाउने कुरा केवल राम्रो ग्राफिक्स मात्र होइन, तर सबै कुरा कसरी चल्छ र तपाईंको क्रियाकलापमा प्रतिक्रिया दिन्छ। अहिले, तपाईंको स्पेस गेम एउटा सुन्दर चित्रजस्तै छ, तर हामी यसलाई जीवन्त बनाउने गति थप्न जाँदैछौं।
+
+जब नासाका इन्जिनियरहरूले अपोलो मिशनहरूको लागि गाइडेंस कम्प्युटर प्रोग्राम गरे, उनीहरूले यस्तै चुनौतीको सामना गरे: कसरी एक अन्तरिक्ष यानलाई पाइलटको इनपुटमा प्रतिक्रिया दिन बनाउने, जबकि स्वचालित रूपमा कोर्स सुधारहरू कायम राख्ने? आज हामीले सिक्ने सिद्धान्तहरू ती समान अवधारणाहरूको प्रतिध्वनि गर्छन् – खेलाडी-नियन्त्रित गति व्यवस्थापन गर्दै स्वचालित प्रणाली व्यवहारहरू।
+
+यस पाठमा, तपाईंले अन्तरिक्ष यानलाई स्क्रिनमा चिप्लिन सिक्नुहुनेछ, खेलाडीको आदेशहरूमा प्रतिक्रिया दिनुहुनेछ, र चिल्लो गति ढाँचाहरू सिर्जना गर्नुहुनेछ। हामी सबै कुरा प्राकृतिक रूपमा एकअर्कामा निर्माण हुने प्रबन्धनीय अवधारणाहरूमा तोड्नेछौं।
+
+अन्त्यमा, तपाईंले खेलाडीहरूलाई उनीहरूको हिरो जहाजलाई स्क्रिनमा उडाउँदै गर्दा शत्रु जहाजहरू माथि गस्ती गरिरहेको देख्नुहुनेछ। अझ महत्त्वपूर्ण कुरा, तपाईंले खेल गति प्रणालीहरूलाई शक्ति दिने मुख्य सिद्धान्तहरू बुझ्नुहुनेछ।
+
+```mermaid
+mindmap
+  root((Game Animation))
+    Movement Types
+      Player Controlled
+      Automatic Motion
+      Physics Based
+      Scripted Paths
+    Event Handling
+      Keyboard Input
+      Mouse Events
+      Touch Controls
+      Default Prevention
+    Game Loop
+      Update Logic
+      Render Frame
+      Clear Canvas
+      Frame Rate Control
+    Object Management
+      Position Updates
+      Collision Detection
+      Lifecycle Management
+      State Tracking
+    Communication
+      Pub/Sub Pattern
+      Event Emitters
+      Message Passing
+      Loose Coupling
+```
 
 ## प्रि-लेक्चर क्विज
 
@@ -23,20 +70,41 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## खेलको गति बुझ्दै
 
-खेलहरू तब जीवित हुन्छन् जब चीजहरू वरिपरि सर्न थाल्छन्, र यो दुई तरिकामा हुन्छ:
+खेलहरू तब जीवित हुन्छन् जब चीजहरू वरिपरि चल्न थाल्छन्, र यो दुई तरिकामा हुन्छ:
+
+- **खेलाडी-नियन्त्रित गति**: जब तपाईंले कुनै कुञ्जी थिच्नुहुन्छ वा माउस क्लिक गर्नुहुन्छ, केही चल्छ। यो तपाईं र तपाईंको खेल संसारको बीचको प्रत्यक्ष सम्बन्ध हो।
+- **स्वचालित गति**: जब खेल आफैंले चीजहरू चलाउने निर्णय गर्छ – जस्तै ती शत्रु जहाजहरू जसले स्क्रिनमा गस्ती गर्नुपर्छ चाहे तपाईंले केही गरिरहनुभएको छैन।
 
-- **खेलाडी-नियन्त्रित गति**: जब तपाईंले कुनै कुञ्जी थिच्नुहुन्छ वा माउस क्लिक गर्नुहुन्छ, केही सर्छ। यो तपाईं र तपाईंको खेल संसारको बीचको प्रत्यक्ष जडान हो।
-- **स्वचालित गति**: जब खेल आफैंले चीजहरू सार्ने निर्णय गर्छ – जस्तै ती शत्रु जहाजहरू जसले स्क्रिनमा गस्ती गर्नुपर्छ चाहे तपाईंले केही गरिरहनुभएको छैन।
+कम्प्युटर स्क्रिनमा वस्तुहरू चलाउनु सोचेभन्दा सजिलो छ। गणितको कक्षामा ती x र y समन्वयहरू सम्झनुहोस्? हामी यहाँ त्यहीसँग काम गर्दैछौं। जब ग्यालिलियोले १६१० मा बृहस्पतिको चन्द्रमाहरू ट्र्याक गरे, उनले मूलतः त्यही काम गरिरहेका थिए – गति ढाँचाहरू बुझ्न समयको साथमा स्थानहरू प्लट गर्दै।
 
-कम्प्युटर स्क्रिनमा वस्तुहरू सार्नु सोचेभन्दा सजिलो छ। गणित कक्षाको x र y समन्वयहरू सम्झनुहोस्? हामी यहीसँग काम गर्दैछौं। जब ग्यालिलियोले १६१० मा बृहस्पतिको चन्द्रमाहरू ट्र्याक गरे, उनले मूलतः त्यही काम गरिरहेका थिए – गति ढाँचाहरू बुझ्न समयको साथमा स्थानहरू प्लट गर्दै।
+स्क्रिनमा चीजहरू चलाउनु भनेको फ्लिपबुक एनिमेसन सिर्जना गर्नु जस्तै हो – तपाईंले यी तीन सरल चरणहरू पालना गर्न आवश्यक छ:
 
-स्क्रिनमा चीजहरू सार्नु फ्लिपबुक एनिमेसन सिर्जना गर्ने जस्तै हो – तपाईंले यी तीन सरल चरणहरू पालना गर्नुपर्छ:
+```mermaid
+flowchart LR
+    A["Frame N"] --> B["Update Positions"]
+    B --> C["Clear Canvas"]
+    C --> D["Draw Objects"]
+    D --> E["Frame N+1"]
+    E --> F{Continue?}
+    F -->|Yes| B
+    F -->|No| G["Game Over"]
+    
+    subgraph "Animation Cycle"
+        H["1. Calculate new positions"]
+        I["2. Erase previous frame"]
+        J["3. Render new frame"]
+    end
+    
+    style B fill:#e1f5fe
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+```
 
-1. **स्थिति अपडेट गर्नुहोस्** – तपाईंको वस्तु कहाँ हुनुपर्छ परिवर्तन गर्नुहोस् (शायद यसलाई ५ पिक्सल दायाँतिर सार्नुहोस्)
+1. **स्थिति अपडेट गर्नुहोस्** – तपाईंको वस्तु कहाँ हुनुपर्छ परिवर्तन गर्नुहोस् (सायद यसलाई दायाँतिर ५ पिक्सेल सार्नुहोस्)
 2. **पुरानो फ्रेम मेटाउनुहोस्** – स्क्रिन सफा गर्नुहोस् ताकि तपाईंले भूतिया ट्रेल्स नदेख्नुहोस्
 3. **नयाँ फ्रेम बनाउनुहोस्** – तपाईंको वस्तुलाई यसको नयाँ स्थानमा राख्नुहोस्
 
-यो पर्याप्त छिटो गर्नुहोस्, र बूम! तपाईंले खेलाडीहरूलाई प्राकृतिक लाग्ने चिल्लो गति पाउनुभयो।
+यो पर्याप्त छिटो गर्नुहोस्, र बूम! तपाईंले खेलाडीहरूलाई प्राकृतिक लाग्ने चिल्लो गति पाउनुहुन्छ।
 
 यसले कोडमा कस्तो देखिन्छ:
 
@@ -52,22 +120,22 @@ ctx.drawImage(heroImg, hero.x, hero.y);
 ```
 
 **यस कोडले के गर्छ:**
-- **अपडेट गर्छ** हिरोको x-समन्वयलाई ५ पिक्सलले क्षैतिज रूपमा सार्न
+- **अपडेट गर्छ** हिरोको x-समन्वयलाई ५ पिक्सेलले क्षैतिज रूपमा सार्न
 - **सफा गर्छ** सम्पूर्ण क्यानभास क्षेत्रलाई पुरानो फ्रेम हटाउन
 - **भर्छ** क्यानभासलाई कालो पृष्ठभूमि रंगले
 - **पुन: बनाउँछ** हिरोको छवि नयाँ स्थानमा
 
-✅ के तपाईं सोच्न सक्नुहुन्छ किन धेरै फ्रेमहरू प्रति सेकेन्डमा तपाईंको हिरो पुन: बनाउँदा प्रदर्शन लागत बढ्न सक्छ? [यस ढाँचाको विकल्पहरू](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) बारे पढ्नुहोस्।
+✅ तपाईंले सोच्न सक्नुहुन्छ कि किन धेरै फ्रेमहरू प्रति सेकेन्डमा तपाईंको हिरोलाई पुन: बनाउँदा प्रदर्शन लागत बढ्न सक्छ? [यस ढाँचाको विकल्पहरू](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) बारे पढ्नुहोस्।
 
 ## कुञ्जीपाटी घटनाहरू ह्यान्डल गर्नुहोस्
 
-यो त्यहाँ हो जहाँ हामी खेलाडीको इनपुटलाई खेलको क्रियामा जडान गर्छौं। जब कसैले लेजर फायर गर्न स्पेसबार थिच्छ वा एस्टेरोइडलाई डज गर्न एरो कुञ्जी थिच्छ, तपाईंको खेलले त्यो इनपुट पत्ता लगाउन र प्रतिक्रिया दिनुपर्छ।
+यहीँबाट हामी खेलाडीको इनपुटलाई खेलको क्रियाकलापसँग जोड्छौं। जब कसैले लेजर फायर गर्न स्पेसबार थिच्छ वा एस्टेरोइडबाट बच्न एरो कुञ्जी थिच्छ, तपाईंको खेलले त्यो इनपुट पत्ता लगाउन र प्रतिक्रिया दिन आवश्यक छ।
 
-कुञ्जीपाटी घटनाहरू विन्डो स्तरमा हुन्छन्, जसको अर्थ तपाईंको सम्पूर्ण ब्राउजर विन्डोले ती कुञ्जी थिचाइहरू सुन्दैछ। माउस क्लिकहरू, अर्कोतर्फ, विशिष्ट तत्वहरूमा बाँध्न सकिन्छ (जस्तै बटन क्लिक गर्दा)। हाम्रो स्पेस गेमको लागि, हामी कुञ्जीपाटी नियन्त्रणहरूमा ध्यान केन्द्रित गर्नेछौं किनभने यसले खेलाडीहरूलाई त्यो क्लासिक आर्केड अनुभव दिन्छ।
+कुञ्जीपाटी घटनाहरू विन्डो स्तरमा हुन्छन्, जसको अर्थ तपाईंको सम्पूर्ण ब्राउजर विन्डोले ती कुञ्जी थिचाइहरू सुन्दैछ। माउस क्लिकहरू, अर्कोतर्फ, विशिष्ट तत्वहरूमा बाँध्न सकिन्छ (जस्तै बटन क्लिक गर्दा)। हाम्रो स्पेस गेमको लागि, हामी कुञ्जीपाटी नियन्त्रणहरूमा ध्यान केन्द्रित गर्नेछौं किनभने यसले खेलाडीहरूलाई क्लासिक आर्केड अनुभव दिन्छ।
 
 यसले मलाई १८०० को दशकमा टेलिग्राफ अपरेटरहरूले मोर्स कोड इनपुटलाई अर्थपूर्ण सन्देशहरूमा अनुवाद गर्नुपरेको सम्झाउँछ – हामी केही यस्तै गर्दैछौं, कुञ्जी थिचाइहरूलाई खेल आदेशहरूमा अनुवाद गर्दै।
 
-घटना ह्यान्डल गर्न तपाईंले विन्डोको `addEventListener()` विधि प्रयोग गर्नुपर्छ र यसलाई दुई इनपुट प्यारामिटरहरू प्रदान गर्नुपर्छ। पहिलो प्यारामिटर घटनाको नाम हो, उदाहरणका लागि `keyup`। दोस्रो प्यारामिटर घटना घटेको परिणामस्वरूप बोलाउनुपर्ने कार्य हो।
+घटना ह्यान्डल गर्न तपाईंले विन्डोको `addEventListener()` विधि प्रयोग गर्नुपर्छ र यसलाई दुई इनपुट प्यारामिटरहरू प्रदान गर्नुपर्छ। पहिलो प्यारामिटर घटनाको नाम हो, उदाहरणका लागि `keyup`। दोस्रो प्यारामिटर घटना घटेको परिणामस्वरूप बोलाइनु पर्ने कार्य हो।
 
 यहाँ एउटा उदाहरण छ:
 
@@ -80,24 +148,43 @@ window.addEventListener('keyup', (evt) => {
 });
 ```
 
-**यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
+**यहाँ के हुन्छ:**
 - **सुन्छ** सम्पूर्ण विन्डोमा कुञ्जीपाटी घटनाहरू
-- **पकड्छ** घटना वस्तु जसले कुन कुञ्जी थिचिएको थियो भन्ने जानकारी समावेश गर्दछ
+- **पक्रन्छ** घटना वस्तु जसले कुन कुञ्जी थिचिएको जानकारी समावेश गर्दछ
 - **जाँच्छ** कि थिचिएको कुञ्जी विशिष्ट कुञ्जीसँग मेल खान्छ (यस अवस्थामा, माथि एरो)
-- **कार्यान्वयन गर्छ** जब सर्त पूरा हुन्छ
+- **कार्यान्वयन गर्छ** कोड जब सर्त पूरा हुन्छ
 
-कुञ्जी घटनाहरूको लागि त्यहाँ दुई गुणहरू छन् जुन तपाईंले कुन कुञ्जी थिचिएको थियो हेर्न प्रयोग गर्न सक्नुहुन्छ:
+कुञ्जी घटनाहरूको लागि घटनामा दुई गुणहरू छन् जसले कुन कुञ्जी थिचिएको हेर्न प्रयोग गर्न सकिन्छ:
 
 - `key` - यो थिचिएको कुञ्जीको स्ट्रिङ प्रतिनिधित्व हो, उदाहरणका लागि `'ArrowUp'`
 - `keyCode` - यो संख्यात्मक प्रतिनिधित्व हो, उदाहरणका लागि `37`, `ArrowLeft` सँग मेल खान्छ
 
-✅ कुञ्जी घटना हेरफेर खेल विकास बाहिर उपयोगी छ। यस प्रविधिको लागि तपाईं अन्य के उपयोग सोच्न सक्नुहुन्छ?
+✅ कुञ्जी घटना हेरफेर खेल विकास बाहेक उपयोगी छ। तपाईं यस प्रविधिको लागि अन्य उपयोगहरू के सोच्न सक्नुहुन्छ?
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant EventSystem
+    participant GameLogic
+    participant Hero
+    
+    User->>Browser: Presses ArrowUp key
+    Browser->>EventSystem: keydown event
+    EventSystem->>EventSystem: preventDefault()
+    EventSystem->>GameLogic: emit('KEY_EVENT_UP')
+    GameLogic->>Hero: hero.y -= 5
+    Hero->>Hero: Update position
+    
+    Note over Browser,GameLogic: Event flow prevents browser defaults
+    Note over GameLogic,Hero: Pub/sub pattern enables clean communication
+```
 
 ### विशेष कुञ्जीहरू: एक चेतावनी!
 
-केही कुञ्जीहरूमा बिल्ट-इन ब्राउजर व्यवहारहरू हुन्छन् जसले तपाईंको खेलमा बाधा पुर्याउन सक्छ। एरो कुञ्जीहरूले पृष्ठ स्क्रोल गर्छन् र स्पेसबार तल जान्छ – जब कोही आफ्नो स्पेसशिप चलाउन खोज्दैछ, तपाईं यी व्यवहारहरू चाहनुहुन्न।
+केही कुञ्जीहरूमा बिल्ट-इन ब्राउजर व्यवहारहरू हुन्छन् जसले तपाईंको खेलमा बाधा पुर्याउन सक्छ। एरो कुञ्जीहरूले पृष्ठ स्क्रोल गर्छन् र स्पेसबार तल जान्छ – जब कसैले आफ्नो अन्तरिक्ष यान चलाउन खोज्दैछ, तपाईंले यी व्यवहारहरू चाहनुहुन्न।
 
-हामी यी डिफल्ट व्यवहारहरू रोक्न सक्छौं र हाम्रो खेलले इनपुटलाई ह्यान्डल गर्न सक्छ। यो प्रारम्भिक कम्प्युटर प्रोग्रामरहरूले कस्टम व्यवहारहरू सिर्जना गर्न प्रणाली इन्टरप्टहरू ओभरराइड गर्नुपरेको जस्तै हो – हामी ब्राउजर स्तरमा मात्र गर्दैछौं। यहाँ कसरी:
+हामी यी डिफल्ट व्यवहारहरू रोक्न सक्छौं र हाम्रो खेलले इनपुटलाई ह्यान्डल गर्न दिन सक्छौं। यो प्रारम्भिक कम्प्युटर प्रोग्रामरहरूले कस्टम व्यवहारहरू सिर्जना गर्न प्रणाली इन्टरप्टहरू ओभरराइड गर्नुपरेको जस्तै हो – हामी ब्राउजर स्तरमा मात्र गर्दैछौं। यहाँ कसरी:
 
 ```javascript
 const onKeyDown = function (e) {
@@ -119,16 +206,32 @@ window.addEventListener('keydown', onKeyDown);
 ```
 
 **यो रोकथाम कोड बुझ्दै:**
-- **जाँच्छ** विशिष्ट कुञ्जी कोडहरूको लागि जसले अनावश्यक ब्राउजर व्यवहार निम्त्याउन सक्छ
-- **रोक्छ** एरो कुञ्जीहरू र स्पेसबारको लागि डिफल्ट ब्राउजर क्रिया
+- **जाँच्छ** विशिष्ट कुञ्जी कोडहरू जसले अनावश्यक ब्राउजर व्यवहार निम्त्याउन सक्छ
+- **रोक्छ** एरो कुञ्जीहरू र स्पेसबारको लागि डिफल्ट ब्राउजर क्रियाकलाप
 - **अनुमति दिन्छ** अन्य कुञ्जीहरू सामान्य रूपमा काम गर्न
 - **प्रयोग गर्छ** `e.preventDefault()` ब्राउजरको बिल्ट-इन व्यवहार रोक्न
 
+### 🔄 **शिक्षण जाँच**
+**घटना ह्यान्डलिंग बुझाइ**: स्वचालित गति तर्फ जानु अघि सुनिश्चित गर्नुहोस् कि तपाईं:
+- ✅ `keydown` र `keyup` घटनाहरूको बीचको भिन्नता व्याख्या गर्न सक्नुहुन्छ
+- ✅ किन हामी डिफल्ट ब्राउजर व्यवहार रोक्छौं बुझ्न सक्नुहुन्छ
+- ✅ कसरी घटना सुन्नेहरूले प्रयोगकर्ता इनपुटलाई खेलको तर्कसँग जोड्छ व्याख्या गर्न सक्नुहुन्छ
+- ✅ कुन कुञ्जीहरूले खेल नियन्त्रणमा बाधा पुर्याउन सक्छ पहिचान गर्न सक्नुहुन्छ
+
+**छिटो आत्म-परीक्षण**: यदि तपाईंले एरो कुञ्जीहरूको लागि डिफल्ट व्यवहार रोक्नुभएन भने के हुन्छ?
+*उत्तर: ब्राउजरले पृष्ठ स्क्रोल गर्नेछ, खेलको गति बाधा पुर्याउँदै*
+
+**घटना प्रणाली संरचना**: तपाईं अब बुझ्नुहुन्छ:
+- **विन्डो-स्तर सुन्ने**: ब्राउजर स्तरमा घटनाहरू पक्रने
+- **घटना वस्तु गुणहरू**: `key` स्ट्रिङहरू बनाम `keyCode` नम्बरहरू
+- **डिफल्ट रोकथाम**: अनावश्यक ब्राउजर व्यवहार रोक्दै
+- **सर्तात्मक तर्क**: विशिष्ट कुञ्जी संयोजनहरूमा प्रतिक्रिया दिँदै
+
 ## खेल प्रेरित गति
 
-अब कुरा गरौं वस्तुहरू जुन खेलाडीको इनपुट बिना सर्छ। स्क्रिनमा क्रुज गर्ने शत्रु जहाजहरू, सीधा रेखामा उड्ने गोलीहरू, वा पृष्ठभूमिमा बहने बादलहरूको बारेमा सोच्नुहोस्। यो स्वायत्त गति तपाईंको खेल संसारलाई जीवित महसुस गराउँछ जब कोही नियन्त्रणहरू छुँदैन।
+अब कुरा गरौं वस्तुहरू जो खेलाडीको इनपुट बिना चल्छन्। शत्रु जहाजहरू स्क्रिनमा क्रुज गर्दै, सीधा रेखामा गोलीहरू उड्दै, वा पृष्ठभूमिमा बादलहरू तैरिरहेको सोच्नुहोस्। यो स्वतन्त्र गति तपाईंको खेल संसारलाई जीवन्त बनाउँछ, चाहे कोही नियन्त्रणमा नहोस्।
 
-हामी नियमित अन्तरालमा स्थिति अपडेट गर्न JavaScript को बिल्ट-इन टाइमरहरू प्रयोग गर्छौं। यो अवधारणा पेन्डुलम घडीहरू कसरी काम गर्छन् जस्तै हो – एक नियमित मेकानिज्म जसले निरन्तर, समयबद्ध कार्यहरू ट्रिगर गर्छ। यो कति सरल हुन सक्छ:
+हामी नियमित अन्तरालमा स्थानहरू अपडेट गर्न JavaScript को बिल्ट-इन टाइमरहरू प्रयोग गर्छौं। यो अवधारणा पेन्डुलम घडीहरू कसरी काम गर्छन् जस्तै हो – एक नियमित मेकानिज्म जसले निरन्तर, समयबद्ध क्रियाकलापहरू ट्रिगर गर्छ। यहाँ यो कति सरल हुन सक्छ:
 
 ```javascript
 const id = setInterval(() => {
@@ -139,19 +242,44 @@ const id = setInterval(() => {
 
 **यो गति कोडले के गर्छ:**
 - **सिर्जना गर्छ** एक टाइमर जो प्रत्येक १०० मिलिसेकेन्डमा चल्छ
-- **अपडेट गर्छ** शत्रुको y-समन्वयलाई प्रत्येक पटक १० पिक्सलले
-- **भण्डारण गर्छ** अन्तराल आईडी ताकि हामी पछि यसलाई रोक्न सकौं
-- **सर्छ** शत्रु स्वतः स्क्रिनमा तलतिर
+- **अपडेट गर्छ** शत्रुको y-समन्वयलाई प्रत्येक पटक १० पिक्सेलले
+- **भण्डारण गर्छ** अन्तराल ID ताकि हामी पछि यसलाई रोक्न सकौं
+- **चलाउँछ** शत्रुलाई स्वत: स्क्रिनमा तलतिर
 
 ## खेल लूप
 
-यहाँ अवधारणा छ जसले सबै कुरा एकसाथ बाँध्छ – खेल लूप। यदि तपाईंको खेल एउटा चलचित्र हो भने, खेल लूप फिल्म प्रोजेक्टर हुनेछ, फ्रेम पछि फ्रेम देखाउँदै यति छिटो कि सबै कुरा चिल्लो रूपमा सर्छ।
+यहाँ अवधारणा छ जसले सबै कुरा जोड्छ – खेल लूप। यदि तपाईंको खेल एउटा चलचित्र हो भने, खेल लूप फिल्म प्रोजेक्टर हुनेछ, फ्रेम पछि फ्रेम देखाउँदै ताकि सबै कुरा चिल्लो रूपमा चलिरहेको देखिन्छ।
+
+प्रत्येक खेलको पछाडि एउटा लूप चलिरहेको हुन्छ। यो एउटा कार्य हो जसले सबै खेल वस्तुहरू अपडेट गर्छ, स्क्रिन पुन: बनाउँछ, र यो प्रक्रिया निरन्तर दोहोर्याउँछ। यसले तपाईंको हिरो, सबै शत्रुहरू, कुनै पनि लेजरहरू – सम्पूर्ण खेल अवस्था ट्र्याक राख्छ।
 
-प्रत्येक खेलमा यी लूपहरू मध्ये एक पर्दा पछाडि चलिरहेको हुन्छ। यो एउटा कार्य हो जसले सबै खेल वस्तुहरू अपडेट गर्छ, स्क्रिन पुन: बनाउँछ, र यो प्रक्रिया निरन्तर दोहोर्याउँछ। यसले तपाईंको हिरो, सबै शत्रुहरू, वरिपरि उडिरहेको कुनै पनि लेजरहरू – सम्पूर्ण खेल अवस्था ट्र्याक राख्छ।
+यो अवधारणा मलाई प्रारम्भिक फिल्म एनिमेटरहरू जस्तै वाल्ट डिज्नीले पात्रहरू फ्रेम द्वारा फ्रेम पुन: बनाउनु परेको सम्झाउँछ। हामी त्यही काम गर्दैछौं, केवल कोडको साथमा पेन्सिलको सट्टा।
 
-यो अवधारणा मलाई प्रारम्भिक फिल्म एनिमेटरहरू जस्तै वाल्ट डिज्नीले पात्रहरूलाई फ्रेम द्वारा फ्रेम पुन: बनाउनु परेको सम्झाउँछ ताकि गति को भ्रम सिर्जना गर्न सकियोस्। हामी त्यही गर्दैछौं, केवल कोडको साथमा।
+यहाँ खेल लूप सामान्यतया कस्तो देखिन्छ, कोडमा व्यक्त गरिएको:
 
-यहाँ खेल लूप सामान्यतया कस्तो देखिन्छ, कोडमा व्यक्त गरिएको छ:
+```mermaid
+flowchart TD
+    A["Start Game Loop"] --> B["Clear Canvas"]
+    B --> C["Fill Background"]
+    C --> D["Update Game Objects"]
+    D --> E["Draw Hero"]
+    E --> F["Draw Enemies"]
+    F --> G["Draw UI Elements"]
+    G --> H["Wait for Next Frame"]
+    H --> I{Game Running?}
+    I -->|Yes| B
+    I -->|No| J["End Game"]
+    
+    subgraph "Frame Rate Control"
+        K["60 FPS = 16.67ms"]
+        L["30 FPS = 33.33ms"]
+        M["10 FPS = 100ms"]
+    end
+    
+    style B fill:#ffebee
+    style D fill:#e1f5fe
+    style E fill:#e8f5e8
+    style F fill:#e8f5e8
+```
 
 ```javascript
 const gameLoopId = setInterval(() => {
@@ -170,25 +298,25 @@ const gameLoopId = setInterval(() => {
 **खेल लूप संरचना बुझ्दै:**
 - **सफा गर्छ** सम्पूर्ण क्यानभास पुरानो फ्रेम हटाउन
 - **भर्छ** पृष्ठभूमिलाई ठोस रंगले
-- **पुन: बनाउँछ** सबै खेल वस्तुहरू तिनीहरूको वर्तमान स्थानहरूमा
-- **दोहोरो गर्छ** यो प्रक्रिया प्रत्येक २०० मिलिसेकेन्डमा चिल्लो एनिमेसन सिर्जना गर्न
+- **पुन: बनाउँछ** सबै खेल वस्तुहरूलाई उनीहरूको वर्तमान स्थानमा
+- **दोहर्याउँछ** यो प्रक्रिया प्रत्येक २०० मिलिसेकेन्डमा चिल्लो एनिमेसन सिर्जना गर्न
 - **व्यवस्थापन गर्छ** फ्रेम दरलाई अन्तराल समय नियन्त्रण गरेर
 
 ## स्पेस गेम जारी राख्दै
 
-अब हामी स्थिर दृश्यमा गति थप्नेछौं जुन तपाईंले पहिले निर्माण गर्नुभएको थियो। हामी यसलाई स्क्रिनशटबाट अन्तरक्रियात्मक अनुभवमा रूपान्तरण गर्न जाँदैछौं। हामी प्रत्येक टुक्रा अर्कोमा निर्माण सुनिश्चित गर्न चरणबद्ध रूपमा काम गर्नेछौं।
+अब हामी स्थिर दृश्यमा गति थप्नेछौं जुन तपाईंले पहिले निर्माण गर्नुभएको थियो। हामी यसलाई स्क्रिनशटबाट अन्तरक्रियात्मक अनुभवमा रूपान्तरण गर्नेछौं। हामी प्रत्येक टुक्रालाई पछिल्लोमा निर्माण गर्न सुनिश्चित गर्न चरणबद्ध रूपमा काम गर्नेछौं।
 
-पछिल्लो पाठमा हामीले छोडेको कोड समात्नुहोस् (वा यदि तपाईंलाई नयाँ सुरुवात आवश्यक छ भने [भाग II- स्टार्टर](../../../../6-space-game/3-moving-elements-around/your-work) फोल्डरमा कोड सुरु गर्नुहोस्)।
+पछिल्लो पाठमा हामीले छोडेको कोड लिनुहोस् (वा यदि तपाईंलाई नयाँ सुरुवात चाहिन्छ भने [भाग II- स्टार्टर](../../../../6-space-game/3-moving-elements-around/your-work) फोल्डरमा कोडबाट सुरु गर्नुहोस्)।
 
 **आज हामी के निर्माण गर्दैछौं:**
-- **हिरो नियन्त्रणहरू**: एरो कुञ्जीहरूले तपाईंको स्पेसशिपलाई स्क्रिनमा चलाउनेछ
+- **हिरो नियन्त्रणहरू**: एरो कुञ्जीहरूले तपाईंको अन्तरिक्ष यानलाई स्क्रिन वरिपरि चलाउनेछ
 - **शत्रु गति**: ती एलियन जहाजहरूले आफ्नो आक्रमण सुरु गर्नेछन्
 
-हामी यी सुविधाहरू कार्यान्वयन गर्न सुरु गरौं।
+यी सुविधाहरू कार्यान्वयन गर्न सुरु गरौं।
 
 ## सिफारिस गरिएका चरणहरू
 
-`your-work` सब फोल्डरमा तपाईंको लागि सिर्जना गरिएका फाइलहरू पत्ता लगाउनुहोस्। यसले निम्न समावेश गर्नुपर्छ:
+`your-work` उप फोल्डरमा तपाईंको लागि सिर्जना गरिएका फाइलहरू पत्ता लगाउनुहोस्। यसले निम्न समावेश गर्नुपर्छ:
 
 ```bash
 -| assets
@@ -199,7 +327,7 @@ const gameLoopId = setInterval(() => {
 -| package.json
 ```
 
-तपाईं आफ्नो प्रोजेक्ट `your-work` फोल्डरमा टाइप गरेर सुरु गर्नुहोस्:
+तपाईं आफ्नो परियोजना `your-work` फोल्डरमा टाइप गरेर सुरु गर्नुहुन्छ:
 
 ```bash
 cd your-work
@@ -207,19 +335,19 @@ npm start
 ```
 
 **यो आदेशले के गर्छ:**
-- **तपाईंको प्रोजेक्ट निर्देशिका**मा जान्छ
-- **HTTP सर्भर सुरु गर्छ** `http://localhost:5000` ठेगानामा
-- **तपाईंको खेल फाइलहरू सेवा दिन्छ** ताकि तपाईं तिनीहरूलाई ब्राउजरमा परीक्षण गर्न सक्नुहुन्छ
+- **तपाईंको परियोजना निर्देशिका**मा जान्छ
+- **HTTP सर्भर सुरु गर्छ** ठेगाना `http://localhost:5000` मा
+- **तपाईंको खेल फाइलहरू सेवा दिन्छ** ताकि तपाईं ब्राउजरमा परीक्षण गर्न सक्नुहुन्छ
 
-माथिको आदेशले `http://localhost:5000` ठेगानामा HTTP सर्भर सुरु गर्नेछ। ब्राउजर खोल्नुहोस् र त्यो ठेगाना इनपुट गर्नुहोस्, अहिले यसले हिरो र सबै शत्रुहरूलाई प्रस्तुत गर्नुपर्छ; केही पनि सर्दैन - अझै!
+माथिको आदेशले ठेगाना `http://localhost:5000` मा HTTP सर्भर सुरु गर्नेछ। ब्राउजर खोल्नुहोस् र त्यो ठेगाना इनपुट गर्नुहोस्, अहिले यसले हिरो र सबै शत्रुहरूलाई प्रस्तुत गर्नुपर्छ; केही पनि चलिरहेको छैन - अझै!
 
 ### कोड थप्नुहोस्
 
-1. **समर्पित वस्तुहरू थप्नुहोस्** `hero`, `enemy`, र `game object` को लागि, तिनीहरूसँग `x` र `y` गुणहरू हुनुपर्छ। ([Inheritance or composition](../README.md) को भाग सम्झनुहोस्।)
+1. **समर्पित वस्तुहरू थप्नुहोस्** `hero`, `enemy`, र `game object` को लागि, तिनीहरूसँग `x` र `y` गुणहरू हुनुपर्छ। (याद गर्नुहोस् [Inheritance or composition](../README.md) को भाग)।
 
-   *सुझाव* `game object` त्यो हुनुपर्छ जससँग `x` र `y` र क्यानभासमा आफैंलाई चित्रण गर्ने क्षमता छ।
+   *सुझाव* `game object` त्यो हुनुपर्छ जससँग `x` र `y` र क्यानभासमा आफैंलाई बनाउने क्षमता छ।
 
-   > **टिप**: नयाँ `GameObject` कक्षा थपेर यसको कन्स्ट्रक्टर तलको रूपमा परिभाषित गरेर सुरु गर्नुहोस्, र त्यसपछि यसलाई क्यानभासमा चित्रण गर्नुहोस्:
+   > **टिप**: नयाँ `GameObject` कक्षा थप्न सुरु गर्नुहोस् यसको कन्स्ट्रक्टर तलको रूपमा परिभाषित गरेर, र त्यसपछि यसलाई क्यानभासमा बनाउनुहोस्:
 
     ```javascript
     class GameObject {
@@ -241,10 +369,47 @@ npm start
 
     **यो आधार कक्षा बुझ्दै:**
     - **सामान्य गुणहरू परिभाषित गर्छ** जुन सबै खेल वस्तुहरूले साझा गर्छन् (स्थिति, आकार, छवि)
-    - **समावेश गर्छ** `dead` फ्ल्याग वस्तु हटाउन ट्र्याक गर्न
-    - **प्रदान गर्छ** `draw()` विधि जसले क्यानभासमा वस्तु प्रस्तुत गर्छ
+    - **समावेश गर्छ** एक `dead` झण्डा वस्तु हटाउन ट्र्याक गर्न
+    - **प्रदान गर्छ** एक `draw()` विधि जसले क्यानभासमा वस्तु बनाउँछ
     - **डिफल्ट मानहरू सेट गर्छ** सबै गुणहरूको लागि जुन बच्चा कक्षाहरूले ओभरराइड गर्न सक्छन्
 
+    ```mermaid
+    classDiagram
+        class GameObject {
+            +x: number
+            +y: number
+            +dead: boolean
+            +type: string
+            +width: number
+            +height: number
+            +img: Image
+            +draw(ctx)
+        }
+        
+        class Hero {
+            +speed: number
+            +type: "Hero"
+            +width: 98
+            +height: 75
+        }
+        
+        class Enemy {
+            +type: "Enemy"
+            +width: 98
+            +height: 50
+            +setInterval()
+        }
+        
+        GameObject <|-- Hero
+        GameObject <|-- Enemy
+        
+        class EventEmitter {
+            +listeners: object
+            +on(message, listener)
+            +emit(message, payload)
+        }
+    ```
+
     अब, यस `GameObject` लाई विस्तार गरेर `Hero` र `Enemy` सिर्जना गर्नुहोस्:
     
     ```javascript
@@ -279,16 +444,16 @@ npm start
     ```
 
     **यी कक्षाहरूमा मुख्य अवधारणाहरू:**
-    - **`GameObject` बाट उत्तराधिकार लिन्छ** `extends` कीवर्ड प्रयोग गरेर
-    - **पेरेंट कन्स्ट्रक्टरलाई बोलाउँछ** `super(x, y)` प्रयोग गरेर
+    - **`extends` कीवर्ड प्रयोग गरेर `GameObject` बाट उत्तराधिकार लिन्छ**
+    - **`super(x, y)` प्रयोग गरेर अभिभावक कन्स्ट्रक्टरलाई बोलाउँछ**
     - **प्रत्येक वस्तु प्रकारको लागि विशिष्ट आयाम र गुणहरू सेट गर्छ**
-    - **स्वचालित गति कार्यान्वयन गर्छ** शत्रुहरूको लागि `setInterval()` प्रयोग गरेर
+    - **`setInterval()` प्रयोग गरेर शत्रुहरूको स्वत: गति कार्यान्वयन गर्छ**
 
-2. **कुञ्जी-घटना ह्यान्डलरहरू थप्नुहोस्** कुञ्जी नेभिगेसन ह्यान्डल गर्न (हिरोलाई माथि/तल, बायाँ/दायाँ सर्नुहोस्)
+2. **कुञ्जी-घटना ह्यान्डलरहरू थप्नुहोस्** कुञ्जी नेभिगेसन ह्यान्डल गर्न (हिरोलाई माथि/तल, बायाँ/दायाँ सार्न)
 
-   *स्मरण गर्नुहोस्* यो एक कार्टेसियन प्रणाली हो, माथि-बायाँ `0,0` हो। साथै एरो कुञ्जीहरू र स्पेसबारको लागि *डिफल्ट व्यवहार* रोक्न कोड थप्न सम्झनुहोस्।
+   *याद गर्नुहोस्* यो एक कार्टेसियन प्रणाली हो, माथि-बायाँ `0,0` हो। साथै एरो कुञ्जीहरू र स्पेसबारको लागि डिफल्ट व्यवहार रोक्न कोड थप्न सम्झनुहोस्।
 
-   > **टिप**: आफ्नो `onKeyDown` कार्य सिर्जना गर्नुहोस् र यसलाई विन्डोमा संलग्न गर्नुहोस्:
+   > **टिप**: तपाईंको `onKeyDown` कार्य सिर्जना गर्नुहोस् र यसलाई विन्डोमा जोड्नुहोस्:
 
    ```javascript
    const onKeyDown = function (e) {
@@ -311,88 +476,98 @@ npm start
    ```
     
    **यो घटना ह्यान्डलरले के गर्छ:**
-   - **कुञ्जीपाटी घटनाहरू सुन्छ** सम्पूर्ण विन्डोमा
-   - **कुञ्जी कोड लग गर्छ** कुन कुञ्जी थिचिएको छ डिबग गर्न मद्दत गर्न
-   - **डिफल्ट ब्राउजर व्यवहार रोक्छ** एरो कुञ्जीहरू र स्पेसबारको लागि
-   - **अन्य कुञ्जीहरूलाई सामान्य रूपमा काम गर्न अनुमति दिन्छ**
+   - **सुन्छ** सम्पूर्ण विन्डोमा कुञ्जीपाटी घटनाहरू
+   - **लॉग गर्छ** कुञ्जी कोडले कुन कुञ्जी थिचिएको छ भनेर डिबग गर्न मद्दत गर्दछ
+   - **रोक्छ** एरो कुञ्जीहरू र स्पेसबारको लागि डिफल्ट ब्राउजर व्यवहार
+   - **अनुमति दिन्छ** अन्य कुञ्जीहरू सामान्य रूपमा काम गर्न
    
-   यस बिन्दुमा आफ्नो ब्राउजर कन्सोल जाँच गर्नुहोस्, र कुञ्जी थिचाइहरू लग भइरहेको हेर्नुहोस्।
+   यस बिन्दुमा तपाईंको ब्राउजर कन्सोल जाँच गर्नुहोस्, र थिचिएका कुञ्जीहरूलाई हेर्नुहोस्।
 
-3. **[Pub sub pattern](../README.md) कार्यान्वयन गर्नुहोस्**, यसले तपाईंको कोड सफा राख्छ जब तपाईं बाँकी भागहरू पालना गर्नुहुन्छ।
+3. **[Pub sub pattern](../README.md) कार्यान्वयन गर्नुहोस्**, यसले तपाईंको कोडलाई सफा राख्छ जब तपाईं बाँकी भागहरू पछ्याउनुहुन्छ।
 
-   पब्लिश-सब्सक्राइब ढाँचाले तपाईंको कोडलाई घटनाको पत्ता लगाउने र घटनाको ह्यान्डल गर्नेबाट अलग गरेर व्यवस्थित गर्न मद्दत गर्छ। यसले तपाईंको कोडलाई अधिक मोड्युलर र मर्मत गर्न सजिलो बनाउँछ।
+   पब्लिश-सब्सक्राइब ढाँचाले तपाईंको कोडलाई घटनाको पत्ता लगाउने र घटनाको ह्यान्डलिंगबाट अलग गरेर व्यवस्थित गर्न मद्दत गर्छ। यसले तपाईंको कोडलाई अधिक मोड्युलर र सजिलो बनाउँछ।
 
-   यो अन्तिम भाग गर्न, तपाईंले:
 
-   1. **विन्डोमा घटना सुन्ने कार्य थप्नुहोस्**:
+   - **सुरु गर्छ** सबै खेल वस्तुहरू राख्नको लागि एउटा array
 
-       ```javascript
-       window.addEventListener("keyup", (evt) => {
-         if (evt.key === "ArrowUp") {
-           eventEmitter.emit(Messages.KEY_EVENT_UP);
-         } else if (evt.key === "ArrowDown") {
-           eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-         } else if (evt.key === "ArrowLeft") {
-           eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-         } else if (evt.key === "ArrowRight") {
-           eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-         }
-       });
-       ```
-
-   **यो घटना प्रणालीले के गर्छ:**
-   - **कुञ्जीपाटी इनपुट पत्ता लगाउँछ** र यसलाई कस्टम खेल घटनाहरूमा रूपान्तरण गर्छ
-   - **इनपुट पत्ता लगाउने र खेलको तर्क अलग गर्छ**
-   - **नियन्त्रणहरू परिवर्तन गर्न सजिलो बनाउँछ** पछि खेल कोडलाई असर नगरी
-   - **एकै इनपुटमा धेरै प्रणालीहरूलाई प्रतिक्रिया दिन अनुमति दिन्छ**
-
-   2. **EventEmitter कक्षा सिर्जना गर्नुहोस्** सन्देशहरू प्रकाशित गर्न र सदस्यता लिन:
+   4. **खेल सुरु गर्नुहोस्**
 
        ```javascript
-       class EventEmitter {
-         constructor() {
-           this.listeners = {};
-         }
+       function initGame() {
+         gameObjects = [];
+         createEnemies();
+         createHero();
        
-         on(message, listener) {
-           if (!this.listeners[message]) {
-             this.listeners[message] = [];
-           }
-           this.listeners[message].push(listener);
-         }
+         eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+           hero.y -= 5;
+         });
        
-   3. **Constants थप्नुहोस्** र EventEmitter सेटअप गर्नुहोस्:
-
-       ```javascript
-       const Messages = {
-         KEY_EVENT_UP: "KEY_EVENT_UP",
-         KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-         KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-         KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-       };
+         eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+           hero.y += 5;
+         });
+       
+         eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+           hero.x -= 5;
+         });
        
-       let heroImg, 
-           enemyImg, 
-           laserImg,
-           canvas, ctx, 
-           gameObjects = [], 
-           hero, 
-           eventEmitter = new EventEmitter();
-       ```
-
-   **सेटअप बुझ्दै:**
-   - **सन्देश Constants परिभाषित गर्छ** टाइपोहरूबाट बच्न र रिफ्याक्टरिङ सजिलो बनाउन
-   - **छवि, क्यानभास सन्दर्भ, र खेल अवस्था**का लागि भेरिएबलहरू घोषणा गर्छ
-   - **पब्लिक-सब्सक्राइब प्रणालीको लागि ग्लोबल इभेन्ट इमिटर सिर्जना गर्छ**
-   - **सबै खेल वस्तुहरू समावेश गर्न एक एरे आरम्भ गर्छ**
-
-   4
-    - **शत्रुहरूको ग्रिड** nested loops प्रयोग गरेर बनाउँछ
-    - **शत्रुहरूको छवि** प्रत्येक शत्रु वस्तुमा असाइन गर्छ
-    - **प्रत्येक शत्रु**लाई ग्लोबल खेल वस्तुहरूको array मा थप्छ
+4. **खेल लूप सेटअप गर्नुहोस्**
+
+   `window.onload` function लाई पुनः संरचना गर्नुहोस् ताकि खेल सुरु गर्न सकियोस् र राम्रो अन्तरालमा खेल लूप सेटअप गर्न सकियोस्। तपाईंले एउटा लेजर बीम पनि थप्नु पर्नेछ:
+
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      const gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100);
+    };
+    ```
+
+   **खेल सेटअप बुझ्दै:**
+   - **पर्खन्छ** पृष्ठ पूर्ण रूपमा लोड हुने समयसम्म
+   - **क्यानभास तत्व र यसको 2D रेंडरिंग सन्दर्भ प्राप्त गर्छ**
+   - **सबै छवि सम्पत्ति असिंक्रोनस रूपमा `await` प्रयोग गरेर लोड गर्छ**
+   - **खेल लूप 100ms अन्तरालमा (10 FPS) चलाउन सुरु गर्छ**
+   - **प्रत्येक फ्रेममा सम्पूर्ण स्क्रिन सफा गर्छ र पुनः रेखांकन गर्छ**
+
+5. **कोड थप्नुहोस्** ताकि दुश्मनहरू निश्चित अन्तरालमा सर्नेछन्
+
+    `createEnemies()` function लाई पुनः संरचना गर्नुहोस् ताकि दुश्मनहरू सिर्जना गर्न सकियोस् र तिनीहरूलाई नयाँ gameObjects class मा धकेल्न सकियोस्:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
     
-    र `createHero()` function थप्नुहोस् जसले नायकको लागि यस्तै प्रक्रिया गर्छ।
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
 
+    **दुश्मन सिर्जना के गर्छ:**
+    - **पोजिसन गणना गर्छ** ताकि दुश्मनहरू स्क्रिनको केन्द्रमा राख्न सकियोस्
+    - **दुश्मनहरूको ग्रिड सिर्जना गर्छ** nested loops प्रयोग गरेर
+    - **प्रत्येक दुश्मन वस्तुमा दुश्मन छवि असाइन गर्छ**
+    - **प्रत्येक दुश्मनलाई ग्लोबल खेल वस्तु array मा थप्छ**
+    
+    र `createHero()` function थप्नुहोस् ताकि नायकको लागि पनि यस्तै प्रक्रिया गर्न सकियोस्।
+    
     ```javascript
     function createHero() {
       hero = new Hero(
@@ -405,11 +580,11 @@ npm start
     ```
 
     **नायक सिर्जना के गर्छ:**
-    - **नायकलाई** स्क्रिनको तलको केन्द्रमा स्थान दिन्छ
-    - **नायकको छवि** नायक वस्तुमा असाइन गर्छ
-    - **नायकलाई** खेल वस्तुहरूको array मा थप्छ ताकि rendering गर्न सकियोस्
+    - **नायकलाई स्क्रिनको तल्लो केन्द्रमा पोजिसन गर्छ**
+    - **नायक वस्तुमा नायक छवि असाइन गर्छ**
+    - **नायकलाई खेल वस्तु array मा रेखांकनको लागि थप्छ**
 
-    अन्तमा, `drawGameObjects()` function थप्नुहोस् ताकि drawing सुरु गर्न सकियोस्:
+    अन्तमा, `drawGameObjects()` function थप्नुहोस् ताकि रेखांकन सुरु गर्न सकियोस्:
 
     ```javascript
     function drawGameObjects(ctx) {
@@ -417,12 +592,32 @@ npm start
     }
     ```
 
-    **Drawing function बुझ्ने:**
-    - **Array मा भएका सबै खेल वस्तुहरूमा** iterate गर्छ
-    - **प्रत्येक वस्तुमा** `draw()` method call गर्छ
-    - **Canvas context पास गर्छ** ताकि वस्तुहरूले आफूलाई render गर्न सकून्
-
-    तपाईंका शत्रुहरूले तपाईंको नायकको spaceship तर्फ अगाडि बढ्न सुरु गर्नुपर्छ!
+    **रेखांकन function बुझ्दै:**
+    - **सबै खेल वस्तु array मा iterate गर्छ**
+    - **प्रत्येक वस्तुमा `draw()` method कल गर्छ**
+    - **क्यानभास सन्दर्भ पास गर्छ ताकि वस्तुहरूले आफूलाई रेंडर गर्न सकून्**
+
+    ### 🔄 **शिक्षण चेक-इन**
+    **पूर्ण खेल प्रणाली बुझाइ**: सम्पूर्ण आर्किटेक्चरको मास्टरी प्रमाणित गर्नुहोस्:
+    - ✅ Hero र Enemy ले साझा GameObject गुणहरू कसरी inherit गर्छन्?
+    - ✅ किन pub/sub pattern ले तपाईंको कोडलाई बढी maintainable बनाउँछ?
+    - ✅ खेल लूपले smooth animation सिर्जना गर्न के भूमिका खेल्छ?
+    - ✅ Event listeners कसरी प्रयोगकर्ता इनपुटलाई खेल वस्तु व्यवहारसँग जोड्छन्?
+
+    **सिस्टम एकीकरण**: तपाईंको खेलले अब प्रदर्शन गर्छ:
+    - **Object-Oriented Design**: Base classes संग विशेष inheritance
+    - **Event-Driven Architecture**: Pub/sub pattern loose coupling को लागि
+    - **Animation Framework**: खेल लूप संग consistent frame updates
+    - **Input Handling**: Keyboard events संग default prevention
+    - **Asset Management**: छवि लोडिंग र sprite rendering
+
+    **Professional Patterns**: तपाईंले लागू गर्नुभएको छ:
+    - **Separation of Concerns**: Input, logic, र rendering अलग
+    - **Polymorphism**: सबै खेल वस्तुहरूले साझा रेखांकन interface प्रयोग गर्छन्
+    - **Message Passing**: Components बीच सफा communication
+    - **Resource Management**: Sprite र animation को efficient handling
+
+    तपाईंका दुश्मनहरूले तपाईंको नायक spaceship तर्फ अगाडि बढ्न सुरु गर्नुपर्छ!
       }
     }
     ```
@@ -440,7 +635,7 @@ npm start
     }
     ```
 
-    अन्तमा, `drawGameObjects()` function थप्नुहोस् ताकि drawing सुरु गर्न सकियोस्:
+    अन्तमा, `drawGameObjects()` function थप्नुहोस् ताकि रेखांकन सुरु गर्न सकियोस्:
 
     ```javascript
     function drawGameObjects(ctx) {
@@ -448,37 +643,35 @@ npm start
     }
     ```
 
-    तपाईंका शत्रुहरूले तपाईंको नायकको spaceship तर्फ अगाडि बढ्न सुरु गर्नुपर्छ!
+    तपाईंका दुश्मनहरूले तपाईंको नायक spaceship तर्फ अगाडि बढ्न सुरु गर्नुपर्छ!
 
 ---
 
 ## GitHub Copilot Agent Challenge 🚀
 
-यहाँ एउटा चुनौती छ जसले तपाईंको खेललाई अझ राम्रो बनाउँछ: सीमा र smooth controls थप्ने। अहिले, तपाईंको नायक स्क्रिनबाट बाहिर जान सक्छ, र movement अलि असहज लाग्न सक्छ।
+यहाँ एउटा चुनौती छ जसले तपाईंको खेललाई अझ राम्रो बनाउनेछ: boundaries र smooth controls थप्नु। हाल, तपाईंको नायक स्क्रिनबाट बाहिर जान सक्छ, र movement अलि असहज लाग्न सक्छ।
 
-**तपाईंको मिशन:** तपाईंको spaceship लाई अझ वास्तविक बनाउनुहोस् स्क्रिन सीमा र fluid movement लागू गरेर। यो NASA को flight control systems जस्तै हो जसले spacecraft लाई सुरक्षित operational parameters भन्दा बाहिर जानबाट रोक्छ।
+**तपाईंको मिशन:** तपाईंको spaceship लाई अझ वास्तविक बनाउनुहोस् boundaries लागू गरेर र movement लाई fluid बनाउनुहोस्। जब खेलाडीहरूले arrow key थिच्छन्, जहाजले निरन्तर glide गर्नुपर्छ discrete steps मा सर्ने सट्टा। स्क्रिन boundaries मा पुग्दा subtle effect जस्तै दृश्यात्मक feedback थप्न विचार गर्नुहोस्।
 
-**के बनाउने:** एउटा प्रणाली बनाउनुहोस् जसले तपाईंको नायकको spaceship लाई स्क्रिनमा राख्छ, र controls लाई smooth बनाउँछ। जब खेलाडीहरूले arrow key थिच्छन्, जहाजले discrete steps मा होइन, निरन्तर glide गर्नुपर्छ। स्क्रिन सीमा पुगेपछि subtle effect जस्तै play area को किनारा देखाउने visual feedback थप्न विचार गर्नुहोस्।
-
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा यहाँ थप जान्नुहोस्।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
 
 ## 🚀 Challenge
 
-जसरी परियोजना बढ्छ, कोडको संगठन अझ महत्त्वपूर्ण हुन्छ। तपाईंले आफ्नो फाइल functions, variables, र classes सबै मिसिएको देख्नुभएको हुन सक्छ। यो Apollo mission को कोडलाई व्यवस्थित गर्ने इन्जिनियरहरूले स्पष्ट, maintainable प्रणाली बनाउनु परेको जस्तै हो जसमा धेरै टिमहरूले एकसाथ काम गर्न सकून्।
+जसरी परियोजनाहरू बढ्छन्, कोडको संगठन अझ महत्त्वपूर्ण बन्छ। तपाईंले आफ्नो फाइल functions, variables, र classes संग crowded भएको देख्नुभएको हुन सक्छ। यो Apollo mission को कोडलाई व्यवस्थित गर्ने इन्जिनियरहरूले स्पष्ट, maintainable प्रणालीहरू सिर्जना गर्नुपरेको जस्तै हो।
 
 **तपाईंको मिशन:**
-Software architect जस्तै सोच्नुहोस्। तपाईं आफ्नो कोडलाई कसरी व्यवस्थित गर्नुहुन्छ ताकि छ महिनापछि तपाईं (वा तपाईंको टिममेट) के भइरहेको छ भनेर बुझ्न सकून्? अहिले सबै कुरा एउटै फाइलमा भए पनि, तपाईं राम्रो संगठन बनाउन सक्नुहुन्छ:
+Software architect जस्तै सोच्नुहोस्। तपाईं आफ्नो कोड कसरी व्यवस्थित गर्नुहुन्छ ताकि छ महिनापछि तपाईं (वा तपाईंको सहकर्मी) के भइरहेको छ बुझ्न सकून्? अहिले सबै कुरा एउटै फाइलमा भए पनि, तपाईं राम्रो संगठन सिर्जना गर्न सक्नुहुन्छ:
 
-- **सम्बन्धित functions लाई समूह बनाउने** स्पष्ट comment headers सहित
-- **Concern अलग गर्ने** - खेलको logic र rendering अलग राख्ने
-- **Variables र functions को लागि consistent naming** conventions प्रयोग गर्ने
-- **Modules वा namespaces बनाउने** खेलको विभिन्न पक्षहरू व्यवस्थित गर्न
-- **Documentation थप्ने** जसले प्रत्येक मुख्य भागको उद्देश्य व्याख्या गर्छ
+- **सम्बन्धित functions समूह बनाउनुहोस्** स्पष्ट comment headers संग
+- **Concerns अलग गर्नुहोस्** - खेल logic र rendering अलग राख्नुहोस्
+- **Consistent naming** conventions प्रयोग गर्नुहोस् variables र functions को लागि
+- **Modules वा namespaces सिर्जना गर्नुहोस्** खेलका विभिन्न पक्षहरू व्यवस्थित गर्न
+- **Documentation थप्नुहोस्** जसले प्रत्येक मुख्य भागको उद्देश्य व्याख्या गर्छ
 
 **Reflection questions:**
-- तपाईंको कोडको कुन भागहरू पुन: हेर्दा बुझ्न गाह्रो लाग्छ?
-- तपाईंको कोडलाई कसरी व्यवस्थित गर्न सकिन्छ ताकि अरूले योगदान गर्न सजिलो होस्?
-- यदि तपाईं power-ups वा विभिन्न शत्रु प्रकारहरू जस्ता नयाँ features थप्न चाहनुहुन्छ भने के हुन्छ?
+- तपाईंको कोडको कुन भागहरू पुनः हेर्दा बुझ्न गाह्रो लाग्छ?
+- तपाईंको कोड कसरी व्यवस्थित गर्न सकिन्छ ताकि अरूले योगदान दिन सजिलो होस्?
+- यदि तपाईंले power-ups वा विभिन्न दुश्मन प्रकारहरू जस्ता नयाँ सुविधाहरू थप्न चाहनुभयो भने के हुनेछ?
 
 ## Post-Lecture Quiz
 
@@ -486,16 +679,137 @@ Software architect जस्तै सोच्नुहोस्। तपा
 
 ## Review & Self Study
 
-हामीले सबै कुरा scratch बाट बनाउँदै आएका छौं, जुन सिक्नको लागि उत्कृष्ट छ, तर यहाँ एउटा सानो रहस्य छ – त्यहाँ केही अद्भुत JavaScript frameworks छन् जसले तपाईंको लागि धेरै काम गर्न सक्छ। हामीले कभर गरेका fundamentals मा सहज महसुस गरेपछि, [के उपलब्ध छ](https://github.com/collections/javascript-game-engines) भनेर अन्वेषण गर्नु लायक छ।
+हामीले सबै कुरा scratch बाट निर्माण गरेका छौं, जुन सिकाइको लागि उत्कृष्ट छ, तर यहाँ एउटा सानो रहस्य छ – त्यहाँ केही अद्भुत JavaScript frameworks छन् जसले तपाईंको लागि धेरै काम गर्न सक्छ। हामीले कभर गरेका आधारभूत कुराहरूमा सहज महसुस गरेपछि, [के उपलब्ध छ](https://github.com/collections/javascript-game-engines) अन्वेषण गर्न लायक छ।
 
-Frameworks लाई सोच्नुहोस् जस्तै राम्रोसँग भरिएको toolbox जसले प्रत्येक उपकरण हातले बनाउनुको सट्टा प्रदान गर्छ। तिनीहरूले ती कोड संगठन चुनौतीहरूको समाधान गर्न सक्छन् जुन हामीले कुरा गरेका थियौं, साथै तपाईंले आफैं बनाउन हप्ताहरू लाग्ने features पनि प्रदान गर्न सक्छन्।
+Frameworks लाई सोच्नुहोस् जस्तै राम्रोसँग भरिएको toolbox जसले प्रत्येक उपकरण हातले बनाउनुको सट्टा प्रदान गर्छ। तिनीहरूले हामीले चर्चा गरेका कोड संगठन चुनौतीहरूको समाधान गर्न सक्छन्, साथै त्यस्ता सुविधाहरू प्रदान गर्छन् जसलाई आफैं निर्माण गर्न हप्ताहरू लाग्न सक्छ।
 
 **अन्वेषण गर्न लायक कुराहरू:**
-- खेल इन्जिनहरूले कोडलाई कसरी व्यवस्थित गर्छन् – तपाईं clever patterns देखेर चकित हुनुहुनेछ
-- Canvas खेलहरूलाई butter-smooth चलाउनका लागि performance tricks  
-- Modern JavaScript features जसले तपाईंको कोडलाई सफा र maintainable बनाउँछ
+- खेल इन्जिनहरूले कोड कसरी व्यवस्थित गर्छन् – तपाईं तिनीहरूको चतुर patterns देखेर अचम्मित हुनुहुनेछ
+- Canvas खेलहरू butter-smooth चलाउनको लागि performance tricks  
+- Modern JavaScript सुविधाहरू जसले तपाईंको कोडलाई सफा र maintainable बनाउँछ
 - खेल वस्तुहरू र तिनीहरूको सम्बन्ध व्यवस्थापन गर्ने विभिन्न दृष्टिकोणहरू
 
+## 🎯 Your Game Animation Mastery Timeline
+
+```mermaid
+timeline
+    title Game Animation & Interaction Learning Progression
+    
+    section Movement Fundamentals (20 minutes)
+        Animation Principles: Frame-based animation
+                            : Position updates
+                            : Coordinate systems
+                            : Smooth movement
+        
+    section Event Systems (25 minutes)
+        User Input: Keyboard event handling
+                  : Default behavior prevention
+                  : Event object properties
+                  : Window-level listening
+        
+    section Game Architecture (30 minutes)
+        Object Design: Inheritance patterns
+                     : Base class creation
+                     : Specialized behaviors
+                     : Polymorphic interfaces
+        
+    section Communication Patterns (35 minutes)
+        Pub/Sub Implementation: Event emitters
+                              : Message constants
+                              : Loose coupling
+                              : System integration
+        
+    section Game Loop Mastery (40 minutes)
+        Real-time Systems: Frame rate control
+                         : Update/render cycle
+                         : State management
+                         : Performance optimization
+        
+    section Advanced Techniques (45 minutes)
+        Professional Features: Collision detection
+                             : Physics simulation
+                             : State machines
+                             : Component systems
+        
+    section Game Engine Concepts (1 week)
+        Framework Understanding: Entity-component systems
+                               : Scene graphs
+                               : Asset pipelines
+                               : Performance profiling
+        
+    section Production Skills (1 month)
+        Professional Development: Code organization
+                                : Team collaboration
+                                : Testing strategies
+                                : Deployment optimization
+```
+
+### 🛠️ Your Game Development Toolkit Summary
+
+यो पाठ पूरा गरेपछि, तपाईंले अब मास्टर गर्नुभएको छ:
+- **Animation Principles**: Frame-based movement र smooth transitions
+- **Event-Driven Programming**: Keyboard input handling सही event management संग
+- **Object-Oriented Design**: Inheritance hierarchies र polymorphic interfaces
+- **Communication Patterns**: Pub/sub architecture maintainable code को लागि
+- **Game Loop Architecture**: Real-time update र rendering cycles
+- **Input Systems**: प्रयोगकर्ता नियन्त्रण mapping default behavior रोकथाम सहित
+- **Asset Management**: Sprite लोडिंग र efficient rendering techniques
+
+### ⚡ **What You Can Do in the Next 5 Minutes**
+- [ ] Browser console खोल्नुहोस् र `addEventListener('keydown', console.log)` प्रयोग गरेर keyboard events हेर्नुहोस्
+- [ ] एउटा साधारण div element सिर्जना गर्नुहोस् र arrow keys प्रयोग गरेर यसलाई घुमाउनुहोस्
+- [ ] `setInterval` प्रयोग गरेर निरन्तर movement सिर्जना गर्नुहोस्
+- [ ] `event.preventDefault()` प्रयोग गरेर default behavior रोक्न प्रयास गर्नुहोस्
+
+### 🎯 **What You Can Accomplish This Hour**
+- [ ] Post-lesson quiz पूरा गर्नुहोस् र event-driven programming बुझ्नुहोस्
+- [ ] पूर्ण keyboard controls सहित चल्ने नायक spaceship निर्माण गर्नुहोस्
+- [ ] दुश्मन movement patterns लागू गर्नुहोस्
+- [ ] खेल वस्तुहरूलाई स्क्रिनबाट बाहिर जानबाट रोक्न boundaries थप्नुहोस्
+- [ ] खेल वस्तुहरू बीच basic collision detection सिर्जना गर्नुहोस्
+
+### 📅 **Your Week-Long Animation Journey**
+- [ ] Polished movement र interactions सहित पूर्ण space खेल पूरा गर्नुहोस्
+- [ ] Curves, acceleration, र physics जस्ता advanced movement patterns थप्नुहोस्
+- [ ] Smooth transitions र easing functions लागू गर्नुहोस्
+- [ ] Particle effects र visual feedback systems सिर्जना गर्नुहोस्
+- [ ] खेल performance optimize गर्नुहोस् ताकि smooth 60fps gameplay होस्
+- [ ] Mobile touch controls र responsive design थप्नुहोस्
+
+### 🌟 **Your Month-Long Interactive Development**
+- [ ] Advanced animation systems सहित जटिल interactive applications निर्माण गर्नुहोस्
+- [ ] GSAP जस्ता animation libraries सिक्नुहोस् वा आफ्नो animation engine सिर्जना गर्नुहोस्
+- [ ] Open source खेल विकास र animation परियोजनाहरूमा योगदान गर्नुहोस्
+- [ ] Graphics-intensive applications को लागि performance optimization मास्टर गर्नुहोस्
+- [ ] खेल विकास र animation को बारेमा शैक्षिक सामग्री सिर्जना गर्नुहोस्
+- [ ] Advanced interactive programming skills प्रदर्शन गर्ने portfolio निर्माण गर्नुहोस्
+
+**Real-World Applications**: तपाईंको खेल animation skills सीधा लागू हुन्छ:
+- **Interactive Web Applications**: Dynamic dashboards र real-time interfaces
+- **Data Visualization**: Animated charts र interactive graphics
+- **Educational Software**: Interactive simulations र learning tools
+- **Mobile Development**: Touch-based खेलहरू र gesture handling
+- **Desktop Applications**: Electron apps smooth animations सहित
+- **Web Animations**: CSS र JavaScript animation libraries
+
+**Professional Skills Gained**: तपाईं अब सक्षम हुनुहुन्छ:
+- **Architect** event-driven systems जसले complexity संग scale गर्छ
+- **Implement** smooth animations mathematical principles प्रयोग गरेर
+- **Debug** complex interaction systems browser developer tools प्रयोग गरेर
+- **Optimize** खेल performance विभिन्न devices र browsers को लागि
+- **Design** maintainable code structures proven patterns प्रयोग गरेर
+
+**Game Development Concepts Mastered**:
+- **Frame Rate Management**: FPS र timing controls बुझ्दै
+- **Input Handling**: Cross-platform keyboard र event systems
+- **Object Lifecycle**: Creation, update, र destruction patterns
+- **State Synchronization**: Frames बीच खेल state consistent राख्दै
+- **Event Architecture**: खेल प्रणालीहरू बीच decoupled communication
+
+**Next Level**: तपाईं collision detection, scoring systems, sound effects थप्न तयार हुनुहुन्छ वा Phaser वा Three.js जस्ता आधुनिक खेल frameworks अन्वेषण गर्न सक्नुहुन्छ!
+
+🌟 **Achievement Unlocked**: तपाईंले professional architecture patterns सहित पूर्ण interactive खेल प्रणाली निर्माण गर्नुभएको छ!
+
 ## Assignment
 
 [Comment your code](assignment.md)
@@ -503,4 +817,4 @@ Frameworks लाई सोच्नुहोस् जस्तै राम्
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/6-space-game/4-collision-detection/README.md b/translations/ne/6-space-game/4-collision-detection/README.md
index 069e65c788..fc7d4312ac 100644
--- a/translations/ne/6-space-game/4-collision-detection/README.md
+++ b/translations/ne/6-space-game/4-collision-detection/README.md
@@ -1,35 +1,105 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "4b1d441cfd31924084956000c0fee5a5",
-  "translation_date": "2025-10-22T17:15:03+00:00",
+  "original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
+  "translation_date": "2025-11-03T15:53:27+00:00",
   "source_file": "6-space-game/4-collision-detection/README.md",
   "language_code": "ne"
 }
 -->
 # स्पेस गेम बनाउनुहोस् भाग ४: लेजर थप्नुहोस् र टक्कर पत्ता लगाउनुहोस्
 
+```mermaid
+journey
+    title Your Collision Detection Journey
+    section Physics Foundation
+      Understand rectangles: 3: Student
+      Learn intersection math: 4: Student
+      Grasp coordinate systems: 4: Student
+    section Game Mechanics
+      Implement laser firing: 4: Student
+      Add object lifecycle: 5: Student
+      Create collision rules: 5: Student
+    section System Integration
+      Build collision detection: 5: Student
+      Optimize performance: 5: Student
+      Test interaction systems: 5: Student
+```
+
 ## प्रि-लेक्चर क्विज
 
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/35)
 
-स्टार वार्सको त्यो क्षण सम्झनुहोस् जब लुकको प्रोटोन टार्पिडोले डेथ स्टारको एक्जस्ट पोर्टलाई हान्यो। त्यो सटीक टक्करले ग्यालेक्सीको भाग्य परिवर्तन गर्यो! खेलहरूमा, टक्कर पत्ता लगाउने प्रणाली पनि त्यस्तै काम गर्छ - यो वस्तुहरू कहिले अन्तरक्रिया गर्छन् र त्यसपछि के हुन्छ भनेर निर्धारण गर्छ।
-
-यस पाठमा, तपाईं आफ्नो स्पेस गेममा लेजर हतियारहरू थप्नुहुनेछ र टक्कर पत्ता लगाउने प्रणाली कार्यान्वयन गर्नुहुनेछ। नासाको मिशन योजनाकारहरूले अन्तरिक्ष यानको मार्गहरू मलबा टार्न गणना गरेजस्तै, तपाईं खेलका वस्तुहरू कहिले एकअर्कासँग ठोक्किन्छन् भनेर पत्ता लगाउन सिक्नुहुनेछ। हामी यसलाई व्यवस्थित चरणहरूमा तोड्नेछौं जसले एकअर्कालाई निर्माण गर्छ।
-
-पाठको अन्त्यसम्ममा, तपाईंको खेलमा लेजरहरूले शत्रुहरूलाई नष्ट गर्ने र टक्करहरूले खेलका घटनाहरू ट्रिगर गर्ने कार्य प्रणाली हुनेछ। यी समान टक्कर सिद्धान्तहरू भौतिक विज्ञानको सिमुलेशनदेखि अन्तरक्रियात्मक वेब इन्टरफेससम्म सबैमा प्रयोग गरिन्छ।
+स्टार वार्सको त्यो क्षण सम्झनुहोस् जब लुकको प्रोटोन टार्पिडोले डेथ स्टारको एक्जस्ट पोर्टलाई हान्यो। त्यो सटीक टक्कर पत्ता लगाउने क्षणले ग्यालेक्सीको भाग्य परिवर्तन गर्यो! खेलहरूमा, टक्कर पत्ता लगाउने प्रणालीले वस्तुहरू कहिले अन्तरक्रिया गर्छन् र त्यसपछि के हुन्छ भनेर निर्धारण गर्छ।
+
+यस पाठमा, तपाईं आफ्नो स्पेस गेममा लेजर हतियारहरू थप्नुहुनेछ र टक्कर पत्ता लगाउने प्रणाली कार्यान्वयन गर्नुहुनेछ। नासाको मिशन योजनाकारहरूले अन्तरिक्ष यानको मार्गहरू मलबा टार्न गणना गरेजस्तै, तपाईं खेलका वस्तुहरू कहिले एकअर्कासँग ठोक्किन्छन् भनेर पत्ता लगाउन सिक्नुहुनेछ। हामी यसलाई सुलभ चरणहरूमा विभाजन गर्नेछौं जसले एकअर्कामा निर्माण गर्छ।
+
+पाठको अन्त्यसम्ममा, तपाईंको खेलमा लेजरहरूले शत्रुहरूलाई नष्ट गर्ने र टक्करहरूले खेलका घटनाहरू ट्रिगर गर्ने कार्य प्रणाली हुनेछ। यी समान टक्कर सिद्धान्तहरू भौतिक विज्ञानको सिमुलेशनदेखि इन्टरएक्टिभ वेब इन्टरफेससम्म प्रयोग गरिन्छ।
+
+```mermaid
+mindmap
+  root((Collision Detection))
+    Physics Concepts
+      Rectangle Boundaries
+      Intersection Testing
+      Coordinate Systems
+      Separation Logic
+    Game Objects
+      Laser Projectiles
+      Enemy Ships
+      Hero Character
+      Collision Zones
+    Lifecycle Management
+      Object Creation
+      Movement Updates
+      Destruction Marking
+      Memory Cleanup
+    Event Systems
+      Keyboard Input
+      Collision Events
+      Game State Changes
+      Audio/Visual Effects
+    Performance
+      Efficient Algorithms
+      Frame Rate Optimization
+      Memory Management
+      Spatial Partitioning
+```
 
-✅ पहिलो कम्प्युटर गेम कहिले लेखिएको थियो भनेर थोरै अनुसन्धान गर्नुहोस्। यसको कार्यक्षमता के थियो?
+✅ पहिलो कम्प्युटर गेम कहिले लेखिएको थियो भनेर थाहा पाउन थोरै अनुसन्धान गर्नुहोस्। यसको कार्यक्षमता के थियो?
 
 ## टक्कर पत्ता लगाउने प्रणाली
 
-टक्कर पत्ता लगाउने प्रणाली अपोलो चन्द्रमा मोड्युलको नजिकको सेन्सरहरू जस्तै काम गर्छ - यो लगातार दूरीहरू जाँच गर्छ र वस्तुहरू धेरै नजिक आउँदा चेतावनी दिन्छ। खेलहरूमा, यो प्रणालीले वस्तुहरू कहिले अन्तरक्रिया गर्छन् र त्यसपछि के हुन्छ भनेर निर्धारण गर्छ।
+टक्कर पत्ता लगाउने प्रणाली अपोलो चन्द्रमा मोड्युलको नजिकको सेन्सरहरू जस्तै काम गर्छ - यो लगातार दूरी जाँच गर्छ र वस्तुहरू धेरै नजिक आउँदा चेतावनी दिन्छ। खेलहरूमा, यो प्रणालीले वस्तुहरू कहिले अन्तरक्रिया गर्छन् र त्यसपछि के हुन्छ भनेर निर्धारण गर्छ।
 
-हामीले प्रयोग गर्ने विधिले प्रत्येक खेलको वस्तुलाई आयतको रूपमा व्यवहार गर्छ, जस्तै हवाई यातायात नियन्त्रण प्रणालीहरूले विमान ट्र्याक गर्न सरल ज्यामितीय आकारहरू प्रयोग गर्छन्। यो आयत विधि आधारभूत लाग्न सक्छ, तर यो गणनात्मक रूपमा प्रभावकारी छ र अधिकांश खेल परिदृश्यहरूको लागि राम्रोसँग काम गर्छ।
+हामीले प्रयोग गर्ने विधिले प्रत्येक खेलको वस्तुलाई आयतको रूपमा व्यवहार गर्छ, जस्तै हवाई यातायात नियन्त्रण प्रणालीहरूले विमान ट्र्याक गर्न सरल ज्यामितीय आकारहरू प्रयोग गर्छ। यो आयताकार विधि आधारभूत देखिन सक्छ, तर यो कम्प्युटेशनल रूपमा प्रभावकारी छ र अधिकांश खेल परिदृश्यहरूमा राम्रोसँग काम गर्छ।
 
 ### आयतको प्रतिनिधित्व
 
-प्रत्येक खेलको वस्तुमा समन्वय सीमा आवश्यक छ, जस्तै मर्स पाथफाइन्डर रोभरले मर्सको सतहमा आफ्नो स्थान म्याप गरेको थियो। यहाँ हामीले यी सीमा समन्वयहरू कसरी परिभाषित गर्छौं:
+प्रत्येक खेलको वस्तुलाई समन्वय सीमा चाहिन्छ, जस्तै मर्स पाथफाइन्डर रोभरले मर्सको सतहमा आफ्नो स्थान म्याप गर्यो। यहाँ हामीले यी सीमा समन्वयहरू कसरी परिभाषित गर्छौं:
+
+```mermaid
+flowchart TD
+    A["🎯 Game Object"] --> B["📍 Position (x, y)"]
+    A --> C["📏 Dimensions (width, height)"]
+    
+    B --> D["Top: y"]
+    B --> E["Left: x"]
+    
+    C --> F["Bottom: y + height"]
+    C --> G["Right: x + width"]
+    
+    D --> H["🔲 Rectangle Bounds"]
+    E --> H
+    F --> H
+    G --> H
+    
+    H --> I["Collision Detection Ready"]
+    
+    style A fill:#e3f2fd
+    style H fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 ```javascript
 rectFromGameObject() {
@@ -42,15 +112,38 @@ rectFromGameObject() {
 }
 ```
 
-**यसलाई तोडेर बुझौं:**
-- **माथिल्लो किनारा**: यो वस्तु ठ्याक्कै कहाँबाट ठाडो रूपमा सुरु हुन्छ (यसको y स्थिति)
+**यसलाई टुक्रा-टुक्रामा बुझौं:**
+- **माथिल्लो किनारा**: यो वस्तु कहाँबाट ठाडो रूपमा सुरु हुन्छ (यसको y स्थिति)
 - **बायाँ किनारा**: यो वस्तु कहाँबाट तेर्सो रूपमा सुरु हुन्छ (यसको x स्थिति)
-- **तल्लो किनारा**: y स्थितिमा उचाइ थप्नुहोस् - अब तपाईंलाई यो कहाँ समाप्त हुन्छ थाहा छ!
+- **तल्लो किनारा**: y स्थितिमा उचाइ थप्नुहोस् - अब तपाईंलाई थाहा छ यो कहाँ समाप्त हुन्छ!
 - **दायाँ किनारा**: x स्थितिमा चौडाइ थप्नुहोस् - र तपाईंले पूर्ण सीमा पाउनुभयो।
 
-### अन्तरालको एल्गोरिदम
+### अन्तरक्रिया एल्गोरिदम
 
-आयतको अन्तराल पत्ता लगाउने प्रणाली हबल स्पेस टेलिस्कोपले आफ्नो दृश्य क्षेत्रमा आकाशीय वस्तुहरू ओभरल्याप गरिरहेका छन् कि छैनन् भनेर निर्धारण गर्ने तरिकासँग मिल्दोजुल्दो तर्क प्रयोग गर्छ। एल्गोरिदमले छुट्टै परीक्षण गर्छ:
+आयतको अन्तरक्रिया पत्ता लगाउने प्रणाली हबल स्पेस टेलिस्कोपले आफ्नो दृश्य क्षेत्रमा खगोलीय वस्तुहरू ओभरल्याप गरिरहेका छन् कि छैनन् भनेर निर्धारण गर्ने तरिकासँग मिल्दोजुल्दो तर्क प्रयोग गर्छ। एल्गोरिदमले छुट्टै परीक्षण गर्छ:
+
+```mermaid
+flowchart LR
+    A["Rectangle 1"] --> B{"Separation Tests"}
+    C["Rectangle 2"] --> B
+    
+    B --> D["R2 left > R1 right?"]
+    B --> E["R2 right < R1 left?"]
+    B --> F["R2 top > R1 bottom?"]
+    B --> G["R2 bottom < R1 top?"]
+    
+    D --> H{"Any True?"}
+    E --> H
+    F --> H
+    G --> H
+    
+    H -->|Yes| I["❌ No Collision"]
+    H -->|No| J["✅ Collision Detected"]
+    
+    style B fill:#e3f2fd
+    style I fill:#ffebee
+    style J fill:#e8f5e8
+```
 
 ```javascript
 function intersectRect(r1, r2) {
@@ -61,7 +154,7 @@ function intersectRect(r1, r2) {
 }
 ```
 
-**छुट्टै परीक्षण राडार प्रणाली जस्तै काम गर्छ:**
+**छुट्टै परीक्षण राडार प्रणालीजस्तै काम गर्छ:**
 - के आयत २ पूर्ण रूपमा आयत १ को दायाँ छ?
 - के आयत २ पूर्ण रूपमा आयत १ को बायाँ छ?
 - के आयत २ पूर्ण रूपमा आयत १ को तल छ?
@@ -71,9 +164,31 @@ function intersectRect(r1, r2) {
 
 ## वस्तुहरूको जीवनचक्र व्यवस्थापन
 
-जब लेजरले शत्रुलाई हान्छ, दुबै वस्तुहरू खेलबाट हटाउन आवश्यक छ। तर, लूपको बीचमा वस्तुहरू मेट्दा क्र्यास हुन सक्छ - अपोलो गाइडेन्स कम्प्युटर जस्ता प्रारम्भिक कम्प्युटर प्रणालीहरूमा सिकिएको पाठ। यसको सट्टा, हामी "मेट्नको लागि चिन्ह लगाउने" विधि प्रयोग गर्छौं जसले फ्रेमहरू बीच सुरक्षित रूपमा वस्तुहरू हटाउँछ।
+जब लेजरले शत्रुलाई हान्छ, दुबै वस्तुहरू खेलबाट हटाउनुपर्छ। तर, लूपको बीचमा वस्तुहरू मेट्दा क्र्यास हुन सक्छ - अपोलो गाइडेन्स कम्प्युटरजस्ता प्रारम्भिक कम्प्युटर प्रणालीहरूमा सिकिएको पाठ। यसको सट्टा, हामी "मेट्नका लागि चिन्ह लगाउने" विधि प्रयोग गर्छौं जसले फ्रेमहरू बीचमा वस्तुहरू सुरक्षित रूपमा हटाउँछ।
+
+```mermaid
+stateDiagram-v2
+    [*] --> Active: Object Created
+    Active --> Collided: Collision Detected
+    Collided --> MarkedDead: Set dead = true
+    MarkedDead --> Filtered: Next Frame
+    Filtered --> [*]: Object Removed
+    
+    Active --> OutOfBounds: Leaves Screen
+    OutOfBounds --> MarkedDead
+    
+    note right of MarkedDead
+        Safe to continue
+        current frame
+    end note
+    
+    note right of Filtered
+        Objects removed
+        between frames
+    end note
+```
 
-यहाँ हामी कसरी मेट्नको लागि चिन्ह लगाउँछौं:
+यहाँ हामी कसरी मेट्नका लागि चिन्ह लगाउँछौं:
 
 ```javascript
 // Mark object for removal
@@ -81,11 +196,11 @@ enemy.dead = true;
 ```
 
 **यो विधि किन काम गर्छ:**
-- हामी वस्तुलाई "मरेको" भनेर चिन्ह लगाउँछौं तर तुरुन्तै मेट्दैनौं।
+- हामी वस्तुलाई "मृत" भनेर चिन्ह लगाउँछौं तर तुरुन्तै मेट्दैनौं।
 - यसले हालको खेल फ्रेमलाई सुरक्षित रूपमा समाप्त गर्न दिन्छ।
 - पहिले नै मेटिएको वस्तु प्रयोग गर्न खोज्दा कुनै क्र्यास हुँदैन!
 
-अनि अर्को रेंडर चक्र अघि चिन्ह लगाइएका वस्तुहरू फिल्टर गर्नुहोस्:
+त्यसपछि अर्को रेंडर चक्र अघि चिन्ह लगाइएका वस्तुहरू फिल्टर गर्नुहोस्:
 
 ```javascript
 gameObjects = gameObjects.filter(go => !go.dead);
@@ -93,27 +208,52 @@ gameObjects = gameObjects.filter(go => !go.dead);
 
 **यो फिल्टरले के गर्छ:**
 - केवल "जिउँदो" वस्तुहरू भएको नयाँ सूची बनाउँछ।
-- "मरेको" भनेर चिन्ह लगाइएका वस्तुहरू हटाउँछ।
-- तपाईंको खेललाई सहज रूपमा चलाउँछ।
+- "मृत" भनेर चिन्ह लगाइएका वस्तुहरू हटाउँछ।
+- तपाईंको खेललाई सहज रूपमा चलाउन मद्दत गर्छ।
 - नष्ट गरिएका वस्तुहरूबाट मेमोरी बृद्धि रोक्छ।
 
-## लेजर यान्त्रिकी कार्यान्वयन
+## लेजर मेकानिक्स कार्यान्वयन
 
-खेलहरूमा लेजर प्रोजेक्टाइलहरू स्टार ट्रेकका फोटोन टार्पिडोहरू जस्तै काम गर्छन् - ती छुट्टै वस्तुहरू हुन् जो सीधा रेखामा यात्रा गर्छन् जबसम्म तिनीहरूले केही हान्दैनन्। प्रत्येक स्पेसबार थिच्दा नयाँ लेजर वस्तु सिर्जना हुन्छ जुन स्क्रिनमा सर्छ।
+खेलहरूमा लेजर प्रोजेक्टाइलहरू स्टार ट्रेकको फोटोन टार्पिडोजजस्तै काम गर्छन् - ती छुट्टै वस्तुहरू हुन् जो सीधा रेखामा यात्रा गर्छन् जबसम्म तिनीहरूले केही हान्दैनन्। प्रत्येक स्पेसबार प्रेसले नयाँ लेजर वस्तु सिर्जना गर्छ जुन स्क्रिनमा सर्छ।
 
-यसलाई काम गर्न बनाउन, हामीले केही फरक टुक्राहरू समन्वय गर्न आवश्यक छ:
+यसलाई काम गर्न बनाउन, हामीले केही फरक टुक्राहरू समन्वय गर्नुपर्छ:
 
 **कार्यान्वयन गर्नका लागि मुख्य घटकहरू:**
 - **सिर्जना गर्नुहोस्** लेजर वस्तुहरू जो नायकको स्थितिबाट उत्पन्न हुन्छन्।
-- **ह्यान्डल गर्नुहोस्** किबोर्ड इनपुटले लेजर सिर्जना ट्रिगर गर्छ।
+- **ह्यान्डल गर्नुहोस्** कीबोर्ड इनपुटले लेजर सिर्जना ट्रिगर गर्छ।
 - **व्यवस्थापन गर्नुहोस्** लेजरको गति र जीवनचक्र।
 - **लेजर प्रोजेक्टाइलहरूको दृश्य प्रतिनिधित्व कार्यान्वयन गर्नुहोस्।**
 
 ## फायरिङ दर नियन्त्रण कार्यान्वयन
 
-असीमित फायरिङ दरले खेल इन्जिनलाई अभिभूत पार्नेछ र खेललाई धेरै सजिलो बनाउनेछ। वास्तविक हतियार प्रणालीहरूले यस्तै सीमाहरू सामना गर्छन् - USS एंटरप्राइजका फेजरहरूलाई पनि शटहरू बीच रिचार्ज गर्न समय चाहिन्थ्यो।
+असीमित फायरिङ दरले खेल इन्जिनलाई ओभरलोड गर्नेछ र खेललाई धेरै सजिलो बनाउनेछ। वास्तविक हतियार प्रणालीहरूले यस्तै सीमाहरू सामना गर्छन् - USS एंटरप्राइजको फेजरहरूलाई पनि शटहरू बीचमा रिचार्ज गर्न समय चाहिन्थ्यो।
 
-हामी एक कूलडाउन प्रणाली कार्यान्वयन गर्नेछौं जसले स्प्याम फायरिङ रोक्छ जबकि उत्तरदायी नियन्त्रणहरू कायम राख्छ:
+हामी एक कूलडाउन प्रणाली कार्यान्वयन गर्नेछौं जसले स्प्यामिङ रोक्छ तर उत्तरदायी नियन्त्रणहरू कायम राख्छ:
+
+```mermaid
+sequenceDiagram
+    participant Player
+    participant Weapon
+    participant Cooldown
+    participant Game
+    
+    Player->>Weapon: Press Spacebar
+    Weapon->>Cooldown: Check if cool
+    
+    alt Weapon is Ready
+        Cooldown->>Weapon: cool = true
+        Weapon->>Game: Create Laser
+        Weapon->>Cooldown: Start new cooldown
+        Cooldown->>Cooldown: cool = false
+        
+        Note over Cooldown: Wait 500ms
+        
+        Cooldown->>Cooldown: cool = true
+    else Weapon is Cooling
+        Cooldown->>Weapon: cool = false
+        Weapon->>Player: No action
+    end
+```
 
 ```javascript
 class Cooldown {
@@ -144,30 +284,46 @@ class Weapon {
 **कूलडाउन कसरी काम गर्छ:**
 - सिर्जना गर्दा, हतियार "तातो" हुन्छ (अहिलेसम्म फायर गर्न सक्दैन)।
 - टाइमआउट अवधि पछि, यो "चिसो" हुन्छ (फायर गर्न तयार)।
-- फायरिङ अघि, हामी जाँच गर्छौं: "के हतियार चिसो छ?"
-- यसले स्प्याम-क्लिकिङ रोक्छ जबकि नियन्त्रणहरू उत्तरदायी राख्छ।
+- फायर गर्नु अघि, हामी जाँच गर्छौं: "के हतियार चिसो छ?"
+- यसले स्प्याम-क्लिकिङ रोक्छ तर नियन्त्रणहरू उत्तरदायी राख्छ।
 
 ✅ स्पेस गेम श्रृंखलाको पाठ १ मा फर्केर कूलडाउनको बारेमा सम्झनुहोस्।
 
-## टक्कर प्रणाली निर्माण गर्नुहोस्
+## टक्कर प्रणाली निर्माण
 
-तपाईं आफ्नो स्पेस गेमको कोडलाई टक्कर पत्ता लगाउने प्रणाली सिर्जना गर्न विस्तार गर्नुहुनेछ। अन्तर्राष्ट्रिय स्पेस स्टेशनको स्वचालित टक्कर टार्ने प्रणाली जस्तै, तपाईंको खेलले निरन्तर वस्तुहरूको स्थिति अनुगमन गर्नेछ र अन्तरालहरूमा प्रतिक्रिया दिनेछ।
+तपाईं आफ्नो स्पेस गेमको कोडलाई टक्कर पत्ता लगाउने प्रणाली सिर्जना गर्न विस्तार गर्नुहुनेछ। अन्तर्राष्ट्रिय स्पेस स्टेशनको स्वचालित टक्कर टार्ने प्रणालीजस्तै, तपाईंको खेलले निरन्तर वस्तुहरूको स्थिति अनुगमन गर्नेछ र अन्तरक्रियामा प्रतिक्रिया दिनेछ।
 
 तपाईंको अघिल्लो पाठको कोडबाट सुरु गर्दै, तपाईं टक्कर पत्ता लगाउने प्रणाली थप्नुहुनेछ जसले वस्तु अन्तरक्रियालाई शासित गर्ने विशिष्ट नियमहरू समावेश गर्दछ।
 
-> 💡 **प्रो टिप**: लेजर स्प्राइट पहिले नै तपाईंको सम्पत्ति फोल्डरमा समावेश गरिएको छ र तपाईंको कोडमा सन्दर्भ गरिएको छ, कार्यान्वयनको लागि तयार।
+> 💡 **प्रो टिप**: लेजर स्प्राइट पहिले नै तपाईंको एसेट्स फोल्डरमा समावेश गरिएको छ र तपाईंको कोडमा सन्दर्भ गरिएको छ, कार्यान्वयनको लागि तयार।
 
-### कार्यान्वयन गर्न टक्कर नियमहरू
+### कार्यान्वयन गर्नका लागि टक्कर नियमहरू
 
-**खेल यान्त्रिकी थप्नका लागि:**
+**खेल यान्त्रिकी थप्नुहोस्:**
 1. **लेजरले शत्रुलाई हान्छ**: लेजर प्रोजेक्टाइलले हान्दा शत्रु वस्तु नष्ट हुन्छ।
 2. **लेजर स्क्रिनको सीमा हान्छ**: स्क्रिनको माथिल्लो किनारमा पुग्दा लेजर हटाइन्छ।
 3. **शत्रु र नायकको टक्कर**: दुबै वस्तुहरू ठोक्किँदा नष्ट हुन्छन्।
-4. **शत्रु तल पुग्छ**: स्क्रिनको तल शत्रुहरू पुग्दा खेल समाप्त हुने अवस्था।
+4. **शत्रु तल पुग्छ**: शत्रुहरू स्क्रिनको तल पुग्दा खेल समाप्त हुने अवस्था।
+
+### 🔄 **शैक्षिक जाँच**
+**टक्कर पत्ता लगाउने आधार**: कार्यान्वयन गर्नु अघि सुनिश्चित गर्नुहोस् कि तपाईं बुझ्नुहुन्छ:
+- ✅ आयत सीमा कसरी टक्कर क्षेत्रहरू परिभाषित गर्छ।
+- ✅ किन छुट्टै परीक्षण अन्तरक्रिया गणनाभन्दा बढी प्रभावकारी छ।
+- ✅ खेल लूपमा वस्तु जीवनचक्र व्यवस्थापनको महत्त्व।
+- ✅ टक्कर प्रतिक्रियाहरू समन्वय गर्न घटनाचालित प्रणालीहरू कसरी काम गर्छन्।
+
+**छोटो आत्म-परीक्षण**: यदि तपाईंले वस्तुहरू तुरुन्तै मेट्नुभयो भने के हुन्छ?
+*उत्तर: लूपको बीचमा मेट्दा क्र्यास हुन सक्छ वा वस्तुहरू पुनरावृत्तिमा छुट्न सक्छ।*
+
+**भौतिक विज्ञानको समझ**: तपाईंले अब बुझ्नुभयो:
+- **समन्वय प्रणालीहरू**: स्थिति र आयामहरूले सीमा कसरी सिर्जना गर्छ।
+- **अन्तरक्रिया तर्क**: टक्कर पत्ता लगाउने पछाडि गणितीय सिद्धान्तहरू।
+- **प्रदर्शन अनुकूलन**: वास्तविक समय प्रणालीहरूमा प्रभावकारी एल्गोरिदम किन महत्त्वपूर्ण छन्।
+- **मेमोरी व्यवस्थापन**: स्थिरताका लागि सुरक्षित वस्तु जीवनचक्र ढाँचाहरू।
 
 ## तपाईंको विकास वातावरण सेटअप गर्नुहोस्
 
-राम्रो समाचार - हामीले तपाईंको लागि अधिकांश आधारभूत संरचना पहिले नै सेटअप गरिसकेका छौं! तपाईंको सबै खेल सम्पत्ति र आधारभूत संरचना `your-work` सबफोल्डरमा पर्खिरहेका छन्, तपाईंले चाखलाग्दो टक्कर सुविधाहरू थप्न तयार।
+खुसीको कुरा - हामीले तपाईंका लागि अधिकांश आधारभूत संरचना पहिले नै सेटअप गरिसकेका छौं! तपाईंका सबै खेल एसेट्स र आधारभूत संरचना `your-work` सबफोल्डरमा छन्, तपाईंले टक्करका उत्कृष्ट विशेषताहरू थप्न तयार।
 
 ### परियोजना संरचना
 
@@ -181,12 +337,12 @@ class Weapon {
 -| package.json
 ```
 
-**फाइल संरचना बुझ्दै:**
+**फाइल संरचना बुझ्नुहोस्:**
 - **समावेश गर्दछ** खेल वस्तुहरूको लागि आवश्यक सबै स्प्राइट छविहरू।
-- **सामेल छ** मुख्य HTML दस्तावेज र जाभास्क्रिप्ट एप्लिकेसन फाइल।
+- **सामेल गर्दछ** मुख्य HTML डकुमेन्ट र जाभास्क्रिप्ट एप्लिकेसन फाइल।
 - **प्रदान गर्दछ** स्थानीय विकास सर्भरको लागि प्याकेज कन्फिगरेसन।
 
-### विकास सर्भर सुरु गर्दै
+### विकास सर्भर सुरु गर्नुहोस्
 
 तपाईंको परियोजना फोल्डरमा नेभिगेट गर्नुहोस् र स्थानीय सर्भर सुरु गर्नुहोस्:
 
@@ -197,19 +353,45 @@ npm start
 
 **यो कमाण्ड अनुक्रम:**
 - **डाइरेक्टरी परिवर्तन गर्छ** तपाईंको कार्य परियोजना फोल्डरमा।
-- **सुरु गर्छ** स्थानीय HTTP सर्भर `http://localhost:5000` मा।
-- **सर्भ गर्छ** तपाईंको खेल फाइलहरू परीक्षण र विकासको लागि।
-- **सक्षम बनाउँछ** स्वत: रीलोडिङको साथ लाइभ विकास।
+- **स्थानीय HTTP सर्भर सुरु गर्छ** `http://localhost:5000` मा।
+- **तपाईंका खेल फाइलहरू सेवा दिन्छ** परीक्षण र विकासका लागि।
+- **सक्रिय बनाउँछ** स्वत: रीलोडिङसहितको लाइभ विकास।
 
-तपाईंको ब्राउजर खोल्नुहोस् र `http://localhost:5000` मा नेभिगेट गर्नुहोस् ताकि तपाईं आफ्नो हालको खेल अवस्था नायक र शत्रुहरू स्क्रिनमा रेंडर भएको देख्न सक्नुहुन्छ।
+तपाईंको ब्राउजर खोल्नुहोस् र `http://localhost:5000` मा नेभिगेट गर्नुहोस् ताकि तपाईं आफ्नो हालको खेल स्थिति नायक र शत्रुहरू स्क्रिनमा रेंडर भएको देख्न सक्नुहुन्छ।
 
 ### चरण-दर-चरण कार्यान्वयन
 
-नासाले भ्वायजर स्पेसक्राफ्ट प्रोग्राम गर्न प्रयोग गरेको व्यवस्थित दृष्टिकोण जस्तै, हामी टक्कर पत्ता लगाउने प्रणालीलाई विधिवत रूपमा कार्यान्वयन गर्नेछौं, प्रत्येक घटकलाई चरण-दर-चरण निर्माण गर्दै।
+नासाले भ्वायजर स्पेसक्राफ्ट प्रोग्राम गर्न प्रयोग गरेको व्यवस्थित दृष्टिकोणजस्तै, हामी टक्कर पत्ता लगाउने प्रणालीलाई विधिवत रूपमा कार्यान्वयन गर्नेछौं, प्रत्येक घटकलाई चरण-दर-चरण निर्माण गर्दै।
+
+```mermaid
+flowchart TD
+    A["1. Rectangle Bounds"] --> B["2. Intersection Detection"]
+    B --> C["3. Laser System"]
+    C --> D["4. Event Handling"]
+    D --> E["5. Collision Rules"]
+    E --> F["6. Cooldown System"]
+    
+    G["Object Boundaries"] --> A
+    H["Physics Algorithm"] --> B
+    I["Projectile Creation"] --> C
+    J["Keyboard Input"] --> D
+    K["Game Logic"] --> E
+    L["Rate Limiting"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
-#### 1. आयत टक्कर सीमा थप्नुहोस्
+#### १. आयत टक्कर सीमा थप्नुहोस्
 
-पहिले, हाम्रो खेलका वस्तुहरूलाई आफ्नो सीमा वर्णन गर्न सिकाऔं। तपाईंको `GameObject` क्लासमा यो विधि थप्नुहोस्:
+पहिले, खेलका वस्तुहरूलाई आफ्नो सीमा वर्णन गर्न सिकाऔं। तपाईंको `GameObject` क्लासमा यो विधि थप्नुहोस्:
 
 ```javascript
 rectFromGameObject() {
@@ -222,224 +404,146 @@ rectFromGameObject() {
   }
 ```
 
-**यो विधिले के पूरा गर्छ:**
-- **सिर्जना गर्छ** सटीक सीमा समन्वय भएको आयत वस्तु।
-- **गणना गर्छ** तल्लो र दायाँ किनाराहरू स्थिति प्लस आयाम प्रयोग गरेर।
-- **फर्काउँछ** टक्कर पत्ता लगाउने एल्गोरिदमहरूको लागि तयार वस्तु।
-- **प्रदान गर्छ** सबै खेल वस्तुहरूको लागि मानकीकृत इन्टरफेस।
-
-#### 2. अन्तराल पत्ता लगाउने प्रणाली कार्यान्वयन गर्नुहोस्
-
-अब हाम्रो टक्कर जासूस बनाऔं - एउटा फंक्शन जसले दुई आयतहरू ओभरल्याप गरिरहेका छन् कि छैनन् भनेर बताउन सक्छ:
-
-```javascript
-function intersectRect(r1, r2) {
-  return !(
-    r2.left > r1.right ||
-    r2.right < r1.left ||
-    r2.top > r1.bottom ||
-    r2.bottom < r1.top
-  );
-}
-```
-
-**यो एल्गोरिदमले काम गर्छ:**
-- **परीक्षण गर्छ** आयतहरू बीच चार छुट्टै सर्तहरू।
-- **फर्काउँछ** `false` यदि कुनै छुट्टै सर्त सत्य छ भने।
-- **संकेत गर्छ** टक्कर जब कुनै छुट्टै अवस्था छैन।
-- **प्रयोग गर्छ** नकारात्मक तर्क कुशल अन्तराल परीक्षणको लागि।
-
-#### 3. लेजर फायरिङ प्रणाली कार्यान्वयन गर्नुहोस्
-
-अब रोमाञ्चक भाग सुरु हुन्छ! लेजर फायरिङ प्रणाली सेटअप गरौं।
-
-##### सन्देश स्थिरांकहरू
-
-पहिले, केही सन्देश प्रकारहरू परिभाषित गरौं ताकि हाम्रो खेलका विभिन्न भागहरू एकअर्कासँग कुरा गर्न सकून्:
-
-```javascript
-KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
-COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
-COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
-```
-
-**यी स्थिरांकहरूले प्रदान गर्छ:**
-- **मानकीकरण गर्छ** एप्लिकेसनभरि घटना नामहरू।
-- **सक्षम बनाउँछ** खेल प्रणालीहरू बीच निरन्तर सञ्चार।
-- **रोक्छ** घटना ह्यान्डलर दर्तामा टाइपोहरू।
-
-##### किबोर्ड इनपुट ह्यान्डलिङ
-
-तपाईंको की इभेन्ट लिस्नरमा स्पेस की पत्ता लगाउने प्रणाली थप्नुहोस्:
-
-```javascript
-} else if(evt.keyCode === 32) {
-  eventEmitter.emit(Messages.KEY_EVENT_SPACE);
-}
-```
-
-**यो इनपुट ह्यान्डलर:**
-- **पत्ता लगाउँछ** स्पेस की प्रेसहरू keyCode 32 प्रयोग गरेर।
-- **प्रसारण गर्छ** मानकीकृत घटना सन्देश।
-- **सक्षम बनाउँछ** फायरिङ तर्कलाई अलग राख्न।
-
-##### इभेन्ट लिस्नर सेटअप
-
-तपाईंको `initGame()` फंक्शनमा फायरिङ व्यवहार दर्ता गर्नुहोस्:
-
-```javascript
-eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
- if (hero.canFire()) {
-   hero.fire();
- }
-});
-```
-
-**यो इभेन्ट लिस्नर:**
-- **प्रतिक्रिया दिन्छ** स्पेस की घटनाहरूमा।
-- **जाँच गर्छ** फायरिङ कूलडाउन स्थिति।
-- **ट्रिगर गर्छ** लेजर सिर्जना जब अनुमति छ।
-
-लेजर-शत्रु अन्तरक्रियाको लागि टक्कर ह्यान्डलिङ थप्नुहोस्:
-
-```javascript
-eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
-  first.dead = true;
-  second.dead = true;
-});
-```
-
-**यो टक्कर ह्यान्डलर:**
-- **प्राप्त गर्छ** टक्कर घटना डेटा दुबै वस्तुहरूसँग।
-- **चिन्ह लगाउँछ** दुबै वस्तुहरू मेट्नको लागि।
-- **सुनिश्चित गर्छ** टक्करपछि उचित सफाइ।
-
-#### 4. लेजर क्लास सिर्जना गर्नुहोस्
-
-लेजर प्रोजेक्टाइल कार्यान्वयन गर्नुहोस् जसले माथि सर्छ र आफ्नो जीवनचक्र व्यवस्थापन गर्छ:
-
-```javascript
-class Laser extends GameObject {
-  constructor(x, y) {
-    super(x, y);
-    this.width = 9;
-    this.height = 33;
-    this.type = 'Laser';
-    this.img = laserImg;
+**यो विधिले के गर्छ:**
+- **सिर्जना गर्छ** सटीक सीमा समन
+- [ ] वास्तविक समयमा टक्कर घटनाहरू ट्र्याक गर्न `console.log` स्टेटमेन्टहरू थप्नुहोस्
+
+### 🎯 **यो घण्टामा तपाईंले के हासिल गर्न सक्नुहुन्छ**
+- [ ] पाठ-पछिको क्विज पूरा गर्नुहोस् र टक्कर पत्ता लगाउने एल्गोरिदम बुझ्नुहोस्
+- [ ] टक्कर हुँदा विस्फोट जस्ता दृश्य प्रभावहरू थप्नुहोस्
+- [ ] विभिन्न प्रकारका प्रोजेक्टाइलहरू कार्यान्वयन गर्नुहोस् जसको भिन्न गुणहरू छन्
+- [ ] खेलाडीको क्षमताहरू अस्थायी रूपमा बढाउने पावर-अपहरू सिर्जना गर्नुहोस्
+- [ ] टक्करलाई थप सन्तोषजनक बनाउन ध्वनि प्रभावहरू थप्नुहोस्
+
+### 📅 **तपाईंको हप्ताभरि भौतिक विज्ञान प्रोग्रामिङ**
+- [ ] परिष्कृत टक्कर प्रणालीसहित पूर्ण स्पेस गेम पूरा गर्नुहोस्
+- [ ] आयतहरू भन्दा पर उन्नत टक्कर आकारहरू कार्यान्वयन गर्नुहोस् (वृत्त, बहुभुज)
+- [ ] यथार्थपरक विस्फोट प्रभावहरूको लागि कण प्रणालीहरू थप्नुहोस्
+- [ ] टक्करबाट बच्न जटिल शत्रु व्यवहार सिर्जना गर्नुहोस्
+- [ ] धेरै वस्तुहरूसँग राम्रो प्रदर्शनको लागि टक्कर पत्ता लगाउने प्रणालीलाई अनुकूलित गर्नुहोस्
+- [ ] गति र यथार्थपरक आन्दोलन जस्ता भौतिक विज्ञान सिमुलेशन थप्नुहोस्
+
+### 🌟 **तपाईंको महिनाभरि खेल भौतिक विज्ञानको मास्टरी**
+- [ ] उन्नत भौतिक विज्ञान इन्जिनहरू र यथार्थपरक सिमुलेशनहरूसहित खेलहरू निर्माण गर्नुहोस्
+- [ ] 3D टक्कर पत्ता लगाउने र स्थानिक विभाजन एल्गोरिदम सिक्नुहोस्
+- [ ] खुला स्रोत भौतिक विज्ञान पुस्तकालयहरू र खेल इन्जिनहरूमा योगदान गर्नुहोस्
+- [ ] ग्राफिक्स-गहन अनुप्रयोगहरूको लागि प्रदर्शन अनुकूलनमा मास्टरी हासिल गर्नुहोस्
+- [ ] खेल भौतिक विज्ञान र टक्कर पत्ता लगाउने विषयमा शैक्षिक सामग्री सिर्जना गर्नुहोस्
+- [ ] उन्नत भौतिक विज्ञान प्रोग्रामिङ कौशल प्रदर्शन गर्ने पोर्टफोलियो निर्माण गर्नुहोस्
+
+## 🎯 तपाईंको टक्कर पत्ता लगाउने मास्टरी समयरेखा
+
+```mermaid
+timeline
+    title Collision Detection & Game Physics Learning Progression
     
-    let id = setInterval(() => {
-      if (this.y > 0) {
-        this.y -= 15;
-      } else {
-        this.dead = true;
-        clearInterval(id);
-      }
-    }, 100);
-  }
-}
+    section Foundation (10 minutes)
+        Rectangle Math: Coordinate systems
+                      : Boundary calculations
+                      : Position tracking
+                      : Dimension management
+        
+    section Algorithm Design (20 minutes)
+        Intersection Logic: Separation testing
+                          : Overlap detection
+                          : Performance optimization
+                          : Edge case handling
+        
+    section Game Implementation (30 minutes)
+        Object Systems: Lifecycle management
+                      : Event coordination
+                      : State tracking
+                      : Memory cleanup
+        
+    section Interactive Features (40 minutes)
+        Combat Mechanics: Projectile systems
+                        : Weapon cooldowns
+                        : Damage calculation
+                        : Visual feedback
+        
+    section Advanced Physics (50 minutes)
+        Real-time Systems: Frame rate optimization
+                         : Spatial partitioning
+                         : Collision response
+                         : Physics simulation
+        
+    section Professional Techniques (1 week)
+        Game Engine Concepts: Component systems
+                             : Physics pipelines
+                             : Performance profiling
+                             : Cross-platform optimization
+        
+    section Industry Applications (1 month)
+        Production Skills: Large-scale optimization
+                         : Team collaboration
+                         : Engine development
+                         : Platform deployment
 ```
 
-**यो क्लास कार्यान्वयन:**
-- **विस्तार गर्छ** GameObject आधारभूत कार्यक्षमता प्राप्त गर्न।
-- **सेट गर्छ** लेजर स्प्राइटको लागि उपयुक्त आयामहरू।
-- **सिर्जना गर्छ** `setInterval()` प्रयोग गरेर स्वचालित माथि सर्ने गति।
-- **ह्यान्डल गर्छ** स्क्रिनको माथि पुग्दा आत्म-विनाश।
-- **व्यवस्थापन गर्छ** आफ्नो एनिमेसन टाइमिङ र सफाइ।
-
-#### 5. टक्कर पत्ता लगाउने प्रणाली कार्यान्वयन गर्नुहोस्
-
-व्यापक टक्कर पत्ता लगाउने फंक्शन सिर्जना गर्नुहोस्:
-
-```javascript
-function updateGameObjects() {
-  const enemies = gameObjects.filter(go => go.type === 'Enemy');
-  const lasers = gameObjects.filter(go => go.type === "Laser");
-  
-  // Test laser-enemy collisions
-  lasers.forEach((laser) => {
-    enemies.forEach((enemy) => {
-      if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
-        eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
-          first: laser,
-          second: enemy,
-        });
-      }
-    });
-  });
-
-  // Remove destroyed objects
-  gameObjects = gameObjects.filter(go => !go.dead);
-}
-```
+### 🛠️ तपाईंको खेल भौतिक विज्ञान उपकरणको सारांश
+
+यो पाठ पूरा गरेपछि, तपाईंले निम्न कुराहरूमा मास्टरी हासिल गर्नुभएको छ:
+- **टक्कर गणित**: आयत अन्तराल एल्गोरिदम र समन्वय प्रणालीहरू
+- **प्रदर्शन अनुकूलन**: वास्तविक समयमा टक्कर पत्ता लगाउने प्रणालीको लागि प्रभावकारी समाधान
+- **वस्तु जीवनचक्र व्यवस्थापन**: सुरक्षित सिर्जना, अद्यावधिक, र विनाशको ढाँचा
+- **घटना-चालित वास्तुकला**: टक्कर प्रतिक्रियाको लागि अलग प्रणालीहरू
+- **खेल लूप एकीकरण**: फ्रेम-आधारित भौतिक विज्ञान अद्यावधिक र रेंडरिङ समन्वय
+- **इनपुट प्रणालीहरू**: दर सीमित र प्रतिक्रिया सहित उत्तरदायी नियन्त्रणहरू
+- **स्मृति व्यवस्थापन**: प्रभावकारी वस्तु पूलिङ र सफा गर्ने रणनीतिहरू
+
+**वास्तविक-विश्व अनुप्रयोगहरू**: तपाईंको टक्कर पत्ता लगाउने कौशल सीधा लागू हुन्छ:
+- **अन्तर्क्रियात्मक सिमुलेशनहरू**: वैज्ञानिक मोडेलिङ र शैक्षिक उपकरणहरू
+- **प्रयोगकर्ता इन्टरफेस डिजाइन**: ड्र्याग-एन्ड-ड्रप अन्तर्क्रियाहरू र टच पत्ता लगाउने
+- **डाटा भिजुअलाइजेशन**: अन्तर्क्रियात्मक चार्टहरू र क्लिक गर्न मिल्ने तत्वहरू
+- **मोबाइल विकास**: टच इशारा पहिचान र टक्कर ह्यान्डलिङ
+- **रोबोटिक्स प्रोग्रामिङ**: पथ योजना र बाधा बचाव
+- **कम्प्युटर ग्राफिक्स**: रे ट्रेसिङ र स्थानिक एल्गोरिदम
+
+**व्यावसायिक कौशल प्राप्त**: अब तपाईं गर्न सक्नुहुन्छ:
+- **डिजाइन** वास्तविक समयमा टक्कर पत्ता लगाउने प्रभावकारी एल्गोरिदमहरू
+- **कार्यान्वयन** वस्तु जटिलतासँग स्केल हुने भौतिक विज्ञान प्रणालीहरू
+- **डिबग** गणितीय सिद्धान्तहरू प्रयोग गरेर जटिल अन्तर्क्रियात्मक प्रणालीहरू
+- **अनुकूलन** विभिन्न हार्डवेयर र ब्राउजर क्षमताहरूको लागि प्रदर्शन
+- **आर्किटेक्ट** प्रमाणित डिजाइन ढाँचाहरू प्रयोग गरेर मर्मतयोग्य खेल प्रणालीहरू
+
+**खेल विकास अवधारणाहरूमा मास्टरी**:
+- **भौतिक विज्ञान सिमुलेशन**: वास्तविक समयमा टक्कर पत्ता लगाउने र प्रतिक्रिया
+- **प्रदर्शन इन्जिनियरिङ**: अन्तर्क्रियात्मक अनुप्रयोगहरूको लागि अनुकूलित एल्गोरिदमहरू
+- **घटना प्रणालीहरू**: खेल घटकहरू बीच अलग गरिएको सञ्चार
+- **वस्तु व्यवस्थापन**: गतिशील सामग्रीको लागि प्रभावकारी जीवनचक्र ढाँचाहरू
+- **इनपुट ह्यान्डलिङ**: उपयुक्त प्रतिक्रिया सहित उत्तरदायी नियन्त्रणहरू
+
+**अर्को स्तर**: तपाईं उन्नत भौतिक विज्ञान इन्जिनहरू जस्तै Matter.js अन्वेषण गर्न, 3D टक्कर पत्ता लगाउने कार्यान्वयन गर्न, वा जटिल कण प्रणालीहरू निर्माण गर्न तयार हुनुहुन्छ!
+
+🌟 **उपलब्धि अनलक गरियो**: तपाईंले व्यावसायिक-ग्रेड टक्कर पत्ता लगाउने प्रणालीसहित पूर्ण भौतिक विज्ञान-आधारित अन्तर्क्रियात्मक प्रणाली निर्माण गर्नुभएको छ!
 
-**यो टक्कर प्रणाली:**
-- **फिल्टर गर्छ** खेल वस्तुहरू प्रकार अनुसार कुशल परीक्षणको लागि।
-- **परीक्षण गर्छ** प्रत्येक लेजरलाई प्रत्येक शत्रुसँग अन्तरालको लागि।
-- **प्रसारण गर्छ** टक्कर घटनाहरू जब अन्तरालहरू पत्ता लाग्छ।
-- **सफाइ गर्छ** टक्कर प्रक्रिया पछि नष्ट गरिएका वस्तुहरू।
+## GitHub Copilot एजेन्ट चुनौती 🚀
 
-> ⚠️ **महत्वपूर्ण**: `updateGameObjects()` तपाईंको मुख्य खेल लूपमा `window.onload` मा थप्नुहोस् ताकि टक्कर पत्ता लगाउने प्रणाली सक्षम होस्।
+एजेन्ट मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-#### 6. नायक क्लासमा कूलडाउन प्रणाली थप्नुहोस्
+**विवरण:** टक्कर पत्ता लगाउने प्रणालीलाई सुधार गरेर पावर-अपहरू कार्यान्वयन गर्नुहोस् जुन अनियमित रूपमा उत्पन्न हुन्छन् र नायक जहाजले सङ्कलन गर्दा अस्थायी क्षमताहरू प्रदान गर्दछ।
 
-फायरिङ यान्त्रिकी र दर सीमितता सहित नायक क्लासलाई सुधार गर्नुहोस्:
+**प्रेरणा:** PowerUp वर्ग सिर्जना गर्नुहोस् जुन GameObject विस्तार गर्दछ र नायक र पावर-अपहरू बीच टक्कर पत्ता लगाउने कार्यान्वयन गर्नुहोस्। कम्तीमा दुई प्रकारका पावर-अपहरू थप्नुहोस्: एउटा जसले फायर दर बढाउँछ (कूलडाउन घटाउँछ) र अर्को जसले अस्थायी शील्ड सिर्जना गर्दछ। अनियमित अन्तराल र स्थानहरूमा पावर-अपहरू सिर्जना गर्ने उत्पन्न तर्क समावेश गर्नुहोस्।
 
-```javascript
-class Hero extends GameObject {
-  constructor(x, y) {
-    super(x, y);
-    this.width = 99;
-    this.height = 75;
-    this.type = "Hero";
-    this.speed = { x: 0, y: 0 };
-    this.cooldown = 0;
-  }
-  
-  fire() {
-    gameObjects.push(new Laser(this.x + 45, this.y - 10));
-    this.cooldown = 500;
-
-    let id = setInterval(() => {
-      if (this.cooldown > 0) {
-        this.cooldown -= 100;
-      } else {
-        clearInterval(id);
-      }
-    }, 200);
-  }
-  
-  canFire() {
-    return this.cooldown === 0;
-  }
-}
-```
+---
 
-**सुधारिएको नायक क्लास बुझ्दै:**
-- **सुरु गर्छ** कूलडाउन टाइमर शून्यमा (फायर गर्न तयार)।
-- **सिर्जना गर्छ** नायक जहाजको माथि स्थित लेजर वस्तुहरू।
-- **सेट गर्छ** कूलडाउन अवधि स्प्याम फायरिङ रोक्न।
-- **घटाउँछ** कूलडाउन टाइमर अन्तराल-आधारित अपडेटहरू प्रयोग गरेर।
-- **प्रदान गर्छ** `canFire()` विधि मार्फत फायरिङ स्थिति जाँच।
+## 🚀 चुनौती
 
-### तपाईंको कार्यान्वयन परीक्षण गर्दै
+विस्फोट थप्नुहोस्! [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) मा खेल सम्पत्तिहरू हेर्नुहोस् र जब लेजरले एलियनलाई हिर्काउँछ तब विस्फोट थप्न प्रयास गर्नुहोस्।
 
-तपाईंको स्पेस गेममा अब पूर्ण टक्कर पत्ता लगाउने र युद्ध यान्त्रिकी छ। 🚀 यी नयाँ क्षमताहरू परीक्षण गर्नुहोस्:
-- **नेभिगेट गर्नुहोस्** एरो कीहरू प्रयोग गरेर गति नियन्त्रणहरू जाँच गर्न।
-- **लेजर फायर गर्नुहोस्** स्पेसबार प्रयोग गरेर - कूलडाउनले स्प्याम-क्लिकिङ रोक्छ भन्ने कुरा ध्यान दिनुहोस्।
-- **टक्करहरू अवलोकन गर्नुहोस्** जब लेजरले शत्रुहरूलाई हान्छ, जसले हटाउने ट्रिगर गर्छ।
-- **सफाइ जाँच गर्नुहोस्** नष्ट गरिएका वस्तुहरू खेलबाट गायब हुँदा।
+## पाठ-पछिको क्विज
 
-तपाईंले अन्तरिक्ष यान नेभिगेसन र रोबोटिक्सलाई मार्गदर्शन गर्ने समान गणितीय सिद्धान्तहरू प्रयोग गरेर टक्कर पत्ता लगाउने प्रणाली सफलतापूर्वक कार्यान्वयन गर्नुभएको छ।
+[पाठ-पछिको क्विज](https://ff-quizzes.netlify.app/web/quiz/36)
 
-## GitHub Copilot एजेन्ट चुनौती 🚀
+## समीक्षा र आत्म अध्ययन
 
-एजेन्ट मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
+तपाईंको खेलमा हालसम्मका अन्तरालहरूसँग प्रयोग गर्नुहोस्। जब तपाईंले तिनीहरूलाई परिवर्तन गर्नुहुन्छ के हुन्छ? [JavaScript समय घटनाहरू](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) बारे थप पढ्नुहोस्।
 
-**विवरण:** टक्कर पत्ता लगाउने प्रणालीलाई सुधार गर्दै पावर-अपहरू कार्यान्वयन गर्नुहोस् जसले नायक जहाजले संकलन गर्दा अस्थायी क्षमताहरू प्रदान गर्छ।
+## असाइनमेन्ट
 
-**प्रोम्प्ट:** PowerUp क्लास सिर्जना गर्नुहोस् जसले GameObject विस्तार गर्छ र नायक र पावर-अपहरू बीच टक्कर पत्ता लगाउने प्रणाली कार्यान्वयन गर्नुहोस्। कम
+[टक्कर अन्वेषण गर्नुहोस्](assignment.md)
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरी अनुवाद गरिएको हो। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/6-space-game/5-keeping-score/README.md b/translations/ne/6-space-game/5-keeping-score/README.md
index 99365ea415..cabb16a445 100644
--- a/translations/ne/6-space-game/5-keeping-score/README.md
+++ b/translations/ne/6-space-game/5-keeping-score/README.md
@@ -1,25 +1,92 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d642759cf1542f554871f74956a59af9",
-  "translation_date": "2025-10-22T17:16:32+00:00",
+  "original_hash": "2ed9145a16cf576faa2a973dff84d099",
+  "translation_date": "2025-11-03T15:55:38+00:00",
   "source_file": "6-space-game/5-keeping-score/README.md",
   "language_code": "ne"
 }
 -->
 # स्पेस गेम बनाउनुहोस् भाग ५: स्कोरिङ र जीवनहरू
 
+```mermaid
+journey
+    title Your Game Design Journey
+    section Player Feedback
+      Understand scoring psychology: 3: Student
+      Learn visual communication: 4: Student
+      Design reward systems: 4: Student
+    section Technical Implementation
+      Canvas text rendering: 4: Student
+      State management: 5: Student
+      Event-driven updates: 5: Student
+    section Game Polish
+      User experience design: 5: Student
+      Balance challenge and reward: 5: Student
+      Create engaging gameplay: 5: Student
+```
+
 ## प्रि-लेक्चर क्विज
 
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/37)
 
-तपाईंको स्पेस गेमलाई वास्तविक खेल जस्तो बनाउने तयारी गर्दै हुनुहुन्छ? स्कोरिङ पोइन्टहरू थप्न र जीवनहरू व्यवस्थापन गर्न सिकौं - ती मुख्य मेकानिक्स जसले प्रारम्भिक आर्केड गेमहरू जस्तै स्पेस इनभेडर्सलाई साधारण प्रदर्शनबाट मनोरञ्जनात्मक खेलमा परिवर्तन गर्‍यो। यहीँबाट तपाईंको खेल वास्तवमै खेल्न योग्य बन्छ।
+तपाईंको स्पेस गेमलाई वास्तविक खेल जस्तो बनाउन तयार हुनुहुन्छ? स्कोरिङ पोइन्ट्स र जीवन व्यवस्थापन थपौं - कोर मेकानिक्स जसले प्रारम्भिक आर्केड गेमहरू जस्तै स्पेस इनभेडर्सलाई साधारण प्रदर्शनबाट आकर्षक मनोरञ्जनमा परिवर्तन गर्‍यो। यहीँबाट तपाईंको खेल वास्तवमै खेल्न योग्य हुन्छ।
+
+```mermaid
+mindmap
+  root((Game Feedback Systems))
+    Visual Communication
+      Text Rendering
+      Icon Display
+      Color Psychology
+      Layout Design
+    Scoring Mechanics
+      Point Values
+      Reward Timing
+      Progress Tracking
+      Achievement Systems
+    Life Management
+      Risk vs Reward
+      Player Agency
+      Difficulty Balance
+      Recovery Mechanics
+    User Experience
+      Immediate Feedback
+      Clear Information
+      Emotional Response
+      Engagement Loops
+    Implementation
+      Canvas API
+      State Management
+      Event Systems
+      Performance
+```
 
 ## स्क्रिनमा टेक्स्ट देखाउने - तपाईंको खेलको आवाज
 
-तपाईंको स्कोर देखाउन, हामीले क्यानभासमा टेक्स्ट कसरी रेंडर गर्ने भनेर सिक्नुपर्छ। `fillText()` मेथड तपाईंको मुख्य उपकरण हो - यो क्लासिक आर्केड गेमहरूमा स्कोर र स्टाटस जानकारी देखाउन प्रयोग गरिने उही प्रविधि हो।
+तपाईंको स्कोर देखाउन, हामीले क्यानभासमा टेक्स्ट कसरी रेंडर गर्ने सिक्नुपर्छ। `fillText()` मेथड तपाईंको मुख्य उपकरण हो - यो क्लासिक आर्केड गेमहरूमा स्कोर र स्टेटस जानकारी देखाउन प्रयोग गरिएको उही प्रविधि हो।
+
+```mermaid
+flowchart LR
+    A["📝 Text Content"] --> B["🎨 Styling"]
+    B --> C["📍 Positioning"]
+    C --> D["🖼️ Canvas Render"]
+    
+    E["Font Family"] --> B
+    F["Font Size"] --> B
+    G["Color"] --> B
+    H["Alignment"] --> B
+    
+    I["X Coordinate"] --> C
+    J["Y Coordinate"] --> C
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
 
-तपाईंलाई टेक्स्टको स्वरूपमा पूर्ण नियन्त्रण छ:
+तपाईं टेक्स्टको स्वरूपमा पूर्ण नियन्त्रण राख्न सक्नुहुन्छ:
 
 ```javascript
 ctx.font = "30px Arial";
@@ -28,24 +95,76 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ [क्यानभासमा टेक्स्ट थप्ने](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) बारे थप जान्नुहोस् - तपाईं फन्ट र स्टाइलिङमा कति रचनात्मक हुन सक्नुहुन्छ भनेर आश्चर्यचकित हुन सक्नुहुन्छ!
+✅ [क्यानभासमा टेक्स्ट थप्ने](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) मा गहिरो डुब्नुहोस् - तपाईं फन्ट र स्टाइलिङसँग कति रचनात्मक हुन सक्नुहुन्छ भनेर आश्चर्यचकित हुन सक्नुहुन्छ!
 
 ## जीवनहरू - केवल संख्या भन्दा बढी
 
 खेल डिजाइनमा, "जीवन" खेलाडीको गल्तीको मार्जिनलाई प्रतिनिधित्व गर्दछ। यो अवधारणा पिनबल मेसिनहरूबाट सुरु भएको हो, जहाँ तपाईंले खेल्नका लागि धेरै बलहरू पाउनुहुन्थ्यो। प्रारम्भिक भिडियो गेमहरू जस्तै एस्टेरोइड्समा, जीवनहरूले खेलाडीहरूलाई जोखिम लिन र गल्तीबाट सिक्न अनुमति दिन्थ्यो।
 
-दृश्य प्रतिनिधित्व धेरै महत्त्वपूर्ण हुन्छ - "Lives: 3" मात्र देखाउने सट्टा जहाज आइकनहरू देखाउँदा तत्काल दृश्य पहिचान सिर्जना हुन्छ, जस्तै प्रारम्भिक आर्केड क्याबिनेटहरूले भाषा बाधाहरू पार गर्न आइकनोग्राफी प्रयोग गर्थे।
+```mermaid
+flowchart TD
+    A["🎮 Player Action"] --> B{"Risk Assessment"}
+    
+    B --> C["High Risk, High Reward"]
+    B --> D["Safe Strategy"]
+    
+    C --> E{"Outcome"}
+    D --> F["Steady Progress"]
+    
+    E -->|Success| G["🏆 Big Points"]
+    E -->|Failure| H["💔 Lose Life"]
+    
+    H --> I{"Lives Remaining?"}
+    I -->|Yes| J["🔄 Try Again"]
+    I -->|No| K["💀 Game Over"]
+    
+    J --> B
+    G --> B
+    F --> B
+    
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+    style G fill:#e3f2fd
+    style H fill:#fff3e0
+```
 
-## तपाईंको खेलको पुरस्कार प्रणाली निर्माण गर्दै
+दृश्य प्रतिनिधित्व धेरै महत्त्वपूर्ण हुन्छ - "Lives: 3" मात्र देखाउने सट्टा जहाज आइकनहरू देखाउनुले तत्काल दृश्य पहिचान सिर्जना गर्दछ, जस्तै प्रारम्भिक आर्केड क्याबिनेटहरूले भाषा बाधाहरू पार गर्न आइकनोग्राफी प्रयोग गर्थे।
 
-अब हामी कोर फिडब्याक प्रणालीहरू कार्यान्वयन गर्नेछौं जसले खेलाडीहरूलाई संलग्न राख्छ:
+## तपाईंको खेलको पुरस्कार प्रणाली निर्माण गर्नुहोस्
+
+अब हामी खेलाडीहरूलाई संलग्न राख्ने कोर फिडब्याक प्रणालीहरू कार्यान्वयन गर्नेछौं:
+
+```mermaid
+sequenceDiagram
+    participant Player
+    participant GameEngine
+    participant ScoreSystem
+    participant LifeSystem
+    participant Display
+    
+    Player->>GameEngine: Shoots Enemy
+    GameEngine->>ScoreSystem: Award Points
+    ScoreSystem->>ScoreSystem: +100 points
+    ScoreSystem->>Display: Update Score
+    
+    Player->>GameEngine: Collides with Enemy
+    GameEngine->>LifeSystem: Lose Life
+    LifeSystem->>LifeSystem: -1 life
+    LifeSystem->>Display: Update Lives
+    
+    alt Lives > 0
+        LifeSystem->>Player: Continue Playing
+    else Lives = 0
+        LifeSystem->>GameEngine: Game Over
+    end
+```
 
-- **स्कोरिङ प्रणाली**: प्रत्येक नष्ट गरिएको दुश्मन जहाजले १०० पोइन्ट प्रदान गर्दछ (राउन्ड नम्बरहरू खेलाडीहरूले मानसिक रूपमा गणना गर्न सजिलो हुन्छ)। स्कोर तलको बायाँ कुनामा देखाइन्छ।
-- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनबाट सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक दुश्मनसँगको टक्करले एक जीवन गुमाउँछ। बाँकी जीवनहरू तलको दायाँमा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ne.png)।
+- **स्कोरिङ प्रणाली**: प्रत्येक नष्ट गरिएको शत्रु जहाजले १०० पोइन्ट्स प्रदान गर्दछ (राउन्ड नम्बरहरू खेलाडीहरूले मानसिक रूपमा गणना गर्न सजिलो हुन्छ)। स्कोर तलको बायाँ कुनामा देखाइन्छ।
+- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनहरूसँग सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक शत्रुसँगको टक्करले एक जीवन खर्च हुन्छ। बाँकी जीवनहरू तलको दायाँ कुनामा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ne.png)।
 
 ## निर्माण सुरु गरौं!
 
-पहिले, तपाईंको कार्यक्षेत्र सेटअप गर्नुहोस्। `your-work` सब फोल्डरमा फाइलहरूमा नेभिगेट गर्नुहोस्। तपाईंले यी फाइलहरू देख्नुहुनेछ:
+पहिले, तपाईंको कार्यक्षेत्र सेटअप गर्नुहोस्। तपाईंको `your-work` सब फोल्डरमा फाइलहरूमा नेभिगेट गर्नुहोस्। तपाईंले यी फाइलहरू देख्नुहुनेछ:
 
 ```bash
 -| assets
@@ -64,11 +183,37 @@ cd your-work
 npm start
 ```
 
-यसले `http://localhost:5000` मा स्थानीय सर्भर चलाउँछ। तपाईंको ब्राउजरमा यो ठेगाना खोल्नुहोस् र तपाईंको खेल हेर्नुहोस्। एरो कीहरू प्रयोग गरेर कन्ट्रोलहरू परीक्षण गर्नुहोस् र सबै कुरा काम गरिरहेको छ भनी प्रमाणित गर्न दुश्मनहरूलाई शूट गर्न प्रयास गर्नुहोस्।
+यसले `http://localhost:5000` मा स्थानीय सर्भर चलाउँछ। तपाईंको ब्राउजरमा यो ठेगाना खोल्नुहोस् र तपाईंको खेल हेर्नुहोस्। एरो कीहरू प्रयोग गरेर कन्ट्रोलहरू परीक्षण गर्नुहोस् र सबै कुरा काम गरिरहेको छ भनी सुनिश्चित गर्न शत्रुहरूलाई शूट गर्न प्रयास गर्नुहोस्।
+
+```mermaid
+flowchart TD
+    A["1. Asset Loading"] --> B["2. Game Variables"]
+    B --> C["3. Collision Detection"]
+    C --> D["4. Hero Enhancement"]
+    D --> E["5. Display Functions"]
+    E --> F["6. Event Handlers"]
+    
+    G["Life Icon Image"] --> A
+    H["Score & Lives Tracking"] --> B
+    I["Hero-Enemy Intersections"] --> C
+    J["Points & Life Methods"] --> D
+    K["Text & Icon Rendering"] --> E
+    L["Reward & Penalty Logic"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 ### कोड लेख्ने समय!
 
-1. **तपाईंलाई आवश्यक दृश्य सम्पत्ति लिउनुहोस्**। `solution/assets/` फोल्डरबाट `life.png` सम्पत्ति तपाईंको `your-work` फोल्डरमा प्रतिलिपि गर्नुहोस्। त्यसपछि `lifeImg` लाई तपाईंको window.onload फङ्सनमा थप्नुहोस्:
+1. **तपाईंलाई आवश्यक दृश्य सम्पत्ति प्राप्त गर्नुहोस्**। `solution/assets/` फोल्डरबाट `life.png` सम्पत्ति तपाईंको `your-work` फोल्डरमा प्रतिलिपि गर्नुहोस्। त्यसपछि `lifeImg` लाई तपाईंको window.onload फङ्सनमा थप्नुहोस्:
 
     ```javascript
     lifeImg = await loadTexture("assets/life.png");
@@ -84,9 +229,9 @@ npm start
     eventEmitter = new EventEmitter();
     ```
   
-2. **तपाईंको खेल भेरिएबलहरू सेट गर्नुहोस्**। तपाईंको कुल स्कोर (० बाट सुरु गर्दै) र बाँकी जीवनहरू (३ बाट सुरु गर्दै) ट्र्याक गर्न केही कोड थप्नुहोस्। हामी यी स्क्रिनमा देखाउनेछौं ताकि खेलाडीहरूले सधैं आफ्नो स्थिति थाहा पाउन सकून्।
+2. **तपाईंको खेल भेरिएबलहरू सेटअप गर्नुहोस्**। तपाईंको कुल स्कोर (० बाट सुरु गर्दै) र बाँकी जीवनहरू (३ बाट सुरु गर्दै) ट्र्याक गर्न केही कोड थप्नुहोस्। हामी यी स्क्रिनमा देखाउनेछौं ताकि खेलाडीहरूले सधैं आफ्नो स्थिति थाहा पाउन सकून्।
 
-3. **टक्कर पत्ता लगाउने कार्यान्वयन गर्नुहोस्**। तपाईंको `updateGameObjects()` फङ्सनलाई विस्तार गरेर दुश्मनहरू तपाईंको हिरोसँग टक्कर हुँदा पत्ता लगाउन सक्षम बनाउनुहोस्:
+3. **टक्कर पत्ता लगाउने कार्यान्वयन गर्नुहोस्**। तपाईंको `updateGameObjects()` फङ्सनलाई विस्तार गरेर शत्रुहरूले तपाईंको हिरोसँग टक्कर गर्दा पत्ता लगाउने बनाउनुहोस्:
 
     ```javascript
     enemies.forEach(enemy => {
@@ -98,7 +243,7 @@ npm start
     ```
 
 4. **तपाईंको हिरोमा जीवन र पोइन्ट ट्र्याकिङ थप्नुहोस्**। 
-   1. **काउन्टरहरू आरम्भ गर्नुहोस्**। तपाईंको `Hero` क्लासमा `this.cooldown = 0` अन्तर्गत जीवन र पोइन्टहरू सेटअप गर्नुहोस्:
+   1. **काउन्टरहरू आरम्भ गर्नुहोस्**। तपाईंको `Hero` क्लासमा `this.cooldown = 0` अन्तर्गत जीवन र पोइन्ट्स सेटअप गर्नुहोस्:
 
         ```javascript
         this.life = 3;
@@ -132,18 +277,34 @@ npm start
 
         ```
 
-   1. **यी सबैलाई तपाईंको खेल लूपमा जोड्नुहोस्**। `updateGameObjects()` पछि यी फङ्सनहरू तपाईंको window.onload फङ्सनमा थप्नुहोस्:
+   1. **यी सबैलाई तपाईंको खेल लूपमा जोड्नुहोस्**। यी फङ्सनहरू `updateGameObjects()` पछि तपाईंको window.onload फङ्सनमा थप्नुहोस्:
 
         ```javascript
         drawPoints();
         drawLife();
         ```
 
-1. **खेलको परिणाम र पुरस्कार कार्यान्वयन गर्नुहोस्**। अब हामी फिडब्याक प्रणालीहरू थप्नेछौं जसले खेलाडीको कार्यहरूलाई अर्थपूर्ण बनाउँछ:
+### 🔄 **शैक्षिक जाँच**
+**खेल डिजाइन बुझाइ**: परिणामहरू कार्यान्वयन गर्नु अघि सुनिश्चित गर्नुहोस्:
+- ✅ दृश्य फिडब्याकले खेलाडीहरूलाई खेलको अवस्था कसरी सञ्चार गर्छ
+- ✅ UI तत्वहरूको निरन्तर स्थानले प्रयोगयोग्यतालाई किन सुधार गर्छ
+- ✅ पोइन्ट मानहरू र जीवन व्यवस्थापनको मनोविज्ञान
+- ✅ क्यानभास टेक्स्ट रेंडरिङ HTML टेक्स्टबाट कसरी फरक छ
+
+**छोटो आत्म-परीक्षण**: किन आर्केड गेमहरूले सामान्यतया पोइन्ट मानहरूको लागि राउन्ड नम्बरहरू प्रयोग गर्छन्?
+*उत्तर: राउन्ड नम्बरहरू खेलाडीहरूले मानसिक रूपमा गणना गर्न सजिलो हुन्छ र सन्तोषजनक मनोवैज्ञानिक पुरस्कार सिर्जना गर्छ*
+
+**प्रयोगकर्ता अनुभव सिद्धान्तहरू**: तपाईं अहिले लागू गर्दै हुनुहुन्छ:
+- **दृश्य पदानुक्रम**: महत्त्वपूर्ण जानकारी प्रमुख स्थानमा राखिएको
+- **तत्काल फिडब्याक**: खेलाडी क्रियाकलापहरूमा वास्तविक समय अपडेटहरू
+- **संज्ञानात्मक भार**: सरल, स्पष्ट जानकारी प्रस्तुति
+- **भावनात्मक डिजाइन**: आइकनहरू र रंगहरूले खेलाडीको सम्बन्ध सिर्जना गर्ने
+
+1. **खेल परिणामहरू र पुरस्कारहरू कार्यान्वयन गर्नुहोस्**। अब हामी खेलाडी क्रियाकलापहरूलाई अर्थपूर्ण बनाउने फिडब्याक प्रणालीहरू थप्नेछौं:
 
-   1. **टक्करले जीवन गुमाउँछ**। प्रत्येक पटक तपाईंको हिरो दुश्मनसँग ठोक्किन्छ, तपाईंले एक जीवन गुमाउनु पर्छ।
+   1. **टक्करहरूले जीवन खर्च गर्छन्**। तपाईंको हिरोले शत्रुसँग टक्कर गर्दा प्रत्येक पटक एक जीवन गुमाउनु पर्छ।
    
-      यो मेथडलाई तपाईंको `Hero` क्लासमा थप्नुहोस्:
+      यो मेथड तपाईंको `Hero` क्लासमा थप्नुहोस्:
 
         ```javascript
         decrementLife() {
@@ -154,7 +315,7 @@ npm start
         }
         ```
 
-   2. **दुश्मनहरूलाई शूट गर्दा पोइन्ट प्राप्त हुन्छ**। प्रत्येक सफल हिटले १०० पोइन्ट प्रदान गर्दछ, जसले सही शूटिङको लागि तत्काल सकारात्मक फिडब्याक प्रदान गर्दछ।
+   2. **शत्रुहरूलाई शूट गर्दा पोइन्ट्स कमाइन्छ**। प्रत्येक सफल हिटले १०० पोइन्ट्स प्रदान गर्दछ, सटीक शूटिङको लागि तत्काल सकारात्मक फिडब्याक प्रदान गर्दै।
 
       तपाईंको Hero क्लासलाई यो इन्क्रिमेन्ट मेथडसँग विस्तार गर्नुहोस्:
     
@@ -164,7 +325,7 @@ npm start
           }
         ```
 
-        अब यी फङ्सनहरूलाई तपाईंको टक्कर घटनाहरूमा जडान गर्नुहोस्:
+        अब यी फङ्सनहरूलाई तपाईंको टक्कर घटनाहरूमा जोड्नुहोस्:
 
         ```javascript
         eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -179,11 +340,146 @@ npm start
         });
         ```
 
-✅ जाभास्क्रिप्ट र क्यानभाससँग बनाइएका अन्य खेलहरूको बारेमा उत्सुक हुनुहुन्छ? केही अन्वेषण गर्नुहोस् - तपाईंलाई के सम्भव छ भनेर आश्चर्य लाग्न सक्छ!
-
-यी सुविधाहरू कार्यान्वयन गरेपछि, तपाईंको खेल परीक्षण गर्नुहोस् र पूर्ण फिडब्याक प्रणालीलाई क्रियाशील अवस्थामा हेर्नुहोस्। तपाईंले तलको दायाँमा जीवन आइकनहरू, तलको बायाँमा स्कोर देख्नुहुनेछ, र टक्करहरूले जीवन घटाउँदा सफल शूटहरूले तपाईंको स्कोर बढाएको हेर्नुहोस्।
+✅ जाभास्क्रिप्ट र क्यानभाससँग बनाइएका अन्य खेलहरूको बारेमा उत्सुक हुनुहुन्छ? केही अन्वेषण गर्नुहोस् - तपाईं सम्भावनाहरूमा चकित हुन सक्नुहुन्छ!
+
+यी सुविधाहरू कार्यान्वयन गरेपछि, तपाईंको खेल परीक्षण गर्नुहोस् र पूर्ण फिडब्याक प्रणालीलाई क्रियाशील देख्नुहोस्। तपाईंले तलको दायाँमा जीवन आइकनहरू, तलको बायाँमा स्कोर देख्नुहुनेछ, र टक्करहरूले जीवन घटाउँदा सफल शूटहरूले स्कोर बढाएको हेर्नुहोस्।
+
+तपाईंको खेलमा अब प्रारम्भिक आर्केड गेमहरूलाई यति आकर्षक बनाउने आवश्यक मेकानिक्सहरू छन् - स्पष्ट लक्ष्यहरू, तत्काल फिडब्याक, र खेलाडी क्रियाकलापहरूको लागि अर्थपूर्ण परिणामहरू।
+
+### 🔄 **शैक्षिक जाँच**
+**पूर्ण खेल डिजाइन प्रणाली**: खेलाडी फिडब्याक प्रणालीहरूको तपाईंको मास्टरी प्रमाणित गर्नुहोस्:
+- ✅ स्कोरिङ मेकानिक्सले खेलाडी प्रेरणा र संलग्नता कसरी सिर्जना गर्छ?
+- ✅ प्रयोगकर्ता इन्टरफेस डिजाइनको लागि दृश्य निरन्तरता किन महत्त्वपूर्ण छ?
+- ✅ जीवन प्रणालीले चुनौती र खेलाडी प्रतिधारणलाई कसरी सन्तुलन गर्छ?
+- ✅ सन्तोषजनक गेमप्ले सिर्जना गर्न तत्काल फिडब्याकले के भूमिका खेल्छ?
+
+**सिस्टम एकीकरण**: तपाईंको फिडब्याक प्रणालीले प्रदर्शन गर्दछ:
+- **प्रयोगकर्ता अनुभव डिजाइन**: स्पष्ट दृश्य सञ्चार र जानकारी पदानुक्रम
+- **इभेन्ट-ड्रिभन आर्किटेक्चर**: खेलाडी क्रियाकलापहरूमा प्रतिक्रियात्मक अपडेटहरू
+- **स्टेट म्यानेजमेन्ट**: गतिशील खेल डेटा ट्र्याकिङ र प्रदर्शन
+- **क्यानभास मास्टरी**: टेक्स्ट रेंडरिङ र स्प्राइट पोजिसनिङ
+- **खेल मनोविज्ञान**: खेलाडी प्रेरणा र संलग्नता बुझाइ
+
+**व्यावसायिक ढाँचाहरू**: तपाईंले कार्यान्वयन गर्नुभएको छ:
+- **MVC आर्किटेक्चर**: खेल तर्क, डेटा, र प्रस्तुतीकरणको छुट्टै व्यवस्था
+- **अवलोकनकर्ता ढाँचा**: खेल अवस्था परिवर्तनहरूको लागि इभेन्ट-ड्रिभन अपडेटहरू
+- **घटक डिजाइन**: रेंडरिङ र तर्कका लागि पुन: प्रयोगयोग्य फङ्सनहरू
+- **प्रदर्शन अनुकूलन**: खेल लूपमा कुशल रेंडरिङ
+
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] स्कोर डिस्प्लेका लागि विभिन्न फन्ट साइज र रंगहरू प्रयोग गर्नुहोस्
+- [ ] पोइन्ट मानहरू परिवर्तन गरेर गेमप्लेको अनुभवमा कस्तो प्रभाव पर्छ हेर्नुहोस्
+- [ ] पोइन्ट्स र जीवन परिवर्तन हुँदा ट्र्याक गर्न console.log स्टेटमेन्टहरू थप्नुहोस्
+- [ ] जीवन समाप्त हुने वा उच्च स्कोर प्राप्त गर्ने जस्ता किनाराका केसहरू परीक्षण गर्नुहोस्
+
+### 🎯 **यो घण्टामा तपाईं के हासिल गर्न सक्नुहुन्छ**
+- [ ] पोस्ट-लेसन क्विज पूरा गर्नुहोस् र खेल डिजाइन मनोविज्ञान बुझ्नुहोस्
+- [ ] स्कोरिङ र जीवन गुमाउँदा ध्वनि प्रभावहरू थप्नुहोस्
+- [ ] स्थानीयStorage प्रयोग गरेर उच्च स्कोर प्रणाली कार्यान्वयन गर्नुहोस्
+- [ ] विभिन्न शत्रु प्रकारहरूको लागि विभिन्न पोइन्ट मानहरू सिर्जना गर्नुहोस्
+- [ ] जीवन गुमाउँदा स्क्रिन शेक जस्ता दृश्य प्रभावहरू थप्नुहोस्
+
+### 📅 **तपाईंको हप्ताको खेल डिजाइन यात्रा**
+- [ ] पूर्ण स्पेस गेमलाई परिष्कृत फिडब्याक प्रणालीहरूसँग पूरा गर्नुहोस्
+- [ ] उन्नत स्कोरिङ मेकानिक्स जस्तै कम्बो मल्टिप्लायर्स कार्यान्वयन गर्नुहोस्
+- [ ] उपलब्धिहरू र अनलक गर्न सकिने सामग्री थप्नुहोस्
+- [ ] कठिनाई प्रगति र सन्तुलन प्रणालीहरू सिर्जना गर्नुहोस्
+- [ ] मेनुहरू र गेम ओभर स्क्रिनहरूको लागि प्रयोगकर्ता इन्टरफेस डिजाइन गर्नुहोस्
+- [ ] अन्य खेलहरू अध्ययन गरेर संलग्नता मेकानिक्स बुझ्नुहोस्
+
+### 🌟 **तपाईंको महिनाको खेल विकास मास्टरी**
+- [ ] परिष्कृत प्रगति प्रणालीहरूसँग पूर्ण खेलहरू निर्माण गर्नुहोस्
+- [ ] खेल विश्लेषण र खेलाडी व्यवहार मापन सिक्नुहोस्
+- [ ] खुला स्रोत खेल विकास परियोजनाहरूमा योगदान गर्नुहोस्
+- [ ] उन्नत खेल डिजाइन ढाँचाहरू र मुद्रीकरण मास्टर गर्नुहोस्
+- [ ] खेल डिजाइन र प्रयोगकर्ता अनुभवको बारेमा शैक्षिक सामग्री सिर्जना गर्नुहोस्
+- [ ] खेल डिजाइन र विकास कौशल प्रदर्शन गर्ने पोर्टफोलियो निर्माण गर्नुहोस्
+
+## 🎯 तपाईंको खेल डिजाइन मास्टरी टाइमलाइन
+
+```mermaid
+timeline
+    title Game Design & Player Feedback Learning Progression
+    
+    section Foundation (10 minutes)
+        Visual Communication: Text rendering
+                           : Icon design
+                           : Layout principles
+                           : Color psychology
+        
+    section Player Psychology (20 minutes)
+        Motivation Systems: Point values
+                          : Risk vs reward
+                          : Progress feedback
+                          : Achievement design
+        
+    section Technical Implementation (30 minutes)
+        Canvas Mastery: Text positioning
+                      : Sprite rendering
+                      : State management
+                      : Performance optimization
+        
+    section Game Balance (40 minutes)
+        Difficulty Design: Life management
+                         : Scoring curves
+                         : Player retention
+                         : Accessibility
+        
+    section User Experience (50 minutes)
+        Interface Design: Information hierarchy
+                        : Responsive feedback
+                        : Emotional design
+                        : Usability testing
+        
+    section Advanced Systems (1 week)
+        Game Mechanics: Progression systems
+                      : Analytics integration
+                      : Monetization design
+                      : Community features
+        
+    section Industry Skills (1 month)
+        Professional Development: Team collaboration
+                                : Design documentation
+                                : Player research
+                                : Platform optimization
+```
 
-तपाईंको खेलमा अब प्रारम्भिक आर्केड गेमहरूलाई यति आकर्षक बनाउने आवश्यक मेकानिक्सहरू छन् - स्पष्ट लक्ष्यहरू, तत्काल फिडब्याक, र खेलाडीको कार्यहरूको लागि अर्थपूर्ण परिणामहरू।
+### 🛠️ तपाईंको खेल डिजाइन टूलकिट सारांश
+
+यो पाठ पूरा गरेपछि, तपाईंले अब मास्टर गर्नुभएको छ:
+- **खेलाडी मनोविज्ञान**: प्रेरणा, जोखिम/पुरस्कार, र संलग्नता लूपहरू बुझ्नुहोस्
+- **दृश्य सञ्चार**: टेक्स्ट, आइकन, र लेआउट प्रयोग गरेर प्रभावकारी UI डिजाइन
+- **फिडब्याक प्रणालीहरू**: खेलाडी क्रियाकलापहरू र खेल घटनाहरूमा वास्तविक समय प्रतिक्रिया
+- **स्टेट म्यानेजमेन्ट**: गतिशील खेल डेटा कुशलतापूर्वक ट्र्याकिङ र प्रदर्शन
+- **क्यानभास टेक्स्ट रेंडरिङ**: स्टाइलिङ र पोजिसनिङको साथ व्यावसायिक टेक्स्ट डिस्प्ले
+- **इभेन्ट एकीकरण**: प्रयोगकर्ता क्रियाकलापहरूलाई अर्थपूर्ण खेल परिणामहरूसँग जोड्नुहोस्
+- **खेल सन्तुलन**: कठिनाई वक्र र खेलाडी प्रगति प्रणालीहरू डिजाइन गर्नुहोस्
+
+**वास्तविक-विश्व अनुप्रयोगहरू**: तपाईंको खेल डिजाइन कौशल सीधा लागू हुन्छ:
+- **प्रयोगकर्ता इन्टरफेस डिजाइन**: आकर्षक र सहज इन्टरफेसहरू सिर्जना गर्नुहोस्
+- **उत्पादन विकास**: प्रयोगकर्ता प्रेरणा र फिडब्याक लूपहरू बुझ्नुहोस्
+- **शैक्षिक प्रविधि**: गेमिफिकेशन र सिकाइ संलग्नता प्रणालीहरू
+- **डाटा भिजुअलाइजेशन**: जटिल जानकारी पहुँचयोग्य र आकर्षक बनाउनुहोस्
+- **मोबाइल एप विकास**: प्रतिधारण मेकानिक्स र प्रयोगकर्ता अनुभव डिजाइन
+- **मार्केटिङ प्रविधि**: प्रयोगकर्ता व्यवहार र रूपान्तरण अनुकूलन बुझ्नुहोस्
+
+**प्रोफेशनल कौशल प्राप्त गरियो**: तपाईं अब गर्न सक्नुहुन्छ:
+- **डिजाइन** प्रयोगकर्ता अनुभवहरू जसले प्रयोगकर्ताहरूलाई प्रेरित र संलग्न गर्छ
+- **कार्यान्वयन** फिडब्याक प्रणालीहरू जसले प्रभावकारी रूपमा प्रयोगकर्ता व्यवहारलाई मार्गदर्शन गर्छ
+- **सन्तुलन** चुनौती र पहुँचयोग्यता अन्तरक्रियात्मक प्रणालीहरूमा
+- **सिर्जना** दृश्य सञ्चार जसले विभिन्न प्रयोगकर्ता समूहहरूमा काम गर्छ
+- **विश्लेषण** प्रयोगकर्ता व्यवहार र डिजाइन सुधारहरूमा पुनरावृत्ति गर्नुहोस्
+
+**खेल विकास अवधारणाहरू मास्टर गरियो**:
+- **खेलाडी प्रेरणा**: संलग्नता र प्रतिधारणलाई प्रेरित गर्ने कुरा बुझ्नुहोस्
+- **दृश्य डिजाइन**: स्पष्ट, आकर्षक, र कार्यात्मक इन्टरफेसहरू सिर्जना गर्नुहोस्
+- **सिस्टम एकीकरण**: एकसाथ अनुभवको लागि धेरै खेल प्रणालीहरू जोड्नुहोस्
+- **प्रदर्शन अनुकूलन**: कुशल रेंडरिङ र स्टेट म्यानेजमेन्ट
+- **पहुंचयोग्यता**: विभिन्न कौशल स्तर र खेलाडी आवश्यकताहरूको लागि डिजाइन गर्नुहोस्
+
+**अर्को स्तर**: तपाईं उन्नत खेल डिजाइन ढाँचाहरू अन्वेषण गर्न, विश्लेषण प्रणालीहरू कार्यान्वयन गर्न, वा खेल मुद्रीकरण र खेलाडी प्रतिधारण रणनीतिहरू अध्ययन गर्न तयार हुनुहुन्छ!
+
+🌟 **उपलब्धि अनलक गरियो**: तपाईंले व्यावसायिक खेल डिजाइन सिद्धान्तहरूसँग पूर्ण खेलाडी फिडब्याक प्रणाली निर्माण गर्नुभएको छ!
 
 ---
 
@@ -191,13 +487,13 @@ npm start
 
 Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** स्पेस गेमको स्कोरिङ प्रणालीलाई उच्च स्कोर सुविधा र स्थायी भण्डारण तथा बोनस स्कोरिङ मेकानिक्स कार्यान्वयन गरेर सुधार गर्नुहोस्।
+**विवरण:** स्पेस गेमको स्कोरिङ प्रणालीलाई उच्च स्कोर सुविधा र बोनस स्कोरिङ मेकानिक्स कार्यान्वयन गरेर सुधार गर्नुहोस्।
 
-**प्रेरणा:** खेलाडीको उत्कृष्ट स्कोरलाई localStorage मा बचत गर्ने उच्च स्कोर प्रणाली सिर्जना गर्नुहोस्। लगातार दुश्मन मार्ने (कम्बो प्रणाली) को लागि बोनस पोइन्टहरू थप्नुहोस् र विभिन्न दुश्मन प्रकारहरूको लागि विभिन्न पोइन्ट मानहरू कार्यान्वयन गर्नुहोस्। खेलाडीले नयाँ उच्च स्कोर प्राप्त गर्दा दृश्य संकेतक समावेश गर्नुहोस् र खेल स्क्रिनमा हालको उच्च स्कोर देखाउनुहोस्।
+**प्रोम्प्ट:** खेलाडीको सर्वश्रेष्ठ स्कोरलाई localStorage मा बचत गर्ने उच्च स्कोर प्रणाली सिर्जना गर्नुहोस्। लगातार शत्रु मार्ने (कम्बो प्रणाली) को लागि बोनस पोइन्ट्स थप्नुहोस् र विभिन्न शत्रु प्रकारहरूको लागि विभिन्न पोइन्ट मानहरू कार्यान्वयन गर्नुहोस्। खेलाडीले नयाँ उच्च स्कोर प्राप्त गर्दा दृश्य संकेतक समावेश गर्नुहोस् र खेल स्क्रिनमा वर्तमान उच्च स्कोर देखाउनुहोस्।
 
 ## 🚀 चुनौती
 
-अब तपाईंको खेल स्कोरिङ र जीवनहरूसहित कार्यात्मक छ। खेलाडीको अनुभवलाई अझ राम्रो बनाउन के थप सुविधाहरू थप्न सकिन्छ भनेर विचार गर्नुहोस्।
+तपाईंसँग अहिले स्कोरिङ र जीवनहरूसँग कार्यात्मक खेल छ। खेलाडी अनुभवलाई अझ राम्रो बनाउन सक्ने थप सुविधाहरू के हुन सक्छन् विचार गर्नुहोस्।
 
 ## पोस्ट-लेक्चर क्विज
 
@@ -205,7 +501,7 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
 
 ## समीक्षा र आत्म अध्ययन
 
-थप अन्वेषण गर्न चाहनुहुन्छ? खेल स्कोरिङ र जीवन प्रणालीहरूको विभिन्न दृष्टिकोणहरू अनुसन्धान गर्नुहोस्। त्यहाँ [PlayFab](https://playfab.com) जस्ता आकर्षक खेल इन्जिनहरू छन् जसले स्कोरिङ, लिडरबोर्डहरू, र खेलाडीको प्रगति व्यवस्थापन गर्छ। यस्तो केही एकीकृत गर्दा तपाईंको खेललाई अर्को स्तरमा कसरी लैजान सकिन्छ?
+थप अन्वेषण गर्न चाहनुहुन्छ? खेल स्कोरिङ र जीवन प्रणालीहरूको विभिन्न दृष्टिकोणहरू अनुसन्धान गर्नुहोस्। त्यहाँ [PlayFab](https://playfab.com) जस्ता आकर्षक खेल इन्जिनहरू छन् जसले स्कोरिङ, लिडरबोर्डहरू, र खेलाडी प्रगति व्यवस्थापन गर्छ। यस्तो कुरा एकीकृत गर्दा तपाईंको खेललाई अर्को स्तरमा कसरी लैजान सकिन्छ?  
 
 ## असाइनमेन्ट
 
@@ -214,4 +510,4 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/6-space-game/6-end-condition/README.md b/translations/ne/6-space-game/6-end-condition/README.md
index 789ec7f8ac..cf4f7145e9 100644
--- a/translations/ne/6-space-game/6-end-condition/README.md
+++ b/translations/ne/6-space-game/6-end-condition/README.md
@@ -1,19 +1,66 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46bcdd9a0174031655a49bb062aa279c",
-  "translation_date": "2025-10-22T17:14:11+00:00",
+  "original_hash": "a4b78043f4d64bf3ee24e0689b8b391d",
+  "translation_date": "2025-11-03T15:51:47+00:00",
   "source_file": "6-space-game/6-end-condition/README.md",
   "language_code": "ne"
 }
 -->
-# स्पेस गेम बनाउनुहोस् भाग ६: अन्त्य र पुनः सुरु
-
-प्रत्येक उत्कृष्ट खेलमा स्पष्ट अन्त्य अवस्था र सहज पुनः सुरु गर्ने प्रणाली आवश्यक हुन्छ। तपाईंले आन्दोलन, युद्ध, र स्कोरिङसहितको प्रभावशाली स्पेस गेम बनाइसक्नुभएको छ - अब यसलाई पूर्ण महसुस गराउने अन्तिम टुक्राहरू थप्ने समय हो।
-
-तपाईंको खेल हाल अनिश्चितकालसम्म चल्छ, जस्तै नासाले १९७७ मा प्रक्षेपण गरेका Voyager प्रोबहरू - दशकौंसम्म स्पेसमा यात्रा गरिरहेका छन्। यद्यपि यो स्पेस अन्वेषणका लागि ठीक छ, खेलहरूलाई सन्तोषजनक अनुभव सिर्जना गर्न परिभाषित अन्त्य बिन्दुहरू आवश्यक हुन्छ।
+# स्पेस गेम बनाउनुहोस् भाग ६: अन्त्य र पुनः सुरु गर्नुहोस्
+
+```mermaid
+journey
+    title Your Game Completion Journey
+    section End Conditions
+      Define win/lose states: 3: Student
+      Implement condition checking: 4: Student
+      Handle state transitions: 4: Student
+    section Player Experience
+      Design feedback systems: 4: Student
+      Create restart mechanics: 5: Student
+      Polish user interface: 5: Student
+    section System Integration
+      Manage game lifecycle: 5: Student
+      Handle memory cleanup: 5: Student
+      Create complete experience: 5: Student
+```
 
-आज, हामी सही जित/हार अवस्था र पुनः सुरु गर्ने प्रणाली कार्यान्वयन गर्नेछौं। यस पाठको अन्त्यसम्ममा, तपाईंले एक परिष्कृत खेल बनाइसक्नुभएको हुनेछ जसलाई खेलाडीहरूले पूरा गर्न र पुनः खेल्न सक्नेछन्, जस्तै क्लासिक आर्केड खेलहरूले माध्यमलाई परिभाषित गरे।
+प्रत्येक उत्कृष्ट खेलमा स्पष्ट अन्त्य अवस्था र सहज पुनः सुरु गर्ने प्रणाली आवश्यक हुन्छ। तपाईंले आन्दोलन, युद्ध, र स्कोरिङसहितको प्रभावशाली स्पेस गेम निर्माण गर्नुभएको छ - अब यो पूर्ण महसुस गराउने अन्तिम टुक्राहरू थप्ने समय हो।
+
+तपाईंको खेल हाल अनिश्चितकालसम्म चल्छ, जस्तै नासाले १९७७ मा प्रक्षेपण गरेका Voyager प्रोबहरू - दशकौंसम्म अन्तरिक्षमा यात्रा गरिरहेका छन्। जबकि यो अन्तरिक्ष अन्वेषणका लागि ठीक छ, खेलहरूलाई सन्तोषजनक अनुभव सिर्जना गर्न परिभाषित अन्त्य बिन्दुहरू आवश्यक हुन्छ।
+
+आज, हामी उचित जित/हार अवस्था र पुनः सुरु प्रणाली कार्यान्वयन गर्नेछौं। यो पाठको अन्त्यसम्ममा, तपाईंले एक परिष्कृत खेल बनाउनुहुनेछ जसलाई खेलाडीहरूले पूरा गर्न र पुनः खेल्न सक्नेछन्, ठीक त्यस्तै क्लासिक आर्केड खेलहरू जसले माध्यमलाई परिभाषित गरे।
+
+```mermaid
+mindmap
+  root((Game Completion))
+    End Conditions
+      Victory States
+      Defeat Conditions
+      Progress Tracking
+      State Validation
+    Player Feedback
+      Visual Messages
+      Color Psychology
+      Clear Communication
+      Emotional Response
+    State Management
+      Game Loop Control
+      Memory Cleanup
+      Object Lifecycle
+      Event Handling
+    Restart Systems
+      Input Handling
+      State Reset
+      Fresh Initialization
+      User Experience
+    Polish Elements
+      Message Display
+      Smooth Transitions
+      Error Prevention
+      Accessibility
+```
 
 ## प्रि-लेक्चर क्विज
 
@@ -21,37 +68,98 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## खेलको अन्त्य अवस्था बुझ्दै
 
-तपाईंको खेल कहिले अन्त्य हुनुपर्छ? यो आधारभूत प्रश्नले प्रारम्भिक आर्केड युगदेखि खेल डिजाइनलाई आकार दिएको छ। Pac-Man तब अन्त्य हुन्छ जब तपाईं भूतहरूद्वारा समातिनुहुन्छ वा सबै डटहरू सफा गर्नुहुन्छ, जबकि Space Invaders तब अन्त्य हुन्छ जब एलियनहरू तल पुग्छन् वा तपाईंले तिनीहरूलाई सबै नष्ट गर्नुहुन्छ।
-
-खेल सिर्जनाकर्ताको रूपमा, तपाईंले जित र हारको अवस्था परिभाषित गर्नुहुन्छ। हाम्रो स्पेस गेमका लागि, यहाँ प्रमाणित दृष्टिकोणहरू छन् जसले आकर्षक गेमप्ले सिर्जना गर्छ:
+तपाईंको खेल कहिले समाप्त हुनुपर्छ? यो मौलिक प्रश्नले प्रारम्भिक आर्केड युगदेखि खेल डिजाइनलाई आकार दिएको छ। Pac-Man तब समाप्त हुन्छ जब तपाईं भूतहरूद्वारा समातिनुहुन्छ वा सबै डटहरू सफा गर्नुहुन्छ, जबकि Space Invaders तब समाप्त हुन्छ जब एलियनहरू तल पुग्छन् वा तपाईंले तिनीहरूलाई सबै नष्ट गर्नुहुन्छ।
+
+खेल सिर्जनाकर्ताको रूपमा, तपाईंले जित र हारको अवस्था परिभाषित गर्नुहुन्छ। हाम्रो स्पेस गेमको लागि, यहाँ प्रमाणित दृष्टिकोणहरू छन् जसले आकर्षक गेमप्ले सिर्जना गर्छ:
+
+```mermaid
+flowchart TD
+    A["🎮 Game Start"] --> B{"Check Conditions"}
+    
+    B --> C["Enemy Count"]
+    B --> D["Hero Lives"]
+    B --> E["Score Threshold"]
+    B --> F["Level Progress"]
+    
+    C --> C1{"Enemies = 0?"}
+    D --> D1{"Lives = 0?"}
+    E --> E1{"Score ≥ Target?"}
+    F --> F1{"Objectives Complete?"}
+    
+    C1 -->|Yes| G["🏆 Victory"]
+    D1 -->|Yes| H["💀 Defeat"]
+    E1 -->|Yes| G
+    F1 -->|Yes| G
+    
+    C1 -->|No| B
+    D1 -->|No| B
+    E1 -->|No| B
+    F1 -->|No| B
+    
+    G --> I["🔄 Restart Option"]
+    H --> I
+    
+    style G fill:#e8f5e8
+    style H fill:#ffebee
+    style I fill:#e3f2fd
+```
 
-- **`N` शत्रु जहाजहरू नष्ट भएका छन्**: यदि तपाईंले खेललाई विभिन्न स्तरहरूमा विभाजन गर्नुभएको छ भने, स्तर पूरा गर्न `N` शत्रु जहाजहरू नष्ट गर्न आवश्यक हुन्छ।
-- **तपाईंको जहाज नष्ट भएको छ**: केही खेलहरूमा तपाईंको जहाज नष्ट भएमा खेल हारिन्छ। अर्को सामान्य दृष्टिकोण भनेको जीवनको अवधारणा हो। प्रत्येक पटक तपाईंको जहाज नष्ट हुँदा एक जीवन घट्छ। सबै जीवन समाप्त भएपछि खेल हारिन्छ।
-- **तपाईंले `N` अंक सङ्कलन गर्नुभएको छ**: अर्को सामान्य अन्त्य अवस्था भनेको अंक सङ्कलन गर्नु हो। तपाईंले कसरी अंक प्राप्त गर्नुहुन्छ भन्ने कुरा तपाईंको निर्णयमा निर्भर हुन्छ, तर शत्रु जहाज नष्ट गर्दा वा नष्ट हुँदा वस्तुहरू सङ्कलन गर्दा अंक प्रदान गर्नु सामान्य हो।
-- **स्तर पूरा गर्नुहोस्**: यसमा `X` शत्रु जहाजहरू नष्ट गर्नु, `Y` अंक सङ्कलन गर्नु वा विशेष वस्तु सङ्कलन गर्नु जस्ता विभिन्न अवस्थाहरू समावेश हुन सक्छ।
+- **`N` शत्रु जहाजहरू नष्ट भएका छन्**: यदि तपाईंले खेललाई विभिन्न स्तरहरूमा विभाजन गर्नुभएको छ भने, स्तर पूरा गर्न `N` शत्रु जहाजहरू नष्ट गर्न आवश्यक छ।
+- **तपाईंको जहाज नष्ट भएको छ**: त्यस्ता खेलहरू पक्कै छन् जहाँ तपाईंको जहाज नष्ट भएमा तपाईं खेल हार्नुहुन्छ। अर्को सामान्य दृष्टिकोण भनेको जीवनको अवधारणा हो। प्रत्येक पटक तपाईंको जहाज नष्ट हुँदा एक जीवन घट्छ। सबै जीवन समाप्त भएपछि तपाईं खेल हार्नुहुन्छ।
+- **तपाईंले `N` अंकहरू सङ्कलन गर्नुभएको छ**: अर्को सामान्य अन्त्य अवस्था भनेको तपाईंले अंक सङ्कलन गर्नु हो। तपाईंले कसरी अंक प्राप्त गर्नुहुन्छ भन्ने कुरा तपाईंको हातमा छ तर शत्रु जहाज नष्ट गर्दा वा नष्ट हुँदा वस्तुहरू सङ्कलन गर्दा अंक प्रदान गर्नु सामान्य हो।
+- **स्तर पूरा गर्नुहोस्**: यसमा `X` शत्रु जहाजहरू नष्ट भएका, `Y` अंक सङ्कलन गरिएको वा विशेष वस्तु सङ्कलन गरिएको जस्ता विभिन्न अवस्थाहरू समावेश हुन सक्छ।
 
 ## खेल पुनः सुरु गर्ने कार्यक्षमता कार्यान्वयन गर्दै
 
-राम्रो खेलहरूले सहज पुनः सुरु गर्ने प्रणालीमार्फत पुनः खेल्न प्रोत्साहन दिन्छ। जब खेलाडीहरूले खेल पूरा गर्छन् (वा हार्छन्), तिनीहरू प्रायः तुरुन्तै पुनः प्रयास गर्न चाहन्छन् - चाहे आफ्नो स्कोर हराउन वा आफ्नो प्रदर्शन सुधार गर्न।
+राम्रो खेलहरूले सहज पुनः सुरु गर्ने प्रणालीमार्फत पुनः खेल्न प्रोत्साहन दिन्छ। जब खेलाडीहरूले खेल पूरा गर्छन् (वा पराजित हुन्छन्), तिनीहरू प्रायः तुरुन्तै फेरि प्रयास गर्न चाहन्छन् - चाहे आफ्नो स्कोर हराउन वा आफ्नो प्रदर्शन सुधार गर्न।
+
+```mermaid
+stateDiagram-v2
+    [*] --> Playing: Game Start
+    Playing --> Victory: All enemies destroyed
+    Playing --> Defeat: Lives = 0
+    
+    Victory --> MessageDisplay: Show win message
+    Defeat --> MessageDisplay: Show lose message
+    
+    MessageDisplay --> WaitingRestart: Press Enter prompt
+    WaitingRestart --> Resetting: Enter key pressed
+    
+    Resetting --> CleanupMemory: Clear intervals
+    CleanupMemory --> ClearEvents: Remove listeners
+    ClearEvents --> InitializeGame: Fresh start
+    InitializeGame --> Playing: New game begins
+    
+    note right of MessageDisplay
+        Color-coded feedback:
+        Green = Victory
+        Red = Defeat
+    end note
+    
+    note right of Resetting
+        Complete state reset
+        prevents memory leaks
+    end note
+```
 
-Tetris यसलाई पूर्ण रूपमा उदाहरण दिन्छ: जब तपाईंको ब्लकहरू माथि पुग्छन्, तपाईंले जटिल मेनुहरू नेभिगेट नगरी तुरुन्तै नयाँ खेल सुरु गर्न सक्नुहुन्छ। हामी यस्तै पुनः सुरु गर्ने प्रणाली निर्माण गर्नेछौं जसले खेलको अवस्था सफा रूपमा रिसेट गर्छ र खेलाडीहरूलाई छिटो पुनः खेलमा फर्काउँछ।
+Tetris यसलाई पूर्ण रूपमा उदाहरण दिन्छ: जब तपाईंको ब्लकहरू माथि पुग्छन्, तपाईंले जटिल मेनुहरू नेभिगेट नगरी तुरुन्तै नयाँ खेल सुरु गर्न सक्नुहुन्छ। हामी यस्तै पुनः सुरु प्रणाली निर्माण गर्नेछौं जसले खेलको अवस्था सफा रूपमा रिसेट गर्छ र खेलाडीहरूलाई छिटो कार्यमा फर्काउँछ।
 
-✅ **प्रतिबिम्ब**: तपाईंले खेलेका खेलहरूको बारेमा सोच्नुहोस्। ती खेलहरू कुन अवस्थामा अन्त्य हुन्छन्, र तपाईंलाई कसरी पुनः सुरु गर्न प्रेरित गरिन्छ? पुनः सुरु गर्ने अनुभवलाई सहज बनाउने के हो र निराशाजनक बनाउने के हो?
+✅ **प्रतिबिम्ब**: तपाईंले खेलेका खेलहरूको बारेमा सोच्नुहोस्। कुन अवस्थाहरूमा तिनीहरू समाप्त हुन्छन्, र तपाईंलाई कसरी पुनः सुरु गर्न प्रेरित गरिन्छ? पुनः सुरु गर्ने अनुभवलाई सहज बनाउने बनाम निराशाजनक बनाउने के हो?
 
 ## तपाईंले के निर्माण गर्नुहुनेछ
 
-तपाईंले आफ्नो परियोजनालाई पूर्ण खेल अनुभवमा रूपान्तरण गर्ने अन्तिम सुविधाहरू कार्यान्वयन गर्नुहुनेछ। यी तत्वहरूले परिष्कृत खेलहरूलाई आधारभूत प्रोटोटाइपहरूबाट अलग गर्छ।
+तपाईंले अन्तिम सुविधाहरू कार्यान्वयन गर्नुहुनेछ जसले तपाईंको परियोजनालाई पूर्ण खेल अनुभवमा रूपान्तरण गर्छ। यी तत्वहरूले परिष्कृत खेलहरूलाई आधारभूत प्रोटोटाइपहरूबाट अलग गर्छ।
 
-**आज हामीले थप्ने कुरा:**
+**आज हामी के थप्दैछौं:**
 
-1. **जितको अवस्था**: सबै शत्रुहरूलाई नष्ट गर्नुहोस् र उचित उत्सव पाउनुहोस् (तपाईंले यसलाई कमाउनुभएको छ!)
-2. **हारको अवस्था**: जीवन समाप्त गर्नुहोस् र हारको स्क्रिनको सामना गर्नुहोस्
-3. **पुनः सुरु गर्ने प्रणाली**: Enter थिचेर तुरुन्तै पुनः खेलमा फर्कनुहोस् - किनकि एक खेल कहिल्यै पर्याप्त हुँदैन
-4. **राज्य व्यवस्थापन**: प्रत्येक पटक सफा सुरुवात - कुनै बाँकी शत्रुहरू वा अघिल्लो खेलबाट अजीब गडबडीहरू छैनन्
+1. **जितको अवस्था**: सबै शत्रुहरूलाई विस्फोट गर्नुहोस् र उचित उत्सव प्राप्त गर्नुहोस् (तपाईंले यसलाई कमाउनुभएको छ!)
+2. **हारको अवस्था**: जीवन समाप्त गर्नुहोस् र पराजय स्क्रिनको सामना गर्नुहोस्
+3. **पुनः सुरु गर्ने प्रणाली**: Enter थिचेर तुरुन्तै फर्कनुहोस् - किनकि एक खेल कहिल्यै पर्याप्त हुँदैन
+4. **राज्य व्यवस्थापन**: प्रत्येक पटक सफा स्लेट - कुनै बाँकी शत्रुहरू वा अघिल्लो खेलबाट अजीब गडबडीहरू छैनन्
 
 ## सुरु गर्दै
 
-आफ्नो विकास वातावरण तयार गरौं। तपाईंले अघिल्लो पाठहरूबाट आफ्नो स्पेस गेम फाइलहरू तयार राख्नुपर्छ।
+आफ्नो विकास वातावरण तयार गरौं। तपाईंले अघिल्लो पाठहरूबाट सबै स्पेस गेम फाइलहरू तयार गर्नुपर्छ।
 
 **तपाईंको परियोजना यस्तो देखिनुपर्छ:**
 
@@ -76,17 +184,43 @@ npm start
 **यो आदेश:**
 - `http://localhost:5000` मा स्थानीय सर्भर चलाउँछ
 - तपाईंको फाइलहरू ठीकसँग सेवा दिन्छ
-- परिवर्तन गर्दा स्वतः ताजा हुन्छ
-
-`http://localhost:5000` आफ्नो ब्राउजरमा खोल्नुहोस् र तपाईंको खेल चलिरहेको छ भनी पुष्टि गर्नुहोस्। तपाईंले चलाउन, गोली हान्न, र शत्रुहरूसँग अन्तरक्रिया गर्न सक्षम हुनुहुनेछ। एकपटक पुष्टि भएपछि, हामी कार्यान्वयनको प्रक्रियामा अगाडि बढ्न सक्छौं।
-
-> 💡 **प्रो टिप**: Visual Studio Code मा चेतावनीहरूबाट बच्नको लागि, `gameLoopId` लाई आफ्नो फाइलको माथि `let gameLoopId;` को रूपमा घोषणा गर्नुहोस्, यसको सट्टा `window.onload` फङ्सन भित्र घोषणा गर्ने। यसले आधुनिक JavaScript भेरिएबल घोषणा गर्ने उत्तम अभ्यासलाई पछ्याउँछ।
+- तपाईंले परिवर्तन गर्दा स्वतः ताजा हुन्छ
+
+`http://localhost:5000` आफ्नो ब्राउजरमा खोल्नुहोस् र आफ्नो खेल चलिरहेको छ भनी पुष्टि गर्नुहोस्। तपाईंले सर्न, शूट गर्न, र शत्रुहरूसँग अन्तरक्रिया गर्न सक्षम हुनुहुन्छ। एकपटक पुष्टि भएपछि, हामी कार्यान्वयनमा अगाडि बढ्न सक्छौं।
+
+> 💡 **प्रो टिप**: Visual Studio Code मा चेतावनीहरूबाट बच्न, `gameLoopId` लाई `window.onload` फङ्सन भित्र घोषणा गर्नुको सट्टा आफ्नो फाइलको माथि `let gameLoopId;` को रूपमा घोषणा गर्नुहोस्। यसले आधुनिक JavaScript भेरिएबल घोषणा गर्ने उत्तम अभ्यासहरू अनुसरण गर्दछ।
+
+```mermaid
+flowchart TD
+    A["1. Condition Tracking"] --> B["2. Event Handlers"]
+    B --> C["3. Message Constants"]
+    C --> D["4. Restart Controls"]
+    D --> E["5. Message Display"]
+    E --> F["6. Reset System"]
+    
+    G["isHeroDead()\nisEnemiesDead()"] --> A
+    H["Collision Events\nEnd Game Events"] --> B
+    I["GAME_END_WIN\nGAME_END_LOSS"] --> C
+    J["Enter Key\nRestart Trigger"] --> D
+    K["Victory/Defeat\nColor-coded Text"] --> E
+    L["State Cleanup\nFresh Initialization"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 ## कार्यान्वयन चरणहरू
 
 ### चरण १: अन्त्य अवस्था ट्र्याक गर्ने फङ्सनहरू सिर्जना गर्नुहोस्
 
-हामीलाई खेल कहिले अन्त्य हुनुपर्छ भनेर अनुगमन गर्ने फङ्सनहरू आवश्यक छ। जस्तै अन्तर्राष्ट्रिय स्पेस स्टेशनमा सेन्सरहरूले महत्त्वपूर्ण प्रणालीहरू निरन्तर अनुगमन गर्छन्, यी फङ्सनहरूले खेलको अवस्था निरन्तर जाँच गर्नेछन्।
+हामीलाई खेल कहिले समाप्त हुनुपर्छ भनेर निगरानी गर्ने फङ्सनहरू चाहिन्छ। जस्तै अन्तर्राष्ट्रिय स्पेस स्टेशनमा सेन्सरहरूले महत्त्वपूर्ण प्रणालीहरू निरन्तर निगरानी गर्छन्, यी फङ्सनहरूले खेलको अवस्था निरन्तर जाँच गर्नेछन्।
 
 ```javascript
 function isHeroDead() {
@@ -100,15 +234,49 @@ function isEnemiesDead() {
 ```
 
 **भित्र के भइरहेको छ:**
-- **जाँच्छ** कि हाम्रो हिरोको जीवन समाप्त भएको छ कि छैन (दु:खद!)
+- **जाँच्छ** कि हाम्रो हिरोको जीवन समाप्त भएको छ कि छैन (आह!)
 - **गणना गर्छ** कि कति शत्रुहरू अझै जीवित छन्
 - **`true` फर्काउँछ** जब युद्धक्षेत्र शत्रुहरूबाट खाली हुन्छ
-- **साधारण true/false तर्क प्रयोग गर्छ** ताकि सबै कुरा सरल रहोस्
-- **फिल्टर गर्छ** सबै खेल वस्तुहरूबाट जीवितहरू पत्ता लगाउन
-
-### चरण २: अन्त्य अवस्थाका लागि इभेन्ट ह्यान्डलरहरू अपडेट गर्नुहोस्
-
-अब हामी यी अवस्था जाँचलाई खेलको इभेन्ट प्रणालीसँग जोड्नेछौं। प्रत्येक पटक टक्कर हुँदा, खेलले मूल्याङ्कन गर्नेछ कि यसले अन्त्य अवस्था ट्रिगर गर्छ कि गर्दैन। यसले महत्त्वपूर्ण खेल घटनाहरूका लागि तत्काल प्रतिक्रिया सिर्जना गर्छ।
+- **सरल true/false तर्क प्रयोग गर्छ** चीजहरू सीधा राख्न
+- **सबै खेल वस्तुहरू फिल्टर गर्छ** जीवितहरू पत्ता लगाउन
+
+### चरण २: अन्त्य अवस्थाहरूका लागि इभेन्ट ह्यान्डलरहरू अपडेट गर्नुहोस्
+
+अब हामी यी अवस्था जाँचहरूलाई खेलको इभेन्ट प्रणालीसँग जडान गर्नेछौं। प्रत्येक पटक टक्कर हुँदा, खेलले मूल्याङ्कन गर्नेछ कि यसले अन्त्य अवस्था ट्रिगर गर्छ कि गर्दैन। यसले महत्त्वपूर्ण खेल घटनाहरूको लागि तुरुन्त प्रतिक्रिया सिर्जना गर्छ।
+
+```mermaid
+sequenceDiagram
+    participant Collision
+    participant GameLogic
+    participant Conditions
+    participant EventSystem
+    participant Display
+    
+    Collision->>GameLogic: Laser hits enemy
+    GameLogic->>GameLogic: Destroy objects
+    GameLogic->>Conditions: Check isEnemiesDead()
+    
+    alt All enemies defeated
+        Conditions->>EventSystem: Emit GAME_END_WIN
+        EventSystem->>Display: Show victory message
+    else Enemies remain
+        Conditions->>GameLogic: Continue game
+    end
+    
+    Collision->>GameLogic: Enemy hits hero
+    GameLogic->>GameLogic: Decrease lives
+    GameLogic->>Conditions: Check isHeroDead()
+    
+    alt Lives = 0
+        Conditions->>EventSystem: Emit GAME_END_LOSS
+        EventSystem->>Display: Show defeat message
+    else Lives remain
+        GameLogic->>Conditions: Check isEnemiesDead()
+        alt All enemies defeated
+            Conditions->>EventSystem: Emit GAME_END_WIN
+        end
+    end
+```
 
 ```javascript
 eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -143,14 +311,14 @@ eventEmitter.on(Messages.GAME_END_LOSS, () => {
 ```
 
 **यहाँ के भइरहेको छ:**
-- **लेजरले शत्रुलाई हान्छ**: दुबै गायब हुन्छन्, तपाईंले अंक प्राप्त गर्नुहुन्छ, र हामी जाँच गर्छौं कि तपाईंले जित्नुभएको छ कि छैन
-- **शत्रुले तपाईंलाई हान्छ**: तपाईंले जीवन गुमाउनुहुन्छ, र हामी जाँच गर्छौं कि तपाईं अझै जीवित हुनुहुन्छ कि छैन
-- **स्मार्ट क्रम**: हामी पहिले हारको जाँच गर्छौं (कसैले पनि एकै समयमा जित्न र हार्न चाहँदैन!)
-- **तत्काल प्रतिक्रिया**: केही महत्त्वपूर्ण घटना भएलगत्तै खेललाई थाहा हुन्छ
+- **लेजरले शत्रुलाई हिर्काउँछ**: दुबै गायब हुन्छन्, तपाईंले अंक प्राप्त गर्नुहुन्छ, र हामी जाँच गर्छौं कि तपाईंले जित्नुभएको छ कि छैन
+- **शत्रुले तपाईंलाई हिर्काउँछ**: तपाईंले जीवन गुमाउनुहुन्छ, र हामी जाँच गर्छौं कि तपाईं अझै जीवित हुनुहुन्छ कि छैन
+- **स्मार्ट क्रम**: हामी पहिले हारको लागि जाँच गर्छौं (कसैले एकै समयमा जित्न र हार्न चाहँदैन!)
+- **तुरुन्त प्रतिक्रिया**: केही महत्त्वपूर्ण घटना भएलगत्तै, खेललाई यसको बारेमा थाहा हुन्छ
 
 ### चरण ३: नयाँ सन्देश स्थिरांकहरू थप्नुहोस्
 
-तपाईंले आफ्नो `Messages` स्थिर वस्तुमा नयाँ सन्देश प्रकारहरू थप्न आवश्यक छ। यी स्थिरांकहरूले स्थिरता कायम राख्न र तपाईंको इभेन्ट प्रणालीमा टाइपोहरू रोक्न मद्दत गर्छ।
+तपाईंले आफ्नो `Messages` स्थिर वस्तुमा नयाँ सन्देश प्रकारहरू थप्न आवश्यक छ। यी स्थिरांकहरूले स्थिरता कायम राख्न मद्दत गर्छ र तपाईंको इभेन्ट प्रणालीमा टाइपोहरू रोक्छ।
 
 ```javascript
 GAME_END_LOSS: "GAME_END_LOSS",
@@ -158,13 +326,13 @@ GAME_END_WIN: "GAME_END_WIN",
 ```
 
 **माथिकोमा, हामीले:**
-- **खेल अन्त्य घटनाहरूका लागि स्थिरांकहरू थपेका छौं** ताकि स्थिरता कायम रहोस्
+- **खेल अन्त्य घटनाहरूका लागि स्थिरांकहरू थपेका छौं** स्थिरता कायम राख्न
 - **वर्णनात्मक नामहरू प्रयोग गरेका छौं** जसले स्पष्ट रूपमा घटनाको उद्देश्य संकेत गर्छ
-- **सन्देश प्रकारहरूको विद्यमान नामकरण परम्परा पछ्याएका छौं**
+- **सन्देश प्रकारहरूको लागि विद्यमान नामकरण परम्परा अनुसरण गरेका छौं**
 
 ### चरण ४: पुनः सुरु गर्ने नियन्त्रणहरू कार्यान्वयन गर्नुहोस्
 
-अब तपाईंले खेलाडीहरूलाई खेल पुनः सुरु गर्न अनुमति दिने किबोर्ड नियन्त्रणहरू थप्नुहुनेछ। Enter कुञ्जी प्राकृतिक विकल्प हो किनभने यो सामान्यत: कार्यहरू पुष्टि गर्ने र नयाँ खेल सुरु गर्नेसँग सम्बन्धित छ।
+अब तपाईंले किबोर्ड नियन्त्रणहरू थप्नुहुनेछ जसले खेलाडीहरूलाई खेल पुनः सुरु गर्न अनुमति दिन्छ। Enter कुञ्जी प्राकृतिक विकल्प हो किनभने यो सामान्यत: कार्यहरू पुष्टि गर्न र नयाँ खेल सुरु गर्नसँग सम्बन्धित छ।
 
 **तपाईंको विद्यमान keydown इभेन्ट लिस्नरमा Enter कुञ्जी पत्ता लगाउने कुरा थप्नुहोस्:**
 
@@ -182,13 +350,13 @@ KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
 
 **तपाईंलाई थाहा हुनुपर्ने कुरा:**
 - **तपाईंको विद्यमान किबोर्ड इभेन्ट ह्यान्डलिङ प्रणालीलाई विस्तार गर्छ**
-- **Enter कुञ्जीलाई पुनः सुरु ट्रिगरको रूपमा प्रयोग गर्छ ताकि प्रयोगकर्ता अनुभव सहज होस्**
-- **अनुकूलन इभेन्ट उत्सर्जन गर्छ** जसलाई तपाईंको खेलका अन्य भागहरूले सुन्न सक्छ
-- **तपाईंको अन्य किबोर्ड नियन्त्रणहरूको समान ढाँचा कायम राख्छ**
+- **Enter कुञ्जीलाई पुनः सुरु ट्रिगरको रूपमा प्रयोग गर्छ** सहज प्रयोगकर्ता अनुभवको लागि
+- **अनुकूलन इभेन्ट प्रसारण गर्छ** जुन तपाईंको खेलका अन्य भागहरूले सुन्न सक्छ
+- **तपाईंको अन्य किबोर्ड नियन्त्रणहरूको जस्तै ढाँचा कायम राख्छ**
 
 ### चरण ५: सन्देश प्रदर्शन प्रणाली सिर्जना गर्नुहोस्
 
-तपाईंको खेलले खेलाडीहरूलाई परिणाम स्पष्ट रूपमा सञ्चार गर्न आवश्यक छ। हामी एउटा सन्देश प्रणाली सिर्जना गर्नेछौं जसले जित र हारको अवस्था रंग-कोड गरिएको पाठ प्रयोग गरेर देखाउँछ, जस्तै प्रारम्भिक कम्प्युटर प्रणालीहरूको टर्मिनल इन्टरफेस जहाँ हरियोले सफलता संकेत गर्थ्यो र रातोले त्रुटिहरू संकेत गर्थ्यो।
+तपाईंको खेलले खेलाडीहरूलाई परिणामहरू स्पष्ट रूपमा सञ्चार गर्न आवश्यक छ। हामी एक सन्देश प्रणाली सिर्जना गर्नेछौं जसले विजयी र पराजय अवस्थाहरू रंग-कोड गरिएको पाठ प्रयोग गरेर प्रदर्शन गर्छ, प्रारम्भिक कम्प्युटर प्रणालीहरूको टर्मिनल इन्टरफेसहरू जस्तै जहाँ हरियोले सफलता संकेत गर्छ र रातोले त्रुटिहरू संकेत गर्छ।
 
 **`displayMessage()` फङ्सन सिर्जना गर्नुहोस्:**
 
@@ -202,11 +370,11 @@ function displayMessage(message, color = "red") {
 ```
 
 **चरणबद्ध रूपमा, यहाँ के भइरहेको छ:**
-- **फन्ट साइज र परिवार सेट गर्छ** ताकि पाठ स्पष्ट र पढ्न योग्य होस्
-- **रंग प्यारामिटर लागू गर्छ** जहाँ "रातो" चेतावनीको लागि डिफल्ट हो
-- **क्यानभासमा पाठलाई क्षैतिज र ठाडो रूपमा केन्द्रित गर्छ**
-- **आधुनिक JavaScript डिफल्ट प्यारामिटर प्रयोग गर्छ** ताकि रंग विकल्प लचिलो होस्
-- **क्यानभास 2D सन्दर्भ प्रयोग गर्छ** ताकि पाठ प्रत्यक्ष रूपमा रेंडर होस्
+- **स्पष्ट, पढ्न मिल्ने पाठको लागि फन्ट आकार र परिवार सेट गर्छ**
+- **रंग प्यारामिटर लागू गर्छ** "रातो" चेतावनीहरूको लागि डिफल्टको रूपमा
+- **क्यानभासमा पाठलाई तेर्सो र ठाडो रूपमा केन्द्रित गर्छ**
+- **लचिलो रंग विकल्पहरूको लागि आधुनिक JavaScript डिफल्ट प्यारामिटरहरू प्रयोग गर्छ**
+- **क्यानभास 2D सन्दर्भ प्रयोग गर्छ** प्रत्यक्ष पाठ रेंडरिङको लागि
 
 **`endGame()` फङ्सन सिर्जना गर्नुहोस्:**
 
@@ -234,12 +402,28 @@ function endGame(win) {
 ```
 
 **यो फङ्सनले के गर्छ:**
-- **सबै कुरा स्थिर बनाउँछ** - अब कुनै जहाज वा लेजरहरू चल्दैनन्
-- **सानो ब्रेक लिन्छ (२००ms)** ताकि अन्तिम फ्रेम पूरा गर्न सकियोस्
-- **स्क्रिन सफा गर्छ र नाटकीय प्रभावका लागि कालो रंग लगाउँछ**
-- **विजेता र हार्नेहरूका लागि फरक सन्देश देखाउँछ**
-- **रंग कोड गर्छ** - राम्रोको लागि हरियो, नराम्रोको लागि रातो
-- **खेलाडीहरूलाई स्पष्ट रूपमा बताउँछ कि कसरी पुनः खेलमा फर्कन सकिन्छ
+- **सबै कुरा स्थिर बनाउँछ** - अब कुनै चल्ने जहाज वा लेजरहरू छैनन्
+- **सानो विराम लिन्छ (२००ms)** अन्तिम फ्रेमलाई चित्रण गर्न दिन
+- **स्क्रिनलाई सफा गर्छ र नाटकीय प्रभावको लागि कालो रंग लगाउँछ**
+- **विजेता र पराजितहरूको लागि फरक सन्देशहरू देखाउँछ**
+- **समाचारलाई रंग-कोड गर्छ** - राम्रोको लागि हरियो, नराम्रोको लागि रातो
+- **खेलाडीहरूलाई स्पष्ट रूपमा बताउँछ** कसरी पुनः खेल्न सुरु गर्ने
+
+### 🔄 **शैक्षिक जाँच**
+**खेलको अवस्था व्यवस्थापन**: रिसेट कार्यक्षमता कार्यान्वयन गर्नु अघि सुनिश्चित गर्नुहोस्:
+- ✅ अन्त्य अवस्थाहरूले स्पष्ट खेल उद्देश्यहरू कसरी सिर्जना गर्छन्?
+- ✅ दृश्य प्रतिक्रिया खेलाडीको बुझाइको लागि किन महत्त्वपूर्ण छ?
+- ✅ उचित सफाइले मेमोरी लीक रोक्न किन महत्त्वपूर्ण छ?
+- ✅ इभेन्ट-ड्राइभन आर्किटेक्चरले सफा अवस्था संक्रमणलाई कसरी सक्षम बनाउँछ?
+
+**छिटो आत्म-परीक्षण**: यदि तपाईंले रिसेटको क्रममा इभेन्ट लिस्नरहरू सफा गर्नुभएन भने के हुन्छ?
+*उत्तर: मेमोरी लीक र डुप्लिकेट इभेन्ट ह्यान्डलरहरूले अप्रत्याशित व्यवहार उत्पन्न गर्छ*
+
+**खेल डिजाइन सिद्धान्तहरू**: तपाईं अहिले कार्यान्वयन गर्दै हुनुहुन्छ:
+- **स्पष्ट उद्देश्यहरू**: खेलाडीहरूले सफलता र असफलता के हो भनेर स्पष्ट रूपमा थाहा पाउँछन्
+- **तुरुन्त प्रतिक्रिया**: खेलको अवस्था परिवर्तन तुरुन्तै सञ्चार गरिन्छ
+- **प्रयोगकर्ता नियन्त्रण**: खेलाडीहरू तयार हुँदा पुनः सुरु गर्न सक्छन्
+- **प्रणाली विश्वसनीयता**: उचित सफाइले बग र प्रदर्शन समस्याहरू रोक्छ
 
 ### चरण ६: खेल रिसेट कार्यक्षमता कार्यान्वयन गर्नुहोस्
 
@@ -268,13 +452,13 @@ function resetGame() {
 
 **प्रत्येक भाग बुझौं:**
 - **जाँच्छ** कि खेल लूप हाल चलिरहेको छ कि छैन रिसेट गर्नु अघि
-- **विद्यमान खेल लूप सफा गर्छ** ताकि सबै हालको खेल गतिविधि रोकियोस्
-- **सबै इभेन्ट लिस्नरहरू हटाउँछ** ताकि मेमोरी लीक रोकियोस्
+- **अस्तित्वमा रहेको खेल लूपलाई सफा गर्छ** सबै हालको खेल गतिविधि रोक्न
+- **सबै इभेन्ट लिस्नरहरू हटाउँछ** मेमोरी लीक रोक्न
 - **ताजा वस्तुहरू र भेरिएबलहरूसँग खेलको अवस्था पुनः आरम्भ गर्छ**
 - **सबै आवश्यक खेल फङ्सनहरूसँग नयाँ खेल लूप सुरु गर्छ**
-- **समान १००ms अन्तराल कायम राख्छ** ताकि खेल प्रदर्शन स्थिर रहोस्
+- **एकै १००ms अन्तर कायम राख्छ** स्थिर खेल प्रदर्शनको लागि
 
-**Enter कुञ्जी इभेन्ट ह्यान्डलरलाई तपाईंको `initGame()` फङ्सनमा थप्नुहोस्:**
+**तपाईंको `initGame()` फङ्सनमा Enter कुञ्जी इभेन्ट ह्यान्डलर थप्नुहोस्:**
 
 ```javascript
 eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
@@ -282,7 +466,7 @@ eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
 });
 ```
 
-**तपाईंको EventEmitter क्लासमा `clear()` मेथड थप्नुहोस्:**
+**तपाईंको EventEmitter वर्गमा `clear()` विधि थप्नुहोस्:**
 
 ```javascript
 clear() {
@@ -290,42 +474,160 @@ clear() {
 }
 ```
 
-**महत्त्वपूर्ण बिन्दुहरू सम्झनुहोस्:**
-- **Enter कुञ्जी प्रेसलाई खेल रिसेट कार्यक्षमतासँग जोड्छ**
-- **खेल आरम्भ गर्दा यो इभेन्ट लिस्नर दर्ता गर्छ**
+**स्मरण गर्नुपर्ने मुख्य बुँदाहरू:**
+- **Enter कुञ्जी प्रेसलाई खेल रिसेट कार्यक्षमतासँग जडान गर्छ**
+- **खेलको सुरुवातको क्रममा यो इभेन्ट लिस्नर दर्ता गर्छ**
 - **खेलहरू बीच इभेन्ट ह्यान्डलरहरू सफा गरेर मेमोरी लीक रोक्छ**
-- **लिस्नर वस्तुलाई ताजा आरम्भका लागि खाली अवस्थामा रिसेट गर्छ**
+- **ताजा सुरुवातको लागि लिस्नर वस्तु खाली अवस्थामा रिसेट गर्छ**
 
 ## बधाई छ! 🎉
 
-👽 💥 🚀 तपाईंले जमिनदेखि पूर्ण खेल सफलतापूर्वक निर्माण गर्नुभएको छ। जस्तै १९७० को दशकमा पहिलो भिडियो खेल बनाउने प्रोग्रामरहरूले कोडका लाइनहरूलाई अन्तरक्रियात्मक अनुभवमा रूपान्तरण गरे, तपाईंले उचित खेल यान्त्रिकी र प्रयोगकर्ता प्रतिक्रिया सहित खेल निर्माण गर्नुभएको छ। 🚀 💥 👽
+👽 💥 🚀 तपाईंले जमिनदेखि पूर्ण खेल सफलतापूर्वक निर्माण गर्नुभएको छ। जस्तै १९७० को दशकमा पहिलो भिडियो खेलहरू सिर्जना गर्ने प्रोग्रामरहरूले कोडका रेखाहरूलाई अन्तरक्रियात्मक अनुभवमा रूपान्तरण गरे, तपाईंले उचित खेल यान्त्रिकी र प्रयोगकर्ता प्रतिक्रियासहितको अनुभव सिर्जना गर्नुभएको छ। 🚀 💥 👽
 
 **तपाईंले हासिल गर्नुभएको छ:**
 - **जित र हारको अवस्था कार्यान्वयन गर्नुभएको छ** प्रयोगकर्ता प्रतिक्रियासहित
-- **सहज पुनः सुरु गर्ने प्रणाली सिर्जना गर्नुभएको छ** निरन्तर गेमप्लेका लागि
-- **खेल अवस्थाहरूका लागि स्पष्ट दृश्य सञ्चार डिजाइन गर्नुभएको छ**
+- **सतत गेमप्लेका लागि सहज पुनः सुरु प्रणाली सिर्जना गर्नुभएको छ**
+- **खेल अवस्थाहरूको लागि स्पष्ट दृश्य सञ्चार डिजाइन गर्नुभएको छ**
 - **जटिल खेल अवस्था संक्रमण र सफाइ व्यवस्थापन गर्नुभएको छ**
-- **सबै घटकहरूलाई एक सुसंगत, खेल्न योग्य खेलमा संयोजन गर्नुभएको छ**
+- **सबै घटकहरूलाई एक सुसंगत, खेल्न मिल्ने खेलमा संयोजन गर्नुभएको छ**
+
+### 🔄 **शैक्षिक जाँच**
+**पूर्ण खेल विकास प्रणाली**: पूर्ण खेल विकास चक्रको तपाईंको महारथको उत्सव मनाउनुहोस्:
+- ✅ अन्त्य अवस्थाहरूले सन्तोषजनक खेलाडी अनुभवहरू कसरी सिर्जना गर्छन्?
+- ✅ खेल स्थिरताका लागि उचित अवस्था व्यवस्थापन किन महत्त्वपूर्ण छ?
+- ✅ दृश्य प्रतिक्रिया खेलाडीको बुझाइलाई कसरी बढाउँछ?
+- ✅ पुनः सुरु प्रणालीले खेलाडीको रुचि कायम राख्न के भूमिका खेल्छ?
+
+**प्रणाली महारथ**: तपाईंको पूर्ण खेलले प्रदर्शन गर्छ:
+- **पूर्ण-स्ट्याक खेल विकास**: ग्राफिक्सदेखि इनपुटसम्म अवस्था व्यवस्थापनसम्म
+- **व्यावसायिक आर्किटेक्चर**: उचित सफाइसहितको इभेन्ट-ड्राइभन प्रणाली
+- **प्रयोगकर्ता अनुभव डिजाइन**: स्पष्ट प्रतिक्रिया र सहज नियन्त्रणहरू
+- **प्रदर्शन अनुकूलन**: विभिन्न उपकरण र ब्राउजरहरूको लागि कुशल रेंडरिङ र मेमोरी व्यवस्थापन
+- **पोलिश र पूर्णता**: खेललाई समाप्त महसुस गराउने सबै विवरणहरू
+
+**उद्योग-तयार सीपहरू**: तपाईंले कार्यान्वयन गर्नुभएको छ:
+- **खेल लूप आर्किटेक्चर**: स्थिर प्रदर्शनसहितको वास्तविक-समय प्रणाली
+- **इभेन्ट-ड्राइभन प्रोग्रामिङ**: स्केल प्रभावकारी प्रणालीहरू
+- **अवस्था व्यवस्थापन**: जटिल डाटा ह्यान्डलिङ र जीवनचक्र व्यवस्थापन
+- **प्रयोगकर्ता इन्टरफेस डिजाइन**: स्पष्ट सञ्चार र प्रतिक्रियाशील नियन्त्रणहरू
+- **परीक्षण र डिबगिङ**: पुनरावृत्त विकास र समस्या समाधान
+
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नु
+### 🌟 **तपाईंको एक महिनाको गेम विकास करियर**
+- [ ] विभिन्न विधा र मेकानिक्सहरू अन्वेषण गर्दै धेरै पूर्ण खेलहरू निर्माण गर्नुहोस्
+- [ ] Phaser वा Three.js जस्ता उन्नत गेम विकास फ्रेमवर्कहरू सिक्नुहोस्
+- [ ] ओपन सोर्स गेम विकास परियोजनाहरूमा योगदान गर्नुहोस्
+- [ ] गेम डिजाइन सिद्धान्तहरू र खेलाडी मनोविज्ञान अध्ययन गर्नुहोस्
+- [ ] तपाईंको गेम विकास सीपहरू प्रदर्शन गर्ने पोर्टफोलियो बनाउनुहोस्
+- [ ] गेम विकास समुदायसँग जडान गर्नुहोस् र सिकाइ जारी राख्नुहोस्
+
+## 🎯 तपाईंको पूर्ण गेम विकास मास्टरी समयरेखा
+
+```mermaid
+timeline
+    title Complete Game Development Learning Progression
+    
+    section Foundation (Lessons 1-2)
+        Game Architecture: Project structure
+                         : Asset management
+                         : Canvas basics
+                         : Event systems
+        
+    section Interaction Systems (Lessons 3-4)
+        Player Control: Input handling
+                      : Movement mechanics
+                      : Collision detection
+                      : Physics simulation
+        
+    section Game Mechanics (Lesson 5)
+        Feedback Systems: Scoring mechanisms
+                        : Life management
+                        : Visual communication
+                        : Player motivation
+        
+    section Game Completion (Lesson 6)
+        Polish & Flow: End conditions
+                     : State management
+                     : Restart systems
+                     : User experience
+        
+    section Advanced Features (1 week)
+        Enhancement Skills: Audio integration
+                          : Visual effects
+                          : Level progression
+                          : Performance optimization
+        
+    section Professional Development (1 month)
+        Industry Readiness: Framework mastery
+                          : Team collaboration
+                          : Portfolio development
+                          : Community engagement
+        
+    section Career Advancement (3 months)
+        Specialization: Advanced game engines
+                      : Platform deployment
+                      : Monetization strategies
+                      : Industry networking
+```
+
+### 🛠️ तपाईंको पूर्ण गेम विकास उपकरणको सारांश
+
+यो सम्पूर्ण स्पेस गेम श्रृंखला पूरा गरेपछि, तपाईंले निम्नमा दक्षता हासिल गर्नुभएको छ:
+- **गेम आर्किटेक्चर**: इभेन्ट-ड्राइभन प्रणालीहरू, गेम लूपहरू, र स्टेट व्यवस्थापन
+- **ग्राफिक्स प्रोग्रामिङ**: क्यानभास API, स्प्राइट रेंडरिङ, र दृश्य प्रभावहरू
+- **इनपुट प्रणालीहरू**: किबोर्ड ह्यान्डलिङ, टक्कर पत्ता लगाउने, र उत्तरदायी नियन्त्रणहरू
+- **गेम डिजाइन**: खेलाडी प्रतिक्रिया, प्रगति प्रणालीहरू, र संलग्नता मेकानिक्स
+- **प्रदर्शन अनुकूलन**: प्रभावकारी रेंडरिङ, मेमोरी व्यवस्थापन, र फ्रेम दर नियन्त्रण
+- **प्रयोगकर्ता अनुभव**: स्पष्ट संचार, सहज नियन्त्रणहरू, र परिष्कृत विवरणहरू
+- **व्यावसायिक ढाँचा**: सफा कोड, डिबगिङ प्रविधिहरू, र परियोजना संगठन
+
+**वास्तविक संसारको प्रयोगहरू**: तपाईंको गेम विकास सीपहरू सीधा लागू हुन्छन्:
+- **इन्टरएक्टिभ वेब एप्लिकेसनहरू**: गतिशील इन्टरफेसहरू र वास्तविक समय प्रणालीहरू
+- **डाटा भिजुअलाइजेशन**: एनिमेटेड चार्टहरू र इन्टरएक्टिभ ग्राफिक्स
+- **शैक्षिक प्रविधि**: गेमिफिकेशन र आकर्षक सिकाइ अनुभवहरू
+- **मोबाइल विकास**: टच-आधारित अन्तरक्रियाहरू र प्रदर्शन अनुकूलन
+- **सिमुलेशन सफ्टवेयर**: भौतिक इन्जिनहरू र वास्तविक समय मोडलिङ
+- **रचनात्मक उद्योगहरू**: इन्टरएक्टिभ कला, मनोरञ्जन, र डिजिटल अनुभवहरू
+
+**प्रोफेशनल सीपहरू प्राप्त गरियो**: अब तपाईं गर्न सक्नुहुन्छ:
+- **आर्किटेक्ट** स्क्र्याचबाट जटिल इन्टरएक्टिभ प्रणालीहरू
+- **डिबग** वास्तविक समय एप्लिकेसनहरू व्यवस्थित दृष्टिकोण प्रयोग गरेर
+- **अनुकूलन** सहज प्रयोगकर्ता अनुभवहरूको लागि प्रदर्शन
+- **डिजाइन** आकर्षक प्रयोगकर्ता इन्टरफेसहरू र अन्तरक्रिया ढाँचा
+- **सहयोग** प्राविधिक परियोजनाहरूमा प्रभावकारी रूपमा उचित कोड संगठनको साथ
+
+**गेम विकास अवधारणाहरूमा दक्षता हासिल गरियो**:
+- **रियल-टाइम प्रणालीहरू**: गेम लूपहरू, फ्रेम दर व्यवस्थापन, र प्रदर्शन
+- **इभेन्ट-ड्राइभन आर्किटेक्चर**: डिकपल्ड प्रणालीहरू र सन्देश पासिङ
+- **स्टेट व्यवस्थापन**: जटिल डाटा ह्यान्डलिङ र जीवनचक्र व्यवस्थापन
+- **प्रयोगकर्ता इन्टरफेस प्रोग्रामिङ**: क्यानभास ग्राफिक्स र उत्तरदायी डिजाइन
+- **गेम डिजाइन सिद्धान्त**: खेलाडी मनोविज्ञान र संलग्नता मेकानिक्स
+
+**अर्को स्तर**: तपाईं उन्नत गेम फ्रेमवर्कहरू, 3D ग्राफिक्स, मल्टिप्लेयर प्रणालीहरू अन्वेषण गर्न वा व्यावसायिक गेम विकास भूमिकाहरूमा संक्रमण गर्न तयार हुनुहुन्छ!
+
+🌟 **उपलब्धि अनलक गरियो**: तपाईंले पूर्ण गेम विकास यात्रा पूरा गर्नुभएको छ र स्क्र्याचबाट व्यावसायिक-गुणस्तरको इन्टरएक्टिभ अनुभव निर्माण गर्नुभएको छ!
+
+**गेम विकास समुदायमा स्वागत छ!** 🎮✨
 
 ## GitHub Copilot Agent Challenge 🚀
 
-निम्न चुनौती पूरा गर्न Agent मोड प्रयोग गर्नुहोस्:
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** स्तर प्रगति प्रणाली कार्यान्वयन गरेर स्पेस गेमलाई सुधार गर्नुहोस् जसमा बढ्दो कठिनाइ र बोनस सुविधाहरू समावेश छन्।
+**विवरण:** स्तर प्रगति प्रणाली लागू गरेर स्पेस गेमलाई सुधार गर्नुहोस् जसमा बढ्दो कठिनाइ र बोनस सुविधाहरू समावेश छन्।
 
-**प्रेरणा:** बहु-स्तरीय स्पेस गेम प्रणाली सिर्जना गर्नुहोस् जहाँ प्रत्येक स्तरमा बढी शत्रु जहाजहरू उच्च गति र स्वास्थ्यका साथ हुन्छन्। प्रत्येक स्तरसँग बढ्ने स्कोरिङ गुणक थप्नुहोस्, र पावर-अपहरू (जस्तै, द्रुत फायर वा शील्ड) कार्यान्वयन गर्नुहोस् जुन शत्रुहरू नष्ट हुँदा अनियमित रूपमा देखा पर्छ। स्तर पूरा गर्ने बोनस समावेश गर्नुहोस् र विद्यमान स्कोर र जीवनसँगै स्क्रिनमा हालको स्तर देखाउनुहोस्।
+**प्रेरणा:** बहु-स्तरीय स्पेस गेम प्रणाली सिर्जना गर्नुहोस् जहाँ प्रत्येक स्तरमा थप शत्रु जहाजहरू छन् जसको गति र स्वास्थ्य बढेको छ। प्रत्येक स्तरसँग स्कोरिङ गुणक थप्नुहोस्, र पावर-अपहरू (जस्तै, र्यापिड फायर वा शील्ड) लागू गर्नुहोस् जुन शत्रुहरू नष्ट हुँदा अनियमित रूपमा देखा पर्छ। स्तर पूरा गर्ने बोनस समावेश गर्नुहोस् र स्क्रिनमा हालको स्तर स्कोर र जीवनसँगै प्रदर्शन गर्नुहोस्।
 
-[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बारे थप जान्नुहोस्।
 
 ## 🚀 वैकल्पिक सुधार चुनौती
 
-**तपाईंको खेलमा अडियो थप्नुहोस्**: आफ्नो गेमप्ले अनुभवलाई सुधार गर्न ध्वनि प्रभाव कार्यान्वयन गर्नुहोस्! निम्नका लागि अडियो थप्ने विचार गर्नुहोस्:
+**तपाईंको खेलमा अडियो थप्नुहोस्**: ध्वनि प्रभावहरू लागू गरेर तपाईंको गेमप्ले अनुभव सुधार गर्नुहोस्! निम्नका लागि अडियो थप्ने विचार गर्नुहोस्:
 
 - **लेजर शटहरू** जब खेलाडीले फायर गर्छ
-- **शत्रु विनाश** जब जहाजहरू हानिन्छन्
-- **हिरो क्षति** जब खेलाडीले हान्छ
-- **जितको संगीत** जब खेल जितिन्छ
-- **हारको ध्वनि** जब खेल हारिन्छ
+- **शत्रु विनाश** जब जहाजहरू हिट हुन्छन्
+- **नायकलाई क्षति** जब खेलाडीले हिट लिन्छ
+- **विजय संगीत** जब खेल जितिन्छ
+- **पराजय ध्वनि** जब खेल हारिन्छ
 
 **अडियो कार्यान्वयन उदाहरण:**
 
@@ -342,12 +644,12 @@ function playLaserSound() {
 ```
 
 **तपाईंलाई थाहा हुनुपर्ने कुरा:**
-- **विभिन्न ध्वनि प्रभावहरूको लागि अडियो वस्तुहरू सिर्जना गर्छ**
-- **`currentTime` रिसेट गर्छ** ताकि द्रुत फायर ध्वनि प्रभावहरू सम्भव होस्
-- **ब्राउजरको स्वतःप्ले नीतिहरू ह्यान्डल गर्छ** प्रयोगकर्ता अन्तरक्रियाबाट ध्वनि ट्रिगर गरेर
-- **अडियो भोल्युम र टाइमिङ व्यवस्थापन गर्छ** ताकि खेल अनुभव राम्रो होस्
+- **सिर्जना गर्छ** विभिन्न ध्वनि प्रभावहरूको लागि अडियो वस्तुहरू
+- **रीसेट गर्छ** `currentTime` ताकि द्रुत फायर ध्वनि प्रभावहरू अनुमति दिन सकियोस्
+- **ह्यान्डल गर्छ** ब्राउजरको स्वतःप्ले नीतिहरू प्रयोगकर्ता अन्तरक्रियाबाट ध्वनि ट्रिगर गरेर
+- **व्यवस्थापन गर्छ** अडियो भोल्युम र समय राम्रो गेम अनुभवको लागि
 
-> 💡 **शिक्षण स्रोत**: [अडियो स्यान्डबक्स](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) अन्वेषण गर्नुहोस् ताकि JavaScript खेलहरूमा अडियो कार्यान्वयनको बारेमा थप जान्न सकियोस्।
+> 💡 **सिकाइ स्रोत**: यो [अडियो स्यान्डबक्स](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) अन्वेषण गर्नुहोस् जसले जाभास्क्रिप्ट खेलहरूमा अडियो लागू गर्न सिकाउँछ।
 
 ## पोस्ट-लेक्चर क्विज
 
@@ -355,7 +657,7 @@ function playLaserSound() {
 
 ## समीक्षा र आत्म अध्ययन
 
-तपाईंको असाइनमेन्ट भनेको नयाँ नमूना खेल सिर्जना गर्नु हो, त्यसैले बाहिरका केही रोचक खेलहरू अन्वेषण गर्नुहोस् ताकि तपाईंले कुन प्रकारको खेल निर्माण गर्न सक्नुहुन्छ भन्ने थाहा पाउन सकियोस्।
+तपाईंको असाइनमेन्ट नयाँ नमूना खेल सिर्जना गर्नु हो, त्यसैले त्यहाँका केही रोचक खेलहरू अन्वेषण गर्नुहोस् ताकि तपाईं कुन प्रकारको खेल निर्माण गर्न सक्नुहुन्छ भनेर हेर्न सक्नुहुन्छ।
 
 ## असाइनमेन्ट
 
@@ -364,4 +666,4 @@ function playLaserSound() {
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुनेछैनौं।
\ No newline at end of file
diff --git a/translations/ne/7-bank-project/1-template-route/README.md b/translations/ne/7-bank-project/1-template-route/README.md
index 21d69e494b..c3ff8e06bb 100644
--- a/translations/ne/7-bank-project/1-template-route/README.md
+++ b/translations/ne/7-bank-project/1-template-route/README.md
@@ -1,39 +1,86 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5d259f6962464ad91e671083aa0398f4",
-  "translation_date": "2025-10-22T17:07:03+00:00",
+  "original_hash": "351678bece18f07d9daa987a881fb062",
+  "translation_date": "2025-11-03T15:43:11+00:00",
   "source_file": "7-bank-project/1-template-route/README.md",
   "language_code": "ne"
 }
 -->
 # बैंकिङ एप निर्माण भाग १: वेब एपमा HTML टेम्प्लेट र रुटहरू
 
-जब अपोलो ११ को गाइडेन्स कम्प्युटरले सन् १९६९ मा चन्द्रमामा नेभिगेट गर्‍यो, त्यसले सम्पूर्ण प्रणाली पुनः सुरु नगरी विभिन्न प्रोग्रामहरू बीच स्विच गर्नुपर्‍यो। आधुनिक वेब एप्लिकेसनहरू पनि यस्तै काम गर्छन् – तिनीहरूले तपाईंलाई देखिने सामग्री परिवर्तन गर्छन् तर सबै कुरा पुनः लोड गर्दैनन्। यसले आजका प्रयोगकर्ताहरूले अपेक्षा गरेको सहज, प्रतिक्रियात्मक अनुभव सिर्जना गर्छ।
+```mermaid
+journey
+    title Your Banking App Development Journey
+    section SPA Fundamentals
+      Understand single-page apps: 3: Student
+      Learn template concepts: 4: Student
+      Master DOM manipulation: 4: Student
+    section Routing Systems
+      Implement client-side routing: 4: Student
+      Handle browser history: 5: Student
+      Create navigation systems: 5: Student
+    section Professional Patterns
+      Build modular architecture: 5: Student
+      Apply best practices: 5: Student
+      Create user experiences: 5: Student
+```
+
+जब अपोलो ११ को गाइडेन्स कम्प्युटरले १९६९ मा चन्द्रमामा नेभिगेट गर्‍यो, यसले सम्पूर्ण प्रणाली पुनः सुरु नगरी विभिन्न प्रोग्रामहरू बीच स्विच गर्नुपरेको थियो। आधुनिक वेब एपहरू पनि यस्तै काम गर्छन् – तिनीहरूले तपाईंले देख्नुभएको कुरा परिवर्तन गर्छन् तर सबै कुरा सुरुबाट पुनः लोड गर्दैनन्। यसले प्रयोगकर्ताहरूले आज अपेक्षा गर्ने सहज, प्रतिक्रियात्मक अनुभव सिर्जना गर्छ।
 
-परम्परागत वेबसाइटहरूले प्रत्येक अन्तरक्रियाको लागि सम्पूर्ण पृष्ठ पुनः लोड गर्छन् भने आधुनिक वेब एप्सले केवल परिवर्तन गर्नुपर्ने भागहरू अपडेट गर्छन्। यो दृष्टिकोण, मिशन कन्ट्रोलले विभिन्न डिस्प्लेहरू बीच स्विच गर्दा निरन्तर सञ्चार कायम राख्ने तरिकाको जस्तै, हामीले अपेक्षा गरेको तरल अनुभव सिर्जना गर्छ।
+परम्परागत वेबसाइटहरूले प्रत्येक अन्तरक्रियाको लागि सम्पूर्ण पृष्ठ पुनः लोड गर्छन् भने, आधुनिक वेब एपहरूले केवल परिवर्तन गर्न आवश्यक भागहरू अपडेट गर्छन्। यो दृष्टिकोण, मिशन कन्ट्रोलले विभिन्न डिस्प्लेहरू बीच स्विच गर्दा निरन्तर सञ्चार कायम राख्ने तरिकाको जस्तै, हामीले अपेक्षा गरेको तरल अनुभव सिर्जना गर्छ।
 
-यहाँ के कुराले फरक पार्छ:
+यहाँ के कुराले फरकलाई नाटकीय बनाउँछ:
 
-| परम्परागत मल्टि-पेज एप्स | आधुनिक सिंगल-पेज एप्स |
+| परम्परागत मल्टि-पेज एपहरू | आधुनिक सिंगल-पेज एपहरू |
 |----------------------------|-------------------------|
-| **नेभिगेसन** | प्रत्येक स्क्रिनको लागि पूर्ण पृष्ठ पुनः लोड | सामग्री तुरुन्तै स्विच हुन्छ |
-| **प्रदर्शन** | सम्पूर्ण HTML डाउनलोडको कारण ढिलो | आंशिक अपडेटको कारण छिटो |
-| **प्रयोगकर्ता अनुभव** | पृष्ठ झिल्काहरू | सहज, एप-जस्तो ट्रान्जिसनहरू |
-| **डाटा साझेदारी** | पृष्ठहरू बीच कठिन | राज्य व्यवस्थापन सजिलो |
-| **विकास** | धेरै HTML फाइलहरू व्यवस्थापन गर्नुपर्ने | एकल HTML र गतिशील टेम्प्लेटहरू |
+| **नेभिगेसन** | प्रत्येक स्क्रिनको लागि पूर्ण पृष्ठ पुनः लोड | सामग्री तुरुन्त स्विच |
+| **प्रदर्शन** | सम्पूर्ण HTML डाउनलोडको कारण ढिलो | आंशिक अपडेटको साथ छिटो |
+| **प्रयोगकर्ता अनुभव** | पृष्ठ फ्ल्यासहरू झट्का दिने | सहज, एप-जस्तो ट्रान्जिसनहरू |
+| **डाटा साझेदारी** | पृष्ठहरू बीच कठिन | सजिलो स्टेट म्यानेजमेन्ट |
+| **विकास** | धेरै HTML फाइलहरू मर्मत गर्नुपर्ने | एकल HTML र गतिशील टेम्प्लेटहरू |
 
-**विकासको समझ:**
-- **परम्परागत एप्स** प्रत्येक नेभिगेसन कार्यको लागि सर्भर अनुरोध आवश्यक छ
-- **आधुनिक SPAs** एक पटक लोड हुन्छ र सामग्रीलाई जाभास्क्रिप्ट प्रयोग गरेर गतिशील रूपमा अपडेट गर्छ
-- **प्रयोगकर्ता अपेक्षाहरू** अब तुरुन्त, सहज अन्तरक्रियाहरूलाई प्राथमिकता दिन्छ
-- **प्रदर्शन लाभहरू** ब्यान्डविथ कम र छिटो प्रतिक्रिया समावेश गर्दछ
+**विकासको बुझाइ:**
+- **परम्परागत एपहरू** प्रत्येक नेभिगेसन कार्यको लागि सर्भर अनुरोध आवश्यक छ
+- **आधुनिक SPAs** एक पटक लोड हुन्छन् र सामग्रीलाई गतिशील रूपमा अपडेट गर्छन्
+- **प्रयोगकर्ता अपेक्षाहरू** अब तुरुन्त, सहज अन्तरक्रियाहरूलाई प्राथमिकता दिन्छन्
+- **प्रदर्शन लाभहरू** ब्यान्डविथ घटाउने र छिटो प्रतिक्रिया समावेश गर्दछ
 
-यस पाठमा, हामी धेरै स्क्रिनहरू भएको बैंकिङ एप निर्माण गर्नेछौं जसले सहज रूपमा काम गर्छ। वैज्ञानिकहरूले विभिन्न प्रयोगहरूको लागि पुनः कन्फिगर गर्न सकिने मोड्युलर उपकरणहरू प्रयोग गर्ने तरिकाको जस्तै, हामी HTML टेम्प्लेटहरूलाई पुनः प्रयोग गर्न सकिने कम्पोनेन्टको रूपमा प्रयोग गर्नेछौं।
+यस पाठमा, हामी धेरै स्क्रिनहरू भएको बैंकिङ एप निर्माण गर्नेछौं जसले सहज रूपमा एकअर्कासँग प्रवाह गर्छ। वैज्ञानिकहरूले विभिन्न प्रयोगहरूको लागि पुनः कन्फिगर गर्न सकिने मोड्युलर उपकरणहरू प्रयोग गर्ने तरिकाको जस्तै, हामी HTML टेम्प्लेटहरूलाई पुनः प्रयोग गर्न सकिने कम्पोनेन्टको रूपमा प्रयोग गर्नेछौं।
 
-तपाईं HTML टेम्प्लेटहरू (विभिन्न स्क्रिनहरूको लागि पुनः प्रयोग गर्न सकिने ब्लूप्रिन्टहरू), जाभास्क्रिप्ट रुटिङ (स्क्रिनहरू बीच स्विच गर्ने प्रणाली), र ब्राउजरको इतिहास API (जसले ब्याक बटनलाई अपेक्षित रूपमा काम गर्न मद्दत गर्छ) सँग काम गर्नुहुनेछ। यी नै आधारभूत प्रविधिहरू React, Vue, र Angular जस्ता फ्रेमवर्कहरूले प्रयोग गर्छन्।
+तपाईं HTML टेम्प्लेटहरू (विभिन्न स्क्रिनहरूको लागि पुनः प्रयोग गर्न सकिने ब्लूप्रिन्टहरू), जाभास्क्रिप्ट रुटिङ (स्क्रिनहरू बीच स्विच गर्ने प्रणाली), र ब्राउजरको इतिहास API (जसले ब्याक बटनलाई अपेक्षित रूपमा काम गर्न सक्षम बनाउँछ) सँग काम गर्नुहुनेछ। यी फ्रेमवर्कहरू जस्तै React, Vue, र Angular द्वारा प्रयोग गरिने आधारभूत प्रविधिहरू हुन्।
 
-पाठको अन्त्यसम्ममा, तपाईंले व्यावसायिक सिंगल-पेज एप्लिकेसन सिद्धान्तहरू प्रदर्शन गर्ने कार्यरत बैंकिङ एप निर्माण गर्न सक्नुहुनेछ।
+पाठको अन्त्यमा, तपाईंसँग व्यावसायिक सिंगल-पेज एप्लिकेसन सिद्धान्तहरू प्रदर्शन गर्ने कार्यशील बैंकिङ एप हुनेछ।
+
+```mermaid
+mindmap
+  root((Single-Page Applications))
+    Architecture
+      Template System
+      Client-side Routing
+      State Management
+      Event Handling
+    Templates
+      Reusable Components
+      Dynamic Content
+      DOM Manipulation
+      Content Switching
+    Routing
+      URL Management
+      History API
+      Navigation Logic
+      Browser Integration
+    User Experience
+      Fast Navigation
+      Smooth Transitions
+      Consistent State
+      Modern Interactions
+    Performance
+      Reduced Server Requests
+      Faster Page Transitions
+      Efficient Resource Usage
+      Better Responsiveness
+```
 
 ## प्रि-लेक्चर क्विज
 
@@ -41,11 +88,11 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### तपाईंलाई के चाहिन्छ
 
-हामीलाई हाम्रो बैंकिङ एप परीक्षण गर्न स्थानीय वेब सर्भर चाहिन्छ – चिन्ता नगर्नुहोस्, यो जति गाह्रो लाग्छ त्यति छैन! यदि तपाईंले पहिले नै सेटअप गर्नुभएको छैन भने, [Node.js](https://nodejs.org) स्थापना गर्नुहोस् र आफ्नो प्रोजेक्ट फोल्डरबाट `npx lite-server` चलाउनुहोस्। यो उपयोगी कमाण्डले स्थानीय सर्भर सुरु गर्छ र तपाईंको एपलाई ब्राउजरमा स्वतः खोल्छ।
+हामीलाई हाम्रो बैंकिङ एप परीक्षण गर्न स्थानीय वेब सर्भर चाहिन्छ – चिन्ता नगर्नुहोस्, यो जति गाह्रो लाग्छ त्यति छैन! यदि तपाईंले पहिले नै सेट अप गर्नुभएको छैन भने, केवल [Node.js](https://nodejs.org) स्थापना गर्नुहोस् र आफ्नो प्रोजेक्ट फोल्डरबाट `npx lite-server` चलाउनुहोस्। यो उपयोगी कमाण्डले स्थानीय सर्भर सुरु गर्छ र तपाईंको एपलाई ब्राउजरमा स्वतः खोल्छ।
 
 ### तयारी
 
-तपाईंको कम्प्युटरमा `bank` नामको फोल्डर बनाउनुहोस् र त्यसमा `index.html` नामको फाइल राख्नुहोस्। हामी यो HTML [बोइलरप्लेट](https://en.wikipedia.org/wiki/Boilerplate_code) बाट सुरु गर्नेछौं:
+तपाईंको कम्प्युटरमा `bank` नामको फोल्डर बनाउनुहोस् र भित्र `index.html` नामको फाइल बनाउनुहोस्। हामी यो HTML [बोइलरप्लेट](https://en.wikipedia.org/wiki/Boilerplate_code) बाट सुरु गर्नेछौं:
 
 ```html
 <!DOCTYPE html>
@@ -62,15 +109,15 @@ CO_OP_TRANSLATOR_METADATA:
 ```
 
 **यो बोइलरप्लेटले के प्रदान गर्छ:**
-- **HTML5** डकुमेन्ट संरचना उचित DOCTYPE घोषणासहित स्थापना गर्छ
-- **क्यारेक्टर एन्कोडिङ** UTF-8 कन्फिगर गर्छ अन्तर्राष्ट्रिय पाठ समर्थनको लागि
-- **उत्तरदायी डिजाइन सक्षम बनाउँछ** मोबाइल अनुकूलता लागि viewport meta tag प्रयोग गरेर
+- **HTML5 दस्तावेज संरचना** उचित DOCTYPE घोषणासहित स्थापना गर्छ
+- **क्यारेक्टर इन्कोडिङ** UTF-8 को रूपमा कन्फिगर गर्छ अन्तर्राष्ट्रिय पाठ समर्थनको लागि
+- **उत्तरदायी डिजाइन सक्षम बनाउँछ** मोबाइल अनुकूलताको लागि भ्यूपोर्ट मेटा ट्यागको साथ
 - **वर्णनात्मक शीर्षक सेट गर्छ** जुन ब्राउजर ट्याबमा देखिन्छ
 - **सफा बडी सेक्सन सिर्जना गर्छ** जहाँ हामी हाम्रो एप निर्माण गर्नेछौं
 
 > 📁 **प्रोजेक्ट संरचना पूर्वावलोकन**
 > 
-> **पाठको अन्त्यसम्ममा, तपाईंको प्रोजेक्टमा समावेश हुनेछ:**
+> **पाठको अन्त्यमा, तपाईंको प्रोजेक्टमा समावेश हुनेछ:**
 > ```
 > bank/
 > ├── index.html      <!-- Main HTML with templates -->
@@ -79,42 +126,60 @@ CO_OP_TRANSLATOR_METADATA:
 > ```
 > 
 > **फाइल जिम्मेवारीहरू:**
-> - **index.html**: सबै टेम्प्लेटहरू समावेश गर्दछ र एप संरचना प्रदान गर्छ
+> - **index.html**: सबै टेम्प्लेटहरू समावेश गर्दछ र एप संरचना प्रदान गर्दछ
 > - **app.js**: रुटिङ, नेभिगेसन, र टेम्प्लेट व्यवस्थापन सम्हाल्छ
-> - **टेम्प्लेटहरू**: लगइन, ड्यासबोर्ड, र अन्य स्क्रिनहरूको UI परिभाषित गर्छ
+> - **टेम्प्लेटहरू**: लगइन, ड्यासबोर्ड, र अन्य स्क्रिनहरूको UI परिभाषित गर्दछ
 
 ---
 
 ## HTML टेम्प्लेटहरू
 
-टेम्प्लेटहरूले वेब विकासमा आधारभूत समस्याको समाधान गर्छन्। जब गुटेनबर्गले १४४० को दशकमा चलायमान टाइप प्रिन्टिङ आविष्कार गरे, उनले सम्पूर्ण पृष्ठहरू कोर्ने सट्टा पुनः प्रयोग गर्न सकिने अक्षर ब्लकहरू सिर्जना गर्न सकिने महसुस गरे। HTML टेम्प्लेटहरू पनि यही सिद्धान्तमा काम गर्छन् – प्रत्येक स्क्रिनको लागि अलग HTML फाइलहरू सिर्जना गर्ने सट्टा, तपाईं पुनः प्रयोग गर्न सकिने संरचनाहरू परिभाषित गर्नुहुन्छ जुन आवश्यक पर्दा प्रदर्शन गर्न सकिन्छ।
+टेम्प्लेटहरूले वेब विकासमा मौलिक समस्या समाधान गर्छन्। जब गुटेनबर्गले १४४० को दशकमा चलायमान प्रकारको मुद्रण आविष्कार गरे, उनले सम्पूर्ण पृष्ठहरू कुँद्नको सट्टा पुनः प्रयोग गर्न सकिने अक्षर ब्लकहरू सिर्जना गर्न सकिने र आवश्यक अनुसार व्यवस्था गर्न सकिने महसुस गरे। HTML टेम्प्लेटहरू पनि त्यही सिद्धान्तमा काम गर्छन् – प्रत्येक स्क्रिनको लागि अलग HTML फाइलहरू सिर्जना गर्नको सट्टा, तपाईं पुनः प्रयोग गर्न सकिने संरचनाहरू परिभाषित गर्नुहुन्छ जुन आवश्यक पर्दा प्रदर्शन गर्न सकिन्छ।
 
-टेम्प्लेटहरूलाई तपाईंको एपका विभिन्न भागहरूको ब्लूप्रिन्टको रूपमा सोच्नुहोस्। जस्तै एक आर्किटेक्टले एक ब्लूप्रिन्ट बनाउँछ र समान कोठाहरू पुनः कोर्ने सट्टा धेरै पटक प्रयोग गर्छ, हामी एक पटक टेम्प्लेटहरू बनाउँछौं र आवश्यक पर्दा तिनीहरूलाई प्रयोग गर्छौं। ब्राउजरले यी टेम्प्लेटहरूलाई लुकाएर राख्छ जबसम्म जाभास्क्रिप्टले तिनीहरूलाई सक्रिय गर्दैन।
+```mermaid
+flowchart TD
+    A["📋 Template Definition"] --> B["💬 Hidden in DOM"]
+    B --> C["🔍 JavaScript Finds Template"]
+    C --> D["📋 Clone Template Content"]
+    D --> E["🔗 Attach to Visible DOM"]
+    E --> F["👁️ User Sees Content"]
+    
+    G["Login Template"] --> A
+    H["Dashboard Template"] --> A
+    I["Future Templates"] --> A
+    
+    style A fill:#e3f2fd
+    style D fill:#e8f5e8
+    style F fill:#fff3e0
+    style B fill:#f3e5f5
+```
 
-यदि तपाईं वेब पृष्ठको लागि धेरै स्क्रिनहरू सिर्जना गर्न चाहनुहुन्छ भने, एउटा समाधान भनेको तपाईंले देखाउन चाहनुभएको प्रत्येक स्क्रिनको लागि एउटा HTML फाइल बनाउनु हो। तर, यो समाधानले केही असुविधा ल्याउँछ:
+टेम्प्लेटहरूलाई तपाईंको एपका विभिन्न भागहरूको ब्लूप्रिन्टको रूपमा सोच्नुहोस्। जस्तै एक आर्किटेक्टले एक ब्लूप्रिन्ट बनाउँछ र समान कोठाहरू पुनः रेखांकन नगरी धेरै पटक प्रयोग गर्छ, हामी एक पटक टेम्प्लेटहरू सिर्जना गर्छौं र आवश्यक पर्दा तिनीहरूलाई प्रयोग गर्छौं। ब्राउजरले यी टेम्प्लेटहरूलाई लुकाउँछ जबसम्म जाभास्क्रिप्टले तिनीहरूलाई सक्रिय गर्दैन।
 
-- स्क्रिन स्विच गर्दा सम्पूर्ण HTML पुनः लोड गर्नुपर्छ, जसले गर्दा ढिलो हुन सक्छ।
+यदि तपाईं वेब पृष्ठको लागि धेरै स्क्रिनहरू सिर्जना गर्न चाहनुहुन्छ भने, एउटा समाधान भनेको तपाईंले देखाउन चाहनुभएको प्रत्येक स्क्रिनको लागि एउटा HTML फाइल सिर्जना गर्नु हो। तर, यो समाधानले केही असुविधा ल्याउँछ:
+
+- स्क्रिन स्विच गर्दा सम्पूर्ण HTML पुनः लोड गर्नुपर्छ, जसले ढिलो हुन सक्छ।
 - विभिन्न स्क्रिनहरू बीच डाटा साझा गर्न गाह्रो हुन्छ।
 
-अर्को दृष्टिकोण भनेको केवल एक HTML फाइल राख्नु हो, र `<template>` एलिमेन्ट प्रयोग गरेर धेरै [HTML टेम्प्लेटहरू](https://developer.mozilla.org/docs/Web/HTML/Element/template) परिभाषित गर्नु हो। टेम्प्लेट एक पुनः प्रयोग गर्न सकिने HTML ब्लक हो जुन ब्राउजरले प्रदर्शन गर्दैन, र यसलाई रनटाइममा जाभास्क्रिप्ट प्रयोग गरेर सक्रिय गर्नुपर्छ।
+अर्को दृष्टिकोण भनेको केवल एक HTML फाइल राख्नु हो, र `<template>` तत्व प्रयोग गरेर धेरै [HTML टेम्प्लेटहरू](https://developer.mozilla.org/docs/Web/HTML/Element/template) परिभाषित गर्नु हो। टेम्प्लेट एक पुनः प्रयोग गर्न सकिने HTML ब्लक हो जुन ब्राउजरले प्रदर्शन गर्दैन, र रनटाइममा जाभास्क्रिप्ट प्रयोग गरेर सक्रिय गर्नुपर्छ।
 
 ### यसलाई निर्माण गरौं
 
-हामी दुई मुख्य स्क्रिनहरू भएको बैंक एप बनाउनेछौं: एक लगइन पृष्ठ र एक ड्यासबोर्ड। पहिलो, हामी हाम्रो HTML बडीमा एउटा प्लेसहोल्डर एलिमेन्ट थप्नेछौं – यहीँ हाम्रो विभिन्न स्क्रिनहरू देखिनेछन्:
+हामी दुई मुख्य स्क्रिनहरू भएको बैंक एप निर्माण गर्न जाँदैछौं: लगइन पृष्ठ र ड्यासबोर्ड। पहिलो, हामी हाम्रो HTML बडीमा एउटा प्लेसहोल्डर तत्व थप्नेछौं – यहीँ हाम्रो विभिन्न स्क्रिनहरू देखिनेछन्:
 
 ```html
 <div id="app">Loading...</div>
 ```
 
-**यस प्लेसहोल्डरको समझ:**
-- **ID "app"** भएको कन्टेनर सिर्जना गर्छ जहाँ सबै स्क्रिनहरू प्रदर्शन गरिन्छ
-- **लोडिङ सन्देश देखाउँछ** जबसम्म जाभास्क्रिप्टले पहिलो स्क्रिन सुरु गर्छ
+**यस प्लेसहोल्डरलाई बुझ्दै:**
+- **ID "app" भएको कन्टेनर सिर्जना गर्छ** जहाँ सबै स्क्रिनहरू प्रदर्शन गरिनेछन्
+- **लोडिङ सन्देश देखाउँछ** जबसम्म जाभास्क्रिप्टले पहिलो स्क्रिन सुरु गर्दैन
 - **हाम्रो गतिशील सामग्रीको लागि एकल माउन्टिङ पोइन्ट प्रदान गर्छ**
 - **जाभास्क्रिप्टबाट सजिलो लक्ष्यीकरण सक्षम बनाउँछ** `document.getElementById()` प्रयोग गरेर
 
-> 💡 **प्रो टिप**: किनभने यस एलिमेन्टको सामग्री प्रतिस्थापन हुनेछ, हामी यसमा लोडिङ सन्देश वा सूचक राख्न सक्छौं जुन एप लोड हुँदा देखिनेछ।
+> 💡 **प्रो टिप**: किनकि यस तत्वको सामग्री प्रतिस्थापन गरिनेछ, हामी लोडिङ सन्देश वा सूचक राख्न सक्छौं जुन एप लोड हुँदा देखाइनेछ।
 
-अब, HTML टेम्प्लेट लगइन पृष्ठको लागि तल थपौं। अहिले हामी त्यहाँ एउटा शीर्षक र एउटा सेक्सन राख्नेछौं जसमा नेभिगेसन गर्न प्रयोग गरिने लिंक हुनेछ।
+अब, हामी लगइन पृष्ठको लागि HTML टेम्प्लेट तल थप्नेछौं। अहिलेका लागि हामी त्यहाँ एउटा शीर्षक र एउटा सेक्सन राख्नेछौं जसमा नेभिगेसन गर्न प्रयोग गरिने लिंक हुनेछ।
 
 ```html
 <template id="login">
@@ -125,11 +190,11 @@ CO_OP_TRANSLATOR_METADATA:
 </template>
 ```
 
-**यस लगइन टेम्प्लेटको विश्लेषण:**
-- **"login"** नामक अद्वितीय पहिचानसहित टेम्प्लेट परिभाषित गर्छ जाभास्क्रिप्ट लक्ष्यीकरणको लागि
-- **मुख्य हेडिङ समावेश गर्छ** जसले एपको ब्रान्डिङ स्थापना गर्छ
-- **सम्बन्धित सामग्री समूह गर्न** एक सेम्यान्टिक `<section>` एलिमेन्ट समावेश गर्छ
-- **नेभिगेसन लिंक प्रदान गर्छ** जसले प्रयोगकर्ताहरूलाई ड्यासबोर्डमा रुट गर्छ
+**यस लगइन टेम्प्लेटलाई तोड्दै:**
+- **जाभास्क्रिप्ट लक्ष्यीकरणको लागि अद्वितीय पहिचानकर्ता "login" भएको टेम्प्लेट परिभाषित गर्छ**
+- **एपको ब्रान्डिङ स्थापना गर्ने मुख्य शीर्षक समावेश गर्दछ**
+- **सम्बन्धित सामग्री समूह गर्नको लागि सेम्यान्टिक `<section>` तत्व समावेश गर्दछ**
+- **नेभिगेसन लिंक प्रदान गर्छ** जसले प्रयोगकर्ताहरूलाई ड्यासबोर्डमा रुट गर्नेछ
 
 त्यसपछि हामी ड्यासबोर्ड पृष्ठको लागि अर्को HTML टेम्प्लेट थप्नेछौं। यो पृष्ठमा विभिन्न सेक्सनहरू समावेश हुनेछ:
 
@@ -162,32 +227,48 @@ CO_OP_TRANSLATOR_METADATA:
 </template>
 ```
 
-**ड्यासबोर्डको प्रत्येक भागको समझ:**
-- **पृष्ठ संरचना गर्छ** नेभिगेसन समावेश भएको सेम्यान्टिक `<header>` एलिमेन्ट प्रयोग गरेर
-- **एप शीर्षक प्रदर्शन गर्छ** स्क्रिनहरूमा ब्रान्डिङको लागि
+**ड्यासबोर्डको प्रत्येक भागलाई बुझ्दै:**
+- **सेम्यान्टिक `<header>` तत्व प्रयोग गरेर पृष्ठ संरचना बनाउँछ** जसमा नेभिगेसन समावेश छ
+- **स्क्रिनहरूमा एप शीर्षक निरन्तर प्रदर्शन गर्छ** ब्रान्डिङको लागि
 - **लगआउट लिंक प्रदान गर्छ** जसले लगइन स्क्रिनमा रुट गर्छ
-- **खाताको वर्तमान ब्यालेन्स देखाउँछ** समर्पित सेक्सनमा
+- **खाताको वर्तमान ब्यालेन्स समर्पित सेक्सनमा देखाउँछ**
 - **ट्रान्जेक्सन डाटा व्यवस्थित गर्छ** राम्रोसँग संरचित HTML तालिका प्रयोग गरेर
 - **तालिका हेडर परिभाषित गर्छ** मिति, वस्तु, र रकम स्तम्भहरूको लागि
-- **तालिका बडी खाली राख्छ** गतिशील सामग्री इन्जेक्सनको लागि
+- **तालिका बडी खाली छोड्छ** पछि गतिशील सामग्री इन्जेक्सनको लागि
+
+> 💡 **प्रो टिप**: HTML टेम्प्लेटहरू सिर्जना गर्दा, यदि तपाईंले यसको कस्तो देखिन्छ हेर्न चाहनुहुन्छ भने, `<template>` र `</template>` लाइनहरूलाई `<!-- -->` ले घेरिएर कमेन्ट गर्न सक्नुहुन्छ।
+
+### 🔄 **शैक्षिक जाँच**
+**टेम्प्लेट प्रणाली बुझाइ**: जाभास्क्रिप्ट कार्यान्वयन गर्नु अघि सुनिश्चित गर्नुहोस्:
+- ✅ टेम्प्लेटहरू सामान्य HTML तत्वहरूबाट कसरी फरक छन्
+- ✅ किन टेम्प्लेटहरू जाभास्क्रिप्टले सक्रिय नगरेसम्म लुकेका रहन्छन्
+- ✅ टेम्प्लेटहरूमा सेम्यान्टिक HTML संरचनाको महत्त्व
+- ✅ टेम्प्लेटहरूले पुनः प्रयोग गर्न सकिने UI कम्पोनेन्टहरू कसरी सक्षम बनाउँछन्
 
-> 💡 **प्रो टिप**: HTML टेम्प्लेट बनाउँदा, यदि तपाईं यसलाई कस्तो देखिन्छ हेर्न चाहनुहुन्छ भने, `<template>` र `</template>` लाइनहरूलाई `<!-- -->` ले घेरेर कमेन्ट गर्न सक्नुहुन्छ।
+**छिटो आत्म-परीक्षण**: यदि तपाईंले आफ्नो HTML वरिपरि `<template>` ट्यागहरू हटाउनुभयो भने के हुन्छ?
+*उत्तर: सामग्री तुरुन्तै देखिने हुन्छ र यसको टेम्प्लेट कार्यक्षमता गुमाउँछ*
 
-✅ तपाईंलाई किन लाग्छ कि हामीले टेम्प्लेटहरूमा `id` एट्रिब्युटहरू प्रयोग गरेका छौं? के हामीले क्लासहरू जस्ता अन्य केही प्रयोग गर्न सक्थ्यौं?
+**आर्किटेक्चर लाभहरू**: टेम्प्लेटहरूले प्रदान गर्छ:
+- **पुनः प्रयोगयोग्यता**: एक परिभाषा, धेरै उदाहरणहरू
+- **प्रदर्शन**: कुनै पनि अनावश्यक HTML पार्सिङ छैन
+- **मर्मतयोग्यता**: केन्द्रीय UI संरचना
+- **लचिलोपन**: गतिशील सामग्री स्विचिङ
 
-## जाभास्क्रिप्ट प्रयोग गरेर टेम्प्लेटहरूलाई जीवन्त बनाउने
+✅ तपाईंको विचारमा किन हामीले टेम्प्लेटहरूमा `id` एट्रिब्युटहरू प्रयोग गर्छौं? के हामीले क्लासहरू जस्ता अरू केही प्रयोग गर्न सक्थ्यौं?
 
-अब हामीले हाम्रो टेम्प्लेटहरूलाई कार्यात्मक बनाउनुपर्छ। जस्तै 3D प्रिन्टरले डिजिटल ब्लूप्रिन्टलाई भौतिक वस्तु बनाउँछ, जाभास्क्रिप्टले हाम्रो लुकेका टेम्प्लेटहरूलाई देखिने, अन्तरक्रियात्मक एलिमेन्टहरूमा परिणत गर्छ जसलाई प्रयोगकर्ताहरूले देख्न र प्रयोग गर्न सक्छन्।
+## जाभास्क्रिप्टको साथ टेम्प्लेटहरूलाई जीवन्त बनाउँदै
 
-यो प्रक्रिया तीन निरन्तर चरणहरू अनुसरण गर्छ जसले आधुनिक वेब विकासको आधार बनाउँछ। एक पटक तपाईंले यो ढाँचा बुझ्नुभयो भने, तपाईंले यसलाई धेरै फ्रेमवर्कहरू र लाइब्रेरीहरूमा देख्नुहुनेछ।
+अब हामीले हाम्रो टेम्प्लेटहरूलाई कार्यात्मक बनाउन आवश्यक छ। जस्तै 3D प्रिन्टरले डिजिटल ब्लूप्रिन्टलाई भौतिक वस्तुमा परिणत गर्छ, जाभास्क्रिप्टले हाम्रो लुकेका टेम्प्लेटहरूलाई देखिने, अन्तरक्रियात्मक तत्वहरूमा परिणत गर्छ जुन प्रयोगकर्ताहरूले देख्न र प्रयोग गर्न सक्छन्।
 
-यदि तपाईंले आफ्नो हालको HTML फाइललाई ब्राउजरमा प्रयास गर्नुभयो भने, तपाईंले देख्नुहुनेछ कि यो `Loading...` देखाउँदै अड्किन्छ। त्यसको कारण हामीले HTML टेम्प्लेटहरूलाई सक्रिय गर्न र प्रदर्शन गर्न केही जाभास्क्रिप्ट कोड थप्नुपर्छ।
+यो प्रक्रिया आधुनिक वेब विकासको आधार बनाउने तीन स्थिर चरणहरू अनुसरण गर्दछ। एक पटक तपाईंले यो ढाँचा बुझ्नुभयो भने, तपाईंले यसलाई धेरै फ्रेमवर्क र लाइब्रेरीहरूमा चिन्नेछ।
+
+यदि तपाईंले आफ्नो हालको HTML फाइल ब्राउजरमा प्रयास गर्नुभयो भने, तपाईंले देख्नुहुनेछ कि यो `Loading...` देखाउँदै अड्किएको छ। त्यसको कारण हामीले HTML टेम्प्लेटहरूलाई सक्रिय गर्न र प्रदर्शन गर्न केही जाभास्क्रिप्ट कोड थप्न आवश्यक छ।
 
 टेम्प्लेटलाई सक्रिय गर्नु सामान्यतया ३ चरणमा गरिन्छ:
 
-1. DOM मा टेम्प्लेट एलिमेन्ट प्राप्त गर्नुहोस्, उदाहरणका लागि [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) प्रयोग गरेर।
-2. टेम्प्लेट एलिमेन्टलाई क्लोन गर्नुहोस्, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) प्रयोग गरेर।
-3. यसलाई देखिने एलिमेन्ट अन्तर्गत DOM मा जोड्नुहोस्, उदाहरणका लागि [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) प्रयोग गरेर।
+1. DOM मा टेम्प्लेट तत्व पुनः प्राप्त गर्नुहोस्, उदाहरणका लागि [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) प्रयोग गरेर।
+2. टेम्प्लेट तत्वलाई क्लोन गर्नुहोस्, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) प्रयोग गरेर।
+3. यसलाई देखिने तत्व अन्तर्गत DOM मा संलग्न गर्नुहोस्, उदाहरणका लागि [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) प्रयोग गरेर।
 
 ```mermaid
 flowchart TD
@@ -208,27 +289,27 @@ flowchart TD
 
 **प्रक्रियाको दृश्यात्मक विश्लेषण:**
 - **चरण १** ले DOM संरचनामा लुकेको टेम्प्लेट पत्ता लगाउँछ
-- **चरण २** ले सुरक्षित रूपमा परिमार्जन गर्न सकिने कार्यरत प्रतिलिपि सिर्जना गर्छ
-- **चरण ३** ले प्रतिलिपिलाई देखिने पृष्ठ क्षेत्रमा राख्छ
+- **चरण २** ले सुरक्षित रूपमा परिमार्जन गर्न सकिने कार्यशील प्रतिलिपि सिर्जना गर्छ
+- **चरण ३** ले प्रतिलिपिलाई देखिने पृष्ठ क्षेत्रमा सम्मिलित गर्छ
 - **परिणाम** एक कार्यात्मक स्क्रिन हो जससँग प्रयोगकर्ताहरू अन्तरक्रिया गर्न सक्छन्
 
-✅ हामीले टेम्प्लेटलाई DOM मा जोड्नुअघि किन क्लोन गर्न आवश्यक छ? यदि हामीले यो चरण छोड्यौं भने के हुन्छ?
+✅ किन हामीले टेम्प्लेटलाई DOM मा संलग्न गर्नु अघि क्लोन गर्न आवश्यक छ? तपाईंको विचारमा यदि हामीले यो चरण छोड्यौं भने के हुन्छ?
 
 ### कार्य
 
-तपाईंको प्रोजेक्ट फोल्डरमा `app.js` नामको नयाँ फाइल सिर्जना गर्नुहोस् र उक्त फाइललाई आफ्नो HTML को `<head>` सेक्सनमा इम्पोर्ट गर्नुहोस्:
+तपाईंको प्रोजेक्ट फोल्डरमा `app.js` नामको नयाँ फाइल सिर्जना गर्नुहोस् र HTML को `<head>` सेक्सनमा उक्त फाइललाई आयात गर्नुहोस्:
 
 ```html
 <script src="app.js" defer></script>
 ```
 
-**यस स्क्रिप्ट इम्पोर्टको समझ:**
-- **जाभास्क्रिप्ट फाइललाई हाम्रो HTML डकुमेन्टसँग लिंक गर्छ**
+**यस स्क्रिप्ट आयातलाई बुझ्दै:**
+- **जाभास्क्रिप्ट फाइललाई हाम्रो HTML दस्तावेजसँग लिंक गर्छ**
 - **`defer` एट्रिब्युट प्रयोग गर्छ** स्क्रिप्ट HTML पार्सिङ पूरा भएपछि चल्न सुनिश्चित गर्न
-- **सबै DOM एलिमेन्टहरूमा पहुँच सक्षम बनाउँछ** किनभने तिनीहरू स्क्रिप्ट कार्यान्वयन अघि पूर्ण रूपमा लोड हुन्छन्
+- **सबै DOM तत्वहरूमा पहुँच सक्षम बनाउँछ** किनकि तिनीहरू स्क्रिप्ट कार्यान्वयन अघि पूर्ण रूपमा लोड हुन्छन्
 - **स्क्रिप्ट लोडिङ र प्रदर्शनको लागि आधुनिक उत्तम अभ्यासहरू अनुसरण गर्छ**
 
-अब `app.js` मा, हामी नयाँ `updateRoute` नामक फंक्शन सिर्जना गर्नेछौं:
+अब `app.js` मा, हामी नयाँ फंक्शन `updateRoute` सिर्जना गर्नेछौं:
 
 ```js
 function updateRoute(templateId) {
@@ -241,11 +322,11 @@ function updateRoute(templateId) {
 ```
 
 **चरणबद्ध रूपमा, यहाँ के भइरहेको छ:**
-- **टेम्प्लेट एलिमेन्टलाई यसको अद्वितीय ID प्रयोग गरेर पत्ता लगाउँछ**
-- **`cloneNode(true)` प्रयोग गरेर टेम्प्लेटको गहिरो प्रतिलिपि सिर्जना गर्छ**
-- **कन्टेनर पत्ता लगाउँछ जहाँ सामग्री प्रदर्शन हुनेछ**
+- **टेम्प्लेट तत्वलाई यसको अद्वितीय ID प्रयोग गरेर पत्ता लगाउँछ**
+- **`cloneNode(true)` प्रयोग गरेर टेम्प्लेटको सामग्रीको गहिरो प्रतिलिपि सिर्जना गर्छ**
+- **कन्टेनर पत्ता लगाउँछ जहाँ सामग्री प्रदर्शन गरिनेछ**
 - **कन्टेनरबाट कुनै पनि अवस्थित सामग्री हटाउँछ**
-- **क्लोन गरिएको टेम्प्लेट सामग्रीलाई देखिने DOM मा राख्छ**
+- **क्लोन गरिएको टेम्प्लेट सामग्रीलाई देखिने DOM मा सम्मिलित गर्छ**
 
 अब यस फंक्शनलाई टेम्प्लेटहरूमध्ये एकसँग कल गर्नुहोस् र परिणाम हेर्नुहोस्।
 
@@ -253,8 +334,8 @@ function updateRoute(templateId) {
 updateRoute('login');
 ```
 
-**यस फंक्शन कलले के हासिल गर्छ:**
-- **लगइन टेम्प्लेट सक्रिय गर्छ** यसको ID लाई प्यारामिटरको रूपमा पास गरेर
+**यस फंक्शन कलले के पूरा गर्छ:**
+- **लगइन टेम्प्लेटलाई सक्रिय गर्छ** यसको ID लाई प्यारामिटरको रूपमा पास गरेर
 - **विभिन्न एप स्क्रिनहरू बीच प्रोग्रामेटिक रूपमा स्विच गर्ने तरिका प्रदर्शन गर्छ**
 - **"Loading..." सन्देशको सट्टा लगइन स्क्रिन देखाउँछ**
 
@@ -262,9 +343,26 @@ updateRoute('login');
 
 ## रुटहरू सिर्जना गर्दै
 
-रुटिङ भनेको URL लाई सही सामग्रीसँग जोड्ने कुरा हो। जस्तै प्रारम्भिक टेलिफोन अपरेटरहरूले स्विचबोर्ड प्रयोग गरेर कलहरू जोड्थे – तिनीहरूले आउने अनुरोध लिँदै सही गन्तव्यमा रुट गर्थे। वेब रुटिङ पनि यस्तै काम गर्छ, URL अनुरोध लिँदै कुन सामग्री प्रदर्शन गर्ने निर्धारण गर्छ।
+रुटिङ भनेको URL हरूलाई सही सामग्रीसँग जोड्ने कुरा हो। जस्तै प्रारम्भिक टेलिफोन अपरेटरहरूले स्विचबोर्ड प्रयोग गरेर कलहरू जोड्थे – तिनीहरूले आउने अनुरोध लिँदै सही गन्तव्यमा रुट गर्थे। वेब रुटिङ पनि यस्तै काम गर्छ, URL अनुरोध लिँदै कुन सामग्री प्रदर्शन गर्ने निर्धारण गर्छ।
 
-परम्परागत रूपमा, वेब सर्भरहरूले विभिन्न URL हरूको लागि विभिन्न HTML फाइलहरू सेवा दिन्थे। किनभने हामी सिंगल-पेज एप बनाउँदैछौं, हामीले यो रुटिङ आफैंले जाभास्क्रिप्ट प्रयोग गरेर सम्हाल्नुपर्छ। यसले प्रयोगकर्ता अनुभव र प्रदर्शनमा थप नियन्त्रण दिन्छ।
+```mermaid
+flowchart LR
+    A["🌐 URL Path<br/>/dashboard"] --> B["🗺️ Routes Object<br/>Lookup"]
+    B --> C["🎯 Template ID<br/>'dashboard'"]
+    C --> D["📌 Find Template<br/>getElementById"]
+    D --> E["👁️ Display Screen<br/>Clone & Append"]
+    
+    F["📍 /login"] --> G["🎯 'login'"]
+    H["📍 /unknown"] --> I["❌ Not Found"]
+    I --> J["🔄 Redirect to /login"]
+    
+    style B fill:#e3f2fd
+    style E fill:#e8f5e8
+    style I fill:#ffebee
+    style J fill:#fff3e0
+```
+
+परम्परागत रूपमा, वेब सर्भरहरूले विभिन्न URL हरूको लागि विभिन्न HTML फाइलहरू सेवा गरेर यो सम्हाल्थे। किनकि हामी सिंगल-पेज एप निर्माण गर्दैछौं, हामीले यो रुटिङ आफैं जाभास्क्रिप्टको साथ सम्हाल्न आवश्यक छ। यस दृष्टिकोणले हामीलाई प्रयोगकर्ता अनुभव र प्रदर्शनमा बढी नियन्त्रण दिन्छ।
 
 ```mermaid
 flowchart LR
@@ -283,69 +381,118 @@ flowchart LR
     style J fill:#fff3e0
 ```
 
-**रुटिङ प्रवाहको समझ:**
+**रुटिङ प्रवाहलाई बुझ्दै:**
 - **URL परिवर्तनहरू** हाम्रो रुट्स कन्फिगरेसनमा लुकअप ट्रिगर गर्छ
-- **वैध रुटहरू** विशिष्ट टेम्प्लेट ID हरूसँग म्याप हुन्छन् प्रदर्शनको लागि
-- **अवैध रुटहरू** फलब्याक व्यवहार ट्रिगर गर्छन् भंग अवस्थाहरू रोक्न
-- **टेम्प्लेट रेंडरिङ** हामीले सिकेको तीन-चरण प्रक्रिया अनुसरण गर्छ
-
-वेब एपको कुरा गर्दा, हामी *रुटिङ* लाई URL हरूलाई विशिष्ट स्क्रिनहरूसँग म्याप गर्ने उद्देश्य भन्छौं जुन प्रदर्शन गरिनुपर्छ। धेरै HTML फाइलहरू भएको वेबसाइटमा, यो स्वतः गरिन्छ किनभने फाइल पथहरू URL मा प्रतिबिम्बित हुन्छन्। उदाहरणका लागि, तपाईंको प्रोजेक्ट फोल्डरमा यी फाइलहरू भए:
-
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
+अब हामी `updateRoute` फङ्क्शनलाई अलि परिमार्जन गर्नेछौं। `templateId` लाई सिधै आर्गुमेन्टको रूपमा पास गर्ने सट्टा, हामी पहिले हालको URL हेरेर त्यसबाट `templateId` प्राप्त गर्नेछौं। त्यसपछि हाम्रो म्याप प्रयोग गरेर सम्बन्धित `templateId` मान प्राप्त गर्नेछौं। [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) प्रयोग गरेर URL बाट केवल पाथ सेग्मेन्ट प्राप्त गर्न सकिन्छ।
 
-यदि तपाईंले `mywebsite` लाई रुटको रूपमा वेब सर्भर सिर्जना गर्नुभयो भने, URL म्यापिङ हुनेछ:
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
 
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
 ```
 
-तर, हाम्रो वेब एपको लागि हामी एकल HTML फाइल प्रयोग गर्दैछौं जसमा सबै स्क्रिनहरू समावेश छन्, त्यसैले यो डिफल्ट व्यवहारले हामीलाई मद्दत गर्दैन। हामीले यो म्याप म्यानुअली सिर्जना गर्नुपर्छ र जाभास्क्रिप्ट प्रयोग गरेर प्रदर्शन गरिएको टेम्प्लेट अपडेट गर्नुपर्छ।
+**यहाँ के हुन्छ भन्ने कुरा टुक्रा-टुक्रामा बुझौं:**
+- **Extracts** ब्राउजरको URL बाट हालको पाथ `window.location.pathname` प्रयोग गरेर निकाल्छ।
+- **Looks up** हाम्रो routes object मा सम्बन्धित route configuration खोज्छ।
+- **Retrieves** route configuration बाट `templateId` प्राप्त गर्छ।
+- **Follows** पहिलाको जस्तै template rendering प्रक्रिया अनुसरण गर्छ।
+- **Creates** URL परिवर्तनमा प्रतिक्रिया दिने गतिशील प्रणाली बनाउँछ।
 
-### कार्य
+यहाँ हामीले घोषणा गरेका routes लाई सम्बन्धित template सँग म्याप गरेका छौं। तपाईं ब्राउजरमा URL म्यानुअली परिवर्तन गरेर यो सही काम गर्छ कि भनेर प्रयास गर्न सक्नुहुन्छ।
 
-हामी URL पथहरू र हाम्रो टेम्प्लेटहरू बीच [म्याप](https://en.wikipedia.org/wiki/Associative_array) कार्य
-✅ यदि तपाईं URL मा अज्ञात पथ प्रविष्ट गर्नुहुन्छ भने के हुन्छ? हामी यसलाई कसरी समाधान गर्न सक्छौं?
+✅ यदि तपाईं URL मा कुनै अज्ञात पाथ प्रविष्ट गर्नुहुन्छ भने के हुन्छ? हामी यसलाई कसरी समाधान गर्न सक्छौं?
 
 ## नेभिगेसन थप्दै
 
-राउटिङ सेटअप भएपछि, प्रयोगकर्ताहरूलाई एपमा नेभिगेट गर्ने तरिका चाहिन्छ। परम्परागत वेबसाइटहरूले लिंक क्लिक गर्दा सम्पूर्ण पृष्ठहरू पुनः लोड गर्छन्, तर हामी URL र सामग्रीलाई पृष्ठ पुनः लोड नगरी अपडेट गर्न चाहन्छौं। यसले डेस्कटप एप्लिकेसनहरूले विभिन्न दृश्यहरू बीच स्विच गर्ने तरिकाको जस्तै सहज अनुभव सिर्जना गर्दछ।
+Routing स्थापित भएपछि, प्रयोगकर्ताहरूलाई एपमा नेभिगेट गर्ने तरिका चाहिन्छ। परम्परागत वेबसाइटहरूमा लिंक क्लिक गर्दा पूरा पृष्ठ पुनः लोड हुन्छ, तर हामी URL र सामग्री दुवैलाई पृष्ठ रिफ्रेस नगरी अपडेट गर्न चाहन्छौं। यसले डेस्कटप एप्सले विभिन्न दृश्यहरू बीच स्विच गर्ने जस्तै सहज अनुभव सिर्जना गर्छ।
 
-हामीले दुईवटा कुरा समन्वय गर्न आवश्यक छ: ब्राउजरको URL अपडेट गर्नु ताकि प्रयोगकर्ताहरूले पृष्ठहरू बुकमार्क गर्न र लिंकहरू साझा गर्न सकून्, र उपयुक्त सामग्री देखाउनु। सही तरिकाले कार्यान्वयन गर्दा, यसले आधुनिक एप्लिकेसनहरूबाट प्रयोगकर्ताहरूले अपेक्षा गरेको सहज नेभिगेसन सिर्जना गर्दछ।
+हामीले दुई कुराहरू समन्वय गर्नुपर्छ: ब्राउजरको URL अपडेट गर्ने ताकि प्रयोगकर्ताहरू पृष्ठहरू बुकमार्क गर्न र लिंकहरू साझा गर्न सकून्, र उपयुक्त सामग्री प्रदर्शन गर्ने। सही रूपमा कार्यान्वयन गर्दा, यसले आधुनिक एप्सबाट प्रयोगकर्ताहरूले अपेक्षा गर्ने सहज नेभिगेसन सिर्जना गर्छ।
 
-> 🏗️ **आर्किटेक्चर जानकारी**: नेभिगेसन प्रणालीका घटकहरू
->
-> **तपाईंले निर्माण गर्दै हुनुहुन्छ:**
-> - **🔄 URL व्यवस्थापन**: पृष्ठ पुनः लोड नगरी ब्राउजरको ठेगाना पट्टी अपडेट गर्दछ
-> - **📋 टेम्प्लेट प्रणाली**: हालको राउटको आधारमा सामग्रीलाई गतिशील रूपमा परिवर्तन गर्दछ  
-> - **📚 इतिहास एकीकरण**: ब्राउजरको पछाडि/अगाडि बटनको कार्यक्षमता कायम राख्छ
-> - **🛡️ त्रुटि ह्यान्डलिङ**: अमान्य वा हराएको राउटहरूको लागि सहज फिर्ता व्यवस्था
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant App
+    participant Template
+    
+    User->>Browser: Clicks "Login" link
+    Browser->>App: onclick event triggered
+    App->>App: preventDefault() & navigate('/dashboard')
+    App->>Browser: history.pushState('/dashboard')
+    Browser->>Browser: URL updates to /dashboard
+    App->>App: updateRoute() called
+    App->>Template: Find & clone dashboard template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display dashboard screen
+    
+    Note over User,Template: User clicks browser back button
+    
+    User->>Browser: Clicks back button
+    Browser->>Browser: History moves back to /login
+    Browser->>App: popstate event fired
+    App->>App: updateRoute() called automatically
+    App->>Template: Find & clone login template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display login screen
+```
+
+### 🔄 **शिक्षण जाँच**
+**Single-Page Application Architecture**: सम्पूर्ण प्रणालीको तपाईंको बुझाइ प्रमाणित गर्नुहोस्:
+- ✅ Client-side routing परम्परागत server-side routing भन्दा कसरी फरक छ?
+- ✅ SPA नेभिगेसनको लागि History API किन आवश्यक छ?
+- ✅ Templates पृष्ठ रिफ्रेस नगरी गतिशील सामग्री कसरी सक्षम बनाउँछ?
+- ✅ नेभिगेसनलाई रोक्न event handling को भूमिका के हो?
+
+**System Integration**: तपाईंको SPA ले प्रदर्शन गर्छ:
+- **Template Management**: गतिशील सामग्रीसहित पुन: प्रयोग गर्न मिल्ने UI components
+- **Client-side Routing**: Server requests बिना URL व्यवस्थापन
+- **Event-driven Architecture**: नेभिगेसन र प्रयोगकर्ता अन्तरक्रियाको लागि उत्तरदायी
+- **Browser Integration**: History र back/forward बटनको सही समर्थन
+- **Performance Optimization**: छिटो ट्रान्जिसन र कम server लोड
+
+**Professional Patterns**: तपाईंले कार्यान्वयन गर्नुभएको छ:
+- **Model-View Separation**: Templates एप्लिकेसन तर्कबाट अलग
+- **State Management**: URL state प्रदर्शन गरिएको सामग्रीसँग समक्रमित
+- **Progressive Enhancement**: JavaScript ले आधारभूत HTML कार्यक्षमता सुधार गर्छ
+- **User Experience**: पृष्ठ रिफ्रेस नगरी सहज, एप-जस्तो नेभिगेसन
+
+> � **Architecture Insight**: नेभिगेसन प्रणालीका घटकहरू
 >
+> **तपाईंले निर्माण गरिरहनुभएको:**
+> - **🔄 URL Management**: पृष्ठ रिफ्रेस नगरी ब्राउजरको एड्रेस बार अपडेट गर्छ
+> - **📋 Template System**: हालको route अनुसार गतिशील रूपमा सामग्री परिवर्तन गर्छ  
+> - **📚 History Integration**: ब्राउजरको back/forward बटन कार्यक्षमता कायम राख्छ
+> - **🛡️ Error Handling**: अमान्य वा हराएको routes का लागि graceful fallbacks
+
 > **घटकहरू कसरी सँगै काम गर्छन्:**
-> - नेभिगेसन घटनाहरू (क्लिकहरू, इतिहास परिवर्तनहरू) **सुन्छ**
-> - History API प्रयोग गरेर URL **अपडेट गर्छ**
-> - नयाँ राउटको लागि उपयुक्त टेम्प्लेट **रेंडर गर्छ**
-> - **सामान्य प्रयोगकर्ता अनुभव** कायम राख्छ
+> - **Listens** नेभिगेसन events (क्लिक्स, history परिवर्तन) को लागि
+> - **Updates** URL History API प्रयोग गरेर
+> - **Renders** नयाँ route को लागि उपयुक्त template
+> - **Maintains** सम्पूर्ण प्रयोगकर्ता अनुभवलाई सहज बनाउँछ
 
-हाम्रो एपको अर्को चरण भनेको पृष्ठहरू बीच नेभिगेट गर्ने सम्भावना थप्नु हो ताकि URL म्यानुअली परिवर्तन गर्न नपरोस्। यसले दुई कुरा संकेत गर्दछ:
+हाम्रो एपको अर्को चरण भनेको URL म्यानुअली परिवर्तन नगरी पृष्ठहरू बीच नेभिगेट गर्ने सम्भावना थप्नु हो। यसले दुई कुराहरू समावेश गर्छ:
 
-  1. हालको URL अपडेट गर्नु
-  2. नयाँ URL को आधारमा देखाइएको टेम्प्लेट अपडेट गर्नु
+  1. हालको URL अपडेट गर्ने
+  2. नयाँ URL को आधारमा प्रदर्शन गरिएको template अपडेट गर्ने
 
-हामीले `updateRoute` फङ्सनको साथ दोस्रो भागको ख्याल राखिसकेका छौं, त्यसैले हामीले हालको URL कसरी अपडेट गर्ने भन्ने कुरा बुझ्नुपर्छ।
+हामीले `updateRoute` फङ्क्शनको साथ दोस्रो भागको ख्याल राखिसकेका छौं, त्यसैले हामीले हालको URL कसरी अपडेट गर्ने भन्ने कुरा बुझ्नुपर्छ।
 
-हामीले JavaScript र विशेष गरी [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) प्रयोग गर्नुपर्नेछ जसले HTML पुनः लोड नगरी URL अपडेट गर्न र ब्राउजिङ इतिहासमा नयाँ प्रविष्टि सिर्जना गर्न अनुमति दिन्छ।
+हामीले JavaScript र विशेष गरी [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) प्रयोग गर्नुपर्नेछ, जसले HTML पुनः लोड नगरी URL अपडेट गर्न र ब्राउजिङ इतिहासमा नयाँ प्रविष्टि सिर्जना गर्न अनुमति दिन्छ।
 
-> ⚠️ **महत्वपूर्ण नोट**: HTML एङ्कर एलिमेन्ट [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) लाई आफ्नै रूपमा विभिन्न URL हरूमा हाइपरलिङ्कहरू सिर्जना गर्न प्रयोग गर्न सकिन्छ, तर यसले ब्राउजरलाई डिफल्ट रूपमा HTML पुनः लोड गराउँछ। कस्टम जाभास्क्रिप्टको साथ राउटिङ ह्यान्डल गर्दा यो व्यवहार रोक्न आवश्यक छ, क्लिक इभेन्टमा preventDefault() फङ्सन प्रयोग गरेर।
+> ⚠️ **महत्वपूर्ण नोट**: HTML anchor element [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) लाई स्वतन्त्र रूपमा विभिन्न URL हरूमा हाइपरलिङ्कहरू सिर्जना गर्न प्रयोग गर्न सकिन्छ, तर यसले ब्राउजरलाई डिफल्ट रूपमा HTML पुनः लोड गर्न बाध्य बनाउँछ। कस्टम JavaScript प्रयोग गरेर routing ह्यान्डल गर्दा यो व्यवहार रोक्न आवश्यक छ, क्लिक इभेन्टमा `preventDefault()` फङ्क्शन प्रयोग गरेर।
 
 ### कार्य
 
-आउनुहोस्, हाम्रो एपमा नेभिगेट गर्न प्रयोग गर्न सकिने नयाँ फङ्सन सिर्जना गरौं:
+हामी हाम्रो एपमा नेभिगेट गर्न प्रयोग गर्न सकिने नयाँ फङ्क्शन सिर्जना गर्नेछौं:
 
 ```js
 function navigate(path) {
@@ -354,15 +501,15 @@ function navigate(path) {
 }
 ```
 
-**यस नेभिगेसन फङ्सनलाई बुझ्दै:**
-- `history.pushState` प्रयोग गरेर ब्राउजरको URL नयाँ पथमा **अपडेट गर्छ**
-- ब्राउजरको इतिहास स्ट्याकमा नयाँ प्रविष्टि थप्छ ताकि पछाडि/अगाडि बटनले सही काम गरोस्
-- `updateRoute()` फङ्सनलाई ट्रिगर गरेर सम्बन्धित टेम्प्लेट देखाउँछ
-- पृष्ठ पुनः लोड नगरी सिंगल-पेज एप अनुभव **मेन्टेन गर्छ**
+**यस नेभिगेसन फङ्क्शनलाई बुझ्दै:**
+- **Updates** `history.pushState` प्रयोग गरेर ब्राउजरको URL नयाँ पाथमा अपडेट गर्छ
+- **Adds** ब्राउजरको history stack मा नयाँ प्रविष्टि थप्छ ताकि back/forward बटन सही रूपमा काम गरोस्
+- **Triggers** `updateRoute()` फङ्क्शनलाई सम्बन्धित template प्रदर्शन गर्न
+- **Maintains** पृष्ठ रिफ्रेस नगरी single-page app अनुभव
 
-यस विधिले पहिले दिइएको पथको आधारमा हालको URL अपडेट गर्छ, त्यसपछि टेम्प्लेट अपडेट गर्छ। `window.location.origin` प्रोपर्टीले URL को रूट फर्काउँछ, जसले हामीलाई दिइएको पथबाट पूर्ण URL पुनः निर्माण गर्न अनुमति दिन्छ।
+यस विधिले पहिले दिइएको पाथको आधारमा हालको URL अपडेट गर्छ, त्यसपछि template अपडेट गर्छ। `window.location.origin` प्रोपर्टीले URL root फर्काउँछ, जसले दिइएको पाथबाट पूर्ण URL पुनर्निर्माण गर्न अनुमति दिन्छ।
 
-अब हामीसँग यो फङ्सन छ, हामीले समस्या समाधान गर्न सक्छौं यदि कुनै पथले परिभाषित गरिएको राउटसँग मेल खाँदैन। हामीले `updateRoute` फङ्सनलाई संशोधन गरेर कुनै मेल नभएमा विद्यमान राउटमा फिर्ता जाने व्यवस्था थप्नेछौं।
+अब हामीसँग यो फङ्क्शन छ, यदि कुनै पाथले कुनै परिभाषित route सँग मेल खाँदैन भने हामीसँग भएको समस्या समाधान गर्न सक्छौं। हामी `updateRoute` फङ्क्शनलाई परिमार्जन गर्नेछौं र कुनै मेल नभेटिएमा एउटा विद्यमान route मा fallback थप्नेछौं।
 
 ```js
 function updateRoute() {
@@ -381,15 +528,15 @@ function updateRoute() {
 }
 ```
 
-**महत्वपूर्ण बुँदाहरू सम्झनुहोस्:**
-- हालको पथको लागि राउट अवस्थित छ कि छैन भनेर **जाँच्छ**
-- अमान्य राउट पहुँच गर्दा लगइन पृष्ठमा **रिडाइरेक्ट गर्छ**
-- **फिर्ता व्यवस्था प्रदान गर्छ** जसले बिग्रिएको नेभिगेसनलाई रोक्छ
-- **सुनिश्चित गर्छ** कि प्रयोगकर्ताहरूले सधैं सही स्क्रिन देख्छन्, गलत URL हरूसँग पनि
+**स्मरण गर्नुपर्ने मुख्य बुँदाहरू:**
+- **Checks** हालको पाथको लागि route अवस्थित छ कि छैन
+- **Redirects** अमान्य route पहुँच गर्दा login पृष्ठमा
+- **Provides** एक fallback मेकानिजम जसले बिग्रिएको नेभिगेसन रोक्छ
+- **Ensures** प्रयोगकर्ताहरूले सधैं सही स्क्रिन देख्छन्, गलत URL हरूसँग पनि
 
-यदि कुनै राउट फेला पार्न सकिँदैन भने, हामी अब `login` पृष्ठमा रिडाइरेक्ट गर्नेछौं।
+यदि route भेटिएन भने, हामी अब `login` पृष्ठमा रिडाइरेक्ट गर्नेछौं।
 
-अब आउनुहोस्, लिंक क्लिक गर्दा URL प्राप्त गर्न र ब्राउजरको डिफल्ट लिंक व्यवहार रोक्न फङ्सन सिर्जना गरौं:
+अब हामी लिंक क्लिक गर्दा URL प्राप्त गर्ने र ब्राउजरको डिफल्ट लिंक व्यवहार रोक्ने फङ्क्शन सिर्जना गर्नेछौं:
 
 ```js
 function onLinkClick(event) {
@@ -398,11 +545,11 @@ function onLinkClick(event) {
 }
 ```
 
-**यस क्लिक ह्यान्डलरलाई तोड्दै:**
-- `preventDefault()` प्रयोग गरेर ब्राउजरको डिफल्ट लिंक व्यवहार **रोक्छ**
-- क्लिक गरिएको लिंक एलिमेन्टबाट गन्तव्य URL **निकाल्छ**
-- पृष्ठ पुनः लोड नगरी हाम्रो कस्टम नेभिगेट फङ्सनलाई **कल गर्छ**
-- सिंगल-पेज एप्लिकेसनको सहज अनुभव **मेन्टेन गर्छ**
+**यस क्लिक ह्यान्डलरलाई टुक्रा-टुक्रामा बुझ्दै:**
+- **Prevents** ब्राउजरको डिफल्ट लिंक व्यवहार `preventDefault()` प्रयोग गरेर रोक्छ
+- **Extracts** क्लिक गरिएको लिंक एलिमेन्टबाट गन्तव्य URL निकाल्छ
+- **Calls** हाम्रो कस्टम नेभिगेट फङ्क्शन पृष्ठ पुनः लोड नगरी
+- **Maintains** सहज single-page application अनुभव
 
 ```html
 <a href="/dashboard" onclick="onLinkClick(event)">Login</a>
@@ -411,22 +558,22 @@ function onLinkClick(event) {
 ```
 
 **यस onclick बाइन्डिङले के हासिल गर्छ:**
-- प्रत्येक लिंकलाई हाम्रो कस्टम नेभिगेसन प्रणालीसँग **जोड्छ**
-- क्लिक इभेन्टलाई हाम्रो `onLinkClick` फङ्सनमा **पास गर्छ** प्रक्रिया गर्न
-- पृष्ठ पुनः लोड नगरी **सहज नेभिगेसन सक्षम गर्छ**
-- प्रयोगकर्ताहरूले बुकमार्क गर्न वा साझा गर्न सक्ने सही URL संरचना **मेन्टेन गर्छ**
+- **Connects** प्रत्येक लिंकलाई हाम्रो कस्टम नेभिगेसन प्रणालीसँग
+- **Passes** क्लिक इभेन्टलाई हाम्रो `onLinkClick` फङ्क्शनमा प्रोसेसिङको लागि
+- **Enables** पृष्ठ रिफ्रेस नगरी सहज नेभिगेसन
+- **Maintains** सही URL संरचना जसलाई प्रयोगकर्ताहरूले बुकमार्क गर्न वा साझा गर्न सक्छन्
 
-[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) एट्रिब्युटले `click` इभेन्टलाई जाभास्क्रिप्ट कोडसँग बाइन्ड गर्छ, यहाँ `navigate()` फङ्सनको कल।
+[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) attribute ले `click` इभेन्टलाई JavaScript कोडसँग बाइन्ड गर्छ, यहाँ `navigate()` फङ्क्शनको कल।
 
-यी लिंकहरू क्लिक गरेर प्रयास गर्नुहोस्, तपाईंले अब आफ्नो एपका विभिन्न स्क्रिनहरू बीच नेभिगेट गर्न सक्षम हुनुहुनेछ।
+यी लिंकहरू क्लिक गरेर प्रयास गर्नुहोस्, तपाईं अब आफ्नो एपका विभिन्न स्क्रिनहरू बीच नेभिगेट गर्न सक्षम हुनुहुन्छ।
 
-✅ `history.pushState` विधि HTML5 मानकको भाग हो र [सबै आधुनिक ब्राउजरहरूमा](https://caniuse.com/?search=pushState) कार्यान्वयन गरिएको छ। यदि तपाईं पुराना ब्राउजरहरूको लागि वेब एप बनाउँदै हुनुहुन्छ भने, तपाईं यस API को सट्टा एउटा ट्रिक प्रयोग गर्न सक्नुहुन्छ: पथ अघि [ह्यास (`#`)](https://en.wikipedia.org/wiki/URI_fragment) प्रयोग गरेर तपाईं नियमित एङ्कर नेभिगेसनसँग काम गर्ने र पृष्ठ पुनः लोड नगर्ने राउटिङ कार्यान्वयन गर्न सक्नुहुन्छ, किनकि यसको उद्देश्य पृष्ठभित्र आन्तरिक लिंकहरू सिर्जना गर्नु हो।
+✅ `history.pushState` विधि HTML5 मानकको हिस्सा हो र [सबै आधुनिक ब्राउजरहरूमा](https://caniuse.com/?search=pushState) कार्यान्वयन गरिएको छ। यदि तपाईं पुराना ब्राउजरहरूको लागि वेब एप निर्माण गर्दै हुनुहुन्छ भने, तपाईं यस API को सट्टा एउटा ट्रिक प्रयोग गर्न सक्नुहुन्छ: पाथ अघि [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) प्रयोग गरेर तपाईं नियमित anchor नेभिगेसनसँग काम गर्ने routing कार्यान्वयन गर्न सक्नुहुन्छ जसले पृष्ठ पुनः लोड गर्दैन।
 
-## पछाडि र अगाडि बटनहरू काम गर्ने बनाउँदै
+## Back र Forward बटनहरू काम गर्ने बनाउँदै
 
-पछाडि र अगाडि बटनहरू वेब ब्राउजिङको लागि आधारभूत हुन्, NASA मिशन कन्ट्रोलरहरूले स्पेस मिशनको क्रममा अघिल्लो प्रणाली अवस्थाहरू समीक्षा गर्न सक्ने तरिकाको जस्तै। प्रयोगकर्ताहरूले यी बटनहरू काम गर्ने अपेक्षा गर्छन्, र जब तिनीहरू काम गर्दैनन्, यसले अपेक्षित ब्राउजिङ अनुभवलाई तोड्छ।
+Back र forward बटनहरू वेब ब्राउजिङको लागि आधारभूत हुन्, NASA मिशन कन्ट्रोलरहरूले स्पेस मिशनको दौरान अघिल्लो प्रणाली अवस्थाहरू समीक्षा गर्न सक्ने जस्तै। प्रयोगकर्ताहरूले यी बटनहरू काम गर्ने अपेक्षा गर्छन्, र जब तिनीहरू काम गर्दैनन्, यो अपेक्षित ब्राउजिङ अनुभवलाई तोड्छ।
 
-हाम्रो सिंगल-पेज एपलाई यसलाई समर्थन गर्न थप कन्फिगरेसन आवश्यक छ। ब्राउजरले इतिहास स्ट्याक कायम राख्छ (जसलाई हामीले `history.pushState` प्रयोग गरेर थप्दै आएका छौं), तर जब प्रयोगकर्ताहरू यस इतिहासमा नेभिगेट गर्छन्, हाम्रो एपले प्रतिक्रिया दिन आवश्यक छ र देखाइएको सामग्रीलाई तदनुसार अपडेट गर्नुपर्छ।
+हाम्रो single-page app लाई यसलाई समर्थन गर्न थप कन्फिगरेसन आवश्यक छ। ब्राउजरले history stack कायम राख्छ (जसलाई हामीले `history.pushState` प्रयोग गरेर थप्दै आएका छौं), तर जब प्रयोगकर्ताहरू यस history मार्फत नेभिगेट गर्छन्, हाम्रो एपले प्रतिक्रिया दिनु पर्छ र त्यस अनुसार प्रदर्शन गरिएको सामग्री अपडेट गर्नुपर्छ।
 
 ```mermaid
 sequenceDiagram
@@ -458,88 +605,197 @@ sequenceDiagram
     Browser->>User: Display login screen
 ```
 
-**महत्वपूर्ण अन्तरक्रिया बुँदाहरू:**
-- **प्रयोगकर्ता क्रियाकलापहरू** क्लिकहरू वा ब्राउजर बटनहरू मार्फत नेभिगेसन ट्रिगर गर्छ
-- एपले पृष्ठ पुनः लोड रोक्न लिंक क्लिकहरू **अवरोध गर्छ**
-- **इतिहास API** ले URL परिवर्तन र ब्राउजर इतिहास स्ट्याक व्यवस्थापन गर्छ
-- **टेम्प्लेटहरू** प्रत्येक स्क्रिनको लागि सामग्री संरचना प्रदान गर्छ
-- **इभेन्ट लिसनरहरू** सुनिश्चित गर्छ कि एपले सबै प्रकारका नेभिगेसनमा प्रतिक्रिया दिन्छ
+**मुख्य अन्तरक्रिया बिन्दुहरू:**
+- **User actions** क्लिकहरू वा ब्राउजर बटनहरू मार्फत नेभिगेसन ट्रिगर गर्छ
+- **App intercepts** लिंक क्लिकहरू पृष्ठ रिफ्रेस रोक्न
+- **History API** URL परिवर्तन र ब्राउजर history stack व्यवस्थापन गर्छ
+- **Templates** प्रत्येक स्क्रिनको लागि सामग्री संरचना प्रदान गर्छ
+- **Event listeners** सुनिश्चित गर्छ कि एपले सबै प्रकारका नेभिगेसनमा प्रतिक्रिया दिन्छ
 
-`history.pushState` प्रयोग गरेर ब्राउजरको नेभिगेसन इतिहासमा नयाँ प्रविष्टिहरू सिर्जना हुन्छ। तपाईंले आफ्नो ब्राउजरको *पछाडि बटन* थिचेर जाँच गर्न सक्नुहुन्छ, यसले केही यस्तो देखाउनु पर्छ:
+`history.pushState` प्रयोग गरेर ब्राउजरको नेभिगेसन history मा नयाँ प्रविष्टिहरू सिर्जना हुन्छ। तपाईंले आफ्नो ब्राउजरको *back button* थिचेर जाँच गर्न सक्नुहुन्छ, यसले केही यस्तो देखाउनु पर्छ:
 
-![नेभिगेसन इतिहासको स्क्रिनसट](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ne.png)
+![नेभिगेसन history को स्क्रिनशट](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ne.png)
 
-यदि तपाईंले पछाडि बटन केही पटक क्लिक गर्न प्रयास गर्नुभयो भने, तपाईंले देख्नुहुनेछ कि हालको URL परिवर्तन हुन्छ र इतिहास अपडेट हुन्छ, तर उही टेम्प्लेट देखाइन्छ।
+यदि तपाईं back बटन केही पटक क्लिक गर्नुहुन्छ भने, तपाईं देख्नुहुनेछ कि हालको URL परिवर्तन हुन्छ र history अपडेट हुन्छ, तर उही template प्रदर्शन भइरहन्छ।
 
-त्यसको कारण एप्लिकेसनलाई थाहा छैन कि हामीले `updateRoute()` कल गर्न आवश्यक छ प्रत्येक पटक इतिहास परिवर्तन हुँदा। यदि तपाईंले [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) को डकुमेन्टेसन हेर्नुभयो भने, तपाईंले देख्नुहुनेछ कि यदि अवस्था परिवर्तन भयो - जसको अर्थ हामी फरक URL मा सरेका छौं - [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) इभेन्ट ट्रिगर हुन्छ। हामीले यो समस्या समाधान गर्न यसलाई प्रयोग गर्नेछौं।
+त्यसको कारण एपले थाहा पाउँदैन कि हामीले `updateRoute()` प्रत्येक पटक history परिवर्तन हुँदा कल गर्नुपर्छ। यदि तपाईं [`history.pushState` को डकुमेन्टेशन](https://developer.mozilla.org/docs/Web/API/History/pushState) हेर्नुहुन्छ भने, तपाईं देख्नुहुनेछ कि यदि state परिवर्तन भयो भने - जसको अर्थ हामी फरक URL मा सरेका छौं - [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) इभेन्ट ट्रिगर हुन्छ। हामी यसलाई प्रयोग गरेर उक्त समस्या समाधान गर्नेछौं।
 
 ### कार्य
 
-ब्राउजर इतिहास परिवर्तन हुँदा देखाइएको टेम्प्लेट अपडेट सुनिश्चित गर्न, हामीले `updateRoute()` कल गर्ने नयाँ फङ्सन संलग्न गर्नेछौं। हामीले यो हाम्रो `app.js` फाइलको तल गर्नेछौं:
+ब्राउजर history परिवर्तन हुँदा प्रदर्शन गरिएको template अपडेट सुनिश्चित गर्न, हामी `updateRoute()` कल गर्ने नयाँ फङ्क्शन संलग्न गर्नेछौं। हामी यो हाम्रो `app.js` फाइलको तल गर्नेछौं:
 
 ```js
 window.onpopstate = () => updateRoute();
 updateRoute();
 ```
 
-**यस इतिहास एकीकरणलाई बुझ्दै:**
-- प्रयोगकर्ताहरूले ब्राउजर बटनहरू प्रयोग गरेर नेभिगेट गर्दा हुने `popstate` इभेन्टहरू **सुन्छ**
-- संक्षिप्त इभेन्ट ह्यान्डलर सिन्ट्याक्सको लागि एरो फङ्सन प्रयोग गर्छ
-- इतिहास अवस्था परिवर्तन हुँदा स्वतः `updateRoute()` **कल गर्छ**
-- पृष्ठ पहिलो पटक लोड हुँदा एपलाई **इनिसियलाइज गर्छ**
-- प्रयोगकर्ताहरूले कसरी नेभिगेट गरे पनि सही टेम्प्लेट **सुनिश्चित गर्छ**
+**यस history एकीकरणलाई बुझ्दै:**
+- **Listens** `popstate` इभेन्टहरूको लागि जुन प्रयोगकर्ताहरूले ब्राउजर बटनहरू प्रयोग गरेर नेभिगेट गर्दा हुन्छ
+- **Uses** concise इभेन्ट ह्यान्डलर सिंट्याक्सको लागि arrow function
+- **Calls** `updateRoute()` स्वतः जब history state परिवर्तन हुन्छ
+- **Initializes** एपलाई `updateRoute()` कल गरेर जब पृष्ठ पहिलो पटक लोड हुन्छ
+- **Ensures** प्रयोगकर्ताहरूले कसरी नेभिगेट गरे पनि सही template प्रदर्शन हुन्छ
+
+> 💡 **Pro Tip**: हामीले यहाँ [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) प्रयोग गरेर हाम्रो `popstate` इभेन्ट ह्यान्डलर घोषणा गरेका छौं, तर नियमित फङ्क्शनले पनि उस्तै काम गर्नेछ।
+
+arrow functions मा एक रिफ्रेसर भिडियो यहाँ छ:
+
+[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
+
+> 🎥 माथिको छवि क्लिक गरेर arrow functions को बारेमा भिडियो हेर्नुहोस्।
+
+अब आफ्नो ब्राउजरको back र forward बटनहरू प्रयोग गरेर प्रयास गर्नुहोस्, र जाँच गर्नुहोस् कि यस पटक प्रदर्शन गरिएको route सही रूपमा अपडेट हुन्छ।
 
-> 💡 **प्रो टिप**: हामीले यहाँ [एरो फङ्सन](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) प्रयोग गरेर हाम्रो `popstate` इभेन्ट ह्यान्डलरलाई संक्षिप्तता प्रदान गरेका छौं, तर नियमित फङ्सनले पनि उस्तै काम गर्नेछ।
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] आफ्नो बैंकिङ एपको नेभिगेसन ब्राउजर back/forward बटनहरू प्रयोग गरेर परीक्षण गर्नुहोस्
+- [ ] Address bar मा विभिन्न URL हरू म्यानुअली टाइप गरेर routing परीक्षण गर्नुहोस्
+- [ ] ब्राउजर DevTools खोल्नुहोस् र templates DOM मा कसरी clone गरिन्छ हेर्नुहोस्
+- [ ] Routing flow ट्र्याक गर्न console.log statements थपेर प्रयोग गर्नुहोस्
 
-एरो फङ्सनको बारेमा एक रिफ्रेसर भिडियो यहाँ छ:
+### 🎯 **यो घण्टामा तपाईं के हासिल गर्न सक्नुहुन्छ**
+- [ ] Post-lesson quiz पूरा गर्नुहोस् र SPA architecture concepts बुझ्नुहोस्
+- [ ] CSS styling थपेर आफ्नो बैंकिङ एप templates लाई व्यावसायिक देखिने बनाउनुहोस्
+- [ ] 404 error page challenge सही error handling सहित कार्यान्वयन गर्नुहोस्
+- [ ] Credits page challenge थप routing कार्यक्षमता सहित सिर्जना गर्नुहोस्
+- [ ] Template switch बीच loading states र transitions थप्नुहोस्
 
-[![एरो फङ्सनहरू](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "एरो फङ्सनहरू")
+### 📅 **तपाईंको हप्ताभरि SPA विकास यात्रा**
+- [ ] Forms, data management, र persistence सहित पूर्ण बैंकिङ एप पूरा गर्नुहोस्
+- [ ] Route parameters र nested routes जस्ता उन्नत routing सुविधाहरू थप्नुहोस्
+- [ ] Navigation guards र authentication-based routing कार्यान्वयन गर्नुहोस्
+- [ ] पुन: प्रयोग गर्न मिल्ने template components र component library सिर्जना गर्नुहोस्
+- [ ] Smooth user experience को लागि animations र transitions थप्नुहोस्
+- [ ] आफ्नो SPA hosting platform मा deploy गर्नुहोस् र routing सही रूपमा कन्फिगर गर्नुहोस्
 
-> 🎥 माथिको तस्बिर क्लिक गरेर एरो फङ्सनहरूको बारेमा भिडियो हेर्नुहोस्।
+### 🌟 **तपाईंको महिनाभरि Frontend Architecture Mastery**
+- [ ] React, Vue, वा Angular जस्ता आधुनिक frameworks प्रयोग गरेर जटिल SPAs निर्माण गर्नुहोस्
+- [ ] उन्नत state management patterns र libraries सिक्नुहोस्
+- [ ] SPA विकासका लागि build tools र development workflows मा महारत हासिल गर्नुहोस्
+- [ ] Progressive Web App सुविधाहरू र offline functionality कार्यान्वयन गर्नुहोस्
+- [ ] ठूलो-scale SPAs को लागि performance optimization techniques अध्ययन गर्नुहोस्
+- [ ] Open source SPA projects मा योगदान गर्नुहोस् र आफ्नो ज्ञान साझा गर्नुहोस्
+
+## 🎯 तपाईंको Single-Page Application Mastery Timeline
+
+```mermaid
+timeline
+    title SPA Development & Modern Web Architecture Learning Progression
+    
+    section Foundation (20 minutes)
+        Template Systems: HTML template elements
+                        : DOM manipulation
+                        : Content cloning
+                        : Dynamic rendering
+        
+    section Routing Basics (30 minutes)
+        Client-side Navigation: URL management
+                              : History API
+                              : Route mapping
+                              : Event handling
+        
+    section User Experience (40 minutes)
+        Navigation Polish: Browser integration
+                         : Back button support
+                         : Error handling
+                         : Smooth transitions
+        
+    section Architecture Patterns (50 minutes)
+        Professional SPAs: Component systems
+                         : State management
+                         : Performance optimization
+                         : Error boundaries
+        
+    section Advanced Techniques (1 week)
+        Framework Integration: React Router
+                             : Vue Router
+                             : Angular Router
+                             : State libraries
+        
+    section Production Skills (1 month)
+        Enterprise Development: Build systems
+                              : Testing strategies
+                              : Deployment pipelines
+                              : Performance monitoring
+```
 
-अब आफ्नो ब्राउजरको पछाडि र अगाडि बटनहरू प्रयोग गर्न प्रयास गर्नुहोस्, र यो पटक देखाइएको राउट सही रूपमा अपडेट भएको छ कि छैन जाँच गर्नुहोस्।
+### 🛠️ तपाईंको SPA विकास उपकरणको सारांश
+
+यो पाठ पूरा गरेपछि, तपाईंले अब निम्न कुराहरूमा महारत हासिल गर्नुभएको छ:
+- **Template Architecture**: गतिशील सामग्री rendering सहित पुन: प्रयोग गर्न मिल्ने HTML components
+- **Client-side Routing**: URL व्यवस्थापन र पृष्ठ रिफ्रेस बिना नेभिगेसन
+- **Browser Integration**: History API प्रयोग र back/forward बटन समर्थन
+- **Event-driven Systems**: नेभिगेसन ह्यान्डलिंग र प्रयोगकर्ता अन्तरक्रिया व्यवस्थापन
+- **DOM Manipulation**: Template cloning, सामग्री switch, र element व्यवस्थापन
+- **Error Handling**: अमान्य routes र हराएको सामग्रीका लागि graceful fallbacks
+- **Performance Patterns**: प्रभावकारी सामग्री लोडिंग र rendering रणनीतिहरू
+
+**वास्तविक-विश्व अनुप्रयोगहरू**: तपाईंको SPA विकास कौशल सीधा लागू हुन्छ:
+- **Modern Web Applications**: React, Vue, Angular, र अन्य framework विकास
+- **Progressive Web Apps**: Offline-capable एप्स app-like अनुभवसहित
+- **Enterprise Dashboards**: जटिल व्यवसाय एप्स धेरै दृश्यहरूसहित
+- **E-commerce Platforms**: Product catalogs, shopping carts, र checkout flows
+- **Content Management**: गतिशील सामग्री सिर्जना र सम्पादन interfaces
+- **Mobile Development**: वेब प्रविधिहरू प्रयोग गरेर hybrid apps
+
+**व्यावसायिक कौशल प्राप्त**: तपाईं अब सक्षम हुनुहुन्छ:
+- **एकल-पृष्ठ एप्लिकेसनहरू** उचित जिम्मेवारीको विभाजनसहित डिजाइन गर्नुहोस्  
+- **क्लाइन्ट-साइड राउटिङ प्रणालीहरू लागू गर्नुहोस्** जसले एप्लिकेसनको जटिलतासँगै विस्तार गर्न सक्छ  
+- **जटिल नेभिगेसन प्रवाहहरू डिबग गर्नुहोस्** ब्राउजर डेभलपर टूलहरूको प्रयोग गरेर  
+- **एप्लिकेसनको प्रदर्शन सुधार गर्नुहोस्** प्रभावकारी टेम्प्लेट व्यवस्थापनको माध्यमबाट  
+- **प्रयोगकर्ता अनुभव डिजाइन गर्नुहोस्** जसले प्राकृतिक र प्रतिक्रियात्मक महसुस गराउँछ  
+
+**फ्रन्टएन्ड विकास अवधारणाहरूमा महारत हासिल गरियो**:  
+- **कम्पोनेन्ट आर्किटेक्चर**: पुन: प्रयोग गर्न मिल्ने UI ढाँचा र टेम्प्लेट प्रणाली  
+- **स्टेट समिकरण**: URL स्टेट व्यवस्थापन र ब्राउजर इतिहास  
+- **इभेन्ट-ड्रिभन प्रोग्रामिङ**: प्रयोगकर्ता अन्तरक्रिया व्यवस्थापन र नेभिगेसन  
+- **प्रदर्शन सुधार**: प्रभावकारी DOM हेरफेर र सामग्री लोडिङ  
+- **प्रयोगकर्ता अनुभव डिजाइन**: सहज ट्रान्जिसनहरू र सहज नेभिगेसन  
+
+**अर्को स्तर**: तपाईं आधुनिक फ्रन्टएन्ड फ्रेमवर्कहरू, उन्नत स्टेट व्यवस्थापन, वा जटिल उद्यम एप्लिकेसनहरू निर्माण गर्न तयार हुनुहुन्छ!  
+
+🌟 **उपलब्धि अनलक गरियो**: तपाईंले आधुनिक वेब आर्किटेक्चर ढाँचासहित व्यावसायिक एकल-पृष्ठ एप्लिकेसनको आधार निर्माण गर्नुभएको छ!  
 
 ---
 
-## GitHub Copilot Agent Challenge 🚀
+## GitHub Copilot Agent चुनौती 🚀  
 
-Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:  
 
-**विवरण:** बैंकिङ एपलाई सुधार गर्दै अमान्य राउटहरूको लागि त्रुटि ह्यान्डलिङ र 404 पृष्ठ टेम्प्लेट कार्यान्वयन गर्नुहोस्, जसले प्रयोगकर्ताको अनुभवलाई सुधार गर्दछ जब तिनीहरू अवस्थित नभएका पृष्ठहरूमा नेभिगेट गर्छन्।
+**विवरण:** बैंकिङ एपलाई सुधार गर्दै त्रुटि व्यवस्थापन र अमान्य रूटहरूको लागि 404 पृष्ठ टेम्प्लेट लागू गर्नुहोस्, जसले प्रयोगकर्ताको अनुभव सुधार गर्दछ जब उनीहरू गैर-अस्तित्वमा रहेका पृष्ठहरूमा नेभिगेट गर्छन्।  
 
-**प्रेरणा:** "not-found" आईडी भएको नयाँ HTML टेम्प्लेट सिर्जना गर्नुहोस् जसले प्रयोगकर्तालाई मैत्रीपूर्ण 404 त्रुटि पृष्ठ देखाउँछ। त्यसपछि जाभास्क्रिप्ट राउटिङ तर्कलाई संशोधन गरेर यो टेम्प्लेट देखाउनुहोस् जब प्रयोगकर्ताहरू अमान्य URL हरूमा नेभिगेट गर्छन्, र "Go Home" बटन थप्नुहोस् जसले लगइन पृष्ठमा फिर्ता नेभिगेट गर्छ।
+**प्रेरणा:** "not-found" आईडी भएको नयाँ HTML टेम्प्लेट बनाउनुहोस् जसले प्रयोगकर्तालाई मैत्रीपूर्ण 404 त्रुटि पृष्ठ देखाउँछ। त्यसपछि, जाभास्क्रिप्ट राउटिङ तर्कलाई संशोधन गर्नुहोस् ताकि यो टेम्प्लेट अमान्य URLहरूमा नेभिगेट गर्दा देखिन्छ। साथै, "Go Home" बटन थप्नुहोस् जसले लगइन पृष्ठमा फर्काउँछ।  
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा यहाँ थप जान्नुहोस्।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा यहाँ थप जान्नुहोस्।  
 
-## 🚀 चुनौती
+## 🚀 चुनौती  
 
-यस एपको क्रेडिटहरू देखाउने तेस्रो पृष्ठको लागि नयाँ टेम्प्लेट र राउट थप्नुहोस्।
+यस एपको क्रेडिटहरू देखाउने तेस्रो पृष्ठको लागि नयाँ टेम्प्लेट र रूट थप्नुहोस्।  
 
-**चुनौतीका लक्ष्यहरू:**
-- उपयुक्त सामग्री संरचनासहित नयाँ HTML टेम्प्लेट **सिर्जना गर्नुहोस्**
-- आफ्नो राउट्स कन्फिगरेसन वस्तुमा नयाँ राउट **थप्नुहोस्**
-- क्रेडिट्स पृष्ठमा र त्यहाँबाट नेभिगेसन लिंकहरू **सामेल गर्नुहोस्**
-- ब्राउजर इतिहासको साथ सबै नेभिगेसन सही रूपमा काम गर्छ कि जाँच गर्नुहोस्
+**चुनौतीका लक्ष्यहरू:**  
+- **उपयुक्त सामग्री संरचनासहित** नयाँ HTML टेम्प्लेट बनाउनुहोस्  
+- **रूट्स कन्फिगरेसन वस्तुमा** नयाँ रूट थप्नुहोस्  
+- **क्रेडिट्स पृष्ठमा जाने र फर्कने नेभिगेसन लिंकहरू समावेश गर्नुहोस्**  
+- **ब्राउजर इतिहाससँग सबै नेभिगेसन सही रूपमा काम गर्छ भनी परीक्षण गर्नुहोस्**  
 
-## पोस्ट-लेक्चर क्विज
+## पोस्ट-व्याख्यान क्विज  
 
-[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/42)
+[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/42)  
 
-## समीक्षा र आत्म अध्ययन
+## समीक्षा र आत्म-अध्ययन  
 
-राउटिङ वेब विकासको एक आश्चर्यजनक रूपमा जटिल भाग हो, विशेष गरी वेब पृष्ठ पुनः लोड व्यवहारबाट सिंगल पेज एप्लिकेसन पृष्ठ रिफ्रेसमा सर्दा। [Azure Static Web App सेवा](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) ले राउटिङ कसरी ह्यान्डल गर्छ भन्ने बारेमा थोरै पढ्नुहोस्। के तपाईंले उक्त डकुमेन्टमा वर्णन गरिएका केही निर्णयहरू किन आवश्यक छन् भनेर व्याख्या गर्न सक्नुहुन्छ?
+राउटिङ वेब विकासको एक आश्चर्यजनक रूपमा जटिल भाग हो, विशेष गरी वेब पृष्ठ रिफ्रेस व्यवहारबाट एकल-पृष्ठ एप्लिकेसन पृष्ठ रिफ्रेसमा सर्दै गर्दा। [Azure Static Web App सेवा](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) ले राउटिङ कसरी व्यवस्थापन गर्छ भन्ने बारेमा थोरै पढ्नुहोस्। तपाईंले उक्त दस्तावेजमा वर्णन गरिएका केही निर्णयहरू किन आवश्यक छन् भनेर व्याख्या गर्न सक्नुहुन्छ?  
 
-**थप सिकाइ स्रोतहरू:**
-- **अनुसन्धान गर्नुहोस्** कि React Router र Vue Router जस्ता लोकप्रिय फ्रेमवर्कहरूले क्लाइन्ट-साइड राउटिङ कसरी कार्यान्वयन गर्छन्
-- **अनुसन्धान गर्नुहोस्** ह्यास-आधारित राउटिङ र इतिहास API राउटिङ बीचको भिन्नता
-- **सिक्नुहोस्** सर्वर-साइड रेंडरिङ (SSR) को बारेमा र यसले राउटिङ रणनीतिहरूलाई कसरी असर गर्छ
-- **अनुसन्धान गर्नुहोस्** प्रोग्रेसिभ वेब एप्स (PWAs) ले राउटिङ र नेभिगेसनलाई कसरी ह्यान्डल गर्छन्
+**थप अध्ययन स्रोतहरू:**  
+- **अनुसन्धान गर्नुहोस्** कि React Router र Vue Router जस्ता लोकप्रिय फ्रेमवर्कहरूले क्लाइन्ट-साइड राउटिङ कसरी लागू गर्छन्  
+- **अन्तर खोज्नुहोस्** ह्यास-आधारित राउटिङ र इतिहास API राउटिङको बीचमा  
+- **सिक्नुहोस्** सर्वर-साइड रेंडरिङ (SSR) र यसले राउटिङ रणनीतिहरूलाई कसरी प्रभावित गर्छ  
+- **अनुसन्धान गर्नुहोस्** कि प्रोग्रेसिभ वेब एप्स (PWAs) ले राउटिङ र नेभिगेसन कसरी व्यवस्थापन गर्छन्  
 
-## असाइनमेन्ट
+## असाइनमेन्ट  
 
-[राउटिङ सुधार गर्नुहोस्](assignment.md)
+[राउटिङ सुधार गर्नुहोस्](assignment.md)  
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/7-bank-project/2-forms/README.md b/translations/ne/7-bank-project/2-forms/README.md
index a4aca20ed6..c35e667598 100644
--- a/translations/ne/7-bank-project/2-forms/README.md
+++ b/translations/ne/7-bank-project/2-forms/README.md
@@ -1,46 +1,93 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b24f28fc46dd473aa9080f174182adde",
-  "translation_date": "2025-10-22T17:09:03+00:00",
+  "original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
+  "translation_date": "2025-11-03T15:45:35+00:00",
   "source_file": "7-bank-project/2-forms/README.md",
   "language_code": "ne"
 }
 -->
 # बैंकिङ एप निर्माण भाग २: लगइन र दर्ता फारम निर्माण
 
+```mermaid
+journey
+    title Your Form Development Journey
+    section HTML Foundation
+      Understand form elements: 3: Student
+      Learn input types: 4: Student
+      Master accessibility: 4: Student
+    section JavaScript Integration
+      Handle form submission: 4: Student
+      Implement AJAX communication: 5: Student
+      Process server responses: 5: Student
+    section Validation Systems
+      Create multi-layer validation: 5: Student
+      Enhance user experience: 5: Student
+      Ensure data integrity: 5: Student
+```
+
 ## प्रि-लेक्चर क्विज
 
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/43)
 
-के तपाईंले कहिल्यै अनलाइन फारम भरेर इमेलको ढाँचा गलत भएको कारण अस्वीकृत भएको अनुभव गर्नुभएको छ? वा सबमिट क्लिक गर्दा सबै जानकारी हराएको? हामी सबैले यस्ता निराशाजनक अनुभवहरू सामना गरेका छौं।
+के तपाईंले कहिल्यै अनलाइन फारम भरेर इमेलको ढाँचा गलत भएको कारण अस्वीकृत भएको अनुभव गर्नुभएको छ? वा सबमिट क्लिक गर्दा सबै जानकारी हराएको छ? हामी सबैले यस्ता निराशाजनक अनुभवहरू सामना गरेका छौं।
 
-फारमहरू तपाईंको प्रयोगकर्ता र तपाईंको एप्लिकेसनको कार्यक्षमताबीचको पुल हुन्। जस्तै हवाई यातायात नियन्त्रकहरूले विमानलाई सुरक्षित गन्तव्यमा पुर्‍याउन सावधानीपूर्वक प्रोटोकल प्रयोग गर्छन्, राम्रोसँग डिजाइन गरिएका फारमहरूले स्पष्ट प्रतिक्रिया दिन्छन् र महँगो गल्तीहरू रोक्छन्। खराब फारमहरूले भने प्रयोगकर्तालाई व्यस्त विमानस्थलमा गलत सञ्चारभन्दा छिटो टाढा लैजान सक्छ।
+फारमहरू तपाईंको प्रयोगकर्ता र तपाईंको एप्लिकेसनको कार्यक्षमताबीचको पुल हुन्। जस्तै हवाई यातायात नियन्त्रकहरूले विमानलाई सुरक्षित गन्तव्यमा पुर्‍याउन सावधानीपूर्वक प्रोटोकलहरू प्रयोग गर्छन्, राम्रोसँग डिजाइन गरिएका फारमहरूले स्पष्ट प्रतिक्रिया दिन्छन् र महँगो गल्तीहरू रोक्छन्। अर्कोतर्फ, खराब फारमहरूले प्रयोगकर्ताहरूलाई व्यस्त विमानस्थलमा गलत सञ्चारको जस्तै छिटो टाढा पुर्‍याउन सक्छ।
 
-यस पाठमा, हामी तपाईंको स्थिर बैंकिङ एपलाई अन्तरक्रियात्मक एप्लिकेसनमा रूपान्तरण गर्नेछौं। तपाईंले प्रयोगकर्ता इनपुट प्रमाणित गर्ने, सर्भरसँग संवाद गर्ने, र उपयोगी प्रतिक्रिया प्रदान गर्ने फारम निर्माण गर्न सिक्नुहुनेछ। यसलाई प्रयोगकर्तालाई तपाईंको एप्लिकेसनको सुविधाहरू नेभिगेट गर्न दिने नियन्त्रण इन्टरफेस निर्माणको रूपमा सोच्नुहोस्।
+यस पाठमा, हामी तपाईंको स्थिर बैंकिङ एपलाई अन्तरक्रियात्मक एप्लिकेसनमा रूपान्तरण गर्नेछौं। तपाईंले प्रयोगकर्ताको इनपुटलाई मान्य बनाउने, सर्भरहरूसँग संवाद गर्ने, र उपयोगी प्रतिक्रिया प्रदान गर्ने फारमहरू निर्माण गर्न सिक्नुहुनेछ। यसलाई प्रयोगकर्ताहरूलाई तपाईंको एप्लिकेसनको सुविधाहरू नेभिगेट गर्न अनुमति दिने नियन्त्रण इन्टरफेस निर्माणको रूपमा सोच्नुहोस्।
 
-पाठको अन्त्यसम्ममा, तपाईंले प्रयोगकर्तालाई निराशा होइन सफलता तर्फ मार्गदर्शन गर्ने प्रमाणिकरणसहितको पूर्ण लगइन र दर्ता प्रणाली तयार गर्न सक्नुहुनेछ।
+पाठको अन्त्यसम्ममा, तपाईंले प्रयोगकर्ताहरूलाई निराशा होइन, सफलतामा मार्गदर्शन गर्ने मान्यतासहितको पूर्ण लगइन र दर्ता प्रणाली तयार गर्नुहुनेछ।
+
+```mermaid
+mindmap
+  root((Form Development))
+    HTML Foundation
+      Semantic Elements
+      Input Types
+      Accessibility
+      Label Association
+    User Experience
+      Validation Feedback
+      Error Prevention
+      Loading States
+      Success Messaging
+    JavaScript Integration
+      Event Handling
+      AJAX Communication
+      Data Processing
+      Error Management
+    Validation Layers
+      HTML5 Validation
+      Client-side Logic
+      Server-side Security
+      Progressive Enhancement
+    Modern Patterns
+      Fetch API
+      Async/Await
+      Form Data API
+      Promise Handling
+```
 
 ## पूर्वापेक्षाहरू
 
-फारम निर्माण सुरु गर्नु अघि, सुनिश्चित गर्नुहोस् कि तपाईंले सबै कुरा सही रूपमा सेट गर्नुभएको छ। यो पाठले हामीले अघिल्लो पाठमा छोडेको ठाउँबाट सुरु गर्छ, त्यसैले यदि तपाईंले अगाडि बढ्नुभएको छ भने, पहिले आधारभूत सेटअप काम गराउनुहोस्।
+फारमहरू निर्माण गर्न सुरु गर्नु अघि, सुनिश्चित गर्नुहोस् कि तपाईंले सबै कुरा सही रूपमा सेट गर्नुभएको छ। यो पाठले हामीले अघिल्लो पाठमा छोडेको ठाउँबाट सुरु गर्दछ, त्यसैले यदि तपाईंले अगाडि बढ्नुभएको छ भने, तपाईंले पहिले आधारभूत कुराहरू काम गर्न फर्कन चाहनुहुन्छ।
 
 ### आवश्यक सेटअप
 
 | कम्पोनेन्ट | स्थिति | विवरण |
-|------------|--------|--------|
+|-----------|--------|-------------|
 | [HTML टेम्प्लेटहरू](../1-template-route/README.md) | ✅ आवश्यक | तपाईंको आधारभूत बैंकिङ एप संरचना |
 | [Node.js](https://nodejs.org) | ✅ आवश्यक | सर्भरको लागि जाभास्क्रिप्ट रनटाइम |
 | [बैंक API सर्भर](../api/README.md) | ✅ आवश्यक | डाटा भण्डारणको लागि ब्याकएन्ड सेवा |
 
-> 💡 **विकास टिप**: तपाईंले दुई अलग-अलग सर्भरहरू एकै समयमा चलाउनुहुनेछ – एउटा तपाईंको फ्रन्ट-एन्ड बैंकिङ एपको लागि र अर्को ब्याकएन्ड API को लागि। यो सेटअप वास्तविक संसारको विकासलाई प्रतिबिम्बित गर्छ जहाँ फ्रन्टएन्ड र ब्याकएन्ड सेवाहरू स्वतन्त्र रूपमा सञ्चालन हुन्छन्।
+> 💡 **विकास टिप**: तपाईंले दुई अलग सर्भरहरू एकै समयमा चलाउनुहुनेछ - एउटा तपाईंको फ्रन्ट-एन्ड बैंकिङ एपको लागि र अर्को ब्याकएन्ड API को लागि। यो सेटअप वास्तविक संसारको विकासलाई प्रतिबिम्बित गर्दछ जहाँ फ्रन्टएन्ड र ब्याकएन्ड सेवाहरू स्वतन्त्र रूपमा सञ्चालन गर्छन्।
 
 ### सर्भर कन्फिगरेसन
 
 **तपाईंको विकास वातावरणमा समावेश हुनेछ:**
 - **फ्रन्टएन्ड सर्भर**: तपाईंको बैंकिङ एपलाई सेवा दिन्छ (सामान्यतया पोर्ट `3000`)
 - **ब्याकएन्ड API सर्भर**: डाटा भण्डारण र पुनःप्राप्ति सम्हाल्छ (पोर्ट `5000`)
-- **दुवै सर्भरहरू** कुनै पनि द्वन्द्व बिना एकै समयमा चल्न सक्छन्
+- **दुबै सर्भरहरू** कुनै द्वन्द्व बिना एकै समयमा चल्न सक्छन्
 
 **तपाईंको API कनेक्शन परीक्षण गर्दै:**
 ```bash
@@ -52,15 +99,15 @@ curl http://localhost:5000/api
 
 ---
 
-## HTML फारम र नियन्त्रणहरू बुझ्दै
+## HTML फारमहरू र नियन्त्रणहरू बुझ्दै
 
-HTML फारमहरू तपाईंको वेब एप्लिकेसनसँग प्रयोगकर्ताहरूको संवाद गर्ने माध्यम हुन्। यसलाई १९ औं शताब्दीमा टाढा ठाउँहरूलाई जोड्ने टेलिग्राफ प्रणालीको रूपमा सोच्नुहोस् – यो प्रयोगकर्ता उद्देश्य र एप्लिकेसन प्रतिक्रियाबीचको सञ्चार प्रोटोकल हो। जब विचारपूर्वक डिजाइन गरिन्छ, तिनीहरूले गल्तीहरू समात्छन्, इनपुट ढाँचा मार्गदर्शन गर्छन्, र उपयोगी सुझावहरू प्रदान गर्छन्।
+HTML फारमहरू तपाईंको वेब एप्लिकेसनसँग प्रयोगकर्ताहरूले संवाद गर्ने तरिका हो। यसलाई १९ औं शताब्दीमा टाढा ठाउँहरूलाई जोड्ने टेलिग्राफ प्रणालीको रूपमा सोच्नुहोस् - यो प्रयोगकर्ता उद्देश्य र एप्लिकेसन प्रतिक्रियाबीचको सञ्चार प्रोटोकल हो। जब विचारपूर्वक डिजाइन गरिन्छ, तिनीहरूले गल्तीहरू समात्छन्, इनपुट ढाँचालाई मार्गदर्शन गर्छन्, र उपयोगी सुझावहरू प्रदान गर्छन्।
 
-आधुनिक फारमहरू आधारभूत पाठ इनपुटभन्दा धेरै परिष्कृत छन्। HTML5 ले विशेष इनपुट प्रकारहरू प्रस्तुत गर्‍यो जसले इमेल प्रमाणिकरण, नम्बर ढाँचा, र मिति चयन स्वचालित रूपमा सम्हाल्छ। यी सुधारहरूले पहुँचयोग्यता र मोबाइल प्रयोगकर्ता अनुभवलाई फाइदा पुर्‍याउँछन्।
+आधुनिक फारमहरू आधारभूत पाठ इनपुटहरू भन्दा धेरै परिष्कृत छन्। HTML5 ले विशेष इनपुट प्रकारहरू प्रस्तुत गर्‍यो जसले स्वचालित रूपमा इमेल मान्यता, संख्या ढाँचा, र मिति चयन सम्हाल्छ। यी सुधारहरूले पहुँचयोग्यता र मोबाइल प्रयोगकर्ता अनुभवलाई फाइदा पुर्‍याउँछन्।
 
 ### आवश्यक फारम तत्वहरू
 
-**प्रत्येक फारमलाई चाहिने निर्माण ब्लकहरू:**
+**प्रत्येक फारमलाई आवश्यक पर्ने निर्माण ब्लकहरू:**
 
 ```html
 <!-- Basic form structure -->
@@ -73,22 +120,22 @@ HTML फारमहरू तपाईंको वेब एप्लिके
 ```
 
 **यस कोडले के गर्छ:**
-- **फारम कन्टेनर सिर्जना गर्छ** अद्वितीय पहिचानसहित
-- **डेटा सबमिशनको लागि HTTP विधि निर्दिष्ट गर्छ**
-- **इनपुटहरूलाई पहुँचयोग्य बनाउन लेबलहरूसँग सम्बन्धित गर्छ**
-- **फारम प्रक्रिया गर्न सबमिट बटन परिभाषित गर्छ**
+- **फारम कन्टेनर** एक अद्वितीय पहिचानकर्तासँग सिर्जना गर्दछ
+- **डेटा सबमिशनको लागि HTTP विधि निर्दिष्ट गर्दछ**
+- **एक्सेसिबिलिटीको लागि इनपुटहरूसँग लेबलहरू सम्बन्धित गर्दछ**
+- **फारम प्रक्रिया गर्न सबमिट बटन परिभाषित गर्दछ**
 
 ### आधुनिक इनपुट प्रकारहरू र विशेषताहरू
 
 | इनपुट प्रकार | उद्देश्य | उदाहरण प्रयोग |
-|--------------|---------|----------------|
+|------------|---------|---------------|
 | `text` | सामान्य पाठ इनपुट | `<input type="text" name="username">` |
-| `email` | इमेल प्रमाणिकरण | `<input type="email" name="email">` |
+| `email` | इमेल मान्यता | `<input type="email" name="email">` |
 | `password` | लुकेको पाठ प्रविष्टि | `<input type="password" name="password">` |
 | `number` | संख्यात्मक इनपुट | `<input type="number" name="balance" min="0">` |
 | `tel` | फोन नम्बरहरू | `<input type="tel" name="phone">` |
 
-> 💡 **आधुनिक HTML5 लाभ**: विशिष्ट इनपुट प्रकारहरू प्रयोग गर्दा स्वचालित प्रमाणिकरण, उपयुक्त मोबाइल किबोर्ड, र अतिरिक्त जाभास्क्रिप्ट बिना राम्रो पहुँचयोग्यता समर्थन प्रदान गर्दछ!
+> 💡 **आधुनिक HTML5 फाइदा**: विशिष्ट इनपुट प्रकारहरू प्रयोग गर्दा स्वचालित मान्यता, उपयुक्त मोबाइल किबोर्डहरू, र अतिरिक्त जाभास्क्रिप्ट बिना राम्रो पहुँचयोग्यता समर्थन प्रदान गर्दछ!
 
 ### बटन प्रकारहरू र व्यवहार
 
@@ -100,15 +147,15 @@ HTML फारमहरू तपाईंको वेब एप्लिके
 ```
 
 **प्रत्येक बटन प्रकारले के गर्छ:**
-- **सबमिट बटनहरू**: फारम सबमिशन ट्रिगर गर्छ र निर्दिष्ट अन्त बिन्दुमा डेटा पठाउँछ
-- **रिसेट बटनहरू**: सबै फारम क्षेत्रहरूलाई प्रारम्भिक अवस्थामा पुनर्स्थापित गर्छ
-- **सामान्य बटनहरू**: कुनै डिफल्ट व्यवहार प्रदान गर्दैन, कार्यक्षमताको लागि कस्टम जाभास्क्रिप्ट आवश्यक हुन्छ
+- **सबमिट बटनहरू**: फारम सबमिशन ट्रिगर गर्दछ र निर्दिष्ट अन्तबिन्दुमा डेटा पठाउँछ
+- **रिसेट बटनहरू**: सबै फारम फिल्डहरूलाई प्रारम्भिक अवस्थामा पुनर्स्थापित गर्दछ
+- **सामान्य बटनहरू**: कुनै डिफल्ट व्यवहार प्रदान गर्दैन, कार्यक्षमताको लागि कस्टम जाभास्क्रिप्ट आवश्यक छ
 
 > ⚠️ **महत्वपूर्ण नोट**: `<input>` तत्व स्व-समापन हो र बन्द गर्ने ट्याग आवश्यक छैन। आधुनिक उत्तम अभ्यास भनेको स्ल्यास बिना `<input>` लेख्नु हो।
 
 ### तपाईंको लगइन फारम निर्माण गर्दै
 
-अब हामी आधुनिक HTML फारम अभ्यासहरू प्रदर्शन गर्ने व्यावहारिक लगइन फारम सिर्जना गर्नेछौं। हामी आधारभूत संरचनाबाट सुरु गर्नेछौं र क्रमिक रूपमा यसलाई पहुँचयोग्यता सुविधाहरू र प्रमाणिकरणसँग सुधार गर्नेछौं।
+अब हामी आधुनिक HTML फारम अभ्यासहरू प्रदर्शन गर्ने व्यावहारिक लगइन फारम सिर्जना गरौं। हामी आधारभूत संरचनाबाट सुरु गर्नेछौं र क्रमशः यसलाई पहुँचयोग्यता सुविधाहरू र मान्यतासँग सुधार गर्नेछौं।
 
 ```html
 <template id="login">
@@ -128,15 +175,15 @@ HTML फारमहरू तपाईंको वेब एप्लिके
 ```
 
 **यहाँ के हुन्छ:**
-- **HTML5 तत्वहरूको साथ फारम संरचना गर्छ**
+- **HTML5 तत्वहरू प्रयोग गरेर फारम संरचना बनाउँछ**
 - **सम्बन्धित तत्वहरूलाई अर्थपूर्ण वर्गहरू भएको `div` कन्टेनरहरू प्रयोग गरेर समूह बनाउँछ**
-- **लेबलहरूलाई `for` र `id` विशेषताहरू प्रयोग गरेर इनपुटहरूसँग सम्बन्धित गर्छ**
-- **अधिक पहुँचयोग्य UX को लागि `autocomplete` र `placeholder` जस्ता आधुनिक विशेषताहरू समावेश गर्छ**
-- **ब्राउजर डिफल्टको सट्टा जाभास्क्रिप्टसँग प्रमाणिकरण सम्हाल्न `novalidate` थप्छ**
+- **लेबलहरूलाई `for` र `id` विशेषताहरू प्रयोग गरेर इनपुटहरूसँग सम्बन्धित गर्दछ**
+- **बेहतर UX को लागि `autocomplete` र `placeholder` जस्ता आधुनिक विशेषताहरू समावेश गर्दछ**
+- **ब्राउजर डिफल्टको सट्टा जाभास्क्रिप्टसँग मान्यता सम्हाल्न `novalidate` थप्छ**
 
 ### सही लेबलहरूको शक्ति
 
-**आधुनिक वेब विकासका लागि लेबलहरू किन महत्त्वपूर्ण छन्:**
+**आधुनिक वेब विकासको लागि लेबलहरू किन महत्त्वपूर्ण छन्:**
 
 ```mermaid
 graph TD
@@ -152,17 +199,17 @@ graph TD
 ```
 
 **सही लेबलहरूले के गर्छ:**
-- **स्क्रीन रिडरहरूलाई फारम क्षेत्रहरू स्पष्ट रूपमा घोषणा गर्न सक्षम बनाउँछ**
-- **क्लिकयोग्य क्षेत्र विस्तार गर्छ (लेबल क्लिक गर्दा इनपुटमा फोकस हुन्छ)**
-- **मोबाइल प्रयोगकर्ताको लागि ठूलो टच लक्ष्यको साथ उपयोगिता सुधार गर्छ**
-- **अर्थपूर्ण त्रुटि सन्देशहरूको साथ फारम प्रमाणिकरण समर्थन गर्छ**
-- **फारम तत्वहरूलाई अर्थपूर्ण अर्थ प्रदान गरेर SEO सुधार गर्छ**
+- **स्क्रिन रिडरहरूलाई फारम फिल्डहरू स्पष्ट रूपमा घोषणा गर्न सक्षम बनाउँछ**
+- **क्लिकयोग्य क्षेत्र विस्तार गर्दछ (लेबल क्लिक गर्दा इनपुटमा फोकस हुन्छ)**
+- **मोबाइल प्रयोगयोग्यतामा सुधार गर्दछ ठूलो टच लक्ष्यहरूसँग**
+- **अर्थपूर्ण त्रुटि सन्देशहरूसँग फारम मान्यतालाई समर्थन गर्दछ**
+- **फारम तत्वहरूलाई अर्थपूर्ण अर्थ प्रदान गरेर SEO सुधार गर्दछ**
 
-> 🎯 **पहुंचयोग्यता लक्ष्य**: प्रत्येक फारम इनपुटसँग सम्बन्धित लेबल हुनुपर्छ। यो सरल अभ्यासले तपाईंको फारमहरू सबै प्रयोगकर्ताहरू, अपाङ्गता भएका व्यक्तिहरू सहित, प्रयोग गर्न योग्य बनाउँछ र सबै प्रयोगकर्ताको अनुभव सुधार गर्छ।
+> 🎯 **पहुंचयोग्यता लक्ष्य**: प्रत्येक फारम इनपुटसँग सम्बन्धित लेबल हुनुपर्छ। यो सरल अभ्यासले तपाईंका फारमहरू सबैका लागि प्रयोगयोग्य बनाउँछ, अपाङ्गता भएका प्रयोगकर्ताहरू सहित, र सबै प्रयोगकर्ताहरूको अनुभव सुधार गर्दछ।
 
 ### दर्ता फारम निर्माण गर्दै
 
-दर्ता फारमले पूर्ण प्रयोगकर्ता खाता सिर्जना गर्न थप विस्तृत जानकारी आवश्यक पर्दछ। आधुनिक HTML5 सुविधाहरू र सुधारिएको पहुँचयोग्यतासहित यसलाई निर्माण गरौं।
+दर्ता फारमले पूर्ण प्रयोगकर्ता खाता सिर्जना गर्न विस्तृत जानकारी आवश्यक पर्दछ। आधुनिक HTML5 सुविधाहरू र सुधारिएको पहुँचयोग्यतासँग यसलाई निर्माण गरौं।
 
 ```html
 <hr/>
@@ -197,44 +244,60 @@ graph TD
 ```
 
 **माथिको कोडमा हामीले:**
-- **प्रत्येक क्षेत्रलाई राम्रो शैली र लेआउटको लागि कन्टेनर div मा व्यवस्थित गरेका छौं**
+- **बेहतर स्टाइल र लेआउटको लागि प्रत्येक फिल्डलाई कन्टेनर `div` मा व्यवस्थित गरेका छौं**
 - **ब्राउजर अटोफिल समर्थनको लागि उपयुक्त `autocomplete` विशेषताहरू थपेका छौं**
-- **प्रयोगकर्ता इनपुट मार्गदर्शन गर्न सहायक प्लेसहोल्डर पाठ समावेश गरेका छौं**
+- **प्रयोगकर्ताको इनपुटलाई मार्गदर्शन गर्न उपयोगी `placeholder` पाठ समावेश गरेका छौं**
 - **`value` विशेषता प्रयोग गरेर संवेदनशील डिफल्ट सेट गरेका छौं**
-- **`required`, `maxlength`, र `min` जस्ता प्रमाणिकरण विशेषताहरू लागू गरेका छौं**
+- **`required`, `maxlength`, र `min` जस्ता मान्यता विशेषताहरू लागू गरेका छौं**
 - **डेसिमल समर्थनसहित `type="number"` प्रयोग गरेका छौं**
 
 ### इनपुट प्रकारहरू र व्यवहार अन्वेषण गर्दै
 
-**आधुनिक इनपुट प्रकारहरूले सुधारिएको कार्यक्षमता प्रदान गर्छ:**
+**आधुनिक इनपुट प्रकारहरूले सुधारिएको कार्यक्षमता प्रदान गर्दछ:**
 
-| विशेषता | लाभ | उदाहरण |
-|---------|-----|--------|
-| `type="number"` | मोबाइलमा संख्यात्मक किबोर्ड | सन्तुलन प्रविष्टि सजिलो बनाउँछ |
+| विशेषता | फाइदा | उदाहरण |
+|---------|---------|----------|
+| `type="number"` | मोबाइलमा संख्यात्मक किबोर्ड | सन्तुलन प्रविष्टि सजिलो |
 | `step="0.01"` | दशमलव परिशुद्धता नियन्त्रण | मुद्रामा सेन्टहरू अनुमति दिन्छ |
 | `autocomplete` | ब्राउजर अटोफिल | फारम पूरा गर्न छिटो |
-| `placeholder` | सन्दर्भात्मक संकेतहरू | प्रयोगकर्ता अपेक्षाहरू मार्गदर्शन गर्छ |
+| `placeholder` | सन्दर्भात्मक संकेतहरू | प्रयोगकर्ताको अपेक्षालाई मार्गदर्शन गर्दछ |
+
+> 🎯 **पहुंचयोग्यता चुनौती**: केवल तपाईंको किबोर्ड प्रयोग गरेर फारमहरू नेभिगेट गर्न प्रयास गर्नुहोस्! `Tab` प्रयोग गरेर फिल्डहरू बीच सर्नुहोस्, `Space` प्रयोग गरेर चेक बक्सहरू जाँच गर्नुहोस्, र `Enter` प्रयोग गरेर सबमिट गर्नुहोस्। यो अनुभवले तपाईंलाई स्क्रिन रिडर प्रयोगकर्ताहरूले तपाईंका फारमहरूसँग कसरी अन्तरक्रिया गर्छन् भन्ने बुझ्न मद्दत गर्दछ।
 
-> 🎯 **पहुंचयोग्यता चुनौती**: केवल तपाईंको किबोर्ड प्रयोग गरेर फारमहरू नेभिगेट गर्न प्रयास गर्नुहोस्! `Tab` प्रयोग गरेर क्षेत्रहरू बीच सर्नुहोस्, `Space` प्रयोग गरेर चेक बक्सहरू जाँच गर्नुहोस्, र `Enter` प्रयोग गरेर सबमिट गर्नुहोस्। यो अनुभवले तपाईंलाई स्क्रीन रिडर प्रयोगकर्ताहरूले तपाईंको फारमहरूसँग कसरी अन्तरक्रिया गर्छन् भन्ने बुझ्न मद्दत गर्छ।
+### 🔄 **शैक्षिक जाँच**
+**फारमको आधारभूत बुझाइ**: जाभास्क्रिप्ट कार्यान्वयन गर्नु अघि सुनिश्चित गर्नुहोस् कि तपाईंले बुझ्नुभएको छ:
+- ✅ कसरी अर्थपूर्ण HTML पहुँचयोग्य फारम संरचना सिर्जना गर्दछ
+- ✅ किन इनपुट प्रकारहरू मोबाइल किबोर्ड र मान्यताको लागि महत्त्वपूर्ण छन्
+- ✅ लेबलहरू र फारम नियन्त्रणहरू बीचको सम्बन्ध
+- ✅ फारम विशेषताहरूले ब्राउजरको डिफल्ट व्यवहारलाई कसरी असर गर्छ
+
+**छिटो आत्म-परीक्षण**: यदि तपाईंले जाभास्क्रिप्ट ह्यान्डलिङ बिना फारम सबमिट गर्नुभयो भने के हुन्छ?
+*उत्तर: ब्राउजरले डिफल्ट सबमिशन प्रदर्शन गर्दछ, सामान्यतया कार्य URL मा पुनःनिर्देशन गर्दै*
+
+**HTML5 फारम लाभहरू**: आधुनिक फारमहरूले प्रदान गर्छन्:
+- **निर्मित मान्यता**: स्वचालित इमेल र संख्या ढाँचा जाँच
+- **मोबाइल अनुकूलन**: विभिन्न इनपुट प्रकारहरूको लागि उपयुक्त किबोर्डहरू
+- **पहुंचयोग्यता**: स्क्रिन रिडर समर्थन र किबोर्ड नेभिगेसन
+- **प्रगतिशील सुधार**: जाभास्क्रिप्ट अक्षम हुँदा पनि काम गर्दछ
 
 ## फारम सबमिशन विधिहरू बुझ्दै
 
-जब कसैले तपाईंको फारम भर्छ र सबमिट क्लिक गर्छ, त्यो डेटा कतै जानुपर्छ – सामान्यतया सर्भरमा जसले यसलाई बचत गर्न सक्छ। यो विभिन्न तरिकामा हुन सक्छ, र कुन प्रयोग गर्ने थाहा पाउनुले पछि केही टाउको दुखाइबाट बचाउन सक्छ।
+जब कसैले तपाईंको फारम भर्छ र सबमिट क्लिक गर्छ, त्यो डेटा कतै जानुपर्छ – सामान्यतया सर्भरमा जसले यसलाई बचत गर्न सक्छ। यो विभिन्न तरिकाहरूमा हुन सक्छ, र कुन प्रयोग गर्ने थाहा पाउनुले पछि केही समस्याहरूबाट बच्न सक्छ।
 
-आउनुहोस्, कसैले सबमिट बटन क्लिक गर्दा वास्तवमा के हुन्छ हेर्नुहोस्।
+आउनुहोस्, कसैले सबमिट बटन क्लिक गर्दा वास्तवमा के हुन्छ भनेर हेरौं।
 
 ### डिफल्ट फारम व्यवहार
 
-पहिले, आधारभूत फारम सबमिशनसँग के हुन्छ हेर्नुहोस्:
+पहिले, आधारभूत फारम सबमिशनसँग के हुन्छ भनेर अवलोकन गरौं:
 
-**तपाईंको हालको फारमहरू परीक्षण गर्नुहोस्:**
-1. तपाईंको फारममा *Register* बटन क्लिक गर्नुहोस्
-2. तपाईंको ब्राउजरको ठेगाना बारमा परिवर्तनहरू अवलोकन गर्नुहोस्
+**तपाईंका हालका फारमहरू परीक्षण गर्नुहोस्:**
+1. तपाईंको फारममा *दर्ता* बटन क्लिक गर्नुहोस्
+2. तपाईंको ब्राउजरको ठेगाना पट्टीमा परिवर्तनहरू अवलोकन गर्नुहोस्
 3. पृष्ठ पुनः लोड भएको र URL मा डेटा देखा परेको नोट गर्नुहोस्
 
-![Register बटन क्लिक गरेपछि ब्राउजरको URL परिवर्तनको स्क्रिनशट](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ne.png)
+![दर्ता बटन क्लिक गरेपछि ब्राउजरको URL परिवर्तनको स्क्रिनसट](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ne.png)
 
-### HTTP विधिहरू तुलना
+### HTTP विधिहरूको तुलना
 
 ```mermaid
 graph TD
@@ -253,22 +316,22 @@ graph TD
 
 **भिन्नताहरू बुझ्दै:**
 
-| विधि | प्रयोग केस | डेटा स्थान | सुरक्षा स्तर | आकार सीमा |
-|------|-----------|------------|--------------|-----------|
+| विधि | प्रयोग केस | डाटा स्थान | सुरक्षा स्तर | आकार सीमा |
+|--------|----------|---------------|----------------|-------------|
 | `GET` | खोज क्वेरीहरू, फिल्टरहरू | URL प्यारामिटरहरू | कम (देखिने) | ~2000 क्यारेक्टरहरू |
 | `POST` | प्रयोगकर्ता खाता, संवेदनशील डेटा | अनुरोध शरीर | उच्च (लुकेको) | कुनै व्यावहारिक सीमा छैन |
 
 **मूलभूत भिन्नताहरू बुझ्दै:**
-- **GET**: फारम डेटा URL मा क्वेरी प्यारामिटरको रूपमा थप्छ (खोज कार्यहरूको लागि उपयुक्त)
-- **POST**: डेटा अनुरोध शरीरमा समावेश गर्छ (संवेदनशील जानकारीको लागि आवश्यक)
+- **GET**: फारम डेटा URL मा क्वेरी प्यारामिटरहरू रूपमा थप्छ (खोज कार्यहरूको लागि उपयुक्त)
+- **POST**: डेटा अनुरोध शरीरमा समावेश गर्दछ (संवेदनशील जानकारीको लागि आवश्यक)
 - **GET सीमाहरू**: आकार प्रतिबन्ध, देखिने डेटा, स्थायी ब्राउजर इतिहास
 - **POST लाभहरू**: ठूलो डेटा क्षमता, गोपनीयता सुरक्षा, फाइल अपलोड समर्थन
 
-> 💡 **उत्तम अभ्यास**: खोज फारम र फिल्टरहरूको लागि `GET` प्रयोग गर्नुहोस् (डेटा पुनःप्राप्ति), प्रयोगकर्ता दर्ता, लगइन, र डेटा सिर्जनाको लागि `POST` प्रयोग गर्नुहोस्।
+> 💡 **उत्तम अभ्यास**: खोज फारमहरू र फिल्टरहरूको लागि `GET` प्रयोग गर्नुहोस् (डाटा पुनःप्राप्ति), प्रयोगकर्ता दर्ता, लगइन, र डाटा सिर्जनाको लागि `POST` प्रयोग गर्नुहोस्।
 
-### फारम सबमिशन कन्फिगरेसन
+### फारम सबमिशन कन्फिगर गर्दै
 
-आउनुहोस्, तपाईंको दर्ता फारमलाई POST विधि प्रयोग गरेर ब्याकएन्ड API सँग ठीकसँग संवाद गर्न कन्फिगर गरौं:
+आउनुहोस् तपाईंको दर्ता फारमलाई POST विधि प्रयोग गरेर ब्याकएन्ड API सँग ठीकसँग संवाद गर्न कन्फिगर गरौं:
 
 ```html
 <form id="registerForm" action="//localhost:5000/api/accounts" 
@@ -276,25 +339,25 @@ graph TD
 ```
 
 **यस कन्फिगरेसनले के गर्छ:**
-- **तपाईंको API अन्त बिन्दुमा फारम सबमिशन निर्देशित गर्छ**
-- **सुरक्षित डेटा प्रसारणको लागि POST विधि प्रयोग गर्छ**
-- **ब्राउजर डिफल्टको सट्टा जाभास्क्रिप्टसँग प्रमाणिकरण सम्हाल्न `novalidate` समावेश गर्छ**
+- **तपाईंको API अन्तबिन्दुमा फारम सबमिशन निर्देशित गर्दछ**
+- **सुरक्षित डेटा प्रसारणको लागि POST विधि प्रयोग गर्दछ**
+- **ब्राउजर डिफल्ट मान्यता सम्हाल्न `novalidate` समावेश गर्दछ**
 
 ### फारम सबमिशन परीक्षण गर्दै
 
 **तपाईंको फारम परीक्षण गर्न यी चरणहरू पालना गर्नुहोस्:**
-1. **तपाईंको जानकारीसहित** दर्ता फारम भर्नुहोस्
-2. **"Create Account" बटन क्लिक गर्नुहोस्**
+1. **दर्ता फारम भर्नुहोस्** तपाईंको जानकारीसँग
+2. **"खाता सिर्जना गर्नुहोस्" बटन क्लिक गर्नुहोस्**
 3. **तपाईंको ब्राउजरमा सर्भर प्रतिक्रिया अवलोकन गर्नुहोस्**
 
-![ब्राउजर विन्डो localhost:5000/api/accounts मा, प्रयोगकर्ता डेटा भएको JSON स्ट्रिङ देखाउँदै](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ne.png)
+![ब्राउजर विन्डो, ठेगाना localhost:5000/api/accounts मा, JSON स्ट्रिङ देखाउँदै प्रयोगकर्ता डेटा सहित](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ne.png)
 
 **तपाईंले के देख्नुहुन्छ:**
-- **ब्राउजरले** API अन्त बिन्दु URL मा पुनःनिर्देशित गर्छ
-- **JSON प्रतिक्रिया** जसमा तपाईंको नयाँ खाता डेटा समावेश छ
+- **ब्राउजर पुनःनिर्देशन** API अन्तबिन्दु URL मा
+- **JSON प्रतिक्रिया** तपाईंको नयाँ सिर्जित खाता डेटा समावेश गर्दै
 - **सर्भर पुष्टि** कि खाता सफलतापूर्वक सिर्जना गरिएको छ
 
-> 🧪 **प्रयोग समय**: उस्तै प्रयोगकर्ता नामको साथ फेरि दर्ता प्रयास गर्नुहोस्। तपाईंले के प्रतिक्रिया प्राप्त गर्नुहुन्छ? यसले तपाईंलाई सर्भरले डुप्लिकेट डेटा र त्रुटि अवस्थाहरू कसरी सम्हाल्छ भन्ने बुझ्न मद्दत गर्छ।
+> 🧪 **प्रयोग समय**: उही प्रयोगकर्ता नामसँग फेरि दर्ता गर्न प्रयास गर्नुहोस्। तपाईंले कस्तो प्रतिक्रिया प्राप्त गर्नुहुन्छ? यसले तपाईंलाई सर्भरले डुप्लिकेट डेटा र त्रुटि अवस्थाहरू कसरी सम्हाल्छ भन्ने बुझ्न मद्दत गर्दछ।
 
 ### JSON प्रतिक्रियाहरू बुझ्दै
 
@@ -309,19 +372,19 @@ graph TD
 }
 ```
 
-**यो प्रतिक्रिया पुष्टि गर्छ:**
-- **तपाईंले निर्दिष्ट गरेको डेटा सहित नयाँ खाता सिर्जना गर्छ**
-- **भविष्य सन्दर्भको लागि अद्वितीय पहिचान प्रदान गर्छ**
+**यो प्रतिक्रिया पुष्टि गर्दछ:**
+- **तपाईंको निर्दिष्ट डेटा प्रयोग गरेर नयाँ खाता सिर्जना गर्दछ**
+- **भविष्य सन्दर्भको लागि अद्वितीय पहिचानकर्ता असाइन गर्दछ**
 - **सत्यापनको लागि सबै खाता जानकारी फर्काउँछ**
-- **डाटाबेस भण्डारण सफल भएको संकेत गर्छ**
+- **डाटाबेस भण्डारण सफल भएको संकेत गर्दछ**
 
 ## आधुनिक फारम ह्यान्डलिङ जाभास्क्रिप्टसँग
 
-पारम्परिक फारम सबमिशनले पूर्ण पृष्ठ पुनः लोड गराउँछ, जस्तै प्रारम्भिक अन्तरिक्ष मिशनहरूले कोर्स सुधारको लागि पूर्ण प्रणाली रिसेट आवश्यक थियो। यसले प्रयोगकर्ता अनुभवलाई बाधा पुर्‍याउँछ र एप्लिकेसनको अवस्था गुमाउँछ।
+परम्परागत फारम सबमिशनले पूर्ण पृष्ठ पुनः लोड गराउँछ, जस्तै प्रारम्भिक अन्तरिक्ष मिशनहरूले कोर्स सुधारका लागि पूर्ण प्रणाली रिसेट आवश्यक थियो। यो दृष्टिकोणले प्रयोगकर्ता अनुभवलाई बाधा पुर्‍याउँछ र एप्लिकेसनको अवस्था गुमाउँछ।
 
-जाभास्क्रिप्ट फारम ह्यान्डलिङले आधुनिक अन्तरिक्ष यानले प्रयोग गर्ने निरन्तर मार्गदर्शन प्रणाली जस्तै काम गर्छ – नेभिगेसन सन्दर्भ गुमाउँदा बिना वास्तविक समय समायोजनहरू गर्दै। हामी फारम सबमिशनलाई रोक्न सक्छौं, तत्काल प्रतिक्रिया प्रदान गर्न सक्छौं, त्रुटिहरूलाई सहज रूपमा सम्हाल्न सक्छौं, र प्रयोगकर्ताको एप्लिकेसनमा स्थिति कायम राख्दै सर्भर प्रतिक्रियाको आधारमा इन्टरफेस अपडेट गर्न सक्छौं।
+जाभास्क्रिप्ट फारम ह्यान्डलिङले आधुनिक अन्तरिक्ष यानले प्रयोग गर्ने निरन्तर मार्गदर्शन प्रणालीहरू जस्तै काम गर्छ – नेभिगेसन सन्दर्भ गुमाउँदा बिना वास्तविक समय समायोजनहरू गर्दै। हामी फारम सबमिशनलाई रोक्न सक्छौं, तत्काल प्रतिक्रिया प्रदान गर्न सक्छौं, त्रुटिहरूलाई सुन्दर रूपमा सम्हाल्न सक्छौं, र प्रयोगकर्ताको एप्लिकेसनमा स्थिति कायम राख्दै सर्भर प्रतिक्रियाहरूको आधारमा इन्टरफेस अपडेट गर्न सक्छौं।
 
-### पृष्ठ पुनः लोड किन टाल्ने?
+### पृष्ठ पुनः लोड किन टार्नुहोस्?
 
 ```mermaid
 sequenceDiagram
@@ -337,87 +400,102 @@ sequenceDiagram
     Note over User,SPA: No page reload!
 ```
 
-**जाभास्क्रिप्ट फारम ह्यान्डलिङका लाभहरू:**
-- **एप्लिकेसन अवस्था र प्रयोगकर्ता सन्दर्भ कायम राख्छ**
-- **तत्काल प्रतिक्रिया र लोडिङ संकेतकहरू प्रदान गर्छ**
-- **गतिशील त्रुटि ह्यान्डलिङ र प्रमाणिकरण सक्षम बनाउँछ**
-- **स्मूथ, एप-जस्तै प्रयोगकर्ता अनुभव सिर्जना गर्छ**
-- **सर्भर प्रतिक्रियाको आधारमा सशर्त तर्क अनुमति दिन्छ**
-
-### पारम्परिकबाट आधुनिक फारममा संक्रमण
-
-**पारम्परिक दृष्टिकोण चुनौतीहरू:**
-- **प्रयोगकर्तालाई तपाईंको एप्लिकेसनबाट टाढा लैजान्छ**
-- **हालको एप्लिकेसन अवस्था र सन्दर्भ गुमाउँछ**
-- **साधारण अपरेसनहरूको लागि पूर्ण पृष्ठ पुनः लोड आवश्यक छ**
-- **प्रयोगकर्ता प्रतिक्रियामा सीमित नियन्त्रण प्रदान गर्छ**
-
-**आधुनिक जाभास्क्रिप्ट दृष्टिकोण लाभहरू:**
-- **प्रयोगकर्तालाई तपाईंको एप्लिकेसनभित्र राख्छ**
-- **सबै एप्लिकेसन अवस्था र डेटा कायम राख्छ**
-- **वास्तविक समय प्रमाणिकरण र प्रतिक्रिया सक्षम बनाउँछ**
-- **प्रगतिशील सुधार र पहुँचयोग्यता समर्थन गर्छ**
-
-### जाभास्क्रिप्ट फारम ह्यान्डलिङ कार्यान्वयन गर्दै
+**जाभास्क्रिप्ट फारम ह्यान्डलिङका फाइदाहरू:**
+- **एप्लिकेसनको अवस्था र प्रयोगकर्ताको सन्दर्भ कायम राख्छ**
+- **तत्काल प्रतिक्रिया र लोडिङ
+```javascript
+// Example of what FormData captures
+const formData = new FormData(registerForm);
+
+// FormData automatically captures:
+// {
+//   "user": "john_doe",
+//   "currency": "$", 
+//   "description": "Personal account",
+//   "balance": "100"
+// }
+```
 
-आउनुहोस्, पारम्परिक फारम सबमिशनलाई आधुनिक जाभास्क्रिप्ट इभेन्ट ह्यान्डलिङसँग प्रतिस्थापन गरौं:
+**FormData API का फाइदाहरू:**
+- **व्यापक संग्रह**: सबै फारम तत्वहरू समेट्छ, जस्तै पाठ, फाइलहरू, र जटिल इनपुटहरू
+- **प्रकारको जानकारी**: विभिन्न इनपुट प्रकारहरूलाई स्वचालित रूपमा ह्यान्डल गर्छ, कुनै कस्टम कोडिङ बिना
+- **क्षमता**: एकल API कलले म्यानुअल फिल्ड संग्रहलाई हटाउँछ
+- **अनुकूलता**: फारम संरचना परिवर्तन भए पनि कार्यक्षमता कायम राख्छ
 
-```html
-<!-- Remove the action attribute and add event handling -->
-<form id="registerForm" method="POST" novalidate>
-```
+### सर्भर संचार कार्य बनाउने
 
-**तपाईंको `app.js` फाइलमा दर्ता तर्क थप्नुहोस्:**
+अब आधुनिक JavaScript ढाँचाहरू प्रयोग गरेर तपाईंको API सर्भरसँग संचार गर्न एक बलियो कार्य बनाउँछौं:
 
 ```javascript
-// Modern event-driven form handling
-function register() {
-  const registerForm = document.getElementById('registerForm');
-  const formData = new FormData(registerForm);
-  const data = Object.fromEntries(formData);
-  const jsonData = JSON.stringify(data);
-  
-  console.log('Form data prepared:', data);
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: account
+    });
+    
+    // Check if the response was successful
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    return await response.json();
+  } catch (error) {
+    console.error('Account creation failed:', error);
+    return { error: error.message || 'Network error occurred' };
+  }
 }
+```
 
-// Attach event listener when the page loads
-document.addEventListener('DOMContentLoaded', () => {
-  const registerForm = document.getElementById('registerForm');
-  registerForm.addEventListener('submit', (event) => {
-    event.preventDefault(); // Prevent default form submission
-    register();
-  });
-});
+**असिंक्रोनस JavaScript बुझ्दै:**
+
+```mermaid
+sequenceDiagram
+    participant JS as JavaScript
+    participant Fetch as Fetch API
+    participant Server as Backend Server
+    
+    JS->>Fetch: fetch() request
+    Fetch->>Server: HTTP POST
+    Server-->>Fetch: JSON response
+    Fetch-->>JS: await response
+    JS->>JS: Process data
 ```
 
-**यहाँ के हुन्छ:**
-- **डिफल्ट फारम सबमिशनलाई `event.preventDefault()` प्रयोग गरेर रोक्छ**
-- **आधुनिक DOM चयन प्रयोग गरेर
-- **विस्तृत त्रुटि सन्देशहरू** डिबगिङका लागि प्रदान गर्दछ  
-- **सफलता र त्रुटि केसहरूका लागि** स्थिर डाटा संरचना फर्काउँछ  
+**यस आधुनिक कार्यान्वयनले के हासिल गर्छ:**
+- **प्रयोग गर्छ** `async/await` पठनीय असिंक्रोनस कोडका लागि
+- **सही त्रुटि ह्यान्डलिङ समावेश गर्छ** try/catch ब्लकहरू प्रयोग गरेर
+- **प्रतिक्रिया स्थिति जाँच्छ** डेटा प्रक्रिया गर्नु अघि
+- **JSON संचारका लागि उपयुक्त हेडर सेट गर्छ**
+- **डिबगिङका लागि विस्तृत त्रुटि सन्देश प्रदान गर्छ**
+- **सफलता र त्रुटि केसहरूको लागि सुसंगत डेटा संरचना फर्काउँछ**
 
-### आधुनिक Fetch API को शक्ति  
+### आधुनिक Fetch API को शक्ति
 
-**पुराना विधिहरूको तुलनामा Fetch API का फाइदाहरू:**  
+**Fetch API का पुराना विधिहरू भन्दा फाइदाहरू:**
 
-| विशेषता | फाइदा | कार्यान्वयन |  
-|---------|---------|----------------|  
-| प्रॉमिस-आधारित | सफा असिंक्रोनस कोड | `await fetch()` |  
-| अनुरोध अनुकूलन | पूर्ण HTTP नियन्त्रण | हेडरहरू, विधिहरू, बडी |  
-| प्रतिक्रिया ह्यान्डलिङ | लचिलो डाटा पार्सिङ | `.json()`, `.text()`, `.blob()` |  
-| त्रुटि ह्यान्डलिङ | व्यापक त्रुटि समात्ने | Try/catch ब्लकहरू |  
+| विशेषता | फाइदा | कार्यान्वयन |
+|---------|---------|----------------|
+| प्रॉमिस-आधारित | सफा असिंक्रोनस कोड | `await fetch()` |
+| अनुरोध अनुकूलन | पूर्ण HTTP नियन्त्रण | हेडरहरू, विधिहरू, शरीर |
+| प्रतिक्रिया ह्यान्डलिङ | लचिलो डेटा पार्सिङ | `.json()`, `.text()`, `.blob()` |
+| त्रुटि ह्यान्डलिङ | व्यापक त्रुटि समात्ने | Try/catch ब्लकहरू |
 
-> 🎥 **थप जान्नुहोस्**: [Async/Await ट्युटोरियल](https://youtube.com/watch?v=YwmlRkrxvkk) - आधुनिक वेब विकासका लागि असिंक्रोनस जाभास्क्रिप्ट ढाँचाहरू बुझ्दै।  
+> 🎥 **थप जान्नुहोस्**: [Async/Await ट्युटोरियल](https://youtube.com/watch?v=YwmlRkrxvkk) - आधुनिक वेब विकासका लागि असिंक्रोनस JavaScript ढाँचाहरू बुझ्दै।
 
-**सर्भर संचारका लागि मुख्य अवधारणाहरू:**  
-- **Async functions** सर्भर प्रतिक्रियाको प्रतीक्षा गर्न कार्यान्वयन रोक्न अनुमति दिन्छ  
-- **Await keyword** असिंक्रोनस कोडलाई सिंक्रोनस कोडजस्तै पढ्न सजिलो बनाउँछ  
-- **Fetch API** आधुनिक, प्रॉमिस-आधारित HTTP अनुरोधहरू प्रदान गर्दछ  
-- **Error handling** सुनिश्चित गर्दछ कि तपाईंको एपले नेटवर्क समस्याहरूलाई सहज रूपमा प्रतिक्रिया दिन्छ  
+**सर्भर संचारका लागि मुख्य अवधारणाहरू:**
+- **Async कार्यहरू** सर्भर प्रतिक्रियाको प्रतीक्षा गर्न कार्यान्वयन रोक्न अनुमति दिन्छ
+- **Await कीवर्ड** असिंक्रोनस कोडलाई सिंक्रोनस कोड जस्तै पढ्न बनाउँछ
+- **Fetch API** आधुनिक, प्रॉमिस-आधारित HTTP अनुरोधहरू प्रदान गर्छ
+- **त्रुटि ह्यान्डलिङ** सुनिश्चित गर्छ कि तपाईंको एप नेटवर्क समस्याहरूमा राम्रोसँग प्रतिक्रिया दिन्छ
 
-### दर्ता कार्य पूरा गर्दै  
+### दर्ता कार्य पूरा गर्दै
 
-अब सबै कुरा एकसाथ ल्याएर उत्पादन-तयार दर्ता कार्य बनाऔं:  
+सबै कुरा एकसाथ ल्याएर पूर्ण, उत्पादन-तयार दर्ता कार्य बनाउँछौं:
 
 ```javascript
 async function register() {
@@ -458,41 +536,61 @@ async function register() {
   }
 }
 ```
-  
-**यस सुधारिएको कार्यान्वयनमा समावेश छ:**  
-- **दर्शनीय प्रतिक्रिया प्रदान गर्दछ** फारम सबमिशनको समयमा  
-- **सबमिट बटनलाई निष्क्रिय बनाउँछ** दोहोरिने सबमिशन रोक्न  
-- **दुवै अपेक्षित र अप्रत्याशित त्रुटिहरूलाई** सहज रूपमा ह्यान्डल गर्दछ  
-- **प्रयोगकर्तालाई अनुकूल सफलता र त्रुटि सन्देशहरू देखाउँछ**  
-- **सफल दर्तापछि फारमलाई रिसेट गर्दछ**  
-- **परिणामको परवाह नगरी UI स्थिति पुनर्स्थापित गर्दछ**  
 
-### तपाईंको कार्यान्वयन परीक्षण गर्दै  
+**यस सुधारिएको कार्यान्वयनमा समावेश छ:**
+- **दृश्य प्रतिक्रिया प्रदान गर्छ** फारम सबमिशनको समयमा
+- **सबमिट बटनलाई निष्क्रिय बनाउँछ** दोहोरिएको सबमिशन रोक्न
+- **अपेक्षित र अप्रत्याशित त्रुटिहरूलाई राम्रोसँग ह्यान्डल गर्छ**
+- **सफलता र त्रुटि सन्देशहरू प्रयोगकर्ता-अनुकूल देखाउँछ**
+- **सफल दर्तापछि फारम रिसेट गर्छ**
+- **परिणामको परवाह नगरी UI स्थिति पुनर्स्थापित गर्छ**
+
+### तपाईंको कार्यान्वयन परीक्षण गर्दै
+
+**तपाईंको ब्राउजर डेभलपर टूल्स खोल्नुहोस् र दर्ता परीक्षण गर्नुहोस्:**
+
+1. **खोल्नुहोस्** ब्राउजर कन्सोल (F12 → कन्सोल ट्याब)
+2. **दर्ता फारम भर्नुहोस्**
+3. **क्लिक गर्नुहोस्** "खाता सिर्जना गर्नुहोस्"
+4. **कन्सोल सन्देशहरू र प्रयोगकर्ता प्रतिक्रिया अवलोकन गर्नुहोस्**
 
-**तपाईंको ब्राउजर डेभलपर टूल्स खोल्नुहोस् र दर्ता परीक्षण गर्नुहोस्:**  
+![ब्राउजर कन्सोलमा देखिएको लग सन्देशको स्क्रिनशट](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ne.png)
 
-1. **ब्राउजर कन्सोल खोल्नुहोस्** (F12 → कन्सोल ट्याब)  
-2. **दर्ता फारम भर्नुहोस्**  
-3. **"खाता सिर्जना गर्नुहोस्" क्लिक गर्नुहोस्**  
-4. **कन्सोल सन्देशहरू र प्रयोगकर्ता प्रतिक्रिया अवलोकन गर्नुहोस्**  
+**तपाईंले के देख्नुहुन्छ:**
+- **लोडिङ स्थिति** सबमिट बटनमा देखा पर्छ
+- **कन्सोल लगहरू** प्रक्रियाको विस्तृत जानकारी देखाउँछ
+- **सफलता सन्देश** खाता सिर्जना सफल हुँदा देखा पर्छ
+- **फारम स्वतः रिसेट हुन्छ** सफल सबमिशन पछि
+
+> 🔒 **सुरक्षा विचार**: हाल, डेटा HTTP मार्फत यात्रा गर्छ, जुन उत्पादनका लागि सुरक्षित छैन। वास्तविक एपहरूमा, सधैं HTTPS प्रयोग गर्नुहोस् डेटा प्रसारणलाई एन्क्रिप्ट गर्न। [HTTPS सुरक्षा](https://en.wikipedia.org/wiki/HTTPS) र प्रयोगकर्ता डेटा सुरक्षित गर्न किन यो आवश्यक छ भन्ने बारे थप जान्नुहोस्।
 
-![ब्राउजर कन्सोलमा देखिएको लग सन्देशको स्क्रिनशट](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ne.png)  
+### 🔄 **शिक्षण जाँच**
+**आधुनिक JavaScript एकीकरण**: असिंक्रोनस फारम ह्यान्डलिङको तपाईंको बुझाइ प्रमाणित गर्नुहोस्:
+- ✅ `event.preventDefault()` ले डिफल्ट फारम व्यवहारलाई कसरी परिवर्तन गर्छ?
+- ✅ किन FormData API म्यानुअल फिल्ड संग्रह भन्दा बढी प्रभावकारी छ?
+- ✅ Async/await ढाँचाहरूले कोड पठनीयता कसरी सुधार गर्छ?
+- ✅ त्रुटि ह्यान्डलिङले प्रयोगकर्ता अनुभवमा के भूमिका खेल्छ?
 
-**तपाईंले देख्नुपर्ने कुरा:**  
-- **लोडिङ स्थिति** सबमिट बटनमा देखा पर्छ  
-- **कन्सोल लगहरू** प्रक्रियाको विस्तृत जानकारी देखाउँछन्  
-- **सफलता सन्देश** खाता सिर्जना सफल हुँदा देखा पर्छ  
-- **फारम स्वतः रिसेट हुन्छ** सफल सबमिशनपछि  
+**सिस्टम आर्किटेक्चर**: तपाईंको फारम ह्यान्डलिङले प्रदर्शन गर्छ:
+- **इभेन्ट-ड्रिभन प्रोग्रामिङ**: पृष्ठ पुनः लोड नगरी प्रयोगकर्ता क्रियाकलापहरूमा प्रतिक्रिया दिन्छ
+- **असिंक्रोनस संचार**: सर्भर अनुरोधहरूले प्रयोगकर्ता इन्टरफेसलाई अवरोध गर्दैन
+- **त्रुटि ह्यान्डलिङ**: नेटवर्क अनुरोधहरू असफल हुँदा राम्रोसँग प्रतिक्रिया दिन्छ
+- **राज्य व्यवस्थापन**: UI अपडेटहरू सर्भर प्रतिक्रियाहरूलाई प्रतिबिम्बित गर्छ
+- **प्रगतिशील सुधार**: आधारभूत कार्यक्षमता काम गर्छ, JavaScript यसलाई सुधार्छ
 
-> 🔒 **सुरक्षा विचार**: हाल, डाटा HTTP मार्फत यात्रा गर्दछ, जुन उत्पादनका लागि सुरक्षित छैन। वास्तविक एपहरूमा, सधैं HTTPS प्रयोग गर्नुहोस् डाटा प्रसारणलाई एन्क्रिप्ट गर्न। [HTTPS सुरक्षा](https://en.wikipedia.org/wiki/HTTPS) र प्रयोगकर्ता डाटा सुरक्षित गर्न किन यो आवश्यक छ भन्ने बारे थप जान्नुहोस्।  
+**व्यावसायिक ढाँचाहरू**: तपाईंले कार्यान्वयन गर्नुभएको छ:
+- **एकल जिम्मेवारी**: कार्यहरू स्पष्ट, केन्द्रित उद्देश्यहरू छन्
+- **त्रुटि सीमा**: Try/catch ब्लकहरूले एप क्र्यास हुनबाट रोक्छ
+- **प्रयोगकर्ता प्रतिक्रिया**: लोडिङ स्थिति र सफलता/त्रुटि सन्देशहरू
+- **डेटा रूपान्तरण**: सर्भर संचारका लागि FormData लाई JSON मा रूपान्तरण
 
-## व्यापक फारम मान्यता  
+## व्यापक फारम मान्यता
 
-फारम मान्यताले त्रुटिहरू सबमिशनपछि मात्र पत्ता लगाउने निराशाजनक अनुभवलाई रोक्छ। अन्तर्राष्ट्रिय स्पेस स्टेशनमा बहु-अतिरिक्त प्रणालीहरूजस्तै, प्रभावकारी मान्यताले सुरक्षा जाँचको बहु-स्तरहरू प्रयोग गर्दछ।  
+फारम मान्यताले सबमिशन पछि मात्र त्रुटिहरू पत्ता लगाउने निराशाजनक अनुभवलाई रोक्छ। अन्तर्राष्ट्रिय अन्तरिक्ष स्टेशनमा बहु अनावश्यक प्रणालीहरू जस्तै, प्रभावकारी मान्यताले सुरक्षा जाँचहरूको बहु तहहरू प्रयोग गर्छ।
 
-उत्तम दृष्टिकोणले ब्राउजर-स्तरको मान्यता तत्काल प्रतिक्रिया प्रदान गर्न, जाभास्क्रिप्ट मान्यता प्रयोगकर्ता अनुभव सुधार गर्न, र सुरक्षा र डाटा अखण्डताका लागि सर्भर-स्तरको मान्यता समावेश गर्दछ। यो अतिरिक्तता प्रयोगकर्ता सन्तुष्टि र प्रणाली सुरक्षा सुनिश्चित गर्दछ।  
+उपयुक्त दृष्टिकोणले ब्राउजर-स्तरको मान्यता तत्काल प्रतिक्रिया प्रदान गर्न, JavaScript मान्यता प्रयोगकर्ता अनुभव सुधार गर्न, र सर्भर-साइड मान्यता सुरक्षा र डेटा अखण्डता सुनिश्चित गर्न संयोजन गर्दछ। यो अनावश्यकता प्रयोगकर्ता सन्तुष्टि र प्रणाली सुरक्षा सुनिश्चित गर्दछ।
 
-### मान्यता स्तरहरू बुझ्दै  
+### मान्यता तहहरू बुझ्दै
 
 ```mermaid
 graph TD
@@ -506,28 +604,28 @@ graph TD
     C -->|Invalid| H[Custom Error Display]
     E -->|Invalid| I[Server Error Response]
 ```
-  
-**बहु-स्तर मान्यता रणनीति:**  
-- **HTML5 मान्यता**: तत्काल ब्राउजर-आधारित जाँच  
-- **जाभास्क्रिप्ट मान्यता**: अनुकूलन तर्क र प्रयोगकर्ता अनुभव  
-- **सर्भर मान्यता**: अन्तिम सुरक्षा र डाटा अखण्डता जाँच  
-- **प्रगतिशील सुधार**: जाभास्क्रिप्ट निष्क्रिय भए पनि काम गर्दछ  
 
-### HTML5 मान्यता विशेषताहरू  
+**बहु-तह मान्यता रणनीति:**
+- **HTML5 मान्यता**: तत्काल ब्राउजर-आधारित जाँचहरू
+- **JavaScript मान्यता**: कस्टम तर्क र प्रयोगकर्ता अनुभव
+- **सर्भर मान्यता**: अन्तिम सुरक्षा र डेटा अखण्डता जाँचहरू
+- **प्रगतिशील सुधार**: JavaScript अक्षम भए पनि काम गर्छ
 
-**आधुनिक मान्यता उपकरणहरू तपाईंको लागि उपलब्ध:**  
+### HTML5 मान्यता विशेषताहरू
 
-| विशेषता | उद्देश्य | उदाहरण प्रयोग | ब्राउजर व्यवहार |  
-|-----------|---------|---------------|------------------|  
-| `required` | अनिवार्य क्षेत्रहरू | `<input required>` | खाली सबमिशन रोक्छ |  
-| `minlength`/`maxlength` | पाठ लम्बाइ सीमा | `<input maxlength="20">` | क्यारेक्टर सीमा लागू गर्दछ |  
-| `min`/`max` | संख्यात्मक दायरा | `<input min="0" max="1000">` | संख्या सीमा मान्य गर्दछ |  
-| `pattern` | कस्टम रेगुलर एक्सप्रेसन नियमहरू | `<input pattern="[A-Za-z]+">` | विशिष्ट ढाँचाहरू मिलाउँछ |  
-| `type` | डाटा प्रकार मान्यता | `<input type="email">` | ढाँचासँग सम्बन्धित मान्यता |  
+**आधुनिक मान्यता उपकरणहरू तपाईंको हातमा:**
 
-### CSS मान्यता स्टाइलिङ  
+| विशेषता | उद्देश्य | उदाहरण प्रयोग | ब्राउजर व्यवहार |
+|-----------|---------|---------------|------------------|
+| `required` | अनिवार्य फिल्डहरू | `<input required>` | खाली सबमिशन रोक्छ |
+| `minlength`/`maxlength` | पाठ लम्बाइ सीमा | `<input maxlength="20">` | क्यारेक्टर सीमा लागू गर्छ |
+| `min`/`max` | संख्यात्मक सीमा | `<input min="0" max="1000">` | संख्या सीमा मान्यता गर्छ |
+| `pattern` | कस्टम regex नियमहरू | `<input pattern="[A-Za-z]+">` | विशिष्ट ढाँचाहरू मिलाउँछ |
+| `type` | डेटा प्रकार मान्यता | `<input type="email">` | ढाँचासँग सम्बन्धित मान्यता |
 
-**मान्यता अवस्थाहरूका लागि दृश्य प्रतिक्रिया सिर्जना गर्नुहोस्:**  
+### CSS मान्यता स्टाइलिङ
+
+**मान्यता अवस्थाहरूका लागि दृश्य प्रतिक्रिया सिर्जना गर्नुहोस्:**
 
 ```css
 /* Valid input styling */
@@ -551,18 +649,18 @@ input:focus:invalid {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
 ```
-  
-**यी दृश्य संकेतहरूले के पूरा गर्छन्:**  
-- **हरियो सीमा**: सफल मान्यता संकेत गर्दछ, मिशन कन्ट्रोलमा हरियो बत्तीहरूजस्तै  
-- **रातो सीमा**: ध्यान आवश्यक मान्यता त्रुटिहरू संकेत गर्दछ  
-- **फोकस हाइलाइटहरू**: वर्तमान इनपुट स्थानको लागि स्पष्ट दृश्य सन्दर्भ प्रदान गर्दछ  
-- **सुसंगत स्टाइलिङ**: प्रयोगकर्ताहरूले सिक्न सक्ने पूर्वानुमानयोग्य इन्टरफेस ढाँचाहरू स्थापना गर्दछ  
 
-> 💡 **प्रो टिप**: `:valid` र `:invalid` CSS pseudo-classes प्रयोग गरेर प्रयोगकर्ताहरू टाइप गर्दा तत्काल दृश्य प्रतिक्रिया प्रदान गर्नुहोस्, जसले उत्तरदायी र सहयोगी इन्टरफेस सिर्जना गर्दछ।  
+**यी दृश्य संकेतहरूले के हासिल गर्छ:**
+- **हरियो सीमा**: सफल मान्यता संकेत गर्छ, जस्तै मिशन नियन्त्रणमा हरियो बत्ती
+- **रातो सीमा**: ध्यान आवश्यक पर्ने मान्यता त्रुटिहरू संकेत गर्छ
+- **फोकस हाइलाइटहरू**: वर्तमान इनपुट स्थानको लागि स्पष्ट दृश्य सन्दर्भ प्रदान गर्छ
+- **सुसंगत स्टाइलिङ**: प्रयोगकर्ताहरूले सिक्न सक्ने पूर्वानुमान योग्य इन्टरफेस ढाँचाहरू स्थापना गर्छ
+
+> 💡 **प्रो टिप**: `:valid` र `:invalid` CSS स्यूडो-क्लासहरू प्रयोग गरेर प्रयोगकर्ताहरूले टाइप गर्दा तत्काल दृश्य प्रतिक्रिया प्रदान गर्नुहोस्, एक उत्तरदायी र उपयोगी इन्टरफेस सिर्जना गर्दै।
 
-### व्यापक मान्यता कार्यान्वयन गर्दै  
+### व्यापक मान्यता कार्यान्वयन गर्दै
 
-आफ्नो दर्ता फारमलाई उत्कृष्ट प्रयोगकर्ता अनुभव र डाटा गुणस्तर प्रदान गर्ने बलियो मान्यतासँग सुधार गरौं:  
+तपाईंको दर्ता फारमलाई उत्कृष्ट प्रयोगकर्ता अनुभव र डेटा गुणस्तर प्रदान गर्ने बलियो मान्यतासँग सुधार गरौं:
 
 ```html
 <form id="registerForm" method="POST" novalidate>
@@ -604,42 +702,42 @@ input:focus:invalid {
   <button type="submit">Create Account</button>
 </form>
 ```
-  
-**सुधारिएको मान्यता बुझ्दै:**  
-- **अनिवार्य क्षेत्र सूचकहरूलाई सहायक विवरणहरूसँग मिलाउँछ**  
-- **ढाँचाको मान्यताका लागि `pattern` विशेषताहरू समावेश गर्दछ**  
-- **सहजता र टूलटिप्सका लागि `title` विशेषताहरू प्रदान गर्दछ**  
-- **प्रयोगकर्ता इनपुट मार्गदर्शन गर्न सहायक पाठ थप्छ**  
-- **बेहतर पहुँचका लागि सेम्यान्टिक HTML संरचना प्रयोग गर्दछ**  
 
-### उन्नत मान्यता नियमहरू  
+**सुधारिएको मान्यता बुझ्दै:**
+- **अनिवार्य फिल्ड संकेतकहरू समावेश गर्छ** सहायक विवरणहरूसँग
+- **ढाँचाको मान्यताका लागि `pattern` विशेषताहरू समावेश गर्छ**
+- **सुलभता र टूलटिप्सका लागि `title` विशेषताहरू प्रदान गर्छ**
+- **प्रयोगकर्ता इनपुट मार्गदर्शन गर्न सहायक पाठ थप्छ**
+- **बेहतर सुलभताका लागि सेम्यान्टिक HTML संरचना प्रयोग गर्छ**
+
+### उन्नत मान्यता नियमहरू
 
-**प्रत्येक मान्यता नियमले के पूरा गर्छ:**  
+**प्रत्येक मान्यता नियमले के हासिल गर्छ:**
 
-| क्षेत्र | मान्यता नियमहरू | प्रयोगकर्ता लाभ |  
-|-------|------------------|--------------|  
-| प्रयोगकर्ता नाम | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | मान्य, अद्वितीय पहिचान सुनिश्चित गर्दछ |  
-| मुद्रा | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | सामान्य मुद्रा प्रतीकहरू स्वीकार गर्दछ |  
-| ब्यालेन्स | `min="0"`, `step="0.01"`, `type="number"` | नकारात्मक ब्यालेन्स रोक्छ |  
-| विवरण | `maxlength="100"` | उचित लम्बाइ सीमा |  
+| फिल्ड | मान्यता नियमहरू | प्रयोगकर्ता लाभ |
+|-------|------------------|--------------|
+| प्रयोगकर्ता नाम | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | मान्य, अद्वितीय पहिचान सुनिश्चित गर्छ |
+| मुद्रा | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | सामान्य मुद्रा प्रतीकहरू स्वीकार्छ |
+| ब्यालेन्स | `min="0"`, `step="0.01"`, `type="number"` | नकारात्मक ब्यालेन्स रोक्छ |
+| विवरण | `maxlength="100"` | उचित लम्बाइ सीमा |
 
-### मान्यता व्यवहार परीक्षण गर्दै  
+### मान्यता व्यवहार परीक्षण गर्दै
 
-**यी मान्यता परिदृश्यहरू प्रयास गर्नुहोस्:**  
-1. **खाली अनिवार्य क्षेत्रहरूसँग फारम सबमिट गर्नुहोस्**  
-2. **३ क्यारेक्टरभन्दा छोटो प्रयोगकर्ता नाम प्रविष्ट गर्नुहोस्**  
-3. **प्रयोगकर्ता नाम क्षेत्रमा विशेष क्यारेक्टरहरू प्रयास गर्नुहोस्**  
-4. **नकारात्मक ब्यालेन्स रकम प्रविष्ट गर्नुहोस्**  
+**यी मान्यता परिदृश्यहरू प्रयास गर्नुहोस्:**
+1. **खाली अनिवार्य फिल्डहरूसँग फारम सबमिट गर्नुहोस्**
+2. **३ क्यारेक्टरभन्दा छोटो प्रयोगकर्ता नाम प्रविष्ट गर्नुहोस्**
+3. **प्रयोगकर्ता नाम फिल्डमा विशेष क्यारेक्टरहरू प्रयास गर्नुहोस्**
+4. **नकारात्मक ब्यालेन्स रकम प्रविष्ट गर्नुहोस्**
 
-![फारम सबमिट गर्न प्रयास गर्दा देखिएको मान्यता त्रुटिको स्क्रिनशट](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ne.png)  
+![फारम सबमिट गर्न प्रयास गर्दा देखिएको मान्यता त्रुटि](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ne.png)
 
-**तपाईंले अवलोकन गर्ने कुरा:**  
-- **ब्राउजरले** देशी मान्यता सन्देशहरू देखाउँछ  
-- **स्टाइलिङ परिवर्तनहरू** `:valid` र `:invalid` अवस्थाहरूमा आधारित हुन्छन्  
-- **सबमिशन रोकिन्छ** जबसम्म सबै मान्यताहरू पास गर्दैनन्  
-- **फोकस स्वतः** पहिलो अमान्य क्षेत्रमा सर्छ  
+**तपाईंले के अवलोकन गर्नुहुन्छ:**
+- **ब्राउजरले** देशी मान्यता सन्देशहरू देखाउँछ
+- **स्टाइलिङ परिवर्तन हुन्छ** `:valid` र `:invalid` अवस्थाहरूमा आधारित
+- **फारम सबमिशन रोक्छ** जबसम्म सबै मान्यताहरू पास गर्दैन
+- **फोकस स्वतः** पहिलो अमान्य फिल्डमा सर्छ
 
-### क्लाइन्ट-साइड बनाम सर्भर-साइड मान्यता  
+### क्लाइन्ट-साइड बनाम सर्भर-साइड मान्यता
 
 ```mermaid
 graph LR
@@ -654,46 +752,134 @@ graph LR
     A -.-> I[Both Required]
     E -.-> I
 ```
-  
-**दुवै स्तर किन आवश्यक छ:**  
-- **क्लाइन्ट-साइड मान्यता**: तत्काल प्रतिक्रिया प्रदान गर्दछ र प्रयोगकर्ता अनुभव सुधार गर्दछ  
-- **सर्भर-साइड मान्यता**: सुरक्षा सुनिश्चित गर्दछ र जटिल व्यापार नियमहरू ह्यान्डल गर्दछ  
-- **संयुक्त दृष्टिकोण**: बलियो, प्रयोगकर्ता-अनुकूल, र सुरक्षित एप्लिकेसनहरू सिर्जना गर्दछ  
-- **प्रगतिशील सुधार**: जाभास्क्रिप्ट निष्क्रिय भए पनि काम गर्दछ  
 
-> 🛡️ **सुरक्षा सम्झना**: केवल क्लाइन्ट-साइड मान्यतामा विश्वास नगर्नुहोस्! दुर्भावनापूर्ण प्रयोगकर्ताहरूले क्लाइन्ट-साइड जाँचहरू बाइपास गर्न सक्छन्, त्यसैले सुरक्षा र डाटा अखण्डताका लागि सर्भर-साइड मान्यता आवश्यक छ।  
+**दुवै तह किन आवश्यक छन्:**
+- **क्लाइन्ट-साइड मान्यता**: तत्काल प्रतिक्रिया प्रदान गर्छ र प्रयोगकर्ता अनुभव सुधार गर्छ
+- **सर्भर-साइड मान्यता**: सुरक्षा सुनिश्चित गर्छ र जटिल व्यापार नियमहरू ह्यान्डल गर्छ
+- **संयुक्त दृष्टिकोण**: बलियो, प्रयोगकर्ता-अनुकूल, र सुरक्षित एपहरू सिर्जना गर्छ
+- **प्रगतिशील सुधार**: JavaScript अक्षम हुँदा पनि काम गर्छ
+
+> 🛡️ **सुरक्षा सम्झना**: केवल क्लाइन्ट-साइड मान्यतामा विश्वास नगर्नुहोस्! दुर्भावनापूर्ण प्रयोगकर्ताहरूले क्लाइन्ट-साइड जाँचहरू बाइपास गर्न सक्छन्, त्यसैले सर्भर-साइड मान्यता सुरक्षा र डेटा अखण्डताको लागि आवश्यक छ।
+
+### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ**
+- [ ] अमान्य डेटा प्रयोग गरेर तपाईंको फारम परीक्षण गर्नुहोस् मान्यता सन्देशहरू हेर्न
+- [ ] HTML5 मान्यता हेर्न JavaScript अक्षम गरेर फारम सबमिट प्रयास गर्नुहोस्
+- [ ] ब्राउजर डेभटूल्स खोल्नुहोस् र सर्भरमा पठाइएको फारम डेटा निरीक्षण गर्नुहोस्
+- [ ] विभिन्न इनपुट प्रकारहरू प्रयोग गरेर मोबाइल किबोर्ड परिवर्तनहरू हेर्न प्रयास गर्नुहोस्
+
+### 🎯 **तपाईंले यो घण्टामा के हासिल गर्न सक्नुहुन्छ**
+- [ ] पाठ-पाठ क्विज पूरा गर्नुहोस् र फारम ह्यान्डलिङ अवधारणाहरू बुझ्नुहोस्
+- [ ] वास्तविक-समय प्रतिक्रिया सहित व्यापक मान्यता चुनौती कार्यान्वयन गर्नुहोस्
+- [ ] CSS स्टाइलिङ थप्नुहोस् व्यावसायिक देखिने फारमहरू सिर्जना गर्न
+- [ ] दोहोरिएको प्रयोगकर्ता नाम र सर्भर त्रुटिहरूका लागि त्रुटि ह्यान्डलिङ थप्नुहोस्
+- [ ] मिल्दो मान्यतासँग पासवर्ड पुष्टि फिल्डहरू थप्नुहोस्
+
+### 📅 **तपाईंको हप्ताको फारम मास्टरी यात्रा**
+- [ ] उन्नत फारम सुविधाहरू सहित पूर्ण बैंकिङ एप पूरा गर्नुहोस्
+- [ ] प्रोफाइल तस्वीरहरू वा कागजातहरूको लागि फाइल अपलोड क्षमता कार्यान्वयन गर्नुहोस्
+- [ ] प्रगति संकेतकहरू र राज्य व्यवस्थापन सहित बहु-चरण फारमहरू थप्नुहोस्
+- [ ] प्रयोगकर्ता चयनहरूमा आधारित अनुकूलन फारमहरू सिर्जना गर्नुहोस्
+- [ ] राम्रो प्रयोगकर्ता अनुभवका लागि फारम स्वतःसेभ र रिकभरी थप्नुहोस्
+- [ ] इमेल प्रमाणिकरण र फोन नम्बर ढाँचाजस्ता उन्नत मान्यता थप्नुहोस्
+
+### 🌟 **तपाईंको महिनाको फ्रन्टएन्ड विकास मास्टरी**
+- [ ] सर्तात्मक तर्क र वर्कफ्लोहरूसँग जटिल फारम एप्लिकेसनहरू निर्माण गर्नुहोस्
+- [ ] द्रुत विकासका लागि फारम पुस्तकालयहरू र फ्रेमवर्कहरू सिक्नुहोस्
+- [ ] सुलभता दिशानिर्देशहरू र समावेशी डिजाइन सिद्धान्तहरू मास्टर गर्नुहोस्
+- [ ] विश्वव्यापी फारमहरूको लागि अन्तर्राष्ट्रियकरण र स्थानीयकरण कार्यान्वयन गर्नुहोस्
+- [ ] पुन: प्रयोग गर्न सकिने फारम कम्पोनेन्ट पुस्तकालयहरू र डिजाइन प्रणालीहरू सिर्जना गर्नुहोस्
+- [ ] खुला स्रोत फारम परियोजनाहरूमा योगदान गर्नुहोस् र उत्कृष्ट अभ्यासहरू साझा गर्नुहोस्
+
+## 🎯 तपाईंको फारम विकास मास्टरी समयरेखा
 
----  
+```mermaid
+timeline
+    title Form Development & User Experience Learning Progression
+    
+    section HTML Foundation (15 minutes)
+        Semantic Forms: Form elements
+                      : Input types
+                      : Labels and accessibility
+                      : Progressive enhancement
+        
+    section JavaScript Integration (25 minutes)
+        Event Handling: Form submission
+                      : Data collection
+                      : AJAX communication
+                      : Async/await patterns
+        
+    section Validation Systems (35 minutes)
+        Multi-layer Security: HTML5 validation
+                            : Client-side logic
+                            : Server-side verification
+                            : Error handling
+        
+    section User Experience (45 minutes)
+        Interface Polish: Loading states
+                        : Success messaging
+                        : Error recovery
+                        : Accessibility features
+        
+    section Advanced Patterns (1 week)
+        Professional Forms: Dynamic validation
+                          : Multi-step workflows
+                          : File uploads
+                          : Real-time feedback
+        
+    section Enterprise Skills (1 month)
+        Production Applications: Form libraries
+                               : Testing strategies
+                               : Performance optimization
+                               : Security best practices
+```
 
-## GitHub Copilot Agent Challenge 🚀  
+### 🛠️ तपाईंको फारम विकास उपकरण किट सारांश
 
-Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:  
+यस पाठ पूरा गरेपछि, तपाईंले मास्टर गर्नुभएको छ:
+- **HTML5 फारमहरू**: सेम्यान्टिक संरचना, इनपुट प्रकारहरू, र सुलभता सुविधाहरू
+- **JavaScript फारम ह्यान्डलिङ**: इभेन्ट व्यवस्थापन, डेटा संग्रह, र AJAX संचार
+- **मान्यता आर्किटेक्चर**: सुरक्षा र प्रयोगकर्ता अनुभवका लागि बहु-तह मान्यता
+- **असिंक्रोनस प्रोग्रामिङ**: आधुनिक Fetch API र async/await ढाँचाहरू
+- **त्रुटि व्यवस्थापन**: व्यापक त्रुटि ह्यान्डलिङ र प्रयोगकर्ता प्रतिक्रिया प्रणालीहरू
+- **प्रयोगकर्ता अनुभव डिजाइन**: लोडिङ स्थिति, सफलता सन्देश, र त्रुटि रिकभरी
+- **प्रगतिशील सुधार**: सबै ब्राउजर र क्षमताहरूमा काम गर्ने फारमहरू
 
-**विवरण:** दर्ता फारमलाई व्यापक क्लाइन्ट-साइड मान्यता र प्रयोगकर्ता प्रतिक्रियासँग सुधार गर्नुहोस्। यो चुनौतीले फारम मान्यता, त्रुटि ह्यान्डलिङ, र अन्तरक्रियात्मक प्रतिक्रियासँग प्रयोगकर्ता अनुभव सुधार गर्ने अभ्यास गर्न मद्दत गर्नेछ।  
+**वास्तविक संसारका अनुप्रयोगहरू**: तपाईंको फारम विकास कौशल सीधा लागू हुन्छ:
+- **ई-कमर्स अनुप्रयोगहरू**: चेकआउट प्रक्रिया, खाता दर्ता, र भुक्तानी फारमहरू
+- **उद्यम सफ्टवेयर**: डेटा प्रविष्टि प्रणालीहरू, रिपोर्टिङ इन्टरफेसहरू, र वर्कफ्लो अनुप्रयोगहरू
+- **सामग्री व्यवस्थापन**: प्रकाशन प्लेटफर्महरू, प्रयोगकर्ता-उत्पन्न सामग्री, र प्रशासनिक इन्टरफेसहरू
+- **वित्तीय अनुप्रयोगहरू**: बैंकिङ इन्टरफेसहरू, लगानी प्लेटफर्महरू, र लेनदेन प्रणालीहरू
+- **स्वास्थ्य प्रणालीहरू**: बिरामी पोर्टलहरू, भेटघाट तालिका, र मेडिकल रेकर्ड फारमहरू
+- **शैक्षिक प्लेटफर्महरू**: पाठ्यक्रम दर्ता, मूल्यांकन उपकरणहरू, र सिकाइ व्यवस्थापन
 
-**प्रेरणा:** दर्ता फारमका लागि पूर्ण मान्यता प्रणाली सिर्जना गर्नुहोस् जसमा समावेश छ: १) प्रयोगकर्ताले टाइप गर्दा प्रत्येक क्षेत्रको लागि वास्तविक-समय मान्यता प्रतिक्रिया, २) प्रत्येक इनपुट क्षेत्रको तल देखिने कस्टम मान्यता सन्देशहरू, ३) मिल्दो मान्यता भएको पासवर्ड पुष्टि क्षेत्र, ४) मान्य क्षेत्रहरूको लागि हरियो चेकमार्कहरू र अमान्य क्षेत्रहरूको लागि रातो चेतावनीहरूजस्ता दृश्य संकेतहरू, ५) सबै मान्यताहरू पास भएपछि मात्र सक्षम हुने सबमिट बटन। HTML5 मान्यता विशेषताहरू, CSS मान्यता अवस्थाहरूको लागि स्टाइलिङ, र अन्तरक्रियात्मक व्यवहारका लागि जाभास्क्रिप्ट प्रयोग गर्नुहोस्।  
+**व्यावसायिक कौशल प्राप्त गरियो**: अब तपाईं गर्न सक्नुहुन्छ:
+- **डिजाइन गर्नुहोस्** सुलभ फारमहरू जो अपाङ्गता भएका सबै प्रयोगकर्ताहरूका लागि काम गर्छ
+- **कार्यान्वयन गर्नुहोस्** सुरक्षित फारम मान्यता जसले डेटा भ्रष्टाचार र सुरक्षा कमजोरतालाई रोक्छ
+- **सिर्जना गर्नुहोस्** उत्तरदायी प्रयोगकर्ता इन्टरफेसहरू जसले स्पष्ट प्रतिक्रिया र मार्गदर्शन प्रदान गर्छ
+- **
+**प्रोम्प्ट:** दर्ता फारमको लागि पूर्ण फारम मान्यता प्रणाली बनाउनुहोस् जसमा समावेश छ: 1) प्रयोगकर्ताले टाइप गर्दा प्रत्येक क्षेत्रको वास्तविक-समय मान्यता प्रतिक्रिया, 2) प्रत्येक इनपुट क्षेत्रको तल देखिने अनुकूल मान्यता सन्देशहरू, 3) पासवर्ड पुष्टि क्षेत्रसँग मिल्ने मान्यता, 4) दृश्य संकेतकहरू (जस्तै मान्य क्षेत्रहरूको लागि हरियो चेकमार्क र अमान्य क्षेत्रहरूको लागि रातो चेतावनीहरू), 5) सबै मान्यताहरू पास भएपछि मात्र सक्रिय हुने सबमिट बटन। HTML5 मान्यता विशेषताहरू, CSS मान्यता अवस्थाहरूको लागि शैलीकरण, र अन्तरक्रियात्मक व्यवहारको लागि JavaScript प्रयोग गर्नुहोस्।
 
-[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बारे थप जान्नुहोस्।  
+[एजेन्ट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा यहाँ थप जान्नुहोस्।
 
-## 🚀 चुनौती  
+## 🚀 चुनौती
 
-यदि प्रयोगकर्ता पहिले नै अवस्थित छ भने HTML मा त्रुटि सन्देश देखाउनुहोस्।  
+यदि प्रयोगकर्ता पहिले नै अवस्थित छ भने HTML मा त्रुटि सन्देश देखाउनुहोस्।
 
-यहाँ CSS शैलीहरू थपेपछि अन्तिम लगइन पृष्ठ कस्तो देखिन सक्छ भन्ने उदाहरण छ:  
+थप शैलीहरू थपेपछि अन्तिम लगइन पृष्ठ कस्तो देखिन सक्छ भन्ने उदाहरण यहाँ छ:
 
-![CSS शैलीहरू थपेपछि लगइन पृष्ठको स्क्रिनशट](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ne.png)  
+![CSS शैलीहरू थपेपछि लगइन पृष्ठको स्क्रिनशट](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ne.png)
 
-## पोस्ट-व्याख्यान क्विज  
+## पोस्ट-व्याख्यान क्विज
 
-[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/44)  
+[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/44)
 
-## समीक्षा र आत्म-अध्ययन  
+## समीक्षा र आत्म अध्ययन
 
-डेभलपरहरूले फारम निर्माण प्रयासहरूमा, विशेष गरी मान्यता रणनीतिहरूमा धेरै रचनात्मक भएका छन्। [CodePen](https://codepen.com) हेरेर विभिन्न फारम प्रवाहहरूको बारेमा जान्नुहोस्; के तपाईं केही रोचक र प्रेरणादायक फारमहरू फेला पार्न सक्नुहुन्छ?  
+डेभलपरहरूले फारम निर्माण प्रयासहरूमा, विशेष गरी मान्यता रणनीतिहरूमा, धेरै रचनात्मक भएका छन्। [CodePen](https://codepen.com) हेरेर विभिन्न फारम प्रवाहहरूको बारेमा जान्नुहोस्; के तपाईं केही रोचक र प्रेरणादायक फारमहरू फेला पार्न सक्नुहुन्छ?
 
-## असाइनमेन्ट  
+## असाइनमेन्ट
 
-[तपाईंको बैंक एपलाई शैली दिनुहोस्](assignment.md)  
+[तपाईंको बैंक एपलाई शैली दिनुहोस्](assignment.md)
 
 ---
 
diff --git a/translations/ne/7-bank-project/3-data/README.md b/translations/ne/7-bank-project/3-data/README.md
index fbb2bbdb1d..69f87ed917 100644
--- a/translations/ne/7-bank-project/3-data/README.md
+++ b/translations/ne/7-bank-project/3-data/README.md
@@ -1,31 +1,84 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "2c1164912414820c8efd699b43f64954",
-  "translation_date": "2025-10-22T17:04:36+00:00",
+  "original_hash": "86ee5069f27ea3151389d8687c95fac9",
+  "translation_date": "2025-11-03T15:40:32+00:00",
   "source_file": "7-bank-project/3-data/README.md",
   "language_code": "ne"
 }
 -->
-# बैंकिङ एप निर्माण भाग ३: डेटा प्राप्ति र प्रयोग गर्ने विधिहरू
+# बैंकिङ एप निर्माण भाग ३: डेटा प्राप्त गर्ने र प्रयोग गर्ने विधिहरू
 
-स्टार ट्रेकको एंटरप्राइजको कम्प्युटरलाई सम्झनुहोस् - जब कप्तान पिकार्डले जहाजको स्थिति सोध्छन्, जानकारी तुरुन्तै देखिन्छ, सम्पूर्ण इन्टरफेस बन्द गरेर पुनः निर्माण नगरी। यो नै हामी यहाँ निर्माण गर्दैछौं, गतिशील डेटा प्राप्तिको साथमा।
+स्टार ट्रेकको एंटरप्राइज कम्प्युटरलाई सम्झनुहोस् - जब कप्तान पिकार्डले जहाजको स्थिति सोध्छन्, जानकारी तुरुन्तै देखिन्छ, सम्पूर्ण इन्टरफेस बन्द भएर पुनः निर्माण नगरी। यो नै हामी यहाँ निर्माण गर्दैछौं, गतिशील डेटा प्राप्त गर्ने प्रविधिको साथ।
 
-अहिले, तपाईंको बैंकिङ एप छापिएको समाचारपत्र जस्तै छ - जानकारीमूलक तर स्थिर। हामी यसलाई नासाको मिशन कन्ट्रोल जस्तै बनाउनेछौं, जहाँ डेटा निरन्तर प्रवाह हुन्छ र वास्तविक समयमा अपडेट हुन्छ, प्रयोगकर्ताको कार्यप्रवाहलाई अवरोध नगरी।
+अहिले, तपाईंको बैंकिङ एप छापिएको पत्रिकाजस्तै छ - जानकारीमूलक तर स्थिर। हामी यसलाई नासाको मिशन कन्ट्रोलजस्तै बनाउनेछौं, जहाँ डेटा निरन्तर प्रवाह हुन्छ र वास्तविक समयमा अपडेट हुन्छ, प्रयोगकर्ताको कार्यलाई अवरोध नगरी।
 
 तपाईंले सर्वरहरूसँग असिंक्रोनस रूपमा संवाद गर्न, विभिन्न समयमा आउने डेटा व्यवस्थापन गर्न, र कच्चा जानकारीलाई प्रयोगकर्ताहरूका लागि अर्थपूर्ण बनाउने तरिका सिक्नुहुनेछ। यो डेमो र उत्पादन-तयार सफ्टवेयरको बीचको फरक हो।
 
+## ⚡ तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा
+
+**व्यस्त डेभलपरहरूको लागि छिटो सुरु गर्ने मार्ग**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Set up API server]
+    B --> C[Test fetch with curl]
+    C --> D[Create login function]
+    D --> E[See data in action]
+```
+
+- **मिनेट १-२**: आफ्नो API सर्वर सुरु गर्नुहोस् (`cd api && npm start`) र कनेक्शन परीक्षण गर्नुहोस्
+- **मिनेट ३**: `getAccount()` नामक आधारभूत फङ्सन सिर्जना गर्नुहोस् जसले `fetch` प्रयोग गर्छ
+- **मिनेट ४**: लगइन फारमलाई `action="javascript:login()"` संग जडान गर्नुहोस्
+- **मिनेट ५**: लगइन परीक्षण गर्नुहोस् र कन्सोलमा खाता डेटा देख्नुहोस्
+
+**छिटो परीक्षण कमाण्डहरू**:
+```bash
+# Verify API is running
+curl http://localhost:5000/api
+
+# Test account data fetch
+curl http://localhost:5000/api/accounts/test
+```
+
+**किन यो महत्त्वपूर्ण छ**: ५ मिनेटमा, तपाईंले असिंक्रोनस डेटा प्राप्त गर्ने जादू देख्नुहुनेछ, जसले प्रत्येक आधुनिक वेब एप्लिकेसनलाई शक्ति दिन्छ। यो नै आधार हो जसले एपहरूलाई उत्तरदायी र जीवित बनाउँछ।
+
+## 🗺️ डेटा-चालित वेब एप्लिकेसनहरूको माध्यमबाट तपाईंको सिकाइ यात्रा
+
+```mermaid
+journey
+    title From Static Pages to Dynamic Applications
+    section Understanding the Evolution
+      Traditional page reloads: 3: You
+      Discover AJAX/SPA benefits: 5: You
+      Master Fetch API patterns: 7: You
+    section Building Authentication
+      Create login functions: 4: You
+      Handle async operations: 6: You
+      Manage user sessions: 8: You
+    section Dynamic UI Updates
+      Learn DOM manipulation: 5: You
+      Build transaction displays: 7: You
+      Create responsive dashboards: 9: You
+    section Professional Patterns
+      Template-based rendering: 6: You
+      Error handling strategies: 7: You
+      Performance optimization: 8: You
+```
+
+**तपाईंको यात्रा गन्तव्य**: यस पाठको अन्त्यसम्ममा, तपाईंले आधुनिक वेब एप्लिकेसनहरूले कसरी गतिशील रूपमा डेटा प्राप्त, प्रक्रिया, र प्रदर्शन गर्छन् भन्ने बुझ्नुहुनेछ, जसले व्यावसायिक एप्लिकेसनहरूबाट अपेक्षित सहज प्रयोगकर्ता अनुभव सिर्जना गर्छ।
+
 ## प्रि-लेक्चर क्विज
 
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/45)
 
-### आवश्यकताहरू
+### पूर्व-आवश्यकताहरू
 
-डेटा प्राप्तिमा प्रवेश गर्नु अघि, यी कम्पोनेन्टहरू तयार गर्नुहोस्:
+डेटा प्राप्त गर्न अघि, यी कम्पोनेन्टहरू तयार गर्नुहोस्:
 
-- **अघिल्लो पाठ**: [लगइन र रजिस्ट्रेसन फारम](../2-forms/README.md) पूरा गर्नुहोस् - हामी यस आधारमा निर्माण गर्नेछौं।
-- **स्थानीय सर्भर**: [Node.js](https://nodejs.org) स्थापना गर्नुहोस् र [सर्भर API चलाउनुहोस्](../api/README.md) खाता डेटा प्रदान गर्न।
-- **API कनेक्शन**: यो कमाण्डसँग आफ्नो सर्भर कनेक्शन परीक्षण गर्नुहोस्:
+- **अघिल्लो पाठ**: [लगइन र रजिस्ट्रेसन फारम](../2-forms/README.md) पूरा गर्नुहोस् - हामी यस आधारमा निर्माण गर्नेछौं
+- **स्थानीय सर्वर**: [Node.js](https://nodejs.org) स्थापना गर्नुहोस् र [सर्भर API चलाउनुहोस्](../api/README.md) खाता डेटा प्रदान गर्न
+- **API कनेक्शन**: यो कमाण्ड प्रयोग गरेर आफ्नो सर्भर कनेक्शन परीक्षण गर्नुहोस्:
 
 ```bash
 curl http://localhost:5000/api
@@ -33,19 +86,64 @@ curl http://localhost:5000/api
 ```
 
 यो छिटो परीक्षणले सुनिश्चित गर्दछ कि सबै कम्पोनेन्टहरू ठीकसँग संवाद गरिरहेका छन्:
-- तपाईंको प्रणालीमा Node.js सही रूपमा चलिरहेको छ भनी प्रमाणित गर्दछ।
-- तपाईंको API सर्भर सक्रिय छ र प्रतिक्रिया दिइरहेको छ भनी पुष्टि गर्दछ।
-- तपाईंको एपले सर्भरमा पुग्न सक्छ भनी प्रमाणित गर्दछ (मिशन अघि रेडियो सम्पर्क जाँच गरेजस्तै)।
+- तपाईंको प्रणालीमा Node.js सही रूपमा चलिरहेको छ भनी प्रमाणित गर्दछ
+- तपाईंको API सर्भर सक्रिय र प्रतिक्रिया दिइरहेको छ भनी पुष्टि गर्दछ
+- तपाईंको एपले सर्भरमा पुग्न सक्छ भनी प्रमाणित गर्दछ (मिशन अघि रेडियो सम्पर्क जाँच गरेजस्तै)
+
+## 🧠 डेटा व्यवस्थापन इकोसिस्टमको अवलोकन
+
+```mermaid
+mindmap
+  root((Data Management))
+    Authentication Flow
+      Login Process
+        Form Validation
+        Credential Verification
+        Session Management
+      User State
+        Global Account Object
+        Navigation Guards
+        Error Handling
+    API Communication
+      Fetch Patterns
+        GET Requests
+        POST Requests
+        Error Responses
+      Data Formats
+        JSON Processing
+        URL Encoding
+        Response Parsing
+    Dynamic UI Updates
+      DOM Manipulation
+        Safe Text Updates
+        Element Creation
+        Template Cloning
+      User Experience
+        Real-time Updates
+        Error Messages
+        Loading States
+    Security Considerations
+      XSS Prevention
+        textContent Usage
+        Input Sanitization
+        Safe HTML Creation
+      CORS Handling
+        Cross-Origin Requests
+        Header Configuration
+        Development Setup
+```
+
+**मुख्य सिद्धान्त**: आधुनिक वेब एप्लिकेसनहरू डेटा समन्वय प्रणाली हुन् - तिनीहरूले प्रयोगकर्ता इन्टरफेस, सर्भर API, र ब्राउजर सुरक्षा मोडेलहरू बीच समन्वय गर्छन् ताकि सहज, उत्तरदायी अनुभव सिर्जना गर्न सकियोस्।
 
 ---
 
-## आधुनिक वेब एप्समा डेटा प्राप्ति बुझ्दै
+## आधुनिक वेब एप्समा डेटा प्राप्त गर्ने तरिका बुझ्दै
 
-वेब एप्लिकेसनहरूले डेटा व्यवस्थापन गर्ने तरिका पछिल्लो दुई दशकमा नाटकीय रूपमा विकसित भएको छ। यस विकासलाई बुझ्दा आधुनिक प्रविधिहरू जस्तै AJAX र Fetch API किन शक्तिशाली छन् र किन वेब विकासकर्ताहरूका लागि आवश्यक उपकरण बनेका छन् भन्ने कुरा स्पष्ट हुन्छ।
+वेब एप्लिकेसनहरूले डेटा व्यवस्थापन गर्ने तरिका पछिल्लो दुई दशकमा नाटकीय रूपमा विकसित भएको छ। यो विकास बुझ्दा आधुनिक प्रविधिहरू जस्तै AJAX र Fetch API किन शक्तिशाली छन् र वेब डेभलपरहरूको लागि किन आवश्यक उपकरण बनेका छन् भन्ने कुरा स्पष्ट हुन्छ।
 
-आउनुहोस्, परम्परागत वेबसाइटहरू कसरी काम गर्थे र आज हामीले निर्माण गर्ने गतिशील, प्रतिक्रियात्मक एप्लिकेसनहरूको तुलना गरौं।
+आउनुहोस्, परम्परागत वेबसाइटहरू कसरी काम गर्थे र हामीले आज निर्माण गर्ने गतिशील, उत्तरदायी एप्लिकेसनहरू बीचको भिन्नता अन्वेषण गरौं।
 
-### परम्परागत मल्टि-पेज एप्लिकेसन (MPA)
+### परम्परागत मल्टि-पेज एप्लिकेसनहरू (MPA)
 
 वेबको सुरुवाती दिनहरूमा, प्रत्येक क्लिक पुरानो टेलिभिजनमा च्यानल परिवर्तन गरेजस्तै थियो - स्क्रिन खाली हुन्थ्यो, अनि नयाँ सामग्रीमा ट्युन गर्न बिस्तारै लाग्थ्यो। यो प्रारम्भिक वेब एप्लिकेसनहरूको वास्तविकता थियो, जहाँ प्रत्येक अन्तरक्रियाले सम्पूर्ण पृष्ठलाई पुनः निर्माण गर्नुपर्थ्यो।
 
@@ -65,14 +163,14 @@ sequenceDiagram
 ![मल्टि-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ne.png)
 
 **किन यो विधि असहज लाग्थ्यो:**
-- प्रत्येक क्लिकले सम्पूर्ण पृष्ठलाई पुनः निर्माण गर्नुपर्थ्यो।
-- ती झिल्काहरूले प्रयोगकर्ताको विचारलाई अवरोध गर्थे।
-- तपाईंको इन्टरनेट कनेक्शनले बारम्बार हेडर र फुटर डाउनलोड गर्न धेरै काम गर्नुपर्थ्यो।
-- एप्स फाइलिङ क्याबिनेटमा क्लिक गरेजस्तो लाग्थ्यो, सफ्टवेयर प्रयोग गरेजस्तो होइन।
+- प्रत्येक क्लिकले सम्पूर्ण पृष्ठलाई पुनः निर्माण गर्नुपर्थ्यो
+- प्रयोगकर्ताहरूको विचारमा अवरोध आउँथ्यो ती झर्को लाग्ने पृष्ठ फ्ल्यासहरूका कारण
+- तपाईंको इन्टरनेट कनेक्शनले बारम्बार हेडर र फुटर डाउनलोड गर्न धेरै काम गर्नुपर्थ्यो
+- एपहरू सफ्टवेयर प्रयोग गर्नुभन्दा फाइलिङ क्याबिनेटमा क्लिक गरिरहेको जस्तो लाग्थ्यो
 
-### आधुनिक सिंगल-पेज एप्लिकेसन (SPA)
+### आधुनिक सिंगल-पेज एप्लिकेसनहरू (SPA)
 
-AJAX (Asynchronous JavaScript and XML) ले यो परिपाटीलाई पूर्ण रूपमा परिवर्तन गर्यो। अन्तर्राष्ट्रिय स्पेस स्टेशनको मोड्युलर डिजाइन जस्तै, जहाँ अन्तरिक्ष यात्रीहरूले सम्पूर्ण संरचना पुनः निर्माण नगरी व्यक्तिगत कम्पोनेन्टहरू प्रतिस्थापन गर्न सक्छन्, AJAX ले हामीलाई वेबपेजको विशिष्ट भागहरू पुनः लोड नगरी अपडेट गर्न अनुमति दिन्छ। XML उल्लेख भए पनि, आज हामी प्रायः JSON प्रयोग गर्छौं, तर मुख्य सिद्धान्त उस्तै छ: केवल परिवर्तन भएको भागलाई अपडेट गर्नुहोस्।
+AJAX (Asynchronous JavaScript and XML) ले यो परिपाटीलाई पूर्ण रूपमा परिवर्तन गर्‍यो। अन्तर्राष्ट्रिय स्पेस स्टेशनको मोड्युलर डिजाइनजस्तै, जहाँ अन्तरिक्ष यात्रीहरूले सम्पूर्ण संरचना पुनः निर्माण नगरी व्यक्तिगत कम्पोनेन्टहरू प्रतिस्थापन गर्न सक्छन्, AJAX ले हामीलाई वेबपृष्ठको विशिष्ट भागहरू पुनः लोड नगरी अपडेट गर्न अनुमति दिन्छ। XML उल्लेख भए पनि, हामी आज प्रायः JSON प्रयोग गर्छौं, तर मुख्य सिद्धान्त उस्तै छ: केवल परिवर्तन भएको भागलाई अपडेट गर्नुहोस्।
 
 ```mermaid
 sequenceDiagram
@@ -91,39 +189,39 @@ sequenceDiagram
 
 ![सिंगल-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ne.png)
 
-**किन SPA हरू राम्रो लाग्छन्:**
-- केवल वास्तवमा परिवर्तन भएका भागहरू अपडेट हुन्छन् (स्मार्ट, हैन र?)
-- अब झट्काहरू छैनन् - तपाईंका प्रयोगकर्ताहरू आफ्नो प्रवाहमा रहन्छन्।
-- तारमा कम डेटा यात्रा गर्दा छिटो लोड हुन्छ।
-- सबै कुरा फोनका एप्स जस्तै चपल र प्रतिक्रियात्मक लाग्छ।
+**किन SPA हरू धेरै राम्रो लाग्छन्:**
+- केवल वास्तवमा परिवर्तन भएका भागहरू अपडेट हुन्छन् (स्मार्ट, हैन?)
+- झट्काहरूको अवरोध छैन - तपाईंका प्रयोगकर्ताहरू आफ्नो प्रवाहमा रहन्छन्
+- तारमा कम डेटा यात्रा गर्नुको अर्थ छिटो लोडिङ
+- सबै कुरा फोनका एपहरूजस्तै चपल र उत्तरदायी लाग्छ
 
 ### आधुनिक Fetch API तर्फको विकास
 
-आधुनिक ब्राउजरहरूले [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) प्रदान गर्छन्, जसले पुरानो [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) लाई प्रतिस्थापन गर्छ। टेलिग्राफ चलाउने र इमेल प्रयोग गर्ने बीचको फरक जस्तै, Fetch API ले सफा असिंक्रोनस कोडका लागि प्रॉमिसहरू प्रयोग गर्छ र JSON स्वाभाविक रूपमा व्यवस्थापन गर्छ।
+आधुनिक ब्राउजरहरूले [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) प्रदान गर्छन्, जसले पुरानो [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) लाई प्रतिस्थापन गर्छ। टेलिग्राफ चलाउने र इमेल प्रयोग गर्ने बीचको फरकजस्तै, Fetch API ले सफा असिंक्रोनस कोडका लागि प्रॉमिसहरू प्रयोग गर्छ र JSON स्वाभाविक रूपमा ह्यान्डल गर्छ।
 
 | विशेषता | XMLHttpRequest | Fetch API |
 |---------|----------------|----------|
 | **सिन्ट्याक्स** | जटिल क्यालब्याक-आधारित | सफा प्रॉमिस-आधारित |
-| **JSON व्यवस्थापन** | म्यानुअल पार्सिङ आवश्यक | बिल्ट-इन `.json()` विधि |
-| **त्रुटि व्यवस्थापन** | सीमित त्रुटि जानकारी | व्यापक त्रुटि विवरण |
+| **JSON ह्यान्डलिङ** | म्यानुअल पार्सिङ आवश्यक | बिल्ट-इन `.json()` मेथड |
+| **त्रुटि ह्यान्डलिङ** | सीमित त्रुटि जानकारी | व्यापक त्रुटि विवरण |
 | **आधुनिक समर्थन** | पुरानो अनुकूलता | ES6+ प्रॉमिस र async/await |
 
 > 💡 **ब्राउजर अनुकूलता**: राम्रो खबर - Fetch API सबै आधुनिक ब्राउजरहरूमा काम गर्छ! यदि तपाईंलाई विशेष संस्करणहरूको बारेमा जिज्ञासा छ भने, [caniuse.com](https://caniuse.com/fetch) मा पूर्ण अनुकूलता कथा छ।
 > 
 **मुख्य कुरा:**
-- Chrome, Firefox, Safari, र Edge मा राम्रोसँग काम गर्छ (मूलतः जहाँ तपाईंका प्रयोगकर्ताहरू छन् त्यहाँ)
-- केवल Internet Explorer ले अतिरिक्त सहयोग चाहिन्छ (र इमानदारीपूर्वक, IE लाई छोड्ने समय आएको छ)
-- हामीले पछि प्रयोग गर्ने सुन्दर async/await ढाँचाहरूका लागि तपाईंलाई पूर्ण रूपमा तयार बनाउँछ।
+- क्रोम, फायरफक्स, सफारी, र एजमा राम्रोसँग काम गर्छ (मूलतः जहाँ तपाईंका प्रयोगकर्ताहरू छन्)
+- केवल इन्टरनेट एक्सप्लोररलाई अतिरिक्त सहयोग चाहिन्छ (र इमानदारीपूर्वक, अब IE लाई बिदा दिने समय हो)
+- हामीले पछि प्रयोग गर्ने सुन्दर async/await ढाँचाहरूको लागि तपाईंलाई पूर्ण रूपमा तयार बनाउँछ
 
-### प्रयोगकर्ता लगइन र डेटा प्राप्ति कार्यान्वयन गर्दै
+### प्रयोगकर्ता लगइन र डेटा पुनःप्राप्ति कार्यान्वयन गर्दै
 
-अब हामी लगइन प्रणाली कार्यान्वयन गर्नेछौं जसले तपाईंको बैंकिङ एपलाई स्थिर प्रदर्शनबाट कार्यात्मक एप्लिकेसनमा रूपान्तरण गर्छ। जस्तै सुरक्षित सैन्य सुविधाहरूमा प्रयोग गरिने प्रमाणीकरण प्रोटोकलहरू, हामी प्रयोगकर्ताको प्रमाणिकता पुष्टि गर्नेछौं र त्यसपछि उनीहरूको विशिष्ट डेटा प्रदान गर्नेछौं।
+अब हामी लगइन प्रणाली कार्यान्वयन गर्नेछौं जसले तपाईंको बैंकिङ एपलाई स्थिर प्रदर्शनबाट कार्यात्मक एप्लिकेसनमा रूपान्तरण गर्छ। जस्तै सुरक्षित सैन्य सुविधाहरूमा प्रयोग गरिने प्रमाणीकरण प्रोटोकलहरू, हामी प्रयोगकर्ताको प्रमाणिकता पुष्टि गर्नेछौं र त्यसपछि तिनीहरूको विशिष्ट डेटा प्रदान गर्नेछौं।
 
-हामी यसलाई क्रमिक रूपमा निर्माण गर्नेछौं, आधारभूत प्रमाणीकरणबाट सुरु गर्दै र त्यसपछि डेटा प्राप्ति क्षमताहरू थप्दै।
+हामी यसलाई क्रमिक रूपमा निर्माण गर्नेछौं, आधारभूत प्रमाणीकरणबाट सुरु गर्दै र त्यसपछि डेटा प्राप्त गर्ने क्षमता थप्दै।
 
-#### चरण १: लगइन फंक्शनको आधार सिर्जना गर्नुहोस्
+#### चरण १: लगइन फङ्सनको आधार सिर्जना गर्नुहोस्
 
-तपाईंको `app.js` फाइल खोल्नुहोस् र नयाँ `login` फंक्शन थप्नुहोस्। यसले प्रयोगकर्ता प्रमाणीकरण प्रक्रिया व्यवस्थापन गर्नेछ:
+तपाईंको `app.js` फाइल खोल्नुहोस् र नयाँ `login` फङ्सन थप्नुहोस्। यसले प्रयोगकर्ता प्रमाणीकरण प्रक्रिया ह्यान्डल गर्नेछ:
 
 ```javascript
 async function login() {
@@ -133,16 +231,16 @@ async function login() {
 ```
 
 **यसलाई टुक्रा-टुक्रामा बुझौं:**
-- त्यो `async` कीवर्ड? यसले JavaScript लाई भन्छ "हे, यो फंक्शनले कुराहरूको लागि पर्खनु पर्छ।"
-- हामी हाम्रो पृष्ठबाट फारम समात्दैछौं (केही विशेष छैन, केवल यसको ID द्वारा खोज्दैछौं।)
-- त्यसपछि हामी प्रयोगकर्ताले टाइप गरेको प्रयोगकर्ता नाम निकाल्दैछौं।
+- त्यो `async` कीवर्ड? यसले जाभास्क्रिप्टलाई "हे, यो फङ्सनले पर्खनु पर्ने हुन सक्छ" भन्छ
+- हामी पृष्ठबाट हाम्रो फारम समात्दैछौं (केही विशेष छैन, केवल यसको ID द्वारा खोज्दैछौं)
+- त्यसपछि हामी प्रयोगकर्ताले टाइप गरेको युजरनेम निकाल्दैछौं
 - यहाँ एउटा राम्रो ट्रिक छ: तपाईं कुनै पनि फारम इनपुटलाई यसको `name` एट्रिब्युटद्वारा पहुँच गर्न सक्नुहुन्छ - अतिरिक्त getElementById कलहरूको आवश्यकता छैन!
 
-> 💡 **फारम पहुँच ढाँचा**: प्रत्येक फारम कन्ट्रोललाई यसको नाम (HTML मा `name` एट्रिब्युट प्रयोग गरेर सेट गरिएको) द्वारा फारम एलिमेन्टको गुणको रूपमा पहुँच गर्न सकिन्छ। यसले फारम डेटा प्राप्त गर्न सफा, पढ्न मिल्ने तरिका प्रदान गर्दछ।
+> 💡 **फारम पहुँच ढाँचा**: प्रत्येक फारम कन्ट्रोललाई यसको नाम (HTML मा `name` एट्रिब्युट प्रयोग गरेर सेट गरिएको) द्वारा फारम एलिमेन्टको प्रोपर्टीको रूपमा पहुँच गर्न सकिन्छ। यसले फारम डेटा प्राप्त गर्न सफा, पढ्न मिल्ने तरिका प्रदान गर्दछ।
 
-#### चरण २: खाता डेटा प्राप्ति फंक्शन सिर्जना गर्नुहोस्
+#### चरण २: खाता डेटा प्राप्त गर्ने फङ्सन सिर्जना गर्नुहोस्
 
-अगाडि, हामी सर्भरबाट खाता डेटा प्राप्त गर्न समर्पित फंक्शन सिर्जना गर्नेछौं। यो तपाईंको रजिस्ट्रेसन फंक्शनको समान ढाँचालाई पछ्याउँछ तर डेटा प्राप्तिमा केन्द्रित छ:
+अब, हामी सर्भरबाट खाता डेटा प्राप्त गर्न समर्पित फङ्सन सिर्जना गर्नेछौं। यो तपाईंको रजिस्ट्रेसन फङ्सनजस्तै ढाँचालाई पछ्याउँछ तर डेटा पुनःप्राप्तिमा केन्द्रित छ:
 
 ```javascript
 async function getAccount(user) {
@@ -156,36 +254,54 @@ async function getAccount(user) {
 ```
 
 **यस कोडले के पूरा गर्छ:**
-- **आधुनिक `fetch` API प्रयोग गरेर** डेटा असिंक्रोनस रूपमा अनुरोध गर्छ।
-- **GET अनुरोध URL निर्माण गर्छ** प्रयोगकर्ता नाम प्यारामिटरको साथ।
-- **`encodeURIComponent()` लागू गर्छ** URL मा विशेष क्यारेक्टरहरू सुरक्षित रूपमा व्यवस्थापन गर्न।
-- **प्रतिक्रिया JSON ढाँचामा रूपान्तरण गर्छ** डेटा हेरफेर गर्न सजिलो बनाउन।
-- **त्रुटिहरूलाई सुन्दर रूपमा व्यवस्थापन गर्छ** त्रुटि वस्तु फर्काएर क्र्यास नगरी।
+- **प्रयोग गर्छ** आधुनिक `fetch` API डेटा असिंक्रोनस रूपमा अनुरोध गर्न
+- **निर्माण गर्छ** GET अनुरोध URL युजरनेम प्यारामिटरको साथ
+- **लागु गर्छ** `encodeURIComponent()` विशेष क्यारेक्टरहरूलाई सुरक्षित रूपमा ह्यान्डल गर्न URL मा
+- **रूपान्तरण गर्छ** प्रतिक्रिया JSON ढाँचामा सजिलो डेटा ह्यान्डलिङको लागि
+- **ह्यान्डल गर्छ** त्रुटिहरूलाई ग्रेसफुली, क्र्यास नगरी त्रुटि वस्तु फिर्ता गरेर
 
-> ⚠️ **सुरक्षा नोट**: `encodeURIComponent()` फंक्शनले URL मा विशेष क्यारेक्टरहरू व्यवस्थापन गर्छ। जस्तै नौसेनाको सञ्चार प्रणालीमा प्रयोग गरिने एन्कोडिङ प्रणाली, यसले तपाईंको सन्देश ठीक त्यस्तै रूपमा पुग्छ भनी सुनिश्चित गर्छ, "#" वा "&" जस्ता क्यारेक्टरहरू गलत व्याख्या हुनबाट रोक्छ।
+> ⚠️ **सुरक्षा नोट**: `encodeURIComponent()` फङ्सनले URL मा विशेष क्यारेक्टरहरू ह्यान्डल गर्छ। जस्तै नौसेनाको सञ्चारमा प्रयोग गरिने एन्कोडिङ प्रणाली, यसले तपाईंको सन्देशलाई ठीक त्यस्तै रूपमा सुनिश्चित गर्दछ, जस्तै "#" वा "&" जस्ता क्यारेक्टरहरू गलत व्याख्या हुनबाट रोक्छ।
 > 
 **किन यो महत्त्वपूर्ण छ:**
-- विशेष क्यारेक्टरहरूले URL तोड्नबाट रोक्छ।
-- URL हेरफेर आक्रमणबाट सुरक्षा प्रदान गर्छ।
-- तपाईंको सर्भरले इच्छित डेटा प्राप्त गर्छ भनी सुनिश्चित गर्छ।
-- सुरक्षित कोडिङ अभ्यासहरू पछ्याउँछ।
+- विशेष क्यारेक्टरहरूले URL बिगार्नबाट रोक्छ
+- URL म्यानिपुलेसन आक्रमणबाट सुरक्षा प्रदान गर्दछ
+- सुनिश्चित गर्दछ कि तपाईंको सर्भरले इच्छित डेटा प्राप्त गर्छ
+- सुरक्षित कोडिङ अभ्यासहरू पछ्याउँछ
 
 #### HTTP GET अनुरोधहरू बुझ्दै
 
-जब तपाईं `fetch` बिना कुनै अतिरिक्त विकल्प प्रयोग गर्नुहुन्छ, यसले स्वतः [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) अनुरोध सिर्जना गर्छ। यो हामीले गरिरहेको कामका लागि उत्तम छ - सर्भरलाई सोध्दै "हे, म यो प्रयोगकर्ताको खाता डेटा देख्न सक्छु?"
+तपाईंलाई यो थाहा पाउँदा अचम्म लाग्न सक्छ: जब तपाईंले `fetch` कुनै अतिरिक्त विकल्पहरू बिना प्रयोग गर्नुहुन्छ, यसले स्वतः [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) अनुरोध सिर्जना गर्छ। यो हामीले गरिरहेको कामको लागि उत्तम छ - सर्भरलाई सोध्दै "हे, म यो प्रयोगकर्ताको खाता डेटा देख्न सक्छु?"
 
-GET अनुरोधहरूलाई पुस्तकालयबाट पुस्तक उधारो माग्न जस्तै सोच्नुहोस् - तपाईंले पहिले नै रहेको केही हेर्न अनुरोध गर्दै हुनुहुन्छ। POST अनुरोधहरू (जसलाई हामीले रजिस्ट्रेसनका लागि प्रयोग गर्यौं) नयाँ पुस्तक संग्रहमा थप्न जस्तै छन्।
+GET अनुरोधहरूलाई पुस्तकालयबाट पुस्तक उधारो माग्न जस्तै सोच्नुहोस् - तपाईंले पहिले नै रहेको केही हेर्न अनुरोध गर्दै हुनुहुन्छ। POST अनुरोधहरू (जसलाई हामीले रजिस्ट्रेसनका लागि प्रयोग गर्यौं) नयाँ पुस्तक संग्रहमा थप्न पेश गर्ने जस्तै हो।
 
 | GET अनुरोध | POST अनुरोध |
 |-------------|-------------|
-| **उद्देश्य** | अवस्थित डेटा प्राप्त गर्नुहोस् | सर्भरमा नयाँ डेटा पठाउनुहोस् |
+| **उद्देश्य** | पहिले नै रहेको डेटा पुनःप्राप्त गर्नुहोस् | सर्भरमा नयाँ डेटा पठाउनुहोस् |
 | **प्यारामिटरहरू** | URL पथ/क्वेरी स्ट्रिङमा | अनुरोध बडीमा |
 | **क्यासिङ** | ब्राउजरद्वारा क्यास गर्न सकिन्छ | सामान्यतया क्यास गरिँदैन |
-| **सुरक्षा** | URL/लगहरूमा देखिने | अनुरोध बडीमा लुकेको |
+| **सुरक्षा** | URL/लॉगमा देखिने | अनुरोध बडीमा लुकेको |
+
+```mermaid
+sequenceDiagram
+    participant B as Browser
+    participant S as Server
+    
+    Note over B,S: GET Request (Data Retrieval)
+    B->>S: GET /api/accounts/test
+    S-->>B: 200 OK + Account Data
+    
+    Note over B,S: POST Request (Data Submission)
+    B->>S: POST /api/accounts + New Account Data
+    S-->>B: 201 Created + Confirmation
+    
+    Note over B,S: Error Handling
+    B->>S: GET /api/accounts/nonexistent
+    S-->>B: 404 Not Found + Error Message
+```
 
 #### चरण ३: सबै कुरा एकसाथ ल्याउँदै
 
-अब सन्तोषजनक भागको लागि - तपाईंको खाता प्राप्ति फंक्शनलाई लगइन प्रक्रियासँग जडान गरौं। यहीँ सबै कुरा मिल्छ:
+अब सन्तोषजनक भागको लागि - तपाईंको खाता प्राप्त गर्ने फङ्सनलाई लगइन प्रक्रियासँग जडान गरौं। यहीँ सबै कुरा मिलेर आउँछ:
 
 ```javascript
 async function login() {
@@ -202,17 +318,17 @@ async function login() {
 }
 ```
 
-यो फंक्शनले स्पष्ट क्रम पछ्याउँछ:
-- फारम इनपुटबाट प्रयोगकर्ता नाम निकाल्नुहोस्।
-- सर्भरबाट प्रयोगकर्ताको खाता डेटा अनुरोध गर्नुहोस्।
-- प्रक्रियाको क्रममा हुने कुनै पनि त्रुटिहरू व्यवस्थापन गर्नुहोस्।
-- खाता डेटा भण्डारण गर्नुहोस् र सफलतापछि ड्यासबोर्डमा नेभिगेट गर्नुहोस्।
+यो फङ्सनले स्पष्ट क्रम पछ्याउँछ:
+- फारम इनपुटबाट युजरनेम निकाल्नुहोस्
+- सर्भरबाट प्रयोगकर्ताको खाता डेटा अनुरोध गर्नुहोस्
+- प्रक्रियाको क्रममा हुने कुनै पनि त्रुटिहरू ह्यान्डल गर्नुहोस्
+- खाता डेटा भण्डारण गर्नुहोस् र सफलतापछि ड्यासबोर्डमा जानुहोस्
 
-> 🎯 **Async/Await ढाँचा**: किनकि `getAccount` असिंक्रोनस फंक्शन हो, हामी `await` कीवर्ड प्रयोग गरेर कार्यान्वयनलाई रोक्छौं जबसम्म सर्भरले प्रतिक्रिया दिन्छ। यसले कोडलाई अपरिभाषित डेटा सहित अगाडि बढ्नबाट रोक्छ।
+> 🎯 **Async/Await ढाँचा**: किनकि `getAccount` एक असिंक्रोनस फङ्सन हो, हामी `await` कीवर्ड प्रयोग गर्छौं ताकि सर्भरले प्रतिक्रिया दिनसम्म कार्यान्वयन रोकियोस्। यसले कोडलाई परिभाषित नभएको डेटा संग जारी राख्नबाट रोक्छ।
 
-#### चरण ४: तपाईंको डेटा राख्नको लागि घर सिर्जना गर्नुहोस्
+#### चरण ४: तपाईंको डेटा राख्नको लागि स्थान सिर्जना गर्नुहोस्
 
-तपाईंको एपलाई खाता जानकारी लोड भएपछि सम्झनको लागि कुनै ठाउँ चाहिन्छ। यसलाई तपाईंको एपको छोटो समयको स्मृति जस्तै सोच्नुहोस् - हालको प्रयोगकर्ताको डेटा सजिलो पहुँचको लागि राख्ने ठाउँ। तपाईंको `app.js` फाइलको शीर्षमा यो लाइन थप्नुहोस्:
+तपाईंको एपलाई खाता जानकारी लोड भएपछि सम्झनको लागि कुनै स्थान चाहिन्छ। यसलाई तपाईंको एपको छोटो समयको स्मृति जस्तै सोच्नुहोस् - हालको प्रयोगकर्ताको डेटा सजिलै राख्नको लागि ठाउँ। तपाईंको `app.js` फाइलको माथि यो लाइन थप्नुहोस्:
 
 ```javascript
 // This holds the current user's account data
@@ -220,14 +336,14 @@ let account = null;
 ```
 
 **किन हामीलाई यो चाहिन्छ:**
-- खाता डेटा तपाईंको एपको कुनै पनि ठाउँबाट पहुँचयोग्य राख्छ।
-- `null` बाट सुरु गर्नुको मतलब "अहिलेसम्म कोही लगइन भएको छैन।"
-- जब कोही सफलतापूर्वक लगइन वा रजिस्टर गर्छ, अपडेट हुन्छ।
-- सत्यको एकल स्रोतको रूपमा काम गर्छ - कोही लगइन भएको छ भनी भ्रम छैन।
+- खाता डेटा तपाईंको एपको कुनै पनि स्थानबाट पहुँचयोग्य राख्छ
+- `null` बाट सुरु गर्नुको अर्थ "अहिलेसम्म कोही पनि लगइन भएको छैन"
+- जब कोही सफलतापूर्वक लगइन वा रजिस्टर गर्छ, अपडेट हुन्छ
+- सत्यको एकल स्रोतको रूपमा काम गर्छ - को लगइन छ भन्नेमा कुनै भ्रम छैन
 
-#### चरण ५: तपाईंको फारमलाई जडान गर्नुहोस्
+#### चरण ५: तपाईंको फारम जडान गर्नुहोस्
 
-अब तपाईंको नयाँ लगइन फंक्शनलाई तपाईंको HTML फारमसँग जडान गरौं। तपाईंको फारम ट्यागलाई यसरी अपडेट गर्नुहोस्:
+अब तपाईंको नयाँ लगइन फङ्सनलाई तपाईंको HTML फारमसँग जडान गरौं। तपाईंको फारम ट्यागलाई यसरी अपडेट गर्नुहोस्:
 
 ```html
 <form id="loginForm" action="javascript:login()">
@@ -236,14 +352,14 @@ let account = null;
 ```
 
 **यो सानो परिवर्तनले के गर्छ:**
-- फारमलाई यसको डिफल्ट "सम्पूर्ण पृष्ठ पुनः लोड गर्ने" व्यवहार रोक्छ।
-- तपाईंको कस्टम JavaScript फंक्शनलाई कल गर्छ।
-- सबै कुरा चिल्लो र सिंगल-पेज-एप-जस्तै राख्छ।
-- प्रयोगकर्ताहरूले "लगइन" थिच्दा के हुन्छ भन्नेमा तपाईंलाई पूर्ण नियन्त्रण दिन्छ।
+- फारमलाई यसको डिफल्ट "सम्पूर्ण पृष्ठ पुनः लोड गर्ने" व्यवहारबाट रोक्छ
+- तपाईंको कस्टम जाभास्क्रिप्ट फङ्सनलाई कल गर्छ
+- सबै कुरा सहज र सिंगल-पेज-एप-जस्तै राख्छ
+- प्रयोगकर्ताहरूले "लगइन" थिच्दा के हुन्छ भन्नेमा तपाईंलाई पूर्ण नियन्त्रण दिन्छ
 
-#### चरण ६: तपाईंको रजिस्ट्रेसन फंक्शनलाई सुधार गर्नुहोस्
+#### चरण ६: तपाईंको रजिस्ट्रेसन फङ्सनलाई सुधार गर्नुहोस्
 
-सुसंगतताका लागि, तपाईंको `register` फंक्शनलाई पनि खाता डेटा भण्डारण गर्न र ड्यासबोर्डमा नेभिगेट गर्न अपडेट गर्नुहोस्:
+संगतताको लागि, तपाईंको `register` फङ्सनलाई पनि खाता डेटा भण्डारण गर्न र ड्यासबोर्डमा जानको लागि अपडेट गर्नुहोस्:
 
 ```javascript
 // Add these lines at the end of your register function
@@ -251,10 +367,10 @@ account = result;
 navigate('/dashboard');
 ```
 
-**यस सुधारले प्रदान गर्छ:**
-- **सजिलो** रजिस्ट्रेसनबाट ड्यासबोर्डमा संक्रमण।
-- **सुसंगत** प्रयोगकर्ता अनुभव लगइन र रजिस्ट्रेसन प्रवाहहरू बीच।
-- **तुरुन्तै** सफल रजिस्ट्रेसनपछि खाता डेटा पहुँच।
+**यो सुधारले प्रदान गर्छ:**
+- **सहज** रजिस्ट्रेसनबाट ड्यासबोर्डमा संक्रमण
+- **संगत** प्रयोगकर्ता अनुभव लगइन र रजिस्ट्रेसन प्रवाहहरू बीच
+- **तुरुन्तै** सफल रजिस्ट्रेसन पछि खाता डेटा पहुँच
 
 #### तपाईंको कार्यान्वयन परीक्षण गर्दै
 
@@ -269,44 +385,50 @@ flowchart TD
     F --> H[User stays on login page]
 ```
 
-**अब यसलाई परीक्षण गर्ने समय:**
-1. नयाँ खाता सिर्जना गरेर सबै कुरा काम गरिरहेको छ भनी सुनिश्चित गर्नुहोस्।
-2. ती नै प्रमाणहरू प्रयोग गरेर लगइन प्रयास गर्नुहोस्।
-3. यदि केही असामान्य लाग्छ भने तपाईंको ब्राउजरको कन्सोल (F12) हेर्नुहोस्।
-4. सफल लगइनपछि ड्यासबोर्डमा पुग्न सुनिश्चित गर्नुहोस्।
+**यसलाई परीक्षण गर्ने समय:**
+1. नयाँ खाता सिर्जना गर्नुहोस् र सबै कुरा ठीक छ भनी सुनिश्चित गर्नुहोस्
+2. ती समान प्रमाणहरू प्रयोग गरेर लगइन प्रयास गर्नुहोस्
+3. यदि केही समस्या देखिन्छ भने, तपाईंको ब्राउजरको कन्सोल (F12) हेर्नुहोस्
+4. सफल लगइन पछि ड्यासबोर्डमा पुग्न सुनिश्चित गर्नुहोस्
 
-यदि केही काम गरिरहेको छैन भने, नआत्तिनुहोस्! अधिकांश समस्याहरू साधारण सुधारहरू हुन् जस्तै टाइपोहरू वा API सर्भर सुरु गर्न बिर्सनु।
+यदि केही काम गरिरहेको छैन भने, चिन्ता नगर्नुहोस्! अधिकांश समस्याहरू साधारण सुधारहरू हुन् जस्तै टाइपोहरू वा API सर्भर सुरु गर्न बिर्सनु।
 
-#### क्रस-ओरिजिन जादूको बारेमा छोटो शब्द
+#### क्रस-ओरिजिन जादूको बारेमा छिटो शब्द
 
-तपाईं सोच्न सक्नुहुन्छ: "मेरो वेब एपले यो API सर्भरसँग कसरी कुरा गरिरहेको छ जब तिनीहरू फरक पोर्टमा चलिरहेका छन्?" राम्रो प्रश्न! यो प्रत्येक वेब विकासकर्ताले अन्ततः सामना गर्ने विषयलाई छुन्छ।
+तपाईं सोच्दै हुनुहुन्छ: "मेरो वेब एपले कसरी यो API सर्भरसँग कुरा गरिरहेको छ जब तिनीहरू फरक पोर्टमा चलिरहेका छन्?" राम्रो प्रश्न! यो प्रत्येक वेब डेभलपरले अन्ततः सामना गर्ने विषय हो।
 
-> 🔒 **क्रस-ओरिजिन सुरक्षा**: ब्राउजरहरूले "साम-ओरिजिन नीति" लागू गर्छन् ताकि विभिन्न डोमेनहरू बीचको अनधिकृत सञ्चारलाई रोक्न सकियोस्। जस्तै पेन्टागनको चेकपोइन्ट प्रणाली, तिनीहरूले डेटा स्थानान्तरण अनुमति दिएर सञ्चारलाई प्रमाणित गर्छन्।
-> 
-**हाम्रो सेटअपमा:**
-- तपाईंको वेब एप `localhost:3000` मा चल्छ (विकास सर्भर)
-- तपाईंको API सर्भर `localhost:5000` मा चल्छ (ब्याकएन्ड सर्भर)
-- API सर्भरले [CORS हेडरहरू](https://developer.mozilla.org/docs/Web/HTTP/CORS) समावेश गर्छ जसले तपाईंको वेब एपबाट सञ्चारलाई स्पष्ट रूपमा अनुमति दिन्छ।
+> 🔒 **क्रस-ओरिजिन सुरक्षा**: ब्राउजरहरूले "साम-ओरिजिन नीति" लागू गर्छन् ताकि
+DOM म्यानिपुलेसन भनेको स्थिर वेब पृष्ठलाई गतिशील एप्लिकेसनमा परिवर्तन गर्ने प्रविधि हो, जसले प्रयोगकर्ताको अन्तरक्रिया र सर्भरको प्रतिक्रियाको आधारमा सामग्री अपडेट गर्दछ।
 
-यो कन्फिगरेसन वास्तविक-विश्व विकासलाई प्रतिबिम्बित गर्छ जहाँ फ्रन्टएन्ड र ब्याकएन्ड एप्लिकेसनहरू सामान्यतया अलग सर्भरहरूमा चल्छन्।
+### कामको लागि सही उपकरण छान्नुहोस्
 
-> 📚 **थप जान्नुहोस्**: API हरू र डेटा प्राप्तिमा गहिरो डुब्नको लागि यो व्यापक [Microsoft Learn मोड्युल](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) हेर्नुहोस्।
+जब तपाईं आफ्नो HTML लाई JavaScript प्रयोग गरेर अपडेट गर्नुहुन्छ, तपाईंसँग धेरै विकल्पहरू छन्। यीलाई उपकरणको बक्समा विभिन्न उपकरणहरू जस्तै सोच्नुहोस् - प्रत्येक विशेष कामको लागि उपयुक्त:
 
-## HTML मा तपाईंको डेटा जीवन्त बनाउँदै
+| विधि | यो केको लागि राम्रो छ | कहिले प्रयोग गर्ने | सुरक्षा स्तर |
+|--------|---------------------|----------------|--------------|
+| `textContent` | प्रयोगकर्ताको डेटा सुरक्षित रूपमा देखाउने | जब तपाईं पाठ देखाउँदै हुनुहुन्छ | ✅ अत्यन्त सुरक्षित |
+| `createElement()` + `append()` | जटिल लेआउट बनाउने | नयाँ सेक्सन/सूचीहरू सिर्जना गर्ने | ✅ पूर्ण सुरक्षित |
+| `innerHTML` | HTML सामग्री सेट गर्ने | ⚠️ यसलाई सकेसम्म टाढा राख्नुहोस् | ❌ जोखिमपूर्ण |
 
-अब हामी प्राप्त गरिएको डेटा प्रयोगकर्ताहरूलाई DOM म्यानिपुलेसनको माध्यमबाट देखिने बनाउनेछौं। जस्तै अँध्यारो कोठामा फोटोहरू विकास गर्ने प्रक्रिया, हामी अदृश्य डेटा लिँदैछौं र यसलाई प्रयोगकर्ताहरूले देख्न र अन्तरक्रिया गर्न सक्ने केहीमा प्रस्तुत गर्दैछौं।
+#### सुरक्षित तरिकाले पाठ देखाउने: textContent
 
-DOM म्यानिपुलेसन एक प्रविधि हो जसले स्थिर वेब पृष्ठहरूलाई गतिशील एप्लिकेसनहरूमा रूपान्तरण गर्छ, जसले प्रयोगकर्ता अन्तरक्रिया र सर्भर प्रतिक्रियाको आधारमा सामग्री अपडेट गर्दछ।
+[`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) गुण तपाईंको वेबपृष्ठको लागि सुरक्षा गार्ड जस्तै हो - हानिकारक केही पनि भित्र आउँदैन:
 
-### कामको लागि सही उपकरण चयन गर्दै
+```javascript
+// The safe, reliable way to update text
+const balanceElement = document.getElementById('balance');
+balanceElement.textContent = account.balance;
+```
 
-जब तपाईं आफ्नो HTML लाई JavaScript को साथ अपडेट गर्नुहुन्छ, तपाईंसँग धेरै विकल्पहरू छन्। यीलाई उपकरणको टूलबक्समा विभिन्न उपकरणहरू जस्तै सोच्नुहोस् - प्रत्येक विशिष्ट कामका लागि उत्तम।
+**textContent को फाइदा:**
+- सबैलाई सामान्य पाठको रूपमा व्यवहार गर्छ (स्क्रिप्ट कार्यान्वयन रोक्छ)
+- स्वतः विद्यमान सामग्री हटाउँछ
+- साधारण पाठ अपडेटको लागि प्रभावकारी
+- हानिकारक सामग्रीको विरुद्धमा निर्मित सुरक्षा प्रदान गर्छ
 
-| विधि | यो केका लागि राम्रो छ | कहिले प्रयोग गर्ने | सुरक्षा स्तर |
-|--------|---------------------|----------------|--------------|
-| `textContent` | प्रयोगकर्ता डेटा सुरक्षित रूपमा देखाउन | जब तपाईं पाठ देखाउँदै हुनुहुन्छ | ✅ अत्यन्त सुरक्षित |
-| `createElement()` + `append()` | जटिल लेआउट निर्माण गर्न | नयाँ सेक्सन/सूचीहरू सिर्जना गर्दा | ✅ अत्यन्त सुरक्षित
-अधिक जटिल सामग्रीको लागि, [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) लाई [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) विधिसँग मिलाउनुहोस्:
+#### गतिशील HTML तत्वहरू सिर्जना गर्नुहोस्
+
+अझ जटिल सामग्रीको लागि, [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) लाई [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) विधिसँग मिलाउनुहोस्:
 
 ```javascript
 // Safe way to create new elements
@@ -316,29 +438,29 @@ transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
 container.append(transactionItem);
 ```
 
-**यस विधिको बुझाइ:**
-- **नयाँ DOM तत्वहरू** प्रोग्राममार्फत सिर्जना गर्दछ
-- **तत्वहरूको विशेषता र सामग्रीमा** पूर्ण नियन्त्रण राख्छ
-- **जटिल, nested तत्व संरचनाहरूको लागि अनुमति दिन्छ**
-- **सुरक्षा कायम राख्छ** सामग्रीलाई संरचनाबाट अलग गरेर
+**यस दृष्टिकोणलाई बुझ्दै:**
+- **नयाँ DOM तत्वहरू** प्रोग्राममार्फत सिर्जना गर्छ
+- **तत्वको गुणहरू र सामग्रीमा** पूर्ण नियन्त्रण राख्छ
+- **जटिल, नेस्टेड तत्व संरचनाहरूको लागि अनुमति दिन्छ**
+- **सुरक्षा कायम राख्छ** संरचना र सामग्रीलाई अलग गरेर
 
-> ⚠️ **सुरक्षा विचार**: जबकि [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) धेरै ट्यूटोरियलहरूमा देखिन्छ, यसले embedded स्क्रिप्टहरू कार्यान्वयन गर्न सक्छ। CERN मा अनधिकृत कोड कार्यान्वयन रोक्नका लागि सुरक्षा प्रोटोकलहरू जस्तै, `textContent` र `createElement` प्रयोग गर्दा सुरक्षित विकल्पहरू प्रदान गर्दछ।
+> ⚠️ **सुरक्षा विचार**: जबकि [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) धेरै ट्युटोरियलहरूमा देखिन्छ, यसले एम्बेड गरिएको स्क्रिप्टहरू कार्यान्वयन गर्न सक्छ। CERN मा सुरक्षा प्रोटोकलहरूले अनधिकृत कोड कार्यान्वयन रोक्ने जस्तै, `textContent` र `createElement` प्रयोग गर्दा सुरक्षित विकल्पहरू प्रदान गर्दछ।
 > 
-**innerHTML को जोखिमहरू:**
-- प्रयोगकर्ता डेटा भित्रका कुनै पनि `<script>` ट्यागहरू कार्यान्वयन गर्दछ
+**innerHTML को जोखिम:**
+- प्रयोगकर्ताको डेटा भित्रका कुनै पनि `<script>` ट्यागहरू कार्यान्वयन गर्छ
 - कोड इन्जेक्सन आक्रमणको लागि संवेदनशील
-- सम्भावित सुरक्षा कमजोरीहरू सिर्जना गर्दछ
-- हामीले प्रयोग गरिरहेका सुरक्षित विकल्पहरूले समान कार्यक्षमता प्रदान गर्दछ
+- सम्भावित सुरक्षा कमजोरीहरू सिर्जना गर्छ
+- हामीले प्रयोग गरिरहेका सुरक्षित विकल्पहरूले समान कार्यक्षमता प्रदान गर्छ
 
-### त्रुटिहरूलाई प्रयोगकर्तामैत्री बनाउने
+### प्रयोगकर्ताको लागि त्रुटिहरूलाई मैत्रीपूर्ण बनाउने
 
-हाल, लगइन त्रुटिहरू केवल ब्राउजर कन्सोलमा देखिन्छन्, जुन प्रयोगकर्ताहरूको लागि अदृश्य हुन्छ। पाइलटको आन्तरिक डायग्नोस्टिक्स र यात्रु जानकारी प्रणालीको बीचको फरक जस्तै, हामीले महत्त्वपूर्ण जानकारी उपयुक्त माध्यमबाट संचार गर्न आवश्यक छ।
+हाल, लगइन त्रुटिहरू ब्राउजर कन्सोलमा मात्र देखिन्छन्, जुन प्रयोगकर्ताहरूका लागि अदृश्य छ। पाइलटको आन्तरिक डायग्नोस्टिक्स र यात्रु सूचना प्रणालीको बीचको फरक जस्तै, हामीले महत्त्वपूर्ण जानकारी उपयुक्त च्यानलमार्फत संचार गर्न आवश्यक छ।
 
-दृश्य त्रुटि सन्देशहरू कार्यान्वयन गर्दा प्रयोगकर्ताहरूलाई के गलत भयो र कसरी अगाडि बढ्ने भन्ने बारेमा तत्काल प्रतिक्रिया प्रदान गर्दछ।
+दृश्य त्रुटि सन्देशहरू कार्यान्वयन गर्दा प्रयोगकर्ताहरूलाई के गलत भयो र कसरी अगाडि बढ्ने भन्ने बारेमा तुरुन्त प्रतिक्रिया प्रदान गर्दछ।
 
-#### चरण १: त्रुटि सन्देशहरूको लागि स्थान थप्नुहोस्
+#### चरण 1: त्रुटि सन्देशहरूको लागि स्थान थप्नुहोस्
 
-पहिले, त्रुटि सन्देशहरूलाई HTML मा स्थान दिनुहोस्। यो तपाईंको लगइन बटनको ठीक अगाडि थप्नुहोस् ताकि प्रयोगकर्ताहरूले यसलाई स्वाभाविक रूपमा देख्न सकून्:
+पहिले, त्रुटि सन्देशहरूको लागि तपाईंको HTML मा स्थान दिनुहोस्। यो तपाईंको लगइन बटनको ठीक अगाडि थप्नुहोस् ताकि प्रयोगकर्ताहरूले यसलाई स्वाभाविक रूपमा देख्न सकून्:
 
 ```html
 <!-- This is where error messages will appear -->
@@ -348,13 +470,13 @@ container.append(transactionItem);
 
 **यहाँ के भइरहेको छ:**
 - हामीले एउटा खाली कन्टेनर सिर्जना गरेका छौं जुन आवश्यक नभएसम्म अदृश्य रहन्छ
-- यो लगइन क्लिक गरेपछि प्रयोगकर्ताहरू स्वाभाविक रूपमा हेर्ने स्थानमा राखिएको छ
-- त्यो `role="alert"` स्क्रिन रिडरहरूको लागि राम्रो छ - यसले सहायक प्रविधिलाई भन्छ "हेर्नुहोस्, यो महत्त्वपूर्ण छ!"
-- अनौठो `id` ले हाम्रो जाभास्क्रिप्टलाई सजिलो लक्ष्य दिन्छ
+- यो "लगइन" क्लिक गरेपछि प्रयोगकर्ताहरू स्वाभाविक रूपमा हेर्ने स्थानमा राखिएको छ
+- त्यो `role="alert"` स्क्रिन रिडरहरूको लागि राम्रो स्पर्श हो - यसले सहायक प्रविधिलाई भन्छ "हे, यो महत्त्वपूर्ण छ!"
+- अनौठो `id` ले हाम्रो JavaScript लाई सजिलो लक्ष्य दिन्छ
 
-#### चरण २: उपयोगी सहायक कार्य बनाउनुहोस्
+#### चरण 2: उपयोगी सहायक कार्य बनाउनुहोस्
 
-अब हामी एउटा सानो युटिलिटी कार्य बनाउँछौं जसले कुनै पनि तत्वको पाठ अपडेट गर्न सक्छ। यो "एक पटक लेख्नुहोस्, सबै ठाउँमा प्रयोग गर्नुहोस्" प्रकारको कार्य हो जसले तपाईंको समय बचत गर्नेछ:
+अब एउटा सानो युटिलिटी कार्य बनाऔं जसले कुनै पनि तत्वको पाठ अपडेट गर्न सक्छ। यो "एक पटक लेख्नुहोस्, सबै ठाउँमा प्रयोग गर्नुहोस्" प्रकारको कार्य हो जसले तपाईंको समय बचत गर्नेछ:
 
 ```javascript
 function updateElement(id, text) {
@@ -363,15 +485,15 @@ function updateElement(id, text) {
 }
 ```
 
-**कार्यको फाइदाहरू:**
-- केवल तत्व ID र पाठ सामग्री चाहिने सरल इन्टरफेस
-- सुरक्षित रूपमा DOM तत्वहरू पत्ता लगाउँछ र अपडेट गर्दछ
-- पुन: प्रयोग गर्न मिल्ने ढाँचा जसले कोडको पुनरावृत्ति कम गर्दछ
+**कार्यको फाइदा:**
+- केवल तत्वको ID र पाठ सामग्री चाहिने सरल इन्टरफेस
+- सुरक्षित रूपमा DOM तत्वहरू पत्ता लगाउँछ र अपडेट गर्छ
+- पुन: प्रयोगयोग्य ढाँचा जसले कोड दोहोर्याउने कम गर्छ
 - अनुप्रयोगभरि निरन्तर अपडेट गर्ने व्यवहार कायम राख्छ
 
-#### चरण ३: त्रुटिहरू प्रयोगकर्ताले देख्न सक्ने ठाउँमा देखाउनुहोस्
+#### चरण 3: त्रुटिहरू प्रयोगकर्ताहरूले देख्न सक्ने ठाउँमा देखाउनुहोस्
 
-अब हामी लुकेको कन्सोल सन्देशलाई बदल्न सक्छौं जुन प्रयोगकर्ताहरूले वास्तवमै देख्न सक्छन्। आफ्नो लगइन कार्यलाई अपडेट गर्नुहोस्:
+अब लुकेको कन्सोल सन्देशलाई प्रयोगकर्ताहरूले वास्तवमा देख्न सक्ने केहि कुरासँग बदलौं। तपाईंको लगइन कार्यलाई अपडेट गर्नुहोस्:
 
 ```javascript
 // Instead of just logging to console, show the user what's wrong
@@ -383,16 +505,16 @@ if (data.error) {
 **यो सानो परिवर्तनले ठूलो फरक पार्छ:**
 - त्रुटि सन्देशहरू ठीक त्यही ठाउँमा देखिन्छ जहाँ प्रयोगकर्ताहरू हेर्दैछन्
 - अब रहस्यमय मौन असफलताहरू छैनन्
-- प्रयोगकर्ताहरूले तत्काल, कार्यान्वयन योग्य प्रतिक्रिया प्राप्त गर्छन्
+- प्रयोगकर्ताहरूले तुरुन्त, कार्यात्मक प्रतिक्रिया पाउँछन्
 - तपाईंको एप व्यावसायिक र विचारशील महसुस गर्न थाल्छ
 
 अब जब तपाईंले अमान्य खाता प्रयोग गरेर परीक्षण गर्नुहुन्छ, तपाईंले पृष्ठमा नै उपयोगी त्रुटि सन्देश देख्नुहुनेछ!
 
 ![लगइनको क्रममा देखाइएको त्रुटि सन्देशको स्क्रिनशट](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ne.png)
 
-#### चरण ४: पहुँचयोग्यताको साथ समावेशी बनाउने
+#### चरण 4: पहुँचयोग्यताको साथ समावेशी बन्नुहोस्
 
-हामीले पहिले थपेको `role="alert"` को बारेमा यहाँ केही चाखलाग्दो कुरा छ - यो केवल सजावट होइन! यो सानो विशेषताले [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) सिर्जना गर्दछ जसले स्क्रिन रिडरहरूलाई तुरुन्तै परिवर्तनहरू घोषणा गर्दछ:
+त्यो `role="alert"` हामीले पहिले थपेको कुरा यहाँ चाखलाग्दो छ - यो केवल सजावट होइन! यो सानो विशेषताले [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) सिर्जना गर्छ जसले स्क्रिन रिडरहरूलाई तुरुन्त परिवर्तन घोषणा गर्छ:
 
 ```html
 <div id="loginError" role="alert"></div>
@@ -400,43 +522,56 @@ if (data.error) {
 
 **यसको महत्त्व किन छ:**
 - स्क्रिन रिडर प्रयोगकर्ताहरूले त्रुटि सन्देश तुरुन्तै सुन्छन्
-- सबैले महत्त्वपूर्ण जानकारी प्राप्त गर्छन्, उनीहरूले कसरी नेभिगेट गर्छन् भन्ने कुराको पर्वाह नगरी
-- यो तपाईंको एपलाई धेरै मानिसहरूको लागि काम गर्न सजिलो बनाउने सरल तरिका हो
-- समावेशी अनुभव सिर्जना गर्न तपाईंले ध्यान दिनुभएको देखाउँछ
+- सबैले महत्त्वपूर्ण जानकारी समान रूपमा पाउँछन्, चाहे उनीहरूले कसरी नेभिगेट गरे पनि
+- यो तपाईंको एपलाई धेरै व्यक्तिहरूको लागि काम गर्न सजिलो बनाउने सरल तरिका हो
+- समावेशी अनुभवहरू सिर्जना गर्न तपाईंले ध्यान दिनुभएको देखाउँछ
+
+यस्ता साना स्पर्शहरूले राम्रो विकासकर्तालाई उत्कृष्ट बनाउँछ!
+
+### 🎯 शैक्षिक जाँच: प्रमाणीकरण ढाँचा
+
+**रोक्नुहोस् र विचार गर्नुहोस्**: तपाईंले पूर्ण प्रमाणीकरण प्रवाह कार्यान्वयन गर्नुभएको छ। यो वेब विकासमा आधारभूत ढाँचा हो।
+
+**छोटो आत्म-मूल्यांकन**:
+- तपाईं API कलहरूको लागि async/await किन प्रयोग गर्छौं भनेर व्याख्या गर्न सक्नुहुन्छ?
+- यदि हामीले `encodeURIComponent()` कार्य बिर्स्यौं भने के हुन्छ?
+- हाम्रो त्रुटि ह्यान्डलिङले प्रयोगकर्ता अनुभवलाई कसरी सुधार गर्छ?
 
-यस्ता साना कुराहरूले राम्रो विकासकर्तालाई उत्कृष्ट विकासकर्ताबाट अलग गर्छ!
+**वास्तविक संसारको सम्बन्ध**: तपाईंले यहाँ सिक्नुभएको ढाँचा (async डेटा फेचिङ, त्रुटि ह्यान्डलिङ, प्रयोगकर्ता प्रतिक्रिया) प्रत्येक प्रमुख वेब एप्लिकेसनमा प्रयोग गरिन्छ, सामाजिक मिडिया प्लेटफर्मदेखि ई-कमर्स साइटसम्म। तपाईं उत्पादन-स्तरको सीप निर्माण गर्दै हुनुहुन्छ!
 
-#### चरण ५: दर्तामा समान ढाँचा लागू गर्नुहोस्
+**चुनौती प्रश्न**: तपाईंले यो प्रमाणीकरण प्रणालीलाई कसरी संशोधन गर्न सक्नुहुन्छ ताकि यसले धेरै प्रयोगकर्ता भूमिकाहरू (ग्राहक, प्रशासक, टेलर) ह्यान्डल गर्न सकून्? आवश्यक डेटा संरचना र UI परिवर्तनहरूको बारेमा सोच्नुहोस्।
 
-संगतताका लागि, आफ्नो दर्ता फारममा समान त्रुटि ह्यान्डलिंग कार्यान्वयन गर्नुहोस्:
+#### चरण 5: दर्तामा समान ढाँचा लागू गर्नुहोस्
 
-1. **थप्नुहोस्** त्रुटि प्रदर्शन तत्वलाई आफ्नो दर्ता HTML मा:
+सुसंगतताका लागि, तपाईंको दर्ता फारममा समान त्रुटि ह्यान्डलिङ कार्यान्वयन गर्नुहोस्:
+
+1. **थप्नुहोस्** त्रुटि प्रदर्शन तत्वलाई तपाईंको दर्ता HTML मा:
 ```html
 <div id="registerError" role="alert"></div>
 ```
 
-2. **अपडेट गर्नुहोस्** आफ्नो दर्ता कार्यलाई समान त्रुटि प्रदर्शन ढाँचा प्रयोग गर्न:
+2. **अपडेट गर्नुहोस्** तपाईंको दर्ता कार्यलाई समान त्रुटि प्रदर्शन ढाँचा प्रयोग गर्न:
 ```javascript
 if (data.error) {
   return updateElement('registerError', data.error);
 }
 ```
 
-**समान त्रुटि ह्यान्डलिंगको फाइदाहरू:**
-- **समान** प्रयोगकर्ता अनुभव सबै फारमहरूमा प्रदान गर्दछ
-- **परिचित ढाँचाहरू** प्रयोग गरेर संज्ञानात्मक भार कम गर्दछ
-- **पुन: प्रयोग गर्न मिल्ने कोड** संग मर्मतसम्भार सरल बनाउँछ
-- **पहुँचयोग्यता मापदण्डहरू** अनुप्रयोगभरि पूरा गर्दछ
+**सुसंगत त्रुटि ह्यान्डलिङको फाइदा:**
+- **समान** प्रयोगकर्ता अनुभव सबै फारमहरूमा प्रदान गर्छ
+- **परिचित ढाँचाहरू** प्रयोग गरेर संज्ञानात्मक भार कम गर्छ
+- **पुन: प्रयोगयोग्य कोड** द्वारा मर्मतसम्भारलाई सरल बनाउँछ
+- **पहुँचयोग्यता मापदण्डहरू** अनुप्रयोगभरि पूरा गर्छ
 
-## आफ्नो गतिशील ड्यासबोर्ड सिर्जना गर्दै
+## तपाईंको गतिशील ड्यासबोर्ड सिर्जना गर्दै
 
-अब हामी तपाईंको स्थिर ड्यासबोर्डलाई गतिशील इन्टरफेसमा रूपान्तरण गर्नेछौं जसले वास्तविक खाता डेटा देखाउँछ। मुद्रित उडान तालिका र एयरपोर्टमा लाइभ प्रस्थान बोर्डहरूको बीचको फरक जस्तै, हामी स्थिर जानकारीबाट वास्तविक-समय, प्रतिक्रियाशील प्रदर्शनमा जाँदैछौं।
+अब हामी तपाईंको स्थिर ड्यासबोर्डलाई गतिशील इन्टरफेसमा परिवर्तन गर्नेछौं जसले वास्तविक खाता डेटा देखाउँछ। मुद्रित उडान तालिका र एयरपोर्टमा लाइभ प्रस्थान बोर्डहरूको बीचको फरक जस्तै, हामी स्थिर जानकारीबाट वास्तविक-समय, प्रतिक्रियाशील प्रदर्शनमा जाँदैछौं।
 
-तपाईंले सिकेका DOM हेरफेर प्रविधिहरू प्रयोग गरेर, हामी एउटा ड्यासबोर्ड सिर्जना गर्नेछौं जुन हालको खाता जानकारीसँग स्वचालित रूपमा अपडेट हुन्छ।
+तपाईंले सिक्नुभएको DOM म्यानिपुलेसन प्रविधि प्रयोग गरेर, हामी एउटा ड्यासबोर्ड बनाउनेछौं जसले हालको खाता जानकारीसँग स्वतः अपडेट गर्दछ।
 
-### तपाईंको डेटा बुझ्दै
+### तपाईंको डेटा चिन्नुहोस्
 
-हामी निर्माण सुरु गर्नु अघि, तपाईंको सर्भरले फिर्ता पठाउने डेटा प्रकारलाई हेर्नुहोस्। जब कसैले सफलतापूर्वक लगइन गर्छ, यहाँ तपाईंले काम गर्न पाउने जानकारीको खजाना छ:
+हामी निर्माण सुरु गर्नु अघि, तपाईंको सर्भरले फिर्ता पठाउने डेटा प्रकारको झलक हेरौं। जब कसैले सफलतापूर्वक लगइन गर्छ, यहाँ तपाईंले काम गर्न पाउने जानकारीको खजाना छ:
 
 ```json
 {
@@ -452,30 +587,46 @@ if (data.error) {
 }
 ```
 
-**यो डेटा संरचनाले प्रदान गर्दछ:**
-- **`user`**: अनुभवलाई व्यक्तिगत बनाउनको लागि उत्तम ("फेरि स्वागत छ, Sarah!")
-- **`currency`**: पैसा रकमहरू सही ढंगले प्रदर्शन गर्न सुनिश्चित गर्दछ
-- **`description`**: खाताको लागि मैत्री नाम
+**यो डेटा संरचनाले प्रदान गर्छ:**
+- **`user`**: अनुभवलाई व्यक्तिगत बनाउनको लागि उपयुक्त ("फेरि स्वागत छ, Sarah!")
+- **`currency`**: पैसा रकम सही ढंगले देखाउन सुनिश्चित गर्छ
+- **`description`**: खाताको लागि मैत्रीपूर्ण नाम
 - **`balance`**: सबैभन्दा महत्त्वपूर्ण वर्तमान ब्यालेन्स
-- **`transactions`**: सबै विवरणहरूसहितको पूर्ण लेनदेन इतिहास
+- **`transactions`**: सम्पूर्ण लेनदेन इतिहास सबै विवरणहरूसहित
 
 पेशेवर देखिने बैंकिङ ड्यासबोर्ड निर्माण गर्न तपाईंलाई चाहिने सबै कुरा!
 
-> 💡 **प्रो टिप**: तपाईंको ड्यासबोर्डलाई तुरुन्तै काममा देख्न चाहनुहुन्छ? लगइन गर्दा `test` प्रयोगकर्ता नाम प्रयोग गर्नुहोस् - यसमा नमूना डेटा पहिले नै लोड गरिएको छ ताकि तपाईंले लेनदेनहरू पहिले सिर्जना नगरी सबै काम गरिरहेको देख्न सक्नुहुन्छ।
+```mermaid
+flowchart TD
+    A[User Login] --> B[Fetch Account Data]
+    B --> C{Data Valid?}
+    C -->|Yes| D[Store in Global Variable]
+    C -->|No| E[Show Error Message]
+    D --> F[Navigate to Dashboard]
+    F --> G[Update UI Elements]
+    G --> H[Display Balance]
+    G --> I[Show Description]
+    G --> J[Render Transactions]
+    J --> K[Create Table Rows]
+    K --> L[Format Currency]
+    L --> M[User Sees Live Data]
+```
+
+> 💡 **प्रो टिप**: तपाईंको ड्यासबोर्डलाई तुरुन्तै काममा देख्न चाहनुहुन्छ? जब तपाईं लगइन गर्नुहुन्छ, `test` प्रयोगकर्ता नाम प्रयोग गर्नुहोस् - यसमा पहिले नै नमूना डेटा लोड गरिएको छ ताकि तपाईंले लेनदेन सिर्जना गर्नु अघि सबै काम गरिरहेको देख्न सक्नुहुन्छ।
 > 
 **परीक्षण खाता किन उपयोगी छ:**
-- पहिले नै लोड गरिएको यथार्थपरक नमूना डेटा आउँछ
-- लेनदेनहरू कसरी प्रदर्शन हुन्छन् हेर्नको लागि उत्तम
+- पहिले नै यथार्थपरक नमूना डेटा लोड गरिएको छ
+- लेनदेन कसरी प्रदर्शन हुन्छ हेर्नको लागि उत्तम
 - तपाईंको ड्यासबोर्ड सुविधाहरू परीक्षण गर्न उत्कृष्ट
 - तपाईंलाई म्यानुअल रूपमा डमी डेटा सिर्जना गर्नबाट बचाउँछ
 
 ### ड्यासबोर्ड प्रदर्शन तत्वहरू सिर्जना गर्दै
 
-आफ्नो ड्यासबोर्ड इन्टरफेस चरणबद्ध रूपमा निर्माण गरौं, खाता सारांश जानकारीबाट सुरु गर्दै र त्यसपछि लेनदेन सूचीहरू जस्ता जटिल सुविधाहरूमा जाँदै।
+अब हामी तपाईंको ड्यासबोर्ड इन्टरफेसलाई चरणबद्ध रूपमा निर्माण गर्नेछौं, खाता सारांश जानकारीबाट सुरु गर्दै र लेनदेन सूचीहरू जस्ता जटिल सुविधाहरूमा जानेछौं।
 
-#### चरण १: आफ्नो HTML संरचना अपडेट गर्नुहोस्
+#### चरण 1: तपाईंको HTML संरचना अपडेट गर्नुहोस्
 
-पहिले, स्थिर "Balance" खण्डलाई गतिशील प्लेसहोल्डर तत्वहरूसँग बदल्नुहोस् जसलाई तपाईंको जाभास्क्रिप्टले भरिदिन सक्छ:
+पहिले, स्थिर "ब्यालेन्स" सेक्सनलाई गतिशील प्लेसहोल्डर तत्वहरूसँग बदल्नुहोस् जसलाई तपाईंको JavaScript ले भरिदिन सक्छ:
 
 ```html
 <section>
@@ -483,21 +634,21 @@ if (data.error) {
 </section>
 ```
 
-अर्को, खाता विवरणको लागि खण्ड थप्नुहोस्। किनभने यो ड्यासबोर्ड सामग्रीको लागि शीर्षकको रूपमा कार्य गर्दछ, सेम्यान्टिक HTML प्रयोग गर्नुहोस्:
+अर्को, खाता विवरणको लागि एउटा सेक्सन थप्नुहोस्। किनभने यो ड्यासबोर्ड सामग्रीको लागि शीर्षकको रूपमा कार्य गर्दछ, सेम्यान्टिक HTML प्रयोग गर्नुहोस्:
 
 ```html
 <h2 id="description"></h2>
 ```
 
-**HTML संरचनाको बुझाइ:**
-- **अलग `<span>` तत्वहरू प्रयोग गर्दछ** ब्यालेन्स र मुद्रा व्यक्तिगत नियन्त्रणको लागि
-- **प्रत्येक तत्वलाई लक्षित गर्न** अनौठो IDs लागू गर्दछ
-- **सेम्यान्टिक HTML अनुसरण गर्दछ** खाता विवरणको लागि `<h2>` प्रयोग गरेर
-- **स्क्रिन रिडरहरू र SEO को लागि** तार्किक पदानुक्रम सिर्जना गर्दछ
+**HTML संरचनालाई बुझ्दै:**
+- **अलग `<span>` तत्वहरू** ब्यालेन्स र मुद्रा व्यक्तिगत नियन्त्रणको लागि प्रयोग गर्छ
+- **प्रत्येक तत्वमा** JavaScript लक्ष्यको लागि अनौठो ID लागू गर्छ
+- **सेम्यान्टिक HTML** प्रयोग गरेर `<h2>` लाई खाता विवरणको लागि प्रयोग गर्छ
+- **स्क्रिन रिडर र SEO को लागि** तार्किक पदानुक्रम सिर्जना गर्छ
 
-> ✅ **पहुँचयोग्यता जानकारी**: खाता विवरण ड्यासबोर्ड सामग्रीको शीर्षकको रूपमा कार्य गर्दछ, त्यसैले यो सेम्यान्टिक रूपमा शीर्षकको रूपमा चिन्हित गरिएको छ। [शीर्षक संरचना](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) पहुँचयोग्यतामा कसरी प्रभाव पार्छ भन्ने बारे थप जान्नुहोस्। तपाईं आफ्नो पृष्ठमा अन्य तत्वहरू पहिचान गर्न सक्नुहुन्छ जसले शीर्षक ट्यागहरूबाट फाइदा लिन सक्छ?
+> ✅ **पहुँचयोग्यता जानकारी**: खाता विवरण ड्यासबोर्ड सामग्रीको शीर्षकको रूपमा कार्य गर्दछ, त्यसैले यसलाई सेम्यान्टिक रूपमा शीर्षकको रूपमा चिन्हित गरिएको छ। [शीर्षक संरचना](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) पहुँचयोग्यतामा कसरी प्रभाव पार्छ भन्ने बारेमा थप जान्नुहोस्। तपाईंको पृष्ठमा अन्य तत्वहरू पहिचान गर्न सक्नुहुन्छ जसले शीर्षक ट्यागहरूबाट लाभ उठाउन सक्छ?
 
-#### चरण २: ड्यासबोर्ड अपडेट कार्य सिर्जना गर्नुहोस्
+#### चरण 2: ड्यासबोर्ड अपडेट कार्य सिर्जना गर्नुहोस्
 
 अब एउटा कार्य सिर्जना गर्नुहोस् जसले वास्तविक खाता डेटा प्रयोग गरेर तपाईंको ड्यासबोर्डलाई भरिदिन्छ:
 
@@ -514,19 +665,19 @@ function updateDashboard() {
 ```
 
 **चरणबद्ध रूपमा, यो कार्यले के गर्छ:**
-- **पुष्टि गर्दछ** कि खाता डेटा अवस्थित छ
-- **अप्रमाणित प्रयोगकर्ताहरूलाई** लगइन पृष्ठमा पुनःनिर्देशित गर्दछ
-- **पुन: प्रयोग गर्न मिल्ने `updateElement` कार्य प्रयोग गरेर** खाता विवरण अपडेट गर्दछ
-- **ब्यालेन्सलाई सधैं दुई दशमलव स्थानहरू देखाउनको लागि** ढाँचा बनाउँछ
-- **उपयुक्त मुद्रा चिन्ह देखाउँछ**
+- **खाता डेटा छ कि छैन भेरिफाई गर्छ** अघि बढ्नु अघि
+- **अप्रमाणित प्रयोगकर्ताहरूलाई लगइन पृष्ठमा पुन: निर्देशित गर्छ**
+- **पुन: प्रयोगयोग्य `updateElement` कार्य प्रयोग गरेर खाता विवरण अपडेट गर्छ**
+- **ब्यालेन्सलाई सधैं दुई दशमलव स्थान देखाउन ढाँचा बनाउँछ**
+- **उपयुक्त मुद्रा प्रतीक देखाउँछ**
 
-> 💰 **पैसा ढाँचा बनाउने**: त्यो [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) विधि जीवन बचाउने हो! यसले तपाईंको ब्यालेन्सलाई सधैं वास्तविक पैसाको जस्तो देखिन्छ - "75.00" को सट्टा केवल "75"। तपाईंका प्रयोगकर्ताहरूले परिचित मुद्रा ढाँचा देखेर प्रशंसा गर्नेछन्।
+> 💰 **पैसा ढाँसिङ**: त्यो [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) विधि जीवन बचाउने हो! यसले तपाईंको ब्यालेन्सलाई सधैं वास्तविक पैसाजस्तै देखाउँछ - "75.00" सट्टा केवल "75"। तपाईंका प्रयोगकर्ताहरूले परिचित मुद्रा ढाँसिङ देख्न सराहना गर्नेछन्।
 
-#### चरण ३: सुनिश्चित गर्नुहोस् तपाईंको ड्यासबोर्ड अपडेट हुन्छ
+#### चरण 3: तपाईंको ड्यासबोर्ड अपडेट सुनिश्चित गर्नुहोस्
 
-तपाईंको ड्यासबोर्डले प्रत्येक पटक कसैले यसलाई भ्रमण गर्दा वर्तमान डेटा संग ताजा हुन्छ भनेर सुनिश्चित गर्न, हामीले तपाईंको नेभिगेसन प्रणालीमा हुक गर्न आवश्यक छ। यदि तपाईंले [पाठ १ असाइनमेन्ट](../1-template-route/assignment.md) पूरा गर्नुभएको छ भने, यो परिचित महसुस हुनुपर्छ। यदि छैन भने, चिन्ता नगर्नुहोस् - यहाँ तपाईंलाई चाहिने कुरा छ:
+तपाईंको ड्यासबोर्डले प्रत्येक पटक कसैले यसलाई भ्रमण गर्दा वर्तमान डेटा देखाउन सुनिश्चित गर्न, हामीले तपाईंको नेभिगेसन प्रणालीमा हुक गर्न आवश्यक छ। यदि तपाईंले [पाठ 1 असाइनमेन्ट](../1-template-route/assignment.md) पूरा गर्नुभएको छ भने, यो परिचित महसुस हुनुपर्छ। यदि छैन भने, चिन्ता नगर्नुहोस् - यहाँ तपाईंलाई चाहिने कुरा छ:
 
-यो तपाईंको `updateRoute()` कार्यको अन्त्यमा थप्नुहोस्:
+तपाईंको `updateRoute()` कार्यको अन्त्यमा यो थप्नुहोस्:
 
 ```javascript
 if (typeof route.init === 'function') {
@@ -534,7 +685,7 @@ if (typeof route.init === 'function') {
 }
 ```
 
-त्यसपछि आफ्नो मार्गहरूलाई ड्यासबोर्ड आरम्भ समावेश गर्न अपडेट गर्नुहोस्:
+त्यसपछि तपाईंको रूटहरूलाई ड्यासबोर्ड इनिसियलाइजेसन समावेश गर्न अपडेट गर्नुहोस्:
 
 ```javascript
 const routes = {
@@ -544,27 +695,45 @@ const routes = {
 ```
 
 **यो चतुर सेटअपले के गर्छ:**
-- जाँच गर्दछ कि कुनै मार्गमा विशेष आरम्भ कोड छ कि छैन
-- त्यो कोड स्वचालित रूपमा मार्ग लोड हुँदा चलाउँछ
-- सुनिश्चित गर्दछ कि तपाईंको ड्यासबोर्डले सधैं ताजा, वर्तमान डेटा देखाउँछ
-- तपाईंको राउटिङ तर्कलाई सफा र व्यवस्थित राख्छ
+- जाँच गर्छ कि रूटमा विशेष इनिसियलाइजेसन कोड छ कि छैन
+- रूट लोड हुँदा स्वतः त्यो कोड चलाउँछ
+- तपाईंको ड्यासबोर्डले सधैं ताजा, वर्तमान डेटा देखाउँछ
+- तपाईंको रूटिङ तर्कलाई सफा र व्यवस्थित राख्छ
 
 #### तपाईंको ड्यासबोर्ड परीक्षण गर्दै
 
-यी परिवर्तनहरू कार्यान्वयन गरेपछि, आफ्नो ड्यासबोर्ड परीक्षण गर्नुहोस्:
+यी परिवर्तनहरू कार्यान्वयन गरेपछि, तपाईंको ड्यासबोर्ड परीक्षण गर्नुहोस्:
 
-1. **लगइन गर्नुहोस्** परीक्षण खाताको साथ
-2. **पुष्टि गर्नुहोस्** कि तपाईं ड्यासबोर्डमा पुनःनिर्देशित हुनुहुन्छ
-3. **जाँच गर्नुहोस्** कि खाता विवरण, ब्यालेन्स, र मुद्रा सही ढंगले देखिन्छ
-4. **लगआउट र पुन: लगइन प्रयास गर्नुहोस्** डेटा सही ढंगले ताजा हुन्छ भनेर सुनिश्चित गर्न
+1. **लगइन गर्नुहोस्** परीक्षण खातासँग
+2. **पुष्टि गर्नुहोस्** तपाईं ड्यासबोर्डमा पुन: निर्देशित हुनुहुन्छ
+3. **जाँच गर्नुहोस्** खाता विवरण, ब्यालेन्स, र मुद्रा सही ढंगले देखिन्छ
+4. **लगआउट र फेरि लगइन प्रयास गर्नुहोस्** डेटा सही ढंगले ताजा हुने सुनिश्चित गर्न
 
-तपाईंको ड्यासबोर्डले अब गतिशील खाता जानकारी देखाउनु पर्छ जुन लगइन प्रयोगकर्ताको डेटा अनुसार अपडेट हुन्छ!
+तपाईंको ड्यासबोर्डले अब गतिशील खाता जानकारी देखाउनु पर्छ जुन लगइन गरिएको प्रयोगकर्ताको डेटा अनुसार अपडेट हुन्छ!
 
-## टेम्प्लेटहरूको साथ स्मार्ट लेनदेन सूचीहरू निर्माण गर्दै
+## टेम्प्लेटहरूसँग स्मार्ट लेनदेन सूचीहरू निर्माण गर्दै
 
-प्रत्येक लेनदेनको लागि म्यानुअल रूपमा HTML सिर्जना गर्ने सट्टा, हामी स्वचालित रूपमा सुसंगत ढाँचा सिर्जना गर्न टेम्प्लेटहरू प्रयोग गर्नेछौं। अन्तरिक्ष यान निर्माणमा प्रयोग गरिएका मानकीकृत घटकहरू जस्तै, टेम्प्लेटहरूले प्रत्येक लेनदेन पङ्क्तिले समान संरचना र उपस्थिति पालना सुनिश्चित गर्दछ।
+प्रत्येक लेनदेनको लागि म्यानुअल रूपमा HTML सिर्जना गर्नुको सट्टा, हामी टेम्प्लेटहरू प्रयोग गरेर स्वतः सुसंगत ढाँसिङ सिर्जना गर्नेछौं। अन्तरिक्ष यान निर्माणमा प्रयोग गरिएका मानकीकृत कम्पोनेन्टहरू जस्तै, टेम्प्लेटहरूले सुनिश्चित गर्छ कि प्रत्येक लेनदेन पङ्क्तिले समान संरचना र स्वरूप अनुसरण गर्छ।
 
-यो प्रविधि केही लेनदेनहरूदेखि हजारौंसम्म कुशलतापूर्वक स्केल हुन्छ, सुसंगत प्रदर्शन र प्रस्तुति कायम राख्दै।
+यो प्रविधि केही लेनदेनदेखि हजारौंसम्म कुशलतापूर्वक स्केल हुन्छ, सुसंगत प्रदर्शन र प्रस्तुति कायम राख्दै।
+
+```mermaid
+graph LR
+    A[HTML Template] --> B[JavaScript Clone]
+    B --> C[Populate with Data]
+    C --> D[Add to Fragment]
+    D --> E[Batch Insert to DOM]
+    
+    subgraph "Performance Benefits"
+        F[Single DOM Update]
+        G[Consistent Formatting]
+        H[Reusable Pattern]
+    end
+    
+    E --> F
+    E --> G
+    E --> H
+```
 
 ```mermaid
 flowchart LR
@@ -575,9 +744,9 @@ flowchart LR
     E --> F[Repeat for Each Transaction]
 ```
 
-### चरण १: लेनदेन टेम्प्लेट सिर्जना गर्नुहोस्
+### चरण 1: लेनदेन टेम्प्लेट सिर्जना गर्नुहोस्
 
-पहिले, आफ्नो HTML `<body>` मा लेनदेन पङ्क्तिहरूको लागि पुन: प्रयोग गर्न मिल्ने टेम्प्लेट थप्नुहोस्:
+पहिले, तपाईंको HTML `<body>` मा लेनदेन पङ्क्तिहरूको लागि पुन: प्रयोगयोग्य टेम्प्लेट थप्नुहोस्:
 
 ```html
 <template id="transaction">
@@ -589,105 +758,151 @@ flowchart LR
 </template>
 ```
 
-**HTML टेम्प्लेटहरूको बुझाइ:**
-- **एकल तालिका पङ्क्तिको संरचना परिभाषित गर्दछ**
-- **जाभास्क्रिप्टले क्लोन गरेर भरिदिनु अघि अदृश्य रहन्छ**
-- **मिति, विवरण, र रकमको लागि तीन कक्षहरू समावेश गर्दछ**
-- **सुसंगत ढाँचाको लागि पुन: प्रयोग गर्न मिल्ने ढाँचा प्रदान गर्दछ**
+**HTML टेम्प्लेटहरू बुझ्दै:**
+- **एकल टेबल पङ्क्तिको संरचना परिभाषित गर्छ**
+- **क्लोन गरिएर JavaScript द्वारा जनसंख्या गरिनु अघि अदृश्य रहन्छ**
+- **मिति, विवरण, र रकमको लागि तीन कोषहरू समावेश गर्छ**
+- **सुसंगत ढाँसिङको लागि पुन: प्रयोगयोग्य ढाँचा प्रदान गर्छ**
 
-### चरण २: गतिशील सामग्रीको लागि आफ्नो तालिका तयार गर्नुहोस्
+### चरण 2: गतिशील सामग्रीको लागि तपाईंको टेबल तयार गर्नुहोस्
 
-अर्को, आफ्नो तालिका शरीरमा `id` थप्नुहोस् ताकि जाभास्क्रिप्टले यसलाई सजिलै लक्षित गर्न सकून्:
+अर्को, तपाईंको टेबल बडीमा `id` थप्नुहोस् ताकि JavaScript सजिलै लक्ष्य गर्न सकून्:
 
 ```html
 <tbody id="transactions"></tbody>
 ```
 
-**यसले के पूरा गर्छ:**
-- **लेनदेन पङ्क्तिहरू सम्मिलित गर्न स्पष्ट लक्ष्य सिर्जना गर्दछ**
-- **तालिका संरचनालाई गतिशील सामग्रीबाट अलग गर्दछ**
-- **लेनदेन डेटा सजिलै सफा र पुनः भरिदिन सक्षम बनाउँछ**
+**यसले के हासिल गर्छ:**
+- **लेनदेन पङ
+> ⚡ **प्रदर्शन सुधार**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) बोइङको असेंब्ली प्रक्रियाजस्तै काम गर्छ - मुख्य लाइन बाहिर कम्पोनेन्टहरू तयार गरिन्छ, त्यसपछि पूर्ण इकाईको रूपमा स्थापना गरिन्छ। यो ब्याचिङ दृष्टिकोणले धेरै व्यक्तिगत अपरेशनको सट्टा एकल सम्मिलन गरेर DOM पुनः प्रवाहलाई न्यूनतम बनाउँछ।
 
-### चरण ३: लेनदेन पङ्क्ति निर्माण कार्य बनाउनुहोस्
+### चरण ५: मिश्रित सामग्रीको लागि अपडेट फङ्सन सुधार गर्नुहोस्
 
-अब एउटा कार्य सिर्जना गर्नुहोस् जसले लेनदेन डेटा लाई HTML तत्वहरूमा रूपान्तरण गर्दछ:
+तपाईंको `updateElement()` फङ्सन हाल केवल पाठ सामग्रीलाई मात्र ह्यान्डल गर्छ। यसलाई पाठ र DOM नोड्स दुवैसँग काम गर्न अद्यावधिक गर्नुहोस्:
 
 ```javascript
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
 }
 ```
 
-**यस निर्माण कार्यको विश्लेषण:**
-- **टेम्प्लेट तत्वलाई यसको ID द्वारा पुनःप्राप्त गर्दछ**
-- **सुरक्षित हेरफेरको लागि टेम्प्लेट सामग्री क्लोन गर्दछ**
-- **क्लोन गरिएको सामग्री भित्रको तालिका पङ्क्ति चयन गर्दछ**
-- **प्रत्येक कक्षलाई लेनदेन डेटा संग भरिदिन्छ**
-- **रकमलाई सही दशमलव स्थानहरू देखाउन ढाँचा बनाउँछ**
-- **समाप्त पङ्क्ति फिर्ता गर्दछ जुन सम्मिलनको लागि तयार छ**
+**यस अद्यावधिकमा मुख्य सुधारहरू:**
+- **मेट्छ** पुरानो सामग्रीलाई नयाँ सामग्री थप्नुअघि
+- **स्वीकार्छ** पाठ स्ट्रिङहरू वा DOM नोड्सलाई प्यारामिटरको रूपमा
+- **प्रयोग गर्छ** [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) विधि लचिलोताका लागि
+- **पछाडि अनुकूलता कायम राख्छ** हालको पाठ-आधारित प्रयोगसँग
 
-### चरण ४: कुशलतापूर्वक धेरै लेनदेन पङ्क्तिहरू सिर्जना गर्नुहोस्
+### तपाईंको ड्यासबोर्डको परीक्षण ड्राइभ
 
-तपाईंको `updateDashboard()` कार्यमा यो कोड थप्नुहोस् सबै लेनदेनहरू प्रदर्शन गर्न:
+सत्यको क्षणको समय! तपाईंको गतिशील ड्यासबोर्डलाई काममा हेर्नुहोस्:
 
-```javascript
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
-```
+1. `test` खाता प्रयोग गरेर लग इन गर्नुहोस् (यसमा नमूना डाटा तयार छ)
+2. तपाईंको ड्यासबोर्डमा जानुहोस्
+3. सुनिश्चित गर्नुहोस् कि लेनदेन पङ्क्तिहरू सही ढाँचासहित देखिन्छन्
+4. सुनिश्चित गर्नुहोस् कि मिति, विवरणहरू, र रकमहरू सबै राम्रो देखिन्छन्
 
-**यस कुशल विधिको बुझाइ:**
-- **डकुमेन्ट फ्र्यागमेन्ट सिर्जना गर्दछ** ब्याच DOM अपरेसनहरूको लागि
-- **खाता डेटा भित्रका सबै लेनदेनहरूमा पुनरावृत्ति गर्दछ**
-- **निर्माण कार्य प्रयोग गरेर प्रत्येक लेनदेनको लागि पङ्क्ति सिर्जना गर्दछ**
-- **डकुमेन्ट फ्र्यागमेन्टमा सबै पङ्क्तिहरू सङ्कलन गर्दछ**
-- **धेरै व्यक्तिगत सम्मिलनहरूको सट्टा एकल DOM अपडेट प्रदर्शन गर्दछ**
+यदि सबै काम गरिरहेको छ भने, तपाईंले आफ्नो ड्यासबोर्डमा पूर्ण रूपमा कार्यात्मक लेनदेन सूची देख्नुहुनेछ! 🎉
 
-> ⚡ **प्रदर्शन अनुकूलन**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) बोइङको असेंबली प्रक्रियाको जस्तै काम गर्दछ - घटकहरू मुख्य लाइनबाट बाहिर तयार गरिन्छन्, त्यसपछि पूर्ण एकाइको रूपमा स्थापना गरिन्छ। यो ब्याचिङ विधिले धेरै व्यक्तिगत अपरेसनहरूको सट्टा एकल सम्मिलन प्रदर्शन गरेर DOM पुन: प्रवाहलाई न्यूनतम बनाउँछ।
+**तपाईंले के हासिल गर्नुभयो:**
+- कुनै पनि डाटाको मात्रा अनुसार स्केल हुने ड्यासबोर्ड निर्माण गर्नुभयो
+- सुसंगत ढाँचाका लागि पुनः प्रयोग गर्न मिल्ने टेम्प्लेटहरू सिर्जना गर्नुभयो
+- प्रभावकारी DOM हेरफेर प्रविधिहरू कार्यान्वयन गर्नुभयो
+- उत्पादन बैंकिङ अनुप्रयोगहरूसँग तुलनायोग्य कार्यक्षमता विकास गर्नुभयो
 
-### चरण ५: मिश्रित सामग्रीको लागि अपडेट कार्य सुधार गर्नुहोस्
+तपाईंले स्थिर वेबपेजलाई गतिशील वेब अनुप्रयोगमा रूपान्तरण गर्न सफल हुनुभयो।
 
-तपाईंको `updateElement()` कार्य हाल केवल पाठ सामग्रीलाई ह्यान्डल गर्दछ। यसलाई पाठ र DOM नोडहरू दुवैसँग काम गर्न सुधार गर्नुहोस्:
+### 🎯 शैक्षिक जाँच: गतिशील सामग्री उत्पादन
 
-```javascript
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
-  element.append(textOrNode);
-}
+**आर्किटेक्चर बुझाइ**: तपाईंले React, Vue, र Angular जस्ता फ्रेमवर्कहरूमा प्रयोग गरिने ढाँचाहरू प्रतिबिम्बित गर्ने परिष्कृत डाटा-देखि-UI पाइपलाइन कार्यान्वयन गर्नुभयो।
+
+**मुख्य अवधारणाहरूमा महारत हासिल गरियो**:
+- **टेम्प्लेट-आधारित रेंडरिङ**: पुनः प्रयोग गर्न मिल्ने UI कम्पोनेन्टहरू सिर्जना गर्नु
+- **डकुमेन्ट फ्र्यागमेन्टहरू**: DOM प्रदर्शनलाई अनुकूल बनाउनु
+- **सुरक्षित DOM हेरफेर**: सुरक्षा कमजोरीहरू रोक्नु
+- **डाटा रूपान्तरण**: सर्भर डाटालाई प्रयोगकर्ता इन्टरफेसमा रूपान्तरण गर्नु
+
+**उद्योगसँगको सम्बन्ध**: यी प्रविधिहरू आधुनिक फ्रन्टएन्ड फ्रेमवर्कहरूको आधार बनाउँछन्। React को भर्चुअल DOM, Vue को टेम्प्लेट प्रणाली, र Angular को कम्पोनेन्ट आर्किटेक्चर सबै यी मुख्य अवधारणाहरूमा आधारित छन्।
+
+**प्रतिबिम्ब प्रश्न**: तपाईंले वास्तविक-समय अपडेटहरू (जस्तै नयाँ लेनदेनहरू स्वचालित रूपमा देखिने) ह्यान्डल गर्न यो प्रणालीलाई कसरी विस्तार गर्नुहुन्छ? WebSockets वा Server-Sent Events विचार गर्नुहोस्।
+
+---
+
+## 📈 तपाईंको डाटा व्यवस्थापन महारतको समयरेखा
+
+```mermaid
+timeline
+    title Data-Driven Development Journey
+    
+    section Foundation Building
+        API Setup & Testing
+            : Understand client-server communication
+            : Master HTTP request/response cycle
+            : Learn debugging techniques
+    
+    section Authentication Mastery
+        Async Function Patterns
+            : Write clean async/await code
+            : Handle promises effectively
+            : Implement error boundaries
+        User Session Management
+            : Create global state patterns
+            : Build navigation guards
+            : Design user feedback systems
+    
+    section Dynamic UI Development
+        Safe DOM Manipulation
+            : Prevent XSS vulnerabilities
+            : Use textContent over innerHTML
+            : Create accessibility-friendly interfaces
+        Template Systems
+            : Build reusable UI components
+            : Optimize performance with fragments
+            : Scale to handle large datasets
+    
+    section Professional Patterns
+        Production-Ready Code
+            : Implement comprehensive error handling
+            : Follow security best practices
+            : Create maintainable architectures
+        Modern Web Standards
+            : Master Fetch API patterns
+            : Understand CORS configurations
+            : Build responsive, accessible UIs
 ```
 
-**यस अपडेटमा मुख्य सुधारहरू:**
-- **नयाँ सामग्री थप्नु अघि** अवस्थित सामग्री सफा गर्दछ
-- **पाठ स्ट्रिङहरू वा DOM नोडहरूलाई** प्यारामिटरको रूपमा स्वीकार गर्दछ
-- **लचिलोताका लागि [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) विधि प्रयोग गर्दछ**
-- **अव
-**प्रॉम्प्ट:** बैंकिङ एपको लागि खोजी सुविधा बनाउनुहोस् जसमा समावेश छन्: १) मिति दायरा (देखि/सम्म), न्यूनतम/अधिकतम रकम, र लेनदेन विवरण कुञ्जीशब्दहरूको लागि इनपुट क्षेत्रहरू भएको खोजी फारम, २) `filterTransactions()` नामक एक फङ्सन जसले खोजी मापदण्डको आधारमा account.transactions एरेलाई फिल्टर गर्छ, ३) `updateDashboard()` फङ्सनलाई फिल्टर गरिएको नतिजा देखाउन अद्यावधिक गर्नुहोस्, र ४) "क्लियर फिल्टर्स" बटन थप्नुहोस् जसले दृश्यलाई रिसेट गर्छ। आधुनिक JavaScript एरे मेथडहरू जस्तै `filter()` प्रयोग गर्नुहोस् र खाली खोजी मापदण्डको लागि किनारा केसहरू ह्यान्डल गर्नुहोस्।
+**🎓 स्नातक माइलस्टोन**: तपाईंले आधुनिक जाभास्क्रिप्ट ढाँचाहरू प्रयोग गरेर पूर्ण डाटा-आधारित वेब अनुप्रयोग सफलतापूर्वक निर्माण गर्नुभयो। यी सीपहरू React, Vue, वा Angular जस्ता फ्रेमवर्कहरूसँग काम गर्न सीधा अनुवाद हुन्छन्।
+
+**🔄 अर्को स्तरको क्षमता**:
+- यी अवधारणाहरूमा निर्माण गर्ने फ्रन्टएन्ड फ्रेमवर्कहरू अन्वेषण गर्न तयार
+- WebSockets सँग वास्तविक-समय सुविधाहरू कार्यान्वयन गर्न तयार
+- अफलाइन क्षमताहरूको साथ प्रोग्रेसिभ वेब अनुप्रयोगहरू निर्माण गर्न तयार
+- उन्नत राज्य व्यवस्थापन ढाँचाहरू सिक्नको लागि आधार सेट
+
+## GitHub Copilot Agent Challenge 🚀
+
+Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
+
+**विवरण:** बैंकिङ एपलाई लेनदेन खोजी र फिल्टर सुविधा कार्यान्वयन गरेर सुधार गर्नुहोस् जसले प्रयोगकर्ताहरूलाई मिति दायरा, रकम, वा विवरणको आधारमा विशिष्ट लेनदेनहरू फेला पार्न अनुमति दिन्छ।
+
+**प्रेरणा:** बैंकिङ एपको लागि खोजी कार्यक्षमता सिर्जना गर्नुहोस् जसमा समावेश छ: १) मिति दायरा (देखि/सम्म), न्यूनतम/अधिकतम रकम, र लेनदेन विवरण कुञ्जीशब्दहरूको लागि इनपुट क्षेत्रहरू भएको खोजी फारम, २) `filterTransactions()` फङ्सन जसले account.transactions एर्रेलाई खोजी मापदण्डको आधारमा फिल्टर गर्छ, ३) `updateDashboard()` फङ्सनलाई अद्यावधिक गर्नुहोस् ताकि फिल्टर गरिएको परिणाम देखाउन सकियोस्, र ४) "Clear Filters" बटन थप्नुहोस् दृश्यलाई रिसेट गर्न। आधुनिक जाभास्क्रिप्ट एर्रे विधिहरू जस्तै `filter()` प्रयोग गर्नुहोस् र खाली खोजी मापदण्डको लागि किनाराका केसहरू ह्यान्डल गर्नुहोस्।
 
-[एजेन्ट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
 
 ## 🚀 चुनौती
 
 तपाईंको बैंकिङ एपलाई अर्को स्तरमा लैजान तयार हुनुहुन्छ? यसलाई वास्तवमै प्रयोग गर्न चाहिने जस्तो देखिने र महसुस गराउने बनाऔं। यहाँ तपाईंको सिर्जनशीलतालाई प्रेरित गर्न केही विचारहरू छन्:
 
-**यसलाई सुन्दर बनाउनुहोस्**: CSS स्टाइलिङ थपेर तपाईंको कार्यात्मक ड्यासबोर्डलाई दृश्यात्मक रूपमा आकर्षक बनाउनुहोस्। सफा रेखाहरू, राम्रो स्पेसिङ, र सायद केही सूक्ष्म एनिमेसनहरूको बारेमा सोच्नुहोस्।
+**यसलाई सुन्दर बनाउनुहोस्**: CSS स्टाइलिङ थपेर तपाईंको कार्यात्मक ड्यासबोर्डलाई दृश्यात्मक रूपमा आकर्षक बनाउनुहोस्। सफा रेखाहरू, राम्रो स्पेसिङ, र सायद केही सूक्ष्म एनिमेसनहरू सोच्नुहोस्।
 
-**यसलाई उत्तरदायी बनाउनुहोस्**: [मिडिया क्वेरीहरू](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) प्रयोग गरेर फोन, ट्याब्लेट, र डेस्कटपमा राम्रोसँग काम गर्ने [उत्तरदायी डिजाइन](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) बनाउन प्रयास गर्नुहोस्। तपाईंका प्रयोगकर्ताहरूले तपाईंलाई धन्यवाद दिनेछन्!
+**यसलाई उत्तरदायी बनाउनुहोस्**: [मिडिया क्वेरीहरू](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) प्रयोग गरेर [उत्तरदायी डिजाइन](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) सिर्जना गर्ने प्रयास गर्नुहोस् जसले फोन, ट्याब्लेट, र डेस्कटपमा राम्रो काम गर्छ। तपाईंका प्रयोगकर्ताहरूले धन्यवाद दिनेछन्!
 
-**थप आकर्षण थप्नुहोस्**: लेनदेनहरूलाई रंग-कोडिङ गर्ने विचार गर्नुहोस् (आम्दानीको लागि हरियो, खर्चको लागि रातो), आइकनहरू थप्ने, वा इन्टरफेसलाई अन्तरक्रियात्मक महसुस गराउने हभर प्रभावहरू सिर्जना गर्ने।
+**थप आकर्षण थप्नुहोस्**: लेनदेनहरूलाई रंग-कोडिङ गर्ने विचार गर्नुहोस् (आम्दानीको लागि हरियो, खर्चको लागि रातो), आइकनहरू थप्ने, वा होभर प्रभावहरू सिर्जना गर्ने जसले इन्टरफेसलाई अन्तरक्रियात्मक महसुस गराउँछ।
 
-यहाँ एक परिष्कृत ड्यासबोर्ड कस्तो देखिन सक्छ भन्ने उदाहरण छ:
+यहाँ स्टाइलिङ पछि ड्यासबोर्डको उदाहरण परिणाम कस्तो देखिन्छ:
 
-![स्टाइलिङ पछि ड्यासबोर्डको उदाहरण परिणामको स्क्रिनशट](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ne.png)
+![ड्यासबोर्डको स्टाइलिङ पछि उदाहरण परिणामको स्क्रिनसट](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ne.png)
 
 यसलाई ठ्याक्कै मेल गर्नुपर्छ भन्ने महसुस नगर्नुहोस् - यसलाई प्रेरणाको रूपमा प्रयोग गर्नुहोस् र यसलाई आफ्नो बनाउनुहोस्!
 
@@ -697,7 +912,7 @@ function updateElement(id, textOrNode) {
 
 ## असाइनमेन्ट
 
-[तपाईंको कोडलाई पुनःसंरचना गर्नुहोस् र टिप्पणी थप्नुहोस्](assignment.md)
+[तपाईंको कोडलाई पुनः संरचना र टिप्पणी गर्नुहोस्](assignment.md)
 
 ---
 
diff --git a/translations/ne/7-bank-project/4-state-management/README.md b/translations/ne/7-bank-project/4-state-management/README.md
index 4326949a22..991b2a3875 100644
--- a/translations/ne/7-bank-project/4-state-management/README.md
+++ b/translations/ne/7-bank-project/4-state-management/README.md
@@ -1,42 +1,94 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "32bd800759c3e943c38ad9ae6e1f51e0",
-  "translation_date": "2025-10-22T17:01:56+00:00",
+  "original_hash": "b807b09df716dc48a2b750835bf8e933",
+  "translation_date": "2025-11-03T15:38:04+00:00",
   "source_file": "7-bank-project/4-state-management/README.md",
   "language_code": "ne"
 }
 -->
 # बैंकिङ एप निर्माण भाग ४: स्टेट म्यानेजमेन्टको अवधारणा
 
+## ⚡ अर्को ५ मिनेटमा तपाईंले के गर्न सक्नुहुन्छ
+
+**व्यस्त डेभलपरहरूको लागि छिटो सुरु गर्ने मार्ग**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Diagnose state issues]
+    B --> C[Create central state object]
+    C --> D[Add updateState function]
+    D --> E[See immediate improvements]
+```
+
+- **मिनेट १**: हालको स्टेट समस्या परीक्षण गर्नुहोस् - लगइन गर्नुहोस्, पेज रिफ्रेस गर्नुहोस्, लगआउट हेर्नुहोस्
+- **मिनेट २**: `let account = null` लाई `let state = { account: null }` मा परिवर्तन गर्नुहोस्
+- **मिनेट ३**: नियन्त्रित अपडेटको लागि सरल `updateState()` फङ्सन बनाउनुहोस्
+- **मिनेट ४**: नयाँ ढाँचाको प्रयोग गर्न एउटा फङ्सन अपडेट गर्नुहोस्
+- **मिनेट ५**: सुधारिएको पूर्वानुमानयोग्यता र डिबगिङ क्षमता परीक्षण गर्नुहोस्
+
+**छिटो डायग्नोस्टिक परीक्षण**:
+```javascript
+// Before: Scattered state
+let account = null; // Lost on refresh!
+
+// After: Centralized state
+let state = Object.freeze({ account: null }); // Controlled and trackable!
+```
+
+**किन यो महत्त्वपूर्ण छ**: ५ मिनेटमा, तपाईंले अराजक स्टेट म्यानेजमेन्टबाट पूर्वानुमानयोग्य, डिबग गर्न मिल्ने ढाँचामा रूपान्तरण अनुभव गर्नुहुनेछ। यो जटिल एप्लिकेसनलाई मर्मतयोग्य बनाउने आधार हो।
+
+## 🗺️ स्टेट म्यानेजमेन्टको मास्टरीको माध्यमबाट तपाईंको सिकाइ यात्रा
+
+```mermaid
+journey
+    title From Scattered State to Professional Architecture
+    section Diagnosing Problems
+      Identify state loss issues: 3: You
+      Understand scattered updates: 4: You
+      Recognize architecture needs: 6: You
+    section Centralizing Control
+      Create unified state object: 5: You
+      Implement controlled updates: 7: You
+      Add immutable patterns: 8: You
+    section Adding Persistence
+      Implement localStorage: 6: You
+      Handle serialization: 7: You
+      Create session continuity: 9: You
+    section Balancing Freshness
+      Address data staleness: 5: You
+      Build refresh systems: 8: You
+      Achieve optimal balance: 9: You
+```
+
+**तपाईंको यात्रा गन्तव्य**: यो पाठको अन्त्यसम्ममा, तपाईंले स्थायित्व, डेटा ताजगी, र पूर्वानुमानयोग्य अपडेटहरू ह्यान्डल गर्ने व्यावसायिक स्तरको स्टेट म्यानेजमेन्ट प्रणाली निर्माण गर्नुभएको हुनेछ - उत्पादन एप्लिकेसनहरूमा प्रयोग गरिने समान ढाँचाहरू।
+
 ## प्रि-लेक्चर क्विज
 
 [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/47)
 
 ## परिचय
 
-स्टेट म्यानेजमेन्टलाई Voyager अन्तरिक्ष यानको नेभिगेसन प्रणालीसँग तुलना गर्न सकिन्छ – जब सबै कुरा ठीकसँग काम गरिरहेको हुन्छ, तपाईंलाई यसको अस्तित्वको महसुस पनि हुँदैन। तर जब समस्या आउँछ, यो अन्तरिक्षको शून्यमा हराउने र अन्तरिक्षको सीमा पुग्ने बीचको फरक बनिन्छ। वेब विकासमा, स्टेटले तपाईंको एप्लिकेशनले सम्झनुपर्ने सबै कुरा प्रतिनिधित्व गर्दछ: प्रयोगकर्ता लगइन स्थिति, फारम डेटा, नेभिगेसन इतिहास, र अस्थायी इन्टरफेस स्टेटहरू।
+स्टेट म्यानेजमेन्ट Voyager अन्तरिक्ष यानको नेभिगेसन प्रणाली जस्तै हो – जब सबै कुरा सहज रूपमा काम गरिरहेको हुन्छ, तपाईंले यसको उपस्थिति महसुस पनि गर्नुहुन्न। तर जब समस्या आउँछ, यो अन्तरिक्षको गहिराइमा हराउने र अन्तरतारकीय स्थानमा पुग्ने बीचको भिन्नता बनिन्छ। वेब विकासमा, स्टेटले तपाईंको एप्लिकेसनले सम्झनुपर्ने सबै कुरा प्रतिनिधित्व गर्दछ: प्रयोगकर्ता लगइन स्थिति, फारम डेटा, नेभिगेसन इतिहास, र अस्थायी इन्टरफेस अवस्थाहरू।
 
-तपाईंको बैंकिङ एप एक साधारण लगइन फारमबाट एक परिष्कृत एप्लिकेशनमा विकसित हुँदै गर्दा, तपाईंले केही सामान्य चुनौतीहरूको सामना गर्नुभएको हुन सक्छ। पृष्ठ रिफ्रेस गर्दा प्रयोगकर्ताहरू अनपेक्षित रूपमा लगआउट हुन्छन्। ब्राउजर बन्द गर्दा सबै प्रगति हराउँछ। समस्या डिबग गर्दा, तपाईं धेरै फङ्सनहरूमा खोज्दै हुनुहुन्छ जसले एउटै डेटा विभिन्न तरिकामा परिवर्तन गर्छ।
+तपाईंको बैंकिङ एप साधारण लगइन फारमबाट परिष्कृत एप्लिकेसनमा विकसित हुँदै गर्दा, तपाईंले केही सामान्य चुनौतीहरूको सामना गर्नुभएको हुन सक्छ। पेज रिफ्रेस गर्नुहोस् र प्रयोगकर्ताहरू अनपेक्षित रूपमा लगआउट हुन्छन्। ब्राउजर बन्द गर्नुहोस् र सबै प्रगति हराउँछ। समस्या डिबग गर्नुहोस् र तपाईंले एउटै डेटा विभिन्न तरिकामा परिवर्तन गर्ने धेरै फङ्सनहरूमा खोजी गरिरहनुभएको हुन्छ।
 
-यी खराब कोडिङका संकेत होइनन् – यी प्राकृतिक चुनौतीहरू हुन् जुन एप्लिकेशनहरू निश्चित जटिलता स्तरमा पुग्दा देखा पर्छन्। प्रत्येक विकासकर्ताले यी चुनौतीहरूको सामना गर्छन् जब उनीहरूको एप "प्रूफ अफ कन्सेप्ट" बाट "प्रोडक्सन रेडी" मा परिवर्तन हुन्छ।
+यी खराब कोडिङका संकेत होइनन् – यी प्राकृतिक विकासका पीडाहरू हुन् जुन एप्लिकेसनहरू निश्चित जटिलता सीमा पार गर्दा देखा पर्छन्। प्रत्येक डेभलपरले यी चुनौतीहरूको सामना गर्छन् जब तिनीहरूको एप "प्रूफ अफ कन्सेप्ट" बाट "प्रोडक्सन रेडी" मा रूपान्तरण हुन्छ।
 
-यस पाठमा, हामी एक केन्द्रित स्टेट म्यानेजमेन्ट प्रणाली कार्यान्वयन गर्नेछौं जसले तपाईंको बैंकिङ एपलाई एक भरपर्दो, व्यावसायिक एप्लिकेशनमा रूपान्तरण गर्दछ। तपाईंले डेटा प्रवाहलाई पूर्वानुमान योग्य बनाउने, प्रयोगकर्ता सत्रहरू उपयुक्त रूपमा कायम राख्ने, र आधुनिक वेब एप्लिकेशनले आवश्यक पर्ने सहज प्रयोगकर्ता अनुभव सिर्जना गर्न सिक्नुहुनेछ।
+यस पाठमा, हामी एक केन्द्रीयकृत स्टेट म्यानेजमेन्ट प्रणाली कार्यान्वयन गर्नेछौं जसले तपाईंको बैंकिङ एपलाई भरपर्दो, व्यावसायिक एप्लिकेसनमा रूपान्तरण गर्दछ। तपाईंले डेटा प्रवाहलाई पूर्वानुमानयोग्य रूपमा व्यवस्थापन गर्न, प्रयोगकर्ता सत्रहरू उपयुक्त रूपमा स्थायी बनाउन, र आधुनिक वेब एप्लिकेसनले आवश्यक पर्ने सहज प्रयोगकर्ता अनुभव सिर्जना गर्न सिक्नुहुनेछ।
 
 ## पूर्वापेक्षाहरू
 
-स्टेट म्यानेजमेन्ट अवधारणाहरूमा डुबुल्की मार्नुअघि, तपाईंले आफ्नो विकास वातावरण ठीकसँग सेटअप गर्नुपर्नेछ र आफ्नो बैंकिङ एपको आधार तयार गर्नुपर्नेछ। यो पाठ यस श्रृंखलाका अघिल्ला भागहरूका अवधारणाहरू र कोडमा सीधा निर्माण गर्दछ।
-
-पाठ अघि निम्न कम्पोनेन्टहरू तयार गर्नुहोस्:
+स्टेट म्यानेजमेन्ट अवधारणाहरूमा डुब्नु अघि, तपाईंको विकास वातावरण ठीकसँग सेटअप गरिएको छ र तपाईंको बैंकिङ एपको आधार तयार छ भन्ने सुनिश्चित गर्नुहोस्। यो पाठ यस श्रृंखलाको अघिल्लो भागहरूबाट अवधारणाहरू र कोडमा सीधा निर्माण गर्दछ।
 
 **आवश्यक सेटअप:**
-- [डेटा फेचिङ पाठ](../3-data/README.md) पूरा गर्नुहोस् - तपाईंको एपले खाता डेटा सफलतापूर्वक लोड र प्रदर्शन गर्नुपर्छ
-- [Node.js](https://nodejs.org) आफ्नो प्रणालीमा स्थापना गर्नुहोस् ब्याकएन्ड API चलाउन
-- खाता डेटा अपरेशनहरू ह्यान्डल गर्न [सर्भर API](../api/README.md) स्थानीय रूपमा सुरु गर्नुहोस्
+- [डेटा फेचिङ पाठ](../3-data/README.md) पूरा गर्नुहोस् - तपाईंको एपले सफलतापूर्वक खाता डेटा लोड र प्रदर्शन गर्नुपर्छ
+- [Node.js](https://nodejs.org) तपाईंको प्रणालीमा स्थापना गर्नुहोस् ब्याकएन्ड API चलाउनको लागि
+- खाता डेटा अपरेसनहरू ह्यान्डल गर्न [सर्भर API](../api/README.md) स्थानीय रूपमा सुरु गर्नुहोस्
 
-**आफ्नो वातावरण परीक्षण गर्नुहोस्:**
+**तपाईंको वातावरण परीक्षण गर्नुहोस्:**
 
-तपाईंको API सर्भर सही रूपमा चलिरहेको छ भनेर यो कमाण्ड टर्मिनलमा चलाएर पुष्टि गर्नुहोस्:
+तपाईंको API सर्भर सही रूपमा चलिरहेको छ भनी यो कमाण्ड टर्मिनलमा कार्यान्वयन गरेर पुष्टि गर्नुहोस्:
 
 ```sh
 curl http://localhost:5000/api
@@ -45,66 +97,138 @@ curl http://localhost:5000/api
 
 **यो कमाण्डले के गर्छ:**
 - **GET अनुरोध पठाउँछ** तपाईंको स्थानीय API सर्भरमा
-- **कनेक्शन परीक्षण गर्छ** र सर्भर प्रतिक्रिया दिइरहेको छ भनी पुष्टि गर्छ
+- **जाँच गर्छ** कनेक्शन र सर्भर प्रतिक्रिया दिइरहेको छ भनी पुष्टि गर्छ
 - **API संस्करण जानकारी फर्काउँछ** यदि सबै ठीक छ भने
 
+## 🧠 स्टेट म्यानेजमेन्ट आर्किटेक्चरको अवलोकन
+
+```mermaid
+mindmap
+  root((State Management))
+    Current Problems
+      Session Loss
+        Page Refresh Issues
+        Browser Close Impact
+        Variable Reset Problems
+      Scattered Updates
+        Multiple Modification Points
+        Debugging Challenges
+        Unpredictable Behavior
+      Incomplete Cleanup
+        Logout State Issues
+        Memory Leaks
+        Security Concerns
+    Centralized Solutions
+      Unified State Object
+        Single Source of Truth
+        Predictable Structure
+        Scalable Foundation
+      Controlled Updates
+        Immutable Patterns
+        Object.freeze Usage
+        Function-Based Changes
+      State Tracking
+        History Management
+        Debug Visibility
+        Change Auditing
+    Persistence Strategies
+      localStorage Integration
+        Session Continuity
+        JSON Serialization
+        Automatic Sync
+      Data Freshness
+        Server Refresh
+        Stale Data Handling
+        Balance Optimization
+      Storage Optimization
+        Minimal Data
+        Performance Focus
+        Security Considerations
+```
+
+**मुख्य सिद्धान्त**: व्यावसायिक स्टेट म्यानेजमेन्टले पूर्वानुमानयोग्यता, स्थायित्व, र प्रदर्शनलाई सन्तुलनमा राख्छ जसले सरल अन्तरक्रियाबाट जटिल एप्लिकेसन वर्कफ्लोमा स्केल हुने भरपर्दो प्रयोगकर्ता अनुभव सिर्जना गर्दछ।
+
 ---
 
 ## हालको स्टेट समस्याहरूको निदान
 
-जस्तै Sherlock Holmes अपराध स्थलको जाँच गर्दैछ, हामीले हाम्रो हालको कार्यान्वयनमा के भइरहेको छ भनेर ठीकसँग बुझ्न आवश्यक छ ताकि प्रयोगकर्ता सत्र हराउने रहस्य समाधान गर्न सकियोस्।
-
-हामी एउटा साधारण प्रयोग गर्नेछौं जसले आधारभूत स्टेट म्यानेजमेन्ट चुनौतीहरू प्रकट गर्दछ:
+जस्तै Sherlock Holmes अपराध स्थलको जाँच गर्दैछ, हामीले हाम्रो हालको कार्यान्वयनमा के भइरहेको छ भन्ने कुरा ठीकसँग बुझ्न आवश्यक छ ताकि हराउने प्रयोगकर्ता सत्रहरूको रहस्य समाधान गर्न सकियोस्।
 
 **🧪 यो डायग्नोस्टिक परीक्षण प्रयास गर्नुहोस्:**
-1. आफ्नो बैंकिङ एपमा लगइन गर्नुहोस् र ड्यासबोर्डमा जानुहोस्
-2. ब्राउजर पृष्ठ रिफ्रेस गर्नुहोस्
-3. आफ्नो लगइन स्थिति के हुन्छ हेर्नुहोस्
+1. तपाईंको बैंकिङ एपमा लगइन गर्नुहोस् र ड्यासबोर्डमा नेभिगेट गर्नुहोस्
+2. ब्राउजर पेज रिफ्रेस गर्नुहोस्
+3. तपाईंको लगइन स्थिति के हुन्छ हेर्नुहोस्
 
-यदि तपाईंलाई पुन: लगइन स्क्रिनमा पुनःनिर्देशित गरिन्छ भने, तपाईंले क्लासिक स्टेट पर्सिस्टेन्स समस्याको खोजी गर्नुभएको छ। यो व्यवहार हुन्छ किनकि हाम्रो हालको कार्यान्वयनले प्रयोगकर्ता डेटा JavaScript भेरिएबलहरूमा भण्डारण गर्छ जुन प्रत्येक पृष्ठ लोडसँग रिसेट हुन्छ।
+यदि तपाईंलाई पुन: लगइन स्क्रिनमा पुनर्निर्देशित गरिएको छ भने, तपाईंले क्लासिक स्टेट स्थायित्व समस्याको खोजी गर्नुभएको छ। यो व्यवहार हाम्रो हालको कार्यान्वयनले प्रयोगकर्ता डेटा JavaScript भेरिएबलहरूमा भण्डारण गर्ने कारणले हुन्छ, जुन प्रत्येक पेज लोडसँग रिसेट हुन्छ।
 
 **हालको कार्यान्वयन समस्याहरू:**
 
-हाम्रो [अघिल्लो पाठ](../3-data/README.md) बाट साधारण `account` भेरिएबलले तीन प्रमुख समस्याहरू सिर्जना गर्दछ जसले प्रयोगकर्ता अनुभव र कोड मर्मतयोग्यतालाई असर गर्छ:
+हाम्रो [अघिल्लो पाठ](../3-data/README.md) बाट साधारण `account` भेरिएबलले प्रयोगकर्ता अनुभव र कोड मर्मतयोग्यतामा असर गर्ने तीन महत्त्वपूर्ण समस्याहरू सिर्जना गर्दछ:
 
-| समस्या | प्राविधिक कारण | प्रयोगकर्तामा प्रभाव |
+| समस्या | प्राविधिक कारण | प्रयोगकर्ता प्रभाव |
 |---------|--------|----------------|
-| **सत्र हराउने** | पृष्ठ रिफ्रेस गर्दा JavaScript भेरिएबलहरू मेटिन्छन् | प्रयोगकर्ताहरूलाई बारम्बार पुन: प्रमाणित गर्नुपर्छ |
-| **छरिएको अपडेटहरू** | धेरै फङ्सनहरूले स्टेटलाई सिधै परिवर्तन गर्छन् | डिबग गर्न गाह्रो हुन्छ |
-| **अधुरो सफाइ** | लगआउट गर्दा सबै स्टेट सन्दर्भहरू मेटिँदैनन् | सम्भावित सुरक्षा र गोपनीयता चिन्ता |
+| **सत्र हराउने** | पेज रिफ्रेसले JavaScript भेरिएबलहरू मेट्छ | प्रयोगकर्ताहरूलाई बारम्बार पुन: प्रमाणित गर्नुपर्छ |
+| **छरिएको अपडेटहरू** | धेरै फङ्सनहरूले स्टेटलाई प्रत्यक्ष रूपमा परिवर्तन गर्छन् | डिबगिङ झन् कठिन बन्छ |
+| **अधूरो सफाइ** | लगआउटले सबै स्टेट सन्दर्भहरू मेट्दैन | सम्भावित सुरक्षा र गोपनीयता चिन्ताहरू |
 
 **आर्किटेक्चरल चुनौती:**
 
-जस्तै Titanic को कम्पार्टमेन्टलाइज्ड डिजाइन बलियो देखिन्थ्यो तर धेरै कम्पार्टमेन्टहरू एकसाथ बाढी हुँदा कमजोर भयो, यी समस्याहरूलाई व्यक्तिगत रूपमा समाधान गर्दा आधारभूत आर्किटेक्चरल समस्यालाई सम्बोधन गर्दैन। हामीलाई एक व्यापक स्टेट म्यानेजमेन्ट समाधान चाहिन्छ।
-
-> 💡 **हामी यहाँ के हासिल गर्न खोज्दैछौं?**
-
-[स्टेट म्यानेजमेन्ट](https://en.wikipedia.org/wiki/State_management) वास्तवमा दुई आधारभूत पहेलाहरू समाधान गर्ने बारे हो:
-
-1. **मेरो डेटा कहाँ छ?**: हामीसँग के जानकारी छ र यो कहाँबाट आएको छ भनेर ट्र्याक राख्ने
-2. **सबैजना एउटै पृष्ठमा छन्?**: सुनिश्चित गर्ने कि प्रयोगकर्ताहरूले देखेको कुरा वास्तवमा भइरहेको कुरासँग मेल खाउँछ
-
-**हाम्रो योजना:**
-
-हामी हाम्रो टाउको घुमाउने सट्टा, एक **केन्द्रित स्टेट म्यानेजमेन्ट** प्रणाली सिर्जना गर्नेछौं। यसलाई सबै महत्त्वपूर्ण कुराहरूको जिम्मा लिने एकदमै व्यवस्थित व्यक्तिको रूपमा सोच्नुहोस्:
-
-![HTML, प्रयोगकर्ता क्रियाकलाप र स्टेट बीचको डेटा प्रवाह देखाउने स्कीमा](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ne.png)
+जस्तै Titanic को कम्पार्टमेन्टलाइज्ड डिजाइनले धेरै कम्पार्टमेन्टहरू एकसाथ बाढी हुँदा कमजोर देखायो, यी समस्याहरूलाई व्यक्तिगत रूपमा समाधान गर्दा अन्तर्निहित आर्किटेक्चरल समस्यालाई सम्बोधन गर्दैन। हामीलाई व्यापक स्टेट म्यानेजमेन्ट समाधान आवश्यक छ।
+
+> 💡 **हामी यहाँ के हासिल गर्न खोजिरहेका छौं?**
+
+[स्टेट म्यानेजमेन्ट](https://en.wikipedia.org/wiki/State_management) वास्तवमा दुई मौलिक पहेलीहरू समाधान गर्ने बारेमा हो:
+
+1. **मेरो डेटा कहाँ छ?**: हामीसँग के जानकारी छ र यो कहाँबाट आइरहेको छ भन्ने ट्र्याक राख्नु
+2. **सबैजना एउटै पृष्ठमा छन्?**: प्रयोगकर्ताहरूले देखेको कुरा वास्तवमा के भइरहेको छ भन्ने कुरासँग मेल खाने सुनिश्चित गर्नु
+
+**हाम्रो खेल योजना:**
+
+हामी हाम्रो टाउको घुमाउने सट्टा, **केन्द्रीयकृत स्टेट म्यानेजमेन्ट** प्रणाली सिर्जना गर्नेछौं। यसलाई सबै महत्त्वपूर्ण कुराहरूको जिम्मामा एकदमै व्यवस्थित व्यक्तिको रूपमा सोच्नुहोस्:
+
+![HTML, प्रयोगकर्ता कार्यहरू र स्टेट बीचको डेटा प्रवाह देखाउने स्किमा](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ne.png)
+
+```mermaid
+flowchart TD
+    A[User Action] --> B[Event Handler]
+    B --> C[updateState Function]
+    C --> D{State Validation}
+    D -->|Valid| E[Create New State]
+    D -->|Invalid| F[Error Handling]
+    E --> G[Object.freeze]
+    G --> H[Update localStorage]
+    H --> I[Trigger UI Update]
+    I --> J[User Sees Changes]
+    F --> K[User Sees Error]
+    
+    subgraph "State Management Layer"
+        C
+        E
+        G
+    end
+    
+    subgraph "Persistence Layer"
+        H
+        L[localStorage]
+        H -.-> L
+    end
+```
 
-**यस डेटा प्रवाहलाई बुझ्दै:**
-- **केन्द्रित बनाउँछ** सबै एप्लिकेशन स्टेटलाई एक स्थानमा
-- **मार्गनिर्देशन गर्छ** सबै स्टेट परिवर्तनहरू नियन्त्रित फङ्सनहरू मार्फत
-- **सुनिश्चित गर्छ** कि UI हालको स्टेटसँग समक्रमित रहन्छ
-- **स्पष्ट, पूर्वानुमान योग्य ढाँचा प्रदान गर्छ** डेटा म्यानेजमेन्टका लागि
+**यो डेटा प्रवाह बुझ्दै:**
+- **केन्द्रीयकृत** सबै एप्लिकेसन स्टेटलाई एक स्थानमा
+- **मार्गनिर्देशन** सबै स्टेट परिवर्तनहरू नियन्त्रित फङ्सनहरू मार्फत
+- **सुनिश्चित** UI हालको स्टेटसँग समक्रमित रहन्छ
+- **प्रदान** डेटा म्यानेजमेन्टको लागि स्पष्ट, पूर्वानुमानयोग्य ढाँचा
 
-> 💡 **व्यावसायिक दृष्टिकोण**: यो पाठ आधारभूत अवधारणाहरूमा केन्द्रित छ। जटिल एप्लिकेशनहरूको लागि, [Redux](https://redux.js.org) जस्ता लाइब्रेरीहरूले थप उन्नत स्टेट म्यानेजमेन्ट सुविधाहरू प्रदान गर्छ। यी कोर सिद्धान्तहरू बुझ्दा तपाईं कुनै पनि स्टेट म्यानेजमेन्ट लाइब्रेरीमा महारत हासिल गर्न सक्नुहुन्छ।
+> 💡 **व्यावसायिक अन्तर्दृष्टि**: यो पाठ मौलिक अवधारणाहरूमा केन्द्रित छ। जटिल एप्लिकेसनहरूको लागि, [Redux](https://redux.js.org) जस्ता लाइब्रेरीहरूले थप उन्नत स्टेट म्यानेजमेन्ट सुविधाहरू प्रदान गर्छन्। यी मुख्य सिद्धान्तहरू बुझ्नाले तपाईंलाई कुनै पनि स्टेट म्यानेजमेन्ट लाइब्रेरीमा मास्टर बनाउँछ।
 
-> ⚠️ **उन्नत विषय**: हामी स्टेट परिवर्तनहरूद्वारा ट्रिगर गरिएका स्वचालित UI अपडेटहरू कभर गर्ने छैनौं, किनकि यसमा [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming) अवधारणाहरू समावेश छन्। यो तपाईंको सिकाइ यात्राको लागि उत्कृष्ट अर्को चरण मान्न सकिन्छ!
+> ⚠️ **उन्नत विषय**: हामी स्टेट परिवर्तनहरूले ट्रिगर गर्ने स्वचालित UI अपडेटहरू कभर गर्ने छैनौं, किनकि यसमा [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming) अवधारणाहरू समावेश छन्। यो तपाईंको सिकाइ यात्राको लागि उत्कृष्ट अर्को चरण मान्नुहोस्!
 
-### कार्य: स्टेट संरचना केन्द्रित गर्नुहोस्
+### कार्य: स्टेट संरचना केन्द्रीयकरण गर्नुहोस्
 
-हामी हाम्रो छरिएको स्टेट म्यानेजमेन्टलाई केन्द्रित प्रणालीमा रूपान्तरण गर्न सुरु गरौं। यो पहिलो चरणले सबै सुधारहरूको आधार स्थापना गर्दछ।
+हामी हाम्रो छरिएको स्टेट म्यानेजमेन्टलाई केन्द्रीयकृत प्रणालीमा रूपान्तरण गर्न सुरु गरौं। यो पहिलो चरणले सबै सुधारहरूको लागि आधार स्थापना गर्दछ।
 
-**चरण १: केन्द्रित स्टेट वस्तु सिर्जना गर्नुहोस्**
+**चरण १: केन्द्रीय स्टेट वस्तु सिर्जना गर्नुहोस्**
 
 साधारण `account` घोषणा प्रतिस्थापन गर्नुहोस्:
 
@@ -120,13 +244,13 @@ let state = {
 };
 ```
 
-**यो परिवर्तन किन महत्त्वपूर्ण छ:**
-- **केन्द्रित बनाउँछ** सबै एप्लिकेशन डेटा एक स्थानमा
-- **तयार गर्छ** संरचना थप स्टेट गुणहरू थप्नका लागि
-- **स्पष्ट सीमा सिर्जना गर्छ** स्टेट र अन्य भेरिएबलहरू बीच
-- **ढाँचा स्थापना गर्छ** जसले तपाईंको एप बढ्दै जाँदा स्केल गर्छ
+**किन यो परिवर्तन महत्त्वपूर्ण छ:**
+- **केन्द्रीयकृत** सबै एप्लिकेसन डेटा एक स्थानमा
+- **तयार** संरचना पछि थप स्टेट गुणहरू थप्न
+- **स्पष्ट सीमा सिर्जना गर्नुहोस्** स्टेट र अन्य भेरिएबलहरू बीच
+- **ढाँचा स्थापना गर्नुहोस्** जसले तपाईंको एप बढ्दै जाँदा स्केल गर्दछ
 
-**चरण २: स्टेट पहुँच ढाँचा अपडेट गर्नुहोस्**
+**चरण २: स्टेट पहुँच ढाँचाहरू अपडेट गर्नुहोस्**
 
 तपाईंको फङ्सनहरूलाई नयाँ स्टेट संरचना प्रयोग गर्न अपडेट गर्नुहोस्:
 
@@ -145,36 +269,49 @@ state.account = ...
 const account = state.account;
 ```
 
-**यी अपडेटहरूले के हासिल गर्छ:**
-- **अस्तित्वमा रहेको कार्यक्षमता कायम राख्छ** जबकि संरचना सुधार गर्छ
-- **तयार गर्छ** तपाईंको कोडलाई थप परिष्कृत स्टेट म्यानेजमेन्टका लागि
-- **स्टेट डेटा पहुँच गर्नको लागि स्थिर ढाँचा सिर्जना गर्छ
-- **केन्द्रित स्टेट अपडेटहरूको आधार स्थापना गर्छ
+**यी अपडेटहरूले के हासिल गर्छन्:**
+- **अवस्थित कार्यक्षमता कायम राख्छ** जबकि संरचना सुधार गर्दछ
+- **तयार गर्दछ** तपाईंको कोडलाई थप परिष्कृत स्टेट म्यानेजमेन्टको लागि
+- **सुसंगत ढाँचाहरू सिर्जना गर्दछ** स्टेट डेटा पहुँच गर्न
+- **केन्द्रीयकृत स्टेट अपडेटहरूको लागि आधार स्थापना गर्दछ**
+
+> 💡 **नोट**: यो पुन: संरचनाले तुरुन्तै हाम्रो समस्याहरू समाधान गर्दैन, तर यो शक्तिशाली सुधारहरूको लागि आवश्यक आधार सिर्जना गर्दछ!
+
+### 🎯 शैक्षिक जाँच: केन्द्रीयकरण सिद्धान्तहरू
+
+**रोक्नुहोस् र विचार गर्नुहोस्**: तपाईंले केन्द्रीयकृत स्टेट म्यानेजमेन्टको आधार कार्यान्वयन गर्नुभएको छ। यो एक महत्त्वपूर्ण आर्किटेक्चरल निर्णय हो।
 
-> 💡 **नोट**: यो पुन: संरचना तुरुन्तै हाम्रो समस्याहरू समाधान गर्दैन, तर यो शक्तिशाली सुधारहरूको लागि आवश्यक आधार सिर्जना गर्छ!
+**छिटो आत्म-मूल्याङ्कन**:
+- के तपाईं व्याख्या गर्न सक्नुहुन्छ किन स्टेटलाई एक वस्तुमा केन्द्रीयकृत गर्नु छरिएका भेरिएबलहरू भन्दा राम्रो हो?
+- के हुन्छ यदि तपाईंले `state.account` प्रयोग गर्न फङ्सन अपडेट गर्न बिर्सनुभयो भने?
+- यो ढाँचाले तपाईंको कोडलाई थप उन्नत सुविधाहरूको लागि कसरी तयार गर्दछ?
+
+**वास्तविक संसारको जडान**: तपाईंले सिक्नुभएको केन्द्रीयकरण ढाँचा आधुनिक फ्रेमवर्कहरू जस्तै Redux, Vuex, र React Context को आधार हो। तपाईंले प्रमुख एप्लिकेसनहरूमा प्रयोग गरिने समान आर्किटेक्चरल सोच निर्माण गर्दै हुनुहुन्छ।
+
+**चुनौती प्रश्न**: यदि तपाईंले आफ्नो एपमा प्रयोगकर्ता प्राथमिकताहरू (थिम, भाषा) थप्न आवश्यक छ भने, तपाईंले तिनीहरूलाई स्टेट संरचनामा कहाँ थप्नुहुन्छ? यो कसरी स्केल हुन्छ?
 
 ## नियन्त्रित स्टेट अपडेटहरू कार्यान्वयन गर्दै
 
-हाम्रो स्टेट केन्द्रित भएपछि, अर्को चरणले डेटा परिमार्जनका लागि नियन्त्रित संयन्त्रहरू स्थापना गर्न समावेश गर्दछ। यो दृष्टिकोणले पूर्वानुमान योग्य स्टेट परिवर्तनहरू र सजिलो डिबग सुनिश्चित गर्दछ।
+हाम्रो स्टेट केन्द्रीयकृत भएपछि, अर्को चरणले डेटा परिमार्जनहरूको लागि नियन्त्रित संयन्त्रहरू स्थापना गर्न समावेश गर्दछ। यो दृष्टिकोणले पूर्वानुमानयोग्य स्टेट परिवर्तनहरू र सजिलो डिबगिङ सुनिश्चित गर्दछ।
 
-मुख्य सिद्धान्त एयर ट्राफिक कन्ट्रोलसँग मिल्दोजुल्दो छ: धेरै फङ्सनहरूलाई स्वतन्त्र रूपमा स्टेट परिवर्तन गर्न अनुमति दिनुको सट्टा, हामी सबै परिवर्तनहरू एकल, नियन्त्रित फङ्सन मार्फत च्यानल गर्नेछौं। यस ढाँचाले डेटा परिवर्तन कहिले र कसरी हुन्छ भन्ने स्पष्ट निरीक्षण प्रदान गर्दछ।
+मुख्य सिद्धान्त एयर ट्राफिक कन्ट्रोलसँग मिल्दोजुल्दो छ: धेरै फङ्सनहरूलाई स्वतन्त्र रूपमा स्टेट परिमार्जन गर्न अनुमति दिनुको सट्टा, हामी सबै परिवर्तनहरू एकल, नियन्त्रित फङ्सन मार्फत च्यानल गर्नेछौं। यो ढाँचाले डेटा परिवर्तन कहिले र कसरी हुन्छ भन्ने स्पष्ट निरीक्षण प्रदान गर्दछ।
 
 **इम्युटेबल स्टेट म्यानेजमेन्ट:**
 
-हामी हाम्रो `state` वस्तुलाई [*इम्युटेबल*](https://en.wikipedia.org/wiki/Immutable_object) को रूपमा व्यवहार गर्नेछौं, जसको अर्थ हामी यसलाई सिधै परिवर्तन गर्दैनौं। यसको सट्टा, प्रत्येक परिवर्तनले अपडेट गरिएको डेटा सहित नयाँ स्टेट वस्तु सिर्जना गर्छ।
+हामी हाम्रो `state` वस्तुलाई [*इम्युटेबल*](https://en.wikipedia.org/wiki/Immutable_object) को रूपमा व्यवहार गर्नेछौं, जसको अर्थ हामी यसलाई प्रत्यक्ष रूपमा परिमार्जन गर्दैनौं। यसको सट्टा, प्रत्येक परिवर्तनले अपडेट गरिएको डेटा सहित नयाँ स्टेट वस्तु सिर्जना गर्दछ।
 
-यो दृष्टिकोण प्रत्यक्ष परिमार्जनको तुलनामा सुरुमा अप्रभावी लाग्न सक्छ, तर यसले डिबगिङ, परीक्षण, र एप्लिकेशन पूर्वानुमान योग्यतालाई कायम राख्न महत्त्वपूर्ण फाइदाहरू प्रदान गर्दछ।
+यो दृष्टिकोण प्रत्यक्ष परिमार्जनको तुलनामा सुरुमा अक्षम देखिन सक्छ, तर यसले डिबगिङ, परीक्षण, र एप्लिकेसन पूर्वानुमानयोग्यता कायम राख्नका लागि महत्त्वपूर्ण फाइदाहरू प्रदान गर्दछ।
 
 **इम्युटेबल स्टेट म्यानेजमेन्टका फाइदाहरू:**
 
 | फाइदा | विवरण | प्रभाव |
 |---------|-------------|--------|
-| **पूर्वानुमानयोग्यता** | परिवर्तनहरू केवल नियन्त्रित फङ्सनहरू मार्फत हुन्छन् | डिबग र परीक्षण गर्न सजिलो |
-| **इतिहास ट्र्याकिङ** | प्रत्येक स्टेट परिवर्तनले नयाँ वस्तु सिर्जना गर्छ | Undo/Redo कार्यक्षमता सक्षम गर्छ |
+| **पूर्वानुमानयोग्यता** | परिवर्तनहरू केवल नियन्त्रित फङ्सनहरू मार्फत हुन्छन् | डिबग गर्न र परीक्षण गर्न सजिलो |
+| **इतिहास ट्र्याकिङ** | प्रत्येक स्टेट परिवर्तनले नयाँ वस्तु सिर्जना गर्दछ | Undo/Redo कार्यक्षमता सक्षम गर्दछ |
 | **साइड इफेक्ट रोकथाम** | कुनै अनपेक्षित परिमार्जन हुँदैन | रहस्यमय बगहरू रोक्छ |
-| **प्रदर्शन अनुकूलन** | स्टेट वास्तवमा परिवर्तन भएको छ कि छैन भनेर सजिलै पत्ता लगाउन सकिन्छ | प्रभावकारी UI अपडेट सक्षम गर्छ |
+| **प्रदर्शन अनुकूलन** | स्टेट वास्तवमा परिवर्तन भएको छ भनी पत्ता लगाउन सजिलो | कुशल UI अपडेट सक्षम गर्दछ |
 
-**JavaScript इम्युटेबिलिटी `Object.freeze()` को साथ:**
+**JavaScript इम्युटेबिलिटी `Object.freeze()` प्रयोग गरेर:**
 
 JavaScript ले [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) प्रदान गर्दछ जसले वस्तु परिमार्जन रोक्छ:
 
@@ -186,10 +323,30 @@ const immutableState = Object.freeze({ account: userData });
 **यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
 - **प्रत्यक्ष सम्पत्ति असाइनमेन्ट वा मेटाउने रोक्छ**
 - **परिमार्जन प्रयासहरू गरिएमा अपवादहरू फाल्छ**
-- **स्टेट परिवर्तनहरू नियन्त्रित फङ्सनहरू मार्फत जानुपर्छ भनी सुनिश्चित गर्छ**
-- **स्टेट अपडेट गर्नको लागि स्पष्ट सम्झौता सिर्जना गर्छ**
-
-> 💡 **गहिरो अध्ययन**: [MDN डकुमेन्टेशन](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) मा *शालो* र *डीप* इम्युटेबल वस्तुहरू बीचको भिन्नता बारे जान्नुहोस्। जटिल स्टेट संरचनाहरूका लागि यो भिन्नता बुझ्नु महत्त्वपूर्ण छ।
+- **स्टेट परिवर्तनहरू नियन्त्रित फङ्सनहरू मार्फत जानुपर्छ भनी सुनिश्चित गर्दछ**
+- **स्टेट कसरी अपडेट गर्न सकिन्छ भन्ने स्पष्ट सम्झौता सिर्जना गर्दछ**
+
+> 💡 **गहिरो अध्ययन**: [MDN डकुमेन्टेशन](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) मा *शालो* र *डीप* इम्युटेबल वस्तुहरू बीचको भिन्नता सिक्नुहोस्। जटिल स्टेट संरचनाहरूको लागि यो भिन्नता बुझ्नु महत्त्वपूर्ण छ।
+
+```mermaid
+stateDiagram-v2
+    [*] --> StateV1: Initial State
+    StateV1 --> StateV2: updateState('account', newData)
+    StateV2 --> StateV3: updateState('account', anotherUpdate)
+    StateV3 --> StateV4: updateState('preferences', userSettings)
+    
+    note right of StateV1
+        Object.freeze()
+        Immutable
+        Debuggable
+    end note
+    
+    note right of StateV2
+        New object created
+        Previous state preserved
+        Predictable changes
+    end note
+```
 
 ### कार्य
 
@@ -204,9 +361,9 @@ function updateState(property, newData) {
 }
 ```
 
-यस फङ्सनमा, हामी नयाँ स्टेट वस्तु सिर्जना गर्दैछौं र [*स्प्रेड (`...`) अपरेटर*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) प्रयोग गरेर अघिल्लो स्टेटबाट डेटा प्रतिलिपि गर्दैछौं। त्यसपछि हामी स्टेट वस्तुको विशेष सम्पत्तिलाई नयाँ डेटा प्रयोग गरेर [ब्र्याकेट नोटेशन](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` प्रयोग गरेर ओभरराइड गर्छौं। अन्तमा, हामी `Object.freeze()` प्रयोग गरेर वस्तु लक गर्छौं ताकि परिमार्जन रोक्न सकियोस्। अहिले हामीसँग `account` सम्पत्ति मात्र स्टेटमा भण्डारण गरिएको छ, तर यस दृष्टिकोणले तपाईंलाई स्टेटमा आवश्यक जति सम्पत्तिहरू थप्न अनुमति दिन्छ।
+यस फङ्सनमा, हामी नयाँ स्टेट वस्तु सिर्जना गर्दैछौं र [*स्प्रेड (`...`) अपरेटर*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) प्रयोग गरेर अघिल्लो स्टेटबाट डेटा प्रतिलिपि गर्दैछौं। त्यसपछि हामी [ब्र्याकेट नोटेशन](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` प्रयोग गरेर स्टेट वस्तुको विशेष सम्पत्तिलाई नयाँ डेटा सहित ओभरराइड गर्दैछौं। अन्तमा, हामी `Object.freeze()` प्रयोग गरेर वस्तु लक गर्दैछौं ताकि परिमार्जन रोक्न सकियोस्। अहिले हामीसँग स्टेटमा `account` सम्पत्ति मात्र भण्डारण गरिएको छ, तर यस दृष्टिकोणले तपाईंलाई स्टेटमा आवश्यक जति सम्पत्तिहरू थप्न अनुमति दिन्छ।
 
-हामी `state` आरम्भलाई पनि अपडेट गर्नेछौं ताकि प्रारम्भिक स्टेट पनि फ्रिज गरिएको हो भनी सुनिश्चित गर्न सकियोस्:
+हामीले स्टेटको सुरुवातलाई सुनिश्चित गर्न `state` इनिसियलाइजेसन पनि अपडेट गर्नेछौं:
 
 ```js
 let state = Object.freeze({
@@ -220,69 +377,82 @@ let state = Object.freeze({
 updateState('account', result);
 ```
 
-`login` फङ्सनमा पनि त्यस्तै गर्नुहोस्, `state.account = data;` लाई प्रतिस्थापन गरेर:
+`login` फङ्सनमा पनि त्यस्तै गर्नुहोस्, `state.account = data;` लाई प्रतिस्थापन गर्दै:
 
 ```js
 updateState('account', data);
 ```
 
-हामी अब प्रयोगकर्ताले *Logout* क्लिक गर्दा खाता डेटा मेटिने समस्या समाधान गर्ने मौका लिनेछौं।
-
-नयाँ `logout()` फङ्सन सिर्जना गर्नुहोस्:
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-`updateDashboard()` मा, `return navigate('/login');` पुन:निर्देशनलाई `return logout();` सँग प्रतिस्थापन गर्नुहोस्।
-
-नयाँ खाता दर्ता गर्ने, लगआउट गर्ने र फेरि लगइन गर्ने प्रयास गर्नुहोस् ताकि सबै कुरा अझै सही रूपमा काम गरिरहेको छ भनी जाँच गर्न सकियोस्।
+अब हामीले प्रयोगकर्ताले *Logout* क्लिक गर्दा खाता डेटा मेटिने समस्या समाधान गर्ने मौका लिनेछौं।
 
-> टिप: तपाईंले सबै स्टेट परिवर्तनहरू हेर्न `updateState()` को तल `console.log(state)` थप्न सक्नुहुन्छ र आफ्नो ब्राउजरको विकास उपकरणमा कन्सोल खोल्न सक्नुहुन्छ।
 
-## डेटा पर्सिस्टेन्स कार्यान्वयन गर्दै
+| **कति समयसम्म यो कायम रहनुपर्छ?** | लगइन अवस्था बनाम अस्थायी UI प्राथमिकताहरू | उपयुक्त भण्डारण अवधि चयन गर्नुहोस् |
+| **सर्भरलाई यसको आवश्यकता छ?** | प्रमाणिकरण टोकन बनाम UI सेटिङहरू | साझेदारी आवश्यकताहरू निर्धारण गर्नुहोस् |
 
-हामीले पहिचान गरेको सत्र हराउने समस्याले ब्राउजर सत्रहरूमा प्रयोगकर्ता स्टेट कायम राख्ने पर्सिस्टेन्स समाधान आवश्यक छ। यसले हाम्रो एप्लिकेशनलाई अस्थायी अनुभवबाट एक भरपर्दो, व्यावसायिक उपकरणमा रूपान्तरण गर्दछ।
+**ब्राउजर भण्डारण विकल्पहरू:**
 
-जस्तै परमाणु घडीहरूले पावर आउटेजको माध्यमबाट पनि सटीक समय कायम राख्छन्, महत्त्वपूर्ण स्टेटलाई गैर-वोलाटाइल मेमोरीमा भण्डारण गरेर, वेब एप्लिकेशनहरूले ब्राउजर सत्रहरू र पृष्ठ रिफ्रेसहरूमा आवश्यक प्रयोगकर्ता डेटा कायम राख्न पर्सिस्टेन्ट स्टोरेज संयन्त्रहरू आवश्यक छ।
+आधुनिक ब्राउजरहरूले विभिन्न उपयोगका लागि डिजाइन गरिएका धेरै भण्डारण संयन्त्रहरू प्रदान गर्छन्:
 
-**डेटा पर्सिस्टेन्सका लागि रणनीतिक प्रश्नहरू:**
+**प्रमुख भण्डारण APIs:**
 
-पर्सिस्टेन्स कार्यान्वयन गर्नु अघि, यी महत्त्वपूर्ण कारकहरू विचार गर्नुहोस्:
+1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: स्थायी [Key/Value storage](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
+   - **डाटा** ब्राउजर सत्रहरूमा अनिश्चितकालसम्म कायम रहन्छ  
+   - **ब्राउजर पुनःसुरु** र कम्प्युटर पुनःसुरु भए पनि बचाइन्छ
+   - **विशिष्ट वेबसाइट डोमेनमा सीमित** छ
+   - **उपयुक्त** प्रयोगकर्ता प्राथमिकता र लगइन अवस्थाका लागि
 
-| प्रश्न | बैंकिङ एप सन्दर्भ | निर्णय प्रभाव |
-|----------|-------------------|----------------|
-| **डेटा संवेदनशील छ?** | खाता ब्यालेन्स, लेनदेन इतिहास | सुरक्षित भण्डारण विधिहरू चयन गर्नुहोस् |
-| **कति समयसम्म यो कायम रहनुपर्छ?** | लगइन स्थिति बनाम अस्थायी UI प्राथमिकताहरू | उपयुक्त भण्डारण अवधि चयन गर्नुहोस् |
-| **सर्भरलाई यो चाहिन्छ?** | प्रमाणिकरण टोकन बनाम UI सेटिङहरू | साझेदारी आवश्यकताहरू निर्धारण गर्नुहोस् |
+2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: अस्थायी सत्र भण्डारण
+   - **localStorage जस्तै** सक्रिय सत्रहरूमा काम गर्छ
+   - **स्वतः मेटिन्छ** जब ब्राउजर ट्याब बन्द हुन्छ
+   - **अस्थायी डाटाका लागि उपयुक्त** जुन कायम रहनु हुँदैन
 
-**ब्राउजर स्टोरेज विकल्पहरू:**
+3. **[HTTP Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: सर्भर-साझा भण्डारण
+   - **प्रत्येक सर्भर अनुरोधसँग स्वचालित रूपमा पठाइन्छ**
+   - **प्रमाणिकरण टोकनका लागि उपयुक्त**
+   - **आकारमा सीमित** र प्रदर्शनमा प्रभाव पार्न सक्छ
 
-आधुनिक ब्राउजरहरूले विभिन्न उपयोगका लागि डिजाइन गरिएका धेरै स्टोरेज संयन्त्रहरू प्रदान गर्छन्:
+**डाटा सिरियलाइजेसन आवश्यकता:**
 
-**प्राथमिक स्टोरेज APIहरू:**
+`localStorage` र `sessionStorage` ले मात्र [strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) भण्डारण गर्छ:
 
-1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: स्थायी [Key/Value स्टोरेज](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
-   - **स्थायी बनाउँछ** डेटा ब्राउजर सत्रहरूमा अनिश्चितकालसम्म  
-   - **ब्राउजर पुनःसुरु र कम्प्युटर पुनःसुरुमा पनि टिक्छ**
-   - **विशिष्ट वेबसाइट डोमेनमा सीमित**
-   - **लगइन स्थिति र प्रयोगकर्ता प्राथमिकताहरूका लागि उपयुक्त**
+```js
+// Convert objects to JSON strings for storage
+const accountData = { user: 'john', balance: 150 };
+localStorage.setItem('account', JSON.stringify(accountData));
 
-2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: अस्थायी सत्र स्टोरेज
-   - **localStorage जस्तै कार्य गर्दछ** सक्रिय सत्रहरूमा
-   - **स्वचालित रूपमा मेटिन्छ** जब ब्राउजर ट्याब बन्द हुन्छ
-   - **अस्थायी डेटा जसले टिक्नुपर्दैनका लागि आदर्श**
+// Parse JSON strings back to objects when retrieving
+const savedAccount = JSON.parse(localStorage.getItem('account'));
+```
 
-3. **[HTTP Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: सर्भर-साझा स्टोरेज
-   - **स्वचालित रूपमा पठाइन्छ** प्रत्येक सर्भ
-> 💡 **उन्नत विकल्प**: ठूला डेटासेटसहित जटिल अफलाइन एप्लिकेसनहरूको लागि, [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) प्रयोग गर्न विचार गर्नुहोस्। यसले पूर्ण क्लाइन्ट-साइड डाटाबेस प्रदान गर्दछ तर थप जटिल कार्यान्वयन आवश्यक छ।
+**सिरियलाइजेसन बुझ्दै:**
+- **JavaScript वस्तुहरूलाई JSON स्ट्रिङमा रूपान्तरण गर्छ** [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) प्रयोग गरेर
+- **JSON बाट वस्तुहरू पुनःनिर्माण गर्छ** [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) प्रयोग गरेर
+- **जटिल नेस्टेड वस्तुहरू र एरेहरू स्वचालित रूपमा ह्यान्डल गर्छ**
+- **फङ्सनहरू, undefined मानहरू, र सर्कुलर रेफरेन्सहरूमा असफल हुन्छ**
+
+> 💡 **उन्नत विकल्प**: ठूला डाटासेटसहित जटिल अफलाइन एप्लिकेसनहरूको लागि, [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) विचार गर्नुहोस्। यसले पूर्ण क्लाइन्ट-साइड डाटाबेस प्रदान गर्छ तर थप जटिल कार्यान्वयन आवश्यक छ।
+
+```mermaid
+quadrantChart
+    title Browser Storage Options
+    x-axis Low Complexity --> High Complexity
+    y-axis Short Duration --> Long Duration
+    
+    quadrant-1 Professional Tools
+    quadrant-2 Simple Persistence
+    quadrant-3 Temporary Storage
+    quadrant-4 Advanced Systems
+    
+    localStorage: [0.3, 0.8]
+    sessionStorage: [0.2, 0.2]
+    HTTP Cookies: [0.6, 0.7]
+    IndexedDB: [0.9, 0.9]
+    Memory Variables: [0.1, 0.1]
+```
 
-### कार्य: `localStorage` Persistence लागू गर्नुहोस्
+### कार्य: localStorage स्थायित्व कार्यान्वयन गर्नुहोस्
 
-हामी स्थायी भण्डारण लागू गर्नेछौं ताकि प्रयोगकर्ताहरू स्पष्ट रूपमा लगआउट नगरेसम्म लगइन रहन सकून्। ब्राउजर सत्रहरूमा खाता डेटा भण्डारण गर्न `localStorage` प्रयोग गरिनेछ।
+हामी स्थायी भण्डारण कार्यान्वयन गर्नेछौं ताकि प्रयोगकर्ताहरू स्पष्ट रूपमा लगआउट नगरेसम्म लगइन रहन सकून्। हामी `localStorage` प्रयोग गरेर ब्राउजर सत्रहरूमा खाता डाटा भण्डारण गर्नेछौं।
 
 **चरण १: भण्डारण कन्फिगरेसन परिभाषित गर्नुहोस्**
 
@@ -290,13 +460,13 @@ function logout() {
 const storageKey = 'savedAccount';
 ```
 
-**यस स्थिरांकले के प्रदान गर्छ:**
-- हाम्रो भण्डारण गरिएको डेटा लागि एक सुसंगत पहिचानकर्ता **सिर्जना** गर्छ
-- भण्डारण कुञ्जी सन्दर्भहरूमा टाइपोहरू **रोक्छ**
-- आवश्यक परे भण्डारण कुञ्जी परिवर्तन गर्न **सजिलो बनाउँछ**
-- मर्मतयोग्य कोडको लागि उत्तम अभ्यासहरू **अनुसरण** गर्छ
+**यो स्थिरांकले के प्रदान गर्छ:**
+- **हाम्रो भण्डारण डाटाका लागि एक सुसंगत पहिचानकर्ता सिर्जना गर्छ**
+- **भण्डारण कुञ्जी सन्दर्भहरूमा टाइपो रोक्छ**
+- **भण्डारण कुञ्जी परिवर्तन गर्न सजिलो बनाउँछ**
+- **रखरखावयोग्य कोडका लागि उत्तम अभ्यासहरू अनुसरण गर्छ**
 
-**चरण २: स्वचालित Persistence थप्नुहोस्**
+**चरण २: स्वचालित स्थायित्व थप्नुहोस्**
 
 `updateState()` फङ्सनको अन्त्यमा यो लाइन थप्नुहोस्:
 
@@ -304,17 +474,17 @@ const storageKey = 'savedAccount';
 localStorage.setItem(storageKey, JSON.stringify(state.account));
 ```
 
-**यहाँ के हुन्छ भन्ने व्याख्या:**
-- खाता वस्तुलाई JSON स्ट्रिङमा **रूपान्तरण** गरेर भण्डारणको लागि तयार गर्छ
-- हाम्रो सुसंगत भण्डारण कुञ्जी प्रयोग गरेर डेटा **सुरक्षित** गर्छ
-- **स्वचालित रूपमा कार्यान्वयन** हुन्छ जब राज्य परिवर्तन हुन्छ
-- **सुनिश्चित** गर्छ कि भण्डारण गरिएको डेटा सधैं वर्तमान राज्यसँग समकालिक छ
+**यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
+- **खाता वस्तुलाई JSON स्ट्रिङमा रूपान्तरण गर्छ भण्डारणका लागि**
+- **हाम्रो सुसंगत भण्डारण कुञ्जी प्रयोग गरेर डाटा बचाउँछ**
+- **राज्य परिवर्तनहरू हुने बित्तिकै स्वचालित रूपमा कार्यान्वयन गर्छ**
+- **भण्डारण गरिएको डाटा हालको राज्यसँग सधैं समक्रमण सुनिश्चित गर्छ**
 
-> 💡 **आर्किटेक्चर लाभ**: किनकि हामीले सबै राज्य अपडेटहरू `updateState()` मार्फत केन्द्रित गरेका छौं, Persistence थप्न केवल एक लाइन कोड आवश्यक थियो। यसले राम्रो आर्किटेक्चरल निर्णयको शक्ति देखाउँछ!
+> 💡 **आर्किटेक्चर लाभ**: किनकि हामीले सबै राज्य अपडेटहरू `updateState()` मार्फत केन्द्रित गरेका छौं, स्थायित्व थप्न केवल एक लाइन कोड आवश्यक थियो। यसले राम्रो आर्किटेक्चरल निर्णयहरूको शक्ति प्रदर्शन गर्छ!
 
-**चरण ३: एप लोडमा राज्य पुनर्स्थापना गर्नुहोस्**
+**चरण ३: एप लोडमा राज्य पुनःस्थापना गर्नुहोस्**
 
-सुरक्षित डेटा पुनर्स्थापना गर्न एक Initialization फङ्सन सिर्जना गर्नुहोस्:
+सुरक्षित डाटा पुनःस्थापना गर्न एक इनिसियलाइजेसन फङ्सन सिर्जना गर्नुहोस्:
 
 ```js
 function init() {
@@ -331,16 +501,16 @@ function init() {
 init();
 ```
 
-**Initialization प्रक्रियाको समझ:**
-- `localStorage` बाट पहिले सुरक्षित गरिएको खाता डेटा **पुनःप्राप्त** गर्छ
-- JSON स्ट्रिङलाई फेरी JavaScript वस्तुमा **पार्स** गर्छ
-- हाम्रो नियन्त्रण गरिएको अपडेट फङ्सन प्रयोग गरेर राज्य **अपडेट** गर्छ
-- पृष्ठ लोडमा प्रयोगकर्ताको सत्र **स्वचालित रूपमा पुनर्स्थापना** गर्छ
-- रुट अपडेटहरू अघि कार्यान्वयन हुन्छ ताकि राज्य उपलब्ध होस्
+**इनिसियलाइजेसन प्रक्रिया बुझ्दै:**
+- **localStorage बाट पहिले बचाइएको खाता डाटा पुनःप्राप्त गर्छ**
+- **JSON स्ट्रिङलाई पुनः JavaScript वस्तुमा पार्स गर्छ**
+- **हाम्रो नियन्त्रण गरिएको अपडेट फङ्सन प्रयोग गरेर राज्य अपडेट गर्छ**
+- **पृष्ठ लोडमा प्रयोगकर्ताको सत्र स्वचालित रूपमा पुनःस्थापना गर्छ**
+- **रूट अपडेटहरू अघि कार्यान्वयन गर्छ ताकि राज्य उपलब्ध होस्**
 
-**चरण ४: डिफल्ट रुटलाई अनुकूलित गर्नुहोस्**
+**चरण ४: डिफल्ट रूटलाई अनुकूलित गर्नुहोस्**
 
-Persistence को फाइदा लिन डिफल्ट रुट अपडेट गर्नुहोस्:
+स्थायित्वको फाइदा लिन डिफल्ट रूट अपडेट गर्नुहोस्:
 
 `updateRoute()` मा, प्रतिस्थापन गर्नुहोस्:
 ```js
@@ -349,31 +519,45 @@ return navigate('/dashboard');
 ```
 
 **किन यो परिवर्तन उपयुक्त छ:**
-- हाम्रो नयाँ Persistence प्रणालीलाई प्रभावकारी रूपमा **प्रयोग** गर्छ
-- ड्यासबोर्डलाई प्रमाणीकरण जाँचहरू **ह्यान्डल** गर्न अनुमति दिन्छ
-- यदि कुनै सुरक्षित सत्र छैन भने स्वचालित रूपमा लगइनमा **पुनर्निर्देशन** गर्छ
-- प्रयोगकर्ताको अनुभवलाई **अझ सहज** बनाउँछ
+- **हाम्रो नयाँ स्थायित्व प्रणालीलाई प्रभावकारी रूपमा उपयोग गर्छ**
+- **ड्यासबोर्डलाई प्रमाणिकरण जाँचहरू ह्यान्डल गर्न अनुमति दिन्छ**
+- **यदि कुनै बचाइएको सत्र छैन भने स्वचालित रूपमा लगइनमा पुनःनिर्देशन गर्छ**
+- **प्रयोगकर्ताको अनुभवलाई थप सहज बनाउँछ**
 
-**तपाईंको कार्यान्वयन परीक्षण गर्नुहोस्:**
+**तपाईंको कार्यान्वयन परीक्षण गर्दै:**
 
 1. आफ्नो बैंकिङ एपमा लगइन गर्नुहोस्
 2. ब्राउजर पृष्ठ रिफ्रेस गर्नुहोस्
-3. सुनिश्चित गर्नुहोस् कि तपाईं ड्यासबोर्डमा लगइन रहनुभएको छ
+3. पुष्टि गर्नुहोस् कि तपाईं ड्यासबोर्डमा लगइन रहनुभएको छ
 4. आफ्नो ब्राउजर बन्द गर्नुहोस् र पुनः खोल्नुहोस्
 5. आफ्नो एपमा फर्केर जानुहोस् र पुष्टि गर्नुहोस् कि तपाईं अझै लगइन हुनुहुन्छ
 
-🎉 **उपलब्धि प्राप्त भयो**: तपाईंले सफलतापूर्वक स्थायी राज्य व्यवस्थापन लागू गर्नुभयो! अब तपाईंको एपले व्यावसायिक वेब एप्लिकेसन जस्तै व्यवहार गर्छ।
+🎉 **उपलब्धि अनलक गरियो**: तपाईंले सफलतापूर्वक स्थायी राज्य व्यवस्थापन कार्यान्वयन गर्नुभएको छ! अब तपाईंको एपले व्यावसायिक वेब एप्लिकेसन जस्तै व्यवहार गर्छ।
+
+### 🎯 शैक्षिक जाँच: स्थायित्व आर्किटेक्चर
+
+**आर्किटेक्चर बुझाइ**: तपाईंले प्रयोगकर्ता अनुभव र डाटा व्यवस्थापन जटिलताको सन्तुलन राख्ने एक परिष्कृत स्थायित्व तह कार्यान्वयन गर्नुभएको छ।
+
+**मुख्य अवधारणाहरू मास्टर गरियो**:
+- **JSON सिरियलाइजेसन**: जटिल वस्तुहरूलाई भण्डारण योग्य स्ट्रिङमा रूपान्तरण
+- **स्वचालित समक्रमण**: राज्य परिवर्तनहरूले स्थायी भण्डारण ट्रिगर गर्छ
+- **सत्र पुनःप्राप्ति**: एपहरू अवरोधपछि प्रयोगकर्ता सन्दर्भ पुनःस्थापना गर्न सक्छन्
+- **केन्द्रित स्थायित्व**: एक अपडेट फङ्सनले सबै भण्डारण ह्यान्डल गर्छ
 
-## Persistence र डेटा ताजगीको सन्तुलन
+**उद्योग कनेक्शन**: यो स्थायित्व ढाँचा प्रोग्रेसिभ वेब एप्स (PWAs), अफलाइन-प्रथम एप्लिकेसनहरू, र आधुनिक मोबाइल वेब अनुभवहरूको लागि मौलिक छ। तपाईं उत्पादन-स्तरको क्षमता निर्माण गर्दै हुनुहुन्छ।
 
-हाम्रो Persistence प्रणालीले प्रयोगकर्ता सत्रहरू सफलतापूर्वक कायम राख्छ, तर नयाँ चुनौती प्रस्तुत गर्दछ: डेटा पुरानो हुने समस्या। जब धेरै प्रयोगकर्ताहरू वा एप्लिकेसनहरूले एउटै सर्भर डेटा परिवर्तन गर्छन्, स्थानीय क्यास गरिएको जानकारी पुरानो हुन्छ।
+**प्रतिबिम्ब प्रश्न**: तपाईंले कसरी यो प्रणालीलाई एउटै उपकरणमा धेरै प्रयोगकर्ता खाताहरू ह्यान्डल गर्न संशोधित गर्नुहुन्छ? गोपनीयता र सुरक्षा प्रभावहरू विचार गर्नुहोस्।
 
-यो स्थिति वाइकिङ नेभिगेटरहरूको जस्तै हो जसले भण्डारण गरिएको तारा चार्ट र वर्तमान आकाशीय अवलोकनहरूमा भर पर्थे। चार्टले स्थिरता प्रदान गर्थ्यो, तर नेभिगेटरहरूले बदलिँदो अवस्थाहरूलाई ध्यानमा राख्न ताजा अवलोकनहरू आवश्यक थियो। त्यस्तै, हाम्रो एप्लिकेसनलाई स्थायी प्रयोगकर्ता राज्य र वर्तमान सर्भर डेटा दुवै आवश्यक छ।
+## स्थायित्व र डाटा ताजगीको सन्तुलन
 
-**🧪 डेटा ताजगी समस्या पत्ता लगाउँदै:**
+हाम्रो स्थायित्व प्रणालीले सफलतापूर्वक प्रयोगकर्ता सत्रहरू कायम राख्छ, तर नयाँ चुनौती प्रस्तुत गर्छ: डाटा पुरानो हुनु। जब धेरै प्रयोगकर्ताहरू वा एप्लिकेसनहरूले एउटै सर्भर डाटा परिवर्तन गर्छन्, स्थानीय क्यास गरिएको जानकारी पुरानो हुन्छ।
+
+यो स्थिति वाइकिङ नेभिगेटरहरूको जस्तै हो जसले भण्डारण गरिएका तारा चार्टहरू र वर्तमान आकाशीय अवलोकनहरूमा भर पर्थे। चार्टहरूले स्थिरता प्रदान गर्थे, तर नेभिगेटरहरूले बदलिँदो अवस्थाहरूलाई ध्यानमा राख्न ताजा अवलोकनहरू आवश्यक थियो। त्यस्तै, हाम्रो एप्लिकेसनलाई स्थायी प्रयोगकर्ता राज्य र वर्तमान सर्भर डाटा दुवै आवश्यक छ।
+
+**🧪 डाटा ताजगी समस्याको खोजी:**
 
 1. `test` खाता प्रयोग गरेर ड्यासबोर्डमा लगइन गर्नुहोस्
-2. अर्को स्रोतबाट लेनदेनको नक्कल गर्न टर्मिनलमा यो कमाण्ड चलाउनुहोस्:
+2. अर्को स्रोतबाट लेनदेनको अनुकरण गर्न टर्मिनलमा यो कमाण्ड चलाउनुहोस्:
 
 ```sh
 curl --request POST \
@@ -382,31 +566,48 @@ curl --request POST \
      http://localhost:5000/api/accounts/test/transactions
 ```
 
-3. आफ्नो ब्राउजरमा ड्यासबोर्ड पृष्ठ रिफ्रेस गर्नुहोस्
+3. ब्राउजरमा आफ्नो ड्यासबोर्ड पृष्ठ रिफ्रेस गर्नुहोस्
 4. नयाँ लेनदेन देख्न सक्नुहुन्छ कि छैन हेर्नुहोस्
 
-**यो परीक्षणले के देखाउँछ:**
-- **देखाउँछ** कि `localStorage` "पुरानो" (अप्रचलित) हुन सक्छ
-- **नक्कल गर्छ** वास्तविक संसारको परिदृश्य जहाँ डेटा परिवर्तनहरू तपाईंको एप बाहिर हुन्छन्
-- **Persistence र डेटा ताजगी बीचको तनाव** प्रकट गर्छ
+**यो परीक्षणले के प्रदर्शन गर्छ:**
+- **देखाउँछ** कि स्थानीय भण्डारण "पुरानो" (अप्रचलित) हुन सक्छ
+- **वास्तविक संसारको परिदृश्य अनुकरण गर्छ** जहाँ डाटा परिवर्तनहरू तपाईंको एप बाहिर हुन्छन्
+- **स्थायित्व र डाटा ताजगी बीचको तनाव प्रकट गर्छ**
 
-**डेटा पुरानो हुने चुनौती:**
+**डाटा पुरानो हुने चुनौती:**
 
 | समस्या | कारण | प्रयोगकर्तामा प्रभाव |
-|--------|-------|-----------------------|
-| **पुरानो डेटा** | `localStorage` स्वतः समाप्त हुँदैन | प्रयोगकर्ताहरूले अप्रचलित जानकारी देख्छन् |
-| **सर्भर परिवर्तनहरू** | अन्य एप्स/प्रयोगकर्ताहरूले एउटै डेटा परिवर्तन गर्छन् | प्लेटफर्महरूमा असंगत दृश्यहरू |
+|---------|-------|-------------|
+| **पुरानो डाटा** | localStorage स्वचालित रूपमा कहिल्यै समाप्त हुँदैन | प्रयोगकर्ताहरूले अप्रचलित जानकारी देख्छन् |
+| **सर्भर परिवर्तनहरू** | अन्य एप्स/प्रयोगकर्ताहरूले एउटै डाटा परिवर्तन गर्छन् | प्लेटफर्महरूमा असंगत दृश्यहरू |
 | **क्यास बनाम वास्तविकता** | स्थानीय क्यास सर्भर राज्यसँग मेल खाँदैन | खराब प्रयोगकर्ता अनुभव र भ्रम |
 
 **समाधान रणनीति:**
 
-हामी "लोडमा रिफ्रेस" ढाँचा लागू गर्नेछौं जसले Persistence को फाइदाहरू र ताजा डेटा आवश्यकताको सन्तुलन कायम राख्छ। यसले सहज प्रयोगकर्ता अनुभव कायम राख्दै डेटा शुद्धता सुनिश्चित गर्दछ।
+हामी "लोडमा रिफ्रेस" ढाँचा कार्यान्वयन गर्नेछौं जसले स्थायित्वको फाइदाहरू र डाटा सटीकताको आवश्यकता सन्तुलन गर्छ। यो दृष्टिकोणले सहज प्रयोगकर्ता अनुभव कायम राख्दै डाटा सटीकता सुनिश्चित गर्छ।
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant A as App
+    participant L as localStorage
+    participant S as Server
+    
+    U->>A: Opens app
+    A->>L: Load saved state
+    L-->>A: Return cached data
+    A->>U: Show UI immediately
+    A->>S: Fetch fresh data
+    S-->>A: Return current data
+    A->>L: Update cache
+    A->>U: Update UI with fresh data
+```
 
-### कार्य: डेटा रिफ्रेस प्रणाली लागू गर्नुहोस्
+### कार्य: डाटा रिफ्रेस प्रणाली कार्यान्वयन गर्नुहोस्
 
-हामी एक प्रणाली सिर्जना गर्नेछौं जसले सर्भरबाट स्वचालित रूपमा ताजा डेटा प्राप्त गर्छ र हाम्रो स्थायी राज्य व्यवस्थापनको फाइदाहरू कायम राख्छ।
+हामी एक प्रणाली सिर्जना गर्नेछौं जसले सर्भरबाट ताजा डाटा स्वचालित रूपमा प्राप्त गर्छ जबकि हाम्रो स्थायी राज्य व्यवस्थापनको फाइदाहरू कायम राख्छ।
 
-**चरण १: खाता डेटा अपडेटर सिर्जना गर्नुहोस्**
+**चरण १: खाता डाटा अपडेटर सिर्जना गर्नुहोस्**
 
 ```js
 async function updateAccountData() {
@@ -424,13 +625,13 @@ async function updateAccountData() {
 }
 ```
 
-**यस फङ्सनको तर्कको समझ:**
-- **जाँच्छ** कि प्रयोगकर्ता हाल लगइन छ कि छैन (state.account अवस्थित छ)
-- यदि कुनै मान्य सत्र फेला परेन भने लगआउटमा **पुनर्निर्देशन** गर्छ
-- `getAccount()` फङ्सन प्रयोग गरेर सर्भरबाट ताजा खाता डेटा **प्राप्त** गर्छ
-- सर्भर त्रुटिहरूलाई राम्रोसँग **ह्यान्डल** गरेर अमान्य सत्रहरूबाट लगआउट गर्छ
-- हाम्रो नियन्त्रण गरिएको अपडेट प्रणाली प्रयोग गरेर राज्यलाई ताजा डेटा **अपडेट** गर्छ
-- `updateState()` फङ्सन मार्फत स्वचालित `localStorage` Persistence **ट्रिगर** गर्छ
+**यस फङ्सनको तर्क बुझ्दै:**
+- **जाँच गर्छ** कि प्रयोगकर्ता हाल लगइन छ कि छैन (state.account अवस्थित छ)
+- **वैध सत्र नभएमा लगआउटमा पुनःनिर्देशन गर्छ**
+- **सर्भरबाट ताजा खाता डाटा प्राप्त गर्छ** `getAccount()` फङ्सन प्रयोग गरेर
+- **सर्भर त्रुटिहरूलाई अनुग्रहपूर्वक ह्यान्डल गर्छ** र अमान्य सत्रहरू लगआउट गर्छ
+- **हाम्रो नियन्त्रण गरिएको अपडेट प्रणाली प्रयोग गरेर राज्य अपडेट गर्छ**
+- **`updateState()` फङ्सन मार्फत स्वचालित localStorage स्थायित्व ट्रिगर गर्छ**
 
 **चरण २: ड्यासबोर्ड रिफ्रेस ह्यान्डलर सिर्जना गर्नुहोस्**
 
@@ -442,14 +643,14 @@ async function refresh() {
 ```
 
 **यो रिफ्रेस फङ्सनले के पूरा गर्छ:**
-- डेटा रिफ्रेस र UI अपडेट प्रक्रियालाई **समन्वय** गर्छ
-- प्रदर्शन अपडेट गर्नु अघि ताजा डेटा लोड गर्न **पर्खन्छ**
-- सुनिश्चित गर्छ कि ड्यासबोर्डले सबैभन्दा वर्तमान जानकारी **देखाउँछ**
-- डेटा व्यवस्थापन र UI अपडेटहरू बीचको स्पष्ट छुट्टै **राख्छ**
+- **डाटा रिफ्रेस र UI अपडेट प्रक्रियालाई समन्वय गर्छ**
+- **ताजा डाटा लोड हुने प्रतीक्षा गर्छ** UI अपडेट गर्नु अघि
+- **ड्यासबोर्डले सबैभन्दा वर्तमान जानकारी देखाउँछ सुनिश्चित गर्छ**
+- **डाटा व्यवस्थापन र UI अपडेट बीचको स्पष्ट विभाजन कायम राख्छ**
 
-**चरण ३: रुट प्रणालीसँग एकीकृत गर्नुहोस्**
+**चरण ३: रूट प्रणालीसँग एकीकृत गर्नुहोस्**
 
-रुट कन्फिगरेसन अपडेट गरेर रिफ्रेस स्वचालित रूपमा ट्रिगर गर्नुहोस्:
+ड्यासबोर्ड रूट लोड हुँदा स्वचालित रूपमा रिफ्रेस ट्रिगर गर्न आफ्नो रूट कन्फिगरेसन अपडेट गर्नुहोस्:
 
 ```js
 const routes = {
@@ -459,68 +660,114 @@ const routes = {
 ```
 
 **यो एकीकरण कसरी काम गर्छ:**
-- ड्यासबोर्ड रुट लोड हुँदा हरेक पटक रिफ्रेस फङ्सन **कार्यान्वयन** गर्छ
-- प्रयोगकर्ताहरू ड्यासबोर्डमा नेभिगेट गर्दा ताजा डेटा सधैं **प्रदर्शन** हुन्छ
-- डेटा ताजगी थप्दै अवस्थित रुट संरचना **मेन्टेन** गर्छ
-- रुट-विशिष्ट Initialization को लागि एक सुसंगत ढाँचा **प्रदान** गर्छ
+- **ड्यासबोर्ड रूट लोड हुँदा रिफ्रेस फङ्सन कार्यान्वयन गर्छ**
+- **प्रयोगकर्ताहरू ड्यासबोर्डमा नेभिगेट गर्दा ताजा डाटा सधैं देखिन्छ सुनिश्चित गर्छ**
+- **डाटा ताजगी थप्दै विद्यमान रूट संरचना कायम राख्छ**
+- **रूट-विशिष्ट इनिसियलाइजेसनको लागि एक सुसंगत ढाँचा प्रदान गर्छ**
 
-**तपाईंको डेटा रिफ्रेस प्रणाली परीक्षण गर्नुहोस्:**
+**तपाईंको डाटा रिफ्रेस प्रणाली परीक्षण गर्दै:**
 
 1. आफ्नो बैंकिङ एपमा लगइन गर्नुहोस्
-2. नयाँ लेनदेन सिर्जना गर्न पहिलेको curl कमाण्ड चलाउनुहोस्
-3. आफ्नो ड्यासबोर्ड पृष्ठ रिफ्रेस गर्नुहोस् वा टाढा गएर फेरी फर्कनुहोस्
-4. नयाँ लेनदेन तुरुन्तै देखिन्छ कि छैन सुनिश्चित गर्नुहोस्
+2. पहिलेको curl कमाण्ड चलाएर नयाँ लेनदेन सिर्जना गर्नुहोस्
+3. आफ्नो ड्यासबोर्ड पृष्ठ रिफ्रेस गर्नुहोस् वा टाढा गएर पुनः फर्कनुहोस्
+4. नयाँ लेनदेन तुरुन्तै देखिन्छ पुष्टि गर्नुहोस्
+
+🎉 **सन्तुलन प्राप्त गरियो**: तपाईंको एपले अब स्थायी राज्यको सहज अनुभव र सर्भर डाटाको सटीकता संयोजन गर्छ!
+
+## 📈 तपाईंको राज्य व्यवस्थापन दक्षता समयरेखा
+
+```mermaid
+timeline
+    title Professional State Management Journey
+    
+    section Problem Recognition
+        State Issues Diagnosis
+            : Identify session loss problems
+            : Understand scattered update issues
+            : Recognize architectural needs
+    
+    section Architecture Foundation
+        Centralized State Design
+            : Create unified state objects
+            : Implement controlled update patterns
+            : Establish immutable principles
+        
+        Predictable Updates
+            : Master Object.freeze() usage
+            : Build debug-friendly systems
+            : Create scalable patterns
+    
+    section Persistence Mastery
+        localStorage Integration
+            : Handle JSON serialization
+            : Implement automatic synchronization
+            : Create session continuity
+        
+        Data Freshness Balance
+            : Address staleness challenges
+            : Build refresh mechanisms
+            : Optimize performance vs accuracy
+    
+    section Professional Patterns
+        Production-Ready Systems
+            : Implement error handling
+            : Create maintainable architectures
+            : Follow industry best practices
+        
+        Advanced Capabilities
+            : Ready for framework integration
+            : Prepared for complex state needs
+            : Foundation for real-time features
+```
+
+**🎓 स्नातक माइलस्टोन**: तपाईंले Redux, Vuex, र अन्य व्यावसायिक राज्य पुस्तकालयहरूलाई शक्ति दिने समान सिद्धान्तहरू प्रयोग गरेर पूर्ण राज्य व्यवस्थापन प्रणाली सफलतापूर्वक निर्माण गर्नुभएको छ। यी ढाँचाहरू सरल एप्सदेखि उद्यम एप्लिकेसनहरूमा स्केल हुन्छन्।
 
-🎉 **सन्तुलन प्राप्त भयो**: अब तपाईंको एपले स्थायी राज्यको सहज अनुभव र सर्भर डेटा ताजगीको सटीकता संयोजन गर्दछ!
+**🔄 अर्को स्तरको क्षमता**:
+- राज्य व्यवस्थापन फ्रेमवर्कहरू (Redux, Zustand, Pinia) मास्टर गर्न तयार
+- WebSockets प्रयोग गरेर वास्तविक-समय सुविधाहरू कार्यान्वयन गर्न तयार
+- अफलाइन-प्रथम प्रोग्रेसिभ वेब एप्स निर्माण गर्न सुसज्जित
+- राज्य मेशिनहरू र पर्यवेक्षकहरू जस्ता उन्नत ढाँचाहरूको लागि आधार सेट
 
 ## GitHub Copilot Agent चुनौती 🚀
 
 Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
 
-**विवरण:** बैंकिङ एपको लागि Undo/Redo कार्यक्षमता सहित व्यापक राज्य व्यवस्थापन प्रणाली लागू गर्नुहोस्। यो चुनौतीले तपाईंलाई उन्नत राज्य व्यवस्थापन अवधारणाहरू अभ्यास गर्न मद्दत गर्नेछ जसमा राज्य इतिहास ट्र्याकिङ, अपरिवर्तनीय अपडेटहरू, र प्रयोगकर्ता इन्टरफेस समक्रमण समावेश छ।
+**विवरण:** बैंकिङ एपका लागि undo/redo कार्यक्षमता सहित व्यापक राज्य व्यवस्थापन प्रणाली कार्यान्वयन गर्नुहोस्। यो चुनौतीले उन्नत राज्य व्यवस्थापन अवधारणाहरू अभ्यास गर्न मद्दत गर्नेछ जसमा राज्य इतिहास ट्र्याकिङ, अपरिवर्तनीय अपडेटहरू, र प्रयोगकर्ता इन्टरफेस समक्रमण समावेश छ।
 
-**प्रेरणा:** उन्नत राज्य व्यवस्थापन प्रणाली सिर्जना गर्नुहोस् जसमा समावेश छ: १) सबै अघिल्लो अवस्थाहरू ट्र्याक गर्ने राज्य इतिहास एरे, २) अघिल्लो अवस्थाहरूमा फर्कन सक्ने Undo र Redo फङ्सनहरू, ३) ड्यासबोर्डमा Undo/Redo अपरेसनका लागि UI बटनहरू, ४) मेमोरी समस्याहरू रोक्न १० अवस्थाको अधिकतम इतिहास सीमा, र ५) प्रयोगकर्ताले लगआउट गर्दा इतिहासको उचित सफाइ। सुनिश्चित गर्नुहोस् कि Undo/Redo कार्यक्षमता खाता ब्यालेन्स परिवर्तनहरूसँग काम गर्छ र ब्राउजर रिफ्रेसहरूमा कायम रहन्छ।
+**प्रेरणा:** एक उन्नत राज्य व्यवस्थापन प्रणाली सिर्जना गर्नुहोस् जसमा समावेश छ: १) राज्य इतिहास एरे जसले सबै अघिल्लो अवस्थाहरू ट्र्याक गर्छ, २) undo र redo फङ्सनहरू जसले अघिल्लो अवस्थाहरूमा फर्कन सक्छ, ३) ड्यासबोर्डमा undo/redo अपरेसनहरूको लागि UI बटनहरू, ४) मेमोरी समस्याहरू रोक्न १० अवस्थाको अधिकतम इतिहास सीमा, र ५) प्रयोगकर्ता लगआउट हुँदा इतिहासको उचित सफाइ। सुनिश्चित गर्नुहोस् कि undo/redo कार्यक्षमता खाता ब्यालेन्स परिवर्तनहरूसँग काम गर्छ र ब्राउजर रिफ्रेसहरूमा कायम रहन्छ।
 
-[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा यहाँ थप जान्नुहोस्।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बारे थप जान्नुहोस्।
 
 ## 🚀 चुनौती: भण्डारण अनुकूलन
 
-तपाईंको कार्यान्वयनले अब प्रयोगकर्ता सत्रहरू, डेटा रिफ्रेस, र राज्य व्यवस्थापन प्रभावकारी रूपमा ह्यान्डल गर्छ। तर, विचार गर्नुहोस् कि हाम्रो वर्तमान दृष्टिकोणले भण्डारण दक्षता र कार्यक्षमताको सन्तुलन उत्तम रूपमा कायम राख्छ कि राख्दैन।
+तपाईंको कार्यान्वयनले अब प्रयोगकर्ता सत्रहरू, डाटा रिफ्रेस, र राज्य व्यवस्थापन प्रभावकारी रूपमा ह्यान्डल गर्छ। तर, विचार गर्नुहोस् कि हाम्रो वर्तमान दृष्टिकोणले भण्डारण दक्षता र कार्यक्षमताको सन्तुलन प्रभावकारी रूपमा कायम राख्छ कि छैन।
 
-जस्तै शतरंजका मास्टरहरूले आवश्यक टुक्राहरू र बलिदान गर्न मिल्ने प्यादाहरू बीच भिन्नता गर्छन्, प्रभावकारी राज्य व्यवस्थापनले कुन डेटा स्थायी रहनुपर्छ र कुन सधैं सर्भरबाट ताजा हुनुपर्छ भनेर पहिचान गर्न आवश्यक छ।
+जस्तै शतरंजका मास्टरहरूले आवश्यक टुक्राहरू र त्याग गर्न सकिने प्यादाहरू छुट्याउँछन्, प्रभावकारी राज्य व्यवस्थापनले कुन डाटा कायम राख्नुपर्छ बनाम कुन सधैं सर्भरबाट ताजा हुनुपर्छ छुट्याउन आवश्यक छ।
 
 **अनुकूलन विश्लेषण:**
 
-तपाईंको वर्तमान `localStorage` कार्यान्वयन मूल्याङ्कन गर्नुहोस् र यी रणनीतिक प्रश्नहरू विचार गर्नुहोस्:
-- प्रयोगकर्ता प्रमाणीकरण कायम राख्नको लागि न्यूनतम जानकारी के हो?
-- कुन डेटा यति बारम्बार परिवर्तन हुन्छ कि स्थानीय क्यासिङले थोरै फाइदा प्रदान गर्छ?
+तपाईंको वर्तमान localStorage कार्यान्वयन मूल्याङ्कन गर्नुहोस् र यी रणनीतिक प्रश्नहरू विचार गर्नुहोस्:
+- प्रयोगकर्ता प्रमाणिकरण कायम राख्न आवश्यक न्यूनतम जानकारी के हो?
+- कुन डाटा यति बारम्बार परिवर्तन हुन्छ कि स्थानीय क्यासिङले थोरै फाइदा प्रदान गर्छ?
 - भण्डारण अनुकूलनले प्रदर्शन सुधार गर्न कसरी प्रयोगकर्ता अनुभवलाई बिगार्न बिना मद्दत गर्न सक्छ?
 
 **कार्यान्वयन रणनीति:**
-- **पहिचान** गर्नुहोस् कि स्थायी रहनुपर्ने आवश्यक डेटा (संभवतः केवल प्रयोगकर्ता पहिचान)
-- आफ्नो `localStorage` कार्यान्वयनलाई केवल महत्वपूर्ण सत्र डेटा भण्डारण गर्न **परिवर्तन** गर्नुहोस्
-- ड्यासबोर्ड भ्रमणमा सर्भरबाट सधैं ताजा डेटा लोड हुने सुनिश्चित गर्नुहोस्
-- आफ्नो अनुकूलित दृष्टिकोणले समान प्रयोगकर्ता अनुभव कायम राख्छ कि छैन **परीक्षण** गर्नुहोस्
+- **आवश्यक डाटा पहिचान गर्नुहोस्** जुन कायम रहनुपर्छ (संभवतः केवल प्रयोगकर्ता पहिचान)
+- **तपाईंको localStorage कार्यान्वयन संशोधित गर्नुहोस्** केवल महत्वपूर्ण सत्र डाटा भण्डारण गर्न
+- **सुनिश्चित गर्नुहोस्** कि ताजा डाटा सधैं ड्यासबोर्ड भ्रमणमा सर्भरबाट लोड हुन्छ
+- **परीक्षण गर्नुहोस्** कि तपाईंको अनुकूलित दृष्टिकोणले समान प्रयोगकर्ता अनुभव कायम राख्छ
 
 **उन्नत विचार:**
-- पूर्ण खाता डेटा भण्डारण बनाम केवल प्रमाणीकरण टोकनहरू बीचको व्यापार-अफ **तुलना** गर्नुहोस्
-- भविष्यका टिम सदस्यहरूको लागि आफ्नो निर्णयहरू र तर्क **दस्तावेज** गर्नुहोस्
+- **पूर्ण खाता डाटा बनाम केवल प्रमाणिकरण टोकन भण्डारणको व्यापार-अफ तुलना गर्नुहोस्**
+- **भविष्यका टोली सदस्यहरूको लागि तपाईंको निर्णयहरू र तर्कहरू दस्तावेज गर्नुहोस्**
 
-यो चुनौतीले तपाईंलाई एक व्यावसायिक डेभलपरको रूपमा सोच्न मद्दत गर्नेछ जसले कार्यक्षमता र एप्लिकेसन दक्षता दुवै विचार गर्छ। विभिन्न दृष्टिकोणहरू प्रयोग गर्न समय लिनुहोस्!
+यो चुनौतीले तपाईंलाई एक व्यावसायिक विकासकर्ता जस्तै सोच्न मद्दत गर्नेछ जसले कार्यक्षमता र एप्लिकेसन दक्षता दुवै विचार गर्छ। विभिन्न दृष्टिकोणहरू प्रयोग गर्न समय लिनुहोस्!
 
 ## पोस्ट-व्याख्यान क्विज
 
-[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/48)
-
-## असाइनमेन्ट
-
-["लेनदेन थप्नुहोस्" संवाद लागू गर्नुहोस्](assignment.md)
-
-असाइनमेन्ट पूरा गरेपछि प्राप्त हुने उदाहरण परिणाम:
-
-!["लेनदेन थप्नुहोस्" संवादको उदाहरण स्क्रिनशट](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ne.png)
+[पोस्ट-व्याख्यान क्विज](https://ff-qu
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/ne/8-code-editor/1-using-a-code-editor/README.md b/translations/ne/8-code-editor/1-using-a-code-editor/README.md
index 73b1f69b65..f288c6f299 100644
--- a/translations/ne/8-code-editor/1-using-a-code-editor/README.md
+++ b/translations/ne/8-code-editor/1-using-a-code-editor/README.md
@@ -1,47 +1,154 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "cfd4a15974168ca426d50c67682ab9d4",
-  "translation_date": "2025-10-22T16:42:28+00:00",
+  "original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
+  "translation_date": "2025-11-03T15:16:20+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/README.md",
   "language_code": "ne"
 }
 -->
-# कोड एडिटर प्रयोग गर्दै: VSCode.dev मा महारत हासिल गर्नुहोस्
+# कोड सम्पादक प्रयोग गर्दै: VSCode.dev मा महारत हासिल गर्नुहोस्
 
-*द म्याट्रिक्स* मा नियोले डिजिटल संसारमा पहुँच गर्न ठूलो कम्प्युटर टर्मिनलमा प्लग गर्नुपरेको सम्झनुहुन्छ? आजको वेब विकास उपकरणहरू यसको ठीक उल्टो कथा हो – जहाँसुकैबाट पहुँच गर्न सकिने अत्यन्त शक्तिशाली क्षमता। VSCode.dev एक ब्राउजर-आधारित कोड एडिटर हो जसले इन्टरनेट कनेक्शन भएको कुनै पनि उपकरणमा व्यावसायिक विकास उपकरणहरू ल्याउँछ।
+*द म्याट्रिक्स* मा नियोले डिजिटल संसारमा पहुँच गर्न ठूलो कम्प्युटर टर्मिनलमा प्लग गर्नुपरेको सम्झनुहुन्छ? आजको वेब विकास उपकरणहरू यसको ठीक उल्टो कथा हो – जहाँसुकैबाट पहुँच गर्न सकिने अत्यन्त शक्तिशाली क्षमता। VSCode.dev एक ब्राउजर-आधारित कोड सम्पादक हो जसले इन्टरनेट कनेक्शन भएको कुनै पनि उपकरणमा व्यावसायिक विकास उपकरणहरू ल्याउँछ।
 
-जसरी छापाखानाले पुस्तकहरू सबैका लागि पहुँचयोग्य बनायो, केवल मठका लेखकहरूका लागि मात्र होइन, VSCode.dev ले कोडिङलाई लोकतान्त्रिक बनाउँछ। तपाईं पुस्तकालयको कम्प्युटर, विद्यालयको प्रयोगशाला, वा ब्राउजर पहुँच भएको कुनै पनि ठाउँबाट परियोजनाहरूमा काम गर्न सक्नुहुन्छ। कुनै स्थापना आवश्यक छैन, कुनै "मलाई मेरो विशेष सेटअप चाहिन्छ" भन्ने सीमाहरू छैनन्।
+जसरी छापाखानाले पुस्तकहरू सबैलाई उपलब्ध गरायो, केवल मठका लेखकहरूलाई मात्र होइन, VSCode.dev ले कोडिङलाई लोकतान्त्रिक बनाउँछ। तपाईं पुस्तकालयको कम्प्युटर, विद्यालयको प्रयोगशाला, वा ब्राउजर पहुँच भएको कुनै पनि ठाउँबाट परियोजनाहरूमा काम गर्न सक्नुहुन्छ। कुनै स्थापना आवश्यक छैन, कुनै "मलाई मेरो विशेष सेटअप चाहिन्छ" भन्ने सीमाहरू छैनन्।
 
-यस पाठको अन्त्यसम्ममा, तपाईंले VSCode.dev नेभिगेट गर्न, GitHub रिपोजिटरीहरू सिधै ब्राउजरमा खोल्न, र Git प्रयोग गरेर संस्करण नियन्त्रण गर्न सिक्नुहुनेछ – पेशेवर विकासकर्ताहरूले दैनिक रूपमा भर पर्ने सबै सीपहरू।
+यस पाठको अन्त्यसम्ममा, तपाईंले VSCode.dev नेभिगेट गर्न, GitHub रिपोजिटरीहरू सिधै ब्राउजरमा खोल्न, र संस्करण नियन्त्रणको लागि Git प्रयोग गर्न सिक्नुहुनेछ – व्यावसायिक विकासकर्ताहरूले दैनिक रूपमा भर पर्ने सबै सीपहरू।
+
+## ⚡ तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा
+
+**व्यस्त विकासकर्ताहरूको लागि छिटो सुरु गर्ने मार्ग**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Visit vscode.dev]
+    B --> C[Connect GitHub account]
+    C --> D[Open any repository]
+    D --> E[Start editing immediately]
+```
+
+- **मिनेट १**: [vscode.dev](https://vscode.dev) मा जानुहोस् - कुनै स्थापना आवश्यक छैन
+- **मिनेट २**: GitHub सँग साइन इन गर्नुहोस् र आफ्नो रिपोजिटरीहरू जडान गर्नुहोस्
+- **मिनेट ३**: URL ट्रिक प्रयास गर्नुहोस्: कुनै पनि रिपोजिटरी URL मा `github.com` लाई `vscode.dev/github` मा परिवर्तन गर्नुहोस्
+- **मिनेट ४**: नयाँ फाइल सिर्जना गर्नुहोस् र स्वचालित रूपमा काम गर्ने सिन्ट्याक्स हाइलाइटिङ हेर्नुहोस्
+- **मिनेट ५**: परिवर्तन गर्नुहोस् र स्रोत नियन्त्रण प्यानल मार्फत यसलाई कमिट गर्नुहोस्
+
+**छिटो परीक्षण URL**:
+```
+# Transform this:
+github.com/microsoft/Web-Dev-For-Beginners
+
+# Into this:
+vscode.dev/github/microsoft/Web-Dev-For-Beginners
+```
+
+**किन यो महत्त्वपूर्ण छ**: ५ मिनेटमा, तपाईंले व्यावसायिक उपकरणहरूसँग जहाँसुकै कोडिङको स्वतन्त्रता अनुभव गर्नुहुनेछ। यो विकासको भविष्यको प्रतिनिधित्व गर्दछ - पहुँचयोग्य, शक्तिशाली, र तुरुन्त।
+
+## 🗺️ क्लाउड-आधारित विकासको माध्यमबाट तपाईंको सिकाइ यात्रा
+
+```mermaid
+journey
+    title From Local Setup to Cloud Development Mastery
+    section Understanding the Platform
+      Discover web-based editing: 4: You
+      Connect to GitHub ecosystem: 6: You
+      Master interface navigation: 7: You
+    section File Management Skills
+      Create and organize files: 5: You
+      Edit with syntax highlighting: 7: You
+      Navigate project structures: 8: You
+    section Version Control Mastery
+      Understand Git integration: 6: You
+      Practice commit workflows: 8: You
+      Master collaboration patterns: 9: You
+    section Professional Customization
+      Install powerful extensions: 7: You
+      Configure development environment: 8: You
+      Build personal workflows: 9: You
+```
+
+**तपाईंको यात्रा गन्तव्य**: यस पाठको अन्त्यसम्ममा, तपाईंले कुनै पनि उपकरणबाट काम गर्ने व्यावसायिक क्लाउड विकास वातावरणमा महारत हासिल गर्नुहुनेछ, जसले तपाईंलाई प्रमुख प्रविधि कम्पनीका विकासकर्ताहरूले प्रयोग गर्ने समान उपकरणहरूसँग कोड गर्न सक्षम बनाउँछ।
 
 ## तपाईंले के सिक्नुहुनेछ
 
-हामी यो सँगै हिँडिसकेपछि, तपाईं सक्षम हुनुहुनेछ:
+हामी यसलाई सँगै हिँड्दा, तपाईं सक्षम हुनुहुनेछ:
 
-- VSCode.dev लाई आफ्नो दोस्रो घरजस्तै नेभिगेट गर्नुहोस् – आवश्यक सबै कुरा पत्ता लगाउनुहोस् बिना हराउने
-- कुनै पनि GitHub रिपोजिटरी ब्राउजरमा खोल्नुहोस् र तुरुन्तै सम्पादन सुरु गर्नुहोस् (यो वास्तवमै जादुई छ!)
-- Git प्रयोग गरेर आफ्नो परिवर्तनहरू ट्र्याक गर्नुहोस् र पेशेवरजस्तै आफ्नो प्रगति बचत गर्नुहोस्
-- कोडिङलाई छिटो र रमाइलो बनाउने एक्सटेन्सनहरू प्रयोग गरेर आफ्नो एडिटरलाई सुपरचार्ज गर्नुहोस्
-- परियोजना फाइलहरू आत्मविश्वासका साथ सिर्जना र व्यवस्थित गर्नुहोस्
+- VSCode.dev लाई आफ्नो दोस्रो घरजस्तै नेभिगेट गर्नुहोस् – आवश्यक पर्ने सबै कुरा पत्ता लगाउन बिना हराउने
+- कुनै पनि GitHub रिपोजिटरी ब्राउजरमा खोल्नुहोस् र तुरुन्तै सम्पादन सुरु गर्नुहोस् (यो साँच्चै जादुई छ!)
+- Git प्रयोग गरेर आफ्नो परिवर्तनहरू ट्र्याक गर्नुहोस् र व्यावसायिक जस्तै आफ्नो प्रगति बचत गर्नुहोस्
+- कोडिङलाई छिटो र रमाइलो बनाउने एक्सटेन्सनहरू प्रयोग गरेर आफ्नो सम्पादकलाई सुपरचार्ज गर्नुहोस्
+- आत्मविश्वासका साथ परियोजना फाइलहरू सिर्जना र व्यवस्थित गर्नुहोस्
 
 ## तपाईंलाई के चाहिन्छ
 
 आवश्यकताहरू सरल छन्:
 
-- एक नि:शुल्क [GitHub खाता](https://github.com) (हामी आवश्यक परेमा सिर्जना गर्न मार्गदर्शन गर्नेछौं)
+- नि:शुल्क [GitHub खाता](https://github.com) (हामी आवश्यक परेमा सिर्जना गर्न मार्गदर्शन गर्नेछौं)
 - वेब ब्राउजरहरूको आधारभूत परिचय
 - GitHub Basics पाठले उपयोगी पृष्ठभूमि प्रदान गर्दछ, यद्यपि यो आवश्यक छैन
 
 > 💡 **GitHub मा नयाँ?** खाता सिर्जना नि:शुल्क छ र केही मिनेट लाग्छ। जस्तै पुस्तकालय कार्डले तपाईंलाई विश्वव्यापी पुस्तकहरूमा पहुँच दिन्छ, GitHub खाता इन्टरनेटभरि कोड रिपोजिटरीहरूमा ढोका खोल्छ।
 
-## किन वेब-आधारित कोड एडिटरहरू महत्त्वपूर्ण छन्
+## 🧠 क्लाउड विकास पारिस्थितिकी प्रणालीको अवलोकन
+
+```mermaid
+mindmap
+  root((VSCode.dev Mastery))
+    Platform Benefits
+      Accessibility
+        Device Independence
+        No Installation Required
+        Instant Updates
+        Universal Access
+      Integration
+        GitHub Connection
+        Repository Sync
+        Settings Persistence
+        Collaboration Ready
+    Development Workflow
+      File Management
+        Project Structure
+        Syntax Highlighting
+        Multi-tab Editing
+        Auto-save Features
+      Version Control
+        Git Integration
+        Commit Workflows
+        Branch Management
+        Change Tracking
+    Customization Power
+      Extensions Ecosystem
+        Productivity Tools
+        Language Support
+        Theme Options
+        Custom Shortcuts
+      Environment Setup
+        Personal Preferences
+        Workspace Configuration
+        Tool Integration
+        Workflow Optimization
+    Professional Skills
+      Industry Standards
+        Version Control
+        Code Quality
+        Collaboration
+        Documentation
+      Career Readiness
+        Remote Work
+        Cloud Development
+        Team Projects
+        Open Source
+```
+
+**मुख्य सिद्धान्त**: क्लाउड-आधारित विकास वातावरणहरूले कोडिङको भविष्यको प्रतिनिधित्व गर्दछ - व्यावसायिक-ग्रेड उपकरणहरू प्रदान गर्दै जुन पहुँचयोग्य, सहयोगात्मक, र प्लेटफर्म-स्वतन्त्र छन्।
+
+## किन वेब-आधारित कोड सम्पादकहरू महत्त्वपूर्ण छन्
 
-इन्टरनेटभन्दा पहिले, विभिन्न विश्वविद्यालयका वैज्ञानिकहरूले अनुसन्धान सजिलै साझेदारी गर्न सक्दैनथे। त्यसपछि १९६० को दशकमा ARPANET आयो, जसले दूरीभरि कम्प्युटरहरू जोड्यो। वेब-आधारित कोड एडिटरहरूले यही सिद्धान्त अनुसरण गर्छन् – शक्तिशाली उपकरणहरू तपाईंको भौतिक स्थान वा उपकरणको परवाह नगरी पहुँचयोग्य बनाउँदै।
+इन्टरनेट अघि, विभिन्न विश्वविद्यालयका वैज्ञानिकहरूले अनुसन्धान सजिलै साझेदारी गर्न सक्दैनथे। त्यसपछि १९६० को दशकमा ARPANET आयो, जसले दूरीहरू पार गरेर कम्प्युटरहरू जडान गर्‍यो। वेब-आधारित कोड सम्पादकहरूले यही सिद्धान्त अनुसरण गर्छन् – शक्तिशाली उपकरणहरू तपाईंको भौतिक स्थान वा उपकरणको पर्वाह नगरी पहुँचयोग्य बनाउँदै।
 
-कोड एडिटर तपाईंको विकास कार्यक्षेत्रको रूपमा काम गर्दछ, जहाँ तपाईं कोड फाइलहरू लेख्नुहुन्छ, सम्पादन गर्नुहुन्छ, र व्यवस्थित गर्नुहुन्छ। साधारण टेक्स्ट एडिटरहरू भन्दा फरक, व्यावसायिक कोड एडिटरहरूले सिन्ट्याक्स हाइलाइटिङ, त्रुटि पत्ता लगाउने, र परियोजना व्यवस्थापन सुविधाहरू प्रदान गर्छन्।
+कोड सम्पादक तपाईंको विकास कार्यक्षेत्रको रूपमा काम गर्दछ, जहाँ तपाईं कोड फाइलहरू लेख्नुहुन्छ, सम्पादन गर्नुहुन्छ, र व्यवस्थित गर्नुहुन्छ। साधारण पाठ सम्पादकहरू भन्दा फरक, व्यावसायिक कोड सम्पादकहरूले सिन्ट्याक्स हाइलाइटिङ, त्रुटि पत्ता लगाउने, र परियोजना व्यवस्थापन सुविधाहरू प्रदान गर्छन्।
 
-VSCode.dev ले यी क्षमताहरू तपाईंको ब्राउजरमा ल्याउँछ:
+VSCode.dev यी क्षमताहरूलाई तपाईंको ब्राउजरमा ल्याउँछ:
 
 **वेब-आधारित सम्पादनका फाइदाहरू:**
 
@@ -50,28 +157,28 @@ VSCode.dev ले यी क्षमताहरू तपाईंको ब
 | **प्लेटफर्म स्वतन्त्रता** | कुनै पनि ब्राउजर भएको उपकरणमा चल्छ | विभिन्न कम्प्युटरहरूबाट सहजै काम गर्नुहोस् |
 | **स्थापना आवश्यक छैन** | वेब URL मार्फत पहुँच | सफ्टवेयर स्थापना प्रतिबन्धहरू बाइपास गर्नुहोस् |
 | **स्वचालित अपडेटहरू** | सधैं नवीनतम संस्करण चल्छ | म्यानुअल अपडेट बिना नयाँ सुविधाहरू पहुँच गर्नुहोस् |
-| **रिपोजिटरी एकीकरण** | GitHub सँग सिधा कनेक्शन | स्थानीय फाइल व्यवस्थापन बिना कोड सम्पादन गर्नुहोस् |
+| **रिपोजिटरी एकीकरण** | GitHub सँग सिधा जडान | स्थानीय फाइल व्यवस्थापन बिना कोड सम्पादन गर्नुहोस् |
 
 **व्यावहारिक प्रभावहरू:**
 - विभिन्न वातावरणहरूमा कामको निरन्तरता
-- अपरेटिङ सिस्टमको परवाह नगरी स्थिर इन्टरफेस
+- अपरेटिङ सिस्टमको पर्वाह नगरी स्थिर इन्टरफेस
 - तत्काल सहयोग क्षमताहरू
-- स्थानीय भण्डारण आवश्यकताहरू कम
+- स्थानीय भण्डारण आवश्यकताहरू कम गर्नुहोस्
 
 ## VSCode.dev अन्वेषण गर्दै
 
-जसरी मेरी क्युरीको प्रयोगशालामा अपेक्षाकृत साधारण ठाउँमा परिष्कृत उपकरणहरू समावेश थिए, VSCode.dev ले ब्राउजर इन्टरफेसमा व्यावसायिक विकास उपकरणहरू समेट्छ। यो वेब एप्लिकेसनले डेस्कटप कोड एडिटरहरूको समान कोर कार्यक्षमता प्रदान गर्दछ।
+जसरी मेरी क्युरीको प्रयोगशालामा अपेक्षाकृत साधारण ठाउँमा परिष्कृत उपकरणहरू समावेश थिए, VSCode.dev ले ब्राउजर इन्टरफेसमा व्यावसायिक विकास उपकरणहरू समेट्छ। यो वेब एप्लिकेसनले डेस्कटप कोड सम्पादकहरूको समान मुख्य कार्यक्षमता प्रदान गर्दछ।
 
-[VSCode.dev](https://vscode.dev) मा आफ्नो ब्राउजरमा नेभिगेट गरेर सुरु गर्नुहोस्। इन्टरफेस डाउनलोडहरू वा प्रणाली स्थापनाहरू बिना लोड हुन्छ – क्लाउड कम्प्युटिङ सिद्धान्तहरूको प्रत्यक्ष अनुप्रयोग।
+[VSCode.dev](https://vscode.dev) मा आफ्नो ब्राउजरमा नेभिगेट गरेर सुरु गर्नुहोस्। इन्टरफेस डाउनलोडहरू वा प्रणाली स्थापना बिना लोड हुन्छ – क्लाउड कम्प्युटिङ सिद्धान्तहरूको प्रत्यक्ष अनुप्रयोग।
 
 ### आफ्नो GitHub खाता जडान गर्दै
 
-जसरी अलेक्जेन्डर ग्राहम बेलको टेलिफोनले टाढाका स्थानहरू जोड्यो, तपाईंको GitHub खाता जडानले VSCode.dev लाई तपाईंको कोड रिपोजिटरीहरूसँग जोड्छ। GitHub सँग साइन इन गर्न संकेत गर्दा, यो जडान स्वीकार गर्न सिफारिस गरिन्छ।
+जसरी अलेक्जेन्डर ग्राहम बेलको टेलिफोनले टाढाका स्थानहरू जडान गर्‍यो, आफ्नो GitHub खाता जडान गर्दा VSCode.dev लाई तपाईंको कोड रिपोजिटरीहरूसँग जोड्छ। GitHub सँग साइन इन गर्न संकेत गर्दा, यो जडान स्वीकार गर्न सिफारिस गरिन्छ।
 
 **GitHub एकीकरणले प्रदान गर्दछ:**
-- एडिटर भित्र तपाईंको रिपोजिटरीहरूमा सिधा पहुँच
+- सम्पादक भित्र तपाईंको रिपोजिटरीहरूमा सिधा पहुँच
 - उपकरणहरूमा समक्रमित सेटिङहरू र एक्सटेन्सनहरू
-- GitHub मा बचत कार्यप्रवाहलाई सरल बनाउँछ
+- GitHub मा बचत कार्यप्रवाहलाई सरल बनाउनुहोस्
 - व्यक्तिगत विकास वातावरण
 
 ### आफ्नो नयाँ कार्यक्षेत्र चिन्नुहोस्
@@ -81,34 +188,55 @@ VSCode.dev ले यी क्षमताहरू तपाईंको ब
 ![डिफल्ट VSCode.dev इन्टरफेस](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ne.png)
 
 **यहाँ तपाईंको छिमेकको भ्रमण छ:**
-- **एक्टिभिटी बार** (बायाँपट्टि पट्टी): तपाईंको मुख्य नेभिगेसन Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, र Settings ⚙️
-- **साइडबार** (यसको छेउमा प्यानल): तपाईंले चयन गर्नुभएको कुराको आधारमा सान्दर्भिक जानकारी देखाउन परिवर्तन हुन्छ
-- **एडिटर क्षेत्र** (बीचको ठूलो ठाउँ): यहाँ जादू हुन्छ – तपाईंको मुख्य कोडिङ क्षेत्र
+- **एक्टिभिटी बार** (बायाँपट्टि पट्टी): तपाईंको मुख्य नेभिगेसन एक्सप्लोरर 📁, खोज 🔍, स्रोत नियन्त्रण 🌿, एक्सटेन्सन 🧩, र सेटिङ ⚙️ सहित
+- **साइडबार** (यसको छेउमा प्यानल): तपाईंले चयन गर्नुभएको कुराको आधारमा तपाईंलाई सान्दर्भिक जानकारी देखाउन परिवर्तन हुन्छ
+- **सम्पादक क्षेत्र** (बीचको ठूलो ठाउँ): यहाँ जादू हुन्छ – तपाईंको मुख्य कोडिङ क्षेत्र
 
 **एक पल्ट अन्वेषण गर्नुहोस्:**
 - ती एक्टिभिटी बार आइकनहरूमा क्लिक गर्नुहोस् र प्रत्येकले के गर्छ हेर्नुहोस्
-- साइडबारले विभिन्न जानकारी देखाउन कसरी अपडेट गर्छ ध्यान दिनुहोस् – धेरै राम्रो, हैन?
-- Explorer दृश्य (📁) सम्भवतः तपाईंले धेरै समय बिताउने ठाउँ हो, त्यसैले यससँग सहज हुनुहोस्
+- साइडबारले विभिन्न जानकारी देखाउन कसरी अपडेट गर्दछ नोट गर्नुहोस् – धेरै राम्रो, हैन र?
+- एक्सप्लोरर दृश्य (📁) सम्भवतः तपाईंले धेरै समय बिताउने ठाउँ हो, त्यसैले यससँग सहज हुनुहोस्
+
+```mermaid
+flowchart TB
+    subgraph "VSCode.dev Interface Architecture"
+        A[Activity Bar] --> B[Explorer 📁]
+        A --> C[Search 🔍]
+        A --> D[Source Control 🌿]
+        A --> E[Extensions 🧩]
+        A --> F[Settings ⚙️]
+        
+        B --> G[File Tree]
+        C --> H[Find & Replace]
+        D --> I[Git Status]
+        E --> J[Extension Marketplace]
+        F --> K[Configuration]
+        
+        L[Sidebar] --> M[Context Panel]
+        N[Editor Area] --> O[Code Files]
+        P[Terminal/Output] --> Q[Command Line]
+    end
+```
 
 ## GitHub रिपोजिटरीहरू खोल्दै
 
-इन्टरनेटभन्दा पहिले, अनुसन्धानकर्ताहरूले कागजातहरू पहुँच गर्न पुस्तकालयहरूमा शारीरिक रूपमा यात्रा गर्नुपर्थ्यो। GitHub रिपोजिटरीहरू समान काम गर्छन् – टाढा भण्डारण गरिएको कोडको संग्रह। VSCode.dev ले रिपोजिटरीहरूलाई स्थानीय मेसिनमा डाउनलोड गर्ने परम्परागत चरणलाई सम्पादन गर्नु अघि हटाउँछ।
+इन्टरनेट अघि, अनुसन्धानकर्ताहरूले कागजातहरू पहुँच गर्न पुस्तकालयहरूमा शारीरिक रूपमा यात्रा गर्नुपर्थ्यो। GitHub रिपोजिटरीहरू समान रूपमा काम गर्छन् – तिनीहरू टाढा भण्डारण गरिएको कोडको संग्रह हुन्। VSCode.dev ले सम्पादन अघि रिपोजिटरीहरूलाई तपाईंको स्थानीय मेसिनमा डाउनलोड गर्ने परम्परागत चरणलाई हटाउँछ।
 
 यो क्षमता कुनै पनि सार्वजनिक रिपोजिटरीलाई हेर्न, सम्पादन गर्न, वा योगदान गर्न तत्काल पहुँच सक्षम बनाउँछ। यहाँ रिपोजिटरीहरू खोल्नका लागि दुई विधिहरू छन्:
 
 ### विधि १: पोइन्ट-एन्ड-क्लिक तरिका
 
-यो VSCode.dev मा नयाँ सुरु गर्दा र विशिष्ट रिपोजिटरी खोल्न चाहनुहुन्छ भने उत्तम हो। यो सरल र शुरुआती मैत्री छ:
+यो VSCode.dev मा नयाँ सुरु गर्दा र विशिष्ट रिपोजिटरी खोल्न चाहनुहुन्छ भने उत्तम हो। यो सरल र शुरुवातमैत्री छ:
 
 **यसलाई कसरी गर्ने:**
 
-1. [VSCode.dev](https://vscode.dev) मा जानुहोस् यदि तपाईं पहिले नै त्यहाँ हुनुहुन्न भने
-2. स्वागत स्क्रीनमा "Open Remote Repository" बटन खोज्नुहोस् र क्लिक गर्नुहोस्
+1. [vscode.dev](https://vscode.dev) मा जानुहोस् यदि तपाईं त्यहाँ हुनुहुन्न भने
+2. स्वागत स्क्रीनमा "ओपन रिमोट रिपोजिटरी" बटन खोज्नुहोस् र यसलाई क्लिक गर्नुहोस्
 
    ![रिमोट रिपोजिटरी खोल्नुहोस्](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ne.png)
 
 3. कुनै पनि GitHub रिपोजिटरी URL पेस्ट गर्नुहोस् (यो प्रयास गर्नुहोस्: `https://github.com/microsoft/Web-Dev-For-Beginners`)
-4. Enter थिच्नुहोस् र जादू हेर्नुहोस्!
+4. इन्टर थिच्नुहोस् र जादू हेर्नुहोस्!
 
 **प्रो टिप - कमाण्ड प्यालेट सर्टकट:**
 
@@ -116,15 +244,15 @@ VSCode.dev ले यी क्षमताहरू तपाईंको ब
 
 ![कमाण्ड प्यालेट](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ne.png)
 
-**कमाण्ड प्यालेट सबै गर्न सक्ने कुराको लागि खोज इन्जिन जस्तै हो:**
-- "open remote" टाइप गर्नुहोस् र यसले तपाईंका लागि रिपोजिटरी ओपनर फेला पार्नेछ
+**कमाण्ड प्यालेट भनेको तपाईंले गर्न सक्ने सबै कुराको लागि खोज इन्जिन जस्तै हो:**
+- "ओपन रिमोट" टाइप गर्नुहोस् र यसले रिपोजिटरी ओपनर तपाईंको लागि फेला पार्छ
 - यसले तपाईंले हालै खोल्नुभएको रिपोजिटरीहरू सम्झन्छ (धेरै उपयोगी!)
 - एकपटक तपाईं यसमा अभ्यस्त भएपछि, तपाईंलाई लाग्छ कि तपाईं प्रकाशको गतिमा कोडिङ गर्दै हुनुहुन्छ
-- यो मूलतः VSCode.dev को "Hey Siri, तर कोडिङका लागि" संस्करण हो
+- यो मूलतः VSCode.dev को "हे सिरी, तर कोडिङको लागि" संस्करण हो
 
-### विधि २: URL संशोधन प्रविधि
+### विधि २: URL परिमार्जन प्रविधि
 
-जसरी HTTP र HTTPS ले विभिन्न प्रोटोकलहरू प्रयोग गर्छन् जबकि समान डोमेन संरचना कायम राख्छन्, VSCode.dev ले GitHub को ठेगाना प्रणालीलाई प्रतिबिम्बित गर्ने URL ढाँचा प्रयोग गर्दछ। कुनै पनि GitHub रिपोजिटरी URL लाई VSCode.dev मा सिधै खोल्न संशोधित गर्न सकिन्छ।
+जसरी HTTP र HTTPS ले समान डोमेन संरचना कायम राख्दै विभिन्न प्रोटोकलहरू प्रयोग गर्छन्, VSCode.dev ले GitHub को ठेगाना प्रणालीलाई प्रतिबिम्बित गर्ने URL ढाँचा प्रयोग गर्छ। कुनै पनि GitHub रिपोजिटरी URL लाई VSCode.dev मा सिधै खोल्न परिमार्जन गर्न सकिन्छ।
 
 **URL रूपान्तरण ढाँचा:**
 
@@ -140,224 +268,332 @@ VSCode.dev ले यी क्षमताहरू तपाईंको ब
 - कुनै पनि सार्वजनिक रूपमा पहुँचयोग्य रिपोजिटरीसँग काम गर्दछ
 - तत्काल सम्पादन पहुँच प्रदान गर्दछ
 
-> 💡 **जीवन परिवर्तन गर्ने टिप**: तपाईंको मनपर्ने रिपोजिटरीहरूको VSCode.dev संस्करणहरू बुकमार्क गर्नुहोस्। मेरोसँग "Edit My Portfolio" र "Fix Documentation" जस्ता बुकमार्कहरू छन् जसले मलाई सिधै सम्पादन मोडमा लैजान्छ!
+> 💡 **जीवन परिवर्तन गर्ने टिप**: तपाईंको मनपर्ने रिपोजिटरीहरूको VSCode.dev संस्करणहरू बुकमार्क गर्नुहोस्। मेरोसँग "मेरो पोर्टफोलियो सम्पादन गर्नुहोस्" र "डकुमेन्टेसन सुधार गर्नुहोस्" जस्ता बुकमार्कहरू छन् जसले मलाई सिधै सम्पादन मोडमा लैजान्छ!
 
 **कुन विधि प्रयोग गर्ने?**
-- **इन्टरफेस तरिका**: अन्वेषण गर्दा वा ठ्याक्कै रिपोजिटरी नामहरू सम्झन नसक्दा उत्कृष्ट
-- **URL ट्रिक**: तपाईंलाई ठ्याक्कै कहाँ जानु छ थाहा छ भने प्रकाशको गतिमा पहुँचका लागि उत्तम
+- **इन्टरफेस तरिका**: जब तपाईं अन्वेषण गर्दै हुनुहुन्छ वा ठ्याक्कै रिपोजिटरी नामहरू सम्झन सक्नुहुन्न
+- **URL ट्रिक**: जब तपाईंलाई ठ्याक्कै कहाँ जानु छ थाहा छ भने प्रकाशको गतिमा पहुँचको लागि उत्तम
+
+### 🎯 शैक्षिक जाँच: क्लाउड विकास पहुँच
+
+**रोक्नुहोस् र प्रतिबिम्बित गर्नुहोस्**: तपाईंले वेब ब्राउजर मार्फत कोड रिपोजिटरीहरू पहुँच गर्ने दुई विधिहरू सिक्नुभएको छ। यसले विकास कसरी काम गर्छ भन्नेमा मौलिक परिवर्तनको प्रतिनिधित्व गर्दछ।
+
+**छिटो आत्म-मूल्यांकन**:
+- वेब-आधारित सम्पादनले परम्परागत "विकास वातावरण सेटअप" किन हटाउँछ भनेर तपाईं व्याख्या गर्न सक्नुहुन्छ?
+- स्थानीय git क्लोनिङको तुलनामा URL परिमार्जन प्रविधिले के फाइदा प्रदान गर्दछ?
+- यसले तपाईंलाई खुला स्रोत परियोजनाहरूमा योगदान गर्ने तरिका कसरी परिवर्तन गर्न सक्छ?
+
+**वास्तविक संसारको जडान**: GitHub, GitLab, र Replit जस्ता प्रमुख कम्पनीहरूले यी क्लाउड-प्रथम सिद्धान्तहरू वरिपरि आफ्ना विकास प्लेटफर्महरू निर्माण गरेका छन्। तपाईंले व्यावसायिक विकास टोलीहरूले विश्वव्यापी रूपमा प्रयोग गर्ने समान कार्यप्रवाहहरू सिक्दै हुनुहुन्छ।
+
+**चुनौती प्रश्न**: क्लाउड-आधारित विकासले विद्यालयहरूमा कोडिङ सिकाउने तरिका कसरी परिवर्तन गर्न सक्छ? उपकरण आवश्यकताहरू, सफ्टवेयर व्यवस्थापन, र सहयोगी सम्भावनाहरू विचार गर्नुहोस्।
 
 ## फाइलहरू र परियोजनाहरूको साथ काम गर्दै
 
-अब तपाईंले रिपोजिटरी खोल्नुभयो, सुरु गरौं! VSCode.dev ले तपाईंलाई कोड फाइलहरू सिर्जना, सम्पादन, र व्यवस्थित गर्न आवश्यक सबै कुरा दिन्छ। यसलाई तपाईंको डिजिटल कार्यशाला जस्तै सोच्नुहोस् – प्रत्येक उपकरण तपाईंलाई आवश्यक पर्ने ठाउँमा छ।
+अब तपाईंले रिपोजिटरी खोल्नुभएको छ, सुरु गरौं! VSCode.dev ले तपाईंलाई कोड फाइलहरू सिर्जना, सम्पादन, र व्यवस्थित गर्न आवश्यक सबै कुरा दिन्छ। यसलाई तपाईंको डिजिटल कार्यशाला जस्तै सोच्नुहोस् – प्रत्येक उपकरण तपाईंलाई आवश्यक पर्ने ठाउँमा छ।
 
-आउनुहोस्, दैनिक कार्यहरूमा डुबौं जसले तपाईंको कोडिङ कार्यप्रवाहको अधिकांश भाग बनाउनेछ।
+आउनुहोस्, तपाईंको कोडिङ कार्यप्रवाहको अधिकांश भाग बनाउने दैनिक कार्यहरूमा डुबौं।
 
 ### नयाँ फाइलहरू सिर्जना गर्दै
 
-जसरी एक वास्तुकारको कार्यालयमा ब्लूप्रिन्टहरू व्यवस्थित गरिन्छ, VSCode.dev मा फाइल सिर्जना संरचित दृष्टिकोण अनुसरण गर्दछ। प्रणालीले सबै मानक वेब विकास फाइल प्रकारहरूलाई समर्थन गर्दछ।
+जसरी वास्तुकारको कार्यालयमा ब्लूप्रिन्टहरू व्यवस्थित गरिन्छ, VSCode.dev मा फाइल सिर्जना संरचित दृष्टिकोण अनुसरण गर्दछ। प्रणालीले सबै मानक वेब विकास फाइल प्रकारहरूलाई समर्थन गर्दछ।
 
 **फाइल सिर्जना प्रक्रिया:**
 
-1. Explorer साइडबारमा लक्षित फोल्डरमा नेभिगेट गर्नुहोस्
-2. फोल्डर नाममा होभर गर्नुहोस् "New File" आइकन (📄+) प्रकट गर्न
+1. एक्सप्लोरर साइडबारमा लक्षित फोल्डरमा नेभिगेट गर्नुहोस्
+2. फोल्डर नाममा होभर गर्नुहोस् "नयाँ फाइल" आइकन (📄+) प्रकट गर्न
 3. उपयुक्त एक्सटेन्सन सहित फाइल नाम प्रविष्ट गर्नुहोस् (`style.css`, `script.js`, `index.html`)
-4. फाइल सिर्जना गर्न Enter थिच्नुहोस्
+4. फाइल सिर्जना गर्न इन्टर थिच्नुहोस्
 
 ![नयाँ फाइल सिर्जना गर्दै](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.ne.png)
 
 **नामकरण परम्पराहरू:**
 - फाइल उद्देश्य संकेत गर्ने वर्णनात्मक नामहरू प्रयोग गर्नुहोस्
 - उचित सिन्ट्याक्स हाइलाइटिङको लागि फाइल एक्सटेन्सनहरू समावेश गर्नुहोस्
-- परियोजनाहरूमा लगातार नामकरण ढाँचाहरू अनुसरण गर्नुहोस्
+- परियोजनाहरूमा समान नामकरण ढाँचाहरू अनुसरण गर्नुहोस्
 - स्पेसको सट्टा लोअरकेस अक्षरहरू र हाइफनहरू प्रयोग गर्नुहोस्
 
 ### फाइलहरू सम्पादन र बचत गर्दै
 
-यहाँ वास्तविक रमाइलो सुरु हुन्छ! VSCode.dev को एडिटर उपयोगी सुविधाहरूले भरिएको छ जसले कोडिङलाई सहज र सहज बनाउँछ। यो कोडका लागि वास्तवमै स्मार्ट लेखन सहायक जस्तै हो।
+यहाँ वास्तविक रमाइलो सुरु हुन्छ! VSCode.dev को सम्पादक उपयोगी सुविधाहरूले भरिएको छ जसले कोडिङलाई सहज र सहज बनाउँछ। यो कोडको लागि धेरै स्मार्ट लेखन सहायक भएको जस्तै हो।
 
 **तपाईंको सम्पादन कार्यप्रवाह:**
 
-1. Explorer मा कुनै पनि फाइलमा क्लिक गर्नुहोस् यसलाई मुख्य क्षेत्रमा खोल्न
+1. एक्सप्लोररमा कुनै पनि फाइलमा क्लिक गर्नुहोस् यसलाई मुख्य क्षेत्रमा खोल्न
 2. टाइप गर्न सुरु गर्नुहोस् र VSCode.dev ले तपाईंलाई रंग, सुझाव, र त्रुटि स्पटिङको साथ मद्दत गरेको हेर्नुहोस्
-3. Ctrl+S (Windows/Linux) वा Cmd+S (Mac) प्रयोग गरेर आफ्नो काम बचत गर्नुहोस् – यद्यपि यसले स्वचालित रूपमा पनि बचत गर्दछ!
+3. Ctrl+S (Windows/Linux) वा Cmd+S (Mac) सँग आफ्नो काम बचत गर्नुहोस् – यद्यपि यसले स्वचालित रूपमा पनि बचत गर्दछ!
 
 ![VSCode.dev मा फाइलहरू सम्पादन गर्दै](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ne.png)
 
-**कोडिङ गर्दा हुने चिसो कुराहरू:**
-- तपाईंको कोड सुन्दर रूपमा रंग-कोड गरिएको छ त्यसैले यो पढ्न सजिलो छ
-- VSCode.dev ले तपाईंलाई टाइप गर्दा पूर्णता सुझाव दिन्छ (जस्तै अटोकररेक्ट, तर धेरै स्मार्ट)
-- यसले तपाईंले बचत गर्नु अघि टाइपो र त्रुटिहरू समात्छ
-- तपाईं ब्राउजरमा जस्तै ट्याबहरूमा धेरै फाइलहरू खोल्न सक्नुहुन्छ
-- सबै कुरा पृष्ठभूमिमा स्वचालित रूपमा बचत हुन्छ
-
-> ⚠️ **छिटो टिप**: यद्यपि अटो-सेभले तपाईंको पछाडि छ, Ctrl+S वा Cmd+S थिच्नु अझै राम्रो बानी हो। यसले तुरुन्तै सबै कुरा बचत गर्दछ र त्रुटि जाँच जस्ता केही अतिरिक्त उपयोगी सुविधाहरू ट्रिगर गर्दछ।
-
-### Git को साथ संस्करण नियन्त्रण
+**कोड गर्दा हुने चाखलाग्दो कुराहरू:**
+- तपाईंको कोड सु
+- तपाईले गरेका सबै staged परिवर्तनहरूमा सन्तुष्ट हुनुहुन्छ भनेर दोहोरो जाँच गर्नुहोस्  
+- तपाईले के गर्नुभयो भनेर छोटो नोट लेख्नुहोस् (यो तपाईको "commit message" हो)  
+- सबै कुरा GitHub मा बचत गर्न checkmark बटन क्लिक गर्नुहोस्  
+- यदि तपाईले कुनै कुरा परिवर्तन गर्न चाहनुहुन्छ भने, undo आइकनले परिवर्तनहरू हटाउन मद्दत गर्दछ  
 
-जसरी पुरातत्वविद्हरू उत्खनन तहहरूको विस्तृत रेकर्डहरू बनाउँछन्, Git ले समयसँगै तपाईंको कोडमा परिवर्तनहरू ट्र्याक गर्दछ। यो प्रणालीले परियोजना इतिहासलाई सुरक्षित गर्दछ र आवश्यक परेमा तपाईंलाई अघिल्लो संस्करणहरूमा फर्कन सक्षम बनाउँछ। VSCode.dev मा एकीकृत Git कार्यक्षमता समावेश छ।
+**राम्रो commit message लेख्ने तरिका (यो सोचेभन्दा सजिलो छ!):**  
+- तपाईले के गर्नुभयो भनेर मात्र वर्णन गर्नुहोस्, जस्तै "Add contact form" वा "Fix broken navigation"  
+- छोटो र स्पष्ट राख्नुहोस् – ट्वीट जत्तिकै छोटो, निबन्ध जस्तो लामो होइन  
+- "Add", "Fix", "Update", वा "Remove" जस्ता क्रियात्मक शब्दबाट सुरु गर्नुहोस्  
+- **राम्रो उदाहरणहरू**: "Add responsive navigation menu", "Fix mobile layout issues", "Update colors for better accessibility"  
 
-**स्रोत नियन्त्रण इन्टरफेस:**
+> 💡 **छिटो नेभिगेसन टिप**: GitHub repository मा फर्कन र तपाईले committed परिवर्तनहरू अनलाइन हेर्नको लागि माथि बायाँ रहेको hamburger menu (☰) प्रयोग गर्नुहोस्। यो तपाईको editing environment र GitHub को home बीचको जादुई द्वार जस्तै हो!  
 
-1. एक्टिभिटी बारमा 🌿 आइकन मार्फत स्रोत नियन्त्रण प्यानल पहुँच गर्नुहोस्
-2. परिवर्तन गरिएको फाइलहरू "Changes" सेक्सनमा देखा पर्छन्
-3. रंग कोडिङले परिवर्तन प्रकारहरू संकेत गर्दछ: थपहरूको लागि हरियो, हटाउनेहरूको लागि रातो
+## विस्तारहरूको साथ कार्यक्षमता सुधार गर्दै  
 
-![स्रोत नियन्त्रणमा परिवर्तनहरू हेर्दै](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ne.png)
+जसरी एक कुशल कारीगरको कार्यशालामा विभिन्न कार्यहरूको लागि विशेष उपकरणहरू हुन्छन्, VSCode.dev लाई पनि विस्तारहरू प्रयोग गरेर अनुकूलित गर्न सकिन्छ जसले विशिष्ट क्षमताहरू थप्छ। यी समुदायद्वारा विकसित प्लगइनहरूले कोड फर्म्याटिङ, लाइभ प्रिभ्यू, र Git एकीकरण जस्ता सामान्य विकास आवश्यकताहरूलाई सम्बोधन गर्छन्।  
 
-**तपाईंको काम बचत गर्दै (कमिट कार्यप्रवाह):**
+Extension Marketplace मा विश्वभरका विकासकर्ताहरूले बनाएका हजारौं निःशुल्क उपकरणहरू छन्। प्रत्येक विस्तारले विशेष workflow चुनौतीहरू समाधान गर्दछ, जसले तपाईलाई तपाईको विशिष्ट आवश्यकताहरू र प्राथमिकताहरू अनुरूप व्यक्तिगत विकास वातावरण निर्माण गर्न अनुमति दिन्छ।  
 
 ```mermaid
-flowchart TD
-    A[Make changes to files] --> B[View changes in Source Control]
-    B --> C[Stage changes by clicking +]
-    C --> D[Write descriptive commit message]
-    D --> E[Click checkmark to commit]
-    E --> F[Changes pushed to GitHub]
+mindmap
+  root((Extension Ecosystem))
+    Essential Categories
+      Productivity
+        Live Server
+        Auto Rename Tag
+        Bracket Pair Colorizer
+        GitLens
+      Code Quality
+        Prettier
+        ESLint
+        Spell Checker
+        Error Lens
+      Language Support
+        HTML CSS Support
+        JavaScript ES6
+        Python Extension
+        Markdown Preview
+      Themes & UI
+        Dark+ Modern
+        Material Icon Theme
+        Peacock
+        Rainbow Brackets
+    Discovery Methods
+      Popular Rankings
+        Download Counts
+        User Ratings
+        Recent Updates
+        Community Reviews
+      Recommendations
+        Workspace Suggestions
+        Language-based
+        Workflow-specific
+        Team Standards
 ```
+  
+### तपाईको उपयुक्त विस्तारहरू खोज्दै  
 
-**यहाँ तपाईंको चरण-दर-चरण प्रक्रिया छ:**
-- तपाईं बचत गर्न चाहनुभएको फाइलहरूको छेउमा "+" आइकनमा क्लिक गर्नुहोस् (यसले तिनीहरूलाई "स्टेज" गर्दछ)
-- तपाईंले स्टेज गरिएका सबै परिवर्तनहरूमा खुसी हुनुहुन्छ भनेर डबल-जाँच गर्नुहोस्
-- तपाईंले के गर्नुभयो भनेर छोटो नोट लेख्नुहोस् (यो तपाईंको "कमिट सन्देश" हो)
-- सबै कुरा GitHub मा बचत गर्न चेकमार्क बटनमा क्लिक गर्नुहोस्
-- यदि तपाईंले कुनै कुरामा आफ्नो विचार परिवर्तन गर्नुभयो भने, Undo आइकनले तपाईंलाई परिवर्तनहरू खारेज गर्न दिन्छ
+Extension Marketplace धेरै राम्रोसँग व्यवस्थित छ, त्यसैले तपाईलाई आवश्यक पर्ने कुरा खोज्न गाह्रो हुनेछैन। यो विशेष उपकरणहरू र त्यस्ता चिजहरू पत्ता लगाउन मद्दत गर्न डिजाइन गरिएको छ जुन तपाईलाई थाहा पनि थिएन!  
 
-**राम्रो कमिट सन्देश लेख्दै (यो सोच्नुभन्दा सजिलो छ!):**
-- केवल तपाईंले के गर्नुभयो वर्णन गर्नुहोस्, जस्तै "Add contact form" वा "Fix broken navigation"
-- छोटो र मीठो राख्नुहोस् – निबन्ध होइन, ट्वीट लम्बाइ सोच्नुहोस्
-- "Add", "Fix", "Update", वा "Remove" जस्ता क्रिया शब्दहरूबाट सुरु गर्नुहोस्
-- **राम्रो उदाहरणहरू**: "Add responsive navigation menu", "Fix mobile layout issues", "Update colors for better accessibility"
+**Marketplace मा कसरी पुग्ने:**  
 
-> 💡 **छिटो नेभिगेसन टिप**: माथि बायाँपट्टि ह्याम्बर्गर मेनु (☰) प्रयोग गरेर आफ्नो GitHub रिपोजिटरीमा फर्कनुहोस् र आफ्नो कमिट गरिएको परिवर्तनहरू अनलाइन हेर्नुहोस्। यो तपाईंको सम्पादन वातावरण र GitHub मा तपाईंको परियोजनाको घर बीचको पोर्टल जस्तै हो!
+1. Activity Bar मा Extensions आइकन (🧩) क्लिक गर्नुहोस्  
+2. वरिपरि ब्राउज गर्नुहोस् वा केही विशेष खोज्नुहोस्  
+3. चासो लाग्ने कुनै पनि कुरामा क्लिक गरेर थप जानकारी प्राप्त गर्नुहोस्  
 
-## एक्सटेन्सनहरूको साथ कार्यक्षमता बढाउँदै
+![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ne.png)  
 
-जसरी एक शिल्पकारको कार्यशालामा विभिन्न कार्यहरूको लागि विशेष उपकरणहरू समावेश छन्, VSCode.dev लाई एक्सटेन्सनहरूसँग अनुकूलित गर्न सकिन्छ जसले विशिष्ट क्षमताहरू थप्छ। यी समुदाय-विकसित प्लगइनहरूले कोड फर्म्याटिङ, लाइभ प्रिभ्यू, र उन्नत Git एकीकरण जस्ता सामान्य विकास आवश्यकताहरूलाई सम्बोधन गर्छन्।
+**त्यहाँ के देख्नुहुन्छ:**  
 
+| Section | भित्र के छ | किन उपयोगी छ |  
+|----------|---------|----------|  
+| **Installed** | तपाईले पहिले नै थपेका विस्तारहरू | तपाईको व्यक्तिगत कोडिङ टूलकिट |  
+| **Popular** | सबैभन्दा मनपर्ने | धेरै विकासकर्ताहरूले सिफारिस गरेका |  
+| **Recommended** | तपाईको प्रोजेक्टको लागि स्मार्ट सुझावहरू | VSCode.dev को उपयोगी सिफारिसहरू |  
 
-- प्रत्येक एक्सटेन्सनले रेटिङ, डाउनलोड संख्या, र वास्तविक प्रयोगकर्ताको समीक्षा देखाउँछ
-- तपाईंले प्रत्येक एक्सटेन्सनले के गर्छ भन्ने स्पष्ट विवरण र स्क्रिनशट्स पाउनुहुन्छ
-- सबै कुरा स्पष्ट रूपमा अनुकूलता जानकारीसहित चिन्हित गरिएको छ
-- समान एक्सटेन्सनहरू सुझाव दिइन्छ ताकि तपाईं विकल्पहरू तुलना गर्न सक्नुहुन्छ
+**ब्राउज गर्न सजिलो बनाउने कुरा:**  
+- प्रत्येक विस्तारले रेटिङ, डाउनलोड संख्या, र वास्तविक प्रयोगकर्ताको समीक्षा देखाउँछ  
+- प्रत्येक विस्तारले के गर्छ भन्ने स्पष्ट विवरण र स्क्रिनशटहरू प्रदान गर्दछ  
+- सबै कुरा compatibility जानकारीसहित स्पष्ट रूपमा चिन्हित गरिएको छ  
+- समान विस्तारहरू सुझाव दिइन्छ ताकि तपाईले विकल्पहरू तुलना गर्न सक्नुहुन्छ  
 
-### एक्सटेन्सनहरू स्थापना गर्नुहोस् (यो धेरै सजिलो छ!)
+### विस्तारहरू स्थापना गर्दै (यो धेरै सजिलो छ!)  
 
-तपाईंको एडिटरमा नयाँ शक्ति थप्न केवल एउटा बटन क्लिक गर्नु जत्तिकै सजिलो छ। एक्सटेन्सनहरू सेकेन्डमै स्थापना हुन्छन् र तुरुन्तै काम गर्न थाल्छन् – कुनै रिस्टार्ट आवश्यक छैन, कुनै पर्खाइ छैन।
+तपाईको editor मा नयाँ क्षमता थप्नु बटन क्लिक गर्ने जत्तिकै सजिलो छ। विस्तारहरू सेकेन्डमा स्थापना हुन्छन् र तुरुन्तै काम गर्न सुरु गर्छन् – कुनै restart आवश्यक छैन, कुनै प्रतीक्षा छैन।  
 
-**तपाईंले गर्नुपर्ने सबै कुरा यहाँ छ:**
+**तपाईले गर्नुपर्ने सबै:**  
 
-1. तपाईंलाई चाहिएको कुरा खोज्नुहोस् (जस्तै "live server" वा "prettier" खोज्ने प्रयास गर्नुहोस्)
-2. राम्रो देखिने एकमा क्लिक गरेर थप विवरण हेर्नुहोस्
-3. यसले के गर्छ भनेर पढ्नुहोस् र रेटिङ जाँच गर्नुहोस्
-4. निलो "Install" बटनमा क्लिक गर्नुहोस् र तपाईं सक्नुभयो!
+1. तपाईलाई चाहिने कुरा खोज्नुहोस् (जस्तै "live server" वा "prettier" खोज्नुहोस्)  
+2. राम्रो देखिनेमा क्लिक गरेर थप विवरण हेर्नुहोस्  
+3. यो के गर्छ भनेर पढ्नुहोस् र रेटिङ जाँच गर्नुहोस्  
+4. निलो "Install" बटन क्लिक गर्नुहोस् र तपाईको काम सकियो!  
 
-![एक्सटेन्सनहरू स्थापना गर्दै](../../../../8-code-editor/images/install-extension.gif)
+![Installing extensions](../../../../8-code-editor/images/install-extension.gif)  
 
-**पर्दा पछाडि के हुन्छ:**
-- एक्सटेन्सन स्वतः डाउनलोड हुन्छ र सेटअप हुन्छ
-- नयाँ सुविधाहरू तुरुन्तै तपाईंको इन्टरफेसमा देखा पर्छन्
-- सबै कुरा तुरुन्तै काम गर्न थाल्छ (गम्भीर रूपमा, यो यति छिटो छ!)
-- यदि तपाईं साइन इन हुनुहुन्छ भने, एक्सटेन्सन तपाईंको सबै उपकरणहरूमा सिंक हुन्छ
+**पर्दा पछाडि के हुन्छ:**  
+- विस्तार स्वतः डाउनलोड हुन्छ र सेटअप हुन्छ  
+- नयाँ सुविधाहरू तपाईको interface मा तुरुन्तै देखा पर्छन्  
+- सबै कुरा तुरुन्तै काम गर्न सुरु हुन्छ (गम्भीरतासाथ, यो यति छिटो छ!)  
+- यदि तपाई signed in हुनुहुन्छ भने, विस्तार सबै उपकरणहरूमा sync हुन्छ  
 
-**केही एक्सटेन्सनहरू म सिफारिस गर्छु:**
-- **Live Server**: तपाईंको वेबसाइट कोड गर्दा वास्तविक समयमा अपडेट हेर्नुहोस् (यो जादुई छ!)
-- **Prettier**: तपाईंको कोडलाई स्वचालित रूपमा सफा र व्यावसायिक देखिने बनाउँछ
-- **Auto Rename Tag**: एउटा HTML ट्याग परिवर्तन गर्दा यसको जोडी पनि अपडेट हुन्छ
-- **Bracket Pair Colorizer**: तपाईंको ब्र्याकेटहरू रंग-कोड गर्दछ ताकि तपाईं कहिल्यै हराउनु नपरोस्
-- **GitLens**: तपाईंको Git सुविधाहरूलाई धेरै उपयोगी जानकारीसहित सुपरचार्ज गर्दछ
+**केही सिफारिस गरिएका विस्तारहरू:**  
+- **Live Server**: तपाईको वेबसाइट कोड गर्दा वास्तविक समयमा अपडेट हेर्नुहोस् (यो जादुई छ!)  
+- **Prettier**: तपाईको कोडलाई स्वचालित रूपमा सफा र व्यावसायिक देखिने बनाउँछ  
+- **Auto Rename Tag**: एउटा HTML tag परिवर्तन गर्दा यसको जोडी पनि अपडेट हुन्छ  
+- **Bracket Pair Colorizer**: तपाईका ब्र्याकेटहरूलाई रंगीन बनाउँछ ताकि तपाई कहिल्यै हराउनु नपरोस्  
+- **GitLens**: तपाईको Git सुविधाहरूलाई धेरै उपयोगी जानकारीसहित सुपरचार्ज गर्दछ  
 
-### तपाईंको एक्सटेन्सनहरू अनुकूलन गर्दै
+### तपाईका विस्तारहरू अनुकूलित गर्दै  
 
-धेरै एक्सटेन्सनहरू सेटिङ्ससहित आउँछन् जसलाई तपाईं आफ्नो आवश्यकता अनुसार समायोजन गर्न सक्नुहुन्छ। यसलाई कारको सीट र ऐनाहरू समायोजन गर्ने जस्तै सोच्नुहोस् – सबैको आफ्नै प्राथमिकता हुन्छ!
+धेरै विस्तारहरूमा सेटिङहरू हुन्छन् जसलाई तपाईले आफ्नो आवश्यकता अनुसार समायोजन गर्न सक्नुहुन्छ। यसलाई कारको सीट र ऐना समायोजन गर्ने जस्तै सोच्नुहोस् – सबैको आफ्नै प्राथमिकता हुन्छ!  
 
-**एक्सटेन्सन सेटिङ्स समायोजन गर्दै:**
+**Extension सेटिङहरू समायोजन गर्ने तरिका:**  
 
-1. एक्सटेन्सन प्यानलमा तपाईंको स्थापना गरिएको एक्सटेन्सन खोज्नुहोस्
-2. यसको नामको छेउमा रहेको सानो गियर आइकन (⚙️) खोज्नुहोस् र क्लिक गर्नुहोस्
-3. ड्रपडाउनबाट "Extension Settings" चयन गर्नुहोस्
-4. तपाईंको कार्यप्रवाहको लागि सही लाग्ने गरी चीजहरू समायोजन गर्नुहोस्
+1. Extensions panel मा तपाईको installed extension खोज्नुहोस्  
+2. यसको नामको छेउमा रहेको सानो gear आइकन (⚙️) खोज्नुहोस् र क्लिक गर्नुहोस्  
+3. Dropdown बाट "Extension Settings" चयन गर्नुहोस्  
+4. तपाईको workflow अनुसार चीजहरू समायोजन गर्नुहोस्  
 
-![एक्सटेन्सन सेटिङ्स अनुकूलन गर्दै](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ne.png)
+![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ne.png)  
 
-**तपाईंले समायोजन गर्न चाहन सक्ने सामान्य चीजहरू:**
-- तपाईंको कोड कसरी फर्म्याट हुन्छ (tabs vs spaces, लाइन लम्बाइ, आदि)
-- कुन किबोर्ड सर्टकटहरूले विभिन्न कार्यहरू ट्रिगर गर्छ
-- एक्सटेन्सनले कुन फाइल प्रकारहरूसँग काम गर्नुपर्छ
-- विशिष्ट सुविधाहरू अन वा अफ गरेर चीजहरू सफा राख्नुहोस्
+**तपाईले समायोजन गर्न चाहन सक्ने सामान्य कुराहरू:**  
+- तपाईको कोड कसरी फर्म्याट हुन्छ (tabs vs spaces, line length, आदि)  
+- कुन keyboard shortcuts विभिन्न कार्यहरू ट्रिगर गर्छन्  
+- कुन file types मा विस्तारले काम गर्नुपर्छ  
+- विशिष्ट सुविधाहरू अन वा अफ गरेर चीजहरू सफा राख्नुहोस्  
 
-### तपाईंको एक्सटेन्सनहरू व्यवस्थित राख्दै
+### तपाईका विस्तारहरू व्यवस्थित राख्दै  
 
-जति धेरै चाखलाग्दा एक्सटेन्सनहरू पत्ता लगाउनुहुन्छ, तपाईं आफ्नो संग्रहलाई सफा र सुचारु राख्न चाहनुहुन्छ। VSCode.dev ले यो व्यवस्थापन गर्न धेरै सजिलो बनाउँछ।
+तपाईले धेरै राम्रो विस्तारहरू पत्ता लगाउनुभयो भने, तपाई आफ्नो संग्रहलाई सफा र सुचारु राख्न चाहनुहुन्छ। VSCode.dev ले यसलाई व्यवस्थापन गर्न धेरै सजिलो बनाउँछ।  
 
-**तपाईंको एक्सटेन्सन व्यवस्थापन विकल्पहरू:**
+**तपाईका विस्तार व्यवस्थापन विकल्पहरू:**  
 
-| तपाईं के गर्न सक्नुहुन्छ | यो कहिले उपयोगी हुन्छ | प्रो टिप |
-|--------|---------|----------|
-| **Disable** | एक्सटेन्सनले समस्या उत्पन्न गरिरहेको छ कि छैन परीक्षण गर्दै | यदि तपाईंलाई फिर्ता चाहिन्छ भने अनइन्स्टल गर्नुभन्दा राम्रो |
-| **Uninstall** | तपाईंलाई आवश्यक नभएको एक्सटेन्सनहरू पूर्ण रूपमा हटाउँदै | तपाईंको वातावरणलाई सफा र छिटो राख्छ |
-| **Update** | नवीनतम सुविधाहरू र बग फिक्सहरू प्राप्त गर्दै | सामान्यतया स्वतः हुन्छ, तर जाँच गर्न लायक छ |
+| तपाई के गर्न सक्नुहुन्छ | कहिले उपयोगी हुन्छ | Pro Tip |  
+|--------|---------|----------|  
+| **Disable** | कुनै विस्तारले समस्या गरिरहेको छ कि छैन परीक्षण गर्न | यदि तपाईलाई पछि चाहिन्छ भने uninstall गर्नुभन्दा राम्रो |  
+| **Uninstall** | तपाईलाई आवश्यक नभएको विस्तारहरू पूर्ण रूपमा हटाउने | तपाईको वातावरणलाई सफा र छिटो राख्छ |  
+| **Update** | नयाँ सुविधाहरू र bug fixes प्राप्त गर्ने | सामान्यतया स्वतः हुन्छ, तर जाँच गर्न लायक छ |  
 
-**म कसरी एक्सटेन्सनहरू व्यवस्थापन गर्न मन पराउँछु:**
-- प्रत्येक केही महिनामा, मैले स्थापना गरेको चीजहरूको समीक्षा गर्छु र प्रयोग नगरेको चीजहरू हटाउँछु
-- मैले एक्सटेन्सनहरू अपडेट राख्छु ताकि नवीनतम सुधारहरू र सुरक्षा फिक्सहरू प्राप्त गर्न सकूँ
-- यदि केही सुस्त देखिन्छ भने, मैले अस्थायी रूपमा एक्सटेन्सनहरू डिसेबल गर्छु कि ती मध्ये कुनै एक कारण हो कि भनेर हेर्न
-- जब एक्सटेन्सनहरूले प्रमुख अपडेटहरू प्राप्त गर्छन्, म अपडेट नोटहरू पढ्छु – कहिलेकाहीँ त्यहाँ चाखलाग्दा नयाँ सुविधाहरू हुन्छन्!
+**म कसरी विस्तारहरू व्यवस्थापन गर्न मन पराउँछु:**  
+- केही महिनामा एकपटक, मैले स्थापना गरेका विस्तारहरू समीक्षा गर्छु र प्रयोग नगरेका चीजहरू हटाउँछु  
+- म विस्तारहरू अपडेट राख्छु ताकि नयाँ सुधार र सुरक्षा fixes प्राप्त गर्न सकूँ  
+- यदि केही सुस्त देखिन्छ भने, म अस्थायी रूपमा विस्तारहरू disable गर्छु कि कुनै एक कारण हो कि भनेर हेर्न  
+- जब विस्तारहरूले major updates पाउँछन्, म update notes पढ्छु – कहिलेकाहीँ त्यहाँ नयाँ सुविधाहरू हुन्छन्!  
+
+> ⚠️ **प्रदर्शन टिप**: विस्तारहरू अद्भुत छन्, तर धेरै धेरै हुँदा चीजहरू सुस्त हुन सक्छ। ती विस्तारहरूमा ध्यान केन्द्रित गर्नुहोस् जसले वास्तवमै तपाईको जीवन सजिलो बनाउँछ र कहिल्यै प्रयोग नगर्ने विस्तारहरू हटाउन नडराउनुहोस्।  
+
+### 🎯 शैक्षिक जाँच: विकास वातावरण अनुकूलन  
+
+**आर्किटेक्चर बुझाइ**: तपाईले समुदायद्वारा बनाइएका विस्तारहरू प्रयोग गरेर व्यावसायिक विकास वातावरण अनुकूलन गर्न सिक्नुभएको छ। यो ठूला विकास टोलीहरूले मानकीकृत टूलचेन निर्माण गर्ने तरिकाको प्रतिबिम्ब हो।  
+
+**मुख्य अवधारणाहरू सिकिएको:**  
+- **Extension Discovery**: विशिष्ट विकास चुनौतीहरू समाधान गर्ने उपकरणहरू खोज्दै  
+- **Environment Configuration**: व्यक्तिगत वा टोलीको प्राथमिकताहरू अनुसार उपकरणहरू अनुकूलन गर्दै  
+- **Performance Optimization**: कार्यक्षमता र प्रणाली प्रदर्शनको सन्तुलन  
+- **Community Collaboration**: विश्वव्यापी विकासकर्ता समुदायद्वारा बनाइएका उपकरणहरूको उपयोग गर्दै  
+
+**उद्योग सम्बन्ध**: Extension Ecosystems ले VS Code, Chrome DevTools, र आधुनिक IDEs जस्ता प्रमुख विकास प्लेटफर्महरूलाई शक्ति प्रदान गर्दछ। विस्तारहरू मूल्यांकन, स्थापना, र कन्फिगर गर्ने तरिका बुझ्नु व्यावसायिक विकास workflow को लागि आवश्यक छ।  
+
+**प्रतिबिम्ब प्रश्न**: तपाई १० विकासकर्ताको टोलीको लागि मानकीकृत विकास वातावरण सेटअप गर्न कसरी अगाडि बढ्नुहुन्छ? स्थिरता, प्रदर्शन, र व्यक्तिगत प्राथमिकताहरूलाई विचार गर्नुहोस्।  
+
+## 📈 तपाईको Cloud Development Mastery Timeline  
+
+```mermaid
+timeline
+    title Professional Cloud Development Journey
+    
+    section Platform Foundations
+        Cloud Development Understanding
+            : Master web-based editing concepts
+            : Connect GitHub integration patterns
+            : Navigate professional interfaces
+    
+    section Workflow Mastery
+        File & Project Management
+            : Create organized project structures
+            : Master syntax highlighting benefits
+            : Handle multi-file editing workflows
+        
+        Version Control Integration
+            : Understand Git visualization
+            : Practice commit message standards
+            : Master change tracking workflows
+    
+    section Environment Customization
+        Extension Ecosystem
+            : Discover productivity extensions
+            : Configure development preferences
+            : Optimize performance vs functionality
+        
+        Professional Setup
+            : Build consistent workflows
+            : Create reusable configurations
+            : Establish team standards
+    
+    section Industry Readiness
+        Cloud-First Development
+            : Master remote development practices
+            : Understand collaborative workflows
+            : Build platform-independent skills
+        
+        Professional Practices
+            : Follow industry standards
+            : Create maintainable workflows
+            : Prepare for team environments
+```
+  
+**🎓 Graduation Milestone**: तपाईले प्रमुख टेक कम्पनीहरूका व्यावसायिक विकासकर्ताहरूले प्रयोग गर्ने समान उपकरणहरू र workflow प्रयोग गरेर cloud-based development मा सफलता हासिल गर्नुभएको छ। यी सीपहरू सफ्टवेयर विकासको भविष्यको प्रतिनिधित्व गर्छन्।  
 
-> ⚠️ **प्रदर्शन टिप**: एक्सटेन्सनहरू अद्भुत छन्, तर धेरै धेरै हुँदा चीजहरू सुस्त हुन सक्छ। ती एक्सटेन्सनहरूमा ध्यान केन्द्रित गर्नुहोस् जसले वास्तवमै तपाईंको जीवनलाई सजिलो बनाउँछ र कहिल्यै प्रयोग नगर्ने एक्सटेन्सनहरू अनइन्स्टल गर्न नडराउनुहोस्।
+**🔄 Next Level Capabilities**:  
+- उन्नत cloud development प्लेटफर्महरू (Codespaces, GitPod) अन्वेषण गर्न तयार  
+- वितरित विकास टोलीहरूमा काम गर्न तयार  
+- विश्वव्यापी open source projects मा योगदान गर्न सक्षम  
+- आधुनिक DevOps र continuous integration अभ्यासहरूको लागि आधार तयार  
 
-## GitHub Copilot Agent Challenge 🚀
+## GitHub Copilot Agent Challenge 🚀  
 
-जस्तै नासाले अन्तरिक्ष मिसनहरूको लागि संरचित दृष्टिकोण प्रयोग गर्छ, यो चुनौतीले VSCode.dev सीपहरूको पूर्ण कार्यप्रवाह परिदृश्यमा प्रणालीगत प्रयोग समावेश गर्दछ।
+जसरी NASA ले space missions को लागि संरचित दृष्टिकोण अपनाउँछ, यो चुनौतीले VSCode.dev सीपहरूको पूर्ण workflow परिदृश्यमा प्रणालीगत प्रयोग समावेश गर्दछ।  
 
-**उद्देश्य:** VSCode.dev को दक्षता प्रदर्शन गर्दै व्यापक वेब विकास कार्यप्रवाह स्थापना गर्नुहोस्।
+**Objective:** VSCode.dev को दक्षता प्रदर्शन गर्दै व्यापक वेब विकास workflow स्थापना गर्नुहोस्।  
 
-**प्रोजेक्ट आवश्यकताहरू:** Agent मोड सहायता प्रयोग गर्दै, यी कार्यहरू पूरा गर्नुहोस्:
-1. एउटा विद्यमान रिपोजिटरी फोर्क गर्नुहोस् वा नयाँ सिर्जना गर्नुहोस्
-2. HTML, CSS, र JavaScript फाइलहरूसहित कार्यात्मक प्रोजेक्ट संरचना स्थापना गर्नुहोस्
-3. तीन विकास-सुधार गर्ने एक्सटेन्सनहरू स्थापना र कन्फिगर गर्नुहोस्
-4. वर्णनात्मक कमिट सन्देशहरूसहित संस्करण नियन्त्रण अभ्यास गर्नुहोस्
-5. फिचर ब्रान्च सिर्जना र संशोधनको साथ प्रयोग गर्नुहोस्
-6. README.md फाइलमा प्रक्रिया र सिकाइहरू दस्तावेज गर्नुहोस्
+**Project requirements:** Agent mode सहायता प्रयोग गर्दै यी कार्यहरू पूरा गर्नुहोस्:  
+1. कुनै repository fork गर्नुहोस् वा नयाँ बनाउनुहोस्  
+2. HTML, CSS, र JavaScript files सहित कार्यात्मक project structure स्थापना गर्नुहोस्  
+3. तीन विकास-सुधार गर्ने विस्तारहरू स्थापना र कन्फिगर गर्नुहोस्  
+4. वर्णनात्मक commit messages को साथ version control अभ्यास गर्नुहोस्  
+5. feature branch creation र modification मा प्रयोग गर्नुहोस्  
+6. README.md file मा प्रक्रिया र सिकाइहरू दस्तावेज गर्नुहोस्  
 
-यो अभ्यासले सबै VSCode.dev अवधारणाहरूलाई व्यावहारिक कार्यप्रवाहमा समेकित गर्दछ जुन भविष्यका विकास परियोजनाहरूमा लागू गर्न सकिन्छ।
+यो अभ्यासले सबै VSCode.dev अवधारणाहरूलाई व्यावहारिक workflow मा समेट्छ जुन भविष्यका विकास परियोजनाहरूमा लागू गर्न सकिन्छ।  
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बारे थप जान्नुहोस्।  
 
-## असाइनमेन्ट
+## Assignment  
 
-यी सीपहरूलाई वास्तविक परीक्षणमा लैजाने समय! मैले एउटा व्यावहारिक प्रोजेक्ट तयार गरेको छु जसले तपाईंलाई हामीले कभर गरेका सबै कुरा अभ्यास गर्न दिन्छ: [VSCode.dev प्रयोग गरेर रिजुमे वेबसाइट बनाउनुहोस्](./assignment.md)
+अब यी सीपहरूलाई वास्तविक परीक्षणमा लैजाने समय हो! मैले एउटा hands-on project तयार गरेको छु जसले तपाईलाई हामीले कभर गरेका सबै कुरा अभ्यास गर्न दिन्छ: [Create a resume website using VSCode.dev](./assignment.md)  
 
-यो असाइनमेन्टले तपाईंलाई ब्राउजरमा पूर्ण रूपमा व्यावसायिक रिजुमे वेबसाइट निर्माण गर्न मार्गदर्शन गर्दछ। तपाईंले हामीले अन्वेषण गरेका सबै VSCode.dev सुविधाहरू प्रयोग गर्नुहुनेछ, र अन्त्यमा, तपाईंसँग राम्रो देखिने वेबसाइट र तपाईंको नयाँ कार्यप्रवाहमा ठोस आत्मविश्वास हुनेछ।
+यो assignment ले तपाईलाई browser मा पूर्ण रूपमा व्यावसायिक resume website निर्माण गर्न सिकाउँछ। तपाईले हामीले अन्वेषण गरेका सबै VSCode.dev सुविधाहरू प्रयोग गर्नुहुनेछ, र अन्त्यमा, तपाईसँग राम्रो देखिने website र तपाईको नयाँ workflow मा ठोस आत्मविश्वास हुनेछ।  
 
-## अन्वेषण गर्दै र तपाईंको सीपहरू बढाउँदै
+## Keep Exploring and Growing Your Skills  
 
-तपाईंसँग अब एक ठोस आधार छ, तर अझ धेरै चाखलाग्दा चीजहरू पत्ता लगाउन बाँकी छ! यहाँ केही स्रोतहरू र विचारहरू छन् जसले तपाईंको VSCode.dev सीपहरू अर्को स्तरमा लैजान मद्दत गर्नेछ:
+तपाईसँग अब राम्रो आधार छ, तर अझ धेरै चाखलाग्दो कुरा पत्ता लगाउन बाँकी छ! यहाँ तपाईका VSCode.dev सीपहरूलाई अर्को स्तरमा लैजाने केही स्रोतहरू र विचारहरू छन्:  
 
-**बुकमार्क गर्न लायक आधिकारिक डकहरू:**
-- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – ब्राउजर-आधारित सम्पादनको पूर्ण मार्गदर्शिका
-- [GitHub Codespaces](https://docs.github.com/en/codespaces) – जब तपाईं क्लाउडमा अझ धेरै शक्ति चाहनुहुन्छ
+**Bookmark गर्न लायक आधिकारिक डकहरू:**  
+- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – browser-based editing को पूर्ण मार्गदर्शन  
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) – जब तपाईलाई cloud मा अझ धेरै शक्ति चाहिन्छ  
 
-**अर्को प्रयोग गर्न चाखलाग्दा सुविधाहरू:**
-- **Keyboard Shortcuts**: ती किबोर्ड कम्बोहरू सिक्नुहोस् जसले तपाईंलाई कोडिङ निन्जा जस्तो महसुस गराउँछ
-- **Workspace Settings**: विभिन्न प्रकारका प्रोजेक्टहरूको लागि विभिन्न वातावरण सेटअप गर्नुहोस्
-- **Multi-root Workspaces**: एकै समयमा धेरै रिपोजिटरीहरूमा काम गर्नुहोस् (धेरै उपयोगी!)
-- **Terminal Integration**: तपाईंको ब्राउजरमै कमाण्ड-लाइन उपकरणहरू पहुँच गर्नुहोस्
+**अर्को प्रयोग गर्न चाखलाग्दो सुविधाहरू:**  
+- **Keyboard Shortcuts**: key combos सिक्नुहोस् जसले तपाईलाई coding ninja जस्तो महसुस गराउँछ  
+- **Workspace Settings**: विभिन्न प्रकारका परियोजनाहरूको लागि फरक वातावरण सेटअप गर्नुहोस्  
+- **Multi-root Workspaces**: एकै समयमा धेरै repositories मा काम गर्नुहोस् (धेरै उपयोगी!)  
+- **Terminal Integration**: तपाईको browser मा command-line tools पहुँच गर्नुहोस्  
 
-**अभ्यासका लागि विचारहरू:**
-- केही ओपन-सोर्स प्रोजेक्टहरूमा जम्प गर्नुहोस् र VSCode.dev प्रयोग गरेर योगदान गर्नुहोस् – यो फिर्ता दिने राम्रो तरिका हो!
-- विभिन्न एक्सटेन्सनहरू प्रयास गर्नुहोस् ताकि तपाईंको लागि उपयुक्त सेटअप पत्ता लगाउन सक्नुहोस्
-- तपाईंले प्रायः निर्माण गर्ने साइटहरूको प्रकारका लागि प्रोजेक्ट टेम्प्लेटहरू सिर्जना गर्नुहोस्
-- ब्रान्चिङ र मर्जिङ जस्ता Git कार्यप्रवाह अभ्यास गर्नुहोस् – यी सीपहरू टोली प्रोजेक्टहरूमा सुन हुन्
+**अभ्यासका लागि विचारहरू:**  
+- केही open-source projects मा सामेल हुनुहोस् र VSCode.dev प्रयोग गरेर योगदान गर्नुहोस् – यो योगदान गर्ने राम्रो तरिका हो!  
+- विभिन्न विस्तारहरू प्रयास गर्नुहोस् र तपाईको उपयुक्त सेटअप पत्ता लगाउनुहोस्  
+- तपाईले प्राय: निर्माण गर्ने साइटहरूको प्रकारको लागि project templates बनाउनुहोस्  
+- branching र merging जस्ता Git workflows अभ्यास गर्नुहोस् – यी सीपहरू टोली परियोजनाहरूमा अमूल्य छन्  
 
 ---
 
-**तपाईंले ब्राउजर-आधारित विकासमा महारत हासिल गर्नुभयो!** 🎉 जस्तै पोर्टेबल उपकरणहरूको आविष्कारले वैज्ञानिकहरूलाई टाढाका स्थानहरूमा अनुसन्धान गर्न सक्षम बनायो, VSCode.dev ले तपाईंलाई कुनै पनि इन्टरनेट-संलग्न उपकरणबाट व्यावसायिक कोडिङ गर्न सक्षम बनाउँछ।
+**तपाईले browser-based development मा दक्षता हासिल गर्नुभएको छ!** 🎉 जसरी पोर्टेबल उपकरणहरूको आविष्कारले वैज्ञानिकहरूलाई टाढा-टाढा स्थानहरूमा अनुसन्धान गर्न अनुमति दियो, VSCode.dev ले तपाईलाई कुनै पनि इन्टरनेट-संयुक्त उपकरणबाट व्यावसायिक कोडिङ गर्न सक्षम बनाउँछ।  
 
-यी सीपहरूले वर्तमान उद्योग अभ्यासहरू प्रतिबिम्बित गर्छन् – धेरै व्यावसायिक विकासकर्ताहरूले क्लाउड-आधारित विकास वातावरणहरू यसको लचिलोपन र पहुँचयोग्यताका लागि प्रयोग गर्छन्। तपाईंले व्यक्तिगत प्रोजेक्टहरूदेखि ठूलो टोली सहयोगसम्म स्केल हुने कार्यप्रवाह सिक्नुभएको छ।
+यी सीपहरूले वर्तमान उद्योग अभ्यासहरूलाई प्रतिबिम्बित गर्छन् – धेरै व्यावसायिक विकासकर्ताहरूले cloud-based development environments को लचिलोपन र पहुँचको लागि प्रयोग गर्छन्। तपाईले व्यक्तिगत परियोजनाहरूदेखि ठूला टोली सहयोगसम्मको लागि स्केल हुने workflow सिक्नुभएको छ।  
 
-यी प्रविधिहरू तपाईंको अर्को विकास प्रोजेक्टमा लागू गर्नुहोस्! 🚀
+तपाईको अर्को विकास परियोजनामा यी प्रविधिहरू लागू गर्नुहोस्! 🚀  
 
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुनेछैनौं।
\ No newline at end of file
diff --git a/translations/ne/9-chat-project/README.md b/translations/ne/9-chat-project/README.md
index 594453713d..938cd4e24c 100644
--- a/translations/ne/9-chat-project/README.md
+++ b/translations/ne/9-chat-project/README.md
@@ -1,86 +1,277 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46d665af66e51524598af34a42b9b663",
-  "translation_date": "2025-10-22T16:55:35+00:00",
+  "original_hash": "2066c17078e9d18b5e309f31d8e8bc24",
+  "translation_date": "2025-11-03T15:30:23+00:00",
   "source_file": "9-chat-project/README.md",
   "language_code": "ne"
 }
 -->
 # एआईको साथमा च्याट सहायक बनाउनुहोस्
 
-स्टार ट्रेकमा जहाजको कम्प्युटरसँग कुरा गर्दै जटिल प्रश्न सोध्ने र विचारशील उत्तर पाउने दृश्य सम्झनुहोस्? १९६० को दशकमा विज्ञान कल्पना जस्तो देखिने यो कुरा अहिले तपाईंले वेब प्रविधिहरू प्रयोग गरेर बनाउन सक्नुहुन्छ।
+स्टार ट्रेकमा जहाजको कम्प्युटरसँग कुरा गर्दै जटिल प्रश्न सोध्ने र विचारशील उत्तर प्राप्त गर्ने दृश्य सम्झनुहुन्छ? १९६० को दशकमा विज्ञान कल्पनाजस्तो देखिने कुरा अब तपाईंले पहिले नै जान्ने वेब प्रविधिहरू प्रयोग गरेर निर्माण गर्न सक्नुहुन्छ।
 
-यस पाठमा, हामी HTML, CSS, JavaScript, र केही ब्याकएन्ड एकीकरणको प्रयोग गरेर एआई च्याट सहायक बनाउनेछौं। तपाईंले सिक्दै आएको सीपहरू शक्तिशाली एआई सेवाहरूमा जडान गर्न सक्ने तरिका पत्ता लगाउनुहुनेछ, जसले सन्दर्भ बुझ्न र अर्थपूर्ण उत्तरहरू उत्पन्न गर्न सक्छ।
+यस पाठमा, हामी HTML, CSS, JavaScript, र केही ब्याकएन्ड एकीकरण प्रयोग गरेर एआई च्याट सहायक बनाउनेछौं। तपाईंले सिक्दै आएको सीपहरू शक्तिशाली एआई सेवाहरूमा जडान गर्न सक्ने तरिका पत्ता लगाउनुहुनेछ, जसले सन्दर्भ बुझ्न र अर्थपूर्ण उत्तरहरू उत्पन्न गर्न सक्छ।
 
-एआईलाई विशाल पुस्तकालयको पहुँच जस्तै सोच्नुहोस्, जसले जानकारी मात्र खोज्न सक्दैन, तर तपाईंको विशिष्ट प्रश्नहरूलाई ध्यानमा राखेर सुसंगत उत्तरहरू पनि तयार गर्न सक्छ। हजारौं पृष्ठहरू खोज्नुको सट्टा, तपाईंले सिधा सन्दर्भयुक्त उत्तरहरू पाउनुहुन्छ।
+एआईलाई विशाल पुस्तकालयको पहुँच जस्तै सोच्नुहोस्, जसले जानकारी मात्र फेला पार्न सक्दैन तर यसलाई तपाईंको विशिष्ट प्रश्नहरूमा अनुकूलित उत्तरहरूमा संश्लेषण गर्न सक्छ। हजारौं पृष्ठहरू खोज्ने सट्टा, तपाईंले प्रत्यक्ष, सन्दर्भगत उत्तरहरू प्राप्त गर्नुहुन्छ।
 
-एकीकरण परिचित वेब प्रविधिहरूको सहकार्यबाट हुन्छ। HTML च्याट इन्टरफेस बनाउँछ, CSS दृश्य डिजाइनको हेरचाह गर्छ, JavaScript प्रयोगकर्ता अन्तर्क्रियाहरू व्यवस्थापन गर्छ, र ब्याकएन्ड APIले सबैलाई एआई सेवाहरूमा जडान गर्छ। यो एक सिम्फनी सिर्जना गर्न विभिन्न अर्केस्ट्रा खण्डहरू मिलेर काम गर्ने जस्तै हो।
+एकीकरण परिचित वेब प्रविधिहरूको सहकार्यबाट हुन्छ। HTML च्याट इन्टरफेस बनाउँछ, CSS दृश्य डिजाइनको हेरचाह गर्छ, JavaScript प्रयोगकर्ता अन्तर्क्रियाहरू व्यवस्थापन गर्छ, र ब्याकएन्ड एपीआईले सबैलाई एआई सेवाहरूमा जडान गर्छ। यो एक सिम्फनी सिर्जना गर्न विभिन्न अर्केस्ट्रा खण्डहरू कसरी सँगै काम गर्छन् भन्ने जस्तै हो।
 
 हामी प्राकृतिक मानव सञ्चार र मेसिन प्रशोधनको बीचमा पुल निर्माण गर्दैछौं। तपाईंले एआई सेवा एकीकरणको प्राविधिक कार्यान्वयन र अन्तर्क्रियाहरू सहज महसुस गराउने डिजाइन ढाँचाहरू सिक्नुहुनेछ।
 
-यस पाठको अन्त्यसम्ममा, एआई एकीकरण रहस्यमय प्रक्रियाजस्तो होइन, तर तपाईंले काम गर्न सक्ने अर्को API जस्तो महसुस हुनेछ। तपाईंले ChatGPT र Claude जस्ता एप्लिकेसनहरूलाई शक्ति दिने आधारभूत ढाँचाहरू बुझ्नुहुनेछ, तपाईंले सिक्दै आएको वेब विकास सिद्धान्तहरूको प्रयोग गरेर।
+यस पाठको अन्त्यसम्ममा, एआई एकीकरण रहस्यमय प्रक्रियाजस्तो कम र तपाईंले काम गर्न सक्ने अर्को एपीआईजस्तो महसुस हुनेछ। तपाईंले ChatGPT र Claude जस्ता अनुप्रयोगहरूलाई शक्ति दिने आधारभूत ढाँचाहरू बुझ्नुहुनेछ, तपाईंले सिक्दै आएको वेब विकास सिद्धान्तहरू प्रयोग गरेर।
 
-तपाईंको तयार परियोजना यस प्रकार देखिनेछ:
+## ⚡ तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा
+
+**व्यस्त विकासकर्ताहरूका लागि छिटो सुरु गर्ने मार्ग**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Get GitHub token]
+    B --> C[Test AI playground]
+    C --> D[Copy Python code]
+    D --> E[See AI responses]
+```
+
+- **मिनेट १**: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) मा जानुहोस् र व्यक्तिगत पहुँच टोकन सिर्जना गर्नुहोस्
+- **मिनेट २**: प्लेग्राउन्ड इन्टरफेसमा एआई अन्तर्क्रियाहरू प्रत्यक्ष परीक्षण गर्नुहोस्
+- **मिनेट ३**: "Code" ट्याबमा क्लिक गर्नुहोस् र Python स्निपेट प्रतिलिपि गर्नुहोस्
+- **मिनेट ४**: आफ्नो टोकनको साथमा कोड स्थानीय रूपमा चलाउनुहोस्: `GITHUB_TOKEN=your_token python test.py`
+- **मिनेट ५**: आफ्नो कोडबाट पहिलो एआई उत्तर उत्पन्न भएको हेर्नुहोस्
+
+**छिटो परीक्षण कोड**:
+```python
+import os
+from openai import OpenAI
+
+client = OpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key="your_token_here"
+)
+
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Hello AI!"}],
+    model="openai/gpt-4o-mini"
+)
+
+print(response.choices[0].message.content)
+```
+
+**यसको महत्त्व किन छ**: ५ मिनेटमा, तपाईंले प्रोग्रामेटिक एआई अन्तर्क्रियाको जादू अनुभव गर्नुहुनेछ। यो तपाईंले प्रयोग गर्ने प्रत्येक एआई अनुप्रयोगलाई शक्ति दिने आधारभूत निर्माण खण्ड हो।
+
+तपाईंको समाप्त परियोजना यस्तो देखिनेछ:
 
 ![च्याट एप इन्टरफेसमा प्रयोगकर्ता र एआई सहायक बीचको संवाद देखाउँदै](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ne.png)
 
+## 🗺️ एआई अनुप्रयोग विकासको माध्यमबाट तपाईंको सिक्ने यात्रा
+
+```mermaid
+journey
+    title From Web Development to AI Integration
+    section Understanding AI Foundations
+      Discover generative AI concepts: 4: You
+      Explore GitHub Models platform: 6: You
+      Master AI parameters and prompts: 8: You
+    section Backend Integration
+      Build Python API server: 5: You
+      Implement AI function calls: 7: You
+      Handle async operations: 8: You
+    section Frontend Development
+      Create modern chat interface: 6: You
+      Master real-time interactions: 8: You
+      Build responsive user experience: 9: You
+    section Professional Application
+      Deploy complete AI system: 7: You
+      Optimize performance patterns: 8: You
+      Create production-ready app: 9: You
+```
+
+**तपाईंको यात्रा गन्तव्य**: यस पाठको अन्त्यसम्ममा, तपाईंले आधुनिक एआई सहायकहरू जस्तै ChatGPT, Claude, र Google Bard लाई शक्ति दिने समान प्रविधिहरू र ढाँचाहरू प्रयोग गरेर पूर्ण एआई-संचालित अनुप्रयोग निर्माण गर्नुभएको हुनेछ।
+
 ## एआई बुझ्दै: रहस्यबाट महारथसम्म
 
-कोडमा प्रवेश गर्नु अघि, हामी केसँग काम गर्दैछौं भन्ने कुरा बुझौं। यदि तपाईंले पहिले API प्रयोग गर्नुभएको छ भने, तपाईंलाई आधारभूत ढाँचा थाहा छ: अनुरोध पठाउनुहोस्, प्रतिक्रिया प्राप्त गर्नुहोस्।
+कोडमा डुब्नु अघि, हामी केसँग काम गर्दैछौं भन्ने कुरा बुझौं। यदि तपाईंले पहिले एपीआईहरू प्रयोग गर्नुभएको छ भने, तपाईंले आधारभूत ढाँचा थाहा पाउनुभएको छ: अनुरोध पठाउनुहोस्, प्रतिक्रिया प्राप्त गर्नुहोस्।
 
-एआई APIहरू समान संरचना अनुसरण गर्छन्, तर डेटाबेसबाट पहिले नै भण्डारण गरिएको डाटा पुनःप्राप्त गर्ने सट्टा, तिनीहरूले विशाल पाठबाट सिकेका ढाँचाहरूको आधारमा नयाँ प्रतिक्रियाहरू उत्पन्न गर्छन्। यो पुस्तकालय क्याटलग प्रणाली र ज्ञानवान पुस्तकालयकारको बीचको भिन्नता जस्तै हो, जसले धेरै स्रोतहरूबाट जानकारी संश्लेषण गर्न सक्छ।
+एआई एपीआईहरूले समान संरचना अनुसरण गर्छन्, तर डेटाबेसबाट पूर्व-संचित डेटा पुनःप्राप्त गर्ने सट्टा, तिनीहरूले विशाल पाठको ढाँचाबाट सिकेका ढाँचाहरूको आधारमा नयाँ प्रतिक्रियाहरू उत्पन्न गर्छन्। यो पुस्तकालय सूची प्रणाली र ज्ञानवान पुस्तकालयकारको बीचको भिन्नता जस्तै सोच्नुहोस्, जसले धेरै स्रोतहरूबाट जानकारी संश्लेषण गर्न सक्छ।
 
 ### "जेनरेटिभ एआई" वास्तवमा के हो?
 
-रोसेटा स्टोनले ज्ञात र अज्ञात भाषाहरू बीचको ढाँचाहरू पत्ता लगाएर विद्वानहरूलाई इजिप्टका हाइरोग्लिफिक्स बुझ्न कसरी मद्दत गर्‍यो भन्ने कुरा विचार गर्नुहोस्। एआई मोडेलहरूले पनि यस्तै काम गर्छन् – तिनीहरूले भाषा कसरी काम गर्छ भनेर बुझ्न विशाल पाठमा ढाँचाहरू पत्ता लगाउँछन्, त्यसपछि ती ढाँचाहरू प्रयोग गरेर नयाँ प्रश्नहरूको उपयुक्त उत्तरहरू उत्पन्न गर्छन्।
+रोसेटा स्टोनले ज्ञात र अज्ञात भाषाहरू बीचको ढाँचाहरू फेला पारेर विद्वानहरूलाई इजिप्टियन हाइरोग्लिफिक्स बुझ्न अनुमति दिएको जस्तै सोच्नुहोस्। एआई मोडेलहरूले विशाल पाठमा ढाँचाहरू फेला पार्छन् ताकि भाषा कसरी काम गर्छ भन्ने बुझ्न सकियोस्, त्यसपछि ती ढाँचाहरू प्रयोग गरेर नयाँ प्रश्नहरूको उपयुक्त उत्तरहरू उत्पन्न गरिन्छ।
+
+**यसलाई सरल तुलना गरेर बुझौं:**
+- **परम्परागत डेटाबेस**: तपाईंको जन्म प्रमाणपत्रको लागि सोध्नुहोस् – तपाईंले हरेक पटक उही दस्तावेज प्राप्त गर्नुहुन्छ
+- **सर्च इन्जिन**: पुस्तकालयकारलाई बिरालाहरूको बारेमा पुस्तकहरू फेला पार्न सोध्नुहोस् – तिनीहरूले उपलब्ध कुरा देखाउँछन्
+- **जेनरेटिभ एआई**: ज्ञानवान साथीलाई बिरालाहरूको बारेमा सोध्नुहोस् – तिनीहरूले तपाईंलाई रोचक कुरा आफ्नै शब्दमा बताउँछन्, तपाईंले जान्न चाहेको कुरामा अनुकूलित
 
-**यसलाई सरल तुलना गरेर बुझाऔं:**
-- **परम्परागत डेटाबेस**: तपाईंको जन्म प्रमाणपत्र माग्दा – तपाईंले हरेक पटक उही कागजात पाउनुहुन्छ
-- **सर्च इन्जिन**: पुस्तकालयकारलाई बिरालाहरूको बारेमा पुस्तकहरू खोज्न सोध्दा – तिनीहरूले उपलब्ध सामग्री देखाउँछन्
-- **जेनरेटिभ एआई**: ज्ञानवान साथीलाई बिरालाहरूको बारेमा सोध्दा – तिनीहरूले तपाईंलाई रोचक कुरा आफ्नै शब्दमा बताउँछन्, तपाईंको चाहनालाई ध्यानमा राखेर
+```mermaid
+graph LR
+    A[Your Question] --> B[AI Model]
+    B --> C[Pattern Recognition]
+    C --> D[Content Generation]
+    D --> E[Contextual Response]
+    
+    F[Training Data<br/>Books, Articles, Web] --> B
+```
 
-### एआई मोडेलहरूले कसरी सिक्छन् (सरल संस्करण)
+### एआई मोडेलहरू कसरी सिक्छन् (सरल संस्करण)
 
-एआई मोडेलहरूले पुस्तकहरू, लेखहरू, र संवादहरू समावेश गर्ने विशाल डेटासेटहरूमा पहुँच गरेर सिक्छन्। यस प्रक्रियामा, तिनीहरूले निम्न कुराहरूमा ढाँचाहरू पहिचान गर्छन्:
-- लेखनमा विचारहरू कसरी संरचित हुन्छन्
-- कुन शब्दहरू सामान्यत: सँगै देखा पर्छन्
-- संवादहरू सामान्यत: कसरी प्रवाहित हुन्छन्
-- औपचारिक र अनौपचारिक सञ्चार बीचको सन्दर्भात्मक भिन्नता
+एआई मोडेलहरूले पुस्तकहरू, लेखहरू, र संवादहरू समावेश गर्ने विशाल डेटासेटहरूमा पहुँच मार्फत सिक्छन्। यस प्रक्रियामा, तिनीहरूले निम्न कुराहरूमा ढाँचाहरू पहिचान गर्छन्:
+- लेखिएको सञ्चारमा विचारहरू कसरी संरचित छन्
+- कुन शब्दहरू सामान्यतया सँगै देखा पर्छन्
+- संवादहरू सामान्यतया कसरी प्रवाह हुन्छन्
+- औपचारिक र अनौपचारिक सञ्चार बीचको सन्दर्भगत भिन्नता
 
-**यो पुरातत्वविदहरूले प्राचीन भाषाहरू डिकोड गर्ने तरिकासँग मिल्दोजुल्दो छ**: तिनीहरूले व्याकरण, शब्दावली, र सांस्कृतिक सन्दर्भ बुझ्न हजारौं उदाहरणहरू विश्लेषण गर्छन्, अन्ततः सिकेका ढाँचाहरू प्रयोग गरेर नयाँ पाठहरूको व्याख्या गर्न सक्षम हुन्छन्।
+**यो पुरातत्वविदहरूले प्राचीन भाषाहरू डिकोड गर्ने तरिकाजस्तै हो**: तिनीहरूले व्याकरण, शब्दावली, र सांस्कृतिक सन्दर्भ बुझ्न हजारौं उदाहरणहरू विश्लेषण गर्छन्, अन्ततः ती सिकेका ढाँचाहरू प्रयोग गरेर नयाँ पाठहरूको व्याख्या गर्न सक्षम हुन्छन्।
 
-### किन GitHub मोडेलहरू?
+### किन GitHub Models?
 
-हामी GitHub मोडेलहरू प्रयोग गर्दैछौं किनभने यसले हामीलाई हाम्रो आफ्नै एआई पूर्वाधार सेटअप नगरी उद्यम-स्तरको एआई पहुँच दिन्छ (जुन अहिले तपाईंले गर्न चाहनुहुन्न!)। यो मौसम API प्रयोग गरेर मौसमको भविष्यवाणी गर्ने जस्तै हो, मौसम स्टेशनहरू हरेक ठाउँमा सेटअप नगरी।
+हामी GitHub Models प्रयोग गर्दैछौं व्यावहारिक कारणका लागि – यसले हामीलाई हाम्रो आफ्नै एआई पूर्वाधार सेटअप नगरी उद्यम-स्तरको एआई पहुँच दिन्छ (जुन, विश्वास गर्नुहोस्, तपाईं अहिले गर्न चाहनुहुन्न!)। यो मौसम एपीआई प्रयोग गरेर मौसमको भविष्यवाणी गर्ने प्रयास नगरी मौसम स्टेशनहरू सेटअप गर्ने प्रयास जस्तै हो।
 
 यो "एआई-एज-अ-सर्भिस" हो, र सबैभन्दा राम्रो कुरा? यो सुरु गर्न निःशुल्क छ, त्यसैले तपाईंले ठूलो बिलको चिन्ता नगरी प्रयोग गर्न सक्नुहुन्छ।
 
-GitHub मोडेलहरू प्रयोग गरेर, तपाईंले व्यावसायिक-स्तरको एआई क्षमताहरूलाई डेवलपर-मैत्री इन्टरफेस मार्फत पहुँच गर्न सक्नुहुन्छ। [GitHub मोडेल प्लेग्राउन्ड](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) एक परीक्षण वातावरणको रूपमा काम गर्छ जहाँ तपाईं विभिन्न एआई मोडेलहरू प्रयोग गर्न सक्नुहुन्छ र तिनीहरूको क्षमताहरू बुझ्न सक्नुहुन्छ।
-**यहाँ किन FastAPI हाम्रो निर्माणको लागि उपयुक्त छ:**
-- **डिफल्ट रूपमा Async**: एकै समयमा धेरै AI अनुरोधहरूलाई बिना अड्किए व्यवस्थापन गर्न सक्छ
-- **स्वचालित डकुमेन्टेसन**: `/docs` मा जानुहोस् र निःशुल्क सुन्दर, अन्तरक्रियात्मक API डकुमेन्टेसन पृष्ठ प्राप्त गर्नुहोस्
-- **निर्मित मान्यता**: समस्याहरू उत्पन्न हुनु अघि नै त्रुटिहरू पत्ता लगाउँछ
-- **चटपटे छिटो**: Python फ्रेमवर्कहरू मध्ये एकदम छिटो
-- **आधुनिक Python**: Python का सबै नवीनतम र उत्कृष्ट सुविधाहरू प्रयोग गर्दछ
+```mermaid
+graph LR
+    A[Frontend Chat UI] --> B[Your Backend API]
+    B --> C[GitHub Models API]
+    C --> D[AI Model Processing]
+    D --> C
+    C --> B
+    B --> A
+```
+
+हामी हाम्रो ब्याकएन्ड एकीकरणको लागि GitHub Models प्रयोग गर्नेछौं, जसले व्यावसायिक-स्तरको एआई क्षमताहरूलाई विकासकर्ता-अनुकूल इन्टरफेस मार्फत पहुँच प्रदान गर्दछ। [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) विभिन्न एआई मोडेलहरू प्रयोग गर्न र तिनीहरूको क्षमताहरूलाई कोडमा कार्यान्वयन गर्नु अघि बुझ्नको लागि परीक्षण वातावरणको रूपमा काम गर्दछ।
+
+## 🧠 एआई अनुप्रयोग विकास पारिस्थितिकी तन्त्र
+
+```mermaid
+mindmap
+  root((AI Development))
+    Understanding AI
+      Generative Models
+        Pattern Recognition
+        Content Generation
+        Context Understanding
+        Response Synthesis
+      AI Parameters
+        Temperature Control
+        Token Limits
+        Top-p Filtering
+        System Prompts
+    Backend Architecture
+      API Integration
+        GitHub Models
+        Authentication
+        Request Handling
+        Error Management
+      Python Infrastructure
+        FastAPI Framework
+        Async Operations
+        Environment Security
+        CORS Configuration
+    Frontend Experience
+      Chat Interface
+        Real-time Updates
+        Message History
+        User Feedback
+        Loading States
+      Modern Web Tech
+        ES6 Classes
+        Async/Await
+        DOM Manipulation
+        Event Handling
+    Professional Patterns
+      Security Best Practices
+        Token Management
+        Input Validation
+        XSS Prevention
+        Error Boundaries
+      Production Readiness
+        Performance Optimization
+        Responsive Design
+        Accessibility
+        Testing Strategies
+```
+
+**मुख्य सिद्धान्त**: एआई अनुप्र
+**२. आउटपुट स्वरूपण**: एआईलाई उत्तरहरू कसरी संरचना गर्ने भनेर बताउनुहोस्  
+```python
+system_prompt = """
+You are a technical mentor. Always structure your responses as:
+1. Quick Answer (1-2 sentences)
+2. Detailed Explanation 
+3. Code Example
+4. Common Pitfalls to Avoid
+5. Next Steps for Learning
+"""
+```
+  
+**३. बाध्यता सेटिङ**: एआईले के नगर्नु पर्छ भनेर परिभाषित गर्नुहोस्  
+```python
+system_prompt = """
+You are a coding tutor focused on teaching best practices. Never write complete 
+solutions for the user - instead, guide them with hints and questions so they 
+learn by doing. Always explain the 'why' behind coding decisions.
+"""
+```
+  
+
+#### किन यो तपाईंको च्याट सहायकको लागि महत्त्वपूर्ण छ  
+
+सिस्टम प्रॉम्प्टहरू बुझ्नाले तपाईंलाई विशेष एआई सहायकहरू सिर्जना गर्न अद्भुत शक्ति दिन्छ:  
+- **ग्राहक सेवा बोट**: सहयोगी, धैर्यशील, नीति-सचेत  
+- **शिक्षण ट्यूटर**: उत्साहजनक, चरण-दर-चरण, बुझाइ जाँच गर्ने  
+- **रचनात्मक साझेदार**: कल्पनाशील, विचारहरूमा निर्माण गर्ने, "के हुन्छ यदि?" सोध्ने  
+- **प्राविधिक विशेषज्ञ**: सटीक, विस्तृत, सुरक्षा-सचेत  
+
+**मुख्य कुरा**: तपाईं केवल एआई एपीआईलाई कल गर्दै हुनुहुन्न – तपाईं आफ्नो विशिष्ट प्रयोगको लागि सेवा गर्ने अनुकूलित एआई व्यक्तित्व सिर्जना गर्दै हुनुहुन्छ। यही कारणले आधुनिक एआई अनुप्रयोगहरू सामान्यभन्दा अनुकूल र उपयोगी महसुस हुन्छ।  
+
+### 🎯 शैक्षिक जाँच: एआई व्यक्तित्व प्रोग्रामिङ  
+
+**रोक्नुहोस् र विचार गर्नुहोस्**: तपाईंले अहिले मात्र प्रणाली प्रॉम्प्टहरू मार्फत एआई व्यक्तित्वहरू प्रोग्राम गर्न सिक्नुभयो। यो आधुनिक एआई अनुप्रयोग विकासमा एक मौलिक सीप हो।  
+
+**छोटो आत्म-मूल्यांकन**:  
+- के तपाईं व्याख्या गर्न सक्नुहुन्छ कि प्रणाली प्रॉम्प्टहरू सामान्य प्रयोगकर्ता सन्देशहरूबाट कसरी फरक छन्?  
+- तापक्रम र top_p प्यारामिटरहरू बीचको भिन्नता के हो?  
+- तपाईं कसरी विशिष्ट प्रयोगको लागि प्रणाली प्रॉम्प्ट सिर्जना गर्नुहुन्छ (जस्तै कोडिङ ट्यूटर)?  
+
+**वास्तविक संसारको सम्बन्ध**: प्रणाली प्रॉम्प्ट प्रविधिहरू जुन तपाईंले सिक्नुभएको छ, प्रत्येक प्रमुख एआई अनुप्रयोगमा प्रयोग गरिन्छ - GitHub Copilot को कोडिङ सहायता देखि ChatGPT को संवादात्मक इन्टरफेससम्म। तपाईं प्रमुख टेक कम्पनीहरूको एआई उत्पादन टोलीहरूले प्रयोग गर्ने समान ढाँचाहरूमा महारत हासिल गर्दै हुनुहुन्छ।  
+
+**चुनौती प्रश्न**: तपाईंले विभिन्न प्रयोगकर्ता प्रकारहरू (सुरुवातकर्ता बनाम विशेषज्ञ) को लागि विभिन्न एआई व्यक्तित्वहरू कसरी डिजाइन गर्न सक्नुहुन्छ? विचार गर्नुहोस् कि कसरी एउटै आधारभूत एआई मोडेलले प्रॉम्प्ट इन्जिनियरिङ मार्फत विभिन्न दर्शकहरूलाई सेवा गर्न सक्छ।  
+
+## FastAPI प्रयोग गरेर वेब एपीआई निर्माण: तपाईंको उच्च-प्रदर्शन एआई संचार केन्द्र  
+
+अब हामी फ्रन्टएन्डलाई एआई सेवाहरूमा जडान गर्ने ब्याकएन्ड निर्माण गर्नेछौं। हामी FastAPI प्रयोग गर्नेछौं, आधुनिक पायथन फ्रेमवर्क जसले एआई अनुप्रयोगहरूको लागि एपीआई निर्माणमा उत्कृष्टता प्रदान गर्दछ।  
+
+FastAPI ले यस प्रकारको परियोजनाको लागि धेरै फाइदाहरू प्रदान गर्दछ: समवर्ती अनुरोधहरू ह्यान्डल गर्न निर्मित async समर्थन, स्वचालित एपीआई डकुमेन्टेसन निर्माण, र उत्कृष्ट प्रदर्शन। तपाईंको FastAPI सर्भरले फ्रन्टएन्डबाट अनुरोधहरू प्राप्त गर्ने, एआई सेवाहरूसँग संवाद गर्ने, र स्वरूपित प्रतिक्रियाहरू फर्काउने मध्यस्थको रूपमा काम गर्दछ।  
+
+### किन एआई अनुप्रयोगहरूको लागि FastAPI?  
 
-**र किन हामीलाई ब्याकएन्ड आवश्यक छ:**
+तपाईं सोच्न सक्नुहुन्छ: "के म फ्रन्टएन्ड जाभास्क्रिप्टबाट एआईलाई सिधै कल गर्न सक्दिन?" वा "किन FastAPI Flask वा Django को सट्टा?" उत्कृष्ट प्रश्नहरू!  
 
-**सुरक्षा**: तपाईंको AI API कुञ्जी पासवर्ड जस्तै हो – यदि तपाईं यसलाई फ्रन्टएन्ड JavaScript मा राख्नुहुन्छ भने, तपाईंको वेबसाइटको स्रोत कोड हेर्ने जो कोहीले यसलाई चोर्न सक्छ र तपाईंको AI क्रेडिटहरू प्रयोग गर्न सक्छ। ब्याकएन्डले संवेदनशील प्रमाणहरू सुरक्षित राख्छ।
+**यहाँ किन FastAPI हाम्रो निर्माणको लागि उपयुक्त छ:**  
+- **डिफल्ट रूपमा Async**: धेरै एआई अनुरोधहरू एकैपटक ह्यान्डल गर्न सक्छ बिना अड्किने  
+- **स्वचालित डकुमेन्टेसन**: `/docs` मा जानुहोस् र निःशुल्क सुन्दर, अन्तरक्रियात्मक एपीआई डकुमेन्टेसन पृष्ठ प्राप्त गर्नुहोस्  
+- **निर्मित मान्यता**: समस्याहरू उत्पन्न हुनु अघि त्रुटिहरू समात्छ  
+- **चमकदार छिटो**: पायथन फ्रेमवर्कहरू मध्ये एक छिटो  
+- **आधुनिक पायथन**: पायथनका सबै नवीनतम र उत्कृष्ट सुविधाहरू प्रयोग गर्दछ  
 
-**रेट लिमिटिंग र नियन्त्रण**: ब्याकएन्डले प्रयोगकर्ताहरूले कति पटक अनुरोध गर्न सक्छन् भन्ने नियन्त्रण गर्न, प्रयोगकर्ता प्रमाणीकरण कार्यान्वयन गर्न, र प्रयोग ट्र्याक गर्न लगिङ थप्न अनुमति दिन्छ।
+**र यहाँ किन हामीलाई ब्याकएन्ड चाहिन्छ:**  
 
-**डाटा प्रशोधन**: तपाईं संवादहरू बचत गर्न, अनुपयुक्त सामग्री फिल्टर गर्न, वा धेरै AI सेवाहरूलाई संयोजन गर्न चाहनुहुन्छ। यो तर्क ब्याकएन्डमा बस्छ।
+**सुरक्षा**: तपाईंको एआई एपीआई कुञ्जी पासवर्ड जस्तै हो – यदि तपाईं यसलाई फ्रन्टएन्ड जाभास्क्रिप्टमा राख्नुहुन्छ भने, तपाईंको वेबसाइटको स्रोत कोड हेर्ने जो कोहीले यसलाई चोर्न सक्छ र तपाईंको एआई क्रेडिटहरू प्रयोग गर्न सक्छ। ब्याकएन्डले संवेदनशील प्रमाणहरू सुरक्षित राख्छ।  
 
-**आर्किटेक्चर क्लाइन्ट-सर्भर मोडेल जस्तै देखिन्छ:**
-- **फ्रन्टएन्ड**: अन्तरक्रियाको लागि प्रयोगकर्ता इन्टरफेस तह
-- **ब्याकएन्ड API**: अनुरोध प्रशोधन र रुटिङ तह
-- **AI सेवा**: बाह्य गणना र प्रतिक्रिया उत्पादन
-- **पर्यावरण चरहरू**: सुरक्षित कन्फिगरेसन र प्रमाणपत्र भण्डारण
+**दर सीमितता र नियन्त्रण**: ब्याकएन्डले तपाईंलाई प्रयोगकर्ताहरूले कति पटक अनुरोध गर्न सक्छन् भन्ने नियन्त्रण गर्न, प्रयोगकर्ता प्रमाणीकरण कार्यान्वयन गर्न, र प्रयोग ट्र्याक गर्न लगिङ थप्न अनुमति दिन्छ।  
 
-### अनुरोध-प्रतिक्रिया प्रवाह बुझ्दै
+**डाटा प्रशोधन**: तपाईं वार्तालापहरू बचत गर्न, अनुपयुक्त सामग्री फिल्टर गर्न, वा धेरै एआई सेवाहरूलाई संयोजन गर्न चाहनुहुन्छ। यो तर्क ब्याकएन्डमा हुन्छ।  
 
-आउनुहोस्, प्रयोगकर्ताले सन्देश पठाउँदा के हुन्छ भनेर ट्रेस गरौं:
+**आर्किटेक्चर क्लाइन्ट-सर्भर मोडेल जस्तै देखिन्छ:**  
+- **फ्रन्टएन्ड**: अन्तरक्रियाको लागि प्रयोगकर्ता इन्टरफेस तह  
+- **ब्याकएन्ड एपीआई**: अनुरोध प्रशोधन र रुटिङ तह  
+- **एआई सेवा**: बाह्य गणना र प्रतिक्रिया उत्पादन  
+- **पर्यावरण चरहरू**: सुरक्षित कन्फिगरेसन र प्रमाणपत्र भण्डारण  
+
+### अनुरोध-प्रतिक्रिया प्रवाह बुझ्दै  
+
+आउनुहोस् प्रयोगकर्ताले सन्देश पठाउँदा के हुन्छ भनेर ट्रेस गरौं:  
 
 ```mermaid
 sequenceDiagram
@@ -98,16 +289,16 @@ sequenceDiagram
     API->>Frontend: {"response": "Hello! How can I help?"}
     Frontend->>User: Displays AI message
 ```
+  
+**प्रत्येक चरण बुझ्दै:**  
+1. **प्रयोगकर्ता अन्तरक्रिया**: व्यक्तिले च्याट इन्टरफेसमा टाइप गर्छ  
+2. **फ्रन्टएन्ड प्रशोधन**: जाभास्क्रिप्टले इनपुटलाई JSON रूपमा समात्छ र स्वरूपित गर्छ  
+3. **एपीआई मान्यता**: FastAPI ले Pydantic मोडेलहरू प्रयोग गरेर अनुरोधलाई स्वचालित रूपमा मान्यता दिन्छ  
+4. **एआई एकीकरण**: ब्याकएन्डले सन्दर्भ (सिस्टम प्रॉम्प्ट) थप्छ र एआई सेवालाई कल गर्छ  
+5. **प्रतिक्रिया ह्यान्डलिङ**: एपीआईले एआई प्रतिक्रिया प्राप्त गर्छ र आवश्यक परेमा यसलाई परिमार्जन गर्न सक्छ  
+6. **फ्रन्टएन्ड प्रदर्शन**: जाभास्क्रिप्टले च्याट इन्टरफेसमा प्रतिक्रिया देखाउँछ  
 
-**प्रत्येक चरण बुझ्दै:**
-1. **प्रयोगकर्ता अन्तरक्रिया**: व्यक्तिले च्याट इन्टरफेसमा टाइप गर्छ
-2. **फ्रन्टएन्ड प्रशोधन**: JavaScript ले इनपुटलाई समात्छ र JSON रूपमा ढाँचा बनाउँछ
-3. **API मान्यता**: FastAPI ले Pydantic मोडेलहरू प्रयोग गरेर अनुरोधलाई स्वचालित रूपमा मान्यता दिन्छ
-4. **AI एकीकरण**: ब्याकएन्डले सन्दर्भ (सिस्टम प्रम्प्ट) थप्छ र AI सेवालाई कल गर्छ
-5. **प्रतिक्रिया ह्यान्डलिङ**: API ले AI प्रतिक्रिया प्राप्त गर्छ र आवश्यक परेमा यसलाई परिमार्जन गर्न सक्छ
-6. **फ्रन्टएन्ड प्रदर्शन**: JavaScript ले च्याट इन्टरफेसमा प्रतिक्रिया देखाउँछ
-
-### API आर्किटेक्चर बुझ्दै
+### एपीआई आर्किटेक्चर बुझ्दै  
 
 ```mermaid
 sequenceDiagram
@@ -123,10 +314,33 @@ sequenceDiagram
     AI Function->>FastAPI: response text
     FastAPI->>Frontend: {"response": "Hello! How can I help?"}
 ```
+  
+```mermaid
+flowchart TD
+    A[User Input] --> B[Frontend Validation]
+    B --> C[HTTP POST Request]
+    C --> D[FastAPI Router]
+    D --> E[Pydantic Validation]
+    E --> F[AI Function Call]
+    F --> G[GitHub Models API]
+    G --> H[Response Processing]
+    H --> I[JSON Response]
+    I --> J[Frontend Update]
+    
+    subgraph "Security Layer"
+        K[CORS Middleware]
+        L[Environment Variables]
+        M[Error Handling]
+    end
+    
+    D --> K
+    F --> L
+    H --> M
+```
+  
+### FastAPI एप्लिकेसन सिर्जना गर्दै  
 
-### FastAPI एप्लिकेसन सिर्जना गर्दै
-
-आउनुहोस्, हाम्रो API चरणबद्ध रूपमा निर्माण गरौं। `api.py` नामक फाइल सिर्जना गर्नुहोस् र निम्न FastAPI कोड थप्नुहोस्:
+आउनुहोस् हाम्रो एपीआई चरण-दर-चरण निर्माण गरौं। `api.py` नामक फाइल सिर्जना गर्नुहोस् र निम्न FastAPI कोड थप्नुहोस्:  
 
 ```python
 # api.py
@@ -204,43 +418,43 @@ if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
 ```
+  
+**FastAPI कार्यान्वयन बुझ्दै:**  
+- **आयात गर्दछ** FastAPI आधुनिक वेब फ्रेमवर्क कार्यक्षमता र Pydantic डाटा मान्यता लागि  
+- **स्वचालित एपीआई डकुमेन्टेसन सिर्जना गर्दछ** (सर्भर चल्दा `/docs` मा उपलब्ध)  
+- **CORS मिडलवेयर सक्षम गर्दछ** विभिन्न उत्पत्तिबाट फ्रन्टएन्ड अनुरोधहरू अनुमति दिन  
+- **Pydantic मोडेलहरू परिभाषित गर्दछ** स्वचालित अनुरोध/प्रतिक्रिया मान्यता र डकुमेन्टेसनका लागि  
+- **असिंक्रोनस अन्त बिन्दुहरू प्रयोग गर्दछ** समवर्ती अनुरोधहरूसँग राम्रो प्रदर्शनका लागि  
+- **उपयुक्त HTTP स्थिति कोडहरू र त्रुटि ह्यान्डलिङ कार्यान्वयन गर्दछ** HTTPException प्रयोग गरेर  
+- **संरचित लगिङ समावेश गर्दछ** निगरानी र डिबगिङका लागि  
+- **सेवा स्थिति निगरानीका लागि स्वास्थ्य जाँच अन्त बिन्दु प्रदान गर्दछ**  
 
-**FastAPI कार्यान्वयन बुझ्दै:**
-- **आयात गर्दछ** FastAPI आधुनिक वेब फ्रेमवर्क कार्यक्षमता र Pydantic डाटा मान्यताको लागि
-- **स्वचालित API डकुमेन्टेसन सिर्जना गर्दछ** (सर्भर चल्दा `/docs` मा उपलब्ध)
-- **CORS मिडलवेयर सक्षम गर्दछ** विभिन्न उत्पत्तिबाट फ्रन्टएन्ड अनुरोधहरू अनुमति दिन
-- **Pydantic मोडेलहरू परिभाषित गर्दछ** स्वचालित अनुरोध/प्रतिक्रिया मान्यता र डकुमेन्टेसनको लागि
-- **बेहतर प्रदर्शनको लागि Async अन्त बिन्दुहरू प्रयोग गर्दछ** समवर्ती अनुरोधहरूसँग
-- **HTTP स्थिति कोडहरू र त्रुटि ह्यान्डलिङ कार्यान्वयन गर्दछ** HTTPException को साथ
-- **संरचित लगिङ समावेश गर्दछ** निगरानी र डिबगिङको लागि
-- **सेवा स्थिति निगरानीको लागि स्वास्थ्य जाँच अन्त बिन्दु प्रदान गर्दछ**
-
-**परम्परागत फ्रेमवर्कहरू भन्दा FastAPI का प्रमुख फाइदाहरू:**
-- **स्वचालित मान्यता**: Pydantic मोडेलहरूले प्रशोधन अघि डाटा अखण्डता सुनिश्चित गर्दछ
-- **अन्तरक्रियात्मक डकुमेन्टेसन**: `/docs` मा जानुहोस् स्वचालित रूपमा उत्पन्न, परीक्षणयोग्य API डकुमेन्टेसनको लागि
-- **प्रकार सुरक्षा**: Python प्रकार संकेतहरूले रनटाइम त्रुटिहरू रोक्छ र कोडको गुणस्तर सुधार गर्दछ
-- **Async समर्थन**: एकै समयमा धेरै AI अनुरोधहरू बिना रोकावट ह्यान्डल गर्नुहोस्
-- **प्रदर्शन**: वास्तविक-समय अनुप्रयोगहरूको लागि उल्लेखनीय रूपमा छिटो अनुरोध प्रशोधन
+**परम्परागत फ्रेमवर्कहरूमा FastAPI का प्रमुख फाइदाहरू:**  
+- **स्वचालित मान्यता**: Pydantic मोडेलहरूले प्रशोधन अघि डाटा अखण्डता सुनिश्चित गर्दछ  
+- **अन्तरक्रियात्मक डकुमेन्टेसन**: `/docs` मा जानुहोस् स्वचालित रूपमा उत्पन्न, परीक्षण योग्य एपीआई डकुमेन्टेसनका लागि  
+- **प्रकार सुरक्षा**: पायथन प्रकार संकेतहरूले रनटाइम त्रुटिहरू रोक्छ र कोड गुणस्तर सुधार गर्दछ  
+- **असिंक्रोनस समर्थन**: एकै समयमा धेरै एआई अनुरोधहरू ह्यान्डल गर्नुहोस् बिना रोकावट  
+- **प्रदर्शन**: वास्तविक समय अनुप्रयोगहरूको लागि महत्वपूर्ण रूपमा छिटो अनुरोध प्रशोधन  
 
-### CORS बुझ्दै: वेबको सुरक्षा गार्ड
+### CORS बुझ्दै: वेबको सुरक्षा गार्ड  
 
-CORS (Cross-Origin Resource Sharing) भवनको सुरक्षा गार्ड जस्तै हो जसले आगन्तुकहरूलाई प्रवेश गर्न अनुमति छ कि छैन भनेर जाँच गर्दछ। आउनुहोस्, यो किन महत्त्वपूर्ण छ र यसले तपाईंको अनुप्रयोगलाई कसरी असर गर्छ बुझौं।
+CORS (Cross-Origin Resource Sharing) भवनको सुरक्षा गार्ड जस्तै हो जसले आगन्तुकहरूलाई प्रवेश गर्न अनुमति छ कि छैन भनेर जाँच गर्दछ। आउनुहोस् किन यो महत्त्वपूर्ण छ र यो तपाईंको अनुप्रयोगलाई कसरी असर गर्छ भनेर बुझौं।  
 
-#### CORS के हो र यो किन छ?
+#### CORS के हो र किन यो अस्तित्वमा छ?  
 
-**समस्या**: कल्पना गर्नुहोस्, यदि कुनै पनि वेबसाइटले तपाईंको अनुमति बिना तपाईंको बैंकको वेबसाइटमा तपाईंको तर्फबाट अनुरोध गर्न सक्थ्यो। त्यो सुरक्षा दुःस्वप्न हुनेछ! ब्राउजरहरूले "Same-Origin Policy" मार्फत यो स्वचालित रूपमा रोक्छ।
+**समस्या**: कल्पना गर्नुहोस् यदि कुनै पनि वेबसाइटले तपाईंको अनुमति बिना तपाईंको बैंकको वेबसाइटमा अनुरोधहरू गर्न सक्थ्यो। त्यो सुरक्षा दुःस्वप्न हुनेछ! ब्राउजरहरूले यो "समान-उत्पत्ति नीति" मार्फत डिफल्ट रूपमा रोक्छ।  
 
-**Same-Origin Policy**: ब्राउजरहरूले केवल वेब पृष्ठहरूलाई अनुरोध गर्न अनुमति दिन्छन् जुन तिनीहरू लोड गरिएको डोमेन, पोर्ट, र प्रोटोकलसँग समान छन्।
+**समान-उत्पत्ति नीति**: ब्राउजरहरूले केवल वेब पृष्ठहरूलाई अनुरोध गर्न अनुमति दिन्छन् जुन तिनीहरू लोड गरिएको डोमेन, पोर्ट, र प्रोटोकलसँग समान छन्।  
 
-**वास्तविक संसारको उपमा**: यो अपार्टमेन्ट भवनको सुरक्षा जस्तै हो – केवल निवासीहरू (समान उत्पत्ति) ले डिफल्ट रूपमा भवनमा पहुँच गर्न सक्छन्। यदि तपाईंले साथीलाई (विभिन्न उत्पत्ति) भ्रमण गर्न दिन चाहनुहुन्छ भने, तपाईंले सुरक्षा गार्डलाई स्पष्ट रूपमा भन्नु पर्छ कि यो ठीक छ।
+**वास्तविक संसारको उपमा**: यो अपार्टमेन्ट भवन सुरक्षा जस्तै हो – केवल निवासीहरू (समान उत्पत्ति) ले डिफल्ट रूपमा भवनमा पहुँच गर्न सक्छन्। यदि तपाईंले साथीलाई (विभिन्न उत्पत्ति) भ्रमण गर्न दिन चाहनुहुन्छ भने, तपाईंले सुरक्षा गार्डलाई स्पष्ट रूपमा बताउनुपर्छ कि यो ठीक छ।  
 
-#### तपाईंको विकास वातावरणमा CORS
+#### तपाईंको विकास वातावरणमा CORS  
 
-विकासको क्रममा, तपाईंको फ्रन्टएन्ड र ब्याकएन्ड विभिन्न पोर्टहरूमा चल्छ:
-- फ्रन्टएन्ड: `http://localhost:3000` (वा HTML सीधा खोल्दा file://)
-- ब्याकएन्ड: `http://localhost:5000`
+विकासको क्रममा, तपाईंको फ्रन्टएन्ड र ब्याकएन्ड विभिन्न पोर्टहरूमा चल्छ:  
+- फ्रन्टएन्ड: `http://localhost:3000` (वा HTML सिधै खोल्दा file://)  
+- ब्याकएन्ड: `http://localhost:5000`  
 
-यी "विभिन्न उत्पत्ति" मानिन्छन्, यद्यपि तिनीहरू एउटै कम्प्युटरमा छन्!
+यी "विभिन्न उत्पत्ति" मानिन्छन् यद्यपि तिनीहरू एउटै कम्प्युटरमा छन्!  
 
 ```python
 from fastapi.middleware.cors import CORSMiddleware
@@ -248,13 +462,13 @@ from fastapi.middleware.cors import CORSMiddleware
 app = FastAPI(__name__)
 CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"
 ```
+  
+**CORS कन्फिगरेसनले व्यवहारमा के गर्छ:**  
+- **विशेष HTTP हेडरहरू थप्छ** एपीआई प्रतिक्रियाहरूमा जसले ब्राउजरहरूलाई "यो क्रस-उत्पत्ति अनुरोध अनुमति छ" भन्छ  
+- **"प्रिफ्लाइट" अनुरोधहरू ह्यान्डल गर्दछ** (ब्राउजरहरूले कहिलेकाहीँ वास्तविक अनुरोध पठाउनु अघि अनुमति जाँच गर्छन्)  
+- **ब्राउजर कन्सोलमा "CORS नीति द्वारा अवरुद्ध" त्रुटि रोक्छ**  
 
-**CORS कन्फिगरेसनले व्यवहारमा के गर्छ:**
-- **विशेष HTTP हेडरहरू थप्छ** API प्रतिक्रियाहरूमा जसले ब्राउजरहरूलाई "यो क्रस-उत्पत्ति अनुरोध अनुमति छ" भन्छ
-- **"प्रिफ्लाइट" अनुरोधहरू ह्यान्डल गर्दछ** (कहिलेकाहीं ब्राउजरहरूले वास्तविक अनुरोध पठाउनु अघि अनुमति जाँच गर्छन्)
-- **तपाईंको ब्राउजर कन्सोलमा "CORS नीति द्वारा अवरुद्ध" त्रुटि रोक्छ**
-
-#### CORS सुरक्षा: विकास बनाम उत्पादन
+#### CORS सुरक्षा: विकास बनाम उत्पादन  
 
 ```python
 # 🚨 Development: Allows ALL origins (convenient but insecure)
@@ -269,43 +483,43 @@ if app.debug:  # Development mode
 else:  # Production mode
     CORS(app, origins=["https://yourdomain.com"])
 ```
+  
+**किन यो महत्त्वपूर्ण छ**: विकासमा, `CORS(app)` तपाईंको अगाडिको ढोका अनलक गरिएको जस्तै हो – सुविधाजनक तर सुरक्षित छैन। उत्पादनमा, तपाईंले ठीक-ठीक कुन वेबसाइटहरूले तपाईंको एपीआईसँग कुरा गर्न सक्छन् भनेर निर्दिष्ट गर्न चाहनुहुन्छ।  
 
-**किन यो महत्त्वपूर्ण छ**: विकासमा, `CORS(app)` तपाईंको अगाडिको ढोका अनलक राख्न जस्तै हो – सुविधाजनक तर सुरक्षित छैन। उत्पादनमा, तपाईंले ठीकसँग कुन वेबसाइटहरूले तपाईंको APIसँग कुरा गर्न सक्छन् भनेर निर्दिष्ट गर्न चाहनुहुन्छ।
-
-#### सामान्य CORS परिदृश्यहरू र समाधानहरू
+#### सामान्य CORS परिदृश्यहरू र समाधानहरू  
 
-| परिदृश्य | समस्या | समाधान |
-|----------|---------|----------|
-| **स्थानीय विकास** | फ्रन्टएन्डले ब्याकएन्डमा पुग्न सक्दैन | FastAPI मा CORSMiddleware थप्नुहोस् |
-| **GitHub Pages + Heroku** | तैनात फ्रन्टएन्डले API मा पुग्न सक्दैन | CORS उत्पत्तिहरूमा तपाईंको GitHub Pages URL थप्नुहोस् |
-| **कस्टम डोमेन** | उत्पादनमा CORS त्रुटिहरू | CORS उत्पत्तिहरूलाई तपाईंको डोमेनसँग मिलाउन अद्यावधिक गर्नुहोस् |
-| **मोबाइल एप** | एपले वेब API मा पुग्न सक्दैन | तपाईंको एपको डोमेन थप्नुहोस् वा सावधानीपूर्वक `*` प्रयोग गर्नुहोस् |
+| परिदृश्य | समस्या | समाधान |  
+|----------|---------|----------|  
+| **स्थानीय विकास** | फ्रन्टएन्डले ब्याकएन्डमा पुग्न सक्दैन | FastAPI मा CORSMiddleware थप्नुहोस् |  
+| **GitHub Pages + Heroku** | तैनात फ्रन्टएन्डले एपीआईमा पुग्न सक्दैन | CORS उत्पत्तिहरूमा तपाईंको GitHub Pages URL थप्नुहोस् |  
+| **कस्टम डोमेन** | उत्पादनमा CORS त्रुटिहरू | CORS उत्पत्तिहरूलाई तपाईंको डोमेनसँग मिलाउन अद्यावधिक गर्नुहोस् |  
+| **मोबाइल एप** | एपले वेब एपीआईमा पुग्न सक्दैन | तपाईंको एपको डोमेन थप्नुहोस् वा सावधानीपूर्वक `*` प्रयोग गर्नुहोस् |  
 
-**प्रो टिप**: तपाईं आफ्नो ब्राउजरको Developer Tools मा Network ट्याब अन्तर्गत CORS हेडरहरू जाँच गर्न सक्नुहुन्छ। प्रतिक्रियामा `Access-Control-Allow-Origin` जस्ता हेडरहरू खोज्नुहोस्।
+**प्रो टिप**: तपाईं आफ्नो ब्राउजरको डेभलपर टूल्सको नेटवर्क ट्याबमा CORS हेडरहरू जाँच गर्न सक्नुहुन्छ। प्रतिक्रियामा `Access-Control-Allow-Origin` जस्ता हेडरहरू खोज्नुहोस्।  
 
-### त्रुटि ह्यान्डलिङ र मान्यता
+### त्रुटि ह्यान्डलिङ र मान्यता  
 
-हाम्रो API ले उचित त्रुटि ह्यान्डलिङ समावेश गरेको देख्नुहोस्:
+हाम्रो एपीआईले उचित त्रुटि ह्यान्डलिङ समावेश गरेको छ भन्ने कुरा नोट गर्नुहोस्:  
 
 ```python
 # Validate that we received a message
 if not message:
     return jsonify({"error": "Message field is required"}), 400
 ```
+  
+**मुख्य मान्यता सिद्धान्तहरू:**  
+- **आवश्यक क्षेत्रहरूको लागि जाँच गर्दछ** अनुरोधहरू प्रशोधन गर्नु अघि  
+- **अर्थपूर्ण त्रुटि सन्देशहरू JSON स्वरूपमा फर्काउँछ**  
+- **उपयुक्त HTTP स्थिति कोडहरू प्रयोग गर्दछ** (खराब अनुरोधहरूको लागि 400)  
+- **फ्रन्टएन्ड विकासकर्ताहरूलाई समस्या डिबग गर्न मद्दत गर्न स्पष्ट प्रतिक्रिया प्रदान गर्दछ**  
 
-**मुख्य मान्यता सिद्धान्तहरू:**
-- **आवश्यक क्षेत्रहरूको लागि जाँच गर्दछ** अनुरोधहरू प्रशोधन गर्नु अघि
-- **अर्थपूर्ण त्रुटि सन्देशहरू JSON ढाँचामा फर्काउँछ**
-- **उपयुक्त HTTP स्थिति कोडहरू प्रयोग गर्दछ** (खराब अनुरोधहरूको लागि 400)
-- **फ्रन्टएन्ड विकासकर्ताहरूलाई समस्या समाधान गर्न स्पष्ट प्रतिक्रिया प्रदान गर्दछ**
-
-## तपाईंको ब्याकएन्ड सेटअप र चलाउँदै
+## ब्याकएन्ड सेटअप र चलाउँदै  
 
-अब हामीसँग हाम्रो AI एकीकरण र FastAPI सर्भर तयार छ, आउनुहोस् सबै कुरा चलाउन सुरु गरौं। सेटअप प्रक्रियामा Python निर्भरताहरू स्थापना गर्नु, वातावरण चरहरू कन्फिगर गर्नु, र तपाईंको विकास सर्भर सुरु गर्नु समावेश छ।
+अब हामीसँग हाम्रो एआई एकीकरण र FastAPI सर्भर तयार छ, आउनुहोस् सबै कुरा चलाउन सुरु गरौं। सेटअप प्रक्रियामा पायथन निर्भरताहरू स्थापना गर्ने, वातावरण चरहरू कन्फिगर गर्ने, र तपाईंको विकास सर्भर सुरु गर्ने समावेश छ।  
 
-### Python वातावरण सेटअप
+### पायथन वातावरण सेटअप  
 
-आउनुहोस्, तपाईंको Python विकास वातावरण सेटअप गरौं। भर्चुअल वातावरणहरू Manhattan Project को कम्पार्टमेन्टलाइज्ड दृष्टिकोण जस्तै हुन् – प्रत्येक परियोजनाले आफ्नै अलग ठाउँ प्राप्त गर्दछ विशिष्ट उपकरणहरू र निर्भरताहरूको साथ, विभिन्न परियोजनाहरू बीचको द्वन्द्व रोक्दै।
+आउनुहोस् तपाईंको पायथन विकास वातावरण सेट गरौं। भर्चुअल वातावरणहरू म्यानहट्टन प्रोजेक्टको कम्पार्टमेन्टलाइज्ड दृष्टिकोण जस्तै हुन् – प्रत्येक परियोजनाले विशिष्ट उपकरणहरू र निर्भरताहरूको साथ आफ्नो अलग ठाउँ प्राप्त गर्दछ, विभिन्न परियोजनाहरू बीचको द्वन्द्व रोक्छ।  
 
 ```bash
 # Navigate to your backend directory
@@ -323,31 +537,31 @@ source ./venv/bin/activate
 # Install the good stuff
 pip install openai fastapi uvicorn python-dotenv
 ```
+  
+**हामीले अहिले के गर्यौं:**  
+- **हाम्रो आफ्नै सानो पायथन बबल सिर्जना गर्यौं** जहाँ हामी प्याकेजहरू स्थापना गर्न सक्छौं बिना अरू कुनै कुरालाई असर नगरी  
+- **यसलाई सक्रिय गर्यौं** ताकि हाम्रो टर्मिनलले यो विशिष्ट वातावरण प्रयोग गर्न जान्दछ  
+- **आवश्यकताहरू स्थापना गर्यौं**: OpenAI एआई जादूका लागि, FastAPI हाम्रो वेब एपीआईका लागि, Uvicorn यसलाई वास्तवमा चलाउनका लागि, र python-dotenv सुरक्षित गोप्य व्यवस्थापनका लागि  
 
-**हामीले के गर्यौं:**
-- **हाम्रो आफ्नै सानो Python बबल सिर्जना गर्यौं** जहाँ हामी प्याकेजहरू स्थापना गर्न सक्छौं बिना अरूलाई असर नगरी
-- **यसलाई सक्रिय गर्यौं** ताकि हाम्रो टर्मिनलले यो विशिष्ट वातावरण प्रयोग गर्न जान्दछ
-- **आवश्यकताहरू स्थापना गर्यौं**: OpenAI AI जादूको लागि, FastAPI हाम्रो वेब API को लागि, Uvicorn यसलाई वास्तवमा चलाउनको लागि, र python-dotenv सुरक्षित गोप्य व्यवस्थापनको लागि
+**मुख्य निर्भरताहरूको व्याख्या:**  
+- **FastAPI**: आधुनिक, छिटो वेब फ्रेमवर्क स्वचालित एपीआई डकुमेन्टेसनको साथ  
+- **Uvicorn**: FastAPI अनुप्रयोगहरू चलाउने चटपटे छिटो ASGI सर्भर  
+- **OpenAI**: GitHub मोडेलहरू र OpenAI एपीआई एकीकरणको लागि आधिकारिक लाइब्रेरी  
+- **python-dotenv**: .env फाइलहरूबाट सुरक्षित वातावरण चर लोड गर्दै  
 
-**मुख्य निर्भरताहरूको व्याख्या:**
-- **FastAPI**: आधुनिक, छिटो वेब फ्रेमवर्क स्वचालित API डकुमेन्टेसनको साथ
-- **Uvicorn**: चटपटे छिटो ASGI सर्भर जसले FastAPI अनुप्रयोगहरू चलाउँछ
-- **OpenAI**: GitHub मोडेलहरू र OpenAI API एकीकरणको लागि आधिकारिक लाइब्रेरी
-- **python-dotenv**: .env फाइलहरूबाट सुरक्षित वातावरण चर लोड गर्दै
+### वातावरण कन्फिगरेसन: गोप्य कुरा सुरक्षित राख्दै  
 
-### वातावरण कन्फिगरेसन: गोप्य सुरक्षित राख्दै
+हाम्रो एपीआई सुरु गर्नु अघि, वेब विकासमा सबैभन्दा महत्त्वपूर्ण पाठहरू मध्ये एकको बारेमा कुरा गरौं: तपाईंको गोप्य कुरा वास्तवमै गोप्य कसरी राख्ने। वातावरण चरहरू सुरक्षित भल्ट जस्तै हुन् जुन केवल तपाईंको अनुप्रयोगले पहुँच गर्न सक्छ।  
 
-API सुरु गर्नु अघि, वेब विकासको सबैभन्दा महत्त्वपूर्ण पाठहरू मध्ये एकको बारेमा कुरा गरौं: तपाईंको गोप्य वास्तवमा गोप्य कसरी राख्ने। वातावरण चरहरू सुरक्षित भण्डार जस्तै हुन् जुन केवल तपाईंको अनुप्रयोगले पहुँच गर्न सक्छ।
+#### वातावरण चरहरू के हुन्?  
 
-#### वातावरण चरहरू के हुन्?
+**वातावरण चरहरूलाई सुरक्षा निक्षेप बक्स जस्तै सोच्नुहोस्** – तपाईंले त्यहाँ आफ्नो मूल्यवान सामान राख्नुहुन्छ, र केवल तपाईं (र तपाईंको एप) सँग यसलाई बाहिर निकाल्नको लागि कुञ्जी छ। तपाईंको कोडमा संवेदनशील जानकारी सिधै लेख्ने (जहाँ शाब्दिक रूपमा जो कोहीले यसलाई देख्न सक्छ) सट्टा, तपाईं यसलाई सुरक्षित रूपमा वातावरणमा भण्डारण गर्नुहुन्छ।  
 
-**वातावरण चरहरूलाई सुरक्षा निक्षेप बक्स जस्तै सोच्नुहोस्** – तपाईंले त्यहाँ आफ्नो मूल्यवान सामान राख्नुहुन्छ, र केवल तपाईं (र तपाईंको एप) सँग यसलाई बाहिर निकाल्नको लागि कुञ्जी छ। तपाईंको कोडमा संवेदनशील जानकारी सीधा लेख्ने सट्टा (जहाँ वास्तवमा जो कोहीले देख्न सक्छ), तपाईं यसलाई सुरक्षित रूपमा वातावरणमा भण्डारण गर्नुहुन्छ।
+**यहाँ भिन्नता छ:**  
+- **गलत तरिका**: तपाईंको पासवर्डलाई स्टिकी नोटमा लेखेर तपाईंको मोनिटरमा राख्नुहोस्  
+- **सही तरिका**: तपाईंको पासवर्डलाई सुरक्षित पासवर्ड व्यवस्थापकमा राख्नुहोस् जसलाई केवल तपाईंले पहुँच गर्न सक्नुहुन्छ  
 
-**यहाँ भिन्नता छ:**
-- **गलत तरिका**: तपाईंको पासवर्डलाई स्टिकी नोटमा लेखेर तपाईंको मोनिटरमा राख्नु
-- **सही तरिका**: तपाईंको पासवर्डलाई सुरक्षित पासवर्ड म्यानेजरमा राख्नु जुन केवल तपाईंले पहुँच गर्न सक्नुहुन्छ
-
-#### वातावरण चरहरू किन महत्त्वपूर्ण छन्
+#### किन वातावरण चरहरू महत्त्वपूर्ण छन्  
 
 ```python
 # 🚨 NEVER DO THIS - API key visible to everyone
@@ -362,137 +576,92 @@ client = OpenAI(
     base_url="https://models.github.ai/inference"
 )
 ```
+  
+**जब तपाईं गोप्य कुरा हार्डकोड गर्नुहुन्छ के हुन्छ:**  
+1. **संस्करण नियन्त्रण एक्सपोजर**: तपाईंको Git रिपोजिटरीमा पहुँच भएको जो कोहीले तपाईंको एपीआई कुञ्जी देख्छ  
+2. **सार्वजनिक रिपोजिटरीहरू**: यदि तपाईं GitHub मा धकेल्नुहुन्छ भने, तपाईंको कुञ्जी सम्पूर्ण इन्टरनेटमा देखिनेछ  
+3. **टीम साझेदारी**: तपाईंको परियोजनामा काम गर्ने अन्य विकासकर्ताहरूले तपाईंको व्यक्तिगत एपीआई कुञ्जीमा पहुँच प्राप्त गर्छन्  
+4. **सुरक्षा उल्लङ्घनहरू**: यदि कसैले तपाईंको एपीआई कुञ्जी चोर्छ भने, तिनीहरूले तपाईंको एआई क्रेडिटहरू प्रयोग गर्न सक्छन्  
 
-**तपाईंले गोप्य हार्डकोड गर्दा के हुन्छ:**
-1. **संस्करण नियन्त्रण एक्सपोजर**: तपाईंको Git रिपोजिटरीमा पहुँच भएको जो कोहीले तपाईंको API कुञ्जी देख्छ
-2. **सार्वजनिक रिपोजिटरीहरू**: यदि तपाईं GitHub मा धकेल्नुहुन्छ भने, तपाईंको कुञ्जी सम्पूर्ण इन्टरनेटमा देखिन्छ
-3. **टीम साझेदारी**: तपाईंको परियोजनामा काम गर्ने अन्य विकासकर्ताहरूले तपाईंको व्यक्तिगत API कुञ्जीमा पहुँच प्राप्त गर्छन्
-4. **सुरक्षा उल्लङ्घनहरू**: यदि कसैले तपाईंको API कुञ्जी चोर्छ भने, तिनीहरूले तपाईंको AI क्रेडिटहरू प्रयोग गर्न सक्छन्
+#### तपाईंको वातावरण फाइल सेट गर्दै  
 
-#### तपाईंको वातावरण फाइल सेटअप गर्दै
+तपाईंको ब्याकएन्ड डाइरेक्टरीमा `.env` फाइल सिर्जना गर्नुहोस्। यो फाइलले तपाईं
+अब रोमाञ्चक क्षण आउँछ – आफ्नो FastAPI विकास सर्भर सुरु गर्दै र आफ्नो AI एकीकरणलाई जीवित देख्दै! FastAPI ले Uvicorn प्रयोग गर्दछ, जुन असिंक्रोनस पायथन एप्लिकेसनहरूको लागि विशेष रूपमा डिजाइन गरिएको चाँडो ASGI सर्भर हो।
 
-तपाईंको ब्याकएन्ड डिरेक्टरीमा `.env` फाइल सिर्जना गर्नुहोस्। यो फाइलले तपाईंको गोप्य स्थानीय रूपमा भण्डारण गर्दछ:
+#### FastAPI सर्भर सुरु गर्ने प्रक्रिया बुझ्दै
 
 ```bash
-# .env file - This should NEVER be committed to Git
-GITHUB_TOKEN=your_github_personal_access_token_here
-FASTAPI_DEBUG=True
-ENVIRONMENT=development
-```
-
-**.env फाइल बुझ्दै:**
-- **प्रत्येक लाइनमा एक गोप्य** `KEY=value` ढाँचामा
-- **बराबर चिन्ह वरिपरि कुनै खाली ठाउँ छैन**
-- **मानहरू वरिपरि कुनै उद्धरण आवश्यक छैन** (सामान्यतया)
-- **टिप्पणीहरू** `#` बाट सुरु हुन्छन्
-
-#### तपाईंको GitHub व्यक्तिगत पहुँच टोकन सिर्जना गर्दै
-
-तपाईंको GitHub टोकन विशेष पासवर्ड जस्तै हो जसले तपाईंको अनुप्रयोगलाई GitHub का AI सेवाहरू प्रयोग गर्न अनुमति दिन्छ:
-
-**टोकन सिर्जना चरण-दर-चरण:**
-1. **GitHub सेटिङमा जानुहोस्** → Developer settings → Personal access tokens → Tokens (classic)
-2. **"Generate new token (classic)" क्लिक गर्नुहोस्**
-3. **म्याद समाप्ति सेट गर्नुहोस्** (परीक्षणको लागि 30 दिन, उत्पादनको लागि लामो)
-4. **स्कोपहरू चयन गर्नुहोस्**: "repo" र तपाईंलाई आवश्यक अन्य अनुमतिहरू जाँच गर्नुहोस्
-5. **टोकन सिर्जना गर्नुहोस्** र तुरुन्तै प्रतिलिपि गर्नुहोस् (तपाईंले यसलाई फेरि देख्न सक्नुहुन्न!)
-6. **तपाईंको .env फाइलमा टोकन टाँस्नुहोस्**
+# Method 1: Direct Python execution (includes auto-reload)
+python api.py
 
-```bash
-# Example of what your token looks like (this is fake!)
-GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
+# Method 2: Using Uvicorn directly (more control)
+uvicorn api:app --host 0.0.0.0 --port 5000 --reload
 ```
 
-#### Python मा वातावरण चरहरू लोड गर्दै
-
-```python
-import os
-from dotenv import load_dotenv
+जब तपाईं यो कमाण्ड चलाउनुहुन्छ, पर्दा पछाडि निम्न कुराहरू हुन्छन्:
 
-# Load environment variables from .env file
-load_dotenv()
+**1. पायथनले तपाईंको FastAPI एप्लिकेसन लोड गर्दछ**:
+- आवश्यक सबै लाइब्रेरीहरू (FastAPI, Pydantic, OpenAI, आदि) आयात गर्दछ
+- तपाईंको `.env` फाइलबाट वातावरणीय भेरिएबलहरू लोड गर्दछ
+- स्वचालित डकुमेन्टेसनको साथ FastAPI एप्लिकेसन इन्स्टेन्स सिर्जना गर्दछ
 
-# Now you can access them securely
-api_key = os.environ.get("GITHUB_TOKEN")
-if not api_key:
-    raise ValueError("GITHUB_TOKEN not found in environment variables!")
-
-client = OpenAI(
-    api_key=api_key,
-    base_url="https://models.github.ai/inference"
-)
-```
-
-**यो कोडले के गर्छ:**
-- **तपाईंको .env फाइल लोड गर्दछ** र चरहरू Python मा उपलब्ध गराउँछ
-- **आवश्यक टोकन छ कि छैन जाँच गर्दछ** (राम्रो त्रुटि ह्यान्डलिङ!)
-- **स्पष्ट त्रुटि उठाउँछ** यदि टोकन हराइरहेको छ भने
-- **टोकन सुरक्षित रूपमा प्रयोग गर्दछ** यसलाई कोडमा एक्सपोज नगरी
+**2. Uvicorn ले ASGI सर्भरलाई कन्फिगर गर्दछ**:
+- असिंक्रोनस अनुरोध ह्यान्डलिङ क्षमताहरूको साथ पोर्ट 5000 मा बाइन्ड गर्दछ
+- स्वचालित मान्यता सहित अनुरोध राउटिङ सेटअप गर्दछ
+- विकासको लागि हट रीलोड सक्षम गर्दछ (फाइल परिवर्तनमा पुनः सुरु हुन्छ)
+- अन्तरक्रियात्मक API डकुमेन्टेसन उत्पन्न गर्दछ
 
-#### Git सुरक्षा: .gitignore फाइल
+**3. सर्भर सुन्न सुरु गर्दछ**:
+- तपाईंको टर्मिनलमा देखिन्छ: `INFO: Uvicorn running on http://0.0.0.0:5000`
+- सर्भरले धेरै समवर्ती AI अनुरोधहरू ह्यान्डल गर्न सक्छ
+- तपाईंको API `http://localhost:5000/docs` मा स्वचालित डकुमेन्टेसनको साथ तयार छ
 
-तपाईंको `.gitignore` फाइलले Git लाई कुन फाइलहरू कहिल्यै ट्र्याक वा अपलोड नगर्ने भनेर बताउँछ:
+#### जब सबै कुरा ठीकसँग काम गर्छ, तपाईंले के देख्नुहुन्छ
 
 ```bash
-# .gitignore - Add these lines
-.env
-*.env
-.env.local
-.env.production
-__pycache__/
-venv/
-.vscode/
+$ python api.py
+INFO:     Will watch for changes in these directories: ['/your/project/path']
+INFO:     Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
+INFO:     Started reloader process [12345] using WatchFiles
+INFO:     Started server process [12346]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
 ```
 
-**किन यो महत्त्वपूर्ण छ**: एकपटक तपाईंले `.env` लाई `.gitignore` मा थप्नुभयो भने, Git ले तपाईंको वातावरण फाइललाई बेवास्ता गर्नेछ, तपाईंलाई तपाईंको गोप्य GitHub मा अनजाने अपलोड गर्नबाट रोक्नेछ।
+**FastAPI आउटपुट बुझ्दै:**
+- **परिवर्तनहरूको लागि हेर्नेछ**: विकासको लागि स्वत: रीलोड सक्षम
+- **Uvicorn चलिरहेको छ**: उच्च-प्रदर्शन ASGI सर्भर सक्रिय छ
+- **रीलोडर प्रक्रिया सुरु भयो**: स्वचालित पुनः सुरुको लागि फाइल वाचर
+- **एप्लिकेसन सुरु पूरा भयो**: FastAPI एप सफलतापूर्वक आरम्भ भयो
+- **अन्तरक्रियात्मक डकुमेन्टेसन उपलब्ध छ**: `/docs` मा स्वचालित API डकुमेन्टेसन हेर्नुहोस्
 
-#### विभिन्न वातावरणहरू, विभिन्न गोप्य
+#### तपाईंको FastAPI परीक्षण गर्दै: धेरै शक्तिशाली तरिकाहरू
 
-व्यावसायिक अनुप्रयोगहरूले विभिन्न वातावरणहरूको लागि विभिन्न API कुञ्जीहरू प्रयोग गर्छन्:
+FastAPI ले तपाईंको API परीक्षण गर्नका लागि धेरै सुविधाजनक तरिकाहरू प्रदान गर्दछ, जसमा स्वचालित अन्तरक्रियात्मक डकुमेन्टेसन पनि समावेश छ:
 
-```bash
-# .env.development
-GITHUB_TOKEN=your_development_token
-DEBUG=True
+**विधि 1: अन्तरक्रियात्मक API डकुमेन्टेसन (सिफारिस गरिएको)**
+1. तपाईंको ब्राउजर खोल्नुहोस् र `http://localhost:5000/docs` मा जानुहोस्
+2. तपाईंले Swagger UI देख्नुहुनेछ जसमा सबै तपाईंको अन्त बिन्दुहरू डकुमेन्ट गरिएको छ
+3. `/hello` मा क्लिक गर्नुहोस् → "Try it out" → परीक्षण सन्देश प्रविष्ट गर्नुहोस् → "Execute"
+4. ब्राउजरमा सही ढाँचासहित प्रतिक्रिया हेर्नुहोस्
 
-# .env.production  
-GITHUB_TOKEN=your_production_token
-DEBUG=False
-```
-
-**किन यो महत्त्वपूर्ण छ**: तपाईं आफ्नो विकास प्रयोगहरूले तपाईंको उत्पादन AI प्रयोग कोटा प्रभावित गर्न चाहनुहुन्न, र तपाईं विभिन्न वातावरणहरूको लागि विभिन्न सुरक्षा स्तरहरू चाहनुहुन्छ।
-
-### तपाईंको विकास सर्भर सुरु गर्दै: तपाईंको FastAPI जीवनमा ल्याउँदै
-
-अब रोमाञ्चक क्षण आउँछ – तपाईंको FastAPI विकास सर्भर सुरु गर्दै र तपाईंको AI एकीकरणलाई जीवित देख्दै! FastAPI Uvicorn प्रयोग गर्दछ, एक चटपटे छिटो ASGI सर्भर जुन विशेष रूपमा Async Python अनुप्रयोगहरूको लागि डिजाइन गरिएको हो।
-
-#### FastAPI सर्भर स्टार्टअप प्रक्रिया बुझ्दै
+**विधि 2: आधारभूत ब्राउजर परीक्षण**
+1. रूट अन्त बिन्दुका लागि `http://localhost:5000` मा जानुहोस्
+2. सर्भरको स्वास्थ्य जाँच गर्न `http://localhost:5000/health` मा जानुहोस्
+3. यसले तपाईंको FastAPI सर्भर ठीकसँग चलिरहेको छ भनेर पुष्टि गर्दछ
 
+**विधि 3: कमाण्ड लाइन परीक्षण (उन्नत)**
 ```bash
-# Method 1: Direct Python execution (includes auto-reload)
-python api.py
+# Test with curl (if available)
+curl -X POST http://localhost:5000/hello \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello AI!"}'
 
-# Method 2: Using Uvicorn directly (more control)
-uvicorn api:app --host 0.0.0.0 --port 5000 --reload
+# Expected response:
+# {"response": "Hello! I'm your AI assistant. How can I help you today?"}
 ```
 
-जब तपाईं यो आदेश चलाउनुहुन्छ, यहाँ पर्दा पछाडि के हुन्छ:
-
-**1. Python तपाईंको FastAPI एप्लिकेसन लोड गर्दछ**:
-- आवश्यक सबै लाइब्रेरीहरू आयात गर्दछ (FastAPI, Pydantic, OpenAI, आदि)
-- तपाईंको `.env` फाइलबाट वातावरण चरहरू लोड गर्दछ
-- स्वचालित डकुमेन्टेसनको साथ FastAPI एप्लिकेसन उदाहरण सिर्जना गर्दछ
-
-**2. Uvicorn ASGI सर्भर कन्फिगर गर्दछ**:
-- Async अनुरोध ह्यान्डलिङ क्षमताहरूको साथ पोर्ट 5000 मा बाँध्छ
-- स्वचालित मान्यतासँग अनुरोध रुटिङ सेटअप गर्दछ
-- विकासको लागि हट रीलोड सक्षम गर्दछ (फाइल परिवर्तनमा पुनः सुरु हुन्छ)
-- अन्तरक्रियात्मक API डकुमेन्टेसन उत्पन्न गर्दछ
-
-**3. सर्भर सुन्न सुरु गर्दछ**:
-- तपाईंको टर्मिनल देखाउँछ: `INFO: Uvicorn running on http://0.0.0.0:5000`
-- सर्भरले धेरै समवर्ती AI अनुरोधहरू ह्यान्डल गर्न सक्छ
-- तपाईंको API स्वचालित डकुमेन्टेसनको साथ `http://localhost:
+**विधि 4: पायथन परीक्षण स्क्रिप्ट**
 ```python
 # test_api.py - Create this file to test your API
 import requests
@@ -510,21 +679,21 @@ else:
     print("Error:", response.status_code, response.text)
 ```
 
-#### सामान्य सुरु हुने समस्याहरू समाधान गर्ने
+#### सामान्य सुरु गर्ने समस्याहरू समाधान गर्दै
 
-| त्रुटि सन्देश | यसको अर्थ | समाधान गर्ने तरिका |
-|---------------|---------------|------------|
-| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI स्थापना गरिएको छैन | आफ्नो भर्चुअल वातावरणमा `pip install fastapi uvicorn` चलाउनुहोस् |
-| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI सर्भर स्थापना गरिएको छैन | आफ्नो भर्चुअल वातावरणमा `pip install uvicorn` चलाउनुहोस् |
-| `KeyError: 'GITHUB_TOKEN'` | वातावरण चर भेटिएन | आफ्नो `.env` फाइल र `load_dotenv()` कल जाँच गर्नुहोस् |
-| `Address already in use` | पोर्ट 5000 व्यस्त छ | पोर्ट 5000 प्रयोग गरिरहेका अन्य प्रक्रियाहरू बन्द गर्नुहोस् वा पोर्ट परिवर्तन गर्नुहोस् |
-| `ValidationError` | अनुरोध डेटा Pydantic मोडेलसँग मेल खाँदैन | आफ्नो अनुरोध ढाँचा अपेक्षित स्किमासँग मेल खाँदैन कि जाँच गर्नुहोस् |
-| `HTTPException 422` | प्रक्रिया गर्न नसकिने इकाई | अनुरोध मान्यता असफल भयो, `/docs` मा सही ढाँचा जाँच गर्नुहोस् |
-| `OpenAI API error` | AI सेवा प्रमाणीकरण असफल भयो | आफ्नो GitHub टोकन सही छ र उपयुक्त अनुमति छ कि जाँच गर्नुहोस् |
+| त्रुटि सन्देश | यसको अर्थ के हो | समाधान कसरी गर्ने |
+|---------------|-----------------|--------------------|
+| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI स्थापना गरिएको छैन | तपाईंको भर्चुअल वातावरणमा `pip install fastapi uvicorn` चलाउनुहोस् |
+| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI सर्भर स्थापना गरिएको छैन | तपाईंको भर्चुअल वातावरणमा `pip install uvicorn` चलाउनुहोस् |
+| `KeyError: 'GITHUB_TOKEN'` | वातावरणीय भेरिएबल भेटिएन | तपाईंको `.env` फाइल र `load_dotenv()` कल जाँच गर्नुहोस् |
+| `Address already in use` | पोर्ट 5000 व्यस्त छ | पोर्ट 5000 प्रयोग गरिरहेको अन्य प्रक्रियाहरू बन्द गर्नुहोस् वा पोर्ट परिवर्तन गर्नुहोस् |
+| `ValidationError` | अनुरोध डेटा Pydantic मोडेलसँग मेल खाँदैन | तपाईंको अनुरोध ढाँचा अपेक्षित स्किमासँग मेल खाँदैन भनेर जाँच गर्नुहोस् |
+| `HTTPException 422` | प्रक्रिया गर्न नसकिने इकाई | अनुरोध मान्यता असफल भयो, सही ढाँचाको लागि `/docs` जाँच गर्नुहोस् |
+| `OpenAI API error` | AI सेवा प्रमाणीकरण असफल भयो | तपाईंको GitHub टोकन सही छ र उचित अनुमति छ भनेर पुष्टि गर्नुहोस् |
 
-#### विकासका उत्कृष्ट अभ्यासहरू
+#### विकासका लागि उत्तम अभ्यासहरू
 
-**हट रीलोडिङ**: FastAPI र Uvicorn ले तपाईंको Python फाइलहरूमा परिवर्तनहरू बचत गर्दा स्वचालित रूपमा रीलोडिङ प्रदान गर्दछ। यसको मतलब तपाईं आफ्नो कोड परिमार्जन गर्न सक्नुहुन्छ र म्यानुअल रूपमा पुनः सुरु नगरी तुरुन्तै परीक्षण गर्न सक्नुहुन्छ।
+**हट रीलोडिंग**: FastAPI र Uvicornले तपाईंको पायथन फाइलहरूमा परिवर्तनहरू बचत गर्दा स्वत: रीलोड प्रदान गर्दछ। यसको मतलब तपाईं आफ्नो कोड परिमार्जन गर्न सक्नुहुन्छ र म्यानुअल रूपमा पुनः सुरु नगरी तुरुन्त परीक्षण गर्न सक्नुहुन्छ।
 
 ```python
 # Enable hot reloading explicitly
@@ -561,11 +730,11 @@ def hello():
         return jsonify({"error": "AI service temporarily unavailable"}), 500
 ```
 
-**किन लगिङ सहयोगी छ**: विकासको क्रममा, तपाईंले ठ्याक्कै के अनुरोधहरू आइरहेका छन्, AI के प्रतिक्रिया दिइरहेको छ, र कहाँ त्रुटिहरू आइरहेका छन् हेर्न सक्नुहुन्छ। यसले डिबगिङलाई धेरै छिटो बनाउँछ।
+**किन लगिङ सहयोगी छ**: विकासको क्रममा, तपाईंले ठ्याक्कै के अनुरोधहरू आइरहेका छन्, AI के प्रतिक्रिया दिइरहेको छ, र कहाँ त्रुटिहरू आइरहेका छन् भनेर देख्न सक्नुहुन्छ। यसले डिबगिङलाई धेरै छिटो बनाउँछ।
 
 ### GitHub Codespaces को लागि कन्फिगर गर्दै: क्लाउड विकास सजिलो बनाउँदै
 
-GitHub Codespaces भनेको क्लाउडमा शक्तिशाली विकास कम्प्युटर जस्तै हो जसलाई तपाईं कुनै पनि ब्राउजरबाट पहुँच गर्न सक्नुहुन्छ। यदि तपाईं Codespaces मा काम गर्दै हुनुहुन्छ भने, तपाईंको ब्याकएन्डलाई फ्रन्टएन्डसँग पहुँचयोग्य बनाउनका लागि केही अतिरिक्त चरणहरू आवश्यक छन्।
+GitHub Codespaces भनेको क्लाउडमा शक्तिशाली विकास कम्प्युटर जस्तै हो जसलाई तपाईं कुनै पनि ब्राउजरबाट पहुँच गर्न सक्नुहुन्छ। यदि तपाईं Codespaces मा काम गर्दै हुनुहुन्छ भने, तपाईंको ब्याकएन्डलाई तपाईंको फ्रन्टएन्डमा पहुँचयोग्य बनाउनका लागि केही थप चरणहरू आवश्यक छन्।
 
 #### Codespaces नेटवर्किङ बुझ्दै
 
@@ -573,17 +742,17 @@ GitHub Codespaces भनेको क्लाउडमा शक्तिशा
 - ब्याकएन्ड: `http://localhost:5000`
 - फ्रन्टएन्ड: `http://localhost:3000` (वा file://)
 
-Codespaces मा, तपाईंको विकास वातावरण GitHub का सर्भरहरूमा चल्छ, त्यसैले "localhost" को अर्थ फरक हुन्छ। GitHub ले तपाईंको सेवाहरूको लागि स्वतः सार्वजनिक URL बनाउँछ, तर तपाईंले तिनीहरूलाई सही रूपमा कन्फिगर गर्न आवश्यक छ।
+Codespaces मा, तपाईंको विकास वातावरण GitHub का सर्भरहरूमा चल्छ, त्यसैले "localhost" को अर्थ फरक छ। GitHubले तपाईंको सेवाहरूका लागि स्वत: सार्वजनिक URLहरू सिर्जना गर्दछ, तर तपाईंले तिनीहरूलाई ठीकसँग कन्फिगर गर्न आवश्यक छ।
 
 #### चरण-दर-चरण Codespaces कन्फिगरेसन
 
-**1. आफ्नो ब्याकएन्ड सर्भर सुरु गर्नुहोस्**:
+**1. तपाईंको ब्याकएन्ड सर्भर सुरु गर्नुहोस्**:
 ```bash
 cd backend
 python api.py
 ```
 
-तपाईंले परिचित FastAPI/Uvicorn सुरु सन्देश देख्नुहुनेछ, तर ध्यान दिनुहोस् कि यो Codespace वातावरण भित्र चलिरहेको छ।
+तपाईंले परिचित FastAPI/Uvicorn सुरु गर्ने सन्देश देख्नुहुनेछ, तर ध्यान दिनुहोस् कि यो Codespace वातावरण भित्र चलिरहेको छ।
 
 **2. पोर्ट दृश्यता कन्फिगर गर्नुहोस्**:
 - VS Code को तल्लो प्यानलमा "Ports" ट्याब खोज्नुहोस्
@@ -591,15 +760,15 @@ python api.py
 - पोर्ट 5000 मा राइट-क्लिक गर्नुहोस्
 - "Port Visibility" → "Public" चयन गर्नुहोस्
 
-**किन यसलाई सार्वजनिक बनाउने?** डिफल्ट रूपमा, Codespace पोर्टहरू निजी हुन्छन् (तपाईंलाई मात्र पहुँचयोग्य)। यसलाई सार्वजनिक बनाउँदा तपाईंको फ्रन्टएन्ड (जसले ब्राउजरमा चल्छ) ब्याकएन्डसँग संवाद गर्न सक्दछ।
+**किन सार्वजनिक बनाउने?** डिफल्ट रूपमा, Codespace पोर्टहरू निजी हुन्छन् (तपाईंलाई मात्र पहुँचयोग्य)। सार्वजनिक बनाउँदा तपाईंको फ्रन्टएन्ड (जसले ब्राउजरमा चल्छ) तपाईंको ब्याकएन्डसँग संवाद गर्न सक्षम हुन्छ।
 
-**3. आफ्नो सार्वजनिक URL प्राप्त गर्नुहोस्**:
+**3. तपाईंको सार्वजनिक URL प्राप्त गर्नुहोस्**:
 पोर्ट सार्वजनिक बनाएपछि, तपाईंले यस्तो URL देख्नुहुनेछ:
 ```
 https://your-codespace-name-5000.app.github.dev
 ```
 
-**4. आफ्नो फ्रन्टएन्ड कन्फिगरेसन अपडेट गर्नुहोस्**:
+**4. तपाईंको फ्रन्टएन्ड कन्फिगरेसन अपडेट गर्नुहोस्**:
 ```javascript
 // In your frontend app.js, update the BASE_URL:
 this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
@@ -607,25 +776,25 @@ this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 
 #### Codespace URL बुझ्दै
 
-Codespace URL ले एक अनुमानित ढाँचा पछ्याउँछ:
+Codespace URLहरूले पूर्वानुमान योग्य ढाँचा अनुसरण गर्दछ:
 ```
 https://[codespace-name]-[port].app.github.dev
 ```
 
 **यसलाई तोड्दै:**
 - `codespace-name`: तपाईंको Codespace को लागि एक अद्वितीय पहिचानकर्ता (सामान्यतया तपाईंको प्रयोगकर्ता नाम समावेश गर्दछ)
-- `port`: तपाईंको सेवा चलिरहेको पोर्ट नम्बर (हाम्रो FastAPI एपको लागि 5000)
-- `app.github.dev`: Codespace अनुप्रयोगहरूको लागि GitHub को डोमेन
+- `port`: तपाईंको सेवा चलिरहेको पोर्ट नम्बर (हाम्रो FastAPI एपका लागि 5000)
+- `app.github.dev`: Codespace एप्लिकेसनहरूको लागि GitHub को डोमेन
 
-#### आफ्नो Codespace सेटअप परीक्षण गर्दै
+#### तपाईंको Codespace सेटअप परीक्षण गर्दै
 
 **1. ब्याकएन्डलाई सिधै परीक्षण गर्नुहोस्**:
-आफ्नो सार्वजनिक URL नयाँ ब्राउजर ट्याबमा खोल्नुहोस्। तपाईंले देख्नुहुनेछ:
+तपाईंको सार्वजनिक URL नयाँ ब्राउजर ट्याबमा खोल्नुहोस्। तपाईंले देख्नुहुनेछ:
 ```
 Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
 ```
 
-**2. ब्राउजर विकास उपकरणहरूसँग परीक्षण गर्नुहोस्**:
+**2. ब्राउजर विकासकर्ता उपकरणहरूसँग परीक्षण गर्नुहोस्**:
 ```javascript
 // Open browser console and test your API
 fetch('https://your-codespace-name-5000.app.github.dev/hello', {
@@ -640,18 +809,18 @@ fetch('https://your-codespace-name-5000.app.github.dev/hello', {
 #### Codespaces बनाम स्थानीय विकास
 
 | पक्ष | स्थानीय विकास | GitHub Codespaces |
-|--------|-------------------|-------------------|
-| **सेटअप समय** | लामो (Python, निर्भरता स्थापना गर्नुहोस्) | तुरुन्त (पूर्व-कन्फिगर गरिएको वातावरण) |
+|------|--------------|-------------------|
+| **सेटअप समय** | लामो (पायथन, निर्भरता स्थापना गर्नुहोस्) | तुरुन्त (पूर्व-कन्फिगर गरिएको वातावरण) |
 | **URL पहुँच** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
-| **पोर्ट कन्फिगरेसन** | स्वचालित | म्यानुअल (पोर्टहरू सार्वजनिक बनाउनुहोस्) |
+| **पोर्ट कन्फिगरेसन** | स्वत: | म्यानुअल (पोर्टहरू सार्वजनिक बनाउनुहोस्) |
 | **फाइल स्थायित्व** | स्थानीय मेसिन | GitHub रिपोजिटरी |
 | **सहयोग** | वातावरण साझा गर्न गाह्रो | Codespace लिंक साझा गर्न सजिलो |
 | **इन्टरनेट निर्भरता** | केवल AI API कलहरूको लागि | सबै कुराको लागि आवश्यक |
 
 #### Codespace विकास सुझावहरू
 
-**Codespaces मा वातावरण चरहरू**:
-तपाईंको `.env` फाइल Codespaces मा उस्तै तरिकाले काम गर्दछ, तर तपाईं Codespace मा सिधै वातावरण चरहरू सेट गर्न सक्नुहुन्छ:
+**Codespaces मा वातावरणीय भेरिएबलहरू**:
+तपाईंको `.env` फाइल Codespaces मा उस्तै तरिकाले काम गर्दछ, तर तपाईं Codespace भित्र वातावरणीय भेरिएबलहरू सिधै सेट गर्न सक्नुहुन्छ:
 
 ```bash
 # Set environment variable for the current session
@@ -662,17 +831,17 @@ echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
 ```
 
 **पोर्ट व्यवस्थापन**:
-- Codespaces स्वचालित रूपमा पत्ता लगाउँछ जब तपाईंको अनुप्रयोग पोर्टमा सुन्न सुरु गर्दछ
-- तपाईं एकै समयमा धेरै पोर्टहरू अगाडि बढाउन सक्नुहुन्छ (यदि तपाईं पछि डेटाबेस थप्नुहुन्छ भने उपयोगी)
-- पोर्टहरू तपाईंको Codespace चलिरहेको छ जति समयसम्म पहुँचयोग्य रहन्छ
+- Codespacesले स्वचालित रूपमा पत्ता लगाउँछ जब तपाईंको एप्लिकेसन पोर्टमा सुन्न सुरु गर्दछ
+- तपाईं एकै समयमा धेरै पोर्टहरू अगाडि बढाउन सक्नुहुन्छ (यदि तपाईंले पछि डेटाबेस थप्नुभयो भने उपयोगी)
+- पोर्टहरू तपाईंको Codespace चलिरहेको छ जबसम्म पहुँचयोग्य रहन्छ
 
 **विकास कार्यप्रवाह**:
 1. VS Code मा कोड परिवर्तन गर्नुहोस्
-2. FastAPI स्वतः रीलोड हुन्छ (Uvicorn को रीलोड मोडको लागि धन्यवाद)
-3. सार्वजनिक URL मार्फत परिवर्तनहरू तुरुन्तै परीक्षण गर्नुहोस्
+2. FastAPI स्वत: रीलोड हुन्छ (Uvicorn को रीलोड मोडको लागि धन्यवाद)
+3. सार्वजनिक URL मार्फत परिवर्तनहरू तुरुन्त परीक्षण गर्नुहोस्
 4. तयार हुँदा कमिट र पुश गर्नुहोस्
 
-> 💡 **प्रो टिप**: विकासको क्रममा आफ्नो Codespace ब्याकएन्ड URL बुकमार्क गर्नुहोस्। किनभने Codespace नामहरू स्थिर हुन्छन्, तपाईंले उही Codespace प्रयोग गरिरहनुभएको छ भने URL परिवर्तन हुनेछैन।
+> 💡 **प्रो टिप**: विकासको क्रममा तपाईंको Codespace ब्याकएन्ड URL बुकमार्क गर्नुहोस्। Codespace नामहरू स्थिर छन्, URL परिवर्तन हुँदैन जबसम्म तपाईं उही Codespace प्रयोग गर्दै हुनुहुन्छ।
 
 ## फ्रन्टएन्ड च्याट इन्टरफेस सिर्जना गर्दै: जहाँ मानिसहरू AI सँग भेट्छन्
 
@@ -680,9 +849,9 @@ echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
 
 ### आधुनिक फ्रन्टएन्ड आर्किटेक्चर बुझ्दै
 
-हाम्रो च्याट इन्टरफेसलाई "सिंगल पेज एप्लिकेसन" वा SPA भनिन्छ। पुरानो शैलीको दृष्टिकोण जहाँ प्रत्येक क्लिकले नयाँ पृष्ठ लोड गर्दछ, हाम्रो एप सहज र तुरुन्तै अपडेट हुन्छ:
+हाम्रो च्याट इन्टरफेसलाई "सिंगल पेज एप्लिकेसन" वा SPA भनिन्छ। पुरानो शैलीको दृष्टिकोण जहाँ प्रत्येक क्लिकले नयाँ पेज लोड गर्दछ, हाम्रो एप सहज र तुरुन्त अपडेट हुन्छ:
 
-**पुराना वेबसाइटहरू**: भौतिक पुस्तक पढ्ने जस्तै – तपाईं पूर्ण रूपमा नयाँ पृष्ठहरू पल्टाउनुहुन्छ
+**पुराना वेबसाइटहरू**: भौतिक पुस्तक पढ्ने जस्तै – तपाईं पूर्ण रूपमा नयाँ पेजहरूमा पल्टाउनुहुन्छ
 **हाम्रो च्याट एप**: तपाईंको फोन प्रयोग गर्ने जस्तै – सबै कुरा प्रवाह हुन्छ र सहज रूपमा अपडेट हुन्छ
 
 ```mermaid
@@ -696,42 +865,66 @@ graph TD
     G --> H[Ready for Next Message]
 ```
 
+```mermaid
+classDiagram
+    class ChatApp {
+        +messages: HTMLElement
+        +form: HTMLElement
+        +input: HTMLElement
+        +sendButton: HTMLElement
+        +BASE_URL: string
+        +API_ENDPOINT: string
+        
+        +constructor()
+        +initializeEventListeners()
+        +handleSubmit(event)
+        +callAPI(message)
+        +appendMessage(text, role)
+        +escapeHtml(text)
+        +scrollToBottom()
+        +setLoading(isLoading)
+    }
+    
+    ChatApp --> DOM : manipulates
+    ChatApp --> FastAPI : sends requests
+```
+
 ### फ्रन्टएन्ड विकासका तीन स्तम्भहरू
 
-प्रत्येक फ्रन्टएन्ड अनुप्रयोग – साधारण वेबसाइटहरूदेखि जटिल एपहरू जस्तै Discord वा Slack – तीन मुख्य प्रविधिहरूमा आधारित हुन्छ। यीलाई वेबमा तपाईंले देख्ने र अन्तरक्रिया गर्ने सबै कुराको आधारभूत रूपमा सोच्नुहोस्:
+प्रत्येक फ्रन्टएन्ड एप्लिकेसन – साधारण वेबसाइटहरूदेखि जटिल एपहरू जस्तै Discord वा Slack – तीन मुख्य प्रविधिहरूमा आधारित छ। यीलाई वेबमा तपाईंले देख्न र अन्तरक्रिया गर्न सक्ने सबै कुराको आधारभूत रूपमा सोच्नुहोस्:
 
 **HTML (संरचना)**: यो तपाईंको आधार हो
-- कुन तत्वहरू छन् (बटनहरू, टेक्स्ट क्षेत्रहरू, कन्टेनरहरू) निर्धारण गर्दछ
+- कुन तत्वहरू छन् (बटनहरू, टेक्स्ट क्षेत्रहरू, कन्टेनरहरू) निर्णय गर्दछ
 - सामग्रीलाई अर्थ दिन्छ (यो हेडर हो, यो फारम हो, आदि)
 - आधारभूत संरचना सिर्जना गर्दछ जसमा सबै कुरा निर्माण हुन्छ
 
 **CSS (प्रस्तुति)**: यो तपाईंको आन्तरिक डिजाइनर हो
-- सबै कुरा सुन्दर देखिन्छ (रंगहरू, फन्टहरू, लेआउटहरू)
-- विभिन्न स्क्रिन आकारहरू (फोन बनाम ल्यापटप बनाम ट्याब्लेट) ह्यान्डल गर्दछ
+- सबै कुरालाई सुन्दर बनाउँछ (रंगहरू, फन्टहरू, लेआउटहरू)
+- विभिन्न स्क्रिन आकारहरू ह्यान्डल गर्दछ (फोन बनाम ल्यापटप बनाम ट्याब्लेट)
 - सहज एनिमेसन र दृश्य प्रतिक्रिया सिर्जना गर्दछ
 
 **JavaScript (व्यवहार)**: यो तपाईंको मस्तिष्क हो
-- प्रयोगकर्ताहरूले के गर्छन् (क्लिक, टाइपिङ, स्क्रोलिङ) प्रतिक्रिया दिन्छ
-- तपाईंको ब्याकएन्डसँग कुरा गर्छ र पृष्ठ अपडेट गर्छ
-- सबै कुरा अन्तरक्रियात्मक र गतिशील बनाउँछ
+- प्रयोगकर्ताहरूले के गर्छन् (क्लिकहरू, टाइपिङ, स्क्रोलिङ) प्रतिक्रिया दिन्छ
+- तपाईंको ब्याकएन्डसँग कुरा गर्छ र पेज अपडेट गर्छ
+- सबै कुरालाई अन्तरक्रियात्मक र गतिशील बनाउँछ
 
 **यसलाई वास्तुकला डिजाइन जस्तै सोच्नुहोस्:**
 - **HTML**: संरचनात्मक ब्लूप्रिन्ट (स्पेस र सम्बन्धहरू परिभाषित गर्दै)
 - **CSS**: सौन्दर्य र वातावरणीय डिजाइन (दृश्य शैली र प्रयोगकर्ता अनुभव)
-- **JavaScript**: यांत्रिक प्रणालीहरू (कार्यक्षमता र अन्तरक्रियाशीलता)
+- **JavaScript**: यांत्रिक प्रणालीहरू (कार्यक्षमता र अन्तरक्रियात्मकता)
 
 ### किन आधुनिक JavaScript आर्किटेक्चर महत्त्वपूर्ण छ
 
-हाम्रो च्याट अनुप्रयोगले आधुनिक JavaScript ढाँचाहरू प्रयोग गर्नेछ जुन तपाईंले व्यावसायिक अनुप्रयोगहरूमा देख्नुहुनेछ। यी अवधारणाहरू बुझ्नाले तपाईंलाई विकासकर्ता रूपमा बढ्दै जाँदा सहयोग गर्नेछ:
+हाम्रो च्याट एप्लिकेसनले आधुनिक JavaScript ढाँचाहरू प्रयोग गर्नेछ जुन तपाईंले व्यावसायिक एप्लिकेसनहरूमा देख्नुहुनेछ। यी अवधारणाहरू बुझ्नु तपाईंलाई विकासकर्ता रूपमा बढ्दै जाँदा सहयोग गर्नेछ:
 
-**क्लास-आधारित आर्किटेक्चर**: हामी हाम्रो कोडलाई कक्षाहरूमा व्यवस्थित गर्नेछौं, जुन वस्तुहरूको लागि ब्लूप्रिन्ट सिर्जना गर्ने जस्तै हो
+**क्लास-आधारित आर्किटेक्चर**: हामी हाम्रो कोडलाई क्लासहरूमा व्यवस्थित गर्नेछौं, जुन वस्तुहरूको लागि ब्लूप्रिन्ट सिर्जना गर्ने जस्तै हो
 **Async/Await**: समय लाग्ने अपरेसनहरू (जस्तै API कलहरू) ह्यान्डल गर्ने आधुनिक तरिका
-**इभेन्ट-ड्रिभन प्रोग्रामिङ**: हाम्रो एप प्रयोगकर्ता कार्यहरू (क्लिक, कुञ्जी प्रेसहरू) प्रतिक्रिया दिन्छ
+**इभेन्ट-ड्रिभन प्रोग्रामिङ**: हाम्रो एप प्रयोगकर्ता क्रियाकलापहरू (क्लिकहरू, कुञ्जी प्रेसहरू) प्रतिक्रिया दिन्छ, लूपमा चल्ने सट्टा
 **DOM म्यानिपुलेसन**: प्रयोगकर्ता अन्तरक्रिया र API प्रतिक्रियाहरूको आधारमा वेबपेज सामग्रीलाई गतिशील रूपमा अपडेट गर्दै
 
 ### परियोजना संरचना सेटअप
 
-फ्रन्टएन्ड डाइरेक्टरी यस संगठित संरचनासँग सिर्जना गर्नुहोस्:
+संगठित संरचनासहित फ्रन्टएन्ड डाइरेक्टरी सिर्जना गर्नुहोस्:
 
 ```text
 frontend/
@@ -741,15 +934,15 @@ frontend/
 ```
 
 **आर्किटेक्चर बुझ्दै:**
-- **संरचना (HTML)**, व्यवहार (JavaScript), र प्रस्तुति (CSS) बीच चिन्ताहरू अलग गर्दछ
+- **संरचना (HTML)**, व्यवहार (JavaScript), र प्रस्तुति (CSS) बीच चिन्ता अलग गर्दछ
 - **सरल फाइल संरचना** कायम राख्छ जुन नेभिगेट गर्न र परिमार्जन गर्न सजिलो छ
-- **वेब विकासका उत्कृष्ट अभ्यासहरू** अनुसरण गर्दछ संगठन र मर्मतयोग्यताका लागि
+- **वेब विकासका लागि उत्तम अभ्यासहरू** अनुसरण गर्दछ संगठन र मर्मतयोग्यताका लागि
 
 ### HTML आधार निर्माण गर्दै: पहुँचयोग्यताको लागि अर्थपूर्ण संरचना
 
-अब HTML संरचना सुरु गरौं। आधुनिक वेब विकासले "अर्थपूर्ण HTML" मा जोड दिन्छ – HTML तत्वहरू प्रयोग गर्दै जसले स्पष्ट रूपमा आफ्नो उद्देश्य वर्णन गर्दछ, केवल आफ्नो उपस्थिति मात्र होइन। यसले तपाईंको अनुप्रयोगलाई स्क्रिन रिडरहरू, सर्च इन्जिनहरू, र अन्य उपकरणहरूमा पहुँचयोग्य बनाउँछ।
+HTML संरचनाबाट सुरु गरौं। आधुनिक वेब विकासले "अर्थपूर्ण HTML" मा जोड दिन्छ – HTML तत्वहरू प्रयोग गर्दै जसले स्पष्ट रूपमा आफ्नो उद्देश्य वर्णन गर्दछ, केवल आफ्नो उपस्थिति मात्र होइन। यसले तपाईंको एप्लिकेसनलाई स्क्रिन रिडरहरू, सर्च इन्जिनहरू, र अन्य उपकरणहरूको लागि पहुँचयोग्य बनाउँछ।
 
-**किन अर्थपूर्ण HTML महत्त्वपूर्ण छ**: कल्पना गर्नुहोस् कि तपाईंको च्याट एप कसैलाई फोनमा वर्णन गर्दै हुनुहुन्छ। तपाईं भन्नुहुन्छ "त्यहाँ शीर्षक र विवरण भएको हेडर छ, मुख्य क्षेत्र जहाँ कुराकानीहरू देखा पर्दछ, र तल सन्देश टाइप गर्न फारम छ।" अर्थपूर्ण HTML ले तत्वहरू प्रयोग गर्दछ जसले यो प्राकृतिक वर्णनसँग मेल खान्छ।
+**किन अर्थपूर्ण HTML महत्त्वपूर्ण छ**: कल्पना गर्नुहोस् तपाईंको च्याट एप कसैलाई फोनमा वर्णन गर्दै। तपाईं भन्नुहुन्छ "त्यहाँ शीर्षकको साथ हेडर छ, मुख्य क्षेत्र जहाँ कुराकानीहरू देखा पर्दछ, र तल सन्देश टाइप गर्न फारम छ।" अर्थपूर्ण HTMLले तत्वहरू प्रयोग गर्दछ जसले यो प्राकृतिक वर्णनसँग मेल खाउँछ।
 
 `index.html` सिर्जना गर्नुहोस् यस विचारपूर्वक संरचित मार्कअपसँग:
 
@@ -795,50 +988,33 @@ frontend/
 
 **प्रत्येक HTML तत्व र यसको उद्देश्य बुझ्दै:**
 
-#### कागजात संरचना
+#### दस्तावेज संरचना
 - **`<!DOCTYPE html>`**: ब्राउजरलाई यो आधुनिक HTML5 हो भन्छ
 - **`<html lang="en">`**: स्क्रिन रिडर र अनुवाद उपकरणहरूको लागि पृष्ठ भाषा निर्दिष्ट गर्दछ
 - **`<meta charset="UTF-8">`**: अन्तर्राष्ट्रिय पाठको लागि उचित क्यारेक्टर इन्कोडिङ सुनिश्चित गर्दछ
 - **`<meta name="viewport"...>`**: पृष्ठलाई मोबाइल-उत्तरदायी बनाउँछ जूम र स्केल नियन्त्रण गरेर
 
 #### अर्थपूर्ण तत्वहरू
-- **`<header>`**: शीर्षक र विवरण भएको शीर्ष खण्ड स्पष्ट रूपमा पहिचान गर्दछ
+- **`<header>`**: शीर्षक र विवरणको साथ शीर्ष खण्ड स्पष्ट रूपमा पहिचान गर्दछ
 - **`<main>`**: प्राथमिक सामग्री क्षेत्र (जहाँ कुराकानीहरू हुन्छन्) निर्दिष्ट गर्दछ
-- **`<form>`**: प्रयोगकर्ता इनपुटको लागि अर्थपूर्ण रूपमा सही छ, उचित कुञ्जीपाटी नेभिगेसन सक्षम गर्दछ
+- **`<form>`**: प्रयोगकर्ता इनपुटको लागि अर्थपूर्ण रूपमा सही, उचित कुञ्जीपाटी नेभिगेसन सक्षम गर्दछ
 
 #### पहुँचयोग्यता सुविधाहरू
 - **`role="log"`**: स्क्रिन रिडरहरूलाई यो क्षेत्र सन्देशहरूको कालानुक्रमिक लग समावेश गर्दछ भन्छ
-- **`aria-live="polite"`**: स्क्रिन रिडरहरूलाई नयाँ सन्देशहरू बिना अवरोध घोषणा गर्दछ
-- **`aria-label`**: फारम नियन्त्रणहरूको लागि वर्णनात्मक लेबलहरू प्रदान गर्दछ
-- **`required`**: ब्राउजरले प्रयोगकर्ताहरूले सन्देश प्रविष्ट गर्नुहोस् भनेर मान्यता दिन्छ
-
-#### CSS र JavaScript एकीकरण
-- **`class` गुणहरू**: CSS को लागि स्टाइलिङ हुकहरू प्रदान गर्दछ (जस्तै, `chat-container`, `input-group`)
-- **`id` गुणहरू**: JavaScript लाई विशिष्ट तत्वहरू फेला पार्न र हेरफेर गर्न अनुमति दिन्छ
-- **स्क्रिप्ट स्थान**: JavaScript फाइल अन्तमा लोड गरिन्छ ताकि HTML पहिले लोड होस्
-
-**किन यो संरचना काम गर्छ:**
-- **तार्किक प्रवाह**: हेडर → मुख्य सामग्री → इनपुट फारम प्राकृतिक पढ्ने क्रमसँग मेल खान्छ
-- **कुञ्जीपाटी पहुँचयोग्य**: प्रयोगकर्ताहरूले सबै अन्तरक्रियात्मक तत्वहरूमा ट्याब गर्न सक्दछन्
-- **स्क्रिन रिडर मैत्रीपूर्ण**: दृश्य अपाङ्गता भएका प्रयोगकर्ताहरूका लागि स्पष्ट ल्यान्डमार्कहरू र विवरणहरू
-- **मोबाइल उत्तरदायी**: भ्यूपोर्ट मेटा ट्यागले उत्तरदायी डिजाइन सक्षम गर्दछ
-- **प्रगतिशील वृद्धि**: CSS वा JavaScript लोड गर्न असफल भए पनि काम गर्दछ
-
-### अन्तरक्रियात्मक JavaScript थप्दै: आधुनिक वेब अनुप्रयोग तर्क
+- **`aria-live="polite"`**: स्क्रिन र
+अब हामी हाम्रो च्याट इन्टरफेसलाई जीवन्त बनाउने जाभास्क्रिप्ट निर्माण गर्नेछौं। हामी आधुनिक जाभास्क्रिप्ट ढाँचाहरू प्रयोग गर्नेछौं जुन व्यावसायिक वेब विकासमा देखिन्छ, जस्तै ES6 क्लासहरू, async/await, र इभेन्ट-ड्राइभन प्रोग्रामिङ।
 
-अब हामी JavaScript निर्माण गर्नेछौं जसले हाम्रो च्याट इन्टरफेसलाई जीवन्त बनाउँछ। हामी व्यावसायिक वेब विकासमा तपाईंले सामना गर्ने आधुनिक JavaScript ढाँचाहरू प्रयोग गर्नेछौं, जसमा ES6 कक्षाहरू, async/await, र इभेन्ट-ड्रिभन प्रोग्रामिङ समावेश छ।
+#### आधुनिक जाभास्क्रिप्ट आर्किटेक्चर बुझ्दै
 
-#### आधुनिक JavaScript आर्किटेक्चर बुझ्दै
+क्रमिक कोड लेख्ने (एकपछि अर्को चल्ने कार्यहरू) सट्टा, हामी **क्लास-आधारित आर्किटेक्चर** सिर्जना गर्नेछौं। क्लासलाई वस्तुहरू सिर्जना गर्नको लागि ब्लूप्रिन्टको रूपमा सोच्नुहोस् – जस्तै आर्किटेक्टको ब्लूप्रिन्टले धेरै घरहरू निर्माण गर्न प्रयोग गर्न सकिन्छ।
 
-प्रक्रियात्मक कोड लेख्ने (क्रममा चल्ने कार्यहरूको श्रृंखला) सट्टा, हामी **क्लास-आधारित आर्किटेक्चर** सिर्जना गर्नेछौं। कक्षा भनेको वस्तुहरू सिर्जना गर्नको लागि ब्लूप्रिन्ट जस्तै हो – जस्तै एक वास्तुकारको ब्लूप्रिन्टले धेरै घरहरू निर्माण गर्न प्रयोग गर्न सकिन्छ।
-
-**किन वेब अनुप्रयोगहरूको लागि कक्षाहरू प्रयोग गर्ने?**
-- **संगठन**: सबै सम्बन्धित कार्यक्षमता एकसाथ समूह गरिएको छ
-- **पुन: प्रयोगयोग्यता**: तपाईंले एउटै पृष्ठमा धेरै च्याट उदाहरणहरू सिर्जना गर्न सक्नुहुन्छ
-- **मर्मतयोग्यता**: विशिष्ट सुविधाहरू डिबग गर्न र परिमार्जन गर्न सजिलो
+**वेब एप्लिकेसनहरूका लागि क्लास किन प्रयोग गर्ने?**
+- **व्यवस्थितता**: सबै सम्बन्धित कार्यक्षमता एकसाथ समूह गरिन्छ
+- **पुनः प्रयोगयोग्यता**: तपाईं एउटै पृष्ठमा धेरै च्याट उदाहरणहरू सिर्जना गर्न सक्नुहुन्छ
+- **रखरखाव क्षमता**: विशेष सुविधाहरू डिबग गर्न र संशोधन गर्न सजिलो
 - **व्यावसायिक मानक**: यो ढाँचा React, Vue, र Angular जस्ता फ्रेमवर्कहरूमा प्रयोग गरिन्छ
 
-`app.js` सिर्जना गर्नुहोस् यस आधुनिक, राम्रो संरचित JavaScript संग:
+`app.js` सिर्जना गर्नुहोस् यो आधुनिक, राम्रो संरचित जाभास्क्रिप्टको साथ:
 
 ```javascript
 // app.js - Modern chat application logic
@@ -956,9 +1132,9 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 ```
 
-#### प्रत्येक JavaScript अवधारणा बुझ्दै
+#### प्रत्येक जाभास्क्रिप्ट अवधारणा बुझ्दै
 
-**ES6 कक्षा संरचना**:
+**ES6 क्लास संरचना**:
 ```javascript
 class ChatApp {
     constructor() {
@@ -991,8 +1167,8 @@ try {
 }
 ```
 
-**इभेन्ट-ड्रिभन प्रोग्रामिङ**:
-केही भयो कि जाँच गरिरहनुको सट्टा, हामी घटनाहरूको लागि "सुन्छौं":
+**इभेन्ट-ड्राइभन प्रोग्रामिङ**:
+केही भएको छ कि छैन भनेर निरन्तर जाँच गर्ने सट्टा, हामी घटनाहरूको लागि "सुन्छौं":
 ```javascript
 // When form is submitted, run handleSubmit
 this.form.addEventListener("submit", (e) => this.handleSubmit(e));
@@ -1001,7 +1177,7 @@ this.form.addEventListener("submit", (e) => this.handleSubmit(e));
 this.input.addEventListener("keypress", (e) => { /* ... */ });
 ```
 
-**DOM म्यानिपुलेसन**:
+**DOM म्यानिपुलेशन**:
 ```javascript
 // Create new elements
 const messageElement = document.createElement("div");
@@ -1014,7 +1190,7 @@ messageElement.innerHTML = "Hello world!";
 this.messages.appendChild(messageElement);
 ```
 
-#### सुरक्षा र उत्कृष्ट अभ्यासहरू
+#### सुरक्षा र उत्तम अभ्यासहरू
 
 **XSS रोकथाम**:
 ```javascript
@@ -1025,7 +1201,7 @@ escapeHtml(text) {
 }
 ```
 
-**किन यो महत्त्वपूर्ण छ**: यदि प्रयोगकर्ताले `<script>alert('hack')</script>` टाइप गर्छ भने, यो कार्यले यसलाई पाठको रूपमा प्रदर्शन सुनिश्चित गर्दछ बरु कोडको रूपमा कार्यान्वयन नगरी।
+**किन यो महत्त्वपूर्ण छ**: यदि प्रयोगकर्ताले `<script>alert('hack')</script>` टाइप गर्छ भने, यो कार्यले यसलाई कोडको रूपमा कार्यान्वयन गर्नुको सट्टा पाठको रूपमा प्रदर्शन सुनिश्चित गर्दछ।
 
 **त्रुटि ह्यान्डलिङ**:
 ```javascript
@@ -1040,14 +1216,41 @@ try {
 
 **प्रयोगकर्ता अनुभव विचारहरू**:
 - **आशावादी UI**: प्रयोगकर्ता सन्देश तुरुन्तै थप्नुहोस्, सर्भर प्रतिक्रिया कुर्नुहोस्
-- **लोडिङ अवस्था**: बटनहरू अक्षम गर्नुहोस् र "पठाउँदै
-यो आर्किटेक्चर स्केलेबल छ – तपाईं सजिलै सन्देश सम्पादन, फाइल अपलोड, वा बहु संवाद थ्रेडहरू जस्ता सुविधाहरू थप्न सक्नुहुन्छ बिना कोर संरचना पुनःलेखन नगरी।
+- **लोडिङ अवस्था**: बटनहरू अक्षम गर्नुहोस् र "पठाउँदै..." देखाउनुहोस् कुर्दा
+- **स्वत: स्क्रोल**: नयाँ सन्देशहरू देखिने बनाउनुहोस्
+- **इनपुट मान्यता**: खाली सन्देशहरू नपठाउनुहोस्
+- **किबोर्ड सर्टकटहरू**: इन्टर कुञ्जीले सन्देशहरू पठाउँछ (जस्तै वास्तविक च्याट एपहरू)
+
+#### एप्लिकेसन फ्लो बुझ्दै
+
+1. **पृष्ठ लोड हुन्छ** → `DOMContentLoaded` इभेन्ट फायर हुन्छ → `new ChatApp()` सिर्जना हुन्छ
+2. **कन्स्ट्रक्टर चल्छ** → DOM तत्व सन्दर्भहरू प्राप्त गर्दछ → इभेन्ट लिसनरहरू सेटअप गर्दछ
+3. **प्रयोगकर्ताले सन्देश टाइप गर्छ** → इन्टर थिच्छ वा पठाउन क्लिक गर्छ → `handleSubmit` चल्छ
+4. **handleSubmit** → इनपुट मान्यता दिन्छ → लोडिङ अवस्था देखाउँछ → API कल गर्छ
+5. **API प्रतिक्रिया दिन्छ** → च्याटमा AI सन्देश थप्छ → इन्टरफेस पुन: सक्षम बनाउँछ
+6. **अर्को सन्देशको लागि तयार** → प्रयोगकर्ता च्याट जारी राख्न सक्छ
+
+यो आर्किटेक्चर स्केलेबल छ – तपाईं सन्देश सम्पादन, फाइल अपलोड, वा धेरै कुराकानी थ्रेडहरू जस्ता सुविधाहरू सजिलै थप्न सक्नुहुन्छ कोर संरचना पुन: लेख्न बिना।
+
+### 🎯 शैक्षिक जाँच: आधुनिक फ्रन्टएन्ड आर्किटेक्चर
+
+**आर्किटेक्चर बुझाइ**: तपाईंले आधुनिक जाभास्क्रिप्ट ढाँचाहरू प्रयोग गरेर पूर्ण एकल-पृष्ठ एप्लिकेसन कार्यान्वयन गर्नुभएको छ। यो व्यावसायिक स्तरको फ्रन्टएन्ड विकासको प्रतिनिधित्व गर्दछ।
 
-### तपाईंको च्याट इन्टरफेसको स्टाइलिङ
+**मुख्य अवधारणाहरूमा महारत**:
+- **ES6 क्लास आर्किटेक्चर**: व्यवस्थित, रखरखाव योग्य कोड संरचना
+- **Async/Await ढाँचाहरू**: आधुनिक असिंक्रोनस प्रोग्रामिङ
+- **इभेन्ट-ड्राइभन प्रोग्रामिङ**: उत्तरदायी प्रयोगकर्ता इन्टरफेस डिजाइन
+- **सुरक्षा उत्तम अभ्यासहरू**: XSS रोकथाम र इनपुट मान्यता
 
-अब CSS प्रयोग गरेर आधुनिक, आकर्षक च्याट इन्टरफेस बनाउँ। राम्रो स्टाइलिङले तपाईंको एप्लिकेशनलाई व्यावसायिक महसुस गराउँछ र समग्र प्रयोगकर्ता अनुभव सुधार गर्दछ। हामी Flexbox, CSS Grid, र कस्टम प्रोपर्टीहरू जस्ता आधुनिक CSS सुविधाहरू प्रयोग गर्नेछौं ताकि उत्तरदायी र पहुँचयोग्य डिजाइन तयार गर्न सकियोस्।
+**उद्योग कनेक्शन**: तपाईंले सिकेका ढाँचाहरू (क्लास-आधारित आर्किटेक्चर, असिंक्रोनस अपरेसनहरू, DOM म्यानिपुलेशन) आधुनिक फ्रेमवर्कहरू जस्तै React, Vue, र Angular को आधार हुन्। तपाईं उत्पादन एप्लिकेसनहरूमा प्रयोग हुने समान आर्किटेक्चरल सोचको साथ निर्माण गर्दै हुनुहुन्छ।
 
-`styles.css` बनाउनुहोस् यी विस्तृत स्टाइलहरूसँग:
+**प्रतिबिम्ब प्रश्न**: तपाईंले यो च्याट एप्लिकेसनलाई धेरै कुराकानीहरू वा प्रयोगकर्ता प्रमाणीकरण ह्यान्डल गर्न कसरी विस्तार गर्नुहुन्छ? आवश्यक आर्किटेक्चरल परिवर्तनहरू विचार गर्नुहोस् र क्लास संरचना कसरी विकसित हुनेछ।
+
+### तपाईंको च्याट इन्टरफेसलाई स्टाइलिङ गर्दै
+
+अब हामी CSS को साथ आधुनिक, दृश्यात्मक रूपमा आकर्षक च्याट इन्टरफेस सिर्जना गर्नेछौं। राम्रो स्टाइलिङले तपाईंको एप्लिकेसनलाई व्यावसायिक महसुस गराउँछ र समग्र प्रयोगकर्ता अनुभव सुधार गर्दछ। हामी Flexbox, CSS Grid, र अनुकूलन गुणहरू जस्ता आधुनिक CSS सुविधाहरू प्रयोग गर्नेछौं।
+
+`styles.css` सिर्जना गर्नुहोस् यी व्यापक शैलीहरूको साथ:
 
 ```css
 /* styles.css - Modern chat interface styling */
@@ -1306,18 +1509,18 @@ body {
 }
 ```
 
-**CSS आर्किटेक्चरको बुझाइ:**
-- **प्रयोग गर्दछ** CSS कस्टम प्रोपर्टीहरू (भेरिएबलहरू) निरन्तर थिमिङ र सजिलो मर्मतका लागि
-- **लागु गर्दछ** Flexbox लेआउट उत्तरदायी डिजाइन र सही संरेखणका लागि
-- **सामेल गर्दछ** सन्देश देखिने क्रममा नरम एनिमेसनहरू, जो ध्यान भंग नगर्ने खालका छन्
+**CSS आर्किटेक्चर बुझ्दै:**
+- **प्रयोग गर्दछ** CSS अनुकूलन गुणहरू (भेरिएबलहरू) सुसंगत थिमिङ र सजिलो रखरखावको लागि
+- **कार्यान्वयन गर्दछ** Flexbox लेआउट उत्तरदायी डिजाइन र उचित संरेखणको लागि
+- **सामेल गर्दछ** सन्देशको उपस्थिति बिना ध्यान भंग गर्ने सहज एनिमेसनहरू
 - **प्रदान गर्दछ** प्रयोगकर्ता सन्देशहरू, AI प्रतिक्रियाहरू, र त्रुटि अवस्थाहरू बीच दृश्य भिन्नता
 - **समर्थन गर्दछ** उत्तरदायी डिजाइन जसले डेस्कटप र मोबाइल उपकरणहरूमा काम गर्दछ
-- **विचार गर्दछ** पहुँचयोग्यता कम गति प्राथमिकताहरू र सही कन्ट्रास्ट अनुपातहरूसँग
-- **प्रस्ताव गर्दछ** प्रयोगकर्ताको प्रणाली प्राथमिकतामा आधारित डार्क मोड समर्थन
+- **विचार गर्दछ** पहुँचयोग्यता कम गति प्राथमिकताहरू र उचित कन्ट्रास्ट अनुपातहरूसँग
+- **अफर गर्दछ** प्रयोगकर्ताको प्रणाली प्राथमिकताहरूमा आधारित डार्क मोड समर्थन
 
 ### तपाईंको ब्याकएन्ड URL कन्फिगर गर्दै
 
-अन्तिम चरण भनेको तपाईंको JavaScript मा `BASE_URL` अपडेट गर्नु हो ताकि यो तपाईंको ब्याकएन्ड सर्भरसँग मेल खान सकोस्:
+अन्तिम चरण भनेको तपाईंको जाभास्क्रिप्टमा `BASE_URL` अपडेट गर्नु हो ताकि यो तपाईंको ब्याकएन्ड सर्भरसँग मेल खान्छ:
 
 ```javascript
 // For local development
@@ -1329,247 +1532,42 @@ this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 
 **तपाईंको ब्याकएन्ड URL निर्धारण गर्दै:**
 - **स्थानीय विकास**: यदि फ्रन्टएन्ड र ब्याकएन्ड दुवै स्थानीय रूपमा चलाउँदै हुनुहुन्छ भने `http://localhost:5000` प्रयोग गर्नुहोस्
-- **Codespaces**: पोर्ट 5000 सार्वजनिक बनाएपछि पोर्ट्स ट्याबमा तपाईंको ब्याकएन्ड URL खोज्नुहोस्
-- **प्रोडक्सन**: होस्टिङ सेवामा तैनाथ गर्दा तपाईंको वास्तविक डोमेनसँग प्रतिस्थापन गर्नुहोस्
-
-> 💡 **परीक्षण सुझाव**: तपाईं आफ्नो FastAPI सर्भरबाट स्वागत सन्देश देख्नको लागि ब्राउजरमा रूट URL भ्रमण गरेर ब्याकएन्ड सिधै परीक्षण गर्न सक्नुहुन्छ।
-
-## परीक्षण र तैनाथी
-
-अब तपाईंले फ्रन्टएन्ड र ब्याकएन्ड कम्पोनेन्टहरू निर्माण गर्नुभएको छ, आउनुहोस् सबै कुरा सँगै काम गर्छ कि भनेर परीक्षण गरौं र तपाईंको च्याट सहायकलाई अरूसँग साझा गर्न तैनाथी विकल्पहरूको अन्वेषण गरौं।
-
-### स्थानीय परीक्षण कार्यप्रवाह
-
-तपाईंको पूर्ण एप्लिकेशन परीक्षण गर्न यी चरणहरू पालना गर्नुहोस्:
-
-```mermaid
-graph TD
-    A[Start Backend Server] --> B[Configure Environment Variables]
-    B --> C[Test API Endpoints]
-    C --> D[Open Frontend in Browser]
-    D --> E[Test Chat Functionality]
-    E --> F[Debug Any Issues]
-```
-
-**चरण-दर-चरण परीक्षण प्रक्रिया:**
-
-1. **तपाईंको ब्याकएन्ड सर्भर सुरु गर्नुहोस्**:
-   ```bash
-   cd backend
-   source venv/bin/activate  # or venv\Scripts\activate on Windows
-   python api.py
-   ```
-
-2. **API काम गरिरहेको छ कि छैन जाँच गर्नुहोस्**:
-   - ब्राउजरमा `http://localhost:5000` खोल्नुहोस्
-   - तपाईंले आफ्नो FastAPI सर्भरबाट स्वागत सन्देश देख्नुपर्छ
-
-3. **तपाईंको फ्रन्टएन्ड खोल्नुहोस्**:
-   - तपाईंको फ्रन्टएन्ड डाइरेक्टरीमा जानुहोस्
-   - ब्राउजरमा `index.html` खोल्नुहोस्
-   - वा विकास अनुभव सुधार गर्न VS Code को Live Server एक्सटेन्सन प्रयोग गर्नुहोस्
-
-4. **च्याट कार्यक्षमता परीक्षण गर्नुहोस्**:
-   - इनपुट फिल्डमा सन्देश टाइप गर्नुहोस्
-   - "Send" क्लिक गर्नुहोस् वा Enter थिच्नुहोस्
-   - AI ले उपयुक्त प्रतिक्रिया दिन्छ कि छैन जाँच गर्नुहोस्
-   - कुनै पनि JavaScript त्रुटिहरूको लागि ब्राउजर कन्सोल जाँच गर्नुहोस्
-
-### सामान्य समस्याहरू समाधान गर्दै
-
-| समस्या | लक्षण | समाधान |
-|---------|----------|----------|
-| **CORS त्रुटि** | फ्रन्टएन्ड ब्याकएन्डमा पुग्न सक्दैन | FastAPI CORSMiddleware सही रूपमा कन्फिगर गरिएको छ कि छैन सुनिश्चित गर्नुहोस् |
-| **API Key त्रुटि** | 401 अनधिकृत प्रतिक्रिया | तपाईंको `GITHUB_TOKEN` वातावरण भेरिएबल जाँच गर्नुहोस् |
-| **कनेक्शन अस्वीकृत** | फ्रन्टएन्डमा नेटवर्क त्रुटिहरू | ब्याकएन्ड URL र Flask सर्भर चलिरहेको छ कि छैन जाँच गर्नुहोस् |
-| **AI प्रतिक्रिया छैन** | खाली वा त्रुटि प्रतिक्रिया | API कोटा वा प्रमाणीकरण समस्याहरूको लागि ब्याकएन्ड लगहरू जाँच गर्नुहोस् |
-
-**सामान्य डिबगिङ चरणहरू:**
-- **ब्राउजरको डेभलपर टूल्स कन्सोल** मा JavaScript त्रुटिहरू जाँच गर्नुहोस्
-- **नेटवर्क ट्याब** मा सफल API अनुरोधहरू र प्रतिक्रियाहरू देखिन्छ कि छैन जाँच गर्नुहोस्
-- **ब्याकएन्ड टर्मिनल आउटपुट** मा Python त्रुटिहरू वा API समस्याहरू समीक्षा गर्नुहोस्
-- **पर्यावरण भेरिएबलहरू** सही रूपमा लोड गरिएको र पहुँचयोग्य छन् कि छैन सुनिश्चित गर्नुहोस्
-
-## GitHub Copilot Agent चुनौती 🚀
-
-Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
-
-**विवरण:** संवाद इतिहास र सन्देश स्थायित्व थपेर च्याट सहायकलाई सुधार गर्नुहोस्। यो चुनौतीले तपाईंलाई च्याट एप्लिकेशनहरूमा अवस्था व्यवस्थापन गर्ने र राम्रो प्रयोगकर्ता अनुभवको लागि डाटा भण्डारण कार्यान्वयन गर्ने तरिका बुझ्न मद्दत गर्नेछ।
-
-**प्रेरणा:** च्याट एप्लिकेशनलाई संवाद इतिहास समावेश गर्न संशोधन गर्नुहोस् जसले सत्रहरू बीचमा स्थायित्व कायम राख्छ। च्याट सन्देशहरू स्थानीय भण्डारणमा बचत गर्ने, पृष्ठ लोड हुँदा संवाद इतिहास देखाउने, र "Clear History" बटन समावेश गर्ने कार्यक्षमता थप्नुहोस्। साथै टाइपिङ संकेतकहरू र सन्देश टाइमस्ट्याम्पहरू कार्यान्वयन गर्नुहोस् ताकि च्याट अनुभवलाई अझ यथार्थपरक बनाइयोस्।
-
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बारे थप जान्नुहोस्।
-
-## असाइनमेन्ट: तपाईंको व्यक्तिगत AI सहायक निर्माण गर्नुहोस्
-
-अब तपाईं आफ्नो AI सहायक कार्यान्वयन निर्माण गर्नुहुनेछ। केवल ट्युटोरियल कोडलाई पुनः उत्पादन गर्नुको सट्टा, यो अवधारणाहरू लागू गर्दा तपाईंको आफ्नै रुचि र प्रयोग केसहरू प्रतिबिम्बित गर्ने केही निर्माण गर्ने अवसर हो।
-
-### परियोजना आवश्यकताहरू
-
-तपाईंको परियोजनालाई सफा, व्यवस्थित संरचनासँग सेटअप गरौं:
-
-```text
-my-ai-assistant/
-├── backend/
-│   ├── api.py          # Your FastAPI server
-│   ├── llm.py          # AI integration functions
-│   ├── .env            # Your secrets (keep this safe!)
-│   └── requirements.txt # Python dependencies
-├── frontend/
-│   ├── index.html      # Your chat interface
-│   ├── app.js          # The JavaScript magic
-│   └── styles.css      # Make it look amazing
-└── README.md           # Tell the world about your creation
-```
-
-### कोर कार्यान्वयन कार्यहरू
-
-**ब्याकएन्ड विकास:**
-- **हाम्रो FastAPI कोड लिउँ** र यसलाई तपाईंको बनाउनुहोस्
-- **एक अद्वितीय AI व्यक्तित्व सिर्जना गर्नुहोस्** – सायद एक सहयोगी खाना पकाउने सहायक, एक रचनात्मक लेखन साझेदार, वा अध्ययन साथी?
-- **मजबुत त्रुटि ह्यान्डलिङ थप्नुहोस्** ताकि तपाईंको एप्लिकेशन समस्याहरू हुँदा नबिग्रियोस्
-- **स्पष्ट डकुमेन्टेसन लेख्नुहोस्** जो कोहीलाई तपाईंको API कसरी काम गर्छ बुझ्न चाहन्छ
-
-**फ्रन्टएन्ड विकास:**
-- **एक च्याट इन्टरफेस निर्माण गर्नुहोस्** जसले सहज र स्वागतयोग्य महसुस गराउँछ
-- **सफा, आधुनिक JavaScript लेख्नुहोस्** जसलाई तपाईं अन्य विकासकर्ताहरूलाई गर्वका साथ देखाउन सक्नुहुन्छ
-- **कस्टम स्टाइलिङ डिजाइन गर्नुहोस्** जसले तपाईंको AI को व्यक्तित्वलाई प्रतिबिम्बित गर्छ – रमाइलो र रंगीन? सफा र न्यूनतम? पूर्ण रूपमा तपाईंको रोजाइ!
-- **पक्का गर्नुहोस्** यो फोन र कम्प्युटर दुवैमा राम्रोसँग काम गर्छ
-
-**व्यक्तिगतकरण आवश्यकताहरू:**
-- **एक अद्वितीय नाम र व्यक्तित्व चयन गर्नुहोस्** तपाईंको AI सहायकको लागि – सायद तपाईंको रुचि वा तपाईंले समाधान गर्न चाहेको समस्याहरू प्रतिबिम्बित गर्ने केही
-- **भिजुअल डिजाइन अनुकूलन गर्नुहोस्** ताकि तपाईंको सहायकको शैलीसँग मेल खान सकोस्
-- **एक आकर्षक स्वागत सन्देश लेख्नुहोस्** जसले मानिसहरूलाई च्याट सुरु गर्न प्रेरित गर्छ
-- **विभिन्न प्रकारका प्रश्नहरूसँग तपाईंको सहायक परीक्षण गर्नुहोस्** ताकि यसले कसरी प्रतिक्रिया दिन्छ हेर्न सकियोस्
-
-### सुधारका विचारहरू (वैकल्पिक)
-
-तपाईंको परियोजनालाई अर्को स्तरमा लैजान चाहनुहुन्छ? यहाँ अन्वेषण गर्न केही रमाइलो विचारहरू छन्:
-
-| सुविधा | विवरण | तपाईंले अभ्यास गर्ने सीपहरू |
-|---------|-------------|------------------------|
-| **सन्देश इतिहास** | पृष्ठ रिफ्रेस पछि पनि संवाद सम्झनुहोस् | localStorage, JSON ह्यान्डलिङ |
-| **टाइपिङ संकेतकहरू** | प्रतिक्रिया पर्खंदा "AI टाइप गर्दैछ..." देखाउनुहोस् | CSS एनिमेसन, असिंक्रोनस प्रोग्रामिङ |
-| **सन्देश टाइमस्ट्याम्पहरू** | प्रत्येक सन्देश कहिले पठाइएको थियो देखाउनुहोस् | मिति/समय ढाँचाकरण, UX डिजाइन |
-| **च्याट निर्यात गर्नुहोस्** | प्रयोगकर्ताहरूलाई उनीहरूको संवाद डाउनलोड गर्न दिनुहोस् | फाइल ह्यान्डलिङ, डाटा निर्यात |
-| **थिम स्विचिङ** | लाइट/डार्क मोड टगल | CSS भेरिएबलहरू, प्रयोगकर्ता प्राथमिकताहरू |
-| **भ्वाइस इनपुट** | स्पीच-टु-टेक्स्ट कार्यक्षमता थप्नुहोस् | वेब APIs, पहुँचयोग्यता |
-
-### परीक्षण र डकुमेन्टेसन
-
-**गुणस्तर सुनिश्चितता:**
-- **विभिन्न इनपुट प्रकार र किनारा केसहरूसँग तपाईंको एप्लिकेशन परीक्षण गर्नुहोस्**
-- **पक्का गर्नुहोस्** उत्तरदायी डिजाइन विभिन्न स्क्रिन साइजहरूमा काम गर्छ
-- **किबोर्ड नेभिगेसन र स्क्रिन रिडरहरूसँग पहुँचयोग्यता जाँच गर्नुहोस्**
-- **HTML र CSS मानक अनुपालनको लागि मान्य गर्नुहोस्**
-
-**डकुमेन्टेसन आवश्यकताहरू:**
-- **README.md लेख्नुहोस्** जसले तपाईंको परियोजना र यसलाई कसरी चलाउने भनेर व्याख्या गर्छ
-- **तपाईंको च्याट इन्टरफेसको स्क्रिनसटहरू समावेश गर्नुहोस्** कार्यमा
-- **तपाईंले थपेका कुनै पनि अद्वितीय सुविधाहरू वा अनुकूलनहरू डकुमेन्ट गर्नुहोस्**
-- **अन्य विकासकर्ताहरूका लागि स्पष्ट सेटअप निर्देशनहरू प्रदान गर्नुहोस्**
-
-### पेश गर्ने दिशानिर्देशहरू
-
-**परियोजना डेलिभरेबलहरू:**
-1. सबै स्रोत कोडसहित पूर्ण परियोजना फोल्डर
-2. README.md परियोजना विवरण र सेटअप निर्देशनहरूसहित
-3. तपाईंको च्याट सहायक कार्यमा रहेको प्रदर्शन गर्ने स्क्रिनसटहरू
-4. तपाईंले के सिक्नुभयो र के चुनौतीहरूको सामना गर्नुभयो भन्ने छोटो प्रतिबिम्ब
-
-**मूल्यांकन मापदण्ड:**
-- **कार्यक्षमता**: के च्याट सहायक अपेक्षाअनुसार काम गर्छ?
-- **कोड गुणस्तर**: के कोड राम्रोसँग व्यवस्थित, टिप्पणी गरिएको, र मर्मतयोग्य छ?
-- **डिजाइन**: के इन्टरफेस दृश्यात्मक रूपमा आकर्षक र प्रयोगकर्ता-अनुकूल छ?
-- **रचनात्मकता**: तपाईंको कार्यान्वयन कति अद्वितीय र व्यक्तिगत छ?
-- **डकुमेन्टेसन**: के सेटअप निर्देशनहरू स्पष्ट र पूर्ण छन्?
-
-> 💡 **सफलता सुझाव**: पहिले आधारभूत आवश्यकताहरूबाट सुरु गर्नुहोस्, त्यसपछि सबै कुरा काम गरेपछि सुधारहरू थप्नुहोस्। उन्नत सुविधाहरू थप्नुअघि एक पॉलिश गरिएको कोर अनुभव सिर्जना गर्न ध्यान केन्द्रित गर्नुहोस्।
-
-## समाधान
-
-[समाधान](./solution/README.md)
-
-## बोनस चुनौतीहरू
-
-तपाईंको AI सहायकलाई अर्को स्तरमा लैजान तयार हुनुहुन्छ? यी उन्नत चुनौतीहरू प्रयास गर्नुहोस् जसले AI एकीकरण र वेब विकासको तपाईंको बुझाइलाई गहिरो बनाउँछ।
-
-### व्यक्तित्व अनुकूलन
-
-वास्तविक जादू तब हुन्छ जब तपाईं आफ्नो AI सहायकलाई अद्वितीय व्यक्तित्व दिनुहुन्छ। विभिन्न प्रणाली प्रेरणाहरू प्रयोग गरेर विशेष सहायकहरू सिर्जना गर्नुहोस्:
-
-**व्यावसायिक सहायक उदाहरण:**
-```python
-call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
-```
-
-**रचनात्मक लेखन सहयोगी उदाहरण:**
-```python
-call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
-```
-
-**प्राविधिक मेन्टर उदाहरण:**
-```python
-call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
-```
-
-### फ्रन्टएन्ड सुधारहरू
-
-तपाईंको च्याट इन्टरफेसलाई यी दृश्य र कार्यात्मक सुधारहरूसँग रूपान्तरण गर्नुहोस्:
-
-**उन्नत CSS सुविधाहरू:**
-- **सन्देश एनिमेसन र ट्रान्जिसनहरू नरम बनाउनुहोस्**
-- **CSS आकारहरू र ग्रेडियन्टहरूसँग कस्टम च्याट बबल डिजाइन थप्नुहोस्**
-- **AI "सोच्दैछ" हुँदा टाइपिङ संकेतक एनिमेसन सिर्जना गर्नुहोस्**
-- **इमोजी प्रतिक्रिया वा सन्देश रेटिङ प्रणाली डिजाइन गर्नुहोस्**
-
-**JavaScript सुधारहरू:**
-- **किबोर्ड सर्टकटहरू थप्नुहोस्** (Ctrl+Enter पठाउन, Escape इनपुट खाली गर्न)
-- **सन्देश खोज र फिल्टरिङ कार्यक्षमता कार्यान्वयन गर्नुहोस्**
-- **संवाद निर्यात सुविधा सिर्जना गर्नुहोस्** (टेक्स्ट वा JSON रूपमा डाउनलोड गर्नुहोस्)
-- **सन्देश हराउनबाट रोक्नको लागि स्थानीय भण्डारणमा स्वत: बचत थप्नुहोस्**
-
-### उन्नत AI एकीकरण
-
-**बहु AI व्यक्तित्वहरू:**
-- **विभिन्न AI व्यक्तित्वहरू बीच स्विच गर्न ड्रपडाउन सिर्जना गर्नुहोस्**
-- **प्रयोगकर्ताको मनपर्ने व्यक्तित्वलाई स्थानीय भण्डारणमा बचत गर्नुहोस्**
-- **संवाद प्रवाह कायम राख्ने सन्दर्भ स्विचिङ कार्यान्वयन गर्नुहोस्**
+- **Codespaces**: पोर्ट 5000 सार्वजनिक बनाएपछि पोर्ट ट्याबमा तपाईंको ब्याकएन्ड URL फेला पार्नुहोस्
+- **उत्पादन**: होस्टिङ सेवामा तैनाती गर्दा तपाईंको वास्तविक डोमेनसँग प्रतिस्थापन गर्नुहोस्
 
-**स्मार्ट प्रतिक्रिया सुविधाहरू:**
-- **संवाद सन्दर्भ जागरूकता थप्नुहोस्** (AI ले अघिल्लो सन्देशहरू सम्झन्छ)
-- **संवाद विषयको आधारमा स्मार्ट सुझावहरू कार्यान्वयन गर्नुहोस्**
-- **सामान्य प्रश्नहरूको लागि छिटो प्रतिक्रिया बटनहरू सिर्जना गर्नुहोस्**
+> 💡 **परीक्षण सुझाव**: तपाईं आफ्नो ब्राउजरमा रूट URL भ्रमण गरेर आफ्नो ब्याकएन्ड प्रत्यक्ष परीक्षण गर्न सक्नुहुन्छ। तपाईंले आफ्नो FastAPI सर्भरबाट स्वागत सन्देश देख्नुपर्छ।
+- **वार्तालापको विषयमा आधारित स्मार्ट सुझावहरू लागू गर्नुहोस्**
+- **सामान्य प्रश्नहरूको लागि छिटो उत्तर बटनहरू सिर्जना गर्नुहोस्**
 
-> 🎯 **सिकाइको लक्ष्य**: यी बोनस चुनौतीहरूले तपाईंलाई उत्पादन एप्लिकेशनहरूमा प्रयोग गरिने उन्नत वेब विकास ढाँचाहरू र AI एकीकरण प्रविधिहरू बुझ्न मद्दत गर्छ।
+> 🎯 **शिक्षण लक्ष्य**: यी बोनस चुनौतीहरूले तपाईंलाई उत्पादन अनुप्रयोगहरूमा प्रयोग गरिने उन्नत वेब विकास ढाँचाहरू र एआई एकीकरण प्रविधिहरू बुझ्न मद्दत गर्छ।
 
-## सारांश र आगामी चरणहरू
+## सारांश र आगामी कदमहरू
 
-बधाई छ! तपाईंले स्क्र्याचबाट पूर्ण AI-संचालित च्याट सहायक सफलतापूर्वक निर्माण गर्नुभएको छ। यस परियोजनाले तपाईंलाई आधुनिक वेब विकास प्रविधिहरू र AI एकीकरणसँग व्यावहारिक अनुभव प्रदान गरेको छ – आजको प्रविधि परिदृश्यमा अत्यधिक मूल्यवान सीपहरू।
+बधाई छ! तपाईंले सुरुबाट पूर्ण एआई-संचालित च्याट सहायक निर्माण गर्न सफल हुनुभएको छ। यस परियोजनाले तपाईंलाई आधुनिक वेब विकास प्रविधिहरू र एआई एकीकरणसँग व्यावहारिक अनुभव प्रदान गरेको छ – आजको प्रविधि क्षेत्रमा अत्यन्तै मूल्यवान सीपहरू।
 
 ### तपाईंले के हासिल गर्नुभयो
 
-यस पाठको क्रममा, तपाईंले धेरै प्रमुख प्रविधिहरू र अवधारणाहरूमा महारत हासिल गर्नुभएको छ:
+यस पाठक्रमको क्रममा, तपाईंले धेरै प्रमुख प्रविधिहरू र अवधारणाहरूमा महारत हासिल गर्नुभएको छ:
 
 **ब्याकएन्ड विकास:**
-- **GitHub Models API सँग एकीकृत** AI कार्यक्षमताका लागि
-- **Flask प्रयोग गरेर RESTful API निर्माण गरियो** उचित त्रुटि ह्यान्डलिङसहित
-- **सुरक्षित प्रमाणीकरण कार्यान्वयन गरियो** वातावरण भेरिएबलहरू प्रयोग गरेर
-- **CORS कन्फिगर गरियो** फ्रन्टएन्ड र ब्याकएन्ड बीच क्रस-ओरिजिन अनुरोधहरूको लागि
+- **GitHub Models API** सँग एआई कार्यक्षमता एकीकृत गर्नुभयो
+- **Flask** प्रयोग गरेर RESTful API निर्माण गर्नुभयो जसमा उचित त्रुटि व्यवस्थापन छ
+- **पर्यावरण चरहरू** प्रयोग गरेर सुरक्षित प्रमाणीकरण लागू गर्नुभयो
+- **CORS** कन्फिगर गर्नुभयो ताकि फ्रन्टएन्ड र ब्याकएन्ड बीच क्रस-ओरिजिन अनुरोधहरू सम्भव होस्
 
 **फ्रन्टएन्ड विकास:**
-- **उत्तरदायी च्याट इन्टरफेस सिर्जना गरियो** सेम्यान्टिक HTML प्रयोग गरेर
-- **आधुनिक JavaScript कार्यान्वयन गरियो** async/await र क्लास-आधारित आर्किटेक्चरको साथ
-- **CSS Grid, Flexbox, र एनिमेसनहरू प्रयोग गरेर आकर्षक प्रयोगकर्ता इन्टरफेस डिजाइन गरियो**
-- **पहुंचयोग्यता सुविधाहरू र उत्तरदायी डिजाइन सिद्धान्तहरू थपियो**
+- **सामान्य HTML** प्रयोग गरेर उत्तरदायी च्याट इन्टरफेस सिर्जना गर्नुभयो
+- **आधुनिक JavaScript** प्रयोग गरेर async/await र क्लास-आधारित आर्किटेक्चर लागू गर्नुभयो
+- **CSS Grid, Flexbox, र एनिमेसनहरू** प्रयोग गरेर आकर्षक प्रयोगकर्ता इन्टरफेस डिजाइन गर्नुभयो
+- **पहुंचयोग्यता सुविधाहरू** र उत्तरदायी डिजाइन सिद्धान्तहरू थप्नुभयो
 
 **फुल-स्ट्याक एकीकरण:**
-- **HTTP API कलहरू मार्फत फ्रन्टएन्ड र ब्याकएन्ड जडान गरियो**
-- **रियल-टाइम प्रयोगकर्ता अन्तरक्रियाहरू र असिंक्रोनस डाटा प्रवाह ह्यान्डल गरियो**
-- **एप्लिकेशनमा त्रुटि ह्यान्डलिङ र प्रयोगकर्ता प्रतिक्रिया कार्यान्वयन गरियो**
-- **प्रयोगकर्ता इनपुटदेखि AI प्रतिक्रियासम्मको पूर्ण एप्लिकेशन कार्यप्रवाह परीक्षण गरियो**
+- **HTTP API कलहरू** मार्फत फ्रन्टएन्ड र ब्याकएन्ड जडान गर्नुभयो
+- **रियल-टाइम प्रयोगकर्ता अन्तरक्रिया** र असिंक्रोनस डाटा प्रवाह व्यवस्थापन गर्नुभयो
+- **त्रुटि व्यवस्थापन** र सम्पूर्ण अनुप्रयोगमा प्रयोगकर्ता प्रतिक्रिया लागू गर्नुभयो
+- **प्रयोगकर्ता इनपुटदेखि एआई प्रतिक्रिया सम्मको सम्पूर्ण अनुप्रयोग वर्कफ्लो परीक्षण गर्नुभयो**
 
-### प्रमुख सिकाइ परिणामहरू
+### प्रमुख शिक्षण परिणामहरू
 
 ```mermaid
 mindmap
@@ -1592,20 +1590,67 @@ mindmap
       Conversation Flow
 ```
 
-यस परियोजनाले तपाईंलाई AI-संचालित एप्लिकेशनहरू निर्माणको आधारभूत कुराहरूमा परिचित गराएको छ, जसले वेब विकासको भविष्यलाई प्रतिनिधित्व गर्दछ। तपाईंले परम्परागत वेब एप्लिकेशनहरूमा AI क्षमताहरू एकीकृत गर्ने तरिका बुझ्नुभएको छ, जसले आकर्षक प्रयोगकर्ता अनुभवहरू सिर्जना गर्दछ जो बौद्धिक र उत्तरदायी महसुस गर्छ।
+यस परियोजनाले तपाईंलाई एआई-संचालित अनुप्रयोगहरू निर्माणको आधारभूत कुराहरूमा परिचय गराएको छ, जसले वेब विकासको भविष्यलाई प्रतिनिधित्व गर्दछ। अब तपाईंले परम्परागत वेब अनुप्रयोगहरूमा एआई क्षमताहरू एकीकृत गर्ने तरिका बुझ्नुभएको छ, जसले बौद्धिक र उत्तरदायी महसुस हुने प्रयोगकर्ता अनुभवहरू सिर्जना गर्दछ।
 
 ### व्यावसायिक अनुप्रयोगहरू
 
-यस पाठमा तपाईंले विकास गरेका सीपहरू आधुनिक सफ्टवेयर विकास कर
-- **पोर्ट फर्वार्डिङ** तपाईंको एप्लिकेसन परीक्षण गर्नका लागि
+यस पाठक्रममा तपाईंले विकास गरेका सीपहरू आधुनिक सफ्टवेयर विकास करियरहरूमा प्रत्यक्ष रूपमा लागू गर्न सकिन्छ:
+
+- **आधुनिक फ्रेमवर्कहरू र APIहरू** प्रयोग गरेर फुल-स्ट्याक वेब विकास
+- **वेब अनुप्रयोगहरू र मोबाइल एप्समा एआई एकीकरण**
+- **माइक्रोसर्भिस आर्किटेक्चरहरूको लागि API डिजाइन र विकास**
+- **पहुंचयोग्यता र उत्तरदायी डिजाइनमा ध्यान केन्द्रित गरेर प्रयोगकर्ता इन्टरफेस विकास**
+- **पर्यावरण कन्फिगरेसन र डिप्लोयमेन्ट सहित DevOps अभ्यासहरू**
+
+### तपाईंको एआई विकास यात्रा जारी राख्दै
+
+**अगाडि सिक्ने कदमहरू:**
+- **उन्नत एआई मोडेलहरू र APIहरू** (GPT-4, Claude, Gemini) अन्वेषण गर्नुहोस्
+- **बेहतर एआई प्रतिक्रियाहरूको लागि प्रम्प्ट इन्जिनियरिङ प्रविधिहरू** सिक्नुहोस्
+- **वार्तालाप डिजाइन र च्याटबोट प्रयोगकर्ता अनुभव सिद्धान्तहरू** अध्ययन गर्नुहोस्
+- **एआई सुरक्षा, नैतिकता, र जिम्मेवार एआई विकास अभ्यासहरू** अनुसन्धान गर्नुहोस्
+- **वार्तालाप मेमोरी र सन्दर्भ सचेतनतासहित थप जटिल अनुप्रयोगहरू निर्माण गर्नुहोस्**
+
+**उन्नत परियोजना विचारहरू:**
+- एआई मध्यस्थता सहित बहु-प्रयोगकर्ता च्याट कोठाहरू
+- एआई-संचालित ग्राहक सेवा च्याटबोटहरू
+- व्यक्तिगत शिक्षणको साथ शैक्षिक ट्युटरिंग सहायकहरू
+- विभिन्न एआई व्यक्तित्वहरूसँग रचनात्मक लेखन सहयोगीहरू
+- विकासकर्ताहरूको लागि प्राविधिक दस्तावेजीकरण सहायकहरू
+
+## GitHub Codespaces सँग सुरु गर्दै
+
+के तपाईं यो परियोजना क्लाउड विकास वातावरणमा प्रयास गर्न चाहनुहुन्छ? GitHub Codespaces ले तपाईंको ब्राउजरमा पूर्ण विकास सेटअप प्रदान गर्दछ, स्थानीय सेटअप आवश्यकताहरू बिना एआई अनुप्रयोगहरूमा प्रयोग गर्नको लागि उत्तम।
+
+### तपाईंको विकास वातावरण सेटअप गर्दै
+
+**चरण १: टेम्प्लेटबाट सिर्जना गर्नुहोस्**
+- **[Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)** मा जानुहोस्
+- **शीर्ष-दायाँ कुनामा "Use this template" क्लिक गर्नुहोस्** (पक्का गर्नुहोस् कि तपाईं GitHub मा लगइन हुनुहुन्छ)
+
+![टेम्प्लेटबाट सिर्जना गर्ने इन्टरफेस जसमा हरियो "Use this template" बटन देखिन्छ](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ne.png)
+
+**चरण २: Codespaces सुरु गर्नुहोस्**
+- **तपाईंको नयाँ सिर्जित रिपोजिटरी खोल्नुहोस्**
+- **हरियो "Code" बटन क्लिक गर्नुहोस् र "Codespaces" चयन गर्नुहोस्**
+- **"Create codespace on main" चयन गर्नुहोस्** ताकि तपाईंको विकास वातावरण सुरु होस्
+
+![Codespace सिर्जना गर्ने इन्टरफेस जसमा क्लाउड विकास वातावरण सुरु गर्ने विकल्पहरू छन्](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ne.png)
+
+**चरण ३: वातावरण कन्फिगरेसन**
+तपाईंको Codespace लोड भएपछि, तपाईंले पहुँच पाउनुहुनेछ:
+- **पहिले नै इन्स्टल गरिएको** Python, Node.js, र सबै आवश्यक विकास उपकरणहरू
+- **VS Code इन्टरफेस** जसमा वेब विकासका लागि एक्सटेन्सनहरू छन्
+- **टर्मिनल पहुँच** ब्याकएन्ड र फ्रन्टएन्ड सर्भरहरू चलाउनको लागि
+- **पोर्ट फर्वार्डिङ** तपाईंको अनुप्रयोगहरू परीक्षण गर्नको लागि
 
-**Codespaces ले के प्रदान गर्छ:**
-- स्थानीय वातावरण सेटअप र कन्फिगरेसन समस्याहरू **समाप्त गर्छ**
-- विभिन्न उपकरणहरूमा समान विकास वातावरण **प्रदान गर्छ**
-- वेब विकासका लागि पूर्व-कन्फिगर गरिएको उपकरणहरू र एक्सटेन्सनहरू **सामेल छन्**
-- संस्करण नियन्त्रण र सहकार्यका लागि GitHub सँग सहज एकीकरण **प्रदान गर्छ**
+**Codespaces के प्रदान गर्दछ:**
+- **स्थानीय वातावरण सेटअप र कन्फिगरेसन समस्याहरू हटाउँछ**
+- **विभिन्न उपकरणहरूमा स्थिर विकास वातावरण प्रदान गर्दछ**
+- **वेब विकासका लागि पूर्व-कन्फिगरेड उपकरणहरू र एक्सटेन्सनहरू समावेश गर्दछ**
+- **GitHub सँग संस्करण नियन्त्रण र सहकार्यको लागि सहज एकीकरण प्रदान गर्दछ**
 
-> 🚀 **प्रो टिप**: Codespaces AI एप्लिकेसन सिक्न र प्रोटोटाइप बनाउनका लागि उपयुक्त छ किनभने यसले सबै जटिल वातावरण सेटअप स्वचालित रूपमा व्यवस्थापन गर्छ, जसले तपाईंलाई कन्फिगरेसन समस्यामा अल्झिनुको सट्टा निर्माण र सिकाइमा ध्यान केन्द्रित गर्न मद्दत गर्छ।
+> 🚀 **प्रो टिप**: Codespaces एआई अनुप्रयोगहरू सिक्न र प्रोटोटाइप गर्नको लागि उत्तम हो किनभने यसले सबै जटिल वातावरण सेटअप स्वचालित रूपमा व्यवस्थापन गर्दछ, जसले तपाईंलाई निर्माण र सिकाइमा ध्यान केन्द्रित गर्न अनुमति दिन्छ।
 
 ---
 
diff --git a/translations/ne/README.md b/translations/ne/README.md
index 31a369d86c..9c38c2b5a1 100644
--- a/translations/ne/README.md
+++ b/translations/ne/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3fd21589b9bb0a90b9c9dd7d587f7e43",
-  "translation_date": "2025-10-20T21:30:40+00:00",
+  "original_hash": "8b9d0562ea649b6012d1a67acc630681",
+  "translation_date": "2025-11-03T15:09:18+00:00",
   "source_file": "README.md",
   "language_code": "ne"
 }
@@ -19,24 +19,26 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
 
-# वेब विकासको लागि शुरुवातकर्ता - एक पाठ्यक्रम
+# वेब विकासको लागि शुरुवातकर्ताहरू - एक पाठ्यक्रम
 
-माइक्रोसफ्ट क्लाउड एड्भोकेट्सद्वारा तयार गरिएको १२ हप्ताको व्यापक पाठ्यक्रमको साथ वेब विकासको आधारभूत कुराहरू सिक्नुहोस्। प्रत्येक २४ पाठले जाभास्क्रिप्ट, CSS, र HTML मा व्यावहारिक परियोजनाहरू जस्तै टेरारियम, ब्राउजर एक्सटेन्सन, र स्पेस गेमहरू मार्फत गहिरो अध्ययन गराउँछ। क्विज, छलफल, र व्यावहारिक असाइनमेन्टहरूमा संलग्न हुनुहोस्। हाम्रो प्रभावकारी परियोजना-आधारित शिक्षण विधिबाट आफ्नो सीप सुधार गर्नुहोस् र ज्ञानको प्रतिधारणलाई अनुकूल बनाउनुहोस्। आजै आफ्नो कोडिङ यात्रा सुरु गर्नुहोस्!
+माइक्रोसफ्ट क्लाउड एड्भोकेट्सद्वारा तयार गरिएको १२ हप्ताको व्यापक पाठ्यक्रम मार्फत वेब विकासको आधारभूत कुराहरू सिक्नुहोस्। प्रत्येक २४ पाठले जाभास्क्रिप्ट, CSS, र HTML मा व्यावहारिक परियोजनाहरू जस्तै टेरारियम, ब्राउजर एक्सटेन्सन, र स्पेस गेमहरू मार्फत गहिरो अध्ययन गराउँछ। क्विज, छलफल, र व्यावहारिक असाइनमेन्टहरूमा संलग्न हुनुहोस्। हाम्रो प्रभावकारी परियोजना-आधारित शिक्षण विधिबाट आफ्नो सीप सुधार गर्नुहोस् र ज्ञानको प्रतिधारणलाई अनुकूल बनाउनुहोस्। आजै आफ्नो कोडिङ यात्रा सुरु गर्नुहोस्!
 
 Azure AI Foundry Discord समुदायमा सामेल हुनुहोस्
 
 [![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
 
-यी स्रोतहरू प्रयोग गर्न सुरु गर्न निम्न चरणहरू अनुसरण गर्नुहोस्:
+यी स्रोतहरू प्रयोग गर्न सुरु गर्नका लागि निम्न चरणहरू अनुसरण गर्नुहोस्:
 1. **रिपोजिटरी फोर्क गर्नुहोस्**: क्लिक गर्नुहोस् [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
 2. **रिपोजिटरी क्लोन गर्नुहोस्**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
-3. [**Azure AI Foundry Discord मा सामेल हुनुहोस् र विशेषज्ञहरू र अन्य विकासकर्ताहरूसँग भेट्नुहोस्**](https://discord.com/invite/ByRwuEEgH4)
+3. [**Azure AI Foundry Discord मा सामेल हुनुहोस् र विशेषज्ञहरू तथा अन्य विकासकर्ताहरूलाई भेट्नुहोस्**](https://discord.com/invite/ByRwuEEgH4)
 
 ### 🌐 बहुभाषी समर्थन
 
 #### GitHub Action मार्फत समर्थित (स्वचालित र सधैं अद्यावधिक)
 
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
 [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](./README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
 
 **यदि तपाईं थप अनुवाद भाषाहरू चाहनुहुन्छ भने यहाँ सूचीबद्ध छन् [यहाँ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
 
@@ -44,11 +46,11 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
 
 #### 🧑‍🎓 _तपाईं विद्यार्थी हुनुहुन्छ?_
 
-[**Student Hub पृष्ठ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) मा जानुहोस् जहाँ तपाईं शुरुवातकर्ताका स्रोतहरू, विद्यार्थी प्याकहरू र नि:शुल्क प्रमाणपत्र भौचर प्राप्त गर्ने तरिकाहरू पाउन सक्नुहुन्छ। यो पृष्ठलाई बुकमार्क गर्नुहोस् र समय-समयमा जाँच गर्नुहोस् किनभने हामी मासिक रूपमा सामग्री परिवर्तन गर्छौं।
+[**Student Hub पृष्ठ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) मा जानुहोस् जहाँ तपाईं शुरुवातकर्ताहरूका लागि स्रोतहरू, विद्यार्थी प्याकहरू र नि:शुल्क प्रमाणपत्र भौचर प्राप्त गर्ने तरिकाहरू पाउन सक्नुहुन्छ। यो पृष्ठलाई बुकमार्क गर्नुहोस् र समय-समयमा जाँच गर्नुहोस् किनभने हामी मासिक रूपमा सामग्री परिवर्तन गर्छौं।
 
 ### 📣 घोषणा - नयाँ GitHub Copilot Agent मोड चुनौतीहरू पूरा गर्न!
 
-नयाँ चुनौती थपिएको छ, अधिकांश अध्यायहरूमा "GitHub Copilot Agent Challenge 🚀" खोज्नुहोस्। यो GitHub Copilot र Agent मोड प्रयोग गरेर पूरा गर्नको लागि नयाँ चुनौती हो। यदि तपाईंले पहिले Agent मोड प्रयोग गर्नुभएको छैन भने, यो केवल टेक्स्ट उत्पन्न गर्न मात्र होइन, फाइलहरू सिर्जना र सम्पादन गर्न, कमाण्डहरू चलाउन र थप गर्न सक्षम छ।
+नयाँ चुनौती थपिएको छ, अधिकांश अध्यायहरूमा "GitHub Copilot Agent Challenge 🚀" खोज्नुहोस्। यो GitHub Copilot र Agent मोड प्रयोग गरेर पूरा गर्नका लागि नयाँ चुनौती हो। यदि तपाईंले पहिले Agent मोड प्रयोग गर्नुभएको छैन भने यो केवल पाठ सिर्जना गर्न मात्र होइन, फाइलहरू सिर्जना र सम्पादन गर्न, आदेशहरू चलाउन र थप गर्न सक्षम छ।
 
 ### 📣 घोषणा - _Generative AI प्रयोग गरेर नयाँ परियोजना निर्माण गर्नुहोस्_
 
@@ -58,39 +60,41 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
 
 हाम्रो नयाँ Generative AI पाठ्यक्रम नछुटाउनुहोस्!
 
-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) मा जानुहोस् र सुरु गर्नुहोस्!
+सुरु गर्नका लागि [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) मा जानुहोस्!
 
 ![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ne.png)
 
-- आधारभूतदेखि RAG सम्मका सबै विषयहरू समेट्ने पाठहरू।
+- आधारभूतदेखि RAG सम्मका पाठहरू।
 - GenAI र हाम्रो साथी एप प्रयोग गरेर ऐतिहासिक पात्रहरूसँग अन्तरक्रिया गर्नुहोस्।
 - रमाइलो र आकर्षक कथा, तपाईं समय यात्रा गर्दै हुनुहुनेछ!
 
 ![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ne.png)
 
-प्रत्येक पाठमा एक असाइनमेन्ट, ज्ञान जाँच र चुनौती समावेश छ जसले तपाईंलाई निम्न विषयहरू सिक्न मार्गदर्शन गर्दछ:
+प्रत्येक पाठमा पूरा गर्नका लागि असाइनमेन्ट, ज्ञान जाँच र चुनौती समावेश छ जसले तपाईंलाई निम्न विषयहरू सिक्न मार्गदर्शन गर्दछ:
 - प्रम्प्टिङ र प्रम्प्ट इन्जिनियरिङ
-- टेक्स्ट र छवि एप निर्माण
-- सर्च एप्स
+- पाठ र छवि एप निर्माण
+- खोज एपहरू
+
+सुरु गर्नका लागि [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) मा जानुहोस्!
+
 
-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) मा जानुहोस् र सुरु गर्नुहोस्!
 
 ## 🌱 सुरु गर्दै
 
-> **शिक्षकहरू**, हामीले [केही सुझावहरू समावेश गरेका छौं](for-teachers.md) यो पाठ्यक्रम कसरी प्रयोग गर्ने। हामी तपाईंको प्रतिक्रिया [हाम्रो छलफल फोरममा](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) चाहन्छौं!
+> **शिक्षकहरू**, हामीले [केही सुझावहरू समावेश गरेका छौं](for-teachers.md) यो पाठ्यक्रम कसरी प्रयोग गर्ने। हाम्रो [चर्चा फोरममा](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) तपाईंको प्रतिक्रिया चाहन्छौं!
 
-**[शिक्षार्थीहरू](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक पाठको लागि, प्रि-लेक्चर क्विजबाट सुरु गर्नुहोस् र लेक्चर सामग्री पढ्दै, विभिन्न गतिविधिहरू पूरा गर्दै र पोस्ट-लेक्चर क्विजको साथ आफ्नो बुझाइ जाँच गर्दै अगाडि बढ्नुहोस्।
+**[शिक्षार्थीहरू](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक पाठको लागि, प्रि-लेक्चर क्विजबाट सुरु गर्नुहोस् र लेक्चर सामग्री पढ्दै, विभिन्न गतिविधिहरू पूरा गर्दै र पोस्ट-लेक्चर क्विजसँग आफ्नो बुझाइ जाँच गर्दै अगाडि बढ्नुहोस्।
 
-तपाईंको सिकाइ अनुभवलाई सुधार गर्न, परियोजनाहरूमा सँगै काम गर्नका लागि आफ्नो सहपाठीहरूसँग जडान गर्नुहोस्! [हाम्रो छलफल फोरममा](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) छलफललाई प्रोत्साहन दिइन्छ जहाँ हाम्रो मोडरेटरहरूको टोली तपाईंको प्रश्नहरूको उत्तर दिन उपलब्ध हुनेछ।
+तपाईंको सिकाइ अनुभवलाई सुधार गर्न, परियोजनाहरूमा सँगै काम गर्नका लागि तपाईंका साथीहरूसँग जडान गर्नुहोस्! हाम्रो [चर्चा फोरममा](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) छलफललाई प्रोत्साहन गरिन्छ जहाँ हाम्रो मोडरेटरहरूको टोली तपाईंका प्रश्नहरूको उत्तर दिन उपलब्ध हुनेछ।
 
-तपाईंको शिक्षा अगाडि बढाउन, हामी [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) मा थप अध्ययन सामग्री अन्वेषण गर्न सिफारिस गर्दछौं।
+तपाईंको शिक्षा अगाडि बढाउन, हामी [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) मा थप अध्ययन सामग्री अन्वेषण गर्न अत्यधिक सिफारिस गर्छौं।
 
-### 📋 आफ्नो वातावरण सेट अप गर्दै
+### 📋 तपाईंको वातावरण सेटअप गर्दै
 
-यो पाठ्यक्रमसँग विकास वातावरण तयार छ! तपाईं सुरु गर्दा, तपाईं [Codespace](https://github.com/features/codespaces/) (_एक ब्राउजर-आधारित, कुनै स्थापना आवश्यक छैन वातावरण_) मा पाठ्यक्रम चलाउन वा आफ्नो कम्प्युटरमा स्थानीय रूपमा [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) जस्ता टेक्स्ट एडिटर प्रयोग गरेर चलाउन छनौट गर्न सक्नुहुन्छ।
+यो पाठ्यक्रमसँग विकास वातावरण तयार छ! सुरु गर्दा तपाईं [Codespace](https://github.com/features/codespaces/) (_ब्राउजर-आधारित, कुनै स्थापना आवश्यक छैन वातावरण_), वा तपाईंको कम्प्युटरमा स्थानीय रूपमा [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) जस्ता टेक्स्ट एडिटर प्रयोग गरेर चलाउन छनोट गर्न सक्नुहुन्छ।
 
-#### आफ्नो रिपोजिटरी सिर्जना गर्नुहोस्
-आफ्नो काम सजिलै बचत गर्नको लागि, तपाईंले यो रिपोजिटरीको आफ्नै प्रतिलिपि सिर्जना गर्नु सिफारिस गरिन्छ। तपाईं पृष्ठको माथि रहेको **Use this template** बटन क्लिक गरेर यो गर्न सक्नुहुन्छ। यसले तपाईंको GitHub खातामा पाठ्यक्रमको प्रतिलिपि सहित नयाँ रिपोजिटरी सिर्जना गर्नेछ।
+#### तपाईंको रिपोजिटरी सिर्जना गर्नुहोस्
+तपाईंको काम सजिलै बचत गर्नका लागि, तपाईंले यो रिपोजिटरीको आफ्नै प्रतिलिपि सिर्जना गर्नु सिफारिस गरिन्छ। तपाईंले पृष्ठको माथि रहेको **Use this template** बटन क्लिक गरेर यो गर्न सक्नुहुन्छ। यसले तपाईंको GitHub खातामा पाठ्यक्रमको प्रतिलिपि भएको नयाँ रिपोजिटरी सिर्जना गर्नेछ।
 
 यी चरणहरू अनुसरण गर्नुहोस्:
 1. **रिपोजिटरी फोर्क गर्नुहोस्**: यस पृष्ठको माथि-दायाँ कुनामा रहेको "Fork" बटनमा क्लिक गर्नुहोस्।
@@ -98,27 +102,27 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
 
 #### Codespace मा पाठ्यक्रम चलाउँदै
 
-तपाईंले सिर्जना गरेको यस रिपोजिटरीको प्रतिलिपिमा, **Code** बटनमा क्लिक गर्नुहोस् र **Open with Codespaces** चयन गर्नुहोस्। यसले तपाईंलाई काम गर्नको लागि नयाँ Codespace सिर्जना गर्नेछ।
+तपाईंले सिर्जना गरेको यस रिपोजिटरीको प्रतिलिपिमा, **Code** बटनमा क्लिक गर्नुहोस् र **Open with Codespaces** चयन गर्नुहोस्। यसले तपाईंलाई काम गर्नका लागि नयाँ Codespace सिर्जना गर्नेछ।
 
 ![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ne.png)
 
-#### आफ्नो कम्प्युटरमा स्थानीय रूपमा पाठ्यक्रम चलाउँदै
+#### तपाईंको कम्प्युटरमा स्थानीय रूपमा पाठ्यक्रम चलाउँदै
 
-यो पाठ्यक्रम आफ्नो कम्प्युटरमा स्थानीय रूपमा चलाउनको लागि, तपाईंलाई एक टेक्स्ट एडिटर, ब्राउजर र कमाण्ड लाइन उपकरण आवश्यक हुनेछ। हाम्रो पहिलो पाठ, [प्रोग्रामिङ भाषाहरू र उपकरणहरूको परिचय](../../1-getting-started-lessons/1-intro-to-programming-languages), तपाईंलाई यी उपकरणहरूको लागि विभिन्न विकल्पहरूमा मार्गदर्शन गर्नेछ ताकि तपाईंलाई सबैभन्दा उपयुक्त विकल्प चयन गर्न सक्नुहोस्।
+तपाईंको कम्प्युटरमा स्थानीय रूपमा यो पाठ्यक्रम चलाउनका लागि, तपाईंलाई टेक्स्ट एडिटर, ब्राउजर र कमाण्ड लाइन उपकरण आवश्यक हुनेछ। हाम्रो पहिलो पाठ, [प्रोग्रामिङ भाषाहरू र उपकरणहरूको परिचय](../../1-getting-started-lessons/1-intro-to-programming-languages), तपाईंलाई यी उपकरणहरूको विभिन्न विकल्पहरूमा मार्गदर्शन गर्नेछ ताकि तपाईंलाई सबैभन्दा उपयुक्त लाग्ने विकल्प चयन गर्न सक्नुहुन्छ।
 
-हाम्रो सिफारिस [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) प्रयोग गर्नु हो, जसमा [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) पनि समावेश छ। तपाईं [यहाँ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) बाट Visual Studio Code डाउनलोड गर्न सक्नुहुन्छ।
+हाम्रो सिफारिस भनेको [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) प्रयोग गर्नु हो, जसमा [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) पनि समावेश छ। तपाईं [यहाँ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) बाट Visual Studio Code डाउनलोड गर्न सक्नुहुन्छ।
 
-1. आफ्नो रिपोजिटरीलाई आफ्नो कम्प्युटरमा क्लोन गर्नुहोस्। तपाईंले यो **Code** बटनमा क्लिक गरेर र URL प्रतिलिपि गरेर गर्न सक्नुहुन्छ:
+1. तपाईंको रिपोजिटरीलाई तपाईंको कम्प्युटरमा क्लोन गर्नुहोस्। तपाईंले **Code** बटनमा क्लिक गरेर र URL प्रतिलिपि गरेर यो गर्न सक्नुहुन्छ:
 
     [CodeSpace](./images/createcodespace.png)
 
-    त्यसपछि, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) भित्र [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोल्नुहोस् र तलको कमाण्ड चलाउनुहोस्, `<your-repository-url>` लाई तपाईंले हालै प्रतिलिपि गरेको URL सँग बदल्नुहोस्:
+    त्यसपछि, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) भित्र [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोल्नुहोस् र निम्न कमाण्ड चलाउनुहोस्, `<your-repository-url>` लाई तपाईंले प्रतिलिपि गरेको URL सँग प्रतिस्थापन गर्दै:
 
     ```bash 
     git clone <your-repository-url>
     ```
 
-2. Visual Studio Code मा फोल्डर खोल्नुहोस्। तपाईंले यो **File** > **Open Folder** मा क्लिक गरेर र तपाईंले हालै क्लोन गरेको फोल्डर चयन गरेर गर्न सक्नुहुन्छ।
+2. Visual Studio Code मा फोल्डर खोल्नुहोस्। तपाईंले **File** > **Open Folder** क्लिक गरेर र तपाईंले क्लोन गरेको फोल्डर चयन गरेर यो गर्न सक्नुहुन्छ।
 
 >  सिफारिस गरिएको Visual Studio Code एक्सटेन्सनहरू:
 >
@@ -138,61 +142,61 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
 - असाइनमेन्ट
 - [पाठ पछि क्विज](https://ff-quizzes.netlify.app/web/)
 
-> **क्विजहरूको बारेमा नोट**: सबै क्विजहरू Quiz-app फोल्डरमा समावेश छन्, प्रत्येकमा तीन प्रश्न सहित कुल 48 क्विजहरू। तिनीहरू [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध छन्। क्विज एपलाई स्थानीय रूपमा चलाउन वा Azure मा तैनात गर्न सकिन्छ; `quiz-app` फोल्डरमा निर्देशनहरू पालना गर्नुहोस्।
+> **क्विजहरूको बारेमा नोट**: सबै क्विजहरू Quiz-app फोल्डरमा समावेश छन्, प्रत्येकमा तीन प्रश्न सहित 48 कुल क्विजहरू। तिनीहरू [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध छन्। क्विज एपलाई स्थानीय रूपमा चलाउन वा Azure मा तैनात गर्न सकिन्छ; `quiz-app` फोल्डरमा निर्देशनहरू पालना गर्नुहोस्।
 
 ## 🗃️ पाठहरू
 
-|     |                       परियोजनाको नाम                       |                            सिकाइने अवधारणाहरू                             | सिकाइको उद्देश्य                                                                                                                 |                                                         लिंक गरिएको पाठ                                                          |         लेखक          |
+|     |                       परियोजनाको नाम                       |                            सिकाइने अवधारणाहरू                             | सिकाइका उद्देश्यहरू                                                                                                                 |                                                         लिंक गरिएको पाठ                                                          |         लेखक          |
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
-| 01  |                     सुरुवात गर्दै                      |           प्रोग्रामिङको परिचय र प्रयोग गरिने उपकरणहरू           | अधिकांश प्रोग्रामिङ भाषाहरूको आधारभूत ज्ञान र पेशेवर विकासकर्ताहरूले प्रयोग गर्ने सफ्टवेयरको बारेमा जान्नुहोस् | [प्रोग्रामिङ भाषाहरू र उपकरणहरूको परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
-| 02  |                     सुरुवात गर्दै                      |             GitHub को आधारभूत कुरा, टोलीसँग काम गर्ने समावेश             | आफ्नो परियोजनामा GitHub कसरी प्रयोग गर्ने, कोड बेसमा अरूसँग कसरी सहकार्य गर्ने                                                    |                            [GitHub को परिचय](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
-| 03  |                     सुरुवात गर्दै                      |                             पहुँचयोग्यता                              | वेब पहुँचयोग्यताको आधारभूत कुरा जान्नुहोस्                                                                                               |                       [पहुँचयोग्यता आधारभूत](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
-| 04  |                        JS आधारभूत                         |                         जाभास्क्रिप्ट डाटा प्रकार                          | जाभास्क्रिप्ट डाटा प्रकारहरूको आधारभूत कुरा                                                                                                 |                                       [डाटा प्रकारहरू](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
-| 05  |                        JS आधारभूत                         |                         कार्यहरू र विधिहरू                          | एप्लिकेसनको तर्क प्रवाह व्यवस्थापन गर्न कार्यहरू र विधिहरूको बारेमा जान्नुहोस्                                                             |                              [कार्यहरू र विधिहरू](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
-| 06  |                        JS आधारभूत                         |                        JS संग निर्णय लिने                        | निर्णय लिने विधिहरू प्रयोग गरेर आफ्नो कोडमा सर्तहरू कसरी सिर्जना गर्ने                                                           |                                 [निर्णय लिने](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
-| 07  |                        JS आधारभूत                         |                            एरेहरू र लूपहरू                            | जाभास्क्रिप्टमा एरेहरू र लूपहरू प्रयोग गरेर डाटासँग काम गर्नुहोस्                                                                                 |                                   [एरेहरू र लूपहरू](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
-| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML अभ्यासमा                            | अनलाइन टेरारियम सिर्जना गर्न HTML निर्माण गर्नुहोस्, लेआउट निर्माणमा ध्यान केन्द्रित गर्दै                                                         |                                 [HTML को परिचय](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
-| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS अभ्यासमा                             | अनलाइन टेरारियमलाई शैली दिन CSS निर्माण गर्नुहोस्, CSS को आधारभूत कुरामा ध्यान केन्द्रित गर्दै पृष्ठलाई उत्तरदायी बनाउने                     |                                  [CSS को परिचय](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
-| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 जाभास्क्रिप्ट क्लोजरहरू, DOM हेरफेर                  | टेरारियमलाई ड्र्याग/ड्रप इन्टरफेसको रूपमा कार्य गर्न जाभास्क्रिप्ट निर्माण गर्नुहोस्, क्लोजरहरू र DOM हेरफेरमा ध्यान केन्द्रित गर्दै             |                  [जाभास्क्रिप्ट क्लोजरहरू, DOM हेरफेर](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
-| 11  |          [टाइपिङ खेल](./4-typing-game/solution/README.md)          |                          टाइपिङ खेल निर्माण                           | आफ्नो जाभास्क्रिप्ट एपको तर्कलाई चलाउन किबोर्ड घटनाहरू कसरी प्रयोग गर्ने                                                          |                                [इभेन्ट-ड्राइभन प्रोग्रामिङ](./4-typing-game/typing-game/README.md)                                |       Christopher       |
-| 12  | [हरियो ब्राउजर एक्सटेन्सन](./5-browser-extension/solution/README.md) |                         ब्राउजरसँग काम गर्ने                          | ब्राउजरहरू कसरी काम गर्छन्, तिनीहरूको इतिहास, र ब्राउजर एक्सटेन्सनको पहिलो तत्वहरू कसरी बनाउने                               |                               [ब्राउजरहरूको बारेमा](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [हरियो ब्राउजर एक्सटेन्सन](./5-browser-extension/solution/README.md) | फारम निर्माण गर्ने, API कल गर्ने र स्थानीय स्टोरेजमा भेरिएबलहरू भण्डारण गर्ने | स्थानीय स्टोरेजमा भण्डारण गरिएका भेरिएबलहरू प्रयोग गरेर API कल गर्न आफ्नो ब्राउजर एक्सटेन्सनको जाभास्क्रिप्ट तत्वहरू निर्माण गर्नुहोस्                      |                [APIहरू, फारमहरू, र स्थानीय स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [हरियो ब्राउजर एक्सटेन्सन](./5-browser-extension/solution/README.md) |          ब्राउजरमा पृष्ठभूमि प्रक्रिया, वेब प्रदर्शन          | एक्सटेन्सनको आइकन व्यवस्थापन गर्न ब्राउजरको पृष्ठभूमि प्रक्रियाहरू प्रयोग गर्नुहोस्; वेब प्रदर्शनको बारेमा जान्नुहोस् र प्रदर्शन सुधार गर्न केही अनुकूलनहरू गर्नुहोस्   |             [पृष्ठभूमि कार्यहरू र प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [स्पेस खेल](./6-space-game/solution/README.md)           |             जाभास्क्रिप्ट संग अधिक उन्नत खेल विकास             | खेल निर्माणको तयारीमा कक्षाहरू र संरचनाको प्रयोग गरेर उत्तराधिकारको बारेमा जान्नुहोस् र Pub/Sub ढाँचाको बारेमा जान्नुहोस्              |                      [उन्नत खेल विकासको परिचय](./6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [स्पेस खेल](./6-space-game/solution/README.md)           |                           क्यानभासमा चित्रण                            | स्क्रिनमा तत्वहरू चित्रण गर्न प्रयोग गरिने क्यानभास API को बारेमा जान्नुहोस्                                                                       |                                [क्यानभासमा चित्रण](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [स्पेस खेल](./6-space-game/solution/README.md)           |                   स्क्रिन वरिपरि तत्वहरू सार्दै                    | तत्वहरूले कार्टेसियन निर्देशांक र क्यानभास API प्रयोग गरेर गति कसरी प्राप्त गर्न सक्छन् भनेर पत्ता लगाउनुहोस्                                            |                           [तत्वहरू स्क्रिनमा सार्दै](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [स्पेस खेल](./6-space-game/solution/README.md)           |                          टक्कर पत्ता लगाउने                           | तत्वहरूलाई एकअर्कासँग टक्कर गर्न र प्रतिक्रिया दिन बनाउनुहोस्, कीप्रेसहरू प्रयोग गरेर र खेलको प्रदर्शन सुनिश्चित गर्न कूलडाउन कार्य प्रदान गर्नुहोस्    |                              [टक्कर पत्ता लगाउने](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [स्पेस खेल](./6-space-game/solution/README.md)           |                             स्कोर राख्ने                              | खेलको स्थिति र प्रदर्शनको आधारमा गणितीय गणना गर्नुहोस्                                                                |                                    [स्कोर राख्ने](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [स्पेस खेल](./6-space-game/solution/README.md)           |                     खेल समाप्त गर्ने र पुनः सुरु गर्ने                     | खेल समाप्त गर्ने र पुनः सुरु गर्ने बारेमा जान्नुहोस्, सम्पत्ति सफा गर्ने र भेरिएबल मानहरू पुनः सेट गर्ने सहित                              |                                [समाप्ति अवस्था](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [बैंकिङ एप](./7-bank-project/solution/README.md)          |                 वेब एपमा HTML टेम्पलेटहरू र रुटहरू                 | रुटिङ र HTML टेम्पलेटहरू प्रयोग गरेर बहुपृष्ठ वेबसाइटको वास्तुकला निर्माण गर्ने तरिका जान्नुहोस्                             |                            [HTML टेम्पलेटहरू र रुटहरू](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [बैंकिङ एप](./7-bank-project/solution/README.md)          |                  लगइन र दर्ता फारम निर्माण गर्नुहोस्                   | फारमहरू निर्माण गर्ने र मान्यता दिनेसम्बन्धी प्रक्रिया व्यवस्थापन गर्ने बारेमा जान्नुहोस्                                                                          |                                           [फारमहरू](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [बैंकिङ एप](./7-bank-project/solution/README.md)          |                   डाटा प्राप्त गर्ने र प्रयोग गर्ने विधिहरू                   | डाटा कसरी तपाईको एपमा आउँछ र बाहिर जान्छ, कसरी प्राप्त गर्ने, भण्डारण गर्ने, र नष्ट गर्ने                                                 |                                            [डाटा](./7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [बैंकिङ एप](./7-bank-project/solution/README.md)          |                      राज्य व्यवस्थापनको अवधारणाहरू                      | तपाईको एपले राज्यलाई कसरी कायम राख्छ र यसलाई प्रोग्रामेटिक रूपमा कसरी व्यवस्थापन गर्ने बारेमा जान्नुहोस्                                                              |                                [राज्य व्यवस्थापन](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
-| 25 | [ब्राउजर/VScode कोड](../../8-code-editor) | VScode संग काम गर्ने | कोड सम्पादक प्रयोग गर्ने तरिका जान्नुहोस्| [VScode कोड सम्पादक प्रयोग गर्नुहोस्](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
-| 26 | [AI सहायकहरू](./9-chat-project/README.md) | AI संग काम गर्ने | आफ्नो AI सहायक निर्माण गर्ने तरिका जान्नुहोस् | [AI सहायक परियोजना](./9-chat-project/README.md) | Chris |
-
-## 🏫 शिक्षण विधि
-
-हाम्रो पाठ्यक्रम दुई प्रमुख शिक्षण विधिहरूलाई ध्यानमा राखेर डिजाइन गरिएको छ:
+| 01  |                     सुरुवात गर्दै                      |           प्रोग्रामिङको परिचय र प्रयोग गरिने उपकरणहरू           | अधिकांश प्रोग्रामिङ भाषाहरूको आधारभूत ज्ञान र व्यावसायिक विकासकर्ताहरूलाई सहयोग गर्ने सफ्टवेयरको बारेमा जान्नुहोस् | [प्रोग्रामिङ भाषाहरू र उपकरणहरूको परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+| 02  |                     सुरुवात गर्दै                      |             GitHub को आधारभूत कुरा, टिमसँग काम गर्ने समावेश             | आफ्नो परियोजनामा GitHub कसरी प्रयोग गर्ने, कोड बेसमा अरूसँग सहयोग गर्ने तरिका                                                    |                            [GitHub को परिचय](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
+| 03  |                     सुरुवात गर्दै                      |                             पहुँचयोग्यता                              | वेब पहुँचयोग्यताको आधारभूत कुरा जान्नुहोस्                                                                                               |                       [पहुंचयोग्यता आधारभूत कुरा](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
+| 04  |                        JS आधारभूत कुरा                         |                         JavaScript डेटा प्रकार                          | JavaScript डेटा प्रकारहरूको आधारभूत कुरा                                                                                                 |                                       [डेटा प्रकारहरू](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+| 05  |                        JS आधारभूत कुरा                         |                         कार्यहरू र विधिहरू                          | अनुप्रयोगको तर्क प्रवाह व्यवस्थापन गर्न कार्यहरू र विधिहरूको बारेमा जान्नुहोस्                                                             |                              [कार्यहरू र विधिहरू](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
+| 06  |                        JS आधारभूत कुरा                         |                        JS प्रयोग गरेर निर्णय लिने                        | निर्णय लिने विधिहरू प्रयोग गरेर आफ्नो कोडमा सर्तहरू सिर्जना गर्ने तरिका जान्नुहोस्                                                           |                                 [निर्णय लिने](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
+| 07  |                        JS आधारभूत कुरा                         |                            Arrays र लूपहरू                            | JavaScript मा डेटा प्रयोग गरेर Arrays र लूपहरूसँग काम गर्नुहोस्                                                                                 |                                   [Arrays र लूपहरू](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML अभ्यासमा                            | अनलाइन Terrarium निर्माण गर्न HTML बनाउनुहोस्, लेआउट निर्माणमा ध्यान केन्द्रित गर्दै                                                         |                                 [HTML को परिचय](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS अभ्यासमा                             | अनलाइन Terrarium लाई शैली दिन CSS बनाउनुहोस्, CSS को आधारभूत कुरा सहित पृष्ठलाई उत्तरदायी बनाउनेमा ध्यान केन्द्रित गर्दै                     |                                  [CSS को परिचय](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript Closures, DOM हेरफेर                  | Terrarium लाई ड्र्याग/ड्रप इन्टरफेसको रूपमा कार्य गर्न JavaScript बनाउनुहोस्, Closures र DOM हेरफेरमा ध्यान केन्द्रित गर्दै             |                  [JavaScript Closures, DOM हेरफेर](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          टाइपिङ खेल निर्माण गर्नुहोस्                           | आफ्नो JavaScript अनुप्रयोगको तर्क चलाउन किबोर्ड घटनाहरू कसरी प्रयोग गर्ने जान्नुहोस्                                                          |                                [घटनामा आधारित प्रोग्रामिङ](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         ब्राउजरसँग काम गर्ने                          | ब्राउजरहरू कसरी काम गर्छन्, तिनीहरूको इतिहास, र ब्राउजर एक्सटेन्सनको पहिलो तत्वहरूको संरचना कसरी बनाउने जान्नुहोस्                               |                               [ब्राउजरहरूको बारेमा](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | फारम निर्माण गर्ने, API कल गर्ने र स्थानीय स्टोरेजमा भेरिएबलहरू भण्डारण गर्ने | आफ्नो ब्राउजर एक्सटेन्सनको JavaScript तत्वहरू निर्माण गर्नुहोस्, स्थानीय स्टोरेजमा भण्डारण गरिएका भेरिएबलहरू प्रयोग गरेर API कल गर्ने                      |                [APIs, फारमहरू, र स्थानीय स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          ब्राउजरको पृष्ठभूमि प्रक्रिया, वेब प्रदर्शन          | एक्सटेन्सनको आइकन व्यवस्थापन गर्न ब्राउजरको पृष्ठभूमि प्रक्रियाहरू प्रयोग गर्नुहोस्; वेब प्रदर्शनको बारेमा जान्नुहोस् र प्रदर्शन सुधार गर्न केही अनुकूलनहरू गर्नुहोस्   |             [पृष्ठभूमि कार्यहरू र प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             JavaScript प्रयोग गरेर थप उन्नत खेल विकास             | खेल निर्माणको तयारीमा कक्षाहरू र संरचना प्रयोग गरेर उत्तराधिकारको बारेमा जान्नुहोस्, साथै Pub/Sub ढाँचाको बारेमा जान्नुहोस्              |                      [उन्नत खेल विकासको परिचय](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           क्यानभासमा चित्र बनाउने                            | स्क्रिनमा तत्वहरू चित्र बनाउन प्रयोग गरिने Canvas API को बारेमा जान्नुहोस्                                                                       |                                [क्यानभासमा चित्र बनाउने](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   स्क्रिनमा तत्वहरू सार्ने                    | तत्वहरूले Cartesian समन्वय र Canvas API प्रयोग गरेर गति कसरी प्राप्त गर्न सक्छन् जान्नुहोस्                                            |                           [तत्वहरू सार्ने](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          टक्कर पत्ता लगाउने                           | तत्वहरूलाई एकअर्कासँग टक्कर गर्न र प्रतिक्रिया दिन बनाउनुहोस्, कीप्रेसहरू प्रयोग गरेर, र खेलको प्रदर्शन सुनिश्चित गर्न कूलडाउन कार्य प्रदान गर्नुहोस्    |                              [टक्कर पत्ता लगाउने](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             स्कोर राख्ने                              | खेलको स्थिति र प्रदर्शनको आधारमा गणितीय गणना गर्नुहोस्                                                                |                                    [स्कोर राख्ने](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     खेल समाप्त गर्ने र पुनः सुरु गर्ने                     | खेल समाप्त गर्ने र पुनः सुरु गर्ने तरिका जान्नुहोस्, सम्पत्ति सफा गर्ने र भेरिएबल मानहरू पुनः सेट गर्ने सहित                              |                                [समाप्ति अवस्था](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 वेब अनुप्रयोगमा HTML टेम्पलेटहरू र रूटहरू                 | रूटिङ र HTML टेम्पलेटहरू प्रयोग गरेर बहुपृष्ठ वेबसाइटको संरचना कसरी बनाउने जान्नुहोस्                             |                            [HTML टेम्पलेटहरू र रूटहरू](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  लगइन र दर्ता फारम निर्माण गर्नुहोस्                   | फारमहरू निर्माण गर्ने र मान्यकरण प्रक्रियाहरू ह्यान्डल गर्ने बारेमा जान्नुहोस्                                                                          |                                           [फारमहरू](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   डेटा प्राप्त गर्ने र प्रयोग गर्ने विधिहरू                   | डेटा कसरी तपाईंको अनुप्रयोगमा प्रवाह हुन्छ, कसरी प्राप्त गर्ने, भण्डारण गर्ने, र नष्ट गर्ने                                                 |                                            [डेटा](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      राज्य व्यवस्थापनको अवधारणाहरू                      | तपाईंको अनुप्रयोगले राज्य कसरी कायम राख्छ र यसलाई प्रोग्रामेटिक रूपमा कसरी व्यवस्थापन गर्ने जान्नुहोस्                                                              |                                [राज्य व्यवस्थापन](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
+| 25 | [Browser/VScode Code](../../8-code-editor) | VScode प्रयोग गर्ने | कोड सम्पादक प्रयोग गर्ने तरिका जान्नुहोस्| [VScode कोड सम्पादक प्रयोग गर्नुहोस्](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
+| 26 | [AI Assistants](./9-chat-project/README.md) | AI सँग काम गर्ने | आफ्नो AI सहायक निर्माण गर्ने तरिका जान्नुहोस् | [AI सहायक परियोजना](./9-chat-project/README.md) | Chris |
+
+## 🏫 शिक्षाशास्त्र
+
+हाम्रो पाठ्यक्रम दुई प्रमुख शिक्षाशास्त्रीय सिद्धान्तहरूमा आधारित छ:
 * परियोजना-आधारित सिकाइ
 * बारम्बार क्विजहरू
 
-यो कार्यक्रमले जाभास्क्रिप्ट, HTML, र CSS को आधारभूत कुरा, साथै आजका वेब विकासकर्ताहरूले प्रयोग गर्ने नवीनतम उपकरणहरू र प्रविधिहरू सिकाउँछ। विद्यार्थीहरूले टाइपिङ खेल, भर्चुअल टेरारियम, वातावरणमैत्री ब्राउजर एक्सटेन्सन, स्पेस-इनभेडर शैलीको खेल, र व्यवसायहरूको लागि बैंकिङ एप निर्माण गरेर व्यावहारिक अनुभव विकास गर्ने अवसर पाउनेछन्। श्रृंखला समाप्त हुँदा, विद्यार्थीहरूले वेब विकासको ठोस समझ प्राप्त गरेका हुनेछन्।
+कार्यक्रमले JavaScript, HTML, र CSS को आधारभूत कुरा, साथै आजका वेब विकासकर्ताहरूले प्रयोग गर्ने नवीनतम उपकरणहरू र प्रविधिहरू सिकाउँछ। विद्यार्थीहरूले टाइपिङ खेल, भर्चुअल Terrarium, वातावरणमैत्री ब्राउजर एक्सटेन्सन, स्पेस-इनभेडर शैलीको खेल, र व्यवसायहरूको लागि बैंकिङ अनुप्रयोग निर्माण गरेर व्यावहारिक अनुभव विकास गर्ने अवसर पाउनेछन्। श्रृंखला समाप्त हुँदा, विद्यार्थीहरूले वेब विकासको ठोस समझ प्राप्त गरेका हुनेछन्।
 
-> 🎓 तपाईले यस पाठ्यक्रमका केही प्रारम्भिक पाठहरू [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) मा Microsoft Learn मा लिन सक्नुहुन्छ!
+> 🎓 तपाईं यस पाठ्यक्रमका केही प्रारम्भिक पाठहरू [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) मा Microsoft Learn मा लिन सक्नुहुन्छ!
 
-सामग्री परियोजनासँग मेल खाने सुनिश्चित गरेर, प्रक्रिया विद्यार्थीहरूको लागि थप आकर्षक बनाइन्छ र अवधारणाहरूको सम्झना बढाइन्छ। हामीले जाभास्क्रिप्ट आधारभूत कुराहरूमा केही प्रारम्भिक पाठहरू लेखेका छौं अवधारणाहरू परिचय गराउन, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" भिडियो ट्यूटोरियलहरूको संग्रहबाट भिडियोको साथमा, जसका केही लेखकहरूले यस पाठ्यक्रममा योगदान दिएका छन्।
+सामग्री परियोजनासँग मेल खाने सुनिश्चित गरेर, प्रक्रिया विद्यार्थीहरूको लागि थप आकर्षक बनाइन्छ र अवधारणाहरूको अवधारणलाई बढावा दिइन्छ। हामीले JavaScript को आधारभूत कुरा सिकाउनका लागि केही प्रारम्भिक पाठहरू पनि लेखेका छौं, जसमा "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" भिडियो ट्यूटोरियलहरूको संग्रहबाट भिडियोहरू समावेश छन्, जसका केही लेखकहरूले यस पाठ्यक्रममा योगदान दिएका छन्।
 
-यसको अतिरिक्त, कक्षाको अगाडि कम-जोखिमको क्विजले विद्यार्थीलाई विषयवस्तु सिक्नको लागि ध्यान केन्द्रित गर्न मद्दत गर्दछ, जबकि कक्षापछि दोस्रो क्विजले थप सम्झना सुनिश्चित गर्दछ। यो पाठ्यक्रम लचिलो र रमाइलो बनाउन डिजाइन गरिएको हो र पूर्ण रूपमा वा आंशिक रूपमा लिन सकिन्छ। परियोजनाहरू साना बाट सुरु हुन्छन् र 12 हप्ताको चक्रको अन्त्यसम्ममा क्रमशः जटिल बन्दै जान्छन्।
+यसका अतिरिक्त, कक्षा अघि कम-जोखिमको क्विजले विद्यार्थीलाई विषय सिक्नको लागि उद्देश्य सेट गर्दछ, जबकि कक्षा पछि दोस्रो क्विजले अवधारणलाई अझ बढी अवधारण सुनिश्चित गर्दछ। यो पाठ्यक्रम लचिलो र रमाइलो बनाउन डिजाइन गरिएको हो र पूर्ण रूपमा वा आंशिक रूपमा लिन सकिन्छ। परियोजनाहरू साना सुरु हुन्छन् र 12-हप्ताको चक्रको अन्त्यसम्ममा क्रमशः जटिल बन्छन्।
 
-हामीले जानाजानी जाभास्क्रिप्ट फ्रेमवर्कहरूलाई परिचय गराउनबाट बच्यौं ताकि फ्रेमवर्क अपनाउनु अघि वेब विकासकर्ताको रूपमा आवश्यक आधारभूत सीपहरूमा ध्यान केन्द्रित गर्न सकियोस्। यो पाठ्यक्रम पूरा गरेपछि अर्को राम्रो कदम भनेको अर्को भिडियो संग्रह मार्फत Node.js को बारेमा सिक्नु हो: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
+हामीले जानाजानी JavaScript फ्रेमवर्कहरू परिचय गराउनबाट बचेका छौं ताकि फ्रेमवर्क अपनाउनु अघि वेब विकासकर्ताको रूपमा आवश्यक आधारभूत सीपहरूमा ध्यान केन्द्रित गर्न सकियोस्। यो पाठ्यक्रम पूरा गरेपछि अर्को राम्रो कदम भनेको Node.js को बारेमा सिक्नु हो, अर्को भिडियो संग्रह मार्फत: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
 
-> हाम्रो [आचार संहिता](CODE_OF_CONDUCT.md) र [योगदान](CONTRIBUTING.md) दिशानिर्देशहरू हेर्नुहोस्। हामी तपाईको रचनात्मक प्रतिक्रिया स्वागत गर्दछौं!
+> हाम्रो [Code of Conduct](CODE_OF_CONDUCT.md) र [Contributing](CONTRIBUTING.md) दिशानिर्देशहरू भ्रमण गर्नुहोस्। हामी तपाईंको रचनात्मक प्रतिक्रिया स्वागत गर्दछौं!
 
 
 ## 🧭 अफलाइन पहुँच
 
-तपाईले [Docsify](https://docsify.js.org/#/) प्रयोग गरेर यो दस्तावेजीकरणलाई अफलाइन चलाउन सक्नुहुन्छ। यो रिपो फोर्क गर्नुहोस्, [Docsify स्थापना गर्नुहोस्](https://docsify.js.org/#/quickstart) आफ्नो स्थानीय मेसिनमा, र त्यसपछि यस रिपोको रुट फोल्डरमा `docsify serve` टाइप गर्नुहोस्। वेबसाइट तपाईको localhost मा पोर्ट 3000 मा सेवा गरिनेछ: `localhost:3000`।
+तपाईं [Docsify](https://docsify.js.org/#/) प्रयोग गरेर यो दस्तावेज अफलाइन चलाउन सक्नुहुन्छ। यो रिपो Fork गर्नुहोस्, आफ्नो स्थानीय मेसिनमा [Docsify स्थापना गर्नुहोस्](https://docsify.js.org/#/quickstart), र त्यसपछि यस रिपोको मूल फोल्डरमा `docsify serve` टाइप गर्नुहोस्। वेबसाइट तपाईंको localhost मा पोर्ट 3000 मा सेवा गरिनेछ: `localhost:3000`।
 
 ## 📘 PDF
 
@@ -201,32 +205,47 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
 
 ## 🎒 अन्य पाठ्यक्रमहरू
 
-हाम्रो टोलीले अन्य पाठ्यक्रमहरू उत्पादन गर्दछ! हेर्नुहोस्:
-
-- [MCP for Beginners](https://aka.ms/mcp-for-beginners)
-- [Edge AI for Beginners](https://aka.ms/edgeai-for-beginners)
-- [AI Agents for Beginners](https://aka.ms/ai-agents-beginners)
-- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
-- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
-- [जेनरेटिभ एआईसँग जाभा](https://github.com/microsoft/Generative-AI-for-beginners-java)
-- [सुरुवातीका लागि एआई](https://aka.ms/ai-beginners)
-- [सुरुवातीका लागि डाटा साइन्स](https://aka.ms/datascience-beginners)
-- [सुरुवातीका लागि एमएल](https://aka.ms/ml-beginners)
-- [सुरुवातीका लागि साइबर सुरक्षा](https://github.com/microsoft/Security-101)
-- [सुरुवातीका लागि वेब विकास](https://aka.ms/webdev-beginners)
-- [सुरुवातीका लागि IoT](https://aka.ms/iot-beginners)
-- [सुरुवातीका लागि XR विकास](https://github.com/microsoft/xr-development-for-beginners)
-- [एजेन्टिक प्रयोगका लागि GitHub Copilot मास्टरिङ](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
-- [C#/.NET विकासकर्ताहरूका लागि GitHub Copilot मास्टरिङ](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
-- [आफ्नै Copilot साहसिक यात्रा छान्नुहोस्](https://github.com/microsoft/CopilotAdventures)
+हाम्रो टिमले अन्य पाठ्यक्रमहरू उत्पादन गर्दछ! हेर्नुहोस्:
+
+### Azure / Edge / MCP / Agents
+[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![एज एआईको लागि शुरुवात](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![एमसीपीको लागि शुरुवात](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![एआई एजेन्टको लागि शुरुवात](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
+
+---
+
+### जेनेरेटिभ एआई शृंखला
+[![जेनेरेटिभ एआईको लागि शुरुवात](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![जेनेरेटिभ एआई (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
+[![जेनेरेटिभ एआई (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
+[![जेनेरेटिभ एआई (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
+
+---
+
+### मुख्य सिकाइ
+[![शुरुवातको लागि एमएल](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
+[![शुरुवातको लागि डेटा विज्ञान](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
+[![शुरुवातको लागि एआई](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
+[![शुरुवातको लागि साइबर सुरक्षा](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
+[![शुरुवातको लागि वेब विकास](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
+[![शुरुवातको लागि IoT](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
+[![शुरुवातको लागि XR विकास](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
+
+---
+
+### कोपाइलट शृंखला
+[![एआई जोडी प्रोग्रामिङको लागि कोपाइलट](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
+[![C#/.NET को लागि कोपाइलट](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
+[![कोपाइलट एडभेन्चर](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
 
 ## सहयोग प्राप्त गर्ने तरिका
 
-यदि तपाईं अड्किनुहुन्छ वा एआई एप्स निर्माणको बारेमा कुनै प्रश्न छ भने, यहाँ सामेल हुनुहोस्:
+यदि तपाईं समस्यामा पर्नुहुन्छ वा एआई एप्स निर्माणको बारेमा कुनै प्रश्न छ भने, यहाँ सामेल हुनुहोस्:
 
 [![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)
 
-यदि तपाईंलाई उत्पादन सम्बन्धी प्रतिक्रिया दिनु छ वा निर्माण गर्दा कुनै त्रुटि देखिन्छ भने यहाँ जानुहोस्:
+यदि तपाईंलाई उत्पादनको प्रतिक्रिया दिनु छ वा निर्माणको क्रममा त्रुटिहरू छन् भने, यहाँ जानुहोस्:
 
 [![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
 
@@ -237,4 +256,4 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
 ---
 
 **अस्वीकरण**:  
-यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
+यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
\ No newline at end of file
diff --git a/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index dce526160f..d1b9daef9b 100644
--- a/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -1,42 +1,58 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3e0da5eb9b275fe3cb431033c1413ec2",
-  "translation_date": "2025-10-22T17:30:57+00:00",
+  "original_hash": "d45ddcc54eb9232a76d08328b09d792e",
+  "translation_date": "2025-11-03T16:13:57+00:00",
   "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
   "language_code": "pa"
 }
 -->
 # ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਆਧੁਨਿਕ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਦਾ ਪਰਿਚਯ
 
-ਹੈਲੋ, ਭਵਿੱਖ ਦੇ ਡਿਵੈਲਪਰ! 👋 ਕੀ ਮੈਂ ਤੁਹਾਨੂੰ ਕੁਝ ਦੱਸ ਸਕਦਾ ਹਾਂ ਜੋ ਅਜੇ ਵੀ ਹਰ ਰੋਜ਼ ਮੈਨੂੰ ਰੋਮਾਂਚਿਤ ਕਰਦਾ ਹੈ? ਤੁਸੀਂ ਜਲਦੀ ਹੀ ਪਤਾ ਲਗਾਉਣ ਵਾਲੇ ਹੋ ਕਿ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਿਰਫ ਕੰਪਿਊਟਰਾਂ ਬਾਰੇ ਨਹੀਂ ਹੈ – ਇਹ ਤੁਹਾਡੇ ਸਭ ਤੋਂ ਜੰਗਲੀ ਵਿਚਾਰਾਂ ਨੂੰ ਹਕੀਕਤ ਵਿੱਚ ਬਦਲਣ ਲਈ ਅਸਲ ਤਾਕਤਾਂ ਬਾਰੇ ਹੈ!
+ਹੈਲੋ, ਭਵਿੱਖ ਦੇ ਡਿਵੈਲਪਰ! 👋 ਕੀ ਮੈਂ ਤੁਹਾਨੂੰ ਕੁਝ ਦੱਸ ਸਕਦਾ ਹਾਂ ਜੋ ਹਰ ਰੋਜ਼ ਮੈਨੂੰ ਰੋਮਾਂਚਿਤ ਕਰਦਾ ਹੈ? ਤੁਸੀਂ ਜਲਦੀ ਹੀ ਪਤਾ ਲਗਾਉਣ ਵਾਲੇ ਹੋ ਕਿ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਿਰਫ ਕੰਪਿਊਟਰਾਂ ਬਾਰੇ ਨਹੀਂ ਹੈ - ਇਹ ਤੁਹਾਡੇ ਸਭ ਤੋਂ ਜੰਗਲੀ ਵਿਚਾਰਾਂ ਨੂੰ ਹਕੀਕਤ ਵਿੱਚ ਬਦਲਣ ਲਈ ਅਸਲ ਤਾਕਤਾਂ ਬਾਰੇ ਹੈ!
 
-ਤੁਹਾਨੂੰ ਉਹ ਪਲ ਯਾਦ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣਾ ਮਨਪਸੰਦ ਐਪ ਵਰਤ ਰਹੇ ਹੋ ਅਤੇ ਸਭ ਕੁਝ ਬਿਲਕੁਲ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ? ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਦਬਾਉਂਦੇ ਹੋ ਅਤੇ ਕੁਝ ਬਿਲਕੁਲ ਜਾਦੂਈ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ "ਵਾਹ, ਇਹ ਕਿਵੇਂ ਕੀਤਾ?" ਕਹਿਣ ਲਈ ਮਜਬੂਰ ਕਰਦਾ ਹੈ। ਖੈਰ, ਕੋਈ ਤੁਹਾਡੇ ਵਰਗਾ – ਸ਼ਾਇਦ ਆਪਣੇ ਮਨਪਸੰਦ ਕਾਫੀ ਸ਼ਾਪ ਵਿੱਚ ਰਾਤ 2 ਵਜੇ ਆਪਣੀ ਤੀਜੀ ਐਸਪ੍ਰੈਸੋ ਨਾਲ ਬੈਠਾ – ਉਸ ਕੋਡ ਨੂੰ ਲਿਖਿਆ ਜਿਸ ਨੇ ਉਹ ਜਾਦੂ ਬਣਾਇਆ। ਅਤੇ ਇਹ ਹੈ ਜੋ ਤੁਹਾਡੇ ਮਨ ਨੂੰ ਹੈਰਾਨ ਕਰ ਦੇਵੇਗਾ: ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਿਰਫ ਇਹ ਸਮਝ ਨਹੀਂ ਪਾਉਂਦੇ ਕਿ ਉਹਨਾਂ ਨੇ ਇਹ ਕਿਵੇਂ ਕੀਤਾ, ਪਰ ਤੁਸੀਂ ਖੁਦ ਇਸਨੂੰ ਅਜ਼ਮਾਉਣ ਲਈ ਬੇਚੈਨ ਹੋਵੋਗੇ!
+ਤੁਹਾਨੂੰ ਉਹ ਪਲ ਯਾਦ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੀ ਮਨਪਸੰਦ ਐਪ ਵਰਤ ਰਹੇ ਹੋ ਅਤੇ ਸਭ ਕੁਝ ਬਿਲਕੁਲ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ? ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਨੂੰ ਦਬਾਉਂਦੇ ਹੋ ਅਤੇ ਕੁਝ ਬਿਲਕੁਲ ਜਾਦੂਈ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ "ਵਾਹ, ਉਹਨਾਂ ਨੇ ਇਹ ਕਿਵੇਂ ਕੀਤਾ?" ਕਹਿਣ ਲਈ ਮਜਬੂਰ ਕਰਦਾ ਹੈ। ਖੈਰ, ਕੋਈ ਤੁਹਾਡੇ ਵਰਗਾ - ਸ਼ਾਇਦ ਰਾਤ ਦੇ 2 ਵਜੇ ਆਪਣੇ ਮਨਪਸੰਦ ਕਾਫੀ ਸ਼ਾਪ ਵਿੱਚ ਬੈਠਾ ਹੋਵੇ - ਉਸ ਜਾਦੂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਕੋਡ ਲਿਖਿਆ। ਅਤੇ ਇਹ ਹੈ ਜੋ ਤੁਹਾਡੇ ਮਨ ਨੂੰ ਉਡਾ ਦੇਵੇਗਾ: ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਿਰਫ ਸਮਝ ਨਹੀਂ ਪਾਵੋਗੇ ਕਿ ਉਹਨਾਂ ਨੇ ਇਹ ਕਿਵੇਂ ਕੀਤਾ, ਪਰ ਤੁਸੀਂ ਖੁਦ ਇਸਨੂੰ ਅਜ਼ਮਾਉਣ ਲਈ ਬੇਚੈਨ ਹੋਵੋਗੇ!
 
-ਵੇਖੋ, ਜੇ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਹੁਣੇ ਤੁਹਾਨੂੰ ਡਰਾਉਣ ਵਾਲੀ ਲੱਗਦੀ ਹੈ ਤਾਂ ਮੈਂ ਇਸਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਝਦਾ ਹਾਂ। ਜਦੋਂ ਮੈਂ ਪਹਿਲਾਂ ਸ਼ੁਰੂ ਕੀਤਾ ਸੀ, ਮੈਂ ਸੱਚਮੁੱਚ ਸੋਚਦਾ ਸੀ ਕਿ ਤੁਹਾਨੂੰ ਕਿਸੇ ਕਿਸਮ ਦੇ ਗਣਿਤ ਦੇ ਜ਼ਹਾਨੀ ਹੋਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਜਾਂ ਪੰਜ ਸਾਲ ਦੀ ਉਮਰ ਤੋਂ ਕੋਡਿੰਗ ਕਰ ਰਹੇ ਹੋਣ ਦੀ। ਪਰ ਇਹ ਹੈ ਜੋ ਮੇਰੇ ਨਜ਼ਰੀਏ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੰਦਾ ਹੈ: ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਬਿਲਕੁਲ ਇੱਕ ਨਵੀਂ ਭਾਸ਼ਾ ਵਿੱਚ ਗੱਲਬਾਤਾਂ ਸਿੱਖਣ ਵਰਗਾ ਹੈ। ਤੁਸੀਂ "ਹੈਲੋ" ਅਤੇ "ਧੰਨਵਾਦ" ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਫਿਰ ਕਾਫੀ ਮੰਗਵਾਉਣ ਤੱਕ ਪਹੁੰਚਦੇ ਹੋ, ਅਤੇ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ, ਤੁਸੀਂ ਡੂੰਘੀਆਂ ਦਾਰਸ਼ਨਿਕ ਚਰਚਾਵਾਂ ਕਰ ਰਹੇ ਹੋ! ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਤੁਸੀਂ ਕੰਪਿਊਟਰਾਂ ਨਾਲ ਗੱਲਬਾਤ ਕਰ ਰਹੇ ਹੋ, ਅਤੇ ਸੱਚਮੁੱਚ? ਉਹ ਸਭ ਤੋਂ ਧੀਰਜਵਾਨ ਗੱਲਬਾਤ ਦੇ ਸਾਥੀ ਹਨ ਜੋ ਤੁਸੀਂ ਕਦੇ ਵੀ ਮਿਲੋਗੇ – ਉਹ ਕਦੇ ਵੀ ਤੁਹਾਡੇ ਗਲਤੀਆਂ ਦਾ ਨਿਰਣੇ ਨਹੀਂ ਕਰਦੇ ਅਤੇ ਉਹ ਹਮੇਸ਼ਾ ਮੁੜ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਲਈ ਉਤਸਾਹਿਤ ਹੁੰਦੇ ਹਨ!
+ਵੇਖੋ, ਜੇ ਤੁਹਾਨੂੰ ਹੁਣ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਡਰਾਉਣ ਵਾਲੀ ਲੱਗਦੀ ਹੈ ਤਾਂ ਮੈਂ ਇਸਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਝਦਾ ਹਾਂ। ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰ ਸ਼ੁਰੂ ਕੀਤਾ ਸੀ, ਮੈਂ ਸੱਚਮੁੱਚ ਸੋਚਿਆ ਕਿ ਤੁਹਾਨੂੰ ਕਿਸੇ ਕਿਸਮ ਦੇ ਗਣਿਤ ਦੇ ਜ਼ਹਾਨੀ ਜਾਂ ਪੰਜ ਸਾਲ ਦੀ ਉਮਰ ਤੋਂ ਕੋਡਿੰਗ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਪਰ ਇਹ ਹੈ ਜੋ ਮੇਰੇ ਨਜ਼ਰੀਏ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੰਦਾ ਹੈ: ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਬਿਲਕੁਲ ਇੱਕ ਨਵੀਂ ਭਾਸ਼ਾ ਵਿੱਚ ਗੱਲਬਾਤ ਕਰਨਾ ਸਿੱਖਣ ਵਰਗਾ ਹੈ। ਤੁਸੀਂ "ਹੈਲੋ" ਅਤੇ "ਧੰਨਵਾਦ" ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਫਿਰ ਕਾਫੀ ਮੰਗਣ ਲਈ ਕੰਮ ਕਰਦੇ ਹੋ, ਅਤੇ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ, ਤੁਸੀਂ ਡੂੰਘੀਆਂ ਦਾਰਸ਼ਨਿਕ ਚਰਚਾਵਾਂ ਕਰ ਰਹੇ ਹੋ! ਇਸ ਦੇ ਬਦਲੇ ਵਿੱਚ, ਤੁਸੀਂ ਕੰਪਿਊਟਰਾਂ ਨਾਲ ਗੱਲਬਾਤ ਕਰ ਰਹੇ ਹੋ, ਅਤੇ ਸੱਚਮੁੱਚ? ਉਹ ਸਭ ਤੋਂ ਧੀਰਜਵਾਨ ਗੱਲਬਾਤ ਸਾਥੀ ਹਨ ਜੋ ਤੁਸੀਂ ਕਦੇ ਵੀ ਮਿਲੇ ਹੋਵੋਗੇ - ਉਹ ਕਦੇ ਵੀ ਤੁਹਾਡੇ ਗਲਤੀਆਂ ਦਾ ਨਿਰਣੇ ਨਹੀਂ ਕਰਦੇ ਅਤੇ ਉਹ ਹਮੇਸ਼ਾ ਮੁੜ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਲਈ ਉਤਸੁਕ ਰਹਿੰਦੇ ਹਨ!
 
-ਅੱਜ, ਅਸੀਂ ਉਹ ਸ਼ਾਨਦਾਰ ਟੂਲਜ਼ ਦੀ ਖੋਜ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਆਧੁਨਿਕ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਨੂੰ ਸਿਰਫ ਸੰਭਵ ਹੀ ਨਹੀਂ ਬਲਕਿ ਗੰਭੀਰ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹਨ। ਮੈਂ ਗੱਲ ਕਰ ਰਿਹਾ ਹਾਂ ਉਹੀ ਐਡੀਟਰ, ਬ੍ਰਾਊਜ਼ਰ, ਅਤੇ ਵਰਕਫਲੋਜ਼ ਦੀ ਜੋ ਡਿਵੈਲਪਰ Netflix, Spotify, ਅਤੇ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਇੰਡੀ ਐਪ ਸਟੂਡੀਓ ਵਿੱਚ ਹਰ ਰੋਜ਼ ਵਰਤਦੇ ਹਨ। ਅਤੇ ਇਹ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਖੁਸ਼ੀ ਨਾਲ ਨੱਚਣ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ: ਇਹਨਾਂ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਪੇਸ਼ੇਵਰ-ਗਰੇਡ, ਉਦਯੋਗ-ਮਿਆਰੀ ਟੂਲਜ਼ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੁਫ਼ਤ ਹਨ!
+ਅੱਜ, ਅਸੀਂ ਉਹ ਸ਼ਾਨਦਾਰ ਟੂਲਜ਼ ਦੀ ਖੋਜ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਆਧੁਨਿਕ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਨੂੰ ਸਿਰਫ ਸੰਭਵ ਹੀ ਨਹੀਂ ਬਲਕਿ ਗੰਭੀਰ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹਨ। ਮੈਂ ਉਹੀ ਸੰਪਾਦਕਾਂ, ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਵਰਕਫਲੋਜ਼ ਬਾਰੇ ਗੱਲ ਕਰ ਰਿਹਾ ਹਾਂ ਜੋ Netflix, Spotify, ਅਤੇ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਇੰਡੀ ਐਪ ਸਟੂਡੀਓ ਦੇ ਡਿਵੈਲਪਰ ਹਰ ਰੋਜ਼ ਵਰਤਦੇ ਹਨ। ਅਤੇ ਇਹ ਹੈ ਉਹ ਹਿੱਸਾ ਜੋ ਤੁਹਾਨੂੰ ਖੁਸ਼ੀ ਨਾਲ ਨੱਚਣ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ: ਇਹਨਾਂ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਪੇਸ਼ੇਵਰ-ਗਰੇਡ, ਉਦਯੋਗ-ਮਿਆਰੀ ਟੂਲਜ਼ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੁਫ਼ਤ ਹਨ!
 
 ![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.pa.png)
 > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਦੁਆਰਾ
 
-## ਆਓ ਵੇਖੀਏ ਤੁਸੀਂ ਪਹਿਲਾਂ ਕੀ ਜਾਣਦੇ ਹੋ!
+```mermaid
+journey
+    title Your Programming Journey Today
+    section Discover
+      What is Programming: 5: You
+      Programming Languages: 4: You
+      Tools Overview: 5: You
+    section Explore
+      Code Editors: 4: You
+      Browsers & DevTools: 5: You
+      Command Line: 3: You
+    section Practice
+      Language Detective: 4: You
+      Tool Exploration: 5: You
+      Community Connection: 5: You
+```
 
-ਮਜ਼ੇਦਾਰ ਚੀਜ਼ਾਂ ਵਿੱਚ ਛਾਲ ਮਾਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਮੈਂ ਜ਼ਿਆਦਾ ਜਾਣਨਾ ਚਾਹੁੰਦਾ ਹਾਂ – ਤੁਸੀਂ ਇਸ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੁਨੀਆ ਬਾਰੇ ਪਹਿਲਾਂ ਹੀ ਕੀ ਜਾਣਦੇ ਹੋ? ਅਤੇ ਸੁਣੋ, ਜੇ ਤੁਸੀਂ ਇਹਨਾਂ ਸਵਾਲਾਂ ਨੂੰ ਦੇਖ ਰਹੇ ਹੋ ਅਤੇ ਸੋਚ ਰਹੇ ਹੋ "ਮੈਨੂੰ ਇਸ ਬਾਰੇ ਬਿਲਕੁਲ ਕੁਝ ਪਤਾ ਨਹੀਂ," ਇਹ ਸਿਰਫ ਠੀਕ ਨਹੀਂ ਹੈ, ਇਹ ਬਿਲਕੁਲ ਸਹੀ ਹੈ! ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਬਿਲਕੁਲ ਸਹੀ ਜਗ੍ਹਾ ਤੇ ਹੋ। ਇਸ ਕਵਿਜ਼ ਨੂੰ ਇੱਕ ਵਰਕਆਉਟ ਤੋਂ ਪਹਿਲਾਂ ਖਿੱਚਣ ਵਰਗਾ ਸੋਚੋ – ਅਸੀਂ ਸਿਰਫ ਉਹਨਾਂ ਦਿਮਾਗੀ ਮਾਸਪੇਸ਼ੀਆਂ ਨੂੰ ਗਰਮ ਕਰ ਰਹੇ ਹਾਂ!
+## ਆਓ ਵੇਖੀਏ ਕਿ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਕੀ ਜਾਣਦੇ ਹੋ!
 
-[ਪ੍ਰੀ-ਪਾਠ ਕਵਿਜ਼ ਲਵੋ](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+ਮਜ਼ੇਦਾਰ ਚੀਜ਼ਾਂ ਵਿੱਚ ਛਾਲ ਮਾਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਮੈਂ ਜਾਨਣਾ ਚਾਹੁੰਦਾ ਹਾਂ - ਕੀ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਇਸ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੁਨੀਆ ਬਾਰੇ ਕੁਝ ਜਾਣਦੇ ਹੋ? ਅਤੇ ਸੁਣੋ, ਜੇ ਤੁਸੀਂ ਇਹ ਸਵਾਲਾਂ ਦੇਖ ਰਹੇ ਹੋ ਅਤੇ ਸੋਚ ਰਹੇ ਹੋ "ਮੈਨੂੰ ਇਸ ਬਾਰੇ ਬਿਲਕੁਲ ਕੁਝ ਪਤਾ ਨਹੀਂ," ਇਹ ਸਿਰਫ ਠੀਕ ਨਹੀਂ ਹੈ, ਇਹ ਬਿਲਕੁਲ ਸਹੀ ਹੈ! ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਬਿਲਕੁਲ ਸਹੀ ਜਗ੍ਹਾ 'ਤੇ ਹੋ। ਇਸ ਕਵਿਜ਼ ਨੂੰ ਇੱਕ ਵਰਕਆਉਟ ਤੋਂ ਪਹਿਲਾਂ ਖਿੱਚਣ ਵਾਂਗ ਸੋਚੋ - ਅਸੀਂ ਸਿਰਫ ਉਹਨਾਂ ਦਿਮਾਗੀ ਮਾਸਪੇਸ਼ੀਆਂ ਨੂੰ ਗਰਮ ਕਰ ਰਹੇ ਹਾਂ!
 
+[ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼ ਲਵੋ](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
 
-## ਸਫਰ ਜੋ ਅਸੀਂ ਇਕੱਠੇ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ
+## ਸਫ਼ਰ ਜੋ ਅਸੀਂ ਇਕੱਠੇ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ
 
-ਠੀਕ ਹੈ, ਮੈਂ ਸੱਚਮੁੱਚ ਉਸ ਬਾਰੇ ਉਤਸਾਹਿਤ ਹਾਂ ਜੋ ਅਸੀਂ ਅੱਜ ਖੋਜਣ ਜਾ ਰਹੇ ਹਾਂ! ਸੱਚਮੁੱਚ, ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਜਦੋਂ ਇਹਨਾਂ ਵਿਚਾਰਾਂ ਨੂੰ ਸਮਝਣਾ ਆਰੰਭ ਹੁੰਦਾ ਹੈ ਤਾਂ ਮੈਂ ਤੁਹਾਡਾ ਚਿਹਰਾ ਦੇਖ ਸਕਾਂ। ਇਹ ਹੈ ਸ਼ਾਨਦਾਰ ਯਾਤਰਾ ਜੋ ਅਸੀਂ ਇਕੱਠੇ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ:
+ਠੀਕ ਹੈ, ਮੈਂ ਸੱਚਮੁੱਚ ਉਸ ਬਾਰੇ ਉਤਸਾਹਿਤ ਹਾਂ ਜੋ ਅਸੀਂ ਅੱਜ ਖੋਜਣ ਜਾ ਰਹੇ ਹਾਂ! ਸੱਚਮੁੱਚ, ਮੈਂ ਕਾਸ਼ ਤੁਹਾਡਾ ਚਿਹਰਾ ਦੇਖ ਸਕਦਾ ਜਦੋਂ ਕੁਝ ਸੰਕਲਪ ਸਪਸ਼ਟ ਹੁੰਦੇ ਹਨ। ਇਹ ਹੈ ਸ਼ਾਨਦਾਰ ਯਾਤਰਾ ਜੋ ਅਸੀਂ ਇਕੱਠੇ ਕਰ ਰਹੇ ਹਾਂ:
 
-- **ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ (ਅਤੇ ਇਹ ਕਿਉਂ ਸਭ ਤੋਂ ਸ਼ਾਨਦਾਰ ਚੀਜ਼ ਹੈ!)** – ਅਸੀਂ ਪਤਾ ਲਗਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਕੋਡ ਅਸਲ ਵਿੱਚ ਅਦ੍ਰਿਸ਼ ਜਾਦੂ ਹੈ ਜੋ ਤੁਹਾਡੇ ਆਲੇ-ਦੁਆਲੇ ਸਭ ਕੁਝ ਚਲਾਉਂਦਾ ਹੈ, ਉਸ ਅਲਾਰਮ ਤੋਂ ਜੋ ਕਿਸੇ ਤਰੀਕੇ ਨਾਲ ਜਾਣਦਾ ਹੈ ਕਿ ਇਹ ਸੋਮਵਾਰ ਸਵੇਰ ਹੈ ਉਸ ਐਲਗੋਰਿਦਮ ਤੱਕ ਜੋ ਤੁਹਾਡੇ Netflix ਦੀਆਂ ਸਿਫਾਰਸ਼ਾਂ ਨੂੰ ਬਿਲਕੁਲ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੁਰੇਟ ਕਰਦਾ ਹੈ
-- **ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਉਹਨਾਂ ਦੇ ਸ਼ਾਨਦਾਰ ਵਿਅਕਤੀਗਤ ਗੁਣ** – ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਪਾਰਟੀ ਵਿੱਚ ਜਾ ਰਹੇ ਹੋ ਜਿੱਥੇ ਹਰ ਵਿਅਕਤੀ ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਵੱਖਰੇ ਤਾਕਤਾਂ ਅਤੇ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਦੇ ਤਰੀਕੇ ਹਨ। ਇਹ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾ ਦੀ ਦੁਨੀਆ ਵਰਗਾ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਮਿਲਣ ਵਿੱਚ ਮਜ਼ਾ ਆਵੇਗਾ!
-- **ਡਿਜੀਟਲ ਜਾਦੂ ਬਣਾਉਣ ਵਾਲੇ ਮੂਲ ਬਿਲਡਿੰਗ ਬਲਾਕ** – ਇਹਨਾਂ ਨੂੰ ਅੰਤਮ ਰਚਨਾਤਮਕ LEGO ਸੈੱਟ ਵਜੋਂ ਸੋਚੋ। ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਲੈਂਦੇ ਹੋ ਕਿ ਇਹ ਟੁਕੜੇ ਕਿਵੇਂ ਇਕੱਠੇ ਹੁੰਦੇ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਸਮਝ ਜਾਓਗੇ ਕਿ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਕੁਝ ਵੀ ਬਣਾਉਣ ਲਈ ਯੋਗ ਹੋ ਜੋ ਤੁਹਾਡੀ ਕਲਪਨਾ ਵਿੱਚ ਹੈ
-- **ਪੇਸ਼ੇਵਰ ਟੂਲਜ਼ ਜੋ ਤੁਹਾਨੂੰ ਮਹਿਸੂਸ ਕਰਵਾਉਣਗੇ ਕਿ ਤੁਹਾਨੂੰ ਸੱਚਮੁੱਚ ਇੱਕ ਜਾਦੂਗਰ ਦੀ ਛੜੀ ਦਿੱਤੀ ਗਈ ਹੈ** – ਮੈਂ ਇੱਥੇ ਨਾਟਕ ਨਹੀਂ ਕਰ ਰਿਹਾ – ਇਹ ਟੂਲਜ਼ ਤੁਹਾਨੂੰ ਸੱਚਮੁੱਚ ਮਹਿਸੂਸ ਕਰਵਾਉਣਗੇ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਤਾਕਤਾਂ ਹਨ, ਅਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਹਿੱਸਾ? ਇਹ ਉਹੀ ਹਨ ਜੋ ਪੇਸ਼ੇਵਰ ਵਰਤਦੇ ਹਨ!
+- **ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ (ਅਤੇ ਇਹ ਕਿਉਂ ਸਭ ਤੋਂ ਵਧੀਆ ਚੀਜ਼ ਹੈ!)** - ਅਸੀਂ ਪਤਾ ਲਗਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਕੋਡ ਬਿਲਕੁਲ ਅਦ੍ਰਿਸ਼ ਜਾਦੂ ਹੈ ਜੋ ਤੁਹਾਡੇ ਆਲੇ ਦੁਆਲੇ ਸਭ ਕੁਝ ਚਲਾਉਂਦਾ ਹੈ, ਉਸ ਅਲਾਰਮ ਤੋਂ ਜੋ ਕਿਸੇ ਤਰੀਕੇ ਨਾਲ ਜਾਣਦਾ ਹੈ ਕਿ ਇਹ ਸੋਮਵਾਰ ਸਵੇਰ ਹੈ, Netflix ਦੀਆਂ ਸਿਫਾਰਸ਼ਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੁਰੇਟ ਕਰਨ ਵਾਲੇ ਐਲਗੋਰਿਦਮ ਤੱਕ
+- **ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਉਹਨਾਂ ਦੇ ਸ਼ਾਨਦਾਰ ਵਿਅਕਤੀਗਤ ਗੁਣ** - ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਪਾਰਟੀ ਵਿੱਚ ਜਾ ਰਹੇ ਹੋ ਜਿੱਥੇ ਹਰ ਵਿਅਕਤੀ ਦੇ ਬਿਲਕੁਲ ਵੱਖਰੇ ਤਾਕਤਾਂ ਅਤੇ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਦੇ ਤਰੀਕੇ ਹਨ। ਇਹ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾ ਦੀ ਦੁਨੀਆ ਵਰਗੀ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਮਿਲਣ ਵਿੱਚ ਮਜ਼ਾ ਆਵੇਗਾ!
+- **ਡਿਜੀਟਲ ਜਾਦੂ ਬਣਾਉਣ ਵਾਲੇ ਮੂਲ ਬਲਾਕ** - ਇਹਨਾਂ ਨੂੰ ਅੰਤਮ ਰਚਨਾਤਮਕ LEGO ਸੈਟ ਵਾਂਗ ਸੋਚੋ। ਜਦੋਂ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ ਇਹ ਟੁਕੜੇ ਕਿਵੇਂ ਇਕੱਠੇ ਹੁੰਦੇ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਅਹਿਸਾਸ ਕਰੋਗੇ ਕਿ ਤੁਸੀਂ ਬਿਲਕੁਲ ਕੁਝ ਵੀ ਬਣਾਉਣ ਲਈ ਯੋਗ ਹੋ ਜੋ ਤੁਹਾਡੀ ਕਲਪਨਾ ਕਰਦੀ ਹੈ
+- **ਪੇਸ਼ੇਵਰ ਟੂਲ ਜੋ ਤੁਹਾਨੂੰ ਮਹਿਸੂ ਕਰਵਾਉਂਦੇ ਹਨ ਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਜਾਦੂਗਰ ਦੀ ਛੜੀ ਦਿੱਤੀ ਗਈ ਹੈ** - ਮੈਂ ਇੱਥੇ ਨਾਟਕ ਨਹੀਂ ਕਰ ਰਿਹਾ - ਇਹ ਟੂਲ ਸੱਚਮੁੱਚ ਤੁਹਾਨੂੰ ਮਹਿਸੂ ਕਰਵਾਉਣਗੇ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਤਾਕਤਾਂ ਹਨ, ਅਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਹਿੱਸਾ? ਇਹ ਉਹੀ ਹਨ ਜੋ ਪੇਸ਼ੇਵਰ ਵਰਤਦੇ ਹਨ!
 
-> 💡 **ਇਹ ਹੈ ਗੱਲ**: ਅੱਜ ਸਭ ਕੁਝ ਯਾਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਬਾਰੇ ਸੋਚੋ ਵੀ ਨਾ! ਇਸ ਸਮੇਂ, ਮੈਂ ਸਿਰਫ ਇਹ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਉਤਸਾਹ ਮਹਿਸੂਸ ਕਰੋ ਕਿ ਕੀ ਸੰਭਵ ਹੈ। ਜਿਵੇਂ ਅਸੀਂ ਇਕੱਠੇ ਅਭਿਆਸ ਕਰਦੇ ਹਾਂ, ਵੇਰਵੇ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਚਿਪਕ ਜਾਣਗੇ – ਅਸਲ ਸਿੱਖਣ ਇਸੇ ਤਰੀਕੇ ਨਾਲ ਹੁੰਦਾ ਹੈ!
+> 💡 **ਇਹ ਗੱਲ ਹੈ**: ਅੱਜ ਸਭ ਕੁਝ ਯਾਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਬਾਰੇ ਸੋਚੋ ਵੀ ਨਾ! ਇਸ ਸਮੇਂ, ਮੈਂ ਸਿਰਫ ਇਹ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਜੋ ਸੰਭਵ ਹੈ ਉਸ ਬਾਰੇ ਉਤਸਾਹ ਮਹਿਸੂ ਕਰੋ। ਜਿਵੇਂ ਅਸੀਂ ਇਕੱਠੇ ਅਭਿਆਸ ਕਰਦੇ ਹਾਂ, ਵੇਰਵੇ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਚਿਪਕ ਜਾਣਗੇ - ਅਸਲ ਸਿੱਖਣ ਇਸ ਤਰੀਕੇ ਨਾਲ ਹੁੰਦਾ ਹੈ!
 
 > ਤੁਸੀਂ ਇਹ ਪਾਠ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
 
@@ -44,45 +60,26 @@ CO_OP_TRANSLATOR_METADATA:
 
 ਚਲੋ, ਮਿਲੀਅਨ-ਡਾਲਰ ਸਵਾਲ ਦਾ ਜਵਾਬ ਦਿੰਦੇ ਹਾਂ: ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ?
 
-ਮੈਂ ਤੁਹਾਨੂੰ ਇੱਕ ਕਹਾਣੀ ਦਿੰਦਾ ਹਾਂ ਜਿਸ ਨੇ ਮੇਰੇ ਸੋਚਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ। ਪਿਛਲੇ ਹਫ਼ਤੇ, ਮੈਂ ਆਪਣੀ ਮਾਂ ਨੂੰ ਸਾਡੇ ਨਵੇਂ ਸਮਾਰਟ ਟੀਵੀ ਰਿਮੋਟ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਮਝਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਿਹਾ ਸੀ। ਮੈਂ ਆਪਣੇ ਆਪ ਨੂੰ ਇਹ ਕਹਿੰਦੇ ਹੋਏ ਪਾਇਆ "ਲਾਲ ਬਟਨ ਦਬਾਓ, ਪਰ ਵੱਡਾ ਲਾਲ ਬਟਨ ਨਹੀਂ, ਛੋਟਾ ਲਾਲ ਬਟਨ ਖੱਬੇ ਪਾਸੇ... ਨਹੀਂ, ਤੁਹਾਡਾ ਦੂਜਾ ਖੱਬਾ... ਠੀਕ ਹੈ, ਹੁਣ ਇਸਨੂੰ ਦੋ ਸਕਿੰਟ ਲਈ ਦਬਾਓ, ਇੱਕ ਨਹੀਂ, ਤਿੰਨ ਨਹੀਂ..." ਜਾਣ-ਪਛਾਣ ਲੱਗਦਾ ਹੈ? 😅
-
-ਇਹ ਹੈ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ! ਇਹ ਬਹੁਤ ਹੀ ਸ਼ਕਤੀਸ਼ਾਲੀ ਚੀਜ਼ ਨੂੰ ਬਹੁਤ ਹੀ ਵਿਸਤ੍ਰਿਤ, ਕਦਮ-ਦਰ-ਕਦਮ ਨਿਰਦੇਸ਼ਾਂ ਦੇਣ ਦੀ ਕਲਾ ਹੈ ਪਰ ਇਸਨੂੰ ਹਰ ਚੀਜ਼ ਨੂੰ ਬਿਲਕੁਲ ਸਪਸ਼ਟ ਤਰੀਕੇ ਨਾਲ ਸਮਝਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ। ਪਰ ਇਸਦੇ ਬਦਲੇ ਤੁਸੀਂ ਆਪਣੀ ਮਾਂ ਨੂੰ ਸਮਝਾਉਣ ਦੇ (ਜੋ ਪੁੱਛ ਸਕਦੀ ਹੈ "ਕਿਹੜਾ ਲਾਲ ਬਟਨ?!"), ਤੁਸੀਂ ਇੱਕ ਕੰਪਿਊਟਰ ਨੂੰ ਸਮਝਾ ਰਹੇ ਹੋ (ਜੋ ਬਿਲਕੁਲ ਉਹੀ ਕਰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਕਹਿੰਦੇ ਹੋ, ਭਾਵੇਂ ਤੁਸੀਂ ਜੋ ਕਿਹਾ ਉਹ ਬਿਲਕੁਲ ਉਹ ਨਹੀਂ ਸੀ ਜੋ ਤੁਸੀਂ ਮਤਲਬ ਰੱਖਦੇ ਹੋ).
-
-ਇਹ ਹੈ ਜੋ ਮੇਰੇ ਮਨ ਨੂੰ ਹੈਰਾਨ ਕਰ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਮੈਂ ਪਹਿਲਾਂ ਇਹ ਸਿੱਖਿਆ: ਕੰਪਿਊਟਰ ਅਸਲ ਵਿੱਚ ਆਪਣੇ ਮੂਲ ਵਿੱਚ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੁੰਦੇ ਹਨ। ਉਹ ਸਿਰਫ ਦੋ ਚੀਜ਼ਾਂ ਨੂੰ ਸਮਝਦੇ ਹਨ – 1 ਅਤੇ 0, ਜੋ ਮੂਲ ਤੌਰ 'ਤੇ ਸਿਰਫ "ਹਾਂ" ਅਤੇ "ਨਹੀਂ" ਜਾਂ "ਚਾਲੂ" ਅਤੇ "ਬੰਦ" ਹੁੰਦਾ ਹੈ। ਇਹੀ ਹੈ! ਪਰ ਇਹ ਹੈ ਜਿੱਥੇ ਇਹ ਜਾਦੂਈ ਬਣ ਜਾਂਦਾ ਹੈ – ਸਾਨੂੰ 1s ਅਤੇ 0s ਵਿੱਚ ਗੱਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ ਜਿਵੇਂ ਕਿ ਅਸੀਂ The Matrix ਵਿੱਚ ਹਾਂ। ਇਹ ਹੈ ਜਿੱਥੇ **ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ** ਬਚਾਅ ਲਈ ਆਉਂਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਦਾ ਕੰਮ ਹੈ ਤੁਹਾਡੇ ਆਮ ਮਨੁੱਖੀ ਵਿਚਾਰਾਂ ਨੂੰ ਕੰਪਿਊਟਰ ਭਾਸ਼ਾ ਵਿੱਚ ਬਦਲਣਾ।
-
-ਅਤੇ ਇਹ ਹੈ ਜੋ ਅਜੇ ਵੀ ਮੈਨੂੰ ਹਰ ਸਵੇਰੇ ਅਸਲ ਰੋਮਾਂਚਿਤ ਕਰਦਾ ਹੈ: ਤੁਹਾਡੇ ਜੀਵਨ ਵਿੱਚ ਸ਼ਾਬਦਿਕ ਤੌਰ 'ਤੇ *ਹਰ ਚੀਜ਼* ਡਿਜੀਟਲ ਕਿਸੇ ਤੁਹਾਡੇ ਵਰਗੇ ਵਿਅਕਤੀ ਨਾਲ ਸ਼ੁਰੂ ਹੋਈ, ਸ਼ਾਇਦ ਆਪਣੇ ਪਜਾਮੇ ਵਿੱਚ ਕਾਫੀ ਦੇ ਕੱਪ ਨਾਲ ਬੈਠਾ, ਆਪਣੇ ਲੈਪਟਾਪ 'ਤੇ ਕੋਡ ਟਾਈਪ ਕਰ ਰਿਹਾ। ਉਹ Instagram ਫਿਲਟਰ ਜੋ ਤੁਹਾਨੂੰ ਬੇਦਾਗ ਦਿਖਾਉਂਦਾ ਹੈ? ਕਿਸੇ ਨੇ ਉਸਨੂੰ ਕੋਡ ਕੀਤਾ। ਉਹ ਸਿਫਾਰਸ਼ ਜੋ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਨਵੇਂ ਮਨਪਸੰਦ ਗੀਤ ਤੱਕ ਲੈ ਗਈ? ਇੱਕ ਡਿਵੈਲਪਰ ਨੇ ਉਹ ਐਲਗੋਰਿਦਮ ਬਣਾਇਆ। ਉਹ ਐਪ ਜੋ ਤੁਹਾਨੂੰ ਦੋਸਤਾਂ ਨਾਲ ਡਿਨਰ ਬਿਲਾਂ ਨੂੰ ਵੰਡਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ? ਹਾਂ, ਕਿਸੇ ਨੇ ਸੋਚਿਆ "ਇਹ ਪਰੇਸ਼ਾਨੀ ਵਾਲਾ ਹੈ, ਮੈਂ ਇਸਨੂੰ ਠੀਕ ਕਰ ਸਕਦਾ ਹਾਂ" ਅਤੇ ਫਿਰ... ਉਹਨਾਂ ਨੇ ਕੀਤਾ!
-
-ਜਦੋਂ ਤੁਸੀਂ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਿੱਖਦੇ ਹੋ, ਤੁਸੀਂ ਸਿਰਫ ਇੱਕ ਨਵੀਂ ਹੁਨਰ ਨਹੀਂ ਸਿੱਖ ਰਹੇ – ਤੁਸੀਂ ਸਮੱਸਿਆ-ਸੁਲਝਾਉਣ ਵਾਲਿਆਂ ਦੇ ਇਸ ਸ਼ਾਨਦਾਰ ਸਮੁਦਾਇ ਦਾ ਹਿੱਸਾ ਬਣ ਰਹੇ ਹੋ ਜੋ ਆਪਣੇ ਦਿਨ ਬਾਰੇ ਸੋਚਦੇ ਹਨ, "ਜੇ ਮੈਂ ਕੁਝ ਬਣਾਉਂਦਾ ਜੋ ਕਿਸੇ ਦੇ ਦਿਨ ਨੂੰ ਸਿਰਫ ਥੋੜ੍ਹਾ ਬਿਹਤਰ ਬਣਾਉਂਦਾ?" ਸੱਚਮੁੱਚ, ਕੀ ਇਸ ਤੋਂ ਵਧੀਆ ਕੁਝ ਹੋ ਸਕਦਾ ਹੈ?
-
-✅ **ਮਜ਼ੇਦਾਰ ਤੱਥ ਦੀ ਖੋਜ**: ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਖਾਲੀ ਸਮਾਂ ਹੋਵੇ ਤਾਂ ਕੁਝ ਬਹੁਤ ਸ਼ਾਨਦਾਰ ਖੋਜਣ ਲਈ – ਤੁਹਾਡੇ ਖਿਆਲ ਵਿੱਚ ਦੁਨੀਆ ਦਾ ਪਹਿਲਾ ਕੰਪਿਊਟਰ ਪ੍ਰੋਗ੍ਰਾਮਰ ਕੌਣ ਸੀ? ਮੈਂ ਤੁਹਾਨੂੰ ਇੱਕ ਸੰਕੇਤ ਦਿੰਦਾ ਹਾਂ: ਇਹ ਉਹ ਨਹੀਂ ਹੋ ਸਕਦਾ ਜੋ ਤੁਸੀਂ ਉਮੀਦ ਕਰਦੇ ਹੋ! ਇਸ ਵਿਅਕਤੀ ਦੇ ਪਿੱਛੇ ਦੀ ਕਹਾਣੀ ਬਿਲਕੁਲ ਦਿਲਚਸਪ ਹੈ ਅਤੇ ਦਿਖਾਉਂਦੀ ਹੈ ਕਿ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਹਮੇਸ਼ਾ ਰਚਨਾਤਮਕ ਸਮੱਸਿਆ-ਸੁਲਝਾਉਣ ਅਤੇ ਬਾਕੀ ਸਭ ਤੋਂ ਵੱਖਰਾ ਸੋਚਣ ਬਾਰੇ ਹੈ।
+ਮੈਂ ਤੁਹਾਨੂੰ ਇੱਕ ਕਹਾਣੀ ਦਿੰਦਾ ਹਾਂ ਜਿਸ ਨੇ ਮੇਰੇ ਸੋਚਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ। ਪਿਛਲੇ ਹਫ਼ਤੇ, ਮੈਂ ਆਪਣੀ ਮਾਂ ਨੂੰ ਸਾਡੇ ਨਵੇਂ ਸਮਾਰਟ ਟੀਵੀ ਰਿਮੋਟ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਮਝਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਿਹਾ ਸੀ। ਮੈਂ ਆਪਣੇ ਆਪ ਨੂੰ ਇਹ ਕਹਿੰਦੇ ਹੋਏ ਪਾਇਆ "ਲਾਲ ਬਟਨ ਦਬਾਓ, ਪਰ ਵੱਡਾ ਲਾਲ ਬਟਨ ਨਹੀਂ, ਛੋਟਾ ਲਾਲ ਬਟਨ ਖੱਬੇ ਪਾਸੇ... ਨਹੀਂ, ਤੁਹਾਡਾ ਦੂਜਾ ਖੱਬਾ... ਠੀਕ ਹੈ, ਹੁਣ ਇਸਨੂੰ ਦੋ ਸਕਿੰਟ ਲਈ ਰੱਖੋ, ਇੱਕ ਨਹੀਂ, ਤਿੰਨ ਨਹੀਂ..." ਜਾਣ ਪਛਾਣ ਲੱਗਦਾ ਹੈ? 😅
 
-## ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਜਾਦੂ ਦੇ ਵੱਖ-ਵੱਖ ਸੁਆਦਾਂ ਵਰਗੀਆਂ ਹਨ
+ਇਹ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਹੈ! ਇਹ ਕੁਝ ਬਹੁਤ ਸ਼ਕਤੀਸ਼ਾਲੀ ਨੂੰ ਬਹੁਤ ਹੀ ਵਿਸਥਾਰਵਾਦੀ, ਕਦਮ-ਦਰ-ਕਦਮ ਹਦਾਇਤਾਂ ਦੇਣ ਦੀ ਕਲਾ ਹੈ ਪਰ ਇਸਨੂੰ ਸਭ ਕੁਝ ਬਿਲਕੁਲ ਸਪਸ਼ਟ ਤਰੀਕੇ ਨਾਲ ਦੱਸਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
+- **ਟਿੱਪਣੀਆਂ**: ਉੱਚ-ਸਤਹ ਦੀਆਂ ਭਾਸ਼ਾਵਾਂ ਵਿਆਖਿਆਤਮਕ ਟਿੱਪਣੀਆਂ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦੀਆਂ ਹਨ ਜੋ ਕੋਡ ਨੂੰ ਆਪ ਹੀ ਦਸਤਾਵੇਜ਼ ਬਣਾਉਣ ਵਾਲਾ ਬਣਾਉਂਦੀਆਂ ਹਨ  
+- **ਸੰਰਚਨਾ**: JavaScript ਦੀ ਤਰਕਸ਼ੀਲ ਲਹਿਰਵਾਹੀ ਉਸ ਤਰੀਕੇ ਨਾਲ ਮਿਲਦੀ ਹੈ ਜਿਵੇਂ ਮਨੁੱਖ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਸੋਚਦੇ ਹਨ  
+- **ਰੱਖ-ਰਖਾਵ**: ਵੱਖ-ਵੱਖ ਜ਼ਰੂਰਤਾਂ ਲਈ JavaScript ਵਰਜਨ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਸਿੱਧਾ ਅਤੇ ਸਪਸ਼ਟ ਹੈ  
 
-ਠੀਕ ਹੈ, ਇਹ ਥੋੜ੍ਹਾ ਅਜੀਬ ਲੱਗੇਗਾ, ਪਰ ਇਸਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਮਝੋ – ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਸੰਗੀਤਾਂ ਵਰਗੀਆਂ ਹਨ। ਇਸ ਬਾਰੇ ਸੋਚੋ: ਤੁਹਾਡੇ ਕੋਲ ਜੈਜ਼ ਹੈ, ਜੋ ਮਿੱਠਾ ਅਤੇ ਸੁੰਦਰ ਹੈ, ਰੌਕ ਜੋ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅਤੇ ਸਿੱਧਾ ਹੈ, ਕਲਾਸਿਕਲ ਜੋ ਸੁੰਦਰ ਅਤੇ ਸੰਗਠਿਤ ਹੈ, ਅਤੇ ਹਿਪ-ਹੌਪ ਜੋ ਰਚਨਾਤਮਕ ਅਤੇ ਪ੍ਰਗਟਕਾਰੀ ਹੈ। ਹਰ ਸ਼ੈਲੀ ਦਾ ਆਪਣਾ ਅੰਦਾਜ਼ ਹੈ, ਆਪਣਾ ਜ਼ਿੰਦਗੀ ਦੇ ਪ੍ਰੇਮੀ ਲੋਕਾਂ ਦਾ ਸਮੁਦਾਇ ਹੈ, ਅਤੇ ਹਰ ਇੱਕ ਵੱਖ-ਵੱਖ ਮਾਹੌਲ ਅਤੇ ਮੌਕਿਆਂ ਲਈ ਬਿਲਕੁਲ ਸਹੀ ਹੈ।
+✅ **ਫਿਬੋਨਾਚੀ ਸੀਰੀਜ਼ ਬਾਰੇ**: ਇਹ ਬੇਹੱਦ ਸੁੰਦਰ ਗਿਣਤੀ ਦਾ ਪੈਟਰਨ (ਜਿੱਥੇ ਹਰ ਗਿਣਤੀ ਪਿਛਲੇ ਦੋ ਗਿਣਤੀਆਂ ਦੇ ਜੋੜ ਦੇ ਬਰਾਬਰ ਹੁੰਦੀ ਹੈ: 0, 1, 1, 2, 3, 5, 8...) ਕੁਦਰਤ ਵਿੱਚ ਹਰ ਜਗ੍ਹਾ ਮਿਲਦਾ ਹੈ! ਤੁਸੀਂ ਇਸਨੂੰ ਸੂਰਜਮੁਖੀ ਦੇ ਘੁੰਮਾਓ, ਪਾਈਨਕੋਨ ਦੇ ਪੈਟਰਨ, ਨੌਟਿਲਸ ਸ਼ੈਲ ਦੇ ਵਕਰ ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਦਰੱਖਤਾਂ ਦੀਆਂ ਟਾਹਣੀਆਂ ਦੇ ਵਧਣ ਦੇ ਤਰੀਕੇ ਵਿੱਚ ਵੀ ਪਾਓਗੇ। ਇਹ ਵਾਕਈ ਹੈਰਾਨੀਜਨਕ ਹੈ ਕਿ ਗਣਿਤ ਅਤੇ ਕੋਡ ਸਾਨੂੰ ਸਮਝਣ ਅਤੇ ਦੁਬਾਰਾ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ ਜੋ ਕੁਦਰਤ ਸੁੰਦਰਤਾ ਬਣਾਉਣ ਲਈ ਵਰਤਦੀ ਹੈ!  
 
-ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਬਿਲਕੁਲ ਇਸੇ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੀਆਂ ਹਨ! ਤੁਸੀਂ ਉਹੀ ਭਾਸ਼ਾ ਵਰਤ ਨਹੀਂ ਕਰਦੇ ਜੋ ਤੁਸੀਂ ਇੱਕ ਮਜ਼ੇਦਾਰ ਮੋਬਾਈਲ ਗੇਮ ਬਣਾਉਣ ਲਈ ਵਰਤਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਵੱਡੇ ਪੱਧਰ ਦੇ ਮੌਸਮ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਵਰਤਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਯੋਗਾ ਕਲਾਸ ਵਿੱਚ ਡੈਥ ਮੈਟਲ ਨਹੀਂ ਖੇਡਦੇ (ਖੈਰ, ਜ਼ਿਆਦਾਤਰ ਯੋਗਾ ਕਲਾਸਾਂ ਵਿੱਚ ਨਹੀਂ! 😄).
+## ਜਾਦੂ ਬਣਾਉਣ ਵਾਲੇ ਬੁਨਿਆਦੀ ਹਿੱਸੇ  
 
-ਪਰ ਇਹ ਹੈ ਜੋ ਹਰ ਵਾਰ ਮੇਰੇ ਮਨ ਨੂੰ ਹੈਰਾਨ ਕਰ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਮੈਂ ਇਸ ਬਾਰੇ ਸੋਚਦਾ ਹਾਂ: ਇਹ ਭਾਸ਼ਾਵਾਂ ਤੁਹਾਡੇ ਨਾਲ ਬੈਠੇ ਸਭ ਤੋਂ ਧੀਰਜਵਾਨ, ਬ੍ਰਿਲੀਅੰਟ ਦੁਭਾਸ਼ੀਏ ਵਰਗੀਆਂ ਹਨ। ਤੁਸੀਂ ਆਪਣੇ ਵਿਚਾਰਾਂ ਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਗਟ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਤੁਹਾਡੇ ਮਨੁੱਖੀ ਦਿਮਾਗ ਲਈ ਕੁਦਰਤੀ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਉਹ ਉਸ ਸਾਰੇ ਬਹੁਤ ਹੀ ਜਟਿਲ ਕੰਮ ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ ਜੋ ਉਸਨੂੰ 1s ਅਤੇ 0s ਵਿੱਚ ਬਦਲਦੇ ਹਨ ਜੋ ਕੰਪਿਊਟਰ ਅਸਲ ਵਿੱਚ ਬੋਲਦੇ ਹਨ। ਇਹ ਇੱਕ ਦੋਸਤ ਵਰਗਾ ਹੈ ਜੋ "ਮਨੁੱਖੀ ਰਚਨਾਤਮਕਤਾ" ਅਤੇ "ਕੰਪਿਊਟਰ ਤਰਕ" ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਿਪੁੰਨ ਹੈ – ਅਤੇ ਉਹ ਕਦੇ ਵੀ ਥੱਕਦੇ ਨਹੀਂ, ਕਦੇ ਵੀ ਕਾਫੀ ਬ੍ਰੇਕ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੁੰਦੀ, ਅਤੇ ਕਦੇ ਵੀ ਤੁਹਾਨੂੰ ਇੱਕੋ ਸਵਾਲ ਦੋ ਵਾਰ ਪੁੱਛਣ ਲਈ ਨਿਰਣੇ ਨਹੀਂ ਕਰਦੇ!
+ਚੰਗਾ, ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਦੇਖ ਲਿਆ ਕਿ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਆਓ ਉਹ ਬੁਨਿਆਦੀ ਹਿੱਸੇ ਤੋੜੀਏ ਜੋ ਲਗਭਗ ਹਰ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਬਣਾਉਂਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਰਸੋਈ ਦੇ ਅਵਸ਼ਕ ਅੰਗਾਂ ਵਾਂਗ ਸੋਚੋ – ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਲੈਂਦੇ ਹੋ ਕਿ ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ, ਤੁਸੀਂ ਲਗਭਗ ਕਿਸੇ ਵੀ ਭਾਸ਼ਾ ਵਿੱਚ ਕੋਡ ਪੜ੍ਹ ਅਤੇ ਲਿਖ ਸਕਦੇ ਹੋ!  
 
-### ਪ੍ਰਸਿੱਧ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਉਹਨਾਂ ਦੇ ਉਪਯੋਗ
+ਇਹ ਕੁਝ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਵਿਆਕਰਨ ਨੂੰ ਸਿੱਖਣ ਵਾਂਗ ਹੈ। ਯਾਦ ਕਰੋ ਸਕੂਲ ਵਿੱਚ ਜਦੋਂ ਤੁਸੀਂ ਨਾਉਨ, ਵਰਬ ਅਤੇ ਵਾਕ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਬਾਰੇ ਸਿੱਖਿਆ ਸੀ? ਪ੍ਰੋਗਰਾਮਿੰਗ ਦਾ ਆਪਣਾ ਵਿਆਕਰਨ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਸੱਚਮੁੱਚ, ਇਹ ਅੰਗਰੇਜ਼ੀ ਵਿਆਕਰਨ ਤੋਂ ਕਾਫੀ ਜ਼ਿਆਦਾ ਤਰਕਸ਼ੀਲ ਅਤੇ ਮਾਫ਼ ਕਰਨ ਵਾਲਾ ਹੁੰਦਾ ਹੈ! 😄  
 
-| ਭਾਸ਼ਾ | ਸਭ ਤੋਂ ਵਧੀਆ ਲਈ | ਇਹ ਕਿਉਂ ਪ੍ਰਸਿੱਧ ਹੈ |
-|----------|----------|------------------|
-| **JavaScript** | ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ, ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ | ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਚਲਦੀ ਹੈ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਸ਼ਕਤੀ ਦਿੰਦੀ ਹੈ |
-| **Python** | ਡਾਟਾ
-✅ **ਫਿਬੋਨਾਚੀ ਸੀਕਵੈਂਸ ਬਾਰੇ**: ਇਹ ਬੇਹਤ ਖੂਬਸੂਰਤ ਨੰਬਰ ਪੈਟਰਨ (ਜਿੱਥੇ ਹਰ ਨੰਬਰ ਪਿਛਲੇ ਦੋ ਨੰਬਰਾਂ ਦੇ ਜੋੜ ਦੇ ਬਰਾਬਰ ਹੁੰਦਾ ਹੈ: 0, 1, 1, 2, 3, 5, 8...) ਕੁਦਰਤ ਵਿੱਚ ਹਰ ਜਗ੍ਹਾ ਮਿਲਦਾ ਹੈ! ਤੁਸੀਂ ਇਸਨੂੰ ਸੂਰਜਮੁਖੀ ਦੇ ਘੁੰਮਾਅ, ਪਾਈਨਕੋਨ ਦੇ ਪੈਟਰਨ, ਨਾਟਿਲਸ ਸ਼ੈਲ ਦੇ ਵਕਰ ਅਤੇ ਦਰੱਖਤਾਂ ਦੀਆਂ ਟਾਹਣੀਆਂ ਦੇ ਵਧਣ ਦੇ ਤਰੀਕੇ ਵਿੱਚ ਪਾਓਗੇ। ਇਹ ਹੈਰਾਨੀਜਨਕ ਹੈ ਕਿ ਗਣਿਤ ਅਤੇ ਕੋਡ ਕਿਵੇਂ ਸਾਨੂੰ ਕੁਦਰਤ ਦੇ ਸੁੰਦਰ ਪੈਟਰਨ ਨੂੰ ਸਮਝਣ ਅਤੇ ਦੁਬਾਰਾ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ!
+### ਸਟੇਟਮੈਂਟ: ਕਦਮ-ਦਰ-ਕਦਮ ਹਦਾਇਤਾਂ  
 
-## ਜਾਦੂ ਬਣਾਉਣ ਵਾਲੇ ਬੁਨਿਆਦੀ ਹਿੱਸੇ
+ਆਓ **ਸਟੇਟਮੈਂਟ** ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ – ਇਹ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨਾਲ ਗੱਲਬਾਤ ਵਿੱਚ ਵਿਅਕਤੀਗਤ ਵਾਕਾਂ ਵਾਂਗ ਹੁੰਦੇ ਹਨ। ਹਰ ਸਟੇਟਮੈਂਟ ਕੰਪਿਊਟਰ ਨੂੰ ਇੱਕ ਖਾਸ ਕੰਮ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਦਿਸ਼ਾਵਾਂ ਦੇਣਾ: "ਇੱਥੇ ਖੱਬੇ ਮੁੜੋ," "ਲਾਲ ਬੱਤੀ 'ਤੇ ਰੁਕੋ," "ਉਸ ਜਗ੍ਹਾ 'ਤੇ ਪਾਰਕ ਕਰੋ।"  
 
-ਚੰਗਾ, ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਦੇਖ ਲਿਆ ਕਿ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਆਓ ਉਹ ਬੁਨਿਆਦੀ ਹਿੱਸੇ ਸਮਝੀਏ ਜੋ ਹਰ ਪ੍ਰੋਗਰਾਮ ਦਾ ਹਿੱਸਾ ਹੁੰਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਰੈਸਿਪੀ ਦੇ ਜ਼ਰੂਰੀ ਸਮੱਗਰੀ ਵਾਂਗ ਸੋਚੋ – ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਲੈਂਦੇ ਹੋ ਕਿ ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਲਗਭਗ ਕਿਸੇ ਵੀ ਭਾਸ਼ਾ ਵਿੱਚ ਕੋਡ ਪੜ੍ਹ ਅਤੇ ਲਿਖ ਸਕਦੇ ਹੋ!
-
-ਇਹ ਕੁਝ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਵਿਆਕਰਨ ਨੂੰ ਸਿੱਖਣ ਵਰਗਾ ਹੈ। ਯਾਦ ਕਰੋ ਜਦੋਂ ਸਕੂਲ ਵਿੱਚ ਤੁਸੀਂ ਨਾਂਵਾਂ, ਕਿਰਿਆਵਾਂ ਅਤੇ ਵਾਕ ਬਣਾਉਣ ਬਾਰੇ ਸਿੱਖਿਆ ਸੀ? ਪ੍ਰੋਗਰਾਮਿੰਗ ਦਾ ਆਪਣਾ ਵਿਆਕਰਨ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਸੱਚਮੁੱਚ, ਇਹ ਅੰਗਰੇਜ਼ੀ ਵਿਆਕਰਨ ਨਾਲੋਂ ਕਾਫ਼ੀ ਜ਼ਿਆਦਾ ਤਰਕਸੰਗਤ ਅਤੇ ਮਾਫ਼ ਕਰਨ ਵਾਲਾ ਹੁੰਦਾ ਹੈ! 😄
-
-### ਸਟੇਟਮੈਂਟਸ: ਕਦਮ-ਦਰ-ਕਦਮ ਹਦਾਇਤਾਂ
-
-ਆਓ **ਸਟੇਟਮੈਂਟਸ** ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ – ਇਹ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨਾਲ ਗੱਲਬਾਤ ਵਿੱਚ ਵਿਅਕਤੀਗਤ ਵਾਕਾਂ ਵਾਂਗ ਹੁੰਦੇ ਹਨ। ਹਰ ਸਟੇਟਮੈਂਟ ਕੰਪਿਊਟਰ ਨੂੰ ਇੱਕ ਖਾਸ ਕੰਮ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਦਿਸ਼ਾ ਦੇਣਾ: "ਇੱਥੇ ਖੱਬੇ ਮੁੜੋ," "ਲਾਲ ਬੱਤੀ 'ਤੇ ਰੁਕੋ," "ਉਸ ਜਗ੍ਹਾ 'ਤੇ ਪਾਰਕ ਕਰੋ।"
-
-ਮੈਨੂੰ ਸਟੇਟਮੈਂਟਸ ਬਾਰੇ ਇਹ ਚੰਗਾ ਲੱਗਦਾ ਹੈ ਕਿ ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਕਾਫ਼ੀ ਪੜ੍ਹਨਯੋਗ ਹੁੰਦੇ ਹਨ। ਇਹ ਦੇਖੋ:
+ਮੈਨੂੰ ਸਟੇਟਮੈਂਟ ਬਾਰੇ ਇਹ ਚੰਗਾ ਲੱਗਦਾ ਹੈ ਕਿ ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਕਿੰਨੇ ਪੜ੍ਹਨ ਯੋਗ ਹੁੰਦੇ ਹਨ। ਇਹ ਦੇਖੋ:  
 
 ```javascript
 // Basic statements that perform single actions
@@ -90,31 +87,31 @@ const userName = "Alex";
 console.log("Hello, world!");              
 const sum = 5 + 3;                         
 ```
-
-**ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਘੋਸ਼ਣਾ** ਕਰੋ ਇੱਕ constant variable ਨੂੰ ਵਰਤੋਂਕਾਰ ਦੇ ਨਾਮ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ
-- **ਦਿਖਾਓ** ਇੱਕ ਸਵਾਗਤ ਸੰਦੇਸ਼ console output 'ਤੇ
-- **ਗਣਨਾ** ਕਰੋ ਅਤੇ ਇੱਕ ਗਣਿਤੀਕ ਕਾਰਵਾਈ ਦਾ ਨਤੀਜਾ ਸਟੋਰ ਕਰੋ
+  
+**ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**  
+- **ਘੋਸ਼ਣਾ** ਕਰੋ ਇੱਕ constant variable ਨੂੰ ਵਰਤੋਂਕਾਰ ਦੇ ਨਾਮ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ  
+- **ਦਿਖਾਓ** ਇੱਕ ਸਵਾਗਤ ਸੰਦੇਸ਼ ਨੂੰ console output 'ਤੇ  
+- **ਗਣਨਾ ਕਰੋ** ਅਤੇ ਇੱਕ ਗਣਿਤੀਕ ਕਾਰਵਾਈ ਦੇ ਨਤੀਜੇ ਨੂੰ ਸਟੋਰ ਕਰੋ  
 
 ```javascript
 // Statements that interact with web pages
 document.title = "My Awesome Website";      
 document.body.style.backgroundColor = "lightblue";
 ```
+  
+**ਕਦਮ-ਦਰ-ਕਦਮ, ਇਹ ਹੈ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**  
+- **ਸੋਧੋ** ਵੈਬਪੇਜ ਦਾ ਸਿਰਲੇਖ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ  
+- **ਬਦਲੋ** ਪੂਰੇ ਪੇਜ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦਾ ਰੰਗ  
 
-**ਕਦਮ-ਦਰ-ਕਦਮ, ਇਹ ਹੈ ਜੋ ਹੋ ਰਿਹਾ ਹੈ:**
-- **ਸੋਧ** ਕਰੋ webpage ਦਾ title ਜੋ browser tab ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
-- **ਬਦਲੋ** ਪੂਰੇ page body ਦਾ background color
-
-### ਵੈਰੀਏਬਲਸ: ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦਾ ਮੈਮੋਰੀ ਸਿਸਟਮ
+### ਵੈਰੀਏਬਲ: ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦਾ ਮੈਮੋਰੀ ਸਿਸਟਮ  
 
-ਚੰਗਾ, **ਵੈਰੀਏਬਲਸ** ਸੱਚਮੁੱਚ ਮੇਰੇ ਮਨਪਸੰਦ concepts ਵਿੱਚੋਂ ਇੱਕ ਹਨ ਸਿੱਖਾਉਣ ਲਈ ਕਿਉਂਕਿ ਇਹ ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਵਾਂਗ ਹਨ ਜੋ ਤੁਸੀਂ ਹਰ ਰੋਜ਼ ਵਰਤਦੇ ਹੋ!
+ਚੰਗਾ, **ਵੈਰੀਏਬਲ** ਸੱਚਮੁੱਚ ਮੇਰੇ ਮਨਪਸੰਦ ਸੰਕਲਪਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹਨ ਸਿੱਖਾਉਣ ਲਈ ਕਿਉਂਕਿ ਇਹ ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਵਾਂਗ ਹਨ ਜੋ ਤੁਸੀਂ ਹਰ ਰੋਜ਼ ਵਰਤਦੇ ਹੋ!  
 
-ਤੁਹਾਡੇ ਫੋਨ ਦੇ contact list ਬਾਰੇ ਸੋਚੋ। ਤੁਸੀਂ ਹਰ ਕਿਸੇ ਦਾ phone number ਯਾਦ ਨਹੀਂ ਕਰਦੇ – ਇਸਦੀ ਬਜਾਏ, ਤੁਸੀਂ "ਮਾਂ," "ਸਰਬੋਤਮ ਦੋਸਤ," ਜਾਂ "ਪਿਜ਼ਾ ਪਲੇਸ ਜੋ 2 AM ਤੱਕ ਡਿਲਿਵਰੀ ਕਰਦਾ ਹੈ" ਸੇਵ ਕਰਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਫੋਨ ਨੂੰ ਅਸਲ ਨੰਬਰ ਯਾਦ ਰੱਖਣ ਦਿੰਦੇ ਹੋ। ਵੈਰੀਏਬਲਸ ਬਿਲਕੁਲ ਇਸੇ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ! ਇਹ ਲੇਬਲ ਵਾਲੇ containers ਵਾਂਗ ਹੁੰਦੇ ਹਨ ਜਿੱਥੇ ਤੁਹਾਡਾ ਪ੍ਰੋਗਰਾਮ ਜਾਣਕਾਰੀ ਸਟੋਰ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇੱਕ ਨਾਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦਾ ਹੈ ਜੋ ਸੱਚਮੁੱਚ ਮਾਨਸਿਕ ਬਣਦਾ ਹੈ।
+ਤੁਹਾਡੇ ਫੋਨ ਦੇ ਸੰਪਰਕ ਸੂਚੀ ਬਾਰੇ ਇੱਕ ਸਕਿੰਟ ਲਈ ਸੋਚੋ। ਤੁਸੀਂ ਹਰ ਕਿਸੇ ਦਾ ਫੋਨ ਨੰਬਰ ਯਾਦ ਨਹੀਂ ਕਰਦੇ – ਇਸਦੀ ਬਜਾਏ, ਤੁਸੀਂ "ਮਾਂ," "ਸਰਬੋਤਮ ਦੋਸਤ," ਜਾਂ "ਪਿਜ਼ਾ ਸਥਾਨ ਜੋ 2 AM ਤੱਕ ਡਿਲਿਵਰੀ ਕਰਦਾ ਹੈ" ਸੇਵ ਕਰਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਫੋਨ ਨੂੰ ਅਸਲ ਨੰਬਰ ਯਾਦ ਕਰਨ ਦਿੰਦੇ ਹੋ। ਵੈਰੀਏਬਲ ਬਿਲਕੁਲ ਇਸੇ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ! ਇਹ ਲੇਬਲ ਵਾਲੇ ਕੰਟੇਨਰਾਂ ਵਾਂਗ ਹੁੰਦੇ ਹਨ ਜਿੱਥੇ ਤੁਹਾਡਾ ਪ੍ਰੋਗਰਾਮ ਜਾਣਕਾਰੀ ਸਟੋਰ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇੱਕ ਨਾਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦਾ ਹੈ ਜੋ ਵਾਸਤਵ ਵਿੱਚ ਮਾਨਸੂਬੀ ਬਣਾਉਂਦਾ ਹੈ।  
 
-ਇਹ ਹੈਰਾਨੀਜਨਕ ਹੈ: ਵੈਰੀਏਬਲਸ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਚੱਲਣ ਦੇ ਨਾਲ ਬਦਲ ਸਕਦੇ ਹਨ (ਇਸ ਲਈ ਨਾਮ "ਵੈਰੀਏਬਲ" – ਦੇਖੋ ਉਹਨਾਂ ਨੇ ਕੀ ਕੀਤਾ?). ਜਿਵੇਂ ਤੁਸੀਂ ਉਸ ਪਿਜ਼ਾ ਪਲੇਸ contact ਨੂੰ update ਕਰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਕੋਈ ਹੋਰ ਵਧੀਆ ਥਾਂ ਲੱਭਦੇ ਹੋ, ਵੈਰੀਏਬਲਸ update ਹੋ ਸਕਦੇ ਹਨ ਜਦੋਂ ਤੁਹਾਡਾ ਪ੍ਰੋਗਰਾਮ ਨਵੀਂ ਜਾਣਕਾਰੀ ਸਿੱਖਦਾ ਹੈ ਜਾਂ ਹਾਲਾਤ ਬਦਲਦੇ ਹਨ!
+ਇਹ ਹੈ ਕਿ ਕੀ ਚੰਗਾ ਹੈ: ਵੈਰੀਏਬਲ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਚਲਣ ਦੇ ਨਾਲ ਬਦਲ ਸਕਦੇ ਹਨ (ਇਸ ਲਈ ਨਾਮ "ਵੈਰੀਏਬਲ" – ਦੇਖੋ ਉਹਨਾਂ ਨੇ ਕੀ ਕੀਤਾ?). ਜਿਵੇਂ ਤੁਸੀਂ ਉਸ ਪਿਜ਼ਾ ਸਥਾਨ ਸੰਪਰਕ ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਕੋਈ ਹੋਰ ਬਿਹਤਰ ਸਥਾਨ ਲੱਭਦੇ ਹੋ, ਵੈਰੀਏਬਲ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਨਵੀਂ ਜਾਣਕਾਰੀ ਸਿੱਖਣ ਜਾਂ ਸਥਿਤੀਆਂ ਦੇ ਬਦਲਣ ਦੇ ਨਾਲ ਅਪਡੇਟ ਹੋ ਸਕਦੇ ਹਨ!  
 
-ਮੈਨੂੰ ਤੁਹਾਨੂੰ ਦਿਖਾਉਣ ਦਿਓ ਕਿ ਇਹ ਕਿੰਨਾ ਸੁੰਦਰ ਅਤੇ ਸਧਾਰਨ ਹੋ ਸਕਦਾ ਹੈ:
+ਮੈਨੂੰ ਤੁਹਾਨੂੰ ਦਿਖਾਉਣ ਦਿਓ ਕਿ ਇਹ ਕਿੰਨਾ ਸੁੰਦਰ ਅਤੇ ਸਧਾਰਨ ਹੋ ਸਕਦਾ ਹੈ:  
 
 ```javascript
 // Step 1: Creating basic variables
@@ -123,12 +120,12 @@ let currentWeather = "sunny";
 let temperature = 75;                       
 let isRaining = false;                      
 ```
-
-**ਇਹ concepts ਨੂੰ ਸਮਝਣਾ:**
-- **ਸਟੋਰ** ਕਰੋ unchanging values ਨੂੰ `const` variables ਵਿੱਚ (ਜਿਵੇਂ site name)
-- **ਵਰਤੋਂ** ਕਰੋ `let` ਉਹ values ਲਈ ਜੋ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਦੌਰਾਨ ਬਦਲ ਸਕਦੇ ਹਨ
-- **ਅਸਾਈਨ** ਕਰੋ ਵੱਖ-ਵੱਖ data types: strings (text), numbers, ਅਤੇ booleans (true/false)
-- **ਚੁਣੋ** ਵਿਆਖਿਆਤਮਕ ਨਾਮ ਜੋ ਹਰ ਵੈਰੀਏਬਲ ਵਿੱਚ ਕੀ ਹੈ ਇਹ ਸਮਝਾਉਂਦੇ ਹਨ
+  
+**ਇਹ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝਣਾ:**  
+- **ਸਟੋਰ** ਅਸਥਿਰ ਮੁੱਲਾਂ ਨੂੰ `const` ਵੈਰੀਏਬਲਾਂ ਵਿੱਚ (ਜਿਵੇਂ ਸਾਈਟ ਦਾ ਨਾਮ)  
+- **ਵਰਤੋਂ** `let` ਉਹ ਮੁੱਲਾਂ ਲਈ ਜੋ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਦੌਰਾਨ ਬਦਲ ਸਕਦੇ ਹਨ  
+- **ਅਸਾਈਨ** ਵੱਖ-ਵੱਖ ਡੇਟਾ ਕਿਸਮਾਂ: strings (ਟੈਕਸਟ), numbers, ਅਤੇ booleans (true/false)  
+- **ਚੁਣੋ** ਵਿਆਖਿਆਤਮਕ ਨਾਮ ਜੋ ਹਰ ਵੈਰੀਏਬਲ ਵਿੱਚ ਕੀ ਹੈ ਇਹ ਸਮਝਾਉਂਦੇ ਹਨ  
 
 ```javascript
 // Step 2: Working with objects to group related data
@@ -138,11 +135,11 @@ const weatherData = {
   windSpeed: 12
 };
 ```
-
-**ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**
-- **ਬਣਾਇਆ** ਇੱਕ object ਜੋ weather information ਨੂੰ ਇਕੱਠਾ ਕਰਦਾ ਹੈ
-- **ਸੰਗਠਿਤ** ਕੀਤਾ ਕਈ data ਨੂੰ ਇੱਕ ਵੈਰੀਏਬਲ ਨਾਮ ਹੇਠ
-- **ਵਰਤੋਂ** ਕੀਤੀ key-value pairs ਹਰ ਜਾਣਕਾਰੀ ਨੂੰ ਸਪਸ਼ਟ ਤਰੀਕੇ ਨਾਲ label ਕਰਨ ਲਈ
+  
+**ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**  
+- **ਬਣਾਇਆ** ਇੱਕ object ਜੋ ਸੰਬੰਧਿਤ ਮੌਸਮ ਜਾਣਕਾਰੀ ਨੂੰ ਇਕੱਠਾ ਕਰਦਾ ਹੈ  
+- **ਸੰਗਠਿਤ** ਕਈ ਡੇਟਾ ਟੁਕੜੇ ਇੱਕ ਵੈਰੀਏਬਲ ਨਾਮ ਦੇ ਹੇਠਾਂ  
+- **ਵਰਤੋਂ** key-value ਜੋੜੇ ਹਰ ਜਾਣਕਾਰੀ ਦੇ ਟੁਕੜੇ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਲੇਬਲ ਕਰਨ ਲਈ  
 
 ```javascript
 // Step 3: Using and updating variables
@@ -153,33 +150,33 @@ console.log(`Wind speed: ${weatherData.windSpeed} mph`);
 currentWeather = "cloudy";                  
 temperature = 68;                          
 ```
-
-**ਆਓ ਹਰ ਹਿੱਸੇ ਨੂੰ ਸਮਝੀਏ:**
-- **ਦਿਖਾਓ** ਜਾਣਕਾਰੀ template literals ਦੀ ਵਰਤੋਂ ਕਰਕੇ `${}` syntax ਨਾਲ
-- **ਪਹੁੰਚੋ** object properties dot notation (`weatherData.windSpeed`) ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਅਪਡੇਟ** ਕਰੋ `let` ਨਾਲ ਘੋਸ਼ਿਤ ਵੈਰੀਏਬਲਸ ਨੂੰ ਬਦਲਦੇ ਹਾਲਾਤ ਦਰਸਾਉਣ ਲਈ
-- **ਜੋੜੋ** ਕਈ ਵੈਰੀਏਬਲਸ meaningful messages ਬਣਾਉਣ ਲਈ
+  
+**ਆਓ ਹਰ ਹਿੱਸੇ ਨੂੰ ਸਮਝੀਏ:**  
+- **ਦਿਖਾਓ** ਜਾਣਕਾਰੀ ਨੂੰ template literals ਦੇ ਨਾਲ `${}` syntax ਵਰਤ ਕੇ  
+- **ਪਹੁੰਚੋ** object properties ਨੂੰ dot notation (`weatherData.windSpeed`) ਨਾਲ  
+- **ਅਪਡੇਟ ਕਰੋ** `let` ਨਾਲ ਘੋਸ਼ਿਤ ਵੈਰੀਏਬਲ ਨੂੰ ਬਦਲ ਰਹੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ  
+- **ਜੋੜੋ** ਕਈ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਅਰਥਪੂਰਨ ਸੰਦੇਸ਼ ਬਣਾਉਣ ਲਈ  
 
 ```javascript
 // Step 4: Modern destructuring for cleaner code
 const { location, humidity } = weatherData; 
 console.log(`${location} humidity: ${humidity}%`);
 ```
+  
+**ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ:**  
+- **ਨਿਕਾਲੋ** ਖਾਸ properties ਨੂੰ objects ਤੋਂ destructuring assignment ਦੀ ਵਰਤੋਂ ਕਰਕੇ  
+- **ਬਣਾਓ** ਨਵੇਂ ਵੈਰੀਏਬਲ ਆਪਣੇ ਆਪ object keys ਦੇ ਨਾਮਾਂ ਦੇ ਨਾਲ  
+- **ਸਰਲ ਕਰੋ** ਕੋਡ ਨੂੰ ਦੁਹਰਾਉਣ ਵਾਲੀ dot notation ਤੋਂ ਬਚ ਕੇ  
 
-**ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ:**
-- **ਨਿਕਾਲੋ** object ਤੋਂ ਖਾਸ properties ਨੂੰ destructuring assignment ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਬਣਾਓ** ਨਵੇਂ ਵੈਰੀਏਬਲਸ ਜੋ object keys ਦੇ ਨਾਮਾਂ ਦੇ ਨਾਲ ਆਪ ਹੀ ਬਣ ਜਾਂਦੇ ਹਨ
-- **ਸਰਲ** ਕਰੋ code ਨੂੰ ਦੁਹਰਾਏ dot notation ਤੋਂ ਬਚ ਕੇ
+### ਕੰਟਰੋਲ ਫਲੋ: ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਸੋਚਣਾ ਸਿਖਾਉਣਾ  
 
-### ਕੰਟਰੋਲ ਫਲੋ: ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਸੋਚਣਾ ਸਿਖਾਉਣਾ
+ਚੰਗਾ, ਇਹ ਜਿੱਥੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਬਿਲਕੁਲ ਹੈਰਾਨੀਜਨਕ ਹੋ ਜਾਂਦੀ ਹੈ! **ਕੰਟਰੋਲ ਫਲੋ** ਮੂਲ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਸਮਾਰਟ ਫੈਸਲੇ ਲੈਣਾ ਸਿਖਾਉਣਾ ਹੈ, ਬਿਲਕੁਲ ਜਿਵੇਂ ਤੁਸੀਂ ਹਰ ਰੋਜ਼ ਬਿਨਾਂ ਸੋਚੇ ਸਮਝਦੇ ਹੋ।  
 
-ਚੰਗਾ, ਇਹ ਜਿੱਥੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਬਿਲਕੁਲ ਹੈਰਾਨੀਜਨਕ ਹੋ ਜਾਂਦੀ ਹੈ! **ਕੰਟਰੋਲ ਫਲੋ** ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਸਮਾਰਟ ਫੈਸਲੇ ਲੈਣਾ ਸਿਖਾਉਣਾ ਹੈ, ਬਿਲਕੁਲ ਜਿਵੇਂ ਤੁਸੀਂ ਹਰ ਰੋਜ਼ ਬਿਨਾਂ ਸੋਚੇ ਸਮਝੇ ਕਰਦੇ ਹੋ।
+ਇਸਨੂੰ ਸੋਚੋ: ਅੱਜ ਸਵੇਰੇ ਤੁਸੀਂ ਸ਼ਾਇਦ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਕੀਤਾ ਹੋਵੇਗਾ "ਜੇ ਬਾਰਿਸ਼ ਹੋ ਰਹੀ ਹੈ, ਤਾਂ ਮੈਂ ਛਤਰੀ ਲਵਾਂਗਾ। ਜੇ ਠੰਢ ਹੈ, ਤਾਂ ਮੈਂ ਜੈਕਟ ਪਹਿਨਾਂਗਾ। ਜੇ ਮੈਂ ਦੇਰ ਕਰ ਰਿਹਾ ਹਾਂ, ਤਾਂ ਮੈਂ ਨਾਸ਼ਤਾ ਛੱਡ ਦਿਆਂਗਾ ਅਤੇ ਰਾਹ ਵਿੱਚ ਕੌਫੀ ਲਵਾਂਗਾ।" ਤੁਹਾਡਾ ਦਿਮਾਗ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਇਸ if-then ਤਰਕ ਨੂੰ ਹਰ ਰੋਜ਼ ਦਜਨਾਂ ਵਾਰ ਫਾਲੋ ਕਰਦਾ ਹੈ!  
 
-ਇਸਨੂੰ ਸੋਚੋ: ਅੱਜ ਸਵੇਰੇ ਤੁਸੀਂ ਸ਼ਾਇਦ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਕੀਤਾ ਹੋਵੇਗਾ "ਜੇ ਬਾਰਿਸ਼ ਹੋ ਰਹੀ ਹੈ, ਤਾਂ ਮੈਂ ਛਤਰੀ ਲਵਾਂਗਾ। ਜੇ ਠੰਢ ਹੈ, ਤਾਂ ਮੈਂ ਜੈਕਟ ਪਹਿਨਾਂਗਾ। ਜੇ ਮੈਂ ਦੇਰ ਕਰ ਰਿਹਾ ਹਾਂ, ਤਾਂ ਮੈਂ ਨਾਸਤਾ ਛੱਡ ਦਿਆਂਗਾ ਅਤੇ ਰਾਹ ਵਿੱਚ ਕੌਫੀ ਲਵਾਂਗਾ।" ਤੁਹਾਡਾ ਦਿਮਾਗ ਇਸ if-then logic ਨੂੰ ਹਰ ਰੋਜ਼ ਦਜਨਾਂ ਵਾਰ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਫਾਲੋ ਕਰਦਾ ਹੈ!
+ਇਹ ਉਹ ਹੈ ਜੋ ਪ੍ਰੋਗਰਾਮਾਂ ਨੂੰ ਬੇਵਕੂਫ਼, ਪੇਸ਼ਕਸ਼ੀਲ ਸਕ੍ਰਿਪਟ ਦੀ ਪਾਲਣਾ ਕਰਨ ਦੀ ਬਜਾਏ ਸਮਾਰਟ ਅਤੇ ਜ਼ਿੰਦਾ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ। ਉਹ ਵਾਸਤਵ ਵਿੱਚ ਇੱਕ ਸਥਿਤੀ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹਨ, ਜੋ ਹੋ ਰਿਹਾ ਹੈ ਉਸਦਾ ਅਨੁਮਾਨ ਲਗਾ ਸਕਦੇ ਹਨ, ਅਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰ ਸਕਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਇੱਕ ਦਿਮਾਗ ਦੇਣ ਵਾਂਗ ਹੈ ਜੋ ਅਨੁਕੂਲ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਚੋਣਾਂ ਕਰ ਸਕਦਾ ਹੈ!  
 
-ਇਹ ਉਹ ਹੈ ਜੋ ਪ੍ਰੋਗਰਾਮਾਂ ਨੂੰ ਸਮਾਰਟ ਅਤੇ ਜ਼ਿੰਦਾ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ ਬਜਾਏ ਕਿ ਸਿਰਫ਼ ਕੁਝ ਬੋਰਿੰਗ, ਪੇਸ਼ਗੀ ਸਕ੍ਰਿਪਟ ਦੀ ਪਾਲਣਾ ਕਰਨ। ਇਹ ਸੱਚਮੁੱਚ ਸਥਿਤੀ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹਨ, ਜੋ ਹੋ ਰਿਹਾ ਹੈ ਉਸ ਦਾ ਮੁਲਾਂਕਣ ਕਰ ਸਕਦੇ ਹਨ, ਅਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਜਵਾਬ ਦੇ ਸਕਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਇੱਕ ਦਿਮਾਗ ਦੇਣ ਵਰਗਾ ਹੈ ਜੋ ਅਨੁਕੂਲ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਚੋਣਾਂ ਕਰ ਸਕਦਾ ਹੈ!
-
-ਇਹ ਕਿਵੇਂ ਸੁੰਦਰ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ ਇਹ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਮੈਨੂੰ ਤੁਹਾਨੂੰ ਦਿਖਾਉਣ ਦਿਓ:
+ਤੁਹਾਨੂੰ ਦਿਖਾਉਣ ਦਿਓ ਕਿ ਇਹ ਕਿੰਨਾ ਸੁੰਦਰ ਕੰਮ ਕਰਦਾ ਹੈ:  
 
 ```javascript
 // Step 1: Basic conditional logic
@@ -192,12 +189,12 @@ if (userAge >= 18) {
   console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
 }
 ```
-
-**ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਚੈੱਕ** ਕਰੋ ਕਿ ਵਰਤੋਂਕਾਰ ਦੀ ਉਮਰ ਵੋਟਿੰਗ ਦੀ ਲੋੜ ਨੂੰ ਪੂਰਾ ਕਰਦੀ ਹੈ
-- **ਐਗਜ਼ਿਕਿਊਟ** ਕਰੋ ਵੱਖ-ਵੱਖ ਕੋਡ ਬਲਾਕਸ based on condition result
-- **ਗਣਨਾ** ਕਰੋ ਅਤੇ ਦਿਖਾਓ ਕਿ ਵੋਟਿੰਗ ਯੋਗਤਾ ਤੱਕ ਕਿੰਨਾ ਸਮਾਂ ਬਾਕੀ ਹੈ ਜੇ 18 ਤੋਂ ਘੱਟ
-- **ਪ੍ਰਦਾਨ** ਕਰੋ ਹਰ ਸਥਿਤੀ ਲਈ ਖਾਸ, ਮਦਦਗਾਰ ਫੀਡਬੈਕ
+  
+**ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**  
+- **ਜਾਂਚੋ** ਕਿ ਵਰਤੋਂਕਾਰ ਦੀ ਉਮਰ ਵੋਟਿੰਗ ਦੀ ਲੋੜ ਨੂੰ ਪੂਰਾ ਕਰਦੀ ਹੈ ਜਾਂ ਨਹੀਂ  
+- **ਅਮਲ ਕਰੋ** ਵੱਖ-ਵੱਖ ਕੋਡ ਬਲਾਕ ਸਥਿਤੀ ਦੇ ਨਤੀਜੇ ਦੇ ਆਧਾਰ 'ਤੇ  
+- **ਗਣਨਾ ਕਰੋ** ਅਤੇ ਦਿਖਾਓ ਕਿ ਵੋਟਿੰਗ ਯੋਗਤਾ ਤੱਕ ਕਿੰਨਾ ਸਮਾਂ ਬਾਕੀ ਹੈ ਜੇ 18 ਤੋਂ ਘੱਟ ਹੈ  
+- **ਪ੍ਰਦਾਨ ਕਰੋ** ਹਰ ਸਥਿਤੀ ਲਈ ਖਾਸ, ਮਦਦਗਾਰ ਫੀਡਬੈਕ  
 
 ```javascript
 // Step 2: Multiple conditions with logical operators
@@ -212,23 +209,23 @@ if (userAge >= 18 && hasPermission) {
   console.log("Sorry, you must be at least 16 years old.");
 }
 ```
-
-**ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ ਇਸਨੂੰ ਤੋੜ ਕੇ ਸਮਝਣਾ:**
-- **ਕੰਬਾਈਨ** ਕਰੋ ਕਈ conditions ਨੂੰ `&&` (and) operator ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਬਣਾਓ** conditions ਦੀ hierarchy `else if` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ ਸਥਿਤੀਆਂ ਲਈ
-- **ਹੈਂਡਲ** ਕਰੋ ਸਾਰੀਆਂ ਸੰਭਾਵਿਤ ਸਥਿਤੀਆਂ final `else` statement ਨਾਲ
-- **ਪ੍ਰਦਾਨ** ਕਰੋ ਸਪਸ਼ਟ, ਕਾਰਗਰ ਫੀਡਬੈਕ ਹਰ ਵੱਖਰੀ ਸਥਿਤੀ ਲਈ
+  
+**ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ ਇਸਨੂੰ ਤੋੜ ਕੇ ਸਮਝੋ:**  
+- **ਜੋੜੋ** ਕਈ ਸਥਿਤੀਆਂ ਨੂੰ `&&` (and) operator ਦੀ ਵਰਤੋਂ ਕਰਕੇ  
+- **ਬਣਾਓ** ਸਥਿਤੀਆਂ ਦੀ ਇੱਕ hierarchy `else if` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ ਸਥਿਤੀਆਂ ਲਈ  
+- **ਸੰਭਾਲੋ** ਸਾਰੀਆਂ ਸੰਭਾਵਿਤ ਸਥਿਤੀਆਂ ਨੂੰ ਇੱਕ ਅੰਤਮ `else` ਸਟੇਟਮ ਨਾਲ  
+- **ਪ੍ਰਦਾਨ ਕਰੋ** ਸਪਸ਼ਟ, ਕਾਰਵਾਈਯੋਗ ਫੀਡਬੈਕ ਹਰ ਵੱਖ-ਵੱਖ ਸਥਿਤੀ ਲਈ  
 
 ```javascript
 // Step 3: Concise conditional with ternary operator
 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
 console.log(`Status: ${votingStatus}`);
 ```
-
-**ਤੁਹਾਨੂੰ ਕੀ ਯਾਦ ਰੱਖਣ ਦੀ ਲੋੜ ਹੈ:**
-- **ਵਰਤੋਂ** ਕਰੋ ternary operator (`? :`) ਸਧਾਰਨ ਦੋ-ਵਿਕਲਪ conditions ਲਈ
-- **ਲਿਖੋ** condition ਪਹਿਲਾਂ, ਫਿਰ `?`, ਫਿਰ true result, ਫਿਰ `:`, ਫਿਰ false result
-- **ਲਾਗੂ** ਕਰੋ ਇਹ pattern ਜਦੋਂ ਤੁਹਾਨੂੰ conditions ਦੇ ਆਧਾਰ 'ਤੇ values assign ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇ
+  
+**ਤੁਹਾਨੂੰ ਕੀ ਯਾਦ ਰੱਖਣਾ ਹੈ:**  
+- **ਵਰਤੋਂ** ternary operator (`? :`) ਸਧਾਰਨ ਦੋ-ਵਿਕਲਪ ਸਥਿਤੀਆਂ ਲਈ  
+- **ਲਿਖੋ** ਸਥਿਤੀ ਪਹਿਲਾਂ, ਫਿਰ `?`, ਫਿਰ ਸੱਚਾ ਨਤੀਜਾ, ਫਿਰ `:`, ਫਿਰ ਗਲਤ ਨਤੀਜਾ  
+- **ਲਾਗੂ ਕਰੋ** ਇਹ ਪੈਟਰਨ ਜਦੋਂ ਤੁਹਾਨੂੰ ਸਥਿਤੀਆਂ ਦੇ ਆਧਾਰ 'ਤੇ ਮੁੱਲਾਂ ਅਸਾਈਨ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇ  
 
 ```javascript
 // Step 4: Handling multiple specific cases
@@ -250,69 +247,80 @@ switch (dayOfWeek) {
     console.log("Invalid day of the week");
 }
 ```
+  
+**ਇਹ ਕੋਡ ਹਾਸਲ ਕਰਦਾ ਹੈ:**  
+- **ਮਿਲਾਓ** ਵੈਰੀਏਬਲ ਮੁੱਲ ਨੂੰ ਕਈ ਖਾਸ ਕੇਸਾਂ ਦੇ ਖਿਲਾਫ  
+- **ਗਰੁੱਪ ਕਰੋ** ਸਮਾਨ ਕੇਸਾਂ ਨੂੰ ਇਕੱਠੇ (ਹਫ਼ਤੇ ਦੇ ਦਿਨ ਵਸ. ਹਫ਼ਤੇ ਦੇ ਅੰਤ)  
+- **ਅਮਲ ਕਰੋ** ਸਹੀ ਕੋਡ ਬਲਾਕ ਜਦੋਂ ਇੱਕ ਮੈਚ ਮਿਲਦਾ ਹੈ  
+- **ਸ਼ਾਮਲ ਕਰੋ** ਇੱਕ `default` ਕੇਸ ਅਣਪਛਾਤੇ ਮੁੱਲਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ  
+- **ਵਰਤੋਂ** `break` ਸਟੇਟਮਾਂ ਕੋਡ ਨੂੰ ਅਗਲੇ ਕੇਸ ਵਿੱਚ ਜਾਰੀ ਰੱਖਣ ਤੋਂ ਰੋਕਣ ਲਈ  
+
+> 💡 **ਅਸਲ-ਦੁਨੀਆ ਦੀ ਮਿਸਾਲ**: ਕੰਟਰੋਲ ਫਲੋ ਨੂੰ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਧੀਰਜ ਵਾਲੇ GPS ਵਾਂਗ ਸੋਚੋ ਜੋ ਤੁਹਾਨੂੰ ਦਿਸ਼ਾਵਾਂ ਦਿੰਦਾ ਹੈ। ਇਹ ਸ਼ਾਇਦ ਕਹੇ "ਜੇ ਮੈਨ ਸਟ੍ਰੀਟ 'ਤੇ ਟ੍ਰੈਫਿਕ ਹੈ, ਤਾਂ ਇਸਦੀ ਬਜਾਏ ਹਾਈਵੇ ਲਵੋ। ਜੇ ਹਾਈਵੇ 'ਤੇ ਕੰਸਟਰਕਸ਼ਨ ਰੁਕਾਵਟ ਪੈਦਾ ਕਰ ਰਿਹਾ ਹੈ, ਤਾਂ ਦ੍ਰਿਸ਼ਯਮਾਰਗ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।" ਪ੍ਰੋਗਰਾਮ ਬਿਲਕੁਲ ਇਸੇ ਤਰ੍ਹਾਂ ਦੀ ਸਥਿਤੀਕ ਤਰਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਨੂੰ ਸਮਰਥਨਯੋਗ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਲਈ ਅਤੇ ਹਮੇਸ਼ਾ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਸਭ ਤੋਂ ਵਧੀਆ ਅਨੁਭਵ ਦਿੰਦੇ ਹਨ।  
+
+### 🎯 **ਸੰਕਲਪ ਚੈੱਕ: ਬੁਨਿਆਦੀ ਹਿੱਸਿਆਂ ਦੀ ਮਾਹਰਤਾ**  
+
+**ਆਓ ਦੇਖੀਏ ਕਿ ਤੁਸੀਂ ਬੁਨਿਆਦੀਆਂ ਨਾਲ ਕਿਵੇਂ ਕਰ ਰਹੇ ਹੋ:**  
+- ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਸ਼ਬਦਾਂ ਵਿੱਚ ਵੈਰੀਏਬਲ ਅਤੇ ਸਟੇਟਮੈਂਟ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਨੂੰ ਸਮਝਾ ਸਕਦੇ ਹੋ?  
+- ਇੱਕ ਅਸਲ-ਦੁਨੀਆ ਦੀ ਸਥਿਤੀ ਬਾਰੇ ਸੋਚੋ ਜਿੱਥੇ ਤੁਸੀਂ ਇੱਕ if-then ਫੈਸਲਾ ਲਗਾਉਂਦੇ ਹੋ (ਜਿਵੇਂ ਸਾਡਾ ਵੋਟਿੰਗ ਉਦਾਹਰਨ)  
+- ਪ੍ਰੋਗਰਾਮਿੰਗ ਤਰਕ ਬਾਰੇ ਇੱਕ ਚੀਜ਼ ਜੋ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਗਈ?  
+
+**ਤੁਰੰਤ ਭਰੋਸਾ ਵਧਾਉਣ ਵਾਲਾ:**  
+```mermaid
+flowchart LR
+    A["📝 Statements<br/>(Instructions)"] --> B["📦 Variables<br/>(Storage)"] --> C["🔀 Control Flow<br/>(Decisions)"] --> D["🎉 Working Program!"]
+    
+    style A fill:#ffeb3b
+    style B fill:#4caf50
+    style C fill:#2196f3
+    style D fill:#ff4081
+```
+  
+✅ **ਅਗਲਾ ਕੀ ਆ ਰਿਹਾ ਹੈ**: ਅਸੀਂ ਇਹਨਾਂ ਸੰਕਲਪਾਂ ਵਿੱਚ ਹੋਰ ਡੂੰਘਾਈ ਵਿੱਚ ਜਾਣ ਲਈ ਬਿਲਕੁਲ ਮਜ਼ੇਦਾਰ ਸਮਾਂ ਬਿਤਾਉਣ ਵਾਲੇ ਹਾਂ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਇਹ ਸ਼ਾਨਦਾਰ ਯਾਤਰਾ ਇਕੱਠੇ ਜਾਰੀ ਰੱਖਦੇ ਹਾਂ! ਇਸ ਸਮੇਂ, ਸਿਰਫ਼ ਉਹ ਸਾਰਾ ਉਤਸ਼ਾਹ ਮਹਿਸੂਸ ਕਰਨ 'ਤੇ ਧਿਆਨ ਦਿਓ ਜੋ ਤੁਹਾਡੇ ਅੱਗੇ ਸਾਰੇ ਸ਼ਾਨਦਾਰ ਸੰਭਾਵਨਾਵਾਂ ਬਾਰੇ ਹੈ। ਖਾਸ ਹੁਨਰ ਅਤੇ ਤਕਨੀਕਾਂ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਚਿਪਕ ਜਾਣਗੀਆਂ ਜਿਵੇਂ ਅਸੀਂ ਇਕੱਠੇ ਅਭਿਆਸ ਕਰਦੇ ਹਾਂ – ਮੈਂ ਵਾਅਦਾ ਕਰਦਾ ਹਾਂ ਕਿ ਇਹ ਤੁਹਾਡੇ ਸੋਚਣ ਤੋਂ ਕਾਫ਼ੀ ਜ਼ਿਆਦਾ ਮਜ਼ੇਦਾਰ ਹੋਵੇਗਾ!  
 
-**ਇਹ ਕੋਡ ਹਾਸਲ ਕਰਦਾ ਹੈ:**
-- **ਮੈਚ** ਕਰੋ variable value ਨੂੰ ਕਈ specific cases ਨਾਲ
-- **ਗਰੁੱਪ** ਕਰੋ similar cases ਨੂੰ (weekdays vs. weekends)
-- **ਐਗਜ਼ਿਕਿਊਟ** ਕਰੋ appropriate code block ਜਦੋਂ match ਮਿਲਦਾ ਹੈ
-- **ਸ਼ਾਮਲ** ਕਰੋ `default` case ਅਣਜਾਣ values ਨੂੰ ਹੈਂਡਲ ਕਰਨ ਲਈ
-- **ਵਰਤੋਂ** ਕਰੋ `break` statements code ਨੂੰ ਅਗਲੇ case 'ਤੇ ਜਾਣ ਤੋਂ ਰੋਕਣ ਲਈ
-
-> 💡 **ਅਸਲ-ਜਗ੍ਹਾ ਦੀ ਮਿਸਾਲ**: ਕੰਟਰੋਲ ਫਲੋ ਨੂੰ world's most patient GPS ਵਾਂਗ ਸੋਚੋ ਜੋ ਤੁਹਾਨੂੰ ਦਿਸ਼ਾ ਦਿੰਦਾ ਹੈ। ਇਹ ਕਹਿ ਸਕਦਾ ਹੈ "ਜੇ Main Street 'ਤੇ ਟ੍ਰੈਫਿਕ ਹੈ, ਤਾਂ highway ਲਵੋ। ਜੇ construction highway ਨੂੰ ਰੋਕ ਰਿਹਾ ਹੈ, ਤਾਂ scenic route ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।" ਪ੍ਰੋਗਰਾਮ ਬਿਲਕੁਲ ਇਸੇ ਤਰ੍ਹਾਂ ਦੀ conditional logic ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ 'ਤੇ ਸਮਾਰਟ ਜਵਾਬ ਦੇਣ ਲਈ ਅਤੇ ਹਮੇਸ਼ਾ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਸਭ ਤੋਂ ਵਧੀਆ ਅਨੁਭਵ ਦਿੰਦੇ ਹਨ।
-
-✅ **ਅਗਲੇ ਵਿੱਚ ਕੀ ਆ ਰਿਹਾ ਹੈ**: ਅਸੀਂ ਇਹ concepts ਨੂੰ ਹੋਰ ਡੂੰਘਾਈ ਵਿੱਚ ਜਾਣਗੇ ਜਦੋਂ ਅਸੀਂ ਇਸ ਸ਼ਾਨਦਾਰ ਯਾਤਰਾ ਨੂੰ ਇਕੱਠੇ ਜਾਰੀ ਰੱਖਾਂਗੇ! ਇਸ ਸਮੇਂ, ਸਿਰਫ਼ ਉਹ ਉਤਸ਼ਾਹ ਮਹਿਸੂਸ ਕਰਨ 'ਤੇ ਧਿਆਨ ਦਿਓ ਜੋ ਤੁਹਾਡੇ ਅੱਗੇ ਸਾਰੇ ਸ਼ਾਨਦਾਰ ਸੰਭਾਵਨਾਵਾਂ ਬਾਰੇ ਹੈ। ਖਾਸ ਹੁਨਰ ਅਤੇ ਤਕਨੀਕਾਂ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਚਿੱਟੇ ਰਹਿਣਗੀਆਂ ਜਦੋਂ ਅਸੀਂ ਇਕੱਠੇ ਅਭਿਆਸ ਕਰਾਂਗੇ – ਮੈਂ ਵਾਅਦਾ ਕਰਦਾ ਹਾਂ ਕਿ ਇਹ ਤੁਹਾਡੇ ਸੋਚਣ ਤੋਂ ਕਾਫ਼ੀ ਜ਼ਿਆਦਾ ਮਜ਼ੇਦਾਰ ਹੋਵੇਗਾ!
-
-
-## ਟੂਲਸ ਆਫ਼ ਦ ਟਰੇਡ
-
-ਚੰਗਾ, ਇਹ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਮੈਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਉਤਸ਼ਾਹਿਤ ਹੋ ਜਾਂਦਾ ਹਾਂ ਕਿ ਮੈਂ ਆਪਣੇ ਆਪ ਨੂੰ ਰੋਕ ਨਹੀਂ ਸਕਦਾ! 🚀 ਅਸੀਂ ਉਹ ਸ਼ਾਨਦਾਰ ਟੂਲਸ ਬਾਰੇ ਗੱਲ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਤੁਹਾਨੂੰ ਮਹਿਸੂਸ ਕਰਵਾਉਣਗੇ ਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਡਿਜ਼ੀਟਲ spaceship ਦੀਆਂ ਚਾਬੀਆਂ ਦਿੱਤੀਆਂ ਗਈਆਂ ਹਨ।
-
-ਤੁਹਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਇੱਕ chef ਕੋਲ ਉਹ perfectly balanced knives ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਉਹਨਾਂ ਦੇ ਹੱਥਾਂ ਦੇ extension ਵਾਂਗ ਮਹਿਸੂਸ ਹੁੰਦੀਆਂ ਹਨ? ਜਾਂ ਇੱਕ ਸੰਗੀਤਕਾਰ ਕੋਲ ਉਹ guitar ਹੁੰਦੀ ਹੈ ਜੋ ਉਹਨਾਂ ਦੇ ਛੂਹਣ ਦੇ ਨਾਲ ਹੀ ਗਾਉਂਦੀ ਹੈ? ਚੰਗਾ, developers ਕੋਲ ਆਪਣੇ magical tools ਹੁੰਦੇ ਹਨ, ਅਤੇ ਇਹ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਬਿਲਕੁਲ ਹੈਰਾਨ ਕਰ ਦੇਵੇਗਾ – ਇਹਨਾਂ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਮੁਫ਼ਤ ਹਨ!
-
-ਮੈਂ literally chair 'ਤੇ ਬੈਠ ਕੇ ਉਤਸ਼ਾਹਿਤ ਹੋ ਰਿਹਾ ਹਾਂ ਇਹ ਤੁਹਾਡੇ ਨਾਲ ਸਾਂਝਾ ਕਰਨ ਲਈ ਕਿਉਂਕਿ ਇਹਨਾਂ ਨੇ ਸੌਫਟਵੇਅਰ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ ਹੈ। ਅਸੀਂ ਗੱਲ ਕਰ ਰਹੇ ਹਾਂ AI-powered coding assistants ਬਾਰੇ ਜੋ ਤੁਹਾਡਾ ਕੋਡ ਲਿਖਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ (ਮੈਂ ਮਜ਼ਾਕ ਨਹੀਂ ਕਰ ਰਿਹਾ!), cloud environments ਜਿੱਥੇ ਤੁਸੀਂ literally Wi-Fi ਨਾਲ ਕਿਤੇ ਵੀ applications ਬਣਾ ਸਕਦੇ ਹੋ, ਅਤੇ debugging tools ਜੋ ਬਹੁਤ sophisticated ਹਨ ਜਿਵੇਂ ਤੁਹਾਡੇ programs ਲਈ X-ray vision ਹੋਵੇ।
-
-ਅਤੇ ਇਹ ਹੈਰਾਨੀਜਨਕ ਹਿੱਸਾ: ਇਹ "beginner tools" ਨਹੀਂ ਹਨ ਜੋ ਤੁਸੀਂ ਛੱਡ ਦਿਓਗੇ। ਇਹ exact same professional-grade tools ਹਨ ਜੋ Google, Netflix, ਅਤੇ ਉਹ indie app studio ਜੋ ਤੁਹਾਨੂੰ ਪਸੰਦ ਹੈ, ਦੇ developers ਇਸ ਸਮੇਂ ਵਰਤ ਰਹੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਵਰਤ ਕੇ ਤੁਹਾਨੂੰ ਬਿਲਕੁਲ pro ਮਹਿਸੂਸ ਹੋਵੇਗਾ!
+## ਵਪਾਰ ਦੇ ਸਾਧਨ  
 
+ਚੰਗਾ, ਇਹ ਸੱਚਮੁੱਚ ਜਿੱਥੇ ਮੈਂ ਬਹੁਤ ਉਤਸ਼ਾਹਿਤ ਹੋ ਜਾਂਦਾ ਹਾਂ ਮੈਂ ਆਪਣੇ ਆਪ ਨੂੰ ਮੁਸ਼ਕਿਲ ਨਾਲ ਕਾਬੂ ਕਰ ਸਕਦਾ ਹਾਂ! 🚀 ਅਸੀਂ ਉਹ ਸ਼ਾਨਦਾਰ ਸਾਧਨਾਂ ਬਾਰੇ ਗੱਲ ਕਰਨ ਵਾਲੇ ਹਾਂ ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਮਹਿਸੂਸ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰਨ ਵਾਲੇ ਹਨ ਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਡਿਜ਼ੀਟਲ ਸਪੇਸਸ਼ਿਪ ਦੀਆਂ ਕੁੰਜੀਆਂ ਦਿੱਤੀਆਂ ਗਈਆਂ ਹਨ।  
 
-### ਕੋਡ ਐਡੀਟਰਸ ਅਤੇ IDEs: ਤੁਹਾਡੇ ਨਵੇਂ ਡਿਜ਼ੀਟਲ ਬੈਸਟ ਫ੍ਰੈਂਡਸ
+ਤੁਹਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਇੱਕ ਸ਼ੈਫ਼ ਕੋਲ ਉਹਨਾਂ ਦੇ ਹੱਥਾਂ ਦੇ ਵਧਾਏ ਹੋਏ ਹਿੱਸਿਆਂ ਵਾਂਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੰਤੁਲਿਤ ਚਾਕੂ ਹੁੰਦੇ ਹਨ? ਜਾਂ ਇੱਕ ਸੰਗੀਤਕਾਰ ਕੋਲ ਉਹ ਇੱਕ ਗਿਟਾਰ ਹੁੰਦੀ ਹੈ ਜੋ ਉਹਨਾਂ ਦੇ ਛੂਹਣ ਦੇ ਸਮੇਂ ਗਾਉਂਦੀ ਹੈ? ਚੰਗਾ, ਡਿਵੈਲਪਰਾਂ ਕੋਲ ਇਹਨਾਂ ਜਾਦੂਈ ਸਾਧਨਾਂ ਦਾ ਆਪਣਾ ਸੰਸਕਰਣ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਇਹ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਬਿਲਕੁਲ ਹੈਰਾਨ ਕਰ ਦੇਵੇਗਾ – ਇਹਨਾਂ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੁਫ਼ਤ ਹਨ!  
 
-ਆਓ ਕੋਡ ਐਡੀਟਰਸ ਬਾਰੇ ਗੱਲ ਕਰੀਏ – ਇਹ ਸੱਚਮੁੱਚ ਤੁਹਾਡੇ ਨਵੇਂ ਮਨਪਸੰਦ ਜਗ੍ਹਾ ਬਣਨ ਵਾਲੇ ਹਨ! ਇਹਨਾਂ ਨੂੰ ਤੁਹਾਡੇ personal coding sanctuary ਵਾਂਗ ਸੋਚੋ ਜਿੱਥੇ ਤੁਸੀਂ ਆਪਣੇ digital creations ਨੂੰ ਬਣਾਉਣ ਅਤੇ perfect ਕਰਨ ਲਈ ਜ਼ਿਆਦਾਤਰ ਸਮਾਂ ਬਿਤਾਉਂਦੇ ਹੋ।
+@@CODE
+ਜਦੋਂ ਪਹਿਲੀ ਵਾਰ ਕਿਸੇ ਨੇ ਮੈਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇਵਟੂਲਸ ਦਿਖਾਏ, ਮੈਂ ਤਿੰਨ ਘੰਟੇ ਸਿਰਫ਼ ਕਲਿੱਕ ਕਰਦਾ ਰਿਹਾ ਅਤੇ "ਰੁਕੋ, ਇਹ ਵੀ ਕਰ ਸਕਦਾ ਹੈ?!" ਕਹਿੰਦਾ ਰਿਹਾ। ਤੁਸੀਂ ਹਰੇਕ ਵੈਬਸਾਈਟ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਐਡਿਟ ਕਰ ਸਕਦੇ ਹੋ, ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਸਭ ਕੁਝ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਆਪਣੀ ਸਾਈਟ ਕਿਵੇਂ ਦਿਖਦੀ ਹੈ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਪੂਰੇ ਪ੍ਰੋਫੈਸ਼ਨਲ ਦੀ ਤਰ੍ਹਾਂ ਡੀਬੱਗ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਬਿਲਕੁਲ ਹੈਰਾਨੀਜਨਕ ਹੈ!
 
-ਪਰ ਇਹ ਹੈ ਜੋ modern editors ਬਾਰੇ ਬਿਲਕੁਲ magical ਹੈ: ਇਹ ਸਿਰਫ਼ fancy text editors ਨਹੀਂ ਹਨ। ਇਹ 24/7 ਤੁਹਾਡੇ ਨਾਲ ਬੈਠੇ ਸਭ ਤੋਂ brilliant, supportive coding mentor ਵਾਂਗ ਹੁੰਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ typos ਨੂੰ notice ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਹੀ ਪਕੜ ਲੈਂਦੇ ਹਨ, ਉਹ ਸੁਧਾਰ ਸੁਝਾਉਂਦੇ ਹਨ ਜੋ ਤੁਹਾਨੂੰ genius ਬਣਾਉਂਦੇ ਹਨ, ਤੁਹਾਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਕਿ ਹਰ code ਦਾ ਹਿੱਸਾ ਕੀ ਕਰਦਾ ਹੈ, ਅਤੇ ਕੁਝ ਤਾਂ ਤੁਹਾਡੇ thoughts ਨੂੰ finish ਕਰਨ ਲਈ predict ਵੀ ਕਰ ਸਕਦੇ ਹਨ!
+**ਇਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਗੁਪਤ ਹਥਿਆਰ ਹਨ:**
 
-ਮੈਨੂੰ ਯਾਦ ਹੈ ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰ auto-completion ਦੀ ਖੋਜ ਕੀਤੀ – ਮੈਨੂੰ literally ਮਹਿਸੂਸ ਹੋਇਆ ਕਿ ਮੈਂ ਭਵਿੱਖ ਵਿੱਚ ਰਹਿ ਰਿਹਾ ਹਾਂ। ਤੁਸੀਂ ਕੁਝ type ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਅਤੇ ਤੁਹਾਡਾ editor ਕਹਿੰਦਾ ਹੈ, "ਹੇ, ਕੀ ਤੁਸੀਂ ਇਸ function ਬਾਰੇ ਸੋਚ ਰਹੇ ਸੀ ਜੋ exact ਤੁਹਾਡੇ ਲਈ ਲੋੜੀਂਦਾ ਹੈ?" ਇਹ mind reader ਵਾਂਗ ਤੁਹਾਡੇ coding buddy ਬਣ ਜਾਂਦਾ ਹੈ!
+ਜਦੋਂ ਤੁਸੀਂ ਵੈਬਸਾਈਟ ਜਾਂ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਦੇਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਕਿ ਇਹ ਅਸਲ ਦੁਨੀਆ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਦੀ ਹੈ ਅਤੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਸਿਰਫ਼ ਤੁਹਾਡਾ ਕੰਮ ਦਿਖਾਉਂਦੇ ਹੀ ਨਹੀਂ, ਸਗੋਂ ਪ੍ਰਦਰਸ਼ਨ, ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਸੰਭਾਵਿਤ ਸਮੱਸਿਆਵਾਂ ਬਾਰੇ ਵਿਸਥਾਰ ਵਿੱਚ ਫੀਡਬੈਕ ਵੀ ਦਿੰਦੇ ਹਨ।
 
-**ਇਹ editors ਨੂੰ ਬਿਲਕੁਲ extraordinary ਬਣਾਉਂਦਾ ਹੈ?**
+#### ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਸ (DevTools)
 
-Modern code editors productivity ਨੂੰ ਵਧਾਉਣ ਲਈ ਬਹੁਤ ਸਾਰੇ features offer ਕਰਦੇ ਹਨ:
+ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿਸਥਾਰਤ ਵਿਕਾਸ ਸੂਟ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ:
 
-| Feature | ਇਹ ਕੀ ਕਰਦਾ ਹੈ | ਇਹ ਕਿਵੇਂ ਮਦਦ ਕਰਦਾ ਹੈ |
-|---------|--------------|--------------|
-| **Syntax Highlighting** | ਤੁਹਾਡੇ code ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਨੂੰ colors ਦਿੰਦਾ ਹੈ | Code ਨੂੰ ਪੜ੍ਹਨ ਅਤੇ errors ਨੂੰ spot ਕਰਨ ਵਿੱਚ ਆ
-| **ਕੰਸੋਲ** | ਗਲਤੀਆਂ ਦੇ ਸੁਨੇਹੇ ਵੇਖੋ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਜਾਂਚ ਕਰੋ | ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਡੀਬੱਗ ਕਰੋ ਅਤੇ ਕੋਡ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ |
-| **ਨੈਟਵਰਕ ਮਾਨੀਟਰ** | ਸਰੋਤਾਂ ਦੇ ਲੋਡ ਹੋਣ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ | ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਲੋਡਿੰਗ ਸਮੇਂ ਨੂੰ ਠੀਕ ਕਰੋ |
-| **ਐਕਸੈਸਬਿਲਿਟੀ ਚੈੱਕਰ** | ਸਮਾਵੇਸ਼ੀ ਡਿਜ਼ਾਈਨ ਦੀ ਜਾਂਚ ਕਰੋ | ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਕੰਮ ਕਰਦੀ ਹੈ |
-| **ਡਿਵਾਈਸ ਸਿਮੂਲੇਟਰ** | ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਪੂਰਵ ਦਰਸ਼ਨ ਕਰੋ | ਬਿਨਾਂ ਕਈ ਡਿਵਾਈਸਾਂ ਦੇ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਦੀ ਜਾਂਚ ਕਰੋ |
+| ਟੂਲ ਸ਼੍ਰੇਣੀ | ਇਹ ਕੀ ਕਰਦਾ ਹੈ | ਉਦਾਹਰਨ ਵਰਤੋਂ |
+|---------------|--------------|------------------|
+| **ਐਲਿਮੈਂਟ ਇੰਸਪੈਕਟਰ** | HTML/CSS ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਵੇਖੋ ਅਤੇ ਐਡਿਟ ਕਰੋ | ਸਟਾਈਲਿੰਗ ਨੂੰ ਤੁਰੰਤ ਨਤੀਜੇ ਦੇਖਣ ਲਈ ਠੀਕ ਕਰੋ |
+| **ਕੰਸੋਲ** | ਗਲਤੀ ਦੇ ਸੁਨੇਹੇ ਵੇਖੋ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਟੈਸਟ ਕਰੋ | ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਡੀਬੱਗ ਕਰੋ ਅਤੇ ਕੋਡ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ |
+| **ਨੈਟਵਰਕ ਮਾਨੀਟਰ** | ਸਰੋਤਾਂ ਦੇ ਲੋਡ ਹੋਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ | ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਲੋਡਿੰਗ ਸਮੇਂ ਨੂੰ ਠੀਕ ਕਰੋ |
+| **ਐਕਸੈਸਬਿਲਿਟੀ ਚੈੱਕਰ** | ਸਮਾਵੇਸ਼ੀ ਡਿਜ਼ਾਈਨ ਲਈ ਟੈਸਟ ਕਰੋ | ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਸਾਰੇ ਯੂਜ਼ਰਾਂ ਲਈ ਕੰਮ ਕਰਦੀ ਹੈ |
+| **ਡਿਵਾਈਸ ਸਿਮੂਲੇਟਰ** | ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਪ੍ਰੀਵਿਊ ਕਰੋ | ਬਿਨਾਂ ਕਈ ਡਿਵਾਈਸਾਂ ਦੇ ਜ਼ਰੂਰੀ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਦੀ ਜਾਂਚ ਕਰੋ |
 
 #### ਵਿਕਾਸ ਲਈ ਸਿਫਾਰਸ਼ੀ ਬ੍ਰਾਊਜ਼ਰ
 
-- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - ਉਦਯੋਗ-ਮਾਨਕ ਡੈਵਟੂਲਜ਼ ਨਾਲ ਵਿਸਤ੍ਰਿਤ ਦਸਤਾਵੇਜ਼
-- **[Firefox](https://developer.mozilla.org/docs/Tools)** - ਸ਼ਾਨਦਾਰ CSS ਗ੍ਰਿਡ ਅਤੇ ਐਕਸੈਸਬਿਲਿਟੀ ਟੂਲਜ਼
-- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium 'ਤੇ ਅਧਾਰਿਤ Microsoft ਦੇ ਵਿਕਾਸਕਰਤਾ ਸਰੋਤਾਂ ਨਾਲ
+- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - ਉਦਯੋਗ-ਮਾਨਕ DevTools ਵਿਸਥਾਰਤ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਨਾਲ
+- **[Firefox](https://developer.mozilla.org/docs/Tools)** - ਸ਼ਾਨਦਾਰ CSS ਗ੍ਰਿਡ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਟੂਲਸ
+- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium 'ਤੇ ਬਣਿਆ ਹੋਇਆ Microsoft ਦੇ ਡਿਵੈਲਪਰ ਸਰੋਤਾਂ ਨਾਲ
 
-> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਟੈਸਟਿੰਗ ਟਿਪ**: ਹਮੇਸ਼ਾ ਆਪਣੀਆਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਕਈ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਸਟ ਕਰੋ! Chrome ਵਿੱਚ ਜੋ ਬਿਲਕੁਲ ਸਹੀ ਕੰਮ ਕਰਦਾ ਹੈ, ਉਹ Safari ਜਾਂ Firefox ਵਿੱਚ ਵੱਖਰਾ ਲੱਗ ਸਕਦਾ ਹੈ। ਪੇਸ਼ੇਵਰ ਵਿਕਾਸਕਰਤਾ ਸਾਰੇ ਮੁੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਸਟ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਸਥਿਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ।
+> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਟੈਸਟਿੰਗ ਟਿਪ**: ਹਮੇਸ਼ਾ ਆਪਣੀਆਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਕਈ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਸਟ ਕਰੋ! Chrome ਵਿੱਚ ਜੋ ਬਿਲਕੁਲ ਸਹੀ ਕੰਮ ਕਰਦਾ ਹੈ, Safari ਜਾਂ Firefox ਵਿੱਚ ਵੱਖਰਾ ਦਿਖ ਸਕਦਾ ਹੈ। ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਸਾਰੇ ਮੁੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਸਟ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਸਥਿਰ ਯੂਜ਼ਰ ਅਨੁਭਵ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ।
 
-### ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ: ਵਿਕਾਸਕਰਤਾ ਦੀ ਤਾਕਤ ਦਾ ਦਰਵਾਜ਼ਾ
+### ਕਮਾਂਡ ਲਾਈਨ ਟੂਲਸ: ਡਿਵੈਲਪਰ ਸੂਪਰਪਾਵਰਜ਼ ਦਾ ਗੇਟਵੇ
 
-ਚੰਗਾ, ਆਓ ਕਮਾਂਡ ਲਾਈਨ ਬਾਰੇ ਇੱਕ ਸੱਚਾ ਪਲ ਸਾਂਝਾ ਕਰੀਏ, ਕਿਉਂਕਿ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਇਹ ਕਿਸੇ ਅਜਿਹੇ ਵਿਅਕਤੀ ਤੋਂ ਸੁਣੋ ਜੋ ਇਸਨੂੰ ਸੱਚਮੁੱਚ ਸਮਝਦਾ ਹੈ। ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰ ਇਸਨੂੰ ਦੇਖਿਆ – ਸਿਰਫ ਇਹ ਡਰਾਉਣਾ ਕਾਲਾ ਸਕ੍ਰੀਨ ਜਿਸ 'ਤੇ ਟੈਕਸਟ ਚਮਕ ਰਿਹਾ ਸੀ – ਮੈਂ ਸੱਚਮੁੱਚ ਸੋਚਿਆ, "ਨਹੀਂ, ਬਿਲਕੁਲ ਨਹੀਂ! ਇਹ ਕੁਝ 1980 ਦੇ ਹੈਕਰ ਫਿਲਮ ਵਰਗਾ ਲੱਗਦਾ ਹੈ, ਅਤੇ ਮੈਂ ਇਸ ਲਈ ਕਾਫ਼ੀ ਸਮਾਰਟ ਨਹੀਂ ਹਾਂ!" 😅
+ਚੰਗਾ, ਆਓ ਕਮਾਂਡ ਲਾਈਨ ਬਾਰੇ ਇੱਕ ਬਿਲਕੁਲ ਇਮਾਨਦਾਰ ਪਲ ਬਿਤਾਈਏ, ਕਿਉਂਕਿ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਇਹ ਕਿਸੇ ਅਜਿਹੇ ਵਿਅਕਤੀ ਤੋਂ ਸੁਣੋ ਜੋ ਇਸਨੂੰ ਸੱਚਮੁੱਚ ਸਮਝਦਾ ਹੈ। ਜਦੋਂ ਮੈਂ ਪਹਿਲੀ ਵਾਰ ਇਸਨੂੰ ਵੇਖਿਆ – ਸਿਰਫ਼ ਇਹ ਡਰਾਉਣਾ ਕਾਲਾ ਸਕ੍ਰੀਨ ਜਿਸ 'ਤੇ ਟੈਕਸਟ ਚਮਕ ਰਿਹਾ ਸੀ – ਮੈਂ ਸੱਚਮੁੱਚ ਸੋਚਿਆ, "ਨਹੀਂ, ਬਿਲਕੁਲ ਨਹੀਂ! ਇਹ ਕੁਝ 1980 ਦੇ ਹੈਕਰ ਫਿਲਮ ਤੋਂ ਲੱਗਦਾ ਹੈ, ਅਤੇ ਮੈਂ ਇਸ ਲਈ ਬਿਲਕੁਲ ਕਾਬਲ ਨਹੀਂ ਹਾਂ!" 😅
 
-ਪਰ ਇਹ ਹੈ ਜੋ ਮੈਂ ਚਾਹੁੰਦਾ ਸੀ ਕਿ ਕੋਈ ਮੈਨੂੰ ਉਸ ਸਮੇਂ ਦੱਸਦਾ, ਅਤੇ ਜੋ ਮੈਂ ਹੁਣ ਤੁਹਾਨੂੰ ਦੱਸ ਰਿਹਾ ਹਾਂ: ਕਮਾਂਡ ਲਾਈਨ ਡਰਾਉਣਾ ਨਹੀਂ ਹੈ – ਇਹ ਅਸਲ ਵਿੱਚ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨਾਲ ਸਿੱਧੀ ਗੱਲਬਾਤ ਕਰਨ ਵਰਗਾ ਹੈ। ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਕਿ ਖਾਣਾ ਆਰਡਰ ਕਰਨ ਦੇ fancy ਐਪ ਨਾਲ ਤਸਵੀਰਾਂ ਅਤੇ ਮੈਨੂਜ਼ ਦੇ ਰਾਹੀਂ (ਜੋ ਚੰਗਾ ਅਤੇ ਆਸਾਨ ਹੈ) ਦੇ ਬਦਲੇ ਆਪਣੇ ਪਸੰਦੀਦਾ ਰੈਸਟੋਰੈਂਟ ਵਿੱਚ ਜਾਣਾ ਜਿੱਥੇ ਸ਼ੈਫ ਨੂੰ ਪਤਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਕੀ ਪਸੰਦ ਹੈ ਅਤੇ ਉਹ ਕੁਝ ਸ਼ਾਨਦਾਰ ਬਣਾਉਣ ਲਈ ਸਿਰਫ "ਮੈਨੂੰ ਕੁਝ ਅਦਭੁਤ ਨਾਲ ਹੈਰਾਨ ਕਰੋ" ਕਹਿ ਕੇ ਤਿਆਰ ਕਰ ਸਕਦਾ ਹੈ।
+ਪਰ ਇਹ ਹੈ ਜੋ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਕਿਸੇ ਨੇ ਮੈਨੂੰ ਉਸ ਸਮੇਂ ਦੱਸਿਆ ਹੋਵੇ, ਅਤੇ ਜੋ ਮੈਂ ਤੁਹਾਨੂੰ ਹੁਣ ਦੱਸ ਰਿਹਾ ਹਾਂ: ਕਮਾਂਡ ਲਾਈਨ ਡਰਾਉਣੀ ਨਹੀਂ ਹੈ – ਇਹ ਅਸਲ ਵਿੱਚ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨਾਲ ਸਿੱਧੀ ਗੱਲਬਾਤ ਕਰਨ ਵਰਗਾ ਹੈ। ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਕਿ ਖਾਣਾ ਆਰਡਰ ਕਰਨ ਦਾ ਤਰੀਕਾ ਇੱਕ ਸ਼ਾਨਦਾਰ ਐਪ ਦੇ ਜ਼ਰੀਏ ਹੈ ਜਿਸ ਵਿੱਚ ਤਸਵੀਰਾਂ ਅਤੇ ਮੈਨੂ ਹਨ (ਜੋ ਸੁਹਜ ਅਤੇ ਆਸਾਨ ਹੈ) ਬਨਾਮ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਸਥਾਨਕ ਰੈਸਟੋਰੈਂਟ ਵਿੱਚ ਜਾਣਾ ਜਿੱਥੇ ਸ਼ੈਫ਼ ਨੂੰ ਪਤਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਕੀ ਪਸੰਦ ਹੈ ਅਤੇ ਸਿਰਫ਼ ਤੁਹਾਡੇ "ਮੈਨੂੰ ਕੁਝ ਸ਼ਾਨਦਾਰ ਨਾਲ ਹੈਰਾਨ ਕਰੋ" ਕਹਿਣ 'ਤੇ ਕੁਝ ਪੂਰਨ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੈ।
 
-ਕਮਾਂਡ ਲਾਈਨ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਵਿਕਾਸਕਰਤਾ ਜਾਦੂਗਰਾਂ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਨ ਜਾਂਦੇ ਹਨ। ਤੁਸੀਂ ਕੁਝ ਜਾਦੂਈ ਸ਼ਬਦ (ਠੀਕ ਹੈ, ਇਹ ਸਿਰਫ ਕਮਾਂਡ ਹਨ, ਪਰ ਇਹ ਜਾਦੂਈ ਮਹਿਸੂਸ ਹੁੰਦੀਆਂ ਹਨ!) ਟਾਈਪ ਕਰਦੇ ਹੋ, ਐਂਟਰ ਦਬਾਉਂਦੇ ਹੋ, ਅਤੇ BOOM – ਤੁਸੀਂ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਸਟ੍ਰਕਚਰ ਬਣਾਏ, ਦੁਨੀਆ ਭਰ ਤੋਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲ ਇੰਸਟਾਲ ਕੀਤੇ, ਜਾਂ ਆਪਣਾ ਐਪ ਇੰਟਰਨੈਟ 'ਤੇ ਲੋੜੀਂਦੇ ਲੋਕਾਂ ਲਈ ਡਿਪਲੌਇ ਕੀਤਾ। ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਤਾਕਤ ਦਾ ਪਹਿਲਾ ਸਵਾਦ ਲੈਂਦੇ ਹੋ, ਇਹ ਸੱਚਮੁੱਚ ਕਾਫ਼ੀ ਆਕਰਸ਼ਕ ਹੁੰਦਾ ਹੈ!
+ਕਮਾਂਡ ਲਾਈਨ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਡਿਵੈਲਪਰ ਜਾਦੂਗਰਾਂ ਵਰਗਾ ਮਹਿਸੂਸ ਕਰਨ ਲਈ ਜਾਂਦੇ ਹਨ। ਤੁਸੀਂ ਕੁਝ ਜਾਦੂਈ ਸ਼ਬਦ (ਠੀਕ ਹੈ, ਇਹ ਸਿਰਫ਼ ਕਮਾਂਡ ਹਨ, ਪਰ ਇਹ ਜਾਦੂਈ ਮਹਿਸੂਸ ਹੁੰਦੀਆਂ ਹਨ!) ਟਾਈਪ ਕਰਦੇ ਹੋ, ਐਂਟਰ ਦਬਾਉਂਦੇ ਹੋ, ਅਤੇ ਬੂਮ – ਤੁਸੀਂ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਸਟ੍ਰਕਚਰ ਬਣਾਏ, ਦੁਨੀਆ ਭਰ ਤੋਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲਸ ਇੰਸਟਾਲ ਕੀਤੇ, ਜਾਂ ਆਪਣਾ ਐਪ ਇੰਟਰਨੈਟ 'ਤੇ ਲੋੜੀਂਦੇ ਲੋਕਾਂ ਲਈ ਡਿਪਲੌਇ ਕੀਤਾ। ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਸ਼ਕਤੀ ਦਾ ਪਹਿਲਾ ਸਵਾਦ ਲੈਂਦੇ ਹੋ, ਇਹ ਸੱਚਮੁੱਚ ਕਾਫ਼ੀ ਆਕਰਸ਼ਕ ਹੁੰਦਾ ਹੈ!
 
-**ਕਿਉਂ ਕਮਾਂਡ ਲਾਈਨ ਤੁਹਾਡਾ ਮਨਪਸੰਦ ਟੂਲ ਬਣ ਜਾਵੇਗਾ:**
+**ਕਮਾਂਡ ਲਾਈਨ ਤੁਹਾਡਾ ਮਨਪਸੰਦ ਟੂਲ ਕਿਉਂ ਬਣ ਜਾਵੇਗਾ:**
 
-ਜਦੋਂ ਕਿ ਗ੍ਰਾਫਿਕਲ ਇੰਟਰਫੇਸ ਕਈ ਕੰਮਾਂ ਲਈ ਸ਼ਾਨਦਾਰ ਹਨ, ਕਮਾਂਡ ਲਾਈਨ ਆਟੋਮੇਸ਼ਨ, ਸਹੀਤਾ, ਅਤੇ ਗਤੀ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਹੈ। ਕਈ ਵਿਕਾਸ ਟੂਲ ਮੁੱਖ ਤੌਰ 'ਤੇ ਕਮਾਂਡ ਲਾਈਨ ਇੰਟਰਫੇਸਾਂ ਰਾਹੀਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਵਰਤਣਾ ਸਿੱਖਣਾ ਤੁਹਾਡੀ ਉਤਪਾਦਕਤਾ ਨੂੰ ਨਾਟਕੀ ਤੌਰ 'ਤੇ ਸੁਧਾਰ ਸਕਦਾ ਹੈ।
+ਜਦੋਂ ਕਿ ਗ੍ਰਾਫਿਕਲ ਇੰਟਰਫੇਸ ਕਈ ਕੰਮਾਂ ਲਈ ਸ਼ਾਨਦਾਰ ਹਨ, ਕਮਾਂਡ ਲਾਈਨ ਆਟੋਮੇਸ਼ਨ, ਸਹੀਤਾ ਅਤੇ ਗਤੀ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਹੈ। ਕਈ ਵਿਕਾਸ ਟੂਲਸ ਮੁੱਖ ਤੌਰ 'ਤੇ ਕਮਾਂਡ ਲਾਈਨ ਇੰਟਰਫੇਸਾਂ ਦੇ ਜ਼ਰੀਏ ਕੰਮ ਕਰਦੇ ਹਨ, ਅਤੇ ਇਨ੍ਹਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਵਰਤਣ ਦੀ ਸਿੱਖਿਆ ਤੁਹਾਡੀ ਉਤਪਾਦਕਤਾ ਨੂੰ ਬਹੁਤ ਵਧਾ ਸਕਦੀ ਹੈ।
 
 ```bash
 # Step 1: Create and navigate to project directory
@@ -322,7 +330,7 @@ cd my-awesome-website
 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
 - **ਨਵਾਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਓ** "my-awesome-website" ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ
-- **ਨਵੀਂ ਬਣਾਈ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾਓ** ਕੰਮ ਸ਼ੁਰੂ ਕਰਨ ਲਈ
+- **ਨਵੇਂ ਬਣਾਏ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾਓ** ਕੰਮ ਸ਼ੁਰੂ ਕਰਨ ਲਈ
 
 ```bash
 # Step 2: Initialize project with package.json
@@ -335,9 +343,9 @@ npm install --save-dev @eslint/js
 
 **ਕਦਮ-ਦਰ-ਕਦਮ, ਇਹ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
 - **ਨਵਾਂ Node.js ਪ੍ਰੋਜੈਕਟ ਸ਼ੁਰੂ ਕਰੋ** ਡਿਫਾਲਟ ਸੈਟਿੰਗਾਂ ਨਾਲ `npm init -y` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **Vite ਇੰਸਟਾਲ ਕਰੋ** ਇੱਕ ਆਧੁਨਿਕ ਬਿਲਡ ਟੂਲ ਵਜੋਂ ਤੇਜ਼ ਵਿਕਾਸ ਅਤੇ ਉਤਪਾਦਨ ਬਿਲਡ ਲਈ
-- **Prettier ਸ਼ਾਮਲ ਕਰੋ** ਆਟੋਮੈਟਿਕ ਕੋਡ ਫਾਰਮੈਟਿੰਗ ਲਈ ਅਤੇ ESLint ਕੋਡ ਗੁਣਵੱਤਾ ਜਾਂਚ ਲਈ
-- **ਵਰਤੋਂ ਕਰੋ** `--save-dev` ਫਲੈਗ ਇਨ੍ਹਾਂ ਨੂੰ ਸਿਰਫ ਵਿਕਾਸ-ਵਾਲੇ ਡਿਪੈਂਡੈਂਸੀਜ਼ ਵਜੋਂ ਮਾਰਕ ਕਰਨ ਲਈ
+- **Vite ਇੰਸਟਾਲ ਕਰੋ** ਇੱਕ ਆਧੁਨਿਕ ਬਿਲਡ ਟੂਲ ਵਧੀਆ ਵਿਕਾਸ ਅਤੇ ਉਤਪਾਦਨ ਬਿਲਡ ਲਈ
+- **Prettier ਸ਼ਾਮਲ ਕਰੋ** ਆਟੋਮੈਟਿਕ ਕੋਡ ਫਾਰਮੈਟਿੰਗ ਲਈ ਅਤੇ ESLint ਕੋਡ ਗੁਣਵੱਤਾ ਚੈੱਕ ਲਈ
+- **ਵਰਤੋਂ ਕਰੋ** `--save-dev` ਫਲੈਗ ਇਨ੍ਹਾਂ ਨੂੰ ਸਿਰਫ਼ ਵਿਕਾਸ-ਮਾਤਰ ਡਿਪੈਂਡੈਂਸੀਜ਼ ਵਜੋਂ ਮਾਰਕ ਕਰਨ ਲਈ
 
 ```bash
 # Step 3: Create project structure and files
@@ -353,60 +361,148 @@ npx vite
 - **ਮੁੱਢਲੀ HTML ਫਾਈਲ ਬਣਾਈ** ਸਹੀ ਦਸਤਾਵੇਜ਼ ਸਟ੍ਰਕਚਰ ਨਾਲ
 - **Vite ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕੀਤਾ** ਲਾਈਵ ਰੀਲੋਡਿੰਗ ਅਤੇ ਹਾਟ ਮੋਡਿਊਲ ਰਿਪਲੇਸਮੈਂਟ ਲਈ
 
-#### ਵੈਬ ਵਿਕਾਸ ਲਈ ਜ਼ਰੂਰੀ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ
+#### ਵੈਬ ਵਿਕਾਸ ਲਈ ਜ਼ਰੂਰੀ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲਸ
 
-| ਟੂਲ | ਉਦੇਸ਼ | ਕਿਉਂ ਤੁਹਾਨੂੰ ਇਸਦੀ ਲੋੜ ਹੈ |
+| ਟੂਲ | ਉਦੇਸ਼ | ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ |
 |------|---------|-----------------|
-| **[Git](https://git-scm.com/)** | ਵਰਜਨ ਕੰਟਰੋਲ | ਬਦਲਾਅ ਟ੍ਰੈਕ ਕਰੋ, ਹੋਰਾਂ ਨਾਲ ਸਹਿਯੋਗ ਕਰੋ, ਆਪਣਾ ਕੰਮ ਬੈਕਅੱਪ ਕਰੋ |
-| **[Node.js & npm](https://nodejs.org/)** | ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਨਟਾਈਮ ਅਤੇ ਪੈਕੇਜ ਮੈਨੇਜਮੈਂਟ | ਬ੍ਰਾਊਜ਼ਰਾਂ ਤੋਂ ਬਾਹਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਚਲਾਓ, ਆਧੁਨਿਕ ਵਿਕਾਸ ਟੂਲ ਇੰਸਟਾਲ ਕਰੋ |
-| **[Vite](https://vitejs.dev/)** | ਬਿਲਡ ਟੂਲ ਅਤੇ ਡੈਵ ਸਰਵਰ | ਹਾਟ ਮੋਡਿਊਲ ਰਿਪਲੇਸਮੈਂਟ ਨਾਲ ਤੇਜ਼ ਵਿਕਾਸ |
-| **[ESLint](https://eslint.org/)** | ਕੋਡ ਗੁਣਵੱਤਾ | ਆਪਣੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਲੱਭੋ ਅਤੇ ਠੀਕ ਕਰੋ |
-| **[Prettier](https://prettier.io/)** | ਕੋਡ ਫਾਰਮੈਟਿੰਗ | ਆਪਣੇ ਕੋਡ ਨੂੰ ਸਥਿਰ ਤੌਰ 'ਤੇ ਫਾਰਮੈਟ ਕੀਤਾ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਰੱਖੋ |
+| **[Git](https://git-scm.com/)** | ਵਰਜਨ ਕੰਟਰੋਲ | ਬਦਲਾਅ ਟ੍ਰੈਕ ਕਰੋ, ਹੋਰਾਂ ਨਾਲ ਸਹਿਯੋਗ ਕਰੋ, ਆਪਣਾ ਕੰਮ ਬੈਕਅਪ ਕਰੋ |
+| **[Node.js & npm](https://nodejs.org/)** | ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਨਟਾਈਮ ਅਤੇ ਪੈਕੇਜ ਮੈਨੇਜਮੈਂਟ | ਬ੍ਰਾਊਜ਼ਰਾਂ ਤੋਂ ਬਾਹਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਚਲਾਓ, ਆਧੁਨਿਕ ਵਿਕਾਸ ਟੂਲਸ ਇੰਸਟਾਲ ਕਰੋ |
+| **[Vite](https://vitejs.dev/)** | ਬਿਲਡ ਟੂਲ ਅਤੇ ਡਿਵ ਸਰਵਰ | ਹਾਟ ਮੋਡਿਊਲ ਰਿਪਲੇਸਮੈਂਟ ਨਾਲ ਤੇਜ਼ ਵਿਕਾਸ |
+| **[ESLint](https://eslint.org/)** | ਕੋਡ ਗੁਣਵੱਤਾ | ਤੁਹਾਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਲੱਭੋ ਅਤੇ ਠੀਕ ਕਰੋ |
+| **[Prettier](https://prettier.io/)** | ਕੋਡ ਫਾਰਮੈਟਿੰਗ | ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸਥਿਰ ਤੌਰ 'ਤੇ ਫਾਰਮੈਟ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਰੱਖੋ |
 
 #### ਪਲੇਟਫਾਰਮ-ਵਿਸ਼ੇਸ਼ ਵਿਕਲਪ
 
 **Windows:**
-- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ਆਧੁਨਿਕ, ਫੀਚਰ-ਰਿਚ ਟਰਮੀਨਲ
+- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ਆਧੁਨਿਕ, ਵਿਸਥਾਰਤ ਟਰਮੀਨਲ
 - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਕ੍ਰਿਪਟਿੰਗ ਵਾਤਾਵਰਣ
 - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - ਪਰੰਪਰਾਗਤ Windows ਕਮਾਂਡ ਲਾਈਨ
 
 **macOS:**
 - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - ਬਿਲਟ-ਇਨ ਟਰਮੀਨਲ ਐਪਲੀਕੇਸ਼ਨ
-- **[iTerm2](https://iterm2.com/)** - ਉੱਨਤ ਟਰਮੀਨਲ ਨਾਲ ਅਗਰਗਾਮੀ ਫੀਚਰ
+- **[iTerm2](https://iterm2.com/)** - ਵਿਸਥਾਰਤ ਟਰਮੀਨਲ ਉੱਨਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ
 
 **Linux:**
-- **[Bash](https://www.gnu.org/software/bash/)** 💻 - ਮਿਆਰੀ Linux ਸ਼ੈੱਲ
+- **[Bash](https://www.gnu.org/software/bash/)** 💻 - ਸਟੈਂਡਰਡ Linux ਸ਼ੈਲ
 - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - ਉੱਨਤ ਟਰਮੀਨਲ ਇਮੀਲੇਟਰ
 
 > 💻 = ਓਪਰੇਟਿੰਗ ਸਿਸਟਮ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਇੰਸਟਾਲ
 
-> 🎯 **ਸਿੱਖਣ ਦਾ ਰਾਹ**: ਬੁਨਿਆਦੀ ਕਮਾਂਡਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਜਿਵੇਂ `cd` (ਡਾਇਰੈਕਟਰੀ ਬਦਲੋ), `ls` ਜਾਂ `dir` (ਫਾਈਲਾਂ ਦੀ ਸੂਚੀ), ਅਤੇ `mkdir` (ਫੋਲਡਰ ਬਣਾਓ)। ਆਧੁਨਿਕ ਵਰਕਫਲੋ ਕਮਾਂਡਾਂ ਜਿਵੇਂ `npm install`, `git status`, ਅਤੇ `code .` (ਵਰਤਮਾਨ ਡਾਇਰੈਕਟਰੀ ਨੂੰ VS Code ਵਿੱਚ ਖੋਲ੍ਹਦਾ ਹੈ) ਨਾਲ ਅਭਿਆਸ ਕਰੋ। ਜਿਵੇਂ ਤੁਸੀਂ ਹੋਰ ਆਰਾਮਦਾਇਕ ਹੋ ਜਾਂਦੇ ਹੋ, ਤੁਸੀਂ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਹੋਰ ਅਗਰਗਾਮੀ ਕਮਾਂਡਾਂ ਅਤੇ ਆਟੋਮੇਸ਼ਨ ਤਕਨੀਕਾਂ ਨੂੰ ਸਿੱਖ ਲਵੋਗੇ।
+> 🎯 **ਸਿੱਖਣ ਦਾ ਰਾਹ**: ਬੁਨਿਆਦੀ ਕਮਾਂਡਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਜਿਵੇਂ `cd` (ਡਾਇਰੈਕਟਰੀ ਬਦਲੋ), `ls` ਜਾਂ `dir` (ਫਾਈਲਾਂ ਦੀ ਸੂਚੀ), ਅਤੇ `mkdir` (ਫੋਲਡਰ ਬਣਾਓ)। ਆਧੁਨਿਕ ਵਰਕਫਲੋ ਕਮਾਂਡਾਂ ਜਿਵੇਂ `npm install`, `git status`, ਅਤੇ `code .` (ਮੌਜੂਦਾ ਡਾਇਰੈਕਟਰੀ ਨੂੰ VS Code ਵਿੱਚ ਖੋਲ੍ਹੋ) ਨਾਲ ਅਭਿਆਸ ਕਰੋ। ਜਿਵੇਂ ਤੁਸੀਂ ਹੋਰ ਆਰਾਮਦਾਇਕ ਹੋ ਜਾਂਦੇ ਹੋ, ਤੁਸੀਂ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਹੋਰ ਉੱਨਤ ਕਮਾਂਡਾਂ ਅਤੇ ਆਟੋਮੇਸ਼ਨ ਤਕਨੀਕਾਂ ਨੂੰ ਸਿੱਖ ਲਵੋਗੇ।
+
+### ਦਸਤਾਵੇਜ਼ੀਕਰਨ: ਤੁਹਾਡਾ ਹਮੇਸ਼ਾ-ਉਪਲਬਧ ਸਿੱਖਣ ਵਾਲਾ ਮੰਤਰ
+
+ਚੰਗਾ, ਆਓ ਇੱਕ ਛੋਟਾ ਰਾਜ਼ ਸਾਂਝਾ ਕਰੀਏ ਜੋ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂਆਤੀ ਹੋਣ ਬਾਰੇ ਬਹੁਤ ਬਿਹਤਰ ਮਹਿਸੂਸ ਕਰੇਗਾ: ਸਭ ਤੋਂ ਅਨੁਭਵੀ ਡਿਵੈਲਪਰ ਆਪਣਾ ਬਹੁਤ ਸਾਰਾ ਸਮਾਂ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਪੜ੍ਹਨ ਵਿੱਚ ਬਿਤਾਉਂਦੇ ਹਨ। ਅਤੇ ਇਹ ਇਸ ਲਈ ਨਹੀਂ ਕਿ ਉਹ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਉਹ ਕੀ ਕਰ ਰਹੇ ਹਨ – ਇਹ ਅਸਲ ਵਿੱਚ ਬੁੱਧੀਮਾਨ ਹੋਣ ਦੀ ਨਿਸ਼ਾਨੀ ਹੈ!
 
-### ਦਸਤਾਵੇਜ਼: ਤੁਹਾਡਾ ਹਮੇਸ਼ਾ-ਉਪਲਬਧ ਸਿੱਖਣ ਵਾਲਾ ਮਾਸਟਰ
+ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਨੂੰ 24/7 ਉਪਲਬਧ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਧੀਰਜਵਾਨ, ਗਿਆਨਵਾਨ ਅਧਿਆਪਕਾਂ ਤੱਕ ਪਹੁੰਚ ਹੋਣ ਵਜੋਂ ਸੋਚੋ। 2 AM 'ਤੇ ਸਮੱਸਿਆ 'ਤੇ ਫਸੇ ਹੋ? ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਤੁਹਾਡੇ ਲਈ ਇੱਕ ਗਰਮ ਵਰਚੁਅਲ ਹੱਗ ਅਤੇ ਬਿਲਕੁਲ ਉਹ ਜਵਾਬ ਹੈ ਜਿਸ ਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ। ਕੁਝ ਠੰਡੇ ਨਵੇਂ ਫੀਚਰ ਬਾਰੇ ਸਿੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਿਸ ਬਾਰੇ ਹਰ ਕੋਈ ਗੱਲ ਕਰ ਰਿਹਾ ਹੈ? ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਤੁਹਾਡੇ ਲਈ ਪਿੱਠ ਹੈ ਸਟੈਪ-ਬਾਈ-ਸਟੈਪ ਉਦਾਹਰਨਾਂ ਨਾਲ। ਸਮਝਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ ਕਿ ਕੁਝ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ? ਤੁਸੀਂ ਅਨੁਮਾਨ ਲਗਾਇਆ – ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਇਸਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਸਮਝਾਉਣ ਲਈ ਤਿਆਰ ਹੈ ਜੋ ਅੰਤ ਵਿੱਚ ਇਸਨੂੰ ਕਲਿੱਕ ਕਰਦਾ ਹੈ!
 
-ਚੰਗਾ, ਆਓ ਇੱਕ ਛੋਟਾ ਰਾਜ਼ ਸਾਂਝਾ ਕਰੀਏ ਜੋ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂਆਤੀ ਹੋਣ ਬਾਰੇ ਬਹੁਤ ਬਿਹਤਰ ਮਹਿਸੂਸ ਕਰੇਗਾ: ਸਭ ਤੋਂ ਅਨੁਭਵੀ ਵਿਕਾਸਕਰਤਾ ਆਪਣਾ ਬਹੁਤ ਸਾਰਾ ਸਮਾਂ ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹਨ ਵਿੱਚ ਬਿਤਾਉਂਦੇ ਹਨ। ਅਤੇ ਇਹ ਇਸ ਲਈ ਨਹੀਂ ਕਿ ਉਹਨਾਂ ਨੂੰ ਪਤਾ ਨਹੀਂ ਕਿ ਉਹ ਕੀ ਕਰ ਰਹੇ ਹਨ – ਇਹ ਅਸਲ ਵਿੱਚ ਬੁੱਧੀਮਾਨ ਹੋਣ ਦੀ ਨਿਸ਼ਾਨੀ ਹੈ!
+ਇਹ ਕੁਝ ਹੈ ਜਿਸ ਨੇ ਮੇਰੇ ਨਜ਼ਰੀਏ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ: ਵੈਬ ਵਿਕਾਸ ਦੀ ਦੁਨੀਆ ਬਹੁਤ ਤੇਜ਼ੀ ਨਾਲ ਅੱਗੇ ਵਧਦੀ ਹੈ, ਅਤੇ ਕੋਈ ਵੀ (ਮੈਂ ਬਿਲਕੁਲ ਕੋਈ ਵੀ ਨਹੀਂ!) ਸਭ ਕੁਝ ਯਾਦ ਨਹੀਂ ਰੱਖਦਾ। ਮੈਂ 15+ ਸਾਲਾਂ ਦੇ ਅਨੁਭਵ ਵਾਲੇ ਸੀਨੀਅਰ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਬੁਨਿਆਦੀ ਸਿੰਟੈਕਸ ਦੀ ਖੋਜ ਕਰਦੇ ਦੇਖਿਆ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਕੀ? ਇਹ ਸ਼ਰਮਨਾਕ ਨਹੀਂ ਹੈ – ਇਹ ਸਮਾਰਟ ਹੈ! ਇਹ ਪੂਰੀ ਯਾਦਸ਼ਤ ਹੋਣ ਬਾਰੇ ਨਹੀਂ ਹੈ; ਇਹ ਤੇਜ਼ੀ ਨਾਲ ਭਰੋਸੇਮੰਦ ਜਵਾਬ ਲੱਭਣ ਅਤੇ ਇਹ ਸਮਝਣ ਬਾਰੇ ਹੈ ਕਿ ਉਨ੍ਹਾਂ ਨੂੰ ਕਿਵੇਂ ਅਤੇ ਕਦੋਂ ਲਾਗੂ ਕਰਨਾ ਹੈ।
 
-ਦਸਤਾਵੇਜ਼ ਨੂੰ 24/7 ਉਪਲਬਧ ਸਭ ਤੋਂ ਧੀਰਜਵਾਨ, ਗਿਆਨਵਾਨ ਅਧਿਆਪਕਾਂ ਤੱਕ ਪਹੁੰਚ ਹੋਣ ਵਾਂਗ ਸੋਚੋ। ਰਾਤ 2 ਵਜੇ ਕਿਸੇ ਸਮੱਸਿਆ 'ਤੇ ਫਸੇ ਹੋ? ਦਸਤਾਵੇਜ਼ ਉੱਥੇ ਹੈ ਇੱਕ ਗਰਮ ਵਰਚੁਅਲ ਹੱਗ ਅਤੇ ਬਿਲਕੁਲ ਉਹ ਜਵਾਬ ਦੇ ਨਾਲ ਜੋ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ। ਕੁਝ ਠੰਡੇ ਨਵੇਂ ਫੀਚਰ ਬਾਰੇ ਸਿੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਿਸ ਬਾਰੇ ਹਰ ਕੋਈ ਗੱਲ ਕਰ ਰਿਹਾ ਹੈ? ਦਸਤਾਵੇਜ਼ ਤੁਹਾਡੀ ਪਿੱਠ ਦੇ ਨਾਲ ਹੈ ਕਦਮ-ਦਰ-ਕਦਮ ਉਦਾਹਰਣਾਂ ਦੇ ਨਾਲ। ਸਮਝਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ ਕਿ ਕੁਝ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ? ਤੁਸੀਂ ਅਨੁਮਾਨ ਲਗਾ ਸਕਦੇ ਹੋ – ਦਸਤਾਵੇਜ਼ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸਮਝਾਉਣ ਲਈ ਤਿਆਰ ਹੈ ਕਿ ਇਹ ਆਖਿਰਕਾਰ ਕਲਿਕ ਕਰਦਾ ਹੈ!
+**ਇਥੇ ਹੈ ਜਿੱਥੇ ਅਸਲ ਜਾਦੂ ਹੁੰਦਾ ਹੈ:**
 
-ਇਹ ਹੈ ਜੋ ਮੇਰੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ: ਵੈਬ ਵਿਕਾਸ ਦੀ ਦੁਨੀਆ ਬਹੁਤ ਤੇਜ਼ੀ ਨਾਲ ਅੱਗੇ ਵਧਦੀ ਹੈ, ਅਤੇ ਕੋਈ ਵੀ (ਮੈਂ ਮਤਲਬ ਬਿਲਕੁਲ ਕੋਈ ਵੀ ਨਹੀਂ!) ਸਾਰਾ ਕੁਝ ਯਾਦ ਨਹੀਂ ਰੱਖਦਾ। ਮੈਂ 15+ ਸਾਲਾਂ ਦੇ ਅਨੁਭਵ ਵਾਲੇ ਸੀਨੀਅਰ ਵਿਕਾਸਕਰਤਾਵਾਂ ਨੂੰ ਬੁਨਿਆਦੀ ਸਿੰਟੈਕਸ ਦੀ ਖੋਜ ਕਰਦੇ ਦੇਖਿਆ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਕੀ? ਇਹ ਸ਼ਰਮਨਾਕ ਨਹੀਂ ਹੈ – ਇਹ ਸਮਾਰਟ ਹੈ! ਇਹ ਬਹੁਤ ਵਧੀਆ ਯਾਦ ਰੱਖਣ ਬਾਰੇ ਨਹੀਂ ਹੈ; ਇਹ ਤੇਜ਼ੀ ਨਾਲ ਭਰੋਸੇਯੋਗ ਜਵਾਬ ਲੱਭਣ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਸਮਝਣ ਬਾਰੇ ਹੈ।
+ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਆਪਣਾ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਪੜ੍ਹਨ ਵਿੱਚ ਬਿਤਾਉਂਦੇ ਹਨ – ਇਹ ਇਸ ਲਈ ਨਹੀਂ ਕਿ ਉਹ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਉਹ ਕੀ ਕਰ ਰਹੇ ਹਨ, ਸਗੋਂ ਕਿਉਂਕਿ ਵੈਬ ਵਿਕਾਸ ਦਾ ਦ੍ਰਿਸ਼ ਬਹੁਤ ਤੇਜ਼ੀ ਨਾਲ ਵਿਕਸਿਤ ਹੁੰਦਾ ਹੈ ਕਿ ਅਪ-ਟੂ-ਡੇਟ ਰਹਿਣ ਲਈ ਲਗਾਤਾਰ ਸਿੱਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਸ਼ਾਨਦਾਰ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ *ਕਿਵੇਂ* ਕੁਝ ਵਰਤਣਾ ਹੈ, ਸਗੋਂ *ਕਿਉਂ* ਅਤੇ *ਕਦੋਂ* ਵਰਤਣਾ ਹੈ, ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
 
-**ਇੱਥੇ ਅਸਲ ਜਾਦੂ ਹੁੰਦਾ ਹੈ:**
+#### ਜ਼ਰੂਰੀ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਸਰੋਤ
 
-ਪੇਸ਼ੇਵਰ ਵਿਕਾਸਕਰਤਾ ਆਪਣਾ ਬਹੁਤ ਸਾਰਾ ਸਮਾਂ ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹਨ ਵਿੱਚ ਬਿਤਾਉਂਦੇ ਹਨ – ਇਹ ਇਸ ਲਈ ਨਹੀਂ ਕਿ ਉਹਨਾਂ ਨੂੰ ਪਤਾ ਨਹੀਂ ਕਿ ਉਹ ਕੀ ਕਰ ਰਹੇ ਹਨ, ਪਰ ਕਿਉਂਕਿ ਵੈਬ ਵਿਕਾਸ ਦਾ ਦ੍ਰਿਸ਼ਯ ਬਹੁਤ ਤੇਜ਼ੀ ਨਾਲ ਵਿਕਸਿਤ ਹੁੰਦਾ ਹੈ ਕਿ ਅਪ-ਟੂ-ਡੇਟ ਰਹਿਣ ਲਈ ਲਗਾਤਾਰ ਸਿੱਖਣਾ ਜ਼ਰੂਰੀ ਹੈ। ਸ਼ਾਨਦ
-- ਯੂਟਿਊਬ 'ਤੇ ਕੁਝ ਸ਼ੁਰੂਆਤੀ ਪੱਧਰ ਦੇ ਕੋਡਿੰਗ ਵੀਡੀਓਜ਼ ਦੇਖੋ। ਬਹੁਤ ਸਾਰੇ ਵਧੀਆ ਕ੍ਰੀਏਟਰ ਹਨ ਜੋ ਯਾਦ ਰੱਖਦੇ ਹਨ ਕਿ ਸ਼ੁਰੂਆਤ ਕਰਨਾ ਕਿਵੇਂ ਹੁੰਦਾ ਹੈ।  
-- ਸਥਾਨਕ ਮਿਲਣ-ਜੁਲਣ ਵਾਲੇ ਸਮੂਹਾਂ ਜਾਂ ਆਨਲਾਈਨ ਕਮਿਊਨਿਟੀਆਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣ ਬਾਰੇ ਸੋਚੋ। ਮੈਨੂੰ ਵਿਸ਼ਵਾਸ ਕਰੋ, ਡਿਵੈਲਪਰ ਨਵੇਂ ਆਏ ਲੋਕਾਂ ਦੀ ਮਦਦ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹਨ!
+**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
+- ਵੈਬ ਤਕਨਾਲੋਜੀ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਲਈ ਸੋਨੇ ਦਾ ਮਾਨਕ
+- HTML, CSS, ਅਤੇ JavaScript ਲਈ ਵਿਸਥਾਰਤ ਗਾਈਡ
+- ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਹੈ
+- ਵਿਹੰਗਮ ਉਦਾਹਰਨਾਂ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਡੈਮੋਜ਼ ਦੀ ਵਿਸ਼ੇ
+## ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਅਧਿਐਨ
 
-> 🎯 **ਸੁਣੋ, ਇਹ ਗੱਲ ਯਾਦ ਰੱਖਣੀ ਹੈ**: ਤੁਹਾਨੂੰ ਇੱਕ ਰਾਤ ਵਿੱਚ ਕੋਡਿੰਗ ਦੇ ਜਾਦੂਗਰ ਬਣਨ ਦੀ ਉਮੀਦ ਨਹੀਂ ਹੈ! ਇਸ ਸਮੇਂ, ਤੁਸੀਂ ਇਸ ਨਵੇਂ ਸ਼ਾਨਦਾਰ ਜਗਤ ਨੂੰ ਜਾਣਨ ਦੀ ਸ਼ੁਰੂਆਤ ਕਰ ਰਹੇ ਹੋ ਜਿਸਦਾ ਤੁਸੀਂ ਹਿੱਸਾ ਬਣਨ ਵਾਲੇ ਹੋ। ਆਪਣਾ ਸਮਾਂ ਲਵੋ, ਇਸ ਯਾਤਰਾ ਦਾ ਆਨੰਦ ਲਵੋ, ਅਤੇ ਯਾਦ ਰੱਖੋ – ਹਰ ਇੱਕ ਡਿਵੈਲਪਰ ਜਿਸਦੀ ਤੁਸੀਂ ਪ੍ਰਸ਼ੰਸਾ ਕਰਦੇ ਹੋ, ਕਦੇ ਤੁਹਾਡੇ ਵਰਗੇ ਹੀ ਸਥਿਤੀ ਵਿੱਚ ਬੈਠੇ ਸਨ, ਉਤਸ਼ਾਹਿਤ ਅਤੇ ਸ਼ਾਇਦ ਥੋੜ੍ਹੇ ਘਬਰਾਏ ਹੋਏ। ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਹੈ, ਅਤੇ ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਸਹੀ ਕਰ ਰਹੇ ਹੋ!
+**ਆਪਣਾ ਸਮਾਂ ਲਓ, ਖੋਜ ਕਰੋ ਅਤੇ ਇਸ ਦਾ ਆਨੰਦ ਮਾਣੋ!**
+
+ਤੁਸੀਂ ਅੱਜ ਕਾਫ਼ੀ ਕੁਝ ਸਿੱਖਿਆ ਹੈ, ਅਤੇ ਇਹ ਗਰਵ ਕਰਨ ਵਾਲੀ ਗੱਲ ਹੈ! ਹੁਣ ਮਜ਼ੇਦਾਰ ਹਿੱਸਾ ਆਉਂਦਾ ਹੈ – ਉਹ ਵਿਸ਼ੇ ਖੋਜਣ ਜੋ ਤੁਹਾਡੀ ਦਿਲਚਸਪੀ ਨੂੰ ਜਗਾਉਂਦੇ ਹਨ। ਯਾਦ ਰੱਖੋ, ਇਹ ਘਰ ਦਾ ਕੰਮ ਨਹੀਂ ਹੈ – ਇਹ ਇੱਕ ਸਫ਼ਰ ਹੈ!
+
+**ਜੋ ਤੁਹਾਨੂੰ ਰੁਝਾਉਂਦਾ ਹੈ ਉਸ ਵਿੱਚ ਡੁੱਬੋ:**
+
+**ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਨਾਲ ਹੱਥ-ਪੈਰ ਮਾਰੋ:**
+- ਉਹ 2-3 ਭਾਸ਼ਾਵਾਂ ਦੀਆਂ ਅਧਿਕਾਰਤ ਵੈਬਸਾਈਟਾਂ 'ਤੇ ਜਾਓ ਜਿਨ੍ਹਾਂ ਨੇ ਤੁਹਾਡਾ ਧਿਆਨ ਖਿੱਚਿਆ। ਹਰ ਇੱਕ ਦੀ ਆਪਣੀ ਵਿਸ਼ੇਸ਼ਤਾ ਅਤੇ ਕਹਾਣੀ ਹੁੰਦੀ ਹੈ!
+- ਕੁਝ ਆਨਲਾਈਨ ਕੋਡਿੰਗ ਪਲੇਗਰਾਊਂਡ ਜਿਵੇਂ [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ਜਾਂ [Replit](https://replit.com/) ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਪ੍ਰਯੋਗ ਕਰਨ ਤੋਂ ਡਰੋ ਨਾ – ਤੁਸੀਂ ਕੁਝ ਵੀ ਖਰਾਬ ਨਹੀਂ ਕਰ ਸਕਦੇ!
+- ਪੜ੍ਹੋ ਕਿ ਤੁਹਾਡੀ ਮਨਪਸੰਦ ਭਾਸ਼ਾ ਕਿਵੇਂ ਬਣੀ। ਸੱਚਮੁੱਚ, ਕੁਝ ਕਹਾਣੀਆਂ ਬਹੁਤ ਦਿਲਚਸਪ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਇਹ ਤੁਹਾਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਕਿ ਭਾਸ਼ਾਵਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
+
+**ਆਪਣੇ ਨਵੇਂ ਟੂਲਾਂ ਨਾਲ ਆਰਾਮਦਾਇਕ ਹੋਵੋ:**
+- Visual Studio Code ਡਾਊਨਲੋਡ ਕਰੋ ਜੇਕਰ ਤੁਸੀਂ ਅਜੇ ਤੱਕ ਨਹੀਂ ਕੀਤਾ – ਇਹ ਮੁਫ਼ਤ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਇਹ ਪਸੰਦ ਆਵੇਗਾ!
+- Extensions marketplace 'ਤੇ ਕੁਝ ਮਿੰਟ ਬਿਤਾਓ। ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਐਡੀਟਰ ਲਈ ਇੱਕ ਐਪ ਸਟੋਰ ਵਰਗਾ ਹੈ!
+- ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ Developer Tools ਖੋਲ੍ਹੋ ਅਤੇ ਸਿਰਫ਼ ਕਲਿਕ ਕਰੋ। ਹਰ ਚੀਜ਼ ਨੂੰ ਸਮਝਣ ਦੀ ਚਿੰਤਾ ਨਾ ਕਰੋ – ਸਿਰਫ਼ ਇਸ ਨਾਲ ਜਾਣੂ ਹੋਵੋ ਕਿ ਉੱਥੇ ਕੀ ਹੈ।
+
+**ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ:**
+- ਕੁਝ ਡਿਵੈਲਪਰ ਕਮਿਊਨਿਟੀਆਂ ਨੂੰ [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ਜਾਂ [GitHub](https://github.com/) 'ਤੇ ਫਾਲੋ ਕਰੋ। ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਕਮਿਊਨਿਟੀ ਨਵਾਂ ਸ਼ੁਰੂ ਕਰਨ ਵਾਲਿਆਂ ਲਈ ਬਹੁਤ ਸਵਾਗਤਯੋਗ ਹੈ!
+- YouTube 'ਤੇ ਕੁਝ ਸ਼ੁਰੂਆਤੀ-ਦੋਸਤਾਨਾ ਕੋਡਿੰਗ ਵੀਡੀਓਜ਼ ਦੇਖੋ। ਉੱਥੇ ਬਹੁਤ ਸਾਰੇ ਵਧੀਆ ਕ੍ਰੀਏਟਰ ਹਨ ਜੋ ਯਾਦ ਕਰਦੇ ਹਨ ਕਿ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਾ ਹੋਣਾ ਕਿਵੇਂ ਹੁੰਦਾ ਹੈ।
+- ਸਥਾਨਕ ਮੀਟਅੱਪਸ ਜਾਂ ਆਨਲਾਈਨ ਕਮਿਊਨਿਟੀਆਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣ ਬਾਰੇ ਸੋਚੋ। ਮੈਨੂੰ ਵਿਸ਼ਵਾਸ ਹੈ, ਡਿਵੈਲਪਰ ਨਵਾਂ ਸ਼ੁਰੂ ਕਰਨ ਵਾਲਿਆਂ ਦੀ ਮਦਦ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹਨ!
+
+> 🎯 **ਸੁਣੋ, ਇਹ ਹੈ ਜੋ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਯਾਦ ਰੱਖੋ**: ਤੁਹਾਨੂੰ ਇੱਕ ਰਾਤ ਵਿੱਚ ਕੋਡਿੰਗ ਦੇ ਮਾਹਰ ਬਣਨ ਦੀ ਉਮੀਦ ਨਹੀਂ ਹੈ! ਇਸ ਸਮੇਂ, ਤੁਸੀਂ ਸਿਰਫ਼ ਇਸ ਸ਼ਾਨਦਾਰ ਨਵੇਂ ਸੰਸਾਰ ਨੂੰ ਜਾਣ ਰਹੇ ਹੋ ਜਿਸਦਾ ਤੁਸੀਂ ਹਿੱਸਾ ਬਣਨ ਵਾਲੇ ਹੋ। ਆਪਣਾ ਸਮਾਂ ਲਓ, ਸਫ਼ਰ ਦਾ ਆਨੰਦ ਮਾਣੋ, ਅਤੇ ਯਾਦ ਰੱਖੋ – ਹਰ ਇੱਕ ਡਿਵੈਲਪਰ ਜਿਸਦੀ ਤੁਸੀਂ ਪ੍ਰਸ਼ੰਸਾ ਕਰਦੇ ਹੋ, ਇੱਕ ਵਾਰ ਤੁਹਾਡੇ ਜਿਵੇਂ ਹੀ ਸੀ, ਉਤਸ਼ਾਹਿਤ ਅਤੇ ਸ਼ਾਇਦ ਥੋੜਾ ਜਿਹਾ ਘਬਰਾਇਆ ਹੋਇਆ। ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਹੈ, ਅਤੇ ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਸਹੀ ਕਰ ਰਹੇ ਹੋ।
 
 
 
 ## ਅਸਾਈਨਮੈਂਟ
 
-[ਡੌਕਸ ਪੜ੍ਹੋ](assignment.md)
+[Docs ਪੜ੍ਹਨਾ](assignment.md)
+
+> 💡 **ਤੁਹਾਡੇ ਅਸਾਈਨਮੈਂਟ ਲਈ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਇਸ਼ਾਰਾ**: ਮੈਂ ਬਿਲਕੁਲ ਪਸੰਦ ਕਰਾਂਗਾ ਕਿ ਤੁਸੀਂ ਕੁਝ ਟੂਲਾਂ ਦੀ ਖੋਜ ਕਰੋ ਜੋ ਅਸੀਂ ਅਜੇ ਤੱਕ ਕਵਰ ਨਹੀਂ ਕੀਤੇ! ਉਹ ਐਡੀਟਰ, ਬ੍ਰਾਊਜ਼ਰ, ਅਤੇ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲਾਂ ਨੂੰ ਛੱਡ ਦਿਓ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਗੱਲ ਕੀਤੀ ਹੈ – ਉੱਥੇ ਇੱਕ ਪੂਰਾ ਸ਼ਾਨਦਾਰ ਬ੍ਰਹਿਮੰਡ ਹੈ ਜੋ ਅਦਭੁਤ ਵਿਕਾਸ ਟੂਲਾਂ ਨਾਲ ਭਰਿਆ ਹੋਇਆ ਹੈ ਜੋ ਸਿਰਫ਼ ਖੋਜੇ ਜਾਣ ਦੀ ਉਡੀਕ ਕਰ ਰਹੇ ਹਨ। ਉਹਨਾਂ ਦੀ ਭਾਲ ਕਰੋ ਜੋ ਸਰਗਰਮ ਤੌਰ 'ਤੇ ਰੱਖੇ ਗਏ ਹਨ ਅਤੇ ਜ਼ਿੰਦਾਦਿਲ, ਮਦਦਗਾਰ ਕਮਿਊਨਿਟੀਆਂ ਹਨ (ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਟਿਊਟੋਰਿਅਲ ਅਤੇ ਸਭ ਤੋਂ ਸਹਾਇਕ ਲੋਕਾਂ ਵਾਲੇ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਅਣਮੁੱਲ ਹੋ ਜਾਂਦੇ ਹੋ ਅਤੇ ਤੁਹਾਨੂੰ ਇੱਕ ਦੋਸਤਾਨਾ ਹੱਥ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ)।
+
+---
+
+## 🚀 ਤੁਹਾਡਾ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਫ਼ਰ ਦਾ ਟਾਈਮਲਾਈਨ
+
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਉਹ 2-3 ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਦੀਆਂ ਵੈਬਸਾਈਟਾਂ ਬੁੱਕਮਾਰਕ ਕਰੋ ਜਿਨ੍ਹਾਂ ਨੇ ਤੁਹਾਡਾ ਧਿਆਨ ਖਿੱਚਿਆ
+- [ ] Visual Studio Code ਡਾਊਨਲੋਡ ਕਰੋ ਜੇਕਰ ਤੁਸੀਂ ਅਜੇ ਤੱਕ ਨਹੀਂ ਕੀਤਾ
+- [ ] ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ DevTools (F12) ਖੋਲ੍ਹੋ ਅਤੇ ਕਿਸੇ ਵੀ ਵੈਬਸਾਈਟ 'ਤੇ ਕਲਿਕ ਕਰੋ
+- [ ] ਇੱਕ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ (Dev.to, Reddit r/webdev, ਜਾਂ Stack Overflow)
+
+### ⏰ **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪੋਸਟ-ਪਾਠ ਕਵੀਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਆਪਣੇ ਜਵਾਬਾਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ
+- [ ] GitHub Copilot ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ VS Code ਸੈਟਅੱਪ ਕਰੋ
+- [ ] 2 ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਆਨਲਾਈਨ "Hello World" ਉਦਾਹਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ
+- [ ] YouTube 'ਤੇ "Day in the Life of a Developer" ਵੀਡੀਓ ਦੇਖੋ
+- [ ] ਆਪਣੀ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾ ਡਿਟੈਕਟਿਵ ਵਰਕ ਸ਼ੁਰੂ ਕਰੋ (ਚੁਣੌਤੀ ਤੋਂ)
+
+### 📅 **ਤੁਹਾਡਾ ਇੱਕ ਹਫ਼ਤੇ ਦਾ ਸਫ਼ਰ**
+- [ ] ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰੋ ਅਤੇ 3 ਨਵੇਂ ਵਿਕਾਸ ਟੂਲਾਂ ਦੀ ਖੋਜ ਕਰੋ
+- [ ] 5 ਡਿਵੈਲਪਰਾਂ ਜਾਂ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਖਾਤਿਆਂ ਨੂੰ ਸੋਸ਼ਲ ਮੀਡੀਆ 'ਤੇ ਫਾਲੋ ਕਰੋ
+- [ ] CodePen ਜਾਂ Replit 'ਤੇ ਕੁਝ ਛੋਟਾ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ (ਭਾਵੇਂ ਸਿਰਫ਼ "Hello, [ਤੁਹਾਡਾ ਨਾਮ]!" ਹੋਵੇ!)
+- [ ] ਕਿਸੇ ਡਿਵੈਲਪਰ ਦੇ ਬਲੌਗ ਪੋਸਟ ਨੂੰ ਪੜ੍ਹੋ ਜਿਸ ਵਿੱਚ ਉਹਨਾਂ ਦੇ ਕੋਡਿੰਗ ਸਫ਼ਰ ਬਾਰੇ ਦੱਸਿਆ ਗਿਆ ਹੋਵੇ
+- [ ] ਇੱਕ ਵਰਚੁਅਲ ਮੀਟਅੱਪ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ ਜਾਂ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਟਾਕ ਦੇਖੋ
+- [ ] ਆਨਲਾਈਨ ਟਿਊਟੋਰਿਅਲ ਨਾਲ ਆਪਣੀ ਚੁਣੀ ਹੋਈ ਭਾਸ਼ਾ ਸਿੱਖਣ ਸ਼ੁਰੂ ਕਰੋ
+
+### 🗓️ **ਤੁਹਾਡਾ ਇੱਕ ਮਹੀਨੇ ਦਾ ਬਦਲਾਅ**
+- [ ] ਆਪਣਾ ਪਹਿਲਾ ਛੋਟਾ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ (ਭਾਵੇਂ ਇੱਕ ਸਧਾਰਨ ਵੈਬਪੇਜ ਹੀ ਕਿਉਂ ਨਾ ਹੋਵੇ!)
+- [ ] ਇੱਕ ਓਪਨ-ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਯੋਗਦਾਨ ਦਿਓ (ਡਾਕੂਮੈਂਟੇਸ਼ਨ ਫਿਕਸਾਂ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰੋ)
+- [ ] ਕਿਸੇ ਨੂੰ ਮਦਦ ਦਿਓ ਜੋ ਸਿਰਫ਼ ਆਪਣਾ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਫ਼ਰ ਸ਼ੁਰੂ ਕਰ ਰਿਹਾ ਹੈ
+- [ ] ਆਪਣੀ ਡਿਵੈਲਪਰ ਪੋਰਟਫੋਲਿਓ ਵੈਬਸਾਈਟ ਬਣਾਓ
+- [ ] ਸਥਾਨਕ ਡਿਵੈਲਪਰ ਕਮਿਊਨਿਟੀਆਂ ਜਾਂ ਅਧਿਐਨ ਸਮੂਹਾਂ ਨਾਲ ਜੁੜੋ
+- [ ] ਆਪਣਾ ਅਗਲਾ ਸਿੱਖਣ ਦਾ ਮੀਲ ਪੱਥਰ ਯੋਜਨਾ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੋ
+
+### 🎯 **ਅੰਤਮ ਵਿਚਾਰ-ਵਿਮਰਸ਼ ਚੈੱਕ-ਇਨ**
+
+**ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਇੱਕ ਪਲ ਲਓ ਮਨਾਉਣ ਲਈ:**
+- ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਬਾਰੇ ਅੱਜ ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਰੁਝਾਉਣ ਵਾਲੀ ਗੱਲ ਕੀ ਸੀ?
+- ਕਿਹੜਾ ਟੂਲ ਜਾਂ ਧਾਰਨਾ ਤੁਸੀਂ ਪਹਿਲਾਂ ਖੋਜਣਾ ਚਾਹੁੰਦੇ ਹੋ?
+- ਇਸ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਸਫ਼ਰ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਬਾਰੇ ਤੁਹਾਨੂੰ ਕਿਵੇਂ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ?
+- ਇੱਕ ਸਵਾਲ ਜੋ ਤੁਸੀਂ ਇਸ ਸਮੇਂ ਕਿਸੇ ਡਿਵੈਲਪਰ ਨੂੰ ਪੁੱਛਣਾ ਚਾਹੁੰਦੇ ਹੋ?
+
+```mermaid
+journey
+    title Your Confidence Building Journey
+    section Today
+      Curious: 3: You
+      Overwhelmed: 4: You
+      Excited: 5: You
+    section This Week
+      Exploring: 4: You
+      Learning: 5: You
+      Connecting: 4: You
+    section Next Month
+      Building: 5: You
+      Confident: 5: You
+      Helping Others: 5: You
+```
 
-> 💡 **ਤੁਹਾਡੇ ਅਸਾਈਨਮੈਂਟ ਲਈ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਇਸ਼ਾਰਾ**: ਮੈਨੂੰ ਬਹੁਤ ਖੁਸ਼ੀ ਹੋਵੇਗੀ ਜੇ ਤੁਸੀਂ ਕੁਝ ਉਹ ਟੂਲ ਖੋਜੋ ਜੋ ਅਸੀਂ ਅਜੇ ਤੱਕ ਕਵਰ ਨਹੀਂ ਕੀਤੇ! ਉਹ ਐਡੀਟਰ, ਬ੍ਰਾਊਜ਼ਰ, ਅਤੇ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ ਛੱਡ ਦਿਓ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਗੱਲ ਕੀਤੀ ਹੈ – ਉੱਥੇ ਇੱਕ ਪੂਰਾ ਸ਼ਾਨਦਾਰ ਜਹਾਨ ਹੈ ਜਿੱਥੇ ਅਦਭੁਤ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲ ਤੁਹਾਡਾ ਇੰਤਜ਼ਾਰ ਕਰ ਰਹੇ ਹਨ। ਉਹ ਟੂਲ ਲੱਭੋ ਜੋ ਸਰਗਰਮ ਤੌਰ 'ਤੇ ਰੱਖੇ ਗਏ ਹਨ ਅਤੇ ਜਿਨ੍ਹਾਂ ਦੀਆਂ ਕਮਿਊਨਿਟੀਆਂ ਜੀਵੰਤ ਅਤੇ ਸਹਾਇਕ ਹਨ (ਇਹ ਟੂਲ ਆਮ ਤੌਰ 'ਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਟਿਊਟੋਰਿਅਲ ਅਤੇ ਸਭ ਤੋਂ ਸਹਾਇਕ ਲੋਕਾਂ ਨਾਲ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਅਣਜਾਣੇ ਤੌਰ 'ਤੇ ਫਸ ਜਾਂਦੇ ਹੋ ਅਤੇ ਤੁਹਾਨੂੰ ਮਿੱਤਰਤਾਪੂਰਵਕ ਮਦਦ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ)।
+> 🌟 **ਯਾਦ ਰੱਖੋ**: ਹਰ ਮਾਹਰ ਇੱਕ ਵਾਰ ਸ਼ੁਰੂਆਤੀ ਸੀ। ਹਰ ਸੀਨੀਅਰ ਡਿਵੈਲਪਰ ਇੱਕ ਵਾਰ ਬਿਲਕੁਲ ਤੁਹਾਡੇ ਜਿਵੇਂ ਮਹਿਸੂਸ ਕਰਦਾ ਸੀ – ਉਤਸ਼ਾਹਿਤ, ਸ਼ਾਇਦ ਥੋੜਾ ਜਿਹਾ ਘਬਰਾਇਆ ਹੋਇਆ, ਅਤੇ ਨਿਸ਼ਚਿਤ ਤੌਰ 'ਤੇ ਇਹ ਜਾਣਨ ਲਈ ਉਤਸੁਕ ਕਿ ਕੀ ਸੰਭਵ ਹੈ। ਤੁਸੀਂ ਸ਼ਾਨਦਾਰ ਸੰਗਤ ਵਿੱਚ ਹੋ, ਅਤੇ ਇਹ ਸਫ਼ਰ ਅਦਭੁਤ ਹੋਣ ਵਾਲਾ ਹੈ। ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੀ ਸ਼ਾਨਦਾਰ ਦੁਨੀਆ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ! 🎉
 
 ---
 
-**ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤੀ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/1-getting-started-lessons/2-github-basics/README.md b/translations/pa/1-getting-started-lessons/2-github-basics/README.md
index 3bfe14395d..a285ba0a39 100644
--- a/translations/pa/1-getting-started-lessons/2-github-basics/README.md
+++ b/translations/pa/1-getting-started-lessons/2-github-basics/README.md
@@ -1,52 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "acad15f3164cd6348e065ff38619aae9",
-  "translation_date": "2025-10-22T17:38:22+00:00",
+  "original_hash": "0fe3ff66299b447f1c8cb34dcbf0c5ef",
+  "translation_date": "2025-11-03T16:20:56+00:00",
   "source_file": "1-getting-started-lessons/2-github-basics/README.md",
   "language_code": "pa"
 }
 -->
-# GitHub ਦਾ ਪਰਿਚਯ
+# GitHub ਦਾ ਪਰਚੇ
 
-ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਭਵਿੱਖ ਦੇ ਡਿਵੈਲਪਰ! 👋 ਕੀ ਤੁਸੀਂ ਦੁਨੀਆ ਭਰ ਦੇ ਲੱਖਾਂ ਕੋਡਰਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣ ਲਈ ਤਿਆਰ ਹੋ? ਮੈਂ ਤੁਹਾਨੂੰ GitHub ਨਾਲ ਜਾਣੂ ਕਰਵਾਉਣ ਲਈ ਬਹੁਤ ਉਤਸ਼ਾਹਿਤ ਹਾਂ - ਇਸਨੂੰ ਪ੍ਰੋਗਰਾਮਰਾਂ ਲਈ ਸੋਸ਼ਲ ਮੀਡੀਆ ਪਲੇਟਫਾਰਮ ਵਜੋਂ ਸੋਚੋ, ਪਰ ਦੁਪਹਿਰ ਦੇ ਖਾਣੇ ਦੀਆਂ ਫੋਟੋਆਂ ਸਾਂਝੀਆਂ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਕੋਡ ਸਾਂਝਾ ਕਰ ਰਹੇ ਹਾਂ ਅਤੇ ਇਕੱਠੇ ਮਿਲ ਕੇ ਸ਼ਾਨਦਾਰ ਚੀਜ਼ਾਂ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਾਂ!
+ਹੈਲੋ, ਭਵਿੱਖ ਦੇ ਡਿਵੈਲਪਰ! 👋 ਤਿਆਰ ਹੋ ਜਾਓ ਦੁਨੀਆ ਭਰ ਦੇ ਲੱਖਾਂ ਕੋਡਰਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣ ਲਈ? ਮੈਂ ਤੁਹਾਨੂੰ GitHub ਨਾਲ ਜਾਣੂ ਕਰਵਾਉਣ ਲਈ ਬਹੁਤ ਉਤਸਾਹਿਤ ਹਾਂ – ਇਸਨੂੰ ਪ੍ਰੋਗਰਾਮਰਾਂ ਲਈ ਸੋਸ਼ਲ ਮੀਡੀਆ ਪਲੇਟਫਾਰਮ ਵਜੋਂ ਸੋਚੋ, ਪਰ ਲੰਚ ਦੀਆਂ ਫੋਟੋਆਂ ਸਾਂਝੀਆਂ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਕੋਡ ਸਾਂਝਾ ਕਰ ਰਹੇ ਹਾਂ ਅਤੇ ਇਕੱਠੇ ਸ਼ਾਨਦਾਰ ਚੀਜ਼ਾਂ ਬਣਾਉਣ ਲਈ ਕੰਮ ਕਰ ਰਹੇ ਹਾਂ!
 
-ਇਹ ਗੱਲ ਮੇਰੇ ਮਨ ਨੂੰ ਹੈਰਾਨ ਕਰ ਦਿੰਦੀ ਹੈ: ਤੁਹਾਡੇ ਫੋਨ ਵਿੱਚ ਹਰ ਐਪ, ਹਰ ਵੈਬਸਾਈਟ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਵੇਖਦੇ ਹੋ, ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਟੂਲ ਜੋ ਤੁਸੀਂ ਵਰਤਣਾ ਸਿੱਖਦੇ ਹੋ, ਡਿਵੈਲਪਰਾਂ ਦੀਆਂ ਟੀਮਾਂ ਦੁਆਰਾ ਬਣਾਈ ਗਈਆਂ ਹਨ ਜੋ GitHub ਵਰਗੇ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਸਹਿਯੋਗ ਕਰ ਰਹੀਆਂ ਹਨ। ਉਹ ਮਿਊਜ਼ਿਕ ਐਪ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਪਸੰਦ ਕਰਦੇ ਹੋ? ਕੋਈ ਤੁਹਾਡੇ ਵਰਗਾ ਵਿਅਕਤੀ ਇਸ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਇਆ। ਉਹ ਗੇਮ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਛੱਡ ਨਹੀਂ ਸਕਦੇ? ਹਾਂ, ਸੰਭਵ ਹੈ ਕਿ GitHub ਸਹਿਯੋਗ ਨਾਲ ਬਣਾਇਆ ਗਿਆ। ਅਤੇ ਹੁਣ ਤੁਸੀਂ ਉਸ ਸ਼ਾਨਦਾਰ ਕਮਿਊਨਿਟੀ ਦਾ ਹਿੱਸਾ ਬਣਨ ਦਾ ਤਰੀਕਾ ਸਿੱਖਣ ਜਾ ਰਹੇ ਹੋ!
+ਇਹ ਹੈ ਜੋ ਮੈਨੂੰ ਬਿਲਕੁਲ ਹੈਰਾਨ ਕਰ ਦਿੰਦਾ ਹੈ: ਤੁਹਾਡੇ ਫੋਨ ਵਿੱਚ ਹਰ ਐਪ, ਹਰ ਵੈਬਸਾਈਟ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਵੇਖਦੇ ਹੋ, ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਟੂਲ ਜੋ ਤੁਸੀਂ ਵਰਤਣਾ ਸਿੱਖਦੇ ਹੋ, ਉਹ ਡਿਵੈਲਪਰਾਂ ਦੀਆਂ ਟੀਮਾਂ ਦੁਆਰਾ ਬਣਾਈ ਗਈਆਂ ਹਨ ਜੋ GitHub ਵਰਗੇ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਸਹਿਯੋਗ ਕਰ ਰਹੀਆਂ ਹਨ। ਉਹ ਮਿਊਜ਼ਿਕ ਐਪ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਪਸੰਦ ਕਰਦੇ ਹੋ? ਤੁਹਾਡੇ ਵਰਗੇ ਕਿਸੇ ਨੇ ਇਸ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਇਆ। ਉਹ ਖੇਡ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਛੱਡ ਨਹੀਂ ਸਕਦੇ? ਹਾਂ, ਸੰਭਵ ਹੈ ਕਿ GitHub ਸਹਿਯੋਗ ਨਾਲ ਬਣਾਈ ਗਈ। ਅਤੇ ਹੁਣ ਤੁਸੀਂ ਉਸ ਸ਼ਾਨਦਾਰ ਕਮਿਊਨਿਟੀ ਦਾ ਹਿੱਸਾ ਬਣਨ ਦਾ ਤਰੀਕਾ ਸਿੱਖਣ ਜਾ ਰਹੇ ਹੋ!
 
-ਮੈਨੂੰ ਪਤਾ ਹੈ ਕਿ ਸ਼ੁਰੂ ਵਿੱਚ ਇਹ ਸਭ ਕੁਝ ਥੋੜਾ ਜਿਹਾ ਜ਼ਿਆਦਾ ਲੱਗ ਸਕਦਾ ਹੈ - ਸੱਚਮੁੱਚ, ਮੈਨੂੰ ਯਾਦ ਹੈ ਕਿ ਮੈਂ ਆਪਣਾ ਪਹਿਲਾ GitHub ਪੰਨਾ ਦੇਖਿਆ ਸੀ ਅਤੇ ਸੋਚਿਆ ਸੀ "ਇਹ ਸਾਰਾ ਕੀ ਮਤਲਬ ਹੈ?" ਪਰ ਗੱਲ ਇਹ ਹੈ: ਹਰ ਇੱਕ ਡਿਵੈਲਪਰ ਬਿਲਕੁਲ ਉਥੇ ਹੀ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਹੁਣ ਹੋ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਆਪਣਾ ਖੁਦ ਦਾ GitHub ਰਿਪੋਜ਼ਿਟਰੀ ਹੋਵੇਗਾ (ਇਸਨੂੰ ਕਲਾਉਡ ਵਿੱਚ ਤੁਹਾਡਾ ਨਿੱਜੀ ਪ੍ਰੋਜੈਕਟ ਸ਼ੋਕੇਸ ਸਮਝੋ), ਅਤੇ ਤੁਸੀਂ ਜਾਣੋਗੇ ਕਿ ਆਪਣਾ ਕੰਮ ਕਿਵੇਂ ਸੇਵ ਕਰਨਾ ਹੈ, ਇਸਨੂੰ ਹੋਰਾਂ ਨਾਲ ਸਾਂਝਾ ਕਰਨਾ ਹੈ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਤੱਕ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉਣਾ ਹੈ ਜੋ ਲੱਖਾਂ ਲੋਕ ਵਰਤਦੇ ਹਨ।
+ਮੈਨੂੰ ਪਤਾ ਹੈ ਕਿ ਸ਼ੁਰੂ ਵਿੱਚ ਇਹ ਸਭ ਕੁਝ ਬਹੁਤ ਜ਼ਿਆਦਾ ਲੱਗ ਸਕਦਾ ਹੈ – ਸੱਚਮੁੱਚ, ਮੈਨੂੰ ਯਾਦ ਹੈ ਕਿ ਮੈਂ ਆਪਣਾ ਪਹਿਲਾ GitHub ਪੰਨਾ ਦੇਖਿਆ ਸੀ ਅਤੇ ਸੋਚਿਆ ਸੀ "ਇਹ ਸਾਰਾ ਕੀ ਮਤਲਬ ਹੈ?" ਪਰ ਗੱਲ ਇਹ ਹੈ: ਹਰ ਇੱਕ ਡਿਵੈਲਪਰ ਬਿਲਕੁਲ ਉਥੇ ਹੀ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਹੁਣ ਹੋ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਆਪਣਾ ਖੁਦ ਦਾ GitHub ਰਿਪੋਜ਼ਿਟਰੀ ਹੋਵੇਗਾ (ਇਸਨੂੰ ਕਲਾਉਡ ਵਿੱਚ ਤੁਹਾਡਾ ਨਿੱਜੀ ਪ੍ਰੋਜੈਕਟ ਸ਼ੋਕੇਸ ਸਮਝੋ), ਅਤੇ ਤੁਸੀਂ ਜਾਣੋਗੇ ਕਿ ਆਪਣਾ ਕੰਮ ਕਿਵੇਂ ਸੁਰੱਖਿਅਤ ਕਰਨਾ ਹੈ, ਇਸਨੂੰ ਹੋਰਾਂ ਨਾਲ ਸਾਂਝਾ ਕਰਨਾ ਹੈ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਵੀ ਯੋਗਦਾਨ ਪਾਉਣਾ ਹੈ ਜੋ ਪ੍ਰੋਜੈਕਟ ਲੱਖਾਂ ਲੋਕ ਵਰਤਦੇ ਹਨ।
 
-ਅਸੀਂ ਇਹ ਯਾਤਰਾ ਇਕੱਠੇ ਕਰਾਂਗੇ, ਇੱਕ ਕਦਮ ਵਿੱਚ। ਕੋਈ ਜਲਦੀ ਨਹੀਂ, ਕੋਈ ਦਬਾਅ ਨਹੀਂ - ਸਿਰਫ ਤੁਸੀਂ, ਮੈਂ, ਅਤੇ ਕੁਝ ਬਹੁਤ ਹੀ ਕੂਲ ਟੂਲ ਜੋ ਤੁਹਾਡੇ ਨਵੇਂ ਸਭ ਤੋਂ ਵਧੀਆ ਦੋਸਤ ਬਣਨ ਜਾ ਰਹੇ ਹਨ!
+ਅਸੀਂ ਇਹ ਯਾਤਰਾ ਇਕੱਠੇ ਕਰਾਂਗੇ, ਇੱਕ-ਇੱਕ ਕਦਮ ਕਰਕੇ। ਕੋਈ ਜਲਦੀ ਨਹੀਂ, ਕੋਈ ਦਬਾਅ ਨਹੀਂ – ਸਿਰਫ ਤੁਸੀਂ, ਮੈਂ, ਅਤੇ ਕੁਝ ਬਹੁਤ ਹੀ ਸ਼ਾਨਦਾਰ ਟੂਲ ਜੋ ਤੁਹਾਡੇ ਨਵੇਂ ਸਭ ਤੋਂ ਵਧੀਆ ਦੋਸਤ ਬਣਨ ਜਾ ਰਹੇ ਹਨ!
 
-![GitHub ਦਾ ਪਰਿਚਯ](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.pa.png)
+![GitHub ਦਾ ਪਰਚੇ](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.pa.png)
 > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਦੁਆਰਾ
 
+```mermaid
+journey
+    title Your GitHub Adventure Today
+    section Setup
+      Install Git: 4: You
+      Create Account: 5: You
+      First Repository: 5: You
+    section Master Git
+      Local Changes: 4: You
+      Commits & Pushes: 5: You
+      Branching: 4: You
+    section Collaborate
+      Fork Projects: 4: You
+      Pull Requests: 5: You
+      Open Source: 5: You
+```
+
 ## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 [ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app)
 
-## ਪਰਿਚਯ
+## ਪਰਚੇ
 
-ਸੱਚਮੁੱਚ ਰੋਮਾਂਚਕ ਚੀਜ਼ਾਂ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨੂੰ ਕੁਝ GitHub ਜਾਦੂ ਲਈ ਤਿਆਰ ਕਰੀਏ! ਇਸਨੂੰ ਇੱਕ ਸ਼ਾਹਕਾਰ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਆਪਣੇ ਕਲਾ ਸਾਮਾਨ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਵਾਂਗ ਸੋਚੋ - ਸਹੀ ਟੂਲ ਤਿਆਰ ਰੱਖਣ ਨਾਲ ਸਭ ਕੁਝ ਬਹੁਤ ਹੀ ਸੌਖਾ ਅਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਮਜ਼ੇਦਾਰ ਬਣ ਜਾਂਦਾ ਹੈ।
+ਸੱਚਮੁੱਚ ਰੋਮਾਂਚਕ ਚੀਜ਼ਾਂ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨੂੰ ਕੁਝ GitHub ਜਾਦੂ ਲਈ ਤਿਆਰ ਕਰੀਏ! ਇਸਨੂੰ ਇੱਕ ਸ਼ਾਹਕਾਰ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਆਪਣੇ ਕਲਾ ਸਾਮਾਨ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਵਾਂਗ ਸੋਚੋ – ਸਹੀ ਟੂਲ ਤਿਆਰ ਰੱਖਣ ਨਾਲ ਸਭ ਕੁਝ ਬਹੁਤ ਹੀ ਸੌਖਾ ਅਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਮਜ਼ੇਦਾਰ ਬਣ ਜਾਂਦਾ ਹੈ।
 
-ਮੈਂ ਤੁਹਾਨੂੰ ਹਰ ਸੈਟਅੱਪ ਕਦਮ ਨੂੰ ਨਿੱਜੀ ਤੌਰ 'ਤੇ ਸਮਝਾਉਣ ਜਾ ਰਿਹਾ ਹਾਂ, ਅਤੇ ਮੈਂ ਵਾਅਦਾ ਕਰਦਾ ਹਾਂ ਕਿ ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਜਿੰਨਾ ਡਰਾਉਣਾ ਲੱਗਦਾ ਹੈ, ਉਨਾ ਨਹੀਂ ਹੈ। ਜੇ ਕੁਝ ਤੁਰੰਤ ਸਮਝ ਨਹੀਂ ਆਉਂਦਾ, ਤਾਂ ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਹੈ! ਮੈਨੂੰ ਯਾਦ ਹੈ ਕਿ ਮੈਂ ਆਪਣਾ ਪਹਿਲਾ ਡਿਵੈਲਪਮੈਂਟ ਇਨਵਾਇਰਮੈਂਟ ਸੈਟਅੱਪ ਕੀਤਾ ਸੀ ਅਤੇ ਮੈਨੂੰ ਲੱਗਿਆ ਸੀ ਕਿ ਮੈਂ ਪ੍ਰਾਚੀਨ ਲਿਪੀਆਂ ਨੂੰ ਪੜ੍ਹਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਿਹਾ ਹਾਂ। ਹਰ ਇੱਕ ਡਿਵੈਲਪਰ ਬਿਲਕੁਲ ਉਥੇ ਹੀ ਹੁੰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਹੁਣ ਹੋ, ਸੋਚਦੇ ਹੋ ਕਿ ਕੀ ਉਹ ਸਹੀ ਕਰ ਰਹੇ ਹਨ। ਸਪੌਇਲਰ ਅਲਰਟ: ਜੇ ਤੁਸੀਂ ਇੱਥੇ ਸਿੱਖ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਸਹੀ ਕਰ ਰਹੇ ਹੋ! 🌟
+ਮੈਂ ਤੁਹਾਨੂੰ ਹਰ ਸੈਟਅੱਪ ਕਦਮ ਨੂੰ ਨਿੱਜੀ ਤੌਰ 'ਤੇ ਦਿਖਾਵਾਂਗਾ, ਅਤੇ ਮੈਂ ਵਾਅਦਾ ਕਰਦਾ ਹਾਂ ਕਿ ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਜਿੰਨਾ ਡਰਾਉਣਾ ਲੱਗਦਾ ਹੈ, ਉਤਨਾ ਨਹੀਂ ਹੈ। ਜੇਕਰ ਕੁਝ ਤੁਰੰਤ ਸਮਝ ਨਹੀਂ ਆਉਂਦਾ, ਤਾਂ ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਹੈ! ਮੈਨੂੰ ਯਾਦ ਹੈ ਕਿ ਮੈਂ ਆਪਣਾ ਪਹਿਲਾ ਡਿਵੈਲਪਮੈਂਟ ਵਾਤਾਵਰਣ ਸੈਟਅੱਪ ਕੀਤਾ ਸੀ ਅਤੇ ਮਹਿਸੂਸ ਕੀਤਾ ਸੀ ਕਿ ਮੈਂ ਪ੍ਰਾਚੀਨ ਲਿਪੀ ਪੜ੍ਹਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਿਹਾ ਹਾਂ। ਹਰ ਇੱਕ ਡਿਵੈਲਪਰ ਬਿਲਕੁਲ ਉਥੇ ਹੀ ਹੁੰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਹੁਣ ਹੋ, ਸੋਚਦੇ ਹੋ ਕਿ ਕੀ ਉਹ ਸਹੀ ਕਰ ਰਹੇ ਹਨ। ਸਪੌਇਲਰ ਅਲਰਟ: ਜੇ ਤੁਸੀਂ ਇੱਥੇ ਸਿੱਖ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਸਹੀ ਕਰ ਰਹੇ ਹੋ! 🌟
 
 ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਕਵਰ ਕਰਾਂਗੇ:
 
 - ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ ਕੀਤੇ ਕੰਮ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨਾ
-- ਹੋਰਾਂ ਨਾਲ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰਨਾ
-- ਓਪਨ ਸੋਰਸ ਸਾਫਟਵੇਅਰ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉਣ ਦਾ ਤਰੀਕਾ
+- ਹੋਰਾਂ ਨਾਲ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਕੰਮ ਕਰਨਾ
+- ਖੁੱਲੇ ਸਰੋਤ ਸਾਫਟਵੇਅਰ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉਣ ਦਾ ਤਰੀਕਾ
 
 ### ਪੂਰਵ ਸ਼ਰਤਾਂ
 
-ਆਓ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨੂੰ ਕੁਝ GitHub ਜਾਦੂ ਲਈ ਤਿਆਰ ਕਰੀਏ! ਚਿੰਤਾ ਨਾ ਕਰੋ - ਇਹ ਸੈਟਅੱਪ ਤੁਹਾਨੂੰ ਸਿਰਫ ਇੱਕ ਵਾਰ ਕਰਨਾ ਪਵੇਗਾ, ਅਤੇ ਫਿਰ ਤੁਸੀਂ ਆਪਣੇ ਪੂਰੇ ਕੋਡਿੰਗ ਯਾਤਰਾ ਲਈ ਤਿਆਰ ਹੋਵੋਗੇ।
+ਆਓ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਨੂੰ ਕੁਝ GitHub ਜਾਦੂ ਲਈ ਤਿਆਰ ਕਰੀਏ! ਚਿੰਤਾ ਨਾ ਕਰੋ – ਇਹ ਸੈਟਅੱਪ ਕੁਝ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸਿਰਫ ਇੱਕ ਵਾਰ ਕਰਨਾ ਹੈ, ਅਤੇ ਫਿਰ ਤੁਸੀਂ ਆਪਣੇ ਪੂਰੇ ਕੋਡਿੰਗ ਯਾਤਰਾ ਲਈ ਤਿਆਰ ਹੋਵੋਗੇ।
 
-ਚਲੋ, ਅਸਾਸ਼ਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ! ਪਹਿਲਾਂ, ਸਾਨੂੰ ਚੈੱਕ ਕਰਨਾ ਹੈ ਕਿ Git ਪਹਿਲਾਂ ਹੀ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ ਮੌਜੂਦ ਹੈ ਜਾਂ ਨਹੀਂ। Git ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਇੱਕ ਬਹੁਤ ਹੀ ਸਮਾਰਟ ਸਹਾਇਕ ਵਾਂਗ ਹੈ ਜੋ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਕੀਤੇ ਹਰ ਇੱਕ ਬਦਲਾਅ ਨੂੰ ਯਾਦ ਰੱਖਦਾ ਹੈ - ਦੋ ਸੈਕੰਡਾਂ ਵਿੱਚ Ctrl+S ਨੂੰ ਬੇਵਕੂਫ਼ੀ ਨਾਲ ਦਬਾਉਣ ਤੋਂ ਬਹੁਤ ਵਧੀਆ (ਅਸੀਂ ਸਾਰੇ ਉਥੇ ਰਹੇ ਹਾਂ!).
+ਚਲੋ, ਅਧਾਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ! ਪਹਿਲਾਂ, ਸਾਨੂੰ ਚੈੱਕ ਕਰਨਾ ਹੈ ਕਿ Git ਪਹਿਲਾਂ ਹੀ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ ਹੈ ਜਾਂ ਨਹੀਂ। Git ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਇੱਕ ਬਹੁਤ ਹੀ ਸਮਾਰਟ ਸਹਾਇਕ ਹੋਣ ਵਾਂਗ ਹੈ ਜੋ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਕੀਤੇ ਹਰ ਇੱਕ ਬਦਲਾਅ ਨੂੰ ਯਾਦ ਰੱਖਦਾ ਹੈ – ਹਰ ਦੋ ਸਕਿੰਟ ਵਿੱਚ ਬੇਚੈਨ ਹੋ ਕੇ Ctrl+S ਦਬਾਉਣ ਤੋਂ ਬਹੁਤ ਵਧੀਆ (ਅਸੀਂ ਸਾਰੇ ਉਥੇ ਰਹੇ ਹਾਂ!).
 
-ਆਓ ਦੇਖੀਏ ਕਿ Git ਪਹਿਲਾਂ ਹੀ ਇੰਸਟਾਲ ਹੈ ਜਾਂ ਨਹੀਂ, ਇਸ ਜਾਦੂਈ ਕਮਾਂਡ ਨੂੰ ਆਪਣੇ ਟਰਮੀਨਲ ਵਿੱਚ ਟਾਈਪ ਕਰਕੇ:
+ਆਓ ਦੇਖੀਏ ਕਿ Git ਪਹਿਲਾਂ ਹੀ ਇੰਸਟਾਲ ਹੈ ਜਾਂ ਨਹੀਂ ਇਸ ਜਾਦੂ ਕਮਾਂਡ ਨੂੰ ਆਪਣੇ ਟਰਮੀਨਲ ਵਿੱਚ ਟਾਈਪ ਕਰਕੇ:
 `git --version`
 
-ਜੇ Git ਅਜੇ ਤੱਕ ਨਹੀਂ ਹੈ, ਕੋਈ ਚਿੰਤਾ ਨਹੀਂ! ਸਿਰਫ [Git ਡਾਊਨਲੋਡ](https://git-scm.com/downloads) 'ਤੇ ਜਾਓ ਅਤੇ ਇਸਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ। ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਇੰਸਟਾਲ ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਸਾਨੂੰ Git ਨੂੰ ਤੁਹਾਡੇ ਨਾਲ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਜਾਣੂ ਕਰਵਾਉਣਾ ਪਵੇਗਾ:
+ਜੇ Git ਅਜੇ ਤੱਕ ਨਹੀਂ ਹੈ, ਕੋਈ ਚਿੰਤਾ ਨਹੀਂ! ਸਿਰਫ [Git ਡਾਊਨਲੋਡ ਕਰੋ](https://git-scm.com/downloads) ਅਤੇ ਇਸਨੂੰ ਹਾਸਲ ਕਰੋ। ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਇੰਸਟਾਲ ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਸਾਨੂੰ Git ਨੂੰ ਤੁਹਾਡੇ ਨਾਲ ਢੰਗ ਨਾਲ ਜਾਣੂ ਕਰਵਾਉਣਾ ਪਵੇਗਾ:
 
-> 💡 **ਪਹਿਲੀ ਵਾਰ ਸੈਟਅੱਪ**: ਇਹ ਕਮਾਂਡ Git ਨੂੰ ਦੱਸਦੀਆਂ ਹਨ ਕਿ ਤੁਸੀਂ ਕੌਣ ਹੋ। ਇਹ ਜਾਣਕਾਰੀ ਹਰ ਕਮਿਟ ਨਾਲ ਜੁੜੀ ਹੋਵੇਗੀ ਜੋ ਤੁਸੀਂ ਕਰਦੇ ਹੋ, ਇਸ ਲਈ ਇੱਕ ਨਾਮ ਅਤੇ ਈਮੇਲ ਚੁਣੋ ਜੋ ਤੁਸੀਂ ਜਨਤਕ ਤੌਰ 'ਤੇ ਸਾਂਝਾ ਕਰਨ ਲਈ ਸਹੀ ਸਮਝਦੇ ਹੋ।
+> 💡 **ਪਹਿਲੀ ਵਾਰ ਸੈਟਅੱਪ**: ਇਹ ਕਮਾਂਡ Git ਨੂੰ ਦੱਸਦੀਆਂ ਹਨ ਕਿ ਤੁਸੀਂ ਕੌਣ ਹੋ। ਇਹ ਜਾਣਕਾਰੀ ਹਰ ਕਮਿਟ ਨਾਲ ਜੁੜੀ ਹੋਵੇਗੀ ਜੋ ਤੁਸੀਂ ਕਰਦੇ ਹੋ, ਇਸ ਲਈ ਇੱਕ ਨਾਮ ਅਤੇ ਈਮੇਲ ਚੁਣੋ ਜਿਸਨੂੰ ਤੁਸੀਂ ਜਨਤਕ ਤੌਰ 'ਤੇ ਸਾਂਝਾ ਕਰਨ ਲਈ ਆਰਾਮਦਾਇਕ ਮਹਿਸੂਸ ਕਰਦੇ ਹੋ।
 
 ```bash
 git config --global user.name "your-name"
@@ -58,34 +75,34 @@ git config --global user.email "your-email"
 git config --list
 ```
 
-ਤੁਹਾਨੂੰ ਇੱਕ GitHub ਖਾਤਾ, ਇੱਕ ਕੋਡ ਐਡੀਟਰ (ਜਿਵੇਂ Visual Studio Code), ਅਤੇ ਤੁਹਾਨੂੰ ਆਪਣਾ ਟਰਮੀਨਲ (ਜਾਂ: ਕਮਾਂਡ ਪ੍ਰੌਮਪਟ) ਖੋਲ੍ਹਣ ਦੀ ਲੋੜ ਹੋਵੇਗੀ।
+ਤੁਹਾਨੂੰ ਇੱਕ GitHub ਖਾਤਾ, ਇੱਕ ਕੋਡ ਐਡੀਟਰ (ਜਿਵੇਂ Visual Studio Code), ਅਤੇ ਤੁਹਾਨੂੰ ਆਪਣਾ ਟਰਮੀਨਲ (ਜਾਂ: ਕਮਾਂਡ ਪ੍ਰੌਮਪਟ) ਖੋਲ੍ਹਣ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇਗੀ।
 
-[github.com](https://github.com/) 'ਤੇ ਜਾਓ ਅਤੇ ਇੱਕ ਖਾਤਾ ਬਣਾਓ ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਨਹੀਂ ਕੀਤਾ, ਜਾਂ ਲੌਗਇਨ ਕਰੋ ਅਤੇ ਆਪਣਾ ਪ੍ਰੋਫਾਈਲ ਭਰੋ।
+[github.com](https://github.com/) 'ਤੇ ਜਾਓ ਅਤੇ ਇੱਕ ਖਾਤਾ ਬਣਾਓ ਜੇਕਰ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਨਹੀਂ ਕੀਤਾ, ਜਾਂ ਲੌਗਇਨ ਕਰੋ ਅਤੇ ਆਪਣਾ ਪ੍ਰੋਫਾਈਲ ਭਰੋ।
 
-💡 **ਆਧੁਨਿਕ ਸੁਝਾਅ**: [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) ਸੈਟਅੱਪ ਕਰਨ ਜਾਂ [GitHub CLI](https://cli.github.com/) ਵਰਤਣ ਬਾਰੇ ਸੋਚੋ, ਜਿਨ੍ਹਾਂ ਨਾਲ ਪਾਸਵਰਡਾਂ ਤੋਂ ਬਿਨਾਂ ਆਸਾਨ ਪ੍ਰਮਾਣਿਕਤਾ ਹੁੰਦੀ ਹੈ।
+💡 **ਆਧੁਨਿਕ ਸੁਝਾਅ**: ਪਾਸਵਰਡਾਂ ਤੋਂ ਬਿਨਾਂ ਆਸਾਨ ਪ੍ਰਮਾਣਿਕਤਾ ਲਈ [SSH ਕੁੰਜੀਆਂ](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) ਸੈਟਅੱਪ ਕਰਨ ਜਾਂ [GitHub CLI](https://cli.github.com/) ਵਰਤਣ ਬਾਰੇ ਸੋਚੋ।
 
-✅ GitHub ਦੁਨੀਆ ਵਿੱਚ ਇੱਕੋ ਇੱਕ ਕੋਡ ਰਿਪੋਜ਼ਿਟਰੀ ਨਹੀਂ ਹੈ; ਹੋਰ ਵੀ ਹਨ, ਪਰ GitHub ਸਭ ਤੋਂ ਵਧੀਆ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ।
+✅ GitHub ਦੁਨੀਆ ਵਿੱਚ ਇਕੱਲਾ ਕੋਡ ਰਿਪੋਜ਼ਿਟਰੀ ਨਹੀਂ ਹੈ; ਹੋਰ ਵੀ ਹਨ, ਪਰ GitHub ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਹੈ।
 
 ### ਤਿਆਰੀ
 
-ਤੁਹਾਨੂੰ ਆਪਣੇ ਸਥਾਨਕ ਕੰਪਿਊਟਰ (ਲੈਪਟਾਪ ਜਾਂ ਪੀਸੀ) 'ਤੇ ਇੱਕ ਕੋਡ ਪ੍ਰੋਜੈਕਟ ਵਾਲਾ ਫੋਲਡਰ ਅਤੇ GitHub 'ਤੇ ਇੱਕ ਜਨਤਕ ਰਿਪੋਜ਼ਿਟਰੀ ਦੀ ਲੋੜ ਹੋਵੇਗੀ, ਜੋ ਦੂਜਿਆਂ ਦੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉਣ ਦਾ ਉਦਾਹਰਨ ਵਜੋਂ ਕੰਮ ਕਰੇਗਾ।
+ਤੁਹਾਨੂੰ ਆਪਣੇ ਸਥਾਨਕ ਕੰਪਿਊਟਰ (ਲੈਪਟੌਪ ਜਾਂ ਪੀਸੀ) 'ਤੇ ਇੱਕ ਕੋਡ ਪ੍ਰੋਜੈਕਟ ਵਾਲਾ ਫੋਲਡਰ ਅਤੇ GitHub 'ਤੇ ਇੱਕ ਜਨਤਕ ਰਿਪੋਜ਼ਿਟਰੀ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇਗੀ, ਜੋ ਹੋਰਾਂ ਦੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉਣ ਦਾ ਉਦਾਹਰਨ ਦੇਵੇਗਾ।
 
-### ਆਪਣਾ ਕੋਡ ਸੁਰੱਖਿਅਤ ਰੱਖਣਾ
+### ਆਪਣੇ ਕੋਡ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣਾ
 
-ਆਓ ਸੁਰੱਖਿਆ ਬਾਰੇ ਕੁਝ ਗੱਲ ਕਰੀਏ - ਪਰ ਚਿੰਤਾ ਨਾ ਕਰੋ, ਅਸੀਂ ਤੁਹਾਨੂੰ ਡਰਾਉਣ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ ਨਾਲ ਭਰ ਨਹੀਂ ਦੇਵਾਂਗੇ! ਇਹ ਸੁਰੱਖਿਆ ਅਭਿਆਸਾਂ ਨੂੰ ਆਪਣੇ ਕਾਰ ਜਾਂ ਘਰ ਨੂੰ ਤਾਲਾ ਲਗਾਉਣ ਵਾਂਗ ਸੋਚੋ। ਇਹ ਸਧਾਰਨ ਆਦਤਾਂ ਹਨ ਜੋ ਦੂਜੇ ਸੁਭਾਵਿਕ ਬਣ ਜਾਂਦੀਆਂ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਮਿਹਨਤ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦੀਆਂ ਹਨ।
+ਆਓ ਸੁਰੱਖਿਆ ਬਾਰੇ ਕੁਝ ਗੱਲ ਕਰੀਏ – ਪਰ ਚਿੰਤਾ ਨਾ ਕਰੋ, ਅਸੀਂ ਤੁਹਾਨੂੰ ਡਰਾਉਣ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ ਨਾਲ ਭਰਮਿਤ ਨਹੀਂ ਕਰਨ ਜਾ ਰਹੇ! ਇਹ ਸੁਰੱਖਿਆ ਅਭਿਆਸਾਂ ਨੂੰ ਆਪਣੀ ਕਾਰ ਜਾਂ ਆਪਣੇ ਘਰ ਨੂੰ ਤਾਲਾ ਲਗਾਉਣ ਵਾਂਗ ਸੋਚੋ। ਇਹ ਸਧਾਰਨ ਆਦਤਾਂ ਹਨ ਜੋ ਦੂਜੇ ਸੁਭਾਵਿਕ ਬਣ ਜਾਂਦੀਆਂ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਮਿਹਨਤ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦੀਆਂ ਹਨ।
 
-ਅਸੀਂ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਹੀ GitHub ਨਾਲ ਕੰਮ ਕਰਨ ਦੇ ਆਧੁਨਿਕ, ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਦਿਖਾਵਾਂਗੇ। ਇਸ ਤਰੀਕੇ ਨਾਲ, ਤੁਸੀਂ ਚੰਗੀਆਂ ਆਦਤਾਂ ਵਿਕਸਿਤ ਕਰੋਗੇ ਜੋ ਤੁਹਾਡੇ ਕੋਡਿੰਗ ਕਰੀਅਰ ਵਿੱਚ ਤੁਹਾਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੇਵਾ ਦੇਣਗੀਆਂ।
+ਅਸੀਂ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਹੀ GitHub ਨਾਲ ਕੰਮ ਕਰਨ ਦੇ ਆਧੁਨਿਕ, ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਦਿਖਾਵਾਂਗੇ। ਇਸ ਤਰੀਕੇ ਨਾਲ, ਤੁਸੀਂ ਚੰਗੀਆਂ ਆਦਤਾਂ ਵਿਕਸਿਤ ਕਰੋਗੇ ਜੋ ਤੁਹਾਡੇ ਪੂਰੇ ਕੋਡਿੰਗ ਕਰੀਅਰ ਵਿੱਚ ਤੁਹਾਡੀ ਸੇਵਾ ਕਰਨਗੀਆਂ।
 
-GitHub ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ, ਇਹ ਸੁਰੱਖਿਆ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ:
+GitHub ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ, ਇਹ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਸੁਰੱਖਿਆ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕੀਤੀ ਜਾਵੇ:
 
 | ਸੁਰੱਖਿਆ ਖੇਤਰ | ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸ | ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ |
 |---------------|---------------|----------------|
-| **ਪ੍ਰਮਾਣਿਕਤਾ** | SSH keys ਜਾਂ Personal Access Tokens ਵਰਤੋ | ਪਾਸਵਰਡ ਘੱਟ ਸੁਰੱਖਿਅਤ ਹਨ ਅਤੇ ਹਟਾਏ ਜਾ ਰਹੇ ਹਨ |
-| **ਦੋ-ਫੈਕਟਰ ਪ੍ਰਮਾਣਿਕਤਾ** | ਆਪਣੇ GitHub ਖਾਤੇ 'ਤੇ 2FA ਚਾਲੂ ਕਰੋ | ਖਾਤੇ ਦੀ ਸੁਰੱਖਿਆ ਦਾ ਇੱਕ ਵਾਧੂ ਪੱਧਰ ਜੋੜਦਾ ਹੈ |
-| **ਰਿਪੋਜ਼ਿਟਰੀ ਸੁਰੱਖਿਆ** | ਸੰਵੇਦਨਸ਼ੀਲ ਜਾਣਕਾਰੀ ਕਦੇ ਵੀ ਕਮਿਟ ਨਾ ਕਰੋ | API keys ਅਤੇ ਪਾਸਵਰਡ ਜਨਤਕ ਰਿਪੋਜ਼ 'ਚ ਨਹੀਂ ਹੋਣੇ ਚਾਹੀਦੇ |
-| **ਡਿਪੈਂਡੈਂਸੀ ਮੈਨੇਜਮੈਂਟ** | Dependabot ਨੂੰ ਅਪਡੇਟ ਲਈ ਚਾਲੂ ਕਰੋ | ਤੁਹਾਡੇ ਡਿਪੈਂਡੈਂਸੀ ਨੂੰ ਸੁਰੱਖਿਅਤ ਅਤੇ ਅਪਡੇਟ ਰੱਖਦਾ ਹੈ |
+| **ਪ੍ਰਮਾਣਿਕਤਾ** | SSH ਕੁੰਜੀਆਂ ਜਾਂ Personal Access Tokens ਵਰਤੋ | ਪਾਸਵਰਡ ਘੱਟ ਸੁਰੱਖਿਅਤ ਹਨ ਅਤੇ ਹਟਾਏ ਜਾ ਰਹੇ ਹਨ |
+| **ਦੋ-ਕਦਮ ਪ੍ਰਮਾਣਿਕਤਾ** | ਆਪਣੇ GitHub ਖਾਤੇ 'ਤੇ 2FA ਚਾਲੂ ਕਰੋ | ਖਾਤੇ ਦੀ ਸੁਰੱਖਿਆ ਦਾ ਇੱਕ ਵਾਧੂ ਤਹਿ ਜੋੜਦਾ ਹੈ |
+| **ਰਿਪੋਜ਼ਿਟਰੀ ਸੁਰੱਖਿਆ** | ਸੰਵੇਦਨਸ਼ੀਲ ਜਾਣਕਾਰੀ ਕਦੇ ਵੀ ਕਮਿਟ ਨਾ ਕਰੋ | API ਕੁੰਜੀਆਂ ਅਤੇ ਪਾਸਵਰਡ ਜਨਤਕ ਰਿਪੋਜ਼ਿਟਰੀ ਵਿੱਚ ਕਦੇ ਵੀ ਨਹੀਂ ਹੋਣੇ ਚਾਹੀਦੇ |
+| **ਨਿਰਭਰਤਾ ਪ੍ਰਬੰਧਨ** | Dependabot ਨੂੰ ਅਪਡੇਟ ਲਈ ਚਾਲੂ ਕਰੋ | ਤੁਹਾਡੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਅਤੇ ਅਪਡੇਟ ਰੱਖਦਾ ਹੈ |
 
-> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਸੁਰੱਖਿਆ ਯਾਦ**: API keys, ਪਾਸਵਰਡ, ਜਾਂ ਹੋਰ ਸੰਵੇਦਨਸ਼ੀਲ ਜਾਣਕਾਰੀ ਨੂੰ ਕਿਸੇ ਵੀ ਰਿਪੋਜ਼ਿਟਰੀ ਵਿੱਚ ਕਦੇ ਵੀ ਕਮਿਟ ਨਾ ਕਰੋ। ਸੰਵੇਦਨਸ਼ੀਲ ਡਾਟਾ ਦੀ ਰੱਖਿਆ ਲਈ environment variables ਅਤੇ `.gitignore` ਫਾਈਲਾਂ ਵਰਤੋ।
+> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਸੁਰੱਖਿਆ ਯਾਦ**: API ਕੁੰਜੀਆਂ, ਪਾਸਵਰਡ, ਜਾਂ ਹੋਰ ਸੰਵੇਦਨਸ਼ੀਲ ਜਾਣਕਾਰੀ ਨੂੰ ਕਿਸੇ ਵੀ ਰਿਪੋਜ਼ਿਟਰੀ ਵਿੱਚ ਕਦੇ ਵੀ ਕਮਿਟ ਨਾ ਕਰੋ। ਸੰਵੇਦਨਸ਼ੀਲ ਡਾਟਾ ਦੀ ਰੱਖਿਆ ਲਈ ਵਾਤਾਵਰਣ ਚਰ ਅਤੇ `.gitignore` ਫਾਈਲਾਂ ਵਰਤੋ।
 
 **ਆਧੁਨਿਕ ਪ੍ਰਮਾਣਿਕਤਾ ਸੈਟਅੱਪ:**
 
@@ -97,57 +114,86 @@ ssh-keygen -t ed25519 -C "your_email@example.com"
 git remote set-url origin git@github.com:username/repository.git
 ```
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: SSH keys ਪਾਸਵਰਡਾਂ ਨੂੰ ਵਾਰ-ਵਾਰ ਦਰਜ ਕਰਨ ਦੀ ਲੋੜ ਨੂੰ ਖਤਮ ਕਰ ਦਿੰਦੇ ਹਨ ਅਤੇ ਰਵਾਇਤੀ ਪ੍ਰਮਾਣਿਕਤਾ ਤਰੀਕਿਆਂ ਨਾਲੋਂ ਜ਼ਿਆਦਾ ਸੁਰੱਖਿਅਤ ਹਨ।
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: SSH ਕੁੰਜੀਆਂ ਨੂੰ ਵਾਰ-ਵਾਰ ਪਾਸਵਰਡ ਦਾਖਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨੂੰ ਹਟਾਉਂਦੀਆਂ ਹਨ ਅਤੇ ਰਵਾਇਤੀ ਪ੍ਰਮਾਣਿਕਤਾ ਤਰੀਕਿਆਂ ਨਾਲੋਂ ਵਧੇਰੇ ਸੁਰੱਖਿਅਤ ਹਨ।
 
 ---
 
-## ਆਪਣੇ ਕੋਡ ਨੂੰ ਪ੍ਰੋਫੈਸ਼ਨਲ ਵਾਂਗ ਮੈਨੇਜ ਕਰਨਾ
-
-ਚੰਗਾ, ਇਹ ਹੈ ਜਿੱਥੇ ਚੀਜ਼ਾਂ ਸੱਚਮੁੱਚ ਰੋਮਾਂਚਕ ਹੋ ਜਾਂਦੀਆਂ ਹਨ! 🎉 ਅਸੀਂ ਸਿੱਖਣ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਆਪਣੇ ਕੋਡ ਨੂੰ ਪ੍ਰੋਫੈਸ਼ਨਲ ਵਾਂਗ ਕਿਵੇਂ ਟ੍ਰੈਕ ਅਤੇ ਮੈਨੇਜ ਕਰਨਾ ਹੈ, ਅਤੇ ਸੱਚਮੁੱਚ, ਇਹ ਮੇਰੀ ਮਨਪਸੰਦ ਚੀਜ਼ਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਸਿਖਾਉਣ ਲਈ ਕਿਉਂਕਿ ਇਹ ਬਹੁਤ ਵੱਡਾ ਬਦਲਾਅ ਲਿਆਉਂਦੀ ਹੈ।
-
-ਇਸਨੂੰ ਸੋਚੋ: ਤੁਸੀਂ ਇੱਕ ਸ਼ਾਨਦਾਰ ਕਹਾਣੀ ਲਿਖ ਰਹੇ ਹੋ, ਅਤੇ ਤੁਸੀਂ ਹਰ ਡਰਾਫਟ, ਹਰ ਸ਼ਾਨਦਾਰ ਸੋਧ, ਅਤੇ ਹਰ "ਰੁਕੋ, ਇਹ ਤਾਂ ਜ਼ਬਰਦਸਤ ਹੈ!" ਪਲ ਨੂੰ ਯਾਦ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹੀ ਕੁਝ Git ਤੁਹਾਡੇ ਕੋਡ ਲਈ ਕਰਦਾ ਹੈ! ਇਹ ਬਿਲਕੁਲ ਉਸੇ ਵਾਂਗ ਹੈ ਜਿਵੇਂ ਤੁਹਾਡੇ ਕੋਡ ਲਈ ਇੱਕ ਸਮੇਂ-ਯਾਤਰਾ ਕਰਨ ਵਾਲਾ ਨੋਟਬੁੱਕ ਹੋਵੇ ਜੋ ਹਰ ਚੀਜ਼ ਨੂੰ ਯਾਦ ਰੱਖਦਾ ਹੈ - ਹਰ ਕੀਸਟ੍ਰੋਕ, ਹਰ ਬਦਲਾਅ, ਹਰ "ਓਹ, ਇਹ ਸਭ ਕੁਝ ਖਰਾਬ ਕਰ ਦਿੱਤਾ" ਪਲ ਜਿਸਨੂੰ ਤੁਸੀਂ ਤੁਰੰਤ ਰੱਦ ਕਰ ਸਕਦੇ ਹੋ।
-
-ਮੈਂ ਸੱਚਮੁੱਚ ਦੱਸਾਂ - ਸ਼ੁਰੂ ਵਿੱਚ ਇਹ ਸਭ ਕੁਝ ਥੋੜਾ ਜਿਹਾ ਜ਼ਿਆਦਾ ਲੱਗ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਮੈਂ ਸ਼ੁਰੂ ਕੀਤਾ, ਮੈਂ ਸੋਚਿਆ "ਮੈਂ ਸਿਰਫ ਆਪਣੇ ਫਾਈਲਾਂ ਨੂੰ ਸਧਾਰਨ ਤਰੀਕੇ ਨਾਲ ਸੇਵ ਕਿਉਂ ਨਹੀਂ ਕਰ ਸਕਦਾ?" ਪਰ ਇਸ 'ਤੇ ਮੇਰਾ ਭਰੋਸਾ ਕਰੋ: ਜਦੋਂ Git ਤੁਹਾਡੇ ਲਈ ਕਲਿਕ ਕਰਦਾ ਹੈ (ਅਤੇ ਇਹ ਕਰੇਗਾ!), ਤੁਹਾਡੇ ਕੋਲ ਉਹ ਲਾਈਟਬਲਬ ਪਲ ਹੋਵੇਗਾ ਜਿੱਥੇ ਤੁਸੀਂ ਸੋਚਦੇ ਹੋ "ਮੈਂ ਕਿਵੇਂ ਕਦੇ ਵੀ ਇਸ ਤੋਂ ਬਿਨਾਂ ਕੋਡ ਕੀਤਾ?" ਇਹ ਬਿਲਕੁਲ ਉਸੇ ਵਾਂਗ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਪਤਾ ਲਗਾਉਂਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਉੱਡ ਸਕਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੀ ਸਾਰੀ ਜ਼ਿੰਦਗੀ ਹਰ ਜਗ੍ਹਾ ਪੈਦਲ ਚੱਲ ਰਹੇ ਹੋ!
-
-ਆਓ ਕਹੀਏ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਕੁਝ ਕੋਡ ਪ੍ਰੋਜੈਕਟ ਵਾਲਾ ਫੋਲਡਰ ਹੈ ਅਤੇ ਤੁਸੀਂ git - ਵਰਜਨ ਕੰਟਰੋਲ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ ਤਰੱਕੀ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਕੁਝ ਲੋਕ git ਦੀ ਵਰਤੋਂ ਨੂੰ ਆਪਣੇ ਭਵਿੱਖ ਦੇ ਆਪ ਨਾਲ ਪਿਆਰ ਭਰੀ ਚਿੱਠੀ ਲਿਖਣ ਦੇ ਨਾਲੋਂ ਤੁਲਨਾ ਕਰਦੇ ਹਨ। ਆਪਣੇ ਕਮਿਟ ਮੈਸੇਜਾਂ ਨੂੰ ਦਿਨਾਂ ਜਾਂ ਹਫ਼ਤਿਆਂ ਜਾਂ ਮਹੀਨਿਆਂ ਬਾਅਦ ਪੜ੍ਹਦੇ ਹੋਏ ਤੁਸੀਂ ਯਾਦ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਕਿਉਂ ਫੈਸਲਾ ਕੀਤਾ, ਜਾਂ "ਰੋਲਬੈਕ" ਇੱਕ ਬਦਲਾਅ - ਇਹ ਹੈ, ਜਦੋਂ ਤੁਸੀਂ ਚੰਗੇ "ਕਮਿਟ ਮੈਸੇਜ" ਲਿਖਦੇ ਹੋ।
+## ਆਪਣੇ ਕੋਡ ਨੂੰ ਪ੍ਰੋਫੈਸ਼ਨਲ ਵਾਂਗ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ
+
+ਚੰਗਾ, ਇਹ ਹੈ ਜਿੱਥੇ ਚੀਜ਼ਾਂ ਸੱਚਮੁੱਚ ਰੋਮਾਂਚਕ ਹੋ ਜਾਂਦੀਆਂ ਹਨ! 🎉 ਅਸੀਂ ਸਿੱਖਣ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਆਪਣੇ ਕੋਡ ਨੂੰ ਪ੍ਰੋਫੈਸ਼ਨਲ ਵਾਂਗ ਟ੍ਰੈਕ ਅਤੇ ਪ੍ਰਬੰਧਿਤ ਕਿਵੇਂ ਕਰਨਾ ਹੈ, ਅਤੇ ਸੱਚਮੁੱਚ, ਇਹ ਮੇਰੀ ਮਨਪਸੰਦ ਚੀਜ਼ਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਸਿਖਾਉਣ ਲਈ ਕਿਉਂਕਿ ਇਹ ਬਹੁਤ ਵੱਡਾ ਬਦਲਾਅ ਲਿਆਉਂਦਾ ਹੈ।
+
+ਇਸਨੂੰ ਸੋਚੋ: ਤੁਸੀਂ ਇੱਕ ਸ਼ਾਨਦਾਰ ਕਹਾਣੀ ਲਿਖ ਰਹੇ ਹੋ, ਅਤੇ ਤੁਸੀਂ ਹਰ ਮਸੌਦਾ, ਹਰ ਸ਼ਾਨਦਾਰ ਸੋਧ, ਅਤੇ ਹਰ "ਰੁਕੋ, ਇਹ ਜ਼ਬਰਦਸਤ ਹੈ!" ਪਲ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹੀ ਕੁਝ Git ਤੁਹਾਡੇ ਕੋਡ ਲਈ ਕਰਦਾ ਹੈ! ਇਹ ਬਿਲਕੁਲ ਸਭ ਤੋਂ ਸ਼ਾਨਦਾਰ ਸਮਾਂ-ਯਾਤਰਾ ਵਾਲੀ ਨੋਟਬੁੱਕ ਹੋਣ ਵਾਂਗ ਹੈ ਜੋ ਹਰ ਚੀਜ਼ ਨੂੰ ਯਾਦ ਰੱਖਦੀ ਹੈ – ਹਰ ਕੀਸਟ੍ਰੋਕ, ਹਰ ਬਦਲਾਅ, ਹਰ "ਓਹ, ਇਸ ਨੇ ਸਭ ਕੁਝ ਤੋੜ ਦਿੱਤਾ" ਪਲ ਜਿਸਨੂੰ ਤੁਸੀਂ ਤੁਰੰਤ ਰੱਦ ਕਰ ਸਕਦੇ ਹੋ।
+
+ਮੈਂ ਸੱਚਮੁੱਚ – ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਔਖਾ ਮਹਿਸੂਸ ਹੋ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਮੈਂ ਸ਼ੁਰੂ ਕੀਤਾ, ਮੈਂ ਸੋਚਿਆ "ਮੈਂ ਸਿਰਫ ਆਪਣੇ ਫਾਈਲਾਂ ਨੂੰ ਸਧਾਰਨ ਤਰੀਕੇ ਨਾਲ ਸੇਵ ਕਿਉਂ ਨਹੀਂ ਕਰ ਸਕਦਾ?" ਪਰ ਇਸ 'ਤੇ ਮੇਰਾ ਭਰੋਸਾ ਕਰੋ: ਜਦੋਂ Git ਤੁਹਾਡੇ ਲਈ ਕਲਿੱਕ ਕਰਦਾ ਹੈ (ਅਤੇ ਇਹ ਕਰੇਗਾ!), ਤੁਹਾਡੇ ਕੋਲ ਉਹ ਲਾਈਟਬਲਬ ਪਲ ਹੋਵੇਗਾ ਜਿੱਥੇ ਤੁਸੀਂ ਸੋਚਦੇ ਹੋ "ਮੈਂ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿਵੇਂ ਕੋਡ ਕੀਤਾ?" ਇਹ ਬਿਲਕੁਲ ਉਹ ਸਮਝਣ ਵਾਂਗ ਹੈ ਕਿ ਤੁਸੀਂ ਉੱਡ ਸਕਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਹਰ ਜਗ੍ਹਾ ਪੈਦਲ ਜਾ ਰਹੇ ਹੋ!
+
+ਮੰਨ ਲਓ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਕੁਝ ਕੋਡ ਪ੍ਰੋਜੈਕਟ ਵਾਲਾ ਫੋਲਡਰ ਹੈ ਅਤੇ ਤੁਸੀਂ git - ਵਰਜਨ ਕੰਟਰੋਲ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ ਤਰੱਕੀ ਟ੍ਰੈਕ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਕੁਝ ਲੋਕ git ਦੀ ਵਰਤੋਂ ਨੂੰ ਆਪਣੇ ਭਵਿੱਖ ਦੇ ਆਪ ਨੂੰ ਪਿਆਰ ਭਰੇ ਪੱਤਰ ਲਿਖਣ ਦੇ ਨਾਲ ਤੁਲਨਾ ਕਰਦੇ ਹਨ। ਆਪਣੇ ਕਮਿਟ ਸੁਨੇਹੇ ਦਿਨਾਂ ਜਾਂ ਹਫ਼ਤਿਆਂ ਜਾਂ ਮਹੀਨਿਆਂ ਬਾਅਦ ਪੜ੍ਹਦੇ ਹੋ, ਤੁਸੀਂ ਯਾਦ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਫੈਸਲਾ ਕਿਉਂ ਕੀਤਾ, ਜਾਂ ਇੱਕ ਬਦਲਾਅ "ਰੋਲਬੈਕ" ਕਰ ਸਕਦੇ ਹੋ - ਇਹ ਹੈ, ਜਦੋਂ ਤੁਸੀਂ ਚੰਗੇ "ਕਮਿਟ ਸੁਨੇਹੇ" ਲਿਖਦੇ ਹੋ।
+
+```mermaid
+flowchart TD
+    A[📁 Your Project Files] --> B{Is it a Git Repository?}
+    B -->|No| C[git init]
+    B -->|Yes| D[Make Changes]
+    C --> D
+    D --> E[git add .]
+    E --> F["git commit -m 'message'"]
+    F --> G[git push]
+    G --> H[🌟 Code on GitHub!]
+    
+    H --> I{Want to collaborate?}
+    I -->|Yes| J[Fork & Clone]
+    I -->|No| D
+    J --> K[Create Branch]
+    K --> L[Make Changes]
+    L --> M[Pull Request]
+    M --> N[🎉 Contributing!]
+    
+    style A fill:#fff59d
+    style H fill:#c8e6c9
+    style N fill:#ff4081,color:#fff
+```
 
 ### ਟਾਸਕ: ਆਪਣਾ ਪਹਿਲਾ ਰਿਪੋਜ਼ਿਟਰੀ ਬਣਾਓ!
 
-> 🎯 **ਤੁਹਾਡਾ ਮਿਸ਼ਨ (ਅਤੇ ਮੈਂ ਤੁਹਾਡੇ ਲਈ ਬਹੁਤ ਉਤਸ਼ਾਹਿਤ ਹਾਂ!)**: ਅਸੀਂ ਇਕੱਠੇ ਤੁਹਾਡਾ ਪਹਿਲਾ GitHub ਰਿਪੋਜ਼ਿਟਰੀ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ! ਜਦੋਂ ਤੱਕ ਅਸੀਂ ਇੱਥੇ ਖਤਮ ਕਰਾਂਗੇ, ਤੁਹਾਡੇ ਕੋਲ ਇੰਟਰਨੈਟ ਦਾ ਆਪਣਾ ਛੋਟਾ ਜਿਹਾ ਕੋਨਾ ਹੋਵੇਗਾ ਜਿੱਥੇ ਤੁਹਾਡਾ ਕੋਡ ਰਹਿੰਦਾ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਆਪਣਾ ਪਹਿਲਾ "ਕਮਿਟ" ਕੀਤਾ ਹੋਵੇਗਾ (ਇਹ ਡਿਵੈਲਪਰ ਦੀ ਭਾਸ਼ਾ ਵਿੱਚ ਤੁਹਾਡੇ ਕੰਮ ਨੂੰ ਬਹੁਤ ਹੀ ਸਮਾਰਟ ਤਰੀਕੇ ਨਾਲ ਸੇਵ ਕਰਨ ਲਈ ਹੈ)। 
+> 🎯 **ਤੁਹਾਡਾ ਮਿਸ਼ਨ (ਅਤੇ ਮੈਂ ਤੁਹਾਡੇ ਲਈ ਬਹੁਤ ਉਤਸਾਹਿਤ ਹਾਂ!)**: ਅਸੀਂ ਇਕੱਠੇ ਤੁਹਾਡਾ ਪਹਿਲਾ GitHub ਰਿਪੋਜ਼ਿਟਰੀ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ! ਜਦੋਂ ਤੱਕ ਅਸੀਂ ਇੱਥੇ ਖਤਮ ਕਰਦੇ ਹਾਂ, ਤੁਹਾਡੇ ਕੋਡ ਦਾ ਆਪਣਾ ਛੋਟਾ ਇੰਟਰਨੈਟ ਕੋਨਾ ਹੋਵੇਗਾ, ਅਤੇ ਤੁਸੀਂ ਆਪਣਾ ਪਹਿਲਾ "ਕਮਿਟ" ਕੀਤਾ ਹੋਵੇਗਾ (ਇਹ ਡਿਵੈਲਪਰ ਭਾਸ਼ਾ ਵਿੱਚ ਤੁਹਾਡੇ ਕੰਮ ਨੂੰ ਬਹੁਤ ਸਮਾਰਟ ਤਰੀਕੇ ਨਾਲ ਸੇਵ ਕਰਨ ਲਈ ਹੈ)।  
 >
-> ਇਹ ਸੱਚਮੁੱਚ ਬਹੁਤ ਹੀ ਵਿਸ਼ੇਸ਼ ਪਲ ਹੈ - ਤੁਸੀਂ ਅੰਤਰਰਾਸ਼ਟਰੀ ਡਿਵੈਲਪਰਾਂ ਦੀ ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਹੋਣ ਜਾ ਰਹੇ ਹੋ! ਮੈਨੂੰ ਅਜੇ ਵੀ ਆਪਣਾ ਪਹਿਲਾ ਰਿਪੋ ਬਣਾਉਣ ਦੀ ਖੁਸ਼ੀ ਯਾਦ ਹੈ ਅਤੇ ਸੋਚਿਆ "ਵਾਹ, ਮੈਂ ਸੱਚਮੁੱਚ ਇਹ ਕਰ ਰਿਹਾ ਹਾਂ!"
+> ਇਹ ਸੱਚਮੁੱਚ ਬਹੁਤ ਖਾਸ ਪਲ ਹੈ – ਤੁਸੀਂ ਡਿਵੈਲਪਰਾਂ ਦੀ ਗਲੋਬਲ ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਅਧਿਕਾਰਤ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਹੋਣ ਜਾ ਰਹੇ ਹੋ! ਮੈਨੂੰ ਅਜੇ ਵੀ ਆਪਣਾ ਪਹਿਲਾ ਰਿਪੋ ਬਣਾਉਣ ਦਾ ਰੋਮਾਂਚ ਯਾਦ ਹੈ ਅਤੇ ਸੋਚਿਆ "ਵਾਹ, ਮੈਂ ਸੱਚਮੁੱਚ ਇਹ ਕਰ ਰਿਹਾ ਹਾਂ!"
+
+ਆਓ ਇਸ ਸਫ਼ਰ ਨੂੰ ਇਕੱਠੇ, ਕਦਮ-ਦਰ-ਕਦਮ ਤਰੀਕੇ ਨਾਲ ਕਰੀਏ। ਹਰ ਹਿੱਸੇ ਨਾਲ ਆਪਣਾ ਸਮਾਂ ਲਓ – ਜਲਦੀ ਕਰਨ ਲਈ ਕੋਈ ਇਨਾਮ ਨਹੀਂ ਹੈ, ਅਤੇ ਮੈਂ ਵਾਅਦਾ ਕਰਦਾ ਹਾਂ ਕਿ ਹਰ ਇੱਕ ਕਦਮ ਦਾ ਮਤਲਬ ਹੋਵੇਗਾ। ਯਾਦ ਰੱਖੋ, ਹਰ ਕੋਡਿੰਗ ਸਟਾਰ ਜਿਸਨੂੰ ਤੁਸੀਂ ਪ੍ਰਸ਼ੰਸਾ ਕਰਦੇ ਹੋ, ਇੱਕ ਵਾਰ ਬਿਲਕੁਲ ਉਥੇ ਬੈਠੇ ਹੁੰਦੇ ਸਨ ਜਿੱਥੇ ਤੁਸੀਂ ਹੁਣ ਹੋ, ਆਪਣਾ ਪਹਿਲਾ ਰਿਪੋ ਬਣਾਉਣ ਵਾਲੇ। ਇਹ ਕਿੰਨਾ ਸ਼ਾਨਦਾਰ ਹੈ?
+
+> ਵੀਡੀਓ ਵੇਖੋ  
+> 
+> [![Git ਅਤੇ GitHub ਬੁਨਿਆਦੀਆਂ ਵੀਡੀਓ](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
 
-ਆਓ ਇਸ ਸਫ਼ਰ ਨੂੰ ਇਕੱਠੇ ਕਰੀਏ, ਕਦਮ-ਦਰ-ਕਦਮ। ਹਰ ਹਿੱਸੇ ਨਾਲ ਆਪਣਾ ਸਮਾਂ ਲਓ - ਜਲਦੀ ਕਰਨ ਲਈ ਕੋਈ ਇਨਾਮ ਨਹੀਂ ਹੈ, ਅਤੇ ਮੈਂ ਵਾਅਦਾ ਕਰਦਾ ਹਾਂ ਕਿ ਹਰ ਇੱਕ ਕਦਮ ਦਾ ਮਤਲਬ ਬਣੇਗਾ। ਯਾਦ ਰੱਖੋ, ਹਰ ਇੱਕ ਕੋਡਿੰਗ ਸਟਾਰ ਜੋ ਤੁਹਾਨੂੰ ਪਸੰਦ ਹੈ, ਇੱਕ ਵਾਰ ਬਿਲਕੁਲ ਉਥੇ ਬੈਠਾ ਸੀ ਜਿੱਥੇ ਤੁਸੀਂ ਹੁਣ ਹੋ, ਆਪਣਾ ਪਹਿਲਾ ਰਿਪੋਜ਼ਿਟਰੀ ਬਣਾਉਣ ਲਈ ਤਿਆਰ। ਇਹ ਕਿੰਨਾ ਕੂਲ ਹੈ?
 
-> ਵੀਡੀ
-   - ਅਸੀਂ ਤੁਹਾਡੇ ਸਥਾਨਕ ਪ੍ਰੋਜੈਕਟ ਅਤੇ ਤੁਹਾਡੇ GitHub ਰਿਪੋਜ਼ਟਰੀ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਕਨੈਕਸ਼ਨ ਬਣਾਇਆ।
-   - "Origin" ਸਿਰਫ ਤੁਹਾਡੇ GitHub ਰਿਪੋਜ਼ਟਰੀ ਲਈ ਇੱਕ ਨਿਕਨਾਮ ਹੈ – ਇਹ ਬਿਲਕੁਲ ਉਸੇ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਆਪਣੇ ਫੋਨ ਵਿੱਚ ਇੱਕ ਸੰਪਰਕ ਜੋੜਦੇ ਹੋ।
-   - ਹੁਣ ਤੁਹਾਡਾ ਸਥਾਨਕ Git ਜਾਣਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਕਿੱਥੇ ਭੇਜਣਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਾਂਝਾ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ।
+**ਅਸੀਂ ਕੀ ਕੀਤਾ:**
+- ਅਸੀਂ ਤੁਹਾਡੇ ਸਥਾਨਕ ਪ੍ਰੋਜੈਕਟ ਅਤੇ ਤੁਹਾਡੇ GitHub ਰਿਪੋਜ਼ਟਰੀ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਕਨੈਕਸ਼ਨ ਬਣਾਈ।
+- "Origin" ਤੁਹਾਡੇ GitHub ਰਿਪੋਜ਼ਟਰੀ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਨਿਕ ਨੇਮ ਹੈ – ਜਿਵੇਂ ਤੁਸੀਂ ਆਪਣੇ ਫੋਨ ਵਿੱਚ ਇੱਕ ਸੰਪਰਕ ਸੇਵ ਕਰਦੇ ਹੋ।
+- ਹੁਣ ਤੁਹਾਡਾ ਸਥਾਨਕ Git ਜਾਣਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਕਿੱਥੇ ਭੇਜਣਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਾਂਝਾ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ।
 
-   💡 **ਸੌਖਾ ਤਰੀਕਾ**: ਜੇ ਤੁਹਾਡੇ ਕੋਲ GitHub CLI ਇੰਸਟਾਲ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇਹ ਇੱਕ ਕਮਾਂਡ ਵਿੱਚ ਕਰ ਸਕਦੇ ਹੋ:
+💡 **ਅਸਾਨ ਤਰੀਕਾ**: ਜੇ ਤੁਹਾਡੇ ਕੋਲ GitHub CLI ਇੰਸਟਾਲ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇਹ ਇੱਕ ਕਮਾਂਡ ਵਿੱਚ ਕਰ ਸਕਦੇ ਹੋ:
    ```bash
    gh repo create my-repo --public --push --source=.
    ```
 
-8. **ਤੁਹਾਡਾ ਕੋਡ GitHub 'ਤੇ ਭੇਜੋ** (ਵੱਡਾ ਮੌਕਾ!):
+8. **ਤੁਹਾਡਾ ਕੋਡ GitHub 'ਤੇ ਭੇਜੋ** (ਵੱਡਾ ਪਲ!):
 
    ```bash
    git push -u origin main
    ```
 
-   **🚀 ਇਹ ਹੈ! ਤੁਸੀਂ ਆਪਣਾ ਕੋਡ GitHub 'ਤੇ ਅੱਪਲੋਡ ਕਰ ਰਹੇ ਹੋ!**
-   
-   **ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-   - ਤੁਹਾਡੇ ਕੰਮ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਤੋਂ GitHub ਤੱਕ ਜਾ ਰਹੇ ਹਨ।
-   - `-u` ਫਲੈਗ ਇੱਕ ਸਥਾਈ ਕਨੈਕਸ਼ਨ ਸੈਟ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਭਵਿੱਖ ਵਿੱਚ ਪੁਸ਼ ਕਰਨਾ ਸੌਖਾ ਹੋਵੇ।
-   - "main" ਤੁਹਾਡੇ ਪ੍ਰਾਇਮਰੀ ਬ੍ਰਾਂਚ ਦਾ ਨਾਮ ਹੈ (ਜਿਵੇਂ ਮੁੱਖ ਫੋਲਡਰ)।
-   - ਇਸ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਭਵਿੱਖ ਵਿੱਚ ਅੱਪਲੋਡ ਲਈ ਸਿਰਫ `git push` ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ!
+**🚀 ਇਹ ਹੈ! ਤੁਸੀਂ ਆਪਣਾ ਕੋਡ GitHub 'ਤੇ ਅਪਲੋਡ ਕਰ ਰਹੇ ਹੋ!**
 
-   💡 **ਛੋਟਾ ਨੋਟ**: ਜੇ ਤੁਹਾਡੀ ਬ੍ਰਾਂਚ ਦਾ ਨਾਮ ਕੁਝ ਹੋਰ ਹੈ (ਜਿਵੇਂ "master"), ਤਾਂ ਉਹ ਨਾਮ ਵਰਤੋ। ਤੁਸੀਂ `git branch --show-current` ਨਾਲ ਚੈੱਕ ਕਰ ਸਕਦੇ ਹੋ।
+**ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
+- ਤੁਹਾਡੇ commits ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਤੋਂ GitHub ਤੱਕ ਜਾ ਰਹੇ ਹਨ।
+- `-u` ਫਲੈਗ ਇੱਕ ਸਥਾਈ ਕਨੈਕਸ਼ਨ ਸੈਟ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਭਵਿੱਖ ਦੇ pushes ਆਸਾਨ ਹੋਣ।
+- "main" ਤੁਹਾਡੇ ਪ੍ਰਾਇਮਰੀ ਬ੍ਰਾਂਚ ਦਾ ਨਾਮ ਹੈ (ਜਿਵੇਂ ਮੁੱਖ ਫੋਲਡਰ)।
+- ਇਸ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਭਵਿੱਖ ਦੇ ਅਪਲੋਡ ਲਈ ਸਿਰਫ `git push` ਲਿਖ ਸਕਦੇ ਹੋ!
 
-9. **ਤੁਹਾਡਾ ਨਵਾਂ ਰੋਜ਼ਾਨਾ ਕੋਡਿੰਗ ਰਿਥਮ** (ਇਹ ਜ਼ਰੂਰ ਆਦਤ ਬਣੇਗੀ!):
+💡 **ਛੋਟਾ ਨੋਟ**: ਜੇ ਤੁਹਾਡੀ ਬ੍ਰਾਂਚ ਦਾ ਨਾਮ ਕੁਝ ਹੋਰ ਹੈ (ਜਿਵੇਂ "master"), ਤਾਂ ਉਹ ਨਾਮ ਵਰਤੋ। ਤੁਸੀਂ `git branch --show-current` ਨਾਲ ਚੈੱਕ ਕਰ ਸਕਦੇ ਹੋ।
 
-   ਹੁਣ ਤੋਂ, ਜਦੋਂ ਵੀ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬਦਲਾਅ ਕਰਦੇ ਹੋ, ਤੁਹਾਡੇ ਕੋਲ ਇਹ ਸੌਖਾ ਤਿੰਨ-ਕਦਮ ਦਾ ਤਰੀਕਾ ਹੈ:
+9. **ਤੁਹਾਡਾ ਨਵਾਂ ਰੋਜ਼ਾਨਾ ਕੋਡਿੰਗ ਰਿਥਮ** (ਇਹ ਜ਼ਰੂਰ ਆਦਤ ਬਣ ਜਾਵੇਗਾ!):
+
+ਹੁਣ ਤੋਂ, ਜਦੋਂ ਵੀ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬਦਲਾਅ ਕਰਦੇ ਹੋ, ਤੁਹਾਡੇ ਕੋਲ ਇਹ ਸਧਾਰਨ ਤਿੰਨ-ਕਦਮਾਂ ਦੀ ਪ੍ਰਕਿਰਿਆ ਹੈ:
 
    ```bash
    git add .
@@ -155,135 +201,203 @@ git remote set-url origin git@github.com:username/repository.git
    git push
    ```
 
-   **ਇਹ ਤੁਹਾਡਾ ਕੋਡਿੰਗ ਹਾਰਟਬੀਟ ਬਣ ਜਾਂਦਾ ਹੈ:**
-   - ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਕੁਝ ਸ਼ਾਨਦਾਰ ਬਦਲਾਅ ਕਰੋ ✨
-   - `git add` ਨਾਲ ਉਨ੍ਹਾਂ ਨੂੰ ਸਟੇਜ ਕਰੋ ("ਹੇ Git, ਇਹ ਬਦਲਾਅ 'ਤੇ ਧਿਆਨ ਦਿਓ!")
-   - `git commit` ਅਤੇ ਇੱਕ ਵੇਰਵਾ ਭਰਪੂਰ ਸੁਨੇਹੇ ਨਾਲ ਸੇਵ ਕਰੋ (ਭਵਿੱਖ ਵਿੱਚ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਦਾ ਧੰਨਵਾਦ ਕਰੋਗੇ!)
-   - `git push` ਨਾਲ ਦੁਨੀਆ ਨਾਲ ਸਾਂਝਾ ਕਰੋ 🚀
-   - ਦੁਹਰਾਓ ਅਤੇ ਮੁੜ ਕਰੋ – ਸੱਚਮੁੱਚ, ਇਹ ਸਾਹ ਲੈਣ ਜਿੰਨਾ ਕੁਦਰਤੀ ਬਣ ਜਾਂਦਾ ਹੈ!
-
-   ਮੈਨੂੰ ਇਹ ਵਰਕਫਲੋ ਪਸੰਦ ਹੈ ਕਿਉਂਕਿ ਇਹ ਵੀਡੀਓ ਗੇਮ ਵਿੱਚ ਕਈ ਸੇਵ ਪਾਇੰਟਸ ਹੋਣ ਵਰਗਾ ਹੈ। ਕੋਈ ਬਦਲਾਅ ਕੀਤਾ ਜੋ ਤੁਹਾਨੂੰ ਪਸੰਦ ਹੈ? ਇਸਨੂੰ commit ਕਰੋ! ਕੁਝ ਖਤਰਨਾਕ ਅਜ਼ਮਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ – ਜੇਕਰ ਕੁਝ ਗਲਤ ਹੋਵੇ ਤਾਂ ਤੁਸੀਂ ਹਮੇਸ਼ਾ ਆਪਣੇ ਪਿਛਲੇ commit 'ਤੇ ਵਾਪਸ ਜਾ ਸਕਦੇ ਹੋ!
+**ਇਹ ਤੁਹਾਡਾ ਕੋਡਿੰਗ ਹਾਰਟਬੀਟ ਬਣ ਜਾਂਦਾ ਹੈ:**
+- ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਕੁਝ ਸ਼ਾਨਦਾਰ ਬਦਲਾਅ ਕਰੋ ✨
+- `git add` ਨਾਲ ਉਨ੍ਹਾਂ ਨੂੰ ਸਟੇਜ ਕਰੋ ("ਹੇ Git, ਇਹ ਬਦਲਾਅ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ!")
+- `git commit` ਅਤੇ ਇੱਕ ਵੇਰਵਾ ਵਾਲੇ ਸੁਨੇਹੇ ਨਾਲ ਉਨ੍ਹਾਂ ਨੂੰ ਸੇਵ ਕਰੋ (ਭਵਿੱਖ ਵਿੱਚ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਧੰਨਵਾਦ ਦੋਗੇ!)
+- `git push` ਨਾਲ ਉਨ੍ਹਾਂ ਨੂੰ ਦੁਨੀਆ ਨਾਲ ਸਾਂਝਾ ਕਰੋ 🚀
+- ਦੁਹਰਾਓ ਅਤੇ ਮੁੜ ਕਰੋ – ਸੱਚਮੁੱਚ, ਇਹ ਸਾਹ ਲੈਣ ਜਿੰਨਾ ਕੁਦਰਤੀ ਬਣ ਜਾਂਦਾ ਹੈ!
+
+ਮੈਨੂੰ ਇਹ ਵਰਕਫਲੋ ਪਸੰਦ ਹੈ ਕਿਉਂਕਿ ਇਹ ਵੀਡੀਓ ਗੇਮ ਵਿੱਚ ਕਈ ਸੇਵ ਪਾਇੰਟਸ ਹੋਣ ਵਰਗਾ ਹੈ। ਕੋਈ ਬਦਲਾਅ ਕੀਤਾ ਜੋ ਤੁਹਾਨੂੰ ਪਸੰਦ ਹੈ? Commit ਕਰੋ! ਕੁਝ ਖਤਰਨਾਕ ਅਜ਼ਮਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ – ਜੇਕਰ ਚੀਜ਼ਾਂ ਖਰਾਬ ਹੋ ਜਾਂਦੀਆਂ ਹਨ ਤਾਂ ਤੁਸੀਂ ਹਮੇਸ਼ਾ ਆਪਣੇ ਪਿਛਲੇ commit 'ਤੇ ਵਾਪਸ ਜਾ ਸਕਦੇ ਹੋ!
+
+> 💡 **ਸੁਝਾਅ**: ਤੁਸੀਂ `.gitignore` ਫਾਈਲ ਨੂੰ ਅਪਨਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਜੋ ਉਹ ਫਾਈਲਾਂ ਜੋ ਤੁਸੀਂ ਟਰੈਕ ਨਹੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ GitHub 'ਤੇ ਨਾ ਆਉਣ – ਜਿਵੇਂ ਉਹ ਨੋਟਸ ਫਾਈਲ ਜੋ ਤੁਸੀਂ ਉਸੇ ਫੋਲਡਰ ਵਿੱਚ ਸਟੋਰ ਕਰਦੇ ਹੋ ਪਰ ਇੱਕ ਪਬਲਿਕ ਰਿਪੋਜ਼ਟਰੀ 'ਤੇ ਕੋਈ ਜਗ੍ਹਾ ਨਹੀਂ ਰੱਖਦੀ। `.gitignore` ਫਾਈਲਾਂ ਲਈ ਟੈਂਪਲੇਟ [`.gitignore templates`](https://github.com/github/gitignore) 'ਤੇ ਮਿਲ ਸਕਦੇ ਹਨ ਜਾਂ [gitignore.io](https://www.toptal.com/developers/gitignore) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਬਣਾਈ ਜਾ ਸਕਦੀ ਹੈ।
+
+### 🧠 **ਪਹਿਲੀ ਰਿਪੋਜ਼ਟਰੀ ਚੈੱਕ-ਇਨ: ਇਹ ਕਿਵੇਂ ਲੱਗਾ?**
+
+**ਇੱਕ ਪਲ ਲਈ ਜਸ਼ਨ ਮਨਾਓ ਅਤੇ ਵਿਚਾਰ ਕਰੋ:**
+- ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਪਹਿਲੀ ਵਾਰ GitHub 'ਤੇ ਦੇਖ ਕੇ ਕਿਵੇਂ ਲੱਗਾ?
+- ਕਿਹੜਾ ਕਦਮ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਗੁੰਝਲਦਾਰ ਲੱਗਾ, ਅਤੇ ਕਿਹੜਾ ਹੈਰਾਨੀਜਨਕ ਤੌਰ 'ਤੇ ਆਸਾਨ ਲੱਗਾ?
+- ਕੀ ਤੁਸੀਂ `git add`, `git commit`, ਅਤੇ `git push` ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਨੂੰ ਆਪਣੇ ਸ਼ਬਦਾਂ ਵਿੱਚ ਸਮਝਾ ਸਕਦੇ ਹੋ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> LocalFiles: Create project
+    LocalFiles --> Staged: git add .
+    Staged --> Committed: git commit
+    Committed --> GitHub: git push
+    GitHub --> [*]: Success! 🎉
+    
+    note right of Staged
+        Files ready to save
+    end note
+    
+    note right of Committed
+        Snapshot created
+    end note
+```
 
-   > 💡 **ਸਲਾਹ**: ਤੁਸੀਂ `.gitignore` ਫਾਈਲ ਨੂੰ ਅਪਨਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਜੋ ਉਹ ਫਾਈਲਾਂ ਜੋ ਤੁਸੀਂ GitHub 'ਤੇ ਟ੍ਰੈਕ ਨਹੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ, ਜਿਵੇਂ ਕਿ ਉਹ ਨੋਟਸ ਫਾਈਲ ਜੋ ਤੁਸੀਂ ਉਸੇ ਫੋਲਡਰ ਵਿੱਚ ਸਟੋਰ ਕਰਦੇ ਹੋ ਪਰ ਜਨਤਕ ਰਿਪੋਜ਼ਟਰੀ 'ਤੇ ਇਸਦਾ ਕੋਈ ਸਥਾਨ ਨਹੀਂ ਹੈ। `.gitignore` ਫਾਈਲਾਂ ਲਈ ਟੈਂਪਲੇਟ [`.gitignore templates`](https://github.com/github/gitignore) 'ਤੇ ਮਿਲ ਸਕਦੇ ਹਨ ਜਾਂ [gitignore.io](https://www.toptal.com/developers/gitignore) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਬਣਾਏ ਜਾ ਸਕਦੇ ਹਨ।
+> **ਯਾਦ ਰੱਖੋ**: ਅਨੁਭਵੀ ਡਿਵੈਲਪਰ ਵੀ ਕਈ ਵਾਰ ਸਹੀ ਕਮਾਂਡਾਂ ਭੁੱਲ ਜਾਂਦੇ ਹਨ। ਇਹ ਵਰਕਫਲੋ ਨੂੰ ਮਾਸਲ ਮੈਮੋਰੀ ਬਣਾਉਣ ਲਈ ਅਭਿਆਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ - ਤੁਸੀਂ ਬਹੁਤ ਵਧੀਆ ਕਰ ਰਹੇ ਹੋ!
 
 #### ਆਧੁਨਿਕ Git ਵਰਕਫਲੋਜ਼
 
-ਇਹ ਆਧੁਨਿਕ ਅਭਿਆਸ ਅਪਨਾਉਣ 'ਤੇ ਵਿਚਾਰ ਕਰੋ:
+ਇਹ ਆਧੁਨਿਕ ਅਭਿਆਸਾਂ ਨੂੰ ਅਪਨਾਉਣ ਬਾਰੇ ਸੋਚੋ:
 
 - **Conventional Commits**: `feat:`, `fix:`, `docs:` ਆਦਿ ਵਰਗੇ ਮਿਆਰੀ commit ਸੁਨੇਹਾ ਫਾਰਮੈਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ [conventionalcommits.org](https://www.conventionalcommits.org/) 'ਤੇ ਜਾਓ।
 - **Atomic commits**: ਹਰ commit ਨੂੰ ਇੱਕ ਹੀ ਤਰਕਸੰਗਤ ਬਦਲਾਅ ਦਾ ਪ੍ਰਤੀਨਿਧੀ ਬਣਾਓ।
-- **ਅਕਸਰ commit ਕਰੋ**: ਵੱਡੇ, ਕਦੇ-ਕਦੇ commit ਕਰਨ ਦੀ ਬਜਾਏ ਵੇਰਵਾ ਭਰਪੂਰ ਸੁਨੇਹਿਆਂ ਨਾਲ ਅਕਸਰ commit ਕਰੋ।
+- **Frequent commits**: ਵੱਡੇ, ਕਦਰਾਂ commit ਦੀ ਬਜਾਏ ਵਿਆਖਿਆਤਮਕ ਸੁਨੇਹਿਆਂ ਨਾਲ ਅਕਸਰ commit ਕਰੋ।
 
 #### Commit ਸੁਨੇਹੇ
 
-ਇੱਕ ਵਧੀਆ Git commit ਵਿਸ਼ਾ ਲਾਈਨ ਹੇਠਾਂ ਦਿੱਤੇ ਵਾਕ ਨੂੰ ਪੂਰਾ ਕਰਦੀ ਹੈ:
-ਜੇ ਲਾਗੂ ਕੀਤਾ ਗਿਆ, ਤਾਂ ਇਹ commit <ਤੁਹਾਡਾ ਵਿਸ਼ਾ ਲਾਈਨ ਇੱਥੇ> ਕਰੇਗਾ।
+ਇੱਕ ਸ਼ਾਨਦਾਰ Git commit ਵਿਸ਼ਾ ਲਾਈਨ ਹੇਠਾਂ ਦਿੱਤੇ ਵਾਕ ਨੂੰ ਪੂਰਾ ਕਰਦੀ ਹੈ:
+ਜੇ ਲਾਗੂ ਕੀਤਾ ਗਿਆ, ਤਾਂ ਇਹ commit <ਤੁਹਾਡੀ ਵਿਸ਼ਾ ਲਾਈਨ ਇੱਥੇ>।
 
-ਵਿਸ਼ਾ ਲਈ ਹੁਕਮਵਾਚਕ, ਵਰਤਮਾਨ ਕਾਲ ਦਾ ਪ੍ਰਯੋਗ ਕਰੋ: "change" ਨਾ ਕਿ "changed" ਜਾਂ "changes"।  
-ਜਿਵੇਂ ਕਿ ਵਿਸ਼ਾ ਵਿੱਚ, ਬਾਡੀ (ਵਿਕਲਪਿਕ) ਵਿੱਚ ਵੀ ਹੁਕਮਵਾਚਕ, ਵਰਤਮਾਨ ਕਾਲ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਬਾਡੀ ਵਿੱਚ ਬਦਲਾਅ ਲਈ ਪ੍ਰੇਰਣਾ ਸ਼ਾਮਲ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਅਤੇ ਇਸਨੂੰ ਪਿਛਲੇ ਵਿਹਾਰ ਨਾਲ ਵਿਰੋਧ ਵਿੱਚ ਦਰਸਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਤੁਸੀਂ `ਕਿਉਂ`, ਨਾ ਕਿ `ਕਿਵੇਂ` ਨੂੰ ਸਮਝਾ ਰਹੇ ਹੋ।
+ਵਿਸ਼ਾ ਲਈ ਹੁਕਮਵਾਚਕ, ਵਰਤਮਾਨ ਕਾਲ ਦਾ ਪ੍ਰਯੋਗ ਕਰੋ: "change" ਨਾ ਕਿ "changed" ਜਾਂ "changes"। ਜਿਵੇਂ ਵਿਸ਼ਾ ਵਿੱਚ, ਬਾਡੀ (ਵਿਕਲਪਿਕ) ਵਿੱਚ ਵੀ ਹੁਕਮਵਾਚਕ, ਵਰਤਮਾਨ ਕਾਲ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਬਾਡੀ ਵਿੱਚ ਬਦਲਾਅ ਲਈ ਪ੍ਰੇਰਣਾ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਪਿਛਲੇ ਵਿਹਾਰ ਨਾਲ ਵਿਰੋਧ ਵਿੱਚ ਦਿਖਾਓ। ਤੁਸੀਂ `ਕਿਉਂ`, ਨਾ ਕਿ `ਕਿਵੇਂ` ਨੂੰ ਸਮਝਾ ਰਹੇ ਹੋ।
 
-✅ ਕੁਝ ਮਿੰਟ ਲਗਾਓ GitHub 'ਤੇ ਘੁੰਮਣ ਲਈ। ਕੀ ਤੁਸੀਂ ਇੱਕ ਬਹੁਤ ਵਧੀਆ commit ਸੁਨੇਹਾ ਲੱਭ ਸਕਦੇ ਹੋ? ਕੀ ਤੁਸੀਂ ਇੱਕ ਬਹੁਤ ਹੀ ਘੱਟ ਸੁਨੇਹਾ ਲੱਭ ਸਕਦੇ ਹੋ? ਤੁਹਾਡੇ ਵਿਚਾਰ ਵਿੱਚ commit ਸੁਨੇਹੇ ਵਿੱਚ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਅਤੇ ਲਾਭਦਾਇਕ ਜਾਣਕਾਰੀ ਕੀ ਹੈ?
+✅ ਕੁਝ ਮਿੰਟ ਲਗਾਓ GitHub 'ਤੇ ਸਰਫ ਕਰਨ ਲਈ। ਕੀ ਤੁਸੀਂ ਇੱਕ ਬਹੁਤ ਹੀ ਸ਼ਾਨਦਾਰ commit ਸੁਨੇਹਾ ਲੱਭ ਸਕਦੇ ਹੋ? ਕੀ ਤੁਸੀਂ ਇੱਕ ਬਹੁਤ ਹੀ ਘੱਟ ਸੁਨੇਹਾ ਲੱਭ ਸਕਦੇ ਹੋ? ਤੁਹਾਡੇ ਵਿਚਾਰ ਵਿੱਚ commit ਸੁਨੇਹੇ ਵਿੱਚ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਅਤੇ ਲਾਭਦਾਇਕ ਜਾਣਕਾਰੀ ਕੀ ਹੈ?
 
 ## ਹੋਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ (ਮਜ਼ੇਦਾਰ ਹਿੱਸਾ!)
 
-ਤਿਆਰ ਰਹੋ ਕਿਉਂਕਿ ਇਹ ਹੈ ਜਿੱਥੇ GitHub ਬਿਲਕੁਲ ਜਾਦੂਈ ਬਣ ਜਾਂਦਾ ਹੈ! 🪄 ਤੁਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਮੈਨੇਜ ਕਰਨਾ ਸਿੱਖ ਚੁੱਕੇ ਹੋ, ਪਰ ਹੁਣ ਅਸੀਂ ਮੇਰੇ ਪਸੰਦੀਦਾ ਹਿੱਸੇ ਵਿੱਚ ਡੁੱਬਣ ਜਾ ਰਹੇ ਹਾਂ – ਦੁਨੀਆ ਭਰ ਦੇ ਸ਼ਾਨਦਾਰ ਲੋਕਾਂ ਨਾਲ ਸਹਿਯੋਗ।
+ਤਿਆਰ ਰਹੋ ਕਿਉਂਕਿ ਇਹ ਹੈ ਜਿੱਥੇ GitHub ਬਿਲਕੁਲ ਜਾਦੂਈ ਬਣ ਜਾਂਦਾ ਹੈ! 🪄 ਤੁਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਮੈਨੇਜ ਕਰਨ ਵਿੱਚ ਮਾਹਰ ਹੋ ਗਏ ਹੋ, ਪਰ ਹੁਣ ਅਸੀਂ ਮੇਰੇ ਬਿਲਕੁਲ ਮਨਪਸੰਦ ਹਿੱਸੇ ਵਿੱਚ ਡੁੱਬ ਰਹੇ ਹਾਂ – ਦੁਨੀਆ ਭਰ ਦੇ ਸ਼ਾਨਦਾਰ ਲੋਕਾਂ ਨਾਲ ਸਹਿਯੋਗ।
 
-ਇਸ ਤਸਵੀਰ ਦੀ ਕਲਪਨਾ ਕਰੋ: ਤੁਸੀਂ ਕੱਲ੍ਹ ਸਵੇਰੇ ਉੱਠਦੇ ਹੋ ਅਤੇ ਵੇਖਦੇ ਹੋ ਕਿ ਟੋਕੀਓ ਵਿੱਚ ਕਿਸੇ ਨੇ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸੁਧਾਰਿਆ ਜਦੋਂ ਤੁਸੀਂ ਸੌ ਰਹੇ ਸੀ। ਫਿਰ ਬਰਲਿਨ ਵਿੱਚ ਕੋਈ ਬੱਗ ਨੂੰ ਠੀਕ ਕਰਦਾ ਹੈ ਜਿਸ 'ਤੇ ਤੁਸੀਂ ਫਸੇ ਹੋਏ ਸੀ। ਦੁਪਹਿਰ ਤੱਕ, ਸਾਓ ਪਾਓਲੋ ਵਿੱਚ ਇੱਕ ਡਿਵੈਲਪਰ ਨੇ ਇੱਕ ਫੀਚਰ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ ਜਿਸ ਬਾਰੇ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਵੀ ਨਹੀਂ ਸੀ। ਇਹ ਵਿਗਿਆਨਕ ਕਲਪਨਾ ਨਹੀਂ ਹੈ – ਇਹ ਸਿਰਫ GitHub ਯੂਨੀਵਰਸ ਵਿੱਚ ਇੱਕ ਮੰਗਲਵਾਰ ਹੈ!
+ਇਸ ਦੀ ਕਲਪਨਾ ਕਰੋ: ਤੁਸੀਂ ਕੱਲ੍ਹ ਸਵੇਰੇ ਉੱਠਦੇ ਹੋ ਅਤੇ ਵੇਖਦੇ ਹੋ ਕਿ ਟੋਕੀਓ ਵਿੱਚ ਕਿਸੇ ਨੇ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸੁਧਾਰਿਆ ਜਦੋਂ ਤੁਸੀਂ ਸੌ ਰਹੇ ਸੀ। ਫਿਰ ਬਰਲਿਨ ਵਿੱਚ ਕਿਸੇ ਨੇ ਇੱਕ ਬੱਗ ਨੂੰ ਠੀਕ ਕੀਤਾ ਜਿਸ 'ਤੇ ਤੁਸੀਂ ਫਸੇ ਹੋਏ ਸੀ। ਦੁਪਹਿਰ ਤੱਕ, ਸਾਓ ਪਾਓਲੋ ਵਿੱਚ ਇੱਕ ਡਿਵੈਲਪਰ ਨੇ ਇੱਕ ਫੀਚਰ ਸ਼ਾਮਲ ਕੀਤਾ ਜਿਸ ਬਾਰੇ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਵੀ ਨਹੀਂ ਸੀ। ਇਹ ਵਿਗਿਆਨਕ ਕਲਪਨਾ ਨਹੀਂ ਹੈ – ਇਹ ਸਿਰਫ਼ GitHub ਯੂਨੀਵਰਸ ਵਿੱਚ ਇੱਕ ਮੰਗਲਵਾਰ ਹੈ!
 
-ਜੋ ਚੀਜ਼ ਮੈਨੂੰ ਸੱਚਮੁੱਚ ਉਤਸ਼ਾਹਿਤ ਕਰਦੀ ਹੈ ਉਹ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਸਹਿਯੋਗ ਦੇ ਜੋ ਹੁਨਰ ਸਿੱਖਣ ਜਾ ਰਹੇ ਹੋ? ਇਹ EXACT ਉਹੀ ਵਰਕਫਲੋਜ਼ ਹਨ ਜੋ Google, Microsoft, ਅਤੇ ਤੁਹਾਡੇ ਪਸੰਦੀਦਾ startups ਵਿੱਚ ਟੀਮਾਂ ਹਰ ਰੋਜ਼ ਵਰਤਦੀਆਂ ਹਨ। ਤੁਸੀਂ ਸਿਰਫ ਇੱਕ ਕੂਲ ਟੂਲ ਨਹੀਂ ਸਿੱਖ ਰਹੇ ਹੋ – ਤੁਸੀਂ ਉਹ ਗੁਪਤ ਭਾਸ਼ਾ ਸਿੱਖ ਰਹੇ ਹੋ ਜੋ ਪੂਰੀ ਸੌਫਟਵੇਅਰ ਦੁਨੀਆ ਨੂੰ ਇਕੱਠੇ ਕੰਮ ਕਰਨ ਲਈ ਬਣਾਉਂਦੀ ਹੈ।
+ਜੋ ਚੀਜ਼ ਮੈਨੂੰ ਬਹੁਤ ਉਤਸ਼ਾਹਿਤ ਕਰਦੀ ਹੈ ਉਹ ਹੈ ਕਿ ਤੁਸੀਂ ਸਹਿਯੋਗ ਦੇ ਜੋ ਹੁਨਰ ਸਿੱਖਣ ਵਾਲੇ ਹੋ? ਇਹ EXACT ਉਹੀ ਵਰਕਫਲੋਜ਼ ਹਨ ਜੋ Google, Microsoft, ਅਤੇ ਤੁਹਾਡੇ ਮਨਪਸੰਦ startups ਵਿੱਚ ਟੀਮਾਂ ਹਰ ਰੋਜ਼ ਵਰਤਦੀਆਂ ਹਨ। ਤੁਸੀਂ ਸਿਰਫ਼ ਇੱਕ ਕੂਲ ਟੂਲ ਨਹੀਂ ਸਿੱਖ ਰਹੇ – ਤੁਸੀਂ ਉਹ ਗੁਪਤ ਭਾਸ਼ਾ ਸਿੱਖ ਰਹੇ ਹੋ ਜੋ ਪੂਰੇ ਸੌਫਟਵੇਅਰ ਸੰਸਾਰ ਨੂੰ ਇਕੱਠੇ ਕੰਮ ਕਰਨ ਲਈ ਬਣਾਉਂਦੀ ਹੈ।
 
-ਸੱਚਮੁੱਚ, ਜਦੋਂ ਤੁਹਾਨੂੰ ਆਪਣਾ ਪਹਿਲਾ pull request merge ਹੋਣ ਦਾ ਜ਼ੋਰਦਾਰ ਅਨੁਭਵ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਸਮਝ ਜਾਓਗੇ ਕਿ ਡਿਵੈਲਪਰ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਬਾਰੇ ਕਿਉਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਜਜ਼ਬਾਤੀ ਹੁੰਦੇ ਹਨ। ਇਹ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਵੱਡੇ, ਸਭ ਤੋਂ ਰਚਨਾਤਮਕ ਟੀਮ ਪ੍ਰੋਜੈਕਟ ਦਾ ਹਿੱਸਾ ਹੋਣ ਵਰਗਾ ਹੈ!
+ਸੱਚਮੁੱਚ, ਜਦੋਂ ਤੁਸੀਂ ਆਪਣਾ ਪਹਿਲਾ pull request merge ਹੋਣ ਦਾ ਰੁਸ਼ ਅਨੁਭਵ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਮਝ ਜਾਓਗੇ ਕਿ ਡਿਵੈਲਪਰ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਬਾਰੇ ਕਿਉਂ ਬਹੁਤ ਜਜ਼ਬਾਤੀ ਹੋ ਜਾਂਦੇ ਹਨ। ਇਹ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਵੱਡੇ, ਸਭ ਤੋਂ ਰਚਨਾਤਮਕ ਟੀਮ ਪ੍ਰੋਜੈਕਟ ਦਾ ਹਿੱਸਾ ਹੋਣ ਵਰਗਾ ਹੈ!
 
 > ਵੀਡੀਓ ਦੇਖੋ
 >
-> [![Git ਅਤੇ GitHub ਬੁਨਿਆਦੀਆਂ ਦੀ ਵੀਡੀਓ](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+> [![Git ਅਤੇ GitHub ਬੇਸਿਕਸ ਵੀਡੀਓ](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
 
 GitHub 'ਤੇ ਚੀਜ਼ਾਂ ਪਾਉਣ ਦਾ ਮੁੱਖ ਕਾਰਨ ਹੋਰ ਡਿਵੈਲਪਰਾਂ ਨਾਲ ਸਹਿਯੋਗ ਸੰਭਵ ਬਣਾਉਣਾ ਸੀ।
 
-ਤੁਹਾਡੇ ਰਿਪੋਜ਼ਟਰੀ ਵਿੱਚ, `Insights > Community` 'ਤੇ ਜਾਓ ਤਾਂ ਜੋ ਤੁਸੀਂ ਦੇਖ ਸਕੋ ਕਿ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਸਿਫਾਰਸ਼ੀ community standards ਨਾਲ ਕਿਵੇਂ ਤੁਲਨਾ ਕਰਦਾ ਹੈ।
+```mermaid
+flowchart LR
+    A[🔍 Find Project] --> B[🍴 Fork Repository]
+    B --> C[📥 Clone to Local]
+    C --> D[🌿 Create Branch]
+    D --> E[✏️ Make Changes]
+    E --> F[💾 Commit Changes]
+    F --> G[📤 Push Branch]
+    G --> H[🔄 Create Pull Request]
+    H --> I{Maintainer Review}
+    I -->|✅ Approved| J[🎉 Merge!]
+    I -->|❓ Changes Requested| K[📝 Make Updates]
+    K --> F
+    J --> L[🧹 Clean Up Branches]
+    
+    style A fill:#e3f2fd
+    style J fill:#e8f5e8
+    style L fill:#fff3e0
+```
+
+ਤੁਹਾਡੇ ਰਿਪੋਜ਼ਟਰੀ ਵਿੱਚ, `Insights > Community` 'ਤੇ ਜਾਓ ਤਾਂ ਜੋ ਤੁਸੀਂ ਵੇਖ ਸਕੋ ਕਿ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਸਿਫਾਰਸ਼ੀ community ਮਿਆਰਾਂ ਨਾਲ ਕਿਵੇਂ ਤੁਲਨਾ ਕਰਦਾ ਹੈ।
 
-ਤੁਹਾਡਾ ਰਿਪੋਜ਼ਟਰੀ ਪੇਸ਼ੇਵਰ ਅਤੇ ਸਵਾਗਤਯੋਗ ਬਣਾਉਣ ਲਈ ਚਾਹੁੰਦੇ ਹੋ? ਆਪਣੇ ਰਿਪੋਜ਼ਟਰੀ 'ਤੇ ਜਾਓ ਅਤੇ `Insights > Community` 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਇਹ ਸ਼ਾਨਦਾਰ ਫੀਚਰ ਤੁਹਾਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ GitHub community ਦੁਆਰਾ "ਵਧੀਆ ਰਿਪੋਜ਼ਟਰੀ ਅਭਿਆਸ" ਮੰਨੇ ਜਾਂਦੇ ਹਨ।
+ਤੁਹਾਡੇ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਪੇਸ਼ੇਵਰ ਅਤੇ ਸਵਾਗਤਯੋਗ ਬਣਾਉਣ ਲਈ ਚਾਹੁੰਦੇ ਹੋ? ਆਪਣੇ ਰਿਪੋਜ਼ਟਰੀ 'ਤੇ ਜਾਓ ਅਤੇ `Insights > Community` 'ਤੇ ਕਲਿਕ ਕਰੋ। ਇਹ ਸ਼ਾਨਦਾਰ ਫੀਚਰ ਤੁਹਾਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ GitHub community ਦੁਆਰਾ "ਵਧੀਆ ਰਿਪੋਜ਼ਟਰੀ ਅਭਿਆਸ" ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
 
-> 🎯 **ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਚਮਕਦਾਰ ਬਣਾਉਣਾ**: ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ-ਸੰਗਠਿਤ ਰਿਪੋਜ਼ਟਰੀ ਜਿਸ ਵਿੱਚ ਵਧੀਆ ਦਸਤਾਵੇਜ਼ ਹੈ, ਇੱਕ ਸਾਫ਼, ਸਵਾਗਤਯੋਗ storefront ਹੋਣ ਵਰਗਾ ਹੈ। ਇਹ ਲੋਕਾਂ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਕੰਮ ਦੀ ਪਰਵਾਹ ਕਰਦੇ ਹੋ ਅਤੇ ਹੋਰਾਂ ਨੂੰ ਯੋਗਦਾਨ ਦੇਣ ਲਈ ਪ੍ਰੇਰਿਤ ਕਰਦਾ ਹੈ!
+> 🎯 **ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਚਮਕਦਾਰ ਬਣਾਉਣਾ**: ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ ਰਿਪੋਜ਼ਟਰੀ ਜਿਸ ਵਿੱਚ ਚੰਗੀ ਦਸਤਾਵੇਜ਼ੀ ਹੈ, ਇੱਕ ਸਾਫ਼, ਸਵਾਗਤਯੋਗ storefront ਹੋਣ ਵਰਗਾ ਹੈ। ਇਹ ਲੋਕਾਂ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਕੰਮ ਦੀ ਪਰਵਾਹ ਕਰਦੇ ਹੋ ਅਤੇ ਹੋਰਾਂ ਨੂੰ ਯੋਗਦਾਨ ਦੇਣ ਲਈ ਪ੍ਰੇਰਿਤ ਕਰਦਾ ਹੈ!
 
 **ਇੱਕ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਸ਼ਾਨਦਾਰ ਬਣਾਉਣ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ:**
 
-| ਕੀ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ | ਕਿਉਂ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ | ਤੁਹਾਡੇ ਲਈ ਕੀ ਕਰਦਾ ਹੈ |
-|-------------------|-----------------------|-----------------------|
+| ਕੀ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ | ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ | ਇਹ ਤੁਹਾਡੇ ਲਈ ਕੀ ਕਰਦਾ ਹੈ |
+|-------------------|---------------------|-----------------------|
 | **Description** | ਪਹਿਲਾ ਪ੍ਰਭਾਵ ਮਹੱਤਵਪੂਰਨ ਹੈ! | ਲੋਕ ਤੁਰੰਤ ਜਾਣਦੇ ਹਨ ਕਿ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਕੀ ਕਰਦਾ ਹੈ |
 | **README** | ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦਾ ਮੁੱਖ ਪੰਨਾ | ਨਵੇਂ ਵਿਜ਼ਟਰਾਂ ਲਈ ਇੱਕ ਦੋਸਤਾਨਾ ਟੂਰ ਗਾਈਡ |
 | **Contributing Guidelines** | ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਮਦਦ ਦਾ ਸਵਾਗਤ ਕਰਦੇ ਹੋ | ਲੋਕ ਜਾਣਦੇ ਹਨ ਕਿ ਉਹ ਤੁਹਾਡੀ ਮਦਦ ਕਿਵੇਂ ਕਰ ਸਕਦੇ ਹਨ |
-| **Code of Conduct** | ਇੱਕ ਦੋਸਤਾਨਾ ਜਗ੍ਹਾ ਬਣਾਉਂਦਾ ਹੈ | ਹਰ ਕੋਈ ਭਾਗ ਲੈਣ ਲਈ ਸਵਾਗਤ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ |
-| **License** | ਕਾਨੂੰਨੀ ਸਪਸ਼ਟਤਾ | ਹੋਰ ਲੋਕ ਜਾਣਦੇ ਹਨ ਕਿ ਉਹ ਤੁਹਾਡੇ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰ ਸਕਦੇ ਹਨ |
-| **Security Policy** | ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਹੋ | ਪੇਸ਼ੇਵਰ ਅਭਿਆਸਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ |
+| **Code of Conduct** | ਇੱਕ ਦੋਸਤਾਨਾ ਜਗ੍ਹਾ ਬਣਾਉਂਦਾ ਹੈ | ਹਰ ਕੋਈ ਯੋਗਦਾਨ ਦੇਣ ਲਈ ਸਵਾਗਤ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ |
+| **License** | ਕਾਨੂੰਨੀ ਸਪਸ਼ਟਤਾ | ਹੋਰ ਲੋਕ ਜਾਣਦੇ ਹਨ ਕਿ ਉਹ ਤੁਹਾਡਾ ਕੋਡ ਕਿਵੇਂ ਵਰਤ ਸਕਦੇ ਹਨ |
+| **Security Policy** | ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਹੋ | ਪੇਸ਼ੇਵਰ ਅਭਿਆਸਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਦਾ ਹੈ |
 
-> 💡 **Pro Tip**: GitHub ਇਨ੍ਹਾਂ ਸਾਰੀਆਂ ਫਾਈਲਾਂ ਲਈ ਟੈਂਪਲੇਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਨਵਾਂ ਰਿਪੋਜ਼ਟਰੀ ਬਣਾਉਣ ਸਮੇਂ, ਇਨ੍ਹਾਂ ਫਾਈਲਾਂ ਨੂੰ ਸਵੈ-ਚਲਿਤ ਤੌਰ 'ਤੇ ਜਨਰੇਟ ਕਰਨ ਲਈ ਬਾਕਸਾਂ ਨੂੰ ਚੈੱਕ ਕਰੋ।
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: GitHub ਇਹਨਾਂ ਫਾਈਲਾਂ ਲਈ ਟੈਂਪਲੇਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇੱਕ ਨਵਾਂ ਰਿਪੋਜ਼ਟਰੀ ਬਣਾਉਣ ਸਮੇਂ, ਇਹਨਾਂ ਫਾਈਲਾਂ ਨੂੰ ਸਵੈਚਾਲਕ ਤੌਰ 'ਤੇ ਜਨਰੇਟ ਕਰਨ ਲਈ ਬਾਕਸਾਂ ਨੂੰ ਚੈੱਕ ਕਰੋ।
 
 **ਆਧੁਨਿਕ GitHub ਫੀਚਰਾਂ ਦੀ ਖੋਜ ਕਰਨ ਲਈ:**
 
 🤖 **Automation & CI/CD:**
-- **GitHub Actions** ਆਟੋਮੈਟਿਕ ਟੈਸਟਿੰਗ ਅਤੇ ਡਿਪਲੋਇਮੈਂਟ ਲਈ
-- **Dependabot** ਆਟੋਮੈਟਿਕ ਡਿਪੈਂਡੈਂਸੀ ਅੱਪਡੇਟ ਲਈ
+- **GitHub Actions** ਸਵੈਚਾਲਕ ਟੈਸਟਿੰਗ ਅਤੇ ਡਿਪਲੌਇਮੈਂਟ ਲਈ
+- **Dependabot** ਸਵੈਚਾਲਕ dependency ਅਪਡੇਟ ਲਈ
 
 💬 **Community & Project Management:**
 - **GitHub Discussions** community ਗੱਲਬਾਤਾਂ ਲਈ
 - **GitHub Projects** kanban-style ਪ੍ਰੋਜੈਕਟ ਮੈਨੇਜਮੈਂਟ ਲਈ
 - **Branch protection rules** ਕੋਡ ਗੁਣਵੱਤਾ ਮਿਆਰਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ
 
-ਇਹ ਸਾਰੇ ਸਰੋਤ ਨਵੀਂ ਟੀਮ ਮੈਂਬਰਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨਗੇ। ਅਤੇ ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਉਹ ਚੀਜ਼ਾਂ ਹਨ ਜੋ ਨਵੇਂ ਯੋਗਦਾਨਕਰਤਾ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਦੇਖਣ ਤੋਂ ਪਹਿਲਾਂ ਦੇਖਦੇ ਹਨ, ਇਹ ਪਤਾ ਕਰਨ ਲਈ ਕਿ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਉਹ ਆਪਣਾ ਸਮਾਂ ਬਿਤਾਉਣ ਲਈ ਚਾਹੁੰਦੇ ਹਨ।
+ਇਹ ਸਾਰੇ ਸਰੋਤ ਨਵੀਂ ਟੀਮ ਮੈਂਬਰਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਅਤੇ ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਉਹ ਚੀਜ਼ਾਂ ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਨਵੇਂ ਯੋਗਦਾਨਕਰਤਾ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਦੇਖਣ ਤੋਂ ਪਹਿਲਾਂ ਵੇਖਦੇ ਹਨ, ਇਹ ਪਤਾ ਕਰਨ ਲਈ ਕਿ ਕੀ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਉਹ ਆਪਣਾ ਸਮਾਂ ਬਿਤਾਉਣ ਚਾਹੁੰਦੇ ਹਨ।
 
-✅ README ਫਾਈਲਾਂ, ਹਾਲਾਂਕਿ ਇਹ ਤਿਆਰ ਕਰਨ ਵਿੱਚ ਸਮਾਂ ਲੈਂਦੀਆਂ ਹਨ, ਅਕਸਰ ਵਿਅਸਤ ਮੈਨੇਜਰਾਂ ਦੁਆਰਾ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਕੀ ਤੁਸੀਂ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਵੇਰਵਾ ਵਾਲੇ README ਦਾ ਉਦਾਹਰਨ ਲੱਭ ਸਕਦੇ ਹੋ? ਨੋਟ: ਕੁਝ [ਚੰਗੇ README ਬਣਾਉਣ ਲਈ ਟੂਲ](https://www.makeareadme.com/) ਹਨ ਜੋ ਤੁਸੀਂ ਅਜ਼ਮਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ।
+✅ README ਫਾਈਲਾਂ, ਹਾਲਾਂਕਿ ਇਹ ਤਿਆਰ ਕਰਨ ਵਿੱਚ ਸਮਾਂ ਲੈਂਦੀਆਂ ਹਨ, ਅਕਸਰ ਵਿਅਸਤ maintainers ਦੁਆਰਾ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਕੀ ਤੁਸੀਂ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਵੇਰਵੇਦਾਰ README ਲੱਭ ਸਕਦੇ ਹੋ? ਨੋਟ: ਕੁਝ [ਚੰਗੇ README ਬਣਾਉਣ ਲਈ ਟੂਲ](https://www.makeareadme.com/) ਹਨ ਜੋ ਤੁਸੀਂ ਅਜ਼ਮਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ।
 
 ### ਟਾਸਕ: ਕੁਝ ਕੋਡ ਨੂੰ ਮਰਜ ਕਰੋ
 
-Contributing ਦਸਤਾਵੇਜ਼ ਲੋਕਾਂ ਨੂੰ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਯੋਗਦਾਨ ਦੇਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਇਹ ਸਮਝਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿਸ ਤਰ੍ਹਾਂ ਦੇ ਯੋਗਦਾਨ ਦੀ ਭਾਲ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਇਹ ਪ੍ਰਕਿਰਿਆ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ। Contributors ਨੂੰ ਤੁਹਾਡੇ GitHub ਰਿਪੋ 'ਤੇ ਯੋਗਦਾਨ ਦੇਣ ਦੇ ਯੋਗ ਹੋਣ ਲਈ ਕਈ ਕਦਮਾਂ ਵਿੱਚੋਂ ਗੁਜ਼ਰਨਾ ਪਵੇਗਾ:
+Contributing ਦਸਤਾਵੇਜ਼ ਲੋਕਾਂ ਨੂੰ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਯੋਗਦਾਨ ਦੇਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਇਹ ਸਮਝਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿਸ ਤਰ੍ਹਾਂ ਦੇ ਯੋਗਦਾਨ ਦੀ ਭਾਲ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਪ੍ਰਕਿਰਿਆ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ। Contributors ਨੂੰ ਤੁਹਾਡੇ GitHub ਰਿਪੋ 'ਤੇ ਯੋਗਦਾਨ ਦੇਣ ਲਈ ਕਈ ਕਦਮਾਂ ਵਿੱਚੋਂ ਗੁਜ਼ਰਨਾ ਪਵੇਗਾ:
 
-1. **ਤੁਹਾਡਾ ਰਿਪੋ fork ਕਰਨਾ** ਤੁਸੀਂ ਸ਼ਾਇਦ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਲੋਕ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ _fork_ ਕਰਨ। Forking ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਉਹਨਾਂ ਦੇ GitHub ਪ੍ਰੋਫਾਈਲ 'ਤੇ ਤੁਹਾਡੇ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਨਕਲ ਬਣਾਉਣਾ।
-1. **Clone**. ਇਸ ਤੋਂ ਬਾਅਦ ਉਹ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਆਪਣੇ ਸਥਾਨਕ ਮਸ਼ੀਨ 'ਤੇ clone ਕਰਨਗੇ।
-1. **ਬ੍ਰਾਂਚ ਬਣਾਓ**. ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਕੰਮ ਲਈ ਇੱਕ _branch_ ਬਣਾਉਣ ਲਈ ਕਹੋਗੇ।
-1. **ਇੱਕ ਖੇਤਰ 'ਤੇ ਧਿਆਨ ਕੇਂਦ੍ਰਿਤ ਕਰੋ**. Contributors ਨੂੰ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਇੱਕ ਚੀਜ਼ 'ਤੇ ਧਿਆਨ ਕੇਂਦ੍ਰਿਤ ਕਰਨ ਲਈ ਕਹੋ - ਇਸ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਕੰਮ ਨੂੰ _merge_ ਕਰਨ ਦੇ ਚਾਂਸ ਜ਼ਿਆਦਾ ਹਨ। ਕਲਪਨਾ ਕਰੋ ਕਿ ਉਹ ਇੱਕ bug fix ਲਿਖਦੇ ਹਨ, ਇੱਕ ਨਵਾਂ feature ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ, ਅਤੇ ਕਈ tests ਨੂੰ ਅੱਪਡੇਟ ਕਰਦੇ ਹਨ - ਕੀ ਹੋਵੇ ਜੇ ਤੁਸੀਂ 3 ਵਿੱਚੋਂ 2 ਜਾਂ 1 ਬਦਲਾਅ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਜਾਂ ਕਰ ਸਕਦੇ ਹੋ?
+1. **Forking your repo** ਤੁਸੀਂ ਸ਼ਾਇਦ ਲੋਕਾਂ ਨੂੰ _fork_ ਕਰਨ ਲਈ ਕਹੋਗੇ। Forking ਦਾ ਮਤਲਬ ਹੈ ਤੁਹਾਡੇ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਇੱਕ ਨਕਲ ਉਨ੍ਹਾਂ ਦੇ GitHub ਪ੍ਰੋਫਾਈਲ 'ਤੇ ਬਣਾਉਣਾ।
+1. **Clone**. ਇਸ ਤੋਂ ਬਾਅਦ ਉਹ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਆਪਣੇ ਸਥਾਨਕ ਮਸ਼ੀਨ 'ਤੇ ਕਲੋਨ ਕਰਨਗੇ।
+1. **Create a branch**. ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ ਕੰਮ ਲਈ ਇੱਕ _branch_ ਬਣਾਉਣ ਲਈ ਕਹੋਗੇ।
+1. **Focus their change on one area**. Contributors ਨੂੰ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਇੱਕ ਚੀਜ਼ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਕਹੋ - ਇਸ ਤਰ੍ਹਾਂ ਉਨ੍ਹਾਂ ਦੇ ਕੰਮ ਨੂੰ _merge_ ਕਰਨ ਦੀ ਸੰਭਾਵਨਾ ਵਧ ਜਾਂਦੀ ਹੈ। ਕਲਪਨਾ ਕਰੋ ਕਿ ਉਹ ਇੱਕ bug fix ਲਿਖਦੇ ਹਨ, ਇੱਕ ਨਵਾਂ feature ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ, ਅਤੇ ਕਈ tests ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹਨ - ਕੀ ਹੋਵੇ ਜੇ ਤੁਸੀਂ 2 ਵਿੱਚੋਂ 3 ਜਾਂ 1 ਵਿੱਚੋਂ 3 ਬਦਲਾਅ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਜਾਂ ਕਰ ਸਕਦੇ ਹੋ?
 
-✅ ਇੱਕ ਸਥਿਤੀ ਦੀ ਕਲਪਨਾ ਕਰੋ ਜਿੱਥੇ ਬ੍ਰਾਂਚਾਂ ਚੰਗਾ ਕੋਡ ਲਿਖਣ ਅਤੇ ਸ਼ਿਪ ਕਰਨ ਲਈ ਖਾਸ ਤੌਰ 'ਤੇ ਮਹੱਤਵਪੂਰਨ ਹਨ। ਤੁਸੀਂ ਕਿਹੜੇ use cases ਬਾਰੇ ਸੋਚ ਸਕਦੇ ਹੋ?
+✅ ਇੱਕ ਸਥਿਤੀ ਦੀ ਕਲਪਨਾ ਕਰੋ ਜਿੱਥੇ branches ਚੰਗਾ ਕੋਡ ਲਿਖਣ ਅਤੇ ਸ਼ਿਪ ਕਰਨ ਲਈ ਖਾਸ ਤੌਰ 'ਤੇ ਮਹੱਤਵਪੂਰਨ ਹਨ। ਤੁਸੀਂ ਕਿਹੜੇ use cases ਬਾਰੇ ਸੋਚ ਸਕਦੇ ਹੋ?
 
-> ਨੋਟ, ਉਹ ਬਦਲਾਅ ਬਣੋ ਜੋ ਤੁਸੀਂ ਦੁਨੀਆ ਵਿੱਚ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਅਤੇ ਆਪਣੇ ਕੰਮ ਲਈ ਬ੍ਰਾਂਚਾਂ ਬਣਾਓ। ਕੋਈ ਵੀ commits ਜੋ ਤੁਸੀਂ ਕਰਦੇ ਹੋ ਉਹ ਉਸ ਬ੍ਰਾਂਚ 'ਤੇ ਕੀਤੇ ਜਾਣਗੇ ਜਿਸ 'ਤੇ ਤੁਸੀਂ "checked out" ਹੋ। `git status` ਦੀ ਵਰਤੋਂ ਕਰੋ ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਉਹ ਕਿਹੜੀ ਬ੍ਰਾਂਚ ਹੈ।
+> ਨੋਟ, ਉਹ ਬਦਲਾਅ ਬਣੋ ਜੋ ਤੁਸੀਂ ਸੰਸਾਰ ਵਿੱਚ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਅਤੇ ਆਪਣੇ ਕੰਮ ਲਈ branches ਬਣਾਓ। ਕੋਈ ਵੀ commits ਜੋ ਤੁਸੀਂ ਕਰਦੇ ਹੋ ਉਹ ਉਸ branch 'ਤੇ ਕੀਤੇ ਜਾਣਗੇ ਜਿਸ 'ਤੇ ਤੁਸੀਂ "checked out" ਹੋ। `git status` ਦੀ ਵਰਤੋਂ ਕਰੋ ਇਹ ਵੇਖਣ ਲਈ ਕਿ ਉਹ ਕਿਹੜੀ branch ਹੈ।
 
-ਆਓ ਇੱਕ contributor workflow ਵਿੱਚ ਜਾਈਏ। ਮੰਨ ਲਓ contributor ਨੇ ਪਹਿਲਾਂ ਹੀ _fork_ ਅਤੇ _clone_ ਰਿਪੋਜ਼ਟਰੀ ਕਰ ਲਈ ਹੈ ਤਾਂ ਕਿ ਉਹਨਾਂ ਕੋਲ ਇੱਕ Git ਰਿਪੋ ਹੈ ਜੋ ਉਹਨਾਂ ਦੇ ਸਥਾਨਕ ਮਸ਼ੀਨ 'ਤੇ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ ਹੈ:
-
-1. **ਬ੍ਰਾਂਚ ਬਣਾਓ**. `git branch` ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਬ੍ਰਾਂਚ ਬਣਾਓ ਜੋ ਉਹਨਾਂ ਦੇ ਬਦਲਾਅ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗਾ:
+ਆਓ ਇੱਕ contributor workflow ਦੇ ਕਦਮਾਂ ਵਿੱਚੋਂ ਗੁਜ਼ਰੀਏ। ਮੰਨ ਲਵੋ ਕਿ contributor ਨੇ ਪਹਿਲਾਂ ਹੀ _fork_ ਅਤੇ _
+1. **ਸਾਫ਼-ਸਫਾਈ**। ਇੱਕ PR ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਮਰਜ ਕਰਨ ਤੋਂ ਬਾਅਦ ਸਾਫ਼-ਸਫਾਈ ਕਰਨਾ ਇੱਕ ਚੰਗੀ ਪ੍ਰਥਾ ਮੰਨੀ ਜਾਂਦੀ ਹੈ। ਤੁਸੀਂ ਆਪਣੀ ਲੋਕਲ ਬ੍ਰਾਂਚ ਅਤੇ GitHub 'ਤੇ ਪੁਸ਼ ਕੀਤੀ ਬ੍ਰਾਂਚ ਦੋਵਾਂ ਨੂੰ ਸਾਫ਼ ਕਰਨਾ ਚਾਹੋਗੇ। ਪਹਿਲਾਂ ਇਸਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਕਮਾਂਡ ਨਾਲ ਲੋਕਲ ਤੌਰ 'ਤੇ ਮਿਟਾਓ:
 
    ```bash
-   git branch [branch-name]
+   git branch -d [branch-name]
    ```
 
-   > 💡 **ਆਧੁਨਿਕ ਤਰੀਕਾ**: ਤੁਸੀਂ ਇੱਕ ਕਮਾਂਡ ਵਿੱਚ ਨਵੀਂ ਬ੍ਰਾਂਚ ਬਣਾਉਣ ਅਤੇ ਇਸ 'ਤੇ ਸਵਿੱਚ ਕਰਨ ਲਈ ਵੀ ਕਰ ਸਕਦੇ ਹੋ:
-@@CODE
-🤞ਉਮੀਦ ਹੈ ਕਿ ਸਾਰੇ ਚੈੱਕ ਪਾਸ ਹੋਣਗੇ ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਮਾਲਕ/ਮਾਲਕਾਂ ਤੁਹਾਡੇ ਬਦਲਾਅ ਨੂੰ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਮਿਲਾ ਲੈਣਗੇ🤞
-
-ਆਪਣੀ ਮੌਜੂਦਾ ਲੋਕਲ ਵਰਕਿੰਗ ਬ੍ਰਾਂਚ ਨੂੰ GitHub 'ਤੇ ਸੰਬੰਧਿਤ ਰਿਮੋਟ ਬ੍ਰਾਂਚ ਤੋਂ ਸਾਰੇ ਨਵੇਂ ਕਮਿਟਸ ਨਾਲ ਅਪਡੇਟ ਕਰੋ:
+   ਅਗਲੇ ਕਦਮ ਵਜੋਂ, ਫੋਰਕ ਕੀਤੇ ਰਿਪੋ ਦੀ GitHub ਪੇਜ 'ਤੇ ਜਾਓ ਅਤੇ ਉਸ ਰਿਮੋਟ ਬ੍ਰਾਂਚ ਨੂੰ ਹਟਾਓ ਜਿਸਨੂੰ ਤੁਸੀਂ ਹਾਲ ਹੀ ਵਿੱਚ ਪੁਸ਼ ਕੀਤਾ ਸੀ।
 
-`git pull`
+`Pull request` ਸ਼ਬਦ ਮਜ਼ਾਕੀਆ ਲੱਗਦਾ ਹੈ ਕਿਉਂਕਿ ਅਸਲ ਵਿੱਚ ਤੁਸੀਂ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਆਪਣੇ ਬਦਲਾਅ ਪਹੁੰਚਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਪਰ ਮੈਨਟੇਨਰ (ਪ੍ਰੋਜੈਕਟ ਮਾਲਕ) ਜਾਂ ਕੋਰ ਟੀਮ ਨੂੰ ਤੁਹਾਡੇ ਬਦਲਾਅ 'ਤੇ ਵਿਚਾਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ ਇਸਨੂੰ ਪ੍ਰੋਜੈਕਟ ਦੀ "main" ਬ੍ਰਾਂਚ ਨਾਲ ਮਰਜ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਸ ਲਈ ਅਸਲ ਵਿੱਚ ਤੁਸੀਂ ਮੈਨਟੇਨਰ ਤੋਂ ਬਦਲਾਅ ਦਾ ਫੈਸਲਾ ਮੰਗ ਰਹੇ ਹੋ।
 
-## ਓਪਨ ਸੋਰਸ ਵਿੱਚ ਯੋਗਦਾਨ (ਤੁਹਾਡਾ ਅਸਰ ਛੱਡਣ ਦਾ ਮੌਕਾ!)
+ਇੱਕ pull request ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਬ੍ਰਾਂਚ 'ਤੇ ਕੀਤੇ ਗਏ ਬਦਲਾਅ ਦੀ ਤੁਲਨਾ ਅਤੇ ਚਰਚਾ ਕਰ ਸਕਦੇ ਹੋ, ਰਿਵਿਊਜ਼, ਟਿੱਪਣੀਆਂ, ਇੰਟੀਗਰੇਟਿਡ ਟੈਸਟਸ ਅਤੇ ਹੋਰ। ਇੱਕ ਵਧੀਆ pull request ਲਗਭਗ ਉਹੀ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ commit message। ਤੁਸੀਂ ਇਸਨੂੰ issue tracker ਵਿੱਚ ਇੱਕ issue ਦਾ ਹਵਾਲਾ ਦੇ ਸਕਦੇ ਹੋ, ਜਦੋਂ ਤੁਹਾਡਾ ਕੰਮ ਉਦਾਹਰਨ ਵਜੋਂ ਇੱਕ issue ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ। ਇਹ `#` ਦੇ ਨਾਲ issue ਦੇ ਨੰਬਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ `#97`।
 
-ਕੀ ਤੁਸੀਂ ਕੁਝ ਅਜਿਹਾ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ ਜੋ ਤੁਹਾਡੇ ਮਨ ਨੂੰ ਹੈਰਾਨ ਕਰ ਦੇਵੇ? 🤯 ਆਓ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਦੇਣ ਬਾਰੇ ਗੱਲ ਕਰੀਏ – ਅਤੇ ਮੈਂ ਇਸ ਨੂੰ ਤੁਹਾਡੇ ਨਾਲ ਸਾਂਝਾ ਕਰਨ ਬਾਰੇ ਸੋਚ ਕੇ ਹੀ ਰੋਮਾਂਚਿਤ ਹੋ ਰਿਹਾ ਹਾਂ!
+🤞ਉਮੀਦ ਹੈ ਕਿ ਸਾਰੇ ਚੈੱਕ ਪਾਸ ਹੋਣਗੇ ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਮਾਲਕ ਤੁਹਾਡੇ ਬਦਲਾਅ ਨੂੰ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਮਰਜ ਕਰਨਗੇ🤞
 
-ਇਹ ਤੁਹਾਡੇ ਲਈ ਕੁਝ ਅਸਧਾਰਨ ਦਾ ਹਿੱਸਾ ਬਣਨ ਦਾ ਮੌਕਾ ਹੈ। ਸੋਚੋ ਕਿ ਉਹ ਟੂਲਸ ਬਿਹਤਰ ਬਣਾਉਣ ਜਿਨ੍ਹਾਂ ਨੂੰ ਲੱਖਾਂ ਡਿਵੈਲਪਰ ਹਰ ਰੋਜ਼ ਵਰਤਦੇ ਹਨ, ਜਾਂ ਉਸ ਐਪ ਵਿੱਚ ਬੱਗ ਨੂੰ ਠੀਕ ਕਰਨਾ ਜਿਸਨੂੰ ਤੁਹਾਡੇ ਦੋਸਤ ਪਸੰਦ ਕਰਦੇ ਹਨ। ਇਹ ਸਿਰਫ਼ ਇੱਕ ਸੁਪਨਾ ਨਹੀਂ ਹੈ – ਇਹੀ ਹੈ ਜੋ ਓਪਨ ਸੋਰਸ ਯੋਗਦਾਨ ਦੇਣ ਦਾ ਮਤਲਬ ਹੈ!
+ਆਪਣੀ ਮੌਜੂਦਾ ਲੋਕਲ ਵਰਕਿੰਗ ਬ੍ਰਾਂਚ ਨੂੰ GitHub 'ਤੇ ਸੰਬੰਧਿਤ ਰਿਮੋਟ ਬ੍ਰਾਂਚ ਤੋਂ ਸਾਰੇ ਨਵੇਂ commits ਨਾਲ ਅਪਡੇਟ ਕਰੋ:
 
-ਇਹੀ ਗੱਲ ਹਰ ਵਾਰ ਮੇਰੇ ਮਨ ਨੂੰ ਰੋਮਾਂਚਿਤ ਕਰਦੀ ਹੈ: ਹਰ ਇੱਕ ਟੂਲ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਸਿੱਖ ਰਹੇ ਹੋ – ਤੁਹਾਡਾ ਕੋਡ ਐਡੀਟਰ, ਉਹ ਫਰੇਮਵਰਕ ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਸੀਂ ਖੋਜਾਂਗੇ, ਇੱਥੇ ਤੱਕ ਕਿ ਉਹ ਬ੍ਰਾਊਜ਼ਰ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਇਹ ਪੜ੍ਹ ਰਹੇ ਹੋ – ਇਹ ਸਾਰਾ ਕੁਝ ਕਿਸੇ ਅਜਿਹੇ ਵਿਅਕਤੀ ਨਾਲ ਸ਼ੁਰੂ ਹੋਇਆ ਸੀ ਜੋ ਤੁਹਾਡੇ ਵਾਂਗ ਆਪਣਾ ਪਹਿਲਾ ਯੋਗਦਾਨ ਦੇ ਰਿਹਾ ਸੀ। ਉਹ ਸ਼ਾਨਦਾਰ ਡਿਵੈਲਪਰ ਜਿਸ ਨੇ ਤੁਹਾਡਾ ਮਨਪਸੰਦ VS Code ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਇਆ? ਉਹ ਵੀ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਸੀ ਜਿਸ ਨੇ "create pull request" 'ਤੇ ਕਲਿਕ ਕੀਤਾ ਸੀ, ਬਿਲਕੁਲ ਤੁਹਾਡੇ ਵਾਂਗ।
+`git pull`
 
-ਅਤੇ ਸਭ ਤੋਂ ਸੁੰਦਰ ਗੱਲ ਇਹ ਹੈ: ਓਪਨ ਸੋਰਸ ਕਮਿਊਨਿਟੀ ਇੰਟਰਨੈਟ ਦਾ ਸਭ ਤੋਂ ਵੱਡਾ ਗਰੁੱਪ ਹੱਗ ਵਰਗਾ ਹੈ। ਜ਼ਿਆਦਾਤਰ ਪ੍ਰੋਜੈਕਟ ਨਵੇਂ ਆਉਣ ਵਾਲਿਆਂ ਦੀ ਭਾਲ ਕਰਦੇ ਹਨ ਅਤੇ "good first issue" ਟੈਗ ਕੀਤੇ ਮਸਲੇ ਹੁੰਦੇ ਹਨ ਜੋ ਖਾਸ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਵਰਗੇ ਲੋਕਾਂ ਲਈ ਹੁੰਦੇ ਹਨ! ਮੈਨਟੇਨਰਜ਼ ਨਵੇਂ ਯੋਗਦਾਨ ਦੇਣ ਵਾਲਿਆਂ ਨੂੰ ਦੇਖ ਕੇ ਸੱਚਮੁੱਚ ਖੁਸ਼ ਹੁੰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਆਪਣੇ ਪਹਿਲੇ ਕਦਮਾਂ ਨੂੰ ਯਾਦ ਕਰਦੇ ਹਨ।
+## ਓਪਨ ਸੋਰਸ ਵਿੱਚ ਯੋਗਦਾਨ (ਤੁਹਾਡਾ ਅਸਰ ਪਾਉਣ ਦਾ ਮੌਕਾ!)
+
+ਕੀ ਤੁਸੀਂ ਕੁਝ ਅਜਿਹਾ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ ਜੋ ਤੁਹਾਡੇ ਮਨ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹੈਰਾਨ ਕਰ ਦੇਵੇ? 🤯 ਆਓ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟਸ ਵਿੱਚ ਯੋਗਦਾਨ ਦੇਣ ਬਾਰੇ ਗੱਲ ਕਰੀਏ – ਅਤੇ ਮੈਂ ਇਸਨੂੰ ਤੁਹਾਡੇ ਨਾਲ ਸਾਂਝਾ ਕਰਨ ਬਾਰੇ ਸੋਚਦੇ ਹੋਏ ਰੋਮਾਂਚਿਤ ਹੋ ਰਿਹਾ ਹਾਂ!
+
+ਇਹ ਤੁਹਾਡੇ ਲਈ ਕੁਝ ਅਸਲ ਵਿੱਚ ਅਸਧਾਰਨ ਦਾ ਹਿੱਸਾ ਬਣਨ ਦਾ ਮੌਕਾ ਹੈ। ਸੋਚੋ ਕਿ ਉਹ ਟੂਲਸ ਬਿਹਤਰ ਬਣਾਉਣਾ ਜੋ ਹਰ ਰੋਜ਼ ਲੱਖਾਂ ਡਿਵੈਲਪਰ ਵਰਤਦੇ ਹਨ, ਜਾਂ ਉਸ ਐਪ ਵਿੱਚ ਇੱਕ ਬੱਗ ਨੂੰ ਠੀਕ ਕਰਨਾ ਜਿਸਨੂੰ ਤੁਹਾਡੇ ਦੋਸਤ ਪਸੰਦ ਕਰਦੇ ਹਨ। ਇਹ ਸਿਰਫ਼ ਇੱਕ ਸੁਪਨਾ ਨਹੀਂ ਹੈ – ਇਹੀ ਹੈ ਜੋ ਓਪਨ ਸੋਰਸ ਯੋਗਦਾਨ ਦੇਣ ਦਾ ਮਤਲਬ ਹੈ!
+
+ਇਹ ਹੈ ਜੋ ਹਰ ਵਾਰ ਸੋਚਦੇ ਹੋਏ ਮੈਨੂੰ ਰੋਮਾਂਚਿਤ ਕਰਦਾ ਹੈ: ਹਰ ਇੱਕ ਟੂਲ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਸਿੱਖ ਰਹੇ ਹੋ – ਤੁਹਾਡਾ ਕੋਡ ਐਡੀਟਰ, ਉਹ ਫਰੇਮਵਰਕਸ ਜੋ ਅਸੀਂ ਖੋਜਾਂਗੇ, ਇੱਥੇ ਤੱਕ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਇਹ ਪੜ੍ਹ ਰਹੇ ਹੋ – ਇਹ ਸਾਰਾ ਕੁਝ ਕਿਸੇ ਨੇ ਆਪਣੇ ਪਹਿਲੇ ਯੋਗਦਾਨ ਨਾਲ ਸ਼ੁਰੂ ਕੀਤਾ। ਉਹ ਬ੍ਰਿਲੀਅੰਟ ਡਿਵੈਲਪਰ ਜਿਸਨੇ ਤੁਹਾਡਾ ਮਨਪਸੰਦ VS Code ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਇਆ? ਉਹ ਵੀ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਸੀ ਜਿਸਨੇ "create pull request" 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਸੀ, ਬਿਲਕੁਲ ਜਿਵੇਂ ਤੁਸੀਂ ਕਰਨ ਵਾਲੇ ਹੋ।
+
+ਅਤੇ ਇਹ ਸਭ ਤੋਂ ਸੁੰਦਰ ਹਿੱਸਾ ਹੈ: ਓਪਨ ਸੋਰਸ ਕਮਿਊਨਿਟੀ ਇੰਟਰਨੈਟ ਦਾ ਸਭ ਤੋਂ ਵੱਡਾ ਗਰੁੱਪ ਹੱਗ ਵਰਗਾ ਹੈ। ਜ਼ਿਆਦਾਤਰ ਪ੍ਰੋਜੈਕਟਸ ਨਵੇਂ ਆਉਣ ਵਾਲਿਆਂ ਦੀ ਭਾਲ ਕਰਦੇ ਹਨ ਅਤੇ "good first issue" ਨਾਲ ਟੈਗ ਕੀਤੇ ਗਏ issues ਨੂੰ ਖਾਸ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਵਰਗੇ ਲੋਕਾਂ ਲਈ ਰੱਖਦੇ ਹਨ! ਮੈਨਟੇਨਰਸ ਸੱਚਮੁੱਚ ਨਵੇਂ ਯੋਗਦਾਨ ਦੇਣ ਵਾਲਿਆਂ ਨੂੰ ਦੇਖ ਕੇ ਉਤਸ਼ਾਹਿਤ ਹੁੰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਆਪਣੇ ਪਹਿਲੇ ਕਦਮਾਂ ਨੂੰ ਯਾਦ ਕਰਦੇ ਹਨ।
+
+```mermaid
+flowchart TD
+    A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
+    B --> C[📖 Read Contributing Guidelines]
+    C --> D[🍴 Fork Repository]
+    D --> E[💻 Set Up Local Environment]
+    E --> F[🌿 Create Feature Branch]
+    F --> G[✨ Make Your Contribution]
+    G --> H[🧪 Test Your Changes]
+    H --> I[📝 Write Clear Commit]
+    I --> J[📤 Push & Create PR]
+    J --> K[💬 Engage with Feedback]
+    K --> L[🎉 Merged! You're a Contributor!]
+    L --> M[🌟 Find Next Issue]
+    
+    style A fill:#e1f5fe
+    style L fill:#c8e6c9
+    style M fill:#fff59d
+```
 
-ਤੁਸੀਂ ਸਿਰਫ਼ ਕੋਡ ਸਿੱਖ ਰਹੇ ਹੋ – ਤੁਸੀਂ ਉਸ ਵਿਸ਼ਵਵਿਆਪੀ ਪਰਿਵਾਰ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣ ਲਈ ਤਿਆਰ ਹੋ ਰਹੇ ਹੋ ਜੋ ਹਰ ਰੋਜ਼ ਇਹ ਸੋਚਦੇ ਹਨ "ਅਸੀਂ ਡਿਜੀਟਲ ਦੁਨੀਆ ਨੂੰ ਥੋੜਾ ਬਿਹਤਰ ਕਿਵੇਂ ਬਣਾ ਸਕਦੇ ਹਾਂ?" ਕਲੱਬ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ! 🌟
+ਤੁਸੀਂ ਇੱਥੇ ਸਿਰਫ਼ ਕੋਡ ਸਿੱਖ ਰਹੇ ਨਹੀਂ ਹੋ – ਤੁਸੀਂ ਉਸ ਗਲੋਬਲ ਪਰਿਵਾਰ ਦਾ ਹਿੱਸਾ ਬਣਨ ਲਈ ਤਿਆਰ ਹੋ ਰਹੇ ਹੋ ਜੋ ਹਰ ਰੋਜ਼ ਜਾਗਦਾ ਹੈ ਅਤੇ ਸੋਚਦਾ ਹੈ "ਅਸੀਂ ਡਿਜੀਟਲ ਦੁਨੀਆ ਨੂੰ ਥੋੜਾ ਬਿਹਤਰ ਕਿਵੇਂ ਬਣਾ ਸਕਦੇ ਹਾਂ?" ਕਲੱਬ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ! 🌟
 
-ਸਭ ਤੋਂ ਪਹਿਲਾਂ, GitHub 'ਤੇ ਇੱਕ ਰਿਪੋਜ਼ਟਰੀ (ਜਾਂ **repo**) ਲੱਭੋ ਜੋ ਤੁਹਾਡੇ ਲਈ ਦਿਲਚਸਪ ਹੋਵੇ ਅਤੇ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਕੋਈ ਬਦਲਾਅ ਕਰਨ ਦਾ ਯੋਗਦਾਨ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਤੁਸੀਂ ਇਸਦੀ ਸਮੱਗਰੀ ਨੂੰ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਕਾਪੀ ਕਰਨਾ ਚਾਹੋਗੇ।
+ਸਭ ਤੋਂ ਪਹਿਲਾਂ, GitHub 'ਤੇ ਇੱਕ ਰਿਪੋਜ਼ਟਰੀ (ਜਾਂ **repo**) ਲੱਭੋ ਜੋ ਤੁਹਾਨੂੰ ਦਿਲਚਸਪ ਲੱਗੇ ਅਤੇ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਕੋਈ ਬਦਲਾਅ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਤੁਸੀਂ ਇਸਦੀ ਸਮੱਗਰੀ ਨੂੰ ਆਪਣੀ ਮਸ਼ੀਨ 'ਤੇ ਕਾਪੀ ਕਰਨਾ ਚਾਹੋਗੇ।
 
-✅ 'ਸ਼ੁਰੂਆਤੀ-ਦੋਸਤਾਨਾ' ਰਿਪੋਜ਼ਟਰੀ ਲੱਭਣ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ [ਟੈਗ 'good-first-issue' ਦੁਆਰਾ ਖੋਜ ਕਰਨਾ](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)।
+✅ 'ਸ਼ੁਰੂਆਤੀ-ਦੋਸਤਾਨਾ' ਰਿਪੋਜ਼ਟਰੀਜ਼ ਲੱਭਣ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ [ਟੈਗ 'good-first-issue' ਦੁਆਰਾ ਖੋਜ ਕਰਨਾ](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)।
 
-![ਰਿਪੋ ਨੂੰ ਲੋਕਲ ਕਾਪੀ ਕਰੋ](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.pa.png)
+![ਰਿਪੋ ਨੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਕਾਪੀ ਕਰੋ](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.pa.png)
 
-ਕੋਡ ਕਾਪੀ ਕਰਨ ਦੇ ਕਈ ਤਰੀਕੇ ਹਨ। ਇੱਕ ਤਰੀਕਾ ਹੈ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਸਮੱਗਰੀ ਨੂੰ "ਕਲੋਨ" ਕਰਨਾ, HTTPS, SSH, ਜਾਂ GitHub CLI (ਕਮਾਂਡ ਲਾਈਨ ਇੰਟਰਫੇਸ) ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
+ਕੋਡ ਕਾਪੀ ਕਰਨ ਦੇ ਕਈ ਤਰੀਕੇ ਹਨ। ਇੱਕ ਤਰੀਕਾ ਹੈ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਸਮੱਗਰੀ ਨੂੰ "clone" ਕਰਨਾ, HTTPS, SSH ਜਾਂ GitHub CLI (Command Line Interface) ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
 
-ਆਪਣਾ ਟਰਮੀਨਲ ਖੋਲ੍ਹੋ ਅਤੇ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਕਲੋਨ ਕਰੋ:
+ਆਪਣਾ ਟਰਮੀਨਲ ਖੋਲ੍ਹੋ ਅਤੇ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਕਲੋਨ ਕਰੋ:
 ```bash
 # Using HTTPS
 git clone https://github.com/ProjectURL
@@ -298,86 +412,80 @@ gh repo clone username/repository
 ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਕੰਮ ਕਰਨ ਲਈ, ਸਹੀ ਫੋਲਡਰ 'ਤੇ ਜਾਓ:
 `cd ProjectURL`
 
-ਤੁਸੀਂ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਵੀ ਖੋਲ੍ਹ ਸਕਦੇ ਹੋ:
-- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHub ਦਾ ਕਲਾਉਡ ਡਿਵੈਲਪਮੈਂਟ ਵਾਤਾਵਰਣ ਜਿਸ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ VS Code ਹੈ
+ਤੁਸੀਂ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਵੀ ਖੋਲ੍ਹ ਸਕਦੇ ਹੋ:
+- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHub ਦਾ ਕਲਾਉਡ ਡਿਵੈਲਪਮੈਂਟ ਐਨਵਾਇਰਮੈਂਟ ਜਿਸ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ VS Code ਹੈ
 - **[GitHub Desktop](https://desktop.github.com/)** - Git ਕਾਰਵਾਈਆਂ ਲਈ GUI ਐਪਲੀਕੇਸ਼ਨ  
-- **[GitHub.dev](https://github.dev)** - ਕਿਸੇ ਵੀ GitHub ਰਿਪੋ 'ਤੇ `.` ਕੁੰਜੀ ਦਬਾਓ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ VS Code ਖੋਲ੍ਹੋ
+- **[GitHub.dev](https://github.dev)** - ਕਿਸੇ ਵੀ GitHub ਰਿਪੋ 'ਤੇ `.` ਕੀ ਦਬਾਓ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ VS Code ਖੋਲ੍ਹੋ
 - **VS Code** GitHub Pull Requests ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ
 
-ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਕੋਡ ਨੂੰ ਜ਼ਿਪ ਕੀਤੇ ਫੋਲਡਰ ਵਿੱਚ ਡਾਊਨਲੋਡ ਕਰ ਸਕਦੇ ਹੋ।
+ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਕੋਡ ਨੂੰ ਇੱਕ ਜ਼ਿਪਡ ਫੋਲਡਰ ਵਿੱਚ ਡਾਊਨਲੋਡ ਕਰ ਸਕਦੇ ਹੋ।
 
 ### GitHub ਬਾਰੇ ਕੁਝ ਹੋਰ ਦਿਲਚਸਪ ਗੱਲਾਂ
 
-ਤੁਸੀਂ GitHub 'ਤੇ ਕਿਸੇ ਵੀ ਪਬਲਿਕ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਸਟਾਰ, ਵਾਚ ਅਤੇ/ਜਾਂ "fork" ਕਰ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਆਪਣੇ ਸਟਾਰ ਕੀਤੇ ਰਿਪੋਜ਼ਟਰੀਜ਼ ਨੂੰ ਟੌਪ-ਰਾਈਟ ਡ੍ਰਾਪ-ਡਾਊਨ ਮੀਨੂ ਵਿੱਚ ਲੱਭ ਸਕਦੇ ਹੋ। ਇਹ ਕੋਡ ਲਈ ਬੁੱਕਮਾਰਕ ਕਰਨ ਵਰਗਾ ਹੈ।
+ਤੁਸੀਂ GitHub 'ਤੇ ਕਿਸੇ ਵੀ ਪਬਲਿਕ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ star, watch ਅਤੇ/ਜਾਂ "fork" ਕਰ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਆਪਣੇ starred ਰਿਪੋਜ਼ਟਰੀਜ਼ ਨੂੰ ਟੌਪ-ਰਾਈਟ ਡ੍ਰਾਪ-ਡਾਊਨ ਮੀਨੂ ਵਿੱਚ ਲੱਭ ਸਕਦੇ ਹੋ। ਇਹ ਬੁੱਕਮਾਰਕ ਕਰਨ ਵਰਗਾ ਹੈ, ਪਰ ਕੋਡ ਲਈ।
 
-ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਇੱਕ ਇਸ਼ੂ ਟ੍ਰੈਕਰ ਹੁੰਦਾ ਹੈ, ਜ਼ਿਆਦਾਤਰ GitHub 'ਤੇ "Issues" ਟੈਬ ਵਿੱਚ ਜਦੋਂ ਤੱਕ ਹੋਰਥਾਂ ਨਹੀਂ ਦਿੱਤੀ ਜਾਂਦੀ, ਜਿੱਥੇ ਲੋਕ ਪ੍ਰੋਜੈਕਟ ਨਾਲ ਸੰਬੰਧਿਤ ਮਸਲਿਆਂ 'ਤੇ ਚਰਚਾ ਕਰਦੇ ਹਨ। ਅਤੇ Pull Requests ਟੈਬ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਲੋਕ ਚਰਚਾ ਕਰਦੇ ਹਨ ਅਤੇ ਉਹ ਬਦਲਾਅ ਸਮੀਖਿਆ ਕਰਦੇ ਹਨ ਜੋ ਪ੍ਰਗਤੀ ਵਿੱਚ ਹਨ।
+ਪ੍ਰੋਜੈਕਟਸ ਵਿੱਚ ਇੱਕ issue tracker ਹੁੰਦਾ ਹੈ, ਜ਼ਿਆਦਾਤਰ GitHub 'ਤੇ "Issues" ਟੈਬ ਵਿੱਚ ਜਦੋਂ ਤੱਕ ਹੋਰ ਨਹੀਂ ਦੱਸਿਆ ਜਾਂਦਾ, ਜਿੱਥੇ ਲੋਕ ਪ੍ਰੋਜੈਕਟ ਨਾਲ ਸੰਬੰਧਿਤ issues 'ਤੇ ਚਰਚਾ ਕਰਦੇ ਹਨ। ਅਤੇ Pull Requests ਟੈਬ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਲੋਕ ਚਰਚਾ ਅਤੇ ਰਿਵਿਊ ਕਰਦੇ ਹਨ ਜੋ ਬਦਲਾਅ ਪ੍ਰਗਤੀ ਵਿੱਚ ਹਨ।
 
-ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਫੋਰਮ, ਮੇਲਿੰਗ ਲਿਸਟਾਂ, ਜਾਂ Slack, Discord ਜਾਂ IRC ਵਰਗੇ ਚੈਟ ਚੈਨਲਾਂ ਵਿੱਚ ਚਰਚਾ ਹੋ ਸਕਦੀ ਹੈ।
+ਪ੍ਰੋਜੈਕਟਸ ਵਿੱਚ ਚਰਚਾ ਫੋਰਮ, ਮੇਲਿੰਗ ਲਿਸਟਸ ਜਾਂ Slack, Discord ਜਾਂ IRC ਵਰਗੇ ਚੈਟ ਚੈਨਲਸ ਵਿੱਚ ਵੀ ਹੋ ਸਕਦੀ ਹੈ।
 
-🔧 **ਆਧੁਨਿਕ GitHub ਫੀਚਰਜ਼**:
+🔧 **ਆਧੁਨਿਕ GitHub ਫੀਚਰਸ**:
 - **GitHub Discussions** - ਕਮਿਊਨਿਟੀ ਗੱਲਬਾਤਾਂ ਲਈ ਬਿਲਟ-ਇਨ ਫੋਰਮ
-- **GitHub Sponsors** - ਮੈਨਟੇਨਰਜ਼ ਨੂੰ ਵਿੱਤੀ ਸਹਾਇਤਾ  
-- **Security tab** - ਖਤਰੇ ਦੀਆਂ ਰਿਪੋਰਟਾਂ ਅਤੇ ਸੁਰੱਖਿਆ ਸਲਾਹਾਂ
-- **Actions tab** - ਆਟੋਮੈਟਿਕ ਵਰਕਫਲੋਜ਼ ਅਤੇ CI/CD ਪਾਈਪਲਾਈਨਜ਼ ਦੇਖੋ
-- **Insights tab** - ਯੋਗਦਾਨ ਦੇਣ ਵਾਲਿਆਂ, ਕਮਿਟਸ, ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਸਿਹਤ ਬਾਰੇ ਵਿਸ਼ਲੇਸ਼ਣ
-- **Projects tab** - GitHub ਦੇ ਬਿਲਟ-ਇਨ ਪ੍ਰੋਜੈਕਟ ਮੈਨੇਜਮੈਂਟ ਟੂਲਜ਼
+- **GitHub Sponsors** - ਮੈਨਟੇਨਰਸ ਨੂੰ ਵਿੱਤੀ ਸਹਾਇਤਾ  
+- **Security tab** - ਖਤਰੇ ਦੀਆਂ ਰਿਪੋਰਟਸ ਅਤੇ ਸੁਰੱਖਿਆ ਸਲਾਹਾਂ
+- **Actions tab** - ਆਟੋਮੈਟਿਡ ਵਰਕਫਲੋਜ਼ ਅਤੇ CI/CD ਪਾਈਪਲਾਈਨਸ ਦੇਖੋ
+- **Insights tab** - ਯੋਗਦਾਨਕਰਤਿਆਂ, commits ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਸਿਹਤ ਬਾਰੇ ਵਿਸ਼ਲੇਸ਼ਣ
+- **Projects tab** - GitHub ਦੇ ਬਿਲਟ-ਇਨ ਪ੍ਰੋਜੈਕਟ ਮੈਨੇਜਮੈਂਟ ਟੂਲਸ
 
-✅ ਆਪਣੇ ਨਵੇਂ GitHub ਰਿਪੋ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ ਅਤੇ ਕੁਝ ਚੀਜ਼ਾਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਜਿਵੇਂ ਕਿ ਸੈਟਿੰਗਾਂ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨਾ, ਆਪਣੇ ਰਿਪੋ ਵਿੱਚ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਨਾ, ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣਾ (ਜਿਵੇਂ ਕਿ ਇੱਕ Kanban ਬੋਰਡ), ਅਤੇ GitHub Actions ਨੂੰ ਆਟੋਮੈਸ਼ਨ ਲਈ ਸੈਟ ਕਰਨਾ। ਇੱਥੇ ਬਹੁਤ ਕੁਝ ਹੈ ਜੋ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ!
+✅ ਆਪਣੇ ਨਵੇਂ GitHub ਰਿਪੋ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ ਅਤੇ ਕੁਝ ਚੀਜ਼ਾਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਜਿਵੇਂ ਕਿ ਸੈਟਿੰਗਸ ਨੂੰ ਐਡਿਟ ਕਰਨਾ, ਆਪਣੇ ਰਿਪੋ ਵਿੱਚ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਨਾ, ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣਾ (ਜਿਵੇਂ ਕਿ Kanban ਬੋਰਡ), ਅਤੇ GitHub Actions ਨੂੰ ਆਟੋਮੈਸ਼ਨ ਲਈ ਸੈਟ ਕਰਨਾ। ਤੁਹਾਡੇ ਲਈ ਬਹੁਤ ਕੁਝ ਹੈ!
 
 ---
 
-## 🚀 ਚੁਣੌਤੀ 
+## 🚀 ਚੈਲੈਂਜ
 
-ਚਲੋ, ਹੁਣ ਤੁਹਾਡੇ ਨਵੇਂ GitHub ਸੁਪਰਪਾਵਰਜ਼ ਨੂੰ ਅਜ਼ਮਾਉਣ ਦਾ ਸਮਾਂ ਹੈ! 🚀 ਇੱਥੇ ਇੱਕ ਚੁਣੌਤੀ ਹੈ ਜੋ ਸਭ ਕੁਝ ਸਭ ਤੋਂ ਸੰਤੋਸ਼ਜਨਕ ਤਰੀਕੇ ਨਾਲ ਕਲਿਕ ਕਰੇਗੀ:
+ਚਲੋ, ਹੁਣ ਤੁਹਾਡੇ ਨਵੇਂ GitHub ਸੁਪਰਪਾਵਰਸ ਨੂੰ ਅਜ਼ਮਾਉਣ ਦਾ ਸਮਾਂ ਹੈ! 🚀 ਇੱਥੇ ਇੱਕ ਚੈਲੈਂਜ ਹੈ ਜੋ ਸਭ ਕੁਝ ਸਭ ਤੋਂ ਸੰਤੋਸ਼ਜਨਕ ਤਰੀਕੇ ਨਾਲ ਕਲਿੱਕ ਕਰੇਗਾ:
 
-ਇੱਕ ਦੋਸਤ (ਜਾਂ ਉਹ ਪਰਿਵਾਰਕ ਮੈਂਬਰ ਜੋ ਹਮੇਸ਼ਾ ਪੁੱਛਦੇ ਹਨ ਕਿ ਤੁਸੀਂ ਇਸ "ਕੰਪਿਊਟਰ ਵਾਲੇ ਕੰਮ" ਨਾਲ ਕੀ ਕਰ ਰਹੇ ਹੋ) ਨੂੰ ਲਵੋ ਅਤੇ ਇੱਕ ਸਹਿਯੋਗੀ ਕੋਡਿੰਗ ਅਡਵੈਂਚਰ 'ਤੇ ਇਕੱਠੇ ਜਾਓ! ਇਹ ਜਿੱਥੇ ਅਸਲ ਜਾਦੂ ਹੁੰਦਾ ਹੈ – ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ, ਉਹਨੂੰ ਫੋਰਕ ਕਰਨ ਦਿਓ, ਕੁਝ ਬ੍ਰਾਂਚ ਬਣਾਓ, ਅਤੇ ਬਦਲਾਅ ਨੂੰ ਮਿਲਾਓ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਪ੍ਰੋਫੈਸ਼ਨਲ ਬਣ ਰਹੇ ਹੋ।
+ਇੱਕ ਦੋਸਤ (ਜਾਂ ਉਹ ਪਰਿਵਾਰਕ ਮੈਂਬਰ ਜੋ ਹਮੇਸ਼ਾ ਪੁੱਛਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸ "ਕੰਪਿਊਟਰ ਵਾਲੇ ਕੰਮ" ਨਾਲ ਕੀ ਕਰ ਰਹੇ ਹੋ) ਨੂੰ ਲਵੋ ਅਤੇ ਇੱਕ ਸਹਿਯੋਗੀ ਕੋਡਿੰਗ ਅਡਵੈਂਚਰ 'ਤੇ ਇਕੱਠੇ ਜਾਓ! ਇਹ ਜਿੱਥੇ ਅਸਲ ਜਾਦੂ ਹੁੰਦਾ ਹੈ – ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ, ਉਹਨੂੰ fork ਕਰਨ ਦਿਓ, ਕੁਝ ਬ੍ਰਾਂਚਸ ਬਣਾਓ, ਅਤੇ ਬਦਲਾਅ ਨੂੰ ਮਰਜ ਕਰੋ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਪ੍ਰੋਜ਼ ਬਣ ਰਹੇ ਹੋ।
 
-ਮੈਂ ਝੂਠ ਨਹੀਂ ਬੋਲਾਂਗਾ – ਤੁਸੀਂ ਸ਼ਾਇਦ ਕਿਸੇ ਸਮੇਂ ਹੱਸੋ (ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਤੁਸੀਂ ਦੋਵੇਂ ਇੱਕੋ ਲਾਈਨ ਨੂੰ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ), ਸ਼ਾਇਦ ਕੁਝ ਸਮੇਂ ਲਈ ਹੈਰਾਨ ਹੋ ਜਾਓ, ਪਰ ਤੁਹਾਡੇ ਕੋਲ ਉਹ ਸ਼ਾਨਦਾਰ "ਆਹਾ!" ਪਲ ਜ਼ਰੂਰ ਹੋਣਗੇ ਜੋ ਸਾਰੇ ਸਿੱਖਣ ਨੂੰ ਮੁੱਲਵਾਨ ਬਣਾਉਂਦੇ ਹਨ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਕਿਸੇ ਹੋਰ ਦੇ ਨਾਲ ਉਹ ਪਹਿਲਾ ਸਫਲ ਮਰਜ ਸਾਂਝਾ ਕਰਨ ਵਿੱਚ ਕੁਝ ਖਾਸ ਹੁੰਦਾ ਹੈ – ਇਹ ਇਸ ਗੱਲ ਦਾ ਛੋਟਾ ਜਸ਼ਨ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿੰਨਾ ਅੱਗੇ ਆ ਗਏ ਹੋ!
+ਮੈਂ ਝੂਠ ਨਹੀਂ ਬੋਲਾਂਗਾ – ਤੁਸੀਂ ਸ਼ਾਇਦ ਕਿਸੇ ਸਮੇਂ ਹੱਸੋਗੇ (ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਤੁਸੀਂ ਦੋਵੇਂ ਇੱਕੋ ਲਾਈਨ ਨੂੰ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ), ਸ਼ਾਇਦ ਕੁਝ ਸਮੇਂ ਲਈ ਹੈਰਾਨ ਹੋ ਜਾਓਗੇ, ਪਰ ਤੁਹਾਡੇ ਕੋਲ ਉਹ ਸ਼ਾਨਦਾਰ "aha!" ਪਲ ਹੋਣਗੇ ਜੋ ਸਾਰੇ ਸਿੱਖਣ ਨੂੰ ਮੁੱਲਵਾਨ ਬਣਾਉਂਦੇ ਹਨ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਕਿਸੇ ਹੋਰ ਦੇ ਨਾਲ ਉਹ ਪਹਿਲਾ ਸਫਲ ਮਰਜ ਸਾਂਝਾ ਕਰਨ ਵਿੱਚ ਕੁਝ ਖਾਸ ਹੁੰਦਾ ਹੈ – ਇਹ ਇਸ ਗੱਲ ਦਾ ਛੋਟਾ ਜਸ਼ਨ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿੰਨਾ ਅੱਗੇ ਆਏ ਹੋ!
 
-ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਅਜੇ ਤੱਕ ਕੋਈ ਕੋਡਿੰਗ ਸਾਥੀ ਨਹੀਂ ਹੈ? ਕੋਈ ਗੱਲ ਨਹੀਂ! GitHub ਕਮਿਊਨਿਟੀ ਬਹੁਤ ਹੀ ਸਵਾਗਤ ਕਰਨ ਵਾਲੇ ਲੋਕਾਂ ਨਾਲ ਭਰੀ ਹੋਈ ਹੈ ਜੋ ਯਾਦ ਕਰਦੇ ਹਨ ਕਿ ਨਵਾਂ ਹੋਣਾ ਕਿਵੇਂ ਹੁੰਦਾ ਹੈ। "good first issue" ਲੇਬਲ ਵਾਲੇ ਰਿਪੋਜ਼ਟਰੀਜ਼ ਦੀ ਭਾਲ ਕਰੋ – ਉਹ ਅਸਲ ਵਿੱਚ ਕਹਿ ਰਹੇ ਹਨ "ਹੇ ਸ਼ੁਰੂਆਤੀ, ਸਾਡੇ ਨਾਲ ਸਿੱਖੋ!" ਇਹ ਕਿੰਨਾ ਸ਼ਾਨਦਾਰ ਹੈ?
+ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਅਜੇ ਤੱਕ ਕੋਈ ਕੋਡਿੰਗ ਸਾਥੀ ਨਹੀਂ ਹੈ? ਕੋਈ ਚਿੰਤਾ ਨਹੀਂ! GitHub ਕਮਿਊਨਿਟੀ ਬਹੁਤ ਹੀ ਸਵਾਗਤਯੋਗ ਲੋਕਾਂ ਨਾਲ ਭਰੀ ਹੋਈ ਹੈ ਜੋ ਨਵਾਂ ਹੋਣ ਦਾ ਅਨੁਭਵ ਯਾਦ ਕਰਦੇ ਹਨ। "good first issue" ਲੇਬਲ ਵਾਲੇ ਰਿਪੋਜ਼ਟਰੀਜ਼ ਦੀ ਭਾਲ ਕਰੋ – ਇਹ ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਕਹਿ ਰਹੇ ਹਨ "ਹੇ ਸ਼ੁਰੂਆਤੀ, ਸਾਡੇ ਨਾਲ ਸਿੱਖੋ!" ਇਹ ਕਿੰਨਾ ਸ਼ਾਨਦਾਰ ਹੈ?
 
-## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼
-[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/en/)
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ](https://ff-quizzes.netlify.app/web/en/)
 
-## ਸਮੀਖਿਆ ਅਤੇ ਸਿੱਖਣਾ ਜਾਰੀ ਰੱਖੋ
+## ਰਿਵਿਊ ਅਤੇ ਸਿੱਖਣਾ ਜਾਰੀ ਰੱਖੋ
 
-ਵਾਹ! 🎉 ਤੁਸੀਂ GitHub ਬੇਸਿਕਸ ਨੂੰ ਇੱਕ ਅਸਲ ਚੈਂਪੀਅਨ ਵਾਂਗ ਜਿੱਤ ਲਿਆ ਹੈ! ਜੇ ਤੁਹਾਡਾ ਦਿਮਾਗ ਹੁਣ ਥੋੜ੍ਹਾ ਭਰਿਆ ਹੋਵੇ, ਤਾਂ ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਹੈ ਅਤੇ ਸੱਚਮੁੱਚ ਇੱਕ ਵਧੀਆ ਸੰਕੇਤ ਹੈ। ਤੁਸੀਂ ਉਹ ਟੂਲਸ ਸਿੱਖੇ ਹਨ ਜੋ ਮੈਨੂੰ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਹਫ਼ਤਿਆਂ ਲੱਗੇ ਸਹੀ ਮਹਿਸੂਸ ਕਰਨ ਲਈ।
+ਵਾਹ! 🎉 ਵੇਖੋ ਤੁਸੀਂ – ਤੁਸੀਂ GitHub ਬੇਸਿਕਸ ਨੂੰ ਇੱਕ ਅਸਲ ਚੈਂਪੀਅਨ ਵਾਂਗ ਜਿੱਤ ਲਿਆ ਹੈ! ਜੇ ਤੁਹਾਡਾ ਦਿਮਾਗ ਹੁਣ ਥੋੜਾ ਭਰਿਆ ਹੋਵੇ, ਤਾਂ ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਧਾਰਨ ਹੈ ਅਤੇ ਸੱਚਮੁੱਚ ਇੱਕ ਚੰਗੀ ਨਿਸ਼ਾਨੀ ਹੈ। ਤੁਸੀਂ ਉਹ ਟੂਲਸ ਸਿੱਖੇ ਹਨ ਜੋ ਮੈਨੂੰ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਸਮਝਣ ਲਈ ਹਫ਼ਤੇ ਲੱਗੇ।
 
-Git ਅਤੇ GitHub ਬਹੁਤ ਹੀ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹਨ (ਜਿਵੇਂ, ਸੱਚਮੁੱਚ ਸ਼ਕਤੀਸ਼ਾਲੀ), ਅਤੇ ਹਰ ਡਿਵੈਲਪਰ ਜਿਸਨੂੰ ਮੈਂ ਜਾਣਦਾ ਹਾਂ – ਉਹਨਾਂ ਵਿੱਚੋਂ ਜੋ ਹੁਣ ਜਾਦੂਗਰ ਲੱਗਦੇ ਹਨ – ਨੇ ਇਸਨੂੰ ਕਲਿਕ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਅਭਿਆਸ ਕੀਤਾ ਅਤੇ ਕੁਝ ਸਮੇਂ ਲਈ ਘੁੰਮਿਆ। ਇਹ ਗੱਲ ਕਿ ਤੁਸੀਂ ਇਸ ਪਾਠ ਨੂੰ ਪੂਰਾ ਕੀਤਾ ਹੈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਡਿਵੈਲਪਰ ਦੇ ਟੂਲਕਿਟ ਦੇ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਟੂਲਸ ਵਿੱਚੋਂ ਕੁਝ ਨੂੰ ਮਾਸਟਰ ਕਰਨ ਦੇ ਰਾਹ 'ਤੇ ਹੋ।
+Git ਅਤੇ GitHub ਬਹੁਤ ਹੀ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹਨ (ਜਿਵੇਂ, ਸੱਚਮੁੱਚ ਸ਼ਕਤੀਸ਼ਾਲੀ), ਅਤੇ ਹਰ ਡਿਵੈਲਪਰ ਜਿਸਨੂੰ ਮੈਂ ਜਾਣਦਾ ਹਾਂ – ਉਹਨਾਂ ਵਿੱਚੋਂ ਜੋ ਹੁਣ ਜਾਦੂਗਰ ਲੱਗਦੇ ਹਨ – ਨੇ ਇਸਨੂੰ ਕਲਿੱਕ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਅਭਿਆਸ ਅਤੇ ਕੁਝ ਗਲਤੀਆਂ ਕੀਤੀਆਂ। ਇਹ ਸੱਚਾਈ ਕਿ ਤੁਸੀਂ ਇਸ ਪਾਠ ਨੂੰ ਪੂਰਾ ਕੀਤਾ ਹੈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਡਿਵੈਲਪਰ ਦੇ ਟੂਲਕਿਟ ਦੇ ਕੁਝ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਟੂਲਸ ਨੂੰ ਮਾਸਟਰ ਕਰਨ ਦੇ ਰਾਹ 'ਤੇ ਹੋ।
 
 ਇੱਥੇ ਕੁਝ ਬਹੁਤ ਹੀ ਸ਼ਾਨਦਾਰ ਸਰੋਤ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਅਭਿਆਸ ਕਰਨ ਅਤੇ ਹੋਰ ਸ਼ਾਨਦਾਰ ਬਣਨ ਵਿੱਚ ਮਦਦ ਕਰਨਗੇ:
 
-- [ਓਪਨ ਸੋਰਸ ਸੌਫਟਵੇਅਰ ਗਾਈਡ ਵਿੱਚ ਯੋਗਦਾਨ](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – ਅਸਰ ਛੱਡਣ ਲਈ ਤੁਹਾਡਾ ਰੋਡਮੈਪ
-- [Git ਚੀਟਸ਼ੀਟ](https://training.github.com/downloads/github-git-cheat-sheet/) – ਇਸਨੂੰ ਤੇਜ਼ ਹਵਾਲੇ ਲਈ ਹਮੇਸ਼ਾ ਆਪਣੇ ਕੋਲ ਰੱਖੋ!
+- [ਓਪਨ ਸੋਰਸ ਸੌਫਟਵੇਅਰ ਗਾਈਡ ਵਿੱਚ ਯੋਗਦਾਨ](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – ਅਸਰ ਪਾਉਣ ਲਈ ਤੁਹਾਡਾ ਰੋਡਮੈਪ
+- [Git ਚੀਟਸ਼ੀਟ](https://training.github.com/downloads/github-git-cheat-sheet/) – ਤੇਜ਼ ਹਵਾਲੇ ਲਈ ਇਸਨੂੰ ਹਮੇਸ਼ਾ ਆਪਣੇ ਕੋਲ ਰੱਖੋ!
 
-ਅਤੇ ਯਾਦ ਰੱਖੋ: ਅਭਿਆਸ ਪ੍ਰਗਤੀ ਲਿਆਉਂਦਾ ਹੈ, ਪੂਰਨਤਾ ਨਹੀਂ! ਜਿੰਨਾ ਜ਼ਿਆਦਾ ਤੁਸੀਂ Git ਅਤੇ GitHub ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ, ਇਹ ਉਨਾ ਹੀ ਕੁਦਰਤੀ ਬਣੇਗਾ। GitHub ਨੇ ਕੁਝ ਸ਼ਾਨਦਾਰ ਇੰਟਰਐਕਟਿਵ ਕੋਰਸ ਬਣਾਏ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਸੁਰੱਖਿਅਤ ਵਾਤਾਵਰਣ ਵਿੱਚ ਅਭਿਆਸ ਕਰਨ ਦਿੰਦੇ ਹਨ:
+ਅਤੇ ਯਾਦ ਰੱਖੋ: ਅਭਿਆਸ ਪ੍ਰਗਤੀ ਬਣਾਉਂਦਾ ਹੈ, ਪੂਰਨਤਾ ਨਹੀਂ! ਜਿੰਨਾ ਜ਼ਿਆਦਾ ਤੁਸੀਂ Git ਅਤੇ GitHub ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ, ਇਹ ਉਨਾ ਹੀ ਕੁਦਰਤੀ ਬਣੇਗਾ। GitHub ਨੇ ਕੁਝ ਸ਼ਾਨਦਾਰ ਇੰਟਰਐਕਟਿਵ ਕੋਰਸ ਬਣਾਏ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਸੁਰੱਖਿਅਤ ਵਾਤਾਵਰਣ ਵਿੱਚ ਅਭਿਆਸ ਕਰਨ ਦਿੰਦੇ ਹਨ:
 
 - [GitHub ਦਾ ਪਰਿਚਯ](https://github.com/skills/introduction-to-github)
 - [Markdown ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਚਾਰ ਕਰੋ](https://github.com/skills/communicate-using-markdown)  
 - [GitHub Pages](https://github.com/skills/github-pages)
 - [ਮਰਜ ਕਨਫਲਿਕਟਸ ਦਾ ਪ੍ਰਬੰਧਨ](https://github.com/skills/resolve-merge-conflicts)
 
-**ਜਾਦੂਈ ਮਹਿਸੂਸ ਕਰਨ ਲਈ ਤਿਆਰ? ਇਹ ਆਧੁਨਿਕ ਟੂਲਜ਼ ਦੇਖੋ:**
+**ਜਾਦੂਈ ਮਹਿਸੂਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ? ਇਹ ਆਧੁਨਿਕ ਟੂਲਸ ਦੇਖੋ:**
 - [GitHub CLI ਦਸਤਾਵੇਜ਼](https://cli.github.com/manual/) – ਜਦੋਂ ਤੁਸੀਂ ਕਮਾਂਡ-ਲਾਈਨ ਜਾਦੂਗਰ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ
 - [GitHub Codespaces ਦਸਤਾਵੇਜ਼](https://docs.github.com/en/codespaces) – ਕਲਾਉਡ ਵਿੱਚ ਕੋਡ ਕਰੋ!
 - [GitHub Actions ਦਸਤਾਵੇਜ਼](https://docs.github.com/en/actions) – ਸਾਰੀਆਂ ਚੀਜ਼ਾਂ ਆਟੋਮੈਟ ਕਰੋ
-- [Git ਵਧੀਆ ਅਭਿਆਸ](https://www.atlassian.com/git/tutorials/comparing-workflows) – ਆਪਣੇ ਵਰਕਫਲੋ ਗੇਮ ਨੂੰ ਉੱਚਾ ਕਰੋ 
-
-## GitHub Copilot Agent ਚੁਣੌਤੀ 🚀
-
-Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੀ ਚੁਣੌਤੀ ਪੂਰੀ ਕਰੋ:
-
-**ਵੇਰਵਾ:** ਇੱਕ ਸਹਿਯੋਗੀ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ ਜੋ ਇਸ ਪਾਠ ਵਿੱਚ ਸਿੱਖੇ ਗਏ ਪੂਰੇ GitHub ਵਰਕਫਲੋ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਇਹ ਚੁਣੌਤੀ ਤੁਹਾਨੂੰ ਰਿਪੋਜ਼ਟਰੀ ਬਣਾਉਣ, ਸਹਿਯੋਗੀ ਫੀਚਰਜ਼, ਅਤੇ ਆਧੁਨਿਕ Git ਵਰਕਫਲੋਜ਼ ਨੂੰ ਅਸਲ-ਦੁਨੀਆ ਦੇ ਦ੍ਰਿਸ਼ ਵਿੱਚ ਅਭਿਆਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗੀ।
+- [Git ਦੀਆਂ ਵਧੀਆ ਪ੍ਰਥਾਵਾਂ](https://www.atlassian.com/git/tutorials/comparing-workflows) – ਆਪਣੇ ਵਰਕਫਲੋ ਗੇਮ ਨੂੰ ਉੱਚਾ ਕਰੋ 
 
-**ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਨਵਾਂ ਪਬਲਿਕ GitHub ਰਿਪੋਜ਼ਟਰੀ ਬਣਾਓ ਇੱਕ ਸਧਾਰਨ "Web Development Resources" ਪ੍ਰੋਜੈਕਟ ਲਈ। ਰਿਪੋਜ਼ਟਰੀ ਵਿੱਚ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਬਣਾਇਆ ਗਿਆ README.md ਫਾਈਲ ਸ਼ਾਮਲ ਹੋਵੇ ਜਿਸ ਵਿੱਚ ਲਾਭਦਾਇਕ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲਜ਼ ਅਤੇ ਸਰੋਤਾਂ ਦੀ ਸੂਚੀ ਹੋਵੇ, ਸ਼੍ਰੇਣੀਆਂ (HTML, CSS, JavaScript, ਆਦਿ) ਦੁਆਰਾ ਵਿਵਸਥਿਤ। ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਸਹੀ ਕਮਿਊਨਿਟੀ ਮਿਆਰਾਂ ਨਾਲ ਸੈਟ ਕਰੋ ਜਿਸ ਵਿੱਚ ਲਾਇਸੰਸ, ਯੋਗਦਾਨ ਦੇਣ ਦੇ ਨਿਰਦੇਸ਼, ਅਤੇ ਕੋਡ ਆਫ ਕੰਡਕਟ ਸ਼ਾਮਲ ਹਨ। ਘੱਟੋ-ਘੱਟ ਦੋ ਫੀਚਰ ਬ੍ਰਾਂਚ ਬਣਾਓ: ਇੱਕ CSS ਸਰੋਤਾਂ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਅਤੇ ਦੂਜਾ JavaScript ਸਰੋਤਾਂ ਲਈ। ਹਰ ਬ੍ਰਾਂਚ ਵਿੱਚ ਵਰਣਨਾਤਮਕ ਕਮਿਟ ਮੈਸੇਜਾਂ ਨਾਲ ਕਮਿਟ ਕਰੋ, ਫਿਰ ਬਦਲਾਅ ਨੂੰ ਮੁੱਖ ਵਿੱਚ ਮਿਲਾਉਣ ਲਈ Pull Requests ਬਣਾਓ। GitHub ਫੀਚਰਜ਼ ਜਿਵੇਂ Issues, Discussions ਨੂੰ ਚਾਲੂ ਕਰੋ, ਅਤੇ ਆਟੋਮੈਟਿਕ ਚੈੱਕ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ GitHub Actions ਵਰਕਫਲੋ ਸੈਟ ਕਰੋ।
+## GitHub Copilot Agent Challenge 🚀
 
-## ਅਸਾਈਨਮੈਂਟ 
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
 
-ਤੁਹਾਡਾ ਮਿਸ਼ਨ, ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਦਾ ਫੈਸਲਾ ਕਰਦੇ ਹੋ: GitHub Skills 'ਤੇ [GitHub ਦਾ ਪਰਿਚਯ](https://github.com/skills/introduction-to-github) ਕੋਰਸ ਪੂਰਾ ਕਰੋ। ਇਹ ਇੰਟਰਐਕਟਿਵ ਕੋਰਸ ਤੁਹਾਨੂੰ ਸਿੱਖੇ ਗਏ ਸਭ ਕੁਝ ਨੂੰ ਸੁਰੱਖਿਅਤ, ਨਿਰਦੇਸ਼ਿਤ ਵਾਤਾਵਰਣ ਵਿੱਚ ਅਭਿਆਸ ਕਰਨ ਦੇਵੇਗਾ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜਦੋਂ ਤੁਸੀਂ ਪੂਰਾ ਕਰ ਲੈਂਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਇੱਕ ਸ਼ਾਨਦਾਰ ਬੈਜ ਮਿਲੇਗਾ! 🏅
+**ਵੇਰਵਾ:** ਇੱਕ ਸਹਿਯੋਗੀ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ ਜੋ ਇਸ ਪਾਠ ਵਿੱਚ ਸਿੱਖੀ ਗਈ ਪੂਰੀ GitHub ਵਰਕਫਲੋ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਇਹ ਚੈਲੈਂਜ ਤੁਹਾਨੂੰ ਰਿਪੋਜ਼ਟਰੀ ਬਣਾਉਣ, ਸਹਿਯੋਗੀ ਫੀਚਰਸ ਅਤੇ ਆਧੁਨਿਕ Git ਵਰਕਫਲੋਜ਼ ਨੂੰ ਅਸਲ-ਦੁਨੀਆ ਦੇ ਸੰਦਰਭ ਵਿੱਚ ਅਭਿਆਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
 
-**
+**ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਨਵਾਂ ਪਬਲਿਕ GitHub ਰਿਪੋਜ਼ਟਰੀ ਬਣ
 
 ---
 
-**ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤੀ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/1-getting-started-lessons/3-accessibility/README.md b/translations/pa/1-getting-started-lessons/3-accessibility/README.md
index 68c350f522..233819afe8 100644
--- a/translations/pa/1-getting-started-lessons/3-accessibility/README.md
+++ b/translations/pa/1-getting-started-lessons/3-accessibility/README.md
@@ -1,132 +1,226 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90b19cde5b79b29e91babd3138cd8035",
-  "translation_date": "2025-10-22T17:34:47+00:00",
+  "original_hash": "7f2c48e04754724123ea100a822765e5",
+  "translation_date": "2025-11-03T16:17:27+00:00",
   "source_file": "1-getting-started-lessons/3-accessibility/README.md",
   "language_code": "pa"
 }
 -->
-# ਐਕਸੇਸਿਬਲ ਵੈੱਬਪੇਜ ਬਣਾਉਣਾ
+# ਸਹੀ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣਾ
 
-![ਐਕਸੇਸਿਬਿਲਟੀ ਬਾਰੇ ਸਭ ਕੁਝ](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.pa.png)
-> ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੂਰਾ](https://twitter.com/girlie_mac) ਵੱਲੋਂ
+![ਸਹੀ ਵੈੱਬਸਾਈਟ ਬਾਰੇ ਸਭ ਕੁਝ](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.pa.png)
+> ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ
+
+```mermaid
+journey
+    title Your Accessibility Learning Adventure
+    section Foundation
+      Understanding Users: 5: You
+      Testing Tools: 4: You
+      POUR Principles: 5: You
+    section Build Skills
+      Semantic HTML: 4: You
+      Visual Design: 5: You
+      ARIA Techniques: 4: You
+    section Master Practice
+      Keyboard Navigation: 5: You
+      Form Accessibility: 4: You
+      Real-world Testing: 5: You
+```
 
 ## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 [ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/)
 
-> ਵੈੱਬ ਦੀ ਤਾਕਤ ਇਸ ਦੀ ਯੂਨੀਵਰਸਲਿਟੀ ਵਿੱਚ ਹੈ। ਅਪਾਹਜਤਾ ਤੋਂ ਬਿਨਾਂ ਹਰ ਕਿਸੇ ਲਈ ਪਹੁੰਚ ਇਸ ਦਾ ਇੱਕ ਜ਼ਰੂਰੀ ਪਹਲੂ ਹੈ।
+> ਵੈੱਬ ਦੀ ਤਾਕਤ ਇਸ ਦੀ ਵਿਸ਼ਵਵਿਆਪਕਤਾ ਵਿੱਚ ਹੈ। ਅਪਾਹਜਤਾ ਤੋਂ ਬਿਨਾਂ ਹਰ ਕਿਸੇ ਲਈ ਪਹੁੰਚ ਇੱਕ ਜ਼ਰੂਰੀ ਪਹਲੂ ਹੈ।
 >
-> \- ਸਰ ਟਿਮੋਥੀ ਬਰਨਰਜ਼-ਲੀ, W3C ਡਾਇਰੈਕਟਰ ਅਤੇ ਵਰਲਡ ਵਾਈਡ ਵੈੱਬ ਦੇ ਖੋਜਕਾਰ
+> \- ਸਰ ਟਿਮੋਥੀ ਬਰਨਰਜ਼-ਲੀ, W3C ਡਾਇਰੈਕਟਰ ਅਤੇ ਵਰਲਡ ਵਾਈਡ ਵੈੱਬ ਦੇ ਆਵਿਸ਼ਕਾਰਕ
 
-ਇਹ ਗੱਲ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦੀ ਹੈ: ਜਦੋਂ ਤੁਸੀਂ ਐਕਸੇਸਿਬਲ ਵੈੱਬਸਾਈਟਾਂ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਿਰਫ ਅਪਾਹਜ ਲੋਕਾਂ ਦੀ ਮਦਦ ਨਹੀਂ ਕਰ ਰਹੇ ਹੁੰਦੇ—ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਵੈੱਬ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਬਿਹਤਰ ਬਣਾ ਰਹੇ ਹੁੰਦੇ ਹੋ!
+ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦਾ ਹੈ: ਜਦੋਂ ਤੁਸੀਂ ਸਹੀ ਵੈੱਬਸਾਈਟ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਿਰਫ ਅਪਾਹਜ ਲੋਕਾਂ ਦੀ ਮਦਦ ਨਹੀਂ ਕਰ ਰਹੇ, ਬਲਕਿ ਤੁਸੀਂ ਵੈੱਬ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਬਿਹਤਰ ਬਣਾ ਰਹੇ ਹੋ!
 
-ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੜਕ ਦੇ ਕੋਨਿਆਂ 'ਤੇ ਉਹ ਰੈਂਪ ਨੋਟਿਸ ਕੀਤੇ ਹਨ? ਇਹ ਮੁਢਲੇ ਤੌਰ 'ਤੇ ਵ੍ਹੀਲਚੇਅਰਾਂ ਲਈ ਬਣਾਏ ਗਏ ਸਨ, ਪਰ ਹੁਣ ਇਹ ਬੱਚਿਆਂ ਦੇ ਸਟ੍ਰੋਲਰਾਂ, ਡਿਲਿਵਰੀ ਵਰਕਰਾਂ ਦੇ ਡੌਲੀਜ਼, ਯਾਤਰੀਆਂ ਦੇ ਰੋਲਿੰਗ ਲੱਗੇਜ ਅਤੇ ਸਾਈਕਲ ਸਵਾਰਾਂ ਲਈ ਵੀ ਮਦਦਗਾਰ ਹਨ। ਇਹੀ ਤਰੀਕੇ ਨਾਲ ਐਕਸੇਸਿਬਲ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਕੰਮ ਕਰਦਾ ਹੈ—ਜੋ ਹੱਲ ਇੱਕ ਸਮੂਹ ਦੀ ਮਦਦ ਕਰਦੇ ਹਨ, ਉਹ ਅਕਸਰ ਹਰ ਕਿਸੇ ਲਈ ਲਾਭਦਾਇਕ ਸਾਬਤ ਹੁੰਦੇ ਹਨ। ਕਿੰਨਾ ਵਧੀਆ ਹੈ, ਹੈ ਨਾ?
+ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੜਕ ਦੇ ਕੋਨੇ 'ਤੇ ਉਹ ਛੋਟੇ ਰੈਂਪ ਦੇਖੇ ਹਨ? ਇਹ ਮੁੱਖ ਤੌਰ 'ਤੇ ਵ੍ਹੀਲਚੇਅਰ ਲਈ ਬਣਾਏ ਗਏ ਸਨ, ਪਰ ਹੁਣ ਇਹ ਬੱਚਿਆਂ ਦੇ ਸਟ੍ਰੋਲਰ, ਡਿਲਿਵਰੀ ਵਰਕਰਾਂ ਦੇ ਡੌਲੀ, ਯਾਤਰੀਆਂ ਦੇ ਰੋਲਿੰਗ ਲੱਗੇਜ ਅਤੇ ਸਾਈਕਲ ਸਵਾਰਾਂ ਲਈ ਵੀ ਮਦਦਗਾਰ ਹਨ। ਇਹੀ ਤਰੀਕੇ ਨਾਲ ਸਹੀ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਕੰਮ ਕਰਦੀ ਹੈ—ਜੋ ਹੱਲ ਇੱਕ ਸਮੂਹ ਦੀ ਮਦਦ ਕਰਦੇ ਹਨ, ਉਹ ਅਕਸਰ ਹਰ ਕਿਸੇ ਲਈ ਫਾਇਦੇਮੰਦ ਹੁੰਦੇ ਹਨ। ਕਿੰਨਾ ਵਧੀਆ ਹੈ, ਹੈ ਨਾ?
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਇਹ ਪੜ੍ਹਾਂਗੇ ਕਿ ਕਿਵੇਂ ਵੈੱਬਸਾਈਟਾਂ ਬਣਾਈਆਂ ਜਾਣ ਜੋ ਹਰ ਕਿਸੇ ਲਈ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਭਾਵੇਂ ਉਹ ਵੈੱਬ ਨੂੰ ਕਿਸੇ ਵੀ ਤਰੀਕੇ ਨਾਲ ਬ੍ਰਾਊਜ਼ ਕਰਦੇ ਹੋਣ। ਤੁਸੀਂ ਪ੍ਰੈਕਟਿਕਲ ਤਕਨੀਕਾਂ ਦੀ ਖੋਜ ਕਰੋਗੇ ਜੋ ਪਹਿਲਾਂ ਹੀ ਵੈੱਬ ਮਿਆਰਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ, ਟੈਸਟਿੰਗ ਟੂਲਾਂ ਨਾਲ ਹੱਥ-ਅਨੁਭਵ ਪ੍ਰਾਪਤ ਕਰੋਗੇ, ਅਤੇ ਦੇਖੋਗੇ ਕਿ ਐਕਸੇਸਿਬਿਲਟੀ ਤੁਹਾਡੀਆਂ ਸਾਈਟਾਂ ਨੂੰ ਸਾਰੇ ਯੂਜ਼ਰਾਂ ਲਈ ਕਿਵੇਂ ਵਧੀਆ ਬਣਾਉਂਦੀ ਹੈ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਇਹ ਪਤਾ ਲਗਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਕਿਵੇਂ ਵੈੱਬਸਾਈਟਾਂ ਬਣਾਈਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ ਜੋ ਹਰ ਕਿਸੇ ਲਈ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਚਾਹੇ ਉਹ ਵੈੱਬ ਨੂੰ ਕਿਸੇ ਵੀ ਤਰੀਕੇ ਨਾਲ ਵਰਤਦੇ ਹੋਣ। ਤੁਸੀਂ ਵੈੱਬ ਮਿਆਰਾਂ ਵਿੱਚ ਪਹਿਲਾਂ ਹੀ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ ਵਿਧੀਆਂ ਦੀ ਖੋਜ ਕਰੋਗੇ, ਟੈਸਟਿੰਗ ਟੂਲਾਂ ਨਾਲ ਹੱਥ-ਅਜਮਾਈ ਕਰੋਗੇ, ਅਤੇ ਦੇਖੋਗੇ ਕਿ ਕਿਵੇਂ ਸਹੀ ਬਣਾਉਟ ਤੁਹਾਡੇ ਸਾਈਟਾਂ ਨੂੰ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵਧੇਰੇ ਵਰਤਣਯੋਗ ਬਣਾਉਂਦੀ ਹੈ।
 
-ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਵਿੱਚ ਇਹ ਵਿਸ਼ਵਾਸ ਹੋਵੇਗਾ ਕਿ ਐਕਸੇਸਿਬਿਲਟੀ ਨੂੰ ਆਪਣੇ ਡਿਵੈਲਪਮੈਂਟ ਵਰਕਫਲੋ ਦਾ ਕੁਦਰਤੀ ਹਿੱਸਾ ਬਣਾਉਣਾ ਹੈ। ਤਿਆਰ ਹੋ ਜਾਓ ਇਹ ਪੜ੍ਹਨ ਲਈ ਕਿ ਸੋਚ-ਵਿਚਾਰ ਵਾਲੀਆਂ ਡਿਜ਼ਾਈਨ ਚੋਣਾਂ ਕਿਵੇਂ ਅਰਬਾਂ ਯੂਜ਼ਰਾਂ ਲਈ ਵੈੱਬ ਖੋਲ੍ਹ ਸਕਦੀਆਂ ਹਨ? ਚਲੋ ਸ਼ੁਰੂ ਕਰੀਏ!
+ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਵਿੱਚ ਇਹ ਯਕੀਨ ਹੋਵੇਗਾ ਕਿ ਸਹੀ ਬਣਾਉਟ ਨੂੰ ਆਪਣੇ ਵਿਕਾਸ ਦੇ ਕੰਮਕਾਜ ਦਾ ਕੁਦਰਤੀ ਹਿੱਸਾ ਬਣਾਉਣਾ ਕਿਵੇਂ ਹੈ। ਤਿਆਰ ਹੋ ਜਾਓ ਇਹ ਪਤਾ ਕਰਨ ਲਈ ਕਿ ਸੋਚ-ਵਿਚਾਰ ਵਾਲੇ ਡਿਜ਼ਾਈਨ ਚੋਣਾਂ ਕਿਵੇਂ ਅਰਬਾਂ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵੈੱਬ ਖੋਲ੍ਹ ਸਕਦੀਆਂ ਹਨ? ਚਲੋ ਸ਼ੁਰੂ ਕਰੀਏ!
+
+```mermaid
+mindmap
+  root((Web Accessibility))
+    Users
+      Screen readers
+      Keyboard navigation
+      Voice control
+      Magnification
+    Technologies
+      HTML semantics
+      ARIA attributes
+      CSS focus indicators
+      Keyboard events
+    Benefits
+      Wider audience
+      Better SEO
+      Legal compliance
+      Universal design
+    Testing
+      Automated tools
+      Manual testing
+      User feedback
+      Real assistive tech
+```
 
-> ਤੁਸੀਂ ਇਹ ਪਾਠ [ਮਾਈਕਰੋਸਾਫਟ ਲਰਨ](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
+> ਤੁਸੀਂ ਇਹ ਪਾਠ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
 
 ## ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਸਮਝਣਾ
 
-ਕੋਡਿੰਗ ਵਿੱਚ ਕੂਦਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਇਹ ਸਮਝਣ ਲਈ ਕੁਝ ਸਮਾਂ ਲਵੋ ਕਿ ਵੱਖ-ਵੱਖ ਯੋਗਤਾਵਾਂ ਵਾਲੇ ਲੋਕ ਅਸਲ ਵਿੱਚ ਵੈੱਬ ਦਾ ਅਨੁਭਵ ਕਿਵੇਂ ਕਰਦੇ ਹਨ। ਇਹ ਸਿਰਫ ਸਿਧਾਂਤ ਨਹੀਂ ਹੈ—ਇਹ ਅਸਲ-ਦੁਨੀਆ ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਪੈਟਰਨਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਇੱਕ ਬਿਹਤਰ ਡਿਵੈਲਪਰ ਬਣਾਉਂਦਾ ਹੈ!
+ਕੋਡਿੰਗ ਵਿੱਚ ਜੁੜਨ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਇਹ ਸਮਝਣ ਲਈ ਇੱਕ ਪਲ ਲਵਾਂ ਕਿ ਵੱਖ-ਵੱਖ ਯੋਗਤਾਵਾਂ ਵਾਲੇ ਲੋਕ ਵੈੱਬ ਨੂੰ ਅਸਲ ਵਿੱਚ ਕਿਵੇਂ ਅਨੁਭਵ ਕਰਦੇ ਹਨ। ਇਹ ਸਿਰਫ ਸਿਧਾਂਤ ਨਹੀਂ ਹੈ—ਇਹ ਅਸਲ-ਜਗਤ ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਪੈਟਰਨਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਇੱਕ ਬਿਹਤਰ ਡਿਵੈਲਪਰ ਬਣਾਉਂਦਾ ਹੈ!
 
-ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਬਹੁਤ ਹੀ ਸ਼ਾਨਦਾਰ ਟੂਲ ਹਨ ਜੋ ਅਪਾਹਜ ਲੋਕਾਂ ਨੂੰ ਵੈੱਬਸਾਈਟਾਂ ਨਾਲ ਇਸ ਤਰੀਕੇ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਸਮਝ ਲੈਂਦੇ ਹੋ ਕਿ ਇਹ ਤਕਨਾਲੋਜੀਆਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਤਾਂ ਐਕਸੇਸਿਬਲ ਵੈੱਬ ਅਨੁਭਵ ਬਣਾਉਣਾ ਕਾਫ਼ੀ ਸੌਖਾ ਹੋ ਜਾਂਦਾ ਹੈ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿਸੇ ਹੋਰ ਦੀਆਂ ਅੱਖਾਂ ਰਾਹੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਦੇਖਣਾ ਸਿੱਖਣਾ।
+ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਅਦਭੁਤ ਟੂਲ ਹਨ ਜੋ ਅਪਾਹਜ ਲੋਕਾਂ ਨੂੰ ਵੈੱਬਸਾਈਟਾਂ ਨਾਲ ਅਜਿਹੇ ਤਰੀਕੇ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਸਮਝ ਲੈਂਦੇ ਹੋ ਕਿ ਇਹ ਤਕਨਾਲੋਜੀਆਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਤਾਂ ਸਹੀ ਵੈੱਬ ਅਨੁਭਵ ਬਣਾਉਣਾ ਕਾਫ਼ੀ ਸਹਜ ਹੋ ਜਾਂਦਾ ਹੈ। ਇਹ ਜਿਵੇਂ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਕਿਸੇ ਹੋਰ ਦੀਆਂ ਅੱਖਾਂ ਨਾਲ ਦੇਖਣ ਦੀ ਕਲਾ ਸਿੱਖਣ ਵਰਗਾ ਹੈ।
 
 ### ਸਕ੍ਰੀਨ ਰੀਡਰ
 
-[ਸਕ੍ਰੀਨ ਰੀਡਰ](https://en.wikipedia.org/wiki/Screen_reader) ਬਹੁਤ ਹੀ ਉੱਚ ਤਕਨਾਲੋਜੀ ਵਾਲੇ ਉਪਕਰਣ ਹਨ ਜੋ ਡਿਜ਼ੀਟਲ ਟੈਕਸਟ ਨੂੰ ਬੋਲਣ ਜਾਂ ਬ੍ਰੇਲ ਆਉਟਪੁੱਟ ਵਿੱਚ ਬਦਲ ਦਿੰਦੇ ਹਨ। ਜਦੋਂ ਕਿ ਇਹ ਮੁੱਖ ਤੌਰ 'ਤੇ ਦ੍ਰਿਸ਼ਟੀਹੀਨ ਲੋਕਾਂ ਦੁਆਰਾ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਇਹ ਡਿਸਲੇਕਸੀਆ ਵਰਗੀਆਂ ਸਿੱਖਣ ਦੀਆਂ ਅਪਾਹਜਤਾਵਾਂ ਵਾਲੇ ਯੂਜ਼ਰਾਂ ਲਈ ਵੀ ਬਹੁਤ ਮਦਦਗਾਰ ਹਨ।
+[ਸਕ੍ਰੀਨ ਰੀਡਰ](https://en.wikipedia.org/wiki/Screen_reader) ਕਾਫ਼ੀ ਉੱਚ-ਤਕਨਾਲੀ ਤਕਨਾਲੋਜੀ ਹਨ ਜੋ ਡਿਜ਼ੀਟਲ ਟੈਕਸਟ ਨੂੰ ਬੋਲਣ ਜਾਂ ਬ੍ਰੇਲ ਆਉਟਪੁੱਟ ਵਿੱਚ ਬਦਲ ਦਿੰਦੀਆਂ ਹਨ। ਜਦੋਂ ਕਿ ਇਹ ਮੁੱਖ ਤੌਰ 'ਤੇ ਦ੍ਰਿਸ਼ਟੀ ਬਾਧਾ ਵਾਲੇ ਲੋਕਾਂ ਦੁਆਰਾ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਇਹ ਡਿਸਲੈਕਸੀਆ ਵਰਗੀਆਂ ਸਿੱਖਣ ਦੀਆਂ ਬਾਧਾਵਾਂ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵੀ ਬਹੁਤ ਮਦਦਗਾਰ ਹਨ।
 
-ਮੈਂ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨੂੰ ਇੱਕ ਬਹੁਤ ਹੀ ਸਮਰੱਥ ਕਹਾਣੀਕਾਰ ਵਾਂਗ ਸੋਚਦਾ ਹਾਂ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ ਕਿਤਾਬ ਪੜ੍ਹ ਰਿਹਾ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਤਰਤੀਬਵਾਰ ਕ੍ਰਮ ਵਿੱਚ ਉੱਚਾਰਨ ਕਰਦਾ ਹੈ, ਇੰਟਰੈਕਟਿਵ ਤੱਤਾਂ ਨੂੰ "ਬਟਨ" ਜਾਂ "ਲਿੰਕ" ਵਜੋਂ ਐਲਾਨ ਕਰਦਾ ਹੈ, ਅਤੇ ਪੇਜ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਜੰਪ ਕਰਨ ਲਈ ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਪਰ ਗੱਲ ਇਹ ਹੈ ਕਿ—ਸਕ੍ਰੀਨ ਰੀਡਰ ਸਿਰਫ ਤਦ ਹੀ ਆਪਣਾ ਜਾਦੂ ਦਿਖਾ ਸਕਦੇ ਹਨ ਜਦੋਂ ਅਸੀਂ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਸਹੀ ਢਾਂਚੇ ਅਤੇ ਅਰਥਪੂਰਨ ਸਮੱਗਰੀ ਨਾਲ ਬਣਾਉਂਦੇ ਹਾਂ। ਇਹੋ ਜਿੱਥੇ ਤੁਸੀਂ ਇੱਕ ਡਿਵੈਲਪਰ ਵਜੋਂ ਆਉਂਦੇ ਹੋ!
+ਮੈਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨੂੰ ਇੱਕ ਬਹੁਤ ਹੀ ਸਮਰੱਥ ਕਹਾਣੀਕਾਰ ਵਲੋਂ ਇੱਕ ਕਿਤਾਬ ਪੜ੍ਹਨ ਵਾਲੇ ਵਜੋਂ ਸੋਚਣਾ ਪਸੰਦ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਤਰਕਸੰਗਤ ਕ੍ਰਮ ਵਿੱਚ ਉੱਚੇ ਸੁਰ ਵਿੱਚ ਪੜ੍ਹਦਾ ਹੈ, ਇੰਟਰਐਕਟਿਵ ਤੱਤਾਂ ਨੂੰ "ਬਟਨ" ਜਾਂ "ਲਿੰਕ" ਵਜੋਂ ਘੋਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਪੇਜ 'ਤੇ ਜੰਪ ਕਰਨ ਲਈ ਕੀਬੋਰਡ ਸ਼ਾਰਟਕਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਪਰ ਗੱਲ ਇਹ ਹੈ—ਸਕ੍ਰੀਨ ਰੀਡਰ ਸਿਰਫ ਤਦ ਹੀ ਆਪਣਾ ਜਾਦੂ ਕਰ ਸਕਦੇ ਹਨ ਜੇ ਅਸੀਂ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਸਹੀ ਬਣਾਉਟ ਅਤੇ ਅਰਥਪੂਰਨ ਸਮੱਗਰੀ ਨਾਲ ਬਣਾਈਏ। ਇਹ ਤੁਹਾਡੇ ਵਜੋਂ ਇੱਕ ਡਿਵੈਲਪਰ ਦੀ ਜ਼ਿੰਮੇਵਾਰੀ ਹੈ!
 
-**ਪਲੇਟਫਾਰਮਾਂ ਵਿੱਚ ਪ੍ਰਸਿੱਧ ਸਕ੍ਰੀਨ ਰੀਡਰ:**
-- **ਵਿੰਡੋਜ਼**: [NVDA](https://www.nvaccess.org/about-nvda/) (ਮੁਫ਼ਤ ਅਤੇ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (ਬਿਲਟ-ਇਨ)
-- **ਮੈਕਓਐਸ/ਆਈਓਐਸ**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (ਬਿਲਟ-ਇਨ ਅਤੇ ਬਹੁਤ ਸਮਰੱਥ)
-- **ਐਂਡਰਾਇਡ**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (ਬਿਲਟ-ਇਨ)
-- **ਲਿਨਕਸ**: [Orca](https://wiki.gnome.org/Projects/Orca) (ਮੁਫ਼ਤ ਅਤੇ ਖੁੱਲ੍ਹਾ-ਸਰੋਤ)
+**ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਪ੍ਰਸਿੱਧ ਸਕ੍ਰੀਨ ਰੀਡਰ:**
+- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (ਮੁਫ਼ਤ ਅਤੇ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (ਬਿਲਟ-ਇਨ)
+- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (ਬਿਲਟ-ਇਨ ਅਤੇ ਬਹੁਤ ਸਮਰੱਥ)
+- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (ਬਿਲਟ-ਇਨ)
+- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (ਮੁਫ਼ਤ ਅਤੇ ਖੁੱਲ੍ਹਾ-ਸਰੋਤ)
 
 **ਸਕ੍ਰੀਨ ਰੀਡਰ ਵੈੱਬ ਸਮੱਗਰੀ ਨੂੰ ਕਿਵੇਂ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ:**
 
-ਸਕ੍ਰੀਨ ਰੀਡਰ ਕਈ ਨੈਵੀਗੇਸ਼ਨ ਤਰੀਕੇ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਜੋ ਅਨੁਭਵੀ ਯੂਜ਼ਰਾਂ ਲਈ ਬ੍ਰਾਊਜ਼ਿੰਗ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਬਣਾਉਂਦੇ ਹਨ:
-- **ਲਗਾਤਾਰ ਪੜ੍ਹਨਾ**: ਸਮੱਗਰੀ ਨੂੰ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਪੜ੍ਹਦਾ ਹੈ, ਜਿਵੇਂ ਇੱਕ ਕਿਤਾਬ ਦੀ ਪਾਲਣਾ ਕਰਨਾ
-- **ਲੈਂਡਮਾਰਕ ਨੈਵੀਗੇਸ਼ਨ**: ਪੇਜ ਦੇ ਭਾਗਾਂ ਵਿੱਚ ਜੰਪ ਕਰਨਾ (ਹੈਡਰ, ਨੈਵ, ਮੈਨ, ਫੁੱਟਰ)
-- **ਹੈਡਿੰਗ ਨੈਵੀਗੇਸ਼ਨ**: ਹੈਡਿੰਗਜ਼ ਵਿੱਚ ਜੰਪ ਕਰਕੇ ਪੇਜ ਦੇ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ
-- **ਲਿੰਕ ਲਿਸਟਾਂ**: ਤੇਜ਼ ਪਹੁੰਚ ਲਈ ਸਾਰੇ ਲਿੰਕਾਂ ਦੀ ਸੂਚੀ ਬਣਾਉਣਾ
-- **ਫਾਰਮ ਕੰਟਰੋਲ**: ਇਨਪੁਟ ਫੀਲਡਾਂ ਅਤੇ ਬਟਨਾਂ ਵਿੱਚ ਸਿੱਧਾ ਨੈਵੀਗੇਟ ਕਰਨਾ
+ਸਕ੍ਰੀਨ ਰੀਡਰ ਕਈ ਨੈਵੀਗੇਸ਼ਨ ਵਿਧੀਆਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਜੋ ਅਨੁਭਵੀ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਬ੍ਰਾਊਜ਼ਿੰਗ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਬਣਾਉਂਦੀਆਂ ਹਨ:
+- **ਕ੍ਰਮਵਾਰ ਪੜ੍ਹਨਾ**: ਸਮੱਗਰੀ ਨੂੰ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਪੜ੍ਹਦਾ ਹੈ, ਜਿਵੇਂ ਇੱਕ ਕਿਤਾਬ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹੋ
+- **ਲੈਂਡਮਾਰਕ ਨੈਵੀਗੇਸ਼ਨ**: ਪੇਜ ਦੇ ਸੈਕਸ਼ਨਾਂ ਵਿੱਚ ਜੰਪ ਕਰਨਾ (ਹੈਡਰ, ਨੈਵ, ਮੇਨ, ਫੁੱਟਰ)
+- **ਹੈਡਿੰਗ ਨੈਵੀਗੇਸ਼ਨ**: ਹੈਡਿੰਗਜ਼ ਵਿੱਚ ਜੰਪ ਕਰਕੇ ਪੇਜ ਬਣਾਉਟ ਨੂੰ ਸਮਝਣਾ
+- **ਲਿੰਕ ਲਿਸਟ**: ਸਾਰੇ ਲਿੰਕਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਬਣਾਉਣਾ ਤੇ ਤੇਜ਼ ਪਹੁੰਚ
+- **ਫਾਰਮ ਕੰਟਰੋਲ**: ਇਨਪੁਟ ਫੀਲਡ ਅਤੇ ਬਟਨ ਵਿੱਚ ਸਿੱਧੇ ਨੈਵੀਗੇਟ ਕਰਨਾ
 
-> 💡 **ਇਹ ਗੱਲ ਜੋ ਮੇਰੇ ਮਨ ਨੂੰ ਹੈਰਾਨ ਕਰ ਗਈ**: 68% ਸਕ੍ਰੀਨ ਰੀਡਰ ਯੂਜ਼ਰ ਮੁੱਖ ਤੌਰ 'ਤੇ ਹੈਡਿੰਗਜ਼ ਦੁਆਰਾ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ ([WebAIM ਸਰਵੇ](https://webaim.org/projects/screenreadersurvey9/#finding))। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡਾ ਹੈਡਿੰਗ ਢਾਂਚਾ ਯੂਜ਼ਰਾਂ ਲਈ ਇੱਕ ਰੋਡਮੈਪ ਵਾਂਗ ਹੈ—ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਹੀ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਲੋਕਾਂ ਨੂੰ ਆਪਣੀ ਸਮੱਗਰੀ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਤੇਜ਼ੀ ਨਾਲ ਰਸਤਾ ਲੱਭਣ ਵਿੱਚ ਮਦਦ ਕਰ ਰਹੇ ਹੋ!
+> 💡 **ਇਹ ਕੁਝ ਹੈਰਾਨੀਜਨਕ ਹੈ**: 68% ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾਵਾਂ ਮੁੱਖ ਤੌਰ 'ਤੇ ਹੈਡਿੰਗਜ਼ ਦੁਆਰਾ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding))। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡਾ ਹੈਡਿੰਗ ਬਣਾਉਟ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਰੋਡਮੈਪ ਵਰਗਾ ਹੈ—ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਹੀ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਲੋਕਾਂ ਨੂੰ ਆਪਣੀ ਸਮੱਗਰੀ ਦੇ ਆਸ-ਪਾਸ ਤੇਜ਼ੀ ਨਾਲ ਰਸਤਾ ਲੱਭਣ ਵਿੱਚ ਮਦਦ ਕਰ ਰਹੇ ਹੋ!
 
-### ਆਪਣਾ ਟੈਸਟਿੰਗ ਵਰਕਫਲੋ ਬਣਾਉਣਾ
+### ਟੈਸਟਿੰਗ ਵਰਕਫਲੋ ਬਣਾਉਣਾ
 
-ਇਹ ਚੰਗੀ ਖ਼ਬਰ ਹੈ—ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਐਕਸੇਸਿਬਿਲਟੀ ਟੈਸਟਿੰਗ ਭਾਰੀ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ! ਤੁਸੀਂ ਆਟੋਮੈਟਿਕ ਟੂਲਾਂ (ਇਹ ਸਪੱਸ਼ਟ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਫੜਨ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਹਨ) ਨੂੰ ਕੁਝ ਹੱਥ-ਅਨੁਭਵ ਟੈਸਟਿੰਗ ਨਾਲ ਜੋੜਨਾ ਚਾਹੋਗੇ। ਇਹ ਰਹੀ ਇੱਕ ਪ੍ਰਣਾਲੀਬੱਧ ਪਹੁੰਚ ਜੋ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਫੜਦੀ ਹੈ ਬਿਨਾਂ ਤੁਹਾਡੇ ਸਾਰੇ ਦਿਨ ਨੂੰ ਖਰਚ ਕੀਤੇ:
+ਇਹ ਕੁਝ ਚੰਗੀ ਖ਼ਬਰ ਹੈ—ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਸਹੀ ਟੈਸਟਿੰਗ ਭਿਆਨਕ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ! ਤੁਸੀਂ ਆਟੋਮੈਟਿਕ ਟੂਲਾਂ (ਇਹ ਸਪਸ਼ਟ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਪਕੜਨ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਹਨ) ਨੂੰ ਕੁਝ ਹੱਥ-ਅਜਮਾਈ ਟੈਸਟਿੰਗ ਨਾਲ ਮਿਲਾਉਣਾ ਚਾਹੋਗੇ। ਇਹ ਇੱਕ ਵਿਧੀਬੱਧ ਪਹੁੰਚ ਹੈ ਜੋ ਮੈਂ ਪਤਾ ਲਗਾਇਆ ਹੈ ਕਿ ਸਭ ਤੋਂ ਵੱਧ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਪਕੜਦਾ ਹੈ ਬਿਨਾਂ ਤੁਹਾਡੇ ਸਾਰੇ ਦਿਨ ਨੂੰ ਖਰਚ ਕਰਨ ਦੇ:
 
-**ਮਹੱਤਵਪੂਰਨ ਮੈਨੂਅਲ ਟੈਸਟਿੰਗ ਵਰਕਫਲੋ:**
+**ਮੁੱਢਲੀ ਹੱਥ-ਅਜਮਾਈ ਟੈਸਟਿੰਗ ਵਰਕਫਲੋ:**
 
 ```mermaid
-graph TD
-    A[Start Testing] --> B{Keyboard Navigation}
+flowchart TD
+    A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation}
     B --> C[Tab through all interactive elements]
-    C --> D{Screen Reader Testing}
+    C --> D{🎧 Screen Reader Testing}
     D --> E[Test with NVDA/VoiceOver]
-    E --> F{Zoom Testing}
+    E --> F{🔍 Zoom Testing}
     F --> G[Zoom to 200% and test functionality]
-    G --> H{Color/Contrast Check}
+    G --> H{🎨 Color/Contrast Check}
     H --> I[Verify all text meets contrast ratios]
-    I --> J{Focus Management}
+    I --> J{👁️ Focus Management}
     J --> K[Ensure focus indicators are visible]
-    K --> L[Testing Complete]
+    K --> L[✅ Testing Complete]
+    
+    style A fill:#e3f2fd
+    style L fill:#e8f5e8
+    style B fill:#fff3e0
+    style D fill:#f3e5f5
+    style F fill:#e0f2f1
+    style H fill:#fce4ec
+    style J fill:#e8eaf6
 ```
 
 **ਕਦਮ-ਦਰ-ਕਦਮ ਟੈਸਟਿੰਗ ਚੈੱਕਲਿਸਟ:**
 1. **ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ**: ਸਿਰਫ਼ Tab, Shift+Tab, Enter, Space, ਅਤੇ Arrow keys ਵਰਤੋ
 2. **ਸਕ੍ਰੀਨ ਰੀਡਰ ਟੈਸਟਿੰਗ**: NVDA, VoiceOver, ਜਾਂ Narrator ਚਾਲੂ ਕਰੋ ਅਤੇ ਬੰਦ ਅੱਖਾਂ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰੋ
-3. **ਜ਼ੂਮ ਟੈਸਟਿੰਗ**: 200% ਅਤੇ 400% ਜ਼ੂਮ ਲੈਵਲਾਂ 'ਤੇ ਟੈਸਟ ਕਰੋ
-4. **ਰੰਗ ਕਾਂਟ੍ਰਾਸਟ ਦੀ ਪੁਸ਼ਟੀ**: ਸਾਰੇ ਟੈਕਸਟ ਅਤੇ UI ਕੰਪੋਨੈਂਟਾਂ ਦੀ ਜਾਂਚ ਕਰੋ
-5. **ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਟੈਸਟਿੰਗ**: ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਾਰੇ ਇੰਟਰੈਕਟਿਵ ਤੱਤਾਂ ਦੇ ਦ੍ਰਿਸ਼ਮਾਨ ਫੋਕਸ ਸਟੇਟ ਹਨ
+3. **ਜ਼ੂਮ ਟੈਸਟਿੰਗ**: 200% ਅਤੇ 400% ਜ਼ੂਮ ਲੈਵਲ 'ਤੇ ਟੈਸਟ ਕਰੋ
+4. **ਰੰਗ ਕਾਂਟ੍ਰਾਸਟ ਦੀ ਜਾਂਚ**: ਸਾਰੇ ਟੈਕਸਟ ਅਤੇ UI ਕੰਪੋਨੈਂਟਾਂ ਦੀ ਜਾਂਚ ਕਰੋ
+5. **ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਟੈਸਟਿੰਗ**: ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਾਰੇ ਇੰਟਰਐਕਟਿਵ ਤੱਤਾਂ ਦੇ ਦਿੱਖਤ ਫੋਕਸ ਸਟੇਟ ਹਨ
 
-✅ **ਲਾਈਟਹਾਊਸ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ**: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵਟੂਲ ਖੋਲ੍ਹੋ, ਇੱਕ ਲਾਈਟਹਾਊਸ ਐਕਸੇਸਿਬਿਲਟੀ ਆਡਿਟ ਚਲਾਓ, ਫਿਰ ਆਪਣੇ ਮੈਨੂਅਲ ਟੈਸਟਿੰਗ ਫੋਕਸ ਖੇਤਰਾਂ ਨੂੰ ਗਾਈਡ ਕਰਨ ਲਈ ਨਤੀਜੇ ਵਰਤੋ।
+✅ **Lighthouse ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ**: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ DevTools ਖੋਲ੍ਹੋ, ਇੱਕ Lighthouse ਸਹੀ ਆਡਿਟ ਚਲਾਓ, ਫਿਰ ਆਪਣੇ ਹੱਥ-ਅਜਮਾਈ ਟੈਸਟਿੰਗ ਫੋਕਸ ਖੇਤਰਾਂ ਨੂੰ ਗਾਈਡ ਕਰਨ ਲਈ ਨਤੀਜੇ ਵਰਤੋ।
 
 ### ਜ਼ੂਮ ਅਤੇ ਵਧਾਈ ਟੂਲ
 
-ਤੁਸੀਂ ਕਿਵੇਂ ਕਦੇ ਆਪਣੇ ਫੋਨ 'ਤੇ ਪਿੰਚ ਕਰਦੇ ਹੋ ਜਦੋਂ ਟੈਕਸਟ ਬਹੁਤ ਛੋਟਾ ਹੁੰਦਾ ਹੈ, ਜਾਂ ਚਮਕਦਾਰ ਧੁੱਪ ਵਿੱਚ ਆਪਣੇ ਲੈਪਟਾਪ ਸਕ੍ਰੀਨ 'ਤੇ ਅੱਖਾਂ ਮਿਚਕਦੇ ਹੋ? ਬਹੁਤ ਸਾਰੇ ਯੂਜ਼ਰ ਹਰ ਰੋਜ਼ ਸਮੱਗਰੀ ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਬਣਾਉਣ ਲਈ ਵਧਾਈ ਟੂਲਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਇਸ ਵਿੱਚ ਘੱਟ ਦ੍ਰਿਸ਼ਟੀ ਵਾਲੇ ਲੋਕ, ਵੱਡੇ ਉਮਰ ਦੇ ਲੋਕ, ਅਤੇ ਕੋਈ ਵੀ ਸ਼ਾਮਲ ਹੈ ਜਿਸਨੇ ਕਦੇ ਬਾਹਰ ਵੈੱਬਸਾਈਟ ਪੜ੍ਹਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਹੈ।
+ਤੁਹਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਜਦੋਂ ਟੈਕਸਟ ਬਹੁਤ ਛੋਟਾ ਹੁੰਦਾ ਹੈ ਤਾਂ ਤੁਸੀਂ ਕਦੇ-ਕਦੇ ਆਪਣੇ ਫੋਨ 'ਤੇ ਪਿੰਚ ਕਰਦੇ ਹੋ, ਜਾਂ ਚਮਕਦਾਰ ਧੁੱਪ ਵਿੱਚ ਆਪਣੇ ਲੈਪਟਾਪ ਸਕ੍ਰੀਨ 'ਤੇ ਅੱਖਾਂ ਮੀਟਦੇ ਹੋ? ਕਈ ਉਪਭੋਗਤਾ ਸਮੱਗਰੀ ਨੂੰ ਹਰ ਰੋਜ਼ ਪੜ੍ਹਨਯੋਗ ਬਣਾਉਣ ਲਈ ਵਧਾਈ ਟੂਲਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਇਸ ਵਿੱਚ ਘੱਟ ਦ੍ਰਿਸ਼ਟੀ ਵਾਲੇ ਲੋਕ, ਵੱਡੇ ਹੋ ਰਹੇ ਬਜ਼ੁਰਗ, ਅਤੇ ਕੋਈ ਵੀ ਸ਼ਾਮਲ ਹੈ ਜਿਸਨੇ ਕਦੇ ਬਾਹਰ ਇੱਕ ਵੈੱਬਸਾਈਟ ਪੜ੍ਹਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਹੈ।
 
-ਆਧੁਨਿਕ ਜ਼ੂਮ ਤਕਨਾਲੋਜੀਆਂ ਸਿਰਫ ਚੀਜ਼ਾਂ ਨੂੰ ਵੱਡਾ ਕਰਨ ਤੋਂ ਬਹੁਤ ਅੱਗੇ ਵਧ ਗਈਆਂ ਹਨ। ਇਹ ਸਮਝਣਾ ਕਿ ਇਹ ਟੂਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਤੁਹਾਨੂੰ ਜ਼ਿੰਮੇਵਾਰ ਡਿਜ਼ਾਈਨ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਜੋ ਕਿਸੇ ਵੀ ਵਧਾਈ ਪੱਧਰ 'ਤੇ ਕਾਰਗਰ ਅਤੇ ਆਕਰਸ਼ਕ ਰਹੇ।
+ਆਧੁਨਿਕ ਜ਼ੂਮ ਤਕਨਾਲੋਜੀਆਂ ਸਿਰਫ਼ ਚੀਜ਼ਾਂ ਨੂੰ ਵੱਡਾ ਬਣਾਉਣ ਤੋਂ ਬਹੁਤ ਅੱਗੇ ਵਧ ਗਈਆਂ ਹਨ। ਇਹ ਸਮਝਣਾ ਕਿ ਇਹ ਟੂਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਤੁਹਾਨੂੰ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਜੋ ਕਿਸੇ ਵੀ ਵਧਾਈ ਲੈਵਲ 'ਤੇ ਕਾਰਗਰ ਅਤੇ ਆਕਰਸ਼ਕ ਰਹੇ।
 
 **ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਜ਼ੂਮ ਸਮਰੱਥਾਵਾਂ:**
-- **ਪੇਜ ਜ਼ੂਮ**: ਸਾਰੀ ਸਮੱਗਰੀ ਨੂੰ ਅਨੁਪਾਤਿਕ ਤੌਰ 'ਤੇ ਸਕੇਲ ਕਰਦਾ ਹੈ (ਟੈਕਸਟ, ਚਿੱਤਰ, ਲੇਆਉਟ) - ਇਹ ਪਸੰਦੀਦਾ ਤਰੀਕਾ ਹੈ
-- **ਸਿਰਫ ਟੈਕਸਟ ਜ਼ੂਮ**: ਮੂਲ ਲੇਆਉਟ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹੋਏ ਫੌਂਟ ਦਾ ਆਕਾਰ ਵਧਾਉਂਦਾ ਹੈ
+- **ਪੇਜ ਜ਼ੂਮ**: ਸਾਰੀ ਸਮੱਗਰੀ ਨੂੰ ਅਨੁਪਾਤਿਕ ਤੌਰ 'ਤੇ ਵਧਾਉਂਦਾ ਹੈ (ਟੈਕਸਟ, ਚਿੱਤਰ, ਬਣਾਉਟ) - ਇਹ ਪਸੰਦੀਦਾ ਵਿਧੀ ਹੈ
+- **ਸਿਰਫ਼ ਟੈਕਸਟ ਜ਼ੂਮ**: ਮੂਲ ਬਣਾਉਟ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹੋਏ ਫੋਂਟ ਦਾ ਆਕਾਰ ਵਧਾਉਂਦਾ ਹੈ
 - **ਪਿੰਚ-ਟੂ-ਜ਼ੂਮ**: ਮੋਬਾਈਲ ਜੈਸਚਰ ਸਹਾਇਤਾ ਅਸਥਾਈ ਵਧਾਈ ਲਈ
 - **ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ**: ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ 500% ਤੱਕ ਜ਼ੂਮ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ ਬਿਨਾਂ ਕਾਰਗਰਤਾ ਨੂੰ ਤੋੜੇ
 
-**ਵਿਸ਼ੇਸ਼ ਵਧਾਈ ਸੌਫਟਵੇਅਰ:**
-- **ਵਿੰਡੋਜ਼**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (ਬਿਲਟ-ਇਨ), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
-- **ਮੈਕਓਐਸ/ਆਈਓਐਸ**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (ਬਿਲਟ-ਇਨ ਅਤੇ ਉੱਚਤਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ)
+**ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਾਲਾ ਵਧਾਈ ਸੌਫਟਵੇਅਰ:**
+- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (ਬਿਲਟ-ਇਨ), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
+- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (ਬਿਲਟ-ਇਨ ਅਤੇ ਉੱਚਤਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ)
 
-> ⚠️ **ਡਿਜ਼ਾਈਨ ਵਿਚਾਰ**: WCAG ਦੀ ਲੋੜ ਹੈ ਕਿ ਸਮੱਗਰੀ 200% ਜ਼ੂਮ ਕੀਤੇ ਜਾਣ 'ਤੇ ਕਾਰਗਰ ਰਹੇ। ਇਸ ਪੱਧਰ 'ਤੇ, ਹੋਰਿਜ਼ਾਂਟਲ ਸਕ੍ਰੋਲਿੰਗ ਘੱਟ ਤੋਂ ਘੱਟ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ, ਅਤੇ ਸਾਰੇ ਇੰਟਰੈਕਟਿਵ ਤੱਤ ਪਹੁੰਚਯੋਗ ਰਹਿਣੇ ਚਾਹੀਦੇ ਹਨ।
+> ⚠️ **ਡਿਜ਼ਾਈਨ ਵਿਚਾਰ**: WCAG ਦੀ ਮੰਗ ਹੈ ਕਿ ਸਮੱਗਰੀ 200% ਤੱਕ ਜ਼ੂਮ ਕੀਤੀ ਜਾ ਸਕੇ। ਇਸ ਲੈਵਲ 'ਤੇ, ਹੋਰਿਜ਼ਾਂਟਲ ਸਕ੍ਰੋਲਿੰਗ ਘੱਟ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ, ਅਤੇ ਸਾਰੇ ਇੰਟਰਐਕਟਿਵ ਤੱਤ ਪਹੁੰਚਯੋਗ ਰਹਿਣੇ ਚਾਹੀਦੇ ਹਨ।
 
-✅ **ਆਪਣੇ ਜ਼ਿੰਮੇਵਾਰ ਡਿਜ਼ਾਈਨ ਦੀ ਜਾਂਚ ਕਰੋ**: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ 200% ਅਤੇ 400% ਜ਼ੂਮ ਕਰੋ। ਕੀ ਤੁਹਾਡਾ ਲੇਆਉਟ ਸੁਗਮਤਾ ਨਾਲ ਅਨੁਕੂਲ ਹੁੰਦਾ ਹੈ? ਕੀ ਤੁਸੀਂ ਬਿਨਾਂ ਵੱਧ ਸਕ੍ਰੋਲਿੰਗ ਦੇ ਸਾਰੀ ਕਾਰਗਰਤਾ ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹੋ?
+✅ **ਆਪਣੇ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਦੀ ਜਾਂਚ ਕਰੋ**: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ 200% ਅਤੇ 400% ਜ਼ੂਮ ਕਰੋ। ਕੀ ਤੁਹਾਡਾ ਬਣਾਉਟ ਸੁੰਦਰ ਤਰੀਕੇ ਨਾਲ ਅਨੁਕੂਲ ਹੁੰਦਾ ਹੈ? ਕੀ ਤੁਸੀਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਕ੍ਰੋਲਿੰਗ ਤੋਂ ਬਿਨਾਂ ਸਾਰੀ ਕਾਰਗਰਤਾ ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹੋ?
 
-## ਆਧੁਨਿਕ ਐਕਸੇਸਿਬਿਲਟੀ ਟੈਸਟਿੰਗ ਟੂਲ
+## ਆਧੁਨਿਕ ਸਹੀ ਟੈਸਟਿੰਗ ਟੂਲ
 
-ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਗਏ ਹੋ ਕਿ ਲੋਕ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨਾਲ ਵੈੱਬ ਨੂੰ ਕਿਵੇਂ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ, ਆਓ ਉਹ ਟੂਲ ਖੋਜੀਏ ਜੋ ਤੁਹਾਨੂੰ ਐਕਸੇਸਿਬਲ ਵੈੱਬਸਾਈਟਾਂ ਬਣਾਉਣ ਅਤੇ ਟੈਸਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ।
+ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਗਏ ਹੋ ਕਿ ਲੋਕ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨਾਲ ਵੈੱਬ ਨੂੰ ਕਿਵੇਂ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ, ਆਓ ਉਹ ਟੂਲਾਂ ਦੀ ਖੋਜ ਕਰੀਏ ਜੋ ਤੁਹਾਨੂੰ ਸਹੀ ਵੈੱਬਸਾਈਟਾਂ ਬਣਾਉਣ ਅਤੇ ਟੈਸਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ।
 
-ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ: ਆਟੋਮੈਟਿਕ ਟੂਲ ਸਪੱਸ਼ਟ ਸਮੱਸਿਆਵਾਂ (ਜਿਵੇਂ ਕਿ ਗੁੰਮ ਹੋਇਆ alt ਟੈਕਸਟ) ਨੂੰ ਫੜਨ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਹਨ, ਜਦਕਿ ਹੱਥ-ਅਨੁਭਵ ਟੈਸਟਿੰਗ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਅਸਲ ਦੁਨੀਆ ਵਿੱਚ ਵਰਤਣ ਲਈ ਚੰਗੀ ਮਹਿਸੂਸ ਕਰਦੀ ਹੈ। ਇਹਨਾਂ ਦੋਹਾਂ ਨੂੰ ਮਿਲਾ ਕੇ, ਤੁਹਾਨੂੰ ਇਹ ਵਿਸ਼ਵਾਸ ਹੁੰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੀਆਂ ਸਾਈਟਾਂ ਹਰ ਕਿਸੇ ਲਈ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
+ਇਸਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਸੋਚੋ: ਆਟੋਮੈਟਿਕ ਟੂਲ ਸਪਸ਼ਟ ਸਮੱਸਿਆਵਾਂ (ਜਿਵੇਂ ਕਿ ਗੁੰਮ alt ਟੈਕਸਟ) ਨੂੰ ਪਕੜਨ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਹਨ, ਜਦੋਂ ਕਿ ਹੱਥ-ਅਜਮਾਈ ਟੈਸਟਿੰਗ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਅਸਲ ਜਗਤ ਵਿੱਚ ਵਰਤਣ ਲਈ ਚੰਗੀ ਮਹਿਸੂਸ ਕਰਦੀ ਹੈ। ਇਹਨਾਂ ਨੂੰ ਮਿਲਾ ਕੇ, ਇਹ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨ ਦਿੰਦੇ ਹਨ ਕਿ ਤੁਹਾਡੀਆਂ ਸਾਈਟਾਂ ਹਰ ਕਿਸੇ ਲਈ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
 
 ### ਰੰਗ ਕਾਂਟ੍ਰਾਸਟ ਟੈਸਟਿੰਗ
 
-ਇਹ ਚੰਗੀ ਖ਼ਬਰ ਹੈ: ਰੰਗ ਕਾਂਟ੍ਰਾਸਟ ਸਭ ਤੋਂ ਆਮ ਐਕਸੇਸਿਬਿਲਟੀ ਸਮੱਸਿਆਵਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ, ਪਰ ਇਹ ਸਭ ਤੋਂ ਆਸਾਨ ਹੱਲ ਕਰਨ ਵਾਲੀ ਵੀ ਹੈ। ਚੰਗਾ ਕਾਂਟ੍ਰਾਸਟ ਹਰ ਕਿਸੇ ਲਈ ਲਾਭਦਾਇਕ ਹੈ—ਦ੍ਰਿਸ਼ਟੀਹੀਨ ਯੂਜ਼ਰਾਂ ਤੋਂ ਲੈ ਕੇ ਉਹਨਾਂ ਲੋਕਾਂ ਤੱਕ ਜੋ ਬੀਚ 'ਤੇ ਆਪਣੇ
-ਰੰਗ ਸੰਚਾਰ ਲਈ ਬਹੁਤ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ, ਪਰ ਇਹ ਕਦੇ ਵੀ ਇੱਕੋ ਤਰੀਕੇ ਨਾਲ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਨ ਦਾ ਸਾਧਨ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ। ਰੰਗ ਤੋਂ ਅੱਗੇ ਡਿਜ਼ਾਈਨ ਕਰਨ ਨਾਲ ਜ਼ਿਆਦਾ ਮਜ਼ਬੂਤ, ਸਮਾਵੇਸ਼ੀ ਅਨੁਭਵ ਬਣਦੇ ਹਨ ਜੋ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹਨ।
+ਇਹ ਕੁਝ ਚੰਗੀ ਖ਼ਬਰ ਹੈ: ਰੰਗ ਕਾਂਟ੍ਰਾਸਟ ਸਭ ਤੋਂ ਆਮ ਸਹੀ ਸਮੱਸਿਆਵਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ, ਪਰ ਇਹ ਸਭ ਤੋਂ ਆਸਾਨੀ ਨਾਲ ਠੀਕ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਚੰਗਾ ਕਾਂਟ੍ਰਾਸਟ ਹਰ ਕਿਸੇ ਲਈ ਫਾਇਦੇਮੰਦ ਹੈ—ਦ੍ਰਿਸ਼ਟੀ ਬਾਧਾ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਤੋਂ ਲੈ ਕੇ ਉਹ ਲੋਕ ਜੋ ਬੀਚ 'ਤੇ ਆਪਣੇ ਫੋਨ ਪੜ੍ਹਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਨ।
+
+**WCAG ਕਾਂਟ੍ਰਾਸਟ ਦੀਆਂ ਮੰਗਾਂ:**
+
+| ਟੈਕਸਟ ਦੀ ਕਿਸਮ | WCAG AA (ਘੱਟੋ-ਘੱਟ) | WCAG AAA (ਵਧੇਰੇ) |
+|-----------|-------------------|---------------------|
+| **ਸਧਾਰਨ ਟੈਕਸਟ** (18pt ਤੋਂ ਘੱਟ) | 4.5:1 ਕਾਂਟ੍ਰਾਸਟ ਅ
+- **ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰ, ਡਿਵਾਈਸਾਂ ਅਤੇ ਸਹਾਇਕ ਟੂਲਾਂ 'ਤੇ ਟੈਸਟ ਕਰੋ**
+- **ਸਮੱਗਰੀ ਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਬਣਾਓ ਕਿ ਜਦੋਂ ਉੱਚ-ਪੱਧਰੀ ਫੀਚਰਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਹੁੰਦਾ, ਤਾਂ ਵੀ ਇਹ ਸਹੀ ਕੰਮ ਕਰੇ**
+
+### 🎯 **POUR ਸਿਧਾਂਤ: ਯਾਦਗਾਰ ਬਣਾਉਣਾ**
+
+**ਮੁੱਢਲੇ ਸਿਧਾਂਤਾਂ 'ਤੇ ਛੋਟਾ ਵਿਚਾਰ:**
+- ਕੀ ਤੁਸੀਂ ਕਿਸੇ ਵੈਬਸਾਈਟ ਫੀਚਰ ਬਾਰੇ ਸੋਚ ਸਕਦੇ ਹੋ ਜੋ ਹਰ POUR ਸਿਧਾਂਤ 'ਤੇ ਫੇਲ੍ਹ ਹੁੰਦਾ ਹੈ?
+- ਤੁਹਾਨੂੰ ਕਿਹੜਾ ਸਿਧਾਂਤ ਇੱਕ ਡਿਵੈਲਪਰ ਵਜੋਂ ਸਭ ਤੋਂ ਕੁਦਰਤੀ ਲੱਗਦਾ ਹੈ?
+- ਇਹ ਸਿਧਾਂਤ ਸਿਰਫ ਅਪਾਹਜ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਨਹੀਂ, ਸਗੋਂ ਹਰ ਕਿਸੇ ਲਈ ਡਿਜ਼ਾਈਨ ਨੂੰ ਕਿਵੇਂ ਸੁਧਾਰ ਸਕਦੇ ਹਨ?
+
+```mermaid
+quadrantChart
+    title POUR Principles Impact Matrix
+    x-axis Low Effort --> High Effort
+    y-axis Low Impact --> High Impact
+    quadrant-1 Quick Wins
+    quadrant-2 Major Projects
+    quadrant-3 Consider Later
+    quadrant-4 Strategic Focus
+    
+    Alt Text: [0.2, 0.9]
+    Color Contrast: [0.3, 0.8]
+    Semantic HTML: [0.4, 0.9]
+    Keyboard Nav: [0.6, 0.8]
+    ARIA Complex: [0.8, 0.7]
+    Screen Reader Testing: [0.7, 0.6]
+```
+
+> **ਯਾਦ ਰੱਖੋ**: ਉੱਚ-ਅਸਰ, ਘੱਟ-ਕੋਸ਼ਿਸ਼ ਵਾਲੇ ਸੁਧਾਰਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ। ਸੈਮੈਂਟਿਕ HTML ਅਤੇ alt ਟੈਕਸਟ ਤੁਹਾਨੂੰ ਘੱਟ ਕੋਸ਼ਿਸ਼ ਨਾਲ ਵੱਡਾ ਐਕਸੈਸਬਿਲਿਟੀ ਫਾਇਦਾ ਦਿੰਦੇ ਹਨ!
+
+## ਦ੍ਰਿਸ਼ਮਾਨ ਡਿਜ਼ਾਈਨ ਨੂੰ ਐਕਸੈਸਬਲ ਬਣਾਉਣਾ
+
+ਚੰਗਾ ਦ੍ਰਿਸ਼ਮਾਨ ਡਿਜ਼ਾਈਨ ਅਤੇ ਐਕਸੈਸਬਿਲਿਟੀ ਹਮੇਸ਼ਾ ਇਕੱਠੇ ਚੱਲਦੇ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਐਕਸੈਸਬਿਲਿਟੀ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖ ਕੇ ਡਿਜ਼ਾਈਨ ਕਰਦੇ ਹੋ, ਤਾਂ ਅਕਸਰ ਇਹ ਪਾਬੰਦੀਆਂ ਸਾਫ਼ ਅਤੇ ਸੁੰਦਰ ਹੱਲ ਲੱਭਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ ਜੋ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਫਾਇਦੇਮੰਦ ਹੁੰਦੀਆਂ ਹਨ।
+
+ਆਓ ਇਹ ਸਮਝੀਏ ਕਿ ਕਿਵੇਂ ਹਰ ਕਿਸੇ ਲਈ, ਚਾਹੇ ਉਹ ਕਿਸੇ ਵੀ ਦ੍ਰਿਸ਼ਮਾਨ ਯੋਗਤਾ ਜਾਂ ਹਾਲਾਤਾਂ ਵਿੱਚ ਸਮੱਗਰੀ ਦੇਖ ਰਹੇ ਹੋਣ, ਦ੍ਰਿਸ਼ਮਾਨ ਡਿਜ਼ਾਈਨ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।
+
+### ਰੰਗ ਅਤੇ ਦ੍ਰਿਸ਼ਮਾਨ ਐਕਸੈਸਬਿਲਿਟੀ ਰਣਨੀਤੀਆਂ
 
-**ਰੰਗ ਦ੍ਰਿਸ਼ਟੀ ਦੇ ਅੰਤਰਾਂ ਲਈ ਡਿਜ਼ਾਈਨ ਕਰੋ:**
+ਰੰਗ ਸੰਚਾਰ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ, ਪਰ ਇਹ ਕਦੇ ਵੀ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਨ ਦਾ ਇੱਕੋ-ਇੱਕ ਤਰੀਕਾ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ। ਰੰਗ ਤੋਂ ਪਰੇ ਡਿਜ਼ਾਈਨ ਕਰਨ ਨਾਲ ਜ਼ਿਆਦਾ ਮਜ਼ਬੂਤ, ਸਮਾਵੇਸ਼ੀਕ ਅਨੁਭਵ ਬਣਦੇ ਹਨ ਜੋ ਵੱਖ-ਵੱਖ ਹਾਲਾਤਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹਨ।
 
-ਲਗਭਗ 8% ਪੁਰਸ਼ ਅਤੇ 0.5% ਔਰਤਾਂ ਵਿੱਚ ਰੰਗ ਦ੍ਰਿਸ਼ਟੀ ਦੇ ਕੁਝ ਅੰਤਰ ਹੁੰਦੇ ਹਨ (ਅਕਸਰ "ਰੰਗ ਅੰਧਤਾ" ਕਿਹਾ ਜਾਂਦਾ ਹੈ)। ਸਭ ਤੋਂ ਆਮ ਕਿਸਮਾਂ ਹਨ:
+**ਰੰਗ ਦ੍ਰਿਸ਼ਮਾਨ ਅੰਤਰਾਂ ਲਈ ਡਿਜ਼ਾਈਨ:**
+
+ਲਗਭਗ 8% ਮਰਦ ਅਤੇ 0.5% ਔਰਤਾਂ ਵਿੱਚ ਕੁਝ ਰੰਗ ਦ੍ਰਿਸ਼ਮਾਨ ਅੰਤਰ ਹੁੰਦੇ ਹਨ (ਅਕਸਰ "ਰੰਗ ਅੰਧਤਾ" ਕਿਹਾ ਜਾਂਦਾ ਹੈ)। ਸਭ ਤੋਂ ਆਮ ਕਿਸਮਾਂ ਹਨ:
 - **Deuteranopia**: ਲਾਲ ਅਤੇ ਹਰੇ ਵਿੱਚ ਫਰਕ ਕਰਨ ਵਿੱਚ ਮੁਸ਼ਕਲ
-- **Protanopia**: ਲਾਲ ਹੋਰ ਮੰਦ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
+- **Protanopia**: ਲਾਲ ਹੋਰ ਮੰਨ੍ਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
 - **Tritanopia**: ਨੀਲੇ ਅਤੇ ਪੀਲੇ ਨਾਲ ਮੁਸ਼ਕਲ (ਵਿਰਲ)
 
-**ਸਮਾਵੇਸ਼ੀ ਰੰਗ ਰਣਨੀਤੀਆਂ:**
+**ਸਮਾਵੇਸ਼ੀਕ ਰੰਗ ਰਣਨੀਤੀਆਂ:**
 
 ```css
 /* ❌ Bad: Using only color to indicate status */
@@ -153,19 +247,19 @@ graph TD
 }
 ```
 
-**ਮੁੱਢਲੀ ਕਾਂਟ੍ਰਾਸਟ ਦੀਆਂ ਲੋੜਾਂ ਤੋਂ ਅੱਗੇ:**
-- ਰੰਗ ਚੋਣਾਂ ਨੂੰ ਰੰਗ ਅੰਧਤਾ ਸਿਮੂਲੇਟਰ ਨਾਲ ਟੈਸਟ ਕਰੋ
-- ਰੰਗ ਕੋਡਿੰਗ ਦੇ ਨਾਲ-ਨਾਲ ਪੈਟਰਨ, ਟੈਕਸਚਰ ਜਾਂ ਆਕਾਰ ਵਰਤੋ
-- ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇੰਟਰਐਕਟਿਵ ਸਥਿਤੀਆਂ ਰੰਗ ਤੋਂ ਬਿਨਾਂ ਵੀ ਵੱਖਰੀਆਂ ਰਹਿੰਦੀਆਂ ਹਨ
-- ਸੋਚੋ ਕਿ ਤੁਹਾਡਾ ਡਿਜ਼ਾਈਨ ਉੱਚ ਕਾਂਟ੍ਰਾਸਟ ਮੋਡ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
+**ਮੁੱਢਲੇ ਕਾਂਟ੍ਰਾਸਟ ਦੀਆਂ ਲੋੜਾਂ ਤੋਂ ਪਰੇ:**
+- ਆਪਣੇ ਰੰਗ ਚੋਣਾਂ ਨੂੰ ਰੰਗ ਅੰਧਤਾ ਸਿਮੂਲੇਟਰਾਂ ਨਾਲ ਟੈਸਟ ਕਰੋ
+- ਰੰਗ ਕੋਡਿੰਗ ਦੇ ਨਾਲ ਪੈਟਰਨ, ਟੈਕਸਚਰ ਜਾਂ ਸ਼ੇਪ ਵਰਤੋ
+- ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇੰਟਰੈਕਟਿਵ ਸਟੇਟਾਂ ਰੰਗ ਤੋਂ ਬਿਨਾਂ ਵੀ ਵੱਖਰੀਆਂ ਰਹਿੰਦੀਆਂ ਹਨ
+- ਇਹ ਵੀ ਸੋਚੋ ਕਿ ਤੁਹਾਡਾ ਡਿਜ਼ਾਈਨ ਹਾਈ ਕਾਂਟ੍ਰਾਸਟ ਮੋਡ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
 
-✅ **ਆਪਣੀ ਰੰਗ ਪਹੁੰਚਯੋਗਤਾ ਦੀ ਜਾਂਚ ਕਰੋ**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) ਵਰਗੇ ਟੂਲ ਵਰਤੋ ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੀ ਰੰਗ ਦ੍ਰਿਸ਼ਟੀ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ।
+✅ **ਆਪਣੀ ਰੰਗ ਐਕਸੈਸਬਿਲਿਟੀ ਟੈਸਟ ਕਰੋ**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) ਵਰਗੇ ਟੂਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਵੱਖ-ਵੱਖ ਰੰਗ ਦ੍ਰਿਸ਼ਮਾਨ ਕਿਸਮਾਂ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ।
 
-### ਫੋਕਸ ਇੰਡੀਕੇਟਰ ਅਤੇ ਇੰਟਰਐਕਸ਼ਨ ਡਿਜ਼ਾਈਨ
+### ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਅਤੇ ਇੰਟਰੈਕਸ਼ਨ ਡਿਜ਼ਾਈਨ
 
-ਫੋਕਸ ਇੰਡੀਕੇਟਰ ਡਿਜ਼ੀਟਲ ਸਮਾਨ ਹੈ ਕੁਰਸਰ ਦਾ—ਇਹ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਉਹ ਪੇਜ 'ਤੇ ਕਿੱਥੇ ਹਨ। ਚੰਗੀ ਤਰ੍ਹਾਂ ਡਿਜ਼ਾਈਨ ਕੀਤੇ ਫੋਕਸ ਇੰਡੀਕੇਟਰ ਹਰ ਕਿਸੇ ਲਈ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਂਦੇ ਹਨ, ਇੰਟਰਐਕਸ਼ਨ ਨੂੰ ਸਪਸ਼ਟ ਅਤੇ ਭਰੋਸੇਯੋਗ ਬਣਾਉਂਦੇ ਹਨ।
+ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਡਿਜ਼ੀਟਲ ਸੰਸਾਰ ਵਿੱਚ ਕਰਸਰ ਵਰਗੇ ਹਨ—ਇਹ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਉਹ ਪੇਜ 'ਤੇ ਕਿੱਥੇ ਹਨ। ਚੰਗੇ ਤਰੀਕੇ ਨਾਲ ਡਿਜ਼ਾਈਨ ਕੀਤੇ ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਹਰ ਕਿਸੇ ਲਈ ਅਨੁਭਵ ਨੂੰ ਸਾਫ਼ ਅਤੇ ਭਰੋਸੇਯੋਗ ਬਣਾਉਂਦੇ ਹਨ।
 
-**ਆਧੁਨਿਕ ਫੋਕਸ ਇੰਡੀਕੇਟਰ ਦੀਆਂ ਸਾਰੀਆਂ ਪ੍ਰਥਾਵਾਂ:**
+**ਆਧੁਨਿਕ ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸ:**
 
 ```css
 /* Enhanced focus styles that work across browsers */
@@ -194,23 +288,45 @@ button:focus:not(:focus-visible) {
 }
 ```
 
-**ਫੋਕਸ ਇੰਡੀਕੇਟਰ ਦੀਆਂ ਲੋੜਾਂ:**
+**ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਦੀਆਂ ਲੋੜਾਂ:**
 - **ਦਿੱਖ**: ਆਲੇ-ਦੁਆਲੇ ਦੇ ਤੱਤਾਂ ਨਾਲ ਘੱਟੋ-ਘੱਟ 3:1 ਕਾਂਟ੍ਰਾਸਟ ਰੇਸ਼ੋ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ
-- **ਚੌੜਾਈ**: ਪੂਰੇ ਤੱਤ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਘੱਟੋ-ਘੱਟ 2px ਮੋਟਾਈ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ
-- **ਸਥਿਰਤਾ**: ਫੋਕਸ ਕਿਤੇ ਹੋਰ ਨਹੀਂ ਜਾਂਦਾ ਤੱਕ ਦਿੱਖ ਰਹਿਣੀ ਚਾਹੀਦੀ ਹੈ
-- **ਵੱਖਰਾਪਨ**: ਹੋਰ UI ਸਥਿਤੀਆਂ ਤੋਂ ਦਿੱਖ ਵਿੱਚ ਵੱਖਰਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ
+- **ਚੌੜਾਈ**: ਘੱਟੋ-ਘੱਟ 2px ਮੋਟਾਈ ਸਾਰੇ ਤੱਤ ਦੇ ਆਲੇ-ਦੁਆਲੇ
+- **ਸਥਿਰਤਾ**: ਫੋਕਸ ਕਿਤੇ ਹੋਰ ਨਹੀਂ ਜਾਂਦਾ ਤੱਕ ਦਿੱਖ ਵਿੱਚ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ
+- **ਵੱਖਰਾਪਨ**: ਹੋਰ UI ਸਟੇਟਾਂ ਤੋਂ ਦ੍ਰਿਸ਼ਮਾਨ ਤੌਰ 'ਤੇ ਵੱਖਰਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ
 
-> 💡 **ਡਿਜ਼ਾਈਨ ਟਿਪ**: ਵਧੀਆ ਫੋਕਸ ਇੰਡੀਕੇਟਰ ਅਕਸਰ ਦਿੱਖ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ outline, box-shadow, ਅਤੇ ਰੰਗ ਬਦਲਣ ਦੇ ਸੰਯੋਗ ਵਰਤਦੇ ਹਨ।
+> 💡 **ਡਿਜ਼ਾਈਨ ਟਿਪ**: ਵਧੀਆ ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਆਮ ਤੌਰ 'ਤੇ outline, box-shadow, ਅਤੇ ਰੰਗ ਬਦਲਣ ਦੇ ਸੰਯੋਗ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਵੱਖ-ਵੱਖ ਬੈਕਗਰਾਊਂਡ ਅਤੇ ਸੰਦਰਭਾਂ ਵਿੱਚ ਦਿੱਖ ਯਕੀਨੀ ਬਣਾਈ ਜਾ ਸਕੇ।
 
-✅ **ਆਪਣੇ ਫੋਕਸ ਇੰਡੀਕੇਟਰ ਦੀ ਜਾਂਚ ਕਰੋ**: ਆਪਣੀ ਵੈਬਸਾਈਟ 'ਤੇ ਟੈਬ ਦਬਾ ਕੇ ਦੇਖੋ ਕਿ ਕਿਹੜੇ ਤੱਤਾਂ ਦੇ ਸਪਸ਼ਟ ਫੋਕਸ ਇੰਡੀਕੇਟਰ ਹਨ। ਕੀ ਕੋਈ ਦਿਖਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਜਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਗਾਇਬ ਹਨ?
+✅ **ਆਪਣੇ ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਦਾ ਆਡਿਟ ਕਰੋ**: ਆਪਣੀ ਵੈਬਸਾਈਟ 'ਤੇ ਟੈਬ ਦਬਾ ਕੇ ਦੇਖੋ ਕਿ ਕਿਹੜੇ ਤੱਤਾਂ ਦੇ ਸਾਫ਼ ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਹਨ। ਕੀ ਕੋਈ ਦਿਖਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਜਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਗਾਇਬ ਹਨ?
 
-### ਸੈਮੈਂਟਿਕ HTML: ਪਹੁੰਚਯੋਗਤਾ ਦੀ ਬੁਨਿਆਦ
+### ਸੈਮੈਂਟਿਕ HTML: ਐਕਸੈਸਬਿਲਿਟੀ ਦੀ ਬੁਨਿਆਦ
 
-ਸੈਮੈਂਟਿਕ HTML ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ ਲਈ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਲਈ GPS ਸਿਸਟਮ ਵਰਗਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਸਹੀ HTML ਤੱਤਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਇਰਾਦੇ ਦੇ ਮੁਤਾਬਕ ਵਰਤਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਮੂਲ ਤੌਰ 'ਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ, ਕੀਬੋਰਡ, ਅਤੇ ਹੋਰ ਟੂਲਾਂ ਨੂੰ ਇੱਕ ਵਿਸਥਾਰਤ ਰੋਡਮੈਪ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
+ਸੈਮੈਂਟਿਕ HTML ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਲਈ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ ਦਾ GPS ਸਿਸਟਮ ਬਣਾਉਣ ਵਰਗਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਸਹੀ HTML ਤੱਤਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਉਦੇਸ਼ ਲਈ ਵਰਤਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਕ੍ਰੀਨ ਰੀਡਰ, ਕੀਬੋਰਡ ਅਤੇ ਹੋਰ ਟੂਲਾਂ ਨੂੰ ਇੱਕ ਵਿਸਥਾਰਿਤ ਰੋਡਮੈਪ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
 
-ਇਹ ਇੱਕ ਉਦਾਹਰਣ ਹੈ ਜੋ ਮੇਰੇ ਲਈ ਬਹੁਤ ਸਪਸ਼ਟ ਹੋਇਆ: ਸੈਮੈਂਟਿਕ HTML ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੇ ਫਰਕ ਦੀ ਤਰ੍ਹਾਂ ਹੈ ਜਿਸ ਵਿੱਚ ਸਪਸ਼ਟ ਸ਼੍ਰੇਣੀਆਂ ਅਤੇ ਮਦਦਗਾਰ ਨਿਸ਼ਾਨ ਹਨ ਬਨਾਮ ਇੱਕ ਗੋਦਾਮ ਜਿੱਥੇ ਕਿਤਾਬਾਂ ਬੇਤਰਤੀਬੀ ਨਾਲ ਫੈਲੀਆਂ ਹੋਈਆਂ ਹਨ। ਦੋਵੇਂ ਜਗ੍ਹਾਂ ਇੱਕੋ ਹੀ ਕਿਤਾਬਾਂ ਹਨ, ਪਰ ਤੁਸੀਂ ਕਿਸ ਵਿੱਚੋਂ ਕੁਝ ਲੱਭਣਾ ਪਸੰਦ ਕਰੋਗੇ? ਬਿਲਕੁਲ!
+ਇਹ ਇੱਕ ਅਨੁਪਮ ਬੇਹਤਰੀ analogy ਹੈ: ਸੈਮੈਂਟਿਕ HTML ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੇ ਫਰਕ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਸਾਫ਼ ਸ਼੍ਰੇਣੀਆਂ ਅਤੇ ਮਦਦਗਾਰ ਸਾਈਨ ਹਨ, ਬਨਾਮ ਇੱਕ ਗੋਦਾਮ ਜਿੱਥੇ ਕਿਤਾਬਾਂ ਬੇਤਰਤੀਬੀ ਨਾਲ ਫੈਲੀਆਂ ਹੋਈਆਂ ਹਨ। ਦੋਨਾਂ ਜਗ੍ਹਾਂ ਇੱਕੋ ਕਿਤਾਬਾਂ ਹਨ, ਪਰ ਤੁਸੀਂ ਕਿਸੇ ਵਿੱਚ ਕੁਝ ਲੱਭਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨਾ ਚਾਹੋਗੇ? ਬਿਲਕੁਲ!
 
-**ਪੇਜ ਸਟ੍ਰਕਚਰ ਦੇ ਪਹੁੰਚਯੋਗ ਬਲਾਕ:**
+```mermaid
+flowchart TD
+    A[🏠 HTML Document] --> B[📰 header]
+    A --> C[🧭 nav]
+    A --> D[📄 main]
+    A --> E[📋 footer]
+    
+    B --> B1[h1: Site Name<br/>Logo & branding]
+    C --> C1[ul: Navigation<br/>Primary links]
+    D --> D1[article: Content<br/>section: Subsections]
+    D --> D2[aside: Sidebar<br/>Related content]
+    E --> E1[nav: Footer links<br/>Copyright info]
+    
+    D1 --> D1a[h1: Page title<br/>h2: Major sections<br/>h3: Subsections]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+
+**ਐਕਸੈਸਬਲ ਪੇਜ ਸਟ੍ਰਕਚਰ ਦੇ ਬੁਨਿਆਦੀ ਤੱਤ:**
 
 ```html
 <!-- Landmark elements provide page navigation structure -->
@@ -265,36 +381,63 @@ button:focus:not(:focus-visible) {
 </footer>
 ```
 
-**ਸੈਮੈਂਟਿਕ HTML ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਕਿਵੇਂ ਬਦਲਦਾ ਹੈ:**
+**ਸੈਮੈਂਟਿਕ HTML ਐਕਸੈਸਬਿਲਿਟੀ ਨੂੰ ਕਿਵੇਂ ਬਦਲਦਾ ਹੈ:**
 
 | ਸੈਮੈਂਟਿਕ ਤੱਤ | ਉਦੇਸ਼ | ਸਕ੍ਰੀਨ ਰੀਡਰ ਫਾਇਦਾ |
 |------------------|---------|----------------------|
-| `<header>` | ਪੇਜ ਜਾਂ ਸੈਕਸ਼ਨ ਹੈਡਰ | "ਬੈਨਰ ਲੈਂਡਮਾਰਕ" - ਉੱਪਰ ਤੇ ਜਲਦੀ ਨੈਵੀਗੇਸ਼ਨ |
-| `<nav>` | ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ | "ਨੈਵੀਗੇਸ਼ਨ ਲੈਂਡਮਾਰਕ" - ਨੈਵੀਗੇਸ਼ਨ ਸੈਕਸ਼ਨ ਦੀ ਸੂਚੀ |
-| `<main>` | ਪ੍ਰਮੁੱਖ ਪੇਜ ਸਮੱਗਰੀ | "ਮੁੱਖ ਲੈਂਡਮਾਰਕ" - ਸਿੱਧੇ ਸਮੱਗਰੀ 'ਤੇ ਜਾਓ |
-| `<article>` | ਸਵੈ-ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ | ਲੇਖ ਦੀਆਂ ਹੱਦਾਂ ਦਾ ਐਲਾਨ ਕਰਦਾ ਹੈ |
+| `<header>` | ਪੇਜ ਜਾਂ ਸੈਕਸ਼ਨ ਹੈਡਰ | "Banner landmark" - ਸਿੱਧੇ ਉੱਪਰ ਨੈਵੀਗੇਟ |
+| `<nav>` | ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ | "Navigation landmark" - ਨੈਵ ਸੈਕਸ਼ਨਾਂ ਦੀ ਸੂਚੀ |
+| `<main>` | ਮੁੱਖ ਪੇਜ ਸਮੱਗਰੀ | "Main landmark" - ਸਿੱਧੇ ਸਮੱਗਰੀ 'ਤੇ ਜਾਓ |
+| `<article>` | ਸਵੈ-ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ | ਆਰਟਿਕਲ ਦੀਆਂ ਹੱਦਾਂ ਦਾ ਐਲਾਨ |
 | `<section>` | ਥੀਮ ਵਾਲੇ ਸਮੱਗਰੀ ਸਮੂਹ | ਸਮੱਗਰੀ ਸਟ੍ਰਕਚਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ |
-| `<aside>` | ਸੰਬੰਧਿਤ ਸਾਈਡਬਾਰ ਸਮੱਗਰੀ | "ਪੂਰਕ ਲੈਂਡਮਾਰਕ" |
+| `<aside>` | ਸੰਬੰਧਿਤ ਸਾਈਡਬਾਰ ਸਮੱਗਰੀ | "Complementary landmark" |
 | `<footer>` | ਪੇਜ ਜਾਂ ਸੈਕਸ਼ਨ ਫੁੱਟਰ | "Contentinfo landmark" |
 
 **ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੇ ਸੈਮੈਂਟਿਕ HTML ਨਾਲ ਸੁਪਰਪਾਵਰ:**
 - **ਲੈਂਡਮਾਰਕ ਨੈਵੀਗੇਸ਼ਨ**: ਮੁੱਖ ਪੇਜ ਸੈਕਸ਼ਨਾਂ ਵਿੱਚ ਤੁਰੰਤ ਜਾਓ
-- **ਹੈਡਿੰਗ ਰੂਪਰੇਖਾ**: ਤੁਹਾਡੇ ਹੈਡਿੰਗ ਸਟ੍ਰਕਚਰ ਤੋਂ ਸਮੱਗਰੀ ਦੀ ਸੂਚੀ ਬਣਾਓ
-- **ਤੱਤਾਂ ਦੀ ਸੂਚੀ**: ਸਾਰੇ ਲਿੰਕ, ਬਟਨ, ਜਾਂ ਫਾਰਮ ਕੰਟਰੋਲ ਦੀ ਸੂਚੀ ਬਣਾਓ
-- **ਸੰਦੇਸ਼ਕ ਸੂਝ**: ਸਮੱਗਰੀ ਸੈਕਸ਼ਨਾਂ ਦੇ ਰਿਸ਼ਤਿਆਂ ਨੂੰ ਸਮਝੋ
+- **ਹੈਡਿੰਗ ਰੂਪਰੇਖਾ**: ਤੁਹਾਡੇ ਹੈਡਿੰਗ ਸਟ੍ਰਕਚਰ ਤੋਂ ਸੂਚੀ ਬਣਾਓ
+- **ਤੱਤਾਂ ਦੀ ਸੂਚੀ**: ਸਾਰੇ ਲਿੰਕ, ਬਟਨ ਜਾਂ ਫਾਰਮ ਕੰਟਰੋਲ ਦੀ ਸੂਚੀ ਬਣਾਓ
+- **ਸੰਦਰਭ ਜਾਗਰੂਕਤਾ**: ਸਮੱਗਰੀ ਸੈਕਸ਼ਨਾਂ ਦੇ ਰਿਸ਼ਤਿਆਂ ਨੂੰ ਸਮਝੋ
 
 > 🎯 **ਤੁਰੰਤ ਟੈਸਟ**: landmark shortcuts (NVDA/JAWS ਵਿੱਚ D), heading (H), link (K) ਵਰਤ ਕੇ ਆਪਣੀ ਸਾਈਟ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਕੀ ਨੈਵੀਗੇਸ਼ਨ ਸਹੀ ਲੱਗਦਾ ਹੈ?
 
-✅ **ਆਪਣੀ ਸੈਮੈਂਟਿਕ ਸਟ੍ਰਕਚਰ ਦੀ ਜਾਂਚ ਕਰੋ**: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ DevTools ਵਿੱਚ ਪਹੁੰਚਯੋਗਤਾ ਪੈਨਲ ਵਰਤ ਕੇ accessibility tree ਦੇਖੋ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡਾ ਮਾਰਕਅੱਪ ਇੱਕ ਤਰਕਸੰਗਤ ਸਟ੍ਰਕਚਰ ਬਣਾਉਂਦਾ ਹੈ।
+### 🏗️ **ਸੈਮੈਂਟਿਕ HTML ਮਾਹਰਤਾ ਚੈੱਕ: ਮਜ਼ਬੂਤ ਬੁਨਿਆਦ ਬਣਾਉਣਾ**
 
-### ਹੈਡਿੰਗ ਹਾਇਰਾਰਕੀ: ਇੱਕ ਤਰਕਸੰਗਤ ਸਮੱਗਰੀ ਰੂਪਰੇਖਾ ਬਣਾਉਣਾ
+**ਆਓ ਤੁਹਾਡੇ ਸੈਮੈਂਟਿਕ ਸਮਝ ਦਾ ਮੁਲਾਂਕਣ ਕਰੀਏ:**
+- ਕੀ ਤੁਸੀਂ HTML ਦੇਖ ਕੇ ਪੇਜ ਦੇ ਲੈਂਡਮਾਰਕਾਂ ਦੀ ਪਹਿਚਾਣ ਕਰ ਸਕਦੇ ਹੋ?
+- ਤੁਸੀਂ ਆਪਣੇ ਦੋਸਤ ਨੂੰ `<section>` ਅਤੇ `<div>` ਦੇ ਫਰਕ ਨੂੰ ਕਿਵੇਂ ਸਮਝਾਉਗੇ?
+- ਜੇਕਰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ ਨੈਵੀਗੇਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਦੀ ਰਿਪੋਰਟ ਕਰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਕੀ ਚੈੱਕ ਕਰੋਗੇ?
 
-ਹੈਡਿੰਗ ਪਹੁੰਚਯੋਗ ਸਮੱਗਰੀ ਲਈ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹਨ—ਇਹ ਉਹ ਰੀੜ੍ਹ ਦੀ ਹੱਡੀ ਹੈ ਜੋ ਸਭ ਕੁਝ ਇਕੱਠਾ ਰੱਖਦੀ ਹੈ। ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ ਹੈਡਿੰਗ 'ਤੇ ਬਹੁਤ ਨਿਰਭਰ ਕਰਦੇ ਹਨ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਸਮਝਣ ਅਤੇ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ। ਇਸਨੂੰ ਤੁਹਾਡੇ ਪੇਜ ਲਈ ਸਮੱਗਰੀ ਦੀ ਸੂਚੀ ਪ੍ਰਦਾਨ ਕਰਨ ਦੇ ਤੌਰ 'ਤੇ ਸੋਚੋ।
+```mermaid
+stateDiagram-v2
+    [*] --> UnsementicHTML: div soup
+    UnsementicHTML --> SemanticHTML: Add landmarks
+    SemanticHTML --> AccessibleHTML: Test with AT
+    AccessibleHTML --> [*]: User success!
+    
+    note right of UnsementicHTML
+        Screen readers lost
+        Keyboard nav broken
+    end note
+    
+    note right of AccessibleHTML
+        Clear navigation
+        Efficient browsing
+    end note
+```
+
+> **ਪ੍ਰੋ ਅੰਦਰੂਨੀ ਜਾਣਕਾਰੀ**: ਚੰਗਾ ਸੈਮੈਂਟਿਕ HTML ਆਪਣੇ ਆਪ 70% ਐਕਸੈਸਬਿਲਿਟੀ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ। ਇਸ ਬੁਨਿਆਦ ਨੂੰ ਮਾਹਰ ਬਣਾਓ ਅਤੇ ਤੁਸੀਂ ਸਫਲਤਾ ਦੇ ਰਾਹ 'ਤੇ ਹੋ!
+
+✅ **ਆਪਣੀ ਸੈਮੈਂਟਿਕ ਸਟ੍ਰਕਚਰ ਦਾ ਆਡਿਟ ਕਰੋ**: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ DevTools ਵਿੱਚ ਐਕਸੈਸਬਿਲਿਟੀ ਪੈਨਲ ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਐਕਸੈਸਬਿਲਿਟੀ ਟ੍ਰੀ ਦੇਖਿਆ ਜਾ ਸਕੇ ਅਤੇ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ ਕਿ ਤੁਹਾਡਾ ਮਾਰਕਅੱਪ ਇੱਕ ਤਰਕਸੰਗਤ ਸਟ੍ਰਕਚਰ ਬਣਾਉਂਦਾ ਹੈ।
+
+### ਹੈਡਿੰਗ ਹਾਇਰਾਰਕੀ: ਤਰਕਸੰਗਤ ਸਮੱਗਰੀ ਰੂਪਰੇਖਾ ਬਣਾਉਣਾ
+
+ਹੈਡਿੰਗ ਐਕਸੈਸਬਲ ਸਮੱਗਰੀ ਲਈ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹਨ—ਇਹ ਉਹ ਰੀੜ੍ਹ ਦੀ ਹੱਡੀ ਹਨ ਜੋ ਸਭ ਕੁਝ ਇਕੱਠੇ ਰੱਖਦੀ ਹੈ। ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਸਮਝਣ ਅਤੇ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਹੈਡਿੰਗ 'ਤੇ ਬਹੁਤ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਪੇਜ ਲਈ ਇੱਕ ਸੂਚੀ ਪ੍ਰਦਾਨ ਕਰਨ ਵਰਗਾ ਹੈ।
 
 **ਹੈਡਿੰਗ ਲਈ ਸੁਨਹਿਰੀ ਨਿਯਮ:**
-ਕਦੇ ਵੀ ਪੱਧਰ ਨਾ ਛੱਡੋ। ਹਮੇਸ਼ਾ `<h1>` ਤੋਂ `<h2>` ਤੋਂ `<h3>` ਤੱਕ ਤਰਕਸੰਗਤ ਤਰੀਕੇ ਨਾਲ ਅੱਗੇ ਵਧੋ। ਸਕੂਲ ਵਿੱਚ ਰੂਪਰੇਖਾ ਬਣਾਉਣ ਦੀ ਯਾਦ ਹੈ? ਇਹ ਬਿਲਕੁਲ ਉਹੀ ਸਿਧਾਂਤ ਹੈ—ਤੁਸੀਂ "I. ਮੁੱਖ ਬਿੰਦੂ" ਤੋਂ ਸਿੱਧੇ "C. ਉਪ-ਉਪ-ਬਿੰਦੂ" 'ਤੇ ਨਹੀਂ ਜਾਓਗੇ ਬਿਨਾਂ "A. ਉਪ-ਬਿੰਦੂ" ਦੇ ਵਿਚਕਾਰ, ਸਹੀ?
+ਕਦੇ ਵੀ ਪੱਧਰ ਨਾ ਛੱਡੋ। ਹਮੇਸ਼ਾ `<h1>` ਤੋਂ `<h2>` ਤੋਂ `<h3>` ਤੱਕ ਤਰਕਸੰਗਤ ਤਰੀਕੇ ਨਾਲ ਅੱਗੇ ਵਧੋ। ਸਕੂਲ ਵਿੱਚ ਰੂਪਰੇਖਾ ਬਣਾਉਣ ਦੀ ਯਾਦ ਹੈ? ਇਹ ਬਿਲਕੁਲ ਉਹੀ ਸਿਧਾਂਤ ਹੈ—ਤੁਸੀਂ "I. ਮੁੱਖ ਬਿੰਦੂ" ਤੋਂ ਸਿੱਧੇ "C. ਉਪ-ਉਪ-ਬਿੰਦੂ" 'ਤੇ ਬਿਨਾਂ "A. ਉਪ-ਬਿੰਦੂ" ਦੇ ਨਹੀਂ ਜਾਓਗੇ, ਸਹੀ?
 
-**ਸੰਪੂਰਨ ਹੈਡਿੰਗ ਸਟ੍ਰਕਚਰ ਉਦਾਹਰਣ:**
+**ਸੰਪੂਰਨ ਹੈਡਿੰਗ ਸਟ੍ਰਕਚਰ ਉਦਾਹਰਨ:**
 
 ```html
 <!-- ✅ Excellent: Logical, hierarchical progression -->
@@ -333,115 +476,159 @@ button:focus:not(:focus-visible) {
 <h1>Another main heading?</h1> <!-- Multiple h1s -->
 ```
 
-**ਹੈਡਿੰਗ ਦੀਆਂ ਵਧੀਆ ਪ੍ਰਥਾਵਾਂ:**
-- **ਪ੍ਰਤੀ ਪੇਜ ਇੱਕ `<h1>`**: ਆਮ ਤੌਰ 'ਤੇ ਤੁਹਾਡਾ ਮੁੱਖ ਪੇਜ ਸਿਰਲੇਖ ਜਾਂ ਪ੍ਰਮੁੱਖ ਸਮੱਗਰੀ ਹੈਡਰ
-- **ਤਰਕਸੰਗਤ ਪ੍ਰਗਤੀ**: ਕਦੇ ਵੀ ਪੱਧਰ ਨਾ ਛੱਡੋ (h1 → h2 → h3, ਨਾ ਕਿ h1 → h3)
+**ਹੈਡਿੰਗ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸ:**
+- **ਪੇਜ 'ਤੇ ਇੱਕ `<h1>`**: ਆਮ ਤੌਰ 'ਤੇ ਤੁਹਾਡਾ ਮੁੱਖ ਪੇਜ ਸਿਰਲੇਖ ਜਾਂ ਪ੍ਰਮੁੱਖ ਸਮੱਗਰੀ ਹੈਡਿੰਗ
+- **ਤਰਕਸੰਗਤ ਤਰੱਕੀ**: ਪੱਧਰ ਕਦੇ ਨਾ ਛੱਡੋ (h1 → h2 → h3, ਨਾ ਕਿ h1 → h3)
 - **ਵਰਣਨਾਤਮਕ ਸਮੱਗਰੀ**: ਹੈਡਿੰਗ ਨੂੰ ਅਰਥਪੂਰਨ ਬਣਾਓ ਜਦੋਂ ਸੰਦਰਭ ਤੋਂ ਬਾਹਰ ਪੜ੍ਹਿਆ ਜਾਵੇ
-- **CSS ਨਾਲ ਵਿਜੁਅਲ ਸਟਾਈਲਿੰਗ**: ਦਿੱਖ ਲਈ CSS ਵਰਤੋ, ਸਟ੍ਰਕਚਰ ਲਈ HTML ਪੱਧਰ
+- **CSS ਨਾਲ ਦ੍ਰਿਸ਼ਮਾਨ ਸਟਾਈਲਿੰਗ**: ਦਿੱਖ ਲਈ CSS ਦੀ ਵਰਤੋਂ ਕਰੋ, ਸਟ੍ਰਕਚਰ ਲਈ HTML ਪੱਧਰ
 
 **ਸਕ੍ਰੀਨ ਰੀਡਰ ਨੈਵੀਗੇਸ਼ਨ ਅੰਕੜੇ:**
 - 68% ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ ਹੈਡਿੰਗ ਦੁਆਰਾ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding))
 - ਉਪਭੋਗਤਾ ਇੱਕ ਤਰਕਸੰਗਤ ਹੈਡਿੰਗ ਰੂਪਰੇਖਾ ਦੀ ਉਮੀਦ ਕਰਦੇ ਹਨ
 - ਹੈਡਿੰਗ ਪੇਜ ਸਟ੍ਰਕਚਰ ਨੂੰ ਸਮਝਣ ਦਾ ਸਭ ਤੋਂ ਤੇਜ਼ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: "HeadingsMap" ਵਰਗੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਵਰਤੋ ਆਪਣੀ ਹੈਡਿੰਗ ਸਟ੍ਰਕਚਰ ਨੂੰ ਵਿਜੁਅਲਾਈਜ਼ ਕਰਨ ਲਈ। ਇਹ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ ਸਮੱਗਰੀ ਦੀ ਸੂਚੀ ਵਾਂਗ ਪੜ੍ਹੀ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ।
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: "HeadingsMap" ਵਰਗੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ਆਪਣੀ ਹੈਡਿੰਗ ਸਟ੍ਰਕਚਰ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਕਰਨ ਲਈ। ਇਹ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ ਸੂਚੀ ਵਾਂਗ ਪੜ੍ਹਨਾ ਚਾਹੀਦਾ ਹੈ।
 
-✅ **ਆਪਣੀ ਹੈਡਿੰਗ ਸਟ੍ਰਕਚਰ ਦੀ ਜਾਂਚ ਕਰੋ**: ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੇ ਹੈਡਿੰਗ ਨੈਵੀਗੇਸ਼ਨ (NVDA ਵਿੱਚ H) ਨੂੰ ਵਰਤ ਕੇ ਆਪਣੀਆਂ ਹੈਡਿੰਗਾਂ 'ਤੇ ਜਾਓ। ਕੀ ਪ੍ਰਗਤੀ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਦੀ ਕਹਾਣੀ ਤਰਕਸੰਗਤ ਤਰੀਕੇ ਨਾਲ ਦੱਸਦੀ ਹੈ?
+✅ **ਆਪਣੀ ਹੈਡਿੰਗ ਸਟ੍ਰਕਚਰ ਟੈਸਟ ਕਰੋ**: ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੇ ਹੈਡਿੰਗ ਨੈਵੀਗੇਸ਼ਨ (NVDA ਵਿੱਚ H ਕੁੰਜੀ) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀਆਂ ਹੈਡਿੰਗ ਦੁਆਰਾ ਜਾਓ। ਕੀ ਤਰੱਕੀ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਦੀ ਕਹਾਣੀ ਤਰਕਸੰਗਤ ਤਰੀਕੇ ਨਾਲ ਦੱਸਦੀ ਹੈ?
 
-### ਉੱਚ ਪੱਧਰੀ ਵਿਜੁਅਲ ਪਹੁੰਚਯੋਗਤਾ ਤਕਨੀਕਾਂ
+### ਉੱਚ-ਪੱਧਰੀ ਦ੍ਰਿਸ਼ਮਾਨ ਐਕਸੈਸਬਿਲਿਟੀ ਤਕਨੀਕਾਂ
 
-ਕਾਂਟ੍ਰਾਸਟ ਅਤੇ ਰੰਗ ਦੇ ਮੁੱਢਲੇ ਸਿਧਾਂਤਾਂ ਤੋਂ ਇਲਾਵਾ, ਕੁਝ ਉੱਚ ਪੱਧਰੀ ਤਕਨੀਕਾਂ ਹਨ ਜੋ ਸੱਚਮੁੱਚ ਸਮਾਵੇਸ਼ੀ ਵਿਜੁਅਲ ਅਨੁਭਵ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਤਰੀਕੇ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ ਕਿ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਵੱਖ-ਵੱਖ ਦੇਖਣ ਦੀਆਂ ਸਥਿਤੀਆਂ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਵਿੱਚ ਕੰਮ ਕਰਦੀ ਹੈ।
+ਕਾਂਟ੍ਰਾਸਟ ਅਤੇ ਰੰਗ ਦੇ ਮੁੱਢਲੇ ਸਿਧਾਂਤਾਂ ਤੋਂ ਪਰੇ, ਕੁਝ ਸੁਧਾਰਤ ਤਕਨੀਕਾਂ ਹਨ ਜੋ ਸੱਚਮੁੱਚ ਸਮਾਵੇਸ਼ੀਕ ਦ੍ਰਿਸ਼ਮਾਨ ਅਨੁਭਵ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਤਰੀਕੇ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ ਕਿ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਵੱਖ-ਵੱਖ ਦੇਖਣ ਦੀਆਂ ਹਾਲਾਤਾਂ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ 'ਤੇ ਕੰਮ ਕਰਦੀ ਹੈ।
 
-**ਮੁੱਢਲੇ ਵਿਜੁਅਲ ਸੰਚਾਰ ਰਣਨੀਤੀਆਂ:**
+**ਮੁੱਢਲੇ ਦ੍ਰਿਸ਼ਮਾਨ ਸੰਚਾਰ ਰਣਨੀਤੀਆਂ:**
 
-- **ਮਲਟੀ-ਮੋਡਲ ਫੀਡਬੈਕ**: ਵਿਜੁਅਲ, ਟੈਕਸਟੂਅਲ, ਅਤੇ ਕਈ ਵਾਰ ਆਡੀਓ ਸੰਕੇਤਾਂ ਨੂੰ ਮਿਲਾਓ
+- **ਮਲਟੀ-ਮੋਡਲ ਫੀਡਬੈਕ**: ਦ੍ਰਿਸ਼ਮਾਨ, ਟੈਕਸਟੂਅਲ, ਅਤੇ ਕਈ ਵਾਰ ਆਡੀਓ ਸੰਕੇਤਾਂ ਨੂੰ ਮਿਲਾਓ
 - **ਪ੍ਰੋਗਰੈਸਿਵ ਡਿਸਕਲੋਜ਼ਰ**: ਜਾਣਕਾਰੀ ਨੂੰ ਹਜ਼ਮ ਕਰਨ ਯੋਗ ਹਿੱਸਿਆਂ ਵਿੱਚ ਪੇਸ਼ ਕਰੋ
-- **ਸਥਿਰ ਇੰਟਰਐਕਸ਼ਨ ਪੈਟਰਨ**: ਜਾਣ-ਪਛਾਣ ਵਾਲੇ UI ਰਵਾਇਤਾਂ ਵਰਤੋ
-- **ਰਿਸਪਾਂਸਿਵ ਟਾਈਪੋਗ੍ਰਾਫੀ**: ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਟੈਕਸਟ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਕੇਲ ਕਰੋ
-- **ਲੋਡਿੰਗ ਅਤੇ ਗਲਤੀ ਸਥਿਤੀਆਂ**: ਸਾਰੇ ਉਪਭੋਗਤਾ ਕਾਰਵਾਈਆਂ ਲਈ ਸਪਸ਼ਟ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰੋ
-
-**CSS ਯੂਟਿਲਿਟੀਜ਼ ਪਹੁੰਚਯੋਗਤਾ ਵਧਾਉਣ ਲਈ:**
+- **ਸਥਿਰ ਇੰਟਰੈਕਸ਼ਨ ਪੈਟਰਨ**: ਜਾਣ-ਪਛਾਣ ਵਾਲੇ UI ਰਵਾਇਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ
+- **ਰਿਸਪਾਂਸਿਵ ਟਾਈਪੋਗ੍ਰਾਫੀ**: ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਟੈਕਸਟ ਨੂੰ ਸਹ
+**ARIA ਦੇ ਪੰਜ ਸ਼੍ਰੇਣੀਆਂ:**
 
-```css
-/* Screen reader only text - visually hidden but accessible */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+1. **ਰੋਲਸ**: ਇਹ ਤੱਤ ਕੀ ਹੈ? (`button`, `tab`, `dialog`)
+2. **ਗੁਣ**: ਇਸ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਕੀ ਹਨ? (`aria-required`, `aria-haspopup`)
+3. **ਸਥਿਤੀਆਂ**: ਇਸ ਦੀ ਮੌਜੂਦਾ ਹਾਲਤ ਕੀ ਹੈ? (`aria-expanded`, `aria-checked`)
+4. **ਲੈਂਡਮਾਰਕਸ**: ਪੇਜ ਸਟ੍ਰਕਚਰ ਵਿੱਚ ਇਹ ਕਿੱਥੇ ਹੈ? (`banner`, `navigation`, `main`)
+5. **ਲਾਈਵ ਰੀਜਨਸ**: ਬਦਲਾਅ ਕਿਵੇਂ ਐਲਾਨੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ? (`aria-live`, `aria-atomic`)
 
-/* Skip link for keyboard navigation */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 6px;
-  background: #000000;
-  color: #ffffff;
-  padding: 8px 16px;
-  text-decoration: none;
-  border-radius: 4px;
-  font-weight: bold;
-  transition: top 0.3s ease;
-  z-index: 1000;
-}
+### ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਸ ਲਈ ਜ਼ਰੂਰੀ ARIA ਪੈਟਰਨ
 
-.skip-link:focus {
-  top: 6px;
-}
+ਇਹ ਪੈਟਰਨ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸਭ ਤੋਂ ਆਮ ਐਕਸੈਸਬਿਲਿਟੀ ਚੁਣੌਤੀਆਂ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ:
 
-/* Reduced motion respect */
-@media (prefers-reduced-motion: reduce) {
-  .skip-link {
-    transition: none;
-  }
-  
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
+**ਤੱਤਾਂ ਨੂੰ ਨਾਮ ਦੇਣਾ ਅਤੇ ਵਰਣਨ ਕਰਨਾ:**
 
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .button {
-    border: 2px solid;
-  }
-}
+```html
+<!-- aria-label: Provides accessible name when visible text isn't sufficient -->
+<button aria-label="Close newsletter subscription dialog">×</button>
+
+<!-- aria-labelledby: References existing text as the accessible name -->
+<section aria-labelledby="news-heading">
+  <h2 id="news-heading">Latest News</h2>
+  <!-- news content -->
+</section>
+
+<!-- aria-describedby: Links to additional descriptive text -->
+<input type="password" 
+       aria-describedby="pwd-requirements pwd-strength"
+       required>
+<div id="pwd-requirements">
+  Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
+</div>
+<div id="pwd-strength" aria-live="polite">
+  <!-- Dynamic password strength indicator -->
+</div>
 ```
 
-> 🎯 **ਪਹੁੰਚਯੋਗਤਾ ਪੈਟਰਨ**: "skip link" ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਬਹੁਤ ਜ਼ਰੂਰੀ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਪੇਜ 'ਤੇ ਪਹਿਲਾ ਫੋਕਸਯੋਗ ਤੱਤ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਸਿੱਧੇ ਮੁੱਖ ਸਮੱਗਰੀ ਖੇਤਰ 'ਤੇ ਜੰਪ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
+**ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਲਈ ਲਾਈਵ ਰੀਜਨਸ:**
 
-✅ **skip navigation ਲਾਗੂ ਕਰੋ**: ਆਪਣੇ ਪੇਜਾਂ 'ਤੇ skip links ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਜਾਂਚ ਕਰੋ ਕਿ ਜਦੋਂ ਪੇਜ ਲੋਡ ਹੁੰਦਾ ਹੈ ਤਾਂ ਟੈਬ ਦਬਾਉਣ 'ਤੇ ਇਹ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਨੂੰ ਮੁੱਖ ਸਮੱਗਰੀ 'ਤੇ ਜੰਪ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ।
+```html
+<!-- Polite announcements (don't interrupt current speech) -->
+<div aria-live="polite" id="status-updates">
+  <!-- Status messages appear here -->
+</div>
 
-## ਅਰਥਪੂਰਨ ਲਿੰਕ ਟੈਕਸਟ ਬਣਾਉਣਾ
+<!-- Assertive announcements (interrupt and announce immediately) -->
+<div aria-live="assertive" id="urgent-alerts">
+  <!-- Error messages and critical alerts -->
+</div>
 
-ਲਿੰਕ ਵੈਬ ਦੇ ਹਾਈਵੇ ਹਨ, ਪਰ ਖਰਾਬ ਲਿਖਿਆ ਲਿੰਕ ਟੈਕਸਟ "ਜਗ੍ਹਾ" ਦੇ ਬਦਲੇ "ਡਾਊਨਟਾਊਨ ਸ਼ਿਕਾਗੋ" ਕਹਿਣ ਵਾਲੇ ਰੋਡ ਸਾਈਨ ਵਰਗਾ ਹੈ। ਬਹੁਤ ਮਦਦਗਾਰ ਨਹੀਂ, ਸਹੀ?
+<!-- Loading states with live regions -->
+<button id="submit-btn" aria-describedby="loading-status">
+  Submit Application
+</button>
+<div id="loading-status" aria-live="polite" aria-atomic="true">
+  <!-- "Processing your application..." appears here -->
+</div>
+```
+
+**ਇੰਟਰਐਕਟਿਵ ਵਿਜਟ ਉਦਾਹਰਨ (ਐਕਾਰਡੀਅਨ):**
+
+```html
+<div class="accordion">
+  <h3>
+    <button aria-expanded="false" 
+            aria-controls="panel-1" 
+            id="accordion-trigger-1"
+            class="accordion-trigger">
+      Accessibility Guidelines
+    </button>
+  </h3>
+  <div id="panel-1" 
+       role="region"
+       aria-labelledby="accordion-trigger-1" 
+       hidden>
+    <p>WCAG 2.1 provides comprehensive guidelines...</p>
+  </div>
+</div>
+```
+
+```javascript
+// JavaScript to manage accordion state
+function toggleAccordion(trigger) {
+  const panel = document.getElementById(trigger.getAttribute('aria-controls'));
+  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+  
+  // Toggle states
+  trigger.setAttribute('aria-expanded', !isExpanded);
+  panel.hidden = isExpanded;
+  
+  // Announce change to screen readers
+  const status = document.getElementById('status-updates');
+  status.textContent = isExpanded ? 'Section collapsed' : 'Section expanded';
+}
+```
 
-ਇਹ ਕੁਝ ਹੈ ਜੋ ਮੈਂ ਪਹਿਲੀ ਵਾਰ ਸਿੱਖਿਆ ਤਾਂ ਹੈਰਾਨ ਹੋ ਗਿਆ: ਸਕ੍ਰੀਨ ਰੀਡਰ ਸਾਰੇ ਲਿੰਕਾਂ ਨੂੰ ਇੱਕ ਪੇਜ ਤੋਂ ਕੱਢ ਸਕਦੇ ਹਨ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਇੱਕ ਵੱਡੀ ਸੂਚੀ ਵਜੋਂ ਦਿਖਾ ਸਕਦੇ ਹਨ। ਕਲਪਨਾ ਕਰੋ ਕਿ ਕੋਈ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਪੇਜ 'ਤੇ ਹਰ ਲਿੰਕ ਦੀ ਡਾਇਰੈਕਟਰੀ ਦੇਵੇ। ਕੀ ਹਰ ਇੱਕ ਆਪਣੇ ਆਪ ਵਿੱਚ ਅਰਥਪੂਰਨ ਲੱਗਦਾ ਹੈ? ਇਹ ਟੈਸਟ ਤੁਹਾਡੇ ਲਿੰਕ ਟੈਕਸਟ ਨੂੰ ਪਾਸ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ!
+### ARIA ਲਾਗੂ ਕਰਨ ਦੇ ਸ੍ਰੇਸ਼ਠ ਤਰੀਕੇ
 
-### ਲਿੰਕ ਨੈਵੀਗੇਸ਼ਨ ਪੈਟਰਨਾਂ ਨੂੰ ਸਮਝਣਾ
+ARIA ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ ਪਰ ਇਸ ਨੂੰ ਸਾਵਧਾਨੀ ਨਾਲ ਲਾਗੂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਹ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਨਾਲ ਇਹ ਯਕੀਨੀ ਬਣਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ARIA ਐਕਸੈਸਬਿਲਿਟੀ ਨੂੰ ਸੁਧਾਰਦਾ ਹੈ ਨਾ ਕਿ ਰੁਕਾਵਟ ਪੈਦਾ ਕਰਦਾ ਹੈ:
 
-ਸਕ੍ਰੀਨ ਰੀਡਰ ਵਧੀਆ ਲਿੰਕ ਨੈਵੀਗੇਸ਼ਨ ਫੀਚਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਜੋ ਚੰਗੇ ਲਿਖੇ ਲਿੰਕ ਟੈਕਸਟ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ:
+**🛡️ ਮੁੱਖ ਸਿਧਾਂਤ:**
 
-**ਲਿੰਕ ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਤਰੀਕੇ:**
-- **ਲਗਾਤਾਰ ਪੜ੍ਹਨਾ**: ਲਿੰਕ ਸਮੱਗਰੀ ਦੇ ਪ੍ਰਵਾਹ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪੜ੍ਹੇ ਜਾਂਦੇ ਹਨ
-- **ਲਿੰਕ ਸੂਚੀ ਬਣਾਉਣਾ**: ਸਾਰੇ ਪੇਜ ਲਿੰਕਾਂ ਨੂੰ ਇੱਕ ਖੋਜਯੋਗ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਇਕੱਠਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ
-- **ਤੁਰੰਤ ਨੈਵੀਗੇਸ਼ਨ**: ਕੀਬੋਰਡ ਸ਼ਾਰਟਕਟ (NVDA ਵਿੱਚ K) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲਿੰਕਾਂ ਵਿੱਚ ਜੰਪ ਕਰੋ
-- **ਖੋਜ ਫੰਕਸ਼ਨਲਿਟੀ**: ਕੁਝ ਹਿੱਸਾ ਟੈਕਸਟ ਟਾਈਪ ਕਰਕੇ ਵਿਸ਼ੇਸ਼ ਲਿੰਕ ਲੱਭੋ
+```mermaid
+flowchart TD
+    A[🚀 Start with semantic HTML] --> B{Does HTML provide needed semantics?}
+    B -->|Yes| C[✅ Use HTML only]
+    B -->|No| D[Consider ARIA enhancement]
+    D --> E{Can you achieve it with simpler means?}
+    E -->|Yes| F[🔄 Simplify approach]
+    E -->|No| G[📝 Implement ARIA carefully]
+    G --> H[🧪 Test with real AT]
+    H --> I{Works as expected?}
+    I -->|No| J[🔧 Debug and fix]
+    I -->|Yes| K[✅ Success!]
+    J --> H
+    F --> C
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style K fill:#e8f5e8
+    style G fill:#fff3e0
+    style H fill:#f3e5f5
+```
 
-**ਸੰਦਰਭ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ:**
-ਜਦੋਂ ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ ਲਿੰਕ ਸੂਚੀ ਬਣਾਉਂਦੇ ਹਨ, ਉਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਦੇ ਹਨ:
-- "ਰਿਪੋਰਟ ਡਾਊਨਲੋਡ ਕਰੋ"
-- "ਹੋਰ ਜਾਣੋ"
-- "ਇਥੇ ਕਲ
-5. **ਸਧਾਰਨ ਤੋਂ ਸ਼ੁਰੂ ਕਰੋ**: ਜਟਿਲ ARIA ਲਾਗੂ ਕਰਨ ਵਿੱਚ ਗਲਤੀਆਂ ਹੋਣ ਦੀ ਸੰਭਾਵਨਾ ਜ਼ਿਆਦਾ ਹੁੰਦੀ ਹੈ
+1. **ਸੈਮੈਂਟਿਕ HTML ਪਹਿਲਾਂ**: ਹਮੇਸ਼ਾ `<button>` ਨੂੰ `<div role="button">` ਤੋਂ ਵਧੇਰੇ ਤਰਜੀਹ ਦਿਓ
+2. **ਸੈਮੈਂਟਿਕਸ ਨੂੰ ਖਰਾਬ ਨਾ ਕਰੋ**: ਮੌਜੂਦਾ HTML ਦੇ ਅਰਥ ਨੂੰ ਕਦੇ ਵੀ ਓਵਰਰਾਈਡ ਨਾ ਕਰੋ (ਜਿਵੇਂ `<h1 role="button">` ਤੋਂ ਬਚੋ)
+3. **ਕੀਬੋਰਡ ਐਕਸੈਸਬਿਲਿਟੀ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖੋ**: ਸਾਰੇ ਇੰਟਰਐਕਟਿਵ ARIA ਤੱਤ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੀਬੋਰਡ ਨਾਲ ਐਕਸੈਸਬਲ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ
+4. **ਅਸਲੀ ਯੂਜ਼ਰਾਂ ਨਾਲ ਟੈਸਟ ਕਰੋ**: ARIA ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਵਿੱਚ ਕਾਫ਼ੀ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਨਾਲ ਸਹਾਇਕ ਹੁੰਦਾ ਹੈ
+5. **ਸਧਾਰਨ ਸ਼ੁਰੂਆਤ ਕਰੋ**: ਜਟਿਲ ARIA ਲਾਗੂ ਕਰਨ ਵਿੱਚ ਗਲਤੀਆਂ ਹੋਣ ਦੀ ਸੰਭਾਵਨਾ ਵਧ ਜਾਂਦੀ ਹੈ
 
 **🔍 ਟੈਸਟਿੰਗ ਵਰਕਫਲੋ:**
 
@@ -459,34 +646,51 @@ graph TD
 
 **🚫 ਆਮ ARIA ਗਲਤੀਆਂ ਜਿਨ੍ਹਾਂ ਤੋਂ ਬਚਣਾ ਚਾਹੀਦਾ ਹੈ:**
 
-- **ਵਿਰੋਧੀ ਜਾਣਕਾਰੀ**: HTML semantics ਨਾਲ ਵਿਰੋਧ ਨਾ ਕਰੋ
-- **ਅਤਿ-ਲੇਬਲਿੰਗ**: ਬਹੁਤ ਜ਼ਿਆਦਾ ARIA ਜਾਣਕਾਰੀ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਭਰਮਾਉਂਦੀ ਹੈ
+- **ਵਿਰੋਧੀ ਜਾਣਕਾਰੀ**: HTML ਸੈਮੈਂਟਿਕਸ ਦਾ ਵਿਰੋਧ ਨਾ ਕਰੋ
+- **ਅਤਿ-ਲੇਬਲਿੰਗ**: ਬਹੁਤ ਜ਼ਿਆਦਾ ARIA ਜਾਣਕਾਰੀ ਯੂਜ਼ਰਾਂ ਨੂੰ ਭਰਮਾਉਂਦੀ ਹੈ
 - **ਸਥਿਰ ARIA**: ਸਮੱਗਰੀ ਬਦਲਣ 'ਤੇ ARIA ਸਥਿਤੀਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਭੁੱਲ ਜਾਣਾ
-- **ਅਣ-ਟੈਸਟ ਕੀਤੀਆਂ ਲਾਗੂਆਂ**: ARIA ਜੋ ਸਿਧਾਂਤ ਵਿੱਚ ਕੰਮ ਕਰਦੀ ਹੈ ਪਰ ਅਮਲ ਵਿੱਚ ਫੇਲ੍ਹ ਹੋ ਜਾਂਦੀ ਹੈ
-- **ਕੀਬੋਰਡ ਸਹਾਇਤਾ ਦੀ ਘਾਟ**: ARIA ਰੋਲਾਂ ਬਿਨਾਂ ਸੰਬੰਧਿਤ ਕੀਬੋਰਡ ਇੰਟਰੈਕਸ਼ਨ ਦੇ
+- **ਅਣ-ਟੈਸਟ ਕੀਤੀਆਂ ਲਾਗੂਆਂ**: ARIA ਜੋ ਸਿਧਾਂਤ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ ਪਰ ਅਸਲ ਵਿੱਚ ਫੇਲ੍ਹ ਹੁੰਦਾ ਹੈ
+- **ਕੀਬੋਰਡ ਸਹਾਇਤਾ ਦੀ ਘਾਟ**: ARIA ਰੋਲਸ ਬਿਨਾਂ ਸੰਬੰਧਿਤ ਕੀਬੋਰਡ ਇੰਟਰਐਕਸ਼ਨ ਦੇ
 
-> 💡 **ਟੈਸਟਿੰਗ ਸਰੋਤ**: [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) ਵਰਗੇ ਟੂਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ARIA ਵੈਰੀਫਿਕੇਸ਼ਨ ਲਈ, ਪਰ ਪੂਰੇ ਤਜਰਬੇ ਲਈ ਹਮੇਸ਼ਾ ਅਸਲੀ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨਾਲ ਟੈਸਟ ਕਰੋ।
+> 💡 **ਟੈਸਟਿੰਗ ਸਰੋਤ**: [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) ਵਰਗੇ ਟੂਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ARIA ਵੈਲੀਡੇਸ਼ਨ ਲਈ, ਪਰ ਪੂਰੇ ਅਨੁਭਵ ਲਈ ਹਮੇਸ਼ਾ ਅਸਲੀ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨਾਲ ਟੈਸਟ ਕਰੋ।
 
-✅ **ਮਾਹਿਰਾਂ ਤੋਂ ਸਿੱਖੋ**: [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) ਦਾ ਅਧਿਐਨ ਕਰੋ ਜਟਿਲ ਇੰਟਰੈਕਟਿਵ ਵਿਜਟਾਂ ਦੇ ਪੈਟਰਨ ਅਤੇ ਲਾਗੂਆਂ ਲਈ।
+### 🎭 **ARIA ਸਿੱਖਣ ਦੀ ਜਾਂਚ: ਕੀ ਤੁਸੀਂ ਜਟਿਲ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਤਿਆਰ ਹੋ?**
 
-## ਚਿੱਤਰ ਅਤੇ ਮੀਡੀਆ ਨੂੰ ਸਹਾਇਕ ਬਣਾਉਣਾ
+**ਆਪਣੀ ARIA ਯੋਗਤਾ ਨੂੰ ਮਾਪੋ:**
+- ਤੁਸੀਂ ARIA ਨੂੰ ਸੈਮੈਂਟਿਕ HTML ਤੋਂ ਵੱਧ ਕਦੋਂ ਚੁਣੋਗੇ? (ਸੁਝਾਅ: ਲਗਭਗ ਕਦੇ ਨਹੀਂ!)
+- ਤੁਸੀਂ ਸਮਝਾ ਸਕਦੇ ਹੋ ਕਿ `<div role="button">` ਆਮ ਤੌਰ 'ਤੇ `<button>` ਤੋਂ ਕਿਉਂ ਖਰਾਬ ਹੈ?
+- ARIA ਟੈਸਟਿੰਗ ਬਾਰੇ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਕੀ ਹੈ?
 
-ਦ੍ਰਿਸ਼ਮਾਨ ਅਤੇ ਆਡੀਓ ਸਮੱਗਰੀ ਆਧੁਨਿਕ ਵੈੱਬ ਅਨੁਭਵਾਂ ਦਾ ਅਹਿਮ ਹਿੱਸਾ ਹੈ, ਪਰ ਜੇ ਸਾਵਧਾਨੀ ਨਾਲ ਲਾਗੂ ਨਾ ਕੀਤਾ ਜਾਵੇ ਤਾਂ ਇਹ ਰੁਕਾਵਟਾਂ ਪੈਦਾ ਕਰ ਸਕਦੀ ਹੈ। ਉਦੇਸ਼ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਤੁਹਾਡੀ ਮੀਡੀਆ ਦੀ ਜਾਣਕਾਰੀ ਅਤੇ ਭਾਵਨਾਤਮਕ ਪ੍ਰਭਾਵ ਹਰ ਉਪਭੋਗਤਾ ਤੱਕ ਪਹੁੰਚੇ। ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਮਝ ਲੈਂਦੇ ਹੋ, ਇਹ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।
+```mermaid
+pie title "Common ARIA Usage Patterns"
+    "Labels & Descriptions" : 40
+    "Live Regions" : 25
+    "Widget States" : 20
+    "Complex Controls" : 15
+```
 
-ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੀ ਮੀਡੀਆ ਲਈ ਵੱਖ-ਵੱਖ ਸਹਾਇਕ ਪਹੁੰਚ ਦੇ ਤਰੀਕੇ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਹ ਪਕਾਉਣ ਵਰਗਾ ਹੈ—ਤੁਸੀਂ ਨਰਮ ਮੱਛੀ ਨੂੰ ਮਜ਼ਬੂਤ ਸਟੀਕ ਦੀ ਤਰ੍ਹਾਂ ਨਹੀਂ ਪਕਾਉਂਦੇ। ਇਹ ਫਰਕ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਹਰ ਸਥਿਤੀ ਲਈ ਸਹੀ ਹੱਲ ਚੁਣਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ।
+> **ਮੁੱਖ ਝਲਕ**: ਜ਼ਿਆਦਾਤਰ ARIA ਦੀ ਵਰਤੋਂ ਤੱਤਾਂ ਨੂੰ ਲੇਬਲ ਕਰਨ ਅਤੇ ਵਰਣਨ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਜਟਿਲ ਵਿਜਟ ਪੈਟਰਨ ਤੁਹਾਡੇ ਸੋਚਣ ਤੋਂ ਕਾਫ਼ੀ ਘੱਟ ਆਮ ਹਨ!
 
-### ਚਿੱਤਰਾਂ ਦੀ ਸਹਾਇਕ ਪਹੁੰਚ ਲਈ ਰਣਨੀਤੀ
+✅ **ਮਾਹਿਰਾਂ ਤੋਂ ਸਿੱਖੋ**: [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) ਦਾ ਅਧਿਐਨ ਕਰੋ ਜਟਿਲ ਇੰਟਰਐਕਟਿਵ ਵਿਜਟਾਂ ਦੇ ਪੈਟਰਨ ਅਤੇ ਲਾਗੂਆਂ ਲਈ।
 
-ਤੁਹਾਡੇ ਵੈੱਬਸਾਈਟ 'ਤੇ ਹਰ ਚਿੱਤਰ ਦਾ ਇੱਕ ਉਦੇਸ਼ ਹੁੰਦਾ ਹੈ। ਉਸ ਉਦੇਸ਼ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਬਿਹਤਰ ਵਿਕਲਪਿਕ ਟੈਕਸਟ ਲਿਖਣ ਅਤੇ ਜ਼ਿਆਦਾ ਸਮਾਵੇਸ਼ੀਕ ਅਨੁਭਵ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ।
+## ਚਿੱਤਰ ਅਤੇ ਮੀਡੀਆ ਨੂੰ ਐਕਸੈਸਬਲ ਬਣਾਉਣਾ
 
-**ਚਾਰ ਕਿਸਮ ਦੇ ਚਿੱਤਰ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ alt ਟੈਕਸਟ ਦੀ ਰਣਨੀਤੀ:**
+ਦ੍ਰਿਸ਼ਮਾਨ ਅਤੇ ਆਡੀਓ ਸਮੱਗਰੀ ਆਧੁਨਿਕ ਵੈੱਬ ਅਨੁਭਵਾਂ ਦਾ ਅਹਿਮ ਹਿੱਸਾ ਹਨ, ਪਰ ਜੇਕਰ ਸਾਵਧਾਨੀ ਨਾਲ ਲਾਗੂ ਨਾ ਕੀਤਾ ਜਾਵੇ ਤਾਂ ਇਹ ਰੁਕਾਵਟਾਂ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ। ਉਦੇਸ਼ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਤੁਹਾਡੀ ਮੀਡੀਆ ਦੀ ਜਾਣਕਾਰੀ ਅਤੇ ਭਾਵਨਾਤਮਕ ਪ੍ਰਭਾਵ ਹਰ ਯੂਜ਼ਰ ਤੱਕ ਪਹੁੰਚੇ। ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਨੂੰ ਸਮਝ ਲੈਂਦੇ ਹੋ, ਇਹ ਆਸਾਨ ਬਣ ਜਾਂਦਾ ਹੈ।
 
-**ਜਾਣਕਾਰੀ ਦੇਣ ਵਾਲੇ ਚਿੱਤਰ** - ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ:
+ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੀ ਮੀਡੀਆ ਨੂੰ ਵੱਖ-ਵੱਖ ਐਕਸੈਸਬਿਲਿਟੀ ਪਹੁੰਚਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਹ ਪਕਾਉਣ ਵਰਗਾ ਹੈ—ਤੁਸੀਂ ਨਰਮ ਮੱਛੀ ਨੂੰ ਹਾਰਡ ਸਟੀਕ ਦੇ ਤਰੀਕੇ ਨਾਲ ਨਹੀਂ ਪਕਾਉਂਦੇ। ਇਹ ਅੰਤਰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਹਰ ਸਥਿਤੀ ਲਈ ਸਹੀ ਹੱਲ ਚੁਣਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ।
+
+### ਰਣਨੀਤਿਕ ਚਿੱਤਰ ਐਕਸੈਸਬਿਲਿਟੀ
+
+ਤੁਹਾਡੇ ਵੈੱਬਸਾਈਟ 'ਤੇ ਹਰ ਚਿੱਤਰ ਦਾ ਇੱਕ ਉਦੇਸ਼ ਹੁੰਦਾ ਹੈ। ਉਸ ਉਦੇਸ਼ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਬਿਹਤਰ ਵਿਕਲਪਿਕ ਟੈਕਸਟ ਲਿਖਣ ਅਤੇ ਵਧੇਰੇ ਸਮਾਵੇਸ਼ੀ ਅਨੁਭਵ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ।
+
+**ਚਿੱਤਰਾਂ ਦੀਆਂ ਚਾਰ ਕਿਸਮਾਂ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ alt ਟੈਕਸਟ ਰਣਨੀਤੀਆਂ:**
+
+**ਜਾਣਕਾਰੀ ਚਿੱਤਰ** - ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ:
 ```html
 <img src="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.pa.png" alt="Sales increased 25% from Q1 to Q2 2024">
 ```
 
-**ਸਜਾਵਟੀ ਚਿੱਤਰ** - ਸਿਰਫ਼ ਦ੍ਰਿਸ਼ਮਾਨ, ਕੋਈ ਜਾਣਕਾਰੀਮੁੱਲ ਨਹੀਂ:
+**ਸਜਾਵਟੀ ਚਿੱਤਰ** - ਸਿਰਫ਼ ਦ੍ਰਿਸ਼ਮਾਨ, ਕੋਈ ਜਾਣਕਾਰੀਮੂਲਕ ਮੁੱਲ ਨਹੀਂ:
 ```html
 <img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d57fb6357835906c16938df3d5651c1314c196c3b1c52df98.pa.png" alt="" role="presentation">
 ```
@@ -506,11 +710,11 @@ graph TD
 </div>
 ```
 
-### ਵੀਡੀਓ ਅਤੇ ਆਡੀਓ ਦੀ ਸਹਾਇਕ ਪਹੁੰਚ
+### ਵੀਡੀਓ ਅਤੇ ਆਡੀਓ ਐਕਸੈਸਬਿਲਿਟੀ
 
 **ਵੀਡੀਓ ਦੀਆਂ ਲੋੜਾਂ:**
 - **ਕੈਪਸ਼ਨ**: ਬੋਲਣ ਵਾਲੀ ਸਮੱਗਰੀ ਅਤੇ ਸਾਊਂਡ ਇਫੈਕਟਸ ਦਾ ਟੈਕਸਟ ਵਰਜਨ
-- **ਆਡੀਓ ਵਰਣਨ**: ਅੰਨ੍ਹੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਤੱਤਾਂ ਦੀ ਕਹਾਣੀ
+- **ਆਡੀਓ ਵਰਣਨ**: ਅੰਨ੍ਹੇ ਯੂਜ਼ਰਾਂ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਤੱਤਾਂ ਦੀ ਕਹਾਣੀ
 - **ਟ੍ਰਾਂਸਕ੍ਰਿਪਟਸ**: ਸਾਰੀ ਆਡੀਓ ਅਤੇ ਦ੍ਰਿਸ਼ਮਾਨ ਸਮੱਗਰੀ ਦਾ ਪੂਰਾ ਟੈਕਸਟ ਵਰਜਨ
 
 ```html
@@ -527,7 +731,7 @@ graph TD
 
 ### ਆਧੁਨਿਕ ਚਿੱਤਰ ਤਕਨੀਕਾਂ
 
-**CSS ਦੀ ਵਰਤੋਂ ਸਜਾਵਟੀ ਚਿੱਤਰਾਂ ਲਈ:**
+**ਸਜਾਵਟੀ ਚਿੱਤਰਾਂ ਲਈ CSS ਦੀ ਵਰਤੋਂ:**
 ```css
 .hero-section {
   background-image: url('decorative-hero.jpg');
@@ -535,7 +739,7 @@ graph TD
 }
 ```
 
-**ਸਹਾਇਕ ਪਹੁੰਚ ਨਾਲ ਜਵਾਬਦੇਹ ਚਿੱਤਰ:**
+**ਐਕਸੈਸਬਿਲਿਟੀ ਨਾਲ ਰਿਸਪਾਂਸਿਵ ਚਿੱਤਰ:**
 ```html
 <picture>
   <source media="(min-width: 800px)" srcset="large-chart.png">
@@ -544,25 +748,44 @@ graph TD
 </picture>
 ```
 
-✅ **ਚਿੱਤਰਾਂ ਦੀ ਸਹਾਇਕ ਪਹੁੰਚ ਦੀ ਜਾਂਚ ਕਰੋ**: ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚਿੱਤਰਾਂ ਵਾਲੇ ਪੰਨੇ ਨੂੰ ਨੇਵੀਗੇਟ ਕਰੋ। ਕੀ ਤੁਹਾਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਸਮਝਣ ਲਈ ਕਾਫ਼ੀ ਜਾਣਕਾਰੀ ਮਿਲ ਰਹੀ ਹੈ?
+✅ **ਚਿੱਤਰ ਐਕਸੈਸਬਿਲਿਟੀ ਟੈਸਟ ਕਰੋ**: ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚਿੱਤਰਾਂ ਵਾਲੇ ਪੇਜ ਨੂੰ ਨੈਵੀਗੇਟ ਕਰੋ। ਕੀ ਤੁਹਾਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਸਮਝਣ ਲਈ ਕਾਫ਼ੀ ਜਾਣਕਾਰੀ ਮਿਲ ਰਹੀ ਹੈ?
 
-## ਕੀਬੋਰਡ ਨੇਵੀਗੇਸ਼ਨ ਅਤੇ ਫੋਕਸ ਪ੍ਰਬੰਧਨ
+## ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਫੋਕਸ ਮੈਨੇਜਮੈਂਟ
 
-ਕਈ ਉਪਭੋਗਤਾ ਸਿਰਫ਼ ਆਪਣੇ ਕੀਬੋਰਡ ਨਾਲ ਵੈੱਬ ਨੂੰ ਨੇਵੀਗੇਟ ਕਰਦੇ ਹਨ। ਇਸ ਵਿੱਚ ਮੋਟਰ ਅਪੰਗਤਾ ਵਾਲੇ ਲੋਕ, ਪਾਵਰ ਉਪਭੋਗਤਾ ਜੋ ਕੀਬੋਰਡ ਨੂੰ ਮਾਊਸ ਨਾਲੋਂ ਤੇਜ਼ ਮੰਨਦੇ ਹਨ, ਅਤੇ ਕੋਈ ਵੀ ਜਿਸਦਾ ਮਾਊਸ ਕੰਮ ਕਰਨਾ ਬੰਦ ਕਰ ਚੁੱਕਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਕੀਬੋਰਡ ਇਨਪੁਟ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ, ਜ਼ਰੂਰੀ ਹੈ ਅਤੇ ਅਕਸਰ ਹਰ ਕਿਸੇ ਲਈ ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਜ਼ਿਆਦਾ ਕੁਸ਼ਲ ਬਣਾਉਂਦੀ ਹੈ।
+ਕਈ ਯੂਜ਼ਰ ਸਿਰਫ਼ ਆਪਣੇ ਕੀਬੋਰਡ ਨਾਲ ਵੈੱਬ ਨੂੰ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ। ਇਸ ਵਿੱਚ ਮੋਟਰ ਅਪੰਗਤਾ ਵਾਲੇ ਲੋਕ, ਪਾਵਰ ਯੂਜ਼ਰ ਜੋ ਕੀਬੋਰਡ ਨੂੰ ਮਾਊਸ ਨਾਲੋਂ ਤੇਜ਼ ਸਮਝਦੇ ਹਨ, ਅਤੇ ਕੋਈ ਵੀ ਜਿਸਦਾ ਮਾਊਸ ਕੰਮ ਕਰਨਾ ਬੰਦ ਕਰ ਚੁੱਕਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਕੀਬੋਰਡ ਇਨਪੁਟ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ, ਜ਼ਰੂਰੀ ਹੈ ਅਤੇ ਅਕਸਰ ਹਰ ਕਿਸੇ ਲਈ ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਵਧੇਰੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਬਣਾਉਂਦੀ ਹੈ।
 
-### ਜ਼ਰੂਰੀ ਕੀਬੋਰਡ ਨੇਵੀਗੇਸ਼ਨ ਪੈਟਰਨ
+```mermaid
+flowchart LR
+    A[⌨️ Keyboard Navigation] --> B[Tab Order]
+    A --> C[Focus Indicators]
+    A --> D[Skip Links]
+    A --> E[Keyboard Shortcuts]
+    
+    B --> B1[Logical sequence<br/>All interactive elements<br/>No tab traps]
+    C --> C1[Visible outlines<br/>High contrast<br/>Clear boundaries]
+    D --> D1[Skip to main<br/>Skip to nav<br/>Bypass repetitive]
+    E --> E1[Escape to close<br/>Enter to activate<br/>Arrows in groups]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-**ਮਿਆਰੀ ਕੀਬੋਰਡ ਇੰਟਰੈਕਸ਼ਨ:**
-- **Tab**: ਇੰਟਰੈਕਟਿਵ ਤੱਤਾਂ ਦੇ ਰਾਹੀਂ ਫੋਕਸ ਅੱਗੇ ਵਧਾਓ
+### ਜ਼ਰੂਰੀ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਪੈਟਰਨ
+
+**ਮਿਆਰੀ ਕੀਬੋਰਡ ਇੰਟਰਐਕਸ਼ਨ:**
+- **Tab**: ਇੰਟਰਐਕਟਿਵ ਤੱਤਾਂ ਦੇ ਰਾਹੀਂ ਫੋਕਸ ਅੱਗੇ ਵਧਾਓ
 - **Shift + Tab**: ਫੋਕਸ ਪਿੱਛੇ ਵਧਾਓ
 - **Enter**: ਬਟਨ ਅਤੇ ਲਿੰਕ ਐਕਟੀਵੇਟ ਕਰੋ
 - **Space**: ਬਟਨ ਐਕਟੀਵੇਟ ਕਰੋ, ਚੈਕਬਾਕਸ ਚੈੱਕ ਕਰੋ
-- **Arrow keys**: ਕੰਪੋਨੈਂਟ ਗਰੁੱਪਾਂ ਵਿੱਚ ਨੇਵੀਗੇਟ ਕਰੋ (ਰੇਡੀਓ ਬਟਨ, ਮੀਨੂ)
-- **Escape**: ਮੋਡਲ, ਡ੍ਰਾਪਡਾਊਨ ਬੰਦ ਕਰੋ ਜਾਂ ਕਾਰਵਾਈ ਰੱਦ ਕਰੋ
+- **Arrow keys**: ਕੰਪੋਨੈਂਟ ਗਰੁੱਪਾਂ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰੋ (ਰੇਡੀਓ ਬਟਨ, ਮੀਨੂ)
+- **Escape**: ਮੋਡਲ, ਡ੍ਰਾਪਡਾਊਨ ਬੰਦ ਕਰੋ ਜਾਂ ਓਪਰੇਸ਼ਨ ਰੱਦ ਕਰੋ
 
-### ਫੋਕਸ ਪ੍ਰਬੰਧਨ ਦੀਆਂ ਸ੍ਰੇਸ਼ਠ ਪ੍ਰਥਾਵਾਂ
+### ਫੋਕਸ ਮੈਨੇਜਮੈਂਟ ਦੇ ਸ੍ਰੇਸ਼ਠ ਤਰੀਕੇ
 
-**ਦ੍ਰਿਸ਼ਮਾਨ ਫੋਕਸ ਸੰਕੇਤ:**
+**ਦ੍ਰਿਸ਼ਮਾਨ ਫੋਕਸ ਇੰਡਿਕੇਟਰ:**
 ```css
 /* Ensure focus is always visible */
 button:focus-visible {
@@ -576,7 +799,7 @@ button:focus-visible {
 }
 ```
 
-**ਸੁਚਾਰੂ ਨੇਵੀਗੇਸ਼ਨ ਲਈ ਸਕਿਪ ਲਿੰਕਸ:**
+**ਸੁਚਾਰੂ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਸਕਿਪ ਲਿੰਕਸ:**
 ```html
 <a href="#main-content" class="skip-link">Skip to main content</a>
 <a href="#navigation" class="skip-link">Skip to navigation</a>
@@ -589,7 +812,7 @@ button:focus-visible {
 </main>
 ```
 
-**ਸਹੀ ਟੈਬ ਕ੍ਰਮ:**
+**ਸਹੀ ਟੈਬ ਆਰਡਰ:**
 ```html
 <!-- Use semantic HTML for natural tab order -->
 <form>
@@ -605,7 +828,7 @@ button:focus-visible {
 
 ### ਮੋਡਲ ਵਿੱਚ ਫੋਕਸ ਟ੍ਰੈਪਿੰਗ
 
-ਜਦੋਂ ਮੋਡਲ ਡਾਇਲਾਗ ਖੋਲ੍ਹਦੇ ਹੋ, ਫੋਕਸ ਮੋਡਲ ਵਿੱਚ ਹੀ ਟ੍ਰੈਪ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ:
+ਜਦੋਂ ਮੋਡਲ ਡਾਇਲਾਗ ਖੁਲ੍ਹਦੇ ਹਨ, ਫੋਕਸ ਮੋਡਲ ਵਿੱਚ ਹੀ ਟ੍ਰੈਪ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ:
 
 ```javascript
 // Modern focus trap implementation
@@ -638,15 +861,15 @@ function trapFocus(element) {
 }
 ```
 
-✅ **ਕੀਬੋਰਡ ਨੇਵੀਗੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ**: ਸਿਰਫ਼ Tab ਕੁੰਜੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਨੂੰ ਨੇਵੀਗੇਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਕੀ ਤੁਸੀਂ ਸਾਰੇ ਇੰਟਰੈਕਟਿਵ ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹੋ? ਕੀ ਫੋਕਸ ਕ੍ਰਮ ਤਰਕਸੰਗਤ ਹੈ? ਕੀ ਫੋਕਸ ਸੰਕੇਤ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦਿਖਾਈ ਦੇ ਰਹੇ ਹਨ?
+✅ **ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਟੈਸਟ ਕਰੋ**: ਸਿਰਫ਼ Tab ਕੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਨੂੰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਕੀ ਤੁਸੀਂ ਸਾਰੇ ਇੰਟਰਐਕਟਿਵ ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹੋ? ਕੀ ਫੋਕਸ ਆਰਡਰ ਤਰਕਸੰਗਤ ਹੈ? ਕੀ ਫੋਕਸ ਇੰਡਿਕੇਟਰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦਿਖਾਈ ਦੇ ਰਹੇ ਹਨ?
 
-## ਫਾਰਮ ਦੀ ਸਹਾਇਕ ਪਹੁੰਚ
+## ਫਾਰਮ ਐਕਸੈਸਬਿਲਿਟੀ
 
-ਫਾਰਮ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹਨ ਅਤੇ ਸਹਾਇਕ ਪਹੁੰਚ ਲਈ ਵਿਸ਼ੇਸ਼ ਧਿਆਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
+ਫਾਰਮ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹਨ ਅਤੇ ਐਕਸੈਸਬਿਲਿਟੀ ਲਈ ਵਿਸ਼ੇਸ਼ ਧਿਆਨ ਦੀ ਲੋੜ ਹੈ।
 
 ### ਲੇਬਲ ਅਤੇ ਫਾਰਮ ਕੰਟਰੋਲ ਸੰਬੰਧ
 
-**ਹਰ ਫਾਰਮ ਕੰਟਰੋਲ ਲਈ ਇੱਕ ਲੇਬਲ ਦੀ ਲੋੜ ਹੈ:**
+**ਹਰ ਫਾਰਮ ਕੰਟਰੋਲ ਨੂੰ ਇੱਕ ਲੇਬਲ ਦੀ ਲੋੜ ਹੈ:**
 ```html
 <!-- Explicit labeling (preferred) -->
 <label for="username">Username:</label>
@@ -662,9 +885,9 @@ function trapFocus(element) {
 <input type="search" aria-label="Search products" placeholder="Search...">
 ```
 
-### ਗਲਤੀ ਸੰਭਾਲ ਅਤੇ ਵੈਰੀਫਿਕੇਸ਼ਨ
+### ਗਲਤੀ ਸੰਭਾਲ ਅਤੇ ਵੈਲੀਡੇਸ਼ਨ
 
-**ਸਹਾਇਕ ਗਲਤੀ ਸੁਨੇਹੇ:**
+**ਐਕਸੈਸਬਲ ਗਲਤੀ ਸੁਨੇਹੇ:**
 ```html
 <label for="email">Email Address:</label>
 <input type="email" id="email" name="email" 
@@ -675,15 +898,15 @@ function trapFocus(element) {
 </div>
 ```
 
-**ਫਾਰਮ ਵੈਰੀਫਿਕੇਸ਼ਨ ਦੀਆਂ ਸ੍ਰੇਸ਼ਠ ਪ੍ਰਥਾਵਾਂ:**
+**ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ ਦੇ ਸ੍ਰੇਸ਼ਠ ਤਰੀਕੇ:**
 - ਗਲਤ ਫੀਲਡਾਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ `aria-invalid` ਦੀ ਵਰਤੋਂ ਕਰੋ
 - ਸਪਸ਼ਟ, ਵਿਸ਼ੇਸ਼ ਗਲਤੀ ਸੁਨੇਹੇ ਪ੍ਰਦਾਨ ਕਰੋ
-- ਮਹੱਤਵਪੂਰਨ ਗਲਤੀ ਘੋਸ਼ਣਾਂ ਲਈ `role="alert"` ਦੀ ਵਰਤੋਂ ਕਰੋ
+- ਮਹੱਤਵਪੂਰਨ ਗਲਤੀ ਐਲਾਨਾਂ ਲਈ `role="alert"` ਦੀ ਵਰਤੋਂ ਕਰੋ
 - ਗਲਤੀਆਂ ਤੁਰੰਤ ਅਤੇ ਫਾਰਮ ਸਬਮਿਸ਼ਨ 'ਤੇ ਦਿਖਾਓ
 
 ### ਫੀਲਡਸੈਟਸ ਅਤੇ ਗਰੁੱਪਿੰਗ
 
-**ਸੰਬੰਧਿਤ ਫਾਰਮ ਕੰਟਰੋਲਾਂ ਨੂੰ ਗਰੁੱਪ ਕਰੋ:**
+**ਸੰਬੰਧਿਤ ਫਾਰਮ ਕੰਟਰੋਲ ਨੂੰ ਗਰੁੱਪ ਕਰੋ:**
 ```html
 <fieldset>
   <legend>Shipping Address</legend>
@@ -704,52 +927,67 @@ function trapFocus(element) {
 </fieldset>
 ```
 
-## ਤੁਹਾਡਾ ਸਹਾਇਕ ਪਹੁੰਚ ਯਾਤਰਾ: ਮੁੱਖ ਸਿੱਖਿਆ
+## ਤੁਹਾਡਾ ਐਕਸੈਸਬਿਲਿਟੀ ਯਾਤਰਾ: ਮੁੱਖ ਸਿੱਖਿਆ
 
-ਵਧਾਈ! ਤੁਸੀਂ ਸੱਚਮੁੱਚ ਸਮਾਵੇਸ਼ੀਕ ਵੈੱਬ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਮੂਲ ਜ਼ਰੂਰੀ ਗਿਆਨ ਪ੍ਰਾਪਤ ਕਰ ਲਿਆ ਹੈ। ਇਹ ਕਾਫ਼ੀ ਰੋਮਾਂਚਕ ਚੀਜ਼ ਹੈ! ਵੈੱਬ ਸਹਾਇਕ ਪਹੁੰਚ ਸਿਰਫ਼ ਅਨੁਕੂਲਤਾ ਬਾਕਸਾਂ ਨੂੰ ਚੈੱਕ ਕਰਨ ਬਾਰੇ ਨਹੀਂ ਹੈ—ਇਹ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨੂੰ ਪਛਾਣਨ ਬਾਰੇ ਹੈ ਜਿਨ੍ਹਾਂ ਨਾਲ ਲੋਕ ਡਿਜ਼ੀਟਲ ਸਮੱਗਰੀ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਦੇ ਹਨ ਅਤੇ ਉਸ ਸ਼ਾਨਦਾਰ ਜਟਿਲਤਾ ਲਈ ਡਿਜ਼ਾਈਨ ਬਣਾਉਣ ਬਾਰੇ ਹੈ।
+ਵਧਾਈਆਂ! ਤੁਸੀਂ ਸੱਚਮੁੱਚ ਸਮਾਵੇਸ਼ੀ ਵੈੱਬ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਮੂਲ ਜ਼ਰੂਰੀ ਗਿਆਨ ਪ੍ਰਾਪਤ ਕਰ ਲਿਆ ਹੈ। ਇਹ ਕਾਫ਼ੀ ਰੋਮਾਂਚਕ ਚੀਜ਼ ਹੈ! ਵੈੱਬ ਐਕਸੈਸਬਿਲਿਟੀ ਸਿਰਫ਼ ਅਨੁਕੂਲਤਾ ਬਾਕਸਾਂ ਨੂੰ ਚੈੱਕ ਕਰਨ ਬਾਰੇ ਨਹੀਂ ਹੈ—ਇਹ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨੂੰ ਪਛਾਣਨ ਬਾਰੇ ਹੈ ਜਿਨ੍ਹਾਂ ਨਾਲ ਲੋਕ ਡਿਜ਼ੀਟਲ ਸਮੱਗਰੀ ਨਾਲ ਇੰਟਰਐਕਟ ਕਰਦੇ ਹਨ ਅਤੇ ਉਸ ਸ਼ਾਨਦਾਰ ਜਟਿਲਤਾ ਲਈ ਡਿਜ਼ਾਈਨ ਕਰਨ ਬਾਰੇ ਹੈ।
 
-ਤੁਸੀਂ ਹੁਣ ਵਿਕਾਸਕਾਰਾਂ ਦੀ ਇੱਕ ਵਧ ਰਹੀ ਕਮਿਊਨਿਟੀ ਦਾ ਹਿੱਸਾ ਹੋ ਜੋ ਸਮਝਦੀ ਹੈ ਕਿ ਵਧੀਆ ਡਿਜ਼ਾਈਨ ਹਰ ਕਿਸੇ ਲਈ ਕੰਮ ਕਰਦੀ ਹੈ। ਕਲੱਬ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ!
+ਤੁਸੀਂ ਹੁਣ ਵਿਕਾਸਕਾਰਾਂ ਦੀ ਇੱਕ ਵਧ ਰਹੀ ਕਮਿਊਨਿਟੀ ਦਾ ਹਿੱਸਾ ਹੋ ਜੋ ਸਮਝਦੇ ਹਨ ਕਿ ਵਧੀਆ ਡਿਜ਼ਾਈਨ ਹਰ ਕਿਸੇ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ। ਕਲੱਬ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ!
 
-**🎯 ਤੁਹਾਡਾ ਸਹਾਇਕ ਪਹੁੰਚ ਟੂਲਕਿਟ ਹੁਣ ਸ਼ਾਮਲ ਹੈ:**
+**🎯 ਤੁਹਾਡਾ ਐਕਸੈਸਬਿਲਿਟੀ ਟੂਲਕਿਟ ਹੁਣ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ:**
 
 | ਮੁੱਖ ਸਿਧਾਂਤ | ਲਾਗੂ | ਪ੍ਰਭਾਵ |
 |----------------|----------------|---------|
-| **ਸੈਮਾਂਟਿਕ HTML ਬੁਨਿਆਦ** | HTML ਤੱਤਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਇਰਾਦੇ ਦੇ ਉਦੇਸ਼ ਲਈ ਵਰਤੋ | ਸਕ੍ਰੀਨ ਰੀਡਰ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਨੇਵੀਗੇਟ ਕਰ ਸਕਦੇ ਹਨ, ਕੀਬੋਰਡ ਸਵੈਚਾਲਿਤ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ |
-| **ਸਮਾਵੇਸ਼ੀਕ ਦ੍ਰਿਸ਼ਮਾਨ ਡਿਜ਼ਾਈਨ** | ਯਥਾਥ ਸੰਤੁਲਨ, ਅਰਥਪੂਰਨ ਰੰਗ ਦੀ ਵਰਤੋਂ, ਦ੍ਰਿਸ਼ਮਾਨ ਫੋਕਸ ਸੰਕੇਤ | ਹਰ ਕਿਸੇ ਲਈ ਸਪਸ਼ਟ, ਕਿਸੇ ਵੀ ਰੋਸ਼ਨੀ ਦੀ ਸਥਿਤੀ ਵਿੱਚ |
-| **ਵਰਣਨਾਤਮਕ ਸਮੱਗਰੀ** | ਅਰਥਪੂਰਨ ਲਿੰਕ ਟੈਕਸਟ, alt ਟੈਕਸਟ, ਹੈਡਿੰਗ | ਉਪਭੋਗਤਾ ਦ੍ਰਿਸ਼ਮਾਨ ਸੰਦਰਭ ਤੋਂ ਬਿਨਾਂ ਸਮੱਗਰੀ ਨੂੰ ਸਮਝਦੇ ਹਨ |
-| **ਕੀਬੋਰਡ ਸਹਾਇਕ ਪਹੁੰਚ** | ਟੈਬ ਕ੍ਰਮ, ਕੀਬੋਰਡ ਸ਼ਾਰਟਕਟ, ਫੋਕਸ ਪ੍ਰਬੰਧਨ | ਮੋਟਰ ਸਹਾਇਕ ਪਹੁੰਚ ਅਤੇ ਪਾਵਰ ਉਪਭੋਗਤਾ ਕੁਸ਼ਲਤਾ |
-| **ARIA ਵਧਾਈ** | ਸੈਮਾਂਟਿਕ ਖਾਲੀਆਂ ਨੂੰ ਭਰਨ ਲਈ ਰਣਨੀਤਿਕ ਵਰਤੋਂ | ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ |
-| **ਵਿਆਪਕ ਟੈਸਟਿੰਗ** | ਸਵੈਚਾਲਿਤ ਟੂਲ + ਮੈਨੂਅਲ ਵੈਰੀਫਿਕੇਸ਼ਨ + ਅਸਲੀ ਉਪਭੋਗਤਾ ਟੈਸਟਿੰਗ | ਗਲਤੀਆਂ ਨੂੰ ਉਪਭੋਗਤਾਵਾਂ 'ਤੇ ਪ੍ਰਭਾਵ ਪੈਣ ਤੋਂ ਪਹਿਲਾਂ ਪਕੜੋ |
+| **ਸੈਮੈਂਟਿਕ HTML ਫਾਊਂਡੇਸ਼ਨ** | HTML ਤੱਤਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਉਦੇਸ਼ ਲਈ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਵਰਤੋ | ਸਕ੍ਰੀਨ ਰੀਡਰਜ਼ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਨੈਵੀਗੇਟ ਕਰ ਸਕਦੇ ਹਨ, ਕੀਬੋਰਡ ਸਵੈਚਾਲਕ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ |
+| **ਸਮਾਵੇਸ਼ੀ ਦ੍ਰਿਸ਼ਮਾਨ ਡਿਜ਼ਾਈਨ** | ਯਥਾਥ ਸੰਤੁਲਨ, ਅਰਥਪੂਰਨ ਰੰਗ ਦੀ ਵਰਤੋਂ, ਦ੍ਰਿਸ਼ਮਾਨ ਫੋਕਸ ਇੰਡਿਕੇਟਰ | ਕਿਸੇ ਵੀ ਰੌਸ਼ਨੀ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਹਰ ਕਿਸੇ ਲਈ ਸਪਸ਼ਟ |
+| **ਵਰਣਨਾਤਮਕ ਸਮੱਗਰੀ** | ਅਰਥਪੂਰਨ ਲਿੰਕ ਟੈਕਸਟ, alt ਟੈਕਸਟ, ਹੈਡਿੰਗ | ਯੂਜ਼ਰ ਦ੍ਰਿਸ਼ਮਾਨ ਸੰਦਰਭ ਤੋਂ ਬਿਨਾਂ ਸਮੱਗਰੀ ਨੂੰ ਸਮਝਦੇ ਹਨ |
+| **ਕੀਬੋਰਡ ਐਕਸੈਸਬਿਲਿਟੀ** | ਟੈਬ ਆਰਡਰ, ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟ, ਫੋਕਸ ਮੈਨੇਜਮੈਂਟ | ਮੋਟਰ ਐਕਸੈਸਬਿਲਿਟੀ ਅਤੇ ਪਾਵਰ ਯੂਜ਼ਰ ਕੁਸ਼ਲਤਾ |
+| **ARIA ਸੁਧਾਰ** | ਸੈਮੈਂਟਿਕ ਖਾਮੀਆਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਰਣਨੀਤਿਕ ਵਰਤੋਂ | ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ |
+| **ਵਿਆਪਕ ਟੈਸਟਿੰਗ** | ਆਟੋਮੈਟਿਕ ਟੂਲ + ਮੈਨੂਅਲ ਵੈਰੀਫਿਕੇਸ਼ਨ + ਅਸਲੀ ਯੂਜ਼ਰ ਟੈਸਟਿੰਗ | ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਯੂਜ਼ਰਾਂ 'ਤੇ ਪ੍ਰਭਾਵ ਪੈਣ ਤੋਂ ਪਹਿਲਾਂ ਪਕੜੋ |
 
 **🚀 ਤੁਹਾਡੇ ਅਗਲੇ ਕਦਮ:**
 
-1. **ਆਪਣੇ ਵਰਕਫਲੋ ਵਿੱਚ ਸਹਾਇਕ ਪਹੁੰਚ ਬਣਾਓ**: ਟੈਸਟਿੰਗ ਨੂੰ ਆਪਣੇ ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਦਾ ਕੁਦਰਤੀ ਹਿੱਸਾ ਬਣਾਓ
-2. **ਅਸਲੀ ਉਪਭੋਗਤਾਵਾਂ ਤੋਂ ਸਿੱਖੋ**: ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਲੋਕਾਂ ਤੋਂ ਫੀਡਬੈਕ ਲਵੋ
-3. **ਮੌਜੂਦਾ ਰਹੋ**: ਸਹਾਇਕ ਪਹੁੰਚ ਤਕਨੀਕਾਂ ਨਵੀਆਂ ਤਕਨਾਲੋਜੀਆਂ ਅਤੇ ਮਿਆਰਾਂ ਨਾਲ ਵਿਕਸਿਤ ਹੁੰਦੀਆਂ ਹਨ
-4. **ਸਮਾਵੇਸ਼ਤਾ ਲਈ ਵਕੀਲ ਬਣੋ**: ਆਪਣਾ ਗਿਆਨ ਸਾਂਝਾ ਕਰੋ ਅਤੇ ਸਹਾਇਕ ਪਹੁੰਚ ਨੂੰ ਟੀਮ ਦੀ ਪ੍ਰਾਥਮਿਕਤਾ ਬਣਾਓ
-
-> 💡 **ਯਾਦ ਰੱਖੋ**: ਸਹਾਇਕ ਪਹੁੰਚ ਦੀਆਂ ਪਾਬੰਦੀਆਂ ਅਕਸਰ ਨਵਾਂਵਾਂ, ਸੁੰਦਰ ਹੱਲ ਲਿਆਉਂਦੀਆਂ ਹਨ ਜੋ ਹਰ ਕਿਸੇ ਲਈ ਫਾਇਦੇਮੰਦ ਹੁੰਦੀਆਂ ਹਨ। ਕਰਬ ਕਟਸ, ਕੈਪਸ਼ਨ, ਅਤੇ ਵਾਇਸ ਕੰਟਰੋਲ ਸਾਰੇ ਸਹਾਇਕ ਪਹੁੰਚ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਜੋਂ ਸ਼ੁਰੂ ਹੋਏ ਅਤੇ ਮੁੱਖ ਧਾਰਾ ਸੁਧਾਰ ਬਣ ਗਏ।
+1. **ਆਪਣੇ ਵਰਕਫਲੋ ਵਿੱਚ ਐਕਸੈਸਬਿਲਿਟੀ ਬਣਾਓ**: ਟੈਸਟਿੰਗ ਨੂੰ ਆਪਣੇ ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਦਾ ਕੁਦਰਤੀ ਹਿੱ
+- [ ] 5 ਵੱਖ-ਵੱਖ ਜਟਿਲ ਵੈਬਸਾਈਟਾਂ 'ਤੇ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਦੀ ਪ੍ਰੈਕਟਿਸ ਕਰੋ  
+- [ ] ਸਹੀ ਲੇਬਲ, ਗਲਤੀ ਸੰਭਾਲ ਅਤੇ ARIA ਦੇ ਨਾਲ ਇੱਕ ਸਧਾਰਨ ਫਾਰਮ ਬਣਾਓ  
+- [ ] ਇੱਕ ਐਕਸੇਸਿਬਿਲਿਟੀ ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ (A11y Slack, WebAIM ਫੋਰਮ)  
+- [ ] ਅਸਲ ਵਿਅਕਤੀ ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਪਾਹਜਤਾ ਹੈ, ਉਹ ਵੈਬਸਾਈਟਾਂ 'ਤੇ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਦੇਖੋ (YouTube 'ਤੇ ਵਧੀਆ ਉਦਾਹਰਨ ਹਨ)  
 
-**ਵਪਾਰਕ ਮਾਮਲਾ ਬਿਲਕੁਲ ਸਪਸ਼ਟ ਹੈ**: ਸਹਾਇਕ ਪਹੁੰਚ ਵਾਲੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਵਧੇਰੇ ਉਪਭੋਗਤਾਵਾਂ ਤੱਕ ਪਹੁੰਚਦੀ ਹਨ, ਸੇਰਚ ਇੰਜਨਾਂ ਵਿੱਚ ਬਿਹਤਰ ਰੈਂਕ ਕਰਦੀਆਂ ਹਨ, ਘੱਟ ਰੱਖ-ਰਖਾਵ ਦੀ ਲਾਗਤ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਕਾਨੂੰਨੀ ਖਤਰੇ ਤੋਂ ਬਚਦੀ ਹਨ। ਪਰ ਸੱਚਮੁੱਚ? ਸਹਾਇਕ ਪਹੁੰਚ ਦੀ ਚਿੰਤਾ ਕਰਨ ਦਾ ਅਸਲੀ ਕਾਰਨ ਇਸ ਤੋਂ ਕਾਫ਼ੀ ਗਹਿਰਾ ਹੈ। ਸਹਾਇਕ ਪਹੁੰਚ ਵਾਲੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਵੈੱਬ ਦੀਆਂ ਸਭ ਤੋਂ ਵਧੀਆ ਮੁੱਲਾਂ ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ—ਖੁੱਲ੍ਹੇਪਣ, ਸਮਾਵੇਸ਼ਤਾ, ਅਤੇ ਇਹ ਵਿਚਾਰ ਕਿ ਹਰ ਕੋਈ ਜਾਣਕਾਰੀ ਤੱਕ ਬਰਾਬਰ ਪਹੁੰਚ ਦਾ ਹੱਕਦਾਰ ਹੈ।
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਬਦਲਾਅ**  
+- [ ] ਆਪਣੇ ਡਿਵੈਲਪਮੈਂਟ ਵਰਕਫਲੋ ਵਿੱਚ ਐਕਸੇਸਿਬਿਲਿਟੀ ਟੈਸਟਿੰਗ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ  
+- [ ] ਇੱਕ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ, ਐਕਸੇਸਿਬਿਲਿਟੀ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਠੀਕ ਕਰਕੇ  
+- [ ] ਕਿਸੇ ਅਜਿਹੇ ਵਿਅਕਤੀ ਨਾਲ ਯੂਜ਼ਬਿਲਿਟੀ ਟੈਸਟਿੰਗ ਕਰੋ ਜੋ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਵਰਤਦਾ ਹੈ  
+- [ ] ਆਪਣੀ ਟੀਮ ਲਈ ਇੱਕ ਐਕਸੇਸਿਬਲ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀ ਬਣਾਓ  
+- [ ] ਆਪਣੇ ਕੰਮ ਕਰਨ ਦੇ ਸਥਾਨ ਜਾਂ ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਐਕਸੇਸਿਬਿਲਿਟੀ ਲਈ ਵਕਾਲਤ ਕਰੋ  
+- [ ] ਕਿਸੇ ਨਵੇਂ ਵਿਅਕਤੀ ਨੂੰ ਐਕਸੇਸਿਬਿਲਿਟੀ ਸੰਕਲਪਾਂ ਬਾਰੇ ਸਿੱਖਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੋ  
 
-ਤੁਸੀਂ ਹੁਣ ਭਵਿੱਖ ਦੇ ਸਮਾਵੇਸ਼ੀਕ ਵੈੱਬ ਨੂੰ ਬਣਾਉਣ ਲਈ ਸਜਜ ਹੋ। ਹਰ ਸਹਾਇਕ ਪਹੁੰਚ ਵਾਲੀ ਸਾਈਟ ਜੋ ਤੁਸੀਂ ਬਣਾਉਂਦੇ ਹੋ, ਇੰਟਰਨੈਟ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਜ਼ਿਆਦਾ ਸੁਹਜ ਸਥਾਨ ਬਣਾਉਂਦੀ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਸੋਚਦੇ ਹੋ, ਤਾਂ ਇਹ ਕਾਫ਼ੀ ਸ਼ਾਨਦਾਰ ਹੈ!
+### 🏆 **ਅੰਤਮ ਐਕਸੇਸਿਬਿਲਿਟੀ ਚੈਂਪੀਅਨ ਚੈੱਕ-ਇਨ**  
 
-## ਵਾਧੂ ਸਰੋਤ
+**ਆਪਣੇ ਐਕਸੇਸਿਬਿਲਿਟੀ ਯਾਤਰਾ ਦਾ ਜਸ਼ਨ ਮਨਾਓ:**  
+- ਵੈਬ ਨੂੰ ਵਰਤਣ ਦੇ ਤਰੀਕੇ ਬਾਰੇ ਸਭ ਤੋਂ ਹੈਰਾਨੀਜਨਕ ਚੀਜ਼ ਕੀ ਸੀ ਜੋ ਤੁਸੀਂ ਸਿੱਖੀ?  
+- ਕਿਹੜਾ ਐਕਸੇਸਿਬਿਲਿਟੀ ਸਿਧਾਂਤ ਤੁਹਾਡੇ ਡਿਵੈਲਪਮੈਂਟ ਸਟਾਈਲ ਨਾਲ ਸਭ ਤੋਂ ਵੱਧ ਮਿਲਦਾ ਹੈ?  
+- ਐਕਸੇਸਿਬਿਲਿਟੀ ਬਾਰੇ ਸਿੱਖਣ ਨਾਲ ਡਿਜ਼ਾਈਨ 'ਤੇ ਤੁਹਾਡਾ ਨਜ਼ਰੀਆ ਕਿਵੇਂ ਬਦਲਿਆ ਹੈ?  
+- ਅਸਲ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਕਰਨ ਲਈ ਪਹਿਲਾ ਐਕਸੇਸਿਬਿਲਿਟੀ ਸੁਧਾਰ ਕੀ ਹੈ ਜੋ ਤੁਸੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?  
 
-ਆਪਣੀ ਸਹਾਇਕ ਪਹੁੰਚ ਸਿੱਖਣ ਦੀ ਯਾਤਰਾ ਨੂੰ ਇਹਨਾਂ ਜ਼ਰੂਰੀ ਸਰੋਤਾਂ ਨਾਲ ਜਾਰੀ ਰੱਖੋ:
-
-**📚 ਅਧਿਕਾਰਕ ਮਿਆਰ ਅਤੇ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼:**
-- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - ਤੇਜ਼ ਸੰਦਰਭ ਨਾਲ ਅਧਿਕਾਰਕ ਸਹਾਇਕ ਪਹੁੰਚ ਮਿਆਰ
-- [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - ਇੰਟਰੈਕਟਿਵ ਵਿਜਟਾਂ ਲਈ ਵਿਸਤ੍ਰਿਤ ਪੈਟਰਨ
-- [WebAIM Guidelines](https://webaim.org/) - ਅਮਲੀ, ਸ਼ੁਰੂਆਤੀ-ਦੋਸਤਾਨਾ ਸਹਾਇਕ ਪਹੁੰਚ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼
-
-**🛠️ ਟੂਲ ਅਤੇ ਟੈਸਟਿੰਗ ਸਰੋਤ:**
-- [axe DevTools](https://www.deque.com/axe/devtools/) - ਉਦਯੋਗ-ਮਿਆਰੀ ਸਹਾਇਕ ਪਹੁੰਚ ਟੈਸਟਿੰਗ
-- [A11y Project Checklist](https://www.a11yproject.com/checklist/) - ਕਦਮ-ਦਰ-ਕਦਮ ਸਹਾਇਕ ਪਹੁੰਚ ਦੀ ਜਾਂਚ
-- [Accessibility Insights](https://accessibilityinsights.io/) - ਮਾਈਕਰੋਸਾਫਟ ਦਾ ਵਿਸਤ੍ਰਿਤ ਟੈਸਟਿੰਗ ਸੂਟ
-- [Color Oracle](https://colororacle.org/) - ਡਿਜ਼ਾਈਨ ਟੈਸਟਿੰਗ ਲਈ
+```mermaid
+journey
+    title Your Accessibility Confidence Evolution
+    section Today
+      Overwhelmed: 3: You
+      Curious: 4: You
+      Motivated: 5: You
+    section This Week
+      Practicing: 4: You
+      Testing: 5: You
+      Understanding: 5: You
+    section Next Month
+      Advocating: 5: You
+      Leading: 5: You
+      Inclusive by Default: 5: You
+```
+  
+> 🌍 **ਤੁਸੀਂ ਹੁਣ ਐਕਸੇਸਿਬਿਲਿਟੀ ਚੈਂਪੀਅਨ ਹੋ!** ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ ਵਧੀਆ ਵੈਬ ਅਨੁਭਵ ਹਰ ਕਿਸੇ ਲਈ ਕੰਮ ਕਰਦੇ ਹਨ, ਚਾਹੇ ਉਹ ਵੈਬ ਨੂੰ ਕਿਵੇਂ ਵੀ ਐਕਸੈਸ ਕਰਦੇ ਹੋਣ। ਹਰ ਐਕਸੇਸਿਬਲ ਫੀਚਰ ਜੋ ਤੁਸੀਂ ਬਣਾਉਂਦੇ ਹੋ, ਇੰਟਰਨੈਟ ਨੂੰ ਹੋਰ ਸਮਾਵੇਸ਼ੀ ਬਣਾਉਂਦਾ ਹੈ। ਵੈਬ ਨੂੰ ਤੁਹਾਡੇ ਵਰਗੇ ਡਿਵੈਲਪਰਾਂ ਦੀ ਲੋੜ ਹੈ ਜੋ ਐਕਸੇਸਿਬਿਲਿਟੀ ਨੂੰ ਰੁਕਾਵਟ ਨਹੀਂ, ਬਲਕਿ ਸਾਰੇ ਯੂਜ਼ਰਾਂ ਲਈ ਵਧੀਆ ਅਨੁਭਵ ਬਣਾਉਣ ਦਾ ਮੌਕਾ ਸਮਝਦੇ ਹਨ। ਇਸ ਮੂਵਮੈਂਟ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ! 🎉  
 
 ---
 
-**ਅਸਵੀਕਰਤੀ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤਾ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/10-ai-framework-project/README.md b/translations/pa/10-ai-framework-project/README.md
index d33026c47d..51bd62a9c0 100644
--- a/translations/pa/10-ai-framework-project/README.md
+++ b/translations/pa/10-ai-framework-project/README.md
@@ -1,33 +1,71 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e2c4ae5688e34b4b8b09d52aec56c79e",
-  "translation_date": "2025-10-22T17:40:50+00:00",
+  "original_hash": "3925b6a1c31c60755eaae4d578232c25",
+  "translation_date": "2025-11-03T16:23:49+00:00",
   "source_file": "10-ai-framework-project/README.md",
   "language_code": "pa"
 }
 -->
 # AI Framework
 
-ਕੀ ਤੁਸੀਂ ਕਦੇ AI ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋਏ ਘਬਰਾਏ ਹੋ? ਤੁਸੀਂ ਇਕੱਲੇ ਨਹੀਂ ਹੋ! AI ਫਰੇਮਵਰਕ ਇੱਕ ਸਵਿਸ ਆਰਮੀ ਚਾਕੂ ਵਾਂਗ ਹਨ ਜੋ AI ਵਿਕਾਸ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸੰਦ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਸਮੇਂ ਅਤੇ ਮਿਹਨਤ ਨੂੰ ਬਚਾਉਂਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਸਮਰੱਥ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ। ਇੱਕ AI ਫਰੇਮਵਰਕ ਨੂੰ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ ਲਾਇਬ੍ਰੇਰੀ ਵਾਂਗ ਸੋਚੋ: ਇਹ ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਬਣੇ ਹਿੱਸੇ, ਮਿਆਰੀਕ੍ਰਿਤ APIs, ਅਤੇ ਸਮਾਰਟ ਅਬਸਟਰੈਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ ਤੁਸੀਂ ਸਮੱਸਿਆਵਾਂ ਹੱਲ ਕਰਨ 'ਤੇ ਧਿਆਨ ਦੇ ਸਕੋ ਬਜਾਏ ਕਿ ਲਾਗੂ ਕਰਨ ਦੇ ਵੇਰਵਿਆਂ ਨਾਲ ਜੂਝਣ ਦੇ।
+ਕੀ ਤੁਸੀਂ ਕਦੇ AI ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋਏ ਘਬਰਾਏ ਹੋ? ਤੁਸੀਂ ਇਕੱਲੇ ਨਹੀਂ ਹੋ! AI ਫਰੇਮਵਰਕ ਇੱਕ ਸਵਿਸ ਆਰਮੀ ਚਾਕੂ ਵਾਂਗ ਹੁੰਦੇ ਹਨ - ਇਹ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਾਧਨ ਹਨ ਜੋ ਸਮਰੱਥ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦੌਰਾਨ ਤੁਹਾਡਾ ਸਮਾਂ ਅਤੇ ਮੁਸ਼ਕਲਾਂ ਬਚਾ ਸਕਦੇ ਹਨ। AI ਫਰੇਮਵਰਕ ਨੂੰ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ ਲਾਇਬ੍ਰੇਰੀ ਵਾਂਗ ਸੋਚੋ: ਇਹ ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਬਣੇ ਕੰਪੋਨੈਂਟ, ਮਿਆਰੀ APIs, ਅਤੇ ਸਮਾਰਟ ਐਬਸਟ੍ਰੈਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ ਤੁਸੀਂ ਅਮਲ ਦੇ ਵੇਰਵਿਆਂ ਨਾਲ ਜੂਝਣ ਦੀ ਬਜਾਏ ਸਮੱਸਿਆਵਾਂ ਹੱਲ ਕਰਨ 'ਤੇ ਧਿਆਨ ਦੇ ਸਕੋ।
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਵੇਖਾਂਗੇ ਕਿ ਕਿਵੇਂ LangChain ਵਰਗੇ ਫਰੇਮਵਰਕ ਪੁਰਾਣੇ ਸਮੇਂ ਦੇ ਜਟਿਲ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਕੰਮਾਂ ਨੂੰ ਸਾਫ਼, ਪੜ੍ਹਨਯੋਗ ਕੋਡ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹਨ। ਤੁਸੀਂ ਇਹ ਜਾਣੋਗੇ ਕਿ ਅਸਲ ਦੁਨੀਆ ਦੀਆਂ ਚੁਣੌਤੀਆਂ ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰਨਾ ਹੈ ਜਿਵੇਂ ਕਿ ਗੱਲਬਾਤਾਂ ਦਾ ਟ੍ਰੈਕ ਰੱਖਣਾ, ਟੂਲ ਕਾਲਿੰਗ ਲਾਗੂ ਕਰਨਾ, ਅਤੇ ਇੱਕ ਇਕੱਠੇ ਇੰਟਰਫੇਸ ਰਾਹੀਂ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਨੂੰ ਸੰਭਾਲਣਾ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਵੇਖਾਂਗੇ ਕਿ ਕਿਵੇਂ LangChain ਵਰਗੇ ਫਰੇਮਵਰਕ ਪੁਰਾਣੇ ਸਮੇਂ ਦੇ ਜਟਿਲ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਕੰਮਾਂ ਨੂੰ ਸਾਫ਼, ਪੜ੍ਹਨਯੋਗ ਕੋਡ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹਨ। ਤੁਸੀਂ ਇਹ ਜਾਣੋਗੇ ਕਿ ਗੱਲਬਾਤਾਂ ਦਾ ਟ੍ਰੈਕ ਰੱਖਣ, ਟੂਲ ਕਾਲਿੰਗ ਲਾਗੂ ਕਰਨ, ਅਤੇ ਇੱਕ ਇਕੱਠੇ ਇੰਟਰਫੇਸ ਰਾਹੀਂ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਨੂੰ ਸੰਭਾਲਣ ਵਰਗੀਆਂ ਅਸਲ ਦੁਨੀਆ ਦੀਆਂ ਚੁਣੌਤੀਆਂ ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰਨਾ ਹੈ।
 
-ਜਦੋਂ ਤੱਕ ਅਸੀਂ ਖਤਮ ਕਰਾਂਗੇ, ਤੁਸੀਂ ਜਾਣੋਗੇ ਕਿ ਕਦੋਂ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ ਬਜਾਏ ਕਿ ਕੱਚੇ API ਕਾਲਾਂ ਦੀ, ਕਿਵੇਂ ਉਨ੍ਹਾਂ ਦੇ ਅਬਸਟਰੈਕਸ਼ਨ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਵਰਤਣਾ ਹੈ, ਅਤੇ ਕਿਵੇਂ ਅਸਲ ਦੁਨੀਆ ਦੇ ਵਰਤੋਂ ਲਈ ਤਿਆਰ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣੇ ਹਨ। ਆਓ ਵੇਖੀਏ ਕਿ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ AI ਫਰੇਮਵਰਕ ਕੀ ਕਰ ਸਕਦੇ ਹਨ।
+ਜਦੋਂ ਤੱਕ ਅਸੀਂ ਪਾਠ ਪੂਰਾ ਕਰਾਂਗੇ, ਤੁਸੀਂ ਜਾਣੋਗੇ ਕਿ ਕਦੋਂ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ APIs ਦੇ ਸਿੱਧੇ ਕਾਲਾਂ ਦੀ ਬਜਾਏ, ਕਿਵੇਂ ਉਨ੍ਹਾਂ ਦੇ ਐਬਸਟ੍ਰੈਕਸ਼ਨ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਵਰਤਣਾ ਹੈ, ਅਤੇ ਕਿਵੇਂ ਅਸਲ ਦੁਨੀਆ ਦੇ ਵਰਤੋਂ ਲਈ ਤਿਆਰ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣੇ ਹਨ। ਆਓ ਵੇਖੀਏ ਕਿ AI ਫਰੇਮਵਰਕ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਕੀ ਕਰ ਸਕਦੇ ਹਨ।
+
+## ⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ
+
+**ਵਿਆਸਤ ਡਿਵੈਲਪਰਾਂ ਲਈ ਤੇਜ਼ ਸ਼ੁਰੂਆਤ ਦਾ ਰਾਹ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Install LangChain]
+    B --> C[Create ChatOpenAI client]
+    C --> D[Send first prompt]
+    D --> E[See framework power]
+```
+
+- **ਪਹਿਲਾ ਮਿੰਟ**: LangChain ਇੰਸਟਾਲ ਕਰੋ: `pip install langchain langchain-openai`
+- **ਦੂਜਾ ਮਿੰਟ**: ਆਪਣਾ GitHub ਟੋਕਨ ਸੈਟ ਕਰੋ ਅਤੇ ChatOpenAI ਕਲਾਇੰਟ ਇੰਪੋਰਟ ਕਰੋ
+- **ਤੀਜਾ ਮਿੰਟ**: ਸਿਸਟਮ ਅਤੇ ਮਨੁੱਖੀ ਸੁਨੇਹਿਆਂ ਨਾਲ ਇੱਕ ਸਧਾਰਨ ਗੱਲਬਾਤ ਬਣਾਓ
+- **ਚੌਥਾ ਮਿੰਟ**: ਇੱਕ ਬੁਨਿਆਦੀ ਟੂਲ (ਜਿਵੇਂ ਕਿ ਇੱਕ add ਫੰਕਸ਼ਨ) ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ AI ਟੂਲ ਕਾਲਿੰਗ ਦੇਖੋ
+- **ਪੰਜਵਾਂ ਮਿੰਟ**: APIs ਦੇ ਸਿੱਧੇ ਕਾਲਾਂ ਅਤੇ ਫਰੇਮਵਰਕ ਐਬਸਟ੍ਰੈਕਸ਼ਨ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਦਾ ਅਨੁਭਵ ਕਰੋ
+
+**ਤੇਜ਼ ਟੈਸਟ ਕੋਡ**:
+```python
+from langchain_openai import ChatOpenAI
+from langchain_core.messages import SystemMessage, HumanMessage
+
+llm = ChatOpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="openai/gpt-4o-mini"
+)
+
+response = llm.invoke([
+    SystemMessage(content="You are a helpful coding assistant"),
+    HumanMessage(content="Explain Python functions briefly")
+])
+print(response.content)
+```
+
+**ਇਸਦਾ ਮਹੱਤਵ ਕਿਉਂ ਹੈ**: 5 ਮਿੰਟਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਅਨੁਭਵ ਕਰੋਗੇ ਕਿ ਕਿਵੇਂ AI ਫਰੇਮਵਰਕ ਜਟਿਲ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਨੂੰ ਸਧਾਰਨ ਵਿਧੀਆਂ ਵਿੱਚ ਬਦਲ ਦਿੰਦੇ ਹਨ। ਇਹ ਉਹ ਬੁਨਿਆਦ ਹੈ ਜੋ ਉਤਪਾਦਨ AI ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਚਲਾਉਂਦੀ ਹੈ।
 
 ## ਫਰੇਮਵਰਕ ਕਿਉਂ ਚੁਣੋ?
 
-ਤੁਸੀਂ AI ਐਪ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ - ਸ਼ਾਨਦਾਰ! ਪਰ ਗੱਲ ਇਹ ਹੈ: ਤੁਹਾਡੇ ਕੋਲ ਕਈ ਵੱਖ-ਵੱਖ ਰਾਹ ਹਨ ਜੋ ਤੁਸੀਂ ਲੈ ਸਕਦੇ ਹੋ, ਅਤੇ ਹਰ ਇੱਕ ਦੇ ਆਪਣੇ ਫਾਇਦੇ ਅਤੇ ਨੁਕਸਾਨ ਹਨ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ ਕਿਤੇ ਜਾਣ ਲਈ ਤੁਰਨਾ, ਸਾਈਕਲ ਚਲਾਉਣਾ ਜਾਂ ਗੱਡੀ ਚਲਾਉਣ ਵਿੱਚ ਚੋਣ ਕਰਨਾ - ਇਹ ਸਾਰੇ ਤੁਹਾਨੂੰ ਉੱਥੇ ਪਹੁੰਚਾ ਦੇਣਗੇ, ਪਰ ਅਨੁਭਵ (ਅਤੇ ਮਿਹਨਤ) ਬਿਲਕੁਲ ਵੱਖਰੇ ਹੋਣਗੇ।
+ਤੁਸੀਂ AI ਐਪ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ - ਸ਼ਾਨਦਾਰ! ਪਰ ਗੱਲ ਇਹ ਹੈ: ਤੁਹਾਡੇ ਕੋਲ ਕਈ ਵੱਖ-ਵੱਖ ਰਾਹ ਹਨ ਜੋ ਤੁਸੀਂ ਲੈ ਸਕਦੇ ਹੋ, ਅਤੇ ਹਰ ਇੱਕ ਦੇ ਆਪਣੇ ਫਾਇਦੇ ਅਤੇ ਨੁਕਸਾਨ ਹਨ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ ਕਿਤੇ ਜਾਣ ਲਈ ਤੁਰਨਾ, ਸਾਈਕਲ ਚਲਾਉਣਾ ਜਾਂ ਗੱਡੀ ਚਲਾਉਣ ਵਿੱਚ ਚੋਣ ਕਰਨੀ - ਇਹ ਸਾਰੇ ਤੁਹਾਨੂੰ ਮੰਜ਼ਿਲ ਤੱਕ ਪਹੁੰਚਾ ਦੇਣਗੇ, ਪਰ ਅਨੁਭਵ (ਅਤੇ ਯਤਨ) ਬਿਲਕੁਲ ਵੱਖਰੇ ਹੋਣਗੇ।
 
-ਆਓ ਤਿੰਨ ਮੁੱਖ ਤਰੀਕਿਆਂ ਨੂੰ ਤੋੜ ਕੇ ਵੇਖੀਏ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ AI ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ:
+ਆਓ ਤਿੰਨ ਮੁੱਖ ਤਰੀਕੇ ਵੇਖੀਏ ਜਿਨ੍ਹਾਂ ਨਾਲ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ AI ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ:
 
 | ਤਰੀਕਾ | ਫਾਇਦੇ | ਸਭ ਤੋਂ ਵਧੀਆ | ਵਿਚਾਰ |
 |----------|------------|----------|--------------|
-| **Direct HTTP Requests** | ਪੂਰਾ ਕੰਟਰੋਲ, ਕੋਈ ਡਿਪੈਂਡੈਂਸੀ ਨਹੀਂ | ਸਧਾਰਨ ਪੁੱਛਗਿੱਛ, ਮੂਲ ਸਿੱਖਣਾ | ਵਧੇਰੇ verbose ਕੋਡ, ਮੈਨੂਅਲ error handling |
-| **SDK Integration** | ਘੱਟ boilerplate, ਮਾਡਲ-ਵਿਸ਼ੇਸ਼ ਅਨੁਕੂਲਤਾ | ਇੱਕ-ਮਾਡਲ ਐਪਲੀਕੇਸ਼ਨ | ਨਿਰਧਾਰਤ ਪ੍ਰਦਾਤਾਵਾਂ ਤੱਕ ਸੀਮਿਤ |
-| **AI Frameworks** | ਇਕੱਠੇ API, ਬਣੇ-ਬਨਾਏ abstraction | ਬਹੁ-ਮਾਡਲ ਐਪਸ, ਜਟਿਲ workflows | ਸਿੱਖਣ ਦੀ ਲਹਿਰ, ਸੰਭਾਵਿਤ over-abstraction |
+| **Direct HTTP Requests** | ਪੂਰਾ ਕੰਟਰੋਲ, ਕੋਈ dependencies ਨਹੀਂ | ਸਧਾਰਨ ਪੁੱਛਗਿੱਛ, ਬੁਨਿਆਦੀਆਂ ਸਿੱਖਣਾ | ਵਧੇਰੇ verbose ਕੋਡ, ਮੈਨੂਅਲ error handling |
+| **SDK Integration** | ਘੱਟ boilerplate, ਮਾਡਲ-ਵਿਸ਼ੇਸ਼ optimizations | ਇੱਕ ਮਾਡਲ ਐਪਲੀਕੇਸ਼ਨ | ਨਿਰਧਾਰਤ ਪ੍ਰਦਾਤਾ ਤੱਕ ਸੀਮਿਤ |
+| **AI Frameworks** | ਇਕੱਠੇ API, ਬਣੇ-ਬਨਾਏ abstractions | ਬਹੁ-ਮਾਡਲ ਐਪਸ, ਜਟਿਲ workflows | ਸਿੱਖਣ ਦਾ curve, ਸੰਭਾਵਿਤ over-abstraction |
 
-### ਫਰੇਮਵਰਕ ਦੇ ਅਸਲ ਫਾਇਦੇ
+### ਫਰੇਮਵਰਕ ਦੇ ਫਾਇਦੇ ਅਮਲ ਵਿੱਚ
 
 ```mermaid
 graph TD
@@ -45,31 +83,109 @@ graph TD
 ```
 
 **ਫਰੇਮਵਰਕ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹਨ:**
-- **ਇਕੱਠੇ** ਵੱਖ-ਵੱਖ AI ਪ੍ਰਦਾਤਾਵਾਂ ਨੂੰ ਇੱਕ ਇੰਟਰਫੇਸ ਹੇਠ
-- **ਸੰਭਾਲਦੇ** ਹਨ ਗੱਲਬਾਤ ਦੀ ਯਾਦਸ਼ਕਤੀ ਨੂੰ ਆਪਣੇ ਆਪ
-- **ਪ੍ਰਦਾਨ ਕਰਦੇ** ਹਨ ਆਮ ਕੰਮਾਂ ਲਈ ਬਣੇ-ਬਨਾਏ ਸੰਦ ਜਿਵੇਂ ਕਿ embeddings ਅਤੇ function calling
-- **ਮੈਨੇਜ** ਕਰਦੇ ਹਨ error handling ਅਤੇ retry logic
-- **ਜਟਿਲ workflows** ਨੂੰ ਪੜ੍ਹਨਯੋਗ method calls ਵਿੱਚ ਬਦਲਦੇ ਹਨ
+- **ਇਕੱਠੇ** ਵੱਖ-ਵੱਖ AI ਪ੍ਰਦਾਤਾ ਇੱਕ ਇੰਟਰਫੇਸ ਹੇਠ
+- **ਸਵੈ-ਚਾਲਤ** ਗੱਲਬਾਤ ਮੈਮੋਰੀ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ
+- **ਤਿਆਰ-ਕੀਤੇ** ਸਾਧਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਿਵੇਂ embeddings ਅਤੇ function calling
+- **error handling** ਅਤੇ retry logic ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ
+- **ਜਟਿਲ workflows** ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਵਿਧੀਆਂ ਵਿੱਚ ਬਦਲਦਾ ਹੈ
+
+> 💡 **Pro Tip**: ਜਦੋਂ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਦੇ ਵਿਚਕਾਰ ਸਵਿੱਚ ਕਰਨਾ ਜਾਂ agents, memory, ਜਾਂ tool calling ਵਰਗੇ ਜਟਿਲ ਫੀਚਰ ਬਣਾਉਣਾ ਹੋਵੇ ਤਾਂ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਬੁਨਿਆਦੀਆਂ ਸਿੱਖਣ ਜਾਂ ਸਧਾਰਨ, ਕੇਂਦਰਿਤ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦੌਰਾਨ ਸਿੱਧੇ APIs ਨਾਲ ਚਿਪਕੋ।
+
+**ਸਾਰ**: ਜਿਵੇਂ ਕਿ ਇੱਕ ਕਾਰੀਗਰ ਦੇ ਵਿਸ਼ੇਸ਼ ਸਾਧਨ ਅਤੇ ਇੱਕ ਪੂਰੀ workshop ਦੇ ਵਿਚਕਾਰ ਚੋਣ ਕਰਨੀ, ਇਹ ਕੰਮ ਦੇ ਨਾਲ ਸਾਧਨ ਨੂੰ ਮਿਲਾਉਣ ਬਾਰੇ ਹੈ। ਜਟਿਲ, ਫੀਚਰ-ਭਰਪੂਰ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਫਰੇਮਵਰਕ ਸ਼ਾਨਦਾਰ ਹਨ, ਜਦੋਂ ਕਿ ਸਿੱਧੇ APIs ਸਧਾਰਨ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਲਈ ਚੰਗੇ ਹਨ।
 
-> 💡 **Pro Tip**: ਜਦੋਂ ਤੁਸੀਂ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਦੇ ਵਿਚਕਾਰ ਸਵਿੱਚ ਕਰ ਰਹੇ ਹੋ ਜਾਂ agents, memory, ਜਾਂ tool calling ਵਰਗੇ ਜਟਿਲ ਫੀਚਰ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਸਧਾਰਨ, ਫੋਕਸਡ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਜਾਂ ਮੂਲ ਸਿੱਖਣ ਦੌਰਾਨ ਸਿੱਧੇ APIs ਨਾਲ ਚਿਪਕੋ।
+## 🗺️ AI Framework Mastery ਰਾਹੀਂ ਤੁਹਾਡਾ ਸਿੱਖਣ ਦਾ ਸਫਰ
 
-**ਨਤੀਜਾ**: ਜਿਵੇਂ ਕਿ ਇੱਕ craftsman ਦੇ ਵਿਸ਼ੇਸ਼ ਸੰਦਾਂ ਅਤੇ ਇੱਕ ਪੂਰੇ workshop ਵਿੱਚ ਚੋਣ ਕਰਨ ਵਿੱਚ, ਇਹ ਕੰਮ ਦੇ ਹਿਸਾਬ ਨਾਲ ਸੰਦ ਨੂੰ ਮਿਲਾਉਣ ਬਾਰੇ ਹੈ। ਜਟਿਲ, ਫੀਚਰ-ਰਿਚ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਫਰੇਮਵਰਕ ਸ਼ਾਨਦਾਰ ਹਨ, ਜਦਕਿ ਸਧਾਰਨ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਲਈ ਸਿੱਧੇ APIs ਚੰਗੇ ਕੰਮ ਕਰਦੇ ਹਨ।
+```mermaid
+journey
+    title From Raw APIs to Production AI Applications
+    section Framework Foundations
+      Understand abstraction benefits: 4: You
+      Master LangChain basics: 6: You
+      Compare approaches: 7: You
+    section Conversation Systems
+      Build chat interfaces: 5: You
+      Implement memory patterns: 7: You
+      Handle streaming responses: 8: You
+    section Advanced Features
+      Create custom tools: 6: You
+      Master structured output: 8: You
+      Build document systems: 8: You
+    section Production Applications
+      Combine all features: 7: You
+      Handle error scenarios: 8: You
+      Deploy complete systems: 9: You
+```
 
-## ਪਰਿਚਯ
+**ਤੁਹਾਡਾ ਸਫਰ ਦਾ ਮੰਜ਼ਿਲ**: ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ AI ਫਰੇਮਵਰਕ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਮਾਹਰ ਹੋ ਜਾਵੋਗੇ ਅਤੇ ਉੱਚ-ਤਕਨੀਕੀ, ਉਤਪਾਦਨ-ਤਿਆਰ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋਵੋਗੇ ਜੋ ਵਪਾਰਕ AI ਸਹਾਇਕਾਂ ਦਾ ਮੁਕਾਬਲਾ ਕਰ ਸਕਦੇ ਹਨ।
+
+## ਪੇਸ਼ਕਸ਼
 
 ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਸਿੱਖਾਂਗੇ:
 
 - ਇੱਕ ਆਮ AI ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਨਾ।
-- ਆਮ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨਾ ਜਿਵੇਂ ਕਿ ਗੱਲਬਾਤਾਂ, ਸੰਦ ਦੀ ਵਰਤੋਂ, ਯਾਦਸ਼ਕਤੀ ਅਤੇ ਸੰਦਰਭ।
+- ਗੱਲਬਾਤਾਂ, ਟੂਲ ਦੀ ਵਰਤੋਂ, ਮੈਮੋਰੀ ਅਤੇ ਸੰਦਰਭ ਵਰਗੀਆਂ ਆਮ ਸਮੱਸਿਆਵਾਂ ਦਾ ਹੱਲ ਕਰਨਾ।
 - ਇਸਨੂੰ ਵਰਤ ਕੇ AI ਐਪਸ ਬਣਾਉਣਾ।
 
+## 🧠 AI Framework Development Ecosystem
+
+```mermaid
+mindmap
+  root((AI Frameworks))
+    Abstraction Benefits
+      Code Simplification
+        Unified APIs
+        Built-in Error Handling
+        Consistent Patterns
+        Reduced Boilerplate
+      Multi-Model Support
+        Provider Agnostic
+        Easy Switching
+        Fallback Options
+        Cost Optimization
+    Core Components
+      Conversation Management
+        Message Types
+        Memory Systems
+        Context Tracking
+        History Persistence
+      Tool Integration
+        Function Calling
+        API Connections
+        Custom Tools
+        Workflow Automation
+    Advanced Features
+      Structured Output
+        Pydantic Models
+        JSON Schemas
+        Type Safety
+        Validation Rules
+      Document Processing
+        Embeddings
+        Vector Stores
+        Similarity Search
+        RAG Systems
+    Production Patterns
+      Application Architecture
+        Modular Design
+        Error Boundaries
+        Async Operations
+        State Management
+      Deployment Strategies
+        Scalability
+        Monitoring
+        Performance
+        Security
+```
+
+**ਮੁੱਖ ਸਿਧਾਂਤ**: AI ਫਰੇਮਵਰਕ ਜਟਿਲਤਾ ਨੂੰ ਐਬਸਟ੍ਰੈਕਟ ਕਰਦੇ ਹਨ ਜਦੋਂ ਕਿ ਗੱਲਬਾਤ ਪ੍ਰਬੰਧਨ, ਟੂਲ ਇੰਟੀਗ੍ਰੇਸ਼ਨ, ਅਤੇ ਦਸਤਾਵੇਜ਼ ਪ੍ਰੋਸੈਸਿੰਗ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ abstractions ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਸਾਫ਼, ਸੰਭਾਲਣਯੋਗ ਕੋਡ ਨਾਲ ਉੱਚ-ਤਕਨੀਕੀ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਯੋਗ ਬਣਾਉਂਦੇ ਹਨ।
+
 ## ਤੁਹਾਡਾ ਪਹਿਲਾ AI ਪ੍ਰੋਮਪਟ
 
-ਆਓ ਮੂਲ ਤੱਤਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ ਅਤੇ ਆਪਣਾ ਪਹਿਲਾ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਈਏ ਜੋ ਇੱਕ ਸਵਾਲ ਭੇਜਦਾ ਹੈ ਅਤੇ ਵਾਪਸ ਜਵਾਬ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਜਿਵੇਂ ਕਿ ਆਰਕੀਮੀਡਸ ਨੇ ਆਪਣੇ ਸਨਾਨ ਵਿੱਚ displacement ਦੇ ਸਿਧਾਂਤ ਦੀ ਖੋਜ ਕੀਤੀ, ਕਈ ਵਾਰ ਸਭ ਤੋਂ ਸਧਾਰਨ ਅਵਲੋਕਨ ਸਭ ਤੋਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅੰਦਰੂਨੀ ਜਾਣਕਾਰੀ ਵੱਲ ਲੈ ਜਾਂਦੇ ਹਨ - ਅਤੇ ਫਰੇਮਵਰਕ ਇਹ ਅੰਦਰੂਨੀ ਜਾਣਕਾਰੀ ਸੌਖੇ ਤਰੀਕੇ ਨਾਲ ਪਹੁੰਚਯੋਗ ਬਣਾਉਂਦੇ ਹਨ।
+ਆਓ ਬੁਨਿਆਦੀਆਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ ਅਤੇ ਆਪਣਾ ਪਹਿਲਾ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਈਏ ਜੋ ਇੱਕ ਸਵਾਲ ਭੇਜਦਾ ਹੈ ਅਤੇ ਇੱਕ ਜਵਾਬ ਵਾਪਸ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਜਿਵੇਂ ਕਿ ਆਰਕੀਮੀਡਸ ਨੇ ਆਪਣੇ ਸਨਾਨ ਵਿੱਚ displacement ਦੇ ਸਿਧਾਂਤ ਦੀ ਖੋਜ ਕੀਤੀ, ਕਈ ਵਾਰ ਸਭ ਤੋਂ ਸਧਾਰਨ ਅਵਲੋਕਨ ਸਭ ਤੋਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅੰਤਰਦ੍ਰਿਸ਼ਟੀ ਦੀ ਅਗਵਾਈ ਕਰਦੇ ਹਨ - ਅਤੇ ਫਰੇਮਵਰਕ ਇਹ ਅੰਤਰਦ੍ਰਿਸ਼ਟੀ ਸੌਖੇ ਬਣਾਉਂਦੇ ਹਨ।
 
-### LangChain ਨੂੰ GitHub ਮਾਡਲਾਂ ਨਾਲ ਸੈਟਅੱਪ ਕਰਨਾ
+### LangChain ਨੂੰ GitHub ਮਾਡਲਾਂ ਨਾਲ ਸੈਟ ਕਰਨਾ
 
-ਅਸੀਂ LangChain ਦੀ ਵਰਤੋਂ ਕਰਕੇ GitHub ਮਾਡਲਾਂ ਨਾਲ ਜੁੜਨ ਜਾ ਰਹੇ ਹਾਂ, ਜੋ ਕਾਫ਼ੀ ਵਧੀਆ ਹੈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਤੱਕ ਮੁਫ਼ਤ ਪਹੁੰਚ ਦਿੰਦਾ ਹੈ। ਸਭ ਤੋਂ ਵਧੀਆ ਗੱਲ? ਤੁਹਾਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਿਰਫ ਕੁਝ ਸਧਾਰਨ configuration parameters ਦੀ ਲੋੜ ਹੈ:
+ਅਸੀਂ LangChain ਦੀ ਵਰਤੋਂ GitHub ਮਾਡਲਾਂ ਨਾਲ ਜੁੜਨ ਲਈ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ, ਜੋ ਕਾਫ਼ੀ ਵਧੀਆ ਹੈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਤੱਕ ਮੁਫ਼ਤ ਪਹੁੰਚ ਦਿੰਦਾ ਹੈ। ਸਭ ਤੋਂ ਵਧੀਆ ਗੱਲ? ਤੁਹਾਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਿਰਫ ਕੁਝ ਸਧਾਰਨ configuration ਪੈਰਾਮੀਟਰਾਂ ਦੀ ਲੋੜ ਹੈ:
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -87,15 +203,15 @@ print(response.content)
 ```
 
 **ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- **ਬਣਾਉਂਦਾ ਹੈ** ਇੱਕ LangChain client `ChatOpenAI` ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ - ਇਹ ਤੁਹਾਡਾ AI ਲਈ gateway ਹੈ!
-- **ਕਨਫਿਗਰ ਕਰਦਾ ਹੈ** GitHub ਮਾਡਲਾਂ ਨਾਲ ਕਨੈਕਸ਼ਨ ਤੁਹਾਡੇ authentication token ਨਾਲ
-- **ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ** ਕਿ ਕਿਹੜਾ AI ਮਾਡਲ ਵਰਤਣਾ ਹੈ (`gpt-4o-mini`) - ਇਸਨੂੰ ਤੁਹਾਡੇ AI ਸਹਾਇਕ ਦੀ ਚੋਣ ਵਾਂਗ ਸੋਚੋ
-- **ਭੇਜਦਾ ਹੈ** ਤੁਹਾਡਾ ਸਵਾਲ `invoke()` ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ - ਇੱਥੇ ਜਾਦੂ ਹੁੰਦਾ ਹੈ
-- **ਨਿਕਾਲਦਾ ਹੈ** ਅਤੇ ਜਵਾਬ ਦਿਖਾਉਂਦਾ ਹੈ - ਅਤੇ voilà, ਤੁਸੀਂ AI ਨਾਲ ਗੱਲਬਾਤ ਕਰ ਰਹੇ ਹੋ!
+- **LangChain ਕਲਾਇੰਟ ਬਣਾਉਂਦਾ ਹੈ** `ChatOpenAI` ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ - ਇਹ ਤੁਹਾਡਾ AI ਲਈ ਗੇਟਵੇ ਹੈ!
+- **GitHub ਮਾਡਲਾਂ ਨਾਲ ਕਨੈਕਸ਼ਨ ਨੂੰ configure ਕਰਦਾ ਹੈ** ਤੁਹਾਡੇ authentication ਟੋਕਨ ਨਾਲ
+- **ਕਿਹੜਾ AI ਮਾਡਲ ਵਰਤਣਾ ਹੈ** (`gpt-4o-mini`) ਨੂੰ specify ਕਰਦਾ ਹੈ - ਇਸਨੂੰ ਆਪਣਾ AI ਸਹਾਇਕ ਚੁਣਨ ਵਾਂਗ ਸੋਚੋ
+- **ਤੁਹਾਡਾ ਸਵਾਲ ਭੇਜਦਾ ਹੈ** `invoke()` ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ - ਇੱਥੇ ਜਾਦੂ ਹੁੰਦਾ ਹੈ
+- **ਜਵਾਬ ਨੂੰ extract ਕਰਦਾ ਹੈ ਅਤੇ ਦਿਖਾਉਂਦਾ ਹੈ** - ਅਤੇ voilà, ਤੁਸੀਂ AI ਨਾਲ ਗੱਲਬਾਤ ਕਰ ਰਹੇ ਹੋ!
 
-> 🔧 **ਸੈਟਅੱਪ ਨੋਟ**: ਜੇ ਤੁਸੀਂ GitHub Codespaces ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਲਈ ਖੁਸ਼ਖਬਰੀ ਹੈ - `GITHUB_TOKEN` ਪਹਿਲਾਂ ਹੀ ਸੈਟਅੱਪ ਕੀਤਾ ਗਿਆ ਹੈ! ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰ ਰਹੇ ਹੋ? ਕੋਈ ਚਿੰਤਾ ਨਹੀਂ, ਤੁਹਾਨੂੰ ਸਿਰਫ ਸਹੀ permissions ਨਾਲ ਇੱਕ personal access token ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੋਵੇਗੀ।
+> 🔧 **Setup Note**: ਜੇ ਤੁਸੀਂ GitHub Codespaces ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਲਈ ਖੁਸ਼ਖਬਰੀ ਹੈ - `GITHUB_TOKEN` ਪਹਿਲਾਂ ਹੀ ਸੈਟ ਹੈ! ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰ ਰਹੇ ਹੋ? ਕੋਈ ਗੱਲ ਨਹੀਂ, ਤੁਹਾਨੂੰ ਸਿਰਫ ਸਹੀ permissions ਨਾਲ ਇੱਕ personal access token ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ।
 
-**ਅਨੁਮਾਨਿਤ ਨਤੀਜਾ:**
+**ਉਮੀਦਵਾਰ ਨਤੀਜਾ:**
 ```text
 The capital of France is Paris.
 ```
@@ -117,23 +233,23 @@ sequenceDiagram
 
 ## ਗੱਲਬਾਤੀ AI ਬਣਾਉਣਾ
 
-ਪਹਿਲਾ ਉਦਾਹਰਣ ਮੂਲ ਤੱਤਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਪਰ ਇਹ ਸਿਰਫ ਇੱਕ ਸਿੰਗਲ ਐਕਸਚੇਂਜ ਹੈ - ਤੁਸੀਂ ਸਵਾਲ ਪੁੱਛਦੇ ਹੋ, ਜਵਾਬ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ, ਅਤੇ ਇਹ ਖਤਮ। ਅਸਲ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ, ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡਾ AI ਇਹ ਯਾਦ ਰੱਖੇ ਕਿ ਤੁਸੀਂ ਕੀ ਚਰਚਾ ਕਰ ਰਹੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਵਾਟਸਨ ਅਤੇ ਹੋਮਜ਼ ਨੇ ਸਮੇਂ ਦੇ ਨਾਲ ਆਪਣੇ ਜਾਂਚ ਪੜਤਾਲ ਦੀਆਂ ਗੱਲਬਾਤਾਂ ਬਣਾਈਆਂ।
+ਪਹਿਲੇ ਉਦਾਹਰਨ ਨੇ ਬੁਨਿਆਦੀਆਂ ਨੂੰ ਦਰਸਾਇਆ, ਪਰ ਇਹ ਸਿਰਫ ਇੱਕ ਸਿੰਗਲ ਐਕਸਚੇਂਜ ਹੈ - ਤੁਸੀਂ ਸਵਾਲ ਪੁੱਛਦੇ ਹੋ, ਜਵਾਬ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ, ਅਤੇ ਇਹ ਖਤਮ। ਅਸਲ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ, ਤੁਸੀਂ ਚਾਹੋਗੇ ਕਿ ਤੁਹਾਡਾ AI ਇਹ ਯਾਦ ਰੱਖੇ ਕਿ ਤੁਸੀਂ ਕੀ ਚਰਚਾ ਕਰ ਰਹੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਵਾਟਸਨ ਅਤੇ ਹੋਮਜ਼ ਨੇ ਆਪਣੇ ਜਾਂਚ ਪੜਤਾਲੀ ਗੱਲਬਾਤਾਂ ਨੂੰ ਸਮੇਂ ਦੇ ਨਾਲ ਬਣਾਇਆ।
 
-ਇੱਥੇ LangChain ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਸਾਬਤ ਹੁੰਦਾ ਹੈ। ਇਹ ਵੱਖ-ਵੱਖ message types ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਗੱਲਬਾਤਾਂ ਨੂੰ structure ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਨੂੰ ਆਪਣੇ AI ਨੂੰ ਇੱਕ ਵਿਅਕਤੀਤਾ ਦੇਣ ਦਿੰਦੇ ਹਨ। ਤੁਸੀਂ ਗੱਲਬਾਤ ਦੇ ਅਨੁਭਵ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ ਜੋ ਸੰਦਰਭ ਅਤੇ ਵਿਅਕਤੀਤਾ ਨੂੰ ਬਣਾਈ ਰੱਖਦੇ ਹਨ।
+ਇੱਥੇ LangChain ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਬਣਦਾ ਹੈ। ਇਹ ਵੱਖ-ਵੱਖ ਸੁਨੇਹਾ ਕਿਸਮਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਗੱਲਬਾਤਾਂ ਨੂੰ structure ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਨੂੰ ਆਪਣੇ AI ਨੂੰ ਇੱਕ ਵਿਅਕਤੀਤਾ ਦੇਣ ਦਿੰਦੇ ਹਨ। ਤੁਸੀਂ ਗੱਲਬਾਤ ਦੇ ਅਨੁਭਵ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ ਜੋ ਸੰਦਰਭ ਅਤੇ ਵਿਅਕਤੀਤਾ ਨੂੰ ਬਣਾਈ ਰੱਖਦੇ ਹਨ।
 
-### Message Types ਨੂੰ ਸਮਝਣਾ
+### ਸੁਨੇਹਾ ਕਿਸਮਾਂ ਨੂੰ ਸਮਝਣਾ
 
-ਇਨ੍ਹਾਂ message types ਨੂੰ ਗੱਲਬਾਤ ਵਿੱਚ ਭਾਗੀਦਾਰਾਂ ਦੁਆਰਾ ਪਹਿਨੇ ਗਏ ਵੱਖ-ਵੱਖ "ਟੋਪੀਆਂ" ਵਾਂਗ ਸੋਚੋ। LangChain ਵੱਖ-ਵੱਖ message classes ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ ਇਹ ਟ੍ਰੈਕ ਕਰ ਸਕੇ ਕਿ ਕੌਣ ਕੀ ਕਹਿ ਰਿਹਾ ਹੈ:
+ਇਨ੍ਹਾਂ ਸੁਨੇਹਾ ਕਿਸਮਾਂ ਨੂੰ ਗੱਲਬਾਤ ਵਿੱਚ ਭਾਗੀਦਾਰਾਂ ਦੁਆਰਾ ਪਹਿਨੇ "ਟੋਪੀਆਂ" ਵਾਂਗ ਸੋਚੋ। LangChain ਵੱਖ-ਵੱਖ ਸੁਨੇਹਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਇਹ ਟ੍ਰੈਕ ਕਰਨ ਲਈ ਕਿ ਕੌਣ ਕੀ ਕਹਿ ਰਿਹਾ ਹੈ:
 
-| Message Type | ਉਦੇਸ਼ | ਉਦਾਹਰਣ ਵਰਤੋਂ |
+| ਸੁਨੇਹਾ ਕਿਸਮ | ਉਦੇਸ਼ | ਉਦਾਹਰਨ ਵਰਤੋਂ |
 |--------------|---------|------------------|
-| `SystemMessage` | AI ਦੀ ਵਿਅਕਤੀਤਾ ਅਤੇ ਵਿਵਹਾਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ | "ਤੁਸੀਂ ਇੱਕ ਮਦਦਗਾਰ ਕੋਡਿੰਗ ਸਹਾਇਕ ਹੋ" |
+| `SystemMessage` | AI ਦੀ ਵਿਅਕਤੀਤਾ ਅਤੇ ਵਿਹਾਰ ਨੂੰ define ਕਰਦਾ ਹੈ | "ਤੁਸੀਂ ਇੱਕ ਮਦਦਗਾਰ ਕੋਡਿੰਗ ਸਹਾਇਕ ਹੋ" |
 | `HumanMessage` | ਯੂਜ਼ਰ ਇਨਪੁਟ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ | "ਫੰਕਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਇਹ ਸਮਝਾਓ" |
 | `AIMessage` | AI ਦੇ ਜਵਾਬਾਂ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ | ਗੱਲਬਾਤ ਵਿੱਚ ਪਿਛਲੇ AI ਜਵਾਬ |
 
 ### ਆਪਣੀ ਪਹਿਲੀ ਗੱਲਬਾਤ ਬਣਾਉਣਾ
 
-ਆਓ ਇੱਕ ਗੱਲਬਾਤ ਬਣਾਈਏ ਜਿੱਥੇ ਸਾਡਾ AI ਇੱਕ ਵਿਸ਼ੇਸ਼ ਭੂਮਿਕਾ ਅਪਣਾਉਂਦਾ ਹੈ। ਅਸੀਂ ਇਸਨੂੰ ਕੈਪਟਨ ਪਿਕਾਰਡ ਦਾ ਰੂਪ ਦੇਵਾਂਗੇ - ਇੱਕ ਪਾਤਰ ਜੋ ਆਪਣੀ ਕੂਟਨੀਤਿਕ ਸਿਆਣਪ ਅਤੇ ਨੇਤ੍ਰਿਤਵ ਲਈ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ:
+ਆਓ ਇੱਕ ਗੱਲਬਾਤ ਬਣਾਈਏ ਜਿੱਥੇ ਸਾਡਾ AI ਇੱਕ ਖਾਸ ਭੂਮਿਕਾ ਅਪਣਾਉਂਦਾ ਹੈ। ਅਸੀਂ ਇਸਨੂੰ ਕੈਪਟਨ ਪਿਕਾਰਡ ਦਾ ਰੂਪ ਦੇਵਾਂਗੇ - ਇੱਕ ਪਾਤਰ ਜੋ ਆਪਣੇ ਕੂਟਨੀਤਿਕ ਗਿਆਨ ਅਤੇ ਨੇਤ੍ਰਿਤਵ ਲਈ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ:
 
 ```python
 messages = [
@@ -142,12 +258,12 @@ messages = [
 ]
 ```
 
-**ਇਸ ਗੱਲਬਾਤ ਸੈਟਅੱਪ ਨੂੰ ਤੋੜ ਕੇ ਵੇਖਣਾ:**
-- **ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** AI ਦੀ ਭੂਮਿਕਾ ਅਤੇ ਵਿਅਕਤੀਤਾ `SystemMessage` ਰਾਹੀਂ
-- **ਪਹਿਲਾ ਯੂਜ਼ਰ ਸਵਾਲ** `HumanMessage` ਰਾਹੀਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
-- **ਬਣਾਉਂਦਾ ਹੈ** ਬਹੁ-ਟਰਨ ਗੱਲਬਾਤ ਲਈ ਇੱਕ ਮੂਲ
+**ਇਸ ਗੱਲਬਾਤ ਸੈਟਅਪ ਨੂੰ ਤੋੜਨਾ:**
+- **AI ਦੀ ਭੂਮਿਕਾ ਅਤੇ ਵਿਅਕਤੀਤਾ ਨੂੰ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** `SystemMessage` ਰਾਹੀਂ
+- **ਮਨੁੱਖੀ ਸੁਨੇਹਾ ਰਾਹੀਂ ਸ਼ੁਰੂਆਤੀ ਯੂਜ਼ਰ ਪੁੱਛਗਿੱਛ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
+- **ਬਹੁ-ਮੁੜ ਗੱਲਬਾਤ ਲਈ ਇੱਕ ਬੁਨਿਆਦ ਬਣਾਉਂਦਾ ਹੈ**
 
-ਇਸ ਉਦਾਹਰਣ ਲਈ ਪੂਰਾ ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ:
+ਇਸ ਉਦਾਹਰਨ ਲਈ ਪੂਰਾ ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -171,7 +287,7 @@ response  = llm.invoke(messages)
 print(response.content)
 ```
 
-ਤੁਹਾਨੂੰ ਇਸ ਦੇ ਨਾਲ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਨਤੀਜਾ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ:
+ਤੁਹਾਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਨਤੀਜਾ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ:
 
 ```text
 I am Captain Jean-Luc Picard, the commanding officer of the USS Enterprise (NCC-1701-D), a starship in the United Federation of Planets. My primary mission is to explore new worlds, seek out new life and new civilizations, and boldly go where no one has gone before. 
@@ -181,7 +297,7 @@ I believe in the importance of diplomacy, reason, and the pursuit of knowledge.
 I hold the ideals of the Federation close to my heart, believing in the importance of cooperation, understanding, and respect for all sentient beings. My experiences have shaped my leadership style, and I strive to be a thoughtful and just captain. How may I assist you further?
 ```
 
-ਗੱਲਬਾਤ ਦੀ continuity ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ (ਹਰ ਵਾਰ ਸੰਦਰਭ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਦੀ ਬਜਾਏ), ਤੁਹਾਨੂੰ ਆਪਣੇ message list ਵਿੱਚ ਜਵਾਬਾਂ ਨੂੰ ਜੋੜਦੇ ਰਹਿਣਾ ਪਵੇਗਾ। ਜਿਵੇਂ ਕਿ ਮੌਖਿਕ ਪਰੰਪਰਾਵਾਂ ਕਈ ਪੀੜ੍ਹੀਆਂ ਵਿੱਚ ਕਹਾਣੀਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਦੀਆਂ ਹਨ, ਇਹ ਪਹੁੰਚ ਲੰਬੀ ਯਾਦਸ਼ਕਤੀ ਬਣਾਉਂਦੀ ਹੈ:
+ਗੱਲਬਾਤ ਦੀ continuity ਬਣਾਈ ਰੱਖਣ ਲਈ (ਹਰ ਵਾਰ ਸੰਦਰਭ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਦੀ ਬਜਾਏ), ਤੁਹਾਨੂੰ ਆਪਣੇ ਸੁਨੇਹਾ ਸੂਚੀ ਵਿੱਚ ਜਵਾਬ ਸ਼ਾਮਲ ਕਰਦੇ ਰਹਿਣਾ ਪਵੇਗਾ। ਜਿਵੇਂ ਕਿ ਮੌਖਿਕ ਪਰੰਪਰਾਵਾਂ ਨੇ ਕਹਾਣੀਆਂ ਨੂੰ ਪੀੜੀਆਂ ਦੇ ਪਾਰ ਸੁਰੱਖਿਅਤ ਕੀਤਾ, ਇਹ ਪਹੁੰਚ ਲੰਬੇ ਸਮੇਂ ਦੀ ਮੈਮੋਰੀ ਬਣਾਉਂਦੀ ਹੈ:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -216,9 +332,9 @@ print(response.content)
 
 ```
 
-ਕਾਫ਼ੀ ਵਧੀਆ, ਹੈ ਨਾ? ਇੱਥੇ ਜੋ ਹੋ ਰਿਹਾ ਹੈ ਉਹ ਇਹ ਹੈ ਕਿ ਅਸੀਂ LLM ਨੂੰ ਦੋ ਵਾਰ ਕਾਲ ਕਰ ਰਹੇ ਹਾਂ - ਪਹਿਲਾਂ ਸਿਰਫ਼ ਆਪਣੇ ਸ਼ੁਰੂਆਤੀ ਦੋ messages ਨਾਲ, ਪਰ ਫਿਰ ਦੁਬਾਰਾ ਪੂਰੀ ਗੱਲਬਾਤ ਦੇ ਇਤਿਹਾਸ ਨਾਲ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ AI ਸੱਚਮੁੱਚ ਸਾਡੇ ਚੈਟ ਨੂੰ ਫਾਲੋ ਕਰ ਰਿਹਾ ਹੈ!
+ਕਾਫ਼ੀ ਵਧੀਆ, ਹੈ ਨਾ? ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ ਕਿ ਅਸੀਂ LLM ਨੂੰ ਦੋ ਵਾਰ ਕਾਲ ਕਰ ਰਹੇ ਹਾਂ - ਪਹਿਲਾਂ ਸਿਰਫ ਆਪਣੇ ਸ਼ੁਰੂਆਤੀ ਦੋ ਸੁਨੇਹਿਆਂ ਨਾਲ, ਪਰ ਫਿਰ ਪੂਰੀ ਗੱਲਬਾਤ ਦੇ ਇਤਿਹਾਸ ਨਾਲ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ AI ਸੱਚਮੁੱਚ ਸਾਡੇ ਚੈਟ ਦੇ ਨਾਲ ਚੱਲ ਰਿਹਾ ਹੈ!
 
-ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਕੋਡ ਚਲਾਉਂਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਦੂਜਾ ਜਵਾਬ ਮਿਲੇਗਾ ਜੋ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਲੱਗਦਾ ਹੈ:
+ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਕੋਡ ਚਲਾਉਂਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਇੱਕ ਦੂਜਾ ਜਵਾਬ ਮਿਲੇਗਾ ਜੋ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਲੱਗਦਾ ਹੈ:
 
 ```text
 Welcome aboard, Chris! It's always a pleasure to meet those who share a passion for exploration and discovery. While I cannot formally offer you a position on the Enterprise right now, I encourage you to pursue your aspirations. We are always in need of talented individuals with diverse skills and backgrounds. 
@@ -226,11 +342,35 @@ Welcome aboard, Chris! It's always a pleasure to meet those who share a passion
 If you are interested in space exploration, consider education and training in the sciences, engineering, or diplomacy. The values of curiosity, resilience, and teamwork are crucial in Starfleet. Should you ever find yourself on a starship, remember to uphold the principles of the Federation: peace, understanding, and respect for all beings. Your journey can lead you to remarkable adventures, whether in the stars or on the ground. Engage!
 ```
 
-ਇਸਨੂੰ ਸ਼ਾਇਦ ਇੱਕ "ਹਾਂ" ਮੰਨ ਲਵਾਂਗਾ ;)
+```mermaid
+sequenceDiagram
+    participant User
+    participant App
+    participant LangChain
+    participant AI
+    
+    User->>App: "Tell me about you"
+    App->>LangChain: [SystemMessage, HumanMessage]
+    LangChain->>AI: Formatted conversation
+    AI->>LangChain: Captain Picard response
+    LangChain->>App: AIMessage object
+    App->>User: Display response
+    
+    Note over App: Add AIMessage to conversation
+    
+    User->>App: "Can I join your crew?"
+    App->>LangChain: [SystemMessage, HumanMessage, AIMessage, HumanMessage]
+    LangChain->>AI: Full conversation context
+    AI->>LangChain: Contextual response
+    LangChain->>App: New AIMessage
+    App->>User: Display contextual response
+```
+
+ਮੈਂ ਇਸਨੂੰ "ਸ਼ਾਇਦ" ਵਜੋਂ ਲਵਾਂਗਾ ;)
 
-## Streaming Responses
+## Streaming ਜਵਾਬ
 
-ਕੀ ਤੁਸੀਂ ਕਦੇ ਧਿਆਨ ਦਿੱਤਾ ਹੈ ਕਿ ChatGPT ਆਪਣੇ ਜਵਾਬ "ਟਾਈਪ" ਕਰਦਾ ਹੈ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ? ਇਹ streaming ਦੀ ਕਾਰਵਾਈ ਹੈ। ਜਿਵੇਂ ਕਿ ਇੱਕ ਮਾਹਰ ਕਲਿਗ੍ਰਾਫਰ ਕੰਮ ਕਰਦਾ ਹੈ - ਅੱਖਰਾਂ ਨੂੰ ਇੱਕ-ਇੱਕ ਕਰਕੇ ਬਣਦੇ ਹੋਏ ਦੇਖਣਾ ਬਜਾਏ ਕਿ ਉਹ ਤੁਰੰਤ ਪ੍ਰਗਟ ਹੁੰਦੇ ਹਨ - streaming ਅੰਤਰਕ੍ਰਿਆ ਨੂੰ ਜ਼ਿਆਦਾ ਕੁਦਰਤੀ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਤੁਰੰਤ feedback ਦਿੰਦਾ ਹੈ।
+ਕੀ ਤੁਸੀਂ ਕਦੇ ਧਿਆਨ ਦਿੱਤਾ ਕਿ ChatGPT ਆਪਣੇ ਜਵਾਬ "ਟਾਈਪ" ਕਰਦਾ ਹੈ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ? ਇਹ streaming ਦੀ ਕਾਰਵਾਈ ਹੈ। ਜਿਵੇਂ ਕਿ ਇੱਕ ਨਿਪੁਣ ਕਲਿਗ੍ਰਾਫਰ ਨੂੰ ਕੰਮ ਕਰਦੇ ਦੇਖਣਾ - ਅੱਖਰਾਂ ਨੂੰ ਇੱਕ-ਇੱਕ ਕਰਕੇ ਉਭਰਦੇ ਦੇਖਣਾ ਬਜਾਏ ਕਿ ਉਹ ਤੁਰੰਤ ਹੀ ਪ੍ਰਗਟ ਹੋਣ - streaming ਅੰਤਰਕਿਰਿਆ ਨੂੰ ਕੁਦਰਤੀ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦੀ ਹੈ ਅਤੇ ਤੁਰੰਤ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ।
 
 ### LangChain ਨਾਲ Streaming ਲਾਗੂ ਕਰਨਾ
 
@@ -251,128 +391,389 @@ for chunk in llm.stream("Write a short story about a robot learning to code"):
 ```
 
 **Streaming ਕਿਉਂ ਸ਼ਾਨਦਾਰ ਹੈ:**
-- **ਦਿਖਾਉਂਦਾ ਹੈ** ਸਮੱਗਰੀ ਜਦੋਂ ਇਹ ਬਣਾਈ ਜਾ ਰਹੀ ਹੈ - ਹੋਰ awkward ਇੰਤਜ਼ਾਰ ਨਹੀਂ!
-- **ਯੂਜ਼ਰ ਨੂੰ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦਾ ਹੈ** ਕਿ ਕੁਝ ਸੱਚਮੁੱਚ ਹੋ ਰਿਹਾ ਹੈ
-- **ਤੇਜ਼ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ**, ਭਾਵੇਂ ਇਹ ਤਕਨੀਕੀ ਤੌਰ 'ਤੇ ਨਹੀਂ ਹੈ
-- **ਯੂਜ਼ਰ ਨੂੰ** ਪੜ੍ਹਨ ਦੀ ਸ਼ੁਰੂਆਤ ਕਰਨ ਦਿੰਦਾ ਹੈ ਜਦੋਂ AI "ਸੋਚ" ਰਿਹਾ ਹੁੰਦਾ ਹੈ
+- **ਸਮੱਗਰੀ ਦਿਖਾਉਂਦੀ ਹੈ** ਜਦੋਂ ਇਹ ਬਣਾਈ ਜਾ ਰਹੀ ਹੁੰਦੀ ਹੈ - ਕੋਈ ਹੋਰ ਅਜੀਬ ਉਡੀਕ ਨਹੀਂ!
+- **ਯੂਜ਼ਰਾਂ ਨੂੰ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦੀ ਹੈ** ਕਿ ਕੁਝ ਵਾਸਤਵ ਵਿੱਚ ਹੋ ਰਿਹਾ ਹੈ
+- **ਤੇਜ਼ ਮਹਿਸੂਸ ਹੁੰਦੀ ਹੈ**, ਭਾਵੇਂ ਇਹ ਤਕਨੀਕੀ ਤੌਰ 'ਤੇ ਨਾ ਹੋਵੇ
+- **ਯੂਜ਼ਰਾਂ ਨੂੰ ਪੜ੍ਹਨਾ ਸ਼ੁਰੂ ਕਰਨ ਦਿੰਦੀ ਹੈ** ਜਦੋਂ AI "ਸੋਚ" ਰਿਹਾ ਹੁੰਦਾ ਹੈ
 
-> 💡 **User Experience Tip**: Streaming ਵੱਡੇ ਜਵਾਬਾਂ ਜਿਵੇਂ ਕਿ ਕੋਡ ਦੀ ਵਿਆਖਿਆ, ਰਚਨਾਤਮਕ ਲਿਖਤ, ਜਾਂ ਵਿਸਤ੍ਰਿਤ ਟਿਊਟੋਰਿਅਲ ਦੇਣ ਦੇ ਸਮੇਂ ਬਹੁਤ ਚਮਕਦਾ ਹੈ। ਤੁਹਾਡੇ ਯੂਜ਼ਰ progress ਦੇਖਣ ਨੂੰ ਪਸੰਦ ਕਰਨਗੇ ਬਜਾਏ ਕਿ ਖਾਲੀ ਸਕ੍ਰੀਨ ਨੂੰ ਤੱਕਣ ਦੇ!
+> 💡 **User Experience Tip**
+ਸੰਖਿਆਵਾਂ ਜੋੜਨਾ ਸੰਕਲਪ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਪਰ ਅਸਲ ਟੂਲ ਆਮ ਤੌਰ 'ਤੇ ਹੋਰ ਜਟਿਲ ਕਾਰਵਾਈਆਂ ਕਰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਵੈੱਬ API ਨੂੰ ਕਾਲ ਕਰਨਾ। ਆਓ ਆਪਣੇ ਉਦਾਹਰਨ ਨੂੰ ਵਧਾਉਣ ਲਈ AI ਨੂੰ ਇੰਟਰਨੈਟ ਤੋਂ ਸਮੱਗਰੀ ਲੈਣ ਲਈ ਕਹੀਏ - ਜਿਵੇਂ ਕਿ ਟੈਲੀਗ੍ਰਾਫ ਓਪਰੇਟਰ ਦੂਰ-ਦੂਰ ਦੇ ਸਥਾਨਾਂ ਨੂੰ ਜੋੜਦੇ ਸਨ:
 
-## Prompt Templates
+```python
+class joke(TypedDict):
+    """Tell a joke."""
+
+    # Annotations must have the type and can optionally include a default value and description (in that order).
+    category: Annotated[str, ..., "The joke category"]
+
+def get_joke(category: str) -> str:
+    response = requests.get(f"https://api.chucknorris.io/jokes/random?category={category}", headers={"Accept": "application/json"})
+    if response.status_code == 200:
+        return response.json().get("value", f"Here's a {category} joke!")
+    return f"Here's a {category} joke!"
+
+functions = {
+    "add": lambda a, b: a + b,
+    "joke": lambda category: get_joke(category)
+}
+
+query = "Tell me a joke about animals"
+
+# the rest of the code is the same
+```
+
+ਹੁਣ ਜੇ ਤੁਸੀਂ ਇਹ ਕੋਡ ਚਲਾਉਂਦੇ ਹੋ ਤਾਂ ਤੁਹਾਨੂੰ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਜਵਾਬ ਮਿਲੇਗਾ:
 
-Prompt templates ਕਲਾਸਿਕ oratory ਵਿੱਚ ਵਰਤੇ ਜਾਣ ਵਾਲੇ rhetorical structures ਵਾਂਗ ਕੰਮ ਕਰਦੇ ਹਨ - ਸੋਚੋ ਕਿ ਕਿਵੇਂ Cicero ਆਪਣੇ ਭਾਸ਼ਣ ਦੇ ਪੈਟਰਨ ਨੂੰ ਵੱਖ-ਵੱਖ ਦਰਸ਼ਕਾਂ ਲਈ ਅਨੁਕੂਲ ਕਰਦਾ ਸੀ ਜਦੋਂ ਕਿ ਇੱਕੋ persuasive framework ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਸੀ। ਇਹ ਤੁਹਾਨੂੰ reusable prompts ਬਣਾਉਣ ਦਿੰਦੇ ਹਨ ਜਿੱਥੇ ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਜਾਣਕਾਰੀ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ ਬਿਨਾਂ ਸਾਰਾ ਕੁਝ ਮੁੜ ਲਿਖਣ ਦੇ। ਇੱਕ ਵਾਰ ਤੁਸੀਂ template ਸੈਟਅੱਪ ਕਰ ਲੈਂਦੇ ਹੋ, ਤੁਸੀਂ ਸਿਰਫ variables ਨੂੰ ਜ਼ਰੂਰੀ values ਨਾਲ ਭਰਦੇ ਹੋ।
+```text
+TOOL CALL:  Chuck Norris once rode a nine foot grizzly bear through an automatic car wash, instead of taking a shower.
+CONTENT:  
+```
 
-### Reusable Prompts ਬਣਾਉਣਾ
+```mermaid
+flowchart TD
+    A[User Query: "Tell me a joke about animals"] --> B[LangChain Analysis]
+    B --> C{Tool Available?}
+    C -->|Yes| D[Select joke tool]
+    C -->|No| E[Generate direct response]
+    
+    D --> F[Extract Parameters]
+    F --> G[Call joke(category="animals")]
+    G --> H[API Request to chucknorris.io]
+    H --> I[Return joke content]
+    I --> J[Display to user]
+    
+    E --> K[AI-generated response]
+    K --> J
+    
+    subgraph "Tool Definition Layer"
+        L[TypedDict Schema]
+        M[Function Implementation]
+        N[Parameter Validation]
+    end
+    
+    D --> L
+    F --> N
+    G --> M
+```
+
+ਇਹ ਹੈ ਪੂਰਾ ਕੋਡ:
 
 ```python
-from langchain_core.prompts import ChatPromptTemplate
+from langchain_openai import ChatOpenAI
+import requests
+import os
+from typing_extensions import Annotated, TypedDict
 
-# Define a template for code explanations
-template = ChatPromptTemplate.from_messages([
-    ("system", "You are an expert programming instructor. Explain concepts clearly with examples."),
-    ("human", "Explain {concept} in {language} with a practical example for {skill_level} developers")
-])
+class add(TypedDict):
+    """Add two integers."""
 
-# Use the template with different values
-questions = [
-    {"concept": "functions", "language": "JavaScript", "skill_level": "beginner"},
-    {"concept": "classes", "language": "Python", "skill_level": "intermediate"},
-    {"concept": "async/await", "language": "JavaScript", "skill_level": "advanced"}
-]
+    # Annotations must have the type and can optionally include a default value and description (in that order).
+    a: Annotated[int, ..., "First integer"]
+    b: Annotated[int, ..., "Second integer"]
+
+class joke(TypedDict):
+    """Tell a joke."""
+
+    # Annotations must have the type and can optionally include a default value and description (in that order).
+    category: Annotated[str, ..., "The joke category"]
+
+tools = [add, joke]
 
-for question in questions:
-    prompt = template.format_messages(**question)
-    response = llm.invoke(prompt)
-    print(f"Topic: {question['concept']}\n{response.content}\n---\n")
+def get_joke(category: str) -> str:
+    response = requests.get(f"https://api.chucknorris.io/jokes/random?category={category}", headers={"Accept": "application/json"})
+    if response.status_code == 200:
+        return response.json().get("value", f"Here's a {category} joke!")
+    return f"Here's a {category} joke!"
+
+functions = {
+    "add": lambda a, b: a + b,
+    "joke": lambda category: get_joke(category)
+}
+
+llm = ChatOpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="openai/gpt-4o-mini",
+)
+
+llm_with_tools = llm.bind_tools(tools)
+
+query = "Tell me a joke about animals"
+
+res = llm_with_tools.invoke(query)
+if(res.tool_calls):
+    for tool in res.tool_calls:
+        # print("TOOL CALL: ", tool)
+        print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
+print("CONTENT: ",res.content)
 ```
 
-**ਤੁਹਾਨੂੰ templates ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਪਸੰਦ ਆਵੇਗੀ:**
-- **ਤੁਹਾਡੇ prompts ਨੂੰ** ਤੁਹਾਡੇ ਪੂਰੇ ਐਪ ਵਿੱਚ consistent ਬਣਾਈ ਰੱਖਦਾ ਹੈ
-- **ਕੋਈ ਹੋਰ** ਗੰਦਗੀ ਵਾਲੀ string concatenation ਨਹੀਂ - ਸਿਰਫ਼ ਸਾਫ਼, ਸਧਾਰਨ variables
-- **ਤੁਹਾਡਾ AI** ਪੇਸ਼ਕਸ਼ੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ ਕਿਉਂਕਿ structure ਇੱਕੋ ਰਹਿੰਦਾ ਹੈ
-- **ਅੱਪਡੇਟਸ** ਬਹੁਤ ਸੌਖੀਆਂ ਹਨ - ਸਿਰਫ ਇੱਕ ਵਾਰ template ਨੂੰ ਬਦਲੋ, ਅਤੇ ਇਹ ਹਰ ਜਗ੍ਹਾ ਠੀਕ ਹੋ ਜਾਂਦਾ ਹੈ
+## ਐਮਬੈਡਿੰਗ ਅਤੇ ਦਸਤਾਵੇਜ਼ ਪ੍ਰੋਸੈਸਿੰਗ
+
+ਐਮਬੈਡਿੰਗ ਆਧੁਨਿਕ AI ਵਿੱਚ ਸਭ ਤੋਂ ਸੁੰਦਰ ਹੱਲਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ। ਸੋਚੋ ਕਿ ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਲਿਖਤ ਨੂੰ ਲੈ ਕੇ ਇਸਨੂੰ ਅੰਕਾਂ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹੋ ਜੋ ਇਸਦੇ ਅਰਥ ਨੂੰ ਕੈਪਚਰ ਕਰਦੇ ਹਨ। ਇਹੀ ਕੰਮ ਐਮਬੈਡਿੰਗ ਕਰਦੇ ਹਨ - ਇਹ ਲਿਖਤ ਨੂੰ ਬਹੁ-ਮਾਤਰੀ ਸਪੇਸ ਵਿੱਚ ਬਿੰਦੂਆਂ ਵਿੱਚ ਬਦਲਦੇ ਹਨ ਜਿੱਥੇ ਸਮਾਨ ਸੰਕਲਪ ਇਕੱਠੇ ਹੁੰਦੇ ਹਨ। ਇਹ ਵਿਚਾਰਾਂ ਲਈ ਇੱਕ ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ ਹੋਣ ਵਰਗਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਮੇਂਡਲੀਵ ਨੇ ਪੀਰੀਓਡਿਕ ਟੇਬਲ ਨੂੰ ਪਰਮਾਣੂ ਗੁਣਾਂ ਦੁਆਰਾ ਸੰਗਠਿਤ ਕੀਤਾ ਸੀ।
+
+### ਐਮਬੈਡਿੰਗ ਬਣਾਉਣਾ ਅਤੇ ਵਰਤਣਾ
+
+```python
+from langchain_openai import OpenAIEmbeddings
+from langchain_community.vectorstores import FAISS
+from langchain_community.document_loaders import TextLoader
+from langchain.text_splitter import CharacterTextSplitter
+
+# Initialize embeddings
+embeddings = OpenAIEmbeddings(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="text-embedding-3-small"
+)
+
+# Load and split documents
+loader = TextLoader("documentation.txt")
+documents = loader.load()
 
-## Structured Output
+text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0)
+texts = text_splitter.split_documents(documents)
 
-ਕੀ ਤੁਸੀਂ ਕਦੇ AI ਦੇ ਜਵਾਬਾਂ ਨੂੰ parse ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ ਜੋ unstructured text ਵਾਂਗ ਵਾਪਸ ਆਉਂਦੇ ਹਨ? Structured output ਤੁਹਾਡੇ AI ਨੂੰ systematic approach ਦੀ ਪਾਲਣਾ ਕਰਨ ਲਈ ਸਿਖਾਉਣ ਵਾਂਗ ਹੈ ਜੋ Linnaeus ਨੇ biological classification ਲਈ ਵਰਤੀ ਸੀ - ਸੰਗਠਿਤ, predictable, ਅਤੇ ਵਰਤਣ ਲਈ ਸੌਖਾ। ਤੁਸੀਂ JSON, ਨਿਰਧਾਰਤ ਡਾਟਾ structures, ਜਾਂ ਕੋਈ ਵੀ format ਦੀ ਮੰਗ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਤੁਹਾਨੂੰ ਲੋੜੀਂਦਾ ਹੈ।
+# Create vector store
+vectorstore = FAISS.from_documents(texts, embeddings)
 
-### Output Schemas ਨੂੰ Define ਕਰਨਾ
+# Perform similarity search
+query = "How do I handle user authentication?"
+similar_docs = vectorstore.similarity_search(query, k=3)
+
+for doc in similar_docs:
+    print(f"Relevant content: {doc.page_content[:200]}...")
+```
+
+### ਵੱਖ-ਵੱਖ ਫਾਰਮੈਟਾਂ ਲਈ ਦਸਤਾਵੇਜ਼ ਲੋਡਰ
 
 ```python
-from langchain_core.prompts import ChatPromptTemplate
-from langchain_core.output_parsers import JsonOutputParser
-from pydantic import BaseModel, Field
-
-class CodeReview(BaseModel):
-    score: int = Field(description="Code quality score from 1-10")
-    strengths: list[str] = Field(description="List of code strengths")
-    improvements: list[str] = Field(description="List of suggested improvements")
-    overall_feedback: str = Field(description="Summary feedback")
-
-# Set up the parser
-parser = JsonOutputParser(pydantic_object=CodeReview)
-
-# Create prompt with format instructions
-prompt = ChatPromptTemplate.from_messages([
-    ("system", "You are a code reviewer. {format_instructions}"),
-    ("human", "Review this code: {code}")
-])
+from langchain_community.document_loaders import (
+    PyPDFLoader,
+    CSVLoader,
+    JSONLoader,
+    WebBaseLoader
+)
 
-# Format the prompt with instructions
-chain = prompt | llm | parser
+# Load different document types
+pdf_loader = PyPDFLoader("manual.pdf")
+csv_loader = CSVLoader("data.csv")
+json_loader = JSONLoader("config.json")
+web_loader = WebBaseLoader("https://example.com/docs")
+
+# Process all documents
+all_documents = []
+for loader in [pdf_loader, csv_loader, json_loader, web_loader]:
+    docs = loader.load()
+    all_documents.extend(docs)
+```
+
+**ਤੁਸੀਂ ਐਮਬੈਡਿੰਗ ਨਾਲ ਕੀ ਕਰ ਸਕਦੇ ਹੋ:**
+- **ਖੋਜ ਬਣਾਓ** ਜੋ ਸਿਰਫ਼ ਕੀਵਰਡ ਮੈਚਿੰਗ ਨਹੀਂ, ਬਲਕਿ ਤੁਹਾਡੇ ਅਰਥ ਨੂੰ ਸਮਝਦੀ ਹੈ
+- **AI ਬਣਾਓ** ਜੋ ਤੁਹਾਡੇ ਦਸਤਾਵੇਜ਼ਾਂ ਬਾਰੇ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦੇ ਸਕੇ
+- **ਸਿਫਾਰਸ਼ੀ ਸਿਸਟਮ ਬਣਾਓ** ਜੋ ਸੱਚਮੁੱਚ ਸਬੰਧਤ ਸਮੱਗਰੀ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰੇ
+- **ਆਪਣੇ ਸਮੱਗਰੀ ਨੂੰ** ਸਵੈ-ਚਾਲਤ ਢੰਗ ਨਾਲ ਸੰਗਠਿਤ ਅਤੇ ਸ਼੍ਰੇਣੀਬੱਧ ਕਰੋ
+
+```mermaid
+flowchart LR
+    A[Documents] --> B[Text Splitter]
+    B --> C[Create Embeddings]
+    C --> D[Vector Store]
+    
+    E[User Query] --> F[Query Embedding]
+    F --> G[Similarity Search]
+    G --> D
+    D --> H[Relevant Documents]
+    H --> I[AI Response]
+    
+    subgraph "Vector Space"
+        J[Document A: [0.1, 0.8, 0.3...]]
+        K[Document B: [0.2, 0.7, 0.4...]]
+        L[Query: [0.15, 0.75, 0.35...]]
+    end
+    
+    C --> J
+    C --> K
+    F --> L
+    G --> J
+    G --> K
+```
+
+## ਪੂਰੀ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣਾ
 
-# Get structured response
-code_sample = """
-def calculate_average(numbers):
-    return sum(numbers) / len(numbers)
-"""
+ਹੁਣ ਅਸੀਂ ਤੁਹਾਡੇ ਸਿੱਖੇ ਗਏ ਸਭ ਕੁਝ ਨੂੰ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਾਂਗੇ - ਇੱਕ ਕੋਡਿੰਗ ਸਹਾਇਕ ਜੋ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦੇ ਸਕੇ, ਟੂਲ ਵਰਤ ਸਕੇ, ਅਤੇ ਗੱਲਬਾਤ ਦੀ ਯਾਦ ਰੱਖ ਸਕੇ। ਜਿਵੇਂ ਕਿ ਪ੍ਰਿੰਟਿੰਗ ਪ੍ਰੈਸ ਨੇ ਮੌਜੂਦਾ ਤਕਨਾਲੋਜੀਆਂ (ਮੋਵੇਬਲ ਟਾਈਪ, ਸਿਆਹ, ਕਾਗਜ਼, ਅਤੇ ਦਬਾਅ) ਨੂੰ ਕੁਝ ਬਦਲਾਅਕਾਰੀ ਵਿੱਚ ਜੋੜਿਆ, ਅਸੀਂ ਆਪਣੇ AI ਕੰਪੋਨੈਂਟ ਨੂੰ ਕੁਝ ਵਿਹਾਰਕ ਅਤੇ ਲਾਭਦਾਇਕ ਵਿੱਚ ਜੋੜਾਂਗੇ।
+
+### ਪੂਰੀ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਉਦਾਹਰਨ
+
+```python
+from langchain_openai import ChatOpenAI, OpenAIEmbeddings
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_core.messages import HumanMessage, SystemMessage, AIMessage
+from langchain_community.vectorstores import FAISS
+from typing_extensions import Annotated, TypedDict
+import os
+import requests
+
+class CodingAssistant:
+    def __init__(self):
+        self.llm = ChatOpenAI(
+            api_key=os.environ["GITHUB_TOKEN"],
+            base_url="https://models.github.ai/inference",
+            model="openai/gpt-4o-mini"
+        )
+        
+        self.conversation_history = [
+            SystemMessage(content="""You are an expert coding assistant. 
+            Help users learn programming concepts, debug code, and write better software.
+            Use tools when needed and maintain a helpful, encouraging tone.""")
+        ]
+        
+        # Define tools
+        self.setup_tools()
+    
+    def setup_tools(self):
+        class web_search(TypedDict):
+            """Search for programming documentation or examples."""
+            query: Annotated[str, "Search query for programming help"]
+        
+        class code_formatter(TypedDict):
+            """Format and validate code snippets."""
+            code: Annotated[str, "Code to format"]
+            language: Annotated[str, "Programming language"]
+        
+        self.tools = [web_search, code_formatter]
+        self.llm_with_tools = self.llm.bind_tools(self.tools)
+    
+    def chat(self, user_input: str):
+        # Add user message to conversation
+        self.conversation_history.append(HumanMessage(content=user_input))
+        
+        # Get AI response
+        response = self.llm_with_tools.invoke(self.conversation_history)
+        
+        # Handle tool calls if any
+        if response.tool_calls:
+            for tool_call in response.tool_calls:
+                tool_result = self.execute_tool(tool_call)
+                print(f"🔧 Tool used: {tool_call['name']}")
+                print(f"📊 Result: {tool_result}")
+        
+        # Add AI response to conversation
+        self.conversation_history.append(response)
+        
+        return response.content
+    
+    def execute_tool(self, tool_call):
+        tool_name = tool_call['name']
+        args = tool_call['args']
+        
+        if tool_name == 'web_search':
+            return f"Found documentation for: {args['query']}"
+        elif tool_name == 'code_formatter':
+            return f"Formatted {args['language']} code: {args['code'][:50]}..."
+        
+        return "Tool execution completed"
+
+# Usage example
+assistant = CodingAssistant()
+
+print("🤖 Coding Assistant Ready! Type 'quit' to exit.\n")
+
+while True:
+    user_input = input("You: ")
+    if user_input.lower() == 'quit':
+        break
+    
+    response = assistant.chat(user_input)
+    print(f"🤖 Assistant: {response}\n")
+```
 
-result = chain.invoke({
-    "code": code_sample,
-    "format_instructions": parser.get_format_instructions()
-})
+**ਐਪਲੀਕੇਸ਼ਨ ਆਰਕੀਟੈਕਚਰ:**
 
-print(f"Score: {result['score']}")
-print(f"Strengths: {', '.join(result['strengths'])}")
+```mermaid
+graph TD
+    A[User Input] --> B[Coding Assistant]
+    B --> C[Conversation Memory]
+    B --> D[Tool Detection]
+    B --> E[LLM Processing]
+    
+    D --> F[Web Search Tool]
+    D --> G[Code Formatter Tool]
+    
+    E --> H[Response Generation]
+    F --> H
+    G --> H
+    
+    H --> I[User Interface]
+    H --> C
 ```
 
-**Structured output ਕਿਉਂ game-changer ਹੈ:**
-- **ਕ
-3. **ਵਿਅਕਤੀਗਤ ਸਿੱਖਿਆ**: ਸਿਸਟਮ ਸੁਨੇਹਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੱਖ-ਵੱਖ ਹੁਨਰ ਪੱਧਰਾਂ ਲਈ ਜਵਾਬਾਂ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਓ  
-4. **ਜਵਾਬਾਂ ਦੀ ਫਾਰਮੈਟਿੰਗ**: ਪ੍ਰਸ਼ਨੋਤਰੀ ਲਈ ਸੰਰਚਿਤ ਨਿਕਾਸ ਨੂੰ ਲਾਗੂ ਕਰੋ  
+**ਅਸੀਂ ਲਾਗੂ ਕੀਤੇ ਮੁੱਖ ਫੀਚਰ:**
+- **ਤੁਹਾਡੀ ਪੂਰੀ ਗੱਲਬਾਤ ਨੂੰ ਯਾਦ ਰੱਖਦਾ ਹੈ** ਸੰਦਰਭ ਦੀ ਲਗਾਤਾਰਤਾ ਲਈ
+- **ਟੂਲ ਕਾਲਿੰਗ ਦੁਆਰਾ ਕਾਰਵਾਈਆਂ ਕਰਦਾ ਹੈ**, ਸਿਰਫ਼ ਗੱਲਬਾਤ ਨਹੀਂ
+- **ਪ੍ਰਿਡਿਕਟੇਬਲ ਇੰਟਰੈਕਸ਼ਨ ਪੈਟਰਨਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ**
+- **ਆਪਮਾਤਰਕ ਤੌਰ 'ਤੇ ਗਲਤੀ ਸੰਭਾਲ ਅਤੇ ਜਟਿਲ ਵਰਕਫਲੋਜ਼ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ**
+
+### 🎯 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ: ਪ੍ਰੋਡਕਸ਼ਨ AI ਆਰਕੀਟੈਕਚਰ
+
+**ਆਰਕੀਟੈਕਚਰ ਦੀ ਸਮਝ**: ਤੁਸੀਂ ਇੱਕ ਪੂਰੀ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਈ ਹੈ ਜੋ ਗੱਲਬਾਤ ਪ੍ਰਬੰਧਨ, ਟੂਲ ਕਾਲਿੰਗ, ਅਤੇ ਸੰਗਠਿਤ ਵਰਕਫਲੋਜ਼ ਨੂੰ ਜੋੜਦੀ ਹੈ। ਇਹ ਪ੍ਰੋਡਕਸ਼ਨ-ਲੈਵਲ AI ਐਪਲੀਕੇਸ਼ਨ ਵਿਕਾਸ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ।
 
-### ਲਾਗੂ ਕਰਨ ਦੇ ਕਦਮ  
+**ਮੁੱਖ ਸੰਕਲਪ ਸਿੱਖੇ:**
+- **ਕਲਾਸ-ਅਧਾਰਿਤ ਆਰਕੀਟੈਕਚਰ**: ਸੰਗਠਿਤ, ਰੱਖ-ਰਖਾਅ ਯੋਗ AI ਐਪਲੀਕੇਸ਼ਨ ਸਟ੍ਰਕਚਰ
+- **ਟੂਲ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਗੱਲਬਾਤ ਤੋਂ ਬਾਹਰ ਕਸਟਮ ਫੰਕਸ਼ਨਲਿਟੀ
+- **ਯਾਦ ਪ੍ਰਬੰਧਨ**: ਲਗਾਤਾਰ ਗੱਲਬਾਤ ਸੰਦਰਭ
+- **ਗਲਤੀ ਸੰਭਾਲ**: ਮਜ਼ਬੂਤ ਐਪਲੀਕੇਸ਼ਨ ਵਿਹਾਰ
 
-**ਕਦਮ 1: ਆਪਣੇ ਵਾਤਾਵਰਣ ਦੀ ਸੈਟਅੱਪ ਕਰੋ**  
+**ਉਦਯੋਗ ਕਨੈਕਸ਼ਨ**: ਤੁਸੀਂ ਲਾਗੂ ਕੀਤੇ ਆਰਕੀਟੈਕਚਰ ਪੈਟਰਨ (ਗੱਲਬਾਤ ਕਲਾਸ, ਟੂਲ ਸਿਸਟਮ, ਯਾਦ ਪ੍ਰਬੰਧਨ) ਉਹੀ ਪੈਟਰਨ ਹਨ ਜੋ Slack ਦੇ AI ਸਹਾਇਕ, GitHub Copilot, ਅਤੇ Microsoft Copilot ਵਰਗੀਆਂ ਐਨਟਰਪ੍ਰਾਈਜ਼ AI ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਤੁਸੀਂ ਪੇਸ਼ੇਵਰ-ਗ੍ਰੇਡ ਆਰਕੀਟੈਕਚਰਲ ਸੋਚ ਨਾਲ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ।
+
+**ਚਿੰਤਨ ਸਵਾਲ**: ਤੁਸੀਂ ਇਸ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਕਈ ਉਪਭੋਗਤਾਵਾਂ, ਸਥਾਈ ਸਟੋਰੇਜ, ਜਾਂ ਬਾਹਰੀ ਡਾਟਾਬੇਸਾਂ ਨਾਲ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕਿਵੇਂ ਵਧਾਉਂਦੇ? ਸਕੇਲਬਿਲਟੀ ਅਤੇ ਸਟੇਟ ਪ੍ਰਬੰਧਨ ਚੁਣੌਤੀਆਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।
+
+## ਅਸਾਈਨਮੈਂਟ: ਆਪਣਾ AI-ਚਾਲਤ ਅਧਿਐਨ ਸਹਾਇਕ ਬਣਾਓ
+
+**ਉਦੇਸ਼**: ਇੱਕ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ ਜੋ ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸੰਕਲਪ ਸਿੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰੇ, ਵਿਆਖਿਆਵਾਂ, ਕੋਡ ਉਦਾਹਰਨਾਂ, ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਕਵਿਜ਼ਾਂ ਪ੍ਰਦਾਨ ਕਰਕੇ।
+
+### ਜ਼ਰੂਰਤਾਂ
+
+**ਮੁੱਖ ਫੀਚਰ (ਲਾਜ਼ਮੀ):**
+1. **ਗੱਲਬਾਤੀ ਇੰਟਰਫੇਸ**: ਇੱਕ ਚੈਟ ਸਿਸਟਮ ਲਾਗੂ ਕਰੋ ਜੋ ਕਈ ਸਵਾਲਾਂ ਵਿੱਚ ਸੰਦਰਭ ਨੂੰ ਰੱਖਦਾ ਹੈ
+2. **ਸ਼ਿਕਸ਼ਣ ਟੂਲ**: ਘੱਟੋ-ਘੱਟ ਦੋ ਟੂਲ ਬਣਾਓ ਜੋ ਸਿੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ:
+   - ਕੋਡ ਵਿਆਖਿਆ ਟੂਲ
+   - ਸੰਕਲਪ ਕਵਿਜ਼ ਜਨਰੇਟਰ
+3. **ਵਿਅਕਤੀਗਤ ਸਿੱਖਣ**: ਸਿਸਟਮ ਸੁਨੇਹਿਆਂ ਨੂੰ ਵਰਤ ਕੇ ਵੱਖ-ਵੱਖ ਕੌਸ਼ਲ ਪੱਧਰਾਂ ਲਈ ਜਵਾਬ ਅਨੁਕੂਲ ਬਣਾਓ
+4. **ਜਵਾਬ ਫਾਰਮੈਟਿੰਗ**: ਕਵਿਜ਼ ਸਵਾਲਾਂ ਲਈ ਸੰਗਠਿਤ ਆਉਟਪੁੱਟ ਲਾਗੂ ਕਰੋ
+
+### ਲਾਗੂ ਕਰਨ ਦੇ ਕਦਮ
+
+**ਕਦਮ 1: ਆਪਣਾ ਵਾਤਾਵਰਣ ਸੈਟਅਪ ਕਰੋ**
 ```bash
 pip install langchain langchain-openai
 ```
-  
-**ਕਦਮ 2: ਬੁਨਿਆਦੀ ਚੈਟ ਫੰਕਸ਼ਨਲਿਟੀ**  
-- `StudyAssistant` ਕਲਾਸ ਬਣਾਓ  
-- ਗੱਲਬਾਤ ਦੀ ਯਾਦਸ਼ਤ ਲਾਗੂ ਕਰੋ  
-- ਸਿੱਖਿਆ ਸਮਰਥਨ ਲਈ ਪੁਰਸ਼ਨਲਿਟੀ ਸੰਰਚਨਾ ਸ਼ਾਮਲ ਕਰੋ  
 
-**ਕਦਮ 3: ਸਿੱਖਿਆਕ ਟੂਲ ਸ਼ਾਮਲ ਕਰੋ**  
-- **ਕੋਡ ਵਿਆਖਿਆਕਾਰ**: ਕੋਡ ਨੂੰ ਸਮਝਣਯੋਗ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡਦਾ ਹੈ  
-- **ਪ੍ਰਸ਼ਨੋਤਰੀ ਜਨਰੇਟਰ**: ਪ੍ਰੋਗਰਾਮਿੰਗ ਸੰਕਲਪਾਂ ਬਾਰੇ ਪ੍ਰਸ਼ਨ ਬਣਾਉਂਦਾ ਹੈ  
-- **ਪ੍ਰਗਤੀ ਟ੍ਰੈਕਰ**: ਕਵਰ ਕੀਤੇ ਵਿਸ਼ਿਆਂ ਦੀ ਟ੍ਰੈਕਿੰਗ ਰੱਖਦਾ ਹੈ  
+**ਕਦਮ 2: ਬੁਨਿਆਦੀ ਚੈਟ ਫੰਕਸ਼ਨਲਿਟੀ**
+- ਇੱਕ `StudyAssistant` ਕਲਾਸ ਬਣਾਓ
+- ਗੱਲਬਾਤ ਯਾਦ ਰੱਖਣ ਦੀ ਵਿਵਸਥਾ ਲਾਗੂ ਕਰੋ
+- ਸਿੱਖਣ ਲਈ ਸਹਾਇਕ ਵਿਅਕਤੀਗਤ ਸੰਰਚਨਾ ਸ਼ਾਮਲ ਕਰੋ
 
-**ਕਦਮ 4: ਵਧੇਰੇ ਸੁਧਾਰਿਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਵਿਕਲਪਿਕ)**  
-- ਵਧੀਆ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਲਈ ਸਟ੍ਰੀਮਿੰਗ ਜਵਾਬ ਲਾਗੂ ਕਰੋ  
-- ਕੋਰਸ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਲੋਡਿੰਗ ਸ਼ਾਮਲ ਕਰੋ  
-- ਸਮਾਨਤਾ-ਅਧਾਰਿਤ ਸਮੱਗਰੀ ਪ੍ਰਾਪਤੀ ਲਈ ਐਮਬੈਡਿੰਗ ਬਣਾਓ  
+**ਕਦਮ 3: ਸ਼ਿਕਸ਼ਣ ਟੂਲ ਸ਼ਾਮਲ ਕਰੋ**
+- **ਕੋਡ ਵਿਆਖਿਆਕਾਰ**: ਕੋਡ ਨੂੰ ਸਮਝਣਯੋਗ ਹਿੱਸਿਆਂ ਵਿੱਚ ਤੋੜਦਾ ਹੈ
+- **ਕਵਿਜ਼ ਜਨਰੇਟਰ**: ਪ੍ਰੋਗਰਾਮਿੰਗ ਸੰਕਲਪਾਂ ਬਾਰੇ ਸਵਾਲ ਬਣਾਉਂਦਾ ਹੈ
+- **ਪ੍ਰਗਤੀ ਟ੍ਰੈਕਰ**: ਕਵਰੇਜ ਕੀਤੇ ਵਿਸ਼ਿਆਂ ਦੀ ਟ੍ਰੈਕਿੰਗ ਰੱਖਦਾ ਹੈ
 
-### ਮੁਲਾਂਕਣ ਮਾਪਦੰਡ  
+**ਕਦਮ 4: ਵਧੇਰੇ ਫੀਚਰ (ਵਿਕਲਪਿਕ)**
+- ਬਿਹਤਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਲਈ ਸਟ੍ਰੀਮਿੰਗ ਜਵਾਬ ਲਾਗੂ ਕਰੋ
+- ਕੋਰਸ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਲੋਡਿੰਗ ਸ਼ਾਮਲ ਕਰੋ
+- ਸਮਾਨਤਾ-ਅਧਾਰਿਤ ਸਮੱਗਰੀ ਪ੍ਰਾਪਤੀ ਲਈ ਐਮਬੈਡਿੰਗ ਬਣਾਓ
 
-| ਵਿਸ਼ੇਸ਼ਤਾ | ਸ਼ਾਨਦਾਰ (4) | ਚੰਗਾ (3) | ਸੰਤੋਸ਼ਜਨਕ (2) | ਸੁਧਾਰ ਦੀ ਲੋੜ (1) |  
-|----------|-------------|-----------|----------------|------------------|  
-| **ਗੱਲਬਾਤ ਦਾ ਪ੍ਰਵਾਹ** | ਕੁਦਰਤੀ, ਸੰਦਰਭ-ਜਾਗਰੂਕ ਜਵਾਬ | ਚੰਗੀ ਸੰਦਰਭ ਰੱਖਿਆ | ਬੁਨਿਆਦੀ ਗੱਲਬਾਤ | ਗੱਲਬਾਤਾਂ ਵਿੱਚ ਕੋਈ ਯਾਦਸ਼ਤ ਨਹੀਂ |  
-| **ਟੂਲ ਇੰਟੀਗ੍ਰੇਸ਼ਨ** | ਕਈ ਉਪਯੋਗੀ ਟੂਲ ਬਿਨਾਂ ਰੁਕਾਵਟ ਕੰਮ ਕਰਦੇ ਹਨ | 2+ ਟੂਲ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕੀਤੇ | 1-2 ਬੁਨਿਆਦੀ ਟੂਲ | ਟੂਲ ਕੰਮ ਨਹੀਂ ਕਰਦੇ |  
-| **ਕੋਡ ਗੁਣਵੱਤਾ** | ਸਾਫ, ਵਧੀਆ ਦਸਤਾਵੇਜ਼ੀਕਰਨ, ਗਲਤੀ ਸੰਭਾਲ | ਚੰਗੀ ਸੰਰਚਨਾ, ਕੁਝ ਦਸਤਾਵੇਜ਼ੀਕਰਨ | ਬੁਨਿਆਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਕੰਮ ਕਰਦੀ ਹੈ | ਖਰਾਬ ਸੰਰਚਨਾ, ਕੋਈ ਗਲਤੀ ਸੰਭਾਲ ਨਹੀਂ |  
-| **ਸਿੱਖਿਆਕ ਮੁੱਲ** | ਸਿੱਖਣ ਲਈ ਸੱਚਮੁੱਚ ਮਦਦਗਾਰ, ਅਨੁਕੂਲ | ਚੰਗਾ ਸਿੱਖਣ ਸਮਰਥਨ | ਬੁਨਿਆਦੀ ਵਿਆਖਿਆ | ਸੀਮਿਤ ਸਿੱਖਿਆਕ ਲਾਭ |  
+### ਮੁਲਾਂਕਣ ਮਾਪਦੰਡ
 
-### ਨਮੂਨਾ ਕੋਡ ਸੰਰਚਨਾ  
+| ਫੀਚਰ | ਸ਼ਾਨਦਾਰ (4) | ਚੰਗਾ (3) | ਸੰਤੋਸ਼ਜਨਕ (2) | ਕੰਮ ਦੀ ਲੋੜ (1) |
+|---------|---------------|----------|------------------|----------------|
+| **ਗੱਲਬਾਤ ਦਾ ਪ੍ਰਵਾਹ** | ਕੁਦਰਤੀ, ਸੰਦਰਭ-ਜਾਗਰੂਕ ਜਵਾਬ | ਚੰਗੀ ਸੰਦਰਭ ਰੱਖਣ ਯੋਗਤਾ | ਬੁਨਿਆਦੀ ਗੱਲਬਾਤ | ਸੰਦਰਭ ਬਿਨਾਂ ਗੱਲਬਾਤ |
+| **ਟੂਲ ਇੰਟੀਗ੍ਰੇਸ਼ਨ** | ਕਈ ਉਪਯੋਗ ਟੂਲ ਬੇਹਤਰੀਨ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ | 2+ ਟੂਲ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕੀਤੇ | 1-2 ਬੁਨਿਆਦੀ ਟੂਲ | ਟੂਲ ਕਾਰਗਰ ਨਹੀਂ |
+| **ਕੋਡ ਗੁਣਵੱਤਾ** | ਸਾਫ਼, ਚੰਗੀ ਤਰੀਕੇ ਨਾਲ ਦਸਤਾਵੇਜ਼ਿਤ, ਗਲਤੀ ਸੰਭਾਲ | ਚੰਗਾ ਸਟ੍ਰਕਚਰ, ਕੁਝ ਦਸਤਾਵੇਜ਼ | ਬੁਨਿਆਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਕੰਮ ਕਰਦੀ ਹੈ | ਖਰਾਬ ਸਟ੍ਰਕਚਰ, ਕੋਈ ਗਲਤੀ ਸੰਭਾਲ ਨਹੀਂ |
+| **ਸ਼ਿਕਸ਼ਣ ਮੁੱਲ** | ਸਿੱਖਣ ਲਈ ਸੱਚਮੁੱਚ ਮਦਦਗਾਰ, ਅਨੁਕੂਲ | ਚੰਗਾ ਸਿੱਖਣ ਸਮਰਥਨ | ਬੁਨਿਆਦੀ ਵਿਆਖਿਆਵਾਂ | ਸੀਮਿਤ ਸ਼ਿਕਸ਼ਣ ਲਾਭ |
+
+### ਨਮੂਨਾ ਕੋਡ ਸਟ੍ਰਕਚਰ
 
 ```python
 class StudyAssistant:
@@ -396,42 +797,101 @@ class StudyAssistant:
 assistant = StudyAssistant(skill_level="intermediate")
 response = assistant.chat("Explain how Python functions work")
 ```
-  
-**ਬੋਨਸ ਚੁਣੌਤੀਆਂ:**  
-- ਵਾਇਸ ਇਨਪੁੱਟ/ਆਉਟਪੁੱਟ ਸਮਰੱਥਾ ਸ਼ਾਮਲ ਕਰੋ  
-- Streamlit ਜਾਂ Flask ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੈੱਬ ਇੰਟਰਫੇਸ ਲਾਗੂ ਕਰੋ  
-- ਐਮਬੈਡਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੋਰਸ ਸਮੱਗਰੀ ਤੋਂ ਗਿਆਨ ਅਧਾਰ ਬਣਾਓ  
-- ਪ੍ਰਗਤੀ ਟ੍ਰੈਕਿੰਗ ਅਤੇ ਵਿਅਕਤੀਗਤ ਸਿੱਖਣ ਦੇ ਰਸਤੇ ਸ਼ਾਮਲ ਕਰੋ  
 
-## ਸਾਰ  
+**ਬੋਨਸ ਚੁਣੌਤੀਆਂ:**
+- ਵਾਇਸ ਇਨਪੁਟ/ਆਉਟਪੁੱਟ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰੋ
+- Streamlit ਜਾਂ Flask ਵਰਤ ਕੇ ਵੈੱਬ ਇੰਟਰਫੇਸ ਲਾਗੂ ਕਰੋ
+- ਕੋਰਸ ਸਮੱਗਰੀ ਤੋਂ ਐਮਬੈਡਿੰਗ ਵਰਤ ਕੇ ਗਿਆਨ ਅਧਾਰ ਬਣਾਓ
+- ਪ੍ਰਗਤੀ ਟ੍ਰੈਕਿੰਗ ਅਤੇ ਵਿਅਕਤੀਗਤ ਸਿੱਖਣ ਪਾਥ ਸ਼ਾਮਲ ਕਰੋ
 
-🎉 ਹੁਣ ਤੁਸੀਂ AI ਫਰੇਮਵਰਕ ਵਿਕਾਸ ਦੇ ਮੂਲ ਤੱਤਾਂ ਵਿੱਚ ਨਿਪੁਣ ਹੋ ਗਏ ਹੋ ਅਤੇ LangChain ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉੱਚ-ਤਕਨੀਕੀ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦਾ ਗਿਆਨ ਪ੍ਰਾਪਤ ਕੀਤਾ ਹੈ। ਇਹ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਅਪ੍ਰੈਂਟਿਸਸ਼ਿਪ ਪੂਰੀ ਕਰਨ ਵਰਗਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਹੁਨਰਾਂ ਦਾ ਇੱਕ ਵੱਡਾ ਸੰਦ-ਸੈਟ ਹਾਸਲ ਕੀਤਾ ਹੈ। ਆਓ ਜੋ ਤੁਸੀਂ ਹਾਸਲ ਕੀਤਾ ਹੈ ਉਸ ਦੀ ਸਮੀਖਿਆ ਕਰੀਏ।  
+## 📈 ਤੁਹਾਡਾ AI ਫਰੇਮਵਰਕ ਵਿਕਾਸ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
 
-### ਤੁਸੀਂ ਕੀ ਸਿੱਖਿਆ  
+```mermaid
+timeline
+    title Production AI Framework Development Journey
+    
+    section Framework Foundations
+        Understanding Abstractions
+            : Master framework vs API decisions
+            : Learn LangChain core concepts
+            : Implement message type systems
+        
+        Basic Integration
+            : Connect to AI providers
+            : Handle authentication
+            : Manage configuration
+    
+    section Conversation Systems
+        Memory Management
+            : Build conversation history
+            : Implement context tracking
+            : Handle session persistence
+        
+        Advanced Interactions
+            : Master streaming responses
+            : Create prompt templates
+            : Implement structured output
+    
+    section Tool Integration
+        Custom Tool Development
+            : Design tool schemas
+            : Implement function calling
+            : Handle external APIs
+        
+        Workflow Automation
+            : Chain multiple tools
+            : Create decision trees
+            : Build agent behaviors
+    
+    section Production Applications
+        Complete System Architecture
+            : Combine all framework features
+            : Implement error boundaries
+            : Create maintainable code
+        
+        Enterprise Readiness
+            : Handle scalability concerns
+            : Implement monitoring
+            : Build deployment strategies
+```
+
+**🎓 ਗ੍ਰੈਜੂਏਸ਼ਨ ਮਾਈਲਸਟੋਨ**: ਤੁਸੀਂ AI ਫਰੇਮਵਰਕ ਵਿਕਾਸ ਵਿੱਚ ਮਾਹਰਤਾ ਹਾਸਲ ਕਰ ਲਈ ਹੈ ਜੋ ਆਧੁਨਿਕ AI ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਸ਼ਕਤੀ ਦੇਣ ਵਾਲੇ ਉਹੀ ਟੂਲ ਅਤੇ ਪੈਟਰਨ ਵਰਤਦੀ ਹੈ। ਇਹ ਕੌਸ਼ਲ AI ਐਪਲੀਕੇਸ਼ਨ ਵਿਕਾਸ ਦੇ ਕੱਟੇ-ਧਾਰ ਦਾ ਪ੍ਰਤੀਨਿਧੀ ਕਰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਨੂੰ ਐਨਟਰਪ੍ਰਾਈਜ਼-ਗ੍ਰੇਡ ਬੁੱਧੀਮਾਨ ਸਿਸਟਮ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਕਰਦੇ ਹਨ।
+
+**🔄 ਅਗਲੇ ਪੱਧਰ ਦੀ ਸਮਰਥਾ**:
+- ਉੱਚ-ਤਰੀਕੇ ਦੇ AI ਆਰਕੀਟੈਕਚਰ (ਏਜੰਟ, ਮਲਟੀ-ਏਜੰਟ ਸਿਸਟਮ) ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਤਿਆਰ
+- RAG ਸਿਸਟਮਾਂ ਨੂੰ ਵੈਕਟਰ ਡਾਟਾਬੇਸਾਂ ਨਾਲ ਬਣਾਉਣ ਲਈ ਤਿਆਰ
+- ਮਲਟੀ-ਮੋਡਲ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਸਜਗ
+- AI ਐਪਲੀਕੇਸ਼ਨ ਸਕੇਲਿੰਗ ਅਤੇ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਮਜ਼ਬੂਤ ਨੀਵ ਰੱਖੀ
+
+## ਸਾਰ
+
+🎉 ਹੁਣ ਤੁਸੀਂ AI ਫਰੇਮਵਰਕ ਵਿਕਾਸ ਦੇ ਮੂਲ ਤੱਤਾਂ ਵਿੱਚ ਮਾਹਰ ਹੋ ਗਏ ਹੋ ਅਤੇ LangChain ਵਰਤ ਕੇ ਜਟਿਲ AI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਸਿੱਖ ਲਿਆ ਹੈ। ਜਿਵੇਂ ਕਿ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਅਪ੍ਰੈਂਟਿਸਸ਼ਿਪ ਪੂਰੀ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਕੌਸ਼ਲਾਂ ਦੇ ਇੱਕ ਵੱਡੇ ਸੰਦ-ਸੈਟ ਨੂੰ ਹਾਸਲ ਕਰ ਲਿਆ ਹੈ। ਆਓ ਜੋ ਤੁਸੀਂ ਹਾਸਲ ਕੀਤਾ ਹੈ ਉਸਦਾ ਸਮੀਖਣ ਕਰੀਏ।
 
-**ਮੂਲ ਫਰੇਮਵਰਕ ਸੰਕਲਪ:**  
-- **ਫਰੇਮਵਰਕ ਦੇ ਫਾਇਦੇ**: ਫਰੇਮਵਰਕ ਦੀ ਚੋਣ ਕਦੋਂ ਕਰਨੀ ਹੈ ਇਸ ਦੀ ਸਮਝ  
-- **LangChain ਬੁਨਿਆਦੀਆਂ**: AI ਮਾਡਲ ਕਨੈਕਸ਼ਨ ਸੈਟਅੱਪ ਅਤੇ ਸੰਰਚਨਾ  
-- **ਸੁਨੇਹਾ ਕਿਸਮਾਂ**: `SystemMessage`, `HumanMessage`, ਅਤੇ `AIMessage` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਰਚਿਤ ਗੱਲਬਾਤਾਂ  
+### ਤੁਸੀਂ ਕੀ ਸਿੱਖਿਆ
 
-**ਉੱਚ-ਤਕਨੀਕੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ:**  
-- **ਟੂਲ ਕਾਲਿੰਗ**: ਵਧੇਰੇ AI ਸਮਰੱਥਾ ਲਈ ਕਸਟਮ ਟੂਲ ਬਣਾਉਣਾ ਅਤੇ ਸ਼ਾਮਲ ਕਰਨਾ  
-- **ਗੱਲਬਾਤ ਯਾਦਸ਼ਤ**: ਕਈ ਗੱਲਬਾਤ ਮੋੜਾਂ ਵਿੱਚ ਸੰਦਰਭ ਰੱਖਣਾ  
-- **ਸਟ੍ਰੀਮਿੰਗ ਜਵਾਬ**: ਰੀਅਲ-ਟਾਈਮ ਜਵਾਬ ਡਿਲਿਵਰੀ ਲਾਗੂ ਕਰਨਾ  
-- **ਪ੍ਰੋਮਪਟ ਟੈਂਪਲੇਟ**: ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ, ਗਤੀਸ਼ੀਲ ਪ੍ਰੋਮਪਟ ਬਣਾਉਣਾ  
-- **ਸੰਰਚਿਤ ਨਿਕਾਸ**: ਲਗਾਤਾਰ, ਪਾਰਸ ਕਰਨ ਯੋਗ AI ਜਵਾਬ ਯਕੀਨੀ ਬਣਾਉਣਾ  
-- **ਐਮਬੈਡਿੰਗ**: ਸੈਮੈਂਟਿਕ ਖੋਜ ਅਤੇ ਦਸਤਾਵੇਜ਼ ਪ੍ਰੋਸੈਸਿੰਗ ਸਮਰੱਥਾ ਬਣਾਉਣਾ  
+**ਮੂਲ ਫਰੇਮਵਰਕ ਸੰਕਲਪ:**
+- **ਫਰੇਮਵਰਕ ਲਾਭ**: ਸਿੱਧੇ API ਕਾਲਾਂ ਦੇ ਬਦਲੇ ਫਰੇਮਵਰਕ ਚੁਣਨ ਦਾ ਸਮਝਣਾ
+- **LangChain ਬੁਨਿਆਦੀਆਂ**: AI ਮਾਡਲ ਕਨੈਕਸ਼ਨ ਸੈਟਅਪ ਅਤੇ ਕਨਫਿਗਰ ਕਰਨਾ
+- **ਸੁਨੇਹਾ ਕਿਸਮਾਂ**: `SystemMessage`, `HumanMessage`, ਅਤੇ `AIMessage` ਵਰਤ ਕੇ ਸੰਗਠਿਤ ਗੱਲਬਾਤਾਂ
 
-**ਵਿਹਾਰਕ ਅਰਜ਼ੀਆਂ:**  
-- **ਪੂਰੀ ਐਪਸ ਬਣਾਉਣਾ**: ਕਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਉਤਪਾਦਨ-ਤਿਆਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਜੋੜਨਾ  
-- **ਗਲਤੀ ਸੰਭਾਲ**: ਮਜ਼ਬੂਤ ਗਲਤੀ ਪ੍ਰਬੰਧਨ ਅਤੇ ਵੈਧਤਾ ਲਾਗੂ ਕਰਨਾ  
-- **ਟੂਲ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: AI ਸਮਰੱਥਾ ਵਧਾਉਣ ਵਾਲੇ ਕਸਟਮ ਟੂਲ ਬਣਾਉਣਾ  
+**ਉੱਚ-ਤਰੀਕੇ ਦੇ ਫੀਚਰ:**
+- **ਟੂਲ ਕਾਲਿੰਗ**: ਵਧੇਰੇ AI ਸਮਰਥਾ ਲਈ ਕਸਟਮ ਟੂਲ ਬਣਾਉਣਾ ਅਤੇ ਸ਼ਾਮਲ ਕਰਨਾ
+- **ਗੱਲਬਾਤ ਯਾਦ**: ਕਈ ਗੱਲਬਾਤ ਮੋੜਾਂ ਵਿੱਚ ਸੰਦਰਭ ਰੱਖਣਾ
+- **ਸਟ੍ਰੀਮਿੰਗ ਜਵਾਬ**: ਰੀਅਲ-ਟਾਈਮ ਜਵਾਬ ਡਿਲਿਵਰੀ ਲਾਗੂ ਕਰਨਾ
+- **ਪ੍ਰੋਮਪਟ ਟੈਂਪਲੇਟ**: ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ, ਗਤੀਸ਼ੀਲ ਪ੍ਰੋਮਪਟ ਬਣਾਉਣਾ
+- **ਸੰਗਠਿਤ ਆਉਟਪੁੱਟ**: ਸਥਿਰ, ਪਾਰਸ ਕਰਨ ਯੋਗ AI ਜਵਾਬ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ
+- **ਐਮਬੈਡਿੰਗ**: ਸੈਮੈਂਟਿਕ ਖੋਜ ਅਤੇ ਦਸਤਾਵੇਜ਼ ਪ੍ਰੋਸੈਸਿੰਗ ਸਮਰਥਾ ਬਣਾਉਣਾ
 
-### ਮੁੱਖ ਸਿੱਖਣ ਦੇ ਬਿੰਦੂ  
+**ਵਿਹਾਰਕ ਐਪਲੀਕੇਸ਼ਨ:**
+- **ਪੂਰੀ ਐਪਸ ਬਣਾਉਣਾ**: ਕਈ ਫੀਚਰਾਂ ਨੂੰ ਪ੍ਰੋਡਕਸ਼ਨ-ਤਿਆਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਜੋੜਨਾ
+- **ਗਲਤੀ ਸੰਭਾਲ**: ਮਜ਼ਬੂਤ ਗਲਤੀ ਪ੍ਰਬੰਧਨ ਅਤੇ ਵੈਧਤਾ ਲਾਗੂ ਕਰਨਾ
+- **ਟੂਲ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: AI ਸਮਰਥਾ ਵਧਾਉਣ ਵਾਲੇ ਕਸਟਮ ਟੂਲ ਬਣਾਉਣਾ
 
-> 🎯 **ਯਾਦ ਰੱਖੋ**: LangChain ਵਰਗੇ AI ਫਰੇਮਵਰਕ ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਜਟਿਲਤਾ-ਛੁਪਾਉਣ ਵਾਲੇ, ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਭਰੇ ਹੋਏ ਸਭ ਤੋਂ ਵਧੀਆ ਸਾਥੀ ਹਨ। ਇਹ ਗੱਲਬਾਤ ਯਾਦਸ਼ਤ, ਟੂਲ ਕਾਲਿੰਗ, ਜਾਂ ਕਈ AI ਮਾਡਲਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਦੀ ਲੋੜ ਹੋਣ 'ਤੇ ਬਹੁਤ ਹੀ ਉਪਯੋਗ ਹਨ।  
+### ਮੁੱਖ ਸਿੱਖਣ
 
-**AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਲਈ ਫੈਸਲਾ ਫਰੇਮਵਰਕ:**  
+> 🎯 **ਯਾਦ ਰੱਖੋ**: LangChain ਵਰਗੇ AI ਫਰੇਮਵਰਕ ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਜਟਿਲਤਾ-ਛੁਪਾਉਣ ਵਾਲੇ, ਫੀਚਰ-ਪੈਕਡ ਸਭ ਤੋਂ ਵਧੀਆ ਸਾਥੀ ਹਨ। ਇਹ ਗੱਲਬਾਤ ਯਾਦ, ਟੂਲ ਕਾਲਿੰਗ, ਜਾਂ ਕਈ AI ਮਾਡਲਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਦੀ ਲੋੜ ਹੋਣ 'ਤੇ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹਨ।
+
+**AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਲਈ ਫੈਸਲਾ ਫਰੇਮਵਰਕ:**
 
 ```mermaid
 flowchart TD
@@ -448,45 +908,20 @@ flowchart TD
     G --> K[LangChain basic chat]
     H --> L[LangChain with tools, memory, agents]
 ```
-  
-### ਹੁਣ ਤੁਸੀਂ ਕਿੱਥੇ ਜਾ ਸਕਦੇ ਹੋ?  
-
-**ਤੁਰੰਤ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੋ:**  
-- ਇਹ ਸੰਕਲਪ ਲਓ ਅਤੇ ਕੁਝ ਬਣਾਓ ਜੋ ਤੁਹਾਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰੇ!  
-- LangChain ਰਾਹੀਂ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਨਾਲ ਖੇਡੋ - ਇਹ AI ਮਾਡਲਾਂ ਦਾ ਇੱਕ ਖੇਡ ਦਾ ਮੈਦਾਨ ਹੈ  
-- ਉਹ ਟੂਲ ਬਣਾਓ ਜੋ ਤੁਹਾਡੇ ਕੰਮ ਜਾਂ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਅਸਲ ਸਮੱਸਿਆਵਾਂ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ  
-
-**ਅਗਲੇ ਪੱਧਰ ਲਈ ਤਿਆਰ?**  
-- **AI ਏਜੰਟ**: AI ਸਿਸਟਮ ਬਣਾਓ ਜੋ ਆਪਣੇ ਆਪ ਜਟਿਲ ਕੰਮਾਂ ਦੀ ਯੋਜਨਾ ਅਤੇ ਕਾਰਜ ਕਰ ਸਕਦੇ ਹਨ  
-- **RAG (ਰਿਟਰੀਵਲ-ਆਗਮੈਂਟਡ ਜਨਰੇਸ਼ਨ)**: AI ਨੂੰ ਆਪਣੇ ਗਿਆਨ ਅਧਾਰਾਂ ਨਾਲ ਜੋੜੋ ਵਧੀਆ ਸਮਰੱਥਾ ਵਾਲੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ  
-- **ਮਲਟੀ-ਮੋਡਲ AI**: ਟੈਕਸਟ, ਚਿੱਤਰਾਂ, ਅਤੇ ਆਡੀਓ ਨਾਲ ਇਕੱਠੇ ਕੰਮ ਕਰੋ - ਸੰਭਾਵਨਾਵਾਂ ਬੇਅੰਤ ਹਨ!  
-- **ਉਤਪਾਦਨ ਤੈਨਾਤੀ**: ਆਪਣੀਆਂ AI ਐਪਸ ਨੂੰ ਵਧਾਉਣ ਅਤੇ ਅਸਲ ਦੁਨੀਆ ਵਿੱਚ ਉਨ੍ਹਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਦਾ ਗਿਆਨ ਪ੍ਰਾਪਤ ਕਰੋ  
-
-**ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ:**  
-- LangChain ਕਮਿਊਨਿਟੀ ਬਹੁਤ ਵਧੀਆ ਹੈ ਅੱਪਡੇਟ ਰਹਿਣ ਅਤੇ ਵਧੀਆ ਅਭਿਆਸ ਸਿੱਖਣ ਲਈ  
-- GitHub ਮਾਡਲ ਤੁਹਾਨੂੰ ਕੱਟ-ਧਾਰ AI ਸਮਰੱਥਾ ਤੱਕ ਪਹੁੰਚ ਦਿੰਦੇ ਹਨ - ਪ੍ਰਯੋਗ ਕਰਨ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ  
-- ਵੱਖ-ਵੱਖ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਨਾਲ ਅਭਿਆਸ ਕਰਦੇ ਰਹੋ - ਹਰ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਕੁਝ ਨਵਾਂ ਸਿਖਾਏਗਾ  
-
-ਤੁਹਾਡੇ ਕੋਲ ਹੁਣ ਬੁੱਧੀਮਾਨ, ਗੱਲਬਾਤ ਕਰਨ ਵਾਲੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਦਾ ਗਿਆਨ ਹੈ ਜੋ ਲੋਕਾਂ ਨੂੰ ਅਸਲ ਸਮੱਸਿਆਵਾਂ ਦਾ ਹੱਲ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ। ਜਿਵੇਂ ਰੈਨੇਸਾਂਸ ਦੇ ਕਾਰੀਗਰਾਂ ਨੇ ਕਲਾਤਮਕ ਦ੍ਰਿਸ਼ਟੀ ਨੂੰ ਤਕਨੀਕੀ ਹੁਨਰ ਨਾਲ ਜੋੜਿਆ, ਤੁਸੀਂ ਹੁਣ AI ਸਮਰੱਥਾ ਨੂੰ ਵਿਹਾਰਕ ਅਰਜ਼ੀ ਨਾਲ ਜੋੜ ਸਕਦੇ ਹੋ। ਸਵਾਲ ਇਹ ਹੈ: ਤੁਸੀਂ ਕੀ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ? 🚀  
-
-## GitHub Copilot Agent Challenge 🚀  
-
-Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੀ ਚੁਣੌਤੀ ਪੂਰੀ ਕਰੋ:  
-
-**ਵੇਰਵਾ:** ਇੱਕ ਉੱਚ-ਤਕਨੀਕੀ AI-ਚਾਲਤ ਕੋਡ ਸਮੀਖਿਆ ਸਹਾਇਕ ਬਣਾਓ ਜੋ ਕਈ LangChain ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਟੂਲ ਕਾਲਿੰਗ, ਸੰਰਚਿਤ ਨਿਕਾਸ, ਅਤੇ ਗੱਲਬਾਤ ਯਾਦਸ਼ਤ, ਜੋ ਕੋਡ ਜਮ੍ਹਾਂ ਕਰਨ 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।  
 
-**ਪ੍ਰੋਮਪਟ:** ਇੱਕ CodeReviewAssistant ਕਲਾਸ ਬਣਾਓ ਜੋ ਲਾਗੂ ਕਰਦੀ ਹੈ:  
-1. ਕੋਡ ਦੀ ਜਟਿਲਤਾ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਨ ਅਤੇ ਸੁਧਾਰਾਂ ਦੀ ਸਲਾਹ ਦੇਣ ਲਈ ਇੱਕ ਟੂਲ  
-2. ਕੋਡ ਨੂੰ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੇ ਖਿਲਾਫ ਜਾਂਚਣ ਲਈ ਇੱਕ ਟੂਲ  
-3. ਪਾਇਡੈਂਟਿਕ ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਰਚਿਤ ਨਿਕਾਸ ਲਈ ਇੱਕ ਸਥਿਰ ਸਮੀਖਿਆ ਫਾਰਮੈਟ  
-4. ਸਮੀਖਿਆ ਸੈਸ਼ਨਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਲਈ ਗੱਲਬਾਤ ਯਾਦਸ਼ਤ  
-5. ਇੱਕ ਮੁੱਖ ਚੈਟ ਇੰਟਰਫੇਸ ਜੋ ਕੋਡ ਜਮ੍ਹਾਂ ਕਰਨ ਨੂੰ ਸੰਭਾਲ ਸਕੇ ਅਤੇ ਵਿਸਤ੍ਰਿਤ, ਕਾਰਗਰ ਸੁਧਾਰਾਂ ਦੀ ਸਲਾਹ ਦੇ ਸਕੇ  
+### ਹੁਣ ਤੁਸੀਂ ਕਿੱਥੇ ਜਾ ਸਕਦੇ ਹੋ?
 
-ਸਹਾਇਕ ਨੂੰ ਕਈ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਕੋਡ ਦੀ ਸਮੀਖਿਆ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਇੱਕ ਸੈਸ਼ਨ ਵਿੱਚ ਕਈ ਕੋਡ ਜਮ੍ਹਾਂ ਕਰਨ ਦੇ ਸੰਦਰਭ ਨੂੰ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਸੰਖੇਪ ਸਕੋਰਾਂ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਸੁਧਾਰਾਂ ਦੀ ਸਲਾਹ ਦਿੰਦਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।  
+**ਹੁਣੇ ਹੀ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੋ:**
+- ਇਹ ਸੰਕਲਪ ਲੈ ਕੇ ਕੁਝ ਬਣਾਓ ਜੋ ਤੁਹਾਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦਾ ਹੈ!
+- LangChain ਦੁਆਰਾ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਨਾਲ ਖੇਡੋ - ਇਹ AI ਮਾਡਲਾਂ ਦਾ ਖੇਡ ਦਾ ਮੈਦਾਨ ਵਰਗਾ ਹੈ
+- ਉਹ ਟੂਲ ਬਣਾਓ ਜੋ ਤੁਹਾਡੇ ਕੰਮ ਜਾਂ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਅਸਲ ਸਮੱਸਿਆਵਾਂ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ
 
-ਹੋਰ ਜਾਣੋ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਇੱਥੇ।  
+**ਅਗਲੇ ਪੱਧਰ ਲਈ ਤਿਆਰ?**
+- **AI ਏਜੰਟ**: AI ਸਿਸਟਮ ਬਣਾਓ ਜੋ ਆਪਣੇ ਆਪ ਜਟਿਲ ਕਾਰਵਾਈਆਂ ਦੀ ਯੋਜਨਾ ਅਤੇ ਅਮਲ ਕਰ ਸਕਦੇ ਹਨ
+- **RAG (ਰਿਟਰੀਵਲ-ਅਗਮੈਂਟਡ ਜਨਰੇਸ਼ਨ)**: AI ਨੂੰ ਆਪਣੇ ਗਿਆਨ ਅਧਾਰਾਂ ਨਾਲ ਜੋੜੋ ਸਪਰ-ਪਾਵਰਡ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ
+- **ਮਲਟੀ-ਮੋਡਲ AI**: ਲਿਖਤ, ਚਿੱਤਰ, ਅਤੇ ਆਡੀਓ ਨੂੰ ਇਕੱਠੇ ਵਰਤੋ - ਸੰਭਾਵਨ
 
 ---
 
-**ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤੀ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/2-js-basics/1-data-types/README.md b/translations/pa/2-js-basics/1-data-types/README.md
index b6675ce7af..9f0587c160 100644
--- a/translations/pa/2-js-basics/1-data-types/README.md
+++ b/translations/pa/2-js-basics/1-data-types/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d0092f6533ae3ec3adad5b5ece68efaf",
-  "translation_date": "2025-10-22T17:21:04+00:00",
+  "original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
+  "translation_date": "2025-11-03T16:03:54+00:00",
   "source_file": "2-js-basics/1-data-types/README.md",
   "language_code": "pa"
 }
@@ -10,18 +10,35 @@ CO_OP_TRANSLATOR_METADATA:
 # ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ: ਡਾਟਾ ਟਾਈਪਸ
 
 ![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.pa.png)
-> ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਦੁਆਰਾ
+> ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ
+
+```mermaid
+journey
+    title Your JavaScript Data Types Adventure
+    section Foundation
+      Variables & Constants: 5: You
+      Declaration Syntax: 4: You
+      Assignment Concepts: 5: You
+    section Core Types
+      Numbers & Math: 4: You
+      Strings & Text: 5: You
+      Booleans & Logic: 4: You
+    section Apply Knowledge
+      Type Conversion: 4: You
+      Real-world Examples: 5: You
+      Best Practices: 5: You
+```
 
-ਡਾਟਾ ਟਾਈਪਸ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਮੁੱਢਲੇ ਸੰਕਲਪਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹਨ, ਜੋ ਤੁਹਾਨੂੰ ਹਰ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਮਿਲਣਗੇ ਜੋ ਤੁਸੀਂ ਲਿਖਦੇ ਹੋ। ਡਾਟਾ ਟਾਈਪਸ ਨੂੰ ਉਸ ਪ੍ਰਾਚੀਨ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੇ ਫਾਈਲਿੰਗ ਸਿਸਟਮ ਵਾਂਗ ਸੋਚੋ ਜੋ ਅਲੈਕਸੈਂਡਰੀਆ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਸੀ – ਉਹਨਾਂ ਕੋਲ ਕਵਿਤਾ, ਗਣਿਤ ਅਤੇ ਇਤਿਹਾਸਕ ਰਿਕਾਰਡਾਂ ਵਾਲੇ ਸਕਰੋਲਸ ਲਈ ਖਾਸ ਸਥਾਨ ਹੁੰਦੇ ਸਨ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਜਾਣਕਾਰੀ ਨੂੰ ਇਸੇ ਤਰ੍ਹਾਂ ਵੱਖ-ਵੱਖ ਸ਼੍ਰੇਣੀਆਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ।
+ਡਾਟਾ ਟਾਈਪਸ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਮੁੱਢਲੇ ਸੰਕਲਪਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹਨ, ਜੋ ਤੁਹਾਨੂੰ ਹਰ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਮਿਲਣਗੇ ਜੋ ਤੁਸੀਂ ਲਿਖਦੇ ਹੋ। ਡਾਟਾ ਟਾਈਪਸ ਨੂੰ ਉਸ ਪ੍ਰਾਚੀਨ ਲਾਇਬ੍ਰੇਰੀਅਨ ਦੇ ਫਾਈਲਿੰਗ ਸਿਸਟਮ ਵਾਂਗ ਸੋਚੋ ਜੋ ਅਲੈਕਸੈਂਡਰੀਆ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਸੀ - ਉਹਨਾਂ ਕੋਲ ਕਵਿਤਾ, ਗਣਿਤ ਅਤੇ ਇਤਿਹਾਸਕ ਰਿਕਾਰਡ ਵਾਲੇ ਸਕ੍ਰੋਲਸ ਲਈ ਖਾਸ ਸਥਾਨ ਹੁੰਦੇ ਸਨ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਜਾਣਕਾਰੀ ਨੂੰ ਇਸੇ ਤਰ੍ਹਾਂ ਵੱਖ-ਵੱਖ ਸ਼੍ਰੇਣੀਆਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ।
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਚਲਾਉਣ ਵਾਲੇ ਮੁੱਖ ਡਾਟਾ ਟਾਈਪਸ ਦੀ ਪੜਤਾਲ ਕਰਾਂਗੇ। ਤੁਸੀਂ ਸੰਖਿਆਵਾਂ, ਟੈਕਸਟ, ਸੱਚ/ਝੂਠ ਮੁੱਲਾਂ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਤਰੀਕਾ ਸਿੱਖੋਗੇ ਅਤੇ ਸਮਝੋਗੇ ਕਿ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮਾਂ ਲਈ ਸਹੀ ਟਾਈਪ ਚੁਣਨਾ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ। ਇਹ ਸੰਕਲਪ ਸ਼ੁਰੂ ਵਿੱਚ ਅਜੀਬ ਲੱਗ ਸਕਦੇ ਹਨ, ਪਰ ਅਭਿਆਸ ਨਾਲ, ਇਹ ਤੁਹਾਡੇ ਲਈ ਆਮ ਹੋ ਜਾਣਗੇ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਮੁੱਖ ਡਾਟਾ ਟਾਈਪਸ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ। ਤੁਸੀਂ ਸੰਖਿਆਵਾਂ, ਲਿਖਤ, ਸੱਚ/ਝੂਠ ਮੁੱਲਾਂ ਨੂੰ ਸੰਭਾਲਣ ਅਤੇ ਸਮਝਣ ਲਈ ਸਿੱਖੋਗੇ ਕਿ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮਾਂ ਲਈ ਸਹੀ ਟਾਈਪ ਚੁਣਨਾ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ। ਇਹ ਸੰਕਲਪ ਸ਼ੁਰੂ ਵਿੱਚ ਅਜੀਬ ਲੱਗ ਸਕਦੇ ਹਨ, ਪਰ ਅਭਿਆਸ ਨਾਲ, ਇਹ ਤੁਹਾਡੇ ਲਈ ਆਮ ਹੋ ਜਾਣਗੇ।
 
-ਡਾਟਾ ਟਾਈਪਸ ਨੂੰ ਸਮਝਣਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਹੋਰ ਸਭ ਕੁਝ ਸਪਸ਼ਟ ਕਰ ਦੇਵੇਗਾ। ਜਿਵੇਂ ਕਿ ਇੱਕ ਆਰਕੀਟੈਕਟ ਨੂੰ ਇੱਕ ਕੈਥੀਡ੍ਰਲ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਵੱਖ-ਵੱਖ ਇਮਾਰਤੀ ਸਮੱਗਰੀਆਂ ਨੂੰ ਸਮਝਣਾ ਪੈਂਦਾ ਹੈ, ਇਹ ਮੁੱਢਲੇ ਸੰਕਲਪ ਤੁਹਾਡੇ ਦੁਆਰਾ ਅੱਗੇ ਬਣਾਈ ਗਈ ਹਰ ਚੀਜ਼ ਦਾ ਆਧਾਰ ਬਣਾਉਣਗੇ।
+ਡਾਟਾ ਟਾਈਪਸ ਨੂੰ ਸਮਝਣਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਹੋਰ ਸਭ ਕੁਝ ਸਪਸ਼ਟ ਕਰ ਦੇਵੇਗਾ। ਜਿਵੇਂ ਕਿ ਆਰਕੀਟੈਕਟ ਨੂੰ ਕੈਥੀਡ੍ਰਲ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਵੱਖ-ਵੱਖ ਇਮਾਰਤੀ ਸਮੱਗਰੀਆਂ ਨੂੰ ਸਮਝਣਾ ਪੈਂਦਾ ਹੈ, ਇਹ ਮੁੱਢਲੇ ਸੰਕਲਪ ਤੁਹਾਡੇ ਦੁਆਰਾ ਅੱਗੇ ਬਣਾਈ ਗਈ ਹਰ ਚੀਜ਼ ਦਾ ਆਧਾਰ ਬਣਨਗੇ।
 
 ## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
-[ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/)
+[ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/)
 
-ਇਹ ਪਾਠ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਬੇਸਿਕਸ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ, ਉਹ ਭਾਸ਼ਾ ਜੋ ਵੈੱਬ 'ਤੇ ਇੰਟਰੈਕਟਿਵਿਟੀ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ।
+ਇਹ ਪਾਠ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਬੁਨਿਆਦੀ ਪਹਲੂਆਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ, ਜੋ ਵੈੱਬ 'ਤੇ ਇੰਟਰਐਕਟਿਵਿਟੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
 
 > ਤੁਸੀਂ ਇਹ ਪਾਠ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
 
@@ -29,22 +46,54 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
 
-> 🎥 ਉੱਪਰ ਦਿੱਤੀਆਂ ਤਸਵੀਰਾਂ 'ਤੇ ਕਲਿਕ ਕਰੋ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਵੈਰੀਏਬਲ ਅਤੇ ਡਾਟਾ ਟਾਈਪਸ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ
+> 🎥 ਉੱਪਰ ਦਿੱਤੀਆਂ ਤਸਵੀਰਾਂ 'ਤੇ ਕਲਿਕ ਕਰੋ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਵੈਰੀਏਬਲ ਅਤੇ ਡਾਟਾ ਟਾਈਪਸ ਬਾਰੇ ਵੀਡੀਓਜ਼ ਦੇਖਣ ਲਈ
 
 ਆਓ ਵੈਰੀਏਬਲ ਅਤੇ ਉਹਨਾਂ ਡਾਟਾ ਟਾਈਪਸ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ ਜੋ ਉਹਨਾਂ ਨੂੰ ਭਰਦੇ ਹਨ!
 
+```mermaid
+mindmap
+  root((JavaScript Data))
+    Variables
+      let myVar
+      const PI = 3.14
+      var oldStyle
+    Primitive Types
+      number
+        42
+        3.14
+        -5
+      string
+        "Hello"
+        'World'
+        `Template`
+      boolean
+        true
+        false
+      undefined
+      null
+    Operations
+      Arithmetic
+        + - * / %
+      String Methods
+        concatenation
+        template literals
+      Type Conversion
+        implicit
+        explicit
+```
+
 ## ਵੈਰੀਏਬਲ
 
-ਵੈਰੀਏਬਲ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ ਮੁੱਖ ਬਲਾਕ ਹਨ। ਜਿਵੇਂ ਮੱਧਕਾਲੀ ਕਾਲ ਦੇ ਰਸਾਇਨ ਵਿਗਿਆਨੀ ਵੱਖ-ਵੱਖ ਪਦਾਰਥਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਲੇਬਲ ਵਾਲੇ ਜਾਰ ਵਰਤਦੇ ਸਨ, ਵੈਰੀਏਬਲ ਤੁਹਾਨੂੰ ਜਾਣਕਾਰੀ ਸਟੋਰ ਕਰਨ ਅਤੇ ਇਸ ਨੂੰ ਇੱਕ ਵਰਣਨਾਤਮਕ ਨਾਮ ਦੇਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਰਿਫਰ ਕਰ ਸਕੋ। ਕਿਸੇ ਦੀ ਉਮਰ ਯਾਦ ਰੱਖਣੀ ਹੈ? ਇਸਨੂੰ `age` ਨਾਮ ਦੇ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰੋ। ਕਿਸੇ ਯੂਜ਼ਰ ਦਾ ਨਾਮ ਟ੍ਰੈਕ ਕਰਨਾ ਹੈ? ਇਸਨੂੰ `userName` ਵਿੱਚ ਰੱਖੋ।
+ਵੈਰੀਏਬਲ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ ਬੁਨਿਆਦੀ ਇਮਾਰਤੀ ਬਲਾਕ ਹਨ। ਜਿਵੇਂ ਮੱਧਕਾਲੀ ਕਾਲ ਦੇ ਰਸਾਇਨ ਵਿਗਿਆਨੀਆਂ ਨੇ ਵੱਖ-ਵੱਖ ਪਦਾਰਥਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਲੇਬਲ ਵਾਲੇ ਜਾਰ ਵਰਤੇ, ਵੈਰੀਏਬਲ ਤੁਹਾਨੂੰ ਜਾਣਕਾਰੀ ਸਟੋਰ ਕਰਨ ਅਤੇ ਇਸ ਨੂੰ ਇੱਕ ਵਰਣਨਾਤਮਕ ਨਾਮ ਦੇਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਰਿਫਰ ਕਰ ਸਕੋ। ਕਿਸੇ ਦੀ ਉਮਰ ਯਾਦ ਰੱਖਣ ਦੀ ਲੋੜ ਹੈ? ਇਸਨੂੰ `age` ਨਾਮ ਦੇ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰੋ। ਕਿਸੇ ਯੂਜ਼ਰ ਦਾ ਨਾਮ ਟ੍ਰੈਕ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ? ਇਸਨੂੰ `userName` ਵਿੱਚ ਰੱਖੋ।
 
-ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਵੈਰੀਏਬਲ ਬਣਾਉਣ ਦੇ ਆਧੁਨਿਕ ਤਰੀਕੇ 'ਤੇ ਧਿਆਨ ਦੇਵਾਂਗੇ। ਇੱਥੇ ਤੁਸੀਂ ਜੋ ਤਕਨੀਕਾਂ ਸਿੱਖੋਗੇ ਉਹ ਭਾਸ਼ਾ ਦੇ ਵਿਕਾਸ ਦੇ ਸਾਲਾਂ ਅਤੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਕਮਿਊਨਿਟੀ ਦੁਆਰਾ ਵਿਕਸਿਤ ਕੀਤੀਆਂ ਗਈਆਂ ਸ੍ਰੇਸ਼ਠ ਪ੍ਰਥਾਵਾਂ ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ।
+ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਵੈਰੀਏਬਲ ਬਣਾਉਣ ਦੇ ਆਧੁਨਿਕ ਤਰੀਕੇ 'ਤੇ ਧਿਆਨ ਦੇਵਾਂਗੇ। ਇੱਥੇ ਤੁਸੀਂ ਜੋ ਤਕਨੀਕਾਂ ਸਿੱਖੋਗੇ ਉਹ ਜ਼ੁਬਾਨ ਦੇ ਵਿਕਾਸ ਦੇ ਸਾਲਾਂ ਅਤੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਕਮਿਊਨਿਟੀ ਦੁਆਰਾ ਵਿਕਸਿਤ ਕੀਤੀਆਂ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਦਾ ਪ੍ਰਤੀਨਿਧਿਤ ਕਰਦੀਆਂ ਹਨ।
 
-ਵੈਰੀਏਬਲ ਬਣਾਉਣ ਅਤੇ **ਘੋਸ਼ਿਤ ਕਰਨ** ਦਾ ਸਿੰਟੈਕਸ ਹੈ **[keyword] [name]**। ਇਹ ਦੋ ਭਾਗਾਂ ਤੋਂ ਬਣਿਆ ਹੁੰਦਾ ਹੈ:
+ਵੈਰੀਏਬਲ ਬਣਾਉਣ ਅਤੇ **ਘੋਸ਼ਿਤ ਕਰਨ** ਦਾ ਸਿੰਟੈਕਸ ਹੈ **[keyword] [name]**। ਇਹ ਦੋ ਹਿੱਸਿਆਂ ਤੋਂ ਬਣਿਆ ਹੈ:
 
-- **ਕੀਵਰਡ**। `let` ਵਰਤੋ ਜਦੋਂ ਵੈਰੀਏਬਲ ਬਦਲ ਸਕਦੇ ਹਨ, ਜਾਂ `const` ਜਦੋਂ ਮੁੱਲ ਸਥਿਰ ਰਹਿੰਦੇ ਹਨ।
+- **ਕੀਵਰਡ**। ਉਹ ਵੈਰੀਏਬਲ ਲਈ `let` ਵਰਤੋ ਜੋ ਬਦਲ ਸਕਦੇ ਹਨ, ਜਾਂ ਉਹ ਮੁੱਲਾਂ ਲਈ `const` ਜੋ ਸਥਿਰ ਰਹਿੰਦੇ ਹਨ।
 - **ਵੈਰੀਏਬਲ ਦਾ ਨਾਮ**, ਇਹ ਇੱਕ ਵਰਣਨਾਤਮਕ ਨਾਮ ਹੈ ਜੋ ਤੁਸੀਂ ਖੁਦ ਚੁਣਦੇ ਹੋ।
 
-✅ ਕੀਵਰਡ `let` ES6 ਵਿੱਚ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਸੀ ਅਤੇ ਤੁਹਾਡੇ ਵੈਰੀਏਬਲ ਨੂੰ ਇੱਕ _ਬਲਾਕ ਸਕੋਪ_ ਦਿੰਦਾ ਹੈ। ਇਹ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਤੁਸੀਂ ਪੁਰਾਣੇ `var` ਕੀਵਰਡ ਦੀ ਬਜਾਏ `let` ਜਾਂ `const` ਵਰਤੋ। ਅਸੀਂ ਅਗਲੇ ਹਿੱਸਿਆਂ ਵਿੱਚ ਬਲਾਕ ਸਕੋਪਸ ਬਾਰੇ ਵਧੇਰੇ ਵਿਸਥਾਰ ਵਿੱਚ ਕਵਰ ਕਰਾਂਗੇ।
+✅ ਕੀਵਰਡ `let` ES6 ਵਿੱਚ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਸੀ ਅਤੇ ਤੁਹਾਡੇ ਵੈਰੀਏਬਲ ਨੂੰ ਇੱਕ _ਬਲਾਕ ਸਕੋਪ_ ਦਿੰਦਾ ਹੈ। ਇਹ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਤੁਸੀਂ ਪੁਰਾਣੇ `var` ਕੀਵਰਡ ਦੀ ਬਜਾਏ `let` ਜਾਂ `const` ਵਰਤੋ। ਅਸੀਂ ਅਗਲੇ ਹਿੱਸਿਆਂ ਵਿੱਚ ਬਲਾਕ ਸਕੋਪਸ ਨੂੰ ਵਧੇਰੇ ਗਹਿਰਾਈ ਨਾਲ ਕਵਰ ਕਰਾਂਗੇ।
 
 ### ਟਾਸਕ - ਵੈਰੀਏਬਲ ਨਾਲ ਕੰਮ ਕਰਨਾ
 
@@ -59,123 +108,215 @@ CO_OP_TRANSLATOR_METADATA:
    - ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਸ ਵੈਰੀਏਬਲ ਲਈ ਮੈਮਰੀ ਵਿੱਚ ਸਥਾਨ ਅਲਾਟ ਕਰਦਾ ਹੈ
    - ਵੈਰੀਏਬਲ ਦੇ ਕੋਲ ਇਸ ਸਮੇਂ ਕੋਈ ਮੁੱਲ ਨਹੀਂ ਹੈ (undefined)
 
-2. **ਇਸਨੂੰ ਇੱਕ ਮੁੱਲ ਦਿਓ**। ਹੁਣ ਆਓ ਆਪਣੇ ਵੈਰੀਏਬਲ ਵਿੱਚ ਕੁਝ ਪਾਓ:
+2. **ਇਸਨੂੰ ਮੁੱਲ ਦਿਓ**। ਹੁਣ ਆਓ ਆਪਣੇ ਵੈਰੀਏਬਲ ਵਿੱਚ ਕੁਝ ਪਾਓ:
 
     ```javascript
     myVariable = 123;
     ```
 
    **ਅਸਾਈਨਮੈਂਟ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:**
-   - `=` ਆਪਰੇਟਰ ਸਾਡੇ ਵੈਰੀਏਬਲ ਨੂੰ 123 ਦਾ ਮੁੱਲ ਅਸਾਈਨ ਕਰਦਾ ਹੈ
-   - ਵੈਰੀਏਬਲ ਹੁਣ undefined ਹੋਣ ਦੀ ਬਜਾਏ ਇਸ ਮੁੱਲ ਨੂੰ ਰੱਖਦਾ ਹੈ
-   - ਤੁਸੀਂ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਹਰ ਜਗ੍ਹਾ `myVariable` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਮੁੱਲ ਨੂੰ ਰਿਫਰ ਕਰ ਸਕਦੇ ਹੋ
+   - `=` ਓਪਰੇਟਰ ਸਾਡੇ ਵੈਰੀਏਬਲ ਨੂੰ ਮੁੱਲ 123 ਅਸਾਈਨ ਕਰਦਾ ਹੈ
+   - ਵੈਰੀਏਬਲ ਹੁਣ ਇਸ ਮੁੱਲ ਨੂੰ ਰੱਖਦਾ ਹੈ ਨਾ ਕਿ undefined
+   - ਤੁਸੀਂ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਕਿਤੇ ਵੀ ਇਸ ਮੁੱਲ ਨੂੰ ਰਿਫਰ ਕਰ ਸਕਦੇ ਹੋ `myVariable` ਵਰਤ ਕੇ
 
-   > ਨੋਟ: ਇਸ ਪਾਠ ਵਿੱਚ `=` ਦੀ ਵਰਤੋਂ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਅਸੀਂ "ਅਸਾਈਨਮੈਂਟ ਆਪਰੇਟਰ" ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜੋ ਵੈਰੀਏਬਲ ਨੂੰ ਮੁੱਲ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਸਮਾਨਤਾ ਨੂੰ ਦਰਸਾਉਂਦਾ ਨਹੀਂ।
+   > ਨੋਟ: ਇਸ ਪਾਠ ਵਿੱਚ `=` ਦੇ ਵਰਤੋਂ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਅਸੀਂ "ਅਸਾਈਨਮੈਂਟ ਓਪਰੇਟਰ" ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜੋ ਵੈਰੀਏਬਲ ਨੂੰ ਮੁੱਲ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਬਰਾਬਰੀ ਨੂੰ ਦਰਸਾਉਂਦਾ ਨਹੀਂ।
 
-3. **ਇਸਨੂੰ ਸਮਾਰਟ ਤਰੀਕੇ ਨਾਲ ਕਰੋ**। ਅਸਲ ਵਿੱਚ, ਆਓ ਉਹ ਦੋ ਕਦਮ ਮਿਲਾ ਕੇ ਕਰੀਏ:
+3. **ਸਮਾਰਟ ਤਰੀਕੇ ਨਾਲ ਕਰੋ**। ਅਸਲ ਵਿੱਚ, ਆਓ ਉਹ ਦੋ ਕਦਮ ਮਿਲਾ ਕੇ ਕਰੀਏ:
 
     ```javascript
     let myVariable = 123;
     ```
 
     **ਇਹ ਤਰੀਕਾ ਜ਼ਿਆਦਾ ਕੁਸ਼ਲ ਹੈ:**
-    - ਤੁਸੀਂ ਇੱਕ ਹੀ ਕਥਨ ਵਿੱਚ ਵੈਰੀਏਬਲ ਨੂੰ ਘੋਸ਼ਿਤ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਮੁੱਲ ਅਸਾਈਨ ਕਰ ਰਹੇ ਹੋ
-    - ਇਹ ਵਿਕਾਸਕਾਰਾਂ ਵਿੱਚ ਮਿਆਰੀ ਅਭਿਆਸ ਹੈ
+    - ਤੁਸੀਂ ਇੱਕ ਹੀ ਬਿਆਨ ਵਿੱਚ ਵੈਰੀਏਬਲ ਘੋਸ਼ਿਤ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਮੁੱਲ ਅਸਾਈਨ ਕਰ ਰਹੇ ਹੋ
+    - ਇਹ ਡਿਵੈਲਪਰਾਂ ਵਿੱਚ ਮਿਆਰੀ ਅਭਿਆਸ ਹੈ
     - ਇਹ ਕੋਡ ਦੀ ਲੰਬਾਈ ਘਟਾਉਂਦਾ ਹੈ ਜਦੋਂ ਕਿ ਸਪਸ਼ਟਤਾ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ
 
-4. **ਆਪਣਾ ਮਨ ਬਦਲੋ**। ਜੇ ਅਸੀਂ ਇੱਕ ਵੱਖਰੀ ਸੰਖਿਆ ਸਟੋਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
+4. **ਆਪਣਾ ਮਨ ਬਦਲੋ**। ਜੇ ਅਸੀਂ ਵੱਖ-ਵੱਖ ਨੰਬਰ ਸਟੋਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
 
    ```javascript
    myVariable = 321;
    ```
 
    **ਰੀਅਸਾਈਨਮੈਂਟ ਨੂੰ ਸਮਝਣਾ:**
-   - ਵੈਰੀਏਬਲ ਹੁਣ 321 ਰੱਖਦਾ ਹੈ 123 ਦੀ ਬਜਾਏ
-   - ਪਿਛਲਾ ਮੁੱਲ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ – ਵੈਰੀਏਬਲ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਸਿਰਫ ਇੱਕ ਮੁੱਲ ਸਟੋਰ ਕਰਦੇ ਹਨ
-   - ਇਹ ਬਦਲਣਯੋਗਤਾ `let` ਨਾਲ ਘੋਸ਼ਿਤ ਕੀਤੇ ਵੈਰੀਏਬਲ ਦੀ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ
+   - ਵੈਰੀਏਬਲ ਹੁਣ 321 ਰੱਖਦਾ ਹੈ ਨਾ ਕਿ 123
+   - ਪਿਛਲਾ ਮੁੱਲ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ - ਵੈਰੀਏਬਲ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਸਿਰਫ ਇੱਕ ਮੁੱਲ ਸਟੋਰ ਕਰਦੇ ਹਨ
+   - ਇਹ ਮਿਊਟੇਬਿਲਿਟੀ `let` ਨਾਲ ਘੋਸ਼ਿਤ ਕੀਤੇ ਵੈਰੀਏਬਲ ਦੀ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ
+
+   ✅ ਇਸਨੂੰ ਅਜ਼ਮਾਓ! ਤੁਸੀਂ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਿੱਧੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਿਖ ਸਕਦੇ ਹੋ। ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਖੋਲ੍ਹੋ ਅਤੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਵਿੱਚ ਜਾਓ। ਕਨਸੋਲ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਇੱਕ ਪ੍ਰੰਪਟ ਮਿਲੇਗਾ; `let myVariable = 123` ਟਾਈਪ ਕਰੋ, ਰਿਟਰਨ ਦਬਾਓ, ਫਿਰ `myVariable` ਟਾਈਪ ਕਰੋ। ਕੀ ਹੁੰਦਾ ਹੈ? ਨੋਟ ਕਰੋ, ਤੁਸੀਂ ਅਗਲੇ ਪਾਠਾਂ ਵਿੱਚ ਇਹ ਸੰਕਲਪ ਵਧੇਰੇ ਸਿੱਖੋਗੇ।
+
+### 🧠 **ਵੈਰੀਏਬਲ ਮਾਸਟਰੀ ਚੈੱਕ: ਆਰਾਮਦਾਇਕ ਹੋਣਾ**
+
+**ਆਓ ਵੇਖੀਏ ਕਿ ਤੁਸੀਂ ਵੈਰੀਏਬਲ ਬਾਰੇ ਕਿਵੇਂ ਮਹਿਸੂਸ ਕਰ ਰਹੇ ਹੋ:**
+- ਕੀ ਤੁਸੀਂ ਵੈਰੀਏਬਲ ਨੂੰ ਘੋਸ਼ਿਤ ਕਰਨ ਅਤੇ ਅਸਾਈਨ ਕਰਨ ਦੇ ਫਰਕ ਨੂੰ ਸਮਝਾ ਸਕਦੇ ਹੋ?
+- ਕੀ ਹੁੰਦਾ ਹੈ ਜੇ ਤੁਸੀਂ ਵੈਰੀਏਬਲ ਨੂੰ ਘੋਸ਼ਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਸਨੂੰ ਵਰਤਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ?
+- ਤੁਸੀਂ ਕਿਸ ਸਮੇਂ `let` ਨੂੰ `const` ਦੇ ਉੱਤੇ ਚੁਣੋਗੇ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> Declared: let myVar
+    Declared --> Assigned: myVar = 123
+    Assigned --> Reassigned: myVar = 456
+    Assigned --> [*]: Variable ready!
+    Reassigned --> [*]: Updated value
+    
+    note right of Declared
+        Variable exists but
+        has no value (undefined)
+    end note
+    
+    note right of Assigned
+        Variable contains
+        the value 123
+    end note
+```
 
-   ✅ ਇਸਨੂੰ ਅਜ਼ਮਾਓ! ਤੁਸੀਂ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਿੱਧੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਿਖ ਸਕਦੇ ਹੋ। ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਖੋਲ੍ਹੋ ਅਤੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਵਿੱਚ ਜਾਓ। ਕੌਂਸੋਲ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਇੱਕ ਪ੍ਰਾਂਪਟ ਮਿਲੇਗਾ; `let myVariable = 123` ਟਾਈਪ ਕਰੋ, ਰਿਟਰਨ ਦਬਾਓ, ਫਿਰ `myVariable` ਟਾਈਪ ਕਰੋ। ਕੀ ਹੁੰਦਾ ਹੈ? ਨੋਟ ਕਰੋ, ਤੁਸੀਂ ਅਗਲੇ ਪਾਠਾਂ ਵਿੱਚ ਇਹ ਸੰਕਲਪ ਵਧੇਰੇ ਸਿੱਖੋਗੇ।
+> **ਤੁਰੰਤ ਸੁਝਾਅ**: ਵੈਰੀਏਬਲ ਨੂੰ ਲੇਬਲ ਵਾਲੇ ਸਟੋਰੇਜ ਬਾਕਸ ਵਾਂਗ ਸੋਚੋ। ਤੁਸੀਂ ਬਾਕਸ ਬਣਾਉਂਦੇ ਹੋ (`let`), ਇਸ ਵਿੱਚ ਕੁਝ ਪਾਉਂਦੇ ਹੋ (`=`), ਅਤੇ ਜ਼ਰੂਰਤ ਪੈਣ 'ਤੇ ਸਮੱਗਰੀ ਬਦਲ ਸਕਦੇ ਹੋ!
 
 ## ਕਾਂਸਟੈਂਟਸ
 
-ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਜਾਣਕਾਰੀ ਸਟੋਰ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ ਜੋ ਪ੍ਰੋਗਰਾਮ ਦੇ ਚਲਣ ਦੌਰਾਨ ਕਦੇ ਨਹੀਂ ਬਦਲਣੀ ਚਾਹੀਦੀ। ਕਾਂਸਟੈਂਟਸ ਨੂੰ ਉਹਨਾਂ ਗਣਿਤਕ ਸਿਧਾਂਤਾਂ ਵਾਂਗ ਸੋਚੋ ਜੋ ਯੂਕਲਿਡ ਨੇ ਪ੍ਰਾਚੀਨ ਯੂਨਾਨ ਵਿੱਚ ਸਥਾਪਿਤ ਕੀਤੇ ਸਨ – ਇੱਕ ਵਾਰ ਸਾਬਤ ਹੋਣ ਅਤੇ ਦਸਤਾਵੇਜ਼ ਬਣਨ ਤੋਂ ਬਾਅਦ, ਉਹ ਭਵਿੱਖ ਵਿੱਚ ਸਥਿਰ ਰਹੇ।
+ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਜਾਣਕਾਰੀ ਸਟੋਰ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੋ ਪ੍ਰੋਗਰਾਮ ਦੇ ਚਲਣ ਦੌਰਾਨ ਕਦੇ ਨਹੀਂ ਬਦਲਣੀ ਚਾਹੀਦੀ। ਕਾਂਸਟੈਂਟਸ ਨੂੰ ਉਹ ਗਣਿਤਕ ਸਿਧਾਂਤਾਂ ਵਾਂਗ ਸੋਚੋ ਜੋ ਯੂਕਲਿਡ ਨੇ ਪ੍ਰਾਚੀਨ ਯੂਨਾਨ ਵਿੱਚ ਸਥਾਪਿਤ ਕੀਤੇ - ਇੱਕ ਵਾਰ ਸਾਬਤ ਅਤੇ ਦਸਤਾਵੇਜ਼ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ, ਉਹ ਸਾਰੇ ਭਵਿੱਖ ਦੇ ਹਵਾਲੇ ਲਈ ਸਥਿਰ ਰਹੇ।
 
-ਕਾਂਸਟੈਂਟਸ ਵੈਰੀਏਬਲਾਂ ਵਾਂਗ ਹੀ ਕੰਮ ਕਰਦੇ ਹਨ, ਪਰ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਪਾਬੰਦੀ ਨਾਲ: ਜਦੋਂ ਤੁਸੀਂ ਉਹਨਾਂ ਦਾ ਮੁੱਲ ਅਸਾਈਨ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਬਦਲਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। ਇਹ ਅਸਥਿਰਤਾ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਮੁੱਲਾਂ ਨੂੰ ਅਨਜਾਣੇ ਤੌਰ 'ਤੇ ਬਦਲਣ ਤੋਂ ਰੋਕਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ।
+ਕਾਂਸਟੈਂਟਸ ਵੈਰੀਏਬਲਾਂ ਵਾਂਗ ਹੀ ਕੰਮ ਕਰਦੇ ਹਨ, ਪਰ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਪਾਬੰਦੀ ਨਾਲ: ਜਦੋਂ ਤੁਸੀਂ ਉਹਨਾਂ ਦਾ ਮੁੱਲ ਅਸਾਈਨ ਕਰਦੇ ਹੋ, ਇਸਨੂੰ ਬਦਲਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। ਇਹ ਅਸਥਿਰਤਾ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਮੁੱਲਾਂ ਨੂੰ ਅਨਜਾਣੇ ਤਬਦੀਲੀਆਂ ਤੋਂ ਰੋਕਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ।
 
-ਕਾਂਸਟੈਂਟ ਦੀ ਘੋਸ਼ਣਾ ਅਤੇ ਸ਼ੁਰੂਆਤ ਵੈਰੀਏਬਲ ਵਾਂਗ ਹੀ ਸੰਕਲਪਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ, ਸਿਰਫ `const` ਕੀਵਰਡ ਦੇ ਅਲੱਗ ਹੋਣ ਦੇ ਨਾਲ। ਕਾਂਸਟੈਂਟਸ ਨੂੰ ਆਮ ਤੌਰ 'ਤੇ ਸਾਰੇ ਅੱਖਰਾਂ ਵਿੱਚ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
+ਕਾਂਸਟੈਂਟ ਦੇ ਘੋਸ਼ਣਾ ਅਤੇ ਸ਼ੁਰੂਆਤ ਵੈਰੀਏਬਲ ਦੇ ਸਮੇਕਾਂਤਾਂ ਦੀ ਪਾਲਨਾ ਕਰਦੀ ਹੈ, `const` ਕੀਵਰਡ ਦੇ ਅਲਾਵਾ। ਕਾਂਸਟੈਂਟਸ ਆਮ ਤੌਰ 'ਤੇ ਸਾਰੇ ਅਪਰਕੇਸ ਅੱਖਰਾਂ ਨਾਲ ਘੋਸ਼ਿਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
 
 ```javascript
 const MY_VARIABLE = 123;
 ```
 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਬਣਾਉਂਦਾ ਹੈ** `MY_VARIABLE` ਨਾਮਕ ਇੱਕ ਕਾਂਸਟੈਂਟ ਜਿਸਦਾ ਮੁੱਲ 123 ਹੈ
-- **ਵਰਤਦਾ ਹੈ** ਕਾਂਸਟੈਂਟਸ ਲਈ ਅੱਪਰਕੇਸ ਨਾਮਕ ਰੀਤੀ
-- **ਰੋਕਦਾ ਹੈ** ਇਸ ਮੁੱਲ ਵਿੱਚ ਕੋਈ ਭਵਿੱਖ ਦੇ ਬਦਲਾਅ
+- **ਬਣਾਉਂਦਾ ਹੈ** ਇੱਕ ਕਾਂਸਟੈਂਟ `MY_VARIABLE` ਜਿਸਦਾ ਮੁੱਲ 123 ਹੈ
+- **ਵਰਤਦਾ ਹੈ** ਕਾਂਸਟੈਂਟਸ ਲਈ ਅਪਰਕੇਸ ਨਾਮਕ ਰੀਤੀ
+- **ਰੋਕਦਾ ਹੈ** ਇਸ ਮੁੱਲ ਵਿੱਚ ਕੋਈ ਭਵਿੱਖ ਦੀ ਤਬਦੀਲੀ
 
 ਕਾਂਸਟੈਂਟਸ ਦੇ ਦੋ ਮੁੱਖ ਨਿਯਮ ਹਨ:
 
-- **ਤੁਹਾਨੂੰ ਤੁਰੰਤ ਮੁੱਲ ਦੇਣਾ ਪਵੇਗਾ** – ਕੋਈ ਖਾਲੀ ਕਾਂਸਟੈਂਟਸ ਦੀ ਆਗਿਆ ਨਹੀਂ ਹੈ!
-- **ਤੁਸੀਂ ਉਸ ਮੁੱਲ ਨੂੰ ਕਦੇ ਬਦਲ ਨਹੀਂ ਸਕਦੇ** – ਜੇ ਤੁਸੀਂ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਤਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੱਕ ਗਲਤੀ ਦਿਖਾਏਗਾ। ਆਓ ਦੇਖੀਏ ਕਿ ਮੈਂ ਕੀ ਕਹਿ ਰਿਹਾ ਹਾਂ:
+- **ਤੁਹਾਨੂੰ ਤੁਰੰਤ ਮੁੱਲ ਦੇਣਾ ਪਵੇਗਾ** - ਕੋਈ ਖਾਲੀ ਕਾਂਸਟੈਂਟਸ ਦੀ ਆਗਿਆ ਨਹੀਂ ਹੈ!
+- **ਤੁਸੀਂ ਇਸ ਮੁੱਲ ਨੂੰ ਕਦੇ ਬਦਲ ਨਹੀਂ ਸਕਦੇ** - ਜੇ ਤੁਸੀਂ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਤਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਲਤੀ ਸੁਟੇਗਾ। ਆਓ ਵੇਖੀਏ ਕਿ ਮੈਂ ਕੀ ਕਹਿ ਰਿਹਾ ਹਾਂ:
 
-   **ਸਧਾਰਨ ਮੁੱਲ** - ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ:
+   **ਸਧਾਰਨ ਮੁੱਲ** - ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਸਵੀਕਾਰ ਨਹੀਂ ਹੈ:
    
       ```javascript
       const PI = 3;
-      PI = 4; // not allowed
+      PI = 4; // ਸਵੀਕਾਰ ਨਹੀਂ
       ```
 
-   **ਤੁਹਾਨੂੰ ਕੀ ਯਾਦ ਰੱਖਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ:**
-   - **ਰੀਅਸਾਈਨ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼** ਕਰਨ ਨਾਲ ਗਲਤੀ ਹੋਵੇਗੀ
-   - **ਮਹੱਤਵਪੂਰਨ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲਣ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ**
-   - **ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ** ਕਿ ਮੁੱਲ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਦੌਰਾਨ ਸਥਿਰ ਰਹੇ
+   **ਤੁਹਾਨੂੰ ਕੀ ਯਾਦ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ:**
+   - **ਕੋਸ਼ਿਸ਼ਾਂ** ਕਾਂਸਟੈਂਟ ਨੂੰ ਮੁੜ ਅਸਾਈਨ ਕਰਨ ਦੀ ਗਲਤੀ ਪੈਦਾ ਕਰੇਗੀ
+   - **ਰੱਖਦਾ ਹੈ** ਮਹੱਤਵਪੂਰਨ ਮੁੱਲਾਂ ਨੂੰ ਅਨਜਾਣੇ ਤਬਦੀਲੀਆਂ ਤੋਂ
+   - **ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ** ਮੁੱਲ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਸਥਿਰ ਰਹੇ
 
-   **ਆਬਜੈਕਟ ਰੀਫਰੈਂਸ ਸੁਰੱਖਿਅਤ ਹੈ** - ਹੇਠਾਂ ਦਿੱਤਾ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ:
+   **ਆਬਜੈਕਟ ਰੀਫਰੈਂਸ ਸੁਰੱਖਿਅਤ ਹੈ** - ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਸਵੀਕਾਰ ਨਹੀਂ ਹੈ:
    
       ```javascript
       const obj = { a: 3 };
-      obj = { b: 5 } // not allowed
+      obj = { b: 5 } // ਸਵੀਕਾਰ ਨਹੀਂ
       ```
 
    **ਇਹ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝਣਾ:**
-   - **ਪੂਰੇ ਆਬਜੈਕਟ ਨੂੰ ਨਵੇਂ ਨਾਲ ਬਦਲਣ ਤੋਂ ਰੋਕਦਾ ਹੈ**
-   - **ਮੂਲ ਆਬਜੈਕਟ ਦੇ ਰੀਫਰੈਂਸ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਦਾ ਹੈ**
-   - **ਮੈਮਰੀ ਵਿੱਚ ਆਬਜੈਕਟ ਦੀ ਪਛਾਣ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ**
+   - **ਰੋਕਦਾ ਹੈ** ਪੂਰੇ ਆਬਜੈਕਟ ਨੂੰ ਨਵੇਂ ਨਾਲ ਬਦਲਣ ਤੋਂ
+   - **ਸੁਰੱਖਿਅਤ ਕਰਦਾ ਹੈ** ਮੂਲ ਆਬਜੈਕਟ ਲਈ ਰੀਫਰੈਂਸ
+   - **ਮੈਮਰੀ ਵਿੱਚ** ਆਬਜੈਕਟ ਦੀ ਪਛਾਣ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ
 
-    **ਆਬਜੈਕਟ ਦਾ ਮੁੱਲ ਸੁਰੱਖਿਅਤ ਨਹੀਂ ਹੈ** - ਹੇਠਾਂ ਦਿੱਤਾ ਕੰਮ ਸਵੀਕਾਰਯੋਗ ਹੈ:
+    **ਆਬਜੈਕਟ ਮੁੱਲ ਸੁਰੱਖਿਅਤ ਨਹੀਂ ਹੈ** - ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਸਵੀਕਾਰ ਹੈ:
     
       ```javascript
       const obj = { a: 3 };
-      obj.a = 5;  // allowed
+      obj.a = 5;  // ਸਵੀਕਾਰ ਹੈ
       ```
 
       **ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
-      - **ਸੰਪਤੀ ਮੁੱਲ ਨੂੰ ਸੋਧਦਾ ਹੈ** ਜੋ ਆਬਜੈਕਟ ਦੇ ਅੰਦਰ ਹੈ
-      - **ਉਹੀ ਆਬਜੈਕਟ ਰੀਫਰੈਂਸ ਰੱਖਦਾ ਹੈ**
-      - **ਦਿਖਾਉਂਦਾ ਹੈ** ਕਿ ਆਬਜੈਕਟ ਦੀ ਸਮੱਗਰੀ ਬਦਲ ਸਕਦੀ ਹੈ ਜਦੋਂ ਕਿ ਰੀਫਰੈਂਸ ਸਥਿਰ ਰਹਿੰਦਾ ਹੈ
+      - **ਸੰਪਤੀ ਮੁੱਲ ਨੂੰ** ਆਬਜੈਕਟ ਦੇ ਅੰਦਰ ਬਦਲਦਾ ਹੈ
+      - **ਉਹੀ ਆਬਜੈਕਟ ਰੀਫਰੈਂਸ** ਰੱਖਦਾ ਹੈ
+      - **ਦਰਸਾਉਂਦਾ ਹੈ** ਕਿ ਆਬਜੈਕਟ ਦੀ ਸਮੱਗਰੀ ਬਦਲ ਸਕਦੀ ਹੈ ਜਦੋਂ ਕਿ ਰੀਫਰੈਂਸ ਸਥਿਰ ਰਹਿੰਦਾ ਹੈ
 
-   > ਨੋਟ ਕਰੋ, ਇੱਕ `const` ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਰੀਫਰੈਂਸ ਨੂੰ ਰੀਅਸਾਈਨਮੈਂਟ ਤੋਂ ਸੁਰੱਖਿਅਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਮੁੱਲ _ਅਸਥਿਰ_ ਨਹੀਂ ਹੈ ਅਤੇ ਬਦਲ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜੇਕਰ ਇਹ ਇੱਕ ਜਟਿਲ ਬਣਤਰ ਜਿਵੇਂ ਕਿ ਆਬਜੈਕਟ ਹੈ।
+   > ਨੋਟ ਕਰੋ, ਇੱਕ `const` ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਰੀਫਰੈਂਸ ਮੁੜ ਅਸਾਈਨਮੈਂਟ ਤੋਂ ਸੁਰੱਖਿਅਤ ਹੈ। ਮੁੱਲ _ਅਸਥਿਰ_ ਨਹੀਂ ਹੈ ਅਤੇ ਬਦਲ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜੇਕਰ ਇਹ ਇੱਕ ਜਟਿਲ ਬਣਤਰ ਜਿਵੇਂ ਕਿ ਆਬਜੈਕਟ ਹੈ।
 
 ## ਡਾਟਾ ਟਾਈਪਸ
 
-ਜਾਵਾਸਕ੍ਰਿਪਟ ਜਾਣਕਾਰੀ ਨੂੰ ਵੱਖ-ਵੱਖ ਸ਼੍ਰੇਣੀਆਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ, ਜਿਨ੍ਹਾਂ ਨੂੰ ਡਾਟਾ ਟਾਈਪਸ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਸੰਕਲਪ ਉਸ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਵੇਂ ਪ੍ਰਾਚੀਨ ਵਿਦਵਾਨਾਂ ਨੇ ਗਿਆਨ ਨੂੰ ਸ਼੍ਰੇਣੀਬੱਧ ਕੀਤਾ – ਅਰਸਤੂ ਨੇ ਵੱਖ-ਵੱਖ ਤਰ੍ਹਾਂ ਦੇ ਤਰਕਾਂ ਵਿੱਚ ਅੰਤਰ ਕੀਤਾ, ਇਹ ਜਾਣਦੇ ਹੋਏ ਕਿ ਤਰਕਸ਼ੀਲ ਸਿਧਾਂਤਾਂ ਨੂੰ ਕਵਿਤਾ, ਗਣਿਤ ਅਤੇ ਕੁਦਰਤੀ ਦਾਰਸ਼ਨਿਕਤਾ 'ਤੇ ਇੱਕਸਾਰ ਨਹੀਂ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ।
+ਜਾਵਾਸਕ੍ਰਿਪਟ ਜਾਣਕਾਰੀ ਨੂੰ ਵੱਖ-ਵੱਖ ਸ਼੍ਰੇਣੀਆਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ, ਜਿਨ੍ਹਾਂ ਨੂੰ ਡਾਟਾ ਟਾਈਪਸ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਸੰਕਲਪ ਉਸ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਵੇਂ ਪ੍ਰਾਚੀਨ ਵਿਦਵਾਨਾਂ ਨੇ ਗਿਆਨ ਨੂੰ ਸ਼੍ਰੇਣੀਬੱਧ ਕੀਤਾ - ਅਰਸਤੂ ਨੇ ਵੱਖ-ਵੱਖ ਤਰ੍ਹਾਂ ਦੇ ਤਰਕਾਂ ਵਿੱਚ ਫਰਕ ਕੀਤਾ, ਇਹ ਜਾਣਦੇ ਹੋਏ ਕਿ ਕਵਿਤਾ, ਗਣਿਤ ਅਤੇ ਕੁਦਰਤੀ ਦਰਸ਼ਨ 'ਤੇ ਤਰਕਸ਼ੀਲ ਸਿਧਾਂਤਾਂ ਨੂੰ ਇੱਕਸਾਰ ਨਹੀਂ ਲਗਾਇਆ ਜਾ ਸਕਦਾ।
 
-ਡਾਟਾ ਟਾਈਪਸ ਮਹੱਤਵਪੂਰਨ ਹਨ ਕਿਉਂਕਿ ਵੱਖ-ਵੱਖ ਕਾਰਵਾਈਆਂ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੀ ਜਾਣਕਾਰੀ ਨਾਲ ਕੰਮ ਕਰਦੀਆਂ ਹਨ। ਜਿਵੇਂ ਤੁਸੀਂ ਕਿਸੇ ਵਿਅਕਤੀ ਦੇ ਨਾਮ 'ਤੇ ਅੰਕਗਣਿਤ ਨਹੀਂ ਕਰ ਸਕਦੇ ਜਾਂ ਗਣਿਤਕ ਸਮੀਕਰਨ ਨੂੰ ਅਲਫਾਬੈਟਿਕਲ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਹਰ ਕਾਰਵਾਈ ਲਈ ਉਚਿਤ ਡਾਟਾ ਟਾਈਪ ਦੀ ਲੋੜ ਰੱਖਦਾ ਹੈ। ਇਸਨੂੰ ਸਮਝਣ ਨਾਲ ਗਲਤੀਆਂ ਰੋਕਣ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ ਅਤੇ ਤੁਹਾਡਾ ਕੋਡ ਹੋਰ ਭਰੋਸੇਯੋਗ ਬਣਦਾ ਹੈ।
+ਡਾਟਾ ਟਾਈਪਸ ਮਹੱਤਵਪੂਰਨ ਹਨ ਕਿਉਂਕਿ ਵੱਖ-ਵੱਖ ਕਾਰਵਾਈਆਂ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੀ ਜਾਣਕਾਰੀ ਨਾਲ ਕੰਮ ਕਰਦੀਆਂ ਹਨ। ਜਿਵੇਂ ਤੁਸੀਂ ਕਿਸੇ ਵਿਅਕਤੀ ਦੇ ਨਾਮ 'ਤੇ ਗਣਿਤ ਨਹੀਂ ਕਰ ਸਕਦੇ ਜਾਂ ਗਣਿਤਕ ਸਮੀਕਰਨ ਨੂੰ ਅਲਫਾਬੈਟਿਕਲ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਹਰ ਕਾਰਵਾਈ ਲਈ ਉਚਿਤ ਡਾਟਾ ਟਾਈਪ ਦੀ ਲੋੜ ਰੱਖਦਾ ਹੈ। ਇਸਨੂੰ ਸਮਝਣ ਨਾਲ ਗਲਤੀਆਂ ਰੋਕੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਅਤੇ ਤੁਹਾਡਾ ਕੋਡ ਹੋਰ ਭਰੋਸੇਯੋਗ ਬਣਦਾ ਹੈ।
+
+ਵੈਰੀਏਬਲ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਨੰਬਰ ਅਤੇ ਲਿਖਤ। ਇਹ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ ਮੁੱਲਾਂ ਨੂੰ **ਡਾਟਾ ਟਾਈਪਸ** ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਡਾਟਾ ਟਾਈਪਸ ਸੌਫਟਵੇਅਰ ਵਿਕਾਸ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂ
+ਦੋ ਜਾਂ ਵਧੇਰੇ ਸਟ੍ਰਿੰਗਜ਼ ਨੂੰ **ਜੋੜਨ** ਲਈ, ਜਾਂ ਉਨ੍ਹਾਂ ਨੂੰ ਇਕੱਠੇ ਕਰਨ ਲਈ, `+` ਓਪਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰੋ।
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+```
 
-ਵੈਰੀਏਬਲ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਸੰਖਿਆਵਾਂ ਅਤੇ ਟੈਕਸਟ। ਇਹ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ ਮੁੱਲਾਂ ਨੂੰ **ਡਾਟਾ ਟਾਈਪਸ** ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਡਾਟਾ ਟਾਈਪਸ ਸਾਫਟਵੇਅਰ ਵਿਕਾਸ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਹਨ ਕਿਉਂਕਿ ਇਹ ਵਿਕਾਸਕਾਰਾਂ ਨੂੰ ਇਹ ਫੈਸਲਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਕਿ ਕੋਡ ਕਿਵੇਂ ਲਿਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਸਾਫਟਵੇਅਰ ਕਿਵੇਂ ਚੱਲਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਕੁਝ ਡਾਟਾ ਟਾਈਪਸ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਕਿਸੇ ਮੁੱਲ ਵਿੱਚ ਵਾਧੂ ਜਾਣਕਾਰੀ ਨੂੰ ਬਦਲਣ ਜਾਂ ਕੱਢਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ।
+**ਹਰ ਕਦਮ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
+- **ਕਈ ਸਟ੍ਰਿੰਗਜ਼ ਨੂੰ** `+` ਓਪਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜੋੜਦਾ ਹੈ
+- ਪਹਿਲੇ ਉਦਾਹਰਨ ਵਿੱਚ ਸਟ੍ਰਿੰਗਜ਼ ਨੂੰ ਬਿਨਾਂ ਖਾਲੀ ਥਾਂ ਦੇ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਜੋੜਦਾ ਹੈ
+- ਪੜ੍ਹਨ ਯੋਗ ਬਣਾਉਣ ਲਈ ਸਟ੍ਰਿੰਗਜ਼ ਦੇ ਵਿਚਕਾਰ ਖਾਲੀ ਥਾਂ `" "` ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ
+- **ਸਹੀ ਫਾਰਮੈਟਿੰਗ** ਲਈ ਅੰਕ-ਚਿੰਨ੍ਹ ਜਿਵੇਂ ਕਿ ਕਾਮਾ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ
 
-✅ ਡਾਟਾ ਟਾਈਪਸ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਪ੍ਰਿਮਿਟਿਵਸ ਵੀ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਭਾਸ਼ਾ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ ਸਭ ਤੋਂ ਨੀਵਾਂ-ਸਤਰ ਦੇ ਡਾਟਾ ਟਾਈਪਸ ਹਨ। 7 ਪ੍ਰਿਮਿਟਿਵ ਡਾਟਾ ਟਾਈਪਸ ਹਨ: string,
-ਤੁਹਾਨੂੰ ਆਪਣੇ ਫਾਰਮੈਟਿੰਗ ਦੇ ਲਕਸ਼ਾਂ ਨੂੰ ਦੋਵੇਂ ਤਰੀਕਿਆਂ ਨਾਲ ਹਾਸਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਟੈਂਪਲੇਟ ਲਿਟਰਲਜ਼ ਕਿਸੇ ਵੀ ਖਾਲੀ ਥਾਂ ਅਤੇ ਲਾਈਨ ਬ੍ਰੇਕਾਂ ਦਾ ਸਤਿਕਾਰ ਕਰਨਗੇ।
+✅ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ `1 + 1 = 2` ਕਿਉਂ ਹੈ, ਪਰ `'1' + '1' = 11` ਕਿਉਂ ਹੈ? ਸੋਚੋ। `'1' + 1` ਬਾਰੇ ਕੀ ਖਿਆਲ ਹੈ?
 
-✅ ਤੁਸੀਂ ਟੈਂਪਲੇਟ ਲਿਟਰਲ ਕਦੋਂ ਵਰਤੋਗੇ ਬਨਾਮ ਸਧਾਰਨ ਸਟ੍ਰਿੰਗ?
+**ਟੈਂਪਲੇਟ ਲਿਟਰਲਜ਼** ਸਟ੍ਰਿੰਗਜ਼ ਨੂੰ ਫਾਰਮੈਟ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਤਰੀਕਾ ਹੈ, ਪਰ ਇਸ ਵਿੱਚ quotes ਦੀ ਬਜਾਏ backtick ਦੀ ਵਰਤੋਂ ਹੁੰਦੀ ਹੈ। ਜੋ ਕੁਝ ਸਧਾਰਨ ਟੈਕਸਟ ਨਹੀਂ ਹੈ, ਉਸਨੂੰ `${ }` ਪਲੇਸਹੋਲਡਰ ਵਿੱਚ ਰੱਖਣਾ ਪੈਂਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਕੋਈ ਵੀ ਵੈਰੀਏਬਲ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜੋ ਸਟ੍ਰਿੰਗ ਹੋ ਸਕਦੇ ਹਨ।
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+**ਹਰ ਹਿੱਸੇ ਨੂੰ ਸਮਝੋ:**
+- ਟੈਂਪਲੇਟ ਲਿਟਰਲਜ਼ ਬਣਾਉਣ ਲਈ **quotes ਦੀ ਬਜਾਏ** backticks `` ` `` ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ
+- `${}` ਪਲੇਸਹੋਲਡਰ ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ **ਵੈਰੀਏਬਲਜ਼ ਨੂੰ ਸਿੱਧੇ ਸ਼ਾਮਲ** ਕਰਦਾ ਹੈ
+- **ਜਿਵੇਂ ਲਿਖਿਆ ਗਿਆ ਹੈ, ਖਾਲੀ ਥਾਂ ਅਤੇ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਸੁਰੱਖਿਅਤ** ਕਰਦਾ ਹੈ
+- **ਵੈਰੀਏਬਲਾਂ ਨਾਲ ਜਟਿਲ ਸਟ੍ਰਿੰਗਜ਼ ਬਣਾਉਣ ਦਾ ਇੱਕ ਸਾਫ਼ ਤਰੀਕਾ** ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
+
+ਤੁਹਾਡੇ ਫਾਰਮੈਟਿੰਗ ਦੇ ਲਕਸ਼ਾਂ ਨੂੰ ਦੋਵੇਂ ਤਰੀਕਿਆਂ ਨਾਲ ਹਾਸਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਟੈਂਪਲੇਟ ਲਿਟਰਲਜ਼ ਖਾਲੀ ਥਾਂ ਅਤੇ ਲਾਈਨ ਬ੍ਰੇਕਾਂ ਦਾ ਪੂਰਾ ਧਿਆਨ ਰੱਖਦੇ ਹਨ।
+
+✅ ਤੁਸੀਂ ਟੈਂਪਲੇਟ ਲਿਟਰਲ ਕਦੋਂ ਵਰਤੋਂਗੇ ਅਤੇ ਸਧਾਰਨ ਸਟ੍ਰਿੰਗ ਕਦੋਂ?
+
+### 🔤 **ਸਟ੍ਰਿੰਗ ਮਾਹਰਤਾ ਚੈੱਕ: ਟੈਕਸਟ ਮੈਨਿਪੂਲੇਸ਼ਨ ਵਿੱਚ ਭਰੋਸਾ**
+
+**ਆਪਣੀਆਂ ਸਟ੍ਰਿੰਗ ਸਿੱਖਣ ਦੀਆਂ ਯੋਗਤਾਵਾਂ ਦਾ ਮੁਲਾਂਕਣ ਕਰੋ:**
+- ਕੀ ਤੁਸੀਂ ਸਮਝਾ ਸਕਦੇ ਹੋ ਕਿ `'1' + '1'` `'11'` ਕਿਉਂ ਹੈ ਨਾ ਕਿ `2`?
+- ਤੁਹਾਨੂੰ ਕਿਹੜਾ ਸਟ੍ਰਿੰਗ ਤਰੀਕਾ ਵਧੇਰੇ ਪੜ੍ਹਨ ਯੋਗ ਲੱਗਦਾ ਹੈ: ਜੋੜਨ ਜਾਂ ਟੈਂਪਲੇਟ ਲਿਟਰਲਜ਼?
+- ਕੀ ਹੁੰਦਾ ਹੈ ਜੇ ਤੁਸੀਂ ਸਟ੍ਰਿੰਗ ਦੇ ਆਸ-ਪਾਸ quotes ਭੁੱਲ ਜਾਂਦੇ ਹੋ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> PlainText: "Hello"
+    [*] --> Variable: name = "Alice"
+    PlainText --> Concatenated: + " " + name
+    Variable --> Concatenated
+    PlainText --> Template: `Hello ${name}`
+    Variable --> Template
+    Concatenated --> Result: "Hello Alice"
+    Template --> Result
+    
+    note right of Concatenated
+        Traditional method
+        More verbose
+    end note
+    
+    note right of Template
+        Modern ES6 syntax
+        Cleaner & more readable
+    end note
+```
+
+> **ਪ੍ਰੋ ਟਿਪ**: ਟੈਂਪਲੇਟ ਲਿਟਰਲਜ਼ ਆਮ ਤੌਰ 'ਤੇ ਜਟਿਲ ਸਟ੍ਰਿੰਗ ਬਣਾਉਣ ਲਈ ਪਸੰਦ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਕਿਉਂਕਿ ਇਹ ਵਧੇਰੇ ਪੜ੍ਹਨ ਯੋਗ ਹਨ ਅਤੇ ਬਹੁ-ਲਾਈਨ ਸਟ੍ਰਿੰਗਜ਼ ਨੂੰ ਬਹੁਤ ਹੀ ਵਧੀਆ ਢੰਗ ਨਾਲ ਸੰਭਾਲਦੇ ਹਨ!
 
 ### ਬੂਲੀਅਨ
 
-ਬੂਲੀਅਨ ਸਧਾਰਨ ਡਾਟਾ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਰੂਪ ਹੈ: ਇਹ ਸਿਰਫ ਦੋ ਮੁੱਲਾਂ ਨੂੰ ਰੱਖ ਸਕਦੇ ਹਨ – `true` ਜਾਂ `false`। ਇਹ ਦੋਹਰੇ ਤਰਕ ਪ੍ਰਣਾਲੀ 19ਵੀਂ ਸਦੀ ਦੇ ਗਣਿਤਜੀਵਨ ਜਾਰਜ ਬੂਲ ਦੇ ਕੰਮ ਤੋਂ ਪ੍ਰੇਰਿਤ ਹੈ, ਜਿਸ ਨੇ ਬੂਲੀਅਨ ਬੀਜਗਣਿਤ ਵਿਕਸਿਤ ਕੀਤੀ।
+ਬੂਲੀਅਨ ਡਾਟਾ ਦਾ ਸਭ ਤੋਂ ਸਧਾਰਨ ਰੂਪ ਹੈ: ਇਹ ਸਿਰਫ ਦੋ ਮੁੱਲ ਰੱਖ ਸਕਦੇ ਹਨ – `true` ਜਾਂ `false`। ਇਹ ਬਾਈਨਰੀ ਲਾਜਿਕ ਸਿਸਟਮ 19ਵੀਂ ਸਦੀ ਦੇ ਗਣਿਤਜੀ George Boole ਦੇ ਕੰਮ ਤੋਂ ਆਉਂਦਾ ਹੈ, ਜਿਸ ਨੇ ਬੂਲੀਅਨ ਅਲਜਬਰਾ ਵਿਕਸਿਤ ਕੀਤੀ।
 
-ਇਨ੍ਹਾਂ ਦੀ ਸਧਾਰਨਤਾ ਦੇ ਬਾਵਜੂਦ, ਬੂਲੀਅਨ ਪ੍ਰੋਗਰਾਮ ਲਾਜਿਕ ਲਈ ਬਹੁਤ ਜ਼ਰੂਰੀ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹਾਲਾਤਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਫੈਸਲੇ ਕਰਨ ਯੋਗ ਬਣਾਉਂਦੇ ਹਨ – ਜਿਵੇਂ ਕਿ ਯੂਜ਼ਰ ਲੌਗਇਨ ਹੈ ਜਾਂ ਨਹੀਂ, ਬਟਨ ਕਲਿਕ ਕੀਤਾ ਗਿਆ ਸੀ ਜਾਂ ਨਹੀਂ, ਜਾਂ ਕੁਝ ਮਾਪਦੰਡ ਪੂਰੇ ਹੋਏ ਹਨ ਜਾਂ ਨਹੀਂ।
+ਇਹਨਾਂ ਦੀ ਸਧਾਰਨਤਾ ਦੇ ਬਾਵਜੂਦ, ਬੂਲੀਅਨ ਪ੍ਰੋਗਰਾਮ ਲਾਜਿਕ ਲਈ ਬਹੁਤ ਜ਼ਰੂਰੀ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹਾਲਾਤਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਫੈਸਲੇ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦੇ ਹਨ – ਜਿਵੇਂ ਕਿ ਯੂਜ਼ਰ ਲੌਗਇਨ ਹੈ ਜਾਂ ਨਹੀਂ, ਕੀ ਬਟਨ ਕਲਿਕ ਕੀਤਾ ਗਿਆ ਸੀ, ਜਾਂ ਕੀ ਕੁਝ ਮਾਪਦੰਡ ਪੂਰੇ ਕੀਤੇ ਗਏ ਹਨ।
 
-ਬੂਲੀਅਨ ਸਿਰਫ ਦੋ ਮੁੱਲਾਂ ਹੋ ਸਕਦੇ ਹਨ: `true` ਜਾਂ `false`। ਬੂਲੀਅਨ ਇਹ ਫੈਸਲਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਕਿ ਜਦੋਂ ਕੁਝ ਹਾਲਾਤ ਪੂਰੇ ਹੋਣ, ਤਾਂ ਕੌਣ-ਕੌਣ ਦੀਆਂ ਕੋਡ ਲਾਈਨਾਂ ਚਲਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਬਹੁਤ ਸਾਰੇ ਮਾਮਲਿਆਂ ਵਿੱਚ, [ਓਪਰੇਟਰ](../../../../2-js-basics/1-data-types) ਬੂਲੀਅਨ ਦਾ ਮੁੱਲ ਸੈਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਅਤੇ ਤੁਸੀਂ ਅਕਸਰ ਵੇਖੋਗੇ ਅਤੇ ਲਿਖੋਗੇ ਕਿ ਵੈਰੀਏਬਲ ਸ਼ੁਰੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਜਾਂ ਉਹਨਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਇੱਕ ਓਪਰੇਟਰ ਨਾਲ ਅਪਡੇਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
+ਬੂਲੀਅਨ ਸਿਰਫ ਦੋ ਮੁੱਲ ਰੱਖ ਸਕਦੇ ਹਨ: `true` ਜਾਂ `false`। ਬੂਲੀਅਨ ਇਹ ਫੈਸਲਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਕਿ ਜਦੋਂ ਕੁਝ ਹਾਲਾਤ ਪੂਰੇ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਤਾਂ ਕਿਹੜੀਆਂ ਕੋਡ ਲਾਈਨਾਂ ਚਲਾਈਆਂ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਬਹੁਤ ਸਾਰੀਆਂ ਸਥਿਤੀਆਂ ਵਿੱਚ, [operators](../../../../2-js-basics/1-data-types) ਬੂਲੀਅਨ ਦਾ ਮੁੱਲ ਸੈਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਅਤੇ ਤੁਸੀਂ ਅਕਸਰ ਵੇਖੋਗੇ ਕਿ ਵੈਰੀਏਬਲਜ਼ ਨੂੰ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਾਂ ਉਨ੍ਹਾਂ ਦੇ ਮੁੱਲ ਨੂੰ ਇੱਕ ਓਪਰੇਟਰ ਨਾਲ ਅਪਡੇਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
 
 ```javascript
 let myTrueBool = true;
@@ -183,42 +324,174 @@ let myFalseBool = false;
 ```
 
 **ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**
-- **ਬਣਾਇਆ** ਇੱਕ ਵੈਰੀਏਬਲ ਜੋ ਬੂਲੀਅਨ ਮੁੱਲ `true` ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ
-- **ਦਿਖਾਇਆ** ਕਿ ਬੂਲੀਅਨ ਮੁੱਲ `false` ਨੂੰ ਕਿਵੇਂ ਸਟੋਰ ਕਰਨਾ ਹੈ
-- **ਵਰਤਿਆ** ਸਹੀ ਕੀਵਰਡ `true` ਅਤੇ `false` (ਕੋਈ ਕੋਟਸ ਦੀ ਲੋੜ ਨਹੀਂ)
-- **ਤਿਆਰ ਕੀਤਾ** ਇਹ ਵੈਰੀਏਬਲਜ਼ ਨੂੰ ਸ਼ਰਤੀ ਬਿਆਨਾਂ ਵਿੱਚ ਵਰਤਣ ਲਈ
+- **ਇੱਕ ਵੈਰੀਏਬਲ ਬਣਾਈ** ਜੋ ਬੂਲੀਅਨ ਮੁੱਲ `true` ਸਟੋਰ ਕਰਦੀ ਹੈ
+- **ਦਿਖਾਇਆ** ਕਿ ਬੂਲੀਅਨ ਮੁੱਲ `false` ਕਿਵੇਂ ਸਟੋਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ
+- **ਸਹੀ keywords** `true` ਅਤੇ `false` ਦੀ ਵਰਤੋਂ ਕੀਤੀ (quotes ਦੀ ਲੋੜ ਨਹੀਂ)
+- **ਇਨ੍ਹਾਂ ਵੈਰੀਏਬਲਾਂ ਨੂੰ** ਸ਼ਰਤੀ ਬਿਆਨਾਂ ਵਿੱਚ ਵਰਤਣ ਲਈ ਤਿਆਰ ਕੀਤਾ
+
+✅ ਇੱਕ ਵੈਰੀਏਬਲ 'ਸੱਚਾ' ਮੰਨਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜੇ ਇਹ ਬੂਲੀਅਨ `true` ਨੂੰ ਮੁੱਲ ਦੇ ਤੌਰ 'ਤੇ ਮਾਨਤਾ ਦਿੰਦਾ ਹੈ। ਦਿਲਚਸਪ ਗੱਲ ਇਹ ਹੈ ਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ, [ਸਾਰੇ ਮੁੱਲ ਸੱਚੇ ਹਨ ਜਦੋਂ ਤੱਕ ਉਹ 'ਝੂਠੇ' ਤੌਰ 'ਤੇ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ](https://developer.mozilla.org/docs/Glossary/Truthy)।
 
-✅ ਇੱਕ ਵੈਰੀਏਬਲ 'ਸੱਚਾ' ਮੰਨਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜੇਕਰ ਇਹ ਬੂਲੀਅਨ `true` ਨੂੰ ਮੁੱਲ ਦੇ ਤੌਰ 'ਤੇ ਮਾਨਦਾ ਹੈ। ਦਿਲਚਸਪ ਗੱਲ ਇਹ ਹੈ ਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ, [ਸਾਰੇ ਮੁੱਲ ਸੱਚੇ ਹਨ ਜਦੋਂ ਤੱਕ ਉਹ 'ਝੂਠੇ' ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ](https://developer.mozilla.org/docs/Glossary/Truthy)।
+```mermaid
+flowchart LR
+    A["🔘 Boolean Values"] --> B["true"]
+    A --> C["false"]
+    
+    D["Truthy Values"] --> D1["'hello'"]
+    D --> D2["42"]
+    D --> D3["[]"]
+    D --> D4["{}"]
+    
+    E["Falsy Values"] --> E1["false"]
+    E --> E2["0"]
+    E --> E3["''"]
+    E --> E4["null"]
+    E --> E5["undefined"]
+    E --> E6["NaN"]
+    
+    style B fill:#e8f5e8
+    style C fill:#ffebee
+    style D fill:#e3f2fd
+    style E fill:#fff3e0
+```
+
+### 🎯 **ਬੂਲੀਅਨ ਲਾਜਿਕ ਚੈੱਕ: ਫੈਸਲੇ ਲੈਣ ਦੀ ਯੋਗਤਾ**
+
+**ਆਪਣੀ ਬੂਲੀਅਨ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ:**
+- ਤੁਹਾਨੂੰ ਕਿਉਂ ਲੱਗਦਾ ਹੈ ਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ `true` ਅਤੇ `false` ਤੋਂ ਬਾਹਰ "truthy" ਅਤੇ "falsy" ਮੁੱਲ ਹਨ?
+- ਕੀ ਤੁਸੀਂ ਅਨੁਮਾਨ ਲਗਾ ਸਕਦੇ ਹੋ ਕਿ ਕਿਹੜਾ ਮੁੱਲ 'falsy' ਹੈ: `0`, `"0"`, `[]`, `"false"`?
+- ਬੂਲੀਅਨ ਪ੍ਰੋਗਰਾਮ ਦੇ ਪ੍ਰਵਾਹ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਵਿੱਚ ਕਿਵੇਂ ਮਦਦਗਾਰ ਹੋ ਸਕਦੇ ਹਨ?
+
+```mermaid
+pie title "Common Boolean Use Cases"
+    "Conditional Logic" : 40
+    "User State" : 25
+    "Feature Toggles" : 20
+    "Validation" : 15
+```
+
+> **ਯਾਦ ਰੱਖੋ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਸਿਰਫ 6 ਮੁੱਲ 'falsy' ਹਨ: `false`, `0`, `""`, `null`, `undefined`, ਅਤੇ `NaN`। ਬਾਕੀ ਸਭ ਕੁਝ 'truthy' ਹੈ!
 
 ---
 
+## 📊 **ਤੁਹਾਡਾ ਡਾਟਾ ਟਾਈਪਸ ਟੂਲਕਿਟ ਸਾਰ**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Data Types"] --> B["📦 Variables"]
+    A --> C["🔢 Numbers"]
+    A --> D["📝 Strings"]
+    A --> E["🔘 Booleans"]
+    
+    B --> B1["let mutable"]
+    B --> B2["const immutable"]
+    
+    C --> C1["42, 3.14, -5"]
+    C --> C2["+ - * / %"]
+    
+    D --> D1["'quotes' or \\\"quotes\\\""]
+    D --> D2["`template literals`"]
+    
+    E --> E1["true or false"]
+    E --> E2["truthy vs falsy"]
+    
+    F["⚡ Key Concepts"] --> F1["Type matters for operations"]
+    F --> F2["JavaScript is dynamically typed"]
+    F --> F3["Variables can change types"]
+    F --> F4["Naming is case-sensitive"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ## GitHub Copilot Agent Challenge 🚀
 
-Agent ਮੋਡ ਵਰਤ ਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
 
-**ਵੇਰਵਾ:** ਇੱਕ ਨਿੱਜੀ ਜਾਣਕਾਰੀ ਮੈਨੇਜਰ ਬਣਾਓ ਜੋ ਇਸ ਪਾਠ ਵਿੱਚ ਸਿੱਖੇ ਸਾਰੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਟਾਈਪਸ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਅਤੇ ਅਸਲ-ਜਗਤ ਡਾਟਾ ਸਥਿਤੀਆਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।
+**ਵੇਰਵਾ:** ਇੱਕ ਪੈਰਸਨਲ ਇਨਫਰਮੇਸ਼ਨ ਮੈਨੇਜਰ ਬਣਾਓ ਜੋ ਇਸ ਪਾਠ ਵਿੱਚ ਸਿੱਖੇ ਸਾਰੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਟਾਈਪਸ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੋਵੇ ਅਤੇ ਅਸਲ-ਦੁਨੀਆ ਦੇ ਡਾਟਾ ਸਥਿਤੀਆਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੋਵੇ।
 
-**ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰੋਗਰਾਮ ਬਣਾਓ ਜੋ ਇੱਕ ਯੂਜ਼ਰ ਪ੍ਰੋਫਾਈਲ ਆਬਜੈਕਟ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ: ਇੱਕ ਵਿਅਕਤੀ ਦਾ ਨਾਮ (string), ਉਮਰ (number), ਇੱਕ ਵਿਦਿਆਰਥੀ ਸਥਿਤੀ (boolean), ਪਸੰਦੀਦਾ ਰੰਗਾਂ ਇੱਕ array ਦੇ ਰੂਪ ਵਿੱਚ, ਅਤੇ ਇੱਕ ਪਤਾ ਆਬਜੈਕਟ ਜਿਸ ਵਿੱਚ ਗਲੀ, ਸ਼ਹਿਰ, ਅਤੇ ਜ਼ਿਪ ਕੋਡ ਗੁਣ ਹਨ। ਪ੍ਰੋਫਾਈਲ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਅਤੇ ਵਿਅਕਤੀਗਤ ਖੇਤਰਾਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ। ਸਟ੍ਰਿੰਗ ਕਨਕੈਟਨੇਸ਼ਨ, ਟੈਂਪਲੇਟ ਲਿਟਰਲਜ਼, ਉਮਰ ਨਾਲ ਗਣਿਤਕ ਕਾਰਵਾਈਆਂ, ਅਤੇ ਵਿਦਿਆਰਥੀ ਸਥਿਤੀ ਲਈ ਬੂਲੀਅਨ ਲਾਜਿਕ ਨੂੰ ਦਰਸਾਉਣਾ ਯਕੀਨੀ ਬਣਾਓ।
+**ਪ੍ਰੋਮਪਟ:** ਇੱਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰੋਗਰਾਮ ਬਣਾਓ ਜੋ ਇੱਕ ਯੂਜ਼ਰ ਪ੍ਰੋਫਾਈਲ ਓਬਜੈਕਟ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ: ਇੱਕ ਵਿਅਕਤੀ ਦਾ ਨਾਮ (string), ਉਮਰ (number), ਇੱਕ ਵਿਦਿਆਰਥੀ ਸਥਿਤੀ (boolean), ਪਸੰਦੀਦਾ ਰੰਗਾਂ ਇੱਕ array ਦੇ ਰੂਪ ਵਿੱਚ, ਅਤੇ ਇੱਕ ਪਤਾ ਓਬਜੈਕਟ ਜਿਸ ਵਿੱਚ ਗਲੀ, ਸ਼ਹਿਰ, ਅਤੇ zip ਕੋਡ ਗੁਣ ਹਨ। ਪ੍ਰੋਫਾਈਲ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਅਤੇ ਵਿਅਕਤੀਗਤ ਖੇਤਰਾਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ। ਸਟ੍ਰਿੰਗ ਜੋੜਨ, ਟੈਂਪਲੇਟ ਲਿਟਰਲਜ਼, ਉਮਰ ਨਾਲ ਗਣਿਤ ਕਾਰਵਾਈਆਂ, ਅਤੇ ਵਿਦਿਆਰਥੀ ਸਥਿਤੀ ਲਈ ਬੂਲੀਅਨ ਲਾਜਿਕ ਨੂੰ ਦਰਸਾਓ।
 
 Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ [ਇਥੇ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)।
 
 ## 🚀 ਚੈਲੈਂਜ
 
-ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਕੁਝ ਵਿਹਾਰ ਹਨ ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦੇ ਹਨ। ਇੱਥੇ ਇੱਕ ਕਲਾਸਿਕ ਉਦਾਹਰਨ ਹੈ: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਇਹ ਟਾਈਪ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ: `let age = 1; let Age = 2; age == Age` ਅਤੇ ਨਤੀਜੇ ਨੂੰ ਦੇਖੋ। ਇਹ `false` ਵਾਪਸ ਕਰਦਾ ਹੈ – ਕੀ ਤੁਸੀਂ ਪਤਾ ਲਗਾ ਸਕਦੇ ਹੋ ਕਿ ਕਿਉਂ?
+ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਕੁਝ ਵਿਵਹਾਰ ਹਨ ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦੇ ਹਨ। ਇੱਥੇ ਇੱਕ ਕਲਾਸਿਕ ਉਦਾਹਰਨ ਹੈ ਜੋ ਪੜਤਾਲ ਕਰਨ ਲਈ ਹੈ: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਇਹ ਟਾਈਪ ਕਰੋ: `let age = 1; let Age = 2; age == Age` ਅਤੇ ਨਤੀਜੇ ਨੂੰ ਦੇਖੋ। ਇਹ `false` ਵਾਪਸ ਕਰਦਾ ਹੈ – ਕੀ ਤੁਸੀਂ ਪਤਾ ਲਗਾ ਸਕਦੇ ਹੋ ਕਿ ਕਿਉਂ?
 
-ਇਹ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਬਹੁਤ ਸਾਰੇ ਵਿਹਾਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਜੋ ਸਮਝਣ ਯੋਗ ਹੈ। ਇਹਨਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਜਾਣੂ ਹੋਣਾ ਤੁਹਾਨੂੰ ਹੋਰ ਭਰੋਸੇਮੰਦ ਕੋਡ ਲਿਖਣ ਅਤੇ ਮੁੱਦਿਆਂ ਨੂੰ ਹੋਰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਡੀਬੱਗ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
+ਇਹ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਬਹੁਤ ਸਾਰੇ ਵਿਵਹਾਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਜਿਸਨੂੰ ਸਮਝਣ ਦੀ ਲੋੜ ਹੈ। ਇਨ੍ਹਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਜਾਣੂ ਹੋਣਾ ਤੁਹਾਨੂੰ ਵਧੇਰੇ ਭਰੋਸੇਯੋਗ ਕੋਡ ਲਿਖਣ ਅਤੇ ਮੁੱਦਿਆਂ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਡੀਬੱਗ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
 
-## ਪਾਠ-ਪ੍ਰਸਚਾਤ ਕਵਿਜ਼
-[ਪਾਠ-ਪ੍ਰਸਚਾਤ ਕਵਿਜ਼](https://ff-quizzes.netlify.app)
+## ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼
+[ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼](https://ff-quizzes.netlify.app)
 
-## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
+## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ-ਅਧਿਐਨ
 
-[ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਭਿਆਸਾਂ ਦੀ ਇਸ ਸੂਚੀ](https://css-tricks.com/snippets/javascript/) ਨੂੰ ਦੇਖੋ ਅਤੇ ਇੱਕ ਅਭਿਆਸ ਕਰੋ। ਤੁਸੀਂ ਕੀ ਸਿੱਖਿਆ?
+[ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਭਿਆਸਾਂ ਦੀ ਇਸ ਸੂਚੀ](https://css-tricks.com/snippets/javascript/) ਨੂੰ ਵੇਖੋ ਅਤੇ ਇੱਕ ਅਭਿਆਸ ਕਰੋ। ਤੁਸੀਂ ਕੀ ਸਿੱਖਿਆ?
 
 ## ਅਸਾਈਨਮੈਂਟ
 
 [ਡਾਟਾ ਟਾਈਪਸ ਅਭਿਆਸ](assignment.md)
 
+## 🚀 ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਟਾਈਪਸ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
+
+### ⚡ **ਤੁਸੀਂ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਨੂੰ ਖੋਲ੍ਹੋ ਅਤੇ ਵੱਖ-ਵੱਖ ਡਾਟਾ ਟਾਈਪਸ ਦੇ 3 ਵੈਰੀਏਬਲ ਬਣਾਓ
+- [ ] ਚੈਲੈਂਜ ਅਭਿਆਸ ਕਰੋ: `let age = 1; let Age = 2; age == Age` ਅਤੇ ਪਤਾ ਲਗਾਓ ਕਿ ਇਹ false ਕਿਉਂ ਹੈ
+- [ ] ਆਪਣੇ ਨਾਮ ਅਤੇ ਪਸੰਦੀਦਾ ਨੰਬਰ ਨਾਲ ਸਟ੍ਰਿੰਗ ਜੋੜਨ ਦਾ ਅਭਿਆਸ ਕਰੋ
+- [ ] ਇਹ ਜਾਂਚੋ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਸਟ੍ਰਿੰਗ ਵਿੱਚ ਨੰਬਰ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ
+
+### 🎯 **ਤੁਸੀਂ ਇਸ ਘੰਟੇ ਵਿੱਚ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਕੋਈ ਵੀ ਗੁੰਝਲਦਾਰ ਧਾਰਨਾਵਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ
+- [ ] ਇੱਕ ਮਿਨੀ ਕੈਲਕੂਲੇਟਰ ਬਣਾਓ ਜੋ ਦੋ ਨੰਬਰਾਂ ਨੂੰ ਜੋੜਦਾ, ਘਟਾਉਂਦਾ, ਗੁਣਾ ਕਰਦਾ ਅਤੇ ਵੰਡਦਾ ਹੈ
+- [ ] ਟੈਂਪਲੇਟ ਲਿਟਰਲਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਧਾਰਨ ਨਾਮ ਫਾਰਮੈਟਰ ਬਣਾਓ
+- [ ] `==` ਅਤੇ `===` ਤੁਲਨਾ ਓਪਰੇਟਰਾਂ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰਾਂ ਦੀ ਪੜਚੋਲ ਕਰੋ
+- [ ] ਵੱਖ-ਵੱਖ ਡਾਟਾ ਟਾਈਪਸ ਵਿੱਚ ਤਬਦੀਲ ਕਰਨ ਦਾ ਅਭਿਆਸ ਕਰੋ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਧਾਰ**
+- [ ] ਅਸਾਈਨਮੈਂਟ ਨੂੰ ਭਰੋਸੇ ਅਤੇ ਰਚਨਾਤਮਕਤਾ ਨਾਲ ਪੂਰਾ ਕਰੋ
+- [ ] ਸਿੱਖੇ ਸਾਰੇ ਡਾਟਾ ਟਾਈਪਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਵਿਅਕਤੀਗਤ ਪ੍ਰੋਫਾਈਲ ਓਬਜੈਕਟ ਬਣਾਓ
+- [ ] [CSS-Tricks ਤੋਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਭਿਆਸਾਂ](https://css-tricks.com/snippets/javascript/) ਨਾਲ ਅਭਿਆਸ ਕਰੋ
+- [ ] ਬੂਲੀਅਨ ਲਾਜਿਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਧਾਰਨ ਫਾਰਮ ਵੈਲੀਡੇਟਰ ਬਣਾਓ
+- [ ] Array ਅਤੇ Object ਡਾਟਾ ਟਾਈਪਸ ਨਾਲ ਅਭਿਆਸ ਕਰੋ (ਆਉਣ ਵਾਲੇ ਪਾਠਾਂ ਦੀ ਝਲਕ)
+- [ ] ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ ਅਤੇ ਡਾਟਾ ਟਾਈਪਸ ਬਾਰੇ ਸਵਾਲ ਪੁੱਛੋ
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਰੂਪਾਂਤਰ**
+- [ ] ਵੱਡੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਡਾਟਾ ਟਾਈਪਸ ਦੇ ਗਿਆਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਅਸਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਹਰ ਡਾਟਾ ਟਾਈਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਮਝੋ ਅਤੇ ਕਾਰਨ
+- [ ] ਹੋਰ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਮੂਲ ਸਿਧਾਂਤਾਂ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੋ
+- [ ] ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਯੂਜ਼ਰ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ ਵਾਲਾ ਇੱਕ ਛੋਟਾ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ
+- [ ] ਤਰਕਿਕਤਾ ਅਤੇ ਸਖ਼ਤ ਸਮਾਨਤਾ ਵਰਗੇ ਉੱਚ-ਸਤਰੀ ਡਾਟਾ ਟਾਈਪ ਧਾਰਨਾਵਾਂ ਦੀ ਪੜਚੋਲ ਕਰੋ
+- [ ] ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਦਸਤਾਵੇਜ਼ੀ ਸੁਧਾਰਾਂ ਨਾਲ ਯੋਗਦਾਨ ਪਾਓ
+
+### 🧠 **ਅੰਤਿਮ ਡਾਟਾ ਟਾਈਪਸ ਮਾਹਰਤਾ ਚੈੱਕ-ਇਨ**
+
+**ਆਪਣੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਧਾਰ ਦਾ ਜਸ਼ਨ ਮਨਾਓ:**
+- ਤੁਹਾਨੂੰ ਕਿਹੜਾ ਡਾਟਾ ਟਾਈਪ ਆਪਣੇ ਵਿਵਹਾਰ ਦੇ ਹਿਸਾਬ ਨਾਲ ਸਭ ਤੋਂ ਹੈਰਾਨ ਕਰਨ ਵਾਲਾ ਲੱਗਾ?
+- ਤੁਸੀਂ ਇੱਕ ਦੋਸਤ ਨੂੰ ਵੈਰੀਏਬਲਜ਼ ਅਤੇ ਕਾਂਸਟੈਂਟਸ ਦੀ ਵਿਆਖਿਆ ਕਰਨ ਵਿੱਚ ਕਿੰਨਾ ਆਸਾਨੀ ਮਹਿਸੂਸ ਕਰਦੇ ਹੋ?
+- ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਟਾਈਪ ਸਿਸਟਮ ਬਾਰੇ ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਦਿਲਚਸਪ ਚੀਜ਼ ਕਿਹੜੀ ਲੱਗੀ?
+- ਤੁਸੀਂ ਕਿਹੜਾ ਅਸਲ-ਦੁਨੀਆ ਦਾ ਐਪਲੀਕੇਸ਼ਨ ਇਮਾਜ਼ਿਨ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਇਹਨਾਂ ਮੂਲ ਸਿਧਾਂਤਾਂ ਨਾਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ?
+
+```mermaid
+journey
+    title Your JavaScript Confidence Journey
+    section Today
+      Confused: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Understanding: 5: You
+      Building: 5: You
+    section Next Month
+      Problem Solving: 5: You
+      Teaching Others: 5: You
+      Real Projects: 5: You
+```
+
+> 💡 **ਤੁਸੀਂ ਅਧਾਰ ਬਣਾਇਆ ਹੈ!** ਡਾਟਾ ਟਾਈਪਸ ਨੂੰ ਸਮਝਣਾ ਕਹਾਣੀਆਂ ਲਿਖਣ ਤੋਂ ਪਹਿਲਾਂ ਵਰਣਮਾਲਾ ਸਿੱਖਣ ਵਰਗਾ ਹੈ। ਹਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰੋਗਰਾਮ ਜੋ ਤੁਸੀਂ ਕਦੇ ਵੀ ਲਿਖੋਗੇ ਇਹਨਾਂ ਮੂਲ ਸਿਧਾਂਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰੇਗਾ। ਤੁਹਾਡੇ ਕੋਲ ਹੁਣ ਇੰਟਰੈਕਟਿਵ ਵੈਬਸਾਈਟਾਂ, ਗਤੀਸ਼ੀਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਅਤੇ ਕੋਡ ਨਾਲ ਅਸਲ-ਦੁਨੀਆ ਦੇ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਬੇਹਤਰੀਨ ਸਾਧਨ ਹਨ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਸ਼ਾਨਦਾਰ ਦੁਨੀਆ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ! 🎉
+
 ---
 
 **ਅਸਵੀਕਰਤਾ**:  
diff --git a/translations/pa/2-js-basics/2-functions-methods/README.md b/translations/pa/2-js-basics/2-functions-methods/README.md
index 4395d72238..1aad919ccd 100644
--- a/translations/pa/2-js-basics/2-functions-methods/README.md
+++ b/translations/pa/2-js-basics/2-functions-methods/README.md
@@ -1,39 +1,89 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "ec43b53e8e015cdabfd3ad877b3c28e5",
-  "translation_date": "2025-10-22T17:22:34+00:00",
+  "original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
+  "translation_date": "2025-11-03T16:05:45+00:00",
   "source_file": "2-js-basics/2-functions-methods/README.md",
   "language_code": "pa"
 }
 -->
-# ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ: ਮੈਥਡਸ ਅਤੇ ਫੰਕਸ਼ਨ
+# ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ: ਮੈਥਡਸ ਅਤੇ ਫੰਕਸ਼ਨ
 
-![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.pa.png)
+![ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ - ਫੰਕਸ਼ਨ](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.pa.png)
 > ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ
 
-## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ
-[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ](https://ff-quizzes.netlify.app)
+```mermaid
+journey
+    title Your JavaScript Functions Adventure
+    section Foundation
+      Function Syntax: 5: You
+      Calling Functions: 4: You
+      Parameters & Arguments: 5: You
+    section Advanced Concepts
+      Return Values: 4: You
+      Default Parameters: 5: You
+      Function Composition: 4: You
+    section Modern JavaScript
+      Arrow Functions: 5: You
+      Anonymous Functions: 4: You
+      Higher-Order Functions: 5: You
+```
+
+## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
+[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app)
 
-ਇੱਕ ਹੀ ਕੋਡ ਨੂੰ ਵਾਰ-ਵਾਰ ਲਿਖਣਾ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਸਭ ਤੋਂ ਆਮ ਨਿਰਾਸ਼ਾਜਨਕ ਪਹਲੂਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ। ਫੰਕਸ਼ਨ ਇਸ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਪੇਸ਼ ਕਰਦੇ ਹਨ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਕੋਡ ਨੂੰ ਦੁਬਾਰਾ ਵਰਤਣ ਯੋਗ ਬਲਾਕਾਂ ਵਿੱਚ ਪੈਕ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। ਫੰਕਸ਼ਨ ਨੂੰ ਹੈਨਰੀ ਫੋਰਡ ਦੀ ਅਸੈਂਬਲੀ ਲਾਈਨ ਦੇ ਮਿਆਰੀਕ੍ਰਿਤ ਹਿੱਸਿਆਂ ਵਾਂਗ ਸੋਚੋ – ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਭਰੋਸੇਯੋਗ ਕੰਪੋਨੈਂਟ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਜਿੱਥੇ ਵੀ ਲੋੜ ਹੋਵੇ, ਬਿਨਾਂ ਮੁੜ ਤੋਂ ਬਣਾਉਣ ਦੇ ਵਰਤ ਸਕਦੇ ਹੋ।
+ਇੱਕ ਹੀ ਕੋਡ ਨੂੰ ਵਾਰ-ਵਾਰ ਲਿਖਣਾ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ ਸਭ ਤੋਂ ਆਮ ਨਿਰਾਸ਼ਾਵਾਦੀ ਗੱਲਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ। ਫੰਕਸ਼ਨ ਇਸ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਕੋਡ ਨੂੰ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਬਲਾਕਾਂ ਵਿੱਚ ਪੈਕ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। ਫੰਕਸ਼ਨ ਨੂੰ ਹੈਨਰੀ ਫੋਰਡ ਦੀ ਅਸੈਂਬਲੀ ਲਾਈਨ ਦੇ ਮਿਆਰੀਕ੍ਰਿਤ ਹਿੱਸਿਆਂ ਵਾਂਗ ਸੋਚੋ – ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਭਰੋਸੇਮੰਦ ਕੰਪੋਨੈਂਟ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਜਿੱਥੇ ਵੀ ਲੋੜ ਹੋਵੇ, ਬਿਨਾਂ ਮੁੜ ਤੋਂ ਬਣਾਉਣ ਦੇ ਵਰਤ ਸਕਦੇ ਹੋ।
 
-ਫੰਕਸ਼ਨ ਤੁਹਾਨੂੰ ਕੋਡ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਬੰਨ੍ਹਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਉਨ੍ਹਾਂ ਨੂੰ ਦੁਬਾਰਾ ਵਰਤ ਸਕੋ। ਇੱਕੋ ਤਰ੍ਹਾਂ ਦੇ ਲਾਜਿਕ ਨੂੰ ਹਰ ਜਗ੍ਹਾ ਕਾਪੀ ਅਤੇ ਪੇਸਟ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਇੱਕ ਵਾਰ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ ਅਤੇ ਜਦੋਂ ਵੀ ਲੋੜ ਹੋਵੇ ਇਸਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ। ਇਹ ਪਹੁੰਚ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸੰਗਠਿਤ ਰੱਖਦੀ ਹੈ ਅਤੇ ਅੱਪਡੇਟ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ।
+ਫੰਕਸ਼ਨ ਤੁਹਾਨੂੰ ਕੋਡ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਬੰਨ੍ਹਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਦੁਬਾਰਾ ਵਰਤ ਸਕੋ। ਇੱਕੋ ਹੀ ਲਾਜਿਕ ਨੂੰ ਹਰ ਜਗ੍ਹਾ ਕਾਪੀ ਅਤੇ ਪੇਸਟ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਇੱਕ ਵਾਰ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ ਅਤੇ ਜਦੋਂ ਵੀ ਲੋੜ ਹੋਵੇ ਇਸਨੂੰ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਪਹੁੰਚ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸੰਗਠਿਤ ਰੱਖਦੀ ਹੈ ਅਤੇ ਅੱਪਡੇਟ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ।
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣੇ ਫੰਕਸ਼ਨ ਬਣਾਉਣ, ਉਨ੍ਹਾਂ ਨੂੰ ਜਾਣਕਾਰੀ ਪਾਸ ਕਰਨ ਅਤੇ ਉਨ੍ਹਾਂ ਤੋਂ ਲਾਭਦਾਇਕ ਨਤੀਜੇ ਪ੍ਰਾਪਤ ਕਰਨ ਦੇ ਬਾਰੇ ਸਿੱਖੋਗੇ। ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡਸ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਦੀ ਖੋਜ ਕਰੋਗੇ, ਆਧੁਨਿਕ ਸਿੰਟੈਕਸ ਪਹੁੰਚਾਂ ਬਾਰੇ ਸਿੱਖੋਗੇ, ਅਤੇ ਦੇਖੋਗੇ ਕਿ ਫੰਕਸ਼ਨ ਹੋਰ ਫੰਕਸ਼ਨ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ। ਅਸੀਂ ਇਹ ਧਾਰਨਾਵਾਂ ਕਦਮ-ਦਰ-ਕਦਮ ਬਣਾਉਣਗੇ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣੇ ਫੰਕਸ਼ਨ ਬਣਾਉਣ, ਉਨ੍ਹਾਂ ਨੂੰ ਜਾਣਕਾਰੀ ਪਾਸ ਕਰਨ ਅਤੇ ਉਨ੍ਹਾਂ ਤੋਂ ਲਾਭਦਾਇਕ ਨਤੀਜੇ ਪ੍ਰਾਪਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਸਿੱਖੋਗੇ। ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡਸ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਦੀ ਖੋਜ ਕਰੋਗੇ, ਆਧੁਨਿਕ ਸਿੰਟੈਕਸ ਪਹੁੰਚਾਂ ਬਾਰੇ ਸਿੱਖੋਗੇ, ਅਤੇ ਦੇਖੋਗੇ ਕਿ ਫੰਕਸ਼ਨ ਹੋਰ ਫੰਕਸ਼ਨ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ। ਅਸੀਂ ਇਹ ਧਾਰਨਾਵਾਂ ਕਦਮ-ਦਰ-ਕਦਮ ਬਣਾਉਂਦੇ ਹਾਂ।
 
-[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
+[![ਮੈਥਡਸ ਅਤੇ ਫੰਕਸ਼ਨ](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "ਮੈਥਡਸ ਅਤੇ ਫੰਕਸ਼ਨ")
 
 > 🎥 ਉੱਪਰ ਦਿੱਤੀ ਤਸਵੀਰ 'ਤੇ ਕਲਿਕ ਕਰੋ ਮੈਥਡਸ ਅਤੇ ਫੰਕਸ਼ਨ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ।
 
-> ਤੁਸੀਂ ਇਹ ਪਾਠ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
+> ਤੁਸੀਂ ਇਹ ਪਾਠ [ਮਾਈਕਰੋਸਾਫਟ ਲਰਨ](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
+
+```mermaid
+mindmap
+  root((JavaScript Functions))
+    Basic Concepts
+      Declaration
+        Traditional syntax
+        Arrow function syntax
+      Calling
+        Using parentheses
+        Parentheses required
+    Parameters
+      Input Values
+        Multiple parameters
+        Default values
+      Arguments
+        Values passed in
+        Can be any type
+    Return Values
+      Output Data
+        return statement
+        Exit function
+      Use Results
+        Store in variables
+        Chain functions
+    Advanced Patterns
+      Higher-Order
+        Functions as parameters
+        Callbacks
+      Anonymous
+        No name needed
+        Inline definition
+```
 
 ## ਫੰਕਸ਼ਨ
 
-ਫੰਕਸ਼ਨ ਇੱਕ ਸਵੈ-ਨਿਰਭਰ ਕੋਡ ਦਾ ਬਲਾਕ ਹੁੰਦਾ ਹੈ ਜੋ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਹ ਲਾਜਿਕ ਨੂੰ ਘੇਰਦਾ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਜਦੋਂ ਵੀ ਲੋੜ ਹੋਵੇ ਚਲਾਉਣ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ।
+ਫੰਕਸ਼ਨ ਇੱਕ ਸਵੈ-ਨਿਰਭਰਤ ਕੋਡ ਦਾ ਬਲਾਕ ਹੈ ਜੋ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਹ ਲਾਜਿਕ ਨੂੰ ਸਮੇਟਦਾ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਜਦੋਂ ਵੀ ਲੋੜ ਹੋਵੇ ਚਲਾ ਸਕਦੇ ਹੋ।
 
-ਆਪਣੇ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਇੱਕੋ ਕੋਡ ਨੂੰ ਕਈ ਵਾਰ ਲਿਖਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਇਸਨੂੰ ਇੱਕ ਫੰਕਸ਼ਨ ਵਿੱਚ ਪੈਕ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਜਦੋਂ ਵੀ ਲੋੜ ਹੋਵੇ ਇਸਨੂੰ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਪਹੁੰਚ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸਾਫ਼ ਰੱਖਦੀ ਹੈ ਅਤੇ ਅੱਪਡੇਟ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ। ਸੋਚੋ ਕਿ ਜੇ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡਬੇਸ ਦੇ 20 ਵੱਖ-ਵੱਖ ਸਥਾਨਾਂ 'ਤੇ ਫੈਲੇ ਲਾਜਿਕ ਨੂੰ ਬਦਲਣਾ ਪਵੇ ਤਾਂ ਰੱਖ-ਰਖਾਅ ਦੀ ਚੁਣੌਤੀ ਕਿੰਨੀ ਵੱਡੀ ਹੋਵੇਗੀ।
+ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਵਿੱਚ ਇੱਕੋ ਹੀ ਕੋਡ ਨੂੰ ਕਈ ਵਾਰ ਲਿਖਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਇਸਨੂੰ ਇੱਕ ਫੰਕਸ਼ਨ ਵਿੱਚ ਪੈਕ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਜਦੋਂ ਵੀ ਲੋੜ ਹੋਵੇ ਇਸਨੂੰ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਪਹੁੰਚ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸਾਫ ਰੱਖਦੀ ਹੈ ਅਤੇ ਅੱਪਡੇਟ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ। ਸੋਚੋ ਕਿ ਜੇ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡਬੇਸ ਦੇ 20 ਵੱਖ-ਵੱਖ ਸਥਾਨਾਂ 'ਤੇ ਫੈਲੇ ਲਾਜਿਕ ਨੂੰ ਬਦਲਣਾ ਪਵੇ ਤਾਂ ਰੱਖ-ਰਖਾਵ ਕਿੰਨਾ ਮੁਸ਼ਕਲ ਹੋਵੇਗਾ।
 
-ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਵਿਆਖਿਆਤਮਕ ਨਾਮ ਦੇਣਾ ਬਹੁਤ ਜਰੂਰੀ ਹੈ। ਇੱਕ ਚੰਗਾ-ਨਾਮਿਤ ਫੰਕਸ਼ਨ ਇਸਦੇ ਉਦੇਸ਼ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਸੰਚਾਰਿਤ ਕਰਦਾ ਹੈ – ਜਦੋਂ ਤੁਸੀਂ `cancelTimer()` ਨੂੰ ਵੇਖਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਤੁਰੰਤ ਸਮਝ ਜਾਂਦੇ ਹੋ ਕਿ ਇਹ ਕੀ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਇੱਕ ਸਪਸ਼ਟ ਲੇਬਲ ਵਾਲਾ ਬਟਨ ਤੁਹਾਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦੱਸਦਾ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਕਲਿਕ ਕਰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੋਵੇਗਾ।
+ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਵਿਆਖਿਆਤਮਕ ਨਾਮ ਦੇਣਾ ਬਹੁਤ ਜਰੂਰੀ ਹੈ। ਇੱਕ ਚੰਗਾ-ਨਾਮਿਤ ਫੰਕਸ਼ਨ ਇਸਦੇ ਉਦੇਸ਼ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਸੰਚਾਰਿਤ ਕਰਦਾ ਹੈ – ਜਦੋਂ ਤੁਸੀਂ `cancelTimer()` ਨੂੰ ਵੇਖਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਤੁਰੰਤ ਸਮਝ ਆ ਜਾਂਦੀ ਹੈ ਕਿ ਇਹ ਕੀ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਇੱਕ ਸਪਸ਼ਟ ਲੇਬਲ ਵਾਲਾ ਬਟਨ ਤੁਹਾਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦੱਸਦਾ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਕਲਿਕ ਕਰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੋਵੇਗਾ।
 
 ## ਫੰਕਸ਼ਨ ਬਣਾਉਣਾ ਅਤੇ ਕਾਲ ਕਰਨਾ
 
@@ -46,10 +96,10 @@ function nameOfFunction() { // function definition
 ```
 
 ਆਓ ਇਸਨੂੰ ਤੋੜ ਕੇ ਸਮਝੀਏ:
-- `function` ਕੀਵਰਡ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਦੱਸਦਾ ਹੈ "ਹੇ, ਮੈਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਉਣ ਜਾ ਰਿਹਾ ਹਾਂ!"
+- `function` ਕੀਵਰਡ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਦੱਸਦਾ ਹੈ "ਹੇ, ਮੈਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾ ਰਿਹਾ ਹਾਂ!"
 - `nameOfFunction` ਜਿੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਇੱਕ ਵਿਆਖਿਆਤਮਕ ਨਾਮ ਦਿੰਦੇ ਹੋ
-- ਪੈਰੈਂਥੀਸਿਸ `()` ਜਿੱਥੇ ਤੁਸੀਂ ਪੈਰਾਮੀਟਰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ (ਅਸੀਂ ਇਸ 'ਤੇ ਜਲਦੀ ਆਵਾਂਗੇ)
-- ਕਰਲੀ ਬ੍ਰੇਸ `{}` ਵਿੱਚ ਅਸਲ ਕੋਡ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਕਾਲ ਕਰਨ 'ਤੇ ਚਲਾਉਂਦੇ ਹੋ
+- ਪੈਰੈਂਥੀਸਿਸ `()` ਜਿੱਥੇ ਤੁਸੀਂ ਪੈਰਾਮੀਟਰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ (ਅਸੀਂ ਇਸ 'ਤੇ ਜਲਦੀ ਪਹੁੰਚਾਂਗੇ)
+- ਕਰਲੀ ਬਰੇਸ `{}` ਵਿੱਚ ਅਸਲ ਕੋਡ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਫੰਕਸ਼ਨ ਕਾਲ ਕਰਨ 'ਤੇ ਚਲਾਉਂਦੇ ਹੋ
 
 ਆਓ ਇਸਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਵੇਖਣ ਲਈ ਇੱਕ ਸਧਾਰਨ ਗ੍ਰੀਟਿੰਗ ਫੰਕਸ਼ਨ ਬਣਾਈਏ:
 
@@ -59,25 +109,49 @@ function displayGreeting() {
 }
 ```
 
-ਇਹ ਫੰਕਸ਼ਨ "Hello, world!" ਕਨਸੋਲ ਵਿੱਚ ਪ੍ਰਿੰਟ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਡਿਫਾਈਨ ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਜਿੰਨੀ ਵਾਰ ਚਾਹੋ ਵਰਤ ਸਕਦੇ ਹੋ।
+ਇਹ ਫੰਕਸ਼ਨ "Hello, world!" ਕਨਸੋਲ ਵਿੱਚ ਪ੍ਰਿੰਟ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਡਿਫਾਈਨ ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਜਿੰਨੀ ਵਾਰ ਲੋੜ ਹੋਵੇ ਵਰਤ ਸਕਦੇ ਹੋ।
 
-ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਣ (ਜਾਂ "ਕਾਲ" ਕਰਨ) ਲਈ, ਇਸਦਾ ਨਾਮ ਲਿਖੋ ਅਤੇ ਪੈਰੈਂਥੀਸਿਸ ਦੇ ਨਾਲ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੁਹਾਨੂੰ ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਜਾਂ ਬਾਅਦ ਵਿੱਚ ਡਿਫਾਈਨ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ – ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੰਜਨ ਐਗਜ਼ਿਕਿਊਸ਼ਨ ਆਰਡਰ ਨੂੰ ਸੰਭਾਲੇਗਾ।
+ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਣ (ਜਾਂ "ਕਾਲ" ਕਰਨ) ਲਈ, ਇਸਦਾ ਨਾਮ ਲਿਖੋ ਅਤੇ ਪੈਰੈਂਥੀਸਿਸ ਦੇ ਨਾਲ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੁਹਾਨੂੰ ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਜਾਂ ਬਾਅਦ ਡਿਫਾਈਨ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ – ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੰਜਨ ਐਗਜ਼ਿਕਿਊਸ਼ਨ ਆਰਡਰ ਨੂੰ ਸੰਭਾਲੇਗਾ।
 
 ```javascript
 // calling our function
 displayGreeting();
 ```
 
-ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਲਾਈਨ ਚਲਾਉਂਦੇ ਹੋ, ਇਹ ਤੁਹਾਡੇ `displayGreeting` ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ ਸਾਰੇ ਕੋਡ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ, "Hello, world!" ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਵਾਰ-ਵਾਰ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ।
+ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਲਾਈਨ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਹ ਤੁਹਾਡੇ `displayGreeting` ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ ਸਾਰੇ ਕੋਡ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ, "Hello, world!" ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਵਾਰ-ਵਾਰ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ।
+
+### 🧠 **ਫੰਕਸ਼ਨ ਫੰਡਾਮੈਂਟਲਸ ਚੈੱਕ: ਆਪਣੇ ਪਹਿਲੇ ਫੰਕਸ਼ਨ ਬਣਾਉਣਾ**
+
+**ਆਓ ਵੇਖੀਏ ਕਿ ਤੁਸੀਂ ਬੇਸਿਕ ਫੰਕਸ਼ਨ ਬਾਰੇ ਕਿਵੇਂ ਮਹਿਸੂਸ ਕਰ ਰਹੇ ਹੋ:**
+- ਕੀ ਤੁਸੀਂ ਸਮਝਾ ਸਕਦੇ ਹੋ ਕਿ ਫੰਕਸ਼ਨ ਡਿਫਿਨੀਸ਼ਨ ਵਿੱਚ ਕਰਲੀ ਬਰੇਸ `{}` ਕਿਉਂ ਵਰਤਦੇ ਹਨ?
+- ਕੀ ਹੁੰਦਾ ਹੈ ਜੇ ਤੁਸੀਂ `displayGreeting` ਬਿਨਾਂ ਪੈਰੈਂਥੀਸਿਸ ਲਿਖਦੇ ਹੋ?
+- ਤੁਸੀਂ ਇੱਕੋ ਫੰਕਸ਼ਨ ਨੂੰ ਕਈ ਵਾਰ ਕਾਲ ਕਰਨ ਦੀ ਇੱਛਾ ਕਿਉਂ ਕਰ ਸਕਦੇ ਹੋ?
+
+```mermaid
+flowchart TD
+    A["✏️ Define Function"] --> B["📦 Package Code"]
+    B --> C["🏷️ Give it a Name"]
+    C --> D["📞 Call When Needed"]
+    D --> E["🔄 Reuse Anywhere"]
+    
+    F["💡 Benefits"] --> F1["No code repetition"]
+    F --> F2["Easy to maintain"]
+    F --> F3["Clear organization"]
+    F --> F4["Easier testing"]
+    
+    style A fill:#e3f2fd
+    style E fill:#e8f5e8
+    style F fill:#fff3e0
+```
 
-> **Note:** ਤੁਸੀਂ ਇਸ ਪਾਠ ਵਿੱਚ **ਮੈਥਡਸ** ਵਰਤ ਰਹੇ ਹੋ। `console.log()` ਇੱਕ ਮੈਥਡ ਹੈ – ਅਸਲ ਵਿੱਚ ਇੱਕ ਫੰਕਸ਼ਨ ਜੋ `console` ਆਬਜੈਕਟ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ। ਮੁੱਖ ਅੰਤਰ ਇਹ ਹੈ ਕਿ ਮੈਥਡਸ ਆਬਜੈਕਟਸ ਨਾਲ ਜੁੜੇ ਹੁੰਦੇ ਹਨ, ਜਦੋਂ ਕਿ ਫੰਕਸ਼ਨ ਸਵਤੰਤਰ ਰਹਿੰਦੇ ਹਨ। ਕਈ ਡਿਵੈਲਪਰ ਆਮ ਗੱਲਬਾਤ ਵਿੱਚ ਇਹ ਸ਼ਬਦ ਇੱਕੋ ਜਿਹਾ ਵਰਤਦੇ ਹਨ।
+> **ਨੋਟ:** ਤੁਸੀਂ ਇਸ ਪਾਠ ਦੌਰਾਨ **ਮੈਥਡਸ** ਵਰਤ ਰਹੇ ਹੋ। `console.log()` ਇੱਕ ਮੈਥਡ ਹੈ – ਅਸਲ ਵਿੱਚ ਇੱਕ ਫੰਕਸ਼ਨ ਜੋ `console` ਆਬਜੈਕਟ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ। ਮੁੱਖ ਅੰਤਰ ਇਹ ਹੈ ਕਿ ਮੈਥਡਸ ਆਬਜੈਕਟਸ ਨਾਲ ਜੁੜੇ ਹੁੰਦੇ ਹਨ, ਜਦੋਂ ਕਿ ਫੰਕਸ਼ਨ ਸਵੈ-ਨਿਰਭਰਤ ਹੁੰਦੇ ਹਨ। ਕਈ ਡਿਵੈਲਪਰ ਆਮ ਗੱਲਬਾਤ ਵਿੱਚ ਇਹ ਸ਼ਬਦ ਇੱਕੋ ਜਿਹਾ ਵਰਤਦੇ ਹਨ।
 
-### ਫੰਕਸ਼ਨ ਲਈ ਵਧੀਆ ਅਭਿਆਸ
+### ਫੰਕਸ਼ਨ ਬੈਸਟ ਪ੍ਰੈਕਟਿਸ
 
-ਇੱਥੇ ਕੁਝ ਸੁਝਾਅ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਵਧੀਆ ਫੰਕਸ਼ਨ ਲਿਖਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ:
+ਇੱਥੇ ਕੁਝ ਟਿੱਪਸ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਵਧੀਆ ਫੰਕਸ਼ਨ ਲਿਖਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ:
 
 - ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਸਪਸ਼ਟ, ਵਿਆਖਿਆਤਮਕ ਨਾਮ ਦਿਓ – ਤੁਹਾਡਾ ਭਵਿੱਖ ਦਾ ਆਪ ਤੁਹਾਡਾ ਧੰਨਵਾਦ ਕਰੇਗਾ!
-- **camelCasing** ਵਰਤੋ ਬਹੁ-ਸ਼ਬਦ ਵਾਲੇ ਨਾਮਾਂ ਲਈ (ਜਿਵੇਂ `calculateTotal` ਬਜਾਏ `calculate_total`)
+- **camelCasing** ਨੂੰ ਬਹੁ-ਸ਼ਬਦ ਵਾਲੇ ਨਾਮਾਂ ਲਈ ਵਰਤੋ (ਜਿਵੇਂ `calculateTotal` ਬਜਾਏ `calculate_total`)
 - ਹਰ ਫੰਕਸ਼ਨ ਨੂੰ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਇੱਕ ਕੰਮ ਕਰਨ 'ਤੇ ਕੇਂਦਰਿਤ ਰੱਖੋ
 
 ## ਫੰਕਸ਼ਨ ਨੂੰ ਜਾਣਕਾਰੀ ਪਾਸ ਕਰਨਾ
@@ -86,7 +160,7 @@ displayGreeting();
 
 **ਪੈਰਾਮੀਟਰਸ** ਪਲੇਸਹੋਲਡਰ ਵਾਂਗ ਕੰਮ ਕਰਦੇ ਹਨ ਜਿੱਥੇ ਤੁਸੀਂ ਹਰ ਵਾਰ ਫੰਕਸ਼ਨ ਵਰਤਣ ਸਮੇਂ ਵੱਖ-ਵੱਖ ਮੁੱਲ ਪਾ ਸਕਦੇ ਹੋ। ਇਸ ਤਰੀਕੇ ਨਾਲ, ਇੱਕੋ ਫੰਕਸ਼ਨ ਹਰ ਕਾਲ 'ਤੇ ਵੱਖ-ਵੱਖ ਜਾਣਕਾਰੀ ਨਾਲ ਕੰਮ ਕਰ ਸਕਦਾ ਹੈ।
 
-ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਡਿਫਾਈਨ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਪੈਰੈਂਥੀਸਿਸ ਦੇ ਅੰਦਰ ਪੈਰਾਮੀਟਰਸ ਦੀ ਸੂਚੀ ਦਿੰਦੇ ਹੋ, ਕਈ ਪੈਰਾਮੀਟਰਸ ਨੂੰ ਕਾਮਾ ਨਾਲ ਵੱਖ ਕਰਦੇ ਹੋ:
+ਤੁਸੀਂ ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਡਿਫਾਈਨ ਕਰਨ ਸਮੇਂ ਪੈਰੈਂਥੀਸਿਸ ਦੇ ਅੰਦਰ ਪੈਰਾਮੀਟਰਸ ਦੀ ਸੂਚੀ ਦਿੰਦੇ ਹੋ, ਕਈ ਪੈਰਾਮੀਟਰਸ ਨੂੰ ਕਾਮਾ ਨਾਲ ਵੱਖ ਕਰਦੇ ਹੋ:
 
 ```javascript
 function name(param, param2, param3) {
@@ -94,9 +168,9 @@ function name(param, param2, param3) {
 }
 ```
 
-ਹਰ ਪੈਰਾਮੀਟਰ ਪਲੇਸਹੋਲਡਰ ਵਾਂਗ ਕੰਮ ਕਰਦਾ ਹੈ – ਜਦੋਂ ਕੋਈ ਤੁਹਾਡੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ, ਉਹ ਅਸਲ ਮੁੱਲ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਜੋ ਇਨ੍ਹਾਂ ਸਥਾਨਾਂ ਵਿੱਚ ਪਲੱਗ ਹੁੰਦੇ ਹਨ।
+ਹਰ ਪੈਰਾਮੀਟਰ ਪਲੇਸਹੋਲਡਰ ਵਾਂਗ ਕੰਮ ਕਰਦਾ ਹੈ – ਜਦੋਂ ਕੋਈ ਤੁਹਾਡੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ, ਤਾਂ ਉਹ ਅਸਲ ਮੁੱਲ ਪ੍ਰਦਾਨ ਕਰੇਗਾ ਜੋ ਇਨ੍ਹਾਂ ਸਥਾਨਾਂ ਵਿੱਚ ਪਲੱਗ ਹੁੰਦੇ ਹਨ।
 
-ਆਓ ਆਪਣੇ ਗ੍ਰੀਟਿੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਅਪਡੇਟ ਕਰੀਏ ਤਾਂ ਕਿ ਇਹ ਕਿਸੇ ਦਾ ਨਾਮ ਸਵੀਕਾਰ ਕਰ ਸਕੇ:
+ਆਓ ਆਪਣੇ ਗ੍ਰੀਟਿੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਅਪਡੇਟ ਕਰੀਏ ਤਾਂ ਜੋ ਕਿਸੇ ਦਾ ਨਾਮ ਸਵੀਕਾਰ ਕਰ ਸਕੇ:
 
 ```javascript
 function displayGreeting(name) {
@@ -105,7 +179,7 @@ function displayGreeting(name) {
 }
 ```
 
-ਧਿਆਨ ਦਿਓ ਕਿ ਅਸੀਂ ਬੈਕਟਿਕਸ (`` ` ``) ਅਤੇ `${}` ਵਰਤ ਰਹੇ ਹਾਂ ਨਾਮ ਨੂੰ ਸਿੱਧੇ ਆਪਣੇ ਸੁਨੇਹੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ – ਇਸਨੂੰ ਟੈਂਪਲੇਟ ਲਿਟਰਲ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਹ ਸਟ੍ਰਿੰਗਸ ਨੂੰ ਵੈਰੀਏਬਲਸ ਦੇ ਨਾਲ ਮਿਲਾਉਣ ਲਈ ਬਹੁਤ ਹੀ ਸਹਾਇਕ ਹੈ।
+ਧਿਆਨ ਦਿਓ ਕਿ ਅਸੀਂ ਬੈਕਟਿਕਸ (`` ` ``) ਅਤੇ `${}` ਵਰਤ ਰਹੇ ਹਾਂ ਤਾਂ ਜੋ ਨਾਮ ਨੂੰ ਸਿੱਧੇ ਆਪਣੇ ਸੁਨੇਹੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕੇ – ਇਸਨੂੰ ਟੈਂਪਲੇਟ ਲਿਟਰਲ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਹ ਸਟ੍ਰਿੰਗਸ ਨੂੰ ਵੈਰੀਏਬਲਸ ਦੇ ਨਾਲ ਮਿਲਾਉਣ ਦਾ ਇੱਕ ਬਹੁਤ ਹੀ ਸਹੀ ਤਰੀਕਾ ਹੈ।
 
 ਹੁਣ ਜਦੋਂ ਅਸੀਂ ਆਪਣੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਦੇ ਹਾਂ, ਅਸੀਂ ਕੋਈ ਵੀ ਨਾਮ ਪਾਸ ਕਰ ਸਕਦੇ ਹਾਂ:
 
@@ -116,11 +190,34 @@ displayGreeting('Christopher');
 
 ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਟ੍ਰਿੰਗ `'Christopher'` ਲੈਂਦਾ ਹੈ, ਇਸਨੂੰ `name` ਪੈਰਾਮੀਟਰ ਨੂੰ ਅਸਾਈਨ ਕਰਦਾ ਹੈ, ਅਤੇ ਨਿੱਜੀ ਸੁਨੇਹਾ "Hello, Christopher!" ਬਣਾਉਂਦਾ ਹੈ।
 
+```mermaid
+flowchart LR
+    A["🎯 Function Call"] --> B["📥 Parameters"]
+    B --> C["⚙️ Function Body"]
+    C --> D["📤 Result"]
+    
+    A1["displayGreeting('Alice')"] --> A
+    B1["name = 'Alice'"] --> B
+    C1["Template literal\n\`Hello, \${name}!\`"] --> C
+    D1["'Hello, Alice!'"] --> D
+    
+    E["🔄 Parameter Types"] --> E1["Strings"]
+    E --> E2["Numbers"]
+    E --> E3["Booleans"]
+    E --> E4["Objects"]
+    E --> E5["Functions"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style D fill:#fff3e0
+    style E fill:#f3e5f5
+```
+
 ## ਡਿਫਾਲਟ ਮੁੱਲ
 
-ਜੇਕਰ ਅਸੀਂ ਕੁਝ ਪੈਰਾਮੀਟਰਸ ਨੂੰ ਵਿਕਲਪਿਕ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਤਾਂ ਕੀ ਹੋਵੇਗਾ? ਇੱਥੇ ਡਿਫਾਲਟ ਮੁੱਲ ਬਹੁਤ ਸਹਾਇਕ ਹੁੰਦੇ ਹਨ!
+ਜੇਕਰ ਅਸੀਂ ਕੁਝ ਪੈਰਾਮੀਟਰਸ ਨੂੰ ਵਿਕਲਪਿਕ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਤਾਂ? ਇੱਥੇ ਡਿਫਾਲਟ ਮੁੱਲ ਬਹੁਤ ਸਹਾਇਕ ਹੁੰਦੇ ਹਨ!
 
-ਆਓ ਕਹੀਏ ਕਿ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਲੋਕ ਗ੍ਰੀਟਿੰਗ ਸ਼ਬਦ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰ ਸਕਣ, ਪਰ ਜੇਕਰ ਉਹ ਕੋਈ ਨਿਰਧਾਰਿਤ ਨਾ ਕਰਨ, ਤਾਂ ਅਸੀਂ "Hello" ਨੂੰ ਬੈਕਅੱਪ ਵਜੋਂ ਵਰਤਾਂਗੇ। ਤੁਸੀਂ ਡਿਫਾਲਟ ਮੁੱਲ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਵੈਰੀਏਬਲ ਸੈਟ ਕਰਦੇ ਹੋ:
+ਆਓ ਕਹੀਏ ਕਿ ਅਸੀਂ ਲੋਕਾਂ ਨੂੰ ਗ੍ਰੀਟਿੰਗ ਸ਼ਬਦ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਪਰ ਜੇਕਰ ਉਹ ਕੋਈ ਨਿਰਧਾਰਤ ਨਾ ਕਰਨ, ਤਾਂ ਅਸੀਂ "Hello" ਨੂੰ ਬੈਕਅਪ ਵਜੋਂ ਵਰਤਾਂਗੇ। ਤੁਸੀਂ ਡਿਫਾਲਟ ਮੁੱਲ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਵੈਰੀਏਬਲ ਸੈਟ ਕਰਦੇ ਹੋ:
 
 ```javascript
 function displayGreeting(name, salutation='Hello') {
@@ -128,7 +225,7 @@ function displayGreeting(name, salutation='Hello') {
 }
 ```
 
-ਇੱਥੇ, `name` ਅਜੇ ਵੀ ਲਾਜ਼ਮੀ ਹੈ, ਪਰ `salutation` ਦਾ ਬੈਕਅੱਪ ਮੁੱਲ `'Hello'` ਹੈ ਜੇਕਰ ਕੋਈ ਵੱਖ ਗ੍ਰੀਟਿੰਗ ਪ੍ਰਦਾਨ ਨਾ ਕਰੇ।
+ਇੱਥੇ, `name` ਅਜੇ ਵੀ ਲਾਜ਼ਮੀ ਹੈ, ਪਰ `salutation` ਦਾ ਬੈਕਅਪ ਮੁੱਲ `'Hello'` ਹੈ ਜੇਕਰ ਕੋਈ ਵੱਖ-ਵੱਖ ਗ੍ਰੀਟਿੰਗ ਪ੍ਰਦਾਨ ਨਾ ਕਰੇ।
 
 ਹੁਣ ਅਸੀਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਦੋ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਕਾਲ ਕਰ ਸਕਦੇ ਹਾਂ:
 
@@ -140,23 +237,50 @@ displayGreeting('Christopher', 'Hi');
 // displays "Hi, Christopher"
 ```
 
-ਪਹਿਲੀ ਕਾਲ ਵਿੱਚ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਿਫਾਲਟ "Hello" ਵਰਤਦਾ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਗ੍ਰੀਟਿੰਗ ਸਪਸ਼ਟ ਨਹੀਂ ਕੀਤੀ। ਦੂਜੀ ਕਾਲ ਵਿੱਚ, ਇਹ ਸਾਡੇ ਕਸਟਮ "Hi" ਨੂੰ ਵਰਤਦਾ ਹੈ। ਇਹ ਲਚਕਤਾ ਫੰਕਸ਼ਨ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਲਈ ਅਨੁਕੂਲ ਬਣਾਉਂਦੀ ਹੈ।
+ਪਹਿਲੀ ਕਾਲ ਵਿੱਚ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਿਫਾਲਟ "Hello" ਵਰਤਦਾ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਗ੍ਰੀਟਿੰਗ ਸਪਸ਼ਟ ਨਹੀਂ ਕੀਤੀ। ਦੂਜੀ ਕਾਲ ਵਿੱਚ, ਇਹ ਸਾਡਾ ਕਸਟਮ "Hi" ਵਰਤਦਾ ਹੈ। ਇਹ ਲਚਕਤਾ ਫੰਕਸ਼ਨ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਲਈ ਅਨੁਕੂਲ ਬਣਾਉਂਦੀ ਹੈ।
+
+### 🎛️ **ਪੈਰਾਮੀਟਰਸ ਮਾਸਟਰੀ ਚੈੱਕ: ਫੰਕਸ਼ਨ ਨੂੰ ਲਚਕਦਾਰ ਬਣਾਉਣਾ**
+
+**ਆਪਣੀ ਪੈਰਾਮੀਟਰ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ:**
+- ਪੈਰਾਮੀਟਰ ਅਤੇ ਆਰਗੂਮੈਂਟ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?
+- ਅਸਲ ਦੁਨੀਆ ਦੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ ਡਿਫਾਲਟ ਮੁੱਲ ਕਿਉਂ ਲਾਭਦਾਇਕ ਹਨ?
+- ਕੀ ਤੁਸੀਂ ਅਨੁਮਾਨ ਲਗਾ ਸਕਦੇ ਹੋ ਕਿ ਜੇਕਰ ਤੁਸੀਂ ਪੈਰਾਮੀਟਰਸ ਤੋਂ ਵੱਧ ਆਰਗੂਮੈਂਟ ਪਾਸ ਕਰੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> NoParams: function greet() {}
+    [*] --> WithParams: function greet(name) {}
+    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
+    
+    NoParams --> Static: Same output always
+    WithParams --> Dynamic: Changes with input
+    WithDefaults --> Flexible: Optional customization
+    
+    Static --> [*]
+    Dynamic --> [*]
+    Flexible --> [*]
+    
+    note right of WithDefaults
+        Most flexible approach
+        Backwards compatible
+    end note
+```
+
+> **ਪ੍ਰੋ ਟਿਪ**: ਡਿਫਾਲਟ ਪੈਰਾਮੀਟਰ ਤੁਹਾਡੇ ਫੰਕਸ਼ਨ ਨੂੰ ਹੋਰ ਯੂਜ਼ਰ-ਫ੍ਰੈਂਡਲੀ ਬਣਾਉਂਦੇ ਹਨ। ਯੂਜ਼ਰਜ਼ ਸੈਂਸਿਬਲ ਡਿਫਾਲਟਸ ਨਾਲ ਤੇਜ਼ੀ ਨਾਲ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹਨ, ਪਰ ਜਦੋਂ ਲੋੜ ਹੋਵੇ ਤਾਂ ਫਿਰ ਵੀ ਕਸਟਮਾਈਜ਼ ਕਰ ਸਕਦੇ ਹਨ!
 
 ## ਰਿਟਰਨ ਮੁੱਲ
 
 ਸਾਡੇ ਫੰਕਸ਼ਨ ਹੁਣ ਤੱਕ ਸਿਰਫ ਸੁਨੇਹੇ ਕਨਸੋਲ ਵਿੱਚ ਪ੍ਰਿੰਟ ਕਰ ਰਹੇ ਹਨ, ਪਰ ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਇੱਕ ਫੰਕਸ਼ਨ ਕੁਝ ਗਣਨਾ ਕਰੇ ਅਤੇ ਤੁਹਾਨੂੰ ਨਤੀਜਾ ਵਾਪਸ ਦੇਵੇ?
 
-ਇੱਥੇ **ਰਿਟਰਨ ਮੁੱਲ** ਆਉਂਦੇ ਹਨ। ਕੁਝ ਦਿਖਾਉਣ ਦੀ ਬਜਾਏ, ਇੱਕ ਫੰਕਸ਼ਨ ਤੁਹਾਨੂੰ ਮੁੱਲ ਵਾਪਸ ਦੇ ਸਕਦਾ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਆਪਣੇ ਕੋਡ ਦੇ ਹੋਰ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵਰਤ ਸਕਦੇ ਹੋ।
-
-ਮੁੱਲ ਵਾਪਸ ਭੇਜਣ ਲਈ, ਤੁਸੀਂ `return` ਕੀਵਰਡ ਵਰਤਦੇ ਹੋ ਅਤੇ ਜੋ ਕੁਝ ਤੁਸੀਂ ਵਾਪਸ ਭੇਜਣਾ ਚਾਹੁੰਦੇ ਹੋ ਉਸਦੇ ਨਾਲ:
+ਇੱਥੇ **ਰਿਟਰਨ ਮੁੱਲ** ਆਉਂਦੇ ਹਨ। ਕੁਝ ਦਿਖਾਉਣ ਦੀ ਬਜਾਏ, ਇੱਕ ਫੰਕਸ਼ਨ ਤੁਹਾਨੂੰ ਇੱਕ ਮੁੱਲ ਵਾਪਸ ਦੇ ਸਕਦਾ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਇੱਕ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਆਪਣੇ ਕੋਡ ਦੇ ਹੋਰ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵਰਤ ਸਕਦੇ ਹੋ।
 
 ```javascript
 return myVariable;
 ```
 
-ਇੱਥੇ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਹੈ: ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ `return` ਸਟੇਟਮੈਂਟ 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ, ਇਹ ਤੁਰੰਤ ਚਲਾਉਣਾ ਬੰਦ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹ ਮੁੱਲ ਵਾਪਸ ਭੇਜਦਾ ਹੈ ਜਿਸਨੇ ਇਸਨੂੰ ਕਾਲ ਕੀਤਾ ਸੀ।
+ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ `return` ਸਟੇਟਮੈਂਟ 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ, ਤਾਂ ਇਹ ਤੁਰੰਤ ਚਲਾਉਣਾ ਬੰਦ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹ ਮੁੱਲ ਵਾਪਸ ਭੇਜਦਾ ਹੈ ਜਿਸਨੇ ਇਸਨੂੰ ਕਾਲ ਕੀਤਾ ਸੀ।
 
-ਆਓ ਆਪਣੇ ਗ੍ਰੀਟਿੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਸੋਧੀਏ ਤਾਂ ਕਿ ਇਹ ਸੁਨੇਹਾ ਵਾਪਸ ਭੇਜੇ ਬਜਾਏ ਇਸਨੂੰ ਪ੍ਰਿੰਟ ਕਰਨ ਦੇ:
+ਆਓ ਆਪਣੇ ਗ੍ਰੀਟਿੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਸੋਧੀਏ ਤਾਂ ਜੋ ਸੁਨੇਹਾ ਪ੍ਰਿੰਟ ਕਰਨ ਦੀ ਬਜਾਏ ਇਸਨੂੰ ਵਾਪਸ ਕਰੇ:
 
 ```javascript
 function createGreetingMessage(name) {
@@ -167,41 +291,105 @@ function createGreetingMessage(name) {
 
 ਹੁਣ ਗ੍ਰੀਟਿੰਗ ਪ੍ਰਿੰਟ ਕਰਨ ਦੀ ਬਜਾਏ, ਇਹ ਫੰਕਸ਼ਨ ਸੁਨੇਹਾ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸਾਨੂੰ ਵਾਪਸ ਦਿੰਦਾ ਹੈ।
 
-ਵਾਪਸ ਭੇਜੇ ਗਏ ਮੁੱਲ ਨੂੰ ਵਰਤਣ ਲਈ, ਅਸੀਂ ਇਸਨੂੰ ਕਿਸੇ ਹੋਰ ਮੁੱਲ ਵਾਂਗ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹਾਂ:
-
 ```javascript
 const greetingMessage = createGreetingMessage('Christopher');
 ```
 
-ਹੁਣ `greetingMessage` ਵਿੱਚ "Hello, Christopher" ਹੈ ਅਤੇ ਅਸੀਂ ਇਸਨੂੰ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਕਿਤੇ ਵੀ ਵਰਤ ਸਕਦੇ ਹਾਂ – ਇਸਨੂੰ ਵੈਬਪੇਜ 'ਤੇ ਦਿਖਾਉਣ ਲਈ, ਇਸਨੂੰ ਈਮੇਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, ਜਾਂ ਇਸਨੂੰ ਕਿਸੇ ਹੋਰ ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ।
-
-## ਫੰਕਸ਼ਨ ਨੂੰ ਫੰਕਸ਼ਨ ਲਈ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਵਰਤਣਾ
-
-ਫੰਕਸ਼ਨ ਹੋਰ ਫੰਕਸ਼ਨ ਲਈ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਪਾਸ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਇਹ ਧਾਰਨਾ ਸ਼ੁਰੂ ਵਿੱਚ ਥੋੜ੍ਹੀ ਜਟਿਲ ਲੱਗ ਸਕਦੀ ਹੈ, ਇਹ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜੋ ਲਚਕਦਾਰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਪੈਟਰਨ ਨੂੰ ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ।
-
-ਇਹ ਪੈਟਰਨ ਬਹੁਤ ਆਮ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਹਿਣਾ ਚਾਹੁੰਦੇ ਹੋ "ਜਦੋਂ ਕੁਝ ਹੁੰਦਾ ਹੈ, ਇਹ ਹੋਰ ਚੀਜ਼ ਕਰੋ।" ਉਦਾਹਰਣ ਲਈ, "ਜਦੋਂ ਟਾਈਮਰ ਖਤਮ ਹੁੰਦਾ ਹੈ, ਇਹ ਕੋਡ ਚਲਾਓ" ਜਾਂ "ਜਦੋਂ ਯੂਜ਼ਰ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ, ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ।"
-
-ਆਓ `setTimeout` ਨੂੰ ਵੇਖੀਏ, ਜੋ ਇੱਕ ਬਿਲਟ-ਇਨ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਕੁਝ ਸਮਾਂ ਉਡੀਕ ਕਰਦਾ ਹੈ ਅਤੇ ਫਿਰ ਕੁਝ ਕੋਡ ਚਲਾਉਂਦਾ ਹੈ। ਅਸੀਂ ਇਸਨੂੰ ਦੱਸਣ ਦੀ ਲੋੜ ਹੈ ਕਿ ਕਿਹੜਾ ਕੋਡ ਚਲਾਉਣਾ ਹੈ – ਫੰਕਸ਼ਨ ਪਾਸ ਕਰਨ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਵਰਤੋਂ!
-
-ਇਹ ਕੋਡ ਅਜ਼ਮਾਓ – 3 ਸਕਿੰਟ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਇੱਕ ਸੁਨੇਹਾ ਵੇਖਣ ਨੂੰ ਮਿਲੇਗਾ:
-
-```javascript
-function displayDone() {
-  console.log('3 seconds has elapsed');
-}
-// timer value is in milliseconds
-setTimeout(displayDone, 3000);
+ਹੁਣ `greetingMessage` ਵਿੱਚ "Hello, Christopher" ਹੈ ਅਤੇ ਅਸੀਂ ਇਸਨੂੰ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਕਿਤੇ ਵੀ ਵਰਤ ਸਕਦੇ ਹਾਂ – ਇਸਨੂੰ ਇੱਕ ਵੈਬਪੇਜ 'ਤੇ ਦਿਖਾਉਣ ਲਈ, ਇੱਕ ਈਮੇਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, ਜਾਂ ਇਸਨੂੰ ਕਿਸੇ ਹੋਰ ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ।
+
+```mermaid
+flowchart TD
+    A["🔧 Function Processing"] --> B{"return statement?"}
+    B -->|Yes| C["📤 Return Value"]
+    B -->|No| D["📭 Return undefined"]
+    
+    C --> E["💾 Store in Variable"]
+    C --> F["🔗 Use in Expression"]
+    C --> G["📞 Pass to Function"]
+    
+    D --> H["⚠️ Usually not useful"]
+    
+    I["📋 Return Value Uses"] --> I1["Calculate results"]
+    I --> I2["Validate input"]
+    I --> I3["Transform data"]
+    I --> I4["Create objects"]
+    
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style I fill:#e3f2fd
 ```
 
-ਧਿਆਨ ਦਿਓ ਕਿ ਅਸੀਂ `displayDone` ਨੂੰ (ਪੈਰੈਂਥੀਸਿਸ ਦੇ ਬਗੈਰ) `setTimeout` ਨੂੰ ਪਾਸ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ ਫੰਕਸ਼ਨ ਨੂੰ ਖੁਦ ਨਹੀਂ ਕਾਲ ਕਰ ਰਹੇ – ਅਸੀਂ ਇਸਨੂੰ `setTimeout` ਨੂੰ ਦੇ ਰਹੇ ਹਾਂ ਅਤੇ ਕਹਿ ਰਹੇ ਹਾਂ "ਇਸਨੂੰ 3 ਸਕਿੰਟ ਵਿੱਚ ਕਾਲ ਕਰੋ।"
+### 🔄 **ਰਿਟਰਨ ਮੁੱਲ ਚੈੱਕ: ਨਤੀਜੇ ਵਾਪਸ ਪ੍ਰਾਪਤ ਕਰਨਾ**
 
-### ਗੁੰਨਾਮ ਫੰਕਸ਼ਨ
+**ਆਪਣੀ ਰਿਟਰਨ ਮੁੱਲ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ:**
+- ਫੰਕਸ਼ਨ ਵਿੱਚ `return` ਸਟੇਟਮੈਂਟ ਤੋਂ ਬਾਅਦ ਕੋਡ ਨਾਲ ਕੀ ਹੁੰਦਾ ਹੈ?
+- ਸਿਰਫ ਕਨਸੋਲ ਵਿੱਚ ਪ੍ਰਿੰਟ ਕਰਨ ਦੀ ਬਜਾਏ ਮੁੱਲ ਵਾਪਸ ਕਰਨਾ ਕਿਉਂ ਵਧੀਆ ਹੈ?
+- ਕੀ ਇੱਕ ਫੰਕਸ਼ਨ ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਮੁੱਲ (string, number, boolean) ਵਾਪਸ ਕਰ ਸਕਦਾ ਹੈ?
 
-ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਸਿਰਫ ਇੱਕ ਚੀਜ਼ ਲਈ ਫੰਕਸ਼ਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਸਨੂੰ ਕੋਈ ਨਾਮ ਨਹੀਂ ਦੇਣਾ ਚਾਹੁੰਦੇ। ਸੋਚੋ – ਜੇਕਰ ਤੁਸੀਂ ਸਿਰਫ ਇੱਕ ਵਾਰ ਫੰਕਸ਼ਨ ਵਰਤ ਰਹੇ ਹੋ, ਤਾਂ ਕਿਉਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਇੱਕ ਵਾਧੂ ਨਾਮ ਨਾਲ ਭਰੋ?
+```mermaid
+pie title "Common Return Value Types"
+    "Strings" : 30
+    "Numbers" : 25
+    "Objects" : 20
+    "Booleans" : 15
+    "Arrays" : 10
+```
 
-ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੁਹਾਨੂੰ **ਗੁੰਨਾਮ ਫੰਕਸ਼ਨ** ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ – ਫੰਕਸ਼ਨ ਬਿਨਾਂ ਨਾਮ ਦੇ ਜੋ ਤੁਸੀਂ ਜਿੱਥੇ ਲੋੜ
+> **ਮੁੱਖ ਝਲਕ**: ਮੁੱਲ ਵਾਪਸ ਕਰਨ ਵਾਲੇ ਫੰਕਸ਼ਨ ਹੋਰ ਬਹੁਤ ਲਚਕਦਾਰ ਹੁੰਦੇ ਹਨ ਕਿਉਂਕਿ ਕਾਲ ਕਰਨ ਵਾਲਾ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਨਤੀਜੇ ਨਾਲ ਕੀ ਕਰਨਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹੋਰ ਮ
+- [ ] ਪਰੰਪਰਾਗਤ ਫੰਕਸ਼ਨ ਨੂੰ ਐਰੋ ਫੰਕਸ਼ਨ ਸਿੰਟੈਕਸ ਵਿੱਚ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ  
+- [ ] ਚੁਣੌਤੀ ਦਾ ਅਭਿਆਸ ਕਰੋ: ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡ ਵਿੱਚ ਅੰਤਰ ਦੀ ਵਿਆਖਿਆ ਕਰੋ  
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**  
+- [ ] ਪੋਸਟ-ਪਾਠ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਕੋਈ ਵੀ ਗੁੰਝਲਦਾਰ ਧਾਰਨਾਵਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ  
+- [ ] GitHub Copilot ਚੁਣੌਤੀ ਤੋਂ ਗਣਿਤ ਯੂਟਿਲਿਟੀ ਲਾਇਬ੍ਰੇਰੀ ਬਣਾਓ  
+- [ ] ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਇੱਕ ਹੋਰ ਫੰਕਸ਼ਨ ਨੂੰ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਵਰਤਦਾ ਹੈ  
+- [ ] ਡਿਫਾਲਟ ਪੈਰਾਮੀਟਰਾਂ ਨਾਲ ਫੰਕਸ਼ਨ ਲਿਖਣ ਦਾ ਅਭਿਆਸ ਕਰੋ  
+- [ ] ਫੰਕਸ਼ਨ ਰਿਟਰਨ ਵੈਲਿਊਜ਼ ਵਿੱਚ ਟੈਂਪਲੇਟ ਲਿਟਰਲਸ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ  
+
+### 📅 **ਤੁਹਾਡਾ ਹਫਤਾਵਾਰ ਫੰਕਸ਼ਨ ਮਾਹਰਤਾ ਯੋਜਨਾ**  
+- [ ] "Fun with Functions" ਅਸਾਈਨਮੈਂਟ ਨੂੰ ਰਚਨਾਤਮਕਤਾ ਨਾਲ ਪੂਰਾ ਕਰੋ  
+- [ ] ਕੁਝ ਦੁਹਰਾਏ ਗਏ ਕੋਡ ਨੂੰ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਫੰਕਸ਼ਨ ਵਿੱਚ ਰਿਫੈਕਟਰ ਕਰੋ  
+- [ ] ਸਿਰਫ ਫੰਕਸ਼ਨ ਵਰਤ ਕੇ ਇੱਕ ਛੋਟਾ ਕੈਲਕੂਲੇਟਰ ਬਣਾਓ (ਕੋਈ ਗਲੋਬਲ ਵੈਰੀਏਬਲ ਨਹੀਂ)  
+- [ ] `map()` ਅਤੇ `filter()` ਵਰਗੇ ਐਰੇ ਮੈਥਡ ਨਾਲ ਐਰੋ ਫੰਕਸ਼ਨ ਦਾ ਅਭਿਆਸ ਕਰੋ  
+- [ ] ਆਮ ਕੰਮਾਂ ਲਈ ਯੂਟਿਲਿਟੀ ਫੰਕਸ਼ਨ ਦਾ ਸੰਗ੍ਰਹਿ ਬਣਾਓ  
+- [ ] ਹਾਈਅਰ-ਆਰਡਰ ਫੰਕਸ਼ਨ ਅਤੇ ਫੰਕਸ਼ਨਲ ਪ੍ਰੋਗਰਾਮਿੰਗ ਧਾਰਨਾਵਾਂ ਦਾ ਅਧਿਐਨ ਕਰੋ  
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨਾਵਾਰ ਬਦਲਾਅ**  
+- [ ] ਕਲੋਜ਼ਰ ਅਤੇ ਸਕੋਪ ਵਰਗੇ ਉੱਚ-ਸਤਹ ਦੇ ਫੰਕਸ਼ਨ ਧਾਰਨਾਵਾਂ ਵਿੱਚ ਮਾਹਰ ਬਣੋ  
+- [ ] ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ ਜੋ ਫੰਕਸ਼ਨ ਕੰਪੋਜ਼ੀਸ਼ਨ ਨੂੰ ਵਧੇਰੇ ਵਰਤਦਾ ਹੋਵੇ  
+- [ ] ਫੰਕਸ਼ਨ ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਨੂੰ ਸੁਧਾਰ ਕੇ ਓਪਨ ਸੋਰਸ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ  
+- [ ] ਕਿਸੇ ਹੋਰ ਨੂੰ ਫੰਕਸ਼ਨ ਅਤੇ ਵੱਖ-ਵੱਖ ਸਿੰਟੈਕਸ ਸ਼ੈਲੀਆਂ ਬਾਰੇ ਸਿਖਾਓ  
+- [ ] ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਫੰਕਸ਼ਨਲ ਪ੍ਰੋਗਰਾਮਿੰਗ ਪੈਰਾਡਾਇਮਜ਼ ਦੀ ਖੋਜ ਕਰੋ  
+- [ ] ਭਵਿੱਖ ਦੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਫੰਕਸ਼ਨ ਦੀ ਆਪਣੀ ਲਾਇਬ੍ਰੇਰੀ ਬਣਾਓ  
+
+### 🏆 **ਅੰਤਮ ਫੰਕਸ਼ਨ ਚੈਂਪੀਅਨ ਚੈੱਕ-ਇਨ**  
+
+**ਆਪਣੀ ਫੰਕਸ਼ਨ ਮਾਹਰਤਾ ਦਾ ਜਸ਼ਨ ਮਨਾਓ:**  
+- ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ ਸਭ ਤੋਂ ਉਪਯੋਗ ਫੰਕਸ਼ਨ ਕਿਹੜਾ ਹੈ?  
+- ਫੰਕਸ਼ਨ ਬਾਰੇ ਸਿੱਖਣ ਨਾਲ ਕੋਡ ਦੇ ਆਯੋਜਨ ਬਾਰੇ ਤੁਹਾਡੀ ਸੋਚ ਕਿਵੇਂ ਬਦਲੀ ਹੈ?  
+- ਤੁਹਾਨੂੰ ਕਿਹੜਾ ਫੰਕਸ਼ਨ ਸਿੰਟੈਕਸ ਪਸੰਦ ਹੈ ਅਤੇ ਕਿਉਂ?  
+- ਤੁਸੀਂ ਕਿਹੜੀ ਅਸਲ-ਦੁਨੀਆ ਦੀ ਸਮੱਸਿਆ ਨੂੰ ਫੰਕਸ਼ਨ ਲਿਖ ਕੇ ਹੱਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?  
+
+```mermaid
+journey
+    title Your Function Confidence Evolution
+    section Today
+      Confused by Syntax: 3: You
+      Understanding Basics: 4: You
+      Writing Simple Functions: 5: You
+    section This Week
+      Using Parameters: 4: You
+      Returning Values: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Function Composition: 5: You
+      Advanced Patterns: 5: You
+      Teaching Others: 5: You
+```
+  
+> 🎉 **ਤੁਸੀਂ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਸਭ ਤੋਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਧਾਰਨਾਵਾਂ ਵਿੱਚ ਮਾਹਰਤਾ ਹਾਸਲ ਕਰ ਲਈ ਹੈ!** ਫੰਕਸ਼ਨ ਵੱਡੇ ਪ੍ਰੋਗਰਾਮਾਂ ਦੇ ਨਿਰਮਾਣ ਬਲਾਕ ਹਨ। ਹਰ ਐਪਲੀਕੇਸ਼ਨ ਜੋ ਤੁਸੀਂ ਕਦੇ ਵੀ ਬਣਾਓਗੇ, ਫੰਕਸ਼ਨ ਨੂੰ ਕੋਡ ਨੂੰ ਆਯੋਜਿਤ, ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਅਤੇ ਸੰਰਚਿਤ ਕਰਨ ਲਈ ਵਰਤੇਗਾ। ਹੁਣ ਤੁਸੀਂ ਤਰਕ ਨੂੰ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਪੈਕ ਕਰਨ ਦਾ ਤਰੀਕਾ ਸਮਝਦੇ ਹੋ, ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ ਹੋਸ਼ਿਆਰ ਅਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਪ੍ਰੋਗਰਾਮਰ ਬਣਾਉਂਦਾ ਹੈ। ਮੋਡਿਊਲਰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਦੁਨੀਆ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ! 🚀  
 
 ---
 
 **ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/2-js-basics/3-making-decisions/README.md b/translations/pa/2-js-basics/3-making-decisions/README.md
index 20f1fce0c0..368c0521f3 100644
--- a/translations/pa/2-js-basics/3-making-decisions/README.md
+++ b/translations/pa/2-js-basics/3-making-decisions/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90a3c32c3377f83ab750c2447c77ab98",
-  "translation_date": "2025-10-22T17:25:18+00:00",
+  "original_hash": "c688385d15dd3645e924ea0ffee8967f",
+  "translation_date": "2025-11-03T16:08:56+00:00",
   "source_file": "2-js-basics/3-making-decisions/README.md",
   "language_code": "pa"
 }
@@ -13,29 +13,79 @@ CO_OP_TRANSLATOR_METADATA:
 
 > ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ
 
-ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਐਪਲੀਕੇਸ਼ਨ ਸਮਾਰਟ ਫੈਸਲੇ ਕਿਵੇਂ ਲੈਂਦੀਆਂ ਹਨ? ਜਿਵੇਂ ਕਿ ਇੱਕ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਸਭ ਤੋਂ ਤੇਜ਼ ਰਸਤਾ ਚੁਣਦਾ ਹੈ, ਜਾਂ ਇੱਕ ਥਰਮੋਸਟੈਟ ਤਪਸ਼ ਚਾਲੂ ਕਰਨ ਦਾ ਸਮਾਂ ਕਿਵੇਂ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ? ਇਹ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ ਫੈਸਲੇ ਲੈਣ ਦਾ ਮੁੱਖ ਸਿਧਾਂਤ ਹੈ।
+```mermaid
+journey
+    title Your JavaScript Decision-Making Adventure
+    section Foundation
+      Boolean Values: 5: You
+      Comparison Operators: 4: You
+      Logical Thinking: 5: You
+    section Basic Decisions
+      If Statements: 4: You
+      If-Else Logic: 5: You
+      Switch Statements: 4: You
+    section Advanced Logic
+      Logical Operators: 5: You
+      Complex Conditions: 4: You
+      Ternary Expressions: 5: You
+```
+
+ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਐਪਲੀਕੇਸ਼ਨ ਸਮਾਰਟ ਫੈਸਲੇ ਕਿਵੇਂ ਲੈਂਦੀਆਂ ਹਨ? ਜਿਵੇਂ ਕਿ ਇੱਕ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਤੇਜ਼ ਰਸਤਾ ਕਿਵੇਂ ਚੁਣਦਾ ਹੈ, ਜਾਂ ਇੱਕ ਥਰਮੋਸਟੈਟ ਗਰਮੀ ਚਾਲੂ ਕਰਨ ਦਾ ਫੈਸਲਾ ਕਿਵੇਂ ਕਰਦਾ ਹੈ? ਇਹ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ ਫੈਸਲੇ ਲੈਣ ਦਾ ਮੂਲ ਸਿਧਾਂਤ ਹੈ।
 
-ਜਿਵੇਂ ਚਾਰਲਸ ਬੈਬੇਜ ਦੇ ਐਨਾਲਿਟਿਕਲ ਇੰਜਨ ਨੂੰ ਹਾਲਾਤਾਂ ਦੇ ਅਧਾਰ 'ਤੇ ਵੱਖ-ਵੱਖ ਕਾਰਵਾਈਆਂ ਦੇ ਕ੍ਰਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਸੀ, ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰੋਗਰਾਮਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਹਾਲਾਤਾਂ ਦੇ ਅਧਾਰ 'ਤੇ ਚੋਣਾਂ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਹ ਸ਼ਾਖਾ ਬਣਾਉਣ ਅਤੇ ਫੈਸਲੇ ਲੈਣ ਦੀ ਯੋਗਤਾ ਹੈ ਜੋ ਸਥਿਰ ਕੋਡ ਨੂੰ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ, ਸਮਰੱਥ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲਦੀ ਹੈ।
+ਜਿਵੇਂ ਚਾਰਲਸ ਬੈਬੇਜ ਦੇ ਐਨਾਲਿਟਿਕਲ ਇੰਜਨ ਨੂੰ ਹਾਲਾਤਾਂ ਦੇ ਅਧਾਰ 'ਤੇ ਵੱਖ-ਵੱਖ ਕਾਰਵਾਈਆਂ ਦੇ ਕ੍ਰਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਸੀ, ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰੋਗਰਾਮ ਵੱਖ-ਵੱਖ ਹਾਲਾਤਾਂ ਦੇ ਅਧਾਰ 'ਤੇ ਚੋਣਾਂ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਹ ਸ਼ਾਖਾ ਬਣਾਉਣ ਅਤੇ ਫੈਸਲੇ ਲੈਣ ਦੀ ਯੋਗਤਾ ਹੈ ਜੋ ਸਥਿਰ ਕੋਡ ਨੂੰ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ, ਸਮਰੱਥ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲਦੀ ਹੈ।
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ ਸ਼ਰਤੀ ਤਰਕ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਸਿੱਖੋਗੇ। ਅਸੀਂ ਸ਼ਰਤੀ ਬਿਆਨ, ਤੁਲਨਾ ਆਪਰੇਟਰ ਅਤੇ ਤਰਕਸ਼ੀਲ ਅਭਿਵਿਅਕਤੀਆਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ ਜੋ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹਾਲਾਤਾਂ ਦਾ ਮੁਲਾਂਕਣ ਕਰਨ ਅਤੇ ਉਚਿਤ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ ਸ਼ਰਤੀ ਤਰਕ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦਾ ਤਰੀਕਾ ਸਿੱਖੋਗੇ। ਅਸੀਂ ਸ਼ਰਤੀ ਬਿਆਨ, ਤੁਲਨਾ ਆਪਰੇਟਰ ਅਤੇ ਤਰਕਸ਼ੀਲ ਅਭਿਵਿਅਕਤੀਆਂ ਦੀ ਖੋਜ ਕਰਾਂਗੇ ਜੋ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹਾਲਾਤਾਂ ਦਾ ਮੁਲਾਂਕਣ ਕਰਨ ਅਤੇ ਉਚਿਤ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ।
 
 ## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 
 [ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/11)
 
-ਫੈਸਲੇ ਲੈਣ ਅਤੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਪ੍ਰਵਾਹ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਦੀ ਯੋਗਤਾ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦਾ ਇੱਕ ਮੁੱਖ ਪੱਖ ਹੈ। ਇਹ ਸੈਕਸ਼ਨ ਕਵਰ ਕਰਦਾ ਹੈ ਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰੋਗਰਾਮਾਂ ਦੇ ਕਾਰਜ ਪੱਧਰ ਨੂੰ ਬੂਲੀਅਨ ਮੁੱਲਾਂ ਅਤੇ ਸ਼ਰਤੀ ਤਰਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਿਵੇਂ ਨਿਯੰਤਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
+ਫੈਸਲੇ ਲੈਣ ਅਤੇ ਪ੍ਰੋਗਰਾਮ ਦੇ ਪ੍ਰਵਾਹ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਦੀ ਯੋਗਤਾ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦਾ ਇੱਕ ਮੂਲ ਪੱਖ ਹੈ। ਇਹ ਭਾਗ ਕਵਰ ਕਰਦਾ ਹੈ ਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰੋਗਰਾਮਾਂ ਦੇ ਕਾਰਜ ਪਾਠ ਨੂੰ ਬੂਲੀਅਨ ਮੁੱਲਾਂ ਅਤੇ ਸ਼ਰਤੀ ਤਰਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਿਵੇਂ ਨਿਯੰਤਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
 
 [![ਫੈਸਲੇ ਲੈਣਾ](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "ਫੈਸਲੇ ਲੈਣਾ")
 
-> 🎥 ਉੱਪਰ ਦਿੱਤੀ ਤਸਵੀਰ 'ਤੇ ਕਲਿਕ ਕਰੋ ਫੈਸਲੇ ਲੈਣ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ।
+> 🎥 ਉੱਪਰ ਦਿੱਤੀ ਤਸਵੀਰ 'ਤੇ ਕਲਿਕ ਕਰੋ ਫੈਸਲੇ ਲੈਣ ਬਾਰੇ ਵੀਡੀਓ ਲਈ।
 
 > ਤੁਸੀਂ ਇਹ ਪਾਠ [ਮਾਈਕਰੋਸਾਫਟ ਲਰਨ](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
 
-## ਬੂਲੀਅਨ ਬਾਰੇ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਦੁਹਰਾਵਾ
+```mermaid
+mindmap
+  root((Decision Making))
+    Boolean Logic
+      true/false
+      Comparison results
+      Logical expressions
+    Conditional Statements
+      if statements
+        Single condition
+        Code execution
+      if-else
+        Two paths
+        Alternative actions
+      switch
+        Multiple options
+        Clean structure
+    Operators
+      Comparison
+        === !== < > <= >=
+        Value relationships
+      Logical
+        && || !
+        Combine conditions
+    Advanced Patterns
+      Ternary
+        ? : syntax
+        Inline decisions
+      Complex Logic
+        Nested conditions
+        Multiple criteria
+```
+
+## ਬੂਲੀਅਨਸ 'ਤੇ ਇੱਕ ਛੋਟਾ ਸਾਰ
 
-ਫੈਸਲੇ ਲੈਣ ਦੀ ਪੜਚੋਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ ਪਿਛਲੇ ਪਾਠ ਤੋਂ ਬੂਲੀਅਨ ਮੁੱਲਾਂ ਨੂੰ ਦੁਹਰਾਈਏ। ਗਣਿਤਜੀਵਨ ਜਾਰਜ ਬੂਲ ਦੇ ਨਾਮ 'ਤੇ ਰੱਖੇ ਗਏ, ਇਹ ਮੁੱਲ ਦੋਹਰੇ ਰਾਜਾਂ ਦਾ ਪ੍ਰਤੀਨਿਧਿਤਾ ਕਰਦੇ ਹਨ - ਜਾਂ `true` ਜਾਂ `false`। ਇੱਥੇ ਕੋਈ ਗੁੰਝਲ ਨਹੀਂ, ਕੋਈ ਮੱਧਮ ਜਗ੍ਹਾ ਨਹੀਂ।
+ਫੈਸਲੇ ਲੈਣ ਦੀ ਖੋਜ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਪਿਛਲੇ ਪਾਠ ਤੋਂ ਬੂਲੀਅਨ ਮੁੱਲਾਂ ਨੂੰ ਦੁਬਾਰਾ ਵੇਖੀਏ। ਗਣਿਤਜੀ ਜਾਰਜ ਬੂਲ ਦੇ ਨਾਮ 'ਤੇ ਰੱਖੇ ਗਏ, ਇਹ ਮੁੱਲ ਦੋਹਰੇ ਰਾਜਾਂ ਦਾ ਪ੍ਰਤੀਨਿਧਿਤਾ ਕਰਦੇ ਹਨ - ਜਾਂ `true` ਜਾਂ `false`। ਕੋਈ ਗੁੰਝਲ ਨਹੀਂ, ਕੋਈ ਮੱਧ ਦਾ ਰਾਹ ਨਹੀਂ।
 
-ਇਹ ਦੋਹਰੇ ਮੁੱਲ ਸਾਰੇ ਗਣਨਾਤਮਕ ਤਰਕ ਦੀ ਬੁਨਿਆਦ ਬਣਾਉਂਦੇ ਹਨ। ਤੁਹਾਡਾ ਪ੍ਰੋਗਰਾਮ ਜੋ ਵੀ ਫੈਸਲਾ ਲੈਂਦਾ ਹੈ, ਆਖਿਰਕਾਰ ਇੱਕ ਬੂਲੀਅਨ ਮੁਲਾਂਕਣ 'ਤੇ ਆਧਾਰਿਤ ਹੁੰਦਾ ਹੈ।
+ਇਹ ਦੋਹਰੇ ਮੁੱਲ ਸਾਰੇ ਗਣਨਾਤਮਕ ਤਰਕ ਦੀ ਨੀਂਹ ਬਣਾਉਂਦੇ ਹਨ। ਤੁਹਾਡਾ ਪ੍ਰੋਗਰਾਮ ਜੋ ਵੀ ਫੈਸਲਾ ਲੈਂਦਾ ਹੈ, ਆਖਿਰਕਾਰ ਇੱਕ ਬੂਲੀਅਨ ਮੁਲਾਂਕਣ 'ਤੇ ਘਟਦਾ ਹੈ।
 
 ਬੂਲੀਅਨ ਵੈਰੀਏਬਲ ਬਣਾਉਣਾ ਸਿੱਧਾ ਹੈ:
 
@@ -46,30 +96,85 @@ let myFalseBool = false;
 
 ਇਹ ਦੋ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਸਪਸ਼ਟ ਬੂਲੀਅਨ ਮੁੱਲਾਂ ਨਾਲ ਬਣਾਉਂਦਾ ਹੈ।
 
-✅ ਬੂਲੀਅਨ ਦਾ ਨਾਮ ਅੰਗਰੇਜ਼ੀ ਗਣਿਤਜੀਵਨ, ਦਰਸ਼ਨਸ਼ਾਸਤਰੀ ਅਤੇ ਤਰਕਸ਼ਾਸਤਰੀ ਜਾਰਜ ਬੂਲ (1815–1864) ਦੇ ਨਾਮ 'ਤੇ ਰੱਖਿਆ ਗਿਆ ਹੈ।
+✅ ਬੂਲੀਅਨਸ ਦਾ ਨਾਮ ਅੰਗਰੇਜ਼ੀ ਗਣਿਤਜੀ, ਦਰਸ਼ਨਸ਼ਾਸਤਰੀ ਅਤੇ ਤਰਕਸ਼ਾਸਤਰੀ ਜਾਰਜ ਬੂਲ (1815–1864) ਦੇ ਨਾਮ 'ਤੇ ਰੱਖਿਆ ਗਿਆ ਹੈ।
 
-## ਤੁਲਨਾ ਆਪਰੇਟਰ ਅਤੇ ਬੂਲੀਅਨ
+## ਤੁਲਨਾ ਆਪਰੇਟਰ ਅਤੇ ਬੂਲੀਅਨਸ
 
-ਅਮਲ ਵਿੱਚ, ਤੁਸੀਂ ਕਦੇ ਵੀ ਬੂਲੀਅਨ ਮੁੱਲਾਂ ਨੂੰ ਹੱਥੋਂ ਸੈੱਟ ਨਹੀਂ ਕਰਦੇ। ਇਸ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਹਾਲਾਤਾਂ ਦਾ ਮੁਲਾਂਕਣ ਕਰਕੇ ਉਹਨਾਂ ਨੂੰ ਜਨਮ ਦਿੰਦੇ ਹੋ: "ਕੀ ਇਹ ਨੰਬਰ ਉਸ ਤੋਂ ਵੱਧ ਹੈ?" ਜਾਂ "ਕੀ ਇਹ ਮੁੱਲ ਬਰਾਬਰ ਹਨ?"
+ਅਮਲ ਵਿੱਚ, ਤੁਸੀਂ ਬੂਲੀਅਨ ਮੁੱਲਾਂ ਨੂੰ ਹੱਥੋਂ ਸੈਟ ਨਹੀਂ ਕਰਦੇ। ਇਸਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਹਾਲਾਤਾਂ ਦਾ ਮੁਲਾਂਕਣ ਕਰਕੇ ਉਹਨਾਂ ਨੂੰ ਜਨਰੇਟ ਕਰਦੇ ਹੋ: "ਕੀ ਇਹ ਨੰਬਰ ਉਸ ਤੋਂ ਵੱਡਾ ਹੈ?" ਜਾਂ "ਕੀ ਇਹ ਮੁੱਲ ਬਰਾਬਰ ਹਨ?"
 
-ਤੁਲਨਾ ਆਪਰੇਟਰ ਇਹ ਮੁਲਾਂਕਣ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। ਉਹ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦੇ ਹਨ ਅਤੇ ਓਪਰੇਂਡਾਂ ਦੇ ਸੰਬੰਧ ਦੇ ਅਧਾਰ 'ਤੇ ਬੂਲੀਅਨ ਨਤੀਜੇ ਵਾਪਸ ਕਰਦੇ ਹਨ।
+ਤੁਲਨਾ ਆਪਰੇਟਰ ਇਹ ਮੁਲਾਂਕਣ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। ਉਹ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦੇ ਹਨ ਅਤੇ ਓਪਰੇਂਡਾਂ ਦੇ ਰਿਸ਼ਤੇ ਦੇ ਅਧਾਰ 'ਤੇ ਬੂਲੀਅਨ ਨਤੀਜੇ ਵਾਪਸ ਕਰਦੇ ਹਨ।
 
 | ਚਿੰਨ੍ਹ | ਵੇਰਵਾ                                                                                                                                                   | ਉਦਾਹਰਨ            |
 | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **ਘੱਟ ਤੋਂ ਘੱਟ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇਕਰ ਖੱਬੇ ਪਾਸੇ ਵਾਲਾ ਮੁੱਲ ਸੱਜੇ ਪਾਸੇ ਤੋਂ ਘੱਟ ਹੈ                              | `5 < 6 // true`    |
-| `<=`   | **ਘੱਟ ਜਾਂ ਬਰਾਬਰ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇਕਰ ਖੱਬੇ ਪਾਸੇ ਵਾਲਾ ਮੁੱਲ ਸੱਜੇ ਪਾਸੇ ਤੋਂ ਘੱਟ ਜਾਂ ਬਰਾਬਰ ਹੈ      | `5 <= 6 // true`   |
-| `>`    | **ਵੱਧ ਤੋਂ ਵੱਧ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇਕਰ ਖੱਬੇ ਪਾਸੇ ਵਾਲਾ ਮੁੱਲ ਸੱਜੇ ਪਾਸੇ ਤੋਂ ਵੱਡਾ ਹੈ                         | `5 > 6 // false`   |
-| `>=`   | **ਵੱਧ ਜਾਂ ਬਰਾਬਰ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇਕਰ ਖੱਬੇ ਪਾਸੇ ਵਾਲਾ ਮੁੱਲ ਸੱਜੇ ਪਾਸੇ ਤੋਂ ਵੱਡਾ ਜਾਂ ਬਰਾਬਰ ਹੈ | `5 >= 6 // false`  |
-| `===`  | **ਸਖ਼ਤ ਬਰਾਬਰੀ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇਕਰ ਸੱਜੇ ਅਤੇ ਖੱਬੇ ਪਾਸੇ ਦੇ ਮੁੱਲ ਬਰਾਬਰ ਹਨ ਅਤੇ ਇੱਕੋ ਜਿਹੇ ਡੇਟਾ ਟਾਈਪ ਹਨ।       | `5 === 6 // false` |
-| `!==`  | **ਅਸਮਾਨਤਾ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹ ਬੂਲੀਅਨ ਮੁੱਲ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੋ ਸਖ਼ਤ ਬਰਾਬਰੀ ਆਪਰੇਟਰ ਵਾਪਸ ਕਰੇਗਾ                                    | `5 !== 6 // true`  |
+| `<`    | **ਘੱਟ ਹੈ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇ ਖੱਬੇ ਪਾਸੇ ਦਾ ਮੁੱਲ ਸੱਜੇ ਪਾਸੇ ਤੋਂ ਘੱਟ ਹੈ                              | `5 < 6 // true`    |
+| `<=`   | **ਘੱਟ ਜਾਂ ਬਰਾਬਰ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇ ਖੱਬੇ ਪਾਸੇ ਦਾ ਮੁੱਲ ਸੱਜੇ ਪਾਸੇ ਤੋਂ ਘੱਟ ਜਾਂ ਬਰਾਬਰ ਹੈ      | `5 <= 6 // true`   |
+| `>`    | **ਵੱਡਾ ਹੈ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇ ਖੱਬੇ ਪਾਸੇ ਦਾ ਮੁੱਲ ਸੱਜੇ ਪਾਸੇ ਤੋਂ ਵੱਡਾ ਹੈ                         | `5 > 6 // false`   |
+| `>=`   | **ਵੱਡਾ ਜਾਂ ਬਰਾਬਰ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇ ਖੱਬੇ ਪਾਸੇ ਦਾ ਮੁੱਲ ਸੱਜੇ ਪਾਸੇ ਤੋਂ ਵੱਡਾ ਜਾਂ ਬਰਾਬਰ ਹੈ | `5 >= 6 // false`  |
+| `===`  | **ਸਖ਼ਤ ਬਰਾਬਰੀ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ `true` ਬੂਲੀਅਨ ਡੇਟਾ ਟਾਈਪ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਦੇ ਮੁੱਲ ਬਰਾਬਰ ਹਨ ਅਤੇ ਇੱਕੋ ਡੇਟਾ ਟਾਈਪ ਹਨ।       | `5 === 6 // false` |
+| `!==`  | **ਅਸਮਾਨਤਾ**: ਦੋ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ ਅਤੇ ਜੋ ਸਖ਼ਤ ਬਰਾਬਰੀ ਆਪਰੇਟਰ ਵਾਪਸ ਕਰੇਗਾ ਉਸਦਾ ਵਿਰੋਧੀ ਬੂਲੀਅਨ ਮੁੱਲ ਵਾਪਸ ਕਰਦਾ ਹੈ                                    | `5 !== 6 // true`  |
+
+✅ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਕੁਝ ਤੁਲਨਾਵਾਂ ਲਿਖ ਕੇ ਆਪਣੀ ਜਾਣਕਾਰੀ ਦੀ ਜਾਂਚ ਕਰੋ। ਕੀ ਕੋਈ ਵਾਪਸ ਕੀਤਾ ਡੇਟਾ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰਦਾ ਹੈ?
+
+```mermaid
+flowchart LR
+    A["🔢 Values"] --> B["⚖️ Comparison"]
+    B --> C["✅ Boolean Result"]
+    
+    D["5"] --> E["< 6"]
+    E --> F["true"]
+    
+    G["10"] --> H["=== '10'"]
+    H --> I["false"]
+    
+    J["'hello'"] --> K["!== 'world'"]
+    K --> L["true"]
+    
+    M["📋 Operator Types"] --> M1["Equality: === !=="]
+    M --> M2["Relational: < > <= >="]
+    M --> M3["Strict vs Loose"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style M fill:#fff3e0
+```
+
+### 🧠 **ਤੁਲਨਾ ਦੀ ਮਾਹਰਤਾ ਦੀ ਜਾਂਚ: ਬੂਲੀਅਨ ਤਰਕ ਨੂੰ ਸਮਝਣਾ**
+
+**ਆਪਣੀ ਤੁਲਨਾ ਦੀ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ:**
+- ਤੁਹਾਨੂੰ ਕਿਉਂ ਲੱਗਦਾ ਹੈ ਕਿ `===` (ਸਖ਼ਤ ਬਰਾਬਰੀ) ਨੂੰ ਆਮ ਤੌਰ 'ਤੇ `==` (ਢਿੱਲੀ ਬਰਾਬਰੀ) ਤੋਂ ਵਧੇਰੇ ਤਰਜੀਹ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ?
+- ਕੀ ਤੁਸੀਂ ਅਨੁਮਾਨ ਲਗਾ ਸਕਦੇ ਹੋ ਕਿ `5 === '5'` ਕੀ ਵਾਪਸ ਕਰਦਾ ਹੈ? `5 == '5'` ਬਾਰੇ ਕੀ?
+- `!==` ਅਤੇ `!=` ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> Comparison: Two values
+    Comparison --> StrictEqual: === or !==
+    Comparison --> Relational: < > <= >=
+    
+    StrictEqual --> TypeCheck: Check type AND value
+    Relational --> NumberCompare: Convert to numbers
+    
+    TypeCheck --> BooleanResult: true or false
+    NumberCompare --> BooleanResult
+    
+    note right of StrictEqual
+        Preferred approach
+        No type conversion
+    end note
+    
+    note right of Relational
+        Useful for ranges
+        Numerical comparisons
+    end note
+```
 
-✅ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕੰਸੋਲ ਵਿੱਚ ਕੁਝ ਤੁਲਨਾਵਾਂ ਲਿਖ ਕੇ ਆਪਣੀ ਜਾਣਕਾਰੀ ਦੀ ਜਾਂਚ ਕਰੋ। ਕੀ ਕੋਈ ਵਾਪਸ ਕੀਤਾ ਡੇਟਾ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰਦਾ ਹੈ?
+> **ਪ੍ਰੋ ਟਿਪ**: ਬਰਾਬਰੀ ਦੀ ਜਾਂਚ ਲਈ ਹਮੇਸ਼ਾ `===` ਅਤੇ `!==` ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਦੋਂ ਤੱਕ ਤੁਹਾਨੂੰ ਖਾਸ ਤੌਰ 'ਤੇ ਟਾਈਪ ਕਨਵਰਜ਼ਨ ਦੀ ਲੋੜ ਨਾ ਹੋਵੇ। ਇਹ ਅਣਪ੍ਰਤੀਕਸ਼ਿਤ ਵਿਵਹਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ!
 
 ## If ਬਿਆਨ
 
-`if` ਬਿਆਨ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਸਵਾਲ ਪੁੱਛਣ ਵਰਗਾ ਹੈ। "ਜੇ ਇਹ ਹਾਲਾਤ ਸਹੀ ਹਨ, ਤਾਂ ਇਹ ਕੰਮ ਕਰੋ।" ਇਹ ਸ਼ਾਇਦ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਸੰਦ ਹੈ ਜੋ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਫੈਸਲੇ ਲੈਣ ਲਈ ਵਰਤੋਂਗੇ।
+`if` ਬਿਆਨ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਇੱਕ ਸਵਾਲ ਪੁੱਛਣ ਵਾਂਗ ਹੈ। "ਜੇ ਇਹ ਹਾਲਾਤ ਸਹੀ ਹੈ, ਤਾਂ ਇਹ ਕੰਮ ਕਰੋ।" ਇਹ ਸ਼ਾਇਦ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਸੰਦ ਹੈ ਜੋ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਫੈਸਲੇ ਲੈਣ ਲਈ ਵਰਤੋਂਗੇ।
 
-ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:
+ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਹੈ:
 
 ```javascript
 if (condition) {
@@ -77,9 +182,9 @@ if (condition) {
 }
 ```
 
-ਹਾਲਾਤ ਪੈਰੈਂਥੀਸਿਸ ਦੇ ਅੰਦਰ ਜਾਂਦੇ ਹਨ, ਅਤੇ ਜੇ ਇਹ `true` ਹੈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਰਲੀ ਬ੍ਰੇਸਜ਼ ਦੇ ਅੰਦਰ ਕੋਡ ਚਲਾਉਂਦਾ ਹੈ। ਜੇ ਇਹ `false` ਹੈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਉਸ ਸਾਰੇ ਬਲਾਕ ਨੂੰ ਛੱਡ ਦਿੰਦਾ ਹੈ।
+ਹਾਲਾਤ ਨੂੰ ਕੋਠੇ ਵਿੱਚ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਜੇ ਇਹ `true` ਹੈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਘੁੰਮਾਏ ਬ੍ਰੇਸਾਂ ਦੇ ਅੰਦਰ ਕੋਡ ਚਲਾਉਂਦਾ ਹੈ। ਜੇ ਇਹ `false` ਹੈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਉਸ ਸਾਰੇ ਬਲਾਕ ਨੂੰ ਛੱਡ ਦਿੰਦਾ ਹੈ।
 
-ਤੁਸੀਂ ਅਕਸਰ ਇਹ ਹਾਲਾਤ ਬਣਾਉਣ ਲਈ ਤੁਲਨਾ ਆਪਰੇਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ। ਆਓ ਇੱਕ ਵਿਹੰਗਮ ਉਦਾਹਰਨ ਦੇਖੀਏ:
+ਤੁਸੀਂ ਅਕਸਰ ਇਹ ਹਾਲਾਤ ਬਣਾਉਣ ਲਈ ਤੁਲਨਾ ਆਪਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ। ਆਓ ਇੱਕ ਵਿਹੰਗਮ ਉਦਾਹਰਨ ਵੇਖੀਏ:
 
 ```javascript
 let currentMoney = 1000;
@@ -91,13 +196,31 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-ਕਿਉਂਕਿ `1000 >= 800` ਦਾ ਮੁਲਾਂਕਣ `true` ਹੈ, ਬਲਾਕ ਦੇ ਅੰਦਰ ਕੋਡ ਚਲਦਾ ਹੈ, ਕੰਸੋਲ ਵਿੱਚ "Getting a new laptop!" ਦਿਖਾਉਂਦਾ ਹੈ।
+ਕਿਉਂਕਿ `1000 >= 800` ਦਾ ਮੁਲਾਂਕਣ `true` ਹੈ, ਬਲਾਕ ਦੇ ਅੰਦਰ ਕੋਡ ਚਲਦਾ ਹੈ, "Getting a new laptop!" ਕਨਸੋਲ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ।
+
+```mermaid
+flowchart TD
+    A["🚀 Program Start"] --> B{"💰 currentMoney >= laptopPrice?"}
+    B -->|true| C["🎉 'Getting a new laptop!'"]
+    B -->|false| D["⏭️ Skip code block"]
+    C --> E["📋 Continue program"]
+    D --> E
+    
+    F["📊 If Statement Structure"] --> F1["if (condition) {"]
+    F1 --> F2["  // code to run if true"]
+    F2 --> F3["}"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style F fill:#e3f2fd
+```
 
 ## If..Else ਬਿਆਨ
 
-ਪਰ ਜੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਜਦੋਂ ਹਾਲਾਤ ਗਲਤ ਹੋਵੇ ਤਾਂ ਤੁਹਾਡਾ ਪ੍ਰੋਗਰਾਮ ਕੁਝ ਵੱਖਰਾ ਕਰੇ? ਇਹ ਜਿੱਥੇ `else` ਆਉਂਦਾ ਹੈ - ਇਹ ਜਿਵੇਂ ਬੈਕਅਪ ਯੋਜਨਾ ਹੋਵੇ।
+ਪਰ ਜੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਜਦੋਂ ਹਾਲਾਤ ਗਲਤ ਹੋਵੇ ਤਾਂ ਤੁਹਾਡਾ ਪ੍ਰੋਗਰਾਮ ਕੁਝ ਵੱਖਰਾ ਕਰੇ? ਇਹਥੇ `else` ਆਉਂਦਾ ਹੈ - ਇਹ ਜਿਵੇਂ ਕਿ ਇੱਕ ਬੈਕਅਪ ਯੋਜਨਾ ਹੈ।
 
-`else` ਬਿਆਨ ਤੁਹਾਨੂੰ ਇਹ ਕਹਿਣ ਦਾ ਤਰੀਕਾ ਦਿੰਦਾ ਹੈ "ਜੇ ਇਹ ਹਾਲਾਤ ਸਹੀ ਨਹੀਂ ਹੈ, ਤਾਂ ਇਸ ਦੂਜੇ ਕੰਮ ਨੂੰ ਕਰੋ।"
+`else` ਬਿਆਨ ਤੁਹਾਨੂੰ ਇਹ ਕਹਿਣ ਦਾ ਤਰੀਕਾ ਦਿੰਦਾ ਹੈ "ਜੇ ਇਹ ਹਾਲਾਤ ਸਹੀ ਨਹੀਂ ਹੈ, ਤਾਂ ਇਸ ਦੇ ਬਦਲੇ ਵਿੱਚ ਇਹ ਹੋਰ ਕੰਮ ਕਰੋ।"
 
 ```javascript
 let currentMoney = 500;
@@ -112,15 +235,44 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-ਹੁਣ ਕਿਉਂਕਿ `500 >= 800` `false` ਹੈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਹਿਲੇ ਬਲਾਕ ਨੂੰ ਛੱਡ ਦਿੰਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਬਦਲੇ `else` ਬਲਾਕ ਚਲਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਕੰਸੋਲ ਵਿੱਚ "Can't afford a new laptop, yet!" ਦੇਖੋਗੇ।
+ਹੁਣ ਕਿਉਂਕਿ `500 >= 800` `false` ਹੈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਹਿਲੇ ਬਲਾਕ ਨੂੰ ਛੱਡ ਦਿੰਦਾ ਹੈ ਅਤੇ `else` ਬਲਾਕ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ "Can't afford a new laptop, yet!" ਕਨਸੋਲ ਵਿੱਚ ਦੇਖੋਗੇ।
+
+✅ ਇਸ ਕੋਡ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਚਲਾਕੇ ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ। `currentMoney` ਅਤੇ `laptopPrice` ਵੈਰੀਏਬਲਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲੋ ਤਾਂ ਜੋ ਵਾਪਸ ਕੀਤਾ `console.log()` ਬਦਲ ਜਾਵੇ।
+
+### 🎯 **If-Else ਤਰਕ ਦੀ ਜਾਂਚ: ਸ਼ਾਖਾ ਪਾਠ**
+
+**ਆਪਣੀ ਸ਼ਰਤੀ ਤਰਕ ਦੀ ਸਮਝ ਦਾ ਮੁਲਾਂਕਣ ਕਰੋ:**
+- ਕੀ ਹੁੰਦਾ ਹੈ ਜੇ `currentMoney` `laptopPrice` ਦੇ ਬਰਾਬਰ ਹੈ?
+- ਕੀ ਤੁਸੀਂ ਇੱਕ ਅਸਲ-ਜਗਤ ਦੀ ਸਥਿਤੀ ਬਾਰੇ ਸੋਚ ਸਕਦੇ ਹੋ ਜਿੱਥੇ if-else ਤਰਕ ਲਾਭਦਾਇਕ ਹੋਵੇਗਾ?
+- ਤੁਸੀਂ ਇਸਨੂੰ ਕਈ ਕੀਮਤ ਦੀ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕਿਵੇਂ ਵਧਾ ਸਕਦੇ ਹੋ?
+
+```mermaid
+flowchart TD
+    A["🔍 Evaluate Condition"] --> B{"Condition True?"}
+    B -->|Yes| C["📤 Execute IF block"]
+    B -->|No| D["📥 Execute ELSE block"]
+    
+    C --> E["✅ One path taken"]
+    D --> E
+    
+    F["🌐 Real-world Examples"] --> F1["User login status"]
+    F --> F2["Age verification"]
+    F --> F3["Form validation"]
+    F --> F4["Game state changes"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#e3f2fd
+    style F fill:#f3e5f5
+```
 
-✅ ਇਸ ਕੋਡ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਕੰਸੋਲ ਵਿੱਚ ਚਲਾਕੇ ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ। `currentMoney` ਅਤੇ `laptopPrice` ਵੈਰੀਏਬਲਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲੋ ਤਾਂ ਜੋ ਵਾਪਸ ਕੀਤੇ `console.log()` ਨੂੰ ਬਦਲਿਆ ਜਾ ਸਕੇ।
+> **ਮੁੱਖ ਝਲਕ**: If-else ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਸਿਰਫ ਇੱਕ ਪਾਠ ਲਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਹਮੇਸ਼ਾ ਕਿਸੇ ਵੀ ਹਾਲਾਤ ਲਈ ਜਵਾਬ ਦੇਣ ਦੀ ਗਰੰਟੀ ਦਿੰਦਾ ਹੈ!
 
 ## Switch ਬਿਆਨ
 
-ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਇੱਕ ਮੁੱਲ ਨੂੰ ਕਈ ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ ਤੁਲਨਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਕਈ `if..else` ਬਿਆਨਾਂ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ, ਇਹ ਪਹੁੰਚ ਅਸੁਵਿਧਾਜਨਕ ਹੋ ਜਾਂਦੀ ਹੈ। `switch` ਬਿਆਨ ਕਈ ਵੱਖਰੇ ਮੁੱਲਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਸਾਫ਼ ਸਟ੍ਰਕਚਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
+ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਇੱਕ ਮੁੱਲ ਦੀ ਕਈ ਵਿਕਲਪਾਂ ਨਾਲ ਤੁਲਨਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਕਈ `if..else` ਬਿਆਨਾਂ ਨੂੰ ਜੁੜ ਸਕਦੇ ਹੋ, ਇਹ ਪਹੁੰਚ ਅਸੁਵਿਧਾਜਨਕ ਬਣ ਜਾਂਦੀ ਹੈ। `switch` ਬਿਆਨ ਕਈ ਵੱਖਰੇ ਮੁੱਲਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਸਾਫ਼ ਸਟ੍ਰਕਚਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
 
-ਇਸ ਦਾ ਸਿਧਾਂਤ ਸ਼ੁਰੂਆਤੀ ਟੈਲੀਫੋਨ ਐਕਸਚੇਂਜਾਂ ਵਿੱਚ ਵਰਤੇ ਗਏ ਮਕੈਨਿਕਲ ਸਵਿੱਚਿੰਗ ਸਿਸਟਮਾਂ ਦੇ ਸਮਾਨ ਹੈ - ਇੱਕ ਇਨਪੁਟ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜਾ ਵਿਸ਼ੇਸ਼ ਰਸਤਾ ਕਾਰਜਨਵਤੀ ਕਰਦਾ ਹੈ।
+ਇਸ ਦਾ ਸਿਧਾਂਤ ਸ਼ੁਰੂਆਤੀ ਟੈਲੀਫੋਨ ਐਕਸਚੇਂਜਾਂ ਵਿੱਚ ਵਰਤੇ ਗਏ ਮਕੈਨਿਕਲ ਸਵਿੱਚਿੰਗ ਸਿਸਟਮਾਂ ਦੇ ਸਮਾਨ ਹੈ - ਇੱਕ ਇਨਪੁਟ ਮੁੱਲ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਕਾਰਜਕਾਰੀ ਕਿਹੜੇ ਖਾਸ ਪਾਠ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ।
 
 ```javascript
 switch (expression) {
@@ -135,12 +287,12 @@ switch (expression) {
 }
 ```
 
-ਇਹ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ:
+ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਬਣਾਇਆ ਗਿਆ ਹੈ:
 - ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੱਕ ਵਾਰ ਅਭਿਵਿਅਕਤੀ ਦਾ ਮੁਲਾਂਕਣ ਕਰਦਾ ਹੈ
-- ਇਹ ਹਰ `case` ਨੂੰ ਵੇਖਦਾ ਹੈ ਕਿ ਕੋਈ ਮੇਲ ਮਿਲਦਾ ਹੈ
-- ਜਦੋਂ ਇਹ ਮੇਲ ਮਿਲਦਾ ਹੈ, ਇਹ ਉਸ ਕੋਡ ਬਲਾਕ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ
-- `break` ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਸਵਿੱਚ ਤੋਂ ਬਾਹਰ ਨਿਕਲਦਾ ਹੈ
-- ਜੇ ਕੋਈ ਕੇਸ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ, ਇਹ `default` ਬਲਾਕ ਚਲਾਉਂਦਾ ਹੈ (ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਹੈ)
+- ਇਹ ਹਰ `case` ਨੂੰ ਵੇਖਦਾ ਹੈ ਤਾਂ ਜੋ ਇੱਕ ਮੇਲ ਮਿਲੇ
+- ਜਦੋਂ ਇਹ ਇੱਕ ਮੇਲ ਮਿਲਦਾ ਹੈ, ਇਹ ਉਸ ਕੋਡ ਬਲਾਕ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ
+- `break` ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਰੋਕਣ ਅਤੇ switch ਤੋਂ ਬਾਹਰ ਨਿਕਲਣ ਲਈ ਕਹਿੰਦਾ ਹੈ
+- ਜੇ ਕੋਈ ਕੇਸ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ, ਤਾਂ ਇਹ `default` ਬਲਾਕ ਚਲਾਉਂਦਾ ਹੈ (ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਹੈ)
 
 ```javascript
 // Program using switch statement for day of week
@@ -164,66 +316,186 @@ switch (dayNumber) {
 console.log(`Today is ${dayName}`);
 ```
 
-ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੇਖਦਾ ਹੈ ਕਿ `dayNumber` `2` ਹੈ, ਮੇਲ ਖਾਣ ਵਾਲਾ `case 2` ਲੱਭਦਾ ਹੈ, `dayName` ਨੂੰ "Tuesday" ਸੈੱਟ ਕਰਦਾ ਹੈ, ਅਤੇ ਫਿਰ ਸਵਿੱਚ ਤੋਂ ਬਾਹਰ ਨਿਕਲ ਜਾਂਦਾ ਹੈ। ਨਤੀਜਾ? "Today is Tuesday" ਕੰਸੋਲ ਵਿੱਚ ਲੌਗ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
+ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੇਖਦਾ ਹੈ ਕਿ `dayNumber` `2` ਹੈ, ਮੇਲ ਖਾਂਦਾ `case 2`, `dayName` ਨੂੰ "Tuesday" ਸੈਟ ਕਰਦਾ ਹੈ, ਅਤੇ ਫਿਰ switch ਤੋਂ ਬਾਹਰ ਨਿਕਲ ਜਾਂਦਾ ਹੈ। ਨਤੀਜਾ? "Today is Tuesday" ਕਨਸੋਲ ਵਿੱਚ ਲੌਗ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
+
+```mermaid
+flowchart TD
+    A["📥 switch(expression)"] --> B["🔍 Evaluate once"]
+    B --> C{"Match case 1?"}
+    C -->|Yes| D["📋 Execute case 1"]
+    C -->|No| E{"Match case 2?"}
+    E -->|Yes| F["📋 Execute case 2"]
+    E -->|No| G{"Match case 3?"}
+    G -->|Yes| H["📋 Execute case 3"]
+    G -->|No| I["📋 Execute default"]
+    
+    D --> J["🛑 break"]
+    F --> K["🛑 break"]
+    H --> L["🛑 break"]
+    
+    J --> M["✅ Exit switch"]
+    K --> M
+    L --> M
+    I --> M
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style M fill:#e8f5e8
+```
+
+✅ ਇਸ ਕੋਡ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਚਲਾਕੇ ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ। ਵੈਰੀਏਬਲ a ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲੋ ਤਾਂ ਜੋ ਵਾਪਸ ਕੀਤਾ `console.log()` ਬਦਲ ਜਾਵੇ।
+
+### 🔄 **Switch ਬਿਆਨ ਦੀ ਮਾਹਰਤਾ: ਕਈ ਵਿਕਲਪ**
 
-✅ ਇਸ ਕੋਡ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਕੰਸੋਲ ਵਿੱਚ ਚਲਾਕੇ ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ। ਵੈਰੀਏਬਲ a ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲੋ ਤਾਂ ਜੋ ਵਾਪਸ ਕੀਤੇ `console.log()` ਨੂੰ ਬਦਲਿਆ ਜਾ ਸਕੇ।
+**ਆਪਣੀ switch ਦੀ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ:**
+- ਕੀ ਹੁੰਦਾ ਹੈ ਜੇ ਤੁਸੀਂ `break` ਬਿਆਨ ਭੁੱਲ ਜਾਂਦੇ ਹੋ?
+- ਤੁਸੀਂ ਕਈ `if-else` ਬਿਆਨਾਂ ਦੀ ਬਜਾਏ `switch` ਦੀ ਵਰਤੋਂ ਕਦੋਂ ਕਰਦੇ ਹੋ?
+- ਜੇ ਤੁਸੀਂ ਸੋਚਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਸਾਰੇ ਸੰਭਾਵਨਾਵਾਂ ਨੂੰ ਕਵਰ ਕਰ ਲਿਆ ਹੈ ਤਾਂ `default` ਕੇਸ ਕਿਉਂ ਲਾਭਦਾਇਕ ਹੈ?
 
-## ਤਰਕਸ਼ੀਲ ਆਪਰੇਟਰ ਅਤੇ ਬੂਲੀਅਨ
+```mermaid
+pie title "When to Use Each Decision Structure"
+    "Simple if-else" : 40
+    "Complex if-else chains" : 25
+    "Switch statements" : 20
+    "Ternary operators" : 15
+```
+
+> **ਸਰਵੋਤਮ ਅਭਿਆਸ**: ਇੱਕ ਵੈਰੀਏਬਲ ਦੀ ਕਈ ਖਾਸ ਮੁੱਲਾਂ ਨਾਲ ਤੁਲਨਾ ਕਰਨ ਲਈ `switch` ਦੀ ਵਰਤੋਂ ਕਰੋ। ਰੇਂਜ ਚੈੱਕ ਜਾਂ ਜਟਿਲ ਹਾਲਾਤਾਂ ਲਈ `if-else` ਦੀ ਵਰਤੋਂ ਕਰੋ!
 
-ਜਟਿਲ ਫੈਸਲੇ ਅਕਸਰ ਇੱਕੋ ਸਮੇਂ ਕਈ ਹਾਲਾਤਾਂ ਦਾ ਮੁਲਾਂਕਣ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੇ ਹਨ। ਜਿਵੇਂ ਕਿ ਬੂਲੀਅਨ ਅਲਜੈਬਰਾ ਗਣਿਤਜੀਵਨ ਨੂੰ ਤਰਕਸ਼ੀਲ ਅਭਿਵਿਅਕਤੀਆਂ ਨੂੰ ਜੋੜਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਪ੍ਰੋਗਰਾਮਿੰਗ ਕਈ ਬੂਲੀਅਨ ਹਾਲਾਤਾਂ ਨੂੰ ਜੁੜਨ ਲਈ ਤਰਕਸ਼ੀਲ ਆਪਰੇਟਰ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ।
+## ਤਰਕਸ਼ੀਲ ਆਪਰੇਟਰ ਅਤੇ ਬੂਲੀਅਨਸ
 
-ਇਹ ਆਪਰੇਟਰ ਸਧਾਰਨ ਸੱਚ/ਝੂਠੇ ਮੁਲਾਂਕਣਾਂ ਨੂੰ ਜੋੜ ਕੇ ਜਟਿਲ ਸ਼ਰਤੀ ਤਰਕ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ।
+ਜਟਿਲ ਫੈਸਲੇ ਅਕਸਰ ਇੱਕੋ ਸਮੇਂ ਕਈ ਹਾਲਾਤਾਂ ਦਾ ਮੁਲਾਂਕਣ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੇ ਹਨ। ਜਿਵੇਂ ਕਿ ਬੂਲੀਅਨ ਬੀਜਗਣਿਤ ਗਣਿਤਜੀਆਂ ਨੂੰ ਤਰਕਸ਼ੀਲ ਅਭਿਵਿਅਕਤੀਆਂ ਨੂੰ ਜੋੜਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਪ੍ਰੋਗਰਾਮਿੰਗ ਕਈ ਬੂਲੀਅਨ ਹਾਲਾਤਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਤਰਕਸ਼ੀਲ ਆਪਰੇਟਰ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ।
+
+ਇਹ ਆਪਰੇਟਰ ਸਧਾਰਨ true/false ਮੁਲਾਂਕਣਾਂ ਨੂੰ ਜੋੜ ਕੇ ਜਟਿਲ ਸ਼ਰਤੀ ਤਰਕ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ।
 
 | ਚਿੰਨ੍ਹ | ਵੇਰਵਾ                                                                                     | ਉਦਾਹਰਨ                                                                 |
 | ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| `&&`   | **ਲਾਜ਼ਮੀ AND**: ਦੋ ਬੂਲੀਅਨ ਅਭਿਵਿਅਕਤੀਆਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ। ਸੱਚ ਵਾਪਸ ਕਰਦਾ ਹੈ **ਸਿਰਫ** ਜੇ ਦੋਵੇਂ ਪਾਸੇ ਸੱਚ ਹਨ | `(5 > 3) && (5 < 10) // ਦੋਵੇਂ ਪਾਸੇ ਸੱਚ ਹਨ। ਸੱਚ ਵਾਪਸ ਕਰਦਾ ਹੈ` |
-| `\|\|` | **ਲਾਜ਼ਮੀ OR**: ਦੋ ਬੂਲੀਅਨ ਅਭਿਵਿਅਕਤੀਆਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ। ਸੱਚ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇ ਘੱਟੋ-ਘੱਟ ਇੱਕ ਪਾਸਾ ਸੱਚ ਹੈ     | `(5 > 10) \|\| (5 < 10) // ਇੱਕ ਪਾਸਾ ਗਲਤ ਹੈ, ਦੂਜਾ ਸੱਚ ਹੈ। ਸੱਚ ਵਾਪਸ ਕਰਦਾ ਹੈ` |
-| `!`    | **ਲਾਜ਼ਮੀ NOT**: ਇੱਕ ਬੂਲੀਅਨ ਅਭਿਵਿਅਕਤੀ ਦਾ ਵਿਰੋਧੀ ਮੁੱਲ ਵਾਪਸ ਕਰਦਾ ਹੈ                             | `!(5 > 10) // 5 10 ਤੋਂ ਵੱਧ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ "!" ਇਸਨੂੰ ਸੱਚ ਬਣਾਉਂਦਾ ਹੈ`         |
+| `&&`   | **ਤਰਕਸ਼ੀਲ AND**: ਦੋ ਬੂਲੀਅਨ ਅਭਿਵਿਅਕਤੀਆਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ। true **ਸਿਰਫ** ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇ ਦੋਵੇਂ ਪਾਸੇ ਸਹੀ ਹਨ | `(5 > 3) && (5 < 10) // ਦੋਵੇਂ ਪਾਸੇ ਸਹੀ ਹਨ। true ਵਾਪਸ ਕਰਦਾ ਹੈ` |
+| `\|\|` | **ਤਰਕਸ਼ੀਲ OR**: ਦੋ ਬੂਲੀਅਨ ਅਭਿਵਿਅਕਤੀਆਂ ਦੀ ਤੁਲਨਾ ਕਰਦਾ ਹੈ। true ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੇ ਘੱਟੋ-ਘੱਟ ਇੱਕ ਪਾਸਾ ਸਹੀ ਹੈ     | `(5 > 10) \|\| (5 < 10) // ਇੱਕ ਪਾਸਾ
+2. ਲਾਜ਼ਮੀ ਔਪਰੇਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਾਂਚ ਕਰੋ ਕਿ ਵਿਦਿਆਰਥੀ ਪਾਸ ਕਰਦਾ ਹੈ (ਗਰੇਡ >= 60) ਅਤੇ ਆਨਰਸ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ (ਗਰੇਡ >= 90)  
+3. ਹਰ ਲੇਟਰ ਗਰੇਡ ਲਈ ਵਿਸ਼ੇਸ਼ ਫੀਡਬੈਕ ਦੇਣ ਲਈ ਇੱਕ ਸਵਿੱਚ ਸਟੇਟਮ ਦੀ ਵਰਤੋਂ ਕਰੋ  
+4. ਟਰਨਰੀ ਔਪਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਹ ਨਿਰਧਾਰਤ ਕਰੋ ਕਿ ਵਿਦਿਆਰਥੀ ਅਗਲੇ ਕੋਰਸ ਲਈ ਯੋਗ ਹੈ (ਗਰੇਡ >= 70)  
+5. ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਇਨਪੁਟ ਵੈਧਤਾ ਸ਼ਾਮਲ ਕਰੋ ਕਿ ਸਕੋਰ 0 ਤੋਂ 100 ਦੇ ਵਿਚਕਾਰ ਹੈ  
 
-ਇਹ ਆਪਰੇਟਰ ਤੁਹਾਨੂੰ ਹਾਲਾਤਾਂ ਨੂੰ ਲਾਭਕਾਰੀ ਢੰਗ ਨਾਲ ਜੋੜਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ:
-- AND (`&&`) ਦਾ ਮਤਲਬ ਹੈ ਦੋਵੇਂ ਹਾਲਾਤ ਸੱਚ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ
-- OR (`||`) ਦਾ ਮਤਲਬ ਹੈ ਘੱਟੋ-ਘੱਟ ਇੱਕ ਹਾਲਾਤ ਸੱਚ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ  
-- NOT (`!`) ਸੱਚ ਨੂੰ ਝੂਠ ਵਿੱਚ ਬਦਲਦਾ ਹੈ (ਅਤੇ ਵਿਰੋਧੀ)
+ਆਪਣੇ ਪ੍ਰੋਗਰਾਮ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਕੋਰਾਂ ਨਾਲ ਟੈਸਟ ਕਰੋ, ਜਿਵੇਂ ਕਿ 59, 60, 89, 90, ਅਤੇ ਗਲਤ ਇਨਪੁਟ।
 
-## ਤਰਕਸ਼ੀਲ ਆਪਰੇਟਰਾਂ ਨਾਲ ਹਾਲਾਤ ਅਤੇ ਫੈਸਲੇ
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।  
 
-ਆਓ ਇੱਕ ਹੋਰ ਹਕੀਕਤੀ ਉਦਾਹਰਨ ਦੇ ਨਾਲ ਇਹ ਤਰਕਸ਼ੀਲ ਆਪਰੇਟਰ ਦੇਖੀਏ:
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼  
 
-```javascript
-let currentMoney = 600;
-let laptopPrice = 800;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Laptop price at 20 percent off
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/12)  
 
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
-  // Condition is true. Code in this block will run.
-  console.log("Getting a new laptop!");
-} else {
-  // Condition is false. Code in this block will run.
-  console.log("Can't afford a new laptop, yet!");
-}
-```
+## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ  
 
-ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ: ਅਸੀਂ 20% ਛੂਟ ਦੀ ਕੀਮਤ (640) ਦੀ ਗਣਨਾ ਕਰਦੇ ਹਾਂ, ਫਿਰ ਮੁਲਾਂਕਣ ਕਰਦੇ ਹਾਂ ਕਿ ਸਾਡੀ ਉਪਲਬਧ ਰਕਮ ਪੂਰੀ ਕੀਮਤ ਜਾਂ ਛੂਟ ਵਾਲੀ ਕੀਮਤ ਨੂੰ ਕਵਰ ਕਰਦੀ ਹੈ। ਕਿਉਂਕਿ 600 ਛੂਟ ਵਾਲੀ ਕੀਮਤ ਦੀ ਸੀਮਾ 640 ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ, ਹਾਲਾਤ ਸੱਚ ਹੋ ਜਾਂਦੇ ਹਨ।
+ਉਪਭੋਗਤਾ ਲਈ ਉਪਲਬਧ ਕਈ ਔਪਰੇਟਰਾਂ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ [MDN 'ਤੇ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)।  
 
-### ਨੈਗੇਸ਼ਨ ਆਪਰੇਟਰ
+Josh Comeau ਦੇ ਸ਼ਾਨਦਾਰ [operator lookup](https://joshwcomeau.com/operator-lookup/) ਨੂੰ ਜ਼ਰੂਰ ਦੇਖੋ!  
 
-ਕਈ ਵਾਰ ਇਹ ਸੋਚਣਾ ਆਸਾਨ ਹੁੰਦਾ ਹੈ ਕਿ ਜਦੋਂ ਕੁਝ ਸੱਚ ਨਹੀਂ ਹੁੰਦਾ। ਜਿਵੇਂ "ਕੀ ਯੂਜ਼ਰ ਲੌਗਇਨ ਹੈ?" ਪੁੱਛਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ "ਕੀ ਯੂਜ਼ਰ ਲੌਗਇਨ ਨਹੀਂ ਹੈ?" ਪੁੱਛਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਚਿੰਨ੍ਹ (`!`) ਆਪਰੇਟਰ ਤੁਹਾਡੇ ਲਈ ਤਰਕ ਨੂੰ ਪਲਟ ਦਿੰਦਾ ਹੈ।
+## ਅਸਾਈਨਮੈਂਟ  
 
-```javascript
-if (!condition) {
-  // runs if condition is false
-} else {
-  // runs if condition is true
-}
-```
+[Operators](assignment.md)  
 
-`!` ਆਪਰੇਟਰ ਇਹ ਕਹਿਣ ਵਰਗਾ ਹੈ "ਵਿਰੋਧੀ...". ਜੇ ਕੁਝ `true` ਹੈ, `!` ਇਸਨੂੰ `false` ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਵਿਰੋਧੀ।
+---
 
-### ਟਰਨਰੀ ਅਭਿਵਿਅਕਤੀਆਂ
+## 🧠 **ਤੁਹਾਡਾ ਫੈਸਲਾ-ਲੈਣ ਵਾਲਾ ਟੂਲਕਿਟ ਸਾਰ**  
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Decisions"] --> B["🔍 Boolean Logic"]
+    A --> C["📊 Conditional Statements"]
+    A --> D["🔗 Logical Operators"]
+    A --> E["⚡ Advanced Patterns"]
+    
+    B --> B1["true/false values"]
+    B --> B2["Comparison operators"]
+    B --> B3["Truthiness concepts"]
+    
+    C --> C1["if statements"]
+    C --> C2["if-else chains"]
+    C --> C3["switch statements"]
+    
+    D --> D1["&& (AND)"]
+    D --> D2["|| (OR)"]
+    D --> D3["! (NOT)"]
+    
+    E --> E1["Ternary operator"]
+    E --> E2["Short-circuit evaluation"]
+    E --> E3["Complex conditions"]
+    
+    F["💡 Key Principles"] --> F1["Clear readable conditions"]
+    F --> F2["Consistent comparison style"]
+    F --> F3["Proper operator precedence"]
+    F --> F4["Efficient evaluation order"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+  
+---
 
-ਸਧਾਰਨ ਸ਼ਰਤੀ ਅਸਾਈਨਮੈਂਟਾਂ ਲਈ, ਜਾਵਾਸਕ੍ਰਿਪਟ **ਟਰਨਰੀ ਆਪਰੇਟਰ** ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਸੰਖੇਪ ਸਿੰਟੈਕਸ ਤੁਹਾਨੂੰ ਇੱਕ ਸਿੰਗਲ ਲਾਈਨ ਵਿੱਚ ਸ਼ਰਤੀ ਅਭਿਵਿਅਕਤੀ ਲਿਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਜਦੋਂ ਤੁਹਾਨੂੰ ਹਾਲਾਤ ਦੇ ਅਧਾਰ 'ਤੇ ਦੋ
+## 🚀 ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੈਸਲਾ-ਲੈਣ ਦਾ ਮਾਹਰ ਬਣਨ ਦਾ ਸਮਾਂ-ਰੇਖਾ  
+
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**  
+- [ ] ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਤੁਲਨਾਤਮਕ ਔਪਰੇਟਰਾਂ ਦਾ ਅਭਿਆਸ ਕਰੋ  
+- [ ] ਇੱਕ ਸਧਾਰਨ if-else ਸਟੇਟਮ ਲਿਖੋ ਜੋ ਤੁਹਾਡੀ ਉਮਰ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ  
+- [ ] ਚੁਣੌਤੀ ਅਜਮਾਓ: ਇੱਕ if-else ਨੂੰ ਟਰਨਰੀ ਔਪਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਬਾਰਾ ਲਿਖੋ  
+- [ ] ਵੱਖ-ਵੱਖ "truthy" ਅਤੇ "falsy" ਮੁੱਲਾਂ ਨਾਲ ਕੀ ਹੁੰਦਾ ਹੈ, ਟੈਸਟ ਕਰੋ  
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**  
+- [ ] ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਕੋਈ ਵੀ ਗੁੰਝਲਦਾਰ ਧਾਰਨਾਵਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ  
+- [ ] GitHub Copilot ਚੁਣੌਤੀ ਤੋਂ ਵਿਸਤ੍ਰਿਤ ਗਰੇਡ ਕੈਲਕੁਲੇਟਰ ਬਣਾਓ  
+- [ ] ਇੱਕ ਅਸਲ-ਜੀਵਨ ਸਥਿਤੀ ਲਈ ਇੱਕ ਸਧਾਰਨ ਫੈਸਲਾ-ਲੈਣ ਵਾਲਾ ਦਰੱਖਤ ਬਣਾਓ (ਜਿਵੇਂ ਕਿ ਕੀ ਪਹਿਨਣਾ ਚੁਣਨਾ)  
+- [ ] ਲਾਜ਼ਮੀ ਔਪਰੇਟਰਾਂ ਨਾਲ ਕਈ ਸ਼ਰਤਾਂ ਨੂੰ ਜੋੜਨ ਦਾ ਅਭਿਆਸ ਕਰੋ  
+- [ ] ਵੱਖ-ਵੱਖ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਲਈ ਸਵਿੱਚ ਸਟੇਟਮਾਂ ਦਾ ਅਭਿਆਸ ਕਰੋ  
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਲਾਜ਼ਮੀ ਮਾਹਰ ਬਣਨ ਦਾ ਯੋਜਨਾ**  
+- [ ] ਰਚਨਾਤਮਕ ਉਦਾਹਰਣਾਂ ਨਾਲ ਔਪਰੇਟਰਾਂ ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰੋ  
+- [ ] ਵੱਖ-ਵੱਖ ਸ਼ਰਤਾਂ ਵਾਲੇ ਢਾਂਚਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਛੋਟਾ ਕਵਿਜ਼ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ  
+- [ ] ਇੱਕ ਫਾਰਮ ਵੈਲੀਡੇਟਰ ਬਣਾਓ ਜੋ ਕਈ ਇਨਪੁਟ ਸ਼ਰਤਾਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ  
+- [ ] Josh Comeau ਦੇ [operator lookup](https://joshwcomeau.com/operator-lookup/) ਅਭਿਆਸਾਂ ਦਾ ਅਭਿਆਸ ਕਰੋ  
+- [ ] ਮੌਜੂਦਾ ਕੋਡ ਨੂੰ ਵਧੇਰੇ ਉਚਿਤ ਸ਼ਰਤਾਂ ਵਾਲੇ ਢਾਂਚਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਬਾਰਾ ਲਿਖੋ  
+- [ ] ਛੋਟੇ-ਸਰਕਟ ਮੁਲਾਂਕਨ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਪ੍ਰਭਾਵਾਂ ਦਾ ਅਧਿਐਨ ਕਰੋ  
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਬਦਲਾਅ**  
+- [ ] ਜਟਿਲ nested ਸ਼ਰਤਾਂ ਵਿੱਚ ਮਾਹਰ ਬਣੋ ਅਤੇ ਕੋਡ ਪੜ੍ਹਨਯੋਗਤਾ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖੋ  
+- [ ] ਸੁਧਾਰਤ ਫੈਸਲਾ-ਲੈਣ ਵਾਲੇ ਤਰਕ ਨਾਲ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ  
+- [ ] ਮੌਜੂਦਾ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਮੌਜੂਦਾ ਲਾਜ਼ਮੀ ਤਰਕ ਨੂੰ ਸੁਧਾਰ ਕੇ ਖੁੱਲੇ ਸਰੋਤ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉ  
+- [ ] ਵੱਖ-ਵੱਖ ਸ਼ਰਤਾਂ ਵਾਲੇ ਢਾਂਚਿਆਂ ਬਾਰੇ ਕਿਸੇ ਹੋਰ ਨੂੰ ਸਿਖਾਓ ਅਤੇ ਕਦੋਂ ਕਿਸੇ ਨੂੰ ਵਰਤਣਾ ਹੈ  
+- [ ] ਲਾਜ਼ਮੀ ਤਰਕ ਲਈ ਫੰਕਸ਼ਨਲ ਪ੍ਰੋਗਰਾਮਿੰਗ ਪਹੁੰਚਾਂ ਦੀ ਖੋਜ ਕਰੋ  
+- [ ] ਲਾਜ਼ਮੀ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਲਈ ਇੱਕ ਨਿੱਜੀ ਸੰਦਰਭ ਗਾਈਡ ਬਣਾਓ  
+
+### 🏆 **ਅੰਤਮ ਫੈਸਲਾ-ਲੈਣ ਵਾਲੇ ਚੈਂਪੀਅਨ ਚੈੱਕ-ਇਨ**  
+
+**ਤੁਹਾਡੇ ਲਾਜ਼ਮੀ ਸੋਚਣ ਦੇ ਮਾਹਰ ਬਣਨ ਦਾ ਜਸ਼ਨ ਮਨਾਓ:**  
+- ਸਭ ਤੋਂ ਜਟਿਲ ਫੈਸਲਾ-ਲੈਣ ਵਾਲਾ ਤਰਕ ਜੋ ਤੁਸੀਂ ਸਫਲਤਾਪੂਰਵਕ ਲਾਗੂ ਕੀਤਾ ਹੈ, ਕੀ ਹੈ?  
+- ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਕੁਦਰਤੀ ਲੱਗਣ ਵਾਲਾ ਲਾਜ਼ਮੀ ਢਾਂਚਾ ਕਿਹੜਾ ਹੈ ਅਤੇ ਕਿਉਂ?  
+- ਲਾਜ਼ਮੀ ਔਪਰੇਟਰਾਂ ਬਾਰੇ ਸਿੱਖਣ ਨਾਲ ਤੁਹਾਡੇ ਸਮੱਸਿਆ-ਸੁਲਝਾਉਣ ਦੇ ਤਰੀਕੇ ਵਿੱਚ ਕਿਵੇਂ ਬਦਲਾਅ ਆਇਆ ਹੈ?  
+- ਕਿਹੜੀ ਅਸਲ-ਜੀਵਨ ਐਪਲੀਕੇਸ਼ਨ ਸੁਧਾਰਤ ਫੈਸਲਾ-ਲੈਣ ਵਾਲੇ ਤਰਕ ਤੋਂ ਲਾਭ ਉਠਾ ਸਕਦੀ ਹੈ?  
+
+```mermaid
+journey
+    title Your Logical Thinking Evolution
+    section Today
+      Boolean Confusion: 3: You
+      If-Else Understanding: 4: You
+      Operator Recognition: 5: You
+    section This Week
+      Complex Conditions: 4: You
+      Switch Mastery: 5: You
+      Logical Combinations: 5: You
+    section Next Month
+      Advanced Patterns: 5: You
+      Performance Awareness: 5: You
+      Teaching Others: 5: You
+```
+  
+> 🧠 **ਤੁਸੀਂ ਡਿਜੀਟਲ ਫੈਸਲਾ-ਲੈਣ ਦੀ ਕਲਾ ਵਿੱਚ ਮਾਹਰ ਹੋ ਗਏ ਹੋ!** ਹਰ ਇੰਟਰੈਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਉਪਭੋਗਤਾ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਅਤੇ ਬਦਲਦੇ ਹਾਲਾਤਾਂ ਦਾ ਸਮਝਦਾਰ ਤਰੀਕੇ ਨਾਲ ਜਵਾਬ ਦੇਣ ਲਈ ਲਾਜ਼ਮੀ ਤਰਕ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ। ਹੁਣ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ ਆਪਣੇ ਪ੍ਰੋਗਰਾਮਾਂ ਨੂੰ ਸੋਚਣ, ਮੁਲਾਂਕਨ ਕਰਨ ਅਤੇ ਉਚਿਤ ਜਵਾਬ ਚੁਣਨ ਲਈ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ। ਇਹ ਲਾਜ਼ਮੀ ਅਧਾਰ ਹਰ ਗਤੀਸ਼ੀਲ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਸ਼ਕਤੀ ਦੇਵੇਗਾ ਜੋ ਤੁਸੀਂ ਬਣਾਉਂਦੇ ਹੋ! 🎉  
 
 ---
 
-**ਅਸਵੀਕਰਤੀ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤਾ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/2-js-basics/4-arrays-loops/README.md b/translations/pa/2-js-basics/4-arrays-loops/README.md
index 076aab1342..73bf1e331e 100644
--- a/translations/pa/2-js-basics/4-arrays-loops/README.md
+++ b/translations/pa/2-js-basics/4-arrays-loops/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "9197f8af0fef9be6e81d4dbda23c7e7d",
-  "translation_date": "2025-10-22T17:23:56+00:00",
+  "original_hash": "1710a50a519a6e4a1b40a5638783018d",
+  "translation_date": "2025-11-03T16:07:18+00:00",
   "source_file": "2-js-basics/4-arrays-loops/README.md",
   "language_code": "pa"
 }
@@ -12,30 +12,87 @@ CO_OP_TRANSLATOR_METADATA:
 ![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.pa.png)
 > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ
 
-## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼
-[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼](https://ff-quizzes.netlify.app/web/quiz/13)
+```mermaid
+journey
+    title Your Arrays & Loops Adventure
+    section Array Fundamentals
+      Creating Arrays: 5: You
+      Accessing Elements: 4: You
+      Array Methods: 5: You
+    section Loop Mastery
+      For Loops: 4: You
+      While Loops: 5: You
+      Modern Syntax: 4: You
+    section Data Processing
+      Array + Loops: 5: You
+      Real-world Applications: 4: You
+      Performance Optimization: 5: You
+```
+
+## ਪੜ੍ਹਾਈ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
+[ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/13)
 
-ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਵੈਬਸਾਈਟਾਂ ਖਰੀਦਦਾਰੀ ਕਾਰਟ ਆਈਟਮਾਂ ਨੂੰ ਕਿਵੇਂ ਟ੍ਰੈਕ ਕਰਦੀਆਂ ਹਨ ਜਾਂ ਤੁਹਾਡੇ ਦੋਸਤਾਂ ਦੀ ਸੂਚੀ ਕਿਵੇਂ ਦਿਖਾਉਂਦੀਆਂ ਹਨ? ਇਹ ਸਾਰਾ ਕੁਝ ਐਰੇ ਅਤੇ ਲੂਪ ਦੀ ਮਦਦ ਨਾਲ ਸੰਭਵ ਹੁੰਦਾ ਹੈ। ਐਰੇ ਡਿਜੀਟਲ ਕੰਟੇਨਰਾਂ ਵਾਂਗ ਹਨ ਜੋ ਕਈ ਜਾਣਕਾਰੀ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਇਕੱਠੇ ਰੱਖਦੇ ਹਨ, ਜਦਕਿ ਲੂਪ ਤੁਹਾਨੂੰ ਸਾਰਾ ਡਾਟਾ ਬਿਨਾਂ ਦੁਹਰਾਏ ਹੋਏ ਕੋਡ ਦੇ ਨਾਲ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਕੰਮ ਕਰਨ ਦਿੰਦੇ ਹਨ।
+ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਵੈਬਸਾਈਟਾਂ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਆਈਟਮਾਂ ਨੂੰ ਕਿਵੇਂ ਟਰੈਕ ਕਰਦੀਆਂ ਹਨ ਜਾਂ ਤੁਹਾਡੀ ਦੋਸਤਾਂ ਦੀ ਸੂਚੀ ਕਿਵੇਂ ਦਿਖਾਉਂਦੀਆਂ ਹਨ? ਇਹ ਸਾਰਾ ਕੰਮ ਐਰੇ ਅਤੇ ਲੂਪ ਦੀ ਮਦਦ ਨਾਲ ਹੁੰਦਾ ਹੈ। ਐਰੇ ਡਿਜੀਟਲ ਕੰਟੇਨਰਾਂ ਵਾਂਗ ਹਨ ਜੋ ਕਈ ਜਾਣਕਾਰੀ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਰੱਖਦੇ ਹਨ, ਜਦਕਿ ਲੂਪ ਤੁਹਾਨੂੰ ਸਾਰਾ ਡਾਟਾ ਬਿਨਾਂ ਦੁਹਰਾਏ ਹੋਏ ਕੋਡ ਦੇ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਕੰਮ ਕਰਨ ਦਿੰਦੇ ਹਨ।
 
-ਇਹ ਦੋਨੋ ਸੰਕਲਪ ਇਕੱਠੇ ਮਿਲ ਕੇ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ ਜਾਣਕਾਰੀ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਬੁਨਿਆਦ ਰਚਦੇ ਹਨ। ਤੁਸੀਂ ਹਰੇਕ ਕਦਮ ਨੂੰ ਹੱਥੋਂ ਲਿਖਣ ਤੋਂ ਬਚ ਕੇ ਸੌਖਾ ਅਤੇ ਕੁਸ਼ਲ ਕੋਡ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋਵੋਗੇ ਜੋ ਸੈਂਕੜੇ ਜਾਂ ਹਜ਼ਾਰਾਂ ਆਈਟਮਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਪ੍ਰਕਿਰਿਆ ਕਰ ਸਕਦਾ ਹੈ।
+ਇਹ ਦੋਨੋ ਸੰਕਲਪ ਮਿਲ ਕੇ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ ਜਾਣਕਾਰੀ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਮਜ਼ਬੂਤ ਬੁਨਿਆਦ ਬਣਾਉਂਦੇ ਹਨ। ਤੁਸੀਂ ਹੱਥੋਂ ਹੱਥ ਹਰ ਕਦਮ ਲਿਖਣ ਤੋਂ ਲੈ ਕੇ ਸੌਖੇ, ਸਮਰਥ ਕੋਡ ਬਣਾਉਣ ਤੱਕ ਸਿੱਖੋਗੇ ਜੋ ਸੈਂਕੜੇ ਜਾਂ ਹਜ਼ਾਰਾਂ ਆਈਟਮਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਪ੍ਰੋਸੈਸ ਕਰ ਸਕਦਾ ਹੈ।
 
-ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਿਰਫ ਕੁਝ ਲਾਈਨਾਂ ਦੇ ਕੋਡ ਨਾਲ ਜਟਿਲ ਡਾਟਾ ਕੰਮਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਦਾ ਤਰੀਕਾ ਸਮਝ ਜਾਵੋਗੇ। ਆਓ, ਇਨ੍ਹਾਂ ਜ਼ਰੂਰੀ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸੰਕਲਪਾਂ ਦੀ ਖੋਜ ਕਰੀਏ।
+ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਿਰਫ ਕੁਝ ਲਾਈਨਾਂ ਦੇ ਕੋਡ ਨਾਲ ਜਟਿਲ ਡਾਟਾ ਕੰਮ ਪੂਰੇ ਕਰਨ ਦੀ ਸਮਝ ਪ੍ਰਾਪਤ ਕਰ ਲੋਗੇ। ਆਓ, ਇਹ ਜ਼ਰੂਰੀ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸੰਕਲਪਾਂ ਦੀ ਖੋਜ ਕਰੀਏ।
 
 [![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
 
 [![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
 
-> 🎥 ਉੱਪਰ ਦਿੱਤੀਆਂ ਤਸਵੀਰਾਂ 'ਤੇ ਕਲਿਕ ਕਰੋ ਐਰੇ ਅਤੇ ਲੂਪ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ।
+> 🎥 ਉੱਪਰ ਦਿੱਤੀਆਂ ਤਸਵੀਰਾਂ 'ਤੇ ਕਲਿਕ ਕਰੋ ਤਾਂ ਜੋ ਐਰੇ ਅਤੇ ਲੂਪ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖ ਸਕੋ।
 
 > ਤੁਸੀਂ ਇਹ ਪਾਠ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
 
+```mermaid
+mindmap
+  root((Data Processing))
+    Arrays
+      Structure
+        Square brackets syntax
+        Zero-based indexing
+        Dynamic sizing
+      Operations
+        push/pop
+        shift/unshift
+        indexOf/includes
+      Types
+        Numbers array
+        Strings array
+        Mixed types
+    Loops
+      For Loops
+        Counting iterations
+        Array processing
+        Predictable flow
+      While Loops
+        Condition-based
+        Unknown iterations
+        User input
+      Modern Syntax
+        for...of
+        forEach
+        Functional methods
+    Applications
+      Data Analysis
+        Statistics
+        Filtering
+        Transformations
+      User Interfaces
+        Lists
+        Menus
+        Galleries
+```
+
 ## ਐਰੇ
 
-ਐਰੇ ਨੂੰ ਡਿਜੀਟਲ ਫਾਈਲਿੰਗ ਕੈਬਿਨੇਟ ਵਾਂਗ ਸੋਚੋ - ਇੱਕ ਦਰਾਜ਼ ਵਿੱਚ ਇੱਕ ਦਸਤਾਵੇਜ਼ ਸਟੋਰ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਕਈ ਸਬੰਧਤ ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ ਸੰਗਠਿਤ ਕੰਟੇਨਰ ਵਿੱਚ ਰੱਖ ਸਕਦੇ ਹੋ। ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਤੌਰ 'ਤੇ, ਐਰੇ ਤੁਹਾਨੂੰ ਕਈ ਜਾਣਕਾਰੀ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਇੱਕ ਸੰਗਠਿਤ ਪੈਕੇਜ ਵਿੱਚ ਸਟੋਰ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ।
+ਐਰੇ ਨੂੰ ਡਿਜੀਟਲ ਫਾਈਲਿੰਗ ਕੈਬਿਨੇਟ ਵਾਂਗ ਸੋਚੋ - ਇੱਕ ਦਰਾਜ਼ ਵਿੱਚ ਇੱਕ ਦਸਤਾਵੇਜ਼ ਰੱਖਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਕਈ ਸੰਬੰਧਿਤ ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ ਸੰਗਠਿਤ ਕੰਟੇਨਰ ਵਿੱਚ ਰੱਖ ਸਕਦੇ ਹੋ। ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਤੌਰ 'ਤੇ, ਐਰੇ ਤੁਹਾਨੂੰ ਕਈ ਜਾਣਕਾਰੀ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਇੱਕ ਸੰਗਠਿਤ ਪੈਕੇਜ ਵਿੱਚ ਸਟੋਰ ਕਰਨ ਦਿੰਦੇ ਹਨ।
 
-ਚਾਹੇ ਤੁਸੀਂ ਫੋਟੋ ਗੈਲਰੀ ਬਣਾਉਣ, ਟੂ-ਡੂ ਸੂਚੀ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਜਾਂ ਖੇਡ ਵਿੱਚ ਉੱਚ ਸਕੋਰ ਟ੍ਰੈਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋਵੋ, ਐਰੇ ਡਾਟਾ ਸੰਗਠਨ ਲਈ ਬੁਨਿਆਦ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਆਓ ਵੇਖੀਏ ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
+ਚਾਹੇ ਤੁਸੀਂ ਫੋਟੋ ਗੈਲਰੀ ਬਣਾਉਣ, ਟੂ-ਡੂ ਲਿਸਟ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਜਾਂ ਖੇਡ ਵਿੱਚ ਉੱਚ ਸਕੋਰ ਟਰੈਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋਵੋ, ਐਰੇ ਡਾਟਾ ਸੰਗਠਨ ਲਈ ਬੁਨਿਆਦ ਮੁਹੱਈਆ ਕਰਦੇ ਹਨ। ਆਓ ਵੇਖੀਏ ਕਿ ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
 
-✅ ਐਰੇ ਹਰ ਜਗ੍ਹਾ ਹਨ! ਕੀ ਤੁਸੀਂ ਐਰੇ ਦਾ ਕੋਈ ਅਸਲ ਜ਼ਿੰਦਗੀ ਦਾ ਉਦਾਹਰਨ ਦੇ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਸੂਰਜੀ ਪੈਨਲ ਐਰੇ?
+✅ ਐਰੇ ਹਰ ਜਗ੍ਹਾ ਹਨ! ਕੀ ਤੁਸੀਂ ਐਰੇ ਦਾ ਕੋਈ ਹਕੀਕਤੀ ਉਦਾਹਰਨ ਦੇ ਬਾਰੇ ਸੋਚ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਸੂਰਜੀ ਪੈਨਲ ਐਰੇ?
 
 ### ਐਰੇ ਬਣਾਉਣਾ
 
@@ -47,9 +104,9 @@ const myArray = [];
 ```
 
 **ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ?**
-ਤੁਸੀਂ ਸਿਰਫ਼ ਉਹ ਚੌਰਸ ਬ੍ਰੈਕਟ `[]` ਵਰਤ ਕੇ ਇੱਕ ਖਾਲੀ ਕੰਟੇਨਰ ਬਣਾਇਆ ਹੈ। ਇਸਨੂੰ ਇੱਕ ਖਾਲੀ ਲਾਇਬ੍ਰੇਰੀ ਸ਼ੈਲਫ ਵਾਂਗ ਸੋਚੋ - ਇਹ ਤਿਆਰ ਹੈ ਜੋ ਵੀ ਕਿਤਾਬਾਂ ਤੁਸੀਂ ਉੱਥੇ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ।
+ਤੁਸੀਂ ਉਹ ਚੌਰਸ ਬ੍ਰੈਕਟ `[]` ਵਰਤ ਕੇ ਇੱਕ ਖਾਲੀ ਕੰਟੇਨਰ ਬਣਾਇਆ ਹੈ। ਇਸ ਨੂੰ ਇੱਕ ਖਾਲੀ ਲਾਇਬ੍ਰੇਰੀ ਸ਼ੈਲਫ ਵਾਂਗ ਸੋਚੋ - ਇਹ ਤਿਆਰ ਹੈ ਜੋ ਵੀ ਕਿਤਾਬਾਂ ਤੁਸੀਂ ਉੱਥੇ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ।
 
-ਤੁਸੀਂ ਆਪਣੇ ਐਰੇ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਮੁੱਖ ਮੁੱਲਾਂ ਨਾਲ ਭਰ ਸਕਦੇ ਹੋ:
+ਤੁਸੀਂ ਆਪਣੇ ਐਰੇ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਮੁਲਿਆਂ ਨਾਲ ਭਰ ਸਕਦੇ ਹੋ:
 
 ```javascript
 // Your ice cream shop's flavor menu
@@ -62,26 +119,56 @@ const userData = ["John", 25, true, "developer"];
 const scores = [95, 87, 92, 78, 85];
 ```
 
-**ਧਿਆਨ ਦੇਣ ਵਾਲੀਆਂ ਕੁਝ ਚੀਜ਼ਾਂ:**
-- ਤੁਸੀਂ ਇੱਕ ਹੀ ਐਰੇ ਵਿੱਚ ਟੈਕਸਟ, ਨੰਬਰ, ਜਾਂ ਸੱਚ/ਝੂਠ ਦੇ ਮੁੱਲ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹੋ
+**ਕੁਝ ਮਜ਼ੇਦਾਰ ਗੱਲਾਂ:**
+- ਤੁਸੀਂ ਇੱਕ ਹੀ ਐਰੇ ਵਿੱਚ ਟੈਕਸਟ, ਨੰਬਰ, ਜਾਂ ਸੱਚ/ਝੂਠ ਮੁੱਲ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹੋ
 - ਸਿਰਫ਼ ਹਰ ਆਈਟਮ ਨੂੰ ਇੱਕ ਕਾਮਾ ਨਾਲ ਵੱਖ ਕਰੋ - ਆਸਾਨ!
-- ਐਰੇ ਸਬੰਧਤ ਜਾਣਕਾਰੀ ਨੂੰ ਇਕੱਠੇ ਰੱਖਣ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹਨ
+- ਐਰੇ ਸੰਬੰਧਿਤ ਜਾਣਕਾਰੀ ਨੂੰ ਇਕੱਠੇ ਰੱਖਣ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹਨ
+
+```mermaid
+flowchart LR
+    A["📦 Arrays"] --> B["Create [ ]"]
+    A --> C["Store Multiple Items"]
+    A --> D["Access by Index"]
+    
+    B --> B1["const arr = []"]
+    B --> B2["const arr = [1,2,3]"]
+    
+    C --> C1["Numbers"]
+    C --> C2["Strings"]
+    C --> C3["Booleans"]
+    C --> C4["Mixed Types"]
+    
+    D --> D1["arr[0] = first"]
+    D --> D2["arr[1] = second"]
+    D --> D3["arr[2] = third"]
+    
+    E["📊 Array Index"] --> E1["Index 0: First"]
+    E --> E2["Index 1: Second"]
+    E --> E3["Index 2: Third"]
+    E --> E4["Index n-1: Last"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ### ਐਰੇ ਇੰਡੈਕਸਿੰਗ
 
-ਇੱਥੇ ਕੁਝ ਅਜਿਹਾ ਹੈ ਜੋ ਸ਼ੁਰੂ ਵਿੱਚ ਅਜਿਹਾ ਲੱਗ ਸਕਦਾ ਹੈ: ਐਰੇ ਆਪਣੇ ਆਈਟਮਾਂ ਨੂੰ 0 ਤੋਂ ਗਿਣਣਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ, 1 ਤੋਂ ਨਹੀਂ। ਇਹ ਜ਼ੀਰੋ-ਬੇਸਡ ਇੰਡੈਕਸਿੰਗ ਦਾ ਮੂਲ ਕਮਪਿਊਟਰ ਮੈਮੋਰੀ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਵਿੱਚ ਹੈ - ਇਹ ਕਮਪਿਊਟਿੰਗ ਭਾਸ਼ਾਵਾਂ ਜਿਵੇਂ ਕਿ C ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਤੋਂ ਇੱਕ ਪ੍ਰੋਗਰਾਮਿੰਗ ਰਵਾਇਤ ਹੈ। ਐਰੇ ਵਿੱਚ ਹਰ ਸਥਾਨ ਨੂੰ ਆਪਣਾ ਪਤਾ ਨੰਬਰ ਮਿਲਦਾ ਹੈ ਜਿਸਨੂੰ **ਇੰਡੈਕਸ** ਕਿਹਾ ਜਾਂਦਾ ਹੈ।
+ਇੱਥੇ ਕੁਝ ਅਜਿਹਾ ਹੈ ਜੋ ਸ਼ੁਰੂ ਵਿੱਚ ਅਜੀਬ ਲੱਗ ਸਕਦਾ ਹੈ: ਐਰੇ ਆਪਣੇ ਆਈਟਮਾਂ ਨੂੰ 0 ਤੋਂ ਗਿਣਦੇ ਹਨ, 1 ਤੋਂ ਨਹੀਂ। ਇਹ ਜ਼ੀਰੋ-ਬੇਸਡ ਇੰਡੈਕਸਿੰਗ ਦਾ ਸਬੰਧ ਕੰਪਿਊਟਰ ਮੈਮੋਰੀ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨਾਲ ਹੈ - ਇਹ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਰਵਾਇਤ ਹੈ ਜੋ C ਵਰਗੀਆਂ ਭਾਸ਼ਾਵਾਂ ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਤੋਂ ਹੈ। ਐਰੇ ਵਿੱਚ ਹਰ ਸਥਾਨ ਨੂੰ ਆਪਣਾ ਪਤਾ ਨੰਬਰ ਮਿਲਦਾ ਹੈ ਜਿਸਨੂੰ **ਇੰਡੈਕਸ** ਕਿਹਾ ਜਾਂਦਾ ਹੈ।
 
 | ਇੰਡੈਕਸ | ਮੁੱਲ | ਵੇਰਵਾ |
-|-------|-------|-------------|
+|--------|------|-------|
 | 0 | "ਚਾਕਲੇਟ" | ਪਹਿਲਾ ਤੱਤ |
 | 1 | "ਸਟ੍ਰਾਬੇਰੀ" | ਦੂਜਾ ਤੱਤ |
 | 2 | "ਵੈਨਿਲਾ" | ਤੀਜਾ ਤੱਤ |
 | 3 | "ਪਿਸਟਾਚਿਓ" | ਚੌਥਾ ਤੱਤ |
 | 4 | "ਰਾਕੀ ਰੋਡ" | ਪੰਜਵਾਂ ਤੱਤ |
 
-✅ ਕੀ ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰਦਾ ਹੈ ਕਿ ਐਰੇ ਜ਼ੀਰੋ ਇੰਡੈਕਸ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ? ਕੁਝ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ, ਇੰਡੈਕਸ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ। ਇਸ ਬਾਰੇ ਦਿਲਚਸਪ ਇਤਿਹਾਸ ਹੈ, ਜਿਸਨੂੰ ਤੁਸੀਂ [ਵਿਕੀਪੀਡੀਆ 'ਤੇ ਪੜ੍ਹ ਸਕਦੇ ਹੋ](https://en.wikipedia.org/wiki/Zero-based_numbering)।
+✅ ਕੀ ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰਦਾ ਹੈ ਕਿ ਐਰੇ ਜ਼ੀਰੋ ਇੰਡੈਕਸ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ? ਕੁਝ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ ਇੰਡੈਕਸ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ। ਇਸ ਬਾਰੇ ਦਿਲਚਸਪ ਇਤਿਹਾਸ [ਵਿਕੀਪੀਡੀਆ](https://en.wikipedia.org/wiki/Zero-based_numbering) 'ਤੇ ਪੜ੍ਹ ਸਕਦੇ ਹੋ।
 
-**ਐਰੇ ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚ:**
+**ਐਰੇ ਤੱਤਾਂ ਨੂੰ ਐਕਸੈਸ ਕਰਨਾ:**
 
 ```javascript
 const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
@@ -93,9 +180,9 @@ console.log(iceCreamFlavors[4]); // "Rocky Road" - last element
 ```
 
 **ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- **ਵਰਤਦਾ ਹੈ** ਚੌਰਸ ਬ੍ਰੈਕਟ ਨੋਟੇਸ਼ਨ ਇੰਡੈਕਸ ਨੰਬਰ ਦੇ ਨਾਲ ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚਣ ਲਈ
-- **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਉਸ ਖਾਸ ਸਥਾਨ 'ਤੇ ਸਟੋਰ ਕੀਤੇ ਮੁੱਲ ਨੂੰ
-- **ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** 0 ਤੋਂ ਗਿਣਣਾ, ਪਹਿਲਾ ਤੱਤ ਇੰਡੈਕਸ 0 ਬਣਾਉਂਦਾ ਹੈ
+- **ਵਰਤਦਾ ਹੈ** ਇੰਡੈਕਸ ਨੰਬਰ ਨਾਲ ਚੌਰਸ ਬ੍ਰੈਕਟ ਨੋਟੇਸ਼ਨ
+- **ਮੁੱਲ ਵਾਪਸ ਕਰਦਾ ਹੈ** ਜੋ ਉਸ ਖਾਸ ਸਥਾਨ 'ਤੇ ਸਟੋਰ ਕੀਤਾ ਗਿਆ ਹੈ
+- **ਗਿਣਤੀ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** 0 ਤੋਂ, ਪਹਿਲਾ ਤੱਤ ਇੰਡੈਕਸ 0 ਬਣਦਾ ਹੈ
 
 **ਐਰੇ ਤੱਤਾਂ ਨੂੰ ਸੋਧਣਾ:**
 
@@ -110,13 +197,13 @@ console.log(iceCreamFlavors[5]); // "Cookie Dough"
 ```
 
 **ਉਪਰ ਦਿੱਤੇ ਵਿੱਚ, ਅਸੀਂ:**
-- **ਸੋਧਿਆ** ਇੰਡੈਕਸ 4 'ਤੇ ਤੱਤ "ਰਾਕੀ ਰੋਡ" ਤੋਂ "ਬਟਰ ਪੀਕਨ" ਵਿੱਚ
-- **ਨਵਾਂ ਤੱਤ ਜੋੜਿਆ** "ਕੁਕੀ ਡੌ" ਇੰਡੈਕਸ 5 'ਤੇ
-- **ਆਪਣੇ ਆਪ ਐਰੇ ਦੀ ਲੰਬਾਈ ਵਧਾਈ** ਜਦੋਂ ਮੌਜੂਦਾ ਸੀਮਾਵਾਂ ਤੋਂ ਬਾਹਰ ਤੱਤ ਜੋੜੇ
+- **ਸੋਧਿਆ** ਇੰਡੈਕਸ 4 'ਤੇ ਤੱਤ "ਰਾਕੀ ਰੋਡ" ਨੂੰ "ਬਟਰ ਪੀਕਨ" ਵਿੱਚ
+- **ਨਵਾਂ ਤੱਤ ਸ਼ਾਮਲ ਕੀਤਾ** "ਕੁਕੀ ਡੌ" ਇੰਡੈਕਸ 5 'ਤੇ
+- **ਆਪਣੇ ਆਪ ਐਰੇ ਦੀ ਲੰਬਾਈ ਵਧਾਈ** ਜਦੋਂ ਮੌਜੂਦਾ ਸੀਮਾਵਾਂ ਤੋਂ ਬਾਹਰ ਸ਼ਾਮਲ ਕੀਤਾ
 
 ### ਐਰੇ ਦੀ ਲੰਬਾਈ ਅਤੇ ਆਮ ਤਰੀਕੇ
 
-ਐਰੇ ਵਿੱਚ ਬਿਲਟ-ਇਨ ਪ੍ਰਾਪਰਟੀਆਂ ਅਤੇ ਤਰੀਕੇ ਹੁੰਦੇ ਹਨ ਜੋ ਡਾਟਾ ਨਾਲ ਕੰਮ ਕਰਨਾ ਬਹੁਤ ਹੀ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ।
+ਐਰੇ ਵਿੱਚ ਬਿਲਟ-ਇਨ ਪ੍ਰਾਪਰਟੀ ਅਤੇ ਤਰੀਕੇ ਹੁੰਦੇ ਹਨ ਜੋ ਡਾਟਾ ਨਾਲ ਕੰਮ ਕਰਨਾ ਬਹੁਤ ਹੀ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ।
 
 **ਐਰੇ ਦੀ ਲੰਬਾਈ ਪਤਾ ਕਰਨਾ:**
 
@@ -130,8 +217,8 @@ console.log(iceCreamFlavors.length); // 6
 ```
 
 **ਯਾਦ ਰੱਖਣ ਵਾਲੇ ਮੁੱਖ ਬਿੰਦੂ:**
-- **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਐਰੇ ਵਿੱਚ ਤੱਤਾਂ ਦੀ ਕੁੱਲ ਗਿਣਤੀ
-- **ਆਪਣੇ ਆਪ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ** ਜਦੋਂ ਤੱਤ ਜੋੜੇ ਜਾਂ ਹਟਾਏ ਜਾਂਦੇ ਹਨ
+- **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਐਰੇ ਵਿੱਚ ਕੁੱਲ ਤੱਤਾਂ ਦੀ ਗਿਣਤੀ
+- **ਆਪਣੇ ਆਪ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ** ਜਦੋਂ ਤੱਤ ਸ਼ਾਮਲ ਜਾਂ ਹਟਾਏ ਜਾਂਦੇ ਹਨ
 - **ਡਾਇਨਾਮਿਕ ਗਿਣਤੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਜੋ ਲੂਪ ਅਤੇ ਵੈਲੀਡੇਸ਼ਨ ਲਈ ਲਾਭਦਾਇਕ ਹੈ
 
 **ਮਹੱਤਵਪੂਰਨ ਐਰੇ ਤਰੀਕੇ:**
@@ -153,32 +240,99 @@ const hasApple = fruits.includes("apple"); // Returns true
 ```
 
 **ਇਨ੍ਹਾਂ ਤਰੀਕਿਆਂ ਨੂੰ ਸਮਝਣਾ:**
-- **ਤੱਤ ਜੋੜਦਾ ਹੈ** `push()` (ਅੰਤ) ਅਤੇ `unshift()` (ਸ਼ੁਰੂਆਤ) ਨਾਲ
-- **ਤੱਤ ਹਟਾਉਂਦਾ ਹੈ** `pop()` (ਅੰਤ) ਅਤੇ `shift()` (ਸ਼ੁਰੂਆਤ) ਨਾਲ
-- **ਤੱਤਾਂ ਨੂੰ ਲੱਭਦਾ ਹੈ** `indexOf()` ਨਾਲ ਅਤੇ ਮੌਜੂਦਗੀ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ `includes()` ਨਾਲ
-- **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਲਾਭਦਾਇਕ ਮੁੱਲ ਜਿਵੇਂ ਕਿ ਹਟਾਏ ਗਏ ਤੱਤ ਜਾਂ ਸਥਾਨ ਇੰਡੈਕਸ
+- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** `push()` (ਅੰਤ) ਅਤੇ `unshift()` (ਸ਼ੁਰੂ) ਨਾਲ ਤੱਤ
+- **ਹਟਾਉਂਦਾ ਹੈ** `pop()` (ਅੰਤ) ਅਤੇ `shift()` (ਸ਼ੁਰੂ) ਨਾਲ ਤੱਤ
+- **ਲੋਕੇਟ ਕਰਦਾ ਹੈ** `indexOf()` ਨਾਲ ਤੱਤ ਅਤੇ `includes()` ਨਾਲ ਮੌਜੂਦਗੀ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ
+- **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਲਾਭਦਾਇਕ ਮੁੱਲ ਜਿਵੇਂ ਹਟਾਏ ਗਏ ਤੱਤ ਜਾਂ ਸਥਾਨ ਇੰਡੈਕਸ
+
+✅ ਖੁਦ ਅਜ਼ਮਾਓ! ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਇੱਕ ਐਰੇ ਬਣਾਓ ਅਤੇ ਮੈਨਿਪੁਲੇਟ ਕਰੋ।
+
+### 🧠 **ਐਰੇ ਬੁਨਿਆਦੀਆਂ ਦੀ ਜਾਂਚ: ਆਪਣਾ ਡਾਟਾ ਸੰਗਠਿਤ ਕਰਨਾ**
+
+**ਆਪਣੀ ਐਰੇ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ:**
+- ਤੁਹਾਨੂੰ ਕਿਉਂ ਲੱਗਦਾ ਹੈ ਕਿ ਐਰੇ 0 ਤੋਂ ਗਿਣਤੀ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ, 1 ਤੋਂ ਨਹੀਂ?
+- ਕੀ ਹੁੰਦਾ ਹੈ ਜੇ ਤੁਸੀਂ ਇੱਕ ਅਜਿਹੇ ਇੰਡੈਕਸ ਨੂੰ ਐਕਸੈਸ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਜੋ ਮੌਜੂਦ ਨਹੀਂ ਹੈ (ਜਿਵੇਂ `arr[100]` ਇੱਕ 5-ਤੱਤਾਂ ਵਾਲੇ ਐਰੇ ਵਿੱਚ)?
+- ਕੀ ਤੁਸੀਂ ਤਿੰਨ ਹਕੀਕਤੀ ਸਥਿਤੀਆਂ ਬਾਰੇ ਸੋਚ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਐਰੇ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦੇ ਹਨ?
+
+```mermaid
+stateDiagram-v2
+    [*] --> EmptyArray: const arr = []
+    EmptyArray --> WithItems: Add elements
+    WithItems --> Accessing: Use indexes
+    Accessing --> Modifying: Change values
+    Modifying --> Processing: Use methods
+    
+    WithItems --> WithItems: push(), unshift()
+    Processing --> Processing: pop(), shift()
+    
+    note right of Accessing
+        Zero-based indexing
+        arr[0] = first element
+    end note
+    
+    note right of Processing
+        Built-in methods
+        Dynamic operations
+    end note
+```
 
-✅ ਖੁਦ ਅਜ਼ਮਾਓ! ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਆਪਣਾ ਐਰੇ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਮੈਨਿਪੁਲੇਟ ਕਰੋ।
+> **ਹਕੀਕਤੀ ਅੰਦਰੂਨੀ ਜਾਣਕਾਰੀ**: ਐਰੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ ਹਰ ਜਗ੍ਹਾ ਹਨ! ਸੋਸ਼ਲ ਮੀਡੀਆ ਫੀਡ, ਸ਼ਾਪਿੰਗ ਕਾਰਟ, ਫੋਟੋ ਗੈਲਰੀ, ਪਲੇਲਿਸਟ ਗੀਤ - ਇਹ ਸਾਰੇ ਪਿੱਛੇ ਐਰੇ ਹਨ!
 
 ## ਲੂਪ
 
-ਚਾਰਲਸ ਡਿਕਨਜ਼ ਦੇ ਨਾਵਲਾਂ ਵਿੱਚ ਮਸ਼ਹੂਰ ਸਜ਼ਾ ਬਾਰੇ ਸੋਚੋ ਜਿੱਥੇ ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਇੱਕ ਵਾਕ ਨੂੰ ਦੁਹਰਾਉਣਾ ਪੈਂਦਾ ਸੀ। ਸੋਚੋ ਕਿ ਤੁਸੀਂ ਸਿਰਫ਼ ਕਿਸੇ ਨੂੰ "ਇਹ ਵਾਕ 100 ਵਾਰ ਲਿਖੋ" ਕਹਿ ਸਕਦੇ ਹੋ ਅਤੇ ਇਹ ਆਪਣੇ ਆਪ ਹੋ ਜਾਵੇ। ਇਹੀ ਕੁਝ ਲੂਪ ਤੁਹਾਡੇ ਕੋਡ ਲਈ ਕਰਦੇ ਹਨ।
+ਚਾਰਲਸ ਡਿਕਨਜ਼ ਦੇ ਨਾਵਲਾਂ ਵਿੱਚ ਮਸ਼ਹੂਰ ਸਜ਼ਾ ਬਾਰੇ ਸੋਚੋ ਜਿੱਥੇ ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਇੱਕ ਵਾਕ ਨੂੰ ਬਾਰ-ਬਾਰ ਸਲੇਟ 'ਤੇ ਲਿਖਣਾ ਪੈਂਦਾ ਸੀ। ਕਲਪਨਾ ਕਰੋ ਕਿ ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਨੂੰ ਸਿਰਫ਼ "ਇਹ ਵਾਕ 100 ਵਾਰ ਲਿਖੋ" ਕਹਿ ਸਕਦੇ ਹੋ ਅਤੇ ਇਹ ਆਪਣੇ ਆਪ ਹੋ ਜਾਵੇ। ਇਹੀ ਕੰਮ ਤੁਹਾਡੇ ਕੋਡ ਲਈ ਲੂਪ ਕਰਦੇ ਹਨ।
 
-ਲੂਪ ਇੱਕ ਅਜਿਹੇ ਸਹਾਇਕ ਵਾਂਗ ਹਨ ਜੋ ਕੰਮਾਂ ਨੂੰ ਬਿਨਾਂ ਗਲਤੀ ਦੇ ਦੁਹਰਾਉਂਦੇ ਹਨ। ਚਾਹੇ ਤੁਹਾਨੂੰ ਖਰੀਦਦਾਰੀ ਕਾਰਟ ਵਿੱਚ ਹਰ ਆਈਟਮ ਦੀ ਜਾਂਚ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇ ਜਾਂ ਐਲਬਮ ਵਿੱਚ ਸਾਰੇ ਫੋਟੋ ਦਿਖਾਉਣ ਦੀ, ਲੂਪ ਇਹ ਕੰਮ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਕਰਦੇ ਹਨ।
+ਲੂਪ ਇੱਕ ਅਜਿਹੇ ਸਹਾਇਕ ਦੀ ਤਰ੍ਹਾਂ ਹੁੰਦੇ ਹਨ ਜੋ ਕੰਮਾਂ ਨੂੰ ਬਿਨਾਂ ਗਲਤੀ ਦੇ ਦੁਹਰਾਉਂਦੇ ਹਨ। ਚਾਹੇ ਤੁਹਾਨੂੰ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਵਿੱਚ ਹਰ ਆਈਟਮ ਦੀ ਜਾਂਚ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇ ਜਾਂ ਐਲਬਮ ਵਿੱਚ ਸਾਰੇ ਫੋਟੋ ਦਿਖਾਉਣ ਦੀ, ਲੂਪ ਦੁਹਰਾਅ ਨੂੰ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਸੰਭਾਲਦੇ ਹਨ।
 
 ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਈ ਕਿਸਮ ਦੇ ਲੂਪ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਆਓ ਹਰ ਇੱਕ ਨੂੰ ਵੇਖੀਏ ਅਤੇ ਸਮਝੀਏ ਕਿ ਕਦੋਂ ਇਸਨੂੰ ਵਰਤਣਾ ਹੈ।
 
+```mermaid
+flowchart TD
+    A["🔄 Loop Types"] --> B["For Loop"]
+    A --> C["While Loop"]
+    A --> D["For...of Loop"]
+    A --> E["forEach Method"]
+    
+    B --> B1["Known iterations"]
+    B --> B2["Counter-based"]
+    B --> B3["for(init; condition; increment)"]
+    
+    C --> C1["Unknown iterations"]
+    C --> C2["Condition-based"]
+    C --> C3["while(condition)"]
+    
+    D --> D1["Modern ES6+"]
+    D --> D2["Array iteration"]
+    D --> D3["for(item of array)"]
+    
+    E --> E1["Functional style"]
+    E --> E2["Array method"]
+    E --> E3["array.forEach(callback)"]
+    
+    F["⏰ When to Use"] --> F1["For: Counting, indexes"]
+    F --> F2["While: User input, searching"]
+    F --> F3["For...of: Simple iteration"]
+    F --> F4["forEach: Functional programming"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ### ਫੋਰ ਲੂਪ
 
-`for` ਲੂਪ ਇੱਕ ਟਾਈਮਰ ਸੈਟ ਕਰਨ ਵਾਂਗ ਹੈ - ਤੁਹਾਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਕੁਝ ਕਿੰਨੀ ਵਾਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹ ਬਹੁਤ ਹੀ ਸੰਗਠਿਤ ਅਤੇ ਭਰੋਸੇਯੋਗ ਹੈ, ਜੋ ਇਸਨੂੰ ਐਰੇ ਨਾਲ ਕੰਮ ਕਰਨ ਜਾਂ ਚੀਜ਼ਾਂ ਦੀ ਗਿਣਤੀ ਕਰਨ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਬਣਾਉਂਦਾ ਹੈ।
+`for` ਲੂਪ ਇੱਕ ਟਾਈਮਰ ਸੈਟ ਕਰਨ ਵਾਂਗ ਹੈ - ਤੁਹਾਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਕੁਝ ਕਿੰਨੀ ਵਾਰ ਕਰਨਾ ਹੈ। ਇਹ ਬਹੁਤ ਹੀ ਸੰਗਠਿਤ ਅਤੇ ਪੇਸ਼ਕਸ਼ੀ ਹੈ, ਜੋ ਇਸਨੂੰ ਐਰੇ ਨਾਲ ਕੰਮ ਕਰਨ ਜਾਂ ਚੀਜ਼ਾਂ ਦੀ ਗਿਣਤੀ ਕਰਨ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਬਣਾਉਂਦਾ ਹੈ।
 
 **ਫੋਰ ਲੂਪ ਦੀ ਬਣਤਰ:**
 
 | ਹਿੱਸਾ | ਉਦੇਸ਼ | ਉਦਾਹਰਨ |
-|-----------|---------|----------|
+|-------|-------|---------|
 | **ਸ਼ੁਰੂਆਤ** | ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਸੈਟ ਕਰਦਾ ਹੈ | `let i = 0` |
 | **ਸ਼ਰਤ** | ਕਦੋਂ ਜਾਰੀ ਰੱਖਣਾ ਹੈ | `i < 10` |
-| **ਵਾਧਾ** | ਕਿਵੇਂ ਅੱਪਡੇਟ ਕਰਨਾ ਹੈ | `i++` |
+| **ਵਾਧਾ** | ਕਿਵੇਂ ਅਪਡੇਟ ਕਰਨਾ ਹੈ | `i++` |
 
 ```javascript
 // Counting from 0 to 9
@@ -193,24 +347,51 @@ for (let i = 0; i < testScores.length; i++) {
 }
 ```
 
-**ਹਰ ਕਦਮ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
+**ਕਦਮ-ਦਰ-ਕਦਮ, ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
 - **ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** ਕਾਊਂਟਰ ਵੈਰੀਏਬਲ `i` ਨੂੰ 0 'ਤੇ
-- **ਸ਼ਰਤ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ** `i < 10` ਹਰ ਇਟਰੇਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ
+- **ਸ਼ਰਤ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ** `i < 10` ਹਰ ਚੱਕਰ ਤੋਂ ਪਹਿਲਾਂ
 - **ਕੋਡ ਬਲਾਕ ਚਲਾਉਂਦਾ ਹੈ** ਜਦੋਂ ਸ਼ਰਤ ਸੱਚ ਹੈ
-- **ਵਾਧਾ ਕਰਦਾ ਹੈ** `i` ਨੂੰ 1 ਨਾਲ ਹਰ ਇਟਰੇਸ਼ਨ ਤੋਂ ਬਾਅਦ `i++` ਨਾਲ
+- **ਵਾਧਾ ਕਰਦਾ ਹੈ** `i` ਨੂੰ 1 ਨਾਲ ਹਰ ਚੱਕਰ ਤੋਂ ਬਾਅਦ
 - **ਰੁਕਦਾ ਹੈ** ਜਦੋਂ ਸ਼ਰਤ ਝੂਠ ਬਣ ਜਾਂਦੀ ਹੈ (ਜਦੋਂ `i` 10 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ)
 
-✅ ਇਹ ਕੋਡ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਚਲਾਓ। ਕੀ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਾਊਂਟਰ, ਸ਼ਰਤ ਜਾਂ ਇਟਰੇਸ਼ਨ ਐਕਸਪ੍ਰੈਸ਼ਨ ਵਿੱਚ ਛੋਟੇ ਬਦਲਾਅ ਕਰਦੇ ਹੋ? ਕੀ ਤੁਸੀਂ ਇਸਨੂੰ ਪਿੱਛੇ ਚਲਾਉਣ ਲਈ ਬਦਲ ਸਕਦੇ ਹੋ, ਇੱਕ ਕਾਊਂਟਡਾਊਨ ਬਣਾਉਣ ਲਈ?
+✅ ਇਹ ਕੋਡ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਚਲਾਓ। ਕੀ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਾਊਂਟਰ, ਸ਼ਰਤ ਜਾਂ ਇੰਕਰੀਮੈਂਟ ਐਕਸਪ੍ਰੈਸ਼ਨ ਵਿੱਚ ਛੋਟੇ ਬਦਲਾਅ ਕਰਦੇ ਹੋ? ਕੀ ਤੁਸੀਂ ਇਸਨੂੰ ਪਿੱਛੇ ਚਲਾਉਣ ਲਈ ਬਦਲ ਸਕਦੇ ਹੋ, ਇੱਕ ਕਾਊਂਟਡਾਊਨ ਬਣਾਉਣ ਲਈ?
+
+### 🗓️ **ਫੋਰ ਲੂਪ ਮਾਹਰਤਾ ਦੀ ਜਾਂਚ: ਨਿਯੰਤਰਿਤ ਦੁਹਰਾਅ**
+
+**ਆਪਣੀ ਫੋਰ ਲੂਪ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ:**
+- ਫੋਰ ਲੂਪ ਦੇ ਤਿੰਨ ਹਿੱਸੇ ਕੀ ਹਨ, ਅਤੇ ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ?
+- ਤੁਸੀਂ ਇੱਕ ਐਰੇ ਨੂੰ ਪਿੱਛੇ ਵੱਲ ਕਿਵੇਂ ਲੂਪ ਕਰ ਸਕਦੇ ਹੋ?
+- ਕੀ ਹੁੰਦਾ ਹੈ ਜੇ ਤੁਸੀਂ ਵਾਧਾ ਹਿੱਸਾ (`i++`) ਭੁੱਲ ਜਾਂਦੇ ਹੋ?
+
+```mermaid
+flowchart TD
+    A["🚀 Start For Loop"] --> B["Initialize: let i = 0"]
+    B --> C{"Condition: i < array.length?"}
+    C -->|true| D["Execute code block"]
+    D --> E["Increment: i++"]
+    E --> C
+    C -->|false| F["✅ Exit loop"]
+    
+    G["📋 Common Patterns"] --> G1["for(let i=0; i<n; i++)"]
+    G --> G2["for(let i=n-1; i>=0; i--)"]
+    G --> G3["for(let i=0; i<arr.length; i+=2)"]
+    
+    style A fill:#e3f2fd
+    style F fill:#e8f5e8
+    style G fill:#fff3e0
+```
+
+> **ਲੂਪ ਦੀ ਸਿਆਣਪ**: ਜਦੋਂ ਤੁਹਾਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਕੁਝ ਕਿੰਨੀ ਵਾਰ ਦੁਹਰਾਉਣਾ ਹੈ, ਫੋਰ ਲੂਪ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹੁੰਦੇ ਹਨ। ਇਹ ਐਰੇ ਪ੍ਰੋਸੈਸਿੰਗ ਲਈ ਸਭ ਤੋਂ ਆਮ ਚੋਣ ਹਨ!
 
 ### ਵਾਇਲ ਲੂਪ
 
-`while` ਲੂਪ "ਇਹ ਕਰਦੇ ਰਹੋ ਜਦ ਤੱਕ..." ਵਾਂਗ ਹੈ - ਤੁਹਾਨੂੰ ਪਤਾ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਇਹ ਕਿੰਨੀ ਵਾਰ ਚੱਲੇਗਾ, ਪਰ ਤੁਹਾਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਕਦੋਂ ਰੁਕਣਾ ਹੈ। ਇਹ ਐਸੇ ਕੰਮਾਂ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹੈ ਜਿਵੇਂ ਕਿ ਕਿਸੇ ਉਪਭੋਗਤਾ ਤੋਂ ਇਨਪੁਟ ਮੰਗਣਾ ਜਦ ਤੱਕ ਉਹ ਤੁਹਾਨੂੰ ਜੋ ਚਾਹੀਦਾ ਹੈ ਦੇਣ, ਜਾਂ ਡਾਟਾ ਵਿੱਚੋਂ ਲੱਭਣਾ ਜਦ ਤੱਕ ਤੁਸੀਂ ਜੋ ਲੱਭ ਰਹੇ ਹੋ ਉਹ ਮਿਲੇ।
+`while` ਲੂਪ "ਇਹ ਕਰਦੇ ਰਹੋ ਜਦ ਤੱਕ..." ਵਾਂਗ ਹੁੰਦਾ ਹੈ - ਤੁਹਾਨੂੰ ਪਤਾ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਇਹ ਕਿੰਨੀ ਵਾਰ ਚੱਲੇਗਾ, ਪਰ ਤੁਹਾਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਕਦੋਂ ਰੁਕਣਾ ਹੈ। ਇਹ ਉਨ੍ਹਾਂ ਚੀਜ਼ਾਂ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹੈ ਜਿਵੇਂ ਕਿ ਯੂਜ਼ਰ ਤੋਂ ਇਨਪੁਟ ਮੰਗਣਾ ਜਦ ਤੱਕ ਉਹ ਤੁਹਾਨੂੰ ਜੋ ਚਾਹੀਦਾ ਹੈ ਦੇਣ, ਜਾਂ ਡਾਟਾ ਵਿੱਚ ਖੋਜ ਕਰਨਾ ਜਦ ਤੱਕ ਤੁਹਾਨੂੰ ਜੋ ਲੱਭਣਾ ਹੈ ਉਹ ਮਿਲੇ।
 
 **ਵਾਇਲ ਲੂਪ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ:**
 - **ਜਾਰੀ ਰੱਖਦਾ ਹੈ** ਜਦ ਤੱਕ ਸ਼ਰਤ ਸੱਚ ਹੈ
-- **ਕਾਊਂਟਰ ਵੈਰੀਏਬਲਾਂ ਦਾ ਮੈਨੂਅਲ ਪ੍ਰਬੰਧਨ ਲੋੜਦਾ ਹੈ**
-- **ਸ਼ਰਤ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ** ਹਰ ਇਟਰੇਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ
-- **ਅਨੰਤ ਲੂਪ ਦਾ ਖਤਰਾ** ਜੇਕਰ ਸ਼ਰਤ ਕਦੇ ਝੂਠ ਨਹੀਂ ਬਣਦੀ
+- **ਮੈਨੂਅਲ ਪ੍ਰਬੰਧਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ** ਕਿਸੇ ਵੀ ਕਾਊਂਟਰ ਵੈਰੀਏਬਲ ਦੀ
+- **ਸ਼ਰਤ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ** ਹਰ ਚੱਕਰ ਤੋਂ ਪਹਿਲਾਂ
+- **ਅਨੰਤ ਲੂਪ ਦਾ ਖਤਰਾ** ਜੇ ਸ਼ਰਤ ਕਦੇ ਝੂਠ ਨਹੀਂ ਬਣਦੀ
 
 ```javascript
 // Basic counting example
@@ -235,85 +416,165 @@ if (attempts >= maxAttempts) {
 }
 ```
 
-**ਇਨ੍ਹਾਂ ਉਦਾਹਰਣਾਂ ਨੂੰ ਸਮਝਣਾ:**
-- **ਕਾਊਂਟਰ ਵੈਰੀਏਬਲ `i` ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ** ਲੂਪ ਬਾਡੀ ਦੇ ਅੰਦਰ
-- **ਕਾਊਂਟਰ ਨੂੰ ਵਾਧਾ ਕਰਦਾ ਹੈ** ਅਨੰਤ ਲੂਪਾਂ ਤੋਂ ਬਚਣ ਲਈ
-- **ਪ੍ਰਯੋਗਿਕ ਵਰਤੋਂ ਦਾ ਕੇਸ ਦਿਖਾਉਂਦਾ ਹੈ** ਉਪਭੋਗਤਾ ਇਨਪੁਟ ਅਤੇ ਕੋਸ਼ਿਸ਼ਾਂ ਦੀ ਸੀਮਾ ਨਾਲ
-- **ਸੁਰੱਖਿਆ ਮਕੈਨਿਜ਼ਮ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਅਨੰਤ ਕਾਰਜ ਤੋਂ ਬਚਣ ਲਈ
-
-### ਆਧੁਨਿਕ ਲੂਪ ਵਿਕਲਪ
-
-ਜਾਵਾਸਕ੍ਰਿਪਟ ਆਧੁਨਿਕ ਲੂਪ ਸਿੰਟੈਕਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹੋਰ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਘੱਟ ਗਲਤੀ-ਪ੍ਰਵਣ ਬਣਾਉਂਦਾ ਹੈ।
-
-**For...of ਲੂਪ (ES6+):**
-
-```javascript
-const colors = ["red", "green", "blue", "yellow"];
-
-// Modern approach - cleaner and safer
-for (const color of colors) {
-  console.log(`Color: ${color}`);
-}
-
-// Compare with traditional for loop
-for (let i = 0; i < colors.length; i++) {
-  console.log(`Color: ${colors[i]}`);
-}
+**ਇਨ੍ਹਾਂ ਉਦਾਹਰਨਾਂ ਨੂੰ ਸਮਝਣਾ:**
+- **ਕਾਊਂਟਰ ਵੈਰੀਏਬਲ `i` ਨੂੰ ਮੈਨੂਅਲੀ ਤੌਰ 'ਤੇ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ** ਲੂਪ ਬਾਡੀ ਦੇ ਅੰਦਰ
+- **ਕਾਊਂਟਰ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ** ਅਨੰਤ ਲੂਪਾਂ ਨੂੰ ਰੋਕਣ ਲਈ
+- **ਪ੍ਰਯੋਗਿਕ ਵਰਤੋਂ ਦਾ ਕੇਸ ਦਿਖਾਉਂਦਾ ਹੈ** ਯੂਜ਼ਰ ਇਨਪੁਟ ਅਤੇ ਕੋਸ਼ਿਸ਼ਾਂ ਦੀ ਸੀਮਾ ਨਾਲ
+- **ਅਨੰਤ ਚਾਲੂ ਹੋਣ ਤੋਂ ਬਚਾਉਣ ਲਈ ਸੁਰੱਖਿਆ ਮਕੈਨਿਜ਼ਮ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ**
+
+### ♾️ **ਵਾਇਲ ਲੂਪ ਦੀ ਸਿਆਣਪ ਦੀ ਜਾਂਚ: ਸ਼ਰਤ-ਅਧਾਰਿਤ ਦੁਹਰਾਅ**
+
+**ਆਪਣੀ ਵਾਇਲ ਲੂਪ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰੋ:**
+- ਵਾਇਲ ਲੂਪ ਵਰਤਣ ਦਾ ਮੁੱਖ ਖਤਰਾ ਕੀ ਹੈ?
+- ਤੁਸੀਂ ਫੋਰ ਲੂਪ ਦੇ ਬਦਲੇ ਵਾਇਲ ਲੂਪ ਕਦੋਂ ਚੁਣੋਗੇ?
+- ਤੁਸੀਂ ਅਨੰਤ ਲੂਪਾਂ ਨੂੰ ਕਿਵੇਂ ਰੋਕ ਸਕਦੇ ਹੋ?
+
+```mermaid
+flowchart LR
+    A["🔄 While vs For"] --> B["While Loop"]
+    A --> C["For Loop"]
+    
+    B --> B1["Unknown iterations"]
+    B --> B2["Condition-driven"]
+    B --> B3["User input, searching"]
+    B --> B4["⚠️ Risk: infinite loops"]
+    
+    C --> C1["Known iterations"]
+    C --> C2["Counter-driven"]
+    C --> C3["Array processing"]
+    C --> C4["✅ Safe: predictable end"]
+    
+    D["🛡️ Safety Tips"] --> D1["Always modify condition variable"]
+    D --> D2["Include escape conditions"]
+    D --> D3["Set maximum iteration limits"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
 ```
 
-**For...of ਦੇ ਮੁੱਖ ਫਾਇਦੇ:**
-- **ਇੰਡੈਕਸ ਪ੍ਰਬੰਧਨ ਅਤੇ ਸੰਭਾਵਿਤ ਗਲਤੀਆਂ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ**
-- **ਐਰੇ ਤੱਤਾਂ ਤੱਕ ਸਿੱਧੀ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
-- **ਕੋਡ ਪੜ੍ਹਨਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ ਅਤੇ ਸਿੰਟੈਕਸ ਦੀ ਜਟਿਲਤਾ ਘਟਾਉਂਦਾ ਹੈ**
-
-**forEach ਤਰੀਕਾ:**
+> **ਸੁਰੱਖਿਆ ਪਹਿਲਾਂ**: ਵਾਇਲ ਲੂਪ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹਨ
+ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਈ ਆਧੁਨਿਕ ਐਰੇ ਮੈਥਡਸ ਪੇਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਖਾਸ ਕੰਮਾਂ ਲਈ ਰਵਾਇਤੀ ਲੂਪਾਂ ਦੀ ਜਗ੍ਹਾ ਲੈ ਸਕਦੇ ਹਨ। [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), ਅਤੇ [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) ਦੀ ਜਾਂਚ ਕਰੋ।
 
-```javascript
-const prices = [9.99, 15.50, 22.75, 8.25];
-
-// Using forEach for functional programming style
-prices.forEach((price, index) => {
-  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
-});
+**ਤੁਹਾਡਾ ਚੈਲੈਂਜ:** ਵਿਦਿਆਰਥੀ ਗਰੇਡਸ ਦੇ ਉਦਾਹਰਨ ਨੂੰ ਘੱਟੋ-ਘੱਟ ਤਿੰਨ ਵੱਖ-ਵੱਖ ਐਰੇ ਮੈਥਡਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਬਾਰਾ ਲਿਖੋ। ਧਿਆਨ ਦਿਓ ਕਿ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਿੰਟੈਕਸ ਨਾਲ ਕੋਡ ਕਿੰਨਾ ਸਾਫ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਬਣ ਜਾਂਦਾ ਹੈ।
 
-// forEach with arrow functions for simple operations
-prices.forEach(price => console.log(`Price: $${price}`));
-```
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ](https://ff-quizzes.netlify.app/web/quiz/14)
 
-**forEach ਬਾਰੇ ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ:**
-- **ਹਰ ਐਰੇ ਤੱਤ ਲਈ ਇੱਕ ਫੰਕਸ਼ਨ ਚਲਾਉਂਦਾ ਹੈ**
-- **ਤੱਤ ਮੁੱਲ ਅਤੇ ਇੰਡੈਕਸ ਦੋਵੇਂ ਨੂੰ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
-- **ਜਲਦੀ ਰੁਕ ਨਹੀਂ ਸਕਦਾ** (ਪ੍ਰੰਪਰਾਗਤ ਲੂਪਾਂ ਦੇ ਵਿਰੁੱਧ)
-- **undefined ਵਾਪਸ ਕਰਦਾ ਹੈ** (ਨਵਾਂ ਐਰੇ ਨਹੀਂ ਬਣਾਉਂਦਾ)
+## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ-ਅਧਿਐਨ
 
-✅ ਤੁਸੀਂ ਫੋਰ ਲੂਪ ਅਤੇ ਵਾਇਲ ਲੂਪ ਵਿੱਚੋਂ ਕਿਉਂ ਚੁਣਦੇ ਹੋ? 17K ਦਰਸ਼ਕਾਂ ਨੇ StackOverflow 'ਤੇ ਇਹੀ ਸਵਾਲ ਕੀਤਾ ਸੀ, ਅਤੇ ਕੁਝ ਰਾਏ [ਤੁਹਾਡੇ ਲਈ ਦਿਲਚਸਪ ਹੋ ਸਕਦੇ ਹਨ](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)।
+ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਐਰੇਜ਼ ਨਾਲ ਕਈ ਮੈਥਡਸ ਜੁੜੇ ਹੋਏ ਹਨ, ਜੋ ਡਾਟਾ ਮੈਨਿਪੂਲੇਸ਼ਨ ਲਈ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਹਨ। [ਇਨ੍ਹਾਂ ਮੈਥਡਸ ਬਾਰੇ ਪੜ੍ਹੋ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) ਅਤੇ ਆਪਣੇ ਬਣਾਏ ਐਰੇ 'ਤੇ ਕੁਝ ਮੈਥਡਸ (ਜਿਵੇਂ ਕਿ push, pop, slice ਅਤੇ splice) ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
 
-## ਲੂਪ ਅਤੇ ਐਰੇ
+## ਅਸਾਈਨਮੈਂਟ
 
-ਐਰੇ ਨੂੰ ਲੂਪਾਂ ਨਾਲ ਜੋੜਨਾ ਸ਼ਕਤੀਸ਼ਾਲੀ ਡਾਟਾ ਪ੍ਰਕਿਰਿਆ ਸਮਰੱਥਾ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਜੋੜ ਕਈ ਪ੍ਰੋਗਰਾਮਿੰਗ ਕੰਮਾਂ ਲਈ ਬੁਨਿਆਦ ਹੈ, ਸੂਚੀਆਂ ਨੂੰ ਦਿਖਾਉਣ ਤੋਂ ਲੈ ਕੇ ਅੰਕੜੇ ਗਣਨਾ ਕਰਨ ਤੱਕ।
+[ਐਰੇ ਨੂੰ ਲੂਪ ਕਰੋ](assignment.md)
 
-**ਪ੍ਰੰਪਰਾਗਤ ਐਰੇ ਪ੍ਰਕਿਰਿਆ:**
+---
 
-```javascript
-const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+## 📊 **ਤੁਹਾਡਾ ਐਰੇਜ਼ ਅਤੇ ਲੂਪਸ ਟੂਲਕਿਟ ਸਾਰ**
+
+```mermaid
+graph TD
+    A["🎯 Arrays & Loops Mastery"] --> B["📦 Array Fundamentals"]
+    A --> C["🔄 Loop Types"]
+    A --> D["🔗 Data Processing"]
+    A --> E["🎨 Modern Techniques"]
+    
+    B --> B1["Creation: [ ]"]
+    B --> B2["Indexing: arr[0]"]
+    B --> B3["Methods: push, pop"]
+    B --> B4["Properties: length"]
+    
+    C --> C1["For: Known iterations"]
+    C --> C2["While: Condition-based"]
+    C --> C3["For...of: Direct access"]
+    C --> C4["forEach: Functional"]
+    
+    D --> D1["Statistics calculation"]
+    D --> D2["Data transformation"]
+    D --> D3["Filtering & searching"]
+    D --> D4["Real-time processing"]
+    
+    E --> E1["Arrow functions"]
+    E --> E2["Method chaining"]
+    E --> E3["Destructuring"]
+    E --> E4["Template literals"]
+    
+    F["💡 Key Benefits"] --> F1["Efficient data handling"]
+    F --> F2["Reduced code repetition"]
+    F --> F3["Scalable solutions"]
+    F --> F4["Cleaner syntax"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
 
-// Classic for loop approach
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
-}
+---
 
-// Modern for...of approach
-for (const flavor of iceCreamFlavors) {
-  console.log(`Available flavor: ${flavor}`);
-}
+## 🚀 ਤੁਹਾਡਾ ਐਰੇਜ਼ ਅਤੇ ਲੂਪਸ ਮਾਹਰ ਬਣਨ ਦਾ ਟਾਈਮਲਾਈਨ
+
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਆਪਣੇ ਮਨਪਸੰਦ ਫਿਲਮਾਂ ਦਾ ਇੱਕ ਐਰੇ ਬਣਾਓ ਅਤੇ ਖਾਸ ਐਲਿਮੈਂਟਸ ਨੂੰ ਐਕਸੈਸ ਕਰੋ
+- [ ] 1 ਤੋਂ 10 ਤੱਕ ਗਿਣਤੀ ਕਰਨ ਵਾਲਾ ਇੱਕ ਫੋਰ ਲੂਪ ਲਿਖੋ
+- [ ] ਲੈਸਨ ਤੋਂ ਆਧੁਨਿਕ ਐਰੇ ਮੈਥਡਸ ਚੈਲੈਂਜ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ
+- [ ] ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਐਰੇ ਇੰਡੈਕਸਿੰਗ ਦੀ ਪ੍ਰੈਕਟਿਸ ਕਰੋ
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ ਪੂਰਾ ਕਰੋ ਅਤੇ ਕਿਸੇ ਵੀ ਚੁਣੌਤੀਪੂਰਨ ਧਾਰਨਾਵਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ
+- [ ] GitHub Copilot ਚੈਲੈਂਜ ਤੋਂ ਵਿਸਤ੍ਰਿਤ ਗਰੇਡ ਵਿਸ਼ਲੇਸ਼ਕ ਬਣਾਓ
+- [ ] ਇੱਕ ਸਧਾਰਨ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਬਣਾਓ ਜੋ ਆਈਟਮਸ ਨੂੰ ਸ਼ਾਮਲ ਅਤੇ ਹਟਾਉਂਦਾ ਹੈ
+- [ ] ਵੱਖ-ਵੱਖ ਲੂਪ ਕਿਸਮਾਂ ਵਿੱਚ ਬਦਲਣ ਦੀ ਪ੍ਰੈਕਟਿਸ ਕਰੋ
+- [ ] `push`, `pop`, `slice`, ਅਤੇ `splice` ਵਰਗੇ ਐਰੇ ਮੈਥਡਸ ਨਾਲ ਅਨੁਭਵ ਕਰੋ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਯਾਤਰਾ**
+- [ ] "ਐਰੇ ਨੂੰ ਲੂਪ ਕਰੋ" ਅਸਾਈਨਮੈਂਟ ਨੂੰ ਰਚਨਾਤਮਕ ਸੁਧਾਰਾਂ ਨਾਲ ਪੂਰਾ ਕਰੋ
+- [ ] ਐਰੇਜ਼ ਅਤੇ ਲੂਪਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਟੂ-ਡੂ ਲਿਸਟ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ
+- [ ] ਅੰਕੜਿਆਂ ਦੇ ਡਾਟਾ ਲਈ ਇੱਕ ਸਧਾਰਨ ਸਟੈਟਿਸਟਿਕਸ ਕੈਲਕੁਲੇਟਰ ਬਣਾਓ
+- [ ] [MDN ਐਰੇ ਮੈਥਡਸ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) ਨਾਲ ਪ੍ਰੈਕਟਿਸ ਕਰੋ
+- [ ] ਇੱਕ ਫੋਟੋ ਗੈਲਰੀ ਜਾਂ ਮਿਊਜ਼ਿਕ ਪਲੇਲਿਸਟ ਇੰਟਰਫੇਸ ਬਣਾਓ
+- [ ] `map`, `filter`, ਅਤੇ `reduce` ਨਾਲ ਫੰਕਸ਼ਨਲ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਜਾਂਚ ਕਰੋ
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਬਦਲਾਅ**
+- [ ] ਉੱਚ-ਸਤਹ ਦੇ ਐਰੇ ਓਪਰੇਸ਼ਨ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਵਿੱਚ ਮਾਹਰ ਬਣੋ
+- [ ] ਇੱਕ ਪੂਰਾ ਡਾਟਾ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ ਡੈਸ਼ਬੋਰਡ ਬਣਾਓ
+- [ ] ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਨਾਲ ਸੰਬੰਧਿਤ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟਸ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ
+- [ ] ਪ੍ਰੈਕਟਿਕਲ ਉਦਾਹਰਨਾਂ ਨਾਲ ਕਿਸੇ ਹੋਰ ਨੂੰ ਐਰੇਜ਼ ਅਤੇ ਲੂਪਸ ਬਾਰੇ ਸਿਖਾਓ
+- [ ] ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਫੰਕਸ਼ਨਸ ਦੀ ਆਪਣੀ ਨਿੱਜੀ ਲਾਇਬ੍ਰੇਰੀ ਬਣਾਓ
+- [ ] ਐਰੇਜ਼ 'ਤੇ ਬਣੇ ਅਲਗੋਰਿਥਮਸ ਅਤੇ ਡਾਟਾ ਸਟ੍ਰਕਚਰਸ ਦੀ ਜਾਂਚ ਕਰੋ
+
+### 🏆 **ਅੰਤਮ ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਚੈਂਪੀਅਨ ਚੈੱਕ-ਇਨ**
+
+**ਤੁਹਾਡੀ ਐਰੇ ਅਤੇ ਲੂਪਸ ਮਾਹਰਤਾ ਦਾ ਜਸ਼ਨ ਮਨਾਓ:**
+- ਤੁਹਾਡੇ ਲਈ ਅਸਲ ਦੁਨੀਆ ਦੇ ਐਪਲੀਕੇਸ਼ਨਸ ਲਈ ਸਭ ਤੋਂ ਲਾਭਦਾਇਕ ਐਰੇ ਓਪਰੇਸ਼ਨ ਕਿਹੜਾ ਹੈ?
+- ਤੁਹਾਨੂੰ ਕਿਹੜੀ ਲੂਪ ਕਿਸਮ ਸਭ ਤੋਂ ਕੁਦਰਤੀ ਲੱਗਦੀ ਹੈ ਅਤੇ ਕਿਉਂ?
+- ਐਰੇਜ਼ ਅਤੇ ਲੂਪਸ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਡੇ ਡਾਟਾ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਵਿੱਚ ਕਿਵੇਂ ਬਦਲਾਅ ਆਇਆ ਹੈ?
+- ਤੁਸੀਂ ਅਗਲਾ ਕਿਹੜਾ ਜਟਿਲ ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਕੰਮ ਹੱਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?
+
+```mermaid
+journey
+    title Your Data Processing Evolution
+    section Today
+      Array Confusion: 3: You
+      Loop Basics: 4: You
+      Index Understanding: 5: You
+    section This Week
+      Method Mastery: 4: You
+      Efficient Processing: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Complex Algorithms: 5: You
+      Performance Optimization: 5: You
+      Teaching Others: 5: You
 ```
 
-**ਹਰ ਪਹੁੰਚ ਨੂੰ ਸਮਝੀਏ:**
-- **ਐਰੇ ਦੀ ਲੰਬਾਈ ਪ੍ਰਾਪਰਟੀ ਵਰਤਦਾ ਹੈ** ਲੂਪ ਸੀਮਾ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ
-- **ਪ੍ਰੰਪਰਾਗਤ ਫੋਰ ਲੂਪਾਂ ਵਿੱਚ ਇੰਡੈਕਸ ਦੁਆਰਾ ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚਦਾ ਹੈ**
-
+> 📦 **ਤੁਸੀਂ ਡਾਟਾ ਸੰਗਠਨ ਅਤੇ ਪ੍ਰੋਸੈਸਿੰਗ ਦੀ ਸ਼ਕਤੀ ਨੂੰ ਅਨਲੌਕ ਕਰ ਲਿਆ ਹੈ!** ਐਰੇਜ਼ ਅਤੇ ਲੂਪਸ ਲਗਭਗ ਹਰ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਬੁਨਿਆਦ ਹਨ ਜੋ ਤੁਸੀਂ ਕਦੇ ਵੀ ਬਣਾਓਗੇ। ਸਧਾਰਨ ਸੂਚੀਆਂ ਤੋਂ ਲੈ ਕੇ ਜਟਿਲ ਡਾਟਾ ਵਿਸ਼ਲੇਸ਼ਣ ਤੱਕ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਜਾਣਕਾਰੀ ਨੂੰ ਕੁਸ਼ਲਤਾ ਅਤੇ ਸੁੰਦਰਤਾ ਨਾਲ ਸੰਭਾਲਣ ਦੇ ਸਾਧਨ ਹਨ। ਹਰ ਗਤੀਸ਼ੀਲ ਵੈਬਸਾਈਟ, ਮੋਬਾਈਲ ਐਪ, ਅਤੇ ਡਾਟਾ-ਚਲਿਤ ਐਪਲੀਕੇਸ਼ਨ ਇਨ੍ਹਾਂ ਮੂਲ ਧਾਰਨਾਵਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਸਕੇਲਬਲ ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਦੀ ਦੁਨੀਆ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ! 🎉
 
 ---
 
-**ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤੀ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/3-terrarium/1-intro-to-html/README.md b/translations/pa/3-terrarium/1-intro-to-html/README.md
index 6e9335d0aa..950da54146 100644
--- a/translations/pa/3-terrarium/1-intro-to-html/README.md
+++ b/translations/pa/3-terrarium/1-intro-to-html/README.md
@@ -1,22 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "20c72cf2e5b0050d38ca3cb14a75a9df",
-  "translation_date": "2025-10-22T17:50:58+00:00",
+  "original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
+  "translation_date": "2025-11-03T16:35:03+00:00",
   "source_file": "3-terrarium/1-intro-to-html/README.md",
   "language_code": "pa"
 }
 -->
 # ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 1: HTML ਦਾ ਪਰਿਚਯ
 
-![HTML ਦਾ ਪਰਿਚਯ](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.pa.png)
-> ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ
-
-HTML, ਜਾਂ HyperText Markup Language, ਹਰ ਵੈਬਸਾਈਟ ਦੀ ਬੁਨਿਆਦ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਕਦੇ ਵੀ ਵੇਖਿਆ ਹੈ। HTML ਨੂੰ ਵੈਬ ਪੇਜਾਂ ਨੂੰ ਬਣਾਉਣ ਵਾਲੇ ਢਾਂਚੇ ਵਜੋਂ ਸੋਚੋ – ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਸਮੱਗਰੀ ਕਿੱਥੇ ਜਾਂਦੀ ਹੈ, ਕਿਵੇਂ ਸੰਗਠਿਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਅਤੇ ਹਰ ਹਿੱਸਾ ਕੀ ਦਰਸਾਉਂਦਾ ਹੈ। ਜਦ CSS ਤੁਹਾਡੇ HTML ਨੂੰ ਰੰਗਾਂ ਅਤੇ ਲੇਆਉਟ ਨਾਲ "ਸਜਾਉਂਦਾ" ਹੈ, ਅਤੇ JavaScript ਇਸ ਨੂੰ ਇੰਟਰਐਕਟਿਵਿਟੀ ਨਾਲ "ਜੀਵੰਤ" ਕਰਦਾ ਹੈ, HTML ਉਹ ਅਹਿਮ ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਬਾਕੀ ਸਭ ਕੁਝ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ।
-
-ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਵਰਚੁਅਲ ਟੈਰੀਰੀਅਮ ਇੰਟਰਫੇਸ ਲਈ HTML ਢਾਂਚਾ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ। ਇਹ ਹੱਥ-ਵਰਤੋਂ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਮੁੱਢਲੇ HTML ਸੰਕਲਪ ਸਿਖਾਏਗਾ ਜਦੋਂ ਤੁਸੀਂ ਕੁਝ ਦ੍ਰਿਸ਼ਮਾਨ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹੋ। ਤੁਸੀਂ ਸੈਮਾਂਟਿਕ ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਮੱਗਰੀ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ, ਚਿੱਤਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨ, ਅਤੇ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਬੁਨਿਆਦ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਸਿੱਖੋਗੇ।
+```mermaid
+journey
+    title Your HTML Learning Journey
+    section Foundation
+      Create HTML file: 3: Student
+      Add DOCTYPE: 4: Student
+      Structure document: 5: Student
+    section Content
+      Add metadata: 4: Student
+      Include images: 5: Student
+      Organize layout: 5: Student
+    section Semantics
+      Use proper tags: 4: Student
+      Enhance accessibility: 5: Student
+      Build terrarium: 5: Student
+```
 
-ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ HTML ਪੇਜ ਹੋਵੇਗਾ ਜੋ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਾਲਮਾਂ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ, ਜੋ ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਸਟਾਈਲਿੰਗ ਲਈ ਤਿਆਰ ਹੈ। ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਬੁਨਿਆਦੀ ਲੱਗਦਾ ਹੈ – CSS ਦੇ ਵਿਜ਼ੂਅਲ ਪੋਲਿਸ਼ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ HTML ਨੂੰ ਇਹੀ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
+![HTML ਦਾ ਪਰਿਚਯ](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.pa.png)
+> ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਦੁਆਰਾ
+
+HTML, ਜਾਂ HyperText Markup Language, ਹਰ ਵੈਬਸਾਈਟ ਦੀ ਬੁਨਿਆਦ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਕਦੇ ਵੀ ਵੇਖਿਆ ਹੈ। HTML ਨੂੰ ਵੈਬ ਪੇਜਾਂ ਦੇ ਢਾਂਚੇ ਦੇ ਤੌਰ 'ਤੇ ਸੋਚੋ - ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਸਮੱਗਰੀ ਕਿੱਥੇ ਜਾਂਦੀ ਹੈ, ਇਹ ਕਿਵੇਂ ਸੰਗਠਿਤ ਹੈ, ਅਤੇ ਹਰ ਹਿੱਸਾ ਕੀ ਦਰਸਾਉਂਦਾ ਹੈ। ਜਦ CSS ਤੁਹਾਡੇ HTML ਨੂੰ ਰੰਗਾਂ ਅਤੇ ਲੇਆਉਟ ਨਾਲ "ਸਜਾਉਣ" ਲਈ ਆਵੇਗਾ, ਅਤੇ JavaScript ਇਸਨੂੰ ਇੰਟਰਐਕਟਿਵਿਟੀ ਨਾਲ ਜ਼ਿੰਦਾ ਕਰੇਗਾ, HTML ਉਹ ਅਹਿਮ ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਬਾਕੀ ਸਭ ਕੁਝ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ।
+
+ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਵਰਚੁਅਲ ਟੈਰੀਰੀਅਮ ਇੰਟਰਫੇਸ ਲਈ HTML ਢਾਂਚਾ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ। ਇਹ ਹੱਥ-ਅਨੁਭਵ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਮੁੱਢਲੇ HTML ਸੰਕਲਪ ਸਿਖਾਏਗਾ ਜਦੋਂ ਤੁਸੀਂ ਕੁਝ ਦ੍ਰਿਸ਼ਮਾਨ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹੋ। ਤੁਸੀਂ ਸੈਮਾਂਟਿਕ ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਮੱਗਰੀ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ, ਚਿੱਤਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨ, ਅਤੇ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਬੁਨਿਆਦ ਬਣਾਉਣ ਦੇ ਬਾਰੇ ਸਿੱਖੋਗੇ।
+
+ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ HTML ਪੇਜ ਹੋਵੇਗਾ ਜੋ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਾਲਮਾਂ ਵਿੱਚ ਦਰਸਾਉਂਦਾ ਹੈ, ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਸਟਾਈਲਿੰਗ ਲਈ ਤਿਆਰ। ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਬੁਨਿਆਦੀ ਲੱਗਦਾ ਹੈ - ਇਹੀ HTML ਦਾ ਕੰਮ ਹੈ CSS ਦੇ ਵਿਜ਼ੁਅਲ ਪੋਲਿਸ਼ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ।
+
+```mermaid
+mindmap
+  root((HTML Fundamentals))
+    Structure
+      DOCTYPE Declaration
+      HTML Element
+      Head Section
+      Body Content
+    Elements
+      Tags & Attributes
+      Self-closing Tags
+      Nested Elements
+      Block vs Inline
+    Content
+      Text Elements
+      Images
+      Containers (div)
+      Lists
+    Semantics
+      Meaningful Tags
+      Accessibility
+      Screen Readers
+      SEO Benefits
+    Best Practices
+      Proper Nesting
+      Valid Markup
+      Descriptive Alt Text
+      Organized Structure
+```
 
 ## ਪਾਠ-ਪਹਿਲਾਂ ਕਵਿਜ਼
 
@@ -24,13 +71,13 @@ HTML, ਜਾਂ HyperText Markup Language, ਹਰ ਵੈਬਸਾਈਟ ਦੀ 
 
 > 📺 **ਦੇਖੋ ਅਤੇ ਸਿੱਖੋ**: ਇਸ ਮਦਦਗਾਰ ਵੀਡੀਓ ਝਲਕ ਨੂੰ ਦੇਖੋ
 > 
-> [![HTML ਮੂਲਭੂਤ ਵੀਡੀਓ](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
+> [![HTML ਮੁੱਢਲੇ ਤੱਤ ਵੀਡੀਓ](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
 
-## ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ ਸੈਟਅੱਪ ਕਰਨਾ
+## ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸੈਟ ਅੱਪ ਕਰਨਾ
 
-HTML ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਸਹੀ ਵਰਕਸਪੇਸ ਸੈਟਅੱਪ ਕਰੀਏ। ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਸੰਗਠਿਤ ਫਾਈਲ ਢਾਂਚਾ ਬਣਾਉਣਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਆਦਤ ਹੈ ਜੋ ਤੁਹਾਡੇ ਵੈਬ ਵਿਕਾਸ ਯਾਤਰਾ ਦੌਰਾਨ ਤੁਹਾਡੀ ਮਦਦ ਕਰੇਗੀ।
+HTML ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਢੰਗ ਵਾਲਾ ਵਰਕਸਪੇਸ ਸੈਟ ਅੱਪ ਕਰੀਏ। ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਸੰਗਠਿਤ ਫਾਈਲ ਢਾਂਚਾ ਬਣਾਉਣਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਆਦਤ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਵੈਬ ਵਿਕਾਸ ਯਾਤਰਾ ਦੌਰਾਨ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੇਵਾ ਦੇਵੇਗੀ।
 
-### ਕੰਮ: ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ ਢਾਂਚਾ ਬਣਾਓ
+### ਕੰਮ: ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਢਾਂਚੇ ਨੂੰ ਬਣਾਓ
 
 ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਸਮਰਪਿਤ ਫੋਲਡਰ ਬਣਾਓਗੇ ਅਤੇ ਆਪਣੀ ਪਹਿਲੀ HTML ਫਾਈਲ ਸ਼ਾਮਲ ਕਰੋਗੇ। ਇੱਥੇ ਦੋ ਪਹੁੰਚਾਂ ਹਨ ਜੋ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ:
 
@@ -41,7 +88,7 @@ HTML ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ
 4. Explorer ਪੈਨ ਵਿੱਚ, "New File" ਆਈਕਨ 'ਤੇ ਕਲਿਕ ਕਰੋ
 5. ਆਪਣੀ ਫਾਈਲ ਨੂੰ `index.html` ਨਾਮ ਦਿਓ
 
-![VS Code Explorer ਵਿੱਚ ਨਵੀਂ ਫਾਈਲ ਬਣਾਉਣ ਦੀ ਦਿਖਾਈ](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.pa.png)
+![VS Code Explorer ਨਵੀਂ ਫਾਈਲ ਬਣਾਉਣ ਦਿਖਾਉਂਦਾ ਹੈ](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.pa.png)
 
 **ਵਿਕਲਪ 2: ਟਰਮੀਨਲ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਨਾ**
 ```bash
@@ -57,17 +104,35 @@ code index.html
 - **ਖਾਲੀ `index.html` ਫਾਈਲ** ਬਣਾਉਂਦਾ ਹੈ
 - **Visual Studio Code ਵਿੱਚ ਫਾਈਲ ਖੋਲ੍ਹਦਾ ਹੈ** ਸੰਪਾਦਨ ਲਈ
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਫਾਈਲ ਨਾਮ `index.html` ਵੈਬ ਵਿਕਾਸ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਹੈ। ਜਦੋਂ ਕੋਈ ਵੈਬਸਾਈਟ 'ਤੇ ਜਾਂਦਾ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ ਆਪਣੇ ਆਪ `index.html` ਨੂੰ ਡਿਫਾਲਟ ਪੇਜ ਵਜੋਂ ਦਿਖਾਉਣ ਲਈ ਲੱਭਦੇ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ `https://mysite.com/projects/` ਵਰਗਾ URL ਆਪਣੇ ਆਪ `projects` ਫੋਲਡਰ ਤੋਂ `index.html` ਫਾਈਲ ਨੂੰ ਸਰਵ ਕਰੇਗਾ ਬਿਨਾਂ URL ਵਿੱਚ ਫਾਈਲ ਨਾਮ ਦੱਸਣ ਦੀ ਲੋੜ ਹੋਣ ਦੇ।
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਫਾਈਲ ਦਾ ਨਾਮ `index.html` ਵੈਬ ਵਿਕਾਸ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਹੈ। ਜਦੋਂ ਕੋਈ ਵੈਬਸਾਈਟ 'ਤੇ ਜਾਂਦਾ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ `index.html` ਨੂੰ ਡਿਫਾਲਟ ਪੇਜ ਦੇ ਤੌਰ 'ਤੇ ਵੇਖਣ ਲਈ ਲੱਭਦੇ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ `https://mysite.com/projects/` ਵਰਗਾ URL ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ `projects` ਫੋਲਡਰ ਤੋਂ `index.html` ਫਾਈਲ ਨੂੰ ਸਰਵ ਕਰੇਗਾ ਬਿਨਾਂ URL ਵਿੱਚ ਫਾਈਲ ਨਾਮ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇ।
 
 ## HTML ਦਸਤਾਵੇਜ਼ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ
 
-ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਢਾਂਚੇ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਮਝਣ ਅਤੇ ਦਿਖਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਢਾਂਚੇ ਨੂੰ ਇੱਕ ਅਧਿਕਾਰਤ ਚਿੱਠੀ ਵਾਂਗ ਸੋਚੋ – ਇਸ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਕ੍ਰਮ ਵਿੱਚ ਲੋੜੀਂਦੇ ਤੱਤ ਹੁੰਦੇ ਹਨ ਜੋ ਪ੍ਰਾਪਤਕਰਤਾ (ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਬ੍ਰਾਊਜ਼ਰ) ਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ।
+ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਢਾਂਚੇ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਮਝਣ ਅਤੇ ਦਰਸਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਢਾਂਚੇ ਨੂੰ ਇੱਕ ਅਧਿਕਾਰਤ ਚਿੱਠੀ ਵਾਂਗ ਸੋਚੋ - ਇਸ ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਕ੍ਰਮ ਵਿੱਚ ਲੋੜੀਂਦੇ ਤੱਤ ਹੁੰਦੇ ਹਨ ਜੋ ਪ੍ਰਾਪਤਕਰਤਾ (ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਬ੍ਰਾਊਜ਼ਰ) ਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ।
+
+```mermaid
+flowchart TD
+    A["<!DOCTYPE html>"] --> B["<html>"]
+    B --> C["<head>"]
+    C --> D["<title>"]
+    C --> E["<meta charset>"]
+    C --> F["<meta viewport>"]
+    B --> G["<body>"]
+    G --> H["<h1> Heading"]
+    G --> I["<div> Containers"]
+    G --> J["<img> Images"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style C fill:#fff3e0
+    style G fill:#e8f5e8
+```
 
-ਆਓ ਉਹ ਅਹਿਮ ਬੁਨਿਆਦ ਸ਼ਾਮਲ ਕਰੀਏ ਜੋ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਨੂੰ ਲੋੜੀਂਦੀ ਹੁੰਦੀ ਹੈ।
+ਆਓ ਅਹਿਮ ਬੁਨਿਆਦ ਸ਼ਾਮਲ ਕਰਕੇ ਸ਼ੁਰੂ ਕਰੀਏ ਜੋ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਨੂੰ ਲੋੜੀਂਦੀ ਹੈ।
 
 ### DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਅਤੇ ਰੂਟ ਐਲਿਮੈਂਟ
 
-ਕਿਸੇ ਵੀ HTML ਫਾਈਲ ਦੀ ਪਹਿਲੀ ਦੋ ਲਾਈਨਾਂ ਦਸਤਾਵੇਜ਼ ਦਾ "ਪ੍ਰਸਤਾਵ" ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦਿੰਦੀ ਹੈ:
+ਕਿਸੇ ਵੀ HTML ਫਾਈਲ ਦੀ ਪਹਿਲੀ ਦੋ ਲਾਈਨਾਂ ਦਸਤਾਵੇਜ਼ ਦਾ "ਪ੍ਰਸਤਾਵ" ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦਿੰਦੇ ਹਨ:
 
 ```html
 <!DOCTYPE html>
@@ -75,24 +140,32 @@ code index.html
 ```
 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਦਸਤਾਵੇਜ਼ ਦੀ ਕਿਸਮ** ਨੂੰ HTML5 ਵਜੋਂ `<!DOCTYPE html>` ਨਾਲ ਘੋਸ਼ਿਤ ਕਰਦਾ ਹੈ
+- **ਦਸਤਾਵੇਜ਼ ਦੀ ਕਿਸਮ** HTML5 ਦੇ ਤੌਰ 'ਤੇ `<!DOCTYPE html>` ਨਾਲ ਘੋਸ਼ਿਤ ਕਰਦਾ ਹੈ
 - **ਰੂਟ `<html>` ਐਲਿਮੈਂਟ ਬਣਾਉਂਦਾ ਹੈ** ਜੋ ਸਾਰੀ ਪੇਜ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗਾ
-- **ਆਧੁਨਿਕ ਵੈਬ ਮਿਆਰਾਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ ਰੇਂਡਰਿੰਗ ਲਈ
-- **ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਥਿਰ ਦਿਖਾਈ ਦੇਣ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ**
+- **ਆਧੁਨਿਕ ਵੈਬ ਮਿਆਰਾਂ** ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ ਰੈਂਡਰਿੰਗ ਲਈ
+- **ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ** ਸਥਿਰ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ
 
-> 💡 **VS Code ਟਿਪ**: VS Code ਵਿੱਚ ਕਿਸੇ ਵੀ HTML ਟੈਗ 'ਤੇ ਹਵਾਈ ਝਲਕ ਦਿਓ ਤਾਂ ਜੋ MDN Web Docs ਤੋਂ ਮਦਦਗਾਰ ਜਾਣਕਾਰੀ ਦੇਖ ਸਕੋ, ਜਿਸ ਵਿੱਚ ਵਰਤੋਂ ਦੇ ਉਦਾਹਰਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਵੇਰਵੇ ਸ਼ਾਮਲ ਹਨ।
+> 💡 **VS Code ਟਿਪ**: VS Code ਵਿੱਚ ਕਿਸੇ ਵੀ HTML ਟੈਗ 'ਤੇ ਹਵਰ ਕਰੋ ਤਾਂ ਜੋ MDN Web Docs ਤੋਂ ਮਦਦਗਾਰ ਜਾਣਕਾਰੀ ਦੇਖ ਸਕੋ, ਜਿਸ ਵਿੱਚ ਵਰਤੋਂ ਦੇ ਉਦਾਹਰਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਵੇਰਵੇ ਸ਼ਾਮਲ ਹਨ।
 
-> 📚 **ਹੋਰ ਸਿੱਖੋ**: DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ "quirks mode" ਵਿੱਚ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ, ਜੋ ਬਹੁਤ ਪੁਰਾਣੀਆਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਸਹਾਇਤਾ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਸੀ। ਆਧੁਨਿਕ ਵੈਬ ਵਿਕਾਸ ਸਧਾਰਨ `<!DOCTYPE html>` ਡਿਕਲੇਰੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ [ਮਿਆਰੀ-ਅਨੁਕੂਲ ਰੇਂਡਰਿੰਗ](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ।
+> 📚 **ਹੋਰ ਸਿੱਖੋ**: DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ "quirks mode" ਵਿੱਚ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ, ਜੋ ਬਹੁਤ ਪੁਰਾਣੀਆਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਸਹਾਇਤਾ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਸੀ। ਆਧੁਨਿਕ ਵੈਬ ਵਿਕਾਸ ਸਧਾਰਨ `<!DOCTYPE html>` ਡਿਕਲੇਰੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ [ਮਿਆਰ-ਅਨੁਕੂਲ ਰੈਂਡਰਿੰਗ](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ।
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਵਿਰਾਮ ਲਓ ਅਤੇ ਵਿਚਾਰ ਕਰੋ**: ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ:
+- ✅ ਕਿਉਂ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਨੂੰ DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ
+- ✅ `<html>` ਰੂਟ ਐਲਿਮੈਂਟ ਵਿੱਚ ਕੀ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ
+- ✅ ਇਹ ਢਾਂਚਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਪੇਜਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਰੈਂਡਰ ਕਰਨ ਵਿੱਚ ਕਿਵੇਂ ਮਦਦ ਕਰਦਾ ਹੈ
+
+**ਤੁਰੰਤ ਸਵੈ-ਪਰੀਖਣ**: ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਸ਼ਬਦਾਂ ਵਿੱਚ "ਮਿਆਰ-ਅਨੁਕੂਲ ਰੈਂਡਰਿੰਗ" ਦਾ ਮਤਲਬ ਸਮਝਾ ਸਕਦੇ ਹੋ?
 
 ## ਅਹਿਮ ਦਸਤਾਵੇਜ਼ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਨਾ
 
-HTML ਦਸਤਾਵੇਜ਼ ਦਾ `<head>` ਭਾਗ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਸਦੀ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਪਰ ਜੋ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਪੇਜ 'ਤੇ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੀ। ਇਸਨੂੰ "ਪਿੱਛੇ-ਦ੍ਰਿਸ਼" ਜਾਣਕਾਰੀ ਵਜੋਂ ਸੋਚੋ ਜੋ ਤੁਹਾਡੇ ਵੈਬਪੇਜ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਅਤੇ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਈ ਦੇਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ।
+HTML ਦਸਤਾਵੇਜ਼ ਦਾ `<head>` ਭਾਗ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਸਦੀ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਪਰ ਜੋ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਪੇਜ 'ਤੇ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੀ। ਇਸਨੂੰ "ਪਿੱਛੇ-ਦ੍ਰਿਸ਼" ਜਾਣਕਾਰੀ ਵਾਂਗ ਸੋਚੋ ਜੋ ਤੁਹਾਡੇ ਵੈਬਪੇਜ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਅਤੇ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਗਟ ਹੋਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ।
 
-ਇਹ ਮੈਟਾਡੇਟਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਪੇਜ ਨੂੰ ਕਿਵੇਂ ਦਿਖਾਉਣਾ ਹੈ, ਕਿਹੜੀ ਅੱਖਰ ਕੋਡਿੰਗ ਵਰਤਣੀ ਹੈ, ਅਤੇ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ – ਪੇਸ਼ੇਵਰ, ਪਹੁੰਚਯੋਗ ਵੈਬਪੇਜ ਬਣਾਉਣ ਲਈ ਇਹ ਸਭ ਜ਼ਰੂਰੀ ਹੈ।
+ਇਹ ਮੈਟਾਡੇਟਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਪੇਜ ਨੂੰ ਕਿਵੇਂ ਦਰਸਾਉਣਾ ਹੈ, ਕਿਹੜੀ ਕਿਰਦਾਰ ਕੋਡਿੰਗ ਵਰਤਣੀ ਹੈ, ਅਤੇ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਆਕਾਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ - ਪੇਸ਼ੇਵਰ, ਪਹੁੰਚਯੋਗ ਵੈਬ ਪੇਜ ਬਣਾਉਣ ਲਈ ਸਾਰਾ ਕੁਝ ਜ਼ਰੂਰੀ।
 
-### ਕੰਮ: ਦਸਤਾਵੇਜ਼ ਦਾ ਹੇਡ ਸ਼ਾਮਲ ਕਰੋ
+### ਕੰਮ: ਦਸਤਾਵੇਜ਼ ਹੈਡ ਸ਼ਾਮਲ ਕਰੋ
 
-ਆਪਣੇ ਖੁੱਲੇ ਅਤੇ ਬੰਦ `<html>` ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਇਹ `<head>` ਭਾਗ ਸ਼ਾਮਲ ਕਰੋ:
+ਆਪਣੇ `<html>` ਟੈਗਾਂ ਦੇ ਖੁਲ੍ਹਣ ਅਤੇ ਬੰਦ ਕਰਨ ਦੇ ਵਿਚਕਾਰ ਇਹ `<head>` ਭਾਗ ਸ਼ਾਮਲ ਕਰੋ:
 
 ```html
 <head>
@@ -103,182 +176,204 @@ HTML ਦਸਤਾਵੇਜ਼ ਦਾ `<head>` ਭਾਗ ਮਹੱਤਵਪੂਰ
 </head>
 ```
 
-**ਹਰ ਤੱਤ ਕੀ ਕਰਦਾ ਹੈ:**
+**ਹਰ ਤੱਤ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:**
 - **ਪੇਜ ਦਾ ਸਿਰਲੇਖ ਸੈਟ ਕਰਦਾ ਹੈ** ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ ਅਤੇ ਖੋਜ ਨਤੀਜਿਆਂ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
-- **UTF-8 ਅੱਖਰ ਕੋਡਿੰਗ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ** ਦੁਨੀਆ ਭਰ ਵਿੱਚ ਸਹੀ ਟੈਕਸਟ ਦਿਖਾਈ ਦੇਣ ਲਈ
-- **ਆਧੁਨਿਕ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰ ਵਰਜਨ ਨਾਲ ਅਨੁਕੂਲਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ**
-- **ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਨੂੰ ਸੰਰਚਿਤ ਕਰਦਾ ਹੈ** ਡਿਵਾਈਸ ਚੌੜਾਈ ਦੇ ਨਾਲ ਵਿਊਪੋਰਟ ਸੈਟ ਕਰਕੇ
-- **ਸ਼ੁਰੂਆਤੀ ਜ਼ੂਮ ਲੈਵਲ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ** ਸਮੱਗਰੀ ਨੂੰ ਕੁਦਰਤੀ ਆਕਾਰ ਵਿੱਚ ਦਿਖਾਉਣ ਲਈ
+- **UTF-8 ਕਿਰਦਾਰ ਕੋਡਿੰਗ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ** ਵਿਸ਼ਵਵਿਆਪੀ ਟੈਕਸਟ ਪ੍ਰਦਰਸ਼ਨ ਲਈ
+- **Internet Explorer ਦੇ ਆਧੁਨਿਕ ਵਰਜਨਾਂ ਨਾਲ ਅਨੁਕੂਲਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ**
+- **ਵਿਊਪੋਰਟ ਨੂੰ ਡਿਵਾਈਸ ਚੌੜਾਈ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਸੰਰਚਿਤ ਕਰਦਾ ਹੈ**
+- **ਸ਼ੁਰੂਆਤੀ ਜ਼ੂਮ ਪੱਧਰ ਨੂੰ ਕੰਟ੍ਰੋਲ ਕਰਦਾ ਹੈ** ਸਮੱਗਰੀ ਨੂੰ ਕੁਦਰਤੀ ਆਕਾਰ 'ਤੇ ਦਰਸਾਉਣ ਲਈ
 
-> 🤔 **ਇਸ ਬਾਰੇ ਸੋਚੋ**: ਜੇ ਤੁਸੀਂ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈਟ ਕਰੋ: `<meta name="viewport" content="width=600">`, ਤਾਂ ਕੀ ਹੋਵੇਗਾ? ਇਹ ਪੇਜ ਨੂੰ ਹਮੇਸ਼ਾ 600 ਪਿਕਸਲ ਚੌੜਾ ਬਣਾਉਂਦਾ, ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਨੂੰ ਤੋੜਦਾ! [ਸਹੀ ਵਿਊਪੋਰਟ ਸੰਰਚਨਾ](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
+> 🤔 **ਇਸ ਬਾਰੇ ਸੋਚੋ**: ਜੇ ਤੁਸੀਂ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈਟ ਕਰੋ: `<meta name="viewport" content="width=600">`, ਤਾਂ ਕੀ ਹੋਵੇਗਾ? ਇਹ ਪੇਜ ਨੂੰ ਹਮੇਸ਼ਾ 600 ਪਿਕਸਲ ਚੌੜਾ ਬਣਾਉਣ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ, ਜਿਹੜਾ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਨੂੰ ਤੋੜ ਦੇਵੇਗਾ! [ਸਹੀ ਵਿਊਪੋਰਟ ਸੰਰਚਨਾ](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) ਬਾਰੇ ਹੋਰ ਸਿੱਖੋ।
 
 ## ਦਸਤਾਵੇਜ਼ ਬਾਡੀ ਬਣਾਉਣਾ
 
-HTML ਦੇ `<body>` ਐਲਿਮੈਂਟ ਵਿੱਚ ਤੁਹਾਡੇ ਵੈਬਪੇਜ ਦੀ ਸਾਰੀ ਦਿੱਖਣਯੋਗ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ – ਉਹ ਸਭ ਕੁਝ ਜੋ ਉਪਭੋਗਤਾ ਵੇਖਣ ਅਤੇ ਇਸ ਨਾਲ ਇੰਟਰਐਕਟ ਕਰਨਗੇ। ਜਦ `<head>` ਭਾਗ ਨੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਨਿਰਦੇਸ਼ ਦਿੱਤੇ, `<body>` ਭਾਗ ਵਿੱਚ ਅਸਲ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ: ਟੈਕਸਟ, ਚਿੱਤਰ, ਬਟਨ, ਅਤੇ ਹੋਰ ਤੱਤ ਜੋ ਤੁਹਾਡਾ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦੇ ਹਨ।
-
-ਆਓ ਬਾਡੀ ਢਾਂਚਾ ਸ਼ਾਮਲ ਕਰੀਏ ਅਤੇ ਸਮਝੀਏ ਕਿ HTML ਟੈਗ ਕਿਵੇਂ ਮਿਲ ਕੇ ਅਰਥਪੂਰਨ ਸਮੱਗਰੀ ਬਣਾਉਂਦੇ ਹਨ।
-
-### HTML ਟੈਗ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ
-
-HTML ਜੋੜੇ ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤੱਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ। ਜ਼ਿਆਦਾਤਰ ਟੈਗਾਂ ਵਿੱਚ ਇੱਕ ਖੁੱਲ੍ਹਣ ਵਾਲਾ ਟੈਗ ਜਿਵੇਂ `<p>` ਅਤੇ ਇੱਕ ਬੰਦ ਕਰਨ ਵਾਲਾ ਟੈਗ ਜਿਵੇਂ `</p>` ਹੁੰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਸਮੱਗਰੀ ਵਿਚਕਾਰ ਹੁੰਦੀ ਹੈ: `<p>Hello, world!</p>`। ਇਹ ਇੱਕ ਪੈਰਾ ਤੱਤ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ "Hello, world!" ਟੈਕਸਟ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ।
-
-### ਕੰਮ: ਬਾਡੀ ਐਲਿਮੈਂਟ ਸ਼ਾਮਲ ਕਰੋ
-
-ਆਪਣੀ HTML ਫਾਈਲ ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਜੋ `<body>` ਐਲਿਮੈਂਟ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕੇ:
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Welcome to my Virtual Terrarium</title>
-		<meta charset="utf-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-	</head>
-	<body></body>
-</html>
+HTML ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਅਤੇ ਟੈਰੀਰੀਅਮ ਸੰਬੰਧੀ ਸਮੱਗਰੀ ਲਈ ਅਗਲੇ ਹਿੱਸੇ ਵਿੱਚ ਜਾਰੀ ਰੱਖੋ।
+- **ਵੱਖ ਵੱਖ ਹਿੱਸਿਆਂ** ਨੂੰ ਹਰ ਵਿਜੁਅਲ ਕੰਪੋਨੈਂਟ ਲਈ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ (ਉਪਰਲਾ ਹਿੱਸਾ, ਕੰਧਾਂ, ਮਿੱਟੀ, ਹੇਠਲਾ ਹਿੱਸਾ)
+- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਗਲਾਸ ਰਿਫਲੈਕਸ਼ਨ ਪ੍ਰਭਾਵਾਂ ਲਈ ਨੇਸਟਡ ਐਲਿਮੈਂਟਸ (ਚਮਕਦਾਰ ਹਿੱਸੇ)
+- **ਵਰਤਦਾ ਹੈ** ਵਰਣਨਾਤਮਕ ਕਲਾਸ ਨਾਮ ਜੋ ਹਰ ਹਿੱਸੇ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਸਪਸ਼ਟ ਕਰਦੇ ਹਨ
+- **ਤਿਆਰ ਕਰਦਾ ਹੈ** ਢਾਂਚਾ CSS ਸਟਾਈਲਿੰਗ ਲਈ ਜੋ ਗਲਾਸ ਟੈਰੀਰੀਅਮ ਦੀ ਦਿੱਖ ਬਣਾਏਗਾ
+
+> 🤔 **ਕੁਝ ਧਿਆਨ ਦਿੱਤਾ?**: ਹਾਲਾਂਕਿ ਤੁਸੀਂ ਇਹ ਮਾਰਕਅੱਪ ਜੋੜਿਆ ਹੈ, ਤੁਹਾਨੂੰ ਪੇਜ 'ਤੇ ਕੁਝ ਨਵਾਂ ਨਹੀਂ ਦਿਖਦਾ! ਇਹ ਬਹੁਤ ਹੀ ਵਧੀਆ ਤਰੀਕੇ ਨਾਲ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ HTML ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਦਕਿ CSS ਦਿੱਖ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ `<div>` ਐਲਿਮੈਂਟਸ ਮੌਜੂਦ ਹਨ ਪਰ ਅਜੇ ਤੱਕ ਕੋਈ ਵਿਜੁਅਲ ਸਟਾਈਲਿੰਗ ਨਹੀਂ ਹੈ – ਇਹ ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਆਵੇਗੀ!
+
+```mermaid
+flowchart TD
+    A[HTML Document] --> B[Document Head]
+    A --> C[Document Body]
+    B --> D[Title Element]
+    B --> E[Meta Charset]
+    B --> F[Meta Viewport]
+    C --> G[Main Heading]
+    C --> H[Page Container]
+    H --> I[Left Container with 7 plants]
+    H --> J[Right Container with 7 plants]
+    H --> K[Terrarium Structure]
+    
+    style A fill:#e1f5fe
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style H fill:#f3e5f5
 ```
 
-**ਇਹ ਪੂਰਾ ਢਾਂਚਾ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:**
-- **ਮੁੱਢਲੀ HTML5 ਦਸਤਾਵੇਜ਼ ਫਰੇਮਵਰਕ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ**
-- **ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ ਰੇਂਡਰਿੰਗ ਲਈ ਅਹਿਮ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ**
-- **ਦਿੱਖਣਯੋਗ ਸਮੱਗਰੀ ਲਈ ਖਾਲੀ ਬਾਡੀ ਬਣਾਉਂਦਾ ਹੈ**
-- **ਆਧੁਨਿਕ ਵੈਬ ਵਿਕਾਸ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ**
-
-ਹੁਣ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਦੇ ਦਿੱਖਣਯੋਗ ਤੱਤ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ। ਅਸੀਂ `<div>` ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਵੱਖ-ਵੱਖ ਸਮੱਗਰੀ ਦੇ ਭਾਗਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਲਈ, ਅਤੇ `<img>` ਐਲਿਮੈਂਟਸ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਦਿਖਾਉਣ ਲਈ।
-
-### ਚਿੱਤਰਾਂ ਅਤੇ ਲੇਆਉਟ ਕੰਟੇਨਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ
-
-HTML ਵਿੱਚ ਚਿੱਤਰ ਵਿਸ਼ੇਸ਼ ਹੁੰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ "ਸਵੈ-ਬੰਦ" ਟੈਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। `<p></p>` ਵਰਗੇ ਤੱਤਾਂ ਦੇ ਵਿਰੁੱਧ, ਜੋ ਸਮੱਗਰੀ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਹੁੰਦੇ ਹਨ, `<img>` ਟੈਗ ਸਾਰੇ ਜਾਣਕਾਰੀ ਨੂੰ ਆਪਣੇ ਆਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਵੇਂ `src` ਚਿੱਤਰ ਫਾਈਲ ਪਾਥ ਲਈ ਅਤੇ `alt` ਪਹੁੰਚਯੋਗਤਾ ਲਈ।
-
-ਚਿੱਤਰਾਂ ਨੂੰ ਆਪਣੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸੰਗਠਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ, ਇੱਕ ਚਿੱਤਰਾਂ ਦਾ ਫੋਲਡਰ ਬਣਾਉਣ ਅਤੇ ਪੌਦਿਆਂ ਦੇ ਗ੍ਰਾਫਿਕਸ ਸ਼ਾਮਲ ਕਰਨ ਦੁਆਰਾ।
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**HTML ਢਾਂਚਾ ਮਾਹਰਤਾ**: ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:
+- ✅ HTML ਢਾਂਚੇ ਅਤੇ ਵਿਜੁਅਲ ਦਿੱਖ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਦੀ ਵਿਆਖਿਆ ਕਰੋ
+- ✅ ਸੈਮੈਂਟਿਕ ਅਤੇ ਗੈਰ-ਸੈਮੈਂਟਿਕ HTML ਐਲਿਮੈਂਟਸ ਦੀ ਪਛਾਣ ਕਰੋ
+- ✅ ਵਿਆਖਿਆ ਕਰੋ ਕਿ ਸਹੀ ਮਾਰਕਅੱਪ ਕਿਵੇਂ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਲਾਭ ਪਹੁੰਚਾਉਂਦਾ ਹੈ
+- ✅ ਪੂਰੇ ਦਸਤਾਵੇਜ਼ ਟ੍ਰੀ ਢਾਂਚੇ ਦੀ ਪਛਾਣ ਕਰੋ
 
-**ਪਹਿਲਾਂ, ਆਪਣੇ ਚਿੱਤਰ ਸੈਟਅੱਪ ਕਰੋ:**
-1. ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ `images` ਨਾਮਕ ਫੋਲਡਰ ਬਣਾਓ
-2. [solution folder](../../../../3-terrarium/solution/images) ਤੋਂ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਡਾਊਨਲੋਡ ਕਰੋ (ਕੁੱਲ 14 ਪੌਦੇ)
-3. ਸਾਰੇ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਆਪਣੇ ਨਵੇਂ `images` ਫੋਲਡਰ ਵਿੱਚ ਕਾਪੀ ਕਰੋ
+**ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ**: ਆਪਣੀ HTML ਫਾਈਲ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ JavaScript ਬਿਨਾਂ ਅਤੇ CSS ਹਟਾ ਕੇ ਖੋਲ੍ਹਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਖਾਲੀ ਸੈਮੈਂਟਿਕ ਢਾਂਚਾ ਦਿਖਾਉਂਦਾ ਹੈ!
 
-### ਕੰਮ: ਪੌਦੇ ਦਿਖਾਉਣ ਦਾ ਲੇਆਉਟ ਬਣਾਓ
+---
 
-ਹੁਣ ਆਪਣੇ `<body></body>` ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰ ਦੋ ਕਾਲਮਾਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਕੇ ਸ਼ਾਮਲ ਕਰੋ:
+## GitHub Copilot Agent ਚੈਲੈਂਜ
 
-```html
-<div id="page">
-	<div id="left-container" class="container">
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.pa.png" />
-		</div>
-	</div>
-	<div id="right-container" class="container">
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.pa.png" />
-		</div>
-		<div class="plant-holder">
-			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.pa.png" />
-		</div>
-	</div>
-</div>
-```
+Agent ਮੋਡ ਵਰਤ ਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
 
-**ਇਸ ਕੋਡ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- **ਮੁੱਖ ਪੇਜ ਕੰਟੇਨਰ ਬਣਾਉਂਦਾ ਹੈ** `id="page"` ਨਾਲ ਜੋ ਸਾਰੀ ਸਮੱਗਰੀ ਨੂੰ ਰੱਖੇਗਾ
-- **ਦੋ ਕਾਲਮ ਕੰਟੇਨਰ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ**: `left-container` ਅਤੇ `right-container`
-- **7 ਪੌਦਿਆਂ ਨੂੰ ਖੱਬੇ ਕਾਲਮ ਵਿੱਚ ਅਤੇ 7 ਪੌਦਿਆਂ ਨੂੰ ਸੱਜੇ ਕਾਲਮ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ**
-- **ਹਰ ਪੌਦੇ ਦੇ ਚਿੱਤਰ ਨੂੰ ਇੱਕ `plant-holder` div ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ** ਵਿਅਕਤੀਗਤ ਸਥਿਤੀ ਲਈ
-- **CSS ਸਟਾਈਲਿੰਗ ਲਈ ਸਥਿਰ ਕਲਾਸ ਨਾਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ** ਅਗਲੇ ਪਾਠ ਵਿੱਚ
-- **JavaScript ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਹਰ ਪੌਦੇ ਦੇ ਚਿੱਤਰ ਨੂੰ ਵਿਲੱਖਣ IDs ਦਿੰਦਾ ਹੈ**
-- **ਚਿੱਤਰਾਂ ਦੇ ਫਾਈਲ ਪਾਥਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ `images` ਫੋਲਡਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦਾ ਹੈ**
+**ਵੇਰਵਾ:** ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਗਾਈਡ ਸੈਕਸ਼ਨ ਲਈ ਸੈਮੈਂਟਿਕ HTML ਢਾਂਚਾ ਬਣਾਓ।
 
-> 🤔 **ਇਸ ਬਾਰੇ ਸੋਚੋ**: ਧਿਆਨ ਦਿਓ ਕਿ ਸਾਰੇ ਚਿੱਤਰਾਂ ਵਿੱਚ ਵਰਤਮਾਨ ਵਿੱਚ ਇੱਕੋ ਜਿਹਾ alt ਟੈਕਸਟ "plant" ਹੈ। ਇਹ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਆਦਰਸ਼ ਨਹੀਂ ਹੈ। ਸਕ੍ਰੀਨ ਰੀਡਰ ਉ
-**ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਸੈਮੈਂਟਿਕ HTML ਸੈਕਸ਼ਨ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਮੁੱਖ ਸਿਰਲੇਖ "ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਗਾਈਡ", ਤਿੰਨ ਉਪ-ਸੈਕਸ਼ਨ "ਪਾਣੀ ਦੇਣਾ", "ਰੋਸ਼ਨੀ ਦੀਆਂ ਲੋੜਾਂ", ਅਤੇ "ਮਿੱਟੀ ਦੀ ਦੇਖਭਾਲ" ਦੇ ਸਿਰਲੇਖਾਂ ਨਾਲ ਹੋਣ, ਹਰ ਇੱਕ ਵਿੱਚ ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਦੀ ਜਾਣਕਾਰੀ ਵਾਲਾ ਇੱਕ ਪੈਰਾ ਸ਼ਾਮਲ ਹੋਵੇ। ਸਮੁੱਚੇ ਸਮੱਗਰੀ ਨੂੰ ਢਾਂਚੇਬੱਧ ਕਰਨ ਲਈ ਠੀਕ ਸੈਮੈਂਟਿਕ HTML ਟੈਗ ਜਿਵੇਂ ਕਿ `<section>`, `<h2>`, `<h3>`, ਅਤੇ `<p>` ਵਰਤੋ।
+**ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਸੈਮੈਂਟਿਕ HTML ਸੈਕਸ਼ਨ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਮੁੱਖ ਸਿਰਲੇਖ "ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਗਾਈਡ", ਤਿੰਨ ਉਪ-ਸੈਕਸ਼ਨ "ਪਾਣੀ ਦੇਣ", "ਰੋਸ਼ਨੀ ਦੀਆਂ ਲੋੜਾਂ", ਅਤੇ "ਮਿੱਟੀ ਦੀ ਦੇਖਭਾਲ" ਦੇ ਸਿਰਲੇਖਾਂ ਨਾਲ ਹੋਵੇ, ਹਰ ਇੱਕ ਵਿੱਚ ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਜਾਣਕਾਰੀ ਵਾਲਾ ਪੈਰਾ ਸ਼ਾਮਲ ਹੋਵੇ। ਸਮਰਥ HTML ਟੈਗ ਜਿਵੇਂ `<section>`, `<h2>`, `<h3>`, ਅਤੇ `<p>` ਵਰਤ ਕੇ ਸਮੱਗਰੀ ਨੂੰ ਢੰਗ ਨਾਲ ਢਾਂਚੇਬੱਧ ਕਰੋ।
 
-[Agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
+Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ [ਇਥੇ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)।
 
-## HTML ਇਤਿਹਾਸ ਚੈਲੈਂਜ ਦੀ ਖੋਜ ਕਰੋ
+## HTML ਇਤਿਹਾਸ ਚੈਲੈਂਜ
 
 **ਵੈੱਬ ਵਿਕਾਸ ਬਾਰੇ ਸਿੱਖਣਾ**
 
-HTML ਨੇ 1990 ਵਿੱਚ CERN ਵਿੱਚ Tim Berners-Lee ਦੁਆਰਾ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ ਕਾਫ਼ੀ ਤਰੱਕੀ ਕੀਤੀ ਹੈ। ਕੁਝ ਪੁਰਾਣੇ ਟੈਗ ਜਿਵੇਂ ਕਿ `<marquee>` ਹੁਣ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ ਹਨ ਕਿਉਂਕਿ ਇਹ ਆਧੁਨਿਕ ਐਕਸੈਸਬਿਲਿਟੀ ਮਿਆਰਾਂ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤਾਂ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰਦੇ।
+HTML ਨੇ 1990 ਵਿੱਚ CERN ਵਿੱਚ Tim Berners-Lee ਦੁਆਰਾ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ ਕਾਫ਼ੀ ਤਰੱਕੀ ਕੀਤੀ ਹੈ। ਕੁਝ ਪੁਰਾਣੇ ਟੈਗ ਜਿਵੇਂ `<marquee>` ਹੁਣ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ ਹਨ ਕਿਉਂਕਿ ਇਹ ਆਧੁਨਿਕ ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤਾਂ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰਦੇ।
 
 **ਇਹ ਤਜਰਬਾ ਕਰੋ:**
-1. ਅਪਣੇ `<h1>` ਸਿਰਲੇਖ ਨੂੰ ਅਸਥਾਈ ਤੌਰ 'ਤੇ `<marquee>` ਟੈਗ ਵਿੱਚ ਲਪੇਟੋ: `<marquee><h1>ਮੇਰਾ ਟੈਰੀਅਮ</h1></marquee>`
-2. ਆਪਣਾ ਪੰਨਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਸਕ੍ਰੋਲਿੰਗ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖੋ
-3. ਸੋਚੋ ਕਿ ਇਹ ਟੈਗ ਕਿਉਂ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤਾ ਗਿਆ ਸੀ (ਸੁਝਾਅ: ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਐਕਸੈਸਬਿਲਿਟੀ ਬਾਰੇ ਸੋਚੋ)
+1. ਅਸਥਾਈ ਤੌਰ 'ਤੇ ਆਪਣੇ `<h1>` ਸਿਰਲੇਖ ਨੂੰ `<marquee>` ਟੈਗ ਵਿੱਚ ਲਪੇਟੋ: `<marquee><h1>My Terrarium</h1></marquee>`
+2. ਆਪਣਾ ਪੇਜ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਸਕ੍ਰੋਲਿੰਗ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖੋ
+3. ਸੋਚੋ ਕਿ ਇਹ ਟੈਗ ਕਿਉਂ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤਾ ਗਿਆ (ਸੁਝਾਅ: ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਬਾਰੇ ਸੋਚੋ)
 4. `<marquee>` ਟੈਗ ਨੂੰ ਹਟਾਓ ਅਤੇ ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ 'ਤੇ ਵਾਪਸ ਜਾਓ
 
 **ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ:**
-- ਸਕ੍ਰੋਲਿੰਗ ਸਿਰਲੇਖ ਵਿਜ਼ੂਅਲ ਅਪੰਗਤਾ ਜਾਂ ਮੋਸ਼ਨ ਸੰਵੇਦਨਸ਼ੀਲਤਾ ਵਾਲੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ?
-- ਕਿਹੜੀਆਂ ਆਧੁਨਿਕ CSS ਤਕਨੀਕਾਂ ਇਸੇ ਜਿਹੇ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਵਧੇਰੇ ਐਕਸੈਸਬਲ ਤਰੀਕੇ ਨਾਲ ਹਾਸਲ ਕਰ ਸਕਦੀਆਂ ਹਨ?
-- ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਤੱਤਾਂ ਦੀ ਬਜਾਏ ਮੌਜੂਦਾ ਵੈੱਬ ਮਿਆਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ?
-
-[ਪੁਰਾਣੇ ਅਤੇ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ HTML ਤੱਤਾਂ](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) ਬਾਰੇ ਹੋਰ ਖੋਜ ਕਰੋ ਤਾਂ ਜੋ ਵੈੱਬ ਮਿਆਰਾਂ ਨੂੰ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਕਿਵੇਂ ਵਿਕਸਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਸਮਝ ਸਕੋ।
+- ਸਕ੍ਰੋਲਿੰਗ ਸਿਰਲੇਖ ਵਿਜੁਅਲ ਅਪੰਗਤਾ ਜਾਂ ਮੋਸ਼ਨ ਸੰਵੇਦਨਸ਼ੀਲਤਾ ਵਾਲੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ?
+- ਕਿਹੜੀਆਂ ਆਧੁਨਿਕ CSS ਤਕਨੀਕਾਂ ਇਸੇ ਤਰ੍ਹਾਂ ਦੇ ਵਿਜੁਅਲ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਜ਼ਿਆਦਾ ਪਹੁੰਚਯੋਗ ਤਰੀਕੇ ਨਾਲ ਹਾਸਲ ਕਰ ਸਕਦੀਆਂ ਹਨ?
+- ਪੁਰਾਣੇ ਤੱਤਾਂ ਦੀ ਬਜਾਏ ਮੌਜੂਦਾ ਵੈੱਬ ਮਿਆਰਾਂ ਨੂੰ ਵਰਤਣਾ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ?
 
+[ਪੁਰਾਣੇ ਅਤੇ ਡਿਪ੍ਰੀਕੇਟ HTML ਐਲਿਮੈਂਟਸ](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ਤਾਂ ਜੋ ਸਮਝ ਸਕੋ ਕਿ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਵੈੱਬ ਮਿਆਰ ਕਿਵੇਂ ਤਰੱਕੀ ਕਰਦੇ ਹਨ।
 
-## ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼
+## ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼
 
-[ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/16)
+[ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/16)
 
 ## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
 
 **HTML ਬਾਰੇ ਆਪਣਾ ਗਿਆਨ ਵਧਾਓ**
 
-HTML ਪਿਛਲੇ 30 ਸਾਲਾਂ ਤੋਂ ਵੈੱਬ ਦਾ ਅਧਾਰ ਰਿਹਾ ਹੈ, ਜੋ ਇੱਕ ਸਧਾਰਨ ਦਸਤਾਵੇਜ਼ ਮਾਰਕਅੱਪ ਭਾਸ਼ਾ ਤੋਂ ਇੰਟਰੈਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਇੱਕ ਉੱਚ-ਤਕਨੀਕੀ ਪਲੇਟਫਾਰਮ ਵਿੱਚ ਵਿਕਸਿਤ ਹੋਇਆ ਹੈ। ਇਸ ਵਿਕਾਸ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਆਧੁਨਿਕ ਵੈੱਬ ਮਿਆਰਾਂ ਦੀ ਕਦਰ ਕਰਨ ਅਤੇ ਵਧੀਆ ਵਿਕਾਸ ਫੈਸਲੇ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ।
+HTML ਪਿਛਲੇ 30 ਸਾਲਾਂ ਤੋਂ ਵੈੱਬ ਦਾ ਅਧਾਰ ਰਿਹਾ ਹੈ, ਜੋ ਇੱਕ ਸਧਾਰਨ ਦਸਤਾਵੇਜ਼ ਮਾਰਕਅੱਪ ਭਾਸ਼ਾ ਤੋਂ ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਇੱਕ ਸੁਧਾਰਤ ਪਲੇਟਫਾਰਮ ਵਿੱਚ ਤਰੱਕੀ ਕਰ ਰਿਹਾ ਹੈ। ਇਸ ਤਰੱਕੀ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਆਧੁਨਿਕ ਵੈੱਬ ਮਿਆਰਾਂ ਦੀ ਕਦਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ ਅਤੇ ਵਧੀਆ ਵਿਕਾਸ ਫੈਸਲੇ ਲੈਣ ਵਿੱਚ ਸਹਾਇਤਾ ਮਿਲਦੀ ਹੈ।
 
 **ਸਿਫਾਰਸ਼ੀ ਸਿੱਖਣ ਦੇ ਰਾਹ:**
 
-1. **HTML ਇਤਿਹਾਸ ਅਤੇ ਵਿਕਾਸ**
+1. **HTML ਇਤਿਹਾਸ ਅਤੇ ਤਰੱਕੀ**
    - HTML 1.0 ਤੋਂ HTML5 ਤੱਕ ਟਾਈਮਲਾਈਨ ਦੀ ਖੋਜ ਕਰੋ
-   - ਕਿਉਂ ਕੁਝ ਟੈਗ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ (ਐਕਸੈਸਬਿਲਿਟੀ, ਮੋਬਾਈਲ-ਫ੍ਰੈਂਡਲੀਨੈਸ, ਮੇਂਟੇਨਬਿਲਿਟੀ)
+   - ਪਤਾ ਕਰੋ ਕਿ ਕੁਝ ਟੈਗ ਕਿਉਂ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ (ਪਹੁੰਚਯੋਗਤਾ, ਮੋਬਾਈਲ-ਫ੍ਰੈਂਡਲੀਨੈਸ, ਰੱਖ-ਰਖਾਅ)
    - ਉਭਰ ਰਹੀਆਂ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਪ੍ਰਸਤਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰੋ
 
-2. **ਸੈਮੈਂਟਿਕ HTML ਦੀ ਗਹਿਰਾਈ ਵਿੱਚ ਖੋਜ**
-   - [HTML5 ਸੈਮੈਂਟਿਕ ਤੱਤਾਂ](https://developer.mozilla.org/docs/Web/HTML/Element) ਦੀ ਪੂਰੀ ਸੂਚੀ ਦਾ ਅਧਿਐਨ ਕਰੋ
-   - ਇਹ ਪਛਾਣਣ ਦੀ ਅਭਿਆਸ ਕਰੋ ਕਿ `<article>`, `<section>`, `<aside>`, ਅਤੇ `<main>` ਕਦੋਂ ਵਰਤਣਾ ਹੈ
-   - ਵਧੇਰੇ ਐਕਸੈਸਬਿਲਿਟੀ ਲਈ ARIA ਗੁਣਾਂ ਬਾਰੇ ਸਿੱਖੋ
+2. **ਸੈਮੈਂਟਿਕ HTML ਡੀਪ ਡਾਈਵ**
+   - [HTML5 ਸੈਮੈਂਟਿਕ ਐਲਿਮੈਂਟਸ](https://developer.mozilla.org/docs/Web/HTML/Element) ਦੀ ਪੂਰੀ ਸੂਚੀ ਦਾ ਅਧਿਐਨ ਕਰੋ
+   - ਪਛਾਣ ਕਰਨ ਦੀ ਅਭਿਆਸ ਕਰੋ ਕਿ `<article>`, `<section>`, `<aside>`, ਅਤੇ `<main>` ਕਦੋਂ ਵਰਤਣਾ ਹੈ
+   - ਵਧੇਰੇ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ARIA ਗੁਣਾਂ ਬਾਰੇ ਸਿੱਖੋ
 
 3. **ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ**
-   - [ਰਿਸਪਾਂਸਿਵ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣਾ](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn 'ਤੇ ਖੋਜੋ
+   - [ਰਿਸਪਾਂਸਿਵ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣ](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) ਬਾਰੇ Microsoft Learn 'ਤੇ ਖੋਜ ਕਰੋ
    - ਸਮਝੋ ਕਿ HTML CSS ਅਤੇ JavaScript ਨਾਲ ਕਿਵੇਂ ਇੰਟਿਗ੍ਰੇਟ ਹੁੰਦਾ ਹੈ
-   - ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ SEO ਬਿਹਤਰ ਅਭਿਆਸਾਂ ਬਾਰੇ ਸਿੱਖੋ
+   - ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ SEO ਬਿਹਤਰ ਤਰੀਕਿਆਂ ਬਾਰੇ ਸਿੱਖੋ
 
 **ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ:**
-- ਤੁਹਾਨੂੰ ਕਿਹੜੇ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ HTML ਟੈਗ ਮਿਲੇ, ਅਤੇ ਉਹ ਕਿਉਂ ਹਟਾਏ ਗਏ?
-- ਭਵਿੱਖ ਦੇ ਸੰਸਕਰਣਾਂ ਲਈ ਕਿਹੜੀਆਂ ਨਵੀਆਂ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਸਤਾਵਿਤ ਕੀਤੀਆਂ ਜਾ ਰਹੀਆਂ ਹਨ?
-- ਸੈਮੈਂਟਿਕ HTML ਵੈੱਬ ਐਕਸੈਸਬਿਲਿਟੀ ਅਤੇ SEO ਵਿੱਚ ਕਿਵੇਂ ਯੋਗਦਾਨ ਪਾਉਂਦਾ ਹੈ?
+- ਤੁਸੀਂ ਕਿਹੜੇ ਡਿਪ੍ਰੀਕੇਟ HTML ਟੈਗ ਪਤਾ ਲਗਾਏ, ਅਤੇ ਉਹ ਕਿਉਂ ਹਟਾਏ ਗਏ?
+- HTML ਦੇ ਭਵਿੱਖ ਦੇ ਵਰਜਨਾਂ ਲਈ ਕਿਹੜੀਆਂ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਸਤਾਵਿਤ ਕੀਤੀਆਂ ਜਾ ਰਹੀਆਂ ਹਨ?
+- ਸੈਮੈਂਟਿਕ HTML ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ SEO ਵਿੱਚ ਕਿਵੇਂ ਯੋਗਦਾਨ ਪਾਉਂਦਾ ਹੈ?
+
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] DevTools (F12) ਖੋਲ੍ਹੋ ਅਤੇ ਆਪਣੇ ਮਨਪਸੰਦ ਵੈੱਬਸਾਈਟ ਦੇ HTML ਢਾਂਚੇ ਦੀ ਜਾਂਚ ਕਰੋ
+- [ ] ਬੁਨਿਆਦੀ ਟੈਗਾਂ ਨਾਲ ਇੱਕ ਸਧਾਰਨ HTML ਫਾਈਲ ਬਣਾਓ: `<h1>`, `<p>`, ਅਤੇ `<img>`
+- [ ] W3C HTML Validator ਆਨਲਾਈਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ HTML ਦੀ ਵੈਧਤਾ ਦੀ ਜਾਂਚ ਕਰੋ
+- [ ] `<!-- comment -->` ਵਰਤ ਕੇ ਆਪਣੀ HTML ਵਿੱਚ ਇੱਕ ਟਿੱਪਣੀ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਸੈਮੈਂਟਿਕ HTML ਸੰਕਲਪਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ
+- [ ] ਸਹੀ HTML ਢਾਂਚੇ ਨਾਲ ਆਪਣੇ ਬਾਰੇ ਇੱਕ ਸਧਾਰਨ ਵੈੱਬਪੇਜ ਬਣਾਓ
+- [ ] ਵੱਖ-ਵੱਖ ਸਿਰਲੇਖ ਪੱਧਰ ਅਤੇ ਟੈਕਸਟ ਫਾਰਮੈਟਿੰਗ ਟੈਗਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ
+- [ ] ਮਲਟੀਮੀਡੀਆ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦਾ ਅਭਿਆਸ ਕਰਨ ਲਈ ਚਿੱਤਰ ਅਤੇ ਲਿੰਕ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] HTML5 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਾਰੇ ਖੋਜ ਕਰੋ ਜੋ ਤੁਸੀਂ ਅਜੇ ਤੱਕ ਨਹੀਂ ਅਜ਼ਮਾਈਆਂ ਹਨ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫਤਾਵਾਰ HTML ਯਾਤਰਾ**
+- [ ] ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ ਨਾਲ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰੋ
+- [ ] ARIA ਲੇਬਲ ਅਤੇ ਰੋਲ ਵਰਤ ਕੇ ਇੱਕ ਪਹੁੰਚਯੋਗ ਵੈੱਬਪੇਜ ਬਣਾਓ
+- [ ] ਵੱਖ-ਵੱਖ ਇਨਪੁਟ ਕਿਸਮਾਂ ਨਾਲ ਫਾਰਮ ਬਣਾਉਣ ਦਾ ਅਭਿਆਸ ਕਰੋ
+- [ ] HTML5 APIs ਜਿਵੇਂ localStorage ਜਾਂ geolocation ਦੀ ਖੋਜ ਕਰੋ
+- [ ] ਰਿਸਪਾਂਸਿਵ HTML ਪੈਟਰਨ ਅਤੇ ਮੋਬਾਈਲ-ਪਹਿਲੇ ਡਿਜ਼ਾਈਨ ਦੀ ਖੋਜ ਕਰੋ
+- [ ] ਹੋਰ ਡਿਵੈਲਪਰਾਂ ਦੇ HTML ਕੋਡ ਦੀ ਸਮੀਖਿਆ ਕਰੋ ਅਤੇ ਵਧੀਆ ਤਰੀਕਿਆਂ ਦੀ ਪਛਾਣ ਕਰੋ
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨਾਵਾਰ ਵੈੱਬ ਫਾਊਂਡੇਸ਼ਨ**
+- [ ] ਆਪਣੀ HTML ਮਾਹਰਤਾ ਦਿਖਾਉਣ ਵਾਲੀ ਪੋਰਟਫੋਲਿਓ ਵੈੱਬਸਾਈਟ ਬਣਾਓ
+- [ ] Handlebars ਵਰਗੇ ਫਰੇਮਵਰਕ ਨਾਲ HTML ਟੈਂਪਲੇਟਿੰਗ ਸਿੱਖੋ
+- [ ] HTML ਦਸਤਾਵੇਜ਼ੀकरण ਨੂੰ ਸੁਧਾਰ ਕੇ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ
+- [ ] ਕਸਟਮ ਐਲਿਮੈਂਟਸ ਵਰਗੇ ਉੱਚ HTML ਸੰਕਲਪਾਂ ਵਿੱਚ ਮਾਹਰ ਬਣੋ
+- [ ] CSS ਫਰੇਮਵਰਕ ਅਤੇ JavaScript ਲਾਇਬ੍ਰੇਰੀਜ਼ ਨਾਲ HTML ਨੂੰ ਇੰਟਿਗ੍ਰੇਟ ਕਰੋ
+- [ ] HTML ਬੁਨਿਆਦੀਆਂ ਸਿੱਖਣ ਵਾਲਿਆਂ ਨੂੰ ਮਦਦ ਦਿਓ
+
+## 🎯 ਤੁਹਾਡਾ HTML ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
+
+```mermaid
+timeline
+    title HTML Learning Progression
+    
+    section Foundation (5 minutes)
+        Document Structure: DOCTYPE declaration
+                         : HTML root element
+                         : Head vs Body understanding
+        
+    section Metadata (10 minutes)
+        Essential Meta Tags: Character encoding
+                           : Viewport configuration
+                           : Browser compatibility
+        
+    section Content Creation (15 minutes)
+        Image Integration: Proper file paths
+                         : Alt text importance
+                         : Self-closing tags
+        
+    section Layout Organization (20 minutes)
+        Container Strategy: Div elements for structure
+                          : Class and ID naming
+                          : Nested element hierarchy
+        
+    section Semantic Mastery (30 minutes)
+        Meaningful Markup: Heading hierarchy
+                         : Screen reader navigation
+                         : Accessibility best practices
+        
+    section Advanced Concepts (1 hour)
+        HTML5 Features: Modern semantic elements
+                      : ARIA attributes
+                      : Performance considerations
+        
+    section Professional Skills (1 week)
+        Code Organization: File structure patterns
+                         : Maintainable markup
+                         : Team collaboration
+        
+    section Expert Level (1 month)
+        Modern Web Standards: Progressive enhancement
+                            : Cross-browser compatibility
+                            : HTML specification updates
+```
+
+### 🛠️ ਤੁਹਾਡਾ HTML ਟੂਲਕਿਟ ਸਾਰ
+
+ਇਹ ਪਾਠ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਹੈ:
+- **ਦਸਤਾਵੇਜ਼ ਢਾਂਚਾ**: ਸਹੀ DOCTYPE ਨਾਲ ਪੂਰੀ HTML5 ਬੁਨਿਆਦ
+- **ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ**: ਅਰਥਪੂਰਨ ਟੈਗ ਜੋ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ SEO ਨੂੰ ਵਧਾਉਂਦੇ ਹਨ
+- **ਚਿੱਤਰ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਸਹੀ ਫਾਈਲ ਸੰਗਠਨ ਅਤੇ alt ਟੈਕਸਟ ਅਭਿਆਸ
+- **ਲੇਆਉਟ ਕੰਟੇਨਰ**: ਵਰਣਨਾਤਮਕ ਕਲਾਸ ਨਾਮਾਂ ਨਾਲ divs ਦੀ ਰਣਨੀਤਿਕ ਵਰਤੋਂ
+- **ਪਹੁੰਚਯੋਗਤਾ ਜਾਗਰੂਕਤਾ**: ਸਕ੍ਰੀਨ ਰੀਡਰ ਨੈਵੀਗੇਸ਼ਨ ਦੀ ਸਮਝ
+- **ਆਧੁਨਿਕ ਮਿਆਰ**: ਮੌਜੂਦਾ HTML5 ਅਭਿਆਸ ਅਤੇ ਡਿਪ੍ਰੀਕੇਟ ਟੈਗਾਂ ਦਾ ਗਿਆਨ
+- **ਪ੍ਰੋਜੈਕਟ ਬੁਨਿਆਦ**: CSS ਸਟਾਈਲਿੰਗ ਅਤੇ JavaScript ਇੰਟਰਐਕਟਿਵਿਟੀ ਲਈ ਮਜ਼ਬੂਤ ਅਧਾਰ
 
+**ਅਗਲੇ ਕਦਮ**: ਤੁਹਾਡਾ HTML ਢਾਂਚਾ CSS ਸਟਾਈਲਿੰਗ ਲਈ ਤਿਆਰ ਹੈ! ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਸੈਮੈਂਟਿਕ ਬੁਨਿਆਦ ਅਗਲੇ ਪਾਠ ਨੂੰ ਸਮਝਣ ਲਈ ਬਹੁਤ ਆਸਾਨ ਬਣਾਏਗੀ।
 
 ## ਅਸਾਈਨਮੈਂਟ
 
@@ -286,5 +381,5 @@ HTML ਪਿਛਲੇ 30 ਸਾਲਾਂ ਤੋਂ ਵੈੱਬ ਦਾ ਅਧਾ
 
 ---
 
-**ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤੀ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/3-terrarium/2-intro-to-css/README.md b/translations/pa/3-terrarium/2-intro-to-css/README.md
index 003a663052..00681bdaf2 100644
--- a/translations/pa/3-terrarium/2-intro-to-css/README.md
+++ b/translations/pa/3-terrarium/2-intro-to-css/README.md
@@ -1,46 +1,102 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "92c4431eac70670b0450b02c1d11279a",
-  "translation_date": "2025-10-22T17:49:03+00:00",
+  "original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
+  "translation_date": "2025-11-03T16:32:59+00:00",
   "source_file": "3-terrarium/2-intro-to-css/README.md",
   "language_code": "pa"
 }
 -->
-# ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 2: CSS ਦਾ ਪਰਿਚਯ
-
-![CSS ਦਾ ਪਰਿਚਯ](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.pa.png)
-> ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਵੱਲੋਂ
-
-ਯਾਦ ਹੈ ਕਿ ਤੁਹਾਡਾ HTML ਟੈਰੀਰੀਅਮ ਕਿੰਨਾ ਸਧਾਰਨ ਲੱਗਦਾ ਸੀ? CSS ਉਹ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਉਸ ਸਧਾਰਨ ਬਣਤਰ ਨੂੰ ਕੁਝ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਵਿੱਚ ਬਦਲਦੇ ਹਾਂ।
-
-ਜੇ HTML ਨੂੰ ਇੱਕ ਘਰ ਦੇ ਫਰੇਮ ਦੀ ਤਰ੍ਹਾਂ ਸਮਝਿਆ ਜਾਵੇ, ਤਾਂ CSS ਉਹ ਸਭ ਕੁਝ ਹੈ ਜੋ ਇਸਨੂੰ ਘਰ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ - ਪੇਂਟ ਦੇ ਰੰਗ, ਫਰਨੀਚਰ ਦੀ ਸਜਾਵਟ, ਰੌਸ਼ਨੀ, ਅਤੇ ਕਿਵੇਂ ਕਮਰੇ ਇਕੱਠੇ ਵਗਦੇ ਹਨ। ਸੋਚੋ ਕਿ ਕਿਵੇਂ ਵਰਸਾਈਲਜ਼ ਦਾ ਪੈਲੇਸ ਇੱਕ ਸਧਾਰਨ ਸ਼ਿਕਾਰ ਲੌਜ ਵਜੋਂ ਸ਼ੁਰੂ ਹੋਇਆ, ਪਰ ਸਜਾਵਟ ਅਤੇ ਲੇਆਉਟ 'ਤੇ ਧਿਆਨ ਦੇ ਨਾਲ ਇਸਨੂੰ ਦੁਨੀਆ ਦੀਆਂ ਸਭ ਤੋਂ ਸ਼ਾਨਦਾਰ ਇਮਾਰਤਾਂ ਵਿੱਚੋਂ ਇੱਕ ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ ਗਿਆ।
-
-ਅੱਜ, ਅਸੀਂ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਕਾਰਗਰ ਤੋਂ ਪਾਲਿਸ਼ਡ ਵਿੱਚ ਬਦਲਾਂਗੇ। ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਤੱਤਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕਿਵੇਂ ਸਥਿਤ ਕਰਨਾ ਹੈ, ਲੇਆਉਟਸ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ ਲਈ ਕਿਵੇਂ ਜਵਾਬ ਦੇਣ ਲਈ ਬਣਾਉਣਾ ਹੈ, ਅਤੇ ਦ੍ਰਿਸ਼ਟੀਗਤ ਆਕਰਸ਼ਣ ਬਣਾਉਣਾ ਹੈ ਜੋ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਦਿਲਚਸਪ ਬਣਾਉਂਦਾ ਹੈ।
+# ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 2: CSS ਦਾ ਪਰਚੇਅ
+
+```mermaid
+journey
+    title Your CSS Styling Journey
+    section Foundation
+      Link CSS file: 3: Student
+      Understand cascade: 4: Student
+      Learn inheritance: 4: Student
+    section Selectors
+      Element targeting: 4: Student
+      Class patterns: 5: Student
+      ID specificity: 5: Student
+    section Layout
+      Position elements: 4: Student
+      Create containers: 5: Student
+      Build terrarium: 5: Student
+    section Polish
+      Add visual effects: 5: Student
+      Responsive design: 5: Student
+      Glass reflections: 5: Student
+```
 
-ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਕਿਵੇਂ ਰਣਨੀਤਿਕ CSS ਸਟਾਈਲਿੰਗ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਨਾਟਕੀ ਤੌਰ 'ਤੇ ਸੁਧਾਰ ਸਕਦੀ ਹੈ। ਆਓ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਕੁਝ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੀਏ।
+![CSS ਦਾ ਪਰਚੇਅ](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.pa.png)
+> ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ
+
+ਤੁਹਾਨੂੰ ਯਾਦ ਹੈ ਕਿ ਤੁਹਾਡਾ HTML ਟੈਰੀਰੀਅਮ ਕਿੰਨਾ ਸਧਾਰਨ ਲੱਗ ਰਿਹਾ ਸੀ? CSS ਦੇ ਨਾਲ ਅਸੀਂ ਉਸ ਸਧਾਰਨ ਬਣਤਰ ਨੂੰ ਕੁਝ ਵਿਜੁਅਲ ਅਪੀਲ ਦੇਣ ਵਾਲੇ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹਾਂ।
+
+ਜੇ HTML ਨੂੰ ਇੱਕ ਘਰ ਦੀ ਫਰੇਮ ਬਣਾਉਣ ਵਾਂਗ ਸਮਝਿਆ ਜਾਵੇ, ਤਾਂ CSS ਉਹ ਸਭ ਕੁਝ ਹੈ ਜੋ ਉਸਨੂੰ ਘਰ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਾਉਂਦਾ ਹੈ - ਰੰਗ, ਫਰਨੀਚਰ ਦੀ ਸਜਾਵਟ, ਰੌਸ਼ਨੀ, ਅਤੇ ਕਮਰੇ ਕਿਵੇਂ ਇੱਕ ਦੂਜੇ ਨਾਲ ਜੁੜਦੇ ਹਨ। ਸੋਚੋ ਕਿ ਵਰਸਾਈਲਸ ਦਾ ਪੈਲੇਸ ਇੱਕ ਸਧਾਰਨ ਸ਼ਿਕਾਰ ਲੌਜ ਵਜੋਂ ਸ਼ੁਰੂ ਹੋਇਆ ਸੀ, ਪਰ ਸਜਾਵਟ ਅਤੇ ਲੇਆਉਟ 'ਤੇ ਧਿਆਨ ਦੇਣ ਨਾਲ ਇਹ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਸ਼ਾਨਦਾਰ ਇਮਾਰਤਾਂ ਵਿੱਚੋਂ ਇੱਕ ਬਣ ਗਿਆ।
+
+ਅੱਜ, ਅਸੀਂ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਕਾਰਗਰ ਤੋਂ ਪਾਲਿਸ਼ਡ ਵਿੱਚ ਬਦਲਾਂਗੇ। ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਤੱਤਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕਿਵੇਂ ਪੋਜ਼ੀਸ਼ਨ ਕਰਨਾ ਹੈ, ਲੇਆਉਟਸ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ ਲਈ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਬਣਾਉਣਾ ਹੈ, ਅਤੇ ਉਹ ਵਿਜੁਅਲ ਅਪੀਲ ਬਣਾਉਣਾ ਹੈ ਜੋ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਦਿਲਚਸਪ ਬਣਾਉਂਦਾ ਹੈ।
+
+ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਰਣਨੀਤਿਕ CSS ਸਟਾਈਲਿੰਗ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਕਿੰਨਾ ਬਹੁਤਰੀਨ ਬਣਾ ਸਕਦੀ ਹੈ। ਚਲੋ, ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਕੁਝ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੀਏ।
+
+```mermaid
+mindmap
+  root((CSS Fundamentals))
+    Cascade
+      Specificity Rules
+      Inheritance
+      Priority Order
+      Conflict Resolution
+    Selectors
+      Element Tags
+      Classes (.class)
+      IDs (#id)
+      Combinators
+    Box Model
+      Margin
+      Border
+      Padding
+      Content
+    Layout
+      Positioning
+      Display Types
+      Flexbox
+      Grid
+    Visual Effects
+      Colors
+      Shadows
+      Transitions
+      Animations
+    Responsive Design
+      Media Queries
+      Flexible Units
+      Viewport Meta
+      Mobile First
+```
 
-## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
+## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼
 
-[ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/17)
+[ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼](https://ff-quizzes.netlify.app/web/quiz/17)
 
-## CSS ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨਾ
+## CSS ਨਾਲ ਸ਼ੁਰੂਆਤ
 
-CSS ਨੂੰ ਅਕਸਰ ਸਿਰਫ "ਚੀਜ਼ਾਂ ਨੂੰ ਸੁੰਦਰ ਬਣਾਉਣਾ" ਸਮਝਿਆ ਜਾਂਦਾ ਹੈ, ਪਰ ਇਹ ਇਸ ਤੋਂ ਕਾਫ਼ੀ ਵੱਡੇ ਉਦੇਸ਼ ਦੀ ਸੇਵਾ ਕਰਦਾ ਹੈ। CSS ਇੱਕ ਫਿਲਮ ਦੇ ਡਾਇਰੈਕਟਰ ਵਾਂਗ ਹੈ - ਤੁਸੀਂ ਸਿਰਫ ਇਹ ਨਹੀਂ ਨਿਰਧਾਰਤ ਕਰਦੇ ਕਿ ਸਭ ਕੁਝ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਵੇਗਾ, ਪਰ ਇਹ ਵੀ ਕਿ ਇਹ ਕਿਵੇਂ ਹਿਲਦਾ ਹੈ, ਪਰਸਪਰ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਦਾ ਹੈ, ਅਤੇ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਵਿੱਚ ਕਿਵੇਂ ਅਨੁਕੂਲ ਹੁੰਦਾ ਹੈ।
+CSS ਨੂੰ ਅਕਸਰ "ਚੀਜ਼ਾਂ ਨੂੰ ਸੁੰਦਰ ਬਣਾਉਣਾ" ਸਮਝਿਆ ਜਾਂਦਾ ਹੈ, ਪਰ ਇਹ ਇਸ ਤੋਂ ਕਾਫ਼ੀ ਵੱਡਾ ਮਕਸਦ ਪੂਰਾ ਕਰਦਾ ਹੈ। CSS ਇੱਕ ਫਿਲਮ ਦੇ ਡਾਇਰੈਕਟਰ ਵਾਂਗ ਹੈ - ਤੁਸੀਂ ਸਿਰਫ ਇਹ ਨਹੀਂ ਨਿਰਧਾਰਤ ਕਰਦੇ ਕਿ ਸਭ ਕੁਝ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਵੇਗਾ, ਪਰ ਇਹ ਵੀ ਕਿ ਇਹ ਕਿਵੇਂ ਹਿਲੇਗਾ, ਇੰਟਰੈਕਸ਼ਨ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰੇਗਾ, ਅਤੇ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਵਿੱਚ ਕਿਵੇਂ ਅਨੁਕੂਲ ਹੋਵੇਗਾ।
 
-ਆਧੁਨਿਕ CSS ਬਹੁਤ ਹੀ ਸਮਰੱਥ ਹੈ। ਤੁਸੀਂ ਐਸਾ ਕੋਡ ਲਿਖ ਸਕਦੇ ਹੋ ਜੋ ਫੋਨ, ਟੈਬਲੇਟ, ਅਤੇ ਡੈਸਕਟਾਪ ਕੰਪਿਊਟਰਾਂ ਲਈ ਲੇਆਉਟਸ ਨੂੰ ਆਪਣੇ ਆਪ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਸਮਰਥਨ ਯੋਗ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਕੋਡ ਲਿਖ ਸਕਦੇ ਹੋ ਜੋ ਵਰਤੋਂਕਾਰਾਂ ਦਾ ਧਿਆਨ ਜਿੱਥੇ ਜ਼ਰੂਰੀ ਹੋਵੇ ਉੱਥੇ ਖਿੱਚਦਾ ਹੈ। ਜਦੋਂ ਸਭ ਕੁਝ ਇਕੱਠੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਨਤੀਜੇ ਕਾਫ਼ੀ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੋ ਸਕਦੇ ਹਨ।
+ਆਧੁਨਿਕ CSS ਬਹੁਤ ਹੀ ਸਮਰੱਥ ਹੈ। ਤੁਸੀਂ ਐਸਾ ਕੋਡ ਲਿਖ ਸਕਦੇ ਹੋ ਜੋ ਫੋਨ, ਟੈਬਲੇਟ ਅਤੇ ਡੈਸਕਟਾਪ ਕੰਪਿਊਟਰਾਂ ਲਈ ਲੇਆਉਟਸ ਨੂੰ ਆਪਣੇ ਆਪ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਸਮਰਥ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਕੋਡ ਲਿਖ ਸਕਦੇ ਹੋ ਜੋ ਜਰੂਰਤ ਪੜਨ 'ਤੇ ਯੂਜ਼ਰ ਦਾ ਧਿਆਨ ਖਿੱਚਦਾ ਹੈ। ਜਦੋਂ ਸਭ ਕੁਝ ਇੱਕਠੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਨਤੀਜੇ ਕਾਫ਼ੀ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੋ ਸਕਦੇ ਹਨ।
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: CSS ਨਵੇਂ ਫੀਚਰਾਂ ਅਤੇ ਸਮਰੱਥਾਵਾਂ ਨਾਲ ਲਗਾਤਾਰ ਵਿਕਸਤ ਹੋ ਰਿਹਾ ਹੈ। ਹਮੇਸ਼ਾ [CanIUse.com](https://caniuse.com) 'ਤੇ ਜਾਂਕੇ ਨਵੇਂ CSS ਫੀਚਰਾਂ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ।
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: CSS ਨਿਰੰਤਰ ਨਵੇਂ ਫੀਚਰਾਂ ਅਤੇ ਸਮਰੱਥਾਵਾਂ ਨਾਲ ਵਿਕਸਤ ਹੋ ਰਿਹਾ ਹੈ। ਉਨ੍ਹਾਂ ਨੂੰ ਪ੍ਰੋਡਕਸ਼ਨ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਵਰਤਣ ਤੋਂ ਪਹਿਲਾਂ ਨਵੇਂ CSS ਫੀਚਰਾਂ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਹਮੇਸ਼ਾ [CanIUse.com](https://caniuse.com) ਦੀ ਜਾਂਚ ਕਰੋ।
 
 **ਇਸ ਪਾਠ ਵਿੱਚ ਅਸੀਂ ਇਹ ਹਾਸਲ ਕਰਾਂਗੇ:**
-- **ਬਣਾਉਣਾ**: ਆਧੁਨਿਕ CSS ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਲਈ ਪੂਰੀ ਦ੍ਰਿਸ਼ਟੀਗਤ ਡਿਜ਼ਾਈਨ
-- **ਖੋਜ ਕਰਨਾ**: ਮੁੱਢਲੀ ਧਾਰਨਾਵਾਂ ਜਿਵੇਂ ਕਿ ਕੈਸਕੇਡ, ਵਿਰਾਸਤ, ਅਤੇ CSS ਚੁਣਨ ਵਾਲੇ
-- **ਲਾਗੂ ਕਰਨਾ**: ਜਵਾਬਦੇਹ ਸਥਿਤੀ ਅਤੇ ਲੇਆਉਟ ਰਣਨੀਤੀਆਂ
-- **ਨਿਰਮਾਣ ਕਰਨਾ**: CSS ਸ਼ੇਪ ਅਤੇ ਸਟਾਈਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੈਰੀਰੀਅਮ ਕੰਟੇਨਰ
+- **ਤਿਆਰ ਕਰਨਾ**: ਆਧੁਨਿਕ CSS ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਲਈ ਪੂਰੀ ਵਿਜੁਅਲ ਡਿਜ਼ਾਈਨ
+- **ਖੋਜ ਕਰਨਾ**: ਮੁੱਢਲੇ ਸੰਕਲਪ ਜਿਵੇਂ ਕਿ ਕੈਸਕੇਡ, ਵਿਰਾਸਤ, ਅਤੇ CSS ਚੁਣਨ ਵਾਲੇ
+- **ਲਾਗੂ ਕਰਨਾ**: ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਲੇਆਉਟ ਰਣਨੀਤੀਆਂ
+- **ਨਿਰਮਾਣ ਕਰਨਾ**: CSS ਸ਼ੇਪਸ ਅਤੇ ਸਟਾਈਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੈਰੀਰੀਅਮ ਕੰਟੇਨਰ
 
-### ਪੂਰਵ-ਸ਼ਰਤ
+### ਪੂਰਵ ਸ਼ਰਤ
 
-ਤੁਹਾਨੂੰ ਪਿਛਲੇ ਪਾਠ ਤੋਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਲਈ HTML ਬਣਤਰ ਪੂਰੀ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
+ਤੁਹਾਨੂੰ ਪਿਛਲੇ ਪਾਠ ਤੋਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਲਈ HTML ਬਣਤਰ ਪੂਰੀ ਕਰ ਲੈਣੀ ਚਾਹੀਦੀ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
 
 > 📺 **ਵੀਡੀਓ ਸਰੋਤ**: ਇਸ ਮਦਦਗਾਰ ਵੀਡੀਓ ਵਾਕਥਰੂ ਨੂੰ ਦੇਖੋ
 >
@@ -57,28 +113,28 @@ CSS ਨੂੰ ਅਕਸਰ ਸਿਰਫ "ਚੀਜ਼ਾਂ ਨੂੰ ਸੁੰ
 ```
 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਬਣਾਉਣਾ**: ਤੁਹਾਡੇ HTML ਅਤੇ CSS ਫਾਈਲਾਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਕਨੈਕਸ਼ਨ
-- **ਦੱਸਣਾ**: ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ `style.css` ਤੋਂ ਸਟਾਈਲ ਲੋਡ ਅਤੇ ਲਾਗੂ ਕਰਨ ਲਈ
-- **ਵਰਤਣਾ**: `rel="stylesheet"` ਗੁਣ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕਿ ਇਹ CSS ਫਾਈਲ ਹੈ
-- **ਹਵਾਲਾ ਦੇਣਾ**: `href="./style.css"` ਨਾਲ ਫਾਈਲ ਪਾਥ
+- **ਕਨੈਕਸ਼ਨ ਬਣਾਉਣਾ**: ਤੁਹਾਡੇ HTML ਅਤੇ CSS ਫਾਈਲਾਂ ਦੇ ਵਿਚਕਾਰ
+- **ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦੱਸਣਾ**: `style.css` ਤੋਂ ਸਟਾਈਲ ਲੋਡ ਅਤੇ ਲਾਗੂ ਕਰਨ ਲਈ
+- **ਵਰਤਣਾ**: `rel="stylesheet"` ਐਟ੍ਰਿਬਿਊਟ ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਇਹ CSS ਫਾਈਲ ਹੈ
+- **ਸੰਬੰਧਿਤ ਕਰਨਾ**: ਫਾਈਲ ਪਾਥ `href="./style.css"` ਨਾਲ
 
-## CSS ਕੈਸਕੇਡ ਦੀ ਸਮਝ
+## CSS ਕੈਸਕੇਡ ਨੂੰ ਸਮਝਣਾ
 
-ਤੁਹਾਨੂੰ ਕਦੇ ਸੋਚਿਆ ਕਿ CSS ਨੂੰ "Cascading" Style Sheets ਕਿਉਂ ਕਿਹਾ ਜਾਂਦਾ ਹੈ? ਸਟਾਈਲ ਪਾਣੀ ਦੇ ਝਰਨੇ ਵਾਂਗ ਹੇਠਾਂ ਵਗਦੇ ਹਨ, ਅਤੇ ਕਈ ਵਾਰ ਉਹ ਇੱਕ-ਦੂਜੇ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹਨ।
+ਤੁਹਾਨੂੰ ਕਦੇ ਸੋਚਿਆ ਕਿ CSS ਨੂੰ "Cascading" Style Sheets ਕਿਉਂ ਕਿਹਾ ਜਾਂਦਾ ਹੈ? ਸਟਾਈਲ ਪਾਣੀ ਦੇ ਝਰਨੇ ਵਾਂਗ ਹੇਠਾਂ ਵਗਦੇ ਹਨ, ਅਤੇ ਕਈ ਵਾਰ ਇਹ ਇੱਕ ਦੂਜੇ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹਨ।
 
-ਸੋਚੋ ਕਿ ਫੌਜੀ ਕਮਾਂਡ ਸਟ੍ਰਕਚਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ - ਇੱਕ ਜਨਰਲ ਆਰਡਰ ਕਹਿ ਸਕਦਾ ਹੈ "ਸਾਰੇ ਸਿਪਾਹੀ ਹਰੇ ਕੱਪੜੇ ਪਹਿਨੋ," ਪਰ ਤੁਹਾਡੇ ਯੂਨਿਟ ਲਈ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਆਰਡਰ ਕਹਿ ਸਕਦਾ ਹੈ "ਸਮਾਰੋਹ ਲਈ ਡ੍ਰੈਸ ਬਲੂਜ਼ ਪਹਿਨੋ।" ਜ਼ਿਆਦਾ ਵਿਸ਼ੇਸ਼ ਨਿਰਦੇਸ਼ ਪ੍ਰਾਥਮਿਕਤਾ ਲੈਂਦਾ ਹੈ। CSS ਇਸੇ ਤਰ੍ਹਾਂ ਦੇ ਤਰਕ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਸ ਹਾਇਰਾਰਕੀ ਨੂੰ ਸਮਝਣਾ ਡੀਬੱਗਿੰਗ ਨੂੰ ਕਾਫ਼ੀ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।
+ਸੋਚੋ ਕਿ ਫੌਜੀ ਕਮਾਂਡ ਬਣਤਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ - ਇੱਕ ਜਨਰਲ ਆਰਡਰ ਕਹਿ ਸਕਦਾ ਹੈ "ਸਾਰੇ ਸਿਪਾਹੀ ਹਰਾ ਪਹਿਨੋ," ਪਰ ਤੁਹਾਡੇ ਯੂਨਿਟ ਲਈ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਆਰਡਰ ਕਹਿ ਸਕਦਾ ਹੈ "ਸਮਾਰੋਹ ਲਈ ਡ੍ਰੈਸ ਬਲੂਜ਼ ਪਹਿਨੋ।" ਜ਼ਿਆਦਾ ਵਿਸ਼ੇਸ਼ ਨਿਰਦੇਸ਼ ਪ੍ਰਾਥਮਿਕਤਾ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। CSS ਇਸੇ ਤਰ੍ਹਾਂ ਦੀ ਤਰਕ ਦਾ ਪਾਲਣ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਸ ਹਾਇਰਾਰਕੀ ਨੂੰ ਸਮਝਣਾ ਡੀਬੱਗਿੰਗ ਨੂੰ ਕਾਫ਼ੀ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।
 
 ### ਕੈਸਕੇਡ ਪ੍ਰਾਥਮਿਕਤਾ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨਾ
 
-ਆਓ ਇੱਕ ਸਟਾਈਲ ਟਕਰਾਅ ਬਣਾਕੇ ਕੈਸਕੇਡ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖੀਏ। ਪਹਿਲਾਂ, ਆਪਣੇ `<h1>` ਟੈਗ ਵਿੱਚ ਇੱਕ ਇਨਲਾਈਨ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ:
+ਚਲੋ ਕੈਸਕੇਡ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਦੇ ਹਾਂ ਜਦੋਂ ਸਟਾਈਲ ਟਕਰਾਅ ਬਣਦਾ ਹੈ। ਪਹਿਲਾਂ, ਆਪਣੇ `<h1>` ਟੈਗ ਵਿੱਚ ਇੱਕ ਇਨਲਾਈਨ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ:
 
 ```html
 <h1 style="color: red">My Terrarium</h1>
 ```
 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਲਾਗੂ ਕਰਨਾ**: `<h1>` ਤੱਤ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਇਨਲਾਈਨ ਸਟਾਈਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲਾਲ ਰੰਗ
-- **ਵਰਤਣਾ**: `style` ਗੁਣ ਨੂੰ CSS ਨੂੰ ਸਿੱਧੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ
+- **ਲਾਗੂ ਕਰਨਾ**: `<h1>` ਤੱਤ ਨੂੰ ਇਨਲਾਈਨ ਸਟਾਈਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਿੱਧੇ ਲਾਲ ਰੰਗ
+- **ਵਰਤਣਾ**: `style` ਐਟ੍ਰਿਬਿਊਟ CSS ਨੂੰ ਸਿੱਧੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ
 - **ਬਣਾਉਣਾ**: ਇਸ ਵਿਸ਼ੇਸ਼ ਤੱਤ ਲਈ ਸਭ ਤੋਂ ਉੱਚੀ ਪ੍ਰਾਥਮਿਕਤਾ ਵਾਲਾ ਸਟਾਈਲ ਨਿਯਮ
 
 ਅਗਲੇ, ਆਪਣੇ `style.css` ਫਾਈਲ ਵਿੱਚ ਇਹ ਨਿਯਮ ਸ਼ਾਮਲ ਕਰੋ:
@@ -90,28 +146,50 @@ h1 {
 ```
 
 **ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**
-- **ਪ੍ਰਭਾਵਿਤ ਕੀਤਾ**: ਇੱਕ CSS ਨਿਯਮ ਜੋ ਸਾਰੇ `<h1>` ਤੱਤਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ
-- **ਸੈਟ ਕੀਤਾ**: ਟੈਕਸਟ ਰੰਗ ਨੂੰ ਬਲੂ ਵਿੱਚ ਬਾਹਰੀ ਸਟਾਈਲਸ਼ੀਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਨਿਰਧਾਰਤ ਕੀਤਾ**: ਇੱਕ CSS ਨਿਯਮ ਜੋ ਸਾਰੇ `<h1>` ਤੱਤਾਂ ਨੂੰ ਟਾਰਗਟ ਕਰਦਾ ਹੈ
+- **ਸੈਟ ਕੀਤਾ**: ਟੈਕਸਟ ਰੰਗ ਨੂੰ ਬਲੂ ਬਾਹਰੀ ਸਟਾਈਲਸ਼ੀਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
 - **ਬਣਾਇਆ**: ਇਨਲਾਈਨ ਸਟਾਈਲਜ਼ ਦੇ ਮੁਕਾਬਲੇ ਘੱਟ ਪ੍ਰਾਥਮਿਕਤਾ ਵਾਲਾ ਨਿਯਮ
 
-✅ **ਗਿਆਨ ਜਾਂਚ**: ਤੁਹਾਡੇ ਵੈਬ ਐਪ ਵਿੱਚ ਕਿਹੜਾ ਰੰਗ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ? ਕਿਹੜਾ ਰੰਗ ਜਿੱਤਦਾ ਹੈ? ਕੀ ਤੁਸੀਂ ਉਹ ਸਥਿਤੀਆਂ ਸੋਚ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਤੁਸੀਂ ਸਟਾਈਲਜ਼ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?
+✅ **ਗਿਆਨ ਦੀ ਜਾਂਚ**: ਤੁਹਾਡੇ ਵੈਬ ਐਪ ਵਿੱਚ ਕਿਹੜਾ ਰੰਗ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ? ਉਹ ਰੰਗ ਕਿਉਂ ਜਿੱਤਦਾ ਹੈ? ਕੀ ਤੁਸੀਂ ਐਸੇ ਦ੍ਰਿਸ਼ਾਂ ਬਾਰੇ ਸੋਚ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਤੁਸੀਂ ਸਟਾਈਲਜ਼ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?
+
+```mermaid
+flowchart TD
+    A["Browser encounters h1 element"] --> B{"Check for inline styles"}
+    B -->|Found| C["style='color: red'"] 
+    B -->|None| D{"Check for ID rules"}
+    C --> E["Apply red color (1000 points)"]
+    D -->|Found| F["#heading { color: green }"]
+    D -->|None| G{"Check for class rules"}
+    F --> H["Apply green color (100 points)"]
+    G -->|Found| I[".title { color: blue }"]
+    G -->|None| J{"Check element rules"}
+    I --> K["Apply blue color (10 points)"]
+    J -->|Found| L["h1 { color: purple }"]
+    J -->|None| M["Use browser default"]
+    L --> N["Apply purple color (1 point)"]
+    
+    style C fill:#ff6b6b
+    style F fill:#51cf66
+    style I fill:#339af0
+    style L fill:#9775fa
+```
 
 > 💡 **CSS ਪ੍ਰਾਥਮਿਕਤਾ ਕ੍ਰਮ (ਸਭ ਤੋਂ ਉੱਚਾ ਤੋਂ ਸਭ ਤੋਂ ਘੱਟ):**
 > 1. **ਇਨਲਾਈਨ ਸਟਾਈਲਜ਼** (style attribute)
 > 2. **IDs** (#myId)
-> 3. **ਕਲਾਸਾਂ** (.myClass) ਅਤੇ ਗੁਣ
+> 3. **ਕਲਾਸਾਂ** (.myClass) ਅਤੇ ਐਟ੍ਰਿਬਿਊਟਸ
 > 4. **ਤੱਤ ਚੁਣਨ ਵਾਲੇ** (h1, div, p)
 > 5. **ਬ੍ਰਾਊਜ਼ਰ ਡਿਫਾਲਟਸ**
 
 ## CSS ਵਿਰਾਸਤ ਕਾਰਵਾਈ ਵਿੱਚ
 
-CSS ਵਿਰਾਸਤ ਜੈਨੇਟਿਕਸ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ - ਤੱਤ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਤੱਤਾਂ ਤੋਂ ਕੁਝ ਗੁਣ ਵਿਰਾਸਤ ਵਿੱਚ ਲੈਂਦੇ ਹਨ। ਜੇ ਤੁਸੀਂ ਬਾਡੀ ਤੱਤ 'ਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਸਾਰੇ ਟੈਕਸਟ ਆਪਣੇ ਆਪ ਉਹੀ ਫੋਂਟ ਵਰਤਦਾ ਹੈ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ ਹੈਬਸਬਰਗ ਪਰਿਵਾਰ ਦੀ ਵਿਸ਼ੇਸ਼ ਜੌਲਾਈਨ ਕਈ ਪੀੜ੍ਹੀਆਂ ਵਿੱਚ ਪ੍ਰਗਟ ਹੋਈ ਬਿਨਾਂ ਇਸਨੂੰ ਹਰ ਵਿਅਕਤੀ ਲਈ ਨਿਰਧਾਰਤ ਕੀਤਾ ਗਿਆ।
+CSS ਵਿਰਾਸਤ ਜੈਨੇਟਿਕਸ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ - ਤੱਤ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਤੱਤਾਂ ਤੋਂ ਕੁਝ ਗੁਣ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ। ਜੇ ਤੁਸੀਂ ਬਾਡੀ ਤੱਤ 'ਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਸਾਰੇ ਟੈਕਸਟ ਆਪਣੇ ਆਪ ਉਹੀ ਫੋਂਟ ਵਰਤਦਾ ਹੈ। ਇਹ ਉਸੇ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਹੈਬਸਬਰਗ ਪਰਿਵਾਰ ਦੀ ਵਿਸ਼ੇਸ਼ ਜੌਲਾਈਨ ਕਈ ਪੀੜ੍ਹੀਆਂ ਵਿੱਚ ਪ੍ਰਗਟ ਹੋਈ ਬਿਨਾਂ ਹਰ ਵਿਅਕਤੀ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਨਿਰਧਾਰਤ ਕੀਤੇ।
 
-ਹਾਲਾਂਕਿ, ਹਰ ਚੀਜ਼ ਵਿਰਾਸਤ ਵਿੱਚ ਨਹੀਂ ਮਿਲਦੀ। ਫੋਂਟ ਅਤੇ ਰੰਗ ਵਰਗੇ ਟੈਕਸਟ ਸਟਾਈਲ ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲਦੇ ਹਨ, ਪਰ ਮਾਰਜਿਨ ਅਤੇ ਬਾਰਡਰ ਵਰਗੇ ਲੇਆਉਟ ਗੁਣ ਨਹੀਂ ਮਿਲਦੇ। ਜਿਵੇਂ ਕਿ ਬੱਚੇ ਸ਼ਾਰੀਰੀਕ ਗੁਣ ਵਿਰਾਸਤ ਵਿੱਚ ਲੈ ਸਕਦੇ ਹਨ ਪਰ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਦੀਆਂ ਫੈਸ਼ਨ ਚੋਣਾਂ ਨਹੀਂ।
+ਹਾਲਾਂਕਿ, ਹਰ ਚੀਜ਼ ਵਿਰਾਸਤ ਵਿੱਚ ਨਹੀਂ ਮਿਲਦੀ। ਫੋਂਟ ਅਤੇ ਰੰਗ ਵਰਗੇ ਟੈਕਸਟ ਸਟਾਈਲ ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲਦੇ ਹਨ, ਪਰ ਮਾਰਜਿਨ ਅਤੇ ਬਾਰਡਰ ਵਰਗੇ ਲੇਆਉਟ ਗੁਣ ਨਹੀਂ ਮਿਲਦੇ। ਜਿਵੇਂ ਬੱਚੇ ਸ਼ਾਰੀਰੀਕ ਗੁਣ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ ਪਰ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਦੀ ਫੈਸ਼ਨ ਚੋਣ ਨਹੀਂ।
 
 ### ਫੋਂਟ ਵਿਰਾਸਤ ਦਾ ਅਵਲੋਕਨ
 
-ਆਓ ਵਿਰਾਸਤ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖੀਏ ਜਦੋਂ ਤੁਸੀਂ `<body>` ਤੱਤ 'ਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦੇ ਹੋ:
+ਚਲੋ ਵਿਰਾਸਤ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਦੇ ਹਾਂ ਜਦੋਂ `<body>` ਤੱਤ 'ਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦੇ ਹੋ:
 
 ```css
 body {
@@ -119,31 +197,46 @@ body {
 }
 ```
 
-**ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ ਇਸਦਾ ਵਿਸ਼ਲੇਸ਼ਣ:**
+**ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
 - **ਸੈਟ ਕਰਨਾ**: ਪੂਰੇ ਪੇਜ ਲਈ ਫੋਂਟ ਫੈਮਿਲੀ ਨੂੰ ਟਾਰਗਟ ਕਰਕੇ `<body>` ਤੱਤ
-- **ਵਰਤਣਾ**: ਫੋਂਟ ਸਟੈਕ ਨਾਲ ਫਾਲਬੈਕ ਵਿਕਲਪਾਂ ਲਈ ਵਧੀਆ ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ
+- **ਵਰਤਣਾ**: ਫੋਂਟ ਸਟੈਕFallback ਵਿਕਲਪਾਂ ਨਾਲ ਬਿਹਤਰ ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਲਈ
 - **ਲਾਗੂ ਕਰਨਾ**: ਆਧੁਨਿਕ ਸਿਸਟਮ ਫੋਂਟ ਜੋ ਵੱਖ-ਵੱਖ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮਾਂ 'ਤੇ ਸ਼ਾਨਦਾਰ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ
-- **ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ**: ਸਾਰੇ ਚਾਈਲਡ ਤੱਤ ਇਸ ਫੋਂਟ ਨੂੰ ਵਿਰਾਸਤ ਵਿੱਚ ਲੈਂਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਇਸਨੂੰ ਖਾਸ ਤੌਰ 'ਤੇ ਓਵਰਰਾਈਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ
+- **ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ**: ਸਾਰੇ ਚਾਈਲਡ ਤੱਤ ਇਹ ਫੋਂਟ ਵਰਤਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਓਵਰਰਾਈਡ ਨਾ ਕੀਤਾ ਜਾਵੇ
 
-ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲ (F12) ਖੋਲ੍ਹੋ, ਐਲਿਮੈਂਟਸ ਟੈਬ 'ਤੇ ਜਾਓ, ਅਤੇ ਆਪਣੇ `<h1>` ਤੱਤ ਦੀ ਜਾਂਚ ਕਰੋ। ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਬਾਡੀ ਤੋਂ ਫੋਂਟ ਫੈਮਿਲੀ ਨੂੰ ਵਿਰਾਸਤ ਵਿੱਚ ਲੈਂਦਾ ਹੈ:
+ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲ (F12) ਖੋਲ੍ਹੋ, ਐਲਿਮੈਂਟਸ ਟੈਬ 'ਤੇ ਜਾਓ, ਅਤੇ ਆਪਣੇ `<h1>` ਤੱਤ ਦੀ ਜਾਂਚ ਕਰੋ। ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਬਾਡੀ ਤੋਂ ਫੋਂਟ ਫੈਮਿਲੀ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ:
 
-![ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲਿਆ ਫੋਂਟ](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.pa.png)
+![ਵਿਰਾਸਤ ਫੋਂਟ](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.pa.png)
 
-✅ **ਪ੍ਰਯੋਗ ਸਮਾਂ**: `<body>` 'ਤੇ `color`, `line-height`, ਜਾਂ `text-align` ਵਰਗੇ ਹੋਰ ਵਿਰਾਸਤ ਗੁਣ ਸੈਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਤੁਹਾਡੇ ਹੈਡਿੰਗ ਅਤੇ ਹੋਰ ਤੱਤਾਂ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ?
+✅ **ਪ੍ਰਯੋਗ ਸਮਾਂ**: `<body>` 'ਤੇ ਹੋਰ ਵਿਰਾਸਤ ਗੁਣ ਜਿਵੇਂ `color`, `line-height`, ਜਾਂ `text-align` ਸੈਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਤੁਹਾਡੇ ਹੈਡਿੰਗ ਅਤੇ ਹੋਰ ਤੱਤਾਂ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ?
 
 > 📝 **ਵਿਰਾਸਤ ਗੁਣ ਸ਼ਾਮਲ ਹਨ**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
 >
 > **ਗੈਰ-ਵਿਰਾਸਤ ਗੁਣ ਸ਼ਾਮਲ ਹਨ**: `margin`, `padding`, `border`, `width`, `height`, `position`
 
-## CSS ਚੁਣਨ ਵਾਲਿਆਂ ਨੂੰ ਸਮਝਣਾ
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**CSS ਫਾਊਂਡੇਸ਼ਨ ਸਮਝ**: ਚੁਣਨ ਵਾਲਿਆਂ 'ਤੇ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ:
+- ✅ ਕੈਸਕੇਡ ਅਤੇ ਵਿਰਾਸਤ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਦੀ ਵਿਆਖਿਆ ਕਰ ਸਕਦੇ ਹੋ
+- ✅ ਪੇਸ਼ਗੂਈ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਵਿਸ਼ੇਸ਼ਤਾ ਟਕਰਾਅ ਵਿੱਚ ਕਿਹੜਾ ਸਟਾਈਲ ਜਿੱਤੇਗਾ
+- ✅ ਪਛਾਣ ਸਕਦੇ ਹੋ ਕਿ ਕਿਹੜੇ ਗੁਣ ਮਾਤਾ-ਪਿਤਾ ਤੱਤਾਂ ਤੋਂ ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲਦੇ ਹਨ
+- ✅ CSS ਫਾਈਲਾਂ ਨੂੰ HTML ਨਾਲ ਸਹੀ ਤੌਰ 'ਤੇ ਜੁੜ ਸਕਦੇ ਹੋ
 
-CSS ਚੁਣਨ ਵਾਲੇ ਤੁਹਾਡੇ ਤੱਤਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਹਨ। ਇਹ ਸਹੀ ਦਿਸ਼ਾ ਦੇਣ ਵਾਂਗ ਕੰਮ ਕਰਦੇ ਹਨ - "ਘਰ" ਕਹਿਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਕਹਿ ਸਕਦੇ ਹੋ "ਲਾਲ ਦਰਵਾਜ਼ੇ ਵਾਲਾ ਨੀਲਾ ਘਰ ਜੋ ਮੇਪਲ ਸਟ੍ਰੀਟ 'ਤੇ ਹੈ।"
+**ਤੁਰੰਤ ਟੈਸਟ**: ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਇਹ ਸਟਾਈਲ ਹਨ, `<div class="special">` ਦੇ ਅੰਦਰ ਇੱਕ `<h1>` ਦਾ ਰੰਗ ਕੀ ਹੋਵੇਗਾ?
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*ਜਵਾਬ: ਲਾਲ (ਤੱਤ ਚੁਣਨ ਵਾਲਾ ਸਿੱਧੇ h1 ਨੂੰ ਟਾਰਗਟ ਕਰਦਾ ਹੈ)*
+
+## CSS ਚੁਣਨ ਵਾਲਿਆਂ ਵਿੱਚ ਮਾਹਰ ਬਣਨਾ
+
+CSS ਚੁਣਨ ਵਾਲੇ ਤੁਹਾਡੇ ਤੱਤਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਟਾਰਗਟ ਕਰਨ ਦਾ ਤਰੀਕਾ ਹਨ। ਇਹ ਸਹੀ ਦਿਸ਼ਾ ਦੇਣ ਵਾਂਗ ਕੰਮ ਕਰਦੇ ਹਨ - "ਘਰ" ਕਹਿਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਕਹਿ ਸਕਦੇ ਹੋ "ਮੈਪਲ ਸਟ੍ਰੀਟ 'ਤੇ ਲਾਲ ਦਰਵਾਜ਼ੇ ਵਾਲਾ ਨੀਲਾ ਘਰ।"
 
-CSS ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਵਿਸ਼ੇਸ਼ ਹੋਣ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਹੀ ਚੁਣਨ ਵਾਲੇ ਦੀ ਚੋਣ ਕਰਨਾ ਕੰਮ ਲਈ ਉਚਿਤ ਸੰਦ ਦੀ ਚੋਣ ਕਰਨ ਵਾਂਗ ਹੈ। ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਪੜੋਸ ਵਿੱਚ ਹਰ ਦਰਵਾਜ਼ੇ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਕਈ ਵਾਰ ਸਿਰਫ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਦਰਵਾਜ਼ੇ ਨੂੰ।
+CSS ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਵਿਸ਼ੇਸ਼ ਹੋਣ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਹੀ ਚੁਣਨ ਵਾਲੇ ਦੀ ਚੋਣ ਕਰਨਾ ਕੰਮ ਲਈ ਸਹੀ ਸੰਦ ਦੀ ਚੋਣ ਕਰਨ ਵਾਂਗ ਹੈ। ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਪੜੋਸ ਵਿੱਚ ਹਰ ਦਰਵਾਜ਼ੇ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਕਈ ਵਾਰ ਸਿਰਫ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਦਰਵਾਜ਼ੇ ਨੂੰ।
 
 ### ਤੱਤ ਚੁਣਨ ਵਾਲੇ (ਟੈਗ)
 
-ਤੱਤ ਚੁਣਨ ਵਾਲੇ HTML ਤੱਤਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਟੈਗ ਨਾਮ ਦੁਆਰਾ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੇ ਹਨ। ਇਹ ਬੇਸ ਸਟਾਈਲ ਸੈਟ ਕਰਨ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹਨ ਜੋ ਤੁਹਾਡੇ ਪੇਜ 'ਤੇ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ:
+ਤੱਤ ਚੁਣਨ ਵਾਲੇ HTML ਤੱਤਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਟੈਗ ਨਾਮ ਦੁਆਰਾ ਟਾਰਗਟ ਕਰਦੇ ਹਨ। ਇਹ ਪੂਰੇ ਪੇਜ ਵਿੱਚ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਲਾਗੂ ਹੋਣ ਵਾਲੇ ਬੇਸ ਸਟਾਈਲ ਸੈਟ ਕਰਨ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹਨ:
 
 ```css
 body {
@@ -162,45 +255,57 @@ h1 {
 
 **ਇਹ ਸਟਾਈਲ ਸਮਝਣਾ:**
 - **ਸੈਟ ਕਰਨਾ**: ਪੂਰੇ ਪੇਜ ਵਿੱਚ ਸਥਿਰ ਟਾਈਪੋਗ੍ਰਾਫੀ `body` ਚੁਣਨ ਵਾਲੇ ਨਾਲ
-- **ਹਟਾਉਣਾ**: ਡਿਫਾਲਟ ਬ੍ਰਾਊਜ਼ਰ ਮਾਰਜਿਨ ਅਤੇ ਪੈਡਿੰਗ ਲਈ ਵਧੀਆ ਕੰਟਰੋਲ
-- **ਸਟਾਈਲ ਕਰਨਾ**: ਸਾਰੇ ਹੈਡਿੰਗ ਤੱਤ ਰੰਗ, ਸੰਰੂਪਤਾ, ਅਤੇ ਸਪੇਸਿੰਗ ਨਾਲ
-- **ਵਰਤਣਾ**: `rem` ਯੂਨਿਟਸ ਲਈ ਸਕੇਲਬਲ, ਐਕਸੈਸਿਬਲ ਫੋਂਟ ਸਾਈਜ਼
-
-ਤੱਤ ਚੁਣਨ ਵਾਲੇ ਆਮ ਸਟਾਈਲਿੰਗ ਲਈ ਚੰਗੇ ਕੰਮ ਕਰਦੇ ਹਨ, ਪਰ ਤੁਹਾਨੂੰ ਵਿਅਕਤੀਗਤ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਹੋਰ ਵਿਸ਼ੇਸ਼ ਚੁਣਨ ਵਾਲਿਆਂ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇਗੀ ਜਿਵੇਂ ਕਿ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਪੌਦੇ।
-
-### ਵਿਲੱਖਣ ਤੱਤਾਂ ਲਈ ID ਚੁਣਨ ਵਾਲੇ
-
-ID ਚੁਣਨ ਵਾਲੇ `#` ਚਿੰਨ੍ਹ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਅਤੇ ਵਿਸ਼ੇਸ਼ `id` ਗੁਣਾਂ ਵਾਲੇ ਤੱਤਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੇ ਹਨ। ਕਿਉਂਕਿ IDs ਪੇਜ 'ਤੇ ਵਿਲੱਖਣ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ, ਇਹ ਵਿਅਕਤੀਗਤ, ਵਿਸ਼ੇਸ਼ ਤੱਤਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹਨ ਜਿਵੇਂ ਕਿ ਸਾਡੇ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਪੌਦੇ ਦੇ ਕੰਟੇਨਰ।
-
-ਆਓ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਦੇ ਸਾਈਡ ਕੰਟੇਨਰਾਂ ਲਈ ਸਟਾਈਲਿੰਗ ਬਣਾਈਏ ਜਿੱਥੇ ਪੌਦੇ ਰਹਿਣਗੇ:
-
-```css
-#left-container {
-  background-color: #f5f5f5;
-  width: 15%;
-  left: 0;
-  top: 0;
-  position: absolute;
-  height: 100vh;
-  padding: 1rem;
-  box-sizing: border-box;
-}
-
-#right-container {
-  background-color: #f5f5f5;
-  width: 15%;
-  right: 0;
-  top: 0;
-  position: absolute;
-  height: 100vh;
-  padding: 1rem;
-  box-sizing: border-box;
-}
+- **ਹਟਾਉਣਾ**: ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਮਾਰਜਿਨ ਅਤੇ ਪੈਡਿੰਗ ਬਿਹਤਰ ਕੰਟਰੋਲ ਲਈ
+- **ਸਟਾਈਲ ਕਰਨਾ**: ਸਾਰੇ ਹੈਡਿੰਗ ਤੱਤ ਰੰਗ, ਸੰਰੇਖਣ, ਅਤੇ ਸਪੇਸਿੰਗ ਨਾਲ
+- **ਵਰਤਣਾ**: `rem` ਯੂਨਿਟਸ ਸਕੇਲਬਲ, ਪਹੁੰਚਯੋਗ ਫੋਂਟ ਸਾਈਜ਼ਿੰਗ ਲਈ
+
+ਜਦੋਂ ਕਿ ਤੱਤ ਚੁਣਨ ਵਾਲੇ ਆਮ ਸਟਾਈਲਿੰਗ ਲਈ ਚੰਗੇ ਕੰਮ ਕਰਦੇ ਹਨ, ਤੁਹਾਨੂੰ ਵਿਅਕਤੀਗਤ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਹੋਰ ਵਿਸ਼ੇਸ਼ ਚੁਣਨ ਵਾਲਿਆਂ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇਗੀ ਜਿਵੇਂ ਕਿ ਤੁਹਾਡੇ
+- ਜਦੋਂ `.plant-holder` ਨੂੰ `relative` ਦੀ ਬਜਾਏ `absolute` ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਲੇਆਉਟ ਵਿੱਚ ਕੀ ਤਬਦੀਲੀ ਆਉਂਦੀ ਹੈ?
+- ਜਦੋਂ `.plant` ਨੂੰ `relative` ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ?
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**CSS ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਵਿੱਚ ਮਾਹਰਤਾ**: ਆਪਣੇ ਗਿਆਨ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਰੁਕੋ:
+- ✅ ਕੀ ਤੁਸੀਂ ਸਮਝਾ ਸਕਦੇ ਹੋ ਕਿ ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ ਲਈ ਪੌਦਿਆਂ ਨੂੰ `absolute` ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ?
+- ✅ ਕੀ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ `relative` ਕੰਟੇਨਰ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਸੰਦਰਭ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹਨ?
+- ✅ ਸਾਈਡ ਕੰਟੇਨਰ `absolute` ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਕਿਉਂ ਵਰਤਦੇ ਹਨ?
+- ✅ ਜੇ ਤੁਸੀਂ ਪੋਜ਼ੀਸ਼ਨ ਡਿਕਲੇਰੇਸ਼ਨ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾ ਦਿੰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
+
+**ਅਸਲ ਜਗਤ ਨਾਲ ਸੰਬੰਧ**: ਸੋਚੋ ਕਿ CSS ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਸਲ ਜਗਤ ਦੇ ਲੇਆਉਟ ਨੂੰ ਕਿਵੇਂ ਦਰਸਾਉਂਦੀ ਹੈ:
+- **Static**: ਸ਼ੈਲਫ 'ਤੇ ਕਿਤਾਬਾਂ (ਕੁਦਰਤੀ ਕ੍ਰਮ)
+- **Relative**: ਇੱਕ ਕਿਤਾਬ ਨੂੰ ਥੋੜ੍ਹਾ ਜਿਹਾ ਹਿਲਾਉਣਾ ਪਰ ਉਸ ਦੀ ਜਗ੍ਹਾ ਬਰਕਰਾਰ ਰੱਖਣਾ
+- **Absolute**: ਇੱਕ ਕਿਤਾਬ ਦੇ ਪੰਨੇ 'ਤੇ ਸਹੀ ਸਥਾਨ 'ਤੇ ਬੁੱਕਮਾਰਕ ਰੱਖਣਾ
+- **Fixed**: ਇੱਕ ਸਟਿੱਕੀ ਨੋਟ ਜੋ ਪੰਨੇ ਪਲਟਣ 'ਤੇ ਵੀ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
+
+## CSS ਨਾਲ ਟੈਰੀਰੀਅਮ ਬਣਾਉਣਾ
+
+ਹੁਣ ਅਸੀਂ ਸਿਰਫ CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਕੱਚ ਦਾ ਜਾਰ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ - ਕੋਈ ਚਿੱਤਰ ਜਾਂ ਗ੍ਰਾਫਿਕਸ ਸਾਫਟਵੇਅਰ ਦੀ ਲੋੜ ਨਹੀਂ।
+
+CSS ਦੀ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਟ੍ਰਾਂਸਪੇਰੈਂਸੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹਕੀਕਤੀ ਕੱਚ, ਛਾਂ ਅਤੇ ਡੈਪਥ ਇਫੈਕਟ ਬਣਾਉਣਾ CSS ਦੀ ਵਿਜ਼ੂਅਲ ਸਮਰੱਥਾ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਇਹ ਤਕਨੀਕ ਉਸ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ Bauhaus ਮੂਵਮੈਂਟ ਦੇ ਆਰਕੀਟੈਕਟ ਸਧਾਰਨ ਜਿਓਮੈਟ੍ਰਿਕ ਰੂਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੁੰਦਰ ਅਤੇ ਜਟਿਲ ਬਣਾਵਟਾਂ ਬਣਾਉਂਦੇ ਸਨ। ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਸਿਧਾਂਤ ਸਮਝ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਕਈ ਵੈੱਬ ਡਿਜ਼ਾਈਨਾਂ ਦੇ CSS ਤਕਨੀਕਾਂ ਨੂੰ ਪਛਾਣ ਸਕਦੇ ਹੋ।
+
+```mermaid
+flowchart LR
+    A[Jar Top] --> E[Complete Terrarium]
+    B[Jar Walls] --> E
+    C[Dirt Layer] --> E
+    D[Jar Bottom] --> E
+    F[Glass Effects] --> E
+    
+    A1["50% width<br/>5% height<br/>Top position"] --> A
+    B1["60% width<br/>80% height<br/>Rounded corners<br/>0.5 opacity"] --> B
+    C1["60% width<br/>5% height<br/>Dark brown<br/>Bottom layer"] --> C
+    D1["50% width<br/>1% height<br/>Bottom position"] --> D
+    F1["Subtle shadows<br/>Transparency<br/>Z-index layering"] --> F
+    
+    style E fill:#d1e1df,stroke:#3a241d
+    style A fill:#e8f5e8
+    style B fill:#e8f5e8
+    style C fill:#8B4513
+    style D fill:#e8f5e8
 ```
 
-**ਇਹ ਕੋਡ ਕੀ ਹਾਸਲ ਕਰਦਾ ਹੈ:**
-- **ਸਥਿਤ ਕਰਨਾ**: ਕੰਟੇਨਰਾਂ ਨੂੰ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਕਿਨਾਰੇ 'ਤੇ `absolute` ਸਥਿਤੀ ਦੀ ਵਰਤ
-ਆਓ ਟੈਰੀਰੀਅਮ ਜਾਰ ਨੂੰ ਹਿਸਾ-ਹਿਸਾ ਕਰਕੇ ਬਣਾਈਏ। ਹਰ ਹਿੱਸਾ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਲਈ ਐਬਸੋਲਿਊਟ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ ਸਾਈਜ਼ਿੰਗ ਵਰਤਦਾ ਹੈ:
+### ਕੱਚ ਦੇ ਜਾਰ ਦੇ ਹਿੱਸੇ ਬਣਾਉਣਾ
+
+ਆਓ ਟੈਰੀਰੀਅਮ ਜਾਰ ਨੂੰ ਹਿੱਸਾ-ਹਿੱਸਾ ਕਰਕੇ ਬਣਾਈਏ। ਹਰ ਹਿੱਸਾ `absolute` ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ ਸਾਈਜ਼ਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਬਣਾਇਆ ਜਾ ਸਕੇ:
 
 ```css
 .jar-walls {
@@ -252,31 +357,43 @@ ID ਚੁਣਨ ਵਾਲੇ `#` ਚਿੰਨ੍ਹ ਦੀ ਵਰਤੋਂ ਕ
 }
 ```
 
-**ਟੈਰੀਰੀਅਮ ਦੀ ਬਣਤਰ ਨੂੰ ਸਮਝਣਾ:**
-- **ਵਰਤਦਾ ਹੈ** ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ ਮਾਪ ਜਿਹੜੇ ਹਰ ਸਕਰੀਨ ਸਾਈਜ਼ 'ਤੇ ਰਿਸਪਾਂਸਿਵ ਸਕੇਲਿੰਗ ਲਈ ਸਹਾਇਕ ਹਨ
-- **ਪੋਜ਼ੀਸ਼ਨ ਕਰਦਾ ਹੈ** ਤੱਤਾਂ ਨੂੰ ਐਬਸੋਲਿਊਟ ਤਰੀਕੇ ਨਾਲ ਤਾਂ ਜੋ ਉਹ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਟੈਕ ਅਤੇ ਐਲਾਈਨ ਹੋ ਸਕਣ
-- **ਲਾਗੂ ਕਰਦਾ ਹੈ** ਵੱਖ-ਵੱਖ ਓਪੈਸਿਟੀ ਮੁੱਲਾਂ ਨੂੰ ਗਲਾਸ ਟ੍ਰਾਂਸਪੇਰੈਂਸੀ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ
-- **ਇਸਤਮਾਲ ਕਰਦਾ ਹੈ** `z-index` ਲੇਅਰਿੰਗ ਤਾਂ ਜੋ ਪੌਦੇ ਜਾਰ ਦੇ ਅੰਦਰ ਦਿਖਾਈ ਦੇਣ
-- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਹੌਲੀ ਬਾਕਸ-ਸ਼ੈਡੋ ਅਤੇ ਸੁਧਰੇ ਹੋਏ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਨੂੰ ਜ਼ਿਆਦਾ ਹਕੀਕਤੀ ਦਿਖਾਵਟ ਲਈ
+**ਟੈਰੀਰੀਅਮ ਬਣਾਉਣ ਦੀ ਸਮਝ:**
+- **ਵਰਤਦਾ ਹੈ** ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ ਮਾਪ ਰਿਸਪਾਂਸਿਵ ਸਕੇਲਿੰਗ ਲਈ ਜੋ ਸਾਰੇ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
+- **ਪੋਜ਼ੀਸ਼ਨ ਕਰਦਾ ਹੈ** ਤੱਤਾਂ ਨੂੰ `absolute` ਤਰੀਕੇ ਨਾਲ ਤਾਂ ਜੋ ਉਹ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸੈਟ ਹੋਣ
+- **ਲਾਗੂ ਕਰਦਾ ਹੈ** ਵੱਖ-ਵੱਖ ਓਪੈਸਿਟੀ ਮੁੱਲਾਂ ਨੂੰ ਕੱਚ ਦੀ ਪਾਰਦਰਸ਼ੀਤਾ ਦਾ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ
+- **ਇੰਪਲੀਮੈਂਟ ਕਰਦਾ ਹੈ** `z-index` ਲੇਅਰਿੰਗ ਤਾਂ ਜੋ ਪੌਦੇ ਜਾਰ ਦੇ ਅੰਦਰ ਦਿਖਾਈ ਦੇਣ
+- **ਜੋੜਦਾ ਹੈ** ਹੌਲੀ ਬਾਕਸ-ਸ਼ੈਡੋ ਅਤੇ ਸੁਧਰੇ ਹੋਏ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਨੂੰ ਹਕੀਕਤੀ ਦਿੱਖ ਲਈ
 
 ### ਪ੍ਰਤੀਸ਼ਤਾਂ ਨਾਲ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ
 
-ਧਿਆਨ ਦਿਓ ਕਿ ਸਾਰੇ ਮਾਪ ਫਿਕਸਡ ਪਿਕਸਲ ਮੁੱਲਾਂ ਦੀ ਬਜਾਏ ਪ੍ਰਤੀਸ਼ਤਾਂ ਵਰਤਦੇ ਹਨ:
+ਨੋਟ ਕਰੋ ਕਿ ਸਾਰੇ ਮਾਪ ਫਿਕਸਡ ਪਿਕਸਲ ਮੁੱਲਾਂ ਦੀ ਬਜਾਏ ਪ੍ਰਤੀਸ਼ਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ:
 
 **ਇਸਦਾ ਮਹੱਤਵ ਕਿਉਂ ਹੈ:**
-- **ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ** ਕਿ ਟੈਰੀਰੀਅਮ ਕਿਸੇ ਵੀ ਸਕਰੀਨ ਸਾਈਜ਼ 'ਤੇ ਅਨੁਪਾਤਿਕ ਤਰੀਕੇ ਨਾਲ ਸਕੇਲ ਕਰਦਾ ਹੈ
-- **ਰੱਖਦਾ ਹੈ** ਜਾਰ ਦੇ ਹਿੱਸਿਆਂ ਦੇ ਵਿਚਕਾਰ ਵਿਜ਼ੁਅਲ ਸੰਬੰਧ
-- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਇੱਕ ਸਥਿਰ ਅਨੁਭਵ ਮੋਬਾਈਲ ਫੋਨ ਤੋਂ ਵੱਡੇ ਡੈਸਕਟਾਪ ਮਾਨੀਟਰ ਤੱਕ
-- **ਡਿਜ਼ਾਈਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਂਦਾ ਹੈ** ਬਿਨਾਂ ਵਿਜ਼ੁਅਲ ਲੇਆਉਟ ਨੂੰ ਤੋੜੇ
+- **ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ** ਕਿ ਟੈਰੀਰੀਅਮ ਕਿਸੇ ਵੀ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ 'ਤੇ ਅਨੁਪਾਤਿਕ ਤਰੀਕੇ ਨਾਲ ਸਕੇਲ ਕਰਦਾ ਹੈ
+- **ਵਿਸ਼ੁਆਲ ਸੰਬੰਧਾਂ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ** ਜਾਰ ਦੇ ਹਿੱਸਿਆਂ ਦੇ ਵਿਚਕਾਰ
+- **ਇੱਕ ਸਥਿਰ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਮੋਬਾਈਲ ਫੋਨ ਤੋਂ ਵੱਡੇ ਡੈਸਕਟਾਪ ਮਾਨੀਟਰ ਤੱਕ
+- **ਡਿਜ਼ਾਈਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਂਦਾ ਹੈ** ਬਿਨਾਂ ਵਿਜ਼ੂਅਲ ਲੇਆਉਟ ਨੂੰ ਤੋੜੇ
+
+### CSS ਯੂਨਿਟਸ ਦੀ ਵਰਤੋਂ
 
-### CSS ਯੂਨਿਟਾਂ ਦੀ ਵਰਤੋਂ
+ਅਸੀਂ `rem` ਯੂਨਿਟਸ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਲਈ, ਜੋ ਰੂਟ ਫੋਂਟ ਸਾਈਜ਼ ਦੇ ਅਨੁਸਾਰ ਸਕੇਲ ਕਰਦੇ ਹਨ। ਇਹ ਜ਼ਿਆਦਾ ਪਹੁੰਚਯੋਗ ਡਿਜ਼ਾਈਨ ਬਣਾਉਂਦੇ ਹਨ ਜੋ ਯੂਜ਼ਰ ਫੋਂਟ ਪਸੰਦਾਂ ਦਾ ਆਦਰ ਕਰਦੇ ਹਨ। [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ਬਾਰੇ ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਅਧਿਕਾਰਤ ਵਿਵਰਣ ਵਿੱਚ ਪੜ੍ਹੋ।
 
-ਅਸੀਂ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਲਈ `rem` ਯੂਨਿਟਾਂ ਵਰਤ ਰਹੇ ਹਾਂ, ਜੋ ਰੂਟ ਫੋਂਟ ਸਾਈਜ਼ ਦੇ ਅਨੁਸਾਰ ਸਕੇਲ ਕਰਦੇ ਹਨ। ਇਹ ਜ਼ਿਆਦਾ ਪਹੁੰਚਯੋਗ ਡਿਜ਼ਾਈਨ ਬਣਾਉਂਦੇ ਹਨ ਜੋ ਯੂਜ਼ਰ ਫੋਂਟ ਪਸੰਦਾਂ ਦਾ ਆਦਰ ਕਰਦੇ ਹਨ। [CSS ਰਿਲੇਟਿਵ ਯੂਨਿਟਾਂ](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ਬਾਰੇ ਅਧਿਕਾਰਤ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਹੋਰ ਜਾਣੋ।
+✅ **ਵਿਜ਼ੂਅਲ ਪ੍ਰਯੋਗ**: ਇਹ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਅਤੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਦੇਖੋ:
+- ਜਾਰ ਦੀ ਓਪੈਸਿਟੀ ਨੂੰ 0.5 ਤੋਂ 0.8 ਵਿੱਚ ਬਦਲੋ - ਇਹ ਕੱਚ ਦੀ ਦਿੱਖ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ?
+- ਮਿੱਟੀ ਦੇ ਰੰਗ ਨੂੰ `#3a241d` ਤੋਂ `#8B4513` ਵਿੱਚ ਬਦਲੋ - ਇਸਦਾ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ ਕੀ ਹੈ?
+- ਮਿੱਟੀ ਦੇ `z-index` ਨੂੰ 2 ਵਿੱਚ ਬਦਲੋ - ਲੇਅਰਿੰਗ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ?
 
-✅ **ਦ੍ਰਿਸ਼ਟੀ ਅਨੁਭਵ**: ਇਨ੍ਹਾਂ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲੋ ਅਤੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਦੇਖੋ:
-- ਜਾਰ ਦੀ ਓਪੈਸਿਟੀ ਨੂੰ 0.5 ਤੋਂ 0.8 ਵਿੱਚ ਬਦਲੋ – ਇਹ ਗਲਾਸ ਦੀ ਦਿਖਾਵਟ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ?
-- ਮਿੱਟੀ ਦੇ ਰੰਗ ਨੂੰ `#3a241d` ਤੋਂ `#8B4513` ਵਿੱਚ ਬਦਲੋ – ਇਸਦਾ ਦ੍ਰਿਸ਼ਟੀ ਪ੍ਰਭਾਵ ਕੀ ਹੈ?
-- ਮਿੱਟੀ ਦੇ `z-index` ਨੂੰ 2 ਵਿੱਚ ਬਦਲੋ – ਲੇਅਰਿੰਗ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ?
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**CSS ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ ਦੀ ਸਮਝ**: ਆਪਣੇ ਵਿਜ਼ੂਅਲ CSS ਦੀ ਸਮਝ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:
+- ✅ ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ ਮਾਪ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹਨ?
+- ✅ ਓਪੈਸਿਟੀ ਕੱਚ ਦੀ ਪਾਰਦਰਸ਼ੀਤਾ ਦਾ ਪ੍ਰਭਾਵ ਕਿਵੇਂ ਬਣਾਉਂਦੀ ਹੈ?
+- ✅ ਲੇਅਰਿੰਗ ਤੱਤਾਂ ਵਿੱਚ `z-index` ਦਾ ਕੀ ਭੂਮਿਕਾ ਹੈ?
+- ✅ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਮੁੱਲ ਜਾਰ ਦਾ ਆਕਾਰ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹਨ?
+
+**ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤ**: ਨੋਟ ਕਰੋ ਕਿ ਅਸੀਂ ਸਧਾਰਨ ਰੂਪਾਂ ਤੋਂ ਜਟਿਲ ਵਿਜ਼ੂਅਲ ਬਣਾਉਣ ਲਈ ਕਿਵੇਂ ਕੰਮ ਕਰ ਰਹੇ ਹਾਂ:
+1. **ਚੌਕੋਰ** → **ਗੋਲ ਚੌਕੋਰ** → **ਜਾਰ ਦੇ ਹਿੱਸੇ**
+2. **ਸਧਾਰਨ ਰੰਗ** → **ਓਪੈਸਿਟੀ** → **ਕੱਚ ਦਾ ਪ੍ਰਭਾਵ**
+3. **ਵੱਖ-ਵੱਖ ਤੱਤ** → **ਲੇਅਰਡ ਰਚਨਾ** → **3D ਦਿੱਖ**
 
 ---
 
@@ -284,26 +401,26 @@ ID ਚੁਣਨ ਵਾਲੇ `#` ਚਿੰਨ੍ਹ ਦੀ ਵਰਤੋਂ ਕ
 
 Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
 
-**ਵੇਰਵਾ:** CSS ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ ਜੋ ਟੈਰੀਰੀਅਮ ਪੌਦਿਆਂ ਨੂੰ ਹੌਲੀ-ਹੌਲੀ ਹਵਾ ਦੇ ਪ੍ਰਭਾਵ ਨਾਲ ਹਿਲਾਉਂਦਾ ਹੈ। ਇਹ CSS ਐਨੀਮੇਸ਼ਨ, ਟ੍ਰਾਂਸਫਾਰਮਸ ਅਤੇ ਕੀਫਰੇਮਸ ਦੀ ਪ੍ਰੈਕਟਿਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਅਤੇ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਦੀ ਦ੍ਰਿਸ਼ਟੀ ਅਪੀਲ ਨੂੰ ਵਧਾਏਗਾ।
+**ਵੇਰਵਾ:** CSS ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ ਜੋ ਟੈਰੀਰੀਅਮ ਪੌਦਿਆਂ ਨੂੰ ਹੌਲੀ-ਹੌਲੀ ਹਵਾ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹੋਏ ਹਿਲਾਉਂਦਾ ਹੈ। CSS ਐਨੀਮੇਸ਼ਨ, ਟ੍ਰਾਂਸਫਾਰਮਸ ਅਤੇ ਕੀਫਰੇਮਸ ਦੀ ਅਭਿਆਸ ਕਰਨ ਦੇ ਨਾਲ ਟੈਰੀਰੀਅਮ ਦੀ ਵਿਜ਼ੂਅਲ ਦਿੱਖ ਨੂੰ ਵਧਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
 
-**ਪ੍ਰੋੰਪਟ:** CSS ਕੀਫਰੇਮ ਐਨੀਮੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਜੋ ਟੈਰੀਰੀਅਮ ਦੇ ਪੌਦੇ ਹੌਲੀ-ਹੌਲੀ ਪਾਸੇ ਤੋਂ ਪਾਸੇ ਹਿਲਣ। ਇੱਕ ਹਿਲਣ ਵਾਲੀ ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ ਜੋ ਹਰ ਪੌਦੇ ਨੂੰ ਹੌਲੀ-ਹੌਲੀ (2-3 ਡਿਗਰੀ) ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਵੱਲ ਘੁਮਾਉਂਦਾ ਹੈ, 3-4 ਸਕਿੰਟ ਦੀ ਮਿਆਦ ਨਾਲ। ਇਹ ਐਨੀਮੇਸ਼ਨ ਅਨੰਤ ਚਲਦੀ ਰਹੇ ਅਤੇ ਕੁਦਰਤੀ ਹਿਲਣ ਲਈ ਇੱਕ ਈਜ਼ਿੰਗ ਫੰਕਸ਼ਨ ਹੋਵੇ।
+**ਪ੍ਰੋੰਪਟ:** CSS ਕੀਫਰੇਮ ਐਨੀਮੇਸ਼ਨ ਜੋੜੋ ਤਾਂ ਜੋ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਪੌਦੇ ਹੌਲੀ-ਹੌਲੀ ਸਾਈਡ ਤੋਂ ਸਾਈਡ ਹਿਲਣ। ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ ਜੋ ਹਰ ਪੌਦੇ ਨੂੰ ਥੋੜ੍ਹਾ ਜਿਹਾ (2-3 ਡਿਗਰੀ) ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਵੱਲ ਘੁਮਾਉਂਦਾ ਹੈ 3-4 ਸਕਿੰਟ ਦੇ ਸਮੇਂ ਨਾਲ, ਅਤੇ ਇਸਨੂੰ `.plant` ਕਲਾਸ 'ਤੇ ਲਾਗੂ ਕਰੋ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਐਨੀਮੇਸ਼ਨ ਅਨੰਤ ਚੱਲੇ ਅਤੇ ਕੁਦਰਤੀ ਹਿਲਾਵਟ ਲਈ ਇੱਕ easing function ਹੋਵੇ।
 
-[Agent ਮੋਡ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
 
-## 🚀 ਚੈਲੈਂਜ: ਗਲਾਸ ਰਿਫਲੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰਨਾ
+## 🚀 ਚੈਲੈਂਜ: ਕੱਚ ਦੇ ਰਿਫਲੈਕਸ਼ਨ ਜੋੜਨਾ
 
-ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਹਕੀਕਤੀ ਗਲਾਸ ਰਿਫਲੈਕਸ਼ਨ ਨਾਲ ਵਧਾਉਣ ਲਈ ਤਿਆਰ ਹੋ? ਇਹ ਤਕਨੀਕ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਡੈਪਥ ਅਤੇ ਹਕੀਕਤ ਸ਼ਾਮਲ ਕਰੇਗੀ।
+ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਹਕੀਕਤੀ ਕੱਚ ਦੇ ਰਿਫਲੈਕਸ਼ਨ ਨਾਲ ਵਧਾਉਣ ਲਈ ਤਿਆਰ ਹੋ? ਇਹ ਤਕਨੀਕ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਡੈਪਥ ਅਤੇ ਹਕੀਕਤ ਜੋੜੇਗੀ।
 
-ਤੁਹਾਨੂੰ ਹੌਲੀ ਹਾਈਲਾਈਟਸ ਬਣਾਉਣੇ ਹਨ ਜੋ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਕਿਵੇਂ ਰੋਸ਼ਨੀ ਗਲਾਸ ਦੀ ਸਤਹ 'ਤੇ ਰਿਫਲੈਕਟ ਕਰਦੀ ਹੈ। ਇਹ ਤਰੀਕਾ ਉਸ ਤਰੀਕੇ ਦੇ ਸਮਾਨ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ ਰੇਨੇਸਾਂਸ ਪੇਂਟਰ ਜਾਨ ਵੈਨ ਆਇਕ ਨੇ ਰੋਸ਼ਨੀ ਅਤੇ ਰਿਫਲੈਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੇਂਟ ਕੀਤੇ ਗਲਾਸ ਨੂੰ ਤਿੰਨ-ਪੱਖੀ ਦਿਖਾਇਆ। ਇਹ ਹੈ ਜੋ ਤੁਸੀਂ ਹਾਸਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ:
+ਤੁਹਾਨੂੰ ਹੌਲੀ ਹੌਲੀ ਹਾਈਲਾਈਟਸ ਬਣਾਉਣੇ ਹਨ ਜੋ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਕਿਵੇਂ ਰੋਸ਼ਨੀ ਕੱਚ ਦੀ ਸਤਹ 'ਤੇ ਰਿਫਲੈਕਟ ਕਰਦੀ ਹੈ। ਇਹ ਤਰੀਕਾ ਉਸ ਤਰੀਕੇ ਦੇ ਸਮਾਨ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ ਰੈਨੈਸਾਂਸ ਪੇਂਟਰ ਜਾਨ ਵੈਨ ਆਇਕ ਨੇ ਰੋਸ਼ਨੀ ਅਤੇ ਰਿਫਲੈਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੇਂਟ ਕੀਤੇ ਕੱਚ ਨੂੰ ਤਿੰਨ-ਡਾਈਮੈਂਸ਼ਨਲ ਦਿੱਖ ਦਿੱਤੀ। ਇਹ ਹੈ ਜੋ ਤੁਸੀਂ ਹਾਸਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ:
 
 ![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.pa.png)
 
 **ਤੁਹਾਡਾ ਚੈਲੈਂਜ:**
-- **ਬਣਾਓ** ਹੌਲੀ ਚਿੱਟੇ ਜਾਂ ਹਲਕੇ ਰੰਗ ਦੇ ਓਵਲ ਆਕਾਰ ਗਲਾਸ ਰਿਫਲੈਕਸ਼ਨ ਲਈ
-- **ਉਨ੍ਹਾਂ ਨੂੰ ਸਟ੍ਰੈਟਜਿਕ ਤਰੀਕੇ ਨਾਲ** ਜਾਰ ਦੇ ਖੱਬੇ ਪਾਸੇ ਪੋਜ਼ੀਸ਼ਨ ਕਰੋ
+- **ਬਣਾਓ** ਹੌਲੀ ਹੌਲੀ ਚਿੱਟੇ ਜਾਂ ਹਲਕੇ ਰੰਗ ਦੇ ਓਵਲ ਆਕਾਰ ਕੱਚ ਦੇ ਰਿਫਲੈਕਸ਼ਨ ਲਈ
+- **ਇਨ੍ਹੇ ਸਥਿਤ ਕਰੋ** ਜਾਰ ਦੇ ਖੱਬੇ ਪਾਸੇ ਸਟ੍ਰੈਟਜਿਕ ਤਰੀਕੇ ਨਾਲ
 - **ਲਾਗੂ ਕਰੋ** ਉਚਿਤ ਓਪੈਸਿਟੀ ਅਤੇ ਬਲਰ ਪ੍ਰਭਾਵ ਹਕੀਕਤੀ ਰੋਸ਼ਨੀ ਰਿਫਲੈਕਸ਼ਨ ਲਈ
-- **ਵਰਤੋ** `border-radius` ਜਿਵੇਂ ਕਿ ਕੁਦਰਤੀ, ਬੁਬਲ-ਜਿਵੇਂ ਆਕਾਰ ਬਣਾਉਣ ਲਈ
-- **ਗ੍ਰੇਡੀਐਂਟ ਜਾਂ ਬਾਕਸ-ਸ਼ੈਡੋ ਨਾਲ ਅਨੁਭਵ ਕਰੋ** ਵਧੇਰੇ ਹਕੀਕਤ ਲਈ
+- **ਵਰਤੋਂ** `border-radius` ਜਿਵੇਂ ਜੈਵਿਕ, ਬੁਬਲ-ਜਿਵੇਂ ਆਕਾਰ ਬਣਾਉਣ ਲਈ
+- **ਪ੍ਰਯੋਗ ਕਰੋ** ਗ੍ਰੇਡੀਐਂਟ ਜਾਂ ਬਾਕਸ-ਸ਼ੈਡੋਜ਼ ਨਾਲ ਵਧੇਰੇ ਹਕੀਕਤ ਲਈ
 
 ## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼
 
@@ -311,28 +428,112 @@ Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤ
 
 ## CSS ਗਿਆਨ ਨੂੰ ਵਧਾਓ
 
-CSS ਸ਼ੁਰੂ ਵਿੱਚ ਥੋੜਾ ਜਟਿਲ ਲੱਗ ਸਕਦਾ ਹੈ, ਪਰ ਇਹ ਮੁੱਖ ਧਾਰਨਾਵਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਹੋਰ ਉੱਚ-ਸਤਹ ਦੀਆਂ ਤਕਨੀਕਾਂ ਲਈ ਮਜ਼ਬੂਤ ਬੁਨਿਆਦ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
+CSS ਸ਼ੁਰੂ ਵਿੱਚ ਥੋੜ੍ਹਾ ਜਿਹਾ ਜਟਿਲ ਲੱਗ ਸਕਦਾ ਹੈ, ਪਰ ਇਹਨਾਂ ਮੁੱਖ ਸਿਧਾਂਤਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਹੋਰ ਉੱਚੇ ਤਕਨੀਕਾਂ ਲਈ ਮਜ਼ਬੂਤ ਬੁਨਿਆਦ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
 
 **ਤੁਹਾਡੇ CSS ਸਿੱਖਣ ਦੇ ਅਗਲੇ ਖੇਤਰ:**
-- **Flexbox** - ਤੱਤਾਂ ਦੇ ਸੰਰੂਪ ਅਤੇ ਵੰਡ ਨੂੰ ਸਧਾਰਨ ਬਣਾਉਂਦਾ ਹੈ
+- **Flexbox** - ਤੱਤਾਂ ਦੇ ਸੰਰੋਪਣ ਅਤੇ ਵੰਡ ਨੂੰ ਸਧਾਰਨ ਬਣਾਉਂਦਾ ਹੈ
 - **CSS Grid** - ਜਟਿਲ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
-- **CSS Variables** - ਦੁਹਰਾਅ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ ਅਤੇ ਰੱਖ-ਰਖਾਅ ਨੂੰ ਸੁਧਾਰਦਾ ਹੈ
-- **Responsive design** - ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਵੈਬਸਾਈਟ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰੇ
+- **CSS Variables** - ਦੁਹਰਾਈ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ ਅਤੇ ਰੱਖ-ਰਖਾਅ ਨੂੰ ਸੁਧਾਰਦਾ ਹੈ
+- **Responsive design** - ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਵੈੱਬਸਾਈਟ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ
 
 ### ਇੰਟਰਐਕਟਿਵ ਸਿੱਖਣ ਦੇ ਸਰੋਤ
 
-ਇਨ੍ਹਾਂ ਰੋਮਾਂਚਕ, ਹੱਥ-ਵਰਤੋਂ ਵਾਲੇ ਖੇਡਾਂ ਨਾਲ ਇਨ੍ਹਾਂ ਧਾਰਨਾਵਾਂ ਦੀ ਪ੍ਰੈਕਟਿਸ ਕਰੋ:
+ਇਹ ਦਿਲਚਸਪ, ਹੈਂਡਸ-ਆਨ ਗੇਮਾਂ ਨਾਲ ਇਹ ਸਿਧਾਂਤਾਂ ਦਾ ਅਭਿਆਸ ਕਰੋ:
 - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - ਮਜ਼ੇਦਾਰ ਚੈਲੈਂਜਾਂ ਰਾਹੀਂ Flexbox ਵਿੱਚ ਮਾਹਰ ਬਣੋ
 - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid ਸਿੱਖੋ ਵਰਚੁਅਲ ਗਾਜਰਾਂ ਨੂੰ ਉਗਾ ਕੇ
 - 🎯 [CSS Battle](https://cssbattle.dev/) - CSS ਚੈਲੈਂਜਾਂ ਨਾਲ ਆਪਣੇ CSS ਹੁਨਰ ਦੀ ਜਾਂਚ ਕਰੋ
 
-### ਵਾਧੂ ਸਿੱਖਣ
-
-CSS ਮੂਲ ਧਾਰਨਾਵਾਂ ਲਈ ਵਿਸਤ੍ਰਿਤ ਸਿੱਖਣ ਲਈ, ਇਹ Microsoft Learn ਮੋਡਿਊਲ ਪੂਰਾ ਕਰੋ: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+### ਵਧੇਰੇ ਸਿੱਖਣ
+
+CSS ਦੇ ਮੁੱਲ ਸਿਧਾਂਤਾਂ ਲਈ, ਇਹ Microsoft Learn ਮੋਡਿਊਲ ਪੂਰਾ ਕਰੋ: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **ਤੁਹਾਡੇ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] DevTools ਖੋਲ੍ਹੋ ਅਤੇ ਕਿਸੇ ਵੀ ਵੈੱਬਸਾਈਟ 'ਤੇ CSS ਸ਼ੈਲੀ ਦੀ ਜਾਂਚ ਕਰੋ
+- [ ] ਇੱਕ ਸਧਾਰਨ CSS ਫਾਈਲ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ HTML ਪੇਜ ਨਾਲ ਜੋੜੋ
+- [ ] ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਰੰਗ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ: hex, RGB, ਅਤੇ ਨਾਮਿਤ ਰੰਗ
+- [ ] ਬਾਕਸ ਮਾਡਲ ਦਾ ਅਭਿਆਸ ਕਰੋ ਇੱਕ div ਵਿੱਚ ਪੈਡਿੰਗ ਅਤੇ ਮਾਰਜਿਨ ਜੋੜ ਕੇ
+
+### 🎯 **ਤੁਹਾਡੇ ਇਸ ਘੰਟੇ ਵਿੱਚ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ CSS ਦੇ ਮੁੱਲ ਸਿਧਾਂਤਾਂ ਦੀ ਸਮੀਖਾ ਕਰੋ
+- [ ] ਆਪਣੇ HTML ਪੇਜ ਨੂੰ ਫੋਂਟ, ਰੰਗ ਅਤੇ ਸਪੇਸਿੰਗ ਨਾਲ ਸਜਾਓ
+- [ ] Flexbox ਜਾਂ Grid ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਧਾਰਨ ਲੇਆਉਟ ਬਣਾਓ
+- [ ] CSS ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਨਾਲ ਹੌਲੀ ਪ੍ਰਭਾਵਾਂ ਦਾ ਅਭਿਆਸ ਕਰੋ
+- [ ] ਮੀਡੀਆ ਕਵੇਰੀਜ਼ ਨਾਲ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਦਾ ਅਭਿਆਸ ਕਰੋ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ CSS ਅਡਵੈਂਚਰ**
+- [ ] ਕ੍ਰੀਏਟਿਵ ਫਲੇਅਰ ਨਾਲ ਟੈਰੀਰੀਅਮ ਸਟਾਈਲਿੰਗ ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰੋ
+- [ ] CSS Grid ਵਿੱਚ ਮਾਹਰ ਬਣੋ ਇੱਕ ਫੋਟੋ ਗੈਲਰੀ ਲੇਆਉਟ ਬਣਾਉਣ ਦੁਆਰਾ
+- [ ] CSS ਐਨੀਮੇਸ਼ਨ ਸਿੱਖੋ ਆਪਣੇ ਡਿਜ਼ਾਈਨਾਂ ਨੂੰ ਜ਼ਿੰਦਾ ਕਰਨ ਲਈ
+- [ ] CSS ਪ੍ਰੀ-ਪ੍ਰੋਸੈਸਰ ਜਿਵੇਂ Sass ਜਾਂ Less ਦੀ ਖੋਜ ਕਰੋ
+- [ ] ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤਾਂ ਦਾ ਅਧਿਐਨ ਕਰੋ ਅਤੇ CSS 'ਤੇ ਲਾਗੂ ਕਰੋ
+- [ ] ਆਨਲਾਈਨ ਮਿਲਣ ਵਾਲੇ ਦਿਲਚਸਪ ਡਿਜ਼ਾਈਨਾਂ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ ਅਤੇ ਦੁਬਾਰਾ ਬਣਾਓ
+
+### 🌟 **ਤੁਹਾਡੀ ਮਹੀਨੇ-ਲੰਬੀ ਡਿਜ਼ਾਈਨ ਮਾਹਰਤਾ**
+- [ ] ਇੱਕ ਪੂਰੀ ਰਿਸਪਾਂਸਿਵ ਵੈੱਬਸਾਈਟ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਬਣਾਓ
+- [ ] CSS-in-JS ਜਾਂ utility-first frameworks ਜਿਵੇਂ Tailwind ਸਿੱਖੋ
+- [ ] CSS ਸੁਧਾਰਾਂ ਨਾਲ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ
+- [ ] CSS ਦੇ ਉੱਚੇ ਸਿਧਾਂਤਾਂ ਜਿਵੇਂ CSS custom properties ਅਤੇ containment ਵਿੱਚ ਮਾਹਰ ਬਣੋ
+- [ ] ਮੋਡਿਊਲ CSS ਨਾਲ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀਆਂ ਬਣਾਓ
+- [ ] CSS ਸਿੱਖਣ ਵਾਲਿਆਂ ਨੂੰ ਮਦਦ ਦਿਓ ਅਤੇ ਡਿਜ਼ਾਈਨ ਗਿਆਨ ਸਾਂਝਾ ਕਰੋ
+
+## 🎯 ਤੁਹਾਡਾ CSS ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
+
+```mermaid
+timeline
+    title CSS Learning Progression
+    
+    section Foundation (10 minutes)
+        File Connection: Link CSS to HTML
+                       : Understand cascade rules
+                       : Learn inheritance basics
+        
+    section Selectors (15 minutes)
+        Targeting Elements: Element selectors
+                          : Class patterns
+                          : ID specificity
+                          : Combinators
+        
+    section Box Model (20 minutes)
+        Layout Fundamentals: Margin and padding
+                           : Border properties
+                           : Content sizing
+                           : Box-sizing behavior
+        
+    section Positioning (25 minutes)
+        Element Placement: Static vs relative
+                         : Absolute positioning
+                         : Z-index layering
+                         : Responsive units
+        
+    section Visual Design (30 minutes)
+        Styling Mastery: Colors and opacity
+                       : Shadows and effects
+                       : Transitions
+                       : Transform properties
+        
+    section Responsive Design (45 minutes)
+        Multi-Device Support: Media queries
+                            : Flexible layouts
+                            : Mobile-first approach
+                            : Viewport optimization
+        
+    section Advanced Techniques (1 week)
+        Modern CSS: Flexbox layouts
+                  : CSS Grid systems
+                  : Custom properties
+                  : Animation keyframes
+        
+    section Professional Skills (1 month)
+        CSS Architecture: Component patterns
+                        : Maintainable code
+                        : Performance optimization
+                        : Cross-browser compatibility
+```
 
-## ਅਸਾਈਨਮੈਂਟ
+### 🛠️ ਤੁਹਾਡਾ CSS ਟੂਲਕਿਟ ਸੰਖੇਪ
 
-[CSS Refactoring](assignment.md)
+ਇਹ ਪਾਠ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਹੈ:
+- **Cascade Understanding**: ਕਿਵੇਂ ਸ਼ੈਲੀਆਂ ਵਾਰਸ ਅਤੇ ਓਵਰਰਾਈਡ ਹੁੰਦ
 
 ---
 
diff --git a/translations/pa/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/pa/3-terrarium/3-intro-to-DOM-and-closures/README.md
index bdee157d5d..053205c952 100644
--- a/translations/pa/3-terrarium/3-intro-to-DOM-and-closures/README.md
+++ b/translations/pa/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -1,76 +1,180 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "bc93f6285423033ebf5b8abeb5282888",
-  "translation_date": "2025-10-22T17:46:56+00:00",
+  "original_hash": "973e48ad87d67bf5bb819746c9f8e302",
+  "translation_date": "2025-11-03T16:30:51+00:00",
   "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
   "language_code": "pa"
 }
 -->
-# ਟੈਰੀਅਰਿਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰਜ਼
+# ਟੈਰੀਅਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰਜ਼
+
+```mermaid
+journey
+    title Your JavaScript DOM Journey
+    section Foundation
+      Understand DOM: 3: Student
+      Learn closures: 4: Student
+      Connect elements: 4: Student
+    section Interaction
+      Setup drag events: 4: Student
+      Track coordinates: 5: Student
+      Handle movement: 5: Student
+    section Polish
+      Add cleanup: 4: Student
+      Test functionality: 5: Student
+      Complete terrarium: 5: Student
+```
 
 ![DOM ਅਤੇ ਇੱਕ ਕਲੋਜ਼ਰ](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.pa.png)
-> ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਦੁਆਰਾ
+> ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ
+
+ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਸਭ ਤੋਂ ਰੁਚਿਕਰ ਪਹਲੂਆਂ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ - ਚੀਜ਼ਾਂ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਬਣਾਉਣਾ! ਡੌਕਯੂਮੈਂਟ ਓਬਜੈਕਟ ਮਾਡਲ (DOM) ਤੁਹਾਡੇ HTML ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਪੁਲ ਵਾਂਗ ਹੈ, ਅਤੇ ਅੱਜ ਅਸੀਂ ਇਸਨੂੰ ਤੁਹਾਡੇ ਟੈਰੀਅਰੀਅਮ ਨੂੰ ਜ਼ਿੰਦਾ ਕਰਨ ਲਈ ਵਰਤਾਂਗੇ। ਜਦੋਂ ਟਿਮ ਬਰਨਰਜ਼-ਲੀ ਨੇ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਬਣਾਇਆ, ਉਸਨੇ ਇੱਕ ਵੈੱਬ ਦੀ ਕਲਪਨਾ ਕੀਤੀ ਸੀ ਜਿੱਥੇ ਡੌਕਯੂਮੈਂਟ ਡਾਇਨਾਮਿਕ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਹੋ ਸਕਦੇ ਹਨ - DOM ਉਸ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਨੂੰ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ।
 
-ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਸਭ ਤੋਂ ਰੁਚਿਕਰ ਪਹਲੂਆਂ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ - ਚੀਜ਼ਾਂ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਬਣਾਉਣਾ! ਡੌਕਯੂਮੈਂਟ ਓਬਜੈਕਟ ਮਾਡਲ (DOM) ਤੁਹਾਡੇ HTML ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਪੁਲ ਵਾਂਗ ਹੈ, ਅਤੇ ਅੱਜ ਅਸੀਂ ਇਸਨੂੰ ਤੁਹਾਡੇ ਟੈਰੀਅਰਿਅਮ ਨੂੰ ਜ਼ਿੰਦਾ ਕਰਨ ਲਈ ਵਰਤਾਂਗੇ। ਜਦੋਂ ਟਿਮ ਬਰਨਰਜ਼-ਲੀ ਨੇ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਬਣਾਇਆ, ਉਸਨੇ ਇੱਕ ਵੈੱਬ ਦੀ ਕਲਪਨਾ ਕੀਤੀ ਸੀ ਜਿੱਥੇ ਡੌਕਯੂਮੈਂਟ ਡਾਇਨਾਮਿਕ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਹੋ ਸਕਦੇ ਹਨ - DOM ਉਸ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਨੂੰ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ।
+ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰਜ਼ ਦੀ ਵੀ ਖੋਜ ਕਰਾਂਗੇ, ਜੋ ਸ਼ੁਰੂ ਵਿੱਚ ਡਰਾਉਣੇ ਲੱਗ ਸਕਦੇ ਹਨ। ਕਲੋਜ਼ਰਜ਼ ਨੂੰ "ਯਾਦاشت ਦੀਆਂ ਜੇਬਾਂ" ਬਣਾਉਣ ਵਾਂਗ ਸੋਚੋ ਜਿੱਥੇ ਤੁਹਾਡੇ ਫੰਕਸ਼ਨ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਨੂੰ ਯਾਦ ਰੱਖ ਸਕਦੇ ਹਨ। ਇਹ ਇਸ ਵਾਂਗ ਹੈ ਕਿ ਤੁਹਾਡੇ ਟੈਰੀਅਰੀਅਮ ਵਿੱਚ ਹਰ ਪੌਦੇ ਦਾ ਆਪਣਾ ਡਾਟਾ ਰਿਕਾਰਡ ਹੈ ਜੋ ਇਸਦੀ ਸਥਿਤੀ ਨੂੰ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਮਝ ਜਾਵੋਗੇ ਕਿ ਇਹ ਕਿੰਨੇ ਕੁਦਰਤੀ ਅਤੇ ਲਾਭਦਾਇਕ ਹਨ।
 
-ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰਜ਼ ਦੀ ਵੀ ਖੋਜ ਕਰਾਂਗੇ, ਜੋ ਸ਼ੁਰੂ ਵਿੱਚ ਡਰਾਉਣੇ ਲੱਗ ਸਕਦੇ ਹਨ। ਕਲੋਜ਼ਰਜ਼ ਨੂੰ "ਯਾਦاشت ਦੀਆਂ ਜੇਬਾਂ" ਬਣਾਉਣ ਵਾਂਗ ਸੋਚੋ ਜਿੱਥੇ ਤੁਹਾਡੇ ਫੰਕਸ਼ਨ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਨੂੰ ਯਾਦ ਰੱਖ ਸਕਦੇ ਹਨ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਕਿ ਤੁਹਾਡੇ ਟੈਰੀਅਰਿਅਮ ਵਿੱਚ ਹਰ ਪੌਦੇ ਦਾ ਆਪਣਾ ਡਾਟਾ ਰਿਕਾਰਡ ਹੋਵੇਗਾ ਜੋ ਇਸਦੀ ਸਥਿਤੀ ਨੂੰ ਟ੍ਰੈਕ ਕਰੇਗਾ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਮਝ ਜਾਵੋਗੇ ਕਿ ਇਹ ਕਿੰਨੇ ਕੁਦਰਤੀ ਅਤੇ ਲਾਭਦਾਇਕ ਹਨ।
+ਇਹ ਹੈ ਜੋ ਅਸੀਂ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ: ਇੱਕ ਟੈਰੀਅਰੀਅਮ ਜਿੱਥੇ ਯੂਜ਼ਰ ਪੌਦਿਆਂ ਨੂੰ ਕਿਤੇ ਵੀ ਖਿੱਚ ਕੇ ਰੱਖ ਸਕਦੇ ਹਨ। ਤੁਸੀਂ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਤਕਨੀਕਾਂ ਨੂੰ ਸਿੱਖੋਗੇ ਜੋ ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ ਫਾਈਲ ਅੱਪਲੋਡ ਤੋਂ ਲੈ ਕੇ ਇੰਟਰਐਕਟਿਵ ਗੇਮਾਂ ਤੱਕ ਸਭ ਕੁਝ ਸੰਭਾਲਦੇ ਹਨ। ਆਓ ਤੁਹਾਡੇ ਟੈਰੀਅਰੀਅਮ ਨੂੰ ਜ਼ਿੰਦਾ ਕਰੀਏ।
 
-ਇਹ ਹੈ ਜੋ ਅਸੀਂ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ: ਇੱਕ ਟੈਰੀਅਰਿਅਮ ਜਿੱਥੇ ਯੂਜ਼ਰ ਪੌਦਿਆਂ ਨੂੰ ਕਿਤੇ ਵੀ ਖਿੱਚ ਕੇ ਰੱਖ ਸਕਦੇ ਹਨ। ਤੁਸੀਂ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਤਕਨੀਕਾਂ ਨੂੰ ਸਿੱਖੋਗੇ ਜੋ ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ ਫਾਈਲ ਅੱਪਲੋਡ ਤੋਂ ਲੈ ਕੇ ਇੰਟਰਐਕਟਿਵ ਗੇਮਾਂ ਤੱਕ ਸਭ ਕੁਝ ਸੰਭਾਲਦੇ ਹਨ। ਆਓ ਤੁਹਾਡੇ ਟੈਰੀਅਰਿਅਮ ਨੂੰ ਜ਼ਿੰਦਾ ਕਰੀਏ।
+```mermaid
+mindmap
+  root((DOM & JavaScript))
+    DOM Tree
+      Element Selection
+      Property Access
+      Event Handling
+      Dynamic Updates
+    Events
+      Pointer Events
+      Mouse Events
+      Touch Events
+      Event Listeners
+    Closures
+      Private Variables
+      Function Scope
+      Memory Persistence
+      State Management
+    Drag & Drop
+      Position Tracking
+      Coordinate Math
+      Event Lifecycle
+      User Interaction
+    Modern Patterns
+      Event Delegation
+      Performance
+      Cross-Device
+      Accessibility
+```
 
-## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
+## ਪੂਰਵ-ਵਿਦਿਆ ਪੜਾਅ ਕਵਿਜ਼
 
-[ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/19)
+[ਪੂਰਵ-ਵਿਦਿਆ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/19)
 
 ## DOM ਨੂੰ ਸਮਝਣਾ: ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਪੇਜਾਂ ਲਈ ਤੁਹਾਡਾ ਗੇਟਵੇ
 
-ਡੌਕਯੂਮੈਂਟ ਓਬਜੈਕਟ ਮਾਡਲ (DOM) ਉਹ ਹੈ ਜਿਵੇਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੁਹਾਡੇ HTML ਐਲੀਮੈਂਟਸ ਨਾਲ ਸੰਚਾਰ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ HTML ਪੇਜ ਨੂੰ ਲੋਡ ਕਰਦਾ ਹੈ, ਇਹ ਉਸ ਪੇਜ ਦੀ ਇੱਕ ਸੰਰਚਿਤ ਪ੍ਰਤੀਨਿਧਤਾ ਨੂੰ ਯਾਦاشت ਵਿੱਚ ਬਣਾਉਂਦਾ ਹੈ - ਇਹ DOM ਹੈ। ਇਸਨੂੰ ਇੱਕ ਪਰਿਵਾਰਕ ਦਰੱਖਤ ਵਾਂਗ ਸੋਚੋ ਜਿੱਥੇ ਹਰ HTML ਐਲੀਮੈਂਟ ਇੱਕ ਪਰਿਵਾਰਕ ਮੈਂਬਰ ਹੈ ਜਿਸਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਹੁੰਚ, ਸੋਧ, ਜਾਂ ਦੁਬਾਰਾ ਵਿਵਸਥਿਤ ਕਰ ਸਕਦਾ ਹੈ।
+ਡੌਕਯੂਮੈਂਟ ਓਬਜੈਕਟ ਮਾਡਲ (DOM) ਇਹ ਹੈ ਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੁਹਾਡੇ HTML ਐਲੀਮੈਂਟਾਂ ਨਾਲ ਕਿਵੇਂ ਸੰਚਾਰ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ HTML ਪੇਜ ਨੂੰ ਲੋਡ ਕਰਦਾ ਹੈ, ਇਹ ਉਸ ਪੇਜ ਦੀ ਇੱਕ ਸੰਰਚਿਤ ਪ੍ਰਤੀਨਿਧੀ ਯਾਦاشت ਵਿੱਚ ਬਣਾਉਂਦਾ ਹੈ - ਇਹ DOM ਹੈ। ਇਸਨੂੰ ਇੱਕ ਪਰਿਵਾਰਕ ਦਰਖਤ ਵਾਂਗ ਸੋਚੋ ਜਿੱਥੇ ਹਰ HTML ਐਲੀਮੈਂਟ ਇੱਕ ਪਰਿਵਾਰਕ ਮੈਂਬਰ ਹੈ ਜਿਸਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਹੁੰਚ, ਸੋਧ, ਜਾਂ ਦੁਬਾਰਾ ਵਿਵਸਥਿਤ ਕਰ ਸਕਦਾ ਹੈ।
 
-DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਸਥਿਰ ਪੇਜਾਂ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬਸਾਈਟਾਂ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਨੂੰ ਹਵਰ ਕਰਨ 'ਤੇ ਰੰਗ ਬਦਲਦੇ ਵੇਖਦੇ ਹੋ, ਪੇਜ ਰੀਫ੍ਰੈਸ਼ ਤੋਂ ਬਿਨਾਂ ਸਮੱਗਰੀ ਅੱਪਡੇਟ ਹੁੰਦੀ ਹੈ, ਜਾਂ ਐਲੀਮੈਂਟਸ ਨੂੰ ਤੁਸੀਂ ਖਿੱਚ ਸਕਦੇ ਹੋ, ਇਹ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਦਾ ਕੰਮ ਹੈ।
+DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਸਥਿਰ ਪੇਜਾਂ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬਸਾਈਟਾਂ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਨੂੰ ਹਵਰ ਕਰਨ 'ਤੇ ਰੰਗ ਬਦਲਦੇ ਹੋ, ਸਮੱਗਰੀ ਨੂੰ ਪੇਜ ਰੀਫ੍ਰੈਸ਼ ਤੋਂ ਬਿਨਾਂ ਅਪਡੇਟ ਕਰਦੇ ਹੋ, ਜਾਂ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਖਿੱਚਦੇ ਹੋ, ਇਹ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਦਾ ਕੰਮ ਹੈ।
 
-![DOM ਦਰੱਖਤ ਦੀ ਪ੍ਰਤੀਨਿਧਤਾ](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.pa.png)
+```mermaid
+flowchart TD
+    A["Document"] --> B["HTML"]
+    B --> C["Head"]
+    B --> D["Body"]
+    C --> E["Title"]
+    C --> F["Meta Tags"]
+    D --> G["H1: My Terrarium"]
+    D --> H["Div: Page Container"]
+    H --> I["Div: Left Container"]
+    H --> J["Div: Right Container"]
+    H --> K["Div: Terrarium"]
+    I --> L["Plant Elements 1-7"]
+    J --> M["Plant Elements 8-14"]
+    
+    L --> N["img#plant1"]
+    L --> O["img#plant2"]
+    M --> P["img#plant8"]
+    M --> Q["img#plant9"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style D fill:#e8f5e8
+    style H fill:#fff3e0
+    style N fill:#ffebee
+    style O fill:#ffebee
+    style P fill:#ffebee
+    style Q fill:#ffebee
+```
 
-> DOM ਅਤੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਇੱਕ ਪ੍ਰਤੀਨਿਧਤਾ ਜੋ ਇਸਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ਤੋਂ
+![DOM ਦਰਖਤ ਦੀ ਪ੍ਰਤੀਨਿਧੀ](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.pa.png)
+
+> DOM ਅਤੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਪ੍ਰਤੀਨਿਧੀ ਜੋ ਇਸਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। [ਓਲਫਾ ਨਸਰਾਊਈ](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ਤੋਂ
 
 **ਇਹ ਹੈ ਜੋ DOM ਨੂੰ ਸ਼ਕਤੀਸ਼ਾਲੀ ਬਣਾਉਂਦਾ ਹੈ:**
 - **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਤੁਹਾਡੇ ਪੇਜ ਦੇ ਕਿਸੇ ਵੀ ਐਲੀਮੈਂਟ ਨੂੰ ਪਹੁੰਚ ਕਰਨ ਦਾ ਇੱਕ ਸੰਰਚਿਤ ਤਰੀਕਾ
-- **ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ** ਪੇਜ ਰੀਫ੍ਰੈਸ਼ ਤੋਂ ਬਿਨਾਂ ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਅੱਪਡੇਟ
-- **ਅਨੁਮਤੀ ਦਿੰਦਾ ਹੈ** ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਜਿਵੇਂ ਕਿ ਕਲਿਕ ਅਤੇ ਡ੍ਰੈਗਸ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਪ੍ਰਤੀਕ੍ਰਿਆ
-- **ਨਿਰਮਾਣ ਕਰਦਾ ਹੈ** ਆਧੁਨਿਕ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਲਈ ਅਧਾਰ
+- **ਸਮਰਥਨ ਕਰਦਾ ਹੈ** ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਅਪਡੇਟ ਬਿਨਾਂ ਪੇਜ ਰੀਫ੍ਰੈਸ਼
+- **ਸਮਰਥਨ ਕਰਦਾ ਹੈ** ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਜਿਵੇਂ ਕਿ ਕਲਿਕ ਅਤੇ ਡ੍ਰੈਗ ਲਈ ਤੁਰੰਤ ਪ੍ਰਤੀਕ੍ਰਿਆ
+- **ਨਿਰਮਾਣ ਕਰਦਾ ਹੈ** ਆਧੁਨਿਕ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਆਧਾਰ
 
 ## ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰਜ਼: ਸੰਗਠਿਤ, ਸ਼ਕਤੀਸ਼ਾਲੀ ਕੋਡ ਬਣਾਉਣਾ
 
-ਇੱਕ [ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਆਪਣਾ ਨਿੱਜੀ ਵਰਕਸਪੇਸ ਮਿਲਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਯਾਦاشت ਸਥਿਰ ਰਹਿੰਦੀ ਹੈ। ਸੋਚੋ ਕਿ ਕਿਵੇਂ ਗੈਲਾਪਾਗੋਸ ਟਾਪੂਆਂ 'ਤੇ ਡਾਰਵਿਨ ਦੇ ਫਿੰਚਜ਼ ਨੇ ਆਪਣੇ ਖਾਸ ਵਾਤਾਵਰਣ ਦੇ ਅਧਾਰ 'ਤੇ ਵਿਸ਼ੇਸ਼ ਚੋਚਾਂ ਵਿਕਸਿਤ ਕੀਤੀਆਂ - ਕਲੋਜ਼ਰਜ਼ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਵਿਸ਼ੇਸ਼ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਨ ਜੋ ਆਪਣੇ ਖਾਸ ਸੰਦਰਭ ਨੂੰ "ਯਾਦ" ਰੱਖਦੇ ਹਨ।
+ਇੱਕ [ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ਇਹ ਹੈ ਕਿ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਆਪਣਾ ਨਿੱਜੀ ਵਰਕਸਪੇਸ ਦੇਣਾ ਜਿਸ ਵਿੱਚ ਸਥਾਈ ਯਾਦاشت ਹੁੰਦੀ ਹੈ। ਸੋਚੋ ਕਿ ਗਾਲਾਪਾਗੋਸ ਆਈਲੈਂਡਸ ਦੇ ਡਾਰਵਿਨ ਦੇ ਫਿੰਚਾਂ ਨੇ ਆਪਣੇ ਖਾਸ ਵਾਤਾਵਰਣ ਦੇ ਅਧਾਰ 'ਤੇ ਵਿਸ਼ੇਸ਼ ਬੀਕਾਂ ਵਿਕਸਿਤ ਕੀਤੀਆਂ - ਕਲੋਜ਼ਰਜ਼ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਵਿਸ਼ੇਸ਼ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਨ ਜੋ ਆਪਣੇ ਖਾਸ ਸੰਦਰਭ ਨੂੰ "ਯਾਦ" ਰੱਖਦੇ ਹਨ ਭਾਵੇਂ ਉਹਨਾਂ ਦੇ ਪੇਰੈਂਟ ਫੰਕਸ਼ਨ ਨੇ ਆਪਣਾ ਕੰਮ ਮੁਕੰਮਲ ਕਰ ਲਿਆ ਹੋਵੇ।
+
+ਸਾਡੇ ਟੈਰੀਅਰੀਅਮ ਵਿੱਚ, ਕਲੋਜ਼ਰਜ਼ ਹਰ ਪੌਦੇ ਨੂੰ ਆਪਣੀ ਸਥਿਤੀ ਨੂੰ ਅਜ਼ਾਦੀ ਨਾਲ ਯਾਦ ਰੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਇਹ ਪੈਟਰਨ ਪੇਸ਼ੇਵਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿਕਾਸ ਵਿੱਚ ਹਰ ਜਗ੍ਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਜਿਸਨੂੰ ਸਮਝਣਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਧਾਰਨਾ ਹੈ।
 
-ਸਾਡੇ ਟੈਰੀਅਰਿਅਮ ਵਿੱਚ, ਕਲੋਜ਼ਰਜ਼ ਹਰ ਪੌਦੇ ਨੂੰ ਆਪਣੀ ਸਥਿਤੀ ਨੂੰ ਅਜ਼ਾਦੀ ਨਾਲ ਯਾਦ ਰੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਇਹ ਪੈਟਰਨ ਪੇਸ਼ੇਵਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿਕਾਸ ਵਿੱਚ ਹਰ ਜਗ੍ਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਇਹ ਸਮਝਣ ਲਈ ਇੱਕ ਕੀਮਤੀ ਧਾਰਨਾ ਬਣ ਜਾਂਦੀ ਹੈ।
+```mermaid
+flowchart LR
+    A["dragElement(plant1)"] --> B["Creates Closure"]
+    A2["dragElement(plant2)"] --> B2["Creates Closure"]
+    
+    B --> C["Private Variables"]
+    B2 --> C2["Private Variables"]
+    
+    C --> D["pos1, pos2, pos3, pos4"]
+    C --> E["pointerDrag function"]
+    C --> F["elementDrag function"]
+    C --> G["stopElementDrag function"]
+    
+    C2 --> D2["pos1, pos2, pos3, pos4"]
+    C2 --> E2["pointerDrag function"]
+    C2 --> F2["elementDrag function"]
+    C2 --> G2["stopElementDrag function"]
+    
+    H["Plant 1 remembers its position"] --> B
+    H2["Plant 2 remembers its position"] --> B2
+    
+    style B fill:#e8f5e8
+    style B2 fill:#e8f5e8
+    style C fill:#fff3e0
+    style C2 fill:#fff3e0
+```
 
-> 💡 **ਕਲੋਜ਼ਰਜ਼ ਨੂੰ ਸਮਝਣਾ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਕਲੋਜ਼ਰਜ਼ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ਾ ਹਨ, ਅਤੇ ਕਈ ਡਿਵੈਲਪਰ ਇਸਨੂੰ ਸਾਲਾਂ ਤੱਕ ਵਰਤਦੇ ਹਨ ਬਿਨਾਂ ਇਸਦੇ ਸਾਰੇ ਸਿਧਾਂਤਕ ਪਹਲੂਆਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਝਣ ਦੇ। ਅੱਜ, ਅਸੀਂ ਵਿਵਹਾਰਕ ਅਰਜ਼ੀ 'ਤੇ ਧਿਆਨ ਦੇ ਰਹੇ ਹਾਂ - ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਕਲੋਜ਼ਰਜ਼ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਉਭਰਦੇ ਹਨ ਜਦੋਂ ਅਸੀਂ ਆਪਣੇ ਇੰਟਰਐਕਟਿਵ ਫੀਚਰ ਬਣਾਉਂਦੇ ਹਾਂ। ਸਮਝਦਾਰੀ ਵਿਕਸਿਤ ਹੋਵੇਗੀ ਜਦੋਂ ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਅਸਲ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰਦੇ ਹਨ।
+> 💡 **ਕਲੋਜ਼ਰਜ਼ ਨੂੰ ਸਮਝਣਾ**: ਕਲੋਜ਼ਰਜ਼ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ਾ ਹਨ, ਅਤੇ ਕਈ ਡਿਵੈਲਪਰ ਇਸਨੂੰ ਸਾਲਾਂ ਤੱਕ ਵਰਤਦੇ ਹਨ ਬਿਨਾਂ ਇਸਦੇ ਸਾਰੇ ਸਿਧਾਂਤਕ ਪਹਲੂਆਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਝਣ ਦੇ। ਅੱਜ, ਅਸੀਂ ਵਿਵਹਾਰਕ ਅਰਜ਼ੀ 'ਤੇ ਧਿਆਨ ਦੇ ਰਹੇ ਹਾਂ - ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਕਲੋਜ਼ਰਜ਼ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਉਭਰਦੇ ਹਨ ਜਦੋਂ ਅਸੀਂ ਆਪਣੀਆਂ ਇੰਟਰਐਕਟਿਵ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਣਾਉਂਦੇ ਹਾਂ। ਸਮਝਣਾ ਵਿਕਸਿਤ ਹੋਵੇਗਾ ਜਦੋਂ ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਅਸਲ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰਦੇ ਹਨ।
 
-![DOM ਦਰੱਖਤ ਦੀ ਪ੍ਰਤੀਨਿਧਤਾ](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.pa.png)
+![DOM ਦਰਖਤ ਦੀ ਪ੍ਰਤੀਨਿਧੀ](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.pa.png)
 
-> DOM ਅਤੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਇੱਕ ਪ੍ਰਤੀਨਿਧਤਾ ਜੋ ਇਸਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ਤੋਂ
+> DOM ਅਤੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਪ੍ਰਤੀਨਿਧੀ ਜੋ ਇਸਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। [ਓਲਫਾ ਨਸਰਾਊਈ](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ਤੋਂ
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਆਪਣੇ ਇੰਟਰਐਕਟਿਵ ਟੈਰੀਅਰਿਅਮ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਪੂਰਾ ਕਰਾਂਗੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਉਣ ਦੁਆਰਾ ਜੋ ਯੂਜ਼ਰ ਨੂੰ ਪੇਜ 'ਤੇ ਪੌਦਿਆਂ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੀ ਅਨੁਮਤੀ ਦੇਵੇਗਾ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਆਪਣਾ ਇੰਟਰਐਕਟਿਵ ਟੈਰੀਅਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਪੂਰਾ ਕਰਾਂਗੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਕੇ ਜੋ ਯੂਜ਼ਰ ਨੂੰ ਪੇਜ 'ਤੇ ਪੌਦਿਆਂ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਵੇਗਾ।
 
-## ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ: ਸਫਲਤਾ ਲਈ ਸੈਟਅੱਪ
+## ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ: ਸਫਲਤਾ ਲਈ ਸੈਟਅਪ
 
-ਤੁਹਾਨੂੰ ਪਿਛਲੇ ਟੈਰੀਅਰਿਅਮ ਪਾਠਾਂ ਤੋਂ ਆਪਣੇ HTML ਅਤੇ CSS ਫਾਈਲਾਂ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇਗੀ - ਅਸੀਂ ਉਸ ਸਥਿਰ ਡਿਜ਼ਾਈਨ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਜੇ ਤੁਸੀਂ ਪਹਿਲੀ ਵਾਰ ਸ਼ਾਮਲ ਹੋ ਰਹੇ ਹੋ, ਉਹ ਪਾਠ ਪਹਿਲਾਂ ਪੂਰੇ ਕਰਨ ਨਾਲ ਮਹੱਤਵਪੂਰਨ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਹੋਵੇਗਾ।
+ਤੁਹਾਨੂੰ ਪਿਛਲੇ ਟੈਰੀਅਰੀਅਮ ਪਾਠਾਂ ਤੋਂ ਆਪਣੇ HTML ਅਤੇ CSS ਫਾਈਲਾਂ ਦੀ ਲੋੜ ਹੋਵੇਗੀ - ਅਸੀਂ ਉਸ ਸਥਿਰ ਡਿਜ਼ਾਈਨ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਜੇ ਤੁਸੀਂ ਪਹਿਲੀ ਵਾਰ ਸ਼ਾਮਲ ਹੋ ਰਹੇ ਹੋ, ਉਹ ਪਾਠ ਪੂਰੇ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰੇਗਾ।
 
 ਇਹ ਹੈ ਜੋ ਅਸੀਂ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ:
-- **ਸਮਰੂਥ ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ** ਸਾਰੇ ਟੈਰੀਅਰਿਅਮ ਪੌਦਿਆਂ ਲਈ
+- **ਸਮਰਥ ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ** ਸਾਰੇ ਟੈਰੀਅਰੀਅਮ ਪੌਦਿਆਂ ਲਈ
 - **ਕੋਆਰਡੀਨੇਟ ਟ੍ਰੈਕਿੰਗ** ਤਾਂ ਜੋ ਪੌਦੇ ਆਪਣੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਯਾਦ ਰੱਖਣ
 - **ਪੂਰੀ ਇੰਟਰਐਕਟਿਵ ਇੰਟਰਫੇਸ** ਵੈਨਿਲਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
 - **ਸਾਫ਼, ਸੰਗਠਿਤ ਕੋਡ** ਕਲੋਜ਼ਰ ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
 
-## ਆਪਣੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲ ਸੈਟਅੱਪ ਕਰਨਾ
+## ਆਪਣੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲ ਸੈਟਅਪ ਕਰਨਾ
 
-ਆਓ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲ ਬਣਾਈਏ ਜੋ ਤੁਹਾਡੇ ਟੈਰੀਅਰਿਅਮ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਬਣਾਏਗੀ।
+ਆਓ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲ ਬਣਾਈਏ ਜੋ ਤੁਹਾਡੇ ਟੈਰੀਅਰੀਅਮ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਬਣਾਏਗੀ।
 
-**ਪਦਮ 1: ਆਪਣੀ ਸਕ੍ਰਿਪਟ ਫਾਈਲ ਬਣਾਓ**
+**ਕਦਮ 1: ਆਪਣੀ ਸਕ੍ਰਿਪਟ ਫਾਈਲ ਬਣਾਓ**
 
-ਆਪਣੇ ਟੈਰੀਅਰਿਅਮ ਫੋਲਡਰ ਵਿੱਚ, `script.js` ਨਾਮ ਦੀ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ।
+ਆਪਣੇ ਟੈਰੀਅਰੀਅਮ ਫੋਲਡਰ ਵਿੱਚ, `script.js` ਨਾਮ ਦੀ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ।
 
-**ਪਦਮ 2: ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਆਪਣੇ HTML ਨਾਲ ਜੋੜੋ**
+**ਕਦਮ 2: ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਆਪਣੇ HTML ਨਾਲ ਜੋੜੋ**
 
 ਇਹ ਸਕ੍ਰਿਪਟ ਟੈਗ ਨੂੰ ਆਪਣੇ `index.html` ਫਾਈਲ ਦੇ `<head>` ਸੈਕਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ:
 
@@ -79,22 +183,22 @@ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਸਥਿਰ ਪੇਜਾਂ ਨੂੰ ਇ
 ```
 
 **ਕਿਉਂ `defer` ਐਟ੍ਰਿਬਿਊਟ ਮਹੱਤਵਪੂਰਨ ਹੈ:**
-- **ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ** ਕਿ ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਾਰੇ HTML ਲੋਡ ਹੋਣ ਤੱਕ ਉਡੀਕ ਕਰਦਾ ਹੈ
-- **ਰੋਕਦਾ ਹੈ** ਉਹ ਗਲਤੀਆਂ ਜਿੱਥੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਐਲੀਮੈਂਟਸ ਦੀ ਖੋਜ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਅਜੇ ਤਿਆਰ ਨਹੀਂ ਹਨ
-- **ਗਰੰਟੀ ਦਿੰਦਾ ਹੈ** ਕਿ ਤੁਹਾਡੇ ਸਾਰੇ ਪੌਦੇ ਦੇ ਐਲੀਮੈਂਟਸ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਉਪਲਬਧ ਹਨ
-- **ਬਿਹਤਰ ਪ੍ਰਦਰਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਪੇਜ ਦੇ ਤਲ 'ਤੇ ਸਕ੍ਰਿਪਟਸ ਰੱਖਣ ਦੇ ਮੁਕਾਬਲੇ
+- **ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ** ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਾਰੇ HTML ਲੋਡ ਹੋਣ ਤੱਕ ਉਡੀਕ ਕਰਦਾ ਹੈ
+- **ਰੋਕਦਾ ਹੈ** ਉਹ ਗਲਤੀਆਂ ਜਿੱਥੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਉਹ ਐਲੀਮੈਂਟਾਂ ਦੀ ਖੋਜ ਕਰਦਾ ਹੈ ਜੋ ਅਜੇ ਤਿਆਰ ਨਹੀਂ ਹਨ
+- **ਗਰੰਟੀ ਕਰਦਾ ਹੈ** ਸਾਰੇ ਪੌਦੇ ਦੇ ਐਲੀਮੈਂਟ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਉਪਲਬਧ ਹਨ
+- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਪੇਜ ਦੇ ਤਲ 'ਤੇ ਸਕ੍ਰਿਪਟਾਂ ਰੱਖਣ ਨਾਲੋਂ ਬਿਹਤਰ ਪ੍ਰਦਰਸ਼ਨ
 
-> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਨੋਟ**: `defer` ਐਟ੍ਰਿਬਿਊਟ ਆਮ ਸਮੇਂ ਦੇ ਮੁੱਦਿਆਂ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਇਸਦੇ ਬਿਨਾਂ, ਜਾਵਾਸਕ੍ਰਿਪਟ HTML ਐਲੀਮੈਂਟਸ ਨੂੰ ਪਹੁੰਚ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਸਕਦਾ ਹੈ ਜਦੋਂ ਉਹ ਲੋਡ ਨਹੀਂ ਹੋਏ ਹੁੰਦੇ, ਜਿਸ ਨਾਲ ਗਲਤੀਆਂ ਹੁੰਦੀਆਂ ਹਨ।
+> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਨੋਟ**: `defer` ਐਟ੍ਰਿਬਿਊਟ ਆਮ ਸਮੇਂ ਦੇ ਮਸਲਿਆਂ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਇਸਦੇ ਬਿਨਾਂ, ਜਾਵਾਸਕ੍ਰਿਪਟ HTML ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਪਹੁੰਚਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਸਕਦਾ ਹੈ ਜਦੋਂ ਉਹ ਲੋਡ ਨਹੀਂ ਹੋਏ ਹੁੰਦੇ, ਜਿਸ ਨਾਲ ਗਲਤੀਆਂ ਹੁੰਦੀਆਂ ਹਨ।
 
 ---
 
-## ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਤੁਹਾਡੇ HTML ਐਲੀਮੈਂਟਸ ਨਾਲ ਜੋੜਨਾ
+## ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਤੁਹਾਡੇ HTML ਐਲੀਮੈਂਟਾਂ ਨਾਲ ਜੋੜਨਾ
 
-ਜਦੋਂ ਤੱਕ ਅਸੀਂ ਐਲੀਮੈਂਟਸ ਨੂੰ ਡ੍ਰੈਗ ਕਰਨ ਯੋਗ ਨਹੀਂ ਬਣਾਉਂਦੇ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ DOM ਵਿੱਚ ਉਨ੍ਹਾਂ ਨੂੰ ਲੱਭਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ। ਇਸਨੂੰ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਕੈਟਾਲਾਗਿੰਗ ਸਿਸਟਮ ਵਾਂਗ ਸੋਚੋ - ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਕੈਟਾਲਾਗ ਨੰਬਰ ਹੁੰਦਾ ਹੈ, ਤੁਸੀਂ ਸਹੀ ਤੌਰ 'ਤੇ ਉਹ ਕਿਤਾਬ ਲੱਭ ਸਕਦੇ ਹੋ ਜਿਸਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ ਅਤੇ ਇਸਦੇ ਸਾਰੇ ਸਮੱਗਰੀ ਨੂੰ ਪਹੁੰਚ ਸਕਦੇ ਹੋ।
+ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਐਲੀਮੈਂਟ ਡ੍ਰੈਗ ਕਰਨ ਯੋਗ ਹਨ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ DOM ਵਿੱਚ ਉਹਨਾਂ ਨੂੰ ਲੱਭਣ ਦੀ ਲੋੜ ਹੈ। ਇਸਨੂੰ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਕੈਟਾਲੌਗਿੰਗ ਸਿਸਟਮ ਵਾਂਗ ਸੋਚੋ - ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਕੈਟਾਲੌਗ ਨੰਬਰ ਹੁੰਦਾ ਹੈ, ਤੁਸੀਂ ਸਹੀ ਕਿਤਾਬ ਲੱਭ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸਦੀ ਸਾਰੀ ਸਮੱਗਰੀ ਨੂੰ ਪਹੁੰਚ ਸਕਦੇ ਹੋ।
 
-ਅਸੀਂ `document.getElementById()` ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਇਹ ਕਨੈਕਸ਼ਨ ਬਣਾਉਣ ਲਈ। ਇਹ ਇੱਕ ਸਹੀ ਫਾਈਲਿੰਗ ਸਿਸਟਮ ਹੋਣ ਵਾਂਗ ਹੈ - ਤੁਸੀਂ ਇੱਕ ID ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋ, ਅਤੇ ਇਹ ਸਹੀ ਤੌਰ 'ਤੇ ਉਹ ਐਲੀਮੈਂਟ ਲੱਭਦਾ ਹੈ ਜਿਸਦੀ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ HTML ਵਿੱਚ ਲੋੜ ਹੈ।
+ਅਸੀਂ `document.getElementById()` ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਇਹ ਕਨੈਕਸ਼ਨ ਬਣਾਉਣ ਲਈ। ਇਹ ਇੱਕ ਸਹੀ ਫਾਈਲਿੰਗ ਸਿਸਟਮ ਵਾਂਗ ਹੈ - ਤੁਸੀਂ ਇੱਕ ID ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋ, ਅਤੇ ਇਹ ਸਹੀ ਐਲੀਮੈਂਟ ਨੂੰ ਤੁਹਾਡੇ HTML ਵਿੱਚ ਲੱਭਦਾ ਹੈ।
 
-### ਸਾਰੇ ਪੌਦਿਆਂ ਲਈ ਡ੍ਰੈਗ ਫੰਕਸ਼ਨਾਲਿਟੀ ਨੂੰ ਯੋਗ ਬਣਾਉਣਾ
+### ਸਾਰੇ ਪੌਦਿਆਂ ਲਈ ਡ੍ਰੈਗ ਫੰਕਸ਼ਨਾਲਿਟੀ ਨੂੰ ਸਮਰਥ ਬਣਾਉਣਾ
 
 ਇਹ ਕੋਡ ਆਪਣੇ `script.js` ਫਾਈਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ:
 
@@ -116,33 +220,120 @@ dragElement(document.getElementById('plant13'));
 dragElement(document.getElementById('plant14'));
 ```
 
-**ਇਹ ਕੋਡ ਕੀ ਹਾਸਲ ਕਰਦਾ ਹੈ:**
+**ਇਹ ਕੋਡ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ:**
 - **DOM ਵਿੱਚ** ਹਰ ਪੌਦੇ ਦੇ ਐਲੀਮੈਂਟ ਨੂੰ ਇਸਦੇ ਵਿਸ਼ੇਸ਼ ID ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੱਭਦਾ ਹੈ
-- **ਹਰ HTML ਐਲੀਮੈਂਟ ਲਈ** ਇੱਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਿਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ
-- **ਹਰ ਐਲੀਮੈਂਟ ਨੂੰ** `dragElement` ਫੰਕਸ਼ਨ (ਜਿਸਨੂੰ ਅਸੀਂ ਅਗਲੇ ਪਦਮ ਵਿੱਚ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ) ਵਿੱਚ ਭੇਜਦਾ ਹੈ
+- **JavaScript ਰਿਫਰੈਂਸ** ਨੂੰ ਹਰ HTML ਐਲੀਮੈਂਟ ਲਈ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ
+- **ਹਰ ਐਲੀਮੈਂਟ ਨੂੰ** `dragElement` ਫੰਕਸ਼ਨ (ਜਿਸਨੂੰ ਅਸੀਂ ਅਗਲੇ ਕਦਮ ਵਿੱਚ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ) ਵਿੱਚ ਪਾਸ ਕਰਦਾ ਹੈ
 - **ਹਰ ਪੌਦੇ ਨੂੰ** ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਤਿਆਰ ਕਰਦਾ ਹੈ
-- **ਤੁਹਾਡੇ HTML ਸਟ੍ਰਕਚਰ ਨੂੰ** ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨਾਲਿਟੀ ਨਾਲ ਜੋੜਦਾ ਹੈ
+- **ਤੁਹਾਡੇ HTML ਸੰਰਚਨਾ ਨੂੰ** ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨਾਲਿਟੀ ਨਾਲ ਜੋੜਦਾ ਹੈ
 
-> 🎯 **ਕਿਉਂ ID ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ ਕਲਾਸਾਂ ਦੀ ਬਜਾਏ?** ID ਵਿਸ਼ੇਸ਼ ਐਲੀਮੈਂਟਸ ਲਈ ਵਿਸ਼ੇਸ਼ ਪਛਾਣਕਰਤਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਜਦਕਿ CSS ਕਲਾਸਾਂ ਗਰੁੱਪਾਂ ਦੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸਜਾਉਣ ਲਈ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ। ਜਦੋਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਵਿਅਕਤੀਗਤ ਐਲੀਮੈਂਟਸ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ID ਸਾਨੂੰ ਲੋੜੀਂਦੀ ਸਹੀਤਾ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
+> 🎯 **ਕਿਉਂ ID ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਕਲਾਸਾਂ ਦੀ ਬਜਾਏ?** ID ਵਿਸ਼ੇਸ਼ ਐਲੀਮੈਂਟਾਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਪਛਾਣਕਰਤਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਜਦੋਂ ਕਿ CSS ਕਲਾਸਾਂ ਸਮੂਹਾਂ ਦੇ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ। ਜਦੋਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਵਿਸ਼ੇਸ਼ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ID ਸਾਨੂੰ ਜ਼ਰੂਰੀ ਸਹੀਤਾ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਧਿਆਨ ਦਿਓ ਕਿ ਅਸੀਂ ਹਰ ਪੌਦੇ ਲਈ ਅਲੱਗ-ਅਲੱਗ `dragElement()` ਨੂੰ ਕਾਲ ਕਰ ਰਹੇ ਹਾਂ। ਇਹ ਪਹੁੰਚ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਹਰ ਪੌਦੇ ਨੂੰ ਆਪਣਾ ਅਜ਼ਾਦ ਡ੍ਰੈਗਿੰਗ ਵਿਵਹਾਰ ਮਿਲਦਾ ਹੈ, ਜੋ ਸਹੀ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ।
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਧਿਆਨ ਦਿਓ ਕਿ ਅਸੀਂ ਹਰ ਪੌਦੇ ਲਈ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ `dragElement()` ਨੂੰ ਕਾਲ ਕਰ ਰਹੇ ਹਾਂ। ਇਹ ਪਹੁੰਚ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਹਰ ਪੌਦੇ ਨੂੰ ਆਪਣਾ ਅਜ਼ਾਦ ਡ੍ਰੈਗਿੰਗ ਵਿਵਹਾਰ ਮਿਲਦਾ ਹੈ, ਜੋ ਸਹੀ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ।
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**DOM ਕਨੈਕਸ਼ਨ ਸਮਝਣਾ**: ਡ੍ਰੈਗ ਫੰਕਸ਼ਨਾਲਿਟੀ ਵੱਲ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝ ਸਕਦੇ ਹੋ:
+- ✅ `document.getElementById()` HTML ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਕਿਵੇਂ ਲੱਭਦਾ ਹੈ
+- ✅ ਅਸੀਂ ਹਰ ਪੌਦੇ ਲਈ ਵਿਸ਼ੇਸ਼ ID ਕਿਉਂ ਵਰਤਦੇ ਹਾਂ
+- ✅ `defer` ਐਟ੍ਰਿਬਿਊਟ ਦਾ ਸਕ੍ਰਿਪਟ ਟੈਗ ਵਿੱਚ ਉਦੇਸ਼ ਕੀ ਹੈ
+- ✅ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਤੇ HTML DOM ਰਾਹੀਂ ਕਿਵੇਂ ਜੁੜਦੇ ਹਨ
+
+**ਤੁਰੰਤ ਸਵੈ-ਟੈਸਟ**: ਕੀ ਹੋਵੇਗਾ ਜੇ ਦੋ ਐਲੀਮੈਂਟਾਂ ਦੇ ਇੱਕੋ ਜਿਹੇ ID ਹੋਣ? ਕਿਉਂ `getElementById()` ਸਿਰਫ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ?
+*ਜਵਾਬ: ID ਵਿਸ਼ੇਸ਼ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ; ਜੇ ਦੁਹਰਾਏ ਗਏ, ਸਿਰਫ ਪਹਿਲਾ ਐਲੀਮੈਂਟ ਵਾਪਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ*
 
 ---
 
 ## ਡ੍ਰੈਗ ਐਲੀਮੈਂਟ ਕਲੋਜ਼ਰ ਬਣਾਉਣਾ
 
-ਹੁਣ ਅਸੀਂ ਆਪਣੀ ਡ੍ਰੈਗਿੰਗ ਫੰਕਸ਼ਨਾਲਿਟੀ ਦੇ ਕੇਂਦਰ ਨੂੰ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ: ਇੱਕ ਕਲੋਜ਼ਰ ਜੋ ਹਰ ਪੌਦੇ ਲਈ ਡ੍ਰੈਗਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।
-- **`pos3` ਅਤੇ `pos4`**: ਅਗਲੇ ਗਣਨਾ ਲਈ ਮੌਜੂਦਾ ਮਾਊਸ ਦੀ ਸਥਿਤੀ ਸਟੋਰ ਕਰੋ  
-- **`offsetTop` ਅਤੇ `offsetLeft`**: ਪੇਜ 'ਤੇ ਤੱਤ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਪ੍ਰਾਪਤ ਕਰੋ  
-- **ਘਟਾਉਣ ਦੀ ਤਰਕ**: ਤੱਤ ਨੂੰ ਉਨ੍ਹਾਂ ਹੀ ਮਾਤਰਾ ਨਾਲ ਹਿਲਾਓ ਜਿੰਨੀ ਮਾਊਸ ਹਿਲਿਆ  
+ਹੁਣ ਅਸੀਂ ਆਪਣੀ ਡ੍ਰੈਗਿੰਗ ਵਿਵਹਾਰ ਦੀ ਮੂਲ ਭਾਗ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ: ਇੱਕ ਕਲੋਜ਼ਰ ਜੋ ਹਰ ਪੌਦੇ ਲਈ ਡ੍ਰੈਗਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। ਇਹ ਕਲੋਜ਼ਰ ਕਈ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗਾ ਜੋ ਮਾਊਸ ਦੀ ਚਲਹ-ਚਲਹ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਅਤੇ ਐਲੀਮੈਂਟ ਸਥਿਤੀਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਇਕੱਠੇ ਕੰਮ ਕਰਦੇ ਹਨ।
+
+ਕਲੋਜ਼ਰਜ਼ ਇਸ ਕੰਮ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹਨ ਕਿਉਂਕਿ ਇਹ ਸਾਨੂੰ "ਨਿੱਜੀ" ਵੈਰੀਏਬਲ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ ਜੋ ਫੰਕਸ਼ਨ ਕਾਲਾਂ ਦੇ ਵਿਚਕਾਰ ਸਥਾਈ ਰਹਿੰਦੇ ਹਨ, ਹਰ ਪੌਦੇ ਲਈ ਆਪਣਾ ਅਜ਼ਾਦ ਕੋਆਰਡੀਨੇਟ ਟ੍ਰੈਕਿੰਗ ਸਿਸਟਮ ਬਣਾਉਂਦੇ ਹਨ।
+
+### ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਨ ਨਾਲ ਕਲੋਜ਼ਰਜ਼ ਨੂੰ ਸਮ
+**ਇਹ ਕੋਆਰਡੀਨੇਟਸ ਨੂੰ ਸਮਝਣਾ:**
+- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਪਿਕਸਲ-ਪਰਫੈਕਟ ਪੋਜ਼ੀਸ਼ਨ ਜਾਣਕਾਰੀ
+- **ਤੁਰੰਤ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ** ਜਦੋਂ ਯੂਜ਼ਰ ਆਪਣਾ ਪੌਇੰਟਰ ਹਿਲਾਉਂਦਾ ਹੈ
+- **ਸਥਿਰ ਰਹਿੰਦਾ ਹੈ** ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ ਅਤੇ ਜ਼ੂਮ ਲੈਵਲ 'ਤੇ
+- **ਸਮਰਥਨ ਕਰਦਾ ਹੈ** ਹੌਲੀ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਡਰੈਗ ਇੰਟਰੈਕਸ਼ਨ
+
+### ਡੌਕੂਮੈਂਟ-ਲੈਵਲ ਇਵੈਂਟ ਲਿਸਨਰ ਸੈਟਅਪ ਕਰਨਾ
+
+ਨੋਟ ਕਰੋ ਕਿ ਅਸੀਂ ਮੂਵ ਅਤੇ ਸਟਾਪ ਇਵੈਂਟਸ ਨੂੰ ਸਿਰਫ਼ ਪੌਦੇ ਦੇ ਐਲੀਮੈਂਟ ਨਹੀਂ, ਸਗੋਂ ਪੂਰੇ `document` ਨਾਲ ਜੁੜਦੇ ਹਾਂ:
+
+```javascript
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+
+**ਡੌਕੂਮੈਂਟ ਨਾਲ ਜੁੜਨ ਦਾ ਕਾਰਨ:**
+- **ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ** ਜਦੋਂ ਮਾਊਸ ਪੌਦੇ ਦੇ ਐਲੀਮੈਂਟ ਤੋਂ ਬਾਹਰ ਚਲਾ ਜਾਂਦਾ ਹੈ
+- **ਰੋਕਦਾ ਹੈ** ਡਰੈਗ ਵਿੱਚ ਰੁਕਾਵਟ ਜੇ ਯੂਜ਼ਰ ਤੇਜ਼ੀ ਨਾਲ ਹਿਲਦਾ ਹੈ
+- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਪੂਰੀ ਸਕ੍ਰੀਨ 'ਤੇ ਹੌਲੀ ਡਰੈਗਿੰਗ
+- **ਹੈਂਡਲ ਕਰਦਾ ਹੈ** ਐਜ ਕੇਸ ਜਿੱਥੇ ਕਰਸਰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਤੋਂ ਬਾਹਰ ਚਲਾ ਜਾਂਦਾ ਹੈ
+
+> ⚡ **ਪਰਫਾਰਮੈਂਸ ਨੋਟ**: ਅਸੀਂ ਡਰੈਗਿੰਗ ਰੁਕਣ 'ਤੇ ਇਨ੍ਹਾਂ ਡੌਕੂਮੈਂਟ-ਲੈਵਲ ਲਿਸਨਰਾਂ ਨੂੰ ਸਾਫ਼ ਕਰਾਂਗੇ ਤਾਂ ਜੋ ਮੈਮੋਰੀ ਲੀਕ ਅਤੇ ਪਰਫਾਰਮੈਂਸ ਸਮੱਸਿਆਵਾਂ ਤੋਂ ਬਚਿਆ ਜਾ ਸਕੇ।
 
-**ਇੱਥੇ ਮੂਵਮੈਂਟ ਗਣਨਾ ਦਾ ਵਿਸਥਾਰ ਹੈ:**  
-1. ਪੁਰਾਣੀ ਅਤੇ ਨਵੀਂ ਮਾਊਸ ਸਥਿਤੀਆਂ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ **ਮਾਪੋ**  
-2. ਮਾਊਸ ਦੀ ਹਿਲਾਵਟ ਦੇ ਅਧਾਰ 'ਤੇ ਤੱਤ ਨੂੰ ਕਿੰਨਾ ਹਿਲਾਉਣਾ ਹੈ **ਗਣਨਾ ਕਰੋ**  
-3. ਤੱਤ ਦੇ CSS ਸਥਿਤੀ ਦੇ ਗੁਣਾਂ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ **ਅੱਪਡੇਟ ਕਰੋ**  
-4. ਅਗਲੇ ਮੂਵਮੈਂਟ ਗਣਨਾ ਲਈ ਨਵੀਂ ਸਥਿਤੀ ਨੂੰ **ਸਟੋਰ ਕਰੋ**  
+## ਡਰੈਗ ਸਿਸਟਮ ਪੂਰਾ ਕਰਨਾ: ਮੂਵਮੈਂਟ ਅਤੇ ਕਲੀਨਅਪ
 
-### ਗਣਿਤ ਦੀ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਦੀ ਦ੍ਰਿਸ਼ਟੀਕੋਣ
+ਹੁਣ ਅਸੀਂ ਦੋ ਬਾਕੀ ਫੰਕਸ਼ਨ ਜੋੜਾਂਗੇ ਜੋ ਅਸਲ ਡਰੈਗਿੰਗ ਮੂਵਮੈਂਟ ਅਤੇ ਡਰੈਗਿੰਗ ਰੁਕਣ 'ਤੇ ਕਲੀਨਅਪ ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ। ਇਹ ਫੰਕਸ਼ਨ ਇਕੱਠੇ ਕੰਮ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਪੌਦੇ ਦੀ ਹੌਲੀ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮੂਵਮੈਂਟ ਬਣਾਈ ਜਾ ਸਕੇ।
+
+### `elementDrag` ਫੰਕਸ਼ਨ: ਮੂਵਮੈਂਟ ਟ੍ਰੈਕ ਕਰਨਾ
+
+`pointerDrag` ਦੇ ਬੰਦ ਕਰਲੀ ਬ੍ਰੈਕਟ ਤੋਂ ਬਾਅਦ `elementDrag` ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:
+
+```javascript
+function elementDrag(e) {
+    // Calculate the distance moved since the last event
+    pos1 = pos3 - e.clientX;  // Horizontal distance moved
+    pos2 = pos4 - e.clientY;  // Vertical distance moved
+    
+    // Update the current position tracking
+    pos3 = e.clientX;  // New current X position
+    pos4 = e.clientY;  // New current Y position
+    
+    // Apply the movement to the element's position
+    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
+}
+```
+
+**ਕੋਆਰਡੀਨੇਟ ਗਣਿਤ ਨੂੰ ਸਮਝਣਾ:**
+- **`pos1` ਅਤੇ `pos2`**: ਗਣਨਾ ਕਰਦਾ ਹੈ ਕਿ ਪਿਛਲੇ ਅਪਡੇਟ ਤੋਂ ਬਾਅਦ ਮਾਊਸ ਕਿੰਨਾ ਹਿਲਿਆ ਹੈ
+- **`pos3` ਅਤੇ `pos4`**: ਅਗਲੀ ਗਣਨਾ ਲਈ ਮੌਜੂਦਾ ਮਾਊਸ ਪੋਜ਼ੀਸ਼ਨ ਸਟੋਰ ਕਰਦਾ ਹੈ
+- **`offsetTop` ਅਤੇ `offsetLeft`**: ਪੇਜ 'ਤੇ ਐਲੀਮੈਂਟ ਦੀ ਮੌਜੂਦਾ ਪੋਜ਼ੀਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ
+- **ਘਟਾਓ ਲਾਜਿਕ**: ਐਲੀਮੈਂਟ ਨੂੰ ਉਨ੍ਹਾਂ ਹੀ ਮਾਤਰਾ ਨਾਲ ਹਿਲਾਉਂਦਾ ਹੈ ਜਿੰਨਾ ਮਾਊਸ ਹਿਲਿਆ
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    User->>Mouse: Start drag at (100, 50)
+    Mouse->>JavaScript: pointerdown event
+    JavaScript->>JavaScript: Store initial position (pos3=100, pos4=50)
+    JavaScript->>JavaScript: Setup move/up listeners
+    
+    User->>Mouse: Move to (110, 60)
+    Mouse->>JavaScript: pointermove event
+    JavaScript->>JavaScript: Calculate: pos1=10, pos2=10
+    JavaScript->>Plant: Update: left += 10px, top += 10px
+    Plant->>Plant: Render at new position
+    
+    User->>Mouse: Release at (120, 65)
+    Mouse->>JavaScript: pointerup event
+    JavaScript->>JavaScript: Remove listeners
+    JavaScript->>JavaScript: Reset for next drag
+```
+
+**ਇਹ ਹੈ ਮੂਵਮੈਂਟ ਗਣਨਾ ਦਾ ਵਿਸਥਾਰ:**
+1. **ਮਾਪਦਾ ਹੈ** ਪੁਰਾਣੇ ਅਤੇ ਨਵੇਂ ਮਾਊਸ ਪੋਜ਼ੀਸ਼ਨ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ
+2. **ਗਣਨਾ ਕਰਦਾ ਹੈ** ਕਿ ਮਾਊਸ ਮੂਵਮੈਂਟ ਦੇ ਅਧਾਰ 'ਤੇ ਐਲੀਮੈਂਟ ਨੂੰ ਕਿੰਨਾ ਹਿਲਾਉਣਾ ਹੈ
+3. **ਅਪਡੇਟ ਕਰਦਾ ਹੈ** ਐਲੀਮੈਂਟ ਦੇ CSS ਪੋਜ਼ੀਸ਼ਨ ਪ੍ਰਾਪਰਟੀਜ਼ ਨੂੰ ਤੁਰੰਤ
+4. **ਨਵਾਂ ਪੋਜ਼ੀਸ਼ਨ ਸਟੋਰ ਕਰਦਾ ਹੈ** ਅਗਲੀ ਮੂਵਮੈਂਟ ਗਣਨਾ ਲਈ ਬੇਸਲਾਈਨ ਵਜੋਂ
+
+### ਗਣਿਤ ਦੀ ਵਿਜ਼ੁਅਲ ਪ੍ਰਸਤੁਤੀ
 
 ```mermaid
 sequenceDiagram
@@ -155,10 +346,10 @@ sequenceDiagram
     JavaScript->>Plant: Update position by +10px right, +10px down
     Plant->>Plant: Render at new position
 ```
-  
-### stopElementDrag ਫੰਕਸ਼ਨ: ਸਾਫ਼-ਸੁਥਰਾ ਕਰਨਾ  
 
-`elementDrag` ਦੇ ਬੰਦ ਕਰਨ ਵਾਲੇ ਕਰਲੀ ਬ੍ਰੈਕਟ ਤੋਂ ਬਾਅਦ ਸਾਫ਼-ਸੁਥਰਾ ਕਰਨ ਵਾਲਾ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:  
+### `stopElementDrag` ਫੰਕਸ਼ਨ: ਕਲੀਨਅਪ
+
+`elementDrag` ਦੇ ਬੰਦ ਕਰਲੀ ਬ੍ਰੈਕਟ ਤੋਂ ਬਾਅਦ ਕਲੀਨਅਪ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:
 
 ```javascript
 function stopElementDrag() {
@@ -167,136 +358,122 @@ function stopElementDrag() {
     document.onpointermove = null;
 }
 ```
-  
-**ਸਾਫ਼-ਸੁਥਰਾ ਕਰਨਾ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ:**  
-- **ਰੋਕਦਾ ਹੈ** ਯਾਦاشت ਲੀਕ ਨੂੰ ਜੋ ਲੰਬੇ ਸਮੇਂ ਤੱਕ ਇਵੈਂਟ ਲਿਸਨਰਾਂ ਦੇ ਕਾਰਨ ਹੁੰਦੀ ਹੈ  
-- **ਰੋਕਦਾ ਹੈ** ਡ੍ਰੈਗਿੰਗ ਵਿਹਾਰ ਨੂੰ ਜਦੋਂ ਯੂਜ਼ਰ ਪੌਦੇ ਨੂੰ ਛੱਡਦਾ ਹੈ  
-- **ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ** ਹੋਰ ਤੱਤਾਂ ਨੂੰ ਅਜ਼ਾਦੀ ਨਾਲ ਡ੍ਰੈਗ ਕਰਨ ਲਈ  
-- **ਸਿਸਟਮ ਨੂੰ ਰੀਸੈਟ ਕਰਦਾ ਹੈ** ਅਗਲੇ ਡ੍ਰੈਗ ਓਪਰੇਸ਼ਨ ਲਈ  
-
-**ਸਾਫ਼-ਸੁਥਰਾ ਕਰਨ ਤੋਂ ਬਿਨਾਂ ਕੀ ਹੁੰਦਾ ਹੈ:**  
-- ਇਵੈਂਟ ਲਿਸਨਰ ਡ੍ਰੈਗਿੰਗ ਰੁਕਣ ਤੋਂ ਬਾਅਦ ਵੀ ਚੱਲਦੇ ਰਹਿੰਦੇ ਹਨ  
-- ਜਦੋਂ ਬੇਕਾਰ ਲਿਸਨਰਾਂ ਇਕੱਠੇ ਹੁੰਦੇ ਹਨ ਤਾਂ ਪ੍ਰਦਰਸ਼ਨ ਖਰਾਬ ਹੁੰਦਾ ਹੈ  
-- ਹੋਰ ਤੱਤਾਂ ਨਾਲ ਸੰਚਾਰ ਕਰਨ 'ਤੇ ਅਣਪ੍ਰਤੀਕਰਮਾਤਮਕ ਵਿਹਾਰ  
-- ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸਰੋਤਾਂ ਨੂੰ ਬੇਵਜ੍ਹਾ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ 'ਤੇ ਖਰਚਿਆ ਜਾਂਦਾ ਹੈ  
 
-### CSS ਸਥਿਤੀ ਦੇ ਗੁਣਾਂ ਨੂੰ ਸਮਝਣਾ  
+**ਕਲੀਨਅਪ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ:**
+- **ਰੋਕਦਾ ਹੈ** ਮੈਮੋਰੀ ਲੀਕਸ ਜੋ ਲੰਬੇ ਸਮੇਂ ਤੱਕ ਚੱਲਦੇ ਇਵੈਂਟ ਲਿਸਨਰਾਂ ਤੋਂ ਹੁੰਦੇ ਹਨ
+- **ਡਰੈਗਿੰਗ ਬਿਹੇਵਿਅਰ ਨੂੰ ਰੋਕਦਾ ਹੈ** ਜਦੋਂ ਯੂਜ਼ਰ ਪੌਦੇ ਨੂੰ ਛੱਡਦਾ ਹੈ
+- **ਦੂਜੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਅਜ਼ਾਦੀ ਦਿੰਦਾ ਹੈ** ਡਰੈਗ ਕਰਨ ਲਈ
+- **ਅਗਲੇ ਡਰੈਗ ਓਪਰੇਸ਼ਨ ਲਈ ਸਿਸਟਮ ਨੂੰ ਰੀਸੈਟ ਕਰਦਾ ਹੈ**
 
-ਸਾਡੇ ਡ੍ਰੈਗਿੰਗ ਸਿਸਟਮ ਦੋ ਮੁੱਖ CSS ਗੁਣਾਂ ਨੂੰ ਮੈਨਿਪੁਲੇਟ ਕਰਦਾ ਹੈ:  
+**ਕਲੀਨਅਪ ਨਾ ਕਰਨ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
+- ਇਵੈਂਟ ਲਿਸਨਰ ਡਰੈਗਿੰਗ ਰੁਕਣ ਤੋਂ ਬਾਅਦ ਵੀ ਚੱਲਦੇ ਰਹਿੰਦੇ ਹਨ
+- ਪਰਫਾਰਮੈਂਸ ਘਟਦਾ ਹੈ ਜਦੋਂ ਬੇਕਾਰ ਲਿਸਨਰ ਜਮ੍ਹਾਂ ਹੁੰਦੇ ਹਨ
+- ਦੂਜੇ ਐਲੀਮੈਂਟਸ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ 'ਤੇ ਅਣਪ੍ਰਤੀਕਰਮਾਤਮਕ ਵਿਹਾਰ ਹੁੰਦਾ ਹੈ
+- ਬ੍ਰਾਊਜ਼ਰ ਸਰੋਤਾਂ ਬੇਕਾਰ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ 'ਤੇ ਖਰਚ ਹੁੰਦੇ ਹਨ
 
-| ਗੁਣ | ਇਹ ਕੀ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ | ਅਸੀਂ ਇਸਨੂੰ ਕਿਵੇਂ ਵਰਤਦੇ ਹਾਂ |  
-|----------|------------------|---------------|  
-| `top` | ਉੱਪਰਲੇ ਕਿਨਾਰੇ ਤੋਂ ਦੂਰੀ | ਡ੍ਰੈਗ ਦੌਰਾਨ ਲੰਬਕਾਰੀ ਸਥਿਤੀ |  
-| `left` | ਖੱਬੇ ਕਿਨਾਰੇ ਤੋਂ ਦੂਰੀ | ਡ੍ਰੈਗ ਦੌਰਾਨ ਆੜ੍ਹਤੀ ਸਥਿਤੀ |  
+### CSS ਪੋਜ਼ੀਸ਼ਨ ਪ੍ਰਾਪਰਟੀਜ਼ ਨੂੰ ਸਮਝਣਾ
 
-**offset ਗੁਣਾਂ ਬਾਰੇ ਮੁੱਖ ਜਾਣਕਾਰੀ:**  
-- **`offsetTop`**: ਸਥਿਤੀ ਵਾਲੇ ਪੇਰੈਂਟ ਤੱਤ ਦੇ ਉੱਪਰ ਤੋਂ ਮੌਜੂਦਾ ਦੂਰੀ  
-- **`offsetLeft`**: ਸਥਿਤੀ ਵਾਲੇ ਪੇਰੈਂਟ ਤੱਤ ਦੇ ਖੱਬੇ ਤੋਂ ਮੌਜੂਦਾ ਦੂਰੀ  
-- **ਸਥਿਤੀ ਸੰਦਰਭ**: ਇਹ ਮੁੱਲ ਸਭ ਤੋਂ ਨੇੜਲੇ ਸਥਿਤੀ ਵਾਲੇ ਪੂਰਵਜ ਦੇ ਸਬੰਧ ਵਿੱਚ ਹੁੰਦੇ ਹਨ  
-- **ਰੀਅਲ-ਟਾਈਮ ਅੱਪਡੇਟ**: ਜਦੋਂ ਅਸੀਂ CSS ਗੁਣਾਂ ਨੂੰ ਬਦਲਦੇ ਹਾਂ ਤਾਂ ਤੁਰੰਤ ਬਦਲ ਜਾਂਦੇ ਹਨ  
+ਸਾਡਾ ਡਰੈਗਿੰਗ ਸਿਸਟਮ ਦੋ ਮੁੱਖ CSS ਪ੍ਰਾਪਰਟੀਜ਼ ਨੂੰ ਮੈਨਿਪੁਲੇਟ ਕਰਦਾ ਹੈ:
 
-> 🎯 **ਡਿਜ਼ਾਈਨ ਫਿਲਾਸਫੀ**: ਇਹ ਡ੍ਰੈਗ ਸਿਸਟਮ ਜਾਣ ਬੁੱਝ ਕੇ ਲਚਕਦਾਰ ਹੈ – ਕੋਈ "ਡ੍ਰਾਪ ਜ਼ੋਨ" ਜਾਂ ਪਾਬੰਦੀਆਂ ਨਹੀਂ ਹਨ। ਯੂਜ਼ਰ ਪੌਦਿਆਂ ਨੂੰ ਕਿਤੇ ਵੀ ਰੱਖ ਸਕਦੇ ਹਨ, ਜੋ ਉਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਡਿਜ਼ਾਈਨ 'ਤੇ ਪੂਰੀ ਰਚਨਾਤਮਕ ਨਿਯੰਤਰਣ ਦਿੰਦਾ ਹੈ।  
+| ਪ੍ਰਾਪਰਟੀ | ਇਹ ਕੀ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ | ਅਸੀਂ ਇਸਨੂੰ ਕਿਵੇਂ ਵਰਤਦੇ ਹਾਂ |
+|----------|------------------|---------------|
+| `top` | ਉੱਪਰਲੇ ਕਿਨਾਰੇ ਤੋਂ ਦੂਰੀ | ਡਰੈਗ ਦੌਰਾਨ ਵਰਟੀਕਲ ਪੋਜ਼ੀਸ਼ਨ |
+| `left` | ਖੱਬੇ ਕਿਨਾਰੇ ਤੋਂ ਦੂਰੀ | ਡਰੈਗ ਦੌਰਾਨ ਹੋਰਿਜ਼ੋਂਟਲ ਪੋਜ਼ੀਸ਼ਨ |
 
-## ਸਾਰਾ ਕੁਝ ਇਕੱਠਾ ਕਰਨਾ: ਤੁਹਾਡਾ ਪੂਰਾ ਡ੍ਰੈਗ ਸਿਸਟਮ  
+**ਆਫਸੈਟ ਪ੍ਰਾਪਰਟੀਜ਼ ਬਾਰੇ ਮੁੱਖ ਜਾਣਕਾਰੀ:**
+- **`offsetTop`**: ਪੋਜ਼ੀਸ਼ਨਡ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ ਤੋਂ ਮੌਜੂਦਾ ਦੂਰੀ
+- **`offsetLeft`**: ਪੋਜ਼ੀਸ਼ਨਡ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ ਤੋਂ ਮੌਜੂਦਾ ਦੂਰੀ
+- **ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਸੰਦਰਭ**: ਇਹ ਮੁੱਲ ਸਭ ਤੋਂ ਨੇੜਲੇ ਪੋਜ਼ੀਸ਼ਨਡ ਐਨਸੈਸਟਰ ਦੇ ਸਬੰਧ ਵਿੱਚ ਹੁੰਦੇ ਹਨ
+- **ਤੁਰੰਤ ਅਪਡੇਟਸ**: CSS ਪ੍ਰਾਪਰਟੀਜ਼ ਨੂੰ ਮੋਡੀਫਾਈ ਕਰਨ 'ਤੇ ਤੁਰੰਤ ਬਦਲ ਜਾਂਦੇ ਹਨ
 
-ਵਧਾਈ ਹੋਵੇ! ਤੁਸੀਂ ਵੈਨਿਲਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸੁਧਾਰਸ਼ੀਲ ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰਾਪ ਸਿਸਟਮ ਬਣਾਇਆ ਹੈ। ਤੁਹਾਡਾ ਪੂਰਾ `dragElement` ਫੰਕਸ਼ਨ ਹੁਣ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਕਲੋਜ਼ਰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜੋ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ:  
+> 🎯 **ਡਿਜ਼ਾਈਨ ਫਿਲਾਸਫੀ**: ਇਹ ਡਰੈਗ ਸਿਸਟਮ ਜ਼ਿਆਦਾਤਰ ਲਚਕਦਾਰ ਹੈ – ਕੋਈ "ਡ੍ਰਾਪ ਜ਼ੋਨ" ਜਾਂ ਪਾਬੰਦੀਆਂ ਨਹੀਂ ਹਨ। ਯੂਜ਼ਰ ਪੌਦੇ ਨੂੰ ਕਿਤੇ ਵੀ ਰੱਖ ਸਕਦੇ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਡਿਜ਼ਾਈਨ 'ਤੇ ਪੂਰਾ ਰਚਨਾਤਮਕ ਕੰਟਰੋਲ ਦਿੰਦੇ ਹਨ।
 
-**ਤੁਹਾਡਾ ਕਲੋਜ਼ਰ ਕੀ ਕਰਦਾ ਹੈ:**  
-- **ਪ੍ਰਾਈਵੇਟ ਸਥਿਤੀ ਦੇ ਵੈਰੀਏਬਲਾਂ ਨੂੰ** ਹਰ ਪੌਦੇ ਲਈ ਅਜ਼ਾਦੀ ਨਾਲ ਰੱਖਦਾ ਹੈ  
-- **ਪੂਰੇ ਡ੍ਰੈਗ ਲਾਈਫਸਾਈਕਲ ਨੂੰ** ਸ਼ੁਰੂ ਤੋਂ ਅੰਤ ਤੱਕ ਸੰਭਾਲਦਾ ਹੈ  
-- **ਸਮੂਹ, ਪ੍ਰਤੀਕਰਮਾਤਮਕ ਹਿਲਾਵਟ** ਪੂਰੇ ਸਕ੍ਰੀਨ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ  
-- **ਸਰੋਤਾਂ ਨੂੰ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਸਾਫ਼ ਕਰਦਾ ਹੈ** ਤਾਂ ਜੋ ਯਾਦਾਸ਼ਤ ਲੀਕ ਨਾ ਹੋਵੇ  
-- **ਇਕ ਬੁੱਧੀਮਾਨ, ਰਚਨਾਤਮਕ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦਾ ਹੈ** ਟੈਰੀਰੀਅਮ ਡਿਜ਼ਾਈਨ ਲਈ  
+## ਸਾਰਾ ਸਿਸਟਮ ਇਕੱਠਾ ਕਰਨਾ: ਤੁਹਾਡਾ ਪੂਰਾ ਡਰੈਗ ਸਿਸਟਮ
 
-### ਤੁਹਾਡੇ ਇੰਟਰਐਕਟਿਵ ਟੈਰੀਰੀਅਮ ਦੀ ਜਾਂਚ  
+ਵਧਾਈ! ਤੁਸੀਂ ਵੈਨਿਲਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸੁਧਾਰਤ ਡਰੈਗ-ਐਂਡ-ਡਰੌਪ ਸਿਸਟਮ ਬਣਾਇਆ ਹੈ। ਤੁਹਾਡਾ ਪੂਰਾ `dragElement` ਫੰਕਸ਼ਨ ਹੁਣ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਕਲੋਜ਼ਰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜੋ ਸੰਭਾਲਦਾ ਹੈ:
 
-ਹੁਣ ਆਪਣੇ ਇੰਟਰਐਕਟਿਵ ਟੈਰੀਰੀਅਮ ਦੀ ਜਾਂਚ ਕਰੋ! ਆਪਣੇ `index.html` ਫਾਈਲ ਨੂੰ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਫੰਕਸ਼ਨਲਿਟੀ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ:  
+**ਤੁਹਾਡਾ ਕਲੋਜ਼ਰ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ:**
+- **ਪ੍ਰਾਈਵੇਟ ਪੋਜ਼ੀਸ਼ਨ ਵੈਰੀਏਬਲਸ ਨੂੰ ਰੱਖਦਾ ਹੈ** ਹਰ ਪੌਦੇ ਲਈ ਅਜ਼ਾਦੀ ਨਾਲ
+- **ਪੂਰਾ ਡਰੈਗ ਲਾਈਫਸਾਈਕਲ ਸੰਭਾਲਦਾ ਹੈ** ਸ਼ੁਰੂ ਤੋਂ ਅੰਤ ਤੱਕ
+- **ਪੂਰੀ ਸਕ੍ਰੀਨ 'ਤੇ ਹੌਲੀ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮੂਵਮੈਂਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
+- **ਸਰੋਤਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਾਫ਼ ਕਰਦਾ ਹੈ** ਮੈਮੋਰੀ ਲੀਕਸ ਤੋਂ ਬਚਣ ਲਈ
+- **ਟੈਰੀਰੀਅਮ ਡਿਜ਼ਾਈਨ ਲਈ ਇੱਕ ਬੁੱਧੀਮਾਨ, ਰਚਨਾਤਮਕ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦਾ ਹੈ**
 
-1. **ਕਲਿੱਕ ਅਤੇ ਰੱਖੋ** ਕਿਸੇ ਵੀ ਪੌਦੇ ਨੂੰ ਡ੍ਰੈਗਿੰਗ ਸ਼ੁਰੂ ਕਰਨ ਲਈ  
-2. **ਆਪਣੇ ਮਾਊਸ ਜਾਂ ਉਂਗਲ ਨੂੰ ਹਿਲਾਓ** ਅਤੇ ਦੇਖੋ ਕਿ ਪੌਦਾ ਹੌਲੀ-ਹੌਲੀ ਪਿੱਛੇ ਆ ਰਿਹਾ ਹੈ  
-3. **ਛੱਡੋ** ਪੌਦੇ ਨੂੰ ਇਸ ਦੀ ਨਵੀਂ ਸਥਿਤੀ ਵਿੱਚ ਡ੍ਰਾਪ ਕਰਨ ਲਈ  
-4. **ਵੱਖ-ਵੱਖ ਵਿਵਸਥਾਵਾਂ ਨਾਲ ਅਨੁਭਵ ਕਰੋ** ਇੰਟਰਫੇਸ ਦੀ ਪੜਚੋਲ ਕਰਨ ਲਈ  
+### ਤੁਹਾਡੇ ਇੰਟਰਐਕਟਿਵ ਟੈਰੀਰੀਅਮ ਦੀ ਜਾਂਚ ਕਰਨਾ
 
-🥇 **ਸਫਲਤਾ**: ਤੁਸੀਂ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਈ ਹੈ ਜੋ ਉਹੀ ਮੁੱਖ ਧਾਰਨਾਵਾਂ ਵਰਤਦੀ ਹੈ ਜੋ ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਹਰ ਰੋਜ਼ ਵਰਤਦੇ ਹਨ। ਇਹ ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰਾਪ ਫੰਕਸ਼ਨਲਿਟੀ ਉਹੀ ਤਰਕਾਂ ਨੂੰ ਵਰਤਦੀ ਹੈ ਜੋ ਫਾਈਲ ਅੱਪਲੋਡ, ਕੰਬਨ ਬੋਰਡ ਅਤੇ ਹੋਰ ਬਹੁਤ ਸਾਰੇ ਇੰਟਰਐਕਟਿਵ ਇੰਟਰਫੇਸ ਦੇ ਪਿੱਛੇ ਹਨ।  
+ਹੁਣ ਆਪਣੇ ਇੰਟਰਐਕਟਿਵ ਟੈਰੀਰੀਅਮ ਦੀ ਜਾਂਚ ਕਰੋ! ਆਪਣੀ `index.html` ਫਾਈਲ ਨੂੰ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਫੰਕਸ਼ਨਲਿਟੀ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ:
 
-![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.pa.png)  
-
----
+1. **ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਰੱਖੋ** ਕਿਸੇ ਵੀ ਪੌਦੇ ਨੂੰ ਡਰੈਗਿੰਗ ਸ਼ੁਰੂ ਕਰਨ ਲਈ
+2. **ਆਪਣਾ ਮਾਊਸ ਜਾਂ ਉਂਗਲ ਹਿਲਾਓ** ਅਤੇ ਪੌਦੇ ਨੂੰ ਹੌਲੀ ਹੌਲੀ ਪਿਛੇ ਲਗਦੇ ਦੇਖੋ
+3. **ਛੱਡੋ** ਪੌਦੇ ਨੂੰ ਉਸਦੇ ਨਵੇਂ ਸਥਾਨ 'ਤੇ ਡਰੌਪ ਕਰਨ ਲਈ
+4. **ਵੱਖ-ਵੱਖ ਵਿਵਸਥਾਵਾਂ ਨਾਲ ਅਨੁਭਵ ਕਰੋ** ਇੰਟਰਫੇਸ ਦੀ ਪੜਚੋਲ ਕਰਨ ਲਈ
 
-## GitHub Copilot Agent Challenge 🚀  
+🥇 **ਸਫਲਤਾ**: ਤੁਸੀਂ ਕੋਰ ਸੰਕਲਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਈ ਹੈ ਜੋ ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਰੋਜ਼ਾਨਾ ਵਰਤਦੇ ਹਨ। ਉਹ ਡਰੈਗ-ਐਂਡ-ਡਰੌਪ ਫੰਕਸ਼ਨਲਿਟੀ ਉਹੀ ਸਿਧਾਂਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ ਜੋ ਫਾਈਲ ਅਪਲੋਡ, ਕੈਨਬਨ ਬੋਰਡ, ਅਤੇ ਕਈ ਹੋਰ ਇੰਟਰਐਕਟਿਵ ਇੰਟਰਫੇਸ ਦੇ ਪਿੱਛੇ ਹਨ।
 
-Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:  
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਪੂਰੇ ਸਿਸਟਮ ਦੀ ਸਮਝ**: ਆਪਣੇ ਪੂਰੇ ਡਰੈਗ ਸਿਸਟਮ ਦੀ ਮਾਹਰਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:
+- ✅ ਕਲੋਜ਼ਰ ਹਰ ਪੌਦੇ ਲਈ ਅਜ਼ਾਦ ਸਥਿਤੀ ਕਿਵੇਂ ਰੱਖਦੇ ਹਨ?
+- ✅ ਹੌਲੀ ਮੂਵਮੈਂਟ ਲਈ ਕੋਆਰਡੀਨੇਟ ਗਣਿਤ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ?
+- ✅ ਜੇ ਅਸੀਂ ਇਵੈਂਟ ਲਿਸਨਰਾਂ ਨੂੰ ਸਾਫ਼ ਕਰਨਾ ਭੁੱਲ ਜਾਵਾਂ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
+- ✅ ਇਹ ਪੈਟਰਨ ਵਧੇਰੇ ਜਟਿਲ ਇੰਟਰੈਕਸ਼ਨ ਲਈ ਕਿਵੇਂ ਸਕੇਲ ਕਰਦਾ ਹੈ?
 
-**ਵੇਰਵਾ:** ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਇੱਕ ਰੀਸੈਟ ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਸਾਰੇ ਪੌਦਿਆਂ ਨੂੰ ਮੁਲਾਇਮ ਐਨੀਮੇਸ਼ਨ ਨਾਲ ਉਨ੍ਹਾਂ ਦੀ ਮੂਲ ਸਥਿਤੀ 'ਤੇ ਵਾਪਸ ਲੈ ਜਾਂਦਾ ਹੈ।  
+**ਕੋਡ ਗੁਣਵੱਤਾ ਦਾ ਮੁਲਾਂਕਣ**: ਆਪਣੇ ਪੂਰੇ ਹੱਲ ਦੀ ਸਮੀਖਿਆ ਕਰੋ:
+- **ਮੋਡਿਊਲਰ ਡਿਜ਼ਾਈਨ**: ਹਰ ਪੌਦੇ ਲਈ ਆਪਣਾ ਕਲੋਜ਼ਰ ਇੰਸਟੈਂਸ
+- **ਇਵੈਂਟ ਕੁਸ਼ਲਤਾ**: ਲਿਸਨਰਾਂ ਦੀ ਸਹੀ ਸੈਟਅਪ ਅਤੇ ਕਲੀਨਅਪ
+- **ਕਰਾਸ-ਡਿਵਾਈਸ ਸਪੋਰਟ**: ਡੈਸਕਟਾਪ ਅਤੇ ਮੋਬਾਈਲ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
+- **ਪਰਫਾਰਮੈਂਸ ਸਚੇਤਤਾ**: ਕੋਈ ਮੈਮੋਰੀ ਲੀਕ ਜਾਂ ਬੇਕਾਰ ਗਣਨਾਵਾਂ ਨਹੀਂ
 
-**ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਰੀਸੈਟ ਬਟਨ ਬਣਾਓ ਜੋ, ਕਲਿੱਕ ਕਰਨ 'ਤੇ, ਸਾਰੇ ਪੌਦਿਆਂ ਨੂੰ CSS ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ 1 ਸਕਿੰਟ ਦੇ ਅੰਦਰ ਉਨ੍ਹਾਂ ਦੀ ਮੂਲ ਸਾਈਡਬਾਰ ਸਥਿਤੀ 'ਤੇ ਵਾਪਸ ਲੈ ਜਾਂਦਾ ਹੈ। ਫੰਕਸ਼ਨ ਨੂੰ ਪੇਜ ਲੋਡ ਹੋਣ 'ਤੇ ਮੂਲ ਸਥਿਤੀਆਂ ਸਟੋਰ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਅਤੇ ਜਦੋਂ ਰੀਸੈਟ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਪੌਦਿਆਂ ਨੂੰ ਮੁਲਾਇਮ ਤਰੀਕੇ ਨਾਲ ਉਨ੍ਹਾਂ ਸਥਿਤੀਆਂ 'ਤੇ ਵਾਪਸ ਲੈ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।  
+![ਫਿਨਿਸ਼ਡ ਟੈਰੀਰੀਅਮ](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.pa.png)
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।  
-
-## 🚀 ਵਾਧੂ ਚੈਲੈਂਜ: ਆਪਣੇ ਹੁਨਰ ਨੂੰ ਵਧਾਓ  
-
-ਤਿਆਰ ਹੋ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਅਗਲੇ ਪੱਧਰ 'ਤੇ ਲਿਜਾਣ ਲਈ? ਇਹ ਸੁਧਾਰ ਲਾਗੂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ:  
+---
 
-**ਰਚਨਾਤਮਕ ਵਾਧੇ:**  
-- **ਡਬਲ-ਕਲਿੱਕ** ਕਰਕੇ ਪੌਦੇ ਨੂੰ ਅੱਗੇ ਲਿਆਉਣ ਲਈ (z-index ਮੈਨਿਪੁਲੇਸ਼ਨ)  
-- **ਦ੍ਰਿਸ਼ਟੀਗਤ ਫੀਡਬੈਕ ਸ਼ਾਮਲ ਕਰੋ** ਜਿਵੇਂ ਕਿ ਪੌਦਿਆਂ 'ਤੇ ਹਵਰ ਕਰਨ 'ਤੇ ਹੌਲੀ ਰੌਸ਼ਨੀ  
-- **ਸਰਹੱਦਾਂ ਲਾਗੂ ਕਰੋ** ਤਾਂ ਜੋ ਪੌਦੇ ਟੈਰੀਰੀਅਮ ਤੋਂ ਬਾਹਰ ਨਾ ਡ੍ਰੈਗ ਕੀਤੇ ਜਾ ਸਕਣ  
-- **ਸੇਵ ਫੰਕਸ਼ਨ ਬਣਾਓ** ਜੋ ਪੌਦਿਆਂ ਦੀ ਸਥਿਤੀ ਨੂੰ localStorage ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਯਾਦ ਰੱਖਦਾ ਹੈ  
-- **ਧੁਨੀ ਪ੍ਰਭਾਵ ਸ਼ਾਮਲ ਕਰੋ** ਪੌਦਿਆਂ ਨੂੰ ਚੁੱਕਣ ਅਤੇ ਰੱਖਣ ਲਈ  
+## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀
 
-> 💡 **ਸਿੱਖਣ ਦਾ ਮੌਕਾ**: ਇਹਨਾਂ ਚੈਲੈਂਜਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਤੁਹਾਨੂੰ DOM ਮੈਨਿਪੁਲੇਸ਼ਨ, ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ, ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਡਿਜ਼ਾਈਨ ਦੇ ਨਵੇਂ ਪਹਲੂ ਸਿਖਾਏਗਾ।  
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
 
-## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼  
+**ਵੇਰਵਾ:** ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਇੱਕ ਰੀਸੈਟ ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਸਾਰੇ ਪੌਦਿਆਂ ਨੂੰ ਹੌਲੀ ਐਨੀਮੇਸ਼ਨ ਦੇ ਨਾਲ ਉਹਨਾਂ ਦੇ ਅਸਲ ਸਥਾਨਾਂ 'ਤੇ ਵਾਪਸ ਲੈ ਜਾਂਦਾ ਹੈ।
 
-[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/20)  
+**ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਰੀਸੈਟ ਬਟਨ ਬਣਾਓ ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਸਾਰੇ ਪੌਦਿਆਂ ਨੂੰ CSS ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਹਨਾਂ ਦੇ ਅਸਲ ਸਾਈਡਬਾਰ ਸਥਾਨਾਂ 'ਤੇ ਵਾਪਸ ਲੈ ਜਾਂਦਾ ਹੈ। ਫੰਕਸ਼ਨ ਨੂੰ ਪੇਜ ਲੋਡ ਹੋਣ 'ਤੇ ਅਸਲ ਸਥਾਨਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਰੀਸੈਟ ਬਟਨ ਦਬਾਉਣ 'ਤੇ 1 ਸਕਿੰਟ ਦੇ ਅੰਦਰ ਪੌਦਿਆਂ ਨੂੰ ਉਹਨਾਂ ਸਥਾਨਾਂ 'ਤੇ ਹੌਲੀ ਹੌਲੀ ਵਾਪਸ ਲੈ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
 
-## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ: ਆਪਣੀ ਸਮਝ ਨੂੰ ਗਹਿਰਾ ਕਰੋ  
+[Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਇੱਥੇ।
 
-ਤੁਸੀਂ DOM ਮੈਨਿਪੁਲੇਸ਼ਨ ਅਤੇ ਕਲੋਜ਼ਰਾਂ ਦੇ ਮੁੱਢਲੇ ਸਿਧਾਂਤਾਂ ਨੂੰ ਮਾਸਟਰ ਕਰ ਲਿਆ ਹੈ, ਪਰ ਹਮੇਸ਼ਾ ਹੋਰ ਖੋਜ ਕਰਨ ਲਈ ਕੁਝ ਹੁੰਦਾ ਹੈ! ਇੱਥੇ ਕੁਝ ਰਾਹ ਹਨ ਜੋ ਤੁਹਾਡੇ ਗਿਆਨ ਅਤੇ ਹੁਨਰ ਨੂੰ ਵਧਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ।  
+## 🚀 ਵਾਧੂ ਚੈਲੈਂਜ: ਆਪਣੀਆਂ ਯੋਗਤਾਵਾਂ ਦਾ ਵਿਸਥਾਰ ਕਰੋ
 
-### ਵੱਖਰੇ ਡ੍ਰੈਗ ਅਤੇ ਡ੍ਰਾਪ ਪਹੁੰਚਾਂ  
+ਤਿਆਰ ਹੋ ਕਿ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਅਗਲੇ ਪੱਧਰ 'ਤੇ ਲੈ ਜਾਓ? ਇਹ ਸੁਧਾਰ ਲਾਗੂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ:
 
-ਅਸੀਂ ਵੱਧ ਤੋਂ ਵੱਧ ਲਚਕਤਾ ਲਈ ਪੌਇੰਟਰ ਇਵੈਂਟ ਦੀ ਵਰਤੋਂ ਕੀਤੀ, ਪਰ ਵੈਬ ਡਿਵੈਲਪਮੈਂਟ ਕਈ ਪਹੁੰਚਾਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ:  
+**ਰਚਨਾਤਮਕ ਵਿਸਥਾਰ:**
+- **ਡਬਲ-ਕਲਿੱਕ** ਕਰਕੇ ਪੌਦੇ ਨੂੰ ਅੱਗੇ ਲਿਆਓ (z-index ਮੈਨਿਪੁਲੇਸ਼ਨ)
+- **ਦ੍ਰਿਸ਼ਟੀਗਤ ਫੀਡਬੈਕ ਸ਼ਾਮਲ ਕਰੋ** ਜਿਵੇਂ ਕਿ ਪੌਦਿਆਂ 'ਤੇ ਹਵਰ ਕਰਨ 'ਤੇ ਹੌਲੀ ਚਮਕ
+- **ਸਰਹੱਦਾਂ ਲਾਗੂ ਕਰੋ** ਤਾਂ ਜੋ ਪੌਦੇ ਟੈਰੀਰੀਅਮ ਤੋਂ ਬਾਹਰ ਨਾ ਡਰੈਗ ਕੀਤੇ ਜਾ ਸਕਣ
+- **ਸੇਵ ਫੰਕਸ਼ਨ ਬਣਾਓ** ਜੋ ਪੌਦੇ ਦੇ ਸਥਾਨਾਂ ਨੂੰ localStorage ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਯਾਦ ਰੱਖਦਾ ਹੈ
+- **ਆਵਾਜ਼ ਦੇ ਪ੍ਰਭਾਵ ਸ਼ਾਮਲ ਕਰੋ** ਪੌਦੇ ਨੂੰ ਚੁੱਕਣ ਅਤੇ ਰੱਖਣ ਲਈ
 
-| ਪਹੁੰਚ | ਕਿਸ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ | ਸਿੱਖਣ ਦੀ ਕੀਮਤ |  
-|----------|----------|----------------|  
-| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | ਫਾਈਲ ਅੱਪਲੋਡ, ਅਧਿਕਾਰਤ ਡ੍ਰੈਗ ਜ਼ੋਨ | ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਮੂਲ ਸਮਰੱਥਾ ਨੂੰ ਸਮਝਣਾ |  
-| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | ਮੋਬਾਈਲ-ਵਿਸ਼ੇਸ਼ ਸੰਚਾਰ | ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਵਿਕਾਸ ਪੈਟਰਨ |  
-| CSS `transform` ਗੁਣ | ਮੁਲਾਇਮ ਐਨੀਮੇਸ਼ਨ | ਪ੍ਰਦਰਸ਼ਨ ਅਨੁਕੂਲਤਾ ਤਕਨੀਕਾਂ |  
+> 💡 **ਸਿੱਖਣ ਦਾ ਮੌਕਾ**: ਇਹਨਾਂ ਚੈਲੈਂਜਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਤੁਹਾਨੂੰ DOM ਮੈਨਿਪੁਲੇਸ਼ਨ, ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ, ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਡਿਜ਼ਾਈਨ ਦੇ ਨਵੇਂ ਪਹਲੂ ਸਿਖਾਏਗਾ।
 
-### ਉੱਚ-ਸਤਹ DOM ਮੈਨਿਪੁਲੇਸ਼ਨ ਵਿਸ਼ੇ  
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼
 
-**ਤੁਹਾਡੇ ਸਿੱਖਣ ਯਾਤਰਾ ਵਿੱਚ ਅਗਲੇ ਕਦਮ:**  
-- **ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ**: ਕਈ ਤੱਤਾਂ ਲਈ ਇਵੈਂਟ ਨੂੰ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਸੰਭਾਲਣਾ  
-- **Intersection Observer**: ਜਦੋਂ ਤੱਤ ਵਿਊਪੋਰਟ ਵਿੱਚ ਦਾਖਲ/ਬਾਹਰ ਹੁੰਦੇ ਹਨ ਤਾਂ ਪਤਾ ਲਗਾਉਣਾ  
-- **Mutation Observer**: DOM ਸਟ੍ਰਕਚਰ ਵਿੱਚ ਬਦਲਾਅ ਦੇਖਣਾ  
-- **Web Components**: ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ, ਇਨਕੈਪਸੂਲੇਟ UI ਤੱਤ ਬਣਾਉਣਾ  
-- **Virtual DOM concepts**: ਸਮਝਣਾ ਕਿ ਫਰੇਮਵਰਕ DOM ਅੱਪਡੇਟਾਂ ਨੂੰ ਕਿਵੇਂ ਅਨੁਕੂਲ ਕਰਦੇ ਹਨ  
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/20)
 
-### ਜਾਰੀ ਸਿੱਖਣ ਲਈ ਜ਼ਰੂਰੀ ਸਰੋਤ  
+## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ-ਅਧਿਐਨ: ਆਪਣੀ ਸਮਝ ਨੂੰ ਗਹਿਰਾ ਕਰਨਾ
 
-**ਤਕਨੀਕੀ ਦਸਤਾਵੇਜ਼:**  
-- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - ਪੌਇੰਟਰ ਇਵੈਂਟ ਦਾ ਵਿਸਥਾਰਪੂਰਵਕ ਸੰਦਰਭ  
-- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - ਅਧਿਕਾਰਤ ਮਿਆਰ ਦਸਤਾਵੇਜ਼  
-- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - ਉੱਚ-ਸਤਹ ਕਲੋਜ਼ਰ ਪੈਟਰਨ  
+ਤੁਸੀਂ DOM ਮੈਨਿਪੁਲੇਸ਼ਨ ਅਤੇ ਕਲੋਜ਼ਰ ਦੇ ਮੁਢਲੇ ਪਹਲੂਆਂ ਨੂੰ ਮਾਹਰ ਕੀਤਾ ਹੈ, ਪਰ ਹਮੇਸ਼ਾ ਹੋਰ ਖੋਜ ਕਰਨ ਲਈ ਕੁਝ ਹੁੰਦਾ ਹੈ! ਇੱਥੇ ਕੁਝ ਰਾਹ ਹਨ ਜੋ ਤੁਹਾਡੇ ਗਿਆਨ ਅਤੇ ਯੋਗਤਾਵਾਂ ਨੂੰ ਵਧਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ।
 
-**ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ:**  
-- [CanIUse.com](https://caniuse.com/) - ਫੀਚਰ ਸਹਾਇਤਾ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਚੈੱਕ ਕਰੋ  
-- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - ਵਿਸਥਾਰਪੂਰਵਕ ਅਨੁਕੂਲਤਾ ਜਾਣਕਾਰੀ  
+### ਵੱਖਰੇ ਡਰੈਗ ਅਤੇ ਡਰੌਪ ਪਹੁੰਚ
 
-**ਅਭਿਆਸ ਦੇ ਮੌਕੇ:**  
-- **ਬਣਾਓ** ਇੱਕ ਪਜ਼ਲ ਗੇਮ ਜੋ ਇਸੇ ਡ੍ਰੈਗ ਮਕੈਨਿਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ  
-- **ਬਣਾਓ** ਇੱਕ ਕੰਬਨ ਬੋਰਡ ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰਾਪ ਟਾਸਕ ਮੈਨੇਜਮੈਂਟ ਨਾਲ  
-- **ਡਿਜ਼ਾਈਨ ਕਰੋ** ਇੱਕ ਇਮੇਜ ਗੈਲਰੀ ਡ੍ਰੈਗ ਕਰਨ ਵਾਲੇ ਫੋਟੋ ਵਿਵਸਥਾ ਨਾਲ  
-- **ਅਨੁਭਵ ਕਰੋ** ਮੋਬਾਈਲ ਇੰਟਰਫੇਸ ਲਈ ਟਚ ਜੈਸਚਰਾਂ ਨਾਲ  
+ਅਸੀਂ ਵੱਧ ਤੋਂ ਵੱਧ ਲਚਕਦਾਰਤਾ ਲਈ ਪੌਇੰਟਰ ਇਵੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ, ਪਰ ਵੈਬ ਡਿਵੈਲਪਮੈਂਟ ਕਈ ਪਹੁੰਚਾਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ:
 
-> 🎯 **ਸਿੱਖਣ ਦੀ ਰਣਨੀਤੀ**: ਇਹ ਧਾਰਨਾਵਾਂ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਅਭਿਆਸ ਹੈ। ਡ੍ਰੈਗ ਕਰਨ ਵਾਲੇ ਇੰਟਰਫੇਸਾਂ ਦੇ ਵੈਰੀਏਸ਼ਨ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ – ਹਰ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਯੂਜ਼ਰ ਸੰਚਾਰ ਅਤੇ DOM ਮੈਨਿਪੁਲੇਸ਼ਨ ਬਾਰੇ ਕੁਝ ਨਵਾਂ ਸਿਖਾਏਗਾ।  
+| ਪਹੁੰਚ | ਸਭ ਤੋਂ ਵਧੀਆ | ਸਿੱਖਣ ਦਾ ਮੁੱਲ |
+|----------|----------|----------------|
+| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | ਫਾਈਲ ਅਪਲੋਡ, ਫਾਰਮਲ ਡਰੈਗ ਜ਼ੋਨ | ਨੈਟਿਵ ਬ੍ਰਾਊਜ਼ਰ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਸਮਝਣਾ |
+| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | ਮੋਬਾਈਲ-ਵਿਸ਼ੇਸ਼ ਇੰਟਰੈਕਸ਼ਨ | ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਵਿਕਾਸ ਪੈਟਰਨ |
+| CSS `transform` ਪ੍ਰਾਪਰਟੀਜ਼ | ਹੌਲੀ ਐਨੀਮੇਸ਼ਨ | ਪਰਫਾਰਮੈਂਸ ਓਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਤਕਨੀਕਾਂ |
 
-## ਅਸਾਈਨਮੈਂਟ  
+### ਉੱਚ-ਸਤਹ DOM ਮੈਨਿਪੁਲੇਸ਼ਨ ਵਿਸ਼ੇ
 
-[Work a bit more with the DOM](assignment.md)  
+**ਤੁਹਾਡੇ ਸਿੱਖਣ ਯਾਤਰਾ ਵਿੱਚ ਅਗਲੇ ਕਦਮ:**
+- **ਇਵੈਂਟ
 
 ---
 
-**ਅਸਵੀਕਰਤੀ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਣੀਖਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤਾ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/4-typing-game/README.md b/translations/pa/4-typing-game/README.md
index 5567a87b1e..b5f1d75065 100644
--- a/translations/pa/4-typing-game/README.md
+++ b/translations/pa/4-typing-game/README.md
@@ -1,48 +1,295 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5adea7059676fcdb1b546ccd54c956c2",
-  "translation_date": "2025-10-22T18:02:41+00:00",
+  "original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
+  "translation_date": "2025-11-03T16:45:24+00:00",
   "source_file": "4-typing-game/README.md",
   "language_code": "pa"
 }
 -->
 # ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ - ਇੱਕ ਟਾਈਪਿੰਗ ਗੇਮ ਬਣਾਓ
 
+```mermaid
+journey
+    title Your Typing Game Development Journey
+    section Foundation
+      Plan game structure: 3: Student
+      Design user interface: 4: Student
+      Setup HTML elements: 4: Student
+    section Functionality
+      Handle user input: 4: Student
+      Track timing: 5: Student
+      Calculate accuracy: 5: Student
+    section Features
+      Add visual feedback: 5: Student
+      Implement game logic: 5: Student
+      Polish experience: 5: Student
+```
+
 ## ਪਰਿਚਯ
 
-ਇਹ ਗੱਲ ਹਰ ਡਿਵੈਲਪਰ ਜਾਣਦਾ ਹੈ ਪਰ ਕਦੇ-ਕਦੇ ਇਸ ਬਾਰੇ ਗੱਲ ਨਹੀਂ ਕਰਦਾ: ਤੇਜ਼ ਟਾਈਪ ਕਰਨਾ ਇੱਕ ਸੂਪਰਪਾਵਰ ਹੈ! 🚀 ਸੋਚੋ - ਜਿੰਨਾ ਤੇਜ਼ ਤੁਸੀਂ ਆਪਣੇ ਵਿਚਾਰਾਂ ਨੂੰ ਆਪਣੇ ਕੋਡ ਐਡੀਟਰ ਤੱਕ ਪਹੁੰਚਾ ਸਕਦੇ ਹੋ, ਉਨਾ ਹੀ ਜ਼ਿਆਦਾ ਤੁਹਾਡੀ ਕ੍ਰੀਏਟਿਵਿਟੀ ਵਧੇਗੀ। ਇਹ ਤੁਹਾਡੇ ਵਿਚਾਰਾਂ ਅਤੇ ਸਕ੍ਰੀਨ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਿੱਧਾ ਪਾਈਪਲਾਈਨ ਹੋਣ ਵਰਗਾ ਹੈ।
+ਇਹ ਕੁਝ ਹੈ ਜੋ ਹਰ ਡਿਵੈਲਪਰ ਜਾਣਦਾ ਹੈ ਪਰ ਕਦੇ-ਕਦੇ ਹੀ ਇਸ ਬਾਰੇ ਗੱਲ ਕਰਦਾ ਹੈ: ਤੇਜ਼ ਟਾਈਪ ਕਰਨਾ ਇੱਕ ਸੁਪਰਪਾਵਰ ਹੈ! 🚀 ਸੋਚੋ - ਜਿੰਨਾ ਜ਼ਿਆਦਾ ਤੇਜ਼ੀ ਨਾਲ ਤੁਸੀਂ ਆਪਣੇ ਵਿਚਾਰਾਂ ਨੂੰ ਆਪਣੇ ਕੋਡ ਐਡੀਟਰ ਤੱਕ ਪਹੁੰਚਾ ਸਕਦੇ ਹੋ, ਉਨਾ ਹੀ ਜ਼ਿਆਦਾ ਤੁਹਾਡੀ ਕ੍ਰੀਏਟਿਵਿਟੀ ਵਧੇਗੀ। ਇਹ ਜਿਵੇਂ ਤੁਹਾਡੇ ਵਿਚਾਰਾਂ ਅਤੇ ਸਕ੍ਰੀਨ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਿੱਧਾ ਪਾਈਪਲਾਈਨ ਹੋਣ ਵਰਗਾ ਹੈ।
+
+```mermaid
+pie title Game Features
+    "Real-time Feedback" : 25
+    "Performance Tracking" : 20
+    "Interactive UI" : 20
+    "Timer System" : 15
+    "Quote Management" : 10
+    "Results Display" : 10
+```
+
+ਕੀ ਤੁਸੀਂ ਇਸ ਹੁਨਰ ਨੂੰ ਵਧਾਉਣ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਜਾਣਨਾ ਚਾਹੁੰਦੇ ਹੋ? ਤੁਸੀਂ ਸਹੀ ਸੋਚਿਆ - ਅਸੀਂ ਇੱਕ ਗੇਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ!
 
-ਕੀ ਤੁਸੀਂ ਇਸ ਹੁਨਰ ਨੂੰ ਹੋਰ ਵਧੀਆ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਜਾਣਨਾ ਚਾਹੁੰਦੇ ਹੋ? ਤੁਸੀਂ ਸਹੀ ਸੋਚਿਆ - ਅਸੀਂ ਇੱਕ ਗੇਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ!
+```mermaid
+flowchart LR
+    A[Player starts game] --> B[Random quote displayed]
+    B --> C[Player types characters]
+    C --> D{Character correct?}
+    D -->|Yes| E[Green highlight]
+    D -->|No| F[Red highlight]
+    E --> G[Update accuracy]
+    F --> G
+    G --> H{Quote complete?}
+    H -->|No| C
+    H -->|Yes| I[Calculate WPM]
+    I --> J[Display results]
+    J --> K[Play again?]
+    K -->|Yes| B
+    K -->|No| L[Game over]
+    
+    style A fill:#e1f5fe
+    style D fill:#fff3e0
+    style E fill:#e8f5e8
+    style F fill:#ffebee
+    style I fill:#f3e5f5
+```
 
 > ਆਓ ਇੱਕ ਸ਼ਾਨਦਾਰ ਟਾਈਪਿੰਗ ਗੇਮ ਇਕੱਠੇ ਬਣਾਈਏ!
 
-ਤਿਆਰ ਹੋ ਜਾਓ ਆਪਣੇ ਸਾਰੇ ਜਾਵਾਸਕ੍ਰਿਪਟ, HTML, ਅਤੇ CSS ਦੇ ਹੁਨਰਾਂ ਨੂੰ ਵਰਤਣ ਲਈ ਜੋ ਤੁਸੀਂ ਸਿੱਖ ਰਹੇ ਹੋ? ਅਸੀਂ ਇੱਕ ਟਾਈਪਿੰਗ ਗੇਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਤੁਹਾਨੂੰ ਮਹਾਨ ਡਿਟੈਕਟਿਵ [ਸ਼ਰਲਾਕ ਹੋਮਜ਼](https://en.wikipedia.org/wiki/Sherlock_Holmes) ਦੇ ਰੈਂਡਮ ਕੋਟਸ ਨਾਲ ਚੁਣੌਤੀ ਦੇਵੇਗੀ। ਗੇਮ ਟ੍ਰੈਕ ਕਰੇਗੀ ਕਿ ਤੁਸੀਂ ਕਿੰਨੀ ਤੇਜ਼ ਅਤੇ ਸਹੀ ਟਾਈਪ ਕਰਦੇ ਹੋ - ਅਤੇ ਮੈਨੂੰ ਵਿਸ਼ਵਾਸ ਕਰੋ, ਇਹ ਤੁਹਾਨੂੰ ਕਾਫ਼ੀ ਆਕਰਸ਼ਕ ਲੱਗੇਗੀ!
+ਤਿਆਰ ਹੋ ਜਾਓ ਆਪਣੇ ਸਾਰੇ ਜਾਵਾਸਕ੍ਰਿਪਟ, HTML ਅਤੇ CSS ਹੁਨਰਾਂ ਨੂੰ ਵਰਤਣ ਲਈ? ਅਸੀਂ ਇੱਕ ਟਾਈਪਿੰਗ ਗੇਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਤੁਹਾਨੂੰ ਮਹਾਨ ਡਿਟੈਕਟਿਵ [ਸ਼ਰਲਾਕ ਹੋਮਜ਼](https://en.wikipedia.org/wiki/Sherlock_Holmes) ਦੇ ਰੈਂਡਮ ਕੋਟਸ ਨਾਲ ਚੁਣੌਤੀ ਦੇਵੇਗੀ। ਗੇਮ ਟ੍ਰੈਕ ਕਰੇਗੀ ਕਿ ਤੁਸੀਂ ਕਿੰਨੀ ਤੇਜ਼ ਅਤੇ ਸਹੀ ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ - ਅਤੇ ਮੈਨੂੰ ਵਿਸ਼ਵਾਸ ਕਰੋ, ਇਹ ਤੁਹਾਨੂੰ ਉਮੀਦ ਤੋਂ ਜ਼ਿਆਦਾ ਆਕਰਸ਼ਕ ਲੱਗੇਗੀ!
+
+```mermaid
+mindmap
+  root((Typing Game Development))
+    User Interface
+      Input Elements
+      Visual Feedback
+      Responsive Design
+      Accessibility
+    Game Logic
+      Quote Selection
+      Timer Management
+      Accuracy Tracking
+      Score Calculation
+    Event Handling
+      Keyboard Input
+      Button Clicks
+      Real-time Updates
+      Game State Changes
+    Performance Metrics
+      Words Per Minute
+      Character Accuracy
+      Error Tracking
+      Progress Display
+    User Experience
+      Immediate Feedback
+      Clear Instructions
+      Engaging Content
+      Achievement System
+```
 
 ![ਡੈਮੋ](../../../4-typing-game/images/demo.gif)
 
 ## ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ
 
-ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਇਹ ਕੌਂਸੈਪਟਸ ਨਾਲ ਕਮਫਰਟੇਬਲ ਹੋ (ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਤੁਹਾਨੂੰ ਥੋੜ੍ਹਾ ਰੀਫ੍ਰੈਸ਼ਰ ਦੀ ਲੋੜ ਹੈ - ਅਸੀਂ ਸਾਰੇ ਇਸ ਮੋੜ 'ਤੇ ਰਹੇ ਹਾਂ!):
+```mermaid
+flowchart TD
+    A[User Action] --> B{Event Type?}
+    B -->|Key Press| C[Keyboard Event]
+    B -->|Button Click| D[Mouse Event]
+    B -->|Timer| E[Time Event]
+    
+    C --> F[Check Character]
+    D --> G[Start/Reset Game]
+    E --> H[Update Timer]
+    
+    F --> I{Correct?}
+    I -->|Yes| J[Highlight Green]
+    I -->|No| K[Highlight Red]
+    
+    J --> L[Update Score]
+    K --> L
+    L --> M[Check Game State]
+    
+    G --> N[Generate New Quote]
+    H --> O[Display Time]
+    
+    M --> P{Game Complete?}
+    P -->|Yes| Q[Show Results]
+    P -->|No| R[Continue Game]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#fff3e0
+    style Q fill:#f3e5f5
+```
+
+ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਇਹ ਧਾਰਨਾਵਾਂ ਨਾਲ ਸਹੀ ਹੋ (ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਤੁਹਾਨੂੰ ਛੋਟਾ ਜਿਹਾ ਰੀਫ੍ਰੈਸ਼ਰ ਲੈਣ ਦੀ ਲੋੜ ਹੈ - ਅਸੀਂ ਸਾਰੇ ਇਸ ਮੌਕੇ 'ਤੇ ਰਹੇ ਹਾਂ!):
 
 - ਟੈਕਸਟ ਇਨਪੁਟ ਅਤੇ ਬਟਨ ਕੰਟਰੋਲ ਬਣਾਉਣਾ
 - CSS ਅਤੇ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਟਾਈਲ ਸੈਟ ਕਰਨਾ  
-- ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ
+- ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ
   - ਇੱਕ ਐਰੇ ਬਣਾਉਣਾ
   - ਇੱਕ ਰੈਂਡਮ ਨੰਬਰ ਬਣਾਉਣਾ
   - ਮੌਜੂਦਾ ਸਮਾਂ ਪ੍ਰਾਪਤ ਕਰਨਾ
 
-ਜੇ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਚੀਜ਼ ਤੁਹਾਨੂੰ ਥੋੜ੍ਹੀ ਜਿਹੀ ਮੁਸ਼ਕਲ ਲੱਗਦੀ ਹੈ, ਤਾਂ ਕੋਈ ਗੱਲ ਨਹੀਂ! ਕਈ ਵਾਰ ਆਪਣੀ ਜਾਣਕਾਰੀ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਛਾਲ ਮਾਰਨਾ ਅਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਸਮਝਣਾ ਹੁੰਦਾ ਹੈ।
+ਜੇ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਚੀਜ਼ ਤੁਹਾਨੂੰ ਥੋੜੀ ਜਿਹੀ ਭੁੱਲੀ ਹੋਈ ਲੱਗਦੀ ਹੈ, ਤਾਂ ਇਹ ਬਿਲਕੁਲ ਠੀਕ ਹੈ! ਕਈ ਵਾਰ ਆਪਣੀ ਜਾਣਕਾਰੀ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਛਾਲ ਮਾਰਨਾ ਅਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਸਮਝਣਾ ਹੁੰਦਾ ਹੈ।
 
-## ਆਓ ਇਸਨੂੰ ਬਣਾਈਏ!
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਬੁਨਿਆਦੀਆਂ ਦੀ ਮੁਲਾਂਕਣ**: ਵਿਕਾਸ ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ:
+- ✅ HTML ਫਾਰਮ ਅਤੇ ਇਨਪੁਟ ਐਲੀਮੈਂਟ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ
+- ✅ CSS ਕਲਾਸਾਂ ਅਤੇ ਡਾਇਨਾਮਿਕ ਸਟਾਈਲਿੰਗ
+- ✅ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਵੈਂਟ ਲਿਸਨਰ ਅਤੇ ਹੈਂਡਲਰ
+- ✅ ਐਰੇ ਮੈਨਿਪੁਲੇਸ਼ਨ ਅਤੇ ਰੈਂਡਮ ਚੋਣ
+- ✅ ਸਮੇਂ ਦੀ ਮਾਪ ਅਤੇ ਗਣਨਾ
+
+**ਤੁਰੰਤ ਸਵੈ-ਪ੍ਰੀਖਣ**: ਕੀ ਤੁਸੀਂ ਸਮਝਾ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਧਾਰਨਾਵਾਂ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਗੇਮ ਵਿੱਚ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ?
+- **ਇਵੈਂਟਸ** ਜਦੋਂ ਯੂਜ਼ਰ ਐਲੀਮੈਂਟਸ ਨਾਲ ਇੰਟਰਐਕਟ ਕਰਦੇ ਹਨ ਤਾਂ ਟ੍ਰਿਗਰ ਹੁੰਦੇ ਹਨ
+- **ਹੈਂਡਲਰਸ** ਉਹਨਾਂ ਇਵੈਂਟਸ ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰਦੇ ਹਨ ਅਤੇ ਗੇਮ ਸਟੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹਨ
+- **CSS** ਯੂਜ਼ਰ ਐਕਸ਼ਨ ਲਈ ਵਿਜ਼ੁਅਲ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
+- **ਟਾਈਮਿੰਗ** ਪ੍ਰਦਰਸ਼ਨ ਮਾਪ ਅਤੇ ਗੇਮ ਪ੍ਰਗਤੀ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ
+
+```mermaid
+quadrantChart
+    title Typing Game Skills Development
+    x-axis Beginner --> Expert
+    y-axis Static --> Interactive
+    quadrant-1 Advanced Games
+    quadrant-2 Real-time Apps
+    quadrant-3 Basic Pages
+    quadrant-4 Interactive Sites
+    
+    HTML Forms: [0.3, 0.2]
+    CSS Styling: [0.4, 0.3]
+    Event Handling: [0.7, 0.8]
+    Game Logic: [0.8, 0.9]
+    Performance Tracking: [0.9, 0.7]
+```
+
+## ਆਓ ਇਸ ਨੂੰ ਬਣਾਈਏ!
 
 [ਇਵੈਂਟ ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟਾਈਪਿੰਗ ਗੇਮ ਬਣਾਉਣਾ](./typing-game/README.md)
 
-## ਸ਼੍ਰੇਯ
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਨੂੰ ਖੋਲ੍ਹੋ ਅਤੇ `addEventListener` ਨਾਲ ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਸੁਣਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ
+- [ ] ਇੱਕ ਸਧਾਰਨ HTML ਪੇਜ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਇੱਕ ਇਨਪੁਟ ਫੀਲਡ ਹੋਵੇ ਅਤੇ ਟਾਈਪਿੰਗ ਡਿਟੈਕਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ
+- [ ] ਟਾਈਪ ਕੀਤੇ ਟੈਕਸਟ ਦੀ ਤੁਲਨਾ ਟਾਰਗਟ ਟੈਕਸਟ ਨਾਲ ਕਰਕੇ ਸਟ੍ਰਿੰਗ ਮੈਨਿਪੁਲੇਸ਼ਨ ਦਾ ਅਭਿਆਸ ਕਰੋ
+- [ ] `setTimeout` ਨਾਲ ਟਾਈਮਿੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਝਣ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ ਪੂਰਾ ਕਰੋ ਅਤੇ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਨੂੰ ਸਮਝੋ
+- [ ] ਸ਼ਬਦ ਵੈਲੀਡੇਸ਼ਨ ਨਾਲ ਟਾਈਪਿੰਗ ਗੇਮ ਦਾ ਬੁਨਿਆਦੀ ਵਰਜਨ ਬਣਾਓ
+- [ ] ਸਹੀ ਅਤੇ ਗਲਤ ਟਾਈਪਿੰਗ ਲਈ ਵਿਜ਼ੁਅਲ ਫੀਡਬੈਕ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਗਤੀ ਅਤੇ ਸਹੀਤਾ ਦੇ ਆਧਾਰ 'ਤੇ ਇੱਕ ਸਧਾਰਨ ਸਕੋਰਿੰਗ ਸਿਸਟਮ ਲਾਗੂ ਕਰੋ
+- [ ] CSS ਨਾਲ ਆਪਣੀ ਗੇਮ ਨੂੰ ਸਜਾਓ ਤਾਂ ਜੋ ਇਹ ਦਿੱਖ ਵਿੱਚ ਆਕਰਸ਼ਕ ਹੋਵੇ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਗੇਮ ਵਿਕਾਸ**
+- [ ] ਪੂਰੀ ਟਾਈਪਿੰਗ ਗੇਮ ਨੂੰ ਸਾਰੇ ਫੀਚਰਾਂ ਅਤੇ ਪੋਲਿਸ਼ ਨਾਲ ਪੂਰਾ ਕਰੋ
+- [ ] ਵੱਖ-ਵੱਖ ਸ਼ਬਦ ਜਟਿਲਤਾ ਦੇ ਨਾਲ ਮੁਸ਼ਕਲ ਪੱਧਰ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਯੂਜ਼ਰ ਸਟੈਟਿਸਟਿਕਸ ਟ੍ਰੈਕਿੰਗ ਲਾਗੂ ਕਰੋ (WPM, ਸਮੇਂ ਦੇ ਨਾਲ ਸਹੀਤਾ)
+- [ ] ਬਿਹਤਰ ਯੂਜ਼ਰ ਅਨੁਭਵ ਲਈ ਸਾਊਂਡ ਇਫੈਕਟਸ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ
+- [ ] ਆਪਣੀ ਗੇਮ ਨੂੰ ਟਚ ਡਿਵਾਈਸਾਂ ਲਈ ਮੋਬਾਈਲ-ਰਿਸਪਾਂਸਿਵ ਬਣਾਓ
+- [ ] ਆਪਣੀ ਗੇਮ ਨੂੰ ਆਨਲਾਈਨ ਸ਼ੇਅਰ ਕਰੋ ਅਤੇ ਯੂਜ਼ਰਾਂ ਤੋਂ ਫੀਡਬੈਕ ਪ੍ਰਾਪਤ ਕਰੋ
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਇੰਟਰਐਕਟਿਵ ਵਿਕਾਸ**
+- [ ] ਵੱਖ-ਵੱਖ ਇੰਟਰਐਕਸ਼ਨ ਪੈਟਰਨ ਦੀ ਖੋਜ ਕਰਦੇ ਹੋਏ ਕਈ ਗੇਮਾਂ ਬਣਾਓ
+- [ ] ਗੇਮ ਲੂਪਸ, ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ, ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ
+- [ ] ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਵਾਲੇ ਗੇਮ ਵਿਕਾਸ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਦਿਓ
+- [ ] ਅਗਰਗਤੀ ਟਾਈਮਿੰਗ ਧਾਰਨਾਵਾਂ ਅਤੇ ਸਮੂਥ ਐਨੀਮੇਸ਼ਨ ਵਿੱਚ ਮਾਹਰ ਬਣੋ
+- [ ] ਵੱਖ-ਵੱਖ ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਦਰਸਾਉਣ ਵਾਲਾ ਇੱਕ ਪੋਰਟਫੋਲਿਓ ਬਣਾਓ
+- [ ] ਗੇਮ ਵਿਕਾਸ ਅਤੇ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਵਿੱਚ ਦਿਲਚਸਪੀ ਰੱਖਣ ਵਾਲਿਆਂ ਨੂੰ ਮਾਰਗਦਰਸ਼ਨ ਦਿਓ
+
+## 🎯 ਤੁਹਾਡਾ ਟਾਈਪਿੰਗ ਗੇਮ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
+
+```mermaid
+timeline
+    title Game Development Learning Progression
+    
+    section Setup (10 minutes)
+        Project Structure: HTML foundation
+                         : CSS styling setup
+                         : JavaScript file creation
+        
+    section User Interface (20 minutes)
+        Interactive Elements: Input fields
+                            : Button controls
+                            : Display areas
+                            : Responsive layout
+        
+    section Event Handling (25 minutes)
+        User Interaction: Keyboard events
+                        : Mouse events
+                        : Real-time feedback
+                        : State management
+        
+    section Game Logic (30 minutes)
+        Core Functionality: Quote generation
+                          : Character comparison
+                          : Accuracy calculation
+                          : Timer implementation
+        
+    section Performance Tracking (35 minutes)
+        Metrics & Analytics: WPM calculation
+                           : Error tracking
+                           : Progress visualization
+                           : Results display
+        
+    section Polish & Enhancement (45 minutes)
+        User Experience: Visual feedback
+                       : Sound effects
+                       : Animations
+                       : Accessibility features
+        
+    section Advanced Features (1 week)
+        Extended Functionality: Difficulty levels
+                              : Leaderboards
+                              : Custom quotes
+                              : Multiplayer options
+        
+    section Professional Skills (1 month)
+        Game Development: Performance optimization
+                        : Code architecture
+                        : Testing strategies
+                        : Deployment patterns
+```
+
+### 🛠️ ਤੁਹਾਡਾ ਗੇਮ ਵਿਕਾਸ ਟੂਲਕਿਟ ਸਾਰ
+
+ਇਹ ਪ੍ਰੋਜੈਕਟ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਮਾਹਰ ਹੋ ਜਾਵੋਗੇ:
+- **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਰਿਸਪਾਂਸਿਵ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਜੋ ਇਨਪੁਟ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦੇ ਹਨ
+- **ਰੀਅਲ-ਟਾਈਮ ਫੀਡਬੈਕ**: ਤੁਰੰਤ ਵਿਜ਼ੁਅਲ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਅਪਡੇਟਸ
+- **ਪ੍ਰਦਰਸ਼ਨ ਮਾਪ**: ਸਹੀ ਟਾਈਮਿੰਗ ਅਤੇ ਸਕੋਰਿੰਗ ਸਿਸਟਮ
+- **ਗੇਮ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ**: ਐਪਲੀਕੇਸ਼ਨ ਫਲੋ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨਾ
+- **ਇੰਟਰਐਕਟਿਵ ਡਿਜ਼ਾਈਨ**: ਆਕਰਸ਼ਕ, ਆਦਤ ਬਣਾਉਣ ਵਾਲੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਬਣਾਉਣਾ
+- **ਮਾਡਰਨ ਵੈਬ APIs**: ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਵਰਤ ਕੇ ਰਿਚ ਇੰਟਰਐਕਸ਼ਨ
+- **ਐਕਸੈਸਬਿਲਿਟੀ ਪੈਟਰਨਸ**: ਸਾਰੇ ਯੂਜ਼ਰਾਂ ਲਈ ਸਮਾਵੇਸ਼ੀ ਡਿਜ਼ਾਈਨ
+
+**ਅਸਲ ਦੁਨੀਆ ਵਿੱਚ ਅਰਜ਼ੀ**: ਇਹ ਹੁਨਰ ਸਿੱਧੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ:
+- **ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਸ**: ਕੋਈ ਵੀ ਇੰਟਰਐਕਟਿਵ ਇੰਟਰਫੇਸ ਜਾਂ ਡੈਸ਼ਬੋਰਡ
+- **ਸਿੱਖਣ ਵਾਲਾ ਸੌਫਟਵੇਅਰ**: ਸਿੱਖਣ ਵਾਲੇ ਪਲੇਟਫਾਰਮ ਅਤੇ ਹੁਨਰ ਮੁਲਾਂਕਣ ਟੂਲ
+- **ਉਤਪਾਦਕਤਾ ਟੂਲਸ**: ਟੈਕਸਟ ਐਡੀਟਰਸ, IDEs, ਅਤੇ ਸਹਿਯੋਗੀ ਸੌਫਟਵੇਅਰ
+- **ਗੇਮਿੰਗ ਇੰਡਸਟਰੀ**: ਬ੍ਰਾਊਜ਼ਰ ਗੇਮਸ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਮਨੋਰੰਜਨ
+- **ਮੋਬਾਈਲ ਵਿਕਾਸ**: ਟਚ-ਅਧਾਰਿਤ ਇੰਟਰਫੇਸ ਅਤੇ ਜੈਸਚਰ ਹੈਂਡਲਿੰਗ
+
+**ਅਗਲਾ ਪੱਧਰ**: ਤੁਸੀਂ ਅਗਰਗਤੀ ਗੇਮ ਫਰੇਮਵਰਕਸ, ਰੀਅਲ-ਟਾਈਮ ਮਲਟੀਪਲੇਅਰ ਸਿਸਟਮ, ਜਾਂ ਜਟਿਲ ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ!
+
+## ਕਰੈਡਿਟਸ
 
 ♥️ ਨਾਲ ਲਿਖਿਆ [ਕ੍ਰਿਸਟੋਫਰ ਹੈਰਿਸਨ](http://www.twitter.com/geektrainer)
 
 ---
 
-**ਅਸਵੀਕਰਤੀ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤਾ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/4-typing-game/typing-game/README.md b/translations/pa/4-typing-game/typing-game/README.md
index df32228def..586f7ead7f 100644
--- a/translations/pa/4-typing-game/typing-game/README.md
+++ b/translations/pa/4-typing-game/typing-game/README.md
@@ -1,19 +1,19 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e6b75e5b8caae906473a8a09d77b7121",
-  "translation_date": "2025-10-22T18:03:52+00:00",
+  "original_hash": "da8bc72041a2bb3826a54654ee1a8844",
+  "translation_date": "2025-11-03T16:47:05+00:00",
   "source_file": "4-typing-game/typing-game/README.md",
   "language_code": "pa"
 }
 -->
 # ਖੇਡ ਬਣਾਉਣਾ ਇਵੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
 
-ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਕਿਵੇਂ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕੀਤਾ ਜਾਂ ਟੈਕਸਟ ਬਾਕਸ ਵਿੱਚ ਕੁਝ ਟਾਈਪ ਕੀਤਾ? ਇਹ ਸਾਰਾ ਜਾਦੂ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦਾ ਹੈ! ਇਸ ਮਹੱਤਵਪੂਰਨ ਹੁਨਰ ਨੂੰ ਸਿੱਖਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਹੈ ਕੁਝ ਉਪਯੋਗੀ ਬਣਾਉਣਾ - ਇੱਕ ਟਾਈਪਿੰਗ ਸਪੀਡ ਗੇਮ ਜੋ ਤੁਹਾਡੇ ਹਰ ਕੀ-ਸਟ੍ਰੋਕ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦੀ ਹੈ।
+ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਕਿਵੇਂ ਪਤਾ ਲਗਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕੀਤਾ ਜਾਂ ਟੈਕਸਟ ਬਾਕਸ ਵਿੱਚ ਟਾਈਪ ਕੀਤਾ? ਇਹ ਹੈ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦਾ ਜਾਦੂ! ਇਸ ਮਹੱਤਵਪੂਰਨ ਹੁਨਰ ਨੂੰ ਸਿੱਖਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਹੈ ਕੁਝ ਉਪਯੋਗੀ ਬਣਾਉਣਾ - ਇੱਕ ਟਾਈਪਿੰਗ ਸਪੀਡ ਖੇਡ ਜੋ ਤੁਹਾਡੇ ਹਰ ਕੀ-ਸਟ੍ਰੋਕ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦੀ ਹੈ।
 
-ਤੁਸੀਂ ਖੁਦ ਵੇਖੋਗੇ ਕਿ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨਾਲ "ਗੱਲਬਾਤ" ਕਿਵੇਂ ਕਰਦੇ ਹਨ। ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਕਲਿਕ ਕਰਦੇ ਹੋ, ਟਾਈਪ ਕਰਦੇ ਹੋ ਜਾਂ ਮਾਊਸ ਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ, ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਛੋਟੇ ਸੁਨੇਹੇ ਭੇਜਦਾ ਹੈ (ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਸੀਂ ਇਵੈਂਟਸ ਕਹਿੰਦੇ ਹਾਂ), ਅਤੇ ਤੁਸੀਂ ਫੈਸਲਾ ਕਰਦੇ ਹੋ ਕਿ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦੇਣੀ ਹੈ!
+ਤੁਸੀਂ ਖੁਦ ਦੇਖੋਗੇ ਕਿ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨਾਲ "ਗੱਲਬਾਤ" ਕਿਵੇਂ ਕਰਦੇ ਹਨ। ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਕਲਿਕ ਕਰਦੇ ਹੋ, ਟਾਈਪ ਕਰਦੇ ਹੋ, ਜਾਂ ਆਪਣੀ ਮਾਊਸ ਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ, ਬ੍ਰਾਊਜ਼ਰ ਛੋਟੇ-ਛੋਟੇ ਸੁਨੇਹੇ (ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਸੀਂ ਇਵੈਂਟ ਕਹਿੰਦੇ ਹਾਂ) ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਭੇਜਦਾ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਫੈਸਲਾ ਕਰਦੇ ਹੋ ਕਿ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨੀ ਹੈ!
 
-ਜਦੋਂ ਤੱਕ ਅਸੀਂ ਇਹ ਖਤਮ ਕਰਾਂਗੇ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਅਸਲੀ ਟਾਈਪਿੰਗ ਗੇਮ ਹੋਵੇਗੀ ਜੋ ਤੁਹਾਡੀ ਸਪੀਡ ਅਤੇ ਸਹੀਤਾ ਨੂੰ ਟ੍ਰੈਕ ਕਰਦੀ ਹੈ। ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਗੱਲ, ਤੁਸੀਂ ਉਹ ਬੁਨਿਆਦੀ ਧਾਰਨਾਵਾਂ ਨੂੰ ਸਮਝੋਗੇ ਜੋ ਹਰ ਇੰਟਰਐਕਟਿਵ ਵੈਬਸਾਈਟ ਨੂੰ ਤਾਕਤ ਦਿੰਦੇ ਹਨ। ਚਲੋ ਸ਼ੁਰੂ ਕਰੀਏ!
+ਜਦੋਂ ਅਸੀਂ ਇਹ ਖਤਮ ਕਰਾਂਗੇ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਅਸਲੀ ਟਾਈਪਿੰਗ ਖੇਡ ਹੋਵੇਗੀ ਜੋ ਤੁਹਾਡੀ ਸਪੀਡ ਅਤੇ ਸਹੀਤਾ ਨੂੰ ਟ੍ਰੈਕ ਕਰੇਗੀ। ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਗੱਲ, ਤੁਸੀਂ ਉਹ ਬੁਨਿਆਦੀ ਧਾਰਨਾਵਾਂ ਨੂੰ ਸਮਝੋਗੇ ਜੋ ਹਰ ਇੰਟਰਐਕਟਿਵ ਵੈਬਸਾਈਟ ਨੂੰ ਤਾਕਤ ਦਿੰਦੇ ਹਨ। ਚਲੋ ਸ਼ੁਰੂ ਕਰੀਏ!
 
 ## ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼
 
@@ -21,50 +21,50 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ
 
-ਆਪਣੇ ਮਨਪਸੰਦ ਐਪ ਜਾਂ ਵੈਬਸਾਈਟ ਬਾਰੇ ਸੋਚੋ - ਇਸਨੂੰ ਜ਼ਿੰਦਾ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਬਣਾਉਣ ਵਾਲੀ ਚੀਜ਼ ਕੀ ਹੈ? ਇਹ ਸਾਰਾ ਇਸ ਗੱਲ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਇਹ ਤੁਹਾਡੇ ਕੀ ਕਰਨ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦਾ ਹੈ! ਹਰ ਟੈਪ, ਕਲਿਕ, ਸਵਾਈਪ ਜਾਂ ਕੀ-ਸਟ੍ਰੋਕ "ਇਵੈਂਟ" ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਇਹੀ ਹੈ ਜਿੱਥੇ ਵੈਬ ਡਿਵੈਲਪਮੈਂਟ ਦਾ ਅਸਲੀ ਜਾਦੂ ਹੁੰਦਾ ਹੈ।
+ਆਪਣੇ ਮਨਪਸੰਦ ਐਪ ਜਾਂ ਵੈਬਸਾਈਟ ਬਾਰੇ ਸੋਚੋ - ਇਸਨੂੰ ਜ਼ਿੰਦਾ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਬਣਾਉਣ ਵਾਲੀ ਚੀਜ਼ ਕੀ ਹੈ? ਇਹ ਸਾਰਾ ਕੁਝ ਇਸ ਗੱਲ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਇਹ ਤੁਹਾਡੇ ਕੀ ਕਰਨ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਦਾ ਹੈ! ਹਰ ਟੈਪ, ਕਲਿਕ, ਸਵਾਈਪ, ਜਾਂ ਕੀ-ਸਟ੍ਰੋਕ "ਇਵੈਂਟ" ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਇਹੀ ਹੈ ਜਿੱਥੇ ਵੈਬ ਡਿਵੈਲਪਮੈਂਟ ਦਾ ਅਸਲੀ ਜਾਦੂ ਹੁੰਦਾ ਹੈ।
 
-ਇਹ ਹੈ ਜੋ ਵੈਬ ਲਈ ਪ੍ਰੋਗਰਾਮਿੰਗ ਨੂੰ ਬਹੁਤ ਦਿਲਚਸਪ ਬਣਾਉਂਦਾ ਹੈ: ਅਸੀਂ ਕਦੇ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਕੋਈ ਵਿਅਕਤੀ ਉਸ ਬਟਨ 'ਤੇ ਕਦੋਂ ਕਲਿਕ ਕਰੇਗਾ ਜਾਂ ਟੈਕਸਟ ਬਾਕਸ ਵਿੱਚ ਟਾਈਪ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੇਗਾ। ਉਹ ਤੁਰੰਤ ਕਲਿਕ ਕਰ ਸਕਦੇ ਹਨ, ਪੰਜ ਮਿੰਟਾਂ ਦੀ ਉਡੀਕ ਕਰ ਸਕਦੇ ਹਨ, ਜਾਂ ਸ਼ਾਇਦ ਕਦੇ ਵੀ ਕਲਿਕ ਨਾ ਕਰਨ। ਇਸ ਅਣਪਛਾਤੇਪਣ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਅਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਲਿਖਣ ਬਾਰੇ ਵੱਖਰੇ ਤਰੀਕੇ ਨਾਲ ਸੋਚਣ ਦੀ ਲੋੜ ਹੈ।
+ਇਹ ਹੈ ਜੋ ਵੈਬ ਲਈ ਪ੍ਰੋਗਰਾਮਿੰਗ ਨੂੰ ਦਿਲਚਸਪ ਬਣਾਉਂਦਾ ਹੈ: ਅਸੀਂ ਕਦੇ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਕੋਈ ਵਿਅਕਤੀ ਉਸ ਬਟਨ 'ਤੇ ਕਦੋਂ ਕਲਿਕ ਕਰੇਗਾ ਜਾਂ ਟੈਕਸਟ ਬਾਕਸ ਵਿੱਚ ਟਾਈਪ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੇਗਾ। ਉਹ ਤੁਰੰਤ ਕਲਿਕ ਕਰ ਸਕਦੇ ਹਨ, ਪੰਜ ਮਿੰਟਾਂ ਦੀ ਉਡੀਕ ਕਰ ਸਕਦੇ ਹਨ, ਜਾਂ ਸ਼ਾਇਦ ਕਦੇ ਵੀ ਕਲਿਕ ਨਾ ਕਰਨ। ਇਸ ਅਣਪਛਾਤੇਪਣ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਅਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਲਿਖਣ ਬਾਰੇ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਸੋਚਣ ਦੀ ਲੋੜ ਹੈ।
 
-ਇੱਕ ਰਸੋਈ ਦੀ ਰੀਸਿਪੀ ਵਾਂਗ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਚੱਲਣ ਵਾਲਾ ਕੋਡ ਲਿਖਣ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਕੋਡ ਲਿਖਦੇ ਹਾਂ ਜੋ ਕੁਝ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ 1800 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਟੈਲੀਗ੍ਰਾਫ ਓਪਰੇਟਰ ਆਪਣੇ ਮਸ਼ੀਨਾਂ ਦੇ ਕੋਲ ਬੈਠਦੇ ਸਨ, ਤੁਰੰਤ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦੇਣ ਲਈ ਤਿਆਰ ਹੁੰਦੇ ਸਨ ਜਦੋਂ ਵੀ ਤਾਰ ਆਉਂਦੀ ਸੀ।
+ਇੱਕ ਰਸੋਈ ਦੀ ਰੀਸਿਪੀ ਵਾਂਗ ਟੌਪ ਤੋਂ ਬਾਟਮ ਤੱਕ ਚਲਣ ਵਾਲਾ ਕੋਡ ਲਿਖਣ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਕੋਡ ਲਿਖਦੇ ਹਾਂ ਜੋ ਕੁਝ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ 1800 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਟੈਲੀਗ੍ਰਾਫ ਓਪਰੇਟਰ ਆਪਣੇ ਮਸ਼ੀਨਾਂ ਦੇ ਕੋਲ ਬੈਠਦੇ ਸਨ, ਤੁਰੰਤ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਲਈ ਤਿਆਰ ਹੁੰਦੇ ਸਨ ਜਦੋਂ ਵੀ ਤਾਰ ਆਉਂਦੀ ਸੀ।
 
-ਤਾਂ ਫਿਰ "ਇਵੈਂਟ" ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ? ਸਧਾਰਨ ਤੌਰ 'ਤੇ, ਇਹ ਕੁਝ ਹੈ ਜੋ ਹੁੰਦਾ ਹੈ! ਜਦੋਂ ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹੋ - ਇਹ ਇੱਕ ਇਵੈਂਟ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਅੱਖਰ ਟਾਈਪ ਕਰਦੇ ਹੋ - ਇਹ ਇੱਕ ਇਵੈਂਟ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਆਪਣਾ ਮਾਊਸ ਹਿਲਾਉਂਦੇ ਹੋ - ਇਹ ਇੱਕ ਹੋਰ ਇਵੈਂਟ ਹੈ।
+ਤਾਂ ਅਸਲ ਵਿੱਚ "ਇਵੈਂਟ" ਕੀ ਹੈ? ਸਧਾਰਨ ਤੌਰ 'ਤੇ, ਇਹ ਕੁਝ ਹੈ ਜੋ ਹੁੰਦਾ ਹੈ! ਜਦੋਂ ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹੋ - ਇਹ ਇੱਕ ਇਵੈਂਟ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਅੱਖਰ ਟਾਈਪ ਕਰਦੇ ਹੋ - ਇਹ ਇੱਕ ਇਵੈਂਟ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੀ ਮਾਊਸ ਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ - ਇਹ ਇੱਕ ਹੋਰ ਇਵੈਂਟ ਹੈ।
 
-ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਾਨੂੰ ਆਪਣੇ ਕੋਡ ਨੂੰ ਸੁਣਨ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦੇਣ ਲਈ ਸੈਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। ਅਸੀਂ ਵਿਸ਼ੇਸ਼ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ ਜਿਨ੍ਹਾਂ ਨੂੰ **ਇਵੈਂਟ ਲਿਸਨਰ** ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਜੋ ਵਿਸ਼ੇਸ਼ ਚੀਜ਼ਾਂ ਦੇ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦੇ ਹਨ, ਫਿਰ ਜਦੋਂ ਉਹ ਹੁੰਦੇ ਹਨ ਤਾਂ ਤੁਰੰਤ ਕਾਰਵਾਈ ਕਰਦੇ ਹਨ।
+ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਾਨੂੰ ਆਪਣੇ ਕੋਡ ਨੂੰ ਸੁਣਨ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਲਈ ਸੈਟ ਕਰਨ ਦਿੰਦੀ ਹੈ। ਅਸੀਂ ਵਿਸ਼ੇਸ਼ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ ਜਿਨ੍ਹਾਂ ਨੂੰ **ਇਵੈਂਟ ਲਿਸਨਰ** ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਜੋ ਵਿਸ਼ੇਸ਼ ਚੀਜ਼ਾਂ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦੇ ਹਨ, ਫਿਰ ਜਦੋਂ ਉਹ ਹੁੰਦੇ ਹਨ ਤਾਂ ਤੁਰੰਤ ਕਾਰਵਾਈ ਕਰਦੇ ਹਨ।
 
-ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਆਪਣੇ ਕੋਡ ਲਈ ਡੋਰਬੈਲ ਹੋਣ ਵਾਂਗ ਸੋਚੋ। ਤੁਸੀਂ ਡੋਰਬੈਲ ਸੈਟ ਕਰਦੇ ਹੋ (`addEventListener()`), ਇਸਨੂੰ ਦੱਸਦੇ ਹੋ ਕਿ ਕਿਹੜੀ ਆਵਾਜ਼ ਸੁਣਨੀ ਹੈ (ਜਿਵੇਂ 'ਕਲਿਕ' ਜਾਂ 'ਕੀਪ੍ਰੈਸ'), ਅਤੇ ਫਿਰ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹੋ ਕਿ ਜਦੋਂ ਕੋਈ ਇਸਨੂੰ ਬਜਾਉਂਦਾ ਹੈ ਤਾਂ ਕੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ (ਤੁਹਾਡਾ ਕਸਟਮ ਫੰਕਸ਼ਨ)।
+ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਆਪਣੇ ਕੋਡ ਲਈ ਡੋਰਬੈਲ ਵਾਂਗ ਸੋਚੋ। ਤੁਸੀਂ ਡੋਰਬੈਲ ਸੈਟ ਕਰਦੇ ਹੋ (`addEventListener()`), ਇਸਨੂੰ ਦੱਸਦੇ ਹੋ ਕਿ ਕਿਹੜੀ ਆਵਾਜ਼ ਸੁਣਨੀ ਹੈ (ਜਿਵੇਂ 'ਕਲਿਕ' ਜਾਂ 'ਕੀਪ੍ਰੈਸ'), ਅਤੇ ਫਿਰ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹੋ ਕਿ ਜਦੋਂ ਕੋਈ ਇਸਨੂੰ ਬਜਾਉਂਦਾ ਹੈ ਤਾਂ ਕੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ (ਤੁਹਾਡਾ ਕਸਟਮ ਫੰਕਸ਼ਨ)।
 
 **ਇਵੈਂਟ ਲਿਸਨਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ:**
-- **ਸੁਣਦੇ ਹਨ** ਵਿਸ਼ੇਸ਼ ਯੂਜ਼ਰ ਐਕਸ਼ਨ ਜਿਵੇਂ ਕਿ ਕਲਿਕ, ਕੀ-ਸਟ੍ਰੋਕ ਜਾਂ ਮਾਊਸ ਮੂਵਮੈਂਟ
-- **ਤੁਰੰਤ ਚਲਾਉਂਦੇ ਹਨ** ਤੁਹਾਡਾ ਕਸਟਮ ਕੋਡ ਜਦੋਂ ਨਿਰਧਾਰਤ ਇਵੈਂਟ ਹੁੰਦਾ ਹੈ
-- **ਤੁਰੰਤ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦੇ ਹਨ** ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਲਈ, ਇੱਕ ਸਹੀਮਲ ਅਨੁਭਵ ਬਣਾਉਂਦੇ ਹਨ
-- **ਇਕੋ ਐਲੀਮੈਂਟ 'ਤੇ ਕਈ ਇਵੈਂਟਸ ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ** ਵੱਖਰੇ ਲਿਸਨਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਸੁਣਦੇ** ਹਨ ਵਿਸ਼ੇਸ਼ ਯੂਜ਼ਰ ਕਾਰਵਾਈਆਂ ਜਿਵੇਂ ਕਿ ਕਲਿਕ, ਕੀ-ਸਟ੍ਰੋਕ, ਜਾਂ ਮਾਊਸ ਮੂਵਮੈਂਟ
+- **ਤੁਰੰਤ ਚਲਾਉਂਦੇ** ਹਨ ਤੁਹਾਡਾ ਕਸਟਮ ਕੋਡ ਜਦੋਂ ਨਿਰਧਾਰਤ ਇਵੈਂਟ ਹੁੰਦਾ ਹੈ
+- **ਤੁਰੰਤ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਦੇ** ਹਨ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ 'ਤੇ, ਇੱਕ ਸਹੀਮਲ ਅਨੁਭਵ ਬਣਾਉਂਦੇ ਹਨ
+- **ਇਕੋ ਐਲੀਮੈਂਟ 'ਤੇ ਕਈ ਇਵੈਂਟਸ ਨੂੰ ਸੰਭਾਲਦੇ** ਹਨ ਵੱਖਰੇ ਲਿਸਨਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
 
-> **NOTE:** ਇਹ ਗੱਲ ਉਜਾਗਰ ਕਰਨ ਵਾਲੀ ਹੈ ਕਿ ਇਵੈਂਟ ਲਿਸਨਰ ਬਣਾਉਣ ਦੇ ਕਈ ਤਰੀਕੇ ਹਨ। ਤੁਸੀਂ ਗੁਮਨਾਮ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ ਨਾਮਿਤ ones ਬਣਾਉਣ। ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਸ਼ਾਰਟਕਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ `click` ਪ੍ਰਾਪਰਟੀ ਸੈਟ ਕਰਨਾ, ਜਾਂ `addEventListener()` ਦੀ ਵਰਤੋਂ ਕਰਨਾ। ਸਾਡੇ ਅਭਿਆਸ ਵਿੱਚ ਅਸੀਂ `addEventListener()` ਅਤੇ ਗੁਮਨਾਮ ਫੰਕਸ਼ਨ 'ਤੇ ਧਿਆਨ ਦੇਣ ਜਾ ਰਹੇ ਹਾਂ, ਕਿਉਂਕਿ ਇਹ ਵੈਬ ਡਿਵੈਲਪਰਾਂ ਦੁਆਰਾ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਸਭ ਤੋਂ ਆਮ ਤਰੀਕਾ ਹੈ। ਇਹ ਸਭ ਤੋਂ ਲਚਕਦਾਰ ਵੀ ਹੈ, ਕਿਉਂਕਿ `addEventListener()` ਸਾਰੇ ਇਵੈਂਟਸ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਵੈਂਟ ਦਾ ਨਾਮ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਦਿੱਤਾ ਜਾ ਸਕਦਾ ਹੈ।
+> **NOTE:** ਇਹ ਗੱਲ ਉਜਾਗਰ ਕਰਨ ਵਾਲੀ ਹੈ ਕਿ ਇਵੈਂਟ ਲਿਸਨਰ ਬਣਾਉਣ ਦੇ ਕਈ ਤਰੀਕੇ ਹਨ। ਤੁਸੀਂ ਗੁਮਨਾਮ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ ਨਾਮਿਤ ਫੰਕਸ਼ਨ ਬਣਾਉਣੇ। ਤੁਸੀਂ ਕਈ ਸ਼ਾਰਟਕਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ `click` ਪ੍ਰਾਪਰਟੀ ਸੈਟ ਕਰਨਾ, ਜਾਂ `addEventListener()` ਦੀ ਵਰਤੋਂ ਕਰਨਾ। ਸਾਡੇ ਅਭਿਆਸ ਵਿੱਚ ਅਸੀਂ `addEventListener()` ਅਤੇ ਗੁਮਨਾਮ ਫੰਕਸ਼ਨ 'ਤੇ ਧਿਆਨ ਦੇਣ ਵਾਲੇ ਹਾਂ, ਕਿਉਂਕਿ ਇਹ ਵੈਬ ਡਿਵੈਲਪਰਾਂ ਦੁਆਰਾ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਸਭ ਤੋਂ ਆਮ ਤਰੀਕਾ ਹੈ। ਇਹ ਸਭ ਤੋਂ ਲਚਕਦਾਰ ਵੀ ਹੈ, ਕਿਉਂਕਿ `addEventListener()` ਸਾਰੇ ਇਵੈਂਟਸ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਵੈਂਟ ਦਾ ਨਾਮ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਦਿੱਤਾ ਜਾ ਸਕਦਾ ਹੈ।
 
 ### ਆਮ ਇਵੈਂਟਸ
 
-ਜਦੋਂ ਕਿ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਲਈ ਸੁਣਨ ਲਈ ਕਈ ਵੱਖਰੇ ਇਵੈਂਟਸ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੇ ਹਨ, ਜ਼ਿਆਦਾਤਰ ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਸਿਰਫ ਕੁਝ ਮੁੱਖ ਇਵੈਂਟਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਇਹ ਮੁੱਖ ਇਵੈਂਟਸ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਉੱਚ-ਦਰਜੇ ਦੇ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਬਣਾਉਣ ਲਈ ਬੁਨਿਆਦ ਮੁਹੱਈਆ ਕਰੇਗਾ।
+ਜਦੋਂ ਕਿ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਲਈ ਸੁਣਨ ਲਈ ਕਈ ਵੱਖਰੇ ਇਵੈਂਟਸ ਪੇਸ਼ ਕਰਦੇ ਹਨ, ਜ਼ਿਆਦਾਤਰ ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਸਿਰਫ ਕੁਝ ਮੁੱਖ ਇਵੈਂਟਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਇਹ ਮੁੱਖ ਇਵੈਂਟਸ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਉੱਚ-ਦਰਜੇ ਦੇ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਬਣਾਉਣ ਲਈ ਬੁਨਿਆਦ ਮੁਹੱਈਆ ਕਰੇਗਾ।
 
-ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ ਤਾਂ ਸੁਣਨ ਲਈ [ਕਈ ਇਵੈਂਟਸ](https://developer.mozilla.org/docs/Web/Events) ਉਪਲਬਧ ਹਨ। ਅਸਲ ਵਿੱਚ, ਪੇਜ 'ਤੇ ਯੂਜ਼ਰ ਦੁਆਰਾ ਕੀਤੀ ਗਈ ਕੋਈ ਵੀ ਚੀਜ਼ ਇੱਕ ਇਵੈਂਟ ਪੈਦਾ ਕਰਦੀ ਹੈ, ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਬਹੁਤ ਤਾਕਤ ਦਿੰਦੀ ਹੈ ਕਿ ਉਹ ਉਹ ਅਨੁਭਵ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ। ਖੁਸ਼ਕਿਸਮਤੀ ਨਾਲ, ਤੁਹਾਨੂੰ ਆਮ ਤੌਰ 'ਤੇ ਸਿਰਫ ਕੁਝ ਮੁੱਖ ਇਵੈਂਟਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਥੇ ਕੁਝ ਆਮ ਹਨ (ਜਿਨ੍ਹਾਂ ਵਿੱਚੋਂ ਦੋ ਅਸੀਂ ਆਪਣੀ ਗੇਮ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਾਂਗੇ):
+ਜਦੋਂ ਤੁਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ ਤਾਂ ਤੁਹਾਡੇ ਲਈ ਸੁਣਨ ਲਈ [ਕਈ ਇਵੈਂਟਸ](https://developer.mozilla.org/docs/Web/Events) ਉਪਲਬਧ ਹਨ। ਅਸਲ ਵਿੱਚ, ਪੇਜ 'ਤੇ ਯੂਜ਼ਰ ਦੁਆਰਾ ਕੀਤੀ ਗਈ ਕੋਈ ਵੀ ਕਾਰਵਾਈ ਇੱਕ ਇਵੈਂਟ ਪੈਦਾ ਕਰਦੀ ਹੈ, ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਬਹੁਤ ਤਾਕਤ ਦਿੰਦੀ ਹੈ ਕਿ ਉਹ ਉਹ ਅਨੁਭਵ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ। ਖੁਸ਼ਕਿਸਮਤੀ ਨਾਲ, ਤੁਹਾਨੂੰ ਆਮ ਤੌਰ 'ਤੇ ਸਿਰਫ ਕੁਝ ਮੁੱਖ ਇਵੈਂਟਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਥੇ ਕੁਝ ਆਮ ਇਵੈਂਟਸ ਹਨ (ਜਿਨ੍ਹਾਂ ਵਿੱਚੋਂ ਦੋ ਅਸੀਂ ਆਪਣੀ ਖੇਡ ਬਣਾਉਣ ਦੌਰਾਨ ਵਰਤਾਂਗੇ):
 
 | ਇਵੈਂਟ | ਵੇਰਵਾ | ਆਮ ਵਰਤੋਂ ਦੇ ਕੇਸ |
 |-------|-------------|------------------|
-| `click` | ਯੂਜ਼ਰ ਨੇ ਕੁਝ 'ਤੇ ਕਲਿਕ ਕੀਤਾ | ਬਟਨ, ਲਿੰਕ, ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟਸ |
+| `click` | ਯੂਜ਼ਰ ਨੇ ਕੁਝ 'ਤੇ ਕਲਿਕ ਕੀਤਾ | ਬਟਨ, ਲਿੰਕ, ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟ |
 | `contextmenu` | ਯੂਜ਼ਰ ਨੇ ਸੱਜੇ ਮਾਊਸ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕੀਤਾ | ਕਸਟਮ ਰਾਈਟ-ਕਲਿਕ ਮੀਨੂ |
 | `select` | ਯੂਜ਼ਰ ਨੇ ਕੁਝ ਟੈਕਸਟ ਹਾਈਲਾਈਟ ਕੀਤਾ | ਟੈਕਸਟ ਐਡਿਟਿੰਗ, ਕਾਪੀ ਓਪਰੇਸ਼ਨ |
-| `input` | ਯੂਜ਼ਰ ਨੇ ਕੁਝ ਟੈਕਸਟ ਇਨਪੁਟ ਕੀਤਾ | ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ, ਰੀਅਲ-ਟਾਈਮ ਸਰਚ |
+| `input` | ਯੂਜ਼ਰ ਨੇ ਕੁਝ ਟੈਕਸਟ ਇਨਪੁਟ ਕੀਤਾ | ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ, ਰੀਅਲ-ਟਾਈਮ ਖੋਜ |
 
 **ਇਹ ਇਵੈਂਟ ਟਾਈਪਸ ਨੂੰ ਸਮਝਣਾ:**
-- **ਟ੍ਰਿਗਰ** ਜਦੋਂ ਯੂਜ਼ਰ ਪੇਜ 'ਤੇ ਵਿਸ਼ੇਸ਼ ਐਲੀਮੈਂਟਸ ਨਾਲ ਇੰਟਰਐਕਟ ਕਰਦੇ ਹਨ
-- **ਯੂਜ਼ਰ ਦੇ ਐਕਸ਼ਨ ਬਾਰੇ ਵਿਸਤ੍ਰਿਤ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ** ਇਵੈਂਟ ਓਬਜੈਕਟਸ ਰਾਹੀਂ
-- **ਤੁਹਾਨੂੰ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ, ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ**
+- **ਟ੍ਰਿਗਰ** ਕਰਦੇ ਹਨ ਜਦੋਂ ਯੂਜ਼ਰ ਪੇਜ 'ਤੇ ਵਿਸ਼ੇਸ਼ ਐਲੀਮੈਂਟਸ ਨਾਲ ਇੰਟਰਐਕਟ ਕਰਦੇ ਹਨ
+- **ਯੂਜ਼ਰ ਦੀ ਕਾਰਵਾਈ ਬਾਰੇ ਵਿਸਤ੍ਰਿਤ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ** ਇਵੈਂਟ ਓਬਜੈਕਟਸ ਰਾਹੀਂ
+- **ਤੁਹਾਨੂੰ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ, ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦੀ ਯੋਗਤਾ ਦਿੰਦੇ ਹਨ**
 - **ਵੱਖਰੇ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਡਿਵਾਈਸ 'ਤੇ ਸਥਿਰ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ**
 
-## ਗੇਮ ਬਣਾਉਣਾ
+## ਖੇਡ ਬਣਾਉਣਾ
 
-ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਗਏ ਹੋ ਕਿ ਇਵੈਂਟਸ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਆਓ ਇਸ ਗਿਆਨ ਨੂੰ ਅਮਲ ਵਿੱਚ ਲਿਆਉਣ ਲਈ ਕੁਝ ਉਪਯੋਗੀ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੀਏ। ਅਸੀਂ ਇੱਕ ਟਾਈਪਿੰਗ ਸਪੀਡ ਗੇਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਦੋਂ ਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਡਿਵੈਲਪਰ ਹੁਨਰ ਵਿਕਸਿਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
+ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਗਏ ਹੋ ਕਿ ਇਵੈਂਟਸ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਚਲੋ ਇਸ ਗਿਆਨ ਨੂੰ ਅਮਲ ਵਿੱਚ ਲਿਆਉਣ ਲਈ ਕੁਝ ਉਪਯੋਗ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੀਏ। ਅਸੀਂ ਇੱਕ ਟਾਈਪਿੰਗ ਸਪੀਡ ਖੇਡ ਬਣਾਉਣ ਵਾਲੇ ਹਾਂ ਜੋ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ ਜਦੋਂ ਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਡਿਵੈਲਪਰ ਹੁਨਰ ਵਿਕਸਿਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ।
 
-ਅਸੀਂ ਇੱਕ ਗੇਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇਵੈਂਟਸ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਦੀ ਪੜਚੋਲ ਕਰੇਗਾ। ਸਾਡੀ ਗੇਮ ਇੱਕ ਖਿਡਾਰੀ ਦੀ ਟਾਈਪਿੰਗ ਸਿੱਧਤਾ ਦੀ ਜਾਂਚ ਕਰੇਗੀ, ਜੋ ਕਿ ਸਾਰੇ ਡਿਵੈਲਪਰਾਂ ਲਈ ਇੱਕ ਬਹੁਤ ਹੀ ਅਣਡਿੱਠਾ ਹੁਨਰ ਹੈ। ਦਿਲਚਸਪ ਗੱਲ: QWERTY ਕੀਬੋਰਡ ਲੇਆਉਟ ਜੋ ਅਸੀਂ ਅੱਜ ਵਰਤਦੇ ਹਾਂ ਅਸਲ ਵਿੱਚ 1870 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਟਾਈਪਰਾਈਟਰਾਂ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਸੀ - ਅਤੇ ਚੰਗੀ ਟਾਈਪਿੰਗ ਸਿੱਧਤਾ ਅੱਜ ਵੀ ਪ੍ਰੋਗਰਾਮਰਾਂ ਲਈ ਬਹੁਤ ਕੀਮਤੀ ਹੈ! ਗੇਮ ਦਾ ਜਨਰਲ ਫਲੋ ਇਸ ਤਰ੍ਹਾਂ ਹੋਵੇਗਾ:
+ਅਸੀਂ ਇੱਕ ਖੇਡ ਬਣਾਉਣ ਵਾਲੇ ਹਾਂ ਜੋ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇਵੈਂਟਸ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਦੀ ਪੜਚੋਲ ਕਰੇਗੀ। ਸਾਡੀ ਖੇਡ ਖਿਡਾਰੀ ਦੀ ਟਾਈਪਿੰਗ ਹੁਨਰ ਦੀ ਜਾਂਚ ਕਰੇਗੀ, ਜੋ ਕਿ ਸਾਰੇ ਡਿਵੈਲਪਰਾਂ ਲਈ ਸਭ ਤੋਂ ਅਣਡਿੱਠਾ ਹੁਨਰ ਹੈ। ਦਿਲਚਸਪ ਗੱਲ: ਅੱਜ ਜੋ ਕਿਊਅਰਟੀ ਕੀਬੋਰਡ ਲੇਆਉਟ ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ ਉਹ ਅਸਲ ਵਿੱਚ 1870 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਟਾਈਪਰਾਈਟਰਾਂ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਸੀ - ਅਤੇ ਚੰਗੇ ਟਾਈਪਿੰਗ ਹੁਨਰ ਅੱਜ ਵੀ ਪ੍ਰੋਗਰਾਮਰਾਂ ਲਈ ਬਹੁਤ ਕੀਮਤੀ ਹਨ! ਖੇਡ ਦਾ ਜਨਰਲ ਫਲੋ ਇਸ ਤਰ੍ਹਾਂ ਹੋਵੇਗਾ:
 
 ```mermaid
 flowchart TD
@@ -82,20 +82,20 @@ flowchart TD
     H --> C
 ```
 
-**ਇਹ ਹੈ ਕਿ ਸਾਡੀ ਗੇਮ ਕਿਵੇਂ ਕੰਮ ਕਰੇਗੀ:**
+**ਇਹ ਹੈ ਕਿ ਸਾਡੀ ਖੇਡ ਕਿਵੇਂ ਕੰਮ ਕਰੇਗੀ:**
 - **ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ** ਜਦੋਂ ਖਿਡਾਰੀ ਸਟਾਰਟ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ ਅਤੇ ਇੱਕ ਰੈਂਡਮ ਕੋਟ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
 - **ਪਲੇਅਰ ਦੀ ਟਾਈਪਿੰਗ ਪ੍ਰਗਤੀ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਸ਼ਬਦ-ਦਰ-ਸ਼ਬਦ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ**
-- **ਮੌਜੂਦਾ ਸ਼ਬਦ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਦਾ ਹੈ** ਖਿਡਾਰੀ ਦੇ ਧਿਆਨ ਨੂੰ ਗਾਈਡ ਕਰਨ ਲਈ
+- **ਮੌਜੂਦਾ ਸ਼ਬਦ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਖਿਡਾਰੀ ਦਾ ਧਿਆਨ ਕੇਂਦਰਿਤ ਰਹੇ**
 - **ਟਾਈਪਿੰਗ ਗਲਤੀਆਂ ਲਈ ਤੁਰੰਤ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
-- **ਕੁੱਲ ਸਮਾਂ ਦੀ ਗਣਨਾ ਕਰਦਾ ਹੈ ਅਤੇ ਜਦੋਂ ਕੋਟ ਪੂਰਾ ਹੋ ਜਾਂਦਾ ਹੈ ਤਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ**
+- **ਕੁੱਲ ਸਮਾਂ ਦੀ ਗਣਨਾ ਕਰਦਾ ਹੈ ਅਤੇ ਜਦੋਂ ਕੋਟ ਪੂਰਾ ਹੋ ਜਾਂਦਾ ਹੈ ਤਾਂ ਦਿਖਾਉਂਦਾ ਹੈ**
 
-ਆਓ ਆਪਣੀ ਗੇਮ ਬਣਾਈਏ, ਅਤੇ ਇਵੈਂਟਸ ਬਾਰੇ ਸਿੱਖੀਏ!
+ਚਲੋ ਆਪਣੀ ਖੇਡ ਬਣਾਈਏ, ਅਤੇ ਇਵੈਂਟਸ ਬਾਰੇ ਸਿੱਖੀਏ!
 
 ### ਫਾਈਲ ਸਟ੍ਰਕਚਰ
 
-ਕੋਡਿੰਗ ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਸੁਧਰੇ ਹੋਏ ਹੋਈਏ! ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਸਾਫ ਫਾਈਲ ਸਟ੍ਰਕਚਰ ਹੋਣਾ ਤੁਹਾਨੂੰ ਬਾਅਦ ਵਿੱਚ ਸਿਰਦਰਦ ਤੋਂ ਬਚਾਏਗਾ ਅਤੇ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਹੋਰ ਪੇਸ਼ੇਵਰ ਬਣਾਏਗਾ। 😊
+ਕੋਡਿੰਗ ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਚਲੋ ਸੁਧਰੇ ਹੋਏ ਬਣੀਅਾਦੀ ਬਣਤਰ ਬਣਾਈਏ! ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਸਾਫ ਸਟ੍ਰਕਚਰ ਹੋਣਾ ਤੁਹਾਨੂੰ ਬਾਅਦ ਵਿੱਚ ਸਿਰਦਰਦ ਤੋਂ ਬਚਾਏਗਾ ਅਤੇ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਹੋਰ ਪੇਸ਼ੇਵਰ ਬਣਾਏਗਾ। 😊
 
-ਅਸੀਂ ਸਿਰਫ ਤਿੰਨ ਫਾਈਲਾਂ ਨਾਲ ਚੀਜ਼ਾਂ ਸਧਾਰਨ ਰੱਖਣ ਜਾ ਰਹੇ ਹਾਂ: `index.html` ਸਾਡੇ ਪੇਜ ਸਟ੍ਰਕਚਰ ਲਈ, `script.js` ਸਾਰੀ ਗੇਮ ਲਾਜ਼ਿਕ ਲਈ, ਅਤੇ `style.css` ਸਭ ਕੁਝ ਸ਼ਾਨਦਾਰ ਬਣਾਉਣ ਲਈ। ਇਹ ਕਲਾਸਿਕ ਤ੍ਰਿਓ ਹੈ ਜੋ ਵੈਬ ਦਾ ਜ਼ਿਆਦਾਤਰ ਹਿੱਸਾ ਤਾਕਤਵਾਨ ਬਣਾਉਂਦਾ ਹੈ!
+ਅਸੀਂ ਸਿਰਫ ਤਿੰਨ ਫਾਈਲਾਂ ਨਾਲ ਚੀਜ਼ਾਂ ਸਧਾਰਨ ਰੱਖਣ ਵਾਲੇ ਹਾਂ: `index.html` ਸਾਡੇ ਪੇਜ ਸਟ੍ਰਕਚਰ ਲਈ, `script.js` ਸਾਰੀ ਖੇਡ ਲਾਜਿਕ ਲਈ, ਅਤੇ `style.css` ਸਭ ਕੁਝ ਵਧੀਆ ਦਿਖਾਉਣ ਲਈ। ਇਹ ਹੈ ਕਲਾਸਿਕ ਤ੍ਰਿਓ ਜੋ ਵੈਬ ਦਾ ਜ਼ਿਆਦਾਤਰ ਹਿੱਸਾ ਤਾਕਤਵਾਨ ਬਣਾਉਂਦਾ ਹੈ!
 
 **ਕੰਸੋਲ ਜਾਂ ਟਰਮੀਨਲ ਵਿੰਡੋ ਖੋਲ੍ਹ ਕੇ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਕਮਾਂਡ ਜਾਰੀ ਕਰਕੇ ਆਪਣੇ ਕੰਮ ਲਈ ਇੱਕ ਨਵਾਂ ਫੋਲਡਰ ਬਣਾਓ:**
 
@@ -107,10 +107,10 @@ mkdir typing-game && cd typing-game
 md typing-game && cd typing-game
 ```
 
-**ਇਹ ਕਮਾਂਡ ਕੀ ਕਰਦੇ ਹਨ:**
-- **ਨਵਾਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਉਂਦੇ ਹਨ** ਜਿਸਨੂੰ `typing-game` ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਲਈ
-- **ਆਪਣੇ ਆਪ ਨਵੀਂ ਬਣਾਈ ਗਈ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾ ਰਹੇ ਹਨ**
-- **ਤੁਹਾਡੇ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਲਈ ਇੱਕ ਸਾਫ ਵਰਕਸਪੇਸ ਸੈਟ ਕਰਦੇ ਹਨ**
+**ਇਹ ਕਮਾਂਡ ਕੀ ਕਰਦੀਆਂ ਹਨ:**
+- **ਨਵਾਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਉਂਦੀਆਂ ਹਨ** ਜਿਸਨੂੰ `typing-game` ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਲਈ
+- **ਆਪਣੇ ਆਪ ਨਵੀਂ ਬਣਾਈ ਗਈ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾ ਰਹੀਆਂ ਹਨ**
+- **ਤੁਹਾਡੇ ਖੇਡ ਵਿਕਾਸ ਲਈ ਸਾਫ ਵਰਕਸਪੇਸ ਸੈਟ ਕਰਦੀਆਂ ਹਨ**
 
 **Visual Studio Code ਖੋਲ੍ਹੋ:**
 
@@ -119,42 +119,42 @@ code .
 ```
 
 **ਇਹ ਕਮਾਂਡ:**
-- **Visual Studio Code ਨੂੰ ਮੌਜੂਦਾ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਲਾਂਚ ਕਰਦਾ ਹੈ**
-- **ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਨੂੰ ਐਡੀਟਰ ਵਿੱਚ ਖੋਲ੍ਹਦਾ ਹੈ**
-- **ਤੁਹਾਨੂੰ ਸਾਰੇ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲਾਂ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
+- **Visual Studio Code ਨੂੰ ਮੌਜੂਦਾ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਲਾਂਚ ਕਰਦੀ ਹੈ**
+- **ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਨੂੰ ਐਡੀਟਰ ਵਿੱਚ ਖੋਲ੍ਹਦੀ ਹੈ**
+- **ਤੁਹਾਨੂੰ ਸਾਰੇ ਵਿਕਾਸ ਟੂਲਾਂ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ**
 
-**Visual Studio Code ਵਿੱਚ ਫੋਲਡਰ ਵਿੱਚ ਤਿੰਨ ਫਾਈਲਾਂ ਹੇਠਾਂ ਦਿੱਤੇ ਨਾਮਾਂ ਨਾਲ ਸ਼ਾਮਲ ਕਰੋ:**
-- `index.html` - ਤੁਹਾਡੀ ਗੇਮ ਦੀ ਸਟ੍ਰਕਚਰ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ
-- `script.js` - ਸਾਰੀ ਗੇਮ ਲਾਜ਼ਿਕ ਅਤੇ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ
+**Visual Studio Code ਵਿੱਚ ਫੋਲਡਰ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਨਾਮਾਂ ਨਾਲ ਤਿੰਨ ਫਾਈਲਾਂ ਸ਼ਾਮਲ ਕਰੋ:**
+- `index.html` - ਤੁਹਾਡੀ ਖੇਡ ਦੀ ਬਣਤਰ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ
+- `script.js` - ਸਾਰੀ ਖੇਡ ਲਾਜਿਕ ਅਤੇ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ
 - `style.css` - ਵਿਜ਼ੂਅਲ ਦਿੱਖ ਅਤੇ ਸਟਾਈਲਿੰਗ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
 
 ## ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣਾ
 
-ਹੁਣ ਆਓ ਉਹ ਮੰਚ ਬਣਾਈਏ ਜਿੱਥੇ ਸਾਰੀ ਗੇਮ ਐਕਸ਼ਨ ਹੋਵੇਗੀ! ਇਸਨੂੰ ਇੱਕ ਅੰਤਰਿਕਸ਼ ਜਹਾਜ਼ ਦੇ ਕੰਟਰੋਲ ਪੈਨਲ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਨ ਵਾਂਗ ਸੋਚੋ - ਸਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਸਾਡੀ ਗੇਮ ਖੇਡਣ ਵਾਲੇ ਨੂੰ ਜੋ ਕੁਝ ਚਾਹੀਦਾ ਹੈ ਉਹ ਉਨ੍ਹਾਂ ਦੀ ਉਮੀਦ ਦੇ ਅਨੁਸਾਰ ਹੋਵੇ।
+ਹੁਣ ਚਲੋ ਮੰਚ ਬਣਾਈਏ ਜਿੱਥੇ ਸਾਰੀ ਖੇਡ ਦੀ ਕਾਰਵਾਈ ਹੋਵੇਗੀ! ਇਸਨੂੰ ਇੱਕ ਅੰਤਰਿਕਸ਼ ਜਹਾਜ਼ ਦੇ ਕੰਟਰੋਲ ਪੈਨਲ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਨ ਵਾਂਗ ਸੋਚੋ - ਸਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਸਾਡੀ ਖੇਡ ਖੇਡਣ ਵਾਲੇ ਨੂੰ ਜੋ ਕੁਝ ਚਾਹੀਦਾ ਹੈ ਉਹ ਉਨ੍ਹਾਂ ਦੀ ਉਮੀਦ ਦੇ ਅਨੁਸਾਰ ਹੋਵੇ।
 
-ਆਓ ਇਹ ਪਤਾ ਕਰੀਏ ਕਿ ਸਾਡੀ ਗੇਮ ਨੂੰ ਅਸਲ ਵਿੱਚ ਕੀ ਚਾਹੀਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਇੱਕ ਟਾਈਪਿੰਗ ਗੇਮ ਖੇਡ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਕ੍ਰੀਨ 'ਤੇ ਕੀ ਦੇਖਣਾ ਚਾਹੋਗੇ? ਇੱਥੇ ਹੈ ਜੋ ਸਾਨੂੰ ਚਾਹੀਦਾ ਹੈ:
+ਚਲੋ ਪਤਾ ਕਰੀਏ ਕਿ ਸਾਡੀ ਖੇਡ ਨੂੰ ਅਸਲ ਵਿੱਚ ਕੀ ਚਾਹੀਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਇੱਕ ਟਾਈਪਿੰਗ ਖੇਡ ਖੇਡ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਕ੍ਰੀਨ 'ਤੇ ਕੀ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਇੱਥੇ ਹੈ ਜੋ ਸਾਨੂੰ ਚਾਹੀਦਾ ਹੈ:
 
 | ਯੂਆਈ ਐਲੀਮੈਂਟ | ਉਦੇਸ਼ | HTML ਐਲੀਮੈਂਟ |
 |------------|---------|-------------|
-| Quote Display | ਟਾਈਪ ਕਰਨ ਲਈ ਟੈਕਸਟ ਦਿਖਾਉਂਦਾ ਹੈ | `<p>` with `id="quote"` |
-| Message Area | ਸਥਿਤੀ ਅਤੇ ਸਫਲਤਾ ਦੇ ਸੁਨੇਹੇ ਦਿਖਾਉਂਦਾ ਹੈ | `<p>` with `id="message"` |
-| Text Input | ਜਿੱਥੇ ਖਿਡਾਰੀ ਕੋਟ ਟਾਈਪ ਕਰਦੇ ਹਨ | `<input>` with `id="typed-value"` |
-| Start Button | ਗੇਮ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ | `<button>` with `id="start"` |
+| ਕੋਟ ਡਿਸਪਲੇ | ਟਾਈਪ ਕਰਨ ਲਈ ਟੈਕਸਟ ਦਿਖਾਉਂਦਾ ਹੈ | `<p>` ਜਿਸਦਾ `id="quote"` ਹੈ |
+| ਮੈਸੇਜ ਏਰੀਆ | ਸਥਿਤੀ ਅਤੇ ਸਫਲਤਾ ਦੇ ਸੁਨੇਹੇ ਦਿਖਾਉਂਦਾ ਹੈ | `<p>` ਜਿਸਦਾ `id="message"` ਹੈ |
+| ਟੈਕਸਟ ਇਨਪੁਟ | ਜਿੱਥੇ ਖਿਡਾਰੀ ਕੋਟ ਟਾਈਪ ਕਰਦੇ ਹਨ | `<input>` ਜਿਸਦਾ `id="typed-value"` ਹੈ |
+| ਸਟਾਰਟ ਬਟਨ | ਖੇਡ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ | `<button>` ਜਿਸਦਾ `id="start"` ਹੈ |
 
 **ਯੂਆਈ ਸਟ੍ਰਕਚਰ ਨੂੰ ਸਮਝਣਾ:**
-- **ਸਮੱਗਰੀ ਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ**
-- **ਐਲੀਮੈਂਟਸ ਨੂੰ ਯੂਨੀਕ
-| ਕੋਟਸ ਦੀ ਸੂਚੀ | ਖੇਡ ਲਈ ਸਾਰੀਆਂ ਸੰਭਾਵਿਤ ਕੋਟਸ ਸਟੋਰ ਕਰੋ | `['Quote 1', 'Quote 2', ...]` |
-| ਸ਼ਬਦਾਂ ਦੀ ਸੂਚੀ | ਮੌਜੂਦਾ ਕੋਟ ਨੂੰ ਵਿਅਕਤੀਗਤ ਸ਼ਬਦਾਂ ਵਿੱਚ ਵੰਡੋ | `['When', 'you', 'have', ...]` |
-| ਸ਼ਬਦ ਸੂਚੀ | ਟਰੈਕ ਕਰੋ ਕਿ ਖਿਡਾਰੀ ਕਿਹੜਾ ਸ਼ਬਦ ਟਾਈਪ ਕਰ ਰਿਹਾ ਹੈ | `0, 1, 2, 3...` |
+- **ਸਮੱਗਰੀ ਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਉੱਤੋਂ ਹੇਠਾਂ ਤੱਕ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ**
+
+| ਕੋਟਸ ਦੀ ਐਰੇ | ਖੇਡ ਲਈ ਸਾਰੀਆਂ ਸੰਭਾਵਿਤ ਕੋਟਸ ਸਟੋਰ ਕਰੋ | `['Quote 1', 'Quote 2', ...]` |
+| ਸ਼ਬਦ ਐਰੇ | ਮੌਜੂਦਾ ਕੋਟ ਨੂੰ ਅਲੱਗ-ਅਲੱਗ ਸ਼ਬਦਾਂ ਵਿੱਚ ਤੋੜੋ | `['When', 'you', 'have', ...]` |
+| ਸ਼ਬਦ ਇੰਡੈਕਸ | ਟਰੈਕ ਕਰੋ ਕਿ ਖਿਡਾਰੀ ਕਿਹੜਾ ਸ਼ਬਦ ਟਾਈਪ ਕਰ ਰਿਹਾ ਹੈ | `0, 1, 2, 3...` |
 | ਸ਼ੁਰੂਆਤੀ ਸਮਾਂ | ਸਕੋਰਿੰਗ ਲਈ ਬੀਤਿਆ ਸਮਾਂ ਗਿਣੋ | `Date.now()` |
 
-**ਸਾਡੇ UI ਤੱਤਾਂ ਲਈ ਹਵਾਲੇ ਦੀ ਲੋੜ ਹੋਵੇਗੀ:**
-| ਤੱਤ | ID | ਉਦੇਸ਼ |
+**ਸਾਨੂੰ ਆਪਣੇ UI ਐਲੀਮੈਂਟਸ ਲਈ ਹਵਾਲੇ ਦੀ ਲੋੜ ਹੋਵੇਗੀ:**
+| ਐਲੀਮੈਂਟ | ID | ਉਦੇਸ਼ |
 |---------|----|---------|
 | ਟੈਕਸਟ ਇਨਪੁਟ | `typed-value` | ਜਿੱਥੇ ਖਿਡਾਰੀ ਟਾਈਪ ਕਰਦੇ ਹਨ |
 | ਕੋਟ ਡਿਸਪਲੇ | `quote` | ਟਾਈਪ ਕਰਨ ਲਈ ਕੋਟ ਦਿਖਾਉਂਦਾ ਹੈ |
-| ਸੁਨੇਹਾ ਖੇਤਰ | `message` | ਸਥਿਤੀ ਅਪਡੇਟ ਦਿਖਾਉਂਦਾ ਹੈ |
+| ਸੁਨੇਹਾ ਖੇਤਰ | `message` | ਸਥਿਤੀ ਅੱਪਡੇਟ ਦਿਖਾਉਂਦਾ ਹੈ |
 
 ```javascript
 // inside script.js
@@ -179,36 +179,36 @@ const messageElement = document.getElementById('message');
 const typedValueElement = document.getElementById('typed-value');
 ```
 
-**ਇਹ ਸੈਟਅਪ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਸਟੋਰ** ਕਰਦਾ ਹੈ Sherlock Holmes ਦੀਆਂ ਕੋਟਸ ਦੀ ਸੂਚੀ `const` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਿਉਂਕਿ ਕੋਟਸ ਨਹੀਂ ਬਦਲਣਗੀਆਂ
-- **ਸ਼ੁਰੂ** ਕਰਦਾ ਹੈ ਟਰੈਕਿੰਗ ਵੈਰੀਏਬਲਾਂ ਨੂੰ `let` ਨਾਲ ਕਿਉਂਕਿ ਇਹ ਮੁੱਲ ਖੇਡ ਦੌਰਾਨ ਅਪਡੇਟ ਹੋਣਗੇ
-- **ਪਕੜਦਾ ਹੈ** DOM ਤੱਤਾਂ ਦੇ ਹਵਾਲੇ `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੇਜ਼ ਪਹੁੰਚ ਲਈ
-- **ਸੈਟਅਪ** ਕਰਦਾ ਹੈ ਸਾਰੇ ਖੇਡ ਫੰਕਸ਼ਨਲਿਟੀ ਲਈ ਮਜ਼ਬੂਤ, ਵੇਰਵੇਦਾਰ ਵੈਰੀਏਬਲ ਨਾਮਾਂ ਨਾਲ
-- **ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ** ਸੰਬੰਧਿਤ ਡਾਟਾ ਅਤੇ ਤੱਤਾਂ ਨੂੰ ਆਸਾਨ ਕੋਡ ਰੱਖ-ਰਖਾਅ ਲਈ
+**ਇਸ ਸੈਟਅਪ ਕੋਡ ਨਾਲ ਕੀ ਹਾਸਲ ਹੁੰਦਾ ਹੈ:**
+- **ਸਟੋਰ ਕਰਦਾ ਹੈ** Sherlock Holmes ਦੀਆਂ ਕੋਟਸ ਦੀ ਐਰੇ `const` ਨਾਲ ਕਿਉਂਕਿ ਕੋਟਸ ਨਹੀਂ ਬਦਲਣਗੀਆਂ
+- **ਟ੍ਰੈਕਿੰਗ ਵੈਰੀਏਬਲਸ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** `let` ਨਾਲ ਕਿਉਂਕਿ ਇਹ ਮੁੱਲ ਖੇਡ ਦੌਰਾਨ ਅੱਪਡੇਟ ਹੋਣਗੇ
+- **DOM ਐਲੀਮੈਂਟਸ ਦੇ ਹਵਾਲੇ ਪਕੜਦਾ ਹੈ** `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੇਜ਼ ਪਹੁੰਚ ਲਈ
+- **ਸਾਰਾ ਖੇਡ ਫੰਕਸ਼ਨਾਲਿਟੀ ਦਾ ਅਧਾਰ ਸੈਟ ਕਰਦਾ ਹੈ** ਸਪਸ਼ਟ ਅਤੇ ਵਰਣਨਾਤਮਕ ਵੈਰੀਏਬਲ ਨਾਂਵਾਂ ਨਾਲ
+- **ਲਾਜ਼ਮੀ ਡਾਟਾ ਅਤੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ** ਕੋਡ ਦੇ ਰੱਖ-ਰਖਾਅ ਨੂੰ ਆਸਾਨ ਬਣਾਉਣ ਲਈ
 
 ✅ ਆਪਣੀ ਖੇਡ ਵਿੱਚ ਹੋਰ ਕੋਟਸ ਸ਼ਾਮਲ ਕਰੋ
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਅਸੀਂ `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੱਤਾਂ ਨੂੰ ਜਦੋਂ ਚਾਹੀਏ ਤਦ ਪਕੜ ਸਕਦੇ ਹਾਂ। ਕਿਉਂਕਿ ਅਸੀਂ ਇਨ੍ਹਾਂ ਤੱਤਾਂ ਨੂੰ ਨਿਯਮਿਤ ਤੌਰ 'ਤੇ ਹਵਾਲਾ ਦੇਣ ਜਾ ਰਹੇ ਹਾਂ, ਅਸੀਂ ਸਟ੍ਰਿੰਗ ਲਿਟਰਲਜ਼ ਨਾਲ ਟਾਈਪੋਜ਼ ਤੋਂ ਬਚਣ ਜਾ ਰਹੇ ਹਾਂ। [Vue.js](https://vuejs.org/) ਜਾਂ [React](https://reactjs.org/) ਵਰਗੇ ਫਰੇਮਵਰਕ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡ ਨੂੰ ਕੇਂਦਰੀਕਰਿਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ।
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਅਸੀਂ `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਦੋਂ ਚਾਹੀਏ ਐਲੀਮੈਂਟਸ ਨੂੰ ਰੀਟਰੀਵ ਕਰ ਸਕਦੇ ਹਾਂ। ਕਿਉਂਕਿ ਅਸੀਂ ਇਹ ਐਲੀਮੈਂਟਸ ਨੂੰ ਬਾਰ-ਬਾਰ ਹਵਾਲਾ ਦੇਣ ਜਾ ਰਹੇ ਹਾਂ, ਅਸੀਂ ਸਟ੍ਰਿੰਗ ਲਿਟਰਲਸ ਵਿੱਚ ਟਾਈਪੋਜ਼ ਤੋਂ ਬਚਣ ਜਾ ਰਹੇ ਹਾਂ। [Vue.js](https://vuejs.org/) ਜਾਂ [React](https://reactjs.org/) ਵਰਗੇ ਫਰੇਮਵਰਕ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡ ਨੂੰ ਕੇਂਦਰੀਕਰਣ ਵਿੱਚ ਬਿਹਤਰ ਮਦਦ ਕਰ ਸਕਦੇ ਹਨ।
 >
 **ਇਹ ਪਹੁੰਚ ਕਿਉਂ ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦੀ ਹੈ:**
-- **ਸਪੈਲਿੰਗ ਦੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦਾ ਹੈ** ਜਦੋਂ ਤੱਤਾਂ ਨੂੰ ਕਈ ਵਾਰ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ
-- **ਕੋਡ ਪੜ੍ਹਨ ਯੋਗਤਾ ਨੂੰ ਸੁਧਾਰਦਾ ਹੈ** ਵੇਰਵੇਦਾਰ ਕਾਂਸਟੈਂਟ ਨਾਮਾਂ ਨਾਲ
-- **ਬਿਹਤਰ IDE ਸਹਾਇਤਾ ਨੂੰ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ** ਆਟੋਕੰਪਲੀਟ ਅਤੇ ਗਲਤੀ ਚੈੱਕਿੰਗ ਨਾਲ
-- **ਰਿਫੈਕਟੋਰਿੰਗ ਨੂੰ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ** ਜੇਕਰ ਤੱਤ ID ਬਾਅਦ ਵਿੱਚ ਬਦਲਦੇ ਹਨ
+- **ਸਪੈਲਿੰਗ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦੀ ਹੈ** ਜਦੋਂ ਐਲੀਮੈਂਟਸ ਨੂੰ ਬਾਰ-ਬਾਰ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ
+- **ਕੋਡ ਪੜ੍ਹਨ ਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੀ ਹੈ** ਵਰਣਨਾਤਮਕ ਕਾਂਸਟੈਂਟ ਨਾਂਵਾਂ ਨਾਲ
+- **IDE ਸਹਾਇਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀ ਹੈ** ਆਟੋਕੰਪਲੀਟ ਅਤੇ ਗਲਤੀ ਚੈੱਕਿੰਗ ਨਾਲ
+- **ਰਿਫੈਕਟੋਰਿੰਗ ਨੂੰ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ** ਜੇਕਰ ਐਲੀਮੈਂਟ ID ਬਾਅਦ ਵਿੱਚ ਬਦਲਦੇ ਹਨ
 
-`const`, `let` ਅਤੇ `var` ਦੀ ਵਰਤੋਂ ਬਾਰੇ ਇੱਕ ਵੀਡੀਓ ਦੇਖਣ ਲਈ ਇੱਕ ਮਿੰਟ ਲਓ
+`const`, `let` ਅਤੇ `var` ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਇੱਕ ਵੀਡੀਓ ਦੇਖਣ ਲਈ ਇੱਕ ਮਿੰਟ ਲਓ
 
-[![ਵੈਰੀਏਬਲਾਂ ਦੇ ਪ੍ਰਕਾਰ](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "ਵੈਰੀਏਬਲਾਂ ਦੇ ਪ੍ਰਕਾਰ")
+[![ਵੈਰੀਏਬਲ ਦੇ ਪ੍ਰਕਾਰ](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "ਵੈਰੀਏਬਲ ਦੇ ਪ੍ਰਕਾਰ")
 
-> 🎥 ਉਪਰੋਕਤ ਚਿੱਤਰ 'ਤੇ ਕਲਿਕ ਕਰੋ ਵੈਰੀਏਬਲਾਂ ਬਾਰੇ ਵੀਡੀਓ ਲਈ।
+> 🎥 ਉਪਰੋਕਤ ਚਿੱਤਰ 'ਤੇ ਕਲਿਕ ਕਰੋ ਵੈਰੀਏਬਲ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ।
 
-### ਸ਼ੁਰੂਆਤ ਲਾਜ਼ਮੀ ਕਰੋ
+### ਸ਼ੁਰੂਆਤ ਲੌਜਿਕ ਸ਼ਾਮਲ ਕਰੋ
 
-ਇਥੇ ਸਭ ਕੁਝ ਸਹੀ ਹੋ ਜਾਂਦਾ ਹੈ! 🚀 ਤੁਸੀਂ ਆਪਣਾ ਪਹਿਲਾ ਸੱਚਾ ਇਵੈਂਟ ਲਿਸਨਰ ਲਿਖਣ ਜਾ ਰਹੇ ਹੋ, ਅਤੇ ਇਹ ਦੇਖਣ ਵਿੱਚ ਕਾਫ਼ੀ ਸੰਤੋਸ਼ਜਨਕ ਹੈ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਬਟਨ ਕਲਿਕ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਦਾ ਹੈ।
+ਇਥੇ ਸਭ ਕੁਝ ਸਹੀ ਹੋ ਜਾਂਦਾ ਹੈ! 🚀 ਤੁਸੀਂ ਆਪਣਾ ਪਹਿਲਾ ਅਸਲ ਇਵੈਂਟ ਲਿਸਨਰ ਲਿਖਣ ਜਾ ਰਹੇ ਹੋ, ਅਤੇ ਇਹ ਦੇਖਣ ਵਿੱਚ ਕਾਫ਼ੀ ਸੰਤੋਸ਼ਜਨਕ ਹੈ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਬਟਨ ਕਲਿਕ ਕਰਨ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦਾ ਹੈ।
 
-ਇਸ ਬਾਰੇ ਸੋਚੋ: ਕਿਤੇ ਨਾ ਕਿਤੇ, ਇੱਕ ਖਿਡਾਰੀ "Start" ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਨ ਜਾ ਰਿਹਾ ਹੈ, ਅਤੇ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਉਨ੍ਹਾਂ ਲਈ ਤਿਆਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਨੂੰ ਕੋਈ ਅੰਦਾਜ਼ਾ ਨਹੀਂ ਕਿ ਉਹ ਕਦੋਂ ਕਲਿਕ ਕਰਨਗੇ - ਤੁਰੰਤ, ਜਾਂ ਕੌਫੀ ਪੀਣ ਤੋਂ ਬਾਅਦ - ਪਰ ਜਦੋਂ ਉਹ ਕਰਦੇ ਹਨ, ਤੁਹਾਡੀ ਖੇਡ ਜਿੰਦਗੀ ਵਿੱਚ ਆ ਜਾਂਦੀ ਹੈ।
+ਇਸ ਬਾਰੇ ਸੋਚੋ: ਕਿਤੇ ਨਾ ਕਿਤੇ, ਇੱਕ ਖਿਡਾਰੀ ਉਹ "ਸ਼ੁਰੂ" ਬਟਨ ਕਲਿਕ ਕਰਨ ਜਾ ਰਿਹਾ ਹੈ, ਅਤੇ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਉਸ ਲਈ ਤਿਆਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਨੂੰ ਕੋਈ ਅੰਦਾਜ਼ਾ ਨਹੀਂ ਕਿ ਉਹ ਕਦੋਂ ਕਲਿਕ ਕਰਨਗੇ - ਤੁਰੰਤ, ਜਾਂ ਕੌਫੀ ਪੀਣ ਤੋਂ ਬਾਅਦ - ਪਰ ਜਦੋਂ ਉਹ ਕਰਦੇ ਹਨ, ਤੁਹਾਡੀ ਖੇਡ ਜਿੰਦਗੀ ਵਿੱਚ ਆਉਂਦੀ ਹੈ।
 
-ਜਦੋਂ ਯੂਜ਼ਰ `start` 'ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ, ਸਾਨੂੰ ਇੱਕ ਕੋਟ ਚੁਣਨ ਦੀ ਲੋੜ ਹੈ, ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਸੈਟਅਪ ਕਰਨਾ ਹੈ, ਅਤੇ ਮੌਜੂਦਾ ਸ਼ਬਦ ਅਤੇ ਸਮਾਂ ਟਰੈਕਿੰਗ ਸੈਟਅਪ ਕਰਨਾ ਹੈ। ਹੇਠਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ; ਅਸੀਂ ਇਸ ਨੂੰ ਸਕ੍ਰਿਪਟ ਬਲਾਕ ਤੋਂ ਬਾਅਦ ਚਰਚਾ ਕਰਦੇ ਹਾਂ।
+ਜਦੋਂ ਯੂਜ਼ਰ `start` ਕਲਿਕ ਕਰਦਾ ਹੈ, ਸਾਨੂੰ ਇੱਕ ਕੋਟ ਚੁਣਨ ਦੀ ਲੋੜ ਹੈ, ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਸੈਟਅਪ ਕਰਨਾ ਹੈ, ਅਤੇ ਮੌਜੂਦਾ ਸ਼ਬਦ ਅਤੇ ਸਮੇਂ ਲਈ ਟ੍ਰੈਕਿੰਗ ਸੈਟਅਪ ਕਰਨੀ ਹੈ। ਹੇਠਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ; ਅਸੀਂ ਇਸ ਨੂੰ ਸਕ੍ਰਿਪਟ ਬਲਾਕ ਤੋਂ ਬਾਅਦ ਚਰਚਾ ਕਰਦੇ ਹਾਂ।
 
 ```javascript
 // at the end of script.js
@@ -243,35 +243,35 @@ document.getElementById('start').addEventListener('click', () => {
 });
 ```
 
-**ਕੋਡ ਨੂੰ ਤਰਕਸੰਗਤ ਭਾਗਾਂ ਵਿੱਚ ਵੰਡਣਾ:**
+**ਕੋਡ ਨੂੰ ਲਾਜ਼ਮੀ ਭਾਗਾਂ ਵਿੱਚ ਤੋੜਨਾ:**
 
-**📊 ਸ਼ਬਦ ਟਰੈਕਿੰਗ ਸੈਟਅਪ:**
+**📊 ਸ਼ਬਦ ਟ੍ਰੈਕਿੰਗ ਸੈਟਅਪ:**
 - **ਚੁਣਦਾ ਹੈ** ਇੱਕ ਰੈਂਡਮ ਕੋਟ `Math.floor()` ਅਤੇ `Math.random()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੱਖ-ਵੱਖਤਾ ਲਈ
-- **ਕੋਟ ਨੂੰ ਬਦਲਦਾ ਹੈ** ਵਿਅਕਤੀਗਤ ਸ਼ਬਦਾਂ ਦੀ ਸੂਚੀ ਵਿੱਚ `split(' ')` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਰੀਸੈਟ ਕਰਦਾ ਹੈ** `wordIndex` ਨੂੰ 0 'ਤੇ ਕਿਉਂਕਿ ਖਿਡਾਰੀ ਪਹਿਲੇ ਸ਼ਬਦ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ
-- **ਤਿਆਰ ਕਰਦਾ ਹੈ** ਖੇਡ ਦੀ ਸਥਿਤੀ ਇੱਕ ਨਵੀਂ ਰਾਊਂਡ ਲਈ
+- **ਕੋਟ ਨੂੰ ਤਬਦੀਲ ਕਰਦਾ ਹੈ** ਇੱਕ ਅਲੱਗ-ਅਲੱਗ ਸ਼ਬਦਾਂ ਦੀ ਐਰੇ ਵਿੱਚ `split(' ')` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **`wordIndex` ਨੂੰ 0 'ਤੇ ਰੀਸੈਟ ਕਰਦਾ ਹੈ** ਕਿਉਂਕਿ ਖਿਡਾਰੀ ਪਹਿਲੇ ਸ਼ਬਦ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ
+- **ਖੇਡ ਦੀ ਸਥਿਤੀ ਨੂੰ ਤਿਆਰ ਕਰਦਾ ਹੈ** ਇੱਕ ਨਵੀਂ ਰਾਊਂਡ ਲਈ
 
 **🎨 UI ਸੈਟਅਪ ਅਤੇ ਡਿਸਪਲੇ:**
-- **ਬਣਾਉਂਦਾ ਹੈ** `<span>` ਤੱਤਾਂ ਦੀ ਸੂਚੀ, ਹਰ ਸ਼ਬਦ ਨੂੰ ਵਿਅਕਤੀਗਤ ਸਟਾਈਲਿੰਗ ਲਈ ਲਪੇਟਦਾ ਹੈ
-- **ਸਪੈਨ ਤੱਤਾਂ ਨੂੰ ਜੋੜਦਾ ਹੈ** ਇੱਕ ਸਿੰਗਲ ਸਟ੍ਰਿੰਗ ਵਿੱਚ ਤੇਜ਼ DOM ਅਪਡੇਟ ਲਈ
+- **ਬਣਾਉਂਦਾ ਹੈ** `<span>` ਐਲੀਮੈਂਟਸ ਦੀ ਇੱਕ ਐਰੇ, ਹਰ ਸ਼ਬਦ ਨੂੰ ਵਿਅਕਤੀਗਤ ਸਟਾਈਲਿੰਗ ਲਈ ਲਪੇਟਦਾ ਹੈ
+- **ਸਪੈਨ ਐਲੀਮੈਂਟਸ ਨੂੰ ਜੋੜਦਾ ਹੈ** ਇੱਕ ਸਿੰਗਲ ਸਟ੍ਰਿੰਗ ਵਿੱਚ DOM ਅੱਪਡੇਟਿੰਗ ਲਈ
 - **ਪਹਿਲੇ ਸ਼ਬਦ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਦਾ ਹੈ** CSS ਕਲਾਸ `highlight` ਸ਼ਾਮਲ ਕਰਕੇ
 - **ਪਿਛਲੇ ਖੇਡ ਸੁਨੇਹੇ ਸਾਫ ਕਰਦਾ ਹੈ** ਇੱਕ ਸਾਫ ਸਲੇਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ
 
 **⌨️ ਟੈਕਸਟਬਾਕਸ ਤਿਆਰੀ:**
-- **ਮੌਜੂਦਾ ਟੈਕਸਟ ਸਾਫ ਕਰਦਾ ਹੈ** ਇਨਪੁਟ ਫੀਲਡ ਵਿੱਚ
-- **ਫੋਕਸ ਸੈਟ ਕਰਦਾ ਹੈ** ਟੈਕਸਟਬਾਕਸ 'ਤੇ ਤਾਂ ਜੋ ਖਿਡਾਰੀ ਤੁਰੰਤ ਟਾਈਪ ਕਰ ਸਕਣ
-- **ਇਨਪੁਟ ਖੇਤਰ ਤਿਆਰ ਕਰਦਾ ਹੈ** ਨਵੀਂ ਖੇਡ ਸੈਸ਼ਨ ਲਈ
+- **ਇਨਪੁਟ ਖੇਤਰ ਵਿੱਚ ਮੌਜੂਦਾ ਟੈਕਸਟ ਸਾਫ ਕਰਦਾ ਹੈ**
+- **ਟੈਕਸਟਬਾਕਸ 'ਤੇ ਫੋਕਸ ਸੈਟ ਕਰਦਾ ਹੈ** ਤਾਂ ਜੋ ਖਿਡਾਰੀ ਤੁਰੰਤ ਟਾਈਪ ਕਰ ਸਕਣ
+- **ਨਵੀਂ ਖੇਡ ਸੈਸ਼ਨ ਲਈ ਇਨਪੁਟ ਖੇਤਰ ਤਿਆਰ ਕਰਦਾ ਹੈ**
 
 **⏱️ ਟਾਈਮਰ ਸ਼ੁਰੂਆਤ:**
 - **ਮੌਜੂਦਾ ਟਾਈਮਸਟੈਂਪ ਪਕੜਦਾ ਹੈ** `new Date().getTime()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਟਾਈਪਿੰਗ ਸਪੀਡ ਅਤੇ ਪੂਰਨ ਸਮਾਂ ਦੀ ਸਹੀ ਗਿਣਤੀ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ**
-- **ਖੇਡ ਸੈਸ਼ਨ ਲਈ ਪ੍ਰਦਰਸ਼ਨ ਟਰੈਕਿੰਗ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ**
+- **ਟਾਈਪਿੰਗ ਸਪੀਡ ਅਤੇ ਪੂਰਨ ਸਮੇਂ ਦੀ ਸਹੀ ਗਿਣਤੀ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ**
+- **ਖੇਡ ਸੈਸ਼ਨ ਲਈ ਪ੍ਰਦਰਸ਼ਨ ਟ੍ਰੈਕਿੰਗ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ**
 
-### ਟਾਈਪਿੰਗ ਲਾਜ਼ਮੀ ਕਰੋ
+### ਟਾਈਪਿੰਗ ਲੌਜਿਕ ਸ਼ਾਮਲ ਕਰੋ
 
-ਇਥੇ ਅਸੀਂ ਆਪਣੀ ਖੇਡ ਦੇ ਦਿਲ ਨੂੰ ਹੱਲ ਕਰਦੇ ਹਾਂ! ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਪਹਿਲਾਂ ਕੁਝ ਜ਼ਿਆਦਾ ਲੱਗਦਾ ਹੈ - ਅਸੀਂ ਹਰ ਹਿੱਸੇ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਮਝਾਵਾਂਗੇ, ਅਤੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਸਭ ਕਿੰਨਾ ਤਰਕਸੰਗਤ ਹੈ।
+ਇਥੇ ਅਸੀਂ ਆਪਣੀ ਖੇਡ ਦੇ ਦਿਲ ਨੂੰ ਹੱਲ ਕਰਦੇ ਹਾਂ! ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਪਹਿਲਾਂ ਕੁਝ ਜ਼ਿਆਦਾ ਲੱਗਦਾ ਹੈ - ਅਸੀਂ ਹਰ ਹਿੱਸੇ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਮਝਾਵਾਂਗੇ, ਅਤੇ ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਸਾਰਾ ਕਿੰਨਾ ਤਰਕਸੰਗਤ ਹੈ।
 
-ਜੋ ਅਸੀਂ ਇੱਥੇ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਉਹ ਕਾਫ਼ੀ ਸੁਧਾਰਤ ਹੈ: ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਵਿਅਕਤੀ ਇੱਕ ਅੱਖਰ ਟਾਈਪ ਕਰਦਾ ਹੈ, ਸਾਡਾ ਕੋਡ ਜਾਂਚੇਗਾ ਕਿ ਉਹ ਕੀ ਟਾਈਪ ਕੀਤਾ, ਉਨ੍ਹਾਂ ਨੂੰ ਫੀਡਬੈਕ ਦੇਵੇਗਾ, ਅਤੇ ਫੈਸਲਾ ਕਰੇਗਾ ਕਿ ਅਗਲਾ ਕੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ 1970 ਦੇ ਦਹਾਕੇ ਵਿੱਚ WordStar ਵਰਗੇ ਸ਼ੁਰੂਆਤੀ ਵਰਡ ਪ੍ਰੋਸੈਸਰ ਟਾਈਪਿਸਟਾਂ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦੇ ਸਨ।
+ਜੋ ਅਸੀਂ ਇੱਥੇ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਉਹ ਕਾਫ਼ੀ ਸੁਧਾਰਤ ਹੈ: ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਵਿਅਕਤੀ ਇੱਕ ਅੱਖਰ ਟਾਈਪ ਕਰਦਾ ਹੈ, ਸਾਡਾ ਕੋਡ ਜਾਂਚੇਗਾ ਕਿ ਉਹ ਕੀ ਟਾਈਪ ਕੀਤਾ, ਉਨ੍ਹਾਂ ਨੂੰ ਫੀਡਬੈਕ ਦੇਵੇਗਾ, ਅਤੇ ਫੈਸਲਾ ਕਰੇਗਾ ਕਿ ਅਗਲਾ ਕੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਉਸੇ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ 1970 ਦੇ ਦਹਾਕੇ ਵਿੱਚ WordStar ਵਰਗੇ ਸ਼ੁਰੂਆਤੀ ਵਰਡ ਪ੍ਰੋਸੈਸਰ ਟਾਈਪਿਸਟਸ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦੇ ਸਨ।
 
 ```javascript
 // at the end of script.js
@@ -310,9 +310,9 @@ typedValueElement.addEventListener('input', () => {
 });
 ```
 
-**ਟਾਈਪਿੰਗ ਲਾਜ਼ਮੀ ਫਲੋ ਨੂੰ ਸਮਝਣਾ:**
+**ਟਾਈਪਿੰਗ ਲੌਜਿਕ ਫਲੋ ਨੂੰ ਸਮਝਣਾ:**
 
-ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਵਾਟਰਫਾਲ ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਸਭ ਤੋਂ ਵਿਸ਼ੇਸ਼ ਤੋਂ ਸਭ ਤੋਂ ਆਮ ਹਾਲਤਾਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ। ਆਓ ਹਰ ਸਥਿਤੀ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਸਮਝੀਏ:
+ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਵਾਟਰਫਾਲ ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਸਭ ਤੋਂ ਵਿਸ਼ੇਸ਼ ਤੋਂ ਸਭ ਤੋਂ ਆਮ ਹਾਲਤਾਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ। ਆਓ ਹਰ ਸਥਿਤੀ ਨੂੰ ਤੋੜ ਕੇ ਸਮਝੀਏ:
 
 ```mermaid
 flowchart TD
@@ -327,69 +327,69 @@ flowchart TD
 ```
 
 **🏁 ਕੋਟ ਪੂਰਾ (ਸਥਿਤੀ 1):**
-- **ਜਾਂਚਦਾ ਹੈ** ਜੇ ਟਾਈਪ ਕੀਤੀ ਕੀਮਤ ਮੌਜੂਦਾ ਸ਼ਬਦ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ ਅਤੇ ਅਸੀਂ ਆਖਰੀ ਸ਼ਬਦ 'ਤੇ ਹਾਂ
-- **ਬੀਤਿਆ ਸਮਾਂ ਗਿਣਦਾ ਹੈ** ਸ਼ੁਰੂਆਤੀ ਸਮਾਂ ਨੂੰ ਮੌਜੂਦਾ ਸਮਾਂ ਤੋਂ ਘਟਾ ਕੇ
-- **ਮਿਲੀਸੈਕੰਡ ਨੂੰ ਸਕਿੰਟ ਵਿੱਚ ਬਦਲਦਾ ਹੈ** 1,000 ਨਾਲ ਵੰਡ ਕੇ
-- **ਮੁਬਾਰਕਬਾਦੀ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਹੈ** ਪੂਰਨ ਸਮੇਂ ਨਾਲ
+- **ਜਾਂਚਦਾ ਹੈ** ਜੇ ਟਾਈਪ ਕੀਤੀ ਕੀਮਤ ਮੌਜੂਦਾ ਸ਼ਬਦ ਨਾਲ ਮਿਲਦੀ ਹੈ ਅਤੇ ਅਸੀਂ ਆਖਰੀ ਸ਼ਬਦ 'ਤੇ ਹਾਂ
+- **ਬੀਤਿਆ ਸਮਾਂ ਗਿਣਦਾ ਹੈ** ਸ਼ੁਰੂਆਤੀ ਸਮੇਂ ਨੂੰ ਮੌਜੂਦਾ ਸਮੇਂ ਤੋਂ ਘਟਾ ਕੇ
+- **ਮਿਲੀਸੈਕੰਡਸ ਨੂੰ ਸਕਿੰਟ ਵਿੱਚ ਤਬਦੀਲ ਕਰਦਾ ਹੈ** 1,000 ਨਾਲ ਵੰਡ ਕੇ
+- **ਪੂਰਨ ਸਮੇਂ ਨਾਲ ਵਧਾਈ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਹੈ**
 
 **✅ ਸ਼ਬਦ ਪੂਰਾ (ਸਥਿਤੀ 2):**
-- **ਪਤਾ ਲਗਾਉਂਦਾ ਹੈ** ਜਦੋਂ ਇਨਪੁਟ ਸਪੇਸ ਨਾਲ ਖਤਮ ਹੁੰਦਾ ਹੈ
-- **ਪੱਕਾ ਕਰਦਾ ਹੈ** ਕਿ ਟ੍ਰਿਮ ਕੀਤੀ ਇਨਪੁਟ ਮੌਜੂਦਾ ਸ਼ਬਦ ਨਾਲ ਸਹੀ ਤੌਰ 'ਤੇ ਮੇਲ ਖਾਂਦੀ ਹੈ
-- **ਇਨਪੁਟ ਫੀਲਡ ਸਾਫ ਕਰਦਾ ਹੈ** ਅਗਲੇ ਸ਼ਬਦ ਲਈ
+- **ਪਛਾਣਦਾ ਹੈ** ਜਦੋਂ ਇਨਪੁਟ ਖਤਮ ਹੁੰਦਾ ਹੈ ਇੱਕ ਸਪੇਸ ਨਾਲ
+- **ਪੱਕਾ ਕਰਦਾ ਹੈ** ਕਿ ਟ੍ਰਿਮ ਕੀਤੀ ਇਨਪੁਟ ਮੌਜੂਦਾ ਸ਼ਬਦ ਨਾਲ ਸਹੀ ਤੌਰ 'ਤੇ ਮਿਲਦੀ ਹੈ
+- **ਇਨਪੁਟ ਖੇਤਰ ਸਾਫ ਕਰਦਾ ਹੈ** ਅਗਲੇ ਸ਼ਬਦ ਲਈ
 - **ਅਗਲੇ ਸ਼ਬਦ 'ਤੇ ਅੱਗੇ ਵਧਦਾ ਹੈ** `wordIndex` ਨੂੰ ਵਧਾ ਕੇ
-- **ਦ੍ਰਿਸ਼ਮਾਨ ਹਾਈਲਾਈਟਿੰਗ ਅਪਡੇਟ ਕਰਦਾ ਹੈ** ਸਾਰੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਹਟਾ ਕੇ ਅਤੇ ਨਵੇਂ ਸ਼ਬਦ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਕੇ
+- **ਦ੍ਰਿਸ਼ਮਾਨ ਹਾਈਲਾਈਟਿੰਗ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ** ਸਾਰੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਹਟਾ ਕੇ ਅਤੇ ਨਵੇਂ ਸ਼ਬਦ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਕੇ
 
 **📝 ਟਾਈਪਿੰਗ ਜਾਰੀ ਹੈ (ਸਥਿਤੀ 3):**
 - **ਪੱਕਾ ਕਰਦਾ ਹੈ** ਕਿ ਮੌਜੂਦਾ ਸ਼ਬਦ ਉਸ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜੋ ਹੁਣ ਤੱਕ ਟਾਈਪ ਕੀਤਾ ਗਿਆ ਹੈ
-- **ਕੋਈ ਵੀ ਗਲਤੀ ਸਟਾਈਲਿੰਗ ਹਟਾਉਂਦਾ ਹੈ** ਦਿਖਾਉਣ ਲਈ ਕਿ ਇਨਪੁਟ ਸਹੀ ਹੈ
+- **ਕੋਈ ਗਲਤੀ ਸਟਾਈਲਿੰਗ ਹਟਾਉਂਦਾ ਹੈ** ਦਿਖਾਉਣ ਲਈ ਕਿ ਇਨਪੁਟ ਸਹੀ ਹੈ
 - **ਟਾਈਪਿੰਗ ਜਾਰੀ ਰੱਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ** ਬਿਨਾਂ ਰੁਕਾਵਟ ਦੇ
 
-**❌ ਗਲਤੀ ਦੀ ਸਥਿਤੀ (ਸਥਿਤੀ 4):**
-- **ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ** ਜਦੋਂ ਟਾਈਪ ਕੀਤਾ ਟੈਕਸਟ ਉਮੀਦ ਕੀਤੇ ਸ਼ਬਦ ਦੀ ਸ਼ੁਰੂਆਤ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ
+**❌ ਗਲਤੀ ਸਥਿਤੀ (ਸਥਿਤੀ 4):**
+- **ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ** ਜਦੋਂ ਟਾਈਪ ਕੀਤਾ ਟੈਕਸਟ ਉਮੀਦ ਕੀਤੇ ਸ਼ਬਦ ਦੀ ਸ਼ੁਰੂਆਤ ਨਾਲ ਨਹੀਂ ਮਿਲਦਾ
 - **ਗਲਤੀ CSS ਕਲਾਸ ਲਾਗੂ ਕਰਦਾ ਹੈ** ਤੁਰੰਤ ਦ੍ਰਿਸ਼ਮਾਨ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ
-- **ਖਿਡਾਰੀਆਂ ਨੂੰ ਮਦਦ ਕਰਦਾ ਹੈ** ਜਲਦੀ ਗਲਤੀਆਂ ਦੀ ਪਛਾਣ ਕਰਨ ਅਤੇ ਠੀਕ ਕਰਨ ਵਿੱਚ
+- **ਖਿਡਾਰੀਆਂ ਨੂੰ ਮਦਦ ਕਰਦਾ ਹੈ** ਗਲਤੀਆਂ ਨੂੰ ਜਲਦੀ ਪਛਾਣਣ ਅਤੇ ਠੀਕ ਕਰਨ ਵਿੱਚ
 
 ## ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ
 
-ਦੇਖੋ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕੀਤਾ! 🎉 ਤੁਸੀਂ ਸੱਚਮੁੱਚ, ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲੀ ਟਾਈਪਿੰਗ ਖੇਡ ਬਣਾਈ। ਇਸ ਨੂੰ ਮਾਨਣ ਲਈ ਇੱਕ ਮਿੰਟ ਲਓ - ਇਹ ਕੋਈ ਛੋਟਾ ਕਾਰਨਾਮਾ ਨਹੀਂ ਹੈ!
+ਦੇਖੋ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕੀਤਾ! 🎉 ਤੁਸੀਂ ਹੁਣੇ ਹੀ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਅਸਲ, ਕੰਮ ਕਰਨ ਵਾਲੀ ਟਾਈਪਿੰਗ ਖੇਡ ਬਣਾਈ। ਇਸ ਨੂੰ ਮੰਨਣ ਲਈ ਇੱਕ ਪਲ ਲਓ - ਇਹ ਕੋਈ ਛੋਟਾ ਕਾਰਨਾਮਾ ਨਹੀਂ ਹੈ!
 
-ਹੁਣ ਜਾਂਚ ਦਾ ਦੌਰ ਆਉਂਦਾ ਹੈ! ਕੀ ਇਹ ਉਮੀਦ ਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰੇਗਾ? ਕੀ ਅਸੀਂ ਕੁਝ ਛੱਡ ਦਿੱਤਾ? ਗੱਲ ਇਹ ਹੈ: ਜੇ ਕੁਝ ਤੁਰੰਤ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰਦਾ, ਤਾਂ ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਹੈ। ਅਨੁਭਵੀ ਡਿਵੈਲਪਰ ਵੀ ਨਿਯਮਿਤ ਤੌਰ 'ਤੇ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਬੱਗ ਪਾਉਂਦੇ ਹਨ। ਇਹ ਸਾਰੇ ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਦਾ ਹਿੱਸਾ ਹੈ!
+ਹੁਣ ਜਾਂਚ ਦਾ ਦੌਰ ਆਉਂਦਾ ਹੈ! ਕੀ ਇਹ ਉਮੀਦ ਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰੇਗੀ? ਕੀ ਅਸੀਂ ਕੁਝ ਛੱਡ ਦਿੱਤਾ? ਗੱਲ ਇਹ ਹੈ: ਜੇ ਕੁਝ ਤੁਰੰਤ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰਦਾ, ਤਾਂ ਇਹ ਬਿਲਕੁਲ ਸਧਾਰਨ ਹੈ। ਅਨੁਭਵੀ ਡਿਵੈਲਪਰ ਵੀ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਨਿਯਮਿਤ ਤੌਰ 'ਤੇ ਬੱਗਸ ਪਾਉਂਦੇ ਹਨ। ਇਹ ਸਾਰੇ ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਦਾ ਹਿੱਸਾ ਹੈ!
 
-`start` 'ਤੇ ਕਲਿਕ ਕਰੋ, ਅਤੇ ਟਾਈਪ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ! ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜਿਵੇਂ ਅਸੀਂ ਪਹਿਲਾਂ ਐਨੀਮੇਸ਼ਨ ਦੇਖੀ ਸੀ।
+`start` 'ਤੇ ਕਲਿਕ ਕਰੋ, ਅਤੇ ਟਾਈਪ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ! ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ ਜਿਵੇਂ ਅਸੀਂ ਪਹਿਲਾਂ ਐਨੀਮੇਸ਼ਨ ਵਿੱਚ ਦੇਖਿਆ ਸੀ।
 
 ![ਖੇਡ ਦੇ ਕਾਰਵਾਈ ਵਿੱਚ ਐਨੀਮੇਸ਼ਨ](../../../../4-typing-game/images/demo.gif)
 
 **ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਕੀ ਜਾਂਚਣਾ ਹੈ:**
 - **ਪੱਕਾ ਕਰਦਾ ਹੈ** ਕਿ Start 'ਤੇ ਕਲਿਕ ਕਰਨ ਨਾਲ ਇੱਕ ਰੈਂਡਮ ਕੋਟ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
-- **ਪੱਕਾ ਕਰਦਾ ਹੈ** ਕਿ ਟਾਈਪਿੰਗ ਮੌਜੂਦਾ ਸ਼ਬਦ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਹਾਈਲਾਈਟ ਕਰਦੀ ਹੈ
+- **ਪੱਕਾ ਕਰਦਾ ਹੈ** ਕਿ ਟਾਈਪ ਕਰਨ ਨਾਲ ਮੌਜੂਦਾ ਸ਼ਬਦ ਸਹੀ ਤੌਰ 'ਤੇ ਹਾਈਲਾਈਟ ਹੁੰਦਾ ਹੈ
 - **ਜਾਂਚਦਾ ਹੈ** ਕਿ ਗਲਤ ਟਾਈਪਿੰਗ ਲਈ ਗਲਤੀ ਸਟਾਈਲਿੰਗ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ
-- **ਪੱਕਾ ਕਰਦਾ ਹੈ** ਕਿ ਸ਼ਬਦ ਪੂਰੇ ਕਰਨ ਨਾਲ ਹਾਈਲਾਈਟ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਅੱਗੇ ਵਧਦੀ ਹੈ
-- **ਟੈਸਟ ਕਰਦਾ ਹੈ** ਕਿ ਕੋਟ ਪੂਰਾ ਕਰਨ ਨਾਲ ਪੂਰਨ ਸੁਨੇਹਾ ਸਮੇਂ ਦੇ ਨਾਲ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
+- **ਪੱਕਾ ਕਰਦਾ ਹੈ** ਕਿ ਸ਼ਬਦ ਪੂਰੇ ਕਰਨ ਨਾਲ ਹਾਈਲਾਈਟ ਸਹੀ ਤੌਰ 'ਤੇ ਅੱਗੇ ਵਧਦਾ ਹੈ
+- **ਟੈਸਟ ਕਰਦਾ ਹੈ** ਕਿ ਕੋਟ ਪੂਰਾ ਕਰਨ ਨਾਲ ਪੂਰਨ ਸੁਨੇਹਾ ਸਮੇਂ ਨਾਲ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
 
 **ਆਮ ਡੀਬੱਗਿੰਗ ਟਿਪਸ:**
 - **ਜਾਂਚੋ** ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ (F12) ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਲਤੀਆਂ ਲਈ
-- **ਪੱਕਾ ਕਰੋ** ਕਿ ਸਾਰੇ ਫਾਈਲ ਨਾਮ ਬਿਲਕੁਲ ਮੇਲ ਖਾਂਦੇ ਹਨ (ਕੇਸ-ਸੈਂਸਿਟਿਵ)
-- **ਪੱਕਾ ਕਰੋ** ਕਿ Live Server ਚੱਲ ਰਿਹਾ ਹੈ ਅਤੇ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਰਿਫ੍ਰੈਸ਼ ਹੋ ਰਿਹਾ ਹੈ
-- **ਵੱਖ-ਵੱਖ ਕੋਟਸ ਟੈਸਟ ਕਰੋ** ਇਹ ਪੱਕਾ ਕਰਨ ਲਈ ਕਿ ਰੈਂਡਮ ਚੋਣ ਸਹੀ ਕੰਮ ਕਰ ਰਹੀ ਹੈ
+- **ਪੱਕਾ ਕਰੋ** ਕਿ ਸਾਰੇ ਫਾਈਲ ਨਾਂਵ ਬਿਲਕੁਲ ਮਿਲਦੇ ਹਨ (ਕੇਸ-ਸੈਂਸਿਟਿਵ)
+- **ਪੱਕਾ ਕਰੋ** ਕਿ Live Server ਚੱਲ ਰਿਹਾ ਹੈ ਅਤੇ ਸਹੀ ਤੌਰ 'ਤੇ ਰਿਫ੍ਰੈਸ਼ ਹੋ ਰਿਹਾ ਹੈ
+- **ਵੱਖ-ਵੱਖ ਕੋਟਸ ਟੈਸਟ ਕਰੋ** ਇਹ ਪੱਕਾ ਕਰਨ ਲਈ ਕਿ ਰੈਂਡਮ ਚੋਣ ਸਹੀ ਕੰਮ ਕਰਦੀ ਹੈ
 
 ---
 
-## GitHub Copilot Agent ਚੈਲੈਂਜ 🎮
+## GitHub Copilot Agent Challenge 🎮
 
 Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
 
-**ਵੇਰਵਾ:** ਟਾਈਪਿੰਗ ਖੇਡ ਨੂੰ ਵਧਾ ਕੇ ਇੱਕ ਮੁਸ਼ਕਲਤਾ ਸਿਸਟਮ ਲਾਗੂ ਕਰੋ ਜੋ ਖਿਡਾਰੀ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਅਧਾਰ 'ਤੇ ਖੇਡ ਨੂੰ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ। ਇਹ ਚੈਲੈਂਜ ਤੁਹਾਨੂੰ ਉੱਨਤ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ, ਡਾਟਾ ਵਿਸ਼ਲੇਸ਼ਣ, ਅਤੇ ਡਾਇਨਾਮਿਕ UI ਅਪਡੇਟ ਦਾ ਅਭਿਆਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
+**ਵੇਰਵਾ:** ਟਾਈਪਿੰਗ ਖੇਡ ਨੂੰ ਵਧਾਉਣ ਲਈ ਇੱਕ ਮੁਸ਼ਕਲਤਾ ਸਿਸਟਮ ਲਾਗੂ ਕਰੋ ਜੋ ਖਿਡਾਰੀ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਅਧਾਰ 'ਤੇ ਖੇਡ ਨੂੰ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ। ਇਹ ਚੈਲੈਂਜ ਤੁਹਾਨੂੰ ਉੱਨਤ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ, ਡਾਟਾ ਵਿਸ਼ਲੇਸ਼ਣ, ਅਤੇ ਡਾਇਨਾਮਿਕ UI ਅੱਪਡੇਟਸ ਦਾ ਅਭਿਆਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
 
-**ਪ੍ਰੋੰਪਟ:** ਟਾਈਪਿੰਗ ਖੇਡ ਲਈ ਇੱਕ ਮੁਸ਼ਕਲਤਾ ਸੈਟਅਪ ਸਿਸਟਮ ਬਣਾਓ ਜੋ:
-1. ਖਿਡਾਰੀ ਦੀ ਟਾਈਪਿੰਗ ਸਪੀਡ (ਸ਼ਬਦ ਪ੍ਰਤੀ ਮਿੰਟ) ਅਤੇ ਸ਼ੁੱਧਤਾ ਪ੍ਰਤੀਸ਼ਤ ਨੂੰ ਟਰੈਕ ਕਰਦਾ ਹੈ
-2. ਤਿੰਨ ਮੁਸ਼ਕਲਤਾ ਪੱਧਰਾਂ ਨੂੰ ਸਵੈਚਾਲਿਤ ਤੌਰ 'ਤੇ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ: ਆਸਾਨ (ਸਧਾਰਨ ਕੋਟਸ), ਮੱਧਮ (ਮੌਜੂਦਾ ਕੋਟਸ), ਮੁਸ਼ਕਲ (ਜਟਿਲ ਕੋਟਸ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਪੰਕਚੁਏਸ਼ਨ ਹੈ)
-3. ਮੌਜੂਦਾ ਮੁਸ਼ਕਲਤਾ ਪੱਧਰ ਅਤੇ ਖਿਡਾਰੀ ਦੇ ਅੰਕੜੇ UI 'ਤੇ ਦਿਖਾਉਂਦਾ ਹੈ
+**ਪ੍ਰੋੰਪਟ:** ਟਾਈਪਿੰਗ ਖੇਡ ਲਈ ਇੱਕ ਮੁਸ਼ਕਲਤਾ ਸਿਸਟਮ ਬਣਾਓ ਜੋ:
+1. ਖਿਡਾਰੀ ਦੀ ਟਾਈਪਿੰਗ ਸਪੀਡ (ਸ਼ਬਦ ਪ੍ਰਤੀ ਮਿੰਟ) ਅਤੇ ਸਹੀਤਾ ਪ੍ਰਤੀਸ਼ਤ ਨੂੰ ਟਰੈਕ ਕਰਦਾ ਹੈ
+2. ਤਿੰਨ ਮੁਸ਼ਕਲਤਾ ਪੱਧਰਾਂ ਨੂੰ ਸਵੈ-ਚਲਿਤ ਤੌਰ 'ਤੇ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ: ਆਸਾਨ (ਸਧਾਰਨ ਕੋਟਸ), ਮੱਧਮ (ਮੌਜੂਦਾ ਕੋਟਸ), ਮੁਸ਼ਕਲ (ਜਟਿਲ ਕੋਟਸ ਪੰਕਚੁਏਸ਼ਨ ਨਾਲ)
+3. ਮੌਜੂਦਾ ਮੁਸ਼ਕਲਤਾ ਪੱਧਰ ਅਤੇ ਖਿਡਾਰੀ ਦੇ ਸਟੈਟਿਸਟਿਕਸ ਨੂੰ UI 'ਤੇ ਦਿਖਾਉਂਦਾ ਹੈ
 4. ਇੱਕ ਸਟ੍ਰੀਕ ਕਾਊਂਟਰ ਲਾਗੂ ਕਰਦਾ ਹੈ ਜੋ 3 ਲਗਾਤਾਰ ਚੰਗੇ ਪ੍ਰਦਰਸ਼ਨ ਤੋਂ ਬਾਅਦ ਮੁਸ਼ਕਲਤਾ ਵਧਾਉਂਦਾ ਹੈ
 5. ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ (ਰੰਗ, ਐਨੀਮੇਸ਼ਨ) ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜੋ ਮੁਸ਼ਕਲਤਾ ਬਦਲਾਅ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ
 
-ਇਹ ਫੀਚਰ ਲਾਗੂ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ HTML ਤੱਤ, CSS ਸਟਾਈਲ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ। ਸਹੀ ਗਲਤੀ ਹੈਂਡਲਿੰਗ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ
+ਜਰੂਰੀ HTML ਐਲੀਮੈਂਟਸ, CSS ਸਟਾਈਲਸ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਇਸ ਫੀਚਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ। ਸਹੀ ਗਲਤੀ
 
 ---
 
-**ਅਸਵੀਕਰਤੀ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤਾ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਨਿਸ਼ਚਿਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/5-browser-extension/1-about-browsers/README.md b/translations/pa/5-browser-extension/1-about-browsers/README.md
index f567fff1ae..5e99a20f8c 100644
--- a/translations/pa/5-browser-extension/1-about-browsers/README.md
+++ b/translations/pa/5-browser-extension/1-about-browsers/README.md
@@ -1,65 +1,118 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "33a875c522f237a2026e4653240dfc07",
-  "translation_date": "2025-10-22T18:16:44+00:00",
+  "original_hash": "00aa85715e1efd4930c17a23e3012e69",
+  "translation_date": "2025-11-03T17:03:21+00:00",
   "source_file": "5-browser-extension/1-about-browsers/README.md",
   "language_code": "pa"
 }
 -->
 # ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 1: ਬ੍ਰਾਊਜ਼ਰ ਬਾਰੇ ਸਭ ਕੁਝ
 
+```mermaid
+journey
+    title Your Browser Extension Development Journey
+    section Foundation
+      Understand browsers: 3: Student
+      Learn extension types: 4: Student
+      Setup development: 4: Student
+    section Development
+      Build interface: 4: Student
+      Add functionality: 5: Student
+      Handle data: 5: Student
+    section Integration
+      Test in browser: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
+
 ![ਬ੍ਰਾਊਜ਼ਰ ਸਕੈਚਨੋਟ](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.pa.jpg)
 > ਸਕੈਚਨੋਟ [ਵਾਸਿਮ ਚੇਘਮ](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ਦੁਆਰਾ
 
-## ਪੂਰਵ-ਵਿਆਖਿਆਨ ਕਵਿਜ਼
+## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 
-[ਪੂਰਵ-ਵਿਆਖਿਆਨ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/23)
+[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/23)
 
 ### ਪਰਿਚਯ
 
-ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਛੋਟੀਆਂ ਐਪਲੀਕੇਸ਼ਨ ਹਨ ਜੋ ਤੁਹਾਡੇ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਿੰਗ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਂਦੀਆਂ ਹਨ। ਟਿਮ ਬਰਨਰਜ਼-ਲੀ ਦੇ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਦੇ ਮੂਲ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਵਾਂਗ, ਐਕਸਟੈਂਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਸਧਾਰਨ ਦਸਤਾਵੇਜ਼ ਦੇਖਣ ਤੋਂ ਪਰੇ ਵਧਾਉਂਦੀਆਂ ਹਨ। ਪਾਸਵਰਡ ਮੈਨੇਜਰਾਂ ਤੋਂ ਜੋ ਤੁਹਾਡੇ ਖਾਤਿਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦੇ ਹਨ, ਰੰਗ ਚੁਣਨ ਵਾਲੇ ਸੰਦਾਂ ਤੱਕ ਜੋ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਸਹੀ ਸ਼ੇਡ ਹਾਸਲ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ, ਐਕਸਟੈਂਸ਼ਨ ਰੋਜ਼ਾਨਾ ਬ੍ਰਾਊਜ਼ਿੰਗ ਚੁਣੌਤੀਆਂ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ।
+ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਛੋਟੀਆਂ ਐਪਲੀਕੇਸ਼ਨ ਹਨ ਜੋ ਤੁਹਾਡੇ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਿੰਗ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਂਦੀਆਂ ਹਨ। ਟਿਮ ਬਰਨਰਜ਼-ਲੀ ਦੇ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਦੇ ਅਸਲ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਵਾਂਗ, ਐਕਸਟੈਂਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰ ਦੀਆਂ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਸਧਾਰਨ ਦਸਤਾਵੇਜ਼ ਦੇਖਣ ਤੋਂ ਪਰੇ ਵਧਾਉਂਦੀਆਂ ਹਨ। ਪਾਸਵਰਡ ਮੈਨੇਜਰਾਂ ਤੋਂ ਜੋ ਤੁਹਾਡੇ ਖਾਤਿਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦੇ ਹਨ, ਰੰਗ ਚੁਣਨ ਵਾਲੇ ਟੂਲਾਂ ਤੱਕ ਜੋ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਸਹੀ ਸ਼ੇਡ ਹਾਸਲ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ, ਐਕਸਟੈਂਸ਼ਨ ਰੋਜ਼ਾਨਾ ਬ੍ਰਾਊਜ਼ਿੰਗ ਚੁਣੌਤੀਆਂ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ।
 
-ਤੁਹਾਡਾ ਪਹਿਲਾ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਸਮਝੀਏ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਅਲੈਕਸੈਂਡਰ ਗ੍ਰਾਹਮ ਬੈੱਲ ਨੂੰ ਟੈਲੀਫੋਨ ਦੀ ਖੋਜ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਧੁਨੀ ਸੰਚਾਰ ਨੂੰ ਸਮਝਣ ਦੀ ਲੋੜ ਸੀ, ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੂਲ ਤੱਤਾਂ ਨੂੰ ਜਾਣਨ ਨਾਲ ਤੁਹਾਨੂੰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਮਿਲੇਗੀ ਜੋ ਮੌਜੂਦਾ ਬ੍ਰਾਊਜ਼ਰ ਸਿਸਟਮਾਂ ਨਾਲ ਬਹੁਤ ਹੀ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਜੁੜਦੇ ਹਨ।
+ਤੁਹਾਡਾ ਪਹਿਲਾ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਸਮਝੀਏ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਅਲੈਕਜ਼ੈਂਡਰ ਗ੍ਰਾਹਮ ਬੈਲ ਨੂੰ ਟੈਲੀਫੋਨ ਦੀ ਖੋਜ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਧੁਨੀ ਸੰਚਾਰ ਨੂੰ ਸਮਝਣ ਦੀ ਲੋੜ ਸੀ, ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੂਲ ਤੱਤਾਂ ਨੂੰ ਜਾਣਨਾ ਤੁਹਾਨੂੰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਜੋ ਮੌਜੂਦਾ ਬ੍ਰਾਊਜ਼ਰ ਸਿਸਟਮਾਂ ਨਾਲ ਬੇਹਤਰੀਨ ਤਰੀਕੇ ਨਾਲ ਜੁੜਦੇ ਹਨ।
 
 ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝ ਲਵੋਗੇ ਅਤੇ ਆਪਣਾ ਪਹਿਲਾ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰ ਚੁੱਕੇ ਹੋਵੋਗੇ।
 
+```mermaid
+mindmap
+  root((Browser Architecture))
+    Core Components
+      Rendering Engine
+      JavaScript Engine
+      Network Stack
+      Storage APIs
+    User Interface
+      Address Bar
+      Tab Management
+      Bookmarks
+      Extension Icons
+    Extension System
+      Manifest Files
+      Content Scripts
+      Background Pages
+      Popup Windows
+    Security Model
+      Same-Origin Policy
+      Permissions API
+      Content Security
+      Isolated Worlds
+    Development Tools
+      DevTools Integration
+      Debug Console
+      Performance Monitor
+      Extension Inspector
+```
+
 ## ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸਮਝਣਾ
 
-ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਅਸਲ ਵਿੱਚ ਇੱਕ ਸੁਧਾਰਿਆ ਦਸਤਾਵੇਜ਼ ਵਿਆਖਿਆਕਾਰ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ "google.com" ਨੂੰ ਐਡਰੈੱਸ ਬਾਰ ਵਿੱਚ ਟਾਈਪ ਕਰਦੇ ਹੋ, ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਜਟਿਲ ਕ੍ਰਮਬੱਧ ਕਾਰਵਾਈ ਕਰਦਾ ਹੈ - ਦੁਨੀਆ ਭਰ ਦੇ ਸਰਵਰਾਂ ਤੋਂ ਸਮੱਗਰੀ ਦੀ ਬੇਨਤੀ ਕਰਦਾ ਹੈ, ਫਿਰ ਉਸ ਕੋਡ ਨੂੰ ਵਿਆਖਿਆ ਅਤੇ ਰੈਂਡਰ ਕਰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਪੇਜਾਂ 'ਤੇ ਵੇਖਦੇ ਹੋ।
+ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਅਸਲ ਵਿੱਚ ਇੱਕ ਉੱਚ-ਤਕਨੀਕੀ ਦਸਤਾਵੇਜ਼ ਅਨੁਵਾਦਕ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ "google.com" ਨੂੰ ਐਡਰੈੱਸ ਬਾਰ ਵਿੱਚ ਟਾਈਪ ਕਰਦੇ ਹੋ, ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਜਟਿਲ ਲੜੀਵਾਰ ਕਾਰਵਾਈਆਂ ਕਰਦਾ ਹੈ - ਵਿਸ਼ਵ-ਵਿਆਪੀ ਸਰਵਰਾਂ ਤੋਂ ਸਮੱਗਰੀ ਦੀ ਬੇਨਤੀ ਕਰਦਾ ਹੈ, ਫਿਰ ਉਸ ਕੋਡ ਨੂੰ ਪਾਰਸ ਅਤੇ ਰੈਂਡਰ ਕਰਕੇ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਪੇਜਾਂ ਵਿੱਚ ਬਦਲਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਵੇਖਦੇ ਹੋ।
 
 ਇਹ ਪ੍ਰਕਿਰਿਆ ਉਸ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ, ਵਰਲਡਵਾਈਡਵੈੱਬ, 1990 ਵਿੱਚ ਟਿਮ ਬਰਨਰਜ਼-ਲੀ ਦੁਆਰਾ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਸੀ ਤਾਂ ਜੋ ਹਾਈਪਰਲਿੰਕਡ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਪਹੁੰਚਯੋਗ ਬਣਾਇਆ ਜਾ ਸਕੇ।
 
-✅ **ਥੋੜ੍ਹਾ ਇਤਿਹਾਸ**: ਪਹਿਲਾ ਬ੍ਰਾਊਜ਼ਰ 'ਵਰਲਡਵਾਈਡਵੈੱਬ' ਕਿਹਾ ਜਾਂਦਾ ਸੀ ਅਤੇ 1990 ਵਿੱਚ ਸਰ ਟਿਮੋਥੀ ਬਰਨਰਜ਼-ਲੀ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ ਸੀ।
+✅ **ਥੋੜ੍ਹਾ ਇਤਿਹਾਸ**: ਪਹਿਲਾ ਬ੍ਰਾਊਜ਼ਰ 'ਵਰਲਡਵਾਈਡਵੈੱਬ' ਕਿਹਾ ਜਾਂਦਾ ਸੀ ਅਤੇ ਇਹ 1990 ਵਿੱਚ ਸਰ ਟਿਮੋਥੀ ਬਰਨਰਜ਼-ਲੀ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ ਸੀ।
 
 ![ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.pa.jpg)
 > ਕੁਝ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ, [ਕੈਰਨ ਮੈਕਗ੍ਰੇਨ](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ਦੁਆਰਾ
 
 ### ਬ੍ਰਾਊਜ਼ਰ ਵੈੱਬ ਸਮੱਗਰੀ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਕਿਰਿਆ ਕਰਦੇ ਹਨ
 
-URL ਦਾਖਲ ਕਰਨ ਅਤੇ ਵੈੱਬਪੇਜ ਦੇਖਣ ਦੇ ਵਿਚਕਾਰ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਕਈ ਸਹਿ-ਸੰਯੋਜਿਤ ਕਦਮ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜੋ ਸੈਕਿੰਡਾਂ ਵਿੱਚ ਹੋ ਜਾਂਦੇ ਹਨ:
+URL ਟਾਈਪ ਕਰਨ ਅਤੇ ਵੈੱਬਪੇਜ ਦੇਖਣ ਦੇ ਵਿਚਕਾਰ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਕਈ ਸਹਿ-ਸੰਚਾਲਿਤ ਕਦਮ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜੋ ਸੈਕਿੰਡਾਂ ਵਿੱਚ ਹੋ ਜਾਂਦੇ ਹਨ:
 
 ```mermaid
 sequenceDiagram
     participant User
     participant Browser
+    participant Extension
     participant DNS
     participant Server
     
     User->>Browser: Types URL and presses Enter
+    Browser->>Extension: Trigger beforeRequest event
+    Extension->>Extension: Check if URL needs modification
     Browser->>DNS: Looks up server IP address
     DNS->>Browser: Returns IP address
     Browser->>Server: Requests web page content
     Server->>Browser: Sends HTML, CSS, and JavaScript
+    Browser->>Extension: Trigger beforeResponse event
+    Extension->>Extension: Modify content if needed
     Browser->>User: Renders complete web page
+    Extension->>User: Show extension UI updates
 ```
 
-**ਇਹ ਪ੍ਰਕਿਰਿਆ ਕੀ ਪੂਰੀ ਕਰਦੀ ਹੈ:**
-- **ਅਨੁਵਾਦ**: DNS ਲੁੱਕਅੱਪ ਰਾਹੀਂ ਮਨੁੱਖ-ਪੜ੍ਹਨਯੋਗ URL ਨੂੰ ਸਰਵਰ IP ਪਤਾ ਵਿੱਚ
-- **ਸਥਾਪਿਤ**: HTTP ਜਾਂ HTTPS ਪ੍ਰੋਟੋਕੋਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੈੱਬ ਸਰਵਰ ਨਾਲ ਸੁਰੱਖਿਅਤ ਕਨੈਕਸ਼ਨ
-- **ਬੇਨਤੀ**: ਸਰਵਰ ਤੋਂ ਵਿਸ਼ੇਸ਼ ਵੈੱਬ ਪੇਜ ਸਮੱਗਰੀ
-- **ਪ੍ਰਾਪਤ**: HTML ਮਾਰਕਅੱਪ, CSS ਸਟਾਈਲਿੰਗ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ
-- **ਰੈਂਡਰ**: ਸਾਰੀ ਸਮੱਗਰੀ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਪੇਜ ਵਿੱਚ
+**ਇਹ ਪ੍ਰਕਿਰਿਆ ਕੀ ਹਾਸਲ ਕਰਦੀ ਹੈ:**
+- **ਅਨੁਵਾਦ**: DNS ਲੁੱਕਅੱਪ ਰਾਹੀਂ ਮਨੁੱਖ-ਪੜ੍ਹਨਯੋਗ URL ਨੂੰ ਸਰਵਰ IP ਪਤਾ ਵਿੱਚ ਬਦਲਦਾ ਹੈ
+- **ਸਥਾਪਨਾ**: HTTP ਜਾਂ HTTPS ਪ੍ਰੋਟੋਕੋਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੈੱਬ ਸਰਵਰ ਨਾਲ ਸੁਰੱਖਿਅਤ ਕਨੈਕਸ਼ਨ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ
+- **ਬੇਨਤੀ**: ਸਰਵਰ ਤੋਂ ਵਿਸ਼ੇਸ਼ ਵੈੱਬ ਪੇਜ ਸਮੱਗਰੀ ਦੀ ਬੇਨਤੀ ਕਰਦਾ ਹੈ
+- **ਪ੍ਰਾਪਤੀ**: ਸਰਵਰ ਤੋਂ HTML ਮਾਰਕਅੱਪ, CSS ਸਟਾਈਲਿੰਗ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ
+- **ਰੈਂਡਰ**: ਸਾਰੀ ਸਮੱਗਰੀ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬਪੇਜ ਵਿੱਚ ਬਦਲਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਵੇਖਦੇ ਹੋ
 
 ### ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੁੱਖ ਫੀਚਰ
 
@@ -67,120 +120,291 @@ sequenceDiagram
 
 | ਫੀਚਰ | ਉਦੇਸ਼ | ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਮੌਕੇ |
 |---------|---------|------------------------|
-| **ਰੈਂਡਰਿੰਗ ਇੰਜਨ** | HTML, CSS, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦਿਖਾਉਂਦਾ ਹੈ | ਸਮੱਗਰੀ ਵਿੱਚ ਤਬਦੀਲੀ, ਸਟਾਈਲਿੰਗ ਇੰਜੈਕਸ਼ਨ |
-| **ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੰਜਨ** | ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਚਲਾਉਂਦਾ ਹੈ | ਕਸਟਮ ਸਕ੍ਰਿਪਟ, API ਇੰਟਰੈਕਸ਼ਨ |
+| **ਰੈਂਡਰਿੰਗ ਇੰਜਨ** | HTML, CSS, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਡਿਸਪਲੇ ਕਰਦਾ ਹੈ | ਸਮੱਗਰੀ ਵਿੱਚ ਤਬਦੀਲੀ, ਸਟਾਈਲਿੰਗ ਇੰਜੈਕਸ਼ਨ |
+| **ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੰਜਨ** | ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ | ਕਸਟਮ ਸਕ੍ਰਿਪਟ, API ਇੰਟਰਐਕਸ਼ਨ |
 | **ਲੋਕਲ ਸਟੋਰੇਜ** | ਡਾਟਾ ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਸੇਵ ਕਰਦਾ ਹੈ | ਯੂਜ਼ਰ ਪਸੰਦਾਂ, ਕੈਸ਼ਡ ਡਾਟਾ |
 | **ਨੈਟਵਰਕ ਸਟੈਕ** | ਵੈੱਬ ਬੇਨਤੀਆਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ | ਬੇਨਤੀ ਮਾਨੀਟਰਿੰਗ, ਡਾਟਾ ਵਿਸ਼ਲੇਸ਼ਣ |
-| **ਸੁਰੱਖਿਆ ਮਾਡਲ** | ਖਤਰਨਾਕ ਸਮੱਗਰੀ ਤੋਂ ਯੂਜ਼ਰਾਂ ਦੀ ਰੱਖਿਆ ਕਰਦਾ ਹੈ | ਸਮੱਗਰੀ ਫਿਲਟਰੇਸ਼ਨ, ਸੁਰੱਖਿਆ ਵਿੱਚ ਸੁਧਾਰ |
+| **ਸੁਰੱਖਿਆ ਮਾਡਲ** | ਯੂਜ਼ਰਾਂ ਨੂੰ ਖ਼ਰਾਬ ਸਮੱਗਰੀ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ | ਸਮੱਗਰੀ ਫਿਲਟਰੀਂਗ, ਸੁਰੱਖਿਆ ਵਧਾਉਣ |
 
-**ਇਨ੍ਹਾਂ ਫੀਚਰਾਂ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਮਦਦ ਮਿਲਦੀ ਹੈ:**
+**ਇਹ ਫੀਚਰਾਂ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਮਦਦ ਮਿਲਦੀ ਹੈ:**
 - **ਪਛਾਣ**: ਜਿੱਥੇ ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਸਭ ਤੋਂ ਵੱਧ ਮੁੱਲ ਜੋੜ ਸਕਦਾ ਹੈ
-- **ਚੋਣ**: ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਲਈ ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ API
-- **ਡਿਜ਼ਾਈਨ**: ਐਕਸਟੈਂਸ਼ਨ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਸਿਸਟਮਾਂ ਨਾਲ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਕੰਮ ਕਰਦੇ ਹਨ
+- **ਚੋਣ**: ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਲਈ ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ APIs
+- **ਡਿਜ਼ਾਈਨ**: ਐਕਸਟੈਂਸ਼ਨ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਸਿਸਟਮਾਂ ਨਾਲ ਕੁਸ਼ਲਤਾ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ
 - **ਸੁਨਿਸ਼ਚਿਤ**: ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰ ਸੁਰੱਖਿਆ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ
 
-### ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਵਿਕਾਸ ਦੇ ਵਿਚਾਰ
+### ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਮੈਂਟ ਵਿਚਾਰ
 
-ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰ ਮਿਆਰਾਂ ਨੂੰ ਕੁਝ ਹੱਦ ਤੱਕ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕਰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਇੱਕੋ ਹੀ ਐਲਗੋਰਿਦਮ ਨੂੰ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲ ਸਕਦੀਆਂ ਹਨ। Chrome, Firefox, ਅਤੇ Safari ਵਿੱਚ ਹਰ ਇੱਕ ਵਿੱਚ ਵਿਲੱਖਣ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਐਕਸਟੈਂਸ਼ਨ ਵਿਕਾਸ ਦੌਰਾਨ ਧਿਆਨ ਵਿੱਚ ਰੱਖਣੀਆਂ ਪੈਂਦੀਆਂ ਹਨ।
+ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰ ਮਿਆਰਾਂ ਨੂੰ ਥੋੜ੍ਹੇ ਫਰਕਾਂ ਨਾਲ ਲਾਗੂ ਕਰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਇੱਕੋ ਐਲਗੋਰਿਥਮ ਨੂੰ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲ ਸਕਦੀਆਂ ਹਨ। Chrome, Firefox, ਅਤੇ Safari ਵਿੱਚ ਹਰ ਇੱਕ ਦੇ ਵਿਲੱਖਣ ਲੱਛਣ ਹਨ ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਐਕਸਟੈਂਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਦੌਰਾਨ ਧਿਆਨ ਵਿੱਚ ਰੱਖਣੇ ਪੈਂਦੇ ਹਨ।
 
 > 💡 **ਪ੍ਰੋ ਟਿਪ**: [caniuse.com](https://www.caniuse.com) ਦੀ ਵਰਤੋਂ ਕਰੋ ਇਹ ਜਾਂਚਣ ਲਈ ਕਿ ਕਿਹੜੀਆਂ ਵੈੱਬ ਤਕਨਾਲੋਜੀਆਂ ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਹਾਇਕ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਫੀਚਰਾਂ ਦੀ ਯੋਜਨਾ ਬਣਾਉਣ ਦੌਰਾਨ ਬਹੁਤ ਹੀ ਕੀਮਤੀ ਹੈ!
 
-**ਐਕਸਟੈਂਸ਼ਨ ਵਿਕਾਸ ਲਈ ਮੁੱਖ ਵਿਚਾਰ:**
-- **ਟੈਸਟ** ਕਰੋ ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ Chrome, Firefox, ਅਤੇ Edge ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ
-- **ਅਨੁਕੂਲ** ਕਰੋ ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ API ਅਤੇ ਮੈਨਿਫੈਸਟ ਫਾਰਮੈਟ
-- **ਸੰਭਾਲ** ਕਰੋ ਵੱਖ-ਵੱਖ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਸੀਮਾਵਾਂ
-- **ਪ੍ਰਦਾਨ** ਕਰੋ ਬ੍ਰਾਊਜ਼ਰ-ਵਿਸ਼ੇਸ਼ ਫੀਚਰਾਂ ਲਈ ਫਾਲਬੈਕ ਜੋ ਉਪਲਬਧ ਨਹੀਂ ਹੋ ਸਕਦੇ
+**ਐਕਸਟੈਂਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਲਈ ਮੁੱਖ ਵਿਚਾਰ:**
+- **ਟੈਸਟ**: ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ Chrome, Firefox, ਅਤੇ Edge ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਟੈਸਟ ਕਰੋ
+- **ਅਨੁਕੂਲਿਤ**: ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ APIs ਅਤੇ ਮੈਨਿਫੈਸਟ ਫਾਰਮੈਟਾਂ ਲਈ
+- **ਸੰਭਾਲ**: ਵੱਖ-ਵੱਖ ਪ੍ਰਦਰਸ਼ਨ ਲੱਛਣ ਅਤੇ ਸੀਮਾਵਾਂ
+- **ਪ੍ਰਦਾਨ**: ਬ੍ਰਾਊਜ਼ਰ-ਵਿਸ਼ੇਸ਼ ਫੀਚਰਾਂ ਲਈ ਫਾਲਬੈਕ ਜੋ ਸ਼ਾਇਦ ਉਪਲਬਧ ਨਾ ਹੋਣ
 
-✅ **ਵਿਸ਼ਲੇਸ਼ਣ ਅੰਤਰਦ੍ਰਿਸ਼ਟੀ**: ਤੁਸੀਂ ਆਪਣੇ ਵੈੱਬ ਵਿਕਾਸ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਵਿਸ਼ਲੇਸ਼ਣ ਪੈਕੇਜਾਂ ਨੂੰ ਇੰਸਟਾਲ ਕਰਕੇ ਇਹ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਕਿਹੜੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ। ਇਹ ਡਾਟਾ ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਕਿਹੜੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਸਹਾਇਕ ਬਣਾਉਣ ਲਈ ਤਰਜੀਹ ਦੇਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
+✅ **ਐਨਾਲਿਟਿਕਸ ਅੰਤਰਦ੍ਰਿਸ਼ਟੀ**: ਤੁਸੀਂ ਆਪਣੇ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਐਨਾਲਿਟਿਕਸ ਪੈਕੇਜਾਂ ਨੂੰ ਇੰਸਟਾਲ ਕਰਕੇ ਇਹ ਪਤਾ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਕਿਹੜੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ। ਇਹ ਡਾਟਾ ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਕਿਹੜੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਸਹਾਇਕ ਬਣਾਉਣ ਲਈ ਪ੍ਰਾਥਮਿਕਤਾ ਦੇਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
 
 ## ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸਮਝਣਾ
 
-ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਆਮ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਿੰਗ ਚੁਣੌਤੀਆਂ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ ਬ੍ਰਾਊਜ਼ਰ ਇੰਟਰਫੇਸ ਵਿੱਚ ਸਿੱਧੇ ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕਰਕੇ। ਵੱਖਰੇ ਐਪਲੀਕੇਸ਼ਨਾਂ ਜਾਂ ਜਟਿਲ ਵਰਕਫਲੋਜ਼ ਦੀ ਲੋੜ ਦੇ ਬਗੈਰ, ਐਕਸਟੈਂਸ਼ਨ ਸੰਦਾਂ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਤੱਕ ਤੁਰੰਤ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
+ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਆਮ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਿੰਗ ਚੁਣੌਤੀਆਂ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਇੰਟਰਫੇਸ ਵਿੱਚ ਸਿੱਧੇ ਫੀਚਰਾਂ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ। ਵੱਖਰੀ ਐਪਲੀਕੇਸ਼ਨ ਜਾਂ ਜਟਿਲ ਵਰਕਫਲੋ ਦੀ ਲੋੜ ਦੇ ਬਗੈਰ, ਐਕਸਟੈਂਸ਼ਨ ਸੰਦਾਂ ਅਤੇ ਫੀਚਰਾਂ ਤੱਕ ਤੁਰੰਤ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
 
-ਇਹ ਧਾਰਨਾ ਉਸ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ ਸ਼ੁਰੂਆਤੀ ਕੰਪਿਊਟਰ ਪਾਇਓਨੀਅਰਾਂ ਜਿਵੇਂ ਕਿ ਡਗਲਸ ਐਂਗਲਬਾਰਟ ਨੇ ਤਕਨਾਲੋਜੀ ਨਾਲ ਮਨੁੱਖੀ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਵਧਾਉਣ ਦੀ ਕਲਪਨਾ ਕੀਤੀ ਸੀ - ਐਕਸਟੈਂਸ਼ਨ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਮੂਲ ਫੰਕਸ਼ਨਲਿਟੀ ਨੂੰ ਵਧਾਉਂਦੇ ਹਨ।
+ਇਹ ਧਾਰਨਾ ਉਸ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ ਸ਼ੁਰੂਆਤੀ ਕੰਪਿਊਟਰ ਪਾਇਨੀਅਰ ਜਿਵੇਂ ਕਿ ਡਗਲਸ ਐਂਗਲਬਾਰਟ ਨੇ ਤਕਨਾਲੋਜੀ ਨਾਲ ਮਨੁੱਖੀ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਵਧਾਉਣ ਦੀ ਕਲਪਨਾ ਕੀਤੀ - ਐਕਸਟੈਂਸ਼ਨ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਮੂਲ ਕਾਰਗੁਜ਼ਾਰੀ ਨੂੰ ਵਧਾਉਂਦੇ ਹਨ।
 
-**ਪ੍ਰਸਿੱਧ ਐਕਸਟੈਂਸ਼ਨ ਸ਼੍ਰੇਣੀਆਂ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਫਾਇਦੇ:**
+```mermaid
+quadrantChart
+    title Browser Extension Categories
+    x-axis Simple --> Complex
+    y-axis Personal Use --> Professional Tools
+    quadrant-1 Developer Tools
+    quadrant-2 Enterprise Solutions
+    quadrant-3 Personal Utilities
+    quadrant-4 Productivity Apps
+    
+    Ad Blockers: [0.3, 0.2]
+    Password Managers: [0.7, 0.3]
+    Color Pickers: [0.4, 0.8]
+    Code Formatters: [0.8, 0.9]
+    Note Taking: [0.6, 0.5]
+    Video Downloaders: [0.5, 0.2]
+    Time Trackers: [0.7, 0.6]
+    Screenshot Tools: [0.4, 0.4]
+```
+
+**ਲੋਕਪ੍ਰਿਯ ਐਕਸਟੈਂਸ਼ਨ ਸ਼੍ਰੇਣੀਆਂ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਫਾਇਦੇ:**
 - **ਉਤਪਾਦਕਤਾ ਸੰਦ**: ਟਾਸਕ ਮੈਨੇਜਰ, ਨੋਟ-ਲੈਣ ਵਾਲੇ ਐਪਸ, ਅਤੇ ਸਮਾਂ ਟ੍ਰੈਕਰ ਜੋ ਤੁਹਾਨੂੰ ਸੰਗਠਿਤ ਰਹਿਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ
-- **ਸੁਰੱਖਿਆ ਵਿੱਚ ਸੁਧਾਰ**: ਪਾਸਵਰਡ ਮੈਨੇਜਰ, ਐਡ ਬਲਾਕਰ, ਅਤੇ ਗੋਪਨੀਯਤਾ ਸੰਦ ਜੋ ਤੁਹਾਡੇ ਡਾਟਾ ਦੀ ਰੱਖਿਆ ਕਰਦੇ ਹਨ
-- **ਡਿਵੈਲਪਰ ਸੰਦ**: ਕੋਡ ਫਾਰਮੈਟਰ, ਰੰਗ ਚੁਣਨ ਵਾਲੇ ਸੰਦ, ਅਤੇ ਡੀਬੱਗਿੰਗ ਯੂਟਿਲਿਟੀਜ਼ ਜੋ ਵਿਕਾਸ ਨੂੰ ਸਧਾਰਦੇ ਹਨ
-- **ਸਮੱਗਰੀ ਵਿੱਚ ਸੁਧਾਰ**: ਪੜ੍ਹਨ ਦੇ ਢੰਗ, ਵੀਡੀਓ ਡਾਊਨਲੋਡਰ, ਅਤੇ ਸਕ੍ਰੀਨਸ਼ਾਟ ਸੰਦ ਜੋ ਤੁਹਾਡੇ ਵੈੱਬ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੇ ਹਨ
+- **ਸੁਰੱਖਿਆ ਵਧਾਉਣ**: ਪਾਸਵਰਡ ਮੈਨੇਜਰ, ਐਡ ਬਲਾਕਰ, ਅਤੇ ਪ੍ਰਾਈਵੇਸੀ ਟੂਲ ਜੋ ਤੁਹਾਡੇ ਡਾਟਾ ਦੀ ਰੱਖਿਆ ਕਰਦੇ ਹਨ
+- **ਡਿਵੈਲਪਰ ਸੰਦ**: ਕੋਡ ਫਾਰਮੈਟਰ, ਰੰਗ ਚੁਣਨ ਵਾਲੇ ਟੂਲ, ਅਤੇ ਡੀਬੱਗਿੰਗ ਯੂਟਿਲਿਟੀਜ਼ ਜੋ ਡਿਵੈਲਪਮੈਂਟ ਨੂੰ ਸਧਾਰਨ ਬਣਾਉਂਦੀਆਂ ਹਨ
+- **ਸਮੱਗਰੀ ਵਧਾਉਣ**: ਪੜ੍ਹਨ ਦੇ ਮੋਡ, ਵੀਡੀਓ ਡਾਊਨਲੋਡਰ, ਅਤੇ ਸਕ੍ਰੀਨਸ਼ਾਟ ਟੂਲ ਜੋ ਤੁਹਾਡੇ ਵੈੱਬ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੇ ਹਨ
+
+✅ **ਚਿੰਤਨ ਦਾ ਸਵਾਲ**: ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਕਿਹੜੇ ਹਨ? ਉਹ ਵਿਸ਼ੇਸ਼ ਕੰਮ ਕੀ ਕਰਦੇ ਹਨ, ਅਤੇ ਉਹ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਅਨੁਭਵ ਨੂੰ ਕਿਵੇਂ ਸੁਧਾਰਦੇ ਹਨ?
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਬ੍ਰਾਊਜ਼ਰ ਆਰਕੀਟੈਕਚਰ ਦੀ ਸਮਝ**: ਐਕਸਟੈਂਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਵੱਲ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ:
+- ✅ ਸਮਝ ਸਕਦੇ ਹੋ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਵੈੱਬ ਬੇਨਤੀਆਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਕਿਰਿਆ ਕਰਦੇ ਹਨ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਕਿਵੇਂ ਰੈਂਡਰ ਕਰਦੇ ਹਨ
+- ✅ ਬ੍ਰਾਊਜ਼ਰ ਆਰਕੀਟੈਕਚਰ ਦੇ ਮੁੱਖ ਹਿੱਸਿਆਂ ਦੀ ਪਛਾਣ ਕਰ ਸਕਦੇ ਹੋ
+- ✅ ਸਮਝ ਸਕਦੇ ਹੋ ਕਿ ਐਕਸਟੈਂਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਨਾਲ ਕਿਵੇਂ ਜੁੜਦੇ ਹਨ
+- ✅ ਉਸ ਸੁਰੱਖਿਆ ਮਾਡਲ ਨੂੰ ਪਛਾਣ ਸਕਦੇ ਹੋ ਜੋ ਯੂਜ਼ਰਾਂ ਦੀ ਰੱਖਿਆ ਕਰਦਾ ਹੈ
 
-✅ **ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ**: ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਕਿਹੜੇ ਹਨ? ਉਹ ਕਿਹੜੇ ਵਿਸ਼ੇਸ਼ ਕੰਮ ਕਰਦੇ ਹਨ, ਅਤੇ ਉਹ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਅਨੁਭਵ ਨੂੰ ਕਿਵੇਂ ਬਿਹਤਰ ਬਣਾਉਂਦੇ ਹਨ?
+**ਤੁਰੰਤ ਸਵੈ-ਟੈਸਟ**: ਕੀ ਤੁਸੀਂ URL ਟਾਈਪ ਕਰਨ ਤੋਂ ਵੈੱਬਪੇਜ ਦੇਖਣ ਤੱਕ ਦਾ ਰਸਤਾ ਸਮਝ ਸਕਦੇ ਹੋ?
+1. **DNS ਲੁੱਕਅੱਪ** URL ਨੂੰ IP ਪਤੇ ਵਿੱਚ ਬਦਲਦਾ ਹੈ
+2. **HTTP ਬੇਨਤੀ** ਸਰਵਰ ਤੋਂ ਸਮੱਗਰੀ ਲੈਂਦੀ ਹੈ
+3. **ਪਾਰਸਿੰਗ** HTML, CSS, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਪ੍ਰਕਿਰਿਆ ਕਰਦੀ ਹੈ
+4. **ਰੈਂਡਰਿੰਗ** ਅੰਤਮ ਵੈੱਬਪੇਜ ਨੂੰ ਡਿਸਪਲੇ ਕਰਦੀ ਹੈ
+5. **ਐਕਸਟੈਂਸ਼ਨ** ਕਈ ਕਦਮਾਂ 'ਤੇ ਸਮੱਗਰੀ ਨੂੰ ਤਬਦੀਲ ਕਰ ਸਕਦੇ ਹਨ
 
-## ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਇੰਸਟਾਲ ਅਤੇ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ
+## ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਇੰਸਟਾਲ ਅਤੇ ਮੈਨੇਜ ਕਰਨਾ
 
-ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਇਹ ਅਨੁਮਾਨ ਲਗਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਜਦੋਂ ਲੋਕ ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰਦੇ ਹਨ ਤਾਂ ਉਨ੍ਹਾਂ ਦਾ ਅਨੁਭਵ ਕਿਵੇਂ ਹੋਵੇਗਾ। ਇੰਸਟਾਲੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਮਿਆਰੀ ਹੈ, ਇੰਟਰਫੇਸ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਥੋੜ੍ਹੇ ਬਦਲਾਅ ਦੇ ਨਾਲ।
+ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਇਹ ਅਨੁਮਾਨ ਲਗਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਲੋਕ ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰਦੇ ਸਮੇਂ ਕਿਹੜਾ ਅਨੁਭਵ ਕਰਦੇ ਹਨ। ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਇੰਸਟਾਲੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਮਿਆਰੀ ਹੈ, ਇੰਟਰਫੇਸ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਥੋੜ੍ਹੇ ਫਰਕਾਂ ਨਾਲ।
 
 ![Edge ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ ਜਿਸ ਵਿੱਚ edge://extensions ਪੇਜ ਅਤੇ ਸੈਟਿੰਗ ਮੈਨੂ ਖੁੱਲ੍ਹਾ ਹੈ](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.pa.png)
 
 > **ਮਹੱਤਵਪੂਰਨ**: ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਡਿਵੈਲਪਰ ਮੋਡ ਨੂੰ ਚਾਲੂ ਕਰਨਾ ਅਤੇ ਹੋਰ ਸਟੋਰਾਂ ਤੋਂ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਆਗਿਆ ਦੇਣਾ ਯਕੀਨੀ ਬਣਾਓ।
 
-### ਵਿਕਾਸ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ
+### ਡਿਵੈਲਪਮੈਂਟ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ
 
-ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਵਿਕਸਿਤ ਅਤੇ ਜਾਂਚ ਰਹੇ ਹੋ, ਇਸ ਵਰਕਫਲੋਅ ਦੀ ਪਾਲਣਾ ਕਰੋ:
+ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਡਿਵੈਲਪ ਅਤੇ ਜਾਂਚ ਰਹੇ ਹੋ, ਇਸ ਵਰਕਫਲੋ ਦੀ ਪਾਲਣਾ ਕਰੋ:
+
+```mermaid
+flowchart TD
+    A[Write Code] --> B[Build Extension]
+    B --> C{First Install?}
+    C -->|Yes| D[Load Unpacked]
+    C -->|No| E[Reload Extension]
+    D --> F[Test Functionality]
+    E --> F
+    F --> G{Working Correctly?}
+    G -->|No| H[Debug Issues]
+    G -->|Yes| I[Ready for Users]
+    H --> A
+    I --> J[Publish to Store]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#f3e5f5
+    style J fill:#fff3e0
+```
 
 ```bash
 # Step 1: Build your extension
 npm run build
 ```
 
-**ਇਹ ਕਮਾਂਡ ਕੀ ਪੂਰੀ ਕਰਦੀ ਹੈ:**
-- **ਤਿਆਰ** ਕਰਦਾ ਹੈ ਤੁਹਾਡੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ-ਤਿਆਰ ਫਾਈਲਾਂ ਵਿੱਚ
-- **ਬੰਡਲ** ਕਰਦਾ ਹੈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਮੋਡੀਊਲਾਂ ਨੂੰ ਅਨੁਕੂਲ ਪੈਕੇਜਾਂ ਵਿੱਚ
-- **ਜਨਰੇਟ** ਕਰਦਾ ਹੈ ਅੰਤਮ ਐਕਸਟੈਂਸ਼ਨ ਫਾਈਲਾਂ `/dist` ਫੋਲਡਰ ਵਿੱਚ
-- **ਤਿਆਰ** ਕਰਦਾ ਹੈ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਇੰਸਟਾਲ ਅਤੇ ਜਾਂਚ ਲਈ
+**ਇਹ ਕਮਾਂਡ ਕੀ ਹਾਸਲ ਕਰਦੀ ਹੈ:**
+- **ਤਿਆਰ ਕਰਦੀ ਹੈ** ਤੁਹਾਡਾ ਸਰੋਤ ਕੋਡ ਬ੍ਰਾਊਜ਼ਰ-ਤਿਆਰ ਫਾਈਲਾਂ ਵਿੱਚ
+- **ਬੰਡਲ ਕਰਦੀ ਹੈ** ਜਾਵਾਸਕ੍ਰਿਪਟ ਮੋਡੀਊਲਾਂ ਨੂੰ ਅਨੁਕੂਲ ਪੈਕੇਜਾਂ ਵਿੱਚ
+- **ਜਨਰੇਟ ਕਰਦੀ ਹੈ** ਅੰਤਮ ਐਕਸਟੈਂਸ਼ਨ ਫਾਈਲਾਂ `/dist` ਫੋਲਡਰ ਵਿੱਚ
+- **ਤਿਆਰ ਕਰਦੀ ਹੈ** ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲੇਸ਼ਨ ਅਤੇ ਜਾਂਚ ਲਈ
+
+**ਕਦਮ 2: ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪੇਜ 'ਤੇ ਜਾਓ**
+1. **ਖੋਲ੍ਹੋ** ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਐਕਸਟੈਂਸ਼ਨ ਮੈਨੇਜਮੈਂਟ ਪੇਜ
+2. **ਕਲਿਕ ਕਰੋ** "ਸੈਟਿੰਗਸ ਅਤੇ ਹੋਰ" ਬਟਨ (ਉਪਰਲੇ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ `...` ਆਈਕਨ) 
+3. **ਚੁਣੋ** ਡ੍ਰਾਪਡਾਊਨ ਮੈਨੂ ਤੋਂ "ਐਕਸਟੈਂਸ਼ਨ"
+
+**ਕਦਮ 3: ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ
+1. **ਚਲਾਓ** ਬਿਲਡ ਕਮਾਂਡ ਆਪਣੇ ਕੋਡ ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਲਈ  
+2. **ਲੋਡ ਕਰੋ** ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਡਿਵੈਲਪਰ ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ  
+3. **ਪੁਸ਼ਟੀ ਕਰੋ** ਕਿ ਫਾਰਮ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਹੈ ਅਤੇ ਪੇਸ਼ੇਵਰ ਲੱਗਦਾ ਹੈ  
+4. **ਜਾਂਚ ਕਰੋ** ਕਿ ਸਾਰੇ ਫਾਰਮ ਐਲਿਮੈਂਟ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਅਲਾਈਨ ਅਤੇ ਫੰਕਸ਼ਨਲ ਹਨ  
+
+**ਤੁਹਾਡੇ ਦੁਆਰਾ ਹਾਸਲ ਕੀਤੇ ਗਏ ਨਤੀਜੇ:**  
+- **ਬਣਾਇਆ** ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਮੁੱਢਲੀ HTML ਬਣਤਰ  
+- **ਤਿਆਰ ਕੀਤਾ** ਕਨਫਿਗਰੇਸ਼ਨ ਅਤੇ ਨਤੀਜਿਆਂ ਦੇ ਇੰਟਰਫੇਸ ਸਹੀ ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ ਨਾਲ  
+- **ਸੈਟ ਕੀਤਾ** ਇੱਕ ਆਧੁਨਿਕ ਡਿਵੈਲਪਮੈਂਟ ਵਰਕਫਲੋ ਉਦਯੋਗ-ਮਿਆਰੀ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ  
+- **ਤਿਆਰ ਕੀਤਾ** ਇੰਟਰਐਕਟਿਵ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨਾਲਿਟੀ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਮਜ਼ਬੂਤ ਬੁਨਿਆਦ  
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**  
+**ਐਕਸਟੈਂਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਪ੍ਰਗਤੀ**: ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ ਆਪਣੀ ਸਮਝ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:  
+- ✅ ਕੀ ਤੁਸੀਂ ਪ੍ਰੋਜੈਕਟ ਬਣਤਰ ਵਿੱਚ ਹਰ ਫਾਈਲ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਸਮਝ ਸਕਦੇ ਹੋ?  
+- ✅ ਕੀ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਤੁਹਾਡੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਕਿਵੇਂ ਬਦਲਦੀ ਹੈ?  
+- ✅ ਕਿਉਂ ਅਸੀਂ ਕਨਫਿਗਰੇਸ਼ਨ ਅਤੇ ਨਤੀਜਿਆਂ ਨੂੰ ਵੱਖ-ਵੱਖ UI ਸੈਕਸ਼ਨਾਂ ਵਿੱਚ ਵੰਡਦੇ ਹਾਂ?  
+- ✅ ਫਾਰਮ ਬਣਤਰ usability ਅਤੇ accessibility ਨੂੰ ਕਿਵੇਂ ਸਹਾਰਾ ਦਿੰਦੀ ਹੈ?  
+
+**ਡਿਵੈਲਪਮੈਂਟ ਵਰਕਫਲੋ ਸਮਝ**: ਹੁਣ ਤੁਹਾਨੂੰ ਇਹ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ:  
+1. **ਸੋਧ ਕਰੋ** ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਫੇਸ ਲਈ HTML ਅਤੇ CSS  
+2. **ਚਲਾਓ** ਬਿਲਡ ਕਮਾਂਡ ਆਪਣੇ ਬਦਲਾਅ ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਲਈ  
+3. **ਰੀਲੋਡ ਕਰੋ** ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਅਪਡੇਟ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ  
+4. **ਡਿਬੱਗ ਕਰੋ** ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ  
+
+ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਦਾ ਪਹਿਲਾ ਪੜਾਅ ਪੂਰਾ ਕਰ ਲਿਆ ਹੈ। ਜਿਵੇਂ ਕਿ ਰਾਈਟ ਬ੍ਰਦਰਾਂ ਨੇ ਉਡਾਣ ਹਾਸਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਏਅਰੋਡਾਇਨਾਮਿਕਸ ਨੂੰ ਸਮਝਣ ਦੀ ਲੋੜ ਸੀ, ਇਹ ਬੁਨਿਆਦੀ ਧਾਰਨਾਵਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਹੋਰ ਜਟਿਲ ਇੰਟਰਐਕਟਿਵ ਫੀਚਰ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਕਰਦਾ ਹੈ।  
+
+## GitHub Copilot Agent Challenge 🚀  
 
-**ਕਦਮ 2: ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਤੇ ਜਾਓ**
-1. **ਖੋਲ੍ਹੋ** ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰਬੰਧਨ ਪੇਜ
-2. **ਕਲਿੱਕ ਕਰੋ** "ਸੈਟਿੰਗਸ ਅਤੇ ਹੋਰ" ਬਟਨ (ਉੱਪਰ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ `...` ਆਈਕਨ)
-3. **ਚੁਣੋ** "ਐਕਸਟੈਂਸ਼ਨ" ਡ੍ਰਾਪਡਾਊਨ ਮੈਨੂ ਤੋਂ
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:  
 
-**ਕਦਮ 3: ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕਰੋ**
-- **ਨਵੀਂ ਇੰਸਟਾਲੇਸ਼ਨ ਲਈ**: `ਲੋਡ ਅਨਪੈਕਡ` ਚੁਣੋ ਅਤੇ ਆਪਣਾ `/dist` ਫੋਲਡਰ ਚੁਣੋ
-- **ਅੱਪਡੇਟ ਲਈ**: ਆਪਣੇ ਪਹਿਲਾਂ ਤੋਂ ਇੰਸਟਾਲ ਕੀਤੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਨਾਲ `ਰੀਲੋਡ` 'ਤੇ ਕਲਿੱਕ ਕਰੋ
-- **ਜਾਂਚ ਲਈ**: "ਡਿਵੈਲਪਰ ਮੋਡ" ਨੂੰ ਚਾਲੂ ਕਰੋ ਤਾਂ ਜੋ ਵਾਧੂ ਡੀਬੱਗਿੰਗ ਫੀਚਰਾਂ ਤੱਕ ਪਹੁੰਚ ਕੀਤੀ ਜਾ ਸਕੇ
+**ਵੇਰਵਾ:** API keys ਅਤੇ region codes ਦਰਜ ਕਰਨ ਸਮੇਂ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ ਅਤੇ ਫੀਡਬੈਕ ਫੀਚਰ ਸ਼ਾਮਲ ਕਰੋ।  
 
-### ਪ੍ਰੋਡਕਸ਼ਨ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲੇਸ਼ਨ
+**ਪ੍ਰੋਮਪਟ:** ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਲੀਡੇਸ਼ਨ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਜਾਂਚ ਕਰਦੇ ਹਨ ਕਿ API key ਫੀਲਡ ਵਿੱਚ ਘੱਟੋ-ਘੱਟ 20 ਅੱਖਰ ਹਨ ਅਤੇ region code ਸਹੀ ਫਾਰਮੈਟ (ਜਿਵੇਂ 'US-NEISO') ਦਾ ਪਾਲਣ ਕਰਦਾ ਹੈ। ਦ੍ਰਿਸ਼ਮਾਨ ਫੀਡਬੈਕ ਸ਼ਾਮਲ ਕਰੋ ਜਿਵੇਂ ਕਿ ਵੈਧ ਇਨਪੁਟ ਲਈ ਇਨਪੁਟ ਬਾਰਡਰ ਰੰਗ ਨੂੰ ਹਰਾ ਅਤੇ ਅਵੈਧ ਲਈ ਲਾਲ ਬਦਲਣਾ। ਸੁਰੱਖਿਆ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ API key ਨੂੰ ਦਿਖਾਉਣ/ਛੁਪਾਉਣ ਦਾ ਟੌਗਲ ਫੀਚਰ ਵੀ ਸ਼ਾਮਲ ਕਰੋ।  
 
-> ✅ **ਨੋਟ**: ਇਹ ਵਿਕਾਸ ਨਿਰਦੇਸ਼ਾਂ ਖਾਸ ਤੌਰ 'ਤੇ ਉਹ ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਹਨ ਜੋ ਤੁਸੀਂ ਖੁਦ ਬਣਾਉਂਦੇ ਹੋ। ਪ੍ਰਕਾਸ਼ਿਤ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਇੰਸਟਾਲ ਕਰਨ ਲਈ, [ਮਾਈਕਰੋਸਾਫਟ ਐਜ ਐਡ-ਆਨ ਸਟੋਰ](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) ਵਰਗੇ ਅਧਿਕਾਰਤ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਸਟੋਰਾਂ 'ਤੇ ਜਾਓ।
+Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ [ਇਥੇ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)।  
 
-**ਫਰਕ ਨੂੰ ਸਮਝਣਾ:**
-- **ਵਿਕਾਸ ਇੰਸਟਾਲੇਸ਼ਨ** ਤੁਹਾਨੂੰ ਵਿਕਾਸ ਦੌਰਾਨ ਅਪ੍ਰਕਾਸ਼ਿਤ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰਨ ਦਿੰਦੇ ਹਨ
-- **ਸਟੋਰ ਇੰਸਟਾਲੇਸ਼ਨ** ਪ੍ਰਕਾਸ਼ਿਤ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਸਵੈ-ਚਾਲੂ ਅੱਪਡੇਟ ਹੁੰਦੇ ਹਨ
-- **ਸਾਈਡਲੋਡਿੰਗ** ਅਧਿਕਾਰਤ ਸਟੋਰਾਂ ਤੋਂ ਬਾਹਰ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਇੰਸਟਾਲੇਸ਼ਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ (ਡਿਵੈਲਪਰ ਮੋਡ ਦੀ ਲੋੜ ਹੈ)
+## 🚀 ਚੈਲੈਂਜ  
 
-## ਆਪਣਾ ਕਾਰਬਨ ਫੁਟਪ੍ਰਿੰਟ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣਾ
+ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਸਟੋਰ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ ਅਤੇ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇੱਕ ਇੰਸਟਾਲ ਕਰੋ। ਤੁਸੀਂ ਇਸਦੇ ਫਾਈਲਾਂ ਨੂੰ ਦਿਲਚਸਪ ਤਰੀਕਿਆਂ ਵਿੱਚ ਜਾਂਚ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਕੀ ਖੋਜਦੇ ਹੋ?  
 
-ਅਸੀਂ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ
-**ਵੇਰਵਾ:** ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ ਲਿਆਉਣ ਲਈ ਫਾਰਮ ਵੈਰੀਫਿਕੇਸ਼ਨ ਅਤੇ ਯੂਜ਼ਰ ਫੀਡਬੈਕ ਫੀਚਰ ਸ਼ਾਮਲ ਕਰੋ, ਤਾਂ ਜੋ API ਕੁੰਜੀਆਂ ਅਤੇ ਰੀਜਨ ਕੋਡ ਦਾਖਲ ਕਰਦੇ ਸਮੇਂ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਕੀਤਾ ਜਾ ਸਕੇ।
+## Post-Lecture Quiz  
 
-**ਪ੍ਰੋੰਪਟ:** ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਰੀਫਿਕੇਸ਼ਨ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਜਾਂਚ ਕਰ ਸਕੇ ਕਿ API ਕੁੰਜੀ ਫੀਲਡ ਵਿੱਚ ਘੱਟੋ-ਘੱਟ 20 ਅੱਖਰ ਹਨ ਅਤੇ ਰੀਜਨ ਕੋਡ ਸਹੀ ਫਾਰਮੈਟ (ਜਿਵੇਂ 'US-NEISO') ਦਾ ਪਾਲਣ ਕਰਦਾ ਹੈ। ਦ੍ਰਿਸ਼ਮਾਨ ਫੀਡਬੈਕ ਸ਼ਾਮਲ ਕਰੋ, ਜਿਵੇਂ ਕਿ ਵੈਧ ਇਨਪੁਟ ਲਈ ਬਾਰਡਰ ਦਾ ਰੰਗ ਹਰਾ ਅਤੇ ਗੈਰ-ਵੈਧ ਲਈ ਲਾਲ। ਸੁਰੱਖਿਆ ਦੇ ਮੱਦੇਨਜ਼ਰ API ਕੁੰਜੀ ਨੂੰ ਦਿਖਾਉਣ/ਛੁਪਾਉਣ ਲਈ ਟੌਗਲ ਫੀਚਰ ਵੀ ਸ਼ਾਮਲ ਕਰੋ।
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/24)  
 
-[ਏਜੰਟ ਮੋਡ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
+## Review & Self Study  
 
-## 🚀 ਚੁਣੌਤੀ
+ਇਸ ਪਾਠ ਵਿੱਚ ਤੁਸੀਂ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਇਤਿਹਾਸ ਬਾਰੇ ਕੁਝ ਸਿੱਖਿਆ; ਇਸ ਮੌਕੇ ਨੂੰ ਵਰਤ ਕੇ ਇਹ ਸਿੱਖੋ ਕਿ ਵਰਲਡ ਵਾਈਡ ਵੈੱਬ ਦੇ ਆਵਿਸਕਾਰਕਾਂ ਨੇ ਇਸਦੇ ਉਪਯੋਗ ਬਾਰੇ ਕਿਵੇਂ ਸੋਚਿਆ ਸੀ। ਕੁਝ ਲਾਭਦਾਇਕ ਸਾਈਟਾਂ ਸ਼ਾਮਲ ਹਨ:  
 
-ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਸਟੋਰ 'ਤੇ ਜਾਓ ਅਤੇ ਇੱਕ ਐਕਸਟੈਂਸ਼ਨ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇੰਸਟਾਲ ਕਰੋ। ਇਸ ਦੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਦਿਲਚਸਪ ਢੰਗ ਨਾਲ ਜਾਂਚੋ। ਤੁਹਾਨੂੰ ਕੀ ਪਤਾ ਲੱਗਦਾ ਹੈ?
+[The History of Web Browsers](https://www.mozilla.org/firefox/browsers/browser-history/)  
 
-## ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼
+[History of the Web](https://webfoundation.org/about/vision/history-of-the-web/)  
 
-[ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/24)
+[An interview with Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  
 
-## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**  
+- [ ] Chrome/Edge ਐਕਸਟੈਂਸ਼ਨ ਪੇਜ (chrome://extensions) ਖੋਲ੍ਹੋ ਅਤੇ ਜੋ ਤੁਸੀਂ ਇੰਸਟਾਲ ਕੀਤਾ ਹੈ ਉਸਨੂੰ ਖੋਜੋ  
+- [ ] ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ DevTools Network ਟੈਬ ਨੂੰ ਵੇਖੋ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਵੈੱਬਪੇਜ ਲੋਡ ਕਰਦੇ ਹੋ  
+- [ ] ਪੇਜ ਸਰੋਤ ਵੇਖਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ (Ctrl+U) HTML ਬਣਤਰ ਦੇਖਣ ਲਈ  
+- [ ] ਕਿਸੇ ਵੀ ਵੈੱਬਪੇਜ ਐਲਿਮੈਂਟ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ DevTools ਵਿੱਚ ਇਸਦੇ CSS ਨੂੰ ਸੋਧੋ  
 
-ਇਸ ਪਾਠ ਵਿੱਚ ਤੁਸੀਂ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਇਤਿਹਾਸ ਬਾਰੇ ਥੋੜਾ ਸਿੱਖਿਆ; ਇਸ ਮੌਕੇ ਦਾ ਫਾਇਦਾ ਚੁੱਕੋ ਅਤੇ ਵਰਲਡ ਵਾਈਡ ਵੈੱਬ ਦੇ ਖੋਜਕਾਰਾਂ ਨੇ ਇਸਦੇ ਉਪਯੋਗ ਬਾਰੇ ਕਿਵੇਂ ਸੋਚਿਆ, ਇਸਦੇ ਇਤਿਹਾਸ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹ ਕੇ ਜਾਣੋ। ਕੁਝ ਲਾਭਦਾਇਕ ਸਾਈਟਾਂ ਸ਼ਾਮਲ ਹਨ:
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**  
+- [ ] ਪਾਠ-ਪਾਠ ਕਵਿਜ ਪੂਰਾ ਕਰੋ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੁੱਢਲੇ ਤੱਤ ਸਮਝੋ  
+- [ ] ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ manifest.json ਫਾਈਲ ਬਣਾਓ  
+- [ ] ਇੱਕ ਸਧਾਰਨ "Hello World" ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਓ ਜੋ ਇੱਕ ਪੌਪਅੱਪ ਦਿਖਾਉਂਦਾ ਹੈ  
+- [ ] ਡਿਵੈਲਪਰ ਮੋਡ ਵਿੱਚ ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕਰਨ ਦੀ ਜਾਂਚ ਕਰੋ  
+- [ ] ਆਪਣੇ ਟਾਰਗਟ ਬ੍ਰਾਊਜ਼ਰ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ ਦੀ ਖੋਜ ਕਰੋ  
+
+### 📅 **ਤੁਹਾਡਾ ਹਫਤਾਵਾਰ ਐਕਸਟੈਂਸ਼ਨ ਯਾਤਰਾ**  
+- [ ] ਇੱਕ ਕਾਰਗਰ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪੂਰਾ ਕਰੋ ਜਿਸ ਵਿੱਚ ਅਸਲ ਯੂਟਿਲਿਟੀ ਹੋਵੇ  
+- [ ] ਕਨਟੈਂਟ ਸਕ੍ਰਿਪਟ, ਬੈਕਗਰਾਊਂਡ ਸਕ੍ਰਿਪਟ, ਅਤੇ ਪੌਪਅੱਪ ਇੰਟਰਐਕਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ  
+- [ ] ਬ੍ਰਾਊਜ਼ਰ APIs ਜਿਵੇਂ ਕਿ storage, tabs, ਅਤੇ messaging ਨੂੰ ਮਾਸਟਰ ਕਰੋ  
+- [ ] ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਯੂਜ਼ਰ-ਫ੍ਰੈਂਡਲੀ ਇੰਟਰਫੇਸ ਡਿਜ਼ਾਈਨ ਕਰੋ  
+- [ ] ਵੱਖ-ਵੱਖ ਵੈੱਬਸਾਈਟਾਂ ਅਤੇ ਸਥਿਤੀਆਂ ਵਿੱਚ ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ  
+- [ ] ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਐਕਸਟੈਂਸ਼ਨ ਸਟੋਰ ਵਿੱਚ ਆਪਣਾ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰੋ  
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨਾਵਾਰ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਮੈਂਟ**  
+- [ ] ਵੱਖ-ਵੱਖ ਯੂਜ਼ਰ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਵਾਲੇ ਕਈ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਓ  
+- [ ] ਉੱਚ-ਸਤਰੀ ਬ੍ਰਾਊਜ਼ਰ APIs ਅਤੇ ਸੁਰੱਖਿਆ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸ ਸਿੱਖੋ  
+- [ ] ਖੁੱਲੇ ਸਰੋਤ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਦਿਓ  
+- [ ] ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਅਤੇ ਪ੍ਰਗਤੀਸ਼ੀਲ ਸੁਧਾਰ ਵਿੱਚ ਮਾਹਰ ਬਣੋ  
+- [ ] ਹੋਰਾਂ ਲਈ ਐਕਸਟੈਂਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲ ਅਤੇ ਟੈਂਪਲੇਟ ਬਣਾਓ  
+- [ ] ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਮਾਹਰ ਬਣੋ ਜੋ ਹੋਰ ਡਿਵੈਲਪਰਾਂ ਦੀ ਮਦਦ ਕਰਦਾ ਹੈ  
+
+## 🎯 ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ  
+
+```mermaid
+timeline
+    title Browser Extension Development Progression
+    
+    section Foundation (15 minutes)
+        Browser Understanding: Core architecture
+                              : Rendering process
+                              : Extension integration points
+        
+    section Setup (20 minutes)
+        Development Environment: Project structure
+                               : Build tools configuration
+                               : Browser developer mode
+                               : Extension loading process
+        
+    section Interface Design (25 minutes)
+        User Experience: HTML structure
+                       : CSS styling
+                       : Form validation
+                       : Responsive design
+        
+    section Core Functionality (35 minutes)
+        JavaScript Integration: Event handling
+                              : API interactions
+                              : Data storage
+                              : Error handling
+        
+    section Browser APIs (45 minutes)
+        Platform Integration: Permissions system
+                            : Storage APIs
+                            : Tab management
+                            : Context menus
+        
+    section Advanced Features (1 week)
+        Professional Extensions: Background scripts
+                               : Content scripts
+                               : Cross-browser compatibility
+                               : Performance optimization
+        
+    section Publishing (2 weeks)
+        Distribution: Store submission
+                   : Review process
+                   : User feedback
+                   : Update management
+        
+    section Expert Level (1 month)
+        Extension Ecosystem: Advanced APIs
+                           : Security best practices
+                           : Enterprise features
+                           : Framework integration
+```
+  
+### 🛠️ ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲਕਿਟ ਸਾਰ  
 
-[ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਇਤਿਹਾਸ](https://www.mozilla.org/firefox/browsers/browser-history/)
+ਇਸ ਪਾਠ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਹੈ:  
+- **ਬ੍ਰਾਊਜ਼ਰ ਆਰਕੀਟੈਕਚਰ ਗਿਆਨ**: ਰੈਂਡਰਿੰਗ ਇੰਜਨ, ਸੁਰੱਖਿਆ ਮਾਡਲ, ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦੀ ਸਮਝ  
+- **ਡਿਵੈਲਪਮੈਂਟ ਵਾਤਾਵਰਣ**: Webpack, NPM, ਅਤੇ ਡਿਬੱਗਿੰਗ ਸਮਰੱਥਾ ਨਾਲ ਆਧੁਨਿਕ ਟੂਲਚੇਨ  
+- **UI/UX ਬੁਨਿਆਦ**: ਸੈਮੈਂਟਿਕ HTML ਬਣਤਰ ਪ੍ਰਗਤੀਸ਼ੀਲ ਖੁਲਾਸੇ ਪੈਟਰਨ ਨਾਲ  
+- **ਸੁਰੱਖਿਆ ਜਾਗਰੂਕਤਾ**: ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਮਤੀਆਂ ਅਤੇ ਸੁਰੱਖਿਅਤ ਡਿਵੈਲਪਮੈਂਟ ਅਭਿਆਸ ਦੀ ਸਮਝ  
+- **ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਧਾਰਨਾਵਾਂ**: ਅਨੁਕੂਲਤਾ ਵਿਚਾਰਾਂ ਅਤੇ ਜਾਂਚ ਪਹੁੰਚਾਂ ਦੀ ਜਾਣਕਾਰੀ  
+- **API ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਬਾਹਰੀ ਡਾਟਾ ਸਰੋਤਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਬੁਨਿਆਦ  
+- **ਪੇਸ਼ੇਵਰ ਵਰਕਫਲੋ**: ਉਦਯੋਗ-ਮਿਆਰੀ ਡਿਵੈਲਪਮੈਂਟ ਅਤੇ ਜਾਂਚ ਪ੍ਰਕਿਰਿਆਵਾਂ  
 
-[ਵੈੱਬ ਦਾ ਇਤਿਹਾਸ](https://webfoundation.org/about/vision/history-of-the-web/)
+**ਅਸਲ-ਦੁਨੀਆ ਦੇ ਅਰਜ਼ੀ**: ਇਹ ਹੁਨਰ ਸਿੱਧੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ:  
+- **ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ**: ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਅਤੇ ਪ੍ਰਗਤੀਸ਼ੀਲ ਵੈੱਬ ਐਪਸ  
+- **ਡੈਸਕਟਾਪ ਐਪਲੀਕੇਸ਼ਨ**: Electron ਅਤੇ ਵੈੱਬ-ਅਧਾਰਿਤ ਡੈਸਕਟਾਪ ਸਾਫਟਵੇਅਰ  
+- **ਮੋਬਾਈਲ ਡਿਵੈਲਪਮੈਂਟ**: ਹਾਈਬ੍ਰਿਡ ਐਪਸ ਅਤੇ ਵੈੱਬ-ਅਧਾਰਿਤ ਮੋਬਾਈਲ ਹੱਲ  
+- **ਇੰਟਰਪ੍ਰਾਈਜ਼ ਟੂਲ**: ਅੰਦਰੂਨੀ ਉਤਪਾਦਕਤਾ ਐਪਲੀਕੇਸ਼ਨ ਅਤੇ ਵਰਕਫਲੋ ਆਟੋਮੇਸ਼ਨ  
+- **ਖੁੱਲੇ ਸਰੋਤ**: ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟਾਂ ਅਤੇ ਵੈੱਬ ਮਿਆਰਾਂ ਵਿੱਚ ਯੋਗਦਾਨ  
 
-[ਟਿਮ ਬਰਨਰਜ਼-ਲੀ ਨਾਲ ਇੰਟਰਵਿਊ](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+**ਅਗਲਾ ਪੱਧਰ**: ਤੁਸੀਂ ਹੁਣ ਇੰਟਰਐਕਟਿਵ ਫੰਕਸ਼ਨਾਲਿਟੀ ਸ਼ਾਮਲ ਕਰਨ, ਬ੍ਰਾਊਜ਼ਰ APIs ਨਾਲ ਕੰਮ ਕਰਨ, ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ ਜੋ ਅਸਲ ਯੂਜ਼ਰ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਦੇ ਹਨ!  
 
-## ਅਸਾਈਨਮੈਂਟ
+## ਅਸਾਈਨਮੈਂਟ  
 
-[ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਰੀਸਟਾਈਲ ਕਰੋ](assignment.md)
+[ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਰੀਸਟਾਈਲ ਕਰੋ](assignment.md)  
 
 ---
 
-**ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤੀ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/pa/5-browser-extension/2-forms-browsers-local-storage/README.md
index 6be950cbcf..30241a522f 100644
--- a/translations/pa/5-browser-extension/2-forms-browsers-local-storage/README.md
+++ b/translations/pa/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -1,35 +1,109 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8c8cd4af6086cc1d47e1d43aa4983d20",
-  "translation_date": "2025-10-22T18:15:09+00:00",
+  "original_hash": "2b6203a48c48d8234e0948353b47d84e",
+  "translation_date": "2025-11-03T17:01:27+00:00",
   "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
   "language_code": "pa"
 }
 -->
 # ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 2: API ਕਾਲ ਕਰੋ, ਲੋਕਲ ਸਟੋਰੇਜ ਵਰਤੋ
 
-## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
+```mermaid
+journey
+    title Your API Integration & Storage Journey
+    section Foundation
+      Setup DOM references: 3: Student
+      Add event listeners: 4: Student
+      Handle form submission: 4: Student
+    section Data Management
+      Implement local storage: 4: Student
+      Build API calls: 5: Student
+      Handle async operations: 5: Student
+    section User Experience
+      Add error handling: 5: Student
+      Create loading states: 4: Student
+      Polish interactions: 5: Student
+```
+
+## ਪੂਰਵ-ਵਿਦਿਆਰਥੀ ਕਵਿਜ਼
 
-[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/25)
+[ਪੂਰਵ-ਵਿਦਿਆਰਥੀ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/25)
 
-## ਜਾਣ ਪਛਾਣ
+## ਪਰਿਚਯ
 
-ਯਾਦ ਹੈ ਉਹ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਜੋ ਤੁਸੀਂ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕੀਤਾ ਸੀ? ਇਸ ਸਮੇਂ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਸੁੰਦਰ ਫਾਰਮ ਹੈ, ਪਰ ਇਹ ਮੁੱਖ ਤੌਰ 'ਤੇ ਸਥਿਰ ਹੈ। ਅੱਜ ਅਸੀਂ ਇਸਨੂੰ ਹਕੀਕਤੀ ਡਾਟਾ ਨਾਲ ਜੋੜ ਕੇ ਅਤੇ ਇਸਨੂੰ ਯਾਦਸ਼ਕਤੀ ਦੇ ਕੇ ਜ਼ਿੰਦਗੀ ਦੇਣ ਜਾ ਰਹੇ ਹਾਂ।
+ਤੁਹਾਨੂੰ ਯਾਦ ਹੈ ਕਿ ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਦੀ ਸ਼ੁਰੂਆਤ ਕੀਤੀ ਸੀ? ਇਸ ਸਮੇਂ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਸੁੰਦਰ ਫਾਰਮ ਹੈ, ਪਰ ਇਹ ਮੁੱਖ ਤੌਰ 'ਤੇ ਸਥਿਰ ਹੈ। ਅੱਜ ਅਸੀਂ ਇਸਨੂੰ ਹਕੀਕਤੀ ਡਾਟਾ ਨਾਲ ਜੋੜ ਕੇ ਅਤੇ ਇਸਨੂੰ ਯਾਦਸ਼ਕਤੀ ਦੇ ਕੇ ਜ਼ਿੰਦਾ ਕਰਾਂਗੇ।
 
-ਅਪੋਲੋ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਕੰਪਿਊਟਰਾਂ ਬਾਰੇ ਸੋਚੋ - ਉਹ ਸਿਰਫ਼ ਫਿਕਸਡ ਜਾਣਕਾਰੀ ਨਹੀਂ ਦਿਖਾਉਂਦੇ ਸਨ। ਉਹ ਸਪੇਸਕ੍ਰਾਫਟ ਨਾਲ ਲਗਾਤਾਰ ਸੰਚਾਰ ਕਰਦੇ, ਟੈਲੀਮੇਟਰੀ ਡਾਟਾ ਨਾਲ ਅਪਡੇਟ ਹੁੰਦੇ, ਅਤੇ ਮਿਸ਼ਨ ਦੇ ਮਹੱਤਵਪੂਰਨ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਯਾਦ ਰੱਖਦੇ। ਅੱਜ ਅਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਡਾਇਨਾਮਿਕ ਵਿਹਾਰ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਨੈਟ ਨਾਲ ਜੁੜੇਗਾ, ਹਕੀਕਤੀ ਵਾਤਾਵਰਣ ਡਾਟਾ ਲਵੇਗਾ, ਅਤੇ ਅਗਲੀ ਵਾਰ ਲਈ ਤੁਹਾਡੇ ਸੈਟਿੰਗਜ਼ ਨੂੰ ਯਾਦ ਰੱਖੇਗਾ।
+ਅਪੋਲੋ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਕੰਪਿਊਟਰਾਂ ਬਾਰੇ ਸੋਚੋ - ਉਹ ਸਿਰਫ਼ ਸਥਿਰ ਜਾਣਕਾਰੀ ਨਹੀਂ ਦਿਖਾਉਂਦੇ ਸਨ। ਉਹ ਸਪੇਸਕ੍ਰਾਫਟ ਨਾਲ ਲਗਾਤਾਰ ਸੰਚਾਰ ਕਰਦੇ ਸਨ, ਟੈਲੀਮੇਟਰੀ ਡਾਟਾ ਨਾਲ ਅਪਡੇਟ ਹੁੰਦੇ ਸਨ, ਅਤੇ ਮਹੱਤਵਪੂਰਨ ਮਿਸ਼ਨ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਯਾਦ ਰੱਖਦੇ ਸਨ। ਅੱਜ ਅਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਗਤੀਸ਼ੀਲ ਵਿਹਾਰ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਨੈਟ ਨਾਲ ਜੁੜੇਗਾ, ਹਕੀਕਤੀ ਵਾਤਾਵਰਣ ਡਾਟਾ ਲਵੇਗਾ, ਅਤੇ ਅਗਲੀ ਵਾਰ ਲਈ ਤੁਹਾਡੇ ਸੈਟਿੰਗਾਂ ਨੂੰ ਯਾਦ ਰੱਖੇਗਾ।
 
-API ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਮੁਸ਼ਕਲ ਲੱਗ ਸਕਦੀ ਹੈ, ਪਰ ਇਹ ਸਿਰਫ਼ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹੋਰ ਸੇਵਾਵਾਂ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਦਾ ਸਿਖਾਉਣਾ ਹੈ। ਚਾਹੇ ਤੁਸੀਂ ਮੌਸਮ ਡਾਟਾ, ਸੋਸ਼ਲ ਮੀਡੀਆ ਫੀਡਸ, ਜਾਂ ਕਾਰਬਨ ਫੁਟਪ੍ਰਿੰਟ ਜਾਣਕਾਰੀ ਲੈ ਰਹੇ ਹੋ ਜਿਵੇਂ ਅਸੀਂ ਅੱਜ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ, ਇਹ ਸਾਰੇ ਡਿਜ਼ੀਟਲ ਕਨੈਕਸ਼ਨ ਸਥਾਪਤ ਕਰਨ ਬਾਰੇ ਹੈ। ਅਸੀਂ ਇਹ ਵੀ ਪੜ੍ਹਾਂਗੇ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਜਾਣਕਾਰੀ ਨੂੰ ਕਿਵੇਂ ਸਥਿਰ ਕਰ ਸਕਦੇ ਹਨ - ਜਿਵੇਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੇ ਕਾਰਡ ਕੈਟਾਲੌਗ ਵਰਤ ਕੇ ਕਿਤਾਬਾਂ ਦੇ ਸਥਾਨ ਨੂੰ ਯਾਦ ਰੱਖਿਆ।
+API ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਮੁਸ਼ਕਲ ਲੱਗ ਸਕਦੀ ਹੈ, ਪਰ ਇਹ ਸਿਰਫ਼ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹੋਰ ਸੇਵਾਵਾਂ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਦਾ ਸਿਖਾਉਣਾ ਹੈ। ਚਾਹੇ ਤੁਸੀਂ ਮੌਸਮ ਡਾਟਾ, ਸੋਸ਼ਲ ਮੀਡੀਆ ਫੀਡਸ, ਜਾਂ ਕਾਰਬਨ ਫੁੱਟਪ੍ਰਿੰਟ ਜਾਣਕਾਰੀ ਲੈ ਰਹੇ ਹੋ ਜਿਵੇਂ ਅਸੀਂ ਅੱਜ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ, ਇਹ ਸਾਰੇ ਡਿਜ਼ੀਟਲ ਕਨੈਕਸ਼ਨ ਸਥਾਪਤ ਕਰਨ ਬਾਰੇ ਹੈ। ਅਸੀਂ ਇਹ ਵੀ ਪੜ੍ਹਾਂਗੇ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਜਾਣਕਾਰੀ ਨੂੰ ਕਿਵੇਂ ਸਥਿਰ ਕਰ ਸਕਦੇ ਹਨ - ਜਿਵੇਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੇ ਕਿਤਾਬਾਂ ਦੇ ਸਥਾਨ ਨੂੰ ਯਾਦ ਰੱਖਣ ਲਈ ਕਾਰਡ ਕੈਟਾਲੌਗ ਵਰਤੇ ਹਨ।
 
 ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਹੋਵੇਗਾ ਜੋ ਹਕੀਕਤੀ ਡਾਟਾ ਲੈਂਦਾ ਹੈ, ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ, ਅਤੇ ਇੱਕ ਸੁਗਮ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਚਲੋ ਸ਼ੁਰੂ ਕਰੀਏ!
 
-✅ ਸਹੀ ਫਾਈਲਾਂ ਵਿੱਚ ਗਿਣਤੀ ਵਾਲੇ ਸੈਗਮੈਂਟਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ ਤਾਂ ਕਿ ਤੁਹਾਨੂੰ ਪਤਾ ਲੱਗੇ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਕਿੱਥੇ ਰੱਖਣਾ ਹੈ।
+```mermaid
+mindmap
+  root((Dynamic Extensions))
+    DOM Manipulation
+      Element Selection
+      Event Handling
+      State Management
+      UI Updates
+    Local Storage
+      Data Persistence
+      Key-Value Pairs
+      Session Management
+      User Preferences
+    API Integration
+      HTTP Requests
+      Authentication
+      Data Parsing
+      Error Handling
+    Async Programming
+      Promises
+      Async/Await
+      Error Catching
+      Non-blocking Code
+    User Experience
+      Loading States
+      Error Messages
+      Smooth Transitions
+      Data Validation
+```
 
-## ਐਕਸਟੈਂਸ਼ਨ ਵਿੱਚ ਤਬਦੀਲੀ ਕਰਨ ਲਈ ਤੱਤ ਸੈਟ ਕਰੋ
+✅ ਸਹੀ ਫਾਈਲਾਂ ਵਿੱਚ ਗਿਣਤੀ ਵਾਲੇ ਸੈਗਮੈਂਟਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਪਤਾ ਲੱਗੇ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਕਿੱਥੇ ਰੱਖਣਾ ਹੈ।
 
-ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੰਟਰਫੇਸ ਨੂੰ ਤਬਦੀਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਸਨੂੰ ਖਾਸ HTML ਤੱਤਾਂ ਦੇ ਹਵਾਲੇ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਜਿਵੇਂ ਇੱਕ ਦੂਰਬੀਨ ਨੂੰ ਖਾਸ ਤਾਰਿਆਂ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ - ਗੈਲੀਲੀਓ ਜੁਪਿਟਰ ਦੇ ਚੰਦਾਂ ਦਾ ਅਧਿਐਨ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਉਸਨੂੰ ਜੁਪਿਟਰ ਨੂੰ ਲੱਭਣਾ ਅਤੇ ਫੋਕਸ ਕਰਨਾ ਪਿਆ।
+## ਐਕਸਟੈਂਸ਼ਨ ਵਿੱਚ ਤਬਦੀਲੀ ਕਰਨ ਲਈ ਤੱਤ ਸੈਟ ਕਰੋ
 
-ਤੁਹਾਡੇ `index.js` ਫਾਈਲ ਵਿੱਚ, ਅਸੀਂ `const` ਵੈਰੀਏਬਲ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਹਰ ਮਹੱਤਵਪੂਰਨ ਫਾਰਮ ਤੱਤ ਦੇ ਹਵਾਲੇ ਨੂੰ ਕੈਪਚਰ ਕਰਦੇ ਹਨ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਵਿਗਿਆਨੀ ਆਪਣੇ ਸਾਜ਼ੋ-ਸਾਮਾਨ ਨੂੰ ਲੇਬਲ ਕਰਦੇ ਹਨ - ਹਰ ਵਾਰ ਪੂਰੇ ਲੈਬੋਰਟਰੀ ਵਿੱਚ ਖੋਜ ਕਰਨ ਦੀ ਬਜਾਏ, ਉਹ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਉਹਨਾਂ ਦੀ ਲੋੜ ਵਾਲੀ ਚੀਜ਼ ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹਨ।
+ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੰਟਰਫੇਸ ਨੂੰ ਤਬਦੀਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਸਨੂੰ ਖਾਸ HTML ਤੱਤਾਂ ਦੇ ਹਵਾਲੇ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਜਿਵੇਂ ਇੱਕ ਦੂਰਬੀਨ ਨੂੰ ਖਾਸ ਤਾਰਿਆਂ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ - ਗੈਲੀਲਿਓ ਜੁਪਿਟਰ ਦੇ ਚੰਦਾਂ ਦਾ ਅਧਿਐਨ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਉਸਨੂੰ ਜੁਪਿਟਰ ਨੂੰ ਲੱਭਣਾ ਅਤੇ ਇਸ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਨਾ ਪਿਆ।
+
+ਤੁਹਾਡੇ `index.js` ਫਾਈਲ ਵਿੱਚ, ਅਸੀਂ `const` ਵੈਰੀਏਬਲ ਬਣਾਵਾਂਗੇ ਜੋ ਹਰ ਮਹੱਤਵਪੂਰਨ ਫਾਰਮ ਤੱਤ ਦੇ ਹਵਾਲੇ ਨੂੰ ਕੈਪਚਰ ਕਰਦੇ ਹਨ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਵਿਗਿਆਨੀਆਂ ਆਪਣੇ ਸਾਜ਼ੋ-ਸਾਮਾਨ ਨੂੰ ਲੇਬਲ ਕਰਦੇ ਹਨ - ਹਰ ਵਾਰ ਪੂਰੇ ਲੈਬੋਰਟਰੀ ਵਿੱਚ ਖੋਜ ਕਰਨ ਦੀ ਬਜਾਏ, ਉਹ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਉਹਨਾਂ ਨੂੰ ਪਹੁੰਚ ਸਕਦੇ ਹਨ ਜੋ ਉਹਨਾਂ ਦੀ ਲੋੜ ਹੈ।
+
+```mermaid
+flowchart LR
+    A[JavaScript Code] --> B[document.querySelector]
+    B --> C[CSS Selectors]
+    C --> D[HTML Elements]
+    
+    D --> E[".form-data"]
+    D --> F[".region-name"]
+    D --> G[".api-key"]
+    D --> H[".loading"]
+    D --> I[".errors"]
+    D --> J[".result-container"]
+    
+    E --> K[Form Element]
+    F --> L[Input Field]
+    G --> M[Input Field]
+    H --> N[UI Element]
+    I --> O[UI Element]
+    J --> P[UI Element]
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style K fill:#fff3e0
+    style L fill:#fff3e0
+    style M fill:#fff3e0
+```
 
 ```javascript
 // form fields
@@ -49,14 +123,37 @@ const clearBtn = document.querySelector('.clear-btn');
 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
 - **ਕੈਪਚਰ ਕਰਦਾ ਹੈ** ਫਾਰਮ ਤੱਤਾਂ ਨੂੰ `document.querySelector()` ਨਾਲ CSS ਕਲਾਸ ਸਿਲੈਕਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਬਣਾਉਂਦਾ ਹੈ** ਇਨਪੁਟ ਫੀਲਡਸ ਲਈ ਹਵਾਲੇ ਜਿਵੇਂ ਰੀਜਨ ਨਾਮ ਅਤੇ API ਕੁੰਜੀ
+- **ਬਣਾਉਂਦਾ ਹੈ** ਇਨਪੁਟ ਫੀਲਡਸ ਲਈ ਹਵਾਲੇ ਜਿਵੇਂ ਖੇਤਰ ਦਾ ਨਾਮ ਅਤੇ API ਕੁੰਜੀ
 - **ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** ਕਾਰਬਨ ਵਰਤੋਂ ਡਾਟਾ ਲਈ ਨਤੀਜਾ ਡਿਸਪਲੇ ਤੱਤਾਂ ਨਾਲ ਕਨੈਕਸ਼ਨ
-- **ਸੈਟ ਕਰਦਾ ਹੈ** UI ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚ ਜਿਵੇਂ ਲੋਡਿੰਗ ਇੰਡੀਕੇਟਰ ਅਤੇ ਐਰਰ ਸੁਨੇਹੇ
+- **ਸੈਟ ਕਰਦਾ ਹੈ** UI ਤੱਤਾਂ ਲਈ ਪਹੁੰਚ ਜਿਵੇਂ ਲੋਡਿੰਗ ਇੰਡੀਕੇਟਰ ਅਤੇ ਗਲਤੀ ਸੁਨੇਹੇ
 - **ਸਟੋਰ ਕਰਦਾ ਹੈ** ਹਰ ਤੱਤ ਹਵਾਲੇ ਨੂੰ `const` ਵੈਰੀਏਬਲ ਵਿੱਚ ਜੋ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਆਸਾਨ ਰੀਯੂਜ਼ ਲਈ ਹੈ
 
 ## ਇਵੈਂਟ ਲਿਸਨਰਜ਼ ਸ਼ਾਮਲ ਕਰੋ
 
-ਹੁਣ ਅਸੀਂ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਯੂਜ਼ਰ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਦਾ ਜਵਾਬ ਦੇਣ ਲਈ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਇਵੈਂਟ ਲਿਸਨਰਜ਼ ਤੁਹਾਡੇ ਕੋਡ ਦਾ ਤਰੀਕਾ ਹੈ ਯੂਜ਼ਰ ਇੰਟਰੈਕਸ਼ਨਜ਼ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਦਾ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਸ਼ੁਰੂਆਤੀ ਟੈਲੀਫੋਨ ਐਕਸਚੇਂਜ ਵਿੱਚ ਓਪਰੇਟਰ - ਉਹ ਆਉਣ ਵਾਲੀਆਂ ਕਾਲਾਂ ਲਈ ਸੁਣਦੇ ਸਨ ਅਤੇ ਜਦੋਂ ਕੋਈ ਕਨੈਕਸ਼ਨ ਬਣਾਉਣ ਦੀ ਇੱਛਾ ਕਰਦਾ ਸੀ ਤਾਂ ਸਹੀ ਸਰਕਟਸ ਨੂੰ ਜੁੜਦੇ ਸਨ।
+ਹੁਣ ਅਸੀਂ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਯੂਜ਼ਰ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਦਾ ਜਵਾਬ ਦੇਣ ਲਈ ਬਣਾਵਾਂਗੇ। ਇਵੈਂਟ ਲਿਸਨਰਜ਼ ਤੁਹਾਡੇ ਕੋਡ ਦਾ ਯੂਜ਼ਰ ਇੰਟਰੈਕਸ਼ਨ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਦਾ ਤਰੀਕਾ ਹੈ। ਇਹਨਾਂ ਨੂੰ ਪਹਿਲੇ ਟੈਲੀਫੋਨ ਐਕਸਚੇਂਜ ਵਿੱਚ ਓਪਰੇਟਰਾਂ ਵਾਂਗ ਸੋਚੋ - ਉਹ ਆਉਣ ਵਾਲੀਆਂ ਕਾਲਾਂ ਲਈ ਸੁਣਦੇ ਸਨ ਅਤੇ ਜਦੋਂ ਕੋਈ ਕਨੈਕਸ਼ਨ ਬਣਾਉਣ ਦੀ ਇੱਛਾ ਕਰਦਾ ਸੀ ਤਾਂ ਸਹੀ ਸਰਕਟਸ ਨੂੰ ਜੋੜਦੇ ਸਨ।
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Form
+    participant JavaScript
+    participant API
+    participant Storage
+    
+    User->>Form: Fills out region/API key
+    User->>Form: Clicks submit
+    Form->>JavaScript: Triggers submit event
+    JavaScript->>JavaScript: handleSubmit(e)
+    JavaScript->>Storage: Save user preferences
+    JavaScript->>API: Fetch carbon data
+    API->>JavaScript: Returns data
+    JavaScript->>Form: Update UI with results
+    
+    User->>Form: Clicks clear button
+    Form->>JavaScript: Triggers click event
+    JavaScript->>Storage: Clear saved data
+    JavaScript->>Form: Reset to initial state
+```
 
 ```javascript
 form.addEventListener('submit', (e) => handleSubmit(e));
@@ -64,19 +161,29 @@ clearBtn.addEventListener('click', (e) => reset(e));
 init();
 ```
 
-**ਇਹ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝਣਾ:**
+**ਇਹ ਸੰਕਲਪ ਸਮਝਣਾ:**
 - **ਜੋੜਦਾ ਹੈ** ਇੱਕ ਸਬਮਿਟ ਲਿਸਨਰ ਫਾਰਮ ਨਾਲ ਜੋ ਯੂਜ਼ਰਜ਼ ਦੇ ਐਂਟਰ ਦਬਾਉਣ ਜਾਂ ਸਬਮਿਟ ਕਲਿਕ ਕਰਨ 'ਤੇ ਟ੍ਰਿਗਰ ਹੁੰਦਾ ਹੈ
 - **ਜੋੜਦਾ ਹੈ** ਇੱਕ ਕਲਿਕ ਲਿਸਨਰ ਕਲੀਅਰ ਬਟਨ ਨਾਲ ਫਾਰਮ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਲਈ
 - **ਪਾਸ ਕਰਦਾ ਹੈ** ਇਵੈਂਟ ਆਬਜੈਕਟ `(e)` ਹੈਂਡਲਰ ਫੰਕਸ਼ਨਜ਼ ਨੂੰ ਵਧੇਰੇ ਕੰਟਰੋਲ ਲਈ
-- **ਤੁਰੰਤ ਕਾਲ ਕਰਦਾ ਹੈ** `init()` ਫੰਕਸ਼ਨ ਨੂੰ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ ਸੈਟ ਕਰਨ ਲਈ
+- **ਕਾਲ ਕਰਦਾ ਹੈ** `init()` ਫੰਕਸ਼ਨ ਤੁਰੰਤ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ ਸੈਟ ਕਰਨ ਲਈ
+
+✅ ਇੱਥੇ ਵਰਤੀ ਗਈ ਸ਼ਾਰਟਹੈਂਡ ਐਰੋ ਫੰਕਸ਼ਨ ਸਿੰਟੈਕਸ ਨੂੰ ਨੋਟ ਕਰੋ। ਇਹ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਹੁੰਚ ਪੁਰਾਣੇ ਫੰਕਸ਼ਨ ਐਕਸਪ੍ਰੈਸ਼ਨਜ਼ ਨਾਲੋਂ ਸਾਫ਼ ਹੈ, ਪਰ ਦੋਵੇਂ ਹੀ ਬਰਾਬਰ ਚੰਗੇ ਕੰਮ ਕਰਦੇ ਹਨ!
 
-✅ ਇੱਥੇ ਵਰਤੀ ਗਈ ਸ਼ਾਰਟਹੈਂਡ ਐਰੋ ਫੰਕਸ਼ਨ ਸਿੰਟੈਕਸ ਨੂੰ ਨੋਟ ਕਰੋ। ਇਹ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਹੁੰਚ ਰਵਾਇਤੀ ਫੰਕਸ਼ਨ ਐਕਸਪ੍ਰੈਸ਼ਨਜ਼ ਨਾਲੋਂ ਸਾਫ਼ ਹੈ, ਪਰ ਦੋਵੇਂ ਹੀ ਬਰਾਬਰ ਚੰਗੇ ਕੰਮ ਕਰਦੇ ਹਨ!
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਸਮਝਣਾ**: ਸ਼ੁਰੂਆਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝ ਸਕਦੇ ਹੋ:
+- ✅ ਕਿਵੇਂ `addEventListener` ਯੂਜ਼ਰ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੰਕਸ਼ਨਜ਼ ਨਾਲ ਜੋੜਦਾ ਹੈ
+- ✅ ਕਿਉਂ ਅਸੀਂ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨਜ਼ ਨੂੰ ਇਵੈਂਟ ਆਬਜੈਕਟ `(e)` ਪਾਸ ਕਰਦੇ ਹਾਂ
+- ✅ `submit` ਅਤੇ `click` ਇਵੈਂਟਸ ਵਿੱਚ ਅੰਤਰ ਪਛਾਣੋ
+- ✅ `init()` ਫੰਕਸ਼ਨ ਕਦੋਂ ਚਲਦਾ ਹੈ ਅਤੇ ਕਿਉਂ
+
+**ਤੁਰੰਤ ਸਵਾਲ-ਜਵਾਬ**: ਜੇ ਤੁਸੀਂ ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਵਿੱਚ `e.preventDefault()` ਭੁੱਲ ਜਾਓ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
+*ਜਵਾਬ: ਪੇਜ ਰੀਲੋਡ ਹੋ ਜਾਵੇਗਾ, ਸਾਰੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਥਿਤੀ ਖਤਮ ਹੋ ਜਾਵੇਗੀ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਵਿੱਚ ਰੁਕਾਵਟ ਆਵੇਗੀ*
 
 ## ਸ਼ੁਰੂਆਤ ਅਤੇ ਰੀਸੈਟ ਫੰਕਸ਼ਨ ਬਣਾਓ
 
-ਆਓ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਸ਼ੁਰੂਆਤੀ ਤਰਕ ਬਣਾਈਏ। `init()` ਫੰਕਸ਼ਨ ਇੱਕ ਜਹਾਜ਼ ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਦੀ ਤਰ੍ਹਾਂ ਹੈ ਜੋ ਆਪਣੇ ਸਾਜ਼ੋ-ਸਾਮਾਨ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ - ਇਹ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦਾ ਨਿਰਧਾਰਨ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਅਨੁਸਾਰ ਇੰਟਰਫੇਸ ਨੂੰ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ। ਇਹ ਜਾਂਚਦਾ ਹੈ ਕਿ ਕਿਸੇ ਨੇ ਪਹਿਲਾਂ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੀਆਂ ਪਿਛਲੀ ਸੈਟਿੰਗਜ਼ ਨੂੰ ਲੋਡ ਕਰਦਾ ਹੈ।
+ਆਓ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਸ਼ੁਰੂਆਤੀ ਤਰਕ ਬਣਾਈਏ। `init()` ਫੰਕਸ਼ਨ ਇੱਕ ਜਹਾਜ਼ ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਵਾਂਗ ਹੈ ਜੋ ਆਪਣੇ ਸਾਜ਼ੋ-ਸਾਮਾਨ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ - ਇਹ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦਾ ਨਿਰਧਾਰਨ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਅਨੁਸਾਰ ਇੰਟਰਫੇਸ ਨੂੰ ਸਮਰੂਪ ਕਰਦਾ ਹੈ। ਇਹ ਜਾਂਚਦਾ ਹੈ ਕਿ ਕਿਸੇ ਨੇ ਪਹਿਲਾਂ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ ਜਾਂ ਨਹੀਂ ਅਤੇ ਉਹਨਾਂ ਦੀਆਂ ਪਿਛਲੀ ਸੈਟਿੰਗਾਂ ਨੂੰ ਲੋਡ ਕਰਦਾ ਹੈ।
 
-`reset()` ਫੰਕਸ਼ਨ ਯੂਜ਼ਰਜ਼ ਨੂੰ ਇੱਕ ਤਾਜ਼ਾ ਸ਼ੁਰੂਆਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ - ਜਿਵੇਂ ਵਿਗਿਆਨੀ ਆਪਣੇ ਸਾਜ਼ੋ-ਸਾਮਾਨ ਨੂੰ ਪ੍ਰਯੋਗਾਂ ਦੇ ਵਿਚਕਾਰ ਰੀਸੈਟ ਕਰਦੇ ਹਨ ਤਾਂ ਕਿ ਸਾਫ਼ ਡਾਟਾ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ।
+`reset()` ਫੰਕਸ਼ਨ ਯੂਜ਼ਰਜ਼ ਨੂੰ ਇੱਕ ਨਵਾਂ ਸ਼ੁਰੂਆਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ - ਜਿਵੇਂ ਵਿਗਿਆਨੀ ਆਪਣੇ ਸਾਜ਼ੋ-ਸਾਮਾਨ ਨੂੰ ਪ੍ਰਯੋਗਾਂ ਦੇ ਵਿਚਕਾਰ ਰੀਸੈਟ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਸਾਫ਼ ਡਾਟਾ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ।
 
 ```javascript
 function init() {
@@ -113,41 +220,65 @@ function reset(e) {
 ```
 
 **ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ ਇਸਨੂੰ ਤੋੜ ਕੇ ਸਮਝਣਾ:**
-- **ਰੀਟਰੀਵ ਕਰਦਾ ਹੈ** ਸਟੋਰ ਕੀਤੀ API ਕੁੰਜੀ ਅਤੇ ਰੀਜਨ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਲੋਕਲ ਸਟੋਰੇਜ ਤੋਂ
-- **ਚੈੱਕ ਕਰਦਾ ਹੈ** ਕਿ ਇਹ ਪਹਿਲੀ ਵਾਰ ਦਾ ਯੂਜ਼ਰ ਹੈ (ਕੋਈ ਸਟੋਰ ਕੀਤੇ ਪ੍ਰਮਾਣ ਨਹੀਂ) ਜਾਂ ਵਾਪਸੀ ਕਰਨ ਵਾਲਾ ਯੂਜ਼ਰ
-- **ਦਿਖਾਉਂਦਾ ਹੈ** ਨਵੇਂ ਯੂਜ਼ਰਜ਼ ਲਈ ਸੈਟਅਪ ਫਾਰਮ ਅਤੇ ਹੋਰ ਇੰਟਰਫੇਸ ਤੱਤਾਂ ਨੂੰ ਛੁਪਾਉਂਦਾ ਹੈ
+- **ਰੀਟਰੀਵ ਕਰਦਾ ਹੈ** ਸਟੋਰ ਕੀਤੀ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਲੋਕਲ ਸਟੋਰੇਜ ਤੋਂ
+- **ਜਾਂਚਦਾ ਹੈ** ਕਿ ਇਹ ਪਹਿਲੀ ਵਾਰ ਦਾ ਯੂਜ਼ਰ ਹੈ (ਕੋਈ ਸਟੋਰ ਕੀਤੇ ਪ੍ਰਮਾਣ ਨਹੀਂ) ਜਾਂ ਵਾਪਸੀ ਕਰਨ ਵਾਲਾ ਯੂਜ਼ਰ
+- **ਦਿਖਾਉਂਦਾ ਹੈ** ਨਵੇਂ ਯੂਜ਼ਰਜ਼ ਲਈ ਸੈਟਅੱਪ ਫਾਰਮ ਅਤੇ ਹੋਰ ਇੰਟਰਫੇਸ ਤੱਤਾਂ ਨੂੰ ਛੁਪਾਉਂਦਾ ਹੈ
 - **ਆਟੋਮੈਟਿਕ ਲੋਡ ਕਰਦਾ ਹੈ** ਸਟੋਰ ਕੀਤੇ ਡਾਟਾ ਨੂੰ ਵਾਪਸੀ ਕਰਨ ਵਾਲੇ ਯੂਜ਼ਰਜ਼ ਲਈ ਅਤੇ ਰੀਸੈਟ ਵਿਕਲਪ ਦਿਖਾਉਂਦਾ ਹੈ
-- **ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਸਥਿਤੀ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ** ਉਪਲਬਧ ਡਾਟਾ ਦੇ ਅਧਾਰ 'ਤੇ
+- **ਪ੍ਰਬੰਧ ਕਰਦਾ ਹੈ** ਉਪਲਬਧ ਡਾਟਾ ਦੇ ਅਧਾਰ 'ਤੇ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਸਥਿਤੀ
 
 **ਲੋਕਲ ਸਟੋਰੇਜ ਬਾਰੇ ਮੁੱਖ ਸੰਕਲਪ:**
 - **ਡਾਟਾ ਨੂੰ ਸਥਿਰ ਕਰਦਾ ਹੈ** ਬ੍ਰਾਊਜ਼ਰ ਸੈਸ਼ਨਜ਼ ਦੇ ਵਿਚਕਾਰ (ਸੈਸ਼ਨ ਸਟੋਰੇਜ ਦੇ ਵਿਰੁੱਧ)
 - **ਡਾਟਾ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ** ਕੁੰਜੀ-ਮੁੱਲ ਜੋੜਿਆਂ ਦੇ ਰੂਪ ਵਿੱਚ `getItem()` ਅਤੇ `setItem()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਨਾਲ ਵਾਪਸ ਕਰਦਾ ਹੈ** `null` ਜਦੋਂ ਕਿਸੇ ਦਿੱਤੇ ਗਏ ਕੁੰਜੀ ਲਈ ਕੋਈ ਡਾਟਾ ਮੌਜੂਦ ਨਹੀਂ ਹੁੰਦਾ
-- **ਇੱਕ ਸਧਾਰਨ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਅਤੇ ਸੈਟਿੰਗਜ਼ ਨੂੰ ਯਾਦ ਰੱਖਣ ਲਈ
+- **ਨਾਲ ਵਾਪਸ ਕਰਦਾ ਹੈ** `null` ਜਦੋਂ ਕਿਸੇ ਦਿੱਤੀ ਕੁੰਜੀ ਲਈ ਕੋਈ ਡਾਟਾ ਮੌਜੂਦ ਨਹੀਂ ਹੁੰਦਾ
+- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਅਤੇ ਸੈਟਿੰਗਾਂ ਨੂੰ ਯਾਦ ਰੱਖਣ ਦਾ ਸਧਾਰਨ ਤਰੀਕਾ
 
-> 💡 **ਬ੍ਰਾਊਜ਼ਰ ਸਟੋਰੇਜ ਨੂੰ ਸਮਝਣਾ**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸਥਿਰ ਯਾਦਸ਼ਕਤੀ ਦੇਣ ਵਰਗਾ ਹੈ। ਸੋਚੋ ਕਿ ਕਿਵੇਂ ਪ੍ਰਾਚੀਨ ਅਲੈਕਸੈਂਡਰੀਆ ਦੀ ਲਾਇਬ੍ਰੇਰੀ ਨੇ ਸਕਰੋਲਜ਼ ਨੂੰ ਸਟੋਰ ਕੀਤਾ - ਜਾਣਕਾਰੀ ਉਪਲਬਧ ਰਹੀ ਜਦੋਂ ਵਿਦਵਾਨ ਛੱਡ ਕੇ ਵਾਪਸ ਆਏ।
+> 💡 **ਬ੍ਰਾਊਜ਼ਰ ਸਟੋਰੇਜ ਨੂੰ ਸਮਝਣਾ**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸਥਿਰ ਯਾਦਸ਼ਕਤੀ ਦੇਣ ਵਾਂਗ ਹੈ। ਸੋਚੋ ਕਿ ਕਿਵੇਂ ਪ੍ਰਾਚੀਨ ਅਲੈਕਜ਼ੈਂਡਰੀਆ ਦੀ ਲਾਇਬ੍ਰੇਰੀ ਨੇ ਸਕਰੋਲਜ਼ ਨੂੰ ਸਟੋਰ ਕੀਤਾ - ਜਾਣਕਾਰੀ ਉਪਲਬਧ ਰਹੀ ਜਦੋਂ ਵਿਦਵਾਨ ਛੱਡ ਕੇ ਵਾਪਸ ਆਏ।
 >
 > **ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ:**
 > - **ਡਾਟਾ ਨੂੰ ਸਥਿਰ ਕਰਦਾ ਹੈ** ਭਾਵੇਂ ਤੁਸੀਂ ਆਪਣਾ ਬ੍ਰਾਊਜ਼ਰ ਬੰਦ ਕਰ ਦਿਓ
-> - **ਕੰਪਿਊਟਰ ਰੀਸਟਾਰਟ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਕਰੈਸ਼ ਤੋਂ ਬਾਅਦ ਵੀ ਬਚਦਾ ਹੈ**
+> - **ਕੰਪਿਊਟਰ ਰੀਸਟਾਰਟ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਕਰੈਸ਼ ਤੋਂ ਬਚਦਾ ਹੈ**
 > - **ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਲਈ ਵੱਡੀ ਸਟੋਰੇਜ ਸਪੇਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
 > - **ਨੈਟਵਰਕ ਦੇਰੀ ਤੋਂ ਬਿਨਾਂ ਤੁਰੰਤ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
 
-> **ਮਹੱਤਵਪੂਰਨ ਨੋਟ**: ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦਾ ਆਪਣਾ ਅਲੱਗ ਲੋਕਲ ਸਟੋਰੇਜ ਹੁੰਦਾ ਹੈ ਜੋ ਰੈਗੂਲਰ ਵੈਬ ਪੇਜਾਂ ਤੋਂ ਵੱਖਰਾ ਹੁੰਦਾ ਹੈ। ਇਹ ਸੁਰੱਖਿਆ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਅਤੇ ਹੋਰ ਵੈਬਸਾਈਟਾਂ ਨਾਲ ਟਕਰਾਅ ਨੂੰ ਰੋਕਦਾ ਹੈ।
-
-ਤੁਹਾਡੇ ਸਟੋਰ ਕੀਤੇ ਡਾਟਾ ਨੂੰ ਦੇਖਣ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ (F12) ਖੋਲ੍ਹੋ, **Application** ਟੈਬ 'ਤੇ ਜਾਓ, ਅਤੇ **Local Storage** ਸੈਕਸ਼ਨ ਨੂੰ ਵਧਾਓ।
+> **ਮਹੱਤਵਪੂਰਨ ਨੋਟ**: ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦਾ ਆਪਣਾ ਅਲੱਗ ਲੋਕਲ ਸਟੋਰੇਜ ਹੁੰਦਾ ਹੈ ਜੋ ਆਮ ਵੈਬ ਪੇਜਾਂ ਤੋਂ ਵੱਖਰਾ ਹੁੰਦਾ ਹੈ। ਇਹ ਸੁਰੱਖਿਆ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਅਤੇ ਹੋਰ ਵੈਬਸਾਈਟਾਂ ਨਾਲ ਟਕਰਾਅ ਨੂੰ ਰੋਕਦਾ ਹੈ।
+
+ਤੁਹਾਡੇ ਸਟੋਰ ਕੀਤੇ ਡਾਟਾ ਨੂੰ ਦੇਖਣ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ (F12) ਖੋਲ੍ਹੋ, **ਐਪਲੀਕੇਸ਼ਨ** ਟੈਬ 'ਤੇ ਜਾਓ, ਅਤੇ **ਲੋਕਲ ਸਟੋਰੇਜ** ਸੈਕਸ਼ਨ ਨੂੰ ਵਧਾਓ।
+
+```mermaid
+stateDiagram-v2
+    [*] --> CheckStorage: Extension starts
+    CheckStorage --> FirstTime: No stored data
+    CheckStorage --> Returning: Data found
+    
+    FirstTime --> ShowForm: Display setup form
+    ShowForm --> UserInput: User enters data
+    UserInput --> SaveData: Store in localStorage
+    SaveData --> FetchAPI: Get carbon data
+    
+    Returning --> LoadData: Read from localStorage
+    LoadData --> FetchAPI: Get carbon data
+    
+    FetchAPI --> ShowResults: Display data
+    ShowResults --> UserAction: User interacts
+    
+    UserAction --> Reset: Clear button clicked
+    UserAction --> ShowResults: View data
+    
+    Reset --> ClearStorage: Remove saved data
+    ClearStorage --> FirstTime: Back to setup
+```
 
 ![ਲੋਕਲ ਸਟੋਰੇਜ ਪੈਨ](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.pa.png)
 
-> ⚠️ **ਸੁਰੱਖਿਆ ਵਿਚਾਰ**: ਪ੍ਰੋਡਕਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਵਿੱਚ, LocalStorage ਵਿੱਚ API ਕੁੰਜੀਆਂ ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਸੁਰੱਖਿਆ ਖਤਰੇ ਪੈਦਾ ਕਰਦਾ ਹੈ ਕਿਉਂਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਸ ਡਾਟਾ ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦਾ ਹੈ। ਸਿੱਖਣ ਦੇ ਮਕਸਦ ਲਈ, ਇਹ ਪਹੁੰਚ ਠੀਕ ਹੈ, ਪਰ ਅਸਲ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਨੂੰ ਸੰਵੇਦਨਸ਼ੀਲ ਪ੍ਰਮਾਣਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਸਰਵਰ-ਸਾਈਡ ਸਟੋਰੇਜ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
+> ⚠️ **ਸੁਰੱਖਿਆ ਵਿਚਾਰ**: ਉਤਪਾਦਨ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਵਿੱਚ, LocalStorage ਵਿੱਚ API ਕੁੰਜੀਆਂ ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਸੁਰੱਖਿਆ ਖਤਰੇ ਪੈਦਾ ਕਰਦਾ ਹੈ ਕਿਉਂਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਸ ਡਾਟਾ ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦਾ ਹੈ। ਸਿੱਖਣ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ, ਇਹ ਪਹੁੰਚ ਠੀਕ ਹੈ, ਪਰ ਅਸਲ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਨੂੰ ਸੰਵੇਦਨਸ਼ੀਲ ਪ੍ਰਮਾਣਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਸਰਵਰ-ਸਾਈਡ ਸਟੋਰੇਜ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
 
 ## ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਨੂੰ ਹੈਂਡਲ ਕਰੋ
 
-ਹੁਣ ਅਸੀਂ ਹੈਂਡਲ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਜਦੋਂ ਕੋਈ ਤੁਹਾਡਾ ਫਾਰਮ ਸਬਮਿਟ ਕਰਦਾ ਹੈ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ। ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ, ਬ੍ਰਾਊਜ਼ਰ ਫਾਰਮ ਸਬਮਿਟ ਕਰਨ 'ਤੇ ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕਰਦੇ ਹਨ, ਪਰ ਅਸੀਂ ਇਸ ਵਿਹਾਰ ਨੂੰ ਰੋਕ ਕੇ ਇੱਕ ਸੁਗਮ ਅਨੁਭਵ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ।
+ਹੁਣ ਅਸੀਂ ਹੈਂਡਲ ਕਰਾਂਗੇ ਕਿ ਜਦੋਂ ਕੋਈ ਤੁਹਾਡਾ ਫਾਰਮ ਸਬਮਿਟ ਕਰਦਾ ਹੈ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ। ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ, ਬ੍ਰਾਊਜ਼ਰ ਫਾਰਮ ਸਬਮਿਟ ਕੀਤੇ ਜਾਣ 'ਤੇ ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕਰਦੇ ਹਨ, ਪਰ ਅਸੀਂ ਇਸ ਵਿਹਾਰ ਨੂੰ ਰੋਕਾਂਗੇ ਤਾਂ ਜੋ ਇੱਕ ਸੁਗਮ ਅਨੁਭਵ ਬਣਾਇਆ ਜਾ ਸਕੇ।
 
-ਇਹ ਪਹੁੰਚ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਸਪੇਸਕ੍ਰਾਫਟ ਸੰਚਾਰ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ - ਹਰ ਟ੍ਰਾਂਸਮਿਸ਼ਨ ਲਈ ਸਿਸਟਮ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਦੀ ਬਜਾਏ, ਉਹ ਨਵੀਂ ਜਾਣਕਾਰੀ ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰਦੇ ਹੋਏ ਲਗਾਤਾਰ ਕਾਰਵਾਈ ਜਾਰੀ ਰੱਖਦੇ ਹਨ।
+ਇਹ ਪਹੁੰਚ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਸਪੇਸਕ੍ਰਾਫਟ ਸੰਚਾਰ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ - ਹਰ ਟ੍ਰਾਂਸਮਿਸ਼ਨ ਲਈ ਪੂਰੇ ਸਿਸਟਮ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਦੀ ਬਜਾਏ, ਉਹ ਨਵੀਂ ਜਾਣਕਾਰੀ ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰਦੇ ਹੋਏ ਲਗਾਤਾਰ ਕਾਰਵਾਈ ਜਾਰੀ ਰੱਖਦੇ ਹਨ।
 
-ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਇਵੈਂਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਅਤੇ ਯੂਜ਼ਰ ਦੇ ਇਨਪੁਟ ਨੂੰ ਕੱਢਦਾ ਹੈ:
+ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਇਵੈਂਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਅਤੇ ਯੂਜ਼ਰ ਦਾ ਇਨਪੁਟ ਕੱਢਦਾ ਹੈ:
 
 ```javascript
 function handleSubmit(e) {
@@ -158,15 +289,15 @@ function handleSubmit(e) {
 
 **ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**
 - **ਡਿਫਾਲਟ ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਵਿਹਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ** ਜੋ ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰਦਾ
-- **ਯੂਜ਼ਰ ਇਨਪੁਟ ਮੁੱਲਾਂ ਨੂੰ ਕੱਢਦਾ ਹੈ** API ਕੁੰਜੀ ਅਤੇ ਰੀਜਨ ਫੀਲਡਸ ਤੋਂ
+- **ਯੂਜ਼ਰ ਇਨਪੁਟ ਮੁੱਲਾਂ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ** API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਫੀਲਡਸ ਤੋਂ
 - **ਫਾਰਮ ਡਾਟਾ ਨੂੰ `setUpUser()` ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕਰਦਾ ਹੈ** ਪ੍ਰੋਸੈਸਿੰਗ ਲਈ
 - **ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਵਿਹਾਰ ਨੂੰ ਸਥਿਰ ਰੱਖਦਾ ਹੈ** ਪੇਜ ਰੀਲੋਡ ਤੋਂ ਬਚ ਕੇ
 
-✅ ਯਾਦ ਰੱਖੋ ਕਿ ਤੁਹਾਡੇ HTML ਫਾਰਮ ਫੀਲਡਸ ਵਿੱਚ `required` ਐਟ੍ਰਿਬਿਊਟ ਸ਼ਾਮਲ ਹੈ, ਇਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਯੂਜ਼ਰਜ਼ ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਚਲਾਉਣ ਤੋਂ ਪਹਿਲਾਂ API ਕੁੰਜੀ ਅਤੇ ਰੀਜਨ ਦੋਵੇਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
+✅ ਯਾਦ ਰੱਖੋ ਕਿ ਤੁਹਾਡੇ HTML ਫਾਰਮ ਫੀਲਡਸ ਵਿੱਚ `required` ਐਟ੍ਰਿਬਿਊਟ ਸ਼ਾਮਲ ਹੈ, ਇਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਯੂਜ਼ਰਜ਼ ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਚਲਣ ਤੋਂ ਪਹਿਲਾਂ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਦੋਵੇਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
 
 ## ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਸੈਟ ਕਰੋ
 
-`setUpUser` ਫੰਕਸ਼ਨ ਯੂਜ਼ਰ ਦੇ ਪ੍ਰਮਾਣਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਅਤੇ ਪਹਿਲੀ API ਕਾਲ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਹੈ। ਇਹ ਸੈਟਅਪ ਤੋਂ ਨਤੀਜੇ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਸੁਗਮ ਤਬਦੀਲੀ ਬਣਾਉਂਦਾ ਹੈ।
+`setUpUser` ਫੰਕਸ਼ਨ ਯੂਜ਼ਰ ਦੇ ਪ੍ਰਮਾਣਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਅਤੇ ਪਹਿਲੀ API ਕਾਲ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਹੈ। ਇਹ ਸੈਟਅੱਪ ਤੋਂ ਨਤੀਜੇ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਸੁਗਮ ਤਬਦੀਲੀ ਬਣਾਉਂਦਾ ਹੈ।
 
 ```javascript
 function setUpUser(apiKey, regionName) {
@@ -185,24 +316,147 @@ function setUpUser(apiKey, regionName) {
 ```
 
 **ਕਦਮ-ਦਰ-ਕਦਮ, ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- **API ਕੁੰਜੀ ਅਤੇ ਰੀਜਨ ਨਾਮ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ** ਭਵਿੱਖ ਦੀ ਵਰਤੋਂ ਲਈ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ
-- **ਲੋਡਿੰਗ ਇੰਡੀਕੇਟਰ ਦਿਖਾਉਂਦਾ ਹੈ** ਯੂਜ਼ਰਜ਼ ਨੂੰ ਸੂਚਿਤ ਕਰਨ ਲਈ ਕਿ ਡਾਟਾ ਲਿਆ ਜਾ ਰਿਹਾ ਹੈ
-- **ਪਿਛਲੇ ਐਰਰ ਸੁਨੇਹੇ ਨੂੰ ਕਲੀਅਰ ਕਰਦਾ ਹੈ** ਡਿਸਪਲੇ ਤੋਂ
-- **ਕਲੀਅਰ ਬਟਨ ਦਿਖਾਉਂਦਾ ਹੈ** ਯੂਜ਼ਰਜ਼ ਲਈ ਜੋ ਬਾਅਦ ਵਿੱਚ ਆਪਣੀਆਂ ਸੈਟਿੰਗਜ਼ ਰੀਸੈਟ ਕਰ ਸਕਦੇ ਹਨ
-- **API ਕਾਲ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** ਹਕੀਕਤੀ ਕਾਰਬਨ ਵਰਤੋਂ ਡਾਟਾ ਲੈਣ ਲਈ
-
-ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਸਧਾਰਨ ਯੂਜ਼ਰ ਅਨੁਭਵ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਇੱਕ ਸਹਿ-ਸੰਚਾਲਿਤ ਕਾਰਵਾਈ ਵਿੱਚ ਡਾਟਾ ਸਥਿਰਤਾ ਅਤੇ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਅਪਡੇਟ ਦੋਵੇਂ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ।
-
-## ਕਾਰਬਨ ਵਰਤੋਂ ਡਾਟਾ ਦਿਖਾਓ
-
-ਹੁਣ ਅਸੀਂ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ APIs ਰਾਹੀਂ ਬਾਹਰੀ ਡਾਟਾ ਸਰੋਤਾਂ ਨਾਲ ਜੋੜਨ ਜਾ ਰਹੇ ਹਾਂ। ਇਹ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਇੱਕ ਸਟੈਂਡਅਲੋਨ ਟੂਲ ਤੋਂ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਬਦਲਦਾ ਹੈ ਜੋ ਇੰਟਰਨੈਟ ਤੋਂ ਰੀਅਲ
-ਤੁਸੀਂ ਇਸ ਪਾਠ ਵਿੱਚ LocalStorage ਅਤੇ APIs ਬਾਰੇ ਸਿੱਖਿਆ, ਜੋ ਕਿ ਪੇਸ਼ੇਵਰ ਵੈੱਬ ਡਿਵੈਲਪਰ ਲਈ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਹਨ। ਕੀ ਤੁਸੀਂ ਸੋਚ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਦੋ ਚੀਜ਼ਾਂ ਇਕੱਠੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ? ਸੋਚੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਵੈੱਬਸਾਈਟ ਨੂੰ ਕਿਵੇਂ ਡਿਜ਼ਾਈਨ ਕਰੋਗੇ ਜੋ API ਦੁਆਰਾ ਵਰਤਣ ਲਈ ਆਈਟਮਾਂ ਨੂੰ ਸਟੋਰ ਕਰੇ।
+- **API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਦਾ ਨਾਮ ਸਟੋਰ ਕਰਦਾ ਹੈ** ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ
+**ਵੇਰਵਾ:** ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਵਿੱਚ ਗਲਤੀ ਸੰਭਾਲਨ ਵਿੱਚ ਸੁਧਾਰ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਫੀਚਰ ਸ਼ਾਮਲ ਕਰਕੇ ਇਸਨੂੰ ਬਿਹਤਰ ਬਣਾਓ। ਇਹ ਚੁਣੌਤੀ ਤੁਹਾਨੂੰ APIs, ਸਥਾਨਕ ਸਟੋਰੇਜ, ਅਤੇ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ 'ਤੇ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਅਭਿਆਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗੀ।
+
+**ਪ੍ਰੋੰਪਟ:** displayCarbonUsage ਫੰਕਸ਼ਨ ਦਾ ਇੱਕ ਬਿਹਤਰ ਸੰਸਕਰਣ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੇ: 1) API ਕਾਲਾਂ ਦੇ ਫੇਲ੍ਹ ਹੋਣ 'ਤੇ exponential backoff ਨਾਲ ਰੀਟ੍ਰਾਈ ਮਕੈਨਿਜ਼ਮ, 2) API ਕਾਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਰੀਜਨ ਕੋਡ ਲਈ ਇਨਪੁਟ ਵੈਲੀਡੇਸ਼ਨ, 3) ਲੋਡਿੰਗ ਐਨੀਮੇਸ਼ਨ ਨਾਲ ਪ੍ਰੋਗਰੈਸ ਇੰਡਿਕੇਟਰ, 4) localStorage ਵਿੱਚ API ਜਵਾਬਾਂ ਨੂੰ 30 ਮਿੰਟਾਂ ਲਈ ਮਿਆਦ ਸਮੇਤ ਕੈਸ਼ ਕਰਨਾ, ਅਤੇ 5) ਪਿਛਲੇ API ਕਾਲਾਂ ਤੋਂ ਇਤਿਹਾਸਕ ਡਾਟਾ ਦਿਖਾਉਣ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ। ਸਾਰੇ ਫੰਕਸ਼ਨ ਪੈਰਾਮੀਟਰ ਅਤੇ ਰਿਟਰਨ ਟਾਈਪਸ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਕਰਨ ਲਈ TypeScript-ਸ਼ੈਲੀ JSDoc ਟਿੱਪਣੀਆਂ ਸ਼ਾਮਲ ਕਰੋ।
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
+
+## 🚀 ਚੁਣੌਤੀ
+
+APIs ਦੀ ਸਮਝ ਨੂੰ ਵਧਾਉਣ ਲਈ ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਉਪਲਬਧ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਤ APIs ਦੀ ਖੋਜ ਕਰੋ। ਇਨ੍ਹਾਂ APIs ਵਿੱਚੋਂ ਇੱਕ ਚੁਣੋ ਅਤੇ ਇੱਕ ਛੋਟਾ ਡੈਮੋ ਬਣਾਓ:
+
+- [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - ਯੂਜ਼ਰ ਦਾ ਮੌਜੂਦਾ ਸਥਾਨ ਪ੍ਰਾਪਤ ਕਰੋ
+- [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - ਡੈਸਕਟਾਪ ਨੋਟੀਫਿਕੇਸ਼ਨ ਭੇਜੋ
+- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - ਇੰਟਰਐਕਟਿਵ ਡ੍ਰੈਗ ਇੰਟਰਫੇਸ ਬਣਾਓ
+- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - ਸਥਾਨਕ ਸਟੋਰੇਜ ਤਕਨੀਕਾਂ
+- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - XMLHttpRequest ਦਾ ਆਧੁਨਿਕ ਵਿਕਲਪ
+
+**ਖੋਜ ਦੇ ਸਵਾਲ:**  
+- ਇਹ API ਕਿਹੜੀਆਂ ਅਸਲ ਦੁਨੀਆ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਦਾ ਹੱਲ ਦਿੰਦੀ ਹੈ?  
+- API ਗਲਤੀਆਂ ਅਤੇ ਐਜ ਕੇਸਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਦੀ ਹੈ?  
+- ਇਸ API ਨੂੰ ਵਰਤਣ ਸਮੇਂ ਕਿਹੜੀਆਂ ਸੁਰੱਖਿਆ ਸੰਬੰਧੀ ਚਿੰਤਾਵਾਂ ਹਨ?  
+- ਇਹ API ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਕਿੰਨੀ ਵਿਆਪਕ ਹੈ?
+
+ਖੋਜ ਦੇ ਬਾਅਦ, ਇਹ ਪਛਾਣੋ ਕਿ ਇੱਕ API ਨੂੰ ਡਿਵੈਲਪਰ-ਫ੍ਰੈਂਡਲੀ ਅਤੇ ਭਰੋਸੇਮੰਦ ਬਣਾਉਣ ਵਾਲੇ ਗੁਣ ਕੀ ਹਨ।
+
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼
+
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/26)
+
+## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ-ਅਧਿਐਨ
+
+ਤੁਹਾਨੂੰ ਇਸ ਪਾਠ ਵਿੱਚ LocalStorage ਅਤੇ APIs ਬਾਰੇ ਸਿੱਖਣ ਨੂੰ ਮਿਲਿਆ, ਜੋ ਕਿ ਪੇਸ਼ੇਵਰ ਵੈੱਬ ਡਿਵੈਲਪਰ ਲਈ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਹਨ। ਕੀ ਤੁਸੀਂ ਸੋਚ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਦੋ ਚੀਜ਼ਾਂ ਇਕੱਠੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ? ਸੋਚੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਵੈੱਬਸਾਈਟ ਨੂੰ ਕਿਵੇਂ ਡਿਜ਼ਾਈਨ ਕਰੋਗੇ ਜੋ API ਦੁਆਰਾ ਵਰਤਣ ਲਈ ਆਈਟਮ ਸਟੋਰ ਕਰੇ।
+
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**  
+- [ ] DevTools ਦੇ Application ਟੈਬ ਨੂੰ ਖੋਲ੍ਹੋ ਅਤੇ ਕਿਸੇ ਵੀ ਵੈੱਬਸਾਈਟ 'ਤੇ localStorage ਦੀ ਜਾਂਚ ਕਰੋ  
+- [ ] ਇੱਕ ਸਧਾਰਨ HTML ਫਾਰਮ ਬਣਾਓ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ  
+- [ ] localStorage ਵਿੱਚ ਡਾਟਾ ਸਟੋਰ ਅਤੇ ਰੀਟ੍ਰੀਵ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ  
+- [ ] Network ਟੈਬ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਾਰਮ ਡਾਟਾ ਦੀ ਜਾਂਚ ਕਰੋ  
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**  
+- [ ] ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਫਾਰਮ ਹੈਂਡਲਿੰਗ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝੋ  
+- [ ] ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਫਾਰਮ ਬਣਾਓ ਜੋ ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਨੂੰ ਸੇਵ ਕਰਦਾ ਹੈ  
+- [ ] ਕਲਾਇੰਟ-ਸਾਈਡ ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਮਦਦਗਾਰ ਗਲਤੀ ਸੁਨੇਹਿਆਂ ਨਾਲ ਲਾਗੂ ਕਰੋ  
+- [ ] ਐਕਸਟੈਂਸ਼ਨ ਡਾਟਾ ਸਟੋਰੇਜ ਲਈ chrome.storage API ਦੀ ਵਰਤੋਂ ਦਾ ਅਭਿਆਸ ਕਰੋ  
+- [ ] ਇੱਕ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਓ ਜੋ ਸੇਵ ਕੀਤੇ ਯੂਜ਼ਰ ਸੈਟਿੰਗਾਂ ਨੂੰ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦਿੰਦਾ ਹੈ  
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣ ਦਾ ਯੋਜਨਾ**  
+- [ ] ਫਾਰਮ ਫੰਕਸ਼ਨਲਿਟੀ ਨਾਲ ਇੱਕ ਪੂਰੀ-ਫੀਚਰਡ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪੂਰਾ ਕਰੋ  
+- [ ] ਵੱਖ-ਵੱਖ ਸਟੋਰੇਜ ਵਿਕਲਪਾਂ: local, sync, ਅਤੇ session storage ਵਿੱਚ ਮਾਹਰ ਬਣੋ  
+- [ ] autocomplete ਅਤੇ validation ਵਰਗੇ ਉੱਨਤ ਫਾਰਮ ਫੀਚਰ ਲਾਗੂ ਕਰੋ  
+- [ ] ਯੂਜ਼ਰ ਡਾਟਾ ਲਈ import/export ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕਰੋ  
+- [ ] ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਪੂਰੀ ਜਾਂਚ ਕਰੋ  
+- [ ] ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਗਲਤੀ ਸੰਭਾਲਨ ਨੂੰ ਪਾਲਿਸ਼ ਕਰੋ  
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਵੈੱਬ API ਮਾਹਰ ਬਣਾਉਣ ਦਾ ਯੋਜਨਾ**  
+- [ ] ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰ ਸਟੋਰੇਜ APIs ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ  
+- [ ] offline-first ਵਿਕਾਸ ਪੈਟਰਨਾਂ ਬਾਰੇ ਸਿੱਖੋ  
+- [ ] ਡਾਟਾ ਸਟੋਰੇਜ ਵਿੱਚ ਸ਼ਾਮਲ ਖੁੱਲੇ ਸਰੋਤ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ  
+- [ ] ਗੋਪਨੀਯਤਾ-ਕੇਂਦਰਿਤ ਵਿਕਾਸ ਅਤੇ GDPR ਅਨੁਕੂਲਤਾ ਵਿੱਚ ਮਾਹਰ ਬਣੋ  
+- [ ] ਫਾਰਮ ਹੈਂਡਲਿੰਗ ਅਤੇ ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਲਈ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਲਾਇਬ੍ਰੇਰੀਆਂ ਬਣਾਓ  
+- [ ] ਵੈੱਬ APIs ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਵਿਕਾਸ ਬਾਰੇ ਗਿਆਨ ਸਾਂਝਾ ਕਰੋ  
+
+## 🎯 ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਵਿਕਾਸ ਮਾਹਰ ਬਣਾਉਣ ਦਾ ਸਮਾਂ-ਰੇਖਾ  
+
+```mermaid
+timeline
+    title API Integration & Storage Learning Progression
+    
+    section DOM Fundamentals (15 minutes)
+        Element References: querySelector mastery
+                          : Event listener setup
+                          : State management basics
+        
+    section Local Storage (20 minutes)
+        Data Persistence: Key-value storage
+                        : Session management
+                        : User preference handling
+                        : Storage inspection tools
+        
+    section Form Handling (25 minutes)
+        User Input: Form validation
+                  : Event prevention
+                  : Data extraction
+                  : UI state transitions
+        
+    section API Integration (35 minutes)
+        External Communication: HTTP requests
+                              : Authentication patterns
+                              : JSON data parsing
+                              : Response handling
+        
+    section Async Programming (40 minutes)
+        Modern JavaScript: Promise handling
+                         : Async/await patterns
+                         : Error management
+                         : Non-blocking operations
+        
+    section Error Handling (30 minutes)
+        Robust Applications: Try/catch blocks
+                           : User-friendly messages
+                           : Graceful degradation
+                           : Debugging techniques
+        
+    section Advanced Patterns (1 week)
+        Professional Development: Caching strategies
+                                : Rate limiting
+                                : Retry mechanisms
+                                : Performance optimization
+        
+    section Production Skills (1 month)
+        Enterprise Features: Security best practices
+                           : API versioning
+                           : Monitoring & logging
+                           : Scalable architecture
+```
+  
+### 🛠️ ਤੁਹਾਡਾ ਫੁੱਲ-ਸਟੈਕ ਵਿਕਾਸ ਟੂਲਕਿਟ ਸਾਰ
+
+ਇਸ ਪਾਠ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਡੇ ਕੋਲ ਹੁਣ ਹੈ:  
+- **DOM ਮਾਹਰਤਾ**: ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਐਲੀਮੈਂਟ ਟਾਰਗੇਟਿੰਗ ਅਤੇ ਮੈਨਿਪੂਲੇਸ਼ਨ  
+- **ਸਟੋਰੇਜ ਮਾਹਰਤਾ**: localStorage ਨਾਲ ਸਥਾਈ ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ  
+- **API ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਰੀਅਲ-ਟਾਈਮ ਡਾਟਾ ਫੈਚਿੰਗ ਅਤੇ ਪ੍ਰਮਾਣਿਕਤਾ  
+- **Async ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ non-blocking ਓਪਰੇਸ਼ਨ  
+- **ਗਲਤੀ ਸੰਭਾਲਨ**: ਗਲਤੀਆਂ ਨੂੰ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਣ ਵਾਲੇ ਮਜ਼ਬੂਤ ਐਪਲੀਕੇਸ਼ਨ  
+- **ਯੂਜ਼ਰ ਅਨੁਭਵ**: ਲੋਡਿੰਗ ਸਟੇਟਸ, ਵੈਲੀਡੇਸ਼ਨ, ਅਤੇ ਸੁਚਾਰੂ ਇੰਟਰੈਕਸ਼ਨ  
+- **ਆਧੁਨਿਕ ਪੈਟਰਨ**: fetch API, async/await, ਅਤੇ ES6+ ਫੀਚਰ  
+
+**ਪੇਸ਼ੇਵਰ ਹੁਨਰ ਪ੍ਰਾਪਤ ਕੀਤੇ:** ਤੁਸੀਂ ਇਨ੍ਹਾਂ ਪੈਟਰਨਾਂ ਨੂੰ ਲਾਗੂ ਕੀਤਾ ਹੈ:  
+- **ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ**: ਬਾਹਰੀ ਡਾਟਾ ਸਰੋਤਾਂ ਨਾਲ ਸਿੰਗਲ-ਪੇਜ ਐਪਸ  
+- **ਮੋਬਾਈਲ ਵਿਕਾਸ**: API-ਚਲਿਤ ਐਪਸ ਜਿਨ੍ਹਾਂ ਵਿੱਚ offline ਸਮਰਥਨ ਹੈ  
+- **ਡੈਸਕਟਾਪ ਸੌਫਟਵੇਅਰ**: Electron ਐਪਸ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਸਥਾਈ ਸਟੋਰੇਜ ਹੈ  
+- **ਇੰਟਰਪ੍ਰਾਈਜ਼ ਸਿਸਟਮ**: ਪ੍ਰਮਾਣਿਕਤਾ, ਕੈਸ਼ਿੰਗ, ਅਤੇ ਗਲਤੀ ਸੰਭਾਲਨ  
+- **ਆਧੁਨਿਕ ਫਰੇਮਵਰਕ**: React/Vue/Angular ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਪੈਟਰਨ  
+
+**ਅਗਲਾ ਪੱਧਰ:** ਤੁਸੀਂ ਉੱਨਤ ਵਿਸ਼ਿਆਂ ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ, ਜਿਵੇਂ ਕਿ ਕੈਸ਼ਿੰਗ ਰਣਨੀਤੀਆਂ, ਰੀਅਲ-ਟਾਈਮ WebSocket ਕਨੈਕਸ਼ਨ, ਜਾਂ ਜਟਿਲ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ!
 
 ## ਅਸਾਈਨਮੈਂਟ
 
-[ਇੱਕ API ਅਪਨਾਓ](assignment.md)
+[Adopt an API](assignment.md)
 
 ---
 
 **ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md
index b4363577ae..9883f8fc40 100644
--- a/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md
+++ b/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -1,74 +1,396 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "eb358f3f4c2c082f9f3a4f98efa1d337",
-  "translation_date": "2025-10-22T18:13:48+00:00",
+  "original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
+  "translation_date": "2025-11-03T16:59:37+00:00",
   "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
   "language_code": "pa"
 }
 -->
 # ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ
 
-ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਕਿਵੇਂ ਤੇਜ਼ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ ਜਦਕਿ ਹੋਰ ਹੌਲੀ ਲੱਗਦੇ ਹਨ? ਇਸਦਾ ਰਾਜ਼ ਉਸ ਚੀਜ਼ ਵਿੱਚ ਹੈ ਜੋ ਪਿੱਛੇ ਚੱਲ ਰਿਹਾ ਹੈ। ਜਦੋਂ ਉਪਭੋਗਤਾ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਇੰਟਰਫੇਸ 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹਨ, ਤਾਂ ਡਾਟਾ ਫੈਚਿੰਗ, ਆਈਕਨ ਅਪਡੇਟ ਅਤੇ ਸਿਸਟਮ ਸਰੋਤਾਂ ਦਾ ਪ੍ਰਬੰਧ ਕਰਨ ਵਾਲੇ ਬੈਕਗ੍ਰਾਊਂਡ ਪ੍ਰਕਿਰਿਆਵਾਂ ਦੀ ਇੱਕ ਪੂਰੀ ਦੁਨੀਆ ਚੁੱਪਚਾਪ ਕੰਮ ਕਰ ਰਹੀ ਹੁੰਦੀ ਹੈ।
+```mermaid
+journey
+    title Your Performance Optimization Journey
+    section Foundation
+      Learn browser tools: 3: Student
+      Understand profiling: 4: Student
+      Identify bottlenecks: 4: Student
+    section Extension Features
+      Build color system: 4: Student
+      Create background tasks: 5: Student
+      Update icons dynamically: 5: Student
+    section Optimization
+      Monitor performance: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
 
-ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਸੀਰੀਜ਼ ਵਿੱਚ ਸਾਡਾ ਆਖਰੀ ਪਾਠ ਹੈ, ਅਤੇ ਅਸੀਂ ਤੁਹਾਡੇ ਕਾਰਬਨ ਫੁੱਟਪ੍ਰਿੰਟ ਟ੍ਰੈਕਰ ਨੂੰ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਸੀਂ ਗਤੀਸ਼ੀਲ ਆਈਕਨ ਅਪਡੇਟਸ ਸ਼ਾਮਲ ਕਰੋਗੇ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਪਛਾਣਨ ਦੇ ਤਰੀਕੇ ਸਿੱਖੋਗੇ। ਇਹ ਇੱਕ ਰੇਸ ਕਾਰ ਨੂੰ ਟਿਊਨ ਕਰਨ ਵਰਗਾ ਹੈ - ਛੋਟੀਆਂ ਛੋਟੀਆਂ ਸੁਧਾਰਾਂ ਨਾਲ ਸਭ ਕੁਝ ਕਿਵੇਂ ਚੱਲਦਾ ਹੈ ਇਸ ਵਿੱਚ ਵੱਡਾ ਅੰਤਰ ਪੈ ਸਕਦਾ ਹੈ।
+ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਕਿਵੇਂ ਤੇਜ਼ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਕਿ ਹੋਰ ਹੌਲੀ ਲੱਗਦੇ ਹਨ? ਇਸਦਾ ਰਾਜ਼ ਪਿੱਛੇ ਚੱਲ ਰਹੇ ਪ੍ਰਕਿਰਿਆਵਾਂ ਵਿੱਚ ਹੈ। ਜਦੋਂ ਵਰਤੋਂਕਾਰ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਇੰਟਰਫੇਸ 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹਨ, ਇੱਕ ਪੂਰੀ ਦੁਨੀਆ ਬੈਕਗ੍ਰਾਊਂਡ ਪ੍ਰਕਿਰਿਆਵਾਂ ਦੀ ਹੈ ਜੋ ਡਾਟਾ ਫੈਚਿੰਗ, ਆਈਕਨ ਅਪਡੇਟ ਅਤੇ ਸਿਸਟਮ ਰਿਸੋਰਸ ਨੂੰ ਚੁੱਪਚਾਪ ਸੰਭਾਲ ਰਹੀ ਹੈ।
 
-ਜਦੋਂ ਅਸੀਂ ਖਤਮ ਕਰਾਂਗੇ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪਾਲਿਸ਼ ਕੀਤੀ ਐਕਸਟੈਂਸ਼ਨ ਹੋਵੇਗੀ ਅਤੇ ਉਹ ਪ੍ਰਦਰਸ਼ਨ ਸਿਧਾਂਤ ਸਮਝ ਆਉਣਗੇ ਜੋ ਚੰਗੇ ਵੈੱਬ ਐਪਸ ਨੂੰ ਮਹਾਨ ਤੋਂ ਵੱਖ ਕਰਦੇ ਹਨ। ਆਓ ਬ੍ਰਾਊਜ਼ਰ ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਦੀ ਦੁਨੀਆ ਵਿੱਚ ਡੁੱਬੀਏ।
+ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਸੀਰੀਜ਼ ਦਾ ਅੰਤਮ ਪਾਠ ਹੈ, ਅਤੇ ਅਸੀਂ ਤੁਹਾਡੇ ਕਾਰਬਨ ਫੁਟਪ੍ਰਿੰਟ ਟ੍ਰੈਕਰ ਨੂੰ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਚਲਾਉਣ ਵਾਲਾ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਸੀਂ ਗਤੀਸ਼ੀਲ ਆਈਕਨ ਅਪਡੇਟ ਜੋੜੋਗੇ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਸਮਝਣ ਸਿੱਖੋਗੇ ਤਾਂ ਜੋ ਉਹ ਸਮੱਸਿਆਵਾਂ ਬਣਨ ਤੋਂ ਪਹਿਲਾਂ ਹੀ ਪਕੜੀ ਜਾ ਸਕਣ। ਇਹ ਇੱਕ ਰੇਸ ਕਾਰ ਨੂੰ ਟਿਊਨ ਕਰਨ ਵਰਗਾ ਹੈ - ਛੋਟੀਆਂ ਸੁਧਾਰਾਂ ਨਾਲ ਸਭ ਕੁਝ ਕਿਵੇਂ ਚਲਦਾ ਹੈ ਇਸ ਵਿੱਚ ਵੱਡਾ ਅੰਤਰ ਪੈ ਸਕਦਾ ਹੈ।
 
-## ਪੂਰਵ-ਵਿਚਾਰ ਪਾਠਕਵਾਲੀ ਪ੍ਰਸ਼ਨਾਵਲੀ
+ਜਦੋਂ ਅਸੀਂ ਖਤਮ ਕਰਾਂਗੇ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪਾਲਿਸ਼ ਕੀਤਾ ਐਕਸਟੈਂਸ਼ਨ ਹੋਵੇਗਾ ਅਤੇ ਉਹ ਪ੍ਰਦਰਸ਼ਨ ਸਿਧਾਂਤ ਸਮਝ ਆਉਣਗੇ ਜੋ ਚੰਗੇ ਵੈੱਬ ਐਪਸ ਨੂੰ ਮਹਾਨ ਬਣਾਉਂਦੇ ਹਨ। ਆਓ ਬ੍ਰਾਊਜ਼ਰ ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਦੀ ਦੁਨੀਆ ਵਿੱਚ ਡੁੱਬੀਏ।
 
-[ਪੂਰਵ-ਵਿਚਾਰ ਪਾਠਕਵਾਲੀ ਪ੍ਰਸ਼ਨਾਵਲੀ](https://ff-quizzes.netlify.app/web/quiz/27)
+## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 
-### ਪੇਸ਼ਕਸ਼
+[ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/27)
 
-ਸਾਡੇ ਪਿਛਲੇ ਪਾਠਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਫਾਰਮ ਬਣਾਇਆ, ਇਸਨੂੰ API ਨਾਲ ਜੋੜਿਆ, ਅਤੇ ਅਸਿੰਕ੍ਰੋਨਸ ਡਾਟਾ ਫੈਚਿੰਗ ਦਾ ਮੁਕਾਬਲਾ ਕੀਤਾ। ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਚੰਗੇ ਤਰੀਕੇ ਨਾਲ ਰੂਪ ਲੈ ਰਿਹਾ ਹੈ।
+### ਪਰਿਚਯ
 
-ਹੁਣ ਸਾਨੂੰ ਆਖਰੀ ਟੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ - ਜਿਵੇਂ ਕਿ ਉਸ ਐਕਸਟੈਂਸ਼ਨ ਆਈਕਨ ਨੂੰ ਕਾਰਬਨ ਡਾਟਾ ਦੇ ਅਧਾਰ 'ਤੇ ਰੰਗ ਬਦਲਣ ਲਈ ਬਣਾਉਣਾ। ਇਹ ਮੈਨੂੰ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ NASA ਨੂੰ Apollo spacecraft ਦੇ ਹਰ ਸਿਸਟਮ ਨੂੰ ਕਿਵੇਂ ਅਪਟੀਮਾਈਜ਼ ਕਰਨਾ ਪਿਆ। ਉਹ ਕੋਈ ਵੀ ਸਾਈਕਲ ਜਾਂ ਮੈਮੋਰੀ ਖਰਚ ਕਰਨ ਦਾ ਜੋਖਮ ਨਹੀਂ ਲੈ ਸਕਦੇ ਸਨ ਕਿਉਂਕਿ ਪ੍ਰਦਰਸ਼ਨ 'ਤੇ ਜ਼ਿੰਦਗੀਆਂ ਨਿਰਭਰ ਕਰਦੀਆਂ ਸਨ। ਜਦਕਿ ਸਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਇਸ ਕਦਰ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹੈ, ਉਹੀ ਸਿਧਾਂਤ ਲਾਗੂ ਹੁੰਦੇ ਹਨ - ਕੁਸ਼ਲ ਕੋਡ ਬਿਹਤਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਬਣਾਉਂਦਾ ਹੈ।
+ਪਿਛਲੇ ਪਾਠਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਫਾਰਮ ਬਣਾਇਆ, ਇਸਨੂੰ API ਨਾਲ ਜੋੜਿਆ, ਅਤੇ ਅਸਿੰਕ੍ਰੋਨਸ ਡਾਟਾ ਫੈਚਿੰਗ ਦਾ ਮੁਕਾਬਲਾ ਕੀਤਾ। ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਚੰਗੇ ਤਰੀਕੇ ਨਾਲ ਰੂਪ ਲੈ ਰਿਹਾ ਹੈ।
 
-## ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਬੁਨਿਆਦੀਆਂ ਗੱਲਾਂ
+ਹੁਣ ਅਸੀਂ ਅੰਤਮ ਛੋਹਾਂ ਜੋੜਣ ਦੀ ਲੋੜ ਹੈ - ਜਿਵੇਂ ਕਿ ਉਹ ਐਕਸਟੈਂਸ਼ਨ ਆਈਕਨ ਨੂੰ ਕਾਰਬਨ ਡਾਟਾ ਦੇ ਅਧਾਰ 'ਤੇ ਰੰਗ ਬਦਲਣ ਲਈ ਬਣਾਉਣਾ। ਇਹ ਮੈਨੂੰ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ NASA ਨੂੰ Apollo ਅੰਤਰਿਕਸ਼ ਜਹਾਜ਼ ਦੇ ਹਰ ਸਿਸਟਮ ਨੂੰ ਅਪਟੀਮਾਈਜ਼ ਕਰਨਾ ਪਿਆ। ਉਹ ਕੋਈ ਵੀ ਸਾਈਕਲ ਜਾਂ ਮੈਮਰੀ ਬਰਬਾਦ ਕਰਨ ਦਾ ਜੋਖਮ ਨਹੀਂ ਲੈ ਸਕਦੇ ਸਨ ਕਿਉਂਕਿ ਪ੍ਰਦਰਸ਼ਨ 'ਤੇ ਜ਼ਿੰਦਗੀਆਂ ਨਿਰਭਰ ਕਰਦੀਆਂ ਸਨ। ਜਦੋਂ ਕਿ ਸਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਇਸ ਕਦਰ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹੈ, ਉਹੀ ਸਿਧਾਂਤ ਲਾਗੂ ਹੁੰਦੇ ਹਨ - ਕੁਸ਼ਲ ਕੋਡ ਚੰਗੇ ਵਰਤੋਂਕਾਰ ਅਨੁਭਵ ਬਣਾਉਂਦਾ ਹੈ।
 
-ਜਦੋਂ ਤੁਹਾਡਾ ਕੋਡ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਚੱਲਦਾ ਹੈ, ਲੋਕ ਅਸਲ ਵਿੱਚ *ਅੰਤਰ ਮਹਿਸੂਸ ਕਰ ਸਕਦੇ ਹਨ।* ਤੁਹਾਨੂੰ ਉਹ ਪਲ ਯਾਦ ਹੈ ਜਦੋਂ ਇੱਕ ਪੰਨਾ ਤੁਰੰਤ ਲੋਡ ਹੁੰਦਾ ਹੈ ਜਾਂ ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਚੱਲਦੀ ਹੈ? ਇਹ ਚੰਗੇ ਪ੍ਰਦਰਸ਼ਨ ਦਾ ਕੰਮ ਹੈ।
+```mermaid
+mindmap
+  root((Performance & Background Tasks))
+    Browser Performance
+      Rendering Pipeline
+      Asset Optimization
+      DOM Manipulation
+      JavaScript Execution
+    Profiling Tools
+      Developer Tools
+      Performance Tab
+      Timeline Analysis
+      Bottleneck Detection
+    Extension Architecture
+      Background Scripts
+      Content Scripts
+      Message Passing
+      Icon Management
+    Optimization Strategies
+      Code Splitting
+      Lazy Loading
+      Caching
+      Resource Compression
+    Visual Feedback
+      Dynamic Icons
+      Color Coding
+      Real-time Updates
+      User Experience
+```
 
-ਪ੍ਰਦਰਸ਼ਨ ਸਿਰਫ਼ ਗਤੀ ਬਾਰੇ ਨਹੀਂ ਹੈ - ਇਹ ਵੈੱਬ ਅਨੁਭਵਾਂ ਨੂੰ ਕੁਦਰਤੀ ਬਣਾਉਣ ਬਾਰੇ ਹੈ ਨਾ ਕਿ ਭਾਰੀ ਅਤੇ ਨਿਰਾਸ਼ਜਨਕ। ਕਮਪਿਊਟਿੰਗ ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਵਿੱਚ, Grace Hopper ਨੇ ਆਪਣੇ ਡੈਸਕ 'ਤੇ ਇੱਕ ਨੈਨੋਸੈਕੰਡ (ਲਗਭਗ ਇੱਕ ਫੁੱਟ ਲੰਬੇ ਤਾਰ ਦਾ ਟੁਕੜਾ) ਰੱਖਿਆ ਸੀ ਤਾਂ ਕਿ ਦਿਖਾਇਆ ਜਾ ਸਕੇ ਕਿ ਰੋਸ਼ਨੀ ਇੱਕ ਬਿਲੀਅਨਵੇਂ ਸੈਕੰਡ ਵਿੱਚ ਕਿੰਨੀ ਦੂਰ ਤੁਰਦੀ ਹੈ। ਇਹ ਉਸਦਾ ਤਰੀਕਾ ਸੀ ਇਹ ਸਮਝਾਉਣ ਦਾ ਕਿ ਕਿਉਂ ਕਮਪਿਊਟਿੰਗ ਵਿੱਚ ਹਰ ਮਾਈਕ੍ਰੋਸੈਕੰਡ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ। ਆਓ ਉਹ ਡਿਟੈਕਟਿਵ ਟੂਲਜ਼ ਦੀ ਪੜਤਾਲ ਕਰੀਏ ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਕਿ ਕੀ ਚੀਜ਼ਾਂ ਹੌਲੀ ਹੋ ਰਹੀਆਂ ਹਨ।
+## ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਬੁਨਿਆਦੀਆਂ
 
-> "ਵੈੱਬਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਦੋ ਚੀਜ਼ਾਂ ਬਾਰੇ ਹੈ: ਪੰਨਾ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਇਸ 'ਤੇ ਕੋਡ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਚੱਲਦਾ ਹੈ।" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+ਜਦੋਂ ਤੁਹਾਡਾ ਕੋਡ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਚਲਦਾ ਹੈ, ਲੋਕ ਅਸਲ ਵਿੱਚ *ਅਹਿਸਾਸ* ਕਰ ਸਕਦੇ ਹਨ। ਤੁਸੀਂ ਉਹ ਪਲ ਜਾਣਦੇ ਹੋ ਜਦੋਂ ਇੱਕ ਪੇਜ ਤੁਰੰਤ ਲੋਡ ਹੁੰਦਾ ਹੈ ਜਾਂ ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਚਲਦੀ ਹੈ? ਇਹ ਚੰਗੇ ਪ੍ਰਦਰਸ਼ਨ ਦਾ ਕੰਮ ਹੈ।
 
-## ਪ੍ਰੋਫਾਈਲਿੰਗ ਦੌਰਾਨ ਕੀ ਦੇਖਣਾ ਹੈ
+ਪ੍ਰਦਰਸ਼ਨ ਸਿਰਫ਼ ਗਤੀ ਬਾਰੇ ਨਹੀਂ ਹੈ - ਇਹ ਵੈੱਬ ਅਨੁਭਵਾਂ ਨੂੰ ਕੁਦਰਤੀ ਬਣਾਉਣ ਬਾਰੇ ਹੈ ਨਾ ਕਿ ਭਾਰੀ ਅਤੇ ਨਿਰਾਸ਼ਜਨਕ। ਕੰਪਿਊਟਿੰਗ ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਵਿੱਚ, Grace Hopper ਨੇ ਆਪਣੇ ਡੈਸਕ 'ਤੇ ਇੱਕ ਨੈਨੋਸੈਕੰਡ (ਲਗਭਗ ਇੱਕ ਫੁੱਟ ਲੰਬੇ ਤਾਰ ਦਾ ਟੁਕੜਾ) ਰੱਖਿਆ ਸੀ ਤਾਂ ਜੋ ਦਿਖਾ ਸਕੇ ਕਿ ਰੋਸ਼ਨੀ ਇੱਕ ਬਿਲੀਅਨਵੇਂ ਸੈਕੰਡ ਵਿੱਚ ਕਿੰਨੀ ਦੂਰ ਜਾਂਦੀ ਹੈ। ਇਹ ਉਸਦਾ ਤਰੀਕਾ ਸੀ ਸਮਝਾਉਣ ਦਾ ਕਿ ਕੰਪਿਊਟਿੰਗ ਵਿੱਚ ਹਰ ਮਾਈਕ੍ਰੋਸੈਕੰਡ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਆਓ ਉਹ ਜਾਸੂਸੀ ਟੂਲਜ਼ ਦੀ ਪੜਤਾਲ ਕਰੀਏ ਜੋ ਤੁਹਾਨੂੰ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਕੀ ਚੀਜ਼ਾਂ ਹੌਲੀ ਹੋ ਰਹੀਆਂ ਹਨ।
 
-ਪ੍ਰੋਫਾਈਲਰ ਚਲਾਉਣਾ ਸਿਰਫ਼ ਸ਼ੁਰੂਆਤ ਹੈ - ਅਸਲ ਕਲਾ ਇਹ ਜਾਣਨ ਵਿੱਚ ਹੈ ਕਿ ਉਹ ਰੰਗੀਨ ਚਾਰਟ ਤੁਹਾਨੂੰ ਅਸਲ ਵਿੱਚ ਕੀ ਦੱਸ ਰਹੇ ਹਨ। ਚਿੰਤਾ ਨਾ ਕਰੋ, ਤੁਸੀਂ ਇਹ ਪੜ੍ਹਨ ਦਾ ਤਰੀਕਾ ਸਿੱਖ ਲਵੋਗੇ। ਅਨੁਭਵੀ ਡਿਵੈਲਪਰਾਂ ਨੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮੱਸਿਆ ਬਣਨ ਤੋਂ ਪਹਿਲਾਂ ਚੇਤਾਵਨੀ ਦੇ ਸੰਕੇਤਾਂ ਨੂੰ ਪਛਾਣਨਾ ਸਿੱਖ ਲਿਆ ਹੈ।
+> "ਵੈੱਬਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਦੋ ਚੀਜ਼ਾਂ ਬਾਰੇ ਹੈ: ਪੇਜ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਇਸ 'ਤੇ ਕੋਡ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਚਲਦਾ ਹੈ।" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
 
-ਆਓ ਆਮ ਦੋਸ਼ੀਆਂ ਬਾਰੇ ਗੱਲ ਕਰੀਏ - ਪ੍ਰਦਰਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਜੋ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਚੁਪਕੇ ਨਾਲ ਆ ਜਾਂਦੀਆਂ ਹਨ। ਜਿਵੇਂ Marie Curie ਨੂੰ ਆਪਣੇ ਲੈਬ ਵਿੱਚ ਰੇਡੀਏਸ਼ਨ ਲੈਵਲ ਦੀ ਸਾਵਧਾਨੀ ਨਾਲ ਨਿਗਰਾਨੀ ਕਰਨੀ ਪਈ, ਸਾਨੂੰ ਕੁਝ ਪੈਟਰਨਾਂ ਦੇਖਣ ਦੀ ਲੋੜ ਹੈ ਜੋ ਸਮੱਸਿਆਵਾਂ ਦੇ ਪੈਦਾ ਹੋਣ ਦਾ ਸੰਕੇਤ ਦਿੰਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਜਲਦੀ ਪਕੜਨਾ ਤੁਹਾਨੂੰ (ਅਤੇ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ) ਬਹੁਤ ਸਾਰੀ ਨਿਰਾਸ਼ਾ ਤੋਂ ਬਚਾਏਗਾ।
+ਤੁਹਾਡੇ ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਹਰ ਕਿਸਮ ਦੇ ਉਪਕਰਣਾਂ 'ਤੇ, ਹਰ ਕਿਸਮ ਦੇ ਵਰਤੋਂਕਾਰਾਂ ਲਈ, ਹਰ ਕਿਸਮ ਦੇ ਹਾਲਾਤਾਂ ਵਿੱਚ ਬਹੁਤ ਤੇਜ਼ ਬਣਾਉਣ ਦੇ ਵਿਸ਼ੇ ਬਾਰੇ, ਹੈਰਾਨੀਜਨਕ ਤੌਰ 'ਤੇ, ਬਹੁਤ ਕੁਝ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਸਧਾਰਨ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ ਤਾਂ ਕੁਝ ਗੱਲਾਂ ਨੂੰ ਯਾਦ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ।
 
-**ਐਸੈਟ ਸਾਈਜ਼**: ਵੈੱਬਸਾਈਟਾਂ ਸਾਲਾਂ ਤੋਂ "ਭਾਰੀ" ਹੋ ਰਹੀਆਂ ਹਨ, ਅਤੇ ਇਸ ਵਾਧੇ ਦਾ ਬਹੁਤ ਸਾਰਾ ਭਾਰ ਚਿੱਤਰਾਂ ਤੋਂ ਆਉਂਦਾ ਹੈ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਅਸੀਂ ਆਪਣੇ ਡਿਜ਼ੀਟਲ ਸੂਟਕੇਸਾਂ ਵਿੱਚ ਹੋਰ ਅਤੇ ਹੋਰ ਭਰ ਰਹੇ ਹਾਂ।
+ਤੁਹਾਡੇ ਸਾਈਟ ਨੂੰ ਅਪਟੀਮਾਈਜ਼ ਕਰਨ ਦਾ ਪਹਿਲਾ ਕਦਮ ਇਹ ਸਮਝਣਾ ਹੈ ਕਿ ਅਸਲ ਵਿੱਚ ਹੇਠਾਂ ਕੀ ਹੋ ਰਿਹਾ ਹੈ। ਖੁਸ਼ਕਿਸਮਤੀ ਨਾਲ, ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸ਼ਕਤੀਸ਼ਾਲੀ ਜਾਸੂਸੀ ਟੂਲਜ਼ ਪਹਿਲਾਂ ਹੀ ਸ਼ਾਮਲ ਹਨ।
 
-✅ [Internet Archive](https://httparchive.org/reports/page-weight) 'ਤੇ ਜਾਂਕੇ ਦੇਖੋ ਕਿ ਪੰਨਾ ਸਾਈਜ਼ ਕਿਵੇਂ ਵਧੇ ਹਨ - ਇਹ ਕਾਫ਼ੀ ਖੁਲਾਸਾ ਕਰਨ ਵਾਲਾ ਹੈ।
+```mermaid
+flowchart LR
+    A[HTML] --> B[Parse]
+    B --> C[DOM Tree]
+    D[CSS] --> E[Parse]
+    E --> F[CSSOM]
+    G[JavaScript] --> H[Execute]
+    
+    C --> I[Render Tree]
+    F --> I
+    H --> I
+    
+    I --> J[Layout]
+    J --> K[Paint]
+    K --> L[Composite]
+    L --> M[Display]
+    
+    subgraph "Critical Rendering Path"
+        N["1. Parse HTML"]
+        O["2. Parse CSS"]
+        P["3. Execute JS"]
+        Q["4. Build Render Tree"]
+        R["5. Layout Elements"]
+        S["6. Paint Pixels"]
+        T["7. Composite Layers"]
+    end
+    
+    style M fill:#e8f5e8
+    style I fill:#fff3e0
+    style H fill:#ffebee
+```
 
-**DOM Traversals**: ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਲਿਖੇ ਕੋਡ ਦੇ ਅਧਾਰ 'ਤੇ ਆਪਣਾ ਡੌਕਯੂਮੈਂਟ ਓਬਜੈਕਟ ਮਾਡਲ ਬਣਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਇਸ ਲਈ ਚੰਗੇ ਪੰਨੇ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਹਿੱਤ ਵਿੱਚ ਹੈ ਕਿ ਤੁਹਾਡੇ ਟੈਗਾਂ ਨੂੰ ਘੱਟ ਰੱਖਿਆ ਜਾਵੇ, ਸਿਰਫ਼ ਉਹੀ ਵਰਤ ਕੇ ਅਤੇ ਸਟਾਈਲ ਕਰਕੇ ਜੋ ਪੰਨੇ ਨੂੰ ਲੋੜ ਹੈ।
+Edge ਵਿੱਚ Developer Tools ਖੋਲ੍ਹਣ ਲਈ, ਉੱਪਰ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਉਹ ਤਿੰਨ ਬਿੰਦੂਆਂ 'ਤੇ ਕਲਿਕ ਕਰੋ, ਫਿਰ More Tools > Developer Tools 'ਤੇ ਜਾਓ। ਜਾਂ ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟ ਵਰਤੋ: Windows 'ਤੇ `Ctrl` + `Shift` + `I` ਜਾਂ Mac 'ਤੇ `Option` + `Command` + `I`। ਜਦੋਂ ਤੁਸੀਂ ਉੱਥੇ ਹੋ, Performance ਟੈਬ 'ਤੇ ਕਲਿਕ ਕਰੋ - ਇਹ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਆਪਣੀ ਜਾਂਚ ਕਰੋਗੇ।
 
-**JavaScript**: ਹਰ JavaScript ਡਿਵੈਲਪਰ ਨੂੰ 'render-blocking' ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ DOM ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਪੇਂਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲੋਡ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।
-ਇਹ ਇੱਕ ਦਿਲਚਸਪ ਜਾਸੂਸੀ ਮਿਸ਼ਨ ਹੈ: ਕੁਝ ਪੁਰਾਣੀਆਂ ਓਪਨ ਸੋਰਸ ਵੈਬਸਾਈਟਾਂ (ਜਿਵੇਂ ਕਿ Wikipedia, GitHub, ਜਾਂ Stack Overflow) ਦੀ ਚੋਣ ਕਰੋ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਕਮਿਟ ਇਤਿਹਾਸ ਵਿੱਚ ਝਾਤ ਮਾਰੋ। ਕੀ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ ਕਿ ਉਨ੍ਹਾਂ ਨੇ ਕਿੱਥੇ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ ਕੀਤੇ? ਕਿਹੜੇ ਸਮੱਸਿਆਵਾਂ ਮੁੜ-ਮੁੜ ਉੱਪਜ ਰਹੀਆਂ ਸਨ?
+**ਇਹ ਹੈ ਤੁਹਾਡਾ ਪ੍ਰਦਰਸ਼ਨ ਜਾਸੂਸੀ ਟੂਲਕਿਟ:**
+- **Developer Tools ਖੋਲ੍ਹੋ** (ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਇੱਕ ਡਿਵੈਲਪਰ ਵਜੋਂ ਲਗਾਤਾਰ ਵਰਤੋਂਗੇ!)
+- **Performance ਟੈਬ 'ਤੇ ਜਾਓ** - ਇਸਨੂੰ ਆਪਣੇ ਵੈੱਬ ਐਪ ਦਾ ਫਿਟਨੈਸ ਟ੍ਰੈਕਰ ਸਮਝੋ
+- **Record ਬਟਨ ਦਬਾਓ** ਅਤੇ ਆਪਣੀ ਪੇਜ ਦੀ ਕਾਰਵਾਈ ਦੇਖੋ
+- **ਨਤੀਜੇ ਪੜ੍ਹੋ** ਤਾਂ ਜੋ ਪਤਾ ਲੱਗੇ ਕਿ ਕੀ ਚੀਜ਼ਾਂ ਹੌਲੀ ਹੋ ਰਹੀਆਂ ਹਨ
+
+ਆਓ ਇਸਨੂੰ ਅਜ਼ਮਾਈਏ। ਇੱਕ ਵੈੱਬਸਾਈਟ ਖੋਲ੍ਹੋ (Microsoft.com ਇਸ ਲਈ ਚੰਗੀ ਹੈ) ਅਤੇ 'Record' ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ। ਹੁਣ ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ ਅਤੇ ਪ੍ਰੋਫਾਈਲਰ ਨੂੰ ਜੋ ਕੁਝ ਵੀ ਹੁੰਦਾ ਹੈ ਉਸਨੂੰ ਕੈਪਚਰ ਕਰਦੇ ਦੇਖੋ। ਜਦੋਂ ਤੁਸੀਂ ਰਿਕਾਰਡਿੰਗ ਰੋਕਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਇਹ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ ਕਿ ਬ੍ਰਾਊਜ਼ਰ 'ਸਕ੍ਰਿਪਟ', 'ਰੈਂਡਰ' ਅਤੇ 'ਪੇਂਟ' ਸਾਈਟ ਨੂੰ ਕਿਵੇਂ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਇਹ ਮੈਨੂੰ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਰਾਕਟ ਲਾਂਚ ਦੌਰਾਨ ਹਰ ਸਿਸਟਮ ਦੀ ਨਿਗਰਾਨੀ ਕਰਦਾ ਹੈ - ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਲੱਗਦਾ ਹੈ ਕਿ ਅਸਲ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ ਅਤੇ ਕਦੋਂ।
+
+![Edge ਪ੍ਰੋਫਾਈਲਰ](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.pa.png)
+
+✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ਵਿੱਚ ਹੋਰ ਬਹੁਤ ਸਾਰੇ ਵੇਰਵੇ ਹਨ ਜੇ ਤੁਸੀਂ ਹੋਰ ਡੂੰਘਾਈ ਵਿੱਚ ਜਾਣਾ ਚਾਹੁੰਦੇ ਹੋ
+
+> ਪ੍ਰੋ ਟਿਪ: ਟੈਸਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਆਪਣਾ ਬ੍ਰਾਊਜ਼ਰ ਕੈਸ਼ ਸਾਫ਼ ਕਰੋ ਤਾਂ ਜੋ ਦੇਖਿਆ ਜਾ ਸਕੇ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਪਹਿਲੀ ਵਾਰ ਦੇਖਣ ਵਾਲੇ ਲਈ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਨ ਕਰਦੀ ਹੈ - ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਦੁਬਾਰਾ ਦੌਰੇ ਤੋਂ ਬਹੁਤ ਵੱਖਰੀ ਹੁੰਦੀ ਹੈ!
+
+ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੋ ਤਾਂ ਜੋ ਉਹ ਘਟਨਾਵਾਂ ਦੇਖ ਸਕੋ ਜੋ ਤੁਹਾਡੀ ਪੇਜ ਲੋਡ ਹੋਣ ਦੌਰਾਨ ਹੁੰਦੀਆਂ ਹਨ।
+
+ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਚੁਣ ਕੇ ਅਤੇ ਸਾਰਾਂ ਪੈਨ ਦੇਖ ਕੇ ਆਪਣੀ ਪੇਜ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਇੱਕ ਝਲਕ ਪ੍ਰਾਪਤ ਕਰੋ:
+
+![Edge ਪ੍ਰੋਫਾਈਲਰ ਸਨੈਪਸ਼ਾਟ](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.pa.png)
+
+Event Log ਪੈਨ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਦੇਖਿਆ ਜਾ ਸਕੇ ਕਿ ਕੋਈ ਘਟਨਾ 15 ms ਤੋਂ ਵੱਧ ਸਮਾਂ ਲੈਂਦੀ ਹੈ:
+
+![Edge ਇਵੈਂਟ ਲੌਗ](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.pa.png)
+
+✅ ਆਪਣੇ ਪ੍ਰੋਫਾਈਲਰ ਨੂੰ ਜਾਣੋ! ਇਸ ਸਾਈਟ 'ਤੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹੋ ਅਤੇ ਦੇਖੋ ਕਿ ਕੋਈ ਬੋਤਲਨੈਕ ਹੈ। ਸਭ ਤੋਂ ਹੌਲੀ ਲੋਡ ਹੋਣ ਵਾਲਾ ਐਸੈਟ ਕਿਹੜਾ ਹੈ? ਸਭ ਤੋਂ ਤੇਜ਼?
+
+```mermaid
+flowchart TD
+    A[Open DevTools] --> B[Navigate to Performance Tab]
+    B --> C[Click Record Button]
+    C --> D[Perform Actions]
+    D --> E[Stop Recording]
+    E --> F{Analyze Results}
+    
+    F --> G[Check Timeline]
+    F --> H[Review Network]
+    F --> I[Examine Scripts]
+    F --> J[Identify Paint Events]
+    
+    G --> K{Long Tasks?}
+    H --> L{Large Assets?}
+    I --> M{Render Blocking?}
+    J --> N{Expensive Paints?}
+    
+    K -->|Yes| O[Optimize JavaScript]
+    L -->|Yes| P[Compress Assets]
+    M -->|Yes| Q[Add Async/Defer]
+    N -->|Yes| R[Simplify Styles]
+    
+    O --> S[Test Again]
+    P --> S
+    Q --> S
+    R --> S
+    
+    style A fill:#e1f5fe
+    style F fill:#fff3e0
+    style S fill:#e8f5e8
+```
+
+## ਪ੍ਰੋਫਾਈਲਿੰਗ ਕਰਦੇ ਸਮੇਂ ਕੀ ਦੇਖਣਾ ਹੈ
+
+ਪ੍ਰੋਫਾਈਲਰ ਚਲਾਉਣਾ ਸਿਰਫ਼ ਸ਼ੁਰੂਆਤ ਹੈ - ਅਸਲ ਹੁਨਰ ਇਹ ਜਾਣਨਾ ਹੈ ਕਿ ਉਹ ਰੰਗੀਨ ਚਾਰਟ ਤੁਹਾਨੂੰ ਅਸਲ ਵਿੱਚ ਕੀ ਦੱਸ ਰਹੇ ਹਨ। ਚਿੰਤਾ ਨਾ ਕਰੋ, ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਪੜ੍ਹਨ ਦਾ ਤਰੀਕਾ ਸਿੱਖ ਲਵੋਗੇ। ਅਨੁਭਵੀ ਡਿਵੈਲਪਰਾਂ ਨੇ ਪੂਰੀ ਸਮੱਸਿਆ ਬਣਨ ਤੋਂ ਪਹਿਲਾਂ ਚੇਤਾਵਨੀ ਦੇ ਸੰਕੇਤਾਂ ਨੂੰ ਪਛਾਣਨਾ ਸਿੱਖ ਲਿਆ ਹੈ।
+
+ਆਓ ਆਮ ਦੋਸ਼ੀਆਂ ਬਾਰੇ ਗੱਲ ਕਰੀਏ - ਉਹ ਪ੍ਰਦਰਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਜੋ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਆਮ ਤੌਰ 'ਤੇ ਚੁਪਕੇ ਨਾਲ ਆ ਜਾਂਦੀਆਂ ਹਨ। ਜਿਵੇਂ Marie Curie ਨੂੰ ਆਪਣੇ ਲੈਬ ਵਿੱਚ ਰੇਡੀਏਸ਼ਨ ਪੱਧਰ ਦੀ ਸਾਵਧਾਨੀ ਨਾਲ ਨਿਗਰਾਨੀ ਕਰਨੀ ਪਈ, ਸਾਨੂੰ ਕੁਝ ਪੈਟਰਨਾਂ ਦੇਖਣ ਦੀ ਲੋੜ ਹੈ ਜੋ ਸਮੱਸਿਆਵਾਂ ਦੇ ਪੈਦਾ ਹੋਣ ਦਾ ਸੰਕੇਤ ਦਿੰਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਜਲਦੀ ਪਕੜਨਾ ਤੁਹਾਨੂੰ (ਅਤੇ ਤੁਹਾਡੇ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ) ਬਹੁਤ ਸਾਰੀ ਨਿਰਾਸ਼ਾ ਤੋਂ ਬਚਾ ਸਕਦਾ ਹੈ।
+
+**ਐਸੈਟ ਸਾਈਜ਼**: ਵੈੱਬਸਾਈਟਾਂ ਸਾਲਾਂ ਤੋਂ "ਭਾਰੀ" ਹੋ ਰਹੀਆਂ ਹਨ, ਅਤੇ ਇਸ ਵਾਧੇ ਦਾ ਬਹੁਤ ਸਾਰਾ ਭਾਰ ਚਿੱਤਰਾਂ ਤੋਂ ਆ ਰਿਹਾ ਹੈ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਕਿ ਅਸੀਂ ਆਪਣੇ ਡਿਜੀਟਲ ਸੂਟਕੇਸਾਂ ਵਿੱਚ ਹੋਰ ਅਤੇ ਹੋਰ ਭਰ ਰਹੇ ਹਾਂ।
+
+✅ [Internet Archive](https://httparchive.org/reports/page-weight) 'ਤੇ ਜਾਂਚ ਕਰੋ ਕਿ ਪੇਜ ਸਾਈਜ਼ ਕਿਵੇਂ ਸਮੇਂ ਦੇ ਨਾਲ ਵਧੇ ਹਨ - ਇਹ ਕਾਫ਼ੀ ਖੁਲਾਸਾ ਕਰਨ ਵਾਲਾ ਹੈ।
+
+**ਆਪਣੇ ਐਸੈਟਾਂ ਨੂੰ ਅਪਟੀਮਾਈਜ਼ ਕਰਨ ਦੇ ਤਰੀਕੇ:**
+- **ਚਿੱਤਰਾਂ ਨੂੰ ਕੰਪ੍ਰੈਸ ਕਰੋ**! ਆਧੁਨਿਕ ਫਾਰਮੈਟ ਜਿਵੇਂ WebP ਫਾਈਲ ਸਾਈਜ਼ ਨੂੰ ਨਾਟਕੀ ਤਰੀਕੇ ਨਾਲ ਘਟਾ ਸਕਦੇ ਹਨ
+- **ਹਰ ਉਪਕਰਣ ਲਈ ਸਹੀ ਚਿੱਤਰ ਸਾਈਜ਼ ਸੇਵਾ ਕਰੋ** - ਫੋਨਾਂ ਨੂੰ ਵੱਡੇ ਡੈਸਕਟਾਪ ਚਿੱਤਰ ਭੇਜਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ
+- **CSS ਅਤੇ JavaScript ਨੂੰ ਮਿਨਿਫਾਈ ਕਰੋ** - ਹਰ ਬਾਈਟ ਮਹੱਤਵਪੂਰਨ ਹੈ
+- **ਲੇਜ਼ੀ ਲੋਡਿੰਗ ਵਰਤੋਂ ਕਰੋ** ਤਾਂ ਜੋ ਚਿੱਤਰ ਸਿਰਫ਼ ਉਸ ਸਮੇਂ ਡਾਊਨਲੋਡ ਹੋਣ ਜਦੋਂ ਵਰਤੋਂਕਾਰ ਅਸਲ ਵਿੱਚ ਉਨ੍ਹਾਂ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹਨ
+
+**DOM ਟ੍ਰੈਵਰਸਲ**: ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਆਪਣੇ ਦੁਆਰਾ ਲਿਖੇ ਕੋਡ ਦੇ ਅਧਾਰ 'ਤੇ ਆਪਣਾ Document Object Model ਬਣਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਇਸ ਲਈ ਚੰਗੇ ਪੇਜ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਹਿੱਤ ਵਿੱਚ ਆਪਣੇ ਟੈਗਾਂ ਨੂੰ ਘੱਟ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ, ਸਿਰਫ਼ ਉਹਨਾਂ ਨੂੰ ਵਰਤਣਾ ਅਤੇ ਸਟਾਈਲ ਕਰਨਾ ਜੋ ਪੇਜ ਨੂੰ ਲੋੜ ਹੈ। ਇਸ ਬਿੰਦੂ 'ਤੇ, ਪੇਜ ਨਾਲ ਸੰਬੰਧਿਤ ਵਾਧੂ CSS ਨੂੰ ਅਪਟੀਮਾਈਜ਼ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; ਸਟਾਈਲ ਜੋ ਸਿਰਫ਼ ਇੱਕ ਪੇਜ 'ਤੇ ਵਰਤਣ ਦੀ ਲੋੜ ਹੈ ਉਹਨਾਂ ਨੂੰ ਮੁੱਖ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਉਦਾਹਰਣ ਲਈ।
+
+**DOM ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਮੁੱਖ ਰਣਨੀਤੀਆਂ:**
+- **HTML ਤੱਤਾਂ ਅਤੇ ਨੈਸਟਿੰਗ ਪੱਧਰਾਂ ਦੀ ਗਿਣਤੀ ਘਟਾਓ**
+- **ਅਣਵਰਤ CSS ਨਿਯਮਾਂ ਨੂੰ ਹਟਾਓ ਅਤੇ ਸਟਾਈਲਸ਼ੀਟਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਇਕੱਠਾ ਕਰੋ**
+- **CSS ਨੂੰ ਸੰਗਠਿਤ ਕਰੋ ਤਾਂ ਜੋ ਹਰ ਪੇਜ ਲਈ ਸਿਰਫ਼ ਲੋੜੀਂਦਾ ਲੋਡ ਹੋਵੇ**
+- **HTML ਨੂੰ ਸੈਮੈਂਟਿਕ ਤਰੀਕੇ ਨਾਲ ਬਣਾਓ ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਪਾਰਸਿੰਗ ਚੰਗੀ ਹੋਵੇ**
+
+**JavaScript**: ਹਰ JavaScript ਡਿਵੈਲਪਰ ਨੂੰ 'ਰੈਂਡਰ-ਬਲਾਕਿੰਗ' ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ DOM ਨੂੰ ਟ੍ਰੈਵਰਸ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਪੇਂਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲੋਡ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਆਪਣੇ inline ਸਕ੍ਰਿਪਟਾਂ ਨਾਲ `defer` ਵਰਤਣ ਬਾਰੇ ਸੋਚੋ (ਜਿਵੇਂ Terrarium ਮੋਡਿਊਲ ਵਿੱਚ ਕੀਤਾ ਗਿਆ ਹੈ)।
+
+**ਆਧੁਨਿਕ JavaScript ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਤਕਨੀਕਾਂ:**
+- **`defer` ਐਟ੍ਰਿਬਿਊਟ ਵਰਤਦਾ ਹੈ** ਤਾਂ ਜੋ DOM ਪਾਰਸਿੰਗ ਤੋਂ ਬਾਅਦ ਸਕ੍ਰਿਪਟ ਲੋਡ ਹੋਣ
+- **ਕੋਡ ਸਪਲਿਟਿੰਗ ਲਾਗੂ ਕਰਦਾ ਹੈ** ਤਾਂ ਜੋ ਸਿਰਫ਼ ਲੋੜੀਂਦਾ JavaScript ਲੋਡ ਹੋਵੇ
+- **ਗੈਰ-ਮਹੱਤਵਪੂਰਨ ਕਾਰਗੁਜ਼ਾਰੀ ਲਈ ਲੇਜ਼ੀ ਲੋਡਿੰਗ ਲਾਗੂ ਕਰਦਾ ਹੈ**
+- **ਭਾਰੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਫਰੇਮਵਰਕਾਂ ਦੀ ਵਰਤੋਂ ਘਟਾਉਂਦਾ ਹੈ ਜਦੋਂ ਸੰਭਵ ਹੋਵੇ
+
+✅ ਕੁਝ ਸਾਈਟਾਂ ਨੂੰ [Site Speed Test ਵੈੱਬਸਾਈਟ](https://www.webpagetest.org/) 'ਤੇ ਅਜ਼ਮਾਓ ਤਾਂ ਜੋ ਇਹ ਸਿੱਖਿਆ ਜਾ ਸਕੇ ਕਿ ਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੀ ਆਮ ਜਾਂਚਾਂ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਪ੍ਰਦਰਸ਼ਨ ਸਮਝ**: ਐਕਸਟੈਂਸ਼ਨ ਫੀਚਰ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:
+- ✅ HTML ਤੋਂ ਪਿਕਸਲ ਤੱਕ ਮਹੱਤਵਪੂਰਨ ਰੈਂਡਰਿੰਗ ਪਾਥ ਦੀ ਵਿਆਖਿਆ ਕਰੋ
+- ✅ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਆਮ ਪ੍ਰਦਰਸ਼ਨ ਬੋਤਲਨੈਕਾਂ ਦੀ ਪਛਾਣ ਕਰੋ
+- ✅ ਪੇਜ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਪ੍ਰੋਫਾਈਲ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਦੀ ਵਰਤੋਂ ਕਰੋ
+- ✅ ਸਮਝੋ ਕਿ ਐਸੈਟ ਸਾਈਜ਼ ਅਤੇ DOM ਜਟਿਲਤਾ ਗਤੀ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਭਾਵ ਪਾਉਂਦੇ ਹਨ
+
+**ਤੁਰੰਤ ਸਵੈ-ਪ੍ਰੀਖ
+- ✅ Chrome Runtime API ਵਧਾਈ ਦੇ ਆਰਕੀਟੈਕਚਰ ਵਿੱਚ ਕੀ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦਾ ਹੈ?
+- ✅ ਰੰਗ ਗਣਨਾ ਅਲਗੋਰਿਥਮ ਡਾਟਾ ਨੂੰ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਨਾਲ ਕਿਵੇਂ ਜੋੜਦਾ ਹੈ?
+
+**ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਵਿਚਾਰ**: ਤੁਹਾਡੀ ਵਧਾਈ ਹੁਣ ਇਹ ਦਿਖਾਉਂਦੀ ਹੈ:
+- **ਕੁਸ਼ਲ ਸੰਦੇਸ਼ਵਾਹੀ**: ਸਕ੍ਰਿਪਟ ਸੰਦਰਭਾਂ ਵਿੱਚ ਸਾਫ਼ ਸੰਚਾਰ
+- **ਸਰਲ ਰੇਂਡਰਿੰਗ**: OffscreenCanvas UI ਨੂੰ ਰੋਕਣ ਤੋਂ ਰੋਕਦਾ ਹੈ
+- **ਤੁਰੰਤ ਅਪਡੇਟ**: ਲਾਈਵ ਡਾਟਾ ਦੇ ਅਧਾਰ 'ਤੇ ਡਾਇਨਾਮਿਕ ਆਈਕਨ ਬਦਲਾਅ
+- **ਮੈਮੋਰੀ ਪ੍ਰਬੰਧਨ**: ਸਹੀ ਸਫਾਈ ਅਤੇ ਸਰੋਤ ਸੰਭਾਲ
+
+**ਤੁਹਾਡੀ ਵਧਾਈ ਦੀ ਜਾਂਚ ਕਰਨ ਦਾ ਸਮਾਂ:**
+- **ਬਿਲਡ** ਸਭ ਕੁਝ `npm run build` ਨਾਲ ਕਰੋ
+- **ਰੀਲੋਡ** ਆਪਣੀ ਵਧਾਈ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ (ਇਸ ਕਦਮ ਨੂੰ ਭੁੱਲੋ ਨਾ)
+- **ਖੋਲ੍ਹੋ** ਆਪਣੀ ਵਧਾਈ ਅਤੇ ਦੇਖੋ ਕਿ ਆਈਕਨ ਕਿਵੇਂ ਰੰਗ ਬਦਲਦਾ ਹੈ
+- **ਜਾਂਚੋ** ਕਿ ਇਹ ਦੁਨੀਆ ਭਰ ਦੇ ਅਸਲੀ ਕਾਰਬਨ ਡਾਟਾ ਲਈ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਦਾ ਹੈ
+
+ਹੁਣ ਤੁਹਾਨੂੰ ਇੱਕ ਨਜ਼ਰ ਵਿੱਚ ਪਤਾ ਲੱਗੇਗਾ ਕਿ ਕਪੜੇ ਧੋਣ ਦਾ ਸਮਾਂ ਹੈ ਜਾਂ ਸਾਫ਼ ਊਰਜਾ ਲਈ ਉਡੀਕ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਤੁਸੀਂ ਕੁਝ ਸੱਚਮੁੱਚ ਲਾਭਦਾਇਕ ਬਣਾਇਆ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਸਿੱਖਿਆ ਪ੍ਰਾਪਤ ਕੀਤੀ ਹੈ।
+
+## GitHub Copilot Agent Challenge 🚀
+
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
+
+**ਵੇਰਵਾ:** ਬ੍ਰਾਊਜ਼ਰ ਵਧਾਈ ਦੀ ਪ੍ਰਦਰਸ਼ਨ ਨਿਗਰਾਨੀ ਸਮਰੱਥਾ ਨੂੰ ਵਧਾਉਣ ਲਈ ਇੱਕ ਫੀਚਰ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਵਧਾਈ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਦੇ ਲੋਡ ਸਮੇਂ ਨੂੰ ਟ੍ਰੈਕ ਅਤੇ ਡਿਸਪਲੇ ਕਰਦਾ ਹੈ।
+
+**ਪ੍ਰੇਰਨਾ:** ਬ੍ਰਾਊਜ਼ਰ ਵਧਾਈ ਲਈ ਇੱਕ ਪ੍ਰਦਰਸ਼ਨ ਨਿਗਰਾਨੀ ਸਿਸਟਮ ਬਣਾਓ ਜੋ API ਤੋਂ CO2 ਡਾਟਾ ਲੈਣ, ਰੰਗ ਗਣਨਾ ਕਰਨ ਅਤੇ ਆਈਕਨ ਅਪਡੇਟ ਕਰਨ ਵਿੱਚ ਲੱਗਣ ਵਾਲੇ ਸਮੇਂ ਨੂੰ ਮਾਪਦਾ ਅਤੇ ਲਾਗ ਬਨਾਉਂਦਾ ਹੈ। ਇੱਕ ਫੰਕਸ਼ਨ `performanceTracker` ਬਣਾਓ ਜੋ Performance API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਨ੍ਹਾਂ ਕਾਰਵਾਈਆਂ ਨੂੰ ਮਾਪਦਾ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਟਾਈਮਸਟੈਂਪ ਅਤੇ ਸਮੇਂ ਦੇ ਮਾਪਦੰਡਾਂ ਨਾਲ ਨਤੀਜੇ ਦਿਖਾਉਂਦਾ ਹੈ।
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
+
+## 🚀 Challenge
+
+ਇਹ ਇੱਕ ਦਿਲਚਸਪ ਜਾਸੂਸੀ ਮਿਸ਼ਨ ਹੈ: ਕੁਝ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਵਾਲੀਆਂ ਵੈਬਸਾਈਟਾਂ ਦੀ ਚੋਣ ਕਰੋ ਜੋ ਸਾਲਾਂ ਤੋਂ ਚੱਲ ਰਹੀਆਂ ਹਨ (ਜਿਵੇਂ Wikipedia, GitHub, ਜਾਂ Stack Overflow) ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ commit ਇਤਿਹਾਸ ਵਿੱਚ ਖੋਜ ਕਰੋ। ਕੀ ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਉਨ੍ਹਾਂ ਨੇ ਕਿੱਥੇ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ ਕੀਤੇ? ਕਿਹੜੀਆਂ ਸਮੱਸਿਆਵਾਂ ਮੁੜ-ਮੁੜ ਆਉਂਦੀਆਂ ਹਨ?
 
 **ਤੁਹਾਡਾ ਜਾਂਚ ਕਰਨ ਦਾ ਤਰੀਕਾ:**
-- **ਖੋਜੋ** ਕਮਿਟ ਸੁਨੇਹਿਆਂ ਵਿੱਚ "optimize," "performance," ਜਾਂ "faster" ਵਰਗੇ ਸ਼ਬਦ
-- **ਦੇਖੋ** ਪੈਟਰਨ - ਕੀ ਉਹ ਮੁੜ-ਮੁੜ ਇੱਕੋ ਤਰ੍ਹਾਂ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਠੀਕ ਕਰ ਰਹੇ ਹਨ?
-- **ਪਛਾਣੋ** ਉਹ ਆਮ ਕਾਰਨ ਜੋ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਹੌਲੀ ਕਰਦੇ ਹਨ
-- **ਸਾਂਝਾ ਕਰੋ** ਜੋ ਤੁਸੀਂ ਪਤਾ ਲਗਾਇਆ - ਹੋਰ ਡਿਵੈਲਪਰ ਅਸਲ ਦੁਨੀਆ ਦੇ ਉਦਾਹਰਣਾਂ ਤੋਂ ਸਿੱਖ ਸਕਦੇ ਹਨ
+- **ਖੋਜੋ** commit ਸੁਨੇਹਿਆਂ ਵਿੱਚ "optimize," "performance," ਜਾਂ "faster" ਵਰਗੇ ਸ਼ਬਦਾਂ ਲਈ
+- **ਦੇਖੋ** ਪੈਟਰਨ - ਕੀ ਉਹ ਇੱਕੋ ਕਿਸਮ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਮੁੜ-ਮੁੜ ਠੀਕ ਕਰਦੇ ਹਨ?
+- **ਪਛਾਣੋ** ਆਮ ਕਾਰਨ ਜੋ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਹੌਲੀ ਕਰਦੇ ਹਨ
+- **ਸਾਂਝਾ ਕਰੋ** ਜੋ ਤੁਸੀਂ ਪਤਾ ਲਗਾਇਆ - ਹੋਰ ਵਿਕਾਸਕਾਰ ਅਸਲ ਦੁਨੀਆ ਦੇ ਉਦਾਹਰਣਾਂ ਤੋਂ ਸਿੱਖਦੇ ਹਨ
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28)
+
+## Review & Self Study
+
+[performance newsletter](https://perf.email) ਲਈ ਸਾਈਨ ਅਪ ਕਰਨ ਬਾਰੇ ਸੋਚੋ
+
+ਬ੍ਰਾਊਜ਼ਰਾਂ ਵੱਲੋਂ ਵੈਬ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਮਾਪਣ ਦੇ ਕੁਝ ਤਰੀਕੇ ਦੀ ਜਾਂਚ ਕਰੋ ਜਿਵੇਂ ਕਿ ਉਨ੍ਹਾਂ ਦੇ ਵੈਬ ਟੂਲਜ਼ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਟੈਬ ਦੇਖ ਕੇ। ਕੀ ਤੁਹਾਨੂੰ ਕੋਈ ਵੱਡੇ ਅੰਤਰ ਮਿਲਦੇ ਹਨ?
+
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਬ੍ਰਾਊਜ਼ਰ ਟਾਸਕ ਮੈਨੇਜਰ (Chrome ਵਿੱਚ Shift+Esc) ਖੋਲ੍ਹੋ ਅਤੇ ਵਧਾਈ ਦੇ ਸਰੋਤ ਦੀ ਵਰਤੋਂ ਦੇਖੋ
+- [ ] DevTools ਪ੍ਰਦਰਸ਼ਨ ਟੈਬ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੈਬਪੇਜ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਰਿਕਾਰਡ ਅਤੇ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ
+- [ ] ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਵਧਾਈ ਪੰਨੇ ਨੂੰ ਚੈੱਕ ਕਰੋ ਕਿ ਕਿਹੜੀਆਂ ਵਧਾਈਆਂ ਸਟਾਰਟਅਪ ਸਮੇਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੀਆਂ ਹਨ
+- [ ] ਵਧਾਈਆਂ ਨੂੰ ਅਸਥਾਈ ਤੌਰ 'ਤੇ ਅਯੋਗ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਅੰਤਰ ਦੇਖੋ
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪੋਸਟ-ਪਾਠ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝੋ
+- [ ] ਆਪਣੀ ਬ੍ਰਾਊਜ਼ਰ ਵਧਾਈ ਲਈ ਇੱਕ ਬੈਕਗ੍ਰਾਊਂਡ ਸਕ੍ਰਿਪਟ ਲਾਗੂ ਕਰੋ
+- [ ] ਬ੍ਰਾਊਜ਼ਰ.alarms ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੁਸ਼ਲ ਬੈਕਗ੍ਰਾਊਂਡ ਕੰਮ ਸਿੱਖੋ
+- [ ] ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟਾਂ ਅਤੇ ਬੈਕਗ੍ਰਾਊਂਡ ਸਕ੍ਰਿਪਟਾਂ ਦੇ ਵਿਚਕਾਰ ਸੰਦੇਸ਼ ਪਾਸ ਕਰਨ ਦਾ ਅਭਿਆਸ ਕਰੋ
+- [ ] ਆਪਣੀ ਵਧਾਈ ਦੇ ਸਰੋਤ ਦੀ ਵਰਤੋਂ ਨੂੰ ਮਾਪੋ ਅਤੇ ਸੁਧਾਰ ਕਰੋ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਪ੍ਰਦਰਸ਼ਨ ਯਾਤਰਾ**
+- [ ] ਬੈਕਗ੍ਰਾਊਂਡ ਸਮਰੱਥਾ ਨਾਲ ਇੱਕ ਉੱਚ-ਪ੍ਰਦਰਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰ ਵਧਾਈ ਪੂਰੀ ਕਰੋ
+- [ ] ਸੇਵਾ ਕਰਮਚਾਰੀਆਂ ਅਤੇ ਆਧੁਨਿਕ ਵਧਾਈ ਆਰਕੀਟੈਕਚਰ ਵਿੱਚ ਮਾਹਰ ਬਣੋ
+- [ ] ਕੁਸ਼ਲ ਡਾਟਾ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ੇਸ਼ਨ ਅਤੇ ਕੈਸ਼ਿੰਗ ਰਣਨੀਤੀਆਂ ਲਾਗੂ ਕਰੋ
+- [ ] ਵਧਾਈ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਉੱਚ-ਪੱਧਰ ਦੀ ਡੀਬੱਗਿੰਗ ਤਕਨੀਕਾਂ ਸਿੱਖੋ
+- [ ] ਆਪਣੀ ਵਧਾਈ ਨੂੰ ਕਾਰਗੁਜ਼ਾਰੀ ਅਤੇ ਸਰੋਤ ਕੁਸ਼ਲਤਾ ਲਈ ਸੁਧਾਰੋ
+- [ ] ਵਧਾਈ ਪ੍ਰਦਰਸ਼ਨ ਦ੍ਰਿਸ਼ਾਂ ਲਈ ਵਿਸਥਾਰਿਤ ਟੈਸਟ ਬਣਾਓ
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਸੁਧਾਰ ਮਾਹਰਤਾ**
+- [ ] ਉੱਚ-ਪ੍ਰਦਰਸ਼ਨ ਵਾਲੀਆਂ ਬ੍ਰਾਊਜ਼ਰ ਵਧਾਈਆਂ ਬਣਾਓ
+- [ ] Web Workers, Service Workers, ਅਤੇ ਆਧੁਨਿਕ ਵੈਬ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ
+- [ ] ਪ੍ਰਦਰਸ਼ਨ ਸੁਧਾਰ 'ਤੇ ਕੇਂਦਰਿਤ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਦਿਓ
+- [ ] ਬ੍ਰਾਊਜ਼ਰ ਇੰਟਰਨਲ ਅਤੇ ਉੱਚ-ਪੱਧਰ ਡੀਬੱਗਿੰਗ ਤਕਨੀਕਾਂ ਵਿੱਚ ਮਾਹਰ ਬਣੋ
+- [ ] ਪ੍ਰਦਰਸ਼ਨ ਨਿਗਰਾਨੀ ਟੂਲ ਅਤੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸ ਗਾਈਡ ਬਣਾਓ
+- [ ] ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਸੁਧਾਰਨ ਵਾਲੇ ਪ੍ਰਦਰਸ਼ਨ ਮਾਹਰ ਬਣੋ
+
+## 🎯 ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਵਧਾਈ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
+
+```mermaid
+timeline
+    title Complete Extension Development Progression
+    
+    section Performance Fundamentals (20 minutes)
+        Browser Profiling: DevTools mastery
+                         : Timeline analysis
+                         : Bottleneck identification
+                         : Critical rendering path
+        
+    section Background Tasks (25 minutes)
+        Extension Architecture: Message passing
+                              : Background scripts
+                              : Runtime API usage
+                              : Cross-context communication
+        
+    section Visual Feedback (30 minutes)
+        Dynamic UI: Color calculation algorithms
+                  : Canvas API integration
+                  : Icon generation
+                  : Real-time updates
+        
+    section Performance Optimization (35 minutes)
+        Efficient Code: Async operations
+                      : Memory management
+                      : Resource cleanup
+                      : Performance monitoring
+        
+    section Production Ready (45 minutes)
+        Polish & Testing: Cross-browser compatibility
+                        : Error handling
+                        : User experience
+                        : Performance validation
+        
+    section Advanced Features (1 week)
+        Extension Ecosystem: Chrome Web Store
+                           : User feedback
+                           : Analytics integration
+                           : Update management
+        
+    section Professional Development (2 weeks)
+        Enterprise Extensions: Team collaboration
+                             : Code reviews
+                             : CI/CD pipelines
+                             : Security audits
+        
+    section Expert Mastery (1 month)
+        Platform Expertise: Advanced Chrome APIs
+                          : Performance optimization
+                          : Architecture patterns
+                          : Open source contribution
+```
+
+### 🛠️ ਤੁਹਾਡਾ ਪੂਰਾ ਵਧਾਈ ਵਿਕਾਸ ਟੂਲਕਿਟ
 
-## ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼
+ਇਸ ਤ੍ਰਿਲੋਜੀ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਮਾਹਰ ਬਣ ਗਏ ਹੋ:
+- **ਬ੍ਰਾਊਜ਼ਰ ਆਰਕੀਟੈਕਚਰ**: ਬ੍ਰਾਊਜ਼ਰ ਸਿਸਟਮਾਂ ਨਾਲ ਵਧਾਈਆਂ ਕਿਵੇਂ ਜੁੜਦੀਆਂ ਹਨ ਇਸ ਦੀ ਗਹਿਰਾਈ ਸਮਝ
+- **ਪ੍ਰਦਰਸ਼ਨ ਪ੍ਰੋਫਾਈਲਿੰਗ**: ਵਿਕਾਸਕਾਰ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੋਤਲਨੈਕਸ ਦੀ ਪਛਾਣ ਅਤੇ ਠੀਕ ਕਰਨ ਦੀ ਸਮਰੱਥਾ
+- **Async ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਜਵਾਬਦੇਹ, ਗੈਰ-ਬਲੌਕਿੰਗ ਕਾਰਵਾਈਆਂ ਲਈ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੈਟਰਨ
+- **API ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਪ੍ਰਮਾਣਿਕਤਾ ਅਤੇ ਗਲਤੀ ਸੰਭਾਲ ਨਾਲ ਬਾਹਰੀ ਡਾਟਾ ਲੈਣਾ
+- **ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ**: ਡਾਇਨਾਮਿਕ UI ਅਪਡੇਟ ਅਤੇ Canvas-ਅਧਾਰਿਤ ਗ੍ਰਾਫਿਕਸ ਜਨਰੇਸ਼ਨ
+- **ਸੰਦੇਸ਼ ਪਾਸਿੰਗ**: ਵਧਾਈ ਆਰਕੀਟੈਕਚਰ ਵਿੱਚ ਇੰਟਰ-ਸਕ੍ਰਿਪਟ ਸੰਚਾਰ
+- **ਉਪਭੋਗਤਾ ਅਨੁਭਵ**: ਲੋਡਿੰਗ ਸਟੇਟ, ਗਲਤੀ ਸੰਭਾਲ, ਅਤੇ ਸਹਜ ਸੰਚਾਰ
+- **ਉਤਪਾਦਨ ਦੱਖਤਾ**: ਅਸਲ ਦੁਨੀਆ ਵਿੱਚ ਵਰਤੋਂ ਲਈ ਟੈਸਟਿੰਗ, ਡੀਬੱਗਿੰਗ, ਅਤੇ ਸੁਧਾਰ
 
-[ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/28)
+**ਅਸਲ ਦੁਨੀਆ ਦੇ ਅਰਜ਼ੀ**: ਤੁਹਾਡੀ ਵਧਾਈ ਵਿਕਾਸ ਦੱਖਤਾ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦੀ ਹੈ:
+- **Progressive Web Apps**: ਸਮਾਨ ਆਰਕੀਟੈਕਚਰ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਪੈਟਰਨ
+- **Electron Desktop Apps**: ਵੈਬ ਤਕਨਾਲੋਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕ੍ਰਾਸ-ਪਲੇਟਫਾਰਮ ਐਪਲੀਕੇਸ਼ਨ
+- **Mobile Hybrid Apps**: Cordova/PhoneGap ਵਿਕਾਸ ਵੈਬ APIs ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **Enterprise Web Applications**: ਜਟਿਲ ਡੈਸ਼ਬੋਰਡ ਅਤੇ ਉਤਪਾਦਕਤਾ ਟੂਲ
+- **Chrome DevTools Extensions**: ਉੱਚ-ਪੱਧਰ ਵਿਕਾਸਕਾਰ ਟੂਲਿੰਗ ਅਤੇ ਡੀਬੱਗਿੰਗ
+- **Web API Integration**: ਕੋਈ ਵੀ ਐਪਲੀਕੇਸ਼ਨ ਜੋ ਬਾਹਰੀ ਸੇਵਾਵਾਂ ਨਾਲ ਸੰਚਾਰ ਕਰਦਾ ਹੈ
 
-## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
+**ਪੇਸ਼ੇਵਰ ਪ੍ਰਭਾਵ**: ਹੁਣ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:
+- **ਬਣਾਓ** ਉਤਪਾਦਨ-ਤਿਆਰ ਬ੍ਰਾਊਜ਼ਰ ਵਧਾਈਆਂ ਸੰਕਲਪ ਤੋਂ ਉਤਪਾਦਨ ਤੱਕ
+- **ਸੁਧਾਰੋ** ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਉਦਯੋਗ-ਮਿਆਰੀ ਪ੍ਰੋਫਾਈਲਿੰਗ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਆਰਕੀਟੈਕਟ** ਸਕੇਲਬਲ ਸਿਸਟਮ ਸਹੀ ਚਿੰਤਾ ਦੇ ਵੰਡ ਨਾਲ
+- **ਡੀਬੱਗ** ਜਟਿਲ async ਕਾਰਵਾਈਆਂ ਅਤੇ ਕ੍ਰਾਸ-ਸੰਦਰਭ ਸੰਚਾਰ
+- **ਯੋਗਦਾਨ ਦਿਓ** ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਵਧਾਈ ਪ੍ਰੋਜੈਕਟਾਂ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਮਿਆਰਾਂ ਵਿੱਚ
 
-ਇੱਕ [ਪ੍ਰਦਰਸ਼ਨ ਨਿਊਜ਼ਲੈਟਰ](https://perf.email/) ਲਈ ਸਾਈਨ ਅਪ ਕਰਨ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ।
+**ਅਗਲੇ ਪੱਧਰ ਦੇ ਮੌਕੇ**:
+- **Chrome Web Store Developer**: ਲੱਖਾਂ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵਧਾਈਆਂ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰੋ
+- **Web Performance Engineer**: ਸੁਧਾਰ ਅਤੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਵਿੱਚ ਮਾਹਰ ਬਣੋ
+- **Browser Platform Developer**: ਬ੍ਰਾਊਜ਼ਰ ਇੰਜਨ ਵਿਕਾਸ ਵਿੱਚ ਯੋਗਦਾਨ ਦਿਓ
+- **Extension Framework Creator**: ਉਹ ਟੂਲ ਬਣਾਓ ਜੋ ਹੋਰ ਵਿਕਾਸਕਾਰਾਂ ਦੀ ਮਦਦ ਕਰਦੇ ਹਨ
+- **Developer Relations**: ਸਿੱਖਣ ਅਤੇ ਸਮੱਗਰੀ ਬਣਾਉਣ ਦੇ ਜ਼ਰੀਏ ਗਿਆਨ ਸਾਂਝਾ ਕਰੋ
 
-ਬ੍ਰਾਊਜ਼ਰਾਂ ਵੱਲੋਂ ਵੈਬ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਮਾਪਣ ਦੇ ਕੁਝ ਤਰੀਕਿਆਂ ਦੀ ਜਾਂਚ ਕਰੋ, ਉਨ੍ਹਾਂ ਦੇ ਵੈਬ ਟੂਲਜ਼ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਟੈਬਾਂ ਦੇਖ ਕੇ। ਕੀ ਤੁਹਾਨੂੰ ਕੋਈ ਵੱਡੇ ਅੰਤਰ ਮਿਲਦੇ ਹਨ?
+🌟 **ਸਫਲਤਾ ਪ੍ਰਾਪਤ ਕੀਤੀ**: ਤੁਸੀਂ ਇੱਕ ਪੂਰੀ, ਕਾਰਗੁਜ਼ਾਰ ਬ੍ਰਾਊਜ਼ਰ ਵਧਾਈ ਬਣਾਈ ਹੈ ਜੋ ਪੇਸ਼ੇਵਰ ਵਿਕਾਸ ਅਭਿਆਸ ਅਤੇ ਆਧੁਨਿਕ ਵੈਬ ਮਿਆਰਾਂ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ!
 
-## ਅਸਾਈਨਮੈਂਟ
+## Assignment
 
-[ਕਿਸੇ ਸਾਈਟ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ](assignment.md)
+[ਇੱਕ ਸਾਈਟ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ](assignment.md)
 
 ---
 
 **ਅਸਵੀਕਰਤੀ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/6-space-game/1-introduction/README.md b/translations/pa/6-space-game/1-introduction/README.md
index 34df3a59e4..20dd2334e3 100644
--- a/translations/pa/6-space-game/1-introduction/README.md
+++ b/translations/pa/6-space-game/1-introduction/README.md
@@ -1,56 +1,142 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "862f7f2ef320f6f8950fae379e6ece45",
-  "translation_date": "2025-10-22T18:11:48+00:00",
+  "original_hash": "a6332a7bb4d0be3bfd24199c83993777",
+  "translation_date": "2025-11-03T16:56:42+00:00",
   "source_file": "6-space-game/1-introduction/README.md",
   "language_code": "pa"
 }
 -->
 # ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 1: ਜਾਣ ਪਛਾਣ
 
-![ਸਪੇਸ ਗੇਮ ਐਨੀਮੇਸ਼ਨ ਜੋ ਗੇਮਪਲੇ ਦਿਖਾਉਂਦੀ ਹੈ](../../../../6-space-game/images/pewpew.gif)
-
-ਜਿਵੇਂ NASA ਦਾ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਸਪੇਸ ਲਾਂਚ ਦੌਰਾਨ ਕਈ ਸਿਸਟਮਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਾਂਝਾ ਕਰਦਾ ਹੈ, ਅਸੀਂ ਇੱਕ ਸਪੇਸ ਗੇਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਦਿਖਾਏਗਾ ਕਿ ਕਿਸ ਤਰ੍ਹਾਂ ਇੱਕ ਪ੍ਰੋਗਰਾਮ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸੇ ਬਿਨਾਂ ਰੁਕਾਵਟ ਦੇ ਇਕੱਠੇ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ। ਕੁਝ ਐਸਾ ਬਣਾਉਂਦੇ ਹੋਏ ਜੋ ਤੁਸੀਂ ਖੇਡ ਸਕਦੇ ਹੋ, ਤੁਸੀਂ ਅਹਿਮ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸੰਕਲਪ ਸਿੱਖੋਗੇ ਜੋ ਕਿਸੇ ਵੀ ਸਾਫਟਵੇਅਰ ਪ੍ਰੋਜੈਕਟ ਲਈ ਲਾਗੂ ਹੁੰਦੇ ਹਨ।
-
-ਅਸੀਂ ਕੋਡ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਦੇ ਦੋ ਮੁੱਖ ਤਰੀਕੇ: ਵਾਰਸ ਅਤੇ ਰਚਨਾ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ। ਇਹ ਸਿਰਫ਼ ਅਕਾਦਮਿਕ ਸੰਕਲਪ ਨਹੀਂ ਹਨ - ਇਹ ਉਹੀ ਪੈਟਰਨ ਹਨ ਜੋ ਵੀਡੀਓ ਗੇਮਾਂ ਤੋਂ ਬੈਂਕਿੰਗ ਸਿਸਟਮਾਂ ਤੱਕ ਸਭ ਕੁਝ ਚਲਾਉਂਦੇ ਹਨ। ਅਸੀਂ ਇੱਕ ਸੰਚਾਰ ਪ੍ਰਣਾਲੀ ਨੂੰ ਵੀ ਲਾਗੂ ਕਰਾਂਗੇ ਜਿਸਨੂੰ pub/sub ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਜੋ ਸਪੇਸਕ੍ਰਾਫਟ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਸੰਚਾਰ ਜਾਲਾਂ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ, ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਨੂੰ ਜਾਣਕਾਰੀ ਸਾਂਝਾ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ ਬਿਨਾਂ ਨਿਰਭਰਤਾ ਬਣਾਉਣ ਦੇ।
+```mermaid
+journey
+    title Your Game Development Journey
+    section Foundation
+      Learn game architecture: 3: Student
+      Understand inheritance: 4: Student
+      Explore composition: 4: Student
+    section Communication
+      Build pub/sub system: 4: Student
+      Design event flow: 5: Student
+      Connect components: 5: Student
+    section Application
+      Create game objects: 5: Student
+      Implement patterns: 5: Student
+      Plan game structure: 5: Student
+```
 
-ਇਸ ਸਿਰੀਜ਼ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਮਝ ਜਾਵੋਗੇ ਕਿ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਉਣੀਆਂ ਹਨ ਜੋ ਵਧ ਸਕਦੀਆਂ ਹਨ ਅਤੇ ਵਿਕਸਿਤ ਹੋ ਸਕਦੀਆਂ ਹਨ - ਚਾਹੇ ਤੁਸੀਂ ਗੇਮਾਂ, ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਜਾਂ ਕੋਈ ਹੋਰ ਸਾਫਟਵੇਅਰ ਸਿਸਟਮ ਵਿਕਸਿਤ ਕਰ ਰਹੇ ਹੋਵੋ।
+![ਸਪੇਸ ਗੇਮ ਐਨੀਮੇਸ਼ਨ ਜੋ ਗੇਮਪਲੇ ਦਿਖਾ ਰਿਹਾ ਹੈ](../../../../6-space-game/images/pewpew.gif)
+
+NASA ਦੇ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਵਾਂਗ, ਜੋ ਸਪੇਸ ਲਾਂਚ ਦੌਰਾਨ ਕਈ ਸਿਸਟਮਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਾਂਭਦਾ ਹੈ, ਅਸੀਂ ਇੱਕ ਸਪੇਸ ਗੇਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਦਿਖਾਏਗਾ ਕਿ ਕਿਸ ਤਰ੍ਹਾਂ ਇੱਕ ਪ੍ਰੋਗਰਾਮ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸੇ ਬਿਨਾਂ ਰੁਕਾਵਟ ਦੇ ਇਕੱਠੇ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ। ਕੁਝ ਐਸਾ ਬਣਾਉਣ ਦੇ ਨਾਲ ਜੋ ਤੁਸੀਂ ਖੇਡ ਸਕਦੇ ਹੋ, ਤੁਸੀਂ ਉਹ ਮੁੱਖ ਪ੍ਰੋਗਰਾਮਿੰਗ ਧਾਰਨਾਵਾਂ ਸਿੱਖੋਗੇ ਜੋ ਕਿਸੇ ਵੀ ਸਾਫਟਵੇਅਰ ਪ੍ਰੋਜੈਕਟ ਲਈ ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ।
+
+ਅਸੀਂ ਕੋਡ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਦੇ ਦੋ ਮੁੱਖ ਤਰੀਕੇ: ਵਾਰਸ ਅਤੇ ਰਚਨਾ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ। ਇਹ ਸਿਰਫ਼ ਅਕਾਦਮਿਕ ਧਾਰਨਾਵਾਂ ਨਹੀਂ ਹਨ – ਇਹ ਉਹੀ ਪੈਟਰਨ ਹਨ ਜੋ ਵੀਡੀਓ ਗੇਮਾਂ ਤੋਂ ਬੈਂਕਿੰਗ ਸਿਸਟਮ ਤੱਕ ਸਭ ਕੁਝ ਚਲਾਉਂਦੇ ਹਨ। ਅਸੀਂ ਇੱਕ ਸੰਚਾਰ ਪ੍ਰਣਾਲੀ ਨੂੰ ਵੀ ਲਾਗੂ ਕਰਾਂਗੇ ਜਿਸਨੂੰ pub/sub ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਸਪੇਸਕ੍ਰਾਫਟ ਵਿੱਚ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਸੰਚਾਰ ਜਾਲਾਂ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ, ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਨੂੰ ਜਾਣਕਾਰੀ ਸਾਂਝੀ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ ਬਿਨਾਂ ਨਿਰਭਰਤਾ ਬਣਾਉਣ ਦੇ।
+
+ਇਸ ਸਿਰੀਜ਼ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਮਝ ਪਾ ਲੋਗੇ ਕਿ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਉਣੀਆਂ ਹਨ ਜੋ ਵਧ ਸਕਦੀਆਂ ਹਨ ਅਤੇ ਵਿਕਸਿਤ ਹੋ ਸਕਦੀਆਂ ਹਨ – ਚਾਹੇ ਤੁਸੀਂ ਗੇਮਾਂ, ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਜਾਂ ਕੋਈ ਹੋਰ ਸਾਫਟਵੇਅਰ ਸਿਸਟਮ ਵਿਕਸਿਤ ਕਰ ਰਹੇ ਹੋਵੋ।
+
+```mermaid
+mindmap
+  root((Game Architecture))
+    Object Organization
+      Inheritance
+      Composition
+      Class Hierarchies
+      Behavior Mixing
+    Communication Patterns
+      Pub/Sub System
+      Event Emitters
+      Message Passing
+      Loose Coupling
+    Game Objects
+      Properties (x, y)
+      Behaviors (move, collide)
+      Lifecycle Management
+      State Management
+    Design Patterns
+      Factory Functions
+      Observer Pattern
+      Component System
+      Event-Driven Architecture
+    Scalability
+      Modular Design
+      Maintainable Code
+      Testing Strategies
+      Performance Optimization
+```
 
-## ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼
+## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 
-[ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/29)
+[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/29)
 
 ## ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਵਾਰਸ ਅਤੇ ਰਚਨਾ
 
-ਜਿਵੇਂ ਪ੍ਰੋਜੈਕਟ ਜਟਿਲਤਾ ਵਿੱਚ ਵਧਦੇ ਹਨ, ਕੋਡ ਦਾ ਸੰਗਠਨ ਮਹੱਤਵਪੂਰਨ ਬਣ ਜਾਂਦਾ ਹੈ। ਜੋ ਇੱਕ ਸਧਾਰਨ ਸਕ੍ਰਿਪਟ ਵਜੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਉਹ ਬਿਨਾਂ ਸਹੀ ਬਣਤਰ ਦੇ ਸੰਭਾਲਣਾ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦਾ ਹੈ - ਬਿਲਕੁਲ ਜਿਵੇਂ Apollo ਮਿਸ਼ਨ ਨੂੰ ਹਜ਼ਾਰਾਂ ਹਿੱਸਿਆਂ ਦੇ ਵਿਚਕਾਰ ਧਿਆਨਪੂਰਵਕ ਸਹਿ-ਸੰਚਾਲਨ ਦੀ ਲੋੜ ਸੀ।
+ਜਿਵੇਂ-ਜਿਵੇਂ ਪ੍ਰੋਜੈਕਟ ਜਟਿਲ ਹੋ ਜਾਂਦੇ ਹਨ, ਕੋਡ ਦਾ ਸੰਗਠਨ ਮਹੱਤਵਪੂਰਨ ਬਣ ਜਾਂਦਾ ਹੈ। ਜੋ ਇੱਕ ਸਧਾਰਨ ਸਕ੍ਰਿਪਟ ਵਜੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਉਹ ਬਿਨਾਂ ਸਹੀ ਸਟ੍ਰਕਚਰ ਦੇ ਸਾਂਭਣਾ ਮੁਸ਼ਕਲ ਬਣ ਸਕਦਾ ਹੈ – ਬਿਲਕੁਲ ਜਿਵੇਂ Apollo ਮਿਸ਼ਨ ਨੂੰ ਹਜ਼ਾਰਾਂ ਹਿੱਸਿਆਂ ਦੇ ਵਿਚਕਾਰ ਸਹੀ ਤਾਲਮੇਲ ਦੀ ਲੋੜ ਸੀ।
 
-ਅਸੀਂ ਕੋਡ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਦੇ ਦੋ ਮੁੱਖ ਤਰੀਕੇ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ: ਵਾਰਸ ਅਤੇ ਰਚਨਾ। ਹਰ ਇੱਕ ਦੇ ਵੱਖ-ਵੱਖ ਫਾਇਦੇ ਹਨ, ਅਤੇ ਦੋਵਾਂ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਲਈ ਸਹੀ ਤਰੀਕਾ ਚੁਣਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ। ਅਸੀਂ ਆਪਣੇ ਸਪੇਸ ਗੇਮ ਦੇ ਜ਼ਰੀਏ ਇਹ ਸੰਕਲਪ ਦਿਖਾਵਾਂਗੇ, ਜਿੱਥੇ ਹੀਰੋ, ਦੁਸ਼ਮਨ, ਪਾਵਰ-ਅੱਪਸ ਅਤੇ ਹੋਰ ਵਸਤੂਆਂ ਨੂੰ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਪਰਸਪਰ ਕਰਨਾ ਪਵੇਗਾ।
+ਅਸੀਂ ਕੋਡ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਦੇ ਦੋ ਮੁੱਖ ਤਰੀਕੇ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ: ਵਾਰਸ ਅਤੇ ਰਚਨਾ। ਹਰ ਇੱਕ ਦੇ ਵੱਖ-ਵੱਖ ਫਾਇਦੇ ਹਨ, ਅਤੇ ਦੋਵਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਲਈ ਸਹੀ ਤਰੀਕਾ ਚੁਣਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਅਸੀਂ ਇਹ ਧਾਰਨਾਵਾਂ ਆਪਣੇ ਸਪੇਸ ਗੇਮ ਦੁਆਰਾ ਦਿਖਾਵਾਂਗੇ, ਜਿੱਥੇ ਹੀਰੋ, ਦੁਸ਼ਮਣ, ਪਾਵਰ-ਅੱਪਸ ਅਤੇ ਹੋਰ ਵਸਤੂਆਂ ਨੂੰ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਪਰਸਪਰ ਕਰਨਾ ਪਵੇਗਾ।
 
 ✅ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਪ੍ਰੋਗਰਾਮਿੰਗ ਕਿਤਾਬਾਂ ਵਿੱਚੋਂ ਇੱਕ [ਡਿਜ਼ਾਈਨ ਪੈਟਰਨ](https://en.wikipedia.org/wiki/Design_Patterns) ਬਾਰੇ ਹੈ।
 
-ਕਿਸੇ ਵੀ ਗੇਮ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ `game objects` ਹੁੰਦੇ ਹਨ - ਇੰਟਰੈਕਟਿਵ ਤੱਤ ਜੋ ਤੁਹਾਡੇ ਗੇਮ ਵਰਲਡ ਨੂੰ ਭਰਦੇ ਹਨ। ਹੀਰੋ, ਦੁਸ਼ਮਨ, ਪਾਵਰ-ਅੱਪਸ ਅਤੇ ਵਿਜ਼ੁਅਲ ਪ੍ਰਭਾਵ ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟ ਹਨ। ਹਰ ਇੱਕ `x` ਅਤੇ `y` ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਨਿਰਧਾਰਤ ਸਕ੍ਰੀਨ ਕੋਆਰਡੀਨੇਟਸ 'ਤੇ ਮੌਜੂਦ ਹੁੰਦਾ ਹੈ, ਬਿਲਕੁਲ ਜਿਵੇਂ ਕੋਆਰਡੀਨੇਟ ਪਲੇਨ 'ਤੇ ਬਿੰਦੂ ਪਲਾਟ ਕਰਦੇ ਹਨ।
+ਕਿਸੇ ਵੀ ਗੇਮ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ `game objects` ਹੁੰਦੇ ਹਨ – ਇੰਟਰਐਕਟਿਵ ਤੱਤ ਜੋ ਤੁਹਾਡੇ ਗੇਮ ਵਰਲਡ ਨੂੰ ਭਰਦੇ ਹਨ। ਹੀਰੋ, ਦੁਸ਼ਮਣ, ਪਾਵਰ-ਅੱਪਸ ਅਤੇ ਵਿਜ਼ੁਅਲ ਪ੍ਰਭਾਵ ਸਾਰੇ ਗੇਮ ਓਬਜੈਕਟ ਹਨ। ਹਰ ਇੱਕ `x` ਅਤੇ `y` ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਿਰਧਾਰਿਤ ਸਕ੍ਰੀਨ ਕੋਆਰਡੀਨੇਟਸ 'ਤੇ ਮੌਜੂਦ ਹੁੰਦਾ ਹੈ, ਬਿਲਕੁਲ ਜਿਵੇਂ ਕੋਆਰਡੀਨੇਟ ਪਲੇਨ 'ਤੇ ਬਿੰਦੂ ਪਲਾਟ ਕਰਦੇ ਹੋ।
 
-ਇਹਨਾਂ ਦੇ ਵਿਜ਼ੁਅਲ ਅੰਤਰ ਦੇ ਬਾਵਜੂਦ, ਇਹ ਵਸਤੂਆਂ ਅਕਸਰ ਮੁੱਢਲੇ ਵਿਹਾਰਾਂ ਨੂੰ ਸਾਂਝਾ ਕਰਦੀਆਂ ਹਨ:
+ਇਹਨਾਂ ਦੇ ਵਿਜ਼ੁਅਲ ਅੰਤਰ ਦੇ ਬਾਵਜੂਦ, ਇਹ ਵਸਤੂਆਂ ਅਕਸਰ ਮੁੱਖ ਵਿਹਾਰ ਸਾਂਝੇ ਕਰਦੀਆਂ ਹਨ:
 
-- **ਇਹ ਕਿਤੇ ਮੌਜੂਦ ਹੁੰਦੀਆਂ ਹਨ** - ਹਰ ਵਸਤੂ ਦੇ x ਅਤੇ y ਕੋਆਰਡੀਨੇਟ ਹੁੰਦੇ ਹਨ ਤਾਂ ਜੋ ਗੇਮ ਨੂੰ ਪਤਾ ਹੋਵੇ ਕਿ ਇਸਨੂੰ ਕਿੱਥੇ ਡਰਾਅ ਕਰਨਾ ਹੈ
-- **ਕਈ ਚਲ ਸਕਦੇ ਹਨ** - ਹੀਰੋ ਦੌੜਦੇ ਹਨ, ਦੁਸ਼ਮਨ ਪਿੱਛਾ ਕਰਦੇ ਹਨ, ਗੋਲੀਆਂ ਸਕ੍ਰੀਨ 'ਤੇ ਦੌੜਦੀਆਂ ਹਨ
-- **ਇਹਨਾਂ ਦੀ ਉਮਰ ਹੁੰਦੀ ਹੈ** - ਕੁਝ ਹਮੇਸ਼ਾ ਰਹਿੰਦੇ ਹਨ, ਹੋਰ (ਜਿਵੇਂ ਧਮਾਕੇ) ਕੁਝ ਸਮੇਂ ਲਈ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਅਤੇ ਗਾਇਬ ਹੋ ਜਾਂਦੇ ਹਨ
-- **ਇਹਨਾਂ ਦਾ ਪ੍ਰਤੀਕਰਮ ਹੁੰਦਾ ਹੈ** - ਜਦੋਂ ਚੀਜ਼ਾਂ ਟਕਰਾਉਂਦੀਆਂ ਹਨ, ਪਾਵਰ-ਅੱਪਸ ਇਕੱਠੇ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਹੈਲਥ ਬਾਰ ਅੱਪਡੇਟ ਹੁੰਦੇ ਹਨ
+- **ਇਹ ਕਿਤੇ ਮੌਜੂਦ ਹੁੰਦੀਆਂ ਹਨ** – ਹਰ ਵਸਤੂ ਦੇ x ਅਤੇ y ਕੋਆਰਡੀਨੇਟ ਹੁੰਦੇ ਹਨ ਤਾਂ ਜੋ ਗੇਮ ਜਾਣ ਸਕੇ ਕਿ ਇਸਨੂੰ ਕਿੱਥੇ ਡਰਾਅ ਕਰਨਾ ਹੈ
+- **ਕਈ ਚਲ ਸਕਦੀਆਂ ਹਨ** – ਹੀਰੋ ਦੌੜਦੇ ਹਨ, ਦੁਸ਼ਮਣ ਪਿੱਛਾ ਕਰਦੇ ਹਨ, ਗੋਲੀਆਂ ਸਕ੍ਰੀਨ 'ਤੇ ਉੱਡਦੀਆਂ ਹਨ
+- **ਇਹਨਾਂ ਦੀ ਉਮਰ ਹੁੰਦੀ ਹੈ** – ਕੁਝ ਹਮੇਸ਼ਾ ਰਹਿੰਦੇ ਹਨ, ਹੋਰ (ਜਿਵੇਂ ਧਮਾਕੇ) ਕੁਝ ਸਮੇਂ ਲਈ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਅਤੇ ਗਾਇਬ ਹੋ ਜਾਂਦੇ ਹਨ
+- **ਇਹਨਾਂ ਦਾ ਪ੍ਰਤੀਕਰਮ ਹੁੰਦਾ ਹੈ** – ਜਦੋਂ ਚੀਜ਼ਾਂ ਟਕਰਾਉਂਦੀਆਂ ਹਨ, ਪਾਵਰ-ਅੱਪਸ ਇਕੱਠੇ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਹੈਲਥ ਬਾਰ ਅਪਡੇਟ ਹੁੰਦੇ ਹਨ
 
-✅ Pac-Man ਵਰਗੇ ਗੇਮ ਬਾਰੇ ਸੋਚੋ। ਕੀ ਤੁਸੀਂ ਇਸ ਗੇਮ ਵਿੱਚ ਉਪਰੋਕਤ ਚਾਰ ਆਬਜੈਕਟ ਕਿਸਮਾਂ ਦੀ ਪਹਿਚਾਣ ਕਰ ਸਕਦੇ ਹੋ?
+✅ Pac-Man ਵਰਗੇ ਗੇਮ ਬਾਰੇ ਸੋਚੋ। ਕੀ ਤੁਸੀਂ ਇਸ ਗੇਮ ਵਿੱਚ ਉਪਰੋਕਤ ਚਾਰ ਓਬਜੈਕਟ ਕਿਸਮਾਂ ਦੀ ਪਹਿਚਾਣ ਕਰ ਸਕਦੇ ਹੋ?
 
-### ਕੋਡ ਰਾਹੀਂ ਵਿਹਾਰ ਨੂੰ ਪ੍ਰਗਟ ਕਰਨਾ
+```mermaid
+classDiagram
+    class GameObject {
+        +x: number
+        +y: number
+        +type: string
+        +exists_somewhere()
+    }
+    
+    class MovableObject {
+        +moveTo(x, y)
+        +can_move_around()
+    }
+    
+    class TemporaryObject {
+        +lifespan: number
+        +has_lifespan()
+    }
+    
+    class InteractiveObject {
+        +onCollision()
+        +reacts_to_stuff()
+    }
+    
+    GameObject <|-- MovableObject
+    GameObject <|-- TemporaryObject
+    GameObject <|-- InteractiveObject
+    
+    MovableObject <|-- Hero
+    MovableObject <|-- Enemy
+    MovableObject <|-- Bullet
+    
+    TemporaryObject <|-- PowerUp
+    TemporaryObject <|-- Explosion
+    
+    InteractiveObject <|-- Collectible
+    InteractiveObject <|-- Obstacle
+```
 
-ਹੁਣ ਜਦੋਂ ਤੁਹਾਨੂੰ ਸਮਝ ਆ ਗਈ ਹੈ ਕਿ ਗੇਮ ਆਬਜੈਕਟਾਂ ਸਾਂਝੇ ਵਿਹਾਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸਾਂਝਾ ਕਰਦੇ ਹਨ, ਆਓ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇਹ ਵਿਹਾਰ ਲਾਗੂ ਕਰਨ ਦੇ ਤਰੀਕੇ ਦੀ ਪੜਚੋਲ ਕਰੀਏ। ਤੁਸੀਂ ਕਲਾਸਾਂ ਜਾਂ ਵਿਅਕਤੀਗਤ ਆਬਜੈਕਟਾਂ ਨਾਲ ਜੁੜੇ ਤਰੀਕਿਆਂ ਰਾਹੀਂ ਆਬਜੈਕਟ ਵਿਹਾਰ ਨੂੰ ਪ੍ਰਗਟ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਚੋਣ ਕਰਨ ਲਈ ਕਈ ਤਰੀਕੇ ਹਨ।
+### ਕੋਡ ਦੁਆਰਾ ਵਿਹਾਰ ਨੂੰ ਪ੍ਰਗਟ ਕਰਨਾ
+
+ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਸਮਝ ਗਏ ਹੋ ਕਿ ਗੇਮ ਓਬਜੈਕਟ ਸਾਂਝੇ ਵਿਹਾਰ ਕਰਦੇ ਹਨ, ਆਓ ਵੇਖੀਏ ਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇਹ ਵਿਹਾਰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ। ਤੁਸੀਂ ਵਿਅਕਤੀਗਤ ਓਬਜੈਕਟਾਂ ਜਾਂ ਕਲਾਸਾਂ ਨਾਲ ਜੁੜੇ ਮੈਥਡਾਂ ਦੁਆਰਾ ਓਬਜੈਕਟ ਵਿਹਾਰ ਨੂੰ ਪ੍ਰਗਟ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਚੋਣ ਕਰਨ ਲਈ ਕਈ ਤਰੀਕੇ ਹਨ।
 
 **ਕਲਾਸ-ਅਧਾਰਿਤ ਤਰੀਕਾ**
 
-ਕਲਾਸਾਂ ਅਤੇ ਵਾਰਸ ਗੇਮ ਆਬਜੈਕਟਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਲਈ ਇੱਕ ਸੰਗਠਿਤ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਕਿ Carl Linnaeus ਦੁਆਰਾ ਵਿਕਸਿਤ ਟੈਕਸੋਨੋਮਿਕ ਵਰਗੀਕਰਨ ਪ੍ਰਣਾਲੀ, ਤੁਸੀਂ ਆਮ ਗੁਣਾਂ ਵਾਲੀ ਬੇਸ ਕਲਾਸ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਫਿਰ ਵਿਸ਼ੇਸ਼ ਯੋਗਤਾਵਾਂ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋਏ ਇਹਨਾਂ ਮੁੱਢਲੇ ਗੁਣਾਂ ਨੂੰ ਵਾਰਸ ਕਰਨ ਵਾਲੀਆਂ ਵਿਸ਼ੇਸ਼ ਕਲਾਸਾਂ ਬਣਾਉਂਦੇ ਹੋ।
+ਕਲਾਸਾਂ ਅਤੇ ਵਾਰਸ ਗੇਮ ਓਬਜੈਕਟਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਲਈ ਇੱਕ ਸਟ੍ਰਕਚਰਡ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ Carl Linnaeus ਦੁਆਰਾ ਵਿਕਸਿਤ ਟੈਕਸੋਨੋਮਿਕ ਵਰਗੀਕਰਨ ਪ੍ਰਣਾਲੀ, ਤੁਸੀਂ ਆਮ ਗੁਣਾਂ ਵਾਲੀ ਇੱਕ ਬੇਸ ਕਲਾਸ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਫਿਰ ਵਿਸ਼ੇਸ਼ ਸਮਰੱਥਾਵਾਂ ਜੋੜਦੇ ਹੋਈਆਂ ਇਹਨਾਂ ਮੁੱਢਲੀ ਗੁਣਾਂ ਨੂੰ ਵਾਰਸ ਕਰਨ ਵਾਲੀਆਂ ਵਿਸ਼ੇਸ਼ ਕਲਾਸਾਂ ਬਣਾਉਂਦੇ ਹੋ।
 
-✅ ਵਾਰਸ ਨੂੰ ਸਮਝਣਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਸੰਕਲਪ ਹੈ। [MDN ਦੇ ਵਾਰਸ ਬਾਰੇ ਲੇਖ](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 'ਤੇ ਹੋਰ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰੋ।
+✅ ਵਾਰਸ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਧਾਰਨਾ ਹੈ। [MDN ਦੇ ਵਾਰਸ ਬਾਰੇ ਲੇਖ](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 'ਤੇ ਹੋਰ ਜਾਣੋ।
 
-ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਕਲਾਸਾਂ ਅਤੇ ਵਾਰਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਗੇਮ ਆਬਜੈਕਟਾਂ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ:
+ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਕਲਾਸਾਂ ਅਤੇ ਵਾਰਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਗੇਮ ਓਬਜੈਕਟਾਂ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ:
 
 ```javascript
 // Step 1: Create the base GameObject class
@@ -63,10 +149,10 @@ class GameObject {
 }
 ```
 
-**ਆਓ ਇਸਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਵੰਡ ਕੇ ਸਮਝੀਏ:**
-- ਅਸੀਂ ਇੱਕ ਬੁਨਿਆਦੀ ਟੈਂਪਲੇਟ ਬਣਾਉਂਦੇ ਹਾਂ ਜੋ ਹਰ ਗੇਮ ਆਬਜੈਕਟ ਵਰਤ ਸਕਦਾ ਹੈ
-- ਕਨਸਟ੍ਰਕਟਰ ਸੇਵ ਕਰਦਾ ਹੈ ਕਿ ਆਬਜੈਕਟ ਕਿੱਥੇ ਹੈ (`x`, `y`) ਅਤੇ ਇਹ ਕਿਸ ਤਰ੍ਹਾਂ ਦੀ ਚੀਜ਼ ਹੈ
-- ਇਹ ਉਹ ਅਧਾਰ ਬਣ ਜਾਂਦਾ ਹੈ ਜਿਸ 'ਤੇ ਤੁਹਾਡੇ ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟ ਬਣਾਏ ਜਾਣਗੇ
+**ਇਸਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਤੋੜ ਕੇ ਸਮਝਦੇ ਹਾਂ:**
+- ਅਸੀਂ ਇੱਕ ਬੁਨਿਆਦੀ ਟੈਂਪਲੇਟ ਬਣਾਉਂਦੇ ਹਾਂ ਜੋ ਹਰ ਗੇਮ ਓਬਜੈਕਟ ਵਰਤ ਸਕਦਾ ਹੈ
+- ਕਨਸਟ੍ਰਕਟਰ ਸੇਵ ਕਰਦਾ ਹੈ ਕਿ ਓਬਜੈਕਟ ਕਿੱਥੇ ਹੈ (`x`, `y`) ਅਤੇ ਇਹ ਕਿਸ ਕਿਸਮ ਦਾ ਹੈ
+- ਇਹ ਉਹ ਬੁਨਿਆਦ ਬਣ ਜਾਂਦੀ ਹੈ ਜਿਸ 'ਤੇ ਤੁਹਾਡੇ ਸਾਰੇ ਗੇਮ ਓਬਜੈਕਟ ਬਣਾਏ ਜਾਣਗੇ
 
 ```javascript
 // Step 2: Add movement capability through inheritance
@@ -84,9 +170,9 @@ class Movable extends GameObject {
 ```
 
 **ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**
-- GameObject ਕਲਾਸ ਨੂੰ ਵਧਾਇਆ ਹੈ ਤਾਂ ਜੋ ਮੂਵਮੈਂਟ ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕੀਤੀ ਜਾ ਸਕੇ
-- `super()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੇਰੈਂਟ ਕਨਸਟ੍ਰਕਟਰ ਨੂੰ ਕਾਲ ਕੀਤਾ ਹੈ ਤਾਂ ਜੋ ਵਾਰਸ ਕੀਤੇ ਗੁਣਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾ ਸਕੇ
-- ਇੱਕ `moveTo()` ਮੈਥਡ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ ਜੋ ਆਬਜੈਕਟ ਦੀ ਸਥਿਤੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ
+- **GameObject ਕਲਾਸ ਨੂੰ ਵਧਾਇਆ** ਹੈ ਤਾਂ ਜੋ ਮੂਵਮੈਂਟ ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕੀਤੀ ਜਾ ਸਕੇ
+- **ਪੇਰੈਂਟ ਕਨਸਟ੍ਰਕਟਰ ਨੂੰ ਕਾਲ ਕੀਤਾ** `super()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵਾਰਸ ਕੀਤੇ ਗੁਣਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ
+- **ਇੱਕ `moveTo()` ਮੈਥਡ ਜੋੜਿਆ** ਜੋ ਓਬਜੈਕਟ ਦੀ ਪੋਜ਼ੀਸ਼ਨ ਅਪਡੇਟ ਕਰਦਾ ਹੈ
 
 ```javascript
 // Step 3: Create specific game object types
@@ -110,17 +196,17 @@ const tree = new Tree(10, 15);
 // tree.moveTo() would cause an error - trees can't move
 ```
 
-**ਇਹ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝਣਾ:**
-- **ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ** ਵਾਲੇ ਆਬਜੈਕਟ ਕਿਸਮਾਂ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਉਚਿਤ ਵਿਹਾਰਾਂ ਨੂੰ ਵਾਰਸ ਕਰਦੇ ਹਨ
-- **ਦਿਖਾਉਂਦਾ ਹੈ** ਕਿ ਵਾਰਸ ਕਿਵੇਂ ਚੁਣਵਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ
-- **ਦਿਖਾਉਂਦਾ ਹੈ** ਕਿ ਹੀਰੋ ਚਲ ਸਕਦੇ ਹਨ ਜਦਕਿ ਦਰੱਖਤ ਅਸਥਿਰ ਰਹਿੰਦੇ ਹਨ
-- **ਦਿਖਾਉਂਦਾ ਹੈ** ਕਿ ਕਲਾਸ ਹਾਇਰਾਰਕੀ ਅਣਚਾਹੇ ਕਾਰਵਾਈਆਂ ਨੂੰ ਰੋਕਦੀ ਹੈ
+**ਇਹ ਧਾਰਨਾਵਾਂ ਨੂੰ ਸਮਝਣਾ:**
+- **ਵਿਸ਼ੇਸ਼ ਓਬਜੈਕਟ ਕਿਸਮਾਂ ਬਣਾਉਂਦਾ ਹੈ** ਜੋ ਉਚਿਤ ਵਿਹਾਰ ਵਾਰਸ ਕਰਦੇ ਹਨ
+- **ਦਿਖਾਉਂਦਾ ਹੈ** ਕਿ ਵਾਰਸ ਚੁਣਵਾਂਦ ਗੁਣਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ
+- **ਦਿਖਾਉਂਦਾ ਹੈ** ਕਿ ਹੀਰੋ ਚਲ ਸਕਦੇ ਹਨ ਜਦਕਿ ਦਰੱਖਤ ਸਥਿਰ ਰਹਿੰਦੇ ਹਨ
+- **ਦਿਖਾਉਂਦਾ ਹੈ** ਕਿ ਕਲਾਸ ਹਾਇਰਾਰਕੀ ਅਣਉਚਿਤ ਕਾਰਵਾਈਆਂ ਨੂੰ ਰੋਕਦੀ ਹੈ
 
-✅ ਕੁਝ ਮਿੰਟ ਲਓ ਅਤੇ Pac-Man ਹੀਰੋ (ਜਿਵੇਂ Inky, Pinky ਜਾਂ Blinky) ਨੂੰ ਦੁਬਾਰਾ ਸੋਚੋ ਅਤੇ ਇਹ ਕਿਵੇਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਲਿਖਿਆ ਜਾ ਸਕਦਾ ਹੈ।
+✅ ਕੁਝ ਮਿੰਟ ਲਓ ਅਤੇ Pac-Man ਹੀਰੋ (ਜਿਵੇਂ Inky, Pinky ਜਾਂ Blinky) ਨੂੰ ਦੁਬਾਰਾ ਸੋਚੋ ਅਤੇ ਇਹ ਕਿਵੇਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਲਿਖਿਆ ਜਾਵੇਗਾ।
 
 **ਰਚਨਾ ਦਾ ਤਰੀਕਾ**
 
-ਰਚਨਾ ਇੱਕ ਮਾਡਿਊਲਰ ਡਿਜ਼ਾਈਨ ਫਿਲਾਸਫੀ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ, ਬਿਲਕੁਲ ਜਿਵੇਂ ਇੰਜੀਨੀਅਰ ਸਪੇਸਕ੍ਰਾਫਟ ਨੂੰ ਅਦਲ-ਬਦਲ ਕਰਨ ਵਾਲੇ ਹਿੱਸਿਆਂ ਨਾਲ ਡਿਜ਼ਾਈਨ ਕਰਦੇ ਹਨ। ਪੇਰੈਂਟ ਕਲਾਸ ਤੋਂ ਵਾਰਸ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ ਵਿਹਾਰਾਂ ਨੂੰ ਜੋੜਦੇ ਹੋ ਤਾਂ ਜੋ ਆਬਜੈਕਟਾਂ ਨੂੰ ਉਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਮਿਲਣ ਜੋ ਉਹਨਾਂ ਨੂੰ ਲੋੜੀਂਦੀਆਂ ਹਨ। ਇਹ ਤਰੀਕਾ ਸਖਤ ਹਾਇਰਾਰਕੀਕਲ ਪਾਬੰਦੀਆਂ ਤੋਂ ਬਿਨਾਂ ਲਚਕਦਾਰਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
+ਰਚਨਾ ਇੱਕ ਮੋਡਿਊਲਰ ਡਿਜ਼ਾਈਨ ਫਿਲਾਸਫੀ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ, ਬਿਲਕੁਲ ਜਿਵੇਂ ਇੰਜੀਨੀਅਰ ਸਪੇਸਕ੍ਰਾਫਟ ਨੂੰ ਬਦਲਣਯੋਗ ਹਿੱਸਿਆਂ ਨਾਲ ਡਿਜ਼ਾਈਨ ਕਰਦੇ ਹਨ। ਇੱਕ ਪੇਰੈਂਟ ਕਲਾਸ ਤੋਂ ਵਾਰਸ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ ਵਿਹਾਰਾਂ ਨੂੰ ਜੋੜਦੇ ਹੋ ਤਾਂ ਜੋ ਓਬਜੈਕਟਾਂ ਨੂੰ ਉਹ ਸਮਰੱਥਾਵਾਂ ਮਿਲਣ ਜੋ ਉਹਨਾਂ ਨੂੰ ਲੋੜੀਂਦੀਆਂ ਹਨ। ਇਹ ਤਰੀਕਾ ਸਖ਼ਤ ਹਾਇਰਾਰਕੀਕਲ ਪਾਬੰਦੀਆਂ ਤੋਂ ਬਿਨਾਂ ਲਚਕਦਾਰਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
 
 ```javascript
 // Step 1: Create base behavior objects
@@ -139,9 +225,9 @@ const movable = {
 ```
 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਬੇਸ** `gameObject` ਨੂੰ ਸਥਿਤੀ ਅਤੇ ਕਿਸਮ ਗੁਣਾਂ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
-- **ਵੱਖਰੇ** `movable` ਵਿਹਾਰ ਆਬਜੈਕਟ ਨੂੰ ਮੂਵਮੈਂਟ ਫੰਕਸ਼ਨਲਿਟੀ ਨਾਲ ਬਣਾਉਂਦਾ ਹੈ
-- **ਚਿੰਤਾਵਾਂ ਨੂੰ ਵੱਖ ਕਰਦਾ ਹੈ** ਸਥਿਤੀ ਡੇਟਾ ਅਤੇ ਮੂਵਮੈਂਟ ਲਾਜਿਕ ਨੂੰ ਅਜ਼ਾਦ ਰੱਖ ਕੇ
+- **ਬੇਸ `gameObject` ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ** ਜਿਸ ਵਿੱਚ ਪੋਜ਼ੀਸ਼ਨ ਅਤੇ ਕਿਸਮ ਗੁਣ ਹਨ
+- **ਵੱਖਰੇ `movable` ਵਿਹਾਰ ਓਬਜੈਕਟ ਨੂੰ ਬਣਾਉਂਦਾ ਹੈ** ਜਿਸ ਵਿੱਚ ਮੂਵਮੈਂਟ ਫੰਕਸ਼ਨਲਿਟੀ ਹੈ
+- **ਚਿੰਤਾਵਾਂ ਨੂੰ ਵੱਖ ਕਰਦਾ ਹੈ** ਪੋਜ਼ੀਸ਼ਨ ਡੇਟਾ ਅਤੇ ਮੂਵਮੈਂਟ ਲਾਜ਼ਿਕ ਨੂੰ ਅਜ਼ਾਦ ਰੱਖ ਕੇ
 
 ```javascript
 // Step 2: Compose objects by combining behaviors
@@ -168,10 +254,10 @@ function createStatic(x, y, type) {
 ```
 
 **ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**
-- **ਬੇਸ** ਆਬਜੈਕਟ ਗੁਣਾਂ ਨੂੰ ਮੂਵਮੈਂਟ ਵਿਹਾਰ ਨਾਲ ਜੋੜਿਆ ਹੈ ਸਪ੍ਰੈਡ ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਫੈਕਟਰੀ ਫੰਕਸ਼ਨ** ਬਣਾਏ ਹਨ ਜੋ ਕਸਟਮਾਈਜ਼ਡ ਆਬਜੈਕਟ ਵਾਪਸ ਕਰਦੇ ਹਨ
-- **ਲਚਕਦਾਰ** ਆਬਜੈਕਟ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੱਤੀ ਹੈ ਬਿਨਾਂ ਸਖਤ ਕਲਾਸ ਹਾਇਰਾਰਕੀਜ਼ ਦੇ
-- **ਆਬਜੈਕਟਾਂ ਨੂੰ** ਉਹ ਵਿਹਾਰਾਂ ਦੇਣ ਦੀ ਆਗਿਆ ਦਿੱਤੀ ਹੈ ਜੋ ਉਹਨਾਂ ਨੂੰ ਲੋੜੀਂਦੇ ਹਨ
+- **ਬੇਸ ਓਬਜੈਕਟ ਗੁਣਾਂ ਨੂੰ ਮੂਵਮੈਂਟ ਵਿਹਾਰ ਨਾਲ ਜੋੜਿਆ** ਹੈ ਸਪ੍ਰੈਡ ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਫੈਕਟਰੀ ਫੰਕਸ਼ਨ ਬਣਾਏ** ਜੋ ਕਸਟਮਾਈਜ਼ਡ ਓਬਜੈਕਟ ਵਾਪਸ ਕਰਦੇ ਹਨ
+- **ਸਖ਼ਤ ਕਲਾਸ ਹਾਇਰਾਰਕੀ ਤੋਂ ਬਿਨਾਂ ਲਚਕਦਾਰ ਓਬਜੈਕਟ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੱਤੀ**
+- **ਓਬਜੈਕਟਾਂ ਨੂੰ ਉਹ ਵਿਹਾਰ ਦੇਣ ਦੀ ਆਗਿਆ ਦਿੱਤੀ ਜੋ ਉਹਨਾਂ ਨੂੰ ਲੋੜੀਂਦਾ ਹੈ**
 
 ```javascript
 // Step 4: Create and use your composed objects
@@ -182,151 +268,195 @@ const tree = createStatic(0, 0, 'Tree');
 // tree.moveTo() is undefined - no movement behavior was composed
 ```
 
-**ਮੁੱਖ ਬਿੰਦੂ ਯਾਦ ਰੱਖੋ:**
-- **ਆਬਜੈਕਟਾਂ ਨੂੰ** ਵਿਹਾਰਾਂ ਨੂੰ ਮਿਲਾ ਕੇ ਬਣਾਉਂਦਾ ਹੈ ਨਾ ਕਿ ਉਹਨਾਂ ਨੂੰ ਵਾਰਸ ਕਰਕੇ
-- **ਸਖਤ ਵਾਰਸ ਹਾਇਰਾਰਕੀਜ਼ ਤੋਂ** ਵਧੇਰੇ ਲਚਕਦਾਰਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
-- **ਆਬਜੈਕਟਾਂ ਨੂੰ** ਉਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜੋ ਉਹਨਾਂ ਨੂੰ ਲੋੜੀਂਦੀਆਂ ਹਨ
-- **ਸਾਫਟਵੇਅਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਪ੍ਰੈਡ ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ** ਸਾਫ ਸੰਗਠਨ ਲਈ
-
+**ਯਾਦ ਰੱਖਣ ਵਾਲੇ ਮੁੱਖ ਬਿੰਦੂ:**
+- **ਵਾਰਸ ਕਰਨ ਦੀ ਬਜਾਏ ਵਿਹਾਰਾਂ ਨੂੰ ਮਿਲਾ ਕੇ ਓਬਜੈਕਟ ਬਣਾਉਂਦਾ ਹੈ**
+- **ਸਖ਼ਤ ਹਾਇਰਾਰਕੀਕਲ ਪਾਬੰਦੀਆਂ ਤੋਂ ਵੱਧ ਲਚਕਦਾਰਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
+- **ਓਬਜੈਕਟਾਂ ਨੂੰ ਉਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜੋ ਉਹਨਾਂ ਨੂੰ ਲੋੜੀਂਦੀਆਂ ਹਨ**
+- **ਸਾਫ਼ ਓਬਜੈਕਟ ਕੌਂਬੀਨੇਸ਼ਨ ਲਈ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਪ੍ਰੈਡ ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ**
 ```
 
 **Which Pattern Should You Choose?**
 
-> 💡 **Pro Tip**: Both patterns have their place in modern JavaScript development. Classes work well for clearly defined hierarchies, while composition shines when you need maximum flexibility.
-> 
-**Here's when to use each approach:**
-- **Choose** inheritance when you have clear "is-a" relationships (a Hero *is-a* Movable object)
-- **Select** composition when you need "has-a" relationships (a Hero *has* movement abilities)
-- **Consider** your team's preferences and project requirements
-- **Remember** that you can mix both approaches in the same application
-
-## Communication Patterns: The Pub/Sub System
-
-As applications grow complex, managing communication between components becomes challenging. The publish-subscribe pattern (pub/sub) solves this problem using principles similar to radio broadcasting – one transmitter can reach multiple receivers without knowing who's listening.
-
-Consider what happens when a hero takes damage: the health bar updates, sound effects play, visual feedback appears. Rather than coupling the hero object directly to these systems, pub/sub allows the hero to broadcast a "damage taken" message. Any system that needs to respond can subscribe to this message type and react accordingly.
-
-✅ **Pub/Sub** stands for 'publish-subscribe'
-
-### Understanding the Pub/Sub Architecture
-
-The pub/sub pattern keeps different parts of your application loosely coupled, meaning they can work together without being directly dependent on each other. This separation makes your code more maintainable, testable, and flexible to changes.
-
-**The key players in pub/sub:**
-- **Messages** – Simple text labels like `'PLAYER_SCORED'` that describe what happened (plus any extra info)
-- **Publishers** – The objects that shout out "Something happened!" to anyone who's listening
-- **Subscribers** – The objects that say "I care about that event" and react when it happens
-- **Event System** – The middleman that makes sure messages get to the right listeners
-
-### Building an Event System
-
-Let's create a simple but powerful event system that demonstrates these concepts:
+**Which Pattern Should You Choose?**
 
-```javascript
-// Step 1: Create the EventEmitter class
-class EventEmitter {
-  constructor() {
-    this.listeners = {}; // Store all event listeners
-  }
-  
-  // Register a listener for a specific message type
-  on(message, listener) {
-    if (!this.listeners[message]) {
-      this.listeners[message] = [];
-    }
-    this.listeners[message].push(listener);
-  }
-  
-  // Send a message to all registered listeners
-  emit(message, payload = null) {
-    if (this.listeners[message]) {
-      this.listeners[message].forEach(listener => {
-        listener(message, payload);
-      });
-    }
-  }
-}
+```mermaid
+quadrantChart
+    title Code Organization Patterns
+    x-axis Simple --> Complex
+    y-axis Rigid --> Flexible
+    quadrant-1 Advanced Composition
+    quadrant-2 Hybrid Approaches
+    quadrant-3 Basic Inheritance
+    quadrant-4 Modern Composition
+    
+    Class Inheritance: [0.3, 0.2]
+    Interface Implementation: [0.6, 0.4]
+    Mixin Patterns: [0.7, 0.7]
+    Pure Composition: [0.8, 0.9]
+    Factory Functions: [0.5, 0.8]
+    Prototype Chain: [0.4, 0.3]
 ```
 
-**ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
-- **ਇੱਕ ਕੇਂਦਰੀ** ਇਵੈਂਟ ਮੈਨੇਜਮੈਂਟ ਸਿਸਟਮ ਬਣਾਉਂਦਾ ਹੈ ਇੱਕ ਸਧਾਰਨ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਸੁਣਨ ਵਾਲਿਆਂ ਨੂੰ** ਇੱਕ ਆਬਜੈਕਟ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ ਜੋ ਸੁਨੇਹਾ ਕਿਸਮ ਦੁਆਰਾ ਸੰਗਠਿਤ ਹੁੰਦਾ ਹੈ
-- **ਨਵੇਂ ਸੁਣਨ ਵਾਲਿਆਂ ਨੂੰ** `on()` ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰਜਿਸਟਰ ਕਰਦਾ ਹੈ
-- **ਸਾਰੇ ਰੁਚੀ ਰੱਖਣ ਵਾਲੇ ਸੁਣਨ ਵਾਲਿਆਂ ਨੂੰ** ਸੁਨੇਹੇ ਪ੍ਰਸਾਰਿਤ ਕਰਦਾ ਹੈ `emit()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਵਿਕਲਪਿਕ ਡੇਟਾ ਪੇਲੋਡਾਂ** ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ ਸਬੰਧਤ ਜਾਣਕਾਰੀ ਪਾਸ ਕਰਨ ਲਈ
-
-### ਸਾਰਾ ਕੁਝ ਇਕੱਠੇ ਕਰਨਾ: ਇੱਕ ਵਿਹਾਰਕ ਉਦਾਹਰਨ
-
-ਚਲੋ, ਇਸਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਵੇਖੀਏ! ਅਸੀਂ ਇੱਕ ਸਧਾਰਨ ਮੂਵਮੈਂਟ ਸਿਸਟਮ ਬਣਾਵਾਂਗੇ ਜੋ ਦਿਖਾਵੇਗਾ ਕਿ pub/sub ਕਿੰਨਾ ਸਾਫ ਅਤੇ ਲਚਕਦਾਰ ਹੋ ਸਕਦਾ ਹੈ:
-
-```javascript
-// Step 1: Define your message types
-const Messages = {
-  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT',
-  HERO_MOVE_RIGHT: 'HERO_MOVE_RIGHT',
-  ENEMY_SPOTTED: 'ENEMY_SPOTTED'
-};
-
-// Step 2: Create your event system and game objects
-const eventEmitter = new EventEmitter();
-const hero = createHero(0, 0);
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਦੋਵੇਂ ਪੈਟਰਨ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿਕਾਸ ਵਿੱਚ ਆਪਣੀ ਜਗ੍ਹਾ ਰੱਖਦੇ ਹਨ। ਕਲਾਸਾਂ ਸਪਸ਼ਟ ਤਰੀਕੇ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਹਾਇਰਾਰਕੀ ਲਈ ਚੰਗੀਆਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਜਦਕਿ ਰਚਨਾ ਵਧੇਰੇ ਲਚਕਦਾਰਤਾ ਦੀ ਲੋੜ ਹੋਣ 'ਤੇ ਚਮਕਦੀ ਹੈ।
+> 
+**ਇਹ ਹੈ ਕਿ ਕਦੋਂ ਹਰ ਤਰੀਕੇ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ:**
+- **ਵਾਰਸ ਚੁਣੋ** ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਸਪਸ਼ਟ "is-a" ਸੰਬੰਧ ਹਨ (ਹੀਰੋ *is-a* Movable ਓਬਜੈਕਟ)
+- **ਰਚਨਾ ਚੁਣੋ** ਜਦੋਂ ਤੁਹਾਨੂੰ "has-a" ਸੰਬੰਧਾਂ ਦੀ ਲੋੜ ਹੈ (ਹੀਰੋ *has* ਮੂਵਮੈਂਟ ਸਮਰੱਥਾਵਾਂ)
+- **ਆਪਣੀ ਟੀਮ ਦੀਆਂ ਪਸੰਦਾਂ ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਲੋੜਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ**
+- **ਯਾਦ ਰੱਖੋ** ਕਿ ਤੁਸੀਂ ਇੱਕੋ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਦੋਵੇਂ ਤਰੀਕਿਆਂ ਨੂੰ ਮਿਲਾ ਸਕਦੇ ਹੋ
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਓਬਜੈਕਟ ਸੰਗਠਨ ਸਮਝ**: ਸੰਚਾਰ ਪੈਟਰਨਾਂ ਵੱਲ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ:
+- ✅ ਵਾਰਸ ਅਤੇ ਰਚਨਾ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਦੀ ਵਿਆਖਿਆ ਕਰ ਸਕਦੇ ਹੋ
+- ✅ ਕਲਾਸਾਂ ਵਿਰੁੱਧ ਫੈਕਟਰੀ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਮਾਂ ਪਛਾਣ ਸਕਦੇ ਹੋ
+- ✅ ਵਾਰਸ ਵਿੱਚ `super()` ਕੀਵਰਡ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਇਹ ਸਮਝ ਸਕਦੇ ਹੋ
+- ✅ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਲਈ ਹਰ ਤਰੀਕੇ ਦੇ ਫਾਇਦੇ ਪਛਾਣ ਸਕਦੇ ਹੋ
+
+**ਤੁਰੰਤ ਸਵੈ-ਪ੍ਰੀਖਣ**: ਤੁਸੀਂ ਇੱਕ Flying Enemy ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਜੋ ਚਲ ਸਕਦਾ ਹੈ ਅਤੇ ਉੱਡ ਸਕਦਾ ਹੈ?
+- **ਵਾਰਸ ਤਰੀਕਾ**: `class FlyingEnemy extends Movable`
+- **ਰਚਨਾ ਤਰੀਕਾ**: `{ ...movable, ...flyable, ...gameObject }`
+
+**ਅਸਲ ਦੁਨੀਆ ਨਾਲ ਜੁੜਾਅ**: ਇਹ ਪੈਟਰਨ ਹਰ ਜਗ੍ਹਾ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ:
+- **React ਕੰਪੋਨੈਂਟਸ**: Props (ਰਚਨਾ) ਵਿਰੁੱਧ ਕਲਾਸ ਵਾਰਸ
+- **ਗੇਮ ਇੰਜਨ**: Entity-component systems ਰਚਨਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ
+- **ਮੋਬਾਈਲ ਐਪਸ**: UI ਫਰੇਮਵਰਕ ਅਕਸਰ ਵਾਰਸ ਹਾਇਰਾਰਕੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ
+
+## ਸੰਚਾਰ ਪੈਟਰਨ: Pub/Sub ਪ੍ਰਣਾਲੀ
+
+ਜਿਵੇਂ-ਜਿਵੇਂ ਐਪਲੀਕੇਸ਼ਨ ਜਟਿਲ ਹੋ ਜਾਂਦੇ ਹਨ, ਹਿੱਸਿਆਂ ਦੇ ਵਿਚਕਾਰ ਸੰਚਾਰ ਦਾ ਪ੍ਰਬੰਧਨ ਚੁਣੌਤੀਪੂਰਨ ਬਣ ਜਾਂਦਾ ਹੈ। ਪਬਲਿਸ਼-ਸਬਸਕ੍ਰਾਈਬ ਪੈਟਰਨ (pub/sub) ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹਲ ਕਰਦਾ ਹੈ ਰੇਡੀਓ ਬ੍ਰਾਡਕਾਸਟਿੰਗ ਵਰਗੇ ਸਿਧਾਂਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ – ਇੱਕ ਟ੍ਰਾਂਸਮਿਟਰ ਕਈ ਰਿਸੀਵਰਾਂ ਤੱਕ ਪਹੁੰਚ ਸਕਦਾ ਹੈ ਬਿਨਾਂ ਇਹ ਜਾਣਨ ਦੇ ਕਿ ਕੌਣ ਸੁਣ ਰਿਹਾ ਹੈ।
+
+ਸੋਚੋ ਕਿ ਜਦੋਂ ਇੱਕ ਹੀਰੋ ਨੂੰ ਨੁਕਸਾਨ ਹੁੰਦਾ ਹੈ: ਹੈਲਥ ਬਾਰ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਸਾਊਂਡ ਇਫੈਕਟਸ ਚਲਦੇ ਹਨ, ਵਿਜ਼ੁਅਲ ਫੀਡਬੈਕ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਹੀਰੋ ਓਬਜੈਕਟ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਇਹਨਾਂ ਸਿਸਟਮਾਂ ਨਾਲ ਜੋੜਨ ਦੀ ਬਜਾਏ, pub/sub ਹੀਰੋ ਨੂੰ "ਨੁਕਸਾਨ ਹੋਇਆ" ਸੁਨੇਹਾ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਕੋਈ ਵੀ ਸਿਸਟਮ ਜਿਸਨੂੰ ਪ੍ਰਤੀਕਰਮ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਇਸ ਸੁਨੇਹਾ ਕਿਸਮ ਦੀ ਸਬਸਕ੍ਰਿਪਸ਼ਨ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਅਨੁਸਾਰ ਪ੍ਰਤੀਕਰਮ ਕਰ ਸਕਦਾ ਹੈ।
+
+✅ **Pub/Sub** ਦਾ ਮਤਲਬ ਹੈ 'ਪਬਲਿਸ਼-ਸ
+ਗੇਮ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਪਬ-ਸਬ ਪੈਟਰਨ ਦੇ ਫਾਇਦੇ ਬਾਰੇ ਸੋਚੋ। ਇਹ ਪਤਾ ਕਰੋ ਕਿ ਕਿਹੜੇ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਇਵੈਂਟਸ ਜਾਰੀ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ ਅਤੇ ਸਿਸਟਮ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਤੀਕਿਰਿਆ ਦੇਣੀ ਚਾਹੀਦੀ ਹੈ। ਇੱਕ ਗੇਮ ਕਾਂਸੈਪਟ ਡਿਜ਼ਾਈਨ ਕਰੋ ਅਤੇ ਇਸਦੇ ਕੰਪੋਨੈਂਟਸ ਦੇ ਵਿਚਕਾਰ ਸੰਚਾਰ ਪੈਟਰਨਸ ਨੂੰ ਮੈਪ ਕਰੋ।
+
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼
+
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/30)
+
+## ਰਿਵਿਊ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
+
+ਪਬ/ਸਬ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰੋ [ਇਸ ਬਾਰੇ ਪੜ੍ਹ ਕੇ](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon)।
+
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਕੋਈ ਵੀ HTML5 ਗੇਮ ਆਨਲਾਈਨ ਖੋਲ੍ਹੋ ਅਤੇ ਇਸਦੇ ਕੋਡ ਨੂੰ DevTools ਦੀ ਮਦਦ ਨਾਲ ਇੰਸਪੈਕਟ ਕਰੋ
+- [ ] ਇੱਕ ਸਧਾਰਨ HTML5 ਕੈਨਵਾਸ ਐਲੀਮੈਂਟ ਬਣਾਓ ਅਤੇ ਇੱਕ ਬੇਸਿਕ ਸ਼ੇਪ ਡ੍ਰਾ ਕਰੋ
+- [ ] `setInterval` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਧਾਰਨ ਐਨੀਮੇਸ਼ਨ ਲੂਪ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ
+- [ ] ਕੈਨਵਾਸ API ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਦੀ ਖੋਜ ਕਰੋ ਅਤੇ ਇੱਕ ਡ੍ਰਾਇੰਗ ਮੈਥਡ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਕਾਂਸੈਪਟਸ ਨੂੰ ਸਮਝੋ
+- [ ] HTML, CSS, ਅਤੇ JavaScript ਫਾਈਲਾਂ ਨਾਲ ਆਪਣਾ ਗੇਮ ਪ੍ਰੋਜੈਕਟ ਸਟ੍ਰਕਚਰ ਸੈਟ ਕਰੋ
+- [ ] ਇੱਕ ਬੇਸਿਕ ਗੇਮ ਲੂਪ ਬਣਾਓ ਜੋ ਲਗਾਤਾਰ ਅਪਡੇਟ ਅਤੇ ਰੈਂਡਰ ਕਰਦਾ ਹੈ
+- [ ] ਕੈਨਵਾਸ 'ਤੇ ਆਪਣੀ ਪਹਿਲੀ ਗੇਮ ਸਪ੍ਰਾਈਟਸ ਡ੍ਰਾ ਕਰੋ
+- [ ] ਚਿੱਤਰਾਂ ਅਤੇ ਧੁਨਾਂ ਲਈ ਬੇਸਿਕ ਐਸੈਟ ਲੋਡਿੰਗ ਲਾਗੂ ਕਰੋ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਗੇਮ ਬਣਾਉਣ ਦਾ ਯੋਜਨਾ**
+- [ ] ਸਾਰੇ ਯੋਜਿਤ ਫੀਚਰਾਂ ਨਾਲ ਪੂਰਾ ਸਪੇਸ ਗੇਮ ਪੂਰਾ ਕਰੋ
+- [ ] ਪੋਲਿਸ਼ਡ ਗ੍ਰਾਫਿਕਸ, ਸਾਊਂਡ ਇਫੈਕਟਸ, ਅਤੇ ਸਮੂਥ ਐਨੀਮੇਸ਼ਨਸ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਗੇਮ ਸਟੇਟਸ ਲਾਗੂ ਕਰੋ (ਸਟਾਰਟ ਸਕ੍ਰੀਨ, ਗੇਮਪਲੇ, ਗੇਮ ਓਵਰ)
+- [ ] ਸਕੋਰਿੰਗ ਸਿਸਟਮ ਅਤੇ ਪਲੇਅਰ ਪ੍ਰਗਤੀ ਟ੍ਰੈਕਿੰਗ ਬਣਾਓ
+- [ ] ਆਪਣੀ ਗੇਮ ਨੂੰ ਸਾਰੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਰਿਸਪਾਂਸਿਵ ਅਤੇ ਐਕਸੇਸਿਬਲ ਬਣਾਓ
+- [ ] ਆਪਣੀ ਗੇਮ ਨੂੰ ਆਨਲਾਈਨ ਸ਼ੇਅਰ ਕਰੋ ਅਤੇ ਪਲੇਅਰਾਂ ਤੋਂ ਫੀਡਬੈਕ ਪ੍ਰਾਪਤ ਕਰੋ
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ**
+- [ ] ਵੱਖ-ਵੱਖ ਜਾਨਰਸ ਅਤੇ ਮਕੈਨਿਕਸ ਦੀ ਖੋਜ ਕਰਦੇ ਹੋਏ ਕਈ ਗੇਮ ਬਣਾਓ
+- [ ] Phaser ਜਾਂ Three.js ਵਰਗਾ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਫਰੇਮਵਰਕ ਸਿੱਖੋ
+- [ ] ਓਪਨ ਸੋਰਸ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਪ੍ਰੋਜੈਕਟਸ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉ
+- [ ] ਅਡਵਾਂਸਡ ਗੇਮ ਪ੍ਰੋਗਰਾਮਿੰਗ ਪੈਟਰਨਸ ਅਤੇ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਵਿੱਚ ਮਾਹਰ ਬਣੋ
+- [ ] ਆਪਣੀ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਸਕਿਲਸ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਪੋਰਟਫੋਲਿਓ ਬਣਾਓ
+- [ ] ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਮੀਡੀਆ ਵਿੱਚ ਦਿਲਚਸਪੀ ਰੱਖਣ ਵਾਲਿਆਂ ਨੂੰ ਮਾਰਗਦਰਸ਼ਨ ਦਿਓ
+
+## 🎯 ਤੁਹਾਡਾ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
+
+```mermaid
+timeline
+    title Game Architecture Learning Progression
+    
+    section Object Patterns (20 minutes)
+        Code Organization: Class inheritance
+                         : Composition patterns
+                         : Factory functions
+                         : Behavior mixing
+        
+    section Communication Systems (25 minutes)
+        Event Architecture: Pub/Sub implementation
+                          : Message design
+                          : Event emitters
+                          : Loose coupling
+        
+    section Game Object Design (30 minutes)
+        Entity Systems: Property management
+                      : Behavior composition
+                      : State handling
+                      : Lifecycle management
+        
+    section Architecture Patterns (35 minutes)
+        System Design: Component systems
+                     : Observer pattern
+                     : Command pattern
+                     : State machines
+        
+    section Advanced Concepts (45 minutes)
+        Scalable Architecture: Performance optimization
+                             : Memory management
+                             : Modular design
+                             : Testing strategies
+        
+    section Game Engine Concepts (1 week)
+        Professional Development: Scene graphs
+                                 : Asset management
+                                 : Rendering pipelines
+                                 : Physics integration
+        
+    section Framework Mastery (2 weeks)
+        Modern Game Development: React game patterns
+                               : Canvas optimization
+                               : WebGL basics
+                               : PWA games
+        
+    section Industry Practices (1 month)
+        Professional Skills: Team collaboration
+                           : Code reviews
+                           : Game design patterns
+                           : Performance profiling
 ```
 
-**ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਸੁਨੇਹਾ ਨਾਮਾਂ ਵਿੱਚ ਟਾਈਪੋਜ਼ ਨੂੰ ਰੋਕਣ ਲਈ** ਇੱਕ constants ਆਬਜੈਕਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
-- **ਸਾਰੇ ਸੰਚਾਰ ਨੂੰ ਸੰਭਾਲਣ ਲਈ** ਇੱਕ ਇਵੈਂਟ ਐਮੀਟਰ ਇੰਸਟੈਂਸ ਬਣਾਉਂਦਾ ਹੈ
-- **ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ 'ਤੇ** ਇੱਕ ਹੀਰੋ ਆਬਜੈਕਟ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ
+### 🛠️ ਤੁਹਾਡਾ ਗੇਮ ਆਰਕੀਟੈਕਚਰ ਟੂਲਕਿਟ ਸੰਖੇਪ
 
-```javascript
-// Step 3: Set up event listeners (subscribers)
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.moveTo(hero.x - 5, hero.y);
-  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
-});
-
-eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
-  hero.moveTo(hero.x + 5, hero.y);
-  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
-});
-```
+ਇਹ ਪਾਠ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਹੈ:
+- **ਡਿਜ਼ਾਈਨ ਪੈਟਰਨ ਮਾਹਰਤਾ**: ਵਿਰਾਸਤ ਅਤੇ ਰਚਨਾ ਦੇ ਫਾਇਦੇ-ਨੁਕਸਾਨ ਦੀ ਸਮਝ
+- **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਆਰਕੀਟੈਕਚਰ**: ਸਕੇਲਬਲ ਸੰਚਾਰ ਲਈ ਪਬ/ਸਬ ਲਾਗੂ ਕਰਨਾ
+- **ਆਬਜੈਕਟ-ਓਰੀਐਂਟਡ ਡਿਜ਼ਾਈਨ**: ਕਲਾਸ ਹਾਇਰਾਰਕੀਜ਼ ਅਤੇ ਵਿਹਾਰਕ ਰਚਨਾ
+- **ਮਾਡਰਨ ਜਾਵਾਸਕ੍ਰਿਪਟ**: ਫੈਕਟਰੀ ਫੰਕਸ਼ਨਸ, ਸਪ੍ਰੈਡ ਸਿੰਟੈਕਸ, ਅਤੇ ES6+ ਪੈਟਰਨਸ
+- **ਸਕੇਲਬਲ ਆਰਕੀਟੈਕਚਰ**: ਢਿੱਲੇ ਜੁੜੇ ਹੋਏ ਅਤੇ ਮੋਡਿਊਲਰ ਡਿਜ਼ਾਈਨ ਪ੍ਰਿੰਸਿਪਲਸ
+- **ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਫਾਊਂਡੇਸ਼ਨ**: ਐਂਟਿਟੀ ਸਿਸਟਮਸ ਅਤੇ ਕੰਪੋਨੈਂਟ ਪੈਟਰਨਸ
+- **ਪ੍ਰੋਫੈਸ਼ਨਲ ਪੈਟਰਨਸ**: ਕੋਡ ਆਰਗਨਾਈਜ਼ੇਸ਼ਨ ਲਈ ਇੰਡਸਟਰੀ-ਸਟੈਂਡਰਡ ਪਹੁੰਚ
 
-**ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**
-- **ਇਵੈਂਟ ਸੁਣਨ ਵਾਲਿਆਂ ਨੂੰ ਰਜਿਸਟਰ ਕੀਤਾ** ਜੋ ਮੂਵਮੈਂਟ ਸੁਨੇਹਿਆਂ ਦਾ ਜਵਾਬ ਦਿੰਦੇ ਹਨ
-- **ਹੀਰੋ ਦੀ ਸਥਿਤੀ ਨੂੰ ਅੱਪਡੇਟ ਕੀਤਾ** ਮੂਵਮੈਂਟ ਦਿਸ਼ਾ ਦੇ ਅਧਾਰ 'ਤੇ
-- **ਹੀਰੋ ਦੀ ਸਥਿਤੀ ਬਦਲਾਅ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਲਈ** ਕਨਸੋਲ ਲੌਗਿੰਗ ਸ਼ਾਮਲ ਕੀਤੀ
-- **ਮੂਵਮੈਂਟ ਲਾਜਿਕ ਨੂੰ ਇਨਪੁਟ ਹੈਂਡਲਿੰਗ ਤੋਂ ਵੱਖ ਕੀਤਾ**
+**ਅਸਲ-ਦੁਨੀਆ ਦੇ ਐਪਲੀਕੇਸ਼ਨਸ**: ਇਹ ਪੈਟਰਨਸ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ:
+- **ਫਰੰਟਐਂਡ ਫਰੇਮਵਰਕਸ**: React/Vue ਕੰਪੋਨੈਂਟ ਆਰਕੀਟੈਕਚਰ ਅਤੇ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ
+- **ਬੈਕਐਂਡ ਸੇਵਾਵਾਂ**: ਮਾਈਕ੍ਰੋਸਰਵਿਸ ਸੰਚਾਰ ਅਤੇ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਸਿਸਟਮਸ
+- **ਮੋਬਾਈਲ ਡਿਵੈਲਪਮੈਂਟ**: iOS/Android ਐਪ ਆਰਕੀਟੈਕਚਰ ਅਤੇ ਨੋਟੀਫਿਕੇਸ਼ਨ ਸਿਸਟਮਸ
+- **ਗੇਮ ਇੰਜਨਸ**: Unity, Unreal, ਅਤੇ ਵੈਬ-ਅਧਾਰਿਤ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ
+- **ਐਂਟਰਪ੍ਰਾਈਜ਼ ਸੌਫਟਵੇਅਰ**: ਇਵੈਂਟ ਸੋਰਸਿੰਗ ਅਤੇ ਵੰਡੇ ਸਿਸਟਮ ਡਿਜ਼ਾਈਨ
+- **API ਡਿਜ਼ਾਈਨ**: RESTful ਸੇਵਾਵਾਂ ਅਤੇ ਰੀਅਲ-ਟਾਈਮ ਸੰਚਾਰ
 
-```javascript
-// Step 4: Connect keyboard input to events (publishers)
-window.addEventListener('keydown', (event) => {
-  switch(event.key) {
-    case 'ArrowLeft':
-      eventEmitter.emit(Messages.HERO_MOVE_LEFT);
-      break;
-    case 'ArrowRight':
-      eventEmitter.emit(Messages.HERO_MOVE_RIGHT);
-      break;
-  }
-});
-```
+**ਪ੍ਰੋਫੈਸ਼ਨਲ ਸਕਿਲਸ ਪ੍ਰਾਪਤ ਕੀਤੇ**: ਹੁਣ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:
+- **ਡਿਜ਼ਾਈਨ** ਸਕੇਲਬਲ ਸੌਫਟਵੇਅਰ ਆਰਕੀਟੈਕਚਰਸ ਨੂੰ ਸਾਬਤ ਪੈਟਰਨਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਲਾਗੂ ਕਰੋ** ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਸਿਸਟਮਸ ਜੋ ਜਟਿਲ ਇੰਟਰੈਕਸ਼ਨਸ ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ
+- **ਚੁਣੋ** ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਲਈ ਉਚਿਤ ਕੋਡ ਆਰਗਨਾਈਜ਼ੇਸ਼ਨ ਰਣਨੀਤੀਆਂ
+- **ਡਿਬੱਗ** ਅਤੇ ਢਿੱਲੇ ਜੁੜੇ ਹੋਏ ਸਿਸਟਮਸ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਸੰਭਾਲੋ
+- **ਸੰਚਾਰ ਕਰੋ** ਤਕਨੀਕੀ ਫੈਸਲੇ ਇੰਡਸਟਰੀ-ਸਟੈਂਡਰਡ ਟਰਮੀਨੋਲੋਜੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
 
-**ਇਹ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝਣਾ:**
-- **ਕੀਬੋਰਡ ਇਨਪੁਟ ਨੂੰ** ਗੇਮ ਇਵੈਂਟਾਂ ਨਾਲ ਬਿਨਾਂ ਸਖਤ ਜੁੜਨ ਦੇ ਜੋੜਦਾ ਹੈ
-- **ਇਨਪੁਟ ਸਿਸਟਮ ਨੂੰ** ਗੇਮ ਆਬਜੈਕਟਾਂ ਨਾਲ ਅਪਰੋਕਸ਼ ਸੰਚਾਰ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ
-- **ਇੱਕੋ ਹੀ ਕੀਬੋਰਡ ਇਵੈਂਟਾਂ ਲਈ** ਕਈ ਸਿਸਟਮਾਂ ਨੂੰ ਜਵਾਬ ਦੇਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ
-- **ਕੀਬਾਈਂਡਿੰਗ ਨੂੰ ਬਦਲਣ ਜਾਂ ਨਵੇਂ ਇਨਪੁਟ ਤਰੀਕੇ ਸ਼ਾਮਲ ਕਰਨ ਨੂੰ** ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ
+**ਅਗਲਾ ਪੱਧਰ**: ਤੁਸੀਂ ਇਹ ਪੈਟਰਨਸ ਨੂੰ ਅਸਲ ਗੇਮ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ, ਅਡਵਾਂਸਡ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਵਿਸ਼ਿਆਂ ਦੀ ਖੋਜ ਕਰਨ ਲਈ, ਜਾਂ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਸ ਵਿੱਚ ਇਹ ਆਰਕੀਟੈਕਚਰਲ ਕਾਂਸੈਪਟਸ ਲਾਗੂ ਕਰਨ ਲਈ!
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਇਸ ਪੈਟਰਨ ਦੀ ਖੂਬਸੂਰਤੀ ਲਚਕਦਾਰਤਾ ਹੈ! ਤੁਸੀਂ ਆਸਾਨੀ ਨਾਲ ਸਾਊਂਡ ਇਫੈਕਟ, ਸਕ੍ਰੀਨ ਸ਼ੇਕ ਜਾਂ ਪਾਰਟੀਕਲ ਇਫੈਕਟ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ ਸਿਰਫ਼ ਹੋਰ ਇਵੈਂਟ ਸੁਣਨ ਵਾਲੇ ਸ਼ਾਮਲ ਕਰਕੇ - ਮੌਜੂਦਾ ਕੀਬੋਰਡ ਜਾਂ ਮੂਵਮੈਂਟ ਕੋਡ ਨੂੰ ਬਦਲਣ ਦੀ ਲੋੜ ਨਹੀਂ।
+🌟 **ਅਚੀਵਮੈਂਟ ਪ੍ਰਾਪਤ ਕੀਤੀ**: ਤੁਸੀਂ ਮੁਢਲੀ ਸੌਫਟਵੇਅਰ ਆਰਕੀਟੈਕਚਰ ਪੈਟਰਨਸ ਵਿੱਚ ਮਾਹਰਤਾ ਹਾਸਲ ਕਰ ਲਈ ਹੈ ਜੋ ਸਧਾਰਨ ਗੇਮ ਤੋਂ ਲੈ ਕੇ ਜਟਿਲ ਐਂਟਰਪ੍ਰਾਈਜ਼ ਸਿਸਟਮਸ ਤੱਕ ਸਭ ਕੁਝ ਪਾਵਰ ਕਰਦੇ ਹਨ!
 
-**ਇਸ ਤਰੀਕੇ ਨੂੰ ਪਸੰਦ ਕਰਨ ਦੇ ਕਾਰਨ:**
-- ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਬਣ ਜਾਂਦਾ ਹੈ - ਸਿਰਫ਼ ਉਹਨਾਂ ਇਵੈਂਟਾਂ ਨੂੰ ਸੁਣੋ ਜੋ ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੇ ਹਨ
-- ਕਈ ਚੀਜ਼ਾਂ ਇੱਕੋ ਹੀ ਇਵੈਂਟ 'ਤੇ ਪ੍ਰਤੀਕਰਮ ਕਰ ਸਕਦੀਆਂ ਹਨ ਬਿਨਾਂ ਇੱਕ-ਦੂਜੇ ਨੂੰ ਰੋਕਣ ਦੇ
-- ਟੈਸਟਿੰਗ ਬਹੁਤ ਆਸਾਨ ਹੋ ਜਾਂਦੀ ਹੈ ਕਿਉਂਕਿ ਹਰ ਹਿੱਸਾ ਅਜ਼ਾਦ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
-- ਜਦੋਂ ਕੁਝ ਟੁੱਟਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਕਿੱਥੇ ਵੇਖਣਾ ਹੈ
+## ਅਸਾਈਨਮੈਂਟ
 
-### ਕਿਉਂ pub/sub ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਸਕੇਲ ਕਰਦਾ
+[ਇੱਕ ਗੇਮ ਮੌਕਅੱਪ ਬਣਾਓ](assignment.md)
 
 ---
 
-**ਅਸਵੀਕਰਤੀ**:  
+**ਅਸਵੀਕਰਤਾ**:  
 ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/6-space-game/2-drawing-to-canvas/README.md b/translations/pa/6-space-game/2-drawing-to-canvas/README.md
index 422da67915..a14d6c1fa9 100644
--- a/translations/pa/6-space-game/2-drawing-to-canvas/README.md
+++ b/translations/pa/6-space-game/2-drawing-to-canvas/README.md
@@ -1,19 +1,66 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "84053695dca714e16ed064366503ebd5",
-  "translation_date": "2025-10-22T18:07:28+00:00",
+  "original_hash": "7994743c5b21fdcceb36307916ef249a",
+  "translation_date": "2025-11-03T16:51:17+00:00",
   "source_file": "6-space-game/2-drawing-to-canvas/README.md",
   "language_code": "pa"
 }
 -->
-# ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 2: ਹੀਰੋ ਅਤੇ ਮੋਨਸਟਰਜ਼ ਨੂੰ ਕੈਨਵਸ 'ਤੇ ਡਰਾਅ ਕਰੋ
-
-ਕੈਨਵਸ API ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਸਭ ਤੋਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਫੀਚਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ, ਜੋ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਗਤੀਸ਼ੀਲ, ਇੰਟਰਐਕਟਿਵ ਗ੍ਰਾਫਿਕਸ ਬਣਾਉਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਉਸ ਖਾਲੀ HTML `<canvas>` ਐਲੀਮੈਂਟ ਨੂੰ ਇੱਕ ਗੇਮ ਦੁਨੀਆ ਵਿੱਚ ਬਦਲਾਂਗੇ ਜੋ ਹੀਰੋ ਅਤੇ ਮੋਨਸਟਰਜ਼ ਨਾਲ ਭਰੀ ਹੋਈ ਹੈ। ਕੈਨਵਸ ਨੂੰ ਆਪਣੇ ਡਿਜ਼ੀਟਲ ਆਰਟ ਬੋਰਡ ਵਜੋਂ ਸੋਚੋ ਜਿੱਥੇ ਕੋਡ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣ ਜਾਂਦਾ ਹੈ।
-
-ਅਸੀਂ ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਸਿੱਖੀ ਗਈ ਚੀਜ਼ਾਂ 'ਤੇ ਅੱਗੇ ਵਧ ਰਹੇ ਹਾਂ, ਅਤੇ ਹੁਣ ਅਸੀਂ ਦ੍ਰਿਸ਼ਮਾਨ ਪਹਲੂਆਂ ਵਿੱਚ ਡੁੱਬਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਗੇਮ ਸਪ੍ਰਾਈਟਸ ਨੂੰ ਕਿਵੇਂ ਲੋਡ ਅਤੇ ਡਿਸਪਲੇ ਕਰਨਾ ਹੈ, ਐਲੀਮੈਂਟਸ ਨੂੰ ਸਹੀ ਤੌਰ 'ਤੇ ਪੋਜ਼ੀਸ਼ਨ ਕਰਨਾ ਹੈ, ਅਤੇ ਆਪਣੇ ਸਪੇਸ ਗੇਮ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਅਧਾਰ ਬਣਾਉਣਾ ਹੈ। ਇਹ ਸਥਿਰ ਵੈੱਬ ਪੇਜਾਂ ਅਤੇ ਗਤੀਸ਼ੀਲ, ਇੰਟਰਐਕਟਿਵ ਅਨੁਭਵਾਂ ਦੇ ਵਿਚਕਾਰ ਪੂਲ ਬਣਾਉਂਦਾ ਹੈ।
+# ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 2: ਹੀਰੋ ਅਤੇ ਮੌਂਸਟਰਜ਼ ਨੂੰ ਕੈਨਵਸ 'ਤੇ ਡਰਾਇੰਗ ਕਰੋ
+
+```mermaid
+journey
+    title Your Canvas Graphics Journey
+    section Foundation
+      Understand Canvas API: 3: Student
+      Learn coordinate system: 4: Student
+      Draw basic shapes: 4: Student
+    section Image Handling
+      Load game assets: 4: Student
+      Handle async loading: 5: Student
+      Position sprites: 5: Student
+    section Game Rendering
+      Create game screen: 5: Student
+      Build formations: 5: Student
+      Optimize performance: 4: Student
+```
 
-ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪੂਰੀ ਗੇਮ ਸੀਨ ਹੋਵੇਗੀ ਜਿਸ ਵਿੱਚ ਤੁਹਾਡਾ ਹੀਰੋ ਜਹਾਜ਼ ਸਹੀ ਤੌਰ 'ਤੇ ਪੋਜ਼ੀਸ਼ਨ ਕੀਤਾ ਹੋਵੇਗਾ ਅਤੇ ਦੁਸ਼ਮਣਾਂ ਦੀ ਬਣਤਰ ਲੜਾਈ ਲਈ ਤਿਆਰ ਹੋਵੇਗੀ। ਤੁਸੀਂ ਸਮਝੋਗੇ ਕਿ ਆਧੁਨਿਕ ਗੇਮਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਗ੍ਰਾਫਿਕਸ ਨੂੰ ਕਿਵੇਂ ਰੈਂਡਰ ਕਰਦੀਆਂ ਹਨ ਅਤੇ ਆਪਣੇ ਇੰਟਰਐਕਟਿਵ ਦ੍ਰਿਸ਼ਮਾਨ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਹੁਨਰ ਪ੍ਰਾਪਤ ਕਰੋਗੇ। ਆਓ ਕੈਨਵਸ ਗ੍ਰਾਫਿਕਸ ਦੀ ਖੋਜ ਕਰੀਏ ਅਤੇ ਤੁਹਾਡੇ ਸਪੇਸ ਗੇਮ ਨੂੰ ਜੀਵੰਤ ਬਣਾਈਏ!
+ਕੈਨਵਸ API ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਸਭ ਤੋਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਫੀਚਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ, ਜੋ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਗਤੀਸ਼ੀਲ, ਇੰਟਰਐਕਟਿਵ ਗ੍ਰਾਫਿਕਸ ਬਣਾਉਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਉਸ ਖਾਲੀ HTML `<canvas>` ਤੱਤ ਨੂੰ ਇੱਕ ਗੇਮ ਦੁਨੀਆ ਵਿੱਚ ਬਦਲਾਂਗੇ ਜੋ ਹੀਰੋ ਅਤੇ ਮੌਂਸਟਰਜ਼ ਨਾਲ ਭਰੀ ਹੋਈ ਹੈ। ਕੈਨਵਸ ਨੂੰ ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਬੋਰਡ ਵਜੋਂ ਸੋਚੋ ਜਿੱਥੇ ਕੋਡ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣ ਜਾਂਦਾ ਹੈ।
+
+ਅਸੀਂ ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਸਿੱਖੀ ਗਈਆਂ ਚੀਜ਼ਾਂ 'ਤੇ ਅੱਗੇ ਵਧ ਰਹੇ ਹਾਂ, ਅਤੇ ਹੁਣ ਅਸੀਂ ਦ੍ਰਿਸ਼ਮਾਨ ਪੱਖਾਂ ਵਿੱਚ ਡੁੱਬਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਗੇਮ ਸਪ੍ਰਾਈਟਸ ਨੂੰ ਕਿਵੇਂ ਲੋਡ ਅਤੇ ਡਿਸਪਲੇ ਕਰਨਾ ਹੈ, ਤੱਤਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕਿਵੇਂ ਸਥਿਤ ਕਰਨਾ ਹੈ, ਅਤੇ ਆਪਣੇ ਸਪੇਸ ਗੇਮ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬੁਨਿਆਦ ਕਿਵੇਂ ਬਣਾਉਣੀ ਹੈ। ਇਹ ਸਥਿਰ ਵੈੱਬ ਪੰਨਿਆਂ ਅਤੇ ਗਤੀਸ਼ੀਲ, ਇੰਟਰਐਕਟਿਵ ਤਜਰਬਿਆਂ ਦੇ ਵਿਚਕਾਰ ਪੂਲ ਬਣਾਉਂਦਾ ਹੈ।
+
+ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪੂਰੀ ਗੇਮ ਸੀਨ ਹੋਵੇਗੀ ਜਿਸ ਵਿੱਚ ਤੁਹਾਡਾ ਹੀਰੋ ਜਹਾਜ਼ ਸਹੀ ਢੰਗ ਨਾਲ ਸਥਿਤ ਹੋਵੇਗਾ ਅਤੇ ਦੁਸ਼ਮਣੀ ਫਾਰਮੇਸ਼ਨ ਲੜਾਈ ਲਈ ਤਿਆਰ ਹੋਵੇਗੀ। ਤੁਸੀਂ ਸਮਝੋਗੇ ਕਿ ਆਧੁਨਿਕ ਗੇਮਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਗ੍ਰਾਫਿਕਸ ਨੂੰ ਕਿਵੇਂ ਰੈਂਡਰ ਕਰਦੀਆਂ ਹਨ ਅਤੇ ਆਪਣੇ ਇੰਟਰਐਕਟਿਵ ਦ੍ਰਿਸ਼ਮਾਨ ਤਜਰਬੇ ਬਣਾਉਣ ਲਈ ਹੁਨਰ ਪ੍ਰਾਪਤ ਕਰੋਗੇ। ਆਓ ਕੈਨਵਸ ਗ੍ਰਾਫਿਕਸ ਦੀ ਪੜਚੋਲ ਕਰੀਏ ਅਤੇ ਤੁਹਾਡੇ ਸਪੇਸ ਗੇਮ ਨੂੰ ਜ਼ਿੰਦਾ ਕਰੀਏ!
+
+```mermaid
+mindmap
+  root((Canvas Graphics))
+    Canvas Element
+      HTML5 Feature
+      2D Context
+      Coordinate System
+      Pixel Control
+    Drawing Operations
+      Basic Shapes
+      Text Rendering
+      Image Display
+      Path Drawing
+    Asset Management
+      Image Loading
+      Async Operations
+      Error Handling
+      Performance
+    Game Rendering
+      Sprite Positioning
+      Formation Layout
+      Scene Composition
+      Frame Updates
+    Visual Effects
+      Colors & Styles
+      Transformations
+      Animations
+      Layering
+```
 
 ## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 
@@ -21,37 +68,75 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## ਕੈਨਵਸ
 
-ਤਾਂ ਇਹ `<canvas>` ਐਲੀਮੈਂਟ ਅਸਲ ਵਿੱਚ ਹੈ ਕੀ? ਇਹ HTML5 ਦਾ ਹੱਲ ਹੈ ਜੋ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਗ੍ਰਾਫਿਕਸ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਹੈ। ਸਧਾਰਨ ਚਿੱਤਰਾਂ ਜਾਂ ਵੀਡੀਓਜ਼ ਦੇ ਵਿਰੁੱਧ, ਜੋ ਸਥਿਰ ਹੁੰਦੇ ਹਨ, ਕੈਨਵਸ ਤੁਹਾਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੀ ਹਰ ਚੀਜ਼ 'ਤੇ ਪਿਕਸਲ-ਸਤਰ ਦਾ ਕੰਟਰੋਲ ਦਿੰਦਾ ਹੈ। ਇਹ ਗੇਮਾਂ, ਡਾਟਾ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ, ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਕਲਾ ਲਈ ਬਹੁਤ ਹੀ ਉਤਮ ਹੈ। ਇਸ ਨੂੰ ਇੱਕ ਪ੍ਰੋਗਰਾਮਿੰਗ ਡਰਾਇੰਗ ਸਤਹ ਵਜੋਂ ਸੋਚੋ ਜਿੱਥੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੁਹਾਡਾ ਪੇਂਟਬ੍ਰਸ਼ ਬਣ ਜਾਂਦਾ ਹੈ।
+ਤਾਂ ਇਹ `<canvas>` ਤੱਤ ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ? ਇਹ HTML5 ਦਾ ਹੱਲ ਹੈ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਗ੍ਰਾਫਿਕਸ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ। ਸਧਾਰਨ ਤਸਵੀਰਾਂ ਜਾਂ ਵੀਡੀਓਜ਼ ਦੇ ਵਿਰੁੱਧ, ਜੋ ਸਥਿਰ ਹੁੰਦੀਆਂ ਹਨ, ਕੈਨਵਸ ਤੁਹਾਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੀ ਹਰ ਚੀਜ਼ 'ਤੇ ਪਿਕਸਲ-ਪੱਧਰ ਦਾ ਕੰਟਰੋਲ ਦਿੰਦਾ ਹੈ। ਇਹ ਗੇਮਾਂ, ਡਾਟਾ ਵਿਜੁਅਲਾਈਜ਼ੇਸ਼ਨ, ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਕਲਾ ਲਈ ਬਹੁਤ ਹੀ ਉਚਿਤ ਹੈ। ਇਸਨੂੰ ਇੱਕ ਪ੍ਰੋਗਰਾਮੇਬਲ ਡਰਾਇੰਗ ਸਤਹ ਵਜੋਂ ਸੋਚੋ ਜਿੱਥੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੁਹਾਡਾ ਬੁਰਸ਼ ਬਣ ਜਾਂਦਾ ਹੈ।
 
-ਮੂਲ ਰੂਪ ਵਿੱਚ, ਇੱਕ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਤੁਹਾਡੇ ਪੇਜ 'ਤੇ ਇੱਕ ਖਾਲੀ, ਪਾਰਦਰਸ਼ੀ ਆਯਤਕਾਰ ਵਾਂਗ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਪਰ ਇਹੀ ਤਾਂ ਇਸ ਦੀ ਖੂਬੀ ਹੈ! ਇਸ ਦੀ ਅਸਲ ਤਾਕਤ ਤਦ ਹੀ ਸਾਹਮਣੇ ਆਉਂਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਕਾਰ ਬਣਾਉਂਦੇ ਹੋ, ਚਿੱਤਰ ਲੋਡ ਕਰਦੇ ਹੋ, ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ, ਅਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਲਈ ਬਣਾਉਂਦੇ ਹੋ। ਇਹ ਕੁਝ ਇਸੇ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ 1960 ਦੇ ਦਹਾਕੇ ਵਿੱਚ Bell Labs ਦੇ ਪਹਿਲੇ ਕੰਪਿਊਟਰ ਗ੍ਰਾਫਿਕਸ ਪਾਇਨੀਅਰਜ਼ ਨੇ ਪਹਿਲੀਆਂ ਡਿਜ਼ੀਟਲ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਹਰ ਪਿਕਸਲ ਨੂੰ ਪ੍ਰੋਗਰਾਮ ਕੀਤਾ ਸੀ।
+ਮੂਲ ਰੂਪ ਵਿੱਚ, ਇੱਕ ਕੈਨਵਸ ਤੱਤ ਤੁਹਾਡੇ ਪੰਨੇ 'ਤੇ ਇੱਕ ਖਾਲੀ, ਪਾਰਦਰਸ਼ੀ ਆਯਤਕਾਰ ਵਾਂਗ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਪਰ ਇਹੀ ਇਸਦੀ ਸੰਭਾਵਨਾ ਹੈ! ਇਸਦੀ ਅਸਲ ਸ਼ਕਤੀ ਤਦ ਸਾਹਮਣੇ ਆਉਂਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਕਾਰ ਬਣਾਉਂਦੇ ਹੋ, ਤਸਵੀਰਾਂ ਲੋਡ ਕਰਦੇ ਹੋ, ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਂਦੇ ਹੋ, ਅਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਲਈ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨ ਲਈ ਬਣਾਉਂਦੇ ਹੋ। ਇਹ ਕੁਝ ਇਸੇ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ 1960 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਬੈਲ ਲੈਬਜ਼ ਦੇ ਪਹਿਲੇ ਕੰਪਿਊਟਰ ਗ੍ਰਾਫਿਕਸ ਪਾਇਨੀਅਰਜ਼ ਨੇ ਪਹਿਲੀਆਂ ਡਿਜ਼ੀਟਲ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਹਰ ਪਿਕਸਲ ਨੂੰ ਪ੍ਰੋਗਰਾਮ ਕੀਤਾ ਸੀ।
 
 ✅ [ਕੈਨਵਸ API ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN 'ਤੇ।
 
-ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਪੇਜ ਦੇ ਬਾਡੀ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਐਲਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:
+ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਪੰਨੇ ਦੇ ਬਾਡੀ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਐਲਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:
 
 ```html
 <canvas id="myCanvas" width="200" height="100"></canvas>
 ```
 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਸੈਟ ਕਰਦਾ ਹੈ** `id` ਐਟ੍ਰਿਬਿਊਟ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸ ਖਾਸ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਰਿਫਰੈਂਸ ਕਰ ਸਕੋ
-- **ਪਿਕਸਲ ਵਿੱਚ ਚੌੜਾਈ** ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਕੈਨਵਸ ਦਾ ਹੋਰਿਜ਼ਾਂਟਲ ਆਕਾਰ ਕੰਟਰੋਲ ਕੀਤਾ ਜਾ ਸਕੇ
-- **ਪਿਕਸਲ ਵਿੱਚ ਉਚਾਈ** ਨੂੰ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਕੈਨਵਸ ਦੇ ਵਰਟੀਕਲ ਮਾਪ ਨਿਰਧਾਰਤ ਕੀਤੇ ਜਾ ਸਕਣ
-
-## ਸਧਾਰਨ ਜਿਓਮੈਟਰੀ ਡਰਾਇੰਗ
-
-ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਜਾਣ ਗਏ ਹੋ ਕਿ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਕੀ ਹੈ, ਆਓ ਇਸ 'ਤੇ ਅਸਲ ਵਿੱਚ ਡਰਾਇੰਗ ਕਰਨ ਦੀ ਖੋਜ ਕਰੀਏ! ਕੈਨਵਸ ਇੱਕ ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜੋ ਮੈਥ ਕਲਾਸ ਤੋਂ ਜਾਣ-ਪਛਾਣ ਵਾਲਾ ਲੱਗ ਸਕਦਾ ਹੈ, ਪਰ ਕੰਪਿਊਟਰ ਗ੍ਰਾਫਿਕਸ ਨਾਲ ਸੰਬੰਧਿਤ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਮੋੜ ਹੈ।
-
-ਕੈਨਵਸ ਕਾਰਟੀਸ਼ੀਅਨ ਕੋਆਰਡੀਨੇਟਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜਿਸ ਵਿੱਚ x-ਅਕਸ (ਹੋਰਿਜ਼ਾਂਟਲ) ਅਤੇ y-ਅਕਸ (ਵਰਟੀਕਲ) ਹੁੰਦੀ ਹੈ ਜੋ ਤੁਸੀਂ ਡਰਾਇੰਗ ਕਰਦੇ ਹੋ। ਪਰ ਇੱਥੇ ਇੱਕ ਮੁੱਖ ਅੰਤਰ ਹੈ: ਮੈਥ ਕਲਾਸ ਦੇ ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ ਦੇ ਵਿਰੁੱਧ, ਮੂਲ ਬਿੰਦੂ `(0,0)` ਟੌਪ-ਲੈਫਟ ਕੋਨੇ 'ਤੇ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਜਿੱਥੇ x-ਮੁੱਲ ਸੱਜੇ ਵੱਲ ਵਧਦੇ ਹਨ ਅਤੇ y-ਮੁੱਲ ਹੇਠਾਂ ਵਧਦੇ ਹਨ। ਇਹ ਪੁਰਾਣੇ ਕੰਪਿਊਟਰ ਡਿਸਪਲੇਜ਼ ਤੋਂ ਆਉਂਦਾ ਹੈ ਜਿੱਥੇ ਇਲੈਕਟ੍ਰਾਨ ਬੀਮ ਟੌਪ ਤੋਂ ਬਾਟਮ ਸਕੈਨ ਕਰਦੇ ਸਨ, ਜਿਸ ਨਾਲ ਟੌਪ-ਲੈਫਟ ਕੁਦਰਤੀ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਬਣ ਗਿਆ।
+- **ਸੈੱਟ ਕਰਦਾ ਹੈ** `id` ਐਟ੍ਰਿਬਿਊਟ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸ ਖਾਸ ਕੈਨਵਸ ਤੱਤ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਰੈਫਰ ਕਰ ਸਕੋ
+- **ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ** ਪਿਕਸਲ ਵਿੱਚ `width` ਕੈਨਵਸ ਦੇ ਹੋਰਿਜ਼ਾਂਟਲ ਆਕਾਰ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ
+- **ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** ਪਿਕਸਲ ਵਿੱਚ `height` ਕੈਨਵਸ ਦੇ ਵਰਟੀਕਲ ਮਾਪ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ
+
+## ਸਧਾਰਨ ਜਾਮਿਤੀ ਆਕਾਰ ਡਰਾਇੰਗ ਕਰਨਾ
+
+ਹੁਣ ਜਦ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਕੈਨਵਸ ਤੱਤ ਕੀ ਹੈ, ਆਓ ਇਸ 'ਤੇ ਅਸਲ ਵਿੱਚ ਡਰਾਇੰਗ ਕਰਨ ਦੀ ਪੜਚੋਲ ਕਰੀਏ! ਕੈਨਵਸ ਇੱਕ ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜੋ ਮੈਥ ਕਲਾਸ ਤੋਂ ਜਾਣੂ ਲੱਗ ਸਕਦਾ ਹੈ, ਪਰ ਕੰਪਿਊਟਰ ਗ੍ਰਾਫਿਕਸ ਲਈ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਮੋੜ ਹੈ।
+
+ਕੈਨਵਸ ਕਾਰਟੀਸ਼ੀਅਨ ਕੋਆਰਡੀਨੇਟਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਇੱਕ x-ਅਕਸ (ਹੋਰਿਜ਼ਾਂਟਲ) ਅਤੇ y-ਅਕਸ (ਵਰਟੀਕਲ) ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਜੋ ਵੀ ਡਰਾਇੰਗ ਕਰਦੇ ਹੋ ਉਸਦੀ ਸਥਿਤੀ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ। ਪਰ ਇੱਥੇ ਮੁੱਖ ਅੰਤਰ ਹੈ: ਮੈਥ ਕਲਾਸ ਦੇ ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ ਦੇ ਵਿਰੁੱਧ, ਮੂਲ ਬਿੰਦੂ `(0,0)` ਟੌਪ-ਲੇਫਟ ਕੋਨੇ 'ਤੇ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਜਿੱਥੇ x-ਮੁੱਲ ਸੱਜੇ ਵੱਲ ਵਧਦੇ ਹਨ ਅਤੇ y-ਮੁੱਲ ਹੇਠਾਂ ਵਧਦੇ ਹਨ। ਇਹ ਪਹੁੰਚ ਸ਼ੁਰੂਆਤੀ ਕੰਪਿਊਟਰ ਡਿਸਪਲੇਜ਼ ਤੋਂ ਆਉਂਦੀ ਹੈ ਜਿੱਥੇ ਇਲੈਕਟ੍ਰਾਨ ਬੀਮ ਟੌਪ ਤੋਂ ਬਾਟਮ ਤੱਕ ਸਕੈਨ ਕਰਦੇ ਸਨ, ਜਿਸ ਨਾਲ ਟੌਪ-ਲੇਫਟ ਕੁਦਰਤੀ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਬਣ ਜਾਂਦਾ ਹੈ।
+
+```mermaid
+quadrantChart
+    title Canvas Coordinate System
+    x-axis Left --> Right
+    y-axis Top --> Bottom
+    quadrant-1 Quadrant 1
+    quadrant-2 Quadrant 2  
+    quadrant-3 Quadrant 3
+    quadrant-4 Quadrant 4
+    
+    Origin Point: [0.1, 0.1]
+    Hero Center: [0.5, 0.8]
+    Enemy Formation: [0.3, 0.2]
+    Power-up: [0.7, 0.6]
+    UI Elements: [0.9, 0.1]
+```
 
 ![ਕੈਨਵਸ ਦਾ ਗ੍ਰਿਡ](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.pa.png)
 > ਚਿੱਤਰ [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) ਤੋਂ
 
-ਕੈਨਵਸ ਐਲੀਮੈਂਟ 'ਤੇ ਡਰਾਇੰਗ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਉਹੀ ਤਿੰਨ-ਕਦਮ ਦੀ ਪ੍ਰਕਿਰਿਆ ਦੀ ਪਾਲਣਾ ਕਰੋਗੇ ਜੋ ਸਾਰੇ ਕੈਨਵਸ ਗ੍ਰਾਫਿਕਸ ਦਾ ਅਧਾਰ ਬਣਦੀ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਕੁਝ ਵਾਰ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਸਵਭਾਵਿਕ ਬਣ ਜਾਂਦਾ ਹੈ:
+ਕੈਨਵਸ ਤੱਤ 'ਤੇ ਡਰਾਇੰਗ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਉਹੀ ਤਿੰਨ-ਕਦਮ ਪ੍ਰਕਿਰਿਆ ਅਪਣਾਉਂਦੇ ਹੋ ਜੋ ਸਾਰੇ ਕੈਨਵਸ ਗ੍ਰਾਫਿਕਸ ਦੀ ਬੁਨਿਆਦ ਬਣਦੀ ਹੈ। ਜਦ ਤੁਸੀਂ ਇਹ ਕੁਝ ਵਾਰ ਕਰਦੇ ਹੋ, ਇਹ ਦੂਸਰੀ ਕੁਦਰਤ ਬਣ ਜਾਂਦੀ ਹੈ:
+
+```mermaid
+flowchart LR
+    A[HTML Canvas Element] --> B[Get Canvas Reference]
+    B --> C[Get 2D Context]
+    C --> D[Drawing Operations]
+    
+    D --> E[Draw Shapes]
+    D --> F[Draw Text]
+    D --> G[Draw Images]
+    D --> H[Apply Styles]
+    
+    E --> I[Render to Screen]
+    F --> I
+    G --> I
+    H --> I
+    
+    style A fill:#e1f5fe
+    style C fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
-1. **ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਲਈ ਰਿਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰੋ** DOM ਤੋਂ (ਬਿਲਕੁਲ ਹੋਰ HTML ਐਲੀਮੈਂਟ ਵਾਂਗ)
-2. **2D ਰੈਂਡਰਿੰਗ ਸੰਦਰਭ ਪ੍ਰਾਪਤ ਕਰੋ** – ਇਹ ਸਾਰੇ ਡਰਾਇੰਗ ਵਿਧੀਆਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
-3. **ਡਰਾਇੰਗ ਸ਼ੁਰੂ ਕਰੋ!** ਸੰਦਰਭ ਦੀਆਂ ਬਿਲਟ-ਇਨ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਗ੍ਰਾਫਿਕਸ ਬਣਾਓ
+1. **ਤੁਹਾਡੇ ਕੈਨਵਸ ਤੱਤ ਲਈ ਇੱਕ ਰੈਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰੋ** DOM ਤੋਂ (ਬਿਲਕੁਲ ਕਿਸੇ ਹੋਰ HTML ਤੱਤ ਵਾਂਗ)
+2. **2D ਰੈਂਡਰਿੰਗ ਸੰਦਰਭ ਪ੍ਰਾਪਤ ਕਰੋ** – ਇਹ ਸਾਰੇ ਡਰਾਇੰਗ ਤਰੀਕਿਆਂ ਨੂੰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
+3. **ਡਰਾਇੰਗ ਸ਼ੁਰੂ ਕਰੋ!** ਸੰਦਰਭ ਦੇ ਬਿਲਟ-ਇਨ ਤਰੀਕਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਗ੍ਰਾਫਿਕਸ ਬਣਾਓ
 
 ਇਹ ਕੋਡ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
 
@@ -67,29 +152,68 @@ ctx.fillStyle = 'red';
 ctx.fillRect(0, 0, 200, 200); // x, y, width, height
 ```
 
-**ਆਓ ਇਸ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਤੋੜੀਏ:**
-- ਅਸੀਂ **ਆਪਣੇ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਨੂੰ** ਇਸਦੇ ID ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਕੜਦੇ ਹਾਂ ਅਤੇ ਇਸਨੂੰ ਇੱਕ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰਦੇ ਹਾਂ
-- ਅਸੀਂ **2D ਰੈਂਡਰਿੰਗ ਸੰਦਰਭ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ** – ਇਹ ਸਾਡੇ ਡਰਾਇੰਗ ਵਿਧੀਆਂ ਨਾਲ ਭਰਿਆ ਟੂਲਕਿਟ ਹੈ
+**ਆਓ ਇਸਨੂੰ ਕਦਮ ਦਰ ਕਦਮ ਤੋੜੀਏ:**
+- ਅਸੀਂ **ਆਪਣੇ ਕੈਨਵਸ ਤੱਤ ਨੂੰ** ਇਸਦੇ ID ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਕੜਦੇ ਹਾਂ ਅਤੇ ਇਸਨੂੰ ਇੱਕ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰਦੇ ਹਾਂ
+- ਅਸੀਂ **2D ਰੈਂਡਰਿੰਗ ਸੰਦਰਭ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ** – ਇਹ ਸਾਡੇ ਡਰਾਇੰਗ ਤਰੀਕਿਆਂ ਨਾਲ ਭਰਿਆ ਹੋਇਆ ਸੰਦ ਹੈ
 - ਅਸੀਂ **ਕੈਨਵਸ ਨੂੰ ਦੱਸਦੇ ਹਾਂ** ਕਿ ਅਸੀਂ ਚੀਜ਼ਾਂ ਨੂੰ ਲਾਲ ਰੰਗ ਨਾਲ ਭਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ `fillStyle` ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- ਅਸੀਂ **ਡਰਾਇੰਗ ਕਰਦੇ ਹਾਂ** ਇੱਕ ਆਯਤਕਾਰ ਜੋ ਟੌਪ-ਲੈਫਟ ਕੋਨੇ (0,0) 'ਤੇ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜੋ 200 ਪਿਕਸਲ ਚੌੜਾ ਅਤੇ ਲੰਬਾ ਹੈ
+- ਅਸੀਂ **ਆਯਤਕਾਰ ਡਰਾਇੰਗ ਕਰਦੇ ਹਾਂ** ਜੋ ਟੌਪ-ਲੇਫਟ ਕੋਨੇ (0,0) ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜੋ 200 ਪਿਕਸਲ ਚੌੜਾ ਅਤੇ ਲੰਮਾ ਹੈ
 
-✅ ਕੈਨਵਸ API ਮੁੱਖ ਤੌਰ 'ਤੇ 2D ਆਕਾਰਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ, ਪਰ ਤੁਸੀਂ ਇੱਕ ਵੈੱਬਸਾਈਟ 'ਤੇ 3D ਐਲੀਮੈਂਟ ਵੀ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ; ਇਸ ਲਈ, ਤੁਸੀਂ [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
+✅ ਕੈਨਵਸ API ਮੁੱਖ ਤੌਰ 'ਤੇ 2D ਆਕਾਰਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ, ਪਰ ਤੁਸੀਂ ਇੱਕ ਵੈੱਬਸਾਈਟ 'ਤੇ 3D ਤੱਤ ਵੀ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ; ਇਸ ਲਈ, ਤੁਸੀਂ [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
 
-ਤੁਸੀਂ ਕੈਨਵਸ API ਨਾਲ ਬਹੁਤ ਕੁਝ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ:
+ਤੁਸੀਂ ਕੈਨਵਸ API ਨਾਲ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਚੀਜ਼ਾਂ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ:
 
-- **ਜਿਓਮੈਟ੍ਰਿਕਲ ਆਕਾਰ**, ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਦਿਖਾਇਆ ਕਿ ਕਿਵੇਂ ਇੱਕ ਆਯਤਕਾਰ ਡਰਾਇੰਗ ਕਰਨਾ ਹੈ, ਪਰ ਹੋਰ ਬਹੁਤ ਕੁਝ ਹੈ ਜੋ ਤੁਸੀਂ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ।
-- **ਟੈਕਸਟ**, ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਫੋਂਟ ਅਤੇ ਰੰਗ ਨਾਲ ਟੈਕਸਟ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ।
-- **ਚਿੱਤਰ**, ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਇੱਕ ਚਿੱਤਰ ਐਸੈਟ ਜਿਵੇਂ .jpg ਜਾਂ .png ਤੋਂ ਆਧਾਰਿਤ ਹੋ।
+- **ਜਾਮਿਤੀ ਆਕਾਰ**, ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਦਿਖਾਇਆ ਹੈ ਕਿ ਕਿਵੇਂ ਇੱਕ ਆਯਤਕਾਰ ਡਰਾਇੰਗ ਕਰਨਾ ਹੈ, ਪਰ ਹੋਰ ਬਹੁਤ ਕੁਝ ਹੈ ਜੋ ਤੁਸੀਂ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ।
+- **ਪਾਠ**, ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਫੌਂਟ ਅਤੇ ਰੰਗ ਨਾਲ ਪਾਠ ਲਿਖ ਸਕਦੇ ਹੋ।
+- **ਤਸਵੀਰਾਂ**, ਤੁਸੀਂ ਇੱਕ ਤਸਵੀਰ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਇੱਕ .jpg ਜਾਂ .png ਜਿਵੇਂ ਤਸਵੀਰ ਦੇ ਸਰੋਤ 'ਤੇ ਆਧਾਰਿਤ ਹੋਵੇ।
 
-✅ ਇਸਨੂੰ ਅਜ਼ਮਾਓ! ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਇੱਕ ਆਯਤਕਾਰ ਕਿਵੇਂ ਡਰਾਇੰਗ ਕਰਨਾ ਹੈ, ਕੀ ਤੁਸੀਂ ਪੇਜ 'ਤੇ ਇੱਕ ਗੋਲ ਡਰਾਇング ਕਰ ਸਕਦੇ ਹੋ? CodePen 'ਤੇ ਕੁਝ ਦਿਲਚਸਪ ਕੈਨਵਸ ਡਰਾਇੰਗਾਂ ਦੇਖੋ। ਇੱਥੇ ਇੱਕ [ਖਾਸ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਉਦਾਹਰਨ](https://codepen.io/dissimulate/pen/KrAwx) ਹੈ।
+✅ ਇਸਨੂੰ ਅਜ਼ਮਾਓ! ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਇੱਕ ਆਯਤਕਾਰ ਕਿਵੇਂ ਡਰਾਇੰਗ ਕਰਨਾ ਹੈ, ਕੀ ਤੁਸੀਂ ਇੱਕ ਪੰਨੇ 'ਤੇ ਇੱਕ ਗੋਲ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ? ਕੁਝ ਦਿਲਚਸਪ ਕੈਨਵਸ ਡਰਾਇੰਗਾਂ ਨੂੰ CodePen 'ਤੇ ਦੇਖੋ। ਇੱਥੇ ਇੱਕ [ਖਾਸ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਉਦਾਹਰਨ ਹੈ](https://codepen.io/dissimulate/pen/KrAwx)।
 
-## ਚਿੱਤਰ ਐਸੈਟ ਲੋਡ ਅਤੇ ਡਰਾਇੰਗ ਕਰੋ
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈਕ-ਇਨ**
+**ਕੈਨਵਸ ਬੁਨਿਆਦੀਆਂ ਸਮਝ**: ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਵੱਲ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਇਹ ਸਮਝਦੇ ਹੋ:
+- ✅ ਕੈਨਵਸ ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ ਮੈਥਮੈਟਿਕਲ ਕੋਆਰਡੀਨੇਟਸ ਤੋਂ ਕਿਵੇਂ ਵੱਖਰਾ ਹੈ
+- ✅ ਕੈਨਵਸ ਡਰਾਇੰਗ ਕਾਰਵਾਈਆਂ ਲਈ ਤਿੰਨ-ਕਦਮ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝੋ
+- ✅ ਪਛਾਣੋ ਕਿ 2D ਰੈਂਡਰਿੰਗ ਸੰਦਰਭ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
+- ✅ ਵੇਰਵਾ ਦਿਓ ਕਿ fillStyle ਅਤੇ fillRect ਕਿਵੇਂ ਇਕੱਠੇ ਕੰਮ ਕਰਦੇ ਹਨ
 
-ਸਧਾਰਨ ਆਕਾਰਾਂ ਨੂੰ ਡਰਾਇੰਗ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਲਾਭਦਾਇਕ ਹੈ, ਪਰ ਜ਼ਿਆਦਾਤਰ ਗੇਮਾਂ ਨੂੰ ਅਸਲ ਚਿੱਤਰਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ! ਸਪ੍ਰਾਈਟਸ, ਬੈਕਗ੍ਰਾਊਂਡ, ਅਤੇ ਟੈਕਸਚਰ ਗੇਮਾਂ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਅਪੀਲ ਦਿੰਦੇ ਹਨ। ਕੈਨਵਸ 'ਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਲੋਡ ਅਤੇ ਡਿਸਪਲੇ ਕਰਨਾ ਜਿਓਮੈਟ੍ਰਿਕਲ ਆਕਾਰਾਂ ਨੂੰ ਡਰਾਇੰਗ ਕਰਨ ਤੋਂ ਵੱਖਰਾ ਹੈ, ਪਰ ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝ ਲੈਂਦੇ ਹੋ ਤਾਂ ਇਹ ਸਿੱਧਾ ਹੈ।
+**ਤੇਜ਼ ਸਵੈ-ਪ੍ਰੀਖਣ**: ਤੁਸੀਂ (100, 50) ਸਥਿਤੀ 'ਤੇ 25 ਦੇ ਅਰਧਵਿਆਸ ਨਾਲ ਇੱਕ ਨੀਲਾ ਗੋਲ ਕਿਵੇਂ ਡਰਾਇੰਗ ਕਰੋਗੇ?
+```javascript
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(100, 50, 25, 0, 2 * Math.PI);
+ctx.fill();
+```
 
-ਸਾਨੂੰ ਇੱਕ `Image` ਆਬਜੈਕਟ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ, ਆਪਣੀ ਚਿੱਤਰ ਫਾਈਲ ਨੂੰ ਲੋਡ ਕਰਨਾ ਹੈ (ਇਹ ਅਸਿੰਕ੍ਰੋਨਸ ਤੌਰ 'ਤੇ ਹੁੰਦਾ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ "ਪਿਛਲੇ ਪਾਸੇ"), ਅਤੇ ਫਿਰ ਜਦੋਂ ਚਿੱਤਰ ਤਿਆਰ ਹੋਵੇ ਤਾਂ ਇਸਨੂੰ ਕੈਨਵਸ 'ਤੇ ਡਰਾਇੰਗ ਕਰਨਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਤੁਹਾਡੇ ਚਿੱਤਰ ਸਹੀ ਤੌਰ 'ਤੇ ਡਿਸਪਲੇ ਹੋਣਗੇ ਬਿਨਾਂ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਰੋਕੇ।
+**ਕੈਨਵਸ ਡਰਾਇੰਗ ਤਰੀਕੇ ਜੋ ਤੁਸੀਂ ਹੁਣ ਜਾਣਦੇ ਹੋ**:
+- **fillRect()**: ਭਰੇ ਹੋਏ ਆਯਤਕਾਰ ਡਰਾਇੰਗ ਕਰਦਾ ਹੈ
+- **fillStyle**: ਰੰਗ ਅਤੇ ਪੈਟਰਨ ਸੈੱਟ ਕਰਦਾ ਹੈ
+- **beginPath()**: ਨਵੇਂ ਡਰਾਇੰਗ ਪਾਥ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ
+- **arc()**: ਗੋਲ ਅਤੇ ਕਰਵ ਬਣਾਉਂਦਾ ਹੈ
+
+## ਇੱਕ ਤਸਵੀਰ ਐਸੈਟ ਲੋਡ ਕਰੋ ਅਤੇ ਡਰਾਇੰਗ ਕਰੋ
+
+ਸਧਾਰਨ ਆਕਾਰ ਡਰਾਇੰਗ ਕਰਨਾ ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ ਲਾਭਦਾਇਕ ਹੈ, ਪਰ ਜ਼ਿਆਦਾਤਰ ਗੇਮਾਂ ਨੂੰ ਅਸਲ ਤਸਵੀਰਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ! ਸਪ੍ਰਾਈਟਸ, ਬੈਕਗਰਾਊਂਡ, ਅਤੇ ਟੈਕਸਚਰ ਉਹ ਹਨ ਜੋ ਗੇਮਾਂ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਆਕਰਸ਼ਣ ਦਿੰਦੇ ਹਨ। ਕੈਨਵਸ 'ਤੇ ਤਸਵੀਰਾਂ ਨੂੰ ਲੋਡ ਅਤੇ ਡਿਸਪਲੇ ਕਰਨਾ ਜਾਮਿਤੀ ਆਕਾਰਾਂ ਨੂੰ ਡਰਾਇੰਗ ਕਰਨ ਤੋਂ ਵੱਖਰਾ ਹੈ, ਪਰ ਜਦ ਤੁਸੀਂ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝ ਲੈਂਦੇ ਹੋ ਤਾਂ ਇਹ ਸਿੱਧਾ ਹੈ।
+
+ਸਾਨੂੰ ਇੱਕ `Image` ਆਬਜੈਕਟ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ, ਆਪਣੀ ਤਸਵੀਰ ਫਾਈਲ ਨੂੰ ਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਹੈ (ਇਹ ਅਸਮਕਾਲੀ ਤੌਰ 'ਤੇ ਹੁੰਦਾ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ "ਪਿਛਲੇ ਪਾਸੇ"), ਅਤੇ ਫਿਰ ਇਸਨੂੰ ਕੈਨਵਸ 'ਤੇ ਡਰਾਇੰਗ ਕਰੋ ਜਦੋਂ ਇਹ ਤਿਆਰ ਹੋਵੇ। ਇਹ ਪਹੁੰਚ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਤੁਹਾਡੀਆਂ ਤਸਵੀਰਾਂ ਸਹੀ ਤੌਰ 'ਤੇ ਡਿਸਪਲੇ ਹੁੰਦੀਆਂ ਹਨ ਬਿਨਾਂ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਰੋਕਣ ਦੇ।
+
+```mermaid
+sequenceDiagram
+    participant JS as JavaScript
+    participant Img as Image Object
+    participant Server as File Server
+    participant Canvas as Canvas Context
+    
+    JS->>Img: new Image()
+    JS->>Img: Set src property
+    Img->>Server: Request image file
+    Server->>Img: Return image data
+    Img->>JS: Trigger onload event
+    JS->>Canvas: drawImage(img, x, y)
+    Canvas->>Canvas: Render to screen
+    
+    Note over JS,Canvas: Async loading prevents UI blocking
+```
 
-### ਸਧਾਰਨ ਚਿੱਤਰ ਲੋਡ ਕਰਨਾ
+### ਬੁਨਿਆਦੀ ਤਸਵੀਰ ਲੋਡ ਕਰਨਾ
 
 ```javascript
 const img = new Image();
@@ -101,13 +225,13 @@ img.onload = () => {
 ```
 
 **ਇਸ ਕੋਡ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- ਅਸੀਂ **ਇੱਕ ਨਵਾਂ ਚਿੱਤਰ ਆਬਜੈਕਟ ਬਣਾਉਂਦੇ ਹਾਂ** ਜੋ ਸਾਡੇ ਸਪ੍ਰਾਈਟ ਜਾਂ ਟੈਕਸਚਰ ਨੂੰ ਰੱਖੇਗਾ
-- ਅਸੀਂ **ਇਸਨੂੰ ਦੱਸਦੇ ਹਾਂ** ਕਿ ਕਿਹੜੀ ਚਿੱਤਰ ਫਾਈਲ ਨੂੰ ਲੋਡ ਕਰਨਾ ਹੈ `source path` ਸੈੱਟ ਕਰਕੇ
-- ਅਸੀਂ **ਲੋਡ ਇਵੈਂਟ ਲਈ ਸੁਣਦੇ ਹਾਂ** ਤਾਂ ਜੋ ਸਾਨੂੰ ਪਤਾ ਲੱਗੇ ਕਿ ਚਿੱਤਰ ਕਦੋਂ ਵਰਤਣ ਲਈ ਤਿਆਰ ਹੈ
+- ਅਸੀਂ **ਇੱਕ ਨਵਾਂ Image ਆਬਜੈਕਟ ਬਣਾਉਂਦੇ ਹਾਂ** ਜੋ ਸਾਡੇ ਸਪ੍ਰਾਈਟ ਜਾਂ ਟੈਕਸਚਰ ਨੂੰ ਰੱਖੇਗਾ
+- ਅਸੀਂ **ਇਸਨੂੰ ਦੱਸਦੇ ਹਾਂ** ਕਿ ਕਿਹੜੀ ਤਸਵੀਰ ਫਾਈਲ ਨੂੰ ਲੋਡ ਕਰਨਾ ਹੈ ਸਰੋਤ ਪਾਥ ਸੈੱਟ ਕਰਕੇ
+- ਅਸੀਂ **ਲੋਡ ਇਵੈਂਟ ਲਈ ਸੁਣਦੇ ਹਾਂ** ਤਾਂ ਜੋ ਸਾਨੂੰ ਪਤਾ ਲੱਗੇ ਕਿ ਤਸਵੀਰ ਕਦੋਂ ਵਰਤਣ ਲਈ ਤਿਆਰ ਹੈ
 
-### ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ
+### ਤਸਵੀਰਾਂ ਨੂੰ ਲੋਡ ਕਰਨ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ
 
-ਇੱਥੇ ਇੱਕ ਹੋਰ ਮਜ਼ਬੂਤ ਤਰੀਕਾ ਹੈ ਜੋ ਪੇਸ਼ੇਵਰ ਵਿਕਾਸਕਾਰ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤਦੇ ਹਨ। ਅਸੀਂ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਨੂੰ ਇੱਕ Promise-ਅਧਾਰਤ ਫੰਕਸ਼ਨ ਵਿੱਚ ਰੈਪ ਕਰਾਂਗੇ – ਇਹ ਪਹੁੰਚ, ES6 ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ Promises ਦੇ ਮਿਆਰੀ ਬਣਨ 'ਤੇ ਪ੍ਰਚਲਿਤ ਹੋਈ, ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹੋਰ ਸੁਗਠਿਤ ਬਣਾਉਂਦੀ ਹੈ ਅਤੇ ਗਲਤੀਆਂ ਨੂੰ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਦੀ ਹੈ:
+ਇੱਥੇ ਇੱਕ ਹੋਰ ਮਜ਼ਬੂਤ ਤਰੀਕਾ ਹੈ ਜੋ ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤਦੇ ਹਨ। ਅਸੀਂ ਤਸਵੀਰ ਲੋਡ ਕਰਨ ਨੂੰ ਇੱਕ ਪ੍ਰਾਮਿਸ-ਅਧਾਰਿਤ ਫੰਕਸ਼ਨ ਵਿੱਚ ਲਪੇਟਾਂਗੇ – ਇਹ ਪਹੁੰਚ, ਜੋ ES6 ਵਿੱਚ ਜਦੋਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਮਿਸ ਮਿਆਰੀ ਬਣੇ, ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹੋਰ ਸੰਗਠਿਤ ਬਣਾਉਂਦੀ ਹੈ ਅਤੇ ਗਲਤੀਆਂ ਨੂੰ ਸੁਚੱਜੇ ਢੰਗ ਨਾਲ ਸੰਭਾਲਦੀ ਹੈ:
 
 ```javascript
 function loadAsset(path) {
@@ -135,13 +259,13 @@ async function initializeGame() {
 }
 ```
 
-**ਇੱਥੇ ਅਸੀਂ ਕੀ ਕੀਤਾ ਹੈ:**
-- **ਸਾਰੇ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਦੀ ਲਾਜ਼ਮੀ ਲਾਜ਼ਮੀ** ਨੂੰ ਇੱਕ Promise ਵਿੱਚ ਰੈਪ ਕੀਤਾ ਤਾਂ ਜੋ ਅਸੀਂ ਇਸਨੂੰ ਹੋਰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਭਾਲ ਸਕੀਏ
-- **ਗਲਤੀ ਸੰਭਾਲਣ ਸ਼ਾਮਲ ਕੀਤਾ** ਜੋ ਸਾਨੂੰ ਅਸਲ ਵਿੱਚ ਦੱਸਦਾ ਹੈ ਕਿ ਕੁਝ ਗਲਤ ਹੋਣ 'ਤੇ ਕੀ ਹੋਇਆ
-- **ਆਧੁਨਿਕ async/await ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ** ਕਿਉਂਕਿ ਇਹ ਪੜ੍ਹਨ ਵਿੱਚ ਬਹੁਤ ਹੀ ਸਾਫ਼ ਹੈ
-- **try/catch ਬਲਾਕ ਸ਼ਾਮਲ ਕੀਤੇ** ਤਾਂ ਜੋ ਲੋਡ ਕਰਨ ਜਾਂ ਰੈਂਡਰ ਕਰਨ ਦੌਰਾਨ ਹੋਣ ਵਾਲੀਆਂ ਕਿਸੇ ਵੀ ਗਲਤੀਆਂ ਨੂੰ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾ ਸਕੇ
+**ਅਸੀਂ ਇੱਥੇ ਕੀ ਕੀਤਾ ਹੈ:**
+- ਸਾਰੇ ਤਸਵੀਰ ਲੋਡ ਕਰਨ ਵਾਲੇ ਲੌਜਿਕ ਨੂੰ ਇੱਕ ਪ੍ਰਾਮਿਸ ਵਿੱਚ **ਲਪੇਟਿਆ** ਤਾਂ ਜੋ ਅਸੀਂ ਇਸਨੂੰ ਹੋਰ ਵਧੀਆ ਢੰਗ ਨਾਲ ਸੰਭਾਲ ਸਕੀਏ
+- ਗਲਤੀ ਸੰਭਾਲਣ **ਸ਼ਾਮਲ ਕੀਤਾ** ਜੋ ਅਸਲ ਵਿੱਚ ਸਾਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਜਦੋਂ ਕੁਝ ਗਲਤ ਹੁੰਦਾ ਹੈ
+- ਆਧੁਨਿਕ async/await ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਕਿਉਂਕਿ ਇਹ ਪੜ੍ਹਨ ਲਈ ਬਹੁਤ ਸਾਫ਼ ਹੈ
+- try/catch ਬਲਾਕ ਸ਼ਾਮਲ ਕੀਤੇ ਤਾਂ ਜੋ ਕਿਸੇ ਵੀ ਲੋਡਿੰਗ ਹੱਝਪੇ ਨੂੰ ਸੁਚੱਜੇ ਢੰਗ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾ ਸਕੇ
 
-ਜਦੋਂ ਤੁਹਾਡੇ ਚਿੱਤਰ ਲੋਡ ਹੋ ਜਾਂਦੇ ਹਨ, ਕੈਨਵਸ 'ਤੇ ਡਰਾਇੰਗ ਕਰਨਾ ਅਸਲ ਵਿੱਚ ਕਾਫ਼ੀ ਸਿੱਧਾ ਹੁੰਦਾ ਹੈ:
+ਜਦੋਂ ਤੁਹਾਡੀਆਂ ਤਸਵੀਰਾਂ ਲੋਡ ਹੋ ਜਾਂਦੀਆਂ ਹਨ, ਕੈਨਵਸ 'ਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਡਰਾਇੰਗ ਕਰਨਾ ਅਸਲ ਵਿੱਚ ਕਾਫ਼ੀ ਸਿੱਧਾ ਹੁੰਦਾ ਹੈ:
 
 ```javascript
 async function renderGameScreen() {
@@ -163,34 +287,175 @@ async function renderGameScreen() {
 }
 ```
 
-**ਆਓ ਇਸ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਤੋੜੀਏ:**
-- ਅਸੀਂ **ਆਪਣੇ ਹੀਰੋ ਅਤੇ ਮੋਨਸਟਰ ਚਿੱਤਰਾਂ ਨੂੰ** ਪਿਛਲੇ ਪਾਸੇ await ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੋਡ ਕਰਦੇ ਹਾਂ
-- ਅਸੀਂ **ਆਪਣੇ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਨੂੰ ਪਕੜਦੇ ਹਾਂ** ਅਤੇ ਉਹ 2D ਰੈਂਡਰਿੰਗ ਸੰਦਰਭ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ ਜਿਸਦੀ ਸਾਨੂੰ ਲੋੜ ਹੈ
-- ਅਸੀਂ **ਹੀਰੋ ਚਿੱਤਰ ਨੂੰ** ਸੈਂਟਰ ਵਿੱਚ ਪੋਜ਼ੀਸ਼ਨ ਕਰਦੇ ਹਾਂ ਕੁਝ ਤੇਜ਼ ਕੋਆਰਡੀਨੇਟ ਮੈਥ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- ਅਸੀਂ **ਮੋਨਸਟਰ ਚਿੱਤਰ ਨੂੰ** ਟੌਪ-ਲੈਫਟ ਕੋਨੇ 'ਤੇ ਪੋਜ਼ੀਸ਼ਨ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਸਾਡੀ ਦੁਸ਼ਮਣ ਬਣਤਰ ਸ਼ੁਰੂ ਹੋ ਸਕੇ
-- ਅਸੀਂ **ਕੋਈ ਵੀ ਗਲਤੀ** ਜੋ ਲੋਡ ਕਰਨ ਜਾਂ ਰੈਂਡਰ ਕਰਨ ਦੌਰਾਨ ਹੋ ਸਕਦੀ ਹੈ, ਨੂੰ ਪਕੜਦੇ ਹਾਂ
-
-## ਹੁਣ ਤੁਹਾਡਾ ਗੇਮ ਬਣਾਉਣ ਦਾ ਸਮਾਂ ਹੈ
+**ਆਓ ਇਸਨੂੰ ਕਦਮ ਦਰ ਕਦਮ ਸਮਝੀਏ:**
+- ਅਸੀਂ **ਆਪਣੇ ਹੀਰੋ ਅਤੇ ਮੌਂਸਟਰ ਤਸਵੀਰਾਂ ਨੂੰ** ਬੈਕਗਰਾਊਂਡ ਵਿੱਚ await ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੋਡ ਕਰਦੇ ਹਾਂ
+- ਅਸੀਂ **ਆਪਣੇ ਕੈਨਵਸ ਤੱਤ ਨੂੰ ਪਕੜਦੇ ਹਾਂ** ਅਤੇ ਉਹ 2D ਰੈਂਡਰਿੰਗ ਸੰਦਰਭ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ ਜਿਸਦੀ ਸਾਨੂੰ ਲੋੜ ਹੈ
+- ਅਸੀਂ **ਹੀਰੋ ਤਸਵੀਰ ਨੂੰ ਸਥਿਤ ਕਰਦੇ ਹਾਂ** ਸਿੱਧੇ ਕੇਂਦਰ ਵਿੱਚ ਕੁਝ ਤੇਜ਼ ਕੋਆਰਡੀਨੇਟ ਗਣਿਤ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- ਅਸੀਂ **ਮੌਂਸਟਰ ਤਸਵੀਰ ਨੂੰ** ਟੌਪ-ਲੇਫਟ ਕੋਨੇ 'ਤੇ ਰੱਖਦੇ ਹਾਂ ਤਾਂ ਜੋ ਸਾਡੀ ਦੁਸ਼ਮਣੀ ਫਾਰਮੇਸ਼ਨ ਸ਼ੁਰੂ
+- **ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ**: ਗਣਿਤ ਨੂੰ ਸਕ੍ਰੀਨ ਪੋਜ਼ੀਸ਼ਨ ਵਿੱਚ ਤਬਦੀਲ ਕਰਨਾ  
+- **ਸਪ੍ਰਾਈਟ ਪ੍ਰਬੰਧਨ**: ਗੇਮ ਗ੍ਰਾਫਿਕਸ ਨੂੰ ਲੋਡ ਅਤੇ ਡਿਸਪਲੇ ਕਰਨਾ  
+- **ਫਾਰਮੇਸ਼ਨ ਐਲਗੋਰਿਥਮ**: ਸੁਧਰੇ ਹੋਏ ਲੇਆਉਟ ਲਈ ਗਣਿਤਕ ਪੈਟਰਨ  
+- **ਐਸਿੰਕ ਓਪਰੇਸ਼ਨ**: ਸਮਰਥ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸੁਚਾਰੂ ਯੂਜ਼ਰ ਅਨੁਭਵ ਲਈ  
 
-ਹੁਣ ਅਸੀਂ ਸਭ ਕੁਝ ਇਕੱਠਾ ਕਰਾਂਗੇ ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਸਪੇਸ ਗੇਮ ਦਾ ਦ੍ਰਿਸ਼ਮਾਨ ਅਧਾਰ ਬਣਾਇਆ ਜਾ ਸਕੇ। ਤੁਹਾਨੂੰ ਕੈਨਵਸ ਦੇ ਮੁਢਲੀ ਬੁਨਿਆਦਾਂ ਅਤੇ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਦੀ ਤਕਨੀਕਾਂ ਦੀ ਪੂਰੀ ਸਮਝ ਹੈ, ਇਸ ਲਈ ਇਹ ਹੱਥ-ਅਨੁਭਵ ਸੈਕਸ਼ਨ ਤੁਹਾਨੂੰ ਸਹੀ ਤੌਰ 'ਤੇ ਪੋਜ਼ੀਸ਼ਨ ਕੀਤੇ ਸਪ੍ਰਾਈਟਸ ਨਾਲ ਇੱਕ ਪੂਰੀ ਗੇਮ ਸਕ੍ਰੀਨ ਬਣਾਉਣ ਲਈ ਮਾਰਗਦਰਸ਼ਨ ਕਰੇਗਾ।
+## ਨਤੀਜਾ  
 
-### ਕੀ ਬਣਾਉਣਾ ਹੈ
+ਅੰਤਮ ਨਤੀਜਾ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ:  
 
-ਤੁਸੀਂ ਇੱਕ ਵੈੱਬ ਪੇਜ ਬਣਾਉਗੇ ਜਿਸ ਵਿੱਚ ਇੱਕ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਹੋਵੇਗਾ। ਇਹ ਇੱਕ ਕਾਲਾ ਸਕ੍ਰੀਨ `1024*768` ਰੈਂਡਰ ਕਰੇਗਾ। ਅਸੀਂ ਤੁਹਾਨੂੰ ਦੋ ਚਿੱਤਰ ਪ੍ਰਦਾਨ ਕੀਤੇ ਹਨ:
+![ਕਾਲੀ ਸਕ੍ਰੀਨ ਜਿਸ ਵਿੱਚ ਇੱਕ ਹੀਰੋ ਅਤੇ 5*5 ਮੋਨਸਟਰ ਹਨ](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.pa.png)  
 
-- ਹੀਰੋ ਜਹਾਜ਼
+## ਹੱਲ  
 
-   ![ਹੀਰੋ ਜਹਾਜ਼](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.pa.png)
+ਪਹਿਲਾਂ ਇਸਨੂੰ ਖੁਦ ਹੱਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਪਰ ਜੇ ਤੁਸੀਂ ਫਸ ਜਾਓ, ਤਾਂ [ਹੱਲ](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) ਵੇਖੋ।  
 
-- 5*5 ਮੋਨਸਟਰ
-
-   ![ਮੋਨਸਟਰ ਜਹਾਜ਼](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.pa.png)
-
-### ਵਿਕਾਸ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਿਫਾਰਸ਼ੀ ਕਦਮ
+---
 
-ਸ਼ੁਰੂਆਤੀ ਫਾਈਲਾਂ ਨੂੰ ਲੱਭੋ ਜੋ ਤੁਹਾਡੇ ਲਈ `your-work` ਸਬ ਫੋਲਡ
+## GitHub Copilot Agent Challenge 🚀  
+
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:  
+
+**ਵੇਰਵਾ:** ਆਪਣੇ ਸਪੇਸ ਗੇਮ ਕੈਨਵਸ ਨੂੰ ਵਿਜੁਅਲ ਪ੍ਰਭਾਵ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਤੱਤਾਂ ਨਾਲ ਵਧਾਓ, ਜੋ ਕਿ ਤੁਸੀਂ ਸਿੱਖੇ ਕੈਨਵਸ API ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਰ ਸਕਦੇ ਹੋ।  
+
+**ਪ੍ਰੋੰਪਟ:** `enhanced-canvas.html` ਨਾਮਕ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਇੱਕ ਕੈਨਵਸ ਹੋਵੇ ਜੋ ਪਿਛੋਕੜ ਵਿੱਚ ਐਨੀਮੇਟਡ ਸਟਾਰ ਦਿਖਾਏ, ਹੀਰੋ ਸ਼ਿਪ ਲਈ ਇੱਕ ਪਲਸਿੰਗ ਹੈਲਥ ਬਾਰ, ਅਤੇ ਦੁਸ਼ਮਨ ਸ਼ਿਪਾਂ ਜੋ ਹੌਲੀ-ਹੌਲੀ ਹੇਠਾਂ ਵੱਲ ਚਲਦੀਆਂ ਹਨ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਰੈਂਡਮ ਪੋਜ਼ੀਸ਼ਨ ਅਤੇ ਓਪੇਸਿਟੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟਵਿੰਕਲਿੰਗ ਸਟਾਰ ਖਿੱਚਦਾ ਹੈ, ਹੈਲਥ ਬਾਰ ਨੂੰ ਹੈਲਥ ਲੈਵਲ ਦੇ ਅਧਾਰ 'ਤੇ ਰੰਗ ਬਦਲਣ ਲਈ ਲਾਗੂ ਕਰਦਾ ਹੈ (ਹਰਾ > ਪੀਲਾ > ਲਾਲ), ਅਤੇ ਦੁਸ਼ਮਨ ਸ਼ਿਪਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਗਤੀ ਨਾਲ ਸਕ੍ਰੀਨ ਦੇ ਹੇਠਾਂ ਵੱਲ ਚਲਾਉਂਦਾ ਹੈ।  
+
+[Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਇੱਥੇ।  
+
+## 🚀 ਚੈਲੈਂਜ  
+
+ਤੁਸੀਂ 2D-ਕੇਂਦਰਤ ਕੈਨਵਸ API ਨਾਲ ਡ੍ਰਾਇੰਗ ਬਾਰੇ ਸਿੱਖਿਆ ਹੈ; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ਨੂੰ ਵੇਖੋ ਅਤੇ 3D ਵਸਤੂ ਖਿੱਚਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।  
+
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼  
+
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/32)  
+
+## ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਅਧਿਐਨ  
+
+ਕੈਨਵਸ API ਬਾਰੇ ਹੋਰ ਜਾਣੋ [ਇਸਨੂੰ ਪੜ੍ਹ ਕੇ](https://developer.mozilla.org/docs/Web/API/Canvas_API)।  
+
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**  
+- [ ] ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਖੋਲ੍ਹੋ ਅਤੇ `document.createElement('canvas')` ਨਾਲ ਇੱਕ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਬਣਾਓ  
+- [ ] ਕੈਨਵਸ ਕੌਂਟੈਕਸਟ 'ਤੇ `fillRect()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਆਯਤ ਖਿੱਚਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ  
+- [ ] `fillStyle` ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੱਖ-ਵੱਖ ਰੰਗਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ  
+- [ ] `arc()` ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਧਾਰਨ ਗੋਲ ਖਿੱਚੋ  
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**  
+- [ ] ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਕੈਨਵਸ ਦੇ ਮੂਲ ਭਾਗਾਂ ਨੂੰ ਸਮਝੋ  
+- [ ] ਕਈ ਆਕਾਰ ਅਤੇ ਰੰਗਾਂ ਨਾਲ ਇੱਕ ਕੈਨਵਸ ਡ੍ਰਾਇੰਗ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ  
+- [ ] ਆਪਣੇ ਗੇਮ ਲਈ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਅਤੇ ਸਪ੍ਰਾਈਟ ਰੈਂਡਰਿੰਗ ਲਾਗੂ ਕਰੋ  
+- [ ] ਇੱਕ ਸਧਾਰਨ ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ ਜੋ ਕੈਨਵਸ 'ਤੇ ਵਸਤੂਆਂ ਨੂੰ ਹਿਲਾਉਂਦਾ ਹੈ  
+- [ ] ਕੈਨਵਸ ਰੂਪਾਂਤਰਨਾਂ ਜਿਵੇਂ ਕਿ ਸਕੇਲਿੰਗ, ਰੋਟੇਸ਼ਨ, ਅਤੇ ਟ੍ਰਾਂਸਲੇਸ਼ਨ ਦਾ ਅਭਿਆਸ ਕਰੋ  
+
+### 📅 **ਤੁਹਾਡਾ ਹਫਤਾਵਾਰ ਕੈਨਵਸ ਯਾਤਰਾ**  
+- [ ] ਪਾਲਿਸ਼ ਕੀਤੇ ਗ੍ਰਾਫਿਕਸ ਅਤੇ ਸਪ੍ਰਾਈਟ ਐਨੀਮੇਸ਼ਨ ਨਾਲ ਸਪੇਸ ਗੇਮ ਪੂਰਾ ਕਰੋ  
+- [ ] ਗ੍ਰੇਡੀਐਂਟ, ਪੈਟਰਨ, ਅਤੇ ਕੌਂਪੋਜ਼ਿਟਿੰਗ ਵਰਗੀਆਂ ਉੱਚ-ਸਤਹ ਕੈਨਵਸ ਤਕਨੀਕਾਂ ਵਿੱਚ ਮਾਹਰ ਬਣੋ  
+- [ ] ਕੈਨਵਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਡਾਟਾ ਪ੍ਰਤੀਨਿਧੀ ਲਈ ਇੰਟਰਐਕਟਿਵ ਵਿਜੁਅਲਾਈਜ਼ੇਸ਼ਨ ਬਣਾਓ  
+- [ ] ਸੁਚਾਰੂ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਕੈਨਵਸ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਤਕਨੀਕਾਂ ਸਿੱਖੋ  
+- [ ] ਵੱਖ-ਵੱਖ ਟੂਲਾਂ ਨਾਲ ਡ੍ਰਾਇੰਗ ਜਾਂ ਪੇਂਟਿੰਗ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ  
+- [ ] ਕੈਨਵਸ ਨਾਲ ਰਚਨਾਤਮਕ ਕੋਡਿੰਗ ਪੈਟਰਨ ਅਤੇ ਜਨਰੇਟਿਵ ਆਰਟ ਦੀ ਖੋਜ ਕਰੋ  
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨਾਵਾਰ ਗ੍ਰਾਫਿਕਸ ਮਾਹਰਤਾ**  
+- [ ] Canvas 2D ਅਤੇ WebGL ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਟਿਲ ਵਿਜੁਅਲ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ  
+- [ ] ਗ੍ਰਾਫਿਕਸ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸੰਕਲਪ ਅਤੇ ਸ਼ੇਡਰ ਬੇਸਿਕਸ ਸਿੱਖੋ  
+- [ ] ਖੁੱਲੇ ਸਰੋਤ ਗ੍ਰਾਫਿਕਸ ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਵਿਜੁਅਲਾਈਜ਼ੇਸ਼ਨ ਟੂਲਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ  
+- [ ] ਗ੍ਰਾਫਿਕਸ-ਗਹਿਰੇ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਪ੍ਰਦਰਸ਼ਨ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਵਿੱਚ ਮਾਹਰ ਬਣੋ  
+- [ ] ਕੈਨਵਸ ਪ੍ਰੋਗਰਾਮਿੰਗ ਅਤੇ ਕੰਪਿਊਟਰ ਗ੍ਰਾਫਿਕਸ ਬਾਰੇ ਸਿੱਖਣ ਲਈ ਸਿੱਖਿਆ ਸਮੱਗਰੀ ਬਣਾਓ  
+- [ ] ਗ੍ਰਾਫਿਕਸ ਪ੍ਰੋਗਰਾਮਿੰਗ ਮਾਹਰ ਬਣੋ ਜੋ ਹੋਰਾਂ ਨੂੰ ਵਿਜੁਅਲ ਅਨੁਭਵ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ  
+
+## 🎯 ਤੁਹਾਡਾ ਕੈਨਵਸ ਗ੍ਰਾਫਿਕਸ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ  
+
+```mermaid
+timeline
+    title Canvas API Learning Progression
+    
+    section Canvas Fundamentals (15 minutes)
+        Basic Operations: Element reference
+                        : 2D context access
+                        : Coordinate system
+                        : Simple shape drawing
+        
+    section Drawing Techniques (20 minutes)
+        Graphics Primitives: Rectangles and circles
+                           : Colors and styles
+                           : Text rendering
+                           : Path operations
+        
+    section Image Handling (25 minutes)
+        Asset Management: Image object creation
+                        : Async loading patterns
+                        : Error handling
+                        : Performance optimization
+        
+    section Game Graphics (30 minutes)
+        Sprite Rendering: Positioning algorithms
+                        : Formation calculations
+                        : Scene composition
+                        : Frame rendering
+        
+    section Advanced Techniques (40 minutes)
+        Visual Effects: Transformations
+                      : Animations
+                      : Layering
+                      : State management
+        
+    section Performance (35 minutes)
+        Optimization: Efficient drawing
+                    : Memory management
+                    : Frame rate control
+                    : Asset caching
+        
+    section Professional Skills (1 week)
+        Production Graphics: WebGL integration
+                           : Canvas libraries
+                           : Game engines
+                           : Cross-platform considerations
+        
+    section Advanced Graphics (1 month)
+        Specialized Applications: Data visualization
+                                : Interactive art
+                                : Real-time effects
+                                : 3D graphics
+```
+  
+### 🛠️ ਤੁਹਾਡਾ ਕੈਨਵਸ ਗ੍ਰਾਫਿਕਸ ਟੂਲਕਿਟ ਸਾਰ  
+
+ਇਸ ਪਾਠ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਹੈ:  
+- **ਕੈਨਵਸ API ਮਾਹਰਤਾ**: 2D ਗ੍ਰਾਫਿਕਸ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਪੂਰੀ ਸਮਝ  
+- **ਕੋਆਰਡੀਨੇਟ ਗਣਿਤ**: ਸਹੀ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਲੇਆਉਟ ਐਲਗੋਰਿਥਮ  
+- **ਐਸੈਟ ਪ੍ਰਬੰਧਨ**: ਪੇਸ਼ੇਵਰ ਚਿੱਤਰ ਲੋਡਿੰਗ ਅਤੇ ਗਲਤੀ ਸੰਭਾਲ  
+- **ਰੈਂਡਰਿੰਗ ਪਾਈਪਲਾਈਨ**: ਦ੍ਰਿਸ਼ ਰਚਨਾ ਲਈ ਸੰਰਚਿਤ ਦ੍ਰਿਸ਼ਟੀਕੋਣ  
+- **ਗੇਮ ਗ੍ਰਾਫਿਕਸ**: ਸਪ੍ਰਾਈਟ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਫਾਰਮੇਸ਼ਨ ਗਣਨਾ  
+- **ਐਸਿੰਕ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਸੁਚਾਰੂ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੈਟਰਨ  
+- **ਵਿਜੁਅਲ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਗਣਿਤਕ ਸੰਕਲਪਾਂ ਨੂੰ ਸਕ੍ਰੀਨ ਗ੍ਰਾਫਿਕਸ ਵਿੱਚ ਤਬਦੀਲ ਕਰਨਾ  
+
+**ਅਸਲ ਦੁਨੀਆ ਵਿੱਚ ਅਰਜ਼ੀ**: ਤੁਹਾਡੇ ਕੈਨਵਸ ਹੁਨਰ ਸਿੱਧੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ:  
+- **ਡਾਟਾ ਵਿਜੁਅਲਾਈਜ਼ੇਸ਼ਨ**: ਚਾਰਟ, ਗ੍ਰਾਫ, ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਡੈਸ਼ਬੋਰਡ  
+- **ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ**: 2D ਗੇਮ, ਸਿਮੂਲੇਸ਼ਨ, ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਅਨੁਭਵ  
+- **ਡਿਜੀਟਲ ਆਰਟ**: ਰਚਨਾਤਮਕ ਕੋਡਿੰਗ ਅਤੇ ਜਨਰੇਟਿਵ ਆਰਟ ਪ੍ਰੋਜੈਕਟ  
+- **UI/UX ਡਿਜ਼ਾਈਨ**: ਕਸਟਮ ਗ੍ਰਾਫਿਕਸ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਤੱਤ  
+- **ਸਿੱਖਿਆ ਸਾਫਟਵੇਅਰ**: ਵਿਜੁਅਲ ਸਿੱਖਣ ਦੇ ਟੂਲ ਅਤੇ ਸਿਮੂਲੇਸ਼ਨ  
+- **ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ**: ਗਤੀਸ਼ੀਲ ਗ੍ਰਾਫਿਕਸ ਅਤੇ ਰੀਅਲ-ਟਾਈਮ ਵਿਜੁਅਲਾਈਜ਼ੇਸ਼ਨ  
+
+**ਪੇਸ਼ੇਵਰ ਹੁਨਰ ਪ੍ਰਾਪਤ ਕੀਤੇ**: ਹੁਣ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:  
+- **ਬਣਾਓ** ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਤੋਂ ਬਿਨਾਂ ਕਸਟਮ ਗ੍ਰਾਫਿਕਸ ਹੱਲ  
+- **ਅਪਟਿਮਾਈਜ਼** ਰੈਂਡਰਿੰਗ ਪ੍ਰਦਰਸ਼ਨ ਸੁਚਾਰੂ ਯੂਜ਼ਰ ਅਨੁਭਵ ਲਈ  
+- **ਡਿਬੱਗ** ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਟਿਲ ਵਿਜੁਅਲ ਸਮੱਸਿਆਵਾਂ  
+- **ਡਿਜ਼ਾਈਨ** ਗਣਿਤਕ ਸਿਧਾਂਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਕੇਲਬਲ ਗ੍ਰਾਫਿਕਸ ਸਿਸਟਮ  
+- **ਇੰਟੀਗ੍ਰੇਟ** ਕੈਨਵਸ ਗ੍ਰਾਫਿਕਸ ਨੂੰ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਫਰੇਮਵਰਕਸ ਨਾਲ  
+
+**ਕੈਨਵਸ API ਵਿਧੀਆਂ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਤੁਸੀਂ ਮਾਹਰ ਹੋ**:  
+- **ਐਲੀਮੈਂਟ ਪ੍ਰਬੰਧਨ**: getElementById, getContext  
+- **ਡ੍ਰਾਇੰਗ ਓਪਰੇਸ਼ਨ**: fillRect, drawImage, fillStyle  
+- **ਐਸੈਟ ਲੋਡਿੰਗ**: ਚਿੱਤਰ ਵਸਤੂਆਂ, Promise ਪੈਟਰਨ  
+- **ਗਣਿਤਕ ਪੋਜ਼ੀਸ਼ਨਿੰਗ**: ਕੋਆਰਡੀਨੇਟ ਗਣਨਾ, ਫਾਰਮੇਸ਼ਨ ਐਲਗੋਰਿਥਮ  
+
+**ਅਗਲਾ ਪੱਧਰ**: ਤੁਸੀਂ ਐਨੀਮੇਸ਼ਨ, ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ, ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ, ਜਾਂ 3D ਗ੍ਰਾਫਿਕਸ ਲਈ WebGL ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ!  
+
+🌟 **ਅਚੀਵਮੈਂਟ ਅਨਲੌਕ ਕੀਤੀ**: ਤੁਸੀਂ ਮੂਲ ਕੈਨਵਸ API ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਪੂਰੀ ਗੇਮ ਰੈਂਡਰਿੰਗ ਸਿਸਟਮ ਬਣਾਇਆ ਹੈ!  
+
+## ਅਸਾਈਨਮੈਂਟ  
+
+[ਕੈਨਵਸ API ਨਾਲ ਖੇਡੋ](assignment.md)  
 
 ---
 
-**ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤੀ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/6-space-game/3-moving-elements-around/README.md b/translations/pa/6-space-game/3-moving-elements-around/README.md
index da197beddd..fc6a4df19f 100644
--- a/translations/pa/6-space-game/3-moving-elements-around/README.md
+++ b/translations/pa/6-space-game/3-moving-elements-around/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "022bbb5c869091b98f19e408e0c51d5d",
-  "translation_date": "2025-10-22T18:05:52+00:00",
+  "original_hash": "8c55a2bd4bc0ebe4c88198fd563a9e09",
+  "translation_date": "2025-11-03T16:49:19+00:00",
   "source_file": "6-space-game/3-moving-elements-around/README.md",
   "language_code": "pa"
 }
 -->
 # ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 3: ਮੋਸ਼ਨ ਸ਼ਾਮਲ ਕਰਨਾ
 
-ਆਪਣੇ ਮਨਪਸੰਦ ਗੇਮਾਂ ਬਾਰੇ ਸੋਚੋ - ਜੋ ਉਨ੍ਹਾਂ ਨੂੰ ਦਿਲਚਸਪ ਬਣਾਉਂਦਾ ਹੈ, ਉਹ ਸਿਰਫ਼ ਸੁੰਦਰ ਗ੍ਰਾਫਿਕਸ ਨਹੀਂ ਹੁੰਦੇ, ਬਲਕਿ ਇਹ ਹੈ ਕਿ ਸਭ ਕੁਝ ਕਿਵੇਂ ਹਿਲਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਕਾਰਵਾਈਆਂ ਦਾ ਜਵਾਬ ਦਿੰਦਾ ਹੈ। ਇਸ ਸਮੇਂ, ਤੁਹਾਡਾ ਸਪੇਸ ਗੇਮ ਇੱਕ ਸੁੰਦਰ ਪੇਂਟਿੰਗ ਵਾਂਗ ਹੈ, ਪਰ ਅਸੀਂ ਇਸ ਵਿੱਚ ਹਿਲਚਲ ਜੋੜਨ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਇਸ ਨੂੰ ਜਿੰਦਗੀ ਦੇਵੇਗਾ।
-
-ਜਦੋਂ ਨਾਸਾ ਦੇ ਇੰਜੀਨੀਅਰਾਂ ਨੇ ਅਪੋਲੋ ਮਿਸ਼ਨ ਲਈ ਗਾਈਡੈਂਸ ਕੰਪਿਊਟਰ ਪ੍ਰੋਗਰਾਮ ਕੀਤਾ, ਤਾਂ ਉਨ੍ਹਾਂ ਨੇ ਇੱਕੋ ਜਿਹੇ ਚੁਣੌਤੀ ਦਾ ਸਾਹਮਣਾ ਕੀਤਾ: ਜਹਾਜ਼ ਨੂੰ ਪਾਇਲਟ ਇਨਪੁਟ ਦਾ ਜਵਾਬ ਦੇਣ ਲਈ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ ਜਦੋਂ ਕਿ ਆਪਣੇ ਆਪ ਕੋਰਸ ਸਹੀ ਕਰਨ ਦੀ ਯੋਜਨਾ ਬਣਾਈ ਜਾਵੇ? ਅੱਜ ਅਸੀਂ ਜੋ ਸਿਧਾਂਤ ਸਿੱਖਾਂਗੇ ਉਹਨਾਂ ਹੀ ਸੰਕਲਪਾਂ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ - ਖਿਡਾਰੀ-ਨਿਯੰਤਰਿਤ ਮੋਸ਼ਨ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਅਤੇ ਸਵੈ-ਚਾਲਤ ਸਿਸਟਮ ਵਿਹਾਰਾਂ ਦੇ ਨਾਲ।
-
-ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਸਪੇਸਸ਼ਿਪ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿਵੇਂ ਗਲਾਈਡ ਕਰਨਾ ਹੈ, ਖਿਡਾਰੀ ਦੇ ਹੁਕਮਾਂ ਦਾ ਜਵਾਬ ਦੇਣਾ ਹੈ, ਅਤੇ ਹੌਲੀ ਹੌਲੀ ਮੋਸ਼ਨ ਪੈਟਰਨ ਬਣਾਉਣੇ ਹਨ। ਅਸੀਂ ਹਰ ਚੀਜ਼ ਨੂੰ ਪ੍ਰਬੰਧਨਯੋਗ ਸੰਕਲਪਾਂ ਵਿੱਚ ਵੰਡਾਂਗੇ ਜੋ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਇੱਕ ਦੂਜੇ 'ਤੇ ਬਣਦੇ ਹਨ।
+```mermaid
+journey
+    title Your Game Animation Journey
+    section Movement Basics
+      Understand motion principles: 3: Student
+      Learn coordinate updates: 4: Student
+      Implement basic movement: 4: Student
+    section Player Controls
+      Handle keyboard events: 4: Student
+      Prevent default behaviors: 5: Student
+      Create responsive controls: 5: Student
+    section Game Systems
+      Build game loop: 5: Student
+      Manage object lifecycle: 5: Student
+      Implement pub/sub pattern: 5: Student
+```
 
-ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਖਿਡਾਰੀ ਹੋਣਗੇ ਜੋ ਆਪਣੇ ਹੀਰੋ ਜਹਾਜ਼ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਉਡਾ ਰਹੇ ਹੋਣਗੇ ਜਦੋਂ ਕਿ ਦੁਸ਼ਮਣ ਜਹਾਜ਼ ਉੱਪਰ ਗਸ਼ਤ ਕਰ ਰਹੇ ਹੋਣਗੇ। ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਉਹ ਮੁੱਖ ਸਿਧਾਂਤ ਸਮਝ ਲਵੋਗੇ ਜੋ ਗੇਮ ਮੋਸ਼ਨ ਸਿਸਟਮ ਨੂੰ ਤਾਕਤਵਾਨ ਬਣਾਉਂਦੇ ਹਨ।
+ਆਪਣੇ ਮਨਪਸੰਦ ਗੇਮਾਂ ਬਾਰੇ ਸੋਚੋ - ਜੋ ਉਨ੍ਹਾਂ ਨੂੰ ਦਿਲਚਸਪ ਬਣਾਉਂਦਾ ਹੈ, ਉਹ ਸਿਰਫ਼ ਸੁੰਦਰ ਗ੍ਰਾਫਿਕਸ ਨਹੀਂ ਹੁੰਦੇ, ਬਲਕਿ ਇਹ ਹੁੰਦਾ ਹੈ ਕਿ ਸਭ ਕੁਝ ਕਿਵੇਂ ਹਿਲਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਕਮਾਂਡਾਂ ਦਾ ਜਵਾਬ ਦਿੰਦਾ ਹੈ। ਇਸ ਸਮੇਂ, ਤੁਹਾਡਾ ਸਪੇਸ ਗੇਮ ਇੱਕ ਸੁੰਦਰ ਪੇਂਟਿੰਗ ਵਾਂਗ ਹੈ, ਪਰ ਅਸੀਂ ਇਸ ਵਿੱਚ ਹਿਲਚਲ ਜੋੜਨ ਵਾਲੇ ਹਾਂ ਜੋ ਇਸ ਨੂੰ ਜ਼ਿੰਦਾ ਕਰ ਦੇਵੇਗਾ।
+
+ਜਦੋਂ NASA ਦੇ ਇੰਜੀਨੀਅਰਾਂ ਨੇ Apollo ਮਿਸ਼ਨ ਲਈ ਗਾਈਡੈਂਸ ਕੰਪਿਊਟਰ ਪ੍ਰੋਗਰਾਮ ਕੀਤਾ, ਤਾਂ ਉਨ੍ਹਾਂ ਨੇ ਇੱਕੋ ਜਿਹੀ ਚੁਣੌਤੀ ਦਾ ਸਾਹਮਣਾ ਕੀਤਾ: ਜਹਾਜ਼ ਨੂੰ ਪਾਇਲਟ ਦੇ ਇਸ਼ਾਰਿਆਂ ਦਾ ਜਵਾਬ ਕਿਵੇਂ ਦਿਵਾਇਆ ਜਾਵੇ ਜਦੋਂ ਕਿ ਕੋਰਸ ਸਹੀ ਕਰਨ ਲਈ ਸਵੈ-ਚਾਲਤ ਸਿਸਟਮ ਵੀ ਚੱਲ ਰਿਹਾ ਹੋਵੇ। ਅੱਜ ਅਸੀਂ ਜੋ ਸਿਧਾਂਤ ਸਿੱਖਾਂਗੇ ਉਹਨਾਂ ਹੀ ਸੰਕਲਪਾਂ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ - ਖਿਡਾਰੀ-ਨਿਯੰਤਰਿਤ ਮੋਸ਼ਨ ਦਾ ਪ੍ਰਬੰਧਨ ਅਤੇ ਸਵੈ-ਚਾਲਤ ਸਿਸਟਮ ਦੇ ਵਿਹਾਰ।
+
+ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਸਪੇਸਸ਼ਿਪ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿਵੇਂ ਹਿਲਾਇਆ ਜਾਵੇ, ਖਿਡਾਰੀ ਦੇ ਹੁਕਮਾਂ ਦਾ ਜਵਾਬ ਕਿਵੇਂ ਦਿੱਤਾ ਜਾਵੇ, ਅਤੇ ਹਿਲਚਲ ਦੇ ਸਮਰੂਪ ਪੈਟਰਨ ਕਿਵੇਂ ਬਣਾਏ ਜਾਵਨ। ਅਸੀਂ ਹਰ ਚੀਜ਼ ਨੂੰ ਆਸਾਨ ਸੰਕਲਪਾਂ ਵਿੱਚ ਵੰਡਾਂਗੇ ਜੋ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਇੱਕ ਦੂਜੇ 'ਤੇ ਅਧਾਰਿਤ ਹਨ।
+
+ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਖਿਡਾਰੀ ਆਪਣੇ ਹੀਰੋ ਸ਼ਿਪ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਉਡਾ ਰਹੇ ਹੋਣਗੇ ਜਦੋਂ ਕਿ ਦੁਸ਼ਮਣ ਜਹਾਜ਼ ਉੱਪਰ ਗਸ਼ਤ ਕਰ ਰਹੇ ਹੋਣਗੇ। ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਉਹ ਮੁੱਖ ਸਿਧਾਂਤ ਸਮਝ ਲਵੋਗੇ ਜੋ ਗੇਮ ਮੋਸ਼ਨ ਸਿਸਟਮ ਨੂੰ ਚਲਾਉਂਦੇ ਹਨ।
+
+```mermaid
+mindmap
+  root((Game Animation))
+    Movement Types
+      Player Controlled
+      Automatic Motion
+      Physics Based
+      Scripted Paths
+    Event Handling
+      Keyboard Input
+      Mouse Events
+      Touch Controls
+      Default Prevention
+    Game Loop
+      Update Logic
+      Render Frame
+      Clear Canvas
+      Frame Rate Control
+    Object Management
+      Position Updates
+      Collision Detection
+      Lifecycle Management
+      State Tracking
+    Communication
+      Pub/Sub Pattern
+      Event Emitters
+      Message Passing
+      Loose Coupling
+```
 
 ## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 
@@ -23,20 +70,41 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## ਗੇਮ ਮੋਸ਼ਨ ਨੂੰ ਸਮਝਣਾ
 
-ਗੇਮਾਂ ਜੀਵੰਤ ਹੁੰਦੀਆਂ ਹਨ ਜਦੋਂ ਚੀਜ਼ਾਂ ਹਿਲਣ ਲੱਗਦੀਆਂ ਹਨ, ਅਤੇ ਮੁਢਲੀ ਤੌਰ 'ਤੇ ਇਹ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਹੁੰਦਾ ਹੈ:
+ਗੇਮਾਂ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਆਉਂਦੀ ਹੈ ਜਦੋਂ ਚੀਜ਼ਾਂ ਹਿਲਣ ਲੱਗਦੀਆਂ ਹਨ, ਅਤੇ ਇਹ ਮੁੱਖ ਤੌਰ 'ਤੇ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਹੁੰਦਾ ਹੈ:
 
-- **ਖਿਡਾਰੀ-ਨਿਯੰਤਰਿਤ ਮੋਸ਼ਨ**: ਜਦੋਂ ਤੁਸੀਂ ਕੋਈ ਕੁੰਜੀ ਦਬਾਉਂਦੇ ਹੋ ਜਾਂ ਆਪਣੀ ਮਾਊਸ 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹੋ, ਕੁਝ ਹਿਲਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਅਤੇ ਤੁਹਾਡੇ ਗੇਮ ਦੁਨੀਆ ਦੇ ਵਿਚਕਾਰ ਸਿੱਧਾ ਸੰਪਰਕ ਹੈ।
-- **ਸਵੈ-ਚਾਲਤ ਮੋਸ਼ਨ**: ਜਦੋਂ ਗੇਮ ਖੁਦ ਚੀਜ਼ਾਂ ਨੂੰ ਹਿਲਾਉਣ ਦਾ ਫੈਸਲਾ ਕਰਦੀ ਹੈ - ਜਿਵੇਂ ਉਹ ਦੁਸ਼ਮਣ ਜਹਾਜ਼ ਜੋ ਸਕ੍ਰੀਨ 'ਤੇ ਗਸ਼ਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਚਾਹੇ ਤੁਸੀਂ ਕੁਝ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਨਹੀਂ।
+- **ਖਿਡਾਰੀ-ਨਿਯੰਤਰਿਤ ਮੋਸ਼ਨ**: ਜਦੋਂ ਤੁਸੀਂ ਕੋਈ ਕੁੰਜੀ ਦਬਾਉਂਦੇ ਹੋ ਜਾਂ ਆਪਣੀ ਮਾਊਸ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਤਾਂ ਕੁਝ ਹਿਲਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਅਤੇ ਤੁਹਾਡੇ ਗੇਮ ਜਗਤ ਦੇ ਵਿਚਕਾਰ ਸਿੱਧਾ ਸੰਪਰਕ ਹੈ।
+- **ਸਵੈ-ਚਾਲਤ ਮੋਸ਼ਨ**: ਜਦੋਂ ਗੇਮ ਖੁਦ ਚੀਜ਼ਾਂ ਨੂੰ ਹਿਲਾਉਣ ਦਾ ਫੈਸਲਾ ਕਰਦੀ ਹੈ - ਜਿਵੇਂ ਕਿ ਉਹ ਦੁਸ਼ਮਣ ਜਹਾਜ਼ ਜੋ ਸਕ੍ਰੀਨ 'ਤੇ ਗਸ਼ਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਭਾਵੇਂ ਤੁਸੀਂ ਕੁਝ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਨਹੀਂ।
 
-ਕੰਪਿਊਟਰ ਸਕ੍ਰੀਨ 'ਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਹਿਲਾਉਣਾ ਤੁਹਾਡੇ ਸੋਚਣ ਤੋਂ ਸੌਖਾ ਹੈ। ਮੈਥ ਕਲਾਸ ਤੋਂ ਉਹ x ਅਤੇ y ਕੋਆਰਡੀਨੇਟ ਯਾਦ ਹਨ? ਇਹੀ ਹੈ ਜੋ ਅਸੀਂ ਇੱਥੇ ਕਰ ਰਹੇ ਹਾਂ। ਜਦੋਂ ਗੈਲੀਲੀਓ ਨੇ 1610 ਵਿੱਚ ਜੂਪੀਟਰ ਦੇ ਚੰਦਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕੀਤਾ, ਉਹ ਅਸਲ ਵਿੱਚ ਇਹੀ ਕਰ ਰਿਹਾ ਸੀ - ਮੋਸ਼ਨ ਪੈਟਰਨ ਨੂੰ ਸਮਝਣ ਲਈ ਸਮੇਂ ਦੇ ਨਾਲ ਸਥਿਤੀਆਂ ਨੂੰ ਪਲਾਟ ਕਰਨਾ।
+ਕੰਪਿਊਟਰ ਸਕ੍ਰੀਨ 'ਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਹਿਲਾਉਣਾ ਤੁਹਾਡੇ ਸੋਚਣ ਤੋਂ ਵੀ ਆਸਾਨ ਹੈ। ਮੈਥ ਕਲਾਸ ਵਿੱਚ ਉਹ x ਅਤੇ y ਕੋਆਰਡੀਨੇਟਸ ਯਾਦ ਹਨ? ਇਹੀ ਹੈ ਜਿਸ ਨਾਲ ਅਸੀਂ ਇੱਥੇ ਕੰਮ ਕਰ ਰਹੇ ਹਾਂ। ਜਦੋਂ ਗੈਲੀਲਿਓ ਨੇ 1610 ਵਿੱਚ ਜੂਪੀਟਰ ਦੇ ਚੰਦਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕੀਤਾ, ਉਹ ਅਸਲ ਵਿੱਚ ਇਹੀ ਕਰ ਰਿਹਾ ਸੀ - ਮੋਸ਼ਨ ਪੈਟਰਨ ਨੂੰ ਸਮਝਣ ਲਈ ਸਮੇਂ ਦੇ ਨਾਲ ਸਥਿਤੀਆਂ ਨੂੰ ਪਲਾਟ ਕਰਨਾ।
 
-ਸਕ੍ਰੀਨ 'ਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਹਿਲਾਉਣਾ ਫਲਿੱਪਬੁੱਕ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਵਾਂਗ ਹੈ - ਤੁਹਾਨੂੰ ਇਹ ਤਿੰਨ ਸੌਖੇ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:
+ਸਕ੍ਰੀਨ 'ਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਹਿਲਾਉਣਾ ਇੱਕ ਫਲਿੱਪਬੁੱਕ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਵਾਂਗ ਹੈ - ਤੁਹਾਨੂੰ ਇਹ ਤਿੰਨ ਆਸਾਨ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:
 
-1. **ਸਥਿਤੀ ਨੂੰ ਅਪਡੇਟ ਕਰੋ** - ਇਹ ਬਦਲੋ ਕਿ ਤੁਹਾਡੀ ਚੀਜ਼ ਕਿੱਥੇ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ (ਸ਼ਾਇਦ ਇਸ ਨੂੰ 5 ਪਿਕਸਲ ਸੱਜੇ ਵੱਲ ਹਿਲਾਓ)
-2. **ਪੁਰਾਣਾ ਫਰੇਮ ਮਿਟਾਓ** - ਸਕ੍ਰੀਨ ਨੂੰ ਸਾਫ਼ ਕਰੋ ਤਾਂ ਕਿ ਤੁਹਾਨੂੰ ਹਰ ਜਗ੍ਹਾ ਭੂਤੀਆ ਨਿਸ਼ਾਨ ਨਾ ਦਿਖਾਈ ਦੇਣ
-3. **ਨਵਾਂ ਫਰੇਮ ਖਿੱਚੋ** - ਆਪਣੀ ਚੀਜ਼ ਨੂੰ ਇਸ ਦੀ ਨਵੀਂ ਸਥਿਤੀ 'ਤੇ ਰੱਖੋ
+```mermaid
+flowchart LR
+    A["Frame N"] --> B["Update Positions"]
+    B --> C["Clear Canvas"]
+    C --> D["Draw Objects"]
+    D --> E["Frame N+1"]
+    E --> F{Continue?}
+    F -->|Yes| B
+    F -->|No| G["Game Over"]
+    
+    subgraph "Animation Cycle"
+        H["1. Calculate new positions"]
+        I["2. Erase previous frame"]
+        J["3. Render new frame"]
+    end
+    
+    style B fill:#e1f5fe
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+```
+
+1. **ਸਥਿਤੀ ਨੂੰ ਅਪਡੇਟ ਕਰੋ** - ਇਹ ਬਦਲੋ ਕਿ ਤੁਹਾਡੀ ਚੀਜ਼ ਕਿੱਥੇ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ (ਸ਼ਾਇਦ ਇਸਨੂੰ ਸੱਜੇ ਵੱਲ 5 ਪਿਕਸਲ ਹਿਲਾਓ)
+2. **ਪੁਰਾਣਾ ਫਰੇਮ ਮਿਟਾਓ** - ਸਕ੍ਰੀਨ ਨੂੰ ਸਾਫ਼ ਕਰੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਹਰ ਜਗ੍ਹਾ ਭੂਤੀਆ ਨਿਸ਼ਾਨ ਨਾ ਦਿਖਾਈ ਦੇਣ
+3. **ਨਵਾਂ ਫਰੇਮ ਬਣਾਓ** - ਆਪਣੀ ਚੀਜ਼ ਨੂੰ ਇਸਦੀ ਨਵੀਂ ਸਥਿਤੀ 'ਤੇ ਰੱਖੋ
 
-ਇਹ ਕਾਫ਼ੀ ਤੇਜ਼ੀ ਨਾਲ ਕਰੋ, ਅਤੇ ਬਸ! ਤੁਹਾਡੇ ਕੋਲ ਹੌਲੀ ਹੌਲੀ ਮੋਸ਼ਨ ਹੈ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਕੁਦਰਤੀ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।
+ਇਹ ਕਾਫ਼ੀ ਤੇਜ਼ੀ ਨਾਲ ਕਰੋ, ਅਤੇ ਬੂਮ! ਤੁਹਾਡੇ ਕੋਲ ਹੌਲੀ ਹੌਲੀ ਹਿਲਣ ਵਾਲੀ ਚੀਜ਼ ਹੈ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਕੁਦਰਤੀ ਮਹਿਸੂਸ ਹੁੰਦੀ ਹੈ।
 
 ਇਹ ਕੋਡ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇ ਸਕਦਾ ਹੈ:
 
@@ -52,24 +120,24 @@ ctx.drawImage(heroImg, hero.x, hero.y);
 ```
 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਅਪਡੇਟ ਕਰਦਾ ਹੈ** ਹੀਰੋ ਦੇ x-ਕੋਆਰਡੀਨੇਟ ਨੂੰ 5 ਪਿਕਸਲਾਂ ਨਾਲ ਇਸਨੂੰ ਆੜ੍ਹੇ ਤੌਰ 'ਤੇ ਹਿਲਾਉਣ ਲਈ
-- **ਸਾਰੇ ਕੈਨਵਸ ਖੇਤਰ ਨੂੰ ਸਾਫ਼ ਕਰਦਾ ਹੈ** ਪਿਛਲੇ ਫਰੇਮ ਨੂੰ ਹਟਾਉਣ ਲਈ
+- **ਹੀਰੋ ਦੇ x-ਕੋਆਰਡੀਨੇਟ ਨੂੰ 5 ਪਿਕਸਲ ਨਾਲ ਅਪਡੇਟ ਕਰਦਾ ਹੈ** ਤਾਂ ਜੋ ਇਸਨੂੰ ਆੜ੍ਹੇ ਤੌਰ 'ਤੇ ਹਿਲਾਇਆ ਜਾ ਸਕੇ
+- **ਪੂਰੇ ਕੈਨਵਸ ਖੇਤਰ ਨੂੰ ਸਾਫ਼ ਕਰਦਾ ਹੈ** ਤਾਂ ਜੋ ਪਿਛਲੇ ਫਰੇਮ ਨੂੰ ਹਟਾਇਆ ਜਾ ਸਕੇ
 - **ਕੈਨਵਸ ਨੂੰ ਕਾਲੇ ਬੈਕਗਰਾਊਂਡ ਰੰਗ ਨਾਲ ਭਰਦਾ ਹੈ**
-- **ਹੀਰੋ ਦੀ ਚਿੱਤਰਕਲਾ ਨੂੰ ਇਸ ਦੀ ਨਵੀਂ ਸਥਿਤੀ 'ਤੇ ਦੁਬਾਰਾ ਖਿੱਚਦਾ ਹੈ**
+- **ਹੀਰੋ ਦੀ ਚਿੱਤਰਕਲਾ ਨੂੰ ਇਸਦੀ ਨਵੀਂ ਸਥਿਤੀ 'ਤੇ ਦੁਬਾਰਾ ਖਿੱਚਦਾ ਹੈ**
 
-✅ ਕੀ ਤੁਸੀਂ ਕੋਈ ਕਾਰਨ ਸੋਚ ਸਕਦੇ ਹੋ ਕਿ ਕਿਉਂ ਤੁਹਾਡੇ ਹੀਰੋ ਨੂੰ ਕਈ ਫਰੇਮ ਪ੍ਰਤੀ ਸਕਿੰਟ ਦੁਬਾਰਾ ਖਿੱਚਣ ਨਾਲ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਲਾਗਤ ਹੋ ਸਕਦੀ ਹੈ? [ਇਸ ਪੈਟਰਨ ਦੇ ਵਿਕਲਪਾਂ ਬਾਰੇ ਪੜ੍ਹੋ](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)।
+✅ ਕੀ ਤੁਸੀਂ ਸੋਚ ਸਕਦੇ ਹੋ ਕਿ ਕਿਉਂ ਤੁਹਾਡੇ ਹੀਰੋ ਨੂੰ ਹਰ ਸੈਕਿੰਡ ਵਿੱਚ ਕਈ ਫਰੇਮਾਂ ਦੁਬਾਰਾ ਖਿੱਚਣ ਨਾਲ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਲਾਗਤ ਹੋ ਸਕਦੀ ਹੈ? [ਇਸ ਪੈਟਰਨ ਦੇ ਵਿਕਲਪਾਂ](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) ਬਾਰੇ ਪੜ੍ਹੋ।
 
 ## ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਨੂੰ ਸੰਭਾਲਣਾ
 
-ਇਹ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਖਿਡਾਰੀ ਦੇ ਇਨਪੁਟ ਨੂੰ ਗੇਮ ਦੀ ਕਾਰਵਾਈ ਨਾਲ ਜੋੜਦੇ ਹਾਂ। ਜਦੋਂ ਕੋਈ ਲੇਜ਼ਰ ਫਾਇਰ ਕਰਨ ਲਈ ਸਪੇਸਬਾਰ ਦਬਾਉਂਦਾ ਹੈ ਜਾਂ ਐਸਟਰੋਇਡ ਤੋਂ ਬਚਣ ਲਈ ਐਰੋ ਕੀ ਦਬਾਉਂਦਾ ਹੈ, ਤੁਹਾਡੀ ਗੇਮ ਨੂੰ ਉਹ ਇਨਪੁਟ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਅਤੇ ਉਸਦਾ ਜਵਾਬ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ।
+ਇਹ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਖਿਡਾਰੀ ਦੇ ਇਨਪੁਟ ਨੂੰ ਗੇਮ ਦੀ ਕਾਰਵਾਈ ਨਾਲ ਜੋੜਦੇ ਹਾਂ। ਜਦੋਂ ਕੋਈ ਲੇਜ਼ਰ ਫਾਇਰ ਕਰਨ ਲਈ ਸਪੇਸਬਾਰ ਦਬਾਉਂਦਾ ਹੈ ਜਾਂ ਐਸਟਰੋਇਡ ਤੋਂ ਬਚਣ ਲਈ ਐਰੋ ਕੀ ਦਬਾਉਂਦਾ ਹੈ, ਤੁਹਾਡੀ ਗੇਮ ਨੂੰ ਉਸ ਇਨਪੁਟ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਅਤੇ ਉਸਦਾ ਜਵਾਬ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ।
 
-ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਵਿੰਡੋ ਪੱਧਰ 'ਤੇ ਹੁੰਦੇ ਹਨ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡਾ ਸਾਰਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਉਹਨਾਂ ਕੁੰਜੀਆਂ ਦੇ ਦਬਾਅ ਨੂੰ ਸੁਣ ਰਿਹਾ ਹੈ। ਦੂਜੇ ਪਾਸੇ, ਮਾਊਸ ਕਲਿਕਸ ਨੂੰ ਖਾਸ ਤੌਰ 'ਤੇ ਤੱਤਾਂ ਨਾਲ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਨਾ)। ਸਾਡੇ ਸਪੇਸ ਗੇਮ ਲਈ, ਅਸੀਂ ਕੀਬੋਰਡ ਕੰਟਰੋਲ 'ਤੇ ਧਿਆਨ ਦੇਵਾਂਗੇ ਕਿਉਂਕਿ ਇਹ ਖਿਡਾਰੀਆਂ ਨੂੰ ਉਹ ਕਲਾਸਿਕ ਆਰਕੇਡ ਮਹਿਸੂਸ ਦਿੰਦਾ ਹੈ।
+ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਵਿੰਡੋ ਪੱਧਰ 'ਤੇ ਹੁੰਦੇ ਹਨ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡਾ ਪੂਰਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਉਹਨਾਂ ਕੁੰਜੀਆਂ ਦੇ ਦਬਾਅ ਨੂੰ ਸੁਣ ਰਿਹਾ ਹੈ। ਦੂਜੇ ਪਾਸੇ, ਮਾਊਸ ਕਲਿੱਕ ਨੂੰ ਖਾਸ ਤੌਰ 'ਤੇ ਤੱਤਾਂ ਨਾਲ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਨਾ)। ਸਾਡੇ ਸਪੇਸ ਗੇਮ ਲਈ, ਅਸੀਂ ਕੀਬੋਰਡ ਕੰਟਰੋਲ 'ਤੇ ਧਿਆਨ ਦੇਵਾਂਗੇ ਕਿਉਂਕਿ ਇਹ ਖਿਡਾਰੀਆਂ ਨੂੰ ਉਹ ਕਲਾਸਿਕ ਆਰਕੇਡ ਮਹਿਸੂਸ ਦਿੰਦਾ ਹੈ।
 
-ਇਹ ਮੈਨੂੰ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ 1800 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਟੈਲੀਗ੍ਰਾਫ ਓਪਰੇਟਰਾਂ ਨੂੰ ਮੋਰਸ ਕੋਡ ਇਨਪੁਟ ਨੂੰ ਅਰਥਪੂਰਨ ਸੁਨੇਹਿਆਂ ਵਿੱਚ ਤਬਦੀਲ ਕਰਨਾ ਪੈਂਦਾ ਸੀ - ਅਸੀਂ ਕੁਝ ਇਸੇ ਤਰ੍ਹਾਂ ਕਰ ਰਹੇ ਹਾਂ, ਕੁੰਜੀ ਦਬਾਅ ਨੂੰ ਗੇਮ ਹੁਕਮਾਂ ਵਿੱਚ ਤਬਦੀਲ ਕਰ ਰਹੇ ਹਾਂ।
+ਇਹ ਮੈਨੂੰ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ 1800 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਟੈਲੀਗ੍ਰਾਫ ਓਪਰੇਟਰਾਂ ਨੂੰ ਮੋਰਸ ਕੋਡ ਇਨਪੁਟ ਨੂੰ ਅਰਥਪੂਰਨ ਸੁਨੇਹਿਆਂ ਵਿੱਚ ਤਬਦੀਲ ਕਰਨਾ ਪੈਂਦਾ ਸੀ - ਅਸੀਂ ਕੁਝ ਇਸੇ ਤਰ੍ਹਾਂ ਕਰ ਰਹੇ ਹਾਂ, ਕੁੰਜੀ ਦਬਾਅ ਨੂੰ ਗੇਮ ਕਮਾਂਡਾਂ ਵਿੱਚ ਤਬਦੀਲ ਕਰ ਰਹੇ ਹਾਂ।
 
-ਇੱਕ ਇਵੈਂਟ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਤੁਹਾਨੂੰ ਵਿੰਡੋ ਦੇ `addEventListener()` ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਦੋ ਇਨਪੁਟ ਪੈਰਾਮੀਟਰ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਪਹਿਲਾ ਪੈਰਾਮੀਟਰ ਇਵੈਂਟ ਦਾ ਨਾਮ ਹੈ, ਉਦਾਹਰਣ ਲਈ `keyup`। ਦੂਜਾ ਪੈਰਾਮੀਟਰ ਉਹ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਇਵੈਂਟ ਹੋਣ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਚਲਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
+ਇੱਕ ਇਵੈਂਟ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਤੁਹਾਨੂੰ ਵਿੰਡੋ ਦੇ `addEventListener()` ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪੈਂਦੀ ਹੈ ਅਤੇ ਇਸਨੂੰ ਦੋ ਇਨਪੁਟ ਪੈਰਾਮੀਟਰ ਦੇਣੇ ਪੈਂਦੇ ਹਨ। ਪਹਿਲਾ ਪੈਰਾਮੀਟਰ ਇਵੈਂਟ ਦਾ ਨਾਮ ਹੈ, ਉਦਾਹਰਨ ਲਈ `keyup`। ਦੂਜਾ ਪੈਰਾਮੀਟਰ ਉਹ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਇਵੈਂਟ ਹੋਣ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਚਲਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
 
-ਇਹ ਇੱਕ ਉਦਾਹਰਣ ਹੈ:
+ਇਹ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
 
 ```javascript
 window.addEventListener('keyup', (evt) => {
@@ -80,24 +148,43 @@ window.addEventListener('keyup', (evt) => {
 });
 ```
 
-**ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ ਇਸਨੂੰ ਵੰਡ ਕੇ ਸਮਝਦੇ ਹਾਂ:**
+**ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
 - **ਕੀਬੋਰਡ ਇਵੈਂਟਸ** ਨੂੰ ਪੂਰੀ ਵਿੰਡੋ 'ਤੇ ਸੁਣਦਾ ਹੈ
-- **ਇਵੈਂਟ ਆਬਜੈਕਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ** ਜੋ ਦੱਸਦਾ ਹੈ ਕਿ ਕਿਹੜੀ ਕੁੰਜੀ ਦਬਾਈ ਗਈ ਸੀ
-- **ਜਾਂਚਦਾ ਹੈ** ਕਿ ਦਬਾਈ ਗਈ ਕੁੰਜੀ ਕਿਸੇ ਖਾਸ ਕੁੰਜੀ ਨਾਲ ਮਿਲਦੀ ਹੈ (ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਉੱਪਰ ਵਾਲੀ ਐਰੋ)
+- **ਇਵੈਂਟ ਆਬਜੈਕਟ** ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਜੋ ਦੱਸਦਾ ਹੈ ਕਿ ਕਿਹੜੀ ਕੁੰਜੀ ਦਬਾਈ ਗਈ ਸੀ
+- **ਜਾਂਚਦਾ ਹੈ** ਕਿ ਦਬਾਈ ਗਈ ਕੁੰਜੀ ਕਿਸੇ ਖਾਸ ਕੁੰਜੀ (ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਉੱਪਰ ਵਾਲੀ ਐਰੋ) ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ
 - **ਕੋਡ ਚਲਾਉਂਦਾ ਹੈ** ਜਦੋਂ ਸ਼ਰਤ ਪੂਰੀ ਹੁੰਦੀ ਹੈ
 
 ਕੀ ਇਵੈਂਟਸ ਲਈ ਇਵੈਂਟ 'ਤੇ ਦੋ ਗੁਣ ਹੁੰਦੇ ਹਨ ਜੋ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਕਿਹੜੀ ਕੁੰਜੀ ਦਬਾਈ ਗਈ ਸੀ:
 
-- `key` - ਇਹ ਦਬਾਈ ਗਈ ਕੁੰਜੀ ਦਾ ਸਤਰ ਪ੍ਰਤੀਨਿਧੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ `'ArrowUp'`
-- `keyCode` - ਇਹ ਇੱਕ ਨੰਬਰ ਪ੍ਰਤੀਨਿਧੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ `37`, ਜੋ `ArrowLeft` ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ
+- `key` - ਇਹ ਦਬਾਈ ਗਈ ਕੁੰਜੀ ਦਾ ਸਤਰ ਰੂਪ ਹੈ, ਉਦਾਹਰਨ ਲਈ `'ArrowUp'`
+- `keyCode` - ਇਹ ਇੱਕ ਨੰਬਰ ਰੂਪ ਹੈ, ਉਦਾਹਰਨ ਲਈ `37`, ਜੋ `ArrowLeft` ਦੇ ਅਨੁਕੂਲ ਹੈ
+
+✅ ਕੀ ਇਵੈਂਟ ਮੈਨਿਪੂਲੇਸ਼ਨ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਤੋਂ ਬਾਹਰ ਵੀ ਲਾਭਦਾਇਕ ਹੈ। ਇਸ ਤਕਨੀਕ ਲਈ ਹੋਰ ਕੀ ਉਦੇਸ਼ ਤੁਸੀਂ ਸੋਚ ਸਕਦੇ ਹੋ?
 
-✅ ਕੀ ਇਵੈਂਟ ਮੈਨਿਪੂਲੇਸ਼ਨ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਤੋਂ ਬਾਹਰ ਵੀ ਲਾਭਦਾਇਕ ਹੈ। ਇਸ ਤਕਨੀਕ ਲਈ ਹੋਰ ਕੀ ਉਪਯੋਗਤਾਵਾਂ ਤੁਸੀਂ ਸੋਚ ਸਕਦੇ ਹੋ?
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant EventSystem
+    participant GameLogic
+    participant Hero
+    
+    User->>Browser: Presses ArrowUp key
+    Browser->>EventSystem: keydown event
+    EventSystem->>EventSystem: preventDefault()
+    EventSystem->>GameLogic: emit('KEY_EVENT_UP')
+    GameLogic->>Hero: hero.y -= 5
+    Hero->>Hero: Update position
+    
+    Note over Browser,GameLogic: Event flow prevents browser defaults
+    Note over GameLogic,Hero: Pub/sub pattern enables clean communication
+```
 
 ### ਖਾਸ ਕੁੰਜੀਆਂ: ਇੱਕ ਚੇਤਾਵਨੀ!
 
-ਕੁਝ ਕੁੰਜੀਆਂ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਅੰਦਰ ਬਣੇ ਹੋਏ ਵਿਹਾਰ ਹੁੰਦੇ ਹਨ ਜੋ ਤੁਹਾਡੀ ਗੇਮ ਵਿੱਚ ਰੁਕਾਵਟ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ। ਐਰੋ ਕੁੰਜੀਆਂ ਪੰਨਾ ਸਕ੍ਰੋਲ ਕਰਦੀਆਂ ਹਨ ਅਤੇ ਸਪੇਸਬਾਰ ਹੇਠਾਂ ਜੰਪ ਕਰਦਾ ਹੈ - ਵਿਹਾਰ ਜੋ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਜਦੋਂ ਕੋਈ ਆਪਣਾ ਸਪੇਸਸ਼ਿਪ ਚਲਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਿਹਾ ਹੈ।
+ਕੁਝ ਕੁੰਜੀਆਂ ਵਿੱਚ ਬਣਾਏ ਗਏ ਬ੍ਰਾਊਜ਼ਰ ਵਿਹਾਰ ਹੁੰਦੇ ਹਨ ਜੋ ਤੁਹਾਡੀ ਗੇਮ ਵਿੱਚ ਰੁਕਾਵਟ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ। ਐਰੋ ਕੁੰਜੀਆਂ ਪੰਨਾ ਸਕ੍ਰੋਲ ਕਰਦੀਆਂ ਹਨ ਅਤੇ ਸਪੇਸਬਾਰ ਹੇਠਾਂ ਜੰਪ ਕਰਦੀ ਹੈ - ਉਹ ਵਿਹਾਰ ਜੋ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਜਦੋਂ ਕੋਈ ਆਪਣਾ ਸਪੇਸਸ਼ਿਪ ਚਲਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਿਹਾ ਹੋਵੇ।
 
-ਅਸੀਂ ਇਹ ਡਿਫਾਲਟ ਵਿਹਾਰ ਰੋਕ ਸਕਦੇ ਹਾਂ ਅਤੇ ਆਪਣੀ ਗੇਮ ਨੂੰ ਇਸ ਇਨਪੁਟ ਨੂੰ ਸੰਭਾਲਣ ਦੇ ਸਕਦੇ ਹਾਂ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੀ ਹੈ ਜਿਵੇਂ ਕਿ ਸ਼ੁਰੂਆਤੀ ਕੰਪਿਊਟਰ ਪ੍ਰੋਗਰਾਮਰਾਂ ਨੂੰ ਕਸਟਮ ਵਿਹਾਰ ਬਣਾਉਣ ਲਈ ਸਿਸਟਮ ਇੰਟਰਪਟਸ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ ਪੈਂਦਾ ਸੀ - ਅਸੀਂ ਸਿਰਫ਼ ਇਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਪੱਧਰ 'ਤੇ ਕਰ ਰਹੇ ਹਾਂ। ਇਹ ਹੈ ਕਿ ਕਿਵੇਂ:
+ਅਸੀਂ ਇਹ ਡਿਫਾਲਟ ਵਿਹਾਰ ਰੋਕ ਸਕਦੇ ਹਾਂ ਅਤੇ ਆਪਣੀ ਗੇਮ ਨੂੰ ਇਸ ਇਨਪੁਟ ਨੂੰ ਸੰਭਾਲਣ ਦੇ ਸਕਦੇ ਹਾਂ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਸ਼ੁਰੂਆਤੀ ਕੰਪਿਊਟਰ ਪ੍ਰੋਗਰਾਮਰਾਂ ਨੂੰ ਸਿਸਟਮ ਇੰਟਰਪਟਸ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ ਪੈਂਦਾ ਸੀ ਤਾਂ ਜੋ ਕਸਟਮ ਵਿਹਾਰ ਬਣਾਇਆ ਜਾ ਸਕੇ - ਅਸੀਂ ਸਿਰਫ ਬ੍ਰਾਊਜ਼ਰ ਪੱਧਰ 'ਤੇ ਕਰ ਰਹੇ ਹਾਂ। ਇਹ ਕਿਵੇਂ:
 
 ```javascript
 const onKeyDown = function (e) {
@@ -119,71 +206,95 @@ window.addEventListener('keydown', onKeyDown);
 ```
 
 **ਇਸ ਰੋਕਥਾਮ ਕੋਡ ਨੂੰ ਸਮਝਣਾ:**
-- **ਖਾਸ ਕੁੰਜੀ ਕੋਡਾਂ ਲਈ ਜਾਂਚ ਕਰਦਾ ਹੈ** ਜੋ ਅਣਚਾਹੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿਹਾਰ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ
+- **ਖਾਸ ਕੁੰਜੀ ਕੋਡਾਂ ਲਈ ਜਾਂਚਦਾ ਹੈ** ਜੋ ਅਣਚਾਹੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿਹਾਰ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ
 - **ਡਿਫਾਲਟ ਬ੍ਰਾਊਜ਼ਰ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ** ਐਰੋ ਕੁੰਜੀਆਂ ਅਤੇ ਸਪੇਸਬਾਰ ਲਈ
 - **ਹੋਰ ਕੁੰਜੀਆਂ ਨੂੰ ਆਮ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਨ ਦਿੰਦਾ ਹੈ**
-- **`e.preventDefault()` ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ** ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਅੰਦਰ ਬਣੇ ਹੋਏ ਵਿਹਾਰ ਨੂੰ ਰੋਕਣ ਲਈ
-
-## ਗੇਮ ਦੁਆਰਾ ਪ੍ਰੇਰਿਤ ਮੋਸ਼ਨ
-
-ਹੁਣ ਆਓ ਚੀਜ਼ਾਂ ਬਾਰੇ ਗੱਲ ਕਰੀਏ ਜੋ ਖਿਡਾਰੀ ਦੇ ਇਨਪੁਟ ਤੋਂ ਬਿਨਾਂ ਹਿਲਦੀਆਂ ਹਨ। ਉਹ ਦੁਸ਼ਮਣ ਜਹਾਜ਼ਾਂ ਬਾਰੇ ਸੋਚੋ ਜੋ ਸਕ੍ਰੀਨ 'ਤੇ ਕ੍ਰੂਜ਼ ਕਰ ਰਹੇ ਹਨ, ਸਿੱਧੀ ਲਾਈਨਾਂ ਵਿੱਚ ਉੱਡ ਰਹੇ ਗੋਲੇ, ਜਾਂ ਪਿਛੋਕੜ ਵਿੱਚ ਤਰਦੇ ਬੱਦਲ। ਇਹ ਸਵੈ-ਚਾਲਤ ਮੋਸ਼ਨ ਤੁਹਾਡੀ ਗੇਮ ਦੁਨੀਆ ਨੂੰ ਜੀਵੰਤ ਮਹਿਸੂਸ ਕਰਾਉਂਦਾ ਹੈ ਭਾਵੇਂ ਕੋਈ ਵੀ ਕੰਟਰੋਲ ਨੂੰ ਹਿਲਾ ਨਹੀਂ ਰਿਹਾ।
-
-ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਅੰਦਰ ਬਣੇ ਹੋਏ ਟਾਈਮਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜੋ ਨਿਯਮਿਤ ਅੰਤਰਾਲ 'ਤੇ ਸਥਿਤੀਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹਨ। ਇਹ ਸੰਕਲਪ ਉਸ ਤਰ੍ਹਾਂ ਹੀ ਹੈ ਜਿਵੇਂ ਪੈਂਡੂਲਮ ਘੜੀਆਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ - ਇੱਕ ਨਿਯਮਿਤ ਮਕੈਨਿਜ਼ਮ ਜੋ ਲਗਾਤਾਰ, ਸਮੇਂ-ਬੱਧ ਕਾਰਵਾਈਆਂ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ। ਇਹ ਕਿੰਨਾ ਸੌਖਾ ਹੋ ਸਕਦਾ ਹੈ:
-
-```javascript
-const id = setInterval(() => {
-  // Move the enemy on the y axis
-  enemy.y += 10;
-}, 100);
-```
-
-**ਇਹ ਮੋਸ਼ਨ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਟਾਈਮਰ ਬਣਾਉਂਦਾ ਹੈ** ਜੋ ਹਰ 100 ਮਿਲੀਸੈਕੰਡ 'ਤੇ ਚਲਦਾ ਹੈ
-- **ਦੁਸ਼ਮਣ ਦੇ y-ਕੋਆਰਡੀਨੇਟ ਨੂੰ 10 ਪਿਕਸਲਾਂ ਨਾਲ ਅਪਡੇਟ ਕਰਦਾ ਹੈ** ਹਰ ਵਾਰ
-- **ਇੰਟਰਵਲ ID ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ** ਤਾਂ ਕਿ ਅਸੀਂ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਰੋਕ ਸਕੀਏ
-- **ਦੁਸ਼ਮਣ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਆਪਣੇ ਆਪ ਹੇਠਾਂ ਹਿਲਾਉਂਦਾ ਹੈ**
-
-## ਗੇਮ ਲੂਪ
-
-ਇਹ ਸੰਕਲਪ ਹੈ ਜੋ ਸਭ ਕੁਝ ਇਕੱਠਾ ਕਰਦਾ ਹੈ - ਗੇਮ ਲੂਪ। ਜੇ ਤੁਹਾਡੀ ਗੇਮ ਇੱਕ ਫਿਲਮ ਹੁੰਦੀ, ਤਾਂ ਗੇਮ ਲੂਪ ਫਿਲਮ ਪ੍ਰੋਜੈਕਟਰ ਹੁੰਦਾ, ਜੋ ਫਰੇਮ ਦੇ ਬਾਅਦ ਫਰੇਮ ਦਿਖਾਉਂਦਾ ਹੈ ਤਾਂ ਕਿ ਸਭ ਕੁਝ ਹੌਲੀ ਹੌਲੀ ਹਿਲਦਾ ਦਿਖਾਈ ਦੇਵੇ।
-
-ਹਰ ਗੇਮ ਦੇ ਪਿੱਛੇ ਇੱਕ ਲੂਪ ਚੱਲ ਰਿਹਾ ਹੁੰਦਾ ਹੈ। ਇਹ ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟਸ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ, ਸਕ੍ਰੀਨ ਨੂੰ ਦੁਬਾਰਾ ਖਿੱਚਦਾ ਹੈ, ਅਤੇ ਇਸ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਲਗਾਤਾਰ ਦੁਹਰਾਉਂਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਹੀਰੋ, ਸਾਰੇ ਦੁਸ਼ਮਣਾਂ, ਕੋਈ ਵੀ ਲੇਜ਼ਰ ਜੋ ਉੱਡ ਰਹੇ ਹਨ - ਪੂਰੇ ਗੇਮ ਸਥਿਤੀ ਨੂੰ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ।
+- **ਵਰਤਦਾ ਹੈ** `e.preventDefault()` ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਬਣਾਏ ਵਿਹਾਰ ਨੂੰ ਰੋਕਣ ਲਈ
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਸਮਝਣਾ**: ਸਵੈ-ਚਾਲਤ ਮੋਸ਼ਨ 'ਤੇ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ:
+- ✅ `keydown` ਅਤੇ `keyup` ਇਵੈਂਟਸ ਦੇ ਵਿਚਕਾਰ ਫਰਕ ਦੀ ਵਿਆਖਿਆ ਕਰ ਸਕਦੇ ਹੋ
+- ✅ ਸਮਝ ਸਕਦੇ ਹੋ ਕਿ ਅਸੀਂ ਡਿਫault ਬ੍ਰਾਊਜ਼ਰ ਵਿਹਾਰਾਂ ਨੂੰ ਕਿਉਂ ਰੋਕਦੇ ਹਾਂ
+- ✅ ਸਮਝ ਸਕਦੇ ਹੋ ਕਿ ਇਵ
+   - **ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** ਇੱਕ ਐਰੇ ਜੋ ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟਸ ਨੂੰ ਰੱਖ ਸਕੇ
+
+   4. **ਗੇਮ ਸ਼ੁਰੂ ਕਰੋ**
+
+       ```javascript
+       function initGame() {
+         gameObjects = [];
+         createEnemies();
+         createHero();
+       
+         eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+           hero.y -= 5;
+         });
+       
+         eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+           hero.y += 5;
+         });
+       
+         eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+           hero.x -= 5;
+         });
+       
+4. **ਗੇਮ ਲੂਪ ਸੈਟਅਪ ਕਰੋ**
+
+   `window.onload` ਫੰਕਸ਼ਨ ਨੂੰ ਰੀਫੈਕਟਰ ਕਰੋ ਤਾਂ ਜੋ ਗੇਮ ਸ਼ੁਰੂ ਹੋਵੇ ਅਤੇ ਇੱਕ ਵਧੀਆ ਇੰਟਰਵਲ 'ਤੇ ਗੇਮ ਲੂਪ ਸੈਟਅਪ ਕੀਤਾ ਜਾ ਸਕੇ। ਤੁਸੀਂ ਇਸ ਵਿੱਚ ਲੇਜ਼ਰ ਬੀਮ ਵੀ ਸ਼ਾਮਲ ਕਰੋਗੇ:
 
-ਇਹ ਸੰਕਲਪ ਮੈਨੂੰ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ ਸ਼ੁਰੂਆਤੀ ਫਿਲਮ ਐਨੀਮੇਟਰਾਂ ਜਿਵੇਂ ਵਾਲਟ ਡਿਜ਼ਨੀ ਨੂੰ ਮੋਸ਼ਨ ਦਾ ਭਰਮ ਬਣਾਉਣ ਲਈ ਕਿਰਦਾਰਾਂ ਨੂੰ ਫਰੇਮ ਦੇ ਬਾਅਦ ਫਰੇਮ ਦੁਬਾਰਾ ਖਿੱਚਣਾ ਪੈਂਦਾ ਸੀ। ਅਸੀਂ ਇਹੀ ਕਰ ਰਹੇ ਹਾਂ, ਸਿਰਫ਼ ਪੈਂਸਲਾਂ ਦੀ ਬਜਾਏ ਕੋਡ ਨਾਲ।
-
-ਇਹ ਹੈ ਕਿ ਇੱਕ ਗੇਮ ਲੂਪ ਆਮ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇ ਸਕਦਾ ਹੈ, ਕੋਡ ਵਿੱਚ ਪ੍ਰਗਟ ਕੀਤਾ:
-
-```javascript
-const gameLoopId = setInterval(() => {
-  function gameLoop() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    drawHero();
-    drawEnemies();
-    drawStaticObjects();
-  }
-  gameLoop();
-}, 200);
-```
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      const gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100);
+    };
+    ```
 
-**ਗੇਮ ਲੂਪ ਸਟ੍ਰਕਚਰ ਨੂੰ ਸਮਝਣਾ:**
-- **ਸਾਰੇ ਕੈਨਵਸ ਨੂੰ ਸਾਫ਼ ਕਰਦਾ ਹੈ** ਪਿਛਲੇ ਫਰੇਮ ਨੂੰ ਹਟਾਉਣ ਲਈ
-- **ਬੈਕਗਰਾਊਂਡ ਨੂੰ ਇੱਕ ਠੋਸ ਰੰਗ ਨਾਲ ਭਰਦਾ ਹੈ**
-- **ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟਸ ਨੂੰ ਉਨ੍ਹਾਂ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ 'ਤੇ ਖਿੱਚਦਾ ਹੈ**
-- **ਇਸ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਹਰ 200 ਮਿਲੀਸੈਕੰਡ 'ਤੇ ਦੁਹਰਾਉਂਦਾ ਹੈ** ਹੌਲੀ ਹੌਲੀ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ
-- **ਫਰੇਮ ਰੇਟ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ** ਇੰਟਰਵਲ ਟਾਈਮਿੰਗ ਨੂੰ ਕੰਟਰੋਲ ਕਰਕੇ
+   **ਗੇਮ ਸੈਟਅਪ ਨੂੰ ਸਮਝਣਾ:**
+   - **ਪੂਰੀ ਤਰ੍ਹਾਂ ਪੇਜ ਲੋਡ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ** ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ
+   - **ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਅਤੇ ਇਸਦਾ 2D ਰੇਂਡਰਿੰਗ ਕਾਂਟੈਕਸਟ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ**
+   - **ਸਾਰੇ ਇਮੇਜ ਐਸੈਟਸ ਨੂੰ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਲੋਡ ਕਰਦਾ ਹੈ** `await` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+   - **ਗੇਮ ਲੂਪ ਨੂੰ 100ms ਇੰਟਰਵਲ (10 FPS) 'ਤੇ ਚਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ**
+   - **ਹਰ ਫਰੇਮ 'ਤੇ ਪੂਰੀ ਸਕ੍ਰੀਨ ਨੂੰ ਸਾਫ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਦੁਬਾਰਾ ਡ੍ਰਾ ਕਰਦਾ ਹੈ**
 
-## ਸਪੇਸ ਗੇਮ ਜਾਰੀ ਰੱਖਣਾ
+5. **ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ** ਜੋ ਵਿਰੋਧੀਆਂ ਨੂੰ ਇੱਕ ਨਿਰਧਾਰਿਤ ਇੰਟਰਵਲ 'ਤੇ ਹਿਲਣ ਦੇ ਸਕੇ
 
-ਹੁਣ ਅਸੀਂ ਮੋਸ਼ਨ ਨੂੰ ਸਥਿਰ ਦ੍ਰਿਸ਼ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜੋ ਤੁਸੀਂ ਪਹਿਲਾਂ ਬਣਾਇਆ ਸੀ। ਅਸੀਂ ਇਸਨੂੰ ਇੱਕ ਸਕ੍ਰੀਨਸ਼ਾਟ ਤੋਂ ਇੱਕ ਇੰਟਰੈਕਟਿਵ ਅਨੁਭਵ ਵਿੱਚ ਬਦਲਣ ਜਾ ਰਹੇ ਹਾਂ। ਅਸੀਂ ਇਸਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਕੰਮ ਕਰਕੇ ਕਰਾਂਗੇ ਤਾਂ ਕਿ ਹਰ ਹਿੱਸਾ ਪਿਛਲੇ 'ਤੇ ਬਣੇ।
+    `createEnemies()` ਫੰਕਸ਼ਨ ਨੂੰ ਰੀਫੈਕਟਰ ਕਰੋ ਤਾਂ ਜੋ ਵਿਰੋਧੀਆਂ ਬਣਾਏ ਜਾ ਸਕਣ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਨਵੇਂ gameObjects ਕਲਾਸ ਵਿੱਚ ਪੁਸ਼ ਕੀਤਾ ਜਾ ਸਕੇ:
 
-ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਜਿੱਥੇ ਅਸੀਂ ਛੱਡਿਆ ਸੀ ਉਸ ਕੋਡ ਨੂੰ ਪਕੜੋ (ਜਾਂ ਜੇ ਤੁਹਾਨੂੰ ਨਵੀਂ ਸ਼ੁਰੂਆਤ ਦੀ ਲੋੜ ਹੈ ਤਾਂ [ਭਾਗ II- ਸ਼ੁਰੂਆਤੀ](../../../../6-space-game/3-moving-elements-around/your-work) ਫੋਲਡਰ
-- **ਬਣਾਉਂਦਾ ਹੈ** nested loops ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਸ਼ਮਨਾਂ ਦੀ grid
-- **ਦੁਸ਼ਮਨ ਦੀ ਚਿੱਤਰਕਲਾ** ਹਰ ਦੁਸ਼ਮਨ object ਨੂੰ ਸੌਂਪਦਾ ਹੈ
-- **ਹਰ ਦੁਸ਼ਮਨ ਨੂੰ** global game objects array ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
 
-ਅਤੇ ਇੱਕ `createHero()` ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਹੀਰੋ ਲਈ ਇਸੇ ਤਰ੍ਹਾਂ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਰੇ।
+    **ਵਿਰੋਧੀ ਬਣਾਉਣ ਦਾ ਕੀ ਕਰਦਾ ਹੈ:**
+    - **ਪੋਜ਼ੀਸ਼ਨ ਦੀ ਗਣਨਾ ਕਰਦਾ ਹੈ** ਵਿਰੋਧੀਆਂ ਨੂੰ ਸਕ੍ਰੀਨ ਦੇ ਕੇਂਦਰ ਵਿੱਚ ਰੱਖਣ ਲਈ
+    - **ਵਿਰੋਧੀਆਂ ਦੀ ਗ੍ਰਿਡ ਬਣਾਉਂਦਾ ਹੈ** ਨੇਸਟਡ ਲੂਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+    - **ਹਰ ਵਿਰੋਧੀ ਆਬਜੈਕਟ ਨੂੰ ਵਿਰੋਧੀ ਇਮੇਜ ਅਸਾਈਨ ਕਰਦਾ ਹੈ**
+    - **ਹਰ ਵਿਰੋਧੀ ਨੂੰ ਗਲੋਬਲ ਗੇਮ ਆਬਜੈਕਟਸ ਐਰੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ**
+    
+    ਅਤੇ ਇੱਕ `createHero()` ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਹੀਰੋ ਲਈ ਇੱਕ ਸਮਾਨ ਪ੍ਰਕਿਰਿਆ ਕਰੇ।
 
     ```javascript
     function createHero() {
@@ -196,12 +307,12 @@ const gameLoopId = setInterval(() => {
     }
     ```
 
-**ਹੀਰੋ ਬਣਾਉਣ ਦਾ ਕੰਮ:**
-- **ਹੀਰੋ ਨੂੰ** ਸਕ੍ਰੀਨ ਦੇ ਹੇਠਲੇ ਕੇਂਦਰ ਵਿੱਚ ਸਥਿਤ ਕਰਦਾ ਹੈ
-- **ਹੀਰੋ ਦੀ ਚਿੱਤਰਕਲਾ** ਹੀਰੋ object ਨੂੰ ਸੌਂਪਦਾ ਹੈ
-- **ਹੀਰੋ ਨੂੰ** rendering ਲਈ game objects array ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ
+    **ਹੀਰੋ ਬਣਾਉਣ ਦਾ ਕੀ ਕਰਦਾ ਹੈ:**
+    - **ਹੀਰੋ ਨੂੰ ਸਕ੍ਰੀਨ ਦੇ ਹੇਠਲੇ ਕੇਂਦਰ ਵਿੱਚ ਪੋਜ਼ੀਸ਼ਨ ਕਰਦਾ ਹੈ**
+    - **ਹੀਰੋ ਆਬਜੈਕਟ ਨੂੰ ਹੀਰੋ ਇਮੇਜ ਅਸਾਈਨ ਕਰਦਾ ਹੈ**
+    - **ਹੀਰੋ ਨੂੰ ਰੇਂਡਰਿੰਗ ਲਈ ਗੇਮ ਆਬਜੈਕਟਸ ਐਰੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ**
 
-ਅਤੇ ਅੰਤ ਵਿੱਚ, `drawGameObjects()` ਫੰਕਸ਼ਨ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ:
+    ਅਤੇ ਆਖਿਰ ਵਿੱਚ, ਇੱਕ `drawGameObjects()` ਫੰਕਸ਼ਨ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ:
 
     ```javascript
     function drawGameObjects(ctx) {
@@ -209,14 +320,34 @@ const gameLoopId = setInterval(() => {
     }
     ```
 
-**ਡ੍ਰਾਇੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਝਣਾ:**
-- **game objects array ਵਿੱਚ** ਸਾਰੇ objects ਨੂੰ iterate ਕਰਦਾ ਹੈ
-- **ਹਰ object ਤੇ** `draw()` ਮੈਥਡ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ
-- **canvas context ਨੂੰ** ਪਾਸ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ objects ਆਪਣੇ ਆਪ render ਕਰ ਸਕਣ
-
-ਤੁਹਾਡੇ ਦੁਸ਼ਮਨ ਤੁਹਾਡੇ ਹੀਰੋ spaceship ਵੱਲ ਅੱਗੇ ਵਧਣੇ ਚਾਹੀਦੇ ਹਨ!
-}
-}
+    **ਡ੍ਰਾਇੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਝਣਾ:**
+    - **ਐਰੇ ਵਿੱਚ ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟਸ 'ਤੇ ਇਟਰੇਟ ਕਰਦਾ ਹੈ**
+    - **ਹਰ ਆਬਜੈਕਟ 'ਤੇ `draw()` ਮੈਥਡ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ**
+    - **ਕੈਨਵਸ ਕਾਂਟੈਕਸਟ ਪਾਸ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਆਬਜੈਕਟਸ ਆਪਣੇ ਆਪ ਨੂੰ ਰੇਂਡਰ ਕਰ ਸਕਣ**
+
+    ### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈਕ-ਇਨ**
+    **ਪੂਰੀ ਗੇਮ ਸਿਸਟਮ ਦੀ ਸਮਝ**: ਆਪਣੇ ਪੂਰੇ ਆਰਕੀਟੈਕਚਰ ਦੀ ਮਾਹਰਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:
+    - ✅ ਵਿਰਾਸਤ ਕਿਵੇਂ ਹੀਰੋ ਅਤੇ ਵਿਰੋਧੀ ਨੂੰ ਸਾਂਝੇ GameObject ਗੁਣਾਂ ਦੀ ਸਹਾਇਤਾ ਦਿੰਦੀ ਹੈ?
+    - ✅ ਪਬ/ਸਬ ਪੈਟਰਨ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਜ਼ਿਆਦਾ ਮੈਨਟੇਨਬਲ ਕਿਉਂ ਬਣਾਉਂਦਾ ਹੈ?
+    - ✅ ਗੇਮ ਲੂਪ ਸਮੂਥ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਵਿੱਚ ਕਿਹੜਾ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦਾ ਹੈ?
+    - ✅ ਇਵੈਂਟ ਲਿਸਨਰਜ਼ ਯੂਜ਼ਰ ਇਨਪੁਟ ਨੂੰ ਗੇਮ ਆਬਜੈਕਟ ਵਿਹਾਰ ਨਾਲ ਕਿਵੇਂ ਜੋੜਦੇ ਹਨ?
+
+    **ਸਿਸਟਮ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਤੁਹਾਡਾ ਗੇਮ ਹੁਣ ਦਰਸਾਉਂਦਾ ਹੈ:
+    - **ਆਬਜੈਕਟ-ਓਰੀਐਂਟਡ ਡਿਜ਼ਾਈਨ**: ਬੇਸ ਕਲਾਸਾਂ ਨਾਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਿਰਾਸਤ
+    - **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਆਰਕੀਟੈਕਚਰ**: ਪਬ/ਸਬ ਪੈਟਰਨ ਲਈ ਲੂਜ਼ ਕਪਲਿੰਗ
+    - **ਐਨੀਮੇਸ਼ਨ ਫਰੇਮਵਰਕ**: ਗੇਮ ਲੂਪ ਨਾਲ ਲਗਾਤਾਰ ਫਰੇਮ ਅਪਡੇਟ
+    - **ਇਨਪੁਟ ਹੈਂਡਲਿੰਗ**: ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਨਾਲ ਡਿਫਾਲਟ ਪ੍ਰੀਵੇਂਸ਼ਨ
+    - **ਐਸੈਟ ਮੈਨੇਜਮੈਂਟ**: ਇਮੇਜ ਲੋਡਿੰਗ ਅਤੇ ਸਪ੍ਰਾਈਟ ਰੇਂਡਰਿੰਗ
+
+    **ਪ੍ਰੋਫੈਸ਼ਨਲ ਪੈਟਰਨਸ**: ਤੁਸੀਂ ਲਾਗੂ ਕੀਤਾ ਹੈ:
+    - **ਸੰਬੰਧਿਤ ਕੰਸਰਨਸ ਦੀ ਵੰਡ**: ਇਨਪੁਟ, ਲਾਜਿਕ, ਅਤੇ ਰੇਂਡਰਿੰਗ ਨੂੰ ਵੱਖ-ਵੱਖ ਰੱਖਣਾ
+    - **ਪੋਲਿਮਾਰਫਿਜ਼ਮ**: ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟਸ ਸਾਂਝੇ ਡ੍ਰਾਇੰਗ ਇੰਟਰਫੇਸ ਨੂੰ ਸਹਾਇਤਾ ਦਿੰਦੇ ਹਨ
+    - **ਮੇਸੇਜ ਪਾਸਿੰਗ**: ਕੰਪੋਨੈਂਟਸ ਦੇ ਵਿਚਕਾਰ ਸਾਫ਼ ਸੰਚਾਰ
+    - **ਰਿਸੋਰਸ ਮੈਨੇਜਮੈਂਟ**: ਸਪ੍ਰਾਈਟ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਦੀ ਕੁਸ਼ਲ ਹੈਂਡਲਿੰਗ
+
+    ਤੁਹਾਡੇ ਵਿਰੋਧੀ ਤੁਹਾਡੇ ਹੀਰੋ ਸਪੇਸਸ਼ਿਪ ਵੱਲ ਅੱਗੇ ਵਧਣੇ ਸ਼ੁਰੂ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ!
+      }
+    }
     ```
     
     and add a `createHero()` function to do a similar process for the hero.
@@ -232,7 +363,7 @@ const gameLoopId = setInterval(() => {
     }
     ```
 
-ਅਤੇ ਅੰਤ ਵਿੱਚ, `drawGameObjects()` ਫੰਕਸ਼ਨ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ:
+    ਅਤੇ ਆਖਿਰ ਵਿੱਚ, ਇੱਕ `drawGameObjects()` ਫੰਕਸ਼ਨ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ:
 
     ```javascript
     function drawGameObjects(ctx) {
@@ -240,37 +371,35 @@ const gameLoopId = setInterval(() => {
     }
     ```
 
-ਤੁਹਾਡੇ ਦੁਸ਼ਮਨ ਤੁਹਾਡੇ ਹੀਰੋ spaceship ਵੱਲ ਅੱਗੇ ਵਧਣੇ ਚਾਹੀਦੇ ਹਨ!
+    ਤੁਹਾਡੇ ਵਿਰੋਧੀ ਤੁਹਾਡੇ ਹੀਰੋ ਸਪੇਸਸ਼ਿਪ ਵੱਲ ਅੱਗੇ ਵਧਣੇ ਸ਼ੁਰੂ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ!
 
 ---
 
 ## GitHub Copilot Agent Challenge 🚀
 
-ਇਹاں ਇੱਕ ਚੁਣੌਤੀ ਹੈ ਜੋ ਤੁਹਾਡੇ ਖੇਡ ਦੇ ਪੋਲਿਸ਼ ਨੂੰ ਬਿਹਤਰ ਕਰੇਗੀ: boundaries ਅਤੇ smooth controls ਸ਼ਾਮਲ ਕਰਨਾ। ਇਸ ਸਮੇਂ, ਤੁਹਾਡਾ ਹੀਰੋ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਉੱਡ ਸਕਦਾ ਹੈ, ਅਤੇ ਮੂਵਮੈਂਟ ਕੁਝ ਚੌਕਾ ਦੇਣ ਵਾਲੀ ਲੱਗ ਸਕਦੀ ਹੈ।
-
-**ਤੁਹਾਡਾ ਮਿਸ਼ਨ:** ਤੁਹਾਡੇ spaceship ਨੂੰ ਜ਼ਿਆਦਾ ਹਕੀਕਤੀ ਬਣਾਉਣ ਲਈ boundaries ਅਤੇ fluid movement ਲਾਗੂ ਕਰੋ। ਇਹ NASA ਦੇ flight control systems ਵਰਗਾ ਹੈ ਜੋ spacecraft ਨੂੰ ਸੁਰੱਖਿਅਤ operational parameters ਤੋਂ ਵੱਧ ਜਾਣ ਤੋਂ ਰੋਕਦੇ ਹਨ।
+ਇਹ ਇੱਕ ਚੁਣੌਤੀ ਹੈ ਜੋ ਤੁਹਾਡੇ ਗੇਮ ਦੀ ਪੋਲਿਸ਼ ਨੂੰ ਸੁਧਾਰੇਗੀ: ਬਾਊਂਡਰੀਜ਼ ਅਤੇ ਸਮੂਥ ਕੰਟਰੋਲ ਸ਼ਾਮਲ ਕਰਨਾ। ਇਸ ਸਮੇਂ, ਤੁਹਾਡਾ ਹੀਰੋ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਉੱਡ ਸਕਦਾ ਹੈ, ਅਤੇ ਮੂਵਮੈਂਟ ਥੋੜਾ ਅਸਮਰੂਪ ਲੱਗ ਸਕਦਾ ਹੈ।
 
-**ਇਹ ਬਣਾਉਣਾ ਹੈ:** ਇੱਕ ਸਿਸਟਮ ਬਣਾਓ ਜੋ ਤੁਹਾਡੇ ਹੀਰੋ spaceship ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਰੱਖੇ, ਅਤੇ controls ਨੂੰ smooth ਬਣਾਏ। ਜਦੋਂ ਖਿਡਾਰੀ arrow key ਦਬਾਉਂਦੇ ਹਨ, ਤਾਂ ਜਹਾਜ਼ ਨੂੰ discrete steps ਦੀ ਬਜਾਏ ਲਗਾਤਾਰ glide ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਜਦੋਂ ਜਹਾਜ਼ ਸਕ੍ਰੀਨ boundaries 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ, ਤਾਂ visual feedback ਸ਼ਾਮਲ ਕਰਨ ਬਾਰੇ ਸੋਚੋ – ਸ਼ਾਇਦ play area ਦੇ edge ਨੂੰ ਦਰਸਾਉਣ ਲਈ subtle effect।
+**ਤੁਹਾਡਾ ਮਿਸ਼ਨ:** ਆਪਣੀ ਸਪੇਸਸ਼ਿਪ ਨੂੰ ਹੋਰ ਹਕੀਕਤੀਵਾਦੀ ਬਣਾਉਣ ਲਈ ਸਕ੍ਰੀਨ ਬਾਊਂਡਰੀਜ਼ ਅਤੇ ਫਲੂਇਡ ਮੂਵਮੈਂਟ ਲਾਗੂ ਕਰੋ। ਜਦੋਂ ਖਿਡਾਰੀ ਇੱਕ ਐਰੋ ਕੀ ਦਬਾਉਂਦੇ ਹਨ, ਸਪੇਸਸ਼ਿਪ ਨੂੰ ਡਿਸਕ੍ਰੀਟ ਸਟੈਪਸ ਦੀ ਬਜਾਏ ਲਗਾਤਾਰ ਗਲਾਈਡ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਜਦੋਂ ਸਪੇਸਸ਼ਿਪ ਸਕ੍ਰੀਨ ਬਾਊਂਡਰੀਜ਼ 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ, ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਸ਼ਾਮਲ ਕਰਨ ਬਾਰੇ ਸੋਚੋ – ਸ਼ਾਇਦ ਖੇਡ ਖੇਤਰ ਦੇ ਕਿਨਾਰੇ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਇੱਕ ਸੁਬਟਲ ਪ੍ਰਭਾਵ।
 
 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
 
 ## 🚀 Challenge
 
-ਜਿਵੇਂ ਜਿਵੇਂ ਪ੍ਰੋਜੈਕਟ ਵਧਦੇ ਹਨ, code organization ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਬਣ ਜਾਂਦੀ ਹੈ। ਤੁਸੀਂ ਸ਼ਾਇਦ ਧਿਆਨ ਦਿੱਤਾ ਹੋਵੇ ਕਿ ਤੁਹਾਡੀ ਫਾਈਲ functions, variables, ਅਤੇ classes ਦੇ ਨਾਲ ਭਰੀ ਹੋਈ ਹੈ। ਇਹ ਮੈਨੂੰ Apollo mission code ਦੇ ਇੰਜੀਨੀਅਰਾਂ ਦੀ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਸਪਸ਼ਟ, maintainable systems ਬਣਾਉਣੇ ਪਏ ਜੋ ਕਈ ਟੀਮਾਂ ਇੱਕੋ ਸਮੇਂ 'ਤੇ ਕੰਮ ਕਰ ਸਕਣ।
+ਜਿਵੇਂ ਜਿਵੇਂ ਪ੍ਰੋਜੈਕਟ ਵਧਦੇ ਹਨ, ਕੋਡ ਦਾ ਸੰਗਠਨ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਬਣ ਜਾਂਦਾ ਹੈ। ਤੁਸੀਂ ਸ਼ਾਇਦ ਧਿਆਨ ਦਿੱਤਾ ਹੋਵੇ ਕਿ ਤੁਹਾਡੀ ਫਾਈਲ ਫੰਕਸ਼ਨਸ, ਵੈਰੀਏਬਲਸ, ਅਤੇ ਕਲਾਸਾਂ ਨਾਲ ਭਰੀ ਹੋਈ ਹੈ। ਇਹ ਮੈਨੂੰ ਯਾਦ ਦਿੰਦਾ ਹੈ ਕਿ Apollo ਮਿਸ਼ਨ ਕੋਡ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਵਾਲੇ ਇੰਜੀਨੀਅਰਾਂ ਨੂੰ ਸਪਸ਼ਟ, ਮੈਨਟੇਨਬਲ ਸਿਸਟਮ ਬਣਾਉਣੇ ਪਏ ਜੋ ਕਈ ਟੀਮਾਂ ਇੱਕੋ ਸਮੇਂ 'ਤੇ ਕੰਮ ਕਰ ਸਕਣ।
 
 **ਤੁਹਾਡਾ ਮਿਸ਼ਨ:**
-Software architect ਵਾਂਗ ਸੋਚੋ। ਤੁਸੀਂ ਆਪਣੀ code ਨੂੰ ਕਿਵੇਂ organize ਕਰੋਗੇ ਤਾਂ ਕਿ ਛੇ ਮਹੀਨੇ ਬਾਅਦ, ਤੁਸੀਂ (ਜਾਂ ਤੁਹਾਡਾ ਸਾਥੀ) ਸਮਝ ਸਕੋ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ? ਭਾਵੇਂ ਸਾਰਾ ਕੁਝ ਇੱਕ ਫਾਈਲ ਵਿੱਚ ਰਹੇ, ਤੁਸੀਂ ਬਿਹਤਰ organization ਕਰ ਸਕਦੇ ਹੋ:
+ਸਾਫਟਵੇਅਰ ਆਰਕੀਟੈਕਟ ਵਾਂਗ ਸੋਚੋ। ਤੁਸੀਂ ਆਪਣਾ ਕੋਡ ਕਿਵੇਂ ਸੰਗਠਿਤ ਕਰੋਗੇ ਤਾਂ ਜੋ ਛੇ ਮਹੀਨੇ ਬਾਅਦ, ਤੁਸੀਂ (ਜਾਂ ਤੁਹਾਡਾ ਸਾਥੀ) ਸਮਝ ਸਕੋ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ? ਭਾਵੇਂ ਸਾਰਾ ਕੁਝ ਇੱਕ ਫਾਈਲ ਵਿੱਚ ਰਹੇ, ਤੁਸੀਂ ਬਿਹਤਰ ਸੰਗਠਨ ਬਣਾਉਣ ਲਈ ਇਹ ਕਰ ਸਕਦੇ ਹੋ:
 
-- **ਸੰਬੰਧਿਤ functions ਨੂੰ** ਸਪਸ਼ਟ comment headers ਨਾਲ ਇਕੱਠਾ ਕਰਨਾ
-- **ਅਲੱਗ-ਅਲੱਗ ਕੰਮ** - game logic ਨੂੰ rendering ਤੋਂ ਵੱਖ ਰੱਖਣਾ
-- **consistent naming** conventions ਦੀ ਵਰਤੋਂ variables ਅਤੇ functions ਲਈ
-- **modules ਜਾਂ namespaces** ਬਣਾਉਣਾ ਖੇਡ ਦੇ ਵੱਖ-ਵੱਖ ਪਾਸਿਆਂ ਨੂੰ organize ਕਰਨ ਲਈ
-- **documentation ਸ਼ਾਮਲ ਕਰਨਾ** ਜੋ ਹਰ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸੇ ਦਾ ਉਦੇਸ਼ ਸਮਝਾਉਂਦਾ ਹੈ
+- **ਸੰਬੰਧਿਤ ਫੰਕਸ਼ਨਸ ਨੂੰ ਸਮੂਹਬੱਧ ਕਰਨਾ** ਸਪਸ਼ਟ ਕਮੈਂਟ ਹੈਡਰਸ ਨਾਲ
+- **ਕੰਸਰਨਸ ਨੂੰ ਵੱਖ-ਵੱਖ ਕਰਨਾ** - ਗੇਮ ਲਾਜਿਕ ਨੂੰ ਰੇਂਡਰਿੰਗ ਤੋਂ ਵੱਖ ਰੱਖਣਾ
+- **ਵੈਰੀਏਬਲਸ ਅਤੇ ਫੰਕਸ਼ਨਸ ਲਈ ਸਥਿਰ ਨਾਮਕਰਨ** ਰੀਤੀਆਂ ਦੀ ਵਰਤੋਂ
+- **ਮੋਡਿਊਲਸ ਜਾਂ ਨੇਮਸਪੇਸ ਬਣਾਉਣਾ** ਆਪਣੇ ਗੇਮ ਦੇ ਵੱਖ-ਵੱਖ ਪਹਲੂਆਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਲਈ
+- **ਡਾਕੂਮੈਂਟੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰਨਾ** ਜੋ ਹਰ ਮੁੱਖ ਭਾਗ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ
 
-**Reflection questions:**
-- ਤੁਹਾਡੀ code ਦੇ ਕਿਹੜੇ ਹਿੱਸੇ ਸਭ ਤੋਂ ਮੁਸ਼ਕਲ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਵਾਪਸ ਵੇਖਦੇ ਹੋ?
-- ਤੁਸੀਂ ਆਪਣੀ code ਨੂੰ ਕਿਵੇਂ organize ਕਰ ਸਕਦੇ ਹੋ ਤਾਂ ਕਿ ਕੋਈ ਹੋਰ ਬੰਦਾ ਇਸ 'ਤੇ ਕੰਮ ਕਰ ਸਕੇ?
-- ਕੀ ਹੋਵੇਗਾ ਜੇ ਤੁਸੀਂ power-ups ਜਾਂ ਵੱਖ-ਵੱਖ enemy types ਵਰਗੀਆਂ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਕਰਨੀ ਹੋਵੇ?
+**ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ:**
+- ਤੁਹਾਡੇ ਕੋਡ ਦੇ ਕਿਹੜੇ ਭਾਗ ਸਭ ਤੋਂ ਮੁਸ਼ਕਲ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਵਾਪਸ ਵੇਖਦੇ ਹੋ?
+- ਤੁਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਕਿਵੇਂ ਸੰਗਠਿਤ ਕਰ ਸਕਦੇ ਹੋ ਤਾਂ ਜੋ ਕੋਈ ਹੋਰ ਵਿਅਕਤੀ ਇਸ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾ ਸਕੇ?
+- ਕੀ ਹੋਵੇਗਾ ਜੇ ਤੁਸੀਂ ਪਾਵਰ-ਅਪਸ ਜਾਂ ਵੱਖ-ਵੱਖ ਵਿਰੋਧੀ ਕਿਸਮਾਂ ਵਰਗੇ ਨਵੇਂ ਫੀਚਰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੋ?
 
 ## Post-Lecture Quiz
 
@@ -278,21 +407,108 @@ Software architect ਵਾਂਗ ਸੋਚੋ। ਤੁਸੀਂ ਆਪਣੀ cod
 
 ## Review & Self Study
 
-ਅਸੀਂ ਸਾਰਾ ਕੁਝ ਸ਼ੁਰੂ ਤੋਂ ਬਣਾਇਆ ਹੈ, ਜੋ ਸਿਖਣ ਲਈ ਸ਼ਾਨਦਾਰ ਹੈ, ਪਰ ਇੱਥੇ ਇੱਕ ਛੋਟਾ ਰਾਜ਼ ਹੈ – ਕੁਝ ਸ਼ਾਨਦਾਰ JavaScript frameworks ਹਨ ਜੋ ਤੁਹਾਡੇ ਲਈ ਬਹੁਤ ਸਾਰਾ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਉਹ ਮੂਲ ਤੱਤ ਸਿੱਖ ਲੈਂਦੇ ਹੋ ਜੋ ਅਸੀਂ ਕਵਰ ਕੀਤੇ ਹਨ, ਤਾਂ ਇਹ [ਉਪਲਬਧ ਚੀਜ਼ਾਂ ਦੀ ਖੋਜ](https://github.com/collections/javascript-game-engines) ਕਰਨ ਵਾਲਾ ਹੈ।
+ਅਸੀਂ ਸਾਰਾ ਕੁਝ ਸ਼ੁਰੂ ਤੋਂ ਬਣਾਇਆ ਹੈ, ਜੋ ਸਿਖਣ ਲਈ ਸ਼ਾਨਦਾਰ ਹੈ, ਪਰ ਇੱਥੇ ਇੱਕ ਛੋਟਾ ਰਾਜ਼ ਹੈ – ਕੁਝ ਸ਼ਾਨਦਾਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਰੇਮਵਰਕਸ ਹਨ ਜੋ ਤੁਹਾਡੇ ਲਈ ਬਹੁਤ ਸਾਰਾ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਉਹ ਮੂਲ ਤੱਤਾਂ ਵਿੱਚ ਸਹੀ ਮਹਿਸੂਸ ਕਰਦੇ ਹੋ ਜੋ ਅਸੀਂ ਕਵਰ ਕੀਤੇ ਹਨ, ਇਹ [ਉਪਲਬਧ ਕੀ ਹੈ](https://github.com/collections/javascript-game-engines) ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਮੁੱਲਵਾਨ ਹੈ।
+
+ਫਰੇਮਵਰਕਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਚੰਗੀ ਤਿਆਰ ਟੂਲਬਾਕਸ ਹੈ ਬਜਾਏ ਹਰ ਟੂਲ ਨੂੰ ਹੱਥ ਨਾਲ ਬਣਾਉਣ ਦੇ। ਇਹ ਉਹਨਾਂ ਕੋਡ ਸੰਗਠਨ ਚੁਣੌਤੀਆਂ ਨੂੰ ਹੱਲ ਕਰ ਸਕਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਅਸੀਂ ਗੱਲ ਕੀਤੀ ਹੈ, ਅਤੇ ਉਹ ਫੀਚਰ ਪੇਸ਼ ਕਰਦੇ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਖੁਦ ਬਣਾਉਣ ਵਿੱਚ ਹਫ਼ਤੇ ਲੱਗ ਸਕਦੇ ਹਨ।
 
-Frameworks ਨੂੰ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਜਾਏ ਟੂਲਬਾਕਸ ਵਾਂਗ ਸੋਚੋ, ਬਜਾਏ ਹਰ ਟੂਲ ਨੂੰ ਆਪਣੇ ਆਪ ਬਣਾਉਣ ਦੇ। ਇਹ code organization ਦੀਆਂ ਬਹੁਤ ਸਾਰੀਆਂ ਚੁਣੌਤੀਆਂ ਦਾ ਹੱਲ ਕਰ ਸਕਦੇ ਹਨ, ਨਾਲ ਹੀ ਉਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪੇਸ਼ ਕਰਦੇ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਆਪ ਬਣਾਉਣ ਵਿੱਚ ਹਫ਼ਤੇ ਲੱਗਣਗੇ।
+**ਖੋਜ ਕਰਨ ਲਈ ਚੀਜ਼ਾਂ:**
+- ਗੇਮ ਇੰਜਨਸ ਕੋਡ ਨੂੰ ਕਿਵੇਂ ਸੰਗਠਿਤ ਕਰਦੇ ਹਨ – ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਦੇ ਚਤੁਰਾਈਪੂਰਨ ਪੈਟਰਨਸ ਨੂੰ ਦੇਖ ਕੇ ਹੈਰਾਨ ਹੋ ਜਾਓਗੇ
+- ਕੈਨਵਸ ਗੇਮਸ ਨੂੰ ਬਟਰ-ਸਮੂਥ ਚਲਾਉਣ ਲਈ ਪ੍ਰਦਰਸ਼ਨ ਚਾਲਾਕੀਆਂ  
+- ਮੋਡਰਨ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੀਚਰਸ ਜੋ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸਾਫ਼ ਅਤੇ ਜ਼ਿਆਦਾ ਮੈਨਟੇਨਬਲ ਬਣਾ ਸਕਦੇ ਹਨ
+- ਗੇਮ ਆਬਜੈਕਟਸ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਸੰਬੰਧਾਂ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਦੇ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ
 
-**ਖੋਜ ਕਰਨ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ:**
-- Game engines code ਨੂੰ ਕਿਵੇਂ organize ਕਰਦੇ ਹਨ – ਤੁਸੀਂ clever patterns ਦੇਖ ਕੇ ਹੈਰਾਨ ਹੋ ਜਾਓਗੇ
-- Canvas games ਨੂੰ butter-smooth ਚਲਾਉਣ ਲਈ performance tricks  
-- Modern JavaScript features ਜੋ ਤੁਹਾਡੀ code ਨੂੰ ਸਾਫ ਅਤੇ maintainable ਬਣਾ ਸਕਦੇ ਹਨ
-- Game objects ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ relationships ਨੂੰ manage ਕਰਨ ਦੇ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ
+## 🎯 Your Game Animation Mastery Timeline
 
-## Assignment
+```mermaid
+timeline
+    title Game Animation & Interaction Learning Progression
+    
+    section Movement Fundamentals (20 minutes)
+        Animation Principles: Frame-based animation
+                            : Position updates
+                            : Coordinate systems
+                            : Smooth movement
+        
+    section Event Systems (25 minutes)
+        User Input: Keyboard event handling
+                  : Default behavior prevention
+                  : Event object properties
+                  : Window-level listening
+        
+    section Game Architecture (30 minutes)
+        Object Design: Inheritance patterns
+                     : Base class creation
+                     : Specialized behaviors
+                     : Polymorphic interfaces
+        
+    section Communication Patterns (35 minutes)
+        Pub/Sub Implementation: Event emitters
+                              : Message constants
+                              : Loose coupling
+                              : System integration
+        
+    section Game Loop Mastery (40 minutes)
+        Real-time Systems: Frame rate control
+                         : Update/render cycle
+                         : State management
+                         : Performance optimization
+        
+    section Advanced Techniques (45 minutes)
+        Professional Features: Collision detection
+                             : Physics simulation
+                             : State machines
+                             : Component systems
+        
+    section Game Engine Concepts (1 week)
+        Framework Understanding: Entity-component systems
+                               : Scene graphs
+                               : Asset pipelines
+                               : Performance profiling
+        
+    section Production Skills (1 month)
+        Professional Development: Code organization
+                                : Team collaboration
+                                : Testing strategies
+                                : Deployment optimization
+```
 
-[Comment your code](assignment.md)
+### 🛠️ Your Game Development Toolkit Summary
+
+ਇਸ ਪਾਠ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਹੁਣ ਮਾਹਰ ਹੋ:
+- **ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਿੰਸਿਪਲਸ**: ਫਰੇਮ-ਅਧਾਰਿਤ ਮੂਵਮੈਂਟ ਅਤੇ ਸਮੂਥ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨਸ
+- **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਕੀਬੋਰਡ ਇਨਪੁਟ ਹੈਂਡਲਿੰਗ ਨਾਲ ਸਹੀ ਇਵੈਂਟ ਮੈਨੇਜਮੈਂਟ
+- **ਆਬਜੈਕਟ-ਓਰੀਐਂਟਡ ਡਿਜ਼ਾਈਨ**: ਵਿਰਾਸਤ ਹਾਇਰਾਰਕੀਜ਼ ਅਤੇ ਪੋਲਿਮਾਰਫਿਕ ਇੰਟਰਫੇਸ
+- **ਸੰਚਾਰ ਪੈਟਰਨਸ**: ਪਬ/ਸਬ ਆਰਕੀਟੈਕਚਰ ਲਈ ਮੈਨਟੇਨਬਲ ਕੋਡ
+- **ਗੇਮ ਲੂਪ ਆਰਕੀਟੈਕਚਰ**: ਰੀਅਲ-ਟਾਈਮ ਅਪਡੇਟ ਅਤੇ ਰੇਂਡਰਿੰਗ ਸਾਈਕਲਸ
+- **ਇਨਪੁਟ ਸਿਸਟਮਸ**: ਯੂਜ਼ਰ ਕੰਟਰੋਲ ਮੈਪਿੰਗ ਨਾਲ ਡਿਫਾਲਟ ਵਿਹਾਰ ਪ੍ਰੀਵੇਂਸ਼ਨ
+- **ਐਸੈਟ ਮੈਨੇਜਮੈਂਟ**: ਸਪ੍ਰਾਈਟ ਲੋਡਿੰਗ ਅਤੇ ਕੁਸ਼ਲ ਰੇਂਡਰਿੰਗ ਤਕਨੀਕਾਂ
+
+### ⚡ **ਤੁਹਾਡੇ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਖੋਲ੍ਹੋ ਅਤੇ `addEventListener('keydown', console.log)` ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਦੇਖਣ ਲਈ
+- [ ] ਇੱਕ ਸਧਾਰਨ div ਐਲੀਮੈਂਟ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਐਰੋ ਕੀਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹਿਲਾਓ
+- [ ] ਲਗਾਤਾਰ ਮੂਵਮੈਂਟ ਬਣਾਉਣ ਲਈ `setInterval` ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ
+- [ ] `event.preventDefault()` ਨਾਲ ਡਿਫਾਲਟ ਵਿਹਾਰ ਨੂੰ ਰੋਕਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ
+
+### 🎯 **ਤੁਹਾਡੇ ਇਸ ਘੰਟੇ ਵਿੱਚ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪਾਠ-ਪਾਠ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ ਨੂੰ ਸਮਝੋ
+- [ ] ਪੂਰੀ ਕੀਬੋਰਡ ਕੰਟਰੋਲਸ ਨਾਲ ਮੂਵਮੈਂਟ ਵਾਲਾ ਹੀਰੋ ਸਪੇਸਸ਼ਿਪ ਬਣਾਓ
+- [ ] ਸਮੂਥ ਵਿਰੋਧੀ ਮੂਵਮੈਂਟ ਪੈਟਰਨਸ ਲਾਗੂ ਕਰੋ
+- [ ] ਗੇਮ ਆਬਜੈਕਟਸ ਨੂੰ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਜਾਣ ਤੋਂ ਰੋਕਣ ਲਈ ਬਾਊਂਡਰੀਜ਼ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਗੇਮ ਆਬਜੈਕਟਸ ਦੇ ਵਿਚਕਾਰ ਬੇਸਿਕ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣਾ ਬਣਾਓ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਐਨੀਮੇਸ਼ਨ ਯਾਤਰਾ**
+- [ ] ਪੂਰੀ ਸਪੇਸ ਗੇਮ ਪੂਰੀ ਮੂਵਮੈਂਟ ਅਤੇ ਇੰਟਰੈਕਸ਼ਨਸ ਨਾਲ ਪੂਰੀ ਕਰੋ
+- [ ] ਵਧੇਰੇ ਮੂਵਮੈਂਟ ਪੈਟਰਨਸ ਸ਼ਾਮਲ ਕਰੋ ਜਿਵੇਂ ਕਿ ਕਰਵਜ਼, ਐਕਸਲੇਰੇਸ਼ਨ, ਅਤੇ ਫਿਜ਼ਿਕਸ
+- [ ] ਸਮੂਥ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨਸ ਅਤੇ ਈਜ਼ਿੰਗ ਫੰਕਸ਼ਨਸ ਲਾਗੂ ਕਰੋ
+- [ ] ਪਾਰਟੀਕਲ ਪ੍ਰਭਾਵ ਅਤੇ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਸਿਸਟਮ ਬਣਾਓ
+- [ ] ਗੇਮ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਸਮੂਥ 60fps ਗੇਮਪਲੇ ਲਈ ਓਪਟੀਮਾਈਜ਼ ਕਰੋ
+- [ ] ਮੋਬਾਈਲ ਟਚ ਕੰਟਰੋਲਸ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਸ਼ਾਮਲ ਕਰੋ
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਇੰਟਰੈਕਟਿਵ ਵਿਕਾਸ**
+- [ ] ਉੱਚ-ਸਤਹ ਦੇ ਐਨੀਮੇਸ਼ਨ ਸਿਸਟਮਸ ਨਾਲ ਜਟਿਲ ਇੰਟਰੈਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨਸ ਬਣਾਓ
+- [ ] GSAP ਵਰਗੇ ਐਨੀਮੇਸ਼ਨ ਲਾਇਬ੍ਰੇਰੀਜ਼ ਸਿੱਖੋ ਜਾਂ ਆਪਣਾ ਐਨੀਮੇਸ਼ਨ ਇੰਜਨ ਬਣ
 
 ---
 
 **ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/6-space-game/4-collision-detection/README.md b/translations/pa/6-space-game/4-collision-detection/README.md
index 18f10abcad..41ff95149f 100644
--- a/translations/pa/6-space-game/4-collision-detection/README.md
+++ b/translations/pa/6-space-game/4-collision-detection/README.md
@@ -1,159 +1,102 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "4b1d441cfd31924084956000c0fee5a5",
-  "translation_date": "2025-10-22T18:10:27+00:00",
+  "original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
+  "translation_date": "2025-11-03T16:54:58+00:00",
   "source_file": "6-space-game/4-collision-detection/README.md",
   "language_code": "pa"
 }
 -->
-# ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 4: ਲੇਜ਼ਰ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਟਕਰਾਅ ਦਾ ਪਤਾ ਲਗਾਓ
+# ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 4: ਲੇਜ਼ਰ ਸ਼ਾਮਲ ਕਰਨਾ ਅਤੇ ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਕਰਨਾ
 
-## ਪੂਰਵ-ਵਿਆਖਿਆ ਪ੍ਰਸ਼ਨੋਤਰੀ
+## ਪੂਰਵ-ਵਿਚਾਰ ਕਵਿਜ਼
 
-[ਪੂਰਵ-ਵਿਆਖਿਆ ਪ੍ਰਸ਼ਨੋਤਰੀ](https://ff-quizzes.netlify.app/web/quiz/35)
+[ਪੂਰਵ-ਵਿਚਾਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/35)
 
-ਸਟਾਰ ਵਾਰਜ਼ ਦੇ ਉਸ ਪਲ ਬਾਰੇ ਸੋਚੋ ਜਦੋਂ ਲੂਕ ਦੇ ਪ੍ਰੋਟੋਨ ਟੋਰਪੀਡੋਜ਼ ਡੈਥ ਸਟਾਰ ਦੇ ਐਗਜ਼ਹੌਸਟ ਪੋਰਟ ਨੂੰ ਹਿੱਟ ਕਰਦੇ ਹਨ। ਉਹ ਸਹੀ ਟਕਰਾਅ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਗਲੈਕਸੀ ਦੀ ਕਿਸਮਤ ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ! ਗੇਮਾਂ ਵਿੱਚ, ਟਕਰਾਅ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਇਸੇ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ - ਇਹ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਜਦੋਂ ਵਸਤੂਆਂ ਅੰਤਰਕ੍ਰਿਆ ਕਰਦੀਆਂ ਹਨ ਅਤੇ ਅਗਲਾ ਕੀ ਹੁੰਦਾ ਹੈ।
+ਸਟਾਰ ਵਾਰਜ਼ ਦੇ ਉਸ ਪਲ ਬਾਰੇ ਸੋਚੋ ਜਦੋਂ ਲੂਕ ਦੇ ਪ੍ਰੋਟੋਨ ਟੋਰਪੀਡੋਜ਼ ਡੈਥ ਸਟਾਰ ਦੇ ਐਗਜ਼ਹੌਸਟ ਪੋਰਟ ਨੂੰ ਹਿੱਟ ਕਰਦੇ ਹਨ। ਉਹ ਸਹੀ ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਨੇ ਗਲੈਕਸੀ ਦੀ ਕਿਸਮਤ ਬਦਲ ਦਿੱਤੀ! ਗੇਮਾਂ ਵਿੱਚ, ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ - ਇਹ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦੀ ਹੈ ਕਿ ਜਦੋਂ ਵਸਤੂਆਂ ਪਰਸਪਰ ਸੰਪਰਕ ਕਰਦੀਆਂ ਹਨ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ।
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣੇ ਸਪੇਸ ਗੇਮ ਵਿੱਚ ਲੇਜ਼ਰ ਹਥਿਆਰ ਸ਼ਾਮਲ ਕਰੋਗੇ ਅਤੇ ਟਕਰਾਅ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਲਾਗੂ ਕਰੋਗੇ। NASA ਦੇ ਮਿਸ਼ਨ ਪਲਾਨਰਾਂ ਦੀ ਤਰ੍ਹਾਂ, ਜੋ ਮਲਬੇ ਤੋਂ ਬਚਣ ਲਈ ਅੰਤਰਿਕਸ਼ ਜਹਾਜ਼ ਦੇ ਰਸਤੇ ਦੀ ਗਣਨਾ ਕਰਦੇ ਹਨ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਜਦੋਂ ਗੇਮ ਵਸਤੂਆਂ ਇੱਕ-ਦੂਜੇ ਨਾਲ ਟਕਰਾਉਂਦੀਆਂ ਹਨ। ਅਸੀਂ ਇਸ ਨੂੰ ਪ੍ਰਬੰਧਨਯੋਗ ਕਦਮਾਂ ਵਿੱਚ ਤੋੜਾਂਗੇ ਜੋ ਇੱਕ-ਦੂਜੇ 'ਤੇ ਬਣਦੇ ਹਨ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣੇ ਸਪੇਸ ਗੇਮ ਵਿੱਚ ਲੇਜ਼ਰ ਹਥਿਆਰ ਸ਼ਾਮਲ ਕਰੋਗੇ ਅਤੇ ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਨੂੰ ਲਾਗੂ ਕਰੋਗੇ। ਜਿਵੇਂ NASA ਦੇ ਮਿਸ਼ਨ ਪਲਾਨਰਜ਼ ਅੰਤਰਿਕਸ਼ ਜਹਾਜ਼ ਦੇ ਰਾਹਾਂ ਦੀ ਗਣਨਾ ਕਰਦੇ ਹਨ ਤਾਂ ਕਿ ਮਲਬੇ ਤੋਂ ਬਚਿਆ ਜਾ ਸਕੇ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਜਦੋਂ ਗੇਮ ਵਸਤੂਆਂ ਇੱਕ-ਦੂਜੇ ਨਾਲ ਟਕਰਾਉਂਦੀਆਂ ਹਨ ਤਾਂ ਕਿਵੇਂ ਪਛਾਣ ਕਰਨੀ ਹੈ। ਅਸੀਂ ਇਸਨੂੰ ਛੋਟੇ-ਛੋਟੇ ਕਦਮਾਂ ਵਿੱਚ ਤੋੜਾਂਗੇ ਜੋ ਇੱਕ-ਦੂਜੇ 'ਤੇ ਅਧਾਰਿਤ ਹਨ।
 
-ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ ਲੜਾਈ ਪ੍ਰਣਾਲੀ ਹੋਵੇਗੀ ਜਿੱਥੇ ਲੇਜ਼ਰ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਨਸ਼ਟ ਕਰਦੇ ਹਨ ਅਤੇ ਟਕਰਾਅ ਗੇਮ ਘਟਨਾਵਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ। ਇਹੀ ਟਕਰਾਅ ਦੇ ਸਿਧਾਂਤ ਭੌਤਿਕੀ ਸਿਮੂਲੇਸ਼ਨ ਤੋਂ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਇੰਟਰਫੇਸ ਤੱਕ ਹਰ ਚੀਜ਼ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।
+ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ ਲੜਾਈ ਪ੍ਰਣਾਲੀ ਹੋਵੇਗੀ ਜਿੱਥੇ ਲੇਜ਼ਰ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਨਸ਼ਟ ਕਰਦੇ ਹਨ ਅਤੇ ਟਕਰਾਅ ਗੇਮ ਇਵੈਂਟਸ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦੇ ਹਨ। ਇਹੀ ਟਕਰਾਅ ਦੇ ਸਿਧਾਂਤ ਫਿਜ਼ਿਕਸ ਸਿਮੂਲੇਸ਼ਨ ਤੋਂ ਲੈ ਕੇ ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਇੰਟਰਫੇਸ ਤੱਕ ਹਰ ਚੀਜ਼ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।
 
-✅ ਸਭ ਤੋਂ ਪਹਿਲੀ ਕੰਪਿਊਟਰ ਗੇਮ ਬਾਰੇ ਕੁਝ ਖੋਜ ਕਰੋ ਜੋ ਕਦੇ ਲਿਖੀ ਗਈ ਸੀ। ਇਸ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਕੀ ਸੀ?
+✅ ਪਹਿਲੇ ਕੰਪਿਊਟਰ ਗੇਮ ਬਾਰੇ ਕੁਝ ਖੋਜ ਕਰੋ ਜੋ ਕਦੇ ਲਿਖਿਆ ਗਿਆ ਸੀ। ਇਸ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਕੀ ਸੀ?
 
-## ਟਕਰਾਅ ਦਾ ਪਤਾ ਲਗਾਉਣਾ
+## ਟਕਰਾਅ ਦੀ ਪਛਾਣ
 
-ਟਕਰਾਅ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਅਪੋਲੋ ਲੂਨਰ ਮੋਡਿਊਲ ਦੇ ਨਜ਼ਦੀਕੀ ਸੈਂਸਰਾਂ ਵਾਂਗ ਕੰਮ ਕਰਦਾ ਹੈ - ਇਹ ਲਗਾਤਾਰ ਦੂਰੀਆਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ ਅਤੇ ਜਦੋਂ ਵਸਤੂਆਂ ਬਹੁਤ ਨੇੜੇ ਆ ਜਾਂਦੀਆਂ ਹਨ ਤਾਂ ਚੇਤਾਵਨੀ ਦਿੰਦਾ ਹੈ। ਗੇਮਾਂ ਵਿੱਚ, ਇਹ ਪ੍ਰਣਾਲੀ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦੀ ਹੈ ਕਿ ਜਦੋਂ ਵਸਤੂਆਂ ਅੰਤਰਕ੍ਰਿਆ ਕਰਦੀਆਂ ਹਨ ਅਤੇ ਅਗਲਾ ਕੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
+ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਅਪੋਲੋ ਲੂਨਰ ਮੋਡਿਊਲ ਦੇ ਨਜ਼ਦੀਕੀ ਸੈਂਸਰਾਂ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ - ਇਹ ਲਗਾਤਾਰ ਦੂਰੀਆਂ ਦੀ ਜਾਂਚ ਕਰਦੀ ਹੈ ਅਤੇ ਜਦੋਂ ਵਸਤੂਆਂ ਬਹੁਤ ਨੇੜੇ ਆ ਜਾਂਦੀਆਂ ਹਨ ਤਾਂ ਚੇਤਾਵਨੀ ਦਿੰਦੀ ਹੈ। ਗੇਮਾਂ ਵਿੱਚ, ਇਹ ਪ੍ਰਣਾਲੀ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦੀ ਹੈ ਕਿ ਜਦੋਂ ਵਸਤੂਆਂ ਸੰਪਰਕ ਕਰਦੀਆਂ ਹਨ ਤਾਂ ਕੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
 
-ਜੋ ਪਹੁੰਚ ਅਸੀਂ ਵਰਤਾਂਗੇ ਉਹ ਹਰ ਗੇਮ ਵਸਤੂ ਨੂੰ ਇੱਕ ਆਯਤਾਕਾਰ ਵਾਂਗ ਮੰਨਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਹਵਾ ਟ੍ਰੈਫਿਕ ਕੰਟਰੋਲ ਪ੍ਰਣਾਲੀਆਂ ਜਹਾਜ਼ਾਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਲਈ ਸਰਲ ਜਿਓਮੈਟ੍ਰਿਕ ਆਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਆਯਤਾਕਾਰ ਵਿਧੀ ਬੁਨਿਆਦੀ ਲੱਗ ਸਕਦੀ ਹੈ, ਪਰ ਇਹ ਗਣਨਾਤਮਕ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਗੇਮ ਸਥਿਤੀਆਂ ਲਈ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ।
+ਜੋ ਪਹੁੰਚ ਅਸੀਂ ਵਰਤਾਂਗੇ ਉਹ ਹਰ ਗੇਮ ਵਸਤੂ ਨੂੰ ਇੱਕ ਆਯਤਕਾਰ ਵਜੋਂ ਮੰਨਦੀ ਹੈ, ਜਿਵੇਂ ਹਵਾਈ ਟ੍ਰੈਫਿਕ ਕੰਟਰੋਲ ਪ੍ਰਣਾਲੀਆਂ ਸਧਾਰਨ ਜਿਓਮੈਟ੍ਰਿਕ ਸ਼ੇਪਾਂ ਨੂੰ ਵਰਤਦੀਆਂ ਹਨ ਜਹਾਜ਼ਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਲਈ। ਇਹ ਆਯਤਕਾਰ ਵਿਧੀ ਬੁਨਿਆਦੀ ਲੱਗ ਸਕਦੀ ਹੈ, ਪਰ ਇਹ ਗਣਨਾਤਮਕ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਗੇਮ ਸਥਿਤੀਆਂ ਲਈ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ।
 
-### ਆਯਤਾਕਾਰ ਪ੍ਰਤੀਨਿਧਤਾ
+### ਆਯਤਕਾਰ ਪ੍ਰਤੀਨਿਧਤਾ
 
-ਹਰ ਗੇਮ ਵਸਤੂ ਨੂੰ ਕੋਆਰਡੀਨੇਟ ਬਾਊਂਡਰੀਜ਼ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਮਾਰਸ ਪਾਥਫਾਈਂਡਰ ਰੋਵਰ ਨੇ ਮੰਗਲ ਗ੍ਰਹਿ ਦੀ ਸਤਹ 'ਤੇ ਆਪਣਾ ਸਥਾਨ ਨਕਸ਼ੇ ਵਿੱਚ ਦਰਸਾਇਆ। ਇੱਥੇ ਹੈ ਕਿ ਅਸੀਂ ਇਹ ਬਾਊਂਡਰੀ ਕੋਆਰਡੀਨੇਟਸ ਕਿਵੇਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਾਂ:
+ਹਰ ਗੇਮ ਵਸਤੂ ਨੂੰ ਕੋਆਰਡੀਨੇਟ ਬਾਊਂਡਰੀਜ਼ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਜਿਵੇਂ ਮਾਰਸ ਪਾਥਫਾਈਂਡਰ ਰੋਵਰ ਨੇ ਮਾਰਸ ਦੀ ਸਤਹ 'ਤੇ ਆਪਣਾ ਸਥਾਨ ਮੈਪ ਕੀਤਾ। ਇੱਥੇ ਅਸੀਂ ਇਹ ਬਾਊਂਡਰੀ ਕੋਆਰਡੀਨੇਟਸ ਕਿਵੇਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਾਂ:
 
-```javascript
-rectFromGameObject() {
-  return {
-    top: this.y,
-    left: this.x,
-    bottom: this.y + this.height,
-    right: this.x + this.width
-  }
-}
-```
-
-**ਇਸ ਨੂੰ ਤੋੜ ਕੇ ਵੇਖਦੇ ਹਾਂ:**
-- **ਉੱਪਰੀ ਕਿਨਾਰਾ**: ਇਹ ਸਿਰਫ ਜਿੱਥੇ ਤੁਹਾਡੀ ਵਸਤੂ ਲੰਬਵਾਰ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ (ਇਸ ਦਾ y ਸਥਾਨ)
-- **ਖੱਬਾ ਕਿਨਾਰਾ**: ਜਿੱਥੇ ਇਹ ਆੜ੍ਹਤ ਵਿੱਚ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ (ਇਸ ਦਾ x ਸਥਾਨ)
+**ਇਸਨੂੰ ਤੋੜ ਕੇ ਸਮਝੋ:**
+- **ਉੱਪਰੀ ਕਿਨਾਰਾ**: ਜਿੱਥੇ ਤੁਹਾਡੀ ਵਸਤੂ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ (ਇਸ ਦਾ y ਸਥਾਨ)
+- **ਖੱਬਾ ਕਿਨਾਰਾ**: ਜਿੱਥੇ ਇਹ ਆੜ੍ਹਕ ਤੌਰ 'ਤੇ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ (ਇਸ ਦਾ x ਸਥਾਨ)
 - **ਹੇਠਲਾ ਕਿਨਾਰਾ**: y ਸਥਾਨ ਵਿੱਚ ਉਚਾਈ ਸ਼ਾਮਲ ਕਰੋ - ਹੁਣ ਤੁਹਾਨੂੰ ਪਤਾ ਹੈ ਕਿ ਇਹ ਕਿੱਥੇ ਖਤਮ ਹੁੰਦੀ ਹੈ!
 - **ਸੱਜਾ ਕਿਨਾਰਾ**: ਚੌੜਾਈ ਨੂੰ x ਸਥਾਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ - ਅਤੇ ਤੁਹਾਡੇ ਕੋਲ ਪੂਰੀ ਬਾਊਂਡਰੀ ਹੈ
 
-### ਇੰਟਰਸੈਕਸ਼ਨ ਐਲਗੋਰਿਥਮ
+### ਇੰਟਰਸੈਕਸ਼ਨ ਐਲਗੋਰਿਦਮ
 
-ਆਯਤਾਕਾਰ ਇੰਟਰਸੈਕਸ਼ਨ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਉਸ ਤਰ੍ਹਾਂ ਦੇ ਤਰਕ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਹਬਲ ਸਪੇਸ ਟੈਲੀਸਕੋਪ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਇਸਦੇ ਖੇਤਰ ਵਿੱਚ ਆਕਾਸ਼ੀ ਵਸਤੂਆਂ ਇੱਕ-ਦੂਜੇ ਨਾਲ ਓਵਰਲੈਪ ਕਰ ਰਹੀਆਂ ਹਨ। ਐਲਗੋਰਿਥਮ ਵੱਖਰੇ ਹੋਣ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ:
+ਆਯਤਕਾਰ ਇੰਟਰਸੈਕਸ਼ਨ ਦੀ ਪਛਾਣ ਕਰਨ ਲਈ ਤਰਕ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਿਵੇਂ ਕਿ ਹਬਲ ਸਪੇਸ ਟੈਲੀਸਕੋਪ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਇਸਦੇ ਦ੍ਰਿਸ਼ਟੀ ਖੇਤਰ ਵਿੱਚ ਆਕਾਸ਼ੀ ਵਸਤੂਆਂ ਇੱਕ-ਦੂਜੇ ਨਾਲ ਓਵਰਲੈਪ ਕਰ ਰਹੀਆਂ ਹਨ। ਐਲਗੋਰਿਦਮ ਵੱਖਰੇ ਹੋਣ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ:
 
-```javascript
-function intersectRect(r1, r2) {
-  return !(r2.left > r1.right ||
-    r2.right < r1.left ||
-    r2.top > r1.bottom ||
-    r2.bottom < r1.top);
-}
-```
+**ਵੱਖਰੇ ਹੋਣ ਦੀ ਜਾਂਚ ਰੇਡਾਰ ਪ੍ਰਣਾਲੀਆਂ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ:**
+- ਕੀ ਆਯਤਕਾਰ 2 ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਯਤਕਾਰ 1 ਦੇ ਸੱਜੇ ਪਾਸੇ ਹੈ?
+- ਕੀ ਆਯਤਕਾਰ 2 ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਯਤਕਾਰ 1 ਦੇ ਖੱਬੇ ਪਾਸੇ ਹੈ?
+- ਕੀ ਆਯਤਕਾਰ 2 ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਯਤਕਾਰ 1 ਦੇ ਹੇਠਾਂ ਹੈ?
+- ਕੀ ਆਯਤਕਾਰ 2 ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਯਤਕਾਰ 1 ਦੇ ਉੱਪਰ ਹੈ?
 
-**ਵੱਖਰੇ ਹੋਣ ਦੀ ਜਾਂਚ ਰਡਾਰ ਪ੍ਰਣਾਲੀਆਂ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ:**
-- ਕੀ ਆਯਤਾਕਾਰ 2 ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਯਤਾਕਾਰ 1 ਦੇ ਸੱਜੇ ਪਾਸੇ ਹੈ?
-- ਕੀ ਆਯਤਾਕਾਰ 2 ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਯਤਾਕਾਰ 1 ਦੇ ਖੱਬੇ ਪਾਸੇ ਹੈ?
-- ਕੀ ਆਯਤਾਕਾਰ 2 ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਯਤਾਕਾਰ 1 ਦੇ ਹੇਠਾਂ ਹੈ?
-- ਕੀ ਆਯਤਾਕਾਰ 2 ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਯਤਾਕਾਰ 1 ਦੇ ਉੱਪਰ ਹੈ?
-
-ਜੇ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਸ਼ਰਤ ਸੱਚ ਨਹੀਂ ਹੈ, ਤਾਂ ਆਯਤਾਕਾਰਾਂ ਨੂੰ ਜ਼ਰੂਰ ਓਵਰਲੈਪ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ ਰਡਾਰ ਓਪਰੇਟਰ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ ਕਿ ਕੀ ਦੋ ਜਹਾਜ਼ ਸੁਰੱਖਿਅਤ ਦੂਰੀ 'ਤੇ ਹਨ।
+ਜੇ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਸ਼ਰਤ ਸੱਚ ਨਹੀਂ ਹੈ, ਤਾਂ ਆਯਤਕਾਰਾਂ ਨੂੰ ਜ਼ਰੂਰ ਓਵਰਲੈਪ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਰੇਡਾਰ ਓਪਰੇਟਰ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ ਕਿ ਕੀ ਦੋ ਜਹਾਜ਼ ਸੁਰੱਖਿਅਤ ਦੂਰੀ 'ਤੇ ਹਨ।
 
 ## ਵਸਤੂਆਂ ਦੇ ਜੀਵਨ ਚੱਕਰ ਦਾ ਪ੍ਰਬੰਧਨ
 
-ਜਦੋਂ ਲੇਜ਼ਰ ਦੁਸ਼ਮਨ ਨੂੰ ਹਿੱਟ ਕਰਦਾ ਹੈ, ਦੋਵਾਂ ਵਸਤੂਆਂ ਨੂੰ ਗੇਮ ਤੋਂ ਹਟਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਹਾਲਾਂਕਿ, ਮਿਡ-ਲੂਪ ਵਿੱਚ ਵਸਤੂਆਂ ਨੂੰ ਮਿਟਾਉਣਾ ਕਰੈਸ਼ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ - ਅਪੋਲੋ ਗਾਈਡੈਂਸ ਕੰਪਿਊਟਰ ਵਰਗੇ ਪੁਰਾਣੇ ਕੰਪਿਊਟਰ ਸਿਸਟਮਾਂ ਵਿੱਚ ਸਿੱਖਿਆ ਗਿਆ ਸਬਕ। ਇਸ ਦੀ ਬਜਾਏ, ਅਸੀਂ "ਮਿਟਾਉਣ ਲਈ ਚਿੰਨ੍ਹ" ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਜੋ ਫਰੇਮਾਂ ਦੇ ਵਿਚਕਾਰ ਵਸਤੂਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤੌਰ 'ਤੇ ਹਟਾਉਂਦੀ ਹੈ।
-
-ਇਹ ਹੈ ਕਿ ਅਸੀਂ ਕੁਝ ਮਿਟਾਉਣ ਲਈ ਕਿਵੇਂ ਚਿੰਨ੍ਹਿਤ ਕਰਦੇ ਹਾਂ:
-
-```javascript
-// Mark object for removal
-enemy.dead = true;
-```
+ਜਦੋਂ ਲੇਜ਼ਰ ਦੁਸ਼ਮਨ ਨੂੰ ਹਿੱਟ ਕਰਦਾ ਹੈ, ਦੋਵਾਂ ਵਸਤੂਆਂ ਨੂੰ ਗੇਮ ਤੋਂ ਹਟਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਹਾਲਾਂਕਿ, ਮਿਡ-ਲੂਪ ਵਿੱਚ ਵਸਤੂਆਂ ਨੂੰ ਮਿਟਾਉਣਾ ਕਰੈਸ਼ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ - ਜਿਵੇਂ ਅਪੋਲੋ ਗਾਈਡੈਂਸ ਕੰਪਿਊਟਰ ਵਰਗੇ ਪੁਰਾਣੇ ਕੰਪਿਊਟਰ ਸਿਸਟਮਾਂ ਵਿੱਚ ਸਿੱਖਿਆ ਗਿਆ। ਇਸ ਦੀ ਬਜਾਏ, ਅਸੀਂ "ਮਿਟਾਉਣ ਲਈ ਚਿੰਨ੍ਹਿਤ ਕਰੋ" ਪਹੁੰਚ ਵਰਤਦੇ ਹਾਂ ਜੋ ਫਰੇਮਾਂ ਦੇ ਵਿਚਕਾਰ ਵਸਤੂਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤੌਰ 'ਤੇ ਹਟਾਉਂਦੀ ਹੈ।
 
-**ਇਹ ਪਹੁੰਚ ਕਿਉਂ ਕੰਮ ਕਰਦੀ ਹੈ:**
-- ਅਸੀਂ ਵਸਤੂ ਨੂੰ "ਮਰਿਆ ਹੋਇਆ" ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਕਰਦੇ ਹਾਂ ਪਰ ਇਸਨੂੰ ਤੁਰੰਤ ਮਿਟਾਉਂਦੇ ਨਹੀਂ
+**ਇਸ ਪਹੁੰਚ ਦਾ ਕਾਰਨ ਕੰਮ ਕਰਦਾ ਹੈ:**
+- ਅਸੀਂ ਵਸਤੂ ਨੂੰ "ਮਰਿਆ ਹੋਇਆ" ਚਿੰਨ੍ਹਿਤ ਕਰਦੇ ਹਾਂ ਪਰ ਇਸਨੂੰ ਤੁਰੰਤ ਮਿਟਾਉਂਦੇ ਨਹੀਂ
 - ਇਹ ਮੌਜੂਦਾ ਗੇਮ ਫਰੇਮ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤੌਰ 'ਤੇ ਖਤਮ ਕਰਨ ਦਿੰਦਾ ਹੈ
-- ਕੁਝ ਮਿਟ ਚੁੱਕੇ ਚੀਜ਼ਾਂ ਨੂੰ ਵਰਤਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਤੋਂ ਕੋਈ ਕਰੈਸ਼ ਨਹੀਂ!
+- ਕੋਈ ਕਰੈਸ਼ ਨਹੀਂ ਹੁੰਦੇ ਜਦੋਂ ਕੁਝ ਵਰਤਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜੋ ਪਹਿਲਾਂ ਹੀ ਮਿਟਾਇਆ ਜਾ ਚੁੱਕਾ ਹੈ!
 
-ਫਿਰ ਅਗਲੇ ਰੈਂਡਰ ਸਾਈਕਲ ਤੋਂ ਪਹਿਲਾਂ ਮਿਟਾਉਣ ਲਈ ਚਿੰਨ੍ਹਿਤ ਕੀਤੀਆਂ ਵਸਤੂਆਂ ਨੂੰ ਫਿਲਟਰ ਕਰੋ:
+ਫਿਰ ਅਗਲੇ ਰੈਂਡਰ ਸਾਈਕਲ ਤੋਂ ਪਹਿਲਾਂ ਮਿਟਾਏ ਗਏ ਵਸਤੂਆਂ ਨੂੰ ਫਿਲਟਰ ਕਰੋ:
 
-```javascript
-gameObjects = gameObjects.filter(go => !go.dead);
-```
-
-**ਇਹ ਫਿਲਟਰੀਂਗ ਕੀ ਕਰਦੀ ਹੈ:**
-- ਸਿਰਫ "ਜੀਵਤ" ਵਸਤੂਆਂ ਨਾਲ ਇੱਕ ਤਾਜ਼ਾ ਸੂਚੀ ਬਣਾਉਂਦੀ ਹੈ
-- ਕੁਝ ਵੀ ਮਰਿਆ ਹੋਇਆ ਚੁੱਕ ਕੇ ਬਾਹਰ ਸੁੱਟ ਦਿੰਦੀ ਹੈ
-- ਤੁਹਾਡੀ ਗੇਮ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤੌਰ 'ਤੇ ਚਲਾਉਂਦੀ ਹੈ
-- ਨਸ਼ਟ ਕੀਤੀਆਂ ਵਸਤੂਆਂ ਦੇ ਸੰਗ੍ਰਹਿ ਤੋਂ ਮੈਮੋਰੀ ਬਲੋਟ ਨੂੰ ਰੋਕਦੀ ਹੈ
+**ਇਹ ਫਿਲਟਰੀ ਕਰਦਾ ਹੈ:**
+- ਸਿਰਫ "ਜੀਵਤ" ਵਸਤੂਆਂ ਨਾਲ ਇੱਕ ਤਾਜ਼ਾ ਸੂਚੀ ਬਣਾਉਂਦਾ ਹੈ
+- ਕੁਝ ਵੀ ਮਰਿਆ ਹੋਇਆ ਚਿੰਨ੍ਹਿਤ ਕੀਤਾ ਹੋਇਆ ਬਾਹਰ ਸੁੱਟ ਦਿੰਦਾ ਹੈ
+- ਤੁਹਾਡੀ ਗੇਮ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤੌਰ 'ਤੇ ਚਲਾਉਂਦਾ ਹੈ
+- ਮਿਟਾਈਆਂ ਗਈਆਂ ਵਸਤੂਆਂ ਦੇ ਸੰਚਿਤ ਹੋਣ ਤੋਂ ਮੈਮੋਰੀ ਬਲੋਟ ਨੂੰ ਰੋਕਦਾ ਹੈ
 
-## ਲੇਜ਼ਰ ਮਕੈਨਿਕਸ ਲਾਗੂ ਕਰਨਾ
+## ਲੇਜ਼ਰ ਮਕੈਨਿਕਸ ਨੂੰ ਲਾਗੂ ਕਰਨਾ
 
-ਗੇਮਾਂ ਵਿੱਚ ਲੇਜ਼ਰ ਪ੍ਰੋਜੈਕਟਾਈਲਜ਼ ਸਟਾਰ ਟ੍ਰੈਕ ਵਿੱਚ ਫੋਟੋਨ ਟੋਰਪੀਡੋਜ਼ ਦੇ ਸਮਾਨ ਸਿਧਾਂਤ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ - ਇਹ ਵੱਖਰੀਆਂ ਵਸਤੂਆਂ ਹਨ ਜੋ ਸਿੱਧੇ ਰਸਤੇ ਵਿੱਚ ਚਲਦੀਆਂ ਹਨ ਜਦੋਂ ਤੱਕ ਇਹ ਕੁਝ ਹਿੱਟ ਨਹੀਂ ਕਰਦੀਆਂ। ਹਰ ਸਪੇਸਬਾਰ ਦਬਾਉਣ ਨਾਲ ਇੱਕ ਨਵਾਂ ਲੇਜ਼ਰ ਵਸਤੂ ਬਣਦਾ ਹੈ ਜੋ ਸਕ੍ਰੀਨ 'ਤੇ ਚਲਦਾ ਹੈ।
+ਗੇਮਾਂ ਵਿੱਚ ਲੇਜ਼ਰ ਪ੍ਰੋਜੈਕਟਾਈਲਜ਼ ਸਟਾਰ ਟ੍ਰੈਕ ਵਿੱਚ ਫੋਟੋਨ ਟੋਰਪੀਡੋਜ਼ ਦੇ ਇੱਕੋ ਹੀ ਸਿਧਾਂਤ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ - ਇਹ ਵੱਖਰੀਆਂ ਵਸਤੂਆਂ ਹਨ ਜੋ ਸਿੱਧੇ ਲਾਈਨਾਂ ਵਿੱਚ ਯਾਤਰਾ ਕਰਦੀਆਂ ਹਨ ਜਦੋਂ ਤੱਕ ਇਹ ਕੁਝ ਹਿੱਟ ਨਹੀਂ ਕਰਦੀਆਂ। ਹਰ ਸਪੇਸਬਾਰ ਦਬਾਉਣ ਨਾਲ ਇੱਕ ਨਵਾਂ ਲੇਜ਼ਰ ਵਸਤੂ ਬਣਦਾ ਹੈ ਜੋ ਸਕ੍ਰੀਨ 'ਤੇ ਚਲਦਾ ਹੈ।
 
-ਇਸਨੂੰ ਕੰਮ ਕਰਨ ਲਈ, ਸਾਨੂੰ ਕੁਝ ਵੱਖਰੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਸਹਿ-ਸੰਯੋਜਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:
+ਇਸਨੂੰ ਕੰਮ ਕਰਨ ਲਈ, ਸਾਨੂੰ ਕੁਝ ਵੱਖਰੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਸਹਿ-ਸੰਚਾਲਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:
 
 **ਲਾਗੂ ਕਰਨ ਲਈ ਮੁੱਖ ਹਿੱਸੇ:**
 - **ਬਣਾਉਣਾ** ਲੇਜ਼ਰ ਵਸਤੂਆਂ ਜੋ ਹੀਰੋ ਦੇ ਸਥਾਨ ਤੋਂ ਜਨਮ ਲੈਂਦੀਆਂ ਹਨ
-- **ਹੈਂਡਲ** ਕੀਬੋਰਡ ਇਨਪੁਟ ਲੇਜ਼ਰ ਬਣਾਉਣ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ
-- **ਪ੍ਰਬੰਧਨ** ਲੇਜ਼ਰ ਦੀ ਚਾਲ ਅਤੇ ਜੀਵਨ ਚੱਕਰ
-- **ਲਾਗੂ** ਲੇਜ਼ਰ ਪ੍ਰੋਜੈਕਟਾਈਲਜ਼ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਪ੍ਰਤੀਨਿਧਤਾ
+- **ਹੈਂਡਲ ਕਰਨਾ** ਕੀਬੋਰਡ ਇਨਪੁਟ ਲੇਜ਼ਰ ਬਣਾਉਣ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਲਈ
+- **ਪ੍ਰਬੰਧਨ** ਲੇਜ਼ਰ ਦੀ ਮੋਸ਼ਨ ਅਤੇ ਜੀਵਨ ਚੱਕਰ
+- **ਲਾਗੂ ਕਰਨਾ** ਲੇਜ਼ਰ ਪ੍ਰੋਜੈਕਟਾਈਲਜ਼ ਲਈ ਵਿਜ਼ੁਅਲ ਪ੍ਰਤੀਨਿਧਤਾ
 
 ## ਫਾਇਰਿੰਗ ਰੇਟ ਕੰਟਰੋਲ ਲਾਗੂ ਕਰਨਾ
 
-ਅਨਲਿਮਿਟਡ ਫਾਇਰਿੰਗ ਰੇਟ ਗੇਮ ਇੰਜਨ ਨੂੰ ਥੱਕਾ ਦੇਵੇਗਾ ਅਤੇ ਗੇਮਪਲੇ ਨੂੰ ਬਹੁਤ ਆਸਾਨ ਬਣਾ ਦੇਵੇਗਾ। ਅਸਲ ਹਥਿਆਰ ਪ੍ਰਣਾਲੀਆਂ ਨੂੰ ਇਸੇ ਤਰ੍ਹਾਂ ਦੀਆਂ ਪਾਬੰਦੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ - ਇੱਥੇ ਤੱਕ ਕਿ USS Enterprise ਦੇ ਫੇਜ਼ਰਜ਼ ਨੂੰ ਸ਼ਾਟਾਂ ਦੇ ਵਿਚਕਾਰ ਰੀਚਾਰਜ ਕਰਨ ਲਈ ਸਮਾਂ ਲੱਗਦਾ ਸੀ।
+ਅਨਲਿਮਿਟਡ ਫਾਇਰਿੰਗ ਰੇਟ ਗੇਮ ਇੰਜਨ ਨੂੰ ਥੱਕਾ ਦੇਵੇਗਾ ਅਤੇ ਗੇਮਪਲੇ ਨੂੰ ਬਹੁਤ ਆਸਾਨ ਬਣਾ ਦੇਵੇਗਾ। ਅਸਲ ਹਥਿਆਰ ਪ੍ਰਣਾਲੀਆਂ ਨੂੰ ਇਸੇ ਤਰ੍ਹਾਂ ਦੀਆਂ ਪਾਬੰਦੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ - ਇੱਥੋਂ ਤੱਕ ਕਿ USS ਐਂਟਰਪ੍ਰਾਈਜ਼ ਦੇ ਫੇਜ਼ਰਜ਼ ਨੂੰ ਵੀ ਸ਼ਾਟਾਂ ਦੇ ਵਿਚਕਾਰ ਰੀਚਾਰਜ ਕਰਨ ਦਾ ਸਮਾਂ ਲੱਗਦਾ ਸੀ।
 
-ਅਸੀਂ ਇੱਕ ਕੂਲਡਾਊਨ ਪ੍ਰਣਾਲੀ ਲਾਗੂ ਕਰਾਂਗੇ ਜੋ ਰੈਪਿਡ-ਫਾਇਰ ਸਪੈਮਿੰਗ ਨੂੰ ਰੋਕਦੀ ਹੈ ਜਦੋਂ ਕਿ ਸੰਵੇਦਨਸ਼ੀਲ ਕੰਟਰੋਲਾਂ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੀ ਹੈ:
-
-```javascript
-class Cooldown {
-  constructor(time) {
-    this.cool = false;
-    setTimeout(() => {
-      this.cool = true;
-    }, time);
-  }
-}
-
-class Weapon {
-  constructor() {
-    this.cooldown = null;
-  }
-  
-  fire() {
-    if (!this.cooldown || this.cooldown.cool) {
-      // Create laser projectile
-      this.cooldown = new Cooldown(500);
-    } else {
-      // Weapon is still cooling down
-    }
-  }
-}
-```
+ਅਸੀਂ ਇੱਕ ਕੂਲਡਾਊਨ ਪ੍ਰਣਾਲੀ ਲਾਗੂ ਕਰਾਂਗੇ ਜੋ ਰੈਪਿਡ-ਫਾਇਰ ਸਪੈਮਿੰਗ ਨੂੰ ਰੋਕਦੀ ਹੈ ਜਦੋਂ ਕਿ ਸੰਵੇਦਨਸ਼ੀਲ ਕੰਟਰੋਲਾਂ ਨੂੰ ਬਣਾਈ ਰੱਖਦੀ ਹੈ:
 
 **ਕੂਲਡਾਊਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:**
-- ਜਦੋਂ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ, ਹਥਿਆਰ "ਗਰਮ" ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ (ਅਜੇ ਤੱਕ ਫਾਇਰ ਨਹੀਂ ਕਰ ਸਕਦਾ)
-- ਟਾਈਮਆਉਟ ਪੀਰੀਅਡ ਤੋਂ ਬਾਅਦ, ਇਹ "ਠੰਡਾ" ਬਣ ਜਾਂਦਾ ਹੈ (ਫਾਇਰ ਕਰਨ ਲਈ ਤਿਆਰ)
-- ਫਾਇਰ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਅਸੀਂ ਜਾਂਚਦੇ ਹਾਂ: "ਕੀ ਹਥਿਆਰ ਠੰਡਾ ਹੈ?"
-- ਇਹ ਸਪੈਮ-ਕਲਿੱਕਿੰਗ ਨੂੰ ਰੋਕਦਾ ਹੈ ਜਦੋਂ ਕਿ ਕੰਟਰੋਲਾਂ ਨੂੰ ਸੰਵੇਦਨਸ਼ੀਲ ਰੱਖਦਾ ਹੈ
+- ਜਦੋਂ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ, ਹਥਿਆਰ "ਹੌਟ" ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ (ਅਜੇ ਤੱਕ ਫਾਇਰ ਨਹੀਂ ਕਰ ਸਕਦਾ)
+- ਟਾਈਮਆਉਟ ਪੀਰੀਅਡ ਤੋਂ ਬਾਅਦ, ਇਹ "ਕੂਲ" ਬਣ ਜਾਂਦਾ ਹੈ (ਫਾਇਰ ਕਰਨ ਲਈ ਤਿਆਰ)
+- ਫਾਇਰ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਅਸੀਂ ਜਾਂਚਦੇ ਹਾਂ: "ਕੀ ਹਥਿਆਰ ਕੂਲ ਹੈ?"
+- ਇਹ ਸਪੈਮ-ਕਲਿਕਿੰਗ ਨੂੰ ਰੋਕਦਾ ਹੈ ਜਦੋਂ ਕਿ ਕੰਟਰੋਲਾਂ ਨੂੰ ਸੰਵੇਦਨਸ਼ੀਲ ਬਣਾਈ ਰੱਖਦਾ ਹੈ
 
-✅ ਸਪੇਸ ਗੇਮ ਸੀਰੀਜ਼ ਦੇ ਪਾਠ 1 ਨੂੰ ਵੇਖੋ ਤਾਂ ਕਿ ਤੁਹਾਨੂੰ ਕੂਲਡਾਊਨਜ਼ ਬਾਰੇ ਯਾਦ ਆਵੇ।
+✅ ਸਪੇਸ ਗੇਮ ਸੀਰੀਜ਼ ਦੇ ਪਾਠ 1 ਨੂੰ ਵੇਖੋ ਤਾਂ ਕਿ ਕੂਲਡਾਊਨਜ਼ ਬਾਰੇ ਯਾਦ ਦਿਵਾਈ ਜਾ ਸਕੇ।
 
 ## ਟਕਰਾਅ ਪ੍ਰਣਾਲੀ ਬਣਾਉਣਾ
 
-ਤੁਸੀਂ ਆਪਣੀ ਮੌਜੂਦਾ ਸਪੇਸ ਗੇਮ ਕੋਡ ਨੂੰ ਵਧਾਉਂਦੇ ਹੋਏ ਇੱਕ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਦੀ ਪ੍ਰਣਾਲੀ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ। ਜਿਵੇਂ ਕਿ ਇੰਟਰਨੈਸ਼ਨਲ ਸਪੇਸ ਸਟੇਸ਼ਨ ਦੀ ਆਟੋਮੈਟਿਕ ਟਕਰਾਅ ਤੋਂ ਬਚਾਅ ਪ੍ਰਣਾਲੀ, ਤੁਹਾਡੀ ਗੇਮ ਲਗਾਤਾਰ ਵਸਤੂਆਂ ਦੇ ਸਥਾਨਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰੇਗੀ ਅਤੇ ਇੰਟਰਸੈਕਸ਼ਨਜ਼ ਦਾ ਜਵਾਬ ਦੇਵੇਗੀ।
+ਤੁਸੀਂ ਆਪਣੀ ਮੌਜੂਦਾ ਸਪੇਸ ਗੇਮ ਕੋਡ ਨੂੰ ਵਧਾਉਂਦੇ ਹੋਏ ਇੱਕ ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਪ੍ਰਣਾਲੀ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ। ਜਿਵੇਂ ਇੰਟਰਨੈਸ਼ਨਲ ਸਪੇਸ ਸਟੇਸ਼ਨ ਦੀ ਆਟੋਮੈਟਿਕ ਟਕਰਾਅ ਤੋਂ ਬਚਾਅ ਪ੍ਰਣਾਲੀ, ਤੁਹਾਡੀ ਗੇਮ ਲਗਾਤਾਰ ਵਸਤੂਆਂ ਦੇ ਸਥਾਨਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰੇਗੀ ਅਤੇ ਇੰਟਰਸੈਕਸ਼ਨਸ ਨੂੰ ਜਵਾਬ ਦੇਵੇਗੀ।
 
-ਤੁਹਾਡੇ ਪਿਛਲੇ ਪਾਠ ਦੇ ਕੋਡ ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ, ਤੁਸੀਂ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਨੂੰ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜਿਸ ਵਿੱਚ ਖਾਸ ਨਿਯਮ ਹੋਣਗੇ ਜੋ ਵਸਤੂਆਂ ਦੀ ਅੰਤਰਕ੍ਰਿਆ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ।
+ਪਿਛਲੇ ਪਾਠ ਦੇ ਕੋਡ ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ, ਤੁਸੀਂ ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜਿਸ ਵਿੱਚ ਵਸਤੂਆਂ ਦੇ ਪਰਸਪਰ ਸੰਪਰਕਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਵਾਲੇ ਵਿਸ਼ੇਸ਼ ਨਿਯਮ ਹਨ।
 
 > 💡 **ਪ੍ਰੋ ਟਿਪ**: ਲੇਜ਼ਰ ਸਪ੍ਰਾਈਟ ਪਹਿਲਾਂ ਹੀ ਤੁਹਾਡੇ ਐਸੈਟਸ ਫੋਲਡਰ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਦਰਸਾਇਆ ਗਿਆ ਹੈ, ਲਾਗੂ ਕਰਨ ਲਈ ਤਿਆਰ।
 
@@ -162,56 +105,177 @@ class Weapon {
 **ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਗੇਮ ਮਕੈਨਿਕਸ:**
 1. **ਲੇਜ਼ਰ ਦੁਸ਼ਮਨ ਨੂੰ ਹਿੱਟ ਕਰਦਾ ਹੈ**: ਜਦੋਂ ਲੇਜ਼ਰ ਪ੍ਰੋਜੈਕਟਾਈਲ ਦੁਆਰਾ ਹਿੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਦੁਸ਼ਮਨ ਵਸਤੂ ਨਸ਼ਟ ਹੋ ਜਾਂਦੀ ਹੈ
 2. **ਲੇਜ਼ਰ ਸਕ੍ਰੀਨ ਬਾਊਂਡਰੀ ਨੂੰ ਹਿੱਟ ਕਰਦਾ ਹੈ**: ਜਦੋਂ ਲੇਜ਼ਰ ਸਕ੍ਰੀਨ ਦੇ ਉੱਪਰੀ ਕਿਨਾਰੇ 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ ਤਾਂ ਇਸਨੂੰ ਹਟਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ
-3. **ਦੁਸ਼ਮਨ ਅਤੇ ਹੀਰੋ ਟਕਰਾਅ**: ਜਦੋਂ ਇਹ ਇੱਕ-ਦੂਜੇ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹਨ ਤਾਂ ਦੋਵਾਂ ਵਸਤੂਆਂ ਨਸ਼ਟ ਹੋ ਜਾਂਦੀਆਂ ਹਨ
+3. **ਦੁਸ਼ਮਨ ਅਤੇ ਹੀਰੋ ਟਕਰਾਅ**: ਜਦੋਂ ਦੋਵਾਂ ਵਸਤੂਆਂ ਇੱਕ-ਦੂਜੇ ਨਾਲ ਟਕਰਾਉਂਦੀਆਂ ਹਨ ਤਾਂ ਦੋਵਾਂ ਵਸਤੂਆਂ ਨਸ਼ਟ ਹੋ ਜਾਂਦੀਆਂ ਹਨ
 4. **ਦੁਸ਼ਮਨ ਹੇਠਾਂ ਪਹੁੰਚਦਾ ਹੈ**: ਜਦੋਂ ਦੁਸ਼ਮਨ ਸਕ੍ਰੀਨ ਦੇ ਹੇਠਲੇ ਹਿੱਸੇ 'ਤੇ ਪਹੁੰਚਦੇ ਹਨ ਤਾਂ ਗੇਮ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ
 
-## ਤੁਹਾਡੇ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਦੀ ਸੈਟਿੰਗ
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਦੀ ਬੁਨਿਆਦ**: ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ:
+- ✅ ਕਿਵੇਂ ਆਯਤਕਾਰ ਬਾਊਂਡਰੀਜ਼ ਟਕਰਾਅ ਜ਼ੋਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀਆਂ ਹਨ
+- ✅ ਕਿਉਂ ਵੱਖਰੇ ਹੋਣ ਦੀ ਜਾਂਚ ਇੰਟਰਸੈਕਸ਼ਨ ਗਣਨਾ ਨਾਲੋਂ ਜ਼ਿਆਦਾ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ
+- ✅ ਗੇਮ ਲੂਪ ਵਿੱਚ ਵਸਤੂਆਂ ਦੇ ਜੀਵਨ ਚੱਕਰ ਪ੍ਰਬੰਧਨ ਦੀ ਮਹੱਤਤਾ
+- ✅ ਕਿਵੇਂ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰਣਾਲੀਆਂ ਟਕਰਾਅ ਦੇ ਜਵਾਬਾਂ ਨੂੰ ਸਹਿ-ਸੰਚਾਲਿਤ ਕਰਦੀਆਂ ਹਨ
 
-ਚੰਗੀ ਖ਼ਬਰ - ਅਸੀਂ ਤੁਹਾਡੇ ਲਈ ਜ਼ਿਆਦਾਤਰ ਮੂਲ ਢਾਂਚਾ ਪਹਿਲਾਂ ਹੀ ਸੈਟ ਕਰ ਦਿੱਤਾ ਹੈ! ਤੁਹਾਡੇ ਸਾਰੇ ਗੇਮ ਐਸੈਟਸ ਅਤੇ ਬੁਨਿਆਦੀ ਢਾਂਚਾ `your-work` ਸਬਫੋਲਡਰ ਵਿੱਚ ਉਪਲਬਧ ਹਨ, ਜੋ ਕਿ ਤੁਹਾਡੇ ਲਈ ਸ਼ਾਨਦਾਰ ਟਕਰਾਅ ਫੀਚਰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਤਿਆਰ ਹੈ।
+**ਤੁਰੰਤ ਸਵਾਲ-ਜਵਾਬ**: ਜੇ ਤੁਸੀਂ ਵਸਤੂਆਂ ਨੂੰ ਤੁਰੰਤ ਮਿਟਾ ਦਿੰਦੇ ਤਾਂ ਕੀ ਹੁੰਦਾ?
+*ਜਵਾਬ: ਮਿਡ-ਲੂਪ ਮਿਟਾਉਣਾ ਕਰੈਸ਼ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ ਜਾਂ ਇਟਰੈਸ਼ਨ ਵਿੱਚ ਵਸਤੂਆਂ ਨੂੰ ਸਕਿਪ ਕਰ ਸਕਦਾ ਹੈ*
 
-### ਪ੍ਰੋਜੈਕਟ ਢਾਂਚਾ
+**ਭੌਤਿਕ ਵਿਗਿਆਨ ਦੀ ਸਮਝ**: ਹੁਣ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ:
+- **ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ**: ਕਿਵੇਂ ਸਥਾਨ ਅਤੇ ਮਾਪ ਬਾਊਂਡਰੀਜ਼ ਬਣਾਉਂਦੇ ਹਨ
+- **ਇੰਟਰਸੈਕਸ਼ਨ ਤਰਕ**: ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਦੇ ਪਿੱਛੇ ਗਣਿਤਕ ਸਿਧਾਂਤ
+- **ਪ੍ਰਦਰਸ਼ਨ ਦਾ ਅਧਿਕਤਮ ਉਪਯੋਗ**: ਰੀਅਲ-ਟਾਈਮ ਸਿਸਟਮਾਂ ਵਿੱਚ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਐਲਗੋਰਿਦਮ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹਨ
+- **ਮੈਮੋਰੀ ਪ੍ਰਬੰਧਨ**: ਸਥਿਰਤਾ ਲਈ ਸੁਰੱਖਿਅਤ ਵਸਤੂ ਜੀਵਨ ਚੱਕਰ ਪੈਟਰਨ
 
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
+## ਆਪਣਾ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਸੈਟ ਕਰਨਾ
+
+ਚੰਗੀ ਖ਼ਬਰ - ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਤੁਹਾਡੇ ਲਈ ਜ਼ਿਆਦਾਤਰ ਮੂਲ ਢਾਂਚਾ ਸੈਟ ਕਰ ਦਿੱਤਾ ਹੈ! ਤੁਹਾਡੇ ਸਾਰੇ ਗੇਮ ਐਸੈਟਸ ਅਤੇ ਬੁਨਿਆਦੀ ਬਣਤਰ `your-work` ਸਬਫੋਲਡਰ ਵਿੱਚ ਉਪਲਬਧ ਹਨ, ਜੋ ਕਿ ਤੁਹਾਡੇ ਲਈ ਸ਼ਾਨਦਾਰ ਟਕਰਾਅ ਫੀਚਰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਤਿਆਰ ਹਨ।
 
-**ਫਾਇਲ ਢਾਂਚਾ ਨੂੰ ਸਮਝਣਾ:**
+### ਪ੍ਰਾਜੈਕਟ ਢਾਂਚਾ
+
+**ਫਾਇਲ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ:**
 - **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਗੇਮ ਵਸਤੂਆਂ ਲਈ ਸਾਰੇ ਸਪ੍ਰਾਈਟ ਚਿੱਤਰ
 - **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਮੁੱਖ HTML ਦਸਤਾਵੇਜ਼ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਐਪਲੀਕੇਸ਼ਨ ਫਾਇਲ
-- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਸਥਾਨਕ ਵਿਕਾਸ ਸਰਵਰ ਲਈ ਪੈਕੇਜ ਸੰਰਚਨਾ
+- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਸਥਾਨਕ ਵਿਕਾਸ ਸਰਵਰ ਲਈ ਪੈਕੇਜ ਸੰਰਚਨਾ
 
 ### ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰਨਾ
 
-ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ ਜਾਓ ਅਤੇ ਸਥਾਨਕ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ:
-
-```bash
-cd your-work
-npm start
+ਆਪਣੇ ਪ੍ਰਾਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ ਜਾਓ
+- [ ] ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਟਕਰਾਅ ਦੀਆਂ ਘਟਨਾਵਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਲਈ `console.log` ਬਿਆਨ ਸ਼ਾਮਲ ਕਰੋ
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪੋਸਟ-ਪਾਠ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਦੇ ਅਲਗੋਰਿਥਮ ਨੂੰ ਸਮਝੋ
+- [ ] ਟਕਰਾਅ ਹੋਣ 'ਤੇ ਧਮਾਕਿਆਂ ਵਰਗੇ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਵੱਖ-ਵੱਖ ਗੁਣਾਂ ਵਾਲੇ ਪ੍ਰੋਜੈਕਟਾਈਲਜ਼ ਦੇ ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਨੂੰ ਲਾਗੂ ਕਰੋ
+- [ ] ਪਾਵਰ-ਅੱਪਸ ਬਣਾਓ ਜੋ ਖਿਡਾਰੀ ਦੀਆਂ ਯੋਗਤਾਵਾਂ ਨੂੰ ਅਸਥਾਈ ਤੌਰ 'ਤੇ ਵਧਾਉਂਦੇ ਹਨ
+- [ ] ਟਕਰਾਅ ਨੂੰ ਹੋਰ ਰੋਮਾਂਚਕ ਬਣਾਉਣ ਲਈ ਧੁਨੀਆਂ ਦੇ ਪ੍ਰਭਾਵ ਸ਼ਾਮਲ ਕਰੋ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਫਿਜ਼ਿਕਸ ਪ੍ਰੋਗਰਾਮਿੰਗ**
+- [ ] ਪੂਰੀ ਸਪੇਸ ਗੇਮ ਪੂਰੀ ਕਰੋ ਜਿਸ ਵਿੱਚ ਪਾਲਿਸ਼ ਕੀਤੇ ਟਕਰਾਅ ਸਿਸਟਮ ਹਨ
+- [ ] ਆਗੇ ਦੇ ਟਕਰਾਅ ਦੇ ਆਕਾਰ ਲਾਗੂ ਕਰੋ ਜਿਵੇਂ ਕਿ ਆਰਕਟੈਂਗਲ ਤੋਂ ਬਾਹਰ (ਗੋਲ, ਬਹੁਭੁਜ)
+- [ ] ਹਕੀਕਤੀ ਧਮਾਕੇ ਦੇ ਪ੍ਰਭਾਵਾਂ ਲਈ ਕਣ ਸਿਸਟਮ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਟਕਰਾਅ ਤੋਂ ਬਚਣ ਵਾਲੇ ਜਟਿਲ ਦੁਸ਼ਮਣ ਦੇ ਵਿਹਾਰ ਬਣਾਓ
+- [ ] ਬਹੁਤ ਸਾਰੇ ਆਬਜੈਕਟਾਂ ਨਾਲ ਬਿਹਤਰ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਓ
+- [ ] ਮੋਮੈਂਟਮ ਅਤੇ ਹਕੀਕਤੀ ਗਤੀਵਿਧੀ ਵਰਗੇ ਫਿਜ਼ਿਕਸ ਸਿਮੂਲੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ
+
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਗੇਮ ਫਿਜ਼ਿਕਸ ਮਾਹਰਤਾ**
+- [ ] ਅਗਰਗਾਮੀ ਫਿਜ਼ਿਕਸ ਇੰਜਨ ਅਤੇ ਹਕੀਕਤੀ ਸਿਮੂਲੇਸ਼ਨ ਨਾਲ ਗੇਮ ਬਣਾਓ
+- [ ] 3D ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਅਤੇ ਸਪੇਸ਼ਲ ਪਾਰਟੀਸ਼ਨਿੰਗ ਅਲਗੋਰਿਥਮ ਸਿੱਖੋ
+- [ ] ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਫਿਜ਼ਿਕਸ ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਗੇਮ ਇੰਜਨਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ
+- [ ] ਗ੍ਰਾਫਿਕਸ-ਗੰਭੀਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਪ੍ਰਦਰਸ਼ਨ ਅਨੁਕੂਲਤਾ ਵਿੱਚ ਮਾਹਰ ਬਣੋ
+- [ ] ਗੇਮ ਫਿਜ਼ਿਕਸ ਅਤੇ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਬਾਰੇ ਸਿੱਖਣ ਵਾਲਾ ਸਮੱਗਰੀ ਬਣਾਓ
+- [ ] ਅਗਰਗਾਮੀ ਫਿਜ਼ਿਕਸ ਪ੍ਰੋਗਰਾਮਿੰਗ ਯੋਗਤਾਵਾਂ ਨੂੰ ਦਰਸਾਉਣ ਵਾਲਾ ਪੋਰਟਫੋਲਿਓ ਬਣਾਓ
+
+## 🎯 ਤੁਹਾਡਾ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
+
+```mermaid
+timeline
+    title Collision Detection & Game Physics Learning Progression
+    
+    section Foundation (10 minutes)
+        Rectangle Math: Coordinate systems
+                      : Boundary calculations
+                      : Position tracking
+                      : Dimension management
+        
+    section Algorithm Design (20 minutes)
+        Intersection Logic: Separation testing
+                          : Overlap detection
+                          : Performance optimization
+                          : Edge case handling
+        
+    section Game Implementation (30 minutes)
+        Object Systems: Lifecycle management
+                      : Event coordination
+                      : State tracking
+                      : Memory cleanup
+        
+    section Interactive Features (40 minutes)
+        Combat Mechanics: Projectile systems
+                        : Weapon cooldowns
+                        : Damage calculation
+                        : Visual feedback
+        
+    section Advanced Physics (50 minutes)
+        Real-time Systems: Frame rate optimization
+                         : Spatial partitioning
+                         : Collision response
+                         : Physics simulation
+        
+    section Professional Techniques (1 week)
+        Game Engine Concepts: Component systems
+                             : Physics pipelines
+                             : Performance profiling
+                             : Cross-platform optimization
+        
+    section Industry Applications (1 month)
+        Production Skills: Large-scale optimization
+                         : Team collaboration
+                         : Engine development
+                         : Platform deployment
 ```
 
-**ਇਹ ਕਮਾਂਡ ਸੀਕਵੈਂਸ:**
-- **ਡਾਇਰੈਕਟਰੀ** ਨੂੰ ਤੁਹਾਡੇ ਕੰਮ ਕਰਨ ਵਾਲੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ ਬਦਲਦਾ ਹੈ
-- **ਸਥਾਨਕ HTTP ਸਰਵਰ** ਨੂੰ `http://localhost:5000` 'ਤੇ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ
-- **ਤੁਹਾਡੇ ਗੇਮ ਫਾਇਲਾਂ** ਨੂੰ ਟੈਸਟਿੰਗ ਅਤੇ ਵਿਕਾਸ ਲਈ ਸੇਵਾ ਦਿੰਦਾ ਹੈ
-- **ਲਾਈਵ ਵਿਕਾਸ** ਨੂੰ ਸਵੈਚਾਲਿਤ ਰੀਲੋਡਿੰਗ ਨਾਲ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ
+### 🛠️ ਤੁਹਾਡਾ ਗੇਮ ਫਿਜ਼ਿਕਸ ਟੂਲਕਿਟ ਸੰਖੇਪ
+
+ਇਸ ਪਾਠ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਮਾਹਰ ਬਣ ਗਏ ਹੋ:
+- **ਟਕਰਾਅ ਗਣਿਤ**: ਆਰਕਟੈਂਗਲ ਇੰਟਰਸੈਕਸ਼ਨ ਅਲਗੋਰਿਥਮ ਅਤੇ ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ
+- **ਪ੍ਰਦਰਸ਼ਨ ਅਨੁਕੂਲਤਾ**: ਰੀਅਲ-ਟਾਈਮ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਕੁਸ਼ਲ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ
+- **ਆਬਜੈਕਟ ਲਾਈਫਸਾਈਕਲ ਪ੍ਰਬੰਧਨ**: ਸੁਰੱਖਿਅਤ ਰਚਨਾ, ਅਪਡੇਟਿੰਗ, ਅਤੇ ਨਸ਼ਟ ਪੈਟਰਨ
+- **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਆਰਕੀਟੈਕਚਰ**: ਟਕਰਾਅ ਪ੍ਰਤੀਕ੍ਰਿਆ ਲਈ ਡਿਕਪਲਡ ਸਿਸਟਮ
+- **ਗੇਮ ਲੂਪ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਫਰੇਮ-ਅਧਾਰਤ ਫਿਜ਼ਿਕਸ ਅਪਡੇਟ ਅਤੇ ਰੈਂਡਰਿੰਗ ਕੋਆਰਡੀਨੇਸ਼ਨ
+- **ਇਨਪੁਟ ਸਿਸਟਮ**: ਦਰਸਨਯੋਗ ਕੰਟਰੋਲਾਂ ਨਾਲ ਦਰ ਅਨੁਕੂਲਤਾ ਅਤੇ ਫੀਡਬੈਕ
+- **ਮੇਮੋਰੀ ਪ੍ਰਬੰਧਨ**: ਕੁਸ਼ਲ ਆਬਜੈਕਟ ਪੂਲਿੰਗ ਅਤੇ ਸਾਫ਼-ਸੁਥਰੀ ਰਣਨੀਤੀਆਂ
+
+**ਅਸਲ-ਦੁਨੀਆ ਦੇ ਐਪਲੀਕੇਸ਼ਨ**: ਤੁਹਾਡੀਆਂ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਦੀਆਂ ਯੋਗਤਾਵਾਂ ਸਿੱਧੇ ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ:
+- **ਇੰਟਰਐਕਟਿਵ ਸਿਮੂਲੇਸ਼ਨ**: ਵਿਗਿਆਨਕ ਮਾਡਲਿੰਗ ਅਤੇ ਸਿੱਖਣ ਦੇ ਸਾਧਨ
+- **ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਡਿਜ਼ਾਈਨ**: ਡਰੈਗ-ਐਂਡ-ਡ੍ਰਾਪ ਇੰਟਰਐਕਸ਼ਨ ਅਤੇ ਟਚ ਪਤਾ ਲਗਾਉਣ
+- **ਡਾਟਾ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ**: ਇੰਟਰਐਕਟਿਵ ਚਾਰਟ ਅਤੇ ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਤੱਤ
+- **ਮੋਬਾਈਲ ਵਿਕਾਸ**: ਟਚ ਜੈਸਚਰ ਪਛਾਣ ਅਤੇ ਟਕਰਾਅ ਸੰਭਾਲ
+- **ਰੋਬੋਟਿਕਸ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਪਾਥ ਪਲੈਨਿੰਗ ਅਤੇ ਰੁਕਾਵਟਾਂ ਤੋਂ ਬਚਣ
+- **ਕੰਪਿਊਟਰ ਗ੍ਰਾਫਿਕਸ**: ਰੇ ਟ੍ਰੇਸਿੰਗ ਅਤੇ ਸਪੇਸ਼ਲ ਅਲਗੋਰਿਥਮ
+
+**ਪੇਸ਼ੇਵਰ ਯੋਗਤਾਵਾਂ ਪ੍ਰਾਪਤ ਕੀਤੀਆਂ**: ਹੁਣ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:
+- **ਡਿਜ਼ਾਈਨ** ਰੀਅਲ-ਟਾਈਮ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਲਈ ਕੁਸ਼ਲ ਅਲਗੋਰਿਥਮ
+- **ਲਾਗੂ** ਫਿਜ਼ਿਕਸ ਸਿਸਟਮ ਜੋ ਆਬਜੈਕਟ ਦੀ ਜਟਿਲਤਾ ਨਾਲ ਸਕੇਲ ਕਰਦੇ ਹਨ
+- **ਡਿਬੱਗ** ਗਣਿਤਕ ਸਿਧਾਂਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਟਿਲ ਇੰਟਰਐਕਸ਼ਨ ਸਿਸਟਮ
+- **ਅਨੁਕੂਲ** ਵੱਖ-ਵੱਖ ਹਾਰਡਵੇਅਰ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਯੋਗਤਾਵਾਂ ਲਈ ਪ੍ਰਦਰਸ਼ਨ
+- **ਆਰਕੀਟੈਕਟ** ਸਾਬਤ ਡਿਜ਼ਾਈਨ ਪੈਟਰਨ ਵਰਤ ਕੇ ਰੱਖਣਯੋਗ ਗੇਮ ਸਿਸਟਮ
+
+**ਗੇਮ ਵਿਕਾਸ ਸੰਕਲਪ ਮਾਹਰਤਾ**:
+- **ਫਿਜ਼ਿਕਸ ਸਿਮੂਲੇਸ਼ਨ**: ਰੀਅਲ-ਟਾਈਮ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ
+- **ਪ੍ਰਦਰਸ਼ਨ ਇੰਜੀਨੀਅਰਿੰਗ**: ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਅਨੁਕੂਲ ਅਲਗੋਰਿਥਮ
+- **ਇਵੈਂਟ ਸਿਸਟਮ**: ਗੇਮ ਦੇ ਘਟਕਾਂ ਵਿਚਕਾਰ ਡਿਕਪਲਡ ਸੰਚਾਰ
+- **ਆਬਜੈਕਟ ਪ੍ਰਬੰਧਨ**: ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਲਈ ਕੁਸ਼ਲ ਲਾਈਫਸਾਈਕਲ ਪੈਟਰਨ
+- **ਇਨਪੁਟ ਸੰਭਾਲ**: ਦਰਸਨਯੋਗ ਕੰਟਰੋਲਾਂ ਨਾਲ ਉਚਿਤ ਫੀਡਬੈਕ
+
+**ਅਗਲਾ ਪੱਧਰ**: ਤੁਸੀਂ Matter.js ਵਰਗੇ ਅਗਰਗਾਮੀ ਫਿਜ਼ਿਕਸ ਇੰਜਨਾਂ ਦੀ ਖੋਜ ਕਰਨ, 3D ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਨੂੰ ਲਾਗੂ ਕਰਨ, ਜਾਂ ਜਟਿਲ ਕਣ ਸਿਸਟਮ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ!
+
+🌟 **ਸਫਲਤਾ ਪ੍ਰਾਪਤ ਕੀਤੀ**: ਤੁਸੀਂ ਪੇਸ਼ੇਵਰ-ਗਰੇਡ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਨਾਲ ਪੂਰੀ ਫਿਜ਼ਿਕਸ-ਅਧਾਰਤ ਇੰਟਰਐਕਸ਼ਨ ਸਿਸਟਮ ਬਣਾਇਆ ਹੈ!
+
+## GitHub Copilot Agent Challenge 🚀
+
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
+
+**ਵੇਰਵਾ:** ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਸਿਸਟਮ ਨੂੰ ਵਧਾਉਣ ਲਈ ਪਾਵਰ-ਅੱਪਸ ਲਾਗੂ ਕਰੋ ਜੋ ਬੇਤਰਤੀਬੀ ਨਾਲ ਉਤਪੰਨ ਹੁੰਦੇ ਹਨ ਅਤੇ ਹੀਰੋ ਸ਼ਿਪ ਦੁਆਰਾ ਇਕੱਠੇ ਕੀਤੇ ਜਾਣ 'ਤੇ ਅਸਥਾਈ ਯੋਗਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
+
+**ਪ੍ਰੋੰਪਟ:** ਇੱਕ PowerUp ਕਲਾਸ ਬਣਾਓ ਜੋ GameObject ਨੂੰ ਵਧਾਉਂਦੀ ਹੈ ਅਤੇ ਹੀਰੋ ਅਤੇ ਪਾਵਰ-ਅੱਪਸ ਦੇ ਵਿਚਕਾਰ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਨੂੰ ਲਾਗੂ ਕਰਦੀ ਹੈ। ਘੱਟੋ-ਘੱਟ ਦੋ ਕਿਸਮਾਂ ਦੇ ਪਾਵਰ-ਅੱਪਸ ਸ਼ਾਮਲ ਕਰੋ: ਇੱਕ ਜੋ ਫਾਇਰ ਰੇਟ ਵਧਾਉਂਦਾ ਹੈ (ਕੂਲਡਾਊਨ ਘਟਾਉਂਦਾ ਹੈ) ਅਤੇ ਦੂਜਾ ਜੋ ਅਸਥਾਈ ਸ਼ੀਲਡ ਬਣਾਉਂਦਾ ਹੈ। ਬੇਤਰਤੀਬੀ ਅੰਤਰਾਲ ਅਤੇ ਸਥਿਤੀਆਂ 'ਤੇ ਪਾਵਰ-ਅੱਪਸ ਬਣਾਉਣ ਵਾਲੀ ਸਪੌਨ ਲਾਜ਼ਿਕ ਸ਼ਾਮਲ ਕਰੋ।
+
+---
+
+## 🚀 ਚੈਲੈਂਜ
+
+ਧਮਾਕਾ ਸ਼ਾਮਲ ਕਰੋ! [ਸਪੇਸ ਆਰਟ ਰੇਪੋ](../../../../6-space-game/solution/spaceArt/readme.txt) ਵਿੱਚ ਗੇਮ ਐਸੈਟਸ ਨੂੰ ਵੇਖੋ ਅਤੇ ਜਦੋਂ ਲੇਜ਼ਰ ਐਲੀਅਨ ਨੂੰ ਹਿੱਟ ਕਰਦਾ ਹੈ ਤਾਂ ਧਮਾਕਾ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ
+
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼
 
-ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਖੋਲ੍ਹੋ ਅਤੇ `http://localhost:5000` 'ਤੇ ਜਾਓ ਤਾਂ ਜੋ ਤੁਹਾਡੀ ਮੌਜੂਦਾ ਗੇਮ ਸਥਿਤੀ ਨੂੰ ਹੀਰੋ ਅਤੇ ਦੁਸ਼ਮਨਾਂ ਦੇ ਸਕ੍ਰੀਨ 'ਤੇ ਰੇਂਡਰ ਕੀਤਾ ਜਾ ਸਕੇ।
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/36)
 
-### ਕਦਮ-ਦਰ-ਕਦਮ ਲਾਗੂ ਕਰਨਾ
+## ਸਮੀਖਾ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
 
-ਜਿਵੇਂ ਕਿ NASA ਨੇ ਵੋਇਜਰ ਅੰਤਰਿਕਸ਼ ਜਹਾਜ਼ ਨੂੰ ਪ੍ਰੋਗਰਾਮ ਕਰਨ ਲਈ ਵਿਧਾਨਤਮਕ ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕੀਤੀ, ਅਸੀਂ ਟਕਰਾਅ ਪਤਾ ਲਗਾਉਣ ਨੂੰ ਵਿਧਾਨਤਮਕ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕਰਾਂਗੇ, ਹਰ ਹਿੱਸੇ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਬਣਾਉਂਦੇ ਹੋਏ।
+ਤੁਹਾਡੇ ਗੇਮ ਵਿੱਚ ਹੁਣ ਤੱਕ ਅੰਤਰਾਲਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ। ਜਦੋਂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਬਦਲਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ? [JavaScript ਟਾਈਮਿੰਗ ਇਵੈਂਟਸ](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ।
 
-#### 1. ਆਯਤਾਕਾਰ ਟਕਰਾਅ ਬਾਊਂਡਰੀ ਸ਼ਾਮਲ ਕਰੋ
+## ਅਸਾਈਨਮੈਂਟ
 
-ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ ਗੇਮ ਵਸਤੂਆਂ ਨੂੰ ਸਿਖਾਈਏ ਕਿ ਉਹ ਆਪਣੀਆਂ ਬਾਊਂਡਰੀਆਂ ਨੂੰ ਕਿਵੇਂ ਦਰਸਾਉਣ। ਆਪਣੇ `GameObject` ਕਲਾਸ ਵਿੱਚ ਇਹ ਵਿਧੀ ਸ਼ਾਮ
+[ਟਕਰਾਅ ਦੀ ਖੋਜ ਕਰੋ](assignment.md)
 
 ---
 
 **ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/6-space-game/5-keeping-score/README.md b/translations/pa/6-space-game/5-keeping-score/README.md
index 32f83eb3f7..083b462994 100644
--- a/translations/pa/6-space-game/5-keeping-score/README.md
+++ b/translations/pa/6-space-game/5-keeping-score/README.md
@@ -1,25 +1,92 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d642759cf1542f554871f74956a59af9",
-  "translation_date": "2025-10-22T18:12:40+00:00",
+  "original_hash": "2ed9145a16cf576faa2a973dff84d099",
+  "translation_date": "2025-11-03T16:58:05+00:00",
   "source_file": "6-space-game/5-keeping-score/README.md",
   "language_code": "pa"
 }
 -->
 # ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 5: ਸਕੋਰਿੰਗ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ
 
-## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
+```mermaid
+journey
+    title Your Game Design Journey
+    section Player Feedback
+      Understand scoring psychology: 3: Student
+      Learn visual communication: 4: Student
+      Design reward systems: 4: Student
+    section Technical Implementation
+      Canvas text rendering: 4: Student
+      State management: 5: Student
+      Event-driven updates: 5: Student
+    section Game Polish
+      User experience design: 5: Student
+      Balance challenge and reward: 5: Student
+      Create engaging gameplay: 5: Student
+```
 
-[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/37)
+## ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼
+
+[ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/37)
+
+ਤਿਆਰ ਹੋ ਜਾਓ ਆਪਣੀ ਸਪੇਸ ਗੇਮ ਨੂੰ ਇੱਕ ਅਸਲ ਗੇਮ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਨ ਲਈ? ਚਲੋ ਸਕੋਰਿੰਗ ਪੌਇੰਟਸ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰੀਏ - ਉਹ ਮੁੱਖ ਮਕੈਨਿਕਸ ਜਿਨ੍ਹਾਂ ਨੇ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਜਿਵੇਂ ਕਿ ਸਪੇਸ ਇਨਵੇਡਰਜ਼ ਨੂੰ ਸਧਾਰਨ ਡੈਮੋਨਸਟਰੇਸ਼ਨ ਤੋਂ ਨਸ਼ੇ ਵਾਲੇ ਮਨੋਰੰਜਨ ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ। ਇਹ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਤੁਹਾਡੀ ਗੇਮ ਸੱਚਮੁੱਚ ਖੇਡਣਯੋਗ ਬਣਦੀ ਹੈ।
+
+```mermaid
+mindmap
+  root((Game Feedback Systems))
+    Visual Communication
+      Text Rendering
+      Icon Display
+      Color Psychology
+      Layout Design
+    Scoring Mechanics
+      Point Values
+      Reward Timing
+      Progress Tracking
+      Achievement Systems
+    Life Management
+      Risk vs Reward
+      Player Agency
+      Difficulty Balance
+      Recovery Mechanics
+    User Experience
+      Immediate Feedback
+      Clear Information
+      Emotional Response
+      Engagement Loops
+    Implementation
+      Canvas API
+      State Management
+      Event Systems
+      Performance
+```
 
-ਤਿਆਰ ਹੋ ਜਾਓ ਆਪਣੀ ਸਪੇਸ ਗੇਮ ਨੂੰ ਇੱਕ ਅਸਲੀ ਗੇਮ ਬਣਾਉਣ ਲਈ? ਆਓ ਸਕੋਰਿੰਗ ਪੌਇੰਟਸ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰੀਏ - ਇਹ ਉਹ ਮੁੱਖ ਮਕੈਨਿਕਸ ਹਨ ਜਿਨ੍ਹਾਂ ਨੇ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਜਿਵੇਂ ਕਿ ਸਪੇਸ ਇਨਵੇਡਰਜ਼ ਨੂੰ ਸਧਾਰਣ ਡੈਮੋ ਤੋਂ ਨਸ਼ੇ ਦੀ ਤਰ੍ਹਾਂ ਖੇਡਣ ਵਾਲੇ ਮਨੋਰੰਜਨ ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ। ਇਹ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਤੁਹਾਡੀ ਗੇਮ ਸੱਚਮੁੱਚ ਖੇਡਣ ਯੋਗ ਬਣਦੀ ਹੈ।
+## ਸਕ੍ਰੀਨ 'ਤੇ ਟੈਕਸਟ ਡਰਾਇੰਗ - ਤੁਹਾਡੀ ਗੇਮ ਦੀ ਆਵਾਜ਼
 
-## ਸਕ੍ਰੀਨ 'ਤੇ ਟੈਕਸਟ ਡਰਾਅ ਕਰਨਾ - ਤੁਹਾਡੀ ਗੇਮ ਦੀ ਆਵਾਜ਼
+ਤੁਹਾਡਾ ਸਕੋਰ ਦਿਖਾਉਣ ਲਈ, ਸਾਨੂੰ ਕੈਨਵਾਸ 'ਤੇ ਟੈਕਸਟ ਰੈਂਡਰ ਕਰਨ ਦਾ ਤਰੀਕਾ ਸਿੱਖਣ ਦੀ ਲੋੜ ਹੈ। `fillText()` ਮੈਥਡ ਤੁਹਾਡਾ ਮੁੱਖ ਸਾਧਨ ਹੈ - ਇਹ ਉਹੀ ਤਕਨੀਕ ਹੈ ਜੋ ਕਲਾਸਿਕ ਆਰਕੇਡ ਗੇਮਾਂ ਵਿੱਚ ਸਕੋਰ ਅਤੇ ਸਥਿਤੀ ਦੀ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਸੀ।
 
-ਤੁਹਾਡਾ ਸਕੋਰ ਦਿਖਾਉਣ ਲਈ, ਸਾਨੂੰ ਕੈਨਵਸ 'ਤੇ ਟੈਕਸਟ ਰੈਂਡਰ ਕਰਨਾ ਸਿੱਖਣਾ ਪਵੇਗਾ। `fillText()` ਮੈਥਡ ਤੁਹਾਡਾ ਮੁੱਖ ਸਾਧਨ ਹੈ - ਇਹ ਉਹੀ ਤਕਨੀਕ ਹੈ ਜੋ ਕਲਾਸਿਕ ਆਰਕੇਡ ਗੇਮਾਂ ਵਿੱਚ ਸਕੋਰ ਅਤੇ ਸਥਿਤੀ ਦੀ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਸੀ।
+```mermaid
+flowchart LR
+    A["📝 Text Content"] --> B["🎨 Styling"]
+    B --> C["📍 Positioning"]
+    C --> D["🖼️ Canvas Render"]
+    
+    E["Font Family"] --> B
+    F["Font Size"] --> B
+    G["Color"] --> B
+    H["Alignment"] --> B
+    
+    I["X Coordinate"] --> C
+    J["Y Coordinate"] --> C
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
 
-ਤੁਹਾਨੂੰ ਟੈਕਸਟ ਦੀ ਦਿੱਖ 'ਤੇ ਪੂਰਾ ਕੰਟਰੋਲ ਹੈ:
+ਤੁਹਾਨੂੰ ਟੈਕਸਟ ਦੀ ਸ਼ਕਲ 'ਤੇ ਪੂਰਾ ਕੰਟਰੋਲ ਹੈ:
 
 ```javascript
 ctx.font = "30px Arial";
@@ -28,24 +95,76 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ [ਕੈਨਵਸ 'ਤੇ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕਰਨ](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) ਬਾਰੇ ਹੋਰ ਗਹਿਰਾਈ ਨਾਲ ਜਾਣੋ - ਤੁਸੀਂ ਫੌਂਟਸ ਅਤੇ ਸਟਾਈਲਿੰਗ ਨਾਲ ਕਿੰਨਾ ਰਚਨਾਤਮਕ ਹੋ ਸਕਦੇ ਹੋ, ਇਹ ਦੇਖ ਕੇ ਹੈਰਾਨ ਹੋ ਸਕਦੇ ਹੋ!
+✅ [ਕੈਨਵਾਸ 'ਤੇ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕਰਨ](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਡੁੱਬੋ - ਤੁਸੀਂ ਫੋਂਟਸ ਅਤੇ ਸਟਾਈਲਿੰਗ ਨਾਲ ਕਿੰਨਾ ਕ੍ਰੀਏਟਿਵ ਹੋ ਸਕਦੇ ਹੋ ਇਸ 'ਤੇ ਹੈਰਾਨ ਹੋ ਸਕਦੇ ਹੋ!
 
 ## ਜ਼ਿੰਦਗੀਆਂ - ਸਿਰਫ਼ ਇੱਕ ਗਿਣਤੀ ਤੋਂ ਵੱਧ
 
-ਗੇਮ ਡਿਜ਼ਾਈਨ ਵਿੱਚ, "ਜ਼ਿੰਦਗੀ" ਖਿਡਾਰੀ ਦੀ ਗਲਤੀ ਕਰਨ ਦੀ ਗੁੰਜਾਇਸ਼ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। ਇਹ ਧਾਰਨਾ ਪਿੰਬਾਲ ਮਸ਼ੀਨਾਂ ਤੋਂ ਆਈ ਹੈ, ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਖੇਡਣ ਲਈ ਕਈ ਗੇਂਦਾਂ ਮਿਲਦੀਆਂ ਸਨ। ਸ਼ੁਰੂਆਤੀ ਵੀਡੀਓ ਗੇਮਾਂ ਜਿਵੇਂ ਕਿ ਐਸਟਰੋਇਡਜ਼ ਵਿੱਚ, ਜ਼ਿੰਦਗੀਆਂ ਨੇ ਖਿਡਾਰੀਆਂ ਨੂੰ ਖਤਰਾ ਮੋਲ ਲੈਣ ਅਤੇ ਗਲਤੀਆਂ ਤੋਂ ਸਿੱਖਣ ਦੀ ਆਜ਼ਾਦੀ ਦਿੱਤੀ।
+ਗੇਮ ਡਿਜ਼ਾਈਨ ਵਿੱਚ, "ਜ਼ਿੰਦਗੀ" ਖਿਡਾਰੀ ਦੀ ਗਲਤੀ ਦੀ ਮਾਰਜਿਨ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। ਇਹ ਧਾਰਨਾ ਪਿਨਬਾਲ ਮਸ਼ੀਨਾਂ ਤੋਂ ਆਉਂਦੀ ਹੈ, ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਖੇਡਣ ਲਈ ਕਈ ਗੇਂਦਾਂ ਮਿਲਦੀਆਂ ਸਨ। ਸ਼ੁਰੂਆਤੀ ਵੀਡੀਓ ਗੇਮਾਂ ਜਿਵੇਂ ਕਿ ਐਸਟਰੋਇਡਜ਼ ਵਿੱਚ, ਜ਼ਿੰਦਗੀਆਂ ਨੇ ਖਿਡਾਰੀਆਂ ਨੂੰ ਜੋਖਮ ਲੈਣ ਅਤੇ ਗਲਤੀਆਂ ਤੋਂ ਸਿੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ।
 
-ਦ੍ਰਿਸ਼ਮਾਨ ਪ੍ਰਤੀਨਿਧਿਤਾ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੈ - ਸਿਰਫ "ਜ਼ਿੰਦਗੀਆਂ: 3" ਦੇ ਬਦਲੇ ਜਹਾਜ਼ ਦੇ ਆਈਕਾਨ ਦਿਖਾਉਣਾ ਤੁਰੰਤ ਦ੍ਰਿਸ਼ਮਾਨ ਪਛਾਣ ਪੈਦਾ ਕਰਦਾ ਹੈ, ਬਿਲਕੁਲ ਇਸੇ ਤਰ੍ਹਾਂ ਜਿਵੇਂ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਕੈਬਿਨੇਟਸ ਨੇ ਭਾਸ਼ਾ ਦੀਆਂ ਰੁਕਾਵਟਾਂ ਦੇ ਪਾਰ ਸੰਚਾਰ ਕਰਨ ਲਈ ਆਈਕਾਨੋਗ੍ਰਾਫੀ ਦੀ ਵਰਤੋਂ ਕੀਤੀ।
+```mermaid
+flowchart TD
+    A["🎮 Player Action"] --> B{"Risk Assessment"}
+    
+    B --> C["High Risk, High Reward"]
+    B --> D["Safe Strategy"]
+    
+    C --> E{"Outcome"}
+    D --> F["Steady Progress"]
+    
+    E -->|Success| G["🏆 Big Points"]
+    E -->|Failure| H["💔 Lose Life"]
+    
+    H --> I{"Lives Remaining?"}
+    I -->|Yes| J["🔄 Try Again"]
+    I -->|No| K["💀 Game Over"]
+    
+    J --> B
+    G --> B
+    F --> B
+    
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+    style G fill:#e3f2fd
+    style H fill:#fff3e0
+```
+
+ਦ੍ਰਿਸ਼ਮਾਨ ਪ੍ਰਤੀਨਿਧਤਾ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੈ - "Lives: 3" ਦੇ ਸਿਰਫ਼ ਦਿਖਾਉਣ ਦੀ ਬਜਾਏ ਜਹਾਜ਼ ਦੇ ਆਈਕਾਨ ਦਿਖਾਉਣਾ ਤੁਰੰਤ ਦ੍ਰਿਸ਼ਮਾਨ ਪਛਾਣ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਕੈਬਿਨਟਸ ਨੇ ਭਾਸ਼ਾ ਦੀਆਂ ਰੁਕਾਵਟਾਂ ਨੂੰ ਪਾਰ ਕਰਨ ਲਈ ਆਈਕੋਗ੍ਰਾਫੀ ਵਰਤੀ।
 
-## ਤੁਹਾਡੀ ਗੇਮ ਦੇ ਇਨਾਮ ਸਿਸਟਮ ਦਾ ਨਿਰਮਾਣ
+## ਤੁਹਾਡੀ ਗੇਮ ਦਾ ਰਿਵਾਰਡ ਸਿਸਟਮ ਬਣਾਉਣਾ
 
-ਹੁਣ ਅਸੀਂ ਮੁੱਖ ਫੀਡਬੈਕ ਸਿਸਟਮ ਲਾਗੂ ਕਰਾਂਗੇ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਜੋੜ ਕੇ ਰੱਖਦੇ ਹਨ:
+ਹੁਣ ਅਸੀਂ ਮੁੱਖ ਫੀਡਬੈਕ ਸਿਸਟਮ ਲਾਗੂ ਕਰਾਂਗੇ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਜੁੜੇ ਰੱਖਦੇ ਹਨ:
 
-- **ਸਕੋਰਿੰਗ ਸਿਸਟਮ**: ਹਰ ਤਬਾਹ ਕੀਤੇ ਗਏ ਦੁਸ਼ਮਣ ਜਹਾਜ਼ ਲਈ 100 ਪੌਇੰਟਸ ਮਿਲਦੇ ਹਨ (ਗੋਲ ਗਿਣਤੀਆਂ ਖਿਡਾਰੀਆਂ ਲਈ ਮਾਨਸਿਕ ਤੌਰ 'ਤੇ ਗਿਣਤੀ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦੀਆਂ ਹਨ)। ਸਕੋਰ ਨੀਵੇਂ ਖੱਬੇ ਕੋਨੇ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ।
-- **ਜ਼ਿੰਦਗੀ ਕਾਊਂਟਰ**: ਤੁਹਾਡਾ ਹੀਰੋ ਤਿੰਨ ਜ਼ਿੰਦਗੀਆਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ - ਇੱਕ ਮਿਆਰ ਜੋ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਦੁਆਰਾ ਚੁਣੌਤੀ ਅਤੇ ਖੇਡਣ ਯੋਗਤਾ ਦੇ ਸੰਤੁਲਨ ਲਈ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਸੀ। ਹਰ ਵਾਰ ਦੁਸ਼ਮਣ ਨਾਲ ਟਕਰਾਉਣ 'ਤੇ ਇੱਕ ਜ਼ਿੰਦਗੀ ਘਟਦੀ ਹੈ। ਬਾਕੀ ਜ਼ਿੰਦਗੀਆਂ ਨੂੰ ਜਹਾਜ਼ ਦੇ ਆਈਕਾਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨੀਵੇਂ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.pa.png)।
+```mermaid
+sequenceDiagram
+    participant Player
+    participant GameEngine
+    participant ScoreSystem
+    participant LifeSystem
+    participant Display
+    
+    Player->>GameEngine: Shoots Enemy
+    GameEngine->>ScoreSystem: Award Points
+    ScoreSystem->>ScoreSystem: +100 points
+    ScoreSystem->>Display: Update Score
+    
+    Player->>GameEngine: Collides with Enemy
+    GameEngine->>LifeSystem: Lose Life
+    LifeSystem->>LifeSystem: -1 life
+    LifeSystem->>Display: Update Lives
+    
+    alt Lives > 0
+        LifeSystem->>Player: Continue Playing
+    else Lives = 0
+        LifeSystem->>GameEngine: Game Over
+    end
+```
 
-## ਆਓ ਸ਼ੁਰੂ ਕਰੀਏ!
+- **ਸਕੋਰਿੰਗ ਸਿਸਟਮ**: ਹਰ ਤਬਾਹ ਕੀਤੇ ਗਏ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਲਈ 100 ਪੌਇੰਟਸ ਮਿਲਦੇ ਹਨ (ਗੋਲ ਗਿਣਤੀਆਂ ਖਿਡਾਰੀਆਂ ਲਈ ਮਾਨਸਿਕ ਤੌਰ 'ਤੇ ਗਿਣਤੀ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦੀਆਂ ਹਨ)। ਸਕੋਰ ਨੂੰ ਹੇਠਾਂ ਖੱਬੇ ਕੋਨੇ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ।
+- **ਲਾਈਫ ਕਾਊਂਟਰ**: ਤੁਹਾਡਾ ਹੀਰੋ ਤਿੰਨ ਜ਼ਿੰਦਗੀਆਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ - ਇੱਕ ਮਿਆਰ ਜੋ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਦੁਆਰਾ ਚੁਣੌਤੀ ਅਤੇ ਖੇਡਣਯੋਗਤਾ ਦੇ ਸੰਤੁਲਨ ਲਈ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ। ਹਰ ਵਾਰ ਦੁਸ਼ਮਨ ਨਾਲ ਟਕਰਾਉਣ 'ਤੇ ਇੱਕ ਜ਼ਿੰਦਗੀ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ। ਬਾਕੀ ਜ਼ਿੰਦਗੀਆਂ ਨੂੰ ਹੇਠਾਂ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਜਹਾਜ਼ ਦੇ ਆਈਕਾਨਾਂ ਨਾਲ ਦਿਖਾਇਆ ਜਾਵੇਗਾ ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.pa.png)।
 
-ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਆਪਣਾ ਵਰਕਸਪੇਸ ਸੈਟ ਕਰੋ। ਆਪਣੇ `your-work` ਸਬ ਫੋਲਡਰ ਵਿੱਚ ਫਾਈਲਾਂ 'ਤੇ ਜਾਓ। ਤੁਹਾਨੂੰ ਇਹ ਫਾਈਲਾਂ ਵੇਖਣ ਨੂੰ ਮਿਲਣਗੀਆਂ:
+## ਚਲੋ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੀਏ!
+
+ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਆਪਣਾ ਵਰਕਸਪੇਸ ਸੈਟ ਕਰੋ। ਆਪਣੀ `your-work` ਸਬ ਫੋਲਡਰ ਵਿੱਚ ਫਾਈਲਾਂ ਨੂੰ ਖੋਲ੍ਹੋ। ਤੁਹਾਨੂੰ ਇਹ ਫਾਈਲਾਂ ਦਿਖਾਈ ਦੇਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ:
 
 ```bash
 -| assets
@@ -57,18 +176,44 @@ ctx.fillText("show this on the screen", 0, 0);
 -| package.json
 ```
 
-ਆਪਣੀ ਗੇਮ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ, `your_work` ਫੋਲਡਰ ਤੋਂ ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਚਲਾਓ:
+ਤੁਹਾਡੀ ਗੇਮ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ, `your_work` ਫੋਲਡਰ ਤੋਂ ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ:
 
 ```bash
 cd your-work
 npm start
 ```
 
-ਇਹ ਇੱਕ ਲੋਕਲ ਸਰਵਰ ਨੂੰ `http://localhost:5000` 'ਤੇ ਚਲਾਉਂਦਾ ਹੈ। ਇਸ ਪਤੇ ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਆਪਣੀ ਗੇਮ ਵੇਖੋ। ਐਰੋ ਕੀਜ਼ ਨਾਲ ਕੰਟਰੋਲ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ ਇਹ ਪੱਕਾ ਕਰੋ ਕਿ ਸਭ ਕੁਝ ਸਹੀ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ।
+ਇਹ ਇੱਕ ਲੋਕਲ ਸਰਵਰ ਨੂੰ `http://localhost:5000` 'ਤੇ ਚਲਾਉਂਦਾ ਹੈ। ਆਪਣੀ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇਸ ਪਤੇ ਨੂੰ ਖੋਲ੍ਹੋ ਅਤੇ ਆਪਣੀ ਗੇਮ ਦੇਖੋ। ਐਰੋ ਕੀਜ਼ ਨਾਲ ਕੰਟਰੋਲ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ ਸਭ ਕੁਝ ਸਹੀ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ ਜਾਂ ਨਹੀਂ ਇਹ ਵੇਖਣ ਲਈ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਗੋਲੀ ਮਾਰਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
 
-### ਕੋਡ ਲਿਖਣ ਦਾ ਸਮਾਂ!
+```mermaid
+flowchart TD
+    A["1. Asset Loading"] --> B["2. Game Variables"]
+    B --> C["3. Collision Detection"]
+    C --> D["4. Hero Enhancement"]
+    D --> E["5. Display Functions"]
+    E --> F["6. Event Handlers"]
+    
+    G["Life Icon Image"] --> A
+    H["Score & Lives Tracking"] --> B
+    I["Hero-Enemy Intersections"] --> C
+    J["Points & Life Methods"] --> D
+    K["Text & Icon Rendering"] --> E
+    L["Reward & Penalty Logic"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
-1. **ਉਹ ਦ੍ਰਿਸ਼ਮਾਨ ਐਸੈਟਸ ਪ੍ਰਾਪਤ ਕਰੋ ਜਿਨ੍ਹਾਂ ਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ**। `solution/assets/` ਫੋਲਡਰ ਤੋਂ `life.png` ਐਸੈਟ ਨੂੰ ਕਾਪੀ ਕਰਕੇ ਆਪਣੇ `your-work` ਫੋਲਡਰ ਵਿੱਚ ਪਾਓ। ਫਿਰ `lifeImg` ਨੂੰ ਆਪਣੇ window.onload ਫੰਕਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ: 
+### ਕੋਡ ਕਰਨ ਦਾ ਸਮਾਂ!
+
+1. **ਦ੍ਰਿਸ਼ਮਾਨ ਐਸੈਟਸ ਨੂੰ ਲਓ**। `solution/assets/` ਫੋਲਡਰ ਤੋਂ `life.png` ਐਸੈਟ ਨੂੰ ਕਾਪੀ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ `your-work` ਫੋਲਡਰ ਵਿੱਚ ਪਾਓ। ਫਿਰ `lifeImg` ਨੂੰ ਆਪਣੇ window.onload ਫੰਕਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ:
 
     ```javascript
     lifeImg = await loadTexture("assets/life.png");
@@ -84,9 +229,9 @@ npm start
     eventEmitter = new EventEmitter();
     ```
   
-2. **ਆਪਣੇ ਗੇਮ ਵੈਰੀਏਬਲਸ ਸੈਟ ਕਰੋ**। ਆਪਣੇ ਕੁੱਲ ਸਕੋਰ (0 ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ) ਅਤੇ ਬਾਕੀ ਜ਼ਿੰਦਗੀਆਂ (3 ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ) ਨੂੰ ਟਰੈਕ ਕਰਨ ਲਈ ਕੁਝ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ। ਅਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਵਾਂਗੇ ਤਾਂ ਜੋ ਖਿਡਾਰੀ ਹਮੇਸ਼ਾ ਜਾਣ ਸਕਣ ਕਿ ਉਹ ਕਿੱਥੇ ਖੜ੍ਹੇ ਹਨ।
+2. **ਆਪਣੀਆਂ ਗੇਮ ਵੈਰੀਏਬਲਸ ਸੈਟ ਕਰੋ**। ਆਪਣਾ ਕੁੱਲ ਸਕੋਰ (0 ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ) ਅਤੇ ਬਾਕੀ ਜ਼ਿੰਦਗੀਆਂ (3 ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ) ਟ੍ਰੈਕ ਕਰਨ ਲਈ ਕੁਝ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ। ਅਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਵਾਂਗੇ ਤਾਂ ਜੋ ਖਿਡਾਰੀ ਹਮੇਸ਼ਾ ਜਾਣ ਸਕਣ ਕਿ ਉਹ ਕਿੱਥੇ ਖੜੇ ਹਨ।
 
-3. **ਕੋਲਿਜ਼ਨ ਡਿਟੈਕਸ਼ਨ ਲਾਗੂ ਕਰੋ**। ਆਪਣੇ `updateGameObjects()` ਫੰਕਸ਼ਨ ਨੂੰ ਵਧਾਓ ਤਾਂ ਜੋ ਇਹ ਪਤਾ ਲਗਾ ਸਕੇ ਕਿ ਜਦੋਂ ਦੁਸ਼ਮਣ ਤੁਹਾਡੇ ਹੀਰੋ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹਨ:
+3. **ਕੋਲਿਜ਼ਨ ਡਿਟੈਕਸ਼ਨ ਲਾਗੂ ਕਰੋ**। ਆਪਣੇ `updateGameObjects()` ਫੰਕਸ਼ਨ ਨੂੰ ਵਧਾਓ ਤਾਂ ਜੋ ਇਹ ਪਤਾ ਲਗਾ ਸਕੇ ਕਿ ਦੁਸ਼ਮਨ ਤੁਹਾਡੇ ਹੀਰੋ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹਨ:
 
     ```javascript
     enemies.forEach(enemy => {
@@ -97,15 +242,15 @@ npm start
       })
     ```
 
-4. **ਆਪਣੇ ਹੀਰੋ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਅਤੇ ਪੌਇੰਟ ਟਰੈਕਿੰਗ ਸ਼ਾਮਲ ਕਰੋ**। 
-   1. **ਕਾਊਂਟਰ ਸ਼ੁਰੂ ਕਰੋ**। ਆਪਣੇ `Hero` ਕਲਾਸ ਵਿੱਚ `this.cooldown = 0` ਦੇ ਹੇਠਾਂ, ਜ਼ਿੰਦਗੀ ਅਤੇ ਪੌਇੰਟਸ ਸੈਟ ਕਰੋ:
+4. **ਆਪਣੇ ਹੀਰੋ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਅਤੇ ਪੌਇੰਟ ਟ੍ਰੈਕਿੰਗ ਸ਼ਾਮਲ ਕਰੋ**। 
+   1. **ਕਾਊਂਟਰਸ ਸ਼ੁਰੂ ਕਰੋ**। `this.cooldown = 0` ਦੇ ਹੇਠਾਂ ਆਪਣੇ `Hero` ਕਲਾਸ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਅਤੇ ਪੌਇੰਟਸ ਸੈਟ ਕਰੋ:
 
         ```javascript
         this.life = 3;
         this.points = 0;
         ```
 
-   1. **ਇਹ ਮੁੱਲ ਖਿਡਾਰੀ ਨੂੰ ਦਿਖਾਓ**। ਸਕ੍ਰੀਨ 'ਤੇ ਇਹ ਮੁੱਲ ਡਰਾਅ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਬਣਾਓ:
+   1. **ਇਹ ਮੁੱਲ ਖਿਡਾਰੀ ਨੂੰ ਦਿਖਾਓ**। ਸਕ੍ਰੀਨ 'ਤੇ ਇਹ ਮੁੱਲ ਡਰਾਇੰਗ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਬਣਾਓ:
 
         ```javascript
         function drawLife() {
@@ -132,16 +277,32 @@ npm start
 
         ```
 
-   1. **ਇਹ ਸਭ ਕੁਝ ਆਪਣੇ ਗੇਮ ਲੂਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ**। ਇਹ ਫੰਕਸ਼ਨ ਆਪਣੇ window.onload ਫੰਕਸ਼ਨ ਵਿੱਚ `updateGameObjects()` ਦੇ ਤੁਰੰਤ ਬਾਅਦ ਸ਼ਾਮਲ ਕਰੋ:
+   1. **ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਗੇਮ ਲੂਪ ਵਿੱਚ ਜੋੜੋ**। `updateGameObjects()` ਦੇ ਬਾਅਦ ਆਪਣੇ window.onload ਫੰਕਸ਼ਨ ਵਿੱਚ ਇਹ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:
 
         ```javascript
         drawPoints();
         drawLife();
         ```
 
-1. **ਗੇਮ ਦੇ ਨਤੀਜੇ ਅਤੇ ਇਨਾਮ ਲਾਗੂ ਕਰੋ**। ਹੁਣ ਅਸੀਂ ਉਹ ਫੀਡਬੈਕ ਸਿਸਟਮ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜੋ ਖਿਡਾਰੀ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਨੂੰ ਮਹੱਤਵਪੂਰਨ ਬਣਾਉਂਦੇ ਹਨ:
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਗੇਮ ਡਿਜ਼ਾਈਨ ਸਮਝ**: ਨਤੀਜਿਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ:
+- ✅ ਦ੍ਰਿਸ਼ਮਾਨ ਫੀਡਬੈਕ ਖਿਡਾਰੀਆਂ ਨੂੰ ਗੇਮ ਸਥਿਤੀ ਕਿਵੇਂ ਦਿਖਾਉਂਦਾ ਹੈ
+- ✅ UI ਐਲਿਮੈਂਟਸ ਦੀ ਸਥਿਰ ਪਲੇਸਮੈਂਟ usability ਨੂੰ ਕਿਵੇਂ ਸੁਧਾਰਦੀ ਹੈ
+- ✅ ਪੌਇੰਟ ਮੁੱਲ ਅਤੇ ਜ਼ਿੰਦਗੀ ਪ੍ਰਬੰਧਨ ਦੇ ਪਿੱਛੇ ਮਨੋਵਿਗਿਆਨ
+- ✅ ਕੈਨਵਾਸ ਟੈਕਸਟ ਰੈਂਡਰਿੰਗ HTML ਟੈਕਸਟ ਤੋਂ ਕਿਵੇਂ ਵੱਖਰੀ ਹੈ
+
+**ਤੁਰੰਤ ਸਵੈ-ਪਰੀਖਣ**: ਆਰਕੇਡ ਗੇਮਾਂ ਆਮ ਤੌਰ 'ਤੇ ਪੌਇੰਟ ਮੁੱਲਾਂ ਲਈ ਗੋਲ ਗਿਣਤੀਆਂ ਕਿਉਂ ਵਰਤਦੀਆਂ ਹਨ?
+*ਜਵਾਬ: ਗੋਲ ਗਿਣਤੀਆਂ ਖਿਡਾਰੀਆਂ ਲਈ ਮਾਨਸਿਕ ਤੌਰ 'ਤੇ ਗਿਣਤੀ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦੀਆਂ ਹਨ ਅਤੇ ਸੰਤੋਸ਼ਜਨਕ ਮਨੋਵਿਗਿਆਨਕ ਰਿਵਾਰਡ ਬਣਾਉਂਦੀਆਂ ਹਨ*
+
+**ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ ਪ੍ਰਿੰਸਿਪਲਸ**: ਤੁਸੀਂ ਹੁਣ ਲਾਗੂ ਕਰ ਰਹੇ ਹੋ:
+- **ਦ੍ਰਿਸ਼ਮਾਨ ਹਾਇਰਾਰਕੀ**: ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਨੂੰ ਪ੍ਰਮੁੱਖ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਣਾ
+- **ਤੁਰੰਤ ਫੀਡਬੈਕ**: ਖਿਡਾਰੀ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਅੱਪਡੇਟਸ
+- **ਕੌਗਨਿਟਿਵ ਲੋਡ**: ਸਧਾਰਨ, ਸਪਸ਼ਟ ਜਾਣਕਾਰੀ ਪ੍ਰਸਤੁਤੀ
+- **ਇਮੋਸ਼ਨਲ ਡਿਜ਼ਾਈਨ**: ਆਈਕਾਨ ਅਤੇ ਰੰਗ ਜੋ ਖਿਡਾਰੀ ਨਾਲ ਜੁੜਾਅ ਬਣਾਉਂਦੇ ਹਨ
 
-   1. **ਟਕਰਾਅ ਜ਼ਿੰਦਗੀਆਂ ਘਟਾਉਂਦੇ ਹਨ**। ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਹਾਡਾ ਹੀਰੋ ਕਿਸੇ ਦੁਸ਼ਮਣ ਨਾਲ ਟਕਰਾਉਂਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਇੱਕ ਜ਼ਿੰਦਗੀ ਗੁਆਉਣੀ ਚਾਹੀਦੀ ਹੈ।
+1. **ਗੇਮ ਨਤੀਜੇ ਅਤੇ ਰਿਵਾਰਡ ਲਾਗੂ ਕਰੋ**। ਹੁਣ ਅਸੀਂ ਫੀਡਬੈਕ ਸਿਸਟਮ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜੋ ਖਿਡਾਰੀ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਨੂੰ ਮਾਇਨੇਦਾਰ ਬਣਾਉਂਦੇ ਹਨ:
+
+   1. **ਕੋਲਿਜ਼ਨ ਜ਼ਿੰਦਗੀ ਦੀ ਕੀਮਤ ਹੈ**। ਹਰ ਵਾਰ ਤੁਹਾਡਾ ਹੀਰੋ ਦੁਸ਼ਮਨ ਨਾਲ ਟਕਰਾਉਂਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਇੱਕ ਜ਼ਿੰਦਗੀ ਗੁਆਉਣੀ ਚਾਹੀਦੀ ਹੈ।
    
       ਇਹ ਮੈਥਡ ਆਪਣੇ `Hero` ਕਲਾਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ:
 
@@ -154,9 +315,9 @@ npm start
         }
         ```
 
-   2. **ਦੁਸ਼ਮਣਾਂ ਨੂੰ ਮਾਰਨਾ ਪੌਇੰਟਸ ਦਿੰਦਾ ਹੈ**। ਹਰ ਸਫਲ ਹਿੱਟ ਲਈ 100 ਪੌਇੰਟਸ ਮਿਲਦੇ ਹਨ, ਜੋ ਸਹੀ ਸ਼ੂਟਿੰਗ ਲਈ ਤੁਰੰਤ ਸਕਾਰਾਤਮਕ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
+   2. **ਦੁਸ਼ਮਨ ਨੂੰ ਗੋਲੀ ਮਾਰਨਾ ਪੌਇੰਟਸ ਕਮਾਉਂਦਾ ਹੈ**। ਹਰ ਸਫਲ ਹਿੱਟ 100 ਪੌਇੰਟਸ ਦਿੰਦਾ ਹੈ, ਸਹੀ ਗੋਲੀ ਮਾਰਨ ਲਈ ਤੁਰੰਤ ਸਕਾਰਾਤਮਕ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
 
-      ਆਪਣੇ Hero ਕਲਾਸ ਵਿੱਚ ਇਹ ਇੰਕ੍ਰੀਮੈਂਟ ਮੈਥਡ ਸ਼ਾਮਲ ਕਰੋ:
+      ਆਪਣੇ Hero ਕਲਾਸ ਵਿੱਚ ਇਸ ਇੰਕ੍ਰੀਮੈਂਟ ਮੈਥਡ ਨੂੰ ਵਧਾਓ:
     
         ```javascript
           incrementPoints() {
@@ -179,41 +340,52 @@ npm start
         });
         ```
 
-✅ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਤੇ ਕੈਨਵਸ ਨਾਲ ਬਣਾਈਆਂ ਹੋਰ ਗੇਮਾਂ ਬਾਰੇ ਜਾਣਨ ਲਈ ਖੋਜ ਕਰੋ - ਤੁਸੀਂ ਹੈਰਾਨ ਹੋ ਸਕਦੇ ਹੋ ਕਿ ਕੀ ਕੁਝ ਸੰਭਵ ਹੈ!
-
-ਇਹ ਫੀਚਰ ਲਾਗੂ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਆਪਣੀ ਗੇਮ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਪੂਰਾ ਫੀਡਬੈਕ ਸਿਸਟਮ ਕਾਰਵਾਈ ਵਿੱਚ ਵੇਖਿਆ ਜਾ ਸਕੇ। ਤੁਹਾਨੂੰ ਨੀਵੇਂ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਦੇ ਆਈਕਾਨ, ਨੀਵੇਂ ਖੱਬੇ ਵਿੱਚ ਆਪਣਾ ਸਕੋਰ, ਅਤੇ ਟਕਰਾਅ ਨਾਲ ਜ਼ਿੰਦਗੀਆਂ ਘਟਦੀਆਂ ਅਤੇ ਸਫਲ ਸ਼ੂਟਸ ਨਾਲ ਸਕੋਰ ਵਧਦਾ ਹੋਇਆ ਵੇਖਣਾ ਚਾਹੀਦਾ ਹੈ।
-
-ਹੁਣ ਤੁਹਾਡੀ ਗੇਮ ਵਿੱਚ ਉਹ ਮੁੱਖ ਮਕੈਨਿਕਸ ਹਨ ਜਿਨ੍ਹਾਂ ਨੇ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਨੂੰ ਇੰਨਾ ਆਕਰਸ਼ਕ ਬਣਾਇਆ - ਸਪਸ਼ਟ ਲਕਸ਼, ਤੁਰੰਤ ਫੀਡਬੈਕ, ਅਤੇ ਖਿਡਾਰੀ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ ਮਹੱਤਵਪੂਰਨ ਨਤੀਜੇ।
-
----
-
-## GitHub Copilot ਏਜੰਟ ਚੈਲੈਂਜ 🚀
-
-ਏਜੰਟ ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
-
-**ਵੇਰਵਾ:** ਸਪੇਸ ਗੇਮ ਦੇ ਸਕੋਰਿੰਗ ਸਿਸਟਮ ਨੂੰ ਵਧੀਆ ਬਣਾਉਣ ਲਈ ਇੱਕ ਹਾਈ ਸਕੋਰ ਫੀਚਰ ਲਾਗੂ ਕਰੋ ਜਿਸ ਵਿੱਚ ਪੱਕਾ ਸਟੋਰੇਜ ਅਤੇ ਬੋਨਸ ਸਕੋਰਿੰਗ ਮਕੈਨਿਕਸ ਸ਼ਾਮਲ ਹੋਣ।
-
-**ਪ੍ਰੋਮਪਟ:** ਇੱਕ ਹਾਈ ਸਕੋਰ ਸਿਸਟਮ ਬਣਾਓ ਜੋ ਖਿਡਾਰੀ ਦੇ ਸਭ ਤੋਂ ਵਧੀਆ ਸਕੋਰ ਨੂੰ localStorage ਵਿੱਚ ਸੇਵ ਕਰੇ। ਲਗਾਤਾਰ ਦੁਸ਼ਮਣਾਂ ਨੂੰ ਮਾਰਨ ਲਈ ਬੋਨਸ ਪੌਇੰਟਸ ਸ਼ਾਮਲ ਕਰੋ (ਕੌਮਬੋ ਸਿਸਟਮ) ਅਤੇ ਵੱਖ-ਵੱਖ ਦੁਸ਼ਮਣ ਪ੍ਰਕਾਰਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਪੌਇੰਟ ਮੁੱਲ ਲਾਗੂ ਕਰੋ। ਜਦੋਂ ਖਿਡਾਰੀ ਨਵਾਂ ਹਾਈ ਸਕੋਰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਤਾਂ ਇੱਕ ਦ੍ਰਿਸ਼ਮਾਨ ਸੰਕੇਤਕ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਗੇਮ ਸਕ੍ਰੀਨ 'ਤੇ ਮੌਜੂਦਾ ਹਾਈ ਸਕੋਰ ਦਿਖਾਓ।
-
-
-
-## 🚀 ਚੈਲੈਂਜ
-
-ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਸਕੋਰਿੰਗ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਵਾਲੀ ਇੱਕ ਕਾਰਗਰ ਗੇਮ ਹੈ। ਸੋਚੋ ਕਿ ਹੋਰ ਕਿਹੜੇ ਫੀਚਰ ਖਿਡਾਰੀ ਦੇ ਤਜਰਬੇ ਨੂੰ ਵਧੀਆ ਬਣਾ ਸਕਦੇ ਹਨ।
-
-## ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼
-
-[ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/38)
-
-## ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਅਧਿਐਨ
-
-ਹੋਰ ਖੋਜ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ? ਗੇਮ ਸਕੋਰਿੰਗ ਅਤੇ ਜ਼ਿੰਦਗੀ ਸਿਸਟਮ ਦੇ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਬਾਰੇ ਖੋਜ ਕਰੋ। ਇੱਥੇ ਕੁਝ ਦਿਲਚਸਪ ਗੇਮ ਇੰਜਨ ਹਨ ਜਿਵੇਂ ਕਿ [PlayFab](https://playfab.com) ਜੋ ਸਕੋਰਿੰਗ, ਲੀਡਰਬੋਰਡਸ, ਅਤੇ ਖਿਡਾਰੀ ਦੀ ਤਰੱਕੀ ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ। ਇਸ ਤਰ੍ਹਾਂ ਦੀ ਕਿਸੇ ਚੀਜ਼ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਤੁਹਾਡੀ ਗੇਮ ਨੂੰ ਅਗਲੇ ਪੱਧਰ 'ਤੇ ਕਿਵੇਂ ਲੈ ਜਾ ਸਕਦਾ ਹੈ?
-
-## ਅਸਾਈਨਮੈਂਟ
-
-[ਸਕੋਰਿੰਗ ਗੇਮ ਬਣਾਓ](assignment.md)
+✅ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਤੇ ਕੈਨਵਾਸ ਨਾਲ ਬਣਾਈਆਂ ਹੋਰ ਗੇਮਾਂ ਬਾਰੇ ਜਾਣਨ ਲਈ ਕੁਝ ਖੋਜ ਕਰੋ - ਤੁਸੀਂ ਹੈਰਾਨ ਹੋ ਸਕਦੇ ਹੋ ਕਿ ਕੀ ਸੰਭਵ ਹੈ!
+
+ਇਹ ਫੀਚਰਸ ਲਾਗੂ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਆਪਣੀ ਗੇਮ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਪੂਰਾ ਫੀਡਬੈਕ ਸਿਸਟਮ ਕਾਰਵਾਈ ਵਿੱਚ ਵੇਖਿਆ ਜਾ ਸਕੇ। ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਦੇ ਆਈਕਾਨ, ਹੇਠਾਂ ਖੱਬੇ ਵਿੱਚ ਆਪਣਾ ਸਕੋਰ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਵੇਖੋ ਕਿ ਟਕਰਾਉਣ ਨਾਲ ਜ਼ਿੰਦਗੀਆਂ ਘਟਦੀਆਂ ਹਨ ਜਦੋਂ ਕਿ ਸਫਲ ਸ਼ਾਟਸ ਨਾਲ ਤੁਹਾਡਾ ਸਕੋਰ ਵਧਦਾ ਹੈ।
+
+ਤੁਹਾਡੀ ਗੇਮ ਵਿੱਚ ਹੁਣ ਉਹ ਮੁੱਖ ਮਕੈਨਿਕਸ ਹਨ ਜਿਨ੍ਹਾਂ ਨੇ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਨੂੰ ਬਹੁਤ ਆਕਰਸ਼ਕ ਬਣਾਇਆ - ਸਪਸ਼ਟ ਲਕਸ਼, ਤੁਰੰਤ ਫੀਡਬੈਕ, ਅਤੇ ਖਿਡਾਰੀ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ ਮਾਇਨੇਦਾਰ ਨਤੀਜੇ।
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਪੂਰਾ ਗੇਮ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ**: ਖਿਡਾਰੀ ਫੀਡਬੈਕ ਸਿਸਟਮਾਂ ਦੀ ਆਪਣੀ ਮਾਹਰਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:
+- ✅ ਸਕੋਰਿੰਗ ਮਕੈਨਿਕਸ ਖਿਡਾਰੀ ਦੀ ਪ੍ਰੇਰਨਾ ਅਤੇ ਜੁੜਾਅ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹਨ?
+- ✅ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਡਿਜ਼ਾਈਨ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਸਥਿਰਤਾ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ?
+- ✅ ਜ਼ਿੰਦਗੀ ਸਿਸਟਮ ਚੁਣੌਤੀ ਅਤੇ ਖਿਡਾਰੀ ਰਿਟੇਨਸ਼ਨ ਦਾ ਸੰਤੁਲਨ ਕਿਵੇਂ ਬਣਾਉਂਦਾ ਹੈ?
+- ✅ ਤੁਰੰਤ ਫੀਡਬੈਕ ਸੰਤੋਸ਼ਜਨਕ ਗੇਮਪਲੇ ਬਣਾਉਣ ਵਿੱਚ ਕਿਵੇਂ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦਾ ਹੈ?
+
+**ਸਿਸਟਮ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਤੁਹਾਡਾ ਫੀਡਬੈਕ ਸਿਸਟਮ ਦਰਸਾਉਂਦਾ ਹੈ:
+- **ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ ਡਿਜ਼ਾਈਨ**: ਸਪਸ਼ਟ ਦ੍ਰਿਸ਼ਮਾਨ ਸੰਚਾਰ ਅਤੇ ਜਾਣਕਾਰੀ ਹਾਇਰਾਰਕੀ
+- **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਆਰਕੀਟੈਕਚਰ**: ਖਿਡਾਰੀ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ ਜਵਾਬੀ ਅੱਪਡੇਟਸ
+- **ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ**: ਗੇਮ ਡੇਟਾ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨਾ ਅਤੇ ਦਿਖਾਉਣਾ
+- **ਕੈਨਵਾਸ ਮਾਹਰਤਾ**: ਟੈਕਸਟ ਰੈਂਡਰਿੰਗ ਅਤੇ ਸਪ੍ਰਾਈਟ ਪੋਜ਼ੀਸ਼ਨਿੰਗ
+- **ਗੇਮ ਮਨੋਵਿਗਿਆਨ**: ਖਿਡਾਰੀ ਦੀ ਪ੍ਰੇਰਨਾ ਅਤੇ ਜੁੜਾਅ ਨੂੰ ਸਮਝਣਾ
+
+**ਪ੍ਰੋਫੈਸ਼ਨਲ ਪੈਟਰਨਸ**: ਤੁਸੀਂ ਲਾਗੂ ਕੀਤਾ ਹੈ:
+- **MVC ਆਰਕੀਟੈਕਚਰ**: ਗੇਮ ਲੌਜਿਕ, ਡੇਟਾ, ਅਤੇ ਪ੍ਰਸਤੁਤੀ ਦਾ ਵੱਖਰਾ ਕਰਨਾ
+- **ਓਬਜ਼ਰਵਰ ਪੈਟਰਨ**: ਗੇਮ ਸਥਿਤੀ ਬਦਲਾਅ ਲਈ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਅੱਪਡੇਟਸ
+- **ਕੰਪੋਨੈਂਟ ਡਿਜ਼ਾਈਨ**: ਰੀਯੂਜ਼ੇਬਲ ਫੰਕਸ਼ਨਸ ਰੈਂਡਰਿੰਗ ਅਤੇ ਲੌਜਿਕ ਲਈ
+- **ਪਰਫਾਰਮੈਂਸ ਓਪਟੀਮਾਈਜ਼ੇਸ਼ਨ**: ਗੇਮ ਲੂਪਸ ਵਿੱਚ ਕੁਸ਼ਲ ਰੈਂਡਰਿੰਗ
+
+### ⚡ **ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਸਕੋਰ ਡਿਸਪਲੇ ਲਈ ਵੱਖ-ਵੱਖ ਫੋਂਟ ਸਾਈਜ਼ ਅਤੇ ਰੰਗਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ
+- [ ] ਪੌਇੰਟ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਅਤੇ ਵੇਖੋ ਕਿ ਇਹ ਗੇਮਪਲੇ ਮਹਿਸੂਸ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਭਾਵ ਪਾਉਂਦਾ ਹੈ
+- [ ] ਜਦੋਂ ਪੌਇੰਟਸ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਬਦਲਦੀਆਂ ਹਨ ਤਾਂ ਟਰੈਕ ਕਰਨ ਲਈ console.log ਸਟੇਟਮੈਂਟਸ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਐਜ ਕੇਸਾਂ ਦੀ ਜਾਂਚ ਕਰੋ ਜਿਵੇਂ ਕਿ ਜ਼ਿੰਦਗੀਆਂ ਖਤਮ ਹੋਣ ਜਾਂ ਉੱਚੇ ਸਕੋਰ ਪ੍ਰਾਪਤ ਕਰਨਾ
+
+### 🎯 **ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ**
+- [ ] ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਗੇਮ ਡਿਜ਼ਾਈਨ ਮਨੋਵਿਗਿਆਨ ਨੂੰ ਸਮਝੋ
+- [ ] ਸਕੋਰਿੰਗ ਅਤੇ ਜ਼ਿੰਦਗੀ ਗੁਆਉਣ ਲਈ ਸਾਊਂਡ ਇਫੈਕਟਸ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] localStorage ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਹਾਈ ਸਕੋਰ ਸਿਸਟਮ ਲਾਗੂ ਕਰੋ
+- [ ] ਵੱਖ-ਵੱਖ ਦੁਸ਼ਮਨ ਕਿਸਮਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਪੌਇੰਟ ਮੁੱਲ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਜ਼ਿੰਦਗੀ ਗੁਆਉਣ 'ਤੇ ਸਕ੍ਰੀਨ ਸ਼ੇਕ ਜਿਵੇਂ ਦ੍ਰਿਸ਼ਮਾਨ ਪ੍ਰਭਾਵ ਸ਼ਾਮਲ ਕਰੋ
+
+### 📅 **ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਗੇਮ ਡਿਜ਼ਾਈਨ ਯਾਤਰਾ**
+- [ ] ਪੂਰੀ ਸਪੇਸ ਗੇਮ ਪੂਰੇ ਫੀਡਬੈਕ ਸਿਸਟਮਾਂ ਨਾਲ ਪੂਰੀ ਕਰੋ
+- [ ] ਐਡਵਾਂਸਡ ਸਕੋਰਿੰਗ ਮਕੈਨਿਕਸ ਜਿਵੇਂ ਕਿ ਕੰਬੋ ਮਲਟੀਪਲਾਇਰਜ਼ ਲਾਗੂ ਕਰੋ
+- [ ] ਅਚੀਵਮੈਂਟਸ ਅਤੇ ਅਨਲੌਕ ਕਰਨ ਵਾਲੀ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਕਰੋ
+- [ ] ਮੁਸ਼ਕਲਤਾ ਪ੍ਰਗਤੀ ਅਤੇ
 
 ---
 
-**ਅਸਵੀਕਰਤੀ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤਾ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/6-space-game/6-end-condition/README.md b/translations/pa/6-space-game/6-end-condition/README.md
index 7bf75ad736..eadcdf0bdd 100644
--- a/translations/pa/6-space-game/6-end-condition/README.md
+++ b/translations/pa/6-space-game/6-end-condition/README.md
@@ -1,19 +1,66 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46bcdd9a0174031655a49bb062aa279c",
-  "translation_date": "2025-10-22T18:08:48+00:00",
+  "original_hash": "a4b78043f4d64bf3ee24e0689b8b391d",
+  "translation_date": "2025-11-03T16:53:07+00:00",
   "source_file": "6-space-game/6-end-condition/README.md",
   "language_code": "pa"
 }
 -->
-# ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 6: ਅੰਤ ਅਤੇ ਮੁੜ ਸ਼ੁਰੂ
-
-ਹਰ ਵਧੀਆ ਗੇਮ ਵਿੱਚ ਸਪਸ਼ਟ ਅੰਤ ਦੀਆਂ ਸ਼ਰਤਾਂ ਅਤੇ ਇੱਕ ਸੁਗਮ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਵਿਵਸਥਾ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਤੁਸੀਂ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਪੇਸ ਗੇਮ ਬਣਾਈ ਹੈ ਜਿਸ ਵਿੱਚ ਮੂਵਮੈਂਟ, ਲੜਾਈ ਅਤੇ ਸਕੋਰਿੰਗ ਹੈ - ਹੁਣ ਸਮਾਂ ਹੈ ਇਸਨੂੰ ਪੂਰਾ ਮਹਿਸੂਸ ਕਰਨ ਲਈ ਆਖਰੀ ਹਿੱਸੇ ਜੋੜਨ ਦਾ।
-
-ਤੁਹਾਡੀ ਗੇਮ ਇਸ ਸਮੇਂ ਬਿਨਾਂ ਰੁਕਾਵਟ ਦੇ ਚੱਲਦੀ ਹੈ, NASA ਦੇ Voyager ਪ੍ਰੋਬਸ ਦੀ ਤਰ੍ਹਾਂ ਜੋ 1977 ਵਿੱਚ ਲਾਂਚ ਕੀਤੇ ਗਏ ਸਨ - ਅਜੇ ਵੀ ਦਹਾਕਿਆਂ ਬਾਅਦ ਅੰਤਰਿਕਸ਼ ਵਿੱਚ ਯਾਤਰਾ ਕਰ ਰਹੇ ਹਨ। ਜਦੋਂ ਕਿ ਇਹ ਅੰਤਰਿਕਸ਼ ਖੋਜ ਲਈ ਠੀਕ ਹੈ, ਗੇਮਾਂ ਨੂੰ ਸੰਤੋਸ਼ਜਨਕ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਪਰਿਭਾਸ਼ਿਤ ਅੰਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
+# ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 6: ਅੰਤ ਅਤੇ ਦੁਬਾਰਾ ਸ਼ੁਰੂ
+
+```mermaid
+journey
+    title Your Game Completion Journey
+    section End Conditions
+      Define win/lose states: 3: Student
+      Implement condition checking: 4: Student
+      Handle state transitions: 4: Student
+    section Player Experience
+      Design feedback systems: 4: Student
+      Create restart mechanics: 5: Student
+      Polish user interface: 5: Student
+    section System Integration
+      Manage game lifecycle: 5: Student
+      Handle memory cleanup: 5: Student
+      Create complete experience: 5: Student
+```
 
-ਅੱਜ, ਅਸੀਂ ਜਿੱਤ/ਹਾਰ ਦੀਆਂ ਸ਼ਰਤਾਂ ਅਤੇ ਇੱਕ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਲਾਗੂ ਕਰਾਂਗੇ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪਾਲਿਸ਼ ਕੀਤੀ ਗੇਮ ਹੋਵੇਗੀ ਜਿਸਨੂੰ ਖਿਡਾਰੀ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹਨ ਅਤੇ ਮੁੜ ਖੇਡ ਸਕਦੇ ਹਨ, ਬਿਲਕੁਲ ਉਹਨਾਂ ਕਲਾਸਿਕ ਆਰਕੇਡ ਗੇਮਾਂ ਦੀ ਤਰ੍ਹਾਂ ਜਿਨ੍ਹਾਂ ਨੇ ਮੀਡੀਆਮ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ।
+ਹਰ ਵਧੀਆ ਗੇਮ ਲਈ ਸਪਸ਼ਟ ਅੰਤ ਦੀਆਂ ਸ਼ਰਤਾਂ ਅਤੇ ਇੱਕ ਸੁਗਮ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਤੁਸੀਂ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਪੇਸ ਗੇਮ ਬਣਾਈ ਹੈ ਜਿਸ ਵਿੱਚ ਮੂਵਮੈਂਟ, ਲੜਾਈ ਅਤੇ ਸਕੋਰਿੰਗ ਹੈ - ਹੁਣ ਸਮਾਂ ਹੈ ਕਿ ਅੰਤਮ ਹਿੱਸੇ ਜੋੜੇ ਜਾਣ ਜੋ ਇਸਨੂੰ ਪੂਰਾ ਮਹਿਸੂਸ ਕਰਵਾਉਣ।
+
+ਤੁਹਾਡੀ ਗੇਮ ਇਸ ਸਮੇਂ ਬਿਨਾਂ ਰੁਕਾਵਟ ਦੇ ਚੱਲ ਰਹੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਨਾਸਾ ਦੁਆਰਾ 1977 ਵਿੱਚ ਲਾਂਚ ਕੀਤੇ ਗਏ Voyager ਪ੍ਰੋਬਜ਼ - ਅਜੇ ਵੀ ਦਹਾਕਿਆਂ ਬਾਅਦ ਅੰਤਰਿਕਸ਼ ਵਿੱਚ ਯਾਤਰਾ ਕਰ ਰਹੇ ਹਨ। ਜਦੋਂ ਕਿ ਇਹ ਸਪੇਸ ਐਕਸਪਲੋਰੇਸ਼ਨ ਲਈ ਠੀਕ ਹੈ, ਗੇਮਾਂ ਨੂੰ ਸੰਤੋਸ਼ਜਨਕ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਪਰਿਭਾਸ਼ਿਤ ਅੰਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
+
+ਅੱਜ, ਅਸੀਂ ਸਹੀ ਜਿੱਤ/ਹਾਰ ਦੀਆਂ ਸ਼ਰਤਾਂ ਅਤੇ ਇੱਕ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਲਾਗੂ ਕਰਾਂਗੇ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪਾਲਿਸ਼ ਕੀਤੀ ਗੇਮ ਹੋਵੇਗੀ ਜਿਸਨੂੰ ਖਿਡਾਰੀ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹਨ ਅਤੇ ਦੁਬਾਰਾ ਖੇਡ ਸਕਦੇ ਹਨ, ਬਿਲਕੁਲ ਉਹਨਾਂ ਕਲਾਸਿਕ ਆਰਕੇਡ ਗੇਮਾਂ ਵਾਂਗ ਜੋ ਮੀਡੀਆ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀਆਂ ਹਨ।
+
+```mermaid
+mindmap
+  root((Game Completion))
+    End Conditions
+      Victory States
+      Defeat Conditions
+      Progress Tracking
+      State Validation
+    Player Feedback
+      Visual Messages
+      Color Psychology
+      Clear Communication
+      Emotional Response
+    State Management
+      Game Loop Control
+      Memory Cleanup
+      Object Lifecycle
+      Event Handling
+    Restart Systems
+      Input Handling
+      State Reset
+      Fresh Initialization
+      User Experience
+    Polish Elements
+      Message Display
+      Smooth Transitions
+      Error Prevention
+      Accessibility
+```
 
 ## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 
@@ -21,37 +68,98 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## ਗੇਮ ਦੇ ਅੰਤ ਦੀਆਂ ਸ਼ਰਤਾਂ ਨੂੰ ਸਮਝਣਾ
 
-ਤੁਹਾਡੀ ਗੇਮ ਕਦੋਂ ਖਤਮ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ? ਇਹ ਮੂਲ ਸਵਾਲ ਆਰਕੇਡ ਦੇ ਸ਼ੁਰੂਆਤੀ ਯੁੱਗ ਤੋਂ ਗੇਮ ਡਿਜ਼ਾਈਨ ਨੂੰ ਆਕਾਰ ਦੇ ਰਿਹਾ ਹੈ। Pac-Man ਵਿੱਚ ਗੇਮ ਉਸ ਸਮੇਂ ਖਤਮ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਭੂਤਾਂ ਦੁਆਰਾ ਫੜੇ ਜਾਂਦੇ ਹੋ ਜਾਂ ਸਾਰੇ ਡਾਟਸ ਸਾਫ ਕਰ ਲੈਂਦੇ ਹੋ, ਜਦੋਂ ਕਿ Space Invaders ਵਿੱਚ ਗੇਮ ਉਸ ਸਮੇਂ ਖਤਮ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਐਲੀਅਨ ਹੇਠਾਂ ਪਹੁੰਚ ਜਾਂਦੇ ਹਨ ਜਾਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਸਾਰੇ ਨਸ਼ਟ ਕਰ ਦਿੰਦੇ ਹੋ।
-
-ਗੇਮ ਬਣਾਉਣ ਵਾਲੇ ਦੇ ਤੌਰ ਤੇ, ਤੁਸੀਂ ਜਿੱਤ ਅਤੇ ਹਾਰ ਦੀਆਂ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ। ਸਾਡੀ ਸਪੇਸ ਗੇਮ ਲਈ, ਇੱਥੇ ਕੁਝ ਸਾਬਤ ਕੀਤੇ ਗਏ ਤਰੀਕੇ ਹਨ ਜੋ ਰੋਮਾਂਚਕ ਗੇਮਪਲੇ ਬਣਾਉਂਦੇ ਹਨ:
-
-- **`N` ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਨਸ਼ਟ ਹੋ ਗਏ ਹਨ**: ਇਹ ਕਾਫ਼ੀ ਆਮ ਹੈ ਜੇ ਤੁਸੀਂ ਗੇਮ ਨੂੰ ਵੱਖ-ਵੱਖ ਲੈਵਲ ਵਿੱਚ ਵੰਡਦੇ ਹੋ ਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਲੈਵਲ ਪੂਰਾ ਕਰਨ ਲਈ `N` ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਨਸ਼ਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
-- **ਤੁਹਾਡਾ ਜਹਾਜ਼ ਨਸ਼ਟ ਹੋ ਗਿਆ ਹੈ**: ਕੁਝ ਗੇਮਾਂ ਵਿੱਚ ਤੁਸੀਂ ਗੇਮ ਹਾਰ ਜਾਂਦੇ ਹੋ ਜੇ ਤੁਹਾਡਾ ਜਹਾਜ਼ ਨਸ਼ਟ ਹੋ ਜਾਂਦਾ ਹੈ। ਇੱਕ ਹੋਰ ਆਮ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਜ਼ਿੰਦਗੀ ਦਾ ਸੰਕਲਪ ਹੁੰਦਾ ਹੈ। ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਹਾਡਾ ਜਹਾਜ਼ ਨਸ਼ਟ ਹੁੰਦਾ ਹੈ, ਇਹ ਇੱਕ ਜ਼ਿੰਦਗੀ ਘਟਾਉਂਦਾ ਹੈ। ਜਦੋਂ ਸਾਰੀਆਂ ਜ਼ਿੰਦਗੀਆਂ ਖਤਮ ਹੋ ਜਾਂਦੀਆਂ ਹਨ ਤਾਂ ਤੁਸੀਂ ਗੇਮ ਹਾਰ ਜਾਂਦੇ ਹੋ।
-- **ਤੁਸੀਂ `N` ਪਾਇੰਟ ਇਕੱਠੇ ਕੀਤੇ ਹਨ**: ਇੱਕ ਹੋਰ ਆਮ ਅੰਤ ਦੀ ਸ਼ਰਤ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਪਾਇੰਟ ਇਕੱਠੇ ਕਰੋ। ਤੁਸੀਂ ਪਾਇੰਟ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ ਇਹ ਤੁਹਾਡੇ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਪਰ ਇਹ ਕਾਫ਼ੀ ਆਮ ਹੈ ਕਿ ਵੱਖ-ਵੱਖ ਗਤੀਵਿਧੀਆਂ ਲਈ ਪਾਇੰਟ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਨੂੰ ਨਸ਼ਟ ਕਰਨਾ ਜਾਂ ਸ਼ਾਇਦ ਉਹ ਆਈਟਮ ਇਕੱਠੇ ਕਰਨਾ ਜੋ ਨਸ਼ਟ ਹੋਣ 'ਤੇ ਡਰੌਪ ਹੁੰਦੇ ਹਨ।
-- **ਲੈਵਲ ਪੂਰਾ ਕਰੋ**: ਇਹ ਕਈ ਸ਼ਰਤਾਂ ਸ਼ਾਮਲ ਕਰ ਸਕਦਾ ਹੈ ਜਿਵੇਂ ਕਿ `X` ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਨਸ਼ਟ ਹੋਏ, `Y` ਪਾਇੰਟ ਇਕੱਠੇ ਕੀਤੇ ਜਾਂ ਸ਼ਾਇਦ ਕੋਈ ਵਿਸ਼ੇਸ਼ ਆਈਟਮ ਇਕੱਠਾ ਕੀਤਾ ਗਿਆ।
-
-## ਗੇਮ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਵਿਵਸਥਾ ਲਾਗੂ ਕਰਨਾ
+ਤੁਹਾਡੀ ਗੇਮ ਕਦੋਂ ਖਤਮ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ? ਇਹ ਮੂਲ ਸਵਾਲ ਆਰਕੇਡ ਯੁੱਗ ਤੋਂ ਗੇਮ ਡਿਜ਼ਾਈਨ ਨੂੰ ਆਕਾਰ ਦੇ ਰਿਹਾ ਹੈ। Pac-Man ਉਸ ਸਮੇਂ ਖਤਮ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਭੂਤਾਂ ਦੁਆਰਾ ਫੜਿਆ ਜਾਂਦਾ ਹੈ ਜਾਂ ਸਾਰੇ ਡਾਟਸ ਸਾਫ਼ ਕਰ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ, ਜਦੋਂ ਕਿ Space Invaders ਉਸ ਸਮੇਂ ਖਤਮ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਐਲੀਅਨ ਹੇਠਾਂ ਪਹੁੰਚ ਜਾਂਦੇ ਹਨ ਜਾਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਸਾਰੇ ਨਸ਼ਟ ਕਰ ਦਿੰਦੇ ਹੋ।
+
+ਗੇਮ ਬਣਾਉਣ ਵਾਲੇ ਦੇ ਤੌਰ ਤੇ, ਤੁਸੀਂ ਜਿੱਤ ਅਤੇ ਹਾਰ ਦੀਆਂ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ। ਸਾਡੇ ਸਪੇਸ ਗੇਮ ਲਈ, ਇੱਥੇ ਸਾਬਤ ਕੀਤੇ ਗਏ ਤਰੀਕੇ ਹਨ ਜੋ ਰੋਮਾਂਚਕ ਗੇਮਪਲੇ ਬਣਾਉਂਦੇ ਹਨ:
+
+```mermaid
+flowchart TD
+    A["🎮 Game Start"] --> B{"Check Conditions"}
+    
+    B --> C["Enemy Count"]
+    B --> D["Hero Lives"]
+    B --> E["Score Threshold"]
+    B --> F["Level Progress"]
+    
+    C --> C1{"Enemies = 0?"}
+    D --> D1{"Lives = 0?"}
+    E --> E1{"Score ≥ Target?"}
+    F --> F1{"Objectives Complete?"}
+    
+    C1 -->|Yes| G["🏆 Victory"]
+    D1 -->|Yes| H["💀 Defeat"]
+    E1 -->|Yes| G
+    F1 -->|Yes| G
+    
+    C1 -->|No| B
+    D1 -->|No| B
+    E1 -->|No| B
+    F1 -->|No| B
+    
+    G --> I["🔄 Restart Option"]
+    H --> I
+    
+    style G fill:#e8f5e8
+    style H fill:#ffebee
+    style I fill:#e3f2fd
+```
 
-ਵਧੀਆ ਗੇਮਾਂ ਸੁਗਮ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਰਾਹੀਂ ਮੁੜ ਖੇਡਣ ਦੀ ਪ੍ਰੇਰਨਾ ਦਿੰਦੇ ਹਨ। ਜਦੋਂ ਖਿਡਾਰੀ ਗੇਮ ਪੂਰੀ ਕਰਦੇ ਹਨ (ਜਾਂ ਹਾਰ ਜਾਂਦੇ ਹਨ), ਉਹ ਅਕਸਰ ਤੁਰੰਤ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ - ਚਾਹੇ ਆਪਣਾ ਸਕੋਰ ਪਿਛਲੇ ਤੋਂ ਵਧੀਆ ਕਰਨ ਲਈ ਜਾਂ ਆਪਣੀ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਲਈ।
+- **`N` ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਨਸ਼ਟ ਕੀਤੇ ਗਏ ਹਨ**: ਇਹ ਕਾਫ਼ੀ ਆਮ ਹੈ ਜੇ ਤੁਸੀਂ ਗੇਮ ਨੂੰ ਵੱਖ-ਵੱਖ ਲੈਵਲ ਵਿੱਚ ਵੰਡਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਲੈਵਲ ਪੂਰਾ ਕਰਨ ਲਈ `N` ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਨਸ਼ਟ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
+- **ਤੁਹਾਡਾ ਜਹਾਜ਼ ਨਸ਼ਟ ਹੋ ਗਿਆ ਹੈ**: ਕੁਝ ਗੇਮਾਂ ਵਿੱਚ ਤੁਸੀਂ ਗੇਮ ਹਾਰ ਜਾਂਦੇ ਹੋ ਜੇ ਤੁਹਾਡਾ ਜਹਾਜ਼ ਨਸ਼ਟ ਹੋ ਜਾਂਦਾ ਹੈ। ਇੱਕ ਹੋਰ ਆਮ ਤਰੀਕਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਜ਼ਿੰਦਗੀ ਦਾ ਸੰਕਲਪ ਹੁੰਦਾ ਹੈ। ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਹਾਡਾ ਜਹਾਜ਼ ਨਸ਼ਟ ਹੁੰਦਾ ਹੈ ਤਾਂ ਇਹ ਇੱਕ ਜ਼ਿੰਦਗੀ ਘਟਾਉਂਦਾ ਹੈ। ਜਦੋਂ ਸਾਰੀਆਂ ਜ਼ਿੰਦਗੀਆਂ ਖਤਮ ਹੋ ਜਾਂਦੀਆਂ ਹਨ ਤਾਂ ਤੁਸੀਂ ਗੇਮ ਹਾਰ ਜਾਂਦੇ ਹੋ।
+- **ਤੁਹਾਨੂੰ `N` ਪਾਇੰਟ ਮਿਲੇ ਹਨ**: ਇੱਕ ਹੋਰ ਆਮ ਅੰਤ ਦੀ ਸ਼ਰਤ ਤੁਹਾਡੇ ਲਈ ਪਾਇੰਟ ਇਕੱਠੇ ਕਰਨਾ ਹੈ। ਤੁਹਾਨੂੰ ਪਾਇੰਟ ਕਿਵੇਂ ਮਿਲਦੇ ਹਨ ਇਹ ਤੁਹਾਡੇ ਉੱਤੇ ਹੈ ਪਰ ਇਹ ਕਾਫ਼ੀ ਆਮ ਹੈ ਕਿ ਵੱਖ-ਵੱਖ ਗਤੀਵਿਧੀਆਂ ਲਈ ਪਾਇੰਟ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਨੂੰ ਨਸ਼ਟ ਕਰਨਾ ਜਾਂ ਸ਼ਾਇਦ ਉਹ ਚੀਜ਼ਾਂ ਇਕੱਠੀਆਂ ਕਰਨਾ ਜੋ ਚੀਜ਼ਾਂ ਨਸ਼ਟ ਹੋਣ ਤੇ ਡਿੱਗਦੀਆਂ ਹਨ।
+- **ਇੱਕ ਲੈਵਲ ਪੂਰਾ ਕਰੋ**: ਇਹ ਕਈ ਸ਼ਰਤਾਂ ਸ਼ਾਮਲ ਕਰ ਸਕਦਾ ਹੈ ਜਿਵੇਂ ਕਿ `X` ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਨਸ਼ਟ ਕੀਤੇ, `Y` ਪਾਇੰਟ ਇਕੱਠੇ ਕੀਤੇ ਜਾਂ ਸ਼ਾਇਦ ਕਿ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਚੀਜ਼ ਇਕੱਠੀ ਕੀਤੀ ਗਈ ਹੈ।
+
+## ਗੇਮ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਲਾਗੂ ਕਰਨਾ
+
+ਵਧੀਆ ਗੇਮਾਂ ਸੁਗਮ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਰਾਹੀਂ ਰੀਪਲੇਅਬਿਲਿਟੀ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦੀਆਂ ਹਨ। ਜਦੋਂ ਖਿਡਾਰੀ ਗੇਮ ਪੂਰੀ ਕਰਦੇ ਹਨ (ਜਾਂ ਹਾਰ ਜਾਂਦੇ ਹਨ), ਉਹ ਅਕਸਰ ਤੁਰੰਤ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ - ਚਾਹੇ ਆਪਣਾ ਸਕੋਰ ਬਹਿਤਰ ਕਰਨ ਲਈ ਜਾਂ ਆਪਣਾ ਪ੍ਰਦਰਸ਼ਨ ਸੁਧਾਰਨ ਲਈ।
+
+```mermaid
+stateDiagram-v2
+    [*] --> Playing: Game Start
+    Playing --> Victory: All enemies destroyed
+    Playing --> Defeat: Lives = 0
+    
+    Victory --> MessageDisplay: Show win message
+    Defeat --> MessageDisplay: Show lose message
+    
+    MessageDisplay --> WaitingRestart: Press Enter prompt
+    WaitingRestart --> Resetting: Enter key pressed
+    
+    Resetting --> CleanupMemory: Clear intervals
+    CleanupMemory --> ClearEvents: Remove listeners
+    ClearEvents --> InitializeGame: Fresh start
+    InitializeGame --> Playing: New game begins
+    
+    note right of MessageDisplay
+        Color-coded feedback:
+        Green = Victory
+        Red = Defeat
+    end note
+    
+    note right of Resetting
+        Complete state reset
+        prevents memory leaks
+    end note
+```
 
-Tetris ਇਸਦਾ ਬਹੁਤ ਵਧੀਆ ਉਦਾਹਰਨ ਹੈ: ਜਦੋਂ ਤੁਹਾਡੇ ਬਲਾਕ ਉੱਪਰ ਪਹੁੰਚ ਜਾਂਦੇ ਹਨ, ਤੁਸੀਂ ਤੁਰੰਤ ਇੱਕ ਨਵੀਂ ਗੇਮ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ ਬਿਨਾਂ ਜਟਿਲ ਮੀਨੂਜ਼ ਵਿੱਚ ਜਾਏ। ਅਸੀਂ ਇੱਕ ਸਮਾਨ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਬਣਾਵਾਂਗੇ ਜੋ ਗੇਮ ਦੀ ਸਥਿਤੀ ਨੂੰ ਸਾਫ਼ ਤੌਰ 'ਤੇ ਰੀਸੈਟ ਕਰਦੀ ਹੈ ਅਤੇ ਖਿਡਾਰੀਆਂ ਨੂੰ ਤੁਰੰਤ ਕਾਰਵਾਈ ਵਿੱਚ ਵਾਪਸ ਲੈ ਜਾਂਦੀ ਹੈ।
+Tetris ਇਸਦਾ ਬਹੁਤ ਵਧੀਆ ਉਦਾਹਰਨ ਹੈ: ਜਦੋਂ ਤੁਹਾਡੇ ਬਲਾਕ ਉੱਪਰ ਪਹੁੰਚ ਜਾਂਦੇ ਹਨ, ਤੁਸੀਂ ਤੁਰੰਤ ਇੱਕ ਨਵੀਂ ਗੇਮ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ ਬਿਨਾਂ ਜਟਿਲ ਮੀਨੂਜ਼ ਵਿੱਚ ਜਾਏ। ਅਸੀਂ ਇੱਕ ਸਮਾਨ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਬਣਾਵਾਂਗੇ ਜੋ ਗੇਮ ਦੀ ਸਥਿਤੀ ਨੂੰ ਸਾਫ਼ ਤਰੀਕੇ ਨਾਲ ਰੀਸੈਟ ਕਰਦੀ ਹੈ ਅਤੇ ਖਿਡਾਰੀਆਂ ਨੂੰ ਜਲਦੀ ਕਾਰਵਾਈ ਵਿੱਚ ਵਾਪਸ ਲੈ ਜਾਂਦੀ ਹੈ।
 
-✅ **ਚਿੰਤਨ**: ਉਹ ਗੇਮਾਂ ਬਾਰੇ ਸੋਚੋ ਜੋ ਤੁਸੀਂ ਖੇਡੀ ਹਨ। ਉਹ ਕਿਹੜੀਆਂ ਸ਼ਰਤਾਂ 'ਤੇ ਖਤਮ ਹੁੰਦੀਆਂ ਹਨ, ਅਤੇ ਤੁਹਾਨੂੰ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਕਿਵੇਂ ਪ੍ਰੇਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ? ਇੱਕ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਅਨੁਭਵ ਸੁਗਮ ਬਨਾਮ ਨਿਰਾਸ਼ਜਨਕ ਕਿਵੇਂ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ?
+✅ **ਚਿੰਤਨ**: ਉਹ ਗੇਮਾਂ ਬਾਰੇ ਸੋਚੋ ਜੋ ਤੁਸੀਂ ਖੇਡੀ ਹਨ। ਉਹ ਕਿਹੜੀਆਂ ਸ਼ਰਤਾਂ ਦੇ ਅਧਾਰ ਤੇ ਖਤਮ ਹੁੰਦੀਆਂ ਹਨ, ਅਤੇ ਤੁਹਾਨੂੰ ਕਿਵੇਂ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਪ੍ਰੇਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ? ਇੱਕ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਅਨੁਭਵ ਸੁਗਮ ਬਨਾਮ ਨਿਰਾਸ਼ਜਨਕ ਕਿਵੇਂ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ?
 
-## ਤੁਸੀਂ ਕੀ ਬਣਾਉਂਗੇ
+## ਤੁਸੀਂ ਕੀ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ
 
-ਤੁਸੀਂ ਆਖਰੀ ਫੀਚਰ ਲਾਗੂ ਕਰੋਗੇ ਜੋ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇੱਕ ਪੂਰੀ ਗੇਮ ਅਨੁਭਵ ਵਿੱਚ ਬਦਲ ਦਿੰਦੇ ਹਨ। ਇਹ ਤੱਤ ਪਾਲਿਸ਼ ਕੀਤੀਆਂ ਗੇਮਾਂ ਨੂੰ ਬੁਨਿਆਦੀ ਪ੍ਰੋਟੋਟਾਈਪ ਤੋਂ ਵੱਖ ਕਰਦੇ ਹਨ।
+ਤੁਸੀਂ ਅੰਤਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਾਗੂ ਕਰੋਗੇ ਜੋ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇੱਕ ਪੂਰੀ ਗੇਮ ਅਨੁਭਵ ਵਿੱਚ ਬਦਲ ਦਿੰਦੇ ਹਨ। ਇਹ ਤੱਤ ਪਾਲਿਸ਼ ਕੀਤੀਆਂ ਗੇਮਾਂ ਨੂੰ ਬੁਨਿਆਦੀ ਪ੍ਰੋਟੋਟਾਈਪ ਤੋਂ ਵੱਖ ਕਰਦੇ ਹਨ।
 
 **ਅੱਜ ਅਸੀਂ ਕੀ ਜੋੜ ਰਹੇ ਹਾਂ:**
 
 1. **ਜਿੱਤ ਦੀ ਸ਼ਰਤ**: ਸਾਰੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਨਸ਼ਟ ਕਰੋ ਅਤੇ ਇੱਕ ਸਹੀ ਜਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰੋ (ਤੁਸੀਂ ਇਸਨੂੰ ਕਮਾਇਆ ਹੈ!)
-2. **ਹਾਰ ਦੀ ਸ਼ਰਤ**: ਜ਼ਿੰਦਗੀਆਂ ਖਤਮ ਹੋਣ 'ਤੇ ਹਾਰ ਸਕਰੀਨ ਦਾ ਸਾਹਮਣਾ ਕਰੋ
-3. **ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ**: ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਲਈ Enter ਦਬਾਓ - ਕਿਉਂਕਿ ਇੱਕ ਗੇਮ ਕਦੇ ਵੀ ਕਾਫ਼ੀ ਨਹੀਂ ਹੁੰਦੀ
-4. **ਸਥਿਤੀ ਪ੍ਰਬੰਧਨ**: ਹਰ ਵਾਰ ਸਾਫ਼ ਸ਼ੁਰੂ - ਪਿਛਲੀ ਗੇਮ ਤੋਂ ਕੋਈ ਬਚੇ ਹੋਏ ਦੁਸ਼ਮਨ ਜਾਂ ਅਜੀਬ ਗਲਤੀਆਂ ਨਹੀਂ
+2. **ਹਾਰ ਦੀ ਸ਼ਰਤ**: ਜ਼ਿੰਦਗੀ ਖਤਮ ਹੋ ਜਾਏ ਅਤੇ ਹਾਰ ਸਕ੍ਰੀਨ ਦਾ ਸਾਹਮਣਾ ਕਰੋ
+3. **ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ**: Enter ਦਬਾਓ ਅਤੇ ਤੁਰੰਤ ਵਾਪਸ ਸ਼ੁਰੂ ਕਰੋ - ਕਿਉਂਕਿ ਇੱਕ ਗੇਮ ਕਦੇ ਵੀ ਕਾਫ਼ੀ ਨਹੀਂ ਹੁੰਦੀ
+4. **ਸਥਿਤੀ ਪ੍ਰਬੰਧਨ**: ਹਰ ਵਾਰ ਸਾਫ਼ ਸ਼ੁਰੂ - ਪਿਛਲੀ ਗੇਮ ਤੋਂ ਕੋਈ ਬਚੇ-ਖੁਚੇ ਦੁਸ਼ਮਨ ਜਾਂ ਅਜੀਬ ਗਲਤੀਆਂ ਨਹੀਂ
 
 ## ਸ਼ੁਰੂਆਤ ਕਰਨਾ
 
-ਆਪਣੇ ਵਿਕਾਸ ਦੇ ਮਾਹੌਲ ਦੀ ਤਿਆਰੀ ਕਰੋ। ਤੁਹਾਡੇ ਕੋਲ ਪਿਛਲੇ ਪਾਠਾਂ ਤੋਂ ਸਾਰੇ ਸਪੇਸ ਗੇਮ ਫਾਈਲਾਂ ਤਿਆਰ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ।
+ਆਓ ਤੁਹਾਡੇ ਵਿਕਾਸ ਦੇ ਮਾਹੌਲ ਦੀ ਤਿਆਰੀ ਕਰੀਏ। ਤੁਹਾਡੇ ਕੋਲ ਪਿਛਲੇ ਪਾਠਾਂ ਤੋਂ ਤੁਹਾਡੇ ਸਪੇਸ ਗੇਮ ਫਾਈਲਾਂ ਤਿਆਰ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ।
 
 **ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ:**
 
@@ -66,7 +174,7 @@ Tetris ਇਸਦਾ ਬਹੁਤ ਵਧੀਆ ਉਦਾਹਰਨ ਹੈ: ਜਦ
 -| package.json
 ```
 
-**ਆਪਣਾ ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ:**
+**ਤੁਹਾਡਾ ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ:**
 
 ```bash
 cd your-work
@@ -74,19 +182,45 @@ npm start
 ```
 
 **ਇਹ ਕਮਾਂਡ:**
-- ਇੱਕ ਸਥਾਨਕ ਸਰਵਰ `http://localhost:5000` 'ਤੇ ਚਲਾਉਂਦੀ ਹੈ
+- `http://localhost:5000` 'ਤੇ ਇੱਕ ਲੋਕਲ ਸਰਵਰ ਚਲਾਉਂਦੀ ਹੈ
 - ਤੁਹਾਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਸਰਵ ਕਰਦੀ ਹੈ
 - ਜਦੋਂ ਤੁਸੀਂ ਬਦਲਾਅ ਕਰਦੇ ਹੋ ਤਾਂ ਆਪਣੇ ਆਪ ਰੀਫ੍ਰੈਸ਼ ਹੁੰਦੀ ਹੈ
 
-`http://localhost:5000` ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਪੁਸ਼ਟੀ ਕਰੋ ਕਿ ਤੁਹਾਡੀ ਗੇਮ ਚੱਲ ਰਹੀ ਹੈ। ਤੁਹਾਨੂੰ ਮੂਵ, ਸ਼ੂਟ ਅਤੇ ਦੁਸ਼ਮਨਾਂ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇੱਕ ਵਾਰ ਪੁਸ਼ਟੀ ਹੋਣ 'ਤੇ, ਅਸੀਂ ਲਾਗੂ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਜਾਰੀ ਰੱਖ ਸਕਦੇ ਹਾਂ।
-
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: Visual Studio Code ਵਿੱਚ ਚੇਤਾਵਨੀ ਤੋਂ ਬਚਣ ਲਈ, `gameLoopId` ਨੂੰ ਆਪਣੇ ਫਾਈਲ ਦੇ ਸ਼ੁਰੂ 'ਤੇ `let gameLoopId;` ਵਜੋਂ ਘੋਸ਼ਿਤ ਕਰੋ ਬਜਾਏ ਇਸਨੂੰ `window.onload` ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ ਘੋਸ਼ਿਤ ਕਰਨ ਦੇ। ਇਹ ਆਧੁਨਿਕ JavaScript ਵੈਰੀਏਬਲ ਘੋਸ਼ਣਾ ਦੇ ਸ੍ਰੇਸ਼ਠ ਤਰੀਕਿਆਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ।
+`http://localhost:5000` ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਪੁਸ਼ਟੀ ਕਰੋ ਕਿ ਤੁਹਾਡੀ ਗੇਮ ਚੱਲ ਰਹੀ ਹੈ। ਤੁਹਾਨੂੰ ਮੂਵ, ਸ਼ੂਟ ਅਤੇ ਦੁਸ਼ਮਨਾਂ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇੱਕ ਵਾਰ ਪੁਸ਼ਟੀ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਅਸੀਂ ਲਾਗੂ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਜਾਰੀ ਰੱਖ ਸਕਦੇ ਹਾਂ।
+
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: Visual Studio Code ਵਿੱਚ ਚੇਤਾਵਨੀ ਤੋਂ ਬਚਣ ਲਈ, `gameLoopId` ਨੂੰ ਤੁਹਾਡੇ ਫਾਈਲ ਦੇ ਸਿਖਰ 'ਤੇ `let gameLoopId;` ਵਜੋਂ ਘੋਸ਼ਿਤ ਕਰੋ ਬਜਾਏ ਕਿ ਇਸਨੂੰ `window.onload` ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ ਘੋਸ਼ਿਤ ਕਰਨ ਦੇ। ਇਹ ਆਧੁਨਿਕ JavaScript ਵੈਰੀਏਬਲ ਘੋਸ਼ਣਾ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸਾਂ ਦਾ ਪਾਲਣ ਕਰਦਾ ਹੈ।
+
+```mermaid
+flowchart TD
+    A["1. Condition Tracking"] --> B["2. Event Handlers"]
+    B --> C["3. Message Constants"]
+    C --> D["4. Restart Controls"]
+    D --> E["5. Message Display"]
+    E --> F["6. Reset System"]
+    
+    G["isHeroDead()\nisEnemiesDead()"] --> A
+    H["Collision Events\nEnd Game Events"] --> B
+    I["GAME_END_WIN\nGAME_END_LOSS"] --> C
+    J["Enter Key\nRestart Trigger"] --> D
+    K["Victory/Defeat\nColor-coded Text"] --> E
+    L["State Cleanup\nFresh Initialization"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 ## ਲਾਗੂ ਕਰਨ ਦੇ ਕਦਮ
 
-### ਕਦਮ 1: ਅੰਤ ਦੀਆਂ ਸ਼ਰਤਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਵਾਲੇ ਫੰਕਸ਼ਨ ਬਣਾਓ
+### ਕਦਮ 1: ਅੰਤ ਦੀ ਸਥਿਤੀ ਟ੍ਰੈਕ ਕਰਨ ਵਾਲੇ ਫੰਕਸ਼ਨ ਬਣਾਓ
 
-ਸਾਨੂੰ ਫੰਕਸ਼ਨਾਂ ਦੀ ਲੋੜ ਹੈ ਜੋ ਗੇਮ ਕਦੋਂ ਖਤਮ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਇਸਨੂੰ ਨਿਗਰਾਨੀ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਕਿ International Space Station ਦੇ ਸੈਂਸਰ ਜੋ ਨਿਰੰਤਰ ਮਹੱਤਵਪੂਰਨ ਸਿਸਟਮਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਦੇ ਹਨ, ਇਹ ਫੰਕਸ਼ਨ ਗੇਮ ਦੀ ਸਥਿਤੀ ਨੂੰ ਲਗਾਤਾਰ ਜਾਂਚਣਗੇ।
+ਸਾਨੂੰ ਫੰਕਸ਼ਨਾਂ ਦੀ ਲੋੜ ਹੈ ਜੋ ਨਿਗਰਾਨੀ ਕਰਦੇ ਹਨ ਕਿ ਗੇਮ ਕਦੋਂ ਖਤਮ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਜਿਵੇਂ ਕਿ ਅੰਤਰਰਾਸ਼ਟਰੀ ਸਪੇਸ ਸਟੇਸ਼ਨ ਦੇ ਸੈਂਸਰ ਜੋ ਨਿਰੰਤਰ ਮਹੱਤਵਪੂਰਨ ਪ੍ਰਣਾਲੀਆਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਦੇ ਹਨ, ਇਹ ਫੰਕਸ਼ਨ ਗੇਮ ਦੀ ਸਥਿਤੀ ਨੂੰ ਲਗਾਤਾਰ ਜਾਂਚਣਗੇ।
 
 ```javascript
 function isHeroDead() {
@@ -100,14 +234,48 @@ function isEnemiesDead() {
 ```
 
 **ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- **ਜਾਂਚਦਾ ਹੈ** ਕਿ ਸਾਡਾ ਹੀਰੋ ਜ਼ਿੰਦਗੀ ਤੋਂ ਬਾਹਰ ਹੈ ਜਾਂ ਨਹੀਂ (ਅਫ਼ਸੋਸ!)
+- **ਜਾਂਚਦਾ ਹੈ** ਕਿ ਸਾਡੇ ਹੀਰੋ ਦੀਆਂ ਜ਼ਿੰਦਗੀਆਂ ਖਤਮ ਹੋ ਗਈਆਂ ਹਨ (ਦੁਖਦਾਈ!)
 - **ਗਿਣਦਾ ਹੈ** ਕਿ ਕਿੰਨੇ ਦੁਸ਼ਮਨ ਅਜੇ ਵੀ ਜ਼ਿੰਦਾ ਹਨ
-- **ਸੱਚ/ਝੂਠ** ਲਾਜ਼ਮੀ ਤਰੀਕੇ ਨਾਲ ਸਿੱਧਾ ਰੱਖਣ ਲਈ ਵਰਤਦਾ ਹੈ
-- **ਬਚੇ ਹੋਏ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਲੱਭਣ ਲਈ** ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ
+- **ਸੱਚ/ਝੂਠ** ਲਾਜ਼ਮੀ ਤਰੀਕੇ ਨਾਲ ਸਧਾਰਨ ਲਾਜ਼ਿਕ ਵਰਤਦਾ ਹੈ
+- **ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ** ਜਿੰਨਾਂ ਨੂੰ ਬਚਾਇਆ ਜਾ ਸਕਦਾ ਹੈ
 
 ### ਕਦਮ 2: ਅੰਤ ਦੀਆਂ ਸ਼ਰਤਾਂ ਲਈ ਇਵੈਂਟ ਹੈਂਡਲਰ ਅਪਡੇਟ ਕਰੋ
 
-ਹੁਣ ਅਸੀਂ ਇਹ ਸ਼ਰਤਾਂ ਦੀ ਜਾਂਚ ਨੂੰ ਗੇਮ ਦੇ ਇਵੈਂਟ ਸਿਸਟਮ ਨਾਲ ਜੋੜਾਂਗੇ। ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਟੱਕਰ ਹੁੰਦੀ ਹੈ, ਗੇਮ ਮੁਲਾਂਕਣ ਕਰੇਗੀ ਕਿ ਕੀ ਇਹ ਕਿਸੇ ਅੰਤ ਦੀ ਸ਼ਰਤ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦੀ ਹੈ। ਇਹ ਮਹੱਤਵਪੂਰਨ ਗੇਮ ਇਵੈਂਟਾਂ ਲਈ ਤੁਰੰਤ ਫੀਡਬੈਕ ਬਣਾਉਂਦਾ ਹੈ।
+ਹੁਣ ਅਸੀਂ ਇਹ ਸ਼ਰਤਾਂ ਦੀ ਜਾਂਚ ਗੇਮ ਦੇ ਇਵੈਂਟ ਸਿਸਟਮ ਨਾਲ ਜੋੜਾਂਗੇ। ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਟਕਰਾਅ ਹੁੰਦਾ ਹੈ, ਗੇਮ ਮੁਲਾਂਕਣ ਕਰੇਗੀ ਕਿ ਕੀ ਇਹ ਅੰਤ ਦੀ ਸ਼ਰਤ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ। ਇਹ ਮਹੱਤਵਪੂਰਨ ਗੇਮ ਇਵੈਂਟਾਂ ਲਈ ਤੁਰੰਤ ਫੀਡਬੈਕ ਬਣਾਉਂਦਾ ਹੈ।
+
+```mermaid
+sequenceDiagram
+    participant Collision
+    participant GameLogic
+    participant Conditions
+    participant EventSystem
+    participant Display
+    
+    Collision->>GameLogic: Laser hits enemy
+    GameLogic->>GameLogic: Destroy objects
+    GameLogic->>Conditions: Check isEnemiesDead()
+    
+    alt All enemies defeated
+        Conditions->>EventSystem: Emit GAME_END_WIN
+        EventSystem->>Display: Show victory message
+    else Enemies remain
+        Conditions->>GameLogic: Continue game
+    end
+    
+    Collision->>GameLogic: Enemy hits hero
+    GameLogic->>GameLogic: Decrease lives
+    GameLogic->>Conditions: Check isHeroDead()
+    
+    alt Lives = 0
+        Conditions->>EventSystem: Emit GAME_END_LOSS
+        EventSystem->>Display: Show defeat message
+    else Lives remain
+        GameLogic->>Conditions: Check isEnemiesDead()
+        alt All enemies defeated
+            Conditions->>EventSystem: Emit GAME_END_WIN
+        end
+    end
+```
 
 ```javascript
 eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -142,14 +310,14 @@ eventEmitter.on(Messages.GAME_END_LOSS, () => {
 ```
 
 **ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- **ਲੇਜ਼ਰ ਦੁਸ਼ਮਨ ਨੂੰ ਮਾਰਦਾ ਹੈ**: ਦੋਵੇਂ ਗਾਇਬ ਹੋ ਜਾਂਦੇ ਹਨ, ਤੁਹਾਨੂੰ ਪਾਇੰਟ ਮਿਲਦੇ ਹਨ, ਅਤੇ ਅਸੀਂ ਜਾਂਚਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਜਿੱਤ ਗਏ ਹੋ
-- **ਦੁਸ਼ਮਨ ਤੁਹਾਨੂੰ ਮਾਰਦਾ ਹੈ**: ਤੁਸੀਂ ਇੱਕ ਜ਼ਿੰਦਗੀ ਗੁਆਦੇ ਹੋ, ਅਤੇ ਅਸੀਂ ਜਾਂਚਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਅਜੇ ਵੀ ਜ਼ਿੰਦਾ ਹੋ
-- **ਸਮਾਰਟ ਕ੍ਰਮ**: ਅਸੀਂ ਪਹਿਲਾਂ ਹਾਰ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹਾਂ (ਕੋਈ ਵੀ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਜਿੱਤਣਾ ਅਤੇ ਹਾਰਣਾ ਨਹੀਂ ਚਾਹੁੰਦਾ!)
-- **ਤੁਰੰਤ ਪ੍ਰਤੀਕ੍ਰਿਆ**: ਜਿਵੇਂ ਹੀ ਕੁਝ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ, ਗੇਮ ਨੂੰ ਇਸ ਬਾਰੇ ਪਤਾ ਹੁੰਦਾ ਹੈ
+- **ਲੇਜ਼ਰ ਦੁਸ਼ਮਨ ਨੂੰ ਮਾਰਦਾ ਹੈ**: ਦੋਵੇਂ ਗਾਇਬ ਹੋ ਜਾਂਦੇ ਹਨ, ਤੁਹਾਨੂੰ ਪਾਇੰਟ ਮਿਲਦੇ ਹਨ, ਅਤੇ ਅਸੀਂ ਜਾਂਚ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਜਿੱਤ ਗਏ ਹੋ
+- **ਦੁਸ਼ਮਨ ਤੁਹਾਨੂੰ ਮਾਰਦਾ ਹੈ**: ਤੁਸੀਂ ਇੱਕ ਜ਼ਿੰਦਗੀ ਗੁਆਉਂਦੇ ਹੋ, ਅਤੇ ਅਸੀਂ ਜਾਂਚ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਅਜੇ ਵੀ ਜ਼ਿੰਦਾ ਹੋ
+- **ਸਮਾਰਟ ਕ੍ਰਮ**: ਅਸੀਂ ਪਹਿਲਾਂ ਹਾਰ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹਾਂ (ਕੋਈ ਵੀ ਇੱਕ ਸਮੇਂ ਜਿੱਤਣਾ ਅਤੇ ਹਾਰਣਾ ਨਹੀਂ ਚਾਹੁੰਦਾ!)
+- **ਤੁਰੰਤ ਪ੍ਰਤੀਕ੍ਰਿਆ**: ਜਿਵੇਂ ਹੀ ਕੁਝ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ, ਗੇਮ ਇਸ ਬਾਰੇ ਜਾਣਦੀ ਹੈ
 
-### ਕਦਮ 3: ਨਵੇਂ ਸੁਨੇਹੇ Constants ਸ਼ਾਮਲ ਕਰੋ
+### ਕਦਮ 3: ਨਵੇਂ ਸੁਨੇਹਾ ਕਾਂਸਟੈਂਟਸ ਸ਼ਾਮਲ ਕਰੋ
 
-ਤੁਹਾਨੂੰ ਆਪਣੇ `Messages` constant object ਵਿੱਚ ਨਵੇਂ ਸੁਨੇਹੇ ਦੀਆਂ ਕਿਸਮਾਂ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਇਹ constants ਸਥਿਰਤਾ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਇਵੈਂਟ ਸਿਸਟਮ ਵਿੱਚ ਟਾਈਪੋਜ਼ ਨੂੰ ਰੋਕਦੇ ਹਨ।
+ਤੁਹਾਨੂੰ ਆਪਣੇ `Messages` ਕਾਂਸਟੈਂਟ ਆਬਜੈਕਟ ਵਿੱਚ ਨਵੇਂ ਸੁਨੇਹਾ ਕਿਸਮਾਂ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਇਹ ਕਾਂਸਟੈਂਟਸ ਸਥਿਰਤਾ ਬਣਾਈ ਰੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਇਵੈਂਟ ਸਿਸਟਮ ਵਿੱਚ ਟਾਈਪੋਜ਼ ਨੂੰ ਰੋਕਦੇ ਹਨ।
 
 ```javascript
 GAME_END_LOSS: "GAME_END_LOSS",
@@ -157,13 +325,13 @@ GAME_END_WIN: "GAME_END_WIN",
 ```
 
 **ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**
-- **ਸੁਨੇਹੇ ਦੀਆਂ ਸ਼ਰਤਾਂ ਲਈ constants ਸ਼ਾਮਲ ਕੀਤੇ** ਸਥਿਰਤਾ ਬਣਾਉਣ ਲਈ
+- **ਸੁਨੇਹਾ ਕਾਂਸਟੈਂਟਸ ਸ਼ਾਮਲ ਕੀਤੇ** ਗੇਮ ਦੇ ਅੰਤ ਦੇ ਇਵੈਂਟਸ ਲਈ ਸਥਿਰਤਾ ਬਣਾਈ ਰੱਖਣ ਲਈ
 - **ਵਰਤੇ** ਵਰਣਨਾਤਮਕ ਨਾਮ ਜੋ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਇਵੈਂਟ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ
-- **ਮੌਜੂਦਾ ਨਾਮਕਰਨ ਰੀਤੀ ਦੀ ਪਾਲਣਾ ਕੀਤੀ** ਸੁਨੇਹੇ ਦੀਆਂ ਕਿਸਮਾਂ ਲਈ
+- **ਮੌਜੂਦਾ ਨਾਮਕਰਨ ਰੀਤੀ ਦੀ ਪਾਲਣਾ ਕੀਤੀ** ਸੁਨੇਹਾ ਕਿਸਮਾਂ ਲਈ
 
-### ਕਦਮ 4: ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਕੰਟਰੋਲ ਲਾਗੂ ਕਰੋ
+### ਕਦਮ 4: ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਕੰਟਰੋਲ ਲਾਗੂ ਕਰੋ
 
-ਹੁਣ ਤੁਸੀਂ ਕੀਬੋਰਡ ਕੰਟਰੋਲ ਸ਼ਾਮਲ ਕਰੋਗੇ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਗੇਮ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। Enter ਕੁੰਜੀ ਇੱਕ ਕੁਦਰਤੀ ਚੋਣ ਹੈ ਕਿਉਂਕਿ ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਕਾਰਵਾਈ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਅਤੇ ਨਵੀਆਂ ਗੇਮਾਂ ਸ਼ੁਰੂ ਕਰਨ ਨਾਲ ਜੁੜੀ ਹੋਈ ਹੈ।
+ਹੁਣ ਤੁਸੀਂ ਕੀਬੋਰਡ ਕੰਟਰੋਲ ਸ਼ਾਮਲ ਕਰੋਗੇ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਗੇਮ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। Enter ਕੁੰਜੀ ਇੱਕ ਕੁਦਰਤੀ ਚੋਣ ਹੈ ਕਿਉਂਕਿ ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਕਾਰਵਾਈ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਅਤੇ ਨਵੀਆਂ ਗੇਮਾਂ ਸ਼ੁਰੂ ਕਰਨ ਨਾਲ ਜੁੜੀ ਹੋਈ ਹੈ।
 
 **ਆਪਣੇ ਮੌਜੂਦਾ keydown ਇਵੈਂਟ ਸੁਣਨ ਵਾਲੇ ਵਿੱਚ Enter ਕੁੰਜੀ ਦੀ ਪਛਾਣ ਸ਼ਾਮਲ ਕਰੋ:**
 
@@ -173,7 +341,7 @@ else if(evt.key === "Enter") {
 }
 ```
 
-**ਨਵਾਂ ਸੁਨੇਹਾ constant ਸ਼ਾਮਲ ਕਰੋ:**
+**ਨਵਾਂ ਸੁਨੇਹਾ ਕਾਂਸਟੈਂਟ ਸ਼ਾਮਲ ਕਰੋ:**
 
 ```javascript
 KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
@@ -181,13 +349,13 @@ KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
 
 **ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ:**
 - **ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਕੀਬੋਰਡ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਸਿਸਟਮ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ**
-- **Enter ਕੁੰਜੀ ਨੂੰ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਟ੍ਰਿਗਰ ਵਜੋਂ ਵਰਤਦਾ ਹੈ** ਸਹਜ ਯੂਜ਼ਰ ਅਨੁਭਵ ਲਈ
-- **ਇੱਕ ਕਸਟਮ ਇਵੈਂਟ ਨੂੰ ਜਾਰੀ ਕਰਦਾ ਹੈ** ਜਿਸਨੂੰ ਤੁਹਾਡੀ ਗੇਮ ਦੇ ਹੋਰ ਹਿੱਸੇ ਸੁਣ ਸਕਦੇ ਹਨ
+- **Enter ਕੁੰਜੀ ਨੂੰ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਟ੍ਰਿਗਰ ਵਜੋਂ ਵਰਤਦਾ ਹੈ** ਸਹਜ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਲਈ
+- **ਇੱਕ ਕਸਟਮ ਇਵੈਂਟ ਨੂੰ ਪ੍ਰਸਾਰਿਤ ਕਰਦਾ ਹੈ** ਜਿਸਨੂੰ ਤੁਹਾਡੇ ਗੇਮ ਦੇ ਹੋਰ ਹਿੱਸੇ ਸੁਣ ਸਕਦੇ ਹਨ
 - **ਤੁਹਾਡੇ ਹੋਰ ਕੀਬੋਰਡ ਕੰਟਰੋਲਾਂ ਦੇ ਸਮਾਨ ਪੈਟਰਨ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ**
 
-### ਕਦਮ 5: ਸੁਨੇਹਾ ਡਿਸਪਲੇ ਸਿਸਟਮ ਬਣਾਓ
+### ਕਦਮ 5: ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਨ ਪ੍ਰਣਾਲੀ ਬਣਾਓ
 
-ਤੁਹਾਡੀ ਗੇਮ ਨੂੰ ਖਿਡਾਰੀਆਂ ਨੂੰ ਨਤੀਜੇ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਸੰਚਾਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਅਸੀਂ ਇੱਕ ਸੁਨੇਹਾ ਸਿਸਟਮ ਬਣਾਵਾਂਗੇ ਜੋ ਜਿੱਤ ਅਤੇ ਹਾਰ ਦੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਰੰਗ-ਕੋਡ ਕੀਤੇ ਗਏ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਡਿਸਪਲੇ ਕਰਦਾ ਹੈ, ਸ਼ੁਰੂਆਤੀ ਕੰਪਿਊਟਰ ਸਿਸਟਮਾਂ ਦੇ ਟਰਮੀਨਲ ਇੰਟਰਫੇਸਾਂ ਦੀ ਤਰ੍ਹਾਂ ਜਿੱਥੇ ਹਰੇ ਰੰਗ ਦਾ ਅਰਥ ਸਫਲਤਾ ਹੁੰਦਾ ਹੈ ਅਤੇ ਲਾਲ ਰੰਗ ਗਲਤੀਆਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ।
+ਤੁਹਾਡੀ ਗੇਮ ਨੂੰ ਖਿਡਾਰੀਆਂ ਨੂੰ ਨਤੀਜੇ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਸੰਚਾਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਅਸੀਂ ਇੱਕ ਸੁਨੇਹਾ ਪ੍ਰਣਾਲੀ ਬਣਾਵਾਂਗੇ ਜੋ ਜਿੱਤ ਅਤੇ ਹਾਰ ਦੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਰੰਗ-ਕੋਡ ਕੀਤੇ ਟੈਕਸਟ ਦੁਆਰਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਸ਼ੁਰੂਆਤੀ ਕੰਪਿਊਟਰ ਸਿਸਟਮਾਂ ਦੇ ਟਰਮੀਨਲ ਇੰਟਰਫੇਸ ਜਿੱਥੇ ਹਰੇ ਰੰਗ ਨੇ ਸਫਲਤਾ ਦਰਸਾਈ ਅਤੇ ਲਾਲ ਰੰਗ ਨੇ ਗਲਤੀਆਂ ਦਾ ਸੰਕੇਤ ਦਿੱਤਾ।
 
 **`displayMessage()` ਫੰਕਸ਼ਨ ਬਣਾਓ:**
 
@@ -201,11 +369,11 @@ function displayMessage(message, color = "red") {
 ```
 
 **ਕਦਮ-ਦਰ-ਕਦਮ, ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- **ਫੋਂਟ ਸਾਈਜ਼ ਅਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦਾ ਹੈ** ਸਪਸ਼ਟ, ਪੜ੍ਹਨਯੋਗ ਟੈਕਸਟ ਲਈ
+- **ਫਾਂਟ ਸਾਈਜ਼ ਅਤੇ ਪਰਿਵਾਰ ਸੈਟ ਕਰਦਾ ਹੈ** ਸਪਸ਼ਟ, ਪੜ੍ਹਨਯੋਗ ਟੈਕਸਟ ਲਈ
 - **ਰੰਗ ਪੈਰਾਮੀਟਰ ਲਾਗੂ ਕਰਦਾ ਹੈ** "ਲਾਲ" ਨੂੰ ਚੇਤਾਵਨੀ ਲਈ ਡਿਫਾਲਟ ਵਜੋਂ
-- **ਟੈਕਸਟ ਨੂੰ ਕੈਨਵਸ 'ਤੇ ਖੜ੍ਹੇ ਅਤੇ ਲੰਬੇ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ**
-- **ਮੋਡਰਨ JavaScript ਡਿਫਾਲਟ ਪੈਰਾਮੀਟਰ ਵਰਤਦਾ ਹੈ** ਲਚੀਲੇ ਰੰਗ ਵਿਕਲਪਾਂ ਲਈ
-- **ਕੈਨਵਸ 2D ਸੰਦਰਭ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ** ਸਿੱਧੇ ਟੈਕਸਟ ਰੇਂਡਰਿੰਗ ਲਈ
+- **ਟੈਕਸਟ ਨੂੰ ਕੈਨਵਾਸ 'ਤੇ ਕਦਮਾਂਵਾਰ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ**
+- **ਆਧੁਨਿਕ JavaScript ਡਿਫਾਲਟ ਪੈਰਾਮੀਟਰ ਵਰਤਦਾ ਹੈ** ਲਚਕਦਾਰ ਰੰਗ ਵਿਕਲਪਾਂ ਲਈ
+- **ਕੈਨਵਾਸ 2D ਸੰਦਰਭ ਵਰਤਦਾ ਹੈ** ਸਿੱਧੇ ਟੈਕਸਟ ਰੈਂਡਰਿੰਗ ਲਈ
 
 **`endGame()` ਫੰਕਸ਼ਨ ਬਣਾਓ:**
 
@@ -233,15 +401,159 @@ function endGame(win) {
 ```
 
 **ਇਹ ਫੰਕਸ਼ਨ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਸਭ ਕੁਝ ਜਮਾਉਂਦਾ ਹੈ** - ਹੋਰ ਜਹਾਜ਼ ਜਾਂ ਲੇਜ਼ਰ ਨਹੀਂ ਹਿਲਦੇ
-- **ਇੱਕ ਛੋਟਾ ਰੁਕਾਅ ਲੈਂਦਾ ਹੈ (200ms)** ਆਖਰੀ ਫਰੇਮ ਨੂੰ ਖਿੱਚਣ ਦੇਣ ਲਈ
-- **ਸਕਰੀਨ ਨੂੰ ਸਾਫ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਡਰਾਮੇਟਿਕ ਪ੍ਰਭਾਵ ਲਈ ਕਾਲਾ ਪੇਂਟ ਕਰਦਾ ਹੈ**
-- **ਜਿੱਤਣ ਵਾਲਿਆਂ ਅਤੇ ਹਾਰਨ ਵਾਲਿਆਂ ਲਈ ਵੱਖ-ਵੱਖ ਸੁਨੇਹੇ ਦਿਖਾਉਂਦਾ ਹੈ**
-- **ਖਿਡਾਰੀਆਂ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦੱਸਦਾ ਹੈ ਕਿ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਕੀ ਕਰਨਾ ਹੈ**
+- **ਸਭ ਕੁਝ ਜਮਾਉਂਦਾ ਹੈ** - ਕੋਈ ਹੋਰ ਮੂਵਮੈਂਟ ਜਾਂ ਲੇਜ਼ਰ ਨਹੀਂ
+- **ਇੱਕ ਛੋਟਾ ਰੁਕਾਵਟ ਲੈਂਦਾ ਹੈ (200ms)** ਆਖਰੀ ਫਰੇਮ ਖਿੱਚਣ ਦੇ ਸਮੇਂ ਦੇਣ
+### 🌟 **ਤੁਹਾਡਾ ਮਹੀਨੇ-ਲੰਬਾ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਕਰੀਅਰ**
+- [ ] ਵੱਖ-ਵੱਖ ਜਾਨਰ ਅਤੇ ਮਕੈਨਿਕਸ ਦੀ ਖੋਜ ਕਰਦੇ ਹੋਏ ਕਈ ਪੂਰੇ ਗੇਮ ਬਣਾਓ
+- [ ] Phaser ਜਾਂ Three.js ਵਰਗੇ ਉੱਚ-ਸਤਹ ਦੇ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਫਰੇਮਵਰਕ ਸਿੱਖੋ
+- [ ] ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਵਾਲੇ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ
+- [ ] ਗੇਮ ਡਿਜ਼ਾਈਨ ਦੇ ਸਿਧਾਂਤ ਅਤੇ ਖਿਡਾਰੀ ਦੀ ਮਨੋਵਿਗਿਆਨ ਦਾ ਅਧਿਐਨ ਕਰੋ
+- [ ] ਆਪਣੀ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਕੌਸ਼ਲਾਂ ਨੂੰ ਦਰਸਾਉਣ ਵਾਲਾ ਪੋਰਟਫੋਲਿਓ ਬਣਾਓ
+- [ ] ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਕਮਿਊਨਿਟੀ ਨਾਲ ਜੁੜੋ ਅਤੇ ਸਿੱਖਣਾ ਜਾਰੀ ਰੱਖੋ
+
+## 🎯 ਤੁਹਾਡਾ ਪੂਰਾ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
+
+```mermaid
+timeline
+    title Complete Game Development Learning Progression
+    
+    section Foundation (Lessons 1-2)
+        Game Architecture: Project structure
+                         : Asset management
+                         : Canvas basics
+                         : Event systems
+        
+    section Interaction Systems (Lessons 3-4)
+        Player Control: Input handling
+                      : Movement mechanics
+                      : Collision detection
+                      : Physics simulation
+        
+    section Game Mechanics (Lesson 5)
+        Feedback Systems: Scoring mechanisms
+                        : Life management
+                        : Visual communication
+                        : Player motivation
+        
+    section Game Completion (Lesson 6)
+        Polish & Flow: End conditions
+                     : State management
+                     : Restart systems
+                     : User experience
+        
+    section Advanced Features (1 week)
+        Enhancement Skills: Audio integration
+                          : Visual effects
+                          : Level progression
+                          : Performance optimization
+        
+    section Professional Development (1 month)
+        Industry Readiness: Framework mastery
+                          : Team collaboration
+                          : Portfolio development
+                          : Community engagement
+        
+    section Career Advancement (3 months)
+        Specialization: Advanced game engines
+                      : Platform deployment
+                      : Monetization strategies
+                      : Industry networking
+```
+
+### 🛠️ ਤੁਹਾਡਾ ਪੂਰਾ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲਕਿਟ ਸੰਖੇਪ
+
+ਇਸ ਪੂਰੇ ਸਪੇਸ ਗੇਮ ਸੀਰੀਜ਼ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਮਾਹਰ ਹੋ ਗਏ ਹੋ:
+- **ਗੇਮ ਆਰਕੀਟੈਕਚਰ**: ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਸਿਸਟਮ, ਗੇਮ ਲੂਪ, ਅਤੇ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ
+- **ਗ੍ਰਾਫਿਕਸ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਕੈਨਵਸ API, ਸਪ੍ਰਾਈਟ ਰੈਂਡਰਿੰਗ, ਅਤੇ ਵਿਜ਼ੂਅਲ ਇਫੈਕਟਸ
+- **ਇਨਪੁਟ ਸਿਸਟਮ**: ਕੀਬੋਰਡ ਹੈਂਡਲਿੰਗ, ਟਕਰਾਅ ਦੀ ਪਛਾਣ, ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਕੰਟਰੋਲ
+- **ਗੇਮ ਡਿਜ਼ਾਈਨ**: ਖਿਡਾਰੀ ਫੀਡਬੈਕ, ਪ੍ਰਗਤੀ ਸਿਸਟਮ, ਅਤੇ ਐਨਗੇਜਮੈਂਟ ਮਕੈਨਿਕਸ
+- **ਪਰਫਾਰਮੈਂਸ ਓਪਟੀਮਾਈਜ਼ੇਸ਼ਨ**: ਕੁਸ਼ਲ ਰੈਂਡਰਿੰਗ, ਮੈਮਰੀ ਮੈਨੇਜਮੈਂਟ, ਅਤੇ ਫਰੇਮ ਰੇਟ ਕੰਟਰੋਲ
+- **ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ**: ਸਪਸ਼ਟ ਸੰਚਾਰ, ਸਹਜ ਕੰਟਰੋਲ, ਅਤੇ ਪੋਲਿਸ਼ ਡਿਟੇਲਸ
+- **ਪ੍ਰੋਫੈਸ਼ਨਲ ਪੈਟਰਨਸ**: ਸਾਫ਼ ਕੋਡ, ਡੀਬੱਗਿੰਗ ਤਕਨੀਕਾਂ, ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਆਰਗਨਾਈਜ਼ੇਸ਼ਨ
+
+**ਅਸਲ-ਦੁਨੀਆ ਦੇ ਐਪਲੀਕੇਸ਼ਨ**: ਤੁਹਾਡੇ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਕੌਸ਼ਲ ਸਿੱਧੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ:
+- **ਇੰਟਰਐਕਟਿਵ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ**: ਡਾਇਨਾਮਿਕ ਇੰਟਰਫੇਸ ਅਤੇ ਰੀਅਲ-ਟਾਈਮ ਸਿਸਟਮ
+- **ਡਾਟਾ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ**: ਐਨੀਮੇਟਿਡ ਚਾਰਟ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਗ੍ਰਾਫਿਕਸ
+- **ਐਜੂਕੇਸ਼ਨਲ ਟੈਕਨੋਲੋਜੀ**: ਗੇਮੀਫਿਕੇਸ਼ਨ ਅਤੇ ਦਿਲਚਸਪ ਸਿੱਖਣ ਦੇ ਤਜਰਬੇ
+- **ਮੋਬਾਈਲ ਡਿਵੈਲਪਮੈਂਟ**: ਟਚ-ਅਧਾਰਿਤ ਇੰਟਰੈਕਸ਼ਨ ਅਤੇ ਪਰਫਾਰਮੈਂਸ ਓਪਟੀਮਾਈਜ਼ੇਸ਼ਨ
+- **ਸਿਮੂਲੇਸ਼ਨ ਸੌਫਟਵੇਅਰ**: ਫਿਜ਼ਿਕਸ ਇੰਜਨ ਅਤੇ ਰੀਅਲ-ਟਾਈਮ ਮਾਡਲਿੰਗ
+- **ਕ੍ਰੀਏਟਿਵ ਇੰਡਸਟਰੀਜ਼**: ਇੰਟਰਐਕਟਿਵ ਆਰਟ, ਮਨੋਰੰਜਨ, ਅਤੇ ਡਿਜ਼ੀਟਲ ਤਜਰਬੇ
+
+**ਪ੍ਰੋਫੈਸ਼ਨਲ ਕੌਸ਼ਲ ਪ੍ਰਾਪਤ ਕੀਤੇ**: ਹੁਣ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:
+- **ਆਰਕੀਟੈਕਟ** ਜਟਿਲ ਇੰਟਰਐਕਟਿਵ ਸਿਸਟਮ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਬਣਾਓ
+- **ਡੀਬੱਗ** ਰੀਅਲ-ਟਾਈਮ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਵਿਧੀਬੱਧ ਤਰੀਕਿਆਂ ਨਾਲ
+- **ਓਪਟੀਮਾਈਜ਼** ਪਰਫਾਰਮੈਂਸ ਲਈ ਸਹੀ ਯੂਜ਼ਰ ਤਜਰਬੇ
+- **ਡਿਜ਼ਾਈਨ** ਦਿਲਚਸਪ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਅਤੇ ਇੰਟਰਐਕਸ਼ਨ ਪੈਟਰਨ
+- **ਕੋਲਾਬਰੇਟ** ਤਕਨੀਕੀ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਸਹੀ ਕੋਡ ਆਰਗਨਾਈਜ਼ੇਸ਼ਨ ਨਾਲ
+
+**ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਸੰਕਲਪਾਂ ਵਿੱਚ ਮਾਹਰਤਾ**:
+- **ਰੀਅਲ-ਟਾਈਮ ਸਿਸਟਮ**: ਗੇਮ ਲੂਪ, ਫਰੇਮ ਰੇਟ ਮੈਨੇਜਮੈਂਟ, ਅਤੇ ਪਰਫਾਰਮੈਂਸ
+- **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਆਰਕੀਟੈਕਚਰ**: ਡਿਕਪਲਡ ਸਿਸਟਮ ਅਤੇ ਮੈਸੇਜ ਪਾਸਿੰਗ
+- **ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ**: ਜਟਿਲ ਡਾਟਾ ਹੈਂਡਲਿੰਗ ਅਤੇ ਲਾਈਫਸਾਈਕਲ ਮੈਨੇਜਮੈਂਟ
+- **ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਕੈਨਵਸ ਗ੍ਰਾਫਿਕਸ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ
+- **ਗੇਮ ਡਿਜ਼ਾਈਨ ਥਿਊਰੀ**: ਖਿਡਾਰੀ ਦੀ ਮਨੋਵਿਗਿਆਨ ਅਤੇ ਐਨਗੇਜਮੈਂਟ ਮਕੈਨਿਕਸ
+
+**ਅਗਲਾ ਪੱਧਰ**: ਤੁਸੀਂ ਉੱਚ-ਸਤਹ ਦੇ ਗੇਮ ਫਰੇਮਵਰਕ, 3D ਗ੍ਰਾਫਿਕਸ, ਮਲਟੀਪਲੇਅਰ ਸਿਸਟਮ ਦੀ ਖੋਜ ਕਰਨ ਜਾਂ ਪੇਸ਼ੇਵਰ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਭੂਮਿਕਾਵਾਂ ਵਿੱਚ ਜਾਣ ਲਈ ਤਿਆਰ ਹੋ!
+
+🌟 **ਅਚੀਵਮੈਂਟ ਅਨਲੌਕ ਕੀਤੀ**: ਤੁਸੀਂ ਪੂਰੀ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਯਾਤਰਾ ਪੂਰੀ ਕਰ ਲਈ ਹੈ ਅਤੇ ਸ਼ੁਰੂ ਤੋਂ ਇੱਕ ਪੇਸ਼ੇਵਰ-ਗੁਣਵੱਤਾ ਵਾਲਾ ਇੰਟਰਐਕਟਿਵ ਤਜਰਬਾ ਬਣਾਇਆ ਹੈ!
+
+**ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ!** 🎮✨
+
+## GitHub Copilot Agent Challenge 🚀
+
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
+
+**ਵੇਰਵਾ:** ਸਪੇਸ ਗੇਮ ਵਿੱਚ ਲੈਵਲ ਪ੍ਰਗਤੀ ਸਿਸਟਮ ਨੂੰ ਵਧਾਉਣ ਲਈ ਵਧੇਰੇ ਮੁਸ਼ਕਲ ਅਤੇ ਬੋਨਸ ਫੀਚਰ ਲਾਗੂ ਕਰੋ।
+
+**ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਮਲਟੀ-ਲੈਵਲ ਸਪੇਸ ਗੇਮ ਸਿਸਟਮ ਬਣਾਓ ਜਿੱਥੇ ਹਰ ਲੈਵਲ ਵਿੱਚ ਵਧੇਰੇ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਹੋਣ, ਜਿਨ੍ਹਾਂ ਦੀ ਗਤੀ ਅਤੇ ਸਿਹਤ ਵਧਦੀ ਹੈ। ਇੱਕ ਸਕੋਰਿੰਗ ਮਲਟੀਪਲਾਇਰ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਹਰ ਲੈਵਲ ਨਾਲ ਵਧਦਾ ਹੈ, ਅਤੇ ਪਾਵਰ-ਅਪ (ਜਿਵੇਂ ਕਿ ਰੈਪਿਡ ਫਾਇਰ ਜਾਂ ਸ਼ੀਲਡ) ਲਾਗੂ ਕਰੋ ਜੋ ਦੁਸ਼ਮਨ ਦੇ ਨਸ਼ਟ ਹੋਣ 'ਤੇ ਰੈਂਡਮ ਤੌਰ 'ਤੇ ਆਉਂਦੇ ਹਨ। ਲੈਵਲ ਪੂਰਾ ਕਰਨ ਦਾ ਬੋਨਸ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਮੌਜੂਦਾ ਸਕੋਰ ਅਤੇ ਜ਼ਿੰਦਗੀ ਦੇ ਨਾਲ ਸਕ੍ਰੀਨ 'ਤੇ ਮੌਜੂਦਾ ਲੈਵਲ ਦਿਖਾਓ।
+
+Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ [ਇਥੇ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)।
+
+## 🚀 ਵਿਕਲਪਿਕ ਵਧੀਆ ਚੈਲੈਂਜ
+
+**ਆਪਣੇ ਗੇਮ ਵਿੱਚ ਆਡੀਓ ਸ਼ਾਮਲ ਕਰੋ**: ਆਪਣੇ ਗੇਮਪਲੇ ਤਜਰਬੇ ਨੂੰ ਵਧਾਉਣ ਲਈ ਸਾਊਂਡ ਇਫੈਕਟਸ ਲਾਗੂ ਕਰੋ! ਹੇਠਾਂ ਦਿੱਤੇ ਲਈ ਆਡੀਓ ਸ਼ਾਮਲ ਕਰਨ ਬਾਰੇ ਸੋਚੋ:
+
+- **ਲੇਜ਼ਰ ਸ਼ਾਟਸ** ਜਦੋਂ ਖਿਡਾਰੀ ਫਾਇਰ ਕਰਦਾ ਹੈ
+- **ਦੁਸ਼ਮਨ ਦਾ ਨਸ਼ਟ** ਜਦੋਂ ਜਹਾਜ਼ ਹਿੱਟ ਹੁੰਦੇ ਹਨ
+- **ਹੀਰੋ ਡੈਮਜ** ਜਦੋਂ ਖਿਡਾਰੀ ਹਿੱਟ ਲੈਂਦਾ ਹੈ
+- **ਵਿਜੇਤਾ ਸੰਗੀਤ** ਜਦੋਂ ਗੇਮ ਜਿੱਤਿਆ ਜਾਂਦਾ ਹੈ
+- **ਹਾਰ ਦਾ ਸਾਊਂਡ** ਜਦੋਂ ਗੇਮ ਹਾਰਿਆ ਜਾਂਦਾ ਹੈ
+
+**ਆਡੀਓ ਲਾਗੂ ਕਰਨ ਦਾ ਉਦਾਹਰਨ:**
+
+```javascript
+// Create audio objects
+const laserSound = new Audio('assets/laser.wav');
+const explosionSound = new Audio('assets/explosion.wav');
+
+// Play sounds during game events
+function playLaserSound() {
+  laserSound.currentTime = 0; // Reset to beginning
+  laserSound.play();
+}
+```
+
+**ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ:**
+- **ਬਣਾਉਂਦਾ ਹੈ** ਵੱਖ-ਵੱਖ ਸਾਊਂਡ ਇਫੈਕਟਸ ਲਈ ਆਡੀਓ ਆਬਜੈਕਟ
+- **ਰੀਸੈਟ ਕਰਦਾ ਹੈ** `currentTime` ਤਾਕਿ ਤੇਜ਼-ਗਤੀ ਵਾਲੇ ਸਾਊਂਡ ਇਫੈਕਟਸ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ
+- **ਹੈਂਡਲ ਕਰਦਾ ਹੈ** ਬ੍ਰਾਊਜ਼ਰ autoplay ਨੀਤੀਆਂ ਨੂੰ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਤੋਂ ਸਾਊਂਡ ਟ੍ਰਿਗਰ ਕਰਕੇ
+- **ਮੈਨੇਜ ਕਰਦਾ ਹੈ** ਆਡੀਓ ਵਾਲੀਅਮ ਅਤੇ ਟਾਈਮਿੰਗ ਬਿਹਤਰ ਗੇਮ ਤਜਰਬੇ ਲਈ
+
+> 💡 **ਸਿੱਖਣ ਦਾ ਸਰੋਤ**: ਇਸ [ਆਡੀਓ ਸੈਂਡਬਾਕਸ](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) ਦੀ ਖੋਜ ਕਰੋ ਜਾਵਾਸਕ੍ਰਿਪਟ ਗੇਮਾਂ ਵਿੱਚ ਆਡੀਓ ਲਾਗੂ ਕਰਨ ਬਾਰੇ ਹੋਰ ਜਾਣਨ ਲਈ।
+
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼
+
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/40)
+
+## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
+
+ਤੁਹਾਡਾ ਅਸਾਈਨਮੈਂਟ ਇੱਕ ਨਵਾਂ ਸੈਂਪਲ ਗੇਮ ਬਣਾਉਣਾ ਹੈ, ਇਸ ਲਈ ਕੁਝ ਦਿਲਚਸਪ ਗੇਮਾਂ ਦੀ ਖੋਜ ਕਰੋ ਤਾਂ ਜੋ ਤੁਸੀਂ ਦੇਖ ਸਕੋ ਕਿ ਤੁਸੀਂ ਕਿਸ ਕਿਸਮ ਦਾ ਗੇਮ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ।
 
+## ਅਸਾਈਨਮੈਂਟ
 
+[ਸੈਂਪਲ ਗੇਮ ਬਣਾਓ](assignment.md)
 
 ---
 
-**ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+**ਅਸਵੀਕਰਤੀ**:  
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/7-bank-project/1-template-route/README.md b/translations/pa/7-bank-project/1-template-route/README.md
index d78044afc4..ed3db2587b 100644
--- a/translations/pa/7-bank-project/1-template-route/README.md
+++ b/translations/pa/7-bank-project/1-template-route/README.md
@@ -1,39 +1,86 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5d259f6962464ad91e671083aa0398f4",
-  "translation_date": "2025-10-22T17:58:36+00:00",
+  "original_hash": "351678bece18f07d9daa987a881fb062",
+  "translation_date": "2025-11-03T16:41:53+00:00",
   "source_file": "7-bank-project/1-template-route/README.md",
   "language_code": "pa"
 }
 -->
-# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਉਣਾ ਭਾਗ 1: HTML ਟੈਂਪਲੇਟ ਅਤੇ ਵੈੱਬ ਐਪ ਵਿੱਚ ਰੂਟਸ
+# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਉਣਾ ਭਾਗ 1: ਵੈੱਬ ਐਪ ਵਿੱਚ HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟਸ
+
+```mermaid
+journey
+    title Your Banking App Development Journey
+    section SPA Fundamentals
+      Understand single-page apps: 3: Student
+      Learn template concepts: 4: Student
+      Master DOM manipulation: 4: Student
+    section Routing Systems
+      Implement client-side routing: 4: Student
+      Handle browser history: 5: Student
+      Create navigation systems: 5: Student
+    section Professional Patterns
+      Build modular architecture: 5: Student
+      Apply best practices: 5: Student
+      Create user experiences: 5: Student
+```
 
 ਜਦੋਂ 1969 ਵਿੱਚ Apollo 11 ਦਾ ਗਾਈਡੈਂਸ ਕੰਪਿਊਟਰ ਚੰਦਰਮਾ ਵੱਲ ਜਾ ਰਿਹਾ ਸੀ, ਤਾਂ ਇਸ ਨੂੰ ਸਾਰੇ ਸਿਸਟਮ ਨੂੰ ਰੀਸਟਾਰਟ ਕੀਤੇ ਬਿਨਾਂ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ ਸਵਿੱਚ ਕਰਨਾ ਪਿਆ। ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵੀ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ - ਇਹ ਤੁਹਾਨੂੰ ਜੋ ਕੁਝ ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਹੈ ਉਸ ਨੂੰ ਬਦਲਦੇ ਹਨ ਬਿਨਾਂ ਸਾਰਾ ਕੁਝ ਮੁੜ ਲੋਡ ਕੀਤੇ। ਇਹ ਉਹ ਸਹੀ ਅਤੇ ਜਵਾਬਦੇਹ ਅਨੁਭਵ ਪੈਦਾ ਕਰਦਾ ਹੈ ਜਿਸ ਦੀ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਅੱਜ ਉਮੀਦ ਹੈ।
 
-ਪ੍ਰੰਪਰਾਗਤ ਵੈੱਬਸਾਈਟਾਂ ਦੇ ਉਲਟ, ਜੋ ਹਰ ਇੰਟਰੈਕਸ਼ਨ ਲਈ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਲੋਡ ਕਰਦੀਆਂ ਹਨ, ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਸ ਸਿਰਫ ਉਹ ਹਿੱਸੇ ਅਪਡੇਟ ਕਰਦੀਆਂ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ। ਇਹ ਪਹੁੰਚ, ਜਿਵੇਂ ਕਿ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਵੱਖ-ਵੱਖ ਡਿਸਪਲੇਅਜ਼ ਵਿੱਚ ਸਵਿੱਚ ਕਰਦਾ ਹੈ ਜਦੋਂ ਕਿ ਲਗਾਤਾਰ ਸੰਚਾਰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ, ਉਹ ਸਹੀ ਅਨੁਭਵ ਪੈਦਾ ਕਰਦਾ ਹੈ ਜਿਸ ਦੀ ਅਸੀਂ ਉਮੀਦ ਕਰਦੇ ਹਾਂ।
+ਪ੍ਰੰਪਰਾਗਤ ਵੈੱਬਸਾਈਟਾਂ ਦੇ ਉਲਟ, ਜੋ ਹਰ ਕ੍ਰਿਆਵਾਂ ਲਈ ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਮੁੜ ਲੋਡ ਕਰਦੀਆਂ ਹਨ, ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਸ ਸਿਰਫ ਉਹ ਹਿੱਸੇ ਅਪਡੇਟ ਕਰਦੀਆਂ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ। ਇਹ ਪਹੁੰਚ, ਬਿਲਕੁਲ ਉਸ ਤਰ੍ਹਾਂ ਜਿਵੇਂ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਵੱਖ-ਵੱਖ ਡਿਸਪਲੇਅਜ਼ ਵਿੱਚ ਸਵਿੱਚ ਕਰਦਾ ਹੈ ਜਦੋਂ ਕਿ ਲਗਾਤਾਰ ਸੰਚਾਰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ, ਉਹ ਸਹੀ ਅਨੁਭਵ ਪੈਦਾ ਕਰਦਾ ਹੈ ਜਿਸ ਦੀ ਅਸੀਂ ਉਮੀਦ ਕਰਦੇ ਹਾਂ।
 
-ਇਹ ਹੈ ਜੋ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਅਨੁਭਵ ਨੂੰ ਬਹੁਤ ਵੱਖਰਾ ਬਣਾਉਂਦਾ ਹੈ:
+ਇਹ ਅੰਤਰ ਕਿਵੇਂ ਨਜ਼ਰ ਆਉਂਦਾ ਹੈ:
 
 | ਪ੍ਰੰਪਰਾਗਤ ਮਲਟੀ-ਪੇਜ ਐਪਸ | ਆਧੁਨਿਕ ਸਿੰਗਲ-ਪੇਜ ਐਪਸ |
 |----------------------------|-------------------------|
-| **ਨੈਵੀਗੇਸ਼ਨ** | ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਪੂਰਾ ਪੇਜ ਮੁੜ ਲੋਡ | ਤੁਰੰਤ ਸਮੱਗਰੀ ਸਵਿੱਚ |
+| **ਨੈਵੀਗੇਸ਼ਨ** | ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਪੂਰਾ ਪੰਨਾ ਮੁੜ ਲੋਡ | ਤੁਰੰਤ ਸਮੱਗਰੀ ਸਵਿੱਚ |
 | **ਪਰਫਾਰਮੈਂਸ** | ਪੂਰੇ HTML ਡਾਊਨਲੋਡ ਦੇ ਕਾਰਨ ਹੌਲੀ | ਹਿੱਸਾ ਅਪਡੇਟ ਨਾਲ ਤੇਜ਼ |
-| **ਉਪਭੋਗਤਾ ਅਨੁਭਵ** | ਪੇਜ ਫਲੈਸ਼ | ਸਹੀ, ਐਪ-ਜਿਵੇਂ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ |
-| **ਡਾਟਾ ਸ਼ੇਅਰਿੰਗ** | ਪੇਜਾਂ ਵਿੱਚ ਮੁਸ਼ਕਲ | ਸੌਖਾ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ |
-| **ਡਿਵੈਲਪਮੈਂਟ** | ਕਈ HTML ਫਾਈਲਾਂ ਨੂੰ ਸੰਭਾਲਣਾ | ਇੱਕ HTML ਨਾਲ ਡਾਇਨਾਮਿਕ ਟੈਂਪਲੇਟ |
+| **ਉਪਭੋਗਤਾ ਅਨੁਭਵ** | ਪੰਨਾ ਫਲੈਸ਼ | ਸਹੀ, ਐਪ-ਜਿਵੇਂ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ |
+| **ਡਾਟਾ ਸਾਂਝਾ ਕਰਨਾ** | ਪੰਨਿਆਂ ਵਿੱਚ ਮੁਸ਼ਕਲ | ਸੌਖਾ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ |
+| **ਡਿਵੈਲਪਮੈਂਟ** | ਕਈ HTML ਫਾਈਲਾਂ ਨੂੰ ਸੰਭਾਲਣਾ | ਇੱਕ HTML ਨਾਲ ਗਤੀਸ਼ੀਲ ਟੈਂਪਲੇਟ |
 
 **ਵਿਕਾਸ ਦੀ ਸਮਝ:**
 - **ਪ੍ਰੰਪਰਾਗਤ ਐਪਸ** ਹਰ ਨੈਵੀਗੇਸ਼ਨ ਕਾਰਵਾਈ ਲਈ ਸਰਵਰ ਰਿਕਵੈਸਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ
-- **ਆਧੁਨਿਕ SPAs** ਇੱਕ ਵਾਰ ਲੋਡ ਹੁੰਦੇ ਹਨ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਡਾਇਨਾਮਿਕ ਤਰੀਕੇ ਨਾਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਪਡੇਟ ਕਰਦੇ ਹਨ
-- **ਉਪਭੋਗਤਾ ਦੀ ਉਮੀਦਾਂ** ਹੁਣ ਤੁਰੰਤ, ਸਹੀ ਇੰਟਰੈਕਸ਼ਨ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ
+- **ਆਧੁਨਿਕ SPAs** ਇੱਕ ਵਾਰ ਲੋਡ ਹੁੰਦੇ ਹਨ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਪਡੇਟ ਕਰਦੇ ਹਨ
+- **ਉਪਭੋਗਤਾ ਦੀ ਉਮੀਦਾਂ** ਹੁਣ ਤੁਰੰਤ, ਸਹੀ ਅੰਤਰਕ੍ਰਿਆਵਾਂ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ
 - **ਪਰਫਾਰਮੈਂਸ ਫਾਇਦੇ** ਵਿੱਚ ਘੱਟ ਬੈਂਡਵਿਡਥ ਅਤੇ ਤੇਜ਼ ਜਵਾਬ ਸ਼ਾਮਲ ਹਨ
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜਿਸ ਵਿੱਚ ਕਈ ਸਕ੍ਰੀਨ ਹਨ ਜੋ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਇੱਕ ਦੂਜੇ ਨਾਲ ਜੁੜੇ ਹੋਏ ਹਨ। ਜਿਵੇਂ ਕਿ ਵਿਗਿਆਨੀ ਵੱਖ-ਵੱਖ ਪ੍ਰਯੋਗਾਂ ਲਈ ਮੁੜ-ਕੰਫਿਗਰ ਕੀਤੇ ਜਾ ਸਕਣ ਵਾਲੇ ਮੋਡਿਊਲਰ ਸੰਦਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਅਸੀਂ HTML ਟੈਂਪਲੇਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਜੋ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਹਿੱਸੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਜਰੂਰਤ ਪੜਨ 'ਤੇ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜਿਸ ਵਿੱਚ ਕਈ ਸਕ੍ਰੀਨ ਸਹੀ ਤੌਰ 'ਤੇ ਇੱਕ ਦੂਜੇ ਨਾਲ ਜੁੜੇ ਹੋਣਗੇ। ਜਿਵੇਂ ਵਿਗਿਆਨੀ ਵੱਖ-ਵੱਖ ਪ੍ਰਯੋਗਾਂ ਲਈ ਮੁੜ-ਕੰਫਿਗਰ ਕੀਤੇ ਜਾ ਸਕਣ ਵਾਲੇ ਮੋਡਿਊਲਰ ਸੰਦਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਅਸੀਂ HTML ਟੈਂਪਲੇਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਜੋ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਹਿੱਸੇ ਵਜੋਂ ਜਰੂਰਤ ਮੁਤਾਬਕ ਦਿਖਾਏ ਜਾ ਸਕਦੇ ਹਨ।
+
+ਤੁਹਾਨੂੰ HTML ਟੈਂਪਲੇਟਾਂ (ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਲਈ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਬਲੂਪ੍ਰਿੰਟ), ਜਾਵਾਸਕ੍ਰਿਪਟ ਰੂਟਿੰਗ (ਸਕ੍ਰੀਨਾਂ ਵਿੱਚ ਸਵਿੱਚ ਕਰਨ ਵਾਲਾ ਸਿਸਟਮ), ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਹਿਸਟਰੀ API (ਜੋ ਬੈਕ ਬਟਨ ਨੂੰ ਉਮੀਦ ਮੁਤਾਬਕ ਕੰਮ ਕਰਨ ਦਿੰਦਾ ਹੈ) ਨਾਲ ਕੰਮ ਕਰਨਾ ਪਵੇਗਾ। ਇਹ ਉਹੀ ਮੂਲ ਤਕਨੀਕਾਂ ਹਨ ਜੋ React, Vue, ਅਤੇ Angular ਵਰਗੇ ਫਰੇਮਵਰਕਾਂ ਦੁਆਰਾ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।
 
-ਤੁਹਾਨੂੰ HTML ਟੈਂਪਲੇਟਾਂ (ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਲਈ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਬਲੂਪ੍ਰਿੰਟ), ਜਾਵਾਸਕ੍ਰਿਪਟ ਰੂਟਿੰਗ (ਸਿਸਟਮ ਜੋ ਸਕ੍ਰੀਨਾਂ ਵਿੱਚ ਸਵਿੱਚ ਕਰਦਾ ਹੈ), ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਹਿਸਟਰੀ API (ਜੋ ਬੈਕ ਬਟਨ ਨੂੰ ਉਮੀਦ ਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦਾ ਹੈ) ਨਾਲ ਕੰਮ ਕਰਨਾ ਪਵੇਗਾ। ਇਹ ਉਹੀ ਮੂਲ ਤਕਨੀਕਾਂ ਹਨ ਜੋ React, Vue, ਅਤੇ Angular ਵਰਗੇ ਫਰੇਮਵਰਕਾਂ ਦੁਆਰਾ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।
+ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ ਬੈਂਕਿੰਗ ਐਪ ਹੋਵੇਗਾ ਜੋ ਪੇਸ਼ੇਵਰ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਸਿਧਾਂਤਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ।
 
-ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ ਬੈਂਕਿੰਗ ਐਪ ਹੋਵੇਗਾ ਜੋ ਪੇਸ਼ੇਵਰ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਸਿਧਾਂਤਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ।
+```mermaid
+mindmap
+  root((Single-Page Applications))
+    Architecture
+      Template System
+      Client-side Routing
+      State Management
+      Event Handling
+    Templates
+      Reusable Components
+      Dynamic Content
+      DOM Manipulation
+      Content Switching
+    Routing
+      URL Management
+      History API
+      Navigation Logic
+      Browser Integration
+    User Experience
+      Fast Navigation
+      Smooth Transitions
+      Consistent State
+      Modern Interactions
+    Performance
+      Reduced Server Requests
+      Faster Page Transitions
+      Efficient Resource Usage
+      Better Responsiveness
+```
 
 ## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 
@@ -41,7 +88,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### ਤੁਹਾਨੂੰ ਕੀ ਚਾਹੀਦਾ ਹੈ
 
-ਅਸੀਂ ਆਪਣੇ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਟੈਸਟ ਕਰਨ ਲਈ ਇੱਕ ਲੋਕਲ ਵੈੱਬ ਸਰਵਰ ਦੀ ਲੋੜ ਹੋਵੇਗੀ – ਚਿੰਤਾ ਨਾ ਕਰੋ, ਇਹ ਜ਼ਿਆਦਾ ਮੁਸ਼ਕਲ ਨਹੀਂ ਹੈ! ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਤੋਂ ਇੱਕ ਸੈਟਅਪ ਨਹੀਂ ਹੈ, ਤਾਂ ਸਿਰਫ [Node.js](https://nodejs.org) ਇੰਸਟਾਲ ਕਰੋ ਅਤੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਤੋਂ `npx lite-server` ਚਲਾਓ। ਇਹ ਸਹੀ ਕਮਾਂਡ ਇੱਕ ਲੋਕਲ ਸਰਵਰ ਚਲਾਉਂਦੀ ਹੈ ਅਤੇ ਤੁਹਾਡਾ ਐਪ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹਦੀ ਹੈ।
+ਸਾਨੂੰ ਆਪਣੀ ਬੈਂਕਿੰਗ ਐਪ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਇੱਕ ਸਥਾਨਕ ਵੈੱਬ ਸਰਵਰ ਦੀ ਲੋੜ ਹੋਵੇਗੀ – ਚਿੰਤਾ ਨਾ ਕਰੋ, ਇਹ ਸੁਵਿਧਾਜਨਕ ਹੈ! ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਤੋਂ ਇੱਕ ਸੈਟਅਪ ਨਹੀਂ ਹੈ, ਤਾਂ ਸਿਰਫ [Node.js](https://nodejs.org) ਇੰਸਟਾਲ ਕਰੋ ਅਤੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਤੋਂ `npx lite-server` ਚਲਾਓ। ਇਹ ਸਹੂਲਤਮਈ ਕਮਾਂਡ ਇੱਕ ਸਥਾਨਕ ਸਰਵਰ ਚਲਾਉਂਦੀ ਹੈ ਅਤੇ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹਦੀ ਹੈ।
 
 ### ਤਿਆਰੀ
 
@@ -62,13 +109,13 @@ CO_OP_TRANSLATOR_METADATA:
 ```
 
 **ਇਹ ਬੋਇਲਰਪਲੇਟ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:**
-- **HTML5 ਦਸਤਾਵੇਜ਼ ਦੀ ਬਣਤਰ** ਨੂੰ ਸਹੀ DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਨਾਲ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ
-- **ਅੰਤਰਰਾਸ਼ਟਰੀ ਟੈਕਸਟ ਸਹਾਇਤਾ ਲਈ** UTF-8 ਕੈਰੈਕਟਰ ਐਨਕੋਡਿੰਗ ਨੂੰ ਸੰਰਚਿਤ ਕਰਦਾ ਹੈ
-- **ਮੋਬਾਈਲ ਅਨੁਕੂਲਤਾ ਲਈ** viewport ਮੈਟਾ ਟੈਗ ਨਾਲ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਨੂੰ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ
-- **ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ** ਇੱਕ ਵਰਣਨਾਤਮਕ ਸਿਰਲੇਖ ਸੈਟ ਕਰਦਾ ਹੈ
-- **ਸਾਫ ਸਰੀਰ ਭਾਗ ਬਣਾਉਂਦਾ ਹੈ** ਜਿੱਥੇ ਅਸੀਂ ਆਪਣਾ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ
+- **ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** HTML5 ਦਸਤਾਵੇਜ਼ ਦੀ ਬਣਤਰ ਸਹੀ DOCTYPE ਘੋਸ਼ਣਾ ਨਾਲ
+- **ਕੰਫਿਗਰ ਕਰਦਾ ਹੈ** ਅੰਤਰਰਾਸ਼ਟਰੀ ਟੈਕਸਟ ਸਹਾਇਤਾ ਲਈ UTF-8 ਅੱਖਰ ਕੋਡਿੰਗ
+- **ਸਮਰਥਨ ਦਿੰਦਾ ਹੈ** ਮੋਬਾਈਲ ਅਨੁਕੂਲਤਾ ਲਈ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਨਾਲ ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ
+- **ਸੈਟ ਕਰਦਾ ਹੈ** ਇੱਕ ਵਰਣਨਾਤਮਕ ਸਿਰਲੇਖ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
+- **ਬਣਾਉਂਦਾ ਹੈ** ਇੱਕ ਸਾਫ ਸਰੀਰ ਦਾ ਹਿੱਸਾ ਜਿੱਥੇ ਅਸੀਂ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ
 
-> 📁 **ਪ੍ਰੋਜੈਕਟ ਬਣਤਰ ਝਲਕ**
+> 📁 **ਪ੍ਰੋਜੈਕਟ ਬਣਤਰ ਦਾ ਪੂਰਵ ਦਰਸ਼ਨ**
 > 
 > **ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਸ਼ਾਮਲ ਹੋਵੇਗਾ:**
 > ```
@@ -87,34 +134,52 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## HTML ਟੈਂਪਲੇਟ
 
-ਟੈਂਪਲੇਟ ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਇੱਕ ਮੂਲ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ। ਜਦੋਂ ਗੁਟਨਬਰਗ ਨੇ 1440 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਮੂਵਏਬਲ ਟਾਈਪ ਪ੍ਰਿੰਟਿੰਗ ਦੀ ਖੋਜ ਕੀਤੀ, ਤਾਂ ਉਸ ਨੇ ਸਮਝਿਆ ਕਿ ਪੂਰੇ ਪੇਜਾਂ ਨੂੰ ਖੋਦਣ ਦੀ ਬਜਾਏ, ਉਹ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਅੱਖਰ ਬਲਾਕ ਬਣਾਉਣ ਅਤੇ ਜਰੂਰਤ ਅਨੁਸਾਰ ਉਨ੍ਹਾਂ ਨੂੰ ਸਜਾਉਣ ਕਰ ਸਕਦਾ ਹੈ। HTML ਟੈਂਪਲੇਟ ਇਸੇ ਸਿਧਾਂਤ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ - ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਵੱਖ-ਵੱਖ HTML ਫਾਈਲਾਂ ਬਣਾਉਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਬਣਤਰਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ ਜੋ ਜਰੂਰਤ ਪੈਣ 'ਤੇ ਦਿਖਾਈ ਜਾ ਸਕਦੀਆਂ ਹਨ।
+ਟੈਂਪਲੇਟ ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਇੱਕ ਮੂਲ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ। ਜਦੋਂ ਗੁਟਨਬਰਗ ਨੇ 1440 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਮੂਵਏਬਲ ਟਾਈਪ ਪ੍ਰਿੰਟਿੰਗ ਦੀ ਖੋਜ ਕੀਤੀ, ਤਾਂ ਉਸਨੇ ਸਮਝਿਆ ਕਿ ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਖੋਦਣ ਦੀ ਬਜਾਏ, ਉਹ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਅੱਖਰ ਬਲਾਕ ਬਣਾਉਣ ਅਤੇ ਜਰੂਰਤ ਮੁਤਾਬਕ ਉਨ੍ਹਾਂ ਨੂੰ ਸਜਾ ਸਕਦਾ ਹੈ। HTML ਟੈਂਪਲੇਟ ਇਸੇ ਸਿਧਾਂਤ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ - ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਵੱਖ-ਵੱਖ HTML ਫਾਈਲਾਂ ਬਣਾਉਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਬਣਤਰਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ ਜੋ ਜਰੂਰਤ ਪੈਣ 'ਤੇ ਦਿਖਾਈ ਜਾ ਸਕਦੇ ਹਨ।
+
+```mermaid
+flowchart TD
+    A["📋 Template Definition"] --> B["💬 Hidden in DOM"]
+    B --> C["🔍 JavaScript Finds Template"]
+    C --> D["📋 Clone Template Content"]
+    D --> E["🔗 Attach to Visible DOM"]
+    E --> F["👁️ User Sees Content"]
+    
+    G["Login Template"] --> A
+    H["Dashboard Template"] --> A
+    I["Future Templates"] --> A
+    
+    style A fill:#e3f2fd
+    style D fill:#e8f5e8
+    style F fill:#fff3e0
+    style B fill:#f3e5f5
+```
 
-ਟੈਂਪਲੇਟਾਂ ਨੂੰ ਆਪਣੇ ਐਪ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਲਈ ਬਲੂਪ੍ਰਿੰਟ ਵਜੋਂ ਸੋਚੋ। ਜਿਵੇਂ ਕਿ ਇੱਕ ਆਰਕੀਟੈਕਟ ਇੱਕ ਬਲੂਪ੍ਰਿੰਟ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਕਈ ਵਾਰ ਵਰਤਦਾ ਹੈ ਬਜਾਏ ਇੱਕੋ ਜਿਹੇ ਕਮਰੇ ਦੁਬਾਰਾ ਖਿੱਚਣ ਦੇ, ਅਸੀਂ ਟੈਂਪਲੇਟ ਇੱਕ ਵਾਰ ਬਣਾਉਂਦੇ ਹਾਂ ਅਤੇ ਜਰੂਰਤ ਪੈਣ 'ਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਵਰਤਦੇ ਹਾਂ। ਬ੍ਰਾਊਜ਼ਰ ਇਹਨਾਂ ਟੈਂਪਲੇਟਾਂ ਨੂੰ ਲੁਕਾ ਕੇ ਰੱਖਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਉਨ੍ਹਾਂ ਨੂੰ ਐਕਟੀਵੇਟ ਨਹੀਂ ਕਰਦਾ।
+ਟੈਂਪਲੇਟਾਂ ਨੂੰ ਆਪਣੇ ਐਪ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਲਈ ਬਲੂਪ੍ਰਿੰਟ ਵਜੋਂ ਸੋਚੋ। ਜਿਵੇਂ ਇੱਕ ਆਰਕੀਟੈਕਟ ਇੱਕ ਬਲੂਪ੍ਰਿੰਟ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਕਈ ਵਾਰ ਵਰਤਦਾ ਹੈ ਬਜਾਏ ਇੱਕੋ ਜਿਹੇ ਕਮਰੇ ਨੂੰ ਮੁੜ ਡਰਾਅ ਕਰਨ ਦੇ, ਅਸੀਂ ਟੈਂਪਲੇਟ ਇੱਕ ਵਾਰ ਬਣਾਉਂਦੇ ਹਾਂ ਅਤੇ ਜਰੂਰਤ ਮੁਤਾਬਕ ਇਸਨੂੰ ਵਰਤਦੇ ਹਾਂ। ਬ੍ਰਾਊਜ਼ਰ ਇਹਨਾਂ ਟੈਂਪਲੇਟਾਂ ਨੂੰ ਲੁਕਾ ਕੇ ਰੱਖਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਸਨੂੰ ਐਕਟੀਵੇਟ ਨਹੀਂ ਕਰਦਾ।
 
-ਜੇ ਤੁਸੀਂ ਵੈੱਬ ਪੇਜ ਲਈ ਕਈ ਸਕ੍ਰੀਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇੱਕ ਹੱਲ ਇਹ ਹੋਵੇਗਾ ਕਿ ਤੁਸੀਂ ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਇੱਕ HTML ਫਾਈਲ ਬਣਾਓ ਜੋ ਤੁਸੀਂ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਹਾਲਾਂਕਿ, ਇਸ ਹੱਲ ਨਾਲ ਕੁਝ ਅਸੁਵਿਧਾ ਆਉਂਦੀ ਹੈ:
+ਜੇ ਤੁਸੀਂ ਵੈੱਬ ਪੰਨੇ ਲਈ ਕਈ ਸਕ੍ਰੀਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇੱਕ ਹੱਲ ਇਹ ਹੋਵੇਗਾ ਕਿ ਤੁਸੀਂ ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਇੱਕ HTML ਫਾਈਲ ਬਣਾਓ। ਹਾਲਾਂਕਿ, ਇਸ ਹੱਲ ਨਾਲ ਕੁਝ ਅਸੁਵਿਧਾਵਾਂ ਆਉਂਦੀਆਂ ਹਨ:
 
-- ਸਕ੍ਰੀਨ ਸਵਿੱਚ ਕਰਨ ਸਮੇਂ ਤੁਹਾਨੂੰ ਪੂਰੇ HTML ਨੂੰ ਮੁੜ ਲੋਡ ਕਰਨਾ ਪਵੇਗਾ, ਜੋ ਹੌਲੀ ਹੋ ਸਕਦੀ ਹੈ।
+- ਸਕ੍ਰੀਨ ਸਵਿੱਚ ਕਰਨ ਸਮੇਂ ਤੁਹਾਨੂੰ ਪੂਰੇ HTML ਨੂੰ ਮੁੜ ਲੋਡ ਕਰਨਾ ਪਵੇਗਾ, ਜੋ ਹੌਲੀ ਹੋ ਸਕਦਾ ਹੈ।
 - ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਵਿੱਚ ਡਾਟਾ ਸਾਂਝਾ ਕਰਨਾ ਮੁਸ਼ਕਲ ਹੈ।
 
-ਇੱਕ ਹੋਰ ਪਹੁੰਚ ਇਹ ਹੈ ਕਿ ਸਿਰਫ ਇੱਕ HTML ਫਾਈਲ ਹੋਵੇ, ਅਤੇ [HTML ਟੈਂਪਲੇਟ](https://developer.mozilla.org/docs/Web/HTML/Element/template) ਨੂੰ `<template>` ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇ। ਇੱਕ ਟੈਂਪਲੇਟ ਇੱਕ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ HTML ਬਲਾਕ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਦਿਖਾਇਆ ਨਹੀਂ ਜਾਂਦਾ, ਅਤੇ ਇਸਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰਨਟਾਈਮ 'ਤੇ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
+ਇੱਕ ਹੋਰ ਪਹੁੰਚ ਇਹ ਹੈ ਕਿ ਸਿਰਫ ਇੱਕ HTML ਫਾਈਲ ਹੋਵੇ, ਅਤੇ `<template>` ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ [HTML ਟੈਂਪਲੇਟ](https://developer.mozilla.org/docs/Web/HTML/Element/template) ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਜਾਣ। ਇੱਕ ਟੈਂਪਲੇਟ ਇੱਕ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ HTML ਬਲਾਕ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਦਿਖਾਇਆ ਨਹੀਂ ਜਾਂਦਾ, ਅਤੇ ਇਸਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰਨਟਾਈਮ 'ਤੇ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
 
 ### ਆਓ ਇਸਨੂੰ ਬਣਾਈਏ
 
-ਅਸੀਂ ਇੱਕ ਬੈਂਕ ਐਪ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜਿਸ ਵਿੱਚ ਦੋ ਮੁੱਖ ਸਕ੍ਰੀਨ ਹਨ: ਇੱਕ ਲੌਗਇਨ ਪੇਜ ਅਤੇ ਇੱਕ ਡੈਸ਼ਬੋਰਡ। ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ HTML ਬਾਡੀ ਵਿੱਚ ਇੱਕ ਪਲੇਸਹੋਲਡਰ ਐਲੀਮੈਂਟ ਸ਼ਾਮਲ ਕਰੀਏ - ਇਹ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਸਾਡੇ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਦਿਖਾਈ ਦੇਣਗੇ:
+ਅਸੀਂ ਇੱਕ ਬੈਂਕ ਐਪ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜਿਸ ਵਿੱਚ ਦੋ ਮੁੱਖ ਸਕ੍ਰੀਨ ਹੋਣਗੇ: ਇੱਕ ਲੌਗਇਨ ਪੰਨਾ ਅਤੇ ਇੱਕ ਡੈਸ਼ਬੋਰਡ। ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ HTML ਬਾਡੀ ਵਿੱਚ ਇੱਕ ਪਲੇਸਹੋਲਡਰ ਤੱਤ ਸ਼ਾਮਲ ਕਰੀਏ - ਇਹ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਸਾਡੇ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਦਿਖਾਈ ਦੇਣਗੇ:
 
 ```html
 <div id="app">Loading...</div>
 ```
 
 **ਇਸ ਪਲੇਸਹੋਲਡਰ ਦੀ ਸਮਝ:**
-- **ਇੱਕ ਕੰਟੇਨਰ ਬਣਾਉਂਦਾ ਹੈ** ਜਿਸਦਾ ID "app" ਹੈ ਜਿੱਥੇ ਸਾਰੇ ਸਕ੍ਰੀਨ ਦਿਖਾਈ ਦੇਣਗੇ
-- **ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਹਿਲੀ ਸਕ੍ਰੀਨ ਸ਼ੁਰੂ ਕਰਨ ਤੱਕ** ਇੱਕ ਲੋਡਿੰਗ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਹੈ
-- **ਸਾਡੇ ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਲਈ** ਇੱਕ ਸਿੰਗਲ ਮਾਊਂਟਿੰਗ ਪੌਇੰਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
-- **ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਸੌਖਾ ਟਾਰਗੇਟਿੰਗ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ** `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਬਣਾਉਂਦਾ ਹੈ** ਇੱਕ ਕੰਟੇਨਰ ਜਿਸਦਾ ID "app" ਹੈ ਜਿੱਥੇ ਸਾਰੇ ਸਕ੍ਰੀਨ ਦਿਖਾਈ ਦੇਣਗੇ
+- **ਦਿਖਾਉਂਦਾ ਹੈ** ਇੱਕ ਲੋਡਿੰਗ ਸੁਨੇਹਾ ਜਦੋਂ ਤੱਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਹਿਲਾ ਸਕ੍ਰੀਨ ਸ਼ੁਰੂ ਨਹੀਂ ਕਰਦਾ
+- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਸਾਡੇ ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਲਈ ਇੱਕ ਸਿੰਗਲ ਮਾਊਂਟਿੰਗ ਪੌਇੰਟ
+- **ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ** ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਟਾਰਗਟਿੰਗ `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਕਿਉਂਕਿ ਇਸ ਐਲੀਮੈਂਟ ਦੀ ਸਮੱਗਰੀ ਬਦਲੀ ਜਾਵੇਗੀ, ਅਸੀਂ ਇਸ ਵਿੱਚ ਇੱਕ ਲੋਡਿੰਗ ਸੁਨੇਹਾ ਜਾਂ ਇੰਡੀਕੇਟਰ ਰੱਖ ਸਕਦੇ ਹਾਂ ਜੋ ਐਪ ਲੋਡ ਹੋਣ ਸਮੇਂ ਦਿਖਾਈ ਦੇਵੇਗਾ।
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਕਿਉਂਕਿ ਇਸ ਤੱਤ ਦੀ ਸਮੱਗਰੀ ਬਦਲੀ ਜਾਵੇਗੀ, ਅਸੀਂ ਇੱਕ ਲੋਡਿੰਗ ਸੁਨੇਹਾ ਜਾਂ ਇੰਡੀਕੇਟਰ ਰੱਖ ਸਕਦੇ ਹਾਂ ਜੋ ਐਪ ਲੋਡ ਹੋਣ ਸਮੇਂ ਦਿਖਾਈ ਦੇਵੇਗਾ।
 
-ਅਗਲੇ ਕਦਮ ਵਿੱਚ, ਆਓ ਲੌਗਇਨ ਪੇਜ ਲਈ HTML ਟੈਂਪਲੇਟ ਨੂੰ ਹੇਠਾਂ ਸ਼ਾਮਲ ਕਰੀਏ। ਇਸ ਵਿੱਚ ਅਜੇ ਲਈ ਸਿਰਫ ਇੱਕ ਸਿਰਲੇਖ ਅਤੇ ਇੱਕ ਸੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜਿਸ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਹੋਵੇਗਾ ਜੋ ਅਸੀਂ ਨੈਵੀਗੇਸ਼ਨ ਕਰਨ ਲਈ ਵਰਤਾਂਗੇ।
+ਅਗਲੇ ਕਦਮ ਵਿੱਚ, ਆਓ ਲੌਗਇਨ ਪੰਨੇ ਲਈ HTML ਟੈਂਪਲੇਟ ਨੂੰ ਹੇਠਾਂ ਸ਼ਾਮਲ ਕਰੀਏ। ਇਸ ਵਿੱਚ ਅਜੇ ਤੱਕ ਸਿਰਫ ਇੱਕ ਸਿਰਲੇਖ ਅਤੇ ਇੱਕ ਸੈਕਸ਼ਨ ਹੋਵੇਗਾ ਜਿਸ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਹੋਵੇਗਾ ਜੋ ਨੈਵੀਗੇਸ਼ਨ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ।
 
 ```html
 <template id="login">
@@ -125,17 +190,17 @@ CO_OP_TRANSLATOR_METADATA:
 </template>
 ```
 
-**ਇਸ ਲੌਗਇਨ ਟੈਂਪਲੇਟ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ:**
-- **ਇੱਕ ਟੈਂਪਲੇਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ** ਜਿਸਦਾ ਵਿਲੱਖਣ ਪਛਾਣਕਰਤਾ "login" ਹੈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਟਾਰਗੇਟਿੰਗ ਲਈ
-- **ਇੱਕ ਮੁੱਖ ਸਿਰਲੇਖ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਜੋ ਐਪ ਦੀ ਬ੍ਰਾਂਡਿੰਗ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ
-- **ਇੱਕ ਸੈਮਾਂਟਿਕ `<section>` ਐਲੀਮੈਂਟ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਜੋ ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ ਨੂੰ ਸਮੂਹਿਤ ਕਰਦਾ ਹੈ
-- **ਇੱਕ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਡੈਸ਼ਬੋਰਡ ਵੱਲ ਰੂਟ ਕਰੇਗਾ
+**ਇਸ ਲੌਗਇਨ ਟੈਂਪਲੇਟ ਦੀ ਵਿਸ਼ਲੇਸ਼ਣ:**
+- **ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ** ਇੱਕ ਟੈਂਪਲੇਟ ਜਿਸਦਾ ਵਿਲੱਖਣ ਪਛਾਣਕਰਤਾ "login" ਹੈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਟਾਰਗਟਿੰਗ ਲਈ
+- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਇੱਕ ਮੁੱਖ ਸਿਰਲੇਖ ਜੋ ਐਪ ਦੀ ਬ੍ਰਾਂਡਿੰਗ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ
+- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਇੱਕ ਸੈਮਾਂਟਿਕ `<section>` ਤੱਤ ਜੋ ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ ਨੂੰ ਸਮੂਹਿਤ ਕਰਦਾ ਹੈ
+- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਇੱਕ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਡੈਸ਼ਬੋਰਡ ਵੱਲ ਰੂਟ ਕਰੇਗਾ
 
-ਫਿਰ ਅਸੀਂ ਡੈਸ਼ਬੋਰਡ ਪੇਜ ਲਈ ਇੱਕ ਹੋਰ HTML ਟੈਂਪਲੇਟ ਸ਼ਾਮਲ ਕਰਾਂਗੇ। ਇਸ ਪੇਜ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਸੈਕਸ਼ਨ ਹੋਣਗੇ:
+ਫਿਰ ਅਸੀਂ ਡੈਸ਼ਬੋਰਡ ਪੰਨੇ ਲਈ ਇੱਕ ਹੋਰ HTML ਟੈਂਪਲੇਟ ਸ਼ਾਮਲ ਕਰਾਂਗੇ। ਇਸ ਪੰਨੇ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਸੈਕਸ਼ਨ ਹੋਣਗੇ:
 
 - ਇੱਕ ਸਿਰਲੇਖ ਜਿਸ ਵਿੱਚ ਸਿਰਲੇਖ ਅਤੇ ਲੌਗਆਉਟ ਲਿੰਕ ਹੋਵੇਗਾ
-- ਬੈਂਕ ਖਾਤੇ ਦਾ ਮੌਜੂਦਾ ਬੈਲੈਂਸ
-- ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨਾਂ ਦੀ ਸੂਚੀ, ਜੋ ਇੱਕ ਟੇਬਲ ਵਿੱਚ ਦਿਖਾਈ ਜਾਵੇਗੀ
+- ਬੈਂਕ ਖਾਤੇ ਦੀ ਮੌਜੂਦਾ ਬਕਾਇਆ ਰਕਮ
+- ਲੈਣ-ਦੇਣ ਦੀ ਸੂਚੀ, ਜੋ ਇੱਕ ਟੇਬਲ ਵਿੱਚ ਦਿਖਾਈ ਜਾਵੇਗੀ
 
 ```html
 <template id="dashboard">
@@ -162,58 +227,135 @@ CO_OP_TRANSLATOR_METADATA:
 </template>
 ```
 
-**ਆਓ ਇਸ ਡੈਸ਼ਬੋਰਡ ਦੇ ਹਰ ਹਿੱਸੇ ਨੂੰ ਸਮਝੀਏ:**
-- **ਸਕ੍ਰੀਨ ਨੂੰ ਸੈਮਾਂਟਿਕ `<header>` ਐਲੀਮੈਂਟ ਨਾਲ ਬਣਾਉਂਦਾ ਹੈ** ਜਿਸ ਵਿੱਚ ਨੈਵੀਗੇਸ਼ਨ ਸ਼ਾਮਲ ਹੈ
-- **ਐਪ ਸਿਰਲੇਖ ਨੂੰ ਸਥਿਰ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਉਂਦਾ ਹੈ** ਸਕ੍ਰੀਨਾਂ ਵਿੱਚ ਬ੍ਰਾਂਡਿੰਗ ਲਈ
-- **ਲੌਗਆਉਟ ਲਿੰਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਜੋ ਲੌਗਇਨ ਸਕ੍ਰੀਨ ਵੱਲ ਰੂਟ ਕਰਦਾ ਹੈ
-- **ਮੌਜੂਦਾ ਖਾਤੇ ਦਾ ਬੈਲੈਂਸ ਦਿਖਾਉਂਦਾ ਹੈ** ਇੱਕ ਸਮਰਪਿਤ ਸੈਕਸ਼ਨ ਵਿੱਚ
-- **ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨ ਡਾਟਾ ਨੂੰ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ** ਇੱਕ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਬਣਾਈ ਗਈ HTML ਟੇਬਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਟੇਬਲ ਹੈਡਰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ** Date, Object, ਅਤੇ Amount ਕਾਲਮਾਂ ਲਈ
-- **ਟੇਬਲ ਬਾਡੀ ਨੂੰ ਖਾਲੀ ਛੱਡਦਾ ਹੈ** ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਇੰਜੈਕਸ਼ਨ ਲਈ
+**ਆਓ ਡੈਸ਼ਬੋਰਡ ਦੇ ਹਰ ਹਿੱਸੇ ਨੂੰ ਸਮਝੀਏ:**
+- **ਪੰਨੇ ਨੂੰ ਬਣਾਉਂਦਾ ਹੈ** ਇੱਕ ਸੈਮਾਂਟਿਕ `<header>` ਤੱਤ ਨਾਲ ਜਿਸ ਵਿੱਚ ਨੈਵੀਗੇਸ਼ਨ ਸ਼ਾਮਲ ਹੈ
+- **ਸਥਿਰ ਤੌਰ 'ਤੇ ਦਿਖਾਉਂਦਾ ਹੈ** ਐਪ ਸਿਰਲੇਖ ਨੂੰ ਸਕ੍ਰੀਨਾਂ ਵਿੱਚ ਬ੍ਰਾਂਡਿੰਗ ਲਈ
+- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਇੱਕ ਲੌਗਆਉਟ ਲਿੰਕ ਜੋ ਲੌਗਇਨ ਸਕ੍ਰੀਨ ਵੱਲ ਰੂਟ ਕਰਦਾ ਹੈ
+- **ਮੌਜੂਦਾ ਖਾਤੇ ਦੀ ਬਕਾਇਆ ਰਕਮ ਦਿਖਾਉਂਦਾ ਹੈ** ਇੱਕ ਸਮਰਪਿਤ ਸੈਕਸ਼ਨ ਵਿੱਚ
+- **ਲੈਣ-ਦੇਣ ਡਾਟਾ ਨੂੰ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ** ਇੱਕ ਢੰਗ ਨਾਲ ਬਣਾਈ ਗਈ HTML ਟੇਬਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਟੇਬਲ ਸਿਰਲੇਖਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ** ਮਿਤੀ, ਵਸਤੂ, ਅਤੇ ਰਕਮ ਕਾਲਮਾਂ ਲਈ
+- **ਟੇਬਲ ਬਾਡੀ ਨੂੰ ਖਾਲੀ ਛੱਡਦਾ ਹੈ** ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਇੰਜੈਕਸ਼ਨ ਲਈ
 
 > 💡 **ਪ੍ਰੋ ਟਿਪ**: ਜਦੋਂ HTML ਟੈਂਪਲੇਟ ਬਣਾਉਂਦੇ ਹੋ, ਜੇ ਤੁਸੀਂ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਇਹ ਕਿਵੇਂ ਲੱਗੇਗਾ, ਤਾਂ ਤੁਸੀਂ `<template>` ਅਤੇ `</template>` ਲਾਈਨਾਂ ਨੂੰ `<!-- -->` ਨਾਲ ਕਮੈਂਟ ਕਰਕੇ ਲੁਕਾ ਸਕਦੇ ਹੋ।
 
-✅ ਤੁਸੀਂ ਸੋਚਦੇ ਹੋ ਕਿ ਅਸੀਂ ਟੈਂਪਲੇਟਾਂ 'ਤੇ `id` ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰਦੇ ਹਾਂ? ਕੀ ਅਸੀਂ ਕੁਝ ਹੋਰ ਵਰਤ ਸਕਦੇ ਹਾਂ ਜਿਵੇਂ ਕਿ ਕਲਾਸਾਂ?
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਟੈਂਪਲੇਟ ਸਿਸਟਮ ਦੀ ਸਮਝ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ:
+- ✅ ਟੈਂਪਲੇਟ ਸਧਾਰਨ HTML ਤੱਤਾਂ ਤੋਂ ਕਿਵੇਂ ਵੱਖ ਹਨ
+- ✅ ਕਿਉਂ ਟੈਂਪਲੇਟ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਐਕਟੀਵੇਟ ਹੋਣ ਤੱਕ ਲੁਕੇ ਰਹਿੰਦੇ ਹਨ
+- ✅ ਟੈਂਪਲੇਟਾਂ ਵਿੱਚ ਸੈਮਾਂਟਿਕ HTML ਬਣਤਰ ਦੀ ਮਹੱਤਤਾ
+- ✅ ਟੈਂਪਲੇਟ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ UI ਹਿੱਸੇ ਕਿਵੇਂ ਯੋਗ ਕਰਦੇ ਹਨ
+
+**ਤੁਰੰਤ ਸਵਾਲ-ਜਵਾਬ**: ਜੇ ਤੁਸੀਂ ਆਪਣੇ HTML ਤੋਂ `<template>` ਟੈਗ ਹਟਾ ਦਿੰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ?
+*ਜਵਾਬ: ਸਮੱਗਰੀ ਤੁਰੰਤ ਦਿਖਾਈ ਦੇਣ ਲੱਗਦੀ ਹੈ ਅਤੇ ਇਸਦਾ ਟੈਂਪਲੇਟ ਫੰਕਸ਼ਨਲਿਟੀ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ*
+
+**ਆਰਕੀਟੈਕਚਰ ਦੇ ਫਾਇਦੇ**: ਟੈਂਪਲੇਟ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ:
+- **ਦੁਬਾਰਾ ਵਰਤਣਯੋਗਤਾ**: ਇੱਕ ਪਰਿਭਾਸ਼
+ਹੁਣ ਆਓ `updateRoute` ਫੰਕਸ਼ਨ ਵਿੱਚ ਕੁਝ ਤਬਦੀਲੀਆਂ ਕਰੀਏ। ਸਿੱਧੇ `templateId` ਨੂੰ ਦਲੀਲ ਵਜੋਂ ਪਾਸ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਪਹਿਲਾਂ ਮੌਜੂਦਾ URL ਨੂੰ ਵੇਖ ਕੇ ਇਸਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਅਤੇ ਫਿਰ ਆਪਣੇ ਮੈਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਬੰਧਿਤ ਟੈਂਪਲੇਟ ID ਮੁੱਲ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹਾਂ। ਅਸੀਂ [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) ਦੀ ਵਰਤੋਂ ਕਰਕੇ URL ਤੋਂ ਸਿਰਫ਼ ਪਾਥ ਸੈਕਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ।
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
 
-## ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਟੈਂਪਲੇਟਾਂ ਨੂੰ ਜਿੰਦਗੀ ਦੇਣਾ
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
 
-ਹੁਣ ਅਸੀਂ ਆਪਣੇ ਟੈਂਪਲੇਟਾਂ ਨੂੰ ਫੰਕਸ਼ਨਲ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ। ਜਿਵੇਂ ਕਿ ਇੱਕ 3D ਪ੍ਰਿੰਟਰ ਇੱਕ ਡਿਜ਼ੀਟਲ ਬਲੂਪ੍ਰਿੰਟ ਲੈਂਦਾ ਹੈ ਅਤੇ ਇੱਕ ਭੌਤਿਕ ਵਸਤੂ ਬਣਾਉਂਦਾ ਹੈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਾਡੇ ਲੁਕਾਏ ਟੈਂਪਲੇਟਾਂ ਨੂੰ ਲੈਂਦਾ ਹੈ ਅਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ, ਇੰਟਰੈਕਟਿਵ ਐਲੀਮੈਂਟ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਉਪਭੋਗਤਾ ਦੇਖ ਅਤੇ ਵਰਤ ਸਕਦੇ ਹਨ।
+**ਇਸ ਵਿੱਚ ਕੀ ਹੁੰਦਾ ਹੈ:**
+- **ਨਿਕਾਲਦਾ ਹੈ** ਮੌਜੂਦਾ ਪਾਥ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇ URL ਤੋਂ `window.location.pathname` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਖੋਜਦਾ ਹੈ** ਸੰਬੰਧਿਤ ਰੂਟ ਕਨਫਿਗਰੇਸ਼ਨ ਨੂੰ ਸਾਡੇ routes object ਵਿੱਚ
+- **ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ** ਟੈਂਪਲੇਟ ID ਨੂੰ ਰੂਟ ਕਨਫਿਗਰੇਸ਼ਨ ਤੋਂ
+- **ਪਾਲਣ ਕਰਦਾ ਹੈ** ਪਿਛਲੇ ਟੈਂਪਲੇਟ ਰੈਂਡਰਿੰਗ ਪ੍ਰਕਿਰਿਆ ਨੂੰ
+- **ਬਣਾਉਂਦਾ ਹੈ** ਇੱਕ ਡਾਇਨਾਮਿਕ ਸਿਸਟਮ ਜੋ URL ਬਦਲਣ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਦਾ ਹੈ
 
-ਇਹ ਪ੍ਰਕਿਰਿਆ ਤਿੰਨ ਸਥਿਰ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ ਜੋ ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਦੀ ਨੀਂਹ ਬਣਾਉਂਦੇ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਪੈਟਰਨ ਨੂੰ ਸਮਝ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਕਈ ਫਰੇਮਵਰਕਾਂ ਅਤੇ ਲਾਇਬ੍ਰੇਰੀਆਂ ਵਿੱਚ ਪਛਾਣ ਸਕਦੇ ਹੋ।
+ਇੱਥੇ ਅਸੀਂ ਆਪਣੇ routes ਨੂੰ ਸੰਬੰਧਿਤ ਟੈਂਪਲੇਟ ਨਾਲ ਮੈਪ ਕੀਤਾ। ਤੁਸੀਂ ਇਸਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ URL ਨੂੰ ਮੈਨੁਅਲੀ ਤੌਰ 'ਤੇ ਬਦਲ ਕੇ ਸਹੀ ਕੰਮ ਕਰਨ ਦੀ ਜਾਂਚ ਕਰ ਸਕਦੇ ਹੋ।
 
-ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਮੌਜੂਦਾ HTML ਫਾਈਲ ਨੂੰ
-✅ ਜੇ ਤੁਸੀਂ URL ਵਿੱਚ ਅਣਜਾਣ ਪਾਥ ਦਰਜ ਕਰੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ? ਇਸ ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ?
+✅ ਜੇ ਤੁਸੀਂ URL ਵਿੱਚ ਕੋਈ ਅਣਜਾਣ ਪਾਥ ਦਰਜ ਕਰੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ? ਅਸੀਂ ਇਸਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰ ਸਕਦੇ ਹਾਂ?
 
 ## ਨੈਵੀਗੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰਨਾ
 
-ਰੂਟਿੰਗ ਸਥਾਪਿਤ ਹੋਣ ਦੇ ਨਾਲ, ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਐਪ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਚਾਹੀਦਾ ਹੈ। ਰਵਾਇਤੀ ਵੈਬਸਾਈਟਾਂ ਲਿੰਕਾਂ 'ਤੇ ਕਲਿਕ ਕਰਨ 'ਤੇ ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਰੀਲੋਡ ਕਰਦੀਆਂ ਹਨ, ਪਰ ਅਸੀਂ URL ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਪੰਨਾ ਰੀਫ੍ਰੈਸ਼ ਕੀਤੇ ਬਿਨਾਂ ਅਪਡੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ। ਇਹ ਇੱਕ ਹੌਲੀ ਅਨੁਭਵ ਪੈਦਾ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਡੈਸਕਟਾਪ ਐਪਲੀਕੇਸ਼ਨ ਵੱਖ-ਵੱਖ ਦ੍ਰਿਸ਼ਾਂ ਵਿੱਚ ਸਵਿੱਚ ਕਰਦੀਆਂ ਹਨ।
+ਰੂਟਿੰਗ ਸਥਾਪਿਤ ਹੋਣ ਦੇ ਨਾਲ, ਯੂਜ਼ਰਾਂ ਨੂੰ ਐਪ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਚਾਹੀਦਾ ਹੈ। ਰਵਾਇਤੀ ਵੈਬਸਾਈਟਾਂ ਲਿੰਕਾਂ 'ਤੇ ਕਲਿਕ ਕਰਨ 'ਤੇ ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਰੀਲੋਡ ਕਰਦੀਆਂ ਹਨ, ਪਰ ਅਸੀਂ URL ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਅਪਡੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ। ਇਹ ਇੱਕ ਹੌਲੀ ਅਨੁਭਵ ਪੈਦਾ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਡੈਸਕਟਾਪ ਐਪਲੀਕੇਸ਼ਨ ਵੱਖ-ਵੱਖ ਦ੍ਰਿਸ਼ਾਂ ਵਿੱਚ ਸਵਿੱਚ ਕਰਦੀਆਂ ਹਨ।
 
-ਸਾਨੂੰ ਦੋ ਚੀਜ਼ਾਂ ਨੂੰ ਸਹਿਮਤ ਕਰਨਾ ਪਵੇਗਾ: ਬ੍ਰਾਊਜ਼ਰ ਦੇ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਤਾਂ ਜੋ ਉਪਭੋਗਤਾ ਪੰਨਿਆਂ ਨੂੰ ਬੁੱਕਮਾਰਕ ਕਰ ਸਕਣ ਅਤੇ ਲਿੰਕਾਂ ਸਾਂਝੇ ਕਰ ਸਕਣ, ਅਤੇ ਸਹੀ ਸਮੱਗਰੀ ਦਿਖਾਉਣਾ। ਜੇ ਇਹ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇ, ਤਾਂ ਇਹ ਆਧੁਨਿਕ ਐਪਲੀਕੇਸ਼ਨਾਂ ਤੋਂ ਉਪਭੋਗਤਾਵਾਂ ਦੀ ਉਮੀਦ ਵਾਲੀ ਨਿਰਵਿਘਨ ਨੈਵੀਗੇਸ਼ਨ ਪੈਦਾ ਕਰਦਾ ਹੈ।
+ਅਸੀਂ ਦੋ ਚੀਜ਼ਾਂ ਨੂੰ ਸਹਿ-ਸੰਚਾਲਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ: ਬ੍ਰਾਊਜ਼ਰ ਦੇ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਤਾਂ ਜੋ ਯੂਜ਼ਰ ਪੰਨਿਆਂ ਨੂੰ ਬੁੱਕਮਾਰਕ ਕਰ ਸਕਣ ਅਤੇ ਲਿੰਕਾਂ ਸਾਂਝੇ ਕਰ ਸਕਣ, ਅਤੇ ਉਚਿਤ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ। ਜਦੋਂ ਇਹ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਉਹ ਸਹੀ ਨੈਵੀਗੇਸ਼ਨ ਪੈਦਾ ਕਰਦਾ ਹੈ ਜਿਸਦੀ ਮੌਡਰਨ ਐਪਲੀਕੇਸ਼ਨ ਤੋਂ ਉਮੀਦ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
 
-> 🏗️ **ਆਰਕੀਟੈਕਚਰ ਅੰਦਰੂਨੀ ਜਾਣਕਾਰੀ**: ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਦੇ ਹਿੱਸੇ
->
-> **ਤੁਹਾਡਾ ਬਣਾਉਣਾ:**
-> - **🔄 URL ਪ੍ਰਬੰਧਨ**: ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਬ੍ਰਾਊਜ਼ਰ ਐਡਰੈੱਸ ਬਾਰ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ
-> - **📋 ਟੈਂਪਲੇਟ ਸਿਸਟਮ**: ਮੌਜੂਦਾ ਰੂਟ ਦੇ ਅਧਾਰ 'ਤੇ ਸਮੱਗਰੀ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਬਦਲਦਾ ਹੈ  
-> - **📚 ਹਿਸਟਰੀ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਬੈਕ/ਫਾਰਵਰਡ ਬਟਨ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ
-> - **🛡️ ਗਲਤੀ ਸੰਭਾਲ**: ਗਲਤ ਜਾਂ ਗੁੰਮ ਪਾਥਾਂ ਲਈ ਸੁਗਮ ਫਾਲਬੈਕ
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant App
+    participant Template
+    
+    User->>Browser: Clicks "Login" link
+    Browser->>App: onclick event triggered
+    App->>App: preventDefault() & navigate('/dashboard')
+    App->>Browser: history.pushState('/dashboard')
+    Browser->>Browser: URL updates to /dashboard
+    App->>App: updateRoute() called
+    App->>Template: Find & clone dashboard template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display dashboard screen
+    
+    Note over User,Template: User clicks browser back button
+    
+    User->>Browser: Clicks back button
+    Browser->>Browser: History moves back to /login
+    Browser->>App: popstate event fired
+    App->>App: updateRoute() called automatically
+    App->>Template: Find & clone login template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display login screen
+```
+
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਆਰਕੀਟੈਕਚਰ**: ਪੂਰੇ ਸਿਸਟਮ ਦੀ ਸਮਝ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:
+- ✅ ਕਲਾਇੰਟ-ਸਾਈਡ ਰੂਟਿੰਗ ਰਵਾਇਤੀ ਸਰਵਰ-ਸਾਈਡ ਰੂਟਿੰਗ ਤੋਂ ਕਿਵੇਂ ਵੱਖਰੀ ਹੈ?
+- ✅ SPA ਨੈਵੀਗੇਸ਼ਨ ਲਈ History API ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ?
+- ✅ ਟੈਂਪਲੇਟ ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਨੂੰ ਕਿਵੇਂ ਯੋਗ ਬਣਾਉਂਦੇ ਹਨ?
+- ✅ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਰੋਕਣ ਵਿੱਚ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਦਾ ਕੀ ਭੂਮਿਕਾ ਹੈ?
+
+**ਸਿਸਟਮ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਤੁਹਾਡਾ SPA ਦਰਸਾਉਂਦਾ ਹੈ:
+- **ਟੈਂਪਲੇਟ ਮੈਨੇਜਮੈਂਟ**: ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਨਾਲ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ UI ਕੰਪੋਨੈਂਟ
+- **ਕਲਾਇੰਟ-ਸਾਈਡ ਰੂਟਿੰਗ**: ਸਰਵਰ ਦੀ ਬੇਨਤੀ ਤੋਂ ਬਿਨਾਂ URL ਮੈਨੇਜਮੈਂਟ
+- **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਆਰਕੀਟੈਕਚਰ**: ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਯੂਜ਼ਰ ਇੰਟਰੈਕਸ਼ਨ ਲਈ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲਤਾ
+- **ਬ੍ਰਾਊਜ਼ਰ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਸਹੀ ਇਤਿਹਾਸ ਅਤੇ ਬੈਕ/ਫਾਰਵਰਡ ਬਟਨ ਸਹਾਇਤਾ
+- **ਪਰਫਾਰਮੈਂਸ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ**: ਤੇਜ਼ ਤਬਦੀਲੀਆਂ ਅਤੇ ਘੱਟ ਸਰਵਰ ਲੋਡ
+
+**ਪ੍ਰੋਫੈਸ਼ਨਲ ਪੈਟਰਨ**: ਤੁਸੀਂ ਲਾਗੂ ਕੀਤਾ ਹੈ:
+- **ਮਾਡਲ-ਵਿਊ ਵੱਖਰਾ**: ਟੈਂਪਲੇਟ ਐਪਲੀਕੇਸ਼ਨ ਲੌਜਿਕ ਤੋਂ ਵੱਖਰੇ
+- **ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ**: URL ਸਟੇਟ ਪ੍ਰਦਰਸ਼ਿਤ ਸਮੱਗਰੀ ਨਾਲ ਸਿੰਕ੍ਰੋਨਾਈਜ਼
+- **ਪ੍ਰੋਗਰੈਸਿਵ ਐਨਹੈਂਸਮੈਂਟ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀ HTML ਫੰਕਸ਼ਨਲਿਟੀ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ
+- **ਯੂਜ਼ਰ ਅਨੁਭਵ**: ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਹੌਲੀ, ਐਪ-ਜਿਵੇਂ ਨੈਵੀਗੇਸ਼ਨ
+
+> � **ਆਰਕੀਟੈਕਚਰ ਅੰਦਰੂਨੀ ਜਾਣਕਾਰੀ**: ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਕੰਪੋਨੈਂਟ
 >
-> **ਹਿੱਸੇ ਕਿਵੇਂ ਇਕੱਠੇ ਕੰਮ ਕਰਦੇ ਹਨ:**
-> - **ਸੁਣਦਾ ਹੈ** ਨੈਵੀਗੇਸ਼ਨ ਇਵੈਂਟਾਂ (ਕਲਿਕ, ਹਿਸਟਰੀ ਬਦਲਾਅ)
-> - **ਅਪਡੇਟ ਕਰਦਾ ਹੈ** URL ਨੂੰ ਹਿਸਟਰੀ API ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-> - **ਰੈਂਡਰ ਕਰਦਾ ਹੈ** ਨਵੇਂ ਰੂਟ ਲਈ ਸਹੀ ਟੈਂਪਲੇਟ
-> - **ਬਣਾਈ ਰੱਖਦਾ ਹੈ** ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਅਨੁਭਵ
+> **ਤੁਸੀਂ ਕੀ ਬਣਾਉਂਦੇ ਹੋ:**
+> - **🔄 URL ਮੈਨੇਜਮੈਂਟ**: ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਬ੍ਰਾਊਜ਼ਰ ਐਡਰੈੱਸ ਬਾਰ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ
+> - **📋 ਟੈਂਪਲੇਟ ਸਿਸਟਮ**: ਮੌਜੂਦਾ ਰੂਟ ਦੇ ਆਧਾਰ 'ਤੇ ਸਮੱਗਰੀ ਨੂੰ ਡਾਇਨਾਮਿਕ ਤੌਰ 'ਤੇ ਬਦਲਦਾ ਹੈ  
+> - **📚 ਇਤਿਹਾਸ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਬ੍ਰਾਊਜ਼ਰ ਬੈਕ/ਫਾਰਵਰਡ ਬਟਨ ਫੰਕਸ਼ਨਲਿਟੀ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ
+> - **🛡️ ਐਰਰ ਹੈਂਡਲਿੰਗ**: ਅਵੈਧ ਜਾਂ ਗੁੰਮ ਰੂਟਾਂ ਲਈ ਗ੍ਰੇਸਫੁਲ ਫਾਲਬੈਕ
 
-ਸਾਡੇ ਐਪ ਲਈ ਅਗਲਾ ਕਦਮ ਇਹ ਹੈ ਕਿ ਪੰਨਿਆਂ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਸੰਭਾਵਨਾ ਸ਼ਾਮਲ ਕੀਤੀ ਜਾਵੇ ਬਿਨਾਂ URL ਨੂੰ ਹੱਥੋਂ ਬਦਲਣ ਦੀ ਲੋੜ। ਇਸਦਾ ਮਤਲਬ ਦੋ ਚੀਜ਼ਾਂ ਹਨ:
+> **ਕਿਵੇਂ ਕੰਪੋਨੈਂਟ ਇਕੱਠੇ ਕੰਮ ਕਰਦੇ ਹਨ:**
+> - **ਸੁਣਦਾ ਹੈ** ਨੈਵੀਗੇਸ਼ਨ ਇਵੈਂਟ (ਕਲਿਕ, ਇਤਿਹਾਸ ਬਦਲ)
+> - **ਅਪਡੇਟ ਕਰਦਾ ਹੈ** URL ਨੂੰ History API ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+> - **ਰੈਂਡਰ ਕਰਦਾ ਹੈ** ਨਵੇਂ ਰੂਟ ਲਈ ਉਚਿਤ ਟੈਂਪਲੇਟ
+> - **ਸੰਭਾਲਦਾ ਹੈ** ਪੂਰੇ ਅਨੁਭਵ ਨੂੰ ਸਹੀ ਬਣਾਈ ਰੱਖਦਾ ਹੈ
+
+ਅਸੀਂ ਆਪਣੇ ਐਪ ਲਈ ਅਗਲਾ ਕਦਮ ਪੰਨਿਆਂ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਸੰਭਾਵਨਾ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਬਿਨਾਂ URL ਨੂੰ ਮੈਨੁਅਲੀ ਤੌਰ 'ਤੇ ਬਦਲਣ ਦੀ। ਇਸਦਾ ਮਤਲਬ ਦੋ ਚੀਜ਼ਾਂ ਹਨ:
 
   1. ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ
-  2. ਨਵੇਂ URL ਦੇ ਅਧਾਰ 'ਤੇ ਦਿਖਾਈ ਗਈ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ
+  2. ਨਵੇਂ URL ਦੇ ਆਧਾਰ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ
 
-ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ `updateRoute` ਫੰਕਸ਼ਨ ਨਾਲ ਦੂਜੇ ਹਿੱਸੇ ਦੀ ਸੰਭਾਲ ਕਰ ਚੁੱਕੇ ਹਾਂ, ਇਸ ਲਈ ਸਾਨੂੰ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦਾ ਤਰੀਕਾ ਲੱਭਣਾ ਪਵੇਗਾ।
+ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ `updateRoute` ਫੰਕਸ਼ਨ ਨਾਲ ਦੂਜੇ ਹਿੱਸੇ ਦਾ ਧਿਆਨ ਰੱਖਿਆ ਹੈ, ਇਸ ਲਈ ਅਸੀਂ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦਾ ਤਰੀਕਾ ਲੱਭਣਾ ਹੈ।
 
-ਸਾਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ ਜੋ HTML ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਹਿਸਟਰੀ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਐਂਟਰੀ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
+ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ ਜੋ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਇਤਿਹਾਸ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਐਂਟਰੀ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, HTML ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ।
 
-> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਨੋਟ**: ਜਦੋਂ HTML ਐਂਕਰ ਐਲਿਮੈਂਟ [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) ਨੂੰ ਆਪਣੇ ਆਪ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਵੱਖ-ਵੱਖ URL ਲਈ ਹਾਈਪਰਲਿੰਕ ਬਣਾਉਣ ਲਈ, ਇਹ ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ HTML ਨੂੰ ਰੀਲੋਡ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ। ਜਦੋਂ ਕਸਟਮ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਰੂਟਿੰਗ ਨੂੰ ਸੰਭਾਲਦੇ ਹੋ, ਇਸ ਵਿਹਾਰ ਨੂੰ ਰੋਕਣ ਲਈ, ਕਲਿਕ ਇਵੈਂਟ 'ਤੇ preventDefault() ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਜ਼ਰੂਰੀ ਹੈ।
+> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਨੋਟ**: ਜਦੋਂ HTML ਐਂਕਰ ਐਲੀਮੈਂਟ [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) ਨੂੰ ਆਪਣੇ ਆਪ ਵਰਤਿਆ ਜਾਵੇ ਤਾਂ ਇਹ ਵੱਖ-ਵੱਖ URLs ਲਈ ਹਾਈਪਰਲਿੰਕ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਇਹ ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ HTML ਨੂੰ ਰੀਲੋਡ ਕਰੇਗਾ। ਰੂਟਿੰਗ ਨੂੰ ਕਸਟਮ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਸੰਭਾਲਦੇ ਸਮੇਂ ਇਸ ਵਿਵਹਾਰ ਨੂੰ ਰੋਕਣਾ ਜ਼ਰੂਰੀ ਹੈ, ਕਲਿਕ ਇਵੈਂਟ 'ਤੇ preventDefault() ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
 
 ### ਟਾਸਕ
 
@@ -228,13 +370,13 @@ function navigate(path) {
 
 **ਇਸ ਨੈਵੀਗੇਸ਼ਨ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਝਣਾ:**
 - **ਅਪਡੇਟ ਕਰਦਾ ਹੈ** ਬ੍ਰਾਊਜ਼ਰ ਦੇ URL ਨੂੰ `history.pushState` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਵੇਂ ਪਾਥ 'ਤੇ
-- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਹਿਸਟਰੀ ਸਟੈਕ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਐਂਟਰੀ ਬੈਕ/ਫਾਰਵਰਡ ਬਟਨ ਦੇ ਸਹੀ ਸਮਰਥਨ ਲਈ
-- **ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ** `updateRoute()` ਫੰਕਸ਼ਨ ਨੂੰ ਸਬੰਧਤ ਟੈਂਪਲੇਟ ਦਿਖਾਉਣ ਲਈ
-- **ਬਣਾਈ ਰੱਖਦਾ ਹੈ** ਸਿੰਗਲ-ਪੇਜ ਐਪ ਅਨੁਭਵ ਬਿਨਾਂ ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ
+- **ਜੋੜਦਾ ਹੈ** ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਇਤਿਹਾਸ ਸਟੈਕ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਐਂਟਰੀ ਸਹੀ ਬੈਕ/ਫਾਰਵਰਡ ਬਟਨ ਸਹਾਇਤਾ ਲਈ
+- **ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ** `updateRoute()` ਫੰਕਸ਼ਨ ਨੂੰ ਸੰਬੰਧਿਤ ਟੈਂਪਲੇਟ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ
+- **ਸੰਭਾਲਦਾ ਹੈ** ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਅਨੁਭਵ ਬਿਨਾਂ ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ
 
-ਇਹ ਵਿਧੀ ਪਹਿਲਾਂ ਦਿੱਤੇ ਪਾਥ ਦੇ ਅਧਾਰ 'ਤੇ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ, ਫਿਰ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ। ਗੁਣ `window.location.origin` URL ਰੂਟ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਜੋ ਸਾਨੂੰ ਦਿੱਤੇ ਪਾਥ ਤੋਂ ਪੂਰਾ URL ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
+ਇਹ ਵਿਧੀ ਪਹਿਲਾਂ ਦਿੱਤੇ ਪਾਥ ਦੇ ਆਧਾਰ 'ਤੇ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ, ਫਿਰ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ। ਗੁਣ `window.location.origin` URL ਰੂਟ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਜੋ ਸਾਨੂੰ ਦਿੱਤੇ ਪਾਥ ਤੋਂ ਪੂਰਾ URL ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
 
-ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਇਹ ਫੰਕਸ਼ਨ ਹੈ, ਅਸੀਂ ਉਸ ਸਮੱਸਿਆ ਦੀ ਸੰਭਾਲ ਕਰ ਸਕਦੇ ਹਾਂ ਜੇਕਰ ਕੋਈ ਪਾਥ ਕਿਸੇ ਵੀ ਪਰਿਭਾਸ਼ਿਤ ਰੂਟ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ। ਅਸੀਂ `updateRoute` ਫੰਕਸ਼ਨ ਨੂੰ ਸੋਧਾਂਗੇ ਅਤੇ ਇੱਕ ਮੌਜੂਦਾ ਰੂਟ 'ਤੇ ਫਾਲਬੈਕ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜੇਕਰ ਅਸੀਂ ਮੇਲ ਨਹੀਂ ਲੱਭ ਸਕਦੇ।
+ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਇਹ ਫੰਕਸ਼ਨ ਹੈ, ਅਸੀਂ ਉਸ ਸਮੱਸਿਆ ਦਾ ਧਿਆਨ ਰੱਖ ਸਕਦੇ ਹਾਂ ਜੇਕਰ ਕੋਈ ਪਾਥ ਕਿਸੇ ਵੀ ਪਰਿਭਾਸ਼ਿਤ ਰੂਟ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ। ਅਸੀਂ `updateRoute` ਫੰਕਸ਼ਨ ਨੂੰ ਸੋਧ ਕੇ ਇੱਕ ਮੌਜੂਦਾ ਰੂਟ ਵਿੱਚ ਫਾਲਬੈਕ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜੇਕਰ ਅਸੀਂ ਕੋਈ ਮੇਲ ਨਹੀਂ ਲੱਭਦੇ।
 
 ```js
 function updateRoute() {
@@ -253,15 +395,15 @@ function updateRoute() {
 }
 ```
 
-**ਮਹੱਤਵਪੂਰਨ ਬਿੰਦੂ ਯਾਦ ਰੱਖੋ:**
-- **ਚੈੱਕ ਕਰਦਾ ਹੈ** ਕਿ ਮੌਜੂਦਾ ਪਾਥ ਲਈ ਕੋਈ ਰੂਟ ਮੌਜੂਦ ਹੈ
-- **ਰੀਡਾਇਰੈਕਟ ਕਰਦਾ ਹੈ** ਲੌਗਇਨ ਪੰਨੇ 'ਤੇ ਜਦੋਂ ਗਲਤ ਰੂਟ ਐਕਸੈਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ
-- **ਫਾਲਬੈਕ ਮਕੈਨਿਜ਼ਮ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਜੋ ਟੁੱਟੀ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਰੋਕਦਾ ਹੈ
-- **ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ** ਕਿ ਉਪਭੋਗਤਾ ਹਮੇਸ਼ਾ ਇੱਕ ਵੈਧ ਸਕ੍ਰੀਨ ਵੇਖਦੇ ਹਨ, ਭਾਵੇਂ URL ਗਲਤ ਹੋਵੇ
+**ਯਾਦ ਰੱਖਣ ਵਾਲੇ ਮੁੱਖ ਬਿੰਦੂ:**
+- **ਜਾਂਚਦਾ ਹੈ** ਕਿ ਮੌਜੂਦਾ ਪਾਥ ਲਈ ਕੋਈ ਰੂਟ ਮੌਜੂਦ ਹੈ ਜਾਂ ਨਹੀਂ
+- **ਰੀਡਾਇਰੈਕਟ ਕਰਦਾ ਹੈ** ਲੌਗਇਨ ਪੰਨੇ 'ਤੇ ਜਦੋਂ ਕੋਈ ਅਵੈਧ ਰੂਟ ਐਕਸੈਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ
+- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਇੱਕ ਫਾਲਬੈਕ ਮਕੈਨਿਜ਼ਮ ਜੋ ਟੁੱਟੇ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਰੋਕਦਾ ਹੈ
+- **ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ** ਕਿ ਯੂਜ਼ਰ ਹਮੇਸ਼ਾ ਇੱਕ ਵੈਧ ਸਕ੍ਰੀਨ ਦੇਖਦੇ ਹਨ, ਭਾਵੇਂ URL ਗਲਤ ਹੋ
 
-ਜੇਕਰ ਕੋਈ ਰੂਟ ਨਹੀਂ ਲੱਬਦਾ, ਤਾਂ ਅਸੀਂ ਹੁਣ `login` ਪੰਨੇ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਾਂਗੇ।
+ਜੇਕਰ ਕੋਈ ਰੂਟ ਨਹੀਂ ਲੱਭਦਾ, ਅਸੀਂ ਹੁਣ `login` ਪੰਨੇ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਾਂਗੇ।
 
-ਹੁਣ ਆਓ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜੋ ਲਿੰਕ 'ਤੇ ਕਲਿਕ ਕਰਨ 'ਤੇ URL ਲੈਂਦਾ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਲਿੰਕ ਵਿਹਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ:
+ਹੁਣ ਆਓ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜੋ ਲਿੰਕ 'ਤੇ ਕਲਿਕ ਕਰਨ 'ਤੇ URL ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਲਿੰਕ ਵਿਵਹਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ:
 
 ```js
 function onLinkClick(event) {
@@ -270,11 +412,11 @@ function onLinkClick(event) {
 }
 ```
 
-**ਇਸ ਕਲਿਕ ਹੈਂਡਲਰ ਨੂੰ ਤੋੜਨਾ:**
-- **ਰੋਕਦਾ ਹੈ** ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਲਿੰਕ ਵਿਹਾਰ ਨੂੰ `preventDefault()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਨਿਕਾਲਦਾ ਹੈ** clicked ਲਿੰਕ ਐਲਿਮੈਂਟ ਤੋਂ ਮੰਜ਼ਿਲ URL
+**ਇਸ ਕਲਿਕ ਹੈਂਡਲਰ ਨੂੰ ਸਮਝਣਾ:**
+- **ਰੋਕਦਾ ਹੈ** ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਲਿੰਕ ਵਿਵਹਾਰ ਨੂੰ `preventDefault()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਨਿਕਾਲਦਾ ਹੈ** ਮੰਜ਼ਿਲ URL ਨੂੰ ਕਲਿਕ ਕੀਤੇ ਲਿੰਕ ਐਲੀਮੈਂਟ ਤੋਂ
 - **ਕਾਲ ਕਰਦਾ ਹੈ** ਸਾਡੇ ਕਸਟਮ navigate ਫੰਕਸ਼ਨ ਨੂੰ ਪੰਨਾ ਰੀਲੋਡ ਕਰਨ ਦੀ ਬਜਾਏ
-- **ਬਣਾਈ ਰੱਖਦਾ ਹੈ** ਹੌਲੀ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਅਨੁਭਵ
+- **ਸੰਭਾਲਦਾ ਹੈ** ਹੌਲੀ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਅਨੁਭਵ
 
 ```html
 <a href="/dashboard" onclick="onLinkClick(event)">Login</a>
@@ -284,21 +426,21 @@ function onLinkClick(event) {
 
 **ਇਹ onclick ਬਾਈਡਿੰਗ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ:**
 - **ਜੋੜਦੀ ਹੈ** ਹਰ ਲਿੰਕ ਨੂੰ ਸਾਡੇ ਕਸਟਮ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਨਾਲ
-- **ਪਾਸ ਕਰਦੀ ਹੈ** ਕਲਿਕ ਇਵੈਂਟ ਨੂੰ ਸਾਡੇ `onLinkClick` ਫੰਕਸ਼ਨ ਲਈ ਪ੍ਰੋਸੈਸਿੰਗ ਲਈ
-- **ਸਮਰਥਨ ਕਰਦੀ ਹੈ** ਹੌਲੀ ਨੈਵੀਗੇਸ਼ਨ ਬਿਨਾਂ ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ
-- **ਸਹੀ URL ਸਟ੍ਰਕਚਰ ਬਣਾਈ ਰੱਖਦੀ ਹੈ** ਜਿਸਨੂੰ ਉਪਭੋਗਤਾ ਬੁੱਕਮਾਰਕ ਜਾਂ ਸਾਂਝਾ ਕਰ ਸਕਦੇ ਹਨ
+- **ਪਾਸ ਕਰਦੀ ਹੈ** ਕਲਿਕ ਇਵੈਂਟ ਨੂੰ ਸਾਡੇ `onLinkClick` ਫੰਕਸ਼ਨ ਨੂੰ ਪ੍ਰੋਸੈਸਿੰਗ ਲਈ
+- **ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ** ਹੌਲੀ ਨੈਵੀਗੇਸ਼ਨ ਬਿਨਾਂ ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ
+- **ਸੰਭਾਲਦਾ ਹੈ** ਸਹੀ URL ਸਟ੍ਰਕਚਰ ਜੋ ਯੂਜ਼ਰ ਬੁੱਕਮਾਰਕ ਜਾਂ ਸਾਂਝੇ ਕਰ ਸਕਦੇ ਹਨ
 
-[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ਐਟ੍ਰਿਬਿਊਟ `click` ਇਵੈਂਟ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨਾਲ ਬਾਈਡ ਕਰਦਾ ਹੈ, ਇੱਥੇ `navigate()` ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਲਈ।
+[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ਐਟ੍ਰਿਬਿਊਟ ਕਲਿਕ ਇਵੈਂਟ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨਾਲ ਬਾਈਡ ਕਰਦਾ ਹੈ, ਇੱਥੇ `navigate()` ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ।
 
-ਇਨ੍ਹਾਂ ਲਿੰਕਾਂ 'ਤੇ ਕਲਿਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਹੁਣ ਤੁਹਾਨੂੰ ਆਪਣੇ ਐਪ ਦੇ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
+ਇਨ੍ਹਾਂ ਲਿੰਕਾਂ 'ਤੇ ਕਲਿਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਤੁਹਾਨੂੰ ਹੁਣ ਆਪਣੇ ਐਪ ਦੇ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
 
-✅ `history.pushState` ਵਿਧੀ HTML5 ਮਿਆਰ ਦਾ ਹਿੱਸਾ ਹੈ ਅਤੇ [ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ](https://caniuse.com/?search=pushState) ਵਿੱਚ ਲਾਗੂ ਕੀਤੀ ਗਈ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਵੈਬ ਐਪ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਸ API ਦੇ ਸਥਾਨ 'ਤੇ ਵਰਤਣ ਲਈ ਇੱਕ ਚਾਲ ਹੈ: ਪਾਥ ਤੋਂ ਪਹਿਲਾਂ [ਹੈਸ਼ (`#`)](https://en.wikipedia.org/wiki/URI_fragment) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਰੂਟਿੰਗ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਰਵਾਇਤੀ ਐਂਕਰ ਨੈਵੀਗੇਸ਼ਨ ਨਾਲ ਕੰਮ ਕਰਦੀ ਹੈ ਅਤੇ ਪੰਨਾ ਰੀਲੋਡ ਨਹੀਂ ਕਰਦੀ।
+✅ `history.pushState` ਵਿਧੀ HTML5 ਮਿਆਰ ਦਾ ਹਿੱਸਾ ਹੈ ਅਤੇ [ਸਾਰੇ ਮੌਡਰਨ ਬ੍ਰਾਊਜ਼ਰ](https://caniuse.com/?search=pushState) ਵਿੱਚ ਲਾਗੂ ਕੀਤੀ ਗਈ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਵੈਬ ਐਪ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਸ API ਦੇ ਸਥਾਨ 'ਤੇ ਵਰਤਣ ਲਈ ਇੱਕ ਚਾਲ ਹੈ: ਪਾਥ ਤੋਂ ਪਹਿਲਾਂ [ਹੈਸ਼ (`#`)](https://en.wikipedia.org/wiki/URI_fragment) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਰੂਟਿੰਗ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਰੈਗੂਲਰ ਐਂਕਰ ਨੈਵੀਗੇਸ਼ਨ ਨਾਲ ਕੰਮ ਕਰਦੀ ਹੈ ਅਤੇ ਪੰਨਾ ਰੀਲੋਡ ਨਹੀਂ ਕਰਦੀ, ਕਿਉਂਕਿ ਇਸਦਾ ਉਦੇਸ਼ ਪੰਨੇ ਦੇ ਅੰਦਰੂਨੀ ਲਿੰਕ ਬਣਾਉਣਾ ਸੀ।
 
 ## ਬੈਕ ਅਤੇ ਫਾਰਵਰਡ ਬਟਨ ਕੰਮ ਕਰਨ ਲਈ ਬਣਾਉਣਾ
 
-ਬੈਕ ਅਤੇ ਫਾਰਵਰਡ ਬਟਨ ਵੈਬ ਬ੍ਰਾਊਜ਼ਿੰਗ ਲਈ ਮੂਲਭੂਤ ਹਨ, ਜਿਵੇਂ ਕਿ NASA ਮਿਸ਼ਨ ਕੰਟਰੋਲਰ ਪਿਛਲੇ ਸਿਸਟਮ ਸਟੇਟਸ ਦੀ ਸਮੀਖਿਆ ਕਰ ਸਕਦੇ ਹਨ। ਉਪਭੋਗਤਾ ਉਮੀਦ ਕਰਦੇ ਹਨ ਕਿ ਇਹ ਬਟਨ ਕੰਮ ਕਰਨਗੇ, ਅਤੇ ਜਦੋਂ ਇਹ ਨਹੀਂ ਕਰਦੇ, ਤਾਂ ਇਹ ਉਮੀਦ ਕੀਤੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਅਨੁਭਵ ਨੂੰ ਤੋੜ ਦਿੰਦਾ ਹੈ।
+ਬੈਕ ਅਤੇ ਫਾਰਵਰਡ ਬਟਨ ਵੈਬ ਬ੍ਰਾਊਜ਼ਿੰਗ ਲਈ ਮੂਲ ਹਨ, ਜਿਵੇਂ NASA ਮਿਸ਼ਨ ਕੰਟਰੋਲਰ ਪਿਛਲੇ ਸਿਸਟਮ ਸਟੇਟਸ ਦੀ ਸਮੀਖਾ ਕਰ ਸਕਦੇ ਹਨ। ਯੂਜ਼ਰ ਉਮੀਦ ਕਰਦੇ ਹਨ ਕਿ ਇਹ ਬਟਨ ਕੰਮ ਕਰਨਗੇ, ਅਤੇ ਜਦੋਂ ਇਹ ਨਹੀਂ ਕਰਦੇ, ਤਾਂ ਇਹ ਉਮੀਦ ਕੀਤੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਅਨੁਭਵ ਨੂੰ ਤੋੜ ਦਿੰਦਾ ਹੈ।
 
-ਸਾਡੇ ਸਿੰਗਲ-ਪੇਜ ਐਪ ਨੂੰ ਇਸਨੂੰ ਸਮਰਥਨ ਦੇਣ ਲਈ ਵਾਧੂ ਸੰਰਚਨਾ ਦੀ ਲੋੜ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਹਿਸਟਰੀ ਸਟੈਕ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ (ਜਿਸਨੂੰ ਅਸੀਂ `history.pushState` ਨਾਲ ਸ਼ਾਮਲ ਕਰ ਰਹੇ ਹਾਂ), ਪਰ ਜਦੋਂ ਉਪਭੋਗਤਾ ਇਸ ਹਿਸਟਰੀ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ, ਤਾਂ ਸਾਡੇ ਐਪ ਨੂੰ ਸਹੀ ਸਮੱਗਰੀ ਨੂੰ ਅਨੁਸਾਰ ਅਪਡੇਟ ਕਰਨਾ ਪਵੇਗਾ।
+ਸਾਡੇ ਸਿੰਗਲ-ਪੇਜ ਐਪ ਨੂੰ ਇਸ ਲਈ ਵਾਧੂ ਸੰਰਚਨਾ ਦੀ ਲੋੜ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਇਤਿਹਾਸ ਸਟੈਕ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ (ਜਿਸਨੂੰ ਅਸੀਂ `history.pushState` ਨਾਲ ਜੋੜ ਰਹੇ ਹਾਂ), ਪਰ ਜਦੋਂ ਯੂਜ਼ਰ ਇਸ ਇਤਿਹਾਸ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ, ਤਾਂ ਸਾਡੇ ਐਪ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਸਮੱਗਰੀ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਪਵੇਗਾ।
 
 ```mermaid
 sequenceDiagram
@@ -331,55 +473,69 @@ sequenceDiagram
 ```
 
 **ਮੁੱਖ ਇੰਟਰੈਕਸ਼ਨ ਬਿੰਦੂ:**
-- **ਉਪਭੋਗਤਾ ਕਾਰਵਾਈਆਂ** ਕਲਿਕ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਬਟਨਾਂ ਦੁਆਰਾ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦੀਆਂ ਹਨ
+- **ਯੂਜ਼ਰ ਕਾਰਵਾਈਆਂ** ਕਲਿਕ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਬਟਨਾਂ ਦੁਆਰਾ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦੀਆਂ ਹਨ
 - **ਐਪ ਰੋਕਦਾ ਹੈ** ਲਿੰਕ ਕਲਿਕਾਂ ਨੂੰ ਪੰਨਾ ਰੀਲੋਡ ਕਰਨ ਤੋਂ
-- **ਹਿਸਟਰੀ API** URL ਬਦਲਾਅ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਹਿਸਟਰੀ ਸਟੈਕ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ
-- **ਟੈਂਪਲੇਟ** ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਸਮੱਗਰੀ ਦੀ ਬਣਤਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ
-- **ਇਵੈਂਟ ਸੁਣਨ ਵਾਲੇ** ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ ਕਿ ਐਪ ਸਾਰੇ ਨੈਵੀਗੇਸ਼ਨ ਕਿਸਮਾਂ ਦਾ ਜਵਾਬ ਦਿੰਦਾ ਹੈ
+- **History API** URL ਬਦਲ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਇਤਿਹਾਸ ਸਟੈਕ ਨੂੰ ਮੈਨੇਜ ਕਰਦਾ ਹੈ
+- **ਟੈਂਪਲੇਟ** ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਸਮੱਗਰੀ ਸਟ੍ਰਕਚਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ
+- **ਇਵੈਂਟ ਲਿਸਨਰ** ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ ਕਿ ਐਪ ਸਾਰੇ ਨੈਵੀਗੇਸ਼ਨ ਕਿਸਮਾਂ ਲਈ ਪ੍ਰਤੀਕ੍ਰਿਆ
+- **ਆਰਕੀਟੈਕਟ** ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡ ਕੇ ਬਣਾਓ  
+- **ਲਾਗੂ ਕਰੋ** ਕਲਾਇੰਟ-ਸਾਈਡ ਰਾਊਟਿੰਗ ਸਿਸਟਮ ਜੋ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਜਟਿਲਤਾ ਨਾਲ ਵਧ ਸਕੇ  
+- **ਡਿਬੱਗ ਕਰੋ** ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਟਿਲ ਨੈਵੀਗੇਸ਼ਨ ਫਲੋਜ਼  
+- **ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਠੀਕ ਕਰੋ** ਕੁਸ਼ਲ ਟੈਂਪਲੇਟ ਮੈਨੇਜਮੈਂਟ ਰਾਹੀਂ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ  
+- **ਡਿਜ਼ਾਈਨ ਕਰੋ** ਯੂਜ਼ਰ ਅਨੁਭਵ ਜੋ ਸਵਦੇਸ਼ੀ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ  
+
+**ਫਰੰਟਐਂਡ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਮਾਹਰ ਸੰਕਲਪ**:  
+- **ਕੰਪੋਨੈਂਟ ਆਰਕੀਟੈਕਚਰ**: ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ UI ਪੈਟਰਨ ਅਤੇ ਟੈਂਪਲੇਟ ਸਿਸਟਮ  
+- **ਸਟੇਟ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ੇਸ਼ਨ**: URL ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਹਿਸਟਰੀ  
+- **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਯੂਜ਼ਰ ਇੰਟਰੈਕਸ਼ਨ ਹੈਂਡਲਿੰਗ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ  
+- **ਪ੍ਰਦਰਸ਼ਨ ਠੀਕ ਕਰਨਾ**: ਕੁਸ਼ਲ DOM ਮੈਨੇਜਮੈਂਟ ਅਤੇ ਸਮੱਗਰੀ ਲੋਡਿੰਗ  
+- **ਯੂਜ਼ਰ ਅਨੁਭਵ ਡਿਜ਼ਾਈਨ**: ਸਮੂਥ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਅਤੇ ਸਹਜ ਨੈਵੀਗੇਸ਼ਨ  
+
+**ਅਗਲਾ ਪੱਧਰ**: ਤੁਸੀਂ ਮਾਡਰਨ ਫਰੰਟਐਂਡ ਫਰੇਮਵਰਕਸ, ਐਡਵਾਂਸਡ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਜਾਂ ਜਟਿਲ ਐਂਟਰਪ੍ਰਾਈਜ਼ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ!  
+
+🌟 **ਸਫਲਤਾ ਪ੍ਰਾਪਤ**: ਤੁਸੀਂ ਮਾਡਰਨ ਵੈੱਬ ਆਰਕੀਟੈਕਚਰ ਪੈਟਰਨਜ਼ ਨਾਲ ਇੱਕ ਪੇਸ਼ੇਵਰ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਬੁਨਿਆਦ ਬਣਾਈ ਹੈ!  
 
-`history.pushState` ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਹਿਸਟਰੀ ਵਿੱਚ ਨਵੇਂ ਐਂਟਰੀ ਬਣਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਇਸਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ *ਬੈਕ ਬਟਨ* ਨੂੰ ਦਬਾ ਕੇ ਚੈੱਕ ਕਰ ਸਕਦੇ ਹੋ, ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:
+---
 
-![ਨੈਵੀਗੇਸ਼ਨ ਹਿਸਟਰੀ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.pa.png)
+## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀  
 
-ਜੇਕਰ ਤੁਸੀਂ ਕੁਝ ਵਾਰ ਬੈਕ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਤਾਂ ਤੁਸੀਂ ਵੇਖੋਗੇ ਕਿ ਮੌਜੂਦਾ URL ਬਦਲਦਾ ਹੈ ਅਤੇ ਹਿਸਟਰੀ ਅਪਡੇਟ ਹੁੰਦੀ ਹੈ, ਪਰ ਉਹੀ ਟੈਂਪਲੇਟ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:  
 
-ਇਸਦਾ ਕਾਰਨ ਇਹ ਹੈ ਕਿ ਐਪ ਨੂੰ ਪਤਾ ਨਹੀਂ ਕਿ ਸਾਨੂੰ ਹਰ ਵਾਰ ਹਿਸਟਰੀ ਬਦਲਣ 'ਤੇ `updateRoute()` ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) ਦਸਤਾਵੇਜ਼ ਨੂੰ ਵੇਖੋ, ਤਾਂ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ ਕਿ ਜੇਕਰ ਸਟੇਟ ਬਦਲਦਾ ਹੈ - ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਅਸੀਂ ਵੱਖ-ਵੱਖ URL 'ਤੇ ਚਲੇ ਗਏ - ਤਾਂ [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) ਇਵੈਂਟ ਟ੍ਰਿਗਰ ਹੁੰਦਾ ਹੈ। ਅਸੀਂ ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ।
+**ਵੇਰਵਾ:** ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਸੁਧਾਰੋ ਜੇਕਰ ਗਲਤ ਰੂਟਸ ਤੇ ਜਾਓ ਤਾਂ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਐਰਰ ਹੈਂਡਲਿੰਗ ਅਤੇ 404 ਪੇਜ ਟੈਂਪਲੇਟ ਲਾਗੂ ਕਰੋ।  
 
-### ਟਾਸਕ
+**ਪ੍ਰੋੰਪਟ:** "not-found" ਆਈਡੀ ਨਾਲ ਇੱਕ ਨਵਾਂ HTML ਟੈਂਪਲੇਟ ਬਣਾਓ ਜੋ ਯੂਜ਼ਰ-ਫ੍ਰੈਂਡਲੀ 404 ਐਰਰ ਪੇਜ ਸਟਾਈਲਿੰਗ ਨਾਲ ਦਿਖਾਏ। ਫਿਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਾਊਟਿੰਗ ਲਾਜ਼ਿਕ ਨੂੰ ਸੋਧੋ ਤਾਂ ਜੋ ਇਹ ਟੈਂਪਲੇਟ ਗਲਤ URLs ਤੇ ਦਿਖਾਈ ਦੇਵੇ, ਅਤੇ "Go Home" ਬਟਨ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਲੌਗਇਨ ਪੇਜ ਤੇ ਵਾਪਸ ਨੈਵੀਗੇਟ ਕਰੇ।  
 
-ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਹਿਸਟਰੀ ਬਦਲਣ 'ਤੇ ਦਿਖਾਈ ਗਈ ਟੈਂਪਲੇਟ ਅਪਡੇਟ ਹੁੰਦੀ ਹੈ, ਅਸੀਂ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ ਜੋੜਾਂਗੇ ਜੋ `updateRoute()` ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ। ਅਸੀਂ ਇਹ ਆਪਣੇ `app.js` ਫਾਈਲ ਦੇ ਤਲ 'ਤੇ ਕਰਾਂਗੇ:
+Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ [ਇਥੇ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)।  
 
-```js
-window.onpopstate = () => updateRoute();
-updateRoute();
-```
-
-**ਇਸ ਹਿਸਟਰੀ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਨੂੰ ਸਮਝਣਾ:**
-- **ਸੁਣਦਾ ਹੈ** `popstate` ਇਵੈਂਟਾਂ ਲਈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਬਟਨਾਂ ਨਾਲ ਉਪਭੋਗਤਾ ਨੈਵੀਗੇਸ਼ਨ ਕਰਨ 'ਤੇ ਹੁੰਦੇ ਹਨ
-- **ਵਰਤਦਾ ਹੈ** ਸੰਖੇਪ ਇਵੈਂਟ ਹੈਂਡਲਰ ਸਿੰਟੈਕਸ ਲਈ ਐਰੋ ਫੰਕਸ਼ਨ
-- **ਆਪਮਾਤਰ ਕਾਲ ਕਰਦਾ ਹੈ** `updateRoute()` ਜਦੋਂ ਵੀ ਹਿਸਟਰੀ ਸਟੇਟ ਬਦਲਦਾ ਹੈ
-- **ਐਪ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** `updateRoute()` ਨੂੰ ਕਾਲ ਕਰਕੇ ਜਦੋਂ ਪੰਨਾ ਪਹਿਲੀ ਵਾਰ ਲੋਡ ਹੁੰਦਾ ਹੈ
-- **ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ** ਕਿ ਉਪਭੋਗਤਾ ਕਿਸੇ ਵੀ ਤਰੀਕੇ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰਨ ਦੇ ਬਾਵਜੂਦ ਸਹੀ ਟੈਂਪਲੇਟ ਵੇਖਦੇ ਹਨ
+## 🚀 ਚੈਲੈਂਜ  
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਅਸੀਂ ਇੱਥੇ ਆਪਣੇ `popstate` ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਘੁੰਮਣ ਲਈ [ਐਰੋ ਫੰਕਸ਼ਨ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ਦੀ ਵਰਤੋਂ ਕੀਤੀ, ਪਰ ਇੱਕ ਰਵਾਇਤੀ ਫੰਕਸ਼ਨ ਵੀ ਉਹੀ ਕੰਮ ਕਰੇਗਾ।
+ਇਸ ਐਪ ਲਈ ਕਰੈਡਿਟਸ ਦਿਖਾਉਣ ਵਾਲੇ ਤੀਜੇ ਪੇਜ ਲਈ ਨਵਾਂ ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟ ਸ਼ਾਮਲ ਕਰੋ।  
 
-ਇੱਥੇ ਐਰੋ ਫੰਕਸ਼ਨ 'ਤੇ ਇੱਕ ਰਿਫਰੈਸ਼ਰ ਵੀਡੀਓ ਹੈ:
+**ਚੈਲੈਂਜ ਦੇ ਲਕਸ਼**:  
+- **ਬਣਾਓ** ਇੱਕ ਨਵਾਂ HTML ਟੈਂਪਲੇਟ ਜਿਸ ਵਿੱਚ ਉਚਿਤ ਸਮੱਗਰੀ ਸਟ੍ਰਕਚਰ ਹੋਵੇ  
+- **ਨਵਾਂ ਰੂਟ ਸ਼ਾਮਲ ਕਰੋ** ਆਪਣੇ ਰੂਟਸ ਕਨਫਿਗਰੇਸ਼ਨ ਆਬਜੈਕਟ ਵਿੱਚ  
+- **ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਸ਼ਾਮਲ ਕਰੋ** ਕਰੈਡਿਟਸ ਪੇਜ ਤੇ ਅਤੇ ਵਾਪਸ  
+- **ਟੈਸਟ ਕਰੋ** ਕਿ ਸਾਰਾ ਨੈਵੀਗੇਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰ ਹਿਸਟਰੀ ਨਾਲ ਸਹੀ ਕੰਮ ਕਰਦਾ ਹੈ  
 
-[![ਐਰੋ ਫੰਕਸ਼ਨ](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "ਐਰੋ ਫੰਕਸ਼ਨ")
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ  
 
-> 🎥 ਉੱਪਰ ਦਿੱਤੀ ਤਸਵੀਰ 'ਤੇ ਕਲਿਕ ਕਰੋ ਐਰੋ ਫੰਕਸ਼ਨ ਬਾਰੇ ਵੀਡੀਓ ਲਈ।
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ](https://ff-quizzes.netlify.app/web/quiz/42)  
 
-ਹੁਣ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਬੈਕ ਅਤੇ ਫਾਰਵਰਡ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਅਤੇ ਚੈੱਕ ਕਰੋ ਕਿ ਦਿਖਾਈ ਗਈ ਰੂਟ ਇਸ ਵਾਰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਅਪਡੇਟ ਹੁੰਦੀ ਹੈ।
+## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ-ਅਧਿਐਨ  
 
----
+ਰਾਊਟਿੰਗ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਹੈਰਾਨੀਜਨਕ ਤੌਰ ਤੇ ਜਟਿਲ ਹਿੱਸਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਵੈੱਬ ਪੇਜ ਰਿਫ੍ਰੈਸ਼ ਬਿਹੇਵਿਅਰ ਤੋਂ ਸਿੰਗਲ ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਪੇਜ ਰਿਫ੍ਰੈਸ਼ ਵੱਲ ਵਧਦਾ ਹੈ। [Azure Static Web App ਸੇਵਾ](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) ਰਾਊਟਿੰਗ ਨੂੰ ਕਿਵੇਂ ਹੈਂਡਲ ਕਰਦੀ ਹੈ ਇਸ ਬਾਰੇ ਕੁਝ ਪੜ੍ਹੋ। ਕੀ ਤੁਸੀਂ ਸਮਝਾ ਸਕਦੇ ਹੋ ਕਿ ਇਸ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਵਰਣਨ ਕੀਤੇ ਕੁਝ ਫੈਸਲੇ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹਨ?  
 
-## GitHub Copilot Agent Challenge 🚀
+**ਵਾਧੂ ਸਿੱਖਣ ਦੇ ਸਰੋਤ**:  
+- **ਖੋਜ ਕਰੋ** ਕਿ ਪ੍ਰਸਿੱਧ ਫਰੇਮਵਰਕਸ ਜਿਵੇਂ React Router ਅਤੇ Vue Router ਕਲਾਇੰਟ-ਸਾਈਡ ਰਾਊਟਿੰਗ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਦੇ ਹਨ  
+- **ਅੰਤਰਾਂ ਦੀ ਖੋਜ ਕਰੋ** ਹੈਸ਼-ਅਧਾਰਿਤ ਰਾਊਟਿੰਗ ਅਤੇ ਹਿਸਟਰੀ API ਰਾਊਟਿੰਗ ਵਿੱਚ  
+- **ਸਿੱਖੋ** ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ (SSR) ਬਾਰੇ ਅਤੇ ਇਹ ਰਾਊਟਿੰਗ ਰਣਨੀਤੀਆਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ  
+- **ਜਾਂਚ ਕਰੋ** ਕਿ ਪ੍ਰੋਗਰੈਸਿਵ ਵੈੱਬ ਐਪਸ (PWAs) ਰਾਊਟਿੰਗ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਹੈਂਡਲ ਕਰਦੇ ਹਨ  
 
-Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
+## ਅਸਾਈਨਮੈਂਟ  
 
-**ਵੇਰਵਾ:** ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਗਲ
+[ਰਾਊਟਿੰਗ ਨੂੰ ਸੁਧਾਰੋ](assignment.md)  
 
 ---
 
 **ਅਸਵੀਕਰਤੀ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/7-bank-project/2-forms/README.md b/translations/pa/7-bank-project/2-forms/README.md
index 52d8b00570..c680d10910 100644
--- a/translations/pa/7-bank-project/2-forms/README.md
+++ b/translations/pa/7-bank-project/2-forms/README.md
@@ -1,44 +1,91 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b24f28fc46dd473aa9080f174182adde",
-  "translation_date": "2025-10-22T18:01:06+00:00",
+  "original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
+  "translation_date": "2025-11-03T16:44:15+00:00",
   "source_file": "7-bank-project/2-forms/README.md",
   "language_code": "pa"
 }
 -->
 # ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 2: ਲੌਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਬਣਾਓ
 
-## ਪੂਰਵ-ਵਿਆਖਿਆ ਪ੍ਰਸ਼ਨਾਵਲੀ
+```mermaid
+journey
+    title Your Form Development Journey
+    section HTML Foundation
+      Understand form elements: 3: Student
+      Learn input types: 4: Student
+      Master accessibility: 4: Student
+    section JavaScript Integration
+      Handle form submission: 4: Student
+      Implement AJAX communication: 5: Student
+      Process server responses: 5: Student
+    section Validation Systems
+      Create multi-layer validation: 5: Student
+      Enhance user experience: 5: Student
+      Ensure data integrity: 5: Student
+```
+
+## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
 
-[ਪੂਰਵ-ਵਿਆਖਿਆ ਪ੍ਰਸ਼ਨਾਵਲੀ](https://ff-quizzes.netlify.app/web/quiz/43)
+[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/43)
 
-ਕੀ ਤੁਸੀਂ ਕਦੇ ਆਨਲਾਈਨ ਫਾਰਮ ਭਰਿਆ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਈਮੇਲ ਫਾਰਮੈਟ ਨੂੰ ਰੱਦ ਕਰ ਦਿੱਤਾ ਗਿਆ? ਜਾਂ ਸਾਰਾ ਡਾਟਾ ਗੁਆ ਲਿਆ ਜਦੋਂ ਤੁਸੀਂ ਸਬਮਿਟ ਦਬਾਇਆ? ਅਸੀਂ ਸਾਰੇ ਇਹਨਾਂ ਨਿਰਾਸ਼ਾਜਨਕ ਤਜਰਬਿਆਂ ਦਾ ਸਾਹਮਣਾ ਕੀਤਾ ਹੈ।
+ਕੀ ਤੁਸੀਂ ਕਦੇ ਆਨਲਾਈਨ ਫਾਰਮ ਭਰਿਆ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਈਮੇਲ ਫਾਰਮੈਟ ਨੂੰ ਰੱਦ ਕਰ ਦਿੱਤਾ ਗਿਆ? ਜਾਂ ਜਦੋਂ ਤੁਸੀਂ ਸਬਮਿਟ ਦਬਾਇਆ ਤਾਂ ਸਾਰਾ ਡਾਟਾ ਗੁਆ ਲਿਆ? ਅਸੀਂ ਸਾਰੇ ਇਹਨਾਂ ਨਿਰਾਸ਼ਾਜਨਕ ਤਜਰਬਿਆਂ ਦਾ ਸਾਹਮਣਾ ਕੀਤਾ ਹੈ।
 
-ਫਾਰਮ ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਅਤੇ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਦੇ ਵਿਚਕਾਰ ਪੁਲ ਹਨ। ਜਿਵੇਂ ਹਵਾਈ ਟ੍ਰੈਫਿਕ ਕੰਟਰੋਲਰਜ਼ ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਨਾਲ ਜਹਾਜ਼ਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਮੰਜ਼ਿਲਾਂ ਤੱਕ ਪਹੁੰਚਾਉਣ ਲਈ ਧਿਆਨਪੂਰਵਕ ਪ੍ਰੋਟੋਕੋਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਚੰਗੀ ਤਰ੍ਹਾਂ ਡਿਜ਼ਾਈਨ ਕੀਤੇ ਫਾਰਮ ਸਪਸ਼ਟ ਫੀਡਬੈਕ ਦਿੰਦੇ ਹਨ ਅਤੇ ਮਹਿੰਗੇ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦੇ ਹਨ। ਦੂਜੇ ਪਾਸੇ, ਖਰਾਬ ਫਾਰਮ ਯੂਜ਼ਰ ਨੂੰ ਜਲਦੀ ਦੂਰ ਕਰ ਸਕਦੇ ਹਨ।
+ਫਾਰਮ ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਅਤੇ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਦੇ ਵਿਚਕਾਰ ਪੁਲ ਹਨ। ਜਿਵੇਂ ਹਵਾਈ ਟ੍ਰੈਫਿਕ ਕੰਟਰੋਲਰ ਜਹਾਜ਼ਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਨਾਲ ਉਨ੍ਹਾਂ ਦੇ ਮੰਜ਼ਿਲਾਂ ਤੱਕ ਪਹੁੰਚਾਉਣ ਲਈ ਸਾਵਧਾਨੀ ਨਾਲ ਪ੍ਰੋਟੋਕੋਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਡਿਜ਼ਾਈਨ ਕੀਤੇ ਫਾਰਮ ਸਪਸ਼ਟ ਫੀਡਬੈਕ ਦਿੰਦੇ ਹਨ ਅਤੇ ਮਹਿੰਗੇ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦੇ ਹਨ। ਖਰਾਬ ਫਾਰਮ, ਦੂਜੇ ਪਾਸੇ, ਯੂਜ਼ਰ ਨੂੰ ਜਲਦੀ ਦੂਰ ਕਰ ਸਕਦੇ ਹਨ।
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਤੁਹਾਡੇ ਸਥਿਰ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲਾਂਗੇ। ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਯੂਜ਼ਰ ਇਨਪੁੱਟ ਦੀ ਵੈਧਤਾ ਦੀ ਜਾਂਚ ਕਰਨ ਵਾਲੇ, ਸਰਵਰਾਂ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਵਾਲੇ ਅਤੇ ਮਦਦਗਾਰ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਨ ਵਾਲੇ ਫਾਰਮ ਕਿਵੇਂ ਬਣਾਉਣੇ ਹਨ। ਇਸਨੂੰ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੇ ਲਈ ਕੰਟਰੋਲ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਵਾਂਗ ਸਮਝੋ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਤੁਹਾਡੇ ਸਥਿਰ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲਾਂਗੇ। ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਯੂਜ਼ਰ ਇਨਪੁਟ ਦੀ ਵੈਧਤਾ ਦੀ ਜਾਂਚ ਕਰਨ ਵਾਲੇ, ਸਰਵਰਾਂ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਵਾਲੇ ਅਤੇ ਮਦਦਗਾਰ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਨ ਵਾਲੇ ਫਾਰਮ ਕਿਵੇਂ ਬਣਾਉਣੇ ਹਨ। ਇਸਨੂੰ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੇ ਯੂਜ਼ਰ ਨੂੰ ਸਹਾਇਕ ਬਣਾਉਣ ਵਾਲੇ ਕੰਟਰੋਲ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਵਜੋਂ ਸੋਚੋ।
 
-ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪੂਰਾ ਲੌਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਸਿਸਟਮ ਹੋਵੇਗਾ ਜਿਸ ਵਿੱਚ ਵੈਧਤਾ ਹੋਵੇਗੀ ਜੋ ਯੂਜ਼ਰਾਂ ਨੂੰ ਨਿਰਾਸ਼ਾ ਦੀ ਬਜਾਏ ਸਫਲਤਾ ਵੱਲ ਦਿਸ਼ਾ ਦਿੰਦਾ ਹੈ।
+ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪੂਰਾ ਲੌਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਸਿਸਟਮ ਹੋਵੇਗਾ ਜਿਸ ਵਿੱਚ ਵੈਧਤਾ ਹੋਵੇਗੀ ਜੋ ਯੂਜ਼ਰ ਨੂੰ ਨਿਰਾਸ਼ਾ ਦੀ ਬਜਾਏ ਸਫਲਤਾ ਵੱਲ ਦਿਸ਼ਾ ਦਿੰਦਾ ਹੈ।
+
+```mermaid
+mindmap
+  root((Form Development))
+    HTML Foundation
+      Semantic Elements
+      Input Types
+      Accessibility
+      Label Association
+    User Experience
+      Validation Feedback
+      Error Prevention
+      Loading States
+      Success Messaging
+    JavaScript Integration
+      Event Handling
+      AJAX Communication
+      Data Processing
+      Error Management
+    Validation Layers
+      HTML5 Validation
+      Client-side Logic
+      Server-side Security
+      Progressive Enhancement
+    Modern Patterns
+      Fetch API
+      Async/Await
+      Form Data API
+      Promise Handling
+```
 
 ## ਪੂਰਵ ਸ਼ਰਤਾਂ
 
-ਫਾਰਮ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਇਹ ਯਕੀਨੀ ਬਣਾਈਏ ਕਿ ਤੁਹਾਡਾ ਸੈਟਅੱਪ ਸਹੀ ਹੈ। ਇਹ ਪਾਠ ਪਿਛਲੇ ਪਾਠ ਤੋਂ ਸਿੱਧਾ ਜੁੜਦਾ ਹੈ, ਇਸ ਲਈ ਜੇ ਤੁਸੀਂ ਅੱਗੇ ਵਧ ਗਏ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਪਹਿਲਾਂ ਮੁੱਢਲੀ ਚੀਜ਼ਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸੈਟ ਕਰਨ ਲਈ ਵਾਪਸ ਜਾ ਸਕਦੇ ਹੋ।
+ਫਾਰਮ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਇਹ ਯਕੀਨੀ ਬਣਾਈਏ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਸਭ ਕੁਝ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਸੈਟਅਪ ਹੈ। ਇਹ ਪਾਠ ਪਿਛਲੇ ਪਾਠ ਤੋਂ ਸਿੱਧੇ ਜੁੜਦਾ ਹੈ, ਇਸ ਲਈ ਜੇ ਤੁਸੀਂ ਅੱਗੇ ਵਧ ਗਏ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਪਹਿਲਾਂ ਮੁੱਢਲੀ ਚੀਜ਼ਾਂ ਨੂੰ ਸੈਟਅਪ ਕਰਨ ਲਈ ਵਾਪਸ ਜਾਣਾ ਚਾਹੁੰਦੇ ਹੋ।
 
-### ਲੋੜੀਂਦਾ ਸੈਟਅੱਪ
+### ਲੋੜੀਂਦਾ ਸੈਟਅਪ
 
 | ਕੰਪੋਨੈਂਟ | ਸਥਿਤੀ | ਵੇਰਵਾ |
 |-----------|--------|-------------|
 | [HTML ਟੈਂਪਲੇਟ](../1-template-route/README.md) | ✅ ਲੋੜੀਂਦਾ | ਤੁਹਾਡੇ ਬੈਂਕਿੰਗ ਐਪ ਦੀ ਮੁੱਢਲੀ ਬਣਤਰ |
 | [Node.js](https://nodejs.org) | ✅ ਲੋੜੀਂਦਾ | ਸਰਵਰ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਨਟਾਈਮ |
-| [ਬੈਂਕ API ਸਰਵਰ](../api/README.md) | ✅ ਲੋੜੀਂਦਾ | ਡਾਟਾ ਸਟੋਰੇਜ ਲਈ ਬੈਕਐਂਡ ਸੇਵਾ |
+| [Bank API Server](../api/README.md) | ✅ ਲੋੜੀਂਦਾ | ਡਾਟਾ ਸਟੋਰੇਜ ਲਈ ਬੈਕਐਂਡ ਸੇਵਾ |
 
-> 💡 **ਡਿਵੈਲਪਮੈਂਟ ਟਿਪ**: ਤੁਸੀਂ ਇੱਕ ਸਮੇਂ ਦੋ ਵੱਖ-ਵੱਖ ਸਰਵਰ ਚਲਾਉਂਦੇ ਹੋ – ਇੱਕ ਤੁਹਾਡੇ ਫਰੰਟ-ਐਂਡ ਬੈਂਕਿੰਗ ਐਪ ਲਈ ਅਤੇ ਦੂਜਾ ਬੈਕਐਂਡ API ਲਈ। ਇਹ ਸੈਟਅੱਪ ਅਸਲ ਦੁਨੀਆ ਦੇ ਵਿਕਾਸ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿੱਥੇ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਸੇਵਾਵਾਂ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
+> 💡 **ਡਿਵੈਲਪਮੈਂਟ ਟਿਪ**: ਤੁਸੀਂ ਇੱਕ ਸਮੇਂ ਦੋ ਵੱਖਰੇ ਸਰਵਰ ਚਲਾਉਂਦੇ ਹੋ – ਇੱਕ ਤੁਹਾਡੇ ਫਰੰਟ-ਐਂਡ ਬੈਂਕਿੰਗ ਐਪ ਲਈ ਅਤੇ ਦੂਜਾ ਬੈਕਐਂਡ API ਲਈ। ਇਹ ਸੈਟਅਪ ਅਸਲ-ਜਗਤ ਦੇ ਵਿਕਾਸ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿੱਥੇ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਸੇਵਾਵਾਂ ਅਜ਼ਾਦੀ ਨਾਲ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
 
 ### ਸਰਵਰ ਸੰਰਚਨਾ
 
 **ਤੁਹਾਡਾ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਸ਼ਾਮਲ ਕਰੇਗਾ:**
-- **ਫਰੰਟਐਂਡ ਸਰਵਰ**: ਤੁਹਾਡੇ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਸੇਵਾ ਦਿੰਦਾ ਹੈ (ਆਮ ਤੌਰ 'ਤੇ ਪੋਰਟ `3000`)
+- **ਫਰੰਟਐਂਡ ਸਰਵਰ**: ਤੁਹਾਡੇ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਸਰਵ ਕਰਦਾ ਹੈ (ਆਮ ਤੌਰ 'ਤੇ ਪੋਰਟ `3000`)
 - **ਬੈਕਐਂਡ API ਸਰਵਰ**: ਡਾਟਾ ਸਟੋਰੇਜ ਅਤੇ ਰੀਟਰੀਵਲ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ (ਪੋਰਟ `5000`)
 - **ਦੋਵੇਂ ਸਰਵਰ** ਬਿਨਾਂ ਕਿਸੇ ਟਕਰਾਅ ਦੇ ਇੱਕ ਸਮੇਂ ਚਲ ਸਕਦੇ ਹਨ
 
@@ -54,11 +101,11 @@ curl http://localhost:5000/api
 
 ## HTML ਫਾਰਮ ਅਤੇ ਕੰਟਰੋਲ ਨੂੰ ਸਮਝਣਾ
 
-HTML ਫਾਰਮ ਤੁਹਾਡੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਨਾਲ ਯੂਜ਼ਰਾਂ ਦੇ ਸੰਚਾਰ ਦਾ ਸਾਧਨ ਹਨ। ਇਹਨਾਂ ਨੂੰ 19ਵੀਂ ਸਦੀ ਦੇ ਦੂਰ-ਦੂਰ ਦੇ ਸਥਾਨਾਂ ਨੂੰ ਜੋੜਨ ਵਾਲੇ ਟੈਲੀਗ੍ਰਾਫ ਸਿਸਟਮ ਵਾਂਗ ਸੋਚੋ – ਇਹ ਯੂਜ਼ਰ ਦੇ ਇਰਾਦੇ ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਜਵਾਬ ਦੇ ਵਿਚਕਾਰ ਸੰਚਾਰ ਪ੍ਰੋਟੋਕੋਲ ਹਨ। ਜਦੋਂ ਧਿਆਨਪੂਰਵਕ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਗਲਤੀਆਂ ਨੂੰ ਫੜਦੇ ਹਨ, ਇਨਪੁੱਟ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਗਾਈਡ ਕਰਦੇ ਹਨ ਅਤੇ ਮਦਦਗਾਰ ਸੁਝਾਅ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
+HTML ਫਾਰਮ ਤੁਹਾਡੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਨਾਲ ਯੂਜ਼ਰਾਂ ਦੇ ਸੰਚਾਰ ਦਾ ਸਾਧਨ ਹਨ। ਇਹਨਾਂ ਨੂੰ 19ਵੀਂ ਸਦੀ ਵਿੱਚ ਦੂਰ-ਦੂਰ ਦੇ ਸਥਾਨਾਂ ਨੂੰ ਜੋੜਨ ਵਾਲੇ ਟੈਲੀਗ੍ਰਾਫ ਸਿਸਟਮ ਵਜੋਂ ਸੋਚੋ – ਇਹ ਯੂਜ਼ਰ ਦੇ ਇਰਾਦੇ ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਜਵਾਬ ਦੇ ਵਿਚਕਾਰ ਸੰਚਾਰ ਪ੍ਰੋਟੋਕੋਲ ਹਨ। ਜਦੋਂ ਸੋਚ-ਵਿਚਾਰ ਨਾਲ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਗਲਤੀਆਂ ਨੂੰ ਫੜਦੇ ਹਨ, ਇਨਪੁਟ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਗਾਈਡ ਕਰਦੇ ਹਨ ਅਤੇ ਮਦਦਗਾਰ ਸੁਝਾਅ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
 
-ਆਧੁਨਿਕ ਫਾਰਮ ਬੁਨਿਆਦੀ ਟੈਕਸਟ ਇਨਪੁੱਟ ਤੋਂ ਕਾਫੀ ਜ਼ਿਆਦਾ ਸੁਧਾਰਸ਼ੀਲ ਹਨ। HTML5 ਨੇ ਵਿਸ਼ੇਸ਼ ਇਨਪੁੱਟ ਕਿਸਮਾਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕੀਤੀ ਜੋ ਈਮੇਲ ਵੈਧਤਾ, ਨੰਬਰ ਫਾਰਮੈਟਿੰਗ ਅਤੇ ਮਿਤੀ ਚੋਣ ਨੂੰ ਆਪਣੇ ਆਪ ਸੰਭਾਲਦੇ ਹਨ। ਇਹ ਸੁਧਾਰ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਮੋਬਾਈਲ ਯੂਜ਼ਰ ਅਨੁਭਵਾਂ ਦੋਵਾਂ ਲਈ ਲਾਭਦਾਇਕ ਹਨ।
+ਆਧੁਨਿਕ ਫਾਰਮ ਬੁਨਿਆਦੀ ਟੈਕਸਟ ਇਨਪੁਟ ਤੋਂ ਕਾਫੀ ਜ਼ਿਆਦਾ ਸੁਧਾਰਸ਼ੀਲ ਹਨ। HTML5 ਨੇ ਵਿਸ਼ੇਸ਼ ਇਨਪੁਟ ਕਿਸਮਾਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕੀਤੀ ਜੋ ਈਮੇਲ ਵੈਧਤਾ, ਨੰਬਰ ਫਾਰਮੈਟਿੰਗ ਅਤੇ ਮਿਤੀ ਚੋਣ ਨੂੰ ਆਪਣੇ ਆਪ ਸੰਭਾਲਦੇ ਹਨ। ਇਹ ਸੁਧਾਰ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਮੋਬਾਈਲ ਯੂਜ਼ਰ ਅਨੁਭਵਾਂ ਦੋਵਾਂ ਲਈ ਲਾਭਦਾਇਕ ਹਨ।
 
-### ਲੋੜੀਂਦੇ ਫਾਰਮ ਤੱਤ
+### ਜ਼ਰੂਰੀ ਫਾਰਮ ਤੱਤ
 
 **ਹਰ ਫਾਰਮ ਨੂੰ ਲੋੜੀਂਦੇ ਬਲਾਕ:**
 
@@ -75,20 +122,20 @@ HTML ਫਾਰਮ ਤੁਹਾਡੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ 
 **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:**
 - **ਇੱਕ ਫਾਰਮ ਕੰਟੇਨਰ ਬਣਾਉਂਦਾ ਹੈ** ਜਿਸ ਵਿੱਚ ਇੱਕ ਵਿਲੱਖਣ ਪਛਾਣਕਰਤਾ ਹੁੰਦਾ ਹੈ
 - **ਡਾਟਾ ਸਬਮਿਸ਼ਨ ਲਈ HTTP ਵਿਧੀ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ**
-- **ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਲੇਬਲਾਂ ਨੂੰ ਇਨਪੁੱਟ ਨਾਲ ਜੋੜਦਾ ਹੈ**
+- **ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਲੇਬਲਾਂ ਨੂੰ ਇਨਪੁਟ ਨਾਲ ਜੋੜਦਾ ਹੈ**
 - **ਫਾਰਮ ਨੂੰ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਲਈ ਸਬਮਿਟ ਬਟਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ**
 
-### ਆਧੁਨਿਕ ਇਨਪੁੱਟ ਕਿਸਮਾਂ ਅਤੇ ਗੁਣ
+### ਆਧੁਨਿਕ ਇਨਪੁਟ ਕਿਸਮਾਂ ਅਤੇ ਗੁਣ
 
-| ਇਨਪੁੱਟ ਕਿਸਮ | ਉਦੇਸ਼ | ਉਦਾਹਰਨ ਵਰਤੋਂ |
+| ਇਨਪੁਟ ਕਿਸਮ | ਉਦੇਸ਼ | ਉਦਾਹਰਨ ਵਰਤੋਂ |
 |------------|---------|---------------|
-| `text` | ਆਮ ਟੈਕਸਟ ਇਨਪੁੱਟ | `<input type="text" name="username">` |
+| `text` | ਆਮ ਟੈਕਸਟ ਇਨਪੁਟ | `<input type="text" name="username">` |
 | `email` | ਈਮੇਲ ਵੈਧਤਾ | `<input type="email" name="email">` |
-| `password` | ਲੁਕਿਆ ਹੋਇਆ ਟੈਕਸਟ ਇਨਟਰੀ | `<input type="password" name="password">` |
-| `number` | ਸੰਖਿਆਵਾਂ ਦਾ ਇਨਪੁੱਟ | `<input type="number" name="balance" min="0">` |
+| `password` | ਲੁਕਿਆ ਹੋਇਆ ਟੈਕਸਟ ਐਂਟਰੀ | `<input type="password" name="password">` |
+| `number` | ਸੰਖਿਆਵਾਂ ਦਾ ਇਨਪੁਟ | `<input type="number" name="balance" min="0">` |
 | `tel` | ਫੋਨ ਨੰਬਰ | `<input type="tel" name="phone">` |
 
-> 💡 **ਆਧੁਨਿਕ HTML5 ਫਾਇਦਾ**: ਵਿਸ਼ੇਸ਼ ਇਨਪੁੱਟ ਕਿਸਮਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਆਪਣੇ ਆਪ ਵੈਧਤਾ, ਉਚਿਤ ਮੋਬਾਈਲ ਕੀਬੋਰਡ ਅਤੇ ਬਿਹਤਰ ਪਹੁੰਚਯੋਗਤਾ ਸਹਾਇਤਾ ਪ੍ਰਦਾਨ ਹੁੰਦੀ ਹੈ ਬਿਨਾਂ ਵਾਧੂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ!
+> 💡 **ਆਧੁਨਿਕ HTML5 ਫਾਇਦਾ**: ਵਿਸ਼ੇਸ਼ ਇਨਪੁਟ ਕਿਸਮਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਬਿਨਾਂ ਵਾਧੂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਆਪਣੇ ਆਪ ਵੈਧਤਾ, ਉਚਿਤ ਮੋਬਾਈਲ ਕੀਬੋਰਡ ਅਤੇ ਵਧੀਆ ਪਹੁੰਚਯੋਗਤਾ ਸਹਾਇਤਾ ਪ੍ਰਦਾਨ ਹੁੰਦੀ ਹੈ!
 
 ### ਬਟਨ ਕਿਸਮਾਂ ਅਤੇ ਵਿਹਾਰ
 
@@ -100,15 +147,15 @@ HTML ਫਾਰਮ ਤੁਹਾਡੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ 
 ```
 
 **ਹਰ ਬਟਨ ਕਿਸਮ ਕੀ ਕਰਦੀ ਹੈ:**
-- **ਸਬਮਿਟ ਬਟਨ**: ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ ਅਤੇ ਡਾਟਾ ਨੂੰ ਨਿਰਧਾਰਤ ਐਂਡਪੌਇੰਟ ਤੇ ਭੇਜਦੇ ਹਨ
-- **ਰੀਸੈਟ ਬਟਨ**: ਸਾਰੇ ਫਾਰਮ ਫੀਲਡਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ ਵਿੱਚ ਮੁੜ ਸਥਾਪਿਤ ਕਰਦੇ ਹਨ
-- **ਨਿਯਮਤ ਬਟਨ**: ਕੋਈ ਡਿਫਾਲਟ ਵਿਹਾਰ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰਦੇ, ਜਿਨ੍ਹਾਂ ਨੂੰ ਕਾਰਗੁਜ਼ਾਰੀ ਲਈ ਕਸਟਮ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ
+- **ਸਬਮਿਟ ਬਟਨ**: ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ ਅਤੇ ਡਾਟਾ ਨੂੰ ਨਿਰਧਾਰਤ ਐਂਡਪੌਇੰਟ ਤੇ ਭੇਜਦਾ ਹੈ
+- **ਰੀਸੈਟ ਬਟਨ**: ਸਾਰੇ ਫਾਰਮ ਫੀਲਡਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ ਵਿੱਚ ਮੁੜ ਸੈਟ ਕਰਦਾ ਹੈ
+- **ਸਧਾਰਨ ਬਟਨ**: ਕੋਈ ਡਿਫਾਲਟ ਵਿਹਾਰ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰਦਾ, ਜਿਸ ਲਈ ਵਿਸ਼ੇਸ਼ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ
 
-> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਨੋਟ**: `<input>` ਤੱਤ ਸਵੈ-ਬੰਦ ਹੈ ਅਤੇ ਬੰਦ ਕਰਨ ਵਾਲੇ ਟੈਗ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ। ਆਧੁਨਿਕ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸ `<input>` ਨੂੰ ਬਿਨਾਂ ਸਲੈਸ਼ ਦੇ ਲਿਖਣਾ ਹੈ।
+> ⚠️ **ਮਹੱਤਵਪੂਰਨ ਨੋਟ**: `<input>` ਤੱਤ ਸਵੈ-ਬੰਦ ਹੈ ਅਤੇ ਬੰਦ ਕਰਨ ਵਾਲੇ ਟੈਗ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ। ਆਧੁਨਿਕ ਵਧੀਆ ਅਭਿਆਸ `<input>` ਨੂੰ ਬਿਨਾਂ ਸਲੈਸ਼ ਦੇ ਲਿਖਣਾ ਹੈ।
 
 ### ਤੁਹਾਡਾ ਲੌਗਇਨ ਫਾਰਮ ਬਣਾਉਣਾ
 
-ਹੁਣ ਆਓ ਇੱਕ ਵਿਹਾਰਕ ਲੌਗਇਨ ਫਾਰਮ ਬਣਾਈਏ ਜੋ ਆਧੁਨਿਕ HTML ਫਾਰਮ ਅਭਿਆਸਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਅਸੀਂ ਇੱਕ ਬੁਨਿਆਦੀ ਬਣਤਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰਾਂਗੇ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਵੈਧਤਾ ਨਾਲ ਇਸਨੂੰ ਬਹੁਤਰੀਨ ਬਣਾਉਂਦੇ ਜਾਵਾਂਗੇ।
+ਹੁਣ ਆਓ ਇੱਕ ਵਿਹਾਰਕ ਲੌਗਇਨ ਫਾਰਮ ਬਣਾਈਏ ਜੋ ਆਧੁਨਿਕ HTML ਫਾਰਮ ਅਭਿਆਸਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਅਸੀਂ ਇੱਕ ਬੁਨਿਆਦੀ ਬਣਤਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰਾਂਗੇ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਵੈਧਤਾ ਨਾਲ ਇਸਨੂੰ ਧੀਰੇ-ਧੀਰੇ ਸੁਧਾਰਾਂਗੇ।
 
 ```html
 <template id="login">
@@ -128,13 +175,13 @@ HTML ਫਾਰਮ ਤੁਹਾਡੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ 
 ```
 
 **ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
-- **ਸੈਮੈਂਟਿਕ HTML5 ਤੱਤਾਂ ਨਾਲ ਫਾਰਮ ਬਣਾਉਂਦਾ ਹੈ**
-- **ਸੰਬੰਧਿਤ ਤੱਤਾਂ ਨੂੰ `div` ਕੰਟੇਨਰਾਂ ਵਿੱਚ ਸਮੂਹਬੱਧ ਕਰਦਾ ਹੈ**
-- **ਲੇਬਲਾਂ ਨੂੰ `for` ਅਤੇ `id` ਗੁਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਨਪੁੱਟ ਨਾਲ ਜੋੜਦਾ ਹੈ**
-- **ਬਿਹਤਰ UX ਲਈ `autocomplete` ਅਤੇ `placeholder` ਵਰਗੇ ਆਧੁਨਿਕ ਗੁਣ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ**
-- **ਵੈਧਤਾ ਨੂੰ ਸੰਭਾਲਣ ਲਈ `novalidate` ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ**
+- **ਸਮਾਂਜਸ HTML5 ਤੱਤਾਂ ਨਾਲ ਫਾਰਮ ਬਣਾਉਂਦਾ ਹੈ**
+- **ਅਰਥਪੂਰਨ ਕਲਾਸਾਂ ਨਾਲ `div` ਕੰਟੇਨਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਬੰਧਿਤ ਤੱਤਾਂ ਨੂੰ ਸਮੂਹਬੱਧ ਕਰਦਾ ਹੈ**
+- **ਲੇਬਲਾਂ ਨੂੰ `for` ਅਤੇ `id` ਗੁਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਨਪੁਟ ਨਾਲ ਜੋੜਦਾ ਹੈ**
+- **ਵਧੀਆ UX ਲਈ `autocomplete` ਅਤੇ `placeholder` ਵਰਗੇ ਆਧੁਨਿਕ ਗੁਣ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ**
+- **ਬ੍ਰਾਊਜ਼ਰ ਡਿਫਾਲਟ ਦੇ ਬਦਲੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਵੈਧਤਾ ਸੰਭਾਲਣ ਲਈ `novalidate` ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ**
 
-### ਸਹੀ ਲੇਬਲਾਂ ਦੀ ਤਾਕਤ
+### ਠੀਕ ਲੇਬਲਾਂ ਦੀ ਤਾਕਤ
 
 **ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਲੇਬਲ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹਨ:**
 
@@ -151,18 +198,18 @@ graph TD
     E --> I[Better search ranking]
 ```
 
-**ਸਹੀ ਲੇਬਲ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ:**
-- **ਸਕ੍ਰੀਨ ਰੀਡਰਜ਼ ਨੂੰ ਫਾਰਮ ਫੀਲਡਾਂ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਐਲਾਨ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦੇ ਹਨ**
-- **ਕਲਿੱਕ ਕਰਨ ਵਾਲੇ ਖੇਤਰ ਨੂੰ ਵਧਾਉਂਦੇ ਹਨ (ਲੇਬਲ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਇਨਪੁੱਟ ਫੋਕਸ ਹੁੰਦਾ ਹੈ)**
-- **ਵੱਡੇ ਟਚ ਟਾਰਗਟਾਂ ਨਾਲ ਮੋਬਾਈਲ ਯੂਜ਼ਬਿਲਟੀ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹਨ**
-- **ਅਰਥਪੂਰਨ ਗਲਤੀ ਦੇ ਸੁਨੇਹੇ ਦੇ ਨਾਲ ਫਾਰਮ ਵੈਧਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ**
-- **ਫਾਰਮ ਤੱਤਾਂ ਨੂੰ ਸੈਮੈਂਟਿਕ ਅਰਥ ਪ੍ਰਦਾਨ ਕਰਕੇ SEO ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹਨ**
+**ਠੀਕ ਲੇਬਲਾਂ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦੀਆਂ ਹਨ:**
+- **ਸਕਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਫਾਰਮ ਫੀਲਡਾਂ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਐਲਾਨ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ**
+- **ਕਲਿੱਕ ਕਰਨ ਵਾਲੇ ਖੇਤਰ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ (ਲੇਬਲ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਇਨਪੁਟ ਫੋਕਸ ਹੁੰਦਾ ਹੈ)**
+- **ਮੋਬਾਈਲ ਯੂਜ਼ਬਿਲਿਟੀ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ ਵੱਡੇ ਟਚ ਟਾਰਗਟਾਂ ਨਾਲ**
+- **ਅਰਥਪੂਰਨ ਗਲਤੀ ਸੁਨੇਹਿਆਂ ਨਾਲ ਫਾਰਮ ਵੈਧਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ**
+- **SEO ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ ਫਾਰਮ ਤੱਤਾਂ ਨੂੰ ਸਮਾਂਜਸ ਅਰਥ ਪ੍ਰਦਾਨ ਕਰਕੇ**
 
-> 🎯 **ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਲਕਸ਼**: ਹਰ ਫਾਰਮ ਇਨਪੁੱਟ ਦਾ ਇੱਕ ਸੰਬੰਧਿਤ ਲੇਬਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਸਧਾਰਨ ਅਭਿਆਸ ਤੁਹਾਡੇ ਫਾਰਮਾਂ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਵਰਤਣਯੋਗ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਅਪੰਗਤਾ ਵਾਲੇ ਯੂਜ਼ਰ ਸ਼ਾਮਲ ਹਨ, ਅਤੇ ਸਾਰੇ ਯੂਜ਼ਰਾਂ ਲਈ ਅਨੁਭਵ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ।
+> 🎯 **ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਲਕਸ਼**: ਹਰ ਫਾਰਮ ਇਨਪੁਟ ਦਾ ਇੱਕ ਸੰਬੰਧਿਤ ਲੇਬਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਸਧਾਰਨ ਅਭਿਆਸ ਤੁਹਾਡੇ ਫਾਰਮਾਂ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਵਰਤਣਯੋਗ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਅਪੰਗਤਾ ਵਾਲੇ ਯੂਜ਼ਰ ਸ਼ਾਮਲ ਹਨ, ਅਤੇ ਸਾਰੇ ਯੂਜ਼ਰਾਂ ਲਈ ਅਨੁਭਵ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ।
 
 ### ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਬਣਾਉਣਾ
 
-ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਨੂੰ ਪੂਰੇ ਯੂਜ਼ਰ ਖਾਤੇ ਨੂੰ ਬਣਾਉਣ ਲਈ ਹੋਰ ਵਿਸਤ੍ਰਿਤ ਜਾਣਕਾਰੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਆਓ ਇਸਨੂੰ ਆਧੁਨਿਕ HTML5 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਵਧੀਕ ਪਹੁੰਚਯੋਗਤਾ ਨਾਲ ਬਣਾਈਏ।
+ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਨੂੰ ਪੂਰੇ ਯੂਜ਼ਰ ਅਕਾਊਂਟ ਬਣਾਉਣ ਲਈ ਹੋਰ ਵਿਸਥਾਰਿਤ ਜਾਣਕਾਰੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਆਓ ਇਸਨੂੰ ਆਧੁਨਿਕ HTML5 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਵਧੀਕ ਪਹੁੰਚਯੋਗਤਾ ਨਾਲ ਬਣਾਈਏ।
 
 ```html
 <hr/>
@@ -199,91 +246,136 @@ graph TD
 **ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:**
 - **ਹਰ ਫੀਲਡ ਨੂੰ ਬਿਹਤਰ ਸਟਾਈਲਿੰਗ ਅਤੇ ਲੇਆਉਟ ਲਈ ਕੰਟੇਨਰ div ਵਿੱਚ ਸੰਗਠਿਤ ਕੀਤਾ**
 - **ਬ੍ਰਾਊਜ਼ਰ ਆਟੋਫਿਲ ਸਹਾਇਤਾ ਲਈ ਉਚਿਤ `autocomplete` ਗੁਣ ਸ਼ਾਮਲ ਕੀਤੇ**
-- **ਯੂਜ਼ਰ ਇਨਪੁੱਟ ਨੂੰ ਗਾਈਡ ਕਰਨ ਲਈ ਮਦਦਗਾਰ ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕੀਤਾ**
+- **ਯੂਜ਼ਰ ਇਨਪੁਟ ਨੂੰ ਗਾਈਡ ਕਰਨ ਲਈ ਮਦਦਗਾਰ ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕੀਤਾ**
 - **`value` ਗੁਣ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਮਝਦਾਰ ਡਿਫਾਲਟ ਸੈਟ ਕੀਤੇ**
 - **ਵੈਧਤਾ ਗੁਣਾਂ ਜਿਵੇਂ `required`, `maxlength`, ਅਤੇ `min` ਲਾਗੂ ਕੀਤੇ**
-- **ਡੈਸੀਮਲ ਸਹਾਇਤਾ ਨਾਲ ਬੈਲੈਂਸ ਫੀਲਡ ਲਈ `type="number"` ਦੀ ਵਰਤੋਂ ਕੀਤੀ**
+- **ਦਸ਼ਮਲਵ ਸਹਾਇਤਾ ਨਾਲ ਬੈਲੈਂਸ ਫੀਲਡ ਲਈ `type="number"` ਦੀ ਵਰਤੋਂ ਕੀਤੀ**
 
-### ਇਨਪੁੱਟ ਕਿਸਮਾਂ ਅਤੇ ਵਿਹਾਰ ਦੀ ਖੋਜ
+### ਇਨਪੁਟ ਕਿਸਮਾਂ ਅਤੇ ਵਿਹਾਰ ਦੀ ਖੋਜ
 
-**ਆਧੁਨਿਕ ਇਨਪੁੱਟ ਕਿਸਮਾਂ ਵਧੀਕ ਕਾਰਗੁਜ਼ਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ:**
+**ਆਧੁਨਿਕ ਇਨਪੁਟ ਕਿਸਮਾਂ ਵਧੀਕ ਕਾਰਗੁਜ਼ਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ:**
 
 | ਵਿਸ਼ੇਸ਼ਤਾ | ਫਾਇਦਾ | ਉਦਾਹਰਨ |
 |---------|---------|----------|
-| `type="number"` | ਮੋਬਾਈਲ 'ਤੇ ਨੰਬਰਿਕ ਕੀਪੈਡ | ਬੈਲੈਂਸ ਇਨਟਰੀ ਆਸਾਨ |
-| `step="0.01"` | ਡੈਸੀਮਲ ਪ੍ਰਿਸੀਸ਼ਨ ਕੰਟਰੋਲ | ਮੁਦਰਾ ਵਿੱਚ ਸੈਂਟ ਦੀ ਆਗਿਆ |
-| `autocomplete` | ਬ੍ਰਾਊਜ਼ਰ ਆਟੋਫਿਲ | ਤੇਜ਼ ਫਾਰਮ ਪੂਰਾ |
-| `placeholder` | ਸੰਦਰਭੀ ਸੰਕੇਤ | ਯੂਜ਼ਰ ਦੀ ਉਮੀਦਾਂ ਨੂੰ ਗਾਈਡ ਕਰਦਾ ਹੈ |
+| `type="number"` | ਮੋਬਾਈਲ 'ਤੇ ਨੰਬਰਿਕ ਕੀਪੈਡ | ਬੈਲੈਂਸ ਐਂਟਰੀ ਨੂੰ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ |
+| `step="0.01"` | ਦਸ਼ਮਲਵ ਸਹੀਤਾ ਕੰਟਰੋਲ | ਮੁਦਰਾ ਵਿੱਚ ਸੈਂਟ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ |
+| `autocomplete` | ਬ੍ਰਾਊਜ਼ਰ ਆਟੋਫਿਲ | ਫਾਰਮ ਪੂਰਾ ਕਰਨ ਵਿੱਚ ਤੇਜ਼ੀ |
+| `placeholder` | ਸੰਦਰਭਕ ਸੁਝਾਅ | ਯੂਜ਼ਰ ਦੀ ਉਮੀਦਾਂ ਨੂੰ ਗਾਈਡ ਕਰਦਾ ਹੈ |
 
-> 🎯 **ਪਹੁੰਚਯੋਗਤਾ ਚੁਣੌਤੀ**: ਸਿਰਫ ਆਪਣੇ ਕੀਬੋਰਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਾਰਮਾਂ ਨੂੰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ! `Tab` ਨਾਲ ਫੀਲਡਾਂ ਵਿੱਚ ਜਾਓ, `Space` ਨਾਲ ਚੈੱਕਬਾਕਸ ਚੁਣੋ, ਅਤੇ `Enter` ਨਾਲ ਸਬਮਿਟ ਕਰੋ। ਇਹ ਅਨੁਭਵ ਤੁਹਾਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ ਯੂਜ਼ਰ ਤੁਹਾਡੇ ਫਾਰਮਾਂ ਨਾਲ ਕਿਵੇਂ ਸੰਚਾਰ ਕਰਦੇ ਹਨ।
+> 🎯 **ਪਹੁੰਚਯੋਗਤਾ ਚੁਣੌਤੀ**: ਸਿਰਫ ਆਪਣੇ ਕੀਬੋਰਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਾਰਮਾਂ ਨੂੰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ! ਫੀਲਡਾਂ ਦੇ ਵਿਚਕਾਰ ਜਾਣ ਲਈ `Tab` ਦੀ ਵਰਤੋਂ ਕਰੋ, ਚੈੱਕ ਬਾਕਸਾਂ ਨੂੰ ਚੁਣਨ ਲਈ `Space` ਅਤੇ ਸਬਮਿਟ ਕਰਨ ਲਈ `Enter`। ਇਹ ਅਨੁਭਵ ਤੁਹਾਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਸਕਰੀਨ ਰੀਡਰ ਯੂਜ਼ਰ ਤੁਹਾਡੇ ਫਾਰਮਾਂ ਨਾਲ ਕਿਵੇਂ ਸੰਚਾਰ ਕਰਦੇ ਹਨ।
 
-## ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਵਿਧੀਆਂ ਨੂੰ ਸਮਝਣਾ
+### 🔄 **ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ**
+**ਫਾਰਮ ਦੀ ਬੁਨਿਆਦ ਸਮਝਣਾ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ:
+- ✅ ਕਿਵੇਂ ਸਮਾਂਜਸ HTML ਪਹੁੰਚਯੋਗ ਫਾਰਮ ਬਣਤਰਾਂ ਬਣਾਉਂਦਾ ਹੈ
+- ✅ ਕਿਉਂ ਇਨਪੁਟ ਕਿਸਮਾਂ ਮੋਬਾਈਲ ਕੀਬੋਰਡ ਅਤੇ ਵੈਧਤਾ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹਨ
+- ✅ ਲੇਬਲਾਂ ਅਤੇ ਫਾਰਮ ਕੰਟਰੋਲਾਂ ਦੇ ਵਿਚਕਾਰ ਸੰਬੰਧ
+- ✅ ਕਿਵੇਂ ਫਾਰਮ ਗੁਣਾਂ ਡਿਫਾਲਟ ਬ੍ਰਾਊਜ਼ਰ ਵਿਹਾਰ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ
 
-ਜਦੋਂ ਕੋਈ ਤੁਹਾਡੇ ਫਾਰਮ ਨੂੰ ਭਰਦਾ ਹੈ ਅਤੇ ਸਬਮਿਟ ਦਬਾਉਂਦਾ ਹੈ, ਤਾਂ ਉਹ ਡਾਟਾ ਕਿਤੇ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ – ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਸਰਵਰ ਤੇ ਜੋ ਇਸਨੂੰ ਸੇਵ ਕਰ ਸਕੇ। ਇਹ ਕੁਝ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਨਾਲ ਹੋ ਸਕਦਾ ਹੈ, ਅਤੇ ਇਹ ਜਾਣਨਾ ਕਿ ਕਿਹੜਾ ਤਰੀਕਾ ਵਰਤਣਾ ਹੈ, ਤੁਹਾਨੂੰ ਬਾਅਦ ਵਿੱਚ ਕੁਝ ਮੁਸ਼ਕਲਾਂ ਤੋਂ ਬਚਾ ਸਕਦਾ ਹੈ।
+**ਤੁਰੰਤ ਸਵਾਲ-ਜਵਾਬ**: ਜੇ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਹੈਂਡਲਿੰਗ ਤੋਂ ਬਿਨਾਂ ਫਾਰਮ ਸਬਮਿਟ ਕਰੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ?
+*ਜਵਾਬ: ਬ੍ਰਾਊਜ਼ਰ ਡਿਫਾਲਟ ਸਬਮਿਸ਼ਨ ਕਰਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਐਕਸ਼ਨ URL ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਦਾ ਹੈ*
 
-ਆਓ ਵੇਖੀਏ ਕਿ ਜਦੋਂ ਕੋਈ ਉਹ ਸਬਮਿਟ ਬਟਨ ਦਬਾਉਂਦਾ ਹੈ ਤਾਂ ਅਸਲ ਵਿੱਚ ਕੀ ਹੁੰਦਾ ਹੈ।
+**HTML5 ਫਾਰਮ ਫਾਇਦੇ**: ਆਧੁਨਿਕ ਫਾਰਮ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ:
+- **ਬਿਲਟ-ਇਨ ਵੈਧਤਾ**: ਈਮੇਲ ਅਤੇ ਨੰਬਰ ਫਾਰਮੈਟ ਦੀ ਆਪਣੇ ਆਪ ਜਾਂਚ
+- **ਮੋਬਾਈਲ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ**: ਵੱਖ-ਵੱਖ ਇਨਪੁਟ ਕਿਸਮਾਂ ਲਈ ਉਚਿਤ ਕੀਬੋਰਡ
+- **ਪਹੁੰਚਯੋਗਤਾ**: ਸਕਰੀਨ ਰੀਡਰ ਸਹਾਇਤਾ ਅਤੇ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ
+- **ਪ੍ਰੋਗਰੈਸਿਵ ਸੁਧਾਰ**: ਜਦੋਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਯੋਗ ਹੁੰਦਾ ਹੈ ਤਾਂ ਵੀ ਕੰਮ ਕਰਦਾ ਹੈ
 
-### ਡਿਫਾਲਟ ਫਾਰਮ ਵਿਹਾਰ
+## ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਵਿਧੀਆਂ ਨੂੰ ਸਮਝਣਾ
 
-ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਬੁਨਿਆਦੀ ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਨਾਲ ਕੀ ਹੁੰਦਾ ਹੈ, ਇਸਨੂੰ ਵੇਖੀਏ:
+ਜ
+```javascript
+// Example of what FormData captures
+const formData = new FormData(registerForm);
+
+// FormData automatically captures:
+// {
+//   "user": "john_doe",
+//   "currency": "$", 
+//   "description": "Personal account",
+//   "balance": "100"
+// }
+```
 
-**ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਫਾਰਮਾਂ ਦੀ ਜਾਂਚ ਕਰੋ:**
-1. ਆਪਣੇ ਫਾਰਮ ਵਿੱਚ *Register* ਬਟਨ ਦਬਾਓ
-2. ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਐਡਰੈੱਸ ਬਾਰ ਵਿੱਚ ਬਦਲਾਅ ਨੂੰ ਵੇਖੋ
-3. ਧਿਆਨ ਦਿਓ ਕਿ ਪੇਜ ਰੀਲੋਡ ਹੁੰਦਾ ਹੈ ਅਤੇ ਡਾਟਾ URL ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
+**FormData API ਦੇ ਫਾਇਦੇ:**
+- **ਵਿਆਪਕ ਸੰਗ੍ਰਹਿ**: ਸਾਰੇ ਫਾਰਮ ਤੱਤਾਂ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਟੈਕਸਟ, ਫਾਈਲਾਂ ਅਤੇ ਜਟਿਲ ਇਨਪੁਟ
+- **ਟਾਈਪ ਜਾਗਰੂਕਤਾ**: ਵੱਖ-ਵੱਖ ਇਨਪੁਟ ਟਾਈਪਾਂ ਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਕਸਟਮ ਕੋਡਿੰਗ ਦੇ ਆਪਣੇ ਆਪ ਸੰਭਾਲਦਾ ਹੈ
+- **ਕੁਸ਼ਲਤਾ**: ਇੱਕੋ API ਕਾਲ ਨਾਲ ਮੈਨੂਅਲ ਫੀਲਡ ਸੰਗ੍ਰਹਿ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ
+- **ਅਨੁਕੂਲਤਾ**: ਜਦੋਂ ਫਾਰਮ ਦੀ ਬਣਤਰ ਵਿੱਚ ਤਬਦੀਲੀ ਹੁੰਦੀ ਹੈ ਤਾਂ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ
 
-![Register ਬਟਨ ਦਬਾਉਣ ਤੋਂ ਬਾਅਦ ਬ੍ਰਾਊਜ਼ਰ ਦੇ URL ਬਦਲਾਅ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.pa.png)
+### ਸਰਵਰ ਸੰਚਾਰ ਫੰਕਸ਼ਨ ਬਣਾਉਣਾ
 
-### HTTP ਵਿਧੀਆਂ ਦੀ ਤੁਲਨਾ
+ਹੁਣ ਆਓ ਆਪਣੇ API ਸਰਵਰ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਲਈ ਇੱਕ ਮਜ਼ਬੂਤ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜੋ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ:
 
-```mermaid
-graph TD
-    A[Form Submission] --> B{HTTP Method}
-    B -->|GET| C[Data in URL]
-    B -->|POST| D[Data in Request Body]
+```javascript
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: account
+    });
     
-    C --> E[Visible in address bar]
-    C --> F[Limited data size]
-    C --> G[Bookmarkable]
+    // Check if the response was successful
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
     
-    D --> H[Hidden from URL]
-    D --> I[Large data capacity]
-    D --> J[More secure]
+    return await response.json();
+  } catch (error) {
+    console.error('Account creation failed:', error);
+    return { error: error.message || 'Network error occurred' };
+  }
+}
 ```
 
-**ਫਰਕਾਂ ਨੂੰ ਸਮਝਣਾ:**
+**ਅਸਿੰਕ੍ਰੋਨਸ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਸਮਝਣਾ:**
 
-| ਵਿਧੀ | ਵਰਤੋਂ ਦਾ ਮਾਮਲਾ | ਡਾਟਾ ਸਥਾਨ | ਸੁਰੱਖਿਆ ਪੱਧਰ | ਆਕਾਰ ਸੀਮਾ |
-|--------|----------|---------------|----------------|-------------|
-| `GET` | ਖੋਜ ਪੁੱਛਗਿੱਛ, ਫਿਲਟਰ | URL ਪੈਰਾਮੀਟਰ | ਘੱਟ (ਦਿੱਖ ਵਾਲਾ) | ~2000 ਅੱਖਰ |
-| `POST` | ਯੂਜ਼ਰ ਖਾਤੇ, ਸੰਵੇਦਨਸ਼ੀਲ ਡਾਟਾ | ਰੀਕਵੈਸਟ ਬਾਡੀ | ਉੱਚ (ਲੁਕਿਆ ਹੋਇਆ) | ਕੋਈ ਪ੍ਰਯੋਗਕ ਸੀਮਾ ਨਹੀਂ |
+```mermaid
+sequenceDiagram
+    participant JS as JavaScript
+    participant Fetch as Fetch API
+    participant Server as Backend Server
+    
+    JS->>Fetch: fetch() request
+    Fetch->>Server: HTTP POST
+    Server-->>Fetch: JSON response
+    Fetch-->>JS: await response
+    JS->>JS: Process data
+```
 
-**ਮੁ
-- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਡਿਬੱਗਿੰਗ ਲਈ ਵਿਸਤ੍ਰਿਤ ਗਲਤੀ ਸੁਨੇਹੇ  
-- **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਸਫਲਤਾ ਅਤੇ ਗਲਤੀ ਮਾਮਲਿਆਂ ਲਈ ਸਥਿਰ ਡਾਟਾ ਸਟ੍ਰਕਚਰ  
+**ਇਹ ਆਧੁਨਿਕ ਅਮਲ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ:**
+- **ਵਰਤਦਾ ਹੈ** `async/await` ਪੜ੍ਹਨਯੋਗ ਅਸਿੰਕ੍ਰੋਨਸ ਕੋਡ ਲਈ
+- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਸਹੀ ਗਲਤੀ ਸੰਭਾਲ try/catch ਬਲਾਕਾਂ ਨਾਲ
+- **ਜਾਂਚਦਾ ਹੈ** ਡਾਟਾ ਪ੍ਰੋਸੈਸ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਰਿਸਪਾਂਸ ਸਥਿਤੀ
+- **ਸੈਟ ਕਰਦਾ ਹੈ** JSON ਸੰਚਾਰ ਲਈ ਉਚਿਤ ਹੈਡਰ
+- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਡੀਟੇਲਡ ਗਲਤੀ ਸੁਨੇਹੇ ਡੀਬੱਗਿੰਗ ਲਈ
+- **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਸਫਲਤਾ ਅਤੇ ਗਲਤੀ ਮਾਮਲਿਆਂ ਲਈ ਸਥਿਰ ਡਾਟਾ ਸਟ੍ਰਕਚਰ
 
-### ਆਧੁਨਿਕ Fetch API ਦੀ ਤਾਕਤ  
+### ਆਧੁਨਿਕ Fetch API ਦੀ ਤਾਕਤ
 
-**ਪੁਰਾਣੇ ਤਰੀਕਿਆਂ ਦੇ ਮੁਕਾਬਲੇ Fetch API ਦੇ ਫਾਇਦੇ:**  
+**ਪੁਰਾਣੇ ਤਰੀਕਿਆਂ ਦੇ ਮੁਕਾਬਲੇ Fetch API ਦੇ ਫਾਇਦੇ:**
 
-| ਫੀਚਰ | ਫਾਇਦਾ | ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ |  
-|---------|---------|----------------|  
-| ਪ੍ਰੋਮਿਸ-ਅਧਾਰਿਤ | ਸਾਫ਼ async ਕੋਡ | `await fetch()` |  
-| ਰਿਕਵੈਸਟ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ | ਪੂਰਾ HTTP ਕੰਟਰੋਲ | Headers, methods, body |  
-| ਰਿਸਪਾਂਸ ਹੈਂਡਲਿੰਗ | ਲਚਕਦਾਰ ਡਾਟਾ ਪਾਰਸਿੰਗ | `.json()`, `.text()`, `.blob()` |  
-| ਗਲਤੀ ਹੈਂਡਲਿੰਗ | ਵਿਸਤ੍ਰਿਤ ਗਲਤੀ ਪਕੜ | Try/catch blocks |  
+| ਫੀਚਰ | ਫਾਇਦਾ | ਅਮਲ |
+|---------|---------|----------------|
+| ਪ੍ਰੋਮਿਸ-ਅਧਾਰਿਤ | ਸਾਫ ਅਸਿੰਕ ਕੋਡ | `await fetch()` |
+| ਬੇਨਤੀ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ | ਪੂਰੀ HTTP ਕੰਟਰੋਲ | ਹੈਡਰ, ਤਰੀਕੇ, ਬਾਡੀ |
+| ਰਿਸਪਾਂਸ ਸੰਭਾਲ | ਲਚਕਦਾਰ ਡਾਟਾ ਪਾਰਸਿੰਗ | `.json()`, `.text()`, `.blob()` |
+| ਗਲਤੀ ਸੰਭਾਲ | ਵਿਆਪਕ ਗਲਤੀ ਪਕੜ | Try/catch ਬਲਾਕ |
 
-> 🎥 **ਹੋਰ ਸਿੱਖੋ**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਲਈ asynchronous JavaScript ਪੈਟਰਨ ਨੂੰ ਸਮਝਣਾ।  
+> 🎥 **ਹੋਰ ਸਿੱਖੋ**: [Async/Await ਟਿਊਟੋਰਿਅਲ](https://youtube.com/watch?v=YwmlRkrxvkk) - ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਅਸਿੰਕ੍ਰੋਨਸ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੈਟਰਨਾਂ ਨੂੰ ਸਮਝਣਾ।
 
-**ਸਰਵਰ ਕਮਿਊਨਿਕੇਸ਼ਨ ਲਈ ਮੁੱਖ ਧਾਰਨਾਵਾਂ:**  
-- **Async functions** ਸਰਵਰ ਰਿਸਪਾਂਸ ਦੀ ਉਡੀਕ ਕਰਨ ਲਈ ਐਗਜ਼ਿਕਿਊਸ਼ਨ ਰੋਕਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ  
-- **Await keyword** asynchronous ਕੋਡ ਨੂੰ synchronous ਕੋਡ ਵਾਂਗ ਪੜ੍ਹਨ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ  
-- **Fetch API** ਆਧੁਨਿਕ, ਪ੍ਰੋਮਿਸ-ਅਧਾਰਿਤ HTTP ਰਿਕਵੈਸਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ  
-- **Error handling** ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਐਪ ਨੈਟਵਰਕ ਸਮੱਸਿਆਵਾਂ ਲਈ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਦਾ ਹੈ  
+**ਸਰਵਰ ਸੰਚਾਰ ਲਈ ਮੁੱਖ ਧਾਰਨਾਵਾਂ:**
+- **ਅਸਿੰਕ ਫੰਕਸ਼ਨ** ਸਰਵਰ ਰਿਸਪਾਂਸ ਦੀ ਉਡੀਕ ਕਰਨ ਲਈ ਕਾਰਜ ਨੂੰ ਰੋਕਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ
+- **Await ਕੀਵਰਡ** ਅਸਿੰਕ੍ਰੋਨਸ ਕੋਡ ਨੂੰ ਸਿੰਕ੍ਰੋਨਸ ਕੋਡ ਵਾਂਗ ਪੜ੍ਹਨਯੋਗ ਬਣਾਉਂਦਾ ਹੈ
+- **Fetch API** ਆਧੁਨਿਕ, ਪ੍ਰੋਮਿਸ-ਅਧਾਰਿਤ HTTP ਬੇਨਤੀਆਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
+- **ਗਲਤੀ ਸੰਭਾਲ** ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਐਪ ਨੈੱਟਵਰਕ ਸਮੱਸਿਆਵਾਂ ਲਈ ਸ਼ਾਲੀਨਤਾ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਦਾ ਹੈ
 
-### ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫੰਕਸ਼ਨ ਪੂਰਾ ਕਰਨਾ  
+### ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫੰਕਸ਼ਨ ਪੂਰਾ ਕਰਨਾ
 
-ਆਓ ਇੱਕ ਪੂਰੀ, ਪ੍ਰੋਡਕਸ਼ਨ-ਤਿਆਰ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫੰਕਸ਼ਨ ਨਾਲ ਸਭ ਕੁਝ ਇਕੱਠਾ ਕਰੀਏ:  
+ਆਓ ਸਾਰਾ ਕੁਝ ਇਕੱਠਾ ਕਰਕੇ ਇੱਕ ਪੂਰਾ, ਉਤਪਾਦਨ-ਤਿਆਰ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫੰਕਸ਼ਨ ਬਣਾਈਏ:
 
 ```javascript
 async function register() {
@@ -324,41 +416,61 @@ async function register() {
   }
 }
 ```
-  
-**ਇਸ ਵਧੇਰੇ ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ:**  
-- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਦੌਰਾਨ ਵਿਜ਼ੁਅਲ ਫੀਡਬੈਕ  
-- **ਅਸਮਰਥ ਕਰਦਾ ਹੈ** ਸਬਮਿਟ ਬਟਨ ਨੂੰ ਡੁਪਲੀਕੇਟ ਸਬਮਿਸ਼ਨ ਤੋਂ ਰੋਕਣ ਲਈ  
-- **ਹੈਂਡਲ ਕਰਦਾ ਹੈ** ਉਮੀਦ ਕੀਤੀ ਅਤੇ ਅਣਉਮੀਦ ਗਲਤੀਆਂ ਨੂੰ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ  
-- **ਦਿਖਾਉਂਦਾ ਹੈ** ਯੂਜ਼ਰ-ਫ੍ਰੈਂਡਲੀ ਸਫਲਤਾ ਅਤੇ ਗਲਤੀ ਸੁਨੇਹੇ  
-- **ਰੀਸੈਟ ਕਰਦਾ ਹੈ** ਫਾਰਮ ਨੂੰ ਸਫਲ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਤੋਂ ਬਾਅਦ  
-- **ਬਹਾਲ ਕਰਦਾ ਹੈ** UI ਸਥਿਤੀ ਨੂੰ ਨਤੀਜੇ ਤੋਂ ਬੇਪਰਵਾਹ  
 
-### ਤੁਹਾਡੀ ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ ਦੀ ਜਾਂਚ  
+**ਇਹ ਵਧੇਰੇ ਅਮਲ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ:**
+- **ਦਿੰਦਾ ਹੈ** ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਦੌਰਾਨ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ
+- **ਅਯੋਗ ਕਰਦਾ ਹੈ** ਸਬਮਿਟ ਬਟਨ ਨੂੰ ਡੁਪਲੀਕੇਟ ਸਬਮਿਸ਼ਨ ਤੋਂ ਰੋਕਣ ਲਈ
+- **ਸੰਭਾਲਦਾ ਹੈ** ਦੋਵੇਂ ਉਮੀਦ ਕੀਤੀਆਂ ਅਤੇ ਅਣਉਮੀਦ ਗਲਤੀਆਂ ਸ਼ਾਲੀਨਤਾ ਨਾਲ
+- **ਦਿਖਾਉਂਦਾ ਹੈ** ਯੂਜ਼ਰ-ਫ੍ਰੈਂਡਲੀ ਸਫਲਤਾ ਅਤੇ ਗਲਤੀ ਸੁਨੇਹੇ
+- **ਰੀਸੈਟ ਕਰਦਾ ਹੈ** ਸਫਲ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਤੋਂ ਬਾਅਦ ਫਾਰਮ
+- **ਬਹਾਲ ਕਰਦਾ ਹੈ** UI ਸਥਿਤੀ ਨਤੀਜੇ ਤੋਂ ਬੇਪਰਵਾਹ
+
+### ਤੁਹਾਡੇ ਅਮਲ ਦੀ ਜਾਂਚ ਕਰਨਾ
+
+**ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲ ਖੋਲ੍ਹੋ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ:**
+
+1. **ਖੋਲ੍ਹੋ** ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ (F12 → Console ਟੈਬ)
+2. **ਭਰੋ** ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ
+3. **ਕਲਿੱਕ ਕਰੋ** "ਅਕਾਊਂਟ ਬਣਾਓ"
+4. **ਨਿਰੀਖਣ ਕਰੋ** ਕਨਸੋਲ ਸੁਨੇਹੇ ਅਤੇ ਯੂਜ਼ਰ ਫੀਡਬੈਕ
 
-**ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲ ਖੋਲ੍ਹੋ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ:**  
+![ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਲਾਗ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.pa.png)
 
-1. **ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ** ਖੋਲ੍ਹੋ (F12 → Console tab)  
-2. **ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਭਰੋ**  
-3. **"Create Account" 'ਤੇ ਕਲਿਕ ਕਰੋ**  
-4. **ਕਨਸੋਲ ਸੁਨੇਹੇ ਅਤੇ ਯੂਜ਼ਰ ਫੀਡਬੈਕ ਦੇਖੋ**  
+**ਤੁਹਾਨੂੰ ਕੀ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ:**
+- **ਲੋਡਿੰਗ ਸਥਿਤੀ** ਸਬਮਿਟ ਬਟਨ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ
+- **ਕਨਸੋਲ ਲਾਗ** ਪ੍ਰਕਿਰਿਆ ਬਾਰੇ ਵਿਸਤ੍ਰਿਤ ਜਾਣਕਾਰੀ ਦਿਖਾਉਂਦਾ ਹੈ
+- **ਸਫਲਤਾ ਸੁਨੇਹਾ** ਅਕਾਊਂਟ ਬਣਾਉਣ ਵਿੱਚ ਸਫਲ ਹੋਣ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
+- **ਫਾਰਮ ਆਪਣੇ ਆਪ** ਸਫਲ ਸਬਮਿਸ਼ਨ ਤੋਂ ਬਾਅਦ ਰੀਸੈਟ ਹੋ ਜਾਂਦਾ ਹੈ
 
-![ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਲੌਗ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.pa.png)  
+> 🔒 **ਸੁਰੱਖਿਆ ਵਿਚਾਰ**: ਵਰਤਮਾਨ ਵਿੱਚ, ਡਾਟਾ HTTP ਦੇ ਜ਼ਰੀਏ ਯਾਤਰਾ ਕਰਦਾ ਹੈ, ਜੋ ਉਤਪਾਦਨ ਲਈ ਸੁਰੱਖਿਅਤ ਨਹੀਂ ਹੈ। ਅਸਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ, ਹਮੇਸ਼ਾ HTTPS ਦੀ ਵਰਤੋਂ ਕਰੋ ਡਾਟਾ ਪ੍ਰਸਾਰਣ ਨੂੰ ਇਨਕ੍ਰਿਪਟ ਕਰਨ ਲਈ। [HTTPS ਸੁਰੱਖਿਆ](https://en.wikipedia.org/wiki/HTTPS) ਬਾਰੇ ਹੋਰ ਜਾਣੋ ਅਤੇ ਇਹ ਯੂਜ਼ਰ ਡਾਟਾ ਦੀ ਰੱਖਿਆ ਲਈ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ।
 
-**ਤੁਹਾਨੂੰ ਕੀ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ:**  
-- **ਲੋਡਿੰਗ ਸਥਿਤੀ** ਸਬਮਿਟ ਬਟਨ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ  
-- **ਕਨਸੋਲ ਲੌਗਸ** ਪ੍ਰਕਿਰਿਆ ਬਾਰੇ ਵਿਸਤ੍ਰਿਤ ਜਾਣਕਾਰੀ ਦਿਖਾਉਂਦੇ ਹਨ  
-- **ਸਫਲਤਾ ਸੁਨੇਹਾ** ਖਾਤਾ ਬਣਾਉਣ ਵਿੱਚ ਸਫਲ ਹੋਣ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ  
-- **ਫਾਰਮ ਸਫਲ ਸਬਮਿਸ਼ਨ ਤੋਂ ਬਾਅਦ ਆਪਣੇ ਆਪ ਰੀਸੈਟ ਹੋ ਜਾਂਦਾ ਹੈ**  
+### 🔄 **ਪੈਡਾਗੌਜਿਕ ਚੈੱਕ-ਇਨ**
+**ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਆਪਣੇ ਅਸਿੰਕ੍ਰੋਨਸ ਫਾਰਮ ਹੈਂਡਲਿੰਗ ਦੀ ਸਮਝ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:
+- ✅ `event.preventDefault()` ਡਿਫਾਲਟ ਫਾਰਮ ਵਿਹਾਰ ਨੂੰ ਕਿਵੇਂ ਬਦਲਦਾ ਹੈ?
+- ✅ FormData API ਮੈਨੂਅਲ ਫੀਲਡ ਸੰਗ੍ਰਹਿ ਨਾਲੋਂ ਕਿਵੇਂ ਕੁਸ਼ਲ ਹੈ?
+- ✅ async/await ਪੈਟਰਨ ਕੋਡ ਪੜ੍ਹਨਯੋਗਤਾ ਵਿੱਚ ਕਿਵੇਂ ਸੁਧਾਰ ਕਰਦੇ ਹਨ?
+- ✅ ਗਲਤੀ ਸੰਭਾਲ ਯੂਜ਼ਰ ਅਨੁਭਵ ਵਿੱਚ ਕਿਹੜਾ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦੀ ਹੈ?
 
-> 🔒 **ਸੁਰੱਖਿਆ ਵਿਚਾਰ**: ਵਰਤਮਾਨ ਵਿੱਚ, ਡਾਟਾ HTTP ਰਾਹੀਂ ਯਾਤਰਾ ਕਰਦਾ ਹੈ, ਜੋ ਪ੍ਰੋਡਕਸ਼ਨ ਲਈ ਸੁਰੱਖਿਅਤ ਨਹੀਂ ਹੈ। ਅਸਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ, ਹਮੇਸ਼ਾ HTTPS ਵਰਤੋ ਡਾਟਾ ਟ੍ਰਾਂਸਮਿਸ਼ਨ ਨੂੰ ਇਨਕ੍ਰਿਪਟ ਕਰਨ ਲਈ। [HTTPS ਸੁਰੱਖਿਆ](https://en.wikipedia.org/wiki/HTTPS) ਬਾਰੇ ਹੋਰ ਸਿੱਖੋ ਅਤੇ ਇਹ ਯੂਜ਼ਰ ਡਾਟਾ ਦੀ ਰੱਖਿਆ ਲਈ ਕਿਉਂ ਜ਼ਰੂਰੀ ਹੈ।  
+**ਸਿਸਟਮ ਆਰਕੀਟੈਕਚਰ**: ਤੁਹਾਡਾ ਫਾਰਮ ਹੈਂਡਲਿੰਗ ਦਿਖਾਉਂਦਾ ਹੈ:
+- **ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਫਾਰਮ ਪੇਜ ਰੀਲੋਡ ਤੋਂ ਬਿਨਾਂ ਯੂਜ਼ਰ ਕਾਰਵਾਈਆਂ ਦਾ ਜਵਾਬ ਦਿੰਦੇ ਹਨ
+- **ਅਸਿੰਕ੍ਰੋਨਸ ਸੰਚਾਰ**: ਸਰਵਰ ਬੇਨਤੀਆਂ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਨੂੰ ਰੋਕਦੀਆਂ ਨਹੀਂ ਹਨ
+- **ਗਲਤੀ ਸੰਭਾਲ**: ਨੈੱਟਵਰਕ ਬੇਨਤੀਆਂ ਫੇਲ੍ਹ ਹੋਣ 'ਤੇ ਸ਼ਾਲੀਨਤਾ ਨਾਲ ਹੇਠਾਂ ਜਾਂਦੇ ਹਨ
+- **ਸਥਿਤੀ ਪ੍ਰਬੰਧਨ**: UI ਅੱਪਡੇਟ ਸਰਵਰ ਰਿਸਪਾਂਸ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦਰਸਾਉਂਦੇ ਹਨ
+- **ਪ੍ਰੋਗਰੈਸਿਵ ਸੁਧਾਰ**: ਬੇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਕੰਮ ਕਰਦੀ ਹੈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਸਨੂੰ ਸੁਧਾਰਦਾ ਹੈ
 
-## ਵਿਸਤ੍ਰਿਤ ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ  
+**ਪ੍ਰੋਫੈਸ਼ਨਲ ਪੈਟਰਨ**: ਤੁਸੀਂ ਅਮਲ ਕੀਤਾ ਹੈ:
+- **ਸਿੰਗਲ ਰਿਸਪਾਂਸਬਿਲਿਟੀ**: ਫੰਕਸ਼ਨ ਸਪਸ਼ਟ, ਕੇਂਦਰਿਤ ਉਦੇਸ਼ਾਂ ਦੇ ਨਾਲ ਹਨ
+- **ਗਲਤੀ ਬਾਊਂਡਰੀਜ਼**: Try/catch ਬਲਾਕ ਐਪਲੀਕੇਸ਼ਨ ਕ੍ਰੈਸ਼ ਨੂੰ ਰੋਕਦੇ ਹਨ
+- **ਯੂਜ਼ਰ ਫੀਡਬੈਕ**: ਲੋਡਿੰਗ ਸਥਿਤੀਆਂ ਅਤੇ ਸਫਲਤਾ/ਗਲਤੀ ਸੁਨੇਹੇ
+- **ਡਾਟਾ ਟ੍ਰਾਂਸਫਾਰਮੇਸ਼ਨ**: FormData ਤੋਂ JSON ਸਰਵਰ ਸੰਚਾਰ ਲਈ
 
-ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ ਉਸ ਤਜਰਬੇ ਨੂੰ ਰੋਕਦਾ ਹੈ ਜਿੱਥੇ ਗਲਤੀਆਂ ਸਿਰਫ ਸਬਮਿਸ਼ਨ ਤੋਂ ਬਾਅਦ ਹੀ ਪਤਾ ਲਗਦੀਆਂ ਹਨ। ਜਿਵੇਂ ਕਿ ਇੰਟਰਨੈਸ਼ਨਲ ਸਪੇਸ ਸਟੇਸ਼ਨ 'ਤੇ ਕਈ ਵਧੇਰੇ ਸੁਰੱਖਿਆ ਪ੍ਰਣਾਲੀਆਂ ਹਨ, ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਵੈਲੀਡੇਸ਼ਨ ਕਈ ਸੁਰੱਖਿਆ ਚੈੱਕ ਦੀਆਂ ਪਰਤਾਂ ਨੂੰ ਵਰਤਦਾ ਹੈ।  
+## ਵਿਆਪਕ ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ
 
-ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਬ੍ਰਾਊਜ਼ਰ-ਸਤਰ ਦੇ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਤੁਰੰਤ ਫੀਡਬੈਕ ਲਈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਵਧੇਰੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਲਈ, ਅਤੇ ਸਰਵਰ-ਸਤਰ ਦੇ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਸੁਰੱਖਿਆ ਅਤੇ ਡਾਟਾ ਦੀ ਅਖੰਡਤਾ ਲਈ ਜੋੜਦਾ ਹੈ। ਇਹ ਵਧੇਰੇ ਸੁਰੱਖਿਆ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਯੂਜ਼ਰ ਸੰਤੁਸ਼ਟੀ ਅਤੇ ਸਿਸਟਮ ਦੀ ਰੱਖਿਆ ਦੋਵੇਂ ਹੋ ਸਕਦੇ ਹਨ।  
+ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ ਉਸ ਤਜਰਬੇ ਨੂੰ ਰੋਕਦੀ ਹੈ ਜਿਸ ਵਿੱਚ ਗਲਤੀਆਂ ਸਿਰਫ ਸਬਮਿਸ਼ਨ ਤੋਂ ਬਾਅਦ ਹੀ ਪਤਾ ਲੱਗਦੀਆਂ ਹਨ। ਜਿਵੇਂ ਕਿ ਇੰਟਰਨੈਸ਼ਨਲ ਸਪੇਸ ਸਟੇਸ਼ਨ 'ਤੇ ਕਈ ਵਾਰਤਕ ਸਿਸਟਮ ਹਨ, ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਵੈਲੀਡੇਸ਼ਨ ਕਈ ਸੁਰੱਖਿਆ ਜਾਂਚਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ।
 
-### ਵੈਲੀਡੇਸ਼ਨ ਦੀਆਂ ਪਰਤਾਂ ਨੂੰ ਸਮਝਣਾ  
+ਸਭ ਤੋਂ ਵਧੀਆ ਪਹੁੰਚ ਬਰਾਊਜ਼ਰ-ਸਤਰ ਦੀ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਤੁਰੰਤ ਫੀਡਬੈਕ ਲਈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਵਧੇਰੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਲਈ, ਅਤੇ ਸੁਰੱਖਿਆ ਅਤੇ ਡਾਟਾ ਅਖੰਡਤਾ ਲਈ ਸਰਵਰ-ਸਤਰ ਦੀ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਜੋੜਦੀ ਹੈ। ਇਹ ਵਧੇਰੇ ਸੁਰੱਖਿਆ ਅਤੇ ਯੂਜ਼ਰ ਸੰਤੁਸ਼ਟੀ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ।
+
+### ਵੈਲੀਡੇਸ਼ਨ ਲੇਅਰਾਂ ਨੂੰ ਸਮਝਣਾ
 
 ```mermaid
 graph TD
@@ -372,28 +484,28 @@ graph TD
     C -->|Invalid| H[Custom Error Display]
     E -->|Invalid| I[Server Error Response]
 ```
-  
-**ਮਲਟੀ-ਲੇਅਰ ਵੈਲੀਡੇਸ਼ਨ ਰਣਨੀਤੀ:**  
-- **HTML5 ਵੈਲੀਡੇਸ਼ਨ**: ਤੁਰੰਤ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਿਤ ਚੈੱਕ  
-- **JavaScript ਵੈਲੀਡੇਸ਼ਨ**: ਕਸਟਮ ਲਾਜਿਕ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ  
-- **ਸਰਵਰ ਵੈਲੀਡੇਸ਼ਨ**: ਅੰਤਮ ਸੁਰੱਖਿਆ ਅਤੇ ਡਾਟਾ ਦੀ ਅਖੰਡਤਾ ਚੈੱਕ  
-- **ਪ੍ਰੋਗਰੈਸਿਵ ਵਧੀਆ ਬਣਾਉਣਾ**: ਜੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਸਮਰਥ ਹੈ ਤਾਂ ਵੀ ਕੰਮ ਕਰਦਾ ਹੈ  
 
-### HTML5 ਵੈਲੀਡੇਸ਼ਨ ਐਟ੍ਰਿਬਿਊਟਸ  
+**ਮਲਟੀ-ਲੇਅਰ ਵੈਲੀਡੇਸ਼ਨ ਰਣਨੀਤੀ:**
+- **HTML5 ਵੈਲੀਡੇਸ਼ਨ**: ਤੁਰੰਤ ਬਰਾਊਜ਼ਰ-ਅਧਾਰਿਤ ਜਾਂਚ
+- **ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਲੀਡੇਸ਼ਨ**: ਕਸਟਮ ਲਾਜਿਕ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ
+- **ਸਰਵਰ ਵੈਲੀਡੇਸ਼ਨ**: ਅੰਤਮ ਸੁਰੱਖਿਆ ਅਤੇ ਡਾਟਾ ਅਖੰਡਤਾ ਜਾਂਚ
+- **ਪ੍ਰੋਗਰੈਸਿਵ ਸੁਧਾਰ**: ਜੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਯੋਗ ਹੈ ਤਾਂ ਵੀ ਕੰਮ ਕਰਦਾ ਹੈ
+
+### HTML5 ਵੈਲੀਡੇਸ਼ਨ ਐਟ੍ਰਿਬਿਊਟਸ
 
-**ਆਧੁਨਿਕ ਵੈਲੀਡੇਸ਼ਨ ਟੂਲ ਤੁਹਾਡੇ ਲਈ:**  
+**ਤੁਹਾਡੇ ਕੋਲ ਆਧੁਨਿਕ ਵੈਲੀਡੇਸ਼ਨ ਟੂਲ:**
 
-| ਐਟ੍ਰਿਬਿਊਟ | ਉਦੇਸ਼ | ਉਦਾਹਰਨ ਵਰਤੋਂ | ਬ੍ਰਾਊਜ਼ਰ ਵਿਹਾਰ |  
-|-----------|---------|---------------|------------------|  
-| `required` | ਲਾਜ਼ਮੀ ਫੀਲਡ | `<input required>` | ਖਾਲੀ ਸਬਮਿਸ਼ਨ ਨੂੰ ਰੋਕਦਾ ਹੈ |  
-| `minlength`/`maxlength` | ਟੈਕਸਟ ਲੰਬਾਈ ਦੀਆਂ ਸੀਮਾਵਾਂ | `<input maxlength="20">` | ਅੱਖਰਾਂ ਦੀ ਸੀਮਾ ਲਾਗੂ ਕਰਦਾ ਹੈ |  
-| `min`/`max` | ਨੰਬਰਕ ਸੀਮਾਵਾਂ | `<input min="0" max="1000">` | ਨੰਬਰ ਦੀਆਂ ਹੱਦਾਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ |  
-| `pattern` | ਕਸਟਮ regex ਨਿਯਮ | `<input pattern="[A-Za-z]+">` | ਖਾਸ ਫਾਰਮੈਟਾਂ ਨੂੰ ਮਿਲਾਉਂਦਾ ਹੈ |  
-| `type` | ਡਾਟਾ ਟਾਈਪ ਵੈਲੀਡੇਸ਼ਨ | `<input type="email">` | ਫਾਰਮੈਟ-ਵਿਸ਼ੇਸ਼ ਵੈਲੀਡੇਸ਼ਨ |  
+| ਐਟ੍ਰਿਬਿਊਟ | ਉਦੇਸ਼ | ਉਦਾਹਰਨ ਵਰਤੋਂ | ਬਰਾਊਜ਼ਰ ਵਿਹਾਰ |
+|-----------|---------|---------------|------------------|
+| `required` | ਲਾਜ਼ਮੀ ਫੀਲਡ | `<input required>` | ਖਾਲੀ ਸਬਮਿਸ਼ਨ ਨੂੰ ਰੋਕਦਾ ਹੈ |
+| `minlength`/`maxlength` | ਟੈਕਸਟ ਲੰਬਾਈ ਸੀਮਾਵਾਂ | `<input maxlength="20">` | ਅੱਖਰ ਸੀਮਾਵਾਂ ਲਾਗੂ ਕਰਦਾ ਹੈ |
+| `min`/`max` | ਸੰਖਿਆਤਮਕ ਸੀਮਾਵਾਂ | `<input min="0" max="1000">` | ਨੰਬਰ ਬਾਊਂਡਸ ਦੀ ਜਾਂਚ |
+| `pattern` | ਕਸਟਮ ਰੈਗੈਕਸ ਨਿਯਮ | `<input pattern="[A-Za-z]+">` | ਖਾਸ ਫਾਰਮੈਟਾਂ ਨੂੰ ਮਿਲਾਉਂਦਾ ਹੈ |
+| `type` | ਡਾਟਾ ਟਾਈਪ ਵੈਲੀਡੇਸ਼ਨ | `<input type="email">` | ਫਾਰਮੈਟ-ਵਿਸ਼ੇਸ਼ ਵੈਲੀਡੇਸ਼ਨ |
 
-### CSS ਵੈਲੀਡੇਸ਼ਨ ਸਟਾਈਲਿੰਗ  
+### CSS ਵੈਲੀਡੇਸ਼ਨ ਸਟਾਈਲਿੰਗ
 
-**ਵੈਲੀਡੇਸ਼ਨ ਸਥਿਤੀਆਂ ਲਈ ਵਿਜ਼ੁਅਲ ਫੀਡਬੈਕ ਬਣਾਓ:**  
+**ਵੈਲੀਡੇਸ਼ਨ ਸਥਿਤੀਆਂ ਲਈ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਬਣਾਓ:**
 
 ```css
 /* Valid input styling */
@@ -417,18 +529,18 @@ input:focus:invalid {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
 ```
-  
-**ਇਹ ਵਿਜ਼ੁਅਲ ਸੰਕੇਤ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ:**  
-- **ਹਰੇ ਬਾਰਡਰ**: ਸਫਲ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਵਿੱਚ ਹਰੀ ਲਾਈਟ  
-- **ਲਾਲ ਬਾਰਡਰ**: ਵੈਲੀਡੇਸ਼ਨ ਗਲਤੀਆਂ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਧਿਆਨ ਦੀ ਲੋੜ ਹੈ  
-- **ਫੋਕਸ ਹਾਈਲਾਈਟਸ**: ਮੌਜੂਦਾ ਇਨਪੁਟ ਸਥਾਨ ਲਈ ਸਪਸ਼ਟ ਵਿਜ਼ੁਅਲ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ  
-- **ਸਥਿਰ ਸਟਾਈਲਿੰਗ**: ਪੇਸ਼ਕਸ਼ਯੋਗ ਇੰਟਰਫੇਸ ਪੈਟਰਨ ਸਥਾਪਿਤ ਕਰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਯੂਜ਼ਰ ਸਿੱਖ ਸਕਦੇ ਹਨ  
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: `:valid` ਅਤੇ `:invalid` CSS pseudo-classes ਨੂੰ ਵਰਤੋ ਤੁਰੰਤ ਵਿਜ਼ੁਅਲ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਜਦੋਂ ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਦੇ ਹਨ, ਇੱਕ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਅਤੇ ਮਦਦਗਾਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ।  
+**ਇਹ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ:**
+- **ਹਰੇ ਬਾਰਡਰ**: ਸਫਲ ਵੈਲੀਡੇਸ਼ਨ ਦਰਸਾਉਂਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਵਿੱਚ ਹਰੀ ਲਾਈਟਾਂ
+- **ਲਾਲ ਬਾਰਡਰ**: ਵੈਲੀਡੇਸ਼ਨ ਗਲਤੀਆਂ ਦਰਸਾਉਂਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਧਿਆਨ ਦੀ ਲੋੜ ਹੈ
+- **ਫੋਕਸ ਹਾਈਲਾਈਟਸ**: ਮੌਜੂਦਾ ਇਨਪੁਟ ਸਥਾਨ ਲਈ ਸਪਸ਼ਟ ਵਿਜ਼ੂਅਲ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ
+- **ਸਥਿਰ ਸਟਾਈਲਿੰਗ**: ਅਨੁਮਾਨਿਤ ਇੰਟਰਫੇਸ ਪੈਟਰਨ ਸਥਾਪਿਤ ਕਰਦੇ ਹਨ ਜੋ ਯੂਜ਼ਰ ਸਿੱਖ ਸਕਦੇ ਹਨ
+
+> 💡 **ਪ੍ਰੋ ਟਿਪ**: `:valid` ਅਤੇ `:invalid` CSS ਪਸੂਡੋ-ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਿਵੇਂ ਕਿ ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਦੇ ਹਨ ਤੁਰੰਤ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ, ਇੱਕ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਅਤੇ ਮਦਦਗਾਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ।
 
-### ਵਿਸਤ੍ਰਿਤ ਵੈਲੀਡੇਸ਼ਨ ਲਾਗੂ ਕਰਨਾ  
+### ਵਿਆਪਕ ਵੈਲੀਡੇਸ਼ਨ ਲਾਗੂ ਕਰਨਾ
 
-ਆਓ ਤੁਹਾਡੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਨੂੰ ਮਜ਼ਬੂਤ ​​ਵੈਲੀਡੇਸ਼ਨ ਨਾਲ ਵਧੀਆ ਬਣਾਈਏ ਜੋ ਸ਼ਾਨਦਾਰ ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਡਾਟਾ ਗੁਣਵੱਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:  
+ਆਓ ਆਪਣੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਨੂੰ ਮਜ਼ਬੂਤ ਵੈਲੀਡੇਸ਼ਨ ਨਾਲ ਸੁਧਾਰ ਕਰੀਏ ਜੋ ਸ਼ਾਨਦਾਰ ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਡਾਟਾ ਗੁਣਵੱਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:
 
 ```html
 <form id="registerForm" method="POST" novalidate>
@@ -470,86 +582,59 @@ input:focus:invalid {
   <button type="submit">Create Account</button>
 </form>
 ```
-  
-**ਵਧੇਰੇ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਸਮਝਣਾ:**  
-- **ਲਾਜ਼ਮੀ ਫੀਲਡ ਸੰਕੇਤਕ** ਨਾਲ ਮਦਦਗਾਰ ਵਰਣਨ ਜੋੜਦਾ ਹੈ  
-- **`pattern` ਐਟ੍ਰਿਬਿਊਟਸ** ਫਾਰਮੈਟ ਵੈਲੀਡੇਸ਼ਨ ਲਈ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ  
-- **`title` ਐਟ੍ਰਿਬਿਊਟਸ** ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਟੂਲਟਿਪਸ ਲਈ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ  
-- **ਮਦਦਗਾਰ ਟੈਕਸਟ** ਯੂਜ਼ਰ ਇਨਪੁਟ ਨੂੰ ਗਾਈਡ ਕਰਨ ਲਈ ਜੋੜਦਾ ਹੈ  
-- **ਸਮਾਂਜਸ HTML ਸਟ੍ਰਕਚਰ** ਬਿਹਤਰ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਵਰਤਦਾ ਹੈ  
-
-### ਉੱਚ-ਸਤਰੀ ਵੈਲੀਡੇਸ਼ਨ ਨਿਯਮ  
-
-**ਹਰ ਵੈਲੀਡੇਸ਼ਨ ਨਿਯਮ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ:**  
 
-| ਫੀਲਡ | ਵੈਲੀਡੇਸ਼ਨ ਨਿਯਮ | ਯੂਜ਼ਰ ਫਾਇਦਾ |  
-|-------|------------------|--------------|  
-| Username | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | ਵੈਧ, ਵਿਲੱਖਣ ਪਛਾਣਕਰਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ |  
-| Currency | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | ਆਮ ਕਰੰਸੀ ਸਿੰਬਲਜ਼ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ |  
-| Balance | `min="0"`, `step="0.01"`, `type="number"` | ਨਕਾਰਾਤਮਕ ਬੈਲੰਸ ਨੂੰ ਰੋਕਦਾ ਹੈ |  
-| Description | `maxlength="100"` | ਵਾਜ਼ਿਬ ਲੰਬਾਈ ਦੀਆਂ ਸੀਮਾਵਾਂ |  
+**ਵਧੇਰੇ ਵੈਲੀਡੇਸ਼ਨ ਨੂੰ ਸਮਝਣਾ:**
+- **ਲਾਜ਼ਮੀ ਫੀਲਡ ਸੰਕੇਤਕ** ਮਦਦਗਾਰ ਵੇਰਵੇ ਨਾਲ ਜੋੜਦਾ ਹੈ
+- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** `pattern` ਐਟ੍ਰਿਬਿਊਟ ਫਾਰਮੈਟ ਵੈਲੀਡੇਸ਼ਨ ਲਈ
+- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** `title` ਐਟ੍ਰਿਬਿਊਟ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਟੂਲਟਿਪਸ ਲਈ
+- **ਜੋੜਦਾ ਹੈ** ਮਦਦਗਾਰ ਟੈਕਸਟ ਯੂਜ਼ਰ ਇਨਪੁਟ ਨੂੰ ਗਾਈਡ ਕਰਨ ਲਈ
+- **ਵਰਤਦਾ ਹੈ** semantic HTML ਬਣਤਰ ਬਿਹਤਰ ਪਹੁੰਚਯੋਗਤਾ ਲਈ
 
-### ਵੈਲੀਡੇਸ਼ਨ ਵਿਹਾਰ ਦੀ ਜਾਂਚ  
+### ਉੱਚ-ਸਤਰੀ ਵੈਲੀਡੇਸ਼ਨ ਨਿਯਮ
 
-**ਇਹ ਵੈਲੀਡੇਸ਼ਨ ਸਥਿਤੀਆਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ:**  
-1. **ਫਾਰਮ ਸਬਮਿਟ ਕਰੋ** ਖਾਲੀ ਲਾਜ਼ਮੀ ਫੀਲਡਾਂ ਨਾਲ  
-2. **ਇੱਕ ਯੂਜ਼ਰਨੇਮ ਦਾਖਲ ਕਰੋ** ਜੋ 3 ਅੱਖਰਾਂ ਤੋਂ ਛੋਟਾ ਹੈ  
-3. **ਯੂਜ਼ਰਨੇਮ ਫੀਲਡ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ**  
-4. **ਇੱਕ ਨਕਾਰਾਤਮਕ ਬੈਲੰਸ ਰਕਮ ਦਾਖਲ ਕਰੋ**  
+**ਹਰ ਵੈਲੀਡੇਸ਼ਨ ਨਿਯਮ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ:**
 
-![ਫਾਰਮ ਸਬਮਿਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ 'ਤੇ ਵੈਲੀਡੇਸ਼ਨ ਗਲਤੀ ਦਿਖਾਉਂਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.pa.png)  
+| ਫੀਲਡ | ਵੈਲੀਡੇਸ਼ਨ ਨਿਯਮ | ਯੂਜ਼ਰ ਫਾਇਦਾ |
+|-------|------------------|--------------|
+| ਯੂਜ਼ਰਨੇਮ | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | ਵੈਧ, ਵਿਲੱਖਣ ਪਛਾਣਕਰਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ |
+| ਕਰੰਸੀ | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | ਆਮ ਕਰੰਸੀ ਚਿੰਨ੍ਹਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ |
+| ਬੈਲੈਂਸ | `min="0"`, `step="0.01"`, `type="number"` | ਨਕਾਰਾਤਮਕ ਬੈਲੈਂਸ ਨੂੰ ਰੋਕਦਾ ਹੈ |
+| ਵੇਰਵਾ | `maxlength="100"` | ਵਾਜ਼ਿਬ ਲੰਬਾਈ ਸੀਮਾਵਾਂ |
 
-**ਤੁਹਾਨੂੰ ਕੀ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ:**  
-- **ਬ੍ਰਾਊਜ਼ਰ ਦਿਖਾਉਂਦਾ ਹੈ** ਮੂਲ ਵੈਲੀਡੇਸ਼ਨ ਸੁਨੇਹੇ  
-- **ਸਟਾਈਲਿੰਗ ਬਦਲਦੀ ਹੈ** `:valid` ਅਤੇ `:invalid` ਸਥਿਤੀਆਂ ਦੇ ਅਧਾਰ 'ਤੇ  
-- **ਫਾਰਮ ਸਬਮਿਸ਼ਨ** ਤਦ ਤੱਕ ਰੋਕਿਆ ਜਾਂਦਾ ਹੈ ਜਦ ਤੱਕ ਸਾਰੀਆਂ ਵੈਲੀਡੇਸ਼ਨ ਪਾਸ ਨਹੀਂ ਹੁੰਦੀਆਂ  
-- **ਫੋਕਸ ਆਪਣੇ ਆਪ** ਪਹਿਲੀ ਗਲਤ ਫੀਲਡ 'ਤੇ ਚਲਾ ਜਾਂਦਾ ਹੈ  
+### ਵੈਲੀਡੇਸ਼ਨ ਵਿਹਾਰ ਦੀ ਜਾਂਚ ਕਰਨਾ
 
-### ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਲੀਡੇਸ਼ਨ ਵਸਰਵਰ-ਸਾਈਡ ਵੈਲੀਡੇਸ਼ਨ  
+**ਇਹ ਵੈਲੀਡੇਸ਼ਨ ਸਥਿਤੀਆਂ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ:**
+1. **ਸਬਮਿਟ ਕਰੋ** ਫਾਰਮ ਖਾਲੀ ਲਾਜ਼ਮੀ ਫੀਲਡਾਂ ਨਾਲ
+2. **ਇਨਪੁਟ ਕਰੋ** 3 ਅੱਖਰਾਂ ਤੋਂ ਛੋਟਾ ਯੂਜ਼ਰਨੇਮ
+3. **ਕੋਸ਼ਿਸ਼ ਕਰੋ** ਯੂਜ਼ਰਨੇਮ ਫੀਲਡ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਅੱਖਰ
+4. **ਦਾਖਲ ਕਰੋ** ਨਕਾਰਾਤਮਕ ਬੈਲੈਂਸ ਦੀ ਰਕਮ
 
-```mermaid
-graph LR
-    A[Client-Side Validation] --> B[Instant Feedback]
-    A --> C[Better UX]
-    A --> D[Reduced Server Load]
-    
-    E[Server-Side Validation] --> F[Security]
-    E --> G[Data Integrity]
-    E --> H[Business Rules]
-    
-    A -.-> I[Both Required]
-    E -.-> I
-```
-  
-**ਤੁਹਾਨੂੰ ਦੋਵੇਂ ਪਰਤਾਂ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ:**  
-- **ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਲੀਡੇਸ਼ਨ**: ਤੁਰੰਤ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ  
-- **ਸਰਵਰ-ਸਾਈਡ ਵੈਲੀਡੇਸ਼ਨ**: ਸੁਰੱਖਿਆ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਜਟਿਲ ਕਾਰੋਬਾਰੀ ਨਿਯਮਾਂ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ  
-- **ਸੰਯੁਕਤ ਦ੍ਰਿਸ਼ਕੋਣ**: ਮਜ਼ਬੂਤ, ਯੂਜ਼ਰ-ਫ੍ਰੈਂਡਲੀ, ਅਤੇ ਸੁਰੱਖਿਅਤ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦਾ ਹੈ  
-- **ਪ੍ਰੋਗਰੈਸਿਵ ਵਧੀਆ ਬਣਾਉਣਾ**: ਜੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਸਮਰਥ ਹੈ ਤਾਂ ਵੀ ਕੰਮ ਕਰਦਾ ਹੈ  
+![ਫਾਰਮ ਸਬਮਿਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ 'ਤੇ ਵੈਲੀਡੇਸ਼ਨ ਗਲਤੀ ਦਿਖਾਉਂਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ
+**ਪ੍ਰਾਂਪਟ:** ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਲਈ ਇੱਕ ਪੂਰੀ ਫਾਰਮ ਵੈਲੀਡੇਸ਼ਨ ਸਿਸਟਮ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੇ: 1) ਜਦੋਂ ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਦਾ ਹੈ ਤਾਂ ਹਰ ਫੀਲਡ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਵੈਲੀਡੇਸ਼ਨ ਫੀਡਬੈਕ, 2) ਹਰ ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਹੇਠਾਂ ਕਸਟਮ ਵੈਲੀਡੇਸ਼ਨ ਸੁਨੇਹੇ, 3) ਪਾਸਵਰਡ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਵਾਲੀ ਫੀਲਡ ਜਿਸ ਵਿੱਚ ਮੈਚਿੰਗ ਵੈਲੀਡੇਸ਼ਨ ਹੋਵੇ, 4) ਵਿਜ਼ੂਅਲ ਇੰਡੀਕੇਟਰ (ਜਿਵੇਂ ਕਿ ਸਹੀ ਫੀਲਡ ਲਈ ਹਰੇ ਚਿੰਨ੍ਹ ਅਤੇ ਗਲਤ ਫੀਲਡ ਲਈ ਲਾਲ ਚੇਤਾਵਨੀ), 5) ਇੱਕ ਸਬਮਿਟ ਬਟਨ ਜੋ ਸਿਰਫ਼ ਤਦ ਹੀ ਐਨਬਲ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਸਾਰੀਆਂ ਵੈਲੀਡੇਸ਼ਨ ਪਾਸ ਹੋ ਜਾਂਦੀਆਂ ਹਨ। HTML5 ਵੈਲੀਡੇਸ਼ਨ ਐਟ੍ਰਿਬਿਊਟਸ, CSS ਸਟਾਈਲਿੰਗ ਲਈ ਅਤੇ JavaScript ਇੰਟਰਐਕਟਿਵ ਬਿਹੇਵਿਅਰ ਲਈ ਵਰਤੋ।
 
-> 🛡️ **ਸੁਰੱਖਿਆ ਯਾਦ ਦਿਹਾਨੀ**: ਸਿਰਫ ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਲੀਡੇਸ਼ਨ 'ਤੇ ਕਦੇ ਵੀ ਭਰੋਸਾ ਨਾ ਕਰੋ! ਦੁਸ਼ਟ ਯੂਜ਼ਰ ਕਲਾਇੰਟ-ਸਾਈਡ ਚੈੱਕ ਨੂੰ ਬਾਈਪਾਸ ਕਰ ਸਕਦੇ ਹਨ, ਇਸ ਲਈ ਸਰਵਰ-ਸਾਈਡ ਵੈਲੀਡੇਸ਼ਨ ਸੁਰੱਖਿਆ ਅਤੇ ਡਾਟਾ ਦੀ ਅਖੰਡਤਾ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।  
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
 
----
+## 🚀 ਚੁਣੌਤੀ
 
----
+ਜੇਕਰ ਯੂਜ਼ਰ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ ਤਾਂ HTML ਵਿੱਚ ਇੱਕ ਗਲਤੀ ਦਾ ਸੁਨੇਹਾ ਦਿਖਾਓ।
 
-## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀  
+ਇਹ ਹੈ ਇੱਕ ਉਦਾਹਰਨ ਕਿ CSS ਸਟਾਈਲਿੰਗ ਦੇ ਬਾਅਦ ਅੰਤਮ ਲੌਗਇਨ ਪੇਜ ਕਿਵੇਂ ਲੱਗ ਸਕਦਾ ਹੈ:
 
-Agent ਮੋਡ ਨੂੰ ਵਰਤ ਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:  
+![CSS ਸਟਾਈਲਾਂ ਜੋੜਨ ਦੇ ਬਾਅਦ ਲੌਗਇਨ ਪੇਜ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.pa.png)
 
-**ਵੇਰਵਾ:** ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਨੂੰ ਵਿਸਤ੍ਰਿਤ ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਲੀਡੇਸ਼ਨ ਅਤੇ ਯੂਜ਼ਰ ਫੀਡਬੈਕ ਨਾਲ ਵਧੀਆ ਬਣਾਓ।  
+## ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼
 
-**ਪ੍ਰੋੰਪਟ:** ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਲਈ ਇੱਕ ਪੂਰੀ ਵੈਲੀਡੇਸ਼ਨ ਪ੍ਰਣਾਲੀ ਬਣਾਓ ਜੋ ਸ਼ਾਮਲ ਕਰਦੀ ਹੈ: 1) ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਨ ਦੇ ਨਾਲ ਹਰ ਫੀਲਡ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਵੈਲੀਡੇਸ਼ਨ ਫੀਡਬੈਕ, 2) ਹਰ ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਹੇਠਾਂ ਕਸਟਮ ਵੈਲੀਡੇਸ਼ਨ ਸੁਨੇਹੇ, 3) ਇੱਕ ਪਾਸਵਰਡ ਕਨਫਰਮੇਸ਼ਨ ਫੀਲਡ ਜਿਸ ਵਿੱਚ ਮੈਚਿੰਗ ਵੈਲੀਡੇਸ਼ਨ ਹੈ, 4) ਵਿਜ਼ੁਅਲ ਸੰਕੇਤ (ਜਿਵੇਂ ਕਿ ਵੈਧ ਫੀਲਡਾਂ ਲਈ ਹਰੇ ਚਿੰਨ੍ਹ ਅਤੇ ਗਲਤ ਫੀਲਡਾਂ ਲਈ ਲਾਲ ਚੇਤਾਵਨੀਆਂ), 5) ਇੱਕ ਸਬਮਿਟ ਬਟਨ ਜੋ ਸਿਰਫ ਤਦ ਹੀ ਸਮਰਥ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਸਾਰੀਆਂ ਵੈਲੀਡੇਸ਼ਨ ਪਾਸ ਹੁੰਦੀਆਂ ਹਨ। HTML5 ਵੈਲੀਡੇਸ਼ਨ ਐਟ੍ਰਿਬਿਊਟਸ, CSS ਸਟਾਈਲਿੰਗ ਲਈ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੰਟਰਐਕਟਿਵ ਵਿਹਾਰ ਲਈ ਵਰਤੋ।  
+[ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/44)
 
-[Agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਸਿੱਖੋ।  
+## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
 
-## 🚀 ਚੈਲੈਂਜ  
+ਡਿਵੈਲਪਰਜ਼ ਨੇ ਆਪਣੇ ਫਾਰਮ ਬਣਾਉਣ ਦੇ ਯਤਨਾਂ ਵਿੱਚ ਬਹੁਤ ਸਿਰਜਣਾਤਮਕਤਾ ਦਿਖਾਈ ਹੈ, ਖਾਸ ਕਰਕੇ ਵੈਲੀਡੇਸ਼ਨ ਰਣਨੀਤੀਆਂ ਦੇ ਸੰਦਰਭ ਵਿੱਚ। ਵੱਖ-ਵੱਖ ਫਾਰਮ ਫਲੋਜ਼ ਬਾਰੇ ਜਾਣਨ ਲਈ [CodePen](https://codepen.com) ਦੇਖੋ; ਕੀ ਤੁਸੀਂ ਕੁਝ ਦਿਲਚਸਪ ਅਤੇ ਪ੍ਰੇਰਣਾਦਾਇਕ ਫਾਰਮ ਲੱਭ ਸਕਦੇ ਹੋ?
 
-HTML ਵਿੱਚ ਇੱਕ ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾਓ ਜੇ ਯੂਜ਼ਰ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ।  
+## ਅਸਾਈਨਮੈਂਟ
 
-ਇਹ ਹੈ ਉਦ
+[ਆਪਣੇ ਬੈਂਕ ਐਪ ਨੂੰ ਸਟਾਈਲ ਕਰੋ](assignment.md)
 
 ---
 
 **ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/7-bank-project/3-data/README.md b/translations/pa/7-bank-project/3-data/README.md
index dce67fb8cf..28b3eef00d 100644
--- a/translations/pa/7-bank-project/3-data/README.md
+++ b/translations/pa/7-bank-project/3-data/README.md
@@ -1,31 +1,84 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "2c1164912414820c8efd699b43f64954",
-  "translation_date": "2025-10-22T17:55:58+00:00",
+  "original_hash": "86ee5069f27ea3151389d8687c95fac9",
+  "translation_date": "2025-11-03T16:39:14+00:00",
   "source_file": "7-bank-project/3-data/README.md",
   "language_code": "pa"
 }
 -->
-# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਉਣਾ ਭਾਗ 3: ਡਾਟਾ ਪ੍ਰਾਪਤੀ ਅਤੇ ਇਸਦੇ ਉਪਯੋਗ ਦੇ ਤਰੀਕੇ
+# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 3: ਡਾਟਾ ਲੈਣ ਅਤੇ ਵਰਤਣ ਦੇ ਤਰੀਕੇ
 
-ਸਟਾਰ ਟ੍ਰੈਕ ਦੇ ਐਂਟਰਪ੍ਰਾਈਜ਼ ਕੰਪਿਊਟਰ ਬਾਰੇ ਸੋਚੋ - ਜਦੋਂ ਕੈਪਟਨ ਪਿਕਾਰਡ ਜਹਾਜ਼ ਦੀ ਸਥਿਤੀ ਬਾਰੇ ਪੁੱਛਦਾ ਹੈ, ਤਾਂ ਜਾਣਕਾਰੀ ਤੁਰੰਤ ਪ੍ਰਗਟ ਹੁੰਦੀ ਹੈ ਬਿਨਾਂ ਪੂਰੇ ਇੰਟਰਫੇਸ ਨੂੰ ਬੰਦ ਕਰਨ ਅਤੇ ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੇ। ਇਹ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਜਾਣਕਾਰੀ ਦਾ ਪ੍ਰਵਾਹ ਹੈ ਜੋ ਅਸੀਂ ਇੱਥੇ ਡਾਇਨਾਮਿਕ ਡਾਟਾ ਫੈਚਿੰਗ ਨਾਲ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ।
+ਸਟਾਰ ਟ੍ਰੈਕ ਵਿੱਚ ਐਂਟਰਪ੍ਰਾਈਜ਼ ਦੇ ਕੰਪਿਊਟਰ ਬਾਰੇ ਸੋਚੋ - ਜਦੋਂ ਕੈਪਟਨ ਪਿਕਾਰਡ ਜਹਾਜ਼ ਦੀ ਸਥਿਤੀ ਪੁੱਛਦਾ ਹੈ, ਜਾਣਕਾਰੀ ਤੁਰੰਤ ਪ੍ਰਗਟ ਹੁੰਦੀ ਹੈ ਬਿਨਾਂ ਪੂਰੇ ਇੰਟਰਫੇਸ ਨੂੰ ਬੰਦ ਕਰਨ ਅਤੇ ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੇ। ਇਹ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਜਾਣਕਾਰੀ ਦਾ ਪ੍ਰਵਾਹ ਹੈ ਜੋ ਅਸੀਂ ਇੱਥੇ ਡਾਇਨਾਮਿਕ ਡਾਟਾ ਫੈਚਿੰਗ ਨਾਲ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ।
 
-ਇਸ ਸਮੇਂ, ਤੁਹਾਡਾ ਬੈਂਕਿੰਗ ਐਪ ਇੱਕ ਛਪੇ ਹੋਏ ਅਖ਼ਬਾਰ ਵਾਂਗ ਹੈ - ਜਾਣਕਾਰੀ ਦੇਣ ਵਾਲਾ ਪਰ ਸਥਿਰ। ਅਸੀਂ ਇਸਨੂੰ NASA ਦੇ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਵਾਂਗ ਕੁਝ ਬਦਲਣ ਜਾ ਰਹੇ ਹਾਂ, ਜਿੱਥੇ ਡਾਟਾ ਲਗਾਤਾਰ ਵਗਦਾ ਹੈ ਅਤੇ ਯੂਜ਼ਰ ਦੇ ਕੰਮ ਵਿੱਚ ਰੁਕਾਵਟ ਪੈਣ ਤੋਂ ਬਿਨਾਂ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ।
+ਇਸ ਸਮੇਂ, ਤੁਹਾਡਾ ਬੈਂਕਿੰਗ ਐਪ ਇੱਕ ਛਪਿਆ ਹੋਇਆ ਅਖ਼ਬਾਰ ਵਰਗਾ ਹੈ - ਜਾਣਕਾਰੀ ਦੇਣ ਵਾਲਾ ਪਰ ਸਥਿਰ। ਅਸੀਂ ਇਸਨੂੰ NASA ਦੇ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਵਰਗੇ ਕੁਝ ਵਿੱਚ ਬਦਲਣ ਜਾ ਰਹੇ ਹਾਂ, ਜਿੱਥੇ ਡਾਟਾ ਲਗਾਤਾਰ ਵਗਦਾ ਹੈ ਅਤੇ ਯੂਜ਼ਰ ਦੇ ਕੰਮ ਵਿੱਚ ਰੁਕਾਵਟ ਪੈਦਾ ਕੀਤੇ ਬਿਨਾਂ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ।
 
-ਤੁਹਾਨੂੰ ਸਰਵਰਾਂ ਨਾਲ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਸੰਚਾਰ ਕਰਨ, ਵੱਖ-ਵੱਖ ਸਮਿਆਂ 'ਤੇ ਆਉਣ ਵਾਲੇ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ ਅਤੇ ਕੱਚੇ ਜਾਣਕਾਰੀ ਨੂੰ ਯੂਜ਼ਰਾਂ ਲਈ ਅਰਥਪੂਰਨ ਕੁਝ ਵਿੱਚ ਬਦਲਣ ਦਾ ਤਰੀਕਾ ਸਿੱਖਣ ਨੂੰ ਮਿਲੇਗਾ। ਇਹ ਡੈਮੋ ਅਤੇ ਪ੍ਰੋਡਕਸ਼ਨ-ਤਿਆਰ ਸੌਫਟਵੇਅਰ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਹੈ।
+ਤੁਹਾਨੂੰ ਸਰਵਰਾਂ ਨਾਲ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਸੰਚਾਰ ਕਰਨ, ਵੱਖ-ਵੱਖ ਸਮਿਆਂ 'ਤੇ ਆਉਣ ਵਾਲੇ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ, ਅਤੇ ਕੱਚੀ ਜਾਣਕਾਰੀ ਨੂੰ ਯੂਜ਼ਰਾਂ ਲਈ ਅਰਥਪੂਰਨ ਕੁਝ ਵਿੱਚ ਬਦਲਣ ਦਾ ਤਰੀਕਾ ਸਿੱਖਣ ਨੂੰ ਮਿਲੇਗਾ। ਇਹ ਡੈਮੋ ਅਤੇ ਪ੍ਰੋਡਕਸ਼ਨ-ਤਿਆਰ ਸੌਫਟਵੇਅਰ ਵਿੱਚ ਅੰਤਰ ਹੈ।
 
-## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
+## ⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ
 
-[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/45)
+**ਵਿਆਸਤ ਡਿਵੈਲਪਰਾਂ ਲਈ ਤੇਜ਼ ਸ਼ੁਰੂਆਤ ਦਾ ਰਾਹ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Set up API server]
+    B --> C[Test fetch with curl]
+    C --> D[Create login function]
+    D --> E[See data in action]
+```
+
+- **ਮਿੰਟ 1-2**: ਆਪਣਾ API ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ (`cd api && npm start`) ਅਤੇ ਕਨੈਕਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ
+- **ਮਿੰਟ 3**: `getAccount()` ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਫੈਚ ਵਰਤਦਾ ਹੈ
+- **ਮਿੰਟ 4**: ਲੌਗਇਨ ਫਾਰਮ ਨੂੰ `action="javascript:login()"` ਨਾਲ ਵਾਇਰ ਕਰੋ
+- **ਮਿੰਟ 5**: ਲੌਗਇਨ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ ਕੌਂਸੋਲ ਵਿੱਚ ਅਕਾਊਂਟ ਡਾਟਾ ਦੇਖੋ
+
+**ਤੇਜ਼ ਟੈਸਟ ਕਮਾਂਡ**:
+```bash
+# Verify API is running
+curl http://localhost:5000/api
+
+# Test account data fetch
+curl http://localhost:5000/api/accounts/test
+```
+
+**ਇਸਦਾ ਮਹੱਤਵ ਕਿਉਂ ਹੈ**: 5 ਮਿੰਟਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਅਸਿੰਕ੍ਰੋਨਸ ਡਾਟਾ ਫੈਚਿੰਗ ਦਾ ਜਾਦੂ ਦੇਖੋਗੇ ਜੋ ਹਰ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਤਾਕਤ ਦੇਂਦਾ ਹੈ। ਇਹ ਉਹ ਬੁਨਿਆਦ ਹੈ ਜੋ ਐਪਸ ਨੂੰ ਜ਼ਿੰਦਾ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦੀ ਹੈ।
+
+## 🗺️ ਡਾਟਾ-ਚਲਿਤ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਦੁਆਰਾ ਤੁਹਾਡਾ ਸਿੱਖਣ ਦਾ ਸਫਰ
+
+```mermaid
+journey
+    title From Static Pages to Dynamic Applications
+    section Understanding the Evolution
+      Traditional page reloads: 3: You
+      Discover AJAX/SPA benefits: 5: You
+      Master Fetch API patterns: 7: You
+    section Building Authentication
+      Create login functions: 4: You
+      Handle async operations: 6: You
+      Manage user sessions: 8: You
+    section Dynamic UI Updates
+      Learn DOM manipulation: 5: You
+      Build transaction displays: 7: You
+      Create responsive dashboards: 9: You
+    section Professional Patterns
+      Template-based rendering: 6: You
+      Error handling strategies: 7: You
+      Performance optimization: 8: You
+```
+
+**ਤੁਹਾਡਾ ਸਫਰ ਦਾ ਮੰਜ਼ਿਲ**: ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਮਝ ਜਾਵੋਗੇ ਕਿ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਡਾਟਾ ਨੂੰ ਕਿਵੇਂ ਫੈਚ, ਪ੍ਰੋਸੈਸ ਅਤੇ ਡਾਇਨਾਮਿਕ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ, ਪੇਸ਼ੇਵਰ ਐਪਲੀਕੇਸ਼ਨ ਤੋਂ ਉਮੀਦ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਸਹੀ ਯੂਜ਼ਰ ਅਨੁਭਵ ਬਣਾਉਂਦੇ ਹਨ।
+
+## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
+
+[ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/45)
 
 ### ਪੂਰਵ ਸ਼ਰਤਾਂ
 
 ਡਾਟਾ ਫੈਚਿੰਗ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਕੰਪੋਨੈਂਟਸ ਤਿਆਰ ਰੱਖੋ:
 
-- **ਪਿਛਲਾ ਪਾਠ**: [ਲੌਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ](../2-forms/README.md) ਪੂਰਾ ਕਰੋ - ਅਸੀਂ ਇਸ ਅਧਾਰ 'ਤੇ ਕੰਮ ਕਰਾਂਗੇ।
-- **ਲੋਕਲ ਸਰਵਰ**: [Node.js](https://nodejs.org) ਇੰਸਟਾਲ ਕਰੋ ਅਤੇ [ਸਰਵਰ API ਚਲਾਓ](../api/README.md) ਜੋ ਖਾਤੇ ਦਾ ਡਾਟਾ ਪ੍ਰਦਾਨ ਕਰੇ।
-- **API ਕਨੈਕਸ਼ਨ**: ਆਪਣੇ ਸਰਵਰ ਕਨੈਕਸ਼ਨ ਨੂੰ ਇਸ ਕਮਾਂਡ ਨਾਲ ਟੈਸਟ ਕਰੋ:
+- **ਪਿਛਲਾ ਪਾਠ**: [ਲੌਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ](../2-forms/README.md) ਪੂਰਾ ਕਰੋ - ਅਸੀਂ ਇਸ ਬੁਨਿਆਦ 'ਤੇ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ
+- **ਲੋਕਲ ਸਰਵਰ**: [Node.js](https://nodejs.org) ਇੰਸਟਾਲ ਕਰੋ ਅਤੇ [ਸਰਵਰ API ਚਲਾਓ](../api/README.md) ਜੋ ਅਕਾਊਂਟ ਡਾਟਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
+- **API ਕਨੈਕਸ਼ਨ**: ਇਸ ਕਮਾਂਡ ਨਾਲ ਆਪਣੇ ਸਰਵਰ ਕਨੈਕਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰੋ:
 
 ```bash
 curl http://localhost:5000/api
@@ -33,21 +86,66 @@ curl http://localhost:5000/api
 ```
 
 ਇਹ ਤੇਜ਼ ਟੈਸਟ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਸਾਰੇ ਕੰਪੋਨੈਂਟਸ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸੰਚਾਰ ਕਰ ਰਹੇ ਹਨ:
-- ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ Node.js ਤੁਹਾਡੇ ਸਿਸਟਮ 'ਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਚੱਲ ਰਿਹਾ ਹੈ।
-- ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ API ਸਰਵਰ ਸਰਗਰਮ ਹੈ ਅਤੇ ਜਵਾਬ ਦੇ ਰਿਹਾ ਹੈ।
-- ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਐਪ ਸਰਵਰ ਤੱਕ ਪਹੁੰਚ ਸਕਦਾ ਹੈ (ਮਿਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ ਰੇਡੀਓ ਸੰਪਰਕ ਦੀ ਜਾਂਚ ਕਰਨ ਵਾਂਗ)।
+- ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ Node.js ਤੁਹਾਡੇ ਸਿਸਟਮ 'ਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਚੱਲ ਰਿਹਾ ਹੈ
+- ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ API ਸਰਵਰ ਸਰਗਰਮ ਹੈ ਅਤੇ ਜਵਾਬ ਦੇ ਰਿਹਾ ਹੈ
+- ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਐਪ ਸਰਵਰ ਤੱਕ ਪਹੁੰਚ ਸਕਦਾ ਹੈ (ਮਿਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ ਰੇਡੀਓ ਸੰਪਰਕ ਦੀ ਜਾਂਚ ਕਰਨ ਵਰਗਾ)
+
+## 🧠 ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਇਕੋਸਿਸਟਮ ਦਾ ਝਲਕਾ
+
+```mermaid
+mindmap
+  root((Data Management))
+    Authentication Flow
+      Login Process
+        Form Validation
+        Credential Verification
+        Session Management
+      User State
+        Global Account Object
+        Navigation Guards
+        Error Handling
+    API Communication
+      Fetch Patterns
+        GET Requests
+        POST Requests
+        Error Responses
+      Data Formats
+        JSON Processing
+        URL Encoding
+        Response Parsing
+    Dynamic UI Updates
+      DOM Manipulation
+        Safe Text Updates
+        Element Creation
+        Template Cloning
+      User Experience
+        Real-time Updates
+        Error Messages
+        Loading States
+    Security Considerations
+      XSS Prevention
+        textContent Usage
+        Input Sanitization
+        Safe HTML Creation
+      CORS Handling
+        Cross-Origin Requests
+        Header Configuration
+        Development Setup
+```
+
+**ਮੁੱਖ ਸਿਧਾਂਤ**: ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਡਾਟਾ ਆਰਕੈਸਟ੍ਰੇਸ਼ਨ ਸਿਸਟਮ ਹਨ - ਇਹ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ, ਸਰਵਰ APIs, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਸੁਰੱਖਿਆ ਮਾਡਲਾਂ ਦੇ ਵਿਚਕਾਰ ਸਹੀ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਸਹਿਕਾਰ ਕਰਦੇ ਹਨ।
 
 ---
 
 ## ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਸ ਵਿੱਚ ਡਾਟਾ ਫੈਚਿੰਗ ਨੂੰ ਸਮਝਣਾ
 
-ਪਿਛਲੇ ਦੋ ਦਹਾਕਿਆਂ ਵਿੱਚ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਸ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਤਰੀਕਾ ਬਹੁਤ ਬਦਲ ਗਿਆ ਹੈ। ਇਸ ਵਿਕਾਸ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਕਿ ਆਧੁਨਿਕ ਤਕਨੀਕਾਂ ਜਿਵੇਂ AJAX ਅਤੇ Fetch API ਕਿਉਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹਨ ਅਤੇ ਕਿਉਂ ਇਹ ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਲਈ ਜ਼ਰੂਰੀ ਸੰਦ ਬਣ ਗਈਆਂ ਹਨ।
+ਪਿਛਲੇ ਦੋ ਦਹਾਕਿਆਂ ਵਿੱਚ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਤਰੀਕਾ ਬਹੁਤ ਬਦਲ ਗਿਆ ਹੈ। ਇਸ ਵਿਕਾਸ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਕਿ AJAX ਅਤੇ Fetch API ਵਰਗੇ ਆਧੁਨਿਕ ਤਕਨੀਕਾਂ ਕਿਉਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹਨ ਅਤੇ ਕਿਉਂ ਇਹ ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਲਈ ਜ਼ਰੂਰੀ ਸੰਦ ਬਣ ਗਏ ਹਨ।
 
-ਆਓ ਪੁਰਾਣੇ ਵੈੱਬਸਾਈਟਸ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਦੀ ਤੁਲਨਾ ਕਰੀਏ ਜੋ ਅਸੀਂ ਅੱਜ ਬਣਾਉਂਦੇ ਹਾਂ।
+ਆਓ ਵੇਖੀਏ ਕਿ ਰਵਾਇਤੀ ਵੈੱਬਸਾਈਟਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਸਨ ਅਤੇ ਅੱਜ ਅਸੀਂ ਬਣਾਉਣ ਵਾਲੀਆਂ ਡਾਇਨਾਮਿਕ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
 
-### ਰਵਾਇਤੀ ਮਲਟੀ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨਸ (MPA)
+### ਰਵਾਇਤੀ ਮਲਟੀ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ (MPA)
 
-ਵੈੱਬ ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਵਿੱਚ, ਹਰ ਕਲਿਕ ਪੁਰਾਣੇ ਟੈਲੀਵਿਜ਼ਨ 'ਤੇ ਚੈਨਲ ਬਦਲਣ ਵਾਂਗ ਸੀ - ਸਕ੍ਰੀਨ ਖਾਲੀ ਹੋ ਜਾਂਦੀ ਸੀ, ਫਿਰ ਨਵੀਂ ਸਮੱਗਰੀ ਨੂੰ ਧੀਰੇ-ਧੀਰੇ ਟਿਊਨ ਕੀਤਾ ਜਾਂਦਾ ਸੀ। ਇਹ ਸ਼ੁਰੂਆਤੀ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਸ ਦੀ ਹਕੀਕਤ ਸੀ, ਜਿੱਥੇ ਹਰ ਇੰਟਰੈਕਸ਼ਨ ਦਾ ਮਤਲਬ ਸੀ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਤੋਂ ਬਣਾਉਣਾ।
+ਵੈੱਬ ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਵਿੱਚ, ਹਰ ਕਲਿੱਕ ਪੁਰਾਣੇ ਟੈਲੀਵਿਜ਼ਨ 'ਤੇ ਚੈਨਲ ਬਦਲਣ ਵਰਗਾ ਸੀ - ਸਕ੍ਰੀਨ ਖਾਲੀ ਹੋ ਜਾਂਦੀ ਸੀ, ਫਿਰ ਨਵੀਂ ਸਮੱਗਰੀ ਵਿੱਚ ਧੀਰੇ-ਧੀਰੇ ਟਿਊਨ ਹੁੰਦੀ ਸੀ। ਇਹ ਸ਼ੁਰੂਆਤੀ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਹਕੀਕਤ ਸੀ, ਜਿੱਥੇ ਹਰ ਇੰਟਰੈਕਸ਼ਨ ਦਾ ਮਤਲਬ ਸੀ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਤੋਂ ਸ਼ੁਰੂ ਕਰਨਾ।
 
 ```mermaid
 sequenceDiagram
@@ -64,15 +162,15 @@ sequenceDiagram
 
 ![ਮਲਟੀ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਅਪਡੇਟ ਵਰਕਫਲੋ](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.pa.png)
 
-**ਇਹ ਤਰੀਕਾ ਕਿਉਂ ਅਸੁਵਿਧਾਜਨਕ ਲੱਗਦਾ ਸੀ:**
-- ਹਰ ਕਲਿਕ ਦਾ ਮਤਲਬ ਸੀ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਤੋਂ ਬਣਾਉਣਾ।
-- ਯੂਜ਼ਰਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਵਿਚਾਰਾਂ ਦੇ ਵਿਚਕਾਰ ਰੁਕਾਵਟਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਸੀ।
-- ਤੁਹਾਡਾ ਇੰਟਰਨੈਟ ਕਨੈਕਸ਼ਨ ਮੁੜ-ਮੁੜ ਉਹੀ ਹੈਡਰ ਅਤੇ ਫੁਟਰ ਡਾਊਨਲੋਡ ਕਰਦਾ ਸੀ।
-- ਐਪਸ ਸੌਫਟਵੇਅਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਬਜਾਏ ਫਾਈਲਿੰਗ ਕੈਬਿਨੇਟ ਦੇ ਰੂਪ ਵਿੱਚ ਜ਼ਿਆਦਾ ਮਹਿਸੂਸ ਹੁੰਦੇ ਸਨ।
+**ਇਹ ਤਰੀਕਾ ਕਿਉਂ ਅਸੁਵਿਧਾਜਨਕ ਮਹਿਸੂਸ ਹੁੰਦਾ ਸੀ:**
+- ਹਰ ਕਲਿੱਕ ਦਾ ਮਤਲਬ ਸੀ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਤੋਂ ਬਣਾਉਣਾ
+- ਯੂਜ਼ਰਾਂ ਨੂੰ ਉਹਨਾਂ ਪੇਜ ਫਲੈਸ਼ਾਂ ਦੁਆਰਾ ਵਿਚਾਰਾਂ ਵਿਚ ਰੁਕਾਵਟ ਪੈਂਦੀ ਸੀ
+- ਤੁਹਾਡਾ ਇੰਟਰਨੈਟ ਕਨੈਕਸ਼ਨ ਮੁੜ-ਮੁੜ ਉਹੀ ਹੈਡਰ ਅਤੇ ਫੁੱਟਰ ਡਾਊਨਲੋਡ ਕਰਦਾ ਸੀ
+- ਐਪਸ ਸੌਫਟਵੇਅਰ ਵਰਗੇ ਨਹੀਂ, ਬਲਕਿ ਫਾਈਲਿੰਗ ਕੈਬਨਿਟ ਦੇ ਕਲਿੱਕ ਕਰਨ ਵਰਗੇ ਮਹਿਸੂਸ ਹੁੰਦੇ ਸਨ
 
-### ਆਧੁਨਿਕ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨਸ (SPA)
+### ਆਧੁਨਿਕ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ (SPA)
 
-AJAX (Asynchronous JavaScript and XML) ਨੇ ਇਸ ਪੈਰਾਡਾਇਮ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ। ਜਿਵੇਂ ਇੰਟਰਨੈਸ਼ਨਲ ਸਪੇਸ ਸਟੇਸ਼ਨ ਦੀ ਮੋਡਿਊਲਰ ਡਿਜ਼ਾਈਨ, ਜਿੱਥੇ ਅਸਟਰੋਨਾਟਸ ਪੂਰੇ ਢਾਂਚੇ ਨੂੰ ਮੁੜ ਤੋਂ ਬਣਾਉਣ ਦੇ ਬਗੈਰ ਵਿਅਕਤੀਗਤ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹਨ, AJAX ਸਾਨੂੰ ਪੇਜ ਦੇ ਵਿਸ਼ੇਸ਼ ਹਿੱਸਿਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਬਿਨਾਂ ਸਾਰਾ ਕੁਝ ਮੁੜ-ਲੋਡ ਕਰਨ ਦੇ। XML ਦਾ ਜ਼ਿਕਰ ਕਰਨ ਦੇ ਬਾਵਜੂਦ, ਅਸੀਂ ਅੱਜ ਜ਼ਿਆਦਾਤਰ JSON ਵਰਤਦੇ ਹਾਂ, ਪਰ ਮੁੱਖ ਸਿਧਾਂਤ ਇਹ ਹੈ: ਸਿਰਫ ਉਹਨਾਂ ਹਿੱਸਿਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਜੋ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ।
+AJAX (Asynchronous JavaScript and XML) ਨੇ ਇਸ ਪੈਰਾਡਾਇਮ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦਿੱਤਾ। ਜਿਵੇਂ ਇੰਟਰਨੈਸ਼ਨਲ ਸਪੇਸ ਸਟੇਸ਼ਨ ਦੀ ਮੋਡਿਊਲਰ ਡਿਜ਼ਾਈਨ, ਜਿੱਥੇ ਅਸਟਰੋਨਾਟ ਪੂਰੇ ਢਾਂਚੇ ਨੂੰ ਮੁੜ ਬਣਾਉਣ ਦੇ ਬਗੈਰ ਵਿਅਕਤੀਗਤ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹਨ, AJAX ਸਾਨੂੰ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਲੋਡ ਕਰਨ ਦੇ ਬਗੈਰ ਵੈੱਬਪੇਜ ਦੇ ਵਿਸ਼ੇਸ਼ ਹਿੱਸਿਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। XML ਦਾ ਜ਼ਿਕਰ ਕਰਨ ਦੇ ਬਾਵਜੂਦ, ਅਸੀਂ ਅੱਜ ਜ਼ਿਆਦਾਤਰ JSON ਵਰਤਦੇ ਹਾਂ, ਪਰ ਮੁੱਖ ਸਿਧਾਂਤ ਇਹ ਹੈ: ਸਿਰਫ ਉਹ ਅਪਡੇਟ ਕਰੋ ਜੋ ਬਦਲਣਾ ਹੈ।
 
 ```mermaid
 sequenceDiagram
@@ -91,37 +189,37 @@ sequenceDiagram
 
 ![ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਅਪਡੇਟ ਵਰਕਫਲੋ](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.pa.png)
 
-**SPAs ਕਿਉਂ ਬਿਹਤਰ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ:**
-- ਸਿਰਫ ਉਹ ਹਿੱਸੇ ਜੋ ਵਾਸਤਵ ਵਿੱਚ ਬਦਲੇ ਹਨ ਅਪਡੇਟ ਹੁੰਦੇ ਹਨ (ਸਮਾਰਟ, ਹੈ ਨਾ?)
-- ਕੋਈ ਰੁਕਾਵਟਾਂ ਨਹੀਂ - ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਆਪਣੇ ਫਲੋ ਵਿੱਚ ਰਹਿੰਦੇ ਹਨ।
-- ਵਾਇਰ 'ਤੇ ਘੱਟ ਡਾਟਾ ਜਾਣ ਦਾ ਮਤਲਬ ਹੈ ਤੇਜ਼ ਲੋਡਿੰਗ।
-- ਸਭ ਕੁਝ ਸਨੈਪੀ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ, ਜਿਵੇਂ ਤੁਹਾਡੇ ਫੋਨ ਦੇ ਐਪਸ।
+**SPA ਕਿਉਂ ਬਿਹਤਰ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ:**
+- ਸਿਰਫ ਉਹ ਹਿੱਸੇ ਜੋ ਵਾਸਤਵ ਵਿੱਚ ਬਦਲੇ ਹਨ, ਅਪਡੇਟ ਹੁੰਦੇ ਹਨ (ਸਮਝਦਾਰ, ਹੈ ਨਾ?)
+- ਕੋਈ ਵਧੇਰੇ ਰੁਕਾਵਟ ਨਹੀਂ - ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਆਪਣੇ ਕੰਮ ਵਿੱਚ ਲਗੇ ਰਹਿੰਦੇ ਹਨ
+- ਵਾਇਰ 'ਤੇ ਘੱਟ ਡਾਟਾ ਜਾਣ ਦਾ ਮਤਲਬ ਹੈ ਤੇਜ਼ ਲੋਡਿੰਗ
+- ਸਭ ਕੁਝ ਤੇਜ਼ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ, ਜਿਵੇਂ ਤੁਹਾਡੇ ਫੋਨ ਦੇ ਐਪਸ
 
 ### ਆਧੁਨਿਕ Fetch API ਵੱਲ ਵਿਕਾਸ
 
-ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਜੋ ਪੁਰਾਣੇ [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ਦੀ ਜਗ੍ਹਾ ਲੈਂਦਾ ਹੈ। ਜਿਵੇਂ ਟੈਲੀਗ੍ਰਾਫ ਚਲਾਉਣ ਅਤੇ ਈਮੇਲ ਵਰਤਣ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਹੈ, Fetch API ਵਾਅਦਿਆਂ (promises) ਨੂੰ ਸਾਫ਼ ਅਸਿੰਕ੍ਰੋਨਸ ਕੋਡ ਲਈ ਵਰਤਦਾ ਹੈ ਅਤੇ JSON ਨੂੰ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਸੰਭਾਲਦਾ ਹੈ।
+ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਜੋ ਪੁਰਾਣੇ [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ਨੂੰ ਬਦਲ ਦਿੰਦੇ ਹਨ। ਜਿਵੇਂ ਟੈਲੀਗ੍ਰਾਫ ਚਲਾਉਣ ਅਤੇ ਈਮੇਲ ਵਰਤਣ ਵਿੱਚ ਅੰਤਰ ਹੁੰਦਾ ਹੈ, Fetch API ਵਾਅਦਿਆਂ ਨੂੰ ਵਰਤਦਾ ਹੈ ਸਾਫ਼ ਅਸਿੰਕ੍ਰੋਨਸ ਕੋਡ ਲਈ ਅਤੇ JSON ਨੂੰ ਕੁਦਰਤੀ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਦਾ ਹੈ।
 
 | ਫੀਚਰ | XMLHttpRequest | Fetch API |
 |---------|----------------|----------|
 | **ਸਿੰਟੈਕਸ** | ਜਟਿਲ ਕਾਲਬੈਕ-ਅਧਾਰਿਤ | ਸਾਫ਼ ਵਾਅਦਾ-ਅਧਾਰਿਤ |
-| **JSON ਸੰਭਾਲ** | ਮੈਨੂਅਲ ਪਾਰਸਿੰਗ ਦੀ ਲੋੜ | ਅੰਦਰੂਨੀ `.json()` ਵਿਧੀ |
-| **ਐਰਰ ਸੰਭਾਲ** | ਸੀਮਿਤ ਐਰਰ ਜਾਣਕਾਰੀ | ਵਿਸਤ੍ਰਿਤ ਐਰਰ ਵੇਰਵੇ |
-| **ਆਧੁਨਿਕ ਸਹਾਇਤਾ** | ਲੈਗੇਸੀ ਅਨੁਕੂਲਤਾ | ES6+ ਵਾਅਦੇ ਅਤੇ async/await |
+| **JSON ਸੰਭਾਲਣਾ** | ਮੈਨੂਅਲ ਪਾਰਸਿੰਗ ਦੀ ਲੋੜ | ਅੰਦਰੂਨੀ `.json()` ਵਿਧੀ |
+| **ਐਰਰ ਸੰਭਾਲਣਾ** | ਸੀਮਿਤ ਐਰਰ ਜਾਣਕਾਰੀ | ਵਿਸਤ੍ਰਿਤ ਐਰਰ ਵੇਰਵੇ |
+| **ਆਧੁਨਿਕ ਸਹਾਇਤਾ** | ਪੁਰਾਣੀ ਅਨੁਕੂਲਤਾ | ES6+ ਵਾਅਦੇ ਅਤੇ async/await |
 
-> 💡 **ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ**: ਚੰਗੀ ਖ਼ਬਰ - Fetch API ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ! ਜੇ ਤੁਸੀਂ ਖਾਸ ਵਰਜਨਾਂ ਬਾਰੇ ਜ਼ਿਆਦਾ ਜਾਣਨਾ ਚਾਹੁੰਦੇ ਹੋ, [caniuse.com](https://caniuse.com/fetch) ਵਿੱਚ ਪੂਰੀ ਅਨੁਕੂਲਤਾ ਕਹਾਣੀ ਹੈ।
+> 💡 **ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ**: ਚੰਗੀ ਖ਼ਬਰ - Fetch API ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ! ਜੇ ਤੁਸੀਂ ਖਾਸ ਵਰਜਨਾਂ ਬਾਰੇ ਜਿਗਿਆਸੂ ਹੋ, [caniuse.com](https://caniuse.com/fetch) ਵਿੱਚ ਪੂਰੀ ਅਨੁਕੂਲਤਾ ਕਹਾਣੀ ਹੈ।
 > 
 **ਸਾਰ:**
-- Chrome, Firefox, Safari, ਅਤੇ Edge ਵਿੱਚ ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ (ਮੂਲ ਤੌਰ 'ਤੇ ਜਿੱਥੇ ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਹਨ)
+- Chrome, Firefox, Safari, ਅਤੇ Edge ਵਿੱਚ ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ (ਅਸਲ ਵਿੱਚ ਜਿੱਥੇ ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਹਨ)
 - ਸਿਰਫ Internet Explorer ਨੂੰ ਵਾਧੂ ਮਦਦ ਦੀ ਲੋੜ ਹੈ (ਅਤੇ ਸੱਚਮੁੱਚ, IE ਨੂੰ ਛੱਡਣ ਦਾ ਸਮਾਂ ਹੈ)
-- ਤੁਹਾਨੂੰ ਸੁੰਦਰ async/await ਪੈਟਰਨ ਲਈ ਬਹੁਤ ਵਧੀਆ ਤਰੀਕੇ ਨਾਲ ਸੈਟ ਕਰਦਾ ਹੈ ਜੋ ਅਸੀਂ ਬਾਅਦ ਵਿੱਚ ਵਰਤਾਂਗੇ
+- ਤੁਹਾਨੂੰ ਬਾਅਦ ਵਿੱਚ ਵਰਤਣ ਲਈ ਸੁੰਦਰ async/await ਪੈਟਰਨ ਲਈ ਬਹੁਤ ਵਧੀਆ ਤਰੀਕੇ ਨਾਲ ਸੈਟ ਕਰਦਾ ਹੈ
 
-### ਯੂਜ਼ਰ ਲੌਗਇਨ ਅਤੇ ਡਾਟਾ ਪ੍ਰਾਪਤੀ ਨੂੰ ਲਾਗੂ ਕਰਨਾ
+### ਯੂਜ਼ਰ ਲੌਗਇਨ ਅਤੇ ਡਾਟਾ ਰੀਟਰੀਵਲ ਨੂੰ ਲਾਗੂ ਕਰਨਾ
 
-ਹੁਣ ਆਓ ਲੌਗਇਨ ਸਿਸਟਮ ਨੂੰ ਲਾਗੂ ਕਰੀਏ ਜੋ ਤੁਹਾਡੇ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਸਥਿਰ ਡਿਸਪਲੇ ਤੋਂ ਇੱਕ ਕਾਰਗਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਜਿਵੇਂ ਸੁਰੱਖਿਅਤ ਫੌਜੀ ਸਹੂਲਤਾਂ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਪ੍ਰਮਾਣਿਕਤਾ ਪ੍ਰੋਟੋਕੋਲ, ਅਸੀਂ ਯੂਜ਼ਰ ਦੀ ਪਛਾਣ ਦੀ ਪੁਸ਼ਟੀ ਕਰਾਂਗੇ ਅਤੇ ਫਿਰ ਉਹਨਾਂ ਦੇ ਵਿਸ਼ੇਸ਼ ਡਾਟਾ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਾਂਗੇ।
+ਹੁਣ ਆਓ ਲੌਗਇਨ ਸਿਸਟਮ ਨੂੰ ਲਾਗੂ ਕਰੀਏ ਜੋ ਤੁਹਾਡੇ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਸਥਿਰ ਡਿਸਪਲੇ ਤੋਂ ਇੱਕ ਕਾਰਗਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਜਿਵੇਂ ਸੁਰੱਖਿਅਤ ਸੈਨਿਕ ਸਹੂਲਤਾਂ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਪ੍ਰਮਾਣਿਕਤਾ ਪ੍ਰੋਟੋਕੋਲ, ਅਸੀਂ ਯੂਜ਼ਰ ਦੀ ਪਛਾਣ ਦੀ ਪੁਸ਼ਟੀ ਕਰਾਂਗੇ ਅਤੇ ਫਿਰ ਉਹਨਾਂ ਦੇ ਵਿਸ਼ੇਸ਼ ਡਾਟਾ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਾਂਗੇ।
 
-ਅਸੀਂ ਇਸਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਬਣਾਉਣਗੇ, ਬੁਨਿਆਦੀ ਪ੍ਰਮਾਣਿਕਤਾ ਤੋਂ ਸ਼ੁਰੂ ਕਰਕੇ ਅਤੇ ਫਿਰ ਡਾਟਾ-ਫੈਚਿੰਗ ਸਮਰੱਥਾ ਸ਼ਾਮਲ ਕਰਾਂਗੇ।
+ਅਸੀਂ ਇਸਨੂੰ ਕਦਮ-ਕਦਮ ਕਰਕੇ ਬਣਾਉਂਦੇ ਹਾਂ, ਬੁਨਿਆਦੀ ਪ੍ਰਮਾਣਿਕਤਾ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ ਅਤੇ ਫਿਰ ਡਾਟਾ-ਫੈਚਿੰਗ ਸਮਰੱਥਾ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋਏ।
 
-#### ਕਦਮ 1: ਲੌਗਇਨ ਫੰਕਸ਼ਨ ਦੀ ਬੁਨਿਆਦ ਬਣਾਉਣਾ
+#### ਕਦਮ 1: ਲੌਗਇਨ ਫੰਕਸ਼ਨ ਦੀ ਬੁਨਿਆਦ ਬਣਾਓ
 
 ਆਪਣੀ `app.js` ਫਾਈਲ ਖੋਲ੍ਹੋ ਅਤੇ ਇੱਕ ਨਵਾਂ `login` ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ। ਇਹ ਯੂਜ਼ਰ ਪ੍ਰਮਾਣਿਕਤਾ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸੰਭਾਲੇਗਾ:
 
@@ -133,16 +231,16 @@ async function login() {
 ```
 
 **ਇਸਨੂੰ ਤੋੜ ਕੇ ਸਮਝਦੇ ਹਾਂ:**
-- ਉਹ `async` ਕੀਵਰਡ? ਇਹ JavaScript ਨੂੰ ਕਹਿ ਰਿਹਾ ਹੈ "ਹੇ, ਇਹ ਫੰਕਸ਼ਨ ਸ਼ਾਇਦ ਚੀਜ਼ਾਂ ਦੀ ਉਡੀਕ ਕਰ ਸਕਦਾ ਹੈ"
-- ਅਸੀਂ ਆਪਣੇ ਫਾਰਮ ਨੂੰ ਪੇਜ ਤੋਂ ਲੈ ਰਹੇ ਹਾਂ (ਕੋਈ ਫੈਂਸੀ ਚੀਜ਼ ਨਹੀਂ, ਸਿਰਫ ਇਸਨੂੰ ਇਸਦੇ ID ਦੁਆਰਾ ਲੱਭ ਰਹੇ ਹਾਂ)
+- ਉਹ `async` ਕੀਵਰਡ? ਇਹ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਕਹਿ ਰਿਹਾ ਹੈ "ਹੇ, ਇਹ ਫੰਕਸ਼ਨ ਸ਼ਾਇਦ ਕੁਝ ਚੀਜ਼ਾਂ ਦੀ ਉਡੀਕ ਕਰ ਸਕਦਾ ਹੈ"
+- ਅਸੀਂ ਆਪਣੇ ਫਾਰਮ ਨੂੰ ਪੇਜ ਤੋਂ ਲੈ ਰਹੇ ਹਾਂ (ਕੋਈ ਫੈਂਸੀ ਚੀਜ਼ ਨਹੀਂ, ਸਿਰਫ ਇਸਦੇ ID ਦੁਆਰਾ ਲੱਭ ਰਹੇ ਹਾਂ)
 - ਫਿਰ ਅਸੀਂ ਜੋ ਕੁਝ ਯੂਜ਼ਰ ਨੇ ਆਪਣਾ ਯੂਜ਼ਰਨੇਮ ਵਜੋਂ ਟਾਈਪ ਕੀਤਾ ਹੈ, ਉਸਨੂੰ ਖਿੱਚ ਰਹੇ ਹਾਂ
-- ਇੱਥੇ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ: ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਫਾਰਮ ਇਨਪੁਟ ਤੱਕ ਇਸਦੇ `name` ਐਟ੍ਰਿਬਿਊਟ ਦੁਆਰਾ ਪਹੁੰਚ ਕਰ ਸਕਦੇ ਹੋ - ਵਾਧੂ getElementById ਕਾਲਾਂ ਦੀ ਲੋੜ ਨਹੀਂ!
+- ਇੱਥੇ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ: ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਫਾਰਮ ਇਨਪੁਟ ਨੂੰ ਇਸਦੇ `name` ਐਟ੍ਰਿਬਿਊਟ ਦੁਆਰਾ ਪਹੁੰਚ ਸਕਦੇ ਹੋ - ਵਾਧੂ getElementById ਕਾਲਾਂ ਦੀ ਲੋੜ ਨਹੀਂ!
 
-> 💡 **ਫਾਰਮ ਐਕਸੈਸ ਪੈਟਰਨ**: ਹਰ ਫਾਰਮ ਕੰਟਰੋਲ ਨੂੰ ਇਸਦੇ name (HTML ਵਿੱਚ `name` ਐਟ੍ਰਿਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੈਟ ਕੀਤਾ ਗਿਆ) ਦੁਆਰਾ ਫਾਰਮ ਐਲੀਮੈਂਟ ਦੀ ਇੱਕ ਪ੍ਰਾਪਰਟੀ ਵਜੋਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਫਾਰਮ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਇੱਕ ਸਾਫ਼, ਪੜ੍ਹਨ ਯੋਗ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
+> 💡 **ਫਾਰਮ ਐਕਸੈਸ ਪੈਟਰਨ**: ਹਰ ਫਾਰਮ ਕੰਟਰੋਲ ਨੂੰ ਇਸਦੇ ਨਾਮ (HTML ਵਿੱਚ `name` ਐਟ੍ਰਿਬਿਊਟ ਵਰਤ ਕੇ ਸੈਟ ਕੀਤਾ) ਦੁਆਰਾ ਫਾਰਮ ਐਲਿਮੈਂਟ ਦੀ ਪ੍ਰਾਪਰਟੀ ਵਜੋਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਫਾਰਮ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਸਾਫ਼, ਪੜ੍ਹਨਯੋਗ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
 
-#### ਕਦਮ 2: ਖਾਤਾ ਡਾਟਾ ਪ੍ਰਾਪਤੀ ਫੰਕਸ਼ਨ ਬਣਾਉਣਾ
+#### ਕਦਮ 2: ਅਕਾਊਂਟ ਡਾਟਾ ਫੈਚ ਕਰਨ ਵਾਲਾ ਫੰਕਸ਼ਨ ਬਣਾਓ
 
-ਅਗਲੇ ਕਦਮ ਵਿੱਚ, ਅਸੀਂ ਸਰਵਰ ਤੋਂ ਖਾਤਾ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਇੱਕ ਸਮਰਪਿਤ ਫੰਕਸ਼ਨ ਬਣਾਉਣਗੇ। ਇਹ ਤੁਹਾਡੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫੰਕਸ਼ਨ ਦੇ ਸਮਾਨ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਪਰ ਡਾਟਾ ਪ੍ਰਾਪਤੀ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ:
+ਅਗਲੇ ਕਦਮ ਵਿੱਚ, ਅਸੀਂ ਸਰਵਰ ਤੋਂ ਅਕਾਊਂਟ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਇੱਕ ਸਮਰਪਿਤ ਫੰਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ। ਇਹ ਤੁਹਾਡੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫੰਕਸ਼ਨ ਦੇ ਸਮਾਨ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਪਰ ਡਾਟਾ ਪ੍ਰਾਪਤੀ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ:
 
 ```javascript
 async function getAccount(user) {
@@ -155,38 +253,45 @@ async function getAccount(user) {
 }
 ```
 
-**ਇਹ ਕੋਡ ਕੀ ਹਾਸਲ ਕਰਦਾ ਹੈ:**
+**ਇਹ ਕੋਡ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ:**
 - **ਵਰਤਦਾ ਹੈ** ਆਧੁਨਿਕ `fetch` API ਡਾਟਾ ਨੂੰ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਮੰਗਣ ਲਈ
-- **ਤਿਆਰ ਕਰਦਾ ਹੈ** ਇੱਕ GET ਰਿਕਵੈਸਟ URL ਯੂਜ਼ਰਨੇਮ ਪੈਰਾਮੀਟਰ ਨਾਲ
+- **ਬਣਾਉਂਦਾ ਹੈ** ਇੱਕ GET ਰਿਕਵੈਸਟ URL ਯੂਜ਼ਰਨੇਮ ਪੈਰਾਮੀਟਰ ਨਾਲ
 - **ਲਾਗੂ ਕਰਦਾ ਹੈ** `encodeURIComponent()` ਜੋ URLs ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਦਾ ਹੈ
-- **ਰਿਸਪਾਂਸ ਨੂੰ** JSON ਫਾਰਮੈਟ ਵਿੱਚ ਬਦਲਦਾ ਹੈ ਜੋ ਡਾਟਾ ਮੈਨਿਪੂਲੇਸ਼ਨ ਲਈ ਆਸਾਨ ਹੈ
-- **ਗ੍ਰੇਸਫੁਲ ਤਰੀਕੇ ਨਾਲ ਐਰਰਸ ਨੂੰ** ਸੰਭਾਲਦਾ ਹੈ ਅਤੇ ਐਰਰ ਓਬਜੈਕਟ ਵਾਪਸ ਕਰਦਾ ਹੈ ਬਜਾਏ ਕਿ ਕਰੈਸ਼ ਹੋਣ ਦੇ
+- **ਬਦਲਦਾ ਹੈ** ਜਵਾਬ ਨੂੰ JSON ਫਾਰਮੈਟ ਵਿੱਚ ਸੌਖੀ ਡਾਟਾ ਮੈਨਿਪੂਲੇਸ਼ਨ ਲਈ
+- **ਗ੍ਰੇਸਫੁਲੀ ਸੰਭਾਲਦਾ ਹੈ** ਐਰਰਜ਼ ਨੂੰ ਇੱਕ ਐਰਰ ਆਬਜੈਕਟ ਵਾਪਸ ਕਰਕੇ ਬਜਾਏ ਕਿ ਕ੍ਰੈਸ਼ ਹੋਣ ਦੇ
 
-> ⚠️ **ਸੁਰੱਖਿਆ ਨੋਟ**: `encodeURIComponent()` ਫੰਕਸ਼ਨ URLs ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। ਜਿਵੇਂ ਨੈਵਲ ਕਮਿਊਨਿਕੇਸ਼ਨਜ਼ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਐਨਕੋਡਿੰਗ ਸਿਸਟਮ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਸੁਨੇਹਾ ਬਿਲਕੁਲ ਜਿਵੇਂ ਇਰਾਦਾ ਕੀਤਾ ਗਿਆ ਹੈ ਪਹੁੰਚਦਾ ਹੈ, "#", "&" ਵਰਗੇ ਅੱਖਰਾਂ ਨੂੰ ਗਲਤ ਸਮਝਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।
-> 
-**ਇਸਦਾ ਮਹੱਤਵ:**
-- ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਨੂੰ URLs ਨੂੰ ਤੋੜਨ ਤੋਂ ਰੋਕਦਾ ਹੈ
-- URL ਮੈਨਿਪੂਲੇਸ਼ਨ ਹਮਲਿਆਂ ਤੋਂ ਸੁਰੱਖਿਅਤ ਕਰਦਾ ਹੈ
-- ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਸਰਵਰ ਇਰਾਦਾ ਕੀਤਾ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ
-- ਸੁਰੱਖਿਅਤ ਕੋਡਿੰਗ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ
+> ⚠️ **ਸੁਰੱਖਿਆ ਨੋਟ**: `encodeURIComponent()` ਫੰਕਸ਼ਨ URLs ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। ਜਿਵੇਂ ਨਾਵਲ ਸੰਚਾਰ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਐਨਕੋਡਿੰਗ ਸਿਸਟਮ,
+DOM ਮੈਨਿਪੁਲੇਸ਼ਨ ਉਹ ਤਕਨੀਕ ਹੈ ਜੋ ਸਥਿਰ ਵੈੱਬ ਪੰਨਿਆਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਬਦਲ ਦਿੰਦੀ ਹੈ ਜੋ ਉਪਭੋਗਤਾ ਦੀਆਂ ਕ੍ਰਿਆਵਾਂ ਅਤੇ ਸਰਵਰ ਦੇ ਜਵਾਬਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣਾ ਸਮੱਗਰੀ ਅਪਡੇਟ ਕਰਦੀ ਹੈ।
+
+### ਕੰਮ ਲਈ ਸਹੀ ਸਾਧਨ ਚੁਣਨਾ
 
-#### HTTP GET ਰਿਕਵੈਸਟਸ ਨੂੰ ਸਮਝਣਾ
+ਜਦੋਂ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਆਪਣਾ HTML ਅਪਡੇਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ ਕਈ ਵਿਕਲਪ ਹੁੰਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਇੱਕ ਟੂਲਬਾਕਸ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਸਾਧਨਾਂ ਵਾਂਗ ਸੋਚੋ - ਹਰ ਇੱਕ ਖਾਸ ਕੰਮਾਂ ਲਈ ਬੇਹਤਰੀਨ:
 
-ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦਾ ਹੈ: ਜਦੋਂ ਤੁਸੀਂ `fetch` ਨੂੰ ਕਿਸੇ ਵਾਧੂ ਵਿਕਲਪਾਂ ਦੇ ਬਗੈਰ ਵਰਤਦੇ ਹੋ, ਇਹ ਆਪਣੇ ਆਪ ਇੱਕ [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) ਰਿਕਵੈਸਟ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਉਸ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ ਜੋ ਅਸੀਂ ਕਰ ਰਹੇ ਹਾਂ - ਸਰਵਰ ਨੂੰ ਪੁੱਛਣਾ "ਹੇ, ਕੀ ਮੈਂ ਇਸ ਯੂਜ਼ਰ ਦਾ ਖਾਤਾ ਡਾਟਾ ਦੇਖ ਸਕਦਾ ਹਾਂ?"
+| ਤਰੀਕਾ | ਇਹ ਕਿਸ ਲਈ ਵਧੀਆ ਹੈ | ਕਦੋਂ ਇਸਨੂੰ ਵਰਤਣਾ ਹੈ | ਸੁਰੱਖਿਆ ਪੱਧਰ |
+|-------|--------------------|--------------------|--------------|
+| `textContent` | ਉਪਭੋਗਤਾ ਡਾਟਾ ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਉਣਾ | ਜਦੋਂ ਵੀ ਤੁਸੀਂ ਟੈਕਸਟ ਦਿਖਾ ਰਹੇ ਹੋ | ✅ ਬਿਲਕੁਲ ਸੁਰੱਖਿਅਤ |
+| `createElement()` + `append()` | ਜਟਿਲ ਲੇਆਉਟ ਬਣਾਉਣਾ | ਨਵੇਂ ਸੈਕਸ਼ਨ/ਲਿਸਟ ਬਣਾਉਣਾ | ✅ ਬਿਲਕੁਲ ਸੁਰੱਖਿਅਤ |
+| `innerHTML` | HTML ਸਮੱਗਰੀ ਸੈਟ ਕਰਨਾ | ⚠️ ਇਸਨੂੰ ਟਾਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ | ❌ ਖਤਰਨਾਕ |
 
-GET ਰਿਕਵੈਸਟਸ ਨੂੰ ਲਾਇਬ੍ਰੇਰੀ ਤੋਂ ਕਿਤਾਬ ਉਧਾਰ ਲੈਣ ਦੀ ਬੇਨਤੀ ਕਰਨ ਵਾਂਗ ਸੋਚੋ - ਤੁਸੀਂ ਕੁਝ ਮੌਜੂਦਾ ਚੀਜ਼ ਦੇਖਣ ਦੀ ਬੇਨਤੀ ਕਰ ਰਹੇ ਹੋ। POST ਰਿਕਵੈਸਟਸ (ਜੋ ਅਸੀਂ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਲਈ ਵਰਤੀਆਂ) ਜ਼ਿਆਦਾ ਨਵੀਂ ਕਿਤਾਬ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਭੇਜਣ ਵਰਗੀਆਂ ਹਨ।
+#### ਟੈਕਸਟ ਦਿਖਾਉਣ ਦਾ ਸੁਰੱਖਿਅਤ ਤਰੀਕਾ: textContent
 
-| GET ਰਿਕਵੈਸਟ | POST ਰਿਕਵੈਸਟ |
-|-------------|-------------|
-| **ਉਦੇਸ਼** | ਮੌਜੂਦਾ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰੋ | ਸਰਵਰ ਨੂੰ ਨਵਾਂ ਡਾਟਾ ਭੇਜੋ |
-| **ਪੈਰਾਮੀਟਰਸ** | URL ਪਾਥ/ਕੁਐਰੀ ਸਟ੍ਰਿੰਗ ਵਿੱਚ | ਰਿਕਵੈਸਟ ਬਾਡੀ ਵਿੱਚ |
-| **ਕੈਸ਼ਿੰਗ** | ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੁਆਰਾ ਕੈਸ਼ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ | ਆਮ ਤੌਰ 'ਤੇ ਕੈਸ਼ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ |
-| **ਸੁਰੱਖਿਆ** | URL/ਲਾਗਸ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ | ਰਿਕਵੈਸਟ ਬਾਡੀ ਵਿੱਚ ਲੁਕਿਆ |
+[`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) ਪ੍ਰਾਪਰਟੀ ਤੁਹਾਡਾ ਸਭ ਤੋਂ ਵਧੀਆ ਸਾਥੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਉਪਭੋਗਤਾ ਡਾਟਾ ਦਿਖਾ ਰਹੇ ਹੋ। ਇਹ ਤੁਹਾਡੇ ਵੈੱਬਪੇਜ ਲਈ ਇੱਕ ਬਾਊਂਸਰ ਵਾਂਗ ਹੈ - ਕੁਝ ਵੀ ਹਾਨੀਕਾਰਕ ਅੰਦਰ ਨਹੀਂ ਆ ਸਕਦਾ:
 
-#### ਕਦਮ 3: ਸਭ ਕੁਝ ਇਕੱਠੇ ਲਿਆਉਣਾ
+```javascript
+// The safe, reliable way to update text
+const balanceElement = document.getElementById('balance');
+balanceElement.textContent = account.balance;
+```
+
+**textContent ਦੇ ਫਾਇਦੇ:**
+- ਹਰ ਚੀਜ਼ ਨੂੰ ਸਧਾਰਨ ਟੈਕਸਟ ਵਜੋਂ ਮੰਨਦਾ ਹੈ (ਸਕ੍ਰਿਪਟ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦਾ ਹੈ)
+- ਮੌਜੂਦਾ ਸਮੱਗਰੀ ਨੂੰ ਆਪਣੇ ਆਪ ਸਾਫ ਕਰਦਾ ਹੈ
+- ਸਧਾਰਨ ਟੈਕਸਟ ਅਪਡੇਟ ਲਈ ਕੁਸ਼ਲ
+- ਖਤਰਨਾਕ ਸਮੱਗਰੀ ਤੋਂ ਸੁਰੱਖਿਆ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
+
+#### ਗਤੀਸ਼ੀਲ HTML ਤੱਤ ਬਣਾਉਣਾ
 
-ਹੁਣ ਸੰਤੋਸ਼ਜਨਕ ਹਿੱਸਾ - ਆਓ ਆਪਣੇ ਖਾਤਾ
-ਜਟਿਲ ਸਮੱਗਰੀ ਲਈ, [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) ਨੂੰ [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) ਵਿਧੀ ਨਾਲ ਜੋੜੋ:
+ਜਟਿਲ ਸਮੱਗਰੀ ਲਈ, [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) ਨੂੰ [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) ਨਾਲ ਜੋੜੋ:
 
 ```javascript
 // Safe way to create new elements
@@ -196,29 +301,29 @@ transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
 container.append(transactionItem);
 ```
 
-**ਇਸ ਪਹੁੰਚ ਨੂੰ ਸਮਝਣਾ:**
-- **ਨਵੇਂ DOM ਤੱਤਾਂ** ਨੂੰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਰਾਹੀਂ ਬਣਾਉਣਾ
-- **ਤੱਤਾਂ ਦੇ ਗੁਣਾਂ ਅਤੇ ਸਮੱਗਰੀ** 'ਤੇ ਪੂਰਾ ਕੰਟਰੋਲ ਰੱਖਣਾ
-- **ਜਟਿਲ, nested ਤੱਤਾਂ ਦੇ ਢਾਂਚੇ** ਲਈ ਸਹਾਇਕ
-- **ਸੁਰੱਖਿਆ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ** ਸਮੱਗਰੀ ਨੂੰ ਢਾਂਚੇ ਤੋਂ ਵੱਖ ਕਰਕੇ
+**ਇਸ ਤਰੀਕੇ ਨੂੰ ਸਮਝਣਾ:**
+- **ਨਵੇਂ DOM ਤੱਤ** ਪ੍ਰੋਗਰਾਮਿੰਗ ਤਰੀਕੇ ਨਾਲ ਬਣਾਉਂਦਾ ਹੈ
+- **ਤੱਤਾਂ ਦੇ ਗੁਣ ਅਤੇ ਸਮੱਗਰੀ** 'ਤੇ ਪੂਰਾ ਕੰਟਰੋਲ ਰੱਖਦਾ ਹੈ
+- **ਜਟਿਲ, nested ਤੱਤਾਂ ਦੀ ਬਣਤਰ** ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ
+- **ਸੁਰੱਖਿਆ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ** ਸਮੱਗਰੀ ਨੂੰ ਬਣਤਰ ਤੋਂ ਵੱਖ ਕਰਕੇ
 
-> ⚠️ **ਸੁਰੱਖਿਆ ਦੇ ਮਸਲੇ**: ਜਦੋਂ ਕਿ [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) ਕਈ ਟਿਊਟੋਰਿਅਲ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਇਹ embedded ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਚਲਾਉਣ ਦੀ ਸਮਰੱਥਾ ਰੱਖਦਾ ਹੈ। ਜਿਵੇਂ CERN ਦੇ ਸੁਰੱਖਿਆ ਪ੍ਰੋਟੋਕੋਲ unauthorized ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦੇ ਹਨ, `textContent` ਅਤੇ `createElement` ਵਰਤਣਾ ਸੁਰੱਖਿਅਤ ਵਿਕਲਪ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
+> ⚠️ **ਸੁਰੱਖਿਆ ਵਿਚਾਰ**: ਜਦੋਂ ਕਿ [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) ਕਈ ਟਿਊਟੋਰਿਅਲ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਇਹ embedded ਸਕ੍ਰਿਪਟ ਚਲਾ ਸਕਦਾ ਹੈ। ਜਿਵੇਂ CERN ਦੇ ਸੁਰੱਖਿਆ ਪ੍ਰੋਟੋਕੋਲ unauthorized ਕੋਡ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦੇ ਹਨ, `textContent` ਅਤੇ `createElement` ਵਰਤਣਾ ਸੁਰੱਖਿਅਤ ਵਿਕਲਪ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
 > 
 **innerHTML ਦੇ ਖਤਰੇ:**
-- ਯੂਜ਼ਰ ਡਾਟਾ ਵਿੱਚ ਮੌਜੂਦ ਕਿਸੇ ਵੀ `<script>` ਟੈਗ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ
+- ਉਪਭੋਗਤਾ ਡਾਟਾ ਵਿੱਚ ਕੋਈ ਵੀ `<script>` ਟੈਗ ਚਲਾਉਂਦਾ ਹੈ
 - ਕੋਡ injection ਹਮਲਿਆਂ ਲਈ ਸੰਵੇਦਨਸ਼ੀਲ
-- ਸੁਰੱਖਿਆ ਦੇ ਸੰਭਾਵੀ ਖਤਰੇ ਪੈਦਾ ਕਰਦਾ ਹੈ
-- ਅਸੀਂ ਵਰਤ ਰਹੇ ਸੁਰੱਖਿਅਤ ਵਿਕਲਪ ਸਮਾਨ ਕਾਰਗੁਜ਼ਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ
+- ਸੁਰੱਖਿਆ ਦੀਆਂ ਸੰਭਾਵਨਾਵਾਂ ਪੈਦਾ ਕਰਦਾ ਹੈ
+- ਸੁਰੱਖਿਅਤ ਵਿਕਲਪ ਜੋ ਅਸੀਂ ਵਰਤ ਰਹੇ ਹਾਂ, ਸਮਾਨ ਕਾਰਜਸ਼ੀਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ
 
-### ਗਲਤੀਆਂ ਨੂੰ ਯੂਜ਼ਰ-ਫ੍ਰੈਂਡਲੀ ਬਣਾਉਣਾ
+### ਗਲਤੀਆਂ ਨੂੰ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸੌਖਾ ਬਣਾਉਣਾ
 
-ਵਰਤਮਾਨ ਵਿੱਚ, ਲੌਗਇਨ ਗਲਤੀਆਂ ਸਿਰਫ਼ ਬ੍ਰਾਊਜ਼ਰ ਕੌਂਸੋਲ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦੀਆਂ ਹਨ, ਜੋ ਯੂਜ਼ਰਾਂ ਲਈ ਅਦ੍ਰਿਸ਼ ਹੈ। ਜਿਵੇਂ ਕਿ ਇੱਕ ਪਾਇਲਟ ਦੇ ਅੰਦਰੂਨੀ ਡਾਇਗਨੋਸਟਿਕਸ ਅਤੇ ਯਾਤਰੀ ਜਾਣਕਾਰੀ ਪ੍ਰਣਾਲੀ ਦੇ ਵਿਚਕਾਰ ਫਰਕ ਹੁੰਦਾ ਹੈ, ਅਸੀਂ ਸਹੀ ਚੈਨਲ ਰਾਹੀਂ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸੰਚਾਰਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
+ਵਰਤਮਾਨ ਵਿੱਚ, ਲੌਗਇਨ ਗਲਤੀਆਂ ਸਿਰਫ ਬ੍ਰਾਊਜ਼ਰ ਕੌਂਸੋਲ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦੀਆਂ ਹਨ, ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਅਦ੍ਰਿਸ਼ ਹੈ। ਜਿਵੇਂ ਪਾਇਲਟ ਦੇ ਅੰਦਰੂਨੀ ਡਾਇਗਨੋਸਟਿਕਸ ਅਤੇ ਯਾਤਰੀ ਜਾਣਕਾਰੀ ਪ੍ਰਣਾਲੀ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਹੁੰਦਾ ਹੈ, ਸਾਨੂੰ ਉਚਿਤ ਚੈਨਲ ਰਾਹੀਂ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸੰਚਾਰਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
 
-ਦਿੱਖਤ ਗਲਤੀਆਂ ਦੇ ਸੁਨੇਹੇ ਲਾਗੂ ਕਰਨ ਨਾਲ ਯੂਜ਼ਰਾਂ ਨੂੰ ਤੁਰੰਤ ਫੀਡਬੈਕ ਮਿਲਦਾ ਹੈ ਕਿ ਕੀ ਗਲਤ ਹੋਇਆ ਅਤੇ ਅੱਗੇ ਕਿਵੇਂ ਵਧਣਾ ਹੈ।
+ਦਿੱਖਣਯੋਗ ਗਲਤੀਆਂ ਦੇ ਸੁਨੇਹੇ ਲਾਗੂ ਕਰਨ ਨਾਲ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਤੁਰੰਤ ਫੀਡਬੈਕ ਮਿਲਦਾ ਹੈ ਕਿ ਕੀ ਗਲਤ ਹੋਇਆ ਅਤੇ ਅੱਗੇ ਕਿਵੇਂ ਵਧਣਾ ਹੈ।
 
-#### ਪਹਲਾ ਕਦਮ: ਗਲਤੀ ਦੇ ਸੁਨੇਹਿਆਂ ਲਈ ਇੱਕ ਸਥਾਨ ਸ਼ਾਮਲ ਕਰੋ
+#### ਕਦਮ 1: ਗਲਤੀ ਦੇ ਸੁਨੇਹਿਆਂ ਲਈ ਇੱਕ ਜਗ੍ਹਾ ਸ਼ਾਮਲ ਕਰੋ
 
-ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ HTML ਵਿੱਚ ਗਲਤੀ ਦੇ ਸੁਨੇਹਿਆਂ ਲਈ ਇੱਕ ਸਥਾਨ ਦਿਓ। ਇਸ ਨੂੰ ਆਪਣੇ ਲੌਗਇਨ ਬਟਨ ਤੋਂ ਥੋੜ੍ਹਾ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਕਿ ਯੂਜ਼ਰ ਇਸ ਨੂੰ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਵੇਖ ਸਕਣ:
+ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਗਲਤੀ ਦੇ ਸੁਨੇਹਿਆਂ ਲਈ ਤੁਹਾਡੇ HTML ਵਿੱਚ ਇੱਕ ਜਗ੍ਹਾ ਬਣਾਈਏ। ਇਸਨੂੰ ਤੁਹਾਡੇ ਲੌਗਇਨ ਬਟਨ ਤੋਂ ਬਿਲਕੁਲ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਕਿ ਉਪਭੋਗਤਾ ਇਸਨੂੰ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਦੇਖ ਸਕਣ:
 
 ```html
 <!-- This is where error messages will appear -->
@@ -227,14 +332,14 @@ container.append(transactionItem);
 ```
 
 **ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- ਅਸੀਂ ਇੱਕ ਖਾਲੀ ਕੰਟੇਨਰ ਬਣਾਉਂਦੇ ਹਾਂ ਜੋ ਲੋੜ ਪੈਣ ਤੱਕ ਅਦ੍ਰਿਸ਼ ਰਹਿੰਦਾ ਹੈ
-- ਇਹ ਉਸ ਸਥਾਨ 'ਤੇ ਸਥਿਤ ਹੈ ਜਿੱਥੇ ਯੂਜ਼ਰ "Login" ਕਲਿੱਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਵੇਖਦੇ ਹਨ
+- ਅਸੀਂ ਇੱਕ ਖਾਲੀ ਕੰਟੇਨਰ ਬਣਾ ਰਹੇ ਹਾਂ ਜੋ ਲੋੜ ਪੈਣ ਤੱਕ ਅਦ੍ਰਿਸ਼ ਰਹੇਗਾ
+- ਇਹ ਉਥੇ ਸਥਿਤ ਹੈ ਜਿੱਥੇ ਉਪਭੋਗਤਾ "ਲੌਗਇਨ" ਕਲਿਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਦੇਖਦੇ ਹਨ
 - ਉਹ `role="alert"` ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਲਈ ਇੱਕ ਵਧੀਆ ਸਵਾਗਤ ਹੈ - ਇਹ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਨੂੰ ਦੱਸਦਾ ਹੈ "ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ!"
-- ਵਿਲੱਖਣ `id` ਸਾਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਇੱਕ ਆਸਾਨ ਟਾਰਗਟ ਦਿੰਦਾ ਹੈ
+- ਵਿਲੱਖਣ `id` ਸਾਡੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਇੱਕ ਆਸਾਨ ਟਾਰਗਟ ਦਿੰਦਾ ਹੈ
 
-#### ਦੂਜਾ ਕਦਮ: ਇੱਕ ਸਹਾਇਕ ਫੰਕਸ਼ਨ ਬਣਾਓ
+#### ਕਦਮ 2: ਇੱਕ ਸਹੂਲਤਦਾਇਕ ਸਹਾਇਕ ਫੰਕਸ਼ਨ ਬਣਾਓ
 
-ਆਓ ਇੱਕ ਛੋਟਾ ਯੂਟਿਲਿਟੀ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜੋ ਕਿਸੇ ਵੀ ਤੱਤ ਦੇ ਟੈਕਸਟ ਨੂੰ ਅਪਡੇਟ ਕਰ ਸਕੇ। ਇਹ ਉਹਨਾਂ "ਇੱਕ ਵਾਰ ਲਿਖੋ, ਹਰ ਜਗ੍ਹਾ ਵਰਤੋ" ਫੰਕਸ਼ਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਜੋ ਤੁਹਾਡੇ ਲਈ ਸਮਾਂ ਬਚਾਉਂਦੇ ਹਨ:
+ਆਓ ਇੱਕ ਛੋਟਾ utility function ਬਣਾਈਏ ਜੋ ਕਿਸੇ ਵੀ ਤੱਤ ਦੇ ਟੈਕਸਟ ਨੂੰ ਅਪਡੇਟ ਕਰ ਸਕੇ। ਇਹ ਉਹਨਾਂ "ਇੱਕ ਵਾਰ ਲਿਖੋ, ਹਰ ਜਗ੍ਹਾ ਵਰਤੋ" ਫੰਕਸ਼ਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ ਜੋ ਤੁਹਾਡਾ ਸਮਾਂ ਬਚਾਉਂਦੇ ਹਨ:
 
 ```javascript
 function updateElement(id, text) {
@@ -244,14 +349,14 @@ function updateElement(id, text) {
 ```
 
 **ਫੰਕਸ਼ਨ ਦੇ ਫਾਇਦੇ:**
-- ਸਿਰਫ਼ ਇੱਕ ਤੱਤ ID ਅਤੇ ਟੈਕਸਟ ਸਮੱਗਰੀ ਦੀ ਲੋੜ ਵਾਲਾ ਸਧਾਰਨ ਇੰਟਰਫੇਸ
-- ਸੁਰੱਖਿਅਤ ਤੌਰ 'ਤੇ DOM ਤੱਤਾਂ ਨੂੰ ਲੱਭਦਾ ਅਤੇ ਅਪਡੇਟ ਕਰਦਾ ਹੈ
-- ਕੋਡ ਦੀ ਦੁਹਰਾਈ ਨੂੰ ਘਟਾਉਣ ਵਾਲਾ ਦੁਬਾਰਾ ਵਰਤਣ ਯੋਗ ਪੈਟਰਨ
+- ਸਿਰਫ ਇੱਕ ਤੱਤ ID ਅਤੇ ਟੈਕਸਟ ਸਮੱਗਰੀ ਦੀ ਲੋੜ ਵਾਲਾ ਸਧਾਰਨ ਇੰਟਰਫੇਸ
+- DOM ਤੱਤਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਨਾਲ ਲੱਭਦਾ ਅਤੇ ਅਪਡੇਟ ਕਰਦਾ ਹੈ
+- ਦੁਹਰਾਈ ਗਈ ਕੋਡ ਨੂੰ ਘਟਾਉਣ ਵਾਲਾ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਪੈਟਰਨ
 - ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸਥਿਰ ਅਪਡੇਟਿੰਗ ਵਿਹਾਰ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ
 
-#### ਤੀਜਾ ਕਦਮ: ਗਲਤੀਆਂ ਦਿਖਾਓ ਜਿੱਥੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਦਿਖਾਈ ਦੇਣ
+#### ਕਦਮ 3: ਗਲਤੀਆਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਦਿਖਾਓ
 
-ਹੁਣ ਆਓ ਉਸ ਲੁਕਾਈ ਹੋਈ ਕੌਂਸੋਲ ਸੁਨੇਹੇ ਨੂੰ ਕੁਝ ਅਜਿਹਾ ਨਾਲ ਬਦਲੋ ਜੋ ਯੂਜ਼ਰ ਵਾਸਤਵ ਵਿੱਚ ਵੇਖ ਸਕਣ। ਆਪਣੇ ਲੌਗਇਨ ਫੰਕਸ਼ਨ ਨੂੰ ਅਪਡੇਟ ਕਰੋ:
+ਹੁਣ ਆਓ ਉਸ ਲੁਕਵੇਂ ਕੌਂਸੋਲ ਸੁਨੇਹੇ ਨੂੰ ਕੁਝ ਅਜਿਹਾ ਨਾਲ ਬਦਲੋ ਜੋ ਉਪਭੋਗਤਾ ਅਸਲ ਵਿੱਚ ਦੇਖ ਸਕਦੇ ਹਨ। ਆਪਣਾ ਲੌਗਇਨ ਫੰਕਸ਼ਨ ਅਪਡੇਟ ਕਰੋ:
 
 ```javascript
 // Instead of just logging to console, show the user what's wrong
@@ -260,63 +365,76 @@ if (data.error) {
 }
 ```
 
-**ਇਹ ਛੋਟਾ ਬਦਲਾਅ ਵੱਡਾ ਅੰਤਰ ਪੈਦਾ ਕਰਦਾ ਹੈ:**
-- ਗਲਤੀ ਦੇ ਸੁਨੇਹੇ ਸਿੱਧੇ ਜਿੱਥੇ ਯੂਜ਼ਰ ਵੇਖ ਰਹੇ ਹਨ ਉੱਪਰ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ
-- ਕੋਈ ਹੋਰ ਰਹੱਸਮਈ ਚੁੱਪ ਫੇਲ੍ਹ ਨਹੀਂ
-- ਯੂਜ਼ਰਾਂ ਨੂੰ ਤੁਰੰਤ, ਕਾਰਵਾਈਯੋਗ ਫੀਡਬੈਕ ਮਿਲਦਾ ਹੈ
+**ਇਹ ਛੋਟਾ ਬਦਲਾਅ ਵੱਡਾ ਅਸਰ ਪੈਦਾ ਕਰਦਾ ਹੈ:**
+- ਗਲਤੀ ਦੇ ਸੁਨੇਹੇ ਉਥੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਜਿੱਥੇ ਉਪਭੋਗਤਾ ਦੇਖ ਰਹੇ ਹਨ
+- ਕੋਈ ਹੋਰ ਅਜਿਹੇ ਮੌਨ ਫੇਲ ਨਹੀਂ
+- ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਤੁਰੰਤ, ਕਾਰਵਾਈਯੋਗ ਫੀਡਬੈਕ ਮਿਲਦਾ ਹੈ
 - ਤੁਹਾਡਾ ਐਪ ਪੇਸ਼ੇਵਰ ਅਤੇ ਸੋਚਵਾਨ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ
 
-ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਅਵੈਧ ਖਾਤੇ ਨਾਲ ਟੈਸਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਪੇਜ 'ਤੇ ਇੱਕ ਸਹਾਇਕ ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ!
+ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਅਵੈਧ ਖਾਤੇ ਨਾਲ ਟੈਸਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਪੰਨੇ 'ਤੇ ਇੱਕ ਸਹਾਇਕ ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ!
 
-![ਲੌਗਇਨ ਦੌਰਾਨ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਗਲਤੀ ਸੁਨੇਹੇ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.pa.png)
+![ਲੌਗਇਨ ਦੌਰਾਨ ਦਿਖਾਈ ਗਈ ਗਲਤੀ ਸੁਨੇਹੇ ਨੂੰ ਦਿਖਾਉਣ ਵਾਲਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.pa.png)
 
-#### ਚੌਥਾ ਕਦਮ: ਪਹੁੰਚਯੋਗਤਾ ਨਾਲ ਸਮਰਪਿਤ ਹੋਣਾ
+#### ਕਦਮ 4: ਪਹੁੰਚਯੋਗਤਾ ਨਾਲ ਸਮਰਪਿਤ ਹੋਣਾ
 
-ਇੱਥੇ ਕੁਝ ਵਧੀਆ ਹੈ ਜੋ ਅਸੀਂ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕੀਤੇ `role="alert"` ਬਾਰੇ ਹੈ - ਇਹ ਸਿਰਫ਼ ਸਜਾਵਟ ਨਹੀਂ ਹੈ! ਇਹ ਛੋਟਾ ਗੁਣ ਇੱਕ [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਤੁਰੰਤ ਬਦਲਾਅ ਦੀ ਘੋਸ਼ਣਾ ਕਰਦਾ ਹੈ:
+ਇੱਥੇ ਕੁਝ ਵਧੀਆ ਹੈ ਜੋ ਅਸੀਂ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕੀਤਾ `role="alert"` - ਇਹ ਸਿਰਫ ਸਜਾਵਟ ਨਹੀਂ ਹੈ! ਇਹ ਛੋਟਾ attribute [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨੂੰ ਤੁਰੰਤ ਬਦਲਾਅ ਦਾ ਐਲਾਨ ਕਰਦਾ ਹੈ:
 
 ```html
 <div id="loginError" role="alert"></div>
 ```
 
 **ਇਸਦਾ ਮਹੱਤਵ ਕਿਉਂ ਹੈ:**
-- ਸਕ੍ਰੀਨ ਰੀਡਰ ਯੂਜ਼ਰ ਗਲਤੀ ਸੁਨੇਹਾ ਸੁਣਦੇ ਹਨ ਜਿਵੇਂ ਹੀ ਇਹ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
+- ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਗਲਤੀ ਸੁਨੇਹਾ ਤੁਰੰਤ ਸੁਣਾਈ ਦਿੰਦਾ ਹੈ
 - ਹਰ ਕੋਈ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਚਾਹੇ ਉਹ ਕਿਵੇਂ ਵੀ ਨੈਵੀਗੇਟ ਕਰਦੇ ਹਨ
-- ਇਹ ਤੁਹਾਡੇ ਐਪ ਨੂੰ ਹੋਰ ਲੋਕਾਂ ਲਈ ਕੰਮ ਕਰਨ ਲਈ ਸਧਾਰਨ ਤਰੀਕਾ ਹੈ
-- ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਸਮੇਤਕ ਅਨੁਭਵ ਬਣਾਉਣ ਦੀ ਚਿੰਤਾ ਕਰਦੇ ਹੋ
+- ਇਹ ਤੁਹਾਡਾ ਐਪ ਹੋਰ ਲੋਕਾਂ ਲਈ ਕੰਮ ਕਰਨ ਲਈ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ
+- ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਸਮਰਪਿਤ ਤਜਰਬੇ ਬਣਾਉਣ ਦੀ ਚਿੰਤਾ ਕਰਦੇ ਹੋ
+
+ਇਹ ਛੋਟੀਆਂ ਛੋਟੀਆਂ ਗੱਲਾਂ ਚੰਗੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਮਹਾਨ ਡਿਵੈਲਪਰਾਂ ਤੋਂ ਵੱਖ ਕਰਦੀਆਂ ਹਨ!
+
+### 🎯 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ: ਪ੍ਰਮਾਣਿਕਤਾ ਪੈਟਰਨ
+
+**ਰੁਕੋ ਅਤੇ ਵਿਚਾਰ ਕਰੋ**: ਤੁਸੀਂ ਹੁਣੇ ਹੀ ਇੱਕ ਪੂਰੀ ਪ੍ਰਮਾਣਿਕਤਾ ਪ੍ਰਵਾਹ ਲਾਗੂ ਕੀਤਾ ਹੈ। ਇਹ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਇੱਕ ਮੂਲ ਪੈਟਰਨ ਹੈ।
+
+**ਤੁਰੰਤ ਸਵੈ-ਮੁਲਾਂਕਣ**:
+- ਕੀ ਤੁਸੀਂ ਸਮਝਾ ਸਕਦੇ ਹੋ ਕਿ ਅਸੀਂ API ਕਾਲਾਂ ਲਈ async/await ਕਿਉਂ ਵਰਤਦੇ ਹਾਂ?
+- ਕੀ ਹੋਵੇਗਾ ਜੇ ਅਸੀਂ `encodeURIComponent()` ਫੰਕਸ਼ਨ ਭੁੱਲ ਜਾਵਾਂ?
+- ਸਾਡਾ ਗਲਤੀ ਸੰਭਾਲਣ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਕਿਵੇਂ ਸੁਧਾਰਦਾ ਹੈ?
 
-ਇਹ ਛੋਟੀਆਂ ਛੋਟੀਆਂ ਗੱਲਾਂ ਚੰਗੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਵਧੀਆ ਡਿਵੈਲਪਰਾਂ ਤੋਂ ਵੱਖ ਕਰਦੀਆਂ ਹਨ!
+**ਅਸਲ-ਦੁਨੀਆ ਕਨੈਕਸ਼ਨ**: ਤੁਸੀਂ ਇੱਥੇ ਸਿੱਖੇ ਪੈਟਰਨ (async ਡਾਟਾ ਫੈਚਿੰਗ, ਗਲਤੀ ਸੰਭਾਲਣ, ਉਪਭੋਗਤਾ ਫੀਡਬੈਕ) ਹਰ ਵੱਡੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵਰਤਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਸੋਸ਼ਲ ਮੀਡੀਆ ਪਲੇਟਫਾਰਮ ਤੋਂ ਈ-ਕਾਮਰਸ ਸਾਈਟਾਂ ਤੱਕ। ਤੁਸੀਂ ਉਤਪਾਦਨ-ਪੱਧਰ ਦੀਆਂ ਹੁਨਰਾਂ ਬਣਾਉਂਦੇ ਹੋ!
 
-#### ਪੰਜਵਾਂ ਕਦਮ: ਰਜਿਸਟ੍ਰੇਸ਼ਨ 'ਤੇ ਇੱਕੋ ਪੈਟਰਨ ਲਾਗੂ ਕਰੋ
+**ਚੁਣੌਤੀ ਪ੍ਰਸ਼ਨ**: ਤੁਸੀਂ ਇਸ ਪ੍ਰਮਾਣਿਕਤਾ ਪ੍ਰਣਾਲੀ ਨੂੰ ਕਈ ਉਪਭੋਗਤਾ ਭੂਮਿਕਾਵਾਂ (ਗਾਹਕ, ਐਡਮਿਨ, ਟੈਲਰ) ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕਿਵੇਂ ਸੋਧ ਸਕਦੇ ਹੋ? ਡਾਟਾ ਬਣਤਰ ਅਤੇ UI ਬਦਲਾਅ ਬਾਰੇ ਸੋਚੋ।
 
-ਸਥਿਰਤਾ ਲਈ, ਆਪਣੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਵਿੱਚ ਇੱਕੋ ਗਲਤੀ ਸੰਭਾਲ ਪੈਟਰਨ ਲਾਗੂ ਕਰੋ:
+#### ਕਦਮ 5: ਰਜਿਸਟਰੇਸ਼ਨ 'ਤੇ ਇੱਕੋ ਪੈਟਰਨ ਲਾਗੂ ਕਰੋ
 
-1. **ਸ਼ਾਮਲ ਕਰੋ** ਇੱਕ ਗਲਤੀ ਡਿਸਪਲੇ ਤੱਤ ਆਪਣੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ HTML ਵਿੱਚ:
+ਸਥਿਰਤਾ ਲਈ, ਆਪਣੇ ਰਜਿਸਟਰੇਸ਼ਨ ਫਾਰਮ ਵਿੱਚ ਇੱਕੋ ਜਿਹੇ ਗਲਤੀ ਸੰਭਾਲਣ ਨੂੰ ਲਾਗੂ ਕਰੋ:
+
+1. **ਸ਼ਾਮਲ ਕਰੋ** ਰਜਿਸਟਰੇਸ਼ਨ HTML ਵਿੱਚ ਗਲਤੀ ਦਿਖਾਉਣ ਵਾਲਾ ਤੱਤ:
 ```html
 <div id="registerError" role="alert"></div>
 ```
 
-2. **ਅਪਡੇਟ ਕਰੋ** ਆਪਣਾ ਰਜਿਸਟਰ ਫੰਕਸ਼ਨ ਇੱਕੋ ਗਲਤੀ ਡਿਸਪਲੇ ਪੈਟਰਨ ਵਰਤਣ ਲਈ:
+2. **ਅਪਡੇਟ ਕਰੋ** ਆਪਣਾ ਰਜਿਸਟਰ ਫੰਕਸ਼ਨ ਇੱਕੋ ਜਿਹੇ ਗਲਤੀ ਦਿਖਾਉਣ ਵਾਲੇ ਪੈਟਰਨ ਨੂੰ ਵਰਤਣ ਲਈ:
 ```javascript
 if (data.error) {
   return updateElement('registerError', data.error);
 }
 ```
 
-**ਸਥਿਰ ਗਲਤੀ ਸੰਭਾਲ ਦੇ ਫਾਇਦੇ:**
-- **ਸਮਾਨ ਯੂਜ਼ਰ ਅਨੁਭਵ** ਸਾਰੇ ਫਾਰਮਾਂ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
-- **ਜਾਣਕਾਰੀ ਦਾ ਬੋਝ ਘਟਾਉਂਦਾ** ਹੈ ਜਾਣ-ਪਛਾਣ ਵਾਲੇ ਪੈਟਰਨ ਵਰਤ ਕੇ
-- **ਰੱਖ-ਰਖਾਵ ਨੂੰ ਸਧਾਰਨ ਬਣਾਉਂਦਾ** ਦੁਬਾਰਾ ਵਰਤਣ ਯੋਗ ਕੋਡ ਨਾਲ
-- **ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ** ਐਪ ਵਿੱਚ
+**ਸਥਿਰ ਗਲਤੀ ਸੰਭਾਲਣ ਦੇ ਫਾਇਦੇ:**
+- **ਇੱਕੋ ਜਿਹੇ** ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਸਾਰੇ ਫਾਰਮਾਂ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
+- **ਮਾਨਸਿਕ ਬੋਝ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ** ਜਾਣ-ਪਛਾਣ ਵਾਲੇ ਪੈਟਰਨ ਵਰਤ ਕੇ
+- **ਰਖਰਖਾਅ ਨੂੰ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ** ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਕੋਡ ਨਾਲ
+- **ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ** ਐਪ ਵਿੱਚ
 
-## ਤੁਹਾਡਾ ਡਾਇਨਾਮਿਕ ਡੈਸ਼ਬੋਰਡ ਬਣਾਉਣਾ
+## ਆਪਣਾ ਗਤੀਸ਼ੀਲ ਡੈਸ਼ਬੋਰਡ ਬਣਾਉਣਾ
 
-ਹੁਣ ਅਸੀਂ ਤੁਹਾਡੇ ਸਥਿਰ ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਇੱਕ ਡਾਇਨਾਮਿਕ ਇੰਟਰਫੇਸ ਵਿੱਚ ਬਦਲਾਂਗੇ ਜੋ ਅਸਲ ਖਾਤੇ ਦੇ ਡਾਟਾ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ। ਜਿਵੇਂ ਕਿ ਇੱਕ ਪ੍ਰਿੰਟ ਕੀਤੀ ਗਈ ਫਲਾਈਟ ਸ਼ਡਿਊਲ ਅਤੇ ਹਵਾਈ ਅੱਡਿਆਂ 'ਤੇ ਲਾਈਵ ਡਿਪਾਰਚਰ ਬੋਰਡਾਂ ਦੇ ਵਿਚਕਾਰ ਫਰਕ ਹੁੰਦਾ ਹੈ, ਅਸੀਂ ਸਥਿਰ ਜਾਣਕਾਰੀ ਤੋਂ ਰੀਅਲ-ਟਾਈਮ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਡਿਸਪਲੇਜ਼ ਵੱਲ ਜਾ ਰਹੇ ਹਾਂ।
+ਹੁਣ ਅਸੀਂ ਤੁਹਾਡੇ ਸਥਿਰ ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਇੱਕ ਗਤੀਸ਼ੀਲ ਇੰਟਰਫੇਸ ਵਿੱਚ ਬਦਲਾਂਗੇ ਜੋ ਅਸਲ ਖਾਤੇ ਦੇ ਡਾਟਾ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ। ਜਿਵੇਂ ਕਿ ਛਪੇ ਹੋਏ ਫਲਾਈਟ ਸ਼ਡਿਊਲ ਅਤੇ ਹਵਾਈ ਅੱਡਿਆਂ 'ਤੇ ਲਾਈਵ ਡਿਪਾਰਚਰ ਬੋਰਡਾਂ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਹੁੰਦਾ ਹੈ, ਅਸੀਂ ਸਥਿਰ ਜਾਣਕਾਰੀ ਤੋਂ ਅਸਲ-ਸਮੇਂ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਡਿਸਪਲੇਅ ਵੱਲ ਜਾ ਰਹੇ ਹਾਂ।
 
-ਤੁਹਾਡੇ ਸਿੱਖੇ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਅਸੀਂ ਇੱਕ ਡੈਸ਼ਬੋਰਡ ਬਣਾਵਾਂਗੇ ਜੋ ਮੌਜੂਦਾ ਖਾਤੇ ਦੀ ਜਾਣਕਾਰੀ ਨਾਲ ਆਪਣੇ ਆਪ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ।
+DOM ਮੈਨਿਪੁਲੇਸ਼ਨ ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਅਸੀਂ ਇੱਕ ਡੈਸ਼ਬੋਰਡ ਬਣਾਵਾਂਗੇ ਜੋ ਮੌਜੂਦਾ ਖਾਤੇ ਦੀ ਜਾਣਕਾਰੀ ਨਾਲ ਆਪਣੇ ਆਪ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ।
 
 ### ਤੁਹਾਡੇ ਡਾਟਾ ਨੂੰ ਜਾਣਨਾ
 
-ਅਸੀਂ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਵੇਖੀਏ ਕਿ ਤੁਹਾਡਾ ਸਰਵਰ ਵਾਪਸ ਕੀ ਕਿਸਮ ਦਾ ਡਾਟਾ ਭੇਜਦਾ ਹੈ। ਜਦੋਂ ਕੋਈ ਸਫਲਤਾਪੂਰਵਕ ਲੌਗਇਨ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਹੈ ਉਹ ਖਜ਼ਾਨਾ ਜੋ ਤੁਹਾਨੂੰ ਕੰਮ ਕਰਨ ਲਈ ਮਿਲਦਾ ਹੈ:
+ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਦੇਖੀਏ ਕਿ ਤੁਹਾਡਾ ਸਰਵਰ ਕਿਸ ਤਰ੍ਹਾਂ ਦਾ ਡਾਟਾ ਵਾਪਸ ਭੇਜਦਾ ਹੈ। ਜਦੋਂ ਕੋਈ ਸਫਲਤਾਪੂਰਵਕ ਲੌਗਇਨ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਹੈਰਾਨੀਜਨਕ ਜਾਣਕਾਰੀ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਕੰਮ ਕਰਨ ਲਈ ਮਿਲਦੀ ਹੈ:
 
 ```json
 {
@@ -332,30 +450,46 @@ if (data.error) {
 }
 ```
 
-**ਇਹ ਡਾਟਾ ਸਟ੍ਰਕਚਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:**
-- **`user`**: ਅਨੁਭਵ ਨੂੰ ਨਿੱਜੀ ਬਣਾਉਣ ਲਈ ਬਹੁਤ ਵਧੀਆ ("Welcome back, Sarah!")
+**ਇਹ ਡਾਟਾ ਬਣਤਰ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ:**
+- **`user`**: ਅਨੁਭਵ ਨੂੰ ਨਿੱਜੀ ਬਣਾਉਣ ਲਈ ਬੇਹਤਰੀਨ ("ਸਵਾਗਤ ਹੈ, ਸਾਰਾ!")
 - **`currency`**: ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਅਸੀਂ ਪੈਸੇ ਦੀ ਮਾਤਰਾ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਈਏ
 - **`description`**: ਖਾਤੇ ਲਈ ਇੱਕ ਦੋਸਤਾਨਾ ਨਾਮ
 - **`balance`**: ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਮੌਜੂਦਾ ਬਕਾਇਆ
-- **`transactions`**: ਪੂਰੀ ਲੈਣ-ਦੇਣ ਦੀ ਇਤਿਹਾਸ ਸਾਰੇ ਵੇਰਵਿਆਂ ਨਾਲ
+- **`transactions`**: ਪੂਰੀ ਲੈਣ-ਦੇਣ ਇਤਿਹਾਸ ਸਾਰੇ ਵੇਰਵੇ ਨਾਲ
 
 ਤੁਹਾਡੇ ਲਈ ਇੱਕ ਪੇਸ਼ੇਵਰ-ਦਿੱਖ ਵਾਲਾ ਬੈਂਕਿੰਗ ਡੈਸ਼ਬੋਰਡ ਬਣਾਉਣ ਲਈ ਸਭ ਕੁਝ!
 
-> 💡 **ਪ੍ਰੋ ਟਿਪ**: ਕੀ ਤੁਸੀਂ ਆਪਣਾ ਡੈਸ਼ਬੋਰਡ ਤੁਰੰਤ ਕਾਰਵਾਈ ਵਿੱਚ ਵੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਜਦੋਂ ਤੁਸੀਂ ਲੌਗਇਨ ਕਰਦੇ ਹੋ ਤਾਂ ਯੂਜ਼ਰਨਾਮ `test` ਵਰਤੋ - ਇਹ ਨਮੂਨਾ ਡਾਟਾ ਨਾਲ ਪਹਿਲਾਂ ਹੀ ਲੋਡ ਕੀਤਾ ਆਉਂਦਾ ਹੈ ਤਾਂ ਕਿ ਤੁਸੀਂ ਸਭ ਕੁਝ ਕੰਮ ਕਰਦੇ ਵੇਖ ਸਕੋ ਬਿਨਾਂ ਪਹਿਲਾਂ ਲੈਣ-ਦੇਣ ਬਣਾਉਣ ਦੀ ਲੋੜ।
-> 
+```mermaid
+flowchart TD
+    A[User Login] --> B[Fetch Account Data]
+    B --> C{Data Valid?}
+    C -->|Yes| D[Store in Global Variable]
+    C -->|No| E[Show Error Message]
+    D --> F[Navigate to Dashboard]
+    F --> G[Update UI Elements]
+    G --> H[Display Balance]
+    G --> I[Show Description]
+    G --> J[Render Transactions]
+    J --> K[Create Table Rows]
+    K --> L[Format Currency]
+    L --> M[User Sees Live Data]
+```
+
+> 💡 **ਵਧੀਆ ਸੁਝਾਅ**: ਕੀ ਤੁਸੀਂ ਆਪਣਾ ਡੈਸ਼ਬੋਰਡ ਤੁਰੰਤ ਕੰਮ ਕਰਦੇ ਹੋਵੇਗਾ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਲੌਗਇਨ ਕਰਦੇ ਸਮੇਂ `test` ਯੂਜ਼ਰਨੇਮ ਵਰਤੋ - ਇਹ ਪਹਿਲਾਂ ਹੀ ਨਮੂਨਾ ਡਾਟਾ ਨਾਲ ਲੋਡ ਕੀਤਾ ਹੁੰਦਾ ਹੈ ਤਾਂ ਕਿ ਤੁਸੀਂ ਸਭ ਕੁਝ ਕੰਮ ਕਰਦੇ ਹੋਵੇਗਾ ਦੇਖ ਸਕੋ ਬਿਨਾਂ ਪਹਿਲਾਂ ਲੈਣ-ਦੇਣ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੋਵੇ।
+
 **ਟੈਸਟ ਖਾਤਾ ਕਿਉਂ ਸਹਾਇਕ ਹੈ:**
-- ਪਹਿਲਾਂ ਹੀ ਲੋਡ ਕੀਤੇ ਗਏ ਹਕੀਕਤੀ ਨਮੂਨਾ ਡਾਟਾ ਨਾਲ ਆਉਂਦਾ ਹੈ
-- ਲੈਣ-ਦੇਣ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਇਹ ਵੇਖਣ ਲਈ ਬਹੁਤ ਵਧੀਆ
+- ਪਹਿਲਾਂ ਹੀ ਹਕੀਕਤੀ ਨਮੂਨਾ ਡਾਟਾ ਨਾਲ ਲੋਡ ਕੀਤਾ ਗਿਆ ਹੈ
+- ਲੈਣ-ਦੇਣ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਇਹ ਦੇਖਣ ਲਈ ਬੇਹਤਰੀਨ
 - ਤੁਹਾਡੇ ਡੈਸ਼ਬੋਰਡ ਫੀਚਰਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਵਧੀਆ
-- ਤੁਹਾਨੂੰ ਹੱਥੋਂ ਨਕਲੀ ਡਾਟਾ ਬਣਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ
+- ਤੁਹਾਨੂੰ ਮੈਨੁਅਲ ਤੌਰ 'ਤੇ ਨਕਲੀ ਡਾਟਾ ਬਣਾਉਣ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ
 
-### ਡੈਸ਼ਬੋਰਡ ਡਿਸਪਲੇ ਤੱਤ ਬਣਾਉਣਾ
+### ਡੈਸ਼ਬੋਰਡ ਡਿਸਪਲੇਅ ਤੱਤ ਬਣਾਉਣਾ
 
-ਆਓ ਤੁਹਾਡੇ ਡੈਸ਼ਬੋਰਡ ਇੰਟਰਫੇਸ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਬਣਾਈਏ, ਖਾਤੇ ਦੀ ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਤੋਂ ਸ਼ੁਰੂ ਕਰਕੇ ਅਤੇ ਫਿਰ ਲੈਣ-ਦੇਣ ਦੀ ਸੂਚੀ ਵਰਗੇ ਹੋਰ ਜਟਿਲ ਫੀਚਰਾਂ ਵੱਲ ਵਧਦੇ ਹੋਏ।
+ਆਓ ਤੁਹਾਡੇ ਡੈਸ਼ਬੋਰਡ ਇੰਟਰਫੇਸ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਬਣਾਈਏ, ਖਾਤੇ ਦੇ ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ ਅਤੇ ਫਿਰ ਜਟਿਲ ਫੀਚਰਾਂ ਵੱਲ ਜਾ ਰਹੇ ਹਾਂ ਜਿਵੇਂ ਕਿ ਲੈਣ-ਦੇਣ ਦੀਆਂ ਸੂਚੀਆਂ।
 
-#### ਪਹਿਲਾ ਕਦਮ: ਆਪਣੇ HTML ਢਾਂਚੇ ਨੂੰ ਅਪਡੇਟ ਕਰੋ
+#### ਕਦਮ 1: ਆਪਣੀ HTML ਬਣਤਰ ਨੂੰ ਅਪਡੇਟ ਕਰੋ
 
-ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਸਥਿਰ "Balance" ਸੈਕਸ਼ਨ ਨੂੰ ਡਾਇਨਾਮਿਕ ਪਲੇਸਹੋਲਡਰ ਤੱਤਾਂ ਨਾਲ ਬਦਲੋ ਜੋ ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਭਰ ਸਕੇ:
+ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਸਥਿਰ "ਬਕਾਇਆ" ਸੈਕਸ਼ਨ ਨੂੰ ਗਤੀਸ਼ੀਲ ਪਲੇਸਹੋਲਡਰ ਤੱਤਾਂ ਨਾਲ ਬਦਲੋ ਜੋ ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਭਰ ਸਕੇ:
 
 ```html
 <section>
@@ -363,91 +497,142 @@ if (data.error) {
 </section>
 ```
 
-ਅਗਲੇ, ਖਾਤੇ ਦੇ ਵੇਰਵੇ ਲਈ ਇੱਕ ਸੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ। ਕਿਉਂਕਿ ਇਹ ਡੈਸ਼ਬੋਰਡ ਸਮੱਗਰੀ ਲਈ ਇੱਕ ਸਿਰਲੇਖ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ, semantic HTML ਵਰਤੋ:
+ਅਗਲੇ ਕਦਮ ਵਿੱਚ, ਖ
+> ⚡ **ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) ਬੋਇੰਗ ਦੇ ਅਸੈਂਬਲੀ ਪ੍ਰਕਿਰਿਆ ਵਾਂਗ ਕੰਮ ਕਰਦਾ ਹੈ - ਹਿੱਸੇ ਮੁੱਖ ਲਾਈਨ ਤੋਂ ਬਾਹਰ ਤਿਆਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਫਿਰ ਪੂਰੇ ਯੂਨਿਟ ਵਜੋਂ ਇੰਸਟਾਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਇਹ ਬੈਚਿੰਗ ਪਹੁੰਚ DOM ਰੀਫਲੋਜ਼ ਨੂੰ ਘਟਾਉਂਦੀ ਹੈ ਇੱਕੋ ਵਾਰ ਡਾਲਣ ਨਾਲ ਬਜਾਏ ਕਈ ਵੱਖ-ਵੱਖ ਕਾਰਵਾਈਆਂ ਦੇ।
 
-```html
-<h2 id="description"></h2>
+### ਕਦਮ 5: ਮਿਕਸਡ ਸਮੱਗਰੀ ਲਈ ਅਪਡੇਟ ਫੰਕਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਬਣਾਓ
+
+ਤੁਹਾਡਾ `updateElement()` ਫੰਕਸ਼ਨ ਇਸ ਸਮੇਂ ਸਿਰਫ਼ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨੂੰ ਹੀ ਸੰਭਾਲਦਾ ਹੈ। ਇਸਨੂੰ ਟੈਕਸਟ ਅਤੇ DOM ਨੋਡ ਦੋਵਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਅਪਡੇਟ ਕਰੋ:
+
+```javascript
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
 ```
 
-**HTML ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ:**
-- **ਅਲੱਗ `<span>` ਤੱਤਾਂ** ਨੂੰ ਬਕਾਇਆ ਅਤੇ ਮੁਦਰਾ ਲਈ ਵਿਅਕਤੀਗਤ ਕੰਟਰੋਲ ਲਈ ਵਰਤਦਾ ਹੈ
-- **ਹਰ ਤੱਤ ਲਈ ਵਿਲੱਖਣ IDs** ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਟਾਰਗਟਿੰਗ ਲਈ ਲਾਗੂ ਕਰਦਾ ਹੈ
-- **semantic HTML ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ** `<h2>` ਨੂੰ ਖਾਤੇ ਦੇ ਵੇਰਵੇ ਲਈ ਵਰਤ ਕੇ
-- **ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਅਤੇ SEO ਲਈ ਤਰਕਸੰਗਤ ਹਾਇਰਾਰਕੀ ਬਣਾਉਂਦਾ ਹੈ
+**ਇਸ ਅਪਡੇਟ ਵਿੱਚ ਮੁੱਖ ਸੁਧਾਰ:**
+- **ਮੌਜੂਦਾ ਸਮੱਗਰੀ ਨੂੰ ਸਾਫ਼ ਕਰਦਾ ਹੈ** ਨਵੀਂ ਸਮੱਗਰੀ ਜੋੜਨ ਤੋਂ ਪਹਿਲਾਂ
+- **ਟੈਕਸਟ ਸਟ੍ਰਿੰਗ ਜਾਂ DOM ਨੋਡ ਦੋਵਾਂ ਨੂੰ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਸਵੀਕਾਰਦਾ ਹੈ**
+- **ਲਚਕਤਾ ਲਈ** [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ
+- **ਮੌਜੂਦਾ ਟੈਕਸਟ-ਅਧਾਰਿਤ ਵਰਤੋਂ ਨਾਲ ਪਿਛਲੇ ਅਨੁਕੂਲਤਾ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ**
 
-> ✅ **ਪਹੁੰਚਯੋਗਤਾ ਦੀ ਜਾਣਕਾਰੀ**: ਖਾਤੇ ਦਾ ਵੇਰਵਾ ਡੈਸ਼ਬੋਰਡ ਸਮੱਗਰੀ ਲਈ ਸਿਰਲੇਖ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਇਸ ਨੂੰ ਸਿਰਲੇਖ ਵਜੋਂ semantic ਤੌਰ 'ਤੇ ਮਾਰਕ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਾਨੋ ਕਿ ਕਿਵੇਂ [heading structure](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ। ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਪੇਜ 'ਤੇ ਹੋਰ ਤੱਤਾਂ ਦੀ ਪਛਾਣ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਸਿਰਲੇਖ ਟੈਗਾਂ ਤੋਂ ਲਾਭ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ?
+### ਆਪਣੇ ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਟੈਸਟ ਕਰਨ ਲਈ ਤਿਆਰ
 
-#### ਦੂਜਾ ਕਦਮ: ਡੈਸ਼ਬੋਰਡ ਅਪਡੇਟ ਫੰਕਸ਼ਨ ਬਣਾਓ
+ਸੱਚਾਈ ਦਾ ਸਮਾਂ! ਆਓ ਆਪਣੇ ਡਾਇਨਾਮਿਕ ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਵੇਖੀਏ:
 
-ਹੁਣ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਤੁਹਾਡੇ ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਅਸਲ ਖਾਤੇ ਦੇ ਡਾਟਾ ਨਾਲ ਭਰਦਾ ਹੈ:
+1. `test` ਖਾਤੇ ਨਾਲ ਲੌਗਇਨ ਕਰੋ (ਇਸ ਵਿੱਚ ਨਮੂਨਾ ਡਾਟਾ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਤਿਆਰ ਹੈ)
+2. ਆਪਣੇ ਡੈਸ਼ਬੋਰਡ ਤੇ ਜਾਓ
+3. ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਲੈਣ-ਦੇਣ ਦੀਆਂ ਲਾਈਨਾਂ ਸਹੀ ਫਾਰਮੈਟਿੰਗ ਨਾਲ ਦਿਖਾਈ ਦੇ ਰਹੀਆਂ ਹਨ
+4. ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤਾਰੀਖਾਂ, ਵੇਰਵੇ, ਅਤੇ ਰਕਮਾਂ ਸਹੀ ਦਿਖ ਰਹੀਆਂ ਹਨ
 
-```javascript
-function updateDashboard() {
-  if (!account) {
-    return navigate('/login');
-  }
+ਜੇਕਰ ਸਭ ਕੁਝ ਸਹੀ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣੇ ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਾਰਗਰ ਲੈਣ-ਦੇਣ ਦੀ ਸੂਚੀ ਦਿਖਾਈ ਦੇਣੀ ਚਾਹੀਦੀ ਹੈ! 🎉
 
-  updateElement('description', account.description);
-  updateElement('balance', account.balance.toFixed(2));
-  updateElement('currency', account.currency);
-}
-```
+**ਤੁਹਾਡੇ ਦੁਆਰਾ ਹਾਸਲ ਕੀਤੇ ਗਏ ਕਾਰਨਾਮੇ:**
+- ਇੱਕ ਡੈਸ਼ਬੋਰਡ ਬਣਾਇਆ ਜੋ ਕਿਸੇ ਵੀ ਮਾਤਰਾ ਦੇ ਡਾਟਾ ਨਾਲ ਸਕੇਲ ਕਰਦਾ ਹੈ
+- ਸਥਿਰ ਫਾਰਮੈਟਿੰਗ ਲਈ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਟੈਂਪਲੇਟ ਬਣਾਏ
+- DOM ਮੈਨਿਪੁਲੇਸ਼ਨ ਤਕਨੀਕਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਲਾਗੂ ਕੀਤਾ
+- ਉਤਪਾਦਨ ਬੈਂਕਿੰਗ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੇ ਸਮਾਨ ਕਾਰਗਰਤਾ ਵਿਕਸਿਤ ਕੀਤੀ
 
-**ਇਹ ਫੰਕਸ਼ਨ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ** ਕਿ ਖਾਤੇ ਦਾ ਡਾਟਾ ਮੌਜੂਦ ਹੈ
-- **Unauthenticated ਯੂਜ਼ਰਾਂ ਨੂੰ** ਵਾਪਸ ਲੌਗਇਨ ਪੇਜ 'ਤੇ ਭੇਜਦਾ ਹੈ
-- **Reusable `updateElement` ਫੰਕਸ਼ਨ ਵਰਤ ਕੇ** ਖਾਤੇ ਦੇ ਵੇਰਵੇ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ
-- **ਬਕਾਇਆ ਨੂੰ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ** ਹਮੇਸ਼ਾ ਦੋ ਦਸ਼ਮਲਵ ਸਥਾਨ ਦਿਖਾਉਣ ਲਈ
-- **ਸਹੀ ਮੁਦਰਾ ਚਿੰਨ੍ਹ ਦਿਖਾਉਂਦਾ ਹੈ**
+ਤੁਸੀਂ ਸਥਿਰ ਵੈਬਪੇਜ ਨੂੰ ਡਾਇਨਾਮਿਕ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲਣ ਵਿੱਚ ਸਫਲ ਹੋ ਗਏ ਹੋ।
 
-> 💰 **ਪੈਸੇ ਦੀ ਫਾਰਮੈਟਿੰਗ**: ਉਹ [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) ਵਿਧੀ ਬਹੁਤ ਵਧੀਆ ਹੈ! ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਬਕਾਇਆ ਹਮੇਸ਼ਾ ਅਸਲ ਪੈਸੇ ਵਾਂਗ ਦਿਖਾਈ ਦੇਵੇ - "75.00" ਬਜਾਏ ਸਿਰਫ਼ "75"। ਤੁਹਾਡੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਜਾਣ-ਪਛਾਣ ਵਾਲੀ ਮੁਦਰਾ ਫਾਰਮੈਟਿੰਗ ਵੇਖਣ ਵਿੱਚ ਮਜ਼ਾ ਆਵੇਗਾ।
+### 🎯 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ: ਡਾਇਨਾਮਿਕ ਸਮੱਗਰੀ ਜਨਰੇਸ਼ਨ
 
-#### ਤੀਜਾ ਕਦਮ: ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਤੁਹਾਡਾ ਡੈਸ਼ਬੋਰਡ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ
+**ਆਰਕੀਟੈਕਚਰ ਦੀ ਸਮਝ**: ਤੁਸੀਂ ਇੱਕ ਸੁਧਾਰਸ਼ੀਲ ਡਾਟਾ-ਤੋਂ-UI ਪਾਈਪਲਾਈਨ ਲਾਗੂ ਕੀਤੀ ਹੈ ਜੋ React, Vue, ਅਤੇ Angular ਵਰਗੇ ਫਰੇਮਵਰਕ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਪੈਟਰਨਾਂ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ।
 
-ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਤੁਹਾਡਾ ਡੈਸ਼ਬੋਰਡ ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਵਿਅਕਤੀ ਇਸ ਨੂੰ ਵੇਖਦਾ ਹੈ ਤਾਜ਼ਾ ਡਾਟਾ ਨਾਲ ਰੀਫ੍ਰੈਸ਼ ਹੁੰਦਾ ਹੈ, ਸਾਨੂੰ ਤੁਹਾਡੇ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਵਿੱਚ ਹੁੱਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਜੇ ਤੁਸੀਂ [lesson 1 assignment](../1-template-route/assignment.md) ਪੂਰਾ ਕੀਤਾ ਹੈ, ਤਾਂ ਇਹ ਜਾਣ-ਪਛਾਣ ਵਾਲਾ ਮਹਿਸੂਸ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਜੇ ਨਹੀਂ, ਤਾਂ ਚਿੰਤਾ ਨਾ ਕਰੋ - ਇਹ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ:
+**ਮਾਸਟਰ ਕੀਤੇ ਮੁੱਖ ਸੰਕਲਪ:**
+- **ਟੈਂਪਲੇਟ-ਅਧਾਰਿਤ ਰੈਂਡਰਿੰਗ**: ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ UI ਕੰਪੋਨੈਂਟ ਬਣਾਉਣਾ
+- **ਡਾਕੂਮੈਂਟ ਫ੍ਰੈਗਮੈਂਟ**: DOM ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ
+- **ਸੁਰੱਖਿਅਤ DOM ਮੈਨਿਪੁਲੇਸ਼ਨ**: ਸੁਰੱਖਿਆ ਖਤਰੇ ਤੋਂ ਬਚਾਉਣਾ
+- **ਡਾਟਾ ਟ੍ਰਾਂਸਫਾਰਮੇਸ਼ਨ**: ਸਰਵਰ ਡਾਟਾ ਨੂੰ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਵਿੱਚ ਬਦਲਣਾ
 
-ਇਸ ਨੂੰ ਆਪਣੇ `updateRoute()` ਫੰਕਸ਼ਨ ਦੇ ਅੰਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ:
+**ਉਦਯੋਗ ਕਨੈਕਸ਼ਨ**: ਇਹ ਤਕਨੀਕਾਂ ਆਧੁਨਿਕ ਫਰੰਟਐਂਡ ਫਰੇਮਵਰਕ ਦਾ ਅਧਾਰ ਬਣਾਉਂਦੀਆਂ ਹਨ। React ਦਾ ਵਰਚੁਅਲ DOM, Vue ਦਾ ਟੈਂਪਲੇਟ ਸਿਸਟਮ, ਅਤੇ Angular ਦਾ ਕੰਪੋਨੈਂਟ ਆਰਕੀਟੈਕਚਰ ਸਾਰੇ ਇਨ੍ਹਾਂ ਮੁੱਖ ਸੰਕਲਪਾਂ 'ਤੇ ਬਣੇ ਹਨ।
 
-```javascript
-if (typeof route.init === 'function') {
-  route.init();
-}
-```
+**ਚਿੰਤਨ ਦਾ ਸਵਾਲ**: ਤੁਸੀਂ ਇਸ ਸਿਸਟਮ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਅਪਡੇਟਸ (ਜਿਵੇਂ ਨਵੇਂ ਲੈਣ-ਦੇਣ ਆਪਣੇ ਆਪ ਦਿਖਾਈ ਦੇਣ) ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕਿਵੇਂ ਵਧਾ ਸਕਦੇ ਹੋ? WebSockets ਜਾਂ Server-Sent Events ਬਾਰੇ ਸੋਚੋ।
+
+---
 
-ਫਿਰ ਆਪਣੇ ਰੂਟਾਂ ਨੂੰ ਡੈਸ਼ਬੋਰਡ initialization ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਅਪਡੇਟ ਕਰੋ:
+## 📈 ਤੁਹਾਡਾ ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
 
-```javascript
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
-};
+```mermaid
+timeline
+    title Data-Driven Development Journey
+    
+    section Foundation Building
+        API Setup & Testing
+            : Understand client-server communication
+            : Master HTTP request/response cycle
+            : Learn debugging techniques
+    
+    section Authentication Mastery
+        Async Function Patterns
+            : Write clean async/await code
+            : Handle promises effectively
+            : Implement error boundaries
+        User Session Management
+            : Create global state patterns
+            : Build navigation guards
+            : Design user feedback systems
+    
+    section Dynamic UI Development
+        Safe DOM Manipulation
+            : Prevent XSS vulnerabilities
+            : Use textContent over innerHTML
+            : Create accessibility-friendly interfaces
+        Template Systems
+            : Build reusable UI components
+            : Optimize performance with fragments
+            : Scale to handle large datasets
+    
+    section Professional Patterns
+        Production-Ready Code
+            : Implement comprehensive error handling
+            : Follow security best practices
+            : Create maintainable architectures
+        Modern Web Standards
+            : Master Fetch API patterns
+            : Understand CORS configurations
+            : Build responsive, accessible UIs
 ```
 
-**ਇਹ ਚਤੁਰ ਸੈਟਅਪ ਕੀ ਕਰਦਾ ਹੈ:**
-- ਜਾਂਚਦਾ ਹੈ ਕਿ ਰੂ
-**ਪ੍ਰਾਂਪਟ:** ਬੈਂਕਿੰਗ ਐਪ ਲਈ ਖੋਜ ਫੰਕਸ਼ਨਲਿਟੀ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੇ: 1) ਖੋਜ ਫਾਰਮ ਜਿਸ ਵਿੱਚ ਮਿਤੀ ਰੇਂਜ (ਤੋਂ/ਤੱਕ), ਘੱਟੋ-ਘੱਟ/ਵੱਧ ਤੋਂ ਵੱਧ ਰਕਮ, ਅਤੇ ਲੈਣ-ਦੇਣ ਦੇ ਵਰਣਨ ਕੁੰਜੀਆਂ ਲਈ ਇਨਪੁਟ ਫੀਲਡ ਹੋਣ, 2) ਇੱਕ `filterTransactions()` ਫੰਕਸ਼ਨ ਜੋ ਖੋਜ ਮਾਪਦੰਡਾਂ ਦੇ ਅਧਾਰ 'ਤੇ account.transactions ਐਰੇ ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ, 3) `updateDashboard()` ਫੰਕਸ਼ਨ ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਜੋ ਫਿਲਟਰ ਕੀਤੇ ਨਤੀਜੇ ਦਿਖਾਏ ਜਾ ਸਕਣ, ਅਤੇ 4) "ਕਲੀਅਰ ਫਿਲਟਰ" ਬਟਨ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਦ੍ਰਿਸ਼ ਨੂੰ ਰੀਸੈਟ ਕਰੇ। ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਐਰੇ ਮੈਥਡ ਜਿਵੇਂ ਕਿ `filter()` ਵਰਤੋ ਅਤੇ ਖਾਲੀ ਖੋਜ ਮਾਪਦੰਡਾਂ ਲਈ ਐਜ ਕੇਸਾਂ ਨੂੰ ਸੰਭਾਲੋ।
+**🎓 ਗ੍ਰੈਜੂਏਸ਼ਨ ਮਾਈਲਸਟੋਨ**: ਤੁਸੀਂ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਡਾਟਾ-ਚਲਿਤ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਸਫਲਤਾਪੂਰਵਕ ਬਣਾਈ ਹੈ। ਇਹ ਹੁਨਰ ਸਿੱਧੇ React, Vue, ਜਾਂ Angular ਵਰਗੇ ਫਰੇਮਵਰਕ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਅਨੁਵਾਦ ਕਰਦੇ ਹਨ।
+
+**🔄 ਅਗਲੇ ਪੱਧਰ ਦੀਆਂ ਯੋਗਤਾਵਾਂ**:
+- ਇਨ੍ਹਾਂ ਸੰਕਲਪਾਂ 'ਤੇ ਬਣੇ ਫਰੰਟਐਂਡ ਫਰੇਮਵਰਕ ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਤਿਆਰ
+- WebSockets ਨਾਲ ਰੀਅਲ-ਟਾਈਮ ਫੀਚਰ ਲਾਗੂ ਕਰਨ ਲਈ ਤਿਆਰ
+- ਆਫਲਾਈਨ ਯੋਗਤਾਵਾਂ ਨਾਲ ਪ੍ਰੋਗਰੈਸਿਵ ਵੈਬ ਐਪਸ ਬਣਾਉਣ ਲਈ ਤਿਆਰ
+- ਉੱਚਤਮ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਪੈਟਰਨ ਸਿੱਖਣ ਲਈ ਅਧਾਰ ਸੈੱਟ
+
+## GitHub Copilot Agent Challenge 🚀
+
+Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
+
+**ਵੇਰਵਾ:** ਬੈਂਕਿੰਗ ਐਪ ਵਿੱਚ ਲੈਣ-ਦੇਣ ਦੀ ਖੋਜ ਅਤੇ ਫਿਲਟਰ ਫੀਚਰ ਲਾਗੂ ਕਰੋ ਜੋ ਯੂਜ਼ਰ ਨੂੰ ਤਾਰੀਖ ਰੇਂਜ, ਰਕਮ, ਜਾਂ ਵੇਰਵੇ ਦੇ ਕੁੰਜੀਸ਼ਬਦਾਂ ਦੁਆਰਾ ਖਾਸ ਲੈਣ-ਦੇਣ ਲੱਭਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
+
+**ਪ੍ਰੋੰਪਟ:** ਬੈਂਕਿੰਗ ਐਪ ਲਈ ਖੋਜ ਕਾਰਗਰਤਾ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੇ: 1) ਤਾਰੀਖ ਰੇਂਜ (from/to), ਘੱਟੋ-ਘੱਟ/ਵੱਧ ਤੋਂ ਵੱਧ ਰਕਮ, ਅਤੇ ਲੈਣ-ਦੇਣ ਦੇ ਵੇਰਵੇ ਦੇ ਕੁੰਜੀਸ਼ਬਦਾਂ ਲਈ ਇਨਪੁਟ ਫੀਲਡਾਂ ਵਾਲਾ ਖੋਜ ਫਾਰਮ, 2) `filterTransactions()` ਫੰਕਸ਼ਨ ਜੋ ਖੋਜ ਮਾਪਦੰਡਾਂ ਦੇ ਅਧਾਰ 'ਤੇ account.transactions ਐਰੇ ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ, 3) `updateDashboard()` ਫੰਕਸ਼ਨ ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਜੋ ਫਿਲਟਰ ਕੀਤੇ ਨਤੀਜੇ ਦਿਖਾਏ ਜਾ ਸਕਣ, ਅਤੇ 4) "Clear Filters" ਬਟਨ ਜੋ ਦ੍ਰਿਸ਼ ਨੂੰ ਰੀਸੈਟ ਕਰਦਾ ਹੈ। ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਐਰੇ ਵਿਧੀਆਂ ਜਿਵੇਂ `filter()` ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਖਾਲੀ ਖੋਜ ਮਾਪਦੰਡਾਂ ਲਈ ਐਜ ਕੇਸਾਂ ਨੂੰ ਸੰਭਾਲੋ।
 
-[ਏਜੰਟ ਮੋਡ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
+Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ [ਇਥੇ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)।
 
-## 🚀 ਚੁਣੌਤੀ
+## 🚀 ਚੈਲੈਂਜ
 
-ਤਿਆਰ ਹੋ ਜਾਓ ਆਪਣੀ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਅਗਲੇ ਪੱਧਰ 'ਤੇ ਲਿਜਾਣ ਲਈ? ਆਓ ਇਸਨੂੰ ਕੁਝ ਅਜਿਹਾ ਬਣਾਈਏ ਜੋ ਤੁਸੀਂ ਵਾਕਈ ਵਰਤਣਾ ਚਾਹੋਗੇ। ਇੱਥੇ ਕੁਝ ਵਿਚਾਰ ਹਨ ਜੋ ਤੁਹਾਡੀ ਰਚਨਾਤਮਕਤਾ ਨੂੰ ਪ੍ਰੇਰਿਤ ਕਰ ਸਕਦੇ ਹਨ:
+ਤਿਆਰ ਹੋ ਆਪਣੇ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਅਗਲੇ ਪੱਧਰ 'ਤੇ ਲਿਜਾਣ ਲਈ? ਆਓ ਇਸਨੂੰ ਕੁਝ ਅਜਿਹਾ ਬਣਾਈਏ ਜੋ ਤੁਸੀਂ ਵਾਸਤਵ ਵਿੱਚ ਵਰਤਣਾ ਚਾਹੋਗੇ। ਇੱਥੇ ਕੁਝ ਵਿਚਾਰ ਹਨ ਜੋ ਤੁਹਾਡੀ ਰਚਨਾਤਮਕਤਾ ਨੂੰ ਪ੍ਰੇਰਿਤ ਕਰ ਸਕਦੇ ਹਨ:
 
-**ਇਸਨੂੰ ਸੁੰਦਰ ਬਣਾਓ**: CSS ਸਟਾਈਲਿੰਗ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਜੋ ਤੁਹਾਡਾ ਫੰਕਸ਼ਨਲ ਡੈਸ਼ਬੋਰਡ ਕੁਝ ਦ੍ਰਿਸ਼ੀ ਰੂਪ ਵਿੱਚ ਆਕਰਸ਼ਕ ਬਣ ਜਾਵੇ। ਸਾਫ਼ ਲਾਈਨਾਂ, ਵਧੀਆ ਸਪੇਸਿੰਗ, ਅਤੇ ਸ਼ਾਇਦ ਕੁਝ ਹੌਲੀ ਐਨੀਮੇਸ਼ਨ ਬਾਰੇ ਸੋਚੋ।
+**ਇਸਨੂੰ ਸੁੰਦਰ ਬਣਾਓ**: CSS ਸਟਾਈਲਿੰਗ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਜੋ ਤੁਹਾਡਾ ਕਾਰਗਰ ਡੈਸ਼ਬੋਰਡ ਕੁਝ ਦ੍ਰਿਸ਼ੀ ਰੂਪ ਵਿੱਚ ਆਕਰਸ਼ਕ ਬਣ ਜਾਵੇ। ਸਾਫ਼ ਲਾਈਨਾਂ, ਚੰਗੀ ਸਪੇਸਿੰਗ, ਅਤੇ ਸ਼ਾਇਦ ਕੁਝ ਹੌਲੀ ਐਨੀਮੇਸ਼ਨ ਬਾਰੇ ਸੋਚੋ।
 
-**ਇਸਨੂੰ ਰਿਸਪਾਂਸਿਵ ਬਣਾਓ**: [ਮੀਡੀਆ ਕਵੈਰੀਜ਼](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) ਵਰਤਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਤਾਂ ਜੋ [ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) ਬਣਾਇਆ ਜਾ ਸਕੇ ਜੋ ਫੋਨ, ਟੈਬਲੇਟ ਅਤੇ ਡੈਸਕਟਾਪ 'ਤੇ ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ। ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਤੁਹਾਡਾ ਧੰਨਵਾਦ ਕਰਨਗੇ!
+**ਇਸਨੂੰ ਰਿਸਪਾਂਸਿਵ ਬਣਾਓ**: [ਮੀਡੀਆ ਕੁਇਰੀਜ਼](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) ਦੀ ਵਰਤੋਂ ਕਰਕੇ [ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਜੋ ਫੋਨ, ਟੈਬਲੇਟ, ਅਤੇ ਡੈਸਕਟਾਪ 'ਤੇ ਬਹੁਤ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ। ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਤੁਹਾਡਾ ਧੰਨਵਾਦ ਕਰਨਗੇ!
 
-**ਕੁਝ ਫਲੈਅਰ ਸ਼ਾਮਲ ਕਰੋ**: ਲੈਣ-ਦੇਣ ਨੂੰ ਰੰਗ-ਕੋਡ ਕਰਨ ਬਾਰੇ ਸੋਚੋ (ਆਮਦਨ ਲਈ ਹਰਾ, ਖਰਚੇ ਲਈ ਲਾਲ), ਆਈਕਨ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਹੋਵਰ ਪ੍ਰਭਾਵ ਬਣਾਓ ਜੋ ਇੰਟਰਫੇਸ ਨੂੰ ਇੰਟਰੈਕਟਿਵ ਮਹਿਸੂਸ ਕਰਦੇ ਹਨ।
+**ਕੁਝ ਰੰਗਤ ਸ਼ਾਮਲ ਕਰੋ**: ਲੈਣ-ਦੇਣ ਨੂੰ ਰੰਗ-ਕੋਡ ਕਰਨ ਬਾਰੇ ਸੋਚੋ (ਆਮਦਨ ਲਈ ਹਰਾ, ਖਰਚੇ ਲਈ ਲਾਲ), ਆਈਕਨ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਹੋਵਰ ਪ੍ਰਭਾਵ ਬਣਾਓ ਜੋ ਇੰਟਰਫੇਸ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦੇ ਹਨ।
 
-ਇੱਥੇ ਇੱਕ ਪਾਲਿਸ਼ਡ ਡੈਸ਼ਬੋਰਡ ਕਿਵੇਂ ਲੱਗ ਸਕਦਾ ਹੈ:
+ਇੱਥੇ ਇੱਕ ਪਾਲਿਸ਼ਡ ਡੈਸ਼ਬੋਰਡ ਦਾ ਨਤੀਜਾ ਕਿਵੇਂ ਦਿਖ ਸਕਦਾ ਹੈ:
 
-![ਡੈਸ਼ਬੋਰਡ ਦੇ ਸਟਾਈਲਿੰਗ ਤੋਂ ਬਾਅਦ ਨਤੀਜੇ ਦਾ ਉਦਾਹਰਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.pa.png)
+![ਡੈਸ਼ਬੋਰਡ ਦੇ ਸਟਾਈਲਿੰਗ ਤੋਂ ਬਾਅਦ ਨਤੀਜੇ ਦਾ ਉਦਾਹਰਣ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.pa.png)
 
 ਇਸਨੂੰ ਬਿਲਕੁਲ ਇਸੇ ਤਰ੍ਹਾਂ ਮਿਲਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ - ਇਸਨੂੰ ਪ੍ਰੇਰਣਾ ਵਜੋਂ ਵਰਤੋ ਅਤੇ ਇਸਨੂੰ ਆਪਣਾ ਬਣਾਓ!
 
-## ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼
+## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼
 
-[ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/46)
+[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/46)
 
 ## ਅਸਾਈਨਮੈਂਟ
 
@@ -456,4 +641,4 @@ const routes = {
 ---
 
 **ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/7-bank-project/4-state-management/README.md b/translations/pa/7-bank-project/4-state-management/README.md
index 61ee7aa9df..0733967948 100644
--- a/translations/pa/7-bank-project/4-state-management/README.md
+++ b/translations/pa/7-bank-project/4-state-management/README.md
@@ -1,42 +1,96 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "32bd800759c3e943c38ad9ae6e1f51e0",
-  "translation_date": "2025-10-22T17:53:11+00:00",
+  "original_hash": "b807b09df716dc48a2b750835bf8e933",
+  "translation_date": "2025-11-03T16:36:53+00:00",
   "source_file": "7-bank-project/4-state-management/README.md",
   "language_code": "pa"
 }
 -->
-# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 4: ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਸਿਧਾਂਤ
+# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 4: ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਅਸੂਲ
 
-## ਪੂਰਵ-ਵਿਆਖਿਆ ਪ੍ਰਸ਼ਨਾਵਲੀ
+## ⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ
 
-[ਪੂਰਵ-ਵਿਆਖਿਆ ਪ੍ਰਸ਼ਨਾਵਲੀ](https://ff-quizzes.netlify.app/web/quiz/47)
+**ਵਿਆਸਤ ਡਿਵੈਲਪਰਾਂ ਲਈ ਤੇਜ਼ ਸ਼ੁਰੂਆਤ ਦਾ ਰਾਹ**
 
-## ਜਾਣ ਪਛਾਣ
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Diagnose state issues]
+    B --> C[Create central state object]
+    C --> D[Add updateState function]
+    D --> E[See immediate improvements]
+```
+
+- **ਮਿੰਟ 1**: ਮੌਜੂਦਾ ਸਟੇਟ ਸਮੱਸਿਆ ਦੀ ਜਾਂਚ ਕਰੋ - ਲੌਗਇਨ ਕਰੋ, ਪੇਜ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ, ਲੌਗਆਉਟ ਦੇਖੋ
+- **ਮਿੰਟ 2**: `let account = null` ਨੂੰ `let state = { account: null }` ਨਾਲ ਬਦਲੋ
+- **ਮਿੰਟ 3**: ਨਿਯੰਤਰਿਤ ਅੱਪਡੇਟਾਂ ਲਈ ਇੱਕ ਸਧਾਰਨ `updateState()` ਫੰਕਸ਼ਨ ਬਣਾਓ
+- **ਮਿੰਟ 4**: ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਨਵੇਂ ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਅੱਪਡੇਟ ਕਰੋ
+- **ਮਿੰਟ 5**: ਸੁਧਾਰਿਆ ਗਿਆ ਪੇਸ਼ਗੂਈ ਅਤੇ ਡੀਬੱਗਿੰਗ ਸਮਰੱਥਾ ਦੀ ਜਾਂਚ ਕਰੋ
+
+**ਤੇਜ਼ ਡਾਇਗਨੋਸਟਿਕ ਟੈਸਟ**:
+```javascript
+// Before: Scattered state
+let account = null; // Lost on refresh!
+
+// After: Centralized state
+let state = Object.freeze({ account: null }); // Controlled and trackable!
+```
+
+**ਇਸਦਾ ਮਹੱਤਵ ਕਿਉਂ ਹੈ**: 5 ਮਿੰਟਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਅਨਿਯਮਿਤ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਤੋਂ ਪੇਸ਼ਗੂਈਯੋਗ, ਡੀਬੱਗ ਕਰਨ ਯੋਗ ਪੈਟਰਨਾਂ ਵਿੱਚ ਬਦਲਾਅ ਦਾ ਅਨੁਭਵ ਕਰੋਗੇ। ਇਹ ਉਹ ਬੁਨਿਆਦ ਹੈ ਜੋ ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਯੋਗ ਬਣਾਉਂਦੀ ਹੈ।
+
+## 🗺️ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਮਾਹਰਤਾ ਦੁਆਰਾ ਤੁਹਾਡਾ ਸਿੱਖਣ ਦਾ ਸਫਰ
+
+```mermaid
+journey
+    title From Scattered State to Professional Architecture
+    section Diagnosing Problems
+      Identify state loss issues: 3: You
+      Understand scattered updates: 4: You
+      Recognize architecture needs: 6: You
+    section Centralizing Control
+      Create unified state object: 5: You
+      Implement controlled updates: 7: You
+      Add immutable patterns: 8: You
+    section Adding Persistence
+      Implement localStorage: 6: You
+      Handle serialization: 7: You
+      Create session continuity: 9: You
+    section Balancing Freshness
+      Address data staleness: 5: You
+      Build refresh systems: 8: You
+      Achieve optimal balance: 9: You
+```
+
+**ਤੁਹਾਡਾ ਸਫਰ ਦਾ ਮਕਸਦ**: ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਇੱਕ ਪੇਸ਼ੇਵਰ-ਗੁਣਵੱਤਾ ਵਾਲਾ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਸਿਸਟਮ ਬਣਾਇਆ ਹੋਵੇਗਾ ਜੋ ਪੇਰਸਿਸਟੈਂਸ, ਡਾਟਾ ਤਾਜਗੀ ਅਤੇ ਪੇਸ਼ਗੂਈਯੋਗ ਅੱਪਡੇਟਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ - ਉਹੀ ਪੈਟਰਨ ਜੋ ਉਤਪਾਦਨ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।
+
+## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
+
+[ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/47)
 
-ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਵੋਯੇਜਰ ਅੰਤਰਿਕਸ਼ ਜਹਾਜ਼ ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਵਾਂਗ ਹੈ - ਜਦੋਂ ਸਭ ਕੁਝ ਸਹੀ ਚੱਲ ਰਿਹਾ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਮੌਜੂਦਗੀ ਦਾ ਪਤਾ ਵੀ ਨਹੀਂ ਲੱਗਦਾ। ਪਰ ਜਦੋਂ ਕੁਝ ਗਲਤ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਅੰਤਰਤਾਰਕ ਖੇਤਰ ਤੱਕ ਪਹੁੰਚਣ ਅਤੇ ਬ੍ਰਹਿਮੰਡ ਵਿੱਚ ਖੋ ਜਾਣ ਦੇ ਵਿਚਕਾਰ ਫਰਕ ਬਣ ਜਾਂਦਾ ਹੈ। ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ, ਸਟੇਟ ਉਹ ਸਭ ਕੁਝ ਦਰਸਾਉਂਦੀ ਹੈ ਜੋ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਯਾਦ ਰੱਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ: ਯੂਜ਼ਰ ਲੌਗਇਨ ਸਥਿਤੀ, ਫਾਰਮ ਡਾਟਾ, ਨੈਵੀਗੇਸ਼ਨ ਇਤਿਹਾਸ, ਅਤੇ ਅਸਥਾਈ ਇੰਟਰਫੇਸ ਸਥਿਤੀਆਂ।
+## ਪਰਿਚਯ
 
-ਜਿਵੇਂ ਤੁਹਾਡੀ ਬੈਂਕਿੰਗ ਐਪ ਸਧਾਰਨ ਲੌਗਇਨ ਫਾਰਮ ਤੋਂ ਇੱਕ ਹੋਰ ਉੱਚ-ਸਤਹ ਦੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵਿਕਸਿਤ ਹੋਈ ਹੈ, ਤੁਹਾਨੂੰ ਕੁਝ ਆਮ ਚੁਣੌਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਹੋਇਆ ਹੋਵੇਗਾ। ਪੰਨਾ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ ਅਤੇ ਯੂਜ਼ਰ ਅਚਾਨਕ ਲੌਗਆਉਟ ਹੋ ਜਾਂਦੇ ਹਨ। ਬ੍ਰਾਊਜ਼ਰ ਬੰਦ ਕਰੋ ਅਤੇ ਸਾਰਾ ਪ੍ਰਗਤੀ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ। ਸਮੱਸਿਆ ਦਾ ਨਿਪਟਾਰਾ ਕਰੋ ਅਤੇ ਤੁਸੀਂ ਕਈ ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ ਖੋਜ ਕਰ ਰਹੇ ਹੋ ਜੋ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਇੱਕੋ ਡਾਟਾ ਨੂੰ ਬਦਲਦੇ ਹਨ।
+ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ Voyager spacecraft ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਵਾਂਗ ਹੈ – ਜਦੋਂ ਸਭ ਕੁਝ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰ ਰਿਹਾ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇਸਦੀ ਮੌਜੂਦਗੀ ਨੂੰ ਮੁਸ਼ਕਲ ਨਾਲ ਮਹਿਸੂਸ ਕਰਦੇ ਹੋ। ਪਰ ਜਦੋਂ ਕੁਝ ਗਲਤ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਇਹ ਇੰਟਰਸਟੈਲਰ ਸਪੇਸ ਤੱਕ ਪਹੁੰਚਣ ਅਤੇ ਕੌਸਮਿਕ ਖਾਲੀ ਵਿੱਚ ਖੋ ਜਾਣ ਦੇ ਵਿਚਕਾਰ ਫਰਕ ਬਣ ਜਾਂਦਾ ਹੈ। ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ, ਸਟੇਟ ਉਹ ਸਭ ਕੁਝ ਦਰਸਾਉਂਦਾ ਹੈ ਜੋ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਯਾਦ ਰੱਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ: ਯੂਜ਼ਰ ਲੌਗਇਨ ਸਥਿਤੀ, ਫਾਰਮ ਡਾਟਾ, ਨੈਵੀਗੇਸ਼ਨ ਇਤਿਹਾਸ, ਅਤੇ ਅਸਥਾਈ ਇੰਟਰਫੇਸ ਸਥਿਤੀਆਂ।
 
-ਇਹ ਖਰਾਬ ਕੋਡਿੰਗ ਦੇ ਸੰਕੇਤ ਨਹੀਂ ਹਨ - ਇਹ ਕੁਦਰਤੀ ਵਿਕਾਸ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਹਨ ਜੋ ਉਸ ਸਮੇਂ ਹੁੰਦੀਆਂ ਹਨ ਜਦੋਂ ਐਪਲੀਕੇਸ਼ਨ ਇੱਕ ਨਿਰਧਾਰਿਤ ਜਟਿਲਤਾ ਦੀ ਸੀਮਾ ਤੱਕ ਪਹੁੰਚ ਜਾਂਦੇ ਹਨ। ਹਰ ਡਿਵੈਲਪਰ ਨੂੰ ਇਹ ਚੁਣੌਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ ਜਦੋਂ ਉਹਨਾਂ ਦੀਆਂ ਐਪਸ "ਸਿਧਾਂਤ ਦਾ ਸਬੂਤ" ਤੋਂ "ਉਤਪਾਦਨ ਲਈ ਤਿਆਰ" ਵਿੱਚ ਬਦਲ ਜਾਂਦੀਆਂ ਹਨ।
+ਜਿਵੇਂ ਤੁਹਾਡੀ ਬੈਂਕਿੰਗ ਐਪ ਸਧਾਰਨ ਲੌਗਇਨ ਫਾਰਮ ਤੋਂ ਇੱਕ ਹੋਰ ਸੁਧਾਰਿਤ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵਿਕਸਿਤ ਹੋਈ ਹੈ, ਤੁਸੀਂ ਸ਼ਾਇਦ ਕੁਝ ਆਮ ਚੁਣੌਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕੀਤਾ ਹੋਵੇਗਾ। ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ ਅਤੇ ਯੂਜ਼ਰ ਅਣਜਾਣੇ ਤੌਰ 'ਤੇ ਲੌਗਆਉਟ ਹੋ ਜਾਂਦੇ ਹਨ। ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਬੰਦ ਕਰੋ ਅਤੇ ਸਾਰਾ ਪ੍ਰਗਤੀ ਗਾਇਬ ਹੋ ਜਾਂਦੀ ਹੈ। ਸਮੱਸਿਆ ਨੂੰ ਡੀਬੱਗ ਕਰੋ ਅਤੇ ਤੁਸੀਂ ਕਈ ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ ਖੋਜ ਕਰ ਰਹੇ ਹੋ ਜੋ ਸਾਰੇ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਇੱਕੋ ਡਾਟਾ ਨੂੰ ਸੋਧਦੇ ਹਨ।
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਕੇਂਦਰੀ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਸਿਸਟਮ ਲਾਗੂ ਕਰਾਂਗੇ ਜੋ ਤੁਹਾਡੀ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਇੱਕ ਭਰੋਸੇਮੰਦ, ਪੇਸ਼ੇਵਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲ ਦੇਵੇਗਾ। ਤੁਸੀਂ ਡਾਟਾ ਫਲੋਜ਼ ਨੂੰ ਪੇਸ਼ਗੀ ਤੌਰ 'ਤੇ ਮੈਨੇਜ ਕਰਨਾ, ਯੂਜ਼ਰ ਸੈਸ਼ਨ ਨੂੰ ਢੰਗ ਨਾਲ ਸਟੋਰ ਕਰਨਾ, ਅਤੇ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਲੋੜੀਂਦਾ ਸੁਗਮ ਯੂਜ਼ਰ ਅਨੁਭਵ ਬਣਾਉਣਾ ਸਿੱਖੋਗੇ।
+ਇਹ ਖਰਾਬ ਕੋਡਿੰਗ ਦੇ ਸੰਕੇਤ ਨਹੀਂ ਹਨ – ਇਹ ਕੁਦਰਤੀ ਵਿਕਾਸ ਦੇ ਦਰਦ ਹਨ ਜੋ ਉਸ ਸਮੇਂ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਐਪਲੀਕੇਸ਼ਨ ਇੱਕ ਨਿਰਧਾਰਿਤ ਜਟਿਲਤਾ ਦੀ ਸੀਮਾ ਤੱਕ ਪਹੁੰਚਦੇ ਹਨ। ਹਰ ਡਿਵੈਲਪਰ ਨੂੰ ਇਹ ਚੁਣੌਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ ਜਦੋਂ ਉਹਨਾਂ ਦੇ ਐਪ "ਪ੍ਰੂਫ ਆਫ ਕਾਂਸੈਪਟ" ਤੋਂ "ਪ੍ਰੋਡਕਸ਼ਨ ਰੈਡੀ" ਵਿੱਚ ਬਦਲਦੇ ਹਨ।
+
+ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਕੇਂਦਰੀਕ੍ਰਿਤ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਸਿਸਟਮ ਲਾਗੂ ਕਰਾਂਗੇ ਜੋ ਤੁਹਾਡੀ ਬੈਂਕਿੰਗ ਐਪ ਨੂੰ ਇੱਕ ਭਰੋਸੇਯੋਗ, ਪੇਸ਼ੇਵਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ ਡਾਟਾ ਫਲੋਜ਼ ਨੂੰ ਪੇਸ਼ਗੂਈਯੋਗ ਤਰੀਕੇ ਨਾਲ ਮੈਨੇਜ ਕਰਨਾ, ਯੂਜ਼ਰ ਸੈਸ਼ਨ ਨੂੰ ਢੰਗ ਨਾਲ ਪੇਰਸਿਸਟ ਕਰਨਾ, ਅਤੇ ਇੱਕ ਸੁਚਾਰੂ ਯੂਜ਼ਰ ਅਨੁਭਵ ਬਣਾਉਣਾ ਸਿੱਖੋਗੇ ਜੋ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
 
 ## ਪੂਰਵ ਸ਼ਰਤਾਂ
 
-ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਸਿਧਾਂਤਾਂ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਆਪਣਾ ਡਿਵੈਲਪਮੈਂਟ ਵਾਤਾਵਰਣ ਢੰਗ ਨਾਲ ਸੈਟਅੱਪ ਕਰਨਾ ਹੋਵੇਗਾ ਅਤੇ ਆਪਣੀ ਬੈਂਕਿੰਗ ਐਪ ਦੀ ਬੁਨਿਆਦ ਤਿਆਰ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਇਹ ਪਾਠ ਇਸ ਸਿਰੀਜ਼ ਦੇ ਪਿਛਲੇ ਭਾਗਾਂ ਦੇ ਸਿਧਾਂਤਾਂ ਅਤੇ ਕੋਡ 'ਤੇ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਅਧਾਰਿਤ ਹੈ।
+ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਅਸੂਲਾਂ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਆਪਣਾ ਡਿਵੈਲਪਮੈਂਟ ਵਾਤਾਵਰਣ ਢੰਗ ਨਾਲ ਸੈਟਅਪ ਕਰਨਾ ਹੋਵੇਗਾ ਅਤੇ ਆਪਣੀ ਬੈਂਕਿੰਗ ਐਪ ਦੀ ਬੁਨਿਆਦ ਸਥਾਪਿਤ ਕਰਨੀ ਹੋਵੇਗੀ। ਇਹ ਪਾਠ ਇਸ ਸਿਰੀਜ਼ ਦੇ ਪਿਛਲੇ ਭਾਗਾਂ ਦੇ ਅਸੂਲਾਂ ਅਤੇ ਕੋਡ 'ਤੇ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਬਣਦਾ ਹੈ।
 
-ਪ੍ਰਗਤੀ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਹਨਾਂ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਤਿਆਰ ਰੱਖੋ:
+ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ ਇਹਨਾਂ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਤਿਆਰ ਰੱਖੋ:
 
-**ਲੋੜੀਂਦਾ ਸੈਟਅੱਪ:**
-- [ਡਾਟਾ ਫੈਚਿੰਗ ਪਾਠ](../3-data/README.md) ਪੂਰਾ ਕਰੋ - ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਖਾਤੇ ਦਾ ਡਾਟਾ ਲੋਡ ਅਤੇ ਡਿਸਪਲੇ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ
-- ਆਪਣੇ ਸਿਸਟਮ 'ਤੇ [Node.js](https://nodejs.org) ਇੰਸਟਾਲ ਕਰੋ ਬੈਕਐਂਡ API ਚਲਾਉਣ ਲਈ
-- ਖਾਤੇ ਦੇ ਡਾਟਾ ਕਾਰਵਾਈਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ [ਸਰਵਰ API](../api/README.md) ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਸ਼ੁਰੂ ਕਰੋ
+**ਲੋੜੀਂਦਾ ਸੈਟਅਪ:**
+- [ਡਾਟਾ ਫੈਚਿੰਗ ਪਾਠ](../3-data/README.md) ਪੂਰਾ ਕਰੋ - ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਖਾਤੇ ਦੇ ਡਾਟਾ ਨੂੰ ਲੋਡ ਅਤੇ ਡਿਸਪਲੇ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ
+- [Node.js](https://nodejs.org) ਨੂੰ ਆਪਣੇ ਸਿਸਟਮ 'ਤੇ ਇੰਸਟਾਲ ਕਰੋ ਬੈਕਐਂਡ API ਚਲਾਉਣ ਲਈ
+- [ਸਰਵਰ API](../api/README.md) ਨੂੰ ਖਾਤੇ ਦੇ ਡਾਟਾ ਕਾਰਵਾਈਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਸ਼ੁਰੂ ਕਰੋ
 
 **ਆਪਣੇ ਵਾਤਾਵਰਣ ਦੀ ਜਾਂਚ:**
 
-ਇਹ ਕਮਾਂਡ ਟਰਮੀਨਲ ਵਿੱਚ ਚਲਾਕੇ ਆਪਣੇ API ਸਰਵਰ ਨੂੰ ਸਹੀ ਤੌਰ 'ਤੇ ਚਲਾਉਣ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:
+ਇਹ ਕਮਾਂਡ ਟਰਮੀਨਲ ਵਿੱਚ ਚਲਾਕੇ ਆਪਣੇ API ਸਰਵਰ ਨੂੰ ਢੰਗ ਨਾਲ ਚਲਾਉਣ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:
 
 ```sh
 curl http://localhost:5000/api
@@ -44,65 +98,139 @@ curl http://localhost:5000/api
 ```
 
 **ਇਹ ਕਮਾਂਡ ਕੀ ਕਰਦੀ ਹੈ:**
-- **GET ਰਿਕਵੈਸਟ ਭੇਜਦੀ ਹੈ** ਤੁਹਾਡੇ ਸਥਾਨਕ API ਸਰਵਰ ਨੂੰ
-- **ਕਨੈਕਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰਦੀ ਹੈ** ਅਤੇ ਸਰਵਰ ਦੇ ਜਵਾਬ ਦੇਣ ਦੀ ਪੁਸ਼ਟੀ ਕਰਦੀ ਹੈ
-- **API ਵਰਜਨ ਜਾਣਕਾਰੀ ਵਾਪਸ ਕਰਦੀ ਹੈ** ਜੇਕਰ ਸਭ ਕੁਝ ਸਹੀ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ
+- **ਭੇਜਦੀ ਹੈ** GET ਰਿਕਵੈਸਟ ਤੁਹਾਡੇ ਸਥਾਨਕ API ਸਰਵਰ ਨੂੰ
+- **ਟੈਸਟ ਕਰਦੀ ਹੈ** ਕਨੈਕਸ਼ਨ ਅਤੇ ਸਰਵਰ ਦੇ ਜਵਾਬ ਦੀ ਪੁਸ਼ਟੀ ਕਰਦੀ ਹੈ
+- **ਵਾਪਸ ਕਰਦੀ ਹੈ** API ਵਰਜਨ ਜਾਣਕਾਰੀ ਜੇਕਰ ਸਭ ਕੁਝ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ
+
+## 🧠 ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਆਰਕੀਟੈਕਚਰ ਝਲਕ
+
+```mermaid
+mindmap
+  root((State Management))
+    Current Problems
+      Session Loss
+        Page Refresh Issues
+        Browser Close Impact
+        Variable Reset Problems
+      Scattered Updates
+        Multiple Modification Points
+        Debugging Challenges
+        Unpredictable Behavior
+      Incomplete Cleanup
+        Logout State Issues
+        Memory Leaks
+        Security Concerns
+    Centralized Solutions
+      Unified State Object
+        Single Source of Truth
+        Predictable Structure
+        Scalable Foundation
+      Controlled Updates
+        Immutable Patterns
+        Object.freeze Usage
+        Function-Based Changes
+      State Tracking
+        History Management
+        Debug Visibility
+        Change Auditing
+    Persistence Strategies
+      localStorage Integration
+        Session Continuity
+        JSON Serialization
+        Automatic Sync
+      Data Freshness
+        Server Refresh
+        Stale Data Handling
+        Balance Optimization
+      Storage Optimization
+        Minimal Data
+        Performance Focus
+        Security Considerations
+```
+
+**ਮੁੱਖ ਅਸੂਲ**: ਪੇਸ਼ੇਵਰ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਪੇਸ਼ਗੂਈਯੋਗਤਾ, ਪੇਰਸਿਸਟੈਂਸ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਸੰਤੁਲਿਤ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਭਰੋਸੇਯੋਗ ਯੂਜ਼ਰ ਅਨੁਭਵ ਬਣੇ ਜੋ ਸਧਾਰਨ ਇੰਟਰੈਕਸ਼ਨ ਤੋਂ ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨ ਵਰਕਫਲੋਜ਼ ਤੱਕ ਸਕੇਲ ਕਰਦੇ ਹਨ।
 
 ---
 
 ## ਮੌਜੂਦਾ ਸਟੇਟ ਸਮੱਸਿਆਵਾਂ ਦੀ ਜਾਂਚ
 
-ਜਿਵੇਂ ਸ਼ਰਲਾਕ ਹੋਮਜ਼ ਇੱਕ ਜੁਰਮ ਦੇ ਸਥਾਨ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ, ਅਸੀਂ ਆਪਣੀ ਮੌਜੂਦਾ ਲਾਗੂ ਕਰਨ ਦੀ ਪੂਰੀ ਸਮਝ ਲੈਣੀ ਹੈ ਕਿ ਯੂਜ਼ਰ ਸੈਸ਼ਨ ਕਿਉਂ ਗਾਇਬ ਹੋ ਰਹੇ ਹਨ।
+ਜਿਵੇਂ ਸ਼ਰਲਾਕ ਹੋਮਜ਼ ਇੱਕ ਜੁਰਮ ਦੇ ਸਥਾਨ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ, ਅਸੀਂ ਆਪਣੀ ਮੌਜੂਦਾ ਲਾਗੂ ਕਰਨ ਦੀ ਪੂਰੀ ਸਮਝ ਲੈਣੀ ਹੈ ਜਦੋਂ ਤੱਕ ਅਸੀਂ ਯੂਜ਼ਰ ਸੈਸ਼ਨ ਗਾਇਬ ਹੋਣ ਦੀ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਨਹੀਂ ਲੱਭ ਸਕਦੇ।
 
-ਆਓ ਇੱਕ ਸਧਾਰਨ ਪ੍ਰਯੋਗ ਕਰੀਏ ਜੋ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੀਆਂ ਅਸਲ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ:
+ਆਓ ਇੱਕ ਸਧਾਰਨ ਪ੍ਰਯੋਗ ਕਰੀਏ ਜੋ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੀਆਂ ਮੁੱਢਲੀ ਚੁਣੌਤੀਆਂ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ:
 
 **🧪 ਇਹ ਡਾਇਗਨੋਸਟਿਕ ਟੈਸਟ ਕਰੋ:**
 1. ਆਪਣੀ ਬੈਂਕਿੰਗ ਐਪ ਵਿੱਚ ਲੌਗਇਨ ਕਰੋ ਅਤੇ ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਜਾਓ
-2. ਬ੍ਰਾਊਜ਼ਰ ਪੰਨਾ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ
+2. ਬ੍ਰਾਊਜ਼ਰ ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ
 3. ਦੇਖੋ ਕਿ ਤੁਹਾਡੀ ਲੌਗਇਨ ਸਥਿਤੀ ਨਾਲ ਕੀ ਹੁੰਦਾ ਹੈ
 
-ਜੇਕਰ ਤੁਹਾਨੂੰ ਮੁੜ ਲੌਗਇਨ ਸਕ੍ਰੀਨ 'ਤੇ ਭੇਜਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਕਲਾਸਿਕ ਸਟੇਟ ਪERSISTENCE ਸਮੱਸਿਆ ਦੀ ਪਛਾਣ ਕਰ ਲਈ ਹੈ। ਇਹ ਵਿਹਾਰ ਇਸ ਲਈ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਸਾਡੀ ਮੌਜੂਦਾ ਲਾਗੂ ਕਰਨ ਵਾਲੀ ਯੂਜ਼ਰ ਡਾਟਾ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰਦੀ ਹੈ ਜੋ ਹਰ ਪੰਨਾ ਲੋਡ ਨਾਲ ਰੀਸੈਟ ਹੋ ਜਾਂਦੇ ਹਨ।
+ਜੇਕਰ ਤੁਹਾਨੂੰ ਵਾਪਸ ਲੌਗਇਨ ਸਕ੍ਰੀਨ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਕਲਾਸਿਕ ਸਟੇਟ ਪੇਰਸਿਸਟੈਂਸ ਸਮੱਸਿਆ ਦੀ ਪਛਾਣ ਕੀਤੀ ਹੈ। ਇਹ ਵਿਹਾਰ ਇਸ ਲਈ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਸਾਡੀ ਮੌਜੂਦਾ ਲਾਗੂ ਕਰਨ ਵਾਲੀ ਯੂਜ਼ਰ ਡਾਟਾ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਰੀਏਬਲਾਂ ਵਿੱਚ ਸਟੋਰ ਕਰਦੀ ਹੈ ਜੋ ਹਰ ਪੇਜ ਲੋਡ ਨਾਲ ਰੀਸੈਟ ਹੋ ਜਾਂਦੇ ਹਨ।
 
 **ਮੌਜੂਦਾ ਲਾਗੂ ਕਰਨ ਵਾਲੀਆਂ ਸਮੱਸਿਆਵਾਂ:**
 
-ਪਿਛਲੇ ਪਾਠ ਦੇ ਸਧਾਰਨ `account` ਵੈਰੀਏਬਲ ਨੇ ਤਿੰਨ ਮਹੱਤਵਪੂਰਨ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਕੀਤੀਆਂ ਹਨ ਜੋ ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਕੋਡ ਦੀ ਰੱਖ-ਰਖਾਵ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੀਆਂ ਹਨ:
+ਸਾਡੇ [ਪਿਛਲੇ ਪਾਠ](../3-data/README.md) ਤੋਂ ਸਧਾਰਨ `account` ਵੈਰੀਏਬਲ ਤਿੰਨ ਮਹੱਤਵਪੂਰਨ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਕਰਦਾ ਹੈ ਜੋ ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਕੋਡ ਸੰਭਾਲਯੋਗਤਾ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ:
 
 | ਸਮੱਸਿਆ | ਤਕਨੀਕੀ ਕਾਰਨ | ਯੂਜ਼ਰ ਪ੍ਰਭਾਵ |
 |---------|--------|----------------|
-| **ਸੈਸ਼ਨ ਖੋਣਾ** | ਪੰਨਾ ਰੀਫ੍ਰੈਸ਼ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਰੀਏਬਲ ਨੂੰ ਸਾਫ ਕਰ ਦਿੰਦਾ ਹੈ | ਯੂਜ਼ਰ ਨੂੰ ਵਾਰ-ਵਾਰ ਮੁੜ ਪ੍ਰਮਾਣਿਕਤਾ ਕਰਨੀ ਪੈਂਦੀ ਹੈ |
-| **ਬਿਖਰੇ ਅੱਪਡੇਟ** | ਕਈ ਫੰਕਸ਼ਨ ਸਿੱਧੇ ਸਟੇਟ ਨੂੰ ਬਦਲਦੇ ਹਨ | ਡਿਬੱਗਿੰਗ ਬਹੁਤ ਮੁਸ਼ਕਲ ਹੋ ਜਾਂਦੀ ਹੈ |
-| **ਅਧੂਰਾ ਕਲੀਨਅੱਪ** | ਲੌਗਆਉਟ ਸਾਰੇ ਸਟੇਟ ਰਿਫਰੈਂਸ ਨੂੰ ਸਾਫ ਨਹੀਂ ਕਰਦਾ | ਸੰਭਾਵਿਤ ਸੁਰੱਖਿਆ ਅਤੇ ਗੋਪਨੀਯਤਾ ਚਿੰਤਾਵਾਂ |
+| **ਸੈਸ਼ਨ ਗੁਆਚ** | ਪੇਜ ਰੀਫ੍ਰੈਸ਼ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਸਾਫ ਕਰਦਾ ਹੈ | ਯੂਜ਼ਰਾਂ ਨੂੰ ਵਾਰ-ਵਾਰ ਦੁਬਾਰਾ ਪ੍ਰਮਾਣਿਕਤਾ ਕਰਨੀ ਪੈਂਦੀ ਹੈ |
+| **ਬਿਖਰੀਆਂ ਅੱਪਡੇਟਾਂ** | ਕਈ ਫੰਕਸ਼ਨ ਸਟੇਟ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸੋਧਦੇ ਹਨ | ਡੀਬੱਗਿੰਗ ਬਹੁਤ ਮੁਸ਼ਕਲ ਹੋ ਜਾਂਦੀ ਹੈ |
+| **ਅਧੂਰੀ ਸਾਫ਼-ਸਫਾਈ** | ਲੌਗਆਉਟ ਸਾਰੇ ਸਟੇਟ ਰਿਫਰੈਂਸਾਂ ਨੂੰ ਸਾਫ਼ ਨਹੀਂ ਕਰਦਾ | ਸੰਭਾਵਿਤ ਸੁਰੱਖਿਆ ਅਤੇ ਗੋਪਨੀਯਤਾ ਚਿੰਤਾਵਾਂ |
 
 **ਆਰਕੀਟੈਕਚਰਲ ਚੁਣੌਤੀ:**
 
-ਜਿਵੇਂ ਟਾਇਟੈਨਿਕ ਦੇ ਕਮਰਿਆਂ ਦਾ ਡਿਜ਼ਾਈਨ ਮਜ਼ਬੂਤ ਲੱਗਦਾ ਸੀ ਜਦੋਂ ਤੱਕ ਕਈ ਕਮਰੇ ਇੱਕੋ ਸਮੇਂ ਵਿੱਚ ਪਾਣੀ ਨਾਲ ਭਰ ਨਹੀਂ ਗਏ, ਇਹ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਠੀਕ ਕਰਨਾ ਅਧਾਰਭੂਤ ਆਰਕੀਟੈਕਚਰਲ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਨਹੀਂ ਕਰੇਗਾ। ਸਾਨੂੰ ਇੱਕ ਵਿਆਪਕ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਹੱਲ ਦੀ ਲੋੜ ਹੈ।
+ਜਿਵੇਂ ਟਾਇਟੈਨਿਕ ਦੇ ਕਮਪਾਰਟਮੈਂਟਲ ਡਿਜ਼ਾਈਨ ਨੇ ਮਜ਼ਬੂਤ ਲੱਗਣ ਵਾਲਾ ਦਿਖਾਇਆ ਜਦੋਂ ਤੱਕ ਕਈ ਕਮਪਾਰਟਮੈਂਟ ਇੱਕੋ ਸਮੇਂ ਵਿੱਚ ਭਰ ਗਏ, ਇਹ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਠੀਕ ਕਰਨਾ ਅਧਾਰਭੂਤ ਆਰਕੀਟੈਕਚਰਲ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਨਹੀਂ ਕਰੇਗਾ। ਸਾਨੂੰ ਇੱਕ ਵਿਆਪਕ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਹੱਲ ਦੀ ਲੋੜ ਹੈ।
 
 > 💡 **ਅਸੀਂ ਅਸਲ ਵਿੱਚ ਇੱਥੇ ਕੀ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਾਂ?**
 
-[ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ](https://en.wikipedia.org/wiki/State_management) ਦੋ ਮੁੱਖ ਪਹੇਲੀਆਂ ਨੂੰ ਹੱਲ ਕਰਨ ਬਾਰੇ ਹੈ:
-
-1. **ਮੇਰਾ ਡਾਟਾ ਕਿੱਥੇ ਹੈ?**: ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਸਾਡੇ ਕੋਲ ਕੀ ਜਾਣਕਾਰੀ ਹੈ ਅਤੇ ਇਹ ਕਿੱਥੋਂ ਆ ਰਹੀ ਹੈ
-2. **ਕੀ ਸਭ ਇੱਕੋ ਪੰਨੇ 'ਤੇ ਹਨ?**: ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਯੂਜ਼ਰ ਜੋ ਦੇਖਦੇ ਹਨ ਉਹ ਅਸਲ ਵਿੱਚ ਹੋ ਰਹੇ ਨਾਲ ਮਿਲਦਾ ਹੈ
-
-**ਸਾਡਾ ਯੋਜਨਾ:**
-
-ਆਪਣੇ ਆਪ ਨੂੰ ਗੁੰਝਲ ਵਿੱਚ ਪਾਉਣ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਇੱਕ **ਕੇਂਦਰੀ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ** ਸਿਸਟਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਕਿ ਸਾਰੇ ਮਹੱਤਵਪੂਰਨ ਕੰਮਾਂ ਦੀ ਜ਼ਿੰਮੇਵਾਰੀ ਇੱਕ ਬਹੁਤ ਹੀ ਸੰਗਠਿਤ ਵਿਅਕਤੀ ਦੇ ਹੱਥ ਵਿੱਚ ਹੈ:
-
-![HTML, ਯੂਜ਼ਰ ਕਾਰਵਾਈਆਂ ਅਤੇ ਸਟੇਟ ਦੇ ਵਿਚਕਾਰ ਡਾਟਾ ਫਲੋਜ਼ ਦਿਖਾਉਣ ਵਾਲਾ ਸਕੀਮਾ](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.pa.png)
+[ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ](https://en.wikipedia.org/wiki/State_management) ਅਸਲ ਵਿੱਚ ਦੋ ਮੁੱਢਲੇ ਪਹੇਲੀਆਂ ਨੂੰ ਹੱਲ ਕਰਨ ਬਾਰੇ ਹੈ:
+
+1. **ਮੇਰਾ ਡਾਟਾ ਕਿੱਥੇ ਹੈ?**: ਇਹ ਪਤਾ ਲਗਾਉਣਾ ਕਿ ਸਾਡੇ ਕੋਲ ਕਿਹੜੀ ਜਾਣਕਾਰੀ ਹੈ ਅਤੇ ਇਹ ਕਿੱਥੋਂ ਆ ਰਹੀ ਹੈ
+2. **ਕੀ ਸਭ ਇੱਕੋ ਪੰਨੇ 'ਤੇ ਹਨ?**: ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਜੋ ਯੂਜ਼ਰ ਦੇਖਦੇ ਹਨ ਉਹ ਅਸਲ ਵਿੱਚ ਹੋ ਰਹੇ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ
+
+**ਸਾਡਾ ਖੇਡ ਯੋਜਨਾ:**
+
+ਅਸੀਂ ਆਪਣੀ ਪੂਛ-ਪੂਛ ਕਰਨ ਦੀ ਬਜਾਏ ਇੱਕ **ਕੇਂਦਰੀਕ੍ਰਿਤ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ** ਸਿਸਟਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਇਸਨੂੰ ਇੱਕ ਬਹੁਤ ਹੀ ਸੁਧਰੇ ਹੋਏ ਵਿਅਕਤੀ ਵਾਂਗ ਸੋਚੋ ਜੋ ਸਾਰੇ ਮਹੱਤਵਪੂਰਨ ਚੀਜ਼ਾਂ ਦਾ ਇੰਚਾਰਜ ਹੈ:
+
+![HTML, ਯੂਜ਼ਰ ਕਾਰਵਾਈਆਂ ਅਤੇ ਸਟੇਟ ਦੇ ਵਿਚਕਾਰ ਡਾਟਾ ਫਲੋਜ਼ ਦਿਖਾਉਣ ਵਾਲੀ ਸਕੀਮਾ](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.pa.png)
+
+```mermaid
+flowchart TD
+    A[User Action] --> B[Event Handler]
+    B --> C[updateState Function]
+    C --> D{State Validation}
+    D -->|Valid| E[Create New State]
+    D -->|Invalid| F[Error Handling]
+    E --> G[Object.freeze]
+    G --> H[Update localStorage]
+    H --> I[Trigger UI Update]
+    I --> J[User Sees Changes]
+    F --> K[User Sees Error]
+    
+    subgraph "State Management Layer"
+        C
+        E
+        G
+    end
+    
+    subgraph "Persistence Layer"
+        H
+        L[localStorage]
+        H -.-> L
+    end
+```
 
 **ਇਸ ਡਾਟਾ ਫਲੋ ਨੂੰ ਸਮਝਣਾ:**
-- **ਕੇਂਦਰੀਕਰਿਤ** ਸਾਰੇ ਐਪਲੀਕੇਸ਼ਨ ਸਟੇਟ ਨੂੰ ਇੱਕ ਸਥਾਨ ਵਿੱਚ
-- **ਰੂਟ** ਸਾਰੇ ਸਟੇਟ ਬਦਲਾਅ ਨੂੰ ਨਿਯੰਤਰਿਤ ਫੰਕਸ਼ਨਾਂ ਰਾਹੀਂ
+- **ਕੇਂਦਰੀਕ੍ਰਿਤ** ਸਾਰੇ ਐਪਲੀਕੇਸ਼ਨ ਸਟੇਟ ਨੂੰ ਇੱਕ ਸਥਾਨ ਵਿੱਚ
+- **ਰੂਟ** ਸਾਰੇ ਸਟੇਟ ਬਦਲਾਅ ਨੂੰ ਨਿਯੰਤਰਿਤ ਫੰਕਸ਼ਨਾਂ ਦੁਆਰਾ
 - **ਯਕੀਨੀ ਬਣਾਉਣਾ** ਕਿ UI ਮੌਜੂਦਾ ਸਟੇਟ ਨਾਲ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ ਰਹੇ
-- **ਪੇਸ਼ਕਸ਼** ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਲਈ ਇੱਕ ਸਾਫ, ਪੇਸ਼ਗੀ ਪੈਟਰਨ
+- **ਪ੍ਰਦਾਨ ਕਰਨਾ** ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਲਈ ਇੱਕ ਸਪਸ਼ਟ, ਪੇਸ਼ਗੂਈਯੋਗ ਪੈਟਰਨ
 
-> 💡 **ਪੇਸ਼ੇਵਰ ਅੰਦਰੂਨੀ ਜਾਣਕਾਰੀ**: ਇਹ ਪਾਠ ਮੁੱਢਲੀ ਸਿਧਾਂਤਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ। ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ, [Redux](https://redux.js.org) ਵਰਗੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਹੋਰ ਉੱਚ-ਸਤਹ ਦੇ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਫੀਚਰ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਮੁੱਢਲੇ ਸਿਧਾਂਤਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਲਾਇਬ੍ਰੇਰੀ 'ਤੇ ਮਾਹਰ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
+> 💡 **ਪੇਸ਼ੇਵਰ ਅੰਦਰੂਨੀ ਜਾਣਕਾਰੀ**: ਇਹ ਪਾਠ ਮੁੱਢਲੇ ਅਸੂਲਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ। ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ, [Redux](https://redux.js.org) ਵਰਗੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਹੋਰ ਉੱਨਤ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਮੁੱਢਲੇ ਅਸੂਲਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚ ਮਾਹਰ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
 
-> ⚠️ **ਉੱਚ-ਸਤਹ ਵਿਸ਼ਾ**: ਅਸੀਂ ਸਟੇਟ ਬਦਲਾਅ ਦੁਆਰਾ ਸਵੈਚਾਲਿਤ UI ਅੱਪਡੇਟਾਂ ਨੂੰ ਕਵਰ ਨਹੀਂ ਕਰਾਂਗੇ, ਕਿਉਂਕਿ ਇਹ [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming) ਸਿਧਾਂਤਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਇਸਨੂੰ ਤੁਹਾਡੇ ਸਿੱਖਣ ਦੇ ਯਾਤਰਾ ਲਈ ਇੱਕ ਸ਼ਾਨਦਾਰ ਅਗਲਾ ਕਦਮ ਸਮਝੋ!
+> ⚠️ **ਉੱਨਤ ਵਿਸ਼ਾ**: ਅਸੀਂ ਸਟੇਟ ਬਦਲਾਅ ਦੁਆਰਾ ਸਵੈਚਾਲਕ UI ਅੱਪਡੇਟਾਂ ਨੂੰ ਕਵਰ ਨਹੀਂ ਕਰਾਂਗੇ, ਕਿਉਂਕਿ ਇਹ [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming) ਅਸੂਲਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਇਸਨੂੰ ਤੁਹਾਡੇ ਸਿੱਖਣ ਦੇ ਸਫਰ ਲਈ ਇੱਕ ਸ਼ਾਨਦਾਰ ਅਗਲਾ ਕਦਮ ਸਮਝੋ!
 
-### ਕੰਮ: ਸਟੇਟ ਸਟ੍ਰਕਚਰ ਨੂੰ ਕੇਂਦਰੀਕਰਿਤ ਕਰੋ
+### ਟਾਸਕ: ਸਟੇਟ ਸਟ੍ਰਕਚਰ ਨੂੰ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕਰੋ
 
-ਆਓ ਆਪਣੀ ਬਿਖਰੀ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਨੂੰ ਇੱਕ ਕੇਂਦਰੀ ਸਿਸਟਮ ਵਿੱਚ ਬਦਲਣਾ ਸ਼ੁਰੂ ਕਰੀਏ। ਇਹ ਪਹਿਲਾ ਕਦਮ ਉਹਨਾਂ ਸਾਰੀਆਂ ਸੁਧਾਰਾਂ ਲਈ ਬੁਨਿਆਦ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ ਜੋ ਅੱਗੇ ਆਉਣਗੇ।
+ਆਓ ਆਪਣੀ ਬਿਖਰੀ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਨੂੰ ਇੱਕ ਕੇਂਦਰੀਕ੍ਰਿਤ ਸਿਸਟਮ ਵਿੱਚ ਬਦਲਣਾ ਸ਼ੁਰੂ ਕਰੀਏ। ਇਹ ਪਹਿਲਾ ਕਦਮ ਉਹਨਾਂ ਸਾਰੇ ਸੁਧਾਰਾਂ ਲਈ ਬੁਨਿਆਦ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ ਜੋ ਅੱਗੇ ਆਉਣਗੇ।
 
 **ਕਦਮ 1: ਇੱਕ ਕੇਂਦਰੀ ਸਟੇਟ ਆਬਜੈਕਟ ਬਣਾਓ**
 
@@ -121,14 +249,14 @@ let state = {
 ```
 
 **ਇਹ ਬਦਲਾਅ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ:**
-- **ਕੇਂਦਰੀਕਰਿਤ** ਸਾਰੇ ਐਪਲੀਕੇਸ਼ਨ ਡਾਟਾ ਨੂੰ ਇੱਕ ਸਥਾਨ ਵਿੱਚ
-- **ਤਿਆਰ ਕਰਦਾ ਹੈ** ਹੋਰ ਸਟੇਟ ਪ੍ਰਾਪਰਟੀਜ਼ ਨੂੰ ਜੋੜਨ ਲਈ ਸਟ੍ਰਕਚਰ
-- **ਸਪਸ਼ਟ ਬਾਊਂਡਰੀ ਬਣਾਉਂਦਾ ਹੈ** ਸਟੇਟ ਅਤੇ ਹੋਰ ਵੈਰੀਏਬਲਾਂ ਦੇ ਵਿਚਕਾਰ
-- **ਪੈਟਰਨ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** ਜੋ ਤੁਹਾਡੀ ਐਪ ਦੇ ਵਧਣ ਨਾਲ ਸਕੇਲ ਕਰਦਾ ਹੈ
+- **ਕੇਂਦਰੀਕ੍ਰਿਤ** ਸਾਰੇ ਐਪਲੀਕੇਸ਼ਨ ਡਾਟਾ ਨੂੰ ਇੱਕ ਸਥਾਨ ਵਿੱਚ
+- **ਤਿਆਰ ਕਰਦਾ ਹੈ** ਸਟ੍ਰਕਚਰ ਨੂੰ ਬਾਅਦ ਵਿੱਚ ਹੋਰ ਸਟੇਟ ਪ੍ਰਾਪਰਟੀਜ਼ ਸ਼ਾਮਲ ਕਰਨ ਲਈ
+- **ਬਣਾਉਂਦਾ ਹੈ** ਸਟੇਟ ਅਤੇ ਹੋਰ ਵੈਰੀਏਬਲਾਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਪਸ਼ਟ ਸੀਮਾ
+- **ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** ਇੱਕ ਪੈਟਰਨ ਜੋ ਤੁਹਾਡੀ ਐਪ ਦੇ ਵਧਣ ਦੇ ਨਾਲ ਸਕੇਲ ਕਰਦਾ ਹੈ
 
-**ਕਦਮ 2: ਸਟੇਟ ਐਕਸੈਸ ਪੈਟਰਨ ਨੂੰ ਅੱਪਡੇਟ ਕਰੋ**
+**ਕਦਮ 2: ਸਟੇਟ ਐਕਸੈਸ ਪੈਟਰਨਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰੋ**
 
-ਆਪਣੇ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਨਵੀਂ ਸਟੇਟ ਸਟ੍ਰਕਚਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਅੱਪਡੇਟ ਕਰੋ:
+ਆਪਣੇ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਨਵੇਂ ਸਟੇਟ ਸਟ੍ਰਕਚਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਅੱਪਡੇਟ ਕਰੋ:
 
 **`register()` ਅਤੇ `login()` ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ**, ਬਦਲੋ:
 ```js
@@ -145,37 +273,74 @@ state.account = ...
 const account = state.account;
 ```
 
-**ਇਹ ਅੱਪਡੇਟ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ:**
-- **ਮੌਜੂਦਾ ਕਾਰਗੁਜ਼ਾਰੀ ਨੂੰ ਬਣਾਈ ਰੱਖਦੇ ਹਨ** ਜਦੋਂ ਕਿ ਸਟ੍ਰਕਚਰ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹਨ
-- **ਤਿਆਰ ਕਰਦੇ ਹਨ** ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹੋਰ ਜਟਿਲ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਲਈ
-- **ਸਟੇਟ ਡਾਟਾ ਤੱਕ ਪਹੁੰਚ ਲਈ ਸਥਿਰ ਪੈਟਰਨ ਬਣਾਉਂਦੇ ਹਨ**
-- **ਕੇਂਦਰੀ ਸਟੇਟ ਅੱਪਡੇਟਾਂ ਲਈ ਬੁਨਿਆਦ ਸਥਾਪਿਤ ਕਰਦੇ ਹਨ**
+**ਇਹ ਅੱਪਡੇਟਾਂ ਕੀ
+| **ਇਹ ਕਿੰਨਾ ਸਮਾਂ ਰਹੇ?** | ਲੌਗਇਨ ਸਟੇਟ ਵਿਰੁੱਧ ਅਸਥਾਈ UI ਪਸੰਦਾਂ | ਸਟੋਰੇਜ ਦੀ ਮਿਆਦ ਚੁਣੋ |
+| **ਕੀ ਸਰਵਰ ਨੂੰ ਇਸ ਦੀ ਲੋੜ ਹੈ?** | ਪ੍ਰਮਾਣਿਕਤਾ ਟੋਕਨ ਵਿਰੁੱਧ UI ਸੈਟਿੰਗਾਂ | ਸਾਂਝੇ ਕਰਨ ਦੀਆਂ ਜ਼ਰੂਰਤਾਂ ਦਾ ਨਿਰਣਯ ਕਰੋ |
+
+**ਬ੍ਰਾਊਜ਼ਰ ਸਟੋਰੇਜ ਵਿਕਲਪ:**
 
-> 💡 **ਨੋਟ**: ਇਹ ਰੀਫੈਕਟੋਰਿੰਗ ਤੁਰੰਤ ਸਾਡੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਨਹੀਂ ਕਰਦੀ, ਪਰ ਇਹ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸੁਧਾਰਾਂ ਲਈ ਜ਼ਰੂਰੀ ਬੁਨਿਆਦ ਬਣਾਉਂਦੀ ਹੈ!
+ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਵੱਖ-ਵੱਖ ਸਟੋਰੇਜ ਮਕੈਨਿਜ਼ਮ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਜੋ ਹਰ ਕਿਸਮ ਦੇ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਲਈ ਬਣਾਏ ਗਏ ਹਨ:
 
-## ਨਿਯੰਤਰਿਤ ਸਟੇਟ ਅੱਪਡੇਟਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ
+**ਮੁੱਖ ਸਟੋਰੇਜ APIs:**
 
-ਸਾਡੇ ਸਟੇਟ ਨੂੰ ਕੇਂਦਰੀਕਰਿਤ ਕਰਨ ਨਾਲ, ਅਗਲਾ ਕਦਮ ਡਾਟਾ ਬਦਲਾਅ ਲਈ ਨਿਯੰਤਰਿਤ ਮਕੈਨਿਜ਼ਮ ਸਥਾਪਿਤ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ। ਇਹ ਪਹੁੰਚ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਸਟੇਟ ਬਦਲਾਅ ਪੇਸ਼ਗੀ ਹਨ ਅਤੇ ਡਿਬੱਗਿੰਗ ਆਸਾਨ ਹੈ।
+1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: ਸਥਾਈ [ਕੀ/ਮੁੱਲ ਸਟੋਰੇਜ](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
+   - **ਡਾਟਾ** ਬ੍ਰਾਊਜ਼ਰ ਸੈਸ਼ਨ ਦੇ ਦੌਰਾਨ ਅਨੰਤ ਸਮੇਂ ਲਈ ਸਥਾਈ ਰਹਿੰਦੀ ਹੈ  
+   - **ਬ੍ਰਾਊਜ਼ਰ** ਰੀਸਟਾਰਟ ਅਤੇ ਕੰਪਿਊਟਰ ਰੀਬੂਟ ਤੋਂ ਬਾਅਦ ਵੀ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦੀ ਹੈ
+   - **ਵੈਬਸਾਈਟ ਡੋਮੇਨ** ਲਈ ਸੀਮਿਤ
+   - **ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਅਤੇ ਲੌਗਇਨ ਸਟੇਟ ਲਈ** ਬਹੁਤ ਵਧੀਆ
 
-ਮੁੱਖ ਸਿਧਾਂਤ ਹਵਾਈ ਟ੍ਰੈਫਿਕ ਕੰਟਰੋਲ ਵਰਗਾ ਹੈ: ਸਟੇਟ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਬਦਲਣ ਦੇਣ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਸਾਰੇ ਬਦਲਾਅ ਨੂੰ ਇੱਕ ਨਿਯੰਤਰਿਤ ਫੰਕਸ਼ਨ ਰਾਹੀਂ ਚੈਨਲ ਕਰਾਂਗੇ। ਇਹ ਪੈਟਰਨ ਇਹ ਸਪਸ਼ਟ ਨਿਗਰਾਨੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਕਿ ਕਦੋਂ ਅਤੇ ਕਿਵੇਂ ਡਾਟਾ ਬਦਲਦਾ ਹੈ।
+2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: ਅਸਥਾਈ ਸੈਸ਼ਨ ਸਟੋਰੇਜ
+   - **localStorage ਵਾਂਗ** ਹੀ ਸੈਸ਼ਨ ਦੇ ਦੌਰਾਨ ਕੰਮ ਕਰਦੀ ਹੈ
+   - **ਆਪਣੇ ਆਪ** ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਬੰਦ ਹੋਣ 'ਤੇ ਸਾਫ਼ ਹੋ ਜਾਂਦੀ ਹੈ
+   - **ਅਸਥਾਈ ਡਾਟਾ ਲਈ** ਬਹੁਤ ਵਧੀਆ ਜੋ ਸਥਾਈ ਨਹੀਂ ਰਹਿਣਾ ਚਾਹੀਦਾ
 
-**ਅਮਿਊਟੇਬਲ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ:**
+3. **[HTTP Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: ਸਰਵਰ-ਸਾਂਝੇ ਸਟੋਰੇਜ
+   - **ਹਰ ਸਰਵਰ ਰਿਕਵੈਸਟ ਨਾਲ** ਆਪਣੇ ਆਪ ਭੇਜੀ ਜਾਂਦੀ ਹੈ
+   - **ਪ੍ਰਮਾਣਿਕਤਾ ਟੋਕਨ ਲਈ** ਬਹੁਤ ਵਧੀਆ
+   - **ਆਕਾਰ ਵਿੱਚ ਸੀਮਿਤ** ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ 'ਤੇ ਅਸਰ ਪਾ ਸਕਦੀ ਹੈ
 
-ਅਸੀਂ ਆਪਣੇ `state` ਆਬਜੈਕਟ ਨੂੰ [*immutable*](https://en.wikipedia.org/wiki/Immutable_object) ਵਜੋਂ ਮੰਨਾਂਗੇ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਅਸੀਂ ਇਸਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਬਦਲਦੇ ਨਹੀਂ। ਇਸਦੀ ਬਜਾਏ, ਹਰ ਬਦਲਾਅ ਇੱਕ ਨਵਾਂ ਸਟੇਟ ਆਬਜੈਕਟ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਅੱਪਡੇਟ ਕੀਤਾ ਡਾਟਾ ਹੁੰਦਾ ਹੈ।
+**ਡਾਟਾ ਸਿਰੀਅਲਾਈਜ਼ੇਸ਼ਨ ਦੀ ਲੋੜ:**
 
-ਜਦੋਂ ਕਿ ਇਹ ਪਹੁੰਚ ਸਿੱਧੇ ਬਦਲਾਅ ਦੇ ਮੁਕਾਬਲੇ ਸ਼ੁਰੂ ਵਿੱਚ ਅਸਰਦਾਰ ਨਹੀਂ ਲੱਗਦੀ, ਇਹ ਡਿਬੱਗਿੰਗ, ਟੈਸਟਿੰਗ, ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਪੇਸ਼ਗੀਤਾ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਫਾਇਦੇ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ।
+`localStorage` ਅਤੇ `sessionStorage` ਸਿਰਫ਼ [strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) ਸਟੋਰ ਕਰਦੇ ਹਨ:
 
-**ਅਮਿਊਟੇਬਲ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਫਾਇਦੇ:**
+```js
+// Convert objects to JSON strings for storage
+const accountData = { user: 'john', balance: 150 };
+localStorage.setItem('account', JSON.stringify(accountData));
 
-| ਫਾਇਦਾ | ਵੇਰਵਾ | ਪ੍ਰਭਾਵ |
-|---------|-------------|--------|
-| **ਪੇਸ਼ਗੀਤਾ** | ਬਦਲਾਅ ਸਿਰਫ ਨਿਯੰਤਰਿਤ ਫੰਕਸ਼ਨਾਂ ਰਾਹੀਂ ਹੁੰਦੇ ਹਨ | ਡਿਬੱਗ ਅਤੇ ਟੈਸਟ ਕਰਨਾ ਆਸਾਨ |
-| **ਇਤਿਹਾਸ ਟ੍ਰੈਕਿੰਗ** | ਹਰ ਸਟੇਟ ਬਦਲਾਅ ਇੱਕ ਨਵ
-> 💡 **ਤਕਨੀਕੀ ਵਿਕਲਪ**: ਵੱਡੇ ਡਾਟਾਸੈਟ ਵਾਲੀਆਂ ਜਟਿਲ ਆਫਲਾਈਨ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ, [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) ਬਾਰੇ ਸੋਚੋ। ਇਹ ਪੂਰੀ ਕਲਾਇੰਟ-ਸਾਈਡ ਡਾਟਾਬੇਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਪਰ ਇਸਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਵਧੇਰੇ ਜਟਿਲਤਾ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
+// Parse JSON strings back to objects when retrieving
+const savedAccount = JSON.parse(localStorage.getItem('account'));
+```
+
+**ਸਿਰੀਅਲਾਈਜ਼ੇਸ਼ਨ ਨੂੰ ਸਮਝਣਾ:**
+- **JavaScript ਆਬਜੈਕਟ ਨੂੰ JSON strings ਵਿੱਚ ਬਦਲਦਾ** [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **JSON ਤੋਂ ਆਬਜੈਕਟ ਨੂੰ ਮੁੜ ਬਣਾਉਂਦਾ** [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) ਦੀ ਵਰਤੋਂ ਕਰਕੇ
+- **ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਜਟਿਲ nested ਆਬਜੈਕਟ ਅਤੇ arrays ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ**
+- **ਫੰਕਸ਼ਨ, undefined values, ਅਤੇ circular references 'ਤੇ ਫੇਲ੍ਹ ਹੁੰਦਾ ਹੈ**
+
+💡 **ਅਗਾਂਹ ਦਾ ਵਿਕਲਪ**: ਜਟਿਲ offline ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਵੱਡੇ ਡਾਟਾਸੈਟ ਹਨ, [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) ਨੂੰ ਵਿਚਾਰੋ। ਇਹ ਇੱਕ ਪੂਰੀ client-side ਡਾਟਾਬੇਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਪਰ ਇਸ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਵਧੇਰੇ ਜਟਿਲਤਾ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
+
+```mermaid
+quadrantChart
+    title Browser Storage Options
+    x-axis Low Complexity --> High Complexity
+    y-axis Short Duration --> Long Duration
+    
+    quadrant-1 Professional Tools
+    quadrant-2 Simple Persistence
+    quadrant-3 Temporary Storage
+    quadrant-4 Advanced Systems
+    
+    localStorage: [0.3, 0.8]
+    sessionStorage: [0.2, 0.2]
+    HTTP Cookies: [0.6, 0.7]
+    IndexedDB: [0.9, 0.9]
+    Memory Variables: [0.1, 0.1]
+```
 
 ### ਟਾਸਕ: localStorage Persistence ਲਾਗੂ ਕਰੋ
 
-ਆਓ ਪERSISTENT ਸਟੋਰੇਜ ਲਾਗੂ ਕਰੀਏ ਤਾਂ ਕਿ ਯੂਜ਼ਰ explicit ਤੌਰ 'ਤੇ ਲੌਗ ਆਉਟ ਕਰਨ ਤੱਕ ਲੌਗਇਨ ਰਹਿ ਸਕਣ। ਅਸੀਂ `localStorage` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬ੍ਰਾਊਜ਼ਰ ਸੈਸ਼ਨ ਵਿੱਚ ਖਾਤੇ ਦੇ ਡਾਟਾ ਨੂੰ ਸਟੋਰ ਕਰਾਂਗੇ।
+ਆਓ ਸਥਾਈ ਸਟੋਰੇਜ ਲਾਗੂ ਕਰੀਏ ਤਾਂ ਕਿ ਯੂਜ਼ਰ explicit ਤੌਰ 'ਤੇ ਲੌਗਆਉਟ ਕਰਨ ਤੱਕ ਲੌਗਇਨ ਰਹੇ। ਅਸੀਂ `localStorage` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਖਾਤੇ ਦੇ ਡਾਟਾ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਸੈਸ਼ਨ ਦੇ ਦੌਰਾਨ ਸਟੋਰ ਕਰਾਂਗੇ।
 
 **ਪਹਿਲਾ ਕਦਮ: ਸਟੋਰੇਜ ਕਨਫਿਗਰੇਸ਼ਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ**
 
@@ -184,10 +349,10 @@ const storageKey = 'savedAccount';
 ```
 
 **ਇਹ constant ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:**
-- **ਸਥਿਰ ਪਛਾਣਕਰਤਾ ਬਣਾਉਂਦਾ ਹੈ** ਸਟੋਰ ਕੀਤੇ ਡਾਟਾ ਲਈ
-- **ਟਾਈਪੋਜ਼ ਨੂੰ ਰੋਕਦਾ ਹੈ** ਸਟੋਰੇਜ ਕੀ ਰਿਫਰੈਂਸ ਵਿੱਚ
-- **ਸਟੋਰੇਜ ਕੀ ਨੂੰ ਬਦਲਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ** ਜੇ ਲੋੜ ਹੋਵੇ
-- **ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ** ਸਥਿਰ ਕੋਡ ਲਈ
+- **ਸਾਡੇ ਸਟੋਰ ਕੀਤੇ ਡਾਟਾ ਲਈ ਇੱਕ ਸਥਿਰ ਪਛਾਣਕਰਤਾ ਬਣਾਉਂਦਾ ਹੈ**
+- **ਸਟੋਰੇਜ ਕੀ ਰਿਫਰੈਂਸ ਵਿੱਚ ਟਾਈਪੋਜ਼ ਨੂੰ ਰੋਕਦਾ ਹੈ**
+- **ਸਟੋਰੇਜ ਕੀ ਨੂੰ ਬਦਲਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ**
+- **ਮੈਂਟੇਨਬਲ ਕੋਡ ਲਈ** ਸ੍ਰੇਸ਼ਠ ਪ੍ਰਥਾਵਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ
 
 **ਦੂਜਾ ਕਦਮ: Automatic Persistence ਸ਼ਾਮਲ ਕਰੋ**
 
@@ -197,15 +362,15 @@ const storageKey = 'savedAccount';
 localStorage.setItem(storageKey, JSON.stringify(state.account));
 ```
 
-**ਇਸਦੇ ਪਿੱਛੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
-- **ਖਾਤੇ ਦੇ ਆਬਜੈਕਟ ਨੂੰ JSON ਸਟ੍ਰਿੰਗ ਵਿੱਚ ਬਦਲਦਾ ਹੈ** ਸਟੋਰੇਜ ਲਈ
-- **ਡਾਟਾ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ** ਸਾਡੇ ਸਥਿਰ ਸਟੋਰੇਜ ਕੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਆਪਮਾਤਰ ਚਲਾਉਂਦਾ ਹੈ** ਜਦੋਂ ਸਟੇਟ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਹੁੰਦੀਆਂ ਹਨ
-- **ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ** ਕਿ ਸਟੋਰ ਕੀਤਾ ਡਾਟਾ ਹਮੇਸ਼ਾ ਮੌਜੂਦਾ ਸਟੇਟ ਨਾਲ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ ਰਹੇ
+**ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
+- **ਖਾਤੇ ਦੇ ਆਬਜੈਕਟ ਨੂੰ JSON string ਵਿੱਚ ਬਦਲਦਾ ਹੈ** ਸਟੋਰੇਜ ਲਈ
+- **ਸਾਡੇ ਸਥਿਰ ਸਟੋਰੇਜ ਕੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਡਾਟਾ ਸੇਵ ਕਰਦਾ ਹੈ**
+- **ਜਦੋਂ ਵੀ ਸਟੇਟ ਵਿੱਚ ਬਦਲਾਅ ਹੁੰਦਾ ਹੈ ਤਾਂ ਆਪਣੇ ਆਪ ਚਲਦਾ ਹੈ**
+- **ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਸਟੋਰ ਕੀਤਾ ਡਾਟਾ ਹਮੇਸ਼ਾ ਮੌਜੂਦਾ ਸਟੇਟ ਨਾਲ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ ਰਹੇ**
 
-> 💡 **ਆਰਕੀਟੈਕਚਰ ਦਾ ਫਾਇਦਾ**: ਕਿਉਂਕਿ ਅਸੀਂ ਸਾਰੇ ਸਟੇਟ ਅਪਡੇਟ ਨੂੰ `updateState()` ਰਾਹੀਂ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕੀਤਾ ਹੈ, ਪERSISTENCE ਸ਼ਾਮਲ ਕਰਨਾ ਸਿਰਫ ਇੱਕ ਲਾਈਨ ਕੋਡ ਦੀ ਲੋੜ ਸੀ। ਇਹ ਚੰਗੇ ਆਰਕੀਟੈਕਚਰਲ ਫੈਸਲਿਆਂ ਦੀ ਤਾਕਤ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ!
+💡 **ਆਰਕੀਟੈਕਚਰ ਦਾ ਫਾਇਦਾ**: ਕਿਉਂਕਿ ਅਸੀਂ ਸਾਰੇ ਸਟੇਟ ਅਪਡੇਟ ਨੂੰ `updateState()` ਵਿੱਚ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕੀਤਾ ਹੈ, persistence ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਲਾਈਨ ਕੋਡ ਦੀ ਲੋੜ ਸੀ। ਇਹ ਚੰਗੇ ਆਰਕੀਟੈਕਚਰਲ ਫੈਸਲੇ ਦੀ ਤਾਕਤ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ!
 
-**ਤੀਜਾ ਕਦਮ: ਐਪ ਲੋਡ 'ਤੇ ਸਟੇਟ ਨੂੰ ਮੁੜ ਸਥਾਪਿਤ ਕਰੋ**
+**ਤੀਜਾ ਕਦਮ: ਐਪ ਲੋਡ 'ਤੇ ਸਟੇਟ ਮੁੜ ਸਥਾਪਿਤ ਕਰੋ**
 
 ਸੇਵ ਕੀਤੇ ਡਾਟਾ ਨੂੰ ਮੁੜ ਸਥਾਪਿਤ ਕਰਨ ਲਈ ਇੱਕ initialization ਫੰਕਸ਼ਨ ਬਣਾਓ:
 
@@ -224,12 +389,12 @@ function init() {
 init();
 ```
 
-**Initialization ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝਣਾ:**
-- **ਪਹਿਲਾਂ ਸਟੋਰ ਕੀਤਾ ਖਾਤਾ ਡਾਟਾ localStorage ਤੋਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ**
-- **JSON ਸਟ੍ਰਿੰਗ ਨੂੰ ਮੁੜ JavaScript ਆਬਜੈਕਟ ਵਿੱਚ ਪਾਰਸ ਕਰਦਾ ਹੈ**
+**ਮੁੜ ਸਥਾਪਨਾ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝਣਾ:**
+- **localStorage ਤੋਂ ਪਹਿਲਾਂ ਸੇਵ ਕੀਤੇ ਖਾਤੇ ਦੇ ਡਾਟਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ**
+- **JSON string ਨੂੰ ਮੁੜ JavaScript ਆਬਜੈਕਟ ਵਿੱਚ ਬਦਲਦਾ ਹੈ**
 - **ਸਾਡੇ ਨਿਯੰਤਰਿਤ ਅਪਡੇਟ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਟੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ**
-- **ਯੂਜ਼ਰ ਦਾ ਸੈਸ਼ਨ ਆਪਣੇ ਆਪ ਮੁੜ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** ਪੇਜ ਲੋਡ 'ਤੇ
-- **ਰੂਟ ਅਪਡੇਟ ਤੋਂ ਪਹਿਲਾਂ ਚਲਾਉਂਦਾ ਹੈ** ਤਾਂ ਜੋ ਸਟੇਟ ਉਪਲਬਧ ਹੋਵੇ
+- **ਯੂਜ਼ਰ ਦੇ ਸੈਸ਼ਨ ਨੂੰ ਆਪਣੇ ਆਪ ਮੁੜ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ**
+- **ਰੂਟ ਅਪਡੇਟ ਤੋਂ ਪਹਿਲਾਂ ਚਲਦਾ ਹੈ ਤਾਂ ਕਿ ਸਟੇਟ ਉਪਲਬਧ ਹੋਵੇ
 
 **ਚੌਥਾ ਕਦਮ: Default Route ਨੂੰ Optimize ਕਰੋ**
 
@@ -242,166 +407,22 @@ return navigate('/dashboard');
 ```
 
 **ਇਹ ਬਦਲਾਅ ਕਿਉਂ ਸਹੀ ਹੈ:**
-- **ਸਾਡੇ ਨਵੇਂ persistence ਸਿਸਟਮ ਦਾ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਲਾਭ ਲੈਂਦਾ ਹੈ**
+- **ਸਾਡੇ ਨਵੇਂ persistence ਸਿਸਟਮ ਦਾ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤੌਰ 'ਤੇ ਲਾਭ ਲੈਂਦਾ ਹੈ**
 - **ਡੈਸ਼ਬੋਰਡ ਨੂੰ authentication ਚੈੱਕ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ**
-- **ਆਪਮਾਤਰ ਲੌਗਇਨ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਦਾ ਹੈ ਜੇ ਕੋਈ ਸੇਵ ਕੀਤੀ ਸੈਸ਼ਨ ਮੌਜੂਦ ਨਹੀਂ ਹੈ**
+- **ਜੇਕਰ ਕੋਈ ਸੇਵ ਕੀਤੀ ਸੈਸ਼ਨ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਤਾਂ ਆਪਣੇ ਆਪ ਲੌਗਇਨ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਦਾ ਹੈ**
 - **ਇੱਕ ਵਧੀਆ ਯੂਜ਼ਰ ਅਨੁਭਵ ਬਣਾਉਂਦਾ ਹੈ**
 
-**ਤੁਹਾਡੀ Implementation ਦੀ ਟੈਸਟਿੰਗ:**
+**ਤੁਹਾਡੀ ਲਾਗੂ ਕੀਤੀ ਗਈ ਸਿਸਟਮ ਦੀ ਜਾਂਚ:**
 
 1. ਆਪਣੇ ਬੈਂਕਿੰਗ ਐਪ ਵਿੱਚ ਲੌਗਇਨ ਕਰੋ
 2. ਬ੍ਰਾਊਜ਼ਰ ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ
-3. ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਲੌਗਇਨ ਰਹਿੰਦੇ ਹੋ ਅਤੇ ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਹੋ
-4. ਆਪਣਾ ਬ੍ਰਾਊਜ਼ਰ ਬੰਦ ਕਰੋ ਅਤੇ ਮੁੜ ਖੋਲ੍ਹੋ
+3. ਪੁਸ਼ਟੀ ਕਰੋ ਕਿ ਤੁਸੀਂ ਲੌਗਇਨ ਰਹੇ ਹੋ ਅਤੇ ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਹੋ
+4. ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਬੰਦ ਕਰੋ ਅਤੇ ਮੁੜ ਖੋਲ੍ਹੋ
 5. ਮੁੜ ਆਪਣੇ ਐਪ 'ਤੇ ਜਾਓ ਅਤੇ ਪੁਸ਼ਟੀ ਕਰੋ ਕਿ ਤੁਸੀਂ ਹਾਲੇ ਵੀ ਲੌਗਇਨ ਹੋ
 
-🎉 **ਸਫਲਤਾ ਪ੍ਰਾਪਤ ਕੀਤੀ**: ਤੁਸੀਂ ਸਫਲਤਾਪੂਰਵਕ persistent state management ਲਾਗੂ ਕਰ ਦਿੱਤੀ ਹੈ! ਹੁਣ ਤੁਹਾਡਾ ਐਪ ਇੱਕ ਪੇਸ਼ੇਵਰ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਾਂਗ ਵਰਤਦਾ ਹੈ।
-
-## Persistence ਅਤੇ Data Freshness ਦੇ ਵਿਚਕਾਰ ਸੰਤੁਲਨ
-
-ਸਾਡਾ persistence ਸਿਸਟਮ ਸਫਲਤਾਪੂਰਵਕ ਯੂਜ਼ਰ ਸੈਸ਼ਨ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ, ਪਰ ਇੱਕ ਨਵਾਂ ਚੁਣੌਤੀ ਪੇਸ਼ ਕਰਦਾ ਹੈ: ਡਾਟਾ ਦੀ ਪੁਰਾਣੇ ਹੋਣ ਦੀ ਸਮੱਸਿਆ। ਜਦੋਂ ਕਈ ਯੂਜ਼ਰ ਜਾਂ ਐਪਲੀਕੇਸ਼ਨ ਇੱਕੋ ਸਰਵਰ ਡਾਟਾ ਨੂੰ ਸੋਧਦੇ ਹਨ, ਤਾਂ ਸਥਾਨਕ cached ਜਾਣਕਾਰੀ ਪੁਰਾਣੀ ਹੋ ਜਾਂਦੀ ਹੈ।
-
-ਇਹ ਸਥਿਤੀ ਉਹਨਾਂ ਵਾਇਕਿੰਗ ਨੈਵੀਗੇਟਰਾਂ ਵਰਗੀ ਹੈ ਜੋ ਸਟੋਰ ਕੀਤੇ ਸਟਾਰ ਚਾਰਟ ਅਤੇ ਮੌਜੂਦਾ ਤਾਰਿਆਂ ਦੇ ਅਧਿਐਨ ਦੋਵਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਸਨ। ਚਾਰਟ ਸਥਿਰਤਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਸਨ, ਪਰ ਨੈਵੀਗੇਟਰਾਂ ਨੂੰ ਬਦਲਦੇ ਹਾਲਾਤਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਣ ਲਈ ਤਾਜ਼ਾ ਅਧਿਐਨ ਦੀ ਲੋੜ ਸੀ। ਇਸੇ ਤਰ੍ਹਾਂ, ਸਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਦੋਵਾਂ, ਯੂਜ਼ਰ ਸਟੇਟ ਅਤੇ ਮੌਜੂਦਾ ਸਰਵਰ ਡਾਟਾ ਦੀ ਲੋੜ ਹੈ।
-
-**🧪 Data Freshness ਦੀ ਸਮੱਸਿਆ ਦੀ ਖੋਜ:**
-
-1. `test` ਖਾਤੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਲੌਗਇਨ ਕਰੋ
-2. ਇਸ ਕਮਾਂਡ ਨੂੰ ਟਰਮੀਨਲ ਵਿੱਚ ਚਲਾਓ ਤਾਂ ਕਿ ਕਿਸੇ ਹੋਰ ਸਰੋਤ ਤੋਂ ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨ ਨੂੰ simulate ਕੀਤਾ ਜਾ ਸਕੇ:
-
-```sh
-curl --request POST \
-     --header "Content-Type: application/json" \
-     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
-     http://localhost:5000/api/accounts/test/transactions
-```
-
-3. ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ
-4. ਦੇਖੋ ਕਿ ਕੀ ਤੁਹਾਨੂੰ ਨਵੀਂ ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ
-
-**ਇਹ ਟੈਸਟ ਕੀ ਦਰਸਾਉਂਦਾ ਹੈ:**
-- **ਦਿਖਾਉਂਦਾ ਹੈ** ਕਿ local storage "stale" (ਪੁਰਾਣਾ) ਹੋ ਸਕਦਾ ਹੈ
-- **ਅਸਲੀ ਜ਼ਿੰਦਗੀ ਦੇ ਸਥਿਤੀਆਂ ਨੂੰ simulate ਕਰਦਾ ਹੈ** ਜਿੱਥੇ ਡਾਟਾ ਬਦਲਦਾ ਹੈ
-- **Persistence ਅਤੇ Data Freshness ਦੇ ਵਿਚਕਾਰ ਤਣਾਅ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ**
-
-**Data Staleness ਦੀ ਚੁਣੌਤੀ:**
-
-| ਸਮੱਸਿਆ | ਕਾਰਨ | ਯੂਜ਼ਰ 'ਤੇ ਪ੍ਰਭਾਵ |
-|---------|-------|-------------|
-| **ਪੁਰਾਣਾ ਡਾਟਾ** | localStorage ਆਪਣੇ ਆਪ expire ਨਹੀਂ ਹੁੰਦਾ | ਯੂਜ਼ਰ ਪੁਰਾਣੀ ਜਾਣਕਾਰੀ ਦੇਖਦੇ ਹਨ |
-| **ਸਰਵਰ ਬਦਲਾਅ** | ਹੋਰ ਐਪ/ਯੂਜ਼ਰ ਇੱਕੋ ਡਾਟਾ ਨੂੰ ਸੋਧਦੇ ਹਨ | ਪਲੇਟਫਾਰਮਾਂ ਵਿੱਚ ਅਸੰਗਤ ਦ੍ਰਿਸ਼ |
-| **Cache vs. Reality** | ਸਥਾਨਕ cache ਸਰਵਰ ਸਟੇਟ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ | ਖਰਾਬ ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਗੁੰਝਲ |
-
-**ਸਮੱਸਿਆ ਦਾ ਹੱਲ:**
-
-ਅਸੀਂ "refresh on load" ਪੈਟਰਨ ਲਾਗੂ ਕਰਾਂਗੇ ਜੋ persistence ਦੇ ਫਾਇਦੇ ਨੂੰ ਤਾਜ਼ਾ ਡਾਟਾ ਦੀ ਲੋੜ ਨਾਲ ਸੰਤੁਲਿਤ ਕਰਦਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਸਹੀ ਡਾਟਾ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਜਦੋਂ ਕਿ smooth ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਬਣਾਈ ਰੱਖਦੀ ਹੈ।
-
-### ਟਾਸਕ: Data Refresh System ਲਾਗੂ ਕਰੋ
-
-ਅਸੀਂ ਇੱਕ ਸਿਸਟਮ ਬਣਾਵਾਂਗੇ ਜੋ ਸਰਵਰ ਤੋਂ ਤਾਜ਼ਾ ਡਾਟਾ ਆਪਣੇ ਆਪ ਲੈ ਕੇ ਆਉਂਦਾ ਹੈ ਜਦੋਂ ਕਿ ਸਾਡੇ persistent state management ਦੇ ਫਾਇਦੇ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ।
-
-**ਪਹਿਲਾ ਕਦਮ: Account Data Updater ਬਣਾਓ**
-
-```js
-async function updateAccountData() {
-  const account = state.account;
-  if (!account) {
-    return logout();
-  }
-
-  const data = await getAccount(account.user);
-  if (data.error) {
-    return logout();
-  }
-
-  updateState('account', data);
-}
-```
-
-**ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਲਾਜ਼ਿਕ ਨੂੰ ਸਮਝਣਾ:**
-- **ਚੈੱਕ ਕਰਦਾ ਹੈ** ਕਿ ਕੀ ਯੂਜ਼ਰ ਹਾਲੇ ਵੀ ਲੌਗਇਨ ਹੈ (state.account ਮੌਜੂਦ ਹੈ)
-- **ਲੌਗਆਉਟ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਦਾ ਹੈ** ਜੇ ਕੋਈ ਵੈਧ ਸੈਸ਼ਨ ਨਹੀਂ ਮਿਲਦਾ
-- **ਤਾਜ਼ਾ ਖਾਤਾ ਡਾਟਾ ਸਰਵਰ ਤੋਂ ਲੈਂਦਾ ਹੈ** ਮੌਜੂਦਾ `getAccount()` ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **ਸਰਵਰ ਦੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਹੈਂਡਲ ਕਰਦਾ ਹੈ** ਗਲਤ ਸੈਸ਼ਨ ਨੂੰ ਲੌਗਆਉਟ ਕਰਕੇ
-- **ਤਾਜ਼ਾ ਡਾਟਾ ਨਾਲ ਸਟੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ** ਸਾਡੇ ਨਿਯੰਤਰਿਤ ਅਪਡੇਟ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
-- **localStorage persistence ਨੂੰ ਆਪਣੇ ਆਪ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ** `updateState()` ਫੰਕਸ਼ਨ ਰਾਹੀਂ
-
-**ਦੂਜਾ ਕਦਮ: Dashboard Refresh Handler ਬਣਾਓ**
-
-```js
-async function refresh() {
-  await updateAccountData();
-  updateDashboard();
-}
-```
-
-**ਇਹ refresh ਫੰਕਸ਼ਨ ਕੀ ਕਰਦਾ ਹੈ:**
-- **ਡਾਟਾ ਰੀਫ੍ਰੈਸ਼ ਅਤੇ UI ਅਪਡੇਟ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਾਂਝਾ ਕਰਦਾ ਹੈ**
-- **ਤਾਜ਼ਾ ਡਾਟਾ ਲੋਡ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ** ਡਿਸਪਲੇਅ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ
-- **ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ** ਕਿ ਡੈਸ਼ਬੋਰਡ ਸਭ ਤੋਂ ਮੌਜੂਦਾ ਜਾਣਕਾਰੀ ਦਿਖਾਉਂਦਾ ਹੈ
-- **ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਅਤੇ UI ਅਪਡੇਟ ਦੇ ਵਿਚਕਾਰ ਸਾਫ਼ ਵੱਖਰਾ ਬਣਾਈ ਰੱਖਦਾ ਹੈ**
-
-**ਤੀਜਾ ਕਦਮ: Route System ਨਾਲ ਇੰਟੀਗਰੇਟ ਕਰੋ**
-
-ਆਪਣੇ route configuration ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਕਿ refresh ਆਪਣੇ ਆਪ ਟ੍ਰਿਗਰ ਹੋਵੇ:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: refresh }
-};
-```
-
-**ਇਹ ਇੰਟੀਗਰੇਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:**
-- **refresh ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ** ਹਰ ਵਾਰ ਜਦੋਂ ਡੈਸ਼ਬੋਰਡ route ਲੋਡ ਹੁੰਦਾ ਹੈ
-- **ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ** ਕਿ ਤਾਜ਼ਾ ਡਾਟਾ ਹਮੇਸ਼ਾ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਯੂਜ਼ਰ ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਜਾਂਦੇ ਹਨ
-- **ਮੌਜੂਦਾ route ਸਟ੍ਰਕਚਰ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ** ਜਦੋਂ ਕਿ ਡਾਟਾ freshness ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ
-- **route-specific initialization ਲਈ ਇੱਕ ਸਥਿਰ ਪੈਟਰਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
-
-**ਤੁਹਾਡੀ Data Refresh System ਦੀ ਟੈਸਟਿੰਗ:**
-
-1. ਆਪਣੇ ਬੈਂਕਿੰਗ ਐਪ ਵਿੱਚ ਲੌਗਇਨ ਕਰੋ
-2. ਪਹਿਲਾਂ ਦੀ curl ਕਮਾਂਡ ਚਲਾਓ ਤਾਂ ਕਿ ਨਵੀਂ ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨ ਬਣਾਈ ਜਾ ਸਕੇ
-3. ਆਪਣੇ ਡੈਸ਼ਬੋਰਡ ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ ਜਾਂ ਦੂਰ ਜਾਓ ਅਤੇ ਮੁੜ ਆਓ
-4. ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਨਵੀਂ ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨ ਤੁਰੰਤ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ
-
-🎉 **ਸੰਤੁਲਨ ਪੂਰਾ ਕੀਤਾ**: ਹੁਣ ਤੁਹਾਡਾ ਐਪ persistent state ਦੇ smooth ਅਨੁਭਵ ਨੂੰ ਤਾਜ਼ਾ ਸਰਵਰ ਡਾਟਾ ਦੀ ਸਹੀਤਾ ਨਾਲ ਜੋੜਦਾ ਹੈ!
-
-## GitHub Copilot Agent Challenge 🚀
-
-Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
-
-**ਵੇਰਵਾ:** ਬੈਂਕਿੰਗ ਐਪ ਲਈ undo/redo functionality ਵਾਲਾ ਇੱਕ ਵਿਆਪਕ state management ਸਿਸਟਮ ਲਾਗੂ ਕਰੋ। ਇਹ ਚੈਲੈਂਜ state history tracking, immutable updates, ਅਤੇ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ੇਸ਼ਨ ਸਮੇਤ ਉੱਚ-ਸਤਹ ਦੇ state management ਸੰਕਲਪਾਂ ਦਾ ਅਭਿਆਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
-
-**ਪ੍ਰੇਰਣਾ:** ਇੱਕ ਵਧੇਰੇ state management ਸਿਸਟਮ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੇ: 1) ਇੱਕ state history array ਜੋ ਸਾਰੇ ਪਿਛਲੇ ਸਟੇਟਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ, 2) Undo ਅਤੇ redo ਫੰਕਸ਼ਨ ਜੋ ਪਿਛਲੇ ਸਟੇਟਾਂ 'ਤੇ ਵਾਪਸ ਜਾ ਸਕਦੇ ਹਨ, 3) ਡੈਸ਼ਬੋਰਡ 'ਤੇ undo/redo operations ਲਈ UI ਬਟਨ, 4) ਮੈਮਰੀ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਰੋਕਣ ਲਈ 10 ਸਟੇਟਾਂ ਦੀ ਵੱਧ ਤੋਂ ਵੱਧ history ਸੀਮਾ, ਅਤੇ 5) ਯੂਜ਼ਰ ਲੌਗਆਉਟ ਕਰਨ 'ਤੇ history ਦੀ ਸਹੀ ਸਫਾਈ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ undo/redo functionality ਖਾਤੇ ਦੇ ਬੈਲੈਂਸ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਨਾਲ ਕੰਮ ਕਰਦੀ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਰੀਫ੍ਰੈਸ਼ ਦੇ ਪਾਰ ਰਹਿੰਦੀ ਹੈ।
-
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
-
-## 🚀 ਚੈਲੈਂਜ: Storage Optimization
-
-ਤੁਹਾਡੀ implementation ਹੁਣ ਯੂਜ਼ਰ ਸੈਸ਼ਨ, ਡਾਟਾ ਰੀਫ੍ਰੈਸ਼, ਅਤੇ state management ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਹੈਂਡਲ ਕਰਦੀ ਹੈ। ਹਾਲਾਂਕਿ, ਸੋਚੋ ਕਿ ਕੀ ਸਾਡਾ ਮੌਜੂਦਾ ਪਹੁੰਚ storage efficiency ਨੂੰ functionality ਨਾਲ ਸੰਤੁਲਿਤ ਤਰੀਕੇ ਨਾਲ ਹੈਂਡਲ ਕਰਦਾ ਹੈ।
-
-ਜਿਵੇਂ ਸ਼ਤਰੰਜ ਦੇ ਮਾਹਰ ਜ਼ਰੂਰੀ ਟੁਕੜਿਆਂ ਅਤੇ ਬੇਕਾਰ ਪਿਦਾਂ ਵਿੱਚ ਫਰਕ ਕਰਦੇ ਹਨ, ਪ੍ਰਭਾਵਸ਼ਾਲੀ state management ਲਈ ਇਹ ਪਛਾਣ ਕਰਨੀ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਕਿਹੜਾ ਡਾਟਾ ਸਟੋਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਕਿਹੜਾ ਹਮੇਸ਼ਾ ਸਰਵਰ ਤੋਂ ਤਾਜ਼ਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
-
-**Optimization Analysis:**
-
-ਤੁਹਾਡੇ ਮੌਜੂਦਾ localStorage implementation ਦਾ ਮੁਲਾਂਕਣ ਕਰੋ ਅਤੇ ਇਹ ਰਣਨੀਤਿਕ ਸਵਾਲਾਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ:
-- ਯੂਜ਼ਰ authentication ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ ਘੱਟੋ-ਘੱਟ ਜਾਣਕਾਰੀ ਕੀ ਹੈ?
-- ਕਿਹੜਾ ਡਾਟਾ ਇੰਨਾ ਵਧੇਰੇ ਬਦਲਦਾ ਹੈ ਕਿ ਸਥਾਨਕ caching ਦਾ ਕੋਈ ਫਾਇਦਾ ਨਹੀਂ ਹੈ?
-- ਸਟੋਰੇਜ optimization ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਿਨਾਂ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਘਟਾਏ ਕਿਵੇਂ ਸੁਧਾਰ ਸਕਦਾ ਹੈ?
-
-ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਆਰਕੀਟੈਕਚਰਲ ਮੁਲਾਂਕਣ ਉਹਨਾਂ ਅਨੁਭਵੀ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਵੱਖਰਾ ਕਰਦਾ ਹੈ ਜੋ ਆਪਣੇ ਹੱਲਾਂ ਵਿੱਚ functionality ਅਤੇ efficiency ਦੋਵਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹਨ।
-
-**Implementation Strategy:**
-- **ਪਛਾਣ ਕਰੋ** ਜਰੂਰੀ ਡਾਟਾ ਜੋ ਸਟੋਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ (ਸ਼ਾਇਦ ਸਿਰਫ ਯੂਜ਼ਰ ਪਛਾਣ)
-- **localStorage implementation ਨੂੰ ਸੋਧੋ** ਤਾਂ ਕਿ ਸਿਰਫ਼ ਮਹੱਤਵਪੂਰਨ ਸੈਸ਼ਨ ਡਾਟਾ ਸਟੋਰ ਕੀਤਾ ਜਾਵੇ
-- **ਯਕੀਨੀ ਬਣਾਓ** ਕਿ ਤਾਜ਼ਾ ਡਾਟਾ ਹਮੇਸ਼ਾ ਡੈਸ਼ਬੋਰਡ ਦੌਰੇ 'ਤੇ ਸਰਵਰ ਤੋਂ ਲੋਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ
-- **ਟੈਸਟ ਕਰੋ** ਕਿ ਤੁਹਾਡਾ optimized ਪਹੁੰਚ ਉਹੀ ਯੂਜ਼ਰ ਅਨੁਭਵ ਬਣਾਈ ਰੱਖਦਾ ਹੈ
-
-**Advanced Consideration:**
-- **ਤੁਲਨਾ ਕਰੋ** ਪੂਰੇ ਖਾਤੇ ਦੇ ਡਾਟਾ ਨੂੰ ਸਟੋਰ ਕਰਨ ਅਤੇ ਸਿਰਫ਼ authentication tokens ਨੂੰ ਸਟੋਰ ਕਰਨ ਦੇ ਵਿਚਕਾਰ trade-offs
-- **ਆਪਣੇ ਫੈਸਲੇ ਅਤੇ ਕਾਰਨ ਦਸਤਾਵੇਜ਼ ਕਰੋ** ਭਵਿੱਖ ਦੇ ਟੀਮ ਮੈਂ
+🎉 **ਸਫਲਤਾ ਪ੍ਰਾਪਤ ਕੀਤੀ**: ਤੁਸੀਂ ਸਥਾਈ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਲਾਗੂ ਕੀਤਾ ਹੈ! ਹੁਣ ਤੁਹਾਡਾ ਐਪ ਇੱਕ ਪੇਸ਼ੇਵਰ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਾਂਗ ਕੰਮ ਕਰਦਾ ਹੈ।
 
 ---
 
 **ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/8-code-editor/1-using-a-code-editor/README.md b/translations/pa/8-code-editor/1-using-a-code-editor/README.md
index 27430cf7fe..c2d6e35144 100644
--- a/translations/pa/8-code-editor/1-using-a-code-editor/README.md
+++ b/translations/pa/8-code-editor/1-using-a-code-editor/README.md
@@ -1,29 +1,83 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "cfd4a15974168ca426d50c67682ab9d4",
-  "translation_date": "2025-10-22T17:26:59+00:00",
+  "original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
+  "translation_date": "2025-11-03T16:10:45+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/README.md",
   "language_code": "pa"
 }
 -->
 # ਕੋਡ ਐਡੀਟਰ ਦੀ ਵਰਤੋਂ: VSCode.dev ਵਿੱਚ ਮਾਹਰ ਬਣਨਾ
 
-*ਦ ਮੈਟ੍ਰਿਕਸ* ਵਿੱਚ ਯਾਦ ਹੈ ਜਦੋਂ ਨਿਓ ਨੂੰ ਡਿਜੀਟਲ ਦੁਨੀਆ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਲਈ ਇੱਕ ਵੱਡੇ ਕੰਪਿਊਟਰ ਟਰਮੀਨਲ ਨਾਲ ਜੁੜਨਾ ਪਿਆ ਸੀ? ਅੱਜ ਦੇ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲ ਇਸ ਦੇ ਬਿਲਕੁਲ ਉਲਟ ਹਨ - ਬੇਹੱਦ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਮਰੱਥਾਵਾਂ ਜੋ ਕਿਤੇ ਵੀ ਪਹੁੰਚਯੋਗ ਹਨ। VSCode.dev ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਤ ਕੋਡ ਐਡੀਟਰ ਹੈ ਜੋ ਕਿਸੇ ਵੀ ਇੰਟਰਨੈਟ ਕਨੈਕਸ਼ਨ ਵਾਲੇ ਡਿਵਾਈਸ 'ਤੇ ਪੇਸ਼ੇਵਰ ਵਿਕਾਸ ਟੂਲ ਲਿਆਉਂਦਾ ਹੈ।
-
-ਜਿਵੇਂ ਪ੍ਰਿੰਟਿੰਗ ਪ੍ਰੈਸ ਨੇ ਕਿਤਾਬਾਂ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਪਹੁੰਚਯੋਗ ਬਣਾਇਆ, ਸਿਰਫ ਮਠਾਂ ਵਿੱਚ ਲੇਖਕਾਂ ਲਈ ਨਹੀਂ, VSCode.dev ਕੋਡਿੰਗ ਨੂੰ ਲੋਕਤੰਤਰਕਰਣ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਲਾਇਬ੍ਰੇਰੀ ਕੰਪਿਊਟਰ, ਸਕੂਲ ਲੈਬ ਜਾਂ ਜਿੱਥੇ ਵੀ ਤੁਹਾਡੇ ਕੋਲ ਬ੍ਰਾਊਜ਼ਰ ਪਹੁੰਚ ਹੈ, ਉੱਥੇ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ। ਕੋਈ ਇੰਸਟਾਲੇਸ਼ਨ ਨਹੀਂ, ਕੋਈ "ਮੈਨੂੰ ਮੇਰੀ ਖਾਸ ਸੈਟਅੱਪ ਦੀ ਲੋੜ ਹੈ" ਦੀ ਪਾਬੰਦੀ ਨਹੀਂ।
-
-ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਮਝ ਜਾਵੋਗੇ ਕਿ VSCode.dev ਨੂੰ ਕਿਵੇਂ ਨੈਵੀਗੇਟ ਕਰਨਾ ਹੈ, ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਿੱਧੇ GitHub ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਖੋਲ੍ਹਣੀ ਹੈ, ਅਤੇ ਵਰਜਨ ਕੰਟਰੋਲ ਲਈ Git ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ - ਇਹ ਸਾਰੀਆਂ ਹੁਨਰਾਂ ਜੋ ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਰੋਜ਼ਾਨਾ ਵਰਤਦੇ ਹਨ।
+*ਦ ਮੈਟ੍ਰਿਕਸ* ਵਿੱਚ ਯਾਦ ਹੈ ਜਦੋਂ ਨਿਓ ਨੂੰ ਡਿਜੀਟਲ ਦੁਨੀਆ ਵਿੱਚ ਪਹੁੰਚ ਕਰਨ ਲਈ ਇੱਕ ਵੱਡੇ ਕੰਪਿਊਟਰ ਟਰਮੀਨਲ ਨਾਲ ਜੁੜਨਾ ਪਿਆ ਸੀ? ਅੱਜ ਦੇ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲਸ ਇਸ ਦੇ ਬਿਲਕੁਲ ਉਲਟ ਹਨ - ਬੇਹੱਦ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਮਰੱਥਾਵਾਂ ਜੋ ਕਿਤੇ ਵੀ ਪਹੁੰਚਯੋਗ ਹਨ। VSCode.dev ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਿਤ ਕੋਡ ਐਡੀਟਰ ਹੈ ਜੋ ਕਿਸੇ ਵੀ ਇੰਟਰਨੈਟ ਕਨੈਕਸ਼ਨ ਵਾਲੇ ਡਿਵਾਈਸ 'ਤੇ ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਮੈਂਟ ਟੂਲਸ ਲਿਆਉਂਦਾ ਹੈ।
+
+ਜਿਵੇਂ ਪ੍ਰਿੰਟਿੰਗ ਪ੍ਰੈਸ ਨੇ ਕਿਤਾਬਾਂ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਪਹੁੰਚਯੋਗ ਬਣਾਇਆ, ਸਿਰਫ ਮਠਾਂ ਵਿੱਚ ਲਿਖਾਰੀ ਲਈ ਨਹੀਂ, VSCode.dev ਕੋਡਿੰਗ ਨੂੰ ਲੋਕਤੰਤਰਤਮਕ ਬਣਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਲਾਇਬ੍ਰੇਰੀ ਕੰਪਿਊਟਰ, ਸਕੂਲ ਲੈਬ ਜਾਂ ਜਿੱਥੇ ਵੀ ਤੁਹਾਡੇ ਕੋਲ ਬ੍ਰਾਊਜ਼ਰ ਪਹੁੰਚ ਹੈ, ਉੱਥੇ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ। ਕੋਈ ਇੰਸਟਾਲੇਸ਼ਨ ਨਹੀਂ, ਕੋਈ "ਮੈਨੂੰ ਮੇਰੀ ਖਾਸ ਸੈਟਅਪ ਦੀ ਲੋੜ ਹੈ" ਦੀਆਂ ਪਾਬੰਦੀਆਂ ਨਹੀਂ।
+
+ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਮਝ ਜਾਵੋਗੇ ਕਿ VSCode.dev ਨੂੰ ਕਿਵੇਂ ਨੈਵੀਗੇਟ ਕਰਨਾ ਹੈ, ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਿੱਧੇ GitHub ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਖੋਲ੍ਹਣੀ ਹੈ, ਅਤੇ ਵਰਜਨ ਕੰਟਰੋਲ ਲਈ Git ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ - ਇਹ ਸਾਰੀਆਂ ਕੁਸ਼ਲਤਾਵਾਂ ਜੋ ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਰੋਜ਼ਾਨਾ ਵਰਤਦੇ ਹਨ।
+
+## ⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ
+
+**ਵਿਆਸਤ ਡਿਵੈਲਪਰਾਂ ਲਈ ਤੇਜ਼ ਸ਼ੁਰੂਆਤ ਦਾ ਰਾਹ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Visit vscode.dev]
+    B --> C[Connect GitHub account]
+    C --> D[Open any repository]
+    D --> E[Start editing immediately]
+```
+
+- **ਮਿੰਟ 1**: [vscode.dev](https://vscode.dev) 'ਤੇ ਜਾਓ - ਕੋਈ ਇੰਸਟਾਲੇਸ਼ਨ ਦੀ ਲੋੜ ਨਹੀਂ
+- **ਮਿੰਟ 2**: ਆਪਣੇ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਨੂੰ ਕਨੈਕਟ ਕਰਨ ਲਈ GitHub ਨਾਲ ਸਾਈਨ ਇਨ ਕਰੋ
+- **ਮਿੰਟ 3**: URL ਟ੍ਰਿਕ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ: ਕਿਸੇ ਵੀ ਰਿਪੋ URL ਵਿੱਚ `github.com` ਨੂੰ `vscode.dev/github` ਨਾਲ ਬਦਲੋ
+- **ਮਿੰਟ 4**: ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ ਅਤੇ ਸਿੰਟੈਕਸ ਹਾਈਲਾਈਟਿੰਗ ਨੂੰ ਆਪਣੇ ਆਪ ਕੰਮ ਕਰਦੇ ਦੇਖੋ
+- **ਮਿੰਟ 5**: ਸੋਰਸ ਕੰਟਰੋਲ ਪੈਨਲ ਰਾਹੀਂ ਇੱਕ ਬਦਲਾਅ ਕਰੋ ਅਤੇ ਇਸ ਨੂੰ ਕਮਿਟ ਕਰੋ
+
+**ਤੇਜ਼ ਟੈਸਟ URL**:
+```
+# Transform this:
+github.com/microsoft/Web-Dev-For-Beginners
+
+# Into this:
+vscode.dev/github/microsoft/Web-Dev-For-Beginners
+```
+
+**ਇਸ ਦਾ ਮਹੱਤਵ ਕਿਉਂ ਹੈ**: 5 ਮਿੰਟਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਪੇਸ਼ੇਵਰ ਟੂਲਸ ਨਾਲ ਕਿਤੇ ਵੀ ਕੋਡਿੰਗ ਦੀ ਆਜ਼ਾਦੀ ਦਾ ਅਨੁਭਵ ਕਰੋਗੇ। ਇਹ ਵਿਕਾਸ ਦਾ ਭਵਿੱਖ ਦਰਸਾਉਂਦਾ ਹੈ - ਪਹੁੰਚਯੋਗ, ਸ਼ਕਤੀਸ਼ਾਲੀ, ਅਤੇ ਤੁਰੰਤ।
+
+## 🗺️ ਕਲਾਉਡ-ਅਧਾਰਿਤ ਵਿਕਾਸ ਦੁਆਰਾ ਤੁਹਾਡਾ ਸਿੱਖਣ ਦਾ ਸਫਰ
+
+```mermaid
+journey
+    title From Local Setup to Cloud Development Mastery
+    section Understanding the Platform
+      Discover web-based editing: 4: You
+      Connect to GitHub ecosystem: 6: You
+      Master interface navigation: 7: You
+    section File Management Skills
+      Create and organize files: 5: You
+      Edit with syntax highlighting: 7: You
+      Navigate project structures: 8: You
+    section Version Control Mastery
+      Understand Git integration: 6: You
+      Practice commit workflows: 8: You
+      Master collaboration patterns: 9: You
+    section Professional Customization
+      Install powerful extensions: 7: You
+      Configure development environment: 8: You
+      Build personal workflows: 9: You
+```
+
+**ਤੁਹਾਡਾ ਸਫਰ ਦਾ ਮੰਜ਼ਿਲ**: ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਇੱਕ ਪੇਸ਼ੇਵਰ ਕਲਾਉਡ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਵਿੱਚ ਮਾਹਰ ਹੋ ਜਾਵੋਗੇ ਜੋ ਕਿਸੇ ਵੀ ਡਿਵਾਈਸ ਤੋਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਉਹੀ ਟੂਲਸ ਨਾਲ ਕੋਡ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਵੱਡੇ ਤਕਨਾਲੋਜੀ ਕੰਪਨੀਆਂ ਦੇ ਡਿਵੈਲਪਰ ਵਰਤਦੇ ਹਨ।
 
 ## ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ
 
 ਜਦੋਂ ਅਸੀਂ ਇਸ ਨੂੰ ਇਕੱਠੇ ਕਰਾਂਗੇ, ਤੁਸੀਂ ਇਹ ਕਰਨ ਦੇ ਯੋਗ ਹੋਵੋਗੇ:
 
-- VSCode.dev ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਨੈਵੀਗੇਟ ਕਰੋ ਕਿ ਇਹ ਤੁਹਾਡਾ ਦੂਜਾ ਘਰ ਬਣ ਜਾਵੇ - ਬਿਨਾਂ ਖੋ ਜਾਣ ਦੇ ਤੁਹਾਨੂੰ ਜੋ ਕੁਝ ਚਾਹੀਦਾ ਹੈ ਉਹ ਲੱਭੋ
-- ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਕੋਈ ਵੀ GitHub ਰਿਪੋਜ਼ਿਟਰੀ ਖੋਲ੍ਹੋ ਅਤੇ ਤੁਰੰਤ ਸੋਧ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ (ਇਹ ਬਹੁਤ ਜਾਦੂਈ ਹੈ!)
-- Git ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਬਦਲਾਅ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ ਅਤੇ ਪੇਸ਼ੇਵਰ ਦੀ ਤਰ੍ਹਾਂ ਆਪਣੀ ਤਰੱਕੀ ਨੂੰ ਸੇਵ ਕਰੋ
-- ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ ਆਪਣੇ ਐਡੀਟਰ ਨੂੰ ਸੁਪਰਚਾਰਜ ਕਰੋ ਜੋ ਕੋਡਿੰਗ ਨੂੰ ਤੇਜ਼ ਅਤੇ ਮਜ਼ੇਦਾਰ ਬਣਾਉਂਦੇ ਹਨ
-- ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਨੂੰ ਭਰੋਸੇ ਨਾਲ ਬਣਾਓ ਅਤੇ ਸੰਗਠਿਤ ਕਰੋ
+- VSCode.dev ਨੂੰ ਆਪਣੇ ਦੂਜੇ ਘਰ ਵਾਂਗ ਨੈਵੀਗੇਟ ਕਰੋ - ਬਿਨਾਂ ਖੋ ਜਾਣ ਦੇ ਹਰ ਚੀਜ਼ ਨੂੰ ਲੱਭਣਾ
+- ਕਿਸੇ ਵੀ GitHub ਰਿਪੋਜ਼ਿਟਰੀ ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਤੁਰੰਤ ਸੰਪਾਦਨ ਸ਼ੁਰੂ ਕਰੋ (ਇਹ ਬਹੁਤ ਜਾਦੂਈ ਹੈ!)
+- Git ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਬਦਲਾਅ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ ਅਤੇ ਪੇਸ਼ੇਵਰ ਵਾਂਗ ਆਪਣੀ ਤਰੱਕੀ ਨੂੰ ਸੇਵ ਕਰੋ
+- ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ ਆਪਣੇ ਐਡੀਟਰ ਨੂੰ ਤੇਜ਼ ਅਤੇ ਮਜ਼ੇਦਾਰ ਬਣਾਓ
+- ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਨੂੰ ਵਿਸ਼ਵਾਸ ਨਾਲ ਬਣਾਓ ਅਤੇ ਸੰਗਠਿਤ ਕਰੋ
 
 ## ਤੁਹਾਨੂੰ ਕੀ ਚਾਹੀਦਾ ਹੈ
 
@@ -33,245 +87,355 @@ CO_OP_TRANSLATOR_METADATA:
 - ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨਾਲ ਬੁਨਿਆਦੀ ਜਾਣਕਾਰੀ
 - GitHub Basics ਪਾਠ ਮਦਦਗਾਰ ਪਿਛੋਕੜ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਹਾਲਾਂਕਿ ਇਹ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ
 
-> 💡 **GitHub ਵਿੱਚ ਨਵੇਂ ਹੋ?** ਖਾਤਾ ਬਣਾਉਣਾ ਮੁਫ਼ਤ ਹੈ ਅਤੇ ਕੁਝ ਮਿੰਟ ਲੈਂਦਾ ਹੈ। ਜਿਵੇਂ ਕਿ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਕਾਰਡ ਤੁਹਾਨੂੰ ਦੁਨੀਆ ਭਰ ਵਿੱਚ ਕਿਤਾਬਾਂ ਤੱਕ ਪਹੁੰਚ ਦਿੰਦਾ ਹੈ, ਇੱਕ GitHub ਖਾਤਾ ਤੁਹਾਨੂੰ ਇੰਟਰਨੈਟ 'ਤੇ ਕੋਡ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਤੱਕ ਪਹੁੰਚ ਦਿੰਦਾ ਹੈ।
-
-## ਵੈੱਬ-ਅਧਾਰਤ ਕੋਡ ਐਡੀਟਰ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹਨ
-
-ਇੰਟਰਨੈਟ ਤੋਂ ਪਹਿਲਾਂ, ਵੱਖ-ਵੱਖ ਯੂਨੀਵਰਸਿਟੀਆਂ ਦੇ ਵਿਗਿਆਨੀ ਆਸਾਨੀ ਨਾਲ ਖੋਜ ਸਾਂਝੀ ਨਹੀਂ ਕਰ ਸਕਦੇ ਸਨ। ਫਿਰ 1960 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ARPANET ਆਇਆ, ਜੋ ਦੂਰੀਆਂ ਵਿੱਚ ਕੰਪਿਊਟਰਾਂ ਨੂੰ ਜੋੜਦਾ ਹੈ। ਵੈੱਬ-ਅਧਾਰਤ ਕੋਡ ਐਡੀਟਰ ਇਸੇ ਸਿਧਾਂਤ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ - ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲਾਂ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣਾ ਚਾਹੇ ਤੁਹਾਡੀ ਭੌਤਿਕ ਸਥਿਤੀ ਜਾਂ ਡਿਵਾਈਸ ਕੋਈ ਵੀ ਹੋਵੇ।
-
-ਕੋਡ ਐਡੀਟਰ ਤੁਹਾਡੇ ਵਿਕਾਸ ਕਾਰਜਸਥਾਨ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਜਿੱਥੇ ਤੁਸੀਂ ਕੋਡ ਫਾਈਲਾਂ ਲਿਖਦੇ ਹੋ, ਸੋਧਦੇ ਹੋ ਅਤੇ ਸੰਗਠਿਤ ਕਰਦੇ ਹੋ। ਸਧਾਰਨ ਟੈਕਸਟ ਐਡੀਟਰਾਂ ਦੇ ਵਿਰੁੱਧ, ਪੇਸ਼ੇਵਰ ਕੋਡ ਐਡੀਟਰ ਸਿੰਟੈਕਸ ਹਾਈਲਾਈਟਿੰਗ, ਗਲਤੀ ਪਛਾਣ ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਮੈਨੇਜਮੈਂਟ ਫੀਚਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
+> 💡 **GitHub ਵਿੱਚ ਨਵੇਂ ਹੋ?** ਖਾਤਾ ਬਣਾਉਣਾ ਮੁਫ਼ਤ ਹੈ ਅਤੇ ਕੁਝ ਮਿੰਟ ਲੈਂਦਾ ਹੈ। ਜਿਵੇਂ ਕਿ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਕਾਰਡ ਤੁਹਾਨੂੰ ਦੁਨੀਆ ਭਰ ਦੀਆਂ ਕਿਤਾਬਾਂ ਤੱਕ ਪਹੁੰਚ ਦਿੰਦਾ ਹੈ, ਇੱਕ GitHub ਖਾਤਾ ਤੁਹਾਨੂੰ ਇੰਟਰਨੈਟ 'ਤੇ ਕੋਡ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਤੱਕ ਪਹੁੰਚ ਦਿੰਦਾ ਹੈ।
+
+## 🧠 ਕਲਾਉਡ ਵਿਕਾਸ ਪਰੀਵਰਣ ਦਾ ਜਾਇਜ਼ਾ
+
+```mermaid
+mindmap
+  root((VSCode.dev Mastery))
+    Platform Benefits
+      Accessibility
+        Device Independence
+        No Installation Required
+        Instant Updates
+        Universal Access
+      Integration
+        GitHub Connection
+        Repository Sync
+        Settings Persistence
+        Collaboration Ready
+    Development Workflow
+      File Management
+        Project Structure
+        Syntax Highlighting
+        Multi-tab Editing
+        Auto-save Features
+      Version Control
+        Git Integration
+        Commit Workflows
+        Branch Management
+        Change Tracking
+    Customization Power
+      Extensions Ecosystem
+        Productivity Tools
+        Language Support
+        Theme Options
+        Custom Shortcuts
+      Environment Setup
+        Personal Preferences
+        Workspace Configuration
+        Tool Integration
+        Workflow Optimization
+    Professional Skills
+      Industry Standards
+        Version Control
+        Code Quality
+        Collaboration
+        Documentation
+      Career Readiness
+        Remote Work
+        Cloud Development
+        Team Projects
+        Open Source
+```
+
+**ਮੁੱਖ ਸਿਧਾਂਤ**: ਕਲਾਉਡ-ਅਧਾਰਿਤ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਕੋਡਿੰਗ ਦਾ ਭਵਿੱਖ ਦਰਸਾਉਂਦੇ ਹਨ - ਪੇਸ਼ੇਵਰ-ਗਰੇਡ ਟੂਲਸ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਜੋ ਪਹੁੰਚਯੋਗ, ਸਹਿਕਾਰਤਮਕ, ਅਤੇ ਪਲੇਟਫਾਰਮ-ਅਜਾਦ ਹਨ।
+
+## ਵੈੱਬ-ਅਧਾਰਿਤ ਕੋਡ ਐਡੀਟਰ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹਨ
+
+ਇੰਟਰਨੈਟ ਤੋਂ ਪਹਿਲਾਂ, ਵੱਖ-ਵੱਖ ਯੂਨੀਵਰਸਿਟੀਆਂ ਦੇ ਵਿਗਿਆਨੀ ਆਪਣੀ ਰਿਸਰਚ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸਾਂਝਾ ਨਹੀਂ ਕਰ ਸਕਦੇ ਸਨ। ਫਿਰ 1960 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ARPANET ਆਇਆ, ਜਿਸ ਨੇ ਦੂਰੀਆਂ 'ਤੇ ਕੰਪਿਊਟਰਾਂ ਨੂੰ ਜੋੜਿਆ। ਵੈੱਬ-ਅਧਾਰਿਤ ਕੋਡ ਐਡੀਟਰ ਇਸੇ ਸਿਧਾਂਤ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ - ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲਸ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣਾ ਚਾਹੇ ਤੁਹਾਡਾ ਸਥਾਨ ਜਾਂ ਡਿਵਾਈਸ ਕੋਈ ਵੀ ਹੋਵੇ।
+
+ਕੋਡ ਐਡੀਟਰ ਤੁਹਾਡਾ ਵਿਕਾਸ ਕਾਰਜਸਥਾਨ ਹੁੰਦਾ ਹੈ, ਜਿੱਥੇ ਤੁਸੀਂ ਕੋਡ ਫਾਈਲਾਂ ਲਿਖਦੇ, ਸੰਪਾਦਿਤ ਕਰਦੇ, ਅਤੇ ਸੰਗਠਿਤ ਕਰਦੇ ਹੋ। ਸਧਾਰਨ ਟੈਕਸਟ ਐਡੀਟਰਾਂ ਦੇ ਉਲਟ, ਪੇਸ਼ੇਵਰ ਕੋਡ ਐਡੀਟਰ ਸਿੰਟੈਕਸ ਹਾਈਲਾਈਟਿੰਗ, ਗਲਤੀ ਪਛਾਣ, ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਮੈਨੇਜਮੈਂਟ ਫੀਚਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
 
 VSCode.dev ਇਹ ਸਮਰੱਥਾਵਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਲਿਆਉਂਦਾ ਹੈ:
 
-**ਵੈੱਬ-ਅਧਾਰਤ ਸੋਧ ਦੇ ਫਾਇਦੇ:**
+**ਵੈੱਬ-ਅਧਾਰਿਤ ਸੰਪਾਦਨ ਦੇ ਫਾਇਦੇ:**
 
-| ਫੀਚਰ | ਵੇਰਵਾ | ਪ੍ਰਯੋਗਤਮ ਲਾਭ |
+| ਫੀਚਰ | ਵੇਰਵਾ | ਵਿਆਹਾਰਕ ਲਾਭ |
 |---------|-------------|----------|
-| **ਪਲੇਟਫਾਰਮ ਅਜ਼ਾਦੀ** | ਕਿਸੇ ਵੀ ਡਿਵਾਈਸ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨਾਲ ਚੱਲਦਾ ਹੈ | ਵੱਖ-ਵੱਖ ਕੰਪਿਊਟਰਾਂ ਤੋਂ ਬਿਨਾਂ ਰੁਕਾਵਟ ਕੰਮ ਕਰੋ |
-| **ਕੋਈ ਇੰਸਟਾਲੇਸ਼ਨ ਦੀ ਲੋੜ ਨਹੀਂ** | ਵੈੱਬ URL ਰਾਹੀਂ ਪਹੁੰਚ | ਸੌਫਟਵੇਅਰ ਇੰਸਟਾਲੇਸ਼ਨ ਪਾਬੰਦੀਆਂ ਨੂੰ ਪਾਰ ਕਰੋ |
-| **ਆਟੋਮੈਟਿਕ ਅੱਪਡੇਟਸ** | ਹਮੇਸ਼ਾ ਨਵੀਂ ਵਰਜਨ ਚੱਲਦੀ ਹੈ | ਮੈਨੂਅਲ ਅੱਪਡੇਟਾਂ ਤੋਂ ਬਿਨਾਂ ਨਵੇਂ ਫੀਚਰਾਂ ਤੱਕ ਪਹੁੰਚ |
-| **ਰਿਪੋਜ਼ਿਟਰੀ ਇੰਟੀਗ੍ਰੇਸ਼ਨ** | GitHub ਨਾਲ ਸਿੱਧੀ ਕਨੈਕਸ਼ਨ | ਸਥਾਨਕ ਫਾਈਲ ਮੈਨੇਜਮੈਂਟ ਤੋਂ ਬਿਨਾਂ ਕੋਡ ਸੋਧੋ |
+| **ਪਲੇਟਫਾਰਮ ਅਜਾਦਤਾ** | ਕਿਸੇ ਵੀ ਬ੍ਰਾਊਜ਼ਰ ਵਾਲੇ ਡਿਵਾਈਸ 'ਤੇ ਚੱਲਦਾ ਹੈ | ਵੱਖ-ਵੱਖ ਕੰਪਿਊਟਰਾਂ 'ਤੇ ਬਿਨਾਂ ਰੁਕਾਵਟ ਕੰਮ ਕਰੋ |
+| **ਕੋਈ ਇੰਸਟਾਲੇਸ਼ਨ ਦੀ ਲੋੜ ਨਹੀਂ** | ਵੈੱਬ URL ਰਾਹੀਂ ਪਹੁੰਚ | ਸੌਫਟਵੇਅਰ ਇੰਸਟਾਲੇਸ਼ਨ ਪਾਬੰਦੀਆਂ ਨੂੰ ਬਾਈਪਾਸ ਕਰੋ |
+| **ਆਟੋਮੈਟਿਕ ਅਪਡੇਟਸ** | ਹਮੇਸ਼ਾ ਨਵੀਂ ਵਰਜਨ ਚਲਦੀ ਹੈ | ਮੈਨੂਅਲ ਅਪਡੇਟਸ ਤੋਂ ਬਿਨਾਂ ਨਵੀਆਂ ਫੀਚਰਾਂ ਤੱਕ ਪਹੁੰਚ |
+| **ਰਿਪੋਜ਼ਿਟਰੀ ਇੰਟੀਗ੍ਰੇਸ਼ਨ** | GitHub ਨਾਲ ਸਿੱਧੀ ਕਨੈਕਸ਼ਨ | ਸਥਾਨਕ ਫਾਈਲ ਮੈਨੇਜਮੈਂਟ ਤੋਂ ਬਿਨਾਂ ਕੋਡ ਸੰਪਾਦਿਤ ਕਰੋ |
 
-**ਪ੍ਰਯੋਗਤਮ ਪ੍ਰਭਾਵ:**
+**ਵਿਆਹਾਰਕ ਪ੍ਰਭਾਵ:**
 - ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਕੰਮ ਦੀ ਲਗਾਤਾਰਤਾ
 - ਓਪਰੇਟਿੰਗ ਸਿਸਟਮ ਤੋਂ ਬਿਨਾਂ ਸਥਿਰ ਇੰਟਰਫੇਸ
-- ਤੁਰੰਤ ਸਹਿਯੋਗ ਸਮਰੱਥਾਵਾਂ
-- ਘਟਾਈ ਸਥਾਨਕ ਸਟੋਰੇਜ ਦੀ ਲੋੜ
+- ਤੁਰੰਤ ਸਹਿਕਾਰਤਮਕ ਸਮਰੱਥਾਵਾਂ
+- ਸਥਾਨਕ ਸਟੋਰੇਜ ਦੀਆਂ ਲੋੜਾਂ ਘਟੀਆਂ
 
-## VSCode.dev ਦੀ ਖੋਜ ਕਰਨਾ
+## VSCode.dev ਦੀ ਖੋਜ
 
-ਜਿਵੇਂ ਮੈਰੀ ਕਿਊਰੀ ਦੀ ਲੈਬੋਰੇਟਰੀ ਵਿੱਚ ਇੱਕ ਸਧਾਰਨ ਸਥਾਨ ਵਿੱਚ ਸੁਧਰੇ ਹੋਏ ਉਪਕਰਣ ਸਨ, VSCode.dev ਪੇਸ਼ੇਵਰ ਵਿਕਾਸ ਟੂਲਾਂ ਨੂੰ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਇੰਟਰਫੇਸ ਵਿੱਚ ਪੇਸ਼ ਕਰਦਾ ਹੈ। ਇਹ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਡੈਸਕਟਾਪ ਕੋਡ ਐਡੀਟਰਾਂ ਦੇ ਸਮੇਤ ਮੁੱਖ ਫੰਕਸ਼ਨਲਿਟੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
+ਜਿਵੇਂ ਮਾਰੀ ਕਿਊਰੀ ਦੀ ਲੈਬੋਰੇਟਰੀ ਵਿੱਚ ਇੱਕ ਸਧਾਰਨ ਜਗ੍ਹਾ ਵਿੱਚ ਸੁਧਾਰਤ ਸਾਜੋ-ਸਾਮਾਨ ਸੀ, VSCode.dev ਪੇਸ਼ੇਵਰ ਵਿਕਾਸ ਟੂਲਸ ਨੂੰ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਇੰਟਰਫੇਸ ਵਿੱਚ ਪੈਕ ਕਰਦਾ ਹੈ। ਇਹ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਡੈਸਕਟਾਪ ਕੋਡ ਐਡੀਟਰਾਂ ਦੇ ਉਹੀ ਮੁੱਖ ਕਾਰਜਸ਼ੀਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
 
-[VSCode.dev](https://vscode.dev) ਵਿੱਚ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਕੇ ਸ਼ੁਰੂ ਕਰੋ। ਇੰਟਰਫੇਸ ਡਾਊਨਲੋਡ ਜਾਂ ਸਿਸਟਮ ਇੰਸਟਾਲੇਸ਼ਨ ਤੋਂ ਬਿਨਾਂ ਲੋਡ ਹੁੰਦਾ ਹੈ - ਕਲਾਉਡ ਕੰਪਿਊਟਿੰਗ ਸਿਧਾਂਤਾਂ ਦੀ ਸਿੱਧੀ ਅਰਜ਼ੀ।
+ਸਭ ਤੋਂ ਪਹਿਲਾਂ [vscode.dev](https://vscode.dev) 'ਤੇ ਜਾਓ। ਇੰਟਰਫੇਸ ਬਿਨਾਂ ਡਾਊਨਲੋਡ ਜਾਂ ਸਿਸਟਮ ਇੰਸਟਾਲੇਸ਼ਨ ਦੇ ਲੋਡ ਹੋ ਜਾਂਦਾ ਹੈ - ਕਲਾਉਡ ਕੰਪਿਊਟਿੰਗ ਸਿਧਾਂਤਾਂ ਦਾ ਸਿੱਧਾ ਅਨੁਪ੍ਰਯੋਗ।
 
 ### ਆਪਣੇ GitHub ਖਾਤੇ ਨੂੰ ਕਨੈਕਟ ਕਰਨਾ
 
-ਜਿਵੇਂ ਅਲੈਕਜ਼ੈਂਡਰ ਗ੍ਰਾਹਮ ਬੈੱਲ ਦਾ ਟੈਲੀਫੋਨ ਦੂਰੀ ਸਥਾਨਾਂ ਨੂੰ ਜੋੜਦਾ ਹੈ, ਤੁਹਾਡੇ GitHub ਖਾਤੇ ਨੂੰ ਜੋੜਨਾ VSCode.dev ਨੂੰ ਤੁਹਾਡੇ ਕੋਡ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਜਦੋਂ GitHub ਨਾਲ ਸਾਈਨ ਇਨ ਕਰਨ ਲਈ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਇਸ ਕਨੈਕਸ਼ਨ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨਾ ਸਿਫਾਰਸ਼ੀ ਹੈ।
+ਜਿਵੇਂ ਅਲੈਕਜ਼ੈਂਡਰ ਗ੍ਰਾਹਮ ਬੈਲ ਦਾ ਟੈਲੀਫੋਨ ਦੂਰੀਆਂ ਨੂੰ ਜੋੜਦਾ ਸੀ, ਆਪਣੇ GitHub ਖਾਤੇ ਨੂੰ ਜੋੜਨਾ VSCode.dev ਨੂੰ ਤੁਹਾਡੇ ਕੋਡ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਜਦੋਂ GitHub ਨਾਲ ਸਾਈਨ ਇਨ ਕਰਨ ਲਈ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਇਸ ਕਨੈਕਸ਼ਨ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨਾ ਸਿਫਾਰਸ਼ੀ ਹੈ।
 
 **GitHub ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:**
 - ਐਡੀਟਰ ਵਿੱਚ ਤੁਹਾਡੇ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਤੱਕ ਸਿੱਧੀ ਪਹੁੰਚ
-- ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ਡ ਸੈਟਿੰਗਾਂ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ
-- GitHub ਤੱਕ ਸੇਵ ਕਰਨ ਦਾ ਸਧਾਰਨ ਵਰਕਫਲੋ
-- ਨਿੱਜੀਕਰਤ ਵਿਕਾਸ ਵਾਤਾਵਰਣ
+- ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਸਿੰਕ੍ਰੋਨਾਈਜ਼ਡ ਸੈਟਿੰਗਾਂ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ
+- GitHub 'ਤੇ ਸੇਵ ਕਰਨ ਦਾ ਸਧਾਰਨ ਵਰਕਫਲੋ
+- ਨਿੱਜੀਕ੍ਰਿਤ ਵਿਕਾਸ ਵਾਤਾਵਰਣ
 
-### ਆਪਣੇ ਨਵੇਂ ਵਰਕਸਪੇਸ ਨੂੰ ਜਾਣਨਾ
+### ਆਪਣੇ ਨਵੇਂ ਕਾਰਜਸਥਾਨ ਨੂੰ ਜਾਣਨਾ
 
-ਜਦੋਂ ਸਭ ਕੁਝ ਲੋਡ ਹੋ ਜਾਂਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਸੁੰਦਰ ਤੌਰ 'ਤੇ ਸਾਫ ਵਰਕਸਪੇਸ ਦੇਖੋਗੇ ਜੋ ਤੁਹਾਨੂੰ ਇਸ ਗੱਲ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਰੱਖਣ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ - ਤੁਹਾਡਾ ਕੋਡ!
+ਜਦੋਂ ਸਭ ਕੁਝ ਲੋਡ ਹੋ ਜਾਂਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਸੁੰਦਰ ਤੌਰ 'ਤੇ ਸਾਫ ਕਾਰਜਸਥਾਨ ਦੇਖੋਗੇ ਜੋ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਕੋਡ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਰੱਖਣ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ!
 
 ![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.pa.png)
 
-**ਇਹ ਰਿਹਾਇਸ਼ ਦਾ ਦੌਰਾ ਹੈ:**
-- **ਐਕਟਿਵਿਟੀ ਬਾਰ** (ਖੱਬੇ ਪਾਸੇ ਵਾਲੀ ਸਟ੍ਰਿਪ): ਤੁਹਾਡੀ ਮੁੱਖ ਨੈਵੀਗੇਸ਼ਨ ਜਿਸ ਵਿੱਚ ਐਕਸਪਲੋਰਰ 📁, ਖੋਜ 🔍, ਸੋਰਸ ਕੰਟਰੋਲ 🌿, ਐਕਸਟੈਂਸ਼ਨ 🧩, ਅਤੇ ਸੈਟਿੰਗ ⚙️ ਸ਼ਾਮਲ ਹਨ
-- **ਸਾਈਡਬਾਰ** (ਇਸਦੇ ਨਾਲ ਵਾਲਾ ਪੈਨਲ): ਤੁਹਾਡੇ ਦੁਆਰਾ ਚੁਣੇ ਗਏ ਅਨੁਸਾਰ ਸਬੰਧਤ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਲਈ ਬਦਲ ਜਾਂਦਾ ਹੈ
-- **ਐਡੀਟਰ ਖੇਤਰ** (ਵੱਡਾ ਸਪੇਸ ਵਿਚਕਾਰ): ਇਹ ਜਿੱਥੇ ਜਾਦੂ ਹੁੰਦਾ ਹੈ - ਤੁਹਾਡਾ ਮੁੱਖ ਕੋਡਿੰਗ ਖੇਤਰ
-
-**ਇਸਨੂੰ ਖੋਜਣ ਲਈ ਸਮਾਂ ਲਓ:**
-- ਉਹਨਾਂ ਐਕਟਿਵਿਟੀ ਬਾਰ ਆਈਕਾਨਾਂ 'ਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ ਦੇਖੋ ਕਿ ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ
-- ਧਿਆਨ ਦਿਓ ਕਿ ਸਾਈਡਬਾਰ ਕਿਵੇਂ ਵੱਖ-ਵੱਖ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਲਈ ਅੱਪਡੇਟ ਹੁੰਦੀ ਹੈ - ਬਹੁਤ ਵਧੀਆ, ਹੈ ਨਾ?
-- ਐਕਸਪਲੋਰਰ ਦ੍ਰਿਸ਼ (📁) ਸ਼ਾਇਦ ਜਿੱਥੇ ਤੁਸੀਂ ਜ਼ਿਆਦਾਤਰ ਸਮਾਂ ਬਿਤਾਉਂਦੇ ਹੋ, ਇਸ ਲਈ ਇਸ ਨਾਲ ਆਰਾਮਦਾਇਕ ਹੋ ਜਾਓ
+**ਇਹ ਹੈ ਤੁਹਾਡੇ ਪੜੋਸ ਦਾ ਦੌਰਾ:**
+- **ਐਕਟਿਵਿਟੀ ਬਾਰ** (ਖੱਬੇ ਪਾਸੇ ਵਾਲੀ ਸਟ੍ਰਿਪ): ਤੁਹਾਡਾ ਮੁੱਖ ਨੈਵੀਗੇਸ਼ਨ ਜਿਸ ਵਿੱਚ Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, ਅਤੇ Settings ⚙️ ਸ਼ਾਮਲ ਹਨ
+- **ਸਾਈਡਬਾਰ** (ਇਸ ਦੇ ਨਾਲ ਵਾਲਾ ਪੈਨਲ): ਤੁਹਾਡੇ ਚੁਣੇ ਗਏ ਅਨੁਸਾਰ ਸਬੰਧਤ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਲਈ ਬਦਲਦਾ ਹੈ
+- **ਐਡੀਟਰ ਖੇਤਰ** (ਵੱਡੀ ਜਗ੍ਹਾ ਵਿਚਕਾਰ): ਇਹ ਹੈ ਜਿੱਥੇ ਜਾਦੂ ਹੁੰਦਾ ਹੈ - ਤੁਹਾਡਾ ਮੁੱਖ ਕੋਡਿੰਗ ਖੇਤਰ
+
+**ਇੱਕ ਪਲ ਲਈ ਖੋਜ ਕਰੋ:**
+- ਉਹਨਾਂ ਐਕਟਿਵਿਟੀ ਬਾਰ ਆਈਕਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਦੇਖੋ ਕਿ ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ
+- ਧਿਆਨ ਦਿਓ ਕਿ ਸਾਈਡਬਾਰ ਵੱਖ-ਵੱਖ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਲਈ ਕਿਵੇਂ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ - ਬਹੁਤ ਵਧੀਆ, ਹੈ ਨਾ?
+- Explorer ਦ੍ਰਿਸ਼ (📁) ਸ਼ਾਇਦ ਜਿੱਥੇ ਤੁਸੀਂ ਜ਼ਿਆਦਾਤਰ ਸਮਾਂ ਬਿਤਾਉਂਦੇ ਹੋਵੋਗੇ, ਇਸ ਲਈ ਇਸ ਨਾਲ ਆਰਾਮਦਾਇਕ ਹੋ ਜਾਓ
+
+```mermaid
+flowchart TB
+    subgraph "VSCode.dev Interface Architecture"
+        A[Activity Bar] --> B[Explorer 📁]
+        A --> C[Search 🔍]
+        A --> D[Source Control 🌿]
+        A --> E[Extensions 🧩]
+        A --> F[Settings ⚙️]
+        
+        B --> G[File Tree]
+        C --> H[Find & Replace]
+        D --> I[Git Status]
+        E --> J[Extension Marketplace]
+        F --> K[Configuration]
+        
+        L[Sidebar] --> M[Context Panel]
+        N[Editor Area] --> O[Code Files]
+        P[Terminal/Output] --> Q[Command Line]
+    end
+```
 
 ## GitHub ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਖੋਲ੍ਹਣਾ
 
-ਇੰਟਰਨੈਟ ਤੋਂ ਪਹਿਲਾਂ, ਖੋਜਕਰਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਲਈ ਲਾਇਬ੍ਰੇਰੀਆਂ ਵਿੱਚ ਭੌਤਿਕ ਤੌਰ 'ਤੇ ਜਾਣ ਲਈ ਮਜਬੂਰ ਸਨ। GitHub ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ - ਇਹ ਦੂਰ ਸਥਿਤ ਕੋਡ ਦੇ ਸੰਗ੍ਰਹਿ ਹਨ। VSCode.dev ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਨੂੰ ਤੁਹਾਡੇ ਸਥਾਨਕ ਕੰਪਿਊਟਰ 'ਤੇ ਡਾਊਨਲੋਡ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਸੋਧ ਕਰਨ ਦੀ ਰਵਾਇਤੀ ਕਦਮ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ।
+ਇੰਟਰਨੈਟ ਤੋਂ ਪਹਿਲਾਂ, ਖੋਜਕਰਤਿਆਂ ਨੂੰ ਦਸਤਾਵੇਜ਼ਾਂ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਲਈ ਲਾਇਬ੍ਰੇਰੀਆਂ ਵਿੱਚ ਭੌਤਿਕ ਤੌਰ 'ਤੇ ਜਾਣਾ ਪੈਂਦਾ ਸੀ। GitHub ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ - ਇਹ ਦੂਰ-ਦੂਰ ਸਟੋਰ ਕੀਤੇ ਕੋਡ ਦੇ ਸੰਗ੍ਰਹਿ ਹਨ। VSCode.dev ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਨੂੰ ਤੁਹਾਡੇ ਸਥਾਨਕ ਮਸ਼ੀਨ 'ਤੇ ਡਾਊਨਲੋਡ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਸੰਪਾਦਨ ਕਰਨ ਦੇ ਰਵਾਇਤੀ ਕਦਮ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ।
 
-ਇਹ ਸਮਰੱਥਾ ਕਿਸੇ ਵੀ ਜਨਤਕ ਰਿਪੋਜ਼ਿਟਰੀ ਤੱਕ ਤੁਰੰਤ ਪਹੁੰਚ ਦੀ ਸਹੂਲਤ ਦਿੰਦੀ ਹੈ ਤਾਂ ਜੋ ਵੇਖਣ, ਸੋਧਣ ਜਾਂ ਯੋਗਦਾਨ ਦੇ ਸਕੇ। ਇੱਥੇ ਦੋ ਤਰੀਕੇ ਹਨ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਖੋਲ੍ਹਣ ਦੇ:
+ਇਹ ਸਮਰੱਥਾ ਕਿਸੇ ਵੀ ਜਨਤਕ ਰਿਪੋਜ਼ਿਟਰੀ ਤੱਕ ਤੁਰੰਤ ਪਹੁੰਚ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ, ਵੇਖਣ, ਸੰਪਾਦਨ ਕਰਨ ਜਾਂ ਯੋਗਦਾਨ ਦੇਣ ਲਈ। ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਖੋਲ੍ਹਣ ਲਈ ਦੋ ਤਰੀਕੇ ਹਨ:
 
-### ਤਰੀਕਾ 1: ਪੌਇੰਟ-ਐਂਡ-ਕਲਿਕ ਤਰੀਕਾ
+### ਤਰੀਕਾ 1: ਪੌਇੰਟ-ਐਂਡ-ਕਲਿੱਕ ਤਰੀਕਾ
 
-ਇਹ ਉਸ ਸਮੇਂ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ ਜਦੋਂ ਤੁਸੀਂ VSCode.dev ਵਿੱਚ ਨਵਾਂ ਸ਼ੁਰੂ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਇੱਕ ਖਾਸ ਰਿਪੋਜ਼ਿਟਰੀ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹ ਸਿੱਧਾ ਅਤੇ ਸ਼ੁਰੂਆਤੀ-ਦੋਸਤਾਨਾ ਹੈ:
+ਇਹ ਤਦ ਜਦੋਂ ਤੁਸੀਂ VSCode.dev ਵਿੱਚ ਨਵਾਂ ਸ਼ੁਰੂ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਇੱਕ ਖਾਸ ਰਿਪੋਜ਼ਿਟਰੀ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹ ਸਿੱਧਾ ਅਤੇ ਸ਼ੁਰੂਆਤੀ-ਮਿਤਰ ਹੈ:
 
 **ਇਹ ਕਿਵੇਂ ਕਰਨਾ ਹੈ:**
 
 1. [vscode.dev](https://vscode.dev) 'ਤੇ ਜਾਓ ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਉੱਥੇ ਨਹੀਂ ਹੋ
-2. ਵੈਲਕਮ ਸਕ੍ਰੀਨ 'ਤੇ "Open Remote Repository" ਬਟਨ ਲੱਭੋ ਅਤੇ ਇਸ 'ਤੇ ਕਲਿਕ ਕਰੋ
+2. ਵੈਲਕਮ ਸਕ੍ਰੀਨ 'ਤੇ "Open Remote Repository" ਬਟਨ ਲੱਭੋ ਅਤੇ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ
 
    ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.pa.png)
 
-3. ਕਿਸੇ ਵੀ GitHub ਰਿਪੋਜ਼ਿਟਰੀ URL ਨੂੰ ਪੇਸਟ ਕਰੋ (ਇਹ ਕੋਸ਼ਿਸ਼ ਕਰੋ: `https://github.com/microsoft/Web-Dev-For-Beginners`)
+3. ਕਿਸੇ ਵੀ GitHub ਰਿਪੋਜ਼ਿਟਰੀ URL ਨੂੰ ਪੇਸਟ ਕਰੋ (ਇਸ ਨੂੰ ਕੋਸ਼ਿਸ਼ ਕਰੋ: `https://github.com/microsoft/Web-Dev-For-Beginners`)
 4. Enter ਦਬਾਓ ਅਤੇ ਜਾਦੂ ਦੇਖੋ!
 
-**ਪ੍ਰੋ ਟਿਪ - ਕਮਾਂਡ ਪੈਲੇਟ ਸ਼ਾਰਟਕੱਟ:**
+**ਪ੍ਰੋ ਟਿਪ - ਕਮਾਂਡ ਪੈਲੇਟ ਸ਼ਾਰਟਕਟ:**
 
-ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਕੋਡਿੰਗ ਜਾਦੂਗਰ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ? ਇਹ ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟ ਕੋਸ਼ਿਸ਼ ਕਰੋ: Ctrl+Shift+P (ਜਾਂ Mac 'ਤੇ Cmd+Shift+P) ਕਮਾਂਡ ਪੈਲੇਟ ਖੋਲ੍ਹਣ ਲਈ:
+ਤੁਹਾਨੂੰ ਕੋਡਿੰਗ ਜਾਦੂਗਰ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਨਾ ਹੈ? ਇਹ ਕੀਬੋਰਡ ਸ਼ਾਰਟਕਟ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ: Ctrl+Shift+P (ਜਾਂ Mac 'ਤੇ Cmd+Shift+P) ਕਮਾਂਡ ਪੈਲੇਟ ਖੋਲ੍ਹਣ ਲਈ:
 
 ![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.pa.png)
 
-**ਕਮਾਂਡ ਪੈਲੇਟ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਜੋ ਕੁਝ ਕਰ ਸਕਦੇ ਹੋ ਉਸ ਲਈ ਇੱਕ ਖੋਜ ਇੰਜਣ ਹੈ:**
+**ਕਮਾਂਡ ਪੈਲੇਟ ਇਹ ਹੈ ਜਿਵੇਂ ਤੁਹਾਡੇ ਲਈ ਹਰ ਚੀਜ਼ ਲਈ ਇੱਕ ਖੋਜ ਇੰਜਨ ਹੋਵੇ:**
 - "open remote" ਟਾਈਪ ਕਰੋ ਅਤੇ ਇਹ ਤੁਹਾਡੇ ਲਈ ਰਿਪੋਜ਼ਿਟਰੀ ਓਪਨਰ ਲੱਭੇਗਾ
-- ਇਹ ਉਹ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਯਾਦ ਰੱਖਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਹਾਲ ਹੀ ਵਿੱਚ ਖੋਲ੍ਹੇ ਹਨ (ਬਹੁਤ ਹੀ ਸਹੂਲਤਦਾਇਕ!)
-- ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਵਰਤਣ ਦੀ ਆਦਤ ਪਾ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਬਿਜਲੀ ਦੀ ਗਤੀ ਨਾਲ ਕੋਡਿੰਗ ਕਰਦੇ ਹੋਏ ਮਹਿਸੂਸ ਕਰੋਗੇ
-- ਇਹ ਅਸਲ ਵਿੱਚ VSCode.dev ਦਾ "ਹੇ ਸਿਰੀ, ਪਰ ਕੋਡਿੰਗ ਲਈ" ਵਰਜਨ ਹੈ
+- ਇਹ ਤੁਹਾਡੇ ਦੁਆਰਾ ਹਾਲ ਹੀ ਵਿੱਚ ਖੋਲ੍ਹੇ ਗਏ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਨੂੰ ਯਾਦ ਰੱਖਦਾ ਹੈ (ਬਹੁਤ ਹੀ ਸਹਾਇਕ!)
+- ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਨਾਲ ਆਦਤ ਬਣਾਉਂਦੇ ਹੋ, ਤੁਸੀਂ ਬਿਜਲੀ ਦੀ ਗਤੀ ਨਾਲ ਕੋਡਿੰਗ ਮਹਿਸੂਸ ਕਰੋਗੇ
+- ਇਹ ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ VSCode.dev ਦਾ "ਹੇ ਸਿਰੀ, ਪਰ ਕੋਡਿੰਗ ਲਈ" ਵਰਜਨ ਹੈ
 
 ### ਤਰੀਕਾ 2: URL ਮੋਡੀਫਿਕੇਸ਼ਨ ਤਕਨੀਕ
 
-ਜਿਵੇਂ HTTP ਅਤੇ HTTPS ਵੱਖ-ਵੱਖ ਪ੍ਰੋਟੋਕੋਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਜਦੋਂ ਕਿ ਉਹੀ ਡੋਮੇਨ ਸਟ੍ਰਕਚਰ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹਨ, VSCode.dev ਇੱਕ URL ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜੋ GitHub ਦੇ ਪਤੇ ਦੇ ਸਿਸਟਮ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਕੋਈ ਵੀ GitHub ਰਿਪੋਜ਼ਿਟਰੀ URL ਨੂੰ VSCode.dev ਵਿੱਚ ਸਿੱਧੇ ਖੋਲ੍ਹਣ ਲਈ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ।
+ਜਿਵੇਂ HTTP ਅਤੇ HTTPS ਵੱਖ-ਵੱਖ ਪ੍ਰੋਟੋਕੋਲ ਵਰਤਦੇ ਹਨ ਜਦੋਂ ਕਿ ਉਹੀ ਡੋਮੇਨ ਸਟ੍ਰਕਚਰ ਨੂੰ ਬਣਾਈ ਰੱਖਦੇ ਹਨ, VSCode.dev ਇੱਕ URL ਪੈਟਰਨ ਵਰਤਦਾ ਹੈ ਜੋ GitHub ਦੇ ਪਤੇ ਦੇ ਸਿਸਟਮ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਕਿਸੇ ਵੀ GitHub ਰਿਪੋਜ਼ਿਟਰੀ URL ਨੂੰ VSCode.dev ਵਿੱਚ ਸਿੱਧੇ ਖੋਲ੍ਹਣ ਲਈ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ।
 
-**URL ਤਬਦੀਲੀ ਪੈਟਰਨ:**
+**URL ਤਬਦੀਲੀ ਪੈਟ
+- ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਸਾਰੇ staged ਤਬਦੀਲੀਆਂ ਨਾਲ ਸੰਤੁਸ਼ਟ ਹੋ
+- ਇੱਕ ਛੋਟਾ ਨੋਟ ਲਿਖੋ ਜਿਸ ਵਿੱਚ ਦੱਸੋ ਕਿ ਤੁਸੀਂ ਕੀ ਕੀਤਾ (ਇਹ ਤੁਹਾਡਾ "commit message" ਹੈ)
+- ਸਭ ਕੁਝ GitHub 'ਤੇ ਸੇਵ ਕਰਨ ਲਈ checkmark ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ
+- ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਚੀਜ਼ ਬਾਰੇ ਆਪਣਾ ਮਨ ਬਦਲਦੇ ਹੋ, ਤਾਂ undo ਆਈਕਨ ਤੁਹਾਨੂੰ ਤਬਦੀਲੀਆਂ ਨੂੰ ਰੱਦ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ
 
-| ਰਿਪੋਜ਼ਿਟਰੀ ਕਿਸਮ | GitHub URL | VSCode.dev URL |
-|----------------|---------------------|----------------|
-| **ਜਨਤਕ ਰਿਪੋਜ਼ਿਟਰੀ** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
-| **ਨਿੱਜੀ ਪ੍ਰੋਜੈਕਟ** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
-| **ਕੋਈ ਵੀ ਪਹੁੰਚਯੋਗ ਰਿਪੋ** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
+**ਵਧੀਆ commit messages ਲਿਖਣਾ (ਇਹ ਤੁਹਾਨੂੰ ਆਸਾਨ ਲੱਗੇਗਾ!):**
+- ਸਿਰਫ ਦੱਸੋ ਕਿ ਤੁਸੀਂ ਕੀ ਕੀਤਾ, ਜਿਵੇਂ "Add contact form" ਜਾਂ "Fix broken navigation"
+- ਇਸਨੂੰ ਛੋਟਾ ਅਤੇ ਸਧਾਰਨ ਰੱਖੋ – ਟਵੀਟ ਦੀ ਲੰਬਾਈ ਸੋਚੋ, ਨਿਬੰਧ ਨਹੀਂ
+- ਕਾਰਵਾਈ ਦੇ ਸ਼ਬਦਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਜਿਵੇਂ "Add", "Fix", "Update", ਜਾਂ "Remove"
+- **ਵਧੀਆ ਉਦਾਹਰਨਾਂ**: "Add responsive navigation menu", "Fix mobile layout issues", "Update colors for better accessibility"
 
-**ਲਾਗੂ ਕਰਨਾ:**
-- `github.com` ਨੂੰ `vscode.dev/github` ਨਾਲ ਬਦਲੋ
-- ਸਾਰੇ ਹੋਰ URL ਘਟਕਾਂ ਨੂੰ ਬਦਲੋ ਨਾ
-- ਕਿਸੇ ਵੀ ਜਨਤਕ ਪਹੁੰਚਯੋਗ ਰਿਪੋਜ਼ਿਟਰੀ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ
-- ਤੁਰੰਤ ਸੋਧ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
+> 💡 **ਤੁਰੰਤ ਨੈਵੀਗੇਸ਼ਨ ਟਿਪ**: ਆਪਣੇ GitHub ਰਿਪੋਜ਼ਿਟਰੀ 'ਤੇ ਵਾਪਸ ਜਾਣ ਲਈ ਅਤੇ ਆਪਣੇ committed ਤਬਦੀਲੀਆਂ ਨੂੰ ਆਨਲਾਈਨ ਦੇਖਣ ਲਈ ਉੱਪਰ ਖੱਬੇ ਪਾਸੇ hamburger menu (☰) ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ ਸੰਪਾਦਨ ਵਾਤਾਵਰਣ ਅਤੇ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਘਰ GitHub ਦੇ ਵਿਚਕਾਰ ਇੱਕ portal ਵਰਗਾ ਹੈ!
 
-> 💡 **ਜੀਵਨ ਬਦਲਣ ਵਾਲੀ ਟਿਪ**: ਆਪਣੇ ਮਨਪਸੰਦ ਰਿਪੋਜ਼ਿਟਰੀਜ਼ ਦੇ VSCode.dev ਵਰਜਨ ਨੂੰ ਬੁੱਕਮਾਰਕ ਕਰੋ। ਮੇਰੇ ਕੋਲ "Edit My Portfolio" ਅਤੇ "Fix Documentation" ਵਰਗੇ ਬੁੱਕਮਾਰਕ ਹਨ ਜੋ ਮੈਨੂੰ ਸਿੱਧੇ ਸੋਧ ਕਰਨ ਦੇ ਮੋਡ ਵਿੱਚ ਲੈ ਜਾਂਦੇ ਹਨ!
+## ਫੰਕਸ਼ਨਲਿਟੀ ਨੂੰ ਵਧਾਉਣਾ Extensions ਨਾਲ
 
-**ਤੁਸੀਂ ਕਿਹੜਾ ਤਰੀਕਾ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ?**
-- **ਇੰਟਰਫੇਸ ਤਰੀਕਾ**: ਵਧੀਆ ਜਦੋਂ ਤੁਸੀਂ ਖੋਜ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਸਹੀ ਰਿਪੋਜ਼ਿਟਰੀ ਨਾਮ ਯਾਦ ਨਹੀਂ ਹੈ
-- **URL ਚਾਲਾਕੀ**: ਜਦੋਂ ਤੁਸੀਂ ਬਿਲਕੁਲ ਜਾਣਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਕਿੱਥੇ ਜਾ ਰਹੇ ਹੋ, ਤਾਂ ਬਿਜਲੀ ਦੀ ਗਤੀ ਨਾਲ ਪਹੁੰਚ ਲਈ ਬਹੁਤ ਵਧੀਆ
+ਜਿਵੇਂ ਕਿ ਇੱਕ ਕਾਰੀਗਰ ਦੇ ਵਰਕਸ਼ਾਪ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਕੰਮਾਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਟੂਲ ਹੁੰਦੇ ਹਨ, VSCode.dev ਨੂੰ extensions ਨਾਲ ਕਸਟਮਾਈਜ਼ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜੋ ਖਾਸ ਸਮਰੱਥਾਵਾਂ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ। ਇਹ community-developed plugins ਆਮ ਵਿਕਾਸ ਦੀਆਂ ਜ਼ਰੂਰਤਾਂ ਨੂੰ address ਕਰਦੇ ਹਨ ਜਿਵੇਂ code formatting, live preview, ਅਤੇ enhanced Git integration।
 
-## ਫਾਈਲਾਂ ਅਤੇ ਪ੍ਰੋਜੈਕਟਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ
+Extension marketplace ਵਿੱਚ ਦੁਨੀਆ ਭਰ ਦੇ developers ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਹਜ਼ਾਰਾਂ ਮੁਫ਼ਤ ਟੂਲ ਹਨ। ਹਰ extension ਖਾਸ workflow ਚੁਣੌਤੀਆਂ ਦਾ ਹੱਲ ਦਿੰਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਇੱਕ personal development environment ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਖਾਸ ਜ਼ਰੂਰਤਾਂ ਅਤੇ ਪਸੰਦਾਂ ਲਈ ਉਚਿਤ ਹੈ।
 
-ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਰਿਪੋਜ਼ਿਟਰੀ ਖੋਲ੍ਹ ਲਈ ਹੈ, ਆਓ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੀਏ! VSCode.dev ਤੁਹਾਨੂੰ ਉਹ ਸਭ ਕੁਝ ਦਿੰਦਾ ਹੈ
-- ਹਰ ਐਕਸਟੈਂਸ਼ਨ ਰੇਟਿੰਗ, ਡਾਊਨਲੋਡ ਗਿਣਤੀ, ਅਤੇ ਅਸਲ ਯੂਜ਼ਰ ਰਿਵਿਊਜ਼ ਦਿਖਾਉਂਦੀ ਹੈ
-- ਤੁਹਾਨੂੰ ਸਕ੍ਰੀਨਸ਼ਾਟ ਅਤੇ ਸਪਸ਼ਟ ਵਰਣਨ ਮਿਲਦੇ ਹਨ ਕਿ ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ
-- ਸਭ ਕੁਝ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਅਨੁਕੂਲਤਾ ਜਾਣਕਾਰੀ ਨਾਲ ਚਿੰਨ੍ਹਿਤ ਹੈ
-- ਸਮਾਨ ਐਕਸਟੈਂਸ਼ਨ ਸੁਝਾਏ ਜਾਂਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਸੀਂ ਵਿਕਲਪਾਂ ਦੀ ਤੁਲਨਾ ਕਰ ਸਕੋ
+### ਆਪਣੇ Perfect Extensions ਲੱਭਣਾ
 
-### ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰਨਾ (ਇਹ ਬਹੁਤ ਆਸਾਨ ਹੈ!)
+Extension marketplace ਬਹੁਤ ਹੀ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਜੋ ਚਾਹੀਦਾ ਹੈ ਉਹ ਲੱਭਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਨਹੀਂ ਹੋਵੇਗੀ। ਇਹ ਤੁਹਾਨੂੰ ਖਾਸ ਟੂਲਾਂ ਅਤੇ ਕੁਝ ਮਜ਼ੇਦਾਰ ਚੀਜ਼ਾਂ ਦੀ ਖੋਜ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਪਤਾ ਵੀ ਨਹੀਂ ਸੀ ਕਿ ਮੌਜੂਦ ਹਨ!
 
-ਤੁਹਾਡੇ ਐਡੀਟਰ ਵਿੱਚ ਨਵੀਆਂ ਖੁਬੀਆਂ ਸ਼ਾਮਲ ਕਰਨਾ ਸਿਰਫ ਇੱਕ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਨ ਜਿਤਨਾ ਆਸਾਨ ਹੈ। ਐਕਸਟੈਂਸ਼ਨ ਸੈਕਿੰਡਾਂ ਵਿੱਚ ਇੰਸਟਾਲ ਹੁੰਦੇ ਹਨ ਅਤੇ ਤੁਰੰਤ ਕੰਮ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ – ਨਾ ਕੋਈ ਰੀਸਟਾਰਟ, ਨਾ ਕੋਈ ਉਡੀਕ।
+**Marketplace 'ਤੇ ਜਾਣਾ:**
 
-**ਤੁਹਾਨੂੰ ਸਿਰਫ ਇਹ ਕਰਨਾ ਹੈ:**
+1. Activity Bar ਵਿੱਚ Extensions icon (🧩) 'ਤੇ ਕਲਿਕ ਕਰੋ
+2. Browse ਕਰੋ ਜਾਂ ਕੁਝ ਖਾਸ ਲੱਭਣ ਲਈ search ਕਰੋ
+3. ਜੋ ਕੁਝ ਦਿਲਚਸਪ ਲੱਗੇ ਉਸ 'ਤੇ ਕਲਿਕ ਕਰੋ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣਨ ਲਈ
 
-1. ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਉਸ ਦੀ ਖੋਜ ਕਰੋ (ਜਿਵੇਂ "live server" ਜਾਂ "prettier" ਖੋਜੋ)
-2. ਜੋ ਚੰਗਾ ਲੱਗੇ ਉਸ 'ਤੇ ਕਲਿਕ ਕਰੋ ਤਾਂ ਜੋ ਹੋਰ ਵੇਰਵੇ ਦੇਖ ਸਕੋ
-3. ਪੜ੍ਹੋ ਕਿ ਇਹ ਕੀ ਕਰਦਾ ਹੈ ਅਤੇ ਰੇਟਿੰਗ ਚੈੱਕ ਕਰੋ
-4. ਉਸ ਨੀਲੇ "Install" ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ ਤੁਸੀਂ ਤਿਆਰ ਹੋ!
+**ਤੁਹਾਨੂੰ ਇੱਥੇ ਕੀ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ:**
 
-![Installing extensions](../../../../8-code-editor/images/install-extension.gif)
+| Section | What's Inside | Why It's Helpful |
+|----------|---------|----------|
+| **Installed** | Extensions ਜੋ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਜੋੜੇ ਹਨ | ਤੁਹਾਡਾ personal coding toolkit |
+| **Popular** | ਸਭ ਤੋਂ ਪਸੰਦੀਦਾ | ਜੋ ਜ਼ਿਆਦਾਤਰ developers ਪਸੰਦ ਕਰਦੇ ਹਨ |
+| **Recommended** | ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਸਮਾਰਟ ਸੁਝਾਅ | VSCode.dev ਦੇ ਮਦਦਗਾਰ ਸੁਝਾਅ |
 
-**ਪਿੱਛੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
-- ਐਕਸਟੈਂਸ਼ਨ ਆਪਣੇ ਆਪ ਡਾਊਨਲੋਡ ਅਤੇ ਸੈਟਅਪ ਕਰ ਲੈਂਦਾ ਹੈ
-- ਨਵੀਆਂ ਖੁਬੀਆਂ ਤੁਹਾਡੇ ਇੰਟਰਫੇਸ ਵਿੱਚ ਤੁਰੰਤ ਦਿਖਾਈ ਦਿੰਦੀ ਹਨ
-- ਸਭ ਕੁਝ ਤੁਰੰਤ ਕੰਮ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ (ਵਾਕਈ, ਇਹ ਇੰਨਾ ਤੇਜ਼ ਹੈ!)
-- ਜੇ ਤੁਸੀਂ ਸਾਈਨ-ਇਨ ਹੋ, ਤਾਂ ਐਕਸਟੈਂਸ਼ਨ ਤੁਹਾਡੇ ਸਾਰੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਸਿੰਕ ਕਰਦਾ ਹੈ
+**Browsing ਨੂੰ ਆਸਾਨ ਬਣਾਉਣ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ:**
+- ਹਰ extension ratings, download counts, ਅਤੇ real user reviews ਦਿਖਾਉਂਦਾ ਹੈ
+- ਤੁਹਾਨੂੰ screenshots ਅਤੇ ਸਪਸ਼ਟ descriptions ਮਿਲਦੇ ਹਨ ਕਿ ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ
+- Compatibility info ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦਰਸਾਇਆ ਜਾਂਦਾ ਹੈ
+- Similar extensions ਦੀ ਸਲਾਹ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ options ਦੀ ਤੁਲਨਾ ਕਰ ਸਕੋ
+
+### Extensions Install ਕਰਨਾ (ਇਹ ਬਹੁਤ ਆਸਾਨ ਹੈ!)
+
+ਤੁਹਾਡੇ editor ਵਿੱਚ ਨਵੀਆਂ ਸਮਰੱਥਾਵਾਂ ਸ਼ਾਮਲ ਕਰਨਾ ਸਿਰਫ ਇੱਕ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਨ ਜਿਤਨਾ ਆਸਾਨ ਹੈ। Extensions ਸੈਕਿੰਡਾਂ ਵਿੱਚ install ਹੁੰਦੇ ਹਨ ਅਤੇ ਤੁਰੰਤ ਕੰਮ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ – ਕੋਈ restarts ਨਹੀਂ, ਕੋਈ ਇੰਤਜ਼ਾਰ ਨਹੀਂ।
+
+**ਇਹ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ:**
 
-**ਕੁਝ ਐਕਸਟੈਂਸ਼ਨ ਜੋ ਮੈਂ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਿਫਾਰਸ਼ ਕਰਾਂਗਾ:**
-- **Live Server**: ਜਦੋਂ ਤੁਸੀਂ ਕੋਡ ਕਰਦੇ ਹੋ ਤਾਂ ਆਪਣੀ ਵੈਬਸਾਈਟ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਅਪਡੇਟ ਹੁੰਦਾ ਦੇਖੋ (ਇਹ ਜਾਦੂ ਵਰਗਾ ਹੈ!)
-- **Prettier**: ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸਵੈਚਾਰ ਅਤੇ ਪੇਸ਼ੇਵਰ ਬਣਾਉਂਦਾ ਹੈ
-- **Auto Rename Tag**: ਇੱਕ HTML ਟੈਗ ਬਦਲੋ ਅਤੇ ਇਸਦਾ ਸਾਥੀ ਵੀ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ
-- **Bracket Pair Colorizer**: ਤੁਹਾਡੇ ਬ੍ਰੈਕਟ ਨੂੰ ਰੰਗ-ਕੋਡ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਕਦੇ ਗੁੰਮ ਨਾ ਹੋਵੋ
-- **GitLens**: ਤੁਹਾਡੇ Git ਫੀਚਰਾਂ ਨੂੰ ਬਹੁਤ ਸਾਰੀਆਂ ਮਦਦਗਾਰ ਜਾਣਕਾਰੀਆਂ ਨਾਲ ਸੁਪਰਚਾਰਜ ਕਰਦਾ ਹੈ
+1. ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਉਸ ਲਈ search ਕਰੋ (ਜਿਵੇਂ "live server" ਜਾਂ "prettier" ਲੱਭਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ)
+2. ਜੋ ਚੰਗਾ ਲੱਗੇ ਉਸ 'ਤੇ ਕਲਿਕ ਕਰੋ ਹੋਰ ਵੇਰਵੇ ਦੇਖਣ ਲਈ
+3. ਪੜ੍ਹੋ ਕਿ ਇਹ ਕੀ ਕਰਦਾ ਹੈ ਅਤੇ ratings ਚੈੱਕ ਕਰੋ
+4. ਉਸ ਨੀਲੇ "Install" ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ ਤੁਸੀਂ ਹੋ ਗਏ!
 
-### ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨਾ
+**ਪਿੱਛੇ ਕੀ ਹੁੰਦਾ ਹੈ:**
+- Extension download ਹੁੰਦਾ ਹੈ ਅਤੇ ਆਪਣੇ ਆਪ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ
+- ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਤੁਹਾਡੇ interface ਵਿੱਚ ਤੁਰੰਤ ਆ ਜਾਂਦੀਆਂ ਹਨ
+- ਸਭ ਕੁਝ ਤੁਰੰਤ ਕੰਮ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ (ਸੱਚਮੁੱਚ, ਇਹ ਬਹੁਤ ਤੇਜ਼ ਹੈ!)
+- ਜੇ ਤੁਸੀਂ signed in ਹੋ, ਤਾਂ extension ਤੁਹਾਡੇ ਸਾਰੇ devices 'ਤੇ sync ਕਰਦਾ ਹੈ
+
+**ਕੁਝ extensions ਜੋ ਮੈਂ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਿਫਾਰਸ਼ ਕਰਾਂਗਾ:**
+- **Live Server**: ਜਦੋਂ ਤੁਸੀਂ code ਕਰਦੇ ਹੋ ਤਾਂ ਆਪਣੀ website ਨੂੰ real-time ਵਿੱਚ update ਹੁੰਦੇ ਦੇਖੋ (ਇਹ ਜਾਦੂਈ ਹੈ!)
+- **Prettier**: ਤੁਹਾਡਾ code ਸਵੱਛ ਅਤੇ professional ਬਣਾਉਂਦਾ ਹੈ
+- **Auto Rename Tag**: ਇੱਕ HTML tag ਨੂੰ ਬਦਲੋ ਅਤੇ ਇਸਦਾ ਸਾਥੀ ਵੀ update ਹੁੰਦਾ ਹੈ
+- **Bracket Pair Colorizer**: ਤੁਹਾਡੇ brackets ਨੂੰ color-code ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਕਦੇ ਗੁੰਮ ਨਾ ਹੋਵੋ
+- **GitLens**: ਤੁਹਾਡੇ Git features ਨੂੰ ਬਹੁਤ ਸਾਰੀਆਂ ਮਦਦਗਾਰ ਜਾਣਕਾਰੀਆਂ ਨਾਲ supercharge ਕਰਦਾ ਹੈ
 
-ਅਧਿਕਤਰ ਐਕਸਟੈਂਸ਼ਨ ਸੈਟਿੰਗਾਂ ਨਾਲ ਆਉਂਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਆਪਣੇ ਕੰਮ ਦੇ ਤਰੀਕੇ ਅਨੁਸਾਰ ਢਾਲ ਸਕਦੇ ਹੋ। ਇਸਨੂੰ ਕਾਰ ਵਿੱਚ ਸੀਟ ਅਤੇ ਸ਼ੀਸ਼ੇ ਢਾਲਣ ਵਰਗਾ ਸੋਚੋ – ਹਰ ਕਿਸੇ ਦੀਆਂ ਆਪਣੀਆਂ ਪਸੰਦਾਂ ਹੁੰਦੀਆਂ ਹਨ!
+### ਆਪਣੇ Extensions ਨੂੰ Customise ਕਰਨਾ
 
-**ਐਕਸਟੈਂਸ਼ਨ ਸੈਟਿੰਗਾਂ ਢਾਲਣਾ:**
+ਜ਼ਿਆਦਾਤਰ extensions ਵਿੱਚ settings ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਤੁਸੀਂ ਆਪਣੇ workflow ਲਈ ਬਿਲਕੁਲ ਸਹੀ ਬਣਾਉਣ ਲਈ tweak ਕਰ ਸਕਦੇ ਹੋ। ਇਸਨੂੰ ਇੱਕ ਕਾਰ ਵਿੱਚ ਸੀਟ ਅਤੇ ਸ਼ੀਸ਼ੇ adjust ਕਰਨ ਵਾਂਗ ਸੋਚੋ – ਹਰ ਕਿਸੇ ਦੀਆਂ ਆਪਣੀਆਂ ਪਸੰਦਾਂ ਹੁੰਦੀਆਂ ਹਨ!
 
-1. ਐਕਸਟੈਂਸ਼ਨ ਪੈਨਲ ਵਿੱਚ ਆਪਣੇ ਇੰਸਟਾਲ ਕੀਤੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਲੱਭੋ
-2. ਇਸਦੇ ਨਾਮ ਦੇ ਨਾਲ ਛੋਟੇ ਗੀਅਰ ਆਈਕਨ (⚙️) ਨੂੰ ਲੱਭੋ ਅਤੇ ਇਸ 'ਤੇ ਕਲਿਕ ਕਰੋ
-3. ਡ੍ਰਾਪਡਾਊਨ ਵਿੱਚੋਂ "Extension Settings" ਚੁਣੋ
-4. ਚੀਜ਼ਾਂ ਨੂੰ ਢਾਲੋ ਜਦੋਂ ਤੱਕ ਇਹ ਤੁਹਾਡੇ ਕੰਮ ਦੇ ਤਰੀਕੇ ਲਈ ਸਹੀ ਮਹਿਸੂਸ ਨਾ ਕਰੇ
+**Extension settings ਨੂੰ tweak ਕਰਨਾ:**
 
-![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.pa.png)
+1. Extensions panel ਵਿੱਚ ਆਪਣੇ installed extension ਨੂੰ ਲੱਭੋ
+2. ਇਸਦੇ ਨਾਮ ਦੇ ਨਾਲ ਛੋਟੇ gear icon (⚙️) ਨੂੰ ਲੱਭੋ ਅਤੇ ਇਸ 'ਤੇ ਕਲਿਕ ਕਰੋ
+3. Dropdown ਵਿੱਚੋਂ "Extension Settings" ਚੁਣੋ
+4. ਚੀਜ਼ਾਂ ਨੂੰ adjust ਕਰੋ ਜਦ ਤੱਕ ਇਹ ਤੁਹਾਡੇ workflow ਲਈ ਬਿਲਕੁਲ ਸਹੀ ਮਹਿਸੂਸ ਨਾ ਹੋਵੇ
 
-**ਆਮ ਚੀਜ਼ਾਂ ਜੋ ਤੁਸੀਂ ਢਾਲਣਾ ਚਾਹੋਗੇ:**
-- ਤੁਹਾਡਾ ਕੋਡ ਕਿਵੇਂ ਫਾਰਮੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (tabs vs spaces, line length, ਆਦਿ)
-- ਕਿਹੜੇ ਕੀਬੋਰਡ ਸ਼ਾਰਟਕਟ ਵੱਖ-ਵੱਖ ਕਾਰਵਾਈਆਂ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦੇ ਹਨ
-- ਕਿਹੜੇ ਫਾਈਲ ਟਾਈਪਸ 'ਤੇ ਐਕਸਟੈਂਸ਼ਨ ਕੰਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ
-- ਖਾਸ ਫੀਚਰਾਂ ਨੂੰ ਚਾਲੂ ਜਾਂ ਬੰਦ ਕਰਨਾ ਤਾਂ ਜੋ ਚੀਜ਼ਾਂ ਸਾਫ ਰਹਿਣ
+**ਆਮ ਚੀਜ਼ਾਂ ਜੋ ਤੁਸੀਂ adjust ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ:**
+- ਤੁਹਾਡਾ code ਕਿਵੇਂ format ਹੁੰਦਾ ਹੈ (tabs vs spaces, line length, ਆਦਿ)
+- ਕਿਹੜੇ keyboard shortcuts ਵੱਖ-ਵੱਖ actions ਨੂੰ trigger ਕਰਦੇ ਹਨ
+- ਕਿਹੜੇ file types 'ਤੇ extension ਕੰਮ ਕਰਨਾ ਚਾਹੁੰਦਾ ਹੈ
+- ਖਾਸ features ਨੂੰ ਚਾਲੂ ਜਾਂ ਬੰਦ ਕਰਨਾ ਤਾਂ ਜੋ ਚੀਜ਼ਾਂ ਸਾਫ ਰਹਿਣ
 
-### ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸੰਗਠਿਤ ਰੱਖਣਾ
+### ਆਪਣੇ Extensions ਨੂੰ ਸੰਗਠਿਤ ਰੱਖਣਾ
 
-ਜਿਵੇਂ ਤੁਸੀਂ ਹੋਰ ਸ਼ਾਨਦਾਰ ਐਕਸਟੈਂਸ਼ਨ ਲੱਭਦੇ ਹੋ, ਤੁਸੀਂ ਆਪਣੀ ਕਲੈਕਸ਼ਨ ਨੂੰ ਸਾਫ ਅਤੇ ਸੁਚਾਰੂ ਰੱਖਣਾ ਚਾਹੋਗੇ। VSCode.dev ਇਸਨੂੰ ਮੈਨੇਜ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।
+ਜਿਵੇਂ ਤੁਸੀਂ ਹੋਰ ਮਜ਼ੇਦਾਰ extensions ਦੀ ਖੋਜ ਕਰਦੇ ਹੋ, ਤੁਸੀਂ ਆਪਣੀ collection ਨੂੰ ਸਾਫ ਅਤੇ smoothly ਚਲਾਉਣਾ ਚਾਹੋਗੇ। VSCode.dev ਇਸਨੂੰ manage ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।
 
-**ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਮੈਨੇਜਮੈਂਟ ਵਿਕਲਪ:**
+**ਤੁਹਾਡੇ extension management options:**
 
-| ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ | ਇਹ ਕਦੋਂ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ | ਪ੍ਰੋ ਟਿਪ |
+| What You Can Do | When It's Helpful | Pro Tip |
 |--------|---------|----------|
-| **Disable** | ਜਾਂਚਣਾ ਕਿ ਕੀ ਕੋਈ ਐਕਸਟੈਂਸ਼ਨ ਸਮੱਸਿਆ ਪੈਦਾ ਕਰ ਰਿਹਾ ਹੈ | ਇਸਨੂੰ ਅਨਇੰਸਟਾਲ ਕਰਨ ਤੋਂ ਬਿਹਤਰ ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਵਾਪਸ ਚਾਹ ਸਕਦੇ ਹੋ |
-| **Uninstall** | ਉਹ ਐਕਸਟੈਂਸ਼ਨ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾਉਣਾ ਜੋ ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੇ ਨਹੀਂ | ਤੁਹਾਡੇ ਵਾਤਾਵਰਣ ਨੂੰ ਸਾਫ ਅਤੇ ਤੇਜ਼ ਰੱਖਦਾ ਹੈ |
-| **Update** | ਨਵੀਆਂ ਖੁਬੀਆਂ ਅਤੇ ਬੱਗ ਫਿਕਸ ਪ੍ਰਾਪਤ ਕਰਨਾ | ਆਮ ਤੌਰ 'ਤੇ ਆਪਣੇ ਆਪ ਹੁੰਦਾ ਹੈ, ਪਰ ਚੈੱਕ ਕਰਨਾ ਵਧੀਆ ਹੈ |
+| **Disable** | Check ਕਰਨਾ ਕਿ ਕੋਈ extension issues ਪੈਦਾ ਕਰ ਰਿਹਾ ਹੈ | Uninstall ਕਰਨ ਤੋਂ ਬਿਹਤਰ ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਵਾਪਸ ਚਾਹੁੰਦੇ ਹੋ |
+| **Uninstall** | ਉਹ extensions ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾਉਣਾ ਜੋ ਤੁਹਾਨੂੰ ਲੋੜ ਨਹੀਂ | ਤੁਹਾਡੇ environment ਨੂੰ ਸਾਫ ਅਤੇ ਤੇਜ਼ ਰੱਖਦਾ ਹੈ |
+| **Update** | ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ bug fixes ਪ੍ਰਾਪਤ ਕਰਨਾ | ਆਮ ਤੌਰ 'ਤੇ ਆਪਣੇ ਆਪ ਹੁੰਦਾ ਹੈ, ਪਰ ਚੈੱਕ ਕਰਨਾ ਵਧੀਆ ਹੈ |
+
+**ਮੈਂ extensions ਨੂੰ manage ਕਰਨ ਦਾ ਤਰੀਕਾ:**
+- ਹਰ ਕੁਝ ਮਹੀਨੇ, ਮੈਂ ਜੋ install ਕੀਤਾ ਹੈ ਉਸ ਦੀ ਸਮੀਖਿਆ ਕਰਦਾ ਹਾਂ ਅਤੇ ਜੋ ਮੈਂ ਵਰਤ ਨਹੀਂ ਰਿਹਾ ਉਸਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹਾਂ
+- ਮੈਂ extensions ਨੂੰ updated ਰੱਖਦਾ ਹਾਂ ਤਾਂ ਜੋ ਮੈਨੂੰ ਨਵੀਆਂ ਸੁਧਾਰਾਂ ਅਤੇ security fixes ਮਿਲਣ
+- ਜੇ ਕੁਝ slow ਲੱਗਦਾ ਹੈ, ਤਾਂ ਮੈਂ ਅਸਥਾਈ ਤੌਰ 'ਤੇ extensions ਨੂੰ disable ਕਰਦਾ ਹਾਂ ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਕੀ ਕੋਈ ਇਸਦਾ ਕਾਰਨ ਹੈ
+- ਜਦੋਂ extensions ਨੂੰ major updates ਮਿਲਦੇ ਹਨ, ਮੈਂ update notes ਪੜ੍ਹਦਾ ਹਾਂ – ਕਈ ਵਾਰ ਨਵੀਆਂ ਮਜ਼ੇਦਾਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹੁੰਦੀਆਂ ਹਨ!
+
+> ⚠️ **Performance tip**: Extensions ਸ਼ਾਨਦਾਰ ਹਨ, ਪਰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਹੋਣ ਨਾਲ ਚੀਜ਼ਾਂ slow ਹੋ ਸਕਦੀਆਂ ਹਨ। ਉਹਨਾਂ 'ਤੇ ਧਿਆਨ ਦਿਓ ਜੋ ਸੱਚਮੁੱਚ ਤੁਹਾਡੀ ਜ਼ਿੰਦਗੀ ਆਸਾਨ ਬਣਾਉਂਦੀਆਂ ਹਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ uninstall ਕਰਨ ਤੋਂ ਨਾ ਡਰੋ ਜੋ ਤੁਸੀਂ ਕਦੇ ਵਰਤਦੇ ਨਹੀਂ।
+
+### 🎯 ਪੈਡਾਗੌਜੀਕਲ Check-in: Development Environment Customization
+
+**Architecture Understanding**: ਤੁਸੀਂ community-created extensions ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ professional development environment ਨੂੰ customize ਕਰਨਾ ਸਿੱਖਿਆ ਹੈ। ਇਹ ਉਸ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਵੇਂ enterprise development teams standardized toolchains ਬਣਾਉਂਦੀਆਂ ਹਨ।
+
+**Key Concepts Mastered**:
+- **Extension Discovery**: ਖਾਸ development ਚੁਣੌਤੀਆਂ ਦਾ ਹੱਲ ਲੱਭਣਾ
+- **Environment Configuration**: ਟੂਲਾਂ ਨੂੰ personal ਜਾਂ team preferences ਦੇ ਅਨੁਸਾਰ customize ਕਰਨਾ
+- **Performance Optimization**: functionality ਅਤੇ system performance ਦੇ ਵਿਚਕਾਰ ਸੰਤੁਲਨ ਬਣਾਉਣਾ
+- **Community Collaboration**: ਦੁਨੀਆ ਭਰ ਦੇ developer community ਦੁਆਰਾ ਬਣਾਏ ਟੂਲਾਂ ਦੀ ਵਰਤੋਂ
+
+**Industry Connection**: Extension ecosystems ਵੱਡੇ development platforms ਜਿਵੇਂ VS Code, Chrome DevTools, ਅਤੇ modern IDEs ਨੂੰ ਤਾਕਤ ਦਿੰਦੇ ਹਨ। Extensions ਨੂੰ evaluate, install, ਅਤੇ configure ਕਰਨ ਦਾ ਸਮਝਣਾ professional development workflows ਲਈ ਜ਼ਰੂਰੀ ਹੈ।
+
+**Reflection Question**: ਤੁਸੀਂ 10 developers ਦੀ ਇੱਕ team ਲਈ ਇੱਕ standardized development environment ਸੈਟ ਕਰਨ ਦਾ ਤਰੀਕਾ ਕਿਵੇਂ ਅਪਣਾਉਗੇ? Consistency, performance, ਅਤੇ individual preferences ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ।
+
+## 📈 ਤੁਹਾਡਾ Cloud Development Mastery Timeline
 
-**ਮੈਂ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਮੈਨੇਜ ਕਰਦਾ ਹਾਂ:**
-- ਹਰ ਕੁਝ ਮਹੀਨੇ, ਮੈਂ ਜੋ ਇੰਸਟਾਲ ਕੀਤਾ ਹੈ ਉਸ ਦੀ ਸਮੀਖਿਆ ਕਰਦਾ ਹਾਂ ਅਤੇ ਜੋ ਮੈਂ ਵਰਤ ਨਹੀਂ ਰਿਹਾ ਉਸਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹਾਂ
-- ਮੈਂ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਅਪਡੇਟ ਰੱਖਦਾ ਹਾਂ ਤਾਂ ਜੋ ਮੈਨੂੰ ਨਵੀਆਂ ਸੁਧਾਰਾਂ ਅਤੇ ਸੁਰੱਖਿਆ ਫਿਕਸ ਮਿਲਣ
-- ਜੇ ਕੁਝ ਹੌਲੀ ਲੱਗਦਾ ਹੈ, ਤਾਂ ਮੈਂ ਅਸਥਾਈ ਤੌਰ 'ਤੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਅਯੋਗ ਕਰਦਾ ਹਾਂ ਤਾਂ ਜੋ ਦੇਖ ਸਕਾਂ ਕਿ ਕੀ ਉਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਕਾਰਨ ਹੈ
-- ਜਦੋਂ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਵੱਡੇ ਅਪਡੇਟ ਮਿਲਦੇ ਹਨ, ਮੈਂ ਅਪਡੇਟ ਨੋਟਸ ਪੜ੍ਹਦਾ ਹਾਂ – ਕਈ ਵਾਰ ਉਥੇ ਸ਼ਾਨਦਾਰ ਨਵੀਆਂ ਖੁਬੀਆਂ ਹੁੰਦੀਆਂ ਹਨ!
+**🎓 Graduation Milestone**: ਤੁਸੀਂ cloud-based development ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਸਿੱਖ ਲਿਆ ਹੈ ਜੋ professional developers ਦੁਆਰਾ ਵੱਡੇ tech companies ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ skills software development ਦਾ ਭਵਿੱਖ ਦਰਸਾਉਂਦੀਆਂ ਹਨ।
 
-> ⚠️ **ਪਰਫਾਰਮੈਂਸ ਟਿਪ**: ਐਕਸਟੈਂਸ਼ਨ ਸ਼ਾਨਦਾਰ ਹਨ, ਪਰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਹੋਣ ਨਾਲ ਚੀਜ਼ਾਂ ਹੌਲੀ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਉਹਨਾਂ 'ਤੇ ਧਿਆਨ ਦਿਓ ਜੋ ਸੱਚਮੁੱਚ ਤੁਹਾਡੀ ਜ਼ਿੰਦਗੀ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਅਨਇੰਸਟਾਲ ਕਰਨ ਤੋਂ ਨਾ ਡਰੋ ਜੋ ਤੁਸੀਂ ਕਦੇ ਵਰਤਦੇ ਨਹੀਂ।
+**🔄 Next Level Capabilities**:
+- Advanced cloud development platforms (Codespaces, GitPod) ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਤਿਆਰ
+- Distributed development teams ਵਿੱਚ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ
+- ਦੁਨੀਆ ਭਰ ਦੇ open source projects ਵਿੱਚ ਯੋਗਦਾਨ ਦੇਣ ਲਈ ਸਜਗ
+- Modern DevOps ਅਤੇ continuous integration practices ਲਈ ਮਜ਼ਬੂਤ ​​ਅਧਾਰ ਸੈਟ
 
 ## GitHub Copilot Agent Challenge 🚀
 
-ਜਿਵੇਂ NASA ਆਪਣੇ ਅੰਤਰਿਕਸ਼ ਮਿਸ਼ਨਾਂ ਲਈ ਸੰਰਚਿਤ ਤਰੀਕੇ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ, ਇਹ ਚੁਣੌਤੀ VSCode.dev ਦੇ ਹੁਨਰਾਂ ਨੂੰ ਪੂਰੇ ਵਰਕਫਲੋ ਸਿਨੇਰੀਓ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਦੀ ਮੰਗ ਕਰਦੀ ਹੈ।
+NASA ਦੇ space missions ਲਈ structured approach ਵਰਗਾ, ਇਹ challenge VSCode.dev skills ਨੂੰ ਇੱਕ ਪੂਰੇ workflow scenario ਵਿੱਚ systematic ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕਰਨ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ।
 
-**ਉਦੇਸ਼:** VSCode.dev ਨਾਲ ਪ੍ਰਵਾਨਿਤ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਵਰਕਫਲੋ ਸਥਾਪਿਤ ਕਰਕੇ ਪ੍ਰਵਾਨਿਤਤਾ ਦਿਖਾਓ।
+**Objective:** VSCode.dev ਦੀ proficiency ਨੂੰ ਦਰਸਾਉਣਾ ਇੱਕ comprehensive web development workflow ਸਥਾਪਿਤ ਕਰਕੇ।
 
-**ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਲੋੜਾਂ:** Agent mode ਦੀ ਮਦਦ ਨਾਲ, ਇਹ ਕੰਮ ਪੂਰੇ ਕਰੋ:
-1. ਮੌਜੂਦਾ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਫੋਰਕ ਕਰੋ ਜਾਂ ਨਵਾਂ ਬਣਾਓ
-2. HTML, CSS, ਅਤੇ JavaScript ਫਾਈਲਾਂ ਨਾਲ ਇੱਕ ਕਾਰਗਰ ਪ੍ਰੋਜੈਕਟ ਸਟ੍ਰਕਚਰ ਸਥਾਪਿਤ ਕਰੋ
-3. ਤਿੰਨ ਡਿਵੈਲਪਮੈਂਟ-ਵਧਾਉਣ ਵਾਲੇ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਅਤੇ ਕਨਫਿਗਰ ਕਰੋ
-4. ਵਰਜਨ ਕੰਟਰੋਲ ਦਾ ਅਭਿਆਸ ਕਰੋ ਜਿਵੇਂ ਕਿ ਵੇਰਵੇਵਾਲੇ commit messages
-5. ਫੀਚਰ ਬ੍ਰਾਂਚ ਬਣਾਉਣ ਅਤੇ ਸੋਧ ਕਰਨ ਦਾ ਅਭਿਆਸ ਕਰੋ
-6. README.md ਫਾਈਲ ਵਿੱਚ ਪ੍ਰਕਿਰਿਆ ਅਤੇ ਸਿੱਖਣਾਂ ਦਾ ਦਸਤਾਵੇਜ਼ ਬਣਾਓ
+**Project requirements:** Agent mode assistance ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਹ tasks ਪੂਰੇ ਕਰੋ:
+1. ਇੱਕ ਮੌਜੂਦਾ repository ਨੂੰ fork ਕਰੋ ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਓ
+2. HTML, CSS, ਅਤੇ JavaScript files ਨਾਲ ਇੱਕ functional project structure ਸਥਾਪਿਤ ਕਰੋ
+3. ਤਿੰਨ development-enhancing extensions install ਅਤੇ configure ਕਰੋ
+4. Descriptive commit messages ਨਾਲ version control ਦਾ ਅਭਿਆਸ ਕਰੋ
+5. Feature branch creation ਅਤੇ modification ਨਾਲ experiment ਕਰੋ
+6. README.md file ਵਿੱਚ process ਅਤੇ learnings ਨੂੰ document ਕਰੋ
 
-ਇਹ ਅਭਿਆਸ ਸਾਰੇ VSCode.dev ਸੰਕਲਪਾਂ ਨੂੰ ਇੱਕ ਵਿਹਾਰਕ ਵਰਕਫਲੋ ਵਿੱਚ ਇਕੱਠਾ ਕਰਦਾ ਹੈ ਜੋ ਭਵਿੱਖ ਦੇ ਡਿਵੈਲਪਮੈਂਟ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
+ਇਹ exercise ਸਾਰੇ VSCode.dev concepts ਨੂੰ ਇੱਕ practical workflow ਵਿੱਚ consolidate ਕਰਦਾ ਹੈ ਜੋ ਭਵਿੱਖ ਦੇ development projects 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
+Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here.
 
-## ਅਸਾਈਨਮੈਂਟ
+## Assignment
 
-ਹੁਣ ਇਹ ਹੁਨਰਾਂ ਨੂੰ ਅਸਲ ਵਿੱਚ ਅਜ਼ਮਾਉਣ ਦਾ ਸਮਾਂ ਹੈ! ਮੇਰੇ ਕੋਲ ਇੱਕ ਹੈਂਡਸ-ਆਨ ਪ੍ਰੋਜੈਕਟ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸਿਖਾਈ ਗਈਆਂ ਸਾਰੀਆਂ ਚੀਜ਼ਾਂ ਦਾ ਅਭਿਆਸ ਕਰਨ ਦੇਵੇਗਾ: [VSCode.dev ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਰਿਜ਼ੂਮ ਵੈੱਬਸਾਈਟ ਬਣਾਓ](./assignment.md)
+ਇਹ skills ਨੂੰ ਇੱਕ ਹਕੀਕਤੀ test drive ਲਈ ਲੈਣ ਦਾ ਸਮਾਂ! ਮੇਰੇ ਕੋਲ ਇੱਕ hands-on project ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਸਿੱਖੇ ਗਏ ਸਭ ਕੁਝ ਅਭਿਆਸ ਕਰਨ ਦੇਵੇਗਾ: [Create a resume website using VSCode.dev](./assignment.md)
 
-ਇਹ ਅਸਾਈਨਮੈਂਟ ਤੁਹਾਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇੱਕ ਪੇਸ਼ੇਵਰ ਰਿਜ਼ੂਮ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣ ਦਾ ਰਾਹ ਦਿਖਾਉਂਦੀ ਹੈ। ਤੁਸੀਂ ਜਿਹੜੀਆਂ ਵੀ VSCode.dev ਫੀਚਰਾਂ ਦੀ ਖੋਜ ਕੀਤੀ ਹੈ, ਉਹ ਸਾਰੀਆਂ ਵਰਤੋਂ ਵਿੱਚ ਲਿਆਉਗੇ, ਅਤੇ ਅੰਤ ਤੱਕ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਸ਼ਾਨਦਾਰ ਦਿਖਾਈ ਦੇਣ ਵਾਲੀ ਵੈੱਬਸਾਈਟ ਅਤੇ ਆਪਣੇ ਨਵੇਂ ਵਰਕਫਲੋ ਵਿੱਚ ਪੱਕਾ ਵਿਸ਼ਵਾਸ ਹੋਵੇਗਾ।
+ਇਹ assignment ਤੁਹਾਨੂੰ browser ਵਿੱਚ entirely ਇੱਕ professional resume website ਬਣਾਉਣ ਵਿੱਚ ਗਾਈਡ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਸਾਰੇ VSCode.dev features ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ ਜੋ ਅਸੀਂ ਖੋਜ ਕੀਤੇ ਹਨ, ਅਤੇ ਅੰਤ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਵਧੀਆ-looking website ਅਤੇ ਤੁਹਾਡੇ ਨਵੇਂ workflow ਵਿੱਚ ਪੱਕਾ ਵਿਸ਼ਵਾਸ ਹੋਵੇਗਾ।
 
-## ਹੋਰ ਖੋਜ ਕਰੋ ਅਤੇ ਆਪਣੇ ਹੁਨਰਾਂ ਨੂੰ ਵਧਾਓ
+## Keep Exploring and Growing Your Skills
 
-ਤੁਹਾਡੇ ਕੋਲ ਹੁਣ ਇੱਕ ਮਜ਼ਬੂਤ ਬੁਨਿਆਦ ਹੈ, ਪਰ ਖੋਜ ਕਰਨ ਲਈ ਹੋਰ ਬਹੁਤ ਕੁਝ ਸ਼ਾਨਦਾਰ ਚੀਜ਼ਾਂ ਹਨ! ਇੱਥੇ ਕੁਝ ਸਰੋਤ ਅਤੇ ਵਿਚਾਰ ਹਨ ਜੋ ਤੁਹਾਡੇ VSCode.dev ਹੁਨਰਾਂ ਨੂੰ ਅਗਲੇ ਪੱਧਰ 'ਤੇ ਲੈ ਜਾਣ ਲਈ ਹਨ:
+ਤੁਹਾਡੇ ਕੋਲ ਹੁਣ ਇੱਕ ਮਜ਼ਬੂਤ ​​ਅਧਾਰ ਹੈ, ਪਰ ਖੋਜ ਕਰਨ ਲਈ ਬਹੁਤ ਕੁਝ ਹੋਰ ਮਜ਼ੇਦਾਰ ਚੀਜ਼ਾਂ ਹਨ! ਇੱਥੇ ਕੁਝ resources ਅਤੇ ideas ਹਨ ਜੋ ਤੁਹਾਡੇ VSCode.dev skills ਨੂੰ ਅਗਲੇ ਪੱਧਰ 'ਤੇ ਲੈ ਜਾਣ ਲਈ ਹਨ:
 
-**ਬੁੱਕਮਾਰਕ ਕਰਨ ਲਈ ਅਧਿਕਾਰਤ ਦਸਤਾਵੇਜ਼:**
-- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਿਤ ਐਡੀਟਿੰਗ ਲਈ ਪੂਰੀ ਗਾਈਡ
-- [GitHub Codespaces](https://docs.github.com/en/codespaces) – ਜਦੋਂ ਤੁਸੀਂ ਕਲਾਉਡ ਵਿੱਚ ਹੋਰ ਸ਼ਕਤੀ ਚਾਹੁੰਦੇ ਹੋ
+**Official docs worth bookmarking:**
+- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – Browser-based editing ਲਈ complete guide
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) – ਜਦੋਂ ਤੁਸੀਂ cloud ਵਿੱਚ ਹੋਰ power ਚਾਹੁੰਦੇ ਹੋ
 
-**ਅਗਲੇ ਅਨੁਭਵ ਕਰਨ ਲਈ ਸ਼ਾਨਦਾਰ ਫੀਚਰ:**
-- **Keyboard Shortcuts**: ਉਹ ਕੁੰਜੀਆਂ ਦੇ ਕੌਂਬੋ ਸਿੱਖੋ ਜੋ ਤੁਹਾਨੂੰ ਕੋਡਿੰਗ ਨਿੰਜਾ ਮਹਿਸੂਸ ਕਰਵਾਉਣਗੇ
-- **Workspace Settings**: ਵੱਖ-ਵੱਖ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣ ਸੈਟਅਪ ਕਰੋ
-- **Multi-root Workspaces**: ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਕਈ ਰਿਪੋਜ਼ਟਰੀ 'ਤੇ ਕੰਮ ਕਰੋ (ਬਹੁਤ ਹੀ ਸਹਾਇਕ!)
-- **Terminal Integration**: ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਕਮਾਂਡ-ਲਾਈਨ ਟੂਲਾਂ ਤੱਕ ਪਹੁੰਚ ਕਰੋ
+**Cool features to experiment with next:**
+- **Keyboard Shortcuts**: ਉਹ key combos ਸਿੱਖੋ ਜੋ ਤੁਹਾਨੂੰ coding ninja ਮਹਿਸੂਸ ਕਰਵਾਉਣਗੇ
+- **Workspace Settings**: ਵੱਖ-ਵੱਖ projects ਲਈ ਵੱਖ-ਵੱਖ environments ਸੈਟ ਕਰੋ
+- **Multi-root Workspaces**: ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਕਈ repositories 'ਤੇ ਕੰਮ ਕਰੋ (ਬਹੁਤ ਹੀ ਸਹਾਇਕ!)
+- **Terminal Integration**: Command-line tools ਨੂੰ ਸਿੱਧੇ ਆਪਣੇ browser ਵਿੱਚ access ਕਰੋ
 
-**ਅਭਿਆਸ ਕਰਨ ਲਈ ਵਿਚਾਰ:**
-- ਕੁਝ ਓਪਨ-ਸੋਰਸ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ ਅਤੇ VSCode.dev ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਯੋਗਦਾਨ ਪਾਉ – ਇਹ ਵਾਪਸ ਦੇਣ ਦਾ ਇੱਕ ਸ਼ਾਨਦਾਰ ਤਰੀਕਾ ਹੈ!
-- ਵੱਖ-ਵੱਖ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਤਾਂ ਜੋ ਆਪਣਾ ਪਸੰਦੀਦਾ ਸੈਟਅਪ ਲੱਭ ਸਕੋ
-- ਉਹ ਪ੍ਰੋਜੈਕਟ ਟੈਂਪਲੇਟ ਬਣਾਓ ਜੋ ਤੁਸੀਂ ਸਭ ਤੋਂ ਵੱਧ ਬਣਾਉਂਦੇ ਹੋ
-- Git ਵਰਕਫਲੋ ਜਿਵੇਂ ਬ੍ਰਾਂਚਿੰਗ ਅਤੇ ਮਰਜਿੰਗ ਦਾ ਅਭਿਆਸ ਕਰੋ – ਇਹ ਹੁਨਰ ਟੀਮ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਸੋਨੇ ਵਰਗੇ ਹਨ
+**Ideas for practicing:**
+- ਕੁਝ open-source projects ਵਿੱਚ jump ਕਰੋ ਅਤੇ VSCode.dev ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਯੋਗਦਾਨ ਦਿਓ – ਇਹ ਵਾਪਸ ਦੇਣ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ!
+- ਵੱਖ-ਵੱਖ extensions ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਆਪਣਾ perfect setup ਲੱਭਣ ਲਈ
+- ਉਹ project templates ਬਣਾਓ ਜੋ ਤੁਸੀਂ ਜ਼ਿਆਦਾਤਰ build ਕਰਦੇ ਹੋ
+- Git workflows ਜਿਵੇਂ branching ਅਤੇ merging ਦਾ ਅਭਿਆਸ ਕਰੋ – ਇਹ skills team projects ਵਿੱਚ ਸੋਨੇ ਵਰਗੀਆਂ ਹਨ
 
 ---
 
-**ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਿਤ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਮਾਹਰ ਹੋ ਗਏ ਹੋ!** 🎉 ਜਿਵੇਂ ਪੋਰਟੇਬਲ ਸੰਦਾਂ ਦੀ ਖੋਜ ਨੇ ਵਿਗਿਆਨੀਆਂ ਨੂੰ ਦੂਰ-ਦਰਾਜ ਸਥਾਨਾਂ ਵਿੱਚ ਖੋਜ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੱਤੀ, VSCode.dev ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਇੰਟਰਨੈਟ-ਜੁੜੇ ਡਿਵਾਈਸ ਤੋਂ ਪੇਸ਼ੇਵਰ ਕੋਡਿੰਗ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
+**ਤੁਸੀਂ browser-based development 'ਤੇ ਮਾਹਰ ਹੋ ਗਏ ਹੋ!** 🎉 ਜਿਵੇਂ portable instruments ਦੀ ਖੋਜ ਨੇ scientists ਨੂੰ ਦੂਰ-ਦੂਰ ਦੇ ਸਥਾਨਾਂ 'ਤੇ research ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੱਤੀ, VSCode.dev ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ internet-connected device ਤੋਂ professional coding ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
 
-ਇਹ ਹੁਨਰ ਮੌਜੂਦਾ ਉਦਯੋਗ ਅਭਿਆਸਾਂ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ – ਬਹੁਤ ਸਾਰੇ ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰ ਲਚਕਦਾਰਤਾ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਕਲਾਉਡ-ਅਧਾਰਿਤ ਡਿਵੈਲਪਮੈਂਟ ਵਾਤਾਵਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਤੁਸੀਂ ਇੱਕ ਵਰਕਫਲੋ ਸਿੱਖਿਆ ਹੈ ਜੋ ਵਿਅਕਤੀਗਤ ਪ੍ਰੋਜੈਕਟਾਂ ਤੋਂ ਵੱਡੇ ਟੀਮ ਸਹਿਯੋਗਾਂ ਤੱਕ ਵਧਦਾ ਹੈ।
+ਇਹ skills ਮੌਜੂਦਾ industry practices ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ – ਬਹੁਤ ਸਾਰੇ professional developers cloud-based development environments ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਉਹਨਾਂ ਦੀ flexibility ਅਤੇ accessibility ਲਈ। ਤੁਸੀਂ ਇੱਕ workflow ਸਿੱਖਿਆ ਹੈ ਜੋ individual projects ਤੋਂ ਵੱਡੇ team collaborations ਤੱਕ scale ਕਰਦਾ ਹੈ।
 
-ਇਹ ਤਕਨੀਕਾਂ ਆਪਣੇ ਅਗਲੇ ਡਿਵੈਲਪਮੈਂਟ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਲਾਗੂ ਕਰੋ! 🚀
+ਇਹ techniques ਨੂੰ ਆਪਣੇ ਅਗਲੇ development project 'ਤੇ ਲਾਗੂ ਕਰੋ! 🚀
 
 ---
 
 **ਅਸਵੀਕਰਤਾ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/pa/9-chat-project/README.md b/translations/pa/9-chat-project/README.md
index a8d7bbc026..0baaec34b2 100644
--- a/translations/pa/9-chat-project/README.md
+++ b/translations/pa/9-chat-project/README.md
@@ -1,58 +1,133 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46d665af66e51524598af34a42b9b663",
-  "translation_date": "2025-10-22T17:43:50+00:00",
+  "original_hash": "2066c17078e9d18b5e309f31d8e8bc24",
+  "translation_date": "2025-11-03T16:27:29+00:00",
   "source_file": "9-chat-project/README.md",
   "language_code": "pa"
 }
 -->
-# AI ਨਾਲ ਚੈਟ ਅਸਿਸਟੈਂਟ ਬਣਾਓ
+# ਚੈਟ ਅਸਿਸਟੈਂਟ ਬਣਾਓ AI ਨਾਲ
 
-ਸਟਾਰ ਟ੍ਰੈਕ ਵਿੱਚ ਯਾਦ ਹੈ ਜਦੋਂ ਕ੍ਰੂ ਜਹਾਜ਼ ਦੇ ਕੰਪਿਊਟਰ ਨਾਲ ਆਰਾਮਦਾਇਕ ਗੱਲਬਾਤ ਕਰਦੇ ਸਨ, ਉਸ ਨੂੰ ਜਟਿਲ ਸਵਾਲ ਪੁੱਛਦੇ ਸਨ ਅਤੇ ਸੋਚਵਿਚਾਰ ਵਾਲੇ ਜਵਾਬ ਪ੍ਰਾਪਤ ਕਰਦੇ ਸਨ? 1960 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਜੋ ਖਾਲੀ ਵਿਗਿਆਨਕ ਕਲਪਨਾ ਜਾਪਦਾ ਸੀ, ਉਹ ਹੁਣ ਕੁਝ ਐਸਾ ਹੈ ਜੋ ਤੁਸੀਂ ਵੈੱਬ ਤਕਨਾਲੋਜੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋ।
+ਸਟਾਰ ਟ੍ਰੈਕ ਵਿੱਚ ਯਾਦ ਹੈ ਜਦੋਂ ਕ੍ਰੂ ਜਹਾਜ਼ ਦੇ ਕੰਪਿਊਟਰ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਗੱਲਬਾਤ ਕਰਦੇ ਸਨ, ਉਸ ਨੂੰ ਜਟਿਲ ਸਵਾਲ ਪੁੱਛਦੇ ਸਨ ਅਤੇ ਸੋਚਵਿਚਾਰ ਵਾਲੇ ਜਵਾਬ ਲੈਂਦੇ ਸਨ? 1960 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਜੋ ਸਿਰਫ਼ ਵਿਗਿਆਨਕ ਕਲਪਨਾ ਜਾਪਦਾ ਸੀ, ਉਹ ਹੁਣ ਕੁਝ ਹੈ ਜੋ ਤੁਸੀਂ ਵੈੱਬ ਤਕਨਾਲੋਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋ।
 
-ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ HTML, CSS, JavaScript ਅਤੇ ਕੁਝ ਬੈਕਐਂਡ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ AI ਚੈਟ ਅਸਿਸਟੈਂਟ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਸੀਂ ਜਾਣੋਗੇ ਕਿ ਤੁਸੀਂ ਸਿੱਖ ਰਹੇ ਹੋਏ ਉਹੀ ਹੁਨਰ ਸ਼ਕਤੀਸ਼ਾਲੀ AI ਸੇਵਾਵਾਂ ਨਾਲ ਕਿਵੇਂ ਜੁੜ ਸਕਦੇ ਹਨ ਜੋ ਸੰਦਰਭ ਨੂੰ ਸਮਝ ਸਕਦੇ ਹਨ ਅਤੇ ਅਰਥਪੂਰਨ ਜਵਾਬ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ।
+ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ HTML, CSS, JavaScript ਅਤੇ ਕੁਝ ਬੈਕਐਂਡ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ AI ਚੈਟ ਅਸਿਸਟੈਂਟ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਸੀਂ ਜਾਣੋਗੇ ਕਿ ਤੁਸੀਂ ਸਿੱਖ ਰਹੇ ਹੋ ਉਹੀ ਹੁਨਰ ਸ਼ਕਤੀਸ਼ਾਲੀ AI ਸੇਵਾਵਾਂ ਨਾਲ ਕਿਵੇਂ ਜੁੜ ਸਕਦੇ ਹਨ ਜੋ ਸੰਦਰਭ ਨੂੰ ਸਮਝ ਸਕਦੇ ਹਨ ਅਤੇ ਅਰਥਪੂਰਨ ਜਵਾਬ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ।
 
-AI ਨੂੰ ਇੱਕ ਵੱਡੇ ਪੁਸਤਕਾਲ ਵਾਂਗ ਸੋਚੋ ਜੋ ਸਿਰਫ ਜਾਣਕਾਰੀ ਹੀ ਨਹੀਂ ਲੱਭ ਸਕਦਾ, ਸਗੋਂ ਇਸ ਨੂੰ ਤੁਹਾਡੇ ਵਿਸ਼ੇਸ਼ ਸਵਾਲਾਂ ਲਈ ਲਾਗੂ ਜਵਾਬਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਕਰ ਸਕਦਾ ਹੈ। ਹਜ਼ਾਰਾਂ ਪੰਨਿਆਂ ਵਿੱਚ ਖੋਜ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਹਾਨੂੰ ਸਿੱਧੇ, ਸੰਦਰਭਤ ਜਵਾਬ ਮਿਲਦੇ ਹਨ।
+AI ਨੂੰ ਇੱਕ ਵੱਡੇ ਪੁਸਤਕਾਲ ਦੇ ਤੌਰ 'ਤੇ ਸੋਚੋ ਜੋ ਸਿਰਫ਼ ਜਾਣਕਾਰੀ ਨਹੀਂ ਲੱਭ ਸਕਦਾ, ਸਗੋਂ ਇਸ ਨੂੰ ਤੁਹਾਡੇ ਵਿਸ਼ੇਸ਼ ਸਵਾਲਾਂ ਲਈ ਉਚਿਤ ਜਵਾਬਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਕਰ ਸਕਦਾ ਹੈ। ਹਜ਼ਾਰਾਂ ਪੰਨਿਆਂ ਵਿੱਚੋਂ ਖੋਜ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਹਾਨੂੰ ਸਿੱਧੇ, ਸੰਦਰਭਕ ਜਵਾਬ ਮਿਲਦੇ ਹਨ।
 
-ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਜਾਣ-ਪਛਾਣ ਵਾਲੇ ਵੈੱਬ ਤਕਨਾਲੋਜੀ ਦੁਆਰਾ ਹੁੰਦੀ ਹੈ। HTML ਚੈਟ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦਾ ਹੈ, CSS ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ, JavaScript ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਇੱਕ ਬੈਕਐਂਡ API ਸਾਰੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ AI ਸੇਵਾਵਾਂ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ ਇੱਕ ਸਿੰਫਨੀ ਬਣਾਉਣ ਲਈ ਵੱਖ-ਵੱਖ ਸੰਗੀਤਕ ਭਾਗ ਇਕੱਠੇ ਕੰਮ ਕਰਦੇ ਹਨ।
+ਇਹ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਜਾਣ-ਪਛਾਣ ਵਾਲੀਆਂ ਵੈੱਬ ਤਕਨਾਲੋਜੀਆਂ ਦੇ ਸਹਿਯੋਗ ਨਾਲ ਹੁੰਦੀ ਹੈ। HTML ਚੈਟ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦਾ ਹੈ, CSS ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ ਦਾ ਧਿਆਨ ਰੱਖਦਾ ਹੈ, JavaScript ਯੂਜ਼ਰ ਇੰਟਰੈਕਸ਼ਨ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ, ਅਤੇ ਇੱਕ ਬੈਕਐਂਡ API ਸਾਰੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ AI ਸੇਵਾਵਾਂ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਇੱਕ ਆਰਕੈਸਟਰਾ ਦੇ ਵੱਖ-ਵੱਖ ਸੈਕਸ਼ਨ ਇੱਕ ਸਿੰਫਨੀ ਬਣਾਉਣ ਲਈ ਇਕੱਠੇ ਕੰਮ ਕਰਦੇ ਹਨ।
 
-ਅਸੀਂ ਅਸਲ ਵਿੱਚ ਕੁਦਰਤੀ ਮਨੁੱਖੀ ਸੰਚਾਰ ਅਤੇ ਮਸ਼ੀਨ ਪ੍ਰੋਸੈਸਿੰਗ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਪੁਲ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਸੀਂ AI ਸੇਵਾ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦੇ ਤਕਨੀਕੀ ਕਾਰਜਨੁਮਾਂ ਅਤੇ ਡਿਜ਼ਾਈਨ ਪੈਟਰਨ ਸਿੱਖੋਗੇ ਜੋ ਇੰਟਰੈਕਸ਼ਨ ਨੂੰ ਬਹੁਤ ਹੀ ਸਹਜ ਬਣਾਉਂਦੇ ਹਨ।
+ਅਸੀਂ ਅਸਲ ਵਿੱਚ ਕੁਦਰਤੀ ਮਨੁੱਖੀ ਸੰਚਾਰ ਅਤੇ ਮਸ਼ੀਨ ਪ੍ਰੋਸੈਸਿੰਗ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਪੁਲ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਸੀਂ AI ਸੇਵਾ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦੀ ਤਕਨੀਕੀ ਲਾਗੂ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਅਤੇ ਉਹ ਡਿਜ਼ਾਈਨ ਪੈਟਰਨ ਸਿੱਖੋਗੇ ਜੋ ਇੰਟਰੈਕਸ਼ਨ ਨੂੰ ਸੁਵਿਧਾਜਨਕ ਬਣਾਉਂਦੇ ਹਨ।
 
-ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਤੁਹਾਨੂੰ ਇੱਕ ਰਹੱਸਮਈ ਪ੍ਰਕਿਰਿਆ ਵਾਂਗ ਨਹੀਂ ਲੱਗੇਗੀ, ਸਗੋਂ ਇੱਕ ਹੋਰ API ਵਾਂਗ ਲੱਗੇਗੀ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਉਹ ਬੁਨਿਆਦੀ ਪੈਟਰਨ ਸਮਝੋਗੇ ਜੋ ChatGPT ਅਤੇ Claude ਵਰਗੇ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਸ਼ਕਤੀਸ਼ਾਲੀ ਬਣਾਉਂਦੇ ਹਨ, ਉਹੀ ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਸਿਧਾਂਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਜੋ ਤੁਸੀਂ ਸਿੱਖ ਰਹੇ ਹੋ।
+ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਤੁਹਾਨੂੰ ਇੱਕ ਰਹੱਸਮਈ ਪ੍ਰਕਿਰਿਆ ਵਜੋਂ ਨਹੀਂ, ਸਗੋਂ ਇੱਕ ਹੋਰ API ਵਜੋਂ ਮਹਿਸੂਸ ਹੋਵੇਗੀ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਉਹ ਬੁਨਿਆਦੀ ਪੈਟਰਨ ਸਮਝੋਗੇ ਜੋ ChatGPT ਅਤੇ Claude ਵਰਗੇ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਸ਼ਕਤੀ ਦੇਣ ਵਾਲੇ ਹਨ, ਉਹੀ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਸਿਧਾਂਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਜੋ ਤੁਸੀਂ ਸਿੱਖ ਰਹੇ ਹੋ।
 
-ਇਹ ਹੈ ਕਿ ਤੁਹਾਡਾ ਤਿਆਰ ਪ੍ਰੋਜੈਕਟ ਕਿਵੇਂ ਲੱਗੇਗਾ:
+## ⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ
 
-![ਚੈਟ ਐਪ ਇੰਟਰਫੇਸ ਜੋ ਉਪਭੋਗਤਾ ਅਤੇ AI ਅਸਿਸਟੈਂਟ ਦੇ ਵਿਚਕਾਰ ਗੱਲਬਾਤ ਦਿਖਾਉਂਦਾ ਹੈ](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pa.png)
+**ਵਿਆਸਤ ਡਿਵੈਲਪਰਾਂ ਲਈ ਤੇਜ਼ ਸ਼ੁਰੂਆਤ ਦਾ ਰਸਤਾ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Get GitHub token]
+    B --> C[Test AI playground]
+    C --> D[Copy Python code]
+    D --> E[See AI responses]
+```
+
+- **ਮਿੰਟ 1**: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) 'ਤੇ ਜਾਓ ਅਤੇ ਇੱਕ ਪੈਰਸਨਲ ਐਕਸੈਸ ਟੋਕਨ ਬਣਾਓ
+- **ਮਿੰਟ 2**: ਪਲੇਗਰਾਊਂਡ ਇੰਟਰਫੇਸ ਵਿੱਚ ਸਿੱਧੇ AI ਇੰਟਰੈਕਸ਼ਨ ਟੈਸਟ ਕਰੋ
+- **ਮਿੰਟ 3**: "Code" ਟੈਬ 'ਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ Python ਸਨਿਪਟ ਕਾਪੀ ਕਰੋ
+- **ਮਿੰਟ 4**: ਆਪਣੇ ਟੋਕਨ ਨਾਲ ਕੋਡ ਨੂੰ ਲੋਕਲ ਰਨ ਕਰੋ: `GITHUB_TOKEN=your_token python test.py`
+- **ਮਿੰਟ 5**: ਆਪਣੇ ਕੋਡ ਤੋਂ ਪਹਿਲਾ AI ਜਵਾਬ ਪੈਦਾ ਹੁੰਦਾ ਦੇਖੋ
+
+**ਤੁਰੰਤ ਟੈਸਟ ਕੋਡ**:
+```python
+import os
+from openai import OpenAI
+
+client = OpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key="your_token_here"
+)
+
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Hello AI!"}],
+    model="openai/gpt-4o-mini"
+)
+
+print(response.choices[0].message.content)
+```
+
+**ਇਸਦਾ ਮਹੱਤਵ ਕਿਉਂ ਹੈ**: 5 ਮਿੰਟਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਪ੍ਰੋਗਰਾਮੈਟਿਕ AI ਇੰਟਰੈਕਸ਼ਨ ਦਾ ਜਾਦੂ ਅਨੁਭਵ ਕਰੋਗੇ। ਇਹ ਉਹ ਬੁਨਿਆਦੀ ਇਮਾਰਤ ਹੈ ਜੋ ਹਰ AI ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਸ਼ਕਤੀ ਦੇਣ ਵਾਲੀ ਹੈ ਜੋ ਤੁਸੀਂ ਵਰਤਦੇ ਹੋ।
+
+ਤੁਹਾਡਾ ਤਿਆਰ ਪ੍ਰੋਜੈਕਟ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਾਈ ਦੇਵੇਗਾ:
+
+![ਚੈਟ ਐਪ ਇੰਟਰਫੇਸ ਜੋ ਯੂਜ਼ਰ ਅਤੇ AI ਅਸਿਸਟੈਂਟ ਦੇ ਵਿਚਕਾਰ ਗੱਲਬਾਤ ਦਿਖਾਉਂਦਾ ਹੈ](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pa.png)
+
+## 🗺️ AI ਐਪਲੀਕੇਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਦੁਆਰਾ ਤੁਹਾਡਾ ਸਿੱਖਣ ਦਾ ਸਫਰ
+
+```mermaid
+journey
+    title From Web Development to AI Integration
+    section Understanding AI Foundations
+      Discover generative AI concepts: 4: You
+      Explore GitHub Models platform: 6: You
+      Master AI parameters and prompts: 8: You
+    section Backend Integration
+      Build Python API server: 5: You
+      Implement AI function calls: 7: You
+      Handle async operations: 8: You
+    section Frontend Development
+      Create modern chat interface: 6: You
+      Master real-time interactions: 8: You
+      Build responsive user experience: 9: You
+    section Professional Application
+      Deploy complete AI system: 7: You
+      Optimize performance patterns: 8: You
+      Create production-ready app: 9: You
+```
+
+**ਤੁਹਾਡਾ ਸਫਰ ਦਾ ਮੰਜ਼ਿਲ**: ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਇੱਕ ਪੂਰੀ AI-ਸ਼ਕਤੀ ਵਾਲੀ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਈ ਹੋਵੇਗੀ ਜੋ ਉਹੀ ਤਕਨਾਲੋਜੀਆਂ ਅਤੇ ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ ਜੋ ਆਧੁਨਿਕ AI ਅਸਿਸਟੈਂਟਾਂ ਨੂੰ ਸ਼ਕਤੀ ਦੇਣ ਵਾਲੇ ਹਨ ਜਿਵੇਂ ChatGPT, Claude, ਅਤੇ Google Bard।
 
 ## AI ਨੂੰ ਸਮਝਣਾ: ਰਹੱਸ ਤੋਂ ਮਾਹਰਤਾ ਤੱਕ
 
-ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਸਮਝੀਏ ਕਿ ਅਸੀਂ ਕਿਸ ਨਾਲ ਕੰਮ ਕਰ ਰਹੇ ਹਾਂ। ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ API ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਬੁਨਿਆਦੀ ਪੈਟਰਨ ਜਾਣਦੇ ਹੋ: ਇੱਕ ਬੇਨਤੀ ਭੇਜੋ, ਇੱਕ ਜਵਾਬ ਪ੍ਰਾਪਤ ਕਰੋ।
+ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਸਮਝੀਏ ਕਿ ਅਸੀਂ ਕੀ ਕਰ ਰਹੇ ਹਾਂ। ਜੇ ਤੁਸੀਂ APIs ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਬੁਨਿਆਦੀ ਪੈਟਰਨ ਪਤਾ ਹੋਵੇਗਾ: ਇੱਕ ਬੇਨਤੀ ਭੇਜੋ, ਇੱਕ ਜਵਾਬ ਪ੍ਰਾਪਤ ਕਰੋ।
+
+AI APIs ਇੱਕ ਸਮਾਨ ਢਾਂਚੇ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ, ਪਰ ਡਾਟਾਬੇਸ ਤੋਂ ਪਹਿਲਾਂ ਤੋਂ ਸਟੋਰ ਕੀਤੇ ਡਾਟਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਬਜਾਏ, ਉਹ ਨਵੇਂ ਜਵਾਬ ਪੈਦਾ ਕਰਦੇ ਹਨ ਜੋ ਵੱਡੇ ਪੱਧਰ ਦੇ ਟੈਕਸਟ ਤੋਂ ਸਿੱਖੇ ਗਏ ਪੈਟਰਨਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਹੁੰਦੇ ਹਨ। ਇਸਨੂੰ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਕੈਟਾਲੌਗ ਸਿਸਟਮ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰ ਲਾਇਬ੍ਰੇਰੀਅਨ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਵਾਂਗ ਸੋਚੋ ਜੋ ਕਈ ਸਰੋਤਾਂ ਤੋਂ ਜਾਣਕਾਰੀ ਨੂੰ ਸਮਰਥਿਤ ਕਰ ਸਕਦਾ ਹੈ।
 
-AI APIs ਇੱਕ ਸਮਾਨ ਢਾਂਚੇ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ, ਪਰ ਡਾਟਾਬੇਸ ਤੋਂ ਪਹਿਲਾਂ ਤੋਂ ਸਟੋਰ ਕੀਤੇ ਡਾਟਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਬਜਾਏ, ਉਹ ਵੱਡੇ ਪੱਧਰ ਦੇ ਟੈਕਸਟ ਤੋਂ ਸਿੱਖੇ ਪੈਟਰਨਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਨਵੇਂ ਜਵਾਬ ਪੈਦਾ ਕਰਦੇ ਹਨ। ਇਸ ਨੂੰ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਜਿਵੇਂ ਕਿ ਇੱਕ ਪੁਸਤਕਾਲ ਸੂਚੀ ਪ੍ਰਣਾਲੀ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਵਾਲੇ ਲਾਇਬ੍ਰੇਰੀਅਨ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਹੈ ਜੋ ਕਈ ਸਰੋਤਾਂ ਤੋਂ ਜਾਣਕਾਰੀ ਨੂੰ ਸਮਰਥਿਤ ਕਰ ਸਕਦਾ ਹੈ।
+### "Generative AI" ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ?
 
-### "ਜਨਰੇਟਿਵ AI" ਅਸਲ ਵਿੱਚ ਕੀ ਹੈ?
+ਸੋਚੋ ਕਿ ਰੋਸੇਟਾ ਸਟੋਨ ਨੇ ਮਿਸਰੀ ਹਾਇਰੋਗਲਿਫਿਕਸ ਨੂੰ ਸਮਝਣ ਲਈ ਪੈਟਰਨ ਲੱਭਣ ਵਿੱਚ ਵਿਦਵਾਨਾਂ ਦੀ ਮਦਦ ਕੀਤੀ, AI ਮਾਡਲ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ – ਉਹ ਵੱਡੇ ਪੱਧਰ ਦੇ ਟੈਕਸਟ ਵਿੱਚ ਪੈਟਰਨ ਲੱਭਦੇ ਹਨ ਕਿ ਭਾਸ਼ਾ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ, ਫਿਰ ਉਹ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਨਵੇਂ ਸਵਾਲਾਂ ਦੇ ਉਚਿਤ ਜਵਾਬ ਪੈਦਾ ਕਰਨ ਲਈ।
 
-ਸੋਚੋ ਕਿ ਰੋਸੇਟਾ ਸਟੋਨ ਨੇ ਵਿਦਵਾਨਾਂ ਨੂੰ ਮਿਸਰੀ ਹਾਇਰੋਗਲਿਫਿਕਸ ਨੂੰ ਸਮਝਣ ਦੀ ਆਗਿਆ ਦਿੱਤੀ ਸੀ, ਜਾਣੇ-ਅਣਜਾਣ ਭਾਸ਼ਾਵਾਂ ਦੇ ਵਿਚਕਾਰ ਪੈਟਰਨ ਲੱਭ ਕੇ। AI ਮਾਡਲ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ – ਉਹ ਵੱਡੇ ਪੱਧਰ ਦੇ ਟੈਕਸਟ ਵਿੱਚ ਪੈਟਰਨ ਲੱਭਦੇ ਹਨ ਕਿ ਭਾਸ਼ਾ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ, ਫਿਰ ਉਹ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਵੇਂ ਸਵਾਲਾਂ ਲਈ ਉਚਿਤ ਜਵਾਬ ਪੈਦਾ ਕਰਦੇ ਹਨ।
+**ਇਸਨੂੰ ਇੱਕ ਸਧਾਰਨ ਤੁਲਨਾ ਨਾਲ ਸਮਝਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹਾਂ:**
+- **ਪ੍ਰੰਪਰਾਗਤ ਡਾਟਾਬੇਸ**: ਜਿਵੇਂ ਤੁਹਾਡਾ ਜਨਮ ਸਰਟੀਫਿਕੇਟ ਮੰਗਣਾ – ਤੁਹਾਨੂੰ ਹਰ ਵਾਰ ਉਹੀ ਦਸਤਾਵੇਜ਼ ਮਿਲਦਾ ਹੈ
+- **ਸਰਚ ਇੰਜਨ**: ਜਿਵੇਂ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀਅਨ ਨੂੰ ਬਿੱਲੀਆਂ ਬਾਰੇ ਕਿਤਾਬਾਂ ਲੱਭਣ ਲਈ ਕਹਿਣਾ – ਉਹ ਤੁਹਾਨੂੰ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਕੀ ਉਪਲਬਧ ਹੈ
+- **Generative AI**: ਜਿਵੇਂ ਇੱਕ ਜਾਣਕਾਰ ਦੋਸਤ ਨੂੰ ਬਿੱਲੀਆਂ ਬਾਰੇ ਪੁੱਛਣਾ – ਉਹ ਤੁਹਾਨੂੰ ਦਿਲਚਸਪ ਚੀਜ਼ਾਂ ਆਪਣੇ ਸ਼ਬਦਾਂ ਵਿੱਚ ਦੱਸਦੇ ਹਨ, ਜੋ ਤੁਹਾਡੇ ਜਾਣਨ ਦੀ ਇੱਛਾ ਦੇ ਅਨੁਕੂਲ ਹੁੰਦੇ ਹਨ
 
-**ਇਸ ਨੂੰ ਇੱਕ ਸਧਾਰਨ ਤੁਲਨਾ ਨਾਲ ਸਮਝਾਉਣ ਦਿਓ:**
-- **ਪ੍ਰੰਪਰਾਗਤ ਡਾਟਾਬੇਸ**: ਜਿਵੇਂ ਕਿ ਆਪਣਾ ਜਨਮ ਸਰਟੀਫਿਕੇਟ ਮੰਗਣਾ – ਤੁਹਾਨੂੰ ਹਰ ਵਾਰ ਉਹੀ ਦਸਤਾਵੇਜ਼ ਮਿਲਦਾ ਹੈ
-- **ਸਰਚ ਇੰਜਨ**: ਜਿਵੇਂ ਕਿ ਲਾਇਬ੍ਰੇਰੀਅਨ ਨੂੰ ਬਿੱਲੀਆਂ ਬਾਰੇ ਕਿਤਾਬਾਂ ਲੱਭਣ ਲਈ ਕਹਿਣਾ – ਉਹ ਤੁਹਾਨੂੰ ਦੱਸਦੇ ਹਨ ਕਿ ਕੀ ਉਪਲਬਧ ਹੈ
-- **ਜਨਰੇਟਿਵ AI**: ਜਿਵੇਂ ਕਿ ਇੱਕ ਜਾਣਕਾਰੀ ਵਾਲੇ ਦੋਸਤ ਨੂੰ ਬਿੱਲੀਆਂ ਬਾਰੇ ਪੁੱਛਣਾ – ਉਹ ਤੁਹਾਨੂੰ ਦੱਸਦੇ ਹਨ ਕਿ ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ
+```mermaid
+graph LR
+    A[Your Question] --> B[AI Model]
+    B --> C[Pattern Recognition]
+    C --> D[Content Generation]
+    D --> E[Contextual Response]
+    
+    F[Training Data<br/>Books, Articles, Web] --> B
+```
 
 ### AI ਮਾਡਲ ਕਿਵੇਂ ਸਿੱਖਦੇ ਹਨ (ਸਧਾਰਨ ਵਰਜਨ)
 
 AI ਮਾਡਲ ਵੱਡੇ ਪੱਧਰ ਦੇ ਡਾਟਾਸੈਟਾਂ ਦੇ ਸੰਪਰਕ ਦੁਆਰਾ ਸਿੱਖਦੇ ਹਨ ਜੋ ਕਿਤਾਬਾਂ, ਲੇਖਾਂ ਅਤੇ ਗੱਲਬਾਤਾਂ ਵਿੱਚ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ। ਇਸ ਪ੍ਰਕਿਰਿਆ ਦੁਆਰਾ, ਉਹ ਪੈਟਰਨਾਂ ਦੀ ਪਛਾਣ ਕਰਦੇ ਹਨ:
-- ਲਿਖਤੀ ਸੰਚਾਰ ਵਿੱਚ ਵਿਚਾਰ ਕਿਵੇਂ ਬਣਦੇ ਹਨ
+- ਲਿਖਤ ਸੰਚਾਰ ਵਿੱਚ ਵਿਚਾਰ ਕਿਵੇਂ ਬਣਦੇ ਹਨ
 - ਕਿਹੜੇ ਸ਼ਬਦ ਆਮ ਤੌਰ 'ਤੇ ਇਕੱਠੇ ਆਉਂਦੇ ਹਨ
-- ਗੱਲਬਾਤਾਂ ਆਮ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਚੱਲਦੀਆਂ ਹਨ
-- ਆਧਿਕਾਰਿਕ ਅਤੇ ਅਨੌਪਚਾਰਿਕ ਸੰਚਾਰ ਦੇ ਵਿਚਕਾਰ ਸੰਦਰਭਤ ਅੰਤਰ
+- ਗੱਲਬਾਤਾਂ ਆਮ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਵਗਦੀਆਂ ਹਨ
+- ਅਧਿਕਾਰਕ ਅਤੇ ਅਨੌਪਚਾਰਿਕ ਸੰਚਾਰ ਦੇ ਵਿਚਕਾਰ ਸੰਦਰਭਕ ਅੰਤਰ
 
-**ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ ਪੁਰਾਤੱਤਵ ਵਿਦਵਾਨ ਪ੍ਰਾਚੀਨ ਭਾਸ਼ਾਵਾਂ ਨੂੰ ਡਿਕੋਡ ਕਰਦੇ ਹਨ**: ਉਹ ਵਿਆਖਿਆ, ਸ਼ਬਦਾਵਲੀ ਅਤੇ ਸੱਭਿਆਚਾਰਕ ਸੰਦਰਭ ਨੂੰ ਸਮਝਣ ਲਈ ਹਜ਼ਾਰਾਂ ਉਦਾਹਰਣਾਂ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਦੇ ਹਨ, ਆਖਿਰਕਾਰ ਉਹ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਵੇਂ ਟੈਕਸਟਾਂ ਦੀ ਵਿਆਖਿਆ ਕਰਨ ਦੇ ਯੋਗ ਬਣ ਜਾਂਦੇ ਹਨ।
+**ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਪੁਰਾਤੱਤਵ ਵਿਦਾਂਤੀਆਂ ਪ੍ਰਾਚੀਨ ਭਾਸ਼ਾਵਾਂ ਨੂੰ ਡਿਕੋਡ ਕਰਦੇ ਹਨ**: ਉਹ ਹਜ਼ਾਰਾਂ ਉਦਾਹਰਣਾਂ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਵਿਆਕਰਨ, ਸ਼ਬਦਾਵਲੀ ਅਤੇ ਸੱਭਿਆਚਾਰਕ ਸੰਦਰਭ ਨੂੰ ਸਮਝ ਸਕਣ, ਆਖਰਕਾਰ ਉਹ ਸਿੱਖੇ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਵੇਂ ਟੈਕਸਟਾਂ ਦੀ ਵਿਆਖਿਆ ਕਰਨ ਦੇ ਯੋਗ ਹੋ ਜਾਂਦੇ ਹਨ।
 
-### ਕਿਉਂ GitHub ਮਾਡਲ?
+### GitHub ਮਾਡਲ ਕਿਉਂ?
 
-ਅਸੀਂ GitHub ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ ਕਿਉਂਕਿ ਇਹ ਸਾਨੂੰ ਆਪਣਾ AI ਢਾਂਚਾ ਸੈਟਅੱਪ ਕਰਨ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਐਂਟਰਪ੍ਰਾਈਜ਼-ਪੱਧਰ ਦੇ AI ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ (ਜੋ, ਮੈਨੂੰ ਯਕੀਨ ਕਰੋ, ਤੁਸੀਂ ਇਸ ਸਮੇਂ ਨਹੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ!)। ਇਹ ਅਸਲ ਵਿੱਚ "AI-ਐਜ਼-ਏ-ਸਰਵਿਸ" ਹੈ, ਅਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਗੱਲ ਕੀ ਹੈ? ਇਹ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਮੁਫ਼ਤ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਵੱਡੇ ਬਿੱਲ ਦੀ ਚਿੰਤਾ ਕੀਤੇ ਬਿਨਾਂ ਪ੍ਰਯੋਗ ਕਰ ਸਕਦੇ ਹੋ।
+ਅਸੀਂ GitHub ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ ਇੱਕ ਕਾਫ਼ੀ ਵਿਆਹਕ ਕਾਰਨ ਲਈ – ਇਹ ਸਾਨੂੰ ਆਪਣਾ AI ਢਾਂਚਾ ਸੈਟਅਪ ਕਰਨ ਦੀ ਲੋੜ ਬਿਨਾਂ ਐਂਟਰਪ੍ਰਾਈਜ਼-ਪੱਧਰ ਦੇ AI ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ (ਜੋ, ਮੈਨੂੰ ਵਿਸ਼ਵਾਸ ਕਰੋ, ਤੁਸੀਂ ਇਸ ਸਮੇਂ ਨਹੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ!). ਇਸਨੂੰ ਮੌਸਮ API ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਂਗ ਸੋਚੋ ਬਜਾਏ ਕਿ ਹਰ ਜਗ੍ਹਾ ਮੌਸਮ ਸਟੇਸ਼ਨ ਸੈਟਅਪ ਕਰਕੇ ਮੌਸਮ ਦੀ ਪੇਸ਼ਗੂਈ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨਾ।
+
+ਇਹ ਅਸਲ ਵਿੱਚ "AI-as-a-Service" ਹੈ, ਅਤੇ ਸਭ ਤੋਂ ਵਧੀਆ ਗੱਲ? ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ ਇਹ ਮੁਫ਼ਤ ਹੈ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਵੱਡੇ ਬਿੱਲ ਦੀ ਚਿੰਤਾ ਕੀਤੇ ਬਿਨਾਂ ਪ੍ਰਯੋਗ ਕਰ ਸਕੋ।
 
 ```mermaid
 graph LR
@@ -64,27 +139,80 @@ graph LR
     B --> A
 ```
 
-ਅਸੀਂ GitHub ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਆਪਣੇ ਬੈਕਐਂਡ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਲਈ, ਜੋ ਕਿ ਡਿਵੈਲਪਰ-ਫ੍ਰੈਂਡਲੀ ਇੰਟਰਫੇਸ ਦੁਆਰਾ ਪੇਸ਼ੇਵਰ-ਗ੍ਰੇਡ AI ਸਮਰੱਥਾਵਾਂ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। [GitHub ਮਾਡਲ ਪਲੇਗਰਾਊਂਡ](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ਇੱਕ ਟੈਸਟਿੰਗ ਵਾਤਾਵਰਣ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਕੋਡ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਉਨ੍ਹਾਂ ਦੀਆਂ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਸਮਝ ਸਕਦੇ ਹੋ।
+ਅਸੀਂ ਆਪਣੇ ਬੈਕਐਂਡ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਲਈ GitHub ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ, ਜੋ ਡਿਵੈਲਪਰ-ਫ੍ਰੈਂਡਲੀ ਇੰਟਰਫੇਸ ਦੁਆਰਾ ਪੇਸ਼ੇਵਰ-ਗੁਣਵੱਤਾ ਵਾਲੇ AI ਸਮਰੱਥਾ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ਇੱਕ ਟੈਸਟਿੰਗ ਵਾਤਾਵਰਣ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਉਹਨਾਂ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਕੋਡ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਸਮਝ ਸਕਦੇ ਹੋ।
+
+## 🧠 AI ਐਪਲੀਕੇਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਇਕੋਸਿਸਟਮ
+
+```mermaid
+mindmap
+  root((AI Development))
+    Understanding AI
+      Generative Models
+        Pattern Recognition
+        Content Generation
+        Context Understanding
+        Response Synthesis
+      AI Parameters
+        Temperature Control
+        Token Limits
+        Top-p Filtering
+        System Prompts
+    Backend Architecture
+      API Integration
+        GitHub Models
+        Authentication
+        Request Handling
+        Error Management
+      Python Infrastructure
+        FastAPI Framework
+        Async Operations
+        Environment Security
+        CORS Configuration
+    Frontend Experience
+      Chat Interface
+        Real-time Updates
+        Message History
+        User Feedback
+        Loading States
+      Modern Web Tech
+        ES6 Classes
+        Async/Await
+        DOM Manipulation
+        Event Handling
+    Professional Patterns
+      Security Best Practices
+        Token Management
+        Input Validation
+        XSS Prevention
+        Error Boundaries
+      Production Readiness
+        Performance Optimization
+        Responsive Design
+        Accessibility
+        Testing Strategies
+```
+
+**ਮੁੱਖ ਸਿਧਾਂਤ**: AI ਐਪਲੀਕੇਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਰਵਾਇਤੀ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਹੁਨਰਾਂ ਨੂੰ AI ਸੇਵਾ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਨਾਲ ਜੋੜਦਾ ਹੈ, ਬੁੱਧੀਮਾਨ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਯੂਜ਼ਰਾਂ ਲਈ ਕੁਦਰਤੀ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ।
 
-![GitHub ਮਾਡਲ AI ਪਲੇਗਰਾਊਂਡ ਇੰਟਰਫੇਸ ਮਾਡਲ ਚੋਣ ਅਤੇ ਟੈਸਟਿੰਗ ਖੇਤਰ ਨਾਲ](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pa.png)
+![GitHub Models AI Playground ਇੰਟਰਫੇਸ ਮਾਡਲ ਚੋਣ ਅਤੇ ਟੈਸਟਿੰਗ ਖੇਤਰ ਨਾਲ](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pa.png)
 
-**ਇਹ ਪਲੇਗਰਾਊਂਡ ਨੂੰ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਬਣਾਉਂਦਾ ਹੈ:**
-- **ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ** ਨੂੰ ਜਿਵੇਂ GPT-4o-mini, Claude ਆਦਿ (ਸਭ ਮੁਫ਼ਤ!) ਦੀ ਜਾਂਚ ਕਰੋ
-- **ਆਪਣੇ ਵਿਚਾਰਾਂ ਅਤੇ ਪ੍ਰੋਮਪਟਾਂ** ਨੂੰ ਕੋਡ ਲਿਖਣ ਤੋਂ ਪਹਿਲਾਂ ਟੈਸਟ ਕਰੋ
-- **ਤਿਆਰ-ਵਰਤਣਯੋਗ ਕੋਡ ਸਨਿੱਪਟਸ** ਪ੍ਰਾਪਤ ਕਰੋ ਆਪਣੇ ਮਨਪਸੰਦ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਵਿੱਚ
-- **ਸੈਟਿੰਗਾਂ ਨੂੰ ਢਾਲੋ** ਜਿਵੇਂ ਰਚਨਾਤਮਕਤਾ ਪੱਧਰ ਅਤੇ ਜਵਾਬ ਦੀ ਲੰਬਾਈ ਦੇਖਣ ਲਈ ਕਿ ਉਹ ਨਤੀਜਿਆਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ
+**ਇਹ ਪਲੇਗਰਾਊਂਡ ਨੂੰ ਕਿੰਨਾ ਲਾਭਕਾਰੀ ਬਣਾਉਂਦਾ ਹੈ:**
+- **ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਦੀ ਜਾਂਚ ਕਰੋ** ਜਿਵੇਂ GPT-4o-mini, Claude, ਅਤੇ ਹੋਰ (ਸਭ ਮੁਫ਼ਤ!)
+- **ਆਪਣੇ ਵਿਚਾਰਾਂ ਅਤੇ ਪ੍ਰਸ਼ਨਾਂ ਦੀ ਜਾਂਚ ਕਰੋ** ਜੇਕਰ ਤੁਸੀਂ ਕੋਈ ਕੋਡ ਨਹੀਂ ਲਿਖਦੇ
+- **ਤਿਆਰ-ਵਰਤਣਯੋਗ ਕੋਡ ਸਨਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ** ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਵਿੱਚ
+- **ਸੈਟਿੰਗਾਂ ਨੂੰ ਠੀਕ ਕਰੋ** ਜਿਵੇਂ ਕ੍ਰੀਏਟਿਵਿਟੀ ਪੱਧਰ ਅਤੇ ਜਵਾਬ ਦੀ ਲੰਬਾਈ ਦੇਖਣ ਲਈ ਕਿ ਉਹ ਨਤੀਜੇ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਭਾਵ ਪਾਉਂਦੇ ਹਨ
 
-ਜਦੋਂ ਤੁਸੀਂ ਕੁਝ ਸਮਾਂ ਖੇਡਦੇ ਹੋ, ਸਿਰਫ "ਕੋਡ" ਟੈਬ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਆਪਣੀ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਚੁਣੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ ਕੋਡ ਮਿਲੇ।
+ਜਦੋਂ ਤੁਸੀਂ ਕੁਝ ਖੇਡ ਲੈਂਦੇ ਹੋ, ਸਿਰਫ਼ "Code" ਟੈਬ 'ਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ ਆਪਣੀ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਚੁਣੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ ਕੋਡ ਮਿਲੇ।
 
 ![ਪਲੇਗਰਾਊਂਡ ਚੋਣ ਜੋ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਲਈ ਕੋਡ ਜਨਰੇਸ਼ਨ ਵਿਕਲਪ ਦਿਖਾਉਂਦੀ ਹੈ](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pa.png)
 
-## Python ਬੈਕਐਂਡ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਸੈਟਅੱਪ ਕਰਨਾ
+## Python ਬੈਕਐਂਡ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਸੈਟਅਪ ਕਰਨਾ
 
-ਹੁਣ ਆਓ Python ਦੀ ਵਰਤੋਂ ਕਰਕੇ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਨੂੰ ਲਾਗੂ ਕਰੀਏ। Python AI ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਸ਼ਾਨਦਾਰ ਹੈ ਕਿਉਂਕਿ ਇਸਦਾ ਸਧਾਰਨ ਸਿੰਟੈਕਸ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਹਨ। ਅਸੀਂ GitHub ਮਾਡਲ ਪਲੇਗਰਾਊਂਡ ਤੋਂ ਕੋਡ ਨਾਲ ਸ਼ੁਰੂ ਕਰਾਂਗੇ ਅਤੇ ਫਿਰ ਇਸ ਨੂੰ ਇੱਕ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ, ਉਤਪਾਦਨ-ਤਿਆਰ ਫੰਕਸ਼ਨ ਵਿੱਚ ਰਿਫੈਕਟਰ ਕਰਾਂਗੇ।
+ਹੁਣ ਆਓ Python ਦੀ ਵਰਤੋਂ ਕਰਕੇ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਲਾਗੂ ਕਰੀਏ। Python AI ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਸ਼ਾਨਦਾਰ ਹੈ ਕਿਉਂਕਿ ਇਸਦਾ ਸਧਾਰਨ ਸਿੰਟੈਕਸ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਹਨ। ਅਸੀਂ GitHub Models ਪਲੇਗਰਾਊਂਡ ਤੋਂ ਕੋਡ ਨਾਲ ਸ਼ੁਰੂ ਕਰਾਂਗੇ ਅਤੇ ਫਿਰ ਇਸਨੂੰ ਇੱਕ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ, ਉਤਪਾਦਨ-ਤਿਆਰ ਫੰਕਸ਼ਨ ਵਿੱਚ ਰਿਫੈਕਟਰ ਕਰਾਂਗੇ।
 
 ### ਬੇਸ ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ ਨੂੰ ਸਮਝਣਾ
 
-ਜਦੋਂ ਤੁਸੀਂ ਪਲੇਗਰਾਊਂਡ ਤੋਂ Python ਕੋਡ ਲੈਂਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ। ਜੇ ਇਹ ਪਹਿਲਾਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਜਾਪਦਾ ਹੈ ਤਾਂ ਚਿੰਤਾ ਨਾ ਕਰੋ – ਆਓ ਇਸ ਨੂੰ ਹਰੇਕ ਹਿੱਸੇ ਵਿੱਚ ਸਮਝੀਏ:
+ਜਦੋਂ ਤੁਸੀਂ ਪਲੇਗਰਾਊਂਡ ਤੋਂ Python ਕੋਡ ਲੈਂਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਮਿਲੇਗਾ। ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਪਹਿਲਾਂ ਵਧੇਰੇ ਜਾਪਦਾ ਹੈ – ਆਓ ਇਸਨੂੰ ਟੁਕੜੇ-ਟੁਕੜੇ ਵਿੱਚ ਸਮਝੀਏ:
 
 ```python
 """Run this model in Python
@@ -101,7 +229,6 @@ client = OpenAI(
     api_key=os.environ["GITHUB_TOKEN"],
 )
 
-```python
 response = client.chat.completions.create(
     messages=[
         {
@@ -123,16 +250,16 @@ print(response.choices[0].message.content)
 ```
 
 **ਇਸ ਕੋਡ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:**
-- **ਅਸੀਂ ਉਹ ਟੂਲਜ਼ ਇੰਪੋਰਟ ਕਰਦੇ ਹਾਂ** ਜਿਨ੍ਹਾਂ ਦੀ ਲੋੜ ਹੈ: `os` ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਪੜ੍ਹਨ ਲਈ ਅਤੇ `OpenAI` AI ਨਾਲ ਗੱਲਬਾਤ ਕਰਨ ਲਈ
-- **ਅਸੀਂ OpenAI ਕਲਾਇੰਟ ਸੈਟਅਪ ਕਰਦੇ ਹਾਂ** ਤਾਂ ਜੋ GitHub ਦੇ AI ਸਰਵਰਾਂ ਨੂੰ ਸਿੱਧਾ OpenAI ਦੀ ਬਜਾਏ ਪੋਇੰਟ ਕਰ ਸਕੇ
-- **ਅਸੀਂ GitHub ਟੋਕਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪ੍ਰਮਾਣਿਕਤਾ ਕਰਦੇ ਹਾਂ**
-- **ਅਸੀਂ ਆਪਣੀ ਗੱਲਬਾਤ ਨੂੰ ਵੱਖ-ਵੱਖ "ਰੋਲ" ਨਾਲ ਬਣਾਉਂਦੇ ਹਾਂ – ਇਸ ਨੂੰ ਇੱਕ ਨਾਟਕ ਲਈ ਸਟੇਜ ਸੈਟ ਕਰਨ ਵਾਂਗ ਸੋਚੋ
-- **ਅਸੀਂ AI ਨੂੰ ਆਪਣੀ ਬੇਨਤੀ ਭੇਜਦੇ ਹਾਂ ਕੁਝ ਫਾਈਨ-ਟਿਊਨਿੰਗ ਪੈਰਾਮੀਟਰਾਂ ਨਾਲ
-- **ਅਸੀਂ ਸਾਰੇ ਡਾਟਾ ਵਿੱਚੋਂ ਅਸਲ ਜਵਾਬ ਟੈਕਸਟ ਨੂੰ ਕੱਢਦੇ ਹਾਂ
+- **ਅਸੀਂ ਉਹ ਟੂਲਜ਼ ਇੰਪੋਰਟ ਕਰਦੇ ਹਾਂ** ਜਿਨ੍ਹਾਂ ਦੀ ਲੋੜ ਹੈ: `os` ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਪੜ੍ਹਨ ਲਈ ਅਤੇ `OpenAI` AI ਨਾਲ ਗੱਲ ਕਰਨ ਲਈ
+- **ਅਸੀਂ OpenAI ਕਲਾਇੰਟ ਸੈਟਅਪ ਕਰਦੇ ਹਾਂ** ਤਾਂ ਜੋ GitHub ਦੇ AI ਸਰਵਰਾਂ ਨੂੰ ਸਿੱਧਾ ਪੋਇੰਟ ਕਰ ਸਕੇ
+- **ਅਸੀਂ ਪ੍ਰਮਾਣਿਕਤਾ ਕਰਦੇ ਹਾਂ** ਇੱਕ ਵਿਸ਼ੇਸ਼ GitHub ਟੋਕਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ (ਇਸ ਬਾਰੇ ਹੋਰ ਬਾਅਦ ਵਿੱਚ!)
+- **ਅਸੀਂ ਆਪਣੀ ਗੱਲਬਾਤ ਨੂੰ ਬਣਾਉਂਦੇ ਹਾਂ** ਵੱਖ-ਵੱਖ "ਰੋਲ" ਨਾਲ – ਇਸਨੂੰ ਇੱਕ ਨਾਟਕ ਲਈ ਸਟੇਜ ਸੈਟ ਕਰਨ ਵਾਂਗ ਸੋਚੋ
+- **ਅਸੀਂ ਆਪਣੀ ਬੇਨਤੀ AI ਨੂੰ ਭੇਜਦੇ ਹਾਂ** ਕੁਝ ਫਾਈਨ-ਟੂਨਿੰਗ ਪੈਰਾਮੀਟਰਾਂ ਨਾਲ
+- **ਅਸੀਂ ਅਸਲ ਜਵਾਬ ਟੈਕਸਟ ਨੂੰ ਕੱਢਦੇ ਹਾਂ** ਸਾਰੇ ਡਾਟਾ ਵਿੱਚੋਂ ਜੋ ਵਾਪਸ ਆਉਂਦਾ ਹੈ
 
-### ਗੱਲਬਾਤ ਰੋਲਾਂ ਨੂੰ ਸਮਝਣਾ: AI ਗੱਲਬਾਤ ਫਰੇਮਵਰਕ
+### ਮੈਸੇਜ ਰੋਲ ਨੂੰ ਸਮਝਣਾ: AI ਗੱਲਬਾਤ ਦਾ ਢਾਂਚਾ
 
-AI ਗੱਲਬਾਤਾਂ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਢਾਂਚੇ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ ਜਿਸ ਵਿੱਚ ਵੱਖ-ਵੱਖ "ਰੋਲ" ਹੁੰਦੇ ਹਨ ਜੋ ਵੱਖ-ਵੱਖ ਉਦੇਸ਼ਾਂ ਦੀ ਸੇਵਾ ਕਰਦੇ ਹਨ:
+AI ਗੱਲਬਾਤਾਂ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਢਾਂਚੇ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ ਜਿਸ ਵਿੱਚ ਵੱਖ-ਵੱਖ "ਰੋਲ" ਹੁੰਦੇ ਹਨ ਜੋ ਵੱਖ-ਵੱਖ ਉਦੇਸ਼ਾਂ ਦੀ ਸੇਵਾ ਕਰਦੇ ਹਨ:
 
 ```python
 messages=[
@@ -147,74 +274,88 @@ messages=[
 ]
 ```
 
-**ਇਸ ਨੂੰ ਇੱਕ ਨਾਟਕ ਦਾ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਦੇਣ ਵਾਂਗ ਸੋਚੋ:**
-- **ਸਿਸਟਮ ਰੋਲ**: ਜਿਵੇਂ ਕਿ ਇੱਕ ਅਭਿਨੇਤਾ ਲਈ ਸਟੇਜ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ – ਇਹ AI ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਵਰਤਾਰਾ ਕਰਨਾ ਹੈ, ਕਿਹੜੀ ਪਛਾਣ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ, ਅਤੇ ਕਿਵੇਂ ਜਵਾਬ ਦੇਣਾ ਹੈ
-- **ਉਪਭੋਗਤਾ ਰੋਲ**: ਉਹ ਅਸਲ ਸਵਾਲ ਜਾਂ ਸੁਨੇਹਾ ਜੋ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਵਰਤਣ ਵਾਲੇ ਵਿਅਕਤੀ ਤੋਂ ਆਉਂਦਾ ਹੈ
-- **ਅਸਿਸਟੈਂਟ ਰੋਲ**: AI ਦਾ ਜਵਾਬ (ਤੁਸੀਂ ਇਹ ਨਹੀਂ ਭੇਜਦੇ, ਪਰ ਇਹ ਗੱਲਬਾਤ ਦੇ ਇਤਿਹਾਸ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ)
+**ਇਸਨੂੰ ਇੱਕ ਨਾਟਕ ਨੂੰ ਡਾਇਰੈਕਟ ਕਰਨ ਵਾਂਗ ਸੋਚੋ:**
+- **ਸਿਸਟਮ ਰੋਲ**: ਜਿਵੇਂ ਇੱਕ ਅਦਾਕਾਰ ਲਈ ਸਟੇਜ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ – ਇਹ AI ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਵਿਹਾਰ ਕਰਨਾ ਹੈ, ਕਿਹੜੀ ਸ਼ਖਸੀਅਤ ਹੋਣੀ ਹੈ, ਅਤੇ ਕਿਵੇਂ ਜਵਾਬ ਦੇਣਾ ਹੈ
+- **ਯੂਜ਼ਰ ਰੋਲ**: ਅਸਲ ਸਵਾਲ ਜਾਂ ਸੁਨੇਹਾ ਜੋ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਵਰਤਣ ਵਾਲੇ ਵਿਅਕਤੀ ਤੋਂ ਆਉਂਦਾ ਹੈ
+- **ਅਸਿਸਟੈਂਟ ਰੋਲ**: AI ਦਾ ਜਵਾਬ (ਤੁਸੀਂ ਇਹ ਨਹੀਂ ਭੇਜਦੇ
+**2. ਆਉਟਪੁੱਟ ਫਾਰਮੈਟਿੰਗ**: AI ਨੂੰ ਦੱਸੋ ਕਿ ਜਵਾਬਾਂ ਨੂੰ ਕਿਵੇਂ ਢਾਂਚੇਬੱਧ ਕਰਨਾ ਹੈ  
+```python
+system_prompt = """
+You are a technical mentor. Always structure your responses as:
+1. Quick Answer (1-2 sentences)
+2. Detailed Explanation 
+3. Code Example
+4. Common Pitfalls to Avoid
+5. Next Steps for Learning
+"""
+```
+  
+**3. ਪਾਬੰਦੀ ਸੈਟਿੰਗ**: AI ਨੂੰ ਦੱਸੋ ਕਿ ਕੀ ਨਹੀਂ ਕਰਨਾ  
+```python
+system_prompt = """
+You are a coding tutor focused on teaching best practices. Never write complete 
+solutions for the user - instead, guide them with hints and questions so they 
+learn by doing. Always explain the 'why' behind coding decisions.
+"""
+```
+  
+#### ਤੁਹਾਡੇ ਚੈਟ ਅਸਿਸਟੈਂਟ ਲਈ ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ  
 
-**ਅਸਲ ਜ਼ਿੰਦਗੀ ਦੀ ਤੁਲਨਾ**: ਸੋਚੋ ਤੁਸੀਂ ਇੱਕ ਦੋਸਤ ਨੂੰ ਪਾਰਟੀ ਵਿੱਚ ਕਿਸੇ ਨਾਲ ਮਿਲਾਉਂਦੇ ਹੋ:
-- **ਸਿਸਟਮ ਸੁਨੇਹਾ**: "ਇਹ ਮੇਰੀ ਦੋਸਤ ਸਾਰਾ ਹੈ, ਉਹ ਇੱਕ ਡਾਕਟਰ ਹੈ ਜੋ ਮੈਡੀਕਲ ਸੰਕਲਪਾਂ ਨੂੰ ਸਧਾਰਨ ਸ਼ਬਦਾਂ ਵਿੱਚ ਸਮਝਾਉਣ ਵਿੱਚ ਮਹਾਨ ਹੈ"
-- **ਉਪਭੋਗਤਾ ਸੁਨੇਹਾ**: "ਕੀ ਤੁਸੀਂ ਦੱਸ ਸਕਦੇ ਹੋ ਕਿ ਟੀਕੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?"
-- **ਅਸਿਸਟੈਂਟ ਜਵਾਬ**: ਸਾਰਾ ਇੱਕ ਦੋਸਤਾਨਾ ਡਾਕਟਰ ਵਾਂਗ ਜਵਾਬ ਦਿੰਦੀ ਹੈ, ਨਾ ਕਿ ਇੱਕ ਵਕੀਲ ਜਾਂ ਰਸੋਈਏ ਵਾਂਗ
+ਸਿਸਟਮ ਪ੍ਰੋੰਪਟਸ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਵਿਸ਼ੇਸ਼ਤਾਈ AI ਅਸਿਸਟੈਂਟ ਬਣਾਉਣ ਦੀ ਸ਼ਕਤੀ ਦਿੰਦਾ ਹੈ:  
+- **ਕਸਟਮਰ ਸਰਵਿਸ ਬੋਟ**: ਮਦਦਗਾਰ, ਧੀਰਜਵਾਨ, ਨੀਤੀ-ਜਾਗਰੂਕ  
+- **ਸਿੱਖਣ ਵਾਲਾ ਟਿਊਟਰ**: ਉਤਸ਼ਾਹਿਤ ਕਰਨ ਵਾਲਾ, ਕਦਮ-ਦਰ-ਕਦਮ, ਸਮਝਣ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ  
+- **ਕ੍ਰਿਏਟਿਵ ਸਾਥੀ**: ਕਲਪਨਾਤਮਕ, ਵਿਚਾਰਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ, "ਕੀ ਹੋਵੇ ਜੇ?" ਪੁੱਛਦਾ ਹੈ  
+- **ਤਕਨੀਕੀ ਵਿਸ਼ੇਸ਼ਗਿਆਨ**: ਸਹੀ, ਵਿਸਤ੍ਰਿਤ, ਸੁਰੱਖਿਆ-ਜਾਗਰੂਕ  
 
-### AI ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਸਮਝਣਾ: ਜਵਾਬ ਦੇ ਵਰਤਾਰਾ ਨੂੰ ਸੁਧਾਰਨਾ
+**ਮੁੱਖ ਅੰਕ**: ਤੁਸੀਂ ਸਿਰਫ AI API ਨੂੰ ਕਾਲ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ – ਤੁਸੀਂ ਇੱਕ ਕਸਟਮ AI ਪੁਰਸ਼ਾਰਥ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ ਜੋ ਤੁਹਾਡੇ ਵਿਸ਼ੇਸ਼ ਉਪਯੋਗ ਮਾਮਲੇ ਦੀ ਸੇਵਾ ਕਰਦਾ ਹੈ। ਇਹ ਹੀ ਆਧੁਨਿਕ AI ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਆਮ ਬਜਾਏ ਵਿਸ਼ੇਸ਼ ਅਤੇ ਲਾਭਦਾਇਕ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ।  
 
-AI API ਕਾਲਾਂ ਵਿੱਚ ਗਿਣਤੀ ਪੈਰਾਮੀਟਰ ਮਾਡਲ ਨੂੰ ਜਵਾਬ ਪੈਦਾ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦੇ ਹਨ। ਇਹ ਸੈਟਿੰਗਾਂ ਤੁਹਾਨੂੰ ਵੱਖ-ਵੱਖ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਲਈ AI ਦੇ ਵਰਤਾਰਾ ਨੂੰ ਢਾਲਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀਆਂ ਹਨ:
+### 🎯 ਸਿੱਖਣ ਲਈ ਜਾਂਚ: AI ਪੁਰਸ਼ਾਰਥ ਪ੍ਰੋਗਰਾਮਿੰਗ  
 
-#### ਟੈਂਪਰੇਚਰ (0.0 ਤੋਂ 2.0): ਰਚਨਾਤਮਕਤਾ ਦਾ ਡਾਇਲ
+**ਰੁਕੋ ਅਤੇ ਵਿਚਾਰ ਕਰੋ**: ਤੁਸੀਂ ਹੁਣ ਸਿਸਟਮ ਪ੍ਰੋੰਪਟਸ ਰਾਹੀਂ AI ਪੁਰਸ਼ਾਰਥਾਂ ਨੂੰ ਪ੍ਰੋਗਰਾਮ ਕਰਨ ਦਾ ਸਿਖਿਆ ਹੈ। ਇਹ ਆਧੁਨਿਕ AI ਐਪਲੀਕੇਸ਼ਨ ਵਿਕਾਸ ਵਿੱਚ ਇੱਕ ਮੂਲਭੂਤ ਹੁਨਰ ਹੈ।  
 
-**ਇਹ ਕੀ ਕਰਦਾ ਹੈ**: AI ਦੇ ਜਵਾਬਾਂ ਨੂੰ ਕਿੰਨਾ ਰਚਨਾਤਮਕ ਜਾਂ ਪੂਰਨਵਿਰਾਮ ਬਣਾਉਂਦਾ ਹੈ।
+**ਤੁਰੰਤ ਸਵੈ-ਮੁਲਾਂਕਣ**:  
+- ਕੀ ਤੁਸੀਂ ਸਮਝਾ ਸਕਦੇ ਹੋ ਕਿ ਸਿਸਟਮ ਪ੍ਰੋੰਪਟਸ ਆਮ ਯੂਜ਼ਰ ਸੁਨੇਹਿਆਂ ਤੋਂ ਕਿਵੇਂ ਵੱਖਰੇ ਹਨ?  
+- ਤਾਪਮਾਨ ਅਤੇ top_p ਪੈਰਾਮੀਟਰਾਂ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?  
+- ਤੁਸੀਂ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਉਪਯੋਗ ਮਾਮਲੇ (ਜਿਵੇਂ ਕਿ ਕੋਡਿੰਗ ਟਿਊਟਰ) ਲਈ ਸਿਸਟਮ ਪ੍ਰੋੰਪਟ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹੋ?  
 
-**ਇਸ ਨੂੰ ਇੱਕ ਜੈਜ਼ ਸੰਗੀਤਕਾਰ ਦੇ ਇੰਪ੍ਰੋਵਾਈਜ਼ੇਸ਼ਨ ਪੱਧਰ ਵਾਂਗ ਸੋਚੋ:**
-- **ਟੈਂਪਰੇਚਰ = 0.1**: ਹਰ ਵਾਰ ਬਿਲਕੁਲ ਉਹੀ ਧੁਨ ਵਜਾਉਣਾ (ਬਹੁਤ ਹੀ ਪੂਰਨਵਿਰਾਮ)
-- **ਟੈਂਪਰੇਚਰ = 0.7**: ਕੁਝ ਸੁੰਦਰ ਵੈਰੀਏਸ਼ਨ ਸ਼ਾਮਲ ਕਰਨਾ ਜਦੋਂ ਕਿ ਪਛਾਣਯੋਗ ਰਹਿਣਾ (ਸੰਤੁਲਿਤ ਰਚਨਾਤਮਕਤਾ)
-- **ਟੈਂਪਰੇਚਰ = 1.5**: ਪੂਰੀ ਤਰ੍ਹਾਂ ਪ੍ਰਯੋਗਾਤਮਕ ਜੈਜ਼ ਅਣਪਛਾਤੇ ਮੋੜਾਂ ਨਾਲ (ਬਹੁਤ ਹੀ ਅਣਪਛਾਤਾ)
+**ਅਸਲ-ਦੁਨੀਆ ਕਨੈਕਸ਼ਨ**: ਸਿਸਟਮ ਪ੍ਰੋੰਪਟ ਤਕਨੀਕਾਂ ਜੋ ਤੁਸੀਂ ਸਿੱਖੀਆਂ ਹਨ, ਹਰ ਵੱਡੀ AI ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ - GitHub Copilot ਦੀ ਕੋਡਿੰਗ ਮਦਦ ਤੋਂ ਲੈ ਕੇ ChatGPT ਦੀ ਗੱਲਬਾਤ ਇੰਟਰਫੇਸ ਤੱਕ। ਤੁਸੀਂ ਉਹੀ ਪੈਟਰਨ ਸਿੱਖ ਰਹੇ ਹੋ ਜੋ ਵੱਡੇ ਟੈਕ ਕੰਪਨੀਆਂ ਦੇ AI ਉਤਪਾਦ ਟੀਮਾਂ ਦੁਆਰਾ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।  
 
-```python
-# Very predictable responses (good for factual questions)
-response = client.chat.completions.create(
-    messages=[{"role": "user", "content": "What is 2+2?"}],
-    temperature=0.1  # Will almost always say "4"
-)
+**ਚੁਣੌਤੀ ਸਵਾਲ**: ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਯੂਜ਼ਰ ਕਿਸਮਾਂ (ਸ਼ੁਰੂਆਤੀ ਬਨਾਮ ਮਾਹਰ) ਲਈ ਵੱਖ-ਵੱਖ AI ਪੁਰਸ਼ਾਰਥਾਂ ਕਿਵੇਂ ਡਿਜ਼ਾਈਨ ਕਰ ਸਕਦੇ ਹੋ? ਸੋਚੋ ਕਿ ਕਿਵੇਂ ਉਹੀ ਅਧਾਰਭੂਤ AI ਮਾਡਲ ਪ੍ਰੋੰਪਟ ਇੰਜੀਨੀਅਰਿੰਗ ਰਾਹੀਂ ਵੱਖ-ਵੱਖ ਦਰਸ਼ਕਾਂ ਦੀ ਸੇਵਾ ਕਰ ਸਕਦਾ ਹੈ।  
 
-# Creative responses (good for brainstorming)
-response = client.chat.completions.create(
-    messages=[{"role": "user", "content": "Write a creative story opening"}],
-    temperature=1.2  # Will generate unique, unexpected stories
-)
-```
+## FastAPI ਨਾਲ ਵੈੱਬ API ਬਣਾਉਣਾ: ਤੁਹਾਡਾ ਉੱਚ-ਪ੍ਰਦਰਸ਼ਨ AI ਸੰਚਾਰ ਹੱਬ  
+
+ਹੁਣ ਆਓ ਬੈਕਐਂਡ ਬਣਾਈਏ ਜੋ ਤੁਹਾਡੇ ਫਰੰਟਐਂਡ ਨੂੰ AI ਸੇਵਾਵਾਂ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਅਸੀਂ FastAPI ਵਰਤਾਂਗੇ, ਇੱਕ ਆਧੁਨਿਕ Python ਫਰੇਮਵਰਕ ਜੋ AI ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ APIs ਬਣਾਉਣ ਵਿੱਚ ਸ਼ਾਨਦਾਰ ਹੈ।  
 
-#### ਮੈਕਸ ਟੋਕਨ (1 ਤੋਂ 4096+): ਜਵਾਬ ਦੀ ਲੰਬਾਈ ਦਾ ਨਿਯੰਤਰਕ
+FastAPI ਇਸ ਪ੍ਰਕਾਰ ਦੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਕਈ ਫਾਇਦੇ ਪੇਸ਼ ਕਰਦਾ ਹੈ: ਸਮਕਾਲੀ ਬੇਨਤੀ ਸੰਭਾਲਣ ਲਈ ਬਣਾਈ ਗਈ async ਸਹਾਇਤਾ, ਸਵੈਚਾਲਿਤ API ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਜਨਰੇਸ਼ਨ, ਅਤੇ ਸ਼ਾਨਦਾਰ ਪ੍ਰਦਰਸ਼ਨ। ਤੁਹਾਡਾ FastAPI ਸਰਵਰ ਇੱਕ ਮੱਧਵਰਗ ਦੇ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ ਜੋ ਫਰੰਟਐਂਡ ਤੋਂ ਬੇਨਤੀਆਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, AI ਸੇਵਾਵਾਂ ਨਾਲ ਸੰਚਾਰ ਕਰਦਾ ਹੈ, ਅਤੇ ਫਾਰਮੈਟ ਕੀਤੇ ਜਵਾਬ ਵਾਪਸ ਕਰਦਾ ਹੈ।  
 
-**ਇਹ ਕੀ ਕਰਦਾ ਹੈ**: AI ਦੇ ਜਵਾਬ ਦੀ ਲੰਬਾਈ 'ਤੇ ਸੀਮਾ ਸੈਟ ਕਰਦਾ ਹੈ।
+### AI ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ FastAPI ਕਿਉਂ?  
 
-**ਟੋਕਨ ਨੂੰ ਲਗਭਗ ਸ਼ਬਦਾਂ ਦੇ ਬਰਾਬਰ ਸੋਚੋ** (ਅੰਗਰੇਜ਼ੀ ਵਿੱਚ ਲਗਭਗ 1 ਟੋਕਨ = 0.75 ਸ਼ਬਦ):
-- **max_tokens=50**: ਛੋਟਾ ਅਤੇ ਸਧਾਰਨ (ਜਿਵੇਂ ਇੱਕ ਟੈਕਸਟ ਸੁਨੇਹਾ)
-- **max_tokens=500**: ਇੱਕ ਚੰਗ
-**ਇਹ ਹੈ ਕਿ ਕਿਉਂ FastAPI ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਬੇਹਤਰੀਨ ਹੈ:**
-- **ਡਿਫਾਲਟ async**: ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਕਈ AI ਬੇਨਤੀਆਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦਾ ਹੈ ਬਿਨਾਂ ਰੁਕਾਵਟ ਦੇ
-- **ਆਟੋਮੈਟਿਕ ਡੌਕਸ**: `/docs` 'ਤੇ ਜਾਓ ਅਤੇ ਸੁੰਦਰ, ਇੰਟਰਐਕਟਿਵ API ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਪੇਜ ਮੁਫ਼ਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰੋ
-- **ਬਿਲਟ-ਇਨ ਵੈਲੀਡੇਸ਼ਨ**: ਗਲਤੀਆਂ ਨੂੰ ਸਮੱਸਿਆ ਬਣਨ ਤੋਂ ਪਹਿਲਾਂ ਹੀ ਪਕੜ ਲੈਂਦਾ ਹੈ
-- **ਬਿਜਲੀ ਦੀ ਗਤੀ**: Python ਦੇ ਸਭ ਤੋਂ ਤੇਜ਼ ਫਰੇਮਵਰਕ ਵਿੱਚੋਂ ਇੱਕ
-- **ਆਧੁਨਿਕ Python**: Python ਦੇ ਨਵੇਂ ਅਤੇ ਸ਼ਾਨਦਾਰ ਫੀਚਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ
+ਤੁਸੀਂ ਸੋਚ ਰਹੇ ਹੋ: "ਕੀ ਮੈਂ ਸਿੱਧੇ ਆਪਣੇ ਫਰੰਟਐਂਡ ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੋਂ AI ਨੂੰ ਕਾਲ ਨਹੀਂ ਕਰ ਸਕਦਾ?" ਜਾਂ "FastAPI ਬਜਾਏ Flask ਜਾਂ Django ਕਿਉਂ?" ਵਧੀਆ ਸਵਾਲ!  
 
-**ਅਤੇ ਇਹ ਹੈ ਕਿ ਸਾਨੂੰ ਬੈਕਐਂਡ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ:**
+**ਇਸ ਲਈ FastAPI ਸਾਡੇ ਬਣਾਉਣ ਲਈ ਬਿਹਤਰ ਹੈ:**  
+- **Async ਡਿਫਾਲਟ ਦੁਆਰਾ**: ਕਈ AI ਬੇਨਤੀਆਂ ਨੂੰ ਇੱਕੋ ਸਮੇਂ ਸੰਭਾਲ ਸਕਦਾ ਹੈ ਬਿਨਾਂ ਰੁਕਣ ਦੇ  
+- **ਸਵੈਚਾਲਿਤ ਦਸਤਾਵੇਜ਼**: `/docs` 'ਤੇ ਜਾਓ ਅਤੇ ਇੱਕ ਸੁੰਦਰ, ਇੰਟਰਐਕਟਿਵ API ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਪੇਜ਼ ਮੁਫ਼ਤ ਪ੍ਰਾਪਤ ਕਰੋ  
+- **ਬਿਲਟ-ਇਨ ਵੈਲੀਡੇਸ਼ਨ**: ਗਲਤੀਆਂ ਨੂੰ ਸਮੱਸਿਆ ਬਣਨ ਤੋਂ ਪਹਿਲਾਂ ਪਕੜਦਾ ਹੈ  
+- **ਬਿਜਲੀ ਦੀ ਗਤੀ**: ਸਭ ਤੋਂ ਤੇਜ਼ Python ਫਰੇਮਵਰਕ ਵਿੱਚੋਂ ਇੱਕ  
+- **ਆਧੁਨਿਕ Python**: Python ਦੀਆਂ ਸਾਰੀਆਂ ਨਵੀਆਂ ਅਤੇ ਸ਼ਾਨਦਾਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਰਤਦਾ ਹੈ  
 
-**ਸੁਰੱਖਿਆ**: ਤੁਹਾਡਾ AI API ਕੁੰਜੀ ਇੱਕ ਪਾਸਵਰਡ ਵਾਂਗ ਹੈ – ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਫਰੰਟਐਂਡ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਰੱਖਦੇ ਹੋ, ਤਾਂ ਕੋਈ ਵੀ ਜੋ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ ਦੇ ਸੋਰਸ ਕੋਡ ਨੂੰ ਵੇਖਦਾ ਹੈ ਇਸਨੂੰ ਚੋਰੀ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ AI ਕ੍ਰੈਡਿਟਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ। ਬੈਕਐਂਡ ਸੰਵੇਦਨਸ਼ੀਲ ਸਾਧਨਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦਾ ਹੈ।
+**ਅਤੇ ਇਹ ਹੈ ਕਿ ਸਾਨੂੰ ਬੈਕਐਂਡ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ:**  
 
-**ਰੇਟ ਲਿਮਿਟਿੰਗ ਅਤੇ ਕੰਟਰੋਲ**: ਬੈਕਐਂਡ ਤੁਹਾਨੂੰ ਯੂਜ਼ਰਾਂ ਦੀ ਬੇਨਤੀ ਦੀ ਗਿਣਤੀ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ, ਯੂਜ਼ਰ ਪ੍ਰਮਾਣਿਕਤਾ ਲਾਗੂ ਕਰਨ ਅਤੇ ਵਰਤੋਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਲਈ ਲੌਗਿੰਗ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
+**ਸੁਰੱਖਿਆ**: ਤੁਹਾਡੀ AI API ਕੁੰਜੀ ਇੱਕ ਪਾਸਵਰ ਵਰਗੀ ਹੈ – ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਫਰੰਟਐਂਡ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਰੱਖਦੇ ਹੋ, ਤਾਂ ਕੋਈ ਵੀ ਜੋ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਵੇਖਦਾ ਹੈ, ਇਸਨੂੰ ਚੋਰੀ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ AI ਕ੍ਰੈਡਿਟਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ। ਬੈਕਐਂਡ ਸੰਵੇਦਨਸ਼ੀਲ ਪ੍ਰਮਾਣ ਪੱਤਰਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦਾ ਹੈ।  
 
-**ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ**: ਤੁਸੀਂ ਗੱਲਬਾਤਾਂ ਨੂੰ ਸੇਵ ਕਰਨਾ, ਅਣਚਾਹੀ ਸਮੱਗਰੀ ਨੂੰ ਫਿਲਟਰ ਕਰਨਾ, ਜਾਂ ਕਈ AI ਸੇਵਾਵਾਂ ਨੂੰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹ ਸਾਰਾ ਲਾਜਿਕ ਬੈਕਐਂਡ ਵਿੱਚ ਹੁੰਦਾ ਹੈ।
+**ਰੇਟ ਲਿਮਿਟਿੰਗ ਅਤੇ ਕੰਟਰੋਲ**: ਬੈਕਐਂਡ ਤੁਹਾਨੂੰ ਇਹ ਨਿਯੰਤਰਿਤ ਕਰਨ ਦਿੰਦਾ ਹੈ ਕਿ ਯੂਜ਼ਰ ਕਿੰਨੀ ਵਾਰ ਬੇਨਤੀ ਕਰ ਸਕਦੇ ਹਨ, ਯੂਜ਼ਰ ਪ੍ਰਮਾਣਿਕਤਾ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹਨ, ਅਤੇ ਵਰਤੋਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਲਈ ਲੌਗਿੰਗ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹਨ।  
 
-**ਆਰਕੀਟੈਕਚਰ ਕਲਾਇੰਟ-ਸਰਵਰ ਮਾਡਲ ਵਰਗਾ ਹੈ:**
-- **ਫਰੰਟਐਂਡ**: ਇੰਟਰਫੇਸ ਲੇਅਰ ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ ਲਈ
-- **ਬੈਕਐਂਡ API**: ਬੇਨਤੀ ਪ੍ਰੋਸੈਸਿੰਗ ਅਤੇ ਰੂਟਿੰਗ ਲੇਅਰ
-- **AI ਸੇਵਾ**: ਬਾਹਰੀ ਗਣਨਾ ਅਤੇ ਜਵਾਬ ਪੈਦਾ ਕਰਨ
-- **ਇਨਵਾਇਰਮੈਂਟ ਵੈਰੀਏਬਲ**: ਸੁਰੱਖਿਅਤ ਸੰਰਚਨਾ ਅਤੇ ਸਾਧਨਾਂ ਦਾ ਸਟੋਰੇਜ
+**ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ**: ਤੁਸੀਂ ਗੱਲਬਾਤਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨਾ, ਅਣਚਾਹੀ ਸਮੱਗਰੀ ਨੂੰ ਫਿਲਟਰ ਕਰਨਾ, ਜਾਂ ਕਈ AI ਸੇਵਾਵਾਂ ਨੂੰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹ ਤਰਕ ਬੈਕਐਂਡ ਵਿੱਚ ਹੁੰਦਾ ਹੈ।  
 
-### ਬੇਨਤੀ-ਜਵਾਬ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝਣਾ
+**ਆਰਕੀਟੈਕਚਰ ਗਾਹਕ-ਸਰਵਰ ਮਾਡਲ ਵਰਗ ਹੈ:**  
+- **ਫਰੰਟਐਂਡ**: ਇੰਟਰਫੇਸ ਪਰਤ ਸੰਚਾਰ ਲਈ  
+- **ਬੈਕਐਂਡ API**: ਬੇਨਤੀ ਪ੍ਰੋਸੈਸਿੰਗ ਅਤੇ ਰੂਟਿੰਗ ਪਰਤ  
+- **AI ਸੇਵਾ**: ਬਾਹਰੀ ਗਣਨਾ ਅਤੇ ਜਵਾਬ ਜਨਰੇਸ਼ਨ  
+- **ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ**: ਸੁਰੱਖਿਅਤ ਸੰਰਚਨਾ ਅਤੇ ਪ੍ਰਮਾਣ ਪੱਤਰ ਸਟੋਰੇਜ  
 
-ਆਓ ਵੇਖੀਏ ਕਿ ਜਦੋਂ ਕੋਈ ਯੂਜ਼ਰ ਸੁਨੇਹਾ ਭੇਜਦਾ ਹੈ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ:
+### ਬੇਨਤੀ-ਜਵਾਬ ਪ੍ਰਵਾਹ ਨੂੰ ਸਮਝਣਾ  
+
+ਆਓ ਪਤਾ ਲਗਾਈਏ ਕਿ ਜਦੋਂ ਕੋਈ ਯੂਜ਼ਰ ਸੁਨੇਹਾ ਭੇਜਦਾ ਹੈ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ:  
 
 ```mermaid
 sequenceDiagram
@@ -232,16 +373,16 @@ sequenceDiagram
     API->>Frontend: {"response": "Hello! How can I help?"}
     Frontend->>User: Displays AI message
 ```
+  
+**ਹਰ ਕਦਮ ਨੂੰ ਸਮਝਣਾ:**  
+1. **ਯੂਜ਼ਰ ਸੰਚਾਰ**: ਵਿਅਕਤੀ ਚੈਟ ਇੰਟਰਫੇਸ ਵਿੱਚ ਟਾਈਪ ਕਰਦਾ ਹੈ  
+2. **ਫਰੰਟਐਂਡ ਪ੍ਰੋਸੈਸਿੰਗ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਨਪੁਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ JSON ਦੇ ਰੂਪ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ  
+3. **API ਵੈਲੀਡੇਸ਼ਨ**: FastAPI Pydantic ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੇਨਤੀ ਨੂੰ ਸਵੈਚਾਲਿਤ ਤੌਰ 'ਤੇ ਵੈਲੀਡੇਟ ਕਰਦਾ ਹੈ  
+4. **AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਬੈਕਐਂਡ ਸੰਦਰਭ (ਸਿਸਟਮ ਪ੍ਰੋੰਪਟ) ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਅਤੇ AI ਸੇਵਾ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ  
+5. **ਜਵਾਬ ਸੰਭਾਲਣਾ**: API AI ਜਵਾਬ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਅਤੇ ਜ਼ਰੂਰਤ ਪੈਣ 'ਤੇ ਇਸਨੂੰ ਸੋਧ ਸਕਦਾ ਹੈ  
+6. **ਫਰੰਟਐਂਡ ਡਿਸਪਲੇਅ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਚੈਟ ਇੰਟਰਫੇਸ ਵਿੱਚ ਜਵਾਬ ਦਿਖਾਉਂਦਾ ਹੈ  
 
-**ਹਰ ਕਦਮ ਨੂੰ ਸਮਝਣਾ:**
-1. **ਯੂਜ਼ਰ ਇੰਟਰਐਕਸ਼ਨ**: ਵਿਅਕਤੀ ਚੈਟ ਇੰਟਰਫੇਸ ਵਿੱਚ ਟਾਈਪ ਕਰਦਾ ਹੈ
-2. **ਫਰੰਟਐਂਡ ਪ੍ਰੋਸੈਸਿੰਗ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਨਪੁਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ JSON ਵਜੋਂ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ
-3. **API ਵੈਲੀਡੇਸ਼ਨ**: FastAPI Pydantic ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੇਨਤੀ ਨੂੰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਵੈਲੀਡੇਟ ਕਰਦਾ ਹੈ
-4. **AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ**: ਬੈਕਐਂਡ ਸੰਦਰਭ (ਸਿਸਟਮ ਪ੍ਰੌਮਪਟ) ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਅਤੇ AI ਸੇਵਾ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ
-5. **ਜਵਾਬ ਸੰਭਾਲਣਾ**: API AI ਜਵਾਬ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਅਤੇ ਜਰੂਰਤ ਪੈਣ 'ਤੇ ਇਸਨੂੰ ਸੋਧ ਸਕਦਾ ਹੈ
-6. **ਫਰੰਟਐਂਡ ਡਿਸਪਲੇਅ**: ਜਾਵਾਸਕ੍ਰਿਪਟ ਚੈਟ ਇੰਟਰਫੇਸ ਵਿੱਚ ਜਵਾਬ ਦਿਖਾਉਂਦਾ ਹੈ
-
-### API ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ
+### API ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ  
 
 ```mermaid
 sequenceDiagram
@@ -257,10 +398,33 @@ sequenceDiagram
     AI Function->>FastAPI: response text
     FastAPI->>Frontend: {"response": "Hello! How can I help?"}
 ```
+  
+```mermaid
+flowchart TD
+    A[User Input] --> B[Frontend Validation]
+    B --> C[HTTP POST Request]
+    C --> D[FastAPI Router]
+    D --> E[Pydantic Validation]
+    E --> F[AI Function Call]
+    F --> G[GitHub Models API]
+    G --> H[Response Processing]
+    H --> I[JSON Response]
+    I --> J[Frontend Update]
+    
+    subgraph "Security Layer"
+        K[CORS Middleware]
+        L[Environment Variables]
+        M[Error Handling]
+    end
+    
+    D --> K
+    F --> L
+    H --> M
+```
+  
+### FastAPI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣਾ  
 
-### FastAPI ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣਾ
-
-ਆਓ ਆਪਣੀ API ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਬਣਾਈਏ। `api.py` ਨਾਮਕ ਫਾਈਲ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤਾ FastAPI ਕੋਡ ਹੋਵੇ:
+ਆਓ ਆਪਣੀ API ਕਦਮ-ਦਰ-ਕਦਮ ਬਣਾਈਏ। `api.py` ਨਾਮਕ ਫਾਈਲ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤਾ FastAPI ਕੋਡ ਹੋਵੇ:  
 
 ```python
 # api.py
@@ -338,43 +502,43 @@ if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
 ```
+  
+**FastAPI ਅਮਲ ਨੂੰ ਸਮਝਣਾ:**  
+- **ਇੰਪੋਰਟ ਕਰਦਾ ਹੈ** FastAPI ਆਧੁਨਿਕ ਵੈੱਬ ਫਰੇਮਵਰਕ ਕਾਰਗੁਜ਼ਾਰੀ ਲਈ ਅਤੇ Pydantic ਡਾਟਾ ਵੈਲੀਡੇਸ਼ਨ ਲਈ  
+- **ਸਵੈਚਾਲਿਤ API ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਬਣਾਉਂਦਾ ਹੈ** (ਜਦੋਂ ਸਰਵਰ ਚਲਦਾ ਹੈ `/docs` 'ਤੇ ਉਪਲਬਧ)  
+- **CORS ਮਿਡਲਵੇਅਰ ਨੂੰ ਯੋਗ ਕਰਦਾ ਹੈ** ਵੱਖਰੇ ਮੂਲਾਂ ਤੋਂ ਫਰੰਟਐਂਡ ਬੇਨਤੀਆਂ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ  
+- **Pydantic ਮਾਡਲਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ** ਸਵੈਚਾਲਿਤ ਬੇਨਤੀ/ਜਵਾਬ ਵੈਲੀਡੇਸ਼ਨ ਅਤੇ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਲਈ  
+- **async ਐਂਡਪੋਇੰਟਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ** ਸਮਕਾਲੀ ਬੇਨਤੀਆਂ ਨਾਲ ਬਿਹਤਰ ਕਾਰਗੁਜ਼ਾਰੀ ਲਈ  
+- **HTTP ਸਥਿਤੀ ਕੋਡ ਅਤੇ ਗਲਤੀ ਸੰਭਾਲਣ ਨੂੰ ਲਾਗੂ ਕਰਦਾ ਹੈ** HTTPException ਨਾਲ  
+- **ਸੰਰਚਿਤ ਲੌਗਿੰਗ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਨਿਗਰਾਨੀ ਅਤੇ ਡਿਬੱਗਿੰਗ ਲਈ  
+- **ਸੇਵਾ ਸਥਿਤੀ ਦੀ ਨਿਗਰਾਨੀ ਲਈ ਸਿਹਤ ਜਾਂਚ ਐਂਡਪੋਇੰਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**  
 
-**FastAPI ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ ਨੂੰ ਸਮਝਣਾ:**
-- **FastAPI ਨੂੰ ਇੰਪੋਰਟ ਕਰਦਾ ਹੈ** ਆਧੁਨਿਕ ਵੈਬ ਫਰੇਮਵਰਕ ਫੰਕਸ਼ਨਲਿਟੀ ਲਈ ਅਤੇ Pydantic ਨੂੰ ਡਾਟਾ ਵੈਲੀਡੇਸ਼ਨ ਲਈ
-- **ਆਟੋਮੈਟਿਕ API ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਬਣਾਉਂਦਾ ਹੈ** (ਜਦੋਂ ਸਰਵਰ ਚੱਲਦਾ ਹੈ ਤਾਂ `/docs` 'ਤੇ ਉਪਲਬਧ)
-- **CORS ਮਿਡਲਵੇਅਰ ਨੂੰ ਯੋਗ ਕਰਦਾ ਹੈ** ਵੱਖ-ਵੱਖ ਥਾਵਾਂ ਤੋਂ ਫਰੰਟਐਂਡ ਬੇਨਤੀਆਂ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ
-- **Pydantic ਮਾਡਲਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ** ਆਟੋਮੈਟਿਕ ਬੇਨਤੀ/ਜਵਾਬ ਵੈਲੀਡੇਸ਼ਨ ਅਤੇ ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਲਈ
-- **async ਐਂਡਪੌਇੰਟਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ** ਬਿਹਤਰ ਪ੍ਰਦਰਸ਼ਨ ਲਈ
-- **ਸਹੀ HTTP ਸਟੇਟਸ ਕੋਡ ਅਤੇ ਗਲਤੀ ਸੰਭਾਲਣ ਲਾਗੂ ਕਰਦਾ ਹੈ** HTTPException ਨਾਲ
-- **ਸੰਰਚਿਤ ਲੌਗਿੰਗ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਮਾਨੀਟਰਿੰਗ ਅਤੇ ਡਿਬੱਗਿੰਗ ਲਈ
-- **ਸੇਵਾ ਸਥਿਤੀ ਦੀ ਨਿਗਰਾਨੀ ਲਈ ਹੈਲਥ ਚੈੱਕ ਐਂਡਪੌਇੰਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**
+**ਪ੍ਰੰਪਰਾਗਤ ਫਰੇਮਵਰਕਸ ਦੇ ਉਪਰ FastAPI ਦੇ ਮੁੱਖ ਫਾਇਦੇ:**  
+- **ਸਵੈਚਾਲਿਤ ਵੈਲੀਡੇਸ਼ਨ**: Pydantic ਮਾਡਲ ਪ੍ਰੋਸੈਸਿੰਗ ਤੋਂ ਪਹਿਲਾਂ ਡਾਟਾ ਦੀ ਅਖੰਡਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ  
+- **ਇੰਟਰਐਕਟਿਵ ਦਸਤਾਵੇਜ਼**: `/docs` 'ਤੇ ਜਾਓ ਸਵੈ-ਜਨਰੇਟ ਕੀਤੇ, ਟੈਸਟ ਕਰਨ ਯੋਗ API ਦਸਤਾਵੇਜ਼ ਲਈ  
+- **ਟਾਈਪ ਸੁਰੱਖਿਆ**: Python ਟਾਈਪ ਹਿੰਟਸ ਰਨਟਾਈਮ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦੇ ਹਨ ਅਤੇ ਕੋਡ ਗੁਣਵੱਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹਨ  
+- **Async ਸਹਾਇਤਾ**: ਕਈ AI ਬੇਨਤੀਆਂ ਨੂੰ ਇੱਕੋ ਸਮੇਂ ਸੰਭਾਲੋ ਬਿਨਾਂ ਰੁਕਣ ਦੇ  
+- **ਕਾਰਗੁਜ਼ਾਰੀ**: ਰੀਅਲ-ਟਾਈਮ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਬੇਨਤੀ ਪ੍ਰੋਸੈਸਿੰਗ ਵਿੱਚ ਕਾਫ਼ੀ ਤੇਜ਼  
 
-**ਪ੍ਰੰਪਰਾਗਤ ਫਰੇਮਵਰਕਸ ਦੇ ਉੱਤੇ FastAPI ਦੇ ਮੁੱਖ ਫਾਇਦੇ:**
-- **ਆਟੋਮੈਟਿਕ ਵੈਲੀਡੇਸ਼ਨ**: Pydantic ਮਾਡਲ ਡਾਟਾ ਦੀ ਸਹੀਤਾ ਨੂੰ ਪ੍ਰੋਸੈਸਿੰਗ ਤੋਂ ਪਹਿਲਾਂ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ
-- **ਇੰਟਰਐਕਟਿਵ ਡੌਕਸ**: `/docs` 'ਤੇ ਜਾਓ ਆਟੋ-ਜਨਰੇਟ ਕੀਤੇ, ਟੈਸਟ ਕਰਨ ਯੋਗ API ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਲਈ
-- **ਟਾਈਪ ਸੇਫਟੀ**: Python ਟਾਈਪ ਹਿੰਟਸ ਰਨਟਾਈਮ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦੇ ਹਨ ਅਤੇ ਕੋਡ ਦੀ ਗੁਣਵੱਤਾ ਨੂੰ ਸੁਧਾਰਦੇ ਹਨ
-- **async ਸਪੋਰਟ**: ਕਈ AI ਬੇਨਤੀਆਂ ਨੂੰ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਸੰਭਾਲੋ ਬਿਨਾਂ ਰੁਕਾਵਟ ਦੇ
-- **ਪ੍ਰਦਰਸ਼ਨ**: ਰੀਅਲ-ਟਾਈਮ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਬੇਨਤੀ ਪ੍ਰੋਸੈਸਿੰਗ ਨੂੰ ਕਾਫ਼ੀ ਤੇਜ਼ੀ ਨਾਲ ਸੁਧਾਰਦਾ ਹੈ
+### CORS ਨੂੰ ਸਮਝਣਾ: ਵੈੱਬ ਦਾ ਸੁਰੱਖਿਆ ਗਾਰਡ  
 
-### CORS ਨੂੰ ਸਮਝਣਾ: ਵੈਬ ਦੀ ਸੁਰੱਖਿਆ ਗਾਰਡ
+CORS (Cross-Origin Resource Sharing) ਇੱਕ ਸੁਰੱਖਿਆ ਗਾਰਡ ਵਰਗਾ ਹੈ ਜੋ ਜਾਂਚਦਾ ਹੈ ਕਿ ਕੀ ਵਿਜ਼ਟਰਾਂ ਨੂੰ ਅੰਦਰ ਆਉਣ ਦੀ ਆਗਿਆ ਹੈ। ਆਓ ਸਮਝੀਏ ਕਿ ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ ਅਤੇ ਇਹ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ।  
 
-CORS (Cross-Origin Resource Sharing) ਇੱਕ ਸੁਰੱਖਿਆ ਗਾਰਡ ਵਾਂਗ ਹੈ ਜੋ ਜਾਂਚਦਾ ਹੈ ਕਿ ਕੀ ਵਿਜ਼ਟਰਾਂ ਨੂੰ ਇਮਾਰਤ ਵਿੱਚ ਦਾਖਲ ਹੋਣ ਦੀ ਆਗਿਆ ਹੈ। ਆਓ ਸਮਝੀਏ ਕਿ ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ ਅਤੇ ਇਹ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ।
+#### CORS ਕੀ ਹੈ ਅਤੇ ਇਹ ਕਿਉਂ ਮੌਜੂਦ ਹੈ?  
 
-#### CORS ਕੀ ਹੈ ਅਤੇ ਇਹ ਕਿਉਂ ਮੌਜੂਦ ਹੈ?
+**ਸਮੱਸਿਆ**: ਕਲਪਨਾ ਕਰੋ ਕਿ ਜੇ ਕੋਈ ਵੀ ਵੈੱਬਸਾਈਟ ਤੁਹਾਡੇ ਬੈਂਕ ਦੀ ਵੈੱਬਸਾਈਟ ਨੂੰ ਤੁਹਾਡੇ ਬਿਨਾਂ ਇਜਾਜ਼ਤ ਦੇ ਬੇਨਤੀਆਂ ਕਰ ਸਕਦੀ। ਇਹ ਇੱਕ ਸੁਰੱਖਿਆ ਦੁਰਘਟਨਾ ਹੋਵੇਗੀ! ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ "Same-Origin Policy" ਰਾਹੀਂ ਡਿਫਾਲਟ ਦੁਆਰਾ ਰੋਕਦੇ ਹਨ।  
 
-**ਸਮੱਸਿਆ**: ਸੋਚੋ ਕਿ ਜੇ ਕੋਈ ਵੀ ਵੈਬਸਾਈਟ ਤੁਹਾਡੇ ਬੈਂਕ ਦੀ ਵੈਬਸਾਈਟ 'ਤੇ ਤੁਹਾਡੇ ਬਿਨਾਂ ਇਜਾਜ਼ਤ ਦੇ ਬੇਨਤੀ ਕਰ ਸਕਦੀ ਹੈ। ਇਹ ਇੱਕ ਸੁਰੱਖਿਆ ਦਾ ਦੁਖਦਾਈ ਸਪਨਾ ਹੁੰਦਾ! ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ "ਸੇਮ-ਓਰਿਜਨ ਪਾਲਿਸੀ" ਰਾਹੀਂ ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ ਰੋਕਦੇ ਹਨ।
+**Same-Origin Policy**: ਬ੍ਰਾਊਜ਼ਰ ਸਿਰਫ ਉਹ ਵੈੱਬ ਪੇਜਾਂ ਨੂੰ ਬੇਨਤੀਆਂ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ ਜੋ ਉਸੇ ਡੋਮੇਨ, ਪੋਰਟ, ਅਤੇ ਪ੍ਰੋਟੋਕੋਲ ਤੋਂ ਲੋਡ ਕੀਤੇ ਗਏ ਸਨ।  
 
-**ਸੇਮ-ਓਰਿਜਨ ਪਾਲਿਸੀ**: ਬ੍ਰਾਊਜ਼ਰ ਸਿਰਫ਼ ਉਹ ਵੈਬ ਪੇਜਾਂ ਨੂੰ ਬੇਨਤੀਆਂ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ ਜੋ ਉਸੇ ਡੋਮੇਨ, ਪੋਰਟ, ਅਤੇ ਪ੍ਰੋਟੋਕੋਲ ਤੋਂ ਲੋਡ ਕੀਤੇ ਗਏ ਹਨ।
+**ਅਸਲ-ਦੁਨੀਆ ਦੀ ਉਦਾਹਰਨ**: ਇਹ ਅਪਾਰਟਮੈਂਟ ਬਿਲਡਿੰਗ ਸੁਰੱਖਿਆ ਵਰਗਾ ਹੈ – ਸਿਰਫ਼ ਰਹਿਣ ਵਾਲੇ (ਉਹੀ ਮੂਲ) ਡਿਫਾਲਟ ਦੁਆਰਾ ਬਿਲਡਿੰਗ ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦੇ ਹਨ। ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਦੋਸਤ (ਵੱਖਰੇ ਮੂਲ) ਨੂੰ ਮਿਲਣ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਸੁਰੱਖਿਆ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦੱਸਣਾ ਪਵੇਗਾ ਕਿ ਇਹ ਠੀਕ ਹੈ।  
 
-**ਅਸਲ-ਜਗਤ ਦੀ ਉਦਾਹਰਣ**: ਇਹ ਇੱਕ ਅਪਾਰਟਮੈਂਟ ਇਮਾਰਤ ਦੀ ਸੁਰੱਖਿਆ ਵਾਂਗ ਹੈ – ਸਿਰਫ਼ ਰਹਿਣ ਵਾਲੇ (ਸੇਮ ਓਰਿਜਨ) ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ ਇਮਾਰਤ ਵਿੱਚ ਦਾਖਲ ਹੋ ਸਕਦੇ ਹਨ। ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਦੋਸਤ (ਵੱਖਰੇ ਓਰਿਜਨ) ਨੂੰ ਬੁਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਸੁਰੱਖਿਆ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦੱਸਣਾ ਪਵੇਗਾ ਕਿ ਇਹ ਠੀਕ ਹੈ।
+#### ਤੁਹਾਡੇ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਵਿੱਚ CORS  
 
-#### ਤੁਹਾਡੇ ਵਿਕਾਸ ਦੇ ਮਾਹੌਲ ਵਿੱਚ CORS
+ਵਿਕਾਸ ਦੌਰਾਨ, ਤੁਹਾਡਾ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਵੱਖਰੇ ਪੋਰਟਾਂ 'ਤੇ ਚੱਲਦੇ ਹਨ:  
+- ਫਰੰਟਐਂਡ: `http://localhost:3000` (ਜਾਂ file:// ਜੇ HTML ਨੂੰ ਸਿੱਧੇ ਖੋਲ੍ਹਦੇ ਹੋ)  
+- ਬੈਕਐਂਡ: `http://localhost:5000`  
 
-ਵਿਕਾਸ ਦੌਰਾਨ, ਤੁਹਾਡਾ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਵੱਖਰੇ ਪੋਰਟਾਂ 'ਤੇ ਚੱਲਦੇ ਹਨ:
-- ਫਰੰਟਐਂਡ: `http://localhost:3000` (ਜਾਂ file:// ਜੇ HTML ਨੂੰ ਸਿੱਧਾ ਖੋਲ੍ਹਿਆ ਜਾਵੇ)
-- ਬੈਕਐਂਡ: `http://localhost:5000`
-
-ਇਹ "ਵੱਖਰੇ ਓਰਿਜਨ" ਮੰਨੇ ਜਾਂਦੇ ਹਨ ਭਾਵੇਂ ਇਹ ਇੱਕੋ ਕੰਪਿਊਟਰ 'ਤੇ ਹਨ!
+ਇਹ "ਵੱਖਰੇ ਮੂਲ" ਮੰਨੇ ਜਾਂਦੇ ਹਨ ਭਾਵੇਂ ਕਿ ਇਹ ਇੱਕੋ ਕੰਪਿਊਟਰ 'ਤੇ ਹਨ!  
 
 ```python
 from fastapi.middleware.cors import CORSMiddleware
@@ -382,13 +546,13 @@ from fastapi.middleware.cors import CORSMiddleware
 app = FastAPI(__name__)
 CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"
 ```
+  
+**ਅਮਲ ਵਿੱਚ CORS ਸੰਰਚਨਾ ਕੀ ਕਰਦੀ ਹੈ:**  
+- **ਵਿਸ਼ੇਸ਼ HTTP ਹੈਡਰਜ਼ ਸ਼ਾਮਲ ਕਰਦੀ ਹੈ** API ਜਵਾਬਾਂ ਵਿੱਚ ਜੋ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਦੱਸਦੇ ਹਨ "ਇਹ ਕ੍ਰਾਸ-ਮੂਲ ਬੇਨਤੀ ਦੀ ਆਗਿਆ ਹੈ"  
+- **"ਪ੍ਰੀਫਲਾਈਟ" ਬੇਨਤੀਆਂ ਨੂੰ ਸੰਭਾਲਦੀ ਹੈ** (ਬ੍ਰਾਊਜ਼ਰ ਕਈ ਵਾਰ ਅਸਲ ਬੇਨਤੀ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਆਗਿਆ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹਨ)  
+- **ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ "CORS ਨੀਤੀ ਦੁਆਰਾ ਰੋਕਿਆ ਗਿਆ" ਗਲਤੀ** ਨੂੰ ਰੋਕਦੀ ਹੈ  
 
-**ਅਮਲ ਵਿੱਚ CORS ਸੰਰਚਨਾ ਕੀ ਕਰਦੀ ਹੈ:**
-- **ਖਾਸ HTTP ਹੈਡਰ ਸ਼ਾਮਲ ਕਰਦੀ ਹੈ** API ਜਵਾਬਾਂ ਵਿੱਚ ਜੋ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਦੱਸਦੇ ਹਨ "ਇਹ ਕ੍ਰਾਸ-ਓਰਿਜਨ ਬੇਨਤੀ ਮਨਜ਼ੂਰ ਹੈ"
-- **"ਪ੍ਰੀਫਲਾਈਟ" ਬੇਨਤੀਆਂ ਨੂੰ ਸੰਭਾਲਦੀ ਹੈ** (ਕਈ ਵਾਰ ਬ੍ਰਾਊਜ਼ਰ ਅਸਲ ਬੇਨਤੀ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਇਜਾਜ਼ਤ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹਨ)
-- **ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ "CORS ਪਾਲਿਸੀ ਦੁਆਰਾ ਰੋਕਿਆ ਗਿਆ" ਗਲਤੀ** ਨੂੰ ਰੋਕਦੀ ਹੈ
-
-#### CORS ਸੁਰੱਖਿਆ: ਵਿਕਾਸ ਵਿਰੁੱਧ ਉਤਪਾਦਨ
+#### CORS ਸੁਰੱਖਿਆ: ਵਿਕਾਸ ਬਨਾਮ ਉਤਪਾਦਨ  
 
 ```python
 # 🚨 Development: Allows ALL origins (convenient but insecure)
@@ -403,235 +567,579 @@ if app.debug:  # Development mode
 else:  # Production mode
     CORS(app, origins=["https://yourdomain.com"])
 ```
+  
+**ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ**: ਵਿਕਾਸ ਵਿੱਚ, `CORS(app)` ਤੁਹਾਡੇ ਸਾਹਮਣੇ ਦਰਵਾਜ਼ਾ ਖੁੱਲ੍ਹਾ ਛੱਡਣ ਵਰਗਾ ਹੈ – ਸੁਵਿਧਾਜਨਕ ਪਰ ਸੁਰੱਖਿਅਤ ਨਹੀਂ। ਉਤਪਾਦਨ ਵਿੱਚ, ਤੁਸੀਂ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦੱਸਣਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਕਿਹੜੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਤੁਹਾਡੇ API ਨਾਲ ਗੱਲਬਾਤ ਕਰ ਸਕਦੀਆਂ ਹਨ।  
 
-**ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ**: ਵਿਕਾਸ ਵਿੱਚ, `CORS(app)` ਤੁਹਾਡੇ ਸਾਹਮਣੇ ਦਰਵਾਜ਼ਾ ਖੁੱਲ੍ਹਾ ਛੱਡਣ ਵਾਂਗ ਹੈ – ਸੁਵਿਧਾਜਨਕ ਪਰ ਸੁਰੱਖਿਅਤ ਨਹੀਂ। ਉਤਪਾਦਨ ਵਿੱਚ, ਤੁਸੀਂ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦੱਸਣਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਕਿਹੜੀਆਂ ਵੈਬਸਾਈਟਾਂ ਤੁਹਾਡੇ API ਨਾਲ ਗੱਲਬਾਤ ਕਰ ਸਕਦੀਆਂ ਹਨ।
+#### ਆਮ CORS ਸਥਿਤੀਆਂ ਅਤੇ ਹੱਲ  
 
-#### ਆਮ CORS ਸਥਿਤੀਆਂ ਅਤੇ ਹੱਲ
+| ਸਥਿਤੀ | ਸਮੱਸਿਆ | ਹੱਲ |  
+|----------|---------|----------|  
+| **ਸਥਾਨਕ ਵਿਕਾਸ** | ਫਰੰਟਐਂਡ ਬੈਕਐਂਡ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦਾ | FastAPI ਵਿੱਚ CORSMiddleware ਸ਼ਾਮਲ ਕਰੋ |  
+| **GitHub Pages + Heroku** | ਤੈਨਾਤ ਫਰੰਟਐਂਡ API ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦਾ | ਆਪਣੇ GitHub Pages URL ਨੂੰ CORS ਮੂਲਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ |  
+| **ਕਸਟਮ ਡੋਮੇਨ** | ਉਤਪਾਦਨ ਵਿੱਚ CORS ਗਲਤੀਆਂ | CORS ਮੂਲਾਂ ਨੂੰ ਆਪਣੇ ਡੋਮੇਨ ਨਾਲ ਅਪਡੇਟ ਕਰੋ |  
+| **ਮੋਬਾਈਲ ਐਪ** | ਐਪ ਵੈੱਬ API
+ਹੁਣ ਆਉਂਦਾ ਹੈ ਰੋਮਾਂਚਕ ਪਲ - ਆਪਣਾ FastAPI ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰਨਾ ਅਤੇ ਆਪਣੀ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਨੂੰ ਜਿੰਦਾ ਦੇਖਣਾ! FastAPI Uvicorn ਵਰਤਦਾ ਹੈ, ਜੋ ਕਿ ਇੱਕ ਬਿਜਲੀ ਦੀ ਗਤੀ ਵਾਲਾ ASGI ਸਰਵਰ ਹੈ, ਜੋ ਖਾਸ ਤੌਰ 'ਤੇ async Python ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ।
 
-| ਸਥਿਤੀ | ਸਮੱਸਿਆ | ਹੱਲ |
-|----------|---------|----------|
-| **ਸਥਾਨਕ ਵਿਕਾਸ** | ਫਰੰਟਐਂਡ ਬੈਕਐਂਡ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦਾ | FastAPI ਵਿੱਚ CORSMiddleware ਸ਼ਾਮਲ ਕਰੋ |
-| **GitHub Pages + Heroku** | ਡਿਪਲੌਇਡ ਫਰੰਟਐਂਡ API ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦਾ | ਆਪਣੇ GitHub Pages URL ਨੂੰ CORS ਓਰਿਜਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ |
-| **ਕਸਟਮ ਡੋਮੇਨ** | ਉਤਪਾਦਨ ਵਿੱਚ CORS ਗਲਤੀਆਂ | CORS ਓਰਿਜਨ ਨੂੰ ਆਪਣੇ ਡੋਮੇਨ ਨਾਲ ਅਪਡੇਟ ਕਰੋ |
-| **ਮੋਬਾਈਲ ਐਪ** | ਐਪ ਵੈਬ API ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦੀ | ਆਪਣੇ ਐਪ ਦੇ ਡੋਮੇਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ ਜਾਂ `*` ਦੀ ਸਾਵਧਾਨੀ ਨਾਲ ਵਰਤੋਂ ਕਰੋ |
+#### FastAPI ਸਰਵਰ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝਣਾ
 
-**ਪ੍ਰੋ ਟਿਪ**: ਤੁਸੀਂ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਵਿੱਚ ਨੈਟਵਰਕ ਟੈਬ ਦੇ ਹੇਠਾਂ CORS ਹੈਡਰਾਂ ਦੀ ਜਾਂਚ ਕਰ ਸਕਦੇ ਹੋ। ਜਵਾਬ ਵਿੱਚ `Access-Control-Allow-Origin` ਵਰਗੇ ਹੈਡਰਾਂ ਨੂੰ ਵੇਖੋ।
-
-### ਗਲਤੀ ਸੰਭਾਲਣਾ ਅਤੇ ਵੈਲੀਡੇਸ਼ਨ
-
-ਨੋਟ ਕਰੋ ਕਿ ਕਿਵੇਂ ਸਾਡੀ API ਵਿੱਚ ਸਹੀ ਗਲਤੀ ਸੰਭਾਲਣ ਸ਼ਾਮਲ ਹੈ:
+```bash
+# Method 1: Direct Python execution (includes auto-reload)
+python api.py
 
-```python
-# Validate that we received a message
-if not message:
-    return jsonify({"error": "Message field is required"}), 400
+# Method 2: Using Uvicorn directly (more control)
+uvicorn api:app --host 0.0.0.0 --port 5000 --reload
 ```
 
-**ਮੁੱਖ ਵੈਲੀਡੇਸ਼ਨ ਸਿਧਾਂਤ:**
-- **ਲੋੜੀਂਦੇ ਖੇਤਰਾਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ** ਬੇਨਤੀਆਂ ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ
-- **ਮਹੱਤਵਪੂਰਨ ਗਲਤੀ ਸੁਨੇਹੇ JSON ਫਾਰਮੈਟ ਵਿੱਚ ਵਾਪਸ ਕਰਦਾ ਹੈ**
-- **ਸਹੀ HTTP ਸਟੇਟਸ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ** (ਖਰਾਬ ਬੇਨਤੀਆਂ ਲਈ 400)
-- **ਸਪਸ਼ਟ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਫਰੰਟਐਂਡ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਡਿਬੱਗ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ
+ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਕਮਾਂਡ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ ਪਿੱਛੇ ਕੀ ਹੁੰਦਾ ਹੈ:
 
-## ਆਪਣਾ ਬੈਕਐਂਡ ਸੈਟਅੱਪ ਕਰਨਾ ਅਤੇ ਚਲਾਉਣਾ
+**1. Python ਤੁਹਾਡੀ FastAPI ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਲੋਡ ਕਰਦਾ ਹੈ**:
+- ਸਾਰੀਆਂ ਲੋੜੀਂਦੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ (FastAPI, Pydantic, OpenAI, ਆਦਿ) ਨੂੰ ਇੰਪੋਰਟ ਕਰਦਾ ਹੈ
+- ਤੁਹਾਡੇ `.env` ਫਾਇਲ ਤੋਂ ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਲੋਡ ਕਰਦਾ ਹੈ
+- FastAPI ਐਪਲੀਕੇਸ਼ਨ ਇੰਸਟੈਂਸ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਆਟੋਮੈਟਿਕ ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਹੁੰਦੀ ਹੈ
 
-ਹੁਣ ਜਦੋਂ ਸਾਡੀ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਅਤੇ FastAPI ਸਰਵਰ ਤਿਆਰ ਹੈ, ਆਓ ਸਭ ਕੁਝ ਚਲਾਉਣ ਲਈ ਸੈਟਅੱਪ ਕਰੀਏ। ਸੈਟਅੱਪ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ Python dependencies ਨੂੰ ਇੰਸਟਾਲ ਕਰਨਾ, ਇਨਵਾਇਰਮੈਂਟ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਸੰਰਚਿਤ ਕਰਨਾ, ਅਤੇ ਆਪਣਾ ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ।
+**2. Uvicorn ASGI ਸਰਵਰ ਨੂੰ ਕਨਫਿਗਰ ਕਰਦਾ ਹੈ**:
+- async ਰਿਕਵੈਸਟ ਹੈਂਡਲਿੰਗ ਸਮਰੱਥਾ ਨਾਲ ਪੋਰਟ 5000 ਨੂੰ ਬਾਈਂਡ ਕਰਦਾ ਹੈ
+- ਆਟੋਮੈਟਿਕ ਵੈਲੀਡੇਸ਼ਨ ਨਾਲ ਰਿਕਵੈਸਟ ਰੂਟਿੰਗ ਸੈਟ ਕਰਦਾ ਹੈ
+- ਵਿਕਾਸ ਲਈ ਹੌਟ ਰੀਲੋਡ ਨੂੰ ਯੋਗ ਕਰਦਾ ਹੈ (ਫਾਇਲ ਬਦਲਣ 'ਤੇ ਰੀਸਟਾਰਟ ਕਰਦਾ ਹੈ)
+- ਇੰਟਰਐਕਟਿਵ API ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਜਨਰੇਟ ਕਰਦਾ ਹੈ
 
-### Python ਇਨਵਾਇਰਮੈਂਟ ਸੈਟਅੱਪ
+**3. ਸਰਵਰ ਸੁਣਨਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ**:
+- ਤੁਹਾਡੇ ਟਰਮੀਨਲ ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇਗਾ: `INFO: Uvicorn running on http://0.0.0.0:5000`
+- ਸਰਵਰ ਕਈ ਸਮਕਾਲੀ AI ਰਿਕਵੈਸਟਾਂ ਨੂੰ ਹੈਂਡਲ ਕਰ ਸਕਦਾ ਹੈ
+- ਤੁਹਾਡਾ API `http://localhost:5000/docs` 'ਤੇ ਆਟੋਮੈਟਿਕ ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਨਾਲ ਤਿਆਰ ਹੈ
 
-ਆਪਣੇ Python ਵਿਕਾਸ ਦੇ ਮਾਹੌਲ ਨੂੰ ਸੈਟਅੱਪ ਕਰੀਏ। ਵਰਚੁਅਲ ਇਨਵਾਇਰਮੈਂਟਸ ਮੈਨਹੈਟਨ ਪ੍ਰੋਜੈਕਟ ਦੇ compartmentalized ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਵਾਂਗ ਹਨ – ਹਰ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਆਪਣਾ ਅਲੱਗ ਜਗ੍ਹਾ ਮਿਲਦੀ ਹੈ ਜਿਸ ਵਿੱਚ ਖਾਸ ਟੂਲ ਅਤੇ dependencies ਹੁੰਦੇ ਹਨ, ਵੱਖ-ਵੱਖ ਪ੍ਰੋਜੈਕਟਾਂ ਦੇ ਵਿਚਕਾਰ ਟਕਰਾਅ ਨੂੰ ਰੋਕਦੇ ਹਨ।
+#### ਜਦੋਂ ਸਭ ਕੁਝ ਸਹੀ ਕੰਮ ਕਰਦਾ ਹੈ ਤਾਂ ਤੁਹਾਨੂੰ ਕੀ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ
 
 ```bash
-# Navigate to your backend directory
-cd backend
+$ python api.py
+INFO:     Will watch for changes in these directories: ['/your/project/path']
+INFO:     Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
+INFO:     Started reloader process [12345] using WatchFiles
+INFO:     Started server process [12346]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+```
 
-# Create a virtual environment (like creating a clean room for your project)
-python -m venv venv
+**FastAPI ਆਉਟਪੁੱਟ ਨੂੰ ਸਮਝਣਾ**:
+- **ਬਦਲਾਅ ਦੇਖੇਗਾ**: ਵਿਕਾਸ ਲਈ ਆਟੋ-ਰੀਲੋਡ ਯੋਗ ਹੈ
+- **Uvicorn ਚੱਲ ਰਿਹਾ ਹੈ**: ਉੱਚ-ਪ੍ਰਦਰਸ਼ਨ ASGI ਸਰਵਰ ਐਕਟਿਵ ਹੈ
+- **ਰੀਲੋਡਰ ਪ੍ਰਕਿਰਿਆ ਸ਼ੁਰੂ ਕੀਤੀ**: ਆਟੋਮੈਟਿਕ ਰੀਸਟਾਰਟ ਲਈ ਫਾਇਲ ਵਾਚਰ
+- **ਐਪਲੀਕੇਸ਼ਨ ਸ਼ੁਰੂਆਤ ਪੂਰੀ**: FastAPI ਐਪ ਸਫਲਤਾਪੂਰਵਕ ਸ਼ੁਰੂ ਹੋਇਆ
+- **ਇੰਟਰਐਕਟਿਵ ਡੌਕਸ ਉਪਲਬਧ**: ਆਟੋਮੈਟਿਕ API ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਲਈ `/docs` 'ਤੇ ਜਾਓ
 
-# Activate it (Linux/Mac)
-source ./venv/bin/activate
+#### ਆਪਣਾ FastAPI ਟੈਸਟ ਕਰਨਾ: ਕਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਤਰੀਕੇ
 
-# On Windows, use:
-# venv\Scripts\activate
+FastAPI ਤੁਹਾਡੇ API ਨੂੰ ਟੈਸਟ ਕਰਨ ਦੇ ਕਈ ਸਹੂਲਤਮੰਦ ਤਰੀਕੇ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਆਟੋਮੈਟਿਕ ਇੰਟਰਐਕਟਿਵ ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਸ਼ਾਮਲ ਹੈ:
 
-# Install the good stuff
-pip install openai fastapi uvicorn python-dotenv
-```
+**ਤਰੀਕਾ 1: ਇੰਟਰਐਕਟਿਵ API ਡੌਕੂਮੈਂਟੇਸ਼ਨ (ਸਿਫਾਰਸ਼ ਕੀਤੀ ਗਈ)**  
+1. ਆਪਣਾ ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ ਅਤੇ `http://localhost:5000/docs` 'ਤੇ ਜਾਓ  
+2. ਤੁਹਾਨੂੰ Swagger UI ਵਿੱਚ ਤੁਹਾਡੇ ਸਾਰੇ ਐਂਡਪੌਇੰਟਸ ਡੌਕੂਮੈਂਟ ਕੀਤੇ ਹੋਏ ਦਿਖਾਈ ਦੇਣਗੇ  
+3. `/hello` 'ਤੇ ਕਲਿਕ ਕਰੋ → "Try it out" → ਇੱਕ ਟੈਸਟ ਸੁਨੇਹਾ ਦਰਜ ਕਰੋ → "Execute"  
+4. ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਹੀ ਫਾਰਮੈਟਿੰਗ ਨਾਲ ਜਵਾਬ ਦੇਖੋ  
 
-**ਅਸੀਂ ਹੁਣੇ ਕੀ ਕੀਤਾ:**
-- **ਆਪਣਾ ਖੁਦ ਦਾ ਛੋਟਾ Python ਬੁਬਲ ਬਣਾਇਆ** ਜਿੱਥੇ ਅਸੀਂ ਪੈਕੇਜਾਂ ਨੂੰ ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹਾਂ ਬਿਨਾਂ ਕਿਸੇ ਹੋਰ ਚੀਜ਼ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤੇ
-- **ਇਸਨੂੰ ਐਕਟੀਵੇਟ ਕੀਤਾ** ਤਾਂ ਕਿ ਸਾਡਾ ਟਰਮੀਨਲ ਜਾਣੇ ਕਿ ਇਸ ਖਾਸ ਮਾਹੌਲ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ
-- **ਆਵਸ਼ਕ ਚੀਜ਼ਾਂ ਨੂੰ ਇੰਸਟਾਲ ਕੀਤਾ**: OpenAI AI ਮੈਜਿਕ ਲਈ, FastAPI ਵੈਬ API ਲਈ, Uvicorn ਇਸਨੂੰ ਚਲਾਉਣ ਲਈ, ਅਤੇ python-dotenv ਸੁਰੱਖਿਅਤ ਸਾਧਨਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ
+**ਤਰੀਕਾ 2: ਬੇਸਿਕ ਬ੍ਰਾਊਜ਼ਰ ਟੈਸਟ**  
+1. ਰੂਟ ਐਂਡਪੌਇੰਟ ਲਈ `http://localhost:5000` 'ਤੇ ਜਾਓ  
+2. ਸਰਵਰ ਦੀ ਸਿਹਤ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ `http://localhost:5000/health` 'ਤੇ ਜਾਓ  
+3. ਇਹ ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ FastAPI ਸਰਵਰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਚੱਲ ਰਿਹਾ ਹੈ  
 
-**ਮੁੱਖ dependencies ਦੀ ਵਿਆਖਿਆ:**
-- **FastAPI**: ਆਧੁਨਿਕ, ਤੇਜ਼ ਵੈਬ ਫਰੇਮਵਰਕ ਆਟੋਮੈਟਿਕ API ਡੌਕੂਮੈਂਟੇਸ਼ਨ ਨਾਲ
-- **Uvicorn**: ਬਿਜਲੀ ਦੀ ਗਤੀ ਨਾਲ ASGI ਸਰਵਰ ਜੋ FastAPI ਐਪਲੀਕੇਸ਼ਨ ਚਲਾਉਂਦਾ ਹੈ
-- **OpenAI**: GitHub ਮਾਡਲਾਂ ਅਤੇ OpenAI API ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਲਈ ਅਧਿਕਾਰਤ ਲਾਇਬ੍ਰੇਰੀ
-- **python-dotenv**: .env ਫਾਈਲਾਂ ਤੋਂ ਸੁਰੱਖਿਅਤ ਇਨਵਾਇਰਮੈਂਟ ਵੈਰੀਏਬਲ ਲੋਡ ਕਰਨਾ
+**ਤਰੀਕਾ 3: ਕਮਾਂਡ ਲਾਈਨ ਟੈਸਟ (ਅਡਵਾਂਸਡ)**  
+```bash
+# Test with curl (if available)
+curl -X POST http://localhost:5000/hello \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello AI!"}'
 
-### ਇਨਵਾਇਰਮੈਂਟ ਸੰਰਚਨਾ: ਸੁਰੱਖਿਅਤ ਸਾਧਨਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣਾ
+# Expected response:
+# {"response": "Hello! I'm your AI assistant. How can I help you today?"}
+```
+  
+**ਤਰੀਕਾ 4: Python ਟੈਸਟ ਸਕ੍ਰਿਪਟ**  
+```python
+# test_api.py - Create this file to test your API
+import requests
+import json
+
+# Test the API endpoint
+url = "http://localhost:5000/hello"
+data = {"message": "Tell me a joke about programming"}
+
+response = requests.post(url, json=data)
+if response.status_code == 200:
+    result = response.json()
+    print("AI Response:", result['response'])
+else:
+    print("Error:", response.status_code, response.text)
+```
+  
 
-API ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਸਬਕ ਬਾਰੇ ਗੱਲ ਕਰੀਏ: ਆਪਣੇ ਸਾਧਨਾਂ ਨੂੰ ਸੱਚਮੁੱਚ ਸੁਰੱਖਿਅਤ ਕਿਵੇਂ ਰੱਖਣਾ।
-#### ਆਮ ਸਟਾਰਟਅਪ ਸਮੱਸਿਆਵਾਂ ਦਾ ਹੱਲ
+#### ਆਮ ਸ਼ੁਰੂਆਤੀ ਸਮੱਸਿਆਵਾਂ ਦਾ ਨਿਪਟਾਰਾ
 
-| ਗਲਤੀ ਦਾ ਸੁਨੇਹਾ | ਇਸਦਾ ਕੀ ਅਰਥ ਹੈ | ਇਸਨੂੰ ਕਿਵੇਂ ਠੀਕ ਕਰਨਾ ਹੈ |
-|----------------|----------------|-------------------------|
+| ਐਰਰ ਮੈਸੇਜ | ਇਸਦਾ ਕੀ ਅਰਥ ਹੈ | ਇਸਨੂੰ ਕਿਵੇਂ ਠੀਕ ਕਰਨਾ ਹੈ |
+|---------------|---------------|------------|
 | `ModuleNotFoundError: No module named 'fastapi'` | FastAPI ਇੰਸਟਾਲ ਨਹੀਂ ਹੈ | ਆਪਣੇ ਵਰਚੁਅਲ ਐਨਵਾਇਰਮੈਂਟ ਵਿੱਚ `pip install fastapi uvicorn` ਚਲਾਓ |
 | `ModuleNotFoundError: No module named 'uvicorn'` | ASGI ਸਰਵਰ ਇੰਸਟਾਲ ਨਹੀਂ ਹੈ | ਆਪਣੇ ਵਰਚੁਅਲ ਐਨਵਾਇਰਮੈਂਟ ਵਿੱਚ `pip install uvicorn` ਚਲਾਓ |
-| `KeyError: 'GITHUB_TOKEN'` | ਐਨਵਾਇਰਮੈਂਟ ਵੈਰੀਏਬਲ ਨਹੀਂ ਮਿਲਿਆ | ਆਪਣੀ `.env` ਫਾਈਲ ਅਤੇ `load_dotenv()` ਕਾਲ ਦੀ ਜਾਂਚ ਕਰੋ |
-| `Address already in use` | ਪੋਰਟ 5000 ਵਿਅਸਤ ਹੈ | ਹੋਰ ਪ੍ਰੋਸੈਸ ਨੂੰ ਮਾਰੋ ਜੋ ਪੋਰਟ 5000 ਵਰਤ ਰਹੇ ਹਨ ਜਾਂ ਪੋਰਟ ਬਦਲੋ |
-| `ValidationError` | ਰਿਕਵੈਸਟ ਡਾਟਾ Pydantic ਮਾਡਲ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ | ਆਪਣੀ ਰਿਕਵੈਸਟ ਫਾਰਮੈਟ ਦੀ ਜਾਂਚ ਕਰੋ ਕਿ ਇਹ ਉਮੀਦਵਾਰ ਸਕੀਮਾ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ |
-| `HTTPException 422` | ਅਪ੍ਰਕਿਰਿਆਸ਼ੀਲ ਇਕਾਈ | ਰਿਕਵੈਸਟ ਵੈਰੀਫਿਕੇਸ਼ਨ ਫੇਲ੍ਹ ਹੋਇਆ, `/docs` ਵਿੱਚ ਸਹੀ ਫਾਰਮੈਟ ਦੀ ਜਾਂਚ ਕਰੋ |
-| `OpenAI API error` | AI ਸੇਵਾ ਪ੍ਰਮਾਣਿਕਤਾ ਫੇਲ੍ਹ ਹੋਈ | ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡਾ GitHub ਟੋਕਨ ਸਹੀ ਹੈ ਅਤੇ ਇਸਦੇ ਕੋਲ ਸਹੀ ਅਧਿਕਾਰ ਹਨ |
+| `KeyError: 'GITHUB_TOKEN'` | ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ ਨਹੀਂ ਮਿਲਿਆ | ਆਪਣੀ `.env` ਫਾਇਲ ਅਤੇ `load_dotenv()` ਕਾਲ ਦੀ ਜਾਂਚ ਕਰੋ |
+| `Address already in use` | ਪੋਰਟ 5000 ਵਿਅਸਤ ਹੈ | ਪੋਰਟ 5000 ਵਰਤ ਰਹੀਆਂ ਹੋਰ ਪ੍ਰਕਿਰਿਆਵਾਂ ਨੂੰ ਮਾਰੋ ਜਾਂ ਪੋਰਟ ਬਦਲੋ |
+| `ValidationError` | ਰਿਕਵੈਸਟ ਡਾਟਾ Pydantic ਮਾਡਲ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ | ਆਪਣੀ ਰਿਕਵੈਸਟ ਫਾਰਮੈਟ ਦੀ ਜਾਂਚ ਕਰੋ ਕਿ ਕੀ ਇਹ ਉਮੀਦ ਕੀਤੇ ਸਕੀਮਾ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ |
+| `HTTPException 422` | ਅਪ੍ਰਕਿਰਿਆਸ਼ੀਲ ਇਕਾਈ | ਰਿਕਵੈਸਟ ਵੈਲੀਡੇਸ਼ਨ ਫੇਲ੍ਹ ਹੋਇਆ, ਸਹੀ ਫਾਰਮੈਟ ਲਈ `/docs` ਦੀ ਜਾਂਚ ਕਰੋ |
+| `OpenAI API error` | AI ਸੇਵਾ ਪ੍ਰਮਾਣਿਕਤਾ ਫੇਲ੍ਹ | ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡਾ GitHub ਟੋਕਨ ਸਹੀ ਹੈ ਅਤੇ ਇਸਦੇ ਕੋਲ ਸਹੀ ਅਧਿਕਾਰ ਹਨ |
 
-#### ਵਿਕਾਸ ਦੇ ਸਰਵੋਤਮ ਅਭਿਆਸ
+#### ਵਿਕਾਸ ਲਈ ਵਧੀਆ ਅਭਿਆਸ
 
-**ਹੌਟ ਰੀਲੋਡਿੰਗ**: FastAPI ਨਾਲ Uvicorn ਤੁਹਾਡੇ Python ਫਾਈਲਾਂ ਵਿੱਚ ਬਦਲਾਅ ਸੇਵ ਕਰਨ 'ਤੇ ਆਟੋਮੈਟਿਕ ਰੀਲੋਡਿੰਗ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣਾ ਕੋਡ ਤੁਰੰਤ ਬਦਲ ਸਕਦੇ ਹੋ ਅਤੇ ਟੈਸਟ ਕਰ ਸਕਦੇ ਹੋ ਬਿਨਾਂ ਹੱਥੋਂ ਰੀਸਟਾਰਟ ਕਰਨ ਦੇ।
+**ਹੌਟ ਰੀਲੋਡਿੰਗ**: FastAPI Uvicorn ਨਾਲ ਆਟੋਮੈਟਿਕ ਰੀਲੋਡਿੰਗ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ Python ਫਾਇਲਾਂ ਵਿੱਚ ਬਦਲਾਅ ਸੇਵ ਕਰਦੇ ਹੋ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣਾ ਕੋਡ ਬਦਲ ਸਕਦੇ ਹੋ ਅਤੇ ਬਿਨਾਂ ਹੱਥੋਂ ਰੀਸਟਾਰਟ ਕੀਤੇ ਤੁਰੰਤ ਟੈਸਟ ਕਰ ਸਕਦੇ ਹੋ।
 
-**ਡਿਵੈਲਪਮੈਂਟ ਲਈ ਲੌਗਿੰਗ**: ਸਮਝਣ ਲਈ ਲੌਗਿੰਗ ਸ਼ਾਮਲ ਕਰੋ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:
+```python
+# Enable hot reloading explicitly
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True enables hot reload
+```
+  
+**ਵਿਕਾਸ ਲਈ ਲੌਗਿੰਗ**: ਸਮਝਣ ਲਈ ਲੌਗਿੰਗ ਸ਼ਾਮਲ ਕਰੋ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:
 
-**ਲੌਗਿੰਗ ਕਿਵੇਂ ਮਦਦ ਕਰਦੀ ਹੈ**: ਵਿਕਾਸ ਦੌਰਾਨ, ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਕਿਹੜੀਆਂ ਰਿਕਵੈਸਟਾਂ ਆ ਰਹੀਆਂ ਹਨ, AI ਕਿਵੇਂ ਜਵਾਬ ਦੇ ਰਿਹਾ ਹੈ, ਅਤੇ ਗਲਤੀਆਂ ਕਿੱਥੇ ਹੋ ਰਹੀਆਂ ਹਨ। ਇਸ ਨਾਲ ਡਿਬੱਗਿੰਗ ਤੇਜ਼ ਹੋ ਜਾਂਦੀ ਹੈ।
+```python
+import logging
 
-### GitHub Codespaces ਲਈ ਸੰਰਚਨਾ: ਕਲਾਉਡ ਵਿਕਾਸ ਨੂੰ ਆਸਾਨ ਬਣਾਉਣਾ
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
 
-GitHub Codespaces ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਵਿਕਾਸ ਕੰਪਿਊਟਰ ਵਰਗਾ ਹੈ ਜੋ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਐਕਸੈਸ ਕਰ ਸਕਦੇ ਹੋ। ਜੇ ਤੁਸੀਂ Codespaces ਵਿੱਚ ਕੰਮ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਨੂੰ ਤੁਹਾਡੇ ਫਰੰਟਐਂਡ ਲਈ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਲਈ ਕੁਝ ਵਾਧੂ ਕਦਮ ਹਨ।
+@app.route("/hello", methods=["POST"])
+def hello():
+    data = request.get_json()
+    message = data.get("message", "")
+    
+    logger.info(f"Received message: {message}")
+    
+    if not message:
+        logger.warning("Empty message received")
+        return jsonify({"error": "Message field is required"}), 400
+    
+    try:
+        response = call_llm(message, "You are a helpful and friendly assistant.")
+        logger.info(f"AI response generated successfully")
+        return jsonify({"response": response})
+    except Exception as e:
+        logger.error(f"AI API error: {str(e)}")
+        return jsonify({"error": "AI service temporarily unavailable"}), 500
+```
+  
+**ਲੌਗਿੰਗ ਕਿਵੇਂ ਮਦਦ ਕਰਦਾ ਹੈ**: ਵਿਕਾਸ ਦੌਰਾਨ, ਤੁਸੀਂ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਕਿਹੜੀਆਂ ਰਿਕਵੈਸਟਾਂ ਆ ਰਹੀਆਂ ਹਨ, AI ਕੀ ਜਵਾਬ ਦੇ ਰਿਹਾ ਹੈ, ਅਤੇ ਕਿੱਥੇ ਗਲਤੀਆਂ ਹੋ ਰਹੀਆਂ ਹਨ। ਇਸ ਨਾਲ ਡੀਬੱਗਿੰਗ ਕਾਫ਼ੀ ਤੇਜ਼ ਹੋ ਜਾਂਦੀ ਹੈ।
+
+### GitHub Codespaces ਲਈ ਕਨਫਿਗਰ ਕਰਨਾ: ਕਲਾਉਡ ਵਿਕਾਸ ਨੂੰ ਆਸਾਨ ਬਣਾਉਣਾ
+
+GitHub Codespaces ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਵਿਕਾਸ ਕੰਪਿਊਟਰ ਵਰਗਾ ਹੈ ਜੋ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਐਕਸੈਸ ਕਰ ਸਕਦੇ ਹੋ। ਜੇ ਤੁਸੀਂ Codespaces ਵਿੱਚ ਕੰਮ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਨੂੰ ਤੁਹਾਡੇ ਫਰੰਟਐਂਡ ਲਈ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਲਈ ਕੁਝ ਵਾਧੂ ਕਦਮ ਲੈਣੇ ਪੈਣਗੇ।
 
 #### Codespaces ਨੈਟਵਰਕਿੰਗ ਨੂੰ ਸਮਝਣਾ
 
-ਇੱਕ ਸਥਾਨਕ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਵਿੱਚ, ਸਭ ਕੁਝ ਇੱਕੋ ਕੰਪਿਊਟਰ 'ਤੇ ਚਲਦਾ ਹੈ:
+ਇੱਕ ਸਥਾਨਕ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਵਿੱਚ, ਸਭ ਕੁਝ ਇੱਕੋ ਕੰਪਿਊਟਰ 'ਤੇ ਚੱਲਦਾ ਹੈ:
 - ਬੈਕਐਂਡ: `http://localhost:5000`
 - ਫਰੰਟਐਂਡ: `http://localhost:3000` (ਜਾਂ file://)
 
-Codespaces ਵਿੱਚ, ਤੁਹਾਡਾ ਵਿਕਾਸ ਵਾਤਾਵਰਣ GitHub ਦੇ ਸਰਵਰਾਂ 'ਤੇ ਚਲਦਾ ਹੈ, ਇਸ ਲਈ "localhost" ਦਾ ਅਰਥ ਵੱਖਰਾ ਹੈ। GitHub ਤੁਹਾਡੀ ਸੇਵਾਵਾਂ ਲਈ ਆਟੋਮੈਟਿਕ ਪਬਲਿਕ URLs ਬਣਾਉਂਦਾ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਨੂੰ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਸੰਰਚਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
+Codespaces ਵਿੱਚ, ਤੁਹਾਡਾ ਵਿਕਾਸ ਵਾਤਾਵਰਣ GitHub ਦੇ ਸਰਵਰਾਂ 'ਤੇ ਚੱਲਦਾ ਹੈ, ਇਸ ਲਈ "localhost" ਦਾ ਅਰਥ ਵੱਖਰਾ ਹੁੰਦਾ ਹੈ। GitHub ਆਪਣੇ ਆਪ ਤੁਹਾਡੇ ਸੇਵਾਵਾਂ ਲਈ ਜਨਤਕ URLs ਬਣਾਉਂਦਾ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਉਨ੍ਹਾਂ ਨੂੰ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਕਨਫਿਗਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
 
-#### Codespaces ਸੰਰਚਨਾ ਦੇ ਕਦਮ-ਦਰ-ਕਦਮ
+#### Codespaces ਕਨਫਿਗਰੇਸ਼ਨ ਲਈ ਕਦਮ-ਦਰ-ਕਦਮ
 
 **1. ਆਪਣਾ ਬੈਕਐਂਡ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ**:
-ਤੁਹਾਨੂੰ ਜਾਣੂ FastAPI/Uvicorn ਸਟਾਰਟਅਪ ਸੁਨੇਹਾ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ, ਪਰ ਧਿਆਨ ਦਿਓ ਕਿ ਇਹ Codespace ਵਾਤਾਵਰਣ ਵਿੱਚ ਚਲ ਰਿਹਾ ਹੈ।
+```bash
+cd backend
+python api.py
+```
+  
+ਤੁਹਾਨੂੰ ਜਾਣੂ FastAPI/Uvicorn ਸ਼ੁਰੂਆਤੀ ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ, ਪਰ ਧਿਆਨ ਦਿਓ ਕਿ ਇਹ Codespace ਵਾਤਾਵਰਣ ਵਿੱਚ ਚੱਲ ਰਿਹਾ ਹੈ।
 
-**2. ਪੋਰਟ ਵਿਖਣਯੋਗਤਾ ਸੰਰਚਿਤ ਕਰੋ**:
+**2. ਪੋਰਟ ਵਿਸ਼ੇਸ਼ਤਾ ਕਨਫਿਗਰ ਕਰੋ**:
 - VS Code ਦੇ ਹੇਠਲੇ ਪੈਨਲ ਵਿੱਚ "Ports" ਟੈਬ ਦੀ ਭਾਲ ਕਰੋ
-- ਪੋਰਟ 5000 ਨੂੰ ਸੂਚੀ ਵਿੱਚ ਲੱਭੋ
-- ਪੋਰਟ 5000 'ਤੇ ਰਾਈਟ-ਕਲਿੱਕ ਕਰੋ
+- ਸੂਚੀ ਵਿੱਚ ਪੋਰਟ 5000 ਨੂੰ ਲੱਭੋ
+- ਪੋਰਟ 5000 'ਤੇ ਰਾਈਟ-ਕਲਿਕ ਕਰੋ
 - "Port Visibility" → "Public" ਚੁਣੋ
 
-**ਇਸਨੂੰ ਪਬਲਿਕ ਕਿਉਂ ਬਣਾਓ?** ਡਿਫਾਲਟ ਰੂਪ ਵਿੱਚ, Codespace ਪੋਰਟ ਪ੍ਰਾਈਵੇਟ ਹੁੰਦੇ ਹਨ (ਸਿਰਫ ਤੁਹਾਡੇ ਲਈ ਪਹੁੰਚਯੋਗ)। ਇਸਨੂੰ ਪਬਲਿਕ ਬਣਾਉਣ ਨਾਲ ਤੁਹਾਡਾ ਫਰੰਟਐਂਡ (ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚਲਦਾ ਹੈ) ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਨਾਲ ਸੰਚਾਰ ਕਰ ਸਕਦਾ ਹੈ।
-
-**3. ਆਪਣਾ ਪਬਲਿਕ URL ਪ੍ਰਾਪਤ ਕਰੋ**:
-ਪੋਰਟ ਨੂੰ ਪਬਲਿਕ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਇੱਕ URL ਜਿਵੇਂ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ:
+**ਇਸਨੂੰ ਜਨਤਕ ਕਿਉਂ ਬਣਾਓ?** ਆਮ ਤੌਰ 'ਤੇ, Codespace ਪੋਰਟਾਂ ਨਿੱਜੀ ਹੁੰਦੀਆਂ ਹਨ (ਸਿਰਫ ਤੁਹਾਡੇ ਲਈ ਪਹੁੰਚਯੋਗ)। ਇਸਨੂੰ ਜਨਤਕ ਬਣਾਉਣ ਨਾਲ ਤੁਹਾਡਾ ਫਰੰਟਐਂਡ (ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ) ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਨਾਲ ਸੰਚਾਰ ਕਰ ਸਕਦਾ ਹੈ।
 
-**4. ਆਪਣੀ ਫਰੰਟਐਂਡ ਸੰਰਚਨਾ ਅਪਡੇਟ ਕਰੋ**:
+**3. ਆਪਣਾ ਜਨਤਕ URL ਪ੍ਰਾਪਤ ਕਰੋ**:
+ਪੋਰਟ ਨੂੰ ਜਨਤਕ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਇੱਕ URL ਜਿਵੇਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:
+```
+https://your-codespace-name-5000.app.github.dev
+```
+  
+**4. ਆਪਣੀ ਫਰੰਟਐਂਡ ਕਨਫਿਗਰੇਸ਼ਨ ਅਪਡੇਟ ਕਰੋ**:
+```javascript
+// In your frontend app.js, update the BASE_URL:
+this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
+```
+  
 
 #### Codespace URLs ਨੂੰ ਸਮਝਣਾ
 
-Codespace URLs ਇੱਕ ਪੇਸ਼ਕਸ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ:
-
+Codespace URLs ਇੱਕ ਪੇਸ਼ਕਸ਼ੀ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ:
+```
+https://[codespace-name]-[port].app.github.dev
+```
+  
 **ਇਸਨੂੰ ਤੋੜ ਕੇ ਸਮਝਣਾ**:
 - `codespace-name`: ਤੁਹਾਡੇ Codespace ਲਈ ਇੱਕ ਵਿਲੱਖਣ ਪਛਾਣਕਰਤਾ (ਆਮ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ ਯੂਜ਼ਰਨੇਮ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ)
-- `port`: ਪੋਰਟ ਨੰਬਰ ਜਿਸ 'ਤੇ ਤੁਹਾਡੀ ਸੇਵਾ ਚਲ ਰਹੀ ਹੈ (ਸਾਡੇ FastAPI ਐਪ ਲਈ 5000)
+- `port`: ਪੋਰਟ ਨੰਬਰ ਜਿਸ 'ਤੇ ਤੁਹਾਡੀ ਸੇਵਾ ਚੱਲ ਰਹੀ ਹੈ (ਸਾਡੇ FastAPI ਐਪ ਲਈ 5000)
 - `app.github.dev`: Codespace ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ GitHub ਦਾ ਡੋਮੇਨ
 
-#### ਆਪਣੀ Codespace ਸੰਰਚਨਾ ਦੀ ਜਾਂਚ ਕਰਨਾ
-
-**1. ਬੈਕਐਂਡ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਟੈਸਟ ਕਰੋ**:
-ਆਪਣੇ ਪਬਲਿਕ URL ਨੂੰ ਇੱਕ ਨਵੇਂ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹੋ। ਤੁਹਾਨੂੰ ਇਹ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ:
+#### ਆਪਣੀ Codespace ਸੈਟਅੱਪ ਦੀ ਜਾਂਚ ਕਰਨਾ
 
+**1. ਬੈਕਐਂਡ ਨੂੰ ਸਿੱਧੇ ਟੈਸਟ ਕਰੋ**:
+ਆਪਣੇ ਜਨਤਕ URL ਨੂੰ ਇੱਕ ਨਵੇਂ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹੋ। ਤੁਹਾਨੂੰ ਇਹ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ:
+```
+Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
+```
+  
 **2. ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਨਾਲ ਟੈਸਟ ਕਰੋ**:
+```javascript
+// Open browser console and test your API
+fetch('https://your-codespace-name-5000.app.github.dev/hello', {
+  method: 'POST',
+  headers: {'Content-Type': 'application/json'},
+  body: JSON.stringify({message: 'Hello from Codespaces!'})
+})
+.then(response => response.json())
+.then(data => console.log(data));
+```
+  
 
-#### Codespaces ਬਨਾਮ ਸਥਾਨਕ ਵਿਕਾਸ
+#### Codespaces ਅਤੇ ਸਥਾਨਕ ਵਿਕਾਸ ਦੀ ਤੁਲਨਾ
 
 | ਪਹਲੂ | ਸਥਾਨਕ ਵਿਕਾਸ | GitHub Codespaces |
-|------|-------------|-------------------|
-| **ਸੈਟਅਪ ਸਮਾਂ** | ਲੰਬਾ (Python, dependencies ਇੰਸਟਾਲ ਕਰੋ) | ਤੁਰੰਤ (ਪੂਰਵ-ਸੰਰਚਿਤ ਵਾਤਾਵਰਣ) |
+|--------|-------------------|-------------------|
+| **ਸੈਟਅੱਪ ਸਮਾਂ** | ਲੰਬਾ (Python, dependencies ਇੰਸਟਾਲ ਕਰੋ) | ਤੁਰੰਤ (ਪ੍ਰੀ-ਕਨਫਿਗਰਡ ਵਾਤਾਵਰਣ) |
 | **URL ਪਹੁੰਚ** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
-| **ਪੋਰਟ ਸੰਰਚਨਾ** | ਆਟੋਮੈਟਿਕ | ਮੈਨੁਅਲ (ਪੋਰਟਾਂ ਨੂੰ ਪਬਲਿਕ ਬਣਾਓ) |
-| **ਫਾਈਲ ਸਟੋਰੇਜ** | ਸਥਾਨਕ ਮਸ਼ੀਨ | GitHub ਰਿਪੋਜ਼ਟਰੀ |
-| **ਸਹਿਯੋਗ** | ਵਾਤਾਵਰਣ ਸਾਂਝਾ ਕਰਨਾ ਮੁਸ਼ਕਲ | Codespace ਲਿੰਕ ਸਾਂਝਾ ਕਰਨਾ ਆਸਾਨ |
-| **ਇੰਟਰਨੈਟ ਨਿਰਭਰਤਾ** | ਸਿਰਫ AI API ਕਾਲਾਂ ਲਈ | ਹਰ ਚੀਜ਼ ਲਈ ਲੋੜੀਂਦਾ |
+| **ਪੋਰਟ ਕਨਫਿਗਰੇਸ਼ਨ** | ਆਟੋਮੈਟਿਕ | ਮੈਨੂਅਲ (ਪੋਰਟਾਂ ਨੂੰ ਜਨਤਕ ਬਣਾਓ) |
+| **ਫਾਇਲ ਪERSISTENCE** | ਸਥਾਨਕ ਮਸ਼ੀਨ | GitHub ਰਿਪੋਜ਼ਟਰੀ |
+| **ਸਹਿਕਾਰਤਾ** | ਵਾਤਾਵਰਣ ਸਾਂਝਾ ਕਰਨਾ ਮੁਸ਼ਕਲ | Codespace ਲਿੰਕ ਸਾਂਝਾ ਕਰਨਾ ਆਸਾਨ |
+| **ਇੰਟਰਨੈਟ ਨਿਰਭਰਤਾ** | ਸਿਰਫ AI API ਕਾਲਾਂ ਲਈ | ਸਭ ਕੁਝ ਲਈ ਲੋੜੀਂਦਾ |
 
 #### Codespace ਵਿਕਾਸ ਟਿੱਪਸ
 
-**Codespaces ਵਿੱਚ ਐਨਵਾਇਰਮੈਂਟ ਵੈਰੀਏਬਲ**:
-ਤੁਹਾਡੀ `.env` ਫਾਈਲ Codespaces ਵਿੱਚ ਇੱਕੋ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੀ ਹੈ, ਪਰ ਤੁਸੀਂ Codespace ਵਿੱਚ ਸਿੱਧੇ ਐਨਵਾਇਰਮੈਂਟ ਵੈਰੀਏਬਲ ਵੀ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ।
+**Codespaces ਵਿੱਚ ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲ**:
+ਤੁਹਾਡੀ `.env` ਫਾਇਲ Codespaces ਵਿੱਚ ਇੱਕੋ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੀ ਹੈ, ਪਰ ਤੁਸੀਂ ਵਾਤਾਵਰਣ ਵੈਰੀਏਬਲਾਂ ਨੂੰ ਸਿੱਧੇ Codespace ਵਿੱਚ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ:
 
-**ਪੋਰਟ ਪ੍ਰਬੰਧਨ**:
-- Codespaces ਆਟੋਮੈਟਿਕ ਪਤਾ ਲਗਾਉਂਦਾ ਹੈ ਜਦੋਂ ਤੁਹਾਡਾ ਐਪਲੀਕੇਸ਼ਨ ਕਿਸੇ ਪੋਰਟ 'ਤੇ ਸੁਣਨਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ
-- ਤੁਸੀਂ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਕਈ ਪੋਰਟਾਂ ਨੂੰ ਅੱਗੇ ਵਧਾ ਸਕਦੇ ਹੋ (ਜਦੋਂ ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਡਾਟਾਬੇਸ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ ਤਾਂ ਇਹ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ)
-- ਪੋਰਟਾਂ ਤਦ ਤੱਕ ਪਹੁੰਚਯੋਗ ਰਹਿੰਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਤੁਹਾਡਾ Codespace ਚਲ ਰਿਹਾ ਹੈ
+```bash
+# Set environment variable for the current session
+export GITHUB_TOKEN="your_token_here"
+
+# Or add to your .bashrc for persistence
+echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
+```
+  
+**ਪੋਰਟ ਮੈਨੇਜਮੈਂਟ**:
+- Codespaces ਆਪਣੇ ਆਪ ਪਤਾ ਲਗਾਉਂਦਾ ਹੈ ਜਦੋਂ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਕਿਸੇ ਪੋਰਟ 'ਤੇ ਸੁਣਨਾ ਸ਼ੁਰੂ ਕਰਦੀ ਹੈ
+- ਤੁਸੀਂ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਕਈ ਪੋਰਟਾਂ ਨੂੰ ਅੱਗੇ ਵਧਾ ਸਕਦੇ ਹੋ (ਜਦੋਂ ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਡਾਟਾਬੇਸ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ ਤਾਂ ਲਾਭਦਾਇਕ)
+- ਪੋਰਟਾਂ ਤਦ ਤੱਕ ਪਹੁੰਚਯੋਗ ਰਹਿੰਦੀਆਂ ਹਨ ਜਦੋਂ ਤੱਕ ਤੁਹਾਡਾ Codespace ਚੱਲ ਰਿਹਾ ਹੈ
 
 **ਵਿਕਾਸ ਵਰਕਫਲੋ**:
 1. VS Code ਵਿੱਚ ਕੋਡ ਬਦਲਾਅ ਕਰੋ
-2. FastAPI ਆਟੋਮੈਟਿਕ ਰੀਲੋਡ ਕਰਦਾ ਹੈ (Uvicorn ਦੇ ਰੀਲੋਡ ਮੋਡ ਦੇ ਕਾਰਨ)
-3. ਤੁਰੰਤ ਬਦਲਾਅ ਨੂੰ ਪਬਲਿਕ URL ਰਾਹੀਂ ਟੈਸਟ ਕਰੋ
-4. ਜਦੋਂ ਤਿਆਰ ਹੋ ਜਾਓ ਤਾਂ ਕਮਿਟ ਅਤੇ ਪੁਸ਼ ਕਰੋ
+2. FastAPI ਆਟੋ-ਰੀਲੋਡ ਕਰਦਾ ਹੈ (Uvicorn ਦੇ ਰੀਲੋਡ ਮੋਡ ਦੇ ਕਾਰਨ)
+3. ਜਨਤਕ URL ਰਾਹੀਂ ਤੁਰੰਤ ਬਦਲਾਅ ਟੈਸਟ ਕਰੋ
+4. ਜਦੋਂ ਤਿਆਰ ਹੋਵੇ, ਕਮਿਟ ਅਤੇ ਪੁਸ਼ ਕਰੋ
 
 > 💡 **ਪ੍ਰੋ ਟਿੱਪ**: ਵਿਕਾਸ ਦੌਰਾਨ ਆਪਣੇ Codespace ਬੈਕਐਂਡ URL ਨੂੰ ਬੁੱਕਮਾਰਕ ਕਰੋ। ਕਿਉਂਕਿ Codespace ਨਾਮ ਸਥਿਰ ਹੁੰਦੇ ਹਨ, URL ਤਦ ਤੱਕ ਨਹੀਂ ਬਦਲੇਗਾ ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਇੱਕੋ Codespace ਵਰਤ ਰਹੇ ਹੋ।
 
 ## ਫਰੰਟਐਂਡ ਚੈਟ ਇੰਟਰਫੇਸ ਬਣਾਉਣਾ: ਜਿੱਥੇ ਮਨੁੱਖ AI ਨਾਲ ਮਿਲਦੇ ਹਨ
 
-ਹੁਣ ਅਸੀਂ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ – ਉਹ ਹਿੱਸਾ ਜੋ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਲੋਕ ਤੁਹਾਡੇ AI ਸਹਾਇਕ ਨਾਲ ਕਿਵੇਂ ਸੰਚਾਰ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਕਿ ਮੂਲ iPhone ਦੇ ਇੰਟਰਫੇਸ ਦੇ ਡਿਜ਼ਾਈਨ ਦਾ ਧਿਆਨ ਰੱਖਿਆ ਗਿਆ ਸੀ, ਅਸੀਂ ਜਟਿਲ ਤਕਨਾਲੋਜੀ ਨੂੰ ਬਹੁਤ ਹੀ ਸੌਖਾ ਅਤੇ ਕੁਦਰਤੀ ਬਣਾਉਣ 'ਤੇ ਧਿਆਨ ਦੇ ਰਹੇ ਹਾਂ।
+ਹੁਣ ਅਸੀਂ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ - ਉਹ ਹਿੱਸਾ ਜੋ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਲੋਕ ਤੁਹਾਡੇ AI ਸਹਾਇਕ ਨਾਲ ਕਿਵੇਂ ਸੰਚਾਰ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਮੂਲ iPhone ਦੇ ਇੰਟਰਫੇਸ ਦੀ ਡਿਜ਼ਾਈਨ, ਅਸੀਂ ਜਟਿਲ ਤਕਨਾਲੋਜੀ ਨੂੰ ਸਹਜ ਅਤੇ ਵਰਤਣ ਵਿੱਚ ਆਸਾਨ ਬਣਾਉਣ 'ਤੇ ਧਿਆਨ ਦੇ ਰਹੇ ਹਾਂ।
 
 ### ਆਧੁਨਿਕ ਫਰੰਟਐਂਡ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ
 
-ਸਾਡਾ ਚੈਟ ਇੰਟਰਫੇਸ "Single Page Application" ਜਾਂ SPA ਹੋਵੇਗਾ। ਪੁਰਾਣੇ ਤਰੀਕੇ ਦੇ ਬਦਲੇ ਜਿੱਥੇ ਹਰ ਕਲਿੱਕ ਨਾਲ ਇੱਕ ਨਵੀਂ ਪੇਜ ਲੋਡ ਹੁੰਦੀ ਹੈ, ਸਾਡਾ ਐਪ ਸੌਖੇ ਅਤੇ ਤੁਰੰਤ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ:
+ਸਾਡਾ ਚੈਟ ਇੰਟਰਫੇਸ "Single Page Application" ਜਾਂ SPA ਹੋਵੇਗਾ। ਪੁਰਾਣੇ ਤਰੀਕੇ ਦੇ ਬਦਲੇ, ਜਿੱਥੇ ਹਰ ਕਲਿੱਕ ਨਾਲ ਇੱਕ ਨਵਾਂ ਪੇਜ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਸਾਡਾ ਐਪ ਸਮੂਥ ਅਤੇ ਤੁਰੰਤ ਅਪਡੇਟ ਕਰਦਾ ਹੈ:
 
-**ਪੁਰਾਣੀਆਂ ਵੈਬਸਾਈਟਾਂ**: ਜਿਵੇਂ ਇੱਕ ਕਿਤਾਬ ਪੜ੍ਹਨਾ – ਤੁਸੀਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਵੀਆਂ ਪੇਜਾਂ 'ਤੇ ਜਾ ਰਹੇ ਹੋ
-**ਸਾਡਾ ਚੈਟ ਐਪ**: ਜਿਵੇਂ ਆਪਣਾ ਫੋਨ ਵਰਤਣਾ – ਸਭ ਕੁਝ ਸੌਖੇ ਅਤੇ ਸਲਸਲੇਵਾਰ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ
+**ਪੁਰਾਣੀਆਂ ਵੈਬਸਾਈਟਾਂ**: ਇੱਕ ਕਿਤਾਬ ਪੜ੍ਹਨ ਵਰਗਾ - ਤੁਸੀਂ ਪੂਰੇ ਨਵੇਂ ਪੇਜਾਂ 'ਤੇ ਜਾ ਰਹੇ ਹੋ  
+**ਸਾਡਾ ਚੈਟ ਐਪ**: ਆਪਣੇ ਫੋਨ ਵਰਗਾ - ਸਭ ਕੁਝ ਸਹਜਤਾ ਨਾਲ ਵਗਦਾ ਹੈ ਅਤੇ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ  
+
+```mermaid
+graph TD
+    A[User Types Message] --> B[JavaScript Captures Input]
+    B --> C[Validate & Format Data]
+    C --> D[Send to Backend API]
+    D --> E[Display Loading State]
+    E --> F[Receive AI Response]
+    F --> G[Update Chat Interface]
+    G --> H[Ready for Next Message]
+```
+  
+```mermaid
+classDiagram
+    class ChatApp {
+        +messages: HTMLElement
+        +form: HTMLElement
+        +input: HTMLElement
+        +sendButton: HTMLElement
+        +BASE_URL: string
+        +API_ENDPOINT: string
+        
+        +constructor()
+        +initializeEventListeners()
+        +handleSubmit(event)
+        +callAPI(message)
+        +appendMessage(text, role)
+        +escapeHtml(text)
+        +scrollToBottom()
+        +setLoading(isLoading)
+    }
+    
+    ChatApp --> DOM : manipulates
+    ChatApp --> FastAPI : sends requests
+```
+  
 
 ### ਫਰੰਟਐਂਡ ਵਿਕਾਸ ਦੇ ਤਿੰਨ ਸਥੰਭ
 
-ਹਰ ਫਰੰਟਐਂਡ ਐਪਲੀਕੇਸ਼ਨ – ਸਧਾਰਨ ਵੈਬਸਾਈਟਾਂ ਤੋਂ ਲੈ ਕੇ Discord ਜਾਂ Slack ਵਰਗੀਆਂ ਜਟਿਲ ਐਪਸ ਤੱਕ – ਤਿੰਨ ਮੁੱਖ ਤਕਨਾਲੋਜੀਆਂ 'ਤੇ ਬਣੀ ਹੁੰਦੀ ਹੈ। ਇਹਨਾਂ ਨੂੰ ਉਹ ਅਧਾਰ ਸਮਝੋ ਜਿਸ 'ਤੇ ਤੁਸੀਂ ਵੈਬ 'ਤੇ ਜੋ ਕੁਝ ਵੀ ਦੇਖਦੇ ਹੋ ਅਤੇ ਸੰਚਾਰ ਕਰਦੇ ਹੋ:
+ਹਰ ਫਰੰਟਐਂਡ ਐਪਲੀਕੇਸ਼ਨ - ਸਧਾਰਨ ਵੈਬਸਾਈਟਾਂ ਤੋਂ ਲੈ ਕੇ Discord ਜਾਂ Slack ਵਰਗੀਆਂ ਜਟਿਲ ਐਪਸ ਤੱਕ - ਤਿੰਨ ਮੁੱਖ ਤਕਨਾਲੋਜੀਆਂ 'ਤੇ ਬਣੀ ਹੁੰਦੀ ਹੈ। ਇਹਨਾਂ ਨੂੰ ਵੈਬ 'ਤੇ ਤੁਹਾਡੇ ਵੇਖਣ ਅਤੇ ਸੰਚਾਰ ਕਰਨ ਵਾਲੇ ਸਭ ਕੁਝ ਦੇ ਅਧਾਰ ਵਜੋਂ ਸੋਚੋ:
 
-**HTML (ਸੰਰਚਨਾ)**: ਇਹ ਤੁਹਾਡਾ ਅਧਾਰ ਹੈ
-- ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜੇ ਤੱਤ ਮੌਜੂਦ ਹਨ (ਬਟਨ, ਟੈਕਸਟ ਏਰੀਆ, ਕੰਟੇਨਰ)
-- ਸਮੱਗਰੀ ਨੂੰ ਮਤਲਬ ਦਿੰਦਾ ਹੈ (ਇਹ ਹੈਡਰ ਹੈ, ਇਹ ਫਾਰਮ ਹੈ, ਆਦਿ)
-- ਬੁਨਿਆਦੀ ਸੰਰਚਨਾ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ 'ਤੇ ਹੋਰ ਸਭ ਕੁਝ ਬਣਦਾ ਹੈ
+**HTML (ਸੰਰਚਨਾ)**: ਇਹ ਤੁਹਾਡਾ ਅਧਾਰ ਹੈ  
+- ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜੇ ਤੱਤ ਮੌਜੂਦ ਹਨ (
+ਹੁਣ ਆਓ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਈਏ ਜੋ ਸਾਡੇ ਚੈਟ ਇੰਟਰਫੇਸ ਨੂੰ ਜ਼ਿੰਦਗੀ ਦੇਵੇ। ਅਸੀਂ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੈਟਰਨ ਵਰਤਾਂਗੇ ਜੋ ਤੁਹਾਨੂੰ ਪੇਸ਼ੇਵਰ ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਮਿਲਦੇ ਹਨ, ਜਿਸ ਵਿੱਚ ES6 ਕਲਾਸਾਂ, async/await, ਅਤੇ ਇਵੈਂਟ-ਚਲਿਤ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸ਼ਾਮਲ ਹਨ।
 
-**CSS (ਪੇਸ਼ਕਸ਼)**: ਇਹ ਤੁਹਾਡਾ ਅੰਦਰੂਨੀ ਡਿਜ਼ਾਈਨਰ ਹੈ
-- ਸਭ ਕੁਝ ਸੁੰਦਰ ਬਣਾਉਂਦਾ ਹੈ (ਰੰਗ, ਫੌਂਟ, ਲੇਆਉਟ)
-- ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ (ਫੋਨ ਬਨਾਮ ਲੈਪਟੌਪ ਬਨਾਮ ਟੈਬਲੇਟ)
-- ਸੌਖੀਆਂ ਐਨੀਮੇਸ਼ਨ ਅਤੇ ਵਿਜ਼ੁਅਲ ਫੀਡਬੈਕ ਬਣਾਉਂਦਾ ਹੈ
+#### ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ
 
-**JavaScript (ਵਿਹਾਰ)**: ਇਹ ਤੁਹਾਡਾ ਦਿਮਾਗ ਹੈ
-- ਜੋ ਯੂਜ਼ਰ ਕਰਦੇ ਹਨ ਉਸ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਦਿੰਦਾ ਹੈ (ਕਲਿੱਕ, ਟਾਈਪਿੰਗ, ਸਕ੍ਰੋਲਿੰਗ)
-- ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਨਾਲ ਗੱਲ ਕਰਦਾ ਹੈ ਅਤੇ ਪੇਜ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ
-- ਸਭ ਕੁਝ ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਡਾਇਨਾਮਿਕ ਬਣਾਉਂਦਾ ਹੈ
+ਪ੍ਰਕਿਰਿਆਵਾਦੀ ਕੋਡ ਲਿਖਣ ਦੀ ਬਜਾਏ (ਫੰਕਸ਼ਨਾਂ ਦੀ ਲੜੀ ਜੋ ਕ੍ਰਮਵਾਰ ਚਲਦੀ ਹੈ), ਅਸੀਂ **ਕਲਾਸ-ਅਧਾਰਿਤ ਆਰਕੀਟੈਕਚਰ** ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਇੱਕ ਕਲਾਸ ਨੂੰ ਵਸਤੂਆਂ ਬਣਾਉਣ ਲਈ ਬਲੂਪ੍ਰਿੰਟ ਵਜੋਂ ਸੋਚੋ – ਜਿਵੇਂ ਕਿ ਇੱਕ ਆਰਕੀਟੈਕਟ ਦਾ ਬਲੂਪ੍ਰਿੰਟ ਕਈ ਘਰ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।
 
-**ਇਸਨੂੰ ਆਰਕੀਟੈਕਚਰਲ ਡਿਜ਼ਾਈਨ ਵਾਂਗ ਸੋਚੋ:**
-- **HTML**: ਸੰਰਚਨਾਤਮਕ ਬਲੂਪ੍ਰਿੰਟ (ਸਥਾਨਾਂ ਅਤੇ ਸੰਬੰਧਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨਾ)
-- **CSS**: ਸੌੰਦਰਤਾ ਅਤੇ ਵਾਤਾਵਰਣ ਡਿਜ਼ਾਈਨ (ਦ੍ਰਿਸ਼ਟੀਗਤ ਸ਼ੈਲੀ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ)
-- **JavaScript**: ਮਕੈਨਿਕਲ ਸਿਸਟਮ (ਫੰਕਸ਼ਨਲਿਟੀ ਅਤੇ ਇੰਟਰਐਕਟਿਵਿਟੀ)
+**ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਕਲਾਸਾਂ ਕਿਉਂ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ?**
+- **ਸੰਗਠਨ**: ਸਾਰਾ ਸੰਬੰਧਿਤ ਫੰਕਸ਼ਨਲਿਟੀ ਇਕੱਠੇ ਗਰੁੱਪ ਕੀਤੀ ਜਾਂਦੀ ਹੈ
+- **ਪੁਨ:ਵਰਤੋਂਯੋਗਤਾ**: ਤੁਸੀਂ ਇੱਕ ਹੀ ਪੰਨੇ 'ਤੇ ਕਈ ਚੈਟ ਇੰਸਟੈਂਸ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋ ਸਕਦੇ ਹੋ
+- **ਰੱਖ-ਰਖਾਵ ਯੋਗਤਾ**: ਖਾਸ ਫੀਚਰਾਂ ਨੂੰ ਡੀਬੱਗ ਅਤੇ ਸੋਧਣਾ ਆਸਾਨ ਹੈ
+- **ਪੇਸ਼ੇਵਰ ਮਿਆਰ**: ਇਹ ਪੈਟਰਨ React, Vue, ਅਤੇ Angular ਵਰਗੇ ਫਰੇਮਵਰਕ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ
 
-### ਆਧੁਨਿਕ JavaScript ਆਰਕੀਟੈਕਚਰ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ
+`app.js` ਬਣਾਓ ਇਸ ਆਧੁਨਿਕ, ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਰਚਿਤ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ:
+
+```javascript
+// app.js - Modern chat application logic
+
+class ChatApp {
+    constructor() {
+        // Get references to DOM elements we'll need to manipulate
+        this.messages = document.getElementById("messages");
+        this.form = document.getElementById("chatForm");
+        this.input = document.getElementById("messageInput");
+        this.sendButton = document.getElementById("sendBtn");
+        
+        // Configure your backend URL here
+        this.BASE_URL = "http://localhost:5000"; // Update this for your environment
+        this.API_ENDPOINT = `${this.BASE_URL}/hello`;
+        
+        // Set up event listeners when the chat app is created
+        this.initializeEventListeners();
+    }
+    
+    initializeEventListeners() {
+        // Listen for form submission (when user clicks Send or presses Enter)
+        this.form.addEventListener("submit", (e) => this.handleSubmit(e));
+        
+        // Also listen for Enter key in the input field (better UX)
+        this.input.addEventListener("keypress", (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSubmit(e);
+            }
+        });
+    }
+    
+    async handleSubmit(event) {
+        event.preventDefault(); // Prevent form from refreshing the page
+        
+        const messageText = this.input.value.trim();
+        if (!messageText) return; // Don't send empty messages
+        
+        // Provide user feedback that something is happening
+        this.setLoading(true);
+        
+        // Add user message to chat immediately (optimistic UI)
+        this.appendMessage(messageText, "user");
+        
+        // Clear input field so user can type next message
+        this.input.value = '';
+        
+        try {
+            // Call the AI API and wait for response
+            const reply = await this.callAPI(messageText);
+            
+            // Add AI response to chat
+            this.appendMessage(reply, "assistant");
+        } catch (error) {
+            console.error('API Error:', error);
+            this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
+        } finally {
+            // Re-enable the interface regardless of success or failure
+            this.setLoading(false);
+        }
+    }
+    
+    async callAPI(message) {
+        const response = await fetch(this.API_ENDPOINT, {
+            method: "POST",
+            headers: { 
+                "Content-Type": "application/json" 
+            },
+            body: JSON.stringify({ message })
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        return data.response;
+    }
+    
+    appendMessage(text, role) {
+        const messageElement = document.createElement("div");
+        messageElement.className = `message ${role}`;
+        messageElement.innerHTML = `
+            <div class="message-content">
+                <span class="message-text">${this.escapeHtml(text)}</span>
+                <span class="message-time">${new Date().toLocaleTimeString()}</span>
+            </div>
+        `;
+        
+        this.messages.appendChild(messageElement);
+        this.scrollToBottom();
+    }
+    
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    
+    scrollToBottom() {
+        this.messages.scrollTop = this.messages.scrollHeight;
+    }
+    
+    setLoading(isLoading) {
+        this.sendButton.disabled = isLoading;
+        this.input.disabled = isLoading;
+        this.sendButton.textContent = isLoading ? "Sending..." : "Send";
+    }
+}
 
-ਸਾਡਾ ਚੈਟ ਐਪਲੀਕੇਸ਼ਨ ਆਧੁਨਿਕ JavaScript ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੇਗਾ ਜੋ ਤੁਸੀਂ ਪੇਸ਼ੇਵਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਦੇਖੋਗੇ। ਇਹਨਾਂ ਧਾਰਨਾਵਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਡੀ ਵਿਕਾਸ ਯਾਤਰਾ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ:
+// Initialize the chat application when the page loads
+document.addEventListener("DOMContentLoaded", () => {
+    new ChatApp();
+});
+```
 
-**ਕਲਾਸ-ਅਧਾਰਿਤ ਆਰਕੀਟੈਕਚਰ**: ਅਸੀਂ ਆਪਣਾ ਕੋਡ ਕਲਾਸਾਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਾਂਗੇ, ਜੋ ਕਿ ਵਸਤੂਆਂ ਲਈ ਬਲੂਪ੍ਰਿੰਟ ਬਣਾਉਣ ਵਰਗਾ ਹੈ
-**Async/Await**: ਉਹ ਆਧੁਨਿਕ ਤਰੀਕਾ ਜੋ ਸਮਾਂ ਲੈਣ ਵਾਲੀਆਂ ਕਾਰਵਾਈਆਂ (ਜਿਵੇਂ API ਕਾਲਾਂ) ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ
-**ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਸਾਡਾ ਐਪ ਯੂਜ਼ਰ ਦੀਆਂ ਕਾਰਵਾਈਆਂ (ਕਲਿੱਕ, ਕੀ ਪ੍ਰੈਸ) 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਦਿੰਦਾ ਹੈ ਬਜਾਏ ਇੱਕ ਲੂਪ ਵਿੱਚ ਚਲਣ ਦੇ
-**DOM ਮੈਨਿਪੂਲੇਸ਼ਨ**: ਯੂਜ਼ਰ ਇੰਟਰੈਕਸ਼ਨ ਅਤੇ API ਜਵਾਬਾਂ ਦੇ ਅਧਾਰ 'ਤੇ ਵੈਬਪੇਜ ਸਮੱਗਰੀ ਨੂੰ ਡਾਇਨਾਮਿਕ ਤਰੀਕੇ ਨਾਲ ਅਪਡੇਟ ਕਰਨਾ
+#### ਹਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸੰਕਲਪ ਨੂੰ ਸਮਝਣਾ
 
-### ਪ੍ਰੋਜੈਕਟ ਸੰਰਚਨਾ ਸੈਟਅਪ
+**ES6 ਕਲਾਸ ਸੰਰਚਨਾ**:
+```javascript
+class ChatApp {
+    constructor() {
+        // This runs when you create a new ChatApp instance
+        // It's like the "setup" function for your chat
+    }
+    
+    methodName() {
+        // Methods are functions that belong to the class
+        // They can access class properties using "this"
+    }
+}
+```
 
-ਫਰੰਟਐਂਡ ਡਾਇਰੈਕਟਰੀ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਇਹ ਸੰਗਠਿਤ ਸੰਰਚਨਾ ਹੋਵੇ:
+**Async/Await ਪੈਟਰਨ**:
+```javascript
+// Old way (callback hell):
+fetch(url)
+  .then(response => response.json())
+  .then(data => console.log(data))
+  .catch(error => console.error(error));
+
+// Modern way (async/await):
+try {
+    const response = await fetch(url);
+    const data = await response.json();
+    console.log(data);
+} catch (error) {
+    console.error(error);
+}
+```
 
-**ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ**:
-- **ਵੱਖ-ਵੱਖ** ਸੰਰਚਨਾ (HTML), ਵਿਹਾਰ (JavaScript), ਅਤੇ ਪੇਸ਼ਕਸ਼ (CSS) ਦੇ ਵਿਚਕਾਰ
-- **ਸਧਾਰਨ** ਫਾਈਲ ਸੰਰਚਨਾ ਜੋ ਨੈਵੀਗੇਟ ਅਤੇ ਬਦਲਣ ਲਈ ਆਸਾਨ ਹੈ
-- **ਵੈਬ ਵਿਕਾਸ ਦੇ ਸਰਵੋਤਮ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ** ਸੰਗਠਨ ਅਤੇ ਰੱਖ-ਰਖਾਅ ਲਈ
+**ਇਵੈਂਟ-ਚਲਿਤ ਪ੍ਰੋਗਰਾਮਿੰਗ**:
+ਕਿਸੇ ਚੀਜ਼ ਦੇ ਹੋਣ ਦੀ ਲਗਾਤਾਰ ਜਾਂਚ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ "ਇਵੈਂਟਾਂ" ਲਈ ਸੁਣਦੇ ਹਾਂ:
+```javascript
+// When form is submitted, run handleSubmit
+this.form.addEventListener("submit", (e) => this.handleSubmit(e));
 
-### HTML ਅਧਾਰ ਬਣਾਉਣਾ: ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਸੈਮਾਂਟਿਕ ਸੰਰਚਨਾ
+// When Enter key is pressed, also run handleSubmit
+this.input.addEventListener("keypress", (e) => { /* ... */ });
+```
 
-ਆਓ HTML ਸੰਰਚਨਾ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ। ਆਧੁਨਿਕ ਵੈਬ ਵਿਕਾਸ "ਸੈਮਾਂਟਿਕ HTML" 'ਤੇ ਜ਼ੋਰ ਦਿੰਦਾ ਹੈ – HTML ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜੋ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਉਨ੍ਹਾਂ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ, ਸਿਰਫ਼ ਉਨ੍ਹਾਂ ਦੇ ਦਿੱਖ ਨੂੰ ਨਹੀਂ। ਇਹ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ, ਸੇਰਚ ਇੰਜਨਾਂ, ਅਤੇ ਹੋਰ ਟੂਲਾਂ ਲਈ ਪਹੁੰਚਯੋਗ ਬਣਾਉਂਦਾ ਹੈ।
+**DOM ਮੈਨਿਪੂਲੇਸ਼ਨ**:
+```javascript
+// Create new elements
+const messageElement = document.createElement("div");
 
-**ਸੈਮਾਂਟਿਕ HTML ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ**: ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਚੈਟ ਐਪ ਨੂੰ ਕਿਸੇ ਨੂੰ ਫੋਨ 'ਤੇ ਵਰਣਨ ਕਰ ਰਹੇ ਹੋ। ਤੁਸੀਂ ਕਹੋਗੇ "ਇੱਕ ਹੈਡਰ ਹੈ ਜਿਸ ਵਿੱਚ ਸਿਰਲੇਖ ਹੈ, ਇੱਕ ਮੁੱਖ ਖੇਤਰ ਜਿੱਥੇ ਗੱਲਬਾਤਾਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ, ਅਤੇ ਹੇਠਾਂ ਇੱਕ ਫਾਰਮ ਹੈ ਜਿਸ ਵਿੱਚ ਸੁਨੇਹੇ ਟਾਈਪ ਕਰਨ ਲਈ।" ਸੈਮਾਂਟਿਕ HTML ਉਹ ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜੋ ਇਸ ਕੁਦਰਤੀ ਵਰਣਨ ਨਾਲ ਮੇ
-ਇਹ ਆਰਕੀਟੈਕਚਰ ਸਕੇਲਬਲ ਹੈ – ਤੁਸੀਂ ਬਿਨਾਂ ਕੋਰ ਸਟ੍ਰਕਚਰ ਨੂੰ ਦੁਬਾਰਾ ਲਿਖੇ ਸੁਨੇਹਾ ਸੰਪਾਦਨ, ਫਾਈਲ ਅੱਪਲੋਡ, ਜਾਂ ਕਈ ਗੱਲਬਾਤ ਥ੍ਰੈਡ ਵਰਗੇ ਫੀਚਰ ਆਸਾਨੀ ਨਾਲ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।
+// Modify their properties
+messageElement.className = "message user";
+messageElement.innerHTML = "Hello world!";
+
+// Add to the page
+this.messages.appendChild(messageElement);
+```
+
+#### ਸੁਰੱਖਿਆ ਅਤੇ ਵਧੀਆ ਅਭਿਆਸ
+
+**XSS ਰੋਕਥਾਮ**:
+```javascript
+escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;  // This automatically escapes HTML
+    return div.innerHTML;
+}
+```
+
+**ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ**: ਜੇਕਰ ਕੋਈ ਯੂਜ਼ਰ `<script>alert('hack')</script>` ਟਾਈਪ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਫੰਕਸ਼ਨ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਇਹ ਕੋਡ ਵਜਾਇ ਟੈਕਸਟ ਵਜੋਂ ਦਿਖਾਈ ਦੇਵੇ।
+
+**ਗਲਤੀ ਸੰਭਾਲ**:
+```javascript
+try {
+    const reply = await this.callAPI(messageText);
+    this.appendMessage(reply, "assistant");
+} catch (error) {
+    // Show user-friendly error instead of breaking the app
+    this.appendMessage("Sorry, I'm having trouble...", "error");
+}
+```
+
+**ਯੂਜ਼ਰ ਅਨੁਭਵ ਵਿਚਾਰ**:
+- **ਆਪਟੀਮਿਸਟਿਕ UI**: ਯੂਜ਼ਰ ਦਾ ਸੁਨੇਹਾ ਤੁਰੰਤ ਸ਼ਾਮਲ ਕਰੋ, ਸਰਵਰ ਦੇ ਜਵਾਬ ਦੀ ਉਡੀਕ ਨਾ ਕਰੋ
+- **ਲੋਡਿੰਗ ਸਟੇਟਸ**: ਬਟਨ ਨੂੰ ਅਯੋਗ ਕਰੋ ਅਤੇ "ਭੇਜ ਰਿਹਾ ਹੈ..." ਦਿਖਾਓ ਜਦੋਂ ਉਡੀਕ ਕਰ ਰਹੇ ਹੋ
+- **ਆਟੋ-ਸਕ੍ਰੋਲ**: ਨਵੇਂ ਸੁਨੇਹੇ ਦਿਖਾਓ
+- **ਇਨਪੁਟ ਵੈਧਤਾ**: ਖਾਲੀ ਸੁਨੇਹੇ ਨਾ ਭੇਜੋ
+- **ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟ**: ਐਂਟਰ ਕੀ ਨਾਲ ਸੁਨੇਹੇ ਭੇਜੋ (ਅਸਲ ਚੈਟ ਐਪਸ ਵਾਂਗ)
+
+#### ਐਪਲੀਕੇਸ਼ਨ ਫਲੋ ਨੂੰ ਸਮਝਣਾ
+
+1. **ਪੰਨਾ ਲੋਡ ਹੁੰਦਾ ਹੈ** → `DOMContentLoaded` ਇਵੈਂਟ ਚਲਦਾ ਹੈ → `new ChatApp()` ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ
+2. **ਕੰਸਟ੍ਰਕਟਰ ਚਲਦਾ ਹੈ** → DOM ਐਲੀਮੈਂਟ ਰਿਫਰੈਂਸ ਲੈਂਦਾ ਹੈ → ਇਵੈਂਟ ਲਿਸਨਰ ਸੈਟ ਕਰਦਾ ਹੈ
+3. **ਯੂਜ਼ਰ ਸੁਨੇਹਾ ਟਾਈਪ ਕਰਦਾ ਹੈ** → ਐਂਟਰ ਦਬਾਉਂਦਾ ਹੈ ਜਾਂ ਭੇਜਣ 'ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ → `handleSubmit` ਚਲਦਾ ਹੈ
+4. **handleSubmit** → ਇਨਪੁਟ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ → ਲੋਡਿੰਗ ਸਟੇਟ ਦਿਖਾਉਂਦਾ ਹੈ → API ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ
+5. **API ਜਵਾਬ ਦਿੰਦਾ ਹੈ** → ਚੈਟ ਵਿੱਚ AI ਸੁਨੇਹਾ ਸ਼ਾਮਲ ਕਰੋ → ਇੰਟਰਫੇਸ ਨੂੰ ਮੁੜ ਯੋਗ ਬਣਾਓ
+6. **ਅਗਲੇ ਸੁਨੇਹੇ ਲਈ ਤਿਆਰ** → ਯੂਜ਼ਰ ਚੈਟਿੰਗ ਜਾਰੀ ਰੱਖ ਸਕਦਾ ਹੈ
+
+ਇਹ ਆਰਕੀਟੈਕਚਰ ਸਕੇਲਯੋਗ ਹੈ – ਤੁਸੀਂ ਸੁਨੇਹਾ ਸੋਧ, ਫਾਈਲ ਅਪਲੋਡ, ਜਾਂ ਕਈ ਗੱਲਬਾਤਾਂ ਦੇ ਧਾਗੇ ਵਰਗੇ ਫੀਚਰਾਂ ਨੂੰ ਮੁੱਖ ਸੰਰਚਨਾ ਨੂੰ ਦੁਬਾਰਾ ਲਿਖਣ ਤੋਂ ਬਿਨਾਂ ਆਸਾਨੀ ਨਾਲ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।
+
+### 🎯 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ: ਆਧੁਨਿਕ ਫਰੰਟਐਂਡ ਆਰਕੀਟੈਕਚਰ
+
+**ਆਰਕੀਟੈਕਚਰ ਸਮਝਣਾ**: ਤੁਸੀਂ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੈਟਰਨ ਵਰਤ ਕੇ ਇੱਕ ਪੂਰੀ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਲਾਗੂ ਕੀਤੀ ਹੈ। ਇਹ ਪੇਸ਼ੇਵਰ-ਸਤਰ ਦੇ ਫਰੰਟਐਂਡ ਵਿਕਾਸ ਦਾ ਪ੍ਰਤੀਨਿਧਿਤਾ ਕਰਦਾ ਹੈ।
+
+**ਮੁੱਖ ਸੰਕਲਪਾਂ ਵਿੱਚ ਮਾਹਰਤਾ**:
+- **ES6 ਕਲਾਸ ਆਰਕੀਟੈਕਚਰ**: ਸੰਗਠਿਤ, ਰੱਖ-ਰਖਾਵ ਯੋਗ ਕੋਡ ਸੰਰਚਨਾ
+- **Async/Await ਪੈਟਰਨ**: ਆਧੁਨਿਕ ਅਸਿੰਕ੍ਰੋਨਸ ਪ੍ਰੋਗਰਾਮਿੰਗ
+- **ਇਵੈਂਟ-ਚਲਿਤ ਪ੍ਰੋਗਰਾਮਿੰਗ**: ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਡਿਜ਼ਾਈਨ
+- **ਸੁਰੱਖਿਆ ਦੇ ਵਧੀਆ ਅਭਿਆਸ**: XSS ਰੋਕਥਾਮ ਅਤੇ ਇਨਪੁਟ ਵੈਧਤਾ
+
+**ਉਦਯੋਗ ਕਨੈਕਸ਼ਨ**: ਤੁਸੀਂ ਸਿੱਖੇ ਪੈਟਰਨ (ਕਲਾਸ-ਅਧਾਰਿਤ ਆਰਕੀਟੈਕਚਰ, ਅਸਿੰਕ੍ਰੋਨਸ ਕਾਰਵਾਈਆਂ, DOM ਮੈਨਿਪੂਲੇਸ਼ਨ) ਆਧੁਨਿਕ ਫਰੇਮਵਰਕਾਂ ਜਿਵੇਂ React, Vue, ਅਤੇ Angular ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਤੁਸੀਂ ਉਹੀ ਆਰਕੀਟੈਕਚਰਲ ਸੋਚ ਨਾਲ ਬਣਾਉਣ ਕਰ ਰਹੇ ਹੋ ਜੋ ਉਤਪਾਦਨ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਵਰਤੀ ਜਾਂਦੀ ਹੈ।
+
+**ਚਿੰਤਨ ਦਾ ਸਵਾਲ**: ਤੁਸੀਂ ਇਸ ਚੈਟ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਕਈ ਗੱਲਬਾਤਾਂ ਜਾਂ ਯੂਜ਼ਰ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕਿਵੇਂ ਵਧਾਉਂਗੇ? ਜ਼ਰੂਰੀ ਆਰਕੀਟੈਕਚਰਲ ਬਦਲਾਅ ਅਤੇ ਕਲਾਸ ਸੰਰਚਨਾ ਕਿਵੇਂ ਵਿਕਸਿਤ ਹੋਵੇਗੀ, ਇਸ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ।
 
 ### ਆਪਣੇ ਚੈਟ ਇੰਟਰਫੇਸ ਨੂੰ ਸਜਾਉਣਾ
 
-ਹੁਣ CSS ਦੀ ਮਦਦ ਨਾਲ ਇੱਕ ਆਧੁਨਿਕ, ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਚੈਟ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ। ਚੰਗੀ ਸਟਾਈਲਿੰਗ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਪੇਸ਼ੇਵਰ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦੀ ਹੈ ਅਤੇ ਸਮੁੱਚੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਦੀ ਹੈ। ਅਸੀਂ Flexbox, CSS Grid, ਅਤੇ ਕਸਟਮ ਪ੍ਰਾਪਰਟੀ ਵਰਗੇ ਆਧੁਨਿਕ CSS ਫੀਚਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਇੱਕ ਰਿਸਪਾਂਸਿਵ ਅਤੇ ਐਕਸੈਸਿਬਲ ਡਿਜ਼ਾਈਨ ਲਈ।
+ਹੁਣ ਆਓ CSS ਨਾਲ ਇੱਕ ਆਧੁਨਿਕ, ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਚੈਟ ਇੰਟਰਫੇਸ ਬਣਾਈਏ। ਚੰਗੀ ਸਟਾਈਲਿੰਗ ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਪੇਸ਼ੇਵਰ ਮਹਿਸੂਸ ਕਰਦੀ ਹੈ ਅਤੇ ਸਮੁੱਚੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਦੀ ਹੈ। ਅਸੀਂ Flexbox, CSS Grid, ਅਤੇ ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਵਰਗੇ ਆਧੁਨਿਕ CSS ਫੀਚਰਾਂ ਨੂੰ ਵਰਤਾਂਗੇ ਜੋ ਇੱਕ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ, ਸਹਿਜ ਡਿਜ਼ਾਈਨ ਲਈ ਹਨ।
 
-`styles.css` ਬਣਾਓ ਇਨ੍ਹਾਂ ਵਿਸਥਾਰਿਤ ਸਟਾਈਲਾਂ ਨਾਲ:
+`styles.css` ਬਣਾਓ ਇਨ੍ਹਾਂ ਵਿਸਤ੍ਰਿਤ ਸਟਾਈਲਾਂ ਨਾਲ:
 
 ```css
 /* styles.css - Modern chat interface styling */
@@ -891,17 +1399,17 @@ body {
 ```
 
 **CSS ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ:**
-- **ਵਰਤੋਂ ਕਰਦਾ ਹੈ** CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀ (ਵੈਰੀਏਬਲ) ਸਥਿਰ ਥੀਮਿੰਗ ਅਤੇ ਆਸਾਨ ਰੱਖ-ਰਖਾਅ ਲਈ
-- **ਲਾਗੂ ਕਰਦਾ ਹੈ** Flexbox ਲੇਆਉਟ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਅਤੇ ਸਹੀ ਸੰਰਚਨਾ ਲਈ
-- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਣ ਲਈ ਹੌਲੀ ਹੌਲੀ ਐਨੀਮੇਸ਼ਨ ਬਿਨਾਂ ਧਿਆਨ ਭੰਗ ਕੀਤੇ
-- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਯੂਜ਼ਰ ਸੁਨੇਹਿਆਂ, AI ਜਵਾਬਾਂ, ਅਤੇ ਗਲਤੀ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਦ੍ਰਿਸ਼ਟੀਗਤ ਅੰਤਰ
-- **ਸਹਾਇਕ ਹੈ** ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਜੋ ਡੈਸਕਟਾਪ ਅਤੇ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ ਦੋਵਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
-- **ਵਿਚਾਰ ਕਰਦਾ ਹੈ** ਐਕਸੈਸਿਬਿਲਟੀ ਨੂੰ ਘਟਾਈ ਗਤੀਸ਼ੀਲਤਾ ਪਸੰਦਾਂ ਅਤੇ ਸਹੀ ਕਾਂਟ੍ਰਾਸਟ ਅਨੁਪਾਤਾਂ ਨਾਲ
-- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਡਾਰਕ ਮੋਡ ਸਪੋਰਟ ਯੂਜ਼ਰ ਦੇ ਸਿਸਟਮ ਪਸੰਦਾਂ ਦੇ ਅਧਾਰ 'ਤੇ
+- **ਵਰਤਦਾ ਹੈ** CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ (ਵੈਰੀਏਬਲ) ਸਥਿਰ ਥੀਮਿੰਗ ਅਤੇ ਆਸਾਨ ਰੱਖ-ਰਖਾਵ ਲਈ
+- **ਲਾਗੂ ਕਰਦਾ ਹੈ** Flexbox ਲੇਆਉਟ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਡਿਜ਼ਾਈਨ ਅਤੇ ਸਹੀ ਸੰਰਚਨਾ ਲਈ
+- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਣ ਲਈ ਹੌਲੀ ਹੌਲੀ ਐਨੀਮੇਸ਼ਨ
+- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਯੂਜ਼ਰ ਸੁਨੇਹਿਆਂ, AI ਜਵਾਬਾਂ, ਅਤੇ ਗਲਤੀ ਸਥਿਤੀਆਂ ਵਿੱਚ ਦ੍ਰਿਸ਼ਟੀਗਤ ਅੰਤਰ
+- **ਸਹਾਇਕ ਹੈ** ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਡਿਜ਼ਾਈਨ ਜੋ ਡੈਸਕਟਾਪ ਅਤੇ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
+- **ਵਿਚਾਰ ਕਰਦਾ ਹੈ** ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਘਟਾਈ ਗਤੀਸ਼ੀਲਤਾ ਪਸੰਦਾਂ ਅਤੇ ਸਹੀ ਕਾਂਟ੍ਰਾਸਟ ਅਨੁਪਾਤਾਂ ਨਾਲ
+- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਯੂਜ਼ਰ ਦੇ ਸਿਸਟਮ ਪਸੰਦਾਂ ਦੇ ਅਧਾਰ 'ਤੇ ਡਾਰਕ ਮੋਡ ਸਹਾਇਤਾ
 
 ### ਆਪਣੇ ਬੈਕਐਂਡ URL ਨੂੰ ਕਨਫਿਗਰ ਕਰਨਾ
 
-ਅੰਤਮ ਕਦਮ ਤੁਹਾਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ `BASE_URL` ਨੂੰ ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਸਰਵਰ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਅਪਡੇਟ ਕਰਨਾ ਹੈ:
+ਅੰਤਮ ਕਦਮ ਤੁਹਾਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ `BASE_URL` ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਹੈ ਤਾਂ ਜੋ ਇਹ ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਸਰਵਰ ਨਾਲ ਮੇਲ ਖਾਏ:
 
 ```javascript
 // For local development
@@ -912,19 +1420,19 @@ this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 ```
 
 **ਤੁਹਾਡੇ ਬੈਕਐਂਡ URL ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨਾ:**
-- **ਲੋਕਲ ਵਿਕਾਸ**: `http://localhost:5000` ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੇ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਦੋਵਾਂ ਨੂੰ ਲੋਕਲ ਚਲਾਇਆ ਜਾ ਰਿਹਾ ਹੈ
-- **Codespaces**: ਪੋਰਟ 5000 ਨੂੰ ਪਬਲਿਕ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ ਪੋਰਟਸ ਟੈਬ ਵਿੱਚ ਤੁਹਾਡੇ ਬੈਕਐਂਡ URL ਨੂੰ ਲੱਭੋ
-- **ਪ੍ਰੋਡਕਸ਼ਨ**: ਹੋਸਟਿੰਗ ਸੇਵਾ 'ਤੇ ਡਿਪਲੋਇੰਗ ਕਰਦੇ ਸਮੇਂ ਆਪਣੇ ਅਸਲ ਡੋਮੇਨ ਨਾਲ ਬਦਲੋ
+- **ਲੋਕਲ ਵਿਕਾਸ**: ਜੇਕਰ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਦੋਨੋ ਨੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਚਲਾਇਆ ਜਾ ਰਿਹਾ ਹੈ ਤਾਂ `http://localhost:5000` ਵਰਤੋ
+- **ਕੋਡਸਪੇਸ**: ਪੋਰਟ 5000 ਨੂੰ ਪਬਲਿਕ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ ਪੋਰਟ ਟੈਬ ਵਿੱਚ ਆਪਣੇ ਬੈਕਐਂਡ URL ਨੂੰ ਲੱਭੋ
+- **ਪ੍ਰੋਡਕਸ਼ਨ**: ਹੋਸਟਿੰਗ ਸੇਵਾ 'ਤੇ ਡਿਪਲੌਇ ਕਰਨ ਸਮੇਂ ਆਪਣੇ ਅਸਲ ਡੋਮੇਨ ਨਾਲ ਬਦਲੋ
 
-> 💡 **ਟੈਸਟਿੰਗ ਟਿਪ**: ਤੁਸੀਂ ਆਪਣੇ ਬੈਕਐਂਡ ਨੂੰ ਸਿੱਧੇ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਰੂਟ URL 'ਤੇ ਜਾ ਕੇ ਟੈਸਟ ਕਰ ਸਕਦੇ ਹੋ। ਤੁਹਾਨੂੰ ਆਪਣੇ FastAPI ਸਰਵਰ ਤੋਂ ਸਵਾਗਤ ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ।
+> 💡 **ਟੈਸਟਿੰਗ ਟਿਪ**: ਤੁਸੀਂ ਆਪਣੇ ਬੈਕਐਂਡ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਰੂਟ URL 'ਤੇ ਜਾ ਕੇ ਟੈਸਟ ਕਰ ਸਕਦੇ ਹੋ। ਤੁਹਾਨੂੰ ਆਪਣੇ FastAPI ਸਰਵਰ ਤੋਂ ਸਵਾਗਤ ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ।
 
-## ਟੈਸਟਿੰਗ ਅਤੇ ਡਿਪਲੋਇਮੈਂਟ
+## ਟੈਸਟਿੰਗ ਅਤੇ ਡਿਪਲੌਇਮੈਂਟ
 
-ਹੁਣ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਕੰਪੋਨੈਂਟ ਬਣੇ ਹੋਏ ਹਨ, ਆਓ ਇਹ ਯਕੀਨੀ ਬਣਾਈਏ ਕਿ ਸਭ ਕੁਝ ਇਕੱਠੇ ਕੰਮ ਕਰਦਾ ਹੈ ਅਤੇ ਆਪਣੇ ਚੈਟ ਅਸਿਸਟੈਂਟ ਨੂੰ ਹੋਰਾਂ ਨਾਲ ਸਾਂਝਾ ਕਰਨ ਲਈ ਡਿਪਲੋਇਮੈਂਟ ਵਿਕਲਪਾਂ ਦੀ ਪੜਚੋਲ ਕਰਦੇ ਹਾਂ।
+ਹੁਣ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਕੰਪੋਨੈਂਟ ਬਣੇ ਹੋਏ ਹਨ, ਆਓ ਟੈਸਟ ਕਰੀਏ ਕਿ ਸਭ ਕੁਝ ਇਕੱਠੇ ਕੰਮ ਕਰਦਾ ਹੈ ਅਤੇ ਡਿਪਲੌਇਮੈਂਟ ਵਿਕਲਪਾਂ ਦੀ ਪੜਚੋਲ ਕਰੀਏ ਤਾਂ ਜੋ ਆਪਣੇ ਚੈਟ ਅਸਿਸਟੈਂਟ ਨੂੰ ਹੋਰਾਂ ਨਾਲ ਸਾਂਝਾ ਕੀਤਾ ਜਾ ਸਕੇ।
 
 ### ਲੋਕਲ ਟੈਸਟਿੰਗ ਵਰਕਫਲੋ
 
-ਇਹ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ ਆਪਣੀ ਪੂਰੀ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ:
+ਤੁਹਾਡੇ ਪੂਰੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਟੈਸਟ ਕਰਨ ਲਈ ਇਹ ਕਦਮ ਅਪਣਾਓ:
 
 ```mermaid
 graph TD
@@ -944,18 +1452,18 @@ graph TD
    python api.py
    ```
 
-2. **API ਦੀ ਜਾਂਚ ਕਰੋ**:
+2. **API ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ ਇਹ ਯਕੀਨੀ ਬਣਾਓ**:
    - `http://localhost:5000` ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ
    - ਤੁਹਾਨੂੰ ਆਪਣੇ FastAPI ਸਰਵਰ ਤੋਂ ਸਵਾਗਤ ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ
 
 3. **ਆਪਣਾ ਫਰੰਟਐਂਡ ਖੋਲ੍ਹੋ**:
    - ਆਪਣੇ ਫਰੰਟਐਂਡ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾਓ
    - `index.html` ਨੂੰ ਆਪਣੇ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ
-   - ਜਾਂ ਵਧੀਆ ਵਿਕਾਸ ਅਨੁਭਵ ਲਈ VS Code ਦੇ Live Server ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ
+   - ਜਾਂ ਵਿਕਾਸ ਦੇ ਬਿਹਤਰ ਅਨੁਭਵ ਲਈ VS Code ਦੇ Live Server ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਵਰਤੋ
 
-4. **ਚੈਟ ਫੰਕਸ਼ਨਾਲਿਟੀ ਦੀ ਜਾਂਚ ਕਰੋ**:
+4. **ਚੈਟ ਫੰਕਸ਼ਨਲਿਟੀ ਟੈਸਟ ਕਰੋ**:
    - ਇਨਪੁਟ ਫੀਲਡ ਵਿੱਚ ਸੁਨੇਹਾ ਟਾਈਪ ਕਰੋ
-   - "Send" 'ਤੇ ਕਲਿਕ ਕਰੋ ਜਾਂ Enter ਦਬਾਓ
+   - "ਭੇਜੋ" 'ਤੇ ਕਲਿਕ ਕਰੋ ਜਾਂ ਐਂਟਰ ਦਬਾਓ
    - ਯਕੀਨੀ ਬਣਾਓ ਕਿ AI ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਜਵਾਬ ਦਿੰਦਾ ਹੈ
    - ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਲਤੀਆਂ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਦੀ ਜਾਂਚ ਕਰੋ
 
@@ -963,121 +1471,196 @@ graph TD
 
 | ਸਮੱਸਿਆ | ਲੱਛਣ | ਹੱਲ |
 |---------|----------|----------|
-| **CORS Error** | ਫਰੰਟਐਂਡ ਬੈਕਐਂਡ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦਾ | ਯਕੀਨੀ ਬਣਾਓ ਕਿ FastAPI CORSMiddleware ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕਨਫਿਗਰ ਕੀਤਾ ਗਿਆ ਹੈ |
-| **API Key Error** | 401 Unauthorized ਜਵਾਬ | ਆਪਣੇ `GITHUB_TOKEN` ਐਨਵਾਇਰਮੈਂਟ ਵੈਰੀਏਬਲ ਦੀ ਜਾਂਚ ਕਰੋ |
-| **Connection Refused** | ਫਰੰਟਐਂਡ ਵਿੱਚ ਨੈੱਟਵਰਕ ਗਲਤੀਆਂ | ਬੈਕਐਂਡ URL ਅਤੇ Flask ਸਰਵਰ ਚੱਲ ਰਿਹਾ ਹੈ ਜਾਂ ਨਹੀਂ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ |
-| **No AI Response** | ਖਾਲੀ ਜਾਂ ਗਲਤੀ ਜਵਾਬ | API ਕੋਟਾ ਜਾਂ ਪ੍ਰਮਾਣਿਕਤਾ ਸਮੱਸਿਆਵਾਂ ਲਈ ਬੈਕਐਂਡ ਲਾਗ ਦੀ ਜਾਂਚ ਕਰੋ |
+| **CORS ਗਲਤੀ** | ਫਰੰਟਐਂਡ ਬੈਕਐਂਡ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦਾ | ਯਕੀਨੀ ਬਣਾਓ ਕਿ FastAPI CORSMiddleware ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕਨਫਿਗਰ ਕੀਤਾ ਗਿਆ ਹੈ |
+| **API ਕੁੰਜੀ ਗਲਤੀ** | 401 Unauthorized ਜਵਾਬ | ਆਪਣੇ `GITHUB_TOKEN` ਵਾਤਾਵਰਣ ਚਰਿੱਤਰ ਦੀ ਜਾਂਚ ਕਰੋ |
+| **ਕਨੈਕਸ਼ਨ ਰਿਫਿਊਜ਼ਡ** | ਫਰੰਟਐਂਡ ਵਿੱਚ ਨੈੱਟਵਰਕ ਗਲਤੀਆਂ | ਬੈਕਐਂਡ URL ਅਤੇ Flask ਸਰਵਰ ਚੱਲ ਰਿਹਾ ਹੈ ਇਹ ਯਕੀਨੀ ਬਣਾਓ |
+| **ਕੋਈ AI ਜਵਾਬ ਨਹੀਂ** | ਖਾਲੀ ਜਾਂ ਗਲਤੀ ਜਵਾਬ | API ਕੋਟਾ ਜਾਂ ਪ੍ਰਮਾਣਿਕਤਾ ਸਮੱਸਿਆਵਾਂ ਲਈ ਬੈਕਐਂਡ ਲਾਗ ਦੀ ਜਾਂਚ ਕਰੋ |
 
 **ਆਮ ਡੀਬੱਗਿੰਗ ਕਦਮ:**
-- **ਜਾਂਚ ਕਰੋ** ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਕਨਸੋਲ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਲਤੀਆਂ
-- **ਪੁਸ਼ਟੀ ਕਰੋ** ਨੈੱਟਵਰਕ ਟੈਬ ਸਫਲ API ਰਿਕਵੈਸਟ ਅਤੇ ਜਵਾਬ ਦਿਖਾਉਂਦਾ ਹੈ
-- **ਸਮੀਖਿਆ ਕਰੋ** ਬੈਕਐਂਡ ਟਰਮੀਨਲ ਆਉਟਪੁੱਟ ਪਾਇਥਨ ਗਲਤੀਆਂ ਜਾਂ API ਸਮੱਸਿਆਵਾਂ ਲਈ
-- **ਪੁਸ਼ਟੀ ਕਰੋ** ਐਨਵਾਇਰਮੈਂਟ ਵੈਰੀਏਬਲ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਲੋਡ ਕੀਤੇ ਗਏ ਹਨ ਅਤੇ ਪਹੁੰਚਯੋਗ ਹਨ
+- **ਜਾਂਚ ਕਰੋ** ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਕਨਸੋਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਲਤੀਆਂ ਲਈ
+- **ਯਕੀਨੀ ਬਣਾਓ** ਨੈੱਟਵਰਕ ਟੈਬ ਸਫਲ API ਬੇਨਤੀ ਅਤੇ ਜਵਾਬ ਦਿਖਾਉਂਦਾ ਹੈ
+- **ਸਮੀਖਿਆ ਕਰੋ** ਬੈਕਐਂਡ ਟਰਮੀਨਲ ਆਉਟਪੁੱਟ ਪਾਈਥਨ ਗਲਤੀਆਂ ਜਾਂ API ਸਮੱਸਿਆਵਾਂ ਲਈ
+- **ਪੁਸ਼ਟੀ ਕਰੋ** ਵਾਤਾਵਰਣ ਚਰਿੱਤਰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਲੋਡ ਅਤੇ ਪਹੁੰਚਯੋਗ ਹਨ
+
+## 📈 ਤੁਹਾਡੀ AI ਐਪਲੀਕੇਸ਼ਨ ਵਿਕਾਸ ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ
+
+```mermaid
+timeline
+    title Complete AI Application Development Journey
+    
+    section AI Foundations
+        Understanding Generative AI
+            : Grasp pattern recognition concepts
+            : Master AI parameter control
+            : Learn prompt engineering techniques
+        
+        GitHub Models Integration
+            : Navigate AI service platforms
+            : Handle authentication securely
+            : Optimize model parameters
+    
+    section Backend Development
+        Python API Architecture
+            : Build FastAPI applications
+            : Implement async operations
+            : Create secure endpoints
+        
+        AI Service Integration
+            : Connect to external AI APIs
+            : Handle rate limiting
+            : Implement error boundaries
+    
+    section Frontend Mastery
+        Modern JavaScript Patterns
+            : Master ES6 class architecture
+            : Implement async/await flows
+            : Build responsive interfaces
+        
+        Real-time User Experience
+            : Create dynamic chat interfaces
+            : Handle loading states
+            : Optimize user interactions
+    
+    section Production Readiness
+        Security & Performance
+            : Implement secure token management
+            : Prevent XSS vulnerabilities
+            : Optimize API performance
+        
+        Professional Deployment
+            : Build scalable architectures
+            : Create maintainable code
+            : Document development processes
+```
+
+**🎓 ਗ੍ਰੈਜੂਏਸ਼ਨ ਮੀਲਸਟੋਨ**: ਤੁਸੀਂ ਸਫਲਤਾਪੂਰਵਕ ਆਧੁਨਿਕ ਤਕਨਾਲੋਜੀਆਂ ਅਤੇ ਆਰਕੀਟੈਕਚਰਲ ਪੈਟਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਪੂਰੀ AI-ਚਲਿਤ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਈ ਹੈ। ਇਹ ਹੁਨਰ ਆਧੁਨਿਕ AI ਸਹਾਇਕਾਂ ਦੇ ਵਿਕਾਸ ਅਤੇ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦਾ ਅਧਾਰ ਹੈ।
+
+**🔄 ਅਗਲੇ ਪੱਧਰ ਦੀ ਯੋਗਤਾਵਾਂ**:
+- ਉੱਚ-ਸਤਰੀ AI ਫਰੇਮਵਰਕ (LangChain, LangGraph) ਦੀ ਖੋਜ ਕਰਨ ਲਈ ਤਿਆਰ
+- ਬਹੁ-ਮੋਡਲ AI ਐਪਲੀਕੇਸ਼ਨ (ਟੈਕਸਟ, ਚਿੱਤਰ, ਆਵਾਜ਼) ਬਣਾਉਣ ਲਈ ਤਿਆਰ
+- ਵੈਕਟਰ ਡਾਟਾਬੇਸ ਅਤੇ ਰੀਟਰੀਵਲ ਸਿਸਟਮ ਲਾਗੂ ਕਰਨ ਲਈ ਸਜਗ
+- ਮਸ਼ੀਨ ਲਰਨਿੰਗ ਅਤੇ AI ਮਾਡਲ ਫਾਈਨ-ਟਿਊਨਿੰਗ ਲਈ ਮਜ਼ਬੂਤ ​​ਅਧਾਰ
 
 ## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀
 
 Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
 
-**ਵੇਰਵਾ:** ਗੱਲਬਾਤ ਦਾ ਇਤਿਹਾਸ ਅਤੇ ਸੁਨੇਹਾ ਸਥਿਰਤਾ ਸ਼ਾਮਲ ਕਰਕੇ ਚੈਟ ਅਸਿਸਟੈਂਟ ਨੂੰ ਵਧਾਓ। ਇਹ ਚੈਲੈਂਜ ਤੁਹਾਨੂੰ ਚੈਟ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਸਟੇਟ ਨੂੰ ਮੈਨੇਜ ਕਰਨ ਅਤੇ ਡਾਟਾ ਸਟੋਰੇਜ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੀ ਸਮਝ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
+**ਵੇਰਵਾ:** ਗੱਲਬਾਤ ਦਾ ਇਤਿਹਾਸ ਅਤੇ ਸੁਨੇਹਾ ਸਥਿਰਤਾ ਸ਼ਾਮਲ ਕਰਕੇ ਚੈਟ ਸਹਾਇਕ ਨੂੰ ਵਧਾਓ।
+- **ਸਮਾਰਟ ਸੁਝਾਅ** ਗੱਲਬਾਤ ਦੇ ਵਿਸ਼ੇ ਅਨੁਸਾਰ ਲਾਗੂ ਕਰੋ  
+- **ਆਮ ਸਵਾਲਾਂ ਲਈ** ਤੇਜ਼ ਜਵਾਬ ਬਟਨ ਬਣਾਓ  
 
-**ਪ੍ਰੋੰਪਟ:** ਚੈਟ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਸੋਧੋ ਤਾਂ ਜੋ ਗੱਲਬਾਤ ਦਾ ਇਤਿਹਾਸ ਸੈਸ਼ਨ ਦੇ ਦੌਰਾਨ ਸਥਿਰ ਰਹੇ। ਚੈਟ ਸੁਨੇਹਿਆਂ ਨੂੰ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਸੇਵ ਕਰਨ, ਪੰਨਾ ਲੋਡ ਹੋਣ 'ਤੇ ਗੱਲਬਾਤ ਦਾ ਇਤਿਹਾਸ ਦਿਖਾਉਣ, ਅਤੇ "Clear History" ਬਟਨ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਵਿਵਸਥਾ ਸ਼ਾਮਲ ਕਰੋ। ਚੈਟ ਅਨੁਭਵ ਨੂੰ ਹੋਰ ਹਕੀਕਤਮਈ ਬਣਾਉਣ ਲਈ ਟਾਈਪਿੰਗ ਇੰਡਿਕੇਟਰ ਅਤੇ ਸੁਨੇਹਾ ਟਾਈਮਸਟੈਂਪ ਵੀ ਸ਼ਾਮਲ ਕਰੋ।
+> 🎯 **ਸਿੱਖਣ ਦਾ ਉਦੇਸ਼**: ਇਹ ਬੋਨਸ ਚੁਣੌਤੀਆਂ ਤੁਹਾਨੂੰ ਉੱਚ-ਪੱਧਰੀ ਵੈੱਬ ਵਿਕਾਸ ਪੈਟਰਨ ਅਤੇ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਤਕਨੀਕਾਂ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ ਜੋ ਉਤਪਾਦਨ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।  
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ਬਾਰੇ ਹੋਰ ਜਾਣੋ।
+## ਸਾਰ ਅਤੇ ਅਗਲੇ ਕਦਮ  
 
-## ਅਸਾਈਨਮੈਂਟ: ਆਪਣਾ ਨਿੱਜੀ AI ਅਸਿਸਟੈਂਟ ਬਣਾਓ
+ਵਧਾਈ ਹੋਵੇ! ਤੁਸੀਂ ਸਫਲਤਾਪੂਰਵਕ ਸ਼ੁਰੂ ਤੋਂ ਇੱਕ ਪੂਰਾ AI-ਚਾਲਤ ਚੈਟ ਸਹਾਇਕ ਬਣਾਇਆ ਹੈ। ਇਸ ਪ੍ਰੋਜੈਕਟ ਨੇ ਤੁਹਾਨੂੰ ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਤਕਨਾਲੋਜੀਆਂ ਅਤੇ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਨਾਲ ਹੱਥ-ਅਨੁਭਵ ਦਿੱਤਾ ਹੈ – ਜੋ ਅੱਜ ਦੇ ਤਕਨਾਲੋਜੀ ਦ੍ਰਿਸ਼ ਵਿੱਚ ਬਹੁਤ ਕੀਮਤੀ ਹੁਨਰ ਹਨ।  
 
-ਹੁਣ ਤੁਸੀਂ ਆਪਣਾ AI ਅਸਿਸਟੈਂਟ ਲਾਗੂ ਕਰਨ ਜਾ ਰਹੇ ਹੋ। ਸਿਰਫ ਟਿਊਟੋਰਿਅਲ ਕੋਡ ਨੂੰ ਦੁਹਰਾਉਣ ਦੀ ਬਜਾਏ, ਇਹ ਤੁਹਾਡੇ ਆਪਣੇ ਰੁਚੀਆਂ ਅਤੇ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਨੂੰ ਦਰਸਾਉਣ ਵਾਲੀ ਚੀਜ਼ ਬਣਾਉਣ ਦਾ ਮੌਕਾ ਹੈ।
+### ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕੀਤਾ ਹੈ  
 
-### ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਲੋੜਾਂ
+ਇਸ ਪਾਠ ਦੌਰਾਨ, ਤੁਸੀਂ ਕਈ ਮਹੱਤਵਪੂਰਨ ਤਕਨਾਲੋਜੀਆਂ ਅਤੇ ਧਾਰਨਾਵਾਂ ਵਿੱਚ ਮਾਹਰਤਾ ਹਾਸਲ ਕੀਤੀ ਹੈ:  
 
-ਆਓ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇੱਕ ਸਾਫ਼, ਸੁਗਠਿਤ ਸਟ੍ਰਕਚਰ ਨਾਲ ਸੈਟਅਪ ਕਰੀਏ:
+**ਬੈਕਐਂਡ ਵਿਕਾਸ:**  
+- **GitHub Models API** ਨਾਲ AI ਫੰਕਸ਼ਨਲਿਟੀ ਲਈ ਇੰਟੀਗ੍ਰੇਟ ਕੀਤਾ  
+- **Flask** ਦੀ ਵਰਤੋਂ ਕਰਕੇ RESTful API ਬਣਾਇਆ ਜਿਸ ਵਿੱਚ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਗਲਤੀ ਸੰਭਾਲਣ ਦੀ ਵਿਵਸਥਾ ਹੈ  
+- **ਪ੍ਰੋਟੈਕਟਡ ਆਥੰਟੀਕੇਸ਼ਨ** ਨੂੰ ਇੰਵਾਇਰਮੈਂਟ ਵੈਰੀਏਬਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲਾਗੂ ਕੀਤਾ  
+- **CORS** ਨੂੰ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਦੇ ਵਿਚਕਾਰ ਕ੍ਰਾਸ-ਓਰਿਜਨ ਰਿਕਵੈਸਟਾਂ ਲਈ ਕਨਫਿਗਰ ਕੀਤਾ  
 
-```text
-my-ai-assistant/
-├── backend/
-│   ├── api.py          # Your FastAPI server
-│   ├── llm.py          # AI integration functions
-│   ├── .env            # Your secrets (keep this safe!)
-│   └── requirements.txt # Python dependencies
-├── frontend/
-│   ├── index.html      # Your chat interface
-│   ├── app.js          # The JavaScript magic
-│   └── styles.css      # Make it look amazing
-└── README.md           # Tell the world about your creation
+**ਫਰੰਟਐਂਡ ਵਿਕਾਸ:**  
+- **ਸੈਮੈਂਟਿਕ HTML** ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਰਿਸਪਾਂਸਿਵ ਚੈਟ ਇੰਟਰਫੇਸ ਬਣਾਇਆ  
+- **ਮਾਡਰਨ ਜਾਵਾਸਕ੍ਰਿਪਟ** async/await ਅਤੇ ਕਲਾਸ-ਅਧਾਰਤ ਆਰਕੀਟੈਕਚਰ ਨਾਲ ਲਾਗੂ ਕੀਤਾ  
+- **CSS Grid, Flexbox ਅਤੇ ਐਨੀਮੇਸ਼ਨ** ਨਾਲ ਇੱਕ ਆਕਰਸ਼ਕ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਡਿਜ਼ਾਈਨ ਕੀਤਾ  
+- **ਐਕਸੈਸਬਿਲਿਟੀ ਫੀਚਰ** ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਪ੍ਰਿੰਸਿਪਲਾਂ ਸ਼ਾਮਲ ਕੀਤੇ  
+
+**ਫੁੱਲ-ਸਟੈਕ ਇੰਟੀਗ੍ਰੇਸ਼ਨ:**  
+- **HTTP API ਕਾਲਾਂ** ਰਾਹੀਂ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਨੂੰ ਜੋੜਿਆ  
+- **ਰਿਅਲ-ਟਾਈਮ ਯੂਜ਼ਰ ਇੰਟਰੈਕਸ਼ਨ** ਅਤੇ ਅਸਿੰਕ੍ਰੋਨਸ ਡਾਟਾ ਫਲੋ ਸੰਭਾਲਿਆ  
+- **ਗਲਤੀ ਸੰਭਾਲਣ** ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਯੂਜ਼ਰ ਫੀਡਬੈਕ ਲਾਗੂ ਕੀਤਾ  
+- **ਯੂਜ਼ਰ ਇਨਪੁਟ ਤੋਂ AI ਜਵਾਬ ਤੱਕ ਪੂਰੇ ਐਪਲੀਕੇਸ਼ਨ ਵਰਕਫਲੋ ਦੀ ਜਾਂਚ ਕੀਤੀ**  
+
+### ਮੁੱਖ ਸਿੱਖਣ ਦੇ ਨਤੀਜੇ  
+
+```mermaid
+mindmap
+  root((AI Chat App Skills))
+    API Integration
+      Authentication
+      Error Handling
+      Async Programming
+    Web Development
+      HTML5 Semantics
+      Modern CSS
+      ES6+ JavaScript
+    User Experience
+      Responsive Design
+      Accessibility
+      Real-time Interaction
+    AI Understanding
+      Prompt Engineering
+      Model Parameters
+      Conversation Flow
 ```
+  
+ਇਸ ਪ੍ਰੋਜੈਕਟ ਨੇ ਤੁਹਾਨੂੰ AI-ਚਾਲਤ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦੇ ਮੂਲ ਸਿਧਾਂਤਾਂ ਨਾਲ ਜਾਣੂ ਕਰਵਾਇਆ ਹੈ, ਜੋ ਵੈੱਬ ਵਿਕਾਸ ਦਾ ਭਵਿੱਖ ਦਰਸਾਉਂਦਾ ਹੈ। ਹੁਣ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ ਕਿਵੇਂ ਰਵਾਇਤੀ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ AI ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ, ਜੋ ਬੁੱਧੀਮਾਨ ਅਤੇ ਜਵਾਬਦੇਹ ਯੂਜ਼ਰ ਅਨੁਭਵ ਪੈਦਾ ਕਰਦੇ ਹਨ।  
+
+### ਪੇਸ਼ੇਵਰ ਅਰਜ਼ੀਆਂ  
+
+ਇਸ ਪਾਠ ਵਿੱਚ ਵਿਕਸਿਤ ਕੀਤੇ ਗਏ ਹੁਨਰ ਆਧੁਨਿਕ ਸੌਫਟਵੇਅਰ ਵਿਕਾਸ ਕਰੀਅਰਾਂ ਲਈ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ:  
+
+- **ਮਾਡਰਨ ਫਰੇਮਵਰਕ ਅਤੇ APIs** ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫੁੱਲ-ਸਟੈਕ ਵੈੱਬ ਵਿਕਾਸ  
+- **ਵੈੱਬ ਅਤੇ ਮੋਬਾਈਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ AI ਇੰਟੀਗ੍ਰੇਸ਼ਨ**  
+- **ਮਾਈਕ੍ਰੋਸਰਵਿਸ ਆਰਕੀਟੈਕਚਰ ਲਈ API ਡਿਜ਼ਾਈਨ ਅਤੇ ਵਿਕਾਸ**  
+- **ਐਕਸੈਸਬਿਲਿਟੀ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ 'ਤੇ ਧਿਆਨ ਦੇ ਨਾਲ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਵਿਕਾਸ**  
+- **ਡੈਵਓਪਸ ਪ੍ਰੈਕਟਿਸ** ਜਿਸ ਵਿੱਚ ਇੰਵਾਇਰਮੈਂਟ ਕਨਫਿਗਰੇਸ਼ਨ ਅਤੇ ਡਿਪਲੌਇਮੈਂਟ ਸ਼ਾਮਲ ਹਨ  
+
+### ਆਪਣੀ AI ਵਿਕਾਸ ਯਾਤਰਾ ਜਾਰੀ ਰੱਖਣਾ  
+
+**ਅਗਲੇ ਸਿੱਖਣ ਦੇ ਕਦਮ:**  
+- **ਵਧੇਰੇ ਉੱਚ-ਪੱਧਰੀ AI ਮਾਡਲ ਅਤੇ APIs (GPT-4, Claude, Gemini)** ਦੀ ਖੋਜ ਕਰੋ  
+- **AI ਜਵਾਬਾਂ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਪ੍ਰੋਮਪਟ ਇੰਜੀਨੀਅਰਿੰਗ ਤਕਨੀਕਾਂ ਸਿੱਖੋ**  
+- **ਗੱਲਬਾਤ ਡਿਜ਼ਾਈਨ ਅਤੇ ਚੈਟਬੋਟ ਯੂਜ਼ਰ ਅਨੁਭਵ ਸਿਧਾਂਤਾਂ ਦਾ ਅਧਿਐਨ ਕਰੋ**  
+- **AI ਸੁਰੱਖਿਆ, ਨੈਤਿਕਤਾ ਅਤੇ ਜ਼ਿੰਮੇਵਾਰ AI ਵਿਕਾਸ ਅਭਿਆਸਾਂ ਦੀ ਜਾਂਚ ਕਰੋ**  
+- **ਗੱਲਬਾਤ ਮੈਮੋਰੀ ਅਤੇ ਸੰਦਰਭ ਜਾਗਰੂਕਤਾ ਨਾਲ ਵਧੇਰੇ ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ**  
+
+**ਉੱਚ-ਪੱਧਰੀ ਪ੍ਰੋਜੈਕਟ ਵਿਚਾਰ:**  
+- AI ਮਾਡਰੇਸ਼ਨ ਨਾਲ ਮਲਟੀ-ਯੂਜ਼ਰ ਚੈਟ ਰੂਮ  
+- AI-ਚਾਲਤ ਗਾਹਕ ਸੇਵਾ ਚੈਟਬੋਟ  
+- ਵਿਅਕਤੀਗਤ ਸਿੱਖਣ ਨਾਲ ਸਿੱਖਿਆ ਟਿਊਟੋਰਿੰਗ ਸਹਾਇਕ  
+- ਵੱਖ-ਵੱਖ AI ਪੁਰਸ਼ਨਾਲਿਟੀਜ਼ ਨਾਲ ਰਚਨਾਤਮਕ ਲਿਖਤ ਸਹਿਯੋਗੀ  
+- ਡਿਵੈਲਪਰਾਂ ਲਈ ਤਕਨੀਕੀ ਦਸਤਾਵੇਜ਼ ਸਹਾਇਕ  
+
+## GitHub Codespaces ਨਾਲ ਸ਼ੁਰੂਆਤ  
+
+ਕੀ ਤੁਸੀਂ ਇਸ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਕਲਾਉਡ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਵਿੱਚ ਅਜ਼ਮਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ? GitHub Codespaces ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇੱਕ ਪੂਰਾ ਵਿਕਾਸ ਸੈਟਅਪ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ AI ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਬਿਨਾਂ ਸਥਾਨਕ ਸੈਟਅਪ ਦੀ ਲੋੜ ਦੇ ਅਜ਼ਮਾਉਣ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ।  
+
+### ਆਪਣੇ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਨੂੰ ਸੈਟਅਪ ਕਰਨਾ  
+
+**ਪਹਿਲਾ ਕਦਮ: ਟੈਂਪਲੇਟ ਤੋਂ ਬਣਾਓ**  
+- **[Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)** 'ਤੇ ਜਾਓ  
+- **"Use this template"** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ (ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਤੁਸੀਂ GitHub ਵਿੱਚ ਲੌਗਇਨ ਹੋ)  
+
+![ਟੈਂਪਲੇਟ ਇੰਟਰਫੇਸ ਜਿਸ ਵਿੱਚ ਹਰਾ "Use this template" ਬਟਨ ਦਿਖਾਇਆ ਗਿਆ ਹੈ](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pa.png)  
+
+**ਦੂਜਾ ਕਦਮ: Codespaces ਲਾਂਚ ਕਰੋ**  
+- **ਆਪਣੇ ਨਵੇਂ ਬਣਾਏ ਗਏ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਖੋਲ੍ਹੋ**  
+- **ਹਰੇ "Code" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ "Codespaces" ਚੁਣੋ**  
+- **"Create codespace on main" ਚੁਣੋ** ਆਪਣੇ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ  
+
+![ਕੋਡਸਪੇਸ ਇੰਟਰਫੇਸ ਜਿਸ ਵਿੱਚ ਕਲਾਉਡ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਵਿਕਲਪ ਦਿਖਾਏ ਗਏ ਹਨ](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pa.png)  
+
+**ਤੀਜਾ ਕਦਮ: ਵਾਤਾਵਰਣ ਕਨਫਿਗਰੇਸ਼ਨ**  
+ਜਦੋਂ ਤੁਹਾਡਾ Codespace ਲੋਡ ਹੁੰਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਪਹੁੰਚ ਮਿਲੇਗੀ:  
+- **ਪਹਿਲਾਂ ਤੋਂ ਇੰਸਟਾਲ ਕੀਤੇ Python, Node.js ਅਤੇ ਸਾਰੇ ਜ਼ਰੂਰੀ ਵਿਕਾਸ ਟੂਲ**  
+- **ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ VS Code ਇੰਟਰਫੇਸ**  
+- **ਬੈਕਐਂਡ ਅਤੇ ਫਰੰਟਐਂਡ ਸਰਵਰ ਚਲਾਉਣ ਲਈ ਟਰਮੀਨਲ ਪਹੁੰਚ**  
+- **ਆਪਣੇ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੀ ਜਾਂਚ ਲਈ ਪੋਰਟ ਫਾਰਵਰਡਿੰਗ**  
+
+**Codespaces ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:**  
+- **ਸਥਾਨਕ ਵਾਤਾਵਰਣ ਸੈਟਅਪ ਅਤੇ ਕਨਫਿਗਰੇਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ**  
+- **ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਸਥਿਰ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**  
+- **ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਪਹਿਲਾਂ ਤੋਂ ਕਨਫਿਗਰ ਕੀਤੇ ਟੂਲ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ**  
+- **ਵਰਜਨ ਕੰਟਰੋਲ ਅਤੇ ਸਹਿਯੋਗ ਲਈ GitHub ਨਾਲ ਸਹੀ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ**  
 
-### ਕੋਰ ਲਾਗੂ ਕਰਨ ਦੇ ਕੰਮ
-
-**ਬੈਕਐਂਡ ਵਿਕਾਸ:**
-- **ਲਓ** ਸਾਡਾ FastAPI ਕੋਡ ਅਤੇ ਇਸਨੂੰ ਆਪਣਾ ਬਣਾਓ
-- **ਬਣਾਓ** ਇੱਕ ਵਿਲੱਖਣ AI ਪੁਰਸ਼ – ਸ਼ਾਇਦ ਇੱਕ ਮਦਦਗਾਰ ਖਾਣਾ ਬਣਾਉਣ ਵਾਲਾ ਸਹਾਇਕ, ਇੱਕ ਰਚਨਾਤਮਕ ਲਿਖਣ ਵਾਲਾ ਸਾਥੀ, ਜਾਂ ਇੱਕ ਪੜ੍ਹਾਈ ਸਾਥੀ?
-- **ਸ਼ਾਮਲ ਕਰੋ** ਮਜ਼ਬੂਤ ਗਲਤੀ ਸੰਭਾਲਣ ਤਾਂ ਜੋ ਤੁਹਾਡਾ ਐਪ ਗਲਤੀਆਂ ਹੋਣ 'ਤੇ ਟੁੱਟੇ ਨਾ
-- **ਲਿਖੋ** ਸਪਸ਼ਟ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਜੋ ਕਿਸੇ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੇ ਕਿ ਤੁਹਾਡਾ API ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ
-
-**ਫਰੰਟਐਂਡ ਵਿਕਾਸ:**
-- **ਬਣਾਓ** ਇੱਕ ਚੈਟ ਇੰਟਰਫੇਸ ਜੋ ਸਹੀ ਅਤੇ ਸੁਹਜ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ
-- **ਲਿਖੋ** ਸਾਫ਼, ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਜੋ ਤੁਸੀਂ ਹੋਰ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਦਿਖਾਉਣ 'ਤੇ ਮਾਣ ਕਰਦੇ ਹੋ
-- **ਡਿਜ਼ਾਈਨ ਕਰੋ** ਕਸਟਮ ਸਟਾਈਲਿੰਗ ਜੋ ਤੁਹਾਡੇ AI ਦੀ ਪੁਰਸ਼ਤਾ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ – ਮਜ਼ੇਦਾਰ ਅਤੇ ਰੰਗੀਨ? ਸਾਫ਼ ਅਤੇ ਘੱਟੋ ਘੱਟ? ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ!
-- **ਯਕੀਨੀ ਬਣਾਓ** ਇਹ ਦੋਵਾਂ ਫੋਨ ਅਤੇ ਕੰਪਿਊਟਰਾਂ 'ਤੇ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ
-
-**ਪ੍ਰਸਿੱਧੀ ਦੀਆਂ ਲੋੜਾਂ:**
-- **ਚੁਣੋ** ਆਪਣੇ AI ਅਸਿਸਟੈਂਟ ਲਈ ਇੱਕ ਵਿਲੱਖਣ ਨਾਮ ਅਤੇ ਪੁਰਸ਼ਤਾ – ਸ਼ਾਇਦ ਕੁਝ ਜੋ ਤੁਹਾਡੇ ਰੁਚੀਆਂ ਜਾਂ ਤੁਹਾਡੇ ਹੱਲ ਕਰਨ ਵਾਲੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ
-- **ਕਸਟਮਾਈਜ਼ ਕਰੋ** ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ ਜੋ ਤੁਹਾਡੇ ਅਸਿਸਟੈਂਟ ਦੇ ਮੂਡ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ
-- **ਲਿਖੋ** ਇੱਕ ਆਕਰਸ਼ਕ ਸਵਾਗਤ ਸੁਨੇਹਾ ਜੋ ਲੋਕਾਂ ਨੂੰ ਗੱਲਬਾਤ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਪ੍ਰੇਰਿਤ ਕਰਦਾ ਹੈ
-- **ਟੈਸਟ ਕਰੋ** ਆਪਣੇ ਅਸਿਸਟੈਂਟ ਨੂੰ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ ਸਵਾਲਾਂ ਨਾਲ ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਇਹ ਕਿਵੇਂ ਜਵਾਬ ਦਿੰਦਾ ਹੈ
-
-### ਵਧੇਰੇ ਸੁਝਾਅ (ਵਿਕਲਪਿਕ)
-
-ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਅਗਲੇ ਪੱਧਰ 'ਤੇ ਲਿਜਾਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਇੱਥੇ ਕੁਝ ਮਜ਼ੇਦਾਰ ਵਿਚਾਰ ਹਨ:
-
-| ਫੀਚਰ | ਵੇਰਵਾ | ਤੁਹਾਨੂੰ ਆਉਣ ਵਾਲੀਆਂ ਕੁਸ਼ਲਤਾਵਾਂ |
-|---------|-------------|------------------------|
-| **ਸੁਨੇਹਾ ਇਤਿਹਾਸ** | ਪੰਨਾ ਰੀਫ੍ਰੈਸ਼ ਤੋਂ ਬਾਅਦ ਵੀ ਗੱਲਬਾਤ ਨੂੰ ਯਾਦ ਰੱਖੋ | localStorage ਨਾਲ ਕੰਮ ਕਰਨਾ, JSON ਹੈਂਡਲਿੰਗ |
-| **ਟਾਈਪਿੰਗ ਇੰਡਿਕੇਟਰ** | "AI is typing..." ਦਿਖਾਓ ਜਦੋਂ ਜਵਾਬ ਦੀ ਉਡੀਕ ਕਰ ਰਹੇ ਹੋ | CSS ਐਨੀਮੇਸ਼ਨ, async ਪ੍ਰੋਗਰਾਮਿੰਗ |
-| **ਸੁਨੇਹਾ ਟਾਈਮਸਟੈਂਪ** | ਦਿਖਾਓ ਕਿ ਹਰ ਸੁਨੇਹਾ ਕਦੋਂ ਭੇਜਿਆ ਗਿਆ ਸੀ | ਮਿਤੀ/ਸਮਾਂ ਫਾਰਮੈਟਿੰਗ, UX ਡਿਜ਼ਾਈਨ |
-| **ਚੈਟ ਐਕਸਪੋਰਟ ਕਰੋ** | ਯੂਜ਼ਰਾਂ ਨੂੰ ਆਪਣੀ ਗੱਲਬਾਤ ਡਾਊਨਲੋਡ ਕਰਨ ਦਿਓ | ਫਾਈਲ ਹੈਂਡਲਿੰਗ, ਡਾਟਾ ਐਕਸਪੋਰਟ |
-| **ਥੀਮ ਸਵਿੱਚਿੰਗ** | ਲਾਈਟ/ਡਾਰਕ ਮੋਡ ਟੌਗਲ | CSS ਵੈਰੀਏਬਲ, ਯੂਜ਼ਰ ਪਸੰਦਾਂ |
-| **ਵਾਇਸ ਇਨਪੁਟ** | ਸਪੀਚ-ਟੂ-ਟੈਕਸਟ ਫੰਕਸ਼ਨਾਲਿਟੀ ਸ਼ਾਮਲ ਕਰੋ | ਵੈੱਬ APIs, ਐਕਸੈਸਿਬਿਲਟੀ |
-
-### ਟੈਸਟਿੰਗ ਅਤੇ ਦਸਤਾਵੇਜ਼ੀਕਰਨ
-
-**ਕੁਆਲਿਟੀ ਅਸ਼ੋਰੈਂਸ:**
-- **ਟੈਸਟ ਕਰੋ** ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਵੱਖ-ਵੱਖ ਇਨਪੁਟ ਕਿਸਮਾਂ ਅਤੇ ਐਜ ਕੇਸਾਂ ਨਾਲ
-- **ਪੁਸ਼ਟੀ ਕਰੋ** ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ
-- **ਜਾਂਚ ਕਰੋ** ਐਕਸੈਸਿਬਿਲਟੀ ਨੂੰ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਨਾਲ
-- **ਵੈਰੀਫਾਈ ਕਰੋ** HTML ਅਤੇ CSS ਮਿਆਰਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ
-
-**ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਦੀਆਂ ਲੋੜਾਂ:**
-- **ਲਿਖੋ** ਇੱਕ README.md ਜੋ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਅਤੇ ਇਸਨੂੰ ਕਿਵੇਂ ਚਲਾਉਣਾ ਹੈ, ਦਾ ਵੇਰਵਾ ਦਿੰਦਾ ਹੈ
-- **ਸ਼ਾਮਲ ਕਰੋ** ਤੁਹਾਡੇ ਚੈਟ ਇੰਟਰਫੇਸ ਦੇ ਕਾਰਵਾਈ ਵਿੱਚ ਸਕ੍ਰੀਨਸ਼ਾਟ
-- **ਦਸਤਾਵੇਜ਼ ਕਰੋ** ਕੋਈ ਵੀ ਵਿਲੱਖਣ ਫੀਚਰ ਜਾਂ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਜੋ ਤੁਸੀਂ ਸ਼ਾਮਲ ਕੀਤੇ ਹਨ
-- **ਪੇਸ਼ ਕਰੋ** ਹੋਰ ਡਿਵੈਲਪਰਾਂ ਲਈ ਸਪਸ਼ਟ ਸੈਟਅਪ ਨਿਰਦੇਸ਼
-
-### ਸਬਮਿਸ਼ਨ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼
-
-**ਪ੍ਰੋਜੈਕਟ ਡਿਲੀਵਰੇਬਲਜ਼:**
-1. ਸਾਰੇ ਸਰੋਤ ਕੋਡ ਨਾਲ ਪੂਰਾ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ
-2. README.md ਪ੍ਰੋਜੈਕਟ ਵੇਰਵਾ ਅਤੇ ਸੈਟਅਪ ਨਿਰਦੇਸ਼ਾਂ ਨਾਲ
-3. ਤੁਹਾਡੇ ਚੈਟ ਅਸਿਸਟੈਂਟ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦਿਖਾਉਣ ਵਾਲੇ ਸਕ੍ਰੀਨਸ਼ਾਟ
-4. ਤੁਸੀਂ ਕੀ ਸਿੱਖਿਆ ਅਤੇ ਤੁਹਾਨੂੰ ਕਿਹੜੀਆਂ ਚੁਣੌਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪਿਆ, ਇਸ 'ਤੇ ਛੋਟਾ ਵਿਚਾਰ
-
-**ਮੁਲਾਂਕਣ ਮਾਪਦੰਡ:**
-- **ਫੰਕਸ਼ਨਾਲਿਟੀ**: ਕੀ ਚੈਟ ਅਸਿਸਟੈਂਟ ਉਮੀਦ ਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦਾ ਹੈ?
-- **ਕੋਡ ਗੁਣਵੱਤਾ**: ਕੀ ਕੋਡ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੁਗਠਿਤ, ਟਿੱਪਣੀ ਕੀਤੀ ਗਈ ਹੈ, ਅਤੇ ਰੱਖ-ਰਖਾਅਯੋਗ ਹੈ?
-- **ਡਿਜ਼ਾਈਨ**: ਕੀ ਇੰਟਰਫੇਸ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਅਤੇ ਯੂਜ਼ਰ-ਫ੍ਰੈਂਡਲੀ ਹੈ?
-- **ਰਚਨਾਤਮਕਤਾ**: ਤੁਹਾਡੀ ਲਾਗੂ ਕਰਨ ਦੀ ਵਿਲੱਖਣਤਾ ਅਤੇ ਵਿਅਕਤੀਗਤਤਾ ਕਿੰਨੀ ਹੈ?
-- **ਦਸਤਾਵੇਜ਼ੀਕਰਨ**: ਕੀ ਸੈਟਅਪ ਨਿਰਦੇਸ਼ ਸਪਸ਼ਟ ਅਤੇ ਪੂਰੇ ਹਨ?
-
-> 💡 **ਸਫਲਤਾ ਟਿਪ**: ਪਹਿਲਾਂ ਮੂਲ ਲੋੜਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ, ਫਿਰ ਵਧੇਰੇ ਸੁਧਾਰ ਸ਼ਾਮਲ ਕਰੋ ਜਦੋਂ ਸਭ ਕੁਝ ਕੰਮ ਕਰ ਰਿਹਾ ਹੋ
-- **ਪੋਰਟ ਫਾਰਵਰਡਿੰਗ** ਆਪਣੇ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ
-
-**ਕੋਡਸਪੇਸ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:**
-- **ਖਤਮ ਕਰਦਾ ਹੈ** ਸਥਾਨਕ ਵਾਤਾਵਰਣ ਸੈਟਅਪ ਅਤੇ ਕਨਫਿਗਰੇਸ਼ਨ ਸਮੱਸਿਆਵਾਂ
-- **ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਇੱਕੋ ਜਿਹਾ ਵਿਕਾਸ ਵਾਤਾਵਰਣ
-- **ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਲਈ ਪਹਿਲਾਂ ਤੋਂ ਕਨਫਿਗਰ ਕੀਤੇ ਟੂਲ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ
-- **ਪੇਸ਼ ਕਰਦਾ ਹੈ** ਵਰਜਨ ਕੰਟਰੋਲ ਅਤੇ ਸਹਿਯੋਗ ਲਈ GitHub ਨਾਲ ਬੇਹਤਰੀਨ ਇੰਟੀਗ੍ਰੇਸ਼ਨ
-
-> 🚀 **ਪ੍ਰੋ ਟਿਪ**: ਕੋਡਸਪੇਸ AI ਐਪਲੀਕੇਸ਼ਨ ਸਿੱਖਣ ਅਤੇ ਪ੍ਰੋਟੋਟਾਈਪ ਬਣਾਉਣ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ ਕਿਉਂਕਿ ਇਹ ਸਾਰੇ ਜਟਿਲ ਵਾਤਾਵਰਣ ਸੈਟਅਪ ਨੂੰ ਆਪਣੇ ਆਪ ਸੰਭਾਲਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਕਨਫਿਗਰੇਸ਼ਨ ਦੀ ਸਮੱਸਿਆਵਾਂ ਦੇ ਬਜਾਏ ਬਣਾਉਣ ਅਤੇ ਸਿੱਖਣ 'ਤੇ ਧਿਆਨ ਦੇ ਸਕਦੇ ਹੋ।
+> 🚀 **ਪ੍ਰੋ ਟਿਪ**: Codespaces ਸਿੱਖਣ ਅਤੇ ਪ੍ਰੋਟੋਟਾਈਪਿੰਗ AI ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ ਕਿਉਂਕਿ ਇਹ ਸਾਰੇ ਜਟਿਲ ਵਾਤਾਵਰਣ ਸੈਟਅਪ ਨੂੰ ਆਪਣੇ ਆਪ ਸੰਭਾਲਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਬਣਾਉਣ ਅਤੇ ਸਿੱਖਣ 'ਤੇ ਧਿਆਨ ਦੇਣ ਦਿੰਦਾ ਹੈ।  
 
 ---
 
diff --git a/translations/pa/README.md b/translations/pa/README.md
index 1ec80a293c..896fca1612 100644
--- a/translations/pa/README.md
+++ b/translations/pa/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3fd21589b9bb0a90b9c9dd7d587f7e43",
-  "translation_date": "2025-10-20T21:48:07+00:00",
+  "original_hash": "8b9d0562ea649b6012d1a67acc630681",
+  "translation_date": "2025-11-03T16:01:39+00:00",
   "source_file": "README.md",
   "language_code": "pa"
 }
@@ -19,17 +19,17 @@ CO_OP_TRANSLATOR_METADATA:
 
 [![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
 
-# ਸ਼ੁਰੂਆਤੀ ਲਈ ਵੈੱਬ ਵਿਕਾਸ - ਇੱਕ ਕੋਰਸ
+# ਸ਼ੁਰੂਆਤੀ ਵੈੱਬ ਵਿਕਾਸ - ਇੱਕ ਕੋਰਸ
 
-ਮਾਈਕਰੋਸਾਫਟ ਕਲਾਉਡ ਐਡਵੋਕੇਟਸ ਦੁਆਰਾ ਪੇਸ਼ ਕੀਤੇ 12 ਹਫ਼ਤਿਆਂ ਦੇ ਵਿਸਤ੍ਰਿਤ ਕੋਰਸ ਨਾਲ ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਮੂਲ ਭਾਗ ਸਿੱਖੋ। 24 ਪਾਠਾਂ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ, CSS ਅਤੇ HTML ਦੇ ਪ੍ਰਯੋਗਾਤਮਕ ਪ੍ਰਾਜੈਕਟਾਂ ਜਿਵੇਂ ਕਿ ਟੈਰਰੀਅਮ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਅਤੇ ਸਪੇਸ ਗੇਮਾਂ ਰਾਹੀਂ ਡੂੰਘਾਈ ਨਾਲ ਜਾਣਕਾਰੀ ਦਿੱਤੀ ਗਈ ਹੈ। ਕਵਿਜ਼, ਚਰਚਾ ਅਤੇ ਪ੍ਰੈਕਟਿਕਲ ਅਸਾਈਨਮੈਂਟਾਂ ਨਾਲ ਸ਼ਾਮਲ ਹੋਵੋ। ਆਪਣੀਆਂ ਯੋਗਤਾਵਾਂ ਨੂੰ ਵਧਾਓ ਅਤੇ ਸਾਡੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਪ੍ਰਾਜੈਕਟ-ਅਧਾਰਤ ਪੈਡਾਗੌਜੀ ਨਾਲ ਆਪਣੀ ਜਾਣਕਾਰੀ ਨੂੰ ਬਿਹਤਰ ਬਣਾਓ। ਅੱਜ ਹੀ ਆਪਣਾ ਕੋਡਿੰਗ ਯਾਤਰਾ ਸ਼ੁਰੂ ਕਰੋ!
+ਮਾਈਕਰੋਸਾਫਟ ਕਲਾਉਡ ਐਡਵੋਕੇਟਸ ਵੱਲੋਂ 12 ਹਫ਼ਤਿਆਂ ਦੇ ਵਿਸਤ੍ਰਿਤ ਕੋਰਸ ਨਾਲ ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਮੂਲ ਸਿਧਾਂਤ ਸਿੱਖੋ। 24 ਪਾਠਾਂ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ, CSS, ਅਤੇ HTML ਨੂੰ ਹੱਥ-ਅਨੁਭਵ ਪ੍ਰਾਜੈਕਟਾਂ ਜਿਵੇਂ ਕਿ ਟੈਰਰੀਅਮ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ, ਅਤੇ ਸਪੇਸ ਗੇਮਾਂ ਰਾਹੀਂ ਸਮਝਾਇਆ ਗਿਆ ਹੈ। ਕਵਿਜ਼, ਚਰਚਾ, ਅਤੇ ਪ੍ਰੈਕਟਿਕਲ ਅਸਾਈਨਮੈਂਟਾਂ ਨਾਲ ਜੁੜੋ। ਪ੍ਰਾਜੈਕਟ-ਅਧਾਰਿਤ ਪੈਡਾਗੌਜੀ ਨਾਲ ਆਪਣੀਆਂ ਯੋਗਤਾਵਾਂ ਨੂੰ ਵਧਾਓ ਅਤੇ ਆਪਣੇ ਗਿਆਨ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰੋ। ਅੱਜ ਹੀ ਆਪਣਾ ਕੋਡਿੰਗ ਸਫਰ ਸ਼ੁਰੂ ਕਰੋ!
 
 ਐਜ਼ਰ AI ਫਾਉਂਡਰੀ ਡਿਸਕੋਰਡ ਕਮਿਊਨਿਟੀ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ
 
 [![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
 
 ਇਹ ਸਰੋਤਾਂ ਦੀ ਵਰਤੋਂ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ:
-1. **ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਫੋਰਕ ਕਰੋ**: ਕਲਿੱਕ ਕਰੋ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
-2. **ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਕਲੋਨ ਕਰੋ**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+1. **ਰੀਪੋਜ਼ਟਰੀ ਨੂੰ ਫੋਰਕ ਕਰੋ**: ਕਲਿੱਕ ਕਰੋ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
+2. **ਰੀਪੋਜ਼ਟਰੀ ਨੂੰ ਕਲੋਨ ਕਰੋ**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
 3. [**ਐਜ਼ਰ AI ਫਾਉਂਡਰੀ ਡਿਸਕੋਰਡ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੋ ਅਤੇ ਮਾਹਰਾਂ ਅਤੇ ਹੋਰ ਡਿਵੈਲਪਰਾਂ ਨਾਲ ਮਿਲੋ**](https://discord.com/invite/ByRwuEEgH4)
 
 ### 🌐 ਬਹੁ-ਭਾਸ਼ਾ ਸਹਾਇਤਾ
@@ -46,17 +46,17 @@ CO_OP_TRANSLATOR_METADATA:
 
 #### 🧑‍🎓 _ਕੀ ਤੁਸੀਂ ਵਿਦਿਆਰਥੀ ਹੋ?_
 
-[**ਵਿਦਿਆਰਥੀ ਹੱਬ ਪੇਜ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਜਾਓ ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂਆਤੀ ਸਰੋਤ, ਵਿਦਿਆਰਥੀ ਪੈਕ ਅਤੇ ਮੁਫ਼ਤ ਸਰਟੀਫਿਕੇਟ ਵਾਊਚਰ ਪ੍ਰਾਪਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਮਿਲਣਗੇ। ਇਹ ਉਹ ਪੇਜ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਬੁੱਕਮਾਰਕ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਸਮੇਂ-ਸਮੇਂ 'ਤੇ ਚੈੱਕ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿਉਂਕਿ ਅਸੀਂ ਮਹੀਨਾਵਾਰ ਸਮੱਗਰੀ ਬਦਲਦੇ ਰਹਿੰਦੇ ਹਾਂ।
+[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਜਾਓ ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਸ਼ੁਰੂਆਤੀ ਸਰੋਤ, ਵਿਦਿਆਰਥੀ ਪੈਕ ਅਤੇ ਮੁਫ਼ਤ ਸਰਟੀਫਿਕੇਟ ਵਾਊਚਰ ਪ੍ਰਾਪਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਮਿਲਣਗੇ। ਇਹ ਪੰਨਾ ਬੁੱਕਮਾਰਕ ਕਰਨ ਲਈ ਹੈ ਅਤੇ ਸਮੇਂ-ਸਮੇਂ 'ਤੇ ਚੈੱਕ ਕਰਨ ਲਈ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਮਹੀਨਾਵਾਰ ਸਮੱਗਰੀ ਬਦਲਦੇ ਹਾਂ।
 
-### 📣 ਐਲਾਨ - ਨਵਾਂ GitHub Copilot Agent ਮੋਡ ਚੈਲੈਂਜ ਪੂਰਾ ਕਰਨ ਲਈ!
+### 📣 ਐਲਾਨ - ਨਵਾਂ GitHub Copilot Agent ਮੋਡ ਚੈਲੈਂਜ ਪੂਰਾ ਕਰੋ!
 
-ਨਵਾਂ ਚੈਲੈਂਜ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਜ਼ਿਆਦਾਤਰ ਅਧਿਆਇ ਵਿੱਚ "GitHub Copilot Agent Challenge 🚀" ਦੀ ਭਾਲ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ ਲਈ GitHub Copilot ਅਤੇ Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੂਰਾ ਕਰਨ ਲਈ ਇੱਕ ਨਵਾਂ ਚੈਲੈਂਜ ਹੈ। ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕੀਤੀ ਹੈ, ਤਾਂ ਇਹ ਸਿਰਫ਼ ਟੈਕਸਟ ਜਨਰੇਟ ਕਰਨ ਦੇ ਨਾਲ-ਨਾਲ ਫਾਈਲਾਂ ਬਣਾਉਣ ਅਤੇ ਐਡਿਟ ਕਰਨ, ਕਮਾਂਡ ਚਲਾਉਣ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਕਰਨ ਦੇ ਯੋਗ ਹੈ।
+ਨਵਾਂ ਚੈਲੈਂਜ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਜ਼ਿਆਦਾਤਰ ਅਧਿਆਇ ਵਿੱਚ "GitHub Copilot Agent Challenge 🚀" ਦੀ ਭਾਲ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ ਲਈ GitHub Copilot ਅਤੇ Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੂਰਾ ਕਰਨ ਲਈ ਇੱਕ ਨਵਾਂ ਚੈਲੈਂਜ ਹੈ। ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕੀਤੀ ਤਾਂ ਇਹ ਸਿਰਫ਼ ਟੈਕਸਟ ਹੀ ਨਹੀਂ ਬਣਾਉਂਦਾ, ਬਲਕਿ ਫਾਈਲਾਂ ਬਣਾਉਣ ਅਤੇ ਸੋਧ ਕਰਨ, ਕਮਾਂਡ ਚਲਾਉਣ ਅਤੇ ਹੋਰ ਕੁਝ ਕਰਨ ਦੇ ਯੋਗ ਹੈ।
 
 ### 📣 ਐਲਾਨ - _ਨਵਾਂ ਪ੍ਰਾਜੈਕਟ_ ਜਨਰੇਟਿਵ AI ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਉਣ ਲਈ
 
-ਨਵਾਂ AI ਅਸਿਸਟੈਂਟ ਪ੍ਰਾਜੈਕਟ ਹੁਣੇ ਹੀ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸਨੂੰ [ਪ੍ਰਾਜੈਕਟ](./09-chat-project/README.md) ਵਿੱਚ ਦੇਖੋ।
+ਨਵਾਂ AI ਅਸਿਸਟੈਂਟ ਪ੍ਰਾਜੈਕਟ ਹੁਣ ਹੀ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸਨੂੰ [ਪ੍ਰਾਜੈਕਟ](./09-chat-project/README.md) ਵਿੱਚ ਵੇਖੋ।
 
-### 📣 ਐਲਾਨ - ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਈ _ਨਵਾਂ ਕੋਰਸ_ ਜਨਰੇਟਿਵ AI 'ਤੇ ਹੁਣੇ ਹੀ ਜਾਰੀ ਕੀਤਾ ਗਿਆ
+### 📣 ਐਲਾਨ - _ਨਵਾਂ ਕੋਰਸ_ ਜਨਰੇਟਿਵ AI ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ 'ਤੇ ਹੁਣ ਹੀ ਜਾਰੀ ਕੀਤਾ ਗਿਆ ਹੈ
 
 ਸਾਡੇ ਨਵੇਂ ਜਨਰੇਟਿਵ AI ਕੋਰਸ ਨੂੰ ਨਾ ਗੁਆਓ!
 
@@ -64,13 +64,13 @@ CO_OP_TRANSLATOR_METADATA:
 
 ![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.pa.png)
 
-- ਪਾਠਾਂ ਜੋ ਮੂਲ ਭਾਗ ਤੋਂ RAG ਤੱਕ ਸਭ ਕੁਝ ਕਵਰ ਕਰਦੇ ਹਨ।
+- ਬੁਨਿਆਦ ਤੋਂ RAG ਤੱਕ ਕਵਰ ਕਰਨ ਵਾਲੇ ਪਾਠ।
 - GenAI ਅਤੇ ਸਾਡੇ ਸਾਥੀ ਐਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਤਿਹਾਸਕ ਪਾਤਰਾਂ ਨਾਲ ਸੰਚਾਰ ਕਰੋ।
 - ਮਜ਼ੇਦਾਰ ਅਤੇ ਰੁਚਿਕਰ ਕਹਾਣੀ, ਤੁਸੀਂ ਸਮੇਂ ਦੀ ਯਾਤਰਾ ਕਰ ਰਹੇ ਹੋਵੋਗੇ!
 
 ![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.pa.png)
 
-ਹਰੇਕ ਪਾਠ ਵਿੱਚ ਇੱਕ ਅਸਾਈਨਮੈਂਟ ਸ਼ਾਮਲ ਹੈ ਜਿਸਨੂੰ ਪੂਰਾ ਕਰਨਾ ਹੈ, ਇੱਕ ਜਾਣਕਾਰੀ ਚੈੱਕ ਅਤੇ ਇੱਕ ਚੈਲੈਂਜ ਜੋ ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਵਿਸ਼ਿਆਂ ਨੂੰ ਸਿੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ:
+ਹਰ ਪਾਠ ਵਿੱਚ ਪੂਰਾ ਕਰਨ ਲਈ ਇੱਕ ਅਸਾਈਨਮੈਂਟ, ਇੱਕ ਗਿਆਨ ਜਾਂਚ ਅਤੇ ਇੱਕ ਚੈਲੈਂਜ ਸ਼ਾਮਲ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਵਿਸ਼ਿਆਂ ਨੂੰ ਸਿੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ:
 - ਪ੍ਰੋਮਪਟਿੰਗ ਅਤੇ ਪ੍ਰੋਮਪਟ ਇੰਜੀਨੀਅਰਿੰਗ
 - ਟੈਕਸਟ ਅਤੇ ਚਿੱਤਰ ਐਪ ਜਨਰੇਸ਼ਨ
 - ਸਰਚ ਐਪਸ
@@ -81,48 +81,51 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## 🌱 ਸ਼ੁਰੂਆਤ ਕਰਨਾ
 
-> **ਅਧਿਆਪਕ**, ਅਸੀਂ [ਇੱਥੇ ਕੁਝ ਸੁਝਾਅ](for-teachers.md) ਸ਼ਾਮਲ ਕੀਤੇ ਹਨ ਕਿ ਇਸ ਕੋਰਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ। ਅਸੀਂ ਤੁਹਾਡਾ ਫੀਡਬੈਕ [ਸਾਡੇ ਚਰਚਾ ਫੋਰਮ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) ਵਿੱਚ ਪਸੰਦ ਕਰਦੇ ਹਾਂ!
+> **ਅਧਿਆਪਕ**, ਅਸੀਂ [ਇੱਥੇ ਕੁਝ ਸੁਝਾਅ ਸ਼ਾਮਲ ਕੀਤੇ ਹਨ](for-teachers.md) ਕਿ ਇਸ ਕੋਰਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ। ਅਸੀਂ ਤੁਹਾਡਾ ਫੀਡਬੈਕ [ਸਾਡੇ ਚਰਚਾ ਫੋਰਮ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) ਵਿੱਚ ਪਸੰਦ ਕਰਦੇ ਹਾਂ!
 
-**[ਵਿਦਿਆਰਥੀ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ਹਰੇਕ ਪਾਠ ਲਈ, ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਅਤੇ ਲੈਕਚਰ ਸਮੱਗਰੀ ਪੜ੍ਹਨ, ਵੱਖ-ਵੱਖ ਗਤੀਵਿਧੀਆਂ ਪੂਰੀ ਕਰਨ ਅਤੇ ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼ ਨਾਲ ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰਨ ਨਾਲ ਅੱਗੇ ਵਧੋ।
+**[ਵਿਦਿਆਰਥੀ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ਹਰ ਪਾਠ ਲਈ, ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਅਤੇ ਲੈਕਚਰ ਸਮੱਗਰੀ ਪੜ੍ਹਨ, ਵੱਖ-ਵੱਖ ਗਤੀਵਿਧੀਆਂ ਪੂਰੀ ਕਰਨ ਅਤੇ ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼ ਨਾਲ ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ ਕਰਨ ਨਾਲ ਅੱਗੇ ਵਧੋ।
 
-ਤੁਹਾਡੇ ਸਿੱਖਣ ਦੇ ਅਨੁਭਵ ਨੂੰ ਵਧੀਆ ਬਣਾਉਣ ਲਈ, ਆਪਣੇ ਸਾਥੀਆਂ ਨਾਲ ਪ੍ਰਾਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰਨ ਲਈ ਜੁੜੋ! ਚਰਚਾ ਸਾਡੇ [ਚਰਚਾ ਫੋਰਮ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ਵਿੱਚ ਪ੍ਰੋਤਸਾਹਿਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਿੱਥੇ ਸਾਡੇ ਮੋਡਰੇਟਰਾਂ ਦੀ ਟੀਮ ਤੁਹਾਡੇ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦੇਣ ਲਈ ਉਪਲਬਧ ਹੋਵੇਗੀ।
+ਆਪਣੇ ਸਿੱਖਣ ਦੇ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਣ ਲਈ, ਆਪਣੇ ਸਾਥੀਆਂ ਨਾਲ ਪ੍ਰਾਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰਨ ਲਈ ਜੁੜੋ! ਚਰਚਾ ਸਾਡੇ [ਚਰਚਾ ਫੋਰਮ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ਵਿੱਚ ਪ੍ਰੋਤਸਾਹਿਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਿੱਥੇ ਸਾਡੇ ਮੋਡਰੇਟਰਾਂ ਦੀ ਟੀਮ ਤੁਹਾਡੇ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦੇਣ ਲਈ ਉਪਲਬਧ ਹੋਵੇਗੀ।
 
-ਤੁਹਾਡੀ ਸਿੱਖਿਆ ਨੂੰ ਹੋਰ ਵਧਾਉਣ ਲਈ, ਅਸੀਂ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ਦੀ ਖੋਜ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ ਜੋ ਵਾਧੂ ਅਧਿਐਨ ਸਮੱਗਰੀ ਲਈ ਹੈ।
+ਆਪਣੀ ਸਿੱਖਿਆ ਨੂੰ ਅੱਗੇ ਵਧਾਉਣ ਲਈ, ਅਸੀਂ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ਦੀ ਖੋਜ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ ਜੋ ਵਾਧੂ ਅਧਿਐਨ ਸਮੱਗਰੀ ਲਈ ਹੈ।
 
 ### 📋 ਆਪਣੇ ਵਾਤਾਵਰਣ ਨੂੰ ਸੈਟ ਕਰਨਾ
 
-ਇਹ ਕੋਰਸ ਇੱਕ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਦੇ ਨਾਲ ਤਿਆਰ ਹੈ! ਜਦੋਂ ਤੁਸੀਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਇਸ ਕੋਰਸ ਨੂੰ [Codespace](https://github.com/features/codespaces/) (_ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਤ, ਕੋਈ ਇੰਸਟਾਲ ਨਹੀਂ ਲੋੜੀਂਦਾ ਵਾਤਾਵਰਣ_), ਜਾਂ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਸਥਾਨਕ ਤੌਰ 'ਤੇ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਵਰਗੇ ਟੈਕਸਟ ਐਡੀਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚਲਾ ਸਕਦੇ ਹੋ।
+ਇਸ ਕੋਰਸ ਵਿੱਚ ਇੱਕ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਤਿਆਰ ਹੈ! ਜਦੋਂ ਤੁਸੀਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਇਸ ਕੋਰਸ ਨੂੰ [Codespace](https://github.com/features/codespaces/) (_ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਿਤ, ਕੋਈ ਇੰਸਟਾਲੇਸ਼ਨ ਦੀ ਲੋੜ ਨਹੀਂ_) ਜਾਂ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਸਥਾਨਕ ਤੌਰ 'ਤੇ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਵਰਗੇ ਟੈਕਸਟ ਐਡੀਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚਲਾ ਸਕਦੇ ਹੋ।
 
-#### ਆਪਣਾ ਰਿਪੋਜ਼ਟਰੀ ਬਣਾਓ
-ਤੁਹਾਡੇ ਲਈ ਆਪਣਾ ਕੰਮ ਆਸਾਨੀ ਨਾਲ ਸੇਵ ਕਰਨ ਲਈ, ਇਹ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਆਪਣੀ ਨਕਲ ਬਣਾਓ। ਤੁਸੀਂ ਇਸ ਪੇਜ ਦੇ ਉੱਪਰ "Use this template" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਇਹ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਤੁਹਾਡੇ GitHub ਖਾਤੇ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਰਿਪੋਜ਼ਟਰੀ ਬਣਾਏਗਾ ਜਿਸ ਵਿੱਚ ਕੋਰਸ ਦੀ ਨਕਲ ਹੋਵੇਗੀ।
+#### ਆਪਣਾ ਰੀਪੋਜ਼ਟਰੀ ਬਣਾਓ
+ਆਪਣੇ ਕੰਮ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸੇਵ ਕਰਨ ਲਈ, ਇਹ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸ ਰੀਪੋਜ਼ਟਰੀ ਦੀ ਆਪਣੀ ਨਕਲ ਬਣਾਓ। ਤੁਸੀਂ ਇਸ ਪੰਨੇ ਦੇ ਉੱਪਰ **Use this template** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਇਹ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਤੁਹਾਡੇ GitHub ਖਾਤੇ ਵਿੱਚ ਕੋਰਸ ਦੀ ਇੱਕ ਨਵੀਂ ਨਕਲ ਬਣਾਏਗਾ।
 
-ਇਹ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ:
-1. **ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਫੋਰਕ ਕਰੋ**: ਇਸ ਪੇਜ ਦੇ ਉੱਪਰ-ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ "Fork" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
-2. **ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਕਲੋਨ ਕਰੋ**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+ਹੇਠਾਂ ਦਿੱਤੇ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ:
+1. **ਰੀਪੋਜ਼ਟਰੀ ਨੂੰ ਫੋਰਕ ਕਰੋ**: ਇਸ ਪੰਨੇ ਦੇ ਉੱਪਰ-ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ "Fork" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
+2. **ਰੀਪੋਜ਼ਟਰੀ ਨੂੰ ਕਲੋਨ ਕਰੋ**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
 
-#### ਕੋਡਸਪੇਸ ਵਿੱਚ ਕੋਰਸ ਚਲਾਉਣਾ
+#### Codespace ਵਿੱਚ ਕੋਰਸ ਚਲਾਉਣਾ
 
-ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਇਸ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਨਕਲ ਵਿੱਚ, **Code** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ **Open with Codespaces** ਚੁਣੋ। ਇਹ ਤੁਹਾਡੇ ਲਈ ਕੰਮ ਕਰਨ ਲਈ ਇੱਕ ਨਵਾਂ ਕੋਡਸਪੇਸ ਬਣਾਏਗਾ।
+ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਇਸ ਰੀਪੋਜ਼ਟਰੀ ਵਿੱਚ, **Code** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ **Open with Codespaces** ਚੁਣੋ। ਇਹ ਤੁਹਾਡੇ ਲਈ ਕੰਮ ਕਰਨ ਲਈ ਇੱਕ ਨਵਾਂ Codespace ਬਣਾਏਗਾ।
 
 ![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.pa.png)
 
 #### ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਕੋਰਸ ਚਲਾਉਣਾ
 
-ਇਸ ਕੋਰਸ ਨੂੰ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਚਲਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਇੱਕ ਟੈਕਸਟ ਐਡੀਟਰ, ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਇੱਕ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਸਾਡਾ ਪਹਿਲਾ ਪਾਠ, [ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਟੂਲਜ਼ ਦੀ ਜਾਣਕਾਰੀ](../../1-getting-started-lessons/1-intro-to-programming-languages), ਤੁਹਾਨੂੰ ਇਨ੍ਹਾਂ ਟੂਲਾਂ ਵਿੱਚੋਂ ਵੱਖ-ਵੱਖ ਵਿਕਲਪਾਂ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਦੱਸੇਗਾ।
+ਇਸ ਕੋਰਸ ਨੂੰ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਚਲਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਇੱਕ ਟੈਕਸਟ ਐਡੀਟਰ, ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਇੱਕ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਸਾਡਾ ਪਹਿਲਾ ਪਾਠ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ਤੁਹਾਨੂੰ ਇਨ੍ਹਾਂ ਟੂਲਾਂ ਵਿੱਚੋਂ ਵੱਖ-ਵੱਖ ਵਿਕਲਪਾਂ ਦੇਖਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਚੁਣ ਸਕੋ।
 
-ਸਾਡੀ ਸਿਫਾਰਸ਼ ਹੈ ਕਿ ਤੁਸੀਂ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਨੂੰ ਆਪਣੇ ਐਡੀਟਰ ਵਜੋਂ ਵਰਤੋਂ, ਜਿਸ ਵਿੱਚ ਇੱਕ [ਟਰਮੀਨਲ](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ਵੀ ਸ਼ਾਮਲ ਹੈ। ਤੁਸੀਂ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਇੱਥੇ ਡਾਊਨਲੋਡ ਕਰ ਸਕਦੇ ਹੋ।
+ਸਾਡੀ ਸਿਫਾਰਸ਼ ਹੈ ਕਿ ਤੁਸੀਂ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਨੂੰ ਆਪਣੇ ਐਡੀਟਰ ਵਜੋਂ ਵਰਤੋਂ, ਜਿਸ ਵਿੱਚ ਇੱਕ ਅੰਦਰੂਨੀ [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ਵੀ ਹੈ। ਤੁਸੀਂ [ਇੱਥੇ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) Visual Studio Code ਡਾਊਨਲੋਡ ਕਰ ਸਕਦੇ ਹੋ।
 
-1. ਆਪਣੇ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਕਲੋਨ ਕਰੋ। ਤੁਸੀਂ ਇਹ **Code** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਅਤੇ URL ਕਾਪੀ ਕਰਕੇ ਕਰ ਸਕਦੇ ਹੋ:
+1. ਆਪਣਾ ਰੀਪੋਜ਼ਟਰੀ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਕਲੋਨ ਕਰੋ। ਤੁਸੀਂ **Code** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਅਤੇ URL ਕਾਪੀ ਕਰਕੇ ਇਹ ਕਰ ਸਕਦੇ ਹੋ:
 
     [CodeSpace](./images/createcodespace.png)
 
-    ਫਿਰ, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਵਿੱਚ [ਟਰਮੀਨਲ](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ਖੋਲ੍ਹੋ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਕਮਾਂਡ ਨੂੰ ਚਲਾਓ, `<your-repository-url>` ਨੂੰ ਆਪਣੇ ਕਾਪੀ ਕੀਤੇ URL ਨਾਲ ਬਦਲੋ:
+    ਫਿਰ, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ਵਿੱਚ [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ਖੋਲ੍ਹੋ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤਾ ਕਮਾਂਡ ਚਲਾਓ, `<your-repository-url>` ਨੂੰ ਆਪਣੇ ਕਾਪੀ ਕੀਤੇ URL ਨਾਲ ਬਦਲੋ:
 
     ```bash 
     git clone <your-repository-url>
     ```
 
+2. Visual Studio Code ਵਿੱਚ ਫੋਲਡਰ ਖੋਲ੍ਹੋ। ਤੁਸੀਂ **File** > **Open Folder** 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਅਤੇ ਆਪਣੇ ਦੁਆਰਾ ਕਲੋਨ ਕੀਤੇ ਫੋਲਡਰ ਨੂੰ ਚੁਣ ਕੇ ਇਹ ਕਰ ਸਕਦੇ ਹੋ।
 
+>  ਸਿਫਾਰਸ਼ ਕੀਤੇ Visual Studio Code ਐਕਸਟੈਂਸ਼ਨ:
+>
 > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code ਵਿੱਚ HTML ਪੇਜਾਂ ਨੂੰ ਪ੍ਰੀਵਿਊ ਕਰਨ ਲਈ
 > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - ਕੋਡ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਲਿਖਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ
 
@@ -139,77 +142,97 @@ CO_OP_TRANSLATOR_METADATA:
 - ਅਸਾਈਨਮੈਂਟ
 - [ਪਾਠ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/)
 
-> **ਕਵਿਜ਼ਾਂ ਬਾਰੇ ਇੱਕ ਨੋਟ**: ਸਾਰੀਆਂ ਕਵਿਜ਼ਾਂ `Quiz-app` ਫੋਲਡਰ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ, ਕੁੱਲ 48 ਕਵਿਜ਼ਾਂ ਹਨ, ਹਰ ਇੱਕ ਵਿੱਚ ਤਿੰਨ ਪ੍ਰਸ਼ਨ ਹਨ। ਇਹ [ਇੱਥੇ](https://ff-quizzes.netlify.app/web/) ਉਪਲਬਧ ਹਨ। ਕਵਿਜ਼ ਐਪ ਨੂੰ ਲੋਕਲ ਜਾਂ Azure 'ਤੇ ਡਿਪਲੌਇ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; `quiz-app` ਫੋਲਡਰ ਵਿੱਚ ਦਿੱਤੇ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ।
+> **ਕਵਿਜ਼ਾਂ ਬਾਰੇ ਇੱਕ ਨੋਟ**: ਸਾਰੀਆਂ ਕਵਿਜ਼ਾਂ Quiz-app ਫੋਲਡਰ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ, ਕੁੱਲ 48 ਕਵਿਜ਼ਾਂ, ਹਰ ਇੱਕ ਵਿੱਚ ਤਿੰਨ ਪ੍ਰਸ਼ਨ ਹਨ। ਇਹ [ਇੱਥੇ](https://ff-quizzes.netlify.app/web/) ਉਪਲਬਧ ਹਨ। Quiz-app ਨੂੰ ਲੋਕਲ ਜਾਂ Azure 'ਤੇ ਡਿਪਲੌਇ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; `quiz-app` ਫੋਲਡਰ ਵਿੱਚ ਦਿੱਤੇ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ।
 
 ## 🗃️ ਪਾਠ
 
 |     |                       ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ                       |                            ਸਿੱਖਣ ਵਾਲੇ ਸੰਕਲਪ                             | ਸਿੱਖਣ ਦੇ ਉਦੇਸ਼                                                                                                                 |                                                         ਲਿੰਕ ਕੀਤਾ ਪਾਠ                                                          |         ਲੇਖਕ          |
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
-| 01  |                     ਸ਼ੁਰੂਆਤ                      |           ਪ੍ਰੋਗਰਾਮਿੰਗ ਅਤੇ ਟੂਲਜ਼ ਦਾ ਪਹਿਚਾਣ           | ਜ਼ਿਆਦਾਤਰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਦੇ ਮੁੱਢਲੇ ਅੰਸ਼ਾਂ ਅਤੇ ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਆਪਣਾ ਕੰਮ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਵਾਲੇ ਸੌਫਟਵੇਅਰ ਬਾਰੇ ਸਿੱਖੋ | [ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਟੂਲਜ਼ ਦਾ ਪਹਿਚਾਣ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
-| 02  |                     ਸ਼ੁਰੂਆਤ                      |             GitHub ਦੇ ਬੁਨਿਆਦੀ ਅੰਸ਼, ਟੀਮ ਨਾਲ ਕੰਮ ਕਰਨ ਦੀ ਸਮੇਤ             | ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ GitHub ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ, ਕੋਡ ਬੇਸ 'ਤੇ ਹੋਰਾਂ ਨਾਲ ਕਿਵੇਂ ਸਹਿਯੋਗ ਕਰਨਾ ਹੈ                                                    |                            [GitHub ਦਾ ਪਹਿਚਾਣ](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
-| 03  |                     ਸ਼ੁਰੂਆਤ                      |                             ਪਹੁੰਚਯੋਗਤਾ                              | ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਬੁਨਿਆਦੀ ਅੰਸ਼ਾਂ ਬਾਰੇ ਸਿੱਖੋ                                                                                               |                       [ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਮੂਲ ਅੰਸ਼](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
-| 04  |                        JS ਬੁਨਿਆਦ                         |                         ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਟਾਈਪ                          | ਜਾਵਾਸਕ੍ਰਿਪਟ ਡਾਟਾ ਟਾਈਪ ਦੇ ਬੁਨਿਆਦੀ ਅੰਸ਼                                                                                                 |                                       [ਡਾਟਾ ਟਾਈਪ](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
-| 05  |                        JS ਬੁਨਿਆਦ                         |                         ਫੰਕਸ਼ਨ ਅਤੇ ਵਿਧੀਆਂ                          | ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਲਾਜਿਕ ਫਲੋ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਫੰਕਸ਼ਨ ਅਤੇ ਵਿਧੀਆਂ ਬਾਰੇ ਸਿੱਖੋ                                                             |                              [ਫੰਕਸ਼ਨ ਅਤੇ ਵਿਧੀਆਂ](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
-| 06  |                        JS ਬੁਨਿਆਦ                         |                        ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਫੈਸਲੇ ਲੈਣਾ                        | ਫੈਸਲੇ ਲੈਣ ਦੇ ਤਰੀਕਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਸ਼ਰਤਾਂ ਬਣਾਉਣ ਬਾਰੇ ਸਿੱਖੋ                                                           |                                 [ਫੈਸਲੇ ਲੈਣਾ](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
-| 07  |                        JS ਬੁਨਿਆਦ                         |                            ਐਰੇ ਅਤੇ ਲੂਪ                            | ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਡਾਟਾ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਐਰੇ ਅਤੇ ਲੂਪ ਦੀ ਵਰਤੋਂ                                                                                 |                                   [ਐਰੇ ਅਤੇ ਲੂਪ](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
-| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML ਦਾ ਅਭਿਆਸ                            | ਆਨਲਾਈਨ ਟੈਰੀਅਰੀਅਮ ਬਣਾਉਣ ਲਈ HTML ਬਣਾਓ, ਲੇਆਉਟ ਬਣਾਉਣ 'ਤੇ ਧਿਆਨ ਦਿਓ                                                         |                                 [HTML ਦਾ ਪਹਿਚਾਣ](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
-| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS ਦਾ ਅਭਿਆਸ                             | ਆਨਲਾਈਨ ਟੈਰੀਅਰੀਅਮ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ CSS ਬਣਾਓ, CSS ਦੇ ਬੁਨਿਆਦੀ ਅੰਸ਼ਾਂ 'ਤੇ ਧਿਆਨ ਦਿਓ ਜਿਸ ਵਿੱਚ ਪੇਜ ਨੂੰ ਰਿਸਪਾਂਸਿਵ ਬਣਾਉਣਾ ਸ਼ਾਮਲ ਹੈ                     |                                  [CSS ਦਾ ਪਹਿਚਾਣ](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
-| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ, DOM ਮੈਨਿਪੁਲੇਸ਼ਨ                  | ਟੈਰੀਅਰੀਅਮ ਨੂੰ ਡ੍ਰੈਗ/ਡ੍ਰੌਪ ਇੰਟਰਫੇਸ ਵਜੋਂ ਕੰਮ ਕਰਨ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਓ, ਕਲੋਜ਼ਰ ਅਤੇ DOM ਮੈਨਿਪੁਲੇਸ਼ਨ 'ਤੇ ਧਿਆਨ ਦਿਓ             |                  [ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ, DOM ਮੈਨਿਪੁਲੇਸ਼ਨ](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
-| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          ਟਾਈਪਿੰਗ ਗੇਮ ਬਣਾਓ                           | ਜਾਵਾਸਕ੍ਰਿਪਟ ਐਪ ਦੀ ਲਾਜਿਕ ਨੂੰ ਚਲਾਉਣ ਲਈ ਕੀਬੋਰਡ ਇਵੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਸਿੱਖੋ                                                          |                                [ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗਰਾਮਿੰਗ](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 01  |                     ਸ਼ੁਰੂਆਤ                      |           ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਅਤੇ ਟੂਲਜ਼ ਦੀ ਜਾਣਕਾਰੀ           | ਜ਼ਿਆਦਾਤਰ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਦੇ ਮੁੱਢਲੇ ਅਧਾਰਾਂ ਅਤੇ ਪੇਸ਼ੇਵਰ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਕੰਮ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਵਾਲੇ ਸੌਫਟਵੇਅਰ ਬਾਰੇ ਸਿੱਖੋ | [ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਟੂਲਜ਼ ਦੀ ਜਾਣਕਾਰੀ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+| 02  |                     ਸ਼ੁਰੂਆਤ                      |             GitHub ਦੇ ਬੁਨਿਆਦੀਆਂ, ਟੀਮ ਨਾਲ ਕੰਮ ਕਰਨ ਸਮੇਤ             | ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ GitHub ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ, ਕੋਡ ਬੇਸ 'ਤੇ ਹੋਰਾਂ ਨਾਲ ਸਹਿਯੋਗ ਕਿਵੇਂ ਕਰਨਾ ਹੈ                                                    |                            [GitHub ਦੀ ਜਾਣਕਾਰੀ](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
+| 03  |                     ਸ਼ੁਰੂਆਤ                      |                             ਪਹੁੰਚਯੋਗਤਾ                              | ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਬੁਨਿਆਦੀਆਂ ਸਿੱਖੋ                                                                                               |                       [ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਮੂਲ ਸਿਧਾਂਤ](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
+| 04  |                        JS ਬੁਨਿਆਦੀਆਂ                         |                         ਜਾਵਾਸਕ੍ਰਿਪਟ ਡੇਟਾ ਕਿਸਮਾਂ                          | ਜਾਵਾਸਕ੍ਰਿਪਟ ਡੇਟਾ ਕਿਸਮਾਂ ਦੇ ਬੁਨਿਆਦੀਆਂ                                                                                                 |                                       [ਡੇਟਾ ਕਿਸਮਾਂ](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+| 05  |                        JS ਬੁਨਿਆਦੀਆਂ                         |                         ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡ                          | ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਲਾਜਿਕ ਫਲੋ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡ ਬਾਰੇ ਸਿੱਖੋ                                                             |                              [ਫੰਕਸ਼ਨ ਅਤੇ ਮੈਥਡ](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
+| 06  |                        JS ਬੁਨਿਆਦੀਆਂ                         |                        JS ਨਾਲ ਫੈਸਲੇ ਲੈਣਾ                        | ਫੈਸਲੇ ਲੈਣ ਦੇ ਤਰੀਕਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਸ਼ਰਤਾਂ ਬਣਾਉਣ ਬਾਰੇ ਸਿੱਖੋ                                                           |                                 [ਫੈਸਲੇ ਲੈਣਾ](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
+| 07  |                        JS ਬੁਨਿਆਦੀਆਂ                         |                            ਐਰੇ ਅਤੇ ਲੂਪ                            | ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਡੇਟਾ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਐਰੇ ਅਤੇ ਲੂਪ ਦੀ ਵਰਤੋਂ                                                                                 |                                   [ਐਰੇ ਅਤੇ ਲੂਪ](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML ਦਾ ਅਭਿਆਸ                            | ਆਨਲਾਈਨ ਟੈਰੇਰੀਅਮ ਬਣਾਉਣ ਲਈ HTML ਬਣਾਓ, ਲੇਆਉਟ ਬਣਾਉਣ 'ਤੇ ਧਿਆਨ                                                         |                                 [HTML ਦੀ ਜਾਣਕਾਰੀ](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS ਦਾ ਅਭਿਆਸ                             | CSS ਬਣਾਓ ਤਾਂ ਜੋ ਆਨਲਾਈਨ ਟੈਰੇਰੀਅਮ ਨੂੰ ਸਟਾਈਲ ਕੀਤਾ ਜਾ ਸਕੇ, CSS ਦੇ ਬੁਨਿਆਦੀਆਂ 'ਤੇ ਧਿਆਨ ਦੇਣ ਸਮੇਤ ਪੇਜ ਨੂੰ ਰਿਸਪਾਂਸਿਵ ਬਣਾਉਣਾ                     |                                  [CSS ਦੀ ਜਾਣਕਾਰੀ](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ, DOM ਮੈਨਿਪੂਲੇਸ਼ਨ                  | ਟੈਰੇਰੀਅਮ ਨੂੰ ਡਰੈਗ/ਡ੍ਰੌਪ ਇੰਟਰਫੇਸ ਵਜੋਂ ਕੰਮ ਕਰਨ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਓ, ਕਲੋਜ਼ਰ ਅਤੇ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ 'ਤੇ ਧਿਆਨ ਦੇਣ ਸਮੇਤ             |                  [ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ, DOM ਮੈਨਿਪੂਲੇਸ਼ਨ](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          ਟਾਈਪਿੰਗ ਗੇਮ ਬਣਾਓ                           | ਜਾਵਾਸਕ੍ਰਿਪਟ ਐਪ ਦੀ ਲਾਜਿਕ ਨੂੰ ਚਲਾਉਣ ਲਈ ਕੀਬੋਰਡ ਇਵੈਂਟ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ                                                          |                                [ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ](./4-typing-game/typing-game/README.md)                                |       Christopher       |
 | 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         ਬ੍ਰਾਊਜ਼ਰ ਨਾਲ ਕੰਮ ਕਰਨਾ                          | ਬ੍ਰਾਊਜ਼ਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਉਨ੍ਹਾਂ ਦਾ ਇਤਿਹਾਸ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਪਹਿਲੇ ਤੱਤਾਂ ਨੂੰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ                               |                               [ਬ੍ਰਾਊਜ਼ਰ ਬਾਰੇ](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | ਫਾਰਮ ਬਣਾਉਣਾ, API ਨੂੰ ਕਾਲ ਕਰਨਾ ਅਤੇ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਵੈਰੀਏਬਲ ਸਟੋਰ ਕਰਨਾ | ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੱਤਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ API ਨੂੰ ਕਾਲ ਕਰਨ ਲਈ ਵਰਤੋ ਅਤੇ ਵੈਰੀਏਬਲ ਨੂੰ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੋਰ ਕਰੋ                      |                [APIs, ਫਾਰਮ, ਅਤੇ ਲੋਕਲ ਸਟੋਰੇਜ](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬੈਕਗ੍ਰਾਊਂਡ ਪ੍ਰੋਸੈਸ, ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ          | ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਪ੍ਰੋਸੈਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਆਈਕਨ ਨੂੰ ਸੰਭਾਲੋ; ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ ਅਤੇ ਕੁਝ ਅਪਟਾਈਮਾਈਜ਼ੇਸ਼ਨ ਬਾਰੇ ਜਾਣੋ   |             [ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Space Game](./6-space-game/solution/README.md)           |             ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਹੋਰ ਅਗਰਸਰ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ             | ਕਲਾਸਾਂ ਅਤੇ ਕੰਪੋਜ਼ੀਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵਿਰਾਸਤ ਬਾਰੇ ਸਿੱਖੋ ਅਤੇ ਗੇਮ ਬਣਾਉਣ ਦੀ ਤਿਆਰੀ ਵਿੱਚ ਪਬ/ਸਬ ਪੈਟਰਨ ਬਾਰੇ ਸਿੱਖੋ              |                      [ਅਗਰਸਰ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਦਾ ਪਹਿਚਾਣ](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | ਫਾਰਮ ਬਣਾਉਣਾ, API ਨੂੰ ਕਾਲ ਕਰਨਾ ਅਤੇ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਵੈਰੀਏਬਲ ਸਟੋਰ ਕਰਨਾ | ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੱਤਾਂ ਨੂੰ ਬਣਾਓ ਜੋ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਲਈ API ਨੂੰ ਕਾਲ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕੇ, ਜੋ ਕਿ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਵੈਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ                      |                [APIs, ਫਾਰਮ, ਅਤੇ ਲੋਕਲ ਸਟੋਰੇਜ](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬੈਕਗ੍ਰਾਊਂਡ ਪ੍ਰੋਸੈਸ, ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ          | ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਬੈਕਗ੍ਰਾਊਂਡ ਪ੍ਰੋਸੈਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਆਈਕਨ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰੋ; ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ ਅਤੇ ਕੁਝ ਅਪਟਾਈਮਾਈਜ਼ੇਸ਼ਨ |             [ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਹੋਰ ਅਗਰਸਰ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ             | ਕਲਾਸ ਅਤੇ ਕੰਪੋਜ਼ੀਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵਾਰਸਾ ਬਾਰੇ ਸਿੱਖੋ ਅਤੇ ਗੇਮ ਬਣਾਉਣ ਲਈ ਪਬ/ਸਬ ਪੈਟਰਨ ਦੀ ਤਿਆਰੀ ਕਰੋ              |                      [ਅਗਰਸਰ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਦੀ ਜਾਣਕਾਰੀ](./6-space-game/1-introduction/README.md)                       |          Chris          |
 | 16  |           [Space Game](./6-space-game/solution/README.md)           |                           ਕੈਨਵਸ 'ਤੇ ਡ੍ਰਾਇੰਗ                            | ਕੈਨਵਸ API ਬਾਰੇ ਸਿੱਖੋ, ਜੋ ਸਕ੍ਰੀਨ 'ਤੇ ਤੱਤਾਂ ਨੂੰ ਡ੍ਰਾਇ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ                                                                       |                                [ਕੈਨਵਸ 'ਤੇ ਡ੍ਰਾਇੰਗ](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   ਸਕ੍ਰੀਨ 'ਤੇ ਤੱਤਾਂ ਨੂੰ ਹਿਲਾਉਣਾ                    | ਪਤਾ ਲਗਾਓ ਕਿ ਤੱਤ ਕਾਰਟੀਸ਼ੀਅਨ ਕੋਆਰਡੀਨੇਟਸ ਅਤੇ ਕੈਨਵਸ API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਿਵੇਂ ਮੋਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ                                            |                           [ਤੱਤਾਂ ਨੂੰ ਹਿਲਾਉਣਾ](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          ਟਕਰਾਅ ਦੀ ਪਛਾਣ                           | ਤੱਤਾਂ ਨੂੰ ਟਕਰਾਉਣ ਅਤੇ ਇੱਕ ਦੂਜੇ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਲਈ ਕੀਪ੍ਰੈਸ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਗੇਮ ਦੀ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਇੱਕ ਕੂਲਡਾਊਨ ਫੰਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰੋ    |                              [ਟਕਰਾਅ ਦੀ ਪਛਾਣ](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             ਸਕੋਰ ਰੱਖਣਾ                              | ਗੇਮ ਦੀ ਸਥਿਤੀ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਆਧਾਰ 'ਤੇ ਗਣਨਾ ਕਰੋ                                                                |                                    [ਸਕੋਰ ਰੱਖਣਾ](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     ਗੇਮ ਨੂੰ ਖਤਮ ਕਰਨਾ ਅਤੇ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨਾ                     | ਗੇਮ ਨੂੰ ਖਤਮ ਕਰਨ ਅਤੇ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਬਾਰੇ ਸਿੱਖੋ, ਜਿਸ ਵਿੱਚ ਐਸੈਟਸ ਨੂੰ ਸਾਫ਼ ਕਰਨਾ ਅਤੇ ਵੈਰੀਏਬਲ ਮੁੱਲਾਂ ਨੂੰ ਰੀਸੈਟ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ                              |                                [ਅੰਤ ਦੀ ਸਥਿਤੀ](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 ਵੈੱਬ ਐਪ ਵਿੱਚ HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟ                 | ਰੂਟਿੰਗ ਅਤੇ HTML ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮਲਟੀਪੇਜ ਵੈੱਬਸਾਈਟ ਦੇ ਆਰਕੀਟੈਕਚਰ ਦਾ ਖਾਕਾ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ                             |                            [HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟ](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  ਲੌਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਬਣਾਉਣਾ                   | ਫਾਰਮ ਬਣਾਉਣ ਅਤੇ ਵੈਰੀਫਿਕੇਸ਼ਨ ਰੂਟੀਨ ਨੂੰ ਸੰਭਾਲਣ ਬਾਰੇ ਸਿੱਖੋ                                                                          |                                           [ਫਾਰਮ](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   ਡਾਟਾ ਨੂੰ ਫੈਚ ਕਰਨ ਅਤੇ ਵਰਤਣ ਦੇ ਤਰੀਕੇ                   | ਡਾਟਾ ਤੁਹਾਡੇ ਐਪ ਵਿੱਚ ਕਿਵੇਂ ਆਉਂਦਾ ਹੈ ਅਤੇ ਬਾਹਰ ਜਾਂਦਾ ਹੈ, ਇਸਨੂੰ ਕਿਵੇਂ ਫੈਚ ਕਰਨਾ ਹੈ, ਸਟੋਰ ਕਰਨਾ ਹੈ, ਅਤੇ ਖਤਮ ਕਰਨਾ ਹੈ                                                 |                                            [ਡਾਟਾ](./7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਸੰਕਲਪ                      | ਤੁਹਾਡਾ ਐਪ ਸਟੇਟ ਨੂੰ ਕਿਵੇਂ ਰੱਖਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਤਰੀਕੇ ਨਾਲ ਕਿਵੇਂ ਮੈਨੇਜ ਕਰਨਾ ਹੈ                                                              |                                [ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   ਸਕ੍ਰੀਨ 'ਤੇ ਤੱਤਾਂ ਨੂੰ ਹਿਲਾਉਣਾ                    | ਪਤਾ ਲਗਾਓ ਕਿ ਤੱਤ ਕਿਵੇਂ ਕਾਰਟੀਸ਼ੀਅਨ ਕੋਆਰਡੀਨੇਟਸ ਅਤੇ ਕੈਨਵਸ API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੋਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ                                            |                           [ਤੱਤਾਂ ਨੂੰ ਹਿਲਾਉਣਾ](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          ਟਕਰਾਅ ਦੀ ਪਛਾਣ                           | ਤੱਤਾਂ ਨੂੰ ਟਕਰਾਉਣ ਅਤੇ ਇੱਕ ਦੂਜੇ ਨਾਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰਨ ਲਈ ਕੀਪ੍ਰੈਸ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਗੇਮ ਦੀ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕੂਲਡਾਊਨ ਫੰਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰੋ    |                              [ਟਕਰਾਅ ਦੀ ਪਛਾਣ](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             ਸਕੋਰ ਰੱਖਣਾ                              | ਗੇਮ ਦੀ ਸਥਿਤੀ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਅਧਾਰ 'ਤੇ ਗਣਨਾ ਕਰੋ                                                                |                                    [ਸਕੋਰ ਰੱਖਣਾ](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     ਗੇਮ ਨੂੰ ਖਤਮ ਅਤੇ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨਾ                     | ਗੇਮ ਨੂੰ ਖਤਮ ਅਤੇ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਬਾਰੇ ਸਿੱਖੋ, ਜਿਸ ਵਿੱਚ ਐਸੈਟਸ ਨੂੰ ਸਾਫ਼ ਕਰਨਾ ਅਤੇ ਵੈਰੀਏਬਲ ਮੁੱਲਾਂ ਨੂੰ ਰੀਸੈਟ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ                              |                                [ਅੰਤ ਦੀ ਸਥਿਤੀ](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML ਟੈਂਪਲੇਟ ਅਤੇ ਵੈੱਬ ਐਪ ਵਿੱਚ ਰੂਟ                 | ਰੂਟਿੰਗ ਅਤੇ HTML ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮਲਟੀਪੇਜ ਵੈੱਬਸਾਈਟ ਦੇ ਆਰਕੀਟੈਕਚਰ ਦਾ ਖਾਕਾ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ                             |                            [HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟ](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  ਲੌਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਬਣਾਉਣਾ                   | ਫਾਰਮ ਬਣਾਉਣ ਅਤੇ ਵੈਧਤਾ ਰੂਟੀਨ ਨੂੰ ਸੰਭਾਲਣ ਬਾਰੇ ਸਿੱਖੋ                                                                          |                                           [ਫਾਰਮ](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   ਡੇਟਾ ਲੈਣ ਅਤੇ ਵਰਤਣ ਦੇ ਤਰੀਕੇ                   | ਤੁਹਾਡੇ ਐਪ ਵਿੱਚ ਡੇਟਾ ਕਿਵੇਂ ਵਗਦਾ ਹੈ, ਕਿਵੇਂ ਲਿਆ ਜਾਂਦਾ ਹੈ, ਸਟੋਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਕਿਵੇਂ ਖਤਮ ਕੀਤਾ ਜਾਂਦਾ ਹੈ                                                 |                                            [ਡੇਟਾ](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੇ ਸੰਕਲਪ                      | ਤੁਹਾਡਾ ਐਪ ਸਟੇਟ ਨੂੰ ਕਿਵੇਂ ਰੱਖਦਾ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਤਰੀਕੇ ਨਾਲ ਕਿਵੇਂ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ ਹੈ                                                              |                                [ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
 | 25 | [Browser/VScode Code](../../8-code-editor) | VScode ਨਾਲ ਕੰਮ ਕਰਨਾ | ਕੋਡ ਐਡੀਟਰ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਸਿੱਖੋ| [VScode ਕੋਡ ਐਡੀਟਰ ਦੀ ਵਰਤੋਂ ਕਰੋ](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
-| 26 | [AI Assistants](./9-chat-project/README.md) | AI ਨਾਲ ਕੰਮ ਕਰਨਾ | ਆਪਣਾ AI ਅਸਿਸਟੈਂਟ ਬਣਾਉਣ ਬਾਰੇ ਸਿੱਖੋ | [AI ਅਸਿਸਟੈਂਟ ਪ੍ਰੋਜੈਕਟ](./9-chat-project/README.md) | Chris |
+| 26 | [AI Assistants](./9-chat-project/README.md) | AI ਨਾਲ ਕੰਮ ਕਰਨਾ | ਆਪਣਾ AI ਸਹਾਇਕ ਬਣਾਉਣ ਬਾਰੇ ਸਿੱਖੋ | [AI ਸਹਾਇਕ ਪ੍ਰੋਜੈਕਟ](./9-chat-project/README.md) | Chris |
 
 ## 🏫 ਪੈਡਾਗੌਜੀ
 
-ਸਾਡਾ ਕੋਰਸ ਦੋ ਮੁੱਖ ਪੈਡਾਗੌਜੀਕਲ ਸਿਧਾਂਤਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ:
-* ਪ੍ਰੋਜੈਕਟ-ਅਧਾਰਿਤ ਸਿੱਖਿਆ
+ਸਾਡਾ ਕੋਰਸ ਦੋ ਮੁੱਖ ਪੈਡਾਗੌਜੀਕਲ ਸਿਧਾਂਤਾਂ 'ਤੇ ਆਧਾਰਿਤ ਹੈ:
+* ਪ੍ਰੋਜੈਕਟ-ਅਧਾਰਿਤ ਸਿੱਖਣ
 * ਵਾਰੰ-ਵਾਰ ਕਵਿਜ਼
 
-ਇਹ ਪ੍ਰੋਗਰਾਮ ਜਾਵਾਸਕ੍ਰਿਪਟ, HTML, ਅਤੇ CSS ਦੇ ਬੁਨਿਆਦੀਆਂ ਅੰਸ਼ਾਂ ਨੂੰ ਸਿੱਖਾਉਂਦਾ ਹੈ, ਨਾਲ ਹੀ ਅੱਜ ਦੇ ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਦੁਆਰਾ ਵਰਤੇ ਜਾਂਦੇ ਨਵੇਂ ਟੂਲ ਅਤੇ ਤਕਨੀਕਾਂ। ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਟਾਈਪਿੰਗ ਗੇਮ, ਵਰਚੁਅਲ ਟੈਰੀਅਰੀਅਮ, ਪਰਿਆਵਰਣ-ਅਨੁਕੂਲ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ, ਸਪੇਸ-ਇਨਵੇਡਰ-ਸਟਾਈਲ ਗੇਮ, ਅਤੇ ਕਾਰੋਬਾਰਾਂ ਲਈ ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਉਣ ਦੁਆਰਾ ਹੱਥ-ਅਭਿਆਸ ਵਿਕਸਿਤ ਕਰਨ ਦਾ ਮੌਕਾ ਮਿਲੇਗਾ। ਸਿਰੀਜ਼ ਦੇ ਅੰਤ ਤੱਕ, ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੀ ਮਜ਼ਬੂਤ ਸਮਝ ਹੋਵੇਗੀ।
+ਇਹ ਪ੍ਰੋਗਰਾਮ ਜਾਵਾਸਕ੍ਰਿਪਟ, HTML, ਅਤੇ CSS ਦੇ ਮੁੱਢਲੇ ਅਧਾਰਾਂ ਨੂੰ ਸਿਖਾਉਂਦਾ ਹੈ, ਨਾਲ ਹੀ ਅੱਜ ਦੇ ਵੈੱਬ ਡਿਵੈਲਪਰਾਂ ਦੁਆਰਾ ਵਰਤੇ ਜਾਂਦੇ ਨਵੇਂ ਟੂਲ ਅਤੇ ਤਕਨੀਕਾਂ। ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਟਾਈਪਿੰਗ ਗੇਮ, ਵਰਚੁਅਲ ਟੈਰੇਰੀਅਮ, ਪਰਿਆਵਰਣ-ਅਨੁਕੂਲ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ, ਸਪੇਸ-ਇੰਵੇਡਰ-ਸਟਾਈਲ ਗੇਮ, ਅਤੇ ਕਾਰੋਬਾਰਾਂ ਲਈ ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਉਣ ਦੁਆਰਾ ਹੱਥ-ਅਨੁਭਵ ਵਿਕਸਿਤ ਕਰਨ ਦਾ ਮੌਕਾ ਮਿਲੇਗਾ। ਸਿਰੀਜ਼ ਦੇ ਅੰਤ ਤੱਕ, ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੀ ਮਜ਼ਬੂਤ ​​ਸਮਝ ਹੋਵੇਗੀ।
 
-> 🎓 ਤੁਸੀਂ ਇਸ ਕੋਰਸ ਦੇ ਪਹਿਲੇ ਕੁਝ ਪਾਠਾਂ ਨੂੰ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
+> 🎓 ਤੁਸੀਂ ਇਸ ਕੋਰਸ ਦੇ ਪਹਿਲੇ ਕੁਝ ਪਾਠਾਂ ਨੂੰ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ Microsoft Learn 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!
 
-ਪ੍ਰੋਜੈਕਟਾਂ ਨਾਲ ਸਮੱਗਰੀ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਦੁਆਰਾ, ਵਿਦਿਆਰਥੀਆਂ ਲਈ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਹੋਰ ਰੁਚਿਕਰ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸੰਕਲਪਾਂ ਦੀ ਯਾਦਸ਼ਕਤੀ ਨੂੰ ਵਧਾਇਆ ਜਾਵੇਗਾ। ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ ਵਿੱਚ ਕੁਝ ਸ਼ੁਰੂਆਤੀ ਪਾਠ ਵੀ ਲਿਖੇ ਹਨ ਜੋ ਸੰਕਲਪਾਂ ਨੂੰ ਪੇਸ਼ ਕਰਦੇ ਹਨ, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ਵੀਡੀਓ ਟਿਊਟੋਰਿਅਲਾਂ ਦੇ ਸੰਗ੍ਰਹਿ ਵਿੱਚੋਂ ਇੱਕ ਵੀਡੀਓ ਦੇ ਨਾਲ ਜੋੜੇ ਗਏ ਹਨ, ਜਿਸ ਦੇ ਕੁਝ ਲੇਖਕ
-- [ਜਨਰੇਟਿਵ AI ਜਾਵਾ ਨਾਲ](https://github.com/microsoft/Generative-AI-for-beginners-java)  
-- [ਸ਼ੁਰੂਆਤੀ ਲਈ AI](https://aka.ms/ai-beginners)  
-- [ਸ਼ੁਰੂਆਤੀ ਲਈ ਡਾਟਾ ਸਾਇੰਸ](https://aka.ms/datascience-beginners)  
-- [ਸ਼ੁਰੂਆਤੀ ਲਈ ML](https://aka.ms/ml-beginners)  
-- [ਸ਼ੁਰੂਆਤੀ ਲਈ ਸਾਈਬਰਸੁਰੱਖਿਆ](https://github.com/microsoft/Security-101)  
-- [ਸ਼ੁਰੂਆਤੀ ਲਈ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ](https://aka.ms/webdev-beginners)  
-- [ਸ਼ੁਰੂਆਤੀ ਲਈ IoT](https://aka.ms/iot-beginners)  
-- [ਸ਼ੁਰੂਆਤੀ ਲਈ XR ਡਿਵੈਲਪਮੈਂਟ](https://github.com/microsoft/xr-development-for-beginners)  
-- [GitHub Copilot ਨੂੰ Agentic ਵਰਤੋਂ ਲਈ ਮਾਹਰ ਬਣਾਓ](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)  
-- [C#/.NET ਡਿਵੈਲਪਰਾਂ ਲਈ GitHub Copilot ਨੂੰ ਮਾਹਰ ਬਣਾਓ](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)  
-- [ਆਪਣੀ Copilot ਐਡਵੈਂਚਰ ਚੁਣੋ](https://github.com/microsoft/CopilotAdventures)  
+ਪ੍ਰੋਜੈਕਟਾਂ ਨਾਲ ਸਮੱਗਰੀ ਨੂੰ ਸੰਗਤ ਬਣਾਉਣ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਦੁਆਰਾ, ਵਿਦਿਆਰਥੀਆਂ ਲਈ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਹੋਰ ਰੁਚਿਕਰ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸੰਕਲਪਾਂ ਦੀ ਯਾਦਸ਼ਕਤੀ ਨੂੰ ਵਧਾਇਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ ਵਿੱਚ ਕਈ ਸ਼ੁਰੂਆਤੀ ਪਾਠ ਵੀ ਲਿਖੇ ਹਨ ਜੋ ਸੰਕਲਪਾਂ ਨੂੰ ਪੇਸ਼ ਕਰਦੇ ਹਨ, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ਵੀਡੀਓ ਟਿਊਟੋਰਿਅਲਜ਼ ਦੇ ਸੰਗ੍ਰਹਿ ਵਿੱਚੋਂ ਇੱਕ ਵੀਡੀਓ ਦੇ ਨਾਲ ਜੋੜੇ ਗਏ ਹਨ, ਜਿਸ ਦੇ ਕੁਝ ਲੇਖਕਾਂ ਨੇ ਇਸ ਕੋਰਸ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਇਆ ਹੈ।
+
+ਇਸ ਤੋਂ ਇਲਾਵਾ, ਕਲਾਸ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਘੱਟ-ਦਬਾਅ ਵਾਲਾ ਕਵਿਜ਼ ਵਿਦਿਆਰਥੀ ਨੂੰ ਇੱਕ ਵਿਸ਼ੇ ਨੂੰ ਸ
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ ਐਜ AI](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ MCP](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ AI ਏਜੰਟ](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### ਜਨਰੇਟਿਵ AI ਸੀਰੀਜ਼  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ ਜਨਰੇਟਿਵ AI](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ਜਨਰੇਟਿਵ AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)  
+[![ਜਨਰੇਟਿਵ AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)  
+[![ਜਨਰੇਟਿਵ AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### ਮੁੱਖ ਸਿੱਖਣ  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ ML](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ ਡਾਟਾ ਸਾਇੰਸ](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ AI](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ ਸਾਇਬਰਸੁਰੱਖਿਆ](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ IoT](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ਬੁਨਿਆਦੀ ਪੱਧਰ ਲਈ XR ਡਿਵੈਲਪਮੈਂਟ](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### ਕੋਪਾਇਲਟ ਸੀਰੀਜ਼  
+[![AI ਜੋੜੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਲਈ ਕੋਪਾਇਲਟ](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)  
+[![C#/.NET ਲਈ ਕੋਪਾਇਲਟ](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)  
+[![ਕੋਪਾਇਲਟ ਐਡਵੈਂਚਰ](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)  
 
 ## ਮਦਦ ਪ੍ਰਾਪਤ ਕਰਨਾ  
 
-ਜੇ ਤੁਸੀਂ ਫਸ ਜਾਂਦੇ ਹੋ ਜਾਂ AI ਐਪਸ ਬਣਾਉਣ ਬਾਰੇ ਕੋਈ ਸਵਾਲ ਹੈ, ਤਾਂ ਸ਼ਾਮਲ ਹੋਵੋ:  
+ਜੇ ਤੁਸੀਂ ਫਸ ਜਾਂਦੇ ਹੋ ਜਾਂ AI ਐਪ ਬਣਾਉਣ ਬਾਰੇ ਕੋਈ ਸਵਾਲ ਹੈ, ਤਾਂ ਸ਼ਾਮਲ ਹੋਵੋ:  
 
 [![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)  
 
-ਜੇ ਤੁਹਾਨੂੰ ਉਤਪਾਦ ਬਾਰੇ ਫੀਡਬੈਕ ਦੇਣਾ ਹੈ ਜਾਂ ਬਣਾਉਣ ਦੌਰਾਨ ਕੋਈ ਗਲਤੀ ਆਉਂਦੀ ਹੈ, ਤਾਂ ਜਾਓ:  
+ਜੇ ਤੁਹਾਨੂੰ ਉਤਪਾਦ ਫੀਡਬੈਕ ਦੀ ਲੋੜ ਹੈ ਜਾਂ ਬਣਾਉਣ ਦੌਰਾਨ ਗਲਤੀਆਂ ਆਉਂਦੀਆਂ ਹਨ, ਤਾਂ ਜਾਓ:  
 
 [![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)  
 
 ## ਲਾਇਸੰਸ  
 
-ਇਹ ਰਿਪੋਜ਼ਿਟਰੀ MIT ਲਾਇਸੰਸ ਅਧੀਨ ਹੈ। ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ [LICENSE](../../LICENSE) ਫਾਈਲ ਵੇਖੋ।  
+ਇਹ ਰਿਪੋਜ਼ਟਰੀ MIT ਲਾਇਸੰਸ ਅਧੀਨ ਹੈ। ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ [LICENSE](../../LICENSE) ਫਾਈਲ ਵੇਖੋ।  
 
 ---
 
 **ਅਸਵੀਕਰਤੀ**:  
-ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
+ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
\ No newline at end of file
diff --git a/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index 038de3305f..397a0bea6e 100644
--- a/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -1,39 +1,56 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3e0da5eb9b275fe3cb431033c1413ec2",
-  "translation_date": "2025-10-22T15:20:44+00:00",
+  "original_hash": "d45ddcc54eb9232a76d08328b09d792e",
+  "translation_date": "2025-11-03T13:47:42+00:00",
   "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
   "language_code": "tl"
 }
 -->
-# Panimula sa Mga Wika ng Programming at Modernong Kasangkapan ng Developer
+# Panimula sa Mga Wika ng Programming at Modernong Developer Tools
 
 Kamusta, hinaharap na developer! 👋 Pwede ba akong magbahagi ng isang bagay na palaging nagbibigay sa akin ng kilig araw-araw? Malapit mo nang matuklasan na ang programming ay hindi lang tungkol sa mga computer – ito ay parang pagkakaroon ng superpowers para maisakatuparan ang mga pinakamalupit mong ideya!
 
 Alam mo yung sandali na ginagamit mo ang paborito mong app at parang ang lahat ay perpektong gumagana? Kapag pinindot mo ang isang button at may nangyayaring sobrang astig na magpapaisip sa'yo ng "wow, paano nila NAGAWA yun?" Well, may isang tao na katulad mo – marahil nakaupo sa paborito nilang coffee shop ng alas-dos ng umaga na may pangatlong tasa ng espresso – ang nagsulat ng code na lumikha ng mahika na iyon. At eto ang magpapasabog ng utak mo: sa pagtatapos ng araling ito, hindi mo lang maiintindihan kung paano nila ginawa iyon, kundi magiging excited ka na subukan ito mismo!
 
-Alam mo, naiintindihan ko kung bakit nakakatakot ang programming sa simula. Noong nagsimula ako, akala ko kailangan mong maging isang math genius o marunong mag-code mula pa noong limang taong gulang ka. Pero eto ang nagbago ng pananaw ko: ang programming ay parang pag-aaral ng bagong wika. Nagsisimula ka sa "hello" at "thank you," tapos natututo kang mag-order ng kape, at bago mo malaman, nagkakaroon ka na ng malalim na talakayan! Pero sa kasong ito, nakikipag-usap ka sa mga computer, at sa totoo lang? Sila ang pinaka-pasensyosong kausap na makikilala mo – hindi nila hinuhusgahan ang mga pagkakamali mo at palaging handang subukan ulit!
+Alam mo, naiintindihan ko kung bakit nakakatakot ang programming sa simula. Noong nagsimula ako, akala ko kailangan mong maging isang math genius o marunong mag-code mula limang taong gulang. Pero eto ang nagbago ng pananaw ko: ang programming ay parang pag-aaral ng bagong wika. Nagsisimula ka sa "hello" at "thank you," tapos natututo kang mag-order ng kape, at bago mo malaman, nakikipag-usap ka na tungkol sa malalalim na pilosopikal na usapan! Pero sa kasong ito, nakikipag-usap ka sa mga computer, at sa totoo lang? Sila ang pinaka-pasensyosong kausap – hindi sila humuhusga sa mga pagkakamali mo at palaging handang subukan ulit!
 
-Ngayon, sisilipin natin ang mga kamangha-manghang kasangkapan na ginagawang posible ang modernong web development – at sobrang nakakaadik pa! Pinag-uusapan natin ang parehong mga editor, browser, at workflow na ginagamit ng mga developer sa Netflix, Spotify, at sa paborito mong indie app studio araw-araw. At eto ang magpapasayaw sa'yo: karamihan sa mga propesyonal na kasangkapan na ito ay ganap na libre!
+Ngayon, sisilipin natin ang mga kamangha-manghang tools na ginagawang posible ang modernong web development – at sobrang nakakaadik! Pinag-uusapan natin ang parehong editors, browsers, at workflows na ginagamit ng mga developer sa Netflix, Spotify, at sa paborito mong indie app studio araw-araw. At eto ang magpapasayaw sa'yo: karamihan sa mga propesyonal-grade, industry-standard tools na ito ay ganap na libre!
 
 ![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.tl.png)
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your Programming Journey Today
+    section Discover
+      What is Programming: 5: You
+      Programming Languages: 4: You
+      Tools Overview: 5: You
+    section Explore
+      Code Editors: 4: You
+      Browsers & DevTools: 5: You
+      Command Line: 3: You
+    section Practice
+      Language Detective: 4: You
+      Tool Exploration: 5: You
+      Community Connection: 5: You
+```
+
 ## Tingnan Natin Kung Ano na ang Alam Mo!
 
-Bago tayo sumabak sa masayang bahagi, curious ako – ano na ang alam mo tungkol sa mundo ng programming? At pakinggan mo, kung iniisip mo na "Wala akong ideya sa kahit ano dito," hindi lang okay iyon, kundi perpekto! Ibig sabihin nasa tamang lugar ka. Isipin mo ang quiz na ito na parang stretching bago mag-ehersisyo – pinapainit lang natin ang mga utak na muscle!
+Bago tayo sumabak sa masayang bahagi, curious ako – ano na ang alam mo tungkol sa mundo ng programming? At pakinggan mo, kung tinitingnan mo ang mga tanong na ito at iniisip na "Wala akong ideya sa kahit ano dito," hindi lang okay iyon, kundi perpekto! Ibig sabihin nasa tamang lugar ka. Isipin ang quiz na ito na parang stretching bago mag-workout – pinapainit lang natin ang mga brain muscles!
 
 [Kunin ang pre-lesson quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
 
-## Ang Pakikipagsapalaran na Pupuntahan Natin
+## Ang Pakikipagsapalaran na Pupuntahan Natin Magkasama
 
-Okay, sobrang excited ako sa mga bagay na matutuklasan natin ngayon! Seryoso, gusto kong makita ang mukha mo kapag naintindihan mo ang ilan sa mga konsepto na ito. Narito ang kamangha-manghang paglalakbay na pupuntahan natin:
+Okay, sobrang excited ako sa mga bagay na matutuklasan natin ngayon! Seryoso, gusto kong makita ang mukha mo kapag naintindihan mo ang ilang mga konsepto. Narito ang kamangha-manghang paglalakbay na pupuntahan natin:
 
-- **Ano ang programming (at bakit ito ang pinaka-cool na bagay kailanman!)** – Matutuklasan natin kung paano ang code ay literal na invisible magic na nagpapagana sa lahat ng bagay sa paligid mo, mula sa alarm na alam kung Lunes ng umaga hanggang sa algorithm na perpektong pumipili ng mga rekomendasyon sa Netflix
-- **Mga wika ng programming at ang kanilang mga kahanga-hangang personalidad** – Isipin mo na parang pumasok ka sa isang party kung saan ang bawat tao ay may iba't ibang superpowers at paraan ng paglutas ng problema. Ganito ang mundo ng programming languages, at magugustuhan mo ang pagkilala sa kanila!
-- **Ang mga pangunahing bahagi na gumagawa ng digital magic** – Isipin mo ito na parang ultimate creative LEGO set. Kapag naintindihan mo kung paano magkasya ang mga piraso, mare-realize mo na kaya mong buuin ang kahit ano na naiisip mo
-- **Mga propesyonal na kasangkapan na magpaparamdam sa'yo na parang binigyan ka ng wand ng wizard** – Hindi ako nagiging dramatic dito – ang mga kasangkapan na ito ay talagang magpaparamdam sa'yo na may superpowers ka, at ang pinakamagandang bahagi? Pareho ang ginagamit ng mga propesyonal!
+- **Ano ang programming (at bakit ito ang pinakamalupit na bagay kailanman!)** – Matutuklasan natin kung paano ang code ay literal na invisible magic na nagpapagana sa lahat ng bagay sa paligid mo, mula sa alarm na somehow alam na Lunes ng umaga hanggang sa algorithm na perpektong pumipili ng mga rekomendasyon sa Netflix mo
+- **Mga wika ng programming at ang kanilang mga kahanga-hangang personalidad** – Isipin mo na parang pumasok ka sa isang party kung saan ang bawat tao ay may iba't ibang superpowers at paraan ng paglutas ng mga problema. Ganyan ang mundo ng programming languages, at magugustuhan mo silang makilala!
+- **Ang mga pangunahing bahagi na gumagawa ng digital magic** – Isipin mo ito na parang ultimate creative LEGO set. Kapag naintindihan mo kung paano magkasya ang mga piraso, mare-realize mo na pwede kang gumawa ng kahit ano na iniisip mo
+- **Mga propesyonal na tools na magpaparamdam sa'yo na parang binigyan ka ng wand ng wizard** – Hindi ako nagiging dramatic dito – ang mga tools na ito ay talagang magpaparamdam sa'yo na may superpowers ka, at ang pinakamagandang bahagi? Pareho ang ginagamit ng mga propesyonal!
 
 > 💡 **Eto ang bagay**: Huwag mo nang isipin na kailangan mong kabisaduhin ang lahat ngayon! Sa ngayon, gusto ko lang maramdaman mo ang excitement tungkol sa kung ano ang posible. Ang mga detalye ay natural na tatatak habang nagpa-practice tayo – ganito ang tunay na pag-aaral!
 
@@ -43,57 +60,126 @@ Okay, sobrang excited ako sa mga bagay na matutuklasan natin ngayon! Seryoso, gu
 
 Sige, sagutin natin ang tanong na milyon ang halaga: ano nga ba ang programming?
 
-Magbibigay ako ng kwento na nagbago ng pananaw ko tungkol dito. Noong nakaraang linggo, sinubukan kong ipaliwanag sa nanay ko kung paano gamitin ang bagong remote ng smart TV namin. Nahuli ko ang sarili kong nagsasabi ng mga bagay tulad ng "Pindutin ang pulang button, pero hindi yung malaking pulang button, yung maliit na pulang button sa kaliwa... hindi, sa kaliwa mo... okay, hawakan mo ng dalawang segundo, hindi isa, hindi tatlo..." Pamilyar ba? 😅
+Magbibigay ako ng kwento na nagbago ng pananaw ko tungkol dito. Noong nakaraang linggo, sinubukan kong ipaliwanag sa nanay ko kung paano gamitin ang bagong remote ng aming smart TV. Nahuli ko ang sarili kong nagsasabi ng mga bagay tulad ng "Pindutin ang pulang button, pero hindi yung malaking pulang button, yung maliit na pulang button sa kaliwa... hindi, sa kabila mong kaliwa... okay, ngayon pindutin mo ng dalawang segundo, hindi isa, hindi tatlo..." Pamilyar ba? 😅
+
+Yan ang programming! Ito ang sining ng pagbibigay ng sobrang detalyado, step-by-step na mga instruksyon sa isang bagay na napaka-powerful pero kailangan ng lahat ng bagay na ipaliwanag nang perpekto. Pero sa halip na ipaliwanag sa nanay mo (na pwedeng magtanong ng "alin sa pulang button?!"), ipinaliwanag mo ito sa computer (na gagawin lang ang eksaktong sinabi mo, kahit na hindi eksaktong iyon ang ibig mong sabihin).
+
+Eto ang nagpasabog ng utak ko noong una kong natutunan ito: ang mga computer ay talagang simple sa kanilang core. Literal na naiintindihan lang nila ang dalawang bagay – 1 at 0, na basically ay "oo" at "hindi" o "on" at "off." Yun lang! Pero eto ang nagiging magical – hindi natin kailangang magsalita sa 1s at 0s na parang nasa The Matrix tayo. Dito pumapasok ang **programming languages**. Parang pagkakaroon ng pinakamahusay na tagasalin sa mundo na nagko-convert ng mga normal na human thoughts mo sa computer language.
 
-Yan ang programming! Ito ang sining ng pagbibigay ng sobrang detalyado, step-by-step na mga instruksyon sa isang bagay na napaka-makapangyarihan pero kailangan ang lahat ay malinaw na ipinaliwanag. Pero sa halip na ipaliwanag sa nanay mo (na pwedeng magtanong ng "alin sa pulang button?!"), ipinaliwanag mo ito sa computer (na gagawin lang ang eksaktong sinabi mo, kahit na hindi iyon ang ibig mong sabihin).
+At eto ang nagbibigay pa rin sa akin ng kilig tuwing umaga: literal na *lahat* ng digital sa buhay mo ay nagsimula sa isang tao na katulad mo, marahil nakasuot ng pajama na may tasa ng kape, nagta-type ng code sa kanilang laptop. Yung Instagram filter na nagpapaganda sa'yo? May nag-code niyan. Yung rekomendasyon na nagdala sa'yo sa bagong paborito mong kanta? Isang developer ang gumawa ng algorithm na iyon. Yung app na tumutulong sa'yo na hatiin ang bayarin sa hapunan kasama ang mga kaibigan? Yep, may nag-isip ng "ang hassle nito, siguro pwede ko itong ayusin" at pagkatapos... ginawa nila!
 
-Eto ang nagpasabog ng utak ko noong una kong natutunan ito: ang mga computer ay talagang simple sa kanilang core. Literal na naiintindihan lang nila ang dalawang bagay – 1 at 0, na parang "oo" at "hindi" o "on" at "off." Yun lang! Pero eto ang nagiging mahika – hindi natin kailangang magsalita sa 1s at 0s na parang nasa The Matrix tayo. Dito pumapasok ang **programming languages**. Parang pagkakaroon ng pinakamahusay na tagasalin sa mundo na nagko-convert ng mga normal na ideya ng tao sa computer language.
+Kapag natutunan mong mag-program, hindi ka lang nakakakuha ng bagong skill – nagiging bahagi ka ng kamangha-manghang komunidad ng mga problem-solvers na iniisip araw-araw, "Paano kaya kung makakagawa ako ng isang bagay na magpapasaya sa araw ng iba?" Sa totoo lang, may mas cool pa ba sa ganun?
 
-At eto ang nagbibigay pa rin sa akin ng kilig tuwing umaga: literal na *lahat* ng digital sa buhay mo ay nagsimula sa isang tao na katulad mo, marahil nakasuot ng pajama na may tasa ng kape, nagta-type ng code sa kanilang laptop. Yung Instagram filter na nagpapaganda sa'yo? May nag-code nun. Yung rekomendasyon na nagdala sa'yo sa bagong paborito mong kanta? Isang developer ang gumawa ng algorithm na iyon. Yung app na tumutulong sa'yo na hatiin ang bayarin sa hapunan kasama ang mga kaibigan? Yep, may nag-isip ng "nakakainis ito, siguro kaya ko itong ayusin" at pagkatapos... ginawa nila!
+✅ **Huntahan ng Fun Fact**: Eto ang sobrang astig na hanapin kapag may libreng oras ka – sino sa tingin mo ang unang computer programmer sa mundo? Bibigyan kita ng hint: baka hindi mo inaasahan! Ang kwento sa likod ng taong ito ay sobrang fascinating at nagpapakita na ang programming ay palaging tungkol sa creative problem-solving at pag-iisip sa labas ng kahon.
 
-Kapag natutunan mong mag-program, hindi ka lang nakakakuha ng bagong kasanayan – nagiging bahagi ka ng kamangha-manghang komunidad ng mga problem-solvers na iniisip araw-araw, "Paano kaya kung makakagawa ako ng isang bagay na magpapasaya sa araw ng iba?" Sa totoo lang, may mas cool pa ba sa ganun?
+### 🧠 **Check-in Time: Kamusta ang Pakiramdam Mo?**
 
-✅ **Hunt ng Fun Fact**: Eto ang sobrang cool na hanapin kapag may libreng oras ka – sino sa tingin mo ang unang computer programmer sa mundo? Bibigyan kita ng hint: baka hindi mo inaasahan! Ang kwento sa likod ng taong ito ay sobrang fascinating at nagpapakita na ang programming ay palaging tungkol sa creative problem-solving at pag-iisip sa labas ng kahon.
+**Mag-reflect saglit:**
+- Naiintindihan mo na ba ang ideya ng "pagbibigay ng instruksyon sa mga computer"?
+- May maisip ka bang pang-araw-araw na gawain na gusto mong i-automate gamit ang programming?
+- Anong mga tanong ang bumubuo sa isip mo tungkol sa programming?
+
+> **Tandaan**: Normal lang kung may mga konsepto na medyo malabo pa ngayon. Ang pag-aaral ng programming ay parang pag-aaral ng bagong wika – kailangan ng oras para mabuo ng utak mo ang mga neural pathways. Ang galing mo!
 
 ## Ang Mga Programming Languages ay Parang Iba't Ibang Flavors ng Mahika
 
-Okay, medyo weird ito, pero sundan mo ako – ang mga programming languages ay parang iba't ibang uri ng musika. Isipin mo: may jazz, na smooth at improvisational, rock na malakas at straightforward, classical na elegant at structured, at hip-hop na creative at expressive. Ang bawat estilo ay may sariling vibe, sariling komunidad ng passionate fans, at bawat isa ay perpekto para sa iba't ibang mood at okasyon.
+Okay, medyo weird ito pero sundan mo ako – ang mga programming languages ay parang iba't ibang uri ng musika. Isipin mo: may jazz, na smooth at improvisational, rock na powerful at straightforward, classical na elegant at structured, at hip-hop na creative at expressive. Ang bawat style ay may sariling vibe, sariling komunidad ng passionate fans, at bawat isa ay perpekto para sa iba't ibang mood at okasyon.
 
-Ganito rin ang programming languages! Hindi mo gagamitin ang parehong wika para gumawa ng isang masayang mobile game na gagamitin mo para mag-crunch ng napakalaking dami ng climate data, tulad ng hindi mo tutugtugin ang death metal sa yoga class (well, karamihan ng yoga class anyway! 😄).
+Ganyan din ang programming languages! Hindi mo gagamitin ang parehong language para gumawa ng masayang mobile game na gagamitin mo para mag-crunch ng massive na climate data, tulad ng hindi mo tutugtugin ang death metal sa yoga class (well, karamihan ng yoga classes anyway! 😄).
 
-Pero eto ang talagang nagpapasabog ng utak ko tuwing iniisip ko ito: ang mga wika na ito ay parang pagkakaroon ng pinaka-pasensyosong, pinakamatalinong interpreter sa mundo na nakaupo sa tabi mo. Pwede mong ipahayag ang mga ideya mo sa paraang natural sa utak ng tao, at sila ang bahala sa sobrang kumplikadong trabaho ng pag-convert nito sa 1s at 0s na talagang naiintindihan ng mga computer. Parang may kaibigan ka na fluent sa parehong "human creativity" at "computer logic" – at hindi sila napapagod, hindi kailangan ng coffee breaks, at hindi ka hinuhusgahan sa pagtatanong ng parehong tanong nang dalawang beses!
+Pero eto ang sobrang nakakabaliw tuwing iniisip ko ito: ang mga languages na ito ay parang pagkakaroon ng pinaka-pasensyosong, pinakamatalinong interpreter sa mundo na laging nasa tabi mo. Pwede mong ipahayag ang mga ideya mo sa paraang natural sa utak ng tao, at sila ang bahala sa sobrang komplikadong trabaho ng pag-convert nito sa 1s at 0s na naiintindihan ng mga computer. Parang may kaibigan ka na fluent sa parehong "human creativity" at "computer logic" – at hindi sila napapagod, hindi kailangan ng coffee breaks, at hindi ka hinuhusgahan sa paulit-ulit na tanong!
 
 ### Mga Popular na Programming Languages at Kanilang Gamit
 
+```mermaid
+mindmap
+  root((Programming Languages))
+    Web Development
+      JavaScript
+        Frontend Magic
+        Interactive Websites
+      TypeScript
+        JavaScript + Types
+        Enterprise Apps
+    Data & AI
+      Python
+        Data Science
+        Machine Learning
+        Automation
+      R
+        Statistics
+        Research
+    Mobile Apps
+      Java
+        Android
+        Enterprise
+      Swift
+        iOS
+        Apple Ecosystem
+      Kotlin
+        Modern Android
+        Cross-platform
+    Systems & Performance
+      C++
+        Games
+        Performance Critical
+      Rust
+        Memory Safety
+        System Programming
+      Go
+        Cloud Services
+        Scalable Backend
+```
+
 | Wika | Pinakamahusay Para sa | Bakit Popular |
 |------|-----------------------|---------------|
-| **JavaScript** | Web development, user interfaces | Tumatakbo sa mga browser at nagpapagana ng interactive na mga website |
-| **Python** | Data science, automation, AI | Madaling basahin at matutunan, makapangyarihang mga library |
+| **JavaScript** | Web development, user interfaces | Tumatakbo sa browsers at nagpapagana ng interactive websites |
+| **Python** | Data science, automation, AI | Madaling basahin at matutunan, malalakas na libraries |
 | **Java** | Enterprise applications, Android apps | Platform-independent, matibay para sa malalaking sistema |
 | **C#** | Windows applications, game development | Malakas na suporta mula sa Microsoft ecosystem |
 | **Go** | Cloud services, backend systems | Mabilis, simple, dinisenyo para sa modernong computing |
 
 ### High-Level vs. Low-Level Languages
 
-Okay, eto ang konsepto na talagang nagpaikot ng utak ko noong una akong natututo, kaya ibabahagi ko ang analogy na talagang nagpa-click sa akin – at sana makatulong din sa'yo!
+Okay, eto ang konsepto na talagang nagpaikot ng utak ko noong nagsimula ako, kaya ibabahagi ko ang analogy na nagpa-click sa akin – at sana makatulong din sa'yo!
 
-Isipin mo na bumisita ka sa isang bansa kung saan hindi mo alam ang wika, at desperado kang hanapin ang pinakamalapit na banyo (lahat tayo dumaan na diyan, di ba? 😅):
+Isipin mo na bumisita ka sa isang bansa kung saan hindi mo alam ang wika, at desperately kailangan mong hanapin ang pinakamalapit na banyo (lahat tayo napunta na sa ganitong sitwasyon, di ba? 😅):
 
-- **Low-level programming** ay parang pag-aaral ng lokal na dialect nang sobrang husay na kaya mong makipag-usap sa lola na nagbebenta ng prutas sa kanto gamit ang mga cultural references, lokal na slang, at inside jokes na naiintindihan lang ng mga lumaki doon. Sobrang impressive at sobrang efficient... kung fluent ka! Pero medyo nakaka-overwhelm kapag naghahanap ka lang ng banyo.
+- **Low-level programming** ay parang pag-aaral ng lokal na dialect nang sobrang husay na kaya mong makipag-usap sa lola na nagtitinda ng prutas sa kanto gamit ang cultural references, lokal na slang, at inside jokes na naiintindihan lang ng mga lumaki doon. Sobrang impressive at sobrang efficient... kung fluent ka! Pero medyo overwhelming kapag naghahanap ka lang ng banyo.
 
 - **High-level programming** ay parang pagkakaroon ng amazing na lokal na kaibigan na gets ka. Pwede mong sabihin "Kailangan ko talagang hanapin ang restroom" sa plain English, at sila ang bahala sa cultural translation at magbibigay ng direksyon sa paraang naiintindihan ng utak mo.
 
 Sa programming terms:
-- **Low-level languages** (tulad ng Assembly o C) ay nagbibigay-daan sa'yo na magkaroon ng sobrang detalyadong pag-uusap sa aktwal na hardware ng computer, pero kailangan mong mag-isip na parang makina, na... well, sabihin na lang natin na medyo malaking mental shift!
+- **Low-level languages** (tulad ng Assembly o C) ay nagbibigay-daan sa'yo na magkaroon ng sobrang detalyadong usapan sa actual hardware ng computer, pero kailangan mong mag-isip na parang makina, na... well, sabihin na lang natin na malaking mental shift ito!
 - **High-level languages** (tulad ng JavaScript, Python, o C#) ay nagbibigay-daan sa'yo na mag-isip na parang tao habang sila ang bahala sa machine-speak sa likod ng eksena. Plus, may mga sobrang welcoming na komunidad na puno ng mga tao na naaalala kung paano maging bago at talagang gustong tumulong!
 
-Hulaan mo kung alin ang irerekomenda kong simulan mo? 😉 Ang high-level languages ay parang training wheels na hindi mo gustong tanggalin dahil mas pinapasaya nila ang buong karanasan!
+Hulaan mo kung alin ang irerekomenda kong simulan mo? 😉 Ang high-level languages ay parang training wheels na hindi mo gustong tanggalin dahil mas enjoyable ang buong experience!
+
+```mermaid
+flowchart TB
+    A["👤 Human Thought:<br/>'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level}
+    
+    B -->|High-Level| C["🌟 JavaScript/Python<br/>Easy to read and write"]
+    B -->|Low-Level| D["⚙️ Assembly/C<br/>Direct hardware control"]
+    
+    C --> E["📝 Write: fibonacci(10)"]
+    D --> F["📝 Write: mov r0,#00<br/>sub r0,r0,#01"]
+    
+    E --> G["🤖 Computer Understanding:<br/>Translator handles complexity"]
+    F --> G
+    
+    G --> H["💻 Same Result:<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
+    
+    style C fill:#e1f5fe
+    style D fill:#fff3e0
+    style H fill:#e8f5e8
+```
 
 ### Ipakita Ko sa'yo Kung Bakit Mas Friendly ang High-Level Languages
 
-Okay, ipapakita ko sa'yo ang isang bagay na perpektong nagpapakita kung bakit ako na-in love sa high-level languages, pero una – kailangan mong ipangako sa akin ang isang bagay. Kapag nakita mo ang unang halimbawa ng code, huwag kang mag-panic! Dapat itong mukhang nakakatakot. Yan mismo ang punto na ginagawa ko!
+Alright, ipapakita ko sa'yo ang isang bagay na perpektong nagpapakita kung bakit na-inlove ako sa high-level languages, pero una – kailangan mo akong pangakuan ng isang bagay. Kapag nakita mo ang unang code example, huwag kang mag-panic! Dapat itong mukhang intimidating. Yan ang punto na ginagawa ko!
 
-Titingnan natin ang parehong task na isinulat sa dalawang magkaibang estilo. Parehong gumagawa ng tinatawag na Fibonacci sequence – ito ay isang magandang mathematical pattern kung saan ang bawat numero ay kabuuan ng dalawang nauna: 0, 1, 1, 2, 3, 5, 8, 13... (Fun fact: makikita mo ang pattern na ito literal na kahit saan sa kalikasan – mga spiral ng buto ng sunflower, mga pattern ng pinecone, kahit ang paraan ng pagbuo ng mga galaxy!)
+Titingnan natin ang parehong task na isinulat sa dalawang magkaibang style. Parehong gumagawa ng tinatawag na Fibonacci sequence – ito ay isang magandang mathematical pattern kung saan ang bawat numero ay ang kabuuan ng dalawang nauna: 0, 1, 1, 2, 3, 5, 8, 13... (Fun fact: makikita mo ang pattern na ito literal na kahit saan sa kalikasan – sunflower seed spirals, pinecone patterns, kahit ang paraan ng pagbuo ng mga galaxy!)
 
 Handa ka na bang makita ang pagkakaiba? Tara na!
 
@@ -110,9 +196,9 @@ console.log('Fibonacci sequence:');
 
 **Eto ang ginagawa ng code na ito:**
 - **Magdeklara** ng constant para tukuyin kung ilang Fibonacci numbers ang gusto nating i-generate
-- **Mag-initialize** ng dalawang variable para subaybayan ang kasalukuyan at susunod na numero sa sequence
-- **I-set up** ang mga panimulang halaga (0 at 1) na tumutukoy sa pattern ng Fibonacci
-- **Ipakita** ang header message para tukuyin ang output natin
+- **Mag-initialize** ng dalawang variables para i-track ang kasalukuyan at susunod na numero sa sequence
+- **Mag-set up** ng starting values (0 at 1) na nagde-define ng Fibonacci pattern
+- **Mag-display** ng header message para tukuyin ang output natin
 
 ```javascript
 // Step 2: Generate the sequence with a loop
@@ -128,9 +214,9 @@ for (let i = 0; i < fibonacciCount; i++) {
 
 **Paghiwa-hiwalay ng nangyayari dito:**
 - **Mag-loop** sa bawat posisyon sa sequence gamit ang `for` loop
-- **Ipakita** ang bawat numero kasama ang posisyon nito gamit ang template literal formatting
-- **I-calculate** ang susunod na Fibonacci number sa pamamagitan ng pagdagdag ng kasalukuyan at susunod na halaga
-- **I-update** ang tracking variables para lumipat sa susunod na iteration
+- **Mag-display** ng bawat numero kasama ang posisyon nito gamit ang template literal formatting
+- **Mag-calculate** ng susunod na Fibonacci number sa pamamagitan ng pagdagdag ng kasalukuyan at susunod na values
+- **Mag-update** ng tracking variables para lumipat sa susunod na iteration
 
 ```javascript
 // Step 3: Modern functional approach
@@ -149,11 +235,11 @@ const fibSequence = generateFibonacci(10);
 console.log(fibSequence);
 ```
 
-**Sa itaas, ginawa natin:**
-- **Lumikha** ng reusable function gamit ang modernong arrow function syntax
-- **Bumuo** ng array para i-store ang kumpletong sequence sa halip na ipakita isa-isa
-- **Gumamit** ng array indexing para i-calculate ang bawat bagong numero mula sa mga naunang halaga
-- **Ibalik** ang kumpletong sequence para sa flexible na paggamit sa ibang bahagi ng programa
+**Sa itaas, ginawa natin ang:**
+- **Paglikha** ng reusable function gamit ang modernong arrow function syntax
+- **Pagbuo** ng array para i-store ang buong sequence sa halip na i-display isa-isa
+- **Paggamit** ng array indexing para i-calculate ang bawat bagong numero mula sa mga naunang values
+- **Pag-return** ng buong sequence para sa flexible na paggamit sa ibang bahagi ng programa
 
 **Low-level language (ARM Assembly) – Friendly sa Computer:**
 
@@ -182,26 +268,27 @@ back add r0,r1
  end
 ```
 
-Pansinin kung paano ang bersyon ng JavaScript ay parang English instructions, habang ang Assembly version ay gumagamit ng cryptic commands na direktang kumokontrol sa processor ng computer. Parehong nagagawa ang eksaktong parehong task, pero ang high-level language ay mas madaling maintindihan, isulat, at i-maintain ng tao.
+Pansinin kung paano ang JavaScript version ay parang English instructions, habang ang Assembly version ay gumagamit ng cryptic commands na direktang kumokontrol sa processor ng computer. Parehong nagagawa ang parehong task, pero ang high-level language ay mas madaling maintindihan, isulat, at i-maintain.
 
 **Mga pangunahing pagkakaiba na mapapansin mo:**
-- **Readability**: Ang JavaScript ay gumagamit ng mga descriptive na pangalan tulad ng `fibonacciCount` habang ang Assembly ay gumagamit ng cryptic labels tulad ng `r0`, `r1`
-- **Comments**: Ang high-level languages ay hinihikayat ang mga explanatory comments na ginagawang self-documenting ang code
-- **Structure**: Ang logical flow ng JavaScript ay tumutugma sa kung paano iniisip ng tao ang mga problema step-by-step
-- **Maintenance**: Ang pag-update ng bersyon ng JavaScript para sa iba't ibang requirements ay straightforward at malinaw
-✅ **Tungkol sa Fibonacci sequence**: Ang napakagandang pattern ng numero na ito (kung saan ang bawat numero ay katumbas ng kabuuan ng dalawang nauna: 0, 1, 1, 2, 3, 5, 8...) ay makikita *kahit saan* sa kalikasan! Makikita mo ito sa mga spiral ng sunflower, mga pattern ng pinecone, ang kurba ng mga shell ng nautilus, at maging sa paraan ng paglaki ng mga sanga ng puno. Nakakamangha kung paano nagagamit ang math at code para maunawaan at muling likhain ang mga pattern na ginagamit ng kalikasan upang lumikha ng kagandahan!
+- **Readability**: Ang JavaScript ay gumagamit ng mga descriptive names tulad ng `fibonacciCount` habang ang Assembly ay gumagamit ng cryptic labels tulad ng `r0`, `r1`
+- **Mga Komento**: Ang mga high-level na wika ay nagtataguyod ng mga paliwanag na komento na nagpapadali sa pag-unawa ng code.
+- **Estruktura**: Ang lohikal na daloy ng JavaScript ay tumutugma sa paraan ng pag-iisip ng tao tungkol sa mga problema nang hakbang-hakbang.
+- **Pagpapanatili**: Ang pag-update ng bersyon ng JavaScript para sa iba't ibang pangangailangan ay madali at malinaw.
 
-## Ang Mga Pangunahing Bahagi na Gumagawa ng Mahika
+✅ **Tungkol sa Fibonacci sequence**: Ang napakagandang pattern ng numero na ito (kung saan ang bawat numero ay katumbas ng kabuuan ng dalawang nauna: 0, 1, 1, 2, 3, 5, 8...) ay literal na makikita *kahit saan* sa kalikasan! Makikita mo ito sa mga spiral ng sunflower, mga pattern ng pinecone, ang kurba ng mga shell ng nautilus, at maging sa paraan ng paglaki ng mga sanga ng puno. Nakakamangha kung paano nakakatulong ang matematika at code sa pag-unawa at paglikha ng mga pattern na ginagamit ng kalikasan upang lumikha ng kagandahan!
 
-Okay, ngayong nakita mo na kung paano gumagana ang mga programming language, talakayin natin ang mga pangunahing bahagi na bumubuo sa bawat program na kailanman isinulat. Isipin mo ito bilang mga mahahalagang sangkap sa paborito mong recipe – kapag naintindihan mo kung ano ang ginagawa ng bawat isa, magagawa mong magbasa at magsulat ng code sa halos anumang wika!
+## Ang Mga Pundasyon na Gumagawa ng Mahika
 
-Parang pag-aaral ng grammar ng programming ito. Naalala mo ba noong nasa paaralan ka at natutunan mo ang tungkol sa mga pangngalan, pandiwa, at kung paano bumuo ng mga pangungusap? Ang programming ay may sarili nitong bersyon ng grammar, at sa totoo lang, mas lohikal at mas madaling intindihin kaysa sa grammar ng Ingles! 😄
+Sige, ngayong nakita mo na kung paano gumagana ang mga programming language, talakayin natin ang mga pangunahing bahagi na bumubuo sa bawat program na kailanman isinulat. Isipin ang mga ito bilang mahahalagang sangkap sa iyong paboritong recipe – kapag naintindihan mo kung ano ang ginagawa ng bawat isa, magagawa mong magbasa at magsulat ng code sa halos anumang wika!
 
-### Statements: Ang Hakbang-Hakbang na Instruksyon
+Parang pag-aaral ng grammar ng programming. Naalala mo ba noong nasa paaralan ka at natutunan mo ang tungkol sa mga pangngalan, pandiwa, at kung paano bumuo ng mga pangungusap? Ang programming ay may sarili nitong bersyon ng grammar, at sa totoo lang, mas lohikal at mas madaling intindihin kaysa sa grammar ng Ingles! 😄
 
-Simulan natin sa **statements** – parang mga indibidwal na pangungusap ito sa isang pag-uusap sa iyong computer. Ang bawat statement ay nagsasabi sa computer na gawin ang isang partikular na bagay, parang nagbibigay ng direksyon: "Lumiko sa kaliwa dito," "Huminto sa pulang ilaw," "Mag-park sa lugar na iyon."
+### Mga Pahayag: Ang Hakbang-hakbang na Instruksyon
 
-Ang gusto ko sa statements ay kung gaano kadalas itong nababasa. Tingnan mo ito:
+Magsimula tayo sa **mga pahayag** – ang mga ito ay parang mga indibidwal na pangungusap sa isang pag-uusap sa iyong computer. Ang bawat pahayag ay nagsasabi sa computer na gawin ang isang partikular na bagay, parang nagbibigay ng direksyon: "Lumiko sa kaliwa dito," "Huminto sa pulang ilaw," "Mag-park sa lugar na iyon."
+
+Ang gusto ko sa mga pahayag ay kung gaano kadaling basahin ang mga ito. Tingnan mo ito:
 
 ```javascript
 // Basic statements that perform single actions
@@ -225,15 +312,15 @@ document.body.style.backgroundColor = "lightblue";
 - **Baguhin** ang pamagat ng webpage na lumalabas sa browser tab
 - **Palitan** ang kulay ng background ng buong page body
 
-### Variables: Ang Memory System ng Iyong Programa
+### Mga Variable: Sistema ng Memorya ng Iyong Programa
 
-Okay, **variables** ay isa sa mga paborito kong konsepto na ituro dahil sobrang katulad ito ng mga bagay na ginagamit mo araw-araw!
+Okay, **mga variable** ay isa sa mga paborito kong konsepto na ituro dahil ang mga ito ay parang mga bagay na ginagamit mo na araw-araw!
 
-Isipin mo ang contact list ng iyong telepono. Hindi mo kabisado ang mga numero ng lahat – sa halip, sine-save mo ang "Nanay," "Best Friend," o "Pizza Place na Bukas Hanggang 2 AM" at hinahayaan ang telepono mong tandaan ang mga aktwal na numero. Ganyan din ang variables! Parang mga lalagyan na may label kung saan maaaring mag-imbak ng impormasyon ang iyong programa at kunin ito gamit ang pangalan na may kahulugan.
+Isipin ang listahan ng mga contact sa iyong telepono. Hindi mo naman kabisado ang mga numero ng lahat – sa halip, sine-save mo ang "Nanay," "Best Friend," o "Pizza Place na Bukas Hanggang 2 AM" at hinahayaan ang telepono mo na tandaan ang aktwal na mga numero. Ganito rin gumagana ang mga variable! Ang mga ito ay parang mga lalagyan na may label kung saan maaaring mag-imbak ng impormasyon ang iyong programa at kunin ito gamit ang pangalan na may kahulugan.
 
-Narito ang talagang cool: ang mga variable ay maaaring magbago habang tumatakbo ang iyong programa (kaya nga tinawag itong "variable" – gets mo ba ang ibig sabihin?). Tulad ng pag-update mo sa contact ng pizza place kapag nakahanap ka ng mas maganda, ang mga variable ay maaaring ma-update habang natututo ang iyong programa ng bagong impormasyon o habang nagbabago ang mga sitwasyon!
+Narito ang talagang cool: ang mga variable ay maaaring magbago habang tumatakbo ang iyong programa (kaya nga tinawag na "variable" – gets mo ba?). Parang ina-update mo ang contact ng pizza place kapag nakahanap ka ng mas maganda, ang mga variable ay maaaring ma-update habang natututo ang iyong programa ng bagong impormasyon o habang nagbabago ang mga sitwasyon!
 
-Hayaan mong ipakita ko sa iyo kung gaano kasimple ito:
+Hayaan mo akong ipakita kung gaano kasimple ito:
 
 ```javascript
 // Step 1: Creating basic variables
@@ -261,7 +348,7 @@ const weatherData = {
 **Sa itaas, ginawa natin ang:**
 - **Lumikha** ng object para pagsama-samahin ang mga kaugnay na impormasyon ng panahon
 - **Ayusin** ang maraming piraso ng data sa ilalim ng isang pangalan ng variable
-- **Gumamit** ng key-value pairs para malinaw na lagyan ng label ang bawat piraso ng impormasyon
+- **Gamitin** ang key-value pairs para malinaw na ma-label ang bawat piraso ng impormasyon
 
 ```javascript
 // Step 3: Using and updating variables
@@ -273,11 +360,11 @@ currentWeather = "cloudy";
 temperature = 68;                          
 ```
 
-**Unawain ang bawat bahagi:**
+**Unawain natin ang bawat bahagi:**
 - **Ipakita** ang impormasyon gamit ang template literals na may `${}` syntax
 - **I-access** ang mga property ng object gamit ang dot notation (`weatherData.windSpeed`)
-- **I-update** ang mga variable na dineklara gamit ang `let` upang ipakita ang nagbabagong kondisyon
-- **Pagsamahin** ang maraming variable upang lumikha ng makabuluhang mensahe
+- **I-update** ang mga variable na dineklara gamit ang `let` para ipakita ang nagbabagong kondisyon
+- **Pagsamahin** ang maraming variable para makagawa ng makabuluhang mga mensahe
 
 ```javascript
 // Step 4: Modern destructuring for cleaner code
@@ -286,19 +373,19 @@ console.log(`${location} humidity: ${humidity}%`);
 ```
 
 **Ang kailangan mong malaman:**
-- **Kunin** ang mga partikular na property mula sa mga object gamit ang destructuring assignment
-- **Lumikha** ng mga bagong variable nang awtomatiko gamit ang parehong pangalan ng mga key ng object
-- **Pasimplehin** ang code sa pamamagitan ng pag-iwas sa paulit-ulit na dot notation
+- **Kunwari** ang mga partikular na property mula sa mga object gamit ang destructuring assignment
+- **Lumikha** ng mga bagong variable nang awtomatiko gamit ang parehong mga pangalan ng key ng object
+- **Pagandahin** ang code sa pamamagitan ng pag-iwas sa paulit-ulit na dot notation
 
 ### Control Flow: Turuan ang Iyong Programa na Mag-isip
 
-Okay, dito nagiging sobrang kamangha-mangha ang programming! Ang **control flow** ay parang pagtuturo sa iyong programa kung paano gumawa ng matatalinong desisyon, katulad ng ginagawa mo araw-araw nang hindi mo iniisip.
+Okay, dito nagiging sobrang kamangha-mangha ang programming! **Control flow** ay ang pagtuturo sa iyong programa kung paano gumawa ng matatalinong desisyon, katulad ng ginagawa mo araw-araw nang hindi mo namamalayan.
 
-Isipin mo ito: kaninang umaga malamang na dumaan ka sa ganito, "Kung umuulan, magdadala ako ng payong. Kung malamig, magsusuot ako ng jacket. Kung late na ako, hindi na ako mag-aalmusal at bibili na lang ng kape sa daan." Ang utak mo ay natural na sumusunod sa ganitong if-then logic nang maraming beses araw-araw!
+Isipin ito: ngayong umaga malamang na dumaan ka sa ganito, "Kung umuulan, magdadala ako ng payong. Kung malamig, magsusuot ako ng jacket. Kung late na ako, hindi na ako mag-aalmusal at bibili na lang ng kape sa daan." Ang utak mo ay natural na sumusunod sa ganitong if-then logic nang maraming beses araw-araw!
 
-Ito ang nagpaparamdam sa mga programa na matalino at buhay sa halip na sumusunod lang sa isang boring na script. Maaari silang tumingin sa isang sitwasyon, suriin kung ano ang nangyayari, at tumugon nang naaangkop. Parang binibigyan mo ang iyong programa ng utak na maaaring umangkop at gumawa ng mga pagpipilian!
+Ito ang nagpaparamdam sa mga programa na matalino at buhay sa halip na sumusunod lang sa isang boring na script. Maaari nilang tingnan ang isang sitwasyon, suriin kung ano ang nangyayari, at tumugon nang naaangkop. Parang binibigyan mo ang iyong programa ng utak na maaaring umangkop at gumawa ng mga desisyon!
 
-Gusto mo bang makita kung gaano kaganda ito gumagana? Hayaan mong ipakita ko sa iyo:
+Gusto mo bang makita kung gaano kaganda ang gumagana nito? Hayaan mo akong ipakita:
 
 ```javascript
 // Step 1: Basic conditional logic
@@ -315,8 +402,8 @@ if (userAge >= 18) {
 **Narito ang ginagawa ng code na ito:**
 - **Suriin** kung ang edad ng user ay nakakatugon sa kinakailangan para bumoto
 - **Ipatupad** ang iba't ibang code blocks batay sa resulta ng kondisyon
-- **Kalkulahin** at ipakita kung gaano katagal bago maging eligible sa pagboto kung wala pang 18
-- **Magbigay** ng partikular at kapaki-pakinabang na feedback para sa bawat sitwasyon
+- **Kalkulahin** at ipakita kung gaano katagal bago maging kwalipikado sa pagboto kung wala pang 18
+- **Magbigay** ng tiyak at kapaki-pakinabang na feedback para sa bawat sitwasyon
 
 ```javascript
 // Step 2: Multiple conditions with logical operators
@@ -346,7 +433,7 @@ console.log(`Status: ${votingStatus}`);
 
 **Ang kailangan mong tandaan:**
 - **Gamitin** ang ternary operator (`? :`) para sa simpleng dalawang opsyon na kondisyon
-- **Isulat** ang kondisyon muna, kasunod ng `?`, pagkatapos ang true result, pagkatapos `:`, pagkatapos ang false result
+- **Isulat** ang kondisyon muna, kasunod ang `?`, pagkatapos ang true result, pagkatapos ang `:`, pagkatapos ang false result
 - **I-apply** ang pattern na ito kapag kailangan mong mag-assign ng mga halaga batay sa mga kondisyon
 
 ```javascript
@@ -372,114 +459,152 @@ switch (dayOfWeek) {
 
 **Ang code na ito ay nagagawa ang mga sumusunod:**
 - **Itugma** ang halaga ng variable sa maraming partikular na kaso
-- **Pagsamahin** ang mga magkatulad na kaso (mga araw ng trabaho vs. weekend)
+- **Pagsamahin** ang mga magkatulad na kaso (weekdays vs. weekends)
 - **Ipatupad** ang naaangkop na code block kapag may natagpuang tugma
-- **Isama** ang `default` case para i-handle ang mga hindi inaasahang halaga
-- **Gamitin** ang `break` statements para pigilan ang code na magpatuloy sa susunod na case
-
-> 💡 **Analohiya sa totoong buhay**: Isipin ang control flow na parang may pinaka-mahinahon na GPS na nagbibigay sa iyo ng direksyon. Maaaring sabihin nito, "Kung may trapik sa Main Street, dumaan sa highway. Kung may construction sa highway, subukan ang scenic route." Ang mga programa ay gumagamit ng eksaktong parehong uri ng conditional logic upang tumugon nang matalino sa iba't ibang sitwasyon at palaging magbigay sa mga user ng pinakamahusay na posibleng karanasan.
+- **Isama** ang `default` case para sa mga hindi inaasahang halaga
+- **Gamitin** ang `break` statements para pigilan ang code na magpatuloy sa susunod na kaso
+
+> 💡 **Analohiya sa Totoong Buhay**: Isipin ang control flow na parang ang pinaka-mahinahon na GPS na nagbibigay sa iyo ng direksyon. Maaari nitong sabihin, "Kung may trapiko sa Main Street, dumaan sa highway. Kung may construction sa highway, subukan ang scenic route." Ang mga programa ay gumagamit ng eksaktong parehong uri ng conditional logic para tumugon nang matalino sa iba't ibang sitwasyon at palaging magbigay sa mga user ng pinakamahusay na karanasan.
+
+### 🎯 **Pag-check ng Konsepto: Mastery ng Mga Pundasyon**
+
+**Tingnan natin kung paano ka sa mga pundasyon:**
+- Kaya mo bang ipaliwanag ang pagkakaiba ng variable at pahayag sa sarili mong mga salita?
+- Mag-isip ng isang sitwasyon sa totoong buhay kung saan gagamit ka ng if-then na desisyon (tulad ng halimbawa sa pagboto)
+- Ano ang isang bagay tungkol sa lohika ng programming na nagulat ka?
+
+**Mabilis na pampalakas ng kumpiyansa:**
+```mermaid
+flowchart LR
+    A["📝 Statements<br/>(Instructions)"] --> B["📦 Variables<br/>(Storage)"] --> C["🔀 Control Flow<br/>(Decisions)"] --> D["🎉 Working Program!"]
+    
+    style A fill:#ffeb3b
+    style B fill:#4caf50
+    style C fill:#2196f3
+    style D fill:#ff4081
+```
 
-✅ **Ano ang susunod na darating**: Magkakaroon tayo ng sobrang saya sa paglalim sa mga konseptong ito habang patuloy nating tinatahak ang kamangha-manghang paglalakbay na ito! Sa ngayon, mag-focus lang sa pagdama ng excitement tungkol sa lahat ng mga kamangha-manghang posibilidad na nasa harapan mo. Ang mga partikular na kasanayan at teknik ay natural na mananatili habang tayo ay nagsasanay nang magkasama – ipinapangako ko, magiging mas masaya ito kaysa sa inaasahan mo!
+✅ **Ang susunod na darating**: Magkakaroon tayo ng sobrang saya sa paglalim sa mga konseptong ito habang patuloy ang kamangha-manghang paglalakbay na ito! Sa ngayon, mag-focus lang sa pakiramdam ng excitement tungkol sa lahat ng mga kamangha-manghang posibilidad sa hinaharap. Ang mga partikular na kasanayan at teknika ay natural na mananatili habang tayo ay nagsasanay nang magkasama – ipinapangako ko na magiging mas masaya ito kaysa sa inaasahan mo!
 
 ## Mga Kasangkapan sa Trabaho
 
-Okay, dito ako sobrang excited na halos hindi ko mapigilan ang sarili ko! 🚀 Pag-uusapan natin ang mga kamangha-manghang tools na magpaparamdam sa iyo na parang binigyan ka ng susi sa isang digital spaceship.
-
-Alam mo kung paano ang isang chef ay may mga perpektong balanseng kutsilyo na parang extension ng kanilang mga kamay? O kung paano ang isang musikero ay may gitara na parang kumakanta sa tuwing hinahawakan nila ito? Well, ang mga developer ay may sarili naming bersyon ng mga mahiwagang tools, at narito ang magpapamangha sa iyo – karamihan sa mga ito ay ganap na libre!
-
-Halos tumatalon ako sa upuan ko sa pag-iisip na ibahagi ang mga ito sa iyo dahil lubos nilang binago kung paano kami bumuo ng software. Pinag-uusapan natin ang mga AI-powered coding assistants na maaaring tumulong sa pagsusulat ng iyong code (hindi ako nagbibiro!), mga cloud environment kung saan maaari kang bumuo ng buong application mula sa kahit saan basta may Wi-Fi, at mga debugging tools na sobrang sopistikado na parang may X-ray vision para sa iyong mga programa.
-
-At narito ang bahagi na nagbibigay pa rin sa akin ng kilabot: ang mga ito ay hindi "beginner tools" na iyong lalampasan. Ang mga ito ay eksaktong parehong mga propesyonal na tools na ginagamit ng mga developer sa Google, Netflix, at sa indie app studio na gusto mo sa kasalukuyang sandali. Mararamdaman mo na parang isang pro sa paggamit ng mga ito!
+Sige, dito ako sobrang excited na halos hindi ko mapigilan ang sarili ko! 🚀 Pag-uusapan natin ang mga kamangha-manghang kasangkapan na magpaparamdam sa iyo na parang binigyan ka ng susi sa isang digital spaceship.
+
+Alam mo kung paano ang isang chef ay may mga perpektong balanseng kutsilyo na parang extension ng kanilang mga kamay? O kung paano ang isang musikero ay may isang gitara na parang kumakanta sa sandaling hawakan nila ito? Well, ang mga developer ay may sarili naming bersyon ng mga mahiwagang kasangkapan, at narito ang magpapamangha sa iyo – karamihan sa mga ito ay ganap na libre!
+
+Halos tumatalon ako sa upuan ko sa pag-iisip na ibahagi ang mga ito sa iyo dahil lubos nilang binago kung paano kami bumubuo ng software. Pinag-uusapan natin ang mga AI-powered coding assistants na maaaring tumulong sa pagsulat ng iyong code (hindi ako nagbibiro!), mga cloud environment kung saan maaari kang bumuo ng buong aplikasyon mula sa kahit saan basta may Wi-Fi, at mga debugging tools na sobrang sopistikado na parang may X-ray vision para sa iyong mga programa.
+
+At narito ang bahagi na nagbibigay pa rin sa akin ng kilabot: ang mga ito ay hindi "beginner tools" na iyong lalampasan. Ang mga ito ay eksaktong parehong mga kasangkapan na ginagamit ng mga developer sa Google, Netflix, at sa indie app studio na gusto mo sa mismong sandaling ito. Magiging pakiramdam mo na parang isang pro sa paggamit ng mga ito!
+
+```mermaid
+graph TD
+    A["💡 Your Idea"] --> B["⌨️ Code Editor<br/>(VS Code)"] 
+    B --> C["🌐 Browser DevTools<br/>(Testing & Debugging)"]
+    C --> D["⚡ Command Line<br/>(Automation & Tools)"]
+    D --> E["📚 Documentation<br/>(Learning & Reference)"]
+    E --> F["🚀 Amazing Web App!"]
+    
+    B -.-> G["🤖 AI Assistant<br/>(GitHub Copilot)"]
+    C -.-> H["📱 Device Testing<br/>(Responsive Design)"]
+    D -.-> I["📦 Package Managers<br/>(npm, yarn)"]
+    E -.-> J["👥 Community<br/>(Stack Overflow)"]
+    
+    style A fill:#fff59d
+    style F fill:#c8e6c9
+    style G fill:#e1f5fe
+    style H fill:#f3e5f5
+    style I fill:#ffccbc
+    style J fill:#e8eaf6
+```
 
-### Code Editors at IDEs: Ang Iyong Bagong Digital na Kaibigan
+### Mga Code Editor at IDE: Ang Iyong Bagong Digital na Kaibigan
 
-Pag-usapan natin ang code editors – ang mga ito ay seryosong magiging paborito mong lugar para maglagi! Isipin mo ito bilang iyong personal na coding sanctuary kung saan gugugol ka ng karamihan ng iyong oras sa paglikha at pagperpekto ng iyong mga digital na likha.
+Pag-usapan natin ang mga code editor – ang mga ito ay seryosong magiging iyong bagong paboritong lugar na tambayan! Isipin ang mga ito bilang iyong personal na coding sanctuary kung saan gugugol ka ng karamihan ng iyong oras sa paglikha at pagperpekto ng iyong mga digital na likha.
 
-Pero narito ang talagang mahiwaga tungkol sa modernong editors: hindi lang sila fancy text editors. Parang may pinakamatalino at supportive na coding mentor na nakaupo sa tabi mo 24/7. Inaayos nila ang iyong mga typo bago mo pa mapansin, nagmumungkahi ng mga pagpapabuti na nagpapakita sa iyo na parang isang henyo, tumutulong sa iyo na maunawaan kung ano ang ginagawa ng bawat piraso ng code, at ang ilan sa kanila ay maaaring hulaan kung ano ang susunod mong itatype at mag-alok na tapusin ang iyong iniisip!
+Pero narito ang talagang mahiwaga tungkol sa mga modernong editor: hindi lang sila magarbong text editor. Parang may pinakamatalino, supportive na coding mentor na nakaupo sa tabi mo 24/7. Nahuhuli nila ang iyong mga typo bago mo pa mapansin, nagmumungkahi ng mga pagpapabuti na magpaparamdam sa iyo na parang henyo, tumutulong sa iyo na maunawaan kung ano ang ginagawa ng bawat piraso ng code, at ang ilan sa kanila ay maaaring hulaan pa kung ano ang susunod mong itatype at mag-alok na tapusin ang iyong iniisip!
 
-Naalala ko noong una kong natuklasan ang auto-completion – literal na naramdaman ko na parang nabubuhay ako sa hinaharap. Magsisimula kang mag-type ng isang bagay, at sasabihin ng editor mo, "Hoy, iniisip mo ba ang function na ito na eksaktong ginagawa ang kailangan mo?" Parang may mind reader bilang coding buddy mo!
+Naalala ko noong una kong natuklasan ang auto-completion – literal na pakiramdam ko ay nasa hinaharap na ako. Nagsisimula kang mag-type ng isang bagay, at sinasabi ng editor mo, "Hoy, iniisip mo ba ang function na ito na eksaktong kailangan mo?" Parang may mind reader bilang coding buddy mo!
 
-**Ano ang nagpapaganda sa mga editors na ito?**
+**Ano ang nagpapaganda sa mga editor na ito?**
 
-Ang mga modernong code editors ay nag-aalok ng kahanga-hangang hanay ng mga feature na dinisenyo upang mapalakas ang iyong produktibidad:
+Ang mga modernong code editor ay nag-aalok ng kahanga-hangang hanay ng mga tampok na idinisenyo upang mapalakas ang iyong produktibidad:
 
-| Feature | Ano ang Ginagawa Nito | Bakit Ito Nakakatulong |
-|---------|-----------------------|-----------------------|
-| **Syntax Highlighting** | Kulayan ang iba't ibang bahagi ng iyong code | Ginagawang mas madaling basahin ang code at makita ang mga error |
-| **Auto-completion** | Nagmumungkahi ng code habang nagta-type ka | Pinapabilis ang coding at binabawasan ang mga typo |
-| **Debugging Tools** | Tumutulong sa paghahanap at pag-aayos ng mga error | Nakakatipid ng oras sa troubleshooting |
-| **Extensions** | Nagdaragdag ng mga espesyal na feature | I-customize ang editor para sa anumang teknolohiya |
-| **AI Assistants** | Nagmumungkahi ng code at paliwanag | Pinapabilis ang pag-aaral at produktibidad |
+| Tampok | Ano ang Ginagawa Nito | Bakit Ito Nakakatulong |
+|-------|-----------------------|-----------------------|
+| **Syntax Highlighting** | Kulayan ang iba't ibang bahagi ng iyong code | Ginagawang mas madali ang pagbabasa ng code at makita ang mga error |
+| **Auto-completion** | Nagmumungkahi ng code habang nagta-type ka | Pinapabilis ang pag-code at binabawasan ang mga typo |
+| **Mga Tool sa Debugging** | Tumutulong sa paghahanap at pag-aayos ng mga error | Nakakatipid ng oras sa pag-troubleshoot |
+| **Mga Extension** | Nagdaragdag ng mga espesyal na tampok | I-customize ang editor para sa anumang teknolohiya |
+| **AI Assistants** | Nagmumungkahi ng code at mga paliwanag | Pinapabilis ang pag-aaral at produktibidad |
 
-> 🎥 **Video Resource**: Gusto mo bang makita ang mga tools na ito sa aksyon? Tingnan ang [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) para sa komprehensibong overview.
+> 🎥 **Video Resource**: Gusto mo bang makita ang mga tool na ito sa aksyon? Tingnan ang [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) para sa isang komprehensibong overview.
 
-#### Mga Inirerekomendang Editors para sa Web Development
+#### Mga Inirerekomendang Editor para sa Web Development
 
 **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Libre)
 - Pinakapopular sa mga web developer
 - Napakahusay na extension ecosystem
-- May built-in na terminal at Git integration
+- Built-in terminal at Git integration
 - **Mga kailangang extension**:
-  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-powered na mungkahi sa code
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time na kolaborasyon
-  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatic na pag-format ng code
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Nakikita ang mga typo sa iyong code
+  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-powered code suggestions
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time collaboration
+  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatic code formatting
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Nag-detect ng mga typo sa iyong code
 
 **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (May bayad, libre para sa mga estudyante)
-- Advanced na debugging at testing tools
-- Matalinong code completion
-- Built-in na version control
+- Advanced debugging at testing tools
+- Intelligent code completion
+- Built-in version control
 
 **Cloud-Based IDEs** (Iba't ibang presyo)
 - [GitHub Codespaces](https://github.com/features/codespaces) - Buong VS Code sa iyong browser
-- [Replit](https://replit.com/) - Magaling para sa pag-aaral at pagbabahagi ng code
-- [StackBlitz](https://stackblitz.com/) - Instant, full-stack na web development
+- [Replit](https://replit.com/) - Maganda para sa pag-aaral at pagbabahagi ng code
+- [StackBlitz](https://stackblitz.com/) - Instant, full-stack web development
 
-> 💡 **Tip sa Pagsisimula**: Magsimula sa Visual Studio Code – libre ito, malawakang ginagamit sa industriya, at may napakalaking komunidad na gumagawa ng mga kapaki-pakinabang na tutorial at extension.
+> 💡 **Tip sa Pagsisimula**: Magsimula sa Visual Studio Code – ito ay libre, malawakang ginagamit sa industriya, at may malaking komunidad na gumagawa ng mga kapaki-pakinabang na tutorial at extension.
 
-### Web Browsers: Ang Iyong Lihim na Laboratoryo sa Pag-develop
+### Mga Web Browser: Ang Iyong Lihim na Laboratoryo sa Pag-develop
 
-Okay, maghanda kang mamangha! Alam mo kung paano mo ginagamit ang mga browser para mag-scroll sa social media at manood ng mga video? Well, lumalabas na may itinatago silang kamangha-manghang lihim na laboratoryo ng developer na naghihintay lang na matuklasan mo!
+Okay, maghanda para sa isang mind-blowing na karanasan! Alam mo kung paano mo ginagamit ang mga browser para mag-scroll sa social media at manood ng mga video? Well, lumalabas na may tinatago silang kamangha-manghang lihim na laboratoryo ng developer na naghihintay lang na matuklasan mo!
 
-Sa tuwing magri-right click ka sa isang webpage at pipiliin ang "Inspect Element," binubuksan mo ang isang nakatagong mundo ng developer tools na mas makapangyarihan pa kaysa sa ilang mahal na software na binayaran ko ng daan-daang dolyar noon. Parang natuklasan mo na ang iyong ordinaryong kusina ay may itinatagong propesyonal na laboratoryo ng chef sa likod ng isang lihim na panel!
+Tuwing mag-right-click ka sa isang webpage at piliin ang "Inspect Element," binubuksan mo ang isang nakatagong mundo ng mga developer tools na mas makapangyarihan pa kaysa sa ilang mahal na software na dati kong binabayaran ng daan-daang dolyar. Parang natuklasan mo na ang iyong ordinaryong kusina ay may nakatagong laboratoryo ng propesyonal na chef sa likod ng isang lihim na panel!
+Noong unang ipinakita sa akin ang browser DevTools, ginugol ko ang halos tatlong oras sa kakaklik at sinasabi, "WAIT, KAYA NIYA RIN YUN?!" Literal na pwede mong i-edit ang kahit anong website nang real-time, makita kung gaano kabilis mag-load ang lahat, subukan kung paano ang hitsura ng site mo sa iba't ibang device, at kahit i-debug ang JavaScript na parang isang pro. Talagang nakakagulat!
 
-Noong una akong ipinakita sa browser DevTools, gumugol ako ng halos tatlong oras sa pag-click-click lang at sinasabing "WAIT, KAYA RIN NIYA YUN?!" Literal mong maa-edit ang anumang website nang real-time, makita kung gaano kabilis ang pag-load ng lahat, subukan kung paano ang hitsura ng iyong site sa iba't ibang device, at maging mag-debug ng JavaScript na parang isang pro. Nakakamangha talaga!
+**Narito kung bakit ang mga browser ang iyong lihim na sandata:**
 
-**Narito kung bakit ang mga browser ay ang iyong lihim na sandata:**
+Kapag gumagawa ka ng website o web application, kailangan mong makita kung paano ito tumatakbo sa totoong mundo. Hindi lang ipinapakita ng mga browser ang iyong gawa, nagbibigay din sila ng detalyadong feedback tungkol sa performance, accessibility, at mga posibleng isyu.
 
-Kapag gumagawa ka ng website o web application, kailangan mong makita kung paano ito tumingin at kumilos sa totoong mundo. Ang mga browser ay hindi lang nagpapakita ng iyong gawa kundi nagbibigay din ng detalyadong feedback tungkol sa performance, accessibility, at mga posibleng isyu.
-
-#### Browser Developer Tools (DevTools)
+#### Mga Tool ng Browser Developer (DevTools)
 
 Ang mga modernong browser ay may kasamang komprehensibong development suites:
 
-| Tool Category | Ano ang Ginagawa Nito | Halimbawa ng Paggamit |
-|---------------|-----------------------|-----------------------|
-| **Element Inspector** | Tingnan at i-edit ang HTML/CSS nang real-time | Ayusin ang styling para makita ang agarang resulta |
-| **Console** | Tingnan ang mga error message at subukan ang JavaScript | Ayusin ang mga problema at mag-eksperimento sa code |
+| Kategorya ng Tool | Ano ang Ginagawa Nito | Halimbawa ng Paggamit |
+|--------------------|-----------------------|-----------------------|
+| **Element Inspector** | Tingnan at i-edit ang HTML/CSS nang real-time | Ayusin ang styling para makita agad ang resulta |
+| **Console** | Tingnan ang mga error message at subukan ang JavaScript | I-debug ang mga problema at mag-eksperimento sa code |
 | **Network Monitor** | Subaybayan kung paano naglo-load ang mga resources | I-optimize ang performance at oras ng pag-load |
-| **Accessibility Checker** | Subukan para sa inclusive na disenyo | Siguraduhing gumagana ang iyong site para sa lahat ng user |
-| **Device Simulator** | I-preview sa iba't ibang laki ng screen | Subukan ang responsive na disenyo nang hindi kailangan ng maraming device |
+| **Accessibility Checker** | Subukan ang inclusive design | Siguraduhing gumagana ang site mo para sa lahat ng user |
+| **Device Simulator** | I-preview sa iba't ibang laki ng screen | Subukan ang responsive design nang hindi kailangan ng maraming device |
 
 #### Mga Inirerekomendang Browser para sa Development
 
-- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Standard na DevTools ng industriya na may malawak na dokumentasyon
+- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Standard na DevTools sa industriya na may malawak na dokumentasyon
 - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Mahusay na CSS Grid at accessibility tools
-- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Batay sa Chromium na may mga resource para sa developer mula sa Microsoft
+- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Batay sa Chromium na may mga resource mula sa Microsoft para sa mga developer
 
 > ⚠️ **Mahalagang Tip sa Pagsusuri**: Laging subukan ang iyong mga website sa iba't ibang browser! Ang gumagana nang perpekto sa Chrome ay maaaring magmukhang iba sa Safari o Firefox. Ang mga propesyonal na developer ay nagsusuri sa lahat ng pangunahing browser upang matiyak ang pare-parehong karanasan ng user.
 
-### Mga Command Line Tool: Ang Iyong Gateway sa Developer Superpowers
+### Mga Tool sa Command Line: Ang Iyong Gateway sa Developer Superpowers
 
-Okay, magpakatotoo tayo tungkol sa command line, dahil gusto kong marinig mo ito mula sa isang tao na talagang nakakaintindi. Noong una ko itong nakita – isang nakakatakot na itim na screen na may kumikislap na teksto – literal na naisip ko, "Hindi, hindi talaga! Para itong galing sa isang pelikula ng hacker noong 1980s, at siguradong hindi ako sapat na matalino para dito!" 😅
+Okay, magpakatotoo tayo tungkol sa command line, dahil gusto kong marinig mo ito mula sa isang taong talagang nakakaintindi. Noong una ko itong nakita – isang nakakatakot na itim na screen na may kumikislap na teksto – literal na naisip ko, "Hindi, hindi talaga! Mukha itong galing sa pelikula ng hacker noong 1980s, at siguradong hindi ako matalino para dito!" 😅
 
-Pero ito ang gusto kong sinabi sa akin noon, at sinasabi ko sa iyo ngayon: ang command line ay hindi nakakatakot – ito ay parang direktang pakikipag-usap sa iyong computer. Isipin mo ito na parang pagkakaiba ng pag-order ng pagkain sa pamamagitan ng isang magarbong app na may mga larawan at menu (na maganda at madali) kumpara sa pagpasok sa paborito mong lokal na restaurant kung saan alam ng chef kung ano ang gusto mo at kayang maghanda ng perpektong pagkain sa simpleng pagsabi mo ng "surprise me with something amazing."
+Pero narito ang gusto kong sana sinabi sa akin noon, at sinasabi ko sa'yo ngayon: ang command line ay hindi nakakatakot – para kang nakikipag-usap nang direkta sa iyong computer. Isipin mo ito na parang pagkakaiba ng pag-order ng pagkain sa isang fancy app na may mga larawan at menu (na maganda at madali) kumpara sa pagpunta sa paborito mong lokal na restaurant kung saan alam ng chef ang gusto mo at kayang magluto ng perpekto sa simpleng pagsabi mo ng "surprise me with something amazing."
 
-Ang command line ay kung saan pumupunta ang mga developer para maramdaman na sila ay mga wizard. Magta-type ka ng ilang tila mahiwagang salita (okay, mga command lang sila, pero parang mahiwaga!), pindutin ang enter, at BOOM – nakagawa ka ng buong istruktura ng proyekto, nag-install ng makapangyarihang mga tool mula sa iba't ibang panig ng mundo, o na-deploy ang iyong app sa internet para makita ng milyon-milyong tao. Kapag naranasan mo ang kapangyarihang iyon, talagang nakakaadik!
+Ang command line ang lugar kung saan ang mga developer ay parang wizard. Magta-type ka ng ilang tila mahiwagang salita (okay, mga command lang sila, pero parang mahiwaga!), pindutin ang enter, at BOOM – nakagawa ka ng buong istruktura ng proyekto, naka-install ng makapangyarihang mga tool mula sa iba't ibang panig ng mundo, o na-deploy ang app mo sa internet para makita ng milyon-milyong tao. Kapag naranasan mo ang kapangyarihang iyon, talagang nakakaadik!
 
 **Bakit magiging paborito mo ang command line:**
 
-Bagama't maganda ang mga graphical interface para sa maraming gawain, ang command line ay mahusay sa automation, precision, at bilis. Maraming development tools ang pangunahing gumagana sa pamamagitan ng command line interfaces, at ang pag-aaral kung paano gamitin ang mga ito nang mahusay ay maaaring lubos na mapabuti ang iyong produktibidad.
+Habang maganda ang graphical interfaces para sa maraming gawain, ang command line ay mahusay sa automation, precision, at bilis. Maraming development tools ang pangunahing gumagana sa pamamagitan ng command line interfaces, at ang pag-aaral kung paano gamitin ang mga ito nang epektibo ay maaaring lubos na mapabuti ang iyong produktibidad.
 
 ```bash
 # Step 1: Create and navigate to project directory
@@ -488,8 +613,8 @@ cd my-awesome-website
 ```
 
 **Ano ang ginagawa ng code na ito:**
-- **Gumawa** ng bagong direktoryo na tinatawag na "my-awesome-website" para sa iyong proyekto
-- **Mag-navigate** sa bagong likhang direktoryo upang simulan ang trabaho
+- **Gumawa** ng bagong directory na tinatawag na "my-awesome-website" para sa iyong proyekto
+- **Mag-navigate** sa bagong directory para simulan ang trabaho
 
 ```bash
 # Step 2: Initialize project with package.json
@@ -501,10 +626,10 @@ npm install --save-dev @eslint/js
 ```
 
 **Hakbang-hakbang, narito ang nangyayari:**
-- **I-initialize** ang bagong Node.js project na may default settings gamit ang `npm init -y`
+- **I-initialize** ang bagong Node.js project gamit ang default settings sa pamamagitan ng `npm init -y`
 - **I-install** ang Vite bilang modernong build tool para sa mabilis na development at production builds
-- **Idagdag** ang Prettier para sa awtomatikong pag-format ng code at ESLint para sa pagsusuri ng kalidad ng code
-- **Gamitin** ang `--save-dev` flag upang markahan ang mga ito bilang development-only dependencies
+- **Magdagdag** ng Prettier para sa automatic code formatting at ESLint para sa code quality checks
+- **Gamitin** ang `--save-dev` flag para markahan ang mga ito bilang development-only dependencies
 
 ```bash
 # Step 3: Create project structure and files
@@ -516,7 +641,7 @@ npx vite
 ```
 
 **Sa itaas, ginawa natin ang:**
-- **Inayos** ang ating proyekto sa pamamagitan ng paggawa ng magkakahiwalay na folder para sa source code at assets
+- **Inayos** ang proyekto sa pamamagitan ng paggawa ng hiwalay na mga folder para sa source code at assets
 - **Nag-generate** ng basic HTML file na may tamang istruktura ng dokumento
 - **Sinimulan** ang Vite development server para sa live reloading at hot module replacement
 
@@ -527,10 +652,10 @@ npx vite
 | **[Git](https://git-scm.com/)** | Version control | Subaybayan ang mga pagbabago, makipagtulungan sa iba, i-backup ang iyong trabaho |
 | **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & package management | Patakbuhin ang JavaScript sa labas ng browser, mag-install ng modernong development tools |
 | **[Vite](https://vitejs.dev/)** | Build tool & dev server | Napakabilis na development na may hot module replacement |
-| **[ESLint](https://eslint.org/)** | Kalidad ng code | Awtomatikong hanapin at ayusin ang mga problema sa iyong JavaScript |
-| **[Prettier](https://prettier.io/)** | Pag-format ng code | Panatilihing pare-pareho at nababasa ang iyong code |
+| **[ESLint](https://eslint.org/)** | Code quality | Awtomatikong hanapin at ayusin ang mga problema sa iyong JavaScript |
+| **[Prettier](https://prettier.io/)** | Code formatting | Panatilihing maayos at nababasa ang iyong code |
 
-#### Mga Opsyon na Partikular sa Platform
+#### Mga Opsyon na Specific sa Platform
 
 **Windows:**
 - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderno, mayaman sa feature na terminal
@@ -539,7 +664,7 @@ npx vite
 
 **macOS:**
 - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Built-in na terminal application
-- **[iTerm2](https://iterm2.com/)** - Pinahusay na terminal na may advanced na features
+- **[iTerm2](https://iterm2.com/)** - Pinahusay na terminal na may advanced features
 
 **Linux:**
 - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard na Linux shell
@@ -547,21 +672,21 @@ npx vite
 
 > 💻 = Pre-installed sa operating system
 
-> 🎯 **Learning Path**: Simulan sa mga basic na command tulad ng `cd` (change directory), `ls` o `dir` (list files), at `mkdir` (gumawa ng folder). Magpraktis gamit ang mga modernong workflow command tulad ng `npm install`, `git status`, at `code .` (binubuksan ang kasalukuyang direktoryo sa VS Code). Habang nagiging komportable ka, natural mong matututunan ang mas advanced na mga command at automation techniques.
+> 🎯 **Learning Path**: Simulan sa mga basic na command tulad ng `cd` (change directory), `ls` o `dir` (list files), at `mkdir` (gumawa ng folder). Magpraktis gamit ang mga modernong workflow command tulad ng `npm install`, `git status`, at `code .` (binubuksan ang kasalukuyang directory sa VS Code). Habang nagiging komportable ka, natural mong matututunan ang mas advanced na mga command at automation techniques.
 
 ### Dokumentasyon: Ang Iyong Palaging Available na Mentor sa Pag-aaral
 
-Okay, hayaan mo akong magbahagi ng isang lihim na magpapagaan ng pakiramdam mo bilang baguhan: kahit ang mga pinaka-beteranong developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon. At hindi iyon dahil hindi nila alam ang kanilang ginagawa – ito ay tanda ng karunungan!
+Okay, hayaan mo akong magbahagi ng isang lihim na magpapagaan ng pakiramdam mo bilang baguhan: kahit ang pinaka-experienced na mga developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon. At hindi ito dahil hindi nila alam ang kanilang ginagawa – ito ay tanda ng karunungan!
 
-Isipin ang dokumentasyon bilang pagkakaroon ng access sa mga pinaka-maunawaing, may kaalaman na guro sa mundo na available 24/7. Nahihirapan sa isang problema ng alas-dos ng umaga? Ang dokumentasyon ay naroon na may mainit na virtual na yakap at eksaktong sagot na kailangan mo. Gusto mong matuto tungkol sa isang cool na bagong feature na pinag-uusapan ng lahat? Ang dokumentasyon ay may suporta sa iyo na may step-by-step na mga halimbawa. Sinusubukang intindihin kung bakit gumagana ang isang bagay sa ganitong paraan? Tama ka – ang dokumentasyon ay handang ipaliwanag ito sa paraang sa wakas ay magpapaliwanag sa iyo!
+Isipin ang dokumentasyon na parang may access ka sa mga pinaka-mahinahon at may kaalaman na guro sa mundo na available 24/7. Nahihirapan sa isang problema ng alas-dos ng umaga? Nandiyan ang dokumentasyon na may mainit na virtual na yakap at eksaktong sagot na kailangan mo. Gusto mong matutunan ang isang cool na bagong feature na pinag-uusapan ng lahat? Nandiyan ang dokumentasyon na may step-by-step na mga halimbawa. Sinusubukang intindihin kung bakit gumagana ang isang bagay sa ganitong paraan? Tama ka – handa ang dokumentasyon na ipaliwanag ito sa paraang magpapaklik sa'yo!
 
-Narito ang isang bagay na lubos na nagbago sa aking pananaw: ang mundo ng web development ay gumagalaw nang napakabilis, at walang sinuman (ibig sabihin, wala talaga!) ang nagtatago ng lahat sa memorya. Nakita ko ang mga senior developer na may higit sa 15 taon ng karanasan na naghahanap ng basic syntax, at alam mo ba? Hindi iyon nakakahiya – iyon ay matalino! Hindi ito tungkol sa pagkakaroon ng perpektong memorya; ito ay tungkol sa pag-alam kung saan makakahanap ng maaasahang sagot nang mabilis at pag-unawa kung paano ito ilapat.
+Narito ang isang bagay na lubos na nagbago ng aking pananaw: ang mundo ng web development ay gumagalaw nang napakabilis, at walang sinuman (ibig sabihin, wala talaga!) ang nagtatago ng lahat sa memorya. Nakita ko ang mga senior developer na may 15+ taon ng karanasan na naghahanap ng basic syntax, at alam mo kung ano? Hindi iyon nakakahiya – iyon ay matalino! Hindi ito tungkol sa pagkakaroon ng perpektong memorya; ito ay tungkol sa pag-alam kung saan makakahanap ng maaasahang sagot nang mabilis at pag-unawa kung paano ito ilapat.
 
-**Narito kung saan nangyayari ang tunay na mahika:**
+**Narito kung saan nangyayari ang tunay na magic:**
 
-Ang mga propesyonal na developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon – hindi dahil hindi nila alam ang kanilang ginagawa, kundi dahil ang web development landscape ay mabilis na nagbabago kaya't ang pananatiling kasalukuyan ay nangangailangan ng patuloy na pag-aaral. Ang mahusay na dokumentasyon ay tumutulong sa iyo na maunawaan hindi lamang *paano* gamitin ang isang bagay, kundi *bakit* at *kailan* ito gamitin.
+Ang mga propesyonal na developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon – hindi dahil hindi nila alam ang kanilang ginagawa, kundi dahil ang web development landscape ay mabilis na nagbabago kaya't ang pananatiling updated ay nangangailangan ng patuloy na pag-aaral. Ang mahusay na dokumentasyon ay tumutulong sa iyo na maunawaan hindi lang *paano* gamitin ang isang bagay, kundi *bakit* at *kailan* ito gamitin.
 
-#### Mahahalagang Resource ng Dokumentasyon
+#### Mahahalagang Dokumentasyon na Resources
 
 **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
 - Ang gold standard para sa dokumentasyon ng web technology
@@ -569,95 +694,172 @@ Ang mga propesyonal na developer ay gumugugol ng malaking bahagi ng kanilang ora
 - May kasamang impormasyon sa browser compatibility
 - Nagtatampok ng mga praktikal na halimbawa at interactive na demo
 
-**[Web.dev](https://web.dev)** (mula sa Google)
+**[Web.dev](https://web.dev)** (by Google)
 - Mga modernong best practices sa web development
-- Mga gabay sa pag-optimize ng performance
-- Mga prinsipyo ng accessibility at inclusive na disenyo
-- Mga case study mula sa mga tunay na proyekto
+- Mga gabay sa performance optimization
+- Mga prinsipyo ng accessibility at inclusive design
+- Mga case study mula sa mga totoong proyekto
 
 **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
-- Mga resource para sa development ng Edge browser
+- Mga resource para sa Edge browser development
 - Mga gabay sa Progressive Web App
 - Mga insight sa cross-platform development
 
 **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
-- Mga structured na kurikulum sa pag-aaral
+- Mga structured learning curricula
 - Mga video course mula sa mga eksperto sa industriya
-- Mga hands-on na coding exercise
+- Mga hands-on coding exercises
+
+> 📚 **Study Strategy**: Huwag subukang i-memorize ang dokumentasyon – sa halip, matutong i-navigate ito nang epektibo. I-bookmark ang mga madalas gamitin na reference at magpraktis sa paggamit ng search functions para mabilis na mahanap ang partikular na impormasyon.
+
+### 🔧 **Tool Mastery Check: Ano ang Nakakaengganyo sa Iyo?**
+
+**Maglaan ng sandali para pag-isipan:**
+- Aling tool ang pinaka-nakaka-excite subukan muna? (Walang maling sagot!)
+- Ang command line ba ay nakakatakot pa rin, o interesado ka na dito?
+- Naiisip mo bang gamitin ang browser DevTools para silipin ang likod ng paborito mong mga website?
+
+```mermaid
+pie title "Developer Time Spent With Tools"
+    "Code Editor" : 40
+    "Browser Testing" : 25
+    "Command Line" : 15
+    "Reading Docs" : 15
+    "Debugging" : 5
+```
 
-> 📚 **Strategiya sa Pag-aaral**: Huwag subukang i-memorize ang dokumentasyon – sa halip, matutong i-navigate ito nang mahusay. I-bookmark ang mga madalas gamitin na reference at magpraktis sa paggamit ng mga search function upang mabilis na mahanap ang partikular na impormasyon.
+> **Nakakatuwang insight**: Karamihan sa mga developer ay gumugugol ng halos 40% ng kanilang oras sa kanilang code editor, pero pansinin kung gaano karaming oras ang napupunta sa pagsusuri, pag-aaral, at paglutas ng problema. Ang programming ay hindi lang tungkol sa pagsusulat ng code – ito ay tungkol sa paglikha ng mga karanasan!
 
-✅ **Pag-isipan ito**: Narito ang isang bagay na kawili-wiling pag-isipan – paano mo sa tingin naiiba ang mga tool para sa paggawa ng mga website (development) mula sa mga tool para sa pagdidisenyo kung paano ito magmumukha (design)? Parang ang pagkakaiba ng pagiging arkitekto na nagdidisenyo ng magandang bahay at ang kontraktor na talagang gumagawa nito. Parehong mahalaga, ngunit kailangan nila ng magkaibang toolbox! Ang ganitong uri ng pag-iisip ay talagang makakatulong sa iyo na makita ang mas malaking larawan kung paano nabubuo ang mga website.
+✅ **Pag-isipan ito**: Narito ang isang kawili-wiling bagay na pag-isipan – paano mo iniisip na ang mga tool para sa paggawa ng mga website (development) ay maaaring naiiba sa mga tool para sa pagdidisenyo kung paano ito magmumukha (design)? Parang ang pagkakaiba ng pagiging arkitekto na nagdidisenyo ng magandang bahay at ang kontraktor na talagang gumagawa nito. Parehong mahalaga, pero kailangan ng magkaibang toolbox! Ang ganitong uri ng pag-iisip ay talagang makakatulong sa iyo na makita ang mas malaking larawan kung paano nabubuo ang mga website.
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
+Gamitin ang Agent mode para kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Tuklasin ang mga tampok ng isang modernong code editor o IDE at ipakita kung paano nito mapapabuti ang iyong workflow bilang isang web developer.
+**Deskripsyon:** Tuklasin ang mga feature ng isang modernong code editor o IDE at ipakita kung paano nito mapapabuti ang iyong workflow bilang isang web developer.
 
-**Prompt:** Pumili ng isang code editor o IDE (tulad ng Visual Studio Code, WebStorm, o isang cloud-based na IDE). Maglista ng tatlong tampok o extension na tumutulong sa iyo na magsulat, mag-debug, o mag-maintain ng code nang mas mahusay. Para sa bawat isa, magbigay ng maikling paliwanag kung paano ito nakakatulong sa iyong workflow.
+**Prompt:** Pumili ng code editor o IDE (tulad ng Visual Studio Code, WebStorm, o isang cloud-based IDE). Maglista ng tatlong feature o extension na tumutulong sa iyo na magsulat, mag-debug, o mag-maintain ng code nang mas epektibo. Para sa bawat isa, magbigay ng maikling paliwanag kung paano ito nakakatulong sa iyong workflow.
 
 ---
 
 ## 🚀 Hamon
 
-**Handa ka na ba, detektib, sa iyong unang kaso?**
+**Alright, detective, handa ka na ba sa iyong unang kaso?**
 
-Ngayon na mayroon kang kahanga-hangang pundasyon, mayroon akong isang pakikipagsapalaran na magpapakita sa iyo kung gaano kahanga-hanga at iba-iba ang mundo ng programming. At tandaan – hindi ito tungkol sa pagsusulat ng code sa ngayon, kaya walang pressure! Isipin mo ang iyong sarili bilang isang detektib ng programming language sa iyong unang kapanapanabik na kaso!
+Ngayon na mayroon kang kahanga-hangang pundasyon, mayroon akong adventure na makakatulong sa iyo na makita kung gaano ka-diverse at kamangha-mangha ang programming world. At pakinggan mo – hindi pa ito tungkol sa pagsusulat ng code, kaya walang pressure doon! Isipin mo ang sarili mo bilang isang programming language detective sa iyong unang exciting na kaso!
 
 **Ang iyong misyon, kung pipiliin mong tanggapin ito:**
-1. **Maging explorer ng wika**: Pumili ng tatlong programming languages mula sa ganap na magkaibang mundo – marahil isa na gumagawa ng mga website, isa na gumagawa ng mga mobile app, at isa na nagpoproseso ng data para sa mga siyentipiko. Maghanap ng mga halimbawa ng parehong simpleng gawain na isinulat sa bawat wika. Pangako, mamamangha ka sa kung gaano sila kaiba habang ginagawa ang eksaktong parehong bagay!
+1. **Maging isang language explorer**: Pumili ng tatlong programming languages mula sa ganap na magkaibang mundo – marahil isa na gumagawa ng mga website, isa na gumagawa ng mga mobile app, at isa na nagpoproseso ng data para sa mga siyentipiko. Maghanap ng mga halimbawa ng parehong simpleng gawain na isinulat sa bawat wika. Pangako, mamamangha ka sa kung gaano sila kaiba habang ginagawa ang parehong bagay!
 
-2. **Tuklasin ang kanilang mga pinagmulan**: Ano ang nagpapasikat sa bawat wika? Narito ang isang cool na katotohanan – bawat programming language ay nilikha dahil may isang tao na nag-isip, "Alam mo ba? Dapat may mas magandang paraan para lutasin ang partikular na problemang ito." Kaya mo bang alamin kung ano ang mga problemang iyon? Ang ilan sa mga kuwentong ito ay talagang nakakaintriga!
+2. **Tuklasin ang kanilang origin stories**: Ano ang nagpapasikat sa bawat wika? Narito ang isang cool na fact – bawat programming language ay nilikha dahil may nag-isip, "Alam mo ba? Dapat may mas magandang paraan para lutasin ang partikular na problemang ito." Kaya mo bang alamin kung ano ang mga problemang iyon? Ang ilan sa mga kuwentong ito ay talagang nakakatuwa!
 
-3. **Kilalanin ang mga komunidad**: Tingnan kung gaano ka-welcoming at passionate ang komunidad ng bawat wika. Ang ilan ay may milyon-milyong developer na nagbabahagi ng kaalaman at tumutulong sa isa't isa, ang iba naman ay mas maliit ngunit napaka-close at supportive. Magugustuhan mo ang iba't ibang personalidad ng mga komunidad na ito!
+3. **Kilalanin ang mga komunidad**: Tingnan kung gaano ka-welcoming at passionate ang komunidad ng bawat wika. Ang iba ay may milyon-milyong developer na nagbabahagi ng kaalaman at tumutulong sa isa't isa, ang iba naman ay mas maliit pero sobrang close-knit at supportive. Magugustuhan mo ang makakita ng iba't ibang personalidad ng mga komunidad na ito!
 
-4. **Sundin ang iyong kutob**: Alin sa mga wika ang pinaka-approachable para sa iyo ngayon? Huwag mag-alala tungkol sa paggawa ng "perpektong" pagpili – sundin lang ang iyong instincts! Walang maling sagot dito, at palagi kang maaaring mag-explore ng iba sa hinaharap.
+4. **Sundin ang iyong kutob**: Aling wika ang pinaka-approachable para sa iyo ngayon? Huwag mag-stress sa paggawa ng "perpektong" pagpili – sundin lang ang iyong instincts! Walang maling sagot dito, at palagi mong pwedeng tuklasin ang iba sa hinaharap.
 
-**Bonus na trabaho ng detektib**: Subukan mong tuklasin kung anong mga pangunahing website o app ang ginawa gamit ang bawat wika. Sigurado akong magugulat ka sa malaman kung ano ang nagpapatakbo sa Instagram, Netflix, o sa mobile game na hindi mo matigil sa paglalaro!
+**Bonus detective work**: Subukan mong tuklasin kung anong mga major websites o apps ang ginawa gamit ang bawat wika. Sigurado akong magugulat ka sa malaman kung ano ang nagpapatakbo sa Instagram, Netflix, o sa mobile game na hindi mo matigil sa paglalaro!
 
-> 💡 **Tandaan**: Hindi mo sinusubukang maging eksperto sa alinman sa mga wikang ito ngayon. Kilalanin mo lang ang lugar bago ka magdesisyon kung saan mo gustong magsimula. Maglaan ng oras, mag-enjoy, at hayaan ang iyong curiosity na gabayan ka!
+> 💡 **Tandaan**: Hindi mo sinusubukang maging eksperto sa alinman sa mga wikang ito ngayon. Kilalanin mo lang ang lugar bago ka magdesisyon kung saan mo gustong mag-setup. Maglaan ng oras, mag-enjoy, at hayaan ang iyong curiosity na gabayan ka!
 
 ## Ipagdiwang ang Iyong Natuklasan!
 
-Grabe, ang dami mong natutunan ngayon! Excited akong makita kung gaano karami sa kamangha-manghang paglalakbay na ito ang natutunan mo. At tandaan – hindi ito pagsusulit kung saan kailangan mong maging perpekto. Mas parang selebrasyon ito ng lahat ng cool na bagay na natutunan mo tungkol sa kamangha-manghang mundong papasukin mo!
+Grabe, ang dami mong natutunan ngayong araw! Excited akong makita kung gaano karami sa kahanga-hangang paglalakbay na ito ang nanatili sa iyo. At tandaan – hindi ito isang pagsusulit kung saan kailangan mong maging perpekto. Mas parang selebrasyon ito ng lahat ng cool na bagay na natutunan mo tungkol sa kamangha-manghang mundong papasukin mo!
 
 [Kunin ang post-lesson quiz](https://ff-quizzes.netlify.app/web/)
+## Review & Pag-aaral sa Sarili
 
-## Review at Sariling Pag-aaral
-
-**Maglaan ng oras upang mag-explore at mag-enjoy!**
+**Maglaan ng oras para mag-explore at mag-enjoy!**
 
-Ang dami mong natutunan ngayon, at dapat kang maging proud! Ngayon ang masayang bahagi – ang pag-explore sa mga topic na nagpasigla sa iyong curiosity. Tandaan, hindi ito homework – ito ay isang adventure!
+Marami kang natutunan ngayong araw, at dapat mo itong ipagmalaki! Ngayon ang masayang bahagi – ang pag-explore sa mga paksa na nagpasiklab ng iyong interes. Tandaan, hindi ito takdang-aralin – ito ay isang pakikipagsapalaran!
 
-**Mas malalim na pag-aaral sa mga bagay na nagpapasaya sa iyo:**
+**Mas malalim na pag-aaral sa mga bagay na kinagigiliwan mo:**
 
-**Mag-hands-on sa mga programming language:**
-- Bisitahin ang mga opisyal na website ng 2-3 wika na nagustuhan mo. Ang bawat isa ay may sariling personalidad at kwento!
-- Subukan ang mga online coding playground tulad ng [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), o [Replit](https://replit.com/). Huwag matakot mag-eksperimento – hindi mo masisira ang kahit ano!
-- Basahin ang tungkol sa kung paano nabuo ang paborito mong wika. Seryoso, ang ilan sa mga origin stories na ito ay nakakatuwa at makakatulong sa iyong maunawaan kung bakit gumagana ang mga wika sa ganitong paraan.
+**Subukan ang mga programming language:**
+- Bisitahin ang mga opisyal na website ng 2-3 programming language na nagustuhan mo. Bawat isa ay may sariling personalidad at kwento!
+- Subukan ang mga online coding playground tulad ng [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), o [Replit](https://replit.com/). Huwag matakot mag-eksperimento – wala kang masisira!
+- Magbasa tungkol sa kung paano nagsimula ang paborito mong programming language. Totoo, ang ilan sa mga kwentong ito ay nakakatuwa at makakatulong sa iyong maunawaan kung bakit gumagana ang mga language sa ganitong paraan.
 
-**Magpakomportable sa iyong mga bagong tools:**
+**Sanayin ang sarili sa mga bagong tools:**
 - I-download ang Visual Studio Code kung hindi mo pa nagagawa – libre ito at magugustuhan mo ito!
-- Maglaan ng ilang minuto sa pag-browse sa Extensions marketplace. Para itong app store para sa iyong code editor!
-- Buksan ang Developer Tools ng iyong browser at mag-click-click lang. Huwag mag-alala tungkol sa pag-intindi sa lahat – magpakilala ka lang sa kung ano ang naroon.
+- Maglaan ng ilang minuto para mag-browse sa Extensions marketplace. Para itong app store para sa iyong code editor!
+- Buksan ang Developer Tools ng iyong browser at mag-click-click lang. Huwag mag-alala kung hindi mo pa naiintindihan ang lahat – magpakilala ka lang sa kung ano ang nandiyan.
 
 **Sumali sa komunidad:**
 - Sundan ang ilang developer communities sa [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), o [GitHub](https://github.com/). Ang programming community ay sobrang welcoming sa mga baguhan!
-- Manood ng mga beginner-friendly na coding videos sa YouTube. Maraming magagaling na creators doon na naaalala kung paano magsimula sa coding.
-- Subukang sumali sa mga lokal na meetups o online na komunidad. Maniwala ka, mahilig tumulong ang mga developers sa mga baguhan!
+- Manood ng mga beginner-friendly coding videos sa YouTube. Maraming magagaling na creators na naaalala kung paano magsimula.
+- Isaalang-alang ang pagsali sa mga local meetups o online communities. Maniwala ka, mahilig tumulong ang mga developer sa mga baguhan!
 
-> 🎯 **Pakinggan, ito ang gusto kong tandaan mo**: Hindi inaasahan na magiging coding wizard ka agad-agad! Sa ngayon, nagsisimula ka pa lang makilala ang kamangha-manghang mundo na magiging bahagi mo. Huwag magmadali, i-enjoy ang proseso, at tandaan – bawat developer na hinahangaan mo ay minsan ding nasa posisyon mo ngayon, excited at medyo nalilito. Normal lang 'yan, at ibig sabihin tama ang ginagawa mo!
+> 🎯 **Pakinggan, ito ang gusto kong tandaan mo**: Hindi inaasahan na magiging coding wizard ka agad-agad! Sa ngayon, kinikilala mo pa lang ang kamangha-manghang mundo na magiging bahagi mo. Maglaan ng oras, mag-enjoy sa paglalakbay, at tandaan – bawat developer na hinahangaan mo ay minsan ding nasa eksaktong posisyon mo ngayon, excited at maaaring medyo nalilito. Normal lang yan, at ibig sabihin tama ang ginagawa mo!
 
 
 
 ## Takdang-Aralin
 
-[Pagbasa ng Dokumentasyon](assignment.md)
+[Pagbabasa ng Docs](assignment.md)
+
+> 💡 **Kaunting tulong para sa iyong takdang-aralin**: Gustung-gusto kong makita kang mag-explore ng mga tools na hindi pa natin napag-uusapan! Iwasan ang mga editors, browsers, at command line tools na natalakay na natin – mayroong buong kamangha-manghang uniberso ng mga development tools na naghihintay na ma-discover. Hanapin ang mga actively maintained tools na may vibrant at helpful na communities (karaniwang may pinakamahusay na tutorials at supportive na tao kapag kailangan mo ng tulong).
+
+---
+
+## 🚀 Timeline ng Iyong Programming Journey
+
+### ⚡ **Ano ang Pwede Mong Gawin sa Susunod na 5 Minuto**
+- [ ] I-bookmark ang 2-3 programming language websites na nagustuhan mo
+- [ ] I-download ang Visual Studio Code kung hindi mo pa nagagawa
+- [ ] Buksan ang DevTools ng iyong browser (F12) at mag-click-click sa kahit anong website
+- [ ] Sumali sa isang programming community (Dev.to, Reddit r/webdev, o Stack Overflow)
+
+### ⏰ **Ano ang Pwede Mong Makamit sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at pag-isipan ang iyong mga sagot
+- [ ] I-set up ang VS Code gamit ang GitHub Copilot extension
+- [ ] Subukan ang "Hello World" example sa 2 magkaibang programming language online
+- [ ] Manood ng "Day in the Life of a Developer" video sa YouTube
+- [ ] Simulan ang iyong programming language detective work (mula sa challenge)
+
+### 📅 **Ang Iyong Pakikipagsapalaran sa Loob ng Isang Linggo**
+- [ ] Kumpletuhin ang takdang-aralin at mag-explore ng 3 bagong development tools
+- [ ] Sundan ang 5 developers o programming accounts sa social media
+- [ ] Subukan ang paggawa ng isang maliit na bagay sa CodePen o Replit (kahit "Hello, [Your Name]!")
+- [ ] Magbasa ng isang developer blog post tungkol sa coding journey ng isang tao
+- [ ] Sumali sa isang virtual meetup o manood ng programming talk
+- [ ] Simulan ang pag-aaral ng napiling language gamit ang online tutorials
+
+### 🗓️ **Ang Iyong Transformasyon sa Loob ng Isang Buwan**
+- [ ] Gumawa ng iyong unang maliit na proyekto (kahit simpleng webpage ay pwede!)
+- [ ] Mag-contribute sa isang open-source project (simulan sa documentation fixes)
+- [ ] Mag-mentor ng isang tao na nagsisimula pa lang sa programming journey
+- [ ] Gumawa ng iyong developer portfolio website
+- [ ] Kumonekta sa mga local developer communities o study groups
+- [ ] Simulan ang pagpaplano ng iyong susunod na learning milestone
+
+### 🎯 **Final Reflection Check-in**
+
+**Bago ka magpatuloy, maglaan ng sandali para magdiwang:**
+- Ano ang isang bagay tungkol sa programming na nagpasaya sa iyo ngayong araw?
+- Aling tool o konsepto ang gusto mong i-explore muna?
+- Ano ang nararamdaman mo tungkol sa pagsisimula ng programming journey na ito?
+- Ano ang isang tanong na gusto mong itanong sa isang developer ngayon?
+
+```mermaid
+journey
+    title Your Confidence Building Journey
+    section Today
+      Curious: 3: You
+      Overwhelmed: 4: You
+      Excited: 5: You
+    section This Week
+      Exploring: 4: You
+      Learning: 5: You
+      Connecting: 4: You
+    section Next Month
+      Building: 5: You
+      Confident: 5: You
+      Helping Others: 5: You
+```
 
-> 💡 **Kaunting paalala para sa iyong takdang-aralin**: Gustung-gusto kong makita kang mag-explore ng mga tools na hindi pa natin napag-uusapan! Iwasan ang mga editors, browsers, at command line tools na natalakay na natin – may napakalaking mundo ng kamangha-manghang development tools na naghihintay lang na matuklasan. Hanapin ang mga actively maintained at may masigla, helpful na komunidad (karaniwang may pinakamahusay na tutorials at pinaka-suportang tao kapag na-stuck ka at kailangan ng tulong).
+> 🌟 **Tandaan**: Bawat eksperto ay minsang naging baguhan. Bawat senior developer ay minsang naramdaman ang eksaktong nararamdaman mo ngayon – excited, maaaring medyo nalilito, at tiyak na curious sa mga posibilidad. Nasa maganda kang kumpanya, at ang paglalakbay na ito ay magiging kamangha-mangha. Maligayang pagdating sa kahanga-hangang mundo ng programming! 🎉
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/1-getting-started-lessons/2-github-basics/README.md b/translations/tl/1-getting-started-lessons/2-github-basics/README.md
index 9a286e3ea3..da59dfd216 100644
--- a/translations/tl/1-getting-started-lessons/2-github-basics/README.md
+++ b/translations/tl/1-getting-started-lessons/2-github-basics/README.md
@@ -1,50 +1,67 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "acad15f3164cd6348e065ff38619aae9",
-  "translation_date": "2025-10-22T15:23:57+00:00",
+  "original_hash": "0fe3ff66299b447f1c8cb34dcbf0c5ef",
+  "translation_date": "2025-11-03T13:51:07+00:00",
   "source_file": "1-getting-started-lessons/2-github-basics/README.md",
   "language_code": "tl"
 }
 -->
 # Panimula sa GitHub
 
-Kamusta, hinaharap na developer! 👋 Handa ka na bang sumali sa milyon-milyong coder sa buong mundo? Talagang excited akong ipakilala sa'yo ang GitHub – isipin mo ito bilang social media platform para sa mga programmer, pero sa halip na magbahagi ng mga larawan ng tanghalian, nagbabahagi tayo ng code at gumagawa ng mga kamangha-manghang bagay nang sama-sama!
+Kamusta, hinaharap na developer! 👋 Handa ka na bang sumali sa milyon-milyong coder sa buong mundo? Talagang excited akong ipakilala sa iyo ang GitHub – isipin mo ito bilang social media platform para sa mga programmer, pero sa halip na magbahagi ng mga larawan ng tanghalian, nagbabahagi tayo ng code at gumagawa ng mga kamangha-manghang bagay nang sama-sama!
 
-Narito ang nakakabilib: bawat app sa iyong telepono, bawat website na binibisita mo, at karamihan sa mga tool na matututunan mong gamitin ay ginawa ng mga team ng developer na nagtutulungan sa mga platform tulad ng GitHub. Yung music app na mahal mo? May isang tao na tulad mo ang nag-ambag dito. Yung laro na hindi mo mabitawan? Oo, malamang ginawa gamit ang GitHub collaboration. At ngayon, IKAW ang matututo kung paano maging bahagi ng kamangha-manghang komunidad na ito!
+Narito ang nakakabilib: bawat app sa iyong telepono, bawat website na binibisita mo, at karamihan sa mga tool na matututunan mong gamitin ay ginawa ng mga team ng developer na nagtutulungan sa mga platform tulad ng GitHub. Yung music app na mahal mo? May isang tulad mo na nag-ambag dito. Yung laro na hindi mo mabitawan? Oo, malamang ginawa gamit ang GitHub collaboration. At ngayon, IKAW ang matututo kung paano maging bahagi ng kamangha-manghang komunidad na iyon!
 
-Alam ko na maaaring mukhang marami ito sa simula – sa totoo lang, naaalala ko pa ang unang beses kong tumingin sa GitHub page at iniisip, "Ano ang ibig sabihin ng lahat ng ito?" Pero ganito kasi: bawat developer ay nagsimula sa eksaktong lugar kung nasaan ka ngayon. Sa pagtatapos ng araling ito, magkakaroon ka ng sarili mong GitHub repository (isipin mo ito bilang personal na showcase ng proyekto mo sa cloud), at malalaman mo kung paano i-save ang iyong trabaho, ibahagi ito sa iba, at mag-ambag sa mga proyekto na ginagamit ng milyon-milyong tao.
+Alam ko na maaaring medyo nakakatakot ito sa simula – naaalala ko pa ang unang beses kong tumingin sa GitHub page at iniisip "Ano ang ibig sabihin ng lahat ng ito?" Pero ganito kasi: bawat developer ay nagsimula sa eksaktong posisyon mo ngayon. Sa pagtatapos ng araling ito, magkakaroon ka ng sarili mong GitHub repository (isipin mo ito bilang personal na showcase ng iyong proyekto sa cloud), at malalaman mo kung paano i-save ang iyong trabaho, ibahagi ito sa iba, at mag-ambag sa mga proyekto na ginagamit ng milyon-milyong tao.
 
 Sama-sama nating tatahakin ang paglalakbay na ito, hakbang-hakbang. Walang pagmamadali, walang pressure – ikaw, ako, at ilang napakagandang tools na magiging bagong matalik mong kaibigan!
 
 ![Panimula sa GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.tl.png)
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your GitHub Adventure Today
+    section Setup
+      Install Git: 4: You
+      Create Account: 5: You
+      First Repository: 5: You
+    section Master Git
+      Local Changes: 4: You
+      Commits & Pushes: 5: You
+      Branching: 4: You
+    section Collaborate
+      Fork Projects: 4: You
+      Pull Requests: 5: You
+      Open Source: 5: You
+```
+
 ## Pre-Lecture Quiz
 [Pre-lecture quiz](https://ff-quizzes.netlify.app)
 
 ## Panimula
 
-Bago tayo sumabak sa mga talagang exciting na bagay, ihanda muna natin ang iyong computer para sa GitHub magic! Isipin mo ito na parang inaayos ang mga gamit mo sa sining bago gumawa ng obra maestra – ang pagkakaroon ng tamang tools ay nagpapadali at mas masaya ang lahat.
+Bago tayo sumabak sa mga talagang exciting na bagay, ihanda muna natin ang iyong computer para sa GitHub magic! Isipin mo ito na parang inaayos ang iyong mga art supplies bago gumawa ng obra maestra – ang pagkakaroon ng tamang tools ay nagpapadali at mas masaya ang lahat.
 
-Personal kitang gagabayan sa bawat hakbang ng setup, at ipinapangako kong hindi ito kasing hirap ng iniisip mo. Kung may hindi agad maunawaan, normal lang 'yan! Naalala ko pa noong una kong i-set up ang development environment ko, parang nagbabasa ako ng sinaunang hieroglyphics. Bawat developer ay dumaan sa eksaktong nararamdaman mo ngayon, nagtataka kung tama ba ang ginagawa nila. Spoiler alert: kung nandito ka at nag-aaral, tama na ang ginagawa mo! 🌟
+Sasamahan kita sa bawat hakbang ng setup, at ipinapangako ko na hindi ito kasing nakakatakot gaya ng maaaring isipin sa unang tingin. Kung may hindi agad maunawaan, normal lang iyon! Naalala ko pa ang unang beses kong mag-setup ng development environment at pakiramdam ko ay nagbabasa ako ng sinaunang hieroglyphics. Bawat developer ay dumaan sa eksaktong posisyon mo ngayon, iniisip kung tama ba ang ginagawa nila. Spoiler alert: kung nandito ka at nag-aaral, tama na ang ginagawa mo! 🌟
 
 Sa araling ito, tatalakayin natin:
 
-- paano subaybayan ang mga ginagawa mo sa iyong computer
+- paano subaybayan ang trabaho mo sa iyong computer
 - paano makipagtulungan sa mga proyekto kasama ang iba
 - paano mag-ambag sa open source software
 
 ### Mga Kinakailangan
 
-Ihanda natin ang iyong computer para sa GitHub magic! Huwag mag-alala – ang setup na ito ay isang beses lang gagawin, at pagkatapos nito, handa ka na para sa buong coding journey mo.
+Ihanda natin ang iyong computer para sa GitHub magic! Huwag mag-alala – ang setup na ito ay isang beses mo lang gagawin, at pagkatapos ay handa ka na para sa buong coding journey mo.
 
-Sige, simulan natin sa pundasyon! Una, kailangan nating tingnan kung naka-install na ang Git sa iyong computer. Ang Git ay parang super-smart assistant na naaalala ang bawat pagbabago na ginawa mo sa code – mas magaling kaysa sa paulit-ulit na pag-hit ng Ctrl+S bawat dalawang segundo (lahat tayo nagawa na 'yan!).
+Sige, simulan natin sa pundasyon! Una, kailangan nating tingnan kung naka-install na ang Git sa iyong computer. Ang Git ay parang super-smart na assistant na naaalala ang bawat pagbabago na ginawa mo sa iyong code – mas magaling kaysa sa paulit-ulit na pag-hit ng Ctrl+S bawat dalawang segundo (lahat tayo nagawa na iyon!).
 
 Tingnan kung naka-install na ang Git sa pamamagitan ng pag-type ng magic command na ito sa iyong terminal:
 `git --version`
 
-Kung wala pa ang Git, walang problema! Pumunta lang sa [download Git](https://git-scm.com/downloads) at kunin ito. Kapag na-install mo na, kailangan nating ipakilala ang Git sa'yo nang maayos:
+Kung wala pa ang Git, huwag mag-alala! Pumunta lang sa [download Git](https://git-scm.com/downloads) at kunin ito. Kapag na-install mo na, kailangan nating ipakilala ang Git sa iyo nang maayos:
 
 > 💡 **Unang Setup**: Ang mga command na ito ay nagsasabi sa Git kung sino ka. Ang impormasyong ito ay ilalagay sa bawat commit na gagawin mo, kaya pumili ng pangalan at email na komportable kang ibahagi sa publiko.
 
@@ -53,7 +70,7 @@ git config --global user.name "your-name"
 git config --global user.email "your-email"
 ```
 
-Para tingnan kung naka-configure na ang Git, maaari mong i-type:
+Para tingnan kung naka-configure na ang Git, maaari kang mag-type:
 ```bash
 git config --list
 ```
@@ -72,20 +89,20 @@ Kakailanganin mo ng folder na may code project sa iyong lokal na makina (laptop
 
 ### Panatilihing Ligtas ang Iyong Code
 
-Pag-usapan natin ang seguridad sandali – pero huwag mag-alala, hindi kita pupunuin ng nakakatakot na bagay! Isipin mo ang mga security practices na ito na parang pag-lock ng iyong kotse o bahay. Simple lang ang mga ito, nagiging natural na ugali, at pinoprotektahan ang iyong pinaghirapan.
+Pag-usapan natin ang seguridad sandali – pero huwag mag-alala, hindi natin ito gagawing nakakatakot! Isipin mo ang mga security practices na ito na parang pag-lock ng iyong kotse o bahay. Simple lang ang mga ito, nagiging natural na ugali, at pinoprotektahan ang iyong pinaghirapan.
 
-Ipapakita namin sa'yo ang modernong, secure na paraan ng paggamit ng GitHub mula sa simula. Sa ganitong paraan, makakabuo ka ng magagandang gawi na magagamit mo sa buong coding career mo.
+Ipapakita namin sa iyo ang modernong, secure na paraan ng paggamit ng GitHub mula sa simula. Sa ganitong paraan, makakabuo ka ng magagandang gawi na magagamit mo sa buong coding career mo.
 
 Kapag gumagamit ng GitHub, mahalagang sundin ang mga best practices sa seguridad:
 
-| Lugar ng Seguridad | Best Practice | Bakit Mahalaga |
-|--------------------|---------------|----------------|
+| Security Area | Best Practice | Bakit Mahalaga |
+|---------------|---------------|----------------|
 | **Authentication** | Gumamit ng SSH keys o Personal Access Tokens | Ang mga password ay hindi gaanong secure at unti-unting inaalis |
 | **Two-Factor Authentication** | I-enable ang 2FA sa iyong GitHub account | Nagdadagdag ng karagdagang proteksyon sa account |
-| **Repository Security** | Huwag kailanman mag-commit ng sensitibong impormasyon | Ang mga API keys at password ay hindi dapat nasa public repos |
-| **Dependency Management** | I-enable ang Dependabot para sa updates | Pinapanatiling secure at up-to-date ang iyong dependencies |
+| **Repository Security** | Huwag kailanman i-commit ang sensitibong impormasyon | Ang mga API keys at password ay hindi dapat nasa public repos |
+| **Dependency Management** | I-enable ang Dependabot para sa updates | Pinapanatiling secure at updated ang iyong mga dependencies |
 
-> ⚠️ **Paalala sa Seguridad**: Huwag kailanman mag-commit ng API keys, password, o iba pang sensitibong impormasyon sa anumang repository. Gumamit ng environment variables at `.gitignore` files para protektahan ang sensitibong data.
+> ⚠️ **Mahalagang Paalala sa Seguridad**: Huwag kailanman i-commit ang mga API keys, password, o iba pang sensitibong impormasyon sa anumang repository. Gumamit ng environment variables at `.gitignore` files para protektahan ang sensitibong data.
 
 **Modernong Authentication Setup:**
 
@@ -103,21 +120,45 @@ git remote set-url origin git@github.com:username/repository.git
 
 ## Pamamahala ng Iyong Code na Parang Pro
 
-Okay, DITO na nagiging exciting ang lahat! 🎉 Matututo tayo kung paano subaybayan at pamahalaan ang iyong code tulad ng mga propesyonal, at sa totoo lang, isa ito sa mga paborito kong ituro dahil sobrang game-changer nito.
-
-Isipin mo ito: nagsusulat ka ng isang kamangha-manghang kwento, at gusto mong subaybayan ang bawat draft, bawat brilliant edit, at bawat "wait, ang galing nito!" moment sa daan. Ganyan ang ginagawa ng Git para sa iyong code! Parang may pinaka-kamangha-manghang time-traveling notebook na naaalala ang LAHAT – bawat keystroke, bawat pagbabago, bawat "oops, nasira ang lahat" moment na maaari mong agad na balikan.
-
-Aaminin ko – maaaring mukhang nakakalito ito sa simula. Noong nagsimula ako, iniisip ko "Bakit hindi ko na lang i-save ang files ko nang normal?" Pero magtiwala ka sa akin: kapag naintindihan mo ang Git (at mangyayari 'yan!), magkakaroon ka ng lightbulb moment kung saan iisipin mo "Paano ako NAG-CODE nang wala ito?" Parang natuklasan mong kaya mong lumipad pagkatapos maglakad sa lahat ng lugar buong buhay mo!
-
-Sabihin nating may folder ka sa lokal na makina na may code project at gusto mong simulan ang pagsubaybay sa iyong progreso gamit ang git - ang version control system. Ang iba ay ikinukumpara ang paggamit ng git sa pagsusulat ng love letter sa iyong hinaharap na sarili. Sa pagbabasa ng iyong commit messages sa mga darating na araw, linggo, o buwan, maaalala mo kung bakit mo ginawa ang isang desisyon, o "rollback" ang isang pagbabago – iyon ay, kapag nagsusulat ka ng magagandang "commit messages."
+Okay, DITO na nagiging exciting ang lahat! 🎉 Matututo tayo kung paano subaybayan at pamahalaan ang iyong code na parang mga pro, at sa totoo lang, isa ito sa mga paborito kong ituro dahil sobrang game-changer nito.
+
+Isipin mo ito: nagsusulat ka ng isang kamangha-manghang kuwento, at gusto mong subaybayan ang bawat draft, bawat brilliant edit, at bawat "wait, ang galing nito!" moment sa daan. Iyan ang ginagawa ng Git para sa iyong code! Parang may pinaka-kamangha-manghang time-traveling notebook na naaalala ang LAHAT – bawat keystroke, bawat pagbabago, bawat "oops, nasira ang lahat" moment na maaari mong agad na balikan.
+
+Aaminin ko – maaaring nakaka-overwhelm ito sa simula. Noong nagsimula ako, iniisip ko "Bakit hindi ko na lang i-save ang mga files ko nang normal?" Pero magtiwala ka sa akin: kapag naintindihan mo ang Git (at mangyayari ito!), magkakaroon ka ng lightbulb moment kung saan iisipin mo "Paano ako NAG-CODE nang wala ito?" Parang natuklasan mong kaya mong lumipad pagkatapos maglakad sa lahat ng lugar sa buong buhay mo!
+
+Halimbawa, mayroon kang folder na may code project at gusto mong simulan ang pagsubaybay sa iyong progreso gamit ang git - ang version control system. Ang iba ay ikinukumpara ang paggamit ng git sa pagsusulat ng love letter sa iyong hinaharap na sarili. Sa pagbabasa ng iyong commit messages ilang araw, linggo, o buwan pagkatapos, maaalala mo kung bakit mo ginawa ang isang desisyon, o "rollback" ang isang pagbabago – iyon ay, kapag nagsusulat ka ng magagandang "commit messages."
+
+```mermaid
+flowchart TD
+    A[📁 Your Project Files] --> B{Is it a Git Repository?}
+    B -->|No| C[git init]
+    B -->|Yes| D[Make Changes]
+    C --> D
+    D --> E[git add .]
+    E --> F["git commit -m 'message'"]
+    F --> G[git push]
+    G --> H[🌟 Code on GitHub!]
+    
+    H --> I{Want to collaborate?}
+    I -->|Yes| J[Fork & Clone]
+    I -->|No| D
+    J --> K[Create Branch]
+    K --> L[Make Changes]
+    L --> M[Pull Request]
+    M --> N[🎉 Contributing!]
+    
+    style A fill:#fff59d
+    style H fill:#c8e6c9
+    style N fill:#ff4081,color:#fff
+```
 
 ### Gawain: Gumawa ng Iyong Unang Repository!
 
-> 🎯 **Ang Iyong Misyon (at sobrang excited ako para sa'yo!)**: Gagawa tayo ng iyong unang GitHub repository nang magkasama! Sa pagtatapos nito, magkakaroon ka ng sarili mong maliit na sulok sa internet kung saan nakatira ang iyong code, at magagawa mo ang iyong unang "commit" (developer speak para sa matalinong paraan ng pag-save ng iyong trabaho).
+> 🎯 **Ang Iyong Misyon (at sobrang excited ako para sa iyo!)**: Gagawa tayo ng iyong unang GitHub repository nang magkasama! Sa oras na matapos tayo dito, magkakaroon ka ng sarili mong maliit na sulok sa internet kung saan nakatira ang iyong code, at magagawa mo ang iyong unang "commit" (developer speak para sa pag-save ng iyong trabaho sa napakatalinong paraan).
 >
-> Talagang espesyal ang sandaling ito – opisyal ka nang sasali sa global na komunidad ng mga developer! Naalala ko pa ang thrill ng paggawa ng unang repo ko at iniisip "Wow, ginagawa ko talaga ito!"
+> Ito ay talagang espesyal na sandali – opisyal ka nang sasali sa global na komunidad ng mga developer! Naalala ko pa ang thrill ng paggawa ng aking unang repo at iniisip "Wow, ginagawa ko talaga ito!"
 
-Sama-sama nating lakbayin ang adventure na ito, hakbang-hakbang. Dahan-dahan sa bawat bahagi – walang premyo sa pagmamadali, at ipinapangako kong bawat hakbang ay magkakaroon ng kahulugan. Tandaan, bawat coding superstar na hinahangaan mo ay minsang nakaupo sa eksaktong lugar kung nasaan ka ngayon, handang gumawa ng kanilang unang repository. Ang cool, 'di ba?
+Sama-sama nating lakbayin ang adventure na ito, hakbang-hakbang. Dahan-dahan sa bawat bahagi – walang premyo para sa pagmamadali, at ipinapangako ko na bawat hakbang ay magkakaroon ng kahulugan. Tandaan, bawat coding superstar na hinahangaan mo ay minsang nakaupo sa eksaktong posisyon mo, handang gumawa ng kanilang unang repository. Ang cool, di ba?
 
 > Panoorin ang video
 > 
@@ -128,24 +169,24 @@ Sama-sama nating lakbayin ang adventure na ito, hakbang-hakbang. Dahan-dahan sa
 1. **Gumawa ng iyong repository sa GitHub**. Pumunta sa GitHub.com at hanapin ang maliwanag na berdeng **New** button (o ang **+** sign sa kanang itaas). I-click ito at piliin ang **New repository**.
 
    Narito ang gagawin:
-   1. Bigyan ang iyong repository ng pangalan – gawing makabuluhan ito para sa'yo!
-   1. Magdagdag ng description kung gusto mo (nakakatulong ito sa iba na maunawaan kung tungkol saan ang iyong proyekto)
-   1. Magdesisyon kung gusto mo itong public (makikita ng lahat) o private (para sa'yo lang)
-   1. Inirerekumenda kong i-check ang box para magdagdag ng README file – parang front page ito ng iyong proyekto
+   1. Bigyan ang iyong repository ng pangalan – gawing makabuluhan ito para sa iyo!
+   1. Magdagdag ng description kung gusto mo (makakatulong ito sa iba na maunawaan kung tungkol saan ang iyong proyekto)
+   1. Magdesisyon kung gusto mo itong public (makikita ng lahat) o private (para lang sa iyo)
+   1. Inirerekumenda kong i-check ang box para magdagdag ng README file – parang front page ng iyong proyekto
    1. I-click ang **Create repository** at magdiwang – ginawa mo na ang iyong unang repo! 🎉
 
-2. **Pumunta sa iyong project folder**. Ngayon, buksan natin ang iyong terminal (huwag mag-alala, hindi ito nakakatakot tulad ng hitsura nito!). Kailangan nating sabihin sa iyong computer kung nasaan ang mga file ng iyong proyekto. I-type ang command na ito:
+2. **Pumunta sa iyong project folder**. Ngayon buksan natin ang iyong terminal (huwag mag-alala, hindi ito kasing nakakatakot gaya ng hitsura nito!). Kailangan nating sabihin sa iyong computer kung nasaan ang iyong project files. I-type ang command na ito:
 
    ```bash
    cd [name of your folder]
    ```
 
    **Ang ginagawa natin dito:**
-   - Karaniwang sinasabi natin sa computer, "Hoy computer, dalhin mo ako sa folder ng proyekto ko"
-   - Parang binubuksan ang isang partikular na folder sa iyong desktop, pero ginagawa natin ito gamit ang text commands
+   - Parang sinasabi natin "Hey computer, dalhin mo ako sa project folder ko"
+   - Parang binubuksan ang isang specific folder sa iyong desktop, pero ginagawa natin ito gamit ang text commands
    - Palitan ang `[name of your folder]` ng aktwal na pangalan ng iyong project folder
 
-3. **Gawing Git repository ang iyong folder**. Dito na mangyayari ang magic! I-type:
+3. **Gawin ang iyong folder bilang Git repository**. Dito nangyayari ang magic! I-type:
 
    ```bash
    git init
@@ -153,8 +194,8 @@ Sama-sama nating lakbayin ang adventure na ito, hakbang-hakbang. Dahan-dahan sa
 
    **Narito ang nangyari (sobrang cool na bagay!):**
    - Gumawa ang Git ng nakatagong `.git` folder sa iyong proyekto – hindi mo ito makikita, pero nandiyan ito!
-   - Ang regular mong folder ay ngayon isang "repository" na maaaring subaybayan ang bawat pagbabago na ginagawa mo
-   - Isipin mo ito na parang binibigyan mo ng superpowers ang iyong folder para maalala ang lahat
+   - Ang iyong regular na folder ay ngayon isang "repository" na maaaring subaybayan ang bawat pagbabago na ginagawa mo
+   - Isipin mo ito na parang binibigyan ang iyong folder ng superpowers para maalala ang lahat
 
 4. **Tingnan kung ano ang nangyayari**. Tingnan natin kung ano ang iniisip ng Git tungkol sa iyong proyekto ngayon:
 
@@ -178,9 +219,9 @@ Sama-sama nating lakbayin ang adventure na ito, hakbang-hakbang. Dahan-dahan sa
    **Huwag mag-panic! Narito ang ibig sabihin nito:**
    - Ang mga file na **pula** ay mga file na may mga pagbabago pero hindi pa handang i-save
    - Ang mga file na **berde** (kapag nakita mo sila) ay handa nang i-save
-   - Ang Git ay tumutulong sa pamamagitan ng pagsasabi kung ano ang susunod na gagawin
+   - Ang Git ay tumutulong sa pamamagitan ng pagsasabi kung ano ang maaari mong gawin sa susunod
 
-   > 💡 **Pro tip**: Ang `git status` command ay ang iyong best friend! Gamitin ito anumang oras na nalilito ka sa nangyayari. Parang tinatanong mo ang Git, "Hoy, ano ang sitwasyon ngayon?"
+   > 💡 **Pro tip**: Ang `git status` command ay ang iyong matalik na kaibigan! Gamitin ito anumang oras na nalilito ka sa kung ano ang nangyayari. Parang tinatanong mo ang Git "Hey, ano ang sitwasyon ngayon?"
 
 5. **Ihanda ang iyong mga file para i-save** (tinatawag itong "staging"):
 
@@ -189,11 +230,11 @@ Sama-sama nating lakbayin ang adventure na ito, hakbang-hakbang. Dahan-dahan sa
    ```
 
    **Ang ginawa natin:**
-   - Sinabi natin sa Git, "Hoy, gusto kong isama LAHAT ng file ko sa susunod na save"
+   - Sinabi natin sa Git "Hey, gusto kong isama LAHAT ng files ko sa susunod na save"
    - Ang `.` ay parang sinasabi "lahat ng nasa folder na ito"
-   - Ngayon, ang iyong mga file ay "staged" at handa na para sa susunod na hakbang
+   - Ngayon ang iyong mga file ay "staged" at handa na para sa susunod na hakbang
 
-   **Gusto mo bang maging mas mapili?** Maaari mong idagdag ang partikular na mga file:
+   **Gusto mo bang maging mas mapili?** Maaari mong idagdag ang specific na mga file lamang:
 
    ```bash
    git add [file or folder name]
@@ -201,10 +242,10 @@ Sama-sama nating lakbayin ang adventure na ito, hakbang-hakbang. Dahan-dahan sa
 
    **Bakit mo gustong gawin ito?**
    - Minsan gusto mong i-save ang mga kaugnay na pagbabago nang sabay-sabay
-   - Nakakatulong ito sa pag-organize ng iyong trabaho sa lohikal na mga bahagi
+   - Nakakatulong ito sa pag-organisa ng iyong trabaho sa lohikal na mga bahagi
    - Pinapadali ang pag-unawa kung ano ang nagbago at kailan
 
-   **Nagbago ang isip mo?** Walang problema! Maaari mong alisin ang mga file sa stage tulad nito:
+   **Nagbago ang isip mo?** Walang problema! Maaari mong alisin ang mga file sa staging gamit ito:
 
    ```bash
    # Unstage everything
@@ -222,55 +263,54 @@ Sama-sama nating lakbayin ang adventure na ito, hakbang-hakbang. Dahan-dahan sa
    git commit -m "first commit"
    ```
 
-   **🎉 Congratulations! Ginawa mo na ang iyong unang commit!**
+   **🎉 Binabati kita! Ginawa mo na ang iyong unang commit!**
    
    **Narito ang nangyari:**
    - Kinuha ng Git ang "snapshot" ng lahat ng iyong staged files sa eksaktong sandaling ito
    - Ang iyong commit message na "first commit" ay nagpapaliwanag kung tungkol saan ang save point na ito
    - Binigyan ng Git ang snapshot na ito ng unique ID para palaging mahanap mo ito sa hinaharap
-   - Opisyal mo nang sinimulan ang pagsubaybay sa kasaysayan ng iyong proyekto!
+   - Opisyal mo nang nasimulan ang pagsubaybay sa kasaysayan ng iyong proyekto!
 
-   > 💡 **Mga susunod na commit messages**: Para sa iyong mga susunod na commit, maging mas detalyado! Sa halip na "updated stuff", subukang "Dagdag ng contact form sa homepage" o "Ayusin ang bug sa navigation menu". Magpapasalamat ang hinaharap na sarili mo!
+   > 💡 **Mga susunod na commit messages**: Para sa iyong mga susunod na commit, maging mas descriptive! Sa halip na "updated stuff", subukang "Add contact form to homepage" o "Fix navigation menu bug". Magpapasalamat ang iyong hinaharap na sarili!
 
-7. **Ikonekta ang iyong lokal na proyekto sa GitHub**. Sa ngayon, ang iyong proyekto ay nasa iyong computer lang. Ikonekta natin ito sa iyong GitHub repository para maibahagi mo ito sa mundo!
+7. **Ikonekta ang iyong lokal na proyekto sa GitHub**. Sa ngayon, ang iyong proyekto ay nasa iyong computer lamang. Ikonekta natin ito sa iyong GitHub repository para maibahagi mo ito sa mundo!
 
-   Una, pumunta sa iyong GitHub repository page at kopyahin ang URL. Pagkatapos, bumalik dito at i-type:
+   Una, pumunta sa iyong GitHub repository page at kopyahin ang URL. Pagkatapos bumalik dito at i-type:
 
    ```bash
    git remote add origin https://github.com/username/repository_name.git
    ```
    
    (Palitan ang URL na iyon ng aktwal na URL ng iyong repository!)
+**Ang ginawa natin:**
+- Gumawa tayo ng koneksyon sa pagitan ng iyong lokal na proyekto at ng iyong GitHub repository.
+- Ang "Origin" ay parang palayaw para sa iyong GitHub repository – parang pagdaragdag ng contact sa iyong telepono.
+- Ngayon, alam na ng iyong lokal na Git kung saan ipapadala ang iyong code kapag handa ka nang ibahagi ito.
 
-   **Narito ang ginawa natin:**
-   - Nilikha namin ang koneksyon sa pagitan ng iyong lokal na proyekto at ng iyong GitHub repository
-   - Ang "Origin" ay parang palayaw para sa iyong GitHub repository – parang pagdaragdag ng contact sa iyong telepono
-   - Ngayon alam na ng iyong lokal na Git kung saan ipapadala ang iyong code kapag handa ka nang ibahagi ito
-
-   💡 **Mas Madaling Paraan**: Kung may naka-install kang GitHub CLI, magagawa mo ito gamit ang isang command:
+💡 **Mas madali**: Kung may naka-install kang GitHub CLI, magagawa mo ito gamit ang isang command:
    ```bash
    gh repo create my-repo --public --push --source=.
    ```
 
-8. **Ipadala ang iyong code sa GitHub** (ang malaking sandali!):
+8. **I-upload ang iyong code sa GitHub** (ang malaking sandali!):
 
    ```bash
    git push -u origin main
    ```
 
-   **🚀 Ito na! Ina-upload mo na ang iyong code sa GitHub!**
-   
-   **Ano ang nangyayari:**
-   - Ang iyong mga commit ay naglalakbay mula sa iyong computer papunta sa GitHub
-   - Ang `-u` flag ay nagse-set up ng permanenteng koneksyon para mas madali ang mga susunod na push
-   - Ang "main" ay pangalan ng iyong pangunahing branch (parang pangunahing folder)
-   - Pagkatapos nito, maaari mo na lang i-type ang `git push` para sa mga susunod na upload!
+**🚀 Ito na! Ina-upload mo ang iyong code sa GitHub!**
+
+**Ano ang nangyayari:**
+- Ang iyong mga commit ay naglalakbay mula sa iyong computer papunta sa GitHub.
+- Ang `-u` flag ay nagse-set up ng permanenteng koneksyon para mas madali ang mga susunod na push.
+- Ang "main" ay ang pangalan ng iyong pangunahing branch (parang pangunahing folder).
+- Pagkatapos nito, maaari mo na lang gamitin ang `git push` para sa mga susunod na upload!
 
-   💡 **Mabilis na Paalala**: Kung ang pangalan ng iyong branch ay iba (halimbawa "master"), gamitin ang pangalan na iyon. Maaari mong i-check gamit ang `git branch --show-current`.
+💡 **Mabilis na paalala**: Kung ang pangalan ng iyong branch ay iba (halimbawa, "master"), gamitin ang pangalan na iyon. Maaari mong i-check gamit ang `git branch --show-current`.
 
-9. **Ang iyong bagong pang-araw-araw na coding rhythm** (dito na nagiging masaya!):
+9. **Ang iyong bagong pang-araw-araw na coding rhythm** (dito na nagiging nakakaadik!):
 
-   Simula ngayon, tuwing may gagawin kang pagbabago sa iyong proyekto, mayroon kang simpleng tatlong hakbang na proseso:
+Simula ngayon, tuwing may babaguhin ka sa iyong proyekto, mayroon kang simpleng tatlong hakbang na gagawin:
 
    ```bash
    git add .
@@ -278,101 +318,146 @@ Sama-sama nating lakbayin ang adventure na ito, hakbang-hakbang. Dahan-dahan sa
    git push
    ```
 
-   **Ito ang magiging ritmo ng iyong coding:**
-   - Gumawa ng mga kahanga-hangang pagbabago sa iyong code ✨
-   - I-stage ang mga ito gamit ang `git add` ("Hey Git, pansinin mo ang mga pagbabagong ito!")
-   - I-save ang mga ito gamit ang `git commit` at maglagay ng detalyadong mensahe (magpapasalamat ka sa sarili mo sa hinaharap!)
-   - Ibahagi ang mga ito sa mundo gamit ang `git push` 🚀
-   - Ulitin lang – seryoso, magiging natural na ito sa'yo!
-
-   Gustung-gusto ko ang workflow na ito dahil parang nagkakaroon ka ng maraming save points sa isang video game. Gumawa ng pagbabago na gusto mo? I-commit ito! Gusto mong subukan ang isang risky na bagay? Walang problema – palaging maaari kang bumalik sa iyong huling commit kung may hindi maganda.
+**Ito ang magiging tibok ng iyong coding:**
+- Gumawa ng mga kahanga-hangang pagbabago sa iyong code ✨
+- I-stage ang mga ito gamit ang `git add` ("Hey Git, pansinin mo ang mga pagbabagong ito!")
+- I-save ang mga ito gamit ang `git commit` at maglagay ng detalyadong mensahe (magpapasalamat ka sa sarili mo sa hinaharap!)
+- Ibahagi ang mga ito sa mundo gamit ang `git push` 🚀
+- Ulitin lang – seryoso, magiging natural na ito tulad ng paghinga!
+
+Gusto ko ang workflow na ito dahil parang may maraming save points sa isang video game. May nagawa kang pagbabago na gusto mo? I-commit ito! Gusto mong subukan ang isang risky na bagay? Walang problema – palaging pwede kang bumalik sa huling commit kung may hindi maganda.
+
+> 💡 **Tip**: Baka gusto mo ring gumamit ng `.gitignore` file para maiwasan ang pag-track ng mga file na ayaw mong makita sa GitHub - tulad ng mga notes file na nasa parehong folder pero walang lugar sa isang public repository. Makakahanap ka ng mga template para sa `.gitignore` files sa [.gitignore templates](https://github.com/github/gitignore) o gumawa ng isa gamit ang [gitignore.io](https://www.toptal.com/developers/gitignore).
+
+### 🧠 **Unang Check-in ng Repository: Ano ang Pakiramdam?**
+
+**Maglaan ng sandali para magdiwang at magmuni-muni:**
+- Ano ang pakiramdam na makita ang iyong code sa GitHub sa unang pagkakataon?
+- Aling hakbang ang pinaka-nakalilito, at alin ang nakakagulat na madali?
+- Kaya mo bang ipaliwanag ang pagkakaiba ng `git add`, `git commit`, at `git push` sa sarili mong mga salita?
+
+```mermaid
+stateDiagram-v2
+    [*] --> LocalFiles: Create project
+    LocalFiles --> Staged: git add .
+    Staged --> Committed: git commit
+    Committed --> GitHub: git push
+    GitHub --> [*]: Success! 🎉
+    
+    note right of Staged
+        Files ready to save
+    end note
+    
+    note right of Committed
+        Snapshot created
+    end note
+```
 
-   > 💡 **Tip**: Maaaring gusto mo ring gumamit ng `.gitignore` file para maiwasan ang pag-track ng mga file na ayaw mong makita sa GitHub - tulad ng mga notes file na nasa parehong folder pero walang lugar sa isang pampublikong repository. Makakahanap ka ng mga template para sa `.gitignore` files sa [.gitignore templates](https://github.com/github/gitignore) o gumawa ng isa gamit ang [gitignore.io](https://www.toptal.com/developers/gitignore).
+> **Tandaan**: Kahit ang mga bihasang developer ay minsan nakakalimutan ang eksaktong mga command. Ang pagbuo ng muscle memory para sa workflow na ito ay nangangailangan ng pagsasanay - mahusay ang ginagawa mo!
 
 #### Modernong Git workflows
 
 Isaalang-alang ang paggamit ng mga modernong praktis:
 
 - **Conventional Commits**: Gumamit ng standardized na format ng commit message tulad ng `feat:`, `fix:`, `docs:`, atbp. Alamin pa sa [conventionalcommits.org](https://www.conventionalcommits.org/)
-- **Atomic commits**: Gawin ang bawat commit na kumakatawan sa isang lohikal na pagbabago
-- **Frequent commits**: Mag-commit nang madalas na may detalyadong mga mensahe kaysa sa malalaking, madalang na mga commit
+- **Atomic commits**: Gawin ang bawat commit na kumakatawan sa isang lohikal na pagbabago.
+- **Frequent commits**: Mag-commit nang madalas na may detalyadong mga mensahe kaysa sa malalaking, bihirang mga commit.
 
-#### Mga Mensahe ng Commit
+#### Mga mensahe ng commit
 
-Ang isang mahusay na subject line ng Git commit ay dapat makumpleto ang sumusunod na pangungusap:
-Kung ipapatupad, ang commit na ito ay <ilagay ang iyong subject line dito>
+Ang isang mahusay na subject line ng Git commit ay kumukumpleto sa sumusunod na pangungusap:
+Kung ilalapat, ang commit na ito ay <iyong subject line dito>
 
-Para sa subject, gumamit ng imperative, present tense: "change" hindi "changed" o "changes". 
-Tulad ng sa subject, sa body (opsyonal) gumamit din ng imperative, present tense. Ang body ay dapat maglaman ng motibasyon para sa pagbabago at ikumpara ito sa nakaraang behavior. Ipinaliwanag mo ang `bakit`, hindi ang `paano`.
+Para sa subject, gumamit ng imperative, present tense: "baguhin" hindi "binago" o "binabago". Tulad ng sa subject, sa body (opsyonal) ay gumamit din ng imperative, present tense. Ang body ay dapat maglaman ng motibasyon para sa pagbabago at ikumpara ito sa nakaraang behavior. Ipinaliwanag mo ang `bakit`, hindi ang `paano`.
 
-✅ Maglaan ng ilang minuto para mag-surf sa GitHub. Makakakita ka ba ng talagang mahusay na commit message? Makakakita ka ba ng talagang minimal na isa? Anong impormasyon ang sa tingin mo ay pinakamahalaga at kapaki-pakinabang na ipahayag sa isang commit message?
+✅ Maglaan ng ilang minuto para mag-browse sa GitHub. Makakakita ka ba ng isang talagang mahusay na mensahe ng commit? Makakakita ka ba ng isang talagang minimal na mensahe? Anong impormasyon ang sa tingin mo ay pinaka-mahalaga at kapaki-pakinabang na ipahayag sa isang commit message?
 
 ## Pakikipagtulungan sa Iba (Ang Masayang Bahagi!)
 
-Hawakan ang iyong sombrero dahil DITO nagiging sobrang magical ang GitHub! 🪄 Na-master mo na ang pamamahala ng sarili mong code, pero ngayon papasok tayo sa paborito kong bahagi – ang makipagtulungan sa mga kahanga-hangang tao mula sa iba't ibang panig ng mundo.
+Humanda ka dahil DITO nagiging sobrang kamangha-mangha ang GitHub! 🪄 Master mo na ang pamamahala sa sarili mong code, pero ngayon papasok tayo sa paborito kong bahagi – ang pakikipagtulungan sa mga kahanga-hangang tao mula sa iba't ibang bahagi ng mundo.
 
-Isipin ito: paggising mo bukas, may isang tao sa Tokyo na nagpa-improve ng iyong code habang natutulog ka. Tapos may isang tao sa Berlin na nag-ayos ng bug na matagal mo nang sinusubukan. Sa hapon, may developer sa São Paulo na nagdagdag ng feature na hindi mo man lang naisip. Hindi ito science fiction – ito ang normal na araw sa mundo ng GitHub!
+Isipin ito: paggising mo bukas, may isang tao sa Tokyo na nagpa-improve ng iyong code habang natutulog ka. Pagkatapos, may isang tao sa Berlin na nag-ayos ng bug na matagal mo nang sinusubukan. Sa hapon, may developer sa São Paulo na nagdagdag ng feature na hindi mo man lang naisip. Hindi ito science fiction – ito lang ang normal na Martes sa GitHub universe!
 
-Ang talagang nakakapagpasaya sa akin ay ang mga kasanayan sa pakikipagtulungan na matututunan mo? Ito ang mismong mga workflow na ginagamit ng mga team sa Google, Microsoft, at sa mga paborito mong startup araw-araw. Hindi ka lang natututo ng cool na tool – natututo ka ng lihim na wika na nagpapagana sa buong mundo ng software.
+Ang talagang nagpapasaya sa akin ay ang mga kasanayan sa pakikipagtulungan na matututunan mo? Ito ang EXACT na workflows na ginagamit ng mga team sa Google, Microsoft, at ng mga paborito mong startup araw-araw. Hindi ka lang natututo ng cool na tool – natututo ka ng lihim na wika na nagpapagana sa buong software world na magtulungan.
 
-Seryoso, kapag naranasan mo ang saya ng may nag-merge ng una mong pull request, maiintindihan mo kung bakit sobrang passionate ang mga developer sa open source. Parang bahagi ka ng pinakamalaking, pinaka-malikhain na team project sa mundo!
+Seryoso, kapag naranasan mo ang rush ng may nag-merge ng iyong unang pull request, maiintindihan mo kung bakit sobrang passionate ang mga developer tungkol sa open source. Parang bahagi ka ng pinakamalaking, pinaka-malikhain na team project sa mundo!
 
-> Panoorin ang video
+> Tingnan ang video
 >
 > [![Git at GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
 
 Ang pangunahing dahilan ng paglalagay ng mga bagay sa GitHub ay upang gawing posible ang pakikipagtulungan sa ibang mga developer.
 
-Sa iyong repository, pumunta sa `Insights > Community` para makita kung paano ikinukumpara ang iyong proyekto sa mga inirerekomendang pamantayan ng komunidad.
+```mermaid
+flowchart LR
+    A[🔍 Find Project] --> B[🍴 Fork Repository]
+    B --> C[📥 Clone to Local]
+    C --> D[🌿 Create Branch]
+    D --> E[✏️ Make Changes]
+    E --> F[💾 Commit Changes]
+    F --> G[📤 Push Branch]
+    G --> H[🔄 Create Pull Request]
+    H --> I{Maintainer Review}
+    I -->|✅ Approved| J[🎉 Merge!]
+    I -->|❓ Changes Requested| K[📝 Make Updates]
+    K --> F
+    J --> L[🧹 Clean Up Branches]
+    
+    style A fill:#e3f2fd
+    style J fill:#e8f5e8
+    style L fill:#fff3e0
+```
+
+Sa iyong repository, mag-navigate sa `Insights > Community` para makita kung paano ikinukumpara ang iyong proyekto sa mga inirerekomendang pamantayan ng komunidad.
 
 Gusto mo bang gawing propesyonal at welcoming ang iyong repository? Pumunta sa iyong repository at i-click ang `Insights > Community`. Ipinapakita ng cool na feature na ito kung paano ikinukumpara ang iyong proyekto sa kung ano ang itinuturing ng komunidad ng GitHub na "magandang praktis sa repository."
 
-> 🎯 **Pagpapaganda ng Iyong Proyekto**: Ang maayos na repository na may magandang dokumentasyon ay parang malinis, welcoming na tindahan. Ipinapakita nito na pinahahalagahan mo ang iyong trabaho at nakakaengganyo sa iba na mag-ambag!
+> 🎯 **Pagpapaganda ng Iyong Proyekto**: Ang maayos na repository na may magandang dokumentasyon ay parang malinis, welcoming na storefront. Ipinapakita nito na mahalaga sa iyo ang iyong trabaho at nakakaengganyo sa iba na mag-contribute!
 
 **Narito ang mga bagay na nagpapaganda sa isang repository:**
 
-| Ano ang Idadagdag | Bakit Mahalaga | Ano ang Nagagawa Nito Para sa Iyo |
-|-------------------|----------------|-----------------------------------|
+| Ano ang Idadagdag | Bakit Mahalaga | Ano ang Nagagawa Nito para sa Iyo |
+|-------------------|---------------|-----------------------------------|
 | **Description** | Mahalaga ang unang impresyon! | Malalaman agad ng mga tao kung ano ang ginagawa ng iyong proyekto |
 | **README** | Front page ng iyong proyekto | Parang friendly na tour guide para sa mga bagong bisita |
-| **Contributing Guidelines** | Ipinapakita na welcome ang tulong | Malalaman ng mga tao kung paano sila makakatulong |
-| **Code of Conduct** | Lumilikha ng friendly na espasyo | Lahat ay komportableng makilahok |
+| **Contributing Guidelines** | Ipinapakita na welcome ang tulong | Malalaman ng mga tao kung paano sila makakatulong sa iyo |
+| **Code of Conduct** | Lumilikha ng friendly na espasyo | Lahat ay makakaramdam ng welcome na makilahok |
 | **License** | Legal na kalinawan | Malalaman ng iba kung paano nila magagamit ang iyong code |
 | **Security Policy** | Ipinapakita na responsable ka | Nagpapakita ng propesyonal na praktis |
 
 > 💡 **Pro Tip**: Nagbibigay ang GitHub ng mga template para sa lahat ng mga file na ito. Kapag gumagawa ng bagong repository, i-check ang mga kahon para awtomatikong makabuo ng mga file na ito.
 
-**Mga Modernong Feature ng GitHub na Tuklasin:**
+**Mga Modernong Feature ng GitHub na Dapat Tuklasin:**
 
 🤖 **Automation & CI/CD:**
 - **GitHub Actions** para sa automated testing at deployment
-- **Dependabot** para sa awtomatikong pag-update ng dependency
+- **Dependabot** para sa automatic dependency updates
 
-💬 **Community & Project Management:**
+💬 **Komunidad at Pamamahala ng Proyekto:**
 - **GitHub Discussions** para sa mga pag-uusap ng komunidad na lampas sa mga isyu
-- **GitHub Projects** para sa kanban-style na project management
-- **Branch protection rules** para sa pagpapatupad ng mga pamantayan sa kalidad ng code
+- **GitHub Projects** para sa kanban-style na pamamahala ng proyekto
+- **Branch protection rules** para maipatupad ang mga pamantayan sa kalidad ng code
 
-Ang lahat ng mga resource na ito ay makakatulong sa onboarding ng mga bagong miyembro ng team. At ang mga ito ay karaniwang mga bagay na tinitingnan ng mga bagong contributor bago pa man tingnan ang iyong code, upang malaman kung ang iyong proyekto ay tamang lugar para sa kanila na maglaan ng oras.
+Ang lahat ng mga resource na ito ay makakatulong sa onboarding ng mga bagong miyembro ng team. At ito ang mga bagay na karaniwang tinitingnan ng mga bagong contributor bago pa man tingnan ang iyong code, upang malaman kung ang iyong proyekto ay tamang lugar para sa kanila na gugulin ang kanilang oras.
 
-✅ Ang mga README file, bagama't nangangailangan ng oras upang ihanda, ay madalas na napapabayaan ng mga abalang tagapangalaga. Makakakita ka ba ng halimbawa ng isang partikular na detalyado? Tandaan: may ilang [mga tool para tumulong gumawa ng magagandang README](https://www.makeareadme.com/) na maaaring gusto mong subukan.
+✅ Ang mga README files, bagama't nangangailangan ng oras para ihanda, ay madalas na napapabayaan ng mga abalang maintainer. Makakakita ka ba ng halimbawa ng isang partikular na detalyado? Tandaan: may ilang [tools para tumulong gumawa ng magagandang README](https://www.makeareadme.com/) na maaaring gusto mong subukan.
 
 ### Gawain: Mag-merge ng code
 
-Ang mga dokumento ng kontribusyon ay tumutulong sa mga tao na mag-ambag sa proyekto. Ipinapaliwanag nito kung anong mga uri ng kontribusyon ang hinahanap mo at kung paano gumagana ang proseso. Kailangang dumaan ang mga contributor sa isang serye ng mga hakbang upang makapag-ambag sa iyong repo sa GitHub:
+Ang mga contributing docs ay tumutulong sa mga tao na mag-contribute sa proyekto. Ipinapaliwanag nito kung anong uri ng mga kontribusyon ang hinahanap mo at kung paano gumagana ang proseso. Ang mga contributor ay kailangang dumaan sa isang serye ng mga hakbang upang makapag-contribute sa iyong repo sa GitHub:
 
-1. **Forking ng iyong repo** Malamang gusto mong ipa-_fork_ ang iyong proyekto sa mga tao. Ang pag-fork ay nangangahulugan ng paggawa ng kopya ng iyong repository sa kanilang GitHub profile.
-1. **Clone**. Mula doon, iko-clone nila ang proyekto sa kanilang lokal na makina.
-1. **Gumawa ng branch**. Gusto mong hilingin sa kanila na gumawa ng _branch_ para sa kanilang trabaho.
-1. **Mag-focus sa isang lugar**. Hilingin sa mga contributor na ituon ang kanilang mga kontribusyon sa isang bagay sa bawat pagkakataon - sa ganitong paraan mas mataas ang tsansa na ma-_merge_ ang kanilang trabaho. Isipin na nagsulat sila ng bug fix, nagdagdag ng bagong feature, at nag-update ng ilang test - paano kung gusto mo, o maaari mo lang ipatupad ang 2 sa 3, o 1 sa 3 pagbabago?
+1. **Forking your repo**. Malamang gusto mong ipa-_fork_ ang iyong proyekto sa mga tao. Ang forking ay nangangahulugan ng paggawa ng replica ng iyong repository sa kanilang GitHub profile.
+1. **Clone**. Mula doon, i-clone nila ang proyekto sa kanilang lokal na makina.
+1. **Create a branch**. Gusto mong hilingin sa kanila na gumawa ng _branch_ para sa kanilang trabaho.
+1. **Focus their change on one area**. Hilingin sa mga contributor na i-concentrate ang kanilang kontribusyon sa isang bagay sa bawat pagkakataon - sa ganitong paraan mas mataas ang tsansa na ma-_merge_ ang kanilang trabaho. Isipin na gumawa sila ng bug fix, nagdagdag ng bagong feature, at nag-update ng ilang tests - paano kung gusto mo, o maaari mo lang i-implement ang 2 sa 3, o 1 sa 3 pagbabago?
 
 ✅ Isipin ang isang sitwasyon kung saan ang mga branch ay partikular na mahalaga sa pagsusulat at pagpapadala ng magandang code. Anong mga use case ang naiisip mo?
 
-> Tandaan, maging ang pagbabago na nais mong makita sa mundo, at gumawa ng mga branch para sa sarili mong trabaho. Ang anumang mga commit na gagawin mo ay gagawin sa branch na kasalukuyan mong "naka-check out". Gamitin ang `git status` upang makita kung aling branch iyon.
+> Tandaan, maging ang pagbabago na gusto mong makita sa mundo, at gumawa ng mga branch para sa sarili mong trabaho. Ang anumang mga commit na gagawin mo ay gagawin sa branch na kasalukuyan mong "checked out". Gamitin ang `git status` para makita kung aling branch iyon.
 
-Balikan natin ang workflow ng isang contributor. Ipagpalagay na ang contributor ay naka-_fork_ at naka-_clone_ na ang repo kaya mayroon na silang Git repo na handa nang trabahuin sa kanilang lokal na makina:
+Dumaan tayo sa workflow ng isang contributor. Ipagpalagay na ang contributor ay naka-_fork_ at naka-_clone_ na ang repo kaya mayroon silang Git repo na handa nang trabahuin sa kanilang lokal na makina:
 
-1. **Gumawa ng branch**. Gamitin ang command na `git branch` upang gumawa ng branch na maglalaman ng mga pagbabagong nais nilang i-ambag:
+1. **Gumawa ng branch**. Gamitin ang command na `git branch` para gumawa ng branch na maglalaman ng mga pagbabagong nais nilang i-contribute:
 
    ```bash
    git branch [branch-name]
@@ -389,40 +474,40 @@ Balikan natin ang workflow ng isang contributor. Ipagpalagay na ang contributor
    git switch [branch-name]
    ```
 
-   > 💡 **Modernong Paalala**: Ang `git switch` ay modernong kapalit ng `git checkout` kapag nagpapalit ng branch. Mas malinaw at mas ligtas para sa mga baguhan.
+   > 💡 **Modernong Paalala**: Ang `git switch` ay ang modernong kapalit ng `git checkout` kapag nagbabago ng branch. Mas malinaw at mas ligtas para sa mga baguhan.
 
-1. **Gumawa ng trabaho**. Sa puntong ito, gusto mong idagdag ang iyong mga pagbabago. Huwag kalimutang ipaalam ito sa Git gamit ang mga sumusunod na command:
+1. **Gumawa ng trabaho**. Sa puntong ito gusto mong idagdag ang iyong mga pagbabago. Huwag kalimutang ipaalam ito sa Git gamit ang mga sumusunod na command:
 
    ```bash
    git add .
    git commit -m "my changes"
    ```
 
-   > ⚠️ **Kalidad ng Commit Message**: Siguraduhing magbigay ka ng magandang pangalan sa iyong commit, para sa iyong kapakanan at sa tagapangalaga ng repo na tinutulungan mo. Maging tiyak tungkol sa kung ano ang binago mo!
+   > ⚠️ **Kalidad ng Commit Message**: Siguraduhing magbigay ka ng magandang pangalan sa iyong commit, para sa iyong kapakanan at sa maintainer ng repo na tinutulungan mo. Maging specific sa kung ano ang binago mo!
 
-1. **Pagsamahin ang iyong trabaho sa `main` branch**. Sa isang punto, tapos ka na sa iyong trabaho at gusto mong pagsamahin ang iyong trabaho sa `main` branch. Ang `main` branch ay maaaring nagbago sa pagitan kaya siguraduhing i-update muna ito sa pinakabago gamit ang mga sumusunod na command:
+1. **Pagsamahin ang iyong trabaho sa `main` branch**. Sa isang punto tapos ka na sa trabaho at gusto mong pagsamahin ang iyong trabaho sa `main` branch. Ang `main` branch ay maaaring nagbago sa pagitan kaya siguraduhing i-update muna ito sa pinakabago gamit ang mga sumusunod na command:
 
    ```bash
    git switch main
    git pull
    ```
 
-   Sa puntong ito, gusto mong tiyakin na ang anumang _conflicts_, mga sitwasyon kung saan hindi madaling ma-_combine_ ng Git ang mga pagbabago, ay mangyayari sa iyong working branch. Kaya't patakbuhin ang mga sumusunod na command:
+   Sa puntong ito gusto mong tiyakin na ang anumang _conflicts_, mga sitwasyon kung saan hindi madaling ma-_combine_ ng Git ang mga pagbabago, ay mangyayari sa iyong working branch. Kaya't patakbuhin ang mga sumusunod na command:
 
    ```bash
    git switch [branch_name]
    git merge main
    ```
 
-   Ang `git merge main` command ay magdadala ng lahat ng mga pagbabago mula sa `main` papunta sa iyong branch. Sana ay magpatuloy ka na lang. Kung hindi, ipapakita sa iyo ng VS Code kung saan nalilito ang Git at babaguhin mo lang ang mga apektadong file upang sabihin kung aling nilalaman ang pinaka-tama.
+   Ang `git merge main` command ay magdadala ng lahat ng pagbabago mula sa `main` papunta sa iyong branch. Sana ay maaari kang magpatuloy. Kung hindi, ipapakita sa iyo ng VS Code kung saan nalilito ang Git at babaguhin mo lang ang mga apektadong file upang sabihin kung aling content ang pinaka-tama.
 
-   💡 **Modernong Alternatibo**: Isaalang-alang ang paggamit ng `git rebase` para sa mas malinis na history:
+   💡 **Modernong alternatibo**: Isaalang-alang ang paggamit ng `git rebase` para sa mas malinis na history:
    ```bash
    git rebase main
    ```
    Ire-replay nito ang iyong mga commit sa ibabaw ng pinakabagong main branch, na lumilikha ng linear na history.
 
-1. **Ipadala ang iyong trabaho sa GitHub**. Ang pagpapadala ng iyong trabaho sa GitHub ay nangangahulugan ng dalawang bagay. Ang pag-push ng iyong branch sa iyong repo at pagkatapos ay magbukas ng PR, Pull Request.
+1. **I-upload ang iyong trabaho sa GitHub**. Ang pag-upload ng iyong trabaho sa GitHub ay nangangahulugan ng dalawang bagay. Ang pag-push ng iyong branch sa iyong repo at pagkatapos ay magbukas ng PR, Pull Request.
 
    ```bash
    git push --set-upstream origin [branch-name]
@@ -430,58 +515,104 @@ Balikan natin ang workflow ng isang contributor. Ipagpalagay na ang contributor
 
    Ang command sa itaas ay lumilikha ng branch sa iyong forked repo.
 
-1. **Magbukas ng PR**. Susunod, gusto mong magbukas ng PR. Gawin mo ito sa pamamagitan ng pagpunta sa forked repo sa GitHub. Makikita mo ang isang indikasyon sa GitHub kung saan tinatanong kung gusto mong gumawa ng bagong PR, i-click mo iyon at dadalhin ka sa isang interface kung saan maaari mong baguhin ang commit message title, magbigay ng mas angkop na deskripsyon. Ngayon makikita ng tagapangalaga ng repo na na-fork mo ang PR na ito at _fingers crossed_ maa-appreciate nila at ma-_merge_ ang iyong PR. Isa ka nang contributor, yay :)
+### 🤝 **Pag-check ng Kasanayan sa Pakikipagtulungan: Handa Ka Na Bang Makipagtulungan?**
+
+**Tingnan natin kung ano ang pakiramdam mo tungkol sa pakikipagtulungan:**
+- Naiintindihan mo na ba ang ideya ng forking at pull requests?
+- Ano ang isang bagay tungkol sa paggamit ng mga branch na gusto mong mas pag-aralan?
+- Gaano ka komportable sa pag-contribute sa proyekto ng ibang tao?
+
+```mermaid
+mindmap
+  root((Git Collaboration))
+    Branching
+      Feature branches
+      Bug fix branches
+      Experimental work
+    Pull Requests
+      Code review
+      Discussion
+      Testing
+    Best Practices
+      Clear commit messages
+      Small focused changes
+      Good documentation
+```
+
+> **Pampalakas ng loob**: Ang bawat developer na hinahangaan mo ay minsang kinakabahan sa kanilang unang pull request. Ang komunidad ng GitHub ay sobrang welcoming sa mga baguhan!
 
-   💡 **Modernong Tip**: Maaari ka ring gumawa ng PR gamit ang GitHub CLI:
+1. **Magbukas ng PR**. Susunod, gusto mong magbukas ng PR. Gawin mo ito sa pamamagitan ng pag-navigate sa forked repo sa GitHub. Makikita mo ang indikasyon sa GitHub kung saan tinatanong kung gusto mong gumawa ng bagong PR, i-click mo iyon at dadalhin ka sa interface kung saan maaari mong baguhin ang commit message title, magbigay ng mas angkop na deskripsyon. Ngayon makikita ng maintainer ng repo na na-fork mo ang PR na ito at _fingers crossed_ maa-appreciate nila at _merge_ ang iyong PR. Isa ka nang contributor, yay :)
+
+💡 **Modernong tip**: Maaari ka ring gumawa ng PR gamit ang GitHub CLI:
    ```bash
    gh pr create --title "Your PR title" --body "Description of changes"
    ```
 
-   🔧 **Mga Best Practices para sa PRs**:
-   - I-link ang mga kaugnay na isyu gamit ang mga keyword tulad ng "Fixes #123"
-   - Magdagdag ng screenshots para sa mga pagbabago sa UI
-   - Mag-request ng partikular na mga reviewer
-   - Gumamit ng draft PRs para sa work-in-progress
-   - Siguraduhing pumasa ang lahat ng mga CI check bago mag-request ng review
-
-1. **Linisin ang mga natapos na trabaho**. Itinuturing na magandang praktis ang _clean up_ pagkatapos mong matagumpay na ma-merge ang isang PR. Gusto mong linisin ang parehong iyong lokal na branch at ang branch na na-push mo sa GitHub. Una, tanggalin ito sa lokal gamit ang sumusunod na command:
+🔧 **Pinakamahusay na praktis para sa PRs**:
+- I-link ang mga kaugnay na isyu gamit ang mga keyword tulad ng "Fixes #123".
+- Magdagdag ng screenshots para sa mga pagbabago sa UI.
+- Mag-request ng specific na reviewers.
+- Gumamit ng draft PRs para sa work-in-progress.
+- Siguraduhing pumasa ang lahat ng CI checks bago mag-request ng review.
+1. **Linisin**. Itinuturing na magandang kasanayan ang _linisin_ pagkatapos mong matagumpay na ma-merge ang isang PR. Gusto mong linisin ang parehong lokal na branch mo at ang branch na na-push mo sa GitHub. Una, tanggalin ito sa lokal gamit ang sumusunod na utos:
 
    ```bash
    git branch -d [branch-name]
    ```
 
-   Siguraduhing pumunta sa GitHub page para sa forked repo at tanggalin ang remote branch na na-push mo dito.
+   Siguraduhing pumunta ka sa pahina ng GitHub para sa forked na repo at alisin ang remote branch na na-push mo dito.
 
-Ang `Pull request` ay tila isang nakakatawang termino dahil talagang gusto mong i-push ang iyong mga pagbabago sa proyekto. Pero ang tagapangalaga (project owner) o core team ay kailangang isaalang-alang ang iyong mga pagbabago bago ito i-merge sa "main" branch ng proyekto, kaya talagang humihiling ka ng desisyon sa pagbabago mula sa tagapangalaga.
+Ang `Pull request` ay tila nakakatawang termino dahil ang totoo ay gusto mong i-push ang mga pagbabago mo sa proyekto. Ngunit ang maintainer (may-ari ng proyekto) o core team ay kailangang isaalang-alang ang mga pagbabago mo bago ito i-merge sa "main" branch ng proyekto, kaya't talagang humihiling ka ng desisyon sa pagbabago mula sa maintainer.
 
-Ang pull request ay lugar para ikumpara at talakayin ang mga pagkakaiba na ipinakilala sa isang branch gamit ang mga review, komento, integrated tests, at iba pa. Ang isang mahusay na pull request ay sumusunod sa halos parehong mga patakaran tulad ng isang commit message. Maaari kang magdagdag ng reference sa isang isyu sa issue tracker, kapag ang iyong trabaho halimbawa ay nag-aayos ng isang isyu. Ginagawa ito gamit ang `#` na sinusundan ng numero ng iyong isyu. Halimbawa `#97`.
-🤞Sana lahat ng pagsusuri ay pumasa at i-merge ng mga may-ari ng proyekto ang iyong mga pagbabago sa proyekto🤞
+Ang pull request ay lugar para ikumpara at talakayin ang mga pagkakaiba na ipinakilala sa isang branch gamit ang mga review, komento, integrated tests, at iba pa. Ang isang mahusay na pull request ay sumusunod sa halos parehong mga patakaran tulad ng isang commit message. Maaari kang magdagdag ng reference sa isang isyu sa issue tracker, halimbawa kung ang trabaho mo ay nag-aayos ng isang isyu. Ginagawa ito gamit ang `#` na sinusundan ng numero ng isyu mo. Halimbawa, `#97`.
 
-I-update ang iyong kasalukuyang lokal na working branch gamit ang lahat ng bagong commit mula sa kaukulang remote branch sa GitHub:
+🤞Sana lahat ng checks ay pumasa at i-merge ng may-ari ng proyekto ang mga pagbabago mo sa proyekto🤞
+
+I-update ang kasalukuyang lokal na working branch mo gamit ang lahat ng bagong commits mula sa kaukulang remote branch sa GitHub:
 
 `git pull`
 
 ## Pag-aambag sa Open Source (Ang Iyong Pagkakataon na Magkaroon ng Epekto!)
 
-Handa ka na ba sa isang bagay na tiyak na magpapamangha sa'yo? 🤯 Pag-usapan natin ang pag-aambag sa mga open source na proyekto – nakakakilabot lang ang ideya na ibahagi ito sa'yo!
-
-Ito ang iyong pagkakataon na maging bahagi ng isang bagay na talagang kahanga-hanga. Isipin mong mapabuti ang mga tools na ginagamit ng milyun-milyong developer araw-araw, o maayos ang isang bug sa isang app na mahal ng mga kaibigan mo. Hindi lang ito pangarap – ito ang essence ng pag-aambag sa open source!
-
-Ito ang nagbibigay sa akin ng kilabot tuwing iniisip ko ito: bawat tool na natutunan mo – ang code editor mo, ang mga framework na pag-aaralan natin, kahit ang browser na binabasa mo ngayon – nagsimula sa isang tao na katulad mo na gumawa ng kanilang unang kontribusyon. Ang magaling na developer na gumawa ng paborito mong VS Code extension? Dati rin siyang baguhan na nanginginig ang kamay habang nagki-click ng "create pull request," tulad ng gagawin mo.
-
-At ito ang pinakamagandang bahagi: ang open source na komunidad ay parang pinakamalaking group hug sa internet. Karamihan sa mga proyekto ay aktibong naghahanap ng mga baguhan at may mga isyung may tag na "good first issue" na partikular para sa mga tulad mo! Ang mga maintainer ay talagang nasasabik kapag nakikita nila ang mga bagong contributor dahil naaalala nila ang kanilang sariling unang hakbang.
+Handa ka na ba para sa isang bagay na magpapamangha sa iyo? 🤯 Pag-usapan natin ang pag-aambag sa mga open source na proyekto – at kinikilabutan ako sa tuwing iniisip kong ibahagi ito sa iyo!
+
+Ito ang pagkakataon mo na maging bahagi ng isang bagay na tunay na kahanga-hanga. Isipin mong pinapabuti ang mga tool na ginagamit ng milyon-milyong mga developer araw-araw, o inaayos ang isang bug sa isang app na mahal ng mga kaibigan mo. Hindi lang ito pangarap – ito ang tungkol sa pag-aambag sa open source!
+
+Narito ang nagbibigay sa akin ng kilabot tuwing iniisip ko ito: bawat tool na natutunan mo – ang code editor mo, ang mga framework na pag-aaralan natin, kahit ang browser na binabasa mo ito – nagsimula sa isang tao na katulad mo na gumagawa ng kanilang unang kontribusyon. Ang magaling na developer na gumawa ng paborito mong VS Code extension? Sila rin ay minsang baguhan na nagki-click ng "create pull request" na nanginginig ang mga kamay, tulad ng gagawin mo.
+
+At narito ang pinakamagandang bahagi: ang open source na komunidad ay parang pinakamalaking group hug ng internet. Karamihan sa mga proyekto ay aktibong naghahanap ng mga baguhan at may mga isyung may tag na "good first issue" na partikular para sa mga tulad mo! Ang mga maintainer ay talagang nasasabik kapag nakikita nila ang mga bagong contributor dahil naaalala nila ang kanilang sariling unang hakbang.
+
+```mermaid
+flowchart TD
+    A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
+    B --> C[📖 Read Contributing Guidelines]
+    C --> D[🍴 Fork Repository]
+    D --> E[💻 Set Up Local Environment]
+    E --> F[🌿 Create Feature Branch]
+    F --> G[✨ Make Your Contribution]
+    G --> H[🧪 Test Your Changes]
+    H --> I[📝 Write Clear Commit]
+    I --> J[📤 Push & Create PR]
+    J --> K[💬 Engage with Feedback]
+    K --> L[🎉 Merged! You're a Contributor!]
+    L --> M[🌟 Find Next Issue]
+    
+    style A fill:#e1f5fe
+    style L fill:#c8e6c9
+    style M fill:#fff59d
+```
 
-Hindi ka lang natututo mag-code dito – naghahanda ka na sumali sa isang pandaigdigang pamilya ng mga tagabuo na araw-araw iniisip "Paano natin mapapabuti ang digital na mundo?" Maligayang pagdating sa club! 🌟
+Hindi ka lang natututo ng coding dito – naghahanda ka para sumali sa isang pandaigdigang pamilya ng mga tagabuo na gumigising araw-araw na iniisip "Paano natin mapapabuti ang digital na mundo?" Maligayang pagdating sa club! 🌟
 
-Una, maghanap tayo ng repository (o **repo**) sa GitHub na interesado ka at kung saan gusto mong mag-ambag ng pagbabago. Kakailanganin mong kopyahin ang mga nilalaman nito sa iyong makina.
+Una, maghanap tayo ng repository (o **repo**) sa GitHub na interesado ka at kung saan gusto mong mag-ambag ng pagbabago. Gusto mong kopyahin ang nilalaman nito sa iyong makina.
 
 ✅ Isang magandang paraan para makahanap ng 'beginner-friendly' na mga repo ay ang [maghanap gamit ang tag na 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
 
 ![Kopyahin ang repo sa lokal](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.tl.png)
 
-Maraming paraan para kopyahin ang code. Isa sa mga paraan ay ang "clone" ng mga nilalaman ng repository, gamit ang HTTPS, SSH, o ang GitHub CLI (Command Line Interface).
+May ilang paraan para kopyahin ang code. Isa sa mga paraan ay ang "clone" ng nilalaman ng repository, gamit ang HTTPS, SSH, o gamit ang GitHub CLI (Command Line Interface).
 
-Buksan ang iyong terminal at i-clone ang repository tulad nito:
+Buksan ang terminal mo at i-clone ang repository tulad nito:
 ```bash
 # Using HTTPS
 git clone https://github.com/ProjectURL
@@ -497,20 +628,20 @@ Para magtrabaho sa proyekto, lumipat sa tamang folder:
 `cd ProjectURL`
 
 Maaari mo ring buksan ang buong proyekto gamit ang:
-- **[GitHub Codespaces](https://github.com/features/codespaces)** - Cloud development environment ng GitHub gamit ang VS Code sa browser
-- **[GitHub Desktop](https://desktop.github.com/)** - Isang GUI application para sa mga operasyon ng Git  
+- **[GitHub Codespaces](https://github.com/features/codespaces)** - Cloud development environment ng GitHub na may VS Code sa browser
+- **[GitHub Desktop](https://desktop.github.com/)** - GUI application para sa mga operasyon ng Git  
 - **[GitHub.dev](https://github.dev)** - Pindutin ang `.` key sa anumang GitHub repo para buksan ang VS Code sa browser
-- **VS Code** gamit ang GitHub Pull Requests extension
+- **VS Code** na may GitHub Pull Requests extension
 
 Sa huli, maaari mong i-download ang code sa isang zipped folder.
 
 ### Ilang mga kawili-wiling bagay tungkol sa GitHub
 
-Maaari kang mag-star, mag-watch, at/o "fork" ng anumang pampublikong repository sa GitHub. Makikita mo ang iyong mga starred repositories sa drop-down menu sa kanang itaas. Parang bookmarking, pero para sa code.
+Maaari kang mag-star, mag-watch, at/o "fork" ng anumang pampublikong repository sa GitHub. Makikita mo ang mga starred repositories mo sa drop-down menu sa kanang itaas. Parang bookmarking, pero para sa code.
 
-Ang mga proyekto ay may issue tracker, kadalasan sa GitHub sa "Issues" tab maliban kung may ibang indikasyon, kung saan pinag-uusapan ng mga tao ang mga isyu na may kaugnayan sa proyekto. At ang Pull Requests tab ay kung saan pinag-uusapan at nire-review ang mga pagbabago na nasa proseso.
+Ang mga proyekto ay may issue tracker, kadalasan sa GitHub sa "Issues" tab maliban kung may ibang indikasyon, kung saan tinatalakay ng mga tao ang mga isyu na may kaugnayan sa proyekto. At ang Pull Requests tab ay kung saan tinatalakay at nire-review ang mga pagbabago na nasa proseso.
 
-Ang mga proyekto ay maaaring may diskusyon sa mga forum, mailing lists, o chat channels tulad ng Slack, Discord, o IRC.
+Ang mga proyekto ay maaaring may diskusyon sa mga forum, mailing lists, o chat channels tulad ng Slack, Discord o IRC.
 
 🔧 **Mga modernong tampok ng GitHub**:
 - **GitHub Discussions** - Built-in forum para sa mga pag-uusap ng komunidad
@@ -518,70 +649,130 @@ Ang mga proyekto ay maaaring may diskusyon sa mga forum, mailing lists, o chat c
 - **Security tab** - Mga ulat ng kahinaan at mga security advisories
 - **Actions tab** - Tingnan ang mga automated workflows at CI/CD pipelines
 - **Insights tab** - Analytics tungkol sa mga contributor, commits, at kalusugan ng proyekto
-- **Projects tab** - Mga built-in na tools ng GitHub para sa project management
+- **Projects tab** - Built-in na mga tool sa pamamahala ng proyekto ng GitHub
 
-✅ Maglibot sa iyong bagong GitHub repo at subukan ang ilang bagay, tulad ng pag-edit ng mga setting, pagdaragdag ng impormasyon sa iyong repo, paggawa ng proyekto (tulad ng Kanban board), at pag-set up ng GitHub Actions para sa automation. Maraming magagawa!
+✅ Tingnan ang paligid ng bagong GitHub repo mo at subukan ang ilang bagay, tulad ng pag-edit ng mga setting, pagdaragdag ng impormasyon sa repo mo, paggawa ng proyekto (tulad ng Kanban board), at pag-set up ng GitHub Actions para sa automation. Maraming magagawa!
 
 ---
 
 ## 🚀 Hamon
 
-Alright, oras na para subukan ang iyong bagong mga superpowers sa GitHub! 🚀 Narito ang isang hamon na magpapaklik sa lahat sa pinaka-satisfying na paraan:
+Alright, oras na para subukan ang bago mong mga superpower sa GitHub! 🚀 Narito ang isang hamon na magpapaklik sa lahat ng natutunan mo sa pinaka-satisfying na paraan:
 
-Kumuha ng kaibigan (o ang kapamilya mong laging nagtatanong kung ano ang ginagawa mo sa "computer stuff" na ito) at magsimula ng isang collaborative coding adventure nang magkasama! Dito nangyayari ang tunay na magic – gumawa ng proyekto, hayaan silang i-fork ito, gumawa ng ilang branches, at i-merge ang mga pagbabago tulad ng mga propesyonal na nagiging ikaw.
+Kumuha ng kaibigan (o miyembro ng pamilya na laging nagtatanong kung ano ang ginagawa mo sa "computer stuff" na ito) at magsimula ng isang collaborative coding adventure nang magkasama! Dito nangyayari ang tunay na mahika – gumawa ng proyekto, hayaan silang i-fork ito, gumawa ng ilang branches, at i-merge ang mga pagbabago tulad ng mga propesyonal na nagiging ikaw.
 
-Hindi ko itatago – malamang na tatawa kayo sa isang punto (lalo na kapag pareho kayong nag-try na baguhin ang parehong linya), maaaring magkamot ng ulo sa pagkalito, pero tiyak na magkakaroon kayo ng mga kamangha-manghang "aha!" moments na magpapahalaga sa lahat ng natutunan. Dagdag pa, may kakaibang saya sa pagbabahagi ng unang matagumpay na merge sa iba – parang maliit na selebrasyon ng kung gaano kalayo na ang narating mo!
+Hindi ko itatago – malamang tatawa kayo sa isang punto (lalo na kapag pareho kayong nag-try na baguhin ang parehong linya), maaaring magkamot ng ulo sa pagkalito, ngunit tiyak na magkakaroon kayo ng mga kamangha-manghang "aha!" na sandali na nagpapahalaga sa lahat ng pag-aaral. Dagdag pa, may espesyal na bagay tungkol sa pagbabahagi ng unang matagumpay na merge sa iba – parang maliit na selebrasyon ng kung gaano kalayo na ang narating mo!
 
-Wala ka pang coding buddy? Walang problema! Ang komunidad ng GitHub ay puno ng mga tao na sobrang welcoming at naaalala kung paano maging baguhan. Maghanap ng mga repository na may label na "good first issue" – para bang sinasabi nila "Hey beginners, tara mag-aral tayo!" Ang galing, di ba?
+Wala pang coding buddy? Walang problema! Ang komunidad ng GitHub ay puno ng mga tao na sobrang welcoming at naaalala kung paano maging bago. Maghanap ng mga repository na may "good first issue" labels – parang sinasabi nila "Hey beginners, come learn with us!" Gaano ito kaganda?
 
 ## Post-Lecture Quiz
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/)
 
-## Review & Patuloy na Matuto
+## Review & Patuloy na Pag-aaral
 
-Whew! 🎉 Tingnan mo – na-master mo na ang mga basics ng GitHub na parang isang tunay na champion! Kung pakiramdam mo ay puno na ang utak mo ngayon, normal lang 'yan at sa totoo lang, magandang senyales. Natutunan mo ang mga tools na inabot ako ng ilang linggo para maging komportable noong nagsimula ako.
+Whew! 🎉 Tingnan mo – na-master mo ang mga basics ng GitHub tulad ng isang tunay na champion! Kung pakiramdam mo ay medyo puno ang utak mo ngayon, normal lang iyon at sa totoo lang, magandang senyales. Natutunan mo ang mga tool na inabot ako ng ilang linggo para maging komportable.
 
-Ang Git at GitHub ay sobrang makapangyarihan (tulad ng, sobrang makapangyarihan), at bawat developer na kilala ko – kabilang ang mga mukhang wizard na ngayon – ay kailangang magpraktis at magkamali bago nila lubos na maunawaan. Ang katotohanan na natapos mo ang lesson na ito ay nangangahulugang nasa tamang landas ka na para ma-master ang ilan sa pinakamahalagang tools sa toolkit ng isang developer.
+Ang Git at GitHub ay sobrang makapangyarihan (seryoso, makapangyarihan), at bawat developer na kilala ko – kabilang ang mga mukhang wizard ngayon – ay kailangang magpraktis at magkamali bago ito tuluyang maunawaan. Ang katotohanan na natapos mo ang araling ito ay nangangahulugang nasa daan ka na para ma-master ang ilan sa pinakamahalagang tool sa toolkit ng isang developer.
 
-Narito ang ilang napakagandang resources para matulungan kang magpraktis at maging mas magaling pa:
+Narito ang ilang kamangha-manghang resources para tulungan kang magpraktis at maging mas kahanga-hanga pa:
 
-- [Contributing to open source software guide](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Ang iyong roadmap para gumawa ng pagbabago
-- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Laging handy para sa mabilisang reference!
+- [Contributing to open source software guide](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Ang roadmap mo para gumawa ng pagbabago
+- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Panatilihin ito para sa mabilisang reference!
 
-At tandaan: ang practice ay nagdudulot ng progreso, hindi perpeksyon! Habang mas ginagamit mo ang Git at GitHub, mas nagiging natural ito. Ang GitHub ay lumikha ng ilang kamangha-manghang interactive courses na magpapahintulot sa'yo na magpraktis sa isang ligtas na kapaligiran:
+At tandaan: ang praktis ay nagdudulot ng progreso, hindi perpeksyon! Habang mas ginagamit mo ang Git at GitHub, mas nagiging natural ito. Ang GitHub ay gumawa ng ilang kamangha-manghang interactive courses na nagpapahintulot sa iyo na magpraktis sa isang ligtas na kapaligiran:
 
 - [Introduction to GitHub](https://github.com/skills/introduction-to-github)
 - [Communicate using Markdown](https://github.com/skills/communicate-using-markdown)  
 - [GitHub Pages](https://github.com/skills/github-pages)
 - [Managing merge conflicts](https://github.com/skills/resolve-merge-conflicts)
 
-**Gusto mo bang mag-explore pa? Subukan ang mga modernong tools na ito:**
-- [GitHub CLI documentation](https://cli.github.com/manual/) – Para maramdaman mong isa kang command-line wizard
+**Pakiramdam mo ba handa ka na para sa mas matitinding hamon? Tingnan ang mga modernong tool na ito:**
+- [GitHub CLI documentation](https://cli.github.com/manual/) – Para sa mga gustong maging wizard sa command-line
 - [GitHub Codespaces documentation](https://docs.github.com/en/codespaces) – Mag-code sa cloud!
 - [GitHub Actions documentation](https://docs.github.com/en/actions) – I-automate ang lahat ng bagay
-- [Git best practices](https://www.atlassian.com/git/tutorials/comparing-workflows) – I-level up ang iyong workflow game 
+- [Git best practices](https://www.atlassian.com/git/tutorials/comparing-workflows) – I-level up ang workflow mo
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
 Gamitin ang Agent mode para tapusin ang sumusunod na hamon:
 
-**Deskripsyon:** Gumawa ng collaborative web development project na nagpapakita ng kumpletong GitHub workflow na natutunan mo sa lesson na ito. Ang hamon na ito ay makakatulong sa'yo na magpraktis ng repository creation, collaboration features, at modern Git workflows sa isang real-world na sitwasyon.
+**Deskripsyon:** Gumawa ng collaborative web development project na nagpapakita ng kumpletong GitHub workflow na natutunan mo sa araling ito. Ang hamon na ito ay tutulong sa iyo na magpraktis ng repository creation, collaboration features, at modern Git workflows sa isang real-world na senaryo.
 
-**Prompt:** Gumawa ng bagong pampublikong GitHub repository para sa isang simpleng "Web Development Resources" na proyekto. Ang repository ay dapat may maayos na naka-structure na README.md file na naglilista ng mga kapaki-pakinabang na web development tools at resources, na naka-organize ayon sa kategorya (HTML, CSS, JavaScript, etc.). I-set up ang repository na may tamang community standards kabilang ang isang lisensya, contributing guidelines, at code of conduct. Gumawa ng hindi bababa sa dalawang feature branches: isa para sa pagdaragdag ng CSS resources at isa para sa JavaScript resources. Gumawa ng mga commit sa bawat branch na may mga descriptive commit messages, pagkatapos ay gumawa ng mga pull requests para i-merge ang mga pagbabago pabalik sa main. I-enable ang mga tampok ng GitHub tulad ng Issues, Discussions, at mag-set up ng basic na GitHub Actions workflow para sa automated checks.
+**Prompt:** Gumawa ng bagong pampublikong GitHub repository para sa isang simpleng proyekto na "Web Development Resources". Ang repository ay dapat maglaman ng maayos na naka-istrukturang README.md file na naglilista ng mga kapaki-pakinabang na web development tools at resources, na nakaayos ayon sa mga kategorya (HTML, CSS, JavaScript, atbp.). I-set up ang repository na may tamang community standards kabilang ang isang lisensya, mga patnubay sa pag-aambag, at isang code of conduct. Gumawa ng hindi bababa sa dalawang feature branches: isa para sa pagdaragdag ng mga CSS resources at isa pa para sa mga JavaScript resources. Gumawa ng mga commits sa bawat branch na may mga deskriptibong commit messages, pagkatapos ay gumawa ng mga pull requests para i-merge ang mga pagbabago pabalik sa main. I-enable ang mga tampok ng GitHub tulad ng Issues, Discussions, at mag-set up ng basic na GitHub Actions workflow para sa automated checks.
 
-## Assignment 
+## Takdang-Aralin
 
-Ang iyong misyon, kung pipiliin mong tanggapin ito: Tapusin ang [Introduction to GitHub](https://github.com/skills/introduction-to-github) course sa GitHub Skills. Ang interactive na course na ito ay magpapahintulot sa'yo na magpraktis ng lahat ng natutunan mo sa isang ligtas, guided na kapaligiran. Dagdag pa, makakakuha ka ng cool na badge kapag natapos mo ito! 🏅
+Ang misyon mo, kung pipiliin mong tanggapin ito: Tapusin ang [Introduction to GitHub](https://github.com/skills/introduction-to-github) course sa GitHub Skills. Ang interactive na kursong ito ay magpapahintulot sa iyo na magpraktis ng lahat ng natutunan mo sa isang ligtas, guided na kapaligiran. Dagdag pa, makakakuha ka ng cool na badge kapag natapos mo ito! 🏅
 
-**Handa ka na ba para sa mas maraming hamon?**
-- I-set up ang SSH authentication para sa iyong GitHub account (wala nang password!)
-- Subukan ang paggamit ng GitHub CLI para sa iyong pang-araw-araw na Git operations
+**Pakiramdam mo ba handa ka na para sa mas matitinding hamon?**
+- I-set up ang SSH authentication para sa GitHub account mo (wala nang passwords!)
+- Subukan ang paggamit ng GitHub CLI para sa pang-araw-araw na Git operations
 - Gumawa ng repository na may GitHub Actions workflow
-- I-explore ang GitHub Codespaces sa pamamagitan ng pagbukas ng mismong repository na ito sa isang cloud-based editor
+- I-explore ang GitHub Codespaces sa pamamagitan ng pagbukas ng repository na ito sa isang cloud-based editor
+
+---
+
+## 🚀 Timeline ng Iyong GitHub Mastery
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] I-star ang repository na ito at 3 pang ibang proyekto na interesado ka
+- [ ] I-set up ang two-factor authentication sa GitHub account mo
+- [ ] Gumawa ng simpleng README para sa unang repository mo
+- [ ] I-follow ang 5 developer na nagbibigay inspirasyon sa iyo
+
+### 🎯 **Ano ang Maaaring Makamit Mo sa Loob ng Isang Oras**
+- [ ] Tapusin ang post-lesson quiz at pagnilayan ang GitHub journey mo
+- [ ] I-set up ang SSH keys para sa password-free na GitHub authentication
+- [ ] Gumawa ng unang meaningful commit na may mahusay na commit message
+- [ ] I-explore ang "Explore" tab ng GitHub para matuklasan ang trending projects
+- [ ] Magpraktis ng pag-fork ng repository at paggawa ng maliit na pagbabago
+
+### 📅 **Ang Iyong Lingguhang GitHub Adventure**
+- [ ] Tapusin ang GitHub Skills courses (Introduction to GitHub, Markdown)
+- [ ] Gumawa ng unang pull request sa isang open source na proyekto
+- [ ] I-set up ang GitHub Pages site para ipakita ang mga gawa mo
+- [ ] Sumali sa GitHub Discussions sa mga proyektong interesado ka
+- [ ] Gumawa ng repository na may tamang community standards (README, License, atbp.)
+- [ ] Subukan ang GitHub Codespaces para sa cloud-based development
+
+### 🌟 **Ang Iyong Buwanang Transformasyon**
+- [ ] Mag-ambag sa 3 iba't ibang open source na proyekto
+- [ ] Mag-mentor ng isang bagong user sa GitHub (ibahagi ang kaalaman!)
+- [ ] I-set up ang automated workflows gamit ang GitHub Actions
+- [ ] Gumawa ng portfolio na nagpapakita ng mga kontribusyon mo sa GitHub
+- [ ] Sumali sa Hacktoberfest o katulad na mga community events
+- [ ] Maging maintainer ng sarili mong proyekto na inaambagan ng iba
+
+### 🎓 **Huling Pagsusuri sa Iyong GitHub Mastery**
+
+**I-celebrate kung gaano kalayo na ang narating mo:**
+- Ano ang paborito mong bagay tungkol sa paggamit ng GitHub?
+- Aling tampok ng collaboration ang pinaka-nakakapukaw sa iyo?
+- Gaano ka na ka-kumpiyansa sa pag-aambag sa open source ngayon?
+- Ano ang unang proyekto na gusto mong ambagan?
+
+```mermaid
+journey
+    title Your GitHub Confidence Journey
+    section Today
+      Nervous: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Contributing: 5: You
+      Connecting: 5: You
+    section Next Month
+      Collaborating: 5: You
+      Leading: 5: You
+      Inspiring Others: 5: You
+```
+
+> 🌍 **Maligayang pagdating sa pandaigdigang komunidad ng mga developer!** Ngayon ay mayroon ka nang mga tool para makipagtulungan sa milyon-milyong mga developer sa buong mundo. Ang unang kontribusyon mo ay maaaring mukhang maliit, ngunit tandaan - bawat malaking open source na proyekto ay nagsimula sa isang tao na gumagawa ng kanilang unang commit. Ang tanong ay hindi kung magkakaroon ka ng epekto, kundi kung anong kamangha-manghang proyekto ang unang makikinabang sa natatanging pananaw mo! 🚀
 
-Tandaan: bawat eksperto ay minsang naging baguhan. Kaya mo 'to! 💪
+Tandaan: bawat eksperto ay minsang baguhan. Kaya mo 'to! 💪
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/1-getting-started-lessons/3-accessibility/README.md b/translations/tl/1-getting-started-lessons/3-accessibility/README.md
index 61ae1a15f2..08f56a3524 100644
--- a/translations/tl/1-getting-started-lessons/3-accessibility/README.md
+++ b/translations/tl/1-getting-started-lessons/3-accessibility/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90b19cde5b79b29e91babd3138cd8035",
-  "translation_date": "2025-10-22T15:22:26+00:00",
+  "original_hash": "7f2c48e04754724123ea100a822765e5",
+  "translation_date": "2025-11-03T13:49:27+00:00",
   "source_file": "1-getting-started-lessons/3-accessibility/README.md",
   "language_code": "tl"
 }
@@ -12,6 +12,23 @@ CO_OP_TRANSLATOR_METADATA:
 ![Lahat Tungkol sa Accessibility](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.tl.png)
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your Accessibility Learning Adventure
+    section Foundation
+      Understanding Users: 5: You
+      Testing Tools: 4: You
+      POUR Principles: 5: You
+    section Build Skills
+      Semantic HTML: 4: You
+      Visual Design: 5: You
+      ARIA Techniques: 4: You
+    section Master Practice
+      Keyboard Navigation: 5: You
+      Form Accessibility: 4: You
+      Real-world Testing: 5: You
+```
+
 ## Pre-Lecture Quiz
 [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/)
 
@@ -19,40 +36,65 @@ CO_OP_TRANSLATOR_METADATA:
 >
 > \- Sir Timothy Berners-Lee, Direktor ng W3C at imbentor ng World Wide Web
 
-Narito ang isang bagay na maaaring magulat ka: kapag gumagawa ka ng mga accessible na website, hindi mo lang tinutulungan ang mga taong may kapansanan—ginagawa mo rin ang web na mas mahusay para sa lahat!
+Narito ang isang bagay na maaaring ikagulat mo: kapag gumagawa ka ng mga accessible na website, hindi mo lang tinutulungan ang mga taong may kapansanan—ginagawa mo rin ang web na mas mahusay para sa lahat!
 
-Napansin mo ba ang mga curb cuts sa mga kanto ng kalye? Orihinal na idinisenyo ang mga ito para sa mga wheelchair, ngunit ngayon nakakatulong ito sa mga taong may stroller, mga delivery worker na may dolly, mga manlalakbay na may rolling luggage, at mga siklista rin. Ganyan ang gumagana ang accessible na disenyo ng web—ang mga solusyon na tumutulong sa isang grupo ay kadalasang nagiging kapaki-pakinabang para sa lahat. Ang galing, di ba?
+Napansin mo ba ang mga curb cuts sa mga kanto ng kalye? Orihinal na idinisenyo ang mga ito para sa mga wheelchair, ngunit ngayon nakakatulong din ito sa mga taong may stroller, mga delivery worker na may dolly, mga manlalakbay na may rolling luggage, at mga siklista. Ganyan din ang paraan ng accessible na disenyo ng web—ang mga solusyon na tumutulong sa isang grupo ay kadalasang nakikinabang sa lahat. Ang astig, di ba?
 
-Sa araling ito, tatalakayin natin kung paano gumawa ng mga website na talagang gumagana para sa lahat, anuman ang paraan nila ng pag-browse sa web. Matutuklasan mo ang mga praktikal na teknik na nakapaloob na sa mga pamantayan ng web, magkakaroon ng hands-on na karanasan sa mga testing tools, at makikita kung paano ginagawang mas magagamit ng accessibility ang iyong mga site para sa lahat ng user.
+Sa araling ito, tatalakayin natin kung paano gumawa ng mga website na talagang gumagana para sa lahat, anuman ang paraan nila ng pag-browse sa web. Matutuklasan mo ang mga praktikal na teknik na nakapaloob na sa mga pamantayan ng web, magkakaroon ng hands-on na karanasan sa mga testing tools, at makikita kung paano pinapahusay ng accessibility ang usability ng iyong mga site para sa lahat ng user.
 
 Sa pagtatapos ng araling ito, magkakaroon ka ng kumpiyansa na gawing natural na bahagi ng iyong workflow sa pag-develop ang accessibility. Handa ka na bang tuklasin kung paano ang mga maingat na desisyon sa disenyo ay maaaring magbukas ng web para sa bilyon-bilyong user? Tara na!
 
+```mermaid
+mindmap
+  root((Web Accessibility))
+    Users
+      Screen readers
+      Keyboard navigation
+      Voice control
+      Magnification
+    Technologies
+      HTML semantics
+      ARIA attributes
+      CSS focus indicators
+      Keyboard events
+    Benefits
+      Wider audience
+      Better SEO
+      Legal compliance
+      Universal design
+    Testing
+      Automated tools
+      Manual testing
+      User feedback
+      Real assistive tech
+```
+
 > Maaari mong kunin ang araling ito sa [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
 
 ## Pag-unawa sa Assistive Technologies
 
-Bago tayo magsimula sa coding, maglaan muna tayo ng sandali upang maunawaan kung paano talaga nararanasan ng mga taong may iba't ibang kakayahan ang web. Hindi lang ito teorya—ang pag-unawa sa mga pattern ng real-world navigation ay magpapahusay sa iyo bilang developer!
+Bago tayo magsimula sa coding, maglaan muna tayo ng oras para maunawaan kung paano talaga nararanasan ng mga taong may iba't ibang kakayahan ang web. Hindi lang ito teorya—ang pag-unawa sa mga real-world navigation pattern ay magpapahusay sa iyo bilang developer!
 
-Ang assistive technologies ay mga kamangha-manghang tool na tumutulong sa mga taong may kapansanan na makipag-ugnayan sa mga website sa mga paraang maaaring ikagulat mo. Kapag nakuha mo na ang tamang paraan ng paggamit ng mga teknolohiyang ito, ang paggawa ng mga accessible na karanasan sa web ay nagiging mas intuitive. Para bang natututo kang makita ang iyong code sa mata ng iba.
+Ang mga assistive technologies ay kamangha-manghang mga tool na tumutulong sa mga taong may kapansanan na makipag-ugnayan sa mga website sa mga paraang maaaring ikagulat mo. Kapag nakuha mo ang tamang paraan ng paggamit ng mga teknolohiyang ito, ang paggawa ng mga accessible na karanasan sa web ay nagiging mas intuitive. Para bang natututo kang makita ang iyong code sa mata ng iba.
 
 ### Screen readers
 
-[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) ay mga sopistikadong teknolohiya na nagko-convert ng digital na teksto sa speech o braille output. Bagama't pangunahing ginagamit ito ng mga taong may kapansanan sa paningin, napaka-kapaki-pakinabang din ito para sa mga user na may learning disabilities tulad ng dyslexia.
+[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) ay mga advanced na teknolohiya na nagko-convert ng digital na teksto sa speech o braille output. Bagama't pangunahing ginagamit ito ng mga taong may kapansanan sa paningin, napaka-kapaki-pakinabang din ito para sa mga user na may learning disabilities tulad ng dyslexia.
 
-Iniisip ko ang screen reader na parang isang matalinong tagapagsalaysay na nagbabasa ng libro para sa iyo. Binabasa nito ang nilalaman nang malakas sa lohikal na pagkakasunod-sunod, ina-anunsyo ang mga interactive na elemento tulad ng "button" o "link," at nagbibigay ng mga keyboard shortcut para sa mabilisang pag-navigate sa isang pahina. Ngunit narito ang bagay—ang mga screen reader ay maaari lamang gumana nang maayos kung gagawa tayo ng mga website na may tamang istruktura at makabuluhang nilalaman. Dito ka papasok bilang developer!
+Iniisip ko ang screen reader na parang isang matalinong tagapagsalaysay na nagbabasa ng libro para sa iyo. Binabasa nito ang nilalaman nang malakas sa lohikal na pagkakasunod-sunod, ina-announce ang mga interactive na elemento tulad ng "button" o "link," at nagbibigay ng mga keyboard shortcut para sa pag-navigate sa isang pahina. Ngunit narito ang mahalaga—ang mga screen reader ay gumagana lamang nang mahusay kung gagawa tayo ng mga website na may tamang istruktura at makabuluhang nilalaman. Diyan ka papasok bilang developer!
 
-**Mga sikat na screen readers sa iba't ibang platform:**
+**Mga sikat na screen reader sa iba't ibang platform:**
 - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (libre at pinakasikat), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (built-in)
 - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (built-in at napaka-kakayahan)
 - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (built-in)
 - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (libre at open-source)
 
-**Paano nagna-navigate ang screen readers sa web content:**
+**Paano nagna-navigate ang mga screen reader sa web content:**
 
-Ang mga screen reader ay nagbibigay ng iba't ibang paraan ng pag-navigate na ginagawang mas mabilis ang pag-browse para sa mga bihasang user:
+Ang mga screen reader ay nagbibigay ng iba't ibang paraan ng pag-navigate na nagpapabilis sa pag-browse para sa mga bihasang user:
 - **Sequential reading**: Binabasa ang nilalaman mula itaas hanggang ibaba, tulad ng pagbabasa ng libro
 - **Landmark navigation**: Tumalon sa pagitan ng mga seksyon ng pahina (header, nav, main, footer)
-- **Heading navigation**: Lumaktaw sa pagitan ng mga heading upang maunawaan ang istruktura ng pahina
+- **Heading navigation**: Tumalon sa pagitan ng mga heading para maunawaan ang istruktura ng pahina
 - **Link lists**: Gumagawa ng listahan ng lahat ng link para sa mabilisang pag-access
 - **Form controls**: Direktang nagna-navigate sa pagitan ng mga input field at button
 
@@ -60,83 +102,91 @@ Ang mga screen reader ay nagbibigay ng iba't ibang paraan ng pag-navigate na gin
 
 ### Pagbuo ng iyong testing workflow
 
-Narito ang magandang balita—ang epektibong accessibility testing ay hindi kailangang nakaka-overwhelm! Gusto mong pagsamahin ang automated tools (napakahusay sa pag-detect ng mga halatang isyu) sa ilang hands-on na testing. Narito ang sistematikong approach na napatunayan kong nakakahuli ng pinakamaraming isyu nang hindi nauubos ang buong araw mo:
+Narito ang magandang balita—ang epektibong accessibility testing ay hindi kailangang nakaka-overwhelm! Gusto mong pagsamahin ang automated tools (napakahusay sa pag-detect ng mga halatang isyu) sa ilang hands-on na testing. Narito ang sistematikong paraan na napatunayan kong nakakahuli ng pinakamaraming isyu nang hindi nauubos ang buong araw:
 
 **Essential manual testing workflow:**
 
 ```mermaid
-graph TD
-    A[Start Testing] --> B{Keyboard Navigation}
+flowchart TD
+    A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation}
     B --> C[Tab through all interactive elements]
-    C --> D{Screen Reader Testing}
+    C --> D{🎧 Screen Reader Testing}
     D --> E[Test with NVDA/VoiceOver]
-    E --> F{Zoom Testing}
+    E --> F{🔍 Zoom Testing}
     F --> G[Zoom to 200% and test functionality]
-    G --> H{Color/Contrast Check}
+    G --> H{🎨 Color/Contrast Check}
     H --> I[Verify all text meets contrast ratios]
-    I --> J{Focus Management}
+    I --> J{👁️ Focus Management}
     J --> K[Ensure focus indicators are visible]
-    K --> L[Testing Complete]
+    K --> L[✅ Testing Complete]
+    
+    style A fill:#e3f2fd
+    style L fill:#e8f5e8
+    style B fill:#fff3e0
+    style D fill:#f3e5f5
+    style F fill:#e0f2f1
+    style H fill:#fce4ec
+    style J fill:#e8eaf6
 ```
 
 **Step-by-step testing checklist:**
 1. **Keyboard navigation**: Gumamit lamang ng Tab, Shift+Tab, Enter, Space, at Arrow keys
 2. **Screen reader testing**: I-enable ang NVDA, VoiceOver, o Narrator at mag-navigate nang nakapikit ang mata
 3. **Zoom testing**: Subukan sa 200% at 400% zoom levels
-4. **Color contrast verification**: I-check ang lahat ng teksto at UI components
+4. **Color contrast verification**: Suriin ang lahat ng teksto at UI components
 5. **Focus indicator testing**: Siguraduhing lahat ng interactive na elemento ay may nakikitang focus states
 
-✅ **Simulan sa Lighthouse**: Buksan ang DevTools ng iyong browser, mag-run ng Lighthouse accessibility audit, pagkatapos gamitin ang resulta upang gabayan ang iyong manual testing focus areas.
+✅ **Simulan sa Lighthouse**: Buksan ang DevTools ng iyong browser, magpatakbo ng Lighthouse accessibility audit, pagkatapos gamitin ang resulta para gabayan ang iyong manual testing focus areas.
 
 ### Zoom at magnification tools
 
-Alam mo ba kung paano minsan pinipinch mo ang iyong phone para mag-zoom kapag masyadong maliit ang teksto, o nagpipilit kang magbasa sa laptop screen sa maliwanag na sikat ng araw? Maraming user ang umaasa sa magnification tools upang gawing nababasa ang nilalaman araw-araw. Kasama dito ang mga taong may mababang paningin, matatanda, at sinumang sinubukang magbasa ng website sa labas.
+Alam mo ba kung paano minsan ay nagpi-pinch to zoom ka sa iyong telepono kapag masyadong maliit ang teksto, o nagpipilit kang magbasa sa laptop screen sa maliwanag na sikat ng araw? Maraming user ang umaasa sa magnification tools para gawing nababasa ang nilalaman araw-araw. Kasama dito ang mga taong may mababang paningin, matatanda, at sinumang sinubukang magbasa ng website sa labas.
 
-Ang modernong zoom technologies ay umunlad na lampas sa simpleng pagpapalaki ng mga bagay. Ang pag-unawa kung paano gumagana ang mga tool na ito ay makakatulong sa iyo na lumikha ng mga responsive na disenyo na nananatiling functional at kaakit-akit sa anumang antas ng magnification.
+Ang modernong teknolohiya ng zoom ay umunlad na lampas sa simpleng pagpapalaki ng mga bagay. Ang pag-unawa kung paano gumagana ang mga tool na ito ay makakatulong sa iyo na lumikha ng mga responsive na disenyo na nananatiling functional at kaakit-akit sa anumang antas ng magnification.
 
 **Modern browser zoom capabilities:**
-- **Page zoom**: Pinapalaki ang lahat ng nilalaman nang proporsyonal (teksto, imahe, layout) - ito ang mas pinapaboran na paraan
+- **Page zoom**: Pinapalaki ang lahat ng nilalaman nang proporsyonal (teksto, mga imahe, layout) - ito ang mas pinapaborang paraan
 - **Text-only zoom**: Pinapalaki ang font size habang pinapanatili ang orihinal na layout
-- **Pinch-to-zoom**: Mobile gesture support para sa pansamantalang magnification
+- **Pinch-to-zoom**: Suporta sa mobile gesture para sa pansamantalang magnification
 - **Browser support**: Lahat ng modernong browser ay sumusuporta sa zoom hanggang 500% nang hindi nasisira ang functionality
 
 **Specialized magnification software:**
 - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (built-in), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
 - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (built-in na may advanced features)
 
-> ⚠️ **Design Consideration**: Ang WCAG ay nangangailangan na ang nilalaman ay nananatiling functional kapag naka-zoom sa 200%. Sa antas na ito, ang horizontal scrolling ay dapat minimal, at lahat ng interactive na elemento ay dapat nananatiling accessible.
+> ⚠️ **Pagsasaalang-alang sa Disenyo**: Kinakailangan ng WCAG na ang nilalaman ay nananatiling functional kapag na-zoom sa 200%. Sa antas na ito, ang horizontal scrolling ay dapat minimal, at lahat ng interactive na elemento ay dapat manatiling accessible.
 
-✅ **Subukan ang iyong responsive design**: I-zoom ang iyong browser sa 200% at 400%. Ang layout ba ay maayos na umaangkop? Maa-access mo pa rin ba ang lahat ng functionality nang walang labis na pag-scroll?
+✅ **Subukan ang iyong responsive design**: I-zoom ang iyong browser sa 200% at 400%. Ang iyong layout ba ay maayos na umaangkop? Maa-access mo pa rin ba ang lahat ng functionality nang walang labis na pag-scroll?
 
 ## Modern Accessibility Testing Tools
 
 Ngayon na nauunawaan mo kung paano nagna-navigate ang mga tao sa web gamit ang assistive technologies, tuklasin natin ang mga tool na tumutulong sa iyo na bumuo at mag-test ng mga accessible na website.
 
-Isipin mo ito: ang automated tools ay mahusay sa pag-detect ng mga halatang isyu (tulad ng nawawalang alt text), habang ang hands-on testing ay tumutulong sa iyo na tiyakin na ang iyong site ay maganda ang pakiramdam gamitin sa totoong mundo. Magkasama, nagbibigay ito ng kumpiyansa na ang iyong mga site ay gumagana para sa lahat.
+Isipin mo ito: ang automated tools ay mahusay sa pag-detect ng mga halatang isyu (tulad ng nawawalang alt text), habang ang hands-on testing ay tumutulong sa iyo na tiyakin na ang iyong site ay komportable gamitin sa totoong mundo. Kapag pinagsama, nagbibigay ito ng kumpiyansa na gumagana ang iyong mga site para sa lahat.
 
 ### Color contrast testing
 
-Narito ang magandang balita: ang color contrast ay isa sa mga pinakakaraniwang isyu sa accessibility, ngunit isa rin ito sa pinakamadaling ayusin. Ang magandang contrast ay kapaki-pakinabang para sa lahat—mula sa mga user na may kapansanan sa paningin hanggang sa mga taong nagbabasa ng kanilang mga phone sa tabing dagat.
+Narito ang magandang balita: ang color contrast ay isa sa mga pinakakaraniwang isyu sa accessibility, ngunit isa rin ito sa pinakamadaling ayusin. Ang magandang contrast ay nakikinabang sa lahat—mula sa mga user na may kapansanan sa paningin hanggang sa mga taong nagbabasa ng kanilang telepono sa tabing dagat.
 
-**WCAG contrast requirements:**
+**Mga kinakailangan sa contrast ng WCAG:**
 
 | Uri ng Teksto | WCAG AA (Minimum) | WCAG AAA (Enhanced) |
 |---------------|-------------------|---------------------|
-| **Normal na teksto** (sa ilalim ng 18pt) | 4.5:1 contrast ratio | 7:1 contrast ratio |
+| **Normal na teksto** (mas mababa sa 18pt) | 4.5:1 contrast ratio | 7:1 contrast ratio |
 | **Malaking teksto** (18pt+ o 14pt+ bold) | 3:1 contrast ratio | 4.5:1 contrast ratio |
 | **UI components** (mga button, form borders) | 3:1 contrast ratio | 3:1 contrast ratio |
 
-**Essential testing tools:**
+**Mga mahahalagang testing tools:**
 - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Desktop app na may color picker
 - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Web-based na may instant feedback
 - [Stark](https://www.getstark.co/) - Plugin ng design tool para sa Figma, Sketch, Adobe XD
 - [Accessible Colors](https://accessible-colors.com/) - Hanapin ang mga accessible na color palettes
 
-✅ **Gumawa ng mas mahusay na color palettes**: Simulan sa iyong brand colors at gamitin ang mga contrast checkers upang lumikha ng mga accessible na variation. I-dokumenta ang mga ito bilang mga accessible na color tokens ng iyong design system.
+✅ **Gumawa ng mas mahusay na color palettes**: Simulan sa iyong brand colors at gamitin ang contrast checkers para lumikha ng mga accessible na variation. I-dokumenta ang mga ito bilang mga accessible na color tokens ng iyong design system.
 
 ### Comprehensive accessibility auditing
 
-Ang pinaka-epektibong accessibility testing ay pinagsasama ang iba't ibang approach. Walang isang tool ang nakakakita ng lahat, kaya ang pagbuo ng testing routine na may iba't ibang paraan ay nagsisiguro ng masusing coverage.
+Ang pinaka-epektibong accessibility testing ay pinagsasama ang iba't ibang paraan. Walang isang tool na nakakakita ng lahat, kaya ang pagbuo ng testing routine na may iba't ibang pamamaraan ay nagsisiguro ng masusing coverage.
 
 **Browser-based testing (built-in sa DevTools):**
 - **Chrome/Edge**: Lighthouse accessibility audit + Accessibility panel
@@ -155,25 +205,58 @@ Ang pinaka-epektibong accessibility testing ay pinagsasama ang iba't ibang appro
 
 > 🎯 **Testing Goal**: Maghangad ng Lighthouse accessibility score na 95+ bilang baseline. Tandaan, ang automated tools ay nakakakita lamang ng humigit-kumulang 30-40% ng mga isyu sa accessibility—ang manual testing ay mahalaga pa rin!
 
+### 🧠 **Testing Skills Check: Handa Ka Na Bang Maghanap ng Mga Isyu?**
+
+**Tingnan natin kung ano ang nararamdaman mo tungkol sa accessibility testing:**
+- Aling testing method ang tila pinaka-madali para sa iyo ngayon?
+- Maiisip mo bang gumamit ng keyboard-only navigation sa loob ng isang buong araw?
+- Ano ang isang accessibility barrier na personal mong naranasan online?
+
+```mermaid
+pie title "Accessibility Issues Caught by Different Methods"
+    "Automated Tools" : 35
+    "Manual Testing" : 40
+    "User Feedback" : 25
+```
+
+> **Confidence booster**: Ang mga professional accessibility testers ay gumagamit ng eksaktong kombinasyon ng mga pamamaraang ito. Natututo ka ng mga industry-standard practices!
+
 ## Pagbuo ng Accessibility mula sa Simula
 
-Ang susi sa tagumpay ng accessibility ay ang pagbuo nito sa iyong pundasyon mula sa simula. Alam kong nakaka-tukso na isipin "Idadagdag ko ang accessibility mamaya," ngunit para itong sinusubukang magdagdag ng rampa sa isang bahay pagkatapos itong maitayo. Posible? Oo. Madali? Hindi talaga.
+Ang susi sa tagumpay ng accessibility ay ang pagbuo nito sa iyong pundasyon mula pa sa simula. Alam kong nakakaakit na isipin na "Idadagdag ko ang accessibility mamaya," ngunit para itong pagtatangkang magdagdag ng rampa sa isang bahay pagkatapos itong maitayo. Posible? Oo. Madali? Hindi talaga.
+
+Isipin ang accessibility na parang pagpaplano ng bahay—mas madali ang pagsama ng wheelchair accessibility sa iyong mga paunang plano sa arkitektura kaysa sa pag-retrofit ng lahat pagkatapos.
 
-Isipin ang accessibility na parang pagpaplano ng bahay—mas madali itong isama ang wheelchair accessibility sa iyong mga paunang plano sa arkitektura kaysa i-retrofit ang lahat pagkatapos.
+### Ang mga prinsipyo ng POUR: Ang iyong pundasyon sa accessibility
 
-### Ang mga prinsipyo ng POUR: Ang pundasyon ng iyong accessibility
+Ang Web Content Accessibility Guidelines (WCAG) ay nakabatay sa apat na pangunahing prinsipyo na tinatawag na POUR. Huwag mag-alala—hindi ito mga mahigpit na akademikong konsepto! Ang mga ito ay praktikal na gabay para sa paggawa ng nilalaman na gumagana para sa lahat.
 
-Ang Web Content Accessibility Guidelines (WCAG) ay nakabatay sa apat na pangunahing prinsipyo na bumubuo sa POUR. Huwag mag-alala—hindi ito mga mahigpit na akademikong konsepto! Ang mga ito ay talagang praktikal na gabay para sa paggawa ng nilalaman na gumagana para sa lahat.
+Kapag nakuha mo ang prinsipyo ng POUR, ang paggawa ng mga desisyon sa accessibility ay nagiging mas intuitive. Para itong pagkakaroon ng mental checklist na gumagabay sa iyong mga desisyon sa disenyo. Talakayin natin ito:
 
-Kapag nakuha mo ang tamang paraan ng POUR, ang paggawa ng mga desisyon sa accessibility ay nagiging mas intuitive. Para itong pagkakaroon ng mental checklist na gumagabay sa iyong mga desisyon sa disenyo. Tuklasin natin ito:
+```mermaid
+flowchart LR
+    A[🔍 PERCEIVABLE<br/>Can users sense it?] --> B[🎮 OPERABLE<br/>Can users use it?]
+    B --> C[📖 UNDERSTANDABLE<br/>Can users get it?]
+    C --> D[💪 ROBUST<br/>Does it work everywhere?]
+    
+    A1[Alt text<br/>Captions<br/>Contrast] --> A
+    B1[Keyboard access<br/>No seizures<br/>Time limits] --> B
+    C1[Clear language<br/>Predictable<br/>Error help] --> C
+    D1[Valid code<br/>Compatible<br/>Future-proof] --> D
+    
+    style A fill:#e1f5fe
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
 
-**🔍 Perceivable**: Ang impormasyon ay dapat maipakita sa mga paraan na maaaring ma-perceive ng mga user sa pamamagitan ng kanilang available na senses
+**🔍 Perceivable**: Ang impormasyon ay dapat maipakita sa mga paraan na maaaring maramdaman ng mga user sa pamamagitan ng kanilang mga pandama
 
-- Magbigay ng text alternatives para sa non-text content (mga imahe, video, audio)
+- Magbigay ng mga text alternatives para sa non-text content (mga imahe, video, audio)
 - Siguraduhin ang sapat na color contrast para sa lahat ng teksto at UI components
 - Magbigay ng captions at transcripts para sa multimedia content
-- Disenyuhan ang nilalaman na nananatiling functional kapag na-resize hanggang 200%
-- Gumamit ng maraming sensory characteristics (hindi lang kulay) upang magpahiwatig ng impormasyon
+- Disenyuhin ang nilalaman na nananatiling functional kapag na-resize hanggang 200%
+- Gumamit ng maraming sensory characteristics (hindi lang kulay) para ipakita ang impormasyon
 
 **🎮 Operable**: Lahat ng interface components ay dapat ma-operate sa pamamagitan ng available na input methods
 
@@ -193,29 +276,57 @@ Kapag nakuha mo ang tamang paraan ng POUR, ang paggawa ng mga desisyon sa access
 
 **💪 Robust**: Ang nilalaman ay dapat gumana nang maaasahan sa iba't ibang teknolohiya at assistive devices
 
-- Gumamit ng valid, semantic HTML bilang iyong pundasyon
-- Siguraduhin ang compatibility sa kasalukuyan at hinaharap na assistive technologies
-- Sundin ang web standards at best practices para sa markup
-- Mag-test sa iba't ibang browser, devices, at assistive tools
-- Istruktura ang nilalaman upang ito ay mag-degrade gracefully kapag ang advanced features ay hindi suportado
+- **Gumamit ng valid, semantic HTML bilang iyong pundasyon**
+- **Siguraduhin ang compatibility sa kasalukuyan at hinaharap na assistive technologies**
+- **Sundin ang web standards at best practices para sa markup**
+- **Subukan sa iba't ibang browser, device, at mga tool para sa accessibility**
+- **Istruktura ang nilalaman upang gumana pa rin nang maayos kahit hindi suportado ang mga advanced na feature**
+
+### 🎯 **POUR Principles Check: Paano Ito Maalala**
+
+**Mabilis na pagninilay sa mga pundasyon:**
+- Makakaisip ka ba ng feature sa website na hindi pumasa sa bawat prinsipyo ng POUR?
+- Alin sa mga prinsipyo ang pinaka-natural para sa iyo bilang developer?
+- Paano makakatulong ang mga prinsipyong ito sa disenyo para sa lahat, hindi lang sa mga may kapansanan?
+
+```mermaid
+quadrantChart
+    title POUR Principles Impact Matrix
+    x-axis Low Effort --> High Effort
+    y-axis Low Impact --> High Impact
+    quadrant-1 Quick Wins
+    quadrant-2 Major Projects
+    quadrant-3 Consider Later
+    quadrant-4 Strategic Focus
+    
+    Alt Text: [0.2, 0.9]
+    Color Contrast: [0.3, 0.8]
+    Semantic HTML: [0.4, 0.9]
+    Keyboard Nav: [0.6, 0.8]
+    ARIA Complex: [0.8, 0.7]
+    Screen Reader Testing: [0.7, 0.6]
+```
+
+> **Tandaan**: Magsimula sa mga pagbabago na may mataas na epekto ngunit mababa ang effort. Ang semantic HTML at alt text ang nagbibigay ng pinakamalaking accessibility boost nang hindi masyadong mahirap gawin!
 
 ## Paglikha ng Accessible na Visual Design
 
-Ang magandang visual design at accessibility ay magkasabay. Kapag nagdisenyo ka nang may accessibility sa isip, madalas mong matutuklasan na ang mga limitasyong ito ay humahantong sa mas malinis, mas eleganteng solusyon na kapaki-pakinabang para sa lahat ng user.
+Ang mahusay na visual design at accessibility ay magkaugnay. Kapag nagdisenyo ka nang may accessibility sa isip, madalas mong matutuklasan na ang mga limitasyong ito ay nagdudulot ng mas malinis at mas eleganteng solusyon na kapaki-pakinabang para sa lahat ng user.
 
-Tuklasin natin kung paano lumikha ng mga visually appealing na disenyo na gumagana para sa lahat, anuman ang kanilang visual abilities o ang mga kondisyon kung saan nila tinitingnan ang iyong nilalaman.
+Tuklasin natin kung paano gumawa ng mga disenyo na kaakit-akit sa mata at gumagana para sa lahat, anuman ang kanilang kakayahan sa paningin o ang mga kondisyon kung saan nila tinitingnan ang iyong nilalaman.
 
 ### Mga Estratehiya sa Kulay at Visual Accessibility
-Ang kulay ay makapangyarihan para sa komunikasyon, ngunit hindi ito dapat maging tanging paraan upang maipahayag ang mahalagang impormasyon. Ang disenyo na lampas sa kulay ay lumilikha ng mas matibay at inklusibong karanasan na gumagana sa mas maraming sitwasyon.
 
-**Magdisenyo para sa mga pagkakaiba sa paningin ng kulay:**
+Ang kulay ay makapangyarihan para sa komunikasyon, ngunit hindi ito dapat ang tanging paraan para ipahayag ang mahalagang impormasyon. Ang pagdisenyo nang lampas sa kulay ay lumilikha ng mas matibay at inklusibong karanasan na gumagana sa mas maraming sitwasyon.
+
+**Disenyo para sa pagkakaiba sa paningin ng kulay:**
 
 Tinatayang 8% ng mga lalaki at 0.5% ng mga babae ang may ilang uri ng pagkakaiba sa paningin ng kulay (madalas na tinatawag na "color blindness"). Ang mga pinakakaraniwang uri ay:
 - **Deuteranopia**: Hirap sa pagkilala ng pula at berde
 - **Protanopia**: Ang pula ay mukhang mas madilim
 - **Tritanopia**: Hirap sa asul at dilaw (bihira)
 
-**Mga inklusibong estratehiya sa kulay:**
+**Mga Estratehiya para sa Inklusibong Kulay:**
 
 ```css
 /* ❌ Bad: Using only color to indicate status */
@@ -243,18 +354,18 @@ Tinatayang 8% ng mga lalaki at 0.5% ng mga babae ang may ilang uri ng pagkakaiba
 ```
 
 **Lampas sa mga pangunahing kinakailangan sa contrast:**
-- Subukan ang iyong mga pagpipilian sa kulay gamit ang mga color blind simulator
+- Subukan ang iyong mga pagpipilian sa kulay gamit ang mga simulator para sa color blindness
 - Gumamit ng mga pattern, texture, o hugis kasabay ng color coding
 - Siguraduhing ang mga interactive na estado ay nananatiling naiiba kahit walang kulay
-- Isaalang-alang kung paano ang disenyo mo ay magmumukha sa high contrast mode
+- Isaalang-alang kung paano ang iyong disenyo ay mukhang nasa high contrast mode
 
-✅ **Subukan ang accessibility ng iyong kulay**: Gumamit ng mga tool tulad ng [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) upang makita kung paano ang hitsura ng iyong site sa mga gumagamit na may iba't ibang uri ng paningin ng kulay.
+✅ **Subukan ang accessibility ng iyong kulay**: Gumamit ng mga tool tulad ng [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) upang makita kung paano lumilitaw ang iyong site sa mga user na may iba't ibang uri ng paningin ng kulay.
 
-### Mga focus indicator at disenyo ng interaksyon
+### Mga Focus Indicator at Disenyo ng Interaksyon
 
-Ang mga focus indicator ay katumbas ng cursor sa digital—ipinapakita nila sa mga gumagamit ng keyboard kung nasaan sila sa pahina. Ang maayos na disenyo ng focus indicator ay nagpapahusay sa karanasan para sa lahat sa pamamagitan ng paggawa ng mga interaksyon na malinaw at predictable.
+Ang mga focus indicator ay ang digital na katumbas ng cursor—ipinapakita nila sa mga user ng keyboard kung nasaan sila sa pahina. Ang mahusay na disenyo ng focus indicator ay nagpapahusay sa karanasan para sa lahat sa pamamagitan ng paggawa ng mga interaksyon na malinaw at predictable.
 
-**Mga modernong best practice para sa focus indicator:**
+**Mga Modernong Praktis para sa Focus Indicator:**
 
 ```css
 /* Enhanced focus styles that work across browsers */
@@ -283,23 +394,45 @@ button:focus:not(:focus-visible) {
 }
 ```
 
-**Mga kinakailangan para sa focus indicator:**
+**Mga Kinakailangan para sa Focus Indicator:**
 - **Visibility**: Dapat may hindi bababa sa 3:1 contrast ratio sa mga nakapaligid na elemento
 - **Width**: Minimum na kapal na 2px sa buong elemento
 - **Persistence**: Dapat manatiling nakikita hanggang sa lumipat ang focus sa ibang lugar
 - **Distinction**: Dapat visually naiiba mula sa ibang estado ng UI
 
-> 💡 **Tip sa Disenyo**: Ang magagandang focus indicator ay madalas gumagamit ng kombinasyon ng outline, box-shadow, at pagbabago ng kulay upang matiyak ang visibility sa iba't ibang background at konteksto.
+> 💡 **Tip sa Disenyo**: Ang mahusay na focus indicator ay madalas gumagamit ng kombinasyon ng outline, box-shadow, at pagbabago ng kulay upang matiyak ang visibility sa iba't ibang background at konteksto.
+
+✅ **Audit ang mga focus indicator**: I-tab ang iyong website at tandaan kung aling mga elemento ang may malinaw na focus indicator. Mayroon bang mahirap makita o ganap na nawawala?
 
-✅ **I-audit ang mga focus indicator**: Mag-tab sa iyong website at tandaan kung aling mga elemento ang may malinaw na focus indicator. Mayroon bang mahirap makita o ganap na nawawala?
+### Semantic HTML: Ang Pundasyon ng Accessibility
 
-### Semantic HTML: Ang pundasyon ng accessibility
+Ang Semantic HTML ay parang pagbibigay ng GPS system sa mga assistive technologies para sa iyong website. Kapag ginamit mo ang tamang HTML elements para sa kanilang layunin, nagbibigay ka ng detalyadong roadmap sa mga screen reader, keyboard, at iba pang tool upang matulungan ang mga user na mag-navigate nang epektibo.
 
-Ang Semantic HTML ay parang pagbibigay ng GPS system sa mga assistive technologies para sa iyong website. Kapag ginamit mo ang tamang HTML elements para sa kanilang layunin, nagbibigay ka ng detalyadong roadmap sa mga screen reader, keyboard, at iba pang tools upang matulungan ang mga gumagamit na mag-navigate nang epektibo.
+Narito ang isang analogy na talagang tumatak sa akin: ang semantic HTML ay ang pagkakaiba sa pagitan ng isang maayos na library na may malinaw na kategorya at mga kapaki-pakinabang na palatandaan kumpara sa isang warehouse kung saan ang mga libro ay nakakalat nang random. Parehong may parehong mga libro, ngunit alin ang mas gusto mong hanapan ng isang bagay? Eksakto!
 
-Narito ang isang analogy na talagang tumatak sa akin: ang Semantic HTML ay ang pagkakaiba sa pagitan ng maayos na organisadong library na may malinaw na kategorya at mga kapaki-pakinabang na palatandaan kumpara sa isang warehouse kung saan ang mga libro ay nakakalat nang random. Parehong may parehong mga libro, ngunit alin ang mas gusto mong hanapan ng isang bagay? Eksakto!
+```mermaid
+flowchart TD
+    A[🏠 HTML Document] --> B[📰 header]
+    A --> C[🧭 nav]
+    A --> D[📄 main]
+    A --> E[📋 footer]
+    
+    B --> B1[h1: Site Name<br/>Logo & branding]
+    C --> C1[ul: Navigation<br/>Primary links]
+    D --> D1[article: Content<br/>section: Subsections]
+    D --> D2[aside: Sidebar<br/>Related content]
+    E --> E1[nav: Footer links<br/>Copyright info]
+    
+    D1 --> D1a[h1: Page title<br/>h2: Major sections<br/>h3: Subsections]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-**Mga pundasyon ng accessible na istruktura ng pahina:**
+**Mga Building Blocks ng Accessible na Istruktura ng Pahina:**
 
 ```html
 <!-- Landmark elements provide page navigation structure -->
@@ -354,36 +487,63 @@ Narito ang isang analogy na talagang tumatak sa akin: ang Semantic HTML ay ang p
 </footer>
 ```
 
-**Bakit binabago ng Semantic HTML ang accessibility:**
+**Bakit Binabago ng Semantic HTML ang Accessibility:**
 
 | Semantic Element | Layunin | Benepisyo sa Screen Reader |
 |------------------|---------|---------------------------|
 | `<header>` | Header ng pahina o seksyon | "Banner landmark" - mabilis na pag-navigate sa itaas |
 | `<nav>` | Mga navigation link | "Navigation landmark" - listahan ng mga seksyon ng nav |
-| `<main>` | Pangunahing nilalaman ng pahina | "Main landmark" - direktang pagtalon sa nilalaman |
-| `<article>` | Self-contained na nilalaman | Ipinapahayag ang mga hangganan ng artikulo |
-| `<section>` | Mga grupong may tema na nilalaman | Nagbibigay ng istruktura ng nilalaman |
+| `<main>` | Pangunahing nilalaman ng pahina | "Main landmark" - direktang pagpunta sa nilalaman |
+| `<article>` | Self-contained na nilalaman | Inanunsyo ang mga hangganan ng artikulo |
+| `<section>` | Mga grupong may tema | Nagbibigay ng istruktura ng nilalaman |
 | `<aside>` | Kaugnay na nilalaman sa sidebar | "Complementary landmark" |
 | `<footer>` | Footer ng pahina o seksyon | "Contentinfo landmark" |
 
-**Mga superpower ng screen reader gamit ang Semantic HTML:**
-- **Landmark navigation**: Mabilis na pagtalon sa mga pangunahing seksyon ng pahina
+**Mga Superpower ng Screen Reader gamit ang Semantic HTML:**
+- **Landmark navigation**: Tumalon sa pagitan ng mga pangunahing seksyon ng pahina nang mabilis
 - **Heading outlines**: Gumawa ng table of contents mula sa istruktura ng heading
 - **Element lists**: Gumawa ng listahan ng lahat ng link, button, o form controls
 - **Context awareness**: Maunawaan ang mga relasyon sa pagitan ng mga seksyon ng nilalaman
 
-> 🎯 **Mabilis na Pagsubok**: Subukang mag-navigate sa iyong site gamit ang screen reader gamit ang mga shortcut sa landmark (D para sa landmark, H para sa heading, K para sa link sa NVDA/JAWS). Ang navigation ba ay may katuturan?
+> 🎯 **Mabilis na Pagsubok**: Subukang i-navigate ang iyong site gamit ang screen reader gamit ang mga shortcut sa landmark (D para sa landmark, H para sa heading, K para sa link sa NVDA/JAWS). Ang navigation ba ay may katuturan?
 
-✅ **I-audit ang iyong semantic na istruktura**: Gamitin ang Accessibility panel sa DevTools ng iyong browser upang tingnan ang accessibility tree at tiyakin na ang iyong markup ay lumilikha ng lohikal na istruktura.
+### 🏗️ **Semantic HTML Mastery Check: Pagtatayo ng Matibay na Pundasyon**
 
-### Hierarchy ng Heading: Paglikha ng lohikal na outline ng nilalaman
+**Suriin ang iyong semantic na kaalaman:**
+- Kaya mo bang tukuyin ang mga landmark sa isang webpage sa pamamagitan lamang ng pagtingin sa HTML?
+- Paano mo ipapaliwanag ang pagkakaiba sa pagitan ng `<section>` at `<div>` sa isang kaibigan?
+- Ano ang unang bagay na iyong susuriin kung ang isang screen reader user ay nag-ulat ng problema sa navigation?
 
-Ang mga heading ay napakahalaga para sa accessible na nilalaman—parang gulugod na nagtataguyod sa lahat. Ang mga gumagamit ng screen reader ay lubos na umaasa sa mga heading upang maunawaan at mag-navigate sa iyong nilalaman. Isipin ito bilang pagbibigay ng table of contents para sa iyong pahina.
+```mermaid
+stateDiagram-v2
+    [*] --> UnsementicHTML: div soup
+    UnsementicHTML --> SemanticHTML: Add landmarks
+    SemanticHTML --> AccessibleHTML: Test with AT
+    AccessibleHTML --> [*]: User success!
+    
+    note right of UnsementicHTML
+        Screen readers lost
+        Keyboard nav broken
+    end note
+    
+    note right of AccessibleHTML
+        Clear navigation
+        Efficient browsing
+    end note
+```
+
+> **Insight ng Pro**: Ang mahusay na semantic HTML ay awtomatikong nag-aayos ng halos 70% ng mga isyu sa accessibility. Masterin ang pundasyong ito at malayo na ang mararating mo!
+
+✅ **Audit ang iyong semantic na istruktura**: Gamitin ang Accessibility panel sa DevTools ng iyong browser upang tingnan ang accessibility tree at tiyaking ang iyong markup ay lumilikha ng lohikal na istruktura.
+
+### Hierarchy ng Heading: Paglikha ng Lohikal na Outline ng Nilalaman
+
+Ang mga heading ay napakahalaga para sa accessible na nilalaman—parang gulugod na nagtataguyod sa lahat. Ang mga user ng screen reader ay lubos na umaasa sa mga heading upang maunawaan at ma-navigate ang iyong nilalaman. Isipin ito bilang pagbibigay ng table of contents para sa iyong pahina.
 
 **Narito ang gintong tuntunin para sa mga heading:**
-Huwag laktawan ang mga antas. Palaging magpatuloy nang lohikal mula `<h1>` hanggang `<h2>` hanggang `<h3>`, at iba pa. Tandaan ang paggawa ng mga outline noong nasa paaralan? Pareho lang ang prinsipyo—hindi ka lilipat mula sa "I. Pangunahing Punto" diretso sa "C. Sub-sub-point" nang walang "A. Sub-point" sa pagitan, tama?
+Huwag laktawan ang mga level. Palaging magpatuloy nang lohikal mula `<h1>` hanggang `<h2>` hanggang `<h3>`, at iba pa. Tandaan ang paggawa ng mga outline noong nasa paaralan? Parehong prinsipyo—hindi ka lilipat mula sa "I. Pangunahing Punto" diretso sa "C. Sub-sub-point" nang walang "A. Sub-point" sa pagitan, tama?
 
-**Halimbawa ng perpektong istruktura ng heading:**
+**Halimbawa ng Perpektong Istruktura ng Heading:**
 
 ```html
 <!-- ✅ Excellent: Logical, hierarchical progression -->
@@ -422,34 +582,34 @@ Huwag laktawan ang mga antas. Palaging magpatuloy nang lohikal mula `<h1>` hangg
 <h1>Another main heading?</h1> <!-- Multiple h1s -->
 ```
 
-**Mga best practice para sa heading:**
-- **Isang `<h1>` bawat pahina**: Karaniwan ang iyong pangunahing pamagat ng pahina o pangunahing heading ng nilalaman
-- **Lohikal na pag-unlad**: Huwag laktawan ang mga antas (h1 → h2 → h3, hindi h1 → h3)
-- **Descriptive na nilalaman**: Gawing makabuluhan ang mga heading kapag binasa nang wala sa konteksto
+**Mga Praktis para sa Heading:**
+- **Isang `<h1>` bawat pahina**: Karaniwang ang pangunahing pamagat ng pahina o pangunahing heading ng nilalaman
+- **Lohikal na pag-unlad**: Huwag laktawan ang mga level (h1 → h2 → h3, hindi h1 → h3)
+- **Descriptive content**: Gawing makabuluhan ang mga heading kahit basahin nang wala sa konteksto
 - **Visual styling gamit ang CSS**: Gamitin ang CSS para sa hitsura, HTML levels para sa istruktura
 
-**Mga istatistika ng navigation ng screen reader:**
-- 68% ng mga gumagamit ng screen reader ay nag-navigate gamit ang mga heading ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding))
-- Inaasahan ng mga gumagamit na makakita ng lohikal na outline ng heading
+**Mga Estadistika ng Navigation ng Screen Reader:**
+- 68% ng mga user ng screen reader ay nagna-navigate gamit ang mga heading ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding))
+- Inaasahan ng mga user na makakita ng lohikal na outline ng heading
 - Ang mga heading ay nagbibigay ng pinakamabilis na paraan upang maunawaan ang istruktura ng pahina
 
-> 💡 **Pro Tip**: Gumamit ng mga browser extension tulad ng "HeadingsMap" upang makita ang istruktura ng iyong heading. Dapat itong basahin tulad ng isang maayos na organisadong table of contents.
+> 💡 **Tip ng Pro**: Gumamit ng mga browser extension tulad ng "HeadingsMap" upang makita ang istruktura ng iyong heading. Dapat itong basahin tulad ng isang maayos na table of contents.
 
-✅ **Subukan ang istruktura ng iyong heading**: Gamitin ang navigation ng heading ng screen reader (H key sa NVDA) upang mag-jump sa iyong mga heading. Ang pag-unlad ba ay nagsasabi ng kuwento ng iyong nilalaman nang lohikal?
+✅ **Subukan ang istruktura ng iyong heading**: Gamitin ang heading navigation ng screen reader (H key sa NVDA) upang tumalon sa iyong mga heading. Ang pag-unlad ba ay nagsasabi ng kuwento ng iyong nilalaman nang lohikal?
 
-### Mga advanced na teknik sa visual accessibility
+### Mga Advanced na Teknik para sa Visual Accessibility
 
-Lampas sa mga pangunahing kaalaman ng contrast at kulay, may mga sopistikadong teknik na tumutulong sa paglikha ng tunay na inklusibong visual na karanasan. Ang mga pamamaraang ito ay tinitiyak na ang iyong nilalaman ay gumagana sa iba't ibang kondisyon ng pagtingin at assistive technologies.
+Lampas sa mga pangunahing kaalaman ng contrast at kulay, may mga sopistikadong teknik na tumutulong sa paglikha ng tunay na inklusibong visual na karanasan. Tinitiyak ng mga pamamaraang ito na gumagana ang iyong nilalaman sa iba't ibang kondisyon ng pagtingin at assistive technologies.
 
-**Mga mahahalagang estratehiya sa visual na komunikasyon:**
+**Mga Mahahalagang Estratehiya sa Visual na Komunikasyon:**
 
 - **Multi-modal feedback**: Pagsamahin ang visual, textual, at minsan audio cues
-- **Progressive disclosure**: Ipakita ang impormasyon sa mga digestible na bahagi
+- **Progressive disclosure**: Ipakita ang impormasyon sa mga digestible chunks
 - **Consistent interaction patterns**: Gumamit ng mga pamilyar na UI conventions
-- **Responsive typography**: I-scale ang teksto nang naaangkop sa iba't ibang device
-- **Loading at error states**: Magbigay ng malinaw na feedback para sa lahat ng aksyon ng gumagamit
+- **Responsive typography**: I-scale ang text nang naaangkop sa iba't ibang device
+- **Loading at error states**: Magbigay ng malinaw na feedback para sa lahat ng aksyon ng user
 
-**Mga utility ng CSS para sa pinahusay na accessibility:**
+**Mga CSS Utility para sa Pinahusay na Accessibility:**
 
 ```css
 /* Screen reader only text - visually hidden but accessible */
@@ -505,28 +665,28 @@ Lampas sa mga pangunahing kaalaman ng contrast at kulay, may mga sopistikadong t
 }
 ```
 
-> 🎯 **Accessibility Pattern**: Ang "skip link" ay mahalaga para sa mga gumagamit ng keyboard. Dapat itong unang focusable na elemento sa iyong pahina at direktang tumalon sa pangunahing nilalaman.
+> 🎯 **Accessibility Pattern**: Ang "skip link" ay mahalaga para sa mga user ng keyboard. Dapat itong unang focusable element sa iyong pahina at tumalon diretso sa pangunahing nilalaman.
 
 ✅ **Ipatupad ang skip navigation**: Magdagdag ng skip links sa iyong mga pahina at subukan ito sa pamamagitan ng pag-press ng Tab sa sandaling mag-load ang pahina. Dapat itong lumitaw at payagan kang tumalon sa pangunahing nilalaman.
 
 ## Paggawa ng Makabuluhang Link Text
 
-Ang mga link ay parang mga highway ng web, ngunit ang hindi maayos na isinulat na link text ay parang may mga road sign na nagsasabing "Lugar" sa halip na "Downtown Chicago." Hindi masyadong kapaki-pakinabang, di ba?
+Ang mga link ay parang mga highway ng web, ngunit ang hindi maayos na link text ay parang may mga road sign na nagsasabing "Lugar" sa halip na "Downtown Chicago." Hindi masyadong kapaki-pakinabang, di ba?
 
-Narito ang isang bagay na talagang nagbigay-liwanag sa akin nang una kong malaman ito: ang mga screen reader ay maaaring kunin ang lahat ng mga link mula sa isang pahina at ipakita ang mga ito bilang isang malaking listahan. Isipin kung may nagbigay sa iyo ng direktoryo ng bawat link sa iyong pahina. Ang bawat isa ba ay may kahulugan sa sarili nito? Iyan ang pagsubok na kailangang maipasa ng iyong link text!
+Narito ang isang bagay na talagang nagulat ako nang una kong malaman ito: ang mga screen reader ay maaaring kunin ang lahat ng mga link mula sa isang pahina at ipakita ang mga ito bilang isang malaking listahan. Isipin kung may nagbigay sa iyo ng direktoryo ng bawat link sa iyong pahina. Ang bawat isa ba ay may kahulugan nang mag-isa? Iyan ang pagsubok na kailangang maipasa ng iyong link text!
 
-### Pag-unawa sa mga pattern ng navigation ng link
+### Pag-unawa sa Mga Pattern ng Navigation ng Link
 
-Ang mga screen reader ay nag-aalok ng makapangyarihang mga feature sa navigation ng link na umaasa sa maayos na isinulat na link text:
+Nag-aalok ang mga screen reader ng makapangyarihang mga feature ng navigation ng link na umaasa sa maayos na link text:
 
-**Mga paraan ng navigation ng link:**
+**Mga Paraan ng Navigation ng Link:**
 - **Sequential reading**: Ang mga link ay binabasa sa konteksto bilang bahagi ng daloy ng nilalaman
-- **Link list generation**: Lahat ng mga link sa pahina ay pinagsama sa isang searchable na direktoryo
-- **Quick navigation**: Tumalon sa pagitan ng mga link gamit ang mga keyboard shortcut (K sa NVDA)
-- **Search functionality**: Hanapin ang mga partikular na link sa pamamagitan ng pag-type ng partial na text
+- **Link list generation**: Lahat ng link sa pahina ay pinagsama sa isang searchable directory
+- **Quick navigation**: Tumalon sa pagitan ng mga link gamit ang keyboard shortcuts (K sa NVDA)
+- **Search functionality**: Hanapin ang mga partikular na link sa pamamagitan ng pag-type ng partial text
 
 **Bakit mahalaga ang konteksto:**
-Kapag ang mga gumagamit ng screen reader ay bumuo ng listahan ng link, makikita nila ang ganito:
+Kapag ang mga user ng screen reader ay bumuo ng listahan ng link, makikita nila ang ganito:
 - "I-download ang ulat"
 - "Alamin pa"
 - "I-click dito"
@@ -535,9 +695,9 @@ Kapag ang mga gumagamit ng screen reader ay bumuo ng listahan ng link, makikita
 
 Dalawa lamang sa mga link na ito ang nagbibigay ng kapaki-pakinabang na impormasyon kapag binasa nang wala sa konteksto!
 
-> 📊 **Epekto sa Gumagamit**: Ang mga gumagamit ng screen reader ay nag-scan ng mga listahan ng link upang mabilis na maunawaan ang nilalaman ng pahina. Ang generic na link text ay pinipilit silang bumalik sa konteksto ng bawat link, na lubos na nagpapabagal sa kanilang karanasan sa pag-browse.
+> 📊 **Epekto sa User**: Ang mga user ng screen reader ay nag-scan ng mga listahan ng link upang mabilis na maunawaan ang nilalaman ng pahina. Ang generic na link text ay pinipilit silang bumalik sa konteksto ng bawat link, na lubos na nagpapabagal sa kanilang karanasan sa pag-browse.
 
-### Mga karaniwang pagkakamali sa link text na dapat iwasan
+### Mga Karaniwang Pagkakamali sa Link Text na Dapat Iwasan
 
 Ang pag-unawa sa kung ano ang hindi gumagana ay tumutulong sa iyo na kilalanin at ayusin ang mga isyu sa accessibility sa umiiral na nilalaman.
 
@@ -568,16 +728,16 @@ Ang pag-unawa sa kung ano ang hindi gumagana ay tumutulong sa iyo na kilalanin a
 ```
 
 **Bakit nabigo ang mga pattern na ito:**
-- **"I-click dito"** ay walang sinasabi sa mga gumagamit tungkol sa destinasyon
+- **"I-click dito"** ay walang sinasabi sa mga user tungkol sa destinasyon
 - **"Basahin pa"** na inuulit nang maraming beses ay nagdudulot ng kalituhan
 - **Raw URLs** ay mahirap bigkasin nang malinaw ng mga screen reader
 - **Mga solong salita** tulad ng "Punta" o "Tingnan" ay kulang sa descriptive na konteksto
 
-### Pagsulat ng mahusay na link text
+### Pagsulat ng Mahusay na Link Text
 
-Ang descriptive na link text ay kapaki-pakinabang para sa lahat—ang mga gumagamit na may paningin ay maaaring mabilis na mag-scan ng mga link, at ang mga gumagamit ng screen reader ay agad na nauunawaan ang mga destinasyon.
+Ang descriptive na link text ay kapaki-pakinabang para sa lahat—ang mga user na may paningin ay maaaring mabilis na mag-scan ng mga link, at ang mga user ng screen reader ay agad na nauunawaan ang mga destinasyon.
 
-**✅ Malinaw, descriptive na halimbawa ng link text:**
+**✅ Mga Halimbawa ng Malinaw at Descriptive na Link Text:**
 
 ```html
 <!-- Descriptive text that explains the destination -->
@@ -604,18 +764,18 @@ Ang descriptive na link text ay kapaki-pakinabang para sa lahat—ang mga gumaga
 <a href="/help">Get help with your account</a>
 ```
 
-**Mga best practice para sa link text:**
+**Mga Praktis para sa Link Text:**
 - **Maging specific**: "I-download ang quarterly financial report" kumpara sa "I-download"
-- **Isama ang uri ng file at laki**: "(PDF, 1.2MB)" para sa mga downloadable na file
+- **Isama ang file type at size**: "(PDF, 1.2MB)" para sa mga downloadable na file
 - **Banggitin kung ang mga link ay magbubukas sa labas**: "(magbubukas sa bagong window)" kung naaangkop
-- **Gumamit ng active na wika**: "Makipag-ugnayan sa amin" kumpara sa "Contact page"
-- **Panatilihin itong maikli**: Hangarin ang 2-8 salita kung maaari
+- **Gumamit ng active language**: "Makipag-ugnayan sa amin" kumpara sa "Contact page"
+- **Panatilihing maikli**: Hangarin ang 2-8 salita kung maaari
 
-### Mga advanced na pattern sa accessibility ng link
+### Mga Advanced na Pattern para sa Accessibility ng Link
 
-Minsan ang mga constraint sa visual na disenyo o teknikal na kinakailangan ay nangangailangan ng espesyal na solusyon. Narito ang mga sopistikadong teknik para sa mga karaniwang hamon:
+Minsan ang mga limitasyon sa disenyo ng visual o teknikal na mga kinakailangan ay nangangailangan ng mga espesyal na solusyon. Narito ang mga sopistikadong teknik para sa mga karaniwang hamon:
 
-**Paggamit ng ARIA para sa pinahusay na konteksto:**
+**Paggamit ng ARIA para sa Pinahusay na Konteksto:**
 
 ```html
 <!-- When button text must be short but needs more context -->
@@ -635,7 +795,7 @@ Minsan ang mga constraint sa visual na disenyo o teknikal na kinakailangan ay na
 <p id="sustainability-summary">Detailed breakdown of our 2024 environmental goals and achievements</p>
 ```
 
-**Pagpapahiwatig ng uri ng file at mga destinasyong panlabas:**
+**Pagpapahiwatig ng mga Uri ng File at Panlabas na Destinasyon:**
 
 ```html
 <!-- Method 1: Include information in visible link text -->
@@ -684,50 +844,39 @@ Minsan ang mga constraint sa visual na disenyo o teknikal na kinakailangan ay na
 }
 ```
 
-> ⚠️ **Mahalaga**: Kapag gumagamit ng `target="_blank"`, palaging ipaalam sa mga gumagamit na ang link ay magbubukas sa bagong window o tab. Ang hindi inaasahang pagbabago sa navigation ay maaaring magdulot ng pagkalito.
+> ⚠️ **Mahalaga**: Kapag gumagamit ng `target="_blank"`, palaging ipaalam sa mga user na ang link ay magbubukas sa bagong window o tab. Ang hindi inaasahang pagbabago sa navigation ay maaaring magdulot ng pagkalito.
 
-✅ **Subukan ang konteksto ng iyong link**: Gamitin ang developer tools ng iyong browser upang bumuo ng listahan ng lahat ng mga link sa iyong pahina. Nauunawaan mo ba ang layunin ng bawat link nang walang anumang nakapaligid na konteksto?
+✅ **Subukan ang konteksto ng iyong link**: Gamitin ang developer tools ng iyong browser upang bumuo ng listahan ng lahat ng link sa iyong pahina. Nauunawaan mo ba ang layunin ng bawat link nang walang anumang nakapaligid na konteksto?
 
-## ARIA: Pagpapalakas ng Accessibility ng HTML
+## ARIA: Pagpapalakas ng HTML Accessibility
 
-[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) ay parang universal translator sa pagitan ng iyong mga kumplikadong web application at assistive technologies. Kapag ang HTML lamang ay hindi maipahayag ang lahat ng ginagawa ng iyong mga interactive na component, ang ARIA ang pumupuno sa mga puwang.
+[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) ay parang universal translator sa pagitan ng iyong mga kumplikadong web application at assistive technologies. Kapag hindi maipahayag ng HTML ang lahat ng ginagawa ng iyong mga interactive na component, ang ARIA ang pumupuno sa mga puwang.
 
 Iniisip ko ang ARIA bilang pagdaragdag ng mga kapaki-pakinabang na annotation sa iyong HTML—parang mga direksyon sa entablado sa isang script ng dula na tumutulong sa mga aktor na maunawaan ang kanilang mga papel at relasyon.
 
-**Narito ang pinakamahalagang tuntunin tungkol sa ARIA**: Palaging gumamit ng semantic HTML muna, pagkatapos ay idagdag ang ARIA upang mapahusay ito. Isipin ang ARIA bilang pampalasa, hindi ang pangunahing ulam. Dapat nitong linawin at pagandahin ang istruktura ng iyong HTML, hindi kailanman palitan ito. Unahin ang tamang pundasyon!
+**Narito ang pinakamahalagang tuntunin tungkol sa ARIA**: Palaging gumamit muna ng semantic HTML, pagkatapos ay magdagdag ng ARIA upang mapahusay ito. Isipin ang ARIA bilang pampalasa, hindi ang pangunahing ulam. Dapat nitong linawin at pagandahin ang istruktura ng iyong HTML, hindi kailanman palitan ito. Unahin ang tamang pundasyon!
 
-### Strategic na implementasyon ng ARIA
+### Strategic na Implementasyon ng ARIA
 
 Ang ARIA ay makapangyarihan, ngunit may kasamang responsibilidad ang kapangyarihan. Ang maling ARIA ay maaaring magpalala ng accessibility kaysa sa wala. Narito kung kailan at paano ito gamitin nang epektibo:
 
 **✅ Gumamit ng ARIA kapag:**
 - Gumagawa ng custom na interactive widgets (accordions, tabs, carousels)
 - Gumagawa ng dynamic na nilalaman na nagbabago nang walang page reloads
-- Nagbibigay ng karagdagang konteksto para sa mga kumplikadong relasyon sa UI
-- Nagpapahiwatig ng mga loading states o live na update ng nilalaman
-- Gumagawa ng app-like interfaces na may custom na controls
-
-**❌ Iwasan ang ARIA kapag:**
-- Ang mga standard na HTML elements ay nagbibigay na ng kinakailangang semantics
-- Hindi ka sigurado kung paano ito i-implement nang tama
-- Inuulit nito ang impormasyon na ibinibigay na ng semantic HTML
-- Hindi mo pa ito nasubukan gamit ang aktwal na assistive technology
-
-> 🎯 **Golden Rule ng ARIA**: "Huwag baguhin ang semantics maliban kung talagang kailangan, tiyakin ang keyboard accessibility palagi, at subukan gamit ang tunay na assistive technology."
-
+- Nagbibigay ng karagdagang konteksto
 **Ang limang kategorya ng ARIA:**
 
 1. **Roles**: Ano ang elementong ito? (`button`, `tab`, `dialog`)
 2. **Properties**: Ano ang mga katangian nito? (`aria-required`, `aria-haspopup`)
 3. **States**: Ano ang kasalukuyang kondisyon nito? (`aria-expanded`, `aria-checked`)
 4. **Landmarks**: Nasaan ito sa istruktura ng pahina? (`banner`, `navigation`, `main`)
-5. **Live regions**: Paano dapat i-anunsyo ang mga pagbabago? (`aria-live`, `aria-atomic`)
+5. **Live regions**: Paano dapat ipahayag ang mga pagbabago? (`aria-live`, `aria-atomic`)
 
-### Mga mahahalagang pattern ng ARIA para sa modernong web apps
+### Mahahalagang ARIA pattern para sa modernong web apps
 
-Ang mga pattern na ito ay naglutas ng mga pinakakaraniwang hamon sa accessibility sa mga interactive na web application:
+Ang mga pattern na ito ay nag-aalok ng solusyon sa mga karaniwang hamon sa accessibility ng mga interactive na web application:
 
-**Pagpapangalan at paglalarawan ng mga elemento:**
+**Pagbibigay ng pangalan at paglalarawan sa mga elemento:**
 
 ```html
 <!-- aria-label: Provides accessible name when visible text isn't sufficient -->
@@ -810,16 +959,41 @@ function toggleAccordion(trigger) {
 }
 ```
 
-### Mga best practice sa implementasyon ng ARIA
+### Mga pinakamahusay na kasanayan sa implementasyon ng ARIA
 
-Ang ARIA ay makapangyarihan ngunit nangangailangan ng maingat na implementasyon. Ang pagsunod sa mga alituntuning ito ay tumutulong upang matiyak na ang iyong ARIA ay nagpapahusay sa halip na nagpapahirap sa accessibility:
+Makapangyarihan ang ARIA ngunit nangangailangan ng maingat na implementasyon. Ang pagsunod sa mga alituntuning ito ay nakakatulong upang masigurong ang ARIA ay nagpapabuti sa halip na nakakasama sa accessibility:
 
 **🛡️ Mga pangunahing prinsipyo:**
 
-1. **Semantic HTML muna**: Pal
-5. **Magsimula nang simple**: Ang mga komplikadong ARIA implementation ay mas malamang na magkamali
+```mermaid
+flowchart TD
+    A[🚀 Start with semantic HTML] --> B{Does HTML provide needed semantics?}
+    B -->|Yes| C[✅ Use HTML only]
+    B -->|No| D[Consider ARIA enhancement]
+    D --> E{Can you achieve it with simpler means?}
+    E -->|Yes| F[🔄 Simplify approach]
+    E -->|No| G[📝 Implement ARIA carefully]
+    G --> H[🧪 Test with real AT]
+    H --> I{Works as expected?}
+    I -->|No| J[🔧 Debug and fix]
+    I -->|Yes| K[✅ Success!]
+    J --> H
+    F --> C
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style K fill:#e8f5e8
+    style G fill:#fff3e0
+    style H fill:#f3e5f5
+```
+
+1. **Semantic HTML muna**: Laging piliin ang `<button>` kaysa sa `<div role="button">`
+2. **Huwag sirain ang semantika**: Huwag kailanman baguhin ang umiiral na kahulugan ng HTML (iwasan ang `<h1 role="button">`)
+3. **Panatilihin ang keyboard accessibility**: Ang lahat ng interactive na ARIA elements ay dapat ganap na naa-access gamit ang keyboard
+4. **Subukan sa totoong mga user**: Ang suporta sa ARIA ay lubos na nagkakaiba sa pagitan ng mga assistive technologies
+5. **Magsimula sa simple**: Ang mga komplikadong implementasyon ng ARIA ay mas malamang na magkamali
 
-**🔍 Workflow sa Pagsusuri:**
+**🔍 Workflow sa pagsusuri:**
 
 ```mermaid
 graph TD
@@ -833,48 +1007,65 @@ graph TD
     G --> B
 ```
 
-**🚫 Karaniwang Pagkakamali sa ARIA na Dapat Iwasan:**
+**🚫 Karaniwang mga pagkakamali sa ARIA na dapat iwasan:**
+
+- **Magkakasalungat na impormasyon**: Huwag kontrahin ang semantika ng HTML
+- **Sobrang pag-label**: Ang sobrang impormasyon ng ARIA ay nakakalito sa mga user
+- **Static ARIA**: Nakakalimutang i-update ang mga estado ng ARIA kapag nagbago ang nilalaman
+- **Hindi nasubukang implementasyon**: ARIA na gumagana sa teorya ngunit pumapalya sa aktwal na paggamit
+- **Kakulangan sa suporta sa keyboard**: Mga ARIA roles na walang kaukulang interaksyon sa keyboard
 
-- **Nagkakasalungat na impormasyon**: Huwag kontrahin ang HTML semantics
-- **Sobrang pag-label**: Ang sobrang impormasyon sa ARIA ay nakakalito sa mga user
-- **Static ARIA**: Nakakalimutang i-update ang ARIA states kapag nagbabago ang content
-- **Hindi nasubukang mga implementation**: ARIA na gumagana sa teorya ngunit pumapalya sa aktwal na paggamit
-- **Kulang sa suporta sa keyboard**: Mga ARIA roles na walang kaukulang keyboard interactions
+> 💡 **Mga Resource sa Pagsusuri**: Gumamit ng mga tool tulad ng [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) para sa automated na pagsusuri ng ARIA, ngunit laging subukan gamit ang totoong screen readers para sa kumpletong karanasan.
 
-> 💡 **Mga Resource sa Pagsusuri**: Gumamit ng mga tool tulad ng [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) para sa automated na ARIA validation, ngunit laging subukan gamit ang mga tunay na screen reader para sa kumpletong karanasan.
+### 🎭 **Pagsusuri ng Kasanayan sa ARIA: Handa Ka Na Ba sa Mas Komplikadong Interaksyon?**
 
-✅ **Matuto mula sa mga eksperto**: Pag-aralan ang [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) para sa mga subok na pattern at implementation ng mga komplikadong interactive widgets.
+**Sukatin ang iyong kumpiyansa sa ARIA:**
+- Kailan mo pipiliin ang ARIA kaysa sa semantic HTML? (Tip: halos hindi kailanman!)
+- Kaya mo bang ipaliwanag kung bakit ang `<div role="button">` ay kadalasang mas masama kaysa sa `<button>`?
+- Ano ang pinakamahalagang bagay na dapat tandaan tungkol sa pagsusuri ng ARIA?
+
+```mermaid
+pie title "Common ARIA Usage Patterns"
+    "Labels & Descriptions" : 40
+    "Live Regions" : 25
+    "Widget States" : 20
+    "Complex Controls" : 15
+```
+
+> **Mahalagang pananaw**: Karamihan sa paggamit ng ARIA ay para sa pag-label at paglalarawan ng mga elemento. Ang mga komplikadong pattern ng widget ay mas hindi karaniwan kaysa sa inaakala mo!
+
+✅ **Matuto mula sa mga eksperto**: Pag-aralan ang [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) para sa mga subok na pattern at implementasyon ng mga komplikadong interactive na widget.
 
 ## Pagiging Accessible ng Mga Imahe at Media
 
-Ang visual at audio content ay mahalagang bahagi ng modernong web experience, ngunit maaari itong magdulot ng hadlang kung hindi maayos ang pagkakagawa. Ang layunin ay tiyakin na ang impormasyon at emosyonal na epekto ng iyong media ay maabot ang bawat user. Kapag nasanay ka na, nagiging natural na ito.
+Ang visual at audio na nilalaman ay mahalagang bahagi ng modernong karanasan sa web, ngunit maaari itong magdulot ng hadlang kung hindi maingat na na-implementa. Ang layunin ay masigurong ang impormasyon at emosyonal na epekto ng iyong media ay maabot ang bawat user. Kapag nasanay ka na, nagiging natural na ito.
 
-Iba't ibang uri ng media ang nangangailangan ng iba't ibang diskarte sa accessibility. Parang pagluluto—hindi mo gagamutin ang isang maselan na isda sa parehong paraan ng isang matibay na steak. Ang pag-unawa sa mga pagkakaibang ito ay tumutulong sa iyo na pumili ng tamang solusyon para sa bawat sitwasyon.
+Iba't ibang uri ng media ang nangangailangan ng iba't ibang diskarte sa accessibility. Parang pagluluto—hindi mo ituturing ang isang maselan na isda sa parehong paraan ng isang masarap na steak. Ang pag-unawa sa mga pagkakaibang ito ay nakakatulong sa iyong pumili ng tamang solusyon para sa bawat sitwasyon.
 
-### Diskarte sa Accessibility ng Imahe
+### Diskarte sa accessibility ng imahe
 
-Ang bawat imahe sa iyong website ay may layunin. Ang pag-unawa sa layuning iyon ay tumutulong sa iyo na magsulat ng mas mahusay na alternative text at lumikha ng mas inklusibong karanasan.
+Ang bawat imahe sa iyong website ay may layunin. Ang pag-unawa sa layuning iyon ay nakakatulong sa iyong magsulat ng mas mahusay na alternatibong teksto at lumikha ng mas inklusibong karanasan.
 
 **Ang apat na uri ng imahe at ang kanilang mga estratehiya sa alt text:**
 
-**Mga Informative na Imahe** - nagbibigay ng mahalagang impormasyon:
+**Mga impormatibong imahe** - nagbibigay ng mahalagang impormasyon:
 ```html
 <img src="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.tl.png" alt="Sales increased 25% from Q1 to Q2 2024">
 ```
 
-**Mga Decorative na Imahe** - purong visual na walang halaga sa impormasyon:
+**Mga pandekorasyong imahe** - purong visual na walang halaga sa impormasyon:
 ```html
 <img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d57fb6357835906c16938df3d5651c1314c196c3b1c52df98.tl.png" alt="" role="presentation">
 ```
 
-**Mga Functional na Imahe** - nagsisilbing mga button o control:
+**Mga functional na imahe** - nagsisilbing mga button o kontrol:
 ```html
 <button>
   <img src="search-icon.svg" alt="Search">
 </button>
 ```
 
-**Mga Komplikadong Imahe** - mga chart, diagram, infographics:
+**Mga komplikadong imahe** - mga chart, diagram, infographics:
 ```html
 <img src="../../../../translated_images/complex-chart.c831f461a363b446a688be5ccacde20d011221758c902cb082cfd4293534ef17.tl.png" alt="Quarterly sales data" aria-describedby="chart-description">
 <div id="chart-description">
@@ -882,11 +1073,11 @@ Ang bawat imahe sa iyong website ay may layunin. Ang pag-unawa sa layuning iyon
 </div>
 ```
 
-### Accessibility ng Video at Audio
+### Accessibility ng video at audio
 
-**Mga Pangangailangan sa Video:**
-- **Captions**: Tekstong bersyon ng nilalaman na sinasabi at mga sound effect
-- **Audio descriptions**: Paglalarawan ng mga visual na elemento para sa mga bulag na user
+**Mga kinakailangan sa video:**
+- **Captions**: Tekstong bersyon ng nilalaman na sinasabi at mga sound effects
+- **Audio descriptions**: Pagkukuwento ng mga visual na elemento para sa mga bulag na user
 - **Transcripts**: Buong tekstong bersyon ng lahat ng audio at visual na nilalaman
 
 ```html
@@ -897,13 +1088,13 @@ Ang bawat imahe sa iyong website ay may layunin. Ang pag-unawa sa layuning iyon
 </video>
 ```
 
-**Mga Pangangailangan sa Audio:**
+**Mga kinakailangan sa audio:**
 - **Transcripts**: Tekstong bersyon ng lahat ng sinasabi
 - **Visual indicators**: Para sa audio-only na nilalaman, magbigay ng visual na palatandaan
 
-### Modernong Teknik sa Imahe
+### Modernong teknolohiya sa imahe
 
-**Paggamit ng CSS para sa mga decorative na imahe:**
+**Paggamit ng CSS para sa pandekorasyong mga imahe:**
 ```css
 .hero-section {
   background-image: url('decorative-hero.jpg');
@@ -911,7 +1102,7 @@ Ang bawat imahe sa iyong website ay may layunin. Ang pag-unawa sa layuning iyon
 }
 ```
 
-**Responsive na mga imahe na may accessibility:**
+**Mga responsive na imahe na may accessibility:**
 ```html
 <picture>
   <source media="(min-width: 800px)" srcset="large-chart.png">
@@ -920,25 +1111,44 @@ Ang bawat imahe sa iyong website ay may layunin. Ang pag-unawa sa layuning iyon
 </picture>
 ```
 
-✅ **Subukan ang accessibility ng imahe**: Gumamit ng screen reader para mag-navigate sa isang pahina na may mga imahe. Nakakakuha ka ba ng sapat na impormasyon para maunawaan ang nilalaman?
+✅ **Subukan ang accessibility ng imahe**: Gumamit ng screen reader upang mag-navigate sa isang pahina na may mga imahe. Nakakakuha ka ba ng sapat na impormasyon upang maunawaan ang nilalaman?
+
+## Keyboard navigation at focus management
 
-## Keyboard Navigation at Focus Management
+Maraming user ang nagna-navigate sa web gamit lamang ang kanilang mga keyboard. Kasama rito ang mga taong may motor disabilities, mga power user na mas mabilis gumamit ng keyboard kaysa sa mouse, at sinumang nasira ang mouse. Ang pagtiyak na gumagana nang maayos ang iyong site gamit ang input ng keyboard ay mahalaga at kadalasang nagpapabuti sa karanasan ng lahat.
 
-Maraming user ang nagna-navigate sa web gamit lamang ang kanilang mga keyboard. Kasama dito ang mga taong may motor disabilities, mga power user na mas mabilis gumamit ng keyboard kaysa mouse, at sinumang nasira ang mouse. Ang pagtiyak na gumagana nang maayos ang iyong site gamit ang keyboard input ay mahalaga at madalas na nagpapahusay sa site para sa lahat.
+```mermaid
+flowchart LR
+    A[⌨️ Keyboard Navigation] --> B[Tab Order]
+    A --> C[Focus Indicators]
+    A --> D[Skip Links]
+    A --> E[Keyboard Shortcuts]
+    
+    B --> B1[Logical sequence<br/>All interactive elements<br/>No tab traps]
+    C --> C1[Visible outlines<br/>High contrast<br/>Clear boundaries]
+    D --> D1[Skip to main<br/>Skip to nav<br/>Bypass repetitive]
+    E --> E1[Escape to close<br/>Enter to activate<br/>Arrows in groups]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-### Mahahalagang Pattern sa Keyboard Navigation
+### Mahahalagang pattern sa keyboard navigation
 
 **Karaniwang interaksyon sa keyboard:**
-- **Tab**: Mag-move ng focus pasulong sa mga interactive na elemento
-- **Shift + Tab**: Mag-move ng focus pabalik
+- **Tab**: Lumipat ng focus pasulong sa mga interactive na elemento
+- **Shift + Tab**: Lumipat ng focus pabalik
 - **Enter**: I-activate ang mga button at link
 - **Space**: I-activate ang mga button, i-check ang mga checkbox
 - **Arrow keys**: Mag-navigate sa loob ng mga grupo ng component (radio buttons, menus)
 - **Escape**: Isara ang modals, dropdowns, o kanselahin ang mga operasyon
 
-### Mga Pinakamahusay na Praktika sa Focus Management
+### Mga pinakamahusay na kasanayan sa focus management
 
-**Mga nakikitang focus indicator:**
+**Mga nakikitang focus indicators:**
 ```css
 /* Ensure focus is always visible */
 button:focus-visible {
@@ -979,7 +1189,7 @@ button:focus-visible {
 </form>
 ```
 
-### Focus Trapping sa Modals
+### Focus trapping sa modals
 
 Kapag nagbukas ng modal dialogs, ang focus ay dapat manatili sa loob ng modal:
 
@@ -1014,13 +1224,13 @@ function trapFocus(element) {
 }
 ```
 
-✅ **Subukan ang keyboard navigation**: Subukang mag-navigate sa iyong website gamit lamang ang Tab key. Naabot mo ba ang lahat ng interactive na elemento? Ang order ba ng focus ay lohikal? Ang mga focus indicator ba ay malinaw na nakikita?
+✅ **Subukan ang keyboard navigation**: Subukang mag-navigate sa iyong website gamit lamang ang Tab key. Maaabot mo ba ang lahat ng interactive na elemento? Ang order ng focus ba ay lohikal? Ang mga focus indicators ba ay malinaw na nakikita?
 
 ## Accessibility ng Form
 
 Ang mga form ay mahalaga para sa interaksyon ng user at nangangailangan ng espesyal na atensyon sa accessibility.
 
-### Association ng Label at Form Control
+### Pag-uugnay ng label at form control
 
 **Ang bawat form control ay nangangailangan ng label:**
 ```html
@@ -1038,9 +1248,9 @@ Ang mga form ay mahalaga para sa interaksyon ng user at nangangailangan ng espes
 <input type="search" aria-label="Search products" placeholder="Search...">
 ```
 
-### Error Handling at Validation
+### Error handling at validation
 
-**Accessible na mga error message:**
+**Accessible na mga mensahe ng error:**
 ```html
 <label for="email">Email Address:</label>
 <input type="email" id="email" name="email" 
@@ -1051,15 +1261,15 @@ Ang mga form ay mahalaga para sa interaksyon ng user at nangangailangan ng espes
 </div>
 ```
 
-**Mga Pinakamahusay na Praktika sa Form Validation:**
-- Gumamit ng `aria-invalid` para ipakita ang mga invalid na field
-- Magbigay ng malinaw, tiyak na mga error message
+**Mga pinakamahusay na kasanayan sa form validation:**
+- Gumamit ng `aria-invalid` upang ipakita ang mga invalid na field
+- Magbigay ng malinaw at tiyak na mga mensahe ng error
 - Gumamit ng `role="alert"` para sa mahahalagang anunsyo ng error
 - Ipakita ang mga error parehong agad-agad at sa pag-submit ng form
 
-### Fieldsets at Pag-group
+### Fieldsets at pag-group
 
-**I-group ang mga kaugnay na form control:**
+**I-group ang mga kaugnay na form controls:**
 ```html
 <fieldset>
   <legend>Shipping Address</legend>
@@ -1082,11 +1292,11 @@ Ang mga form ay mahalaga para sa interaksyon ng user at nangangailangan ng espes
 
 ## Ang Iyong Accessibility Journey: Mga Pangunahing Aral
 
-Binabati kita! Nakuha mo na ang pangunahing kaalaman para lumikha ng tunay na inklusibong web experience. Nakakatuwa ito! Ang web accessibility ay hindi lamang tungkol sa pagsunod sa mga regulasyon—ito ay tungkol sa pagkilala sa iba't ibang paraan ng interaksyon ng mga tao sa digital na nilalaman at pagdidisenyo para sa kahanga-hangang kompleksidad na iyon.
+Binabati kita! Nakuha mo na ang mga pangunahing kaalaman upang lumikha ng tunay na inklusibong karanasan sa web. Napaka-exciting nito! Ang web accessibility ay hindi lamang tungkol sa pagsunod sa mga regulasyon—ito ay tungkol sa pagkilala sa iba't ibang paraan ng interaksyon ng mga tao sa digital na nilalaman at pagdidisenyo para sa kamangha-manghang kompleksidad na iyon.
 
-Ikaw ngayon ay bahagi ng lumalaking komunidad ng mga developer na nauunawaan na ang mahusay na disenyo ay gumagana para sa lahat. Maligayang pagdating sa grupo!
+Ikaw ngayon ay bahagi ng lumalaking komunidad ng mga developer na nauunawaan na ang mahusay na disenyo ay para sa lahat. Maligayang pagdating sa club!
 
-**🎯 Ang iyong accessibility toolkit ay ngayon ay naglalaman ng:**
+**🎯 Ang iyong accessibility toolkit ngayon ay naglalaman ng:**
 
 | Pangunahing Prinsipyo | Implementasyon | Epekto |
 |----------------|----------------|---------|
@@ -1094,21 +1304,21 @@ Ikaw ngayon ay bahagi ng lumalaking komunidad ng mga developer na nauunawaan na
 | **Inclusive Visual Design** | Sapat na contrast, makabuluhang paggamit ng kulay, nakikitang focus indicators | Malinaw para sa lahat sa anumang kondisyon ng ilaw |
 | **Descriptive Content** | Makabuluhang link text, alt text, headings | Nauunawaan ng mga user ang nilalaman kahit walang visual na konteksto |
 | **Keyboard Accessibility** | Tab order, keyboard shortcuts, focus management | Accessibility para sa motor at kahusayan ng power user |
-| **ARIA Enhancement** | Strategic na paggamit para punan ang semantic gaps | Gumagana ang mga komplikadong application sa assistive technologies |
-| **Comprehensive Testing** | Automated tools + manual verification + real user testing | Nahuhuli ang mga isyu bago makaapekto sa mga user |
+| **ARIA Enhancement** | Strategic na paggamit upang punan ang semantic gaps | Gumagana ang mga komplikadong application sa assistive technologies |
+| **Comprehensive Testing** | Automated tools + manual verification + real user testing | Natutukoy ang mga isyu bago makaapekto sa mga user |
 
 **🚀 Ang iyong susunod na hakbang:**
 
 1. **Isama ang accessibility sa iyong workflow**: Gawing natural na bahagi ng iyong proseso ng development ang pagsusuri
-2. **Matuto mula sa mga tunay na user**: Humingi ng feedback mula sa mga taong gumagamit ng assistive technologies
-3. **Manatiling updated**: Ang mga teknik sa accessibility ay nagbabago kasabay ng mga bagong teknolohiya at pamantayan
+2. **Matuto mula sa totoong mga user**: Humingi ng feedback mula sa mga taong gumagamit ng assistive technologies
+3. **Manatiling updated**: Ang mga teknik sa accessibility ay patuloy na nagbabago kasabay ng mga bagong teknolohiya at pamantayan
 4. **I-promote ang inclusivity**: Ibahagi ang iyong kaalaman at gawing prayoridad ng team ang accessibility
 
-> 💡 **Tandaan**: Ang mga limitasyon sa accessibility ay madalas na humahantong sa mga makabago at eleganteng solusyon na kapaki-pakinabang para sa lahat. Ang curb cuts, captions, at voice controls ay nagsimula bilang mga feature sa accessibility at naging mainstream na mga pagpapabuti.
+> 💡 **Tandaan**: Ang mga limitasyon sa accessibility ay kadalasang nagdudulot ng makabago at eleganteng solusyon na kapaki-pakinabang para sa lahat. Ang curb cuts, captions, at voice controls ay nagsimula bilang mga feature sa accessibility at naging mainstream na mga pagpapabuti.
 
-**Malinaw ang business case**: Ang mga accessible na website ay umaabot sa mas maraming user, mas mataas ang ranggo sa search engines, mas mababa ang maintenance cost, at naiiwasan ang legal na panganib. Ngunit sa totoo lang? Ang tunay na dahilan para magmalasakit sa accessibility ay mas malalim pa. Ang mga accessible na website ay sumasalamin sa pinakamahusay na mga halaga ng web—pagiging bukas, inclusivity, at ang ideya na ang lahat ay nararapat sa pantay na access sa impormasyon.
+**Ang business case ay malinaw na malinaw**: Ang mga accessible na website ay umaabot sa mas maraming user, mas mataas ang ranggo sa search engines, mas mababa ang gastos sa maintenance, at iniiwasan ang mga legal na panganib. Ngunit sa totoo lang? Ang tunay na dahilan para magmalasakit sa accessibility ay mas malalim pa. Ang mga accessible na website ay sumasalamin sa pinakamahusay na mga halaga ng web—pagiging bukas, inclusivity, at ang ideya na ang lahat ay nararapat sa pantay na access sa impormasyon.
 
-Ikaw ay handa nang bumuo ng inklusibong web ng hinaharap. Ang bawat accessible na site na iyong nilikha ay ginagawang mas welcoming ang internet para sa lahat. Napakaganda nito kapag iniisip mo!
+Ikaw ay handa nang bumuo ng inklusibong web ng hinaharap. Ang bawat accessible na site na iyong nilikha ay ginagawang mas welcoming ang internet para sa lahat. Napaka-amazing kapag iniisip mo ito!
 
 ## Karagdagang Resources
 
@@ -1116,8 +1326,8 @@ Ipagpatuloy ang iyong pag-aaral sa accessibility gamit ang mga mahahalagang reso
 
 **📚 Opisyal na Pamantayan at Gabay:**
 - [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - Ang opisyal na pamantayan sa accessibility na may quick reference
-- [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - Komprehensibong pattern para sa interactive widgets
-- [WebAIM Guidelines](https://webaim.org/) - Praktikal, beginner-friendly na gabay sa accessibility
+- [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - Komprehensibong pattern para sa mga interactive na widget
+- [WebAIM Guidelines](https://webaim.org/) - Praktikal at madaling maunawaan na gabay sa accessibility
 
 **🛠️ Mga Tool at Resource sa Pagsusuri:**
 - [axe DevTools](https://www.deque.com/axe/devtools/) - Industry-standard na pagsusuri sa accessibility
@@ -1126,26 +1336,27 @@ Ipagpatuloy ang iyong pag-aaral sa accessibility gamit ang mga mahahalagang reso
 - [Color Oracle](https://colororacle.org/) - Simulator ng color blindness para sa pagsusuri ng disenyo
 
 **🎓 Pag-aaral at Komunidad:**
-- [WebAIM Screen Reader Survey](https://webaim.org/projects/screenreadersurvey9/) - Mga tunay na preference at behavior ng user
+- [WebAIM Screen Reader Survey](https://webaim.org/projects/screenreadersurvey9/) - Mga totoong preference at behavior ng user
 - [Inclusive Components](https://inclusive-components.design/) - Modernong accessible na component patterns
-- [A11y Coffee](https://a11y.coffee/) - Mga mabilisang tip at insight sa accessibility
+- [A11y Coffee](https://a11y.coffee/) - Mga mabilisang accessibility tips at insights
 - [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) - Komprehensibong resources sa accessibility ng W3C
 
 **🎥 Hands-on Learning:**
 - [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/) - Praktikal na gabay sa implementasyon
 - [Deque University](https://dequeuniversity.com/) - Mga propesyonal na kurso sa accessibility training
 
-## Hamon sa GitHub Copilot Agent 🚀
+## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode para tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
 
-**Deskripsyon:** Gumawa ng accessible na modal dialog component na nagpapakita ng tamang focus management, ARIA attributes, at keyboard navigation patterns.
+**Deskripsyon:** Gumawa ng isang accessible na modal dialog component na nagpapakita ng tamang focus management, ARIA attributes, at mga pattern ng keyboard navigation.
+
+**Prompt:** Bumuo ng kumpletong modal dialog component gamit ang HTML, CSS, at JavaScript na may kasamang: tamang focus trapping, ESC key para isara, pag-click sa labas para isara, ARIA attributes para sa screen readers, at nakikitang focus indicators. Siguraduhing ang component ay sumusunod sa WCAG 2.1 AA standards.
 
-**Prompt:** Bumuo ng kumpletong modal dialog component gamit ang HTML, CSS, at JavaScript na may kasamang: tamang focus trapping, ESC key para isara, click outside para isara, ARIA attributes para sa screen readers, at nakikitang focus indicators. Ang modal ay dapat maglaman ng form na may tamang label at error handling. Siguraduhin na ang component ay sumusunod sa WCAG 2.1 AA standards.
 
 ## 🚀 Hamon
 
-Kunin ang HTML na ito at isulat muli upang maging mas accessible, gamit ang mga estratehiyang natutunan mo.
+Gamitin ang HTML na ito at isulat muli ito upang maging mas accessible, gamit ang mga estratehiyang natutunan mo.
 
 ```html
 <!DOCTYPE html>
@@ -1203,21 +1414,21 @@ Kunin ang HTML na ito at isulat muli upang maging mas accessible, gamit ang mga
 </html>
 ```
 
-**Mga Key na Pagpapabuti na Ginawa:**
-- Nagdagdag ng tamang semantic HTML structure
-- Inayos ang heading hierarchy (isang h1, lohikal na progression)
-- Nagdagdag ng makabuluhang link text sa halip na "click here"
-- Naglagay ng tamang ARIA labels para sa navigation
-- Nagdagdag ng lang attribute at tamang meta tags
+**Mga pangunahing pagpapabuti na ginawa:**
+- Idinagdag ang tamang semantic HTML structure
+- Inayos ang hierarchy ng heading (isang h1, lohikal na progression)
+- Idinagdag ang makabuluhang link text sa halip na "click here"
+- Isinama ang tamang ARIA labels para sa navigation
+- Idinagdag ang lang attribute at tamang meta tags
 - Gumamit ng button element para sa mga interactive na elemento
-- Istruktura ng footer content gamit ang tamang landmarks
+- Inayos ang footer content gamit ang tamang landmarks
 
 ## Post-Lecture Quiz
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/)
 
 ## Review at Pag-aaral sa Sarili
 
-Maraming gobyerno ang may mga batas tungkol sa accessibility requirements. Magbasa tungkol sa mga batas sa accessibility ng iyong sariling bansa. Ano ang saklaw, at ano ang hindi? Halimbawa ay [ang website ng gobyerno na ito](https://accessibility.blog.gov.uk/).
+Maraming gobyerno ang may mga batas tungkol sa mga kinakailangan sa accessibility. Magbasa tungkol sa mga batas sa accessibility ng iyong bansa. Ano ang saklaw, at ano ang hindi? Halimbawa ay [ang website ng gobyerno na ito](https://accessibility.blog.gov.uk/).
 
 ## Assignment
  
@@ -1227,5 +1438,65 @@ Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by I
 
 ---
 
+## 🚀 Ang Iyong Timeline sa Accessibility Mastery
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] I-install ang axe DevTools extension sa iyong browser
+- [ ] Magpatakbo ng Lighthouse accessibility audit sa iyong paboritong website
+- [ ] Subukang mag-navigate sa anumang website gamit lamang ang Tab key
+- [ ] Subukan ang built-in na screen reader ng iyong browser (Narrator/VoiceOver)
+
+### 🎯 **Ano ang Maaaring Magawa Mo sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at pagnilayan ang mga insight sa accessibility
+- [ ] Magpraktis sa pagsusulat ng makabuluhang alt text para sa 10 iba't ibang imahe
+- [ ] Mag-audit ng heading structure ng isang website gamit ang HeadingsMap extension
+- [ ] Ayusin ang mga isyu sa accessibility na natagpuan sa challenge HTML
+- [ ] Subukan ang color contrast sa iyong kasalukuyang proyekto gamit ang tool ng WebAIM
+
+### 📅 **Ang Iyong Accessibility Journey sa Loob ng Isang Linggo**
+- [ ] Kumpletuhin ang assignment sa pagsusuri ng isang hindi-accessible na website
+- [ ] I-set up ang iyong development environment gamit ang mga tool sa pagsusuri ng accessibility
+- [ ] Magpraktis ng pag-navigate gamit ang keyboard sa 5 iba't ibang kumplikadong website  
+- [ ] Gumawa ng simpleng form na may tamang mga label, error handling, at ARIA  
+- [ ] Sumali sa isang accessibility community (A11y Slack, WebAIM forum)  
+- [ ] Manood ng mga totoong gumagamit na may kapansanan habang nagna-navigate sa mga website (May magagandang halimbawa sa YouTube)  
+
+### 🌟 **Ang Iyong Buwanang Transformasyon**  
+- [ ] Isama ang accessibility testing sa iyong development workflow  
+- [ ] Mag-ambag sa isang open source project sa pamamagitan ng pag-aayos ng mga isyu sa accessibility  
+- [ ] Magsagawa ng usability testing kasama ang isang taong gumagamit ng assistive technology  
+- [ ] Gumawa ng accessible component library para sa iyong team  
+- [ ] Magtaguyod ng accessibility sa iyong workplace o komunidad  
+- [ ] Mag-mentor ng isang baguhan sa mga konsepto ng accessibility  
+
+### 🏆 **Huling Check-in ng Accessibility Champion**  
+
+**I-celebrate ang iyong accessibility journey:**  
+- Ano ang pinaka-nakakagulat na bagay na natutunan mo tungkol sa kung paano ginagamit ng mga tao ang web?  
+- Aling prinsipyo ng accessibility ang pinaka-nauugnay sa iyong estilo ng pag-develop?  
+- Paano nabago ng pag-aaral tungkol sa accessibility ang iyong pananaw sa disenyo?  
+- Ano ang unang accessibility improvement na nais mong gawin sa isang totoong proyekto?  
+
+```mermaid
+journey
+    title Your Accessibility Confidence Evolution
+    section Today
+      Overwhelmed: 3: You
+      Curious: 4: You
+      Motivated: 5: You
+    section This Week
+      Practicing: 4: You
+      Testing: 5: You
+      Understanding: 5: You
+    section Next Month
+      Advocating: 5: You
+      Leading: 5: You
+      Inclusive by Default: 5: You
+```
+  
+> 🌍 **Ikaw na ngayon ay isang accessibility champion!** Nauunawaan mo na ang magagandang karanasan sa web ay gumagana para sa lahat, anuman ang paraan ng kanilang pag-access sa web. Ang bawat accessible na feature na iyong ginagawa ay nagiging mas inklusibo ang internet. Kailangan ng web ang mga developer na tulad mo na nakikita ang accessibility hindi bilang isang limitasyon, kundi bilang isang pagkakataon upang lumikha ng mas magagandang karanasan para sa lahat ng gumagamit. Maligayang pagdating sa kilusan! 🎉  
+
+---
+
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi eksaktong pagsasalin. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/10-ai-framework-project/README.md b/translations/tl/10-ai-framework-project/README.md
index dac9a1950f..8ffd17b3ee 100644
--- a/translations/tl/10-ai-framework-project/README.md
+++ b/translations/tl/10-ai-framework-project/README.md
@@ -1,33 +1,71 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e2c4ae5688e34b4b8b09d52aec56c79e",
-  "translation_date": "2025-10-22T15:25:13+00:00",
+  "original_hash": "3925b6a1c31c60755eaae4d578232c25",
+  "translation_date": "2025-11-03T13:52:31+00:00",
   "source_file": "10-ai-framework-project/README.md",
   "language_code": "tl"
 }
 -->
 # AI Framework
 
-Naranasan mo na bang ma-overwhelm sa pagbuo ng AI applications mula sa simula? Hindi ka nag-iisa! Ang mga AI framework ay parang Swiss Army knife para sa AI development - makapangyarihang mga tool na makakatipid sa iyo ng oras at sakit ng ulo sa paggawa ng mga intelligent na application. Isipin ang AI framework bilang isang maayos na library: nagbibigay ito ng mga pre-built na bahagi, standardized na API, at matatalinong abstraction para makapag-focus ka sa paglutas ng mga problema kaysa sa pag-aayos ng mga detalye ng implementasyon.
+Naranasan mo na bang ma-overwhelm sa paggawa ng AI applications mula sa simula? Hindi ka nag-iisa! Ang mga AI framework ay parang Swiss Army knife para sa AI development - mga makapangyarihang tool na makakatipid sa iyo ng oras at sakit ng ulo sa paggawa ng mga intelligent na application. Isipin ang AI framework bilang isang maayos na library: nagbibigay ito ng mga pre-built na bahagi, standardized na API, at matatalinong abstraction para makapag-focus ka sa paglutas ng mga problema sa halip na magpakaabala sa mga detalye ng implementasyon.
 
-Sa araling ito, tatalakayin natin kung paano ang mga framework tulad ng LangChain ay maaaring gawing malinis at nababasa ang dating komplikadong AI integration tasks. Matutuklasan mo kung paano harapin ang mga hamon sa totoong mundo tulad ng pagsubaybay sa mga pag-uusap, pag-implement ng tool calling, at pag-juggle ng iba't ibang AI models sa pamamagitan ng isang unified interface.
+Sa araling ito, tatalakayin natin kung paano ang mga framework tulad ng LangChain ay maaaring gawing malinis at madaling basahin ang dating komplikadong mga gawain sa AI integration. Matutuklasan mo kung paano harapin ang mga hamon sa totoong buhay tulad ng pagsubaybay sa mga pag-uusap, paggamit ng mga tool, at pamamahala sa iba't ibang AI models sa pamamagitan ng isang unified interface.
 
-Pagkatapos ng araling ito, malalaman mo kung kailan gagamit ng mga framework sa halip na raw API calls, kung paano epektibong gamitin ang kanilang mga abstraction, at kung paano bumuo ng AI applications na handa para sa totoong mundo. Tuklasin natin kung ano ang magagawa ng AI frameworks para sa iyong mga proyekto.
+Sa pagtatapos ng araling ito, malalaman mo kung kailan gagamit ng mga framework sa halip na raw API calls, kung paano epektibong gamitin ang kanilang mga abstraction, at kung paano gumawa ng mga AI application na handa para sa totoong mundo. Tuklasin natin kung ano ang magagawa ng AI frameworks para sa iyong mga proyekto.
+
+## ⚡ Ano ang Magagawa Mo sa Loob ng 5 Minuto
+
+**Mabilisang Gabay para sa Abalang Developers**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Install LangChain]
+    B --> C[Create ChatOpenAI client]
+    C --> D[Send first prompt]
+    D --> E[See framework power]
+```
+
+- **Minuto 1**: I-install ang LangChain: `pip install langchain langchain-openai`
+- **Minuto 2**: I-set up ang iyong GitHub token at i-import ang ChatOpenAI client
+- **Minuto 3**: Gumawa ng simpleng pag-uusap gamit ang system at human messages
+- **Minuto 4**: Magdagdag ng basic na tool (tulad ng add function) at makita ang AI tool calling
+- **Minuto 5**: Maranasan ang pagkakaiba ng raw API calls at framework abstraction
+
+**Mabilisang Test Code**:
+```python
+from langchain_openai import ChatOpenAI
+from langchain_core.messages import SystemMessage, HumanMessage
+
+llm = ChatOpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="openai/gpt-4o-mini"
+)
+
+response = llm.invoke([
+    SystemMessage(content="You are a helpful coding assistant"),
+    HumanMessage(content="Explain Python functions briefly")
+])
+print(response.content)
+```
+
+**Bakit Mahalaga Ito**: Sa loob ng 5 minuto, mararanasan mo kung paano binabago ng AI frameworks ang komplikadong AI integration sa simpleng method calls. Ito ang pundasyon na nagpapagana sa mga production AI applications.
 
 ## Bakit pumili ng framework?
 
-Handa ka nang bumuo ng AI app - astig! Pero ganito kasi 'yan: may iba't ibang paraan para magawa ito, at bawat isa ay may sariling pros at cons. Parang pagpili kung maglalakad, magbibisikleta, o magmamaneho para makarating sa isang lugar - lahat sila makakarating ka, pero magkaiba ang karanasan (at effort).
+Handa ka nang gumawa ng AI app - ang galing! Pero ganito kasi 'yan: may iba't ibang paraan para magawa ito, at bawat isa ay may sariling pros at cons. Parang pagpili kung maglalakad, magbibisikleta, o magmamaneho papunta sa isang lugar - lahat sila makakarating ka, pero magkaiba ang karanasan (at effort).
 
 Tingnan natin ang tatlong pangunahing paraan para mag-integrate ng AI sa iyong mga proyekto:
 
 | Paraan | Mga Bentahe | Pinakamainam Para sa | Mga Dapat Isaalang-alang |
-|----------|------------|----------|--------------|
-| **Direct HTTP Requests** | Buong kontrol, walang dependencies | Simpleng queries, pag-aaral ng mga fundamentals | Mas verbose na code, manual na error handling |
-| **SDK Integration** | Mas kaunting boilerplate, model-specific optimization | Single-model applications | Limitado sa specific na providers |
+|--------|-------------|----------------------|--------------------------|
+| **Direct HTTP Requests** | Buong kontrol, walang dependencies | Simpleng queries, pag-aaral ng mga pangunahing kaalaman | Mas verbose na code, manual na error handling |
+| **SDK Integration** | Mas kaunting boilerplate, model-specific optimization | Single-model applications | Limitado sa partikular na mga provider |
 | **AI Frameworks** | Unified API, built-in abstractions | Multi-model apps, complex workflows | Learning curve, posibleng over-abstraction |
 
-### Mga Benepisyo ng Framework sa Praktika
+### Mga Benepisyo ng Framework sa Praktikal na Gamit
 
 ```mermaid
 graph TD
@@ -46,26 +84,104 @@ graph TD
 
 **Bakit mahalaga ang frameworks:**
 - **Pinagsasama-sama** ang iba't ibang AI providers sa isang interface
-- **Awtomatikong inaasikaso** ang conversation memory
-- **Nagbibigay** ng ready-made tools para sa mga karaniwang tasks tulad ng embeddings at function calling
-- **Inaayos** ang error handling at retry logic
-- **Ginagawang** nababasa ang mga complex workflows sa pamamagitan ng method calls
+- **Awtomatikong hinahandle** ang conversation memory
+- **Nagbibigay** ng ready-made tools para sa mga karaniwang gawain tulad ng embeddings at function calling
+- **Pinamamahalaan** ang error handling at retry logic
+- **Ginagawang** madaling basahin ang mga kumplikadong workflows
+
+> 💡 **Pro Tip**: Gumamit ng frameworks kapag lumilipat sa iba't ibang AI models o gumagawa ng mga kumplikadong features tulad ng agents, memory, o tool calling. Gumamit ng direct APIs kapag nag-aaral ng mga pangunahing kaalaman o gumagawa ng simpleng, nakatuon na mga application.
 
-> 💡 **Pro Tip**: Gumamit ng frameworks kapag lumilipat sa iba't ibang AI models o gumagawa ng mga complex na features tulad ng agents, memory, o tool calling. Gumamit ng direct APIs kapag nag-aaral ng basics o gumagawa ng simple, focused applications.
+**Bottom line**: Parang pagpili sa pagitan ng mga specialized tools ng isang craftsman at isang kumpletong workshop, ang tamang tool ay nakadepende sa gawain. Ang mga frameworks ay mahusay para sa mga kumplikado at feature-rich na applications, habang ang direct APIs ay angkop para sa mga simpleng use cases.
 
-**Bottom line**: Parang pagpili sa pagitan ng specialized tools ng isang craftsman at isang kumpletong workshop, ito ay tungkol sa pag-match ng tool sa task. Ang frameworks ay mahusay para sa complex, feature-rich applications, habang ang direct APIs ay maganda para sa straightforward na use cases.
+## 🗺️ Ang Iyong Learning Journey sa AI Framework Mastery
+
+```mermaid
+journey
+    title From Raw APIs to Production AI Applications
+    section Framework Foundations
+      Understand abstraction benefits: 4: You
+      Master LangChain basics: 6: You
+      Compare approaches: 7: You
+    section Conversation Systems
+      Build chat interfaces: 5: You
+      Implement memory patterns: 7: You
+      Handle streaming responses: 8: You
+    section Advanced Features
+      Create custom tools: 6: You
+      Master structured output: 8: You
+      Build document systems: 8: You
+    section Production Applications
+      Combine all features: 7: You
+      Handle error scenarios: 8: You
+      Deploy complete systems: 9: You
+```
+
+**Destinasyon ng Iyong Paglalakbay**: Sa pagtatapos ng araling ito, magiging bihasa ka sa AI framework development at makakagawa ng mga sopistikado at production-ready na AI applications na maihahambing sa mga komersyal na AI assistants.
 
 ## Panimula
 
 Sa araling ito, matututunan natin:
 
 - Gumamit ng karaniwang AI framework.
-- Harapin ang mga karaniwang problema tulad ng chat conversations, paggamit ng tools, memory, at context.
-- Gamitin ito para bumuo ng AI apps.
+- Harapin ang mga karaniwang problema tulad ng chat conversations, paggamit ng tool, memory, at context.
+- Gamitin ito para gumawa ng AI apps.
+
+## 🧠 Ecosystem ng AI Framework Development
 
-## Ang iyong unang AI prompt
+```mermaid
+mindmap
+  root((AI Frameworks))
+    Abstraction Benefits
+      Code Simplification
+        Unified APIs
+        Built-in Error Handling
+        Consistent Patterns
+        Reduced Boilerplate
+      Multi-Model Support
+        Provider Agnostic
+        Easy Switching
+        Fallback Options
+        Cost Optimization
+    Core Components
+      Conversation Management
+        Message Types
+        Memory Systems
+        Context Tracking
+        History Persistence
+      Tool Integration
+        Function Calling
+        API Connections
+        Custom Tools
+        Workflow Automation
+    Advanced Features
+      Structured Output
+        Pydantic Models
+        JSON Schemas
+        Type Safety
+        Validation Rules
+      Document Processing
+        Embeddings
+        Vector Stores
+        Similarity Search
+        RAG Systems
+    Production Patterns
+      Application Architecture
+        Modular Design
+        Error Boundaries
+        Async Operations
+        State Management
+      Deployment Strategies
+        Scalability
+        Monitoring
+        Performance
+        Security
+```
+
+**Pangunahing Prinsipyo**: Ang AI frameworks ay nag-a-abstract ng complexity habang nagbibigay ng makapangyarihang abstractions para sa conversation management, tool integration, at document processing, na nagpapahintulot sa mga developer na gumawa ng sopistikadong AI applications na may malinis at maayos na code.
 
-Simulan natin sa mga fundamentals sa pamamagitan ng paggawa ng iyong unang AI application na nagpapadala ng tanong at nakakakuha ng sagot. Parang si Archimedes na natuklasan ang prinsipyo ng displacement sa kanyang paliguan, minsan ang pinakasimpleng obserbasyon ang nagdadala ng pinakamakapangyarihang insight - at ginagawang accessible ng frameworks ang mga insight na ito.
+## Ang Iyong Unang AI Prompt
+
+Simulan natin sa mga pangunahing kaalaman sa pamamagitan ng paggawa ng iyong unang AI application na magpapadala ng tanong at makakakuha ng sagot. Parang si Archimedes na natuklasan ang prinsipyo ng displacement sa kanyang paliguan, minsan ang pinakasimpleng obserbasyon ang nagdadala ng pinakamakapangyarihang insight - at ginagawang accessible ng frameworks ang mga insight na ito.
 
 ### Pag-setup ng LangChain gamit ang GitHub Models
 
@@ -91,9 +207,9 @@ print(response.content)
 - **Kinokonekta** ang GitHub Models gamit ang iyong authentication token
 - **Tinutukoy** kung aling AI model ang gagamitin (`gpt-4o-mini`) - isipin ito bilang pagpili ng iyong AI assistant
 - **Nagpapadala** ng tanong gamit ang `invoke()` method - dito nangyayari ang magic
-- **Kinukuha** at ipinapakita ang sagot - at voilà, nakikipag-chat ka na sa AI!
+- **Kinukuha** at ipinapakita ang sagot - at voilà, nakikipag-usap ka na sa AI!
 
-> 🔧 **Setup Note**: Kung gumagamit ka ng GitHub Codespaces, swerte ka - naka-set up na ang `GITHUB_TOKEN` para sa iyo! Gumagamit ng lokal? Walang problema, kailangan mo lang gumawa ng personal access token na may tamang permissions.
+> 🔧 **Setup Note**: Kung gumagamit ka ng GitHub Codespaces, swerte ka - naka-set up na ang `GITHUB_TOKEN` para sa iyo! Lokal na trabaho? Walang problema, kailangan mo lang gumawa ng personal access token na may tamang permissions.
 
 **Inaasahang output:**
 ```text
@@ -115,25 +231,25 @@ sequenceDiagram
     LC->>App: response.content
 ```
 
-## Pagbuo ng conversational AI
+## Paggawa ng Conversational AI
 
-Ipinakita ng unang halimbawa ang mga basics, pero ito ay isang single exchange lang - magtanong ka, makakakuha ka ng sagot, at tapos na. Sa totoong applications, gusto mong maalala ng AI ang mga napag-usapan, tulad ng kung paano binuo nina Watson at Holmes ang kanilang mga investigatory conversations sa paglipas ng panahon.
+Ang unang halimbawa ay nagpapakita ng mga pangunahing kaalaman, pero ito ay isang single exchange lang - magtatanong ka, makakakuha ng sagot, at tapos na. Sa totoong applications, gusto mong maalala ng AI ang mga napag-usapan, tulad ng kung paano binuo nina Watson at Holmes ang kanilang mga investigatoryong pag-uusap sa paglipas ng panahon.
 
-Dito nagiging partikular na kapaki-pakinabang ang LangChain. Nagbibigay ito ng iba't ibang uri ng mensahe na tumutulong sa pag-structure ng mga pag-uusap at nagbibigay-daan sa iyo na bigyan ang AI ng personalidad. Magtatayo ka ng chat experiences na may context at character.
+Dito nagiging partikular na kapaki-pakinabang ang LangChain. Nagbibigay ito ng iba't ibang uri ng message na tumutulong sa pag-structure ng mga pag-uusap at nagbibigay-daan sa iyo na bigyan ang iyong AI ng personalidad. Magtatayo ka ng mga chat experiences na may context at character.
 
-### Pag-unawa sa mga uri ng mensahe
+### Pag-unawa sa mga Uri ng Mensahe
 
-Isipin ang mga uri ng mensahe bilang iba't ibang "sumbrero" na isinusuot ng mga kalahok sa isang pag-uusap. Gumagamit ang LangChain ng iba't ibang klase ng mensahe para subaybayan kung sino ang nagsasabi ng ano:
+Isipin ang mga uri ng mensahe na ito bilang iba't ibang "sumbrero" na isinusuot ng mga kalahok sa isang pag-uusap. Ginagamit ng LangChain ang iba't ibang klase ng mensahe para subaybayan kung sino ang nagsasabi ng ano:
 
-| Uri ng Mensahe | Layunin | Halimbawa ng Paggamit |
-|--------------|---------|------------------|
+| Uri ng Mensahe | Layunin | Halimbawa ng Gamit |
+|----------------|---------|--------------------|
 | `SystemMessage` | Tinutukoy ang personalidad at ugali ng AI | "Ikaw ay isang helpful coding assistant" |
 | `HumanMessage` | Kinakatawan ang input ng user | "Ipaliwanag kung paano gumagana ang functions" |
-| `AIMessage` | Nagtatago ng mga sagot ng AI | Mga nakaraang sagot ng AI sa pag-uusap |
+| `AIMessage` | Nagtatago ng mga sagot ng AI | Mga naunang sagot ng AI sa pag-uusap |
 
-### Paglikha ng iyong unang pag-uusap
+### Paggawa ng Iyong Unang Pag-uusap
 
-Gumawa tayo ng pag-uusap kung saan ang AI ay may partikular na role. Gagawin natin itong embody si Captain Picard - isang karakter na kilala sa kanyang diplomatic wisdom at leadership:
+Gumawa tayo ng pag-uusap kung saan ang AI natin ay may tiyak na papel. Gagawin natin itong embody si Captain Picard - isang karakter na kilala sa kanyang diplomatic wisdom at leadership:
 
 ```python
 messages = [
@@ -142,10 +258,10 @@ messages = [
 ]
 ```
 
-**Pag-unawa sa setup ng pag-uusap:**
-- **Itinatakda** ang role at personalidad ng AI sa pamamagitan ng `SystemMessage`
-- **Nagbibigay** ng initial user query gamit ang `HumanMessage`
-- **Lumilikha** ng pundasyon para sa multi-turn conversation
+**Pagpapaliwanag sa setup ng pag-uusap:**
+- **Itinatakda** ang papel at personalidad ng AI sa pamamagitan ng `SystemMessage`
+- **Nagbibigay** ng unang tanong ng user gamit ang `HumanMessage`
+- **Lumilikha** ng pundasyon para sa multi-turn na pag-uusap
 
 Ang buong code para sa halimbawang ito ay ganito:
 
@@ -181,7 +297,7 @@ I believe in the importance of diplomacy, reason, and the pursuit of knowledge.
 I hold the ideals of the Federation close to my heart, believing in the importance of cooperation, understanding, and respect for all sentient beings. My experiences have shaped my leadership style, and I strive to be a thoughtful and just captain. How may I assist you further?
 ```
 
-Para mapanatili ang continuity ng pag-uusap (sa halip na i-reset ang context bawat oras), kailangan mong patuloy na idagdag ang mga sagot sa iyong message list. Parang oral traditions na nagpreserba ng mga kwento sa paglipas ng henerasyon, ang approach na ito ay bumubuo ng lasting memory:
+Para mapanatili ang continuity ng pag-uusap (sa halip na i-reset ang context sa bawat pagkakataon), kailangan mong patuloy na idagdag ang mga sagot sa iyong message list. Parang oral traditions na nagpreserba ng mga kwento sa paglipas ng mga henerasyon, ang approach na ito ay bumubuo ng lasting memory:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -216,7 +332,7 @@ print(response.content)
 
 ```
 
-Astig, di ba? Ang nangyayari dito ay tinatawag natin ang LLM nang dalawang beses - una gamit ang initial na dalawang mensahe, at pagkatapos ay muli gamit ang buong history ng pag-uusap. Parang sinusundan talaga ng AI ang ating chat!
+Ang galing, di ba? Ang nangyayari dito ay tinatawag natin ang LLM nang dalawang beses - una gamit ang initial na dalawang mensahe, at pagkatapos ay muli gamit ang buong history ng pag-uusap. Parang sinusundan talaga ng AI ang ating chat!
 
 Kapag pinatakbo mo ang code na ito, makakakuha ka ng pangalawang sagot na parang ganito:
 
@@ -226,13 +342,37 @@ Welcome aboard, Chris! It's always a pleasure to meet those who share a passion
 If you are interested in space exploration, consider education and training in the sciences, engineering, or diplomacy. The values of curiosity, resilience, and teamwork are crucial in Starfleet. Should you ever find yourself on a starship, remember to uphold the principles of the Federation: peace, understanding, and respect for all beings. Your journey can lead you to remarkable adventures, whether in the stars or on the ground. Engage!
 ```
 
+```mermaid
+sequenceDiagram
+    participant User
+    participant App
+    participant LangChain
+    participant AI
+    
+    User->>App: "Tell me about you"
+    App->>LangChain: [SystemMessage, HumanMessage]
+    LangChain->>AI: Formatted conversation
+    AI->>LangChain: Captain Picard response
+    LangChain->>App: AIMessage object
+    App->>User: Display response
+    
+    Note over App: Add AIMessage to conversation
+    
+    User->>App: "Can I join your crew?"
+    App->>LangChain: [SystemMessage, HumanMessage, AIMessage, HumanMessage]
+    LangChain->>AI: Full conversation context
+    AI->>LangChain: Contextual response
+    LangChain->>App: New AIMessage
+    App->>User: Display contextual response
+```
+
 Mukhang pwede na 'yan ;)
 
-## Streaming responses
+## Streaming Responses
 
-Napansin mo ba kung paano parang "nagta-type" ang ChatGPT ng mga sagot nito nang real-time? Iyan ang streaming sa aksyon. Parang nanonood ng isang skilled calligrapher na nagtatrabaho - nakikita ang mga character na lumilitaw stroke by stroke sa halip na biglaang lumitaw - ang streaming ay nagpaparamdam na mas natural ang interaction at nagbibigay ng agarang feedback.
+Napansin mo ba kung paano parang "nagta-type" ang ChatGPT ng mga sagot nito nang real-time? Iyan ang streaming. Parang nanonood ng isang bihasang calligrapher na gumagawa - nakikita ang mga character na lumilitaw stroke by stroke sa halip na biglaang lumitaw - ang streaming ay nagpaparamdam na mas natural ang interaction at nagbibigay ng agarang feedback.
 
-### Pag-implement ng streaming gamit ang LangChain
+### Pag-implement ng Streaming gamit ang LangChain
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -250,19 +390,32 @@ for chunk in llm.stream("Write a short story about a robot learning to code"):
     print(chunk.content, end="", flush=True)
 ```
 
-**Bakit astig ang streaming:**
+**Bakit kahanga-hanga ang streaming:**
 - **Ipinapakita** ang content habang ito ay ginagawa - wala nang awkward na paghihintay!
-- **Pinaparamdam** sa users na may nangyayari talaga
-- **Mas mabilis ang pakiramdam**, kahit technically hindi
-- **Pinapayagan** ang users na magsimulang magbasa habang "nag-iisip" pa ang AI
+- **Pinaparamdam** sa mga user na may nangyayari talaga
+- **Mas mabilis ang pakiramdam**, kahit hindi naman talaga
+- **Pinapayagan** ang mga user na magsimulang magbasa habang "nag-iisip" pa ang AI
+
+> 💡 **Tip sa User Experience**: Ang streaming ay talagang kapaki-pakinabang kapag humaharap sa mas mahahabang sagot tulad ng mga paliwanag sa code, creative writing, o detalyadong tutorials. Magugustuhan ng mga user ang makitang may progreso sa halip na tumitig sa blankong screen!
+
+### 🎯 Pedagogical Check-in: Framework Abstraction Benefits
+
+**Pahinga at Pagmuni-muni**: Naranasan mo na ang kapangyarihan ng AI framework abstractions. Ikumpara ang natutunan mo sa raw API calls mula sa mga nakaraang aralin.
 
-> 💡 **User Experience Tip**: Ang streaming ay talagang kapaki-pakinabang kapag humaharap sa mas mahahabang sagot tulad ng code explanations, creative writing, o detalyadong tutorials. Magugustuhan ng iyong users ang makitang may progress kaysa sa nakatingin sa blankong screen!
+**Mabilisang Self-Assessment**:
+- Kaya mo bang ipaliwanag kung paano pinapadali ng LangChain ang conversation management kumpara sa manual message tracking?
+- Ano ang pagkakaiba ng `invoke()` at `stream()` methods, at kailan mo gagamitin ang bawat isa?
+- Paano pinapabuti ng message type system ng framework ang code organization?
 
-## Prompt templates
+**Koneksyon sa Totoong Mundo**: Ang mga abstraction patterns na natutunan mo (message types, streaming interfaces, conversation memory) ay ginagamit sa bawat pangunahing AI application - mula sa interface ng ChatGPT hanggang sa code assistance ng GitHub Copilot. Master mo na ang parehong architectural patterns na ginagamit ng mga propesyonal na AI development teams.
 
-Ang prompt templates ay parang mga rhetorical structures na ginamit sa classical oratory - isipin kung paano inangkop ni Cicero ang kanyang speech patterns para sa iba't ibang audience habang pinapanatili ang parehong persuasive framework. Pinapayagan ka nitong gumawa ng reusable prompts kung saan maaari mong palitan ang iba't ibang piraso ng impormasyon nang hindi nire-rewrite ang lahat. Kapag na-set up mo na ang template, pupunan mo na lang ang mga variables ng anumang values na kailangan mo.
+**Challenge Question**: Paano mo idedesign ang framework abstraction para sa pag-handle ng iba't ibang AI model providers (OpenAI, Anthropic, Google) gamit ang isang interface? Isaalang-alang ang mga benepisyo at trade-offs.
 
-### Paglikha ng reusable prompts
+## Prompt Templates
+
+Ang prompt templates ay parang mga rhetorical structures na ginagamit sa classical oratory - isipin kung paano ina-adapt ni Cicero ang kanyang speech patterns para sa iba't ibang audience habang pinapanatili ang parehong persuasive framework. Pinapayagan ka nitong gumawa ng reusable prompts kung saan maaari mong palitan ang iba't ibang impormasyon nang hindi kailangang magsulat muli mula sa simula. Kapag na-set up mo na ang template, pupunan mo na lang ang mga variable ng anumang halaga na kailangan mo.
+
+### Paggawa ng Reusable Prompts
 
 ```python
 from langchain_core.prompts import ChatPromptTemplate
@@ -289,14 +442,14 @@ for question in questions:
 **Bakit magugustuhan mo ang paggamit ng templates:**
 - **Pinapanatili** ang consistency ng iyong prompts sa buong app
 - **Wala nang** magulo na string concatenation - malinis, simpleng variables lang
-- **Ang iyong AI** ay predictable dahil pareho ang structure
-- **Madaling** mag-update - baguhin ang template nang isang beses, at fixed na ito kahit saan
+- **Ang iyong AI** ay kumikilos nang predictable dahil pareho ang structure
+- **Madaling i-update** - baguhin ang template nang isang beses, at ayos na ito sa lahat
 
-## Structured output
+## Structured Output
 
-Naiinis ka ba sa pag-parse ng AI responses na bumabalik bilang unstructured text? Ang structured output ay parang pagtuturo sa iyong AI na sundin ang sistematikong approach na ginamit ni Linnaeus para sa biological classification - organized, predictable, at madaling gamitin. Maaari kang humiling ng JSON, specific data structures, o anumang format na kailangan mo.
+Naiinis ka ba sa pag-parse ng AI responses na bumabalik bilang unstructured text? Ang structured output ay parang pagtuturo sa iyong AI na sundin ang sistematikong approach na ginamit ni Linnaeus para sa biological classification - organisado, predictable, at madaling gamitin. Maaari kang humiling ng JSON, specific data structures, o anumang format na kailangan mo.
 
-### Pagde-define ng output schemas
+### Pagde-define ng Output Schemas
 
 ```python
 from langchain_core.prompts import ChatPromptTemplate
@@ -337,18 +490,18 @@ print(f"Strengths: {', '.join(result['strengths'])}")
 ```
 
 **Bakit game-changer ang structured output:**
-- **Wala nang** hula kung anong format ang babalik - consistent ito palagi
-- **Direktang** kumokonekta sa iyong databases at APIs nang walang dagdag na trabaho
-- **Hinuhuli** ang mga kakaibang AI responses bago masira ang iyong app
-- **Ginagawang** mas malinis ang iyong code dahil alam mo kung ano ang iyong ginagamit
+- **Wala nang** hula kung anong format ang babalik - consistent ito sa bawat pagkakataon
+- **Direktang nakakabit** sa iyong databases at APIs nang walang dagdag na trabaho
+- **Nahuhuli** ang mga kakaibang AI responses bago pa masira ang iyong app
+- **Ginagawang** mas malinis ang iyong code dahil alam mo kung ano ang eksaktong gamit mo
 
-## Tool calling
+## Tool Calling
 
-Ngayon narating natin ang isa sa pinakamakapangyarihang features: tools. Ganito mo binibigyan ang iyong AI ng praktikal na kakayahan lampas sa pag-uusap. Parang kung paano ang mga medieval guilds ay nag-develop ng specialized tools para sa specific crafts, maaari mong bigyan ang iyong AI ng mga nakatuon na instrumento. I-describe mo kung anong tools ang available, at kapag may nag-request ng bagay na tumutugma, maaaring kumilos ang iyong AI.
+Ngayon narating natin ang isa sa pinakamakapangyarihang features: tools. Ganito mo binibigyan ang iyong AI ng praktikal na kakayahan lampas sa pag-uusap. Parang kung paano ang mga medieval guilds ay nag-develop ng specialized tools para sa partikular na crafts, maaari mong bigyan ang iyong AI ng mga nakatuon na instrumento. I-describe mo kung anong tools ang available, at kapag may nag-request ng bagay na tumutugma, ang iyong AI ay maaaring kumilos.
 
 ### Paggamit ng Python
 
-Magdagdag tayo ng tools tulad nito:
+Magdagdag tayo ng mga tools tulad nito:
 
 ```python
 from typing_extensions import Annotated, TypedDict
@@ -367,7 +520,7 @@ functions = {
 }
 ```
 
-Ano ang nangyayari dito? Gumagawa tayo ng blueprint para sa tool na tinatawag na `add`. Sa pamamagitan ng pag-inherit mula sa `TypedDict` at paggamit ng mga fancy `Annotated` types para sa `a` at `b`, binibigyan natin ang LLM ng malinaw na larawan kung ano ang ginagawa ng tool na ito at kung ano ang kailangan nito. Ang `functions` dictionary ay parang toolbox natin - sinasabi nito sa ating code kung ano ang gagawin kapag nagpasya ang AI na gumamit ng specific tool.
+Ano ang nangyayari dito? Gumagawa tayo ng blueprint para sa tool na tinatawag na `add`. Sa pamamagitan ng pag-inherit mula sa `TypedDict` at paggamit ng mga fancy na `Annotated` types para sa `a` at `b`, binibigyan natin ang LLM ng malinaw na larawan kung ano ang ginagawa ng tool na ito at kung ano ang kailangan nito. Ang `functions` dictionary ay parang toolbox natin - sinasabi nito sa ating code kung ano ang gagawin kapag nagdesisyon ang AI na gumamit ng partikular na tool.
 
 Tingnan natin kung paano natin tatawagin ang LLM gamit ang tool na ito:
 
@@ -381,7 +534,7 @@ llm = ChatOpenAI(
 llm_with_tools = llm.bind_tools(tools)
 ```
 
-Dito natin tinatawag ang `bind_tools` gamit ang `tools` array at sa gayon ang LLM `llm_with_tools` ay may kaalaman na sa tool na ito.
+Dito natin tinatawag ang `bind_tools` gamit ang ating `tools` array at sa gayon ang LLM `llm_with_tools` ay may kaalaman na sa tool na ito.
 
 Para magamit ang bagong LLM na ito, maaari nating i-type ang sumusunod na code:
 
@@ -395,7 +548,7 @@ if(res.tool_calls):
 print("CONTENT: ",res.content)
 ```
 
-Ngayon kapag tinawag natin ang `invoke` sa bagong llm na may tools, maaaring mapuno ang property na `tool_calls`. Kung oo, anumang identified tools ay may `name` at `args` property na tumutukoy kung anong tool ang dapat tawagin at may arguments. Ang buong code ay ganito:
+Ngayon na tinatawag natin ang `invoke` sa bagong llm na may tools, maaaring mapuno ang property na `tool_calls`. Kung oo, ang anumang natukoy na tools ay may `name` at `args` property na tumutukoy kung anong tool ang dapat tawagin at may mga argumento. Ang buong code ay ganito:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -433,22 +586,21 @@ if(res.tool_calls):
 print("CONTENT: ",res.content)
 ```
 
-Kapag pinatakbo mo ang code na ito, makakakita ka ng output na katulad ng:
+Kapag pinatakbo mo ang code na ito, makikita mo ang output na katulad ng:
 
 ```text
 TOOL CALL:  15
 CONTENT: 
 ```
 
-Sinuri ng AI ang "What is 3 + 12" at kinilala ito bilang isang task para sa `add` tool. Parang isang skilled librarian na alam kung aling reference ang dapat konsultahin base sa uri ng tanong, ginawa nito ang determinasyon mula sa pangalan ng tool, description, at field specifications. Ang resulta na 15 ay nagmula sa ating `functions` dictionary na nag-execute ng tool:
+Ininspeksyon ng AI ang "Ano ang 3 + 12" at kinilala ito bilang isang gawain para sa `add` tool. Parang isang bihasang librarian na alam kung aling reference ang dapat konsultahin base sa uri ng tanong, ginawa nito ang desisyon mula sa pangalan ng tool, description, at field specifications. Ang resulta na 15 ay nagmula sa ating `functions` dictionary na nagpatakbo ng tool:
 
 ```python
 print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
 ```
 
-### Isang mas kawili-wiling tool na tumatawag sa web API
-
-Ang pagdaragdag ng mga numero ay nagpapakita ng konsepto, pero ang mga totoong tools ay karaniwang gumagawa ng mas kumplikadong operasyon, tulad ng pagtawag sa web APIs. Palawakin natin ang halimbawa para hayaan ang AI na kumuha ng content mula sa internet - katulad ng kung paano ang mga telegraph operators ay minsang nagkonekta ng mga malalayong lokasyon:
+### Isang mas kawili-wiling tool na tumatawag sa isang web API
+Ang pagdaragdag ng mga numero ay nagpapakita ng konsepto, ngunit ang mga tunay na tool ay karaniwang gumagawa ng mas kumplikadong mga operasyon, tulad ng pagtawag sa mga web API. Palawakin natin ang ating halimbawa upang hayaan ang AI na kumuha ng nilalaman mula sa internet - katulad ng kung paano ikinonekta ng mga operator ng telegrapo ang mga malalayong lokasyon:
 
 ```python
 class joke(TypedDict):
@@ -473,13 +625,40 @@ query = "Tell me a joke about animals"
 # the rest of the code is the same
 ```
 
-Ngayon kapag pinatakbo mo ang code na ito makakakuha ka ng sagot na parang ganito:
+Ngayon, kung patakbuhin mo ang code na ito, makakakuha ka ng tugon na parang ganito:
 
 ```text
 TOOL CALL:  Chuck Norris once rode a nine foot grizzly bear through an automatic car wash, instead of taking a shower.
 CONTENT:  
 ```
 
+```mermaid
+flowchart TD
+    A[User Query: "Tell me a joke about animals"] --> B[LangChain Analysis]
+    B --> C{Tool Available?}
+    C -->|Yes| D[Select joke tool]
+    C -->|No| E[Generate direct response]
+    
+    D --> F[Extract Parameters]
+    F --> G[Call joke(category="animals")]
+    G --> H[API Request to chucknorris.io]
+    H --> I[Return joke content]
+    I --> J[Display to user]
+    
+    E --> K[AI-generated response]
+    K --> J
+    
+    subgraph "Tool Definition Layer"
+        L[TypedDict Schema]
+        M[Function Implementation]
+        N[Parameter Validation]
+    end
+    
+    D --> L
+    F --> N
+    G --> M
+```
+
 Narito ang buong code:
 
 ```python
@@ -534,7 +713,7 @@ print("CONTENT: ",res.content)
 
 ## Embeddings at pagproseso ng dokumento
 
-Ang embeddings ay isa sa mga pinaka-eleganteng solusyon sa modernong AI. Isipin kung maaari mong kunin ang anumang piraso ng teksto at i-convert ito sa numerical coordinates na naglalarawan ng kahulugan nito. Iyan ang ginagawa ng embeddings - binabago nila ang teksto sa mga puntos sa multi-dimensional space kung saan ang mga magkatulad na konsepto ay nagkakluster. Parang may coordinate system para sa mga ideya, na kahawig ng kung paano inayos ni Mendeleev ang periodic table base sa atomic properties.
+Ang embeddings ay kumakatawan sa isa sa mga pinaka-eleganteng solusyon sa modernong AI. Isipin kung maaari mong kunin ang anumang piraso ng teksto at gawing mga numerikal na coordinate na sumasalamin sa kahulugan nito. Iyan mismo ang ginagawa ng embeddings - binabago nila ang teksto sa mga punto sa multi-dimensional na espasyo kung saan ang mga magkatulad na konsepto ay nagkukumpol. Parang may sistema ng coordinate para sa mga ideya, na kahalintulad sa kung paano inayos ni Mendeleev ang periodic table batay sa mga katangian ng atom.
 
 ### Paglikha at paggamit ng embeddings
 
@@ -569,7 +748,7 @@ for doc in similar_docs:
     print(f"Relevant content: {doc.page_content[:200]}...")
 ```
 
-### Document loaders para sa iba't ibang format
+### Mga loader ng dokumento para sa iba't ibang format
 
 ```python
 from langchain_community.document_loaders import (
@@ -593,14 +772,39 @@ for loader in [pdf_loader, csv_loader, json_loader, web_loader]:
 ```
 
 **Ano ang magagawa mo gamit ang embeddings:**
-- **Bumuo** ng search na talagang nauunawaan ang ibig mong sabihin, hindi lang keyword matching
-- **Lumikha** ng AI na maaaring sumagot sa mga tanong tungkol sa iyong mga dokumento
-- **Gumawa** ng recommendation systems na nagmumungkahi ng tunay na relevant na content
-- **Awtomatikong** mag-organize at mag-categorize ng iyong content
+- **Magbuo** ng search na talagang nauunawaan ang ibig mong sabihin, hindi lang keyword matching
+- **Lumikha** ng AI na makakasagot sa mga tanong tungkol sa iyong mga dokumento
+- **Gumawa** ng mga recommendation system na nagmumungkahi ng tunay na may kaugnayang nilalaman
+- **Awtomatikong** ayusin at ikategorya ang iyong nilalaman
+
+```mermaid
+flowchart LR
+    A[Documents] --> B[Text Splitter]
+    B --> C[Create Embeddings]
+    C --> D[Vector Store]
+    
+    E[User Query] --> F[Query Embedding]
+    F --> G[Similarity Search]
+    G --> D
+    D --> H[Relevant Documents]
+    H --> I[AI Response]
+    
+    subgraph "Vector Space"
+        J[Document A: [0.1, 0.8, 0.3...]]
+        K[Document B: [0.2, 0.7, 0.4...]]
+        L[Query: [0.15, 0.75, 0.35...]]
+    end
+    
+    C --> J
+    C --> K
+    F --> L
+    G --> J
+    G --> K
+```
 
 ## Pagbuo ng kumpletong AI application
 
-Ngayon ay i-integrate natin ang lahat ng natutunan mo sa isang komprehensibong application - isang coding assistant na maaaring sumagot sa mga tanong, gumamit ng tools, at magpanatili ng conversation memory. Parang kung paano pinagsama ng printing press ang mga existing technologies (movable type, ink, paper, at pressure) sa isang bagay na transformative, pagsasamahin natin ang ating AI components sa isang bagay na praktikal at kapaki-pakinabang.
+Ngayon, pagsasamahin natin ang lahat ng natutunan mo sa isang komprehensibong application - isang coding assistant na makakasagot sa mga tanong, gagamit ng mga tool, at magpapanatili ng memorya ng pag-uusap. Katulad ng kung paano pinagsama ng printing press ang mga umiiral na teknolohiya (movable type, tinta, papel, at presyon) sa isang bagay na makabago, pagsasamahin natin ang mga bahagi ng AI sa isang bagay na praktikal at kapaki-pakinabang.
 
 ### Halimbawa ng kumpletong application
 
@@ -687,7 +891,7 @@ while True:
     print(f"🤖 Assistant: {response}\n")
 ```
 
-**Application architecture:**
+**Arkitektura ng application:**
 
 ```mermaid
 graph TD
@@ -707,58 +911,72 @@ graph TD
     H --> C
 ```
 
-**Mga pangunahing tampok na na-implement natin:**
-- **Naaalala** ang buong pag-uusap para sa continuity ng context
-- **Gumagawa ng aksyon** sa pamamagitan ng tool calling, hindi lang pag-uusap
-- **Sumusunod** sa predictable interaction patterns
-- **Awtomatikong inaasikaso** ang error handling at complex workflows
+**Mga pangunahing tampok na naipatupad:**
+- **Naaalala** ang buong pag-uusap para sa tuloy-tuloy na konteksto
+- **Gumagawa ng mga aksyon** sa pamamagitan ng pagtawag sa mga tool, hindi lang pag-uusap
+- **Sumusunod** sa mga predictable na pattern ng interaksyon
+- **Nangangasiwa** ng error handling at mga kumplikadong workflow nang awtomatiko
+
+### 🎯 Pedagogical Check-in: Production AI Architecture
+
+**Pag-unawa sa Arkitektura**: Nakabuo ka ng kumpletong AI application na pinagsasama ang pamamahala ng pag-uusap, pagtawag sa mga tool, at mga structured workflow. Ito ay kumakatawan sa production-level na pagbuo ng AI application.
+
+**Mga Pangunahing Konseptong Na-master**:
+- **Class-Based Architecture**: Organisado, maayos na istruktura ng AI application
+- **Tool Integration**: Pasadyang functionality na lampas sa pag-uusap
+- **Memory Management**: Patuloy na konteksto ng pag-uusap
+- **Error Handling**: Matatag na pag-uugali ng application
 
-## Assignment: Gumawa ng sarili mong AI-powered study assistant
+**Koneksyon sa Industriya**: Ang mga pattern ng arkitektura na iyong naipatupad (mga klase ng pag-uusap, mga sistema ng tool, pamamahala ng memorya) ay parehong pattern na ginagamit sa mga enterprise AI application tulad ng Slack's AI assistant, GitHub Copilot, at Microsoft Copilot. Nagtatayo ka gamit ang propesyonal na antas ng pag-iisip sa arkitektura.
 
-**Layunin**: Gumawa ng AI application na tumutulong sa mga estudyante na matutunan ang mga programming concepts sa pamamagitan ng pagbibigay ng mga paliwanag, halimbawa ng code, at interactive na quizzes.
+**Tanong sa Pagmumuni-muni**: Paano mo palalawakin ang application na ito upang pamahalaan ang maraming user, persistent storage, o integration sa mga external na database? Isaalang-alang ang mga hamon sa scalability at state management.
+
+## Takdang-Aralin: Bumuo ng sarili mong AI-powered study assistant
+
+**Layunin**: Gumawa ng AI application na tumutulong sa mga mag-aaral na matutunan ang mga konsepto sa programming sa pamamagitan ng pagbibigay ng mga paliwanag, halimbawa ng code, at interactive na mga pagsusulit.
 
 ### Mga Kinakailangan
 
-**Core Features (Required):**
-1. **Conversational Interface**: Mag-implement ng chat system na nagpapanatili ng context sa maraming tanong
-2. **Educational Tools**: Gumawa ng hindi bababa sa dalawang tools na tumutulong sa pag-aaral:
-   - Tool para sa paliwanag ng code
-   - Generator ng concept quiz
-3. **Personalized Learning**: Gumamit ng mga mensahe ng sistema upang iangkop ang mga sagot sa iba't ibang antas ng kasanayan  
-4. **Response Formatting**: Magpatupad ng naka-istrukturang output para sa mga tanong sa pagsusulit  
+**Mga Core Feature (Kinakailangan):**
+1. **Conversational Interface**: Magpatupad ng chat system na nagpapanatili ng konteksto sa maraming tanong
+2. **Mga Educational Tool**: Gumawa ng hindi bababa sa dalawang tool na tumutulong sa pag-aaral:
+   - Tool para sa pagpapaliwanag ng code
+   - Generator ng pagsusulit sa konsepto
+3. **Personalized Learning**: Gumamit ng mga system message upang iakma ang mga sagot sa iba't ibang antas ng kasanayan
+4. **Response Formatting**: Magpatupad ng structured output para sa mga tanong sa pagsusulit
 
-### Mga Hakbang sa Pagpapatupad  
+### Mga Hakbang sa Pagpapatupad
 
-**Hakbang 1: I-setup ang iyong environment**  
+**Hakbang 1: I-setup ang iyong environment**
 ```bash
 pip install langchain langchain-openai
 ```
-  
-**Hakbang 2: Pangunahing functionality ng chat**  
-- Gumawa ng `StudyAssistant` na klase  
-- Magpatupad ng memorya ng pag-uusap  
-- Magdagdag ng configuration ng personalidad para sa suporta sa edukasyon  
 
-**Hakbang 3: Magdagdag ng mga kasangkapan sa edukasyon**  
-- **Code Explainer**: Hinahati ang code sa mga bahagi na madaling maunawaan  
-- **Quiz Generator**: Gumagawa ng mga tanong tungkol sa mga konsepto ng programming  
-- **Progress Tracker**: Nagsusubaybay sa mga paksang natakpan  
+**Hakbang 2: Pangunahing functionality ng chat**
+- Gumawa ng `StudyAssistant` class
+- Magpatupad ng memorya ng pag-uusap
+- Magdagdag ng personality configuration para sa suporta sa edukasyon
+
+**Hakbang 3: Magdagdag ng mga educational tool**
+- **Code Explainer**: Hinahati ang code sa mga bahagi na madaling maunawaan
+- **Quiz Generator**: Gumagawa ng mga tanong tungkol sa mga konsepto sa programming
+- **Progress Tracker**: Nagsusubaybay sa mga paksang natalakay
 
-**Hakbang 4: Mga pinahusay na tampok (Opsyonal)**  
-- Magpatupad ng streaming responses para sa mas mahusay na karanasan ng user  
-- Magdagdag ng pag-load ng dokumento upang maisama ang mga materyales ng kurso  
-- Gumawa ng embeddings para sa retrieval ng nilalaman batay sa pagkakatulad  
+**Hakbang 4: Mga Pinahusay na Tampok (Opsyonal)**
+- Magpatupad ng streaming responses para sa mas magandang karanasan ng user
+- Magdagdag ng document loading upang maisama ang mga materyales sa kurso
+- Gumawa ng embeddings para sa similarity-based na pagkuha ng nilalaman
 
-### Pamantayan sa Pagsusuri  
+### Pamantayan sa Pagsusuri
 
-| Tampok | Napakahusay (4) | Maganda (3) | Katanggap-tanggap (2) | Kailangan ng Pagpapabuti (1) |  
-|--------|-----------------|-------------|-----------------------|-----------------------------|  
-| **Daloy ng Pag-uusap** | Natural, may kamalayan sa konteksto | Magandang pagpapanatili ng konteksto | Pangunahing pag-uusap | Walang memorya sa pagitan ng mga palitan |  
-| **Pagsasama ng Kasangkapan** | Maraming kapaki-pakinabang na kasangkapan na gumagana nang maayos | 2+ kasangkapan na maayos na ipinatupad | 1-2 pangunahing kasangkapan | Hindi gumagana ang mga kasangkapan |  
-| **Kalidad ng Code** | Malinis, mahusay na na-dokumentado, may error handling | Magandang istruktura, may kaunting dokumentasyon | Pangunahing functionality ay gumagana | Mahinang istruktura, walang error handling |  
-| **Halaga sa Edukasyon** | Talagang nakakatulong sa pag-aaral, adaptive | Magandang suporta sa pag-aaral | Pangunahing paliwanag | Limitadong benepisyo sa edukasyon |  
+| Tampok | Mahusay (4) | Maganda (3) | Katanggap-tanggap (2) | Kailangan ng Pagpapabuti (1) |
+|--------|-------------|-------------|-----------------------|-----------------------------|
+| **Daloy ng Pag-uusap** | Natural, konteksto-aware na mga sagot | Magandang retention ng konteksto | Pangunahing pag-uusap | Walang memorya sa pagitan ng mga palitan |
+| **Tool Integration** | Maraming kapaki-pakinabang na tool na gumagana nang maayos | 2+ tool na naipatupad nang tama | 1-2 pangunahing tool | Hindi gumagana ang mga tool |
+| **Kalidad ng Code** | Malinis, maayos na dokumentado, may error handling | Magandang istruktura, may kaunting dokumentasyon | Pangunahing functionality ay gumagana | Mahinang istruktura, walang error handling |
+| **Halaga sa Edukasyon** | Tunay na nakakatulong sa pag-aaral, adaptive | Magandang suporta sa pag-aaral | Pangunahing paliwanag | Limitadong benepisyo sa edukasyon |
 
-### Sample na istruktura ng code  
+### Sample na istruktura ng code
 
 ```python
 class StudyAssistant:
@@ -782,42 +1000,101 @@ class StudyAssistant:
 assistant = StudyAssistant(skill_level="intermediate")
 response = assistant.chat("Explain how Python functions work")
 ```
-  
-**Bonus na Hamon:**  
-- Magdagdag ng kakayahan sa input/output ng boses  
-- Magpatupad ng web interface gamit ang Streamlit o Flask  
-- Gumawa ng knowledge base mula sa mga materyales ng kurso gamit ang embeddings  
-- Magdagdag ng pagsubaybay sa progreso at personalized na mga landas sa pag-aaral  
 
-## Buod  
+**Mga Bonus na Hamon:**
+- Magdagdag ng voice input/output capabilities
+- Magpatupad ng web interface gamit ang Streamlit o Flask
+- Gumawa ng knowledge base mula sa mga materyales sa kurso gamit ang embeddings
+- Magdagdag ng progress tracking at personalized learning paths
 
-🎉 Ngayon ay na-master mo na ang mga pangunahing kaalaman ng pagbuo ng AI framework at natutunan kung paano gumawa ng mga sopistikadong AI application gamit ang LangChain. Tulad ng pagkumpleto ng isang komprehensibong apprenticeship, nakakuha ka ng malawak na toolkit ng mga kasanayan. Balikan natin ang iyong mga nagawa.  
+## 📈 Timeline ng Mastery sa Pagbuo ng AI Framework
 
-### Ano ang iyong natutunan  
+```mermaid
+timeline
+    title Production AI Framework Development Journey
+    
+    section Framework Foundations
+        Understanding Abstractions
+            : Master framework vs API decisions
+            : Learn LangChain core concepts
+            : Implement message type systems
+        
+        Basic Integration
+            : Connect to AI providers
+            : Handle authentication
+            : Manage configuration
+    
+    section Conversation Systems
+        Memory Management
+            : Build conversation history
+            : Implement context tracking
+            : Handle session persistence
+        
+        Advanced Interactions
+            : Master streaming responses
+            : Create prompt templates
+            : Implement structured output
+    
+    section Tool Integration
+        Custom Tool Development
+            : Design tool schemas
+            : Implement function calling
+            : Handle external APIs
+        
+        Workflow Automation
+            : Chain multiple tools
+            : Create decision trees
+            : Build agent behaviors
+    
+    section Production Applications
+        Complete System Architecture
+            : Combine all framework features
+            : Implement error boundaries
+            : Create maintainable code
+        
+        Enterprise Readiness
+            : Handle scalability concerns
+            : Implement monitoring
+            : Build deployment strategies
+```
+
+**🎓 Milestone ng Pagtatapos**: Matagumpay mong na-master ang pagbuo ng AI framework gamit ang parehong mga tool at pattern na nagpapagana sa modernong AI applications. Ang mga kasanayang ito ay kumakatawan sa cutting edge ng pagbuo ng AI application at naghahanda sa iyo para sa paggawa ng enterprise-grade na intelligent systems.
+
+**🔄 Mga Kakayahan sa Susunod na Antas**:
+- Handa nang tuklasin ang advanced na AI architectures (agents, multi-agent systems)
+- Handa nang bumuo ng RAG systems gamit ang vector databases
+- May kakayahang gumawa ng multi-modal AI applications
+- Naka-set ang pundasyon para sa pag-scale at pag-optimize ng AI application
 
-**Mga Pangunahing Konsepto ng Framework:**  
-- **Mga Benepisyo ng Framework**: Pag-unawa kung kailan pipiliin ang mga framework kaysa sa direktang API calls  
-- **Mga Pangunahing Kaalaman ng LangChain**: Pag-setup at pag-configure ng koneksyon ng AI model  
-- **Mga Uri ng Mensahe**: Paggamit ng `SystemMessage`, `HumanMessage`, at `AIMessage` para sa naka-istrukturang pag-uusap  
+## Buod
 
-**Mga Advanced na Tampok:**  
-- **Tool Calling**: Paglikha at pagsasama ng mga custom na kasangkapan para sa pinahusay na kakayahan ng AI  
-- **Memorya ng Pag-uusap**: Pagpapanatili ng konteksto sa maraming pag-uusap  
-- **Streaming Responses**: Pagpapatupad ng real-time na paghahatid ng sagot  
-- **Prompt Templates**: Pagbuo ng reusable, dynamic na mga prompt  
-- **Naka-istrukturang Output**: Pagtiyak ng pare-pareho, parseable na mga sagot ng AI  
-- **Embeddings**: Paglikha ng semantic search at kakayahan sa pagproseso ng dokumento  
+🎉 Na-master mo na ngayon ang mga pangunahing kaalaman sa pagbuo ng AI framework at natutunan kung paano gumawa ng mga sopistikadong AI application gamit ang LangChain. Katulad ng pagkumpleto ng isang komprehensibong apprenticeship, nakakuha ka ng malawak na toolkit ng mga kasanayan. Balikan natin ang iyong mga nagawa.
 
-**Praktikal na Aplikasyon:**  
-- **Pagbuo ng Kumpletong Apps**: Pagsasama ng maraming tampok sa mga production-ready na application  
-- **Error Handling**: Pagpapatupad ng matibay na pamamahala ng error at validation  
-- **Pagsasama ng Kasangkapan**: Paglikha ng mga custom na kasangkapan na nagpapalawak ng kakayahan ng AI  
+### Ano ang iyong natutunan
 
-### Mga Pangunahing Puntos  
+**Mga Pangunahing Konsepto ng Framework:**
+- **Mga Benepisyo ng Framework**: Pag-unawa kung kailan pipiliin ang mga framework kaysa sa direktang API calls
+- **Mga Pangunahing Kaalaman sa LangChain**: Pag-setup at pag-configure ng mga koneksyon sa AI model
+- **Mga Uri ng Mensahe**: Paggamit ng `SystemMessage`, `HumanMessage`, at `AIMessage` para sa structured na pag-uusap
 
-> 🎯 **Tandaan**: Ang mga AI framework tulad ng LangChain ay parang mga kaibigan na puno ng tampok na nagtatago ng kumplikado. Perpekto ang mga ito kapag kailangan mo ng memorya ng pag-uusap, tool calling, o gusto mong magtrabaho sa maraming AI model nang hindi nawawala ang iyong katinuan.  
+**Mga Advanced na Tampok:**
+- **Tool Calling**: Paglikha at pagsasama ng mga pasadyang tool para sa pinahusay na kakayahan ng AI
+- **Memorya ng Pag-uusap**: Pagpapanatili ng konteksto sa maraming pag-uusap
+- **Streaming Responses**: Pagpapatupad ng real-time na paghahatid ng sagot
+- **Prompt Templates**: Pagbuo ng reusable, dynamic na mga prompt
+- **Structured Output**: Pagtiyak ng pare-pareho, parseable na mga sagot ng AI
+- **Embeddings**: Paglikha ng semantic search at kakayahan sa pagproseso ng dokumento
 
-**Framework ng Desisyon para sa Pagsasama ng AI:**  
+**Praktikal na Aplikasyon:**
+- **Pagbuo ng Kumpletong Apps**: Pagsasama ng maraming tampok sa production-ready na mga application
+- **Error Handling**: Pagpapatupad ng matatag na pamamahala ng error at validation
+- **Tool Integration**: Paglikha ng mga pasadyang tool na nagpapalawak ng kakayahan ng AI
+
+### Mga Pangunahing Puntos
+
+> 🎯 **Tandaan**: Ang mga AI framework tulad ng LangChain ay parang mga kaibigan na nagtatago ng kumplikado at puno ng mga tampok. Perpekto ang mga ito kapag kailangan mo ng memorya ng pag-uusap, tool calling, o gusto mong magtrabaho gamit ang maraming AI model nang hindi nawawala ang iyong katinuan.
+
+**Framework ng Desisyon para sa AI Integration:**
 
 ```mermaid
 flowchart TD
@@ -834,45 +1111,45 @@ flowchart TD
     G --> K[LangChain basic chat]
     H --> L[LangChain with tools, memory, agents]
 ```
-  
-### Saan ka pupunta mula rito?  
 
-**Simulan ang paggawa ngayon:**  
-- Gamitin ang mga konseptong ito at gumawa ng isang bagay na nagpapasaya sa IYO!  
-- Mag-eksperimento sa iba't ibang AI model gamit ang LangChain - parang playground ng AI models  
-- Gumawa ng mga kasangkapan na talagang nakakatugon sa mga problema mo sa trabaho o proyekto  
+### Saan ka pupunta mula rito?
+
+**Simulan ang paggawa ngayon:**
+- Kunin ang mga konseptong ito at gumawa ng isang bagay na nagpapasaya sa IYO!
+- Maglaro gamit ang iba't ibang AI model sa pamamagitan ng LangChain - parang playground ng mga AI model
+- Gumawa ng mga tool na talagang nakakatulong sa mga problema mo sa trabaho o proyekto
 
-**Handa na para sa susunod na antas?**  
-- **AI Agents**: Gumawa ng mga sistema ng AI na talagang makakapagplano at makakagawa ng mga kumplikadong gawain nang mag-isa  
-- **RAG (Retrieval-Augmented Generation)**: Pagsamahin ang AI sa iyong sariling knowledge bases para sa mga super-powered na application  
-- **Multi-Modal AI**: Magtrabaho gamit ang text, mga larawan, at audio nang sabay-sabay - walang limitasyon ang mga posibilidad!  
-- **Production Deployment**: Matutunan kung paano i-scale ang iyong AI apps at i-monitor ang mga ito sa totoong mundo  
+**Handa na para sa susunod na antas?**
+- **AI Agents**: Gumawa ng mga AI system na talagang makakapagplano at makakagawa ng mga kumplikadong gawain nang mag-isa
+- **RAG (Retrieval-Augmented Generation)**: Pagsamahin ang AI sa sarili mong knowledge bases para sa mga super-powered na application
+- **Multi-Modal AI**: Magtrabaho gamit ang teksto, mga larawan, at audio nang sabay-sabay - walang hanggan ang mga posibilidad!
+- **Production Deployment**: Matutunan kung paano i-scale ang iyong mga AI app at i-monitor ang mga ito sa totoong mundo
 
-**Sumali sa komunidad:**  
-- Ang komunidad ng LangChain ay kahanga-hanga para sa pananatiling updated at pag-aaral ng mga pinakamahusay na kasanayan  
-- Ang GitHub Models ay nagbibigay sa iyo ng access sa mga cutting-edge na kakayahan ng AI - perpekto para sa pag-eksperimento  
-- Patuloy na magsanay gamit ang iba't ibang use cases - bawat proyekto ay magtuturo sa iyo ng bago  
+**Sumali sa komunidad:**
+- Ang komunidad ng LangChain ay kahanga-hanga para sa pananatiling updated at pag-aaral ng mga best practices
+- Ang GitHub Models ay nagbibigay sa iyo ng access sa cutting-edge na AI capabilities - perpekto para sa pag-eeksperimento
+- Patuloy na magsanay gamit ang iba't ibang use cases - bawat proyekto ay magtuturo sa iyo ng bago
 
-Ngayon ay mayroon ka nang kaalaman upang bumuo ng mga intelligent, conversational na application na makakatulong sa mga tao na lutasin ang mga totoong problema. Tulad ng mga artisan ng Renaissance na pinagsama ang artistikong pananaw sa teknikal na kasanayan, maaari mo nang pagsamahin ang mga kakayahan ng AI sa praktikal na aplikasyon. Ang tanong ay: ano ang iyong gagawin? 🚀  
+Ngayon ay mayroon ka nang kaalaman upang bumuo ng mga intelligent, conversational application na makakatulong sa mga tao na lutasin ang mga totoong problema. Katulad ng mga Renaissance craftsmen na pinagsama ang artistikong pananaw sa teknikal na kasanayan, maaari mo nang pagsamahin ang mga kakayahan ng AI sa praktikal na aplikasyon. Ang tanong ay: ano ang iyong gagawin? 🚀
 
-## Hamon ng GitHub Copilot Agent 🚀  
+## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:  
+Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Gumawa ng advanced na AI-powered code review assistant na pinagsasama ang maraming tampok ng LangChain kabilang ang tool calling, structured output, at memorya ng pag-uusap upang magbigay ng komprehensibong feedback sa mga pagsusumite ng code.  
+**Deskripsyon:** Gumawa ng advanced na AI-powered code review assistant na pinagsasama ang maraming tampok ng LangChain kabilang ang tool calling, structured output, at memorya ng pag-uusap upang magbigay ng komprehensibong feedback sa mga code submission.
 
-**Prompt:** Gumawa ng CodeReviewAssistant na klase na nagpapatupad ng:  
-1. Isang kasangkapan para sa pagsusuri ng complexity ng code at pagbibigay ng mga mungkahi para sa pagpapabuti  
-2. Isang kasangkapan para sa pag-check ng code laban sa mga pinakamahusay na kasanayan  
-3. Naka-istrukturang output gamit ang Pydantic models para sa pare-parehong format ng review  
-4. Memorya ng pag-uusap upang subaybayan ang mga session ng review  
-5. Pangunahing chat interface na maaaring humawak ng mga pagsusumite ng code at magbigay ng detalyado, actionable na feedback  
+**Prompt:** Gumawa ng CodeReviewAssistant class na nagpatupad ng:
+1. Tool para sa pagsusuri ng code complexity at pagmumungkahi ng mga pagpapabuti
+2. Tool para sa pag-check ng code laban sa best practices
+3. Structured output gamit ang Pydantic models para sa consistent na format ng review
+4. Memorya ng pag-uusap upang subaybayan ang mga review session
+5. Pangunahing chat interface na maaaring humawak ng mga code submission at magbigay ng detalyado, actionable na feedback
 
-Dapat magawa ng assistant na mag-review ng code sa maraming programming languages, magpanatili ng konteksto sa maraming pagsusumite ng code sa isang session, at magbigay ng parehong summary scores at detalyadong mungkahi para sa pagpapabuti.  
+Dapat magawa ng assistant na suriin ang code sa maraming programming language, magpanatili ng konteksto sa maraming code submission sa isang session, at magbigay ng parehong summary scores at detalyadong mga mungkahi para sa pagpapabuti.
 
-Matuto pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.  
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/2-js-basics/1-data-types/README.md b/translations/tl/2-js-basics/1-data-types/README.md
index bca8f0ded6..41bcb9c299 100644
--- a/translations/tl/2-js-basics/1-data-types/README.md
+++ b/translations/tl/2-js-basics/1-data-types/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d0092f6533ae3ec3adad5b5ece68efaf",
-  "translation_date": "2025-10-22T15:16:29+00:00",
+  "original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
+  "translation_date": "2025-11-03T13:44:02+00:00",
   "source_file": "2-js-basics/1-data-types/README.md",
   "language_code": "tl"
 }
@@ -12,16 +12,33 @@ CO_OP_TRANSLATOR_METADATA:
 ![Mga Pangunahing Kaalaman sa JavaScript - Mga Uri ng Data](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.tl.png)
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
-Ang mga uri ng data ay isa sa mga pangunahing konsepto sa JavaScript na makikita mo sa bawat programang isusulat mo. Isipin ang mga uri ng data na parang sistema ng pag-aayos na ginamit ng mga sinaunang librarian sa Alexandria – may partikular na lugar para sa mga scroll na naglalaman ng tula, matematika, at mga tala ng kasaysayan. Ang JavaScript ay nag-aayos ng impormasyon sa katulad na paraan gamit ang iba't ibang kategorya para sa iba't ibang uri ng data.
+```mermaid
+journey
+    title Your JavaScript Data Types Adventure
+    section Foundation
+      Variables & Constants: 5: You
+      Declaration Syntax: 4: You
+      Assignment Concepts: 5: You
+    section Core Types
+      Numbers & Math: 4: You
+      Strings & Text: 5: You
+      Booleans & Logic: 4: You
+    section Apply Knowledge
+      Type Conversion: 4: You
+      Real-world Examples: 5: You
+      Best Practices: 5: You
+```
+
+Ang mga uri ng data ay isa sa mga pangunahing konsepto sa JavaScript na makikita mo sa bawat programang iyong isusulat. Isipin ang mga uri ng data na parang sistema ng pag-aayos na ginamit ng mga sinaunang librarian sa Alexandria – may partikular na lugar para sa mga scroll na naglalaman ng tula, matematika, at kasaysayan. Ang JavaScript ay nag-aayos ng impormasyon sa katulad na paraan gamit ang iba't ibang kategorya para sa iba't ibang uri ng data.
 
 Sa araling ito, tatalakayin natin ang mga pangunahing uri ng data na nagpapagana sa JavaScript. Matututuhan mo kung paano hawakan ang mga numero, teksto, mga halaga ng true/false, at mauunawaan kung bakit mahalaga ang tamang pagpili ng uri para sa iyong mga programa. Maaaring mukhang abstrakto ang mga konseptong ito sa simula, ngunit sa pagsasanay, magiging natural na ito sa iyo.
 
-Ang pag-unawa sa mga uri ng data ay magpapalinaw sa lahat ng iba pang aspeto ng JavaScript. Tulad ng mga arkitekto na kailangang maunawaan ang iba't ibang materyales sa pagtatayo bago magtayo ng katedral, ang mga pundasyong ito ang susuporta sa lahat ng iyong itatayo sa hinaharap.
+Ang pag-unawa sa mga uri ng data ay magpapalinaw sa lahat ng iba pang aspeto ng JavaScript. Tulad ng mga arkitekto na kailangang maunawaan ang iba't ibang materyales sa pagtatayo bago magtayo ng katedral, ang mga pundasyong ito ang magiging suporta sa lahat ng iyong itatayo sa hinaharap.
 
 ## Pre-Lecture Quiz
 [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/)
 
-Saklaw ng araling ito ang mga pangunahing kaalaman sa JavaScript, ang wika na nagbibigay ng interaktibidad sa web.
+Ang araling ito ay sumasaklaw sa mga pangunahing kaalaman ng JavaScript, ang wika na nagbibigay ng interaktibidad sa web.
 
 > Maaari mong kunin ang araling ito sa [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
 
@@ -33,16 +50,48 @@ Saklaw ng araling ito ang mga pangunahing kaalaman sa JavaScript, ang wika na na
 
 Simulan natin sa mga variable at ang mga uri ng data na bumubuo sa mga ito!
 
+```mermaid
+mindmap
+  root((JavaScript Data))
+    Variables
+      let myVar
+      const PI = 3.14
+      var oldStyle
+    Primitive Types
+      number
+        42
+        3.14
+        -5
+      string
+        "Hello"
+        'World'
+        `Template`
+      boolean
+        true
+        false
+      undefined
+      null
+    Operations
+      Arithmetic
+        + - * / %
+      String Methods
+        concatenation
+        template literals
+      Type Conversion
+        implicit
+        explicit
+```
+
 ## Mga Variable
 
-Ang mga variable ay pangunahing bahagi ng programming. Tulad ng mga garapon na may label na ginamit ng mga alkemista noong medieval para mag-imbak ng iba't ibang sangkap, ang mga variable ay nagbibigay-daan sa iyo na mag-imbak ng impormasyon at bigyan ito ng deskriptibong pangalan para magamit mo ito sa hinaharap. Kailangang tandaan ang edad ng isang tao? I-imbak ito sa isang variable na tinatawag na `age`. Gusto mong subaybayan ang pangalan ng isang user? Itago ito sa isang variable na tinatawag na `userName`.
+Ang mga variable ay pangunahing bahagi ng programming. Tulad ng mga garapon na may label na ginamit ng mga alkemistang medieval para mag-imbak ng iba't ibang sangkap, ang mga variable ay nagbibigay-daan sa iyo na mag-imbak ng impormasyon at bigyan ito ng deskriptibong pangalan para magamit mo ito sa hinaharap. Kailangang tandaan ang edad ng isang tao? I-imbak ito sa isang variable na tinatawag na `age`. Gusto mong subaybayan ang pangalan ng isang user? Itago ito sa isang variable na tinatawag na `userName`.
 
 Tututukan natin ang modernong paraan ng paggawa ng mga variable sa JavaScript. Ang mga teknik na matututunan mo dito ay kumakatawan sa mga taon ng ebolusyon ng wika at pinakamahusay na kasanayan na binuo ng komunidad ng programming.
 
 Ang paggawa at **pagdeklara** ng isang variable ay may sumusunod na syntax **[keyword] [name]**. Binubuo ito ng dalawang bahagi:
 
 - **Keyword**. Gamitin ang `let` para sa mga variable na maaaring magbago, o `const` para sa mga halaga na mananatiling pareho.
-- **Pangalan ng variable**, ito ay isang deskriptibong pangalan na pipiliin mo.
+- **Pangalan ng variable**, ito ay isang deskriptibong pangalan na ikaw mismo ang pipili.
 
 ✅ Ang keyword na `let` ay ipinakilala sa ES6 at nagbibigay sa iyong variable ng tinatawag na _block scope_. Inirerekomenda na gamitin mo ang `let` o `const` sa halip na ang mas lumang keyword na `var`. Tatalakayin natin ang block scopes nang mas malalim sa mga susunod na bahagi.
 
@@ -67,10 +116,10 @@ Ang paggawa at **pagdeklara** ng isang variable ay may sumusunod na syntax **[ke
 
    **Paano gumagana ang assignment:**
    - Ang operator na `=` ay nag-a-assign ng halaga na 123 sa ating variable
-   - Ang variable ay ngayon naglalaman ng halagang ito sa halip na undefined
-   - Maaari mong i-reference ang halagang ito sa buong code gamit ang `myVariable`
+   - Ang variable ay naglalaman na ngayon ng halagang ito sa halip na undefined
+   - Maaari mong i-refer ang halagang ito sa buong code gamit ang `myVariable`
 
-   > Tandaan: ang paggamit ng `=` sa araling ito ay nangangahulugan na gumagamit tayo ng "assignment operator", na ginagamit upang magtakda ng halaga sa isang variable. Hindi ito nangangahulugang pagkakapantay-pantay.
+   > Tandaan: ang paggamit ng `=` sa araling ito ay nangangahulugan na ginagamit natin ang "assignment operator", na ginagamit upang mag-set ng halaga sa isang variable. Hindi ito nangangahulugang pagkakapantay-pantay.
 
 3. **Gawin ito sa mas matalinong paraan**. Sa totoo lang, pagsamahin natin ang dalawang hakbang na iyon:
 
@@ -83,26 +132,54 @@ Ang paggawa at **pagdeklara** ng isang variable ay may sumusunod na syntax **[ke
     - Ito ang karaniwang kasanayan sa mga developer
     - Binabawasan nito ang haba ng code habang pinapanatili ang kalinawan
 
-4. **Magbago ng isip**. Paano kung gusto nating mag-imbak ng ibang numero?
+4. **Baguhin ang iyong isip**. Paano kung gusto nating mag-imbak ng ibang numero?
 
    ```javascript
    myVariable = 321;
    ```
 
    **Pag-unawa sa reassignment:**
-   - Ang variable ay ngayon naglalaman ng 321 sa halip na 123
+   - Ang variable ay naglalaman na ngayon ng 321 sa halip na 123
    - Ang dating halaga ay napalitan – ang mga variable ay nag-iimbak lamang ng isang halaga sa isang pagkakataon
    - Ang mutability na ito ang pangunahing katangian ng mga variable na idineklara gamit ang `let`
 
    ✅ Subukan ito! Maaari kang magsulat ng JavaScript mismo sa iyong browser. Buksan ang isang browser window at pumunta sa Developer Tools. Sa console, makikita mo ang isang prompt; i-type ang `let myVariable = 123`, pindutin ang return, pagkatapos ay i-type ang `myVariable`. Ano ang nangyayari? Tandaan, matututunan mo ang higit pa tungkol sa mga konseptong ito sa mga susunod na aralin.
 
-## Mga Constants
+### 🧠 **Pag-master ng Mga Variable: Pagiging Komportable**
 
-Minsan kailangan mong mag-imbak ng impormasyon na hindi dapat magbago habang tumatakbo ang programa. Isipin ang mga constants na parang mga prinsipyo ng matematika na itinatag ni Euclid sa sinaunang Greece – kapag napatunayan at naitala, nananatili itong hindi nagbabago para sa lahat ng hinaharap na sanggunian.
+**Tingnan natin kung gaano ka komportable sa mga variable:**
+- Kaya mo bang ipaliwanag ang pagkakaiba ng pagdeklara at pag-a-assign ng variable?
+- Ano ang mangyayari kung susubukan mong gamitin ang isang variable bago mo ito ideklara?
+- Kailan mo pipiliin ang `let` sa halip na `const` para sa isang variable?
 
-Ang mga constants ay gumagana nang katulad sa mga variable, ngunit may mahalagang limitasyon: kapag na-assign mo na ang kanilang halaga, hindi na ito maaaring baguhin. Ang immutability na ito ay tumutulong na maiwasan ang mga aksidenteng pagbabago sa mga kritikal na halaga sa iyong programa.
+```mermaid
+stateDiagram-v2
+    [*] --> Declared: let myVar
+    Declared --> Assigned: myVar = 123
+    Assigned --> Reassigned: myVar = 456
+    Assigned --> [*]: Variable ready!
+    Reassigned --> [*]: Updated value
+    
+    note right of Declared
+        Variable exists but
+        has no value (undefined)
+    end note
+    
+    note right of Assigned
+        Variable contains
+        the value 123
+    end note
+```
 
-Ang deklarasyon at initialization ng isang constant ay sumusunod sa parehong mga konsepto ng isang variable, maliban sa paggamit ng keyword na `const`. Karaniwang idinedeklara ang mga constants gamit ang lahat ng uppercase na letra.
+> **Mabilis na tip**: Isipin ang mga variable bilang mga kahon na may label. Gumawa ka ng kahon (`let`), maglagay ng isang bagay dito (`=`), at maaari mong palitan ang laman nito kung kinakailangan!
+
+## Constants
+
+Minsan kailangan mong mag-imbak ng impormasyon na hindi dapat magbago habang tumatakbo ang programa. Isipin ang constants na parang mga prinsipyo ng matematika na itinatag ni Euclid sa sinaunang Greece – kapag napatunayan at naitala, nananatili itong hindi nagbabago para sa lahat ng susunod na sanggunian.
+
+Ang constants ay gumagana nang katulad sa mga variable, ngunit may mahalagang limitasyon: kapag na-assign mo na ang kanilang halaga, hindi na ito maaaring baguhin. Ang immutability na ito ay nakakatulong na maiwasan ang hindi sinasadyang pagbabago sa mga mahahalagang halaga sa iyong programa.
+
+Ang deklarasyon at inisyal na pag-assign ng isang constant ay sumusunod sa parehong konsepto ng isang variable, maliban sa paggamit ng keyword na `const`. Ang constants ay karaniwang idinedeklara gamit ang lahat ng uppercase na letra.
 
 ```javascript
 const MY_VARIABLE = 123;
@@ -110,13 +187,13 @@ const MY_VARIABLE = 123;
 
 **Ano ang ginagawa ng code na ito:**
 - **Gumagawa** ng constant na pinangalanang `MY_VARIABLE` na may halagang 123
-- **Gumagamit** ng uppercase naming convention para sa mga constants
-- **Pinipigilan** ang anumang mga pagbabago sa halagang ito sa hinaharap
+- **Gumagamit** ng uppercase naming convention para sa constants
+- **Pinipigilan** ang anumang pagbabago sa halagang ito sa hinaharap
 
-Ang mga constants ay may dalawang pangunahing tuntunin:
+Ang constants ay may dalawang pangunahing tuntunin:
 
-- **Dapat mong bigyan ito ng halaga kaagad** – walang mga empty constants na pinapayagan!
-- **Hindi mo maaaring baguhin ang halagang iyon** – magtapon ng error ang JavaScript kung susubukan mo. Tingnan natin ang ibig kong sabihin:
+- **Dapat mong bigyan agad ng halaga** – walang puwedeng walang laman na constants!
+- **Hindi mo maaaring baguhin ang halagang iyon** – maglalabas ng error ang JavaScript kung susubukan mo. Tingnan natin ang ibig sabihin nito:
 
    **Simpleng halaga** - Ang sumusunod ay HINDI pinapayagan:
    
@@ -127,10 +204,10 @@ Ang mga constants ay may dalawang pangunahing tuntunin:
 
    **Ano ang dapat tandaan:**
    - **Mga pagtatangka** na i-reassign ang isang constant ay magdudulot ng error
-   - **Pinoprotektahan** ang mahahalagang halaga mula sa aksidenteng pagbabago
+   - **Pinoprotektahan** ang mahahalagang halaga mula sa hindi sinasadyang pagbabago
    - **Tinitiyak** na ang halaga ay nananatiling pare-pareho sa buong programa
  
-   **Ang reference ng object ay protektado** - Ang sumusunod ay HINDI pinapayagan:
+   **Protektado ang reference ng object** - Ang sumusunod ay HINDI pinapayagan:
    
       ```javascript
       const obj = { a: 3 };
@@ -142,7 +219,7 @@ Ang mga constants ay may dalawang pangunahing tuntunin:
    - **Pinoprotektahan** ang reference sa orihinal na object
    - **Pinapanatili** ang pagkakakilanlan ng object sa memorya
 
-    **Ang halaga ng object ay hindi protektado** - Ang sumusunod ay PINAPAYAGAN:
+    **Hindi protektado ang halaga ng object** - Ang sumusunod ay PINAPAYAGAN:
     
       ```javascript
       const obj = { a: 3 };
@@ -152,19 +229,19 @@ Ang mga constants ay may dalawang pangunahing tuntunin:
       **Pag-unawa sa nangyayari dito:**
       - **Binabago** ang halaga ng property sa loob ng object
       - **Pinapanatili** ang parehong reference ng object
-      - **Ipinapakita** na ang mga nilalaman ng object ay maaaring magbago habang ang reference ay nananatiling pareho
+      - **Ipinapakita** na ang mga nilalaman ng object ay maaaring magbago habang nananatiling pareho ang reference
 
-   > Tandaan, ang `const` ay nangangahulugan na ang reference ay protektado mula sa reassignment. Ang halaga ay hindi _immutable_ at maaaring magbago, lalo na kung ito ay isang kumplikadong construct tulad ng isang object.
+   > Tandaan, ang `const` ay nangangahulugang protektado ang reference mula sa reassignment. Ang halaga ay hindi _immutable_ at maaaring magbago, lalo na kung ito ay isang komplikadong construct tulad ng isang object.
 
 ## Mga Uri ng Data
 
-Ang JavaScript ay nag-aayos ng impormasyon sa iba't ibang kategorya na tinatawag na mga uri ng data. Ang konseptong ito ay kahalintulad sa kung paano ikinategorya ng mga sinaunang iskolar ang kaalaman – pinagkaiba ni Aristotle ang iba't ibang uri ng pangangatwiran, alam na ang mga prinsipyo ng lohika ay hindi maaaring pantay na ilapat sa tula, matematika, at natural na pilosopiya.
+Ang JavaScript ay nag-aayos ng impormasyon sa iba't ibang kategorya na tinatawag na mga uri ng data. Ang konseptong ito ay kahalintulad sa kung paano ikinategorya ng mga sinaunang iskolar ang kaalaman – inihiwalay ni Aristotle ang iba't ibang uri ng pangangatwiran, alam na ang mga prinsipyo ng lohika ay hindi maaaring pantay na ilapat sa tula, matematika, at natural na pilosopiya.
 
-Mahalaga ang mga uri ng data dahil ang iba't ibang operasyon ay gumagana sa iba't ibang uri ng impormasyon. Tulad ng hindi mo maaaring magsagawa ng arithmetic sa pangalan ng isang tao o mag-ayos ng isang equation sa matematika, ang JavaScript ay nangangailangan ng tamang uri ng data para sa bawat operasyon. Ang pag-unawa dito ay nakakaiwas sa mga error at nagpapabuti sa pagiging maaasahan ng iyong code.
+Mahalaga ang mga uri ng data dahil ang iba't ibang operasyon ay gumagana sa iba't ibang uri ng impormasyon. Tulad ng hindi mo maaaring gawin ang aritmetika sa pangalan ng isang tao o i-alpabeto ang isang equation sa matematika, ang JavaScript ay nangangailangan ng tamang uri ng data para sa bawat operasyon. Ang pag-unawa dito ay nakakaiwas sa mga error at nagpapaganda ng pagiging maaasahan ng iyong code.
 
-Ang mga variable ay maaaring mag-imbak ng maraming iba't ibang uri ng halaga, tulad ng mga numero at teksto. Ang iba't ibang uri ng mga halagang ito ay kilala bilang **uri ng data**. Ang mga uri ng data ay mahalagang bahagi ng pagbuo ng software dahil nakakatulong ito sa mga developer na magdesisyon kung paano dapat isulat ang code at kung paano dapat tumakbo ang software. Bukod dito, ang ilang mga uri ng data ay may natatanging mga tampok na tumutulong sa pagbabago o pagkuha ng karagdagang impormasyon sa isang halaga.
+Ang mga variable ay maaaring mag-imbak ng iba't ibang uri ng halaga, tulad ng mga numero at teksto. Ang iba't ibang uri ng mga halagang ito ay kilala bilang **uri ng data**. Ang mga uri ng data ay mahalagang bahagi ng pagbuo ng software dahil nakakatulong ito sa mga developer na magdesisyon kung paano dapat isulat ang code at kung paano dapat tumakbo ang software. Bukod pa rito, ang ilang uri ng data ay may natatanging mga tampok na tumutulong sa pagbabago o pagkuha ng karagdagang impormasyon sa isang halaga.
 
-✅ Ang mga Uri ng Data ay tinutukoy din bilang mga primitive ng data sa JavaScript, dahil ang mga ito ang pinakamababang antas ng mga uri ng data na ibinibigay ng wika. Mayroong 7 primitive na uri ng data: string, number, bigint, boolean, undefined, null, at symbol. Maglaan ng sandali upang mailarawan kung ano ang maaaring kumatawan sa bawat isa sa mga primitive na ito. Ano ang `zebra`? Paano naman ang `0`? `true`?
+✅ Ang mga Uri ng Data ay tinatawag ding mga JavaScript data primitives, dahil sila ang pinakamababang antas ng mga uri ng data na ibinibigay ng wika. Mayroong 7 primitive na uri ng data: string, number, bigint, boolean, undefined, null, at symbol. Maglaan ng sandali upang maisip kung ano ang maaaring kumatawan sa bawat isa sa mga primitives na ito. Ano ang `zebra`? Paano naman ang `0`? `true`?
 
 ### Mga Numero
 
@@ -176,38 +253,78 @@ Tandaan ang ating variable mula kanina? Ang 123 na ating iniimbak ay talagang is
 let myVariable = 123;
 ```
 
-**Mga pangunahing katangian:**
+**Mga Pangunahing Katangian:**
 - Awtomatikong kinikilala ng JavaScript ang mga numerong halaga
 - Maaari kang magsagawa ng mga operasyong matematika gamit ang mga variable na ito
-- Walang kinakailangang explicit na deklarasyon ng uri
+- Walang kinakailangang tahasang deklarasyon ng uri
 
 Ang mga variable ay maaaring mag-imbak ng lahat ng uri ng mga numero, kabilang ang mga decimal o negatibong numero. Ang mga numero ay maaari ring gamitin sa mga arithmetic operator, na tatalakayin sa [susunod na seksyon](../../../../2-js-basics/1-data-types).
 
+```mermaid
+flowchart LR
+    A["🔢 Numbers"] --> B["➕ Addition"]
+    A --> C["➖ Subtraction"]
+    A --> D["✖️ Multiplication"]
+    A --> E["➗ Division"]
+    A --> F["📊 Remainder %"]
+    
+    B --> B1["1 + 2 = 3"]
+    C --> C1["5 - 3 = 2"]
+    D --> D1["4 * 3 = 12"]
+    E --> E1["10 / 2 = 5"]
+    F --> F1["7 % 3 = 1"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ### Mga Arithmetic Operator
 
-Ang mga arithmetic operator ay nagbibigay-daan sa iyo na magsagawa ng mga kalkulasyong matematika sa JavaScript. Ang mga operator na ito ay sumusunod sa parehong mga prinsipyo na ginamit ng mga matematikong sa loob ng maraming siglo – ang parehong mga simbolo na lumitaw sa mga gawa ng mga iskolar tulad ni Al-Khwarizmi, na bumuo ng notasyong algebra.
+Ang mga arithmetic operator ay nagbibigay-daan sa iyo na magsagawa ng mga kalkulasyong matematika sa JavaScript. Ang mga operator na ito ay sumusunod sa parehong mga prinsipyo na ginamit ng mga mathematician sa loob ng maraming siglo – ang parehong mga simbolo na lumitaw sa mga gawa ng mga iskolar tulad ni Al-Khwarizmi, na bumuo ng algebraic notation.
 
-Ang mga operator ay gumagana tulad ng inaasahan mo mula sa tradisyunal na matematika: plus para sa addition, minus para sa subtraction, at iba pa.
+Ang mga operator ay gumagana tulad ng inaasahan mula sa tradisyunal na matematika: plus para sa addition, minus para sa subtraction, at iba pa.
 
-Mayroong ilang mga uri ng operator na maaaring gamitin kapag nagsasagawa ng mga arithmetic function, at ilan ay nakalista dito:
+Mayroong ilang mga uri ng operator na magagamit kapag nagsasagawa ng mga arithmetic function, at ilan ay nakalista dito:
 
 | Simbolo | Paglalarawan                                                              | Halimbawa                          |
-| ------- | ------------------------------------------------------------------------- | ---------------------------------- |
-| `+`     | **Addition**: Kinakalkula ang kabuuan ng dalawang numero                  | `1 + 2 //inaasahang sagot ay 3`    |
-| `-`     | **Subtraction**: Kinakalkula ang pagkakaiba ng dalawang numero            | `1 - 2 //inaasahang sagot ay -1`   |
-| `*`     | **Multiplication**: Kinakalkula ang produkto ng dalawang numero           | `1 * 2 //inaasahang sagot ay 2`    |
-| `/`     | **Division**: Kinakalkula ang quotient ng dalawang numero                 | `1 / 2 //inaasahang sagot ay 0.5`  |
-| `%`     | **Remainder**: Kinakalkula ang natitira mula sa division ng dalawang numero| `1 % 2 //inaasahang sagot ay 1`    |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Addition**: Kinakalkula ang kabuuan ng dalawang numero                 | `1 + 2 //expected answer is 3`   |
+| `-`    | **Subtraction**: Kinakalkula ang pagkakaiba ng dalawang numero           | `1 - 2 //expected answer is -1`  |
+| `*`    | **Multiplication**: Kinakalkula ang produkto ng dalawang numero          | `1 * 2 //expected answer is 2`   |
+| `/`    | **Division**: Kinakalkula ang quotient ng dalawang numero                | `1 / 2 //expected answer is 0.5` |
+| `%`    | **Remainder**: Kinakalkula ang natira mula sa division ng dalawang numero | `1 % 2 //expected answer is 1`   |
+
+✅ Subukan ito! Subukan ang isang arithmetic operation sa console ng iyong browser. Nagulat ka ba sa mga resulta?
+
+### 🧮 **Pag-check ng Kakayahan sa Math: Pagkalkula nang May Kumpiyansa**
+
+**Subukan ang iyong pag-unawa sa arithmetic:**
+- Ano ang pagkakaiba ng `/` (division) at `%` (remainder)?
+- Kaya mo bang hulaan kung ano ang `10 % 3`? (Hint: hindi ito 3.33...)
+- Bakit maaaring maging kapaki-pakinabang ang remainder operator sa programming?
+
+```mermaid
+pie title "JavaScript Number Operations Usage"
+    "Addition (+)" : 35
+    "Subtraction (-)" : 20
+    "Multiplication (*)" : 20
+    "Division (/)" : 15
+    "Remainder (%)" : 10
+```
 
-✅ Subukan ito! Subukan ang isang arithmetic operation sa console ng iyong browser. Ikaw ba ay nagulat sa mga resulta?
+> **Insight sa Totoong Mundo**: Ang remainder operator (%) ay sobrang kapaki-pakinabang para sa pag-check kung ang mga numero ay even/odd, paggawa ng mga pattern, o pag-ikot sa mga array!
 
-### Mga String
+### Mga Strings
 
-Sa JavaScript, ang tekstuwal na data ay kinakatawan bilang mga string. Ang terminong "string" ay nagmula sa konsepto ng mga karakter na magkakasunod na pinagsama-sama, tulad ng paraan ng mga tagasulat sa mga monasteryo noong medieval na nag-uugnay ng mga letra upang bumuo ng mga salita at pangungusap sa kanilang mga manuskrito.
+Sa JavaScript, ang tekstuwal na data ay kinakatawan bilang mga string. Ang terminong "string" ay nagmula sa konsepto ng mga character na magkakasunod na pinagsama-sama, tulad ng paraan ng mga tagasulat sa mga monasteryo noong medieval na nag-uugnay ng mga letra upang bumuo ng mga salita at pangungusap sa kanilang mga manuskrito.
 
-Ang mga string ay mahalaga sa web development. Ang bawat piraso ng teksto na ipinapakita sa isang website – mga username, label ng button, mga mensahe ng error, nilalaman – ay hinahawakan bilang string data. Ang pag-unawa sa mga string ay mahalaga para sa paggawa ng functional na user interfaces.
+Ang mga string ay mahalaga sa web development. Ang bawat piraso ng teksto na ipinapakita sa isang website – mga username, label ng button, mga mensahe ng error, nilalaman – ay hinahawakan bilang string data. Ang pag-unawa sa mga string ay mahalaga para sa paggawa ng mga functional na user interface.
 
-Ang mga string ay mga set ng mga karakter na nakapaloob sa pagitan ng single o double quotes.
+Ang mga string ay mga set ng mga character na nakapaloob sa pagitan ng single o double quotes.
 
 ```javascript
 'This is a string'
@@ -223,13 +340,36 @@ let myString = 'This is a string value stored in a variable';
 
 Tandaan na gumamit ng mga quotes kapag nagsusulat ng string, kung hindi, iisipin ng JavaScript na ito ay pangalan ng variable.
 
-### Pag-format ng mga String
+```mermaid
+flowchart TD
+    A["📝 Strings"] --> B["Single Quotes"]
+    A --> C["Double Quotes"]
+    A --> D["Template Literals"]
+    
+    B --> B1["'Hello World'"]
+    C --> C1["\"Hello World\""]
+    D --> D1["`Hello \${name}`"]
+    
+    E["String Operations"] --> F["Concatenation"]
+    E --> G["Template Insertion"]
+    E --> H["Length & Methods"]
+    
+    F --> F1["'Hello' + ' ' + 'World'"]
+    G --> G1["`Hello \${firstName} \${lastName}`"]
+    H --> H1["myString.length"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style D fill:#e8f5e8
+    style G fill:#e8f5e8
+```
+
+### Pag-format ng Mga String
 
 Ang manipulasyon ng string ay nagbibigay-daan sa iyo na pagsamahin ang mga elemento ng teksto, isama ang mga variable, at lumikha ng dynamic na nilalaman na tumutugon sa estado ng programa. Ang teknik na ito ay nagbibigay-daan sa iyo na bumuo ng teksto nang programmatically.
 
 Kadalasan kailangan mong pagsamahin ang maraming string – ang prosesong ito ay tinatawag na concatenation.
-
-Upang **i-concatenate** ang dalawa o higit pang mga string, o pagsamahin ang mga ito, gamitin ang operator na `+`.
+Upang **pagsamahin** ang dalawa o higit pang mga string, o pagsamahin ang mga ito, gamitin ang `+` operator.
 
 ```javascript
 let myString1 = "Hello";
@@ -241,14 +381,14 @@ myString1 + ", " + myString2 + "!"; //Hello, World!
 ```
 
 **Hakbang-hakbang, narito ang nangyayari:**
-- **Pinagsasama** ang maraming string gamit ang operator na `+`
-- **Pinagsasama** ang mga string nang direkta nang walang mga espasyo sa unang halimbawa
-- **Nagdaragdag** ng mga espasyo `" "` sa pagitan ng mga string para sa readability
-- **Naglalagay** ng mga bantas tulad ng mga kuwit upang lumikha ng tamang pag-format
+- **Pinagsasama** ang maraming string gamit ang `+` operator
+- **Pinagsasama** ang mga string nang direkta nang walang espasyo sa unang halimbawa
+- **Nagdaragdag** ng mga espasyo `" "` sa pagitan ng mga string para sa mas malinaw na pagbabasa
+- **Naglalagay** ng mga bantas tulad ng mga kuwit upang makabuo ng tamang format
 
-✅ Bakit `1 + 1 = 2` sa JavaScript, ngunit `'1' + '1' = 11?` Pag-isipan ito. Paano naman ang `'1' + 1`?
+✅ Bakit `1 + 1 = 2` sa JavaScript, pero `'1' + '1' = 11?` Pag-isipan ito. Paano naman ang `'1' + 1`?
 
-**Template literals** ay isa pang paraan upang mag-format ng mga string, maliban sa halip na quotes, ginagamit ang backtick. Anumang hindi plain text ay kailangang ilagay sa loob ng mga placeholder `${ }`. Kasama rito ang anumang mga variable na maaaring mga string.
+**Template literals** ay isa pang paraan upang mag-format ng mga string, maliban sa halip na mga quotes, ginagamit ang backtick. Anumang hindi plain text ay kailangang ilagay sa loob ng placeholders `${ }`. Kasama dito ang anumang mga variable na maaaring mga string.
 
 ```javascript
 let myString1 = "Hello";
@@ -260,18 +400,50 @@ let myString2 = "World";
 
 **Unawain natin ang bawat bahagi:**
 - **Gumagamit** ng backticks `` ` `` sa halip na regular na quotes upang lumikha ng template literals
-- **Nag-eembed** ng mga variable nang direkta gamit ang placeholder syntax na `${}`
-- **Pinapanatili** ang mga espasyo at pag-format nang eksakto tulad ng isinulat
-- **Nagbibigay** ng mas
-Maaari mong makamit ang iyong mga layunin sa pag-format gamit ang alinmang paraan, ngunit ang template literals ay igagalang ang anumang espasyo at mga linya ng pag-break.
+- **Naglalagay** ng mga variable nang direkta gamit ang syntax ng placeholder `${}`
+- **Pinapanatili** ang mga espasyo at format nang eksakto kung paano ito isinulat
+- **Nagbibigay** ng mas malinis na paraan upang lumikha ng mas kumplikadong mga string na may mga variable
+
+Maaari mong makamit ang iyong mga layunin sa pag-format gamit ang alinmang paraan, ngunit ang template literals ay igagalang ang anumang mga espasyo at line breaks.
 
 ✅ Kailan mo gagamitin ang template literal kumpara sa plain string?
 
+### 🔤 **Pag-master ng String: Kumpiyansa sa Manipulasyon ng Teksto**
+
+**Suriin ang iyong kakayahan sa string:**
+- Kaya mo bang ipaliwanag kung bakit `'1' + '1'` ay nagiging `'11'` sa halip na `2`?
+- Alin sa mga string method ang mas nababasa para sa iyo: concatenation o template literals?
+- Ano ang mangyayari kung nakalimutan mo ang mga quotes sa paligid ng isang string?
+
+```mermaid
+stateDiagram-v2
+    [*] --> PlainText: "Hello"
+    [*] --> Variable: name = "Alice"
+    PlainText --> Concatenated: + " " + name
+    Variable --> Concatenated
+    PlainText --> Template: `Hello ${name}`
+    Variable --> Template
+    Concatenated --> Result: "Hello Alice"
+    Template --> Result
+    
+    note right of Concatenated
+        Traditional method
+        More verbose
+    end note
+    
+    note right of Template
+        Modern ES6 syntax
+        Cleaner & more readable
+    end note
+```
+
+> **Pro tip**: Ang template literals ay karaniwang mas pinipili para sa mas kumplikadong pagbuo ng string dahil mas nababasa ito at mahusay sa paghawak ng multi-line strings!
+
 ### Booleans
 
-Ang Booleans ay kumakatawan sa pinakasimpleng anyo ng data: maaari lamang itong maglaman ng isa sa dalawang halaga – `true` o `false`. Ang sistemang binary logic na ito ay nagmula sa gawa ni George Boole, isang matematikong noong ika-19 na siglo na bumuo ng Boolean algebra.
+Ang Booleans ay kumakatawan sa pinakasimpleng anyo ng data: maaari lamang itong maglaman ng isa sa dalawang halaga – `true` o `false`. Ang binary logic system na ito ay nagmula sa trabaho ni George Boole, isang mathematician noong ika-19 na siglo na nag-develop ng Boolean algebra.
 
-Sa kabila ng kanilang pagiging simple, mahalaga ang booleans para sa lohika ng programa. Pinapayagan nila ang iyong code na gumawa ng desisyon batay sa mga kondisyon – kung naka-log in ang isang user, kung na-click ang isang button, o kung natugunan ang ilang pamantayan.
+Sa kabila ng kanilang pagiging simple, mahalaga ang booleans para sa program logic. Pinapayagan nila ang iyong code na gumawa ng desisyon batay sa mga kondisyon – kung naka-log in ang isang user, kung na-click ang isang button, o kung natugunan ang ilang pamantayan.
 
 Ang Booleans ay maaari lamang magkaroon ng dalawang halaga: `true` o `false`. Ang Booleans ay makakatulong sa paggawa ng desisyon kung aling mga linya ng code ang dapat tumakbo kapag natugunan ang ilang mga kondisyon. Sa maraming kaso, ang [operators](../../../../2-js-basics/1-data-types) ay tumutulong sa pagtatakda ng halaga ng Boolean at madalas mong mapapansin at isusulat ang mga variable na ini-initialize o ang kanilang mga halaga ay ina-update gamit ang operator.
 
@@ -283,40 +455,172 @@ let myFalseBool = false;
 **Sa itaas, ginawa natin ang sumusunod:**
 - **Lumikha** ng variable na nag-iimbak ng Boolean value na `true`
 - **Ipinakita** kung paano mag-imbak ng Boolean value na `false`
-- **Ginamit** ang eksaktong mga keyword na `true` at `false` (hindi kailangan ng quotes)
+- **Gumamit** ng eksaktong mga keyword na `true` at `false` (walang quotes na kailangan)
 - **Ipinaghanda** ang mga variable na ito para sa paggamit sa mga conditional statements
 
 ✅ Ang isang variable ay maaaring ituring na 'truthy' kung ito ay nag-e-evaluate sa boolean na `true`. Nakakatuwa, sa JavaScript, [lahat ng mga halaga ay truthy maliban kung tinukoy bilang falsy](https://developer.mozilla.org/docs/Glossary/Truthy).
 
+```mermaid
+flowchart LR
+    A["🔘 Boolean Values"] --> B["true"]
+    A --> C["false"]
+    
+    D["Truthy Values"] --> D1["'hello'"]
+    D --> D2["42"]
+    D --> D3["[]"]
+    D --> D4["{}"]
+    
+    E["Falsy Values"] --> E1["false"]
+    E --> E2["0"]
+    E --> E3["''"]
+    E --> E4["null"]
+    E --> E5["undefined"]
+    E --> E6["NaN"]
+    
+    style B fill:#e8f5e8
+    style C fill:#ffebee
+    style D fill:#e3f2fd
+    style E fill:#fff3e0
+```
+
+### 🎯 **Suriin ang Boolean Logic: Kakayahan sa Paggawa ng Desisyon**
+
+**Subukan ang iyong pag-unawa sa boolean:**
+- Bakit sa tingin mo may "truthy" at "falsy" values ang JavaScript bukod sa `true` at `false`?
+- Kaya mo bang hulaan kung alin sa mga ito ang falsy: `0`, `"0"`, `[]`, `"false"`?
+- Paano maaaring maging kapaki-pakinabang ang booleans sa pagkontrol ng daloy ng programa?
+
+```mermaid
+pie title "Common Boolean Use Cases"
+    "Conditional Logic" : 40
+    "User State" : 25
+    "Feature Toggles" : 20
+    "Validation" : 15
+```
+
+> **Tandaan**: Sa JavaScript, anim na halaga lamang ang falsy: `false`, `0`, `""`, `null`, `undefined`, at `NaN`. Ang lahat ng iba pa ay truthy!
+
 ---
 
+## 📊 **Buod ng Iyong Toolkit sa Data Types**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Data Types"] --> B["📦 Variables"]
+    A --> C["🔢 Numbers"]
+    A --> D["📝 Strings"]
+    A --> E["🔘 Booleans"]
+    
+    B --> B1["let mutable"]
+    B --> B2["const immutable"]
+    
+    C --> C1["42, 3.14, -5"]
+    C --> C2["+ - * / %"]
+    
+    D --> D1["'quotes' or \\\"quotes\\\""]
+    D --> D2["`template literals`"]
+    
+    E --> E1["true or false"]
+    E --> E2["truthy vs falsy"]
+    
+    F["⚡ Key Concepts"] --> F1["Type matters for operations"]
+    F --> F2["JavaScript is dynamically typed"]
+    F --> F3["Variables can change types"]
+    F --> F4["Naming is case-sensitive"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Gumawa ng personal information manager na nagpapakita ng lahat ng uri ng JavaScript data na natutunan mo sa araling ito habang hinahawakan ang mga totoong senaryo ng data.
+**Deskripsyon:** Gumawa ng personal information manager na nagpapakita ng lahat ng JavaScript data types na natutunan mo sa araling ito habang hinahawakan ang mga real-world data scenarios.
 
-**Prompt:** Gumawa ng JavaScript program na lumilikha ng isang user profile object na naglalaman ng: pangalan ng tao (string), edad (number), status bilang estudyante (boolean), mga paboritong kulay bilang array, at isang address object na may mga property na street, city, at zip code. Isama ang mga function upang ipakita ang impormasyon ng profile at i-update ang mga indibidwal na field. Siguraduhing ipakita ang string concatenation, template literals, arithmetic operations gamit ang edad, at boolean logic para sa status bilang estudyante.
+**Prompt:** Gumawa ng JavaScript program na lumilikha ng user profile object na naglalaman ng: pangalan ng tao (string), edad (number), status bilang estudyante (boolean), mga paboritong kulay bilang array, at isang address object na may street, city, at zip code properties. Isama ang mga function upang ipakita ang impormasyon ng profile at i-update ang mga indibidwal na field. Siguraduhing ipakita ang string concatenation, template literals, arithmetic operations gamit ang edad, at boolean logic para sa status bilang estudyante.
 
 Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Hamon
 
-Ang JavaScript ay may ilang mga behavior na maaaring magulat ang mga developer. Narito ang isang klasikong halimbawa upang tuklasin: subukang i-type ito sa iyong browser console: `let age = 1; let Age = 2; age == Age` at obserbahan ang resulta. Nagbabalik ito ng `false` – kaya mo bang tukuyin kung bakit?
+May ilang mga behavior ang JavaScript na maaaring magulat ang mga developer. Narito ang isang klasikong halimbawa upang tuklasin: subukang i-type ito sa iyong browser console: `let age = 1; let Age = 2; age == Age` at obserbahan ang resulta. Ito ay nagbabalik ng `false` – kaya mo bang tukuyin kung bakit?
 
-Ito ay kumakatawan sa isa sa maraming mga behavior ng JavaScript na mahalagang maunawaan. Ang pagiging pamilyar sa mga quirks na ito ay makakatulong sa iyo na magsulat ng mas maaasahang code at mas epektibong mag-debug ng mga isyu.
+Ito ay kumakatawan sa isa sa maraming mga behavior ng JavaScript na mahalagang maunawaan. Ang pagiging pamilyar sa mga kakaibang ito ay makakatulong sa iyo na magsulat ng mas maaasahang code at mas epektibong mag-debug ng mga isyu.
 
 ## Post-Lecture Quiz
 [Post-lecture quiz](https://ff-quizzes.netlify.app)
 
-## Review at Pag-aaral sa Sarili
+## Review & Self Study
 
 Tingnan ang [listahan ng mga JavaScript exercises](https://css-tricks.com/snippets/javascript/) at subukan ang isa. Ano ang natutunan mo?
 
-## Takdang-Aralin
+## Assignment
 
 [Data Types Practice](assignment.md)
 
+## 🚀 Timeline ng Iyong Mastery sa JavaScript Data Types
+
+### ⚡ **Ano ang Magagawa Mo sa Loob ng Susunod na 5 Minuto**
+- [ ] Buksan ang iyong browser console at gumawa ng 3 variables na may iba't ibang data types
+- [ ] Subukan ang hamon: `let age = 1; let Age = 2; age == Age` at alamin kung bakit ito false
+- [ ] Magpraktis ng string concatenation gamit ang iyong pangalan at paboritong numero
+- [ ] Subukan kung ano ang mangyayari kapag nagdagdag ka ng numero sa isang string
+
+### 🎯 **Ano ang Maaaring Makamit Mo sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at suriin ang anumang nakakalitong konsepto
+- [ ] Gumawa ng mini calculator na nagdadagdag, nagbabawas, nagmumultiply, at naghahati ng dalawang numero
+- [ ] Bumuo ng simpleng name formatter gamit ang template literals
+- [ ] Tuklasin ang mga pagkakaiba sa pagitan ng `==` at `===` comparison operators
+- [ ] Magpraktis ng pag-convert sa pagitan ng iba't ibang data types
+
+### 📅 **Ang Iyong Foundation sa JavaScript sa Loob ng Isang Linggo**
+- [ ] Kumpletuhin ang assignment nang may kumpiyansa at pagkamalikhain
+- [ ] Gumawa ng personal profile object gamit ang lahat ng data types na natutunan
+- [ ] Magpraktis gamit ang [JavaScript exercises mula sa CSS-Tricks](https://css-tricks.com/snippets/javascript/)
+- [ ] Bumuo ng simpleng form validator gamit ang boolean logic
+- [ ] Mag-eksperimento sa array at object data types (preview ng mga susunod na aralin)
+- [ ] Sumali sa JavaScript community at magtanong tungkol sa data types
+
+### 🌟 **Ang Iyong Transformation sa Loob ng Isang Buwan**
+- [ ] Isama ang kaalaman sa data type sa mas malalaking programming projects
+- [ ] Unawain kung kailan at bakit gagamitin ang bawat data type sa mga tunay na aplikasyon
+- [ ] Tulungan ang ibang mga baguhan na maunawaan ang mga pundasyon ng JavaScript
+- [ ] Bumuo ng maliit na application na nagma-manage ng iba't ibang uri ng user data
+- [ ] Tuklasin ang mga advanced na konsepto ng data type tulad ng type coercion at strict equality
+- [ ] Mag-ambag sa mga open source JavaScript projects sa pamamagitan ng pagpapabuti ng dokumentasyon
+
+### 🧠 **Huling Suriin ang Iyong Mastery sa Data Types**
+
+**I-celebrate ang iyong pundasyon sa JavaScript:**
+- Aling data type ang pinaka-nakagulat sa iyo sa mga tuntunin ng behavior nito?
+- Gaano ka komportable sa pagpapaliwanag ng variables vs. constants sa isang kaibigan?
+- Ano ang pinaka-kawili-wiling bagay na natuklasan mo tungkol sa type system ng JavaScript?
+- Aling tunay na aplikasyon ang naiisip mong gawin gamit ang mga pundasyong ito?
+
+```mermaid
+journey
+    title Your JavaScript Confidence Journey
+    section Today
+      Confused: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Understanding: 5: You
+      Building: 5: You
+    section Next Month
+      Problem Solving: 5: You
+      Teaching Others: 5: You
+      Real Projects: 5: You
+```
+
+> 💡 **Naabot mo na ang pundasyon!** Ang pag-unawa sa data types ay parang pag-aaral ng alpabeto bago magsulat ng mga kwento. Ang bawat JavaScript program na isusulat mo ay gagamit ng mga pundasyong konsepto na ito. Ngayon ay mayroon ka nang mga building blocks upang lumikha ng mga interactive na website, dynamic na aplikasyon, at lutasin ang mga tunay na problema gamit ang code. Maligayang pagdating sa kamangha-manghang mundo ng JavaScript! 🎉
+
 ---
 
 **Paunawa**:  
diff --git a/translations/tl/2-js-basics/2-functions-methods/README.md b/translations/tl/2-js-basics/2-functions-methods/README.md
index 739fd9e51b..d21bbbe29d 100644
--- a/translations/tl/2-js-basics/2-functions-methods/README.md
+++ b/translations/tl/2-js-basics/2-functions-methods/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "ec43b53e8e015cdabfd3ad877b3c28e5",
-  "translation_date": "2025-10-22T15:17:18+00:00",
+  "original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
+  "translation_date": "2025-11-03T13:44:52+00:00",
   "source_file": "2-js-basics/2-functions-methods/README.md",
   "language_code": "tl"
 }
@@ -12,14 +12,31 @@ CO_OP_TRANSLATOR_METADATA:
 ![Mga Pangunahing Kaalaman sa JavaScript - Mga Function](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.tl.png)
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your JavaScript Functions Adventure
+    section Foundation
+      Function Syntax: 5: You
+      Calling Functions: 4: You
+      Parameters & Arguments: 5: You
+    section Advanced Concepts
+      Return Values: 4: You
+      Default Parameters: 5: You
+      Function Composition: 4: You
+    section Modern JavaScript
+      Arrow Functions: 5: You
+      Anonymous Functions: 4: You
+      Higher-Order Functions: 5: You
+```
+
 ## Pre-Lecture Quiz
 [Pre-lecture quiz](https://ff-quizzes.netlify.app)
 
-Ang paulit-ulit na pagsusulat ng parehong code ay isa sa mga pinakakaraniwang pagkadismaya sa programming. Ang mga function ay nag-aalok ng solusyon sa problemang ito sa pamamagitan ng pagpapahintulot sa iyo na i-package ang code sa mga reusable na bloke. Isipin ang mga function na parang mga standardized na bahagi na nagpa-rebolusyon sa assembly line ni Henry Ford – kapag nakagawa ka ng maaasahang bahagi, magagamit mo ito kahit saan nang hindi kailangang magsimula mula sa simula.
+Ang paulit-ulit na pagsusulat ng parehong code ay isa sa mga pinakakaraniwang pagkabigo sa programming. Ang mga function ay nag-aayos ng problemang ito sa pamamagitan ng pagpapahintulot sa iyo na i-package ang code sa mga reusable na bloke. Isipin ang mga function na parang mga standardized na bahagi na nagpa-rebolusyon sa assembly line ni Henry Ford – kapag nakagawa ka ng maaasahang bahagi, magagamit mo ito kahit saan nang hindi kailangang magsimula muli.
 
-Ang mga function ay nagbibigay-daan sa iyo na mag-bundle ng mga piraso ng code upang magamit mo ito sa buong programa. Sa halip na kopyahin at i-paste ang parehong lohika sa lahat ng lugar, maaari kang lumikha ng isang function nang isang beses at tawagin ito tuwing kinakailangan. Ang ganitong paraan ay nagpapanatili ng organisado ang iyong code at mas madali ang pag-update.
+Ang mga function ay nagbibigay-daan sa iyo na mag-bundle ng mga piraso ng code upang magamit mo ang mga ito sa buong programa. Sa halip na kopyahin at i-paste ang parehong lohika sa lahat ng dako, maaari kang lumikha ng isang function nang isang beses at tawagin ito tuwing kinakailangan. Ang ganitong paraan ay nagpapanatili ng organisado ang iyong code at ginagawang mas madali ang mga update.
 
-Sa araling ito, matututunan mo kung paano lumikha ng sarili mong mga function, magpasa ng impormasyon sa mga ito, at makakuha ng kapaki-pakinabang na resulta. Malalaman mo ang pagkakaiba ng mga function at pamamaraan, matutunan ang mga modernong syntax na pamamaraan, at makikita kung paano maaaring magtrabaho ang mga function kasama ang iba pang mga function. Bubuuin natin ang mga konseptong ito nang hakbang-hakbang.
+Sa araling ito, matututunan mo kung paano lumikha ng sarili mong mga function, magpasa ng impormasyon sa mga ito, at makakuha ng kapaki-pakinabang na resulta. Malalaman mo ang pagkakaiba ng mga function at mga pamamaraan, matutunan ang mga modernong syntax na diskarte, at makikita kung paano gumagana ang mga function kasama ang iba pang mga function. Bubuuin natin ang mga konseptong ito nang paunti-unti.
 
 [![Mga Pamamaraan at Function](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Mga Pamamaraan at Function")
 
@@ -27,15 +44,48 @@ Sa araling ito, matututunan mo kung paano lumikha ng sarili mong mga function, m
 
 > Maaari mong kunin ang araling ito sa [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
 
+```mermaid
+mindmap
+  root((JavaScript Functions))
+    Basic Concepts
+      Declaration
+        Traditional syntax
+        Arrow function syntax
+      Calling
+        Using parentheses
+        Parentheses required
+    Parameters
+      Input Values
+        Multiple parameters
+        Default values
+      Arguments
+        Values passed in
+        Can be any type
+    Return Values
+      Output Data
+        return statement
+        Exit function
+      Use Results
+        Store in variables
+        Chain functions
+    Advanced Patterns
+      Higher-Order
+        Functions as parameters
+        Callbacks
+      Anonymous
+        No name needed
+        Inline definition
+```
+
 ## Mga Function
 
-Ang function ay isang self-contained na bloke ng code na gumaganap ng isang partikular na gawain. Pinagsasama nito ang lohika na maaari mong isagawa tuwing kinakailangan.
+Ang isang function ay isang self-contained na bloke ng code na gumaganap ng isang partikular na gawain. Pinagsasama nito ang lohika na maaari mong isagawa tuwing kinakailangan.
 
-Sa halip na isulat ang parehong code nang maraming beses sa buong programa, maaari mo itong i-package sa isang function at tawagin ang function na iyon tuwing kailangan mo ito. Ang ganitong paraan ay nagpapanatili ng malinis ang iyong code at mas madali ang pag-update. Isipin ang hamon sa pagpapanatili kung kailangan mong baguhin ang lohika na nakakalat sa 20 iba't ibang lokasyon sa iyong codebase.
+Sa halip na isulat ang parehong code nang maraming beses sa buong programa, maaari mo itong i-package sa isang function at tawagin ang function na iyon tuwing kailangan mo ito. Ang ganitong paraan ay nagpapanatili ng malinis ang iyong code at ginagawang mas madali ang mga update. Isipin ang hamon sa pagpapanatili kung kailangan mong baguhin ang lohika na nakakalat sa 20 iba't ibang lokasyon sa iyong codebase.
 
-Napakahalaga ng pagbibigay ng deskriptibong pangalan sa iyong mga function. Ang isang maayos na pinangalanang function ay malinaw na nagpapahayag ng layunin nito – kapag nakita mo ang `cancelTimer()`, agad mong mauunawaan kung ano ang ginagawa nito, tulad ng isang malinaw na label sa isang pindutan na nagsasabi sa iyo kung ano ang mangyayari kapag na-click mo ito.
+Napakahalaga ng pagbibigay ng mga deskriptibong pangalan sa iyong mga function. Ang isang maayos na pinangalanang function ay malinaw na nagpapahayag ng layunin nito – kapag nakita mo ang `cancelTimer()`, agad mong maiintindihan kung ano ang ginagawa nito, tulad ng isang malinaw na nakalabel na button na nagsasabi sa iyo kung ano ang mangyayari kapag na-click mo ito.
 
-## Paglikha at pagtawag ng isang function
+## Paglikha at pagtawag sa isang function
 
 Tingnan natin kung paano lumikha ng isang function. Ang syntax ay sumusunod sa isang pare-parehong pattern:
 
@@ -45,11 +95,11 @@ function nameOfFunction() { // function definition
 }
 ```
 
-Narito ang paliwanag:
+Himayin natin ito:
 - Ang keyword na `function` ay nagsasabi sa JavaScript na "Hoy, gumagawa ako ng isang function!"
 - Ang `nameOfFunction` ay kung saan mo bibigyan ng deskriptibong pangalan ang iyong function
-- Ang mga parentheses `()` ay kung saan maaari kang magdagdag ng mga parameter (pag-uusapan natin ito mamaya)
-- Ang mga curly braces `{}` ay naglalaman ng aktwal na code na tumatakbo kapag tinawag mo ang function
+- Ang mga panaklong `()` ay kung saan maaari kang magdagdag ng mga parameter (pag-uusapan natin ito mamaya)
+- Ang mga kulot na braces `{}` ay naglalaman ng aktwal na code na tumatakbo kapag tinawag mo ang function
 
 Gumawa tayo ng simpleng greeting function upang makita ito sa aksyon:
 
@@ -61,7 +111,7 @@ function displayGreeting() {
 
 Ang function na ito ay nagpi-print ng "Hello, world!" sa console. Kapag na-define mo na ito, magagamit mo ito nang maraming beses kung kinakailangan.
 
-Upang isagawa (o "tawagin") ang iyong function, isulat ang pangalan nito na sinusundan ng mga parentheses. Pinapayagan ng JavaScript na i-define ang iyong function bago o pagkatapos mo itong tawagin – ang JavaScript engine ang bahala sa pagkakasunod-sunod ng pagpapatupad.
+Upang maisagawa (o "tawagin") ang iyong function, isulat ang pangalan nito na sinusundan ng mga panaklong. Pinapayagan ka ng JavaScript na i-define ang iyong function bago o pagkatapos mo itong tawagin – ang JavaScript engine ang bahala sa pagkakasunod-sunod ng pagpapatupad.
 
 ```javascript
 // calling our function
@@ -70,23 +120,47 @@ displayGreeting();
 
 Kapag pinatakbo mo ang linyang ito, isinasagawa nito ang lahat ng code sa loob ng iyong `displayGreeting` function, na nagpapakita ng "Hello, world!" sa console ng iyong browser. Maaari mong tawagin ang function na ito nang paulit-ulit.
 
+### 🧠 **Pag-unawa sa Mga Pangunahing Kaalaman sa Function: Pagbuo ng Iyong Unang Mga Function**
+
+**Tingnan natin kung paano mo naiintindihan ang mga pangunahing function:**
+- Maaari mo bang ipaliwanag kung bakit ginagamit ang mga kulot na braces `{}` sa mga definition ng function?
+- Ano ang mangyayari kung isusulat mo ang `displayGreeting` nang walang mga panaklong?
+- Bakit mo gustong tawagin ang parehong function nang maraming beses?
+
+```mermaid
+flowchart TD
+    A["✏️ Define Function"] --> B["📦 Package Code"]
+    B --> C["🏷️ Give it a Name"]
+    C --> D["📞 Call When Needed"]
+    D --> E["🔄 Reuse Anywhere"]
+    
+    F["💡 Benefits"] --> F1["No code repetition"]
+    F --> F2["Easy to maintain"]
+    F --> F3["Clear organization"]
+    F --> F4["Easier testing"]
+    
+    style A fill:#e3f2fd
+    style E fill:#e8f5e8
+    style F fill:#fff3e0
+```
+
 > **Note:** Gumagamit ka na ng **mga pamamaraan** sa buong mga araling ito. Ang `console.log()` ay isang pamamaraan – mahalagang isang function na kabilang sa `console` object. Ang pangunahing pagkakaiba ay ang mga pamamaraan ay nakakabit sa mga object, habang ang mga function ay nakatayo nang mag-isa. Maraming developer ang gumagamit ng mga terminong ito nang palitan sa kaswal na usapan.
 
 ### Mga pinakamahusay na kasanayan sa function
 
 Narito ang ilang mga tip upang matulungan kang magsulat ng mahusay na mga function:
 
-- Bigyan ang iyong mga function ng malinaw, deskriptibong mga pangalan – pasasalamatan ka ng iyong sarili sa hinaharap!
+- Bigyan ang iyong mga function ng malinaw, deskriptibong mga pangalan – pasasalamatan ka ng iyong hinaharap na sarili!
 - Gumamit ng **camelCasing** para sa mga pangalan na may maraming salita (tulad ng `calculateTotal` sa halip na `calculate_total`)
 - Panatilihing nakatuon ang bawat function sa paggawa ng isang bagay nang mahusay
 
 ## Pagpapasa ng impormasyon sa isang function
 
-Ang ating `displayGreeting` function ay limitado – maaari lamang itong magpakita ng "Hello, world!" para sa lahat. Ang mga parameter ay nagbibigay-daan sa atin na gawing mas flexible at kapaki-pakinabang ang mga function.
+Ang aming `displayGreeting` function ay limitado – maaari lamang itong magpakita ng "Hello, world!" para sa lahat. Ang mga parameter ay nagbibigay-daan sa amin na gawing mas flexible at kapaki-pakinabang ang mga function.
 
-Ang **mga parameter** ay kumikilos na parang mga placeholder kung saan maaari kang magpasok ng iba't ibang mga halaga sa bawat paggamit ng function. Sa ganitong paraan, ang parehong function ay maaaring gumana sa iba't ibang impormasyon sa bawat tawag.
+Ang **mga parameter** ay kumikilos na parang mga placeholder kung saan maaari kang magpasok ng iba't ibang mga halaga sa bawat oras na gamitin mo ang function. Sa ganitong paraan, ang parehong function ay maaaring gumana sa iba't ibang impormasyon sa bawat tawag.
 
-Ililista mo ang mga parameter sa loob ng mga parentheses kapag dine-define mo ang iyong function, na pinaghihiwalay ang maraming parameter gamit ang mga comma:
+Ililista mo ang mga parameter sa loob ng mga panaklong kapag dinefine mo ang iyong function, na naghihiwalay sa maraming parameter gamit ang mga kuwit:
 
 ```javascript
 function name(param, param2, param3) {
@@ -94,9 +168,9 @@ function name(param, param2, param3) {
 }
 ```
 
-Ang bawat parameter ay kumikilos na parang placeholder – kapag may tumawag sa iyong function, magbibigay sila ng aktwal na mga halaga na ilalagay sa mga spot na ito.
+Ang bawat parameter ay kumikilos na parang placeholder – kapag may tumawag sa iyong function, magbibigay sila ng aktwal na mga halaga na ipapasok sa mga lugar na ito.
 
-I-update natin ang ating greeting function upang tanggapin ang pangalan ng isang tao:
+I-update natin ang aming greeting function upang tanggapin ang pangalan ng isang tao:
 
 ```javascript
 function displayGreeting(name) {
@@ -105,9 +179,9 @@ function displayGreeting(name) {
 }
 ```
 
-Pansinin kung paano natin ginagamit ang backticks (`` ` ``) at `${}` upang direktang ipasok ang pangalan sa ating mensahe – ito ay tinatawag na template literal, at ito ay isang napaka-kapaki-pakinabang na paraan upang bumuo ng mga string na may halong mga variable.
+Pansinin kung paano namin ginagamit ang backticks (`` ` ``) at `${}` upang ipasok ang pangalan nang direkta sa aming mensahe – ito ay tinatawag na template literal, at ito ay isang napaka-kapaki-pakinabang na paraan upang bumuo ng mga string na may halong mga variable.
 
-Ngayon kapag tinawag natin ang ating function, maaari tayong magpasa ng anumang pangalan:
+Ngayon kapag tinawag namin ang aming function, maaari naming ipasa ang anumang pangalan:
 
 ```javascript
 displayGreeting('Christopher');
@@ -116,11 +190,34 @@ displayGreeting('Christopher');
 
 Kinukuha ng JavaScript ang string na `'Christopher'`, itinalaga ito sa parameter na `name`, at lumilikha ng personalized na mensahe na "Hello, Christopher!"
 
+```mermaid
+flowchart LR
+    A["🎯 Function Call"] --> B["📥 Parameters"]
+    B --> C["⚙️ Function Body"]
+    C --> D["📤 Result"]
+    
+    A1["displayGreeting('Alice')"] --> A
+    B1["name = 'Alice'"] --> B
+    C1["Template literal\n\`Hello, \${name}!\`"] --> C
+    D1["'Hello, Alice!'"] --> D
+    
+    E["🔄 Parameter Types"] --> E1["Strings"]
+    E --> E2["Numbers"]
+    E --> E3["Booleans"]
+    E --> E4["Objects"]
+    E --> E5["Functions"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style D fill:#fff3e0
+    style E fill:#f3e5f5
+```
+
 ## Mga default na halaga
 
 Paano kung gusto nating gawing opsyonal ang ilang mga parameter? Dito nagiging kapaki-pakinabang ang mga default na halaga!
 
-Sabihin nating gusto nating bigyan ang mga tao ng kakayahang i-customize ang salitang pagbati, ngunit kung hindi sila magbibigay ng isa, gagamitin na lang natin ang "Hello" bilang fallback. Maaari kang mag-set up ng mga default na halaga sa pamamagitan ng paggamit ng equals sign, tulad ng pag-set ng variable:
+Sabihin nating gusto nating pahintulutan ang mga tao na i-customize ang salutation, ngunit kung hindi sila magbigay ng isa, gagamitin lang natin ang "Hello" bilang fallback. Maaari kang mag-set up ng mga default na halaga sa pamamagitan ng paggamit ng equals sign, tulad ng pag-set ng variable:
 
 ```javascript
 function displayGreeting(name, salutation='Hello') {
@@ -130,7 +227,7 @@ function displayGreeting(name, salutation='Hello') {
 
 Dito, ang `name` ay kinakailangan pa rin, ngunit ang `salutation` ay may backup na halaga na `'Hello'` kung walang magbigay ng ibang pagbati.
 
-Ngayon maaari nating tawagin ang function na ito sa dalawang magkaibang paraan:
+Ngayon maaari naming tawagin ang function na ito sa dalawang magkaibang paraan:
 
 ```javascript
 displayGreeting('Christopher');
@@ -140,23 +237,52 @@ displayGreeting('Christopher', 'Hi');
 // displays "Hi, Christopher"
 ```
 
-Sa unang tawag, ginagamit ng JavaScript ang default na "Hello" dahil hindi tayo nagbigay ng salutation. Sa pangalawang tawag, ginagamit nito ang ating custom na "Hi" sa halip. Ang flexibility na ito ay ginagawang adaptable ang mga function sa iba't ibang sitwasyon.
+Sa unang tawag, ginagamit ng JavaScript ang default na "Hello" dahil hindi kami nagbigay ng salutation. Sa pangalawang tawag, ginagamit nito ang aming custom na "Hi" sa halip. Ang flexibility na ito ay ginagawang adaptable ang mga function sa iba't ibang sitwasyon.
+
+### 🎛️ **Pag-unawa sa Mga Parameter: Ginagawang Flexible ang Mga Function**
+
+**Subukan ang iyong pag-unawa sa parameter:**
+- Ano ang pagkakaiba ng parameter at argument?
+- Bakit kapaki-pakinabang ang mga default na halaga sa totoong programming?
+- Maaari mo bang hulaan kung ano ang mangyayari kung magpasa ka ng mas maraming argumento kaysa sa mga parameter?
+
+```mermaid
+stateDiagram-v2
+    [*] --> NoParams: function greet() {}
+    [*] --> WithParams: function greet(name) {}
+    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
+    
+    NoParams --> Static: Same output always
+    WithParams --> Dynamic: Changes with input
+    WithDefaults --> Flexible: Optional customization
+    
+    Static --> [*]
+    Dynamic --> [*]
+    Flexible --> [*]
+    
+    note right of WithDefaults
+        Most flexible approach
+        Backwards compatible
+    end note
+```
+
+> **Pro tip**: Ang mga default na parameter ay ginagawang mas user-friendly ang iyong mga function. Ang mga user ay maaaring magsimula nang mabilis gamit ang mga makatuwirang default, ngunit maaari pa ring mag-customize kung kinakailangan!
 
 ## Mga return value
 
-Ang ating mga function sa ngayon ay nagpi-print lang ng mga mensahe sa console, ngunit paano kung gusto mong mag-compute ang isang function at ibalik sa iyo ang resulta?
+Ang aming mga function sa ngayon ay nagpi-print lang ng mga mensahe sa console, ngunit paano kung gusto mong mag-compute ang isang function at ibalik sa iyo ang resulta?
 
 Dito pumapasok ang **mga return value**. Sa halip na magpakita lang ng isang bagay, ang isang function ay maaaring magbigay sa iyo ng isang halaga na maaari mong i-store sa isang variable o gamitin sa iba pang bahagi ng iyong code.
 
-Upang magpadala ng isang halaga pabalik, gagamitin mo ang keyword na `return` na sinusundan ng anumang nais mong ibalik:
+Upang magpadala ng halaga pabalik, gagamitin mo ang keyword na `return` na sinusundan ng anumang gusto mong ibalik:
 
 ```javascript
 return myVariable;
 ```
 
-Narito ang mahalaga: kapag ang isang function ay umabot sa isang `return` statement, agad itong humihinto sa pagtakbo at ibinabalik ang halagang iyon sa tumawag dito.
+Narito ang isang mahalagang bagay: kapag ang isang function ay tumama sa isang `return` statement, agad itong humihinto sa pagtakbo at ipinapadala ang halagang iyon pabalik sa tumawag dito.
 
-Baguhin natin ang ating greeting function upang ibalik ang mensahe sa halip na i-print ito:
+I-modify natin ang aming greeting function upang ibalik ang mensahe sa halip na i-print ito:
 
 ```javascript
 function createGreetingMessage(name) {
@@ -165,23 +291,63 @@ function createGreetingMessage(name) {
 }
 ```
 
-Ngayon sa halip na i-print ang greeting, ang function na ito ay lumilikha ng mensahe at ibinibigay ito sa atin.
+Ngayon sa halip na i-print ang pagbati, ang function na ito ay lumilikha ng mensahe at ibinibigay ito pabalik sa amin.
 
-Upang magamit ang ibinalik na halaga, maaari natin itong i-store sa isang variable tulad ng anumang ibang halaga:
+Upang magamit ang ibinalik na halaga, maaari naming i-store ito sa isang variable tulad ng anumang iba pang halaga:
 
 ```javascript
 const greetingMessage = createGreetingMessage('Christopher');
 ```
 
-Ngayon ang `greetingMessage` ay naglalaman ng "Hello, Christopher" at magagamit natin ito kahit saan sa ating code – upang ipakita ito sa isang webpage, isama ito sa isang email, o ipasa ito sa ibang function.
+Ngayon ang `greetingMessage` ay naglalaman ng "Hello, Christopher" at magagamit namin ito kahit saan sa aming code – upang ipakita ito sa isang webpage, isama ito sa isang email, o ipasa ito sa isa pang function.
+
+```mermaid
+flowchart TD
+    A["🔧 Function Processing"] --> B{"return statement?"}
+    B -->|Yes| C["📤 Return Value"]
+    B -->|No| D["📭 Return undefined"]
+    
+    C --> E["💾 Store in Variable"]
+    C --> F["🔗 Use in Expression"]
+    C --> G["📞 Pass to Function"]
+    
+    D --> H["⚠️ Usually not useful"]
+    
+    I["📋 Return Value Uses"] --> I1["Calculate results"]
+    I --> I2["Validate input"]
+    I --> I3["Transform data"]
+    I --> I4["Create objects"]
+    
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style I fill:#e3f2fd
+```
+
+### 🔄 **Pag-unawa sa Mga Return Value: Pagkuha ng Mga Resulta**
+
+**Suriin ang iyong pag-unawa sa return value:**
+- Ano ang nangyayari sa code pagkatapos ng isang `return` statement sa isang function?
+- Bakit mas madalas na mas mahusay ang pagbabalik ng mga halaga kaysa sa pagpi-print lang sa console?
+- Maaari bang magbalik ang isang function ng iba't ibang uri ng mga halaga (string, number, boolean)?
+
+```mermaid
+pie title "Common Return Value Types"
+    "Strings" : 30
+    "Numbers" : 25
+    "Objects" : 20
+    "Booleans" : 15
+    "Arrays" : 10
+```
+
+> **Key insight**: Ang mga function na nagbabalik ng mga halaga ay mas versatile dahil ang tumatawag ang magpapasya kung ano ang gagawin sa resulta. Ginagawa nitong mas modular at reusable ang iyong code!
 
-## Mga function bilang parameter para sa mga function
+## Mga function bilang mga parameter para sa mga function
 
 Ang mga function ay maaaring ipasa bilang mga parameter sa iba pang mga function. Bagama't maaaring mukhang kumplikado ang konseptong ito sa simula, ito ay isang makapangyarihang tampok na nagbibigay-daan sa mga flexible na pattern ng programming.
 
-Ang pattern na ito ay karaniwang ginagamit kapag gusto mong sabihin na "kapag may nangyari, gawin ang ibang bagay." Halimbawa, "kapag natapos ang timer, patakbuhin ang code na ito" o "kapag na-click ng user ang button, tawagin ang function na ito."
+Ang pattern na ito ay karaniwang ginagamit kapag gusto mong sabihin na "kapag may nangyari, gawin ang ibang bagay na ito." Halimbawa, "kapag natapos ang timer, patakbuhin ang code na ito" o "kapag nag-click ang user sa button, tawagin ang function na ito."
 
-Tingnan natin ang `setTimeout`, na isang built-in na function na naghihintay ng tiyak na dami ng oras at pagkatapos ay nagpapatakbo ng ilang code. Kailangan nating sabihin dito kung anong code ang tatakbo – perpektong kaso para sa pagpapasa ng isang function!
+Tingnan natin ang `setTimeout`, na isang built-in na function na naghihintay ng tiyak na oras at pagkatapos ay nagpapatakbo ng ilang code. Kailangan nating sabihin dito kung anong code ang tatakbo – perpektong kaso para sa pagpapasa ng isang function!
 
 Subukan ang code na ito – pagkatapos ng 3 segundo, makakakita ka ng mensahe:
 
@@ -193,15 +359,15 @@ function displayDone() {
 setTimeout(displayDone, 3000);
 ```
 
-Pansinin kung paano natin ipinapasa ang `displayDone` (nang walang parentheses) sa `setTimeout`. Hindi natin tinatawag ang function mismo – ibinibigay natin ito sa `setTimeout` at sinasabing "tawagin ito sa loob ng 3 segundo."
+Pansinin kung paano namin ipinapasa ang `displayDone` (nang walang mga panaklong) sa `setTimeout`. Hindi namin tinatawag ang function mismo – ibinibigay namin ito sa `setTimeout` at sinasabing "tawagin ito sa loob ng 3 segundo."
 
-### Mga Anonymous Function
+### Mga anonymous na function
 
-Minsan kailangan mo ng function para sa isang bagay lang at ayaw mong bigyan ito ng pangalan. Isipin mo – kung gagamitin mo lang ang isang function nang isang beses, bakit mo pa ito bibigyan ng pangalan?
+Minsan kailangan mo ng isang function para sa isang bagay lang at ayaw mong bigyan ito ng pangalan. Isipin ito – kung gagamitin mo lang ang isang function nang isang beses, bakit mo pa ito bibigyan ng pangalan na magpapasikip sa iyong code?
 
-Pinapayagan ka ng JavaScript na lumikha ng **mga anonymous function** – mga function na walang pangalan na maaari mong i-define kung saan mo ito kailangan.
+Pinapayagan ka ng JavaScript na lumikha ng **mga anonymous na function** – mga function na walang pangalan na maaari mong i-define kung saan mo ito kailangan.
 
-Narito kung paano natin maaaring isulat muli ang ating timer example gamit ang isang anonymous function:
+Narito kung paano natin maaaring isulat muli ang halimbawa ng timer gamit ang isang anonymous na function:
 
 ```javascript
 setTimeout(function() {
@@ -209,15 +375,15 @@ setTimeout(function() {
 }, 3000);
 ```
 
-Nakakamit nito ang parehong resulta, ngunit ang function ay dine-define nang direkta sa loob ng tawag sa `setTimeout`, na inaalis ang pangangailangan para sa isang hiwalay na deklarasyon ng function.
+Nakakamit nito ang parehong resulta, ngunit ang function ay na-define nang direkta sa loob ng tawag sa `setTimeout`, na inaalis ang pangangailangan para sa isang hiwalay na deklarasyon ng function.
 
-### Mga Fat Arrow Function
+### Mga fat arrow function
 
 Ang modernong JavaScript ay may mas maikling paraan upang magsulat ng mga function na tinatawag na **arrow functions**. Ginagamit nila ang `=>` (na mukhang isang arrow – gets mo?) at napakapopular sa mga developer.
 
 Ang mga arrow function ay nagbibigay-daan sa iyo na laktawan ang keyword na `function` at magsulat ng mas maikli na code.
 
-Narito ang ating timer example gamit ang isang arrow function:
+Narito ang halimbawa ng timer gamit ang isang arrow function:
 
 ```javascript
 setTimeout(() => {
@@ -225,23 +391,76 @@ setTimeout(() => {
 }, 3000);
 ```
 
-Ang `()` ay kung saan ilalagay ang mga parameter (walang laman sa kasong ito), pagkatapos ay ang arrow `=>`, at sa wakas ang katawan ng function sa mga curly braces. Nagbibigay ito ng parehong functionality na may mas maikling syntax.
+Ang `()` ay kung saan ilalagay ang mga parameter (walang laman sa kasong ito), pagkatapos ay darating ang arrow `=>`, at sa wakas ang katawan ng function sa mga kulot na braces. Nagbibigay ito ng parehong functionality na may mas maikling syntax.
+
+```mermaid
+flowchart LR
+    A["📝 Function Styles"] --> B["Traditional"]
+    A --> C["Arrow"]
+    A --> D["Anonymous"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["Hoisted"]
+    B --> B3["Named"]
+    
+    C --> C1["const name = () => {}"]
+    C --> C2["Concise syntax"]
+    C --> C3["Modern style"]
+    
+    D --> D1["function() {}"]
+    D --> D2["No name"]
+    D --> D3["One-time use"]
+    
+    E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
+    E --> E2["Arrow: Short callbacks"]
+    E --> E3["Anonymous: Event handlers"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-### Kailan gagamitin ang bawat estratehiya
+### Kailan gagamitin ang bawat diskarte
+
+Kailan mo dapat gamitin ang bawat approach? Isang praktikal na gabay: kung gagamitin mo ang function nang maraming beses, bigyan ito ng pangalan at i-define ito nang hiwalay. Kung ito ay para sa isang partikular na paggamit, isaalang-alang ang isang anonymous na function. Parehong valid ang arrow functions at tradisyunal na syntax, bagama't ang arrow functions ay laganap sa mga modernong JavaScript codebase.
+
+### 🎨 **Pag-unawa sa Mga Estilo ng Function: Pagpili ng Tamang Syntax**
+
+**Subukan ang iyong pag-unawa sa syntax:**
+- Kailan mo mas gugustuhin ang arrow functions kaysa sa tradisyunal na syntax ng function?
+- Ano ang pangunahing bentahe ng mga anonymous na function?
+- Maaari mo bang isipin ang isang sitwasyon kung saan mas maganda ang isang named function kaysa sa isang anonymous na function?
+
+```mermaid
+quadrantChart
+    title Function Choice Decision Matrix
+    x-axis Simple --> Complex
+    y-axis One-time use --> Reusable
+    quadrant-1 Arrow Functions
+    quadrant-2 Named Functions
+    quadrant-3 Anonymous Functions
+    quadrant-4 Traditional Functions
+    
+    Event Handlers: [0.3, 0.2]
+    Utility Functions: [0.7, 0.8]
+    Callbacks: [0.2, 0.3]
+    Class Methods: [0.8, 0.7]
+    Mathematical Operations: [0.4, 0.6]
+```
 
-Kailan mo dapat gamitin ang bawat pamamaraan? Isang praktikal na gabay: kung gagamitin mo ang function nang maraming beses, bigyan ito ng pangalan at i-define ito nang hiwalay. Kung ito ay para sa isang partikular na paggamit, isaalang-alang ang isang anonymous function. Parehong valid ang arrow functions at tradisyunal na syntax, bagama't ang arrow functions ay laganap sa mga modernong JavaScript codebase.
+> **Modern trend**: Ang mga arrow function ay nagiging default na pagpipilian para sa maraming developer dahil sa kanilang maikling syntax, ngunit ang tradisyunal na mga function ay mayroon pa ring lugar!
 
 ---
 
-
-
 ## 🚀 Hamon
 
-Maaari mo bang ipaliwanag sa isang pangungusap ang pagkakaiba ng mga function at pamamaraan? Subukan mo!
+Maaari mo bang ipaliwanag sa isang pangungusap ang pagkakaiba ng mga function at mga pamamaraan? Subukan mo!
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
+Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
 
 **Deskripsyon:** Gumawa ng utility library ng mga mathematical function na nagpapakita ng iba't ibang konsepto ng function na tinalakay sa araling ito, kabilang ang mga parameter, default na halaga, return value, at arrow functions.
 
@@ -267,5 +486,105 @@ Sulit na [magbasa pa tungkol sa arrow functions](https://developer.mozilla.org/d
 
 ---
 
+## 🧰 **Buod ng Iyong Toolkit sa JavaScript Functions**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Functions"] --> B["📋 Function Declaration"]
+    A --> C["📥 Parameters"]
+    A --> D["📤 Return Values"]
+    A --> E["🎨 Modern Syntax"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["Descriptive naming"]
+    B --> B3["Reusable code blocks"]
+    
+    C --> C1["Input data"]
+    C --> C2["Default values"]
+    C --> C3["Multiple parameters"]
+    
+    D --> D1["return statement"]
+    D --> D2["Exit function"]
+    D --> D3["Pass data back"]
+    
+    E --> E1["Arrow functions: () =>"]
+    E --> E2["Anonymous functions"]
+    E --> E3["Higher-order functions"]
+    
+    F["⚡ Key Benefits"] --> F1["Code reusability"]
+    F --> F2["Better organization"]
+    F --> F3["Easier testing"]
+    F --> F4["Modular design"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 Timeline ng Iyong Mastery sa JavaScript Functions
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Sumulat ng simpleng function na nagbabalik ng iyong paboritong numero
+- [ ] Gumawa ng function na may dalawang parameter na nagdadagdag sa kanila
+- [ ] Subukan ang pag-convert ng isang tradisyunal na function sa arrow function syntax  
+- [ ] Sanayin ang hamon: ipaliwanag ang pagkakaiba ng functions at methods  
+
+### 🎯 **Ano ang Maaaring Magawa Mo sa Loob ng Isang Oras**  
+- [ ] Kumpletuhin ang post-lesson quiz at balikan ang anumang nakakalitong konsepto  
+- [ ] Bumuo ng math utilities library mula sa GitHub Copilot challenge  
+- [ ] Gumawa ng function na gumagamit ng ibang function bilang parameter  
+- [ ] Sanayin ang pagsusulat ng functions na may default parameters  
+- [ ] Subukan ang paggamit ng template literals sa mga return value ng function  
+
+### 📅 **Ang Iyong Lingguhang Pag-master ng Functions**  
+- [ ] Kumpletuhin ang "Fun with Functions" na assignment nang may pagkamalikhain  
+- [ ] I-refactor ang ilang paulit-ulit na code na nagawa mo sa reusable functions  
+- [ ] Bumuo ng maliit na calculator gamit lamang ang functions (walang global variables)  
+- [ ] Sanayin ang arrow functions gamit ang array methods tulad ng `map()` at `filter()`  
+- [ ] Gumawa ng koleksyon ng utility functions para sa mga karaniwang gawain  
+- [ ] Pag-aralan ang higher-order functions at mga konsepto ng functional programming  
+
+### 🌟 **Ang Iyong Buwanang Transformasyon**  
+- [ ] Pag-master ng advanced function concepts tulad ng closures at scope  
+- [ ] Bumuo ng proyekto na malaki ang paggamit ng function composition  
+- [ ] Mag-ambag sa open source sa pamamagitan ng pagpapabuti ng function documentation  
+- [ ] Magturo sa iba tungkol sa functions at iba't ibang syntax styles  
+- [ ] Tuklasin ang mga paradigms ng functional programming sa JavaScript  
+- [ ] Gumawa ng personal na library ng reusable functions para sa mga susunod na proyekto  
+
+### 🏆 **Huling Check-in ng Functions Champion**  
+
+**I-celebrate ang iyong pag-master ng functions:**  
+- Ano ang pinaka-kapaki-pakinabang na function na nagawa mo?  
+- Paano nabago ng pag-aaral tungkol sa functions ang pananaw mo sa pag-organisa ng code?  
+- Aling syntax ng function ang mas gusto mo at bakit?  
+- Anong totoong problema ang nais mong lutasin sa pamamagitan ng pagsusulat ng function?  
+
+```mermaid
+journey
+    title Your Function Confidence Evolution
+    section Today
+      Confused by Syntax: 3: You
+      Understanding Basics: 4: You
+      Writing Simple Functions: 5: You
+    section This Week
+      Using Parameters: 4: You
+      Returning Values: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Function Composition: 5: You
+      Advanced Patterns: 5: You
+      Teaching Others: 5: You
+```
+  
+> 🎉 **Na-master mo na ang isa sa pinakamakapangyarihang konsepto ng programming!** Ang functions ay ang pundasyon ng mas malalaking programa. Ang bawat application na gagawin mo ay gagamit ng functions upang mag-organisa, mag-reuse, at mag-structure ng code. Naiintindihan mo na ngayon kung paano i-package ang logic sa reusable components, na ginagawa kang mas mahusay at epektibong programmer. Maligayang pagdating sa mundo ng modular programming! 🚀  
+
+---
+
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na awtoritatibong pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/2-js-basics/3-making-decisions/README.md b/translations/tl/2-js-basics/3-making-decisions/README.md
index 70a533ef25..c66d496e7b 100644
--- a/translations/tl/2-js-basics/3-making-decisions/README.md
+++ b/translations/tl/2-js-basics/3-making-decisions/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90a3c32c3377f83ab750c2447c77ab98",
-  "translation_date": "2025-10-22T15:18:39+00:00",
+  "original_hash": "c688385d15dd3645e924ea0ffee8967f",
+  "translation_date": "2025-11-03T13:46:09+00:00",
   "source_file": "2-js-basics/3-making-decisions/README.md",
   "language_code": "tl"
 }
@@ -13,11 +13,28 @@ CO_OP_TRANSLATOR_METADATA:
 
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your JavaScript Decision-Making Adventure
+    section Foundation
+      Boolean Values: 5: You
+      Comparison Operators: 4: You
+      Logical Thinking: 5: You
+    section Basic Decisions
+      If Statements: 4: You
+      If-Else Logic: 5: You
+      Switch Statements: 4: You
+    section Advanced Logic
+      Logical Operators: 5: You
+      Complex Conditions: 4: You
+      Ternary Expressions: 5: You
+```
+
 Naisip mo na ba kung paano gumagawa ng matatalinong desisyon ang mga aplikasyon? Tulad ng kung paano pumipili ang isang navigation system ng pinakamabilis na ruta, o kung paano nagdedesisyon ang isang thermostat kung kailan bubuksan ang init? Ito ang pangunahing konsepto ng paggawa ng desisyon sa programming.
 
-Katulad ng Analytical Engine ni Charles Babbage na idinisenyo upang sundin ang iba't ibang sequence ng operasyon batay sa mga kondisyon, ang mga modernong JavaScript program ay kailangang gumawa ng mga pagpipilian batay sa iba't ibang sitwasyon. Ang kakayahang mag-branch at gumawa ng desisyon ang nagbabago sa static na code upang maging responsive at matalinong mga aplikasyon.
+Katulad ng Analytical Engine ni Charles Babbage na idinisenyo upang sundin ang iba't ibang sequence ng operasyon batay sa mga kondisyon, ang mga modernong JavaScript program ay kailangang gumawa ng mga pagpipilian batay sa iba't ibang sitwasyon. Ang kakayahang mag-branch at gumawa ng desisyon ang nagbabago sa static na code upang maging responsive at matalino na mga aplikasyon.
 
-Sa araling ito, matututunan mo kung paano ipatupad ang conditional logic sa iyong mga programa. Susuriin natin ang mga conditional statement, comparison operators, at logical expressions na nagbibigay-daan sa iyong code na suriin ang mga sitwasyon at tumugon nang naaangkop.
+Sa araling ito, matututunan mo kung paano ipatupad ang conditional logic sa iyong mga programa. Susuriin natin ang mga conditional statement, comparison operator, at logical expression na nagpapahintulot sa iyong code na suriin ang mga sitwasyon at tumugon nang naaangkop.
 
 ## Pre-Lecture Quiz
 
@@ -31,11 +48,44 @@ Ang kakayahang gumawa ng desisyon at kontrolin ang daloy ng programa ay isang ma
 
 > Maaari mong kunin ang araling ito sa [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
 
-## Maikling Pagbabalik-Aral sa Booleans
+```mermaid
+mindmap
+  root((Decision Making))
+    Boolean Logic
+      true/false
+      Comparison results
+      Logical expressions
+    Conditional Statements
+      if statements
+        Single condition
+        Code execution
+      if-else
+        Two paths
+        Alternative actions
+      switch
+        Multiple options
+        Clean structure
+    Operators
+      Comparison
+        === !== < > <= >=
+        Value relationships
+      Logical
+        && || !
+        Combine conditions
+    Advanced Patterns
+      Ternary
+        ? : syntax
+        Inline decisions
+      Complex Logic
+        Nested conditions
+        Multiple criteria
+```
+
+## Maikling Pagbabalik-tanaw sa Booleans
 
 Bago suriin ang paggawa ng desisyon, balikan natin ang Boolean values mula sa nakaraang aralin. Pinangalanan mula sa mathematician na si George Boole, ang mga value na ito ay kumakatawan sa binary states – alinman `true` o `false`. Walang kalabuan, walang gitnang estado.
 
-Ang mga binary values na ito ang bumubuo sa pundasyon ng lahat ng computational logic. Ang bawat desisyon na ginagawa ng iyong programa ay sa huli ay nagreresulta sa Boolean evaluation.
+Ang mga binary value na ito ang bumubuo sa pundasyon ng lahat ng computational logic. Ang bawat desisyon na ginagawa ng iyong programa ay sa huli ay nagreresulta sa isang Boolean evaluation.
 
 Ang paggawa ng Boolean variables ay simple:
 
@@ -48,22 +98,77 @@ Ito ay lumilikha ng dalawang variable na may explicit na Boolean values.
 
 ✅ Ang Booleans ay pinangalanan mula sa English mathematician, philosopher, at logician na si George Boole (1815–1864).
 
-## Comparison Operators at Booleans
+## Mga Comparison Operator at Booleans
 
-Sa praktika, bihira kang mag-set ng Boolean values nang manu-mano. Sa halip, gagawa ka ng mga ito sa pamamagitan ng pagsusuri ng mga kondisyon: "Mas malaki ba ang numerong ito kaysa sa isa?" o "Magkapantay ba ang mga value na ito?"
+Sa praktika, bihira kang mag-set ng Boolean values nang manu-mano. Sa halip, gagawa ka ng mga ito sa pamamagitan ng pagsusuri ng mga kondisyon: "Mas malaki ba ang numerong ito kaysa sa isa?" o "Magkakapareho ba ang mga value na ito?"
 
-Ang mga comparison operator ang nagbibigay-daan sa mga pagsusuring ito. Kinukumpara nila ang mga value at nagbabalik ng Boolean results batay sa relasyon ng mga operands.
+Ang mga comparison operator ang nagbibigay-daan sa mga pagsusuring ito. Kinukumpara nila ang mga value at nagbabalik ng Boolean results batay sa relasyon ng mga operand.
 
 | Simbolo | Deskripsyon                                                                                                                                                   | Halimbawa          |
 | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **Mas mababa sa**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang value sa kaliwang bahagi ay mas mababa kaysa sa kanan     | `5 < 6 // true`    |
-| `<=`   | **Mas mababa o pantay sa**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang value sa kaliwang bahagi ay mas mababa o pantay sa kanan | `5 <= 6 // true`   |
-| `>`    | **Mas malaki sa**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang value sa kaliwang bahagi ay mas malaki kaysa sa kanan     | `5 > 6 // false`   |
-| `>=`   | **Mas malaki o pantay sa**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang value sa kaliwang bahagi ay mas malaki o pantay sa kanan | `5 >= 6 // false`  |
-| `===`  | **Strict equality**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang mga value sa kanan at kaliwa ay magkapantay AT magkapareho ng data type | `5 === 6 // false` |
-| `!==`  | **Inequality**: Kinukumpara ang dalawang value at nagbabalik ng kabaligtaran ng Boolean value na ibabalik ng strict equality operator                          | `5 !== 6 // true`  |
+| `<`    | **Mas mababa sa**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang value sa kaliwang bahagi ay mas mababa kaysa sa kanan    | `5 < 6 // true`    |
+| `<=`   | **Mas mababa o katumbas ng**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang value sa kaliwang bahagi ay mas mababa o katumbas ng kanan | `5 <= 6 // true`   |
+| `>`    | **Mas mataas sa**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang value sa kaliwang bahagi ay mas mataas kaysa sa kanan    | `5 > 6 // false`   |
+| `>=`   | **Mas mataas o katumbas ng**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang value sa kaliwang bahagi ay mas mataas o katumbas ng kanan | `5 >= 6 // false`  |
+| `===`  | **Strict equality**: Kinukumpara ang dalawang value at nagbabalik ng `true` Boolean data type kung ang mga value sa kanan at kaliwa ay magkapareho AT magkapareho ng data type. | `5 === 6 // false` |
+| `!==`  | **Inequality**: Kinukumpara ang dalawang value at nagbabalik ng kabaligtaran na Boolean value ng kung ano ang ibabalik ng strict equality operator            | `5 !== 6 // true`  |
+
+✅ Subukan ang iyong kaalaman sa pamamagitan ng pagsusulat ng ilang mga comparison sa console ng iyong browser. May data bang nagbalik na ikinagulat mo?
+
+```mermaid
+flowchart LR
+    A["🔢 Values"] --> B["⚖️ Comparison"]
+    B --> C["✅ Boolean Result"]
+    
+    D["5"] --> E["< 6"]
+    E --> F["true"]
+    
+    G["10"] --> H["=== '10'"]
+    H --> I["false"]
+    
+    J["'hello'"] --> K["!== 'world'"]
+    K --> L["true"]
+    
+    M["📋 Operator Types"] --> M1["Equality: === !=="]
+    M --> M2["Relational: < > <= >="]
+    M --> M3["Strict vs Loose"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style M fill:#fff3e0
+```
+
+### 🧠 **Pag-master ng Comparison: Pag-unawa sa Boolean Logic**
+
+**Subukan ang iyong pag-unawa sa comparison:**
+- Bakit sa tingin mo mas karaniwang ginagamit ang `===` (strict equality) kaysa sa `==` (loose equality)?
+- Kaya mo bang hulaan kung ano ang ibabalik ng `5 === '5'`? Paano naman ang `5 == '5'`?
+- Ano ang pagkakaiba ng `!==` at `!=`?
+
+```mermaid
+stateDiagram-v2
+    [*] --> Comparison: Two values
+    Comparison --> StrictEqual: === or !==
+    Comparison --> Relational: < > <= >=
+    
+    StrictEqual --> TypeCheck: Check type AND value
+    Relational --> NumberCompare: Convert to numbers
+    
+    TypeCheck --> BooleanResult: true or false
+    NumberCompare --> BooleanResult
+    
+    note right of StrictEqual
+        Preferred approach
+        No type conversion
+    end note
+    
+    note right of Relational
+        Useful for ranges
+        Numerical comparisons
+    end note
+```
 
-✅ Subukan ang iyong kaalaman sa pamamagitan ng pagsusulat ng ilang comparisons sa console ng iyong browser. May data bang nagbalik na ikinagulat mo?
+> **Pro tip**: Palaging gamitin ang `===` at `!==` para sa equality checks maliban na lang kung talagang kailangan mo ng type conversion. Pinipigilan nito ang hindi inaasahang behavior!
 
 ## If Statement
 
@@ -77,7 +182,7 @@ if (condition) {
 }
 ```
 
-Ang kondisyon ay inilalagay sa loob ng mga parentheses, at kung ito ay `true`, pinapatakbo ng JavaScript ang code sa loob ng curly braces. Kung ito ay `false`, nilalaktawan lang ng JavaScript ang buong block.
+Ang kondisyon ay inilalagay sa loob ng parentheses, at kung ito ay `true`, tatakbo ang JavaScript sa code sa loob ng curly braces. Kung ito ay `false`, lalaktawan lang ng JavaScript ang buong block.
 
 Madalas mong gagamitin ang mga comparison operator upang lumikha ng mga kondisyong ito. Tingnan natin ang isang praktikal na halimbawa:
 
@@ -91,11 +196,29 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-Dahil ang `1000 >= 800` ay nag-evaluate sa `true`, ang code sa loob ng block ay pinapatakbo, na nagpapakita ng "Getting a new laptop!" sa console.
+Dahil ang `1000 >= 800` ay nag-evaluate sa `true`, ang code sa loob ng block ay tatakbo, na magpapakita ng "Getting a new laptop!" sa console.
+
+```mermaid
+flowchart TD
+    A["🚀 Program Start"] --> B{"💰 currentMoney >= laptopPrice?"}
+    B -->|true| C["🎉 'Getting a new laptop!'"]
+    B -->|false| D["⏭️ Skip code block"]
+    C --> E["📋 Continue program"]
+    D --> E
+    
+    F["📊 If Statement Structure"] --> F1["if (condition) {"]
+    F1 --> F2["  // code to run if true"]
+    F2 --> F3["}"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style F fill:#e3f2fd
+```
 
 ## If..Else Statement
 
-Pero paano kung gusto mong gawin ng iyong programa ang ibang bagay kapag ang kondisyon ay false? Dito pumapasok ang `else` – parang backup plan.
+Pero paano kung gusto mong gawin ng iyong programa ang ibang bagay kapag ang kondisyon ay false? Dito papasok ang `else` – parang may backup plan ka.
 
 Ang `else` statement ay nagbibigay sa iyo ng paraan upang sabihin "kung ang kondisyong ito ay hindi totoo, gawin ang ibang bagay na ito."
 
@@ -112,15 +235,44 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-Ngayon, dahil ang `500 >= 800` ay `false`, nilalaktawan ng JavaScript ang unang block at pinapatakbo ang `else` block. Makikita mo ang "Can't afford a new laptop, yet!" sa console.
+Ngayon, dahil ang `500 >= 800` ay `false`, lalaktawan ng JavaScript ang unang block at tatakbo sa `else` block. Makikita mo ang "Can't afford a new laptop, yet!" sa console.
+
+✅ Subukan ang iyong pag-unawa sa code na ito at sa susunod na code sa pamamagitan ng pagpapatakbo nito sa console ng browser. Palitan ang mga value ng mga variable na currentMoney at laptopPrice upang baguhin ang ibinalik na `console.log()`.
+
+### 🎯 **Pagsusuri ng If-Else Logic: Mga Sanga ng Landas**
+
+**Suriin ang iyong pag-unawa sa conditional logic:**
+- Ano ang mangyayari kung ang `currentMoney` ay eksaktong katumbas ng `laptopPrice`?
+- Makakaisip ka ba ng isang sitwasyon sa totoong buhay kung saan magiging kapaki-pakinabang ang if-else logic?
+- Paano mo ito mapapalawak upang hawakan ang maraming saklaw ng presyo?
+
+```mermaid
+flowchart TD
+    A["🔍 Evaluate Condition"] --> B{"Condition True?"}
+    B -->|Yes| C["📤 Execute IF block"]
+    B -->|No| D["📥 Execute ELSE block"]
+    
+    C --> E["✅ One path taken"]
+    D --> E
+    
+    F["🌐 Real-world Examples"] --> F1["User login status"]
+    F --> F2["Age verification"]
+    F --> F3["Form validation"]
+    F --> F4["Game state changes"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#e3f2fd
+    style F fill:#f3e5f5
+```
 
-✅ Subukan ang iyong pag-unawa sa code na ito at sa sumusunod na code sa pamamagitan ng pagpapatakbo nito sa console ng browser. Baguhin ang mga value ng currentMoney at laptopPrice variables upang baguhin ang ibinalik na `console.log()`.
+> **Pangunahing pananaw**: Tinitiyak ng If-else na eksaktong isang landas ang tatahakin. Tinitiyak nito na ang iyong programa ay palaging may tugon sa anumang kondisyon!
 
 ## Switch Statement
 
-Minsan kailangan mong ikumpara ang isang value laban sa maraming opsyon. Bagama't maaari kang mag-chain ng maraming `if..else` statements, nagiging magulo ang ganitong paraan. Ang `switch` statement ay nagbibigay ng mas malinis na istruktura para sa paghawak ng maraming discrete values.
+Minsan kailangan mong ikumpara ang isang value laban sa maraming opsyon. Bagama't maaari kang mag-chain ng maraming `if..else` statements, nagiging magulo ang ganitong paraan. Ang `switch` statement ay nagbibigay ng mas malinis na istruktura para sa paghawak ng maraming discrete na value.
 
-Ang konsepto ay kahalintulad ng mechanical switching systems na ginamit sa mga unang telephone exchanges – ang isang input value ang nagtatakda kung aling partikular na path ang susundan ng execution.
+Ang konsepto ay kahalintulad ng mechanical switching systems na ginamit sa mga unang telephone exchanges – isang input value ang tumutukoy kung aling partikular na landas ang susundan ng execution.
 
 ```javascript
 switch (expression) {
@@ -135,12 +287,12 @@ switch (expression) {
 }
 ```
 
-Ganito ang istruktura nito:
+Ganito ang istruktura:
 - Sinusuri ng JavaScript ang expression nang isang beses
-- Tinitingnan nito ang bawat `case` upang makahanap ng match
-- Kapag nakahanap ng match, pinapatakbo nito ang code block na iyon
-- Ang `break` ang nagsasabi sa JavaScript na huminto at lumabas sa switch
-- Kung walang match na case, pinapatakbo nito ang `default` block (kung mayroon ka nito)
+- Tinitingnan nito ang bawat `case` upang makahanap ng tugma
+- Kapag nakahanap ng tugma, tatakbo ang code block na iyon
+- Ang `break` ay nagsasabi sa JavaScript na huminto at lumabas sa switch
+- Kung walang tugma sa mga case, tatakbo ang `default` block (kung mayroon ka nito)
 
 ```javascript
 // Program using switch statement for day of week
@@ -164,30 +316,101 @@ switch (dayNumber) {
 console.log(`Today is ${dayName}`);
 ```
 
-Sa halimbawang ito, nakikita ng JavaScript na ang `dayNumber` ay `2`, hinahanap ang matching `case 2`, itinatakda ang `dayName` sa "Tuesday", at pagkatapos ay lumalabas sa switch. Ang resulta? "Today is Tuesday" ang nalog sa console.
+Sa halimbawang ito, nakikita ng JavaScript na ang `dayNumber` ay `2`, hinahanap ang tugmang `case 2`, itinatakda ang `dayName` sa "Tuesday", at pagkatapos ay lumalabas sa switch. Ang resulta? "Today is Tuesday" ang makikita sa console.
+
+```mermaid
+flowchart TD
+    A["📥 switch(expression)"] --> B["🔍 Evaluate once"]
+    B --> C{"Match case 1?"}
+    C -->|Yes| D["📋 Execute case 1"]
+    C -->|No| E{"Match case 2?"}
+    E -->|Yes| F["📋 Execute case 2"]
+    E -->|No| G{"Match case 3?"}
+    G -->|Yes| H["📋 Execute case 3"]
+    G -->|No| I["📋 Execute default"]
+    
+    D --> J["🛑 break"]
+    F --> K["🛑 break"]
+    H --> L["🛑 break"]
+    
+    J --> M["✅ Exit switch"]
+    K --> M
+    L --> M
+    I --> M
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style M fill:#e8f5e8
+```
+
+✅ Subukan ang iyong pag-unawa sa code na ito at sa susunod na code sa pamamagitan ng pagpapatakbo nito sa console ng browser. Palitan ang mga value ng variable a upang baguhin ang ibinalik na `console.log()`.
+
+### 🔄 **Pag-master ng Switch Statement: Maraming Opsyon**
+
+**Subukan ang iyong pag-unawa sa switch:**
+- Ano ang mangyayari kung nakalimutan mo ang `break` statement?
+- Kailan mo gagamitin ang `switch` sa halip na maraming `if-else` statements?
+- Bakit kapaki-pakinabang ang `default` case kahit na sa tingin mo ay nasaklaw mo na ang lahat ng posibilidad?
+
+```mermaid
+pie title "When to Use Each Decision Structure"
+    "Simple if-else" : 40
+    "Complex if-else chains" : 25
+    "Switch statements" : 20
+    "Ternary operators" : 15
+```
 
-✅ Subukan ang iyong pag-unawa sa code na ito at sa sumusunod na code sa pamamagitan ng pagpapatakbo nito sa console ng browser. Baguhin ang mga value ng variable a upang baguhin ang ibinalik na `console.log()`.
+> **Pinakamahusay na kasanayan**: Gamitin ang `switch` kapag ikinukumpara ang isang variable laban sa maraming partikular na value. Gamitin ang `if-else` para sa mga range checks o mas kumplikadong kondisyon!
 
 ## Logical Operators at Booleans
 
-Ang mga kumplikadong desisyon ay madalas na nangangailangan ng pagsusuri ng maraming kondisyon nang sabay-sabay. Tulad ng Boolean algebra na nagbibigay-daan sa mga mathematician na pagsamahin ang mga logical expressions, ang programming ay nagbibigay ng logical operators upang ikonekta ang maraming Boolean conditions.
+Ang mga kumplikadong desisyon ay madalas na nangangailangan ng pagsusuri ng maraming kondisyon nang sabay-sabay. Katulad ng Boolean algebra na nagpapahintulot sa mga mathematician na pagsamahin ang mga logical expression, nagbibigay ang programming ng logical operators upang ikonekta ang maraming Boolean na kondisyon.
 
-Ang mga operator na ito ay nagbibigay-daan sa mas sopistikadong conditional logic sa pamamagitan ng pagsasama ng mga simpleng true/false evaluations.
+Ang mga operator na ito ay nagbibigay-daan sa sopistikadong conditional logic sa pamamagitan ng pagsasama-sama ng mga simpleng true/false evaluations.
 
 | Simbolo | Deskripsyon                                                                                     | Halimbawa                                                                 |
 | ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| `&&`   | **Logical AND**: Kinukumpara ang dalawang Boolean expressions. Nagbabalik ng true **kung pareho** ang mga panig ay true | `(5 > 3) && (5 < 10) // Parehong panig ay true. Nagbabalik ng true` |
-| `\|\|` | **Logical OR**: Kinukumpara ang dalawang Boolean expressions. Nagbabalik ng true kung kahit isa sa mga panig ay true     | `(5 > 10) \|\| (5 < 10) // Isang panig ay false, ang isa ay true. Nagbabalik ng true` |
-| `!`    | **Logical NOT**: Nagbabalik ng kabaligtaran na value ng isang Boolean expression                             | `!(5 > 10) // Ang 5 ay hindi mas malaki sa 10, kaya ang "!" ay ginagawang true`         |
+| `&&`   | **Logical AND**: Kinukumpara ang dalawang Boolean expression. Nagbabalik ng true **lamang** kung parehong true ang magkabilang panig | `(5 > 3) && (5 < 10) // Parehong true ang magkabilang panig. Nagbabalik ng true` |
+| `\|\|` | **Logical OR**: Kinukumpara ang dalawang Boolean expression. Nagbabalik ng true kung kahit isa sa magkabilang panig ay true     | `(5 > 10) \|\| (5 < 10) // Isa ay false, ang isa ay true. Nagbabalik ng true` |
+| `!`    | **Logical NOT**: Nagbabalik ng kabaligtaran na value ng isang Boolean expression                             | `!(5 > 10) // Ang 5 ay hindi mas mataas sa 10, kaya ang "!" ay ginagawang true`         |
 
 Ang mga operator na ito ay nagbibigay-daan sa iyo na pagsamahin ang mga kondisyon sa kapaki-pakinabang na paraan:
-- AND (`&&`) nangangahulugan na ang parehong kondisyon ay dapat na true
-- OR (`||`) nangangahulugan na kahit isa sa mga kondisyon ay dapat na true  
-- NOT (`!`) binabaliktad ang true sa false (at kabaligtaran)
+- AND (`&&`) nangangahulugan na parehong kondisyon ay dapat true
+- OR (`||`) nangangahulugan na kahit isa sa kondisyon ay dapat true  
+- NOT (`!`) binabaliktad ang true sa false (at kabaliktaran)
+
+```mermaid
+flowchart LR
+    A["🔗 Logical Operators"] --> B["&& AND"]
+    A --> C["|| OR"]
+    A --> D["! NOT"]
+    
+    B --> B1["Both must be true"]
+    B --> B2["true && true = true"]
+    B --> B3["true && false = false"]
+    
+    C --> C1["At least one true"]
+    C --> C2["true || false = true"]
+    C --> C3["false || false = false"]
+    
+    D --> D1["Flips the value"]
+    D --> D2["!true = false"]
+    D --> D3["!false = true"]
+    
+    E["🌍 Real Examples"] --> E1["Age >= 18 && hasLicense"]
+    E --> E2["isWeekend || isHoliday"]
+    E --> E3["!isLoggedIn"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ## Mga Kondisyon at Desisyon gamit ang Logical Operators
 
-Tingnan natin ang mga logical operators sa aksyon gamit ang mas makatotohanang halimbawa:
+Tingnan natin ang mga logical operator na ito sa aksyon gamit ang mas makatotohanang halimbawa:
 
 ```javascript
 let currentMoney = 600;
@@ -205,9 +428,38 @@ if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
 
 Sa halimbawang ito: kinakalkula natin ang 20% discount price (640), pagkatapos ay sinusuri kung ang ating available funds ay sapat para sa buong presyo O sa discounted price. Dahil ang 600 ay tumutugma sa threshold ng discounted price na 640, ang kondisyon ay nag-evaluate sa true.
 
+### 🧮 **Pagsusuri ng Logical Operators: Pagsasama-sama ng Kondisyon**
+
+**Subukan ang iyong pag-unawa sa logical operator:**
+- Sa expression na `A && B`, ano ang mangyayari kung ang A ay false? Ang B ba ay susuriin pa?
+- Makakaisip ka ba ng sitwasyon kung saan kakailanganin mo ang lahat ng tatlong operator (&&, ||, !)?
+- Ano ang pagkakaiba ng `!user.isActive` at `user.isActive !== true`?
+
+```mermaid
+stateDiagram-v2
+    [*] --> EvaluateA: A && B
+    EvaluateA --> CheckB: A is true
+    EvaluateA --> ReturnFalse: A is false
+    CheckB --> ReturnTrue: B is true
+    CheckB --> ReturnFalse: B is false
+    
+    [*] --> EvaluateC: A || B
+    EvaluateC --> ReturnTrue: A is true
+    EvaluateC --> CheckD: A is false
+    CheckD --> ReturnTrue: B is true
+    CheckD --> ReturnFalse: B is false
+    
+    note right of EvaluateA
+        Short-circuit evaluation:
+        If A is false, B is never checked
+    end note
+```
+
+> **Tip sa Performance**: Ginagamit ng JavaScript ang "short-circuit evaluation" - sa `A && B`, kung ang A ay false, ang B ay hindi na susuriin. Gamitin ito sa iyong kalamangan!
+
 ### Negation Operator
 
-Minsan mas madali ang mag-isip kung kailan ang isang bagay ay HINDI totoo. Tulad ng sa halip na magtanong "Naka-login ba ang user?", maaaring gusto mong magtanong "Hindi ba naka-login ang user?" Ang exclamation mark (`!`) operator ang nagbabaliktad ng logic para sa iyo.
+Minsan mas madali ang mag-isip tungkol sa kung kailan ang isang bagay ay HINDI totoo. Tulad ng sa halip na magtanong "Naka-log in ba ang user?", baka gusto mong magtanong "Hindi ba naka-log in ang user?" Ang exclamation mark (`!`) operator ang nagbabaliktad ng logic para sa iyo.
 
 ```javascript
 if (!condition) {
@@ -217,19 +469,19 @@ if (!condition) {
 }
 ```
 
-Ang `!` operator ay parang sinasabi "ang kabaligtaran ng..." – kung ang isang bagay ay `true`, ginagawa itong `false` ng `!`, at kabaligtaran.
+Ang `!` operator ay parang sinasabi "ang kabaligtaran ng..." – kung ang isang bagay ay `true`, ginagawang `false` ng `!`, at kabaliktaran.
 
 ### Ternary Expressions
 
-Para sa simpleng conditional assignments, nagbibigay ang JavaScript ng **ternary operator**. Ang maikling syntax na ito ay nagbibigay-daan sa iyo na magsulat ng conditional expression sa isang linya, kapaki-pakinabang kapag kailangan mong mag-assign ng isa sa dalawang value batay sa isang kondisyon.
+Para sa simpleng conditional assignments, nagbibigay ang JavaScript ng **ternary operator**. Ang maikling syntax na ito ay nagbibigay-daan sa iyo na magsulat ng conditional expression sa isang linya, kapaki-pakinabang kapag kailangan mong mag-assign ng isa sa dalawang value batay sa kondisyon.
 
 ```javascript
 let variable = condition ? returnThisIfTrue : returnThisIfFalse;
 ```
 
-Binabasa ito tulad ng isang tanong: "Totoo ba ang kondisyong ito? Kung oo, gamitin ang value na ito. Kung hindi, gamitin ang value na iyon."
+Binabasa ito na parang tanong: "Ang kondisyong ito ba ay totoo? Kung oo, gamitin ang value na ito. Kung hindi, gamitin ang value na iyon."
 
-Narito ang isang mas konkretong halimbawa:
+Narito ang mas konkretong halimbawa:
 
 ```javascript
 let firstNumber = 20;
@@ -237,11 +489,11 @@ let secondNumber = 10;
 let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
 ```
 
-✅ Maglaan ng ilang minuto upang basahin ang code na ito nang ilang beses. Nauunawaan mo ba kung paano gumagana ang mga operator na ito?
+✅ Maglaan ng sandali upang basahin ang code na ito nang ilang beses. Nauunawaan mo ba kung paano gumagana ang mga operator na ito?
 
-Narito ang sinasabi ng linyang ito: "Mas malaki ba ang `firstNumber` kaysa sa `secondNumber`? Kung oo, ilagay ang `firstNumber` sa `biggestNumber`. Kung hindi, ilagay ang `secondNumber` sa `biggestNumber`."
+Narito ang sinasabi ng linyang ito: "Mas mataas ba ang `firstNumber` kaysa sa `secondNumber`? Kung oo, ilagay ang `firstNumber` sa `biggestNumber`. Kung hindi, ilagay ang `secondNumber` sa `biggestNumber`."
 
-Ang ternary operator ay isang mas maikling paraan upang isulat ang tradisyunal na `if..else` statement:
+Ang ternary operator ay mas maikling paraan lamang upang isulat ang tradisyunal na `if..else` statement:
 
 ```javascript
 let biggestNumber;
@@ -252,10 +504,34 @@ if (firstNumber > secondNumber) {
 }
 ```
 
-Parehong nagbubunga ng magkaparehong resulta ang dalawang paraan. Ang ternary operator ay nag-aalok ng pagiging maikli, habang ang tradisyunal na if-else na istruktura ay maaaring mas madaling basahin para sa mas kumplikadong mga kondisyon.
+Parehong nagbubunga ng magkaparehong resulta ang dalawang paraan. Ang ternary operator ay nag-aalok ng pagiging maikli, habang ang tradisyunal na if-else na istruktura ay maaaring mas madaling basahin para sa mas kumplikadong kondisyon.
+
+```mermaid
+flowchart LR
+    A["🤔 Ternary Operator"] --> B["condition ?"]
+    B --> C["valueIfTrue :"]
+    C --> D["valueIfFalse"]
+    
+    E["📝 Traditional If-Else"] --> F["if (condition) {"]
+    F --> G["  return valueIfTrue"]
+    G --> H["} else {"]
+    H --> I["  return valueIfFalse"]
+    I --> J["}"]
+    
+    K["⚡ When to Use"] --> K1["Simple assignments"]
+    K --> K2["Short conditions"]
+    K --> K3["Inline decisions"]
+    K --> K4["Return statements"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style K fill:#e8f5e8
+```
 
 ---
 
+
+
 ## 🚀 Hamon
 
 Gumawa ng programa na unang isinulat gamit ang logical operators, at pagkatapos ay isulat muli ito gamit ang ternary expression. Ano ang mas gusto mong syntax?
@@ -264,11 +540,11 @@ Gumawa ng programa na unang isinulat gamit ang logical operators, at pagkatapos
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
 
 **Deskripsyon:** Gumawa ng komprehensibong grade calculator na nagpapakita ng maraming konsepto ng paggawa ng desisyon mula sa araling ito, kabilang ang if-else statements, switch statements, logical operators, at ternary expressions.
 
-**Prompt:** Sumulat ng JavaScript program na kumukuha ng numerical score ng isang estudyante (0-100) at tinutukoy ang kanilang letter grade gamit ang sumusunod na pamantayan:
+**Prompt:** Sumulat ng JavaScript program na tumatanggap ng numerical score ng isang estudyante (0-100) at tinutukoy ang kanilang letter grade gamit ang sumusunod na pamantayan:
 - A: 90-100
 - B: 80-89  
 - C: 70-79
@@ -277,30 +553,130 @@ Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
 
 Mga Kinakailangan:
 1. Gumamit ng if-else statement upang matukoy ang letter grade
-2. Gumamit ng logical operators upang suriin kung ang estudyante ay pumasa (grade >= 60) AT may honors (grade >= 90)
-3. Gumamit ng switch statement upang magbigay ng partikular na feedback para sa bawat letter grade
-4. Gumamit ng ternary operator upang matukoy kung ang estudyante ay kwalipikado para sa susunod na kurso (grade >= 70)
-5. Isama ang input validation upang matiyak na ang score ay nasa pagitan ng 0 at 100
+2. Gumamit ng mga logical operator para suriin kung pasado ang estudyante (grade >= 60) AT may honors (grade >= 90)  
+3. Gumamit ng switch statement para magbigay ng partikular na feedback para sa bawat letter grade  
+4. Gumamit ng ternary operator para matukoy kung kwalipikado ang estudyante para sa susunod na kurso (grade >= 70)  
+5. Maglagay ng input validation para masigurong ang score ay nasa pagitan ng 0 at 100  
 
-Subukan ang iyong programa gamit ang iba't ibang scores kabilang ang edge cases tulad ng 59, 60, 89, 90, at mga invalid inputs.
+Subukan ang iyong programa gamit ang iba't ibang scores kabilang ang mga edge cases tulad ng 59, 60, 89, 90, at mga invalid na input.  
 
-Alamin ang higit pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.  
 
-## Post-Lecture Quiz
+## Post-Lecture Quiz  
 
-[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/12)
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/12)  
 
-## Review & Self Study
+## Review & Self Study  
 
-Basahin ang higit pa tungkol sa maraming operator na available sa user [sa MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
+Basahin pa ang tungkol sa iba't ibang operators na magagamit ng user [sa MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).  
 
-Dumaan sa kahanga-hangang [operator lookup](https://joshwcomeau.com/operator-lookup/) ni Josh Comeau!
+Suriin ang kahanga-hangang [operator lookup](https://joshwcomeau.com/operator-lookup/) ni Josh Comeau!  
 
-## Assignment
+## Assignment  
 
-[Operators](assignment.md)
+[Operators](assignment.md)  
+
+---
+
+## 🧠 **Buod ng Iyong Decision-Making Toolkit**  
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Decisions"] --> B["🔍 Boolean Logic"]
+    A --> C["📊 Conditional Statements"]
+    A --> D["🔗 Logical Operators"]
+    A --> E["⚡ Advanced Patterns"]
+    
+    B --> B1["true/false values"]
+    B --> B2["Comparison operators"]
+    B --> B3["Truthiness concepts"]
+    
+    C --> C1["if statements"]
+    C --> C2["if-else chains"]
+    C --> C3["switch statements"]
+    
+    D --> D1["&& (AND)"]
+    D --> D2["|| (OR)"]
+    D --> D3["! (NOT)"]
+    
+    E --> E1["Ternary operator"]
+    E --> E2["Short-circuit evaluation"]
+    E --> E3["Complex conditions"]
+    
+    F["💡 Key Principles"] --> F1["Clear readable conditions"]
+    F --> F2["Consistent comparison style"]
+    F --> F3["Proper operator precedence"]
+    F --> F4["Efficient evaluation order"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+  
+---
+
+## 🚀 Ang Iyong JavaScript Decision-Making Mastery Timeline  
+
+### ⚡ **Mga Magagawa Mo sa Loob ng Susunod na 5 Minuto**  
+- [ ] Magpraktis ng comparison operators sa browser console  
+- [ ] Gumawa ng simpleng if-else statement na sumusuri sa iyong edad  
+- [ ] Subukan ang hamon: isulat muli ang isang if-else gamit ang ternary operator  
+- [ ] Subukan kung ano ang mangyayari sa iba't ibang "truthy" at "falsy" values  
+
+### 🎯 **Mga Magagawa Mo sa Loob ng Isang Oras**  
+- [ ] Kumpletuhin ang post-lesson quiz at suriin ang anumang nakakalitong konsepto  
+- [ ] Bumuo ng komprehensibong grade calculator mula sa GitHub Copilot challenge  
+- [ ] Gumawa ng simpleng decision tree para sa isang real-world na sitwasyon (tulad ng pagpili ng isusuot)  
+- [ ] Magpraktis ng pagsasama-sama ng maraming kondisyon gamit ang logical operators  
+- [ ] Mag-eksperimento sa switch statements para sa iba't ibang gamit  
+
+### 📅 **Logic Mastery Mo sa Loob ng Isang Linggo**  
+- [ ] Kumpletuhin ang operators assignment gamit ang mga malikhaing halimbawa  
+- [ ] Bumuo ng mini quiz application gamit ang iba't ibang conditional structures  
+- [ ] Gumawa ng form validator na sumusuri sa maraming kondisyon ng input  
+- [ ] Magpraktis ng mga exercise sa [operator lookup](https://joshwcomeau.com/operator-lookup/) ni Josh Comeau  
+- [ ] I-refactor ang umiiral na code para gumamit ng mas angkop na conditional structures  
+- [ ] Pag-aralan ang short-circuit evaluation at ang mga implikasyon nito sa performance  
+
+### 🌟 **Transformation Mo sa Loob ng Isang Buwan**  
+- [ ] Masterin ang mga complex nested conditions at panatilihin ang readability ng code  
+- [ ] Bumuo ng application na may sopistikadong decision-making logic  
+- [ ] Mag-ambag sa open source sa pamamagitan ng pagpapabuti ng conditional logic sa umiiral na mga proyekto  
+- [ ] Magturo sa iba tungkol sa iba't ibang conditional structures at kung kailan gagamitin ang bawat isa  
+- [ ] Tuklasin ang mga functional programming approach sa conditional logic  
+- [ ] Gumawa ng personal na reference guide para sa mga best practices sa conditional logic  
+
+### 🏆 **Final Decision-Making Champion Check-in**  
+
+**I-celebrate ang iyong mastery sa logical thinking:**  
+- Ano ang pinaka-komplikadong decision logic na matagumpay mong na-implement?  
+- Aling conditional structure ang pinaka-natural para sa iyo at bakit?  
+- Paano binago ng pag-aaral tungkol sa logical operators ang iyong paraan ng paglutas ng problema?  
+- Anong real-world application ang makikinabang sa sopistikadong decision-making logic?  
+
+```mermaid
+journey
+    title Your Logical Thinking Evolution
+    section Today
+      Boolean Confusion: 3: You
+      If-Else Understanding: 4: You
+      Operator Recognition: 5: You
+    section This Week
+      Complex Conditions: 4: You
+      Switch Mastery: 5: You
+      Logical Combinations: 5: You
+    section Next Month
+      Advanced Patterns: 5: You
+      Performance Awareness: 5: You
+      Teaching Others: 5: You
+```
+  
+> 🧠 **Na-master mo na ang sining ng digital decision-making!** Ang bawat interactive na application ay umaasa sa conditional logic para tumugon nang matalino sa mga aksyon ng user at nagbabagong kondisyon. Naiintindihan mo na ngayon kung paano gawing "mag-isip," mag-evaluate, at pumili ng angkop na tugon ang iyong mga programa. Ang pundasyong ito ng lohika ang magpapalakas sa bawat dynamic na application na iyong bubuuin! 🎉  
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/2-js-basics/4-arrays-loops/README.md b/translations/tl/2-js-basics/4-arrays-loops/README.md
index fa3eee2a84..d4bfb1730f 100644
--- a/translations/tl/2-js-basics/4-arrays-loops/README.md
+++ b/translations/tl/2-js-basics/4-arrays-loops/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "9197f8af0fef9be6e81d4dbda23c7e7d",
-  "translation_date": "2025-10-22T15:17:59+00:00",
+  "original_hash": "1710a50a519a6e4a1b40a5638783018d",
+  "translation_date": "2025-11-03T13:45:30+00:00",
   "source_file": "2-js-basics/4-arrays-loops/README.md",
   "language_code": "tl"
 }
@@ -12,14 +12,31 @@ CO_OP_TRANSLATOR_METADATA:
 ![Mga Pangunahing Kaalaman sa JavaScript - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.tl.png)
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
+```mermaid
+journey
+    title Your Arrays & Loops Adventure
+    section Array Fundamentals
+      Creating Arrays: 5: You
+      Accessing Elements: 4: You
+      Array Methods: 5: You
+    section Loop Mastery
+      For Loops: 4: You
+      While Loops: 5: You
+      Modern Syntax: 4: You
+    section Data Processing
+      Array + Loops: 5: You
+      Real-world Applications: 4: You
+      Performance Optimization: 5: You
+```
+
 ## Pre-Lecture Quiz
 [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/13)
 
-Naisip mo na ba kung paano nagtatala ang mga website ng mga item sa shopping cart o nagpapakita ng listahan ng mga kaibigan? Dito pumapasok ang arrays at loops. Ang arrays ay parang digital na lalagyan na nagtatago ng maraming impormasyon, habang ang loops ay nagbibigay-daan sa iyo na magtrabaho sa lahat ng data nang epektibo nang hindi inuulit ang code.
+Naisip mo na ba kung paano nagtatala ang mga website ng mga item sa shopping cart o nagpapakita ng listahan ng mga kaibigan? Diyan pumapasok ang arrays at loops. Ang arrays ay parang mga digital na lalagyan na nag-iimbak ng maraming impormasyon, habang ang loops ay nagbibigay-daan sa iyo na magtrabaho sa lahat ng data nang epektibo nang hindi inuulit ang code.
 
-Magkasama, ang dalawang konseptong ito ang bumubuo ng pundasyon para sa paghawak ng impormasyon sa iyong mga programa. Matutunan mong lumipat mula sa manu-manong pagsusulat ng bawat hakbang patungo sa paggawa ng matalino at epektibong code na maaaring magproseso ng daan-daan o libu-libong item nang mabilis.
+Ang dalawang konseptong ito ay bumubuo ng pundasyon para sa paghawak ng impormasyon sa iyong mga programa. Matututo kang lumipat mula sa manu-manong pagsusulat ng bawat hakbang patungo sa paggawa ng matalino at epektibong code na maaaring magproseso ng daan-daang o libu-libong item nang mabilis.
 
-Sa pagtatapos ng araling ito, maiintindihan mo kung paano magawa ang mga kumplikadong gawain sa data gamit lamang ang ilang linya ng code. Tuklasin natin ang mga mahahalagang konsepto sa programming.
+Sa pagtatapos ng araling ito, maiintindihan mo kung paano magawa ang mga kumplikadong gawain sa data gamit ang ilang linya ng code lamang. Tuklasin natin ang mga mahahalagang konsepto sa programming na ito.
 
 [![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
 
@@ -29,13 +46,53 @@ Sa pagtatapos ng araling ito, maiintindihan mo kung paano magawa ang mga kumplik
 
 > Maaari mong kunin ang araling ito sa [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
 
+```mermaid
+mindmap
+  root((Data Processing))
+    Arrays
+      Structure
+        Square brackets syntax
+        Zero-based indexing
+        Dynamic sizing
+      Operations
+        push/pop
+        shift/unshift
+        indexOf/includes
+      Types
+        Numbers array
+        Strings array
+        Mixed types
+    Loops
+      For Loops
+        Counting iterations
+        Array processing
+        Predictable flow
+      While Loops
+        Condition-based
+        Unknown iterations
+        User input
+      Modern Syntax
+        for...of
+        forEach
+        Functional methods
+    Applications
+      Data Analysis
+        Statistics
+        Filtering
+        Transformations
+      User Interfaces
+        Lists
+        Menus
+        Galleries
+```
+
 ## Arrays
 
-Isipin ang arrays bilang isang digital na filing cabinet - sa halip na mag-imbak ng isang dokumento bawat drawer, maaari mong ayusin ang maraming kaugnay na item sa isang solong, nakaayos na lalagyan. Sa mga termino ng programming, ang arrays ay nagbibigay-daan sa iyo na mag-imbak ng maraming impormasyon sa isang organisadong pakete.
+Isipin ang arrays bilang isang digital na filing cabinet - sa halip na mag-imbak ng isang dokumento bawat drawer, maaari mong ayusin ang maraming kaugnay na item sa isang solong, maayos na lalagyan. Sa mga termino ng programming, ang arrays ay nagbibigay-daan sa iyo na mag-imbak ng maraming piraso ng impormasyon sa isang maayos na pakete.
 
-Kung ikaw ay gumagawa ng photo gallery, nagma-manage ng to-do list, o nagtatala ng high scores sa isang laro, ang arrays ang pundasyon para sa organisasyon ng data. Tingnan natin kung paano ito gumagana.
+Kung ikaw ay gumagawa ng photo gallery, nagma-manage ng to-do list, o nagtatala ng mga high scores sa isang laro, ang arrays ang pundasyon para sa organisasyon ng data. Tingnan natin kung paano ito gumagana.
 
-✅ Ang arrays ay nasa paligid natin! Makakaisip ka ba ng halimbawa ng array sa totoong buhay, tulad ng solar panel array?
+✅ Ang arrays ay nasa paligid natin! Makakaisip ka ba ng isang halimbawa ng array sa totoong buhay, tulad ng isang solar panel array?
 
 ### Paglikha ng Arrays
 
@@ -47,7 +104,7 @@ const myArray = [];
 ```
 
 **Ano ang nangyayari dito?**
-Kakagawa mo lang ng isang walang laman na lalagyan gamit ang mga square brackets `[]`. Isipin ito na parang isang walang laman na istante ng aklatan - handa na itong maglaman ng anumang mga libro na nais mong ayusin doon.
+Kakagawa mo lang ng isang walang laman na lalagyan gamit ang mga square brackets `[]`. Isipin ito na parang isang walang laman na istante ng aklatan - handa na itong maglaman ng anumang mga aklat na nais mong ayusin doon.
 
 Maaari mo ring punan ang iyong array ng mga paunang halaga mula sa simula:
 
@@ -63,15 +120,45 @@ const scores = [95, 87, 92, 78, 85];
 ```
 
 **Mga cool na bagay na mapapansin:**
-- Maaari kang mag-imbak ng text, numero, o kahit true/false values sa parehong array
+- Maaari kang mag-imbak ng text, numero, o kahit mga true/false na halaga sa parehong array
 - Paghiwalayin lang ang bawat item gamit ang comma - madali!
-- Perpekto ang arrays para sa pag-iingat ng kaugnay na impormasyon nang magkasama
+- Perpekto ang arrays para sa pag-iimbak ng mga kaugnay na impormasyon
+
+```mermaid
+flowchart LR
+    A["📦 Arrays"] --> B["Create [ ]"]
+    A --> C["Store Multiple Items"]
+    A --> D["Access by Index"]
+    
+    B --> B1["const arr = []"]
+    B --> B2["const arr = [1,2,3]"]
+    
+    C --> C1["Numbers"]
+    C --> C2["Strings"]
+    C --> C3["Booleans"]
+    C --> C4["Mixed Types"]
+    
+    D --> D1["arr[0] = first"]
+    D --> D2["arr[1] = second"]
+    D --> D3["arr[2] = third"]
+    
+    E["📊 Array Index"] --> E1["Index 0: First"]
+    E --> E2["Index 1: Second"]
+    E --> E3["Index 2: Third"]
+    E --> E4["Index n-1: Last"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-### Array Indexing
+### Pag-index ng Array
 
-Narito ang isang bagay na maaaring mukhang hindi pangkaraniwan sa simula: ang arrays ay binibilang ang kanilang mga item simula sa 0, hindi 1. Ang zero-based indexing na ito ay may ugat sa kung paano gumagana ang memorya ng computer - ito ay naging isang programming convention mula pa noong unang panahon ng mga wika sa programming tulad ng C. Ang bawat lugar sa array ay may sariling address number na tinatawag na **index**.
+Narito ang isang bagay na maaaring mukhang hindi pangkaraniwan sa simula: ang mga array ay nagbibilang ng kanilang mga item simula sa 0, hindi 1. Ang zero-based indexing na ito ay may ugat sa kung paano gumagana ang memorya ng computer - ito ay naging isang programming convention mula pa noong unang panahon ng mga wika sa programming tulad ng C. Ang bawat puwesto sa array ay may sariling numero ng address na tinatawag na **index**.
 
-| Index | Halaga | Deskripsyon |
+| Index | Halaga | Paglalarawan |
 |-------|-------|-------------|
 | 0 | "Chocolate" | Unang elemento |
 | 1 | "Strawberry" | Ikalawang elemento |
@@ -79,7 +166,7 @@ Narito ang isang bagay na maaaring mukhang hindi pangkaraniwan sa simula: ang ar
 | 3 | "Pistachio" | Ikaapat na elemento |
 | 4 | "Rocky Road" | Ikalimang elemento |
 
-✅ Ikaw ba ay nagulat na ang arrays ay nagsisimula sa zero index? Sa ilang programming languages, ang indexes ay nagsisimula sa 1. Mayroong isang kawili-wiling kasaysayan tungkol dito, na maaari mong [basahin sa Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+✅ Nagulat ka ba na ang arrays ay nagsisimula sa zero index? Sa ilang programming languages, ang mga index ay nagsisimula sa 1. Mayroong isang kawili-wiling kasaysayan tungkol dito, na maaari mong [basahin sa Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
 
 **Pag-access sa mga Elemento ng Array:**
 
@@ -92,9 +179,9 @@ console.log(iceCreamFlavors[2]); // "Vanilla" - third element
 console.log(iceCreamFlavors[4]); // "Rocky Road" - last element
 ```
 
-**Paghiwa-hiwalay sa nangyayari dito:**
-- **Gumagamit** ng square bracket notation na may index number para ma-access ang mga elemento
-- **Ibinabalik** ang halaga na nakaimbak sa partikular na posisyon sa array
+**Pag-unawa sa nangyayari dito:**
+- **Gumagamit** ng square bracket notation na may numero ng index para ma-access ang mga elemento
+- **Nagbabalik** ng halaga na nakaimbak sa partikular na posisyon sa array
 - **Nagsisimula** sa pagbilang mula sa 0, kaya ang unang elemento ay index 0
 
 **Pagbabago ng mga Elemento ng Array:**
@@ -109,7 +196,7 @@ iceCreamFlavors[5] = "Cookie Dough";
 console.log(iceCreamFlavors[5]); // "Cookie Dough"
 ```
 
-**Sa itaas, ginawa natin ang:**
+**Sa itaas, ginawa natin:**
 - **Binago** ang elemento sa index 4 mula "Rocky Road" patungong "Butter Pecan"
 - **Nagdagdag** ng bagong elemento "Cookie Dough" sa index 5
 - **Pinalawak** ang haba ng array nang awtomatiko kapag nagdagdag ng lampas sa kasalukuyang hangganan
@@ -129,8 +216,8 @@ iceCreamFlavors.push("Mint Chip");
 console.log(iceCreamFlavors.length); // 6
 ```
 
-**Mga mahalagang puntos na tandaan:**
-- **Ibinabalik** ang kabuuang bilang ng mga elemento sa array
+**Mga mahalagang punto na dapat tandaan:**
+- **Nagbabalik** ng kabuuang bilang ng mga elemento sa array
 - **Ina-update** nang awtomatiko kapag may idinagdag o tinanggal na mga elemento
 - **Nagbibigay** ng dynamic na bilang na kapaki-pakinabang para sa loops at validation
 
@@ -156,21 +243,88 @@ const hasApple = fruits.includes("apple"); // Returns true
 - **Nagdaragdag** ng mga elemento gamit ang `push()` (dulo) at `unshift()` (simula)
 - **Nag-aalis** ng mga elemento gamit ang `pop()` (dulo) at `shift()` (simula)
 - **Hinahanap** ang mga elemento gamit ang `indexOf()` at sinusuri ang pagkakaroon gamit ang `includes()`
-- **Ibinabalik** ang mga kapaki-pakinabang na halaga tulad ng mga tinanggal na elemento o mga posisyon ng index
+- **Nagbabalik** ng mga kapaki-pakinabang na halaga tulad ng mga tinanggal na elemento o mga posisyon ng index
+
+✅ Subukan mo ito! Gumamit ng console ng browser para gumawa at manipulahin ang isang array na ikaw mismo ang lumikha.
+
+### 🧠 **Pag-check ng Mga Pangunahing Kaalaman sa Array: Pag-aayos ng Iyong Data**
+
+**Subukan ang iyong kaalaman sa array:**
+- Bakit sa tingin mo nagsisimula ang arrays sa pagbilang mula sa 0 sa halip na 1?
+- Ano ang mangyayari kung susubukan mong i-access ang isang index na hindi umiiral (tulad ng `arr[100]` sa isang 5-element array)?
+- Makakaisip ka ba ng tatlong sitwasyon sa totoong buhay kung saan magiging kapaki-pakinabang ang arrays?
+
+```mermaid
+stateDiagram-v2
+    [*] --> EmptyArray: const arr = []
+    EmptyArray --> WithItems: Add elements
+    WithItems --> Accessing: Use indexes
+    Accessing --> Modifying: Change values
+    Modifying --> Processing: Use methods
+    
+    WithItems --> WithItems: push(), unshift()
+    Processing --> Processing: pop(), shift()
+    
+    note right of Accessing
+        Zero-based indexing
+        arr[0] = first element
+    end note
+    
+    note right of Processing
+        Built-in methods
+        Dynamic operations
+    end note
+```
 
-✅ Subukan mo ito! Gumamit ng console ng iyong browser upang gumawa at manipulahin ang isang array na ikaw mismo ang lumikha.
+> **Insight sa Totoong Buhay**: Ang arrays ay nasa lahat ng dako sa programming! Mga feed sa social media, shopping carts, photo galleries, mga kanta sa playlist - lahat ng ito ay arrays sa likod ng eksena!
 
 ## Loops
 
-Isipin ang sikat na parusa mula sa mga nobela ni Charles Dickens kung saan ang mga estudyante ay kailangang magsulat ng mga linya nang paulit-ulit sa isang slate. Isipin kung maaari mong simpleng utusan ang isang tao na "isulat ang pangungusap na ito ng 100 beses" at magawa ito nang awtomatiko. Iyan ang eksaktong ginagawa ng loops para sa iyong code.
+Isipin ang sikat na parusa mula sa mga nobela ni Charles Dickens kung saan kailangang magsulat ng mga linya nang paulit-ulit ang mga estudyante sa isang slate. Isipin kung maaari mong simpleng utusan ang isang tao na "isulat ang pangungusap na ito ng 100 beses" at magawa ito nang awtomatiko. Iyan ang eksaktong ginagawa ng loops para sa iyong code.
 
-Ang loops ay parang may masipag na katulong na maaaring ulitin ang mga gawain nang walang error. Kung kailangan mong suriin ang bawat item sa shopping cart o ipakita ang lahat ng mga larawan sa isang album, ang loops ang humahawak sa pag-uulit nang epektibo.
+Ang loops ay parang may walang pagod na katulong na maaaring ulitin ang mga gawain nang walang error. Kung kailangan mong suriin ang bawat item sa shopping cart o ipakita ang lahat ng mga larawan sa isang album, ang loops ang humahawak sa pag-uulit nang epektibo.
 
 Nagbibigay ang JavaScript ng ilang uri ng loops na maaari mong pagpilian. Tingnan natin ang bawat isa at unawain kung kailan ito gagamitin.
 
+```mermaid
+flowchart TD
+    A["🔄 Loop Types"] --> B["For Loop"]
+    A --> C["While Loop"]
+    A --> D["For...of Loop"]
+    A --> E["forEach Method"]
+    
+    B --> B1["Known iterations"]
+    B --> B2["Counter-based"]
+    B --> B3["for(init; condition; increment)"]
+    
+    C --> C1["Unknown iterations"]
+    C --> C2["Condition-based"]
+    C --> C3["while(condition)"]
+    
+    D --> D1["Modern ES6+"]
+    D --> D2["Array iteration"]
+    D --> D3["for(item of array)"]
+    
+    E --> E1["Functional style"]
+    E --> E2["Array method"]
+    E --> E3["array.forEach(callback)"]
+    
+    F["⏰ When to Use"] --> F1["For: Counting, indexes"]
+    F --> F2["While: User input, searching"]
+    F --> F3["For...of: Simple iteration"]
+    F --> F4["forEach: Functional programming"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ### For Loop
 
-Ang `for` loop ay parang pag-set ng timer - alam mo nang eksakto kung ilang beses mo gustong mangyari ang isang bagay. Napaka-organisado at predictable nito, na ginagawang perpekto kapag nagtatrabaho ka sa arrays o kailangang magbilang ng mga bagay.
+Ang `for` loop ay parang pag-set ng timer - alam mo nang eksakto kung ilang beses mo gustong mangyari ang isang bagay. Napaka-organisado at predictable nito, kaya perpekto ito kapag nagtatrabaho ka sa arrays o kailangang magbilang ng mga bagay.
 
 **Struktura ng For Loop:**
 
@@ -194,23 +348,50 @@ for (let i = 0; i < testScores.length; i++) {
 ```
 
 **Hakbang-hakbang, narito ang nangyayari:**
-- **Nagsisimula** ang counter variable na `i` sa 0 sa simula
-- **Sinusuri** ang kondisyon na `i < 10` bago ang bawat pag-ulit
+- **Nagsisimula** ang counter variable `i` sa 0 sa simula
+- **Sinusuri** ang kondisyon `i < 10` bago ang bawat iteration
 - **Isinasagawa** ang code block kapag ang kondisyon ay totoo
-- **Ina-update** ang `i` ng 1 pagkatapos ng bawat pag-ulit gamit ang `i++`
-- **Humihinto** kapag ang kondisyon ay naging mali (kapag umabot na sa 10 ang `i`)
+- **Ina-update** ang `i` ng 1 pagkatapos ng bawat iteration gamit ang `i++`
+- **Humihinto** kapag ang kondisyon ay naging false (kapag umabot ang `i` sa 10)
+
+✅ Patakbuhin ang code na ito sa console ng browser. Ano ang nangyayari kapag gumawa ka ng maliliit na pagbabago sa counter, kondisyon, o expression ng iteration? Kaya mo bang gawing paatras ito, na gumagawa ng countdown?
+
+### 🗓️ **Pag-check ng Mastery sa For Loop: Kinokontrol na Pag-uulit**
+
+**Suriin ang iyong kaalaman sa for loop:**
+- Ano ang tatlong bahagi ng isang for loop, at ano ang ginagawa ng bawat isa?
+- Paano mo i-loop ang isang array nang paatras?
+- Ano ang mangyayari kung nakalimutan mo ang bahagi ng increment (`i++`)?
+
+```mermaid
+flowchart TD
+    A["🚀 Start For Loop"] --> B["Initialize: let i = 0"]
+    B --> C{"Condition: i < array.length?"}
+    C -->|true| D["Execute code block"]
+    D --> E["Increment: i++"]
+    E --> C
+    C -->|false| F["✅ Exit loop"]
+    
+    G["📋 Common Patterns"] --> G1["for(let i=0; i<n; i++)"]
+    G --> G2["for(let i=n-1; i>=0; i--)"]
+    G --> G3["for(let i=0; i<arr.length; i+=2)"]
+    
+    style A fill:#e3f2fd
+    style F fill:#e8f5e8
+    style G fill:#fff3e0
+```
 
-✅ Patakbuhin ang code na ito sa console ng browser. Ano ang mangyayari kapag gumawa ka ng maliliit na pagbabago sa counter, kondisyon, o expression ng pag-ulit? Kaya mo bang gawing pabaliktad ito, na gumagawa ng countdown?
+> **Karunungan sa Loop**: Ang for loops ay perpekto kapag alam mo nang eksakto kung ilang beses mo kailangang ulitin ang isang bagay. Ito ang pinakakaraniwang pagpipilian para sa pagproseso ng array!
 
 ### While Loop
 
-Ang `while` loop ay parang sinasabi na "patuloy na gawin ito hanggang sa..." - maaaring hindi mo alam nang eksakto kung ilang beses itong tatakbo, ngunit alam mo kung kailan ito titigil. Perpekto ito para sa mga bagay tulad ng paghingi ng input mula sa user hanggang sa maibigay nila ang tamang sagot, o paghahanap sa data hanggang sa makita mo ang hinahanap mo.
+Ang `while` loop ay parang sinasabi na "patuloy na gawin ito hanggang..." - maaaring hindi mo alam nang eksakto kung ilang beses itong tatakbo, pero alam mo kung kailan titigil. Perpekto ito para sa mga bagay tulad ng paghingi ng input mula sa user hanggang sa ibigay nila ang kailangan mo, o paghahanap sa data hanggang sa makita mo ang hinahanap mo.
 
 **Mga Katangian ng While Loop:**
-- **Nagpapatuloy** sa pagtakbo hangga't ang kondisyon ay totoo
-- **Nangangailangan** ng manual na pamamahala ng anumang counter variables
-- **Sinusuri** ang kondisyon bago ang bawat pag-ulit
-- **May panganib** ng infinite loops kung ang kondisyon ay hindi kailanman magiging mali
+- **Nagpapatuloy** sa pag-execute hangga't ang kondisyon ay totoo
+- **Nangangailangan** ng manu-manong pamamahala ng anumang counter variables
+- **Sinusuri** ang kondisyon bago ang bawat iteration
+- **May panganib** ng infinite loops kung ang kondisyon ay hindi kailanman magiging false
 
 ```javascript
 // Basic counting example
@@ -236,10 +417,44 @@ if (attempts >= maxAttempts) {
 ```
 
 **Pag-unawa sa mga halimbawa:**
-- **Pinamamahalaan** ang counter variable na `i` nang manu-mano sa loob ng loop body
-- **Ina-update** ang counter upang maiwasan ang infinite loops
-- **Nagpapakita** ng praktikal na paggamit sa input ng user at limitasyon ng pagtatangka
-- **May kasamang** mga mekanismo ng kaligtasan upang maiwasan ang walang katapusang pagtakbo
+- **Pinamamahalaan** ang counter variable `i` nang manu-mano sa loob ng loop body
+- **Ina-update** ang counter para maiwasan ang infinite loops
+- **Nagpapakita** ng praktikal na paggamit sa input ng user at limitasyon ng mga pagtatangka
+- **Kasama** ang mga safety mechanisms para maiwasan ang walang katapusang execution
+
+### ♾️ **Pag-check ng Karunungan sa While Loop: Pag-uulit Batay sa Kondisyon**
+
+**Subukan ang iyong kaalaman sa while loop:**
+- Ano ang pangunahing panganib kapag gumagamit ng while loops?
+- Kailan mo pipiliin ang while loop kaysa sa for loop?
+- Paano mo maiiwasan ang infinite loops?
+
+```mermaid
+flowchart LR
+    A["🔄 While vs For"] --> B["While Loop"]
+    A --> C["For Loop"]
+    
+    B --> B1["Unknown iterations"]
+    B --> B2["Condition-driven"]
+    B --> B3["User input, searching"]
+    B --> B4["⚠️ Risk: infinite loops"]
+    
+    C --> C1["Known iterations"]
+    C --> C2["Counter-driven"]
+    C --> C3["Array processing"]
+    C --> C4["✅ Safe: predictable end"]
+    
+    D["🛡️ Safety Tips"] --> D1["Always modify condition variable"]
+    D --> D2["Include escape conditions"]
+    D --> D3["Set maximum iteration limits"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+```
+
+> **Safety first**: Ang while loops ay makapangyarihan pero nangangailangan ng maingat na pamamahala ng kondisyon. Siguraduhin palagi na ang kondisyon ng iyong loop ay magiging false sa kalaunan!
 
 ### Mga Modernong Alternatibo sa Loop
 
@@ -262,11 +477,11 @@ for (let i = 0; i < colors.length; i++) {
 ```
 
 **Mga pangunahing bentahe ng for...of:**
-- **Inaalis** ang pamamahala ng index at mga posibleng error sa off-by-one
+- **Inaalis** ang pamamahala ng index at potensyal na mga error sa off-by-one
 - **Nagbibigay** ng direktang access sa mga elemento ng array
-- **Pinapabuti** ang nababasa ng code at binabawasan ang pagiging kumplikado ng syntax
+- **Pinapabuti** ang readability ng code at binabawasan ang syntax complexity
 
-**forEach Method:**
+**Pamamaraan ng forEach:**
 
 ```javascript
 const prices = [9.99, 15.50, 22.75, 8.25];
@@ -280,14 +495,40 @@ prices.forEach((price, index) => {
 prices.forEach(price => console.log(`Price: $${price}`));
 ```
 
-**Ano ang dapat mong malaman tungkol sa forEach:**
+**Mga dapat mong malaman tungkol sa forEach:**
 - **Isinasagawa** ang isang function para sa bawat elemento ng array
 - **Nagbibigay** ng parehong halaga ng elemento at index bilang mga parameter
-- **Hindi maaaring** itigil nang maaga (hindi tulad ng tradisyunal na loops)
-- **Ibinabalik** ang undefined (hindi gumagawa ng bagong array)
+- **Hindi** maaaring ihinto nang maaga (hindi tulad ng tradisyunal na loops)
+- **Nagbabalik** ng undefined (hindi gumagawa ng bagong array)
 
 ✅ Bakit mo pipiliin ang for loop kumpara sa while loop? 17K na mga manonood ang may parehong tanong sa StackOverflow, at ang ilan sa mga opinyon [maaaring maging kawili-wili sa iyo](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
 
+### 🎨 **Pag-check ng Modernong Syntax ng Loop: Pagtanggap sa ES6+**
+
+**Suriin ang iyong kaalaman sa modernong JavaScript:**
+- Ano ang mga bentahe ng `for...of` kumpara sa tradisyunal na for loops?
+- Kailan mo mas pipiliin ang tradisyunal na for loops?
+- Ano ang pagkakaiba ng `forEach` at `map`?
+
+```mermaid
+quadrantChart
+    title Loop Selection Guide
+    x-axis Traditional --> Modern
+    y-axis Simple --> Complex
+    quadrant-1 Modern Complex
+    quadrant-2 Traditional Complex
+    quadrant-3 Traditional Simple
+    quadrant-4 Modern Simple
+    
+    Traditional For: [0.2, 0.7]
+    While Loop: [0.3, 0.6]
+    For...of: [0.8, 0.3]
+    forEach: [0.9, 0.4]
+    Array Methods: [0.8, 0.8]
+```
+
+> **Modernong trend**: Ang syntax ng ES6+ tulad ng `for...of` at `forEach` ay nagiging mas pinapaboran para sa pag-ikot sa array dahil mas malinis ito at mas kaunti ang error!
+
 ## Loops at Arrays
 
 Ang pagsasama ng arrays sa loops ay lumilikha ng makapangyarihang kakayahan sa pagproseso ng data. Ang kombinasyong ito ay mahalaga sa maraming gawain sa programming, mula sa pagpapakita ng mga listahan hanggang sa pagkalkula ng mga istatistika.
@@ -308,13 +549,13 @@ for (const flavor of iceCreamFlavors) {
 }
 ```
 
-**Unawain natin ang bawat paraan:**
-- **Gumagamit** ng property ng haba ng array upang matukoy ang hangganan ng loop
+**Unawain ang bawat paraan:**
+- **Gumagamit** ng property ng haba ng array para matukoy ang hangganan ng loop
 - **Ina-access** ang mga elemento sa pamamagitan ng index sa tradisyunal na for loops
 - **Nagbibigay** ng direktang access sa mga elemento sa for...of loops
 - **Pinoproseso** ang bawat elemento ng array nang eksakto isang beses
 
-**Praktikal na Halimbawa ng Pagproseso ng Data:**
+**Halimbawa ng Praktikal na Pagproseso ng Data:**
 
 ```javascript
 const studentGrades = [85, 92, 78, 96, 88, 73, 89];
@@ -345,43 +586,174 @@ console.log(`Lowest: ${lowestGrade}`);
 **Narito kung paano gumagana ang code na ito:**
 - **Nagsisimula** ng mga tracking variables para sa kabuuan at extremes
 - **Pinoproseso** ang bawat grade gamit ang isang epektibong loop
-- **Nag-iipon** ng kabuuan para sa kalkulasyon ng average
-- **Nagtatala** ng pinakamataas at pinakamababang halaga sa panahon ng pag-ulit
-- **Kinakalkula** ang panghuling istatistika pagkatapos ng pag-ulit
+- **Nag-iipon** ng kabuuan para sa pagkalkula ng average
+- **Nagtatala** ng pinakamataas at pinakamababang halaga sa panahon ng iteration
+- **Kinakalkula** ang panghuling istatistika pagkatapos ng loop
 
 ✅ Subukan ang pag-loop sa isang array na ikaw mismo ang lumikha sa console ng iyong browser.
 
+```mermaid
+flowchart TD
+    A["📦 Array Data"] --> B["🔄 Loop Processing"]
+    B --> C["📈 Results"]
+    
+    A1["[85, 92, 78, 96, 88]"] --> A
+    
+    B --> B1["Calculate total"]
+    B --> B2["Find min/max"]
+    B --> B3["Count conditions"]
+    B --> B4["Transform data"]
+    
+    C --> C1["Average: 87.8"]
+    C --> C2["Highest: 96"]
+    C --> C3["Passing: 5/5"]
+    C --> C4["Letter grades"]
+    
+    D["⚡ Processing Patterns"] --> D1["Accumulation (sum)"]
+    D --> D2["Comparison (min/max)"]
+    D --> D3["Filtering (conditions)"]
+    D --> D4["Mapping (transformation)"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#f3e5f5
+```
+
 ---
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode para tapusin ang sumusunod na hamon:
 
-**Deskripsyon:** Gumawa ng komprehensibong function sa pagproseso ng data na pinagsasama ang arrays at loops upang suriin ang isang dataset at makabuo ng makabuluhang mga insight.
+**Deskripsyon:** Gumawa ng komprehensibong function sa pagproseso ng data na pinagsasama ang arrays at loops para suriin ang isang dataset at makabuo ng makabuluhang mga insight.
 
-**Prompt:** Gumawa ng function na tinatawag na `analyzeGrades` na tumatanggap ng isang array ng mga object ng grade ng estudyante (bawat isa ay naglalaman ng name at score properties) at nagbabalik ng isang object na may mga istatistika kabilang ang pinakamataas na score, pinakamababang score, average score, bilang ng mga estudyanteng pumasa (score >= 70), at isang array ng mga pangalan ng estudyante na nakakuha ng mas mataas sa average. Gumamit ng hindi bababa sa dalawang magkaibang uri ng loop sa iyong solusyon.
+**Prompt:** Gumawa ng function na tinatawag na `analyzeGrades` na tumatanggap ng array ng mga object ng grade ng estudyante (bawat isa ay naglalaman ng name at score properties) at nagbabalik ng object na may mga istatistika kabilang ang pinakamataas na score, pinakamababang score, average score, bilang ng mga estudyanteng pumasa (score >= 70), at isang array ng mga pangalan ng estudyante na nakakuha ng score na mas mataas sa average. Gumamit ng hindi bababa sa dalawang magkaibang uri ng loop sa iyong solusyon.
 
-Alamin ang higit pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Hamon
+Nag-aalok ang JavaScript ng ilang modernong pamamaraan para sa array na maaaring pumalit sa tradisyunal na mga loop para sa partikular na mga gawain. Tuklasin ang [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), at [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). 
 
-Nag-aalok ang JavaScript ng ilang modernong pamamaraan ng array na maaaring pumalit sa tradisyunal na loops para sa mga partikular na gawain. Tuklasin ang [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), at [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). 
-
-**Ang iyong hamon:** I-refactor ang halimbawa ng grades ng estudyante gamit ang hindi bababa sa tatlong magkaibang pamamaraan ng array. Pansinin kung gaano kalinis at mas nababasa ang code gamit ang modernong syntax ng JavaScript.
+**Ang iyong hamon:** I-refactor ang halimbawa ng mga grado ng estudyante gamit ang hindi bababa sa tatlong iba't ibang pamamaraan para sa array. Pansinin kung gaano kalinis at mas madaling basahin ang code gamit ang modernong syntax ng JavaScript.
 
 ## Post-Lecture Quiz
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/14)
 
 
-## Review at Sariling Pag-aaral
+## Review & Self Study
 
-Ang arrays sa JavaScript ay may maraming mga pamamaraan na nakakabit sa mga ito, na napaka-kapaki-pakinabang para sa manipulasyon ng data. [Basahin ang tungkol sa mga pamamaraang ito](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) at subukan ang ilan sa mga ito (tulad ng push, pop, slice, at splice) sa isang array na ikaw mismo ang lumikha.
+Ang mga array sa JavaScript ay may maraming mga pamamaraan na nakakabit sa kanila, na napaka-kapaki-pakinabang para sa pagmamanipula ng data. [Basahin ang tungkol sa mga pamamaraang ito](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) at subukan ang ilan sa mga ito (tulad ng push, pop, slice, at splice) sa isang array na iyong ginawa.
 
-## Takdang-Aralin
+## Assignment
 
 [Loop an Array](assignment.md)
 
 ---
 
+## 📊 **Buod ng Iyong Toolkit para sa Arrays at Loops**
+
+```mermaid
+graph TD
+    A["🎯 Arrays & Loops Mastery"] --> B["📦 Array Fundamentals"]
+    A --> C["🔄 Loop Types"]
+    A --> D["🔗 Data Processing"]
+    A --> E["🎨 Modern Techniques"]
+    
+    B --> B1["Creation: [ ]"]
+    B --> B2["Indexing: arr[0]"]
+    B --> B3["Methods: push, pop"]
+    B --> B4["Properties: length"]
+    
+    C --> C1["For: Known iterations"]
+    C --> C2["While: Condition-based"]
+    C --> C3["For...of: Direct access"]
+    C --> C4["forEach: Functional"]
+    
+    D --> D1["Statistics calculation"]
+    D --> D2["Data transformation"]
+    D --> D3["Filtering & searching"]
+    D --> D4["Real-time processing"]
+    
+    E --> E1["Arrow functions"]
+    E --> E2["Method chaining"]
+    E --> E3["Destructuring"]
+    E --> E4["Template literals"]
+    
+    F["💡 Key Benefits"] --> F1["Efficient data handling"]
+    F --> F2["Reduced code repetition"]
+    F --> F3["Scalable solutions"]
+    F --> F4["Cleaner syntax"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 Timeline ng Iyong Mastery sa Arrays at Loops
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Gumawa ng array ng iyong mga paboritong pelikula at i-access ang mga partikular na elemento
+- [ ] Sumulat ng isang for loop na nagbibilang mula 1 hanggang 10
+- [ ] Subukan ang hamon sa modernong pamamaraan ng array mula sa aralin
+- [ ] Magpraktis ng pag-index ng array sa console ng iyong browser
+
+### 🎯 **Ano ang Maaaring Makamit Mo sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at suriin ang anumang mahirap na konsepto
+- [ ] Bumuo ng komprehensibong grade analyzer mula sa hamon ng GitHub Copilot
+- [ ] Gumawa ng simpleng shopping cart na nagdadagdag at nag-aalis ng mga item
+- [ ] Magpraktis ng pag-convert sa pagitan ng iba't ibang uri ng loop
+- [ ] Mag-eksperimento sa mga pamamaraan ng array tulad ng `push`, `pop`, `slice`, at `splice`
+
+### 📅 **Ang Iyong Lingguhang Paglalakbay sa Pagproseso ng Data**
+- [ ] Kumpletuhin ang "Loop an Array" na assignment na may malikhaing mga pagpapahusay
+- [ ] Bumuo ng isang to-do list application gamit ang arrays at loops
+- [ ] Gumawa ng simpleng calculator ng istatistika para sa numerikal na data
+- [ ] Magpraktis gamit ang [MDN array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)
+- [ ] Bumuo ng photo gallery o music playlist interface
+- [ ] Tuklasin ang functional programming gamit ang `map`, `filter`, at `reduce`
+
+### 🌟 **Ang Iyong Buwanang Transformasyon**
+- [ ] Masterin ang advanced na mga operasyon sa array at pag-optimize ng performance
+- [ ] Bumuo ng kumpletong dashboard para sa data visualization
+- [ ] Mag-ambag sa mga open source na proyekto na may kaugnayan sa pagproseso ng data
+- [ ] Magturo sa iba tungkol sa arrays at loops gamit ang mga praktikal na halimbawa
+- [ ] Gumawa ng personal na library ng mga reusable na function para sa pagproseso ng data
+- [ ] Tuklasin ang mga algorithm at istruktura ng data na nakabatay sa arrays
+
+### 🏆 **Huling Check-in para sa Data Processing Champion**
+
+**I-celebrate ang iyong mastery sa arrays at loops:**
+- Ano ang pinaka-kapaki-pakinabang na operasyon sa array na natutunan mo para sa mga aplikasyon sa totoong mundo?
+- Aling uri ng loop ang pinaka-natural para sa iyo at bakit?
+- Paano binago ng pag-unawa sa arrays at loops ang iyong paraan ng pag-oorganisa ng data?
+- Anong masalimuot na gawain sa pagproseso ng data ang nais mong harapin sa susunod?
+
+```mermaid
+journey
+    title Your Data Processing Evolution
+    section Today
+      Array Confusion: 3: You
+      Loop Basics: 4: You
+      Index Understanding: 5: You
+    section This Week
+      Method Mastery: 4: You
+      Efficient Processing: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Complex Algorithms: 5: You
+      Performance Optimization: 5: You
+      Teaching Others: 5: You
+```
+
+> 📦 **Na-unlock mo na ang kapangyarihan ng organisasyon at pagproseso ng data!** Ang arrays at loops ang pundasyon ng halos bawat aplikasyon na iyong gagawin. Mula sa simpleng mga listahan hanggang sa masalimuot na pagsusuri ng data, mayroon ka nang mga kasangkapan upang hawakan ang impormasyon nang mahusay at elegante. Ang bawat dynamic na website, mobile app, at data-driven na aplikasyon ay umaasa sa mga pangunahing konseptong ito. Maligayang pagdating sa mundo ng scalable data processing! 🎉
+
+---
+
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/3-terrarium/1-intro-to-html/README.md b/translations/tl/3-terrarium/1-intro-to-html/README.md
index a09abea72c..c8fcb5c550 100644
--- a/translations/tl/3-terrarium/1-intro-to-html/README.md
+++ b/translations/tl/3-terrarium/1-intro-to-html/README.md
@@ -1,22 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "20c72cf2e5b0050d38ca3cb14a75a9df",
-  "translation_date": "2025-10-22T15:32:18+00:00",
+  "original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
+  "translation_date": "2025-11-03T13:57:13+00:00",
   "source_file": "3-terrarium/1-intro-to-html/README.md",
   "language_code": "tl"
 }
 -->
 # Proyekto ng Terrarium Bahagi 1: Panimula sa HTML
 
+```mermaid
+journey
+    title Your HTML Learning Journey
+    section Foundation
+      Create HTML file: 3: Student
+      Add DOCTYPE: 4: Student
+      Structure document: 5: Student
+    section Content
+      Add metadata: 4: Student
+      Include images: 5: Student
+      Organize layout: 5: Student
+    section Semantics
+      Use proper tags: 4: Student
+      Enhance accessibility: 5: Student
+      Build terrarium: 5: Student
+```
+
 ![Panimula sa HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.tl.png)
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
-Ang HTML, o HyperText Markup Language, ang pundasyon ng bawat website na iyong binisita. Isipin ang HTML bilang kalansay na nagbibigay ng istruktura sa mga web page – ito ang nagtatakda kung saan ilalagay ang nilalaman, paano ito iaayos, at ano ang kinakatawan ng bawat bahagi. Habang ang CSS ang "magbibihis" sa iyong HTML gamit ang mga kulay at layout, at ang JavaScript ang magbibigay ng interaktibidad, ang HTML ang nagbibigay ng mahalagang istruktura na nagpapahintulot sa lahat ng iba pang bagay na mangyari.
-
-Sa araling ito, gagawa ka ng istruktura ng HTML para sa isang virtual na interface ng terrarium. Ang proyektong ito ay magtuturo sa iyo ng mga pangunahing konsepto ng HTML habang gumagawa ng isang bagay na kaakit-akit sa paningin. Matututuhan mo kung paano ayusin ang nilalaman gamit ang mga semantic na elemento, magtrabaho gamit ang mga imahe, at lumikha ng pundasyon para sa isang interaktibong web application.
-
-Sa pagtatapos ng araling ito, magkakaroon ka ng gumaganang HTML page na nagpapakita ng mga imahe ng halaman sa maayos na mga kolum, handa na para sa pag-istilo sa susunod na aralin. Huwag mag-alala kung mukhang basic ito sa simula – ganyan talaga ang HTML bago magdagdag ng visual polish ang CSS.
+Ang HTML, o HyperText Markup Language, ang pundasyon ng bawat website na iyong binisita. Isipin ang HTML bilang balangkas na nagbibigay ng istruktura sa mga web page – ito ang nagtatakda kung saan ilalagay ang nilalaman, paano ito iaayos, at ano ang kinakatawan ng bawat bahagi. Habang ang CSS ang magpapaganda sa iyong HTML gamit ang mga kulay at layout, at ang JavaScript ang magdadagdag ng interaktibidad, ang HTML ang nagbibigay ng mahalagang istruktura na nagpapahintulot sa lahat ng iba pang aspeto na maging posible.
+
+Sa araling ito, gagawa ka ng istruktura ng HTML para sa isang virtual na interface ng terrarium. Ang proyektong ito ay magtuturo sa iyo ng mga pangunahing konsepto ng HTML habang gumagawa ng isang bagay na kaakit-akit sa paningin. Matututuhan mo kung paano ayusin ang nilalaman gamit ang mga semantic na elemento, magtrabaho gamit ang mga imahe, at gumawa ng pundasyon para sa isang interaktibong web application.
+
+Sa pagtatapos ng araling ito, magkakaroon ka ng gumaganang HTML page na nagpapakita ng mga imahe ng halaman sa maayos na mga kolum, handa na para sa pag-istilo sa susunod na aralin. Huwag mag-alala kung mukhang simple ito sa simula – ganito talaga ang HTML bago magdagdag ng visual na polish ang CSS.
+
+```mermaid
+mindmap
+  root((HTML Fundamentals))
+    Structure
+      DOCTYPE Declaration
+      HTML Element
+      Head Section
+      Body Content
+    Elements
+      Tags & Attributes
+      Self-closing Tags
+      Nested Elements
+      Block vs Inline
+    Content
+      Text Elements
+      Images
+      Containers (div)
+      Lists
+    Semantics
+      Meaningful Tags
+      Accessibility
+      Screen Readers
+      SEO Benefits
+    Best Practices
+      Proper Nesting
+      Valid Markup
+      Descriptive Alt Text
+      Organized Structure
+```
 
 ## Pre-Lecture Quiz
 
@@ -51,9 +98,9 @@ touch index.html
 code index.html
 ```
 
-**Narito ang nagagawa ng mga command na ito:**
+**Narito ang ginagawa ng mga command na ito:**
 - **Gumagawa** ng bagong direktoryo na tinatawag na `terrarium` para sa iyong proyekto
-- **Nagna-navigate** sa loob ng direktoryo ng terrarium
+- **Nag-navigate** sa terrarium directory 
 - **Gumagawa** ng walang laman na `index.html` file
 - **Binubuksan** ang file sa Visual Studio Code para sa pag-edit
 
@@ -61,7 +108,25 @@ code index.html
 
 ## Pag-unawa sa Istruktura ng HTML Document
 
-Ang bawat HTML document ay sumusunod sa isang partikular na istruktura na kailangan ng mga browser upang maunawaan at maipakita nang tama. Isipin ang istruktura na ito tulad ng isang pormal na liham – mayroon itong mga kinakailangang elemento sa tamang pagkakasunod-sunod na tumutulong sa tatanggap (sa kasong ito, ang browser) na iproseso nang maayos ang nilalaman.
+Ang bawat HTML document ay sumusunod sa isang partikular na istruktura na kailangan ng mga browser upang maunawaan at maipakita nang tama. Isipin ang istruktura na ito tulad ng isang pormal na liham – mayroon itong mga kinakailangang elemento sa partikular na pagkakasunod-sunod na tumutulong sa tatanggap (sa kasong ito, ang browser) na iproseso ang nilalaman nang maayos.
+
+```mermaid
+flowchart TD
+    A["<!DOCTYPE html>"] --> B["<html>"]
+    B --> C["<head>"]
+    C --> D["<title>"]
+    C --> E["<meta charset>"]
+    C --> F["<meta viewport>"]
+    B --> G["<body>"]
+    G --> H["<h1> Heading"]
+    G --> I["<div> Containers"]
+    G --> J["<img> Images"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style C fill:#fff3e0
+    style G fill:#e8f5e8
+```
 
 Simulan natin sa pagdaragdag ng mahalagang pundasyon na kailangan ng bawat HTML document.
 
@@ -82,13 +147,21 @@ Ang unang dalawang linya ng anumang HTML file ay nagsisilbing "panimula" ng doku
 
 > 💡 **VS Code Tip**: I-hover ang anumang HTML tag sa VS Code upang makita ang kapaki-pakinabang na impormasyon mula sa MDN Web Docs, kabilang ang mga halimbawa ng paggamit at detalye ng compatibility ng browser.
 
-> 📚 **Matuto Pa**: Ang DOCTYPE declaration ay pumipigil sa mga browser na pumasok sa "quirks mode," na ginamit upang suportahan ang napakalumang mga website. Ang modernong web development ay gumagamit ng simpleng `<!DOCTYPE html>` declaration upang matiyak ang [standards-compliant rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
+> 📚 **Matuto Pa**: Ang DOCTYPE declaration ay pumipigil sa mga browser na pumasok sa "quirks mode," na ginamit upang suportahan ang mga lumang website. Ang modernong web development ay gumagamit ng simpleng `<!DOCTYPE html>` declaration upang matiyak ang [standards-compliant rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
+
+### 🔄 **Pedagogical Check-in**
+**Huminto at Magnilay**: Bago magpatuloy, tiyakin na nauunawaan mo:
+- ✅ Bakit kailangan ng bawat HTML document ng DOCTYPE declaration
+- ✅ Ano ang nilalaman ng `<html>` root element
+- ✅ Paano nakakatulong ang istrukturang ito sa tamang pag-render ng mga browser
+
+**Mabilis na Pagsusuri**: Kaya mo bang ipaliwanag sa sarili mong mga salita kung ano ang ibig sabihin ng "standards-compliant rendering"?
 
 ## Pagdaragdag ng Mahalagang Metadata ng Dokumento
 
 Ang `<head>` na seksyon ng isang HTML document ay naglalaman ng mahalagang impormasyon na kailangan ng mga browser at search engine, ngunit hindi direktang nakikita ng mga bisita sa page. Isipin ito bilang "behind-the-scenes" na impormasyon na tumutulong sa iyong webpage na gumana nang maayos at lumitaw nang tama sa iba't ibang device at platform.
 
-Ang metadata na ito ay nagsasabi sa mga browser kung paano ipapakita ang iyong page, anong character encoding ang gagamitin, at kung paano hahawakan ang iba't ibang laki ng screen – lahat ng ito ay mahalaga para sa paggawa ng propesyonal, accessible na mga web page.
+Ang metadata na ito ay nagsasabi sa mga browser kung paano ipapakita ang iyong page, anong character encoding ang gagamitin, at kung paano haharapin ang iba't ibang laki ng screen – lahat ng ito ay mahalaga para sa paggawa ng propesyonal at accessible na mga web page.
 
 ### Gawain: Idagdag ang Document Head
 
@@ -103,8 +176,8 @@ Ipasok ang `<head>` na seksyon sa pagitan ng iyong pagbubukas at pagsasara ng `<
 </head>
 ```
 
-**Pagbubuo ng ginagawa ng bawat elemento:**
-- **Itinatakda** ang pamagat ng page na lumilitaw sa mga tab ng browser at resulta ng paghahanap
+**Pag-unawa sa ginagawa ng bawat elemento:**
+- **Itinatakda** ang pamagat ng page na lumalabas sa mga tab ng browser at resulta ng paghahanap
 - **Tinutukoy** ang UTF-8 character encoding para sa tamang pagpapakita ng teksto sa buong mundo
 - **Tinitiyak** ang compatibility sa mga modernong bersyon ng Internet Explorer
 - **Kinokontrol** ang disenyo ng responsive sa pamamagitan ng pagtatakda ng viewport na tumutugma sa lapad ng device
@@ -112,19 +185,19 @@ Ipasok ang `<head>` na seksyon sa pagitan ng iyong pagbubukas at pagsasara ng `<
 
 > 🤔 **Pag-isipan Ito**: Ano ang mangyayari kung magtakda ka ng viewport meta tag tulad nito: `<meta name="viewport" content="width=600">`? Pipilitin nitong palaging maging 600 pixels ang lapad ng page, na sisira sa disenyo ng responsive! Matuto pa tungkol sa [tamang configuration ng viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
 
-## Pagbuo ng Katawan ng Dokumento
+## Pagbuo ng Document Body
 
-Ang `<body>` na elemento ay naglalaman ng lahat ng nakikitang nilalaman ng iyong webpage – lahat ng makikita at makikipag-ugnayan ang mga user. Habang ang `<head>` na seksyon ay nagbibigay ng mga tagubilin sa browser, ang `<body>` na seksyon ay naglalaman ng aktwal na nilalaman: teksto, mga imahe, mga button, at iba pang elemento na bumubuo sa iyong user interface.
+Ang `<body>` element ay naglalaman ng lahat ng nakikitang nilalaman ng iyong webpage – lahat ng makikita at makikipag-ugnayan ang mga user. Habang ang `<head>` na seksyon ay nagbibigay ng mga tagubilin sa browser, ang `<body>` na seksyon ay naglalaman ng aktwal na nilalaman: teksto, mga imahe, mga button, at iba pang elemento na bumubuo sa iyong user interface.
 
-Magdagdag tayo ng istruktura ng katawan at unawain kung paano nagtutulungan ang mga HTML tag upang lumikha ng makabuluhang nilalaman.
+Simulan natin ang pagdaragdag ng istruktura ng body at unawain kung paano nagtutulungan ang mga HTML tag upang lumikha ng makabuluhang nilalaman.
 
 ### Pag-unawa sa Istruktura ng HTML Tag
 
-Gumagamit ang HTML ng mga paired tag upang tukuyin ang mga elemento. Karamihan sa mga tag ay may opening tag tulad ng `<p>` at closing tag tulad ng `</p>`, na may nilalaman sa pagitan: `<p>Hello, world!</p>`. Lumilikha ito ng paragraph element na naglalaman ng teksto na "Hello, world!".
+Ang HTML ay gumagamit ng mga paired tags upang tukuyin ang mga elemento. Karamihan sa mga tag ay may opening tag tulad ng `<p>` at closing tag tulad ng `</p>`, na may nilalaman sa pagitan: `<p>Hello, world!</p>`. Ito ay lumilikha ng isang paragraph element na naglalaman ng teksto na "Hello, world!".
 
 ### Gawain: Idagdag ang Body Element
 
-I-update ang iyong HTML file upang isama ang `<body>` na elemento:
+I-update ang iyong HTML file upang isama ang `<body>` element:
 
 ```html
 <!DOCTYPE html>
@@ -139,28 +212,28 @@ I-update ang iyong HTML file upang isama ang `<body>` na elemento:
 </html>
 ```
 
-**Narito ang ibinibigay ng kumpletong istruktura na ito:**
-- **Itinatakda** ang pangunahing framework ng HTML5 document
+**Narito ang ibinibigay ng kumpletong istrukturang ito:**
+- **Itinatakda** ang pangunahing HTML5 document framework
 - **Kasama** ang mahalagang metadata para sa tamang pag-render ng browser
-- **Gumagawa** ng walang laman na katawan na handa para sa iyong nakikitang nilalaman
-- **Sumusunod** sa mga modernong best practices ng web development
+- **Gumagawa** ng walang laman na body na handa para sa iyong nakikitang nilalaman
+- **Sumusunod** sa modernong web development best practices
 
-Ngayon handa ka nang magdagdag ng mga nakikitang elemento ng iyong terrarium. Gagamit tayo ng `<div>` na mga elemento bilang mga lalagyan upang ayusin ang iba't ibang seksyon ng nilalaman, at `<img>` na mga elemento upang ipakita ang mga imahe ng halaman.
+Ngayon handa ka nang magdagdag ng mga nakikitang elemento ng iyong terrarium. Gagamit tayo ng mga `<div>` na elemento bilang mga lalagyan upang ayusin ang iba't ibang seksyon ng nilalaman, at mga `<img>` na elemento upang ipakita ang mga imahe ng halaman.
 
 ### Paggamit ng Mga Imahe at Layout Containers
 
-Ang mga imahe ay espesyal sa HTML dahil gumagamit sila ng "self-closing" na mga tag. Hindi tulad ng mga elemento tulad ng `<p></p>` na bumabalot sa nilalaman, ang `<img>` na tag ay naglalaman ng lahat ng impormasyong kailangan nito sa loob ng tag mismo gamit ang mga attributes tulad ng `src` para sa file path ng imahe at `alt` para sa accessibility.
+Ang mga imahe ay espesyal sa HTML dahil gumagamit sila ng "self-closing" na mga tag. Hindi tulad ng mga elemento tulad ng `<p></p>` na bumabalot sa nilalaman, ang `<img>` tag ay naglalaman ng lahat ng impormasyong kailangan nito sa loob ng tag mismo gamit ang mga attributes tulad ng `src` para sa file path ng imahe at `alt` para sa accessibility.
 
-Bago magdagdag ng mga imahe sa iyong HTML, kailangan mong ayusin ang iyong mga file ng proyekto nang maayos sa pamamagitan ng paggawa ng folder ng mga imahe at pagdaragdag ng mga graphics ng halaman.
+Bago magdagdag ng mga imahe sa iyong HTML, kailangan mong ayusin nang maayos ang iyong mga file ng proyekto sa pamamagitan ng paggawa ng folder ng mga imahe at pagdaragdag ng mga graphics ng halaman.
 
 **Una, i-set up ang iyong mga imahe:**
 1. Gumawa ng folder na tinatawag na `images` sa loob ng iyong terrarium project folder
 2. I-download ang mga imahe ng halaman mula sa [solution folder](../../../../3-terrarium/solution/images) (14 na imahe ng halaman lahat)
-3. Kopyahin ang lahat ng imahe ng halaman sa iyong bagong `images` folder
+3. Kopyahin ang lahat ng mga imahe ng halaman sa iyong bagong `images` folder
 
 ### Gawain: Gumawa ng Layout ng Display ng Halaman
 
-Ngayon idagdag ang mga imahe ng halaman na nakaayos sa dalawang kolum sa pagitan ng iyong `<body></body>` tags:
+Ngayon, idagdag ang mga imahe ng halaman na nakaayos sa dalawang kolum sa pagitan ng iyong `<body></body>` tags:
 
 ```html
 <div id="page">
@@ -218,36 +291,80 @@ Ngayon idagdag ang mga imahe ng halaman na nakaayos sa dalawang kolum sa pagitan
 - **Nagtatakda** ng dalawang lalagyan ng kolum: `left-container` at `right-container`
 - **Inaayos** ang 7 halaman sa kaliwang kolum at 7 halaman sa kanang kolum
 - **Binabalot** ang bawat imahe ng halaman sa isang `plant-holder` div para sa indibidwal na pagpoposisyon
-- **Nag-aaplay** ng pare-parehong class names para sa pag-istilo ng CSS sa susunod na aralin
-- **Nag-aassign** ng mga unique na ID sa bawat imahe ng halaman para sa interaksyon ng JavaScript sa hinaharap
-- **Kasama** ang tamang file paths na tumuturo sa folder ng mga imahe
+- **Nag-aaplay** ng pare-parehong class names para sa CSS styling sa susunod na aralin
+- **Nag-aassign** ng unique IDs sa bawat imahe ng halaman para sa interaksyon ng JavaScript sa hinaharap
+- **Kasama** ang tamang file paths na tumuturo sa images folder
+
+> 🤔 **Pag-isipan Ito**: Pansinin na ang lahat ng mga imahe ay kasalukuyang may parehong alt text na "plant". Hindi ito ideal para sa accessibility. Ang mga gumagamit ng screen reader ay maririnig ang "plant" na inuulit ng 14 na beses nang hindi nalalaman kung aling partikular na halaman ang ipinapakita ng bawat imahe. Maiisip mo ba ang mas mahusay, mas detalyadong alt text para sa bawat imahe?
+
+> 📝 **Mga Uri ng HTML Element**: Ang `<div>` na mga elemento ay "block-level" at kumukuha ng buong lapad, habang ang `<span>` na mga elemento ay "inline" at kumukuha lamang ng kinakailangang lapad. Ano sa tingin mo ang mangyayari kung papalitan mo ang lahat ng mga `<div>` tags ng `<span>` tags?
 
-> 🤔 **Pag-isipan Ito**: Pansinin na lahat ng imahe ay may parehong alt text na "plant" sa kasalukuyan. Hindi ito ideal para sa accessibility. Ang mga gumagamit ng screen reader ay maririnig ang "plant" na inuulit ng 14 na beses nang hindi nalalaman kung aling partikular na halaman ang ipinapakita ng bawat imahe. Makakaisip ka ba ng mas maganda, mas deskriptibong alt text para sa bawat imahe?
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Istruktura**: Maglaan ng sandali upang suriin ang iyong istruktura ng HTML:
+- ✅ Kaya mo bang tukuyin ang mga pangunahing lalagyan sa iyong layout?
+- ✅ Nauunawaan mo ba kung bakit ang bawat imahe ay may unique ID?
+- ✅ Paano mo ilalarawan ang layunin ng mga `plant-holder` divs?
 
-> 📝 **Mga Uri ng HTML Element**: Ang `<div>` na mga elemento ay "block-level" at kumukuha ng buong lapad, habang ang `<span>` na mga elemento ay "inline" at kumukuha lamang ng kinakailangang lapad. Ano sa tingin mo ang mangyayari kung papalitan mo ang lahat ng `<div>` tags ng `<span>` tags?
+**Visual na Inspeksyon**: Buksan ang iyong HTML file sa browser. Dapat mong makita:
+- Isang simpleng listahan ng mga imahe ng halaman
+- Mga imahe na nakaayos sa dalawang kolum
+- Simpleng layout na walang istilo
 
-Sa pagdaragdag ng markup na ito, ang mga halaman ay lilitaw sa screen, bagaman hindi pa ito mukhang polished – iyon ang layunin ng CSS sa susunod na aralin! Sa ngayon, mayroon kang solidong pundasyon ng HTML na maayos na nag-aayos ng iyong nilalaman at sumusunod sa mga best practices ng accessibility.
+**Tandaan**: Ang simpleng hitsura na ito ay eksaktong kung ano ang dapat na hitsura ng HTML bago ang pag-istilo ng CSS!
+
+Sa markup na ito, lilitaw na ang mga halaman sa screen, kahit na hindi pa ito mukhang maganda – para diyan ang CSS sa susunod na aralin! Sa ngayon, mayroon kang solidong pundasyon ng HTML na maayos na nag-aayos ng iyong nilalaman at sumusunod sa mga best practices ng accessibility.
 
 ## Paggamit ng Semantic HTML para sa Accessibility
 
-Ang Semantic HTML ay nangangahulugang pagpili ng mga HTML na elemento batay sa kanilang kahulugan at layunin, hindi lamang sa kanilang hitsura. Kapag gumamit ka ng semantic markup, ipinapahayag mo ang istruktura at kahulugan ng iyong nilalaman sa mga browser, search engine, at assistive technologies tulad ng screen readers.
+Ang Semantic HTML ay nangangahulugan ng pagpili ng mga HTML elemento batay sa kanilang kahulugan at layunin, hindi lamang sa kanilang hitsura. Kapag gumamit ka ng semantic markup, ipinapahayag mo ang istruktura at kahulugan ng iyong nilalaman sa mga browser, search engines, at mga assistive technologies tulad ng screen readers.
+
+```mermaid
+flowchart TD
+    A[Need to add content?] --> B{What type?}
+    B -->|Main heading| C["<h1>"]
+    B -->|Subheading| D["<h2>, <h3>, etc."]
+    B -->|Paragraph| E["<p>"]
+    B -->|List| F["<ul>, <ol>"]
+    B -->|Navigation| G["<nav>"]
+    B -->|Article| H["<article>"]
+    B -->|Section| I["<section>"]
+    B -->|Generic container| J["<div>"]
+    
+    C --> K[Screen readers announce as main title]
+    D --> L[Creates proper heading hierarchy]
+    E --> M[Provides proper text spacing]
+    F --> N[Enables list navigation shortcuts]
+    G --> O[Identifies navigation landmarks]
+    H --> P[Marks standalone content]
+    I --> Q[Groups related content]
+    J --> R[Use only when no semantic tag fits]
+    
+    style C fill:#4caf50
+    style D fill:#4caf50
+    style E fill:#4caf50
+    style F fill:#4caf50
+    style G fill:#2196f3
+    style H fill:#2196f3
+    style I fill:#2196f3
+    style J fill:#ff9800
+```
 
-Ang approach na ito ay nagpapaganda ng accessibility ng iyong mga website para sa mga gumagamit na may kapansanan at tumutulong sa mga search engine na mas maunawaan ang iyong nilalaman. Isa itong pangunahing prinsipyo ng modernong web development na lumilikha ng mas magagandang karanasan para sa lahat.
+Ang ganitong paraan ay ginagawang mas accessible ang iyong mga website sa mga gumagamit na may kapansanan at tumutulong sa mga search engine na mas maunawaan ang iyong nilalaman. Isa itong mahalagang prinsipyo ng modernong web development na lumilikha ng mas magagandang karanasan para sa lahat.
 
 ### Pagdaragdag ng Semantic Page Title
 
-Magdagdag tayo ng tamang heading sa iyong terrarium page. Ipasok ang linyang ito pagkatapos ng iyong pagbubukas na `<body>` tag:
+Idagdag natin ang tamang heading sa iyong terrarium page. Ipasok ang linyang ito pagkatapos ng iyong pagbubukas na `<body>` tag:
 
 ```html
 <h1>My Terrarium</h1>
 ```
 
 **Bakit mahalaga ang semantic markup:**
-- **Tumutulong** sa mga screen reader na mag-navigate at maunawaan ang istruktura ng page
+- **Tumutulong** sa mga screen readers na mag-navigate at maunawaan ang istruktura ng page
 - **Pinapabuti** ang search engine optimization (SEO) sa pamamagitan ng pagpapaliwanag ng hierarchy ng nilalaman
-- **Pinapalakas** ang accessibility para sa mga gumagamit na may kapansanan sa paningin o cognitive differences
+- **Pinapalakas** ang accessibility para sa mga gumagamit na may kapansanan sa paningin o pagkakaiba sa kognitibo
 - **Lumilikha** ng mas magagandang karanasan ng user sa lahat ng device at platform
-- **Sumusunod** sa mga web standards at best practices para sa propesyonal na development
+- **Sumusunod** sa web standards at best practices para sa propesyonal na development
 
 **Mga Halimbawa ng semantic vs. non-semantic na mga pagpipilian:**
 
@@ -258,13 +375,13 @@ Magdagdag tayo ng tamang heading sa iyong terrarium page. Ipasok ang linyang ito
 | Button | `<button>Click me</button>` | `<span onclick="...">Click me</span>` |
 | Nilalaman ng artikulo | `<article><p></p></article>` | `<div class="content"><div></div></div>` |
 
-> 🎥 **Panoorin Ito**: Panoorin [kung paano nakikipag-ugnayan ang mga screen reader sa mga web page](https://www.youtube.com/watch?v=OUDV1gqs9GA) upang maunawaan kung bakit mahalaga ang semantic markup. Pansinin kung paano nakakatulong ang tamang istruktura ng HTML sa mga user na mag-navigate nang mahusay.
+> 🎥 **Panoorin Ito**: Panoorin [kung paano nakikipag-ugnayan ang mga screen readers sa mga web page](https://www.youtube.com/watch?v=OUDV1gqs9GA) upang maunawaan kung bakit mahalaga ang semantic markup. Pansinin kung paano nakakatulong ang tamang istruktura ng HTML sa mga gumagamit na mag-navigate nang mahusay.
 
 ## Paglikha ng Terrarium Container
 
-Ngayon magdagdag tayo ng istruktura ng HTML para sa terrarium mismo – ang glass container kung saan ilalagay ang mga halaman. Ang seksyong ito ay nagpapakita ng mahalagang konsepto: Ang HTML ay nagbibigay ng istruktura, ngunit kung walang CSS styling, ang mga elementong ito ay hindi pa makikita.
+Ngayon, idagdag natin ang istruktura ng HTML para sa terrarium mismo – ang glass container kung saan ilalagay ang mga halaman sa huli. Ipinapakita ng seksyong ito ang isang mahalagang konsepto: ang HTML ay nagbibigay ng istruktura, ngunit kung walang CSS styling, ang mga elementong ito ay hindi pa makikita.
 
-Ang markup ng terrarium ay gumagamit ng mga deskriptibong class names na gagawing intuitive at madaling mapanatili ang CSS styling sa susunod na aralin.
+Ang markup ng terrarium ay gumagamit ng mga deskriptibong class names na magpapadali sa CSS styling sa susunod na aralin.
 
 ### Gawain: Idagdag ang Istruktura ng Terrarium
 
@@ -283,13 +400,41 @@ Ipasok ang markup na ito sa itaas ng huling `</div>` tag (bago ang closing tag n
 ```
 
 **Pag-unawa sa istruktura ng terrarium na ito:**
-- **Gumagawa** ng pangunahing terrarium container na may unique na ID para sa pag-istilo
-- **Tinutukoy** ang magkakahiwalay na elemento para sa bawat visual na bahagi (top, walls, dirt, bottom)
-- **Kasama** ang nested na mga elemento para sa glass reflection effects (glossy elements)
-- **Gumagamit** ng deskriptibong class names na malinaw na nagpapahiwatig ng layunin ng bawat elemento
-- **Inihahanda** ang istruktura para sa CSS styling na lilikha ng glass terrarium appearance
+- **Gumagawa** ng pangunahing terrarium container na may unique ID para sa styling
+- **Nagde-define** ng magkakahiwalay na elemento para sa bawat visual na bahagi (itaas, dingding, lupa, ilalim)
+- **Naglalaman** ng mga nested na elemento para sa mga epekto ng salamin (mga glossy na elemento)
+- **Gumagamit** ng mga deskriptibong pangalan ng klase na malinaw na nagpapahiwatig ng layunin ng bawat elemento
+- **Inihahanda** ang istruktura para sa CSS styling na lilikha ng hitsura ng glass terrarium
+
+> 🤔 **Napansin Mo Ba?**: Kahit na idinagdag mo ang markup na ito, wala kang nakikitang bago sa pahina! Ito ay perpektong nagpapakita kung paano nagbibigay ang HTML ng istruktura habang ang CSS ang nagbibigay ng hitsura. Ang mga `<div>` na elemento ay naroroon ngunit wala pang visual na styling – darating ito sa susunod na aralin!
+
+```mermaid
+flowchart TD
+    A[HTML Document] --> B[Document Head]
+    A --> C[Document Body]
+    B --> D[Title Element]
+    B --> E[Meta Charset]
+    B --> F[Meta Viewport]
+    C --> G[Main Heading]
+    C --> H[Page Container]
+    H --> I[Left Container with 7 plants]
+    H --> J[Right Container with 7 plants]
+    H --> K[Terrarium Structure]
+    
+    style A fill:#e1f5fe
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style H fill:#f3e5f5
+```
 
-> 🤔 **Pansinin Ito**: Kahit na idinagdag mo ang markup na ito, wala kang makikitang bago sa page! Ito ay perpektong nagpapakita kung paano nagbibigay ng istruktura ang HTML habang ang CSS ang nagbibigay ng hitsura. Ang mga `<div>` na elemento ay umiiral ngunit wala pang visual styling – darating iyon sa susunod na aralin!
+### 🔄 **Pedagogical Check-in**
+**Pag-master ng Istruktura ng HTML**: Bago magpatuloy, tiyaking kaya mong:
+- ✅ Ipaliwanag ang pagkakaiba ng istruktura ng HTML at visual na hitsura
+- ✅ Tukuyin ang semantic vs. non-semantic na mga elemento ng HTML
+- ✅ Ilarawan kung paano nakakatulong ang tamang markup sa accessibility
+- ✅ Kilalanin ang kumpletong istruktura ng document tree
+
+**Pagsubok sa Iyong Pag-unawa**: Subukang buksan ang iyong HTML file sa browser na naka-disable ang JavaScript at tinanggal ang CSS. Ipinapakita nito ang purong semantic na istruktura na iyong ginawa!
 
 ---
 
@@ -297,69 +442,157 @@ Ipasok ang markup na ito sa itaas ng huling `</div>` tag (bago ang closing tag n
 
 Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
 
-**Deskripsyon:** Gumawa ng semantic HTML na istruktura para sa isang seksyon ng plant care guide na maaaring idagdag sa proyekto ng terrarium.
-**Prompt:** Gumawa ng semantic HTML section na may pangunahing pamagat na "Plant Care Guide", tatlong subseksyon na may mga pamagat na "Watering", "Light Requirements", at "Soil Care", bawat isa ay naglalaman ng talata ng impormasyon tungkol sa pag-aalaga ng halaman. Gumamit ng tamang semantic HTML tags tulad ng `<section>`, `<h2>`, `<h3>`, at `<p>` upang maayos na maistruktura ang nilalaman.
+**Deskripsyon:** Gumawa ng semantic na istruktura ng HTML para sa isang seksyon ng gabay sa pangangalaga ng halaman na maaaring idagdag sa proyekto ng terrarium.
+
+**Prompt:** Gumawa ng semantic na seksyon ng HTML na naglalaman ng pangunahing heading na "Plant Care Guide", tatlong subseksyon na may mga heading na "Watering", "Light Requirements", at "Soil Care", bawat isa ay naglalaman ng talata ng impormasyon sa pangangalaga ng halaman. Gumamit ng tamang semantic na mga tag ng HTML tulad ng `<section>`, `<h2>`, `<h3>`, at `<p>` upang maayos na maistruktura ang nilalaman.
 
-Alamin pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
-## Tuklasin ang Hamon sa Kasaysayan ng HTML
+## Hamon sa Pag-explore ng Kasaysayan ng HTML
 
 **Pag-aaral Tungkol sa Ebolusyon ng Web**
 
-Ang HTML ay malaki ang ipinagbago mula nang likhain ni Tim Berners-Lee ang unang web browser sa CERN noong 1990. Ang ilang mas lumang mga tag tulad ng `<marquee>` ay hindi na ginagamit dahil hindi ito angkop sa mga modernong pamantayan ng accessibility at prinsipyo ng responsive design.
+Ang HTML ay malaki ang ipinagbago mula nang likhain ni Tim Berners-Lee ang unang web browser sa CERN noong 1990. Ang ilang mas lumang mga tag tulad ng `<marquee>` ay ngayon ay deprecated dahil hindi ito angkop sa modernong accessibility standards at responsive design principles.
 
 **Subukan ang Eksperimentong Ito:**
-1. Pansamantalang balutin ang iyong pamagat na `<h1>` sa isang `<marquee>` tag: `<marquee><h1>My Terrarium</h1></marquee>`
+1. Pansamantalang balutin ang iyong `<h1>` na pamagat sa isang `<marquee>` na tag: `<marquee><h1>My Terrarium</h1></marquee>`
 2. Buksan ang iyong pahina sa browser at obserbahan ang scrolling effect
-3. Isipin kung bakit hindi na ginagamit ang tag na ito (hint: isipin ang karanasan ng user at accessibility)
-4. Alisin ang `<marquee>` tag at bumalik sa semantic markup
+3. Isipin kung bakit ang tag na ito ay na-deprecate (hint: isipin ang karanasan ng user at accessibility)
+4. Alisin ang `<marquee>` na tag at bumalik sa semantic markup
 
 **Mga Tanong sa Pagmumuni-muni:**
-- Paano maaaring makaapekto ang isang scrolling na pamagat sa mga user na may kapansanan sa paningin o sensitivity sa galaw?
-- Anong modernong mga teknik sa CSS ang maaaring makamit ang katulad na visual effects nang mas accessible?
-- Bakit mahalaga ang paggamit ng kasalukuyang pamantayan sa web sa halip na mga hindi na ginagamit na elemento?
+- Paano maaaring makaapekto ang isang scrolling na pamagat sa mga user na may kapansanan sa paningin o sensitivity sa paggalaw?
+- Anong modernong mga teknik sa CSS ang maaaring makamit ang katulad na visual na epekto nang mas accessible?
+- Bakit mahalaga ang paggamit ng kasalukuyang web standards sa halip na mga deprecated na elemento?
 
-Tuklasin pa ang tungkol sa [mga lipas at hindi na ginagamit na HTML elements](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) upang maunawaan kung paano umuunlad ang mga pamantayan sa web para mapabuti ang karanasan ng user.
+Mag-explore pa tungkol sa [obsolete at deprecated HTML elements](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) upang maunawaan kung paano umuunlad ang web standards para mapabuti ang karanasan ng user.
 
+## Post-Lecture Quiz
 
-## Quiz Pagkatapos ng Leksyon
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/16)
 
-[Quiz pagkatapos ng leksyon](https://ff-quizzes.netlify.app/web/quiz/16)
-
-## Review at Pag-aaral sa Sarili
+## Review & Self Study
 
 **Palalimin ang Iyong Kaalaman sa HTML**
 
-Ang HTML ay naging pundasyon ng web sa loob ng mahigit 30 taon, mula sa isang simpleng wika para sa pagmarka ng dokumento hanggang sa isang sopistikadong platform para sa paggawa ng mga interactive na aplikasyon. Ang pag-unawa sa ebolusyong ito ay tumutulong sa iyo na pahalagahan ang mga modernong pamantayan sa web at gumawa ng mas mahusay na mga desisyon sa pag-develop.
+Ang HTML ay naging pundasyon ng web sa loob ng mahigit 30 taon, mula sa simpleng document markup language hanggang sa isang sopistikadong platform para sa paggawa ng mga interactive na aplikasyon. Ang pag-unawa sa ebolusyong ito ay tumutulong sa iyo na pahalagahan ang modernong web standards at gumawa ng mas mahusay na desisyon sa pag-develop.
 
 **Mga Inirerekomendang Landas sa Pag-aaral:**
 
 1. **Kasaysayan at Ebolusyon ng HTML**
    - Saliksikin ang timeline mula HTML 1.0 hanggang HTML5
-   - Tuklasin kung bakit ang ilang mga tag ay hindi na ginagamit (accessibility, pagiging angkop sa mobile, maintainability)
+   - Tuklasin kung bakit ang ilang mga tag ay na-deprecate (accessibility, mobile-friendliness, maintainability)
    - Suriin ang mga umuusbong na tampok ng HTML at mga panukala
 
-2. **Malalim na Pag-aaral sa Semantic HTML**
+2. **Pag-aaral ng Semantic HTML**
    - Pag-aralan ang kumpletong listahan ng [HTML5 semantic elements](https://developer.mozilla.org/docs/Web/HTML/Element)
-   - Magpraktis sa pagtukoy kung kailan gagamitin ang `<article>`, `<section>`, `<aside>`, at `<main>`
+   - Magsanay sa pagtukoy kung kailan gagamitin ang `<article>`, `<section>`, `<aside>`, at `<main>`
    - Alamin ang tungkol sa ARIA attributes para sa mas pinahusay na accessibility
 
-3. **Modernong Pag-develop ng Web**
-   - Tuklasin ang [pagbuo ng mga responsive na website](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn
+3. **Modernong Web Development**
+   - Mag-explore ng [pagbuo ng mga responsive na website](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn
    - Unawain kung paano pinagsasama ang HTML sa CSS at JavaScript
    - Alamin ang tungkol sa mga pinakamahusay na kasanayan sa web performance at SEO
 
 **Mga Tanong sa Pagmumuni-muni:**
-- Anong mga hindi na ginagamit na HTML tags ang natuklasan mo, at bakit inalis ang mga ito?
+- Anong mga deprecated na HTML tag ang iyong natuklasan, at bakit ito tinanggal?
 - Anong mga bagong tampok ng HTML ang iminungkahi para sa mga susunod na bersyon?
-- Paano nakakatulong ang semantic HTML sa accessibility ng web at SEO?
+- Paano nakakatulong ang semantic HTML sa web accessibility at SEO?
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Buksan ang DevTools (F12) at suriin ang istruktura ng HTML ng iyong paboritong website
+- [ ] Gumawa ng simpleng HTML file na may mga pangunahing tag: `<h1>`, `<p>`, at `<img>`
+- [ ] I-validate ang iyong HTML gamit ang W3C HTML Validator online
+- [ ] Subukang magdagdag ng komento sa iyong HTML gamit ang `<!-- comment -->`
+
+### 🎯 **Ano ang Maaaring Makamit sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at repasuhin ang mga konsepto ng semantic HTML
+- [ ] Gumawa ng simpleng webpage tungkol sa iyong sarili gamit ang tamang istruktura ng HTML
+- [ ] Mag-eksperimento sa iba't ibang antas ng heading at mga tag sa pag-format ng teksto
+- [ ] Magdagdag ng mga imahe at link upang magsanay sa multimedia integration
+- [ ] Saliksikin ang mga tampok ng HTML5 na hindi mo pa nasusubukan
+
+### 📅 **Ang Iyong Lingguhang Paglalakbay sa HTML**
+- [ ] Kumpletuhin ang proyekto ng terrarium gamit ang semantic markup
+- [ ] Gumawa ng accessible na webpage gamit ang ARIA labels at roles
+- [ ] Magsanay sa paggawa ng form gamit ang iba't ibang uri ng input
+- [ ] Mag-explore ng HTML5 APIs tulad ng localStorage o geolocation
+- [ ] Pag-aralan ang mga responsive HTML patterns at mobile-first design
+- [ ] Repasuhin ang HTML code ng ibang mga developer para sa pinakamahusay na kasanayan
+
+### 🌟 **Ang Iyong Buwanang Pundasyon sa Web**
+- [ ] Gumawa ng portfolio website na nagpapakita ng iyong mastery sa HTML
+- [ ] Matutunan ang HTML templating gamit ang framework tulad ng Handlebars
+- [ ] Mag-ambag sa mga open source na proyekto sa pamamagitan ng pagpapabuti ng dokumentasyon ng HTML
+- [ ] Masterin ang mga advanced na konsepto ng HTML tulad ng custom elements
+- [ ] Isama ang HTML sa mga CSS frameworks at JavaScript libraries
+- [ ] Mag-mentor sa iba na nag-aaral ng mga pangunahing kaalaman sa HTML
+
+## 🎯 Ang Iyong Timeline sa Pag-master ng HTML
+
+```mermaid
+timeline
+    title HTML Learning Progression
+    
+    section Foundation (5 minutes)
+        Document Structure: DOCTYPE declaration
+                         : HTML root element
+                         : Head vs Body understanding
+        
+    section Metadata (10 minutes)
+        Essential Meta Tags: Character encoding
+                           : Viewport configuration
+                           : Browser compatibility
+        
+    section Content Creation (15 minutes)
+        Image Integration: Proper file paths
+                         : Alt text importance
+                         : Self-closing tags
+        
+    section Layout Organization (20 minutes)
+        Container Strategy: Div elements for structure
+                          : Class and ID naming
+                          : Nested element hierarchy
+        
+    section Semantic Mastery (30 minutes)
+        Meaningful Markup: Heading hierarchy
+                         : Screen reader navigation
+                         : Accessibility best practices
+        
+    section Advanced Concepts (1 hour)
+        HTML5 Features: Modern semantic elements
+                      : ARIA attributes
+                      : Performance considerations
+        
+    section Professional Skills (1 week)
+        Code Organization: File structure patterns
+                         : Maintainable markup
+                         : Team collaboration
+        
+    section Expert Level (1 month)
+        Modern Web Standards: Progressive enhancement
+                            : Cross-browser compatibility
+                            : HTML specification updates
+```
+
+### 🛠️ Buod ng Iyong HTML Toolkit
+
+Pagkatapos ng araling ito, mayroon ka na:
+- **Istruktura ng Dokumento**: Kumpletong pundasyon ng HTML5 na may tamang DOCTYPE
+- **Semantic Markup**: Makabuluhang mga tag na nagpapahusay sa accessibility at SEO
+- **Pagsasama ng Imahe**: Tamang organisasyon ng file at mga kasanayan sa alt text
+- **Mga Layout Container**: Madiskarteng paggamit ng divs na may deskriptibong pangalan ng klase
+- **Kamalayan sa Accessibility**: Pag-unawa sa navigation ng screen reader
+- **Modernong Pamantayan**: Kasalukuyang mga kasanayan sa HTML5 at kaalaman sa deprecated na tag
+- **Pundasyon ng Proyekto**: Matibay na base para sa CSS styling at interactivity ng JavaScript
 
+**Susunod na Hakbang**: Ang istruktura ng iyong HTML ay handa na para sa CSS styling! Ang semantic na pundasyon na iyong ginawa ay magpapadali sa pag-unawa sa susunod na aralin.
 
 ## Takdang-Aralin
 
-[Magpraktis sa iyong HTML: Gumawa ng mockup ng blog](assignment.md)
+[Sanayin ang iyong HTML: Gumawa ng mockup ng blog](assignment.md)
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/3-terrarium/2-intro-to-css/README.md b/translations/tl/3-terrarium/2-intro-to-css/README.md
index a523c95435..78adf26e8b 100644
--- a/translations/tl/3-terrarium/2-intro-to-css/README.md
+++ b/translations/tl/3-terrarium/2-intro-to-css/README.md
@@ -1,24 +1,80 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "92c4431eac70670b0450b02c1d11279a",
-  "translation_date": "2025-10-22T15:31:19+00:00",
+  "original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
+  "translation_date": "2025-11-03T13:56:26+00:00",
   "source_file": "3-terrarium/2-intro-to-css/README.md",
   "language_code": "tl"
 }
 -->
-# Proyekto ng Terrarium Bahagi 2: Panimula sa CSS
+# Terrarium Project Part 2: Panimula sa CSS
+
+```mermaid
+journey
+    title Your CSS Styling Journey
+    section Foundation
+      Link CSS file: 3: Student
+      Understand cascade: 4: Student
+      Learn inheritance: 4: Student
+    section Selectors
+      Element targeting: 4: Student
+      Class patterns: 5: Student
+      ID specificity: 5: Student
+    section Layout
+      Position elements: 4: Student
+      Create containers: 5: Student
+      Build terrarium: 5: Student
+    section Polish
+      Add visual effects: 5: Student
+      Responsive design: 5: Student
+      Glass reflections: 5: Student
+```
 
 ![Panimula sa CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.tl.png)
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
 Naalala mo ba kung gaano kasimple ang hitsura ng iyong HTML terrarium? Sa CSS, binabago natin ang simpleng istruktura na iyon upang maging mas kaakit-akit sa paningin.
 
-Kung ang HTML ay parang pagbuo ng balangkas ng isang bahay, ang CSS naman ang lahat ng nagpapaganda dito - ang mga kulay ng pintura, ang ayos ng mga kasangkapan, ang ilaw, at kung paano magkakaugnay ang mga silid. Isipin kung paano nagsimula ang Palasyo ng Versailles bilang isang simpleng hunting lodge, ngunit sa maingat na pag-aayos at disenyo, ito ay naging isa sa pinakamagnificenteng gusali sa mundo.
+Kung ang HTML ay parang paggawa ng balangkas ng isang bahay, ang CSS naman ang lahat ng nagbibigay ng ganda at ginhawa - ang kulay ng pintura, ang ayos ng mga kasangkapan, ang ilaw, at kung paano magkakaugnay ang mga silid. Isipin kung paano nagsimula ang Palasyo ng Versailles bilang isang simpleng hunting lodge, ngunit sa maingat na pag-aayos at disenyo, naging isa ito sa pinakamagnificenteng gusali sa mundo.
 
 Ngayon, babaguhin natin ang iyong terrarium mula sa functional patungo sa polished. Matututo kang magposisyon ng mga elemento nang eksakto, gawing responsive ang mga layout sa iba't ibang laki ng screen, at lumikha ng visual na kaakit-akit na nagpapaganda sa mga website.
 
-Sa pagtatapos ng araling ito, makikita mo kung paano ang maingat na pag-istilo gamit ang CSS ay maaaring lubos na mapabuti ang iyong proyekto. Magdagdag na tayo ng estilo sa iyong terrarium.
+Sa pagtatapos ng araling ito, makikita mo kung paano ang maingat na CSS styling ay maaaring lubos na mapaganda ang iyong proyekto. Simulan na natin ang pagdaragdag ng estilo sa iyong terrarium.
+
+```mermaid
+mindmap
+  root((CSS Fundamentals))
+    Cascade
+      Specificity Rules
+      Inheritance
+      Priority Order
+      Conflict Resolution
+    Selectors
+      Element Tags
+      Classes (.class)
+      IDs (#id)
+      Combinators
+    Box Model
+      Margin
+      Border
+      Padding
+      Content
+    Layout
+      Positioning
+      Display Types
+      Flexbox
+      Grid
+    Visual Effects
+      Colors
+      Shadows
+      Transitions
+      Animations
+    Responsive Design
+      Media Queries
+      Flexible Units
+      Viewport Meta
+      Mobile First
+```
 
 ## Pre-Lecture Quiz
 
@@ -26,21 +82,21 @@ Sa pagtatapos ng araling ito, makikita mo kung paano ang maingat na pag-istilo g
 
 ## Pagsisimula sa CSS
 
-Ang CSS ay madalas na iniisip bilang "pagpapaganda ng mga bagay," ngunit ito ay may mas malawak na layunin. Ang CSS ay parang pagiging direktor ng isang pelikula - kontrolado mo hindi lamang kung paano ang hitsura ng lahat, kundi pati na rin kung paano ito gumagalaw, tumutugon sa interaksyon, at umaangkop sa iba't ibang sitwasyon.
+Madalas iniisip na ang CSS ay para lang sa "pagpapaganda ng mga bagay," ngunit mas malawak ang layunin nito. Ang CSS ay parang direktor ng pelikula - kontrolado mo hindi lang ang hitsura ng lahat, kundi pati ang galaw, tugon sa interaksyon, at pag-aangkop sa iba't ibang sitwasyon.
 
-Ang modernong CSS ay napakahusay. Maaari kang magsulat ng code na awtomatikong inaayos ang mga layout para sa mga telepono, tablet, at desktop computer. Maaari kang lumikha ng makinis na animasyon na gumagabay sa atensyon ng mga user kung saan kinakailangan. Ang resulta ay maaaring maging kahanga-hanga kapag ang lahat ay nagtutulungan.
+Ang modernong CSS ay napaka-kakayahan. Maaari kang magsulat ng code na awtomatikong ina-adjust ang mga layout para sa mga telepono, tablet, at desktop computer. Maaari kang lumikha ng makinis na animasyon na umaakit sa atensyon ng mga user kung kinakailangan. Ang resulta ay maaaring maging kahanga-hanga kapag ang lahat ay nagtutulungan.
 
-> 💡 **Pro Tip**: Ang CSS ay patuloy na nagbabago sa mga bagong tampok at kakayahan. Palaging suriin ang [CanIUse.com](https://caniuse.com) upang i-verify ang suporta ng browser para sa mga mas bagong tampok ng CSS bago gamitin ang mga ito sa mga production project.
+> 💡 **Pro Tip**: Ang CSS ay patuloy na nagbabago sa mga bagong tampok at kakayahan. Palaging suriin ang [CanIUse.com](https://caniuse.com) upang tiyakin ang suporta ng browser para sa mga bagong tampok ng CSS bago ito gamitin sa mga production project.
 
-**Narito ang mga gagawin natin sa araling ito:**
-- **Lumikha** ng kumpletong visual na disenyo para sa iyong terrarium gamit ang mga modernong teknik sa CSS
-- **Suriin** ang mga pangunahing konsepto tulad ng cascade, inheritance, at CSS selectors
+**Narito ang mga layunin natin sa araling ito:**
+- **Lumikha** ng kumpletong visual na disenyo para sa iyong terrarium gamit ang modernong mga teknik sa CSS
+- **Tuklasin** ang mga pangunahing konsepto tulad ng cascade, inheritance, at CSS selectors
 - **Ipatupad** ang mga responsive na estratehiya sa pagposisyon at layout
-- **Bumuo** ng terrarium container gamit ang mga hugis at estilo ng CSS
+- **Bumuo** ng terrarium container gamit ang CSS shapes at styling
 
 ### Paunang Kaalaman
 
-Dapat ay natapos mo na ang HTML na istruktura para sa iyong terrarium mula sa nakaraang aralin at handa na itong istiluhin.
+Dapat ay natapos mo na ang HTML na istruktura para sa iyong terrarium mula sa nakaraang aralin at handa na itong i-style.
 
 > 📺 **Video Resource**: Tingnan ang kapaki-pakinabang na video walkthrough
 >
@@ -48,7 +104,7 @@ Dapat ay natapos mo na ang HTML na istruktura para sa iyong terrarium mula sa na
 
 ### Pag-set Up ng Iyong CSS File
 
-Bago tayo magsimulang mag-istilo, kailangan nating ikonekta ang CSS sa ating HTML. Ang koneksyon na ito ang nagsasabi sa browser kung saan hahanapin ang mga tagubilin sa pag-istilo para sa ating terrarium.
+Bago tayo magsimulang mag-style, kailangan nating ikonekta ang CSS sa ating HTML. Ang koneksyon na ito ang nagsasabi sa browser kung saan hahanapin ang mga tagubilin sa pag-style para sa ating terrarium.
 
 Sa iyong terrarium folder, gumawa ng bagong file na tinatawag na `style.css`, pagkatapos ay i-link ito sa `<head>` section ng iyong HTML document:
 
@@ -58,30 +114,30 @@ Sa iyong terrarium folder, gumawa ng bagong file na tinatawag na `style.css`, pa
 
 **Narito ang ginagawa ng code na ito:**
 - **Lumilikha** ng koneksyon sa pagitan ng iyong HTML at CSS files
-- **Sinasabi** sa browser na i-load at i-apply ang mga estilo mula sa `style.css`
-- **Gumagamit** ng `rel="stylesheet"` attribute upang tukuyin na ito ay isang CSS file
-- **Nagre-refer** sa file path gamit ang `href="./style.css"`
+- **Sinasabi** sa browser na i-load at i-apply ang mga style mula sa `style.css`
+- **Gumagamit** ng `rel="stylesheet"` na attribute upang tukuyin na ito ay isang CSS file
+- **Tinutukoy** ang file path gamit ang `href="./style.css"`
 
 ## Pag-unawa sa CSS Cascade
 
-Naisip mo na ba kung bakit tinatawag na "Cascading" Style Sheets ang CSS? Ang mga estilo ay bumababa tulad ng isang talon, at minsan sila ay nagkakaroon ng salungatan.
+Naisip mo na ba kung bakit tinawag na "Cascading" Style Sheets ang CSS? Ang mga style ay bumababa tulad ng talon, at minsan nagkakaroon ng salungatan sa isa't isa.
 
-Isipin kung paano gumagana ang mga istruktura ng utos sa militar - maaaring sabihin ng pangkalahatang utos na "lahat ng tropa ay magsuot ng berde," ngunit ang isang partikular na utos sa iyong yunit ay maaaring magsabi na "magsuot ng dress blues para sa seremonya." Ang mas tiyak na utos ang may priyoridad. Ang CSS ay sumusunod sa katulad na lohika, at ang pag-unawa sa hierarchy na ito ay nagpapadali sa pag-debug.
+Isipin kung paano gumagana ang istruktura ng utos sa militar - maaaring sabihin ng pangkalahatang utos na "lahat ng tropa ay magsuot ng berde," ngunit ang tiyak na utos sa iyong yunit ay maaaring magsabi na "magsuot ng dress blues para sa seremonya." Ang mas tiyak na utos ang masusunod. Ang CSS ay sumusunod sa katulad na lohika, at ang pag-unawa sa hierarchy na ito ay nagpapadali sa pag-debug.
 
-### Eksperimento sa Cascade Priority
+### Pagsubok sa Cascade Priority
 
-Tingnan natin ang cascade sa aksyon sa pamamagitan ng paglikha ng salungatan sa estilo. Una, magdagdag ng inline style sa iyong `<h1>` tag:
+Tingnan natin ang cascade sa aksyon sa pamamagitan ng paglikha ng style conflict. Una, magdagdag ng inline style sa iyong `<h1>` tag:
 
 ```html
 <h1 style="color: red">My Terrarium</h1>
 ```
 
 **Ano ang ginagawa ng code na ito:**
-- **Nag-aapply** ng pulang kulay nang direkta sa `<h1>` element gamit ang inline styling
-- **Gumagamit** ng `style` attribute upang i-embed ang CSS nang direkta sa HTML
-- **Lumilikha** ng pinakamataas na priyoridad na panuntunan sa estilo para sa partikular na element na ito
+- **Nag-aapply** ng red na kulay direkta sa `<h1>` element gamit ang inline styling
+- **Gumagamit** ng `style` attribute upang mag-embed ng CSS direkta sa HTML
+- **Lumilikha** ng pinakamataas na priority na style rule para sa partikular na element na ito
 
-Susunod, idagdag ang panuntunang ito sa iyong `style.css` file:
+Susunod, idagdag ang rule na ito sa iyong `style.css` file:
 
 ```css
 h1 {
@@ -90,13 +146,35 @@ h1 {
 ```
 
 **Sa itaas, ginawa natin:**
-- **Nag-defina** ng CSS rule na tumutukoy sa lahat ng `<h1>` elements
+- **Nag-defina** ng CSS rule na target ang lahat ng `<h1>` elements
 - **Nag-set** ng text color sa blue gamit ang external stylesheet
-- **Lumilikha** ng mas mababang priyoridad na panuntunan kumpara sa inline styles
-
-✅ **Knowledge Check**: Anong kulay ang nagpapakita sa iyong web app? Bakit nanalo ang kulay na iyon? Makakaisip ka ba ng mga sitwasyon kung saan nais mong i-override ang mga estilo?
+- **Lumilikha** ng mas mababang priority rule kumpara sa inline styles
+
+✅ **Knowledge Check**: Anong kulay ang makikita sa iyong web app? Bakit iyon ang nanalo? Makakaisip ka ba ng mga sitwasyon kung saan nais mong i-override ang mga style?
+
+```mermaid
+flowchart TD
+    A["Browser encounters h1 element"] --> B{"Check for inline styles"}
+    B -->|Found| C["style='color: red'"] 
+    B -->|None| D{"Check for ID rules"}
+    C --> E["Apply red color (1000 points)"]
+    D -->|Found| F["#heading { color: green }"]
+    D -->|None| G{"Check for class rules"}
+    F --> H["Apply green color (100 points)"]
+    G -->|Found| I[".title { color: blue }"]
+    G -->|None| J{"Check element rules"}
+    I --> K["Apply blue color (10 points)"]
+    J -->|Found| L["h1 { color: purple }"]
+    J -->|None| M["Use browser default"]
+    L --> N["Apply purple color (1 point)"]
+    
+    style C fill:#ff6b6b
+    style F fill:#51cf66
+    style I fill:#339af0
+    style L fill:#9775fa
+```
 
-> 💡 **Order ng Priority ng CSS (pinakamataas hanggang pinakamababa):**
+> 💡 **CSS Priority Order (pinakamataas hanggang pinakamababa):**
 > 1. **Inline styles** (style attribute)
 > 2. **IDs** (#myId)
 > 3. **Classes** (.myClass) at attributes
@@ -105,9 +183,9 @@ h1 {
 
 ## CSS Inheritance sa Aksyon
 
-Ang CSS inheritance ay gumagana tulad ng genetika - ang mga elemento ay nagmamana ng ilang mga katangian mula sa kanilang mga parent elements. Kung mag-set ka ng font family sa body element, lahat ng text sa loob ay awtomatikong gagamit ng parehong font. Katulad ito ng kung paano ang natatanging jawline ng pamilya Habsburg ay lumitaw sa iba't ibang henerasyon nang hindi tinukoy para sa bawat indibidwal.
+Ang CSS inheritance ay gumagana tulad ng genetics - ang mga elemento ay nagmamana ng ilang properties mula sa kanilang parent elements. Kung mag-set ka ng font family sa body element, lahat ng text sa loob ay awtomatikong gagamit ng parehong font. Parang kung paano ang natatanging jawline ng pamilya Habsburg ay lumitaw sa iba't ibang henerasyon nang hindi tinukoy para sa bawat indibidwal.
 
-Gayunpaman, hindi lahat ay namamana. Ang mga text styles tulad ng fonts at colors ay namamana, ngunit ang mga layout properties tulad ng margins at borders ay hindi. Katulad ng mga anak na maaaring magmana ng pisikal na katangian ngunit hindi ang mga fashion choices ng kanilang mga magulang.
+Gayunpaman, hindi lahat ay namamana. Ang mga text styles tulad ng fonts at colors ay namamana, ngunit ang mga layout properties tulad ng margins at borders ay hindi. Parang ang mga anak ay maaaring magmana ng pisikal na katangian ngunit hindi ang fashion choices ng kanilang mga magulang.
 
 ### Pagmamasid sa Font Inheritance
 
@@ -120,30 +198,45 @@ body {
 ```
 
 **Pagpapaliwanag sa nangyayari dito:**
-- **Nag-set** ng font family para sa buong pahina sa pamamagitan ng pag-target sa `<body>` element
-- **Gumagamit** ng font stack na may fallback options para sa mas mahusay na compatibility ng browser
+- **Nag-set** ng font family para sa buong page sa pamamagitan ng pag-target sa `<body>` element
+- **Gumagamit** ng font stack na may fallback options para sa mas mahusay na browser compatibility
 - **Nag-aapply** ng modernong system fonts na maganda ang hitsura sa iba't ibang operating systems
-- **Tinitiyak** na lahat ng child elements ay magmamana ng font na ito maliban kung partikular na na-override
+- **Tinitiyak** na lahat ng child elements ay magmamana ng font maliban kung partikular na na-override
 
-Buksan ang developer tools ng iyong browser (F12), pumunta sa Elements tab, at i-inspect ang iyong `<h1>` element. Makikita mo na ito ay nagmamana ng font family mula sa body:
+Buksan ang developer tools ng iyong browser (F12), pumunta sa Elements tab, at i-inspect ang iyong `<h1>` element. Makikita mo na namamana nito ang font family mula sa body:
 
-![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.tl.png)
+![namana na font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.tl.png)
 
-✅ **Experiment Time**: Subukang mag-set ng iba pang namamanang properties sa `<body>` tulad ng `color`, `line-height`, o `text-align`. Ano ang nangyayari sa iyong heading at iba pang mga elemento?
+✅ **Experiment Time**: Subukang mag-set ng iba pang inheritable properties sa `<body>` tulad ng `color`, `line-height`, o `text-align`. Ano ang nangyayari sa iyong heading at iba pang elemento?
 
-> 📝 **Mga Namamanang Properties Kasama**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
+> 📝 **Mga Namamanang Properties**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
 >
-> **Mga Hindi Namamanang Properties Kasama**: `margin`, `padding`, `border`, `width`, `height`, `position`
+> **Mga Hindi Namamanang Properties**: `margin`, `padding`, `border`, `width`, `height`, `position`
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa CSS Foundation**: Bago lumipat sa selectors, tiyakin na kaya mong:
+- ✅ Ipaliwanag ang pagkakaiba ng cascade at inheritance
+- ✅ Hulaan kung aling style ang mananalo sa specificity conflict
+- ✅ Tukuyin kung aling properties ang namamana mula sa parent elements
+- ✅ Ikonekta ang CSS files sa HTML nang maayos
+
+**Quick Test**: Kung mayroon kang mga style na ito, anong kulay ang magiging `<h1>` sa loob ng `<div class="special">`?
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*Sagot: Pula (element selector na direktang nagta-target sa h1)*
 
 ## Pag-master ng CSS Selectors
 
-Ang CSS selectors ang paraan mo upang i-target ang mga partikular na elemento para sa pag-istilo. Gumagana ito tulad ng pagbibigay ng eksaktong direksyon - sa halip na sabihin "ang bahay," maaari mong sabihin "ang asul na bahay na may pulang pinto sa Maple Street."
+Ang CSS selectors ang paraan mo para i-target ang partikular na mga elemento para sa styling. Gumagana ito tulad ng pagbibigay ng eksaktong direksyon - sa halip na sabihing "ang bahay," maaari mong sabihin "ang asul na bahay na may pulang pinto sa Maple Street."
 
-Nagbibigay ang CSS ng iba't ibang paraan upang maging tiyak, at ang pagpili ng tamang selector ay tulad ng pagpili ng angkop na tool para sa gawain. Minsan kailangan mong istiluhin ang bawat pinto sa kapitbahayan, at minsan isang partikular na pinto lamang.
+Nagbibigay ang CSS ng iba't ibang paraan para maging tiyak, at ang pagpili ng tamang selector ay parang pagpili ng tamang tool para sa gawain. Minsan kailangan mong i-style ang bawat pinto sa kapitbahayan, at minsan isang partikular na pinto lang.
 
 ### Element Selectors (Tags)
 
-Ang element selectors ay nagta-target sa mga HTML elements sa pamamagitan ng kanilang tag name. Perpekto ang mga ito para sa pag-set ng base styles na malawakang ina-apply sa iyong pahina:
+Ang element selectors ay nagta-target ng HTML elements sa pamamagitan ng kanilang tag name. Perpekto ang mga ito para sa pag-set ng base styles na malawak na ina-apply sa iyong page:
 
 ```css
 body {
@@ -160,19 +253,19 @@ h1 {
 }
 ```
 
-**Pag-unawa sa mga estilo na ito:**
-- **Nag-set** ng consistent na typography sa buong pahina gamit ang `body` selector
+**Pag-unawa sa mga style na ito:**
+- **Nag-set** ng consistent na typography sa buong page gamit ang `body` selector
 - **Nag-aalis** ng default na browser margins at padding para sa mas mahusay na kontrol
-- **Nag-istilo** ng lahat ng heading elements gamit ang kulay, alignment, at spacing
+- **Nag-style** ng lahat ng heading elements gamit ang kulay, alignment, at spacing
 - **Gumagamit** ng `rem` units para sa scalable, accessible na font sizing
 
-Habang ang element selectors ay mahusay para sa pangkalahatang pag-istilo, kakailanganin mo ng mas tiyak na selectors upang istiluhin ang mga indibidwal na bahagi tulad ng mga halaman sa iyong terrarium.
+Habang ang element selectors ay mahusay para sa pangkalahatang styling, kakailanganin mo ng mas tiyak na selectors para i-style ang mga indibidwal na bahagi tulad ng mga halaman sa iyong terrarium.
 
 ### ID Selectors para sa Natatanging Mga Elemento
 
-Ang ID selectors ay gumagamit ng `#` symbol at nagta-target sa mga elemento na may partikular na `id` attributes. Dahil ang IDs ay dapat na natatangi sa isang pahina, perpekto ang mga ito para sa pag-istilo ng mga indibidwal, espesyal na elemento tulad ng ating kaliwa at kanang plant containers.
+Ang ID selectors ay gumagamit ng `#` symbol at nagta-target ng mga elemento na may partikular na `id` attributes. Dahil ang IDs ay dapat na natatangi sa isang page, perpekto ang mga ito para sa pag-style ng mga indibidwal, espesyal na elemento tulad ng ating left at right plant containers.
 
-Gawin natin ang pag-istilo para sa mga side containers ng terrarium kung saan maninirahan ang mga halaman:
+Gumawa tayo ng styling para sa mga side containers ng terrarium kung saan maninirahan ang mga halaman:
 
 ```css
 #left-container {
@@ -198,12 +291,12 @@ Gawin natin ang pag-istilo para sa mga side containers ng terrarium kung saan ma
 }
 ```
 
-**Narito ang ginagawa ng code na ito:**
+**Narito ang nagagawa ng code na ito:**
 - **Nagpo-posisyon** ng mga container sa dulong kaliwa at kanan gamit ang `absolute` positioning
-- **Gumagamit** ng `vh` (viewport height) units para sa responsive na taas na umaangkop sa laki ng screen
-- **Nag-aapply** ng `box-sizing: border-box` upang ang padding ay kasama sa kabuuang lapad
+- **Gumagamit** ng `vh` (viewport height) units para sa responsive na height na umaangkop sa laki ng screen
+- **Nag-aapply** ng `box-sizing: border-box` upang maisama ang padding sa kabuuang width
 - **Nag-aalis** ng hindi kinakailangang `px` units mula sa zero values para sa mas malinis na code
-- **Nag-set** ng banayad na background color na mas magaan sa mata kaysa sa matinding gray
+- **Nag-set** ng subtle na background color na mas magaan sa mata kaysa sa matinding gray
 
 ✅ **Code Quality Challenge**: Pansinin kung paano nilalabag ng CSS na ito ang prinsipyo ng DRY (Don't Repeat Yourself). Maaari mo bang i-refactor ito gamit ang parehong ID at class?
 
@@ -235,9 +328,9 @@ Gawin natin ang pag-istilo para sa mga side containers ng terrarium kung saan ma
 
 ### Class Selectors para sa Reusable Styles
 
-Ang class selectors ay gumagamit ng `.` symbol at perpekto kapag nais mong i-apply ang parehong estilo sa maraming elemento. Hindi tulad ng IDs, ang mga klase ay maaaring gamitin nang paulit-ulit sa iyong HTML, na ginagawang perpekto para sa mga consistent na pattern ng pag-istilo.
+Ang class selectors ay gumagamit ng `.` symbol at perpekto kapag nais mong i-apply ang parehong styles sa maraming elemento. Hindi tulad ng IDs, ang classes ay maaaring gamitin nang paulit-ulit sa iyong HTML, na ginagawa itong ideal para sa consistent na styling patterns.
 
-Sa ating terrarium, ang bawat halaman ay nangangailangan ng katulad na estilo ngunit kailangan din ng indibidwal na pagposisyon. Gagamit tayo ng kombinasyon ng mga klase para sa shared styles at IDs para sa natatanging pagposisyon.
+Sa ating terrarium, bawat halaman ay nangangailangan ng parehong styling ngunit kailangan din ng indibidwal na posisyon. Gagamit tayo ng kombinasyon ng classes para sa shared styles at IDs para sa unique na posisyon.
 
 **Narito ang HTML structure para sa bawat halaman:**
 ```html
@@ -249,10 +342,10 @@ Sa ating terrarium, ang bawat halaman ay nangangailangan ng katulad na estilo ng
 **Mga pangunahing elemento na ipinaliwanag:**
 - **Gumagamit** ng `class="plant-holder"` para sa consistent na container styling sa lahat ng halaman
 - **Nag-aapply** ng `class="plant"` para sa shared image styling at behavior
-- **Naglalaman** ng natatanging `id="plant1"` para sa indibidwal na pagposisyon at interaksyon sa JavaScript
-- **Nagbibigay** ng descriptive alt text para sa accessibility ng screen reader
+- **Naglalaman** ng unique na `id="plant1"` para sa indibidwal na posisyon at JavaScript interaction
+- **Nagbibigay** ng descriptive na alt text para sa accessibility ng screen reader
 
-Ngayon, idagdag ang mga estilo na ito sa iyong `style.css` file:
+Ngayon, idagdag ang mga style na ito sa iyong `style.css` file:
 
 ```css
 .plant-holder {
@@ -274,37 +367,54 @@ Ngayon, idagdag ang mga estilo na ito sa iyong `style.css` file:
 }
 ```
 
-**Pagpapaliwanag sa mga estilo na ito:**
+**Pagpapaliwanag sa mga style na ito:**
 - **Lumilikha** ng relative positioning para sa plant holder upang magtatag ng positioning context
-- **Nag-set** ng bawat plant holder sa 13% height, tinitiyak na lahat ng halaman ay magkasya nang patayo nang walang pag-scroll
-- **Bahagyang ini-shift** ang mga holder sa kaliwa upang mas maayos na ma-center ang mga halaman sa kanilang mga container
-- **Pinapayagan** ang mga halaman na mag-scale nang responsive gamit ang `max-width` at `max-height` properties
-- **Gumagamit** ng `z-index` upang i-layer ang mga halaman sa ibabaw ng ibang mga elemento sa terrarium
-- **Nagdadagdag** ng banayad na hover effect gamit ang CSS transitions para sa mas mahusay na interaksyon ng user
+- **Nag-set** ng bawat plant holder sa 13% height, tinitiyak na lahat ng halaman ay magkasya nang patayo nang walang scrolling
+- **Nag-shift** ng holders bahagyang kaliwa upang mas ma-center ang mga halaman sa kanilang containers
+- **Nagpapahintulot** sa mga halaman na mag-scale nang responsive gamit ang `max-width` at `max-height` properties
+- **Gumagamit** ng `z-index` upang i-layer ang mga halaman sa ibabaw ng ibang elemento sa terrarium
+- **Nagdadagdag** ng subtle na hover effect gamit ang CSS transitions para sa mas mahusay na user interaction
 
-✅ **Critical Thinking**: Bakit kailangan natin ang parehong `.plant-holder` at `.plant` selectors? Ano ang mangyayari kung susubukan nating gumamit ng isa lamang?
+✅ **Critical Thinking**: Bakit kailangan natin ang parehong `.plant-holder` at `.plant` selectors? Ano ang mangyayari kung subukan nating gumamit ng isa lang?
 
-> 💡 **Design Pattern**: Ang container (`.plant-holder`) ang nagkokontrol sa layout at pagposisyon, habang ang content (`.plant`) ang nagkokontrol sa hitsura at pag-scale. Ang paghihiwalay na ito ay nagpapadali sa code na mas madaling i-maintain at flexible.
+> 💡 **Design Pattern**: Ang container (`.plant-holder`) ang nagkokontrol sa layout at posisyon, habang ang content (`.plant`) ang nagkokontrol sa hitsura at scaling. Ang paghihiwalay na ito ay nagpapadali sa pag-maintain at flexibility ng code.
 
 ## Pag-unawa sa CSS Positioning
 
-Ang CSS positioning ay tulad ng pagiging stage director para sa isang play - ikaw ang nagdidirekta kung saan tatayo ang bawat aktor at kung paano sila gumagalaw sa entablado. Ang ilang aktor ay sumusunod sa standard formation, habang ang iba ay nangangailangan ng partikular na pagposisyon para sa dramatic effect.
+Ang CSS positioning ay parang pagiging stage director ng isang play - ikaw ang nagdidirekta kung saan tatayo ang bawat aktor at kung paano sila gagalaw sa entablado. Ang ilang aktor ay sumusunod sa standard formation, habang ang iba ay nangangailangan ng partikular na posisyon para sa dramatic effect.
 
-Kapag naintindihan mo ang positioning, maraming layout challenges ang nagiging mas madali. Kailangan mo ba ng navigation bar na nananatili sa itaas habang nag-scroll ang mga user? Ang positioning ang bahala diyan. Gusto mo ba ng tooltip na lumilitaw sa partikular na lokasyon? Iyan din ay positioning.
+Kapag naintindihan mo ang positioning, maraming layout challenges ang nagiging mas madali. Kailangan mo ba ng navigation bar na nananatili sa itaas habang nag-scroll ang user? Ang positioning ang bahala diyan. Gusto mo ba ng tooltip na lumilitaw sa partikular na lokasyon? Positioning din ang sagot.
 
 ### Ang Limang Position Values
 
+```mermaid
+quadrantChart
+    title CSS Positioning Strategy
+    x-axis Document Flow --> Removed from Flow
+    y-axis Static Position --> Precise Control
+    quadrant-1 Absolute
+    quadrant-2 Fixed
+    quadrant-3 Static
+    quadrant-4 Sticky
+    
+    Static: [0.2, 0.2]
+    Relative: [0.3, 0.6]
+    Absolute: [0.8, 0.8]
+    Fixed: [0.9, 0.7]
+    Sticky: [0.5, 0.9]
+```
+
 | Position Value | Pag-uugali | Gamit |
 |----------------|------------|-------|
 | `static` | Default flow, hindi pinapansin ang top/left/right/bottom | Normal na layout ng dokumento |
 | `relative` | Nakaposisyon kaugnay sa normal na posisyon nito | Maliit na adjustments, paglikha ng positioning context |
-| `absolute` | Nakaposisyon kaugnay sa pinakamalapit na positioned ancestor | Eksaktong pagposisyon, overlays |
+| `absolute` | Nakaposisyon kaugnay sa pinakamalapit na positioned ancestor | Eksaktong paglalagay, overlays |
 | `fixed` | Nakaposisyon kaugnay sa viewport | Navigation bars, floating elements |
-| `sticky` | Nagpapalit sa pagitan ng relative at fixed base sa scroll | Mga header na nananatili habang nag-scroll |
+| `sticky` | Nagpapalit sa pagitan ng relative at fixed base sa scroll | Headers na nananatili habang nag-scroll |
 
-### Pagposisyon sa Ating Terrarium
+### Positioning sa Ating Terrarium
 
-Ang ating terrarium ay gumagamit ng maingat na kombinasyon ng mga positioning types upang lumikha ng nais na layout:
+Ang terrarium natin ay gumagamit ng strategic na kombinasyon ng positioning types upang makamit ang nais na layout:
 
 ```css
 /* Container positioning */
@@ -326,27 +436,62 @@ Ang ating terrarium ay gumagamit ng maingat na kombinasyon ng mga positioning ty
 }
 ```
 
-**Pag-unawa sa estratehiya ng pagposisyon:**
-- **Absolute containers** ay inaalis mula sa normal na document flow at naka-pin sa mga gilid ng screen
+**Pag-unawa sa positioning strategy:**
+- **Absolute containers** ay tinanggal sa normal na document flow at naka-pin sa mga gilid ng screen
 - **Relative plant holders** ay lumilikha ng positioning context habang nananatili sa document flow
-- **Absolute plants** ay maaaring iposisyon nang eksakto sa loob ng kanilang relative containers
-- **Ang kombinasyong ito** ay nagpapahintulot sa mga halaman na mag-stack nang patayo habang maaaring iposisyon nang indibidwal
+- **Absolute plants** ay maaaring i-posisyon nang eksakto sa loob ng kanilang relative containers
+- **Ang kombinasyong ito** ay nagpapahintulot sa mga halaman na mag-stack nang patayo habang maaaring i-posisyon nang indibidwal
 
-> 🎯 **Bakit Mahalaga Ito**: Ang `plant` elements ay nangangailangan ng absolute positioning upang maging draggable sa susunod na aralin. Ang absolute positioning ay inaalis ang mga ito mula sa normal na layout flow, na ginagawang posible ang drag-and-drop interactions.
+> 🎯 **Bakit Mahalaga Ito**: Ang `plant` elements ay nangangailangan ng absolute positioning upang maging draggable sa susunod na aralin. Ang absolute positioning ay nag-aalis sa kanila sa normal na layout flow, na ginagawang posible ang drag-and-drop interactions.
 
-✅ **Experiment Time**: Subukang baguhin ang mga positioning values at obserbahan ang mga resulta:
-- Ano ang mangyayari kung babaguhin mo ang `.container` mula `absolute` patungong `relative`?
-- Paano nagbabago ang layout kung ang `.plant-holder` ay gumagamit ng `absolute` sa halip na `relative`?
-- Ano ang nangyayari kapag binago mo ang `.plant` sa `relative` positioning?
+✅ **Experiment Time**: Subukang baguhin ang positioning values at obserbahan ang resulta:
+- Ano ang mangyayari kung baguhin mo ang `.container` mula `absolute` patungong `relative`?
+- Paano nagbabago ang layout kung ang `.plant-holder` ay gagamit ng `absolute` sa halip na `relative`?
+- Ano ang mangyayari kapag binago ang `.plant` sa `relative` positioning?
 
-## Pagbuo ng Terrarium gamit ang CSS
+### 🔄 **Pedagogical Check-in**
+**Mastery sa CSS Positioning**: Huminto sandali upang suriin ang iyong kaalaman:
+- ✅ Kaya mo bang ipaliwanag kung bakit kailangan ng absolute positioning ang mga halaman para sa drag-and-drop?
+- ✅ Nauunawaan mo ba kung paano ang mga relative containers ay lumilikha ng positioning context?
+- ✅ Bakit gumagamit ng absolute positioning ang mga side containers?
+- ✅ Ano ang mangyayari kung aalisin mo ang mga deklarasyon ng position?
+
+**Koneksyon sa Tunay na Mundo**: Isipin kung paano ginagaya ng CSS positioning ang layout sa totoong buhay:
+- **Static**: Mga libro sa istante (natural na pagkakaayos)
+- **Relative**: Paggalaw ng libro nang bahagya ngunit nananatili sa lugar nito
+- **Absolute**: Paglalagay ng bookmark sa eksaktong pahina
+- **Fixed**: Isang sticky note na nananatiling nakikita habang nagbabasa ng mga pahina
 
-Ngayon, bubuo tayo ng glass jar gamit lamang ang CSS - walang images o graphics software na kinakailangan.
+## Pagbuo ng Terrarium gamit ang CSS
 
-Ang paglikha ng realistic-looking glass, shadows, at depth effects gamit ang positioning at transparency ay nagpapakita ng visual na kakayahan ng CSS. Ang teknik na ito ay kahalintulad sa kung paano ginamit ng mga arkitekto sa Bauhaus movement ang simpleng geometric forms upang lumikha ng complex, magagandang istruktura. Kapag naintindihan mo ang mga prinsipyong ito, makikilala mo ang mga teknik ng CSS sa likod ng maraming disenyo ng web.
+Ngayon, gagawa tayo ng glass jar gamit lamang ang CSS - walang mga imahe o graphic software.
+
+Ang paggawa ng realistic-looking glass, shadows, at depth effects gamit ang positioning at transparency ay nagpapakita ng kakayahan ng CSS sa visual design. Ang teknik na ito ay kahalintulad ng paraan ng mga arkitekto sa Bauhaus movement na gumamit ng simpleng geometric forms upang lumikha ng maganda at komplikadong istruktura. Kapag naintindihan mo ang mga prinsipyong ito, makikilala mo ang mga teknik ng CSS sa likod ng maraming disenyo ng web.
+
+```mermaid
+flowchart LR
+    A[Jar Top] --> E[Complete Terrarium]
+    B[Jar Walls] --> E
+    C[Dirt Layer] --> E
+    D[Jar Bottom] --> E
+    F[Glass Effects] --> E
+    
+    A1["50% width<br/>5% height<br/>Top position"] --> A
+    B1["60% width<br/>80% height<br/>Rounded corners<br/>0.5 opacity"] --> B
+    C1["60% width<br/>5% height<br/>Dark brown<br/>Bottom layer"] --> C
+    D1["50% width<br/>1% height<br/>Bottom position"] --> D
+    F1["Subtle shadows<br/>Transparency<br/>Z-index layering"] --> F
+    
+    style E fill:#d1e1df,stroke:#3a241d
+    style A fill:#e8f5e8
+    style B fill:#e8f5e8
+    style C fill:#8B4513
+    style D fill:#e8f5e8
+```
 
 ### Paglikha ng Mga Komponent ng Glass Jar
-Simulan natin ang paggawa ng terrarium jar, piraso bawat piraso. Ang bawat bahagi ay gumagamit ng absolute positioning at percentage-based sizing para sa responsive na disenyo:
+
+Gawin natin ang terrarium jar nang paisa-isa. Ang bawat bahagi ay gumagamit ng absolute positioning at percentage-based sizing para sa responsive design:
 
 ```css
 .jar-walls {
@@ -400,39 +545,51 @@ Simulan natin ang paggawa ng terrarium jar, piraso bawat piraso. Ang bawat bahag
 
 **Pag-unawa sa konstruksyon ng terrarium:**
 - **Gumagamit** ng percentage-based dimensions para sa responsive scaling sa lahat ng screen sizes
-- **Inaayos** ang mga elemento nang absolute para ma-stack at ma-align nang eksakto
-- **Nag-aaplay** ng iba't ibang opacity values para makalikha ng glass transparency effect
-- **Nagpapatupad** ng `z-index` layering para ang mga halaman ay magmukhang nasa loob ng jar
-- **Nagdadagdag** ng subtle box-shadow at refined border-radius para sa mas realistiko na hitsura
+- **Nagpo-posisyon** ng mga elemento nang absolute upang ma-stack at ma-align nang eksakto
+- **Nag-aaplay** ng iba't ibang opacity values upang lumikha ng glass transparency effect
+- **Nagpapatupad** ng `z-index` layering upang ang mga halaman ay lumitaw sa loob ng jar
+- **Nagdadagdag** ng subtle box-shadow at refined border-radius para sa mas realistic na hitsura
 
 ### Responsive Design gamit ang Percentages
 
 Pansinin kung paano lahat ng dimensions ay gumagamit ng percentages sa halip na fixed pixel values:
 
 **Bakit ito mahalaga:**
-- **Tinitiyak** na ang terrarium ay mag-scale nang proporsyonal sa anumang screen size
+- **Tinitiyak** ang proportional scaling ng terrarium sa anumang screen size
 - **Pinapanatili** ang visual relationships sa pagitan ng mga bahagi ng jar
 - **Nagbibigay** ng consistent na karanasan mula sa mobile phones hanggang sa malalaking desktop monitors
 - **Pinapayagan** ang disenyo na mag-adapt nang hindi nasisira ang visual layout
 
-### CSS Units sa Aksyon
+### CSS Units in Action
 
-Gumagamit tayo ng `rem` units para sa border-radius, na nag-scale base sa root font size. Ito ay lumilikha ng mas accessible na disenyo na nirerespeto ang user font preferences. Alamin pa ang tungkol sa [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) sa opisyal na dokumentasyon.
+Gumagamit tayo ng `rem` units para sa border-radius, na nag-scale batay sa root font size. Ito ay lumilikha ng mas accessible na disenyo na iginagalang ang font preferences ng user. Alamin pa ang tungkol sa [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) sa opisyal na spesipikasyon.
 
-✅ **Visual na Eksperimento**: Subukang baguhin ang mga values at obserbahan ang epekto:
-- Palitan ang jar opacity mula 0.5 hanggang 0.8 – paano nito naaapektuhan ang hitsura ng salamin?
-- Ayusin ang kulay ng lupa mula `#3a241d` hanggang `#8B4513` – anong visual na epekto ang dulot nito?
+✅ **Visual Experimentation**: Subukang baguhin ang mga value na ito at obserbahan ang epekto:
+- Baguhin ang jar opacity mula 0.5 hanggang 0.8 – paano nito naaapektuhan ang hitsura ng glass?
+- Ayusin ang kulay ng lupa mula `#3a241d` hanggang `#8B4513` – anong visual na epekto ang nangyayari?
 - Baguhin ang `z-index` ng lupa sa 2 – ano ang nangyayari sa layering?
 
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Visual Design ng CSS**: Kumpirmahin ang iyong kaalaman sa visual CSS:
+- ✅ Paano lumilikha ng responsive design ang percentage-based dimensions?
+- ✅ Bakit lumilikha ng transparency effect ang opacity?
+- ✅ Anong papel ang ginagampanan ng z-index sa layering ng mga elemento?
+- ✅ Paano lumilikha ng jar shape ang border-radius values?
+
+**Prinsipyo ng Disenyo**: Pansinin kung paano tayo bumubuo ng komplikadong visuals mula sa simpleng hugis:
+1. **Mga Rectangles** → **Mga Rounded Rectangles** → **Mga Komponent ng Jar**
+2. **Flat Colors** → **Opacity** → **Glass Effect**
+3. **Indibidwal na Elemento** → **Layered Composition** → **3D Appearance**
+
 ---
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode para tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
 
-**Deskripsyon:** Gumawa ng CSS animation na nagpapagalaw sa mga halaman ng terrarium nang banayad, na parang hinahanginan. Ito ay makakatulong sa iyo na magpraktis ng CSS animations, transforms, at keyframes habang pinapaganda ang visual na appeal ng iyong terrarium.
+**Deskripsyon:** Gumawa ng CSS animation na nagpapagalaw sa mga halaman sa terrarium nang banayad, na parang hinahanginan. Ito ay makakatulong sa iyo na magpraktis ng CSS animations, transforms, at keyframes habang pinapaganda ang visual appeal ng terrarium.
 
-**Prompt:** Magdagdag ng CSS keyframe animations para ang mga halaman sa terrarium ay gumalaw nang banayad mula kaliwa pakanan. Gumawa ng swaying animation na bahagyang nagro-rotate sa bawat halaman (2-3 degrees) kaliwa at kanan na may duration na 3-4 seconds, at i-apply ito sa `.plant` class. Siguraduhing ang animation ay mag-loop infinitely at may easing function para sa natural na galaw.
+**Prompt:** Magdagdag ng CSS keyframe animations upang ang mga halaman sa terrarium ay gumalaw nang banayad mula kaliwa hanggang kanan. Gumawa ng swaying animation na bahagyang nagro-rotate sa bawat halaman (2-3 degrees) pakaliwa at pakanan na may duration na 3-4 seconds, at i-apply ito sa `.plant` class. Siguraduhing ang animation ay mag-loop infinitely at may easing function para sa natural na galaw.
 
 Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
@@ -440,16 +597,16 @@ Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/0
 
 Handa ka na bang pagandahin ang iyong terrarium gamit ang realistic glass reflections? Ang teknik na ito ay magdadagdag ng depth at realism sa disenyo.
 
-Gagawa ka ng banayad na highlights na nag-simulate kung paano nagre-reflect ang ilaw sa mga glass surfaces. Ang approach na ito ay katulad ng kung paano ginamit ng mga Renaissance painters tulad ni Jan van Eyck ang ilaw at reflection para magmukhang three-dimensional ang painted glass. Narito ang iyong layunin:
+Gagawa ka ng subtle highlights na ginagaya kung paano nagre-reflect ang ilaw sa glass surfaces. Ang approach na ito ay kahalintulad ng paraan ng mga pintor noong Renaissance tulad ni Jan van Eyck na gumamit ng ilaw at reflection upang gawing three-dimensional ang painted glass. Narito ang layunin mo:
 
 ![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.tl.png)
 
 **Ang iyong hamon:**
-- **Gumawa** ng banayad na puti o light-colored oval shapes para sa glass reflections
-- **Iposisyon** ang mga ito nang maayos sa kaliwang bahagi ng jar
+- **Gumawa** ng subtle white o light-colored oval shapes para sa glass reflections
+- **I-posisyon** ang mga ito nang maayos sa kaliwang bahagi ng jar
 - **Mag-apply** ng tamang opacity at blur effects para sa realistic na light reflection
-- **Gumamit** ng `border-radius` para makalikha ng organic, bubble-like shapes
-- **Mag-eksperimento** gamit ang gradients o box-shadows para sa mas pinahusay na realism
+- **Gumamit** ng `border-radius` upang lumikha ng organic, bubble-like shapes
+- **Mag-eksperimento** gamit ang gradients o box-shadows para sa mas pinong realism
 
 ## Post-Lecture Quiz
 
@@ -457,24 +614,120 @@ Gagawa ka ng banayad na highlights na nag-simulate kung paano nagre-reflect ang
 
 ## Palawakin ang Iyong Kaalaman sa CSS
 
-Ang CSS ay maaaring mukhang komplikado sa simula, ngunit ang pag-unawa sa mga pangunahing konsepto na ito ay nagbibigay ng matibay na pundasyon para sa mas advanced na mga teknik.
+Ang CSS ay maaaring mukhang komplikado sa simula, ngunit ang pag-unawa sa mga pangunahing konsepto ay nagbibigay ng matibay na pundasyon para sa mas advanced na teknik.
 
 **Ang iyong susunod na mga lugar ng pag-aaral sa CSS:**
 - **Flexbox** - nagpapadali sa alignment at distribution ng mga elemento
-- **CSS Grid** - nagbibigay ng makapangyarihang tools para sa paggawa ng complex layouts
+- **CSS Grid** - nagbibigay ng makapangyarihang tools para sa paggawa ng komplikadong layouts
 - **CSS Variables** - binabawasan ang pag-uulit at pinapabuti ang maintainability
 - **Responsive design** - tinitiyak na gumagana nang maayos ang mga site sa iba't ibang screen sizes
 
 ### Mga Interactive na Learning Resources
 
-Pagpraktisan ang mga konseptong ito gamit ang mga engaging, hands-on na laro:
-- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Masterin ang Flexbox sa pamamagitan ng masayang mga hamon
+Pagpraktisan ang mga konseptong ito gamit ang mga engaging, hands-on games:
+- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Masterin ang Flexbox sa pamamagitan ng masayang hamon
 - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Matutunan ang CSS Grid sa pamamagitan ng pagtatanim ng virtual na carrots
-- 🎯 [CSS Battle](https://cssbattle.dev/) - Subukan ang iyong CSS skills gamit ang coding challenges
+- 🎯 [CSS Battle](https://cssbattle.dev/) - Subukan ang iyong kakayahan sa CSS gamit ang coding challenges
 
 ### Karagdagang Pag-aaral
 
-Para sa komprehensibong CSS fundamentals, kumpletuhin ang Microsoft Learn module na ito: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+Para sa komprehensibong pundasyon sa CSS, kumpletuhin ang Microsoft Learn module na ito: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **Ano ang Pwede Mong Gawin sa Susunod na 5 Minuto**
+- [ ] Buksan ang DevTools at inspeksyunin ang CSS styles sa anumang website gamit ang Elements panel
+- [ ] Gumawa ng simpleng CSS file at i-link ito sa isang HTML page
+- [ ] Subukang baguhin ang mga kulay gamit ang iba't ibang paraan: hex, RGB, at named colors
+- [ ] Pagpraktisan ang box model sa pamamagitan ng pagdaragdag ng padding at margin sa isang div
+
+### 🎯 **Ano ang Pwede Mong Makamit sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at repasuhin ang mga pundasyon ng CSS
+- [ ] I-style ang iyong HTML page gamit ang fonts, colors, at spacing
+- [ ] Gumawa ng simpleng layout gamit ang flexbox o grid
+- [ ] Mag-eksperimento sa CSS transitions para sa smooth effects
+- [ ] Pagpraktisan ang responsive design gamit ang media queries
+
+### 📅 **Ang Iyong Lingguhang CSS Adventure**
+- [ ] Kumpletuhin ang terrarium styling assignment na may creative flair
+- [ ] Masterin ang CSS Grid sa pamamagitan ng paggawa ng photo gallery layout
+- [ ] Matutunan ang CSS animations upang magbigay-buhay sa iyong mga disenyo
+- [ ] Tuklasin ang CSS preprocessors tulad ng Sass o Less
+- [ ] Pag-aralan ang mga prinsipyo ng disenyo at i-apply ang mga ito sa iyong CSS
+- [ ] Suriin at gayahin ang mga kawili-wiling disenyo na makikita mo online
+
+### 🌟 **Ang Iyong Buwanang Paglalakbay sa Pagiging Eksperto sa Disenyo**
+- [ ] Gumawa ng kumpletong responsive website design system
+- [ ] Matutunan ang CSS-in-JS o utility-first frameworks tulad ng Tailwind
+- [ ] Mag-ambag sa mga open source projects gamit ang CSS improvements
+- [ ] Masterin ang advanced na mga konsepto ng CSS tulad ng CSS custom properties at containment
+- [ ] Gumawa ng reusable component libraries gamit ang modular CSS
+- [ ] Magturo sa iba na nag-aaral ng CSS at magbahagi ng kaalaman sa disenyo
+
+## 🎯 Ang Iyong CSS Mastery Timeline
+
+```mermaid
+timeline
+    title CSS Learning Progression
+    
+    section Foundation (10 minutes)
+        File Connection: Link CSS to HTML
+                       : Understand cascade rules
+                       : Learn inheritance basics
+        
+    section Selectors (15 minutes)
+        Targeting Elements: Element selectors
+                          : Class patterns
+                          : ID specificity
+                          : Combinators
+        
+    section Box Model (20 minutes)
+        Layout Fundamentals: Margin and padding
+                           : Border properties
+                           : Content sizing
+                           : Box-sizing behavior
+        
+    section Positioning (25 minutes)
+        Element Placement: Static vs relative
+                         : Absolute positioning
+                         : Z-index layering
+                         : Responsive units
+        
+    section Visual Design (30 minutes)
+        Styling Mastery: Colors and opacity
+                       : Shadows and effects
+                       : Transitions
+                       : Transform properties
+        
+    section Responsive Design (45 minutes)
+        Multi-Device Support: Media queries
+                            : Flexible layouts
+                            : Mobile-first approach
+                            : Viewport optimization
+        
+    section Advanced Techniques (1 week)
+        Modern CSS: Flexbox layouts
+                  : CSS Grid systems
+                  : Custom properties
+                  : Animation keyframes
+        
+    section Professional Skills (1 month)
+        CSS Architecture: Component patterns
+                        : Maintainable code
+                        : Performance optimization
+                        : Cross-browser compatibility
+```
+
+### 🛠️ Buod ng Iyong CSS Toolkit
+
+Pagkatapos ng lesson na ito, mayroon ka na:
+- **Pag-unawa sa Cascade**: Paano nagmamana at nag-o-override ang mga style
+- **Mastery sa Selector**: Tumpak na pag-target gamit ang elements, classes, at IDs
+- **Kakayahan sa Positioning**: Estratehikong paglalagay at pag-layer ng mga elemento
+- **Visual Design**: Paglikha ng glass effects, shadows, at transparency
+- **Responsive Techniques**: Percentage-based layouts na nag-a-adapt sa anumang screen
+- **Organisasyon ng Code**: Malinis, maayos na istruktura ng CSS
+- **Modern Practices**: Paggamit ng relative units at accessible design patterns
+
+**Susunod na Hakbang**: Ang iyong terrarium ay mayroon nang istruktura (HTML) at estilo (CSS). Ang huling lesson ay magdadagdag ng interactivity gamit ang JavaScript!
 
 ## Assignment
 
diff --git a/translations/tl/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/tl/3-terrarium/3-intro-to-DOM-and-closures/README.md
index b15ebdaf11..6fbe9b9fbf 100644
--- a/translations/tl/3-terrarium/3-intro-to-DOM-and-closures/README.md
+++ b/translations/tl/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -1,22 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "bc93f6285423033ebf5b8abeb5282888",
-  "translation_date": "2025-10-22T15:30:14+00:00",
+  "original_hash": "973e48ad87d67bf5bb819746c9f8e302",
+  "translation_date": "2025-11-03T13:55:32+00:00",
   "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
   "language_code": "tl"
 }
 -->
 # Terrarium Project Part 3: Manipulasyon ng DOM at JavaScript Closures
 
+```mermaid
+journey
+    title Your JavaScript DOM Journey
+    section Foundation
+      Understand DOM: 3: Student
+      Learn closures: 4: Student
+      Connect elements: 4: Student
+    section Interaction
+      Setup drag events: 4: Student
+      Track coordinates: 5: Student
+      Handle movement: 5: Student
+    section Polish
+      Add cleanup: 4: Student
+      Test functionality: 5: Student
+      Complete terrarium: 5: Student
+```
+
 ![DOM at isang closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.tl.png)
 > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
 
-Maligayang pagdating sa isa sa mga pinaka-kapanapanabik na aspeto ng web development - ang paggawa ng mga bagay na interactive! Ang Document Object Model (DOM) ay parang tulay sa pagitan ng iyong HTML at JavaScript, at ngayon gagamitin natin ito upang buhayin ang iyong terrarium. Nang likhain ni Tim Berners-Lee ang unang web browser, inisip niya ang isang web kung saan ang mga dokumento ay maaaring maging dynamic at interactive - ang DOM ang gumagawa ng pangitain na iyon.
+Maligayang pagdating sa isa sa mga pinaka-kapanapanabik na aspeto ng web development - ang paggawa ng mga bagay na interactive! Ang Document Object Model (DOM) ay parang tulay sa pagitan ng iyong HTML at JavaScript, at ngayon gagamitin natin ito upang buhayin ang iyong terrarium. Nang likhain ni Tim Berners-Lee ang unang web browser, inisip niya ang isang web kung saan ang mga dokumento ay maaaring maging dynamic at interactive - ang DOM ang nagpapaganap ng pangitain na iyon.
 
 Pag-aaralan din natin ang JavaScript closures, na maaaring mukhang nakakatakot sa simula. Isipin ang closures bilang paglikha ng "memory pockets" kung saan ang iyong mga function ay maaaring magtanda ng mahalagang impormasyon. Parang bawat halaman sa iyong terrarium ay may sariling talaan ng data upang subaybayan ang posisyon nito. Sa pagtatapos ng araling ito, maiintindihan mo kung gaano sila ka-natural at kapaki-pakinabang.
 
-Narito ang ating gagawin: isang terrarium kung saan maaaring i-drag at i-drop ng mga user ang mga halaman kahit saan nila gusto. Matutunan mo ang mga teknik sa manipulasyon ng DOM na nagpapagana sa lahat mula sa drag-and-drop file uploads hanggang sa mga interactive na laro. Gawin nating buhay ang iyong terrarium.
+Narito ang ating gagawin: isang terrarium kung saan maaaring i-drag at i-drop ng mga user ang mga halaman kahit saan nila gusto. Matutunan mo ang mga teknik sa manipulasyon ng DOM na ginagamit sa lahat mula sa drag-and-drop file uploads hanggang sa mga interactive na laro. Gawin nating buhay ang iyong terrarium.
+
+```mermaid
+mindmap
+  root((DOM & JavaScript))
+    DOM Tree
+      Element Selection
+      Property Access
+      Event Handling
+      Dynamic Updates
+    Events
+      Pointer Events
+      Mouse Events
+      Touch Events
+      Event Listeners
+    Closures
+      Private Variables
+      Function Scope
+      Memory Persistence
+      State Management
+    Drag & Drop
+      Position Tracking
+      Coordinate Math
+      Event Lifecycle
+      User Interaction
+    Modern Patterns
+      Event Delegation
+      Performance
+      Cross-Device
+      Accessibility
+```
 
 ## Pre-Lecture Quiz
 
@@ -24,9 +71,39 @@ Narito ang ating gagawin: isang terrarium kung saan maaaring i-drag at i-drop ng
 
 ## Pag-unawa sa DOM: Ang Iyong Gateway sa Interactive na Mga Web Page
 
-Ang Document Object Model (DOM) ang paraan ng JavaScript upang makipag-usap sa iyong mga elemento ng HTML. Kapag nag-load ang iyong browser ng isang HTML page, lumilikha ito ng isang structured na representasyon ng page na iyon sa memorya - iyon ang DOM. Isipin ito bilang isang family tree kung saan ang bawat elemento ng HTML ay isang miyembro ng pamilya na maaaring ma-access, mabago, o maayos ng JavaScript.
+Ang Document Object Model (DOM) ang paraan ng JavaScript upang makipag-usap sa iyong mga elemento ng HTML. Kapag nag-load ang iyong browser ng isang HTML page, gumagawa ito ng isang structured na representasyon ng page na iyon sa memorya - iyon ang DOM. Isipin ito bilang isang family tree kung saan ang bawat elemento ng HTML ay isang miyembro ng pamilya na maaaring ma-access, mabago, o maayos ng JavaScript.
+
+Ang manipulasyon ng DOM ang nagbabago ng mga static na page sa mga interactive na website. Sa tuwing makikita mo ang isang button na nagbabago ng kulay kapag hinover, content na nag-a-update nang hindi nagre-refresh ang page, o mga elementong maaaring i-drag, iyon ang manipulasyon ng DOM na gumagana.
 
-Ang manipulasyon ng DOM ang nagbabago sa mga static na page upang maging interactive na mga website. Tuwing makikita mo ang isang button na nagbabago ng kulay kapag hinover, content na nag-a-update nang hindi nagre-refresh ang page, o mga elementong maaaring i-drag, iyon ang manipulasyon ng DOM na gumagana.
+```mermaid
+flowchart TD
+    A["Document"] --> B["HTML"]
+    B --> C["Head"]
+    B --> D["Body"]
+    C --> E["Title"]
+    C --> F["Meta Tags"]
+    D --> G["H1: My Terrarium"]
+    D --> H["Div: Page Container"]
+    H --> I["Div: Left Container"]
+    H --> J["Div: Right Container"]
+    H --> K["Div: Terrarium"]
+    I --> L["Plant Elements 1-7"]
+    J --> M["Plant Elements 8-14"]
+    
+    L --> N["img#plant1"]
+    L --> O["img#plant2"]
+    M --> P["img#plant8"]
+    M --> Q["img#plant9"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style D fill:#e8f5e8
+    style H fill:#fff3e0
+    style N fill:#ffebee
+    style O fill:#ffebee
+    style P fill:#ffebee
+    style Q fill:#ffebee
+```
 
 ![Representasyon ng DOM tree](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.tl.png)
 
@@ -40,29 +117,56 @@ Ang manipulasyon ng DOM ang nagbabago sa mga static na page upang maging interac
 
 ## JavaScript Closures: Paglikha ng Organisado at Makapangyarihang Code
 
-Ang [JavaScript closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ay parang pagbibigay sa isang function ng sarili nitong pribadong workspace na may persistent memory. Isipin ang mga finch ni Darwin sa Galápagos Islands na bawat isa ay nagkaroon ng specialized na tuka batay sa kanilang partikular na kapaligiran - ang closures ay gumagana nang katulad, lumilikha ng mga specialized na function na "natatandaan" ang kanilang partikular na konteksto kahit matapos ang parent function.
+Ang [JavaScript closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ay parang pagbibigay sa isang function ng sarili nitong pribadong workspace na may persistent memory. Isipin kung paano ang mga finch ni Darwin sa Galápagos Islands ay nagkaroon ng specialized na mga tuka batay sa kanilang partikular na kapaligiran - ang closures ay gumagana nang katulad, lumilikha ng mga specialized na function na "nagtatanda" ng kanilang partikular na konteksto kahit na matapos ang kanilang parent function.
 
-Sa ating terrarium, ang closures ang tumutulong sa bawat halaman na matandaan ang sarili nitong posisyon nang independiyente. Ang pattern na ito ay makikita sa buong propesyonal na JavaScript development, kaya mahalagang maunawaan ito.
+Sa ating terrarium, ang closures ay tumutulong sa bawat halaman na matandaan ang sarili nitong posisyon nang independyente. Ang pattern na ito ay makikita sa buong propesyonal na pag-develop ng JavaScript, kaya't mahalagang maunawaan ito.
 
-> 💡 **Pag-unawa sa Closures**: Ang closures ay isang mahalagang paksa sa JavaScript, at maraming developer ang gumagamit nito sa loob ng maraming taon bago lubos na maunawaan ang lahat ng teoretikal na aspeto. Ngayon, magpo-focus tayo sa praktikal na aplikasyon - makikita mo ang closures na natural na lumilitaw habang binubuo natin ang mga interactive na feature. Ang pag-unawa ay lalalim habang nakikita mo kung paano nila nilulutas ang mga totoong problema.
+```mermaid
+flowchart LR
+    A["dragElement(plant1)"] --> B["Creates Closure"]
+    A2["dragElement(plant2)"] --> B2["Creates Closure"]
+    
+    B --> C["Private Variables"]
+    B2 --> C2["Private Variables"]
+    
+    C --> D["pos1, pos2, pos3, pos4"]
+    C --> E["pointerDrag function"]
+    C --> F["elementDrag function"]
+    C --> G["stopElementDrag function"]
+    
+    C2 --> D2["pos1, pos2, pos3, pos4"]
+    C2 --> E2["pointerDrag function"]
+    C2 --> F2["elementDrag function"]
+    C2 --> G2["stopElementDrag function"]
+    
+    H["Plant 1 remembers its position"] --> B
+    H2["Plant 2 remembers its position"] --> B2
+    
+    style B fill:#e8f5e8
+    style B2 fill:#e8f5e8
+    style C fill:#fff3e0
+    style C2 fill:#fff3e0
+```
+
+> 💡 **Pag-unawa sa Closures**: Ang closures ay isang mahalagang paksa sa JavaScript, at maraming developer ang gumagamit nito sa loob ng maraming taon bago lubos na maunawaan ang lahat ng teoretikal na aspeto. Ngayon, magpo-focus tayo sa praktikal na aplikasyon - makikita mo ang closures na natural na lumilitaw habang binubuo natin ang ating mga interactive na feature. Ang pag-unawa ay lalago habang nakikita mo kung paano nila nilulutas ang mga totoong problema.
 
 ![Representasyon ng DOM tree](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.tl.png)
 
 > Isang representasyon ng DOM at ang HTML markup na tumutukoy dito. Mula kay [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
 
-Sa araling ito, tatapusin natin ang ating interactive na terrarium project sa pamamagitan ng paglikha ng JavaScript na magpapahintulot sa user na manipulahin ang mga halaman sa page.
+Sa araling ito, tatapusin natin ang ating interactive na terrarium project sa pamamagitan ng paglikha ng JavaScript na magpapahintulot sa isang user na manipulahin ang mga halaman sa page.
 
 ## Bago Tayo Magsimula: Paghahanda para sa Tagumpay
 
-Kakailanganin mo ang iyong HTML at CSS files mula sa mga nakaraang aralin sa terrarium - gagawin nating interactive ang static na disenyo na iyon. Kung ngayon ka lang sasali, ang pagkompleto sa mga araling iyon muna ay magbibigay ng mahalagang konteksto.
+Kakailanganin mo ang iyong mga HTML at CSS file mula sa mga nakaraang aralin sa terrarium - gagawin nating interactive ang static na disenyo na iyon. Kung ngayon ka lang sumali, ang pagkompleto sa mga araling iyon muna ay magbibigay ng mahalagang konteksto.
 
 Narito ang ating gagawin:
 - **Smooth drag-and-drop** para sa lahat ng halaman sa terrarium
 - **Coordinate tracking** upang matandaan ng mga halaman ang kanilang mga posisyon
 - **Isang kumpletong interactive na interface** gamit ang vanilla JavaScript
-- **Malinis at organisadong code** gamit ang closure patterns
+- **Malinis, organisadong code** gamit ang closure patterns
 
-## Pagsisimula ng Iyong JavaScript File
+## Pag-set Up ng Iyong JavaScript File
 
 Gumawa tayo ng JavaScript file na magpapainteractive sa iyong terrarium.
 
@@ -72,7 +176,7 @@ Sa iyong terrarium folder, gumawa ng bagong file na tinatawag na `script.js`.
 
 **Hakbang 2: I-link ang JavaScript sa iyong HTML**
 
-Idagdag ang script tag na ito sa `<head>` section ng iyong `index.html` file:
+Idagdag ang script tag na ito sa seksyon ng `<head>` ng iyong `index.html` file:
 
 ```html
 <script src="./script.js" defer></script>
@@ -80,11 +184,11 @@ Idagdag ang script tag na ito sa `<head>` section ng iyong `index.html` file:
 
 **Bakit mahalaga ang `defer` attribute:**
 - **Tinitiyak** na ang iyong JavaScript ay maghihintay hanggang sa ma-load ang lahat ng HTML
-- **Pinipigilan** ang mga error kung saan ang JavaScript ay naghahanap ng mga elementong hindi pa handa
+- **Iniiwasan** ang mga error kung saan hinahanap ng JavaScript ang mga elementong hindi pa handa
 - **Tinitiyak** na ang lahat ng iyong mga elemento ng halaman ay available para sa interaksyon
-- **Nagbibigay** ng mas mahusay na performance kaysa sa paglalagay ng mga script sa ilalim ng page
+- **Nagbibigay** ng mas mahusay na performance kaysa sa paglalagay ng mga script sa ibaba ng page
 
-> ⚠️ **Mahalagang Paalala**: Ang `defer` attribute ay pumipigil sa mga karaniwang timing issues. Kung wala ito, maaaring subukan ng JavaScript na ma-access ang mga elemento ng HTML bago sila ma-load, na nagdudulot ng mga error.
+> ⚠️ **Mahalagang Paalala**: Ang `defer` attribute ay pumipigil sa mga karaniwang timing issues. Kung wala ito, maaaring subukan ng JavaScript na i-access ang mga elemento ng HTML bago sila ma-load, na nagdudulot ng mga error.
 
 ---
 
@@ -123,21 +227,31 @@ dragElement(document.getElementById('plant14'));
 - **Ipinaghahanda** ang bawat halaman para sa drag-and-drop interaction
 - **Kinokonekta** ang iyong HTML structure sa JavaScript functionality
 
-> 🎯 **Bakit Gamitin ang IDs sa Halip na Classes?** Ang IDs ay nagbibigay ng natatanging identifier para sa mga partikular na elemento, habang ang CSS classes ay idinisenyo para sa pag-style ng mga grupo ng elemento. Kapag kailangang manipulahin ng JavaScript ang mga indibidwal na elemento, ang IDs ang nagbibigay ng precision at performance na kailangan natin.
+> 🎯 **Bakit Gamitin ang IDs Imbes na Classes?** Ang IDs ay nagbibigay ng natatanging identifier para sa mga partikular na elemento, habang ang CSS classes ay idinisenyo para sa pag-style ng mga grupo ng elemento. Kapag kailangang manipulahin ng JavaScript ang mga indibidwal na elemento, ang IDs ang nagbibigay ng precision at performance na kailangan natin.
+
+> 💡 **Pro Tip**: Pansinin kung paano natin tinatawag ang `dragElement()` para sa bawat halaman nang paisa-isa. Ang approach na ito ay tinitiyak na ang bawat halaman ay magkakaroon ng sarili nitong independent na dragging behavior, na mahalaga para sa smooth na interaksyon ng user.
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Koneksyon ng DOM**: Bago lumipat sa drag functionality, tiyaking kaya mong:
+- ✅ Ipaliwanag kung paano hinahanap ng `document.getElementById()` ang mga elemento ng HTML
+- ✅ Unawain kung bakit gumagamit tayo ng natatanging IDs para sa bawat halaman
+- ✅ Ilarawan ang layunin ng `defer` attribute sa script tags
+- ✅ Kilalanin kung paano kumokonekta ang JavaScript at HTML sa pamamagitan ng DOM
 
-> 💡 **Pro Tip**: Pansinin kung paano natin tinatawag ang `dragElement()` para sa bawat halaman nang paisa-isa. Ang approach na ito ay tinitiyak na ang bawat halaman ay magkakaroon ng sarili nitong independiyenteng dragging behavior, na mahalaga para sa smooth na interaksyon ng user.
+**Quick Self-Test**: Ano ang mangyayari kung dalawang elemento ay may parehong ID? Bakit ang `getElementById()` ay nagbabalik lamang ng isang elemento?
+*Sagot: Ang IDs ay dapat natatangi; kung may duplicate, ang unang elemento lamang ang ibinabalik*
 
 ---
 
 ## Pagbuo ng Drag Element Closure
 
-Ngayon gagawin natin ang puso ng ating dragging functionality: isang closure na mag-aasikaso sa dragging behavior para sa bawat halaman. Ang closure na ito ay maglalaman ng maraming inner functions na magtutulungan upang subaybayan ang mga galaw ng mouse at i-update ang mga posisyon ng elemento.
+Ngayon gagawin natin ang puso ng ating dragging functionality: isang closure na magpapatakbo ng dragging behavior para sa bawat halaman. Ang closure na ito ay maglalaman ng maraming inner functions na magtutulungan upang subaybayan ang mga galaw ng mouse at i-update ang mga posisyon ng elemento.
 
-Ang closures ay perpekto para sa task na ito dahil pinapayagan nila tayong lumikha ng "pribadong" mga variable na nagpapatuloy sa pagitan ng mga tawag sa function, na nagbibigay sa bawat halaman ng sarili nitong independiyenteng sistema ng coordinate tracking.
+Ang closures ay perpekto para sa gawaing ito dahil pinapayagan nila tayong lumikha ng "pribadong" mga variable na nagpapatuloy sa pagitan ng mga tawag sa function, na nagbibigay sa bawat halaman ng sarili nitong independent na sistema ng pagsubaybay sa coordinate.
 
 ### Pag-unawa sa Closures gamit ang Simpleng Halimbawa
 
-Hayaan akong ipakita ang closures gamit ang simpleng halimbawa na naglalarawan ng konsepto:
+Hayaan akong ipakita ang closures gamit ang isang simpleng halimbawa na naglalarawan ng konsepto:
 
 ```javascript
 function createCounter() {
@@ -160,23 +274,51 @@ console.log(myCounter()); // 2
 - **Lumilikha** ng pribadong `count` variable na umiiral lamang sa loob ng closure na ito
 - **Ang inner function** ay maaaring ma-access at mabago ang outer variable (ang mekanismo ng closure)
 - **Kapag ibinalik natin** ang inner function, pinapanatili nito ang koneksyon sa pribadong data na iyon
-- **Kahit matapos** ang `createCounter()` na tapusin ang execution, nananatili ang `count` at natatandaan ang halaga nito
+- **Kahit matapos** ang `createCounter()` na tapusin ang execution, ang `count` ay nagpapatuloy at natatandaan ang halaga nito
 
 ### Bakit Perpekto ang Closures para sa Drag Functionality
 
-Para sa ating terrarium, kailangang matandaan ng bawat halaman ang kasalukuyang coordinate nito. Ang closures ang nagbibigay ng perpektong solusyon:
+Para sa ating terrarium, kailangang matandaan ng bawat halaman ang kasalukuyang posisyon ng mga coordinate nito. Ang closures ang nagbibigay ng perpektong solusyon:
 
 **Mga pangunahing benepisyo para sa ating proyekto:**
-- **Pinapanatili** ang pribadong position variables para sa bawat halaman nang independiyente
+- **Pinapanatili** ang pribadong position variables para sa bawat halaman nang independyente
 - **Pinapanatili** ang coordinate data sa pagitan ng mga drag events
-- **Pinipigilan** ang variable conflicts sa pagitan ng iba't ibang draggable elements
-- **Lumilikha** ng malinis at organisadong code structure
+- **Pinipigilan** ang mga conflict ng variable sa pagitan ng iba't ibang draggable elements
+- **Lumilikha** ng malinis, organisadong code structure
 
 > 🎯 **Layunin sa Pag-aaral**: Hindi mo kailangang ma-master ang bawat aspeto ng closures ngayon. Mag-focus sa kung paano nila tinutulungan tayong mag-organisa ng code at magpanatili ng state para sa ating dragging functionality.
 
+```mermaid
+stateDiagram-v2
+    [*] --> Ready: Page loads
+    Ready --> DragStart: User presses down (pointerdown)
+    DragStart --> Dragging: Mouse/finger moves (pointermove)
+    Dragging --> Dragging: Continue moving
+    Dragging --> DragEnd: User releases (pointerup)
+    DragEnd --> Ready: Reset for next drag
+    
+    state DragStart {
+        [*] --> CapturePosition
+        CapturePosition --> SetupListeners
+        SetupListeners --> [*]
+    }
+    
+    state Dragging {
+        [*] --> CalculateMovement
+        CalculateMovement --> UpdatePosition
+        UpdatePosition --> [*]
+    }
+    
+    state DragEnd {
+        [*] --> RemoveListeners
+        RemoveListeners --> CleanupState
+        CleanupState --> [*]
+    }
+```
+
 ### Paglikha ng dragElement Function
 
-Ngayon buuin natin ang pangunahing function na mag-aasikaso sa lahat ng dragging logic. Idagdag ang function na ito sa ibaba ng iyong plant element declarations:
+Ngayon, buuin natin ang pangunahing function na magpapatakbo ng lahat ng logic sa dragging. Idagdag ang function na ito sa ibaba ng iyong mga deklarasyon ng elemento ng halaman:
 
 ```javascript
 function dragElement(terrariumElement) {
@@ -191,8 +333,8 @@ function dragElement(terrariumElement) {
 }
 ```
 
-**Pag-unawa sa sistema ng position tracking:**
-- **`pos1` at `pos2`**: Nag-iimbak ng pagkakaiba sa pagitan ng lumang at bagong mouse positions
+**Pag-unawa sa sistema ng pagsubaybay sa posisyon:**
+- **`pos1` at `pos2`**: Nag-iimbak ng pagkakaiba sa pagitan ng lumang at bagong posisyon ng mouse
 - **`pos3` at `pos4`**: Nagta-track ng kasalukuyang mouse coordinates
 - **`terrariumElement`**: Ang partikular na elemento ng halaman na ginagawa nating draggable
 - **`onpointerdown`**: Ang event na nagti-trigger kapag sinimulan ng user ang pag-drag
@@ -200,32 +342,45 @@ function dragElement(terrariumElement) {
 **Narito kung paano gumagana ang pattern ng closure:**
 - **Lumilikha** ng pribadong position variables para sa bawat elemento ng halaman
 - **Pinapanatili** ang mga variable na ito sa buong lifecycle ng dragging
-- **Tinitiyak** na ang bawat halaman ay nagta-track ng sarili nitong coordinates nang independiyente
+- **Tinitiyak** na ang bawat halaman ay nagta-track ng sarili nitong mga coordinate nang independyente
 - **Nagbibigay** ng malinis na interface sa pamamagitan ng `dragElement` function
 
-### Bakit Gamitin ang Pointer Events?
+### Bakit Gumamit ng Pointer Events?
 
-Maaaring magtaka ka kung bakit natin ginagamit ang `onpointerdown` sa halip na ang mas pamilyar na `onclick`. Narito ang paliwanag:
+Maaaring magtanong ka kung bakit natin ginagamit ang `onpointerdown` imbes na ang mas pamilyar na `onclick`. Narito ang paliwanag:
 
 | Uri ng Event | Pinakamahusay Para sa | Ang Catch |
 |--------------|-----------------------|-----------|
-| `onclick` | Simpleng pag-click ng button | Hindi kayang mag-handle ng dragging (click lang at release) |
+| `onclick` | Simpleng pag-click ng button | Hindi kayang hawakan ang dragging (click lang at release) |
 | `onpointerdown` | Parehong mouse at touch | Mas bago, pero suportado na ngayon |
 | `onmousedown` | Desktop mouse lang | Hindi kasama ang mga mobile user |
 
 **Bakit perpekto ang pointer events para sa ating ginagawa:**
-- **Maganda ang performance** kahit gumamit ng mouse, daliri, o stylus
+- **Gumagana nang mahusay** kahit gumagamit ng mouse, daliri, o stylus
 - **Pareho ang pakiramdam** sa laptop, tablet, o phone
-- **Nagha-handle** ng aktwal na galaw ng dragging (hindi lang click-and-done)
+- **Hinahawakan** ang aktwal na galaw ng dragging (hindi lang click-and-done)
 - **Lumilikha** ng smooth na karanasan na inaasahan ng mga user mula sa modernong web apps
 
-> 💡 **Pag-iwas sa Problema sa Hinaharap**: Ang pointer events ang modernong paraan upang mag-handle ng user interactions. Sa halip na magsulat ng hiwalay na code para sa mouse at touch, makukuha mo ang pareho nang libre. Ang galing, di ba?
+> 💡 **Pagpapahusay sa Hinaharap**: Ang pointer events ang modernong paraan upang hawakan ang mga interaksyon ng user. Imbes na magsulat ng hiwalay na code para sa mouse at touch, makukuha mo ang pareho nang libre. Ang galing, di ba?
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Event Handling**: Mag-pause upang kumpirmahin ang iyong pagkaunawa sa mga events:
+- ✅ Bakit natin ginagamit ang pointer events imbes na mouse events?
+- ✅ Paano nagpapatuloy ang mga closure variables sa pagitan ng mga tawag sa function?
+- ✅ Anong papel ang ginagampanan ng `preventDefault()` sa smooth na dragging?
+- ✅ Bakit natin ikinakabit ang mga listener sa dokumento imbes na sa mga indibidwal na elemento?
+
+**Real-World Connection**: Isipin ang mga drag-and-drop interface na ginagamit mo araw-araw:
+- **File uploads**: Pag-drag ng mga file sa isang browser window
+- **Kanban boards**: Paglipat ng mga task sa pagitan ng mga column
+- **Image galleries**: Pag-aayos ng pagkakasunod-sunod ng mga larawan
+- **Mobile interfaces**: Pag-swipe at pag-drag sa mga touchscreen
 
 ---
 
-## Ang pointerDrag Function: Pagkuha ng Simula ng Drag
+## Ang pointerDrag Function: Pagkuha ng Simula ng Isang Drag
 
-Kapag pinindot ng user ang isang halaman (gamit ang mouse click o finger touch), ang `pointerDrag` function ang gumagana. Ang function na ito ang kumukuha ng initial coordinates at nagse-set up ng dragging system.
+Kapag pinindot ng user ang isang halaman (gamit ang mouse click o finger touch), ang `pointerDrag` function ay agad na gumagana. Ang function na ito ay kumukuha ng initial coordinates at nagse-set up ng dragging system.
 
 Idagdag ang function na ito sa loob ng iyong `dragElement` closure, pagkatapos ng linya na `terrariumElement.onpointerdown = pointerDrag;`:
 
@@ -247,8 +402,8 @@ function pointerDrag(e) {
 **Hakbang-hakbang, narito ang nangyayari:**
 - **Pinipigilan** ang default na browser behaviors na maaaring makasagabal sa dragging
 - **Nire-record** ang eksaktong coordinates kung saan sinimulan ng user ang drag gesture
-- **Nag-eestablish** ng event listeners para sa patuloy na galaw ng drag
-- **Ipinaghahanda** ang sistema upang mag-track ng galaw ng mouse/finger sa buong dokumento
+- **Nagse-set up** ng event listeners para sa patuloy na galaw ng drag
+- **Ipinaghahanda** ang sistema upang mag-track ng galaw ng mouse/daliri sa buong dokumento
 
 ### Pag-unawa sa Event Prevention
 
@@ -257,48 +412,47 @@ Ang linya na `e.preventDefault()` ay mahalaga para sa smooth na dragging:
 **Kung walang prevention, maaaring:**
 - **Mag-select** ng text kapag nag-drag sa page
 - **Mag-trigger** ng context menus sa right-click drag
-- **Makialam** sa custom na dragging behavior natin
+- **Makialam** sa ating custom na dragging behavior
 - **Lumikha** ng visual artifacts sa panahon ng drag operation
 
-> 🔍 **Eksperimento**: Pagkatapos tapusin ang araling ito, subukang tanggalin ang `e.preventDefault()` at tingnan kung paano nito naaapektuhan ang dragging experience. Mabilis mong mauunawaan kung bakit mahalaga ang linyang ito!
+> 🔍 **Eksperimento**: Pagkatapos ng araling ito, subukang tanggalin ang `e.preventDefault()` at tingnan kung paano nito naaapektuhan ang dragging experience. Mabilis mong mauunawaan kung bakit mahalaga ang linyang ito!
 
-### Sistema ng Coordinate Tracking
+### Sistema ng Pagsubaybay sa Coordinate
 
-Ang `e.clientX` at `e.clientY` properties ang nagbibigay sa atin ng eksaktong mouse/touch coordinates:
+Ang mga property na `e.clientX` at `e.clientY` ay nagbibigay sa atin ng eksaktong mouse/touch coordinates:
 
 | Property | Ano ang Sinusukat | Gamit |
 |----------|-------------------|-------|
-| `clientX` | Horizontal na posisyon kaugnay ng viewport | Pag-track ng galaw pakaliwa-pakanan |
-| `clientY` | Vertical na posisyon kaugnay ng viewport | Pag-track ng galaw pataas-pababa |
-
-**Pag-unawa sa mga coordinates na ito:**
+| `clientX` | Posisyon sa horizontal na may kaugnayan sa viewport | Pagsubaybay sa galaw pakaliwa-pakanan |
+| `clientY` | Posisyon sa vertical na may kaugnayan sa viewport | Pagsubaybay sa galaw pataas-pababa |
+**Pag-unawa sa mga koordinato:**
 - **Nagbibigay** ng pixel-perfect na impormasyon sa posisyon
 - **Nag-a-update** nang real-time habang gumagalaw ang pointer ng user
-- **Nanatili** na pare-pareho sa iba't ibang screen sizes at zoom levels
-- **Nagpapahintulot** ng smooth, responsive na drag interactions
+- **Nanatiling** pare-pareho sa iba't ibang laki ng screen at antas ng zoom
+- **Nagpapagana** ng makinis at tumutugong drag interactions
 
 ### Pag-set Up ng Document-Level Event Listeners
 
-Pansinin kung paano natin ina-attach ang move at stop events sa buong `document`, hindi lang sa elemento ng halaman:
+Pansinin kung paano natin ikinakabit ang move at stop events sa buong `document`, hindi lamang sa plant element:
 
 ```javascript
 document.onpointermove = elementDrag;
 document.onpointerup = stopElementDrag;
 ```
 
-**Bakit i-attach sa document:**
-- **Nagpapatuloy** sa pag-track kahit lumabas ang mouse sa elemento ng halaman
-- **Pinipigilan** ang pagputol ng drag kung mabilis gumalaw ang user
-- **Nagbibigay** ng smooth na dragging sa buong screen
-- **Nagha-handle** ng edge cases kung saan lumalabas ang cursor sa browser window
+**Bakit ikabit sa document:**
+- **Patuloy** na sinusubaybayan kahit lumabas ang mouse sa plant element
+- **Pinipigilan** ang pagkaantala ng drag kung mabilis gumalaw ang user
+- **Nagbibigay** ng makinis na pag-drag sa buong screen
+- **Hinahawakan** ang mga edge case kung saan lumalabas ang cursor sa window ng browser
 
-> ⚡ **Tandaan sa Performance**: Lilinisin natin ang mga document-level listeners kapag natapos ang dragging upang maiwasan ang memory leaks at performance issues.
+> ⚡ **Tandaan sa Performance**: Lilinisin natin ang mga document-level listeners kapag tumigil ang pag-drag upang maiwasan ang memory leaks at mga isyu sa performance.
 
-## Pagtatapos ng Drag System: Galaw at Cleanup
+## Pagkumpleto sa Drag System: Movement at Cleanup
 
-Ngayon idadagdag natin ang dalawang natitirang functions na humahawak sa aktwal na galaw ng dragging at ang cleanup kapag natapos ang dragging. Ang mga functions na ito ay nagtutulungan upang lumikha ng smooth, responsive na galaw ng halaman sa iyong terrarium.
+Ngayon, idadagdag natin ang dalawang natitirang function na humahawak sa aktwal na paggalaw ng drag at ang cleanup kapag tumigil ang pag-drag. Ang mga function na ito ay nagtutulungan upang lumikha ng makinis at tumutugong paggalaw ng halaman sa iyong terrarium.
 
-### Ang elementDrag Function: Pag-track ng Galaw
+### Ang elementDrag Function: Pagsubaybay sa Paggalaw
 
 Idagdag ang `elementDrag` function pagkatapos ng closing curly bracket ng `pointerDrag`:
 
@@ -319,18 +473,42 @@ function elementDrag(e) {
 ```
 
 **Pag-unawa sa coordinate mathematics:**
-- **`pos1` at `pos2`**: Kinakalkula kung gaano kalayo ang galaw ng mouse mula sa huling update
-- **`pos3` at `pos4`**: Iniimbak ang kasalukuyang posisyon ng mouse para sa susunod na kalkulasyon  
-- **`offsetTop` at `offsetLeft`**: Kinukuha ang kasalukuyang posisyon ng elemento sa pahina  
-- **Lohikang pagbabawas**: Inililipat ang elemento sa parehong distansya na nilakbay ng mouse  
+- **`pos1` at `pos2`**: Kinakalkula kung gaano kalayo ang mouse mula sa huling update
+- **`pos3` at `pos4`**: Iniimbak ang kasalukuyang posisyon ng mouse para sa susunod na kalkulasyon
+- **`offsetTop` at `offsetLeft`**: Kinukuha ang kasalukuyang posisyon ng elemento sa pahina
+- **Subtraction logic**: Inililipat ang elemento sa parehong dami ng paggalaw ng mouse
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    User->>Mouse: Start drag at (100, 50)
+    Mouse->>JavaScript: pointerdown event
+    JavaScript->>JavaScript: Store initial position (pos3=100, pos4=50)
+    JavaScript->>JavaScript: Setup move/up listeners
+    
+    User->>Mouse: Move to (110, 60)
+    Mouse->>JavaScript: pointermove event
+    JavaScript->>JavaScript: Calculate: pos1=10, pos2=10
+    JavaScript->>Plant: Update: left += 10px, top += 10px
+    Plant->>Plant: Render at new position
+    
+    User->>Mouse: Release at (120, 65)
+    Mouse->>JavaScript: pointerup event
+    JavaScript->>JavaScript: Remove listeners
+    JavaScript->>JavaScript: Reset for next drag
+```
 
-**Narito ang breakdown ng kalkulasyon ng paggalaw:**  
-1. **Sinusukat** ang pagkakaiba sa pagitan ng lumang at bagong posisyon ng mouse  
-2. **Kinakalkula** kung gaano kalayo ang ililipat ng elemento base sa galaw ng mouse  
-3. **Ina-update** ang mga CSS position properties ng elemento nang real-time  
-4. **Iniimbak** ang bagong posisyon bilang baseline para sa susunod na kalkulasyon ng paggalaw  
+**Narito ang breakdown ng kalkulasyon ng paggalaw:**
+1. **Sinusukat** ang pagkakaiba sa pagitan ng lumang at bagong posisyon ng mouse
+2. **Kinakalkula** kung gaano kalayo ang ililipat ang elemento batay sa paggalaw ng mouse
+3. **Ina-update** ang CSS position properties ng elemento nang real-time
+4. **Iniimbak** ang bagong posisyon bilang baseline para sa susunod na kalkulasyon ng paggalaw
 
-### Visual na Representasyon ng Matematika  
+### Visual na Representasyon ng Math
 
 ```mermaid
 sequenceDiagram
@@ -343,10 +521,10 @@ sequenceDiagram
     JavaScript->>Plant: Update position by +10px right, +10px down
     Plant->>Plant: Render at new position
 ```
-  
-### Ang stopElementDrag Function: Paglilinis  
 
-Idagdag ang cleanup function pagkatapos ng closing curly bracket ng `elementDrag`:  
+### Ang stopElementDrag Function: Paglilinis
+
+Idagdag ang cleanup function pagkatapos ng closing curly bracket ng `elementDrag`:
 
 ```javascript
 function stopElementDrag() {
@@ -355,136 +533,245 @@ function stopElementDrag() {
     document.onpointermove = null;
 }
 ```
-  
-**Bakit mahalaga ang cleanup:**  
-- **Pinipigilan** ang memory leaks mula sa mga event listener na naiwan  
-- **Itinitigil** ang dragging behavior kapag binitiwan ng user ang halaman  
-- **Pinapayagan** ang ibang elemento na ma-drag nang hiwalay  
-- **Ire-reset** ang sistema para sa susunod na drag operation  
 
-**Ano ang mangyayari kung walang cleanup:**  
-- Patuloy na tumatakbo ang mga event listener kahit natapos na ang pag-drag  
-- Bumabagal ang performance dahil sa mga hindi nagagamit na listener  
-- Nagkakaroon ng hindi inaasahang behavior kapag nakikipag-ugnayan sa ibang elemento  
-- Nasasayang ang resources ng browser sa hindi kinakailangang event handling  
+**Bakit mahalaga ang cleanup:**
+- **Pinipigilan** ang memory leaks mula sa mga natitirang event listeners
+- **Pinatitigil** ang dragging behavior kapag binitiwan ng user ang halaman
+- **Pinapayagan** ang ibang elemento na ma-drag nang independyente
+- **Ire-reset** ang sistema para sa susunod na drag operation
+
+**Ano ang mangyayari kung walang cleanup:**
+- Patuloy na tumatakbo ang event listeners kahit tumigil na ang pag-drag
+- Bumababa ang performance habang dumarami ang hindi nagagamit na listeners
+- Hindi inaasahang behavior kapag nakikipag-ugnayan sa ibang elemento
+- Nasasayang ang resources ng browser sa hindi kinakailangang event handling
 
-### Pag-unawa sa CSS Position Properties  
+### Pag-unawa sa CSS Position Properties
 
-Ang ating dragging system ay nagma-manipula ng dalawang pangunahing CSS properties:  
+Ang ating drag system ay nagma-manipula ng dalawang pangunahing CSS properties:
 
 | Property | Ano ang Kinokontrol | Paano Natin Ginagamit |
 |----------|---------------------|-----------------------|
-| `top` | Distansya mula sa itaas na gilid | Vertical na posisyon habang nagda-drag |
-| `left` | Distansya mula sa kaliwang gilid | Horizontal na posisyon habang nagda-drag |
+| `top` | Distansya mula sa itaas na gilid | Vertical positioning habang nagda-drag |
+| `left` | Distansya mula sa kaliwang gilid | Horizontal positioning habang nagda-drag |
+
+**Mga mahalagang insight tungkol sa offset properties:**
+- **`offsetTop`**: Kasalukuyang distansya mula sa itaas ng positioned parent element
+- **`offsetLeft`**: Kasalukuyang distansya mula sa kaliwa ng positioned parent element
+- **Positioning context**: Ang mga value na ito ay relative sa pinakamalapit na positioned ancestor
+- **Real-time updates**: Agad na nagbabago kapag binago natin ang CSS properties
 
-**Mga mahalagang kaalaman tungkol sa offset properties:**  
-- **`offsetTop`**: Kasalukuyang distansya mula sa itaas ng positioned parent element  
-- **`offsetLeft`**: Kasalukuyang distansya mula sa kaliwa ng positioned parent element  
-- **Positioning context**: Ang mga value na ito ay relative sa pinakamalapit na positioned ancestor  
-- **Real-time updates**: Agad na nagbabago kapag binago natin ang mga CSS properties  
+> 🎯 **Disenyo ng Filosopiya**: Ang drag system na ito ay sadyang flexible – walang "drop zones" o mga limitasyon. Maaaring ilagay ng mga user ang mga halaman kahit saan, binibigyan sila ng ganap na creative control sa disenyo ng kanilang terrarium.
 
-> 🎯 **Disenyo ng Pilosopiya**: Ang drag system na ito ay sadyang flexible – walang "drop zones" o limitasyon. Maaaring ilagay ng mga user ang mga halaman kahit saan, binibigyan sila ng ganap na kontrol sa disenyo ng kanilang terrarium.  
+## Pagsasama-sama: Ang Iyong Kumpletong Drag System
 
-## Pagsasama-sama: Ang Iyong Kumpletong Drag System  
+Binabati kita! Nakagawa ka ng isang sopistikadong drag-and-drop system gamit ang vanilla JavaScript. Ang iyong kumpletong `dragElement` function ay naglalaman na ngayon ng isang makapangyarihang closure na namamahala sa:
 
-Binabati kita! Nakagawa ka ng isang sopistikadong drag-and-drop system gamit ang vanilla JavaScript. Ang iyong kumpletong `dragElement` function ay naglalaman na ngayon ng isang makapangyarihang closure na namamahala sa:  
+**Ano ang nagagawa ng iyong closure:**
+- **Nagpapanatili** ng pribadong position variables para sa bawat halaman nang independyente
+- **Humahawak** sa buong drag lifecycle mula simula hanggang matapos
+- **Nagbibigay** ng makinis at tumutugong paggalaw sa buong screen
+- **Naglilinis** ng resources nang maayos upang maiwasan ang memory leaks
+- **Lumilikha** ng intuitive at creative na interface para sa disenyo ng terrarium
 
-**Ano ang nagagawa ng iyong closure:**  
-- **Nagpapanatili** ng mga pribadong position variable para sa bawat halaman nang hiwalay  
-- **Humahawak** sa buong drag lifecycle mula simula hanggang matapos  
-- **Nagbibigay** ng smooth, responsive na paggalaw sa buong screen  
-- **Naglilinis** ng mga resources nang maayos upang maiwasan ang memory leaks  
-- **Lumilikha** ng intuitive, creative na interface para sa disenyo ng terrarium  
+### Pagsubok sa Iyong Interactive Terrarium
 
-### Pagsubok sa Iyong Interactive Terrarium  
+Ngayon, subukan ang iyong interactive terrarium! Buksan ang iyong `index.html` file sa isang web browser at subukan ang functionality:
 
-Ngayon subukan ang iyong interactive terrarium! Buksan ang iyong `index.html` file sa isang web browser at subukan ang functionality:  
+1. **I-click at hawakan** ang anumang halaman upang simulan ang pag-drag
+2. **Igalaw ang iyong mouse o daliri** at panoorin ang halaman na maayos na sumusunod
+3. **Bitawan** upang ilagay ang halaman sa bagong posisyon
+4. **Mag-eksperimento** sa iba't ibang ayos upang tuklasin ang interface
 
-1. **I-click at hawakan** ang anumang halaman upang simulan ang pag-drag  
-2. **Igalaw ang iyong mouse o daliri** at panoorin ang halaman na sumusunod nang maayos  
-3. **Bitawan** upang ilagay ang halaman sa bagong posisyon  
-4. **Mag-eksperimento** sa iba't ibang ayos upang tuklasin ang interface  
+🥇 **Tagumpay**: Nakagawa ka ng isang ganap na interactive na web application gamit ang mga pangunahing konsepto na ginagamit ng mga propesyonal na developer araw-araw. Ang drag-and-drop functionality na ito ay gumagamit ng parehong prinsipyo sa likod ng file uploads, kanban boards, at marami pang ibang interactive interfaces.
 
-🥇 **Tagumpay**: Nakagawa ka ng isang ganap na interactive na web application gamit ang mga pangunahing konsepto na ginagamit ng mga propesyonal na developer araw-araw. Ang drag-and-drop functionality na ito ay gumagamit ng parehong prinsipyo sa likod ng file uploads, kanban boards, at marami pang ibang interactive na interface.  
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Kumpletong Sistema**: Suriin ang iyong mastery sa buong drag system:
+- ✅ Paano pinapanatili ng closures ang independiyenteng estado para sa bawat halaman?
+- ✅ Bakit mahalaga ang coordinate calculation math para sa makinis na paggalaw?
+- ✅ Ano ang mangyayari kung nakalimutan nating linisin ang event listeners?
+- ✅ Paano nasusukat ang pattern na ito sa mas kumplikadong interactions?
 
-![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.tl.png)  
+**Pagmuni-muni sa Kalidad ng Code**: Suriin ang iyong kumpletong solusyon:
+- **Modular na disenyo**: Ang bawat halaman ay may sariling closure instance
+- **Event efficiency**: Tamang setup at cleanup ng listeners
+- **Suporta sa iba't ibang device**: Gumagana sa desktop at mobile
+- **Performance conscious**: Walang memory leaks o redundant calculations
+
+![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.tl.png)
 
 ---
 
-## Hamon ng GitHub Copilot Agent 🚀  
+## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:  
+Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Pagandahin ang terrarium project sa pamamagitan ng pagdaragdag ng reset functionality na ibabalik ang lahat ng halaman sa kanilang orihinal na posisyon gamit ang smooth animations.  
+**Deskripsyon:** Pagandahin ang terrarium project sa pamamagitan ng pagdaragdag ng reset functionality na ibabalik ang lahat ng halaman sa kanilang orihinal na posisyon gamit ang smooth animations.
 
-**Prompt:** Gumawa ng reset button na, kapag na-click, ay mag-a-animate ng lahat ng halaman pabalik sa kanilang orihinal na posisyon sa sidebar gamit ang CSS transitions. Ang function ay dapat mag-imbak ng orihinal na posisyon kapag nag-load ang pahina at maayos na i-transition ang mga halaman pabalik sa mga posisyon na iyon sa loob ng 1 segundo kapag na-click ang reset button.  
+**Prompt:** Gumawa ng reset button na, kapag na-click, ay mag-a-animate ng lahat ng halaman pabalik sa kanilang orihinal na sidebar positions gamit ang CSS transitions. Ang function ay dapat mag-imbak ng orihinal na posisyon kapag nag-load ang pahina at maayos na i-transition ang mga halaman pabalik sa mga posisyong iyon sa loob ng 1 segundo kapag na-click ang reset button.
 
-Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.  
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
-## 🚀 Karagdagang Hamon: Palawakin ang Iyong Kakayahan  
+## 🚀 Karagdagang Hamon: Palawakin ang Iyong Kasanayan
 
-Handa ka na bang dalhin ang iyong terrarium sa susunod na antas? Subukang ipatupad ang mga pagpapahusay na ito:  
+Handa ka na bang dalhin ang iyong terrarium sa susunod na antas? Subukan ang pagpapatupad ng mga pagpapahusay na ito:
 
-**Mga Creative Extensions:**  
-- **Double-click** ang isang halaman upang ilagay ito sa harapan (z-index manipulation)  
-- **Magdagdag ng visual feedback** tulad ng banayad na glow kapag hover sa mga halaman  
-- **Magpatupad ng boundaries** upang pigilan ang mga halaman na ma-drag sa labas ng terrarium  
-- **Gumawa ng save function** na nagtatanda ng mga posisyon ng halaman gamit ang localStorage  
-- **Magdagdag ng sound effects** para sa pag-pick up at paglagay ng mga halaman  
+**Mga Creative Extensions:**
+- **Double-click** ang halaman upang ilagay ito sa harapan (z-index manipulation)
+- **Magdagdag ng visual feedback** tulad ng banayad na glow kapag nag-hover sa mga halaman
+- **Magpatupad ng boundaries** upang pigilan ang mga halaman na ma-drag sa labas ng terrarium
+- **Gumawa ng save function** na nagtatanda ng posisyon ng halaman gamit ang localStorage
+- **Magdagdag ng sound effects** para sa pag-pick up at paglagay ng mga halaman
 
-> 💡 **Pagkakataon sa Pag-aaral**: Ang bawat isa sa mga hamon na ito ay magtuturo sa iyo ng mga bagong aspeto ng DOM manipulation, event handling, at disenyo ng user experience.  
+> 💡 **Pagkakataon sa Pag-aaral**: Ang bawat isa sa mga hamon na ito ay magtuturo sa iyo ng mga bagong aspeto ng DOM manipulation, event handling, at disenyo ng user experience.
 
-## Post-Lecture Quiz  
+## Post-Lecture Quiz
 
-[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/20)  
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/20)
 
-## Review & Self Study: Palalimin ang Iyong Pag-unawa  
+## Review & Self Study: Pagpapalalim ng Iyong Pag-unawa
 
-Na-master mo na ang mga pangunahing kaalaman ng DOM manipulation at closures, ngunit palaging may mas marami pang matutunan! Narito ang ilang mga landas upang palawakin ang iyong kaalaman at kakayahan.  
+Na-master mo na ang mga pangunahing kaalaman ng DOM manipulation at closures, ngunit palaging may mas marami pang matutunan! Narito ang ilang mga landas upang palawakin ang iyong kaalaman at kasanayan.
 
-### Alternatibong Paraan ng Drag and Drop  
+### Mga Alternatibong Paraan ng Drag and Drop
 
-Ginamit natin ang pointer events para sa maximum na flexibility, ngunit maraming paraan ang web development:  
+Ginamit natin ang pointer events para sa maximum na flexibility, ngunit nag-aalok ang web development ng maraming paraan:
 
 | Paraan | Pinakamahusay Para sa | Halaga ng Pag-aaral |
-|--------|-----------------------|---------------------|
-| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | File uploads, pormal na drag zones | Pag-unawa sa native browser capabilities |
+|-------|------------------------|---------------------|
+| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | File uploads, formal drag zones | Pag-unawa sa native browser capabilities |
 | [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | Mobile-specific interactions | Mga pattern ng mobile-first development |
-| CSS `transform` properties | Smooth animations | Mga teknik sa performance optimization |
-
-### Mga Advanced na Paksa sa DOM Manipulation  
-
-**Mga susunod na hakbang sa iyong pag-aaral:**  
-- **Event delegation**: Mahusay na paghawak ng events para sa maraming elemento  
-- **Intersection Observer**: Pag-detect kapag ang mga elemento ay pumasok/lumabas sa viewport  
-- **Mutation Observer**: Pagbabantay sa mga pagbabago sa istruktura ng DOM  
-- **Web Components**: Paglikha ng reusable, encapsulated na UI elements  
-- **Virtual DOM concepts**: Pag-unawa kung paano ino-optimize ng mga framework ang DOM updates  
+| CSS `transform` properties | Smooth animations | Mga teknik sa pag-optimize ng performance |
+
+### Mga Advanced na Paksa sa DOM Manipulation
+
+**Mga susunod na hakbang sa iyong paglalakbay sa pag-aaral:**
+- **Event delegation**: Mahusay na paghawak ng events para sa maraming elemento
+- **Intersection Observer**: Pagtukoy kung kailan pumapasok/lumalabas ang mga elemento sa viewport
+- **Mutation Observer**: Pagsubaybay sa mga pagbabago sa istruktura ng DOM
+- **Web Components**: Paglikha ng reusable, encapsulated UI elements
+- **Virtual DOM concepts**: Pag-unawa kung paano ino-optimize ng mga framework ang DOM updates
+
+### Mahahalagang Resources para sa Patuloy na Pag-aaral
+
+**Teknikal na Dokumentasyon:**
+- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - Komprehensibong pointer event reference
+- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - Opisyal na dokumentasyon ng standards
+- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - Advanced closure patterns
+
+**Browser Compatibility:**
+- [CanIUse.com](https://caniuse.com/) - Suriin ang suporta ng feature sa iba't ibang browser
+- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - Detalyadong impormasyon sa compatibility
+
+**Mga Pagkakataon sa Practice:**
+- **Gumawa** ng puzzle game gamit ang katulad na drag mechanics
+- **Lumikha** ng kanban board na may drag-and-drop task management
+- **Magdisenyo** ng image gallery na may draggable photo arrangements
+- **Mag-eksperimento** sa touch gestures para sa mobile interfaces
+
+> 🎯 **Estratehiya sa Pag-aaral**: Ang pinakamahusay na paraan upang ma-solidify ang mga konseptong ito ay sa pamamagitan ng practice. Subukang gumawa ng mga variation ng draggable interfaces – bawat proyekto ay magtuturo sa iyo ng bago tungkol sa user interaction at DOM manipulation.
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Buksan ang browser DevTools at i-type ang `document.querySelector('body')` sa console
+- [ ] Subukang baguhin ang text ng isang webpage gamit ang `innerHTML` o `textContent`
+- [ ] Magdagdag ng click event listener sa anumang button o link sa isang webpage
+- [ ] I-inspect ang istruktura ng DOM tree gamit ang Elements panel
+
+### 🎯 **Ano ang Magagawa Mo sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at repasuhin ang mga konsepto ng DOM manipulation
+- [ ] Gumawa ng interactive na webpage na tumutugon sa mga pag-click ng user
+- [ ] Mag-practice ng event handling gamit ang iba't ibang uri ng event (click, mouseover, keypress)
+- [ ] Bumuo ng simpleng to-do list o counter gamit ang DOM manipulation
+- [ ] Tuklasin ang relasyon sa pagitan ng mga HTML element at JavaScript objects
+
+### 📅 **Ang Iyong JavaScript Journey sa Loob ng Isang Linggo**
+- [ ] Kumpletuhin ang interactive terrarium project na may drag-and-drop functionality
+- [ ] Masterin ang event delegation para sa mahusay na paghawak ng events
+- [ ] Alamin ang tungkol sa event loop at asynchronous JavaScript
+- [ ] Mag-practice ng closures sa pamamagitan ng paggawa ng modules na may private state
+- [ ] Tuklasin ang mga modernong DOM APIs tulad ng Intersection Observer
+- [ ] Bumuo ng interactive components nang hindi gumagamit ng frameworks
+
+### 🌟 **Ang Iyong JavaScript Mastery sa Loob ng Isang Buwan**
+- [ ] Gumawa ng kumplikadong single-page application gamit ang vanilla JavaScript
+- [ ] Matutunan ang isang modernong framework (React, Vue, o Angular) at ikumpara ito sa vanilla DOM
+- [ ] Mag-ambag sa mga open source JavaScript projects
+- [ ] Masterin ang mga advanced na konsepto tulad ng web components at custom elements
+- [ ] Bumuo ng mga performant web applications gamit ang optimal DOM patterns
+- [ ] Magturo sa iba tungkol sa DOM manipulation at mga pangunahing kaalaman sa JavaScript
+
+## 🎯 Ang Iyong JavaScript DOM Mastery Timeline
 
-### Mahahalagang Resources para sa Patuloy na Pag-aaral  
+```mermaid
+timeline
+    title DOM & JavaScript Learning Progression
+    
+    section Foundation (15 minutes)
+        DOM Understanding: Element selection methods
+                         : Tree structure navigation
+                         : Property access patterns
+        
+    section Event Handling (20 minutes)
+        User Interaction: Pointer event basics
+                        : Event listener setup
+                        : Cross-device compatibility
+                        : Event prevention techniques
+        
+    section Closures (25 minutes)
+        Scope Management: Private variable creation
+                        : Function persistence
+                        : State management patterns
+                        : Memory efficiency
+        
+    section Drag System (30 minutes)
+        Interactive Features: Coordinate tracking
+                            : Position calculation
+                            : Movement mathematics
+                            : Cleanup procedures
+        
+    section Advanced Patterns (45 minutes)
+        Professional Skills: Event delegation
+                           : Performance optimization
+                           : Error handling
+                           : Accessibility considerations
+        
+    section Framework Understanding (1 week)
+        Modern Development: Virtual DOM concepts
+                          : State management libraries
+                          : Component architectures
+                          : Build tool integration
+        
+    section Expert Level (1 month)
+        Advanced DOM APIs: Intersection Observer
+                         : Mutation Observer
+                         : Custom Elements
+                         : Web Components
+```
 
-**Teknikal na Dokumentasyon:**  
-- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - Komprehensibong pointer event reference  
-- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - Opisyal na dokumentasyon ng standards  
-- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - Mga advanced na closure patterns  
+### 🛠️ Buod ng Iyong JavaScript Toolkit
 
-**Browser Compatibility:**  
-- [CanIUse.com](https://caniuse.com/) - Tingnan ang suporta ng feature sa iba't ibang browser  
-- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - Detalyadong impormasyon sa compatibility  
+Pagkatapos ng lesson na ito, mayroon ka na:
+- **DOM Mastery**: Element selection, property manipulation, at tree navigation
+- **Event Expertise**: Cross-device interaction handling gamit ang pointer events
+- **Closure Understanding**: Private state management at function persistence
+- **Interactive Systems**: Kumpletong drag-and-drop implementation mula sa simula
+- **Performance Awareness**: Tamang event cleanup at memory management
+- **Modern Patterns**: Mga teknik sa pag-organisa ng code na ginagamit sa propesyonal na development
+- **User Experience**: Paglikha ng intuitive at tumutugong interfaces
 
-**Mga Pagkakataon sa Practice:**  
-- **Gumawa** ng puzzle game gamit ang katulad na drag mechanics  
-- **Lumikha** ng kanban board na may drag-and-drop task management  
-- **Magdisenyo** ng image gallery na may draggable photo arrangements  
-- **Mag-eksperimento** sa touch gestures para sa mobile interfaces  
+**Mga Propesyonal na Kasanayan na Nakuha**: Nakagawa ka ng mga features gamit ang parehong teknik tulad ng:
+- **Trello/Kanban boards**: Pag-drag ng card sa pagitan ng mga column
+- **File upload systems**: Drag-and-drop file handling
+- **Image galleries**: Mga interface sa pag-aayos ng larawan
+- **Mobile apps**: Mga pattern ng touch-based interaction
 
-> 🎯 **Strategiya sa Pag-aaral**: Ang pinakamahusay na paraan upang ma-solidify ang mga konseptong ito ay sa pamamagitan ng practice. Subukang gumawa ng mga variation ng draggable interfaces – bawat proyekto ay magtuturo sa iyo ng bago tungkol sa user interaction at DOM manipulation.  
+**Susunod na Antas**: Handa ka nang tuklasin ang mga modernong frameworks tulad ng React, Vue, o Angular na nakabatay sa mga pangunahing konsepto ng DOM manipulation!
 
-## Assignment  
+## Assignment
 
-[Work a bit more with the DOM](assignment.md)  
+[Magtrabaho pa sa DOM](assignment.md)
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/4-typing-game/README.md b/translations/tl/4-typing-game/README.md
index c2015c9d51..8e90d82b06 100644
--- a/translations/tl/4-typing-game/README.md
+++ b/translations/tl/4-typing-game/README.md
@@ -1,27 +1,140 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5adea7059676fcdb1b546ccd54c956c2",
-  "translation_date": "2025-10-22T15:38:04+00:00",
+  "original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
+  "translation_date": "2025-11-03T14:02:18+00:00",
   "source_file": "4-typing-game/README.md",
   "language_code": "tl"
 }
 -->
 # Event-Driven Programming - Gumawa ng Typing Game
 
+```mermaid
+journey
+    title Your Typing Game Development Journey
+    section Foundation
+      Plan game structure: 3: Student
+      Design user interface: 4: Student
+      Setup HTML elements: 4: Student
+    section Functionality
+      Handle user input: 4: Student
+      Track timing: 5: Student
+      Calculate accuracy: 5: Student
+    section Features
+      Add visual feedback: 5: Student
+      Implement game logic: 5: Student
+      Polish experience: 5: Student
+```
+
 ## Panimula
 
-Narito ang isang bagay na alam ng bawat developer pero bihirang pag-usapan: ang mabilis na pagta-type ay isang superpower! 🚀 Isipin mo - mas mabilis mong maipapasa ang iyong mga ideya mula sa utak papunta sa code editor, mas maayos ang daloy ng iyong pagkamalikhain. Para itong direktang koneksyon sa pagitan ng iyong mga iniisip at ng screen.
+Narito ang isang bagay na alam ng bawat developer pero bihirang pag-usapan: ang mabilis na pagta-type ay isang superpower! 🚀 Isipin mo - mas mabilis mong maipapasa ang iyong mga ideya mula sa utak papunta sa code editor, mas malaya ang daloy ng iyong pagkamalikhain. Para itong direktang koneksyon sa pagitan ng iyong mga iniisip at ng screen.
+
+```mermaid
+pie title Game Features
+    "Real-time Feedback" : 25
+    "Performance Tracking" : 20
+    "Interactive UI" : 20
+    "Timer System" : 15
+    "Quote Management" : 10
+    "Results Display" : 10
+```
+
+Gusto mo bang malaman ang isa sa mga pinakamahusay na paraan para mahasa ang kakayahang ito? Tama ang hula mo - gagawa tayo ng isang laro!
 
-Gusto mo bang malaman ang isa sa mga pinakamahusay na paraan para mahasa ang kasanayang ito? Tama ang hula mo - gagawa tayo ng isang laro!
+```mermaid
+flowchart LR
+    A[Player starts game] --> B[Random quote displayed]
+    B --> C[Player types characters]
+    C --> D{Character correct?}
+    D -->|Yes| E[Green highlight]
+    D -->|No| F[Red highlight]
+    E --> G[Update accuracy]
+    F --> G
+    G --> H{Quote complete?}
+    H -->|No| C
+    H -->|Yes| I[Calculate WPM]
+    I --> J[Display results]
+    J --> K[Play again?]
+    K -->|Yes| B
+    K -->|No| L[Game over]
+    
+    style A fill:#e1f5fe
+    style D fill:#fff3e0
+    style E fill:#e8f5e8
+    style F fill:#ffebee
+    style I fill:#f3e5f5
+```
 
 > Gumawa tayo ng isang kahanga-hangang typing game!
 
-Handa ka na bang gamitin ang lahat ng JavaScript, HTML, at CSS skills na natutunan mo? Gagawa tayo ng typing game na magpapahirap sa iyo gamit ang mga random na quotes mula sa sikat na detektib na si [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes). Susukatin ng laro kung gaano ka kabilis at ka-eksakto mag-type - at maniwala ka, mas nakakaadik ito kaysa sa inaakala mo!
+Handa ka na bang gamitin ang lahat ng JavaScript, HTML, at CSS skills na natutunan mo? Gagawa tayo ng typing game na magpapakilala sa iyo ng mga random na quotes mula sa sikat na detektib na si [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes). Susukatin ng laro kung gaano ka kabilis at ka-eksakto mag-type - at maniwala ka, mas nakakaadik ito kaysa sa inaakala mo!
+
+```mermaid
+mindmap
+  root((Typing Game Development))
+    User Interface
+      Input Elements
+      Visual Feedback
+      Responsive Design
+      Accessibility
+    Game Logic
+      Quote Selection
+      Timer Management
+      Accuracy Tracking
+      Score Calculation
+    Event Handling
+      Keyboard Input
+      Button Clicks
+      Real-time Updates
+      Game State Changes
+    Performance Metrics
+      Words Per Minute
+      Character Accuracy
+      Error Tracking
+      Progress Display
+    User Experience
+      Immediate Feedback
+      Clear Instructions
+      Engaging Content
+      Achievement System
+```
 
 ![demo](../../../4-typing-game/images/demo.gif)
 
-## Mga Dapat Mong Malaman
+## Mga Kailangan Mong Malaman
+
+```mermaid
+flowchart TD
+    A[User Action] --> B{Event Type?}
+    B -->|Key Press| C[Keyboard Event]
+    B -->|Button Click| D[Mouse Event]
+    B -->|Timer| E[Time Event]
+    
+    C --> F[Check Character]
+    D --> G[Start/Reset Game]
+    E --> H[Update Timer]
+    
+    F --> I{Correct?}
+    I -->|Yes| J[Highlight Green]
+    I -->|No| K[Highlight Red]
+    
+    J --> L[Update Score]
+    K --> L
+    L --> M[Check Game State]
+    
+    G --> N[Generate New Quote]
+    H --> O[Display Time]
+    
+    M --> P{Game Complete?}
+    P -->|Yes| Q[Show Results]
+    P -->|No| R[Continue Game]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#fff3e0
+    style Q fill:#f3e5f5
+```
 
 Bago tayo magsimula, siguraduhing komportable ka sa mga konseptong ito (huwag mag-alala kung kailangan mo ng mabilisang pag-review - normal lang 'yan!):
 
@@ -32,17 +145,151 @@ Bago tayo magsimula, siguraduhing komportable ka sa mga konseptong ito (huwag ma
   - Paglikha ng random na numero
   - Pagkuha ng kasalukuyang oras
 
-Kung medyo hindi ka sigurado sa mga ito, ayos lang! Minsan ang pinakamahusay na paraan para mahasa ang kaalaman ay ang sumabak sa proyekto at matutunan ang mga bagay habang ginagawa.
+Kung medyo malabo ang ilan sa mga ito, ayos lang! Minsan ang pinakamagandang paraan para mapalalim ang kaalaman ay ang sumabak sa proyekto at matutunan habang ginagawa.
 
-## Gawin Na Natin Ito!
+### 🔄 **Pedagogical Check-in**
+**Foundation Assessment**: Bago magsimula sa development, siguraduhing nauunawaan mo:
+- ✅ Paano gumagana ang HTML forms at input elements
+- ✅ CSS classes at dynamic styling
+- ✅ JavaScript event listeners at handlers
+- ✅ Manipulasyon ng array at random na pagpili
+- ✅ Pagsukat ng oras at kalkulasyon
+
+**Quick Self-Test**: Kaya mo bang ipaliwanag kung paano nagtutulungan ang mga konseptong ito sa isang interactive na laro?
+- **Events** ang nagti-trigger kapag may interaksyon ang user sa mga elemento
+- **Handlers** ang nagpoproseso ng mga events at nag-a-update ng estado ng laro
+- **CSS** ang nagbibigay ng visual na feedback para sa mga aksyon ng user
+- **Timing** ang nagbibigay-daan sa pagsukat ng performance at progreso ng laro
+
+```mermaid
+quadrantChart
+    title Typing Game Skills Development
+    x-axis Beginner --> Expert
+    y-axis Static --> Interactive
+    quadrant-1 Advanced Games
+    quadrant-2 Real-time Apps
+    quadrant-3 Basic Pages
+    quadrant-4 Interactive Sites
+    
+    HTML Forms: [0.3, 0.2]
+    CSS Styling: [0.4, 0.3]
+    Event Handling: [0.7, 0.8]
+    Game Logic: [0.8, 0.9]
+    Performance Tracking: [0.9, 0.7]
+```
+
+## Simulan Natin Ito!
 
 [Paglikha ng typing game gamit ang event-driven programming](./typing-game/README.md)
 
-## Mga Kredito
+### ⚡ **Mga Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Buksan ang browser console at subukang makinig sa keyboard events gamit ang `addEventListener`
+- [ ] Gumawa ng simpleng HTML page na may input field at subukang i-detect ang pagta-type
+- [ ] Magpraktis ng string manipulation sa pamamagitan ng paghahambing ng typed text sa target text
+- [ ] Mag-eksperimento gamit ang `setTimeout` para maunawaan ang timing functions
+
+### 🎯 **Mga Magagawa Mo sa Loob ng Isang Oras**
+- [ ] Tapusin ang post-lesson quiz at maunawaan ang event-driven programming
+- [ ] Gumawa ng basic na bersyon ng typing game na may word validation
+- [ ] Magdagdag ng visual feedback para sa tamang at maling pagta-type
+- [ ] Mag-implement ng simpleng scoring system base sa bilis at eksaktong pagta-type
+- [ ] I-style ang iyong laro gamit ang CSS para maging kaaya-aya sa mata
+
+### 📅 **Pagbuo ng Laro sa Loob ng Isang Linggo**
+- [ ] Tapusin ang buong typing game na may lahat ng features at polish
+- [ ] Magdagdag ng difficulty levels na may iba't ibang complexity ng salita
+- [ ] Mag-implement ng user statistics tracking (WPM, accuracy sa paglipas ng oras)
+- [ ] Gumawa ng sound effects at animations para sa mas magandang user experience
+- [ ] Gawing mobile-responsive ang iyong laro para sa touch devices
+- [ ] Ibahagi ang iyong laro online at mangolekta ng feedback mula sa mga user
+
+### 🌟 **Pagbuo ng Interactive Development sa Loob ng Isang Buwan**
+- [ ] Gumawa ng maraming laro na nag-eexplore ng iba't ibang interaction patterns
+- [ ] Matutunan ang tungkol sa game loops, state management, at performance optimization
+- [ ] Mag-contribute sa open source game development projects
+- [ ] Masterin ang advanced timing concepts at smooth animations
+- [ ] Gumawa ng portfolio na nagpapakita ng iba't ibang interactive applications
+- [ ] Mag-mentor sa iba na interesado sa game development at user interaction
+
+## 🎯 Timeline ng Iyong Typing Game Mastery
+
+```mermaid
+timeline
+    title Game Development Learning Progression
+    
+    section Setup (10 minutes)
+        Project Structure: HTML foundation
+                         : CSS styling setup
+                         : JavaScript file creation
+        
+    section User Interface (20 minutes)
+        Interactive Elements: Input fields
+                            : Button controls
+                            : Display areas
+                            : Responsive layout
+        
+    section Event Handling (25 minutes)
+        User Interaction: Keyboard events
+                        : Mouse events
+                        : Real-time feedback
+                        : State management
+        
+    section Game Logic (30 minutes)
+        Core Functionality: Quote generation
+                          : Character comparison
+                          : Accuracy calculation
+                          : Timer implementation
+        
+    section Performance Tracking (35 minutes)
+        Metrics & Analytics: WPM calculation
+                           : Error tracking
+                           : Progress visualization
+                           : Results display
+        
+    section Polish & Enhancement (45 minutes)
+        User Experience: Visual feedback
+                       : Sound effects
+                       : Animations
+                       : Accessibility features
+        
+    section Advanced Features (1 week)
+        Extended Functionality: Difficulty levels
+                              : Leaderboards
+                              : Custom quotes
+                              : Multiplayer options
+        
+    section Professional Skills (1 month)
+        Game Development: Performance optimization
+                        : Code architecture
+                        : Testing strategies
+                        : Deployment patterns
+```
+
+### 🛠️ Buod ng Iyong Game Development Toolkit
+
+Pagkatapos tapusin ang proyektong ito, ma-master mo ang:
+- **Event-Driven Programming**: Responsive user interfaces na tumutugon sa input
+- **Real-Time Feedback**: Instant visual at performance updates
+- **Performance Measurement**: Eksaktong timing at scoring systems
+- **Game State Management**: Pagkontrol sa daloy ng application at user experience
+- **Interactive Design**: Paglikha ng engaging, nakakaadik na user experiences
+- **Modern Web APIs**: Paggamit ng browser capabilities para sa rich interactions
+- **Accessibility Patterns**: Inclusive design para sa lahat ng user
+
+**Real-World Applications**: Ang mga skills na ito ay direktang magagamit sa:
+- **Web Applications**: Anumang interactive interface o dashboard
+- **Educational Software**: Mga learning platform at skill assessment tools
+- **Productivity Tools**: Text editors, IDEs, at collaboration software
+- **Gaming Industry**: Browser games at interactive entertainment
+- **Mobile Development**: Touch-based interfaces at gesture handling
+
+**Next Level**: Handa ka nang mag-explore ng advanced game frameworks, real-time multiplayer systems, o complex interactive applications!
+
+## Credits
 
 Isinulat nang may ♥️ ni [Christopher Harrison](http://www.twitter.com/geektrainer)
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/4-typing-game/typing-game/README.md b/translations/tl/4-typing-game/typing-game/README.md
index 11aa93e2f5..bc8f734ca0 100644
--- a/translations/tl/4-typing-game/typing-game/README.md
+++ b/translations/tl/4-typing-game/typing-game/README.md
@@ -1,19 +1,19 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e6b75e5b8caae906473a8a09d77b7121",
-  "translation_date": "2025-10-22T15:38:12+00:00",
+  "original_hash": "da8bc72041a2bb3826a54654ee1a8844",
+  "translation_date": "2025-11-03T14:02:32+00:00",
   "source_file": "4-typing-game/typing-game/README.md",
   "language_code": "tl"
 }
 -->
 # Paggawa ng laro gamit ang mga event
 
-Naisip mo na ba kung paano nalalaman ng mga website kapag nag-click ka sa isang button o nag-type sa isang text box? Iyan ang mahika ng event-driven programming! Ano pa ang mas magandang paraan para matutunan ang mahalagang kasanayang ito kundi ang paggawa ng isang kapaki-pakinabang na bagay - isang typing speed game na tumutugon sa bawat keystroke na iyong ginagawa.
+Naisip mo na ba kung paano nalalaman ng mga website kapag nag-click ka sa isang button o nag-type sa isang text box? Iyan ang mahika ng event-driven programming! Ano pa ang mas magandang paraan para matutunan ang mahalagang kasanayang ito kundi ang paggawa ng isang kapaki-pakinabang na bagay - isang typing speed game na tumutugon sa bawat pindot mo sa keyboard.
 
 Makikita mo mismo kung paano "nakikipag-usap" ang mga web browser sa iyong JavaScript code. Sa tuwing magki-click, magta-type, o gagalaw ang iyong mouse, nagpapadala ang browser ng maliliit na mensahe (tinatawag natin itong mga event) sa iyong code, at ikaw ang magpapasya kung paano tutugon!
 
-Kapag natapos na tayo dito, makakagawa ka ng isang tunay na typing game na sumusubaybay sa iyong bilis at katumpakan. Mas mahalaga, mauunawaan mo ang mga pangunahing konsepto na nagpapatakbo sa bawat interactive na website na ginamit mo. Tara na!
+Kapag natapos na natin ito, makakagawa ka ng isang tunay na typing game na sumusubaybay sa iyong bilis at katumpakan. Mas mahalaga, maiintindihan mo ang mga pangunahing konsepto na nagpapatakbo sa bawat interactive na website na nagamit mo. Tara, simulan na natin!
 
 ## Pre-Lecture Quiz
 
@@ -21,42 +21,42 @@ Kapag natapos na tayo dito, makakagawa ka ng isang tunay na typing game na sumus
 
 ## Event-driven programming
 
-Isipin ang iyong paboritong app o website - ano ang nagpaparamdam na ito ay buhay at tumutugon? Lahat ito ay tungkol sa kung paano ito tumutugon sa iyong ginagawa! Ang bawat tap, click, swipe, o keystroke ay lumilikha ng tinatawag nating "event," at dito nagaganap ang tunay na mahika ng web development.
+Isipin ang paborito mong app o website - ano ang nagpaparamdam na ito ay buhay at tumutugon? Lahat ng ito ay tungkol sa kung paano ito tumutugon sa iyong ginagawa! Ang bawat tap, click, swipe, o pindot ay lumilikha ng tinatawag nating "event," at dito nagaganap ang tunay na mahika ng web development.
 
-Narito ang nagpapakainteresante sa programming para sa web: hindi natin alam kung kailan magki-click ang isang tao sa button o magsisimulang mag-type sa text box. Maaaring mag-click sila kaagad, maghintay ng limang minuto, o baka hindi mag-click kailanman! Ang kawalang-katiyakan na ito ay nangangahulugan na kailangan nating mag-isip nang iba tungkol sa kung paano natin isusulat ang ating code.
+Narito ang dahilan kung bakit kawili-wili ang programming para sa web: hindi natin alam kung kailan magki-click ang isang tao sa button o magsisimulang mag-type sa text box. Maaaring mag-click sila kaagad, maghintay ng limang minuto, o baka hindi mag-click kailanman! Ang kawalang-katiyakan na ito ay nangangahulugan na kailangan nating mag-isip nang iba tungkol sa kung paano natin isusulat ang ating code.
 
-Sa halip na magsulat ng code na tumatakbo mula itaas hanggang ibaba tulad ng isang recipe, nagsusulat tayo ng code na matiyagang naghihintay para sa isang bagay na mangyari. Katulad ito ng mga operator ng telegrapo noong 1800s na nakaupo sa kanilang mga makina, handang tumugon sa sandaling dumating ang isang mensahe sa wire.
+Sa halip na magsulat ng code na tumatakbo mula itaas hanggang ibaba tulad ng isang recipe, nagsusulat tayo ng code na matiyagang naghihintay para sa isang bagay na mangyari. Katulad ito ng kung paano ang mga operator ng telegrapo noong 1800s ay nakaupo sa kanilang mga makina, handang tumugon sa sandaling dumating ang isang mensahe sa wire.
 
-Kaya ano nga ba ang "event"? Sa madaling salita, ito ay isang bagay na nangyayari! Kapag nag-click ka sa isang button - iyon ay isang event. Kapag nag-type ka ng isang letra - iyon ay isang event. Kapag gumalaw ka ng mouse - isa pang event iyon.
+Ano nga ba ang "event"? Sa simpleng salita, ito ay isang bagay na nangyayari! Kapag nag-click ka sa isang button - iyon ay isang event. Kapag nag-type ka ng isang letra - iyon ay isang event. Kapag gumalaw ang iyong mouse - isa pang event iyon.
 
 Ang event-driven programming ay nagbibigay-daan sa atin na i-set up ang ating code upang makinig at tumugon. Gumagawa tayo ng mga espesyal na function na tinatawag na **event listeners** na matiyagang naghihintay para sa mga partikular na bagay na mangyari, pagkatapos ay kumikilos kapag nangyari ang mga ito.
 
-Isipin ang event listeners na parang doorbell para sa iyong code. I-set up mo ang doorbell (`addEventListener()`), sabihin dito kung anong tunog ang pakikinggan (tulad ng 'click' o 'keypress'), at pagkatapos ay tukuyin kung ano ang dapat mangyari kapag may nag-ring nito (ang iyong custom na function).
+Isipin ang event listeners na parang doorbell para sa iyong code. I-set up mo ang doorbell (`addEventListener()`), sasabihin mo kung anong tunog ang pakikinggan (tulad ng 'click' o 'keypress'), at pagkatapos ay tukuyin kung ano ang dapat mangyari kapag may nag-ring nito (ang iyong custom function).
 
-**Narito kung paano gumagana ang event listeners:**
+**Ganito gumagana ang event listeners:**
 - **Nakikinig** sa mga partikular na aksyon ng user tulad ng pag-click, pag-type, o paggalaw ng mouse
 - **Nagpapatupad** ng iyong custom na code kapag nangyari ang tinukoy na event
 - **Tumutugon** kaagad sa mga interaksyon ng user, na lumilikha ng seamless na karanasan
 - **Humahawak** ng maraming event sa parehong elemento gamit ang iba't ibang listeners
 
-> **NOTE:** Mahalaga ring tandaan na maraming paraan upang gumawa ng event listeners. Maaari kang gumamit ng anonymous functions, o gumawa ng mga named functions. Maaari kang gumamit ng iba't ibang shortcut, tulad ng pag-set ng `click` property, o paggamit ng `addEventListener()`. Sa ating exercise, magpo-focus tayo sa `addEventListener()` at anonymous functions, dahil ito ang pinakakaraniwang teknik na ginagamit ng mga web developer. Ito rin ang pinaka-flexible, dahil gumagana ang `addEventListener()` para sa lahat ng event, at ang pangalan ng event ay maaaring ibigay bilang parameter.
+> **NOTE:** Mahalaga ring tandaan na maraming paraan upang gumawa ng event listeners. Maaari kang gumamit ng anonymous functions, o gumawa ng mga named functions. Maaari kang gumamit ng iba't ibang shortcut, tulad ng pag-set sa `click` property, o paggamit ng `addEventListener()`. Sa ating exercise, magpo-focus tayo sa `addEventListener()` at anonymous functions, dahil ito ang pinakakaraniwang teknik na ginagamit ng mga web developer. Ito rin ang pinaka-flexible, dahil gumagana ang `addEventListener()` para sa lahat ng event, at ang pangalan ng event ay maaaring ibigay bilang parameter.
 
 ### Karaniwang mga event
 
 Bagama't nag-aalok ang mga web browser ng dose-dosenang iba't ibang event na maaari mong pakinggan, karamihan sa mga interactive na application ay umaasa lamang sa ilang mahahalagang event. Ang pag-unawa sa mga core event na ito ay magbibigay sa iyo ng pundasyon upang makabuo ng mga sopistikadong interaksyon ng user.
 
-Mayroong [dose-dosenang mga event](https://developer.mozilla.org/docs/Web/Events) na magagamit mo upang pakinggan kapag gumagawa ng application. Karaniwang anumang ginagawa ng user sa isang pahina ay nagdudulot ng event, na nagbibigay sa iyo ng maraming kapangyarihan upang matiyak na makakamit nila ang karanasang nais mo. Sa kabutihang-palad, karaniwan mong kakailanganin lamang ang ilang mahahalagang event. Narito ang ilang karaniwang mga event (kasama ang dalawa na gagamitin natin sa paggawa ng ating laro):
+Mayroong [dose-dosenang mga event](https://developer.mozilla.org/docs/Web/Events) na magagamit mo upang pakinggan kapag gumagawa ng application. Karaniwang anumang ginagawa ng user sa isang pahina ay nagdudulot ng event, na nagbibigay sa iyo ng maraming kapangyarihan upang matiyak na makakamit nila ang karanasang nais mo. Sa kabutihang-palad, karaniwang kailangan mo lamang ng ilang mahahalagang event. Narito ang ilang karaniwang mga event (kasama ang dalawa na gagamitin natin sa paggawa ng ating laro):
 
 | Event | Deskripsyon | Karaniwang Gamit |
 |-------|-------------|------------------|
 | `click` | Nag-click ang user sa isang bagay | Mga button, link, interactive na elemento |
-| `contextmenu` | Nag-right click ang user gamit ang mouse | Mga custom na right-click menu |
+| `contextmenu` | Nag-right click ang user gamit ang mouse | Custom na right-click na menu |
 | `select` | Nag-highlight ang user ng ilang teksto | Pag-edit ng teksto, mga operasyon ng kopya |
 | `input` | Nag-input ang user ng teksto | Pag-validate ng form, real-time na paghahanap |
 
 **Pag-unawa sa mga uri ng event na ito:**
 - **Nagti-trigger** kapag nakipag-interact ang mga user sa mga partikular na elemento sa iyong pahina
-- **Nagbibigay** ng detalyadong impormasyon tungkol sa aksyon ng user sa pamamagitan ng mga event object
+- **Nagbibigay** ng detalyadong impormasyon tungkol sa aksyon ng user sa pamamagitan ng event objects
 - **Nagpapahintulot** sa iyo na lumikha ng mga tumutugon, interactive na web application
 - **Gumagana** nang pare-pareho sa iba't ibang browser at device
 
@@ -64,7 +64,7 @@ Mayroong [dose-dosenang mga event](https://developer.mozilla.org/docs/Web/Events
 
 Ngayon na nauunawaan mo kung paano gumagana ang mga event, ilagay natin ang kaalamang iyon sa praktika sa pamamagitan ng paggawa ng isang kapaki-pakinabang na bagay. Gagawa tayo ng typing speed game na nagpapakita ng event handling habang tinutulungan kang bumuo ng isang mahalagang kasanayan bilang developer.
 
-Gagawa tayo ng laro upang tuklasin kung paano gumagana ang mga event sa JavaScript. Susubukan ng ating laro ang kasanayan ng isang manlalaro sa pag-type, na isa sa mga pinaka-underrated na kasanayan na dapat taglayin ng lahat ng developer. Fun fact: ang QWERTY keyboard layout na ginagamit natin ngayon ay talagang idinisenyo noong 1870s para sa mga typewriter - at ang mahusay na kasanayan sa pag-type ay mahalaga pa rin para sa mga programmer ngayon! Ang pangkalahatang daloy ng laro ay ganito:
+Gagawa tayo ng laro upang tuklasin kung paano gumagana ang mga event sa JavaScript. Susubukan ng ating laro ang kasanayan ng isang manlalaro sa pag-type, na isa sa mga pinaka-underrated na kasanayan na dapat taglayin ng lahat ng developer. Fun fact: ang QWERTY keyboard layout na ginagamit natin ngayon ay talagang dinisenyo noong 1870s para sa mga typewriter - at ang mahusay na kasanayan sa pag-type ay mahalaga pa rin para sa mga programmer ngayon! Ang pangkalahatang daloy ng laro ay ganito:
 
 ```mermaid
 flowchart TD
@@ -82,20 +82,20 @@ flowchart TD
     H --> C
 ```
 
-**Narito kung paano gumagana ang ating laro:**
+**Ganito gumagana ang ating laro:**
 - **Nagsisimula** kapag nag-click ang manlalaro sa start button at nagpapakita ng random na quote
 - **Sinusubaybayan** ang progreso ng pag-type ng manlalaro word by word sa real-time
-- **Ine-highlight** ang kasalukuyang salita upang gabayan ang pokus ng manlalaro
-- **Nagbibigay** ng agarang visual na feedback para sa mga error sa pag-type
+- **Ine-highlight** ang kasalukuyang salita upang gabayan ang focus ng manlalaro
+- **Nagbibigay** ng agarang visual feedback para sa mga error sa pag-type
 - **Kinakalkula** at ipinapakita ang kabuuang oras kapag natapos ang quote
 
-Gawin natin ang ating laro, at matutunan ang tungkol sa mga event!
+Simulan na natin ang paggawa ng ating laro, at matutunan ang tungkol sa mga event!
 
 ### File structure
 
-Bago tayo magsimulang mag-code, mag-organisa muna tayo! Ang pagkakaroon ng malinis na file structure mula sa simula ay makakatulong sa iyo na maiwasan ang sakit ng ulo sa hinaharap at gawing mas propesyonal ang iyong proyekto. 😊
+Bago tayo magsimulang mag-code, mag-organize muna tayo! Ang pagkakaroon ng malinis na file structure mula sa simula ay makakatulong upang maiwasan ang sakit ng ulo sa hinaharap at gawing mas propesyonal ang iyong proyekto. 😊
 
-Panatilihin natin itong simple gamit ang tatlong file lamang: `index.html` para sa istruktura ng ating pahina, `script.js` para sa lahat ng logic ng ating laro, at `style.css` upang gawing maganda ang lahat. Ito ang klasikong trio na nagpapatakbo sa karamihan ng web!
+Mananatili tayo sa simpleng setup na may tatlong file lamang: `index.html` para sa istruktura ng pahina, `script.js` para sa lahat ng game logic, at `style.css` upang gawing maganda ang lahat. Ito ang klasikong trio na nagpapatakbo ng karamihan sa web!
 
 **Gumawa ng bagong folder para sa iyong trabaho sa pamamagitan ng pagbukas ng console o terminal window at pag-type ng sumusunod na command:**
 
@@ -107,8 +107,8 @@ mkdir typing-game && cd typing-game
 md typing-game && cd typing-game
 ```
 
-**Narito ang ginagawa ng mga command na ito:**
-- **Gumagawa** ng bagong direktoryo na tinatawag na `typing-game` para sa mga file ng iyong proyekto
+**Ganito ang ginagawa ng mga command na ito:**
+- **Gumagawa** ng bagong direktoryo na tinatawag na `typing-game` para sa iyong mga file ng proyekto
 - **Nag-navigate** sa bagong likhang direktoryo nang awtomatiko
 - **Nagse-set up** ng malinis na workspace para sa iyong game development
 
@@ -120,17 +120,17 @@ code .
 
 **Ang command na ito:**
 - **Nagla-launch** ng Visual Studio Code sa kasalukuyang direktoryo
-- **Binubuksan** ang folder ng iyong proyekto sa editor
+- **Binubuksan** ang iyong project folder sa editor
 - **Nagbibigay** ng access sa lahat ng development tools na kakailanganin mo
 
 **Magdagdag ng tatlong file sa folder sa Visual Studio Code na may mga sumusunod na pangalan:**
 - `index.html` - Naglalaman ng istruktura at nilalaman ng iyong laro
-- `script.js` - Humahawak sa lahat ng logic ng laro at event listeners
-- `style.css` - Nagde-define ng visual na hitsura at styling
+- `script.js` - Humahawak sa lahat ng game logic at event listeners
+- `style.css` - Nagde-define ng visual appearance at styling
 
 ## Gumawa ng user interface
 
-Ngayon, gawin natin ang stage kung saan magaganap ang lahat ng aksyon ng ating laro! Isipin ito na parang pagdidisenyo ng control panel para sa isang spaceship - kailangan nating tiyakin na ang lahat ng kailangan ng ating mga manlalaro ay nasa lugar kung saan nila ito inaasahan.
+Ngayon, gawin natin ang stage kung saan magaganap ang lahat ng aksyon sa ating laro! Isipin ito na parang disenyo ng control panel para sa isang spaceship - kailangan nating tiyakin na ang lahat ng kailangan ng ating mga manlalaro ay nasa tamang lugar.
 
 Alamin natin kung ano ang talagang kailangan ng ating laro. Kung ikaw ay naglalaro ng typing game, ano ang gusto mong makita sa screen? Narito ang mga kailangan natin:
 
@@ -142,12 +142,12 @@ Alamin natin kung ano ang talagang kailangan ng ating laro. Kung ikaw ay naglala
 | Start Button | Nagsisimula ng laro | `<button>` na may `id="start"` |
 
 **Pag-unawa sa istruktura ng UI:**
-- **Inaayos** ang nilalaman nang lohikal mula itaas hanggang ibaba
-- **Nag-aassign** ng mga unique na ID sa mga elemento para sa JavaScript targeting
+- **Inaayos** ang nilalaman nang lohikal mula itaas pababa
+- **Nag-aassign** ng mga unique IDs sa mga elemento para sa JavaScript targeting
 - **Nagbibigay** ng malinaw na visual hierarchy para sa mas mahusay na karanasan ng user
 - **Kasama** ang semantic HTML elements para sa accessibility
 
-Ang bawat isa sa mga ito ay kakailanganin ng mga ID upang magamit natin ang mga ito sa ating JavaScript. Magdaragdag din tayo ng mga reference sa mga CSS at JavaScript file na gagawin natin.
+Ang bawat isa sa mga ito ay kakailanganin ng mga ID upang magamit natin ang mga ito sa ating JavaScript. Magdaragdag din tayo ng mga reference sa CSS at JavaScript files na gagawin natin.
 
 Gumawa ng bagong file na pinangalanang `index.html`. Idagdag ang sumusunod na HTML:
 
@@ -175,16 +175,16 @@ Gumawa ng bagong file na pinangalanang `index.html`. Idagdag ang sumusunod na HT
 **Pag-unawa sa nagagawa ng istruktura ng HTML na ito:**
 - **Nagli-link** sa CSS stylesheet sa `<head>` para sa styling
 - **Gumagawa** ng malinaw na heading at mga instruksyon para sa mga user
-- **Nag-eestablish** ng placeholder paragraphs na may mga partikular na ID para sa dynamic na nilalaman
+- **Nag-eestablish** ng placeholder paragraphs na may mga partikular na ID para sa dynamic content
 - **Kasama** ang input field na may accessibility attributes
 - **Nagbibigay** ng start button upang i-trigger ang laro
 - **Naglo-load** ng JavaScript file sa dulo para sa optimal na performance
 
 ### I-launch ang application
 
-Ang madalas na pagte-test ng iyong application habang nagde-develop ay nakakatulong upang mahanap ang mga isyu nang maaga at makita ang iyong progreso sa real-time. Ang Live Server ay isang napakahalagang tool na awtomatikong nire-refresh ang iyong browser tuwing nagsa-save ka ng mga pagbabago, na ginagawang mas epektibo ang development.
+Ang madalas na pag-test sa iyong application habang nagde-develop ay nakakatulong upang mahanap ang mga isyu nang maaga at makita ang iyong progreso sa real-time. Ang Live Server ay isang napakahalagang tool na awtomatikong nagre-refresh ng iyong browser tuwing nagsa-save ka ng mga pagbabago, na ginagawang mas epektibo ang development.
 
-Palaging pinakamahusay na mag-develop nang paunti-unti upang makita kung paano ang hitsura ng mga bagay. I-launch natin ang ating application. Mayroong isang kahanga-hangang extension para sa Visual Studio Code na tinatawag na [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) na parehong magho-host ng iyong application nang lokal at magre-refresh ng browser sa tuwing magsa-save ka.
+Palaging pinakamahusay na mag-develop nang paunti-unti upang makita kung paano ang hitsura ng mga bagay. I-launch natin ang ating application. Mayroong isang kahanga-hangang extension para sa Visual Studio Code na tinatawag na [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) na magho-host ng iyong application locally at magre-refresh ng browser sa tuwing magsa-save ka.
 
 **I-install ang [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) sa pamamagitan ng pagsunod sa link at pag-click sa Install:**
 
@@ -197,23 +197,23 @@ Palaging pinakamahusay na mag-develop nang paunti-unti upang makita kung paano a
 
 **Pag-unawa sa command palette:**
 - **Nagbibigay** ng mabilis na access sa lahat ng VS Code commands
-- **Naghahanap** ng mga command habang nagta-type ka
+- **Nagha-hanap** ng mga command habang nagta-type ka
 - **Nag-aalok** ng mga keyboard shortcut para sa mas mabilis na development
 
 **I-type ang "Live Server: Open with Live Server":**
 
 **Ano ang ginagawa ng Live Server:**
-- **Nagsisimula** ng lokal na development server para sa iyong proyekto
-- **Awtomatikong** nire-refresh ang browser kapag nagsa-save ng mga file
-- **Nagseserbisyo** ng iyong mga file mula sa isang lokal na URL (karaniwang `localhost:5500`)
+- **Nag-i-start** ng local development server para sa iyong proyekto
+- **Awtomatikong** nagre-refresh ng browser kapag nagsa-save ng mga file
+- **Nagse-serve** ng iyong mga file mula sa local URL (karaniwang `localhost:5500`)
 
 **Buksan ang browser at pumunta sa `https://localhost:5500`:**
 
-Makikita mo na ngayon ang pahinang ginawa mo! Magdagdag tayo ng functionality.
+Makikita mo na ngayon ang pahinang ginawa mo! Magdagdag na tayo ng functionality.
 
 ## Idagdag ang CSS
 
-Ngayon, gawing maganda ang mga bagay! Ang visual feedback ay mahalaga para sa mga user interface mula pa noong unang panahon ng computing. Noong 1980s, natuklasan ng mga mananaliksik na ang agarang visual feedback ay lubos na nagpapabuti sa performance ng user at nagpapababa ng mga error. Iyan mismo ang gagawin natin.
+Ngayon, gawing maganda ang mga bagay! Ang visual feedback ay mahalaga para sa user interfaces mula pa noong unang panahon ng computing. Noong 1980s, natuklasan ng mga mananaliksik na ang agarang visual feedback ay lubos na nagpapabuti sa performance ng user at nagpapababa ng mga error. Iyan mismo ang gagawin natin.
 
 Ang ating laro ay kailangang maging malinaw kung ano ang nangyayari. Dapat agad malaman ng mga manlalaro kung aling salita ang dapat nilang i-type, at kung nagkamali sila, dapat nila itong makita kaagad. Gumawa tayo ng simple ngunit epektibong styling:
 
@@ -231,57 +231,57 @@ Gumawa ng bagong file na pinangalanang `style.css` at idagdag ang sumusunod na s
 }
 ```
 
-**Pag-unawa sa mga CSS class na ito:**
-- **Ine-highlight** ang kasalukuyang salita gamit ang dilaw na background para sa malinaw na visual na gabay
-- **Nagpapahiwatig** ng mga error sa pag-type gamit ang light coral na background color
+**Pag-unawa sa mga CSS classes na ito:**
+- **Ine-highlight** ang kasalukuyang salita gamit ang yellow background para sa malinaw na visual guidance
+- **Nagpapahiwatig** ng mga error sa pag-type gamit ang light coral background color
 - **Nagbibigay** ng agarang feedback nang hindi nakakaabala sa daloy ng pag-type ng user
-- **Gumagamit** ng contrasting colors para sa accessibility at malinaw na visual na komunikasyon
+- **Gumagamit** ng contrasting colors para sa accessibility at malinaw na visual communication
 
 ✅ Pagdating sa CSS, maaari mong i-layout ang iyong pahina ayon sa gusto mo. Maglaan ng kaunting oras at gawing mas kaakit-akit ang pahina:
 
 - Pumili ng ibang font
-- Kulayan ang mga header
+- Kulayan ang mga headers
 - I-resize ang mga item
 
 ## JavaScript
 
-Narito ang mga bagay na nagiging masaya! 🎉 Mayroon na tayong HTML structure at CSS styling, ngunit sa ngayon ang ating laro ay parang magandang kotse na walang makina. Ang JavaScript ang magiging makina - ito ang magpapagana sa lahat at magpapasagot sa mga ginagawa ng mga manlalaro.
+Narito ang masaya! 🎉 Mayroon na tayong HTML structure at CSS styling, ngunit sa ngayon ang ating laro ay parang maganda ngunit walang makina. Ang JavaScript ang magiging makina - ito ang magpapagana sa lahat at magpaparamdam na tumutugon sa ginagawa ng mga manlalaro.
 
-Dito mo makikita ang iyong likha na nabubuhay. Gagawin natin ito nang hakbang-hakbang upang hindi ka mabigla:
+Dito mo makikita ang iyong likha na nabubuhay. Gagawin natin ito nang hakbang-hakbang upang hindi ito maging nakaka-overwhelm:
 
 | Hakbang | Layunin | Matututunan Mo |
-|---------|---------|----------------|
-| [Gumawa ng constants](../../../../4-typing-game/typing-game) | I-set up ang mga quote at DOM references | Pamamahala ng variable at DOM selection |
-| [Event listener para simulan ang laro](../../../../4-typing-game/typing-game) | Pangasiwaan ang pagsisimula ng laro | Event handling at UI updates |
-| [Event listener para sa pag-type](../../../../4-typing-game/typing-game) | Iproseso ang input ng user sa real-time | Input validation at dynamic feedback |
+|--------|---------|----------------|
+| [Gumawa ng constants](../../../../4-typing-game/typing-game) | I-set up ang quotes at DOM references | Pamamahala ng variable at DOM selection |
+| [Event listener para simulan ang laro](../../../../4-typing-game/typing-game) | Pangasiwaan ang game initialization | Event handling at UI updates |
+| [Event listener para sa pag-type](../../../../4-typing-game/typing-game) | Proseso ng user input sa real-time | Input validation at dynamic feedback |
 
-**Ang structured na approach na ito ay tumutulong sa iyo:**
+**Ang structured approach na ito ay tumutulong sa iyo:**
 - **Inaayos** ang iyong code sa lohikal, manageable na mga seksyon
 - **Nagbuo** ng functionality nang paunti-unti para sa mas madaling debugging
-- **Nauunawaan** kung paano nagtutulungan ang iba't ibang bahagi ng iyong application
+- **Naiintindihan** kung paano nagtutulungan ang iba't ibang bahagi ng iyong application
 - **Lumilikha** ng reusable patterns para sa mga susunod na proyekto
 
 Ngunit una, gumawa ng bagong file na pinangalanang `script.js`.
 
 ### Idagdag ang constants
 
-Bago tayo sumabak sa aksyon, kolektahin muna natin ang lahat ng ating resources! Katulad ng kung paano naghahanda ang NASA mission control ng lahat ng kanilang monitoring systems bago ang launch, mas madali kapag handa na ang lahat. Nakakatipid ito sa atin mula sa paghahanap ng mga bagay-bagay sa kalaunan at nakakatulong na maiwasan ang mga typo.
+Bago tayo sumabak sa aksyon, kolektahin muna natin ang lahat ng ating resources! Katulad ng kung paano naghahanda ang NASA mission control ng lahat ng kanilang monitoring systems bago ang launch, mas madali kapag handa na ang lahat. Nakakatipid ito sa atin mula sa paghahanap ng mga bagay-bagay sa hinaharap at nakakatulong na maiwasan ang mga typo.
 
 Narito ang mga kailangan nating i-set up muna:
 
 | Uri ng Data | Layunin | Halimbawa |
 |-------------|---------|----------|
 | Array ng mga quote | I-store ang lahat ng posibleng quote para sa laro | `['Quote 1', 'Quote 2', ...]` |
-| Array ng mga salita | Hatiin ang kasalukuyang quote sa mga indibidwal na salita | `['When', 'you', 'have', ...]` |
-| Index ng salita | Subaybayan kung aling salita ang tina-type ng manlalaro | `0, 1, 2, 3...` |
-| Oras ng pagsisimula | Kalkulahin ang lumipas na oras para sa scoring | `Date.now()` |
+| Word array | Hatiin ang kasalukuyang quote sa mga indibidwal na salita | `['When', 'you', 'have', ...]` |
+| Word index | Subaybayan kung aling salita ang tina-type ng player | `0, 1, 2, 3...` |
+| Start time | Kalkulahin ang lumipas na oras para sa scoring | `Date.now()` |
 
 **Kailangan din natin ng mga reference sa ating mga UI element:**
 | Elemento | ID | Layunin |
 |----------|----|---------|
-| Text input | `typed-value` | Kung saan nagta-type ang mga manlalaro |
-| Display ng quote | `quote` | Ipinapakita ang quote na ita-type |
-| Message area | `message` | Nagpapakita ng mga update sa status |
+| Text input | `typed-value` | Kung saan nagta-type ang mga player |
+| Quote display | `quote` | Ipinapakita ang quote na ita-type |
+| Message area | `message` | Nagpapakita ng mga status update |
 
 ```javascript
 // inside script.js
@@ -307,21 +307,21 @@ const typedValueElement = document.getElementById('typed-value');
 ```
 
 **Paghiwa-hiwalay ng mga nagagawa ng setup code na ito:**
-- **Nag-i-store** ng array ng mga quote ni Sherlock Holmes gamit ang `const` dahil hindi magbabago ang mga quote
+- **Nag-iimbak** ng array ng mga quote ni Sherlock Holmes gamit ang `const` dahil hindi magbabago ang mga quote
 - **Nag-i-initialize** ng mga tracking variable gamit ang `let` dahil magbabago ang mga value na ito habang naglalaro
-- **Kinukuha** ang mga reference sa mga elemento ng DOM gamit ang `document.getElementById()` para sa mas mabilis na access
-- **Nagse-set up** ng pundasyon para sa lahat ng functionality ng laro gamit ang malinaw at deskriptibong mga pangalan ng variable
+- **Kinukuha** ang mga reference sa mga DOM element gamit ang `document.getElementById()` para sa mas mabilis na access
+- **Nagsesetup** ng pundasyon para sa lahat ng functionality ng laro gamit ang malinaw at deskriptibong mga pangalan ng variable
 - **Inaayos** ang mga kaugnay na data at elemento nang lohikal para sa mas madaling maintenance ng code
 
 ✅ Magdagdag ng mas maraming quote sa iyong laro
 
-> 💡 **Pro Tip**: Maaari nating kunin ang mga elemento kahit kailan sa code gamit ang `document.getElementById()`. Dahil madalas nating ire-refer ang mga elementong ito, iiwasan natin ang mga typo sa string literals sa pamamagitan ng paggamit ng constants. Ang mga framework tulad ng [Vue.js](https://vuejs.org/) o [React](https://reactjs.org/) ay makakatulong sa mas mahusay na pag-manage ng centralization ng iyong code.
+> 💡 **Pro Tip**: Maaari nating kunin ang mga elemento kahit kailan sa code gamit ang `document.getElementById()`. Dahil madalas nating ire-refer ang mga elementong ito, iiwasan natin ang mga typo sa string literals sa pamamagitan ng paggamit ng constants. Ang mga framework tulad ng [Vue.js](https://vuejs.org/) o [React](https://reactjs.org/) ay makakatulong sa mas mahusay na pamamahala ng sentralisasyon ng iyong code.
 >
 **Bakit epektibo ang approach na ito:**
-- **Iniiwasan** ang mga error sa spelling kapag paulit-ulit na nire-refer ang mga elemento
-- **Pinapaganda** ang readability ng code gamit ang deskriptibong pangalan ng constants
-- **Pinapagana** ang mas mahusay na suporta ng IDE gamit ang autocomplete at error checking
-- **Pinapadali** ang refactoring kung magbabago ang mga ID ng elemento sa hinaharap
+- **Pinipigilan** ang mga maling spelling kapag nire-refer ang mga elemento nang maraming beses
+- **Pinapabuti** ang readability ng code gamit ang deskriptibong pangalan ng constants
+- **Nagbibigay-daan** sa mas mahusay na suporta ng IDE gamit ang autocomplete at error checking
+- **Ginagawang** mas madali ang refactoring kung magbabago ang mga ID ng elemento sa hinaharap
 
 Maglaan ng oras para manood ng video tungkol sa paggamit ng `const`, `let`, at `var`
 
@@ -331,9 +331,9 @@ Maglaan ng oras para manood ng video tungkol sa paggamit ng `const`, `let`, at `
 
 ### Magdagdag ng start logic
 
-Dito magsisimula ang lahat! 🚀 Malapit ka nang magsulat ng iyong unang tunay na event listener, at may kakaibang kasiyahan sa makita ang iyong code na tumutugon sa isang button click.
+Dito magsisimula ang lahat! 🚀 Malapit ka nang magsulat ng iyong unang tunay na event listener, at may kakaibang kasiyahan sa pagtingin sa iyong code na tumutugon sa isang button click.
 
-Isipin mo: sa isang lugar, may manlalaro na magki-click sa "Start" button, at kailangang handa ang iyong code para sa kanila. Hindi natin alam kung kailan nila ito i-click - maaaring agad-agad, maaaring pagkatapos nilang kumuha ng kape - pero kapag ginawa nila, magsisimula ang iyong laro.
+Isipin mo: may isang player na magki-click sa "Start" button, at kailangang handa ang iyong code para sa kanila. Hindi natin alam kung kailan nila ito i-click - maaaring agad-agad, maaaring pagkatapos nilang mag-kape - pero kapag ginawa nila, magsisimula ang iyong laro.
 
 Kapag nag-click ang user sa `start`, kailangan nating pumili ng quote, i-setup ang user interface, at i-setup ang tracking para sa kasalukuyang salita at timing. Narito ang JavaScript na kailangan mong idagdag; tatalakayin natin ito pagkatapos ng script block.
 
@@ -372,33 +372,33 @@ document.getElementById('start').addEventListener('click', () => {
 
 **Paghiwa-hiwalay ng code sa lohikal na mga seksyon:**
 
-**📊 Setup ng Word Tracking:**
-- **Pumipili** ng random na quote gamit ang `Math.floor()` at `Math.random()` para sa variety
+**📊 Word Tracking Setup:**
+- **Pinipili** ang random na quote gamit ang `Math.floor()` at `Math.random()` para sa variety
 - **Kinoconvert** ang quote sa isang array ng mga indibidwal na salita gamit ang `split(' ')`
-- **Ire-reset** ang `wordIndex` sa 0 dahil magsisimula ang mga manlalaro sa unang salita
-- **Ipinaghahanda** ang estado ng laro para sa isang bagong round
+- **Ire-reset** ang `wordIndex` sa 0 dahil magsisimula ang mga player sa unang salita
+- **Ine-prepare** ang estado ng laro para sa bagong round
 
-**🎨 Setup at Display ng UI:**
-- **Gumagawa** ng array ng `<span>` na elemento, binabalot ang bawat salita para sa indibidwal na styling
-- **Pinagsasama-sama** ang mga span element sa isang string para sa mas mabilis na pag-update ng DOM
-- **Ine-highlight** ang unang salita sa pamamagitan ng pagdaragdag ng `highlight` na CSS class
-- **Nililinis** ang anumang nakaraang mensahe ng laro para sa malinis na simula
+**🎨 UI Setup at Display:**
+- **Gumagawa** ng array ng `<span>` elements, binabalot ang bawat salita para sa indibidwal na styling
+- **Pinagsasama** ang mga span element sa isang string para sa mas mabilis na pag-update ng DOM
+- **Ine-highlight** ang unang salita sa pamamagitan ng pagdaragdag ng `highlight` CSS class
+- **Nililinis** ang anumang naunang mensahe ng laro para sa malinis na simula
 
-**⌨️ Paghahanda ng Textbox:**
+**⌨️ Textbox Preparation:**
 - **Nililinis** ang anumang existing na text sa input field
-- **Itinatakda ang focus** sa textbox para makapagsimula agad ang mga manlalaro sa pagta-type
-- **Ipinaghahanda** ang input area para sa bagong session ng laro
+- **Itinatakda ang focus** sa textbox para makapagsimula agad ang mga player sa pagta-type
+- **Ine-prepare** ang input area para sa bagong session ng laro
 
-**⏱️ Initialization ng Timer:**
+**⏱️ Timer Initialization:**
 - **Kinukuha** ang kasalukuyang timestamp gamit ang `new Date().getTime()`
 - **Nagbibigay-daan** sa tumpak na kalkulasyon ng bilis ng pagta-type at oras ng pagkumpleto
 - **Sinisimulan** ang performance tracking para sa session ng laro
 
 ### Magdagdag ng typing logic
 
-Dito natin haharapin ang puso ng ating laro! Huwag mag-alala kung mukhang marami ito sa simula - hihimayin natin ang bawat bahagi, at sa huli, makikita mo kung gaano ito ka-lohikal.
+Dito natin haharapin ang puso ng ating laro! Huwag mag-alala kung mukhang marami ito sa simula - dadaanan natin ang bawat bahagi, at sa huli, makikita mo kung gaano ito ka-lohikal.
 
-Ang binubuo natin dito ay medyo sopistikado: sa bawat letra na tina-type ng isang tao, ang ating code ay magche-check kung ano ang tina-type nila, magbibigay ng feedback, at magdedesisyon kung ano ang susunod na mangyayari. Katulad ito ng kung paano nagbibigay ng real-time feedback ang mga unang word processor tulad ng WordStar noong 1970s sa mga typist.
+Ang binubuo natin dito ay medyo sopistikado: bawat beses na may magta-type ng letra, iche-check ng ating code ang kanilang tina-type, bibigyan sila ng feedback, at magdedesisyon kung ano ang susunod na mangyayari. Katulad ito ng kung paano nagbibigay ng real-time feedback ang mga unang word processor tulad ng WordStar noong 1970s sa mga nagta-type.
 
 ```javascript
 // at the end of script.js
@@ -439,7 +439,7 @@ typedValueElement.addEventListener('input', () => {
 
 **Pag-unawa sa daloy ng typing logic:**
 
-Ang function na ito ay gumagamit ng waterfall approach, sinusuri ang mga kondisyon mula sa pinaka-espesipiko hanggang sa pinaka-pangkalahatan. Hihimayin natin ang bawat senaryo:
+Ang function na ito ay gumagamit ng waterfall approach, na nagche-check ng mga kondisyon mula sa pinaka-specific hanggang sa pinaka-general. Hatiin natin ang bawat senaryo:
 
 ```mermaid
 flowchart TD
@@ -453,34 +453,34 @@ flowchart TD
     G -->|No| I[Show error styling]
 ```
 
-**🏁 Kumpleto ang Quote (Senaryo 1):**
+**🏁 Quote Complete (Senaryo 1):**
 - **Sinusuri** kung ang typed value ay tumutugma sa kasalukuyang salita AT nasa huling salita na tayo
-- **Kinakalkula** ang lumipas na oras sa pamamagitan ng pagbabawas ng oras ng pagsisimula mula sa kasalukuyang oras
+- **Kinakalkula** ang lumipas na oras sa pamamagitan ng pagbabawas ng start time mula sa kasalukuyang oras
 - **Kinoconvert** ang milliseconds sa seconds sa pamamagitan ng paghahati sa 1,000
-- **Ipinapakita** ang congratulatory message na may oras ng pagkumpleto
+- **Ipinapakita** ang congratulatory message na may completion time
 
-**✅ Kumpleto ang Salita (Senaryo 2):**
-- **Nadedetect** ang pagkumpleto ng salita kapag ang input ay nagtatapos sa space
-- **Vina-validate** na ang trimmed input ay eksaktong tumutugma sa kasalukuyang salita
+**✅ Word Complete (Senaryo 2):**
+- **Nadidetect** ang pagkumpleto ng salita kapag ang input ay nagtatapos sa space
+- **Ine-validate** na ang trimmed input ay eksaktong tumutugma sa kasalukuyang salita
 - **Nililinis** ang input field para sa susunod na salita
 - **Umaabante** sa susunod na salita sa pamamagitan ng pag-increment ng `wordIndex`
 - **Ina-update** ang visual highlighting sa pamamagitan ng pag-aalis ng lahat ng klase at pag-highlight sa bagong salita
 
-**📝 Patuloy na Pagta-type (Senaryo 3):**
-- **Vina-verify** na ang kasalukuyang salita ay nagsisimula sa kung ano ang tina-type sa ngayon
+**📝 Typing in Progress (Senaryo 3):**
+- **Sinusuri** na ang kasalukuyang salita ay nagsisimula sa kung ano ang na-type na
 - **Inaalis** ang anumang error styling para ipakita na tama ang input
 - **Pinapayagan** ang patuloy na pagta-type nang walang interruption
 
 **❌ Error State (Senaryo 4):**
-- **Nagti-trigger** kapag ang tina-type na text ay hindi tumutugma sa inaasahang simula ng salita
+- **Nagti-trigger** kapag ang na-type na teksto ay hindi tumutugma sa inaasahang simula ng salita
 - **Nag-aapply** ng error CSS class para magbigay ng agarang visual feedback
-- **Tumutulong** sa mga manlalaro na mabilis na matukoy at maitama ang mga pagkakamali
+- **Tumutulong** sa mga player na mabilis na matukoy at maitama ang mga pagkakamali
 
 ## Subukan ang iyong aplikasyon
 
-Tingnan ang iyong nagawa! 🎉 Nakatapos ka lang ng isang tunay, gumaganang typing game mula sa simula gamit ang event-driven programming. Maglaan ng sandali para pahalagahan iyon - hindi ito maliit na tagumpay!
+Tingnan ang iyong nagawa! 🎉 Nakatapos ka lang ng isang tunay na gumaganang typing game mula sa simula gamit ang event-driven programming. Maglaan ng sandali para pahalagahan ito - hindi ito maliit na bagay!
 
-Ngayon ay dumating ang yugto ng testing! Gagana ba ito ayon sa inaasahan? May nakaligtaan ba tayo? Narito ang bagay: kung may hindi gumana nang perpekto agad, normal lang iyon. Kahit ang mga bihasang developer ay regular na nakakahanap ng mga bug sa kanilang code. Bahagi ito ng proseso ng pag-develop!
+Ngayon ay dumating ang testing phase! Gagana ba ito ayon sa inaasahan? May nakaligtaan ba tayo? Narito ang bagay: kung may hindi gumana nang perpekto agad, normal lang iyon. Kahit ang mga bihasang developer ay regular na nakakahanap ng mga bug sa kanilang code. Bahagi ito ng proseso ng pag-develop!
 
 I-click ang `start`, at magsimulang mag-type! Dapat itong magmukhang katulad ng animation na nakita natin dati.
 
@@ -489,9 +489,9 @@ I-click ang `start`, at magsimulang mag-type! Dapat itong magmukhang katulad ng
 **Ano ang dapat i-test sa iyong aplikasyon:**
 - **Sinusuri** na ang pag-click sa Start ay nagpapakita ng random na quote
 - **Kinukumpirma** na ang pagta-type ay ine-highlight ang kasalukuyang salita nang tama
-- **Sinusuri** na ang error styling ay lumalabas para sa maling pagta-type
+- **Sinusuri** na lumalabas ang error styling para sa maling pagta-type
 - **Tinitiyak** na ang pagkumpleto ng mga salita ay maayos na umaabante sa highlight
-- **Tinetest** na ang pagtatapos ng quote ay nagpapakita ng completion message na may timing
+- **Sinusubukan** na ang pagtatapos ng quote ay nagpapakita ng completion message na may timing
 
 **Mga karaniwang debugging tips:**
 - **Suriin** ang browser console (F12) para sa mga error sa JavaScript
@@ -505,33 +505,33 @@ I-click ang `start`, at magsimulang mag-type! Dapat itong magmukhang katulad ng
 
 Gamitin ang Agent mode para tapusin ang sumusunod na hamon:
 
-**Deskripsyon:** Palawakin ang typing game sa pamamagitan ng pag-implement ng difficulty system na ina-adjust ang laro base sa performance ng manlalaro. Ang hamon na ito ay makakatulong sa iyo na magpraktis ng advanced event handling, data analysis, at dynamic UI updates.
+**Deskripsyon:** Palawakin ang typing game sa pamamagitan ng pag-implement ng difficulty system na ina-adjust ang laro base sa performance ng player. Ang hamon na ito ay makakatulong sa iyo na magpraktis ng advanced event handling, data analysis, at dynamic UI updates.
 
 **Prompt:** Gumawa ng difficulty adjustment system para sa typing game na:
-1. Subaybayan ang bilis ng pagta-type ng manlalaro (words per minute) at accuracy percentage
-2. Awtomatikong ina-adjust sa tatlong difficulty level: Madali (simpleng mga quote), Katamtaman (kasalukuyang mga quote), Mahirap (mga komplikadong quote na may punctuation)
+1. Subaybayan ang bilis ng pagta-type ng player (words per minute) at accuracy percentage
+2. Awtomatikong ina-adjust sa tatlong difficulty level: Madali (simpleng mga quote), Katamtaman (kasalukuyang mga quote), Mahirap (mga kumplikadong quote na may punctuation)
 3. Ipinapakita ang kasalukuyang difficulty level at player statistics sa UI
 4. Nagpapatupad ng streak counter na nagpapataas ng difficulty pagkatapos ng 3 sunod-sunod na magagandang performance
 5. Nagdadagdag ng visual feedback (kulay, animation) para ipakita ang mga pagbabago sa difficulty
 
-Magdagdag ng kinakailangang mga HTML element, CSS style, at JavaScript function para maipatupad ang feature na ito. Isama ang tamang error handling at tiyakin na ang laro ay nananatiling accessible gamit ang angkop na ARIA labels.
+Magdagdag ng kinakailangang HTML elements, CSS styles, at JavaScript functions para ma-implement ang feature na ito. Isama ang tamang error handling at tiyakin na nananatiling accessible ang laro gamit ang angkop na ARIA labels.
 
 Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Hamon
 
-Handa ka na bang dalhin ang iyong typing game sa susunod na antas? Subukan ang pag-implement ng mga advanced na feature na ito para mas mapalalim ang iyong pag-unawa sa event handling at DOM manipulation:
+Handa ka na bang dalhin ang iyong typing game sa susunod na antas? Subukan ang pag-implement ng mga advanced na feature na ito upang mas mapalalim ang iyong kaalaman sa event handling at DOM manipulation:
 
 **Magdagdag ng mas maraming functionality:**
 
 | Feature | Deskripsyon | Mga Kasanayang Mapapraktis |
 |---------|-------------|----------------------------|
-| **Input Control** | I-disable ang `input` event listener kapag tapos na, at i-enable ito kapag na-click ang button | Pamamahala ng event at kontrol ng estado |
-| **UI State Management** | I-disable ang textbox kapag natapos ng manlalaro ang quote | Manipulasyon ng DOM property |
-| **Modal Dialog** | Magpakita ng modal dialog box na may success message | Advanced na UI patterns at accessibility |
+| **Input Control** | I-disable ang `input` event listener kapag natapos, at i-enable ito kapag na-click ang button | Pamamahala ng event at state control |
+| **UI State Management** | I-disable ang textbox kapag natapos ng player ang quote | Manipulasyon ng DOM properties |
+| **Modal Dialog** | Magpakita ng modal dialog box na may success message | Advanced UI patterns at accessibility |
 | **High Score System** | I-store ang high scores gamit ang `localStorage` | Browser storage APIs at data persistence |
 
-**Mga Tip sa Implementasyon:**
+**Mga tip sa implementasyon:**
 - **Mag-research** sa `localStorage.setItem()` at `localStorage.getItem()` para sa persistent storage
 - **Magpraktis** sa pagdaragdag at pag-aalis ng event listeners nang dynamic
 - **Mag-explore** sa HTML dialog elements o CSS modal patterns
@@ -541,7 +541,66 @@ Handa ka na bang dalhin ang iyong typing game sa susunod na antas? Subukan ang p
 
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/22)
 
-## Review at Pag-aaral sa Sarili
+---
+
+## 🚀 Ang Iyong Typing Game Mastery Timeline
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Subukan ang iyong typing game gamit ang iba't ibang quote para masigurado na gumagana ito nang maayos
+- [ ] Mag-eksperimento sa CSS styling - subukang baguhin ang highlight at error colors
+- [ ] Buksan ang DevTools ng iyong browser (F12) at panoorin ang Console habang naglalaro
+- [ ] Hamunin ang sarili na tapusin ang isang quote nang pinakamabilis
+
+### ⏰ **Ano ang Maaaring Magawa Mo sa Loob ng Isang Oras**
+- [ ] Magdagdag ng mas maraming quote sa array (maaaring mula sa iyong paboritong libro o pelikula)
+- [ ] I-implement ang localStorage high score system mula sa challenge section
+- [ ] Gumawa ng words-per-minute calculator na nagpapakita pagkatapos ng bawat laro
+- [ ] Magdagdag ng sound effects para sa tamang pagta-type, mga error, at pagkumpleto
+
+### 📅 **Ang Iyong Lingguhang Pakikipagsapalaran**
+- [ ] Gumawa ng multiplayer na bersyon kung saan maaaring magkompetensya ang mga kaibigan
+- [ ] Gumawa ng iba't ibang difficulty levels na may iba't ibang complexity ng quote
+- [ ] Magdagdag ng progress bar na nagpapakita kung gaano karami sa quote ang natapos
+- [ ] Magpatupad ng user accounts na may personal statistics tracking
+- [ ] Magdisenyo ng custom themes at hayaan ang mga user na pumili ng kanilang gustong estilo
+
+### 🗓️ **Ang Iyong Buwanang Transformasyon**
+- [ ] Gumawa ng typing course na may mga lesson na unti-unting nagtuturo ng tamang paglalagay ng daliri
+- [ ] Gumawa ng analytics na nagpapakita kung aling mga letra o salita ang nagdudulot ng pinakamaraming error
+- [ ] Magdagdag ng suporta para sa iba't ibang wika at layout ng keyboard
+- [ ] Mag-integrate sa mga educational APIs para kumuha ng mga quote mula sa mga database ng literatura
+- [ ] I-publish ang iyong pinahusay na typing game para magamit at ma-enjoy ng iba
+
+### 🎯 **Final Reflection Check-in**
+
+**Bago ka magpatuloy, maglaan ng sandali para magdiwang:**
+- Ano ang pinakamasayang sandali habang ginagawa ang larong ito?
+- Ano ang nararamdaman mo tungkol sa event-driven programming kumpara noong nagsimula ka?
+- Ano ang isang feature na excited kang idagdag para gawing natatangi ang larong ito?
+- Paano mo maaaring i-apply ang mga konsepto ng event handling sa iba pang proyekto?
+
+```mermaid
+journey
+    title Your Event Programming Confidence Journey
+    section Today
+      Understanding Events: 3: You
+      Building UI: 4: You
+      Writing Event Listeners: 5: You
+    section This Week
+      Adding Features: 4: You
+      Debugging Issues: 5: You
+      Enhancing UX: 4: You
+    section Next Month
+      Building Complex Apps: 5: You
+      Teaching Others: 5: You
+      Creating Frameworks: 5: You
+```
+
+> 🌟 **Tandaan**: Nakatapos ka lang ng isa sa mga pangunahing konsepto na nagpapagana sa bawat interactive na website at aplikasyon. Ang event-driven programming ang dahilan kung bakit ang web ay parang buhay at tumutugon. Tuwing makakakita ka ng dropdown menu, isang form na nagva-validate habang nagta-type, o isang laro na tumutugon sa iyong mga click, naiintindihan mo na ngayon ang magic sa likod nito. Hindi ka lang natututo mag-code - natututo kang lumikha ng mga karanasan na intuitive at engaging! 🎉
+
+---
+
+## Review & Self Study
 
 Magbasa tungkol sa [lahat ng mga event na available](https://developer.mozilla.org/docs/Web/Events) sa developer sa pamamagitan ng web browser, at isaalang-alang ang mga senaryo kung saan gagamitin mo ang bawat isa.
 
@@ -552,4 +611,4 @@ Magbasa tungkol sa [lahat ng mga event na available](https://developer.mozilla.o
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/5-browser-extension/1-about-browsers/README.md b/translations/tl/5-browser-extension/1-about-browsers/README.md
index 48e0cd3903..4aed7f0b1c 100644
--- a/translations/tl/5-browser-extension/1-about-browsers/README.md
+++ b/translations/tl/5-browser-extension/1-about-browsers/README.md
@@ -1,14 +1,31 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "33a875c522f237a2026e4653240dfc07",
-  "translation_date": "2025-10-22T15:45:03+00:00",
+  "original_hash": "00aa85715e1efd4930c17a23e3012e69",
+  "translation_date": "2025-11-03T14:09:19+00:00",
   "source_file": "5-browser-extension/1-about-browsers/README.md",
   "language_code": "tl"
 }
 -->
 # Browser Extension Project Part 1: Lahat Tungkol sa Mga Browser
 
+```mermaid
+journey
+    title Your Browser Extension Development Journey
+    section Foundation
+      Understand browsers: 3: Student
+      Learn extension types: 4: Student
+      Setup development: 4: Student
+    section Development
+      Build interface: 4: Student
+      Add functionality: 5: Student
+      Handle data: 5: Student
+    section Integration
+      Test in browser: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
+
 ![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.tl.jpg)
 > Sketchnote ni [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
 
@@ -18,17 +35,47 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### Panimula
 
-Ang mga browser extension ay mga mini-application na nagpapahusay sa iyong karanasan sa pag-browse sa web. Tulad ng orihinal na pananaw ni Tim Berners-Lee para sa isang interactive na web, ang mga extension ay nagpapalawak ng kakayahan ng browser lampas sa simpleng pagtingin ng mga dokumento. Mula sa mga password manager na nagpoprotekta sa iyong mga account hanggang sa mga color picker na tumutulong sa mga designer na makuha ang perpektong kulay, ang mga extension ay nag-aayos ng mga pang-araw-araw na hamon sa pag-browse.
+Ang mga browser extension ay mga mini-application na nagpapahusay sa iyong karanasan sa pag-browse sa web. Tulad ng orihinal na pananaw ni Tim Berners-Lee para sa isang interactive na web, ang mga extension ay nagpapalawak ng kakayahan ng browser lampas sa simpleng pagtingin ng mga dokumento. Mula sa mga password manager na nagpapanatili ng seguridad ng iyong mga account hanggang sa mga color picker na tumutulong sa mga designer na makuha ang perpektong kulay, ang mga extension ay nag-aayos ng mga pang-araw-araw na hamon sa pag-browse.
+
+Bago natin simulan ang paggawa ng iyong unang extension, unawain muna natin kung paano gumagana ang mga browser. Tulad ng kailangang maunawaan ni Alexander Graham Bell ang transmisyon ng tunog bago maimbento ang telepono, ang kaalaman sa mga pangunahing kaalaman ng browser ay makakatulong sa iyo na lumikha ng mga extension na seamless na nag-iintegrate sa mga umiiral na sistema ng browser.
 
-Bago tayo magtayo ng iyong unang extension, unawain muna natin kung paano gumagana ang mga browser. Tulad ng kailangan ni Alexander Graham Bell na maunawaan ang transmisyon ng tunog bago maimbento ang telepono, ang kaalaman sa mga pangunahing kaalaman ng browser ay makakatulong sa iyo na lumikha ng mga extension na seamless na nag-iintegrate sa mga umiiral na sistema ng browser.
+Sa pagtatapos ng araling ito, mauunawaan mo ang arkitektura ng browser at makakapagsimula ka nang bumuo ng iyong unang extension.
 
-Sa pagtatapos ng araling ito, mauunawaan mo ang arkitektura ng browser at makakapagsimula ka nang magtayo ng iyong unang extension.
+```mermaid
+mindmap
+  root((Browser Architecture))
+    Core Components
+      Rendering Engine
+      JavaScript Engine
+      Network Stack
+      Storage APIs
+    User Interface
+      Address Bar
+      Tab Management
+      Bookmarks
+      Extension Icons
+    Extension System
+      Manifest Files
+      Content Scripts
+      Background Pages
+      Popup Windows
+    Security Model
+      Same-Origin Policy
+      Permissions API
+      Content Security
+      Isolated Worlds
+    Development Tools
+      DevTools Integration
+      Debug Console
+      Performance Monitor
+      Extension Inspector
+```
 
 ## Pag-unawa sa Mga Web Browser
 
-Ang web browser ay mahalagang isang sopistikadong tagapag-interpret ng dokumento. Kapag nag-type ka ng "google.com" sa address bar, ang browser ay gumagawa ng isang kumplikadong serye ng mga operasyon - humihiling ng nilalaman mula sa mga server sa buong mundo, pagkatapos ay ini-parse at ini-render ang code sa mga interactive na web page na nakikita mo.
+Ang web browser ay mahalagang isang sopistikadong tagasalin ng dokumento. Kapag nag-type ka ng "google.com" sa address bar, ang browser ay nagsasagawa ng isang kumplikadong serye ng mga operasyon - humihiling ng nilalaman mula sa mga server sa buong mundo, pagkatapos ay ini-parse at ini-render ang code sa mga interactive na web page na nakikita mo.
 
-Ang prosesong ito ay kahalintulad sa kung paano idinisenyo ang unang web browser, ang WorldWideWeb, ni Tim Berners-Lee noong 1990 upang gawing accessible sa lahat ang mga hyperlinked na dokumento.
+Ang prosesong ito ay sumasalamin sa disenyo ng unang web browser, ang WorldWideWeb, na ginawa ni Tim Berners-Lee noong 1990 upang gawing accessible sa lahat ang mga hyperlinked na dokumento.
 
 ✅ **Kaunting Kasaysayan**: Ang unang browser ay tinawag na 'WorldWideWeb' at nilikha ni Sir Timothy Berners-Lee noong 1990.
 
@@ -37,25 +84,31 @@ Ang prosesong ito ay kahalintulad sa kung paano idinisenyo ang unang web browser
 
 ### Paano Pinoproseso ng Mga Browser ang Web Content
 
-Ang proseso sa pagitan ng pagpasok ng URL at pagtingin sa isang webpage ay binubuo ng ilang magkakaugnay na hakbang na nangyayari sa loob ng ilang segundo:
+Ang proseso sa pagitan ng pag-type ng URL at pagtingin sa isang webpage ay may kasamang ilang magkakaugnay na hakbang na nangyayari sa loob ng ilang segundo:
 
 ```mermaid
 sequenceDiagram
     participant User
     participant Browser
+    participant Extension
     participant DNS
     participant Server
     
     User->>Browser: Types URL and presses Enter
+    Browser->>Extension: Trigger beforeRequest event
+    Extension->>Extension: Check if URL needs modification
     Browser->>DNS: Looks up server IP address
     DNS->>Browser: Returns IP address
     Browser->>Server: Requests web page content
     Server->>Browser: Sends HTML, CSS, and JavaScript
+    Browser->>Extension: Trigger beforeResponse event
+    Extension->>Extension: Modify content if needed
     Browser->>User: Renders complete web page
+    Extension->>User: Show extension UI updates
 ```
 
 **Narito ang nagagawa ng prosesong ito:**
-- **Isinasalin** ang URL na nababasa ng tao sa IP address ng server sa pamamagitan ng DNS lookup
+- **Isinasalin** ang URL na nababasa ng tao sa isang IP address ng server sa pamamagitan ng DNS lookup
 - **Nag-eestablish** ng secure na koneksyon sa web server gamit ang HTTP o HTTPS protocols
 - **Humihiling** ng partikular na nilalaman ng web page mula sa server
 - **Tumatanggap** ng HTML markup, CSS styling, at JavaScript code mula sa server
@@ -68,10 +121,10 @@ Ang mga modernong browser ay nagbibigay ng maraming tampok na maaaring magamit n
 | Tampok | Layunin | Mga Oportunidad sa Extension |
 |---------|---------|------------------------|
 | **Rendering Engine** | Nagpapakita ng HTML, CSS, at JavaScript | Pagbabago ng nilalaman, pag-inject ng estilo |
-| **JavaScript Engine** | Nagpapatupad ng JavaScript code | Custom na script, API interactions |
-| **Local Storage** | Nag-iimbak ng data nang lokal | Mga preference ng user, cached na data |
+| **JavaScript Engine** | Nagpapatupad ng JavaScript code | Mga custom na script, API interactions |
+| **Local Storage** | Nag-iimbak ng data nang lokal | Mga user preference, cached data |
 | **Network Stack** | Humahawak ng mga web request | Pag-monitor ng request, pagsusuri ng data |
-| **Security Model** | Nagpoprotekta sa mga user mula sa malisyosong nilalaman | Pag-filter ng nilalaman, pagpapahusay ng seguridad |
+| **Security Model** | Pinoprotektahan ang mga user mula sa malisyosong nilalaman | Pag-filter ng nilalaman, mga pagpapahusay sa seguridad |
 
 **Ang pag-unawa sa mga tampok na ito ay tumutulong sa iyo:**
 - **Tukuyin** kung saan maaaring magdagdag ng pinakamalaking halaga ang iyong extension
@@ -81,31 +134,65 @@ Ang mga modernong browser ay nagbibigay ng maraming tampok na maaaring magamit n
 
 ### Mga Pagsasaalang-alang sa Cross-Browser Development
 
-Iba't ibang browser ang nag-iimplement ng mga pamantayan na may bahagyang pagkakaiba, katulad ng kung paano maaaring hawakan ng iba't ibang programming language ang parehong algorithm nang magkakaiba. Ang Chrome, Firefox, at Safari ay may kani-kaniyang katangian na dapat isaalang-alang ng mga developer sa pagbuo ng extension.
+Iba't ibang browser ang nagpapatupad ng mga pamantayan na may bahagyang pagkakaiba, katulad ng kung paano maaaring hawakan ng iba't ibang programming language ang parehong algorithm nang magkakaiba. Ang Chrome, Firefox, at Safari ay may kani-kaniyang natatanging katangian na dapat isaalang-alang ng mga developer sa panahon ng pagbuo ng extension.
 
 > 💡 **Pro Tip**: Gamitin ang [caniuse.com](https://www.caniuse.com) upang suriin kung aling mga teknolohiya sa web ang sinusuportahan sa iba't ibang browser. Napakahalaga nito kapag nagpaplano ng mga tampok ng iyong extension!
 
 **Mga pangunahing pagsasaalang-alang para sa pagbuo ng extension:**
 - **Subukan** ang iyong extension sa Chrome, Firefox, at Edge browsers
 - **Iangkop** sa iba't ibang browser extension APIs at manifest formats
-- **Hawakan** ang iba't ibang katangian ng performance at limitasyon
+- **Hawakan** ang iba't ibang performance characteristics at limitasyon
 - **Magbigay** ng mga fallback para sa mga tampok na partikular sa browser na maaaring hindi magagamit
 
 ✅ **Analytics Insight**: Maaari mong matukoy kung aling mga browser ang mas gusto ng iyong mga user sa pamamagitan ng pag-install ng mga analytics package sa iyong mga proyekto sa web development. Ang data na ito ay tumutulong sa iyo na unahin kung aling mga browser ang dapat suportahan muna.
 
 ## Pag-unawa sa Mga Browser Extension
 
-Ang mga browser extension ay nag-aayos ng mga karaniwang hamon sa pag-browse sa web sa pamamagitan ng pagdaragdag ng functionality nang direkta sa interface ng browser. Sa halip na mangailangan ng hiwalay na mga application o kumplikadong workflows, ang mga extension ay nagbibigay ng agarang access sa mga tool at tampok.
+Ang mga browser extension ay nag-aayos ng mga karaniwang hamon sa pag-browse sa web sa pamamagitan ng pagdaragdag ng functionality nang direkta sa interface ng browser. Sa halip na mangailangan ng hiwalay na mga application o kumplikadong mga workflow, ang mga extension ay nagbibigay ng agarang access sa mga tool at tampok.
 
-Ang konseptong ito ay kahalintulad sa kung paano inisip ng mga maagang pioneer ng computer tulad ni Douglas Engelbart ang pagpapahusay ng kakayahan ng tao gamit ang teknolohiya - ang mga extension ay nagpapahusay sa pangunahing functionality ng iyong browser.
+Ang konseptong ito ay sumasalamin sa kung paano naisip ng mga maagang pioneer ng computer tulad ni Douglas Engelbart ang pagpapahusay ng kakayahan ng tao gamit ang teknolohiya - ang mga extension ay nagpapahusay sa pangunahing functionality ng iyong browser.
+
+```mermaid
+quadrantChart
+    title Browser Extension Categories
+    x-axis Simple --> Complex
+    y-axis Personal Use --> Professional Tools
+    quadrant-1 Developer Tools
+    quadrant-2 Enterprise Solutions
+    quadrant-3 Personal Utilities
+    quadrant-4 Productivity Apps
+    
+    Ad Blockers: [0.3, 0.2]
+    Password Managers: [0.7, 0.3]
+    Color Pickers: [0.4, 0.8]
+    Code Formatters: [0.8, 0.9]
+    Note Taking: [0.6, 0.5]
+    Video Downloaders: [0.5, 0.2]
+    Time Trackers: [0.7, 0.6]
+    Screenshot Tools: [0.4, 0.4]
+```
 
 **Mga sikat na kategorya ng extension at kanilang mga benepisyo:**
-- **Mga Productivity Tool**: Mga task manager, apps para sa pagkuha ng tala, at mga time tracker na tumutulong sa iyo na maging organisado
+- **Mga Productivity Tool**: Mga task manager, note-taking apps, at time trackers na tumutulong sa iyo na maging organisado
 - **Mga Pagpapahusay sa Seguridad**: Mga password manager, ad blocker, at mga tool sa privacy na nagpoprotekta sa iyong data
-- **Mga Developer Tool**: Mga code formatter, color picker, at mga debugging utility na nagpapadali sa development
-- **Pagpapahusay ng Nilalaman**: Mga reading mode, video downloader, at mga screenshot tool na nagpapabuti sa iyong karanasan sa web
+- **Mga Developer Tool**: Mga code formatter, color picker, at debugging utilities na nagpapadali sa pag-develop
+- **Pagpapahusay ng Nilalaman**: Mga reading mode, video downloader, at screenshot tools na nagpapabuti sa iyong karanasan sa web
+
+✅ **Reflection Question**: Ano ang iyong mga paboritong browser extension? Anong partikular na gawain ang kanilang ginagawa, at paano nila pinapabuti ang iyong karanasan sa pag-browse?
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Arkitektura ng Browser**: Bago lumipat sa pagbuo ng extension, tiyaking kaya mong:
+- ✅ Ipaliwanag kung paano pinoproseso ng mga browser ang mga web request at ini-render ang nilalaman
+- ✅ Tukuyin ang mga pangunahing bahagi ng arkitektura ng browser
+- ✅ Unawain kung paano nag-iintegrate ang mga extension sa functionality ng browser
+- ✅ Kilalanin ang security model na nagpoprotekta sa mga user
 
-✅ **Reflection Question**: Ano ang iyong mga paboritong browser extension? Anong mga partikular na gawain ang kanilang ginagawa, at paano nila pinapabuti ang iyong karanasan sa pag-browse?
+**Quick Self-Test**: Kaya mo bang i-trace ang landas mula sa pag-type ng URL hanggang sa pagtingin sa isang webpage?
+1. **DNS lookup** nagko-convert ng URL sa IP address
+2. **HTTP request** kumukuha ng nilalaman mula sa server
+3. **Parsing** nagpoproseso ng HTML, CSS, at JavaScript
+4. **Rendering** nagpapakita ng final webpage
+5. **Extensions** maaaring magbago ng nilalaman sa maraming hakbang
 
 ## Pag-install at Pamamahala ng Mga Extension
 
@@ -119,39 +206,59 @@ Ang pag-unawa sa proseso ng pag-install ng extension ay tumutulong sa iyo na ma-
 
 Kapag ikaw ay nagde-develop at nagte-test ng iyong sariling mga extension, sundin ang workflow na ito:
 
+```mermaid
+flowchart TD
+    A[Write Code] --> B[Build Extension]
+    B --> C{First Install?}
+    C -->|Yes| D[Load Unpacked]
+    C -->|No| E[Reload Extension]
+    D --> F[Test Functionality]
+    E --> F
+    F --> G{Working Correctly?}
+    G -->|No| H[Debug Issues]
+    G -->|Yes| I[Ready for Users]
+    H --> A
+    I --> J[Publish to Store]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#f3e5f5
+    style J fill:#fff3e0
+```
+
 ```bash
 # Step 1: Build your extension
 npm run build
 ```
 
 **Ano ang nagagawa ng command na ito:**
-- **Kinokompile** ang iyong source code sa mga file na handa para sa browser
+- **Kinokompyla** ang iyong source code sa mga browser-ready files
 - **Binubuo** ang mga JavaScript module sa mga optimized na package
-- **Gumagawa** ng mga final extension file sa `/dist` folder
+- **Nagge-generate** ng final extension files sa `/dist` folder
 - **Ipinaprepara** ang iyong extension para sa pag-install at testing
 
 **Hakbang 2: Pumunta sa Browser Extensions**
-1. **Buksan** ang page ng pamamahala ng extension ng iyong browser
+1. **Buksan** ang extensions management page ng iyong browser
 2. **I-click** ang "Settings and more" button (ang `...` icon) sa kanang itaas
 3. **Piliin** ang "Extensions" mula sa dropdown menu
 
 **Hakbang 3: I-load ang Iyong Extension**
 - **Para sa bagong pag-install**: Piliin ang `load unpacked` at piliin ang iyong `/dist` folder
 - **Para sa mga update**: I-click ang `reload` sa tabi ng iyong naka-install na extension
-- **Para sa testing**: I-enable ang "Developer mode" upang ma-access ang mga karagdagang debugging feature
+- **Para sa testing**: I-enable ang "Developer mode" upang ma-access ang mga karagdagang debugging features
 
-### Pag-install ng Production Extension
+### Proseso ng Pag-install ng Production Extension
 
-> ✅ **Note**: Ang mga development instructions na ito ay partikular para sa mga extension na ikaw mismo ang bumuo. Para mag-install ng mga published extension, bisitahin ang mga opisyal na tindahan ng browser extension tulad ng [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
+> ✅ **Tandaan**: Ang mga development instructions na ito ay partikular para sa mga extension na ikaw mismo ang bumuo. Para mag-install ng mga published extension, bisitahin ang mga opisyal na browser extension store tulad ng [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
 
 **Pag-unawa sa pagkakaiba:**
-- **Development installations** ay nagbibigay-daan sa iyo na subukan ang mga unpublished extension habang nasa development
-- **Store installations** ay nagbibigay ng vetted, published extensions na may automatic updates
-- **Sideloading** ay nagbibigay-daan sa pag-install ng mga extension mula sa labas ng opisyal na tindahan (nangangailangan ng developer mode)
+- **Development installations** nagbibigay-daan sa iyo na i-test ang mga unpublished extension sa panahon ng development
+- **Store installations** nagbibigay ng vetted, published extensions na may automatic updates
+- **Sideloading** nagbibigay-daan sa pag-install ng mga extension mula sa labas ng mga opisyal na tindahan (nangangailangan ng developer mode)
 
-## Pagtatayo ng Iyong Carbon Footprint Extension
+## Pagbuo ng Iyong Carbon Footprint Extension
 
-Gagawa tayo ng browser extension na nagpapakita ng carbon footprint ng paggamit ng enerhiya sa iyong rehiyon. Ang proyektong ito ay nagpapakita ng mahahalagang konsepto sa pagbuo ng extension habang gumagawa ng praktikal na tool para sa kamalayan sa kapaligiran.
+Gagawa tayo ng browser extension na nagpapakita ng carbon footprint ng energy use sa iyong rehiyon. Ang proyektong ito ay nagpapakita ng mahahalagang konsepto sa pagbuo ng extension habang gumagawa ng praktikal na tool para sa kamalayan sa kapaligiran.
 
 Ang approach na ito ay sumusunod sa prinsipyo ng "learning by doing" na napatunayang epektibo mula pa sa mga teorya sa edukasyon ni John Dewey - pinagsasama ang teknikal na kasanayan sa makabuluhang aplikasyon sa totoong mundo.
 
@@ -164,10 +271,10 @@ Bago simulan ang development, magtipon tayo ng mga kinakailangang resources at d
 - **[Region code](http://api.electricitymap.org/v3/zones)**: Hanapin ang iyong region code gamit ang [Electricity Map](https://www.electricitymap.org/map) (halimbawa, ang Boston ay gumagamit ng 'US-NEISO')
 
 **Mga Development Tools:**
-- **[Node.js and NPM](https://www.npmjs.com)**: Tool para sa package management sa pag-install ng mga dependency ng proyekto
+- **[Node.js and NPM](https://www.npmjs.com)**: Tool sa pamamahala ng package para sa pag-install ng mga dependencies ng proyekto
 - **[Starter code](../../../../5-browser-extension/start)**: I-download ang `start` folder upang simulan ang development
 
-✅ **Matuto Pa**: Palawakin ang iyong kaalaman sa package management gamit ang [komprehensibong Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
+✅ **Matuto Pa**: Palawakin ang iyong mga kasanayan sa pamamahala ng package gamit ang [komprehensibong Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
 
 ### Pag-unawa sa Estruktura ng Proyekto
 
@@ -180,38 +287,40 @@ project-root/
 │   ├── index.html           # User interface markup
 │   ├── background.js        # Background script functionality
 │   └── main.js              # Compiled JavaScript bundle
-└── src/                     # Source development files
-    └── index.js             # Your main JavaScript code
+├── src/                     # Source development files
+│   └── index.js             # Your main JavaScript code
+├── package.json             # Project dependencies and scripts
+└── webpack.config.js        # Build configuration
 ```
 
-**Paghiwa-hiwalay ng nagagawa ng bawat file:**
-- **`manifest.json`**: **Nagde-define** ng metadata ng extension, permissions, at entry points
-- **`index.html`**: **Gumagawa** ng user interface na lumalabas kapag kinlik ng user ang iyong extension
+**Paghiwa-hiwalay kung ano ang nagagawa ng bawat file:**
+- **`manifest.json`**: **Tinutukoy** ang metadata ng extension, mga permission, at mga entry point
+- **`index.html`**: **Lumilikha** ng user interface na lumalabas kapag na-click ng mga user ang iyong extension
 - **`background.js`**: **Humahawak** ng mga background task at browser event listeners
 - **`main.js`**: **Naglalaman** ng final bundled JavaScript pagkatapos ng build process
-- **`src/index.js`**: **Naglalaman** ng pangunahing development code na kino-compile sa `main.js`
+- **`src/index.js`**: **Naglalaman** ng iyong pangunahing development code na kino-compile sa `main.js`
 
-> 💡 **Tip sa Organisasyon**: I-store ang iyong API key at region code sa isang secure na note para sa madaling reference habang nasa development. Kakailanganin mo ang mga value na ito upang subukan ang functionality ng iyong extension.
+> 💡 **Tip sa Organisasyon**: Itago ang iyong API key at region code sa isang secure na note para sa madaling reference sa panahon ng development. Kakailanganin mo ang mga value na ito upang i-test ang functionality ng iyong extension.
 
-✅ **Security Note**: Huwag kailanman i-commit ang mga API key o sensitibong credentials sa iyong code repository. Ipapakita namin sa iyo kung paano ito hahawakan nang ligtas sa mga susunod na hakbang.
+✅ **Tandaan sa Seguridad**: Huwag kailanman i-commit ang mga API key o sensitibong credentials sa iyong code repository. Ipapakita namin sa iyo kung paano ito ligtas na hawakan sa mga susunod na hakbang.
 
-## Paggawa ng Extension Interface
+## Paglikha ng Interface ng Extension
 
-Ngayon ay gagawa tayo ng mga user interface components. Ang extension ay gumagamit ng two-screen approach: isang configuration screen para sa initial setup at isang results screen para sa data display.
+Ngayon ay gagawa tayo ng mga component ng user interface. Ang extension ay gumagamit ng two-screen approach: isang configuration screen para sa paunang setup at isang results screen para sa pagpapakita ng data.
 
-Ito ay sumusunod sa prinsipyo ng progressive disclosure na ginagamit sa interface design mula pa noong unang panahon ng computing - unti-unting ipinapakita ang impormasyon at mga opsyon sa lohikal na pagkakasunod-sunod upang maiwasan ang pag-overwhelm sa mga user.
+Ito ay sumusunod sa prinsipyo ng progressive disclosure na ginagamit sa disenyo ng interface mula pa noong unang panahon ng computing - unti-unting ipinapakita ang impormasyon at mga opsyon sa lohikal na pagkakasunod-sunod upang maiwasan ang pag-overwhelm sa mga user.
 
 ### Overview ng Extension Views
 
-**Setup View** - Configuration ng unang beses na user:
-![screenshot ng kumpletong extension na bukas sa browser, nagpapakita ng form na may mga input para sa pangalan ng rehiyon at API key.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.tl.png)
+**Setup View** - Paunang configuration ng user:
+![screenshot ng tapos na extension na bukas sa browser, nagpapakita ng form na may mga input para sa pangalan ng rehiyon at API key.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.tl.png)
 
 **Results View** - Pagpapakita ng data ng carbon footprint:
-![screenshot ng kumpletong extension na nagpapakita ng mga halaga para sa carbon usage at fossil fuel percentage para sa rehiyong US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.tl.png)
+![screenshot ng tapos na extension na nagpapakita ng mga halaga para sa carbon usage at fossil fuel percentage para sa rehiyong US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.tl.png)
 
-### Paggawa ng Configuration Form
+### Pagbuo ng Configuration Form
 
-Ang setup form ay nangongolekta ng configuration data ng user sa unang paggamit. Kapag na-configure, ang impormasyong ito ay nananatili sa browser storage para sa mga susunod na session.
+Ang setup form ay nangongolekta ng data ng user configuration sa unang paggamit. Kapag na-configure na, ang impormasyong ito ay mananatili sa browser storage para sa mga susunod na session.
 
 Sa file na `/dist/index.html`, idagdag ang istruktura ng form na ito:
 
@@ -233,13 +342,13 @@ Sa file na `/dist/index.html`, idagdag ang istruktura ng form na ito:
 ```
 
 **Narito ang nagagawa ng form na ito:**
-- **Gumagawa** ng semantic na istruktura ng form na may tamang labels at input associations
+- **Lumilikha** ng semantic na istruktura ng form na may tamang labels at input associations
 - **Nagpapagana** ng browser autocomplete functionality para sa mas mahusay na karanasan ng user
-- **Nangangailangan** ng parehong fields na mapunan bago ang submission gamit ang `required` attribute
-- **Inaayos** ang mga input gamit ang mga descriptive class names para sa madaling styling at JavaScript targeting
-- **Nagbibigay** ng malinaw na instruksyon para sa mga user na nagse-set up ng extension sa unang pagkakataon
+- **Nangangailangan** ng parehong field na mapunan bago isumite gamit ang `required` attribute
+- **Inaayos** ang mga input gamit ang mga deskriptibong class name para sa madaling pag-style at pag-target ng JavaScript
+- **Nagbibigay** ng malinaw na instruksyon para sa mga user na nagse-setup ng extension sa unang pagkakataon
 
-### Paggawa ng Results Display
+### Pagbuo ng Results Display
 
 Susunod, gumawa ng results area na magpapakita ng data ng carbon footprint. Idagdag ang HTML na ito sa ibaba ng form:
 
@@ -257,16 +366,16 @@ Susunod, gumawa ng results area na magpapakita ng data ng carbon footprint. Idag
 </div>
 ```
 
-**Paghiwa-hiwalay ng ibinibigay ng istrukturang ito:**
+**Paghiwa-hiwalay kung ano ang ibinibigay ng istrukturang ito:**
 - **`loading`**: **Nagpapakita** ng loading message habang kinukuha ang data ng API
 - **`errors`**: **Nagpapakita** ng error messages kung nabigo ang API calls o invalid ang data
-- **`data`**: **Naglalaman** ng raw data para sa debugging purposes habang nasa development
+- **`data`**: **Naglalaman** ng raw data para sa debugging sa panahon ng development
 - **`result-container`**: **Nagpapakita** ng formatted na impormasyon ng carbon footprint sa mga user
 - **`clear-btn`**: **Nagbibigay-daan** sa mga user na baguhin ang kanilang rehiyon at muling i-configure ang extension
 
-### Pag-set Up ng Build Process
+### Pag-setup ng Build Process
 
-Ngayon ay i-install natin ang mga dependency ng proyekto at subukan ang build process:
+Ngayon, i-install natin ang mga dependencies ng proyekto at i-test ang build process:
 
 ```bash
 npm install
@@ -274,61 +383,177 @@ npm install
 
 **Ano ang nagagawa ng proseso ng pag-install na ito:**
 - **Nagda-download** ng Webpack at iba pang development dependencies na tinukoy sa `package.json`
-- **Kinokompile** ang build toolchain para sa pag-compile ng modernong JavaScript
-- **Ipinaprepara** ang development environment para sa pagbuo at testing ng extension
-- **Nagpapagana** ng code bundling, optimization, at mga cross-browser compatibility features
+- **Kinokonfigura** ang build toolchain para sa pag-compile ng modernong JavaScript
+- **Ipinaprepara** ang development environment para sa pagbuo at pag-test ng extension
+- **Nagpapagana** ng code bundling, optimization, at cross-browser compatibility features
 
 > 💡 **Insight sa Build Process**: Binubuo ng Webpack ang iyong source code mula sa `/src/index.js` papunta sa `/dist/main.js`. Ang prosesong ito ay nag-o-optimize ng iyong code para sa production at tinitiyak ang compatibility sa browser.
 
 ### Pagsubok ng Iyong Progreso
 
-Sa puntong ito, maaari mong subukan ang iyong extension:
+Sa puntong ito, maaari mo nang i-test ang iyong extension:
+1. **Patakbuhin** ang build command upang i-compile ang iyong code  
+2. **I-load** ang extension sa iyong browser gamit ang developer mode  
+3. **Siguraduhin** na tama ang pagpapakita ng form at mukhang propesyonal  
+4. **Suriin** na maayos ang pagkaka-align at gumagana ang lahat ng elemento ng form  
+
+**Mga Naabot Mo:**  
+- **Nabuo** ang pundasyon ng HTML structure para sa iyong extension  
+- **Nilikha** ang parehong configuration at results interfaces gamit ang tamang semantic markup  
+- **Na-set up** ang modernong development workflow gamit ang mga industry-standard tools  
+- **Naihanda** ang pundasyon para sa pagdaragdag ng interactive na JavaScript functionality  
+
+### 🔄 **Pedagogical Check-in**  
+**Pag-unlad sa Extension Development**: Suriin ang iyong kaalaman bago magpatuloy:  
+- ✅ Kaya mo bang ipaliwanag ang layunin ng bawat file sa project structure?  
+- ✅ Naiintindihan mo ba kung paano binabago ng build process ang iyong source code?  
+- ✅ Bakit natin hinihiwalay ang configuration at results sa magkaibang UI sections?  
+- ✅ Paano sinusuportahan ng form structure ang usability at accessibility?  
+
+**Pag-unawa sa Development Workflow**: Dapat kaya mo nang:  
+1. **Baguhin** ang HTML at CSS para sa interface ng iyong extension  
+2. **Patakbuhin** ang build command upang i-compile ang iyong mga pagbabago  
+3. **I-reload** ang extension sa iyong browser upang subukan ang mga update  
+4. **I-debug** ang mga isyu gamit ang browser developer tools  
+
+Natapos mo na ang unang yugto ng pag-develop ng browser extension. Tulad ng mga Wright brothers na kailangang maunawaan ang aerodynamics bago makalipad, ang pag-unawa sa mga pundasyong konsepto na ito ay naghahanda sa iyo para sa pagbuo ng mas kumplikadong interactive na features sa susunod na aralin.  
+
+## Hamon sa GitHub Copilot Agent 🚀  
+
+Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:  
+
+**Deskripsyon:** Pagandahin ang browser extension sa pamamagitan ng pagdaragdag ng form validation at user feedback features upang mapabuti ang karanasan ng user kapag naglalagay ng API keys at region codes.  
 
-1. **Patakbuhin** ang build command upang i-compile ang iyong code
-2. **I-load** ang extension sa iyong browser gamit ang developer mode
-3. **I-verify** na ang form ay nagpapakita nang tama at mukhang propesyonal
-4. **Suriin** na ang lahat ng form elements ay maayos na naka-align at functional
+**Prompt:** Gumawa ng mga JavaScript validation functions na sumusuri kung ang API key field ay may hindi bababa sa 20 characters at kung ang region code ay sumusunod sa tamang format (halimbawa, 'US-NEISO'). Magdagdag ng visual feedback sa pamamagitan ng pagbabago ng input border colors sa berde para sa valid inputs at pula para sa invalid ones. Magdagdag din ng toggle feature upang ipakita/itago ang API key para sa seguridad.  
 
-**Ano ang iyong nagawa:**
-- **Naitayo** ang pundasyong HTML structure para sa iyong extension
-- **Nagawa** ang parehong configuration at results interfaces na may tamang semantic markup
-- **Na-set up** ang modernong development workflow gamit ang mga industry-standard tools
-- **Naiprepara** ang pundasyon para sa pagdaragdag ng interactive na JavaScript functionality
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.  
 
-Natapos mo na ang unang yugto ng pagbuo ng browser extension. Tulad ng kailangan ng Wright brothers na maunawaan ang aerodynamics bago makamit ang paglipad, ang pag-unawa sa mga pundasyong konsepto na ito ay naghahanda sa iyo para sa pagbuo ng mas kumplikadong interactive na mga tampok sa susunod na aralin.
+## 🚀 Hamon  
 
-## Hamon ng GitHub Copilot Agent 🚀
+Tingnan ang isang browser extension store at mag-install ng isa sa iyong browser. Maaari mong suriin ang mga file nito sa mga kawili-wiling paraan. Ano ang iyong natuklasan?  
 
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
-**Deskripsyon:** Pagandahin ang browser extension sa pamamagitan ng pagdaragdag ng form validation at mga tampok ng feedback para mapabuti ang karanasan ng user kapag naglalagay ng API keys at mga region code.
+## Post-Lecture Quiz  
 
-**Prompt:** Gumawa ng mga JavaScript validation function na susuri kung ang field ng API key ay may hindi bababa sa 20 karakter at kung ang region code ay sumusunod sa tamang format (tulad ng 'US-NEISO'). Magdagdag ng visual feedback sa pamamagitan ng pagbabago ng kulay ng border ng input sa berde para sa tamang input at pula para sa maling input. Magdagdag din ng toggle feature para ipakita/itago ang API key para sa seguridad.
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/24)  
 
-Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+## Review at Sariling Pag-aaral  
 
-## 🚀 Hamon
+Sa araling ito, natutunan mo ang kaunting kasaysayan ng web browser; samantalahin ang pagkakataong ito upang matuto pa tungkol sa kung paano inisip ng mga imbentor ng World Wide Web ang paggamit nito sa pamamagitan ng pagbabasa ng higit pa tungkol sa kasaysayan nito. Ilang kapaki-pakinabang na site ay:  
 
-Tingnan ang isang browser extension store at mag-install ng isa sa iyong browser. Maaari mong suriin ang mga file nito sa mga kawili-wiling paraan. Ano ang iyong natuklasan?
+[The History of Web Browsers](https://www.mozilla.org/firefox/browsers/browser-history/)  
 
-## Post-Lecture Quiz
+[History of the Web](https://webfoundation.org/about/vision/history-of-the-web/)  
 
-[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/24)
+[An interview with Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  
 
-## Review & Pag-aaral sa Sarili
+### ⚡ **Mga Pwede Mong Gawin sa Loob ng 5 Minuto**  
+- [ ] Buksan ang Chrome/Edge extensions page (chrome://extensions) at tuklasin ang mga naka-install mo  
+- [ ] Tingnan ang Network tab ng DevTools ng iyong browser habang naglo-load ng webpage  
+- [ ] Subukang tingnan ang page source (Ctrl+U) upang makita ang HTML structure  
+- [ ] I-inspect ang anumang elemento ng webpage at baguhin ang CSS nito sa DevTools  
 
-Sa araling ito, natutunan mo nang kaunti tungkol sa kasaysayan ng web browser; samantalahin ang pagkakataong ito upang matuto tungkol sa kung paano inisip ng mga imbentor ng World Wide Web ang paggamit nito sa pamamagitan ng pagbabasa pa tungkol sa kasaysayan nito. Ilang kapaki-pakinabang na site ay:
+### 🎯 **Mga Pwede Mong Makamit sa Loob ng Isang Oras**  
+- [ ] Tapusin ang post-lesson quiz at unawain ang mga pangunahing kaalaman sa browser  
+- [ ] Gumawa ng simpleng manifest.json file para sa isang browser extension  
+- [ ] Bumuo ng simpleng "Hello World" extension na nagpapakita ng popup  
+- [ ] Subukan ang pag-load ng iyong extension sa developer mode  
+- [ ] Tuklasin ang dokumentasyon ng browser extension para sa iyong target na browser  
+
+### 📅 **Ang Iyong Isang Linggong Extension Journey**  
+- [ ] Tapusin ang isang functional browser extension na may tunay na gamit  
+- [ ] Matutunan ang tungkol sa content scripts, background scripts, at popup interactions  
+- [ ] Masterin ang browser APIs tulad ng storage, tabs, at messaging  
+- [ ] Magdisenyo ng user-friendly interfaces para sa iyong extension  
+- [ ] Subukan ang iyong extension sa iba't ibang website at senaryo  
+- [ ] I-publish ang iyong extension sa extension store ng browser  
+
+### 🌟 **Ang Iyong Buwanang Browser Development**  
+- [ ] Bumuo ng maraming extension na naglutas ng iba't ibang problema ng user  
+- [ ] Matutunan ang advanced browser APIs at mga pinakamahusay na kasanayan sa seguridad  
+- [ ] Mag-ambag sa mga open source browser extension projects  
+- [ ] Masterin ang cross-browser compatibility at progressive enhancement  
+- [ ] Gumawa ng mga extension development tools at templates para sa iba  
+- [ ] Maging eksperto sa browser extension na tumutulong sa ibang mga developer  
+
+## 🎯 Ang Iyong Browser Extension Mastery Timeline  
+
+```mermaid
+timeline
+    title Browser Extension Development Progression
+    
+    section Foundation (15 minutes)
+        Browser Understanding: Core architecture
+                              : Rendering process
+                              : Extension integration points
+        
+    section Setup (20 minutes)
+        Development Environment: Project structure
+                               : Build tools configuration
+                               : Browser developer mode
+                               : Extension loading process
+        
+    section Interface Design (25 minutes)
+        User Experience: HTML structure
+                       : CSS styling
+                       : Form validation
+                       : Responsive design
+        
+    section Core Functionality (35 minutes)
+        JavaScript Integration: Event handling
+                              : API interactions
+                              : Data storage
+                              : Error handling
+        
+    section Browser APIs (45 minutes)
+        Platform Integration: Permissions system
+                            : Storage APIs
+                            : Tab management
+                            : Context menus
+        
+    section Advanced Features (1 week)
+        Professional Extensions: Background scripts
+                               : Content scripts
+                               : Cross-browser compatibility
+                               : Performance optimization
+        
+    section Publishing (2 weeks)
+        Distribution: Store submission
+                   : Review process
+                   : User feedback
+                   : Update management
+        
+    section Expert Level (1 month)
+        Extension Ecosystem: Advanced APIs
+                           : Security best practices
+                           : Enterprise features
+                           : Framework integration
+```
+  
+### 🛠️ Buod ng Iyong Extension Development Toolkit  
 
-[Ang Kasaysayan ng Web Browsers](https://www.mozilla.org/firefox/browsers/browser-history/)
+Pagkatapos ng araling ito, mayroon ka na:  
+- **Kaalaman sa Browser Architecture**: Pag-unawa sa rendering engines, security models, at extension integration  
+- **Development Environment**: Modernong toolchain na may Webpack, NPM, at debugging capabilities  
+- **UI/UX Foundation**: Semantic HTML structure na may progressive disclosure patterns  
+- **Security Awareness**: Pag-unawa sa browser permissions at ligtas na development practices  
+- **Cross-Browser Concepts**: Kaalaman sa compatibility considerations at testing approaches  
+- **API Integration**: Pundasyon para sa pakikipag-ugnayan sa external data sources  
+- **Professional Workflow**: Industry-standard development at testing procedures  
 
-[Kasaysayan ng Web](https://webfoundation.org/about/vision/history-of-the-web/)
+**Mga Aplikasyon sa Tunay na Mundo**: Ang mga kasanayang ito ay direktang naaangkop sa:  
+- **Web Development**: Single-page applications at progressive web apps  
+- **Desktop Applications**: Electron at web-based desktop software  
+- **Mobile Development**: Hybrid apps at web-based mobile solutions  
+- **Enterprise Tools**: Internal productivity applications at workflow automation  
+- **Open Source**: Pag-ambag sa browser extension projects at web standards  
 
-[Isang panayam kay Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+**Next Level**: Handa ka nang magdagdag ng interactive functionality, magtrabaho gamit ang browser APIs, at gumawa ng mga extension na naglutas ng tunay na problema ng user!  
 
-## Takdang-Aralin
+## Assignment  
 
-[Baguhin ang estilo ng iyong extension](assignment.md)
+[Restyle your extension](assignment.md)  
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na awtoritatibong pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/tl/5-browser-extension/2-forms-browsers-local-storage/README.md
index 67b7b40369..234140d270 100644
--- a/translations/tl/5-browser-extension/2-forms-browsers-local-storage/README.md
+++ b/translations/tl/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -1,13 +1,30 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8c8cd4af6086cc1d47e1d43aa4983d20",
-  "translation_date": "2025-10-22T15:44:14+00:00",
+  "original_hash": "2b6203a48c48d8234e0948353b47d84e",
+  "translation_date": "2025-11-03T14:08:38+00:00",
   "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
   "language_code": "tl"
 }
 -->
-# Proyekto ng Browser Extension Bahagi 2: Tumawag sa API, Gumamit ng Local Storage
+# Browser Extension Project Part 2: Gumamit ng API, Local Storage
+
+```mermaid
+journey
+    title Your API Integration & Storage Journey
+    section Foundation
+      Setup DOM references: 3: Student
+      Add event listeners: 4: Student
+      Handle form submission: 4: Student
+    section Data Management
+      Implement local storage: 4: Student
+      Build API calls: 5: Student
+      Handle async operations: 5: Student
+    section User Experience
+      Add error handling: 5: Student
+      Create loading states: 4: Student
+      Polish interactions: 5: Student
+```
 
 ## Pre-Lecture Quiz
 
@@ -17,19 +34,76 @@ CO_OP_TRANSLATOR_METADATA:
 
 Naalala mo ba ang browser extension na sinimulan mong gawin? Sa ngayon, mayroon kang magandang form, ngunit ito ay static pa rin. Ngayon, bibigyan natin ito ng buhay sa pamamagitan ng pagkonekta sa totoong data at pagbibigay ng memorya.
 
-Isipin ang mga computer ng Apollo mission control - hindi lang sila nagpapakita ng nakapirming impormasyon. Patuloy silang nakikipag-ugnayan sa spacecraft, ina-update gamit ang telemetry data, at naaalala ang mahahalagang parameter ng misyon. Ganitong uri ng dynamic na pag-uugali ang itatayo natin ngayon. Ang iyong extension ay makakakuha ng totoong environmental data mula sa internet at maaalala ang iyong mga setting para sa susunod.
-
-Ang API integration ay maaaring mukhang kumplikado, ngunit ito ay talagang pagtuturo sa iyong code kung paano makipag-usap sa ibang mga serbisyo. Kung ikaw ay kumukuha ng data ng panahon, mga feed ng social media, o impormasyon tungkol sa carbon footprint tulad ng gagawin natin ngayon, ito ay tungkol sa pagtatatag ng mga digital na koneksyon. Susuriin din natin kung paano maaaring mag-imbak ng impormasyon ang mga browser - katulad ng kung paano ginamit ng mga library ang mga card catalog upang maalala kung saan naroroon ang mga libro.
-
-Sa pagtatapos ng araling ito, magkakaroon ka ng browser extension na kumukuha ng totoong data, nag-iimbak ng mga kagustuhan ng user, at nagbibigay ng maayos na karanasan. Simulan na natin!
-
-✅ Sundin ang mga naka-number na segment sa mga kaukulang file upang malaman kung saan ilalagay ang iyong code.
-
-## I-set up ang mga elemento na gagamitin sa extension
-
-Bago manipulahin ng iyong JavaScript ang interface, kailangan nito ng mga reference sa mga partikular na HTML element. Isipin ito na parang teleskopyo na kailangang itutok sa mga partikular na bituin - bago mapag-aralan ni Galileo ang mga buwan ng Jupiter, kailangan niyang hanapin at ituon ang Jupiter mismo.
+Isipin ang mga computer ng Apollo mission control - hindi lang sila nagpapakita ng nakapirming impormasyon. Patuloy silang nakikipag-ugnayan sa spacecraft, ina-update gamit ang telemetry data, at inaalala ang mahahalagang parameter ng misyon. Ganitong uri ng dynamic na pag-uugali ang itatayo natin ngayon. Ang iyong extension ay makakakuha ng totoong environmental data mula sa internet at maaalala ang iyong mga setting para sa susunod.
+
+Ang API integration ay maaaring mukhang kumplikado, ngunit ito ay simpleng pagtuturo sa iyong code kung paano makipag-usap sa ibang mga serbisyo. Kung ikaw man ay kumukuha ng weather data, social media feeds, o impormasyon tungkol sa carbon footprint tulad ng gagawin natin ngayon, ito ay tungkol sa pagtatatag ng mga digital na koneksyon. Tatalakayin din natin kung paano maaaring mag-imbak ng impormasyon ang mga browser - katulad ng kung paano ginamit ng mga library ang card catalogs para maalala kung saan nakalagay ang mga libro.
+
+Sa pagtatapos ng araling ito, magkakaroon ka ng browser extension na kumukuha ng totoong data, nag-iimbak ng mga preference ng user, at nagbibigay ng maayos na karanasan. Simulan na natin!
+
+```mermaid
+mindmap
+  root((Dynamic Extensions))
+    DOM Manipulation
+      Element Selection
+      Event Handling
+      State Management
+      UI Updates
+    Local Storage
+      Data Persistence
+      Key-Value Pairs
+      Session Management
+      User Preferences
+    API Integration
+      HTTP Requests
+      Authentication
+      Data Parsing
+      Error Handling
+    Async Programming
+      Promises
+      Async/Await
+      Error Catching
+      Non-blocking Code
+    User Experience
+      Loading States
+      Error Messages
+      Smooth Transitions
+      Data Validation
+```
 
-Sa iyong `index.js` file, gagawa tayo ng mga `const` variable na kumukuha ng mga reference sa bawat mahalagang elemento ng form. Katulad ito ng kung paano nilalagyan ng label ng mga siyentipiko ang kanilang kagamitan - sa halip na maghanap sa buong laboratoryo sa bawat oras, maaari nilang direktang ma-access ang kanilang kailangan.
+✅ Sundin ang mga numeradong segment sa mga kaukulang file para malaman kung saan ilalagay ang iyong code
+
+## I-set up ang mga elementong gagamitin sa extension
+
+Bago manipulahin ng iyong JavaScript ang interface, kailangan nito ng mga reference sa mga partikular na HTML element. Isipin ito na parang teleskopyo na kailangang itutok sa mga partikular na bituin - bago mapag-aralan ni Galileo ang mga buwan ng Jupiter, kailangan niyang hanapin at ituon ang teleskopyo sa Jupiter mismo.
+
+Sa iyong `index.js` file, gagawa tayo ng mga `const` variable na kumukuha ng mga reference sa bawat mahalagang element ng form. Katulad ito ng kung paano nilalagyan ng label ng mga siyentipiko ang kanilang kagamitan - sa halip na maghanap sa buong laboratoryo sa bawat pagkakataon, maaari nilang direktang ma-access ang kanilang kailangan.
+
+```mermaid
+flowchart LR
+    A[JavaScript Code] --> B[document.querySelector]
+    B --> C[CSS Selectors]
+    C --> D[HTML Elements]
+    
+    D --> E[".form-data"]
+    D --> F[".region-name"]
+    D --> G[".api-key"]
+    D --> H[".loading"]
+    D --> I[".errors"]
+    D --> J[".result-container"]
+    
+    E --> K[Form Element]
+    F --> L[Input Field]
+    G --> M[Input Field]
+    H --> N[UI Element]
+    I --> O[UI Element]
+    J --> P[UI Element]
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style K fill:#fff3e0
+    style L fill:#fff3e0
+    style M fill:#fff3e0
+```
 
 ```javascript
 // form fields
@@ -48,15 +122,38 @@ const clearBtn = document.querySelector('.clear-btn');
 ```
 
 **Narito ang ginagawa ng code na ito:**
-- **Kinukuha** ang mga elemento ng form gamit ang `document.querySelector()` na may CSS class selectors
-- **Gumagawa** ng mga reference sa mga input field para sa pangalan ng rehiyon at API key
-- **Nag-eestablish** ng mga koneksyon sa mga elemento ng display para sa carbon usage data
+- **Kinukuha** ang mga element ng form gamit ang `document.querySelector()` na may CSS class selectors
+- **Gumagawa** ng mga reference sa input fields para sa pangalan ng rehiyon at API key
+- **Nag-eestablish** ng koneksyon sa mga element ng display para sa carbon usage data
 - **Nagse-set up** ng access sa mga UI element tulad ng loading indicators at error messages
-- **Nag-iimbak** ng bawat reference ng elemento sa isang `const` variable para sa madaling paggamit sa buong code
-
-## Magdagdag ng event listeners
-
-Ngayon gagawin natin ang iyong extension na tumugon sa mga aksyon ng user. Ang mga event listener ay paraan ng iyong code upang subaybayan ang mga interaksyon ng user. Isipin ito na parang mga operator sa mga maagang telephone exchanges - nakikinig sila para sa mga papasok na tawag at ikinokonekta ang tamang circuit kapag may gustong tumawag.
+- **Nag-iimbak** ng bawat reference ng element sa isang `const` variable para madaling magamit sa buong code
+
+## Magdagdag ng mga event listener
+
+Ngayon gagawin natin ang iyong extension na tumugon sa mga aksyon ng user. Ang mga event listener ay paraan ng iyong code para subaybayan ang mga interaksyon ng user. Isipin ito na parang mga operator sa mga unang telephone exchanges - nakikinig sila sa mga tawag at ikinokonekta ang tamang circuit kapag may gustong tumawag.
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Form
+    participant JavaScript
+    participant API
+    participant Storage
+    
+    User->>Form: Fills out region/API key
+    User->>Form: Clicks submit
+    Form->>JavaScript: Triggers submit event
+    JavaScript->>JavaScript: handleSubmit(e)
+    JavaScript->>Storage: Save user preferences
+    JavaScript->>API: Fetch carbon data
+    API->>JavaScript: Returns data
+    JavaScript->>Form: Update UI with results
+    
+    User->>Form: Clicks clear button
+    Form->>JavaScript: Triggers click event
+    JavaScript->>Storage: Clear saved data
+    JavaScript->>Form: Reset to initial state
+```
 
 ```javascript
 form.addEventListener('submit', (e) => handleSubmit(e));
@@ -65,18 +162,28 @@ init();
 ```
 
 **Pag-unawa sa mga konsepto:**
-- **Nag-a-attach** ng submit listener sa form na nagti-trigger kapag pinindot ng user ang Enter o ang submit button
+- **Nag-a-attach** ng submit listener sa form na nagti-trigger kapag pinindot ng user ang Enter o click submit
 - **Nagkokonekta** ng click listener sa clear button para i-reset ang form
 - **Nagpapasa** ng event object `(e)` sa mga handler function para sa karagdagang kontrol
-- **Tumatawag** sa `init()` function kaagad upang i-set up ang initial state ng iyong extension
+- **Tumatawag** sa `init()` function kaagad para i-set up ang initial state ng iyong extension
 
-✅ Pansinin ang shorthand arrow function syntax na ginamit dito. Ang modernong JavaScript na approach na ito ay mas malinis kaysa sa tradisyunal na function expressions, ngunit pareho silang gumagana nang maayos!
+✅ Pansinin ang shorthand arrow function syntax na ginamit dito. Ang modernong JavaScript approach na ito ay mas malinis kaysa sa tradisyunal na function expressions, ngunit pareho silang gumagana nang maayos!
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Event Handling**: Bago magpatuloy sa initialization, tiyaking kaya mong:
+- ✅ Ipaliwanag kung paano ikinokonekta ng `addEventListener` ang mga aksyon ng user sa mga JavaScript function
+- ✅ Unawain kung bakit natin ipinapasa ang event object `(e)` sa mga handler function
+- ✅ Kilalanin ang pagkakaiba ng `submit` at `click` events
+- ✅ Ilarawan kung kailan tumatakbo ang `init()` function at kung bakit
+
+**Mabilis na Self-Test**: Ano ang mangyayari kung nakalimutan mo ang `e.preventDefault()` sa isang form submission?
+*Sagot: Mare-reload ang page, mawawala ang lahat ng JavaScript state at maaabala ang karanasan ng user*
 
 ## Bumuo ng initialization at reset functions
 
-Gumawa tayo ng initialization logic para sa iyong extension. Ang `init()` function ay parang navigation system ng barko na nagche-check ng mga instrumento - tinutukoy nito ang kasalukuyang estado at ina-adjust ang interface nang naaayon. Tinitingnan nito kung may gumamit na sa iyong extension dati at ina-load ang kanilang mga nakaraang setting.
+Gagawa tayo ng initialization logic para sa iyong extension. Ang `init()` function ay parang navigation system ng barko na nagche-check sa mga instrumento nito - tinutukoy nito ang kasalukuyang estado at ina-adjust ang interface nang naaayon. Tinitingnan nito kung may gumamit na sa iyong extension dati at ina-load ang kanilang mga nakaraang setting.
 
-Ang `reset()` function ay nagbibigay sa mga user ng bagong simula - katulad ng kung paano nire-reset ng mga siyentipiko ang kanilang mga instrumento sa pagitan ng mga eksperimento upang matiyak ang malinis na data.
+Ang `reset()` function ay nagbibigay sa mga user ng bagong simula - katulad ng kung paano nire-reset ng mga siyentipiko ang kanilang mga instrumento sa pagitan ng mga eksperimento para masigurado ang malinis na data.
 
 ```javascript
 function init() {
@@ -112,42 +219,66 @@ function reset(e) {
 }
 ```
 
-**Pagbubuo ng mga nangyayari dito:**
-- **Kinukuha** ang naka-imbak na API key at rehiyon mula sa local storage ng browser
-- **Tinitingnan** kung ito ay unang beses na user (walang naka-imbak na credentials) o bumabalik na user
-- **Ipinapakita** ang setup form para sa mga bagong user at itinatago ang ibang mga elemento ng interface
+**Paghiwa-hiwalay kung ano ang nangyayari dito:**
+- **Kinukuha** ang naka-store na API key at rehiyon mula sa local storage ng browser
+- **Tinitingnan** kung ito ay unang beses na user (walang naka-store na credentials) o bumabalik na user
+- **Ipinapakita** ang setup form para sa mga bagong user at itinatago ang ibang mga element ng interface
 - **Ina-load** ang naka-save na data nang awtomatiko para sa mga bumabalik na user at ipinapakita ang reset option
 - **Pinamamahalaan** ang estado ng user interface batay sa available na data
 
 **Mga pangunahing konsepto tungkol sa Local Storage:**
-- **Nagpapanatili** ng data sa pagitan ng mga session ng browser (hindi tulad ng session storage)
+- **Nagpe-persist** ng data sa pagitan ng mga session ng browser (hindi tulad ng session storage)
 - **Nag-iimbak** ng data bilang key-value pairs gamit ang `getItem()` at `setItem()`
 - **Nagbabalik** ng `null` kapag walang data para sa isang partikular na key
-- **Nagbibigay** ng simpleng paraan upang maalala ang mga kagustuhan at setting ng user
+- **Nagbibigay** ng simpleng paraan para maalala ang mga preference at setting ng user
 
-> 💡 **Pag-unawa sa Browser Storage**: Ang [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ay parang pagbibigay ng persistent memory sa iyong extension. Isipin kung paano ang sinaunang Library of Alexandria ay nag-imbak ng mga scroll - nananatiling available ang impormasyon kahit na umalis at bumalik ang mga iskolar.
+> 💡 **Pag-unawa sa Browser Storage**: Ang [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ay parang nagbibigay ng persistent memory sa iyong extension. Isipin kung paano ang sinaunang Library of Alexandria ay nag-imbak ng mga scroll - nananatiling available ang impormasyon kahit umalis at bumalik ang mga iskolar.
 >
 > **Mga pangunahing katangian:**
-> - **Nagpapanatili** ng data kahit na isara mo ang browser
-> - **Nananatili** kahit na i-restart ang computer o mag-crash ang browser
-> - **Nagbibigay** ng malaking storage space para sa mga kagustuhan ng user
+> - **Nagpe-persist** ng data kahit na isara mo ang browser
+> - **Nananatili** kahit mag-restart ang computer o mag-crash ang browser
+> - **Nagbibigay** ng malawak na storage space para sa mga preference ng user
 > - **Nag-aalok** ng instant access nang walang network delays
 
-> **Mahalagang Paalala**: Ang browser extension mo ay may sariling hiwalay na local storage na iba sa regular na mga web page. Nagbibigay ito ng seguridad at pumipigil sa mga conflict sa ibang mga website.
-
-Makikita mo ang iyong naka-imbak na data sa pamamagitan ng pagbukas ng Developer Tools ng browser (F12), pagpunta sa **Application** tab, at pag-expand sa **Local Storage** section.
+> **Mahalagang Paalala**: Ang browser extension mo ay may sariling isolated local storage na hiwalay sa regular na mga web page. Nagbibigay ito ng seguridad at pinipigilan ang mga conflict sa ibang mga website.
+
+Makikita mo ang iyong naka-store na data sa pamamagitan ng pagbukas ng browser Developer Tools (F12), pagpunta sa **Application** tab, at pag-expand ng **Local Storage** section.
+
+```mermaid
+stateDiagram-v2
+    [*] --> CheckStorage: Extension starts
+    CheckStorage --> FirstTime: No stored data
+    CheckStorage --> Returning: Data found
+    
+    FirstTime --> ShowForm: Display setup form
+    ShowForm --> UserInput: User enters data
+    UserInput --> SaveData: Store in localStorage
+    SaveData --> FetchAPI: Get carbon data
+    
+    Returning --> LoadData: Read from localStorage
+    LoadData --> FetchAPI: Get carbon data
+    
+    FetchAPI --> ShowResults: Display data
+    ShowResults --> UserAction: User interacts
+    
+    UserAction --> Reset: Clear button clicked
+    UserAction --> ShowResults: View data
+    
+    Reset --> ClearStorage: Remove saved data
+    ClearStorage --> FirstTime: Back to setup
+```
 
 ![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.tl.png)
 
-> ⚠️ **Pagsasaalang-alang sa Seguridad**: Sa mga production application, ang pag-iimbak ng API keys sa LocalStorage ay may mga panganib sa seguridad dahil maa-access ng JavaScript ang data na ito. Para sa layunin ng pag-aaral, ang approach na ito ay maayos, ngunit ang mga totoong application ay dapat gumamit ng secure server-side storage para sa mga sensitibong credentials.
+> ⚠️ **Pagsasaalang-alang sa Seguridad**: Sa mga production application, ang pag-iimbak ng API keys sa LocalStorage ay may panganib sa seguridad dahil maa-access ito ng JavaScript. Para sa layunin ng pag-aaral, ang approach na ito ay maayos, ngunit ang mga totoong application ay dapat gumamit ng secure server-side storage para sa mga sensitibong credentials.
 
-## Paano i-submit ang form
+## I-handle ang form submission
 
-Ngayon, haharapin natin kung ano ang mangyayari kapag may nag-submit ng iyong form. Sa default, nire-reload ng mga browser ang page kapag na-submit ang mga form, ngunit i-intercept natin ang behavior na ito upang lumikha ng mas maayos na karanasan.
+Ngayon, hahawakan natin kung ano ang mangyayari kapag may nagsumite ng iyong form. Sa default, nire-reload ng mga browser ang page kapag nagsusumite ng form, ngunit i-intercept natin ang behavior na ito para makagawa ng mas maayos na karanasan.
 
-Ang approach na ito ay katulad ng kung paano hinahandle ng mission control ang komunikasyon ng spacecraft - sa halip na i-reset ang buong sistema para sa bawat transmission, pinapanatili nila ang tuloy-tuloy na operasyon habang pinoproseso ang bagong impormasyon.
+Ang approach na ito ay katulad ng kung paano hinahandle ng mission control ang komunikasyon ng spacecraft - sa halip na i-reset ang buong sistema sa bawat transmission, pinapanatili nila ang tuloy-tuloy na operasyon habang pinoproseso ang bagong impormasyon.
 
-Gumawa ng function na kumukuha ng event ng form submission at nag-eextract ng input ng user:
+Gumawa ng function na kumukuha ng form submission event at nag-eextract ng input ng user:
 
 ```javascript
 function handleSubmit(e) {
@@ -159,14 +290,14 @@ function handleSubmit(e) {
 **Sa itaas, ginawa natin ang:**
 - **Pinipigilan** ang default na behavior ng form submission na magre-refresh ng page
 - **Kinukuha** ang mga input value ng user mula sa API key at region fields
-- **Ipinapasa** ang data ng form sa `setUpUser()` function para sa pagproseso
+- **Ipinapasa** ang form data sa `setUpUser()` function para sa processing
 - **Pinapanatili** ang single-page application behavior sa pamamagitan ng pag-iwas sa page reloads
 
-✅ Tandaan na ang iyong HTML form fields ay may `required` attribute, kaya awtomatikong tinitiyak ng browser na magbigay ang user ng parehong API key at rehiyon bago tumakbo ang function na ito.
+✅ Tandaan na ang iyong HTML form fields ay may `required` attribute, kaya awtomatikong sine-check ng browser na magbigay ang user ng parehong API key at rehiyon bago tumakbo ang function na ito.
 
-## I-set up ang mga kagustuhan ng user
+## I-set up ang mga preference ng user
 
-Ang `setUpUser` function ang responsable sa pag-save ng credentials ng user at pag-initiate ng unang API call. Ito ay lumilikha ng maayos na transition mula sa setup patungo sa pagpapakita ng resulta.
+Ang `setUpUser` function ang responsable sa pag-save ng credentials ng user at pag-initiate ng unang API call. Ginagawa nitong maayos ang transition mula sa setup patungo sa pagpapakita ng resulta.
 
 ```javascript
 function setUpUser(apiKey, regionName) {
@@ -186,36 +317,66 @@ function setUpUser(apiKey, regionName) {
 
 **Hakbang-hakbang, narito ang nangyayari:**
 - **Sine-save** ang API key at pangalan ng rehiyon sa local storage para sa susunod na paggamit
-- **Ipinapakita** ang loading indicator upang ipaalam sa user na kumukuha ng data
+- **Ipinapakita** ang loading indicator para ipaalam sa user na kumukuha ng data
 - **Nililinis** ang anumang naunang error messages mula sa display
-- **Ipinapakita** ang clear button para sa user na i-reset ang kanilang mga setting sa hinaharap
-- **Ini-initiate** ang API call upang kumuha ng totoong carbon usage data
+- **Ipinapakita** ang clear button para sa user na i-reset ang kanilang settings sa susunod
+- **Ini-initiate** ang API call para kumuha ng totoong carbon usage data
 
-Ang function na ito ay lumilikha ng seamless user experience sa pamamagitan ng pamamahala ng parehong data persistence at mga update sa user interface sa isang coordinated na aksyon.
+Ang function na ito ay lumilikha ng seamless user experience sa pamamagitan ng sabay-sabay na pamamahala ng data persistence at mga update sa user interface.
 
-## Ipakita ang carbon usage data
+## I-display ang carbon usage data
 
-Ngayon, ikokonekta natin ang iyong extension sa mga external data sources sa pamamagitan ng APIs. Binabago nito ang iyong extension mula sa isang standalone tool patungo sa isang bagay na maaaring ma-access ang real-time na impormasyon mula sa internet.
+Ngayon, ikokonekta natin ang iyong extension sa mga external data sources sa pamamagitan ng APIs. Binabago nito ang iyong extension mula sa standalone tool patungo sa isang bagay na makakakuha ng real-time na impormasyon mula sa internet.
 
 **Pag-unawa sa APIs**
 
-[APIs](https://www.webopedia.com/TERM/A/API.html) ang paraan kung paano nagkakaroon ng komunikasyon ang iba't ibang application sa isa't isa. Isipin ito na parang telegraph system na nagkonekta sa mga malalayong lungsod noong ika-19 na siglo - ang mga operator ay nagpapadala ng mga request sa malalayong istasyon at tumatanggap ng mga sagot na may hinihinging impormasyon. Sa tuwing nagche-check ka ng social media, nagtatanong sa voice assistant, o gumagamit ng delivery app, ang APIs ang nagpapadali sa mga data exchanges.
+[APIs](https://www.webopedia.com/TERM/A/API.html) ang paraan kung paano nag-uusap ang iba't ibang application sa isa't isa. Isipin ito na parang telegraph system na nagkonekta sa mga malalayong lungsod noong ika-19 na siglo - nagpapadala ang mga operator ng mga request sa malalayong istasyon at tumatanggap ng mga sagot na may hinihinging impormasyon. Sa tuwing nagche-check ka ng social media, nagtatanong sa voice assistant, o gumagamit ng delivery app, ang APIs ang nagpapadali sa mga data exchanges.
+
+```mermaid
+flowchart TD
+    A[Your Extension] --> B[HTTP Request]
+    B --> C[CO2 Signal API]
+    C --> D{Valid Request?}
+    D -->|Yes| E[Query Database]
+    D -->|No| F[Return Error]
+    E --> G[Carbon Data]
+    G --> H[JSON Response]
+    H --> I[Your Extension]
+    F --> I
+    I --> J[Update UI]
+    
+    subgraph "API Request"
+        K[Headers: auth-token]
+        L[Parameters: countryCode]
+        M[Method: GET]
+    end
+    
+    subgraph "API Response"
+        N[Carbon Intensity]
+        O[Fossil Fuel %]
+        P[Timestamp]
+    end
+    
+    style C fill:#e8f5e8
+    style G fill:#fff3e0
+    style I fill:#e1f5fe
+```
 
 **Mga pangunahing konsepto tungkol sa REST APIs:**
 - **REST** ay nangangahulugang 'Representational State Transfer'
-- **Gumagamit** ng standard HTTP methods (GET, POST, PUT, DELETE) upang makipag-ugnayan sa data
-- **Nagbabalik** ng data sa predictable formats, karaniwang JSON
+- **Gumagamit** ng standard HTTP methods (GET, POST, PUT, DELETE) para makipag-ugnayan sa data
+- **Nagbabalik** ng data sa predictable formats, kadalasang JSON
 - **Nagbibigay** ng consistent, URL-based endpoints para sa iba't ibang uri ng request
 
-✅ Ang [CO2 Signal API](https://www.co2signal.com/) na gagamitin natin ay nagbibigay ng real-time carbon intensity data mula sa mga electrical grid sa buong mundo. Nakakatulong ito sa mga user na maunawaan ang environmental impact ng kanilang electricity usage!
+✅ Ang [CO2 Signal API](https://www.co2signal.com/) na gagamitin natin ay nagbibigay ng real-time na carbon intensity data mula sa mga electrical grid sa buong mundo. Nakakatulong ito sa mga user na maunawaan ang environmental impact ng kanilang electricity usage!
 
-> 💡 **Pag-unawa sa Asynchronous JavaScript**: Ang [`async` keyword](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) ay nagbibigay-daan sa iyong code na mag-handle ng maraming operasyon nang sabay-sabay. Kapag humihiling ka ng data mula sa server, ayaw mong mag-freeze ang buong extension - parang air traffic control na humihinto sa lahat ng operasyon habang naghihintay ng sagot mula sa isang eroplano.
+> 💡 **Pag-unawa sa Asynchronous JavaScript**: Ang [`async` keyword](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) ay nagbibigay-daan sa iyong code na mag-handle ng maraming operasyon nang sabay-sabay. Kapag humihiling ka ng data mula sa server, ayaw mong mag-freeze ang buong extension - parang air traffic control na tumitigil sa lahat ng operasyon habang naghihintay ng sagot mula sa isang eroplano.
 >
 > **Mga pangunahing benepisyo:**
 > - **Pinapanatili** ang responsiveness ng extension habang naglo-load ang data
-> - **Pinapayagan** ang ibang code na magpatuloy sa pag-execute habang may network requests
+> - **Pinapayagan** ang ibang code na magpatuloy sa pagtakbo habang may network requests
 > - **Pinapaganda** ang readability ng code kumpara sa tradisyunal na callback patterns
-> - **Nagbibigay** ng graceful error handling para sa mga network issues
+> - **Nagbibigay-daan** sa maayos na error handling para sa mga network issues
 
 Narito ang isang mabilis na video tungkol sa `async`:
 
@@ -223,7 +384,34 @@ Narito ang isang mabilis na video tungkol sa `async`:
 
 > 🎥 I-click ang imahe sa itaas para sa video tungkol sa async/await.
 
-Gumawa ng function upang kumuha at ipakita ang carbon usage data:
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Async Programming**: Bago sumabak sa API function, tiyaking nauunawaan mo:
+- ✅ Bakit natin ginagamit ang `async/await` sa halip na i-block ang buong extension
+- ✅ Paano hinahandle ng `try/catch` blocks ang mga network error nang maayos
+- ✅ Ang pagkakaiba ng synchronous at asynchronous operations
+- ✅ Bakit maaaring mag-fail ang API calls at paano ito hinahandle
+
+**Real-World Connection**: Isipin ang mga pang-araw-araw na async na halimbawa:
+- **Pag-order ng pagkain**: Hindi ka naghihintay sa kusina - makakakuha ka ng resibo at magpapatuloy sa ibang aktibidad
+- **Pagpapadala ng email**: Hindi nag-freeze ang email app habang nagpapadala - maaari kang gumawa ng iba pang email
+- **Paglo-load ng web pages**: Progressive na naglo-load ang mga imahe habang maaari mo nang basahin ang teksto
+
+**API Authentication Flow**:
+```mermaid
+sequenceDiagram
+    participant Ext as Extension
+    participant API as CO2 Signal API
+    participant DB as Database
+    
+    Ext->>API: Request with auth-token
+    API->>API: Validate token
+    API->>DB: Query carbon data
+    DB->>API: Return data
+    API->>Ext: JSON response
+    Ext->>Ext: Update UI
+```
+
+Gumawa ng function para kumuha at mag-display ng carbon usage data:
 
 ```javascript
 // Modern fetch API approach (no external dependencies needed)
@@ -274,74 +462,209 @@ async function displayCarbonUsage(apiKey, region) {
 }
 ```
 
-**Pagbubuo ng mga nangyayari dito:**
-- **Gumagamit** ng modernong `fetch()` API sa halip na mga external libraries tulad ng Axios para sa mas malinis, dependency-free na code
-- **Nagpapatupad** ng tamang error checking gamit ang `response.ok` upang ma-catch ang API failures nang maaga
-- **Nagha-handle** ng asynchronous operations gamit ang `async/await` para sa mas nababasang code flow
+**Paghiwa-hiwalay kung ano ang nangyayari dito:**
+- **Gumagamit** ng modernong `fetch()` API sa halip na external libraries tulad ng Axios para sa mas malinis, dependency-free na code
+- **Nag-iimplement** ng tamang error checking gamit ang `response.ok` para ma-catch ang API failures nang maaga
+- **Hinahandle** ang asynchronous operations gamit ang `async/await` para sa mas nababasang code flow
 - **Nag-aauthenticate** sa CO2 Signal API gamit ang `auth-token` header
 - **Nagpa-parse** ng JSON response data at kumukuha ng carbon intensity information
-- **Nag-a-update** ng maraming UI elements gamit ang formatted environmental data
-- **Nagbibigay** ng user-friendly error messages kapag nabigo ang API calls
+- **Ina-update** ang maraming UI element gamit ang formatted environmental data
+- **Nagbibigay** ng user-friendly error messages kapag nag-fail ang API calls
 
-**Mga modernong JavaScript concepts na ipinakita:**
+**Mga pangunahing modernong JavaScript concepts na ipinakita:**
 - **Template literals** gamit ang `${}` syntax para sa malinis na string formatting
-- **Error handling** gamit ang try/catch blocks para sa mas robust na applications
+- **Error handling** gamit ang try/catch blocks para sa robust applications
 - **Async/await** pattern para sa maayos na pag-handle ng network requests
-- **Object destructuring** upang kumuha ng partikular na data mula sa API responses
+- **Object destructuring** para makuha ang partikular na data mula sa API responses
 - **Method chaining** para sa maraming DOM manipulations
 
 ✅ Ang function na ito ay nagpapakita ng ilang mahahalagang konsepto sa web development - pakikipag-ugnayan sa mga external server, pag-handle ng authentication, pagproseso ng data, pag-update ng interface, at maayos na pag-handle ng errors. Ito ay mga pangunahing kasanayan na regular na ginagamit ng mga propesyonal na developer.
 
-🎉 **Ang iyong nagawa:** Nakagawa ka ng browser extension na:
+```mermaid
+flowchart TD
+    A[Start API Call] --> B[Fetch Request]
+    B --> C{Network Success?}
+    C -->|No| D[Network Error]
+    C -->|Yes| E{Response OK?}
+    E -->|No| F[API Error]
+    E -->|Yes| G[Parse JSON]
+    G --> H{Valid Data?}
+    H -->|No| I[Data Error]
+    H -->|Yes| J[Update UI]
+    
+    D --> K[Show Error Message]
+    F --> K
+    I --> K
+    J --> L[Hide Loading]
+    K --> L
+    
+    style A fill:#e1f5fe
+    style J fill:#e8f5e8
+    style K fill:#ffebee
+    style L fill:#f3e5f5
+```
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Buong Sistema**: Tiyaking master mo ang buong flow:
+- ✅ Paano ang DOM references ay nagbibigay-daan sa JavaScript na kontrolin ang interface
+- ✅ Bakit ang local storage ay lumilikha ng persistence sa pagitan ng mga session ng browser
+- ✅ Paano ang async/await ay gumagawa ng API calls nang hindi nag-freeze ang extension
+- ✅ Ano ang nangyayari kapag nag-fail ang API calls at paano hinahandle ang errors
+- ✅ Bakit ang user experience ay may kasamang loading states at error messages
+
+🎉 **Ano ang iyong na-accomplish:** Nakagawa ka ng browser extension na:
 - **Kumokonekta** sa internet at kumukuha ng totoong environmental data
-- **Nagpapanatili** ng mga setting ng user sa pagitan ng mga session
-- **Nagha-handle** ng errors nang maayos sa halip na mag-crash
+- **Nagpe-persist** ng user settings sa pagitan ng mga session
+- **Hinahandle** ang errors nang maayos sa halip na mag-crash
 - **Nagbibigay** ng maayos, propesyonal na user experience
 
-Subukan ang iyong ginawa sa pamamagitan ng pag-run ng `npm run build` at pag-refresh ng iyong extension sa browser. Mayroon ka na ngayong functional carbon footprint tracker. Sa susunod na aralin, magdadagdag tayo ng dynamic icon functionality upang makumpleto ang extension.
+I-test ang iyong gawa sa pamamagitan ng pag-run ng `npm run build` at pag-refresh ng iyong extension sa browser. Mayroon ka na ngayong functional carbon footprint tracker. Sa susunod na aralin, magdadagdag tayo ng dynamic icon functionality para makumpleto ang extension.
 
 ---
 
-## Hamon ng GitHub Copilot Agent 🚀
+## GitHub Copilot Agent Challenge 🚀
 
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode para kumpletuhin ang sumusunod na challenge:
+**Deskripsyon:** Pagandahin ang browser extension sa pamamagitan ng pagdaragdag ng mga pagpapabuti sa error handling at mga tampok para sa mas magandang karanasan ng user. Ang hamon na ito ay makakatulong sa iyo na magsanay sa paggamit ng APIs, local storage, at DOM manipulation gamit ang mga modernong pattern ng JavaScript.
 
-**Deskripsyon:** Pagandahin ang browser extension sa pamamagitan ng pagdaragdag ng mga improvement sa error handling at mga feature para sa user experience. Ang hamon na ito ay makakatulong sa iyo na magpraktis sa paggamit ng APIs, local storage, at DOM manipulation gamit ang modernong JavaScript patterns.
-
-**Prompt:** Gumawa ng mas pinahusay na bersyon ng displayCarbonUsage function na may kasamang: 1) Isang retry mechanism para sa mga nabigong API calls na may exponential backoff, 2) Input validation para sa region code bago gumawa ng API call, 3) Isang loading animation na may progress indicators, 4) Caching ng API responses sa localStorage na may expiration timestamps (cache para sa 30 minuto), at 5) Isang feature upang ipakita ang historical data mula sa mga nakaraang API calls. Magdagdag din ng tamang TypeScript-style JSDoc comments upang i-document ang lahat ng function parameters at return types.
+**Prompt:** Gumawa ng pinahusay na bersyon ng displayCarbonUsage function na may kasamang: 1) Isang retry mechanism para sa mga nabigong API call gamit ang exponential backoff, 2) Input validation para sa region code bago gumawa ng API call, 3) Isang loading animation na may progress indicators, 4) Pag-cache ng mga API response sa localStorage na may expiration timestamps (cache para sa 30 minuto), at 5) Isang tampok para ipakita ang historical data mula sa mga nakaraang API call. Magdagdag din ng tamang TypeScript-style na JSDoc comments para idokumento ang lahat ng parameters ng function at mga return types.
 
 Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Hamon
 
-Palawakin ang iyong pag-unawa sa APIs sa pamamagitan ng pag-explore sa iba't ibang browser-based APIs na available para sa web development. Pumili ng isa sa mga browser APIs na ito at gumawa ng maliit na demonstration:
+Palawakin ang iyong kaalaman sa APIs sa pamamagitan ng pag-explore sa iba't ibang browser-based APIs na magagamit para sa web development. Pumili ng isa sa mga browser APIs na ito at gumawa ng maliit na demonstration:
 
 - [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - Kunin ang kasalukuyang lokasyon ng user
 - [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - Magpadala ng desktop notifications
-- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - Gumawa ng interactive drag interfaces
-- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - Advanced na local storage techniques
+- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - Gumawa ng interactive na drag interfaces
+- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - Mga advanced na teknik sa local storage
 - [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - Modernong alternatibo sa XMLHttpRequest
 
-**Mga tanong sa pananaliksik na dapat isaalang-alang:**
-- Anong mga problema sa totoong mundo ang nilulutas ng API na ito?
-- Paano hinahandle ng API ang errors at edge cases?
-- Anong mga pagsasaalang-alang sa seguridad ang umiiral kapag ginagamit ang API na ito?
+**Mga tanong para sa pananaliksik:**
+- Anong mga totoong problema ang nilulutas ng API na ito?
+- Paano hinahandle ng API ang mga error at edge cases?
+- Anong mga konsiderasyon sa seguridad ang umiiral kapag ginagamit ang API na ito?
 - Gaano kalawak ang suporta ng API na ito sa iba't ibang browser?
 
-Pagkatapos ng iyong pananaliksik, tukuyin kung anong mga katangian ang nagpapaganda at maaasahan sa isang API para sa mga developer.
+Pagkatapos ng iyong pananaliksik, tukuyin kung anong mga katangian ang nagpapaganda sa isang API para sa mga developer at maaasahan.
 
 ## Post-Lecture Quiz
 
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/26)
 
 ## Review & Self Study
-Natutunan mo ang tungkol sa LocalStorage at APIs sa araling ito, parehong napakahalaga para sa propesyonal na web developer. Maiisip mo ba kung paano nagtutulungan ang dalawang ito? Isipin kung paano mo ididisenyo ang isang website na mag-iimbak ng mga item na gagamitin ng isang API.
 
-## Takdang-Aralin
+Natutunan mo ang tungkol sa LocalStorage at APIs sa araling ito, parehong napaka-kapaki-pakinabang para sa mga propesyonal na web developer. Maiisip mo ba kung paano nagtutulungan ang dalawang bagay na ito? Isipin kung paano mo ididisenyo ang isang website na mag-iimbak ng mga item na gagamitin ng isang API.
+
+### ⚡ **Ano ang Pwede Mong Gawin sa Loob ng 5 Minuto**
+- [ ] Buksan ang DevTools Application tab at i-explore ang localStorage sa anumang website
+- [ ] Gumawa ng simpleng HTML form at subukan ang form validation sa browser
+- [ ] Subukan ang pag-iimbak at pagkuha ng data gamit ang localStorage sa browser console
+- [ ] I-inspect ang form data na isinusumite gamit ang Network tab
+
+### 🎯 **Ano ang Pwede Mong Makamit sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at unawain ang mga konsepto ng form handling
+- [ ] Gumawa ng browser extension form na nagse-save ng user preferences
+- [ ] Mag-implement ng client-side form validation na may kapaki-pakinabang na error messages
+- [ ] Magsanay sa paggamit ng chrome.storage API para sa data persistence ng extension
+- [ ] Gumawa ng user interface na tumutugon sa mga na-save na user settings
+
+### 📅 **Ang Iyong Extension Building sa Loob ng Isang Linggo**
+- [ ] Kumpletuhin ang isang full-featured browser extension na may form functionality
+- [ ] Masterin ang iba't ibang storage options: local, sync, at session storage
+- [ ] Mag-implement ng advanced form features tulad ng autocomplete at validation
+- [ ] Magdagdag ng import/export functionality para sa user data
+- [ ] Subukan ang iyong extension nang maigi sa iba't ibang browser
+- [ ] Pagandahin ang user experience at error handling ng iyong extension
+
+### 🌟 **Ang Iyong Web API Mastery sa Loob ng Isang Buwan**
+- [ ] Gumawa ng mga kumplikadong aplikasyon gamit ang iba't ibang browser storage APIs
+- [ ] Matutunan ang offline-first development patterns
+- [ ] Mag-ambag sa mga open source projects na may kinalaman sa data persistence
+- [ ] Masterin ang privacy-focused development at pagsunod sa GDPR
+- [ ] Gumawa ng reusable libraries para sa form handling at data management
+- [ ] Magbahagi ng kaalaman tungkol sa web APIs at extension development
+
+## 🎯 Ang Iyong Extension Development Mastery Timeline
+
+```mermaid
+timeline
+    title API Integration & Storage Learning Progression
+    
+    section DOM Fundamentals (15 minutes)
+        Element References: querySelector mastery
+                          : Event listener setup
+                          : State management basics
+        
+    section Local Storage (20 minutes)
+        Data Persistence: Key-value storage
+                        : Session management
+                        : User preference handling
+                        : Storage inspection tools
+        
+    section Form Handling (25 minutes)
+        User Input: Form validation
+                  : Event prevention
+                  : Data extraction
+                  : UI state transitions
+        
+    section API Integration (35 minutes)
+        External Communication: HTTP requests
+                              : Authentication patterns
+                              : JSON data parsing
+                              : Response handling
+        
+    section Async Programming (40 minutes)
+        Modern JavaScript: Promise handling
+                         : Async/await patterns
+                         : Error management
+                         : Non-blocking operations
+        
+    section Error Handling (30 minutes)
+        Robust Applications: Try/catch blocks
+                           : User-friendly messages
+                           : Graceful degradation
+                           : Debugging techniques
+        
+    section Advanced Patterns (1 week)
+        Professional Development: Caching strategies
+                                : Rate limiting
+                                : Retry mechanisms
+                                : Performance optimization
+        
+    section Production Skills (1 month)
+        Enterprise Features: Security best practices
+                           : API versioning
+                           : Monitoring & logging
+                           : Scalable architecture
+```
+
+### 🛠️ Buod ng Iyong Full-Stack Development Toolkit
+
+Pagkatapos ng araling ito, mayroon ka nang:
+- **DOM Mastery**: Tumpak na pag-target at pag-manipula ng mga elemento
+- **Storage Expertise**: Pamamahala ng persistent data gamit ang localStorage
+- **API Integration**: Real-time na pagkuha ng data at authentication
+- **Async Programming**: Non-blocking operations gamit ang modernong JavaScript
+- **Error Handling**: Mga matibay na aplikasyon na maayos na humahawak ng mga pagkakamali
+- **User Experience**: Loading states, validation, at maayos na interaksyon
+- **Modern Patterns**: fetch API, async/await, at ES6+ features
+
+**Mga Propesyonal na Kasanayan na Nakuha:** Naipatupad mo ang mga pattern na ginagamit sa:
+- **Web Applications**: Single-page apps na may external data sources
+- **Mobile Development**: Mga API-driven apps na may offline capabilities
+- **Desktop Software**: Electron apps na may persistent storage
+- **Enterprise Systems**: Authentication, caching, at error handling
+- **Modern Frameworks**: React/Vue/Angular data management patterns
+
+**Susunod na Antas:** Handa ka nang mag-explore ng mga advanced na paksa tulad ng caching strategies, real-time WebSocket connections, o kumplikadong state management!
+
+## Assignment
 
-[Mag-ampon ng API](assignment.md)
+[Adopt an API](assignment.md)
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/tl/5-browser-extension/3-background-tasks-and-performance/README.md
index 23cf976b1f..ac0c355d9e 100644
--- a/translations/tl/5-browser-extension/3-background-tasks-and-performance/README.md
+++ b/translations/tl/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -1,19 +1,36 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "eb358f3f4c2c082f9f3a4f98efa1d337",
-  "translation_date": "2025-10-22T15:43:24+00:00",
+  "original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
+  "translation_date": "2025-11-03T14:07:52+00:00",
   "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
   "language_code": "tl"
 }
 -->
 # Proyekto ng Browser Extension Bahagi 3: Alamin ang Tungkol sa Background Tasks at Performance
 
-Naisip mo na ba kung bakit ang ilang browser extensions ay mabilis at tumutugon habang ang iba ay tila mabagal? Ang sikreto ay nasa kung ano ang nangyayari sa likod ng eksena. Habang nagki-click ang mga user sa interface ng iyong extension, may mundo ng mga background processes na tahimik na nagma-manage ng pagkuha ng data, pag-update ng icon, at mga system resources.
+```mermaid
+journey
+    title Your Performance Optimization Journey
+    section Foundation
+      Learn browser tools: 3: Student
+      Understand profiling: 4: Student
+      Identify bottlenecks: 4: Student
+    section Extension Features
+      Build color system: 4: Student
+      Create background tasks: 5: Student
+      Update icons dynamically: 5: Student
+    section Optimization
+      Monitor performance: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
+
+Naisip mo na ba kung bakit ang ilang browser extensions ay mabilis at tumutugon habang ang iba ay tila mabagal? Ang sikreto ay nasa likod ng mga eksena. Habang nagki-click ang mga user sa interface ng iyong extension, may isang mundo ng mga background process na tahimik na nagma-manage ng pagkuha ng data, pag-update ng mga icon, at mga system resources.
 
-Ito ang huling aralin natin sa serye ng browser extension, at gagawin nating maayos ang takbo ng iyong carbon footprint tracker. Magdadagdag ka ng mga dynamic na pag-update ng icon at matututo kung paano matukoy ang mga isyu sa performance bago pa ito maging problema. Para kang nagtu-tune ng race car - ang maliliit na pag-optimize ay maaaring magdulot ng malaking pagbabago sa takbo ng lahat.
+Ito ang huling aralin natin sa serye ng browser extension, at gagawin nating maayos ang takbo ng iyong carbon footprint tracker. Magdadagdag ka ng mga dynamic na pag-update ng icon at matututo kung paano matukoy ang mga isyu sa performance bago pa ito maging problema. Para itong pag-tune ng race car - ang maliliit na pag-optimize ay maaaring magdulot ng malaking pagbabago sa takbo ng lahat.
 
-Kapag natapos na tayo, magkakaroon ka ng isang pinakinis na extension at maiintindihan mo ang mga prinsipyo ng performance na nagtatangi sa magagandang web apps mula sa mga mahusay na apps. Halika't sumisid sa mundo ng browser optimization.
+Kapag natapos na tayo, magkakaroon ka ng isang pulidong extension at maiintindihan mo ang mga prinsipyo ng performance na nagtatangi sa magagandang web apps mula sa mga mahusay na web apps. Halina't sumisid sa mundo ng browser optimization.
 
 ## Pre-Lecture Quiz
 
@@ -23,37 +40,101 @@ Kapag natapos na tayo, magkakaroon ka ng isang pinakinis na extension at maiinti
 
 Sa mga nakaraang aralin, gumawa ka ng form, ikinonekta ito sa isang API, at hinarap ang asynchronous na pagkuha ng data. Maganda na ang hugis ng iyong extension.
 
-Ngayon, kailangan nating idagdag ang mga huling detalye - tulad ng pagpapalit ng kulay ng icon ng extension batay sa carbon data. Parang NASA na kailangang i-optimize ang bawat sistema sa Apollo spacecraft. Hindi sila maaaring mag-aksaya ng kahit anong cycle o memorya dahil buhay ang nakasalalay sa performance. Bagama't hindi kasing kritikal ang ating browser extension, pareho pa rin ang mga prinsipyo - ang mahusay na code ay lumilikha ng mas magagandang karanasan para sa user.
+Ngayon, kailangan nating idagdag ang mga huling detalye - tulad ng pagpapalit ng kulay ng icon ng extension base sa carbon data. Parang kung paano kailangang i-optimize ng NASA ang bawat sistema sa Apollo spacecraft. Hindi sila maaaring mag-aksaya ng kahit anong cycle o memorya dahil buhay ang nakasalalay sa performance. Bagamat hindi kasing kritikal ang ating browser extension, pareho pa rin ang mga prinsipyo - ang mahusay na code ay lumilikha ng mas magagandang karanasan para sa user.
+
+```mermaid
+mindmap
+  root((Performance & Background Tasks))
+    Browser Performance
+      Rendering Pipeline
+      Asset Optimization
+      DOM Manipulation
+      JavaScript Execution
+    Profiling Tools
+      Developer Tools
+      Performance Tab
+      Timeline Analysis
+      Bottleneck Detection
+    Extension Architecture
+      Background Scripts
+      Content Scripts
+      Message Passing
+      Icon Management
+    Optimization Strategies
+      Code Splitting
+      Lazy Loading
+      Caching
+      Resource Compression
+    Visual Feedback
+      Dynamic Icons
+      Color Coding
+      Real-time Updates
+      User Experience
+```
 
 ## Mga Pangunahing Kaalaman sa Web Performance
 
-Kapag mahusay ang takbo ng iyong code, mararamdaman ito ng mga tao. Alam mo ba ang sandaling mabilis na naglo-load ang isang pahina o maayos ang daloy ng animation? Iyan ang magandang performance sa trabaho.
+Kapag ang iyong code ay tumatakbo nang mahusay, mararamdaman talaga ito ng mga tao. Alam mo ba ang pakiramdam kapag ang isang pahina ay agad na naglo-load o ang animation ay maayos na gumagalaw? Iyan ang magandang performance sa trabaho.
 
-Ang performance ay hindi lang tungkol sa bilis - ito ay tungkol sa paggawa ng mga web experience na natural sa halip na mabagal at nakakainis. Noong unang panahon ng computing, si Grace Hopper ay kilalang may nanosecond (isang piraso ng kawad na humigit-kumulang isang talampakan ang haba) sa kanyang desk upang ipakita kung gaano kalayo ang nararating ng liwanag sa isang bilyong bahagi ng isang segundo. Paraan niya ito upang ipaliwanag kung bakit mahalaga ang bawat microsecond sa computing. Tuklasin natin ang mga detective tools na tumutulong sa iyo na matukoy kung ano ang nagpapabagal sa mga bagay.
+Ang performance ay hindi lang tungkol sa bilis - ito ay tungkol sa paggawa ng mga web experience na natural ang pakiramdam sa halip na mabagal at nakakainis. Noong unang panahon ng computing, si Grace Hopper ay kilalang may nanosecond (isang piraso ng kawad na humigit-kumulang isang talampakan ang haba) sa kanyang mesa upang ipakita kung gaano kalayo ang nararating ng liwanag sa isang bilyong bahagi ng isang segundo. Ito ang paraan niya ng pagpapaliwanag kung bakit mahalaga ang bawat microsecond sa computing. Tuklasin natin ang mga tool na tumutulong sa iyong matukoy kung ano ang nagpapabagal sa mga bagay.
 
-> "Ang performance ng website ay tungkol sa dalawang bagay: kung gaano kabilis naglo-load ang pahina, at kung gaano kabilis tumatakbo ang code nito." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+> "Ang performance ng website ay tungkol sa dalawang bagay: kung gaano kabilis mag-load ang pahina, at kung gaano kabilis tumakbo ang code nito." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
 
 Ang paksa ng kung paano gawing napakabilis ang iyong mga website sa lahat ng uri ng device, para sa lahat ng uri ng user, sa lahat ng uri ng sitwasyon, ay hindi nakakagulat na malawak. Narito ang ilang mga punto na dapat tandaan habang bumubuo ka ng isang karaniwang web project o browser extension.
 
-Ang unang hakbang sa pag-optimize ng iyong site ay ang pag-unawa sa kung ano talaga ang nangyayari sa likod ng eksena. Sa kabutihang-palad, ang iyong browser ay may makapangyarihang mga detective tools na naka-built in.
+Ang unang hakbang sa pag-optimize ng iyong site ay ang pag-unawa sa kung ano talaga ang nangyayari sa likod ng eksena. Sa kabutihang-palad, ang iyong browser ay may makapangyarihang mga tool na pang-detect na naka-built in.
+
+```mermaid
+flowchart LR
+    A[HTML] --> B[Parse]
+    B --> C[DOM Tree]
+    D[CSS] --> E[Parse]
+    E --> F[CSSOM]
+    G[JavaScript] --> H[Execute]
+    
+    C --> I[Render Tree]
+    F --> I
+    H --> I
+    
+    I --> J[Layout]
+    J --> K[Paint]
+    K --> L[Composite]
+    L --> M[Display]
+    
+    subgraph "Critical Rendering Path"
+        N["1. Parse HTML"]
+        O["2. Parse CSS"]
+        P["3. Execute JS"]
+        Q["4. Build Render Tree"]
+        R["5. Layout Elements"]
+        S["6. Paint Pixels"]
+        T["7. Composite Layers"]
+    end
+    
+    style M fill:#e8f5e8
+    style I fill:#fff3e0
+    style H fill:#ffebee
+```
 
-Upang buksan ang Developer Tools sa Edge, i-click ang tatlong tuldok sa kanang itaas, pagkatapos ay pumunta sa More Tools > Developer Tools. O gamitin ang keyboard shortcut: `Ctrl` + `Shift` + `I` sa Windows o `Option` + `Command` + `I` sa Mac. Kapag naroon ka na, i-click ang tab na Performance - dito mo gagawin ang iyong imbestigasyon.
+Upang buksan ang Developer Tools sa Edge, i-click ang tatlong tuldok sa kanang itaas, pagkatapos pumunta sa More Tools > Developer Tools. O gamitin ang keyboard shortcut: `Ctrl` + `Shift` + `I` sa Windows o `Option` + `Command` + `I` sa Mac. Kapag naroon ka na, i-click ang Performance tab - dito mo gagawin ang iyong imbestigasyon.
 
-**Narito ang iyong performance detective toolkit:**
+**Narito ang iyong toolkit para sa performance detective:**
 - **Buksan** ang Developer Tools (palagi mo itong gagamitin bilang developer!)
-- **Pumunta** sa tab na Performance - isipin ito bilang fitness tracker ng iyong web app
+- **Pumunta** sa Performance tab - isipin ito bilang fitness tracker ng iyong web app
 - **I-click** ang Record button at panoorin ang iyong pahina sa aksyon
 - **Pag-aralan** ang mga resulta upang matukoy kung ano ang nagpapabagal sa mga bagay
 
-Subukan natin ito. Buksan ang isang website (Microsoft.com ay mahusay para dito) at i-click ang 'Record' button. Ngayon i-refresh ang pahina at panoorin ang profiler na kinukuha ang lahat ng nangyayari. Kapag natapos mo ang pagre-record, makikita mo ang detalyadong breakdown kung paano 'scripts', 'renders', at 'paints' ng browser ang site. Parang mission control na nagmo-monitor ng bawat sistema sa panahon ng rocket launch - makakakuha ka ng real-time na data kung ano ang nangyayari at kailan.
+Subukan natin ito. Buksan ang isang website (Microsoft.com ay maganda para dito) at i-click ang 'Record' button. Ngayon i-refresh ang pahina at panoorin ang profiler na kinukuha ang lahat ng nangyayari. Kapag tumigil ka sa pag-record, makikita mo ang detalyadong breakdown kung paano 'scripts', 'renders', at 'paints' ng browser ang site. Parang kung paano mino-monitor ng mission control ang bawat sistema sa panahon ng paglulunsad ng rocket - makakakuha ka ng real-time na data sa eksaktong nangyayari at kailan.
+
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.tl.png)
 
-✅ Ang [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ay may maraming detalye kung gusto mong sumisid nang mas malalim.
+✅ Ang [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ay may maraming detalye kung nais mong mas malalim na pag-aralan.
 
-> Pro tip: I-clear ang cache ng iyong browser bago mag-test upang makita kung paano nagpe-perform ang iyong site para sa mga unang beses na bisita - kadalasan ay iba ito sa mga paulit-ulit na pagbisita!
+> Pro tip: I-clear ang cache ng iyong browser bago mag-test upang makita kung paano gumagana ang iyong site para sa mga unang beses na bisita - kadalasang iba ito sa mga paulit-ulit na pagbisita!
 
 Piliin ang mga elemento ng profile timeline upang mag-zoom in sa mga event na nangyayari habang naglo-load ang iyong pahina.
 
-Makakuha ng snapshot ng performance ng iyong pahina sa pamamagitan ng pagpili ng bahagi ng profile timeline at pagtingin sa summary pane:
+Kumuha ng snapshot ng performance ng iyong pahina sa pamamagitan ng pagpili ng bahagi ng profile timeline at pagtingin sa summary pane:
 
 ![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.tl.png)
 
@@ -61,49 +142,124 @@ Suriin ang Event Log pane upang makita kung may anumang event na tumagal ng higi
 
 ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.tl.png)
 
-✅ Kilalanin ang iyong profiler! Buksan ang developer tools sa site na ito at tingnan kung may mga bottleneck. Ano ang pinakamabagal na asset na naglo-load? Ang pinakamabilis?
+✅ Kilalanin ang iyong profiler! Buksan ang developer tools sa site na ito at tingnan kung may mga bottleneck. Ano ang pinakamabagal na naglo-load na asset? Ang pinakamabilis?
+
+```mermaid
+flowchart TD
+    A[Open DevTools] --> B[Navigate to Performance Tab]
+    B --> C[Click Record Button]
+    C --> D[Perform Actions]
+    D --> E[Stop Recording]
+    E --> F{Analyze Results}
+    
+    F --> G[Check Timeline]
+    F --> H[Review Network]
+    F --> I[Examine Scripts]
+    F --> J[Identify Paint Events]
+    
+    G --> K{Long Tasks?}
+    H --> L{Large Assets?}
+    I --> M{Render Blocking?}
+    J --> N{Expensive Paints?}
+    
+    K -->|Yes| O[Optimize JavaScript]
+    L -->|Yes| P[Compress Assets]
+    M -->|Yes| Q[Add Async/Defer]
+    N -->|Yes| R[Simplify Styles]
+    
+    O --> S[Test Again]
+    P --> S
+    Q --> S
+    R --> S
+    
+    style A fill:#e1f5fe
+    style F fill:#fff3e0
+    style S fill:#e8f5e8
+```
 
 ## Ano ang Dapat Hanapin Kapag Nagpo-profile
 
-Ang pagtakbo ng profiler ay simula pa lang - ang tunay na kasanayan ay ang pag-unawa sa sinasabi ng mga makukulay na chart na iyon. Huwag mag-alala, makukuha mo rin ang tamang pagbasa sa mga ito. Ang mga bihasang developer ay natututo kung paano matukoy ang mga babala bago ito maging ganap na problema.
+Ang pagtakbo ng profiler ay simula pa lamang - ang tunay na kasanayan ay ang pag-alam kung ano ang sinasabi ng mga makukulay na chart na iyon. Huwag mag-alala, makukuha mo ang kasanayan sa pagbabasa nito. Ang mga bihasang developer ay natututo kung paano makita ang mga babala bago ito maging ganap na problema.
 
-Pag-usapan natin ang mga karaniwang salarin - ang mga problema sa performance na madalas sumingit sa mga web project. Tulad ng kung paano kailangang maingat na subaybayan ni Marie Curie ang radiation levels sa kanyang laboratoryo, kailangan nating bantayan ang ilang mga pattern na nagpapahiwatig ng paparating na problema. Ang maagang pagtukoy sa mga ito ay makakatipid sa iyo (at sa iyong mga user) ng maraming pagkabigo.
+Pag-usapan natin ang mga karaniwang salarin - ang mga problema sa performance na madalas sumingit sa mga web project. Parang kung paano kailangang maingat na i-monitor ni Marie Curie ang radiation levels sa kanyang lab, kailangan nating bantayan ang ilang pattern na nagpapahiwatig ng paparating na problema. Ang maagang pagtukoy sa mga ito ay makakatipid sa iyo (at sa iyong mga user) ng maraming frustration.
 
-**Mga laki ng asset**: Ang mga website ay nagiging "mas mabigat" sa paglipas ng mga taon, at karamihan sa dagdag na timbang na ito ay mula sa mga imahe. Parang pinupuno natin ng sobra ang ating digital na maleta.
+**Mga laki ng asset**: Ang mga website ay nagiging "mas mabigat" sa paglipas ng mga taon, at karamihan sa dagdag na timbang na ito ay mula sa mga imahe. Parang naglalagay tayo ng mas marami sa ating digital na maleta.
 
-✅ Tingnan ang [Internet Archive](https://httparchive.org/reports/page-weight) upang makita kung paano lumaki ang mga laki ng pahina sa paglipas ng panahon - napaka-revealing nito.
+✅ Tingnan ang [Internet Archive](https://httparchive.org/reports/page-weight) upang makita kung paano lumaki ang mga laki ng pahina sa paglipas ng panahon - ito ay talagang nakakagulat.
 
 **Narito kung paano panatilihing optimized ang iyong mga asset:**
 - **I-compress** ang mga imahe! Ang mga modernong format tulad ng WebP ay maaaring magbawas ng laki ng file nang malaki
-- **I-serve** ang tamang laki ng imahe para sa bawat device - walang dahilan upang magpadala ng malalaking desktop images sa mga telepono
+- **I-serve** ang tamang laki ng imahe para sa bawat device - walang pangangailangan na magpadala ng malalaking desktop images sa mga telepono
 - **I-minify** ang iyong CSS at JavaScript - bawat byte ay mahalaga
 - **Gamitin** ang lazy loading upang ang mga imahe ay mag-download lamang kapag talagang na-scroll ng mga user
 
-**DOM traversals**: Kailangang buuin ng browser ang Document Object Model batay sa code na isinulat mo, kaya't mahalaga para sa magandang performance ng pahina na panatilihing minimal ang iyong mga tag, gamit lamang ang kailangan ng pahina.
+**DOM traversals**: Kailangang buuin ng browser ang Document Object Model base sa code na isinulat mo, kaya't mahalaga para sa magandang performance ng pahina na panatilihing minimal ang iyong mga tag, gamit lamang ang kailangan ng pahina.
 
 **Mga pangunahing estratehiya para sa DOM optimization:**
 - **Minimizes** ang bilang ng mga HTML elements at nesting levels
-- **Removes** ang mga hindi nagagamit na CSS rules at mahusay na pinagsasama ang mga stylesheet
+- **Removes** ang mga hindi nagagamit na CSS rules at pinagsasama-sama ang mga stylesheet nang mahusay
 - **Organizes** ang CSS upang mag-load lamang ng kailangan para sa bawat pahina
-- **Structures** ang HTML nang semantically para sa mas mahusay na parsing ng browser
+- **Structures** ang HTML nang semantiko para sa mas mahusay na parsing ng browser
 
-**JavaScript**: Ang bawat JavaScript developer ay dapat magbantay para sa 'render-blocking' scripts na kailangang ma-load bago ma-traverse at ma-paint ang natitirang bahagi ng DOM sa browser. Isaalang-alang ang paggamit ng `defer` sa iyong inline scripts (tulad ng ginawa sa Terrarium module).
+**JavaScript**: Ang bawat JavaScript developer ay dapat magbantay para sa 'render-blocking' scripts na kailangang ma-load bago ma-traverse at ma-paint ang natitirang DOM sa browser. Isaalang-alang ang paggamit ng `defer` sa iyong inline scripts (tulad ng ginawa sa Terrarium module).
 
-**Mga modernong teknolohiya sa pag-optimize ng JavaScript:**
+**Mga modernong teknik sa pag-optimize ng JavaScript:**
 - **Uses** ang `defer` attribute upang ma-load ang mga script pagkatapos ng DOM parsing
 - **Implements** ang code splitting upang ma-load lamang ang kinakailangang JavaScript
 - **Applies** ang lazy loading para sa mga non-critical functionality
 - **Minimizes** ang paggamit ng mabibigat na libraries at frameworks kung maaari
 
-✅ Subukan ang ilang mga site sa isang [Site Speed Test website](https://www.webpagetest.org/) upang matuto nang higit pa tungkol sa mga karaniwang pagsusuri na ginagawa upang matukoy ang performance ng site.
+✅ Subukan ang ilang mga site sa isang [Site Speed Test website](https://www.webpagetest.org/) upang matuto pa tungkol sa mga karaniwang pagsusuri na ginagawa upang matukoy ang performance ng site.
 
-Ngayon na mayroon kang ideya kung paano nire-render ng browser ang mga asset na ipinapadala mo dito, tingnan natin ang huling ilang bagay na kailangan mong gawin upang makumpleto ang iyong extension:
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Performance**: Bago magtayo ng mga feature ng extension, tiyakin na kaya mong:
+- ✅ Ipaliwanag ang critical rendering path mula HTML hanggang pixels
+- ✅ Tukuyin ang mga karaniwang bottleneck sa performance ng web applications
+- ✅ Gamitin ang browser developer tools upang i-profile ang performance ng pahina
+- ✅ Maunawaan kung paano nakakaapekto ang laki ng asset at komplikasyon ng DOM sa bilis
 
-### Gumawa ng function para kalkulahin ang kulay
+**Mabilis na Self-Test**: Ano ang nangyayari kapag mayroon kang render-blocking JavaScript?
+*Sagot: Kailangang i-download at i-execute ng browser ang script bago ito magpatuloy sa pag-parse ng HTML at pag-render ng pahina*
+
+**Epekto ng Performance sa Tunay na Mundo**:
+- **100ms delay**: Napapansin ng mga user ang pagbagal
+- **1 segundo delay**: Nagsisimulang mawalan ng focus ang mga user
+- **3+ segundo**: 40% ng mga user ay iniiwan ang pahina
+- **Mobile networks**: Mas mahalaga ang performance
+
+Ngayon na mayroon kang ideya kung paano nire-render ng browser ang mga asset na ipinapadala mo rito, tingnan natin ang huling mga bagay na kailangan mong gawin upang makumpleto ang iyong extension:
+
+### Gumawa ng function upang kalkulahin ang kulay
 
 Ngayon gagawa tayo ng function na magpapalit ng numerical data sa makabuluhang mga kulay. Isipin ito na parang sistema ng traffic light - berde para sa malinis na enerhiya, pula para sa mataas na carbon intensity.
 
-Ang function na ito ay kukuha ng CO2 data mula sa ating API at tutukuyin kung anong kulay ang pinakamahusay na kumakatawan sa epekto sa kapaligiran. Katulad ito ng kung paano ginagamit ng mga siyentipiko ang color-coding sa heat maps upang ma-visualize ang mga kumplikadong pattern ng data - mula sa temperatura ng karagatan hanggang sa pagbuo ng mga bituin. Idagdag natin ito sa `/src/index.js`, pagkatapos ng mga `const` variables na itinakda natin kanina:
+Ang function na ito ay kukuha ng CO2 data mula sa ating API at tutukuyin kung anong kulay ang pinakamahusay na kumakatawan sa epekto sa kapaligiran. Katulad ito ng kung paano ginagamit ng mga siyentipiko ang color-coding sa heat maps upang maipakita ang mga kumplikadong pattern ng data - mula sa temperatura ng karagatan hanggang sa pagbuo ng bituin. Idagdag natin ito sa `/src/index.js`, pagkatapos ng mga `const` variables na na-set up natin kanina:
+
+```mermaid
+flowchart LR
+    A[CO2 Value] --> B[Find Closest Scale Point]
+    B --> C[Get Scale Index]
+    C --> D[Map to Color]
+    D --> E[Send to Background]
+    
+    subgraph "Color Scale"
+        F["0-150: Green (Clean)"]
+        G["150-600: Yellow (Moderate)"]
+        H["600-750: Orange (High)"]
+        I["750+: Brown (Very High)"]
+    end
+    
+    subgraph "Message Passing"
+        J[Content Script]
+        K[chrome.runtime.sendMessage]
+        L[Background Script]
+        M[Icon Update]
+    end
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style E fill:#fff3e0
+```
 
 ```javascript
 function calculateColor(value) {
@@ -131,31 +287,50 @@ function calculateColor(value) {
 }
 ```
 
-**I-breakdown natin ang matalinong function na ito:**
-- **Nagse-set up** ng dalawang arrays - isa para sa CO2 levels, isa para sa mga kulay (berde = malinis, kayumanggi = marumi!)
-- **Hinahanap** ang pinakamalapit na tugma sa ating aktwal na CO2 value gamit ang array sorting
-- **Kinukuha** ang tugmang kulay gamit ang findIndex() method
+**I-breakdown natin ang matalinong maliit na function na ito:**
+- **Nagse-set up** ng dalawang arrays - isa para sa CO2 levels, isa pa para sa mga kulay (berde = malinis, kayumanggi = marumi!)
+- **Hinahanap** ang pinakamalapit na tugma sa ating aktwal na CO2 value gamit ang ilang magaling na array sorting
+- **Kinukuha** ang matching color gamit ang findIndex() method
 - **Nagpapadala** ng mensahe sa background script ng Chrome gamit ang napiling kulay
-- **Gumagamit** ng template literals (mga backticks) para sa mas malinis na string formatting
+- **Gumagamit** ng template literals (ang mga backticks) para sa mas malinis na string formatting
 - **Pinapanatili** ang lahat ng maayos gamit ang const declarations
 
-Ang `chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) ay parang nervous system ng iyong extension - ito ang nagma-manage ng lahat ng behind-the-scenes na komunikasyon at tasks:
+Ang `chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) ay parang nervous system ng iyong extension - ito ang humahawak sa lahat ng komunikasyon at gawain sa likod ng eksena:
 
-> "Gamitin ang chrome.runtime API upang kunin ang background page, magbalik ng mga detalye tungkol sa manifest, at makinig at tumugon sa mga event sa lifecycle ng app o extension. Maaari mo ring gamitin ang API na ito upang i-convert ang relative path ng mga URL sa fully-qualified URLs."
+> "Gamitin ang chrome.runtime API upang makuha ang background page, magbalik ng mga detalye tungkol sa manifest, at makinig at tumugon sa mga event sa lifecycle ng app o extension. Maaari mo ring gamitin ang API na ito upang i-convert ang relative path ng mga URL sa fully-qualified URLs."
 
 **Bakit kapaki-pakinabang ang Chrome Runtime API:**
 - **Pinapayagan** ang iba't ibang bahagi ng iyong extension na makipag-usap sa isa't isa
-- **Nagma-manage** ng background work nang hindi nag-freeze ang user interface
+- **Humahawak** ng mga background na gawain nang hindi nagha-hang ang user interface
 - **Nagma-manage** ng mga lifecycle events ng iyong extension
 - **Ginagawang** madali ang pagpapasa ng mensahe sa pagitan ng mga script
 
-✅ Kung dine-develop mo ang browser extension na ito para sa Edge, maaaring magulat ka na gumagamit ka ng chrome API. Ang mga mas bagong bersyon ng Edge browser ay tumatakbo sa Chromium browser engine, kaya maaari mong gamitin ang mga tools na ito.
+✅ Kung ikaw ay nagde-develop ng browser extension na ito para sa Edge, maaaring magulat ka na ginagamit mo ang chrome API. Ang mga mas bagong bersyon ng Edge browser ay tumatakbo sa Chromium browser engine, kaya maaari mong gamitin ang mga tool na ito.
+
+```mermaid
+architecture-beta
+    group browser(logos:chrome)[Browser]
+    
+    service popup(logos:html5)[Popup UI] in browser
+    service content(logos:javascript)[Content Script] in browser
+    service background(database)[Background Script] in browser
+    service api(logos:api)[External API] in browser
+    
+    popup:R -- L:content
+    content:R -- L:background
+    background:T -- B:api
+    content:T -- B:api
+    
+    junction junctionCenter in browser
+    popup:R -- L:junctionCenter
+    junctionCenter:R -- L:background
+```
 
-> **Pro Tip**: Kung gusto mong i-profile ang isang browser extension, i-launch ang dev tools mula sa loob ng extension mismo, dahil ito ay sarili nitong hiwalay na browser instance. Bibigyan ka nito ng access sa mga extension-specific performance metrics.
+> **Pro Tip**: Kung nais mong i-profile ang isang browser extension, buksan ang dev tools mula sa loob ng extension mismo, dahil ito ay isang hiwalay na browser instance. Bibigyan ka nito ng access sa mga extension-specific performance metrics.
 
 ### Mag-set ng default na kulay ng icon
 
-Bago tayo magsimulang kumuha ng totoong data, bigyan natin ang extension ng panimulang punto. Walang may gusto na tumingin sa isang blangko o sirang icon. Magsisimula tayo sa kulay berde upang malaman ng mga user na gumagana ang extension mula sa sandaling ito ay mai-install.
+Bago tayo magsimulang kumuha ng totoong data, bigyan natin ang ating extension ng panimulang punto. Walang may gusto ng blangkong icon o mukhang sira. Magsisimula tayo sa kulay berde upang malaman ng mga user na gumagana ang extension mula sa sandaling ito ay kanilang mai-install.
 
 Sa iyong `init()` function, mag-set tayo ng default na berde na icon:
 
@@ -170,13 +345,13 @@ chrome.runtime.sendMessage({
 
 **Ano ang nagagawa ng initialization na ito:**
 - **Nagse-set** ng neutral na berde na kulay bilang default na estado
-- **Nagbibigay** ng agarang visual feedback kapag nag-load ang extension
+- **Nagbibigay** ng agarang visual na feedback kapag nag-load ang extension
 - **Nagtatatag** ng pattern ng komunikasyon sa background script
 - **Tinitiyak** na makikita ng mga user ang functional na extension bago mag-load ang data
 
 ### Tawagin ang function, i-execute ang tawag
 
-Ngayon, ikonekta natin ang lahat upang kapag dumating ang sariwang CO2 data, ang iyong icon ay awtomatikong mag-update sa tamang kulay. Parang pag-konekta sa huling circuit sa isang electronic device - biglang gumagana ang lahat ng indibidwal na bahagi bilang isang sistema.
+Ngayon, ikonekta natin ang lahat upang kapag dumating ang sariwang CO2 data, ang iyong icon ay awtomatikong mag-update gamit ang tamang kulay. Parang pag-konekta sa huling circuit sa isang electronic device - biglang gumagana ang lahat ng indibidwal na bahagi bilang isang sistema.
 
 Idagdag ang linyang ito pagkatapos mong makuha ang CO2 data mula sa API:
 
@@ -187,12 +362,12 @@ calculateColor(CO2);
 ```
 
 **Ang integration na ito ay nagagawa:**
-- **Ikonekta** ang daloy ng API data sa visual indicator system
-- **I-trigger** ang pag-update ng icon nang awtomatiko kapag dumating ang bagong data
-- **Tinitiyak** ang real-time na visual feedback batay sa kasalukuyang carbon intensity
-- **Pinapanatili** ang separation of concerns sa pagitan ng data fetching at display logic
+- **Kinokonekta** ang daloy ng API data sa sistema ng visual indicator
+- **Nagti-trigger** ng mga pag-update ng icon nang awtomatiko kapag dumating ang bagong data
+- **Tinitiyak** ang real-time na visual feedback base sa kasalukuyang carbon intensity
+- **Pinapanatili** ang paghihiwalay ng mga alalahanin sa pagitan ng pagkuha ng data at display logic
 
-At sa wakas, sa `/dist/background.js`, idagdag ang listener para sa mga background action calls na ito:
+At sa wakas, sa `/dist/background.js`, idagdag ang listener para sa mga tawag sa background action:
 
 ```javascript
 // Listen for messages from the content script
@@ -220,58 +395,209 @@ function drawIcon(value) {
 }
 ```
 
-**Ano ang ginagawa ng background script na ito:**
-- **Nakikinig** sa mga mensahe mula sa iyong main script (parang receptionist na sumasagot sa tawag)
+**Narito ang ginagawa ng background script na ito:**
+- **Nakikinig** sa mga mensahe mula sa iyong main script (parang receptionist na tumatanggap ng tawag)
 - **Pinoproseso** ang mga 'updateIcon' requests upang baguhin ang toolbar icon
 - **Lumilikha** ng mga bagong icon gamit ang Canvas API
 - **Nagdo-drawing** ng simpleng colored circle na nagpapakita ng kasalukuyang carbon intensity
-- **Ina-update** ang toolbar ng browser gamit ang bagong icon
+- **Ina-update** ang toolbar ng browser gamit ang sariwang icon
 - **Gumagamit** ng OffscreenCanvas para sa maayos na performance (walang UI blocking)
 
 ✅ Matututo ka pa tungkol sa Canvas API sa [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md).
 
-**Oras na para i-test ang iyong extension:**
+```mermaid
+sequenceDiagram
+    participant CS as Content Script
+    participant BG as Background Script
+    participant Canvas as OffscreenCanvas
+    participant Browser as Browser Icon
+    
+    CS->>BG: sendMessage({action: 'updateIcon', color})
+    BG->>Canvas: new OffscreenCanvas(200, 200)
+    Canvas->>Canvas: getContext('2d')
+    Canvas->>Canvas: beginPath() + fillStyle + arc()
+    Canvas->>Canvas: fill() + getImageData()
+    Canvas->>BG: Return image data
+    BG->>Browser: chrome.action.setIcon(imageData)
+    Browser->>Browser: Update toolbar icon
+```
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Kumpletong Extension**: Siguraduhin ang mastery mo sa buong sistema:
+- ✅ Paano gumagana ang message passing sa pagitan ng iba't ibang extension scripts?
+- ✅ Bakit natin ginagamit ang OffscreenCanvas sa halip na regular na Canvas para sa performance?
+- ✅ Anong papel ang ginagampanan ng Chrome Runtime API sa arkitektura ng extension?
+- ✅ Paano nagmamapa ang algorithm ng pagkalkula ng kulay ng data sa visual na feedback?
+
+**Mga Pagsasaalang-alang sa Pagganap**: Ang iyong extension ngayon ay nagpapakita ng:
+- **Epektibong messaging**: Malinis na komunikasyon sa pagitan ng mga script contexts
+- **Optimized na rendering**: Ang OffscreenCanvas ay pumipigil sa pag-block ng UI
+- **Real-time na updates**: Dinamikong pagbabago ng icon base sa live na data
+- **Pamamahala ng memorya**: Tamang paglilinis at paghawak ng mga resources
+
+**Oras na para subukan ang iyong extension:**
 - **I-build** ang lahat gamit ang `npm run build`
 - **I-reload** ang iyong extension sa browser (huwag kalimutan ang hakbang na ito)
-- **Buksan** ang iyong extension at panoorin ang icon na magpalit ng kulay
+- **Buksan** ang iyong extension at panoorin ang pagbabago ng kulay ng icon
 - **Suriin** kung paano ito tumutugon sa totoong carbon data mula sa iba't ibang bahagi ng mundo
 
-Ngayon, malalaman mo agad kung magandang panahon para maglaba o kung dapat kang maghintay para sa mas malinis na enerhiya. Nakagawa ka ng isang bagay na tunay na kapaki-pakinabang at natutunan ang tungkol sa browser performance sa proseso.
+Ngayon, malalaman mo agad kung magandang oras na para maglaba o kung mas mabuting maghintay para sa mas malinis na enerhiya. Nakagawa ka ng isang bagay na tunay na kapaki-pakinabang at natutunan ang tungkol sa pagganap ng browser sa proseso.
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode para tapusin ang sumusunod na hamon:
 
-**Deskripsyon:** Pagandahin ang kakayahan ng browser extension sa pag-monitor ng performance sa pamamagitan ng pagdaragdag ng feature na sumusubaybay at nagpapakita ng load times para sa iba't ibang bahagi ng extension.
+**Deskripsyon:** Pagandahin ang kakayahan ng browser extension sa pagsubaybay sa pagganap sa pamamagitan ng pagdaragdag ng feature na sumusubaybay at nagpapakita ng load times para sa iba't ibang bahagi ng extension.
 
-**Prompt:** Gumawa ng performance monitoring system para sa browser extension na sumusukat at naglo-log ng oras na kinakailangan upang makuha ang CO2 data mula sa API, kalkulahin ang mga kulay, at i-update ang icon. Magdagdag ng function na tinatawag na `performanceTracker` na gumagamit ng Performance API upang sukatin ang mga operasyong ito at ipakita ang mga resulta sa browser console na may timestamps at duration metrics.
+**Prompt:** Gumawa ng sistema ng pagsubaybay sa pagganap para sa browser extension na sumusukat at naglo-log ng oras na kinakailangan upang kunin ang CO2 data mula sa API, kalkulahin ang mga kulay, at i-update ang icon. Magdagdag ng function na tinatawag na `performanceTracker` na gumagamit ng Performance API upang sukatin ang mga operasyong ito at ipakita ang mga resulta sa browser console na may timestamps at duration metrics.
 
-Matuto pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Hamon
-Narito ang isang kawili-wiling misyon para sa mga detektib: pumili ng ilang open source na mga website na matagal nang umiiral (halimbawa, Wikipedia, GitHub, o Stack Overflow) at suriin ang kanilang commit history. Kaya mo bang matukoy kung saan sila gumawa ng mga pagpapabuti sa performance? Anong mga problema ang paulit-ulit na lumilitaw?
+
+Narito ang isang kawili-wiling misyon ng detektibo: pumili ng ilang open source na mga website na matagal nang umiiral (halimbawa Wikipedia, GitHub, o Stack Overflow) at suriin ang kanilang commit history. Kaya mo bang matukoy kung saan sila gumawa ng mga pagpapabuti sa pagganap? Anong mga problema ang paulit-ulit na lumilitaw?
 
 **Ang iyong paraan ng pagsisiyasat:**
-- **Hanapin** ang mga commit message para sa mga salitang tulad ng "optimize," "performance," o "faster"
-- **Obserbahan** ang mga pattern - patuloy ba nilang inaayos ang parehong uri ng mga isyu?
+- **Maghanap** ng mga commit messages na may mga salitang tulad ng "optimize," "performance," o "faster"
+- **Tingnan** ang mga pattern - patuloy ba nilang inaayos ang parehong uri ng mga isyu?
 - **Kilalanin** ang mga karaniwang sanhi ng pagbagal ng mga website
-- **Ibahagi** ang iyong natuklasan - matututo ang ibang mga developer mula sa mga halimbawa sa totoong buhay
-
-## Quiz Pagkatapos ng Leksyon
-
-[Quiz pagkatapos ng leksyon](https://ff-quizzes.netlify.app/web/quiz/28)
-
-## Review at Sariling Pag-aaral
-
-Isaalang-alang ang pag-subscribe sa isang [performance newsletter](https://perf.email/)
-
-Siyasatin ang ilan sa mga paraan kung paano sinusukat ng mga browser ang web performance sa pamamagitan ng pagtingin sa performance tabs sa kanilang web tools. May napansin ka bang malalaking pagkakaiba?
-
-## Takdang-Aralin
+- **Ibahagi** ang iyong natuklasan - matututo ang ibang mga developer mula sa mga totoong halimbawa
+
+## Post-Lecture Quiz
+
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28)
+
+## Review & Self Study
+
+Isaalang-alang ang pag-sign up para sa isang [performance newsletter](https://perf.email/)
+
+Suriin ang ilan sa mga paraan kung paano sinusukat ng mga browser ang web performance sa pamamagitan ng pagtingin sa performance tabs sa kanilang web tools. May nakita ka bang malalaking pagkakaiba?
+
+### ⚡ **Ano ang Magagawa Mo sa Loob ng Susunod na 5 Minuto**
+- [ ] Buksan ang browser Task Manager (Shift+Esc sa Chrome) upang makita ang paggamit ng resource ng extension
+- [ ] Gamitin ang DevTools Performance tab upang mag-record at suriin ang performance ng webpage
+- [ ] Tingnan ang Extensions page ng browser upang makita kung aling mga extension ang nakakaapekto sa startup time
+- [ ] Subukang i-disable ang mga extension pansamantala upang makita ang mga pagkakaiba sa performance
+
+### 🎯 **Ano ang Maaaring Makamit sa Loob ng Isang Oras**
+- [ ] Tapusin ang post-lesson quiz at unawain ang mga konsepto ng pagganap
+- [ ] Mag-implement ng background script para sa iyong browser extension
+- [ ] Matutunan ang paggamit ng browser.alarms para sa epektibong background tasks
+- [ ] Magpraktis ng message passing sa pagitan ng content scripts at background scripts
+- [ ] Sukatin at i-optimize ang paggamit ng resource ng iyong extension
+
+### 📅 **Ang Iyong Lingguhang Paglalakbay sa Pagganap**
+- [ ] Kumpletuhin ang isang high-performance browser extension na may background functionality
+- [ ] Masterin ang service workers at modern extension architecture
+- [ ] Mag-implement ng epektibong data synchronization at caching strategies
+- [ ] Matutunan ang advanced debugging techniques para sa pagganap ng extension
+- [ ] I-optimize ang iyong extension para sa parehong functionality at resource efficiency
+- [ ] Gumawa ng komprehensibong tests para sa mga senaryo ng pagganap ng extension
+
+### 🌟 **Ang Iyong Buwanang Mastery sa Optimization**
+- [ ] Gumawa ng enterprise-grade browser extensions na may optimal performance
+- [ ] Matutunan ang tungkol sa Web Workers, Service Workers, at modern web performance
+- [ ] Mag-ambag sa mga open source projects na nakatuon sa performance optimization
+- [ ] Masterin ang browser internals at advanced debugging techniques
+- [ ] Gumawa ng mga performance monitoring tools at best practices guides
+- [ ] Maging isang performance expert na tumutulong sa pag-optimize ng web applications
+
+## 🎯 Ang Iyong Browser Extension Mastery Timeline
+
+```mermaid
+timeline
+    title Complete Extension Development Progression
+    
+    section Performance Fundamentals (20 minutes)
+        Browser Profiling: DevTools mastery
+                         : Timeline analysis
+                         : Bottleneck identification
+                         : Critical rendering path
+        
+    section Background Tasks (25 minutes)
+        Extension Architecture: Message passing
+                              : Background scripts
+                              : Runtime API usage
+                              : Cross-context communication
+        
+    section Visual Feedback (30 minutes)
+        Dynamic UI: Color calculation algorithms
+                  : Canvas API integration
+                  : Icon generation
+                  : Real-time updates
+        
+    section Performance Optimization (35 minutes)
+        Efficient Code: Async operations
+                      : Memory management
+                      : Resource cleanup
+                      : Performance monitoring
+        
+    section Production Ready (45 minutes)
+        Polish & Testing: Cross-browser compatibility
+                        : Error handling
+                        : User experience
+                        : Performance validation
+        
+    section Advanced Features (1 week)
+        Extension Ecosystem: Chrome Web Store
+                           : User feedback
+                           : Analytics integration
+                           : Update management
+        
+    section Professional Development (2 weeks)
+        Enterprise Extensions: Team collaboration
+                             : Code reviews
+                             : CI/CD pipelines
+                             : Security audits
+        
+    section Expert Mastery (1 month)
+        Platform Expertise: Advanced Chrome APIs
+                          : Performance optimization
+                          : Architecture patterns
+                          : Open source contribution
+```
 
-[Suriin ang isang site para sa performance](assignment.md)
+### 🛠️ Ang Iyong Kumpletong Toolkit sa Pag-develop ng Extension
+
+Matapos tapusin ang trilogy na ito, na-master mo na ang:
+- **Arkitektura ng Browser**: Malalim na pag-unawa kung paano nag-iintegrate ang mga extension sa mga sistema ng browser
+- **Profiling ng Pagganap**: Kakayahang tukuyin at ayusin ang mga bottlenecks gamit ang developer tools
+- **Async Programming**: Modernong JavaScript patterns para sa responsive, non-blocking operations
+- **API Integration**: Pagkuha ng external data na may authentication at error handling
+- **Disenyo ng Visual**: Dinamikong UI updates at Canvas-based graphics generation
+- **Message Passing**: Komunikasyon sa pagitan ng mga script sa arkitektura ng extension
+- **User Experience**: Loading states, error handling, at intuitive interactions
+- **Production Skills**: Testing, debugging, at optimization para sa real-world deployment
+
+**Mga Aplikasyon sa Totoong Buhay**: Ang iyong mga kasanayan sa pag-develop ng extension ay direktang naaangkop sa:
+- **Progressive Web Apps**: Katulad na arkitektura at mga pattern ng pagganap
+- **Electron Desktop Apps**: Cross-platform applications gamit ang web technologies
+- **Mobile Hybrid Apps**: Cordova/PhoneGap development gamit ang web APIs
+- **Enterprise Web Applications**: Mga kumplikadong dashboard at productivity tools
+- **Chrome DevTools Extensions**: Advanced developer tooling at debugging
+- **Web API Integration**: Anumang application na nakikipag-ugnayan sa external services
+
+**Propesyonal na Epekto**: Ngayon ay kaya mo nang:
+- **Gumawa** ng production-ready browser extensions mula sa konsepto hanggang deployment
+- **I-optimize** ang pagganap ng web application gamit ang industry-standard profiling tools
+- **Mag-arkitekto** ng scalable systems na may tamang separation of concerns
+- **Mag-debug** ng mga kumplikadong async operations at cross-context communication
+- **Mag-ambag** sa mga open source extension projects at browser standards
+
+**Mga Susunod na Oportunidad**:
+- **Chrome Web Store Developer**: Mag-publish ng mga extension para sa milyun-milyong user
+- **Web Performance Engineer**: Mag-specialize sa optimization at user experience
+- **Browser Platform Developer**: Mag-ambag sa pag-develop ng browser engine
+- **Extension Framework Creator**: Gumawa ng mga tools na tumutulong sa ibang developer
+- **Developer Relations**: Magbahagi ng kaalaman sa pamamagitan ng pagtuturo at paggawa ng content
+
+🌟 **Achievement Unlocked**: Nakagawa ka ng isang kumpleto, functional na browser extension na nagpapakita ng mga propesyonal na kasanayan sa pag-develop at modernong web standards!
+
+## Assignment
+
+[Analyze a site for performance](assignment.md)
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi eksaktong impormasyon. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/6-space-game/1-introduction/README.md b/translations/tl/6-space-game/1-introduction/README.md
index 00b8f3723c..7ab75879d5 100644
--- a/translations/tl/6-space-game/1-introduction/README.md
+++ b/translations/tl/6-space-game/1-introduction/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "862f7f2ef320f6f8950fae379e6ece45",
-  "translation_date": "2025-10-22T15:42:31+00:00",
+  "original_hash": "a6332a7bb4d0be3bfd24199c83993777",
+  "translation_date": "2025-11-03T14:06:41+00:00",
   "source_file": "6-space-game/1-introduction/README.md",
   "language_code": "tl"
 }
 -->
 # Gumawa ng Space Game Bahagi 1: Panimula
 
-![Space game animation na nagpapakita ng gameplay](../../../../6-space-game/images/pewpew.gif)
-
-Katulad ng mission control ng NASA na nagkokoordina ng maraming sistema sa panahon ng paglulunsad ng spacecraft, gagawa tayo ng isang space game na nagpapakita kung paano maaaring magtulungan ang iba't ibang bahagi ng isang programa nang maayos. Habang gumagawa ng isang bagay na maaari mong aktwal na laruin, matututo ka ng mahahalagang konsepto sa programming na maaaring gamitin sa anumang proyekto ng software.
-
-Susuriin natin ang dalawang pangunahing paraan ng pag-oorganisa ng code: inheritance at composition. Hindi lang ito mga akademikong konsepto – ito ang mga pattern na ginagamit sa lahat mula sa video games hanggang sa mga sistema ng pagbabangko. Magpapatupad din tayo ng isang sistema ng komunikasyon na tinatawag na pub/sub na gumagana tulad ng mga network ng komunikasyon na ginagamit sa spacecraft, na nagpapahintulot sa iba't ibang bahagi na magbahagi ng impormasyon nang walang paglikha ng mga dependency.
+```mermaid
+journey
+    title Your Game Development Journey
+    section Foundation
+      Learn game architecture: 3: Student
+      Understand inheritance: 4: Student
+      Explore composition: 4: Student
+    section Communication
+      Build pub/sub system: 4: Student
+      Design event flow: 5: Student
+      Connect components: 5: Student
+    section Application
+      Create game objects: 5: Student
+      Implement patterns: 5: Student
+      Plan game structure: 5: Student
+```
 
-Sa pagtatapos ng seryeng ito, maiintindihan mo kung paano bumuo ng mga application na maaaring mag-scale at mag-evolve – maging gumagawa ka man ng mga laro, web application, o anumang sistema ng software.
+![Animasyon ng space game na nagpapakita ng gameplay](../../../../6-space-game/images/pewpew.gif)
+
+Katulad ng misyon ng NASA na nagkokoordina ng iba't ibang sistema sa isang space launch, gagawa tayo ng space game na nagpapakita kung paano maaaring magtulungan ang iba't ibang bahagi ng isang programa nang maayos. Habang gumagawa ng isang bagay na maaari mong laruin, matututo ka ng mahahalagang konsepto sa programming na magagamit sa anumang proyekto ng software.
+
+Tatalakayin natin ang dalawang pangunahing paraan ng pag-aayos ng code: inheritance at composition. Hindi lang ito mga akademikong konsepto – ito ang mga pattern na ginagamit sa lahat mula sa video games hanggang sa mga sistema ng bangko. Magpapatupad din tayo ng isang sistema ng komunikasyon na tinatawag na pub/sub na gumagana tulad ng mga network ng komunikasyon na ginagamit sa spacecraft, na nagpapahintulot sa iba't ibang bahagi na magbahagi ng impormasyon nang hindi nagkakaroon ng direktang dependencies.
+
+Sa pagtatapos ng seryeng ito, maiintindihan mo kung paano gumawa ng mga application na maaaring mag-scale at mag-evolve – maging ito ay mga laro, web applications, o anumang sistema ng software.
+
+```mermaid
+mindmap
+  root((Game Architecture))
+    Object Organization
+      Inheritance
+      Composition
+      Class Hierarchies
+      Behavior Mixing
+    Communication Patterns
+      Pub/Sub System
+      Event Emitters
+      Message Passing
+      Loose Coupling
+    Game Objects
+      Properties (x, y)
+      Behaviors (move, collide)
+      Lifecycle Management
+      State Management
+    Design Patterns
+      Factory Functions
+      Observer Pattern
+      Component System
+      Event-Driven Architecture
+    Scalability
+      Modular Design
+      Maintainable Code
+      Testing Strategies
+      Performance Optimization
+```
 
 ## Pre-Lecture Quiz
 
@@ -23,30 +70,69 @@ Sa pagtatapos ng seryeng ito, maiintindihan mo kung paano bumuo ng mga applicati
 
 ## Inheritance at Composition sa Pagbuo ng Laro
 
-Habang lumalaki ang mga proyekto sa pagiging kumplikado, nagiging kritikal ang organisasyon ng code. Ang nagsimula bilang isang simpleng script ay maaaring maging mahirap panatilihin nang walang tamang istruktura – katulad ng kung paano ang Apollo missions ay nangangailangan ng maingat na koordinasyon sa pagitan ng libu-libong mga bahagi.
+Habang lumalaki ang mga proyekto sa pagiging kumplikado, nagiging mahalaga ang tamang pag-aayos ng code. Ang isang simpleng script ay maaaring maging mahirap panatilihin nang walang tamang istruktura – katulad ng kung paano ang Apollo missions ay nangangailangan ng maingat na koordinasyon sa libu-libong bahagi.
 
-Susuriin natin ang dalawang pangunahing paraan ng pag-oorganisa ng code: inheritance at composition. Ang bawat isa ay may natatanging mga benepisyo, at ang pag-unawa sa pareho ay tumutulong sa iyo na pumili ng tamang paraan para sa iba't ibang sitwasyon. Ipapakita namin ang mga konseptong ito sa pamamagitan ng aming space game, kung saan ang mga bayani, kalaban, power-ups, at iba pang mga bagay ay kailangang mag-interact nang mahusay.
+Tatalakayin natin ang dalawang pangunahing paraan ng pag-aayos ng code: inheritance at composition. Ang bawat isa ay may natatanging benepisyo, at ang pag-unawa sa pareho ay makakatulong sa iyo na pumili ng tamang paraan para sa iba't ibang sitwasyon. Ipapakita namin ang mga konseptong ito sa pamamagitan ng aming space game, kung saan ang mga bayani, kalaban, power-ups, at iba pang mga bagay ay kailangang mag-interact nang mahusay.
 
-✅ Isa sa mga pinakasikat na aklat sa programming ay tungkol sa [design patterns](https://en.wikipedia.org/wiki/Design_Patterns).
+✅ Isa sa mga pinakasikat na aklat sa programming na naisulat ay tungkol sa [design patterns](https://en.wikipedia.org/wiki/Design_Patterns).
 
-Sa anumang laro, mayroon kang `game objects` – ang mga interactive na elemento na bumubuo sa mundo ng laro. Ang mga bayani, kalaban, power-ups, at visual effects ay lahat ng game objects. Ang bawat isa ay umiiral sa mga partikular na coordinate ng screen gamit ang `x` at `y` na mga halaga, katulad ng pag-plot ng mga puntos sa isang coordinate plane.
+Sa anumang laro, mayroon kang `game objects` – ang mga interactive na elemento na bumubuo sa mundo ng iyong laro. Ang mga bayani, kalaban, power-ups, at mga visual effects ay lahat ng game objects. Ang bawat isa ay may partikular na lokasyon sa screen gamit ang mga `x` at `y` na halaga, katulad ng pag-plot ng mga punto sa isang coordinate plane.
 
-Sa kabila ng kanilang mga visual na pagkakaiba, madalas na may mga karaniwang pag-uugali ang mga bagay na ito:
+Sa kabila ng kanilang visual na pagkakaiba, madalas na may mga karaniwang ugali ang mga bagay na ito:
 
-- **Umiiral sila sa isang lugar** – Ang bawat bagay ay may x at y coordinates para malaman ng laro kung saan ito iguguhit
+- **May lokasyon sila** – Ang bawat bagay ay may x at y coordinates para malaman ng laro kung saan ito iguguhit
 - **Marami ang maaaring gumalaw** – Tumakbo ang mga bayani, habulin ng mga kalaban, lumipad ang mga bala sa screen
-- **May lifespan sila** – Ang ilan ay nananatili magpakailanman, ang iba (tulad ng mga pagsabog) ay lumilitaw nang sandali at nawawala
-- **Reaksyon sila sa mga bagay** – Kapag nagbanggaan, nakokolekta ang mga power-ups, nag-a-update ang mga health bar
-
-✅ Isipin ang isang laro tulad ng Pac-Man. Maaari mo bang tukuyin ang apat na uri ng mga bagay na nakalista sa itaas sa larong ito?
+- **May lifespan sila** – Ang iba ay nananatili magpakailanman, ang iba (tulad ng mga pagsabog) ay lumilitaw sandali at nawawala
+- **Reaktibo sila** – Kapag nagbanggaan, nakokolekta ang mga power-ups, nag-a-update ang mga health bar
+
+✅ Isipin ang isang laro tulad ng Pac-Man. Maaari mo bang tukuyin ang apat na uri ng object na nakalista sa itaas sa larong ito?
+
+```mermaid
+classDiagram
+    class GameObject {
+        +x: number
+        +y: number
+        +type: string
+        +exists_somewhere()
+    }
+    
+    class MovableObject {
+        +moveTo(x, y)
+        +can_move_around()
+    }
+    
+    class TemporaryObject {
+        +lifespan: number
+        +has_lifespan()
+    }
+    
+    class InteractiveObject {
+        +onCollision()
+        +reacts_to_stuff()
+    }
+    
+    GameObject <|-- MovableObject
+    GameObject <|-- TemporaryObject
+    GameObject <|-- InteractiveObject
+    
+    MovableObject <|-- Hero
+    MovableObject <|-- Enemy
+    MovableObject <|-- Bullet
+    
+    TemporaryObject <|-- PowerUp
+    TemporaryObject <|-- Explosion
+    
+    InteractiveObject <|-- Collectible
+    InteractiveObject <|-- Obstacle
+```
 
-### Pagpapahayag ng Pag-uugali sa Pamamagitan ng Code
+### Pagpapahayag ng Ugali sa Pamamagitan ng Code
 
-Ngayon na naiintindihan mo ang mga karaniwang pag-uugali na ibinabahagi ng mga game objects, tingnan natin kung paano ipatupad ang mga pag-uugaling ito sa JavaScript. Maaari mong ipahayag ang pag-uugali ng mga bagay sa pamamagitan ng mga method na nakakabit sa mga klase o indibidwal na mga bagay, at may ilang mga paraan na maaaring piliin.
+Ngayon na nauunawaan mo ang mga karaniwang ugali na ibinabahagi ng mga game objects, tuklasin natin kung paano ipatupad ang mga ugaling ito sa JavaScript. Maaari mong ipahayag ang ugali ng object sa pamamagitan ng mga methods na nakakabit sa mga klase o indibidwal na mga object, at may ilang mga paraan na maaari mong piliin.
 
-**Ang Paraan na Batay sa Klase**
+**Ang Paraan ng Class-Based**
 
-Ang mga klase at inheritance ay nagbibigay ng istrukturadong paraan ng pag-oorganisa ng mga game objects. Katulad ng taxonomic classification system na binuo ni Carl Linnaeus, nagsisimula ka sa isang base class na naglalaman ng mga karaniwang properties, pagkatapos ay lumikha ng mga espesyal na klase na nagmamana ng mga pundasyon habang nagdaragdag ng mga partikular na kakayahan.
+Ang mga klase at inheritance ay nagbibigay ng istrukturadong paraan ng pag-aayos ng mga game objects. Katulad ng taxonomic classification system na binuo ni Carl Linnaeus, magsisimula ka sa isang base class na naglalaman ng mga karaniwang properties, pagkatapos ay gagawa ng mga specialized na klase na nagmamana ng mga pundasyon habang nagdadagdag ng mga partikular na kakayahan.
 
 ✅ Ang inheritance ay isang mahalagang konsepto na dapat maunawaan. Matuto pa sa [artikulo ng MDN tungkol sa inheritance](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
 
@@ -63,9 +149,9 @@ class GameObject {
 }
 ```
 
-**Himayin natin ito nang hakbang-hakbang:**
-- Gumagawa tayo ng isang pangunahing template na maaaring gamitin ng bawat game object
-- Ang constructor ay nagse-save kung nasaan ang object (`x`, `y`) at kung anong uri ng bagay ito
+**Himayin natin ito hakbang-hakbang:**
+- Gumagawa tayo ng basic template na magagamit ng bawat game object
+- Ang constructor ay nagse-save kung saan ang object ay (`x`, `y`) at kung anong uri ito
 - Ito ang nagiging pundasyon na gagamitin ng lahat ng iyong game objects
 
 ```javascript
@@ -83,10 +169,10 @@ class Movable extends GameObject {
 }
 ```
 
-**Sa itaas, ginawa natin ang sumusunod:**
-- **In-extend** ang GameObject class upang magdagdag ng functionality sa paggalaw
-- **Tinawag** ang parent constructor gamit ang `super()` upang i-initialize ang mga inherited properties
-- **Nagdagdag** ng `moveTo()` method na nag-a-update sa posisyon ng object
+**Sa itaas, ginawa natin ang:**
+- **Pag-extend** ng GameObject class para magdagdag ng functionality sa paggalaw
+- **Pag-call** sa parent constructor gamit ang `super()` para i-initialize ang inherited properties
+- **Pagdagdag** ng `moveTo()` method na nag-a-update sa posisyon ng object
 
 ```javascript
 // Step 3: Create specific game object types
@@ -111,16 +197,16 @@ const tree = new Tree(10, 15);
 ```
 
 **Pag-unawa sa mga konseptong ito:**
-- **Lumilikha** ng mga espesyal na uri ng object na nagmamana ng naaangkop na mga pag-uugali
+- **Gumagawa** ng mga specialized na uri ng object na nagmamana ng tamang ugali
 - **Nagpapakita** kung paano pinapayagan ng inheritance ang selective feature inclusion
 - **Ipinapakita** na ang mga bayani ay maaaring gumalaw habang ang mga puno ay nananatiling stationary
-- **Nagpapakita** kung paano pinipigilan ng class hierarchy ang mga hindi naaangkop na aksyon
+- **Nagpapakita** kung paano pinipigilan ng class hierarchy ang mga hindi angkop na aksyon
 
 ✅ Maglaan ng ilang minuto upang muling isipin ang isang Pac-Man hero (Inky, Pinky o Blinky, halimbawa) at kung paano ito isusulat sa JavaScript.
 
 **Ang Paraan ng Composition**
 
-Ang composition ay sumusunod sa modular na pilosopiya ng disenyo, katulad ng kung paano dinisenyo ng mga inhinyero ang spacecraft na may mga interchangeable na bahagi. Sa halip na magmana mula sa isang parent class, pinagsasama mo ang mga partikular na pag-uugali upang lumikha ng mga bagay na may eksaktong functionality na kailangan nila. Ang paraang ito ay nag-aalok ng flexibility nang walang mahigpit na hierarchical constraints.
+Ang composition ay sumusunod sa modular na disenyo, katulad ng kung paano dinisenyo ng mga engineer ang spacecraft na may mga interchangeable na bahagi. Sa halip na magmana mula sa isang parent class, pinagsasama mo ang mga partikular na ugali upang makagawa ng mga object na may eksaktong functionality na kailangan nila. Ang paraang ito ay nag-aalok ng flexibility nang walang mahigpit na hierarchical constraints.
 
 ```javascript
 // Step 1: Create base behavior objects
@@ -140,8 +226,8 @@ const movable = {
 
 **Narito ang ginagawa ng code na ito:**
 - **Nagde-define** ng base `gameObject` na may position at type properties
-- **Lumilikha** ng hiwalay na `movable` behavior object na may functionality sa paggalaw
-- **Naghiwalay** ng mga concern sa pamamagitan ng pagpapanatili ng position data at movement logic na independent
+- **Gumagawa** ng hiwalay na `movable` behavior object na may functionality sa paggalaw
+- **Naghiwalay** ng mga concern sa pamamagitan ng paghiwalay ng position data at movement logic
 
 ```javascript
 // Step 2: Compose objects by combining behaviors
@@ -167,11 +253,11 @@ function createStatic(x, y, type) {
 }
 ```
 
-**Sa itaas, ginawa natin ang sumusunod:**
-- **Pinagsama** ang base object properties sa movement behavior gamit ang spread syntax
-- **Lumilikha** ng mga factory function na nagbabalik ng customized na mga object
-- **Nag-enable** ng flexible object creation nang walang mahigpit na class hierarchies
-- **Nagpapahintulot** sa mga object na magkaroon ng eksaktong mga pag-uugali na kailangan nila
+**Sa itaas, ginawa natin ang:**
+- **Pag-combine** ng base object properties sa movement behavior gamit ang spread syntax
+- **Paglikha** ng factory functions na nagbabalik ng customized na mga object
+- **Pag-enable** ng flexible object creation nang walang mahigpit na class hierarchies
+- **Pagpayag** sa mga object na magkaroon ng eksaktong ugali na kailangan nila
 
 ```javascript
 // Step 4: Create and use your composed objects
@@ -183,43 +269,103 @@ const tree = createStatic(0, 0, 'Tree');
 ```
 
 **Mga mahalagang punto na dapat tandaan:**
-- **Nagko-compose** ng mga object sa pamamagitan ng pag-mix ng mga pag-uugali sa halip na magmana ng mga ito
+- **Nagko-compose** ng mga object sa pamamagitan ng pag-mix ng mga ugali sa halip na magmana
 - **Nagbibigay** ng mas maraming flexibility kaysa sa mahigpit na inheritance hierarchies
-- **Nagpapahintulot** sa mga object na magkaroon ng eksaktong mga feature na kailangan nila
-- **Gumagamit** ng modernong JavaScript spread syntax para sa malinis na object combination 
+- **Nagpapahintulot** sa mga object na magkaroon ng eksaktong features na kailangan nila
+- **Gumagamit** ng modernong JavaScript spread syntax para sa malinis na object combination
 ```
 
 **Which Pattern Should You Choose?**
 
-> 💡 **Pro Tip**: Both patterns have their place in modern JavaScript development. Classes work well for clearly defined hierarchies, while composition shines when you need maximum flexibility.
-> 
-**Here's when to use each approach:**
-- **Choose** inheritance when you have clear "is-a" relationships (a Hero *is-a* Movable object)
-- **Select** composition when you need "has-a" relationships (a Hero *has* movement abilities)
-- **Consider** your team's preferences and project requirements
-- **Remember** that you can mix both approaches in the same application
-
-## Communication Patterns: The Pub/Sub System
-
-As applications grow complex, managing communication between components becomes challenging. The publish-subscribe pattern (pub/sub) solves this problem using principles similar to radio broadcasting – one transmitter can reach multiple receivers without knowing who's listening.
+**Which Pattern Should You Choose?**
 
-Consider what happens when a hero takes damage: the health bar updates, sound effects play, visual feedback appears. Rather than coupling the hero object directly to these systems, pub/sub allows the hero to broadcast a "damage taken" message. Any system that needs to respond can subscribe to this message type and react accordingly.
+```mermaid
+quadrantChart
+    title Code Organization Patterns
+    x-axis Simple --> Complex
+    y-axis Rigid --> Flexible
+    quadrant-1 Advanced Composition
+    quadrant-2 Hybrid Approaches
+    quadrant-3 Basic Inheritance
+    quadrant-4 Modern Composition
+    
+    Class Inheritance: [0.3, 0.2]
+    Interface Implementation: [0.6, 0.4]
+    Mixin Patterns: [0.7, 0.7]
+    Pure Composition: [0.8, 0.9]
+    Factory Functions: [0.5, 0.8]
+    Prototype Chain: [0.4, 0.3]
+```
 
-✅ **Pub/Sub** stands for 'publish-subscribe'
+> 💡 **Pro Tip**: Parehong may lugar ang mga pattern na ito sa modernong JavaScript development. Ang mga klase ay mahusay para sa malinaw na hierarchies, habang ang composition ay magaling kapag kailangan mo ng maximum flexibility.
+> 
+**Narito kung kailan gagamitin ang bawat paraan:**
+- **Piliin** ang inheritance kapag may malinaw na "is-a" relationships (ang Hero *is-a* Movable object)
+- **Piliin** ang composition kapag kailangan mo ng "has-a" relationships (ang Hero *has* movement abilities)
+- **Isaalang-alang** ang mga preference ng iyong team at mga pangangailangan ng proyekto
+- **Tandaan** na maaari mong pagsamahin ang parehong paraan sa parehong application
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Organisasyon ng Object**: Bago lumipat sa mga pattern ng komunikasyon, tiyakin na kaya mong:
+- ✅ Ipaliwanag ang pagkakaiba ng inheritance at composition
+- ✅ Tukuyin kung kailan gagamit ng mga klase vs factory functions
+- ✅ Maunawaan kung paano gumagana ang `super()` keyword sa inheritance
+- ✅ Kilalanin ang mga benepisyo ng bawat paraan para sa pagbuo ng laro
+
+**Mabilis na Self-Test**: Paano mo gagawin ang isang Flying Enemy na maaaring gumalaw at lumipad?
+- **Inheritance approach**: `class FlyingEnemy extends Movable`
+- **Composition approach**: `{ ...movable, ...flyable, ...gameObject }`
+
+**Koneksyon sa Tunay na Mundo**: Ang mga pattern na ito ay makikita kahit saan:
+- **React Components**: Props (composition) vs class inheritance
+- **Game Engines**: Entity-component systems na gumagamit ng composition
+- **Mobile Apps**: UI frameworks na madalas gumagamit ng inheritance hierarchies
+
+## Mga Pattern ng Komunikasyon: Ang Pub/Sub System
+
+Habang lumalaki ang mga application sa pagiging kumplikado, nagiging hamon ang pamamahala ng komunikasyon sa pagitan ng mga bahagi. Ang publish-subscribe pattern (pub/sub) ay nag-aayos ng problemang ito gamit ang mga prinsipyo na katulad ng radio broadcasting – isang transmitter ay maaaring maabot ang maraming receiver nang hindi alam kung sino ang nakikinig.
+
+Isipin kung ano ang nangyayari kapag ang isang bayani ay nasaktan: nag-a-update ang health bar, tumutugtog ang sound effects, lumilitaw ang visual feedback. Sa halip na direktang ikabit ang hero object sa mga sistemang ito, pinapayagan ng pub/sub ang hero na mag-broadcast ng "damage taken" message. Ang anumang sistema na kailangang tumugon ay maaaring mag-subscribe sa ganitong uri ng mensahe at tumugon nang naaayon.
+
+✅ **Pub/Sub** ay nangangahulugang 'publish-subscribe'
+
+```mermaid
+flowchart TD
+    A[Hero Takes Damage] --> B[Publish: HERO_DAMAGED]
+    B --> C[Event System]
+    
+    C --> D[Health Bar Subscriber]
+    C --> E[Sound System Subscriber]
+    C --> F[Visual Effects Subscriber]
+    C --> G[Achievement System Subscriber]
+    
+    D --> H[Update Health Display]
+    E --> I[Play Damage Sound]
+    F --> J[Show Red Flash]
+    G --> K[Check Survival Achievements]
+    
+    style A fill:#ffebee
+    style B fill:#e1f5fe
+    style C fill:#e8f5e8
+    style H fill:#fff3e0
+    style I fill:#fff3e0
+    style J fill:#fff3e0
+    style K fill:#fff3e0
+```
 
-### Understanding the Pub/Sub Architecture
+### Pag-unawa sa Pub/Sub Architecture
 
-The pub/sub pattern keeps different parts of your application loosely coupled, meaning they can work together without being directly dependent on each other. This separation makes your code more maintainable, testable, and flexible to changes.
+Pinapanatili ng pub/sub pattern ang iba't ibang bahagi ng iyong application na loosely coupled, ibig sabihin maaari silang magtulungan nang hindi direktang umaasa sa isa't isa. Ang paghihiwalay na ito ay ginagawang mas madali ang pag-maintain, pag-test, at pag-adjust ng iyong code.
 
-**The key players in pub/sub:**
-- **Messages** – Simple text labels like `'PLAYER_SCORED'` that describe what happened (plus any extra info)
-- **Publishers** – The objects that shout out "Something happened!" to anyone who's listening
-- **Subscribers** – The objects that say "I care about that event" and react when it happens
-- **Event System** – The middleman that makes sure messages get to the right listeners
+**Ang mga pangunahing bahagi ng pub/sub:**
+- **Mga Mensahe** – Simpleng text labels tulad ng `'PLAYER_SCORED'` na naglalarawan kung ano ang nangyari (plus anumang dagdag na impormasyon)
+- **Mga Publisher** – Ang mga object na sumisigaw ng "May nangyari!" sa sinumang nakikinig
+- **Mga Subscriber** – Ang mga object na nagsasabing "Interesado ako sa event na iyon" at tumutugon kapag nangyari ito
+- **Event System** – Ang tagapamagitan na tinitiyak na ang mga mensahe ay makarating sa tamang listener
 
-### Building an Event System
+### Pagbuo ng Event System
 
-Let's create a simple but powerful event system that demonstrates these concepts:
+Gumawa tayo ng simple ngunit makapangyarihang event system na nagpapakita ng mga konseptong ito:
 
 ```javascript
 // Step 1: Create the EventEmitter class
@@ -248,15 +394,15 @@ class EventEmitter {
 ```
 
 **Paghimay sa nangyayari dito:**
-- **Lumilikha** ng central event management system gamit ang isang simpleng klase
-- **Nag-iimbak** ng mga listener sa isang object na naka-organize ayon sa uri ng mensahe
+- **Gumagawa** ng central event management system gamit ang simpleng klase
+- **Nag-iimbak** ng mga listener sa isang object na nakaayos ayon sa uri ng mensahe
 - **Nagre-rehistro** ng mga bagong listener gamit ang `on()` method
 - **Nagbo-broadcast** ng mga mensahe sa lahat ng interesadong listener gamit ang `emit()`
 - **Sumusuporta** sa optional na data payloads para sa pagpapasa ng kaugnay na impormasyon
 
 ### Pagsasama-sama: Isang Praktikal na Halimbawa
 
-Sige, tingnan natin ito sa aksyon! Bubuo tayo ng isang simpleng movement system na nagpapakita kung gaano kalinis at flexible ang pub/sub:
+Sige, tingnan natin ito sa aksyon! Gagawa tayo ng simpleng movement system na nagpapakita kung gaano kalinis at flexible ang pub/sub:
 
 ```javascript
 // Step 1: Define your message types
@@ -272,9 +418,9 @@ const hero = createHero(0, 0);
 ```
 
 **Narito ang ginagawa ng code na ito:**
-- **Nagde-define** ng constants object upang maiwasan ang mga typo sa mga pangalan ng mensahe
-- **Lumilikha** ng event emitter instance upang pamahalaan ang lahat ng komunikasyon
-- **Nag-i-initialize** ng hero object sa starting position
+- **Nagde-define** ng constants object para maiwasan ang typo sa mga pangalan ng mensahe
+- **Gumagawa** ng event emitter instance para pamahalaan ang lahat ng komunikasyon
+- **Nag-iinitialize** ng hero object sa starting position
 
 ```javascript
 // Step 3: Set up event listeners (subscribers)
@@ -289,10 +435,10 @@ eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
 });
 ```
 
-**Sa itaas, ginawa natin ang sumusunod:**
-- **Nagrehistro** ng mga event listener na tumutugon sa mga movement message
-- **Nag-update** ng posisyon ng hero batay sa direksyon ng paggalaw
-- **Nagdagdag** ng console logging upang subaybayan ang mga pagbabago sa posisyon ng hero
+**Sa itaas, ginawa natin ang:**
+- **Nag-rehistro** ng mga event listener na tumutugon sa mga movement message
+- **Nag-update** ng posisyon ng hero base sa direksyon ng paggalaw
+- **Nagdagdag** ng console logging para subaybayan ang mga pagbabago sa posisyon ng hero
 - **Naghiwalay** ng movement logic mula sa input handling
 
 ```javascript
@@ -310,46 +456,79 @@ window.addEventListener('keydown', (event) => {
 ```
 
 **Pag-unawa sa mga konseptong ito:**
-- **Nagkokonekta** ng keyboard input sa mga game event nang walang tight coupling
-- **Nag-enable** sa input system na makipag-ugnayan sa mga game object nang hindi direktang nakikilala ang isa't isa
+- **Kumokonekta** ng keyboard input sa game events nang walang tight coupling
+- **Nagpapahintulot** sa input system na makipag-usap sa mga game object nang hindi direktang konektado
 - **Nagpapahintulot** sa maraming sistema na tumugon sa parehong keyboard events
-- **Ginagawang** madali ang pagbabago ng key bindings o pagdaragdag ng mga bagong input method
+- **Ginagawang** madali ang pagbabago ng key bindings o pagdagdag ng bagong input methods
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Keyboard
+    participant EventEmitter
+    participant Hero
+    participant SoundSystem
+    participant Camera
+    
+    User->>Keyboard: Presses ArrowLeft
+    Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
+    EventEmitter->>Hero: Move left 5 pixels
+    EventEmitter->>SoundSystem: Play footstep sound
+    EventEmitter->>Camera: Follow hero
+    
+    Hero->>Hero: Update position
+    SoundSystem->>SoundSystem: Play audio
+    Camera->>Camera: Adjust viewport
+```
 
-> 💡 **Pro Tip**: Ang kagandahan ng pattern na ito ay ang flexibility! Madali kang makakapagdagdag ng sound effects, screen shake, o particle effects sa pamamagitan lamang ng pagdaragdag ng higit pang event listener – walang kailangang baguhin sa umiiral na keyboard o movement code.
+> 💡 **Pro Tip**: Ang kagandahan ng pattern na ito ay ang flexibility! Madali kang makakapagdagdag ng sound effects, screen shake, o particle effects sa pamamagitan lamang ng pagdagdag ng higit pang event listener – walang kailangang baguhin sa umiiral na keyboard o movement code.
 > 
 **Narito kung bakit magugustuhan mo ang paraang ito:**
-- Ang pagdaragdag ng mga bagong feature ay nagiging napakadali – makinig lang sa mga event na mahalaga sa iyo
+- Ang pagdagdag ng bagong features ay nagiging napakadali – makinig lang sa mga event na mahalaga sa iyo
 - Maraming bagay ang maaaring tumugon sa parehong event nang hindi nagkakagulo
-- Ang testing ay nagiging mas simple dahil ang bawat bahagi ay gumagana nang independent
-- Kapag may nasira, alam mo kung saan eksaktong titingin
+- Ang testing ay nagiging mas simple dahil ang bawat bahagi ay gumagana nang independyente
+- Kapag may nasira, alam mo kung saan eksaktong titingnan
 
 ### Bakit Epektibo ang Pag-scale ng Pub/Sub
 
-Ang pub/sub pattern ay nagpapanatili ng pagiging simple habang lumalaki ang pagiging kumplikado ng mga application. Maging sa pamamahala ng dose-dosenang mga kalaban, dynamic na UI updates, o sound systems, hinahawakan ng pattern ang pagtaas ng scale nang walang pagbabago sa arkitektura. Ang mga bagong feature ay madaling isama sa umiiral na event system nang hindi naaapektuhan ang naitatag na functionality.
+Pinapanatili ng pub/sub pattern ang pagiging simple habang lumalaki ang pagiging kumplikado ng mga application. Maging ito ay pamamahala ng dose-dosenang mga kalaban, dynamic na pag-update ng UI, o mga sound system, hinahawakan ng pattern ang pagtaas ng scale nang walang pagbabago sa arkitektura. Ang mga bagong feature ay madaling isama sa umiiral na event system nang hindi naaapektuhan ang naitatag na functionality.
 
-> ⚠️ **Karaniwang Pagkakamali**: Huwag gumawa ng masyadong maraming partikular na uri ng mensahe sa simula. Magsimula sa malawak na mga kategorya at i-refine ang mga ito habang nagiging mas malinaw ang mga pangangailangan ng iyong laro.
+> ⚠️ **Karaniwang Pagkakamali**: Huwag gumawa ng masyadong maraming partikular na uri ng mensahe sa simula. Magsimula sa malawak na kategorya at i-refine ang mga ito habang nagiging malinaw ang pangangailangan ng iyong laro.
 > 
 **Mga pinakamahusay na kasanayan na dapat sundin:**
-- **Naggrupo** ng mga kaugnay na mensahe sa lohikal na mga kategorya
-- **Gumagamit** ng mga deskriptibong pangalan na malinaw na nagpapahiwatig kung ano ang nangyari
-- **Pinapanatili** ang mga payload ng mensahe na simple at nakatuon
-- **Nagdo-dokumento** ng iyong mga uri ng mensahe para sa pakikipagtulungan sa koponan
+- **I-grupo** ang mga kaugnay na mensahe sa lohikal na mga kategorya
+- **Gumamit** ng mga deskriptibong pangalan na malinaw na nagpapahiwatig kung ano ang nangyari
+- **Panatilihin** ang mga payload ng mensahe na simple at nakatuon
+- **I-dokumento** ang iyong mga uri ng mensahe para sa pakikipagtulungan ng team
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Event-Driven Architecture**: Siguraduhing nauunawaan mo ang buong sistema:
+- ✅ Paano pinipigilan ng pub/sub pattern ang tight coupling sa pagitan ng mga bahagi?
+- ✅ Bakit mas madali ang pagdagdag ng bagong features gamit ang event-driven architecture?
+- ✅ Anong papel ang ginagampanan ng EventEmitter sa daloy ng komunikasyon?
+- ✅ Paano nakakatulong ang message constants sa pag-iwas sa bugs at pagpapabuti ng maintainability?
+
+**Design Challenge**: Paano mo hahawakan ang mga game scenarios na ito gamit ang pub/sub?
+1. **Kalaban namatay**: Mag-update ng score, tumugtog ng sound, mag-spawn ng power-up, alisin sa screen
+2. **Natapos ang level**: Itigil ang musika, ipakita ang UI, i-save ang progress, i-load ang susunod na level
+3. **Nakolekta ang power-up**: Mag-enhance ng abilities, mag-update ng UI, tumugtog ng effect, mag-start ng timer
+
+**Koneksyon sa Propesyonal**: Ang pattern na ito ay makikita sa:
+- **Frontend Frameworks**: React/Vue event systems
+- **Backend Services**: Microservice communication
+- **Game Engines**: Unity's event system
+- **Mobile Development**: iOS/Android notification systems
 
 ---
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
-
-**Deskripsyon:** Gumawa ng simpleng sistema ng game object gamit ang parehong inheritance at pub/sub pattern. Magpapatupad ka ng basic na laro kung saan ang iba't ibang object ay maaaring makipag-ugnayan sa pamamagitan ng mga event nang hindi direktang nakikilala ang isa't isa.
+Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
 
-**Prompt:** Gumawa ng JavaScript game system na may sumusunod na mga kinakailangan: 1) Gumawa ng base GameObject class na may x, y coordinates at type property. 2) Gumawa ng Hero class na nag-extend sa GameObject at maaaring gumalaw. 3) Gumawa ng Enemy class na nag-extend sa GameObject at maaaring habulin ang hero. 4) Magpatupad ng EventEmitter class para sa pub/sub pattern. 5) Mag-set up ng mga event listener upang kapag gumalaw ang hero, ang mga malapit na kalaban ay makatanggap ng 'HERO_MOVED' event at i-update ang kanilang posisyon upang habulin ang hero. Isama ang mga console.log statement upang ipakita ang komunikasyon sa pagitan ng mga object.
+**Deskripsyon:** Gumawa ng simpleng game object system gamit ang parehong inheritance at pub/sub pattern. Magpapatupad ka ng basic na laro kung saan ang iba't ibang object ay maaaring makipag-usap sa pamamagitan ng events nang hindi direktang nalalaman ang tungkol sa isa't isa.
 
-Matuto pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
-
-## 🚀 Hamon
-
-Pag-isipan kung paano maaaring mapahusay ng pub-sub pattern ang arkitektura ng laro. Tukuyin kung aling mga bahagi ang dapat mag-emit ng mga event at kung paano dapat tumugon ang sistema. Magdisenyo ng konsepto ng laro at i-map out ang mga pattern ng komunikasyon sa pagitan ng mga bahagi nito.
+**Prompt:** Gumawa ng JavaScript game system na may sumusunod na requirements: 1) Gumawa ng base GameObject class na may x, y coordinates at type property. 2) Gumawa ng Hero class na nag-extend sa GameObject at maaaring gumalaw. 3) Gumawa ng Enemy class na nag-extend sa GameObject at maaaring habulin ang hero. 4) Magpatupad ng EventEmitter class para sa pub/sub pattern. 5) Mag-set up ng event listeners para kapag gumalaw ang hero, ang mga kalaban na malapit ay makakatanggap ng 'HERO_MOVED' event at mag-update ng kanilang
+Isaalang-alang kung paano mapapahusay ng pub-sub pattern ang arkitektura ng laro. Tukuyin kung aling mga bahagi ang dapat maglabas ng mga event at kung paano dapat tumugon ang sistema. Magdisenyo ng konsepto ng laro at i-map ang mga pattern ng komunikasyon sa pagitan ng mga bahagi nito.
 
 ## Post-Lecture Quiz
 
@@ -359,6 +538,120 @@ Pag-isipan kung paano maaaring mapahusay ng pub-sub pattern ang arkitektura ng l
 
 Matuto pa tungkol sa Pub/Sub sa pamamagitan ng [pagbabasa tungkol dito](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
 
+### ⚡ **Mga Pwede Mong Gawin sa Susunod na 5 Minuto**
+- [ ] Buksan ang anumang HTML5 na laro online at suriin ang code nito gamit ang DevTools
+- [ ] Gumawa ng simpleng HTML5 Canvas element at gumuhit ng basic na hugis
+- [ ] Subukan ang paggamit ng `setInterval` para gumawa ng simpleng animation loop
+- [ ] Tuklasin ang Canvas API documentation at subukan ang isang drawing method
+
+### 🎯 **Mga Pwede Mong Makamit sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at unawain ang mga konsepto ng game development
+- [ ] I-set up ang istruktura ng iyong game project gamit ang HTML, CSS, at JavaScript files
+- [ ] Gumawa ng basic na game loop na patuloy na nag-a-update at nagre-render
+- [ ] Gumuhit ng iyong unang game sprites sa canvas
+- [ ] Mag-implement ng basic asset loading para sa mga imahe at tunog
+
+### 📅 **Paglikha ng Laro sa Loob ng Isang Linggo**
+- [ ] Kumpletuhin ang buong space game na may lahat ng planadong features
+- [ ] Magdagdag ng polished graphics, sound effects, at smooth animations
+- [ ] Mag-implement ng game states (start screen, gameplay, game over)
+- [ ] Gumawa ng scoring system at player progress tracking
+- [ ] Gawing responsive at accessible ang iyong laro sa iba't ibang devices
+- [ ] Ibahagi ang iyong laro online at mangalap ng feedback mula sa mga manlalaro
+
+### 🌟 **Pag-develop ng Laro sa Loob ng Isang Buwan**
+- [ ] Gumawa ng maraming laro na nag-eexplore ng iba't ibang genre at mechanics
+- [ ] Matutunan ang isang game development framework tulad ng Phaser o Three.js
+- [ ] Mag-ambag sa mga open source na proyekto ng game development
+- [ ] Masterin ang advanced game programming patterns at optimization
+- [ ] Gumawa ng portfolio na nagpapakita ng iyong game development skills
+- [ ] Mag-mentor sa iba na interesado sa game development at interactive media
+
+## 🎯 Timeline ng Iyong Game Development Mastery
+
+```mermaid
+timeline
+    title Game Architecture Learning Progression
+    
+    section Object Patterns (20 minutes)
+        Code Organization: Class inheritance
+                         : Composition patterns
+                         : Factory functions
+                         : Behavior mixing
+        
+    section Communication Systems (25 minutes)
+        Event Architecture: Pub/Sub implementation
+                          : Message design
+                          : Event emitters
+                          : Loose coupling
+        
+    section Game Object Design (30 minutes)
+        Entity Systems: Property management
+                      : Behavior composition
+                      : State handling
+                      : Lifecycle management
+        
+    section Architecture Patterns (35 minutes)
+        System Design: Component systems
+                     : Observer pattern
+                     : Command pattern
+                     : State machines
+        
+    section Advanced Concepts (45 minutes)
+        Scalable Architecture: Performance optimization
+                             : Memory management
+                             : Modular design
+                             : Testing strategies
+        
+    section Game Engine Concepts (1 week)
+        Professional Development: Scene graphs
+                                 : Asset management
+                                 : Rendering pipelines
+                                 : Physics integration
+        
+    section Framework Mastery (2 weeks)
+        Modern Game Development: React game patterns
+                               : Canvas optimization
+                               : WebGL basics
+                               : PWA games
+        
+    section Industry Practices (1 month)
+        Professional Skills: Team collaboration
+                           : Code reviews
+                           : Game design patterns
+                           : Performance profiling
+```
+
+### 🛠️ Buod ng Iyong Game Architecture Toolkit
+
+Pagkatapos ng leksyong ito, mayroon ka na:
+- **Mastery sa Design Pattern**: Pag-unawa sa trade-offs ng inheritance vs composition
+- **Event-Driven Architecture**: Pag-implement ng pub/sub para sa scalable na komunikasyon
+- **Object-Oriented Design**: Class hierarchies at behavior composition
+- **Modernong JavaScript**: Factory functions, spread syntax, at ES6+ patterns
+- **Scalable Architecture**: Loose coupling at modular design principles
+- **Foundation ng Game Development**: Entity systems at component patterns
+- **Professional Patterns**: Mga industry-standard na approach sa code organization
+
+**Mga Real-World Application**: Ang mga pattern na ito ay direktang naaangkop sa:
+- **Frontend Frameworks**: React/Vue component architecture at state management
+- **Backend Services**: Microservice communication at event-driven systems
+- **Mobile Development**: Arkitektura ng iOS/Android app at notification systems
+- **Game Engines**: Unity, Unreal, at web-based game development
+- **Enterprise Software**: Event sourcing at distributed system design
+- **API Design**: RESTful services at real-time communication
+
+**Mga Propesyonal na Kasanayan na Nakuha**: Ngayon ay kaya mo nang:
+- **Magdisenyo** ng scalable software architectures gamit ang mga proven patterns
+- **Mag-implement** ng event-driven systems na humahawak ng mga kumplikadong interaksyon
+- **Pumili** ng angkop na code organization strategies para sa iba't ibang sitwasyon
+- **Mag-debug** at mag-maintain ng loosely coupled systems nang epektibo
+- **Mag-communicate** ng mga teknikal na desisyon gamit ang industry-standard terminology
+
+**Next Level**: Handa ka nang i-implement ang mga pattern na ito sa isang tunay na laro, mag-explore ng advanced game development topics, o i-apply ang mga architectural concepts na ito sa web applications!
+
+🌟 **Achievement Unlocked**: Na-master mo ang mga fundamental software architecture patterns na nagpapagana sa lahat mula sa simpleng laro hanggang sa kumplikadong enterprise systems!
+
 ## Assignment
 
 [Mock up a game](assignment.md)
@@ -366,4 +659,4 @@ Matuto pa tungkol sa Pub/Sub sa pamamagitan ng [pagbabasa tungkol dito](https://
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na awtoritatibong pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/6-space-game/2-drawing-to-canvas/README.md b/translations/tl/6-space-game/2-drawing-to-canvas/README.md
index 20c3c7b339..cef096a493 100644
--- a/translations/tl/6-space-game/2-drawing-to-canvas/README.md
+++ b/translations/tl/6-space-game/2-drawing-to-canvas/README.md
@@ -1,19 +1,66 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "84053695dca714e16ed064366503ebd5",
-  "translation_date": "2025-10-22T15:40:15+00:00",
+  "original_hash": "7994743c5b21fdcceb36307916ef249a",
+  "translation_date": "2025-11-03T14:04:29+00:00",
   "source_file": "6-space-game/2-drawing-to-canvas/README.md",
   "language_code": "tl"
 }
 -->
 # Gumawa ng Space Game Bahagi 2: I-drawing ang Hero at Monsters sa Canvas
 
-Ang Canvas API ay isa sa mga pinakamakapangyarihang tampok ng web development para sa paglikha ng dynamic at interactive na graphics direkta sa iyong browser. Sa araling ito, gagawin nating isang mundo ng laro ang blangkong HTML `<canvas>` element na puno ng mga bayani at halimaw. Isipin ang canvas bilang iyong digital na art board kung saan nagiging visual ang code.
-
-Bubuo tayo mula sa natutunan mo sa nakaraang aralin, at ngayon ay sisid tayo sa mga visual na aspeto. Matutunan mo kung paano mag-load at mag-display ng game sprites, mag-posisyon ng mga elemento nang eksakto, at lumikha ng visual na pundasyon para sa iyong space game. Ito ang tulay sa pagitan ng static na mga web page at dynamic, interactive na mga karanasan.
+```mermaid
+journey
+    title Your Canvas Graphics Journey
+    section Foundation
+      Understand Canvas API: 3: Student
+      Learn coordinate system: 4: Student
+      Draw basic shapes: 4: Student
+    section Image Handling
+      Load game assets: 4: Student
+      Handle async loading: 5: Student
+      Position sprites: 5: Student
+    section Game Rendering
+      Create game screen: 5: Student
+      Build formations: 5: Student
+      Optimize performance: 4: Student
+```
 
-Sa pagtatapos ng araling ito, magkakaroon ka ng kumpletong game scene na may tamang posisyon ng iyong hero ship at mga pormasyon ng kalaban na handa para sa labanan. Maiintindihan mo kung paano nagre-render ng graphics ang mga modernong laro sa mga browser at magkakaroon ka ng kakayahan na lumikha ng sarili mong interactive na visual na karanasan. Tuklasin natin ang canvas graphics at buhayin ang iyong space game!
+Ang Canvas API ay isa sa pinakamakapangyarihang tampok ng web development para sa paglikha ng dynamic at interactive na graphics direkta sa iyong browser. Sa araling ito, gagawin nating isang mundo ng laro ang blangkong HTML `<canvas>` element na puno ng mga hero at monsters. Isipin ang canvas bilang iyong digital na art board kung saan nagiging visual ang code.
+
+Binubuo natin ang natutunan mo sa nakaraang aralin, at ngayon ay sisid tayo sa mga visual na aspeto. Matututuhan mo kung paano mag-load at mag-display ng mga game sprites, mag-posisyon ng mga elemento nang eksakto, at lumikha ng visual na pundasyon para sa iyong space game. Pinupunan nito ang agwat sa pagitan ng mga static na web page at dynamic, interactive na karanasan.
+
+Sa pagtatapos ng araling ito, magkakaroon ka ng kumpletong game scene na may tamang posisyon ng iyong hero ship at handa na ang mga enemy formations para sa labanan. Mauunawaan mo kung paano nagre-render ng graphics ang mga modernong laro sa mga browser at magkakaroon ka ng kakayahan na lumikha ng sarili mong interactive na visual na karanasan. Tuklasin natin ang canvas graphics at buhayin ang iyong space game!
+
+```mermaid
+mindmap
+  root((Canvas Graphics))
+    Canvas Element
+      HTML5 Feature
+      2D Context
+      Coordinate System
+      Pixel Control
+    Drawing Operations
+      Basic Shapes
+      Text Rendering
+      Image Display
+      Path Drawing
+    Asset Management
+      Image Loading
+      Async Operations
+      Error Handling
+      Performance
+    Game Rendering
+      Sprite Positioning
+      Formation Layout
+      Scene Composition
+      Frame Updates
+    Visual Effects
+      Colors & Styles
+      Transformations
+      Animations
+      Layering
+```
 
 ## Pre-Lecture Quiz
 
@@ -23,7 +70,7 @@ Sa pagtatapos ng araling ito, magkakaroon ka ng kumpletong game scene na may tam
 
 Ano nga ba ang `<canvas>` element? Ito ang solusyon ng HTML5 para sa paglikha ng dynamic na graphics at animations sa mga web browser. Hindi tulad ng mga regular na imahe o video na static, binibigyan ka ng canvas ng pixel-level na kontrol sa lahat ng lumalabas sa screen. Perpekto ito para sa mga laro, data visualizations, at interactive na sining. Isipin ito bilang isang programmable na drawing surface kung saan ang JavaScript ang iyong paintbrush.
 
-Sa default, ang canvas element ay mukhang isang blangkong, transparent na rectangle sa iyong pahina. Pero dito nakasalalay ang potensyal! Ang tunay na kapangyarihan nito ay lumalabas kapag ginamit mo ang JavaScript para mag-drawing ng mga hugis, mag-load ng mga imahe, lumikha ng animations, at gawing interactive ang mga bagay. Katulad ito ng ginawa ng mga unang computer graphics pioneers sa Bell Labs noong 1960s na kailangang i-program ang bawat pixel para makalikha ng unang digital animations.
+Sa default, ang canvas element ay mukhang isang blangkong, transparent na rectangle sa iyong pahina. Ngunit dito nakasalalay ang potensyal! Ang tunay na kapangyarihan nito ay lumalabas kapag ginamit mo ang JavaScript para mag-drawing ng mga hugis, mag-load ng mga imahe, lumikha ng mga animation, at gawing interactive ang mga bagay. Katulad ito ng ginawa ng mga unang computer graphics pioneers sa Bell Labs noong 1960s na kailangang i-program ang bawat pixel para makalikha ng unang digital animations.
 
 ✅ Basahin ang [karagdagang impormasyon tungkol sa Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) sa MDN.
 
@@ -40,18 +87,56 @@ Ganito karaniwang ideklara ang canvas bilang bahagi ng body ng pahina:
 
 ## Pag-drawing ng Simpleng Geometry
 
-Ngayon na alam mo kung ano ang canvas element, tuklasin natin ang aktwal na pag-drawing dito! Ang canvas ay gumagamit ng coordinate system na maaaring pamilyar mula sa math class, pero may isang mahalagang twist na partikular sa computer graphics.
-
-Ang canvas ay gumagamit ng Cartesian coordinates na may x-axis (horizontal) at y-axis (vertical) para i-posisyon ang lahat ng iyong idinodrawing. Pero narito ang mahalagang pagkakaiba: hindi tulad ng coordinate system sa math class, ang origin point `(0,0)` ay nagsisimula sa top-left corner, kung saan ang x-values ay tumataas habang gumagalaw pakanan at ang y-values ay tumataas habang gumagalaw pababa. Ang approach na ito ay nagmula sa mga unang computer displays kung saan ang electron beams ay nag-scan mula sa itaas pababa, kaya ang top-left ang natural na starting point.
+Ngayon na alam mo kung ano ang canvas element, tuklasin natin ang aktwal na pag-drawing dito! Ang canvas ay gumagamit ng coordinate system na maaaring pamilyar sa math class, ngunit may isang mahalagang twist na partikular sa computer graphics.
+
+Ang canvas ay gumagamit ng Cartesian coordinates na may x-axis (horizontal) at y-axis (vertical) para i-posisyon ang lahat ng iyong idinodrawing. Ngunit narito ang mahalagang pagkakaiba: hindi tulad ng coordinate system sa math class, ang origin point `(0,0)` ay nagsisimula sa top-left corner, kung saan ang x-values ay tumataas habang gumagalaw pakanan at ang y-values ay tumataas habang gumagalaw pababa. Ang approach na ito ay nagmula sa mga unang computer displays kung saan ang electron beams ay nag-scan mula sa itaas pababa, kaya't ang top-left ang natural na starting point.
+
+```mermaid
+quadrantChart
+    title Canvas Coordinate System
+    x-axis Left --> Right
+    y-axis Top --> Bottom
+    quadrant-1 Quadrant 1
+    quadrant-2 Quadrant 2  
+    quadrant-3 Quadrant 3
+    quadrant-4 Quadrant 4
+    
+    Origin Point: [0.1, 0.1]
+    Hero Center: [0.5, 0.8]
+    Enemy Formation: [0.3, 0.2]
+    Power-up: [0.7, 0.6]
+    UI Elements: [0.9, 0.1]
+```
 
 ![ang grid ng canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.tl.png)
 > Imahe mula sa [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
 
-Para mag-drawing sa canvas element, susundin mo ang parehong tatlong hakbang na proseso na bumubuo sa pundasyon ng lahat ng canvas graphics. Kapag nagawa mo ito ng ilang beses, magiging natural na ito:
+Para mag-drawing sa canvas element, susundin mo ang parehong tatlong hakbang na proseso na bumubuo sa pundasyon ng lahat ng canvas graphics. Kapag nagawa mo ito nang ilang beses, magiging natural na ito:
+
+```mermaid
+flowchart LR
+    A[HTML Canvas Element] --> B[Get Canvas Reference]
+    B --> C[Get 2D Context]
+    C --> D[Drawing Operations]
+    
+    D --> E[Draw Shapes]
+    D --> F[Draw Text]
+    D --> G[Draw Images]
+    D --> H[Apply Styles]
+    
+    E --> I[Render to Screen]
+    F --> I
+    G --> I
+    H --> I
+    
+    style A fill:#e1f5fe
+    style C fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 1. **Kumuha ng reference** sa iyong Canvas element mula sa DOM (katulad ng ibang HTML element)
 2. **Kunin ang 2D rendering context** – ito ang nagbibigay ng lahat ng drawing methods
-3. **Simulan ang pag-drawing!** Gamitin ang built-in methods ng context para lumikha ng graphics
+3. **Simulan ang pag-drawing!** Gamitin ang built-in methods ng context para lumikha ng iyong graphics
 
 Ganito ang itsura nito sa code:
 
@@ -67,27 +152,66 @@ ctx.fillStyle = 'red';
 ctx.fillRect(0, 0, 200, 200); // x, y, width, height
 ```
 
-**I-break down natin ito step by step:**
+**I-breakdown natin ito step by step:**
 - **Kinukuha** natin ang canvas element gamit ang ID nito at ini-store sa isang variable
 - **Kinukuha** natin ang 2D rendering context – ito ang toolkit na puno ng drawing methods
 - **Sinasabi** natin sa canvas na gusto nating punuin ng pula gamit ang `fillStyle` property
 - **Nagdo-drawing** tayo ng rectangle simula sa top-left corner (0,0) na 200 pixels ang lapad at taas
 
-✅ Ang Canvas API ay pangunahing nakatuon sa 2D shapes, pero maaari ka ring mag-drawing ng 3D elements sa isang website; para dito, maaaring gamitin ang [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
+✅ Ang Canvas API ay pangunahing nakatuon sa 2D shapes, ngunit maaari ka ring mag-drawing ng 3D elements sa isang website; para dito, maaaring gamitin ang [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
 
-Maraming bagay ang maaari mong i-drawing gamit ang Canvas API tulad ng:
+Maaari kang mag-drawing ng iba't ibang bagay gamit ang Canvas API tulad ng:
 
-- **Geometrical shapes**, naipakita na namin kung paano mag-drawing ng rectangle, pero marami pang iba ang maaari mong i-drawing.
+- **Geometrical shapes**, naipakita na namin kung paano mag-drawing ng rectangle, ngunit marami pang iba ang maaari mong i-drawing.
 - **Text**, maaari kang mag-drawing ng text gamit ang anumang font at kulay na gusto mo.
-- **Images**, maaari kang mag-drawing ng imahe batay sa isang image asset tulad ng .jpg o .png halimbawa.
+- **Images**, maaari kang mag-drawing ng imahe mula sa isang image asset tulad ng .jpg o .png halimbawa.
 
-✅ Subukan ito! Alam mo na kung paano mag-drawing ng rectangle, kaya kaya mo bang mag-drawing ng bilog sa isang pahina? Tingnan ang ilang mga kawili-wiling Canvas drawings sa CodePen. Narito ang isang [napaka-impressive na halimbawa](https://codepen.io/dissimulate/pen/KrAwx).
+✅ Subukan ito! Alam mo na kung paano mag-drawing ng rectangle, kaya mo bang mag-drawing ng bilog sa isang pahina? Tingnan ang ilang mga kawili-wiling Canvas drawings sa CodePen. Narito ang isang [napaka-impressive na halimbawa](https://codepen.io/dissimulate/pen/KrAwx).
 
-## Mag-load at Mag-drawing ng Image Asset
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Canvas Fundamentals**: Bago lumipat sa pag-load ng imahe, tiyakin na kaya mong:
+- ✅ Ipaliwanag kung paano naiiba ang canvas coordinate system sa mathematical coordinates
+- ✅ Maunawaan ang tatlong hakbang na proseso para sa canvas drawing operations
+- ✅ Tukuyin kung ano ang ibinibigay ng 2D rendering context
+- ✅ Ilarawan kung paano nagtutulungan ang fillStyle at fillRect
+
+**Mabilis na Self-Test**: Paano mo idodrawing ang isang asul na bilog sa posisyon (100, 50) na may radius na 25?
+```javascript
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(100, 50, 25, 0, 2 * Math.PI);
+ctx.fill();
+```
+
+**Mga Canvas Drawing Methods na Alam Mo Na**:
+- **fillRect()**: Nagdo-drawing ng mga filled rectangles
+- **fillStyle**: Nagtatakda ng mga kulay at patterns
+- **beginPath()**: Nagsisimula ng bagong drawing paths
+- **arc()**: Lumilikha ng mga bilog at kurba
 
-Ang pag-drawing ng basic shapes ay kapaki-pakinabang para sa pagsisimula, pero karamihan sa mga laro ay nangangailangan ng aktwal na mga imahe! Ang sprites, backgrounds, at textures ang nagbibigay ng visual na appeal sa mga laro. Ang pag-load at pag-display ng mga imahe sa canvas ay gumagana nang iba kaysa sa pag-drawing ng geometric shapes, pero madali itong maunawaan kapag naintindihan mo ang proseso.
+## Mag-load at Mag-drawing ng Image Asset
 
-Kailangan nating lumikha ng `Image` object, i-load ang ating image file (ito ay nangyayari asynchronously, ibig sabihin "sa background"), at pagkatapos ay i-drawing ito sa canvas kapag handa na. Ang approach na ito ay tinitiyak na maayos na magdi-display ang iyong mga imahe nang hindi nakaka-block sa iyong application habang naglo-load.
+Ang pag-drawing ng basic shapes ay kapaki-pakinabang para sa pagsisimula, ngunit karamihan sa mga laro ay nangangailangan ng aktwal na mga imahe! Ang mga sprites, backgrounds, at textures ang nagbibigay ng visual appeal sa mga laro. Ang pag-load at pag-display ng mga imahe sa canvas ay gumagana nang iba kaysa sa pag-drawing ng geometric shapes, ngunit madali itong maunawaan kapag naintindihan mo ang proseso.
+
+Kailangan nating lumikha ng isang `Image` object, i-load ang ating image file (ito ay nangyayari asynchronously, ibig sabihin "sa background"), at pagkatapos ay i-drawing ito sa canvas kapag handa na ito. Ang approach na ito ay tinitiyak na maayos na magdi-display ang iyong mga imahe nang hindi binablock ang iyong application habang naglo-load.
+
+```mermaid
+sequenceDiagram
+    participant JS as JavaScript
+    participant Img as Image Object
+    participant Server as File Server
+    participant Canvas as Canvas Context
+    
+    JS->>Img: new Image()
+    JS->>Img: Set src property
+    Img->>Server: Request image file
+    Server->>Img: Return image data
+    Img->>JS: Trigger onload event
+    JS->>Canvas: drawImage(img, x, y)
+    Canvas->>Canvas: Render to screen
+    
+    Note over JS,Canvas: Async loading prevents UI blocking
+```
 
 ### Basic Image Loading
 
@@ -102,12 +226,12 @@ img.onload = () => {
 
 **Ano ang nangyayari sa code na ito:**
 - **Lumilikha** tayo ng bagong Image object para mag-hold ng ating sprite o texture
-- **Sinasabi** natin kung aling image file ang dapat i-load sa pamamagitan ng pag-set ng source path
+- **Sinasabi** natin kung aling image file ang i-load sa pamamagitan ng pag-set ng source path
 - **Nakikinig** tayo sa load event para malaman kung kailan handa na ang imahe para gamitin
 
 ### Mas Magandang Paraan ng Pag-load ng Imahe
 
-Narito ang mas maayos na paraan para mag-handle ng image loading na karaniwang ginagamit ng mga propesyonal na developer. I-wrap natin ang image loading sa isang Promise-based function – ang approach na ito, na naging popular nang maging standard ang JavaScript Promises sa ES6, ay mas organisado at maayos mag-handle ng errors:
+Narito ang mas maayos na paraan ng pag-handle ng image loading na karaniwang ginagamit ng mga propesyonal na developer. I-wrap natin ang image loading sa isang Promise-based function – ang approach na ito, na naging popular nang maging standard ang JavaScript Promises sa ES6, ay ginagawang mas organisado ang iyong code at maayos na hinahandle ang mga error:
 
 ```javascript
 function loadAsset(path) {
@@ -137,11 +261,11 @@ async function initializeGame() {
 
 **Ano ang ginawa natin dito:**
 - **I-wrap** ang lahat ng image loading logic sa isang Promise para mas maayos itong ma-handle
-- **Nagdagdag** ng error handling na nagsasabi kung may mali
-- **Gumamit** ng modern async/await syntax dahil mas malinis itong basahin
+- **Nagdagdag** ng error handling na nagsasabi kung kailan may problema
+- **Gumamit** ng modern async/await syntax dahil mas madali itong basahin
 - **Naglagay** ng try/catch blocks para maayos na ma-handle ang anumang loading hiccups
 
-Kapag na-load na ang iyong mga imahe, ang pag-drawing nito sa canvas ay talagang simple:
+Kapag na-load na ang iyong mga imahe, ang pag-drawing ng mga ito sa canvas ay talagang simple:
 
 ```javascript
 async function renderGameScreen() {
@@ -163,20 +287,45 @@ async function renderGameScreen() {
 }
 ```
 
-**I-break down natin ito step by step:**
-- **Naglo-load** tayo ng parehong hero at monster images sa background gamit ang await
-- **Kinukuha** natin ang canvas element at ang 2D rendering context na kailangan natin
-- **Pinoposisyon** natin ang hero image sa gitna gamit ang mabilis na coordinate math
-- **Nilalagay** ang monster image sa top-left corner para simulan ang enemy formation
-- **Hinuhuli** ang anumang errors na maaaring mangyari sa loading o rendering
+**I-breakdown natin ito step by step:**
+- **I-load** ang parehong hero at monster images sa background gamit ang await
+- **Kunin** ang canvas element at ang 2D rendering context na kailangan natin
+- **I-posisyon** ang hero image sa gitna gamit ang mabilis na coordinate math
+- **Ilagay** ang monster image sa top-left corner para simulan ang enemy formation
+- **I-catch** ang anumang errors na maaaring mangyari sa loading o rendering
+
+```mermaid
+flowchart TD
+    A[Load Assets] --> B{All Images Loaded?}
+    B -->|No| C[Show Loading]
+    B -->|Yes| D[Get Canvas Context]
+    C --> B
+    D --> E[Clear Screen]
+    E --> F[Draw Background]
+    F --> G[Draw Enemy Formation]
+    G --> H[Draw Hero Ship]
+    H --> I[Apply Visual Effects]
+    I --> J[Render Frame]
+    
+    subgraph "Rendering Pipeline"
+        K[Asset Management]
+        L[Scene Composition]
+        M[Drawing Operations]
+        N[Frame Output]
+    end
+    
+    style A fill:#e1f5fe
+    style J fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 ## Panahon na Para Simulan ang Paggawa ng Iyong Laro
 
-Ngayon ay pagsasama-samahin natin ang lahat para lumikha ng visual na pundasyon ng iyong space game. May solidong kaalaman ka na sa canvas fundamentals at image loading techniques, kaya ang hands-on na seksyon na ito ay gagabay sa iyo sa paggawa ng kumpletong game screen na may tamang posisyon ng sprites.
+Ngayon ay pagsasamahin natin ang lahat para lumikha ng visual na pundasyon ng iyong space game. Mayroon kang solidong pag-unawa sa canvas fundamentals at image loading techniques, kaya't ang hands-on na seksyon na ito ay gagabay sa iyo sa paggawa ng kumpletong game screen na may tamang posisyon ng sprites.
 
-### Ano ang Bubuuin
+### Ano ang Gagawin
 
-Bubuo ka ng isang web page na may Canvas element. Dapat itong mag-render ng black screen na `1024*768`. Mayroon kaming ibinigay na dalawang imahe:
+Gagawa ka ng web page na may Canvas element. Dapat itong mag-render ng black screen na `1024*768`. Nagbigay kami ng dalawang imahe:
 
 - Hero ship
 
@@ -201,9 +350,9 @@ your-work/
 ```
 
 **Ano ang mayroon ka:**
-- **Game sprites** ay nasa `assets/` folder para manatiling organisado ang lahat
-- **Ang iyong pangunahing HTML file** ay nagse-set up ng canvas element at naghahanda ng lahat
-- **Isang JavaScript file** kung saan mo isusulat ang lahat ng game rendering magic
+- **Game sprites** na nasa `assets/` folder para manatiling organisado ang lahat
+- **Ang iyong pangunahing HTML file** na nagse-set up ng canvas element at naghahanda ng lahat
+- **Isang JavaScript file** kung saan isusulat mo ang lahat ng game rendering magic
 - **Isang package.json** na nagse-set up ng development server para ma-test mo nang lokal
 
 Buksan ang folder na ito sa Visual Studio Code para simulan ang development. Kakailanganin mo ng lokal na development environment na may Visual Studio Code, NPM, at Node.js na naka-install. Kung wala kang `npm` sa iyong computer, [narito kung paano ito i-install](https://www.npmjs.com/get-npm).
@@ -217,27 +366,27 @@ npm start
 
 **Ang command na ito ay gumagawa ng mga cool na bagay:**
 - **Sinisimulan** ang isang lokal na server sa `http://localhost:5000` para ma-test mo ang iyong laro
-- **Sineserve** ang lahat ng iyong files nang maayos para ma-load ito ng browser
-- **Binabantayan** ang iyong files para sa mga pagbabago para ma-develop mo nang maayos
-- **Binibigyan ka** ng professional development environment para ma-test ang lahat
+- **Nagsisilbi** ng lahat ng iyong files nang maayos para ma-load ito ng iyong browser
+- **Nagmo-monitor** ng iyong files para sa mga pagbabago para ma-develop mo nang maayos
+- **Nagbibigay sa iyo** ng propesyonal na development environment para ma-test ang lahat
 
-> 💡 **Tandaan**: Ang iyong browser ay magpapakita ng blangkong pahina sa simula – normal ito! Habang nagdadagdag ka ng code, i-refresh ang iyong browser para makita ang mga pagbabago. Ang iterative development approach na ito ay katulad ng ginawa ng NASA sa Apollo guidance computer – tinest ang bawat component bago ito isinama sa mas malaking sistema.
+> 💡 **Tandaan**: Ang iyong browser ay magpapakita ng blangkong pahina sa simula – normal ito! Habang nagdadagdag ka ng code, i-refresh ang iyong browser para makita ang mga pagbabago. Ang iterative development approach na ito ay katulad ng ginawa ng NASA sa Apollo guidance computer – sinusubukan ang bawat bahagi bago ito isama sa mas malaking sistema.
 
 ### Magdagdag ng Code
 
-Magdagdag ng kinakailangang code sa `your-work/app.js` para makumpleto ang mga sumusunod na gawain:
+Magdagdag ng kinakailangang code sa `your-work/app.js` para kumpletuhin ang mga sumusunod na gawain:
 
 1. **Mag-drawing ng canvas na may black background**
    > 💡 **Narito kung paano**: Hanapin ang TODO sa `/app.js` at magdagdag ng dalawang linya. I-set ang `ctx.fillStyle` sa black, pagkatapos gamitin ang `ctx.fillRect()` simula sa (0,0) gamit ang sukat ng iyong canvas. Madali lang!
 
 2. **Mag-load ng game textures**
-   > 💡 **Narito kung paano**: Gamitin ang `await loadAsset()` para i-load ang iyong player at enemy images. I-store ang mga ito sa variables para magamit mo sa susunod. Tandaan – hindi ito magpapakita hangga't hindi mo ito idinodrawing!
+   > 💡 **Narito kung paano**: Gamitin ang `await loadAsset()` para i-load ang iyong player at enemy images. I-store ang mga ito sa variables para magamit mo sa susunod. Tandaan – hindi ito magpapakita hangga't hindi mo ito aktwal na idinodrawing!
 
 3. **I-drawing ang hero ship sa center-bottom position**
    > 💡 **Narito kung paano**: Gamitin ang `ctx.drawImage()` para i-posisyon ang iyong hero. Para sa x-coordinate, subukan ang `canvas.width / 2 - 45` para i-center ito, at para sa y-coordinate gamitin ang `canvas.height - canvas.height / 4` para ilagay ito sa bottom area.
 
 4. **I-drawing ang 5×5 formation ng enemy ships**
-   > 💡 **Narito kung paano**: Hanapin ang `createEnemies` function at mag-set up ng nested loop. Kailangan mong gumawa ng math para sa spacing at positioning, pero huwag mag-alala – ipapakita ko sa iyo kung paano!
+   > 💡 **Narito kung paano**: Hanapin ang `createEnemies` function at mag-set up ng nested loop. Kakailanganin mong gumawa ng kaunting math para sa spacing at positioning, ngunit huwag mag-alala – ipapakita ko sa iyo kung paano!
 
 Una, mag-set ng constants para sa tamang layout ng enemy formation:
 
@@ -249,12 +398,39 @@ const START_X = (canvas.width - FORMATION_WIDTH) / 2;
 const STOP_X = START_X + FORMATION_WIDTH;
 ```
 
-**I-break down natin kung ano ang ginagawa ng constants na ito:**
+**I-breakdown natin kung ano ang ginagawa ng mga constants na ito:**
 - **Itinatakda** ang 5 enemies bawat row at column (isang magandang 5×5 grid)
 - **Tinutukoy** kung gaano kalayo ang pagitan ng mga enemies para hindi magmukhang masikip
 - **Kinakalkula** kung gaano kalawak ang buong formation
 - **Tinutukoy** kung saan magsisimula at magtatapos para magmukhang centered ang formation
 
+```mermaid
+flowchart LR
+    A["Canvas Width: 1024px"] --> B["Formation Width: 490px"]
+    B --> C["Start X: 267px"]
+    C --> D["Enemy Spacing: 98px"]
+    
+    subgraph "5x5 Enemy Formation"
+        E["Row 1: Y=0"]
+        F["Row 2: Y=50"]
+        G["Row 3: Y=100"]
+        H["Row 4: Y=150"]
+        I["Row 5: Y=200"]
+    end
+    
+    subgraph "Column Spacing"
+        J["Col 1: X=267"]
+        K["Col 2: X=365"]
+        L["Col 3: X=463"]
+        M["Col 4: X=561"]
+        N["Col 5: X=659"]
+    end
+    
+    style A fill:#e1f5fe
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+```
+
 Pagkatapos, gumawa ng nested loops para i-drawing ang enemy formation:
 
 ```javascript
@@ -268,48 +444,187 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
 **Ano ang ginagawa ng nested loop na ito:**
 - Ang outer loop ay **gumagalaw** mula kaliwa pakanan sa formation
 - Ang inner loop ay **pumupunta** mula itaas pababa para lumikha ng maayos na rows
-- **Idinodrawing** ang bawat enemy sprite sa eksaktong x,y coordinates na kinalkula
+- **Idinodrawing** natin ang bawat enemy sprite sa eksaktong x,y coordinates na kinalkula natin
 - Lahat ay nananatiling **pantay-pantay ang spacing** para magmukhang propesyonal at organisado
 
+### 🔄 **Pedagogical Check-in**
+**Mastery sa Game Rendering**: Tiyakin ang iyong pag-unawa sa buong rendering system:
+- ✅ Paano pinipigilan ng async image loading ang UI blocking sa pagsisimula ng laro?
+- ✅ Bakit natin kinakalkula ang mga posisyon ng enemy formation gamit ang constants sa halip na hardcoding?
+- ✅ Anong papel ang ginagampanan ng 2D rendering context sa drawing operations?
+- ✅ Paano lumilikha ng maayos na sprite formations ang nested loops?
+
+**Mga Performance Considerations**: Ang iyong laro ngayon ay nagpapakita ng:
+- **Efficient asset loading**: Promise-based na pamamahala ng imahe
+- **Organized rendering**: Structured na drawing operations
+- **Mathematical positioning**: Calculated na sprite placement
+- **Error handling**: Maayos na pamamahala ng failure
+
+**Mga Konsepto sa Visual Programming**: Natutunan mo:
+- **Mga Sistema ng Koordinasyon**: Pagsasalin ng matematika sa mga posisyon sa screen
+- **Pamamahala ng Sprite**: Paglo-load at pagpapakita ng mga graphics ng laro
+- **Mga Algorithm ng Pormasyon**: Mga matematikal na pattern para sa maayos na layout
+- **Async Operations**: Modernong JavaScript para sa maayos na karanasan ng user
+
 ## Resulta
 
 Ang tapos na resulta ay dapat magmukhang ganito:
 
-![Black screen na may hero at 5*5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.tl.png)
+![Itim na screen na may isang bayani at 5*5 na mga halimaw](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.tl.png)
 
 ## Solusyon
 
-Subukan mo munang lutasin ito sa sarili mo pero kung mahihirapan ka, tingnan ang [solusyon](../../../../6-space-game/2-drawing-to-canvas/solution/app.js)
+Subukan munang lutasin ito sa sarili mo, ngunit kung mahirapan ka, tingnan ang isang [solusyon](../../../../6-space-game/2-drawing-to-canvas/solution/app.js)
 
 ---
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode para kumpletuhin ang sumusunod na hamon:
+Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
 
-**Deskripsyon:** Pagandahin ang canvas ng iyong space game sa pamamagitan ng pagdaragdag ng visual effects at interactive elements gamit ang mga teknik ng Canvas API na natutunan mo.
+**Deskripsyon:** Pagandahin ang canvas ng iyong space game sa pamamagitan ng pagdaragdag ng mga visual effects at interactive na elemento gamit ang mga teknik ng Canvas API na natutunan mo.
 
-**Prompt:** Gumawa ng bagong file na tinatawag na `enhanced-canvas.html` na may canvas na nagpapakita ng animated na mga bituin sa background, isang pulsing health bar para sa hero ship, at mga enemy ships na dahan-dahang bumababa. Isama ang JavaScript code na nagdo-drawing ng twinkling stars gamit ang random na posisyon at opacity, nag-iimplement ng health bar na nagbabago ng kulay batay sa health level (green > yellow > red), at nag-aanimate ng mga enemy ships para bumaba sa screen sa iba't ibang bilis.
+**Prompt:** Gumawa ng bagong file na tinatawag na `enhanced-canvas.html` na may canvas na nagpapakita ng mga animated na bituin sa background, isang pulsing health bar para sa hero ship, at mga enemy ship na dahan-dahang bumababa. Isama ang JavaScript code na gumuguhit ng kumikislap na mga bituin gamit ang random na posisyon at opacity, nag-iimplementa ng health bar na nagbabago ng kulay batay sa antas ng kalusugan (berde > dilaw > pula), at nag-aanimate ng mga enemy ship upang bumaba sa screen sa iba't ibang bilis.
 
-Alamin ang higit pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Hamon
 
-Natutunan mo ang tungkol sa pag-drawing gamit ang 2D-focused Canvas API; tingnan ang [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), at subukang mag-drawing ng 3D object.
+Natuto ka na tungkol sa pagguhit gamit ang 2D-focused Canvas API; tingnan ang [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), at subukang gumuhit ng 3D object.
 
 ## Post-Lecture Quiz
 
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/32)
 
-## Review & Self Study
+## Review & Pag-aaral sa Sarili
+
+Alamin pa ang tungkol sa Canvas API sa pamamagitan ng [pagbabasa tungkol dito](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Buksan ang console ng browser at gumawa ng canvas element gamit ang `document.createElement('canvas')`
+- [ ] Subukang gumuhit ng rectangle gamit ang `fillRect()` sa isang canvas context
+- [ ] Mag-eksperimento sa iba't ibang kulay gamit ang `fillStyle` na property
+- [ ] Gumuhit ng simpleng bilog gamit ang `arc()` na method
+
+### 🎯 **Ano ang Maaaring Makamit sa Loob ng Isang Oras**
+- [ ] Tapusin ang post-lesson quiz at maunawaan ang mga pundasyon ng canvas
+- [ ] Gumawa ng application sa pagguhit gamit ang canvas na may iba't ibang hugis at kulay
+- [ ] Mag-implement ng paglo-load ng imahe at sprite rendering para sa iyong laro
+- [ ] Bumuo ng simpleng animation na gumagalaw ang mga object sa canvas
+- [ ] Magpraktis ng mga transformation sa canvas tulad ng scaling, rotation, at translation
+
+### 📅 **Ang Iyong Lingguhang Paglalakbay sa Canvas**
+- [ ] Tapusin ang space game na may pinakinis na graphics at sprite animations
+- [ ] Masterin ang mga advanced na teknik sa canvas tulad ng gradients, patterns, at compositing
+- [ ] Gumawa ng mga interactive na visualization gamit ang canvas para sa representasyon ng data
+- [ ] Alamin ang mga teknik sa pag-optimize ng canvas para sa maayos na performance
+- [ ] Bumuo ng application sa pagguhit o pagpipinta na may iba't ibang tools
+- [ ] Tuklasin ang mga pattern sa creative coding at generative art gamit ang canvas
+
+### 🌟 **Ang Iyong Buwanang Mastery sa Graphics**
+- [ ] Bumuo ng mga kumplikadong visual na application gamit ang Canvas 2D at WebGL
+- [ ] Alamin ang mga konsepto sa graphics programming at mga batayan ng shader
+- [ ] Mag-ambag sa mga open source graphics libraries at visualization tools
+- [ ] Masterin ang pag-optimize ng performance para sa mga graphics-intensive na application
+- [ ] Gumawa ng educational content tungkol sa canvas programming at computer graphics
+- [ ] Maging eksperto sa graphics programming na tumutulong sa iba na lumikha ng mga visual na karanasan
+
+## 🎯 Ang Iyong Timeline sa Mastery ng Canvas Graphics
+
+```mermaid
+timeline
+    title Canvas API Learning Progression
+    
+    section Canvas Fundamentals (15 minutes)
+        Basic Operations: Element reference
+                        : 2D context access
+                        : Coordinate system
+                        : Simple shape drawing
+        
+    section Drawing Techniques (20 minutes)
+        Graphics Primitives: Rectangles and circles
+                           : Colors and styles
+                           : Text rendering
+                           : Path operations
+        
+    section Image Handling (25 minutes)
+        Asset Management: Image object creation
+                        : Async loading patterns
+                        : Error handling
+                        : Performance optimization
+        
+    section Game Graphics (30 minutes)
+        Sprite Rendering: Positioning algorithms
+                        : Formation calculations
+                        : Scene composition
+                        : Frame rendering
+        
+    section Advanced Techniques (40 minutes)
+        Visual Effects: Transformations
+                      : Animations
+                      : Layering
+                      : State management
+        
+    section Performance (35 minutes)
+        Optimization: Efficient drawing
+                    : Memory management
+                    : Frame rate control
+                    : Asset caching
+        
+    section Professional Skills (1 week)
+        Production Graphics: WebGL integration
+                           : Canvas libraries
+                           : Game engines
+                           : Cross-platform considerations
+        
+    section Advanced Graphics (1 month)
+        Specialized Applications: Data visualization
+                                : Interactive art
+                                : Real-time effects
+                                : 3D graphics
+```
+
+### 🛠️ Buod ng Iyong Toolkit sa Canvas Graphics
+
+Pagkatapos ng leksyong ito, mayroon ka na:
+- **Mastery sa Canvas API**: Kumpletong pag-unawa sa 2D graphics programming
+- **Matematika ng Koordinasyon**: Tumpak na pagpoposisyon at mga algorithm sa layout
+- **Pamamahala ng Asset**: Propesyonal na paglo-load ng imahe at paghawak ng error
+- **Rendering Pipeline**: Isinasaayos na paraan sa komposisyon ng eksena
+- **Graphics ng Laro**: Pagpoposisyon ng sprite at mga kalkulasyon sa pormasyon
+- **Async Programming**: Modernong mga pattern ng JavaScript para sa maayos na performance
+- **Visual Programming**: Pagsasalin ng mga konsepto ng matematika sa screen graphics
+
+**Mga Aplikasyon sa Tunay na Buhay**: Ang iyong mga kasanayan sa Canvas ay direktang magagamit sa:
+- **Data Visualization**: Mga chart, graph, at interactive na dashboard
+- **Pagbuo ng Laro**: Mga 2D na laro, simulation, at interactive na karanasan
+- **Digital Art**: Creative coding at mga proyekto sa generative art
+- **UI/UX Design**: Custom na graphics at mga interactive na elemento
+- **Educational Software**: Mga visual na tool sa pag-aaral at simulation
+- **Web Applications**: Dynamic na graphics at real-time na visualizations
+
+**Mga Propesyonal na Kasanayan na Nakuha**: Ngayon ay kaya mo nang:
+- **Bumuo** ng mga custom na graphics solution nang walang external libraries
+- **I-optimize** ang rendering performance para sa maayos na karanasan ng user
+- **Mag-debug** ng mga kumplikadong visual na problema gamit ang browser developer tools
+- **Magdisenyo** ng scalable graphics systems gamit ang mga prinsipyo ng matematika
+- **Mag-integrate** ng Canvas graphics sa modernong web application frameworks
+
+**Mga Canvas API Methods na Na-master Mo**:
+- **Pamamahala ng Elemento**: getElementById, getContext
+- **Mga Operasyon sa Pagguhit**: fillRect, drawImage, fillStyle
+- **Paglo-load ng Asset**: Mga Image object, Promise patterns
+- **Matematika sa Pagpoposisyon**: Mga kalkulasyon sa koordinasyon, mga algorithm sa pormasyon
+
+**Susunod na Antas**: Handa ka nang magdagdag ng animation, user interaction, collision detection, o tuklasin ang WebGL para sa 3D graphics!
 
-Alamin ang higit pa tungkol sa Canvas API sa pamamagitan ng [pagbabasa tungkol dito](https://developer.mozilla.org/docs/Web/API/Canvas_API).
+🌟 **Achievement Unlocked**: Nakatapos ka ng kumpletong sistema ng game rendering gamit ang mga pangunahing teknik ng Canvas API!
 
-## Assignment
+## Takdang-Aralin
 
 [Maglaro gamit ang Canvas API](assignment.md)
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/6-space-game/3-moving-elements-around/README.md b/translations/tl/6-space-game/3-moving-elements-around/README.md
index 40bbaf2a69..66c083657c 100644
--- a/translations/tl/6-space-game/3-moving-elements-around/README.md
+++ b/translations/tl/6-space-game/3-moving-elements-around/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "022bbb5c869091b98f19e408e0c51d5d",
-  "translation_date": "2025-10-22T15:39:23+00:00",
+  "original_hash": "8c55a2bd4bc0ebe4c88198fd563a9e09",
+  "translation_date": "2025-11-03T14:03:34+00:00",
   "source_file": "6-space-game/3-moving-elements-around/README.md",
   "language_code": "tl"
 }
 -->
 # Gumawa ng Space Game Bahagi 3: Pagdaragdag ng Galaw
 
-Isipin ang iyong mga paboritong laro – ang nagpapaganda sa kanila ay hindi lang magagandang graphics, kundi ang paraan ng paggalaw at pagtugon sa iyong mga aksyon. Sa ngayon, ang iyong space game ay parang isang magandang painting, pero malapit na nating idagdag ang galaw na magbibigay-buhay dito.
-
-Noong pinrograma ng mga inhinyero ng NASA ang guidance computer para sa Apollo missions, hinarap nila ang parehong hamon: paano mo gagawing tumugon ang spacecraft sa input ng piloto habang awtomatikong pinapanatili ang mga pagwawasto ng kurso? Ang mga prinsipyo na matututunan natin ngayon ay kahalintulad ng mga konseptong iyon – pamamahala ng galaw na kontrolado ng manlalaro kasabay ng awtomatikong mga sistema.
-
-Sa araling ito, matututunan mo kung paano magpalipad ng mga spaceship sa screen, tumugon sa mga utos ng manlalaro, at lumikha ng makinis na mga pattern ng galaw. Hahatiin natin ang lahat sa mga konseptong madaling maunawaan na natural na magtataguyod sa isa't isa.
+```mermaid
+journey
+    title Your Game Animation Journey
+    section Movement Basics
+      Understand motion principles: 3: Student
+      Learn coordinate updates: 4: Student
+      Implement basic movement: 4: Student
+    section Player Controls
+      Handle keyboard events: 4: Student
+      Prevent default behaviors: 5: Student
+      Create responsive controls: 5: Student
+    section Game Systems
+      Build game loop: 5: Student
+      Manage object lifecycle: 5: Student
+      Implement pub/sub pattern: 5: Student
+```
 
-Sa dulo, magagawa ng mga manlalaro na paliparin ang kanilang hero ship sa screen habang ang mga barko ng kalaban ay nagpa-patrol sa itaas. Mas mahalaga, mauunawaan mo ang mga pangunahing prinsipyo na nagpapatakbo ng mga sistema ng galaw sa laro.
+Isipin ang iyong mga paboritong laro – ang nagpapaganda sa kanila ay hindi lang ang magagandang graphics, kundi ang paraan ng paggalaw ng lahat at ang tugon sa iyong mga aksyon. Sa ngayon, ang iyong space game ay parang isang magandang painting, pero malapit na nating idagdag ang galaw na magbibigay-buhay dito.
+
+Noong pinrograma ng mga inhinyero ng NASA ang guidance computer para sa Apollo missions, hinarap nila ang parehong hamon: paano mo gagawing tumugon ang spacecraft sa input ng piloto habang awtomatikong pinapanatili ang mga pagwawasto ng kurso? Ang mga prinsipyo na matututunan natin ngayon ay kahalintulad ng mga konseptong iyon – pamamahala sa galaw na kontrolado ng manlalaro kasabay ng awtomatikong mga sistema.
+
+Sa araling ito, matututunan mo kung paano magpapalipad ng mga spaceship sa screen, tumugon sa mga utos ng manlalaro, at lumikha ng makinis na mga pattern ng galaw. Hahatiin natin ang lahat sa mga konseptong madaling maunawaan na natural na magtataguyod sa isa't isa.
+
+Sa dulo, magpapalipad na ang mga manlalaro ng kanilang hero ship sa screen habang ang mga barko ng kalaban ay nagpa-patrol sa itaas. Mas mahalaga, mauunawaan mo ang mga pangunahing prinsipyo na nagpapatakbo sa mga sistema ng galaw sa laro.
+
+```mermaid
+mindmap
+  root((Game Animation))
+    Movement Types
+      Player Controlled
+      Automatic Motion
+      Physics Based
+      Scripted Paths
+    Event Handling
+      Keyboard Input
+      Mouse Events
+      Touch Controls
+      Default Prevention
+    Game Loop
+      Update Logic
+      Render Frame
+      Clear Canvas
+      Frame Rate Control
+    Object Management
+      Position Updates
+      Collision Detection
+      Lifecycle Management
+      State Tracking
+    Communication
+      Pub/Sub Pattern
+      Event Emitters
+      Message Passing
+      Loose Coupling
+```
 
 ## Pre-Lecture Quiz
 
@@ -28,13 +75,34 @@ Nagiging buhay ang mga laro kapag nagsimulang gumalaw ang mga bagay, at may dala
 - **Galaw na kontrolado ng manlalaro**: Kapag pinindot mo ang isang key o nag-click gamit ang mouse, may gumagalaw. Ito ang direktang koneksyon sa pagitan mo at ng mundo ng laro.
 - **Awtomatikong galaw**: Kapag ang laro mismo ang nagpasya na gumalaw ang mga bagay – tulad ng mga barko ng kalaban na kailangang magpatrol sa screen kahit wala kang ginagawa.
 
-Ang pagpapagalaw ng mga bagay sa screen ng computer ay mas simple kaysa sa iniisip mo. Naalala mo ba ang mga x at y coordinates mula sa klase ng math? Iyon mismo ang ginagamit natin dito. Noong sinusubaybayan ni Galileo ang mga buwan ng Jupiter noong 1610, ginagawa niya ang parehong bagay – nagpo-plot ng mga posisyon sa paglipas ng panahon upang maunawaan ang mga pattern ng galaw.
+Ang pagpapagalaw ng mga bagay sa screen ng computer ay mas simple kaysa sa iniisip mo. Naalala mo ba ang x at y coordinates mula sa math class? Iyan mismo ang ginagamit natin dito. Noong sinusubaybayan ni Galileo ang mga buwan ng Jupiter noong 1610, ginagawa niya ang parehong bagay – nagpo-plot ng mga posisyon sa paglipas ng panahon upang maunawaan ang mga pattern ng galaw.
 
-Ang pagpapagalaw ng mga bagay sa screen ay parang paggawa ng flipbook animation – kailangan mong sundin ang tatlong simpleng hakbang:
+Ang pagpapagalaw ng mga bagay sa screen ay parang paglikha ng flipbook animation – kailangan mong sundin ang tatlong simpleng hakbang:
 
-1. **I-update ang posisyon** – Baguhin kung saan dapat naroon ang iyong object (halimbawa, ilipat ito ng 5 pixels sa kanan)
-2. **Burahin ang lumang frame** – Linisin ang screen para hindi mo makita ang mga ghostly trails
-3. **I-drawing ang bagong frame** – Ilagay ang iyong object sa bagong posisyon nito
+```mermaid
+flowchart LR
+    A["Frame N"] --> B["Update Positions"]
+    B --> C["Clear Canvas"]
+    C --> D["Draw Objects"]
+    D --> E["Frame N+1"]
+    E --> F{Continue?}
+    F -->|Yes| B
+    F -->|No| G["Game Over"]
+    
+    subgraph "Animation Cycle"
+        H["1. Calculate new positions"]
+        I["2. Erase previous frame"]
+        J["3. Render new frame"]
+    end
+    
+    style B fill:#e1f5fe
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+```
+
+1. **I-update ang posisyon** – Baguhin kung saan dapat naroon ang iyong object (halimbawa, ilipat ito ng 5 pixels pakanan)
+2. **Burahin ang lumang frame** – Linisin ang screen para hindi makita ang mga ghostly trails
+3. **I-draw ang bagong frame** – Ilagay ang iyong object sa bagong posisyon nito
 
 Gawin ito nang mabilis, at boom! Mayroon kang makinis na galaw na natural na nararamdaman ng mga manlalaro.
 
@@ -51,23 +119,23 @@ ctx.fillStyle = "black";
 ctx.drawImage(heroImg, hero.x, hero.y);
 ```
 
-**Ano ang ginagawa ng code na ito:**
+**Ang ginagawa ng code na ito:**
 - **Ina-update** ang x-coordinate ng hero ng 5 pixels para gumalaw ito nang pahalang
-- **Binubura** ang buong canvas area para alisin ang lumang frame
+- **Binubura** ang buong canvas area para alisin ang nakaraang frame
 - **Pinupuno** ang canvas ng itim na background na kulay
-- **I-dinodrawing** ang hero image sa bagong posisyon nito
+- **I-dinodraw** ang hero image sa bagong posisyon nito
 
 ✅ Maisip mo ba ang dahilan kung bakit ang pag-redraw ng iyong hero nang maraming frames kada segundo ay maaaring magdulot ng performance costs? Basahin ang tungkol sa [mga alternatibo sa pattern na ito](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
 
-## Pag-handle ng mga keyboard event
+## Pag-handle ng keyboard events
 
-Dito natin ikokonekta ang input ng manlalaro sa aksyon ng laro. Kapag may pumindot sa spacebar para magpaputok ng laser o nag-tap sa arrow key para umiwas sa asteroid, kailangang ma-detect at tumugon ang iyong laro sa input na iyon.
+Dito natin ikokonekta ang input ng manlalaro sa aksyon ng laro. Kapag pinindot ng isang tao ang spacebar para magpaputok ng laser o pinindot ang arrow key para umiwas sa asteroid, kailangang ma-detect at tumugon ang iyong laro sa input na iyon.
 
-Ang mga keyboard event ay nangyayari sa window level, ibig sabihin ang buong browser window mo ay nakikinig sa mga keypress na iyon. Ang mga mouse click, sa kabilang banda, ay maaaring itali sa mga partikular na elemento (tulad ng pag-click sa isang button). Para sa ating space game, magpo-focus tayo sa mga keyboard controls dahil ito ang nagbibigay sa mga manlalaro ng klasikong arcade feel.
+Ang mga keyboard events ay nangyayari sa window level, ibig sabihin ang buong browser window mo ang nakikinig sa mga keypresses na iyon. Ang mga mouse clicks, sa kabilang banda, ay maaaring itali sa mga partikular na elemento (tulad ng pag-click sa isang button). Para sa ating space game, magpo-focus tayo sa keyboard controls dahil ito ang nagbibigay sa mga manlalaro ng klasikong arcade feel.
 
-Naalala ko ang mga operator ng telegrapo noong 1800s na kailangang i-translate ang morse code input sa mga makabuluhang mensahe – gumagawa tayo ng katulad na bagay, tinatranslate ang mga keypress sa mga utos ng laro.
+Naalala ko ang mga operator ng telegrapo noong 1800s na kailangang i-translate ang morse code input sa mga makabuluhang mensahe – gumagawa tayo ng katulad na bagay, tinatranslate ang mga keypresses sa mga utos ng laro.
 
-Para mag-handle ng event, kailangan mong gamitin ang `addEventListener()` method ng window at magbigay ng dalawang input parameters. Ang unang parameter ay ang pangalan ng event, halimbawa `keyup`. Ang pangalawang parameter ay ang function na dapat ma-invoke bilang resulta ng event.
+Para mag-handle ng isang event, kailangan mong gamitin ang `addEventListener()` method ng window at magbigay ng dalawang input parameters. Ang unang parameter ay ang pangalan ng event, halimbawa `keyup`. Ang pangalawang parameter ay ang function na dapat i-invoke bilang resulta ng event na naganap.
 
 Narito ang isang halimbawa:
 
@@ -80,24 +148,43 @@ window.addEventListener('keyup', (evt) => {
 });
 ```
 
-**Pag-unawa sa nangyayari dito:**
-- **Nakikinig** sa mga keyboard event sa buong window
+**Pagpapaliwanag sa nangyayari dito:**
+- **Nakikinig** sa mga keyboard events sa buong window
 - **Kinukuha** ang event object na naglalaman ng impormasyon tungkol sa kung anong key ang pinindot
 - **Sinusuri** kung ang pinindot na key ay tumutugma sa isang partikular na key (sa kasong ito, ang up arrow)
-- **Nag-e-execute** ng code kapag natugunan ang kondisyon
+- **Nag-eexecute** ng code kapag natugunan ang kondisyon
 
-Para sa mga key event, may dalawang properties sa event na maaari mong gamitin para makita kung anong key ang pinindot:
+Para sa key events, may dalawang properties sa event na maaari mong gamitin upang makita kung anong key ang pinindot:
 
 - `key` - ito ay isang string representation ng pinindot na key, halimbawa `'ArrowUp'`
 - `keyCode` - ito ay isang number representation, halimbawa `37`, na tumutugma sa `ArrowLeft`
 
-✅ Ang pag-manipula ng key event ay kapaki-pakinabang kahit sa labas ng game development. Ano pang ibang gamit ang naiisip mo para sa teknik na ito?
+✅ Ang pag-manipula ng key events ay kapaki-pakinabang kahit sa labas ng game development. Ano pang ibang gamit ang naiisip mo para sa teknik na ito?
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant EventSystem
+    participant GameLogic
+    participant Hero
+    
+    User->>Browser: Presses ArrowUp key
+    Browser->>EventSystem: keydown event
+    EventSystem->>EventSystem: preventDefault()
+    EventSystem->>GameLogic: emit('KEY_EVENT_UP')
+    GameLogic->>Hero: hero.y -= 5
+    Hero->>Hero: Update position
+    
+    Note over Browser,GameLogic: Event flow prevents browser defaults
+    Note over GameLogic,Hero: Pub/sub pattern enables clean communication
+```
 
 ### Mga espesyal na key: isang paalala!
 
-Ang ilang mga key ay may built-in na browser behaviors na maaaring makagambala sa iyong laro. Ang mga arrow key ay nag-scroll sa page at ang spacebar ay tumatalon pababa – mga behavior na ayaw mo kapag sinusubukang i-pilot ang kanilang spaceship.
+Ang ilang mga key ay may built-in na browser behaviors na maaaring makagambala sa iyong laro. Ang mga arrow keys ay nag-scroll sa page at ang spacebar ay tumatalon pababa – mga behavior na ayaw mo kapag sinusubukang i-pilot ng isang tao ang kanilang spaceship.
 
-Maaari nating pigilan ang mga default na behavior na ito at hayaan ang laro na mag-handle ng input. Katulad ito ng kung paano kailangang i-override ng mga programmer noong unang panahon ang system interrupts para lumikha ng custom na behavior – ginagawa lang natin ito sa browser level. Ganito ang paraan:
+Maaari nating pigilan ang mga default na behaviors na ito at hayaan ang ating laro na mag-handle ng input sa halip. Katulad ito ng kung paano kailangang i-override ng mga unang programmer ng computer ang system interrupts upang lumikha ng custom na behaviors – ginagawa lang natin ito sa browser level. Narito kung paano:
 
 ```javascript
 const onKeyDown = function (e) {
@@ -119,16 +206,32 @@ window.addEventListener('keydown', onKeyDown);
 ```
 
 **Pag-unawa sa prevention code na ito:**
-- **Sinusuri** ang mga partikular na key code na maaaring magdulot ng hindi kanais-nais na browser behavior
-- **Pinipigilan** ang default na aksyon ng browser para sa mga arrow key at spacebar
+- **Sinusuri** ang mga partikular na key codes na maaaring magdulot ng hindi kanais-nais na browser behavior
+- **Pinipigilan** ang default na aksyon ng browser para sa mga arrow keys at spacebar
 - **Pinapayagan** ang ibang mga key na gumana nang normal
-- **Gumagamit** ng `e.preventDefault()` para ihinto ang built-in na behavior ng browser
+- **Gumagamit** ng `e.preventDefault()` upang ihinto ang built-in na behavior ng browser
+
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Event Handling**: Bago lumipat sa awtomatikong galaw, tiyaking kaya mong:
+- ✅ Ipaliwanag ang pagkakaiba ng `keydown` at `keyup` events
+- ✅ Unawain kung bakit natin pinipigilan ang default na browser behaviors
+- ✅ Ilarawan kung paano ikinokonekta ng event listeners ang input ng user sa game logic
+- ✅ Tukuyin kung aling mga key ang maaaring makagambala sa game controls
+
+**Mabilis na Self-Test**: Ano ang mangyayari kung hindi mo pipigilan ang default na behavior para sa mga arrow keys?
+*Sagot: Mag-scroll ang browser sa page, na makakagambala sa galaw ng laro*
+
+**Arkitektura ng Event System**: Nauunawaan mo na ngayon:
+- **Window-level listening**: Pagkuha ng events sa browser level
+- **Properties ng event object**: `key` strings vs `keyCode` numbers
+- **Pag-iwas sa default**: Pagpigil sa hindi kanais-nais na browser behaviors
+- **Conditional logic**: Pagtugon sa mga partikular na kombinasyon ng key
 
 ## Galaw na dulot ng laro
 
-Ngayon, pag-usapan natin ang mga object na gumagalaw nang walang input ng manlalaro. Isipin ang mga barko ng kalaban na naglalakbay sa screen, mga bala na lumilipad sa tuwid na linya, o mga ulap na dumadaloy sa background. Ang awtonomong galaw na ito ay nagbibigay-buhay sa mundo ng laro kahit walang humahawak sa mga kontrol.
+Ngayon, pag-usapan natin ang mga object na gumagalaw nang walang input ng manlalaro. Isipin ang mga barko ng kalaban na naglalakbay sa screen, mga bala na lumilipad sa tuwid na linya, o mga ulap na dahan-dahang gumagalaw sa background. Ang awtomatikong galaw na ito ang nagpaparamdam na buhay ang mundo ng laro kahit walang humahawak sa controls.
 
-Gumagamit tayo ng built-in na timers ng JavaScript para i-update ang mga posisyon sa regular na interval. Ang konseptong ito ay katulad ng kung paano gumagana ang mga pendulum clock – isang regular na mekanismo na nagti-trigger ng consistent, timed actions. Ganito kasimple ito:
+Gumagamit tayo ng built-in timers ng JavaScript upang i-update ang mga posisyon sa regular na intervals. Ang konseptong ito ay kahalintulad ng kung paano gumagana ang mga pendulum clocks – isang regular na mekanismo na nagti-trigger ng consistent, timed actions. Narito kung gaano ito kasimple:
 
 ```javascript
 const id = setInterval(() => {
@@ -137,22 +240,47 @@ const id = setInterval(() => {
 }, 100);
 ```
 
-**Ano ang ginagawa ng movement code na ito:**
+**Ang ginagawa ng movement code na ito:**
 - **Gumagawa** ng timer na tumatakbo tuwing 100 milliseconds
 - **Ina-update** ang y-coordinate ng kalaban ng 10 pixels bawat beses
-- **Ini-store** ang interval ID para ma-stop ito kung kinakailangan
+- **Ini-store** ang interval ID para maihinto ito mamaya kung kinakailangan
 - **Pinapagalaw** ang kalaban pababa sa screen nang awtomatiko
 
 ## Ang game loop
 
-Narito ang konsepto na nag-uugnay sa lahat – ang game loop. Kung ang iyong laro ay isang pelikula, ang game loop ang magiging film projector, nagpapakita ng frame pagkatapos ng frame nang napakabilis kaya mukhang gumagalaw ang lahat nang maayos.
+Narito ang konsepto na nag-uugnay sa lahat – ang game loop. Kung ang iyong laro ay isang pelikula, ang game loop ang magiging film projector, nagpapakita ng frame pagkatapos ng frame nang napakabilis kaya't ang lahat ay mukhang gumagalaw nang maayos.
 
-Ang bawat laro ay may isa sa mga loop na ito na tumatakbo sa likod ng eksena. Isa itong function na nag-a-update ng lahat ng game objects, nagre-redraw ng screen, at inuulit ang prosesong ito nang tuloy-tuloy. Pinapanatili nito ang track ng iyong hero, lahat ng kalaban, anumang laser na lumilipad – ang buong estado ng laro.
+Ang bawat laro ay may isa sa mga loop na ito na tumatakbo sa likod ng eksena. Isa itong function na nag-a-update sa lahat ng game objects, nagre-redraw ng screen, at inuulit ang prosesong ito nang tuloy-tuloy. Pinapanatili nito ang track ng iyong hero, lahat ng kalaban, anumang lasers na lumilipad – ang buong estado ng laro.
 
-Ang konseptong ito ay nagpapaalala sa akin kung paano kailangang i-redraw ng mga animator noong unang panahon tulad ni Walt Disney ang mga karakter frame by frame para lumikha ng ilusyon ng galaw. Ginagawa natin ang parehong bagay, pero gamit ang code sa halip na lapis.
+Ang konseptong ito ay nagpapaalala sa akin kung paano kailangang i-redraw ng mga unang animator ng pelikula tulad ni Walt Disney ang mga karakter frame by frame upang lumikha ng ilusyon ng galaw. Ginagawa natin ang parehong bagay, gamit ang code sa halip na lapis.
 
 Ganito ang itsura ng isang game loop, na ipinapahayag sa code:
 
+```mermaid
+flowchart TD
+    A["Start Game Loop"] --> B["Clear Canvas"]
+    B --> C["Fill Background"]
+    C --> D["Update Game Objects"]
+    D --> E["Draw Hero"]
+    E --> F["Draw Enemies"]
+    F --> G["Draw UI Elements"]
+    G --> H["Wait for Next Frame"]
+    H --> I{Game Running?}
+    I -->|Yes| B
+    I -->|No| J["End Game"]
+    
+    subgraph "Frame Rate Control"
+        K["60 FPS = 16.67ms"]
+        L["30 FPS = 33.33ms"]
+        M["10 FPS = 100ms"]
+    end
+    
+    style B fill:#ffebee
+    style D fill:#e1f5fe
+    style E fill:#e8f5e8
+    style F fill:#e8f5e8
+```
+
 ```javascript
 const gameLoopId = setInterval(() => {
   function gameLoop() {
@@ -168,11 +296,11 @@ const gameLoopId = setInterval(() => {
 ```
 
 **Pag-unawa sa istruktura ng game loop:**
-- **Binubura** ang buong canvas para alisin ang lumang frame
-- **Pinupuno** ang background ng solid na kulay
-- **I-dinodrawing** ang lahat ng game objects sa kanilang kasalukuyang posisyon
-- **Inuulit** ang prosesong ito tuwing 200 milliseconds para lumikha ng makinis na animation
-- **Pinamamahalaan** ang frame rate sa pamamagitan ng pag-kontrol sa interval timing
+- **Binubura** ang buong canvas upang alisin ang nakaraang frame
+- **Pinupuno** ang background ng solidong kulay
+- **I-dinodraw** ang lahat ng game objects sa kanilang kasalukuyang posisyon
+- **Inuulit** ang prosesong ito tuwing 200 milliseconds upang lumikha ng makinis na animation
+- **Pinamamahalaan** ang frame rate sa pamamagitan ng pagkontrol sa interval timing
 
 ## Pagpapatuloy ng Space Game
 
@@ -181,14 +309,14 @@ Ngayon, magdadagdag tayo ng galaw sa static na eksena na ginawa mo dati. Gagawin
 Kunin ang code mula sa kung saan tayo tumigil sa nakaraang aralin (o magsimula sa code sa [Part II- starter](../../../../6-space-game/3-moving-elements-around/your-work) folder kung kailangan mo ng bagong simula).
 
 **Narito ang ating itatayo ngayon:**
-- **Hero controls**: Ang mga arrow key ang magpapalipad sa iyong spaceship sa screen
+- **Hero controls**: Ang mga arrow keys ang magpapalipad sa iyong spaceship sa screen
 - **Galaw ng kalaban**: Ang mga alien ships ay magsisimula ng kanilang pag-atake
 
 Simulan na natin ang pag-implementa ng mga feature na ito.
 
 ## Mga Inirerekomendang Hakbang
 
-Hanapin ang mga file na ginawa para sa iyo sa `your-work` sub folder. Dapat itong maglaman ng sumusunod:
+Hanapin ang mga file na ginawa para sa iyo sa `your-work` sub folder. Dapat itong naglalaman ng sumusunod:
 
 ```bash
 -| assets
@@ -206,20 +334,20 @@ cd your-work
 npm start
 ```
 
-**Ano ang ginagawa ng command na ito:**
+**Ang ginagawa ng command na ito:**
 - **Nagna-navigate** sa iyong project directory
-- **Nagpapasimula** ng HTTP Server sa address na `http://localhost:5000`
-- **Nagsisilbi** ng iyong game files para ma-test mo ito sa browser
+- **Nag-i-start** ng HTTP Server sa address na `http://localhost:5000`
+- **Nagsi-serve** ng iyong game files para ma-test mo ito sa browser
 
-Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:5000`. Buksan ang browser at ilagay ang address na iyon, sa ngayon dapat mag-render ang hero at lahat ng kalaban; wala pang gumagalaw - sa ngayon!
+Ang nasa itaas ay mag-i-start ng HTTP Server sa address na `http://localhost:5000`. Buksan ang browser at i-input ang address na iyon, sa ngayon dapat itong mag-render ng hero at lahat ng kalaban; wala pang gumagalaw - sa ngayon!
 
-### Magdagdag ng Code
+### Magdagdag ng code
 
-1. **Magdagdag ng mga dedicated object** para sa `hero`, `enemy`, at `game object`, dapat mayroon silang `x` at `y` properties. (Tandaan ang bahagi tungkol sa [Inheritance o composition](../README.md)).
+1. **Magdagdag ng dedicated objects** para sa `hero`, `enemy`, at `game object`, dapat silang may `x` at `y` properties. (Tandaan ang bahagi tungkol sa [Inheritance o composition](../README.md)).
 
-   *HINT* Ang `game object` ang dapat may `x` at `y` at kakayahang i-drawing ang sarili sa canvas.
+   *HINT* Ang `game object` ang dapat may `x` at `y` at ang kakayahang i-draw ang sarili nito sa canvas.
 
-   > **Tip**: Simulan sa pamamagitan ng pagdaragdag ng bagong `GameObject` class na may constructor na tulad ng nasa ibaba, at pagkatapos ay i-drawing ito sa canvas:
+   > **Tip**: Simulan sa pamamagitan ng pagdaragdag ng bagong `GameObject` class na may constructor na delineated tulad ng nasa ibaba, at pagkatapos ay i-draw ito sa canvas:
 
     ```javascript
     class GameObject {
@@ -240,12 +368,49 @@ Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:500
     ```
 
     **Pag-unawa sa base class na ito:**
-    - **Nagde-define** ng mga karaniwang properties na pinagsasaluhan ng lahat ng game objects (posisyon, laki, imahe)
-    - **Kasama** ang `dead` flag para subaybayan kung dapat alisin ang object
+    - **Nagde-define** ng mga karaniwang properties na lahat ng game objects ay mayroong (posisyon, laki, imahe)
+    - **Kasama** ang `dead` flag upang subaybayan kung ang object ay dapat alisin
     - **Nagbibigay** ng `draw()` method na nagre-render ng object sa canvas
     - **Nagse-set** ng default values para sa lahat ng properties na maaaring i-override ng child classes
 
-    Ngayon, i-extend ang `GameObject` para lumikha ng `Hero` at `Enemy`:
+    ```mermaid
+    classDiagram
+        class GameObject {
+            +x: number
+            +y: number
+            +dead: boolean
+            +type: string
+            +width: number
+            +height: number
+            +img: Image
+            +draw(ctx)
+        }
+        
+        class Hero {
+            +speed: number
+            +type: "Hero"
+            +width: 98
+            +height: 75
+        }
+        
+        class Enemy {
+            +type: "Enemy"
+            +width: 98
+            +height: 50
+            +setInterval()
+        }
+        
+        GameObject <|-- Hero
+        GameObject <|-- Enemy
+        
+        class EventEmitter {
+            +listeners: object
+            +on(message, listener)
+            +emit(message, payload)
+        }
+    ```
+
+    Ngayon, i-extend ang `GameObject` upang lumikha ng `Hero` at `Enemy`:
     
     ```javascript
     class Hero extends GameObject {
@@ -282,11 +447,11 @@ Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:500
     - **Nagmamana** mula sa `GameObject` gamit ang `extends` keyword
     - **Tinatawag** ang parent constructor gamit ang `super(x, y)`
     - **Nagse-set** ng partikular na dimensyon at properties para sa bawat uri ng object
-    - **Nagpapatupad** ng awtomatikong galaw para sa mga kalaban gamit ang `setInterval()`
+    - **Nag-iimplementa** ng awtomatikong galaw para sa mga kalaban gamit ang `setInterval()`
 
-2. **Magdagdag ng key-event handlers** para sa key navigation (paggalaw ng hero pataas/pababa kaliwa/kanan)
+2. **Magdagdag ng key-event handlers** upang mag-handle ng key navigation (igalaw ang hero pataas/pababa kaliwa/kanan)
 
-   *TANDAAN* ito ay isang cartesian system, ang top-left ay `0,0`. Tandaan din na magdagdag ng code para ihinto ang *default behavior*
+   *TANDAAN* ito ay isang cartesian system, ang top-left ay `0,0`. Tandaan din na magdagdag ng code upang ihinto ang *default behavior*
 
    > **Tip**: Gumawa ng iyong `onKeyDown` function at i-attach ito sa window:
 
@@ -310,19 +475,19 @@ Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:500
    window.addEventListener("keydown", onKeyDown);
    ```
     
-   **Ano ang ginagawa ng event handler na ito:**
+   **Ang ginagawa ng event handler na ito:**
    - **Nakikinig** sa keydown events sa buong window
-   - **Naglo-log** ng key code para matulungan kang i-debug kung anong mga key ang pinipindot
-   - **Pinipigilan** ang default na browser behavior para sa mga arrow key at spacebar
+   - **Naglo-log** ng key code upang matulungan kang i-debug kung aling mga key ang pinipindot
+   - **Pinipigilan** ang default na browser behavior para sa mga arrow keys at spacebar
    - **Pinapayagan** ang ibang mga key na gumana nang normal
    
-   Tingnan ang console ng iyong browser sa puntong ito, at panoorin ang mga keystroke na na-log.
+   Tingnan ang console ng iyong browser sa puntong ito, at panoorin ang mga keystrokes na nalolog.
 
-3. **Ipatupad** ang [Pub sub pattern](../README.md), panatilihing malinis ang iyong code habang sinusunod ang natitirang mga bahagi.
+3. **I-implementa** ang [Pub sub pattern](../README.md), mapapanatili nitong malinis ang iyong code habang sinusundan mo ang natitirang mga bahagi.
 
-   Ang Publish-Subscribe pattern ay tumutulong sa pag-organisa ng iyong code sa pamamagitan ng paghihiwalay ng event detection mula sa event handling. Ginagawa nitong mas modular at madaling i-maintain ang iyong code.
+   Ang Publish-Subscribe pattern ay tumutulong sa pag-organisa ng iyong code sa pamamagitan ng paghihiwalay ng event detection mula sa event handling. Ginagawa nitong mas modular at mas madaling i-maintain ang iyong code.
 
-   Para gawin ang huling bahagi na ito, maaari mong:
+   Para magawa ang huling bahagi na ito, maaari mong:
 
    1. **Magdagdag ng event listener** sa window:
 
@@ -340,13 +505,35 @@ Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:500
        });
        ```
 
-   **Ano ang ginagawa ng event system na ito:**
+   **Ang ginagawa ng event system na ito:**
    - **Nadidetect** ang keyboard input at kino-convert ito sa custom na game events
    - **Ihinhiwalay** ang input detection mula sa game logic
-   - **Ginagawang** madali ang pagbabago ng controls nang hindi naaapektuhan ang game code
+   - **Ginagawang** madali ang pagbabago ng controls sa hinaharap nang hindi naaapektuhan ang game code
    - **Pinapayagan** ang maraming sistema na tumugon sa parehong input
 
-   2. **Gumawa ng EventEmitter class** para mag-publish at mag-subscribe sa mga mensahe:
+   ```mermaid
+   flowchart TD
+       A["Keyboard Input"] --> B["Window Event Listener"]
+       B --> C["Event Emitter"]
+       C --> D["KEY_EVENT_UP"]
+       C --> E["KEY_EVENT_DOWN"]
+       C --> F["KEY_EVENT_LEFT"]
+       C --> G["KEY_EVENT_RIGHT"]
+       
+       D --> H["Hero Movement"]
+       D --> I["Sound System"]
+       D --> J["Visual Effects"]
+       
+       E --> H
+       F --> H
+       G --> H
+       
+       style A fill:#e1f5fe
+       style C fill:#e8f5e8
+       style H fill:#fff3e0
+   ```
+
+   2. **Gumawa ng EventEmitter class** upang mag-publish at mag-subscribe sa mga mensahe:
 
        ```javascript
        class EventEmitter {
@@ -361,7 +548,7 @@ Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:500
            this.listeners[message].push(listener);
          }
        
-   3. **Magdagdag ng constants** at i-setup ang EventEmitter:
+   3. **Magdagdag ng constants** at i-set up ang EventEmitter:
 
        ```javascript
        const Messages = {
@@ -381,12 +568,12 @@ Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:500
        ```
 
    **Pag-unawa sa setup:**
-   - **Nagde-define** ng mga message constants para maiwasan ang typo at gawing mas madali ang refactoring
-   - **Nagde-declare** ng mga variable para sa mga imahe, canvas context, at estado ng laro
+   - **Nagde-define** ng mga message constants upang maiwasan ang mga typo at gawing mas madali ang pag-refactor
+   - **Nagdeklara** ng mga variable para sa mga imahe, canvas context, at estado ng laro
    - **Gumagawa** ng global event emitter para sa pub-sub system
-   - **Nag-iinitialize** ng array para sa lahat ng game objects
+   - **Inisyalisa** ang isang array para maglaman ng lahat ng game objects
 
-   4. **I-initialize ang laro**
+   4. **I-inisyalisa ang laro**
 
        ```javascript
        function initGame() {
@@ -408,7 +595,7 @@ Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:500
        
 4. **I-setup ang game loop**
 
-   I-refactor ang `window.onload` function para i-initialize ang laro at i-setup ang game loop sa tamang interval. Magdadagdag ka rin ng laser beam:
+   I-refactor ang `window.onload` function para i-inisyalisa ang laro at i-setup ang game loop sa tamang interval. Magdadagdag ka rin ng laser beam:
 
     ```javascript
     window.onload = async () => {
@@ -429,15 +616,15 @@ Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:500
     ```
 
    **Pag-unawa sa game setup:**
-   - **Naghihintay** na ma-load nang buo ang page bago magsimula
+   - **Naghihintay** na ganap na mag-load ang pahina bago magsimula
    - **Kinukuha** ang canvas element at ang 2D rendering context nito
-   - **Naglo-load** ng lahat ng image assets nang asynchronous gamit ang `await`
+   - **Ina-load** ang lahat ng image assets nang asynchronous gamit ang `await`
    - **Sinisimulan** ang game loop na tumatakbo sa 100ms intervals (10 FPS)
-   - **Binubura** at nire-redraw ang buong screen bawat frame
+   - **Nililinis** at muling iginuguhit ang buong screen sa bawat frame
 
-5. **Magdagdag ng code** para magpagalaw ng mga kalaban sa isang tiyak na interval
+5. **Magdagdag ng code** para gumalaw ang mga kalaban sa tiyak na interval
 
-    I-refactor ang `createEnemies()` function para lumikha ng mga kalaban at i-push ang mga ito sa bagong gameObjects class:
+    I-refactor ang `createEnemies()` function para lumikha ng mga kalaban at idagdag ang mga ito sa bagong gameObjects class:
 
     ```javascript
     function createEnemies() {
@@ -456,14 +643,14 @@ Ang nasa itaas ay magsisimula ng HTTP Server sa address na `http://localhost:500
     }
     ```
 
-    **Ano ang ginagawa ng enemy creation:**
+    **Ano ang ginagawa ng paglikha ng kalaban:**
     - **Kinakalkula** ang mga posisyon para ma-center ang mga kalaban sa screen
-- **Gumagawa** ng grid ng mga kalaban gamit ang nested loops  
-- **Ina-assign** ang imahe ng kalaban sa bawat object ng kalaban  
-- **Idinadagdag** ang bawat kalaban sa global game objects array  
-
-at magdagdag ng `createHero()` function para gawin ang katulad na proseso para sa hero.  
-
+    - **Lumilikha** ng grid ng mga kalaban gamit ang nested loops
+    - **Ina-assign** ang enemy image sa bawat enemy object
+    - **Idinadagdag** ang bawat kalaban sa global game objects array
+    
+    at magdagdag ng `createHero()` function para gawin ang katulad na proseso para sa hero.
+    
     ```javascript
     function createHero() {
       hero = new Hero(
@@ -474,28 +661,48 @@ at magdagdag ng `createHero()` function para gawin ang katulad na proseso para s
       gameObjects.push(hero);
     }
     ```
-  
-**Ano ang ginagawa ng hero creation:**  
-- **Pinoposisyon** ang hero sa ibabang gitna ng screen  
-- **Ina-assign** ang imahe ng hero sa object ng hero  
-- **Idinadagdag** ang hero sa game objects array para sa rendering  
 
-at sa wakas, magdagdag ng `drawGameObjects()` function para simulan ang pag-drawing:  
+    **Ano ang ginagawa ng paglikha ng hero:**
+    - **Inaayos** ang posisyon ng hero sa ibabang gitna ng screen
+    - **Ina-assign** ang hero image sa hero object
+    - **Idinadagdag** ang hero sa game objects array para sa rendering
+
+    at sa wakas, magdagdag ng `drawGameObjects()` function para simulan ang pagguhit:
 
     ```javascript
     function drawGameObjects(ctx) {
       gameObjects.forEach(go => go.draw(ctx));
     }
     ```
-  
-**Pag-unawa sa drawing function:**  
-- **Ini-iterate** ang lahat ng game objects sa array  
-- **Tinatawag** ang `draw()` method sa bawat object  
-- **Ipinapasa** ang canvas context para ma-render ng mga object ang kanilang sarili  
-
-Ang mga kalaban ay dapat magsimulang umabante papunta sa iyong hero spaceship!  
-}  
-}  
+
+    **Pag-unawa sa drawing function:**
+    - **Ini-iterate** ang lahat ng game objects sa array
+    - **Tinatawag** ang `draw()` method sa bawat object
+    - **Ipinapasa** ang canvas context para ma-render ng mga object ang kanilang sarili
+
+    ### 🔄 **Pedagogical Check-in**
+    **Kumpletong Pag-unawa sa Game System**: Siguraduhing na-master mo ang buong arkitektura:
+    - ✅ Paano nakakatulong ang inheritance para ma-share ng Hero at Enemy ang mga karaniwang GameObject properties?
+    - ✅ Bakit mas pinapanatili ng pub/sub pattern ang iyong code?
+    - ✅ Ano ang papel ng game loop sa paglikha ng smooth animation?
+    - ✅ Paano nakakonekta ang event listeners sa user input at game object behavior?
+
+    **System Integration**: Ang iyong laro ngayon ay nagpapakita ng:
+    - **Object-Oriented Design**: Base classes na may specialized inheritance
+    - **Event-Driven Architecture**: Pub/sub pattern para sa loose coupling
+    - **Animation Framework**: Game loop na may consistent frame updates
+    - **Input Handling**: Keyboard events na may default prevention
+    - **Asset Management**: Image loading at sprite rendering
+
+    **Professional Patterns**: Na-implement mo na:
+    - **Separation of Concerns**: Input, logic, at rendering na magkakahiwalay
+    - **Polymorphism**: Lahat ng game objects ay may karaniwang drawing interface
+    - **Message Passing**: Malinis na komunikasyon sa pagitan ng mga components
+    - **Resource Management**: Efficient sprite at animation handling
+
+    Ang iyong mga kalaban ay dapat magsimulang umabante sa iyong hero spaceship!
+      }
+    }
     ```
     
     and add a `createHero()` function to do a similar process for the hero.
@@ -510,68 +717,189 @@ Ang mga kalaban ay dapat magsimulang umabante papunta sa iyong hero spaceship!
       gameObjects.push(hero);
     }
     ```
-  
-at sa wakas, magdagdag ng `drawGameObjects()` function para simulan ang pag-drawing:  
+
+    at sa wakas, magdagdag ng `drawGameObjects()` function para simulan ang pagguhit:
 
     ```javascript
     function drawGameObjects(ctx) {
       gameObjects.forEach(go => go.draw(ctx));
     }
     ```
-  
-Ang mga kalaban ay dapat magsimulang umabante papunta sa iyong hero spaceship!  
+
+    Ang iyong mga kalaban ay dapat magsimulang umabante sa iyong hero spaceship!
 
 ---
 
-## Hamon ng GitHub Copilot Agent 🚀  
+## Hamon ng GitHub Copilot Agent 🚀
+
+Narito ang isang hamon na magpapaganda sa iyong laro: pagdaragdag ng boundaries at smooth controls. Sa kasalukuyan, ang iyong hero ay maaaring lumipad palabas ng screen, at maaaring medyo choppy ang galaw.
 
-Narito ang isang hamon na magpapaganda sa iyong laro: pagdaragdag ng mga hangganan at makinis na kontrol. Sa kasalukuyan, ang iyong hero ay maaaring lumipad palabas ng screen, at maaaring hindi maganda ang pakiramdam ng paggalaw.  
+**Ang Iyong Misyon:** Gawing mas makatotohanan ang iyong spaceship sa pamamagitan ng pag-implement ng screen boundaries at fluid movement. Katulad ito ng kung paano pinipigilan ng flight control systems ng NASA ang spacecraft na lumampas sa ligtas na operational parameters.
 
-**Ang Iyong Misyon:** Gawing mas makatotohanan ang iyong spaceship sa pamamagitan ng pag-implement ng screen boundaries at fluid movement. Katulad ito ng kung paano pinipigilan ng mga sistema ng kontrol ng NASA ang spacecraft na lumampas sa ligtas na operational parameters.  
+**Narito ang dapat gawin:** Gumawa ng sistema na magpapanatili sa iyong hero spaceship sa screen, at gawing mas smooth ang controls. Kapag pinindot ng mga manlalaro ang arrow key, dapat mag-glide ang ship nang tuloy-tuloy sa halip na gumalaw sa discrete steps. Isaalang-alang ang pagdaragdag ng visual feedback kapag naabot ng ship ang screen boundaries – marahil isang subtle effect para ipakita ang gilid ng play area.
 
-**Narito ang dapat gawin:** Gumawa ng sistema na magpapanatili sa iyong hero spaceship sa screen, at gawing makinis ang kontrol. Kapag pinindot ng mga manlalaro ang arrow key, ang spaceship ay dapat dumulas nang tuloy-tuloy sa halip na gumalaw sa discrete steps. Isaalang-alang ang pagdaragdag ng visual feedback kapag ang spaceship ay umabot sa mga hangganan ng screen – marahil isang banayad na epekto upang ipakita ang gilid ng play area.  
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
-Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.  
+## 🚀 Hamon
 
-## 🚀 Hamon  
+Ang organisasyon ng code ay nagiging mas mahalaga habang lumalaki ang mga proyekto. Maaaring napansin mo na ang iyong file ay nagiging masikip sa mga functions, variables, at classes na halo-halo. Paalala ito kung paano kailangang lumikha ng malinaw at maayos na sistema ang mga engineer ng Apollo mission code na maaaring sabay-sabay na magtrabaho ang maraming team.
 
-Ang organisasyon ng code ay nagiging mas mahalaga habang lumalaki ang mga proyekto. Maaaring napansin mo na ang iyong file ay nagiging masikip sa mga functions, variables, at classes na halo-halo. Paalala ito kung paano kailangang lumikha ng malinaw at maayos na sistema ang mga inhinyero ng Apollo mission code na maaaring sabay-sabay na magamit ng maraming team.  
+**Ang iyong misyon:**
+Mag-isip tulad ng isang software architect. Paano mo iaayos ang iyong code para sa anim na buwan mula ngayon, ikaw (o isang teammate) ay madaling maunawaan kung ano ang nangyayari? Kahit na lahat ay manatili sa isang file sa ngayon, maaari kang lumikha ng mas maayos na organisasyon:
 
-**Ang iyong misyon:**  
-Mag-isip tulad ng isang software architect. Paano mo iaayos ang iyong code upang anim na buwan mula ngayon, ikaw (o isang kasamahan) ay madaling maunawaan kung ano ang nangyayari? Kahit na ang lahat ay manatili sa isang file sa ngayon, maaari kang lumikha ng mas mahusay na organisasyon:  
+- **Pag-group ng mga kaugnay na functions** na may malinaw na comment headers
+- **Paghiwalay ng mga concerns** - panatilihing hiwalay ang game logic mula sa rendering
+- **Paggamit ng consistent naming** conventions para sa variables at functions
+- **Paglikha ng modules** o namespaces para ayusin ang iba't ibang aspeto ng iyong laro
+- **Pagdaragdag ng dokumentasyon** na nagpapaliwanag ng layunin ng bawat pangunahing seksyon
 
-- **Pag-grupo ng mga kaugnay na functions** na may malinaw na comment headers  
-- **Paghiwalay ng mga concern** - panatilihin ang game logic na hiwalay sa rendering  
-- **Paggamit ng pare-parehong naming** conventions para sa mga variables at functions  
-- **Paglikha ng mga modules** o namespaces upang ayusin ang iba't ibang aspeto ng iyong laro  
-- **Pagdaragdag ng dokumentasyon** na nagpapaliwanag ng layunin ng bawat pangunahing seksyon  
+**Mga tanong para sa pagninilay:**
+- Aling bahagi ng iyong code ang pinakamahirap maunawaan kapag binalikan mo ito?
+- Paano mo iaayos ang iyong code para mas madali para sa iba na mag-contribute?
+- Ano ang mangyayari kung gusto mong magdagdag ng mga bagong features tulad ng power-ups o iba't ibang uri ng kalaban?
 
-**Mga tanong para sa pagninilay:**  
-- Aling bahagi ng iyong code ang pinakamahirap maunawaan kapag binalikan mo ito?  
-- Paano mo maiaayos ang iyong code upang mas madali para sa iba na mag-ambag?  
-- Ano ang mangyayari kung nais mong magdagdag ng mga bagong feature tulad ng power-ups o iba't ibang uri ng kalaban?  
+## Post-Lecture Quiz
 
-## Post-Lecture Quiz  
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/34)
 
-[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/34)  
+## Review & Self Study
 
-## Review & Self Study  
+Ginawa natin ang lahat mula sa simula, na napakahusay para sa pag-aaral, ngunit narito ang isang maliit na lihim – may mga kamangha-manghang JavaScript frameworks na maaaring mag-handle ng maraming trabaho para sa iyo. Kapag komportable ka na sa mga fundamentals na natalakay natin, sulit [alamin kung ano ang available](https://github.com/collections/javascript-game-engines).
 
-Ginagawa natin ang lahat mula sa simula, na napakaganda para sa pag-aaral, ngunit narito ang isang maliit na lihim – mayroong mga kamangha-manghang JavaScript frameworks na maaaring magawa ang maraming mabibigat na trabaho para sa iyo. Kapag komportable ka na sa mga pundasyon na ating tinalakay, sulit [tuklasin kung ano ang magagamit](https://github.com/collections/javascript-game-engines).  
+Isipin ang frameworks tulad ng pagkakaroon ng mahusay na toolbox sa halip na gawin ang bawat tool nang mano-mano. Maaari nilang solusyunan ang maraming hamon sa code organization na natalakay natin, at mag-alok ng mga features na aabutin ng linggo para gawin mo mismo.
 
-Isipin ang frameworks tulad ng pagkakaroon ng mahusay na kagamitan sa toolbox sa halip na gawin ang bawat tool nang mano-mano. Maaari nilang solusyunan ang marami sa mga hamon sa organisasyon ng code na ating tinalakay, at mag-alok ng mga feature na aabutin ng linggo upang gawin mo mismo.  
+**Mga bagay na sulit tuklasin:**
+- Paano inaayos ng game engines ang code – magugulat ka sa mga matatalinong patterns na ginagamit nila
+- Mga performance tricks para gawing butter-smooth ang canvas games  
+- Mga modernong JavaScript features na maaaring gawing mas malinis at mas maayos ang iyong code
+- Iba't ibang paraan ng pamamahala sa game objects at ang kanilang mga relasyon
 
-**Mga bagay na sulit tuklasin:**  
-- Paano inaayos ng mga game engines ang code – magugulat ka sa mga matatalinong pattern na ginagamit nila  
-- Mga trick sa performance para gawing butter-smooth ang canvas games  
-- Mga modernong JavaScript features na maaaring gawing mas malinis at mas madaling mapanatili ang iyong code  
-- Iba't ibang paraan ng pamamahala sa mga game objects at ang kanilang mga relasyon  
+## 🎯 Ang Iyong Game Animation Mastery Timeline
 
-## Assignment  
+```mermaid
+timeline
+    title Game Animation & Interaction Learning Progression
+    
+    section Movement Fundamentals (20 minutes)
+        Animation Principles: Frame-based animation
+                            : Position updates
+                            : Coordinate systems
+                            : Smooth movement
+        
+    section Event Systems (25 minutes)
+        User Input: Keyboard event handling
+                  : Default behavior prevention
+                  : Event object properties
+                  : Window-level listening
+        
+    section Game Architecture (30 minutes)
+        Object Design: Inheritance patterns
+                     : Base class creation
+                     : Specialized behaviors
+                     : Polymorphic interfaces
+        
+    section Communication Patterns (35 minutes)
+        Pub/Sub Implementation: Event emitters
+                              : Message constants
+                              : Loose coupling
+                              : System integration
+        
+    section Game Loop Mastery (40 minutes)
+        Real-time Systems: Frame rate control
+                         : Update/render cycle
+                         : State management
+                         : Performance optimization
+        
+    section Advanced Techniques (45 minutes)
+        Professional Features: Collision detection
+                             : Physics simulation
+                             : State machines
+                             : Component systems
+        
+    section Game Engine Concepts (1 week)
+        Framework Understanding: Entity-component systems
+                               : Scene graphs
+                               : Asset pipelines
+                               : Performance profiling
+        
+    section Production Skills (1 month)
+        Professional Development: Code organization
+                                : Team collaboration
+                                : Testing strategies
+                                : Deployment optimization
+```
 
-[Comment your code](assignment.md)  
+### 🛠️ Buod ng Iyong Game Development Toolkit
+
+Pagkatapos makumpleto ang araling ito, na-master mo na:
+- **Animation Principles**: Frame-based movement at smooth transitions
+- **Event-Driven Programming**: Keyboard input handling na may tamang event management
+- **Object-Oriented Design**: Inheritance hierarchies at polymorphic interfaces
+- **Communication Patterns**: Pub/sub architecture para sa maintainable code
+- **Game Loop Architecture**: Real-time update at rendering cycles
+- **Input Systems**: User control mapping na may default behavior prevention
+- **Asset Management**: Sprite loading at efficient rendering techniques
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Buksan ang browser console at subukan ang `addEventListener('keydown', console.log)` para makita ang keyboard events
+- [ ] Gumawa ng simpleng div element at igalaw ito gamit ang arrow keys
+- [ ] Mag-eksperimento sa `setInterval` para lumikha ng tuloy-tuloy na galaw
+- [ ] Subukang pigilan ang default behavior gamit ang `event.preventDefault()`
+
+### 🎯 **Ano ang Maaaring Magawa Mo sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at unawain ang event-driven programming
+- [ ] Bumuo ng gumagalaw na hero spaceship na may kumpletong keyboard controls
+- [ ] Mag-implement ng smooth enemy movement patterns
+- [ ] Magdagdag ng boundaries para pigilan ang game objects na lumabas sa screen
+- [ ] Gumawa ng basic collision detection sa pagitan ng game objects
+
+### 📅 **Ang Iyong Week-Long Animation Journey**
+- [ ] Kumpletuhin ang buong space game na may polished movement at interactions
+- [ ] Magdagdag ng advanced movement patterns tulad ng curves, acceleration, at physics
+- [ ] Mag-implement ng smooth transitions at easing functions
+- [ ] Gumawa ng particle effects at visual feedback systems
+- [ ] I-optimize ang game performance para sa smooth 60fps gameplay
+- [ ] Magdagdag ng mobile touch controls at responsive design
+
+### 🌟 **Ang Iyong Month-Long Interactive Development**
+- [ ] Bumuo ng complex interactive applications na may advanced animation systems
+- [ ] Matutunan ang animation libraries tulad ng GSAP o gumawa ng sarili mong animation engine
+- [ ] Mag-contribute sa open source game development at animation projects
+- [ ] Masterin ang performance optimization para sa graphics-intensive applications
+- [ ] Gumawa ng educational content tungkol sa game development at animation
+- [ ] Bumuo ng portfolio na nagpapakita ng advanced interactive programming skills
+
+**Mga Real-World Applications**: Ang iyong game animation skills ay direktang magagamit sa:
+- **Interactive Web Applications**: Dynamic dashboards at real-time interfaces
+- **Data Visualization**: Animated charts at interactive graphics
+- **Educational Software**: Interactive simulations at learning tools
+- **Mobile Development**: Touch-based games at gesture handling
+- **Desktop Applications**: Electron apps na may smooth animations
+- **Web Animations**: CSS at JavaScript animation libraries
+
+**Mga Professional Skills na Nakuha**: Ngayon ay kaya mo nang:
+- **Mag-architect** ng event-driven systems na scalable sa complexity
+- **Mag-implement** ng smooth animations gamit ang mathematical principles
+- **Mag-debug** ng complex interaction systems gamit ang browser developer tools
+- **Mag-optimize** ng game performance para sa iba't ibang devices at browsers
+- **Mag-design** ng maintainable code structures gamit ang proven patterns
+
+**Mga Game Development Concepts na Na-master**:
+- **Frame Rate Management**: Pag-unawa sa FPS at timing controls
+- **Input Handling**: Cross-platform keyboard at event systems
+- **Object Lifecycle**: Mga pattern ng creation, update, at destruction
+- **State Synchronization**: Pagpapanatili ng game state na consistent sa bawat frame
+- **Event Architecture**: Decoupled communication sa pagitan ng game systems
+
+**Next Level**: Handa ka nang magdagdag ng collision detection, scoring systems, sound effects, o tuklasin ang modern game frameworks tulad ng Phaser o Three.js!
+
+🌟 **Achievement Unlocked**: Naitayo mo na ang isang kumpletong interactive game system na may professional architecture patterns!
+
+## Assignment
+
+[Comment your code](assignment.md)
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/6-space-game/4-collision-detection/README.md b/translations/tl/6-space-game/4-collision-detection/README.md
index 3c26ef9d78..701c7989ba 100644
--- a/translations/tl/6-space-game/4-collision-detection/README.md
+++ b/translations/tl/6-space-game/4-collision-detection/README.md
@@ -1,35 +1,105 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "4b1d441cfd31924084956000c0fee5a5",
-  "translation_date": "2025-10-22T15:41:50+00:00",
+  "original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
+  "translation_date": "2025-11-03T14:05:57+00:00",
   "source_file": "6-space-game/4-collision-detection/README.md",
   "language_code": "tl"
 }
 -->
-# Gumawa ng Space Game Bahagi 4: Magdagdag ng Laser at Mag-detect ng Mga Banggaan
+# Gumawa ng Space Game Bahagi 4: Pagdaragdag ng Laser at Pagtukoy ng Mga Banggaan
+
+```mermaid
+journey
+    title Your Collision Detection Journey
+    section Physics Foundation
+      Understand rectangles: 3: Student
+      Learn intersection math: 4: Student
+      Grasp coordinate systems: 4: Student
+    section Game Mechanics
+      Implement laser firing: 4: Student
+      Add object lifecycle: 5: Student
+      Create collision rules: 5: Student
+    section System Integration
+      Build collision detection: 5: Student
+      Optimize performance: 5: Student
+      Test interaction systems: 5: Student
+```
 
 ## Pre-Lecture Quiz
 
 [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/35)
 
-Isipin ang eksena sa Star Wars kung saan tumama ang proton torpedoes ni Luke sa exhaust port ng Death Star. Ang eksaktong pag-detect ng banggaan na iyon ang nagbago sa kapalaran ng kalawakan! Sa mga laro, ang pag-detect ng banggaan ay gumagana sa parehong paraan - tinutukoy nito kung kailan nagkakaroon ng interaksyon ang mga bagay at kung ano ang susunod na mangyayari.
-
-Sa araling ito, magdadagdag ka ng laser weapons sa iyong space game at magpapatupad ng collision detection. Katulad ng mga mission planners ng NASA na nagkakalkula ng trajectory ng spacecraft para maiwasan ang debris, matututo kang mag-detect kung kailan nagkakaroon ng intersection ang mga game objects. Hahatiin natin ito sa mga hakbang na madaling sundan.
-
-Sa dulo, magkakaroon ka ng gumaganang combat system kung saan ang mga laser ay sumisira sa mga kalaban at ang mga banggaan ay nagti-trigger ng mga event sa laro. Ang parehong prinsipyo ng banggaan ay ginagamit sa lahat mula sa physics simulations hanggang sa interactive web interfaces.
+Isipin ang eksena sa Star Wars kung saan tumama ang proton torpedoes ni Luke sa exhaust port ng Death Star. Ang eksaktong pagtukoy ng banggaan na iyon ang nagbago sa kapalaran ng kalawakan! Sa mga laro, ang pagtukoy ng banggaan ay gumagana sa parehong paraan - tinutukoy nito kung kailan nagkakaroon ng interaksyon ang mga bagay at kung ano ang susunod na mangyayari.
+
+Sa araling ito, magdaragdag ka ng laser weapons sa iyong space game at magpapatupad ng collision detection. Katulad ng mga tagaplano ng misyon ng NASA na nagkakalkula ng mga trajectory ng spacecraft upang maiwasan ang debris, matututo kang tukuyin kung kailan nagkakaroon ng interseksyon ang mga bagay sa laro. Hahatiin natin ito sa mga hakbang na madaling sundan.
+
+Sa dulo, magkakaroon ka ng gumaganang combat system kung saan ang mga laser ay sumisira ng mga kalaban at ang mga banggaan ay nagti-trigger ng mga event sa laro. Ang parehong prinsipyo ng banggaan ay ginagamit sa lahat mula sa physics simulations hanggang sa interactive web interfaces.
+
+```mermaid
+mindmap
+  root((Collision Detection))
+    Physics Concepts
+      Rectangle Boundaries
+      Intersection Testing
+      Coordinate Systems
+      Separation Logic
+    Game Objects
+      Laser Projectiles
+      Enemy Ships
+      Hero Character
+      Collision Zones
+    Lifecycle Management
+      Object Creation
+      Movement Updates
+      Destruction Marking
+      Memory Cleanup
+    Event Systems
+      Keyboard Input
+      Collision Events
+      Game State Changes
+      Audio/Visual Effects
+    Performance
+      Efficient Algorithms
+      Frame Rate Optimization
+      Memory Management
+      Spatial Partitioning
+```
 
 ✅ Mag-research ng kaunti tungkol sa pinakaunang computer game na kailanman isinulat. Ano ang functionality nito?
 
-## Pag-detect ng Banggaan
+## Pagtukoy ng Banggaan
 
-Ang pag-detect ng banggaan ay gumagana tulad ng proximity sensors sa Apollo lunar module - patuloy nitong sinusuri ang distansya at nagti-trigger ng alerto kapag ang mga bagay ay masyadong malapit. Sa mga laro, ang sistemang ito ang tumutukoy kung kailan nagkakaroon ng interaksyon ang mga bagay at kung ano ang dapat mangyari.
+Ang pagtukoy ng banggaan ay gumagana tulad ng proximity sensors sa Apollo lunar module - patuloy nitong sinusuri ang distansya at nagti-trigger ng alerto kapag ang mga bagay ay masyadong malapit. Sa mga laro, ang sistemang ito ang tumutukoy kung kailan nagkakaroon ng interaksyon ang mga bagay at kung ano ang dapat mangyari.
 
-Ang approach na gagamitin natin ay ituturing ang bawat game object bilang isang rectangle, katulad ng kung paano ginagamit ng air traffic control systems ang mga simpleng geometric shapes para i-track ang mga aircraft. Ang rectangular method na ito ay maaaring mukhang basic, pero ito ay computationally efficient at epektibo para sa karamihan ng game scenarios.
+Ang approach na gagamitin natin ay ituturing ang bawat game object bilang isang rectangle, katulad ng kung paano ginagamit ng mga air traffic control systems ang mga simpleng geometric shapes upang subaybayan ang mga aircraft. Ang rectangular method na ito ay maaaring mukhang basic, ngunit ito ay computationally efficient at mahusay para sa karamihan ng mga senaryo sa laro.
 
 ### Representasyon ng Rectangle
 
-Ang bawat game object ay nangangailangan ng coordinate boundaries, katulad ng kung paano minapa ng Mars Pathfinder rover ang lokasyon nito sa ibabaw ng Mars. Ganito natin ide-define ang mga boundary coordinates:
+Ang bawat game object ay nangangailangan ng coordinate boundaries, katulad ng kung paano minapa ng Mars Pathfinder rover ang lokasyon nito sa ibabaw ng Mars. Narito kung paano natin tinutukoy ang mga boundary coordinates na ito:
+
+```mermaid
+flowchart TD
+    A["🎯 Game Object"] --> B["📍 Position (x, y)"]
+    A --> C["📏 Dimensions (width, height)"]
+    
+    B --> D["Top: y"]
+    B --> E["Left: x"]
+    
+    C --> F["Bottom: y + height"]
+    C --> G["Right: x + width"]
+    
+    D --> H["🔲 Rectangle Bounds"]
+    E --> H
+    F --> H
+    G --> H
+    
+    H --> I["Collision Detection Ready"]
+    
+    style A fill:#e3f2fd
+    style H fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 ```javascript
 rectFromGameObject() {
@@ -42,15 +112,38 @@ rectFromGameObject() {
 }
 ```
 
-**I-breakdown natin ito:**
+**Hatiin natin ito:**
 - **Top edge**: Ito ang simula ng iyong object sa vertical (ang y position nito)
 - **Left edge**: Kung saan ito nagsisimula sa horizontal (ang x position nito)
-- **Bottom edge**: Idagdag ang height sa y position - ngayon alam mo na kung saan ito nagtatapos!
+- **Bottom edge**: Idagdag ang height sa y position - ngayon alam mo kung saan ito nagtatapos!
 - **Right edge**: Idagdag ang width sa x position - at nakuha mo na ang kumpletong boundary
 
-### Algorithm ng Intersection
+### Algorithm ng Interseksyon
 
-Ang pag-detect ng rectangle intersections ay gumagamit ng logic na katulad ng kung paano tinutukoy ng Hubble Space Telescope kung ang mga celestial objects ay nag-o-overlap sa field of view nito. Ang algorithm ay nagsusuri ng separation:
+Ang pagtukoy ng interseksyon ng rectangle ay gumagamit ng logic na katulad ng kung paano tinutukoy ng Hubble Space Telescope kung ang mga celestial object ay nag-o-overlap sa field of view nito. Ang algorithm ay sumusuri ng separation:
+
+```mermaid
+flowchart LR
+    A["Rectangle 1"] --> B{"Separation Tests"}
+    C["Rectangle 2"] --> B
+    
+    B --> D["R2 left > R1 right?"]
+    B --> E["R2 right < R1 left?"]
+    B --> F["R2 top > R1 bottom?"]
+    B --> G["R2 bottom < R1 top?"]
+    
+    D --> H{"Any True?"}
+    E --> H
+    F --> H
+    G --> H
+    
+    H -->|Yes| I["❌ No Collision"]
+    H -->|No| J["✅ Collision Detected"]
+    
+    style B fill:#e3f2fd
+    style I fill:#ffebee
+    style J fill:#e8f5e8
+```
 
 ```javascript
 function intersectRect(r1, r2) {
@@ -67,13 +160,35 @@ function intersectRect(r1, r2) {
 - Ang rectangle 2 ba ay ganap na nasa ibaba ng rectangle 1?
 - Ang rectangle 2 ba ay ganap na nasa itaas ng rectangle 1?
 
-Kung wala sa mga kondisyong ito ang totoo, ang mga rectangles ay dapat na nag-o-overlap. Ang approach na ito ay katulad ng kung paano tinutukoy ng radar operators kung ang dalawang aircraft ay nasa ligtas na distansya.
+Kung wala sa mga kondisyong ito ang totoo, ang mga rectangle ay dapat na nag-o-overlap. Ang approach na ito ay katulad ng kung paano tinutukoy ng mga radar operator kung ang dalawang aircraft ay nasa ligtas na distansya.
 
 ## Pamamahala ng Lifecycle ng Object
 
-Kapag ang laser ay tumama sa kalaban, parehong object ang kailangang alisin sa laro. Gayunpaman, ang pag-delete ng mga object sa gitna ng loop ay maaaring magdulot ng crashes - isang aral na natutunan sa maagang computer systems tulad ng Apollo Guidance Computer. Sa halip, gumagamit tayo ng "mark for deletion" approach na ligtas na nag-aalis ng mga object sa pagitan ng frames.
+Kapag ang laser ay tumama sa kalaban, parehong object ang kailangang alisin sa laro. Gayunpaman, ang pag-delete ng mga object sa gitna ng loop ay maaaring magdulot ng crashes - isang aral na natutunan sa masakit na paraan sa mga maagang computer systems tulad ng Apollo Guidance Computer. Sa halip, gumagamit tayo ng "mark for deletion" approach na ligtas na nag-aalis ng mga object sa pagitan ng mga frame.
 
-Ganito natin minamarkahan ang isang bagay para sa pag-alis:
+```mermaid
+stateDiagram-v2
+    [*] --> Active: Object Created
+    Active --> Collided: Collision Detected
+    Collided --> MarkedDead: Set dead = true
+    MarkedDead --> Filtered: Next Frame
+    Filtered --> [*]: Object Removed
+    
+    Active --> OutOfBounds: Leaves Screen
+    OutOfBounds --> MarkedDead
+    
+    note right of MarkedDead
+        Safe to continue
+        current frame
+    end note
+    
+    note right of Filtered
+        Objects removed
+        between frames
+    end note
+```
+
+Narito kung paano natin minamarkahan ang isang bagay para sa pag-alis:
 
 ```javascript
 // Mark object for removal
@@ -81,40 +196,65 @@ enemy.dead = true;
 ```
 
 **Bakit gumagana ang approach na ito:**
-- Minamarkahan natin ang object bilang "patay" pero hindi agad ito dine-delete
+- Minamarkahan natin ang object bilang "patay" ngunit hindi agad ito dine-delete
 - Pinapayagan nitong matapos ang kasalukuyang game frame nang ligtas
 - Walang crashes mula sa pagsubok na gamitin ang isang bagay na wala na!
 
-Pagkatapos ay i-filter ang mga marked objects bago ang susunod na render cycle:
+Pagkatapos ay i-filter ang mga minarkahang object bago ang susunod na render cycle:
 
 ```javascript
 gameObjects = gameObjects.filter(go => !go.dead);
 ```
 
-**Ang ginagawa ng filtering na ito:**
+**Ano ang ginagawa ng filtering na ito:**
 - Gumagawa ng bagong listahan na may lamang "buhay" na mga object
-- Itinatapon ang anumang bagay na minarkahan bilang patay
-- Pinapanatili ang maayos na pagtakbo ng laro
+- Itinatapon ang anumang minarkahan bilang patay
+- Pinapanatiling maayos ang takbo ng laro
 - Pinipigilan ang memory bloat mula sa naipong mga nasirang object
 
 ## Pagpapatupad ng Laser Mechanics
 
-Ang laser projectiles sa mga laro ay gumagana sa parehong prinsipyo ng photon torpedoes sa Star Trek - sila ay discrete objects na gumagalaw sa tuwid na linya hanggang sa tumama sa isang bagay. Ang bawat pag-pindot sa spacebar ay lumilikha ng bagong laser object na gumagalaw sa screen.
+Ang mga laser projectile sa mga laro ay gumagana sa parehong prinsipyo ng photon torpedoes sa Star Trek - sila ay mga discrete object na gumagalaw sa tuwid na linya hanggang sa tumama sila sa isang bagay. Ang bawat pag-pindot sa spacebar ay lumilikha ng bagong laser object na gumagalaw sa screen.
 
-Para magawa ito, kailangan nating i-coordinate ang ilang iba't ibang bahagi:
+Upang magawa ito, kailangan nating i-coordinate ang ilang iba't ibang bahagi:
 
 **Mga pangunahing bahagi na ipapatupad:**
 - **Gumawa** ng laser objects na nagmumula sa posisyon ng hero
-- **I-handle** ang keyboard input para i-trigger ang paglikha ng laser
-- **Pamahalaan** ang galaw at lifecycle ng laser
-- **Ipatupad** ang visual representation para sa laser projectiles
+- **I-handle** ang keyboard input upang i-trigger ang paglikha ng laser
+- **Pamahalaan** ang paggalaw at lifecycle ng laser
+- **Ipapatupad** ang visual representation para sa laser projectiles
 
 ## Pagpapatupad ng Firing Rate Control
 
-Ang walang limitasyong firing rates ay mag-o-overload sa game engine at gagawing masyadong madali ang gameplay. Ang mga tunay na weapon systems ay may parehong constraints - kahit ang phasers ng USS Enterprise ay nangangailangan ng oras para mag-recharge sa pagitan ng mga shot.
+Ang walang limitasyong firing rates ay mag-o-overload sa game engine at gagawing masyadong madali ang gameplay. Ang mga tunay na weapon systems ay may parehong mga limitasyon - kahit ang phasers ng USS Enterprise ay nangangailangan ng oras upang mag-recharge sa pagitan ng mga shot.
 
 Magpapatupad tayo ng cooldown system na pumipigil sa rapid-fire spamming habang pinapanatili ang responsive controls:
 
+```mermaid
+sequenceDiagram
+    participant Player
+    participant Weapon
+    participant Cooldown
+    participant Game
+    
+    Player->>Weapon: Press Spacebar
+    Weapon->>Cooldown: Check if cool
+    
+    alt Weapon is Ready
+        Cooldown->>Weapon: cool = true
+        Weapon->>Game: Create Laser
+        Weapon->>Cooldown: Start new cooldown
+        Cooldown->>Cooldown: cool = false
+        
+        Note over Cooldown: Wait 500ms
+        
+        Cooldown->>Cooldown: cool = true
+    else Weapon is Cooling
+        Cooldown->>Weapon: cool = false
+        Weapon->>Player: No action
+    end
+```
+
 ```javascript
 class Cooldown {
   constructor(time) {
@@ -144,30 +284,46 @@ class Weapon {
 **Paano gumagana ang cooldown:**
 - Kapag ginawa, ang weapon ay nagsisimula bilang "hot" (hindi pa maaaring mag-fire)
 - Pagkatapos ng timeout period, ito ay nagiging "cool" (handa nang mag-fire)
-- Bago mag-fire, sinusuri natin: "Ang weapon ba ay cool?"
+- Bago mag-fire, sinisigurado natin: "Ang weapon ba ay cool?"
 - Pinipigilan nito ang spam-clicking habang pinapanatili ang responsive controls
 
-✅ Balikan ang lesson 1 sa space game series para ipaalala sa sarili ang tungkol sa cooldowns.
+✅ Balikan ang aralin 1 sa serye ng space game upang alalahanin ang tungkol sa cooldowns.
 
 ## Pagbuo ng Collision System
 
-Palalawakin mo ang umiiral na code ng iyong space game para gumawa ng collision detection system. Katulad ng automated collision avoidance system ng International Space Station, ang iyong laro ay patuloy na magmo-monitor ng mga posisyon ng object at magre-respond sa mga intersection.
+Palalawakin mo ang iyong umiiral na space game code upang lumikha ng collision detection system. Katulad ng automated collision avoidance system ng International Space Station, ang iyong laro ay patuloy na magmo-monitor ng mga posisyon ng object at tutugon sa mga interseksyon.
 
-Simula sa code ng iyong nakaraang aralin, magdadagdag ka ng collision detection na may partikular na mga patakaran na namamahala sa interaksyon ng mga object.
+Simula sa code ng iyong nakaraang aralin, magdaragdag ka ng collision detection na may mga partikular na patakaran na namamahala sa interaksyon ng mga object.
 
 > 💡 **Pro Tip**: Ang laser sprite ay kasama na sa iyong assets folder at naka-reference na sa iyong code, handa na para sa pagpapatupad.
 
-### Mga Patakaran ng Banggaan na Ipatupad
+### Mga Patakaran ng Banggaan na Ipapatupad
 
-**Mga mekanika ng laro na idagdag:**
+**Mga mekanika ng laro na idaragdag:**
 1. **Laser tumama sa kalaban**: Ang kalaban ay nasisira kapag tinamaan ng laser projectile
-2. **Laser tumama sa screen boundary**: Ang laser ay tinatanggal kapag umabot sa itaas na gilid ng screen
-3. **Kalaban at hero banggaan**: Parehong object ang nasisira kapag nag-intersect
-4. **Kalaban umabot sa ibaba**: Game over condition kapag ang mga kalaban ay umabot sa ibaba ng screen
+2. **Laser tumama sa hangganan ng screen**: Ang laser ay tinatanggal kapag naabot ang itaas na gilid ng screen
+3. **Kalaban at hero banggaan**: Parehong object ang nasisira kapag nagkaroon ng interseksyon
+4. **Kalaban umabot sa ibaba**: Kondisyon ng game over kapag ang mga kalaban ay umabot sa ibaba ng screen
+
+### 🔄 **Pedagogical Check-in**
+**Pundasyon ng Pagtukoy ng Banggaan**: Bago ipatupad, siguraduhing nauunawaan mo:
+- ✅ Paano ang rectangle boundaries ay tumutukoy sa collision zones
+- ✅ Bakit ang separation testing ay mas efficient kaysa sa intersection calculation
+- ✅ Ang kahalagahan ng object lifecycle management sa game loops
+- ✅ Paano ang event-driven systems ay nagko-coordinate ng collision responses
+
+**Mabilis na Self-Test**: Ano ang mangyayari kung dinelete mo agad ang mga object sa halip na markahan sila?
+*Sagot: Ang mid-loop deletion ay maaaring magdulot ng crashes o mag-skip ng mga object sa iteration*
+
+**Pag-unawa sa Physics**: Nauunawaan mo na ngayon:
+- **Coordinate Systems**: Paano ang posisyon at sukat ay lumilikha ng boundaries
+- **Intersection Logic**: Mga prinsipyo ng matematika sa likod ng collision detection
+- **Performance Optimization**: Bakit mahalaga ang efficient algorithms sa real-time systems
+- **Memory Management**: Mga ligtas na pattern ng lifecycle ng object para sa stability
 
-## Pag-set up ng Iyong Development Environment
+## Pagsasaayos ng Iyong Development Environment
 
-Magandang balita - na-set up na namin ang karamihan ng mga pundasyon para sa iyo! Ang lahat ng iyong game assets at basic structure ay naghihintay sa `your-work` subfolder, handa na para idagdag ang mga cool na collision features.
+Magandang balita - na-set up na namin ang karamihan ng mga pundasyon para sa iyo! Ang lahat ng iyong game assets at basic structure ay naghihintay sa `your-work` subfolder, handa ka nang idagdag ang mga cool na collision features.
 
 ### Estruktura ng Proyekto
 
@@ -186,9 +342,9 @@ Magandang balita - na-set up na namin ang karamihan ng mga pundasyon para sa iyo
 - **Kasama** ang pangunahing HTML document at JavaScript application file
 - **Nagbibigay** ng package configuration para sa local development server
 
-### Pag-start ng Development Server
+### Pagsisimula ng Development Server
 
-Mag-navigate sa iyong project folder at simulan ang local server:
+Pumunta sa iyong project folder at simulan ang local server:
 
 ```bash
 cd your-work
@@ -197,19 +353,45 @@ npm start
 
 **Ang sequence ng command na ito:**
 - **Nagbabago** ng directory sa iyong working project folder
-- **Nag-start** ng local HTTP server sa `http://localhost:5000`
-- **Nag-serve** ng iyong game files para sa testing at development
-- **Nag-enable** ng live development na may automatic reloading
+- **Nagsisimula** ng local HTTP server sa `http://localhost:5000`
+- **Nagsisilbi** ng iyong game files para sa testing at development
+- **Nagpapagana** ng live development na may automatic reloading
 
-Buksan ang iyong browser at mag-navigate sa `http://localhost:5000` para makita ang kasalukuyang estado ng iyong laro na may hero at mga kalaban na naka-render sa screen.
+Buksan ang iyong browser at pumunta sa `http://localhost:5000` upang makita ang kasalukuyang estado ng iyong laro na may hero at mga kalaban na naka-render sa screen.
 
 ### Step-by-step Implementation
 
-Katulad ng systematic approach na ginamit ng NASA para i-program ang Voyager spacecraft, ipapatupad natin ang collision detection methodically, itatayo ang bawat component nang hakbang-hakbang.
+Katulad ng sistematikong approach na ginamit ng NASA upang i-program ang Voyager spacecraft, ipapatupad natin ang collision detection nang maayos, itatayo ang bawat component nang hakbang-hakbang.
+
+```mermaid
+flowchart TD
+    A["1. Rectangle Bounds"] --> B["2. Intersection Detection"]
+    B --> C["3. Laser System"]
+    C --> D["4. Event Handling"]
+    D --> E["5. Collision Rules"]
+    E --> F["6. Cooldown System"]
+    
+    G["Object Boundaries"] --> A
+    H["Physics Algorithm"] --> B
+    I["Projectile Creation"] --> C
+    J["Keyboard Input"] --> D
+    K["Game Logic"] --> E
+    L["Rate Limiting"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 #### 1. Magdagdag ng Rectangle Collision Bounds
 
-Una, turuan natin ang mga game object kung paano i-describe ang kanilang boundaries. Idagdag ang method na ito sa iyong `GameObject` class:
+Una, turuan natin ang mga game object kung paano ilarawan ang kanilang mga boundaries. Idagdag ang method na ito sa iyong `GameObject` class:
 
 ```javascript
 rectFromGameObject() {
@@ -223,14 +405,14 @@ rectFromGameObject() {
 ```
 
 **Ang method na ito ay nagagawa:**
-- **Gumagawa** ng rectangle object na may eksaktong boundary coordinates
-- **Kinakalkula** ang bottom at right edges gamit ang position plus dimensions
-- **Nagre-return** ng object na handa para sa collision detection algorithms
+- **Lumilikha** ng rectangle object na may eksaktong boundary coordinates
+- **Kinakalkula** ang bottom at right edges gamit ang posisyon plus dimensions
+- **Nagbabalik** ng object na handa para sa collision detection algorithms
 - **Nagbibigay** ng standardized interface para sa lahat ng game objects
 
 #### 2. Ipatupad ang Intersection Detection
 
-Ngayon, gumawa tayo ng collision detective - isang function na makakapagsabi kung kailan nag-o-overlap ang dalawang rectangles:
+Ngayon, gumawa tayo ng collision detective - isang function na makakapagsabi kung ang dalawang rectangle ay nag-o-overlap:
 
 ```javascript
 function intersectRect(r1, r2) {
@@ -244,18 +426,18 @@ function intersectRect(r1, r2) {
 ```
 
 **Ang algorithm na ito ay gumagana sa pamamagitan ng:**
-- **Pagsusuri** ng apat na separation conditions sa pagitan ng rectangles
-- **Nagre-return** ng `false` kung ang anumang separation condition ay totoo
+- **Pagsusuri** ng apat na separation conditions sa pagitan ng mga rectangle
+- **Nagbabalik** ng `false` kung ang anumang separation condition ay totoo
 - **Nagpapahiwatig** ng banggaan kapag walang separation na umiiral
 - **Gumagamit** ng negation logic para sa efficient intersection testing
 
 #### 3. Ipatupad ang Laser Firing System
 
-Narito ang exciting na bahagi! I-set up natin ang laser firing system.
+Narito kung saan nagiging exciting ang mga bagay! I-set up natin ang laser firing system.
 
 ##### Mga Constants ng Mensahe
 
-Una, mag-define tayo ng ilang uri ng mensahe para makapag-usap ang iba't ibang bahagi ng ating laro:
+Una, mag-define tayo ng ilang uri ng mensahe upang makapag-usap ang iba't ibang bahagi ng ating laro:
 
 ```javascript
 KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
@@ -265,10 +447,10 @@ COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
 
 **Ang mga constants na ito ay nagbibigay:**
 - **Nag-standardize** ng mga pangalan ng event sa buong application
-- **Nag-enable** ng consistent communication sa pagitan ng game systems
-- **Nag-prevent** ng typos sa event handler registration
+- **Nagpapagana** ng consistent communication sa pagitan ng game systems
+- **Pinipigilan** ang mga typo sa event handler registration
 
-##### Keyboard Input Handling
+##### Pag-handle ng Keyboard Input
 
 Idagdag ang space key detection sa iyong key event listener:
 
@@ -279,11 +461,11 @@ Idagdag ang space key detection sa iyong key event listener:
 ```
 
 **Ang input handler na ito:**
-- **Nag-detect** ng space key presses gamit ang keyCode 32
+- **Tinutukoy** ang space key presses gamit ang keyCode 32
 - **Nag-eemit** ng standardized event message
-- **Nag-enable** ng decoupled firing logic
+- **Nagpapagana** ng decoupled firing logic
 
-##### Event Listener Setup
+##### Setup ng Event Listener
 
 Irehistro ang firing behavior sa iyong `initGame()` function:
 
@@ -296,7 +478,7 @@ eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
 ```
 
 **Ang event listener na ito:**
-- **Nagre-respond** sa space key events
+- **Tumutugon** sa space key events
 - **Sinusuri** ang firing cooldown status
 - **Nagti-trigger** ng laser creation kapag pinapayagan
 
@@ -310,13 +492,13 @@ eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
 ```
 
 **Ang collision handler na ito:**
-- **Tumanggap** ng collision event data na may parehong objects
-- **Minamarkahan** ang parehong objects para sa pag-alis
+- **Tumanggap** ng collision event data na may parehong object
+- **Minamarkahan** ang parehong object para sa pag-alis
 - **Tinitiyak** ang tamang cleanup pagkatapos ng banggaan
 
 #### 4. Gumawa ng Laser Class
 
-Magpatupad ng laser projectile na gumagalaw pataas at namamahala sa sarili nitong lifecycle:
+Ipatupad ang laser projectile na gumagalaw pataas at namamahala sa sarili nitong lifecycle:
 
 ```javascript
 class Laser extends GameObject {
@@ -340,10 +522,10 @@ class Laser extends GameObject {
 ```
 
 **Ang class implementation na ito:**
-- **Nag-extend** ng GameObject para ma-inherit ang basic functionality
+- **Nag-extend** ng GameObject upang magmana ng basic functionality
 - **Nag-set** ng tamang dimensions para sa laser sprite
-- **Gumagawa** ng automatic upward movement gamit ang `setInterval()`
-- **Nag-handle** ng self-destruction kapag umabot sa screen top
+- **Lumilikha** ng automatic upward movement gamit ang `setInterval()`
+- **Nag-handle** ng self-destruction kapag naabot ang screen top
 - **Namamahala** sa sariling animation timing at cleanup
 
 #### 5. Ipatupad ang Collision Detection System
@@ -374,11 +556,11 @@ function updateGameObjects() {
 
 **Ang collision system na ito:**
 - **Nag-filter** ng game objects ayon sa type para sa efficient testing
-- **Sinusuri** ang bawat laser laban sa bawat kalaban para sa intersections
-- **Nag-eemit** ng collision events kapag may intersections na na-detect
-- **Nag-clean** up ng mga nasirang objects pagkatapos ng collision processing
+- **Sinusuri** ang bawat laser laban sa bawat kalaban para sa interseksyon
+- **Nag-eemit** ng collision events kapag may interseksyon na natukoy
+- **Naglilinis** ng mga nasirang object pagkatapos ng collision processing
 
-> ⚠️ **Mahalaga**: Idagdag ang `updateGameObjects()` sa iyong main game loop sa `window.onload` para ma-enable ang collision detection.
+> ⚠️ **Mahalaga**: Idagdag ang `updateGameObjects()` sa iyong main game loop sa `window.onload` upang paganahin ang collision detection.
 
 #### 6. Magdagdag ng Cooldown System sa Hero Class
 
@@ -415,35 +597,170 @@ class Hero extends GameObject {
 ```
 
 **Pag-unawa sa enhanced Hero class:**
-- **Nag-initialize** ng cooldown timer sa zero (handa nang mag-fire)
-- **Gumagawa** ng laser objects na nakaposisyon sa itaas ng hero ship
-- **Nag-set** ng cooldown period para maiwasan ang rapid firing
-- **Nag-decrement** ng cooldown timer gamit ang interval-based updates
+- **Ini-initialize** ang cooldown timer sa zero (handa nang mag-fire)
+- **Lumilikha** ng laser objects na nakaposisyon sa itaas ng hero ship
+- **Nag-set** ng cooldown period upang maiwasan ang rapid firing
+- **Nagde-decrement** ng cooldown timer gamit ang interval-based updates
 - **Nagbibigay** ng firing status check sa pamamagitan ng `canFire()` method
 
-### Testing ng Iyong Implementation
+### 🔄 **Pedagogical Check-in**
+**Kumpletong Pag-unawa sa Sistema**: Siguraduhin ang mastery mo sa collision system:
+- ✅ Paano ang rectangle boundaries ay nagbibigay-daan sa efficient collision detection?
+- ✅ Bakit mahalaga ang object lifecycle management para sa game stability?
+- ✅ Paano ang cooldown system ay pumipigil sa performance issues?
+- ✅ Ano ang papel ng event-driven architecture sa collision handling?
+
+**System Integration**: Ang iyong collision detection ay nagpapakita ng:
+- **Mathematical Precision**: Rectangle intersection algorithms
+- **Performance Optimization**: Efficient collision testing patterns
+- **Memory Management**: Safe object creation and destruction
+- **Event Coordination**: Decoupled system communication
+- **Real-time Processing**: Frame-based update cycles
+
+**Professional Patterns**: Naipatupad mo:
+- **Separation of Concerns**: Physics, rendering, at input na hiwalay
+- **Object-Oriented Design**: Inheritance at polymorphism
+- **State Management**: Object lifecycle at game state tracking
+- **Performance Optimization**: Efficient algorithms para sa real-time use
+
+### Pagsubok ng Iyong Implementasyon
 
 Ang iyong space game ngayon ay may kumpletong collision detection at combat mechanics. 🚀 Subukan ang mga bagong kakayahan:
-- **Mag-navigate** gamit ang arrow keys para i-verify ang movement controls
+- **Mag-navigate** gamit ang arrow keys upang suriin ang movement controls
 - **Mag-fire ng lasers** gamit ang spacebar - pansinin kung paano pinipigilan ng cooldown ang spam-clicking
-- **Obserbahan ang mga banggaan** kapag ang lasers ay tumama sa mga kalaban, na nagti-trigger ng pag-alis
-- **I-verify ang cleanup** habang ang mga nasirang objects ay nawawala sa laro
+- **Obserbahan ang mga banggaan** kapag ang mga laser ay tumama sa mga kalaban, na nagti-trigger ng pag-alis
+- **Suriin ang cleanup** habang ang mga nasirang object ay nawawala sa laro
+
+Matagumpay mong naipatupad ang collision detection system gamit ang parehong prinsipyo ng matematika na gumagabay sa spacecraft navigation at robotics.
+
+### ⚡ **Ano ang Pwede Mong Gawin sa Susunod na 5 Minuto**
+- [ ] Buksan ang browser DevTools at mag-set ng breakpoints sa iyong collision detection function
+- [ ] Subukang baguhin ang bilis ng laser o galaw ng kalaban upang makita ang epekto ng banggaan
+- [ ] Mag-eksperimento sa iba't ibang cooldown values upang subukan ang firing rates
+- [ ] Magdagdag ng `console.log` na mga pahayag upang subaybayan ang mga kaganapan ng banggaan sa real-time
+
+### 🎯 **Ano ang Maaaring Mong Makamit sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at maunawaan ang mga algorithm ng banggaan
+- [ ] Magdagdag ng mga visual effects tulad ng pagsabog kapag may banggaan
+- [ ] Magpatupad ng iba't ibang uri ng projectiles na may iba't ibang katangian
+- [ ] Gumawa ng mga power-up na pansamantalang nagpapahusay sa kakayahan ng manlalaro
+- [ ] Magdagdag ng mga sound effects upang gawing mas kasiya-siya ang mga banggaan
+
+### 📅 **Ang Iyong Lingguhang Physics Programming**
+- [ ] Kumpletuhin ang buong space game na may pinakinis na collision systems
+- [ ] Magpatupad ng advanced collision shapes bukod sa rectangles (circles, polygons)
+- [ ] Magdagdag ng particle systems para sa makatotohanang epekto ng pagsabog
+- [ ] Gumawa ng kumplikadong pag-uugali ng kalaban na may collision avoidance
+- [ ] I-optimize ang collision detection para sa mas mahusay na performance sa maraming object
+- [ ] Magdagdag ng physics simulation tulad ng momentum at makatotohanang galaw
+
+### 🌟 **Ang Iyong Buwanang Pag-master ng Game Physics**
+- [ ] Gumawa ng mga laro gamit ang advanced physics engines at makatotohanang simulations
+- [ ] Matutunan ang 3D collision detection at spatial partitioning algorithms
+- [ ] Mag-ambag sa mga open source physics libraries at game engines
+- [ ] Mag-master ng performance optimization para sa graphics-intensive applications
+- [ ] Gumawa ng educational content tungkol sa game physics at collision detection
+- [ ] Bumuo ng portfolio na nagpapakita ng advanced physics programming skills
+
+## 🎯 Ang Iyong Timeline sa Pag-master ng Collision Detection
+
+```mermaid
+timeline
+    title Collision Detection & Game Physics Learning Progression
+    
+    section Foundation (10 minutes)
+        Rectangle Math: Coordinate systems
+                      : Boundary calculations
+                      : Position tracking
+                      : Dimension management
+        
+    section Algorithm Design (20 minutes)
+        Intersection Logic: Separation testing
+                          : Overlap detection
+                          : Performance optimization
+                          : Edge case handling
+        
+    section Game Implementation (30 minutes)
+        Object Systems: Lifecycle management
+                      : Event coordination
+                      : State tracking
+                      : Memory cleanup
+        
+    section Interactive Features (40 minutes)
+        Combat Mechanics: Projectile systems
+                        : Weapon cooldowns
+                        : Damage calculation
+                        : Visual feedback
+        
+    section Advanced Physics (50 minutes)
+        Real-time Systems: Frame rate optimization
+                         : Spatial partitioning
+                         : Collision response
+                         : Physics simulation
+        
+    section Professional Techniques (1 week)
+        Game Engine Concepts: Component systems
+                             : Physics pipelines
+                             : Performance profiling
+                             : Cross-platform optimization
+        
+    section Industry Applications (1 month)
+        Production Skills: Large-scale optimization
+                         : Team collaboration
+                         : Engine development
+                         : Platform deployment
+```
+
+### 🛠️ Buod ng Iyong Game Physics Toolkit
+
+Pagkatapos ng lesson na ito, ikaw ay nag-master na ng:
+- **Collision Mathematics**: Mga algorithm ng rectangle intersection at coordinate systems
+- **Performance Optimization**: Mahusay na collision detection para sa real-time applications
+- **Object Lifecycle Management**: Ligtas na mga pattern sa paglikha, pag-update, at pagwasak
+- **Event-Driven Architecture**: Mga decoupled system para sa collision response
+- **Game Loop Integration**: Mga physics update na batay sa frame at koordinasyon ng rendering
+- **Input Systems**: Responsive controls na may rate limiting at feedback
+- **Memory Management**: Mahusay na object pooling at cleanup strategies
+
+**Mga Aplikasyon sa Totoong Buhay**: Ang iyong collision detection skills ay direktang naaangkop sa:
+- **Interactive Simulations**: Scientific modeling at mga educational tools
+- **User Interface Design**: Drag-and-drop interactions at touch detection
+- **Data Visualization**: Interactive charts at mga clickable elements
+- **Mobile Development**: Touch gesture recognition at collision handling
+- **Robotics Programming**: Path planning at obstacle avoidance
+- **Computer Graphics**: Ray tracing at spatial algorithms
+
+**Mga Propesyonal na Kasanayan na Nakuha**: Ngayon ay kaya mo nang:
+- **Magdisenyo** ng mahusay na mga algorithm para sa real-time collision detection
+- **Magpatupad** ng physics systems na umaangkop sa kumplikado ng object
+- **Mag-debug** ng kumplikadong interaction systems gamit ang mga prinsipyo ng matematika
+- **Mag-optimize** ng performance para sa iba't ibang hardware at browser capabilities
+- **Mag-architect** ng maintainable game systems gamit ang mga proven design patterns
+
+**Mga Konsepto sa Game Development na Na-master**:
+- **Physics Simulation**: Real-time collision detection at response
+- **Performance Engineering**: Mga optimized algorithm para sa interactive applications
+- **Event Systems**: Decoupled communication sa pagitan ng mga game components
+- **Object Management**: Mahusay na lifecycle patterns para sa dynamic content
+- **Input Handling**: Responsive controls na may tamang feedback
+
+**Susunod na Antas**: Handa ka nang tuklasin ang advanced physics engines tulad ng Matter.js, magpatupad ng 3D collision detection, o bumuo ng kumplikadong particle systems!
 
-Matagumpay mong naipatupad ang collision detection system gamit ang parehong mathematical principles na gumagabay sa spacecraft navigation at robotics.
+🌟 **Achievement Unlocked**: Nakatapos ka ng isang kumpletong physics-based interaction system na may professional-grade collision detection!
 
-## GitHub Copilot Agent Challenge 🚀
+## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode para tapusin ang sumusunod na challenge:
+Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Pagandahin ang collision detection system sa pamamagitan ng pagpapatupad ng power-ups na random na lumilitaw at nagbibigay ng pansamantalang kakayahan kapag nakolekta ng hero ship.
+**Deskripsyon:** Pagandahin ang collision detection system sa pamamagitan ng pag-implement ng mga power-up na random na lumilitaw at nagbibigay ng pansamantalang kakayahan kapag nakolekta ng hero ship.
 
-**Prompt:** Gumawa ng PowerUp class na nag-extend sa GameObject at ipatupad ang collision detection sa pagitan ng hero at power-ups. Magdagdag ng hindi bababa sa dalawang uri ng power-ups: isa na nagpapataas ng fire rate (nagpapababa ng cooldown) at isa na lumilikha ng pansamantalang shield. Isama ang spawn logic na lumilikha ng power-ups sa random intervals at positions.
+**Prompt:** Gumawa ng PowerUp class na nag-extend sa GameObject at magpatupad ng collision detection sa pagitan ng hero at mga power-up. Magdagdag ng hindi bababa sa dalawang uri ng power-ups: isa na nagpapataas ng fire rate (nagbabawas ng cooldown) at isa na gumagawa ng pansamantalang shield. Isama ang spawn logic na lumilikha ng mga power-up sa random na mga interval at posisyon.
 
 ---
 
 ## 🚀 Hamon
 
-Magdagdag ng explosion! Tingnan ang game assets sa [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) at subukang magdagdag ng explosion kapag ang laser ay tumama sa alien.
+Magdagdag ng pagsabog! Tingnan ang mga game assets sa [the Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) at subukang magdagdag ng pagsabog kapag tumama ang laser sa alien.
 
 ## Post-Lecture Quiz
 
@@ -451,7 +768,7 @@ Magdagdag ng explosion! Tingnan ang game assets sa [Space Art repo](../../../../
 
 ## Review & Self Study
 
-Mag-eksperimento sa mga intervals sa iyong laro sa ngayon. Ano ang nangyayari kapag binago mo ang mga ito? Magbasa pa tungkol sa [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+Eksperimentuhin ang mga interval sa iyong laro sa ngayon. Ano ang mangyayari kapag binago mo ang mga ito? Magbasa pa tungkol sa [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
 
 ## Assignment
 
@@ -460,4 +777,4 @@ Mag-eksperimento sa mga intervals sa iyong laro sa ngayon. Ano ang nangyayari ka
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/6-space-game/5-keeping-score/README.md b/translations/tl/6-space-game/5-keeping-score/README.md
index 3c736ed2f7..e8571bc79c 100644
--- a/translations/tl/6-space-game/5-keeping-score/README.md
+++ b/translations/tl/6-space-game/5-keeping-score/README.md
@@ -1,23 +1,90 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d642759cf1542f554871f74956a59af9",
-  "translation_date": "2025-10-22T15:43:09+00:00",
+  "original_hash": "2ed9145a16cf576faa2a973dff84d099",
+  "translation_date": "2025-11-03T14:07:23+00:00",
   "source_file": "6-space-game/5-keeping-score/README.md",
   "language_code": "tl"
 }
 -->
 # Gumawa ng Space Game Bahagi 5: Puntos at Buhay
 
+```mermaid
+journey
+    title Your Game Design Journey
+    section Player Feedback
+      Understand scoring psychology: 3: Student
+      Learn visual communication: 4: Student
+      Design reward systems: 4: Student
+    section Technical Implementation
+      Canvas text rendering: 4: Student
+      State management: 5: Student
+      Event-driven updates: 5: Student
+    section Game Polish
+      User experience design: 5: Student
+      Balance challenge and reward: 5: Student
+      Create engaging gameplay: 5: Student
+```
+
 ## Pre-Lecture Quiz
 
 [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/37)
 
-Handa ka na bang gawing mas kapanapanabik ang iyong space game? Magdagdag tayo ng sistema ng puntos at pamamahala ng buhay - ang mga pangunahing mekanika na nag-transform sa mga unang arcade games tulad ng Space Invaders mula sa simpleng demonstrasyon patungo sa nakakaadik na libangan. Dito magsisimulang maging tunay na nakaka-engganyo ang iyong laro.
+Handa ka na bang gawing mas kapanapanabik ang iyong space game? Magdagdag tayo ng sistema ng puntos at pamamahala ng buhay - ang mga pangunahing mekanika na nag-transform sa mga unang arcade games tulad ng Space Invaders mula sa simpleng demonstrasyon patungo sa nakakaadik na libangan. Dito magsisimulang maging tunay na nakakaaliw ang iyong laro.
+
+```mermaid
+mindmap
+  root((Game Feedback Systems))
+    Visual Communication
+      Text Rendering
+      Icon Display
+      Color Psychology
+      Layout Design
+    Scoring Mechanics
+      Point Values
+      Reward Timing
+      Progress Tracking
+      Achievement Systems
+    Life Management
+      Risk vs Reward
+      Player Agency
+      Difficulty Balance
+      Recovery Mechanics
+    User Experience
+      Immediate Feedback
+      Clear Information
+      Emotional Response
+      Engagement Loops
+    Implementation
+      Canvas API
+      State Management
+      Event Systems
+      Performance
+```
 
 ## Pag-drawing ng Teksto sa Screen - Ang Boses ng Iyong Laro
 
-Para maipakita ang iyong puntos, kailangan nating matutunan kung paano mag-render ng teksto sa canvas. Ang `fillText()` method ang pangunahing tool mo para dito - ito ang parehong teknik na ginamit sa mga klasikong arcade games para ipakita ang mga puntos at impormasyon ng status.
+Para maipakita ang iyong score, kailangan nating matutunan kung paano mag-render ng teksto sa canvas. Ang `fillText()` method ang pangunahing tool mo para dito - ito ang parehong teknik na ginamit sa mga klasikong arcade games para ipakita ang mga score at impormasyon ng status.
+
+```mermaid
+flowchart LR
+    A["📝 Text Content"] --> B["🎨 Styling"]
+    B --> C["📍 Positioning"]
+    C --> D["🖼️ Canvas Render"]
+    
+    E["Font Family"] --> B
+    F["Font Size"] --> B
+    G["Color"] --> B
+    H["Alignment"] --> B
+    
+    I["X Coordinate"] --> C
+    J["Y Coordinate"] --> C
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
 
 May ganap kang kontrol sa hitsura ng teksto:
 
@@ -34,16 +101,68 @@ ctx.fillText("show this on the screen", 0, 0);
 
 Sa disenyo ng laro, ang "buhay" ay kumakatawan sa margin ng error ng manlalaro. Ang konseptong ito ay nagmula pa sa mga pinball machine, kung saan makakakuha ka ng maraming bola para maglaro. Sa mga unang video games tulad ng Asteroids, ang buhay ay nagbibigay pahintulot sa mga manlalaro na mag-risk at matuto mula sa kanilang mga pagkakamali.
 
+```mermaid
+flowchart TD
+    A["🎮 Player Action"] --> B{"Risk Assessment"}
+    
+    B --> C["High Risk, High Reward"]
+    B --> D["Safe Strategy"]
+    
+    C --> E{"Outcome"}
+    D --> F["Steady Progress"]
+    
+    E -->|Success| G["🏆 Big Points"]
+    E -->|Failure| H["💔 Lose Life"]
+    
+    H --> I{"Lives Remaining?"}
+    I -->|Yes| J["🔄 Try Again"]
+    I -->|No| K["💀 Game Over"]
+    
+    J --> B
+    G --> B
+    F --> B
+    
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+    style G fill:#e3f2fd
+    style H fill:#fff3e0
+```
+
 Mahalaga ang visual na representasyon - ang pagpapakita ng mga icon ng barko sa halip na simpleng "Lives: 3" ay nagbibigay ng agarang visual na pagkilala, katulad ng kung paano ginamit ng mga unang arcade cabinets ang iconography para makipag-usap sa iba't ibang wika.
 
-## Pagbuo ng Sistema ng Gantimpala ng Iyong Laro
+## Paggawa ng Sistema ng Gantimpala ng Iyong Laro
+
+Ngayon, ipapatupad natin ang mga pangunahing sistema ng feedback na nagpapanatili sa interes ng mga manlalaro:
 
-Ngayon, ipapatupad natin ang mga pangunahing sistema ng feedback na nagpapanatili ng interes ng mga manlalaro:
+```mermaid
+sequenceDiagram
+    participant Player
+    participant GameEngine
+    participant ScoreSystem
+    participant LifeSystem
+    participant Display
+    
+    Player->>GameEngine: Shoots Enemy
+    GameEngine->>ScoreSystem: Award Points
+    ScoreSystem->>ScoreSystem: +100 points
+    ScoreSystem->>Display: Update Score
+    
+    Player->>GameEngine: Collides with Enemy
+    GameEngine->>LifeSystem: Lose Life
+    LifeSystem->>LifeSystem: -1 life
+    LifeSystem->>Display: Update Lives
+    
+    alt Lives > 0
+        LifeSystem->>Player: Continue Playing
+    else Lives = 0
+        LifeSystem->>GameEngine: Game Over
+    end
+```
 
-- **Sistema ng puntos**: Ang bawat nasirang barko ng kalaban ay nagbibigay ng 100 puntos (mas madaling kalkulahin ng mga manlalaro ang mga bilog na numero). Ang puntos ay ipapakita sa ibabang kaliwang sulok.
-- **Bilang ng buhay**: Ang iyong bayani ay magsisimula sa tatlong buhay - isang pamantayan na itinatag ng mga unang arcade games para balansehin ang hamon at kasiyahan. Ang bawat banggaan sa kalaban ay magbabawas ng isang buhay. Ipapakita natin ang natitirang buhay sa ibabang kanan gamit ang mga icon ng barko ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.tl.png).
+- **Sistema ng puntos**: Ang bawat nasirang barko ng kalaban ay nagbibigay ng 100 puntos (mas madaling kalkulahin ng mga manlalaro ang mga bilog na numero). Ang score ay makikita sa ibabang kaliwang sulok.
+- **Counter ng buhay**: Ang iyong hero ay magsisimula sa tatlong buhay - isang pamantayan na itinatag ng mga unang arcade games para balansehin ang hamon at kasiyahan sa paglalaro. Ang bawat banggaan sa kalaban ay magbabawas ng isang buhay. Ipapakita natin ang natitirang buhay sa ibabang kanan gamit ang mga icon ng barko ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.tl.png).
 
-## Simulan na Natin ang Pagbuo!
+## Simulan na Natin ang Paggawa!
 
 Una, i-set up ang iyong workspace. Pumunta sa mga file sa iyong `your-work` sub folder. Dapat mong makita ang mga file na ito:
 
@@ -57,7 +176,7 @@ Una, i-set up ang iyong workspace. Pumunta sa mga file sa iyong `your-work` sub
 -| package.json
 ```
 
-Para subukan ang iyong laro, simulan ang development server mula sa folder na `your_work`:
+Para subukan ang iyong laro, simulan ang development server mula sa `your_work` folder:
 
 ```bash
 cd your-work
@@ -66,9 +185,35 @@ npm start
 
 Ito ay magpapatakbo ng lokal na server sa `http://localhost:5000`. Buksan ang address na ito sa iyong browser para makita ang iyong laro. Subukan ang mga kontrol gamit ang arrow keys at subukang barilin ang mga kalaban para masigurado na gumagana ang lahat.
 
+```mermaid
+flowchart TD
+    A["1. Asset Loading"] --> B["2. Game Variables"]
+    B --> C["3. Collision Detection"]
+    C --> D["4. Hero Enhancement"]
+    D --> E["5. Display Functions"]
+    E --> F["6. Event Handlers"]
+    
+    G["Life Icon Image"] --> A
+    H["Score & Lives Tracking"] --> B
+    I["Hero-Enemy Intersections"] --> C
+    J["Points & Life Methods"] --> D
+    K["Text & Icon Rendering"] --> E
+    L["Reward & Penalty Logic"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
+
 ### Oras na Para Mag-code!
 
-1. **Kunin ang mga visual assets na kakailanganin mo**. Kopyahin ang `life.png` asset mula sa folder na `solution/assets/` papunta sa iyong `your-work` folder. Pagkatapos, idagdag ang lifeImg sa iyong window.onload function:
+1. **Kunin ang mga visual assets na kakailanganin mo**. Kopyahin ang `life.png` asset mula sa `solution/assets/` folder papunta sa iyong `your-work` folder. Pagkatapos, idagdag ang lifeImg sa iyong window.onload function:
 
     ```javascript
     lifeImg = await loadTexture("assets/life.png");
@@ -84,9 +229,9 @@ Ito ay magpapatakbo ng lokal na server sa `http://localhost:5000`. Buksan ang ad
     eventEmitter = new EventEmitter();
     ```
   
-2. **I-set up ang mga variable ng iyong laro**. Magdagdag ng code para subaybayan ang kabuuang puntos (magsisimula sa 0) at natitirang buhay (magsisimula sa 3). Ipapakita natin ang mga ito sa screen para laging alam ng mga manlalaro ang kanilang kalagayan.
+2. **I-set up ang mga variable ng laro**. Magdagdag ng ilang code para subaybayan ang iyong kabuuang score (nagsisimula sa 0) at natitirang buhay (nagsisimula sa 3). Ipapakita natin ang mga ito sa screen para laging alam ng mga manlalaro ang kanilang kalagayan.
 
-3. **Ipapatupad ang collision detection**. Palawakin ang iyong `updateGameObjects()` function para matukoy kung kailan nagbabanggaan ang mga kalaban sa iyong bayani:
+3. **Ipatupad ang collision detection**. Palawakin ang iyong `updateGameObjects()` function para matukoy kung kailan bumabangga ang mga kalaban sa iyong hero:
 
     ```javascript
     enemies.forEach(enemy => {
@@ -139,9 +284,25 @@ Ito ay magpapatakbo ng lokal na server sa `http://localhost:5000`. Buksan ang ad
         drawLife();
         ```
 
-1. **Ipapatupad ang mga epekto at gantimpala ng laro**. Ngayon, magdadagdag tayo ng mga sistema ng feedback na nagbibigay kahulugan sa mga aksyon ng manlalaro:
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Disenyo ng Laro**: Bago ipatupad ang mga konsekwensya, siguraduhing nauunawaan mo:
+- ✅ Paano nakakatulong ang visual feedback sa pagpapakita ng estado ng laro sa mga manlalaro
+- ✅ Bakit mahalaga ang consistent na placement ng UI elements para sa usability
+- ✅ Ang sikolohiya sa likod ng mga halaga ng puntos at pamamahala ng buhay
+- ✅ Paano naiiba ang canvas text rendering sa HTML text
+
+**Mabilis na Self-Test**: Bakit karaniwang gumagamit ng bilog na numero ang mga arcade games para sa mga halaga ng puntos?
+*Sagot: Mas madaling kalkulahin ng mga manlalaro ang bilog na numero at nagbibigay ito ng mas kasiya-siyang pakiramdam*
+
+**Prinsipyo ng User Experience**: Ngayon ay ina-apply mo na:
+- **Visual Hierarchy**: Mahahalagang impormasyon na nakaposisyon nang prominente
+- **Agarang Feedback**: Real-time na update sa mga aksyon ng manlalaro
+- **Cognitive Load**: Simple at malinaw na presentasyon ng impormasyon
+- **Emotional Design**: Mga icon at kulay na nagdudulot ng koneksyon sa manlalaro
+
+1. **Ipatupad ang mga konsekwensya at gantimpala ng laro**. Ngayon ay idadagdag natin ang mga sistema ng feedback na nagbibigay kahulugan sa mga aksyon ng manlalaro:
 
-   1. **Ang mga banggaan ay nagbabawas ng buhay**. Sa tuwing ang iyong bayani ay babangga sa isang kalaban, dapat kang mawalan ng isang buhay.
+   1. **Ang mga banggaan ay nagkakahalaga ng buhay**. Sa tuwing babangga ang iyong hero sa isang kalaban, mawawala ang isang buhay.
    
       Idagdag ang method na ito sa iyong `Hero` class:
 
@@ -154,7 +315,7 @@ Ito ay magpapatakbo ng lokal na server sa `http://localhost:5000`. Buksan ang ad
         }
         ```
 
-   2. **Ang pagbaril sa mga kalaban ay nagbibigay ng puntos**. Ang bawat matagumpay na hit ay nagbibigay ng 100 puntos, na nagbibigay ng agarang positibong feedback para sa tamang pagbaril.
+   2. **Ang pagbaril sa mga kalaban ay nagbibigay ng puntos**. Ang bawat matagumpay na tama ay nagbibigay ng 100 puntos, na nagbibigay ng agarang positibong feedback para sa tamang pagbaril.
 
       Palawakin ang iyong Hero class gamit ang increment method na ito:
     
@@ -179,25 +340,160 @@ Ito ay magpapatakbo ng lokal na server sa `http://localhost:5000`. Buksan ang ad
         });
         ```
 
-✅ Interesado sa iba pang mga laro na ginawa gamit ang JavaScript at Canvas? Mag-explore - baka magulat ka sa mga posibilidad!
-
-Pagkatapos ipatupad ang mga feature na ito, subukan ang iyong laro para makita ang kumpletong sistema ng feedback sa aksyon. Dapat mong makita ang mga icon ng buhay sa ibabang kanan, ang iyong puntos sa ibabang kaliwa, at panoorin kung paano nababawasan ang buhay sa mga banggaan habang nadaragdagan ang puntos sa matagumpay na pagbaril.
+✅ Interesado sa ibang mga laro na ginawa gamit ang JavaScript at Canvas? Mag-explore - baka magulat ka sa mga posibilidad!
+
+Pagkatapos ipatupad ang mga feature na ito, subukan ang iyong laro para makita ang kumpletong sistema ng feedback sa aksyon. Dapat mong makita ang mga icon ng buhay sa ibabang kanan, ang iyong score sa ibabang kaliwa, at panoorin habang ang mga banggaan ay nagbabawas ng buhay habang ang matagumpay na pagbaril ay nagpapataas ng iyong score.
+
+Ang iyong laro ngayon ay may mga pangunahing mekanika na nagpasikat sa mga unang arcade games - malinaw na layunin, agarang feedback, at makabuluhang konsekwensya para sa mga aksyon ng manlalaro.
+
+### 🔄 **Pedagogical Check-in**
+**Kumpletong Sistema ng Disenyo ng Laro**: Siguraduhing na-master mo ang mga sistema ng feedback ng manlalaro:
+- ✅ Paano lumilikha ng motibasyon at engagement ang mga scoring mechanics?
+- ✅ Bakit mahalaga ang visual consistency para sa disenyo ng user interface?
+- ✅ Paano binabalanse ng sistema ng buhay ang hamon at retention ng manlalaro?
+- ✅ Anong papel ang ginagampanan ng agarang feedback sa paglikha ng kasiya-siyang gameplay?
+
+**System Integration**: Ang iyong sistema ng feedback ay nagpapakita ng:
+- **Disenyo ng User Experience**: Malinaw na visual na komunikasyon at hierarchy ng impormasyon
+- **Event-Driven Architecture**: Responsive na update sa mga aksyon ng manlalaro
+- **State Management**: Pagsubaybay at pagpapakita ng dynamic na data ng laro
+- **Canvas Mastery**: Pag-render ng teksto at pagposisyon ng sprite
+- **Game Psychology**: Pag-unawa sa motibasyon at engagement ng manlalaro
+
+**Professional Patterns**: Naipatupad mo ang:
+- **MVC Architecture**: Paghihiwalay ng game logic, data, at presentation
+- **Observer Pattern**: Event-driven na update para sa mga pagbabago sa estado ng laro
+- **Component Design**: Mga reusable na function para sa rendering at logic
+- **Performance Optimization**: Efficient na rendering sa game loops
+
+### ⚡ **Ano ang Magagawa Mo sa Loob ng Susunod na 5 Minuto**
+- [ ] Subukan ang iba't ibang laki ng font at kulay para sa score display
+- [ ] Subukang baguhin ang mga halaga ng puntos at tingnan kung paano nito naaapektuhan ang pakiramdam ng gameplay
+- [ ] Magdagdag ng console.log statements para subaybayan kung kailan nagbabago ang puntos at buhay
+- [ ] Subukan ang mga edge cases tulad ng pag-ubos ng buhay o pag-abot sa mataas na score
+
+### 🎯 **Ano ang Maaaring Makamit sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at unawain ang sikolohiya ng disenyo ng laro
+- [ ] Magdagdag ng sound effects para sa pagkuha ng puntos at pagkawala ng buhay
+- [ ] Ipatupad ang sistema ng high score gamit ang localStorage
+- [ ] Gumawa ng iba't ibang halaga ng puntos para sa iba't ibang uri ng kalaban
+- [ ] Magdagdag ng mga visual effects tulad ng pagyanig ng screen kapag nawalan ng buhay
+
+### 📅 **Ang Iyong Lingguhang Paglalakbay sa Disenyo ng Laro**
+- [ ] Kumpletuhin ang buong space game na may pinakinis na mga sistema ng feedback
+- [ ] Ipatupad ang advanced na scoring mechanics tulad ng combo multipliers
+- [ ] Magdagdag ng mga achievements at unlockable content
+- [ ] Gumawa ng mga sistema ng progression at balancing ng kahirapan
+- [ ] Magdisenyo ng mga user interface para sa mga menu at game over screens
+- [ ] Mag-aral ng ibang mga laro para maunawaan ang mga mekanismo ng engagement
+
+### 🌟 **Ang Iyong Buwanang Mastery sa Pag-develop ng Laro**
+- [ ] Gumawa ng kumpletong mga laro na may sopistikadong mga sistema ng progression
+- [ ] Matutunan ang game analytics at pagsukat ng behavior ng manlalaro
+- [ ] Mag-ambag sa mga open source na proyekto sa pag-develop ng laro
+- [ ] Masterin ang advanced na mga pattern ng disenyo ng laro at monetization
+- [ ] Gumawa ng mga educational content tungkol sa disenyo ng laro at user experience
+- [ ] Bumuo ng portfolio na nagpapakita ng mga kasanayan sa disenyo at pag-develop ng laro
+
+## 🎯 Ang Iyong Timeline sa Mastery ng Disenyo ng Laro
+
+```mermaid
+timeline
+    title Game Design & Player Feedback Learning Progression
+    
+    section Foundation (10 minutes)
+        Visual Communication: Text rendering
+                           : Icon design
+                           : Layout principles
+                           : Color psychology
+        
+    section Player Psychology (20 minutes)
+        Motivation Systems: Point values
+                          : Risk vs reward
+                          : Progress feedback
+                          : Achievement design
+        
+    section Technical Implementation (30 minutes)
+        Canvas Mastery: Text positioning
+                      : Sprite rendering
+                      : State management
+                      : Performance optimization
+        
+    section Game Balance (40 minutes)
+        Difficulty Design: Life management
+                         : Scoring curves
+                         : Player retention
+                         : Accessibility
+        
+    section User Experience (50 minutes)
+        Interface Design: Information hierarchy
+                        : Responsive feedback
+                        : Emotional design
+                        : Usability testing
+        
+    section Advanced Systems (1 week)
+        Game Mechanics: Progression systems
+                      : Analytics integration
+                      : Monetization design
+                      : Community features
+        
+    section Industry Skills (1 month)
+        Professional Development: Team collaboration
+                                : Design documentation
+                                : Player research
+                                : Platform optimization
+```
 
-Ang iyong laro ngayon ay may mga pangunahing mekanika na nagpa-engganyo sa mga unang arcade games - malinaw na layunin, agarang feedback, at makabuluhang epekto para sa mga aksyon ng manlalaro.
+### 🛠️ Buod ng Iyong Toolkit sa Disenyo ng Laro
+
+Pagkatapos makumpleto ang araling ito, na-master mo na ang:
+- **Sikolohiya ng Manlalaro**: Pag-unawa sa motibasyon, risk/reward, at engagement loops
+- **Visual Communication**: Epektibong disenyo ng UI gamit ang teksto, mga icon, at layout
+- **Feedback Systems**: Real-time na tugon sa mga aksyon ng manlalaro at mga kaganapan sa laro
+- **State Management**: Mahusay na pagsubaybay at pagpapakita ng dynamic na data ng laro
+- **Canvas Text Rendering**: Propesyonal na pagpapakita ng teksto na may estilo at pagposisyon
+- **Event Integration**: Pagkonekta ng mga aksyon ng user sa makabuluhang konsekwensya ng laro
+- **Game Balance**: Pagdidisenyo ng mga kurba ng kahirapan at mga sistema ng progression ng manlalaro
+
+**Mga Real-World Application**: Ang iyong mga kasanayan sa disenyo ng laro ay direktang naaangkop sa:
+- **Disenyo ng User Interface**: Paglikha ng mga nakakaengganyo at intuitive na interface
+- **Pag-develop ng Produkto**: Pag-unawa sa motibasyon ng user at mga feedback loop
+- **Educational Technology**: Gamification at mga sistema ng engagement sa pag-aaral
+- **Data Visualization**: Pagpapadali at pagpapaganda ng presentasyon ng kumplikadong impormasyon
+- **Pag-develop ng Mobile App**: Mga retention mechanics at disenyo ng user experience
+- **Marketing Technology**: Pag-unawa sa behavior ng user at optimization ng conversion
+
+**Mga Propesyonal na Kasanayan na Nakuha**: Ngayon ay kaya mo nang:
+- **Magdisenyo** ng mga karanasan ng user na nagmo-motivate at nag-eengganyo
+- **Magpatupad** ng mga sistema ng feedback na epektibong gumagabay sa behavior ng user
+- **Magbalanse** ng hamon at accessibility sa mga interactive na sistema
+- **Gumawa** ng visual communication na gumagana sa iba't ibang grupo ng user
+- **Mag-analyze** ng behavior ng user at mag-iterate sa mga pagpapabuti ng disenyo
+
+**Mga Konsepto sa Pag-develop ng Laro na Na-master**:
+- **Motibasyon ng Manlalaro**: Pag-unawa sa kung ano ang nagdudulot ng engagement at retention
+- **Disenyo ng Visual**: Paglikha ng malinaw, kaakit-akit, at functional na interface
+- **System Integration**: Pagkonekta ng maraming sistema ng laro para sa cohesive na karanasan
+- **Performance Optimization**: Mahusay na rendering at state management
+- **Accessibility**: Pagdidisenyo para sa iba't ibang antas ng kasanayan at pangangailangan ng manlalaro
+
+**Susunod na Antas**: Handa ka nang mag-explore ng advanced na mga pattern ng disenyo ng laro, magpatupad ng mga sistema ng analytics, o mag-aral ng monetization at mga estratehiya sa retention ng manlalaro!
+
+🌟 **Achievement Unlocked**: Naitayo mo na ang isang kumpletong sistema ng feedback ng manlalaro gamit ang mga prinsipyo ng propesyonal na disenyo ng laro!
 
 ---
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode para tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode para kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Pagandahin ang sistema ng puntos ng space game sa pamamagitan ng pag-implement ng high score feature na may persistent storage at bonus scoring mechanics.
+**Deskripsyon:** Pagandahin ang sistema ng puntos ng space game sa pamamagitan ng pagpatupad ng high score feature na may persistent storage at bonus scoring mechanics.
 
-**Prompt:** Gumawa ng high score system na nagse-save ng pinakamataas na puntos ng manlalaro sa localStorage. Magdagdag ng bonus points para sa sunod-sunod na pagpatay sa kalaban (combo system) at mag-implement ng iba't ibang halaga ng puntos para sa iba't ibang uri ng kalaban. Maglagay ng visual indicator kapag nakamit ng manlalaro ang bagong high score at ipakita ang kasalukuyang high score sa screen ng laro.
+**Prompt:** Gumawa ng sistema ng high score na nagse-save ng pinakamataas na score ng manlalaro sa localStorage. Magdagdag ng bonus points para sa sunod-sunod na pagpatay sa kalaban (combo system) at magpatupad ng iba't ibang halaga ng puntos para sa iba't ibang uri ng kalaban. Isama ang visual indicator kapag nakamit ng manlalaro ang bagong high score at ipakita ang kasalukuyang high score sa screen ng laro.
 
 ## 🚀 Hamon
 
-Mayroon ka nang functional na laro na may puntos at buhay. Isipin kung anong mga karagdagang feature ang maaaring magpaganda sa karanasan ng manlalaro.
+Mayroon ka nang functional na laro na may puntos at buhay. Isipin kung anong mga karagdagang feature ang maaaring magpahusay sa karanasan ng manlalaro.
 
 ## Post-Lecture Quiz
 
@@ -205,7 +501,7 @@ Mayroon ka nang functional na laro na may puntos at buhay. Isipin kung anong mga
 
 ## Review & Self Study
 
-Gusto mo bang mag-explore pa? Mag-research ng iba't ibang paraan sa pag-score ng laro at mga sistema ng buhay. May mga kahanga-hangang game engines tulad ng [PlayFab](https://playfab.com) na humahawak sa scoring, leaderboards, at player progression. Paano kaya makakatulong ang pag-integrate ng ganitong bagay para ma-level up ang iyong laro?
+Gusto mo bang mag-explore pa? Mag-research ng iba't ibang approach sa sistema ng puntos at buhay sa laro. May mga kahanga-hangang game engines tulad ng [PlayFab](https://playfab.com) na humahawak sa scoring, leaderboards, at player progression. Paano kaya makakatulong ang pag-integrate ng ganitong bagay para dalhin ang iyong laro sa susunod na antas?
 
 ## Assignment
 
@@ -214,4 +510,4 @@ Gusto mo bang mag-explore pa? Mag-research ng iba't ibang paraan sa pag-score ng
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/6-space-game/6-end-condition/README.md b/translations/tl/6-space-game/6-end-condition/README.md
index e234b3d2cd..68831bdcd9 100644
--- a/translations/tl/6-space-game/6-end-condition/README.md
+++ b/translations/tl/6-space-game/6-end-condition/README.md
@@ -1,19 +1,66 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46bcdd9a0174031655a49bb062aa279c",
-  "translation_date": "2025-10-22T15:40:59+00:00",
+  "original_hash": "a4b78043f4d64bf3ee24e0689b8b391d",
+  "translation_date": "2025-11-03T14:05:11+00:00",
   "source_file": "6-space-game/6-end-condition/README.md",
   "language_code": "tl"
 }
 -->
 # Gumawa ng Space Game Bahagi 6: Pagtapos at Pag-restart
 
-Ang bawat mahusay na laro ay nangangailangan ng malinaw na kondisyon ng pagtatapos at maayos na mekanismo ng pag-restart. Nakagawa ka na ng kahanga-hangang space game na may galaw, labanan, at pag-score - ngayon ay oras na para idagdag ang mga huling bahagi upang ito'y maging kumpleto.
-
-Ang iyong laro ay kasalukuyang tumatakbo nang walang katapusan, tulad ng Voyager probes na inilunsad ng NASA noong 1977 - patuloy na naglalakbay sa kalawakan dekada na ang nakalipas. Bagamat ito'y maayos para sa eksplorasyon ng kalawakan, ang mga laro ay nangangailangan ng tiyak na mga endpoint upang lumikha ng kasiya-siyang karanasan.
+```mermaid
+journey
+    title Your Game Completion Journey
+    section End Conditions
+      Define win/lose states: 3: Student
+      Implement condition checking: 4: Student
+      Handle state transitions: 4: Student
+    section Player Experience
+      Design feedback systems: 4: Student
+      Create restart mechanics: 5: Student
+      Polish user interface: 5: Student
+    section System Integration
+      Manage game lifecycle: 5: Student
+      Handle memory cleanup: 5: Student
+      Create complete experience: 5: Student
+```
 
-Ngayon, magpapatupad tayo ng tamang kondisyon ng panalo/pagkatalo at sistema ng pag-restart. Sa pagtatapos ng araling ito, magkakaroon ka ng pinakinis na laro na maaaring tapusin at ulitin ng mga manlalaro, tulad ng mga klasikong arcade games na nagbigay-daan sa medium.
+Ang bawat mahusay na laro ay nangangailangan ng malinaw na kondisyon ng pagtatapos at maayos na mekanismo ng pag-restart. Nakagawa ka ng kahanga-hangang space game na may galaw, labanan, at pagkuha ng puntos - ngayon ay oras na para idagdag ang mga huling bahagi upang ito'y maging kumpleto.
+
+Ang iyong laro sa kasalukuyan ay tumatakbo nang walang katapusan, tulad ng Voyager probes na inilunsad ng NASA noong 1977 - patuloy na naglalakbay sa kalawakan sa loob ng mga dekada. Bagamat ito'y maayos para sa eksplorasyon ng kalawakan, ang mga laro ay nangangailangan ng tiyak na mga endpoint upang lumikha ng kasiya-siyang karanasan.
+
+Ngayon, magpapatupad tayo ng tamang kondisyon ng panalo/pagkatalo at isang sistema ng pag-restart. Sa pagtatapos ng araling ito, magkakaroon ka ng isang pinakinis na laro na maaaring tapusin at ulitin ng mga manlalaro, tulad ng mga klasikong arcade games na nagbigay-daan sa medium.
+
+```mermaid
+mindmap
+  root((Game Completion))
+    End Conditions
+      Victory States
+      Defeat Conditions
+      Progress Tracking
+      State Validation
+    Player Feedback
+      Visual Messages
+      Color Psychology
+      Clear Communication
+      Emotional Response
+    State Management
+      Game Loop Control
+      Memory Cleanup
+      Object Lifecycle
+      Event Handling
+    Restart Systems
+      Input Handling
+      State Reset
+      Fresh Initialization
+      User Experience
+    Polish Elements
+      Message Display
+      Smooth Transitions
+      Error Prevention
+      Accessibility
+```
 
 ## Pre-Lecture Quiz
 
@@ -21,20 +68,81 @@ Ngayon, magpapatupad tayo ng tamang kondisyon ng panalo/pagkatalo at sistema ng
 
 ## Pag-unawa sa Kondisyon ng Pagtatapos ng Laro
 
-Kailan dapat matapos ang iyong laro? Ang pangunahing tanong na ito ay humubog sa disenyo ng laro mula pa noong panahon ng mga arcade. Ang Pac-Man ay nagtatapos kapag nahuli ka ng mga multo o nalinis mo ang lahat ng mga tuldok, habang ang Space Invaders ay nagtatapos kapag ang mga alien ay umabot sa ibaba o nawasak mo silang lahat.
-
-Bilang tagalikha ng laro, ikaw ang magtatakda ng mga kondisyon ng tagumpay at pagkatalo. Para sa ating space game, narito ang mga napatunayang paraan upang lumikha ng nakaka-engganyong gameplay:
+Kailan dapat matapos ang iyong laro? Ang pangunahing tanong na ito ay humubog sa disenyo ng laro mula pa noong panahon ng mga arcade. Ang Pac-Man ay nagtatapos kapag nahuli ka ng mga multo o natapos mo ang lahat ng mga tuldok, habang ang Space Invaders ay nagtatapos kapag ang mga alien ay umabot sa ibaba o kapag nawasak mo silang lahat.
+
+Bilang tagalikha ng laro, ikaw ang magtatakda ng mga kondisyon ng tagumpay at pagkatalo. Para sa ating space game, narito ang mga napatunayang paraan na lumilikha ng nakaka-engganyong gameplay:
+
+```mermaid
+flowchart TD
+    A["🎮 Game Start"] --> B{"Check Conditions"}
+    
+    B --> C["Enemy Count"]
+    B --> D["Hero Lives"]
+    B --> E["Score Threshold"]
+    B --> F["Level Progress"]
+    
+    C --> C1{"Enemies = 0?"}
+    D --> D1{"Lives = 0?"}
+    E --> E1{"Score ≥ Target?"}
+    F --> F1{"Objectives Complete?"}
+    
+    C1 -->|Yes| G["🏆 Victory"]
+    D1 -->|Yes| H["💀 Defeat"]
+    E1 -->|Yes| G
+    F1 -->|Yes| G
+    
+    C1 -->|No| B
+    D1 -->|No| B
+    E1 -->|No| B
+    F1 -->|No| B
+    
+    G --> I["🔄 Restart Option"]
+    H --> I
+    
+    style G fill:#e8f5e8
+    style H fill:#ffebee
+    style I fill:#e3f2fd
+```
 
-- **`N` Mga barko ng kaaway ang nawasak**: Karaniwan ito kung hinahati mo ang laro sa iba't ibang antas kung saan kailangan mong wasakin ang `N` barko ng kaaway upang makumpleto ang isang antas.
+- **`N` Mga barko ng kalaban ang nawasak**: Karaniwan ito kung hinahati mo ang laro sa iba't ibang antas kung saan kailangan mong wasakin ang `N` barko ng kalaban upang matapos ang isang antas.
 - **Ang iyong barko ay nawasak**: May mga laro kung saan talo ka kapag ang iyong barko ay nawasak. Isa pang karaniwang paraan ay ang konsepto ng buhay. Tuwing ang iyong barko ay nawasak, nababawasan ang isang buhay. Kapag naubos na ang lahat ng buhay, talo ka na.
-- **Nakolekta mo ang `N` puntos**: Isa pang karaniwang kondisyon ng pagtatapos ay ang pagkolekta ng puntos. Paano ka makakakuha ng puntos ay depende sa iyo, ngunit karaniwan itong ibinibigay sa iba't ibang aktibidad tulad ng pagwasak sa barko ng kaaway o pagkolekta ng mga item na bumabagsak kapag sila'y nawasak.
-- **Nakumpleto ang isang antas**: Maaaring kabilang dito ang ilang kondisyon tulad ng `X` barko ng kaaway na nawasak, `Y` puntos na nakolekta, o maaaring isang tiyak na item ang nakolekta.
+- **Nakolekta mo ang `N` puntos**: Isa pang karaniwang kondisyon ng pagtatapos ay ang pagkolekta ng puntos. Paano ka makakakuha ng puntos ay depende sa iyo, ngunit karaniwan ang magtalaga ng puntos sa iba't ibang aktibidad tulad ng pagwasak sa barko ng kalaban o pagkolekta ng mga item na bumabagsak kapag sila ay nawasak.
+- **Matapos ang isang antas**: Maaaring kabilang dito ang ilang kondisyon tulad ng `X` barko ng kalaban na nawasak, `Y` puntos na nakolekta, o maaaring isang tiyak na item ang nakolekta.
 
 ## Pagpapatupad ng Pag-restart ng Laro
 
-Ang magagandang laro ay naghihikayat ng replayability sa pamamagitan ng maayos na mekanismo ng pag-restart. Kapag natapos ng mga manlalaro ang isang laro (o natalo), madalas nilang gustong subukan ulit agad - upang talunin ang kanilang score o pagbutihin ang kanilang performance.
+Ang magagandang laro ay naghihikayat ng replayability sa pamamagitan ng maayos na mekanismo ng pag-restart. Kapag natapos ng mga manlalaro ang isang laro (o natalo), madalas nilang gustong subukan ulit agad - upang talunin ang kanilang puntos o pagbutihin ang kanilang performance.
+
+```mermaid
+stateDiagram-v2
+    [*] --> Playing: Game Start
+    Playing --> Victory: All enemies destroyed
+    Playing --> Defeat: Lives = 0
+    
+    Victory --> MessageDisplay: Show win message
+    Defeat --> MessageDisplay: Show lose message
+    
+    MessageDisplay --> WaitingRestart: Press Enter prompt
+    WaitingRestart --> Resetting: Enter key pressed
+    
+    Resetting --> CleanupMemory: Clear intervals
+    CleanupMemory --> ClearEvents: Remove listeners
+    ClearEvents --> InitializeGame: Fresh start
+    InitializeGame --> Playing: New game begins
+    
+    note right of MessageDisplay
+        Color-coded feedback:
+        Green = Victory
+        Red = Defeat
+    end note
+    
+    note right of Resetting
+        Complete state reset
+        prevents memory leaks
+    end note
+```
 
-Ang Tetris ay perpektong halimbawa nito: kapag ang iyong mga bloke ay umabot sa itaas, maaari kang agad magsimula ng bagong laro nang hindi dumadaan sa mga komplikadong menu. Gagawa tayo ng katulad na sistema ng pag-restart na maayos na magre-reset ng estado ng laro at agad na maibabalik ang mga manlalaro sa aksyon.
+Ang Tetris ay perpektong halimbawa nito: kapag ang iyong mga bloke ay umabot sa itaas, maaari kang agad magsimula ng bagong laro nang hindi dumadaan sa kumplikadong mga menu. Magtatayo tayo ng katulad na sistema ng pag-restart na maayos na nire-reset ang estado ng laro at mabilis na ibinabalik ang mga manlalaro sa aksyon.
 
 ✅ **Pagmuni-muni**: Isipin ang mga larong nilaro mo. Sa anong mga kondisyon sila nagtatapos, at paano ka hinihikayat na mag-restart? Ano ang nagpapadama ng maayos na karanasan sa pag-restart kumpara sa nakakainis?
 
@@ -44,10 +152,10 @@ Ipapatupad mo ang mga huling tampok na magpapabago sa iyong proyekto sa isang ku
 
 **Narito ang idadagdag natin ngayon:**
 
-1. **Kondisyon ng tagumpay**: Wasakin ang lahat ng kaaway at makakuha ng tamang selebrasyon (karapat-dapat ka dito!)
+1. **Kondisyon ng tagumpay**: Wasakin ang lahat ng kalaban at makakuha ng tamang selebrasyon (karapat-dapat ka dito!)
 2. **Kondisyon ng pagkatalo**: Maubos ang buhay at harapin ang musika gamit ang defeat screen
 3. **Mekanismo ng pag-restart**: Pindutin ang Enter upang agad bumalik - dahil hindi sapat ang isang laro
-4. **Pamamahala ng estado**: Malinis na simula sa bawat oras - walang natirang kaaway o kakaibang glitches mula sa nakaraang laro
+4. **Pamamahala ng estado**: Malinis na simula sa bawat oras - walang natirang kalaban o kakaibang glitches mula sa nakaraang laro
 
 ## Pagsisimula
 
@@ -73,14 +181,40 @@ cd your-work
 npm start
 ```
 
-**Ang utos na ito:**
+**Ang command na ito:**
 - Nagpapatakbo ng lokal na server sa `http://localhost:5000`
 - Maayos na nagsisilbi sa iyong mga file
 - Awtomatikong nagre-refresh kapag may mga pagbabago
 
-Buksan ang `http://localhost:5000` sa iyong browser at tiyaking tumatakbo ang iyong laro. Dapat kang makagalaw, makaputok, at makipag-ugnayan sa mga kaaway. Kapag nakumpirma, maaari na tayong magpatuloy sa pagpapatupad.
-
-> 💡 **Pro Tip**: Upang maiwasan ang mga babala sa Visual Studio Code, ideklara ang `gameLoopId` sa itaas ng iyong file bilang `let gameLoopId;` sa halip na ideklara ito sa loob ng `window.onload` function. Sinusunod nito ang modernong JavaScript variable declaration best practices.
+Buksan ang `http://localhost:5000` sa iyong browser at tiyaking tumatakbo ang iyong laro. Dapat kang makagalaw, makaputok, at makipag-ugnayan sa mga kalaban. Kapag nakumpirma, maaari na tayong magpatuloy sa pagpapatupad.
+
+> 💡 **Pro Tip**: Upang maiwasan ang mga babala sa Visual Studio Code, ideklara ang `gameLoopId` sa itaas ng iyong file bilang `let gameLoopId;` sa halip na ideklara ito sa loob ng `window.onload` function. Sinusunod nito ang modernong best practices sa deklarasyon ng variable sa JavaScript.
+
+```mermaid
+flowchart TD
+    A["1. Condition Tracking"] --> B["2. Event Handlers"]
+    B --> C["3. Message Constants"]
+    C --> D["4. Restart Controls"]
+    D --> E["5. Message Display"]
+    E --> F["6. Reset System"]
+    
+    G["isHeroDead()\nisEnemiesDead()"] --> A
+    H["Collision Events\nEnd Game Events"] --> B
+    I["GAME_END_WIN\nGAME_END_LOSS"] --> C
+    J["Enter Key\nRestart Trigger"] --> D
+    K["Victory/Defeat\nColor-coded Text"] --> E
+    L["State Cleanup\nFresh Initialization"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 ## Mga Hakbang sa Pagpapatupad
 
@@ -99,16 +233,50 @@ function isEnemiesDead() {
 }
 ```
 
-**Narito ang nangyayari sa ilalim:**
-- **Sinusuri** kung ang ating hero ay naubusan ng buhay (ouch!)
-- **Binibilang** kung ilan pang kaaway ang buhay at lumalaban
-- **Nagbabalik** ng `true` kapag malinis na ang battlefield mula sa mga kaaway
-- **Gumagamit** ng simpleng true/false logic upang panatilihing direkta ang mga bagay
+**Narito ang nangyayari sa likod ng eksena:**
+- **Sinusuri** kung ang ating bayani ay naubusan na ng buhay (ouch!)
+- **Binibilang** kung ilan pang kalaban ang buhay at lumalaban
+- **Nagbabalik** ng `true` kapag malinis na ang battlefield mula sa mga kalaban
+- **Gumagamit** ng simpleng true/false logic upang panatilihing tuwid ang proseso
 - **Nagsasala** sa lahat ng game objects upang hanapin ang mga nakaligtas
 
 ### Hakbang 2: I-update ang Event Handlers para sa Kondisyon ng Pagtatapos
 
-Ngayon ay ikokonekta natin ang mga pagsusuri ng kondisyon sa event system ng laro. Tuwing may nagaganap na banggaan, susuriin ng laro kung ito'y nag-trigger ng kondisyon ng pagtatapos. Ito'y lumilikha ng agarang feedback para sa mga kritikal na kaganapan sa laro.
+Ngayon ay ikokonekta natin ang mga pagsusuri ng kondisyon sa event system ng laro. Sa tuwing may banggaan, susuriin ng laro kung ito'y nag-trigger ng kondisyon ng pagtatapos. Lumilikha ito ng agarang feedback para sa mga kritikal na kaganapan sa laro.
+
+```mermaid
+sequenceDiagram
+    participant Collision
+    participant GameLogic
+    participant Conditions
+    participant EventSystem
+    participant Display
+    
+    Collision->>GameLogic: Laser hits enemy
+    GameLogic->>GameLogic: Destroy objects
+    GameLogic->>Conditions: Check isEnemiesDead()
+    
+    alt All enemies defeated
+        Conditions->>EventSystem: Emit GAME_END_WIN
+        EventSystem->>Display: Show victory message
+    else Enemies remain
+        Conditions->>GameLogic: Continue game
+    end
+    
+    Collision->>GameLogic: Enemy hits hero
+    GameLogic->>GameLogic: Decrease lives
+    GameLogic->>Conditions: Check isHeroDead()
+    
+    alt Lives = 0
+        Conditions->>EventSystem: Emit GAME_END_LOSS
+        EventSystem->>Display: Show defeat message
+    else Lives remain
+        GameLogic->>Conditions: Check isEnemiesDead()
+        alt All enemies defeated
+            Conditions->>EventSystem: Emit GAME_END_WIN
+        end
+    end
+```
 
 ```javascript
 eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -142,11 +310,11 @@ eventEmitter.on(Messages.GAME_END_LOSS, () => {
 });
 ```
 
-**Narito ang nangyayari:**
-- **Laser tumama sa kaaway**: Parehong nawawala, nakakakuha ka ng puntos, at sinusuri kung nanalo ka
-- **Kaaway tumama sa iyo**: Nawawala ka ng buhay, at sinusuri kung buhay ka pa
+**Ano ang nangyayari dito:**
+- **Laser tumama sa kalaban**: Parehong nawawala, nakakakuha ka ng puntos, at sinusuri kung nanalo ka
+- **Kalaban tumama sa iyo**: Nawawalan ka ng buhay, at sinusuri kung buhay ka pa
 - **Matalinong pagkakasunod-sunod**: Sinusuri muna ang pagkatalo (walang gustong manalo at matalo nang sabay!)
-- **Agarang reaksyon**: Kapag may mahalagang nangyari, alam ito ng laro
+- **Agarang reaksyon**: Sa sandaling may mahalagang mangyari, alam ito ng laro
 
 ### Hakbang 3: Magdagdag ng Bagong Constants para sa Mensahe
 
@@ -157,16 +325,16 @@ GAME_END_LOSS: "GAME_END_LOSS",
 GAME_END_WIN: "GAME_END_WIN",
 ```
 
-**Sa itaas, ginawa natin:**
-- **Nagdagdag** ng constants para sa mga event ng pagtatapos ng laro upang mapanatili ang pagkakapare-pareho
-- **Gumamit** ng mga deskriptibong pangalan na malinaw na nagpapahiwatig ng layunin ng event
+**Sa itaas, ginawa natin ang sumusunod:**
+- **Idinagdag** ang constants para sa mga kaganapan ng pagtatapos ng laro upang mapanatili ang pagkakapare-pareho
+- **Ginamit** ang mga deskriptibong pangalan na malinaw na nagpapahiwatig ng layunin ng kaganapan
 - **Sinunod** ang umiiral na naming convention para sa mga uri ng mensahe
 
 ### Hakbang 4: Magpatupad ng Kontrol para sa Pag-restart
 
-Ngayon ay magdadagdag ka ng keyboard controls na magpapahintulot sa mga manlalaro na i-restart ang laro. Ang Enter key ay natural na pagpipilian dahil karaniwan itong nauugnay sa pag-apruba ng mga aksyon at pagsisimula ng mga bagong laro.
+Ngayon ay magdadagdag ka ng keyboard controls na magpapahintulot sa mga manlalaro na i-restart ang laro. Ang Enter key ay natural na pagpipilian dahil karaniwang nauugnay ito sa pag-confirm ng mga aksyon at pagsisimula ng mga bagong laro.
 
-**Magdagdag ng Enter key detection sa iyong umiiral na keydown event listener:**
+**Idagdag ang Enter key detection sa iyong umiiral na keydown event listener:**
 
 ```javascript
 else if(evt.key === "Enter") {
@@ -174,19 +342,19 @@ else if(evt.key === "Enter") {
 }
 ```
 
-**Idagdag ang bagong constant para sa mensahe:**
+**Idagdag ang bagong constant ng mensahe:**
 
 ```javascript
 KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
 ```
 
-**Ang kailangan mong malaman:**
-- **Pinalawak** ang umiiral na sistema ng paghawak ng keyboard event
-- **Ginamit** ang Enter key bilang trigger para sa pag-restart para sa intuitive na karanasan ng user
+**Ano ang dapat mong malaman:**
+- **Pinalawak** ang iyong umiiral na sistema ng paghawak ng keyboard event
+- **Ginamit** ang Enter key bilang trigger ng pag-restart para sa intuitive na karanasan ng user
 - **Naglabas** ng custom na event na maaaring pakinggan ng ibang bahagi ng iyong laro
-- **Pinanatili** ang parehong pattern tulad ng iyong iba pang keyboard controls
+- **Pinanatili** ang parehong pattern tulad ng iyong ibang keyboard controls
 
-### Hakbang 5: Gumawa ng Sistema ng Pag-display ng Mensahe
+### Hakbang 5: Gumawa ng Sistema ng Pagpapakita ng Mensahe
 
 Ang iyong laro ay kailangang malinaw na makipag-usap ng resulta sa mga manlalaro. Gagawa tayo ng sistema ng mensahe na nagpapakita ng mga estado ng tagumpay at pagkatalo gamit ang color-coded na teksto, katulad ng mga terminal interface ng mga unang computer system kung saan ang berde ay nagpapahiwatig ng tagumpay at pula ay nagpapahiwatig ng error.
 
@@ -203,7 +371,7 @@ function displayMessage(message, color = "red") {
 
 **Hakbang-hakbang, narito ang nangyayari:**
 - **Itinatakda** ang font size at family para sa malinaw at nababasang teksto
-- **Nag-aaplay** ng color parameter na may "red" bilang default para sa mga babala
+- **Nag-aapply** ng color parameter na may "red" bilang default para sa mga babala
 - **Ine-center** ang teksto nang pahalang at patayo sa canvas
 - **Gumagamit** ng modernong default parameters ng JavaScript para sa flexible na color options
 - **Ginagamit** ang canvas 2D context para sa direktang pag-render ng teksto
@@ -233,17 +401,33 @@ function endGame(win) {
 }
 ```
 
-**Ang ginagawa ng function na ito:**
+**Ano ang ginagawa ng function na ito:**
 - **Pinipigil** ang lahat ng galaw - wala nang gumagalaw na barko o laser
-- **Nagbibigay** ng maliit na pause (200ms) upang matapos ang huling frame na ma-drawing
-- **Nililinis** ang screen at pinipinturahan ito ng itim para sa dramatikong epekto
+- **Nagbibigay** ng maliit na pahinga (200ms) upang matapos ang huling frame na ma-drawing
+- **Nililinis** ang screen at pinipintahan ito ng itim para sa dramatikong epekto
 - **Nagpapakita** ng iba't ibang mensahe para sa mga nanalo at natalo
 - **Nagbibigay ng kulay** sa balita - berde para sa maganda, pula para sa... hindi maganda
-- **Sinasabi** sa mga manlalaro kung paano agad bumalik sa laro
+- **Sinasabi** sa mga manlalaro kung paano muling magsimula
+
+### 🔄 **Pedagogical Check-in**
+**Pamamahala ng Estado ng Laro**: Bago ipatupad ang reset functionality, tiyaking nauunawaan mo:
+- ✅ Paano ang mga kondisyon ng pagtatapos ay lumilikha ng malinaw na layunin sa gameplay
+- ✅ Bakit mahalaga ang visual feedback para sa pag-unawa ng manlalaro
+- ✅ Ang kahalagahan ng tamang cleanup upang maiwasan ang memory leaks
+- ✅ Paano ang event-driven architecture ay nagbibigay-daan sa maayos na paglipat ng estado
+
+**Mabilis na Self-Test**: Ano ang mangyayari kung hindi mo nilinis ang event listeners sa panahon ng reset?
+*Sagot: Memory leaks at duplicate event handlers na nagdudulot ng hindi inaasahang pag-uugali*
 
-### Hakbang 6: Magpatupad ng Pag-reset ng Laro
+**Mga Prinsipyo ng Disenyo ng Laro**: Ngayon ay ipinatutupad mo:
+- **Malinaw na Layunin**: Alam ng mga manlalaro kung ano ang nagtatakda ng tagumpay at pagkatalo
+- **Agarang Feedback**: Ang mga pagbabago sa estado ng laro ay agad na naipapahayag
+- **Kontrol ng User**: Maaaring mag-restart ang mga manlalaro kapag handa na sila
+- **Katiyakan ng Sistema**: Ang tamang cleanup ay pumipigil sa mga bug at isyu sa performance
 
-Ang sistema ng pag-reset ay kailangang ganap na linisin ang kasalukuyang estado ng laro at mag-initialize ng bagong session ng laro. Tinitiyak nito na ang mga manlalaro ay makakakuha ng malinis na simula nang walang natirang data mula sa nakaraang laro.
+### Hakbang 6: Ipatupad ang Reset Functionality ng Laro
+
+Ang sistema ng reset ay kailangang ganap na linisin ang kasalukuyang estado ng laro at mag-initialize ng bagong session ng laro. Tinitiyak nito na ang mga manlalaro ay makakakuha ng malinis na simula nang walang natirang data mula sa nakaraang laro.
 
 **Gumawa ng `resetGame()` function:**
 
@@ -267,10 +451,10 @@ function resetGame() {
 ```
 
 **Unawain ang bawat bahagi:**
-- **Sinusuri** kung may kasalukuyang game loop bago mag-reset
+- **Sinusuri** kung may game loop na kasalukuyang tumatakbo bago mag-reset
 - **Nililinis** ang umiiral na game loop upang ihinto ang lahat ng kasalukuyang aktibidad ng laro
 - **Inaalis** ang lahat ng event listeners upang maiwasan ang memory leaks
-- **Ini-reinitialize** ang estado ng laro gamit ang mga bagong object at variable
+- **Muling ini-initialize** ang estado ng laro gamit ang mga bagong object at variable
 - **Sinisimulan** ang bagong game loop na may lahat ng mahahalagang function ng laro
 - **Pinapanatili** ang parehong 100ms interval para sa pare-parehong performance ng laro
 
@@ -291,44 +475,169 @@ clear() {
 ```
 
 **Mga mahalagang punto na dapat tandaan:**
-- **Ikokonekta** ang Enter key press sa functionality ng pag-reset ng laro
-- **Ire-rehistro** ang event listener na ito sa panahon ng initialization ng laro
-- **Nagbibigay** ng malinis na paraan upang alisin ang lahat ng event listeners kapag nag-reset
-- **Pinipigilan** ang memory leaks sa pamamagitan ng pag-clear ng event handlers sa pagitan ng mga laro
-- **Ire-reset** ang listeners object sa isang empty state para sa sariwang initialization
+- **Ikonekta** ang Enter key press sa reset game functionality
+- **Irehistro** ang event listener na ito sa panahon ng game initialization
+- **Magbigay** ng malinis na paraan upang alisin ang lahat ng event listeners sa panahon ng reset
+- **Pigilan** ang memory leaks sa pamamagitan ng pag-clear ng event handlers sa pagitan ng mga laro
+- **I-reset** ang listeners object sa isang empty state para sa sariwang initialization
 
 ## Binabati kita! 🎉
 
 👽 💥 🚀 Matagumpay mong naitayo ang isang kumpletong laro mula sa simula. Tulad ng mga programmer na lumikha ng mga unang video games noong 1970s, na-transform mo ang mga linya ng code sa isang interactive na karanasan na may tamang game mechanics at user feedback. 🚀 💥 👽
 
-**Na-accomplish mo:**
+**Naabot mo ang mga sumusunod:**
 - **Naipatupad** ang kumpletong kondisyon ng panalo at pagkatalo na may user feedback
 - **Nilikha** ang seamless restart system para sa tuloy-tuloy na gameplay
 - **Dinisenyo** ang malinaw na visual communication para sa mga estado ng laro
-- **Pinamahalaan** ang mga kumplikadong transition ng estado ng laro at cleanup
-- **Pinagsama-sama** ang lahat ng components sa isang cohesive, playable na laro
+- **Pinamahalaan** ang mga kumplikadong paglipat ng estado ng laro at cleanup
+- **Pinagsama-sama** ang lahat ng bahagi sa isang cohesive, playable na laro
+
+### 🔄 **Pedagogical Check-in**
+**Kumpletong Sistema ng Pag-develop ng Laro**: Ipagdiwang ang iyong mastery sa buong cycle ng pag-develop ng laro:
+- ✅ Paano ang mga kondisyon ng pagtatapos ay lumilikha ng kasiya-siyang karanasan para sa manlalaro?
+- ✅ Bakit mahalaga ang tamang pamamahala ng estado para sa katatagan ng laro?
+- ✅ Paano ang visual feedback ay nagpapahusay sa pag-unawa ng manlalaro?
+- ✅ Anong papel ang ginagampanan ng restart system sa pagpapanatili ng manlalaro?
+
+**Mastery ng Sistema**: Ang iyong kumpletong laro ay nagpapakita ng:
+- **Full-Stack Game Development**: Mula sa graphics hanggang sa input hanggang sa pamamahala ng estado
+- **Propesyonal na Arkitektura**: Event-driven systems na maayos na nag-scale
+- **Disenyo ng User Experience**: Malinaw na feedback at intuitive na controls
+- **Optimization ng Performance**: Efficient rendering at memory management
+- **Polish at Completeness**: Lahat ng detalye na nagpapadama ng tapos na laro
+
+**Mga Kasanayan para sa Industriya**: Naipatupad mo:
+- **Game Loop Architecture**: Real-time systems na may pare-parehong performance
+- **Event-Driven Programming**: Decoupled systems na maayos na nag-scale
+- **Pamamahala ng Estado**: Kumplikadong data handling at lifecycle management
+- **Disenyo ng User Interface**: Malinaw na komunikasyon at responsive na controls
+- **Testing at Debugging**: Iterative development at problem-solving
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Laruin ang iyong kumpletong laro at subukan ang lahat ng kondisyon ng panalo at pagkatalo
+- [ ] Subukan ang iba't ibang parameter ng kondisyon ng pagtatapos
+- [ ] Subukang magdagdag ng console.log statements upang subaybayan ang mga pagbabago sa estado ng laro
+- [ ] Ibahagi ang iyong laro sa mga kaibigan at mangolekta ng feedback
+
+### 🎯 **Ano ang Magagawa Mo sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at pagnilayan ang iyong paglalakbay sa pag-de
+### 🌟 **Ang Iyong Buwanang Karera sa Pagbuo ng Laro**
+- [ ] Gumawa ng maraming kumpletong laro na nag-eeksplora ng iba't ibang genre at mekanika
+- [ ] Matutunan ang mga advanced na framework sa pagbuo ng laro tulad ng Phaser o Three.js
+- [ ] Mag-ambag sa mga open source na proyekto sa pagbuo ng laro
+- [ ] Pag-aralan ang mga prinsipyo ng disenyo ng laro at sikolohiya ng manlalaro
+- [ ] Gumawa ng portfolio na nagpapakita ng iyong kakayahan sa pagbuo ng laro
+- [ ] Kumonekta sa komunidad ng pagbuo ng laro at patuloy na matuto
+
+## 🎯 Ang Kumpletong Timeline ng Iyong Mastery sa Pagbuo ng Laro
+
+```mermaid
+timeline
+    title Complete Game Development Learning Progression
+    
+    section Foundation (Lessons 1-2)
+        Game Architecture: Project structure
+                         : Asset management
+                         : Canvas basics
+                         : Event systems
+        
+    section Interaction Systems (Lessons 3-4)
+        Player Control: Input handling
+                      : Movement mechanics
+                      : Collision detection
+                      : Physics simulation
+        
+    section Game Mechanics (Lesson 5)
+        Feedback Systems: Scoring mechanisms
+                        : Life management
+                        : Visual communication
+                        : Player motivation
+        
+    section Game Completion (Lesson 6)
+        Polish & Flow: End conditions
+                     : State management
+                     : Restart systems
+                     : User experience
+        
+    section Advanced Features (1 week)
+        Enhancement Skills: Audio integration
+                          : Visual effects
+                          : Level progression
+                          : Performance optimization
+        
+    section Professional Development (1 month)
+        Industry Readiness: Framework mastery
+                          : Team collaboration
+                          : Portfolio development
+                          : Community engagement
+        
+    section Career Advancement (3 months)
+        Specialization: Advanced game engines
+                      : Platform deployment
+                      : Monetization strategies
+                      : Industry networking
+```
+
+### 🛠️ Buod ng Iyong Kumpletong Toolkit sa Pagbuo ng Laro
+
+Pagkatapos makumpleto ang buong serye ng space game, ikaw ay bihasa na sa:
+- **Arkitektura ng Laro**: Mga event-driven system, game loops, at pamamahala ng estado
+- **Graphics Programming**: Canvas API, sprite rendering, at mga visual effects
+- **Input Systems**: Paghawak ng keyboard, pag-detect ng banggaan, at mga responsive na kontrol
+- **Disenyo ng Laro**: Feedback ng manlalaro, mga sistema ng progreso, at mekanika ng engagement
+- **Pag-optimize ng Performance**: Mabisang rendering, pamamahala ng memorya, at kontrol sa frame rate
+- **User Experience**: Malinaw na komunikasyon, intuitive na kontrol, at mga detalye ng polish
+- **Mga Propesyonal na Pattern**: Malinis na code, mga teknik sa debugging, at organisasyon ng proyekto
+
+**Mga Aplikasyon sa Tunay na Mundo**: Ang iyong mga kakayahan sa pagbuo ng laro ay direktang naaangkop sa:
+- **Interactive Web Applications**: Mga dynamic na interface at real-time na sistema
+- **Data Visualization**: Mga animated na chart at interactive na graphics
+- **Educational Technology**: Gamification at mga nakakaengganyong karanasan sa pag-aaral
+- **Mobile Development**: Mga touch-based na interaksyon at pag-optimize ng performance
+- **Simulation Software**: Mga physics engine at real-time na modeling
+- **Creative Industries**: Interactive na sining, entertainment, at digital na karanasan
+
+**Mga Propesyonal na Kakayahan na Nakuha**: Ngayon ay kaya mo nang:
+- **Magdisenyo** ng mga kumplikadong interactive na sistema mula sa simula
+- **Mag-debug** ng mga real-time na aplikasyon gamit ang sistematikong mga pamamaraan
+- **Mag-optimize** ng performance para sa maayos na karanasan ng user
+- **Magdisenyo** ng mga nakakaengganyong user interface at mga pattern ng interaksyon
+- **Makipagtulungan** nang epektibo sa mga teknikal na proyekto gamit ang tamang organisasyon ng code
+
+**Mga Konseptong Mastered sa Pagbuo ng Laro**:
+- **Real-time Systems**: Game loops, pamamahala ng frame rate, at performance
+- **Event-Driven Architecture**: Mga decoupled system at message passing
+- **State Management**: Kumplikadong pamamahala ng data at lifecycle management
+- **User Interface Programming**: Canvas graphics at responsive na disenyo
+- **Teorya ng Disenyo ng Laro**: Sikolohiya ng manlalaro at mekanika ng engagement
+
+**Susunod na Antas**: Handa ka nang mag-explore ng mga advanced na framework sa laro, 3D graphics, multiplayer systems, o mag-transition sa mga propesyonal na tungkulin sa pagbuo ng laro!
+
+🌟 **Achievement Unlocked**: Nakumpleto mo ang buong paglalakbay sa pagbuo ng laro at nakagawa ng isang propesyonal na kalidad na interactive na karanasan mula sa simula!
+
+**Maligayang pagdating sa komunidad ng pagbuo ng laro!** 🎮✨
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Pagandahin ang space game sa pamamagitan ng pagpapatupad ng sistema ng level progression na may tumataas na kahirapan at bonus features.
+**Deskripsyon:** Pagandahin ang space game sa pamamagitan ng pag-implement ng sistema ng level progression na may tumataas na kahirapan at mga bonus na tampok.
 
-**Prompt:** Gumawa ng multi-level space game system kung saan ang bawat level ay may mas maraming barko ng kaaway na may mas mataas na bilis at health. Magdagdag ng scoring multiplier na tumataas sa bawat level, at magpatupad ng power-ups (tulad ng rapid fire o shield) na random na lumalabas kapag nawasak ang mga kaaway. Isama ang level completion bonus at ipakita ang kasalukuyang level sa screen kasama ang umiiral na score at buhay.
+**Prompt:** Gumawa ng multi-level na sistema ng space game kung saan ang bawat level ay may mas maraming enemy ships na may mas mataas na bilis at health. Magdagdag ng scoring multiplier na tumataas sa bawat level, at mag-implement ng power-ups (tulad ng rapid fire o shield) na random na lumalabas kapag nasira ang mga kalaban. Isama ang level completion bonus at ipakita ang kasalukuyang level sa screen kasama ang umiiral na score at buhay.
 
-Alamin ang higit pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Opsyonal na Hamon sa Pagpapahusay
 
-**Magdagdag ng Audio sa Iyong Laro**: Pagandahin ang karanasan sa gameplay sa pamamagitan ng pagpapatupad ng mga sound effects! Isaalang-alang ang pagdagdag ng audio para sa:
+**Magdagdag ng Audio sa Iyong Laro**: Pagandahin ang karanasan sa gameplay sa pamamagitan ng pag-implement ng mga sound effects! Isaalang-alang ang pagdagdag ng audio para sa:
 
 - **Laser shots** kapag nagpaputok ang manlalaro
-- **Pagkawasak ng kaaway** kapag tinamaan ang mga barko
-- **Pinsala sa hero** kapag tinamaan ang manlalaro
+- **Pagkasira ng kalaban** kapag natamaan ang mga ships
+- **Pinsala sa hero** kapag nasaktan ang manlalaro
 - **Victory music** kapag nanalo ang laro
 - **Defeat sound** kapag natalo ang laro
 
-**Halimbawa ng pagpapatupad ng audio:**
+**Halimbawa ng pag-implement ng audio:**
 
 ```javascript
 // Create audio objects
@@ -342,13 +651,13 @@ function playLaserSound() {
 }
 ```
 
-**Ang kailangan mong malaman:**
-- **Gumagawa** ng Audio objects para sa iba't ibang sound effects
-- **Ire-reset** ang `currentTime` upang payagan ang mabilisang pag-play ng sound effects
-- **Hinahawakan** ang autoplay policies ng browser sa pamamagitan ng pag-trigger ng sounds mula sa user interactions
-- **Pinamamahalaan** ang audio volume at timing para sa mas mahusay na karanasan sa laro
+**Mga Dapat Malaman:**
+- **Gumagawa** ng mga Audio object para sa iba't ibang sound effects
+- **Nire-reset** ang `currentTime` upang payagan ang mabilisang sound effects
+- **Hinahandle** ang autoplay policies ng browser sa pamamagitan ng pag-trigger ng mga tunog mula sa interaksyon ng user
+- **Pinamamahalaan** ang volume ng audio at timing para sa mas magandang karanasan sa laro
 
-> 💡 **Learning Resource**: Tuklasin ang [audio sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) upang matuto pa tungkol sa pagpapatupad ng audio sa JavaScript games.
+> 💡 **Learning Resource**: I-explore ang [audio sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) upang matuto pa tungkol sa pag-implement ng audio sa mga JavaScript na laro.
 
 ## Post-Lecture Quiz
 
@@ -356,7 +665,7 @@ function playLaserSound() {
 
 ## Review & Self Study
 
-Ang iyong assignment ay gumawa ng bagong sample na laro, kaya't mag-explore ng ilang mga kawili-wiling laro upang makita kung anong uri ng laro ang maaari mong buuin.
+Ang iyong assignment ay gumawa ng bagong sample na laro, kaya mag-explore ng ilang mga kawili-wiling laro upang makita kung anong uri ng laro ang maaari mong gawin.
 
 ## Assignment
 
@@ -365,4 +674,4 @@ Ang iyong assignment ay gumawa ng bagong sample na laro, kaya't mag-explore ng i
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/7-bank-project/1-template-route/README.md b/translations/tl/7-bank-project/1-template-route/README.md
index c7068a8cc6..4e6d2e3de0 100644
--- a/translations/tl/7-bank-project/1-template-route/README.md
+++ b/translations/tl/7-bank-project/1-template-route/README.md
@@ -1,51 +1,98 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5d259f6962464ad91e671083aa0398f4",
-  "translation_date": "2025-10-22T15:35:48+00:00",
+  "original_hash": "351678bece18f07d9daa987a881fb062",
+  "translation_date": "2025-11-03T14:00:15+00:00",
   "source_file": "7-bank-project/1-template-route/README.md",
   "language_code": "tl"
 }
 -->
 # Gumawa ng Banking App Bahagi 1: HTML Templates at Routes sa isang Web App
 
-Noong ginabayan ng Apollo 11's guidance computer ang paglalakbay patungong buwan noong 1969, kinakailangan nitong magpalit-palit ng iba't ibang programa nang hindi nire-restart ang buong sistema. Ang mga modernong web application ay gumagana sa parehong paraan – binabago ang nakikita mo nang hindi nire-reload ang lahat mula sa simula. Ito ang nagbibigay ng makinis at mabilis na karanasan na inaasahan ng mga gumagamit ngayon.
+```mermaid
+journey
+    title Your Banking App Development Journey
+    section SPA Fundamentals
+      Understand single-page apps: 3: Student
+      Learn template concepts: 4: Student
+      Master DOM manipulation: 4: Student
+    section Routing Systems
+      Implement client-side routing: 4: Student
+      Handle browser history: 5: Student
+      Create navigation systems: 5: Student
+    section Professional Patterns
+      Build modular architecture: 5: Student
+      Apply best practices: 5: Student
+      Create user experiences: 5: Student
+```
+
+Noong ginabayan ng Apollo 11 ang computer nito papunta sa buwan noong 1969, kailangan nitong magpalit-palit ng iba't ibang programa nang hindi nire-restart ang buong sistema. Ganito rin ang modernong web applications – binabago ang nakikita mo nang hindi nire-reload ang lahat mula sa simula. Ito ang nagbibigay ng smooth at responsive na karanasan na inaasahan ng mga user ngayon.
 
-Hindi tulad ng tradisyunal na mga website na nire-reload ang buong pahina sa bawat interaksyon, ang mga modernong web app ay ina-update lamang ang mga bahagi na kailangang baguhin. Ang ganitong paraan, katulad ng kung paano nagpalit-palit ang mission control ng iba't ibang display habang pinapanatili ang tuloy-tuloy na komunikasyon, ang nagbibigay ng fluid na karanasan na inaasahan natin.
+Hindi tulad ng tradisyunal na mga website na nire-reload ang buong pahina sa bawat interaksyon, ang modernong web apps ay ina-update lamang ang mga bahagi na kailangang baguhin. Ang ganitong paraan, katulad ng kung paano nagbabago ang mga display sa mission control habang patuloy ang komunikasyon, ang nagbibigay ng fluid na karanasan na inaasahan natin.
 
 Narito ang mga dahilan kung bakit napakalaki ng pagkakaiba:
 
 | Tradisyunal na Multi-Page Apps | Modernong Single-Page Apps |
 |----------------------------|-------------------------|
-| **Pag-navigate** | Buong page reload sa bawat screen | Instant na pagpapalit ng content |
+| **Navigation** | Buong page reload sa bawat screen | Instant na pagpapalit ng content |
 | **Performance** | Mas mabagal dahil sa kumpletong pag-download ng HTML | Mas mabilis gamit ang partial updates |
-| **User Experience** | Biglaang pag-flash ng pahina | Makinis, parang app na transitions |
-| **Pagbabahagi ng Data** | Mahirap sa pagitan ng mga pahina | Madaling state management |
-| **Pag-develop** | Maraming HTML files na kailangang i-maintain | Isang HTML na may dynamic templates |
+| **User Experience** | Biglaang pag-flash ng page | Smooth, parang app na transitions |
+| **Data Sharing** | Mahirap sa pagitan ng mga pahina | Madaling state management |
+| **Development** | Maraming HTML files na kailangang i-maintain | Isang HTML na may dynamic templates |
 
 **Pag-unawa sa ebolusyon:**
-- **Tradisyunal na apps** ay nangangailangan ng server requests para sa bawat navigation action
-- **Modernong SPAs** ay naglo-load nang isang beses at ina-update ang content dynamically gamit ang JavaScript
-- **Inaasahan ng mga gumagamit** ngayon ang instant at seamless na interaksyon
-- **Mga benepisyo sa performance** kabilang ang mas mababang bandwidth at mas mabilis na tugon
+- **Tradisyunal na apps** nangangailangan ng server requests sa bawat navigation action
+- **Modernong SPAs** isang beses lang mag-load at ina-update ang content dynamically gamit ang JavaScript
+- **User expectations** mas gusto ang instant at seamless na interaksyon
+- **Performance benefits** mas kaunting bandwidth at mas mabilis na response
 
-Sa leksyong ito, gagawa tayo ng banking app na may maraming screen na tuloy-tuloy ang daloy. Katulad ng kung paano ginagamit ng mga siyentipiko ang modular na mga instrumento na maaaring i-reconfigure para sa iba't ibang eksperimento, gagamit tayo ng HTML templates bilang reusable components na maaaring ipakita kung kinakailangan.
+Sa leksyong ito, gagawa tayo ng banking app na may maraming screen na seamless ang daloy. Katulad ng mga siyentipiko na gumagamit ng modular na instrumento na maaaring i-reconfigure para sa iba't ibang eksperimento, gagamit tayo ng HTML templates bilang reusable components na maaaring ipakita kung kinakailangan.
 
-Magagamit mo ang HTML templates (mga reusable na blueprint para sa iba't ibang screen), JavaScript routing (ang sistema na nagpapalit-palit ng mga screen), at ang browser's history API (na nagpapanatili ng tamang paggana ng back button). Ang mga ito ay parehong mga pangunahing teknik na ginagamit ng mga framework tulad ng React, Vue, at Angular.
+Magtratrabaho ka gamit ang HTML templates (mga reusable na blueprint para sa iba't ibang screen), JavaScript routing (ang sistema na nagpapalit-palit ng screen), at ang browser's history API (na nagpapanatili ng functionality ng back button). Ang mga ito ay parehong fundamental techniques na ginagamit ng mga framework tulad ng React, Vue, at Angular.
 
 Sa dulo, magkakaroon ka ng gumaganang banking app na nagpapakita ng mga prinsipyo ng propesyonal na single-page application.
 
+```mermaid
+mindmap
+  root((Single-Page Applications))
+    Architecture
+      Template System
+      Client-side Routing
+      State Management
+      Event Handling
+    Templates
+      Reusable Components
+      Dynamic Content
+      DOM Manipulation
+      Content Switching
+    Routing
+      URL Management
+      History API
+      Navigation Logic
+      Browser Integration
+    User Experience
+      Fast Navigation
+      Smooth Transitions
+      Consistent State
+      Modern Interactions
+    Performance
+      Reduced Server Requests
+      Faster Page Transitions
+      Efficient Resource Usage
+      Better Responsiveness
+```
+
 ## Pre-Lecture Quiz
 
 [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/41)
 
 ### Mga Kailangan Mo
 
-Kakailanganin natin ng lokal na web server para i-test ang ating banking app – huwag mag-alala, madali lang ito! Kung wala ka pang naka-set up, mag-install lang ng [Node.js](https://nodejs.org) at i-run ang `npx lite-server` mula sa iyong project folder. Ang handy na command na ito ay magpapagana ng lokal na server at awtomatikong bubuksan ang iyong app sa browser.
+Kailangan natin ng lokal na web server para ma-test ang banking app natin – huwag mag-alala, madali lang ito! Kung wala ka pang naka-set up, mag-install lang ng [Node.js](https://nodejs.org) at i-run ang `npx lite-server` mula sa project folder mo. Ang handy na command na ito ay magbubukas ng lokal na server at awtomatikong bubuksan ang app mo sa browser.
 
 ### Paghahanda
 
-Sa iyong computer, gumawa ng folder na pinangalanang `bank` na may file na pinangalanang `index.html` sa loob nito. Magsisimula tayo mula sa HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code):
+Sa iyong computer, gumawa ng folder na pinangalanang `bank` na may file na `index.html` sa loob nito. Magsisimula tayo mula sa HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code):
 
 ```html
 <!DOCTYPE html>
@@ -63,14 +110,14 @@ Sa iyong computer, gumawa ng folder na pinangalanang `bank` na may file na pinan
 
 **Narito ang ibinibigay ng boilerplate na ito:**
 - **Itinatag** ang HTML5 document structure na may tamang DOCTYPE declaration
-- **Kinonfigura** ang character encoding bilang UTF-8 para sa suporta sa international text
+- **Kinonfigure** ang character encoding bilang UTF-8 para sa international text support
 - **Pinagana** ang responsive design gamit ang viewport meta tag para sa mobile compatibility
 - **Nag-set** ng descriptive title na lumalabas sa browser tab
-- **Gumawa** ng malinis na body section kung saan natin itatayo ang ating application
+- **Gumawa** ng malinis na body section kung saan natin itatayo ang application
 
 > 📁 **Preview ng Project Structure**
 > 
-> **Sa dulo ng leksyong ito, ang iyong proyekto ay magkakaroon ng:**
+> **Sa dulo ng leksyon na ito, ang iyong proyekto ay magkakaroon ng:**
 > ```
 > bank/
 > ├── index.html      <!-- Main HTML with templates -->
@@ -87,20 +134,38 @@ Sa iyong computer, gumawa ng folder na pinangalanang `bank` na may file na pinan
 
 ## HTML Templates
 
-Ang templates ay nagso-solve ng pangunahing problema sa web development. Noong naimbento ni Gutenberg ang movable type printing noong 1440s, napagtanto niya na sa halip na mag-ukit ng buong pahina, maaari siyang gumawa ng reusable na mga letra at ayusin ang mga ito kung kinakailangan. Ang HTML templates ay gumagana sa parehong prinsipyo – sa halip na gumawa ng magkakahiwalay na HTML files para sa bawat screen, magde-define ka ng reusable na mga istruktura na maaaring ipakita kung kinakailangan.
+Ang templates ay nagso-solve ng fundamental na problema sa web development. Noong naimbento ni Gutenberg ang movable type printing noong 1440s, napagtanto niya na sa halip na mag-ukit ng buong pahina, maaari siyang gumawa ng reusable na mga letra at ayusin ang mga ito kung kinakailangan. Ang HTML templates ay gumagana sa parehong prinsipyo – sa halip na gumawa ng magkakahiwalay na HTML files para sa bawat screen, magde-define ka ng reusable na mga istruktura na maaaring ipakita kung kinakailangan.
+
+```mermaid
+flowchart TD
+    A["📋 Template Definition"] --> B["💬 Hidden in DOM"]
+    B --> C["🔍 JavaScript Finds Template"]
+    C --> D["📋 Clone Template Content"]
+    D --> E["🔗 Attach to Visible DOM"]
+    E --> F["👁️ User Sees Content"]
+    
+    G["Login Template"] --> A
+    H["Dashboard Template"] --> A
+    I["Future Templates"] --> A
+    
+    style A fill:#e3f2fd
+    style D fill:#e8f5e8
+    style F fill:#fff3e0
+    style B fill:#f3e5f5
+```
 
-Isipin ang templates bilang mga blueprint para sa iba't ibang bahagi ng iyong app. Katulad ng isang arkitekto na gumagawa ng isang blueprint at ginagamit ito nang maraming beses sa halip na muling iguhit ang magkaparehong mga kwarto, gagawa tayo ng templates nang isang beses at gagamitin ito kung kinakailangan. Itinatago ng browser ang mga templates na ito hanggang sa i-activate ng JavaScript.
+Isipin ang templates bilang blueprint para sa iba't ibang bahagi ng iyong app. Katulad ng isang arkitekto na gumagawa ng isang blueprint at ginagamit ito nang maraming beses sa halip na muling iguhit ang magkaparehong mga kwarto, gumagawa tayo ng templates nang isang beses at ini-instantiate ang mga ito kung kinakailangan. Itinatago ng browser ang mga templates na ito hanggang sa i-activate ito ng JavaScript.
 
-Kung gusto mong gumawa ng maraming screen para sa isang web page, isang solusyon ay gumawa ng isang HTML file para sa bawat screen na gusto mong ipakita. Gayunpaman, ang solusyong ito ay may ilang abala:
+Kung gusto mong gumawa ng maraming screen para sa isang web page, isang solusyon ay gumawa ng isang HTML file para sa bawat screen na gusto mong ipakita. Gayunpaman, ang solusyon na ito ay may ilang abala:
 
 - Kailangan mong i-reload ang buong HTML kapag nagpapalit ng screen, na maaaring mabagal.
-- Mahirap magbahagi ng data sa pagitan ng iba't ibang screen.
+- Mahirap mag-share ng data sa pagitan ng iba't ibang screen.
 
 Ang isa pang paraan ay magkaroon lamang ng isang HTML file, at mag-define ng maraming [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) gamit ang `<template>` element. Ang template ay isang reusable na HTML block na hindi ipinapakita ng browser, at kailangang i-instantiate sa runtime gamit ang JavaScript.
 
-### Gawin Natin Ito
+### Gawin Natin
 
-Gagawa tayo ng bank app na may dalawang pangunahing screen: isang login page at isang dashboard. Una, magdagdag tayo ng placeholder element sa ating HTML body – dito lalabas ang lahat ng ating iba't ibang screen:
+Gagawa tayo ng bank app na may dalawang pangunahing screen: isang login page at isang dashboard. Una, magdagdag tayo ng placeholder element sa HTML body natin – dito lalabas ang lahat ng iba't ibang screen natin:
 
 ```html
 <div id="app">Loading...</div>
@@ -109,10 +174,10 @@ Gagawa tayo ng bank app na may dalawang pangunahing screen: isang login page at
 **Pag-unawa sa placeholder na ito:**
 - **Gumagawa** ng container na may ID na "app" kung saan ipapakita ang lahat ng screen
 - **Nagpapakita** ng loading message hanggang sa ma-initialize ng JavaScript ang unang screen
-- **Nagbibigay** ng isang mounting point para sa ating dynamic content
-- **Nagpapadali** sa pag-target mula sa JavaScript gamit ang `document.getElementById()`
+- **Nagbibigay** ng isang mounting point para sa dynamic content natin
+- **Nagpapadali** ng targeting mula sa JavaScript gamit ang `document.getElementById()`
 
-> 💡 **Pro Tip**: Dahil ang content ng element na ito ay papalitan, maaari tayong maglagay ng loading message o indicator na ipapakita habang naglo-load ang app.
+> 💡 **Pro Tip**: Dahil ang content ng element na ito ay mapapalitan, maaari tayong maglagay ng loading message o indicator na ipapakita habang naglo-load ang app.
 
 Susunod, magdagdag tayo ng HTML template para sa login page. Sa ngayon, maglalagay lang tayo ng title at isang section na naglalaman ng link na gagamitin natin para sa navigation.
 
@@ -134,8 +199,8 @@ Susunod, magdagdag tayo ng HTML template para sa login page. Sa ngayon, maglalag
 Pagkatapos, magdagdag tayo ng isa pang HTML template para sa dashboard page. Ang page na ito ay maglalaman ng iba't ibang section:
 
 - Isang header na may title at logout link
-- Ang kasalukuyang balanse ng bank account
-- Isang listahan ng mga transaksyon, na ipinapakita sa isang table
+- Ang kasalukuyang balance ng bank account
+- Isang listahan ng mga transactions, na ipinapakita sa isang table
 
 ```html
 <template id="dashboard">
@@ -164,30 +229,46 @@ Pagkatapos, magdagdag tayo ng isa pang HTML template para sa dashboard page. Ang
 
 **Pag-unawa sa bawat bahagi ng dashboard:**
 - **Istruktura** ang page gamit ang semantic `<header>` element na naglalaman ng navigation
-- **Ipinapakita** ang app title nang consistent sa mga screen para sa branding
+- **Ipinapakita** ang app title nang consistent sa bawat screen para sa branding
 - **Nagbibigay** ng logout link na magro-route pabalik sa login screen
-- **Ipinapakita** ang kasalukuyang account balance sa isang dedikadong section
-- **Inaayos** ang transaction data gamit ang maayos na istrukturang HTML table
+- **Ipinapakita** ang kasalukuyang account balance sa isang dedicated section
+- **Inaayos** ang transaction data gamit ang maayos na structured na HTML table
 - **Nagde-define** ng table headers para sa Date, Object, at Amount columns
 - **Iniiwan** ang table body na walang laman para sa dynamic content injection sa hinaharap
 
 > 💡 **Pro Tip**: Kapag gumagawa ng HTML templates, kung gusto mong makita kung ano ang magiging hitsura nito, maaari mong i-comment out ang `<template>` at `</template>` lines sa pamamagitan ng pag-enclose sa kanila gamit ang `<!-- -->`.
 
+### 🔄 **Pag-check ng Pedagogy**
+**Pag-unawa sa Template System**: Bago mag-implement ng JavaScript, siguraduhing nauunawaan mo:
+- ✅ Paano naiiba ang templates sa regular na HTML elements
+- ✅ Bakit nananatiling nakatago ang templates hanggang sa i-activate ng JavaScript
+- ✅ Ang kahalagahan ng semantic HTML structure sa templates
+- ✅ Paano nagbibigay-daan ang templates sa reusable na UI components
+
+**Quick Self-Test**: Ano ang mangyayari kung aalisin mo ang `<template>` tags sa paligid ng iyong HTML?
+*Sagot: Ang content ay magiging visible agad at mawawala ang functionality ng template*
+
+**Mga Benepisyo ng Arkitektura**: Ang templates ay nagbibigay ng:
+- **Reusability**: Isang definition, maraming instances
+- **Performance**: Walang redundant na HTML parsing
+- **Maintainability**: Centralized na UI structure
+- **Flexibility**: Dynamic na pagpapalit ng content
+
 ✅ Bakit sa tingin mo ginagamit natin ang `id` attributes sa templates? Maaari ba tayong gumamit ng iba tulad ng classes?
 
 ## Pagbibigay-buhay sa Templates gamit ang JavaScript
 
-Ngayon kailangan nating gawing functional ang ating templates. Katulad ng kung paano ang isang 3D printer ay kumukuha ng digital blueprint at gumagawa ng physical object, ang JavaScript ay kumukuha ng ating hidden templates at gumagawa ng visible, interactive elements na maaaring makita at magamit ng mga user.
+Ngayon kailangan nating gawing functional ang templates natin. Katulad ng kung paano ang isang 3D printer ay kumukuha ng digital blueprint at gumagawa ng physical object, ang JavaScript ay kumukuha ng nakatagong templates at gumagawa ng visible, interactive na elements na makikita at magagamit ng mga user.
 
 Ang proseso ay sumusunod sa tatlong consistent na hakbang na bumubuo sa pundasyon ng modernong web development. Kapag naintindihan mo ang pattern na ito, makikilala mo ito sa maraming frameworks at libraries.
 
-Kung susubukan mo ang kasalukuyang HTML file sa browser, makikita mong natigil ito sa pagpapakita ng `Loading...`. Ito ay dahil kailangan nating magdagdag ng JavaScript code para i-instantiate at ipakita ang HTML templates.
+Kung susubukan mo ang kasalukuyang HTML file mo sa browser, makikita mong natigil ito sa pagpapakita ng `Loading...`. Ito ay dahil kailangan nating magdagdag ng JavaScript code para i-instantiate at ipakita ang HTML templates.
 
 Ang pag-instantiate ng template ay karaniwang ginagawa sa 3 hakbang:
 
 1. Kunin ang template element sa DOM, halimbawa gamit ang [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
 2. I-clone ang template element, gamit ang [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
-3. I-attach ito sa DOM sa ilalim ng visible element, halimbawa gamit ang [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
+3. I-attach ito sa DOM sa ilalim ng visible na element, halimbawa gamit ang [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
 
 ```mermaid
 flowchart TD
@@ -206,25 +287,25 @@ flowchart TD
     style D fill:#fff3e0
 ```
 
-**Visual breakdown ng proseso:**
-- **Hakbang 1** hinahanap ang hidden template sa DOM structure
+**Visual na breakdown ng proseso:**
+- **Hakbang 1** hinahanap ang nakatagong template sa DOM structure
 - **Hakbang 2** gumagawa ng working copy na maaaring ligtas na ma-modify
-- **Hakbang 3** ini-insert ang copy sa visible page area
-- **Resulta** ay isang functional screen na maaaring i-interact ng mga user
+- **Hakbang 3** ini-insert ang copy sa visible na bahagi ng page
+- **Resulta** ay isang functional na screen na maaaring i-interact ng mga user
 
-✅ Bakit kailangan nating i-clone ang template bago i-attach ito sa DOM? Ano sa tingin mo ang mangyayari kung hindi natin gagawin ang hakbang na ito?
+✅ Bakit kailangan nating i-clone ang template bago i-attach ito sa DOM? Ano sa tingin mo ang mangyayari kung laktawan natin ang hakbang na ito?
 
 ### Gawain
 
-Gumawa ng bagong file na pinangalanang `app.js` sa iyong project folder at i-import ang file na iyon sa `<head>` section ng iyong HTML:
+Gumawa ng bagong file na pinangalanang `app.js` sa project folder mo at i-import ang file na iyon sa `<head>` section ng iyong HTML:
 
 ```html
 <script src="app.js" defer></script>
 ```
 
 **Pag-unawa sa script import na ito:**
-- **Nagli-link** ng JavaScript file sa ating HTML document
-- **Gumagamit** ng `defer` attribute para matiyak na ang script ay tatakbo pagkatapos ma-parse ang HTML
+- **Nagli-link** ng JavaScript file sa HTML document natin
+- **Gumagamit** ng `defer` attribute para masigurong ang script ay tatakbo pagkatapos ma-parse ang HTML
 - **Nagbibigay** ng access sa lahat ng DOM elements dahil fully loaded na ang mga ito bago mag-execute ang script
 - **Sumusunod** sa modernong best practices para sa script loading at performance
 
@@ -242,10 +323,10 @@ function updateRoute(templateId) {
 
 **Hakbang-hakbang, narito ang nangyayari:**
 - **Hinahanap** ang template element gamit ang unique ID nito
-- **Gumagawa** ng deep copy ng template's content gamit ang `cloneNode(true)`
+- **Gumagawa** ng deep copy ng content ng template gamit ang `cloneNode(true)`
 - **Hinahanap** ang app container kung saan ipapakita ang content
 - **Nililinis** ang anumang existing content mula sa app container
-- **Ini-insert** ang cloned template content sa visible DOM
+- **Ini-insert** ang cloned template content sa visible na DOM
 
 Ngayon tawagin ang function na ito gamit ang isa sa mga template at tingnan ang resulta.
 
@@ -253,18 +334,35 @@ Ngayon tawagin ang function na ito gamit ang isa sa mga template at tingnan ang
 updateRoute('login');
 ```
 
-**Ano ang nagagawa ng function call na ito:**
-- **Ina-activate** ang login template sa pamamagitan ng pag-pass ng ID nito bilang parameter
-- **Ipinapakita** kung paano programmatically magpalit-palit sa iba't ibang app screens
+**Ano ang na-accomplish ng function call na ito:**
+- **Ina-activate** ang login template sa pamamagitan ng pagpasa ng ID nito bilang parameter
+- **Ipinapakita** kung paano programmatically magpalit-palit ng iba't ibang screen ng app
 - **Ipinapakita** ang login screen kapalit ng "Loading..." message
 
 ✅ Ano ang layunin ng code na ito `app.innerHTML = '';`? Ano ang mangyayari kung wala ito?
 
 ## Paglikha ng Routes
 
-Ang routing ay tungkol sa pag-uugnay ng mga URL sa tamang content. Isipin kung paano ang mga unang telephone operators ay gumagamit ng switchboards para i-connect ang mga tawag – kinukuha nila ang incoming request at niruruta ito sa tamang destinasyon. Ang web routing ay gumagana sa parehong paraan, kinukuha ang URL request at tinutukoy kung aling content ang ipapakita.
+Ang routing ay tungkol sa pag-uugnay ng URLs sa tamang content. Isipin kung paano ginagamit ng mga operator ng telepono noong araw ang switchboards para i-connect ang mga tawag – kinukuha nila ang incoming request at iniuugnay ito sa tamang destinasyon. Ganito rin ang web routing, kinukuha ang URL request at tinutukoy kung aling content ang ipapakita.
 
-Tradisyunal na hinahandle ito ng web servers sa pamamagitan ng pag-serve ng iba't ibang HTML files para sa iba't ibang URL. Dahil gumagawa tayo ng single-page app, kailangan nating i-handle ang routing gamit ang JavaScript. Ang ganitong paraan ay nagbibigay sa atin ng mas malaking kontrol sa user experience at performance.
+```mermaid
+flowchart LR
+    A["🌐 URL Path<br/>/dashboard"] --> B["🗺️ Routes Object<br/>Lookup"]
+    B --> C["🎯 Template ID<br/>'dashboard'"]
+    C --> D["📌 Find Template<br/>getElementById"]
+    D --> E["👁️ Display Screen<br/>Clone & Append"]
+    
+    F["📍 /login"] --> G["🎯 'login'"]
+    H["📍 /unknown"] --> I["❌ Not Found"]
+    I --> J["🔄 Redirect to /login"]
+    
+    style B fill:#e3f2fd
+    style E fill:#e8f5e8
+    style I fill:#ffebee
+    style J fill:#fff3e0
+```
+
+Tradisyunal na hinahandle ito ng web servers sa pamamagitan ng pag-serve ng iba't ibang HTML files para sa iba't ibang URLs. Dahil gumagawa tayo ng single-page app, kailangan nating i-handle ang routing na ito gamit ang JavaScript. Ang ganitong paraan ay nagbibigay sa atin ng mas malaking kontrol sa user experience at performance.
 
 ```mermaid
 flowchart LR
@@ -284,12 +382,12 @@ flowchart LR
 ```
 
 **Pag-unawa sa routing flow:**
-- **Pagbabago ng URL** ay nagti-trigger ng lookup sa ating routes configuration
-- **Valid routes** ay nagma-map sa specific template IDs para sa rendering
-- **Invalid routes** ay nagti-trigger ng fallback behavior para maiwasan ang broken states
-- **Template rendering** ay sumusunod sa three-step process na natutunan natin
+- **Pagbabago ng URL** nagti-trigger ng lookup sa routes configuration natin
+- **Valid na routes** nagma-map sa specific template IDs para sa rendering
+- **Invalid na routes** nagti-trigger ng fallback behavior para maiwasan ang broken states
+- **Template rendering** sumusunod sa three-step process na natutunan natin
 
-Kapag pinag-uusapan ang web app, tinatawag natin ang *Routing* bilang intensyon na i-map ang **URLs** sa specific screens na dapat ipakita. Sa isang website na may maraming HTML files, ito ay awtomatikong ginagawa dahil ang file paths ay reflected sa URL. Halimbawa, gamit ang mga file na ito sa iyong project folder:
+Kapag pinag-uusapan ang web app, tinatawag natin itong *Routing* na intensyon na i-map ang **URLs** sa specific screens na dapat ipakita. Sa isang website na may maraming HTML files, ito ay awtomatikong ginagawa dahil ang file paths ay reflected sa URL. Halimbawa, gamit ang mga file na ito sa project folder mo:
 
 ```
 mywebsite/index.html
@@ -305,11 +403,11 @@ https://site.com/login.html --> mywebsite/login.html
 https://site.com/admin/     --> mywebsite/admin/index.html
 ```
 
-Gayunpaman, para sa ating web app gumagamit tayo ng isang HTML file na naglalaman ng lahat ng screen kaya ang default behavior na ito ay hindi makakatulong sa atin. Kailangan nating manu-manong gawin ang map na ito at i-update ang displayed template gamit ang JavaScript.
+Gayunpaman, para sa web app natin na gumagamit ng isang HTML file na naglalaman ng lahat ng screen, ang default behavior na ito ay hindi makakatulong. Kailangan nating manu-manong gawin ang map na ito at i-update ang displayed template gamit ang JavaScript.
 
 ### Gawain
 
-Gagamit tayo ng simpleng object para mag-implement ng [map](https://en.wikipedia.org/wiki/Associative_array) sa pagitan ng URL paths at ng ating templates. Idagdag ang object na ito sa itaas ng iyong `app.js` file.
+Gagamit tayo ng simpleng object para mag-implement ng [map](https://en.wikipedia.org/wiki/Associative_array) sa pagitan ng URL paths at ng templates natin. Idagdag ang object na ito sa itaas ng `app.js` file mo.
 
 ```js
 const routes = {
@@ -321,10 +419,9 @@ const routes = {
 **Pag-unawa sa routes configuration na ito:**
 - **Nagde-define** ng mapping sa pagitan ng URL paths at template identifiers
 - **Gumagamit** ng object syntax kung saan ang keys ay URL paths at ang values ay naglalaman ng template information
-- **Nagbibigay** ng madaling lookup kung aling template ang ipapakita para sa anumang URL
-- **Nagbibigay** ng scalable structure para sa pagdagdag ng bagong routes sa hinaharap
-
-Ngayon i-modify natin nang kaunti ang `updateRoute` function. Sa halip na direktang i-pass ang `templateId` bilang argument, gusto nating kunin ito sa pamamagitan ng pagtingin muna sa kasalukuyang URL, at pagkatapos ay gamitin ang ating map para makuha ang corresponding template ID value. Maaari nating gamitin ang [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) para makuha lamang ang path section mula sa URL.
+- **Nagbibigay-daan** sa madaling lookup kung aling template ang ipapakita para sa anumang URL
+- **Nagbibigay** ng scalable na structure para sa pagdagdag ng bagong routes sa hinaharap
+Ngayon, babaguhin natin nang kaunti ang `updateRoute` function. Sa halip na direktang ipasa ang `templateId` bilang argumento, gusto nating kunin ito sa pamamagitan ng pagtingin muna sa kasalukuyang URL, at pagkatapos ay gamitin ang ating mapa upang makuha ang kaukulang halaga ng template ID. Maaari nating gamitin ang [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) upang makuha lamang ang bahagi ng path mula sa URL.
 
 ```js
 function updateRoute() {
@@ -339,50 +436,101 @@ function updateRoute() {
 }
 ```
 
-**Pag-unawa sa nangyayari dito:**
-- **Kinukuha** ang kasalukuyang path mula sa browser's URL gamit ang `window.location.pathname`
-- **Hinahanap** ang corresponding route configuration sa ating routes object
+**Pagpapaliwanag sa nangyayari dito:**
+- **Kinukuha** ang kasalukuyang path mula sa URL ng browser gamit ang `window.location.pathname`
+- **Hinahanap** ang kaukulang route configuration sa ating routes object
 - **Kinukuha** ang template ID mula sa route configuration
-- **Sumusunod** sa parehong template rendering process tulad ng dati
-- **Gumagawa** ng dynamic system na tumutugon sa URL changes
+- **Sinusundan** ang parehong proseso ng template rendering tulad ng dati
+- **Lumilikha** ng dynamic na sistema na tumutugon sa mga pagbabago sa URL
 
-Dito natin na-map ang routes na dineklara sa corresponding template. Maaari mong subukan kung gumagana ito nang tama sa pamamagitan ng manual na pagbabago ng URL sa iyong browser.
-✅ Ano ang mangyayari kung maglagay ka ng hindi kilalang path sa URL? Paano natin ito masosolusyonan?
+Dito, inugnay natin ang mga routes na idineklara sa kaukulang template. Maaari mong subukan kung gumagana ito nang tama sa pamamagitan ng manu-manong pagbabago ng URL sa iyong browser.
+
+✅ Ano ang mangyayari kung maglagay ka ng hindi kilalang path sa URL? Paano natin ito masosolusyunan?
 
 ## Pagdaragdag ng Navigation
 
-Kapag naitakda na ang routing, kailangan ng mga user ng paraan para mag-navigate sa app. Sa tradisyunal na mga website, nagre-reload ang buong pahina kapag nagki-click sa mga link, ngunit nais nating i-update ang URL at ang nilalaman nang hindi nagre-reload ng pahina. Nagbibigay ito ng mas maayos na karanasan na katulad ng kung paano nagbabago ang mga desktop application sa iba't ibang view.
+Sa pagkakaroon ng routing, kailangan ng mga user ng paraan upang makapag-navigate sa app. Ang mga tradisyunal na website ay nagre-reload ng buong pahina kapag nagki-click ng mga link, ngunit gusto nating i-update ang URL at ang nilalaman nang hindi nire-reload ang pahina. Nagbibigay ito ng mas maayos na karanasan na katulad ng kung paano nagbabago ang mga view sa desktop applications.
 
-Kailangan nating i-coordinate ang dalawang bagay: ang pag-update ng URL ng browser upang ma-bookmark ng mga user ang mga pahina at maibahagi ang mga link, at ang pagpapakita ng tamang nilalaman. Kapag naipatupad nang tama, nagkakaroon ng seamless navigation na inaasahan ng mga user mula sa mga modernong application.
+Kailangan nating i-coordinate ang dalawang bagay: ang pag-update ng URL ng browser upang ma-bookmark ng mga user ang mga pahina at maibahagi ang mga link, at ang pagpapakita ng tamang nilalaman. Kapag na-implement nang tama, lumilikha ito ng seamless navigation na inaasahan ng mga user mula sa modernong applications.
 
-> 🏗️ **Insight sa Arkitektura**: Mga Komponent ng Navigation System  
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant App
+    participant Template
+    
+    User->>Browser: Clicks "Login" link
+    Browser->>App: onclick event triggered
+    App->>App: preventDefault() & navigate('/dashboard')
+    App->>Browser: history.pushState('/dashboard')
+    Browser->>Browser: URL updates to /dashboard
+    App->>App: updateRoute() called
+    App->>Template: Find & clone dashboard template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display dashboard screen
+    
+    Note over User,Template: User clicks browser back button
+    
+    User->>Browser: Clicks back button
+    Browser->>Browser: History moves back to /login
+    Browser->>App: popstate event fired
+    App->>App: updateRoute() called automatically
+    App->>Template: Find & clone login template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display login screen
+```
+
+### 🔄 **Pedagogical Check-in**
+**Single-Page Application Architecture**: Suriin ang iyong pag-unawa sa buong sistema:
+- ✅ Paano naiiba ang client-side routing sa tradisyunal na server-side routing?
+- ✅ Bakit mahalaga ang History API para sa tamang SPA navigation?
+- ✅ Paano nakakatulong ang templates sa dynamic na nilalaman nang walang page reloads?
+- ✅ Ano ang papel ng event handling sa pag-intercept ng navigation?
+
+**System Integration**: Ang iyong SPA ay nagpapakita ng:
+- **Template Management**: Reusable UI components na may dynamic na nilalaman
+- **Client-side Routing**: Pamamahala ng URL nang walang server requests
+- **Event-driven Architecture**: Responsive na navigation at user interactions
+- **Browser Integration**: Tamang history at suporta sa back/forward button
+- **Performance Optimization**: Mabilis na transitions at nabawasang server load
+
+**Professional Patterns**: Na-implement mo ang:
+- **Model-View Separation**: Templates na hiwalay sa application logic
+- **State Management**: URL state na synchronized sa ipinapakitang nilalaman
+- **Progressive Enhancement**: JavaScript na nagpapahusay sa basic HTML functionality
+- **User Experience**: Maayos, app-like navigation nang walang page refreshes
+
+> � **Architecture Insight**: Mga Komponent ng Navigation System
 >
-> **Ano ang iyong binubuo:**  
-> - **🔄 Pamamahala ng URL**: Ina-update ang address bar ng browser nang hindi nagre-reload ng pahina  
-> - **📋 Template System**: Dinamiko na nagpapalit ng nilalaman batay sa kasalukuyang ruta  
-> - **📚 History Integration**: Pinapanatili ang functionality ng back/forward button ng browser  
-> - **🛡️ Error Handling**: Maayos na fallback para sa mga invalid o nawawalang ruta  
+> **Ang iyong binubuo:**
+> - **🔄 Pamamahala ng URL**: Ina-update ang address bar ng browser nang walang page reloads
+> - **📋 Template System**: Nagpapalit ng nilalaman nang dynamic batay sa kasalukuyang route  
+> - **📚 History Integration**: Pinapanatili ang functionality ng back/forward button ng browser
+> - **🛡️ Error Handling**: Maayos na fallback para sa mga invalid o nawawalang routes
 >
-> **Paano nagtutulungan ang mga komponent:**  
-> - **Nakikinig** sa mga navigation event (clicks, pagbabago sa history)  
-> - **Ina-update** ang URL gamit ang History API  
-> - **Nagre-render** ng tamang template para sa bagong ruta  
-> - **Pinapanatili** ang seamless na karanasan ng user sa buong proseso  
+> **Paano nagtutulungan ang mga komponent:**
+> - **Nakikinig** sa mga navigation events (clicks, history changes)
+> - **Ina-update** ang URL gamit ang History API
+> - **Nagre-render** ng tamang template para sa bagong route
+> - **Pinapanatili** ang seamless user experience sa kabuuan
 
-Ang susunod na hakbang para sa ating app ay ang pagdaragdag ng kakayahang mag-navigate sa pagitan ng mga pahina nang hindi kailangang manu-manong baguhin ang URL. Nangangahulugan ito ng dalawang bagay:
+Ang susunod na hakbang para sa ating app ay ang pagdaragdag ng kakayahang mag-navigate sa pagitan ng mga pahina nang hindi manu-manong binabago ang URL. Nangangahulugan ito ng dalawang bagay:
 
-1. Pag-update ng kasalukuyang URL  
-2. Pag-update ng ipinapakitang template batay sa bagong URL  
+  1. Pag-update ng kasalukuyang URL
+  2. Pag-update ng ipinapakitang template batay sa bagong URL
 
 Naasikaso na natin ang pangalawang bahagi gamit ang `updateRoute` function, kaya kailangan nating alamin kung paano i-update ang kasalukuyang URL.
 
-Kailangan nating gumamit ng JavaScript, partikular ang [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) na nagbibigay-daan upang i-update ang URL at lumikha ng bagong entry sa browsing history, nang hindi nire-reload ang HTML.
+Kailangan nating gumamit ng JavaScript at partikular ang [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) na nagbibigay-daan upang i-update ang URL at lumikha ng bagong entry sa browsing history, nang hindi nire-reload ang HTML.
 
-> ⚠️ **Mahalagang Paalala**: Bagama't ang HTML anchor element [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) ay maaaring gamitin nang mag-isa upang lumikha ng mga hyperlink sa iba't ibang URL, magre-reload ito ng HTML nang default. Kailangang pigilan ang ganitong behavior kapag nagha-handle ng routing gamit ang custom na JavaScript, gamit ang `preventDefault()` function sa click event.
+> ⚠️ **Important Note**: Bagama't ang HTML anchor element [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) ay maaaring gamitin nang mag-isa upang lumikha ng hyperlinks sa iba't ibang URL, magre-reload ito ng HTML ng browser bilang default. Kinakailangang pigilan ang behavior na ito kapag humahawak ng routing gamit ang custom na JavaScript, gamit ang preventDefault() function sa click event.
 
-### Gawain
+### Task
 
-Gumawa tayo ng bagong function na magagamit natin para mag-navigate sa ating app:
+Gumawa tayo ng bagong function na magagamit natin upang mag-navigate sa ating app:
 
 ```js
 function navigate(path) {
@@ -390,16 +538,16 @@ function navigate(path) {
   updateRoute();
 }
 ```
-  
-**Pag-unawa sa navigation function na ito:**  
-- **Ina-update** ang URL ng browser sa bagong path gamit ang `history.pushState`  
-- **Nagdaragdag** ng bagong entry sa history stack ng browser para sa tamang suporta sa back/forward button  
-- **Nagti-trigger** ng `updateRoute()` function upang ipakita ang kaukulang template  
-- **Pinapanatili** ang single-page app experience nang walang page reload  
 
-Ang pamamaraang ito ay unang ina-update ang kasalukuyang URL batay sa ibinigay na path, pagkatapos ay ina-update ang template. Ang property na `window.location.origin` ay nagbabalik ng URL root, na nagbibigay-daan upang muling buuin ang kumpletong URL mula sa isang ibinigay na path.
+**Pag-unawa sa navigation function na ito:**
+- **Ina-update** ang URL ng browser sa bagong path gamit ang `history.pushState`
+- **Nagdaragdag** ng bagong entry sa history stack ng browser para sa tamang suporta sa back/forward button
+- **Nagti-trigger** ng `updateRoute()` function upang ipakita ang kaukulang template
+- **Pinapanatili** ang single-page app experience nang walang page reloads
+
+Ang pamamaraang ito ay unang ina-update ang kasalukuyang URL batay sa ibinigay na path, pagkatapos ay ina-update ang template. Ang property na `window.location.origin` ay nagbabalik ng URL root, na nagbibigay-daan sa atin na muling buuin ang kumpletong URL mula sa ibinigay na path.
 
-Ngayon na mayroon na tayong function na ito, maaari na nating asikasuhin ang problema kapag ang isang path ay hindi tumutugma sa anumang tinukoy na ruta. Babaguhin natin ang `updateRoute` function sa pamamagitan ng pagdaragdag ng fallback sa isa sa mga umiiral na ruta kung hindi tayo makahanap ng tugma.
+Ngayon na mayroon na tayong function na ito, maaari nating asikasuhin ang problema kapag ang isang path ay hindi tumutugma sa anumang naideklarang route. Babaguhin natin ang `updateRoute` function sa pamamagitan ng pagdaragdag ng fallback sa isa sa mga umiiral na route kung hindi tayo makahanap ng match.
 
 ```js
 function updateRoute() {
@@ -417,14 +565,14 @@ function updateRoute() {
   app.appendChild(view);
 }
 ```
-  
-**Mga mahalagang punto na dapat tandaan:**  
-- **Sinusuri** kung may ruta para sa kasalukuyang path  
-- **Nagre-redirect** sa login page kapag na-access ang invalid na ruta  
-- **Nagbibigay** ng fallback mechanism na pumipigil sa sirang navigation  
-- **Tinitiyak** na palaging makikita ng mga user ang valid na screen, kahit na may maling URL  
 
-Kung hindi mahanap ang ruta, ire-redirect na natin ngayon sa `login` page.
+**Mga mahalagang punto na dapat tandaan:**
+- **Sinusuri** kung mayroong route para sa kasalukuyang path
+- **Nagre-redirect** sa login page kapag na-access ang invalid route
+- **Nagbibigay** ng fallback mechanism na pumipigil sa sirang navigation
+- **Tinitiyak** na palaging makakakita ang mga user ng valid na screen, kahit na may maling URL
+
+Kung hindi mahanap ang isang route, ire-redirect na natin ngayon sa `login` page.
 
 Ngayon, gumawa tayo ng function upang makuha ang URL kapag na-click ang isang link, at upang pigilan ang default na behavior ng browser sa link:
 
@@ -434,36 +582,36 @@ function onLinkClick(event) {
   navigate(event.target.href);
 }
 ```
-  
-**Pag-unawa sa click handler na ito:**  
-- **Pinipigilan** ang default na behavior ng browser sa link gamit ang `preventDefault()`  
-- **Kinukuha** ang destination URL mula sa clicked link element  
-- **Tinatawag** ang custom navigate function sa halip na mag-reload ng pahina  
-- **Pinapanatili** ang maayos na single-page application experience  
+
+**Pagpapaliwanag sa click handler na ito:**
+- **Pinipigilan** ang default na behavior ng browser sa link gamit ang `preventDefault()`
+- **Kinukuha** ang destination URL mula sa clicked link element
+- **Tinatawag** ang custom navigate function sa halip na i-reload ang page
+- **Pinapanatili** ang maayos na single-page application experience
 
 ```html
 <a href="/dashboard" onclick="onLinkClick(event)">Login</a>
 ...
 <a href="/login" onclick="onLinkClick(event)">Logout</a>
 ```
-  
-**Ano ang nagagawa ng onclick binding na ito:**  
-- **Kinokonekta** ang bawat link sa custom navigation system  
-- **Ipinapasa** ang click event sa `onLinkClick` function para sa pagproseso  
-- **Nagbibigay-daan** sa maayos na navigation nang walang page reload  
-- **Pinapanatili** ang tamang URL structure na maaaring i-bookmark o i-share ng mga user  
 
-Ang [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) attribute ay nagbi-bind ng `click` event sa JavaScript code, dito ang tawag sa `navigate()` function.
+**Ano ang nagagawa ng onclick binding na ito:**
+- **Iniuugnay** ang bawat link sa ating custom navigation system
+- **Ipinapasa** ang click event sa ating `onLinkClick` function para sa processing
+- **Nagpapagana** ng maayos na navigation nang walang page reloads
+- **Pinapanatili** ang tamang URL structure na maaaring i-bookmark o i-share ng mga user
 
-Subukang i-click ang mga link na ito, dapat ay magagawa mo nang mag-navigate sa pagitan ng iba't ibang screen ng iyong app.
+Ang [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) attribute ay nag-uugnay sa `click` event sa JavaScript code, dito ang tawag sa `navigate()` function.
 
-✅ Ang `history.pushState` method ay bahagi ng HTML5 standard at naipatupad sa [lahat ng modernong browser](https://caniuse.com/?search=pushState). Kung gumagawa ka ng web app para sa mas lumang browser, may trick na magagamit sa halip na ang API na ito: gamit ang [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) bago ang path, maaari kang magpatupad ng routing na gumagana sa regular na anchor navigation at hindi nagre-reload ng pahina, dahil ang layunin nito ay lumikha ng internal links sa loob ng isang pahina.
+Subukang i-click ang mga link na ito, dapat ay magawa mo nang mag-navigate sa pagitan ng iba't ibang screen ng iyong app.
+
+✅ Ang `history.pushState` method ay bahagi ng HTML5 standard at na-implement sa [lahat ng modernong browser](https://caniuse.com/?search=pushState). Kung gumagawa ka ng web app para sa mas lumang browser, may trick na magagamit sa halip na API na ito: gamit ang [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) bago ang path, maaari kang mag-implement ng routing na gumagana sa regular na anchor navigation at hindi nagre-reload ng page, dahil ang layunin nito ay lumikha ng internal links sa loob ng isang page.
 
 ## Paggawa ng Back at Forward Buttons
 
-Ang back at forward buttons ay mahalaga sa web browsing, katulad ng kung paano maaaring suriin ng mga NASA mission controller ang mga nakaraang estado ng sistema sa mga space mission. Inaasahan ng mga user na gumagana ang mga button na ito, at kapag hindi, nasisira ang inaasahang browsing experience.
+Ang back at forward buttons ay mahalaga sa web browsing, tulad ng kung paano maaaring suriin ng mga NASA mission controllers ang mga nakaraang estado ng sistema sa mga space missions. Inaasahan ng mga user na gumagana ang mga button na ito, at kapag hindi, nasisira ang inaasahang browsing experience.
 
-Ang ating single-page app ay nangangailangan ng karagdagang configuration upang suportahan ito. Pinapanatili ng browser ang history stack (na idinadagdag natin gamit ang `history.pushState`), ngunit kapag nag-navigate ang mga user sa history na ito, kailangang tumugon ang ating app sa pamamagitan ng pag-update ng ipinapakitang nilalaman nang naaayon.
+Ang ating single-page app ay nangangailangan ng karagdagang configuration upang suportahan ito. Ang browser ay nag-maintain ng history stack (na idinadagdag natin gamit ang `history.pushState`), ngunit kapag nag-navigate ang mga user sa history na ito, kailangang tumugon ang ating app sa pamamagitan ng pag-update ng ipinapakitang nilalaman nang naaayon.
 
 ```mermaid
 sequenceDiagram
@@ -494,39 +642,39 @@ sequenceDiagram
     App->>Browser: Replace app content with template
     Browser->>User: Display login screen
 ```
-  
-**Mga mahalagang punto ng interaksyon:**  
-- **Mga aksyon ng user** ang nagti-trigger ng navigation sa pamamagitan ng clicks o browser buttons  
-- **Ina-intercept** ng app ang mga link click upang pigilan ang page reload  
-- **History API** ang namamahala sa mga pagbabago sa URL at history stack ng browser  
-- **Templates** ang nagbibigay ng content structure para sa bawat screen  
-- **Event listeners** ang tinitiyak na tumutugon ang app sa lahat ng uri ng navigation  
 
-Ang paggamit ng `history.pushState` ay lumilikha ng mga bagong entry sa navigation history ng browser. Maaari mong suriin ito sa pamamagitan ng pag-hold sa *back button* ng iyong browser, dapat itong magpakita ng ganito:
+**Mga mahalagang interaction points:**
+- **Mga aksyon ng user** ang nagti-trigger ng navigation sa pamamagitan ng clicks o browser buttons
+- **Ina-intercept ng app** ang mga link clicks upang pigilan ang page reloads
+- **History API** ang namamahala sa mga pagbabago sa URL at history stack ng browser
+- **Templates** ang nagbibigay ng content structure para sa bawat screen
+- **Event listeners** ang tinitiyak na tumutugon ang app sa lahat ng uri ng navigation
+
+Ang paggamit ng `history.pushState` ay lumilikha ng mga bagong entry sa navigation history ng browser. Maaari mong suriin iyon sa pamamagitan ng pag-hold sa *back button* ng iyong browser, dapat itong magpakita ng ganito:
 
 ![Screenshot ng navigation history](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.tl.png)
 
-Kung susubukan mong i-click ang back button nang ilang beses, makikita mo na nagbabago ang kasalukuyang URL at na-update ang history, ngunit ang parehong template ang patuloy na ipinapakita.
+Kung susubukan mong mag-click sa back button nang ilang beses, makikita mo na nagbabago ang kasalukuyang URL at na-update ang history, ngunit ang parehong template ang patuloy na ipinapakita.
 
-Ito ay dahil hindi alam ng application na kailangan nating tawagan ang `updateRoute()` tuwing nagbabago ang history. Kung titingnan mo ang [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), makikita mo na kapag nagbago ang state - ibig sabihin ay lumipat tayo sa ibang URL - ang [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event ay na-trigger. Gagamitin natin ito upang ayusin ang isyung iyon.
+Ito ay dahil hindi alam ng application na kailangan nating tawagan ang `updateRoute()` tuwing nagbabago ang history. Kung titingnan mo ang [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), makikita mo na kapag nagbago ang state - ibig sabihin, lumipat tayo sa ibang URL - ang [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event ay na-trigger. Gagamitin natin iyon upang ayusin ang isyung ito.
 
-### Gawain
+### Task
 
-Upang matiyak na ang ipinapakitang template ay na-update kapag nagbago ang history ng browser, mag-a-attach tayo ng bagong function na tumatawag sa `updateRoute()`. Gagawin natin ito sa ibaba ng ating `app.js` file:
+Upang matiyak na ang ipinapakitang template ay na-update kapag nagbago ang history ng browser, mag-a-attach tayo ng bagong function na tumatawag sa `updateRoute()`. Gagawin natin iyon sa ibaba ng ating `app.js` file:
 
 ```js
 window.onpopstate = () => updateRoute();
 updateRoute();
 ```
-  
-**Pag-unawa sa history integration na ito:**  
-- **Nakikinig** sa `popstate` events na nangyayari kapag nag-navigate ang mga user gamit ang browser buttons  
-- **Gumagamit** ng arrow function para sa concise na syntax ng event handler  
-- **Awtomatikong tumatawag** sa `updateRoute()` tuwing nagbabago ang history state  
-- **Ini-initialize** ang app sa pamamagitan ng pagtawag sa `updateRoute()` kapag unang nag-load ang pahina  
-- **Tinitiyak** na ang tamang template ang ipinapakita anuman ang paraan ng navigation ng mga user  
 
-> 💡 **Pro Tip**: Gumamit tayo ng [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) dito upang ideklara ang `popstate` event handler para sa conciseness, ngunit gagana rin ang regular na function.
+**Pag-unawa sa history integration na ito:**
+- **Nakikinig** sa `popstate` events na nangyayari kapag nag-navigate ang mga user gamit ang browser buttons
+- **Gumagamit** ng arrow function para sa concise na event handler syntax
+- **Awtomatikong tumatawag** sa `updateRoute()` tuwing nagbabago ang history state
+- **Ini-initialize** ang app sa pamamagitan ng pagtawag sa `updateRoute()` kapag unang nag-load ang page
+- **Tinitiyak** na ang tamang template ang ipinapakita anuman ang paraan ng navigation ng mga user
+
+> 💡 **Pro Tip**: Gumamit tayo ng [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) dito upang ideklara ang `popstate` event handler para sa conciseness, ngunit ang regular na function ay gagana rin nang pareho.
 
 Narito ang refresher video tungkol sa arrow functions:
 
@@ -534,29 +682,138 @@ Narito ang refresher video tungkol sa arrow functions:
 
 > 🎥 I-click ang imahe sa itaas para sa video tungkol sa arrow functions.
 
-Ngayon subukang gamitin ang back at forward buttons ng iyong browser, at suriin na ang ipinapakitang ruta ay tama nang na-update sa pagkakataong ito.
+Ngayon, subukang gamitin ang back at forward buttons ng iyong browser, at suriin na ang ipinapakitang route ay tama nang na-update sa pagkakataong ito.
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Subukan ang navigation ng iyong banking app gamit ang browser back/forward buttons
+- [ ] Subukang manu-manong mag-type ng iba't ibang URL sa address bar upang subukan ang routing
+- [ ] Buksan ang browser DevTools at suriin kung paano kinokopya ang templates sa DOM
+- [ ] Mag-eksperimento sa pagdaragdag ng console.log statements upang subaybayan ang routing flow
+
+### 🎯 **Ano ang Magagawa Mo sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at unawain ang mga konsepto ng SPA architecture
+- [ ] Magdagdag ng CSS styling upang gawing propesyonal ang mga template ng iyong banking app
+- [ ] I-implement ang 404 error page challenge na may tamang error handling
+- [ ] Lumikha ng credits page challenge na may karagdagang routing functionality
+- [ ] Magdagdag ng loading states at transitions sa pagitan ng mga template switches
+
+### 📅 **Ang Iyong Week-Long SPA Development Journey**
+- [ ] Kumpletuhin ang buong banking app na may forms, data management, at persistence
+- [ ] Magdagdag ng advanced routing features tulad ng route parameters at nested routes
+- [ ] I-implement ang navigation guards at authentication-based routing
+- [ ] Lumikha ng reusable template components at isang component library
+- [ ] Magdagdag ng animations at transitions para sa mas maayos na user experience
+- [ ] I-deploy ang iyong SPA sa isang hosting platform at i-configure nang tama ang routing
+
+### 🌟 **Ang Iyong Month-Long Frontend Architecture Mastery**
+- [ ] Bumuo ng mga complex SPAs gamit ang modern frameworks tulad ng React, Vue, o Angular
+- [ ] Matutunan ang advanced state management patterns at libraries
+- [ ] Masterin ang build tools at development workflows para sa SPA development
+- [ ] I-implement ang Progressive Web App features at offline functionality
+- [ ] Pag-aralan ang mga teknik sa performance optimization para sa malalaking SPAs
+- [ ] Mag-ambag sa mga open source SPA projects at ibahagi ang iyong kaalaman
+
+## 🎯 Ang Iyong Single-Page Application Mastery Timeline
+
+```mermaid
+timeline
+    title SPA Development & Modern Web Architecture Learning Progression
+    
+    section Foundation (20 minutes)
+        Template Systems: HTML template elements
+                        : DOM manipulation
+                        : Content cloning
+                        : Dynamic rendering
+        
+    section Routing Basics (30 minutes)
+        Client-side Navigation: URL management
+                              : History API
+                              : Route mapping
+                              : Event handling
+        
+    section User Experience (40 minutes)
+        Navigation Polish: Browser integration
+                         : Back button support
+                         : Error handling
+                         : Smooth transitions
+        
+    section Architecture Patterns (50 minutes)
+        Professional SPAs: Component systems
+                         : State management
+                         : Performance optimization
+                         : Error boundaries
+        
+    section Advanced Techniques (1 week)
+        Framework Integration: React Router
+                             : Vue Router
+                             : Angular Router
+                             : State libraries
+        
+    section Production Skills (1 month)
+        Enterprise Development: Build systems
+                              : Testing strategies
+                              : Deployment pipelines
+                              : Performance monitoring
+```
+
+### 🛠️ Buod ng Iyong SPA Development Toolkit
+
+Matapos makumpleto ang araling ito, na-master mo na ang:
+- **Template Architecture**: Reusable HTML components na may dynamic na content rendering
+- **Client-side Routing**: Pamamahala ng URL at navigation nang walang page reloads
+- **Browser Integration**: Paggamit ng History API at suporta sa back/forward button
+- **Event-driven Systems**: Pamamahala ng navigation at user interaction
+- **DOM Manipulation**: Template cloning, content switching, at element management
+- **Error Handling**: Maayos na fallback para sa mga invalid routes at nawawalang content
+- **Performance Patterns**: Mabisang content loading at rendering strategies
+
+**Mga Real-World Applications**: Ang iyong SPA development skills ay direktang naaangkop sa:
+- **Modern Web Applications**: React, Vue, Angular, at iba pang framework development
+- **Progressive Web Apps**: Offline-capable applications na may app-like experiences
+- **Enterprise Dashboards**: Complex business applications na may maraming views
+- **E-commerce Platforms**: Product catalogs, shopping carts, at checkout flows
+- **Content Management**: Dynamic na content creation at editing interfaces
+- **Mobile Development**: Hybrid apps gamit ang web technologies
+
+**Mga Professional Skills na Nakuha**: Ngayon ay kaya mo na:
+- **Magdisenyo** ng single-page applications na may tamang paghihiwalay ng mga aspeto
+- **Ipatupad** ang mga client-side routing systems na kayang sumabay sa komplikasyon ng application
+- **Mag-debug** ng mga komplikadong navigation flows gamit ang browser developer tools
+- **I-optimize** ang performance ng application sa pamamagitan ng mahusay na pamamahala ng mga template
+- **Magdisenyo** ng user experiences na parang natural at responsive
+
+**Mga Konseptong Na-master sa Frontend Development**:
+- **Component Architecture**: Mga reusable na UI patterns at template systems
+- **State Synchronization**: Pamamahala ng URL state at browser history
+- **Event-driven Programming**: Pag-handle ng user interaction at navigation
+- **Performance Optimization**: Mahusay na DOM manipulation at content loading
+- **User Experience Design**: Smooth transitions at intuitive navigation
+
+**Susunod na Antas**: Handa ka nang tuklasin ang mga modernong frontend frameworks, advanced state management, o gumawa ng mga komplikadong enterprise applications!
+
+🌟 **Achievement Unlocked**: Naitayo mo na ang pundasyon ng isang propesyonal na single-page application gamit ang mga modernong web architecture patterns!
 
 ---
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
+Gamitin ang Agent mode para tapusin ang sumusunod na hamon:
 
-**Deskripsyon:** Pagandahin ang banking app sa pamamagitan ng pag-implement ng error handling at isang 404 page template para sa mga invalid na ruta, upang mapabuti ang karanasan ng user kapag nag-navigate sa mga hindi umiiral na pahina.
+**Deskripsyon:** Pagandahin ang banking app sa pamamagitan ng pag-implement ng error handling at isang 404 page template para sa mga invalid routes, upang mapabuti ang user experience kapag nagna-navigate sa mga hindi umiiral na pahina.
 
-**Prompt:** Gumawa ng bagong HTML template na may id na "not-found" na nagpapakita ng user-friendly na 404 error page na may styling. Pagkatapos, baguhin ang JavaScript routing logic upang ipakita ang template na ito kapag nag-navigate ang mga user sa invalid URLs, at magdagdag ng "Go Home" button na mag-navigate pabalik sa login page.
+**Prompt:** Gumawa ng bagong HTML template na may id na "not-found" na nagpapakita ng user-friendly na 404 error page na may styling. Pagkatapos, baguhin ang JavaScript routing logic upang ipakita ang template na ito kapag nagna-navigate ang mga user sa mga invalid URLs, at magdagdag ng "Go Home" button na bumabalik sa login page.
 
-Alamin ang higit pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Hamon
 
 Magdagdag ng bagong template at ruta para sa isang pangatlong pahina na nagpapakita ng credits para sa app na ito.
 
-**Mga layunin ng hamon:**  
-- **Gumawa** ng bagong HTML template na may tamang content structure  
-- **Magdagdag** ng bagong ruta sa iyong routes configuration object  
-- **Isama** ang navigation links papunta at mula sa credits page  
-- **Subukan** na gumagana nang tama ang lahat ng navigation gamit ang browser history  
+**Mga Layunin ng Hamon**:
+- **Gumawa** ng bagong HTML template na may angkop na content structure
+- **Idagdag** ang bagong ruta sa iyong routes configuration object
+- **Isama** ang mga navigation links papunta at mula sa credits page
+- **Subukan** na gumagana nang tama ang lahat ng navigation gamit ang browser history
 
 ## Post-Lecture Quiz
 
@@ -564,13 +821,13 @@ Magdagdag ng bagong template at ruta para sa isang pangatlong pahina na nagpapak
 
 ## Review at Pag-aaral sa Sarili
 
-Ang routing ay isa sa mga nakakagulat na mahirap na bahagi ng web development, lalo na habang ang web ay lumilipat mula sa page refresh behaviors patungo sa Single Page Application page refreshes. Magbasa nang kaunti tungkol sa [kung paano hinahandle ng Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) ang routing. Maaari mo bang ipaliwanag kung bakit ang ilan sa mga desisyon na inilarawan sa dokumentong iyon ay kinakailangan?
+Ang routing ay isa sa mga nakakagulat na mahirap na bahagi ng web development, lalo na habang ang web ay lumilipat mula sa page refresh behaviors patungo sa Single Page Application page refreshes. Magbasa nang kaunti tungkol sa [kung paano hinahandle ng Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) ang routing. Kaya mo bang ipaliwanag kung bakit ang ilan sa mga desisyong inilalarawan sa dokumentong iyon ay kinakailangan?
 
-**Karagdagang mga mapagkukunan ng pag-aaral:**  
-- **Alamin** kung paano ipinatutupad ng mga sikat na framework tulad ng React Router at Vue Router ang client-side routing  
-- **Saliksikin** ang mga pagkakaiba sa pagitan ng hash-based routing at history API routing  
-- **Pag-aralan** ang server-side rendering (SSR) at kung paano ito nakakaapekto sa routing strategies  
-- **Imbestigahan** kung paano hinahandle ng Progressive Web Apps (PWAs) ang routing at navigation  
+**Karagdagang mga mapagkukunan sa pag-aaral**:
+- **Tuklasin** kung paano ipinapatupad ng mga sikat na frameworks tulad ng React Router at Vue Router ang client-side routing
+- **Saliksikin** ang mga pagkakaiba sa pagitan ng hash-based routing at history API routing
+- **Alamin** ang tungkol sa server-side rendering (SSR) at kung paano ito nakakaapekto sa routing strategies
+- **Siyasatin** kung paano hinahandle ng Progressive Web Apps (PWAs) ang routing at navigation
 
 ## Takdang-Aralin
 
diff --git a/translations/tl/7-bank-project/2-forms/README.md b/translations/tl/7-bank-project/2-forms/README.md
index 89d35fb1a3..e6729f4eb9 100644
--- a/translations/tl/7-bank-project/2-forms/README.md
+++ b/translations/tl/7-bank-project/2-forms/README.md
@@ -1,29 +1,76 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b24f28fc46dd473aa9080f174182adde",
-  "translation_date": "2025-10-22T15:36:46+00:00",
+  "original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
+  "translation_date": "2025-11-03T14:01:14+00:00",
   "source_file": "7-bank-project/2-forms/README.md",
   "language_code": "tl"
 }
 -->
 # Gumawa ng Banking App Bahagi 2: Gumawa ng Login at Registration Form
 
+```mermaid
+journey
+    title Your Form Development Journey
+    section HTML Foundation
+      Understand form elements: 3: Student
+      Learn input types: 4: Student
+      Master accessibility: 4: Student
+    section JavaScript Integration
+      Handle form submission: 4: Student
+      Implement AJAX communication: 5: Student
+      Process server responses: 5: Student
+    section Validation Systems
+      Create multi-layer validation: 5: Student
+      Enhance user experience: 5: Student
+      Ensure data integrity: 5: Student
+```
+
 ## Pre-Lecture Quiz
 
 [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/43)
 
-Naranasan mo na bang mag-fill out ng form online at ma-reject ang email format mo? O kaya naman ay mawala ang lahat ng impormasyon mo pagkatapos mong mag-click ng submit? Lahat tayo ay nakaranas ng ganitong nakakainis na karanasan.
+Naranasan mo na bang mag-fill out ng form online at ma-reject ang email format mo? O kaya naman ay nawala ang lahat ng impormasyon mo pagkatapos mong mag-submit? Lahat tayo ay nakaranas ng ganitong nakakainis na karanasan.
 
-Ang mga form ay nagsisilbing tulay sa pagitan ng mga user at ng functionality ng iyong application. Tulad ng maingat na protocol na ginagamit ng mga air traffic controller para gabayan ang mga eroplano sa kanilang destinasyon, ang maayos na disenyo ng mga form ay nagbibigay ng malinaw na feedback at pumipigil sa mga mahal na pagkakamali. Ang mga hindi maayos na form, sa kabilang banda, ay maaaring magtulak sa mga user na umalis nang mas mabilis kaysa sa isang miscommunication sa abalang paliparan.
+Ang mga form ay nagsisilbing tulay sa pagitan ng mga user at ng functionality ng iyong application. Tulad ng maingat na protocol na ginagamit ng mga air traffic controller para gabayan ang mga eroplano sa kanilang destinasyon, ang maayos na disenyo ng mga form ay nagbibigay ng malinaw na feedback at pumipigil sa mga mahal na pagkakamali. Ang mga hindi maayos na form, sa kabilang banda, ay maaaring magtaboy sa mga user nang mas mabilis kaysa sa isang miscommunication sa abalang paliparan.
 
-Sa araling ito, gagawin nating interactive ang iyong static banking app. Matututo kang gumawa ng mga form na nagva-validate ng user input, nakikipag-ugnayan sa mga server, at nagbibigay ng kapaki-pakinabang na feedback. Isipin mo ito bilang paggawa ng control interface na magpapahintulot sa mga user na mag-navigate sa mga feature ng iyong application.
+Sa leksyong ito, gagawin nating interactive ang iyong static na banking app. Matututo kang gumawa ng mga form na nagva-validate ng user input, nakikipag-ugnayan sa mga server, at nagbibigay ng kapaki-pakinabang na feedback. Isipin mo ito bilang paggawa ng control interface na nagpapahintulot sa mga user na mag-navigate sa mga feature ng iyong application.
 
-Sa pagtatapos, magkakaroon ka ng kumpletong login at registration system na may validation na gagabay sa mga user patungo sa tagumpay sa halip na sa pagkabigo.
+Sa dulo, magkakaroon ka ng kumpletong login at registration system na may validation na gagabay sa mga user patungo sa tagumpay sa halip na frustration.
+
+```mermaid
+mindmap
+  root((Form Development))
+    HTML Foundation
+      Semantic Elements
+      Input Types
+      Accessibility
+      Label Association
+    User Experience
+      Validation Feedback
+      Error Prevention
+      Loading States
+      Success Messaging
+    JavaScript Integration
+      Event Handling
+      AJAX Communication
+      Data Processing
+      Error Management
+    Validation Layers
+      HTML5 Validation
+      Client-side Logic
+      Server-side Security
+      Progressive Enhancement
+    Modern Patterns
+      Fetch API
+      Async/Await
+      Form Data API
+      Promise Handling
+```
 
 ## Mga Kinakailangan
 
-Bago tayo magsimula sa paggawa ng mga form, siguraduhin muna natin na maayos ang iyong setup. Ang araling ito ay magpapatuloy mula sa huling bahagi ng nakaraang aralin, kaya kung lumaktaw ka, maaaring gusto mong balikan muna ang mga pangunahing kaalaman.
+Bago tayo magsimula sa paggawa ng mga form, siguraduhin muna natin na maayos ang iyong setup. Ang leksyong ito ay magpapatuloy mula sa huling bahagi, kaya kung lumaktaw ka, maaaring gusto mong balikan muna ang mga pangunahing kaalaman.
 
 ### Kinakailangang Setup
 
@@ -33,16 +80,16 @@ Bago tayo magsimula sa paggawa ng mga form, siguraduhin muna natin na maayos ang
 | [Node.js](https://nodejs.org) | ✅ Kinakailangan | JavaScript runtime para sa server |
 | [Bank API Server](../api/README.md) | ✅ Kinakailangan | Backend service para sa data storage |
 
-> 💡 **Tip sa Pag-develop**: Magpapatakbo ka ng dalawang magkahiwalay na server nang sabay – isa para sa iyong front-end banking app at isa pa para sa backend API. Ang setup na ito ay sumasalamin sa totoong mundo ng pag-develop kung saan ang mga frontend at backend service ay gumagana nang magkahiwalay.
+> 💡 **Tip sa Pag-develop**: Magpapatakbo ka ng dalawang magkahiwalay na server nang sabay – isa para sa iyong front-end banking app at isa pa para sa backend API. Ang setup na ito ay sumasalamin sa totoong mundo ng pag-develop kung saan ang frontend at backend services ay gumagana nang magkahiwalay.
 
 ### Konfigurasyon ng Server
 
 **Ang iyong development environment ay maglalaman ng:**
-- **Frontend server**: Nagse-serve sa iyong banking app (karaniwang port `3000`)
+- **Frontend server**: Nagse-serve ng iyong banking app (karaniwang port `3000`)
 - **Backend API server**: Nagha-handle ng data storage at retrieval (port `5000`)
-- **Parehong server** ay maaaring magpatakbo nang sabay-sabay nang walang conflict
+- **Parehong server** ay maaaring tumakbo nang sabay nang walang conflict
 
-**Pagsubok sa iyong API connection:**
+**Pag-test ng iyong API connection:**
 ```bash
 curl http://localhost:5000/api
 # Expected response: "Bank API v1.0.0"
@@ -54,9 +101,9 @@ curl http://localhost:5000/api
 
 ## Pag-unawa sa HTML Forms at Controls
 
-Ang HTML forms ang paraan kung paano nakikipag-ugnayan ang mga user sa iyong web application. Isipin mo ito bilang telegraph system na nag-uugnay sa mga malalayong lugar noong ika-19 na siglo – ito ang communication protocol sa pagitan ng intensyon ng user at tugon ng application. Kapag maayos ang disenyo, nahuhuli nito ang mga error, ginagabayan ang input formatting, at nagbibigay ng kapaki-pakinabang na mungkahi.
+Ang HTML forms ang paraan kung paano nakikipag-ugnayan ang mga user sa iyong web application. Isipin mo ito bilang telegraph system na nagkonekta sa mga malalayong lugar noong ika-19 na siglo – ito ang communication protocol sa pagitan ng intensyon ng user at ng tugon ng application. Kapag maingat na dinisenyo, nahuhuli nito ang mga error, ginagabayan ang input formatting, at nagbibigay ng kapaki-pakinabang na mungkahi.
 
-Ang mga modernong form ay mas sopistikado kaysa sa mga simpleng text inputs. Ang HTML5 ay nagpakilala ng mga specialized input types na awtomatikong nagha-handle ng email validation, number formatting, at date selection. Ang mga improvement na ito ay kapaki-pakinabang para sa accessibility at mobile user experiences.
+Ang mga modernong form ay mas sopistikado kaysa sa mga basic na text inputs. Ang HTML5 ay nagpakilala ng mga specialized input types na awtomatikong nagha-handle ng email validation, number formatting, at date selection. Ang mga improvement na ito ay kapaki-pakinabang para sa accessibility at mobile user experiences.
 
 ### Mahahalagang Elemento ng Form
 
@@ -76,21 +123,21 @@ Ang mga modernong form ay mas sopistikado kaysa sa mga simpleng text inputs. Ang
 - **Gumagawa** ng form container na may natatanging identifier
 - **Nagtatakda** ng HTTP method para sa data submission
 - **Nag-a-associate** ng labels sa inputs para sa accessibility
-- **Nagde-define** ng submit button para i-process ang form
+- **Nagde-define** ng submit button para ma-process ang form
 
 ### Mga Modernong Input Types at Attributes
 
-| Input Type | Layunin | Halimbawa ng Paggamit |
-|------------|---------|-----------------------|
-| `text` | Pangkalahatang text input | `<input type="text" name="username">` |
+| Uri ng Input | Layunin | Halimbawa ng Paggamit |
+|--------------|---------|-----------------------|
+| `text` | General text input | `<input type="text" name="username">` |
 | `email` | Email validation | `<input type="email" name="email">` |
-| `password` | Nakatagong text entry | `<input type="password" name="password">` |
+| `password` | Hidden text entry | `<input type="password" name="password">` |
 | `number` | Numeric input | `<input type="number" name="balance" min="0">` |
 | `tel` | Mga numero ng telepono | `<input type="tel" name="phone">` |
 
-> 💡 **Advantage ng Modern HTML5**: Ang paggamit ng specific input types ay nagbibigay ng automatic validation, angkop na mobile keyboards, at mas mahusay na accessibility support nang walang karagdagang JavaScript!
+> 💡 **Advantage ng Modern HTML5**: Ang paggamit ng specific input types ay nagbibigay ng automatic validation, tamang mobile keyboards, at mas mahusay na suporta sa accessibility nang walang karagdagang JavaScript!
 
-### Mga Uri ng Button at Kanilang Behavior
+### Mga Uri ng Button at Kanilang Gamit
 
 ```html
 <!-- Different button behaviors -->
@@ -100,15 +147,15 @@ Ang mga modernong form ay mas sopistikado kaysa sa mga simpleng text inputs. Ang
 ```
 
 **Ang ginagawa ng bawat uri ng button:**
-- **Submit buttons**: Nagti-trigger ng form submission at nagpapadala ng data sa tinukoy na endpoint
+- **Submit buttons**: Nagti-trigger ng form submission at nagpapadala ng data sa specified endpoint
 - **Reset buttons**: Ibinabalik ang lahat ng form fields sa kanilang initial state
-- **Regular buttons**: Walang default na behavior, nangangailangan ng custom na JavaScript para sa functionality
+- **Regular buttons**: Walang default na behavior, nangangailangan ng custom JavaScript para sa functionality
 
 > ⚠️ **Mahalagang Paalala**: Ang `<input>` element ay self-closing at hindi nangangailangan ng closing tag. Ang modernong best practice ay isulat ang `<input>` nang walang slash.
 
 ### Paggawa ng Iyong Login Form
 
-Ngayon, gagawa tayo ng praktikal na login form na nagpapakita ng mga modernong HTML form practices. Magsisimula tayo sa basic na istruktura at unti-unting i-enhance ito gamit ang accessibility features at validation.
+Ngayon, gagawa tayo ng praktikal na login form na nagpapakita ng mga modernong HTML form practices. Magsisimula tayo sa basic na istruktura at unti-unting pagagandahin ito gamit ang mga accessibility features at validation.
 
 ```html
 <template id="login">
@@ -128,15 +175,15 @@ Ngayon, gagawa tayo ng praktikal na login form na nagpapakita ng mga modernong H
 ```
 
 **Pagbubuo ng nangyayari dito:**
-- **Istruktura** ang form gamit ang semantic HTML5 elements
-- **I-group** ang mga related na elemento gamit ang `div` containers na may meaningful classes
-- **I-associate** ang labels sa inputs gamit ang `for` at `id` attributes
-- **Magdagdag** ng modernong attributes tulad ng `autocomplete` at `placeholder` para sa mas mahusay na UX
-- **Magdagdag** ng `novalidate` para i-handle ang validation gamit ang JavaScript sa halip na default ng browser
+- **Binubuo** ang form gamit ang semantic HTML5 elements
+- **Inaayos** ang mga related elements gamit ang `div` containers na may meaningful classes
+- **Ina-associate** ang labels sa inputs gamit ang `for` at `id` attributes
+- **Naglalagay** ng modernong attributes tulad ng `autocomplete` at `placeholder` para sa mas magandang UX
+- **Nagdadagdag** ng `novalidate` para ma-handle ang validation gamit ang JavaScript sa halip na default ng browser
 
-### Ang Kapangyarihan ng Tamang Labels
+### Ang Kahalagahan ng Tamang Labels
 
-**Bakit mahalaga ang labels para sa modernong web development:**
+**Bakit mahalaga ang labels sa modernong web development:**
 
 ```mermaid
 graph TD
@@ -152,17 +199,17 @@ graph TD
 ```
 
 **Ang nagagawa ng tamang labels:**
-- **Nagpapahintulot** sa screen readers na malinaw na i-announce ang mga form fields
+- **Nagpapahintulot** sa screen readers na malinaw na i-announce ang form fields
 - **Pinalalawak** ang clickable area (ang pag-click sa label ay nagfo-focus sa input)
-- **Pinapabuti** ang mobile usability gamit ang mas malalaking touch targets
+- **Pinapabuti** ang mobile usability gamit ang mas malaking touch targets
 - **Sumusuporta** sa form validation gamit ang meaningful error messages
-- **Pinapahusay** ang SEO sa pamamagitan ng pagbibigay ng semantic na kahulugan sa mga form elements
+- **Pinapaganda** ang SEO sa pamamagitan ng pagbibigay ng semantic na kahulugan sa form elements
 
-> 🎯 **Layunin ng Accessibility**: Ang bawat form input ay dapat may kaugnay na label. Ang simpleng practice na ito ay ginagawang magagamit ang iyong mga form ng lahat, kabilang ang mga user na may kapansanan, at pinapabuti ang karanasan para sa lahat ng user.
+> 🎯 **Layunin ng Accessibility**: Ang bawat form input ay dapat may kaugnay na label. Ang simpleng practice na ito ay nagpapadali sa paggamit ng iyong forms para sa lahat, kabilang ang mga user na may kapansanan, at pinapaganda ang karanasan para sa lahat ng user.
 
 ### Paggawa ng Registration Form
 
-Ang registration form ay nangangailangan ng mas detalyadong impormasyon para makagawa ng kumpletong user account. Gagawa tayo nito gamit ang mga modernong HTML5 features at pinahusay na accessibility.
+Ang registration form ay nangangailangan ng mas detalyadong impormasyon para makagawa ng kumpletong user account. Gawin natin ito gamit ang mga modernong HTML5 features at mas pinahusay na accessibility.
 
 ```html
 <hr/>
@@ -197,12 +244,12 @@ Ang registration form ay nangangailangan ng mas detalyadong impormasyon para mak
 ```
 
 **Sa itaas, ginawa natin ang:**
-- **Inorganisa** ang bawat field sa container divs para sa mas magandang styling at layout
-- **Nagdagdag** ng angkop na `autocomplete` attributes para sa browser autofill support
-- **Naglagay** ng kapaki-pakinabang na placeholder text para gabayan ang user input
-- **Nagtakda** ng mga sensible defaults gamit ang `value` attribute
-- **Nag-apply** ng validation attributes tulad ng `required`, `maxlength`, at `min`
-- **Gumamit** ng `type="number"` para sa balance field na may decimal support
+- **Pag-aayos** ng bawat field sa container divs para sa mas magandang styling at layout
+- **Pagdaragdag** ng tamang `autocomplete` attributes para sa browser autofill support
+- **Paglalagay** ng helpful placeholder text para gabayan ang user input
+- **Pag-set** ng sensible defaults gamit ang `value` attribute
+- **Pag-aapply** ng validation attributes tulad ng `required`, `maxlength`, at `min`
+- **Paggamit** ng `type="number"` para sa balance field na may decimal support
 
 ### Pag-explore ng Input Types at Behavior
 
@@ -211,13 +258,29 @@ Ang registration form ay nangangailangan ng mas detalyadong impormasyon para mak
 | Feature | Benepisyo | Halimbawa |
 |---------|-----------|----------|
 | `type="number"` | Numeric keypad sa mobile | Mas madaling pagpasok ng balance |
-| `step="0.01"` | Kontrol sa decimal precision | Pinapayagan ang cents sa currency |
-| `autocomplete` | Browser autofill | Mas mabilis na pag-fill out ng form |
-| `placeholder` | Contextual hints | Gabay sa inaasahan ng user |
+| `step="0.01"` | Decimal precision control | Pinapayagan ang cents sa currency |
+| `autocomplete` | Browser autofill | Mas mabilis na pag-fill ng form |
+| `placeholder` | Contextual hints | Ginagabayan ang inaasahan ng user |
 
-> 🎯 **Hamon sa Accessibility**: Subukang mag-navigate sa mga form gamit lamang ang iyong keyboard! Gamitin ang `Tab` para lumipat sa pagitan ng mga field, `Space` para mag-check ng mga checkbox, at `Enter` para mag-submit. Ang karanasang ito ay makakatulong sa iyong maunawaan kung paano nakikipag-ugnayan ang mga screen reader users sa iyong mga form.
+> 🎯 **Accessibility Challenge**: Subukang mag-navigate sa forms gamit lamang ang iyong keyboard! Gamitin ang `Tab` para lumipat sa pagitan ng fields, `Space` para mag-check ng boxes, at `Enter` para mag-submit. Ang karanasang ito ay makakatulong sa iyong maunawaan kung paano nakikipag-ugnayan ang mga screen reader users sa iyong forms.
 
-## Pag-unawa sa Mga Paraan ng Pag-submit ng Form
+### 🔄 **Pedagogical Check-in**
+**Pag-unawa sa Pundasyon ng Form**: Bago mag-implement ng JavaScript, siguraduhing nauunawaan mo:
+- ✅ Paano ang semantic HTML ay gumagawa ng accessible na form structures
+- ✅ Bakit mahalaga ang input types para sa mobile keyboards at validation
+- ✅ Ang relasyon sa pagitan ng labels at form controls
+- ✅ Paano naaapektuhan ng form attributes ang default na behavior ng browser
+
+**Mabilis na Self-Test**: Ano ang mangyayari kung mag-submit ka ng form nang walang JavaScript handling?
+*Sagot: Ang browser ay gumagawa ng default submission, karaniwang nagre-redirect sa action URL*
+
+**Benepisyo ng HTML5 Forms**: Ang mga modernong form ay nagbibigay ng:
+- **Built-in Validation**: Automatic email at number format checking
+- **Mobile Optimization**: Tamang keyboards para sa iba't ibang input types
+- **Accessibility**: Suporta sa screen reader at keyboard navigation
+- **Progressive Enhancement**: Gumagana kahit naka-disable ang JavaScript
+
+## Pag-unawa sa Form Submission Methods
 
 Kapag may nag-fill out ng iyong form at nag-click ng submit, kailangang mapunta ang data sa isang lugar – karaniwang sa isang server na maaaring mag-save nito. May ilang iba't ibang paraan kung paano ito mangyayari, at ang pag-alam kung alin ang gagamitin ay makakapagligtas sa iyo mula sa ilang sakit ng ulo sa hinaharap.
 
@@ -225,14 +288,14 @@ Tingnan natin kung ano ang talagang nangyayari kapag may nag-click ng submit but
 
 ### Default na Behavior ng Form
 
-Una, obserbahan natin kung ano ang nangyayari sa basic na form submission:
+Una, obserbahan natin kung ano ang nangyayari sa basic form submission:
 
-**Subukan ang iyong kasalukuyang mga form:**
+**I-test ang iyong kasalukuyang forms:**
 1. I-click ang *Register* button sa iyong form
 2. Obserbahan ang mga pagbabago sa address bar ng iyong browser
 3. Pansinin kung paano nagre-reload ang page at lumalabas ang data sa URL
 
-![Screenshot ng pagbabago sa URL ng browser pagkatapos mag-click ng Register button](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.tl.png)
+![Screenshot ng pagbabago sa URL ng browser pagkatapos i-click ang Register button](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.tl.png)
 
 ### Paghahambing ng HTTP Methods
 
@@ -255,16 +318,16 @@ graph TD
 
 | Method | Gamit | Lokasyon ng Data | Antas ng Seguridad | Limitasyon sa Laki |
 |--------|-------|------------------|--------------------|--------------------|
-| `GET` | Mga search query, filters | URL parameters | Mababa (visible) | ~2000 characters |
-| `POST` | Mga user account, sensitibong data | Request body | Mas mataas (hidden) | Walang praktikal na limitasyon |
+| `GET` | Mga search queries, filters | URL parameters | Mababa (visible) | ~2000 characters |
+| `POST` | Mga user accounts, sensitibong data | Request body | Mas mataas (hidden) | Walang praktikal na limitasyon |
 
 **Pag-unawa sa mga pangunahing pagkakaiba:**
 - **GET**: Idinadagdag ang form data sa URL bilang query parameters (angkop para sa search operations)
 - **POST**: Isinasama ang data sa request body (mahalaga para sa sensitibong impormasyon)
-- **Limitasyon ng GET**: Mga size constraints, visible na data, persistent browser history
+- **Limitasyon ng GET**: Mga size constraints, visible data, persistent browser history
 - **Mga Bentahe ng POST**: Malaking kapasidad ng data, proteksyon sa privacy, suporta sa file upload
 
-> 💡 **Pinakamainam na Practice**: Gamitin ang `GET` para sa mga search forms at filters (data retrieval), gamitin ang `POST` para sa user registration, login, at data creation.
+> 💡 **Best Practice**: Gamitin ang `GET` para sa mga search forms at filters (data retrieval), gamitin ang `POST` para sa user registration, login, at data creation.
 
 ### Pag-configure ng Form Submission
 
@@ -275,26 +338,26 @@ I-configure natin ang iyong registration form para maayos na makipag-ugnayan sa
       method="POST" novalidate>
 ```
 
-**Ang ginagawa ng configuration na ito:**
-- **Itinuturo** ang form submission sa iyong API endpoint
+**Ang ginagawa ng konfigurasyong ito:**
+- **Dinidirekta** ang form submission sa iyong API endpoint
 - **Gumagamit** ng POST method para sa secure na data transmission
-- **Naglalaman** ng `novalidate` para i-handle ang validation gamit ang JavaScript
+- **Naglalagay** ng `novalidate` para ma-handle ang validation gamit ang JavaScript
 
-### Pagsubok sa Form Submission
+### Pag-test ng Form Submission
 
-**Sundin ang mga hakbang na ito para subukan ang iyong form:**
+**Sundin ang mga hakbang na ito para i-test ang iyong form:**
 1. **I-fill out** ang registration form gamit ang iyong impormasyon
 2. **I-click** ang "Create Account" button
 3. **Obserbahan** ang server response sa iyong browser
 
-![Isang browser window sa address localhost:5000/api/accounts, nagpapakita ng JSON string na may user data](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.tl.png)
+![Isang browser window sa address na localhost:5000/api/accounts, nagpapakita ng JSON string na may user data](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.tl.png)
 
 **Ang dapat mong makita:**
-- **Nagre-redirect ang browser** sa API endpoint URL
-- **JSON response** na naglalaman ng iyong bagong account data
+- **Ang browser ay nagre-redirect** sa API endpoint URL
+- **JSON response** na naglalaman ng bagong likhang account data
 - **Kumpirmasyon ng server** na matagumpay na nalikha ang account
 
-> 🧪 **Panahon ng Eksperimento**: Subukang mag-register muli gamit ang parehong username. Anong response ang makukuha mo? Makakatulong ito sa iyong maunawaan kung paano hinahandle ng server ang duplicate na data at error conditions.
+> 🧪 **Oras ng Eksperimento**: Subukang mag-register ulit gamit ang parehong username. Anong response ang makukuha mo? Makakatulong ito sa iyong maunawaan kung paano hinahandle ng server ang duplicate na data at error conditions.
 
 ### Pag-unawa sa JSON Responses
 
@@ -310,16 +373,16 @@ I-configure natin ang iyong registration form para maayos na makipag-ugnayan sa
 ```
 
 **Kinukumpirma ng response na ito:**
-- **Gumagawa** ng bagong account gamit ang iyong tinukoy na data
-- **Nag-a-assign** ng natatanging identifier para sa future reference
-- **Nagbabalik** ng lahat ng impormasyon ng account para sa verification
+- **Nilikha** ang bagong account gamit ang iyong tinukoy na data
+- **Nag-assign** ng unique identifier para sa future reference
+- **Ibinabalik** ang lahat ng impormasyon ng account para sa verification
 - **Nagpapahiwatig** ng matagumpay na database storage
 
 ## Modernong Pag-handle ng Form gamit ang JavaScript
 
 Ang tradisyunal na form submissions ay nagdudulot ng full page reloads, katulad ng kung paano ang mga maagang space missions ay nangangailangan ng complete system resets para sa course corrections. Ang approach na ito ay nakakaabala sa user experience at nawawala ang application state.
 
-Ang JavaScript form handling ay gumagana tulad ng continuous guidance systems na ginagamit ng modernong spacecraft – gumagawa ng real-time adjustments nang hindi nawawala ang navigation context. Maaari nating i-intercept ang form submissions, magbigay ng agarang feedback, maayos na mag-handle ng errors, at i-update ang interface base sa server responses habang pinapanatili ang posisyon ng user sa application.
+Ang JavaScript form handling ay gumagana tulad ng continuous guidance systems na ginagamit ng modernong spacecraft – gumagawa ng real-time adjustments nang hindi nawawala ang navigation context. Maaari nating i-intercept ang form submissions, magbigay ng agarang feedback, maayos na mag-handle ng errors, at i-update ang interface batay sa server responses habang pinapanatili ang posisyon ng user sa application.
 
 ### Bakit Iwasan ang Page Reloads?
 
@@ -342,7 +405,7 @@ sequenceDiagram
 - **Nagbibigay** ng instant feedback at loading indicators
 - **Nagpapahintulot** ng dynamic error handling at validation
 - **Lumilikha** ng smooth, app-like user experiences
-- **Nagpapahintulot** ng conditional logic base sa server responses
+- **Nagpapahintulot** ng conditional logic batay sa server responses
 
 ### Paglipat mula Tradisyunal patungo sa Modernong Forms
 
@@ -392,16 +455,15 @@ document.addEventListener('DOMContentLoaded', () => {
 
 **Pagbubuo ng nangyayari dito:**
 - **Pinipigilan** ang default form submission gamit ang `event.preventDefault()`
-- **Kinukuha** ang form element gamit ang modern DOM selection
+- **Kinukuha** ang form element gamit ang modernong DOM selection
 - **Kinukuha** ang form data gamit ang makapangyarihang `FormData` API
 - **Kinoconvert** ang FormData sa plain object gamit ang `Object.fromEntries()`
-- **Sine-serialize** ang data sa JSON format para sa server communication
+- **Sinasalin** ang data sa JSON format para sa server communication
 - **Nilolog** ang processed data para sa debugging at verification
 
 ### Pag-unawa sa FormData API
 
 **Ang FormData API ay nagbibigay ng makapangyarihang form handling:**
-
 ```javascript
 // Example of what FormData captures
 const formData = new FormData(registerForm);
@@ -415,15 +477,15 @@ const formData = new FormData(registerForm);
 // }
 ```
 
-**Mga bentahe ng FormData API:**
-- **Komprehensibong koleksyon**: Kinukuha ang lahat ng form elements kabilang ang text, files, at complex inputs
-- **Type awareness**: Awtomatikong hinahandle ang iba't ibang input types nang walang custom coding
-- **Efficiency**: Inaalis ang manual field collection gamit ang isang API call
-- **Adaptability**: Pinapanatili ang functionality habang nagbabago ang form structure
+**Mga Bentahe ng FormData API:**
+- **Komprehensibong koleksyon**: Kinukuha ang lahat ng elemento ng form kabilang ang text, mga file, at kumplikadong input
+- **Pagkilala sa uri**: Awtomatikong pinangangasiwaan ang iba't ibang uri ng input nang walang custom na coding
+- **Episyente**: Inaalis ang manu-manong koleksyon ng field gamit ang isang tawag sa API
+- **Adaptabilidad**: Pinapanatili ang functionality habang nagbabago ang istruktura ng form
 
-### Paggawa ng Server Communication Function
+### Paglikha ng Function para sa Komunikasyon sa Server
 
-Ngayon, gumawa tayo ng matibay na function para makipag-ugnayan sa iyong API server gamit ang modernong JavaScript patterns:
+Ngayon, gagawa tayo ng matibay na function para makipag-ugnayan sa iyong API server gamit ang modernong mga pattern ng JavaScript:
 
 ```javascript
 async function createAccount(account) {
@@ -450,7 +512,7 @@ async function createAccount(account) {
 }
 ```
 
-**Pag-unawa sa asynchronous JavaScript:**
+**Pag-unawa sa asynchronous na JavaScript:**
 
 ```mermaid
 sequenceDiagram
@@ -465,12 +527,12 @@ sequenceDiagram
     JS->>JS: Process data
 ```
 
-**Ang nagagawa ng modernong implementasyon na ito:**
-- **Gumagamit** ng `async/await` para sa mas nababasang asynchronous code
-- **Naglalaman** ng tamang error handling gamit ang try/catch blocks
-- **Sinusuri** ang response status bago i-process ang data
-- **Nagtatakda** ng angkop na headers para sa JSON communication
-- **Nagbibigay** ng detalyadong mensahe ng error para sa debugging
+**Ano ang nagagawa ng modernong implementasyong ito:**
+- **Gumagamit** ng `async/await` para sa mas nababasang asynchronous na code
+- **Kasama** ang tamang paghawak ng error gamit ang try/catch blocks
+- **Sinusuri** ang status ng response bago iproseso ang data
+- **Nagse-set** ng tamang headers para sa JSON communication
+- **Nagbibigay** ng detalyadong mga mensahe ng error para sa debugging
 - **Nagbabalik** ng pare-parehong istruktura ng data para sa tagumpay at mga kaso ng error
 
 ### Ang Kapangyarihan ng Modernong Fetch API
@@ -480,21 +542,21 @@ sequenceDiagram
 | Tampok | Benepisyo | Implementasyon |
 |--------|-----------|----------------|
 | Batay sa Promise | Malinis na async na code | `await fetch()` |
-| Pag-customize ng request | Buong kontrol sa HTTP | Headers, methods, body |
-| Paghawak ng response | Flexible na pag-parse ng data | `.json()`, `.text()`, `.blob()` |
-| Paghawak ng error | Komprehensibong pag-catch ng error | Try/catch blocks |
+| Customisasyon ng Request | Buong kontrol sa HTTP | Headers, methods, body |
+| Pagproseso ng Response | Flexible na pag-parse ng data | `.json()`, `.text()`, `.blob()` |
+| Paghawak ng Error | Komprehensibong pagkuha ng error | Try/catch blocks |
 
-> 🎥 **Matuto Pa**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - Pag-unawa sa asynchronous na mga pattern ng JavaScript para sa modernong web development.
+> 🎥 **Matuto Pa**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - Pag-unawa sa mga asynchronous na pattern ng JavaScript para sa modernong web development.
 
 **Mga pangunahing konsepto para sa komunikasyon sa server:**
-- **Async functions** nagbibigay-daan sa pag-pause ng execution para maghintay ng response mula sa server
-- **Await keyword** ginagawang parang synchronous ang asynchronous na code
-- **Fetch API** nagbibigay ng modernong, promise-based na HTTP requests
-- **Paghawak ng error** tinitiyak na ang iyong app ay tumutugon nang maayos sa mga isyu sa network
+- **Async functions** na nagpapahintulot sa pag-pause ng execution para maghintay ng mga tugon mula sa server
+- **Await keyword** na ginagawang parang synchronous ang asynchronous na code
+- **Fetch API** na nagbibigay ng modernong, batay sa promise na HTTP requests
+- **Paghawak ng Error** na tinitiyak na ang iyong app ay tumutugon nang maayos sa mga isyu sa network
 
 ### Pagtatapos ng Registration Function
 
-Pagsamahin natin ang lahat gamit ang isang kumpleto, handa sa produksyon na registration function:
+Pagsamahin natin ang lahat gamit ang kumpleto, handa-sa-produksyon na registration function:
 
 ```javascript
 async function register() {
@@ -536,13 +598,13 @@ async function register() {
 }
 ```
 
-**Ang pinahusay na implementasyon na ito ay naglalaman ng:**
-- **Nagbibigay** ng visual na feedback habang nagsusumite ng form
-- **Nagdi-disable** ng submit button upang maiwasan ang duplicate na submissions
-- **Humahawak** ng parehong inaasahan at hindi inaasahang mga error nang maayos
+**Kasama sa pinahusay na implementasyong ito:**
+- **Nagbibigay** ng visual feedback habang nagsusumite ng form
+- **Ine-enable** ang submit button para maiwasan ang duplicate na pagsusumite
+- **Pinangangasiwaan** ang parehong inaasahan at hindi inaasahang mga error nang maayos
 - **Nagpapakita** ng user-friendly na mga mensahe ng tagumpay at error
-- **Nagre-reset** ng form pagkatapos ng matagumpay na registration
-- **Nagbabalik** ng UI state anuman ang resulta
+- **Nire-reset** ang form pagkatapos ng matagumpay na registration
+- **Ibinabalik** ang estado ng UI anuman ang resulta
 
 ### Pagsubok sa Iyong Implementasyon
 
@@ -556,20 +618,40 @@ async function register() {
 ![Screenshot na nagpapakita ng log message sa console ng browser](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.tl.png)
 
 **Ano ang dapat mong makita:**
-- **Loading state** lumalabas sa submit button
-- **Console logs** nagpapakita ng detalyadong impormasyon tungkol sa proseso
-- **Success message** lumalabas kapag matagumpay ang paglikha ng account
-- **Form resets** awtomatikong pagkatapos ng matagumpay na pagsusumite
-
-> 🔒 **Pagsasaalang-alang sa Seguridad**: Sa kasalukuyan, ang data ay dumadaan sa HTTP, na hindi ligtas para sa produksyon. Sa mga totoong aplikasyon, palaging gumamit ng HTTPS upang i-encrypt ang transmission ng data. Matuto pa tungkol sa [HTTPS security](https://en.wikipedia.org/wiki/HTTPS) at kung bakit mahalaga ito para sa proteksyon ng data ng user.
+- **Loading state** na lumalabas sa submit button
+- **Console logs** na nagpapakita ng detalyadong impormasyon tungkol sa proseso
+- **Success message** na lumalabas kapag matagumpay ang paglikha ng account
+- **Form resets** na awtomatikong nangyayari pagkatapos ng matagumpay na pagsusumite
+
+> 🔒 **Pagsasaalang-alang sa Seguridad**: Sa kasalukuyan, ang data ay naglalakbay sa HTTP, na hindi ligtas para sa produksyon. Sa mga tunay na aplikasyon, palaging gumamit ng HTTPS para i-encrypt ang transmission ng data. Matuto pa tungkol sa [HTTPS security](https://en.wikipedia.org/wiki/HTTPS) at kung bakit mahalaga ito para sa proteksyon ng data ng user.
+
+### 🔄 **Pedagogical Check-in**
+**Integrasyon ng Modernong JavaScript**: Suriin ang iyong pag-unawa sa asynchronous na paghawak ng form:
+- ✅ Paano binabago ng `event.preventDefault()` ang default na pag-uugali ng form?
+- ✅ Bakit mas episyente ang FormData API kaysa sa manu-manong koleksyon ng field?
+- ✅ Paano pinapabuti ng async/await patterns ang readability ng code?
+- ✅ Anong papel ang ginagampanan ng paghawak ng error sa karanasan ng user?
+
+**Arkitektura ng Sistema**: Ang iyong paghawak ng form ay nagpapakita ng:
+- **Event-Driven Programming**: Tumutugon ang mga form sa mga aksyon ng user nang walang page reloads
+- **Asynchronous Communication**: Ang mga request sa server ay hindi humaharang sa user interface
+- **Paghawak ng Error**: Maayos na pag-degrade kapag nabigo ang mga network request
+- **Pamamahala ng Estado**: Ang mga update sa UI ay sumasalamin sa mga tugon ng server
+- **Progressive Enhancement**: Gumagana ang base functionality, pinapahusay ng JavaScript
+
+**Mga Propesyonal na Pattern**: Na-implement mo:
+- **Single Responsibility**: Ang mga function ay may malinaw at nakatuong layunin
+- **Error Boundaries**: Ang mga try/catch blocks ay pumipigil sa pag-crash ng application
+- **Feedback ng User**: Mga loading states at mga mensahe ng tagumpay/error
+- **Pagbabago ng Data**: FormData sa JSON para sa komunikasyon sa server
 
 ## Komprehensibong Pag-validate ng Form
 
-Ang pag-validate ng form ay pumipigil sa nakakainis na karanasan ng pagdiskubre ng mga error pagkatapos ng pagsusumite. Tulad ng maraming redundant na sistema sa International Space Station, ang epektibong pag-validate ay gumagamit ng maraming layer ng safety checks.
+Ang pag-validate ng form ay pumipigil sa nakakainis na karanasan ng pagtuklas ng mga error pagkatapos lamang ng pagsusumite. Tulad ng maraming redundant na sistema sa International Space Station, ang epektibong pag-validate ay gumagamit ng maraming layer ng mga safety check.
 
-Ang pinakamainam na diskarte ay pinagsasama ang browser-level validation para sa agarang feedback, JavaScript validation para sa pinahusay na karanasan ng user, at server-side validation para sa seguridad at integridad ng data. Ang redundancy na ito ay tinitiyak ang kasiyahan ng user at proteksyon ng sistema.
+Ang pinakamainam na paraan ay pinagsasama ang pag-validate sa antas ng browser para sa agarang feedback, pag-validate sa JavaScript para sa pinahusay na karanasan ng user, at pag-validate sa server para sa seguridad at integridad ng data. Ang redundancy na ito ay tinitiyak ang parehong kasiyahan ng user at proteksyon ng sistema.
 
-### Pag-unawa sa Validation Layers
+### Pag-unawa sa Mga Layer ng Pag-validate
 
 ```mermaid
 graph TD
@@ -584,27 +666,27 @@ graph TD
     E -->|Invalid| I[Server Error Response]
 ```
 
-**Multi-layer validation strategy:**
-- **HTML5 validation**: Agarang browser-based na mga check
-- **JavaScript validation**: Custom na lohika at karanasan ng user
-- **Server validation**: Panghuling seguridad at mga check sa integridad ng data
+**Multi-layer na diskarte sa pag-validate:**
+- **Pag-validate ng HTML5**: Agarang mga check na batay sa browser
+- **Pag-validate ng JavaScript**: Custom na lohika at karanasan ng user
+- **Pag-validate ng Server**: Panghuling mga check para sa seguridad at integridad ng data
 - **Progressive enhancement**: Gumagana kahit naka-disable ang JavaScript
 
-### HTML5 Validation Attributes
+### Mga HTML5 Validation Attributes
 
-**Mga modernong validation tools na magagamit mo:**
+**Mga modernong tool sa pag-validate na magagamit mo:**
 
-| Attribute | Layunin | Halimbawa ng Paggamit | Ugali ng Browser |
-|-----------|---------|-----------------------|------------------|
+| Attribute | Layunin | Halimbawa ng Paggamit | Pag-uugali ng Browser |
+|-----------|---------|-----------------------|-----------------------|
 | `required` | Mga mandatory na field | `<input required>` | Pinipigilan ang walang laman na pagsusumite |
-| `minlength`/`maxlength` | Mga limitasyon sa haba ng text | `<input maxlength="20">` | Nagpapatupad ng limitasyon sa karakter |
-| `min`/`max` | Mga saklaw ng numero | `<input min="0" max="1000">` | Nagva-validate ng mga hangganan ng numero |
-| `pattern` | Mga custom na regex rules | `<input pattern="[A-Za-z]+">` | Tumutugma sa mga partikular na format |
-| `type` | Pag-validate ng uri ng data | `<input type="email">` | Pag-validate ng format na partikular sa uri ng data |
+| `minlength`/`maxlength` | Mga limitasyon sa haba ng text | `<input maxlength="20">` | Nagpapatupad ng mga limitasyon sa karakter |
+| `min`/`max` | Mga saklaw ng numero | `<input min="0" max="1000">` | Nagpapatunay ng mga hangganan ng numero |
+| `pattern` | Mga custom na panuntunan sa regex | `<input pattern="[A-Za-z]+">` | Tumutugma sa mga partikular na format |
+| `type` | Pag-validate ng uri ng data | `<input type="email">` | Pag-validate na partikular sa format |
 
 ### CSS Validation Styling
 
-**Lumikha ng visual na feedback para sa validation states:**
+**Lumikha ng visual feedback para sa mga estado ng pag-validate:**
 
 ```css
 /* Valid input styling */
@@ -629,17 +711,17 @@ input:focus:invalid {
 }
 ```
 
-**Ano ang nagagawa ng mga visual na cue na ito:**
-- **Green borders**: Nagpapahiwatig ng matagumpay na validation, tulad ng green lights sa mission control
-- **Red borders**: Nagpapakita ng mga error sa validation na nangangailangan ng atensyon
-- **Focus highlights**: Nagbibigay ng malinaw na visual na konteksto para sa kasalukuyang lokasyon ng input
-- **Consistent styling**: Nagtatatag ng predictable na mga pattern ng interface na maaaring matutunan ng mga user
+**Ano ang nagagawa ng mga visual na palatandaan na ito:**
+- **Mga berdeng border**: Nagpapahiwatig ng matagumpay na pag-validate, tulad ng berdeng ilaw sa mission control
+- **Mga pulang border**: Nagpapahiwatig ng mga error sa pag-validate na nangangailangan ng atensyon
+- **Mga highlight ng focus**: Nagbibigay ng malinaw na visual na konteksto para sa kasalukuyang lokasyon ng input
+- **Pare-parehong estilo**: Nagtatatag ng predictable na mga pattern ng interface na maaaring matutunan ng mga user
 
-> 💡 **Pro Tip**: Gamitin ang `:valid` at `:invalid` na CSS pseudo-classes upang magbigay ng agarang visual na feedback habang nagta-type ang mga user, na lumilikha ng isang responsive at helpful na interface.
+> 💡 **Pro Tip**: Gamitin ang `:valid` at `:invalid` na mga pseudo-class ng CSS para magbigay ng agarang visual na feedback habang nagta-type ang mga user, na lumilikha ng isang tumutugon at kapaki-pakinabang na interface.
 
-### Pagpapatupad ng Komprehensibong Validation
+### Pagpapatupad ng Komprehensibong Pag-validate
 
-Palakasin natin ang iyong registration form gamit ang matibay na validation na nagbibigay ng mahusay na karanasan ng user at kalidad ng data:
+Palakasin natin ang iyong registration form gamit ang matibay na pag-validate na nagbibigay ng mahusay na karanasan ng user at kalidad ng data:
 
 ```html
 <form id="registerForm" method="POST" novalidate>
@@ -682,41 +764,41 @@ Palakasin natin ang iyong registration form gamit ang matibay na validation na n
 </form>
 ```
 
-**Pag-unawa sa pinahusay na validation:**
-- **Pinagsasama** ang mga indicator ng required field na may helpful na mga deskripsyon
-- **Kasama** ang `pattern` attributes para sa format validation
-- **Nagbibigay** ng `title` attributes para sa accessibility at tooltips
-- **Nagdaragdag** ng helper text upang gabayan ang input ng user
-- **Gumagamit** ng semantic HTML structure para sa mas mahusay na accessibility
+**Pag-unawa sa pinahusay na pag-validate:**
+- **Pinagsasama** ang mga indicator ng kinakailangang field na may kapaki-pakinabang na mga paglalarawan
+- **Kasama** ang mga `pattern` na attribute para sa pag-validate ng format
+- **Nagbibigay** ng mga `title` na attribute para sa accessibility at mga tooltip
+- **Nagdaragdag** ng helper text para gabayan ang input ng user
+- **Gumagamit** ng semantic na istruktura ng HTML para sa mas mahusay na accessibility
 
-### Advanced Validation Rules
+### Mga Advanced na Panuntunan sa Pag-validate
 
-**Ano ang nagagawa ng bawat validation rule:**
+**Ano ang nagagawa ng bawat panuntunan sa pag-validate:**
 
-| Field | Validation Rules | Benepisyo sa User |
-|-------|------------------|-------------------|
-| Username | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | Tinitiyak ang valid, unique na identifiers |
-| Currency | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | Tumatanggap ng karaniwang mga simbolo ng currency |
+| Field | Mga Panuntunan sa Pag-validate | Benepisyo ng User |
+|-------|-------------------------------|-------------------|
+| Username | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | Tinitiyak ang wastong, natatanging mga identifier |
+| Currency | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | Tumatanggap ng mga karaniwang simbolo ng pera |
 | Balance | `min="0"`, `step="0.01"`, `type="number"` | Pinipigilan ang negatibong balanse |
 | Description | `maxlength="100"` | Makatuwirang limitasyon sa haba |
 
-### Pagsubok sa Validation Behavior
+### Pagsubok sa Pag-uugali ng Pag-validate
 
-**Subukan ang mga validation scenario na ito:**
-1. **Isumite** ang form na may mga walang laman na required fields
+**Subukan ang mga senaryo ng pag-validate na ito:**
+1. **Isumite** ang form na may mga walang laman na kinakailangang field
 2. **Maglagay** ng username na mas maikli sa 3 karakter
-3. **Subukan** ang mga special characters sa username field
+3. **Subukan** ang mga espesyal na karakter sa field ng username
 4. **Mag-input** ng negatibong halaga ng balanse
 
-![Screenshot na nagpapakita ng validation error kapag sinusubukang isumite ang form](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.tl.png)
+![Screenshot na nagpapakita ng error sa pag-validate kapag sinusubukang isumite ang form](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.tl.png)
 
 **Ano ang iyong mapapansin:**
-- **Ipinapakita ng browser** ang mga native na validation messages
-- **Nagbabago ang styling** batay sa `:valid` at `:invalid` states
-- **Pinipigilan ang pagsusumite ng form** hanggang sa maipasa ang lahat ng validations
+- **Ipinapakita ng browser** ang mga native na mensahe ng pag-validate
+- **Nagbabago ang estilo** batay sa mga estado ng `:valid` at `:invalid`
+- **Ang pagsusumite ng form** ay pinipigilan hanggang sa maipasa ang lahat ng pag-validate
 - **Awtomatikong lumilipat ang focus** sa unang invalid na field
 
-### Client-Side vs Server-Side Validation
+### Pag-validate sa Client-Side vs Server-Side
 
 ```mermaid
 graph LR
@@ -733,48 +815,138 @@ graph LR
 ```
 
 **Bakit kailangan mo ng parehong layer:**
-- **Client-side validation**: Nagbibigay ng agarang feedback at pinapabuti ang karanasan ng user
-- **Server-side validation**: Tinitiyak ang seguridad at humahawak ng mga kumplikadong business rules
+- **Pag-validate sa client-side**: Nagbibigay ng agarang feedback at pinapabuti ang karanasan ng user
+- **Pag-validate sa server-side**: Tinitiyak ang seguridad at pinangangasiwaan ang mga kumplikadong panuntunan sa negosyo
 - **Pinagsamang diskarte**: Lumilikha ng matibay, user-friendly, at secure na mga aplikasyon
 - **Progressive enhancement**: Gumagana kahit naka-disable ang JavaScript
 
-> 🛡️ **Paalala sa Seguridad**: Huwag kailanman umasa sa client-side validation lamang! Maaaring i-bypass ng mga malisyosong user ang client-side checks, kaya't mahalaga ang server-side validation para sa seguridad at integridad ng data.
+> 🛡️ **Paalala sa Seguridad**: Huwag kailanman umasa lamang sa pag-validate sa client-side! Maaaring i-bypass ng mga malisyosong user ang mga check sa client-side, kaya't mahalaga ang pag-validate sa server-side para sa seguridad at integridad ng data.
+
+### ⚡ **Ano ang Magagawa Mo sa Susunod na 5 Minuto**
+- [ ] Subukan ang iyong form gamit ang invalid na data para makita ang mga mensahe ng pag-validate
+- [ ] Subukang isumite ang form na naka-disable ang JavaScript para makita ang pag-validate ng HTML5
+- [ ] Buksan ang browser DevTools at suriin ang data ng form na ipinapadala sa server
+- [ ] Mag-eksperimento sa iba't ibang uri ng input para makita ang mga pagbabago sa mobile keyboard
+
+### 🎯 **Ano ang Magagawa Mo sa Loob ng Isang Oras**
+- [ ] Kumpletuhin ang post-lesson quiz at unawain ang mga konsepto sa paghawak ng form
+- [ ] Ipatupad ang hamon sa komprehensibong pag-validate na may real-time na feedback
+- [ ] Magdagdag ng CSS styling para lumikha ng mga propesyonal na form
+- [ ] Gumawa ng paghawak ng error para sa mga duplicate na username at mga error sa server
+- [ ] Magdagdag ng mga field para sa kumpirmasyon ng password na may pag-validate ng pagkakatugma
+
+### 📅 **Ang Iyong Lingguhang Paglalakbay sa Pag-master ng Form**
+- [ ] Kumpletuhin ang buong banking app na may mga advanced na tampok ng form
+- [ ] Ipatupad ang kakayahan sa pag-upload ng file para sa mga profile picture o dokumento
+- [ ] Magdagdag ng mga multi-step na form na may mga progress indicator at pamamahala ng estado
+- [ ] Gumawa ng mga dynamic na form na umaangkop batay sa mga seleksyon ng user
+- [ ] Ipatupad ang autosave ng form at recovery para sa mas mahusay na karanasan ng user
+- [ ] Magdagdag ng advanced na pag-validate tulad ng email verification at formatting ng numero ng telepono
+
+### 🌟 **Ang Iyong Buwanang Pag-master sa Frontend Development**
+- [ ] Bumuo ng mga kumplikadong aplikasyon ng form na may conditional logic at workflows
+- [ ] Matutunan ang mga library ng form at mga framework para sa mabilis na pag-develop
+- [ ] I-master ang mga alituntunin sa accessibility at mga prinsipyo ng inclusive na disenyo
+- [ ] Ipatupad ang internationalization at localization para sa mga global na form
+- [ ] Gumawa ng mga reusable na component ng form library at mga sistema ng disenyo
+- [ ] Mag-ambag sa mga open source na proyekto ng form at magbahagi ng mga pinakamahusay na kasanayan
+
+## 🎯 Ang Iyong Timeline sa Pag-master ng Form Development
 
----
-
----
-
-## Hamon ng GitHub Copilot Agent 🚀
-
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
-
-**Deskripsyon:** Pagandahin ang registration form gamit ang komprehensibong client-side validation at user feedback. Ang hamon na ito ay makakatulong sa iyo na magsanay sa pag-validate ng form, paghawak ng error, at pagpapabuti ng karanasan ng user gamit ang interactive na feedback.
-
-**Prompt:** Gumawa ng kumpletong sistema ng validation para sa registration form na naglalaman ng: 1) Real-time na validation feedback para sa bawat field habang nagta-type ang user, 2) Custom na validation messages na lumalabas sa ibaba ng bawat input field, 3) Isang password confirmation field na may matching validation, 4) Mga visual na indicator (tulad ng green checkmarks para sa valid fields at red warnings para sa invalid), 5) Isang submit button na nagiging enabled lamang kapag naipasa ang lahat ng validations. Gumamit ng HTML5 validation attributes, CSS para sa pag-style ng validation states, at JavaScript para sa interactive na behavior.
+```mermaid
+timeline
+    title Form Development & User Experience Learning Progression
+    
+    section HTML Foundation (15 minutes)
+        Semantic Forms: Form elements
+                      : Input types
+                      : Labels and accessibility
+                      : Progressive enhancement
+        
+    section JavaScript Integration (25 minutes)
+        Event Handling: Form submission
+                      : Data collection
+                      : AJAX communication
+                      : Async/await patterns
+        
+    section Validation Systems (35 minutes)
+        Multi-layer Security: HTML5 validation
+                            : Client-side logic
+                            : Server-side verification
+                            : Error handling
+        
+    section User Experience (45 minutes)
+        Interface Polish: Loading states
+                        : Success messaging
+                        : Error recovery
+                        : Accessibility features
+        
+    section Advanced Patterns (1 week)
+        Professional Forms: Dynamic validation
+                          : Multi-step workflows
+                          : File uploads
+                          : Real-time feedback
+        
+    section Enterprise Skills (1 month)
+        Production Applications: Form libraries
+                               : Testing strategies
+                               : Performance optimization
+                               : Security best practices
+```
 
-Matuto pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+### 🛠️ Buod ng Iyong Toolkit sa Pag-develop ng Form
+
+Pagkatapos makumpleto ang araling ito, na-master mo na ang:
+- **HTML5 Forms**: Semantic na istruktura, mga uri ng input, at mga tampok ng accessibility
+- **Paghawak ng Form sa JavaScript**: Pamamahala ng event, koleksyon ng data, at komunikasyon ng AJAX
+- **Arkitektura ng Pag-validate**: Multi-layer na pag-validate para sa seguridad at karanasan ng user
+- **Asynchronous Programming**: Modernong fetch API at mga pattern ng async/await
+- **Pamamahala ng Error**: Komprehensibong paghawak ng error at mga sistema ng feedback ng user
+- **Disenyo ng Karanasan ng User**: Mga loading state, mga mensahe ng tagumpay, at pag-recover ng error
+- **Progressive Enhancement**: Mga form na gumagana sa lahat ng browser at kakayahan
+
+**Mga Aplikasyon sa Tunay na Mundo**: Ang iyong mga kasanayan sa pag-develop ng form ay direktang naaangkop sa:
+- **E-commerce Applications**: Mga proseso ng checkout, pagrehistro ng account, at mga form ng pagbabayad
+- **Enterprise Software**: Mga sistema ng pagpasok ng data, mga interface ng pag-uulat, at mga aplikasyon ng workflow
+- **Content Management**: Mga platform ng pag-publish, user-generated content, at mga interface ng administrasyon
+- **Financial Applications**: Mga interface ng banking, mga platform ng pamumuhunan, at mga sistema ng transaksyon
+- **Healthcare Systems**: Mga portal ng pasyente, pag-schedule ng appointment, at mga form ng medikal na rekord
+- **Educational Platforms**: Pagrehistro ng kurso, mga tool sa pagtatasa, at mga sistema ng pamamahala ng pag-aaral
+
+**Mga Propesyonal na Kasanayan na Nakuha**: Ngayon ay kaya mo nang:
+- **Magdisenyo** ng mga accessible na form na gumagana para sa lahat ng user kabilang ang mga may kapansanan
+- **Magpatupad** ng secure na pag-validate ng form na pumipigil sa korapsyon ng data at mga kahinaan sa seguridad
+- **Lumikha** ng mga tumutugon na user interface na nagbibigay ng malinaw na feedback at gabay
+- **Mag-debug** ng mga kumplikadong interaksyon ng form gamit ang browser developer tools at network analysis
+- **Mag-optimize** ng performance ng form sa pamamagitan ng episyenteng paghawak ng data at mga diskarte sa pag-validate
+
+**Mga Konsepto sa Frontend Development na Na-master**:
+- **Event-
+**Prompt:** Gumawa ng kumpletong sistema ng pag-validate ng form para sa registration form na may kasamang: 1) Real-time na feedback sa pag-validate para sa bawat field habang nagta-type ang user, 2) Mga custom na mensahe ng pag-validate na lumalabas sa ibaba ng bawat input field, 3) Isang password confirmation field na may validation para sa pagkakatugma, 4) Mga visual na indikasyon (tulad ng berdeng checkmark para sa valid na mga field at pulang babala para sa mga hindi valid), 5) Isang submit button na magiging enabled lamang kapag pumasa ang lahat ng validation. Gumamit ng HTML5 validation attributes, CSS para sa pag-istilo ng validation states, at JavaScript para sa interactive na behavior.
+
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Hamon
 
 Magpakita ng error message sa HTML kung ang user ay umiiral na.
 
-Narito ang isang halimbawa ng kung ano ang maaaring hitsura ng final login page pagkatapos ng kaunting pag-style:
+Narito ang isang halimbawa ng kung ano ang magiging hitsura ng final login page pagkatapos ng kaunting pag-istilo:
 
-![Screenshot ng login page pagkatapos magdagdag ng mga estilo ng CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.tl.png)
+![Screenshot ng login page pagkatapos magdagdag ng mga estilo sa CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.tl.png)
 
-## Quiz Pagkatapos ng Leksyon
+## Post-Lecture Quiz
 
-[Quiz pagkatapos ng leksyon](https://ff-quizzes.netlify.app/web/quiz/44)
+[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/44)
 
-## Review at Sariling Pag-aaral
+## Review & Pag-aaral sa Sarili
 
-Ang mga developer ay naging napaka-malikhain sa kanilang mga pagsisikap sa paggawa ng form, lalo na sa mga validation strategies. Alamin ang iba't ibang daloy ng form sa pamamagitan ng pagtingin sa [CodePen](https://codepen.com); makakahanap ka ba ng mga kawili-wili at nakaka-inspire na mga form?
+Ang mga developer ay naging napaka-malikhain sa kanilang mga pagsisikap sa paggawa ng form, lalo na sa mga estratehiya sa pag-validate. Alamin ang iba't ibang daloy ng form sa pamamagitan ng pagtingin sa [CodePen](https://codepen.com); makakakita ka ba ng mga kawili-wili at nakaka-inspire na mga form?
 
 ## Takdang-Aralin
 
-[Style your bank app](assignment.md)
+[Istilo ang iyong bank app](assignment.md)
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi eksaktong salin. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/7-bank-project/3-data/README.md b/translations/tl/7-bank-project/3-data/README.md
index 6cac940d21..4ac1a88c8f 100644
--- a/translations/tl/7-bank-project/3-data/README.md
+++ b/translations/tl/7-bank-project/3-data/README.md
@@ -1,19 +1,72 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "2c1164912414820c8efd699b43f64954",
-  "translation_date": "2025-10-22T15:34:22+00:00",
+  "original_hash": "86ee5069f27ea3151389d8687c95fac9",
+  "translation_date": "2025-11-03T13:59:01+00:00",
   "source_file": "7-bank-project/3-data/README.md",
   "language_code": "tl"
 }
 -->
-# Paggawa ng Banking App Bahagi 3: Mga Paraan ng Pagkuha at Paggamit ng Data
+# Gumawa ng Banking App Bahagi 3: Mga Paraan ng Pagkuha at Paggamit ng Data
 
-Isipin ang computer ng Enterprise sa Star Trek - kapag tinanong ni Captain Picard ang status ng barko, agad na lumalabas ang impormasyon nang hindi nasisira ang buong interface o muling binubuo ang sarili nito. Ang tuluy-tuloy na daloy ng impormasyon na iyon ang eksaktong ginagawa natin dito gamit ang dynamic na pagkuha ng data.
+Isipin ang computer ng Enterprise sa Star Trek - kapag tinanong ni Captain Picard ang status ng barko, agad na lumalabas ang impormasyon nang hindi nagre-restart o nagre-rebuild ang buong interface. Ang seamless na daloy ng impormasyon na iyon ang eksaktong ginagawa natin dito gamit ang dynamic na pagkuha ng data.
 
-Sa ngayon, ang iyong banking app ay parang isang naka-print na pahayagan - nagbibigay ng impormasyon ngunit static. Gagawin natin itong parang mission control sa NASA, kung saan tuluy-tuloy ang daloy ng data at nag-a-update nang real-time nang hindi naaabala ang workflow ng user.
+Sa ngayon, ang iyong banking app ay parang isang naka-print na pahayagan - nagbibigay ng impormasyon pero static. Gagawin natin itong parang mission control sa NASA, kung saan tuloy-tuloy ang daloy ng data at nag-a-update nang real-time nang hindi naaabala ang workflow ng user.
 
-Matututo kang makipag-ugnayan sa mga server nang asynchronous, mag-handle ng data na dumarating sa iba't ibang oras, at gawing makabuluhan ang raw na impormasyon para sa iyong mga user. Ito ang pagkakaiba ng demo software sa production-ready software.
+Matututo kang makipag-ugnayan sa mga server nang asynchronous, mag-handle ng data na dumarating sa iba't ibang oras, at gawing makabuluhan ang raw na impormasyon para sa iyong mga user. Ito ang pagkakaiba ng demo sa production-ready na software.
+
+## ⚡ Mga Magagawa Mo sa Susunod na 5 Minuto
+
+**Mabilisang Landas para sa Abalang Developer**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Set up API server]
+    B --> C[Test fetch with curl]
+    C --> D[Create login function]
+    D --> E[See data in action]
+```
+
+- **Minuto 1-2**: I-start ang iyong API server (`cd api && npm start`) at i-test ang koneksyon
+- **Minuto 3**: Gumawa ng basic na `getAccount()` function gamit ang fetch
+- **Minuto 4**: I-wire up ang login form gamit ang `action="javascript:login()"`
+- **Minuto 5**: I-test ang login at panoorin ang account data na lumabas sa console
+
+**Mabilisang Test Commands**:
+```bash
+# Verify API is running
+curl http://localhost:5000/api
+
+# Test account data fetch
+curl http://localhost:5000/api/accounts/test
+```
+
+**Bakit Mahalaga Ito**: Sa loob ng 5 minuto, makikita mo ang magic ng asynchronous data fetching na nagpapatakbo sa bawat modernong web application. Ito ang pundasyon na nagpaparamdam sa mga app na responsive at buhay.
+
+## 🗺️ Ang Iyong Learning Journey sa Data-Driven Web Applications
+
+```mermaid
+journey
+    title From Static Pages to Dynamic Applications
+    section Understanding the Evolution
+      Traditional page reloads: 3: You
+      Discover AJAX/SPA benefits: 5: You
+      Master Fetch API patterns: 7: You
+    section Building Authentication
+      Create login functions: 4: You
+      Handle async operations: 6: You
+      Manage user sessions: 8: You
+    section Dynamic UI Updates
+      Learn DOM manipulation: 5: You
+      Build transaction displays: 7: You
+      Create responsive dashboards: 9: You
+    section Professional Patterns
+      Template-based rendering: 6: You
+      Error handling strategies: 7: You
+      Performance optimization: 8: You
+```
+
+**Destinasyon ng Iyong Paglalakbay**: Sa pagtatapos ng araling ito, maiintindihan mo kung paano kumukuha, nagpoproseso, at nagpapakita ng data ang mga modernong web application nang dynamic, na lumilikha ng seamless na karanasan para sa user na inaasahan sa mga propesyonal na aplikasyon.
 
 ## Pre-Lecture Quiz
 
@@ -21,33 +74,78 @@ Matututo kang makipag-ugnayan sa mga server nang asynchronous, mag-handle ng dat
 
 ### Mga Kinakailangan
 
-Bago sumabak sa pagkuha ng data, tiyaking handa ka sa mga sumusunod na bahagi:
+Bago sumabak sa pagkuha ng data, siguraduhing handa ka sa mga sumusunod na components:
 
-- **Nakaraang Aralin**: Kumpletuhin ang [Login at Registration Form](../2-forms/README.md) - magpapatuloy tayo sa pundasyong ito
+- **Nakaraang Aralin**: Kumpletuhin ang [Login at Registration Form](../2-forms/README.md) - magtatayo tayo sa pundasyong ito
 - **Local Server**: I-install ang [Node.js](https://nodejs.org) at [patakbuhin ang server API](../api/README.md) para magbigay ng account data
-- **API Connection**: Subukan ang koneksyon ng iyong server gamit ang command na ito:
+- **API Connection**: I-test ang koneksyon ng iyong server gamit ang command na ito:
 
 ```bash
 curl http://localhost:5000/api
 # Expected response: "Bank API v1.0.0"
 ```
 
-Ang mabilis na test na ito ay nagsisiguro na ang lahat ng bahagi ay maayos na nakikipag-ugnayan:
-- Tinitiyak na ang Node.js ay maayos na tumatakbo sa iyong sistema
+Ang mabilisang test na ito ay nagsisiguro na ang lahat ng components ay maayos na nag-uusap:
+- Pinapatunayan na ang Node.js ay maayos na tumatakbo sa iyong sistema
 - Kinukumpirma na ang iyong API server ay aktibo at tumutugon
 - Pinapatunayan na ang iyong app ay maabot ang server (parang pag-check ng radio contact bago ang isang misyon)
 
+## 🧠 Overview ng Data Management Ecosystem
+
+```mermaid
+mindmap
+  root((Data Management))
+    Authentication Flow
+      Login Process
+        Form Validation
+        Credential Verification
+        Session Management
+      User State
+        Global Account Object
+        Navigation Guards
+        Error Handling
+    API Communication
+      Fetch Patterns
+        GET Requests
+        POST Requests
+        Error Responses
+      Data Formats
+        JSON Processing
+        URL Encoding
+        Response Parsing
+    Dynamic UI Updates
+      DOM Manipulation
+        Safe Text Updates
+        Element Creation
+        Template Cloning
+      User Experience
+        Real-time Updates
+        Error Messages
+        Loading States
+    Security Considerations
+      XSS Prevention
+        textContent Usage
+        Input Sanitization
+        Safe HTML Creation
+      CORS Handling
+        Cross-Origin Requests
+        Header Configuration
+        Development Setup
+```
+
+**Pangunahing Prinsipyo**: Ang mga modernong web application ay mga sistema ng data orchestration - pinagsasama-sama ang user interfaces, server APIs, at browser security models para makalikha ng seamless, responsive na karanasan.
+
 ---
 
 ## Pag-unawa sa Pagkuha ng Data sa Modernong Web Apps
 
-Ang paraan ng pag-handle ng data ng mga web application ay lubos na nagbago sa nakalipas na dalawang dekada. Ang pag-unawa sa ebolusyong ito ay makakatulong sa iyo na ma-appreciate kung bakit ang mga modernong teknolohiya tulad ng AJAX at Fetch API ay napakalakas at kung bakit sila naging mahalagang kasangkapan para sa mga web developer.
+Ang paraan ng pag-handle ng data ng mga web application ay lubos na nag-evolve sa nakalipas na dalawang dekada. Ang pag-unawa sa ebolusyong ito ay makakatulong sa iyo na ma-appreciate kung bakit ang mga modernong teknolohiya tulad ng AJAX at Fetch API ay napakalakas at kung bakit sila naging mahalagang tools para sa mga web developer.
 
-Tuklasin natin kung paano gumagana ang mga tradisyunal na website kumpara sa mga dynamic at responsive na application na ginagawa natin ngayon.
+Tuklasin natin kung paano gumagana ang mga tradisyunal na website kumpara sa mga dynamic, responsive na application na ginagawa natin ngayon.
 
 ### Tradisyunal na Multi-Page Applications (MPA)
 
-Sa mga unang araw ng web, bawat click ay parang pagpapalit ng channel sa lumang telebisyon - magbablanko ang screen, pagkatapos ay dahan-dahang magpapakita ng bagong content. Ganito ang realidad ng mga unang web application, kung saan bawat interaksyon ay nangangahulugan ng muling pagbubuo ng buong pahina mula sa simula.
+Noong unang panahon ng web, bawat click ay parang pagpapalit ng channel sa lumang telebisyon - magbablanko ang screen, tapos dahan-dahang maglo-load ang bagong content. Ganito ang realidad ng mga unang web application, kung saan bawat interaction ay nangangahulugan ng ganap na pag-rebuild ng buong page mula sa simula.
 
 ```mermaid
 sequenceDiagram
@@ -62,17 +160,17 @@ sequenceDiagram
     Browser->>User: Displays new page (flash/reload)
 ```
 
-![Workflow ng pag-update sa isang multi-page application](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.tl.png)
+![Workflow ng pag-update sa multi-page application](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.tl.png)
 
 **Bakit pakiramdam na clunky ang approach na ito:**
-- Bawat click ay nangangahulugan ng muling pagbubuo ng buong pahina mula sa simula
-- Ang mga user ay naaabala sa gitna ng kanilang iniisip dahil sa nakakainis na page flashes
+- Bawat click ay nangangahulugan ng pag-rebuild ng buong page mula sa simula
+- Naiistorbo ang mga user sa gitna ng kanilang iniisip dahil sa mga nakakainis na page flashes
 - Ang iyong internet connection ay nagtatrabaho nang sobra sa pag-download ng parehong header at footer nang paulit-ulit
 - Ang mga app ay parang pag-click sa filing cabinet kaysa sa paggamit ng software
 
 ### Modernong Single-Page Applications (SPA)
 
-Binago ng AJAX (Asynchronous JavaScript and XML) ang paradigm na ito nang buo. Tulad ng modular na disenyo ng International Space Station, kung saan maaaring palitan ng mga astronaut ang mga indibidwal na bahagi nang hindi muling binubuo ang buong istruktura, pinapayagan tayo ng AJAX na i-update ang mga partikular na bahagi ng webpage nang hindi nire-reload ang lahat. Kahit na binabanggit ng pangalan ang XML, kadalasan ay JSON ang ginagamit natin ngayon, ngunit nananatili ang pangunahing prinsipyo: i-update lamang ang kailangang baguhin.
+Binago ng AJAX (Asynchronous JavaScript and XML) ang paradigm na ito nang buo. Tulad ng modular na disenyo ng International Space Station, kung saan maaaring palitan ng mga astronaut ang mga indibidwal na components nang hindi nire-rebuild ang buong istruktura, pinapayagan tayo ng AJAX na i-update ang mga partikular na bahagi ng webpage nang hindi nire-reload ang lahat. Kahit na binabanggit ng pangalan ang XML, kadalasan ay JSON ang ginagamit natin ngayon, pero nananatili ang pangunahing prinsipyo: i-update lang ang kailangang baguhin.
 
 ```mermaid
 sequenceDiagram
@@ -89,22 +187,22 @@ sequenceDiagram
     Browser->>User: Shows updated content (no reload)
 ```
 
-![Workflow ng pag-update sa isang single-page application](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.tl.png)
+![Workflow ng pag-update sa single-page application](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.tl.png)
 
 **Bakit mas maganda ang pakiramdam ng SPAs:**
-- Ang mga bahagi lamang na talagang nagbago ang na-update (matalino, di ba?)
+- Ang mga bahagi lang na talagang nagbago ang na-update (matalino, di ba?)
 - Wala nang nakakagulat na interruptions - nananatili ang mga user sa kanilang flow
 - Mas kaunting data ang dumadaan sa wire kaya mas mabilis ang pag-load
-- Ang lahat ay pakiramdam na snappy at responsive, tulad ng mga app sa iyong telepono
+- Lahat ay pakiramdam na snappy at responsive, tulad ng mga app sa iyong telepono
 
 ### Ang Ebolusyon sa Modernong Fetch API
 
-Nagbibigay ang mga modernong browser ng [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), na pumapalit sa mas lumang [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Tulad ng pagkakaiba ng paggamit ng telegrapo at email, ang Fetch API ay gumagamit ng promises para sa mas malinis na asynchronous na code at natural na hinahandle ang JSON.
+Nagbibigay ang mga modernong browser ng [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), na pumapalit sa mas lumang [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Tulad ng pagkakaiba ng paggamit ng telegraph at email, gumagamit ang Fetch API ng promises para sa mas malinis na asynchronous na code at natural na hinahandle ang JSON.
 
-| Tampok | XMLHttpRequest | Fetch API |
-|-------|----------------|----------|
+| Feature | XMLHttpRequest | Fetch API |
+|---------|----------------|----------|
 | **Syntax** | Kumplikadong callback-based | Malinis na promise-based |
-| **JSON Handling** | Kinakailangan ang manual parsing | Built-in `.json()` method |
+| **JSON Handling** | Kinakailangang manual parsing | Built-in na `.json()` method |
 | **Error Handling** | Limitadong impormasyon sa error | Komprehensibong detalye ng error |
 | **Modern Support** | Legacy compatibility | ES6+ promises at async/await |
 
@@ -112,18 +210,18 @@ Nagbibigay ang mga modernong browser ng [`Fetch` API](https://developer.mozilla.
 > 
 **Ang bottom line:**
 - Gumagana nang mahusay sa Chrome, Firefox, Safari, at Edge (karamihan sa mga lugar kung nasaan ang iyong mga user)
-- Ang Internet Explorer lamang ang nangangailangan ng karagdagang tulong (at sa totoo lang, panahon na para bitawan ang IE)
+- Ang Internet Explorer lang ang nangangailangan ng dagdag na tulong (at honestly, panahon na para bitawan ang IE)
 - Perpektong nakahanda para sa eleganteng async/await patterns na gagamitin natin mamaya
 
-### Pagpapatupad ng User Login at Pagkuha ng Data
+### Pag-implement ng User Login at Pagkuha ng Data
 
-Ngayon, ipapatupad natin ang login system na magbabago sa iyong banking app mula sa static na display patungo sa functional na application. Tulad ng mga authentication protocols na ginagamit sa mga secure na pasilidad ng militar, ivavalidate natin ang mga kredensyal ng user at pagkatapos ay magbibigay ng access sa kanilang partikular na data.
+Ngayon, i-implement natin ang login system na magta-transform sa iyong banking app mula sa static na display patungo sa functional na application. Tulad ng authentication protocols na ginagamit sa mga secure na pasilidad ng militar, i-verify natin ang user credentials at pagkatapos ay magbibigay ng access sa kanilang partikular na data.
 
-Gagawin natin ito nang paunti-unti, simula sa basic authentication at pagkatapos ay idagdag ang mga kakayahan sa pagkuha ng data.
+Gagawin natin ito nang paunti-unti, simula sa basic authentication at pagkatapos ay idagdag ang data-fetching capabilities.
 
-#### Hakbang 1: Gumawa ng Pundasyon ng Login Function
+#### Hakbang 1: Gumawa ng Foundation ng Login Function
 
-Buksan ang iyong `app.js` file at magdagdag ng bagong `login` function. Ito ang maghahandle ng proseso ng authentication ng user:
+Buksan ang iyong `app.js` file at magdagdag ng bagong `login` function. Ito ang magha-handle ng proseso ng user authentication:
 
 ```javascript
 async function login() {
@@ -133,16 +231,16 @@ async function login() {
 ```
 
 **I-breakdown natin ito:**
-- Ang `async` keyword? Sinasabi nito sa JavaScript "hey, maaaring kailanganin ng function na ito na maghintay para sa mga bagay"
-- Kinukuha natin ang form mula sa pahina (walang fancy, hinahanap lang ito gamit ang ID nito)
-- Pagkatapos ay kinukuha natin ang anumang tinype ng user bilang kanilang username
-- Narito ang isang neat na trick: maaari mong ma-access ang anumang form input gamit ang `name` attribute nito - walang kailangan para sa dagdag na getElementById calls!
+- Ang `async` keyword? Sinasabi nito sa JavaScript "hey, maaaring maghintay ang function na ito para sa mga bagay"
+- Kinukuha natin ang form mula sa page (walang fancy, hinahanap lang ito gamit ang ID nito)
+- Pagkatapos, kinukuha natin ang anumang tinype ng user bilang kanilang username
+- Narito ang isang neat na trick: maaari mong ma-access ang anumang form input gamit ang `name` attribute nito - walang kailangan na dagdag na getElementById calls!
 
-> 💡 **Form Access Pattern**: Ang bawat form control ay maaaring ma-access gamit ang name (itinakda sa HTML gamit ang `name` attribute) bilang property ng form element. Nagbibigay ito ng malinis at nababasang paraan para makuha ang data ng form.
+> 💡 **Form Access Pattern**: Ang bawat form control ay maaaring ma-access gamit ang name (na itinakda sa HTML gamit ang `name` attribute) bilang property ng form element. Nagbibigay ito ng malinis, readable na paraan para makuha ang form data.
 
 #### Hakbang 2: Gumawa ng Account Data Fetching Function
 
-Susunod, gagawa tayo ng dedicated function para kunin ang account data mula sa server. Sinusunod nito ang parehong pattern ng iyong registration function ngunit nakatuon sa pagkuha ng data:
+Susunod, gagawa tayo ng dedikadong function para kunin ang account data mula sa server. Sinusunod nito ang parehong pattern ng iyong registration function pero nakatuon sa pagkuha ng data:
 
 ```javascript
 async function getAccount(user) {
@@ -156,36 +254,54 @@ async function getAccount(user) {
 ```
 
 **Narito ang nagagawa ng code na ito:**
-- **Ginagamit** ang modernong `fetch` API para mag-request ng data nang asynchronous
-- **Gumagawa** ng GET request URL gamit ang username parameter
-- **Ina-apply** ang `encodeURIComponent()` para ligtas na ma-handle ang special characters sa URLs
+- **Gumagamit** ng modernong `fetch` API para mag-request ng data nang asynchronous
+- **Nagko-construct** ng GET request URL gamit ang username parameter
+- **Nag-aapply** ng `encodeURIComponent()` para ligtas na ma-handle ang special characters sa URLs
 - **Kinoconvert** ang response sa JSON format para sa madaling data manipulation
-- **Hinahandle** ang errors nang maayos sa pamamagitan ng pagbabalik ng error object sa halip na mag-crash
+- **Nagha-handle** ng errors nang maayos sa pamamagitan ng pagbalik ng error object sa halip na mag-crash
 
-> ⚠️ **Security Note**: Ang `encodeURIComponent()` function ay nagha-handle ng special characters sa URLs. Tulad ng encoding systems na ginagamit sa naval communications, tinitiyak nito na ang iyong mensahe ay darating nang eksakto kung paano ito nilayon, pinipigilan ang mga character tulad ng "#" o "&" na ma-misinterpret.
+> ⚠️ **Security Note**: Ang `encodeURIComponent()` function ay nagha-handle ng special characters sa URLs. Tulad ng encoding systems na ginagamit sa naval communications, sinisiguro nito na ang iyong mensahe ay darating nang eksakto sa intended na paraan, pinipigilan ang mga character tulad ng "#" o "&" na ma-misinterpret.
 > 
 **Bakit ito mahalaga:**
 - Pinipigilan ang special characters na masira ang URLs
 - Pinoprotektahan laban sa URL manipulation attacks
-- Tinitiyak na ang iyong server ay makakatanggap ng intended data
+- Sinisiguro na ang iyong server ay makakatanggap ng intended na data
 - Sumusunod sa secure coding practices
 
 #### Pag-unawa sa HTTP GET Requests
 
-Narito ang isang bagay na maaaring magulat ka: kapag ginamit mo ang `fetch` nang walang anumang dagdag na options, awtomatikong gumagawa ito ng [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) request. Perpekto ito para sa ginagawa natin - humihiling sa server "hey, maaari ko bang makita ang account data ng user na ito?"
+Narito ang isang bagay na maaaring magulat ka: kapag ginamit mo ang `fetch` nang walang anumang extra options, awtomatikong gumagawa ito ng [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) request. Perpekto ito para sa ginagawa natin - humihiling sa server "hey, maaari ko bang makita ang account data ng user na ito?"
 
-Isipin ang GET requests na parang magalang na paghingi ng libro sa library - humihiling ka na makita ang isang bagay na umiiral na. Ang POST requests (na ginamit natin para sa registration) ay mas parang pagsusumite ng bagong libro para idagdag sa koleksyon.
+Isipin ang GET requests na parang magalang na paghingi ng libro sa library - humihiling ka na makita ang isang bagay na umiiral na. Ang POST requests (na ginamit natin para sa registration) ay mas katulad ng pagsusumite ng bagong libro para idagdag sa koleksyon.
 
 | GET Request | POST Request |
 |-------------|-------------|
 | **Layunin** | Kunin ang umiiral na data | Magpadala ng bagong data sa server |
 | **Parameters** | Sa URL path/query string | Sa request body |
-| **Caching** | Maaaring i-cache ng mga browser | Hindi karaniwang naka-cache |
-| **Seguridad** | Nakikita sa URL/logs | Nakatago sa request body |
+| **Caching** | Maaaring i-cache ng browsers | Hindi karaniwang naka-cache |
+| **Security** | Nakikita sa URL/logs | Nakatago sa request body |
+
+```mermaid
+sequenceDiagram
+    participant B as Browser
+    participant S as Server
+    
+    Note over B,S: GET Request (Data Retrieval)
+    B->>S: GET /api/accounts/test
+    S-->>B: 200 OK + Account Data
+    
+    Note over B,S: POST Request (Data Submission)
+    B->>S: POST /api/accounts + New Account Data
+    S-->>B: 201 Created + Confirmation
+    
+    Note over B,S: Error Handling
+    B->>S: GET /api/accounts/nonexistent
+    S-->>B: 404 Not Found + Error Message
+```
 
 #### Hakbang 3: Pagsasama-sama ng Lahat
 
-Ngayon para sa nakaka-satisfy na bahagi - ikonekta natin ang iyong account fetching function sa login process. Dito nagkakaroon ng koneksyon ang lahat:
+Ngayon para sa satisfying na bahagi - i-connect natin ang iyong account fetching function sa login process. Dito nagkakaroon ng click ang lahat:
 
 ```javascript
 async function login() {
@@ -204,15 +320,15 @@ async function login() {
 
 Ang function na ito ay sumusunod sa malinaw na sequence:
 - Kunin ang username mula sa form input
-- Humiling ng account data ng user mula sa server
+- I-request ang account data ng user mula sa server
 - I-handle ang anumang errors na mangyayari sa proseso
-- I-store ang account data at mag-navigate sa dashboard kapag tagumpay
+- I-store ang account data at mag-navigate sa dashboard kapag successful
 
-> 🎯 **Async/Await Pattern**: Dahil ang `getAccount` ay isang asynchronous function, ginagamit natin ang `await` keyword para i-pause ang execution hanggang sa tumugon ang server. Pinipigilan nito ang code na magpatuloy nang may undefined na data.
+> 🎯 **Async/Await Pattern**: Dahil ang `getAccount` ay isang asynchronous function, ginagamit natin ang `await` keyword para i-pause ang execution hanggang sa tumugon ang server. Pinipigilan nito ang code na magpatuloy nang undefined ang data.
 
 #### Hakbang 4: Gumawa ng Tahanan para sa Iyong Data
 
-Kailangan ng iyong app ng lugar para maalala ang impormasyon ng account kapag na-load na ito. Isipin ito na parang short-term memory ng iyong app - isang lugar para panatilihing handy ang data ng kasalukuyang user. Magdagdag ng linyang ito sa itaas ng iyong `app.js` file:
+Ang iyong app ay nangangailangan ng lugar para maalala ang impormasyon ng account kapag na-load na ito. Isipin ito na parang short-term memory ng iyong app - isang lugar para panatilihing handy ang data ng kasalukuyang user. Magdagdag ng linyang ito sa itaas ng iyong `app.js` file:
 
 ```javascript
 // This holds the current user's account data
@@ -222,12 +338,12 @@ let account = null;
 **Bakit natin ito kailangan:**
 - Pinapanatili ang account data na accessible mula sa kahit saan sa iyong app
 - Ang pagsisimula sa `null` ay nangangahulugang "wala pang naka-login"
-- Ina-update kapag may matagumpay na nag-login o nag-register
-- Kumilos bilang isang single source of truth - walang kalituhan kung sino ang naka-login
+- Na-update kapag may nag-login o nag-register nang matagumpay
+- Kumilos bilang single source of truth - walang kalituhan kung sino ang naka-login
 
 #### Hakbang 5: I-wire Up ang Iyong Form
 
-Ngayon, ikonekta natin ang iyong bagong login function sa iyong HTML form. I-update ang iyong form tag nang ganito:
+Ngayon, i-connect natin ang iyong bagong login function sa iyong HTML form. I-update ang iyong form tag nang ganito:
 
 ```html
 <form id="loginForm" action="javascript:login()">
@@ -236,10 +352,10 @@ Ngayon, ikonekta natin ang iyong bagong login function sa iyong HTML form. I-upd
 ```
 
 **Ano ang ginagawa ng maliit na pagbabago na ito:**
-- Pinipigilan ang form na gawin ang default nitong "i-reload ang buong pahina" na behavior
-- Tinatawag ang iyong custom na JavaScript function sa halip
+- Pinipigilan ang form na gawin ang default nitong "i-reload ang buong page" na behavior
+- Tumatawag sa iyong custom na JavaScript function sa halip
 - Pinapanatili ang lahat na smooth at single-page-app-like
-- Binibigyan ka ng kumpletong kontrol sa kung ano ang mangyayari kapag pinindot ng mga user ang "Login"
+- Binibigyan ka ng kumpletong kontrol sa kung ano ang mangyayari kapag pinindot ng user ang "Login"
 
 #### Hakbang 6: Pagandahin ang Iyong Registration Function
 
@@ -256,7 +372,7 @@ navigate('/dashboard');
 - **Consistent** na user experience sa pagitan ng login at registration flows
 - **Immediate** na access sa account data pagkatapos ng matagumpay na registration
 
-#### Pagsubok sa Iyong Implementasyon
+#### Testing ng Iyong Implementation
 
 ```mermaid
 flowchart TD
@@ -270,10 +386,10 @@ flowchart TD
 ```
 
 **Panahon na para subukan ito:**
-1. Gumawa ng bagong account para tiyaking gumagana ang lahat
+1. Gumawa ng bagong account para masigurado na gumagana ang lahat
 2. Subukang mag-login gamit ang parehong credentials
-3. Silipin ang console ng iyong browser (F12) kung may tila hindi tama
-4. Tiyaking napupunta ka sa dashboard pagkatapos ng matagumpay na login
+3. Silipin ang console ng iyong browser (F12) kung may anumang tila mali
+4. Siguraduhin na mapunta ka sa dashboard pagkatapos ng matagumpay na login
 
 Kung may hindi gumagana, huwag mag-panic! Karamihan sa mga isyu ay simpleng ayusin tulad ng typos o pagkalimot na i-start ang API server.
 
@@ -281,36 +397,35 @@ Kung may hindi gumagana, huwag mag-panic! Karamihan sa mga isyu ay simpleng ayus
 
 Maaaring iniisip mo: "Paano nakikipag-usap ang aking web app sa API server na tumatakbo sa iba't ibang ports?" Magandang tanong! Ito ay tumutukoy sa isang bagay na bawat web developer ay natutuklasan kalaunan.
 
-> 🔒 **Cross-Origin Security**: Ang mga browser ay nagpapatupad ng "same-origin policy" upang maiwasan ang hindi awtorisadong komunikasyon sa pagitan ng iba't ibang domain. Tulad ng checkpoint system sa Pentagon, tinitiyak nila na ang komunikasyon ay awtorisado bago payagan ang paglipat ng data.
+> 🔒 **Cross-Origin Security**: Ang mga browser ay nagpapatupad ng "same-origin policy" para pigilan ang hindi awtorisadong komunikasyon sa pagitan ng iba't ibang domain. Tulad ng checkpoint system sa Pentagon, tinitiyak nila na ang komunikasyon ay awtorisado bago payagan ang data transfer.
 > 
 **Sa ating setup:**
 - Ang iyong web app ay tumatakbo sa `localhost:3000` (development server)
 - Ang iyong API server ay tumatakbo sa `localhost:5000` (backend server)
-- Ang API server ay naglalaman ng [CORS headers](https://developer.mozilla.org/docs/Web/HTTP/CORS) na tahasang nagbibigay awtorisasyon sa komunikasyon mula sa iyong web app
+- Ang API server ay naglalaman ng [CORS headers](https://developer.mozilla.org/docs/Web/HTTP/CORS) na tahasang nag-aawtorisa ng komunikasyon mula sa iyong web app
 
 Ang configuration na ito ay sumasalamin sa real-world development kung saan ang frontend at backend applications ay karaniwang tumatakbo sa magkahiwalay na server.
 
-> 📚 **Matuto Pa**: Tuklasin ang higit pa tungkol sa APIs at pagkuha ng data gamit ang komprehensibong [Microsoft Learn module on APIs](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon).
+> 📚 **Matuto Pa**: Tuklasin ang higit pa tungkol sa APIs at data fetching gamit ang komprehensibong [Microsoft Learn module tungkol sa APIs](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon).
 
 ## Pagdadala ng Iyong Data sa Buhay sa HTML
 
-Ngayon, gagawin nating visible sa mga user ang nakuha na data sa pamamagitan ng DOM manipulation. Tulad ng proseso ng pag-develop ng mga litrato sa darkroom, kinukuha natin ang invisible na data at nire-render ito sa isang bagay na makikita at ma-interact ng mga user.
+Ngayon, gagawin nating visible sa mga user ang fetched data sa pamamagitan ng DOM manipulation. Tulad ng proseso ng pag-develop ng mga litrato sa darkroom, gagawin nating nakikita at interactive ang invisible na data.
+Ang manipulasyon ng DOM ay isang teknik na nagbabago sa mga static na web page upang maging dynamic na aplikasyon na nag-a-update ng kanilang nilalaman batay sa interaksyon ng user at tugon ng server.
 
-Ang DOM manipulation ay ang teknik na nagbabago sa static na mga web page patungo sa mga dynamic na application na nag-a-update ng kanilang content base sa interaksyon ng user at tugon ng server.
+### Pagpili ng Tamang Tool para sa Trabaho
 
-### Pagpili ng Tamang Kasangkapan para sa Trabaho
+Kapag nag-a-update ng iyong HTML gamit ang JavaScript, may ilang opsyon kang magagamit. Isipin ang mga ito bilang iba't ibang kasangkapan sa toolbox - bawat isa ay perpekto para sa partikular na gawain:
 
-Kapag nag-a-update ng iyong HTML gamit ang JavaScript, mayroon kang ilang mga opsyon. Isipin ang mga ito na parang iba't ibang tools sa toolbox - bawat isa ay perpekto para sa partikular na trabaho:
+| Pamamaraan | Magaling para sa | Kailan ito gagamitin | Antas ng Kaligtasan |
+|------------|------------------|---------------------|---------------------|
+| `textContent` | Ligtas na pagpapakita ng data ng user | Tuwing nagpapakita ng teksto | ✅ Napaka-ligtas |
+| `createElement()` + `append()` | Pagbuo ng masalimuot na layout | Paglikha ng mga bagong seksyon/listahan | ✅ Napaka-ligtas |
+| `innerHTML` | Pag-set ng nilalaman ng HTML | ⚠️ Iwasan hangga't maaari | ❌ Mapanganib |
 
-| Paraan | Para saan ito magaling | Kailan ito gagamitin | Antas ng Kaligtasan |
-|--------|------------------------|---------------------|---------------------|
-| `textContent` | Pagpapakita ng user data nang ligtas | Anumang oras na nagpapakita ng text | ✅ Rock solid |
-| `createElement()` + `append()` | Pagbuo ng complex na layout | Paglikha ng bagong sections/lists | ✅ Bulletproof |
-| `innerHTML` | Pag-set ng HTML content | ⚠️ Subukang iwasan ito | ❌ Risky business |
+#### Ang Ligtas na Paraan ng Pagpapakita ng Teksto: textContent
 
-#### Ang Ligtas na Paraan para Magpakita ng Text: textContent
-
-Ang [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) property ay ang iyong pinakamahusay na kaibigan kapag nagpapakita ng user data. Parang may bouncer para sa iyong webpage - walang mapanganib na makakapasok:
+Ang [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) property ay ang iyong pinakamagandang kaibigan kapag nagpapakita ng data ng user. Para itong bouncer ng iyong webpage - walang mapanganib na makakapasok:
 
 ```javascript
 // The safe, reliable way to update text
@@ -319,13 +434,14 @@ balanceElement.textContent = account.balance;
 ```
 
 **Mga Benepisyo ng textContent:**
-- Tinuturing ang lahat bilang plain text (pinipigilan ang script execution)
-- Awtomatikong nililinis ang existing content
-- Epektibo para sa simpleng text updates
-- Nagbibigay ng built-in na seguridad laban sa malicious content
+- Itinuturing ang lahat bilang plain text (pinipigilan ang pag-execute ng script)
+- Awtomatikong nililinis ang umiiral na nilalaman
+- Epektibo para sa simpleng pag-update ng teksto
+- Nagbibigay ng built-in na seguridad laban sa mapanganib na nilalaman
 
 #### Paglikha ng Dynamic na HTML Elements
-Para sa mas kumplikadong nilalaman, pagsamahin ang [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) sa [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) na pamamaraan:
+
+Para sa mas masalimuot na nilalaman, pagsamahin ang [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) sa [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) method:
 
 ```javascript
 // Safe way to create new elements
@@ -336,24 +452,24 @@ container.append(transactionItem);
 ```
 
 **Pag-unawa sa pamamaraang ito:**
-- **Lumilikha** ng mga bagong elemento ng DOM nang programmatically
-- **Nagbibigay** ng ganap na kontrol sa mga katangian at nilalaman ng elemento
+- **Lumilikha** ng bagong DOM elements nang programmatically
+- **Nagbibigay** ng buong kontrol sa mga attribute at nilalaman ng elemento
 - **Nagpapahintulot** ng masalimuot, nested na istruktura ng elemento
 - **Pinapanatili** ang seguridad sa pamamagitan ng paghihiwalay ng istruktura mula sa nilalaman
 
-> ⚠️ **Pagsasaalang-alang sa Seguridad**: Bagama't ang [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) ay madalas na lumalabas sa mga tutorial, maaari itong magpatupad ng mga naka-embed na script. Tulad ng mga protocol sa seguridad sa CERN na pumipigil sa hindi awtorisadong pagpapatupad ng code, ang paggamit ng `textContent` at `createElement` ay nagbibigay ng mas ligtas na alternatibo.
+> ⚠️ **Pagsasaalang-alang sa Seguridad**: Bagama't ang [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) ay madalas lumalabas sa mga tutorial, maaari itong mag-execute ng embedded scripts. Tulad ng mga protocol ng seguridad sa CERN na pumipigil sa hindi awtorisadong pag-execute ng code, ang paggamit ng `textContent` at `createElement` ay nagbibigay ng mas ligtas na alternatibo.
 > 
-**Mga panganib ng innerHTML:**
-- Pinapatupad ang anumang `<script>` na tag sa data ng user
-- Mahina laban sa mga pag-atake ng code injection
-- Lumilikha ng mga potensyal na kahinaan sa seguridad
+**Mga Panganib ng innerHTML:**
+- Nag-eexecute ng anumang `<script>` tags sa data ng user
+- Mahina sa mga pag-atake ng code injection
+- Lumilikha ng potensyal na mga kahinaan sa seguridad
 - Ang mas ligtas na alternatibo na ginagamit natin ay nagbibigay ng katumbas na functionality
 
-### Paggawa ng Errors na User-Friendly
+### Pagpapaganda ng Error Handling para sa User
 
-Sa kasalukuyan, ang mga error sa pag-login ay lumalabas lamang sa console ng browser, na hindi nakikita ng mga user. Tulad ng pagkakaiba sa pagitan ng internal diagnostics ng piloto at ng sistema ng impormasyon ng pasahero, kailangan nating iparating ang mahalagang impormasyon sa tamang channel.
+Sa kasalukuyan, ang mga error sa pag-login ay lumalabas lamang sa browser console, na hindi nakikita ng mga user. Tulad ng pagkakaiba ng internal diagnostics ng piloto at ang sistema ng impormasyon para sa mga pasahero, kailangan nating iparating ang mahalagang impormasyon sa tamang channel.
 
-Ang pagpapatupad ng mga nakikitang mensahe ng error ay nagbibigay sa mga user ng agarang feedback tungkol sa kung ano ang nagkamali at kung paano magpatuloy.
+Ang pag-implement ng mga nakikitang mensahe ng error ay nagbibigay sa mga user ng agarang feedback tungkol sa kung ano ang mali at kung paano ito maaayos.
 
 #### Hakbang 1: Magdagdag ng Lugar para sa Mga Mensahe ng Error
 
@@ -366,14 +482,14 @@ Una, bigyan natin ng tahanan ang mga mensahe ng error sa iyong HTML. Idagdag ito
 ```
 
 **Ano ang nangyayari dito:**
-- Lumilikha tayo ng isang walang laman na lalagyan na nananatiling hindi nakikita hanggang sa kailanganin
+- Lumilikha tayo ng isang walang laman na container na nananatiling invisible hanggang kailanganin
 - Nakaposisyon ito kung saan natural na tumitingin ang mga user pagkatapos mag-click ng "Login"
-- Ang `role="alert"` ay isang magandang karagdagan para sa mga screen reader - sinasabi nito sa assistive technology "hey, mahalaga ito!"
+- Ang `role="alert"` ay isang magandang touch para sa screen readers - sinasabi nito sa assistive technology "hey, mahalaga ito!"
 - Ang natatanging `id` ay nagbibigay sa ating JavaScript ng madaling target
 
 #### Hakbang 2: Gumawa ng Handy Helper Function
 
-Gumawa tayo ng maliit na utility function na maaaring mag-update ng text ng anumang elemento. Isa ito sa mga "isulat nang isang beses, gamitin kahit saan" na function na makakatipid sa iyo ng oras:
+Gumawa tayo ng maliit na utility function na maaaring mag-update ng teksto ng anumang elemento. Isa ito sa mga "isulat minsan, gamitin kahit saan" na function na makakatipid sa iyo ng oras:
 
 ```javascript
 function updateElement(id, text) {
@@ -382,15 +498,15 @@ function updateElement(id, text) {
 }
 ```
 
-**Mga benepisyo ng function:**
-- Simpleng interface na nangangailangan lamang ng ID ng elemento at text content
-- Ligtas na hinahanap at ina-update ang mga elemento ng DOM
-- Reusable na pattern na binabawasan ang pag-uulit ng code
-- Pinapanatili ang pare-parehong pag-uugali ng pag-update sa buong application
+**Mga Benepisyo ng Function:**
+- Simpleng interface na nangangailangan lamang ng element ID at text content
+- Ligtas na hinahanap at ina-update ang mga DOM elements
+- Reusable na pattern na nagpapabawas ng pag-uulit ng code
+- Pinapanatili ang pare-parehong pag-update ng behavior sa buong aplikasyon
 
 #### Hakbang 3: Ipakita ang Mga Error Kung Saan Makikita ng Mga User
 
-Ngayon palitan natin ang nakatagong console message ng isang bagay na talagang makikita ng mga user. I-update ang iyong login function:
+Ngayon, palitan natin ang nakatagong console message ng isang bagay na talagang makikita ng mga user. I-update ang iyong login function:
 
 ```javascript
 // Instead of just logging to console, show the user what's wrong
@@ -401,61 +517,74 @@ if (data.error) {
 
 **Ang maliit na pagbabagong ito ay may malaking epekto:**
 - Ang mga mensahe ng error ay lumalabas kung saan tumitingin ang mga user
-- Wala nang misteryosong tahimik na pagkabigo
+- Wala nang misteryosong silent failures
 - Ang mga user ay nakakakuha ng agarang, actionable na feedback
-- Ang iyong app ay nagsisimulang magmukhang propesyonal at maingat
+- Ang iyong app ay nagsisimulang magmukhang propesyonal at maayos
 
-Ngayon kapag sinubukan mo gamit ang isang invalid na account, makikita mo ang isang kapaki-pakinabang na mensahe ng error mismo sa pahina!
+Ngayon, kapag sinubukan mong mag-login gamit ang invalid na account, makikita mo ang isang kapaki-pakinabang na mensahe ng error sa mismong pahina!
 
-![Screenshot na nagpapakita ng mensahe ng error na ipinapakita sa panahon ng pag-login](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.tl.png)
+![Screenshot na nagpapakita ng mensahe ng error na lumalabas sa pag-login](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.tl.png)
 
-#### Hakbang 4: Maging Inclusive sa Accessibility
+#### Hakbang 4: Pagiging Inclusive sa Accessibility
 
-Narito ang isang cool na bagay tungkol sa `role="alert"` na idinagdag natin kanina - hindi lang ito dekorasyon! Ang maliit na attribute na ito ay lumilikha ng tinatawag na [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) na agad na ina-anunsyo ang mga pagbabago sa mga screen reader:
+Narito ang isang cool na bagay tungkol sa `role="alert"` na idinagdag natin kanina - hindi lang ito dekorasyon! Ang maliit na attribute na ito ay lumilikha ng tinatawag na [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) na agad na ina-announce ang mga pagbabago sa screen readers:
 
 ```html
 <div id="loginError" role="alert"></div>
 ```
 
 **Bakit ito mahalaga:**
-- Ang mga user ng screen reader ay naririnig ang mensahe ng error sa sandaling lumitaw ito
-- Ang lahat ay nakakakuha ng parehong mahalagang impormasyon, anuman ang paraan ng kanilang pag-navigate
-- Ito ay isang simpleng paraan upang gawing mas accessible ang iyong app
-- Ipinapakita nito na pinahahalagahan mo ang paglikha ng inclusive na karanasan
+- Naririnig ng mga user ng screen reader ang mensahe ng error sa sandaling lumitaw ito
+- Lahat ay nakakatanggap ng parehong mahalagang impormasyon, anuman ang paraan ng kanilang pag-navigate
+- Isang simpleng paraan upang gawing mas accessible ang iyong app
+- Ipinapakita na pinahahalagahan mo ang paglikha ng inclusive na karanasan
 
-Ang maliliit na detalye tulad nito ang nagtatangi sa magagaling na developer mula sa mahuhusay!
+Ang maliliit na detalye tulad nito ang nagtatangi sa magagaling na developer mula sa mga dakilang developer!
 
-#### Hakbang 5: Ilapat ang Parehong Pattern sa Registration
+### 🎯 Pedagogical Check-in: Mga Pattern ng Authentication
 
-Para sa pagkakapare-pareho, ipatupad ang parehong error handling sa iyong registration form:
+**Mag-pause at Mag-isip**: Katatapos mo lang mag-implement ng kumpletong authentication flow. Isa itong pundasyon sa web development.
 
-1. **Magdagdag** ng elemento ng display ng error sa iyong registration HTML:
+**Mabilis na Pagsusuri sa Sarili**:
+- Kaya mo bang ipaliwanag kung bakit natin ginagamit ang async/await para sa mga API calls?
+- Ano ang mangyayari kung nakalimutan natin ang `encodeURIComponent()` function?
+- Paano pinapabuti ng ating error handling ang karanasan ng user?
+
+**Koneksyon sa Tunay na Mundo**: Ang mga pattern na natutunan mo dito (async data fetching, error handling, user feedback) ay ginagamit sa bawat pangunahing web application mula sa mga social media platform hanggang sa mga e-commerce site. Nagkakaroon ka ng mga kasanayan na pang-produksyon!
+
+**Tanong ng Hamon**: Paano mo babaguhin ang sistemang ito ng authentication upang pamahalaan ang iba't ibang user roles (customer, admin, teller)? Isipin ang istruktura ng data at mga pagbabago sa UI na kinakailangan.
+
+#### Hakbang 5: I-apply ang Parehong Pattern sa Registration
+
+Para sa consistency, i-implement ang parehong error handling sa iyong registration form:
+
+1. **Magdagdag** ng error display element sa iyong registration HTML:
 ```html
 <div id="registerError" role="alert"></div>
 ```
 
-2. **I-update** ang iyong register function upang gamitin ang parehong pattern ng display ng error:
+2. **I-update** ang iyong register function upang gamitin ang parehong error display pattern:
 ```javascript
 if (data.error) {
   return updateElement('registerError', data.error);
 }
 ```
 
-**Mga benepisyo ng pare-parehong error handling:**
-- **Nagbibigay** ng uniform na karanasan ng user sa lahat ng form
-- **Binabawasan** ang cognitive load sa pamamagitan ng paggamit ng pamilyar na mga pattern
-- **Pinapasimple** ang maintenance gamit ang reusable na code
-- **Tinitiyak** na natutugunan ang mga pamantayan sa accessibility sa buong app
+**Mga Benepisyo ng consistent na error handling:**
+- **Nagbibigay** ng pare-parehong karanasan sa user sa lahat ng form
+- **Nagpapababa** ng cognitive load sa pamamagitan ng paggamit ng pamilyar na pattern
+- **Pinadadali** ang maintenance gamit ang reusable na code
+- **Tinitiyak** ang pagsunod sa mga pamantayan ng accessibility sa buong app
 
 ## Paglikha ng Iyong Dynamic Dashboard
 
-Ngayon ay gagawin nating dynamic ang iyong static na dashboard upang magpakita ng totoong data ng account. Tulad ng pagkakaiba sa pagitan ng naka-print na iskedyul ng flight at ng live na departure boards sa mga paliparan, lilipat tayo mula sa static na impormasyon patungo sa real-time, responsive na display.
+Ngayon, gagawin nating dynamic ang iyong static na dashboard upang magpakita ng totoong data ng account. Tulad ng pagkakaiba ng naka-print na flight schedule at ang live departure boards sa mga paliparan, lilipat tayo mula sa static na impormasyon patungo sa real-time, responsive na display.
 
-Gamit ang mga teknik sa DOM manipulation na natutunan mo, gagawa tayo ng dashboard na awtomatikong nag-a-update gamit ang kasalukuyang impormasyon ng account.
+Gamit ang mga teknik sa manipulasyon ng DOM na natutunan mo, gagawa tayo ng dashboard na awtomatikong nag-a-update gamit ang kasalukuyang impormasyon ng account.
 
 ### Pagkilala sa Iyong Data
 
-Bago tayo magsimulang magtayo, silipin natin kung anong uri ng data ang ipinapadala ng iyong server pabalik. Kapag matagumpay na nag-login ang isang tao, narito ang kayamanan ng impormasyon na maaari mong gamitin:
+Bago tayo magsimulang magtayo, silipin muna natin kung anong uri ng data ang ipinapadala ng iyong server pabalik. Kapag matagumpay na nag-login ang isang tao, narito ang kayamanan ng impormasyon na maaari mong gamitin:
 
 ```json
 {
@@ -472,29 +601,45 @@ Bago tayo magsimulang magtayo, silipin natin kung anong uri ng data ang ipinapad
 ```
 
 **Ang istruktura ng data na ito ay nagbibigay:**
-- **`user`**: Perpekto para sa pag-personalize ng karanasan ("Welcome back, Sarah!")
-- **`currency`**: Tinitiyak na tama ang pagpapakita ng mga halaga ng pera
-- **`description`**: Isang magiliw na pangalan para sa account
+- **`user`**: Perpekto para sa pagpapersonalize ng karanasan ("Welcome back, Sarah!")
+- **`currency`**: Tinitiyak na tama ang pagpapakita ng halaga ng pera
+- **`description`**: Isang friendly na pangalan para sa account
 - **`balance`**: Ang mahalagang kasalukuyang balanse
 - **`transactions`**: Ang kumpletong kasaysayan ng transaksyon na may lahat ng detalye
 
-Lahat ng kailangan mo upang bumuo ng isang propesyonal na dashboard ng banking!
+Lahat ng kailangan mo upang makagawa ng propesyonal na banking dashboard!
+
+```mermaid
+flowchart TD
+    A[User Login] --> B[Fetch Account Data]
+    B --> C{Data Valid?}
+    C -->|Yes| D[Store in Global Variable]
+    C -->|No| E[Show Error Message]
+    D --> F[Navigate to Dashboard]
+    F --> G[Update UI Elements]
+    G --> H[Display Balance]
+    G --> I[Show Description]
+    G --> J[Render Transactions]
+    J --> K[Create Table Rows]
+    K --> L[Format Currency]
+    L --> M[User Sees Live Data]
+```
 
 > 💡 **Pro Tip**: Gusto mo bang makita agad ang iyong dashboard sa aksyon? Gamitin ang username na `test` kapag nag-login - ito ay may pre-loaded na sample data upang makita mo ang lahat ng gumagana nang hindi kinakailangang gumawa muna ng mga transaksyon.
 > 
 **Bakit kapaki-pakinabang ang test account:**
 - May kasamang realistic na sample data na naka-load na
 - Perpekto para makita kung paano ipinapakita ang mga transaksyon
-- Mahusay para sa pag-testing ng mga feature ng iyong dashboard
-- Nakakatipid sa iyo mula sa manu-manong paggawa ng dummy data
+- Magaling para sa pag-test ng mga feature ng dashboard
+- Pinapadali ang pag-test nang hindi kinakailangang gumawa ng dummy data nang manu-mano
 
 ### Paglikha ng Dashboard Display Elements
 
-Gawin natin ang iyong dashboard interface step by step, simula sa impormasyon ng account summary at pagkatapos ay magpatuloy sa mas kumplikadong mga feature tulad ng mga listahan ng transaksyon.
+Gawin natin ang iyong dashboard interface step by step, simula sa impormasyon ng account summary at pagkatapos ay magpatuloy sa mas masalimuot na mga feature tulad ng mga listahan ng transaksyon.
 
 #### Hakbang 1: I-update ang Istruktura ng Iyong HTML
 
-Una, palitan ang static na seksyon ng "Balance" ng mga dynamic na placeholder na elemento na maaaring punan ng iyong JavaScript:
+Una, palitan ang static na seksyon ng "Balance" ng mga dynamic na placeholder elements na maaaring punan ng iyong JavaScript:
 
 ```html
 <section>
@@ -502,23 +647,23 @@ Una, palitan ang static na seksyon ng "Balance" ng mga dynamic na placeholder na
 </section>
 ```
 
-Susunod, magdagdag ng seksyon para sa account description. Dahil ito ay gumaganap bilang pamagat para sa nilalaman ng dashboard, gumamit ng semantic HTML:
+Susunod, magdagdag ng seksyon para sa account description. Dahil ito ay nagsisilbing pamagat para sa nilalaman ng dashboard, gumamit ng semantic HTML:
 
 ```html
 <h2 id="description"></h2>
 ```
 
 **Pag-unawa sa istruktura ng HTML:**
-- **Gumagamit** ng hiwalay na `<span>` na mga elemento para sa balanse at currency para sa indibidwal na kontrol
-- **Nag-aaplay** ng mga natatanging ID sa bawat elemento para sa JavaScript targeting
+- **Gumagamit** ng hiwalay na `<span>` elements para sa balanse at currency para sa indibidwal na kontrol
+- **Nag-aapply** ng natatanging mga ID sa bawat elemento para sa JavaScript targeting
 - **Sumusunod** sa semantic HTML sa pamamagitan ng paggamit ng `<h2>` para sa account description
-- **Lumilikha** ng lohikal na hierarchy para sa mga screen reader at SEO
+- **Lumilikha** ng lohikal na hierarchy para sa screen readers at SEO
 
-> ✅ **Insight sa Accessibility**: Ang account description ay gumaganap bilang pamagat para sa nilalaman ng dashboard, kaya ito ay minarkahan nang semantically bilang heading. Alamin ang higit pa tungkol sa kung paano [heading structure](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) nakakaapekto sa accessibility. Maaari mo bang tukuyin ang iba pang mga elemento sa iyong pahina na maaaring makinabang mula sa heading tags?
+> ✅ **Insight sa Accessibility**: Ang account description ay nagsisilbing pamagat para sa nilalaman ng dashboard, kaya ito ay naka-markup nang semantically bilang heading. Alamin ang higit pa tungkol sa kung paano [heading structure](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) nakakaapekto sa accessibility. Maaari mo bang tukuyin ang iba pang mga elemento sa iyong pahina na maaaring makinabang mula sa mga heading tags?
 
 #### Hakbang 2: Gumawa ng Dashboard Update Function
 
-Ngayon gumawa ng function na magpapakilala ng totoong data ng account sa iyong dashboard:
+Ngayon, gumawa ng function na magpapakain sa iyong dashboard ng totoong data ng account:
 
 ```javascript
 function updateDashboard() {
@@ -533,17 +678,17 @@ function updateDashboard() {
 ```
 
 **Step by step, narito ang ginagawa ng function na ito:**
-- **Nagva-validate** na mayroong data ng account bago magpatuloy
-- **Nagre-redirect** ng mga hindi authenticated na user pabalik sa login page
+- **Nagva-validate** na may umiiral na data ng account bago magpatuloy
+- **Nagre-redirect** sa mga hindi authenticated na user pabalik sa login page
 - **Ina-update** ang account description gamit ang reusable na `updateElement` function
 - **Nagfo-format** ng balanse upang palaging magpakita ng dalawang decimal places
-- **Ipinapakita** ang tamang simbolo ng currency
+- **Ipinapakita** ang tamang currency symbol
 
-> 💰 **Pag-format ng Pera**: Ang [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) na pamamaraan ay isang lifesaver! Tinitiyak nito na ang iyong balanse ay palaging mukhang totoong pera - "75.00" sa halip na "75" lang. Maa-appreciate ng iyong mga user ang nakikitang pamilyar na format ng pera.
+> 💰 **Pag-format ng Pera**: Ang [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) method ay napaka-kapaki-pakinabang! Tinitiyak nito na ang iyong balanse ay palaging mukhang totoong pera - "75.00" sa halip na "75" lang. Maa-appreciate ng iyong mga user ang pamilyar na format ng pera.
 
 #### Hakbang 3: Tiyaking Nag-a-update ang Iyong Dashboard
 
-Upang matiyak na ang iyong dashboard ay nagre-refresh gamit ang kasalukuyang data tuwing may bumibisita dito, kailangan nating mag-hook sa iyong navigation system. Kung natapos mo ang [lesson 1 assignment](../1-template-route/assignment.md), dapat itong pamilyar. Kung hindi, huwag mag-alala - narito ang kailangan mo:
+Upang matiyak na ang iyong dashboard ay nagre-refresh gamit ang kasalukuyang data tuwing may bumibisita dito, kailangan nating i-hook ito sa iyong navigation system. Kung natapos mo ang [lesson 1 assignment](../1-template-route/assignment.md), dapat itong pamilyar. Kung hindi, huwag mag-alala - narito ang kailangan mo:
 
 Idagdag ito sa dulo ng iyong `updateRoute()` function:
 
@@ -553,7 +698,7 @@ if (typeof route.init === 'function') {
 }
 ```
 
-Pagkatapos ay i-update ang iyong mga ruta upang isama ang dashboard initialization:
+Pagkatapos, i-update ang iyong mga ruta upang isama ang dashboard initialization:
 
 ```javascript
 const routes = {
@@ -562,28 +707,46 @@ const routes = {
 };
 ```
 
-**Ano ang ginagawa ng matalinong setup na ito:**
+**Ano ang ginagawa ng setup na ito:**
 - Sinusuri kung ang isang ruta ay may espesyal na initialization code
 - Awtomatikong pinapatakbo ang code na iyon kapag nag-load ang ruta
 - Tinitiyak na ang iyong dashboard ay palaging nagpapakita ng sariwa, kasalukuyang data
-- Pinapanatili ang iyong routing logic na malinis at organisado
+- Pinapanatili ang malinis at organisadong routing logic
 
-#### Testing ng Iyong Dashboard
+#### Pagsubok sa Iyong Dashboard
 
-Pagkatapos ipatupad ang mga pagbabagong ito, subukan ang iyong dashboard:
+Pagkatapos i-implement ang mga pagbabagong ito, subukan ang iyong dashboard:
 
 1. **Mag-login** gamit ang test account
 2. **I-verify** na ikaw ay na-redirect sa dashboard
-3. **Suriin** na ang account description, balanse, at currency ay tama ang pagpapakita
+3. **Suriin** na ang account description, balanse, at currency ay tamang ipinapakita
 4. **Subukang mag-log out at mag-log in muli** upang matiyak na nagre-refresh ang data nang maayos
 
-Ang iyong dashboard ay dapat na ngayon ay nagpapakita ng dynamic na impormasyon ng account na nag-a-update batay sa data ng user na naka-login!
+Ang iyong dashboard ay dapat na nagpapakita na ngayon ng dynamic na impormasyon ng account na nag-a-update batay sa data ng user na naka-login!
 
-## Paggawa ng Smart Transaction Lists gamit ang Templates
+## Pagbuo ng Smart Transaction Lists gamit ang Templates
 
 Sa halip na manu-manong gumawa ng HTML para sa bawat transaksyon, gagamit tayo ng templates upang awtomatikong makabuo ng pare-parehong format. Tulad ng standardized components na ginagamit sa spacecraft manufacturing, tinitiyak ng templates na ang bawat transaction row ay sumusunod sa parehong istruktura at hitsura.
 
-Ang teknik na ito ay mahusay na nag-scale mula sa ilang transaksyon hanggang sa libu-libo, pinapanatili ang pare-parehong performance at presentation.
+Ang teknik na ito ay epektibong nag-scale mula sa ilang transaksyon hanggang sa libu-libo, pinapanatili ang pare-parehong performance at presentation.
+
+```mermaid
+graph LR
+    A[HTML Template] --> B[JavaScript Clone]
+    B --> C[Populate with Data]
+    C --> D[Add to Fragment]
+    D --> E[Batch Insert to DOM]
+    
+    subgraph "Performance Benefits"
+        F[Single DOM Update]
+        G[Consistent Formatting]
+        H[Reusable Pattern]
+    end
+    
+    E --> F
+    E --> G
+    E --> H
+```
 
 ```mermaid
 flowchart LR
@@ -610,8 +773,8 @@ Una, magdagdag ng reusable template para sa transaction rows sa iyong HTML `<bod
 
 **Pag-unawa sa HTML templates:**
 - **Tinutukoy** ang istruktura para sa isang table row
-- **Nananatiling** invisible hanggang sa ma-clone at mapunan gamit ang JavaScript
-- **May kasamang** tatlong cells para sa date, description, at amount
+- **Nanatiling** invisible hanggang ma-clone at mapunan gamit ang JavaScript
+- **May kasamang** tatlong cells para sa petsa, description, at halaga
 - **Nagbibigay** ng reusable na pattern para sa pare-parehong format
 
 ### Hakbang 2: Ihanda ang Iyong Table para sa Dynamic Content
@@ -629,7 +792,7 @@ Susunod, magdagdag ng `id` sa iyong table body upang madali itong ma-target ng J
 
 ### Hakbang 3: Bumuo ng Transaction Row Factory Function
 
-Ngayon gumawa ng function na nagta-transform ng transaction data sa mga HTML elements:
+Ngayon, gumawa ng function na nagta-transform ng transaction data sa HTML elements:
 
 ```javascript
 function createTransactionRow(transaction) {
@@ -648,10 +811,10 @@ function createTransactionRow(transaction) {
 - **Kinokopya** ang template content para sa ligtas na manipulasyon
 - **Pinipili** ang table row sa loob ng cloned content
 - **Pinupunan** ang bawat cell gamit ang transaction data
-- **Nagfo-format** ng amount upang magpakita ng tamang decimal places
-- **Ibinabalik** ang kumpletong row na handa para sa insertion
+- **Nagfo-format** ng halaga upang magpakita ng tamang decimal places
+- **Ibinabalik** ang kumpletong row na handa nang i-insert
 
-### Hakbang 4: Mag-generate ng Maramihang Transaction Rows nang Mabilis
+### Hakbang 4: Epektibong Pagbuo ng Maramihang Transaction Rows
 
 Idagdag ang code na ito sa iyong `updateDashboard()` function upang ipakita ang lahat ng transaksyon:
 
@@ -664,16 +827,15 @@ for (const transaction of account.transactions) {
 updateElement('transactions', transactionsRows);
 ```
 
-**Pag-unawa sa mahusay na pamamaraang ito:**
-- **Lumilikha** ng document fragment upang i-batch ang DOM operations
-- **Iniikot** ang lahat ng transaksyon sa account data
-- **Nag-generate** ng row para sa bawat transaksyon gamit ang factory function
+**Pag-unawa sa epektibong pamamaraang ito:**
+- **Lumilikha** ng document fragment upang i-batch ang mga DOM operations
+- **Iniikot** ang lahat ng transaksyon sa data ng account
+- **Gumagawa** ng row para sa bawat transaksyon gamit ang factory function
 - **Kinokolekta** ang lahat ng rows sa fragment bago idagdag sa DOM
-- **Gumagawa** ng isang DOM update sa halip na maramihang individual insertions
+- **Isinasagawa** ang isang DOM update sa halip na maramihang individual insertions
+> ⚡ **Pag-optimize ng Performance**: Ang [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) ay parang proseso ng pag-assemble sa Boeing - ang mga bahagi ay inihahanda sa labas ng pangunahing linya, pagkatapos ay ini-install bilang isang kumpletong unit. Ang ganitong batching approach ay nagbabawas ng DOM reflows sa pamamagitan ng paggawa ng isang insertion sa halip na maraming indibidwal na operasyon.
 
-> ⚡ **Pag-optimize ng Performance**: Ang [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) ay gumagana tulad ng proseso ng assembly sa Boeing - ang mga components ay inihahanda off the main line, pagkatapos ay ini-install bilang isang kumpletong unit. Ang batching approach na ito ay nagbabawas ng DOM reflows sa pamamagitan ng paggawa ng isang insertion sa halip na maramihang individual operations.
-
-### Hakbang 5: Pagandahin ang Update Function para sa Mixed Content
+### Hakbang 5: Pagbutihin ang Update Function para sa Halo-halong Nilalaman
 
 Ang iyong `updateElement()` function ay kasalukuyang humahawak lamang ng text content. I-update ito upang gumana sa parehong text at DOM nodes:
 
@@ -693,49 +855,115 @@ function updateElement(id, textOrNode) {
 
 ### Subukan ang Iyong Dashboard
 
-Panahon na para sa sandali ng katotohanan! Tingnan natin ang iyong dynamic na dashboard sa aksyon:
+Panahon na para sa katotohanan! Tingnan ang iyong dynamic na dashboard sa aksyon:
 
-1. Mag-login gamit ang `test` account (may sample data na handa na)
+1. Mag-login gamit ang `test` account (may sample data na handa nang gamitin)
 2. Pumunta sa iyong dashboard
-3. Suriin na ang transaction rows ay lumalabas nang may tamang format
-4. Siguraduhin na ang mga petsa, deskripsyon, at halaga ay mukhang tama
+3. Tingnan kung lumalabas ang mga transaction rows na may tamang formatting
+4. Siguraduhing maayos ang hitsura ng mga petsa, deskripsyon, at halaga
 
 Kung gumagana ang lahat, makikita mo ang isang ganap na functional na transaction list sa iyong dashboard! 🎉
 
 **Ano ang iyong naabot:**
-- Nagtayo ng dashboard na nag-scale sa anumang dami ng data
-- Gumawa ng reusable templates para sa pare-parehong format
-- Nagpatupad ng mahusay na mga teknik sa DOM manipulation
-- Nag-develop ng functionality na maihahambing sa mga production banking applications
+- Nakagawa ng dashboard na kayang mag-scale sa anumang dami ng data
+- Nakalikha ng reusable templates para sa consistent na formatting
+- Naipatupad ang efficient na DOM manipulation techniques
+- Nakabuo ng functionality na maihahambing sa production banking applications
+
+Matagumpay mong na-transform ang isang static webpage sa isang dynamic na web application.
 
-Matagumpay mong na-transform ang isang static na webpage sa isang dynamic na web application.
+### 🎯 Pedagogical Check-in: Dynamic Content Generation
+
+**Pag-unawa sa Arkitektura**: Naipatupad mo ang isang sopistikadong data-to-UI pipeline na kahalintulad ng mga pattern na ginagamit sa mga framework tulad ng React, Vue, at Angular.
+
+**Mga Pangunahing Konseptong Natutunan**:
+- **Template-based rendering**: Paglikha ng reusable UI components
+- **Document fragments**: Pag-optimize ng DOM performance
+- **Safe DOM manipulation**: Pag-iwas sa mga security vulnerabilities
+- **Data transformation**: Pag-convert ng server data sa user interfaces
+
+**Koneksyon sa Industriya**: Ang mga teknik na ito ang pundasyon ng modernong frontend frameworks. Ang virtual DOM ng React, template system ng Vue, at component architecture ng Angular ay nakabatay sa mga core concepts na ito.
+
+**Tanong para sa Pagmumuni-muni**: Paano mo palalawakin ang sistemang ito upang hawakan ang real-time updates (tulad ng awtomatikong paglitaw ng mga bagong transaksyon)? Isaalang-alang ang WebSockets o Server-Sent Events.
 
 ---
 
+## 📈 Timeline ng Iyong Mastery sa Data Management
+
+```mermaid
+timeline
+    title Data-Driven Development Journey
+    
+    section Foundation Building
+        API Setup & Testing
+            : Understand client-server communication
+            : Master HTTP request/response cycle
+            : Learn debugging techniques
+    
+    section Authentication Mastery
+        Async Function Patterns
+            : Write clean async/await code
+            : Handle promises effectively
+            : Implement error boundaries
+        User Session Management
+            : Create global state patterns
+            : Build navigation guards
+            : Design user feedback systems
+    
+    section Dynamic UI Development
+        Safe DOM Manipulation
+            : Prevent XSS vulnerabilities
+            : Use textContent over innerHTML
+            : Create accessibility-friendly interfaces
+        Template Systems
+            : Build reusable UI components
+            : Optimize performance with fragments
+            : Scale to handle large datasets
+    
+    section Professional Patterns
+        Production-Ready Code
+            : Implement comprehensive error handling
+            : Follow security best practices
+            : Create maintainable architectures
+        Modern Web Standards
+            : Master Fetch API patterns
+            : Understand CORS configurations
+            : Build responsive, accessible UIs
+```
+
+**🎓 Milestone ng Pagtatapos**: Matagumpay kang nakabuo ng isang kumpletong data-driven web application gamit ang modernong JavaScript patterns. Ang mga kasanayang ito ay direktang naaangkop sa paggamit ng mga framework tulad ng React, Vue, o Angular.
+
+**🔄 Mga Kakayahang Pang-next Level**:
+- Handa nang tuklasin ang mga frontend frameworks na nakabatay sa mga konseptong ito
+- Handa nang magpatupad ng real-time features gamit ang WebSockets
+- May kakayahang bumuo ng Progressive Web Apps na may offline capabilities
+- Naka-set ang pundasyon para matutunan ang advanced state management patterns
+
 ## Hamon ng GitHub Copilot Agent 🚀
 
 Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Pagandahin ang banking app sa pamamagitan ng pagpapatupad ng transaction search at filter feature na nagpapahintulot sa mga user na maghanap ng partikular na transaksyon ayon sa date range, halaga, o deskripsyon.
-**Prompt:** Gumawa ng search functionality para sa banking app na may kasamang: 1) Search form na may input fields para sa date range (mula/hanggang), minimum/maximum na halaga, at mga keyword para sa transaction description, 2) Isang `filterTransactions()` function na nagfi-filter sa account.transactions array base sa search criteria, 3) I-update ang `updateDashboard()` function para ipakita ang mga na-filter na resulta, at 4) Magdagdag ng "Clear Filters" button para i-reset ang view. Gumamit ng modernong JavaScript array methods tulad ng `filter()` at i-handle ang mga edge cases para sa walang laman na search criteria.
+**Deskripsyon:** Pagandahin ang banking app sa pamamagitan ng pag-implement ng transaction search at filter feature na nagpapahintulot sa mga user na maghanap ng partikular na transaksyon batay sa date range, halaga, o mga keyword sa deskripsyon.
+
+**Prompt:** Gumawa ng search functionality para sa banking app na kinabibilangan ng: 1) Isang search form na may input fields para sa date range (mula/hanggang), minimum/maximum na halaga, at mga keyword sa transaction description, 2) Isang `filterTransactions()` function na nagfi-filter sa account.transactions array batay sa search criteria, 3) I-update ang `updateDashboard()` function upang ipakita ang mga filtered na resulta, at 4) Magdagdag ng "Clear Filters" button upang i-reset ang view. Gumamit ng modernong JavaScript array methods tulad ng `filter()` at hawakan ang mga edge cases para sa empty search criteria.
 
-Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin ang higit pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
 ## 🚀 Hamon
 
-Handa ka na bang dalhin ang iyong banking app sa susunod na antas? Gawin natin itong mukhang at pakiramdam na gusto mo talagang gamitin. Narito ang ilang ideya para magbigay inspirasyon sa iyong pagkamalikhain:
+Handa ka na bang dalhin ang iyong banking app sa susunod na antas? Gawin natin itong mukhang at pakiramdam na parang isang bagay na talagang gusto mong gamitin. Narito ang ilang ideya upang magbigay inspirasyon sa iyong pagkamalikhain:
 
-**Gawing maganda**: Magdagdag ng CSS styling para gawing visually appealing ang iyong functional dashboard. Isipin ang malinis na linya, tamang spacing, at maaaring ilang subtle animations.
+**Gawin itong maganda**: Magdagdag ng CSS styling upang gawing visually appealing ang iyong functional dashboard. Isipin ang malinis na linya, tamang spacing, at marahil ilang subtle animations.
 
-**Gawing responsive**: Subukang gumamit ng [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) para gumawa ng [responsive design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) na mahusay gumagana sa mga phone, tablet, at desktop. Pasasalamatan ka ng iyong mga user!
+**Gawin itong responsive**: Subukang gumamit ng [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) upang lumikha ng [responsive design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) na mahusay gumagana sa mga phone, tablet, at desktop. Pasasalamatan ka ng iyong mga user!
 
-**Magdagdag ng kaunting flair**: Isaalang-alang ang pag-color-code ng mga transactions (berde para sa kita, pula para sa gastos), magdagdag ng mga icon, o gumawa ng hover effects na magpaparamdam na interactive ang interface.
+**Magdagdag ng kaunting flair**: Isaalang-alang ang color-coding ng mga transaksyon (berde para sa kita, pula para sa gastos), pagdaragdag ng mga icon, o paglikha ng hover effects na nagpaparamdam na interactive ang interface.
 
-Ganito ang maaaring hitsura ng isang polished dashboard:
+Ganito ang maaaring hitsura ng isang polished na dashboard:
 
 ![Screenshot ng isang halimbawa ng resulta ng dashboard pagkatapos ng styling](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.tl.png)
 
-Hindi mo kailangang eksaktong gayahin ito - gamitin ito bilang inspirasyon at gawin itong sarili mo!
+Huwag kang mag-alala kung hindi mo ito eksaktong ma-match - gamitin ito bilang inspirasyon at gawin itong sarili mo!
 
 ## Post-Lecture Quiz
 
@@ -748,4 +976,4 @@ Hindi mo kailangang eksaktong gayahin ito - gamitin ito bilang inspirasyon at ga
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/7-bank-project/4-state-management/README.md b/translations/tl/7-bank-project/4-state-management/README.md
index 1eca74da80..bcf4608a79 100644
--- a/translations/tl/7-bank-project/4-state-management/README.md
+++ b/translations/tl/7-bank-project/4-state-management/README.md
@@ -1,42 +1,96 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "32bd800759c3e943c38ad9ae6e1f51e0",
-  "translation_date": "2025-10-22T15:33:14+00:00",
+  "original_hash": "b807b09df716dc48a2b750835bf8e933",
+  "translation_date": "2025-11-03T13:58:02+00:00",
   "source_file": "7-bank-project/4-state-management/README.md",
   "language_code": "tl"
 }
 -->
 # Gumawa ng Banking App Bahagi 4: Mga Konsepto ng State Management
 
+## ⚡ Ano ang Magagawa Mo sa Loob ng 5 Minuto
+
+**Mabilisang Landas para sa Abalang Developer**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Diagnose state issues]
+    B --> C[Create central state object]
+    C --> D[Add updateState function]
+    D --> E[See immediate improvements]
+```
+
+- **Minuto 1**: Subukan ang kasalukuyang isyu sa estado - mag-login, i-refresh ang pahina, obserbahan ang pag-logout
+- **Minuto 2**: Palitan ang `let account = null` ng `let state = { account: null }`
+- **Minuto 3**: Gumawa ng simpleng `updateState()` na function para sa kontroladong pag-update
+- **Minuto 4**: I-update ang isang function upang gamitin ang bagong pattern
+- **Minuto 5**: Subukan ang mas pinahusay na predictability at kakayahan sa pag-debug
+
+**Mabilisang Diagnostic Test**:
+```javascript
+// Before: Scattered state
+let account = null; // Lost on refresh!
+
+// After: Centralized state
+let state = Object.freeze({ account: null }); // Controlled and trackable!
+```
+
+**Bakit Mahalaga Ito**: Sa loob ng 5 minuto, mararanasan mo ang pagbabago mula sa magulong state management patungo sa predictable at madaling i-debug na mga pattern. Ito ang pundasyon na nagpapadali sa pag-maintain ng mga kumplikadong aplikasyon.
+
+## 🗺️ Ang Iyong Paglalakbay sa Pag-master ng State Management
+
+```mermaid
+journey
+    title From Scattered State to Professional Architecture
+    section Diagnosing Problems
+      Identify state loss issues: 3: You
+      Understand scattered updates: 4: You
+      Recognize architecture needs: 6: You
+    section Centralizing Control
+      Create unified state object: 5: You
+      Implement controlled updates: 7: You
+      Add immutable patterns: 8: You
+    section Adding Persistence
+      Implement localStorage: 6: You
+      Handle serialization: 7: You
+      Create session continuity: 9: You
+    section Balancing Freshness
+      Address data staleness: 5: You
+      Build refresh systems: 8: You
+      Achieve optimal balance: 9: You
+```
+
+**Destinasyon ng Iyong Paglalakbay**: Sa pagtatapos ng araling ito, makakabuo ka ng isang propesyonal na state management system na may kakayahang mag-handle ng persistence, pagiging sariwa ng data, at predictable na pag-update - mga parehong pattern na ginagamit sa mga production application.
+
 ## Pre-Lecture Quiz
 
 [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/47)
 
 ## Panimula
 
-Ang state management ay parang navigation system sa Voyager spacecraft – kapag maayos ang lahat, halos hindi mo mapapansin na naroroon ito. Ngunit kapag nagkaproblema, ito ang nagiging pagkakaiba sa pagitan ng pag-abot sa interstellar space at pagkaligaw sa cosmic void. Sa web development, ang state ay kumakatawan sa lahat ng kailangang tandaan ng iyong application: status ng user login, data ng form, history ng navigation, at mga pansamantalang estado ng interface.
+Ang state management ay parang navigation system sa Voyager spacecraft – kapag maayos ang lahat, halos hindi mo mapapansin na naroroon ito. Ngunit kapag nagkaproblema, ito ang nagiging pagkakaiba sa pagitan ng pag-abot sa interstellar space at pagkaligaw sa cosmic void. Sa web development, ang state ay kumakatawan sa lahat ng kailangang tandaan ng iyong aplikasyon: status ng user login, form data, history ng navigation, at mga pansamantalang estado ng interface.
 
-Habang ang iyong banking app ay umunlad mula sa simpleng login form patungo sa mas sopistikadong application, malamang na nakaranas ka ng ilang karaniwang hamon. I-refresh ang pahina at biglang nalog-out ang mga user. Isara ang browser at mawawala ang lahat ng progreso. Mag-debug ng problema at maghahanap ka sa maraming function na lahat ay nagbabago ng parehong data sa iba't ibang paraan.
+Habang ang iyong banking app ay umunlad mula sa simpleng login form patungo sa mas sopistikadong aplikasyon, malamang na nakaranas ka ng ilang karaniwang hamon. I-refresh ang pahina at ang mga user ay biglang nalog-out. Isara ang browser at mawawala ang lahat ng progreso. Mag-debug ng problema at maghahanap ka sa maraming function na lahat ay nagmo-modify ng parehong data sa iba't ibang paraan.
 
-Hindi ito palatandaan ng masamang pag-code – ito ay natural na mga hamon na nangyayari kapag ang mga application ay umabot sa isang tiyak na antas ng pagiging kumplikado. Ang bawat developer ay nakakaranas ng mga hamong ito habang ang kanilang mga app ay lumilipat mula sa "proof of concept" patungo sa "production ready."
+Hindi ito palatandaan ng masamang pag-code – ito ay natural na growing pains na nangyayari kapag ang mga aplikasyon ay umabot sa isang tiyak na antas ng pagiging kumplikado. Ang bawat developer ay nakakaranas ng mga hamon na ito habang ang kanilang mga app ay nagta-transition mula sa "proof of concept" patungo sa "production ready."
 
-Sa araling ito, magpapatupad tayo ng centralized state management system na magpapabago sa iyong banking app patungo sa isang maaasahan at propesyonal na application. Matututo kang pamahalaan ang daloy ng data nang predictable, panatilihin ang user sessions nang naaangkop, at lumikha ng smooth na user experience na kinakailangan ng modernong web applications.
+Sa araling ito, magpapatupad tayo ng centralized state management system na magbabago sa iyong banking app upang maging maaasahan at propesyonal na aplikasyon. Matututo kang pamahalaan ang daloy ng data nang predictable, panatilihin ang mga session ng user nang naaangkop, at lumikha ng maayos na karanasan para sa user na kinakailangan ng mga modernong web application.
 
 ## Mga Kinakailangan
 
-Bago sumabak sa mga konsepto ng state management, kailangan mong maayos ang iyong development environment at ang pundasyon ng iyong banking app. Ang araling ito ay direktang nakabatay sa mga konsepto at code mula sa mga nakaraang bahagi ng seryeng ito.
+Bago sumabak sa mga konsepto ng state management, kailangang maayos ang iyong development environment at ang pundasyon ng iyong banking app. Ang araling ito ay direktang nakabatay sa mga konsepto at code mula sa mga nakaraang bahagi ng seryeng ito.
 
 Siguraduhing handa ang mga sumusunod na bahagi bago magpatuloy:
 
 **Kinakailangang Setup:**
-- Kumpletuhin ang [data fetching lesson](../3-data/README.md) - dapat matagumpay na ma-load at ma-display ng iyong app ang account data
-- I-install ang [Node.js](https://nodejs.org) sa iyong sistema para sa pagtakbo ng backend API
-- I-start ang [server API](../api/README.md) nang lokal para sa paghawak ng mga operasyon sa account data
+- Kumpletuhin ang [aralin sa pagkuha ng data](../3-data/README.md) - dapat matagumpay na ma-load at maipakita ng iyong app ang data ng account
+- I-install ang [Node.js](https://nodejs.org) sa iyong sistema para sa pagpapatakbo ng backend API
+- I-start ang [server API](../api/README.md) nang lokal upang mag-handle ng mga operasyon sa data ng account
 
 **Pag-test ng Iyong Environment:**
 
-I-verify na maayos ang pagtakbo ng iyong API server sa pamamagitan ng pag-execute ng command na ito sa terminal:
+Siguraduhing gumagana nang maayos ang iyong API server sa pamamagitan ng pag-execute ng command na ito sa terminal:
 
 ```sh
 curl http://localhost:5000/api
@@ -45,64 +99,138 @@ curl http://localhost:5000/api
 
 **Ano ang ginagawa ng command na ito:**
 - **Nagpapadala** ng GET request sa iyong lokal na API server
-- **Nagtetest** ng koneksyon at nagve-verify na tumutugon ang server
-- **Nagbabalik** ng impormasyon ng API version kung maayos ang lahat
+- **Sinusubukan** ang koneksyon at tinitiyak na tumutugon ang server
+- **Nagbabalik** ng impormasyon ng bersyon ng API kung maayos ang lahat
+
+## 🧠 Pangkalahatang-ideya ng State Management Architecture
+
+```mermaid
+mindmap
+  root((State Management))
+    Current Problems
+      Session Loss
+        Page Refresh Issues
+        Browser Close Impact
+        Variable Reset Problems
+      Scattered Updates
+        Multiple Modification Points
+        Debugging Challenges
+        Unpredictable Behavior
+      Incomplete Cleanup
+        Logout State Issues
+        Memory Leaks
+        Security Concerns
+    Centralized Solutions
+      Unified State Object
+        Single Source of Truth
+        Predictable Structure
+        Scalable Foundation
+      Controlled Updates
+        Immutable Patterns
+        Object.freeze Usage
+        Function-Based Changes
+      State Tracking
+        History Management
+        Debug Visibility
+        Change Auditing
+    Persistence Strategies
+      localStorage Integration
+        Session Continuity
+        JSON Serialization
+        Automatic Sync
+      Data Freshness
+        Server Refresh
+        Stale Data Handling
+        Balance Optimization
+      Storage Optimization
+        Minimal Data
+        Performance Focus
+        Security Considerations
+```
+
+**Pangunahing Prinsipyo**: Ang propesyonal na state management ay nagbabalanse ng predictability, persistence, at performance upang makalikha ng maaasahang karanasan para sa user na maaaring mag-scale mula sa simpleng interaksyon hanggang sa kumplikadong workflows ng aplikasyon.
 
 ---
 
-## Pagsusuri sa Kasalukuyang Isyu ng Estado
+## Pagsusuri sa Kasalukuyang Isyu sa Estado
 
-Tulad ni Sherlock Holmes na sinusuri ang crime scene, kailangan nating maunawaan nang eksakto kung ano ang nangyayari sa ating kasalukuyang implementasyon bago natin malutas ang misteryo ng nawawalang user sessions.
+Tulad ng isang Sherlock Holmes na nag-eeksamin ng crime scene, kailangan nating maunawaan kung ano ang nangyayari sa kasalukuyang implementasyon bago natin malutas ang misteryo ng nawawalang mga session ng user.
 
-Gawin natin ang isang simpleng eksperimento na magpapakita ng mga hamon sa state management:
+Magsagawa tayo ng simpleng eksperimento na magpapakita ng mga hamon sa state management:
 
 **🧪 Subukan ang Diagnostic Test na Ito:**
-1. Mag-login sa iyong banking app at pumunta sa dashboard
+1. Mag-login sa iyong banking app at mag-navigate sa dashboard
 2. I-refresh ang browser page
 3. Obserbahan kung ano ang nangyayari sa iyong login status
 
-Kung ikaw ay na-redirect pabalik sa login screen, natuklasan mo ang klasikong problema sa state persistence. Ang behavior na ito ay nangyayari dahil ang kasalukuyang implementasyon natin ay nag-iimbak ng user data sa JavaScript variables na nare-reset sa bawat page load.
+Kung ikaw ay na-redirect pabalik sa login screen, natuklasan mo ang klasikong problema sa state persistence. Ang ganitong behavior ay nangyayari dahil ang kasalukuyang implementasyon ay nag-i-store ng user data sa JavaScript variables na nare-reset sa bawat pag-load ng pahina.
 
 **Mga Problema sa Kasalukuyang Implementasyon:**
 
-Ang simpleng `account` variable mula sa ating [nakaraang aralin](../3-data/README.md) ay nagdudulot ng tatlong pangunahing isyu na nakakaapekto sa parehong user experience at code maintainability:
+Ang simpleng `account` variable mula sa ating [nakaraang aralin](../3-data/README.md) ay nagdudulot ng tatlong mahalagang isyu na nakakaapekto sa karanasan ng user at sa kakayahan ng code na ma-maintain:
 
 | Problema | Teknikal na Dahilan | Epekto sa User |
-|----------|---------------------|----------------|
-| **Pagkawala ng Session** | Ang page refresh ay naglilinis ng JavaScript variables | Kailangang mag-reauthenticate ng mga user nang madalas |
-| **Kalituhan sa Updates** | Maraming function ang direktang nagbabago ng state | Nagiging mahirap ang pag-debug |
-| **Hindi Kumpletong Cleanup** | Ang logout ay hindi naglilinis ng lahat ng state references | Posibleng mga isyu sa seguridad at privacy |
+|---------|--------|----------------|
+| **Pagkawala ng Session** | Ang pag-refresh ng pahina ay naglilinis ng JavaScript variables | Kailangang mag-reauthenticate ng madalas ang mga user |
+| **Kalat na Updates** | Maraming function ang direktang nagmo-modify ng estado | Nagiging mas mahirap ang pag-debug |
+| **Hindi Kumpletong Cleanup** | Ang pag-logout ay hindi naglilinis ng lahat ng state references | Posibleng isyu sa seguridad at privacy |
 
 **Ang Hamon sa Arkitektura:**
 
-Tulad ng compartmentalized design ng Titanic na tila matibay hanggang sa sabay-sabay na pagbaha ng maraming compartments, ang pag-aayos ng mga isyung ito nang paisa-isa ay hindi sasagot sa pangunahing problema sa arkitektura. Kailangan natin ng komprehensibong solusyon sa state management.
+Tulad ng compartmentalized na disenyo ng Titanic na tila matibay hanggang sa sabay-sabay na pagbaha ng maraming compartments, ang pag-aayos ng mga isyung ito nang paisa-isa ay hindi sasapat upang matugunan ang pangunahing problema sa arkitektura. Kailangan natin ng komprehensibong solusyon sa state management.
 
 > 💡 **Ano ang talagang sinusubukan nating makamit dito?**
 
 Ang [state management](https://en.wikipedia.org/wiki/State_management) ay tungkol sa paglutas ng dalawang pangunahing palaisipan:
 
-1. **Nasaan ang Aking Data?**: Pagtukoy kung anong impormasyon ang mayroon tayo at saan ito nanggagaling
-2. **Pareho ba ang Nakikita ng Lahat?**: Pagtitiyak na ang nakikita ng mga user ay tumutugma sa aktwal na nangyayari
+1. **Nasaan ang Aking Data?**: Paano matutukoy kung anong impormasyon ang mayroon tayo at saan ito nagmumula
+2. **Pareho ba ang Nakikita ng Lahat?**: Paano masisigurado na ang nakikita ng mga user ay tumutugma sa aktwal na nangyayari
 
 **Ang Ating Plano:**
 
-Sa halip na maghabol ng sarili nating buntot, gagawa tayo ng **centralized state management** system. Isipin ito na parang may isang maayos na tao na namamahala sa lahat ng mahalagang bagay:
-
-![Schema na nagpapakita ng daloy ng data sa pagitan ng HTML, user actions, at state](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.tl.png)
+Sa halip na maguluhan, gagawa tayo ng **centralized state management** system. Isipin ito na parang may isang organisadong tao na namamahala sa lahat ng mahahalagang bagay:
+
+![Schema na nagpapakita ng daloy ng data sa pagitan ng HTML, mga aksyon ng user, at estado](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.tl.png)
+
+```mermaid
+flowchart TD
+    A[User Action] --> B[Event Handler]
+    B --> C[updateState Function]
+    C --> D{State Validation}
+    D -->|Valid| E[Create New State]
+    D -->|Invalid| F[Error Handling]
+    E --> G[Object.freeze]
+    G --> H[Update localStorage]
+    H --> I[Trigger UI Update]
+    I --> J[User Sees Changes]
+    F --> K[User Sees Error]
+    
+    subgraph "State Management Layer"
+        C
+        E
+        G
+    end
+    
+    subgraph "Persistence Layer"
+        H
+        L[localStorage]
+        H -.-> L
+    end
+```
 
 **Pag-unawa sa daloy ng data na ito:**
-- **Pinagsasama-sama** ang lahat ng application state sa isang lokasyon
-- **Inaayos** ang lahat ng pagbabago sa state sa pamamagitan ng kontroladong mga function
-- **Tinitiyak** na ang UI ay nananatiling naka-synchronize sa kasalukuyang state
+- **Pinagsasama-sama** ang lahat ng estado ng aplikasyon sa isang lokasyon
+- **Inaayos** ang lahat ng pagbabago sa estado sa pamamagitan ng kontroladong mga function
+- **Tinitiyak** na ang UI ay nananatiling naka-synchronize sa kasalukuyang estado
 - **Nagbibigay** ng malinaw at predictable na pattern para sa pamamahala ng data
 
-> 💡 **Insight ng Propesyonal**: Ang araling ito ay nakatuon sa mga pangunahing konsepto. Para sa mas kumplikadong mga application, ang mga library tulad ng [Redux](https://redux.js.org) ay nagbibigay ng mas advanced na mga feature sa state management. Ang pag-unawa sa mga pangunahing prinsipyo na ito ay makakatulong sa iyong ma-master ang anumang state management library.
+> 💡 **Insight ng Propesyonal**: Ang araling ito ay nakatuon sa mga pangunahing konsepto. Para sa mas kumplikadong aplikasyon, ang mga library tulad ng [Redux](https://redux.js.org) ay nagbibigay ng mas advanced na mga tampok sa state management. Ang pag-unawa sa mga pangunahing prinsipyong ito ay makakatulong sa iyo na ma-master ang anumang state management library.
 
-> ⚠️ **Advanced na Paksa**: Hindi natin tatalakayin ang automatic UI updates na triggered ng state changes, dahil ito ay may kinalaman sa mga konsepto ng [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming). Isipin ito bilang isang mahusay na susunod na hakbang para sa iyong pag-aaral!
+> ⚠️ **Advanced na Paksa**: Hindi natin tatalakayin ang awtomatikong pag-update ng UI na na-trigger ng mga pagbabago sa estado, dahil ito ay may kinalaman sa mga konsepto ng [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming). Isaalang-alang ito bilang isang mahusay na susunod na hakbang sa iyong pag-aaral!
 
 ### Gawain: I-centralize ang State Structure
 
-Simulan natin ang pag-transform ng ating scattered state management patungo sa isang centralized system. Ang unang hakbang na ito ay nagtatatag ng pundasyon para sa lahat ng mga susunod na pagpapabuti.
+Simulan natin ang pag-transform ng ating kalat na state management patungo sa centralized system. Ang unang hakbang na ito ay nagtatatag ng pundasyon para sa lahat ng mga pagpapabuti na susunod.
 
 **Hakbang 1: Gumawa ng Central State Object**
 
@@ -121,16 +249,16 @@ let state = {
 ```
 
 **Bakit mahalaga ang pagbabagong ito:**
-- **Pinagsasama-sama** ang lahat ng application data sa isang lokasyon
-- **Inihahanda** ang istruktura para sa pagdaragdag ng mas maraming state properties sa hinaharap
-- **Lumilikha** ng malinaw na hangganan sa pagitan ng state at iba pang mga variable
+- **Pinagsasama-sama** ang lahat ng data ng aplikasyon sa isang lokasyon
+- **Inihahanda** ang istruktura para sa pagdaragdag ng higit pang mga property ng estado sa hinaharap
+- **Lumilikha** ng malinaw na hangganan sa pagitan ng estado at iba pang mga variable
 - **Nagtatatag** ng pattern na maaaring mag-scale habang lumalaki ang iyong app
 
-**Hakbang 2: I-update ang State Access Patterns**
+**Hakbang 2: I-update ang Mga Pattern ng Access sa Estado**
 
-I-update ang iyong mga function upang gamitin ang bagong state structure:
+I-update ang iyong mga function upang gamitin ang bagong istruktura ng estado:
 
-**Sa mga `register()` at `login()` function**, palitan:
+**Sa mga function na `register()` at `login()`, palitan:**
 ```js
 account = ...
 ```
@@ -140,7 +268,7 @@ Gamit:
 state.account = ...
 ```
 
-**Sa `updateDashboard()` function**, idagdag ang linyang ito sa itaas:
+**Sa function na `updateDashboard()`, idagdag ang linyang ito sa itaas:**
 ```js
 const account = state.account;
 ```
@@ -148,31 +276,44 @@ const account = state.account;
 **Ano ang nagagawa ng mga update na ito:**
 - **Pinapanatili** ang kasalukuyang functionality habang pinapabuti ang istruktura
 - **Inihahanda** ang iyong code para sa mas sopistikadong state management
-- **Lumilikha** ng consistent na pattern para sa pag-access ng state data
+- **Lumilikha** ng consistent na pattern para sa pag-access ng data ng estado
 - **Nagtatatag** ng pundasyon para sa centralized state updates
 
-> 💡 **Tandaan**: Ang refactoring na ito ay hindi agad-agad na malulutas ang ating mga problema, ngunit nililikha nito ang mahalagang pundasyon para sa mga makapangyarihang pagpapabuti na darating!
+> 💡 **Tandaan**: Ang refactoring na ito ay hindi agad na nag-aayos ng ating mga problema, ngunit ito ang lumilikha ng mahalagang pundasyon para sa mga makapangyarihang pagpapabuti na darating!
+
+### 🎯 Pedagogical Check-in: Mga Prinsipyo ng Centralization
+
+**Huminto at Magnilay**: Kakagawa mo lang ng pundasyon ng centralized state management. Ito ay isang mahalagang desisyon sa arkitektura.
+
+**Mabilisang Pagsusuri sa Sarili**:
+- Kaya mo bang ipaliwanag kung bakit mas maganda ang pag-centralize ng estado sa isang object kaysa sa kalat na mga variable?
+- Ano ang mangyayari kung nakalimutan mong i-update ang isang function upang gamitin ang `state.account`?
+- Paano naghahanda ang pattern na ito ng iyong code para sa mas advanced na mga tampok?
 
-## Pagpapatupad ng Controlled State Updates
+**Koneksyon sa Tunay na Mundo**: Ang pattern ng centralization na natutunan mo ay ang pundasyon ng mga modernong framework tulad ng Redux, Vuex, at React Context. Binubuo mo ang parehong arkitektural na pag-iisip na ginagamit sa mga pangunahing aplikasyon.
 
-Kapag centralized na ang ating state, ang susunod na hakbang ay ang pagtatatag ng kontroladong mekanismo para sa mga pagbabago sa data. Ang approach na ito ay tinitiyak ang predictable na state changes at mas madaling pag-debug.
+**Tanong ng Hamon**: Kung kailangan mong magdagdag ng user preferences (tema, wika) sa iyong app, saan mo ito idadagdag sa istruktura ng estado? Paano ito mag-scale?
 
-Ang pangunahing prinsipyo ay parang air traffic control: sa halip na payagan ang maraming function na magbago ng state nang independiyente, idadaan natin ang lahat ng pagbabago sa isang solong, kontroladong function. Ang pattern na ito ay nagbibigay ng malinaw na oversight kung kailan at paano nagbabago ang data.
+## Pagpapatupad ng Kontroladong Pag-update ng Estado
+
+Sa ating estado na naka-centralize, ang susunod na hakbang ay ang pagtatatag ng kontroladong mekanismo para sa mga pagbabago sa data. Ang approach na ito ay tinitiyak ang predictable na mga pagbabago sa estado at mas madaling pag-debug.
+
+Ang pangunahing prinsipyo ay kahalintulad ng air traffic control: sa halip na payagan ang maraming function na mag-modify ng estado nang independyente, idadaan natin ang lahat ng pagbabago sa isang solong, kontroladong function. Ang pattern na ito ay nagbibigay ng malinaw na oversight kung kailan at paano nagaganap ang mga pagbabago sa data.
 
 **Immutable State Management:**
 
-Ituturing natin ang ating `state` object bilang [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), ibig sabihin hindi natin ito direktang babaguhin. Sa halip, bawat pagbabago ay lumilikha ng bagong state object na may updated na data.
+Ituturing natin ang ating `state` object bilang [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), ibig sabihin, hindi natin ito direktang imo-modify. Sa halip, ang bawat pagbabago ay lilikha ng bagong state object na may updated na data.
 
-Bagamat ang approach na ito ay maaaring mukhang hindi efficient kumpara sa direktang pagbabago, nagbibigay ito ng malaking benepisyo para sa debugging, testing, at pagpapanatili ng predictability ng application.
+Bagama't maaaring mukhang hindi epektibo ang approach na ito kumpara sa direktang pag-modify, nagbibigay ito ng malaking benepisyo para sa debugging, testing, at pagpapanatili ng predictability ng aplikasyon.
 
 **Mga Benepisyo ng Immutable State Management:**
 
 | Benepisyo | Deskripsyon | Epekto |
-|----------|-------------|--------|
+|---------|-------------|--------|
 | **Predictability** | Ang mga pagbabago ay nangyayari lamang sa pamamagitan ng kontroladong mga function | Mas madaling i-debug at i-test |
-| **History Tracking** | Ang bawat pagbabago sa state ay lumilikha ng bagong object | Nagbibigay-daan sa undo/redo functionality |
-| **Side Effect Prevention** | Walang aksidenteng pagbabago | Pinipigilan ang misteryosong mga bug |
-| **Performance Optimization** | Madaling matukoy kung kailan nagbago ang state | Nagbibigay-daan sa efficient na UI updates |
+| **History Tracking** | Ang bawat pagbabago sa estado ay lumilikha ng bagong object | Nagbibigay-daan sa undo/redo functionality |
+| **Side Effect Prevention** | Walang aksidenteng mga pagbabago | Pinipigilan ang mga misteryosong bug |
+| **Performance Optimization** | Madaling matukoy kung kailan talagang nagbago ang estado | Nagbibigay-daan sa efficient na pag-update ng UI |
 
 **JavaScript Immutability gamit ang `Object.freeze()`:**
 
@@ -184,12 +325,32 @@ const immutableState = Object.freeze({ account: userData });
 ```
 
 **Pag-unawa sa nangyayari dito:**
-- **Pinipigilan** ang direktang pag-assign o pag-delete ng properties
-- **Nagbibigay** ng exceptions kung may pagtatangkang baguhin ang object
-- **Tinitiyak** na ang mga pagbabago sa state ay dapat dumaan sa kontroladong mga function
-- **Lumilikha** ng malinaw na kontrata kung paano maaaring ma-update ang state
-
-> 💡 **Malalim na Pagsisiyasat**: Alamin ang pagkakaiba sa pagitan ng *shallow* at *deep* immutable objects sa [MDN documentation](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze). Mahalagang maunawaan ang pagkakaibang ito para sa mga kumplikadong state structures.
+- **Pinipigilan** ang direktang property assignments o deletions
+- **Nagba-throw** ng exceptions kung may pagtatangkang mag-modify
+- **Tinitiyak** na ang mga pagbabago sa estado ay dapat dumaan sa kontroladong mga function
+- **Lumilikha** ng malinaw na kontrata para sa kung paano maaaring ma-update ang estado
+
+> 💡 **Malalim na Pagsisid**: Alamin ang pagkakaiba sa pagitan ng *shallow* at *deep* immutable objects sa [MDN documentation](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze). Ang pag-unawa sa pagkakaibang ito ay mahalaga para sa mga kumplikadong istruktura ng estado.
+
+```mermaid
+stateDiagram-v2
+    [*] --> StateV1: Initial State
+    StateV1 --> StateV2: updateState('account', newData)
+    StateV2 --> StateV3: updateState('account', anotherUpdate)
+    StateV3 --> StateV4: updateState('preferences', userSettings)
+    
+    note right of StateV1
+        Object.freeze()
+        Immutable
+        Debuggable
+    end note
+    
+    note right of StateV2
+        New object created
+        Previous state preserved
+        Predictable changes
+    end note
+```
 
 ### Gawain
 
@@ -204,7 +365,7 @@ function updateState(property, newData) {
 }
 ```
 
-Sa function na ito, gumagawa tayo ng bagong state object at kinokopya ang data mula sa nakaraang state gamit ang [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Pagkatapos, pinapalitan natin ang partikular na property ng state object gamit ang [bracket notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` para sa assignment. Sa huli, nilalock natin ang object upang pigilan ang mga pagbabago gamit ang `Object.freeze()`. Sa ngayon, mayroon lamang tayong `account` property na naka-store sa state, ngunit sa approach na ito maaari kang magdagdag ng mas maraming properties sa state.
+Sa function na ito, gumagawa tayo ng bagong state object at kinokopya ang data mula sa nakaraang estado gamit ang [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Pagkatapos, ina-override natin ang partikular na property ng state object gamit ang bagong data gamit ang [bracket notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` para sa assignment. Sa huli, nilalock natin ang object upang pigilan ang mga pagbabago gamit ang `Object.freeze()`. Sa ngayon, mayroon lamang tayong `account` property na naka-store sa estado, ngunit sa approach na ito maaari kang magdagdag ng maraming properties sa estado kung kinakailangan.
 
 I-update din natin ang `state` initialization upang matiyak na ang initial state ay frozen din:
 
@@ -214,7 +375,7 @@ let state = Object.freeze({
 });
 ```
 
-Pagkatapos nito, i-update ang `register` function sa pamamagitan ng pagpapalit ng `state.account = result;` assignment sa:
+Pagkatapos nito, i-update ang `register` function sa pamamagitan ng pagpapalit ng `state.account = result;` assignment ng:
 
 ```js
 updateState('account', result);
@@ -237,53 +398,52 @@ function logout() {
 }
 ```
 
-Sa `updateDashboard()`, palitan ang redirection na `return navigate('/login');` ng `return logout()`;
+Sa `updateDashboard()`, palitan ang redirection na `return navigate('/login');` ng `return logout();`;
 
-Subukang mag-register ng bagong account, mag-logout, at mag-login muli upang suriin kung maayos pa rin ang lahat.
+Subukang magrehistro ng bagong account, mag-logout, at mag-login muli upang suriin kung gumagana pa rin nang maayos ang lahat.
 
-> Tip: maaari mong tingnan ang lahat ng pagbabago sa state sa pamamagitan ng pagdaragdag ng `console.log(state)` sa ibaba ng `updateState()` at pagbukas ng console sa development tools ng iyong browser.
+> Tip: Maaari mong tingnan ang lahat ng pagbabago sa estado sa pamamagitan ng pagdaragdag ng `console.log(state)` sa ibaba ng `updateState()` at pagbukas ng console sa development tools ng iyong browser.
 
 ## Pagpapatupad ng Data Persistence
 
-Ang isyu ng session loss na natukoy natin kanina ay nangangailangan ng persistence solution na nagpapanatili ng user state sa mga session ng browser. Binabago nito ang ating application mula sa isang pansamantalang karanasan patungo sa isang maaasahan at propesyonal na tool.
+Ang isyu sa pagkawala ng session na natukoy natin kanina ay nangangailangan ng solusyon sa persistence na nagpapanatili ng estado ng user sa kabila ng mga session ng browser. Binabago nito ang ating aplikasyon mula sa pansamantalang karanasan patungo sa maaasahan at propesyonal na tool.
 
-Isipin kung paano pinapanatili ng atomic clocks ang eksaktong oras kahit na may power outages sa pamamagitan ng pag-iimbak ng critical state sa non-volatile memory. Katulad nito, ang mga web application ay nangangailangan ng persistent storage mechanisms upang mapanatili ang mahalagang user data sa mga session ng browser at page refreshes.
+Isipin kung paano pinapanatili ng atomic clocks ang eksaktong oras kahit na may power outages sa pamamagitan ng pag-store ng critical state sa non-volatile memory. Sa parehong paraan, ang mga web application ay nangangailangan ng mga mekanismo ng persistent storage upang mapanatili ang mahalagang data ng user sa kabila ng mga session ng browser at pag-refresh ng pahina.
 
 **Mga Strategic na Tanong para sa Data Persistence:**
 
-Bago magpatupad ng persistence, isaalang-alang ang mga kritikal na salik na ito:
+Bago ipatupad ang persistence, isaalang-alang ang mga mahahalagang salik na ito:
 
 | Tanong | Konteksto ng Banking App | Epekto ng Desisyon |
-|-------|--------------------------|-------------------|
-| **Sensitive ba ang data?** | Account balance, transaction history | Pumili ng secure na storage methods |
-| **Gaano katagal dapat mag-persist?** | Login state vs. temporary UI preferences | Pumili ng naaangkop na storage duration |
-| **Kailangan ba ito ng server?** | Authentication tokens vs. UI settings | Tukuyin ang mga sharing requirements |
+|----------|-------------------|----------------|
+| **Gaano katagal dapat ito magtagal?** | Estado ng pag-login vs. pansamantalang UI preferences | Piliin ang tamang tagal ng imbakan |
+| **Kailangan ba ito ng server?** | Authentication tokens vs. UI settings | Tukuyin ang mga pangangailangan sa pagbabahagi |
 
-**Mga Opsyon sa Browser Storage:**
+**Mga Opsyon sa Imbakan ng Browser:**
 
-Nagbibigay ang modernong browsers ng ilang storage mechanisms, bawat isa ay idinisenyo para sa iba't ibang use cases:
+Nagbibigay ang mga modernong browser ng iba't ibang mekanismo ng imbakan, bawat isa ay idinisenyo para sa iba't ibang gamit:
 
 **Pangunahing Storage APIs:**
 
-1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: Persistent [Key/Value storage](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
+1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: Permanenteng [Key/Value storage](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
    - **Nagpapanatili** ng data sa mga session ng browser nang walang hanggan  
-   - **Nananatili** kahit i-restart ang browser at computer
+   - **Nananatili** kahit i-restart ang browser o computer
    - **Nakatuon** sa partikular na domain ng website
-   - **Perpekto** para sa user preferences at login states
+   - **Perpekto** para sa mga preference ng user at estado ng pag-login
 
-2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: Temporary session storage
-   - **Gumagana** nang katulad sa localStorage sa mga aktibong session
-   - **Awtomatikong nawawala** kapag isinara ang browser tab
-   - **Mainam** para sa pansamantalang data na hindi dapat mag-persist
+2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: Pansamantalang imbakan ng session
+   - **Gumagana** nang katulad sa localStorage habang aktibo ang session
+   - **Awtomatikong nabubura** kapag isinara ang tab ng browser
+   - **Ideal** para sa pansamantalang data na hindi kailangang magtagal
 
-3. **[HTTP Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: Server-shared storage
-   - **Awtomatikong** ipinapadala sa bawat server request
+3. **[HTTP Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: Imbakan na ibinabahagi sa server
+   - **Awtomatikong** ipinapadala sa bawat kahilingan sa server
    - **Perpekto** para sa [authentication](https://en.wikipedia.org/wiki/Authentication) tokens
-   - **Limitado** ang laki at maaaring makaapekto sa performance
+   - **May limitasyon** sa laki at maaaring makaapekto sa performance
 
-**Kinakailangan ang Data Serialization:**
+**Pangangailangan sa Data Serialization:**
 
-Ang parehong `localStorage` at `sessionStorage` ay nag-iimbak lamang ng [strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String):
+Ang `localStorage` at `sessionStorage` ay nag-iimbak lamang ng [strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String):
 
 ```js
 // Convert objects to JSON strings for storage
@@ -295,29 +455,48 @@ const savedAccount = JSON.parse(localStorage.getItem('account'));
 ```
 
 **Pag-unawa sa serialization:**
-- **Nagko-convert** ng JavaScript objects sa JSON strings gamit ang [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
-- **Binubuo muli** ang objects mula sa JSON gamit ang [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
-- **Awtomatikong hinahandle** ang mga kumplikadong nested objects at arrays
-- **Hindi gumagana** sa functions, undefined values, at circular references
+- **Nagko-convert** ng mga JavaScript object sa JSON strings gamit ang [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
+- **Binubuo muli** ang mga object mula sa JSON gamit ang [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
+- **Awtomatikong humahawak** ng mga kumplikadong nested object at arrays
+- **Hindi gumagana** sa mga function, undefined values, at circular references
+
 > 💡 **Advanced Option**: Para sa mga kumplikadong offline na aplikasyon na may malalaking dataset, isaalang-alang ang [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Nagbibigay ito ng buong client-side database ngunit nangangailangan ng mas kumplikadong implementasyon.
 
+```mermaid
+quadrantChart
+    title Browser Storage Options
+    x-axis Low Complexity --> High Complexity
+    y-axis Short Duration --> Long Duration
+    
+    quadrant-1 Professional Tools
+    quadrant-2 Simple Persistence
+    quadrant-3 Temporary Storage
+    quadrant-4 Advanced Systems
+    
+    localStorage: [0.3, 0.8]
+    sessionStorage: [0.2, 0.2]
+    HTTP Cookies: [0.6, 0.7]
+    IndexedDB: [0.9, 0.9]
+    Memory Variables: [0.1, 0.1]
+```
+
 ### Gawain: Ipatupad ang localStorage Persistence
 
-Ipatupad natin ang persistent storage upang manatiling naka-log in ang mga user hanggang sa sila mismo ang mag-log out. Gagamit tayo ng `localStorage` para i-store ang account data sa iba't ibang browser session.
+Ipatupad natin ang permanenteng imbakan upang manatiling naka-login ang mga user hanggang sa sila mismo ang mag-log out. Gagamitin natin ang `localStorage` upang mag-imbak ng data ng account sa mga session ng browser.
 
-**Hakbang 1: Tukuyin ang Storage Configuration**
+**Hakbang 1: Tukuyin ang Configuration ng Imbakan**
 
 ```js
 const storageKey = 'savedAccount';
 ```
 
 **Ano ang ibinibigay ng constant na ito:**
-- **Lumilikha** ng consistent identifier para sa ating stored data
-- **Pinipigilan** ang mga typo sa storage key references
-- **Ginagawang** madali ang pagbabago ng storage key kung kinakailangan
-- **Sumusunod** sa best practices para sa maintainable na code
+- **Lumilikha** ng pare-parehong identifier para sa ating nakaimbak na data
+- **Pinipigilan** ang mga typo sa mga reference ng storage key
+- **Ginagawang madali** ang pagbabago ng storage key kung kinakailangan
+- **Sumusunod** sa pinakamahusay na kasanayan para sa maintainable code
 
-**Hakbang 2: Magdagdag ng Automatic Persistence**
+**Hakbang 2: Magdagdag ng Awtomatikong Persistence**
 
 Idagdag ang linyang ito sa dulo ng `updateState()` function:
 
@@ -326,16 +505,16 @@ localStorage.setItem(storageKey, JSON.stringify(state.account));
 ```
 
 **Pag-unawa sa nangyayari dito:**
-- **Kinoconvert** ang account object sa JSON string para sa storage
-- **Sinasave** ang data gamit ang ating consistent storage key
-- **Ina-execute** ito nang awtomatiko tuwing may pagbabago sa state
-- **Tinitiyak** na ang stored data ay palaging synchronized sa kasalukuyang state
+- **Nagko-convert** ng account object sa JSON string para sa imbakan
+- **Nag-iimbak** ng data gamit ang ating pare-parehong storage key
+- **Awtomatikong isinasagawa** tuwing may pagbabago sa estado
+- **Tinitiyak** na ang nakaimbak na data ay palaging naka-synchronize sa kasalukuyang estado
 
-> 💡 **Benepisyo ng Arkitektura**: Dahil na-centralize natin ang lahat ng state updates sa pamamagitan ng `updateState()`, ang pagdaragdag ng persistence ay nangangailangan lamang ng isang linya ng code. Ipinapakita nito ang kapangyarihan ng mahusay na desisyon sa arkitektura!
+> 💡 **Benepisyo ng Arkitektura**: Dahil na-centralize natin ang lahat ng update ng estado sa `updateState()`, ang pagdaragdag ng persistence ay nangangailangan lamang ng isang linya ng code. Ipinapakita nito ang kapangyarihan ng magagandang desisyon sa arkitektura!
 
-**Hakbang 3: Ibalik ang State sa Pag-load ng App**
+**Hakbang 3: Ibalik ang Estado sa Pag-load ng App**
 
-Gumawa ng initialization function para maibalik ang na-save na data:
+Gumawa ng initialization function upang ibalik ang nakaimbak na data:
 
 ```js
 function init() {
@@ -353,15 +532,15 @@ init();
 ```
 
 **Pag-unawa sa proseso ng initialization:**
-- **Kinukuha** ang anumang na-save na account data mula sa localStorage
+- **Kinukuha** ang anumang dating nakaimbak na data ng account mula sa localStorage
 - **Pinoproseso** ang JSON string pabalik sa JavaScript object
-- **Ina-update** ang state gamit ang ating controlled update function
-- **Ibinabalik** ang session ng user nang awtomatiko sa pag-load ng page
-- **Ina-execute** ito bago ang mga update sa ruta upang matiyak na available ang state
+- **Ina-update** ang estado gamit ang ating kontroladong update function
+- **Awtomatikong ibinabalik** ang session ng user sa pag-load ng pahina
+- **Isinasagawa** bago ang mga update sa ruta upang matiyak na available ang estado
 
 **Hakbang 4: I-optimize ang Default Route**
 
-I-update ang default route upang magamit ang persistence:
+I-update ang default route upang samantalahin ang persistence:
 
 Sa `updateRoute()`, palitan:
 ```js
@@ -370,31 +549,45 @@ return navigate('/dashboard');
 ```
 
 **Bakit makatuwiran ang pagbabagong ito:**
-- **Ginagamit** nang epektibo ang bagong persistence system
-- **Pinapayagan** ang dashboard na mag-handle ng authentication checks
-- **Nagre-redirect** sa login nang awtomatiko kung walang na-save na session
+- **Ginagamit** ang ating bagong persistence system nang epektibo
+- **Pinapayagan** ang dashboard na humawak ng mga authentication check
+- **Awtomatikong nagre-redirect** sa pag-login kung walang naka-save na session
 - **Lumilikha** ng mas seamless na karanasan para sa user
 
 **Pagsubok sa Iyong Implementasyon:**
 
-1. Mag-log in sa iyong banking app
-2. I-refresh ang browser page
-3. Tiyaking nananatili kang naka-log in at nasa dashboard
+1. Mag-login sa iyong banking app
+2. I-refresh ang pahina ng browser
+3. Tiyaking nananatili kang naka-login at nasa dashboard
 4. Isara at muling buksan ang iyong browser
-5. Bumalik sa iyong app at kumpirmahing naka-log in ka pa rin
+5. Bumalik sa iyong app at kumpirmahin na naka-login ka pa rin
+
+🎉 **Achievement Unlocked**: Matagumpay mong naipatupad ang pamamahala ng permanenteng estado! Ang iyong app ay ngayon kumikilos tulad ng isang propesyonal na web application.
 
-🎉 **Achievement Unlocked**: Matagumpay mong naipatupad ang persistent state management! Ang iyong app ay kumikilos na tulad ng isang propesyonal na web application.
+### 🎯 Pedagogical Check-in: Persistence Architecture
 
-## Pagbalanse ng Persistence at Data Freshness
+**Pag-unawa sa Arkitektura**: Naipatupad mo ang isang sopistikadong persistence layer na nagbabalanse ng karanasan ng user sa pagiging kumplikado ng pamamahala ng data.
 
-Ang ating persistence system ay matagumpay na nagpapanatili ng user sessions, ngunit nagdadala ng bagong hamon: data staleness. Kapag maraming user o aplikasyon ang nagbabago ng parehong server data, ang lokal na naka-cache na impormasyon ay nagiging luma.
+**Mga Pangunahing Konsepto na Na-master**:
+- **JSON Serialization**: Pagko-convert ng mga kumplikadong object sa mga string na maaaring iimbak
+- **Awtomatikong Synchronization**: Ang mga pagbabago sa estado ay nagti-trigger ng permanenteng imbakan
+- **Pagbawi ng Session**: Ang mga app ay maaaring ibalik ang konteksto ng user pagkatapos ng mga pagkaantala
+- **Centralized Persistence**: Isang update function ang humahawak sa lahat ng imbakan
 
-Ang sitwasyong ito ay kahalintulad ng mga Viking navigator na umaasa sa parehong naka-store na star charts at kasalukuyang celestial observations. Ang charts ay nagbibigay ng consistency, ngunit kailangan ng mga navigator ng sariwang obserbasyon upang ma-account ang mga nagbabagong kondisyon. Katulad nito, ang ating aplikasyon ay nangangailangan ng parehong persistent user state at kasalukuyang server data.
+**Koneksyon sa Industriya**: Ang pattern ng persistence na ito ay mahalaga sa Progressive Web Apps (PWAs), offline-first applications, at modernong mobile web experiences. Nagtatayo ka ng mga kakayahan sa antas ng produksyon.
 
-**🧪 Pagdiskubre sa Problema ng Data Freshness:**
+**Tanong para sa Pagmumuni-muni**: Paano mo babaguhin ang sistemang ito upang hawakan ang maraming account ng user sa parehong device? Isaalang-alang ang mga implikasyon sa privacy at seguridad.
 
-1. Mag-log in sa dashboard gamit ang `test` account
-2. Patakbuhin ang command na ito sa terminal upang mag-simulate ng transaction mula sa ibang source:
+## Pagbabalanse ng Persistence sa Kasariwaan ng Data
+
+Ang ating persistence system ay matagumpay na nagpapanatili ng mga session ng user, ngunit nagdadala ng bagong hamon: ang pagiging luma ng data. Kapag maraming user o application ang nagbabago sa parehong data ng server, ang lokal na naka-cache na impormasyon ay nagiging lipas na.
+
+Ang sitwasyong ito ay kahalintulad ng mga navigator ng Viking na umaasa sa parehong nakaimbak na mga chart ng bituin at kasalukuyang obserbasyon ng kalangitan. Ang mga chart ay nagbibigay ng konsistensya, ngunit kailangan ng mga navigator ang sariwang obserbasyon upang isaalang-alang ang mga nagbabagong kondisyon. Katulad nito, kailangan ng ating aplikasyon ang parehong permanenteng estado ng user at kasalukuyang data ng server.
+
+**🧪 Pagtuklas sa Problema ng Kasariwaan ng Data:**
+
+1. Mag-login sa dashboard gamit ang `test` account
+2. Patakbuhin ang command na ito sa terminal upang gayahin ang isang transaksyon mula sa ibang pinagmulan:
 
 ```sh
 curl --request POST \
@@ -404,28 +597,45 @@ curl --request POST \
 ```
 
 3. I-refresh ang iyong dashboard page sa browser
-4. Obserbahan kung makikita mo ang bagong transaction
+4. Obserbahan kung makikita mo ang bagong transaksyon
 
 **Ano ang ipinapakita ng test na ito:**
-- **Ipinapakita** kung paano nagiging "stale" (luma) ang local storage
-- **Sinasalamin** ang mga real-world scenario kung saan nagbabago ang data sa labas ng iyong app
-- **Ibinubunyag** ang tensyon sa pagitan ng persistence at data freshness
+- **Ipinapakita** kung paano maaaring maging "stale" (lipas) ang local storage
+- **Ginagaya** ang mga totoong sitwasyon kung saan nagbabago ang data sa labas ng iyong app
+- **Ibinubunyag** ang tensyon sa pagitan ng persistence at kasariwaan ng data
 
-**Ang Hamon ng Data Staleness:**
+**Ang Hamon ng Kasariwaan ng Data:**
 
 | Problema | Sanhi | Epekto sa User |
 |----------|-------|----------------|
-| **Stale Data** | Ang localStorage ay hindi awtomatikong nag-e-expire | Nakikita ng user ang lumang impormasyon |
-| **Server Changes** | Binabago ng ibang apps/users ang parehong data | Hindi consistent ang view sa iba't ibang platform |
-| **Cache vs. Reality** | Ang lokal na cache ay hindi tumutugma sa server state | Mahinang karanasan ng user at kalituhan |
-
-**Solusyon na Estratehiya:**
-
-Magpapatupad tayo ng "refresh on load" pattern na nagbabalanse sa benepisyo ng persistence at pangangailangan para sa sariwang data. Ang approach na ito ay nagpapanatili ng maayos na karanasan ng user habang tinitiyak ang katumpakan ng data.
+| **Lipas na Data** | Ang localStorage ay hindi awtomatikong nag-e-expire | Nakikita ng mga user ang lipas na impormasyon |
+| **Pagbabago sa Server** | Binabago ng ibang apps/users ang parehong data | Hindi pare-parehong view sa iba't ibang platform |
+| **Cache vs. Reality** | Ang lokal na cache ay hindi tumutugma sa estado ng server | Mahinang karanasan ng user at kalituhan |
+
+**Estratehiya ng Solusyon:**
+
+Magpapatupad tayo ng "refresh on load" pattern na nagbabalanse ng mga benepisyo ng persistence sa pangangailangan ng sariwang data. Ang approach na ito ay nagpapanatili ng maayos na karanasan ng user habang tinitiyak ang katumpakan ng data.
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant A as App
+    participant L as localStorage
+    participant S as Server
+    
+    U->>A: Opens app
+    A->>L: Load saved state
+    L-->>A: Return cached data
+    A->>U: Show UI immediately
+    A->>S: Fetch fresh data
+    S-->>A: Return current data
+    A->>L: Update cache
+    A->>U: Update UI with fresh data
+```
 
-### Gawain: Ipatupad ang Data Refresh System
+### Gawain: Ipatupad ang Sistema ng Pag-refresh ng Data
 
-Gagawa tayo ng sistema na awtomatikong kumukuha ng sariwang data mula sa server habang pinapanatili ang benepisyo ng ating persistent state management.
+Gagawa tayo ng sistema na awtomatikong kumukuha ng sariwang data mula sa server habang pinapanatili ang mga benepisyo ng ating pamamahala ng permanenteng estado.
 
 **Hakbang 1: Gumawa ng Account Data Updater**
 
@@ -446,11 +656,11 @@ async function updateAccountData() {
 ```
 
 **Pag-unawa sa lohika ng function na ito:**
-- **Sinusuri** kung ang user ay kasalukuyang naka-log in (may state.account)
-- **Nagre-redirect** sa logout kung walang valid session
-- **Kumukuha** ng sariwang account data mula sa server gamit ang umiiral na `getAccount()` function
-- **Ina-handle** ang server errors nang maayos sa pamamagitan ng pag-log out ng invalid sessions
-- **Ina-update** ang state gamit ang sariwang data sa pamamagitan ng ating controlled update system
+- **Sinusuri** kung may naka-login na user (may state.account)
+- **Nagre-redirect** sa logout kung walang valid na session
+- **Kumukuha** ng sariwang data ng account mula sa server gamit ang umiiral na `getAccount()` function
+- **Maayos na humahawak** ng mga error sa server sa pamamagitan ng pag-log out ng mga invalid na session
+- **Ina-update** ang estado gamit ang sariwang data sa pamamagitan ng ating kontroladong update system
 - **Nagti-trigger** ng awtomatikong localStorage persistence sa pamamagitan ng `updateState()` function
 
 **Hakbang 2: Gumawa ng Dashboard Refresh Handler**
@@ -463,10 +673,10 @@ async function refresh() {
 ```
 
 **Ano ang nagagawa ng refresh function na ito:**
-- **Kinokoordina** ang proseso ng data refresh at UI update
-- **Naghihintay** para ma-load ang sariwang data bago i-update ang display
+- **Inaayos** ang proseso ng pag-refresh ng data at pag-update ng UI
+- **Naghihintay** na ma-load ang sariwang data bago i-update ang display
 - **Tinitiyak** na ang dashboard ay nagpapakita ng pinakabagong impormasyon
-- **Pinapanatili** ang malinis na paghihiwalay sa pagitan ng data management at UI updates
+- **Pinapanatili** ang malinis na paghihiwalay sa pagitan ng pamamahala ng data at pag-update ng UI
 
 **Hakbang 3: Isama sa Route System**
 
@@ -480,52 +690,106 @@ const routes = {
 ```
 
 **Paano gumagana ang integration na ito:**
-- **Ina-execute** ang refresh function tuwing naglo-load ang dashboard route
-- **Tinitiyak** na sariwang data ang palaging ipinapakita kapag nag-navigate ang user sa dashboard
-- **Pinapanatili** ang umiiral na route structure habang nagdadagdag ng data freshness
-- **Nagbibigay** ng consistent na pattern para sa route-specific initialization
+- **Isinasagawa** ang refresh function tuwing naglo-load ang dashboard route
+- **Tinitiyak** na ang sariwang data ay palaging ipinapakita kapag nag-navigate ang mga user sa dashboard
+- **Pinapanatili** ang umiiral na istruktura ng ruta habang idinaragdag ang kasariwaan ng data
+- **Nagbibigay** ng pare-parehong pattern para sa route-specific initialization
 
-**Pagsubok sa Iyong Data Refresh System:**
+**Pagsubok sa Iyong Sistema ng Pag-refresh ng Data:**
 
-1. Mag-log in sa iyong banking app
-2. Patakbuhin ang curl command mula kanina upang gumawa ng bagong transaction
+1. Mag-login sa iyong banking app
+2. Patakbuhin ang curl command mula kanina upang lumikha ng bagong transaksyon
 3. I-refresh ang iyong dashboard page o mag-navigate palayo at bumalik
-4. Tiyaking lumalabas agad ang bagong transaction
+4. Tiyaking lumilitaw agad ang bagong transaksyon
+
+🎉 **Naabot ang Perpektong Balanse**: Ang iyong app ngayon ay pinagsasama ang maayos na karanasan ng permanenteng estado sa katumpakan ng sariwang data ng server!
+
+## 📈 Timeline ng Iyong Mastery sa Pamamahala ng Estado
+
+```mermaid
+timeline
+    title Professional State Management Journey
+    
+    section Problem Recognition
+        State Issues Diagnosis
+            : Identify session loss problems
+            : Understand scattered update issues
+            : Recognize architectural needs
+    
+    section Architecture Foundation
+        Centralized State Design
+            : Create unified state objects
+            : Implement controlled update patterns
+            : Establish immutable principles
+        
+        Predictable Updates
+            : Master Object.freeze() usage
+            : Build debug-friendly systems
+            : Create scalable patterns
+    
+    section Persistence Mastery
+        localStorage Integration
+            : Handle JSON serialization
+            : Implement automatic synchronization
+            : Create session continuity
+        
+        Data Freshness Balance
+            : Address staleness challenges
+            : Build refresh mechanisms
+            : Optimize performance vs accuracy
+    
+    section Professional Patterns
+        Production-Ready Systems
+            : Implement error handling
+            : Create maintainable architectures
+            : Follow industry best practices
+        
+        Advanced Capabilities
+            : Ready for framework integration
+            : Prepared for complex state needs
+            : Foundation for real-time features
+```
+
+**🎓 Milestone ng Graduation**: Matagumpay mong naitayo ang isang kumpletong sistema ng pamamahala ng estado gamit ang parehong mga prinsipyo na nagpapatakbo sa Redux, Vuex, at iba pang mga propesyonal na library ng estado. Ang mga pattern na ito ay umaabot mula sa simpleng apps hanggang sa mga enterprise application.
 
-🎉 **Perfect Balance Achieved**: Ang iyong app ay ngayon pinagsasama ang maayos na karanasan ng persistent state at ang katumpakan ng sariwang server data!
+**🔄 Mga Kakayahang Pang-next Level**:
+- Handa nang ma-master ang mga framework ng pamamahala ng estado (Redux, Zustand, Pinia)
+- Handa nang magpatupad ng mga real-time na feature gamit ang WebSockets
+- May kakayahang bumuo ng offline-first Progressive Web Apps
+- Naka-set na ang pundasyon para sa mga advanced na pattern tulad ng state machines at observers
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
 Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Ipatupad ang isang komprehensibong state management system na may undo/redo functionality para sa banking app. Ang hamon na ito ay makakatulong sa iyo na magsanay sa advanced state management concepts kabilang ang state history tracking, immutable updates, at user interface synchronization.
+**Deskripsyon:** Ipatupad ang isang komprehensibong sistema ng pamamahala ng estado na may undo/redo functionality para sa banking app. Ang hamon na ito ay makakatulong sa iyo na magsanay ng mga advanced na konsepto ng pamamahala ng estado kabilang ang pagsubaybay sa kasaysayan ng estado, mga immutable na update, at synchronization ng user interface.
 
-**Prompt:** Gumawa ng enhanced state management system na kinabibilangan ng: 1) Isang state history array na nagta-track ng lahat ng nakaraang states, 2) Undo at redo functions na maaaring bumalik sa mga nakaraang states, 3) UI buttons para sa undo/redo operations sa dashboard, 4) Maximum history limit na 10 states upang maiwasan ang memory issues, at 5) Tamang cleanup ng history kapag nag-log out ang user. Tiyaking gumagana ang undo/redo functionality sa mga pagbabago sa account balance at nananatili ito sa browser refreshes.
+**Prompt:** Gumawa ng pinahusay na sistema ng pamamahala ng estado na kinabibilangan ng: 1) Isang array ng kasaysayan ng estado na sumusubaybay sa lahat ng nakaraang estado, 2) Mga undo at redo function na maaaring bumalik sa mga nakaraang estado, 3) Mga UI button para sa mga operasyon ng undo/redo sa dashboard, 4) Isang maximum na limitasyon ng kasaysayan na 10 estado upang maiwasan ang mga isyu sa memorya, at 5) Wastong paglilinis ng kasaysayan kapag nag-log out ang user. Tiyakin na gumagana ang undo/redo functionality sa mga pagbabago sa balanse ng account at nananatili sa mga pag-refresh ng browser.
 
-Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin ang higit pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
-## 🚀 Hamon: Storage Optimization
+## 🚀 Hamon: Pag-optimize ng Imbakan
 
-Ang iyong implementasyon ay ngayon humahawak sa user sessions, data refresh, at state management nang epektibo. Gayunpaman, isaalang-alang kung ang kasalukuyang approach ay optimal sa pagbalanse ng storage efficiency at functionality.
+Ang iyong implementasyon ngayon ay humahawak sa mga session ng user, pag-refresh ng data, at pamamahala ng estado nang epektibo. Gayunpaman, isaalang-alang kung ang ating kasalukuyang approach ay optimal na nagbabalanse ng kahusayan sa imbakan at functionality.
 
-Tulad ng mga chess masters na nakikilala ang mahalagang piraso mula sa mga expendable pawns, ang epektibong state management ay nangangailangan ng pagtukoy kung aling data ang kailangang mag-persist kumpara sa kung alin ang dapat palaging sariwa mula sa server.
+Tulad ng mga chess masters na nagtatangi sa pagitan ng mahahalagang piraso at expendable pawns, ang epektibong pamamahala ng estado ay nangangailangan ng pagtukoy kung aling data ang kailangang magtagal kumpara sa kung alin ang dapat palaging sariwa mula sa server.
 
-**Optimization Analysis:**
+**Pagsusuri sa Pag-optimize:**
 
-Suriin ang iyong kasalukuyang localStorage implementation at isaalang-alang ang mga estratehikong tanong na ito:
-- Ano ang minimum na impormasyon na kinakailangan upang mapanatili ang user authentication?
-- Aling data ang madalas magbago kaya't ang lokal na caching ay nagbibigay ng kaunting benepisyo?
-- Paano makakatulong ang storage optimization sa pagpapabuti ng performance nang hindi nakokompromiso ang karanasan ng user?
+Suriin ang iyong kasalukuyang implementasyon ng localStorage at isaalang-alang ang mga estratehikong tanong na ito:
+- Ano ang minimum na impormasyon na kinakailangan upang mapanatili ang authentication ng user?
+- Aling data ang madalas magbago na ang lokal na caching ay nagbibigay ng kaunting benepisyo?
+- Paano mapapabuti ng pag-optimize ng imbakan ang performance nang hindi nakakasira sa karanasan ng user?
 
-**Implementation Strategy:**
-- **Tukuyin** ang mahalagang data na kailangang mag-persist (malamang user identification lang)
-- **Baguhin** ang iyong localStorage implementation upang mag-store lamang ng critical session data
+**Estratehiya ng Implementasyon:**
+- **Tukuyin** ang mahalagang data na kailangang magtagal (malamang na user identification lamang)
+- **Baguhin** ang iyong implementasyon ng localStorage upang mag-imbak lamang ng kritikal na data ng session
 - **Tiyakin** na ang sariwang data ay palaging na-load mula sa server sa mga pagbisita sa dashboard
-- **Subukan** kung ang iyong optimized approach ay nagpapanatili ng parehong karanasan ng user
+- **Subukan** na ang iyong na-optimize na approach ay nagpapanatili ng parehong karanasan ng user
 
-**Advanced Consideration:**
-- **Ihambing** ang trade-offs sa pagitan ng pag-store ng buong account data vs. authentication tokens lamang
-- **I-dokumenta** ang iyong mga desisyon at pangangatwiran para sa mga susunod na miyembro ng team
+**Advanced na Pagsasaalang-alang:**
+- **Ihambing** ang mga trade-off sa pagitan ng pag-iimbak ng buong data ng account vs. authentication tokens lamang
+- **Idokumento** ang iyong mga desisyon at pangangatwiran para sa mga susunod na miyembro ng team
 
 Ang hamon na ito ay makakatulong sa iyo na mag-isip tulad ng isang propesyonal na developer na isinasaalang-alang ang parehong karanasan ng user at kahusayan ng aplikasyon. Maglaan ng oras upang mag-eksperimento sa iba't ibang approach!
 
@@ -533,15 +797,15 @@ Ang hamon na ito ay makakatulong sa iyo na mag-isip tulad ng isang propesyonal n
 
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/48)
 
-## Takdang-Aralin
+## Assignment
 
 [Implement "Add transaction" dialog](assignment.md)
 
-Narito ang isang halimbawa ng resulta pagkatapos makumpleto ang takdang-aralin:
+Narito ang isang halimbawa ng resulta pagkatapos makumpleto ang assignment:
 
 ![Screenshot na nagpapakita ng halimbawa ng "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.tl.png)
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/tl/8-code-editor/1-using-a-code-editor/README.md b/translations/tl/8-code-editor/1-using-a-code-editor/README.md
index 3ea1d93332..f38d3c3136 100644
--- a/translations/tl/8-code-editor/1-using-a-code-editor/README.md
+++ b/translations/tl/8-code-editor/1-using-a-code-editor/README.md
@@ -1,31 +1,85 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "cfd4a15974168ca426d50c67682ab9d4",
-  "translation_date": "2025-10-22T15:19:20+00:00",
+  "original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
+  "translation_date": "2025-11-03T13:46:48+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/README.md",
   "language_code": "tl"
 }
 -->
 # Paggamit ng Code Editor: Pag-master sa VSCode.dev
 
-Naalala mo ba sa *The Matrix* kung paano kailangang kumonekta ni Neo sa isang malaking computer terminal para ma-access ang digital na mundo? Ang mga kasalukuyang web development tools ay kabaligtaran – napakalakas na kakayahan na maaring ma-access kahit saan. Ang VSCode.dev ay isang browser-based na code editor na nagdadala ng mga propesyonal na development tools sa anumang device na may internet connection.
+Naalala mo ba sa *The Matrix* kung paano kailangang kumonekta si Neo sa isang malaking computer terminal para ma-access ang digital na mundo? Ang mga kasalukuyang tools sa web development ay kabaligtaran – napakalakas na kakayahan na ma-access kahit saan. Ang VSCode.dev ay isang browser-based na code editor na nagdadala ng mga propesyonal na tools sa anumang device na may internet connection.
 
-Katulad ng kung paano ginawang accessible ng printing press ang mga libro sa lahat, hindi lang sa mga tagasulat sa monasteryo, ang VSCode.dev ay nagde-demokratize ng coding. Maaari kang magtrabaho sa mga proyekto mula sa library computer, school lab, o kahit saan basta may browser access. Walang kailangang i-install, walang limitasyon na "kailangan ko ng specific setup".
+Katulad ng kung paano ginawang accessible ng printing press ang mga libro sa lahat, hindi lang sa mga tagasulat sa monasteryo, ang VSCode.dev ay nagde-demokratize ng coding. Maaari kang magtrabaho sa mga proyekto mula sa library computer, school lab, o kahit saan basta may browser access. Walang kailangang i-install, walang "Kailangan ko ng specific setup" na limitasyon.
 
 Sa pagtatapos ng araling ito, maiintindihan mo kung paano mag-navigate sa VSCode.dev, magbukas ng mga GitHub repository direkta sa iyong browser, at gumamit ng Git para sa version control – mga kasanayan na araw-araw na ginagamit ng mga propesyonal na developer.
 
-## Ano ang Matututunan Mo
+## ⚡ Mga Magagawa Mo sa Loob ng 5 Minuto
+
+**Mabilisang Landas para sa Abalang Developer**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Visit vscode.dev]
+    B --> C[Connect GitHub account]
+    C --> D[Open any repository]
+    D --> E[Start editing immediately]
+```
+
+- **Minuto 1**: Pumunta sa [vscode.dev](https://vscode.dev) - walang kailangang i-install
+- **Minuto 2**: Mag-sign in gamit ang GitHub para maikonekta ang iyong mga repository
+- **Minuto 3**: Subukan ang URL trick: palitan ang `github.com` ng `vscode.dev/github` sa anumang repo URL
+- **Minuto 4**: Gumawa ng bagong file at panoorin ang automatic syntax highlighting
+- **Minuto 5**: Gumawa ng pagbabago at i-commit ito gamit ang Source Control panel
+
+**Mabilisang Test URL**:
+```
+# Transform this:
+github.com/microsoft/Web-Dev-For-Beginners
+
+# Into this:
+vscode.dev/github/microsoft/Web-Dev-For-Beginners
+```
+
+**Bakit Mahalaga Ito**: Sa loob ng 5 minuto, mararanasan mo ang kalayaan ng coding kahit saan gamit ang mga propesyonal na tools. Ito ang kinabukasan ng development - accessible, makapangyarihan, at agarang magagamit.
+
+## 🗺️ Ang Iyong Learning Journey sa Cloud-Based Development
+
+```mermaid
+journey
+    title From Local Setup to Cloud Development Mastery
+    section Understanding the Platform
+      Discover web-based editing: 4: You
+      Connect to GitHub ecosystem: 6: You
+      Master interface navigation: 7: You
+    section File Management Skills
+      Create and organize files: 5: You
+      Edit with syntax highlighting: 7: You
+      Navigate project structures: 8: You
+    section Version Control Mastery
+      Understand Git integration: 6: You
+      Practice commit workflows: 8: You
+      Master collaboration patterns: 9: You
+    section Professional Customization
+      Install powerful extensions: 7: You
+      Configure development environment: 8: You
+      Build personal workflows: 9: You
+```
+
+**Destinasyon ng Iyong Paglalakbay**: Sa pagtatapos ng araling ito, magiging bihasa ka sa isang propesyonal na cloud development environment na gumagana mula sa anumang device, na nagbibigay-daan sa iyong mag-code gamit ang parehong tools na ginagamit ng mga developer sa malalaking tech na kumpanya.
+
+## Mga Matututunan Mo
 
 Pagkatapos nating talakayin ito, magagawa mo ang mga sumusunod:
 
-- Mag-navigate sa VSCode.dev na parang pangalawang tahanan mo – mahanap ang lahat ng kailangan mo nang hindi naliligaw
-- Magbukas ng anumang GitHub repository sa iyong browser at magsimulang mag-edit agad (medyo magical ito!)
+- Mag-navigate sa VSCode.dev na parang pangalawang tahanan – matatagpuan ang lahat ng kailangan mo nang hindi naliligaw
+- Magbukas ng anumang GitHub repository sa iyong browser at magsimulang mag-edit agad (ito ay talagang kamangha-mangha!)
 - Gumamit ng Git para subaybayan ang iyong mga pagbabago at i-save ang iyong progreso tulad ng isang pro
 - Palakasin ang iyong editor gamit ang mga extension na nagpapabilis at nagpapasaya sa coding
-- Gumawa at mag-organize ng mga file ng proyekto nang may kumpiyansa
+- Gumawa at mag-organisa ng mga project file nang may kumpiyansa
 
-## Ano ang Kailangan Mo
+## Mga Kailangan Mo
 
 Ang mga kinakailangan ay simple:
 
@@ -35,43 +89,96 @@ Ang mga kinakailangan ay simple:
 
 > 💡 **Baguhan sa GitHub?** Ang paggawa ng account ay libre at tumatagal lamang ng ilang minuto. Katulad ng kung paano nagbibigay ang library card ng access sa mga libro sa buong mundo, ang GitHub account ay nagbubukas ng pintuan sa mga code repository sa internet.
 
+## 🧠 Overview ng Cloud Development Ecosystem
+
+```mermaid
+mindmap
+  root((VSCode.dev Mastery))
+    Platform Benefits
+      Accessibility
+        Device Independence
+        No Installation Required
+        Instant Updates
+        Universal Access
+      Integration
+        GitHub Connection
+        Repository Sync
+        Settings Persistence
+        Collaboration Ready
+    Development Workflow
+      File Management
+        Project Structure
+        Syntax Highlighting
+        Multi-tab Editing
+        Auto-save Features
+      Version Control
+        Git Integration
+        Commit Workflows
+        Branch Management
+        Change Tracking
+    Customization Power
+      Extensions Ecosystem
+        Productivity Tools
+        Language Support
+        Theme Options
+        Custom Shortcuts
+      Environment Setup
+        Personal Preferences
+        Workspace Configuration
+        Tool Integration
+        Workflow Optimization
+    Professional Skills
+      Industry Standards
+        Version Control
+        Code Quality
+        Collaboration
+        Documentation
+      Career Readiness
+        Remote Work
+        Cloud Development
+        Team Projects
+        Open Source
+```
+
+**Pangunahing Prinsipyo**: Ang mga cloud-based development environment ay kumakatawan sa kinabukasan ng coding - nagbibigay ng propesyonal na tools na accessible, collaborative, at platform-independent.
+
 ## Bakit Mahalaga ang Web-Based Code Editors
 
-Bago ang internet, ang mga siyentipiko sa iba't ibang unibersidad ay hindi madaling makapagbahagi ng pananaliksik. Pagkatapos ay dumating ang ARPANET noong 1960s, na nagkonekta ng mga computer sa malalayong lugar. Ang mga web-based code editor ay sumusunod sa parehong prinsipyo – ginagawa ang mga makapangyarihang tools na accessible kahit saan ka man o anuman ang iyong device.
+Bago ang internet, ang mga siyentipiko sa iba't ibang unibersidad ay hindi madaling makapagbahagi ng pananaliksik. Pagkatapos ay dumating ang ARPANET noong 1960s, na nagkonekta ng mga computer sa malalayong distansya. Ang mga web-based code editor ay sumusunod sa parehong prinsipyo – ginagawa ang makapangyarihang tools na accessible kahit saan ka naroroon o anuman ang iyong device.
 
-Ang code editor ay nagsisilbing workspace mo sa pag-develop, kung saan ka nagsusulat, nag-e-edit, at nag-oorganize ng mga code file. Hindi tulad ng simpleng text editors, ang mga propesyonal na code editor ay nagbibigay ng syntax highlighting, error detection, at project management features.
+Ang code editor ay nagsisilbing iyong development workspace, kung saan ka nagsusulat, nag-eedit, at nag-aayos ng mga code file. Hindi tulad ng simpleng text editors, ang mga propesyonal na code editor ay nagbibigay ng syntax highlighting, error detection, at project management features.
 
 Ang VSCode.dev ay nagdadala ng mga kakayahang ito sa iyong browser:
 
-**Mga benepisyo ng web-based editing:**
+**Mga Bentahe ng Web-Based Editing:**
 
 | Feature | Deskripsyon | Praktikal na Benepisyo |
 |---------|-------------|----------|
-| **Platform Independence** | Tumatakbo sa anumang device na may browser | Seamless na trabaho mula sa iba't ibang computer |
+| **Platform Independence** | Gumagana sa anumang device na may browser | Seamless na trabaho mula sa iba't ibang computer |
 | **No Installation Required** | Ma-access sa pamamagitan ng web URL | Walang problema sa software installation |
 | **Automatic Updates** | Laging tumatakbo sa pinakabagong bersyon | Ma-access ang mga bagong feature nang walang manual updates |
 | **Repository Integration** | Direktang koneksyon sa GitHub | Mag-edit ng code nang walang local file management |
 
-**Praktikal na implikasyon:**
+**Praktikal na Implikasyon:**
 - Patuloy na trabaho sa iba't ibang environment
 - Konsistent na interface anuman ang operating system
 - Agarang kakayahan sa pakikipagtulungan
-- Nabawasang pangangailangan sa local storage
+- Nabawasan ang pangangailangan sa local storage
 
 ## Pag-explore sa VSCode.dev
 
-Katulad ng laboratoryo ni Marie Curie na may mga sopistikadong kagamitan sa isang simpleng espasyo, ang VSCode.dev ay naglalaman ng mga propesyonal na development tools sa isang browser interface. Ang web application na ito ay nagbibigay ng parehong core functionality tulad ng desktop code editors.
+Katulad ng laboratoryo ni Marie Curie na may mga sopistikadong kagamitan sa isang simpleng espasyo, ang VSCode.dev ay naglalaman ng mga propesyonal na development tools sa isang browser interface. Ang web application na ito ay nagbibigay ng parehong pangunahing functionality tulad ng desktop code editors.
 
 Simulan sa pamamagitan ng pagpunta sa [vscode.dev](https://vscode.dev) sa iyong browser. Ang interface ay naglo-load nang walang downloads o system installations – isang direktang aplikasyon ng cloud computing principles.
 
 ### Pagkonekta sa Iyong GitHub Account
 
-Katulad ng kung paano ikinonekta ng telepono ni Alexander Graham Bell ang mga malalayong lokasyon, ang pag-link ng iyong GitHub account ay nag-uugnay sa VSCode.dev sa iyong mga code repository. Kapag sinabihan na mag-sign in gamit ang GitHub, inirerekomenda ang pagtanggap sa koneksyon na ito.
+Katulad ng kung paano nagkonekta ang telepono ni Alexander Graham Bell sa mga malalayong lokasyon, ang pag-link ng iyong GitHub account ay nag-uugnay sa VSCode.dev sa iyong mga code repository. Kapag na-prompt na mag-sign in gamit ang GitHub, inirerekomenda ang pagtanggap sa koneksyon na ito.
 
-**Ang GitHub integration ay nagbibigay ng:**
+**Mga Benepisyo ng GitHub Integration:**
 - Direktang access sa iyong mga repository sa loob ng editor
 - Synchronized na settings at extensions sa iba't ibang device
-- Streamlined na workflow sa pag-save sa GitHub
+- Streamlined na workflow ng pag-save sa GitHub
 - Personalized na development environment
 
 ### Pagkilala sa Iyong Bagong Workspace
@@ -87,18 +194,39 @@ Kapag na-load na ang lahat, makikita mo ang isang malinis na workspace na dinise
 
 **Maglaan ng sandali para mag-explore:**
 - Mag-click sa mga icon ng Activity Bar at tingnan kung ano ang ginagawa ng bawat isa
-- Pansinin kung paano nag-a-update ang sidebar upang magpakita ng iba't ibang impormasyon – medyo cool, di ba?
+- Pansinin kung paano nag-a-update ang sidebar upang magpakita ng iba't ibang impormasyon – astig, di ba?
 - Ang Explorer view (📁) ay marahil kung saan ka magtatagal, kaya magpakomportable dito
 
+```mermaid
+flowchart TB
+    subgraph "VSCode.dev Interface Architecture"
+        A[Activity Bar] --> B[Explorer 📁]
+        A --> C[Search 🔍]
+        A --> D[Source Control 🌿]
+        A --> E[Extensions 🧩]
+        A --> F[Settings ⚙️]
+        
+        B --> G[File Tree]
+        C --> H[Find & Replace]
+        D --> I[Git Status]
+        E --> J[Extension Marketplace]
+        F --> K[Configuration]
+        
+        L[Sidebar] --> M[Context Panel]
+        N[Editor Area] --> O[Code Files]
+        P[Terminal/Output] --> Q[Command Line]
+    end
+```
+
 ## Pagbubukas ng GitHub Repositories
 
-Bago ang internet, kailangang pisikal na maglakbay ang mga mananaliksik sa mga library para ma-access ang mga dokumento. Ang mga GitHub repository ay gumagana nang katulad – mga koleksyon ng code na nakaimbak nang malayuan. Ang VSCode.dev ay inaalis ang tradisyunal na hakbang ng pag-download ng mga repository sa iyong local machine bago mag-edit.
+Bago ang internet, kailangang pisikal na maglakbay ang mga mananaliksik sa mga library para ma-access ang mga dokumento. Ang mga GitHub repository ay gumagana nang katulad – mga koleksyon ng code na nakaimbak nang remote. Inaalis ng VSCode.dev ang tradisyunal na hakbang ng pag-download ng mga repository sa iyong local machine bago mag-edit.
 
 Ang kakayahang ito ay nagbibigay ng agarang access sa anumang public repository para sa pagtingin, pag-edit, o pag-contribute. Narito ang dalawang paraan para magbukas ng mga repository:
 
 ### Paraan 1: Ang Point-and-Click na Paraan
 
-Perpekto ito kapag nagsisimula ka sa VSCode.dev at nais magbukas ng isang partikular na repository. Simple at friendly para sa mga baguhan:
+Perpekto ito kapag nagsisimula ka sa VSCode.dev at nais magbukas ng partikular na repository. Simple at madaling sundan:
 
 **Narito kung paano ito gawin:**
 
@@ -112,21 +240,21 @@ Perpekto ito kapag nagsisimula ka sa VSCode.dev at nais magbukas ng isang partik
 
 **Pro tip - Shortcut ng Command Palette:**
 
-Gusto mo bang magmukhang coding wizard? Subukan ang keyboard shortcut na Ctrl+Shift+P (o Cmd+Shift+P sa Mac) para buksan ang Command Palette:
+Gusto mo bang maramdaman na parang coding wizard? Subukan ang keyboard shortcut na ito: Ctrl+Shift+P (o Cmd+Shift+P sa Mac) para buksan ang Command Palette:
 
 ![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.tl.png)
 
 **Ang Command Palette ay parang search engine para sa lahat ng magagawa mo:**
 - I-type ang "open remote" at hahanapin nito ang repository opener para sa iyo
-- Naaalala nito ang mga repository na binuksan mo kamakailan (sobrang handy!)
-- Kapag nasanay ka na dito, parang coding sa bilis ng kidlat
+- Naaalala nito ang mga repository na binuksan mo kamakailan (sobrang kapaki-pakinabang!)
+- Kapag nasanay ka na dito, mararamdaman mong parang nagko-code ka sa bilis ng kidlat
 - Para itong bersyon ng VSCode.dev ng "Hey Siri, pero para sa coding"
 
-### Paraan 2: Teknik ng Pag-modify ng URL
+### Paraan 2: Teknik ng URL Modification
 
-Katulad ng kung paano gumagamit ang HTTP at HTTPS ng iba't ibang protocol habang pinapanatili ang parehong istruktura ng domain, ang VSCode.dev ay gumagamit ng URL pattern na sumasalamin sa addressing system ng GitHub. Anumang GitHub repository URL ay maaaring i-modify upang direktang mabuksan sa VSCode.dev.
+Katulad ng kung paano gumagamit ang HTTP at HTTPS ng iba't ibang protocol habang pinapanatili ang parehong domain structure, ang VSCode.dev ay gumagamit ng URL pattern na sumasalamin sa addressing system ng GitHub. Anumang GitHub repository URL ay maaaring baguhin upang direktang magbukas sa VSCode.dev.
 
-**Pattern ng URL transformation:**
+**Pattern ng URL Transformation:**
 
 | Uri ng Repository | GitHub URL | VSCode.dev URL |
 |----------------|---------------------|----------------|
@@ -134,72 +262,85 @@ Katulad ng kung paano gumagamit ang HTTP at HTTPS ng iba't ibang protocol habang
 | **Personal Project** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
 | **Anumang Accessible Repo** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
 
-**Pagpapatupad:**
+**Implementasyon:**
 - Palitan ang `github.com` ng `vscode.dev/github`
 - Panatilihin ang lahat ng iba pang bahagi ng URL na hindi nagbabago
 - Gumagana sa anumang publicly accessible repository
 - Nagbibigay ng agarang access sa pag-edit
 
-> 💡 **Tip na magbabago ng buhay**: I-bookmark ang VSCode.dev na bersyon ng iyong mga paboritong repository. Mayroon akong mga bookmark tulad ng "Edit My Portfolio" at "Fix Documentation" na direktang nagdadala sa akin sa editing mode!
+> 💡 **Tip na Nakakapagbago ng Buhay**: I-bookmark ang VSCode.dev na bersyon ng iyong mga paboritong repository. Mayroon akong mga bookmark tulad ng "Edit My Portfolio" at "Fix Documentation" na direktang nagdadala sa akin sa editing mode!
 
 **Aling paraan ang dapat mong gamitin?**
-- **Ang paraan ng interface**: Maganda kapag nag-e-explore ka o hindi mo matandaan ang eksaktong pangalan ng repository
-- **Ang trick sa URL**: Perpekto para sa mabilisang access kapag alam mo nang eksakto kung saan ka pupunta
+- **Ang paraan ng interface**: Maganda kapag nag-eexplore ka o hindi mo matandaan ang eksaktong pangalan ng repository
+- **Ang URL trick**: Perpekto para sa mabilisang access kapag alam mo na kung saan ka pupunta
+
+### 🎯 Pedagogical Check-in: Cloud Development Access
+
+**Pahinga at Pagmuni-muni**: Natutunan mo na ang dalawang paraan para ma-access ang mga code repository sa pamamagitan ng web browser. Ito ay kumakatawan sa isang pangunahing pagbabago sa kung paano gumagana ang development.
+
+**Mabilisang Self-Assessment**:
+- Kaya mo bang ipaliwanag kung bakit inaalis ng web-based editing ang tradisyunal na "development environment setup"?
+- Anong mga benepisyo ang naibibigay ng URL modification technique kumpara sa local git cloning?
+- Paano binabago ng approach na ito ang paraan ng pag-contribute mo sa mga open source project?
+
+**Real-World Connection**: Ang mga malalaking kumpanya tulad ng GitHub, GitLab, at Replit ay nagtatayo ng kanilang mga development platform sa paligid ng mga prinsipyo ng cloud-first. Natutunan mo ang parehong workflows na ginagamit ng mga propesyonal na development teams sa buong mundo.
+
+**Challenge Question**: Paano maaaring baguhin ng cloud-based development ang paraan ng pagtuturo ng coding sa mga paaralan? Isaalang-alang ang mga requirements ng device, software management, at collaborative possibilities.
 
-## Paggawa gamit ang Mga File at Proyekto
+## Paggawa ng Files at Projects
 
-Ngayon na nabuksan mo na ang isang repository, simulan na natin ang paggawa! Ang VSCode.dev ay nagbibigay sa iyo ng lahat ng kailangan mo para gumawa, mag-edit, at mag-organize ng iyong mga code file. Isipin ito bilang iyong digital workshop – bawat tool ay nasa tamang lugar.
+Ngayon na nabuksan mo na ang isang repository, simulan na natin ang paggawa! Ang VSCode.dev ay nagbibigay sa iyo ng lahat ng kailangan mo para gumawa, mag-edit, at mag-organisa ng iyong mga code file. Isipin ito bilang iyong digital workshop – ang bawat tool ay naroon kung saan mo ito kailangan.
 
 Tuklasin natin ang mga pang-araw-araw na gawain na bumubuo sa karamihan ng iyong coding workflow.
 
-### Paggawa ng Bagong File
+### Paggawa ng Bagong Files
 
-Katulad ng pag-aayos ng mga blueprint sa opisina ng isang arkitekto, ang paggawa ng file sa VSCode.dev ay sumusunod sa isang structured na approach. Sinusuportahan ng system ang lahat ng standard na web development file types.
+Katulad ng pag-aayos ng mga blueprint sa opisina ng isang arkitekto, ang paggawa ng file sa VSCode.dev ay sumusunod sa isang structured na approach. Sinusuportahan ng system ang lahat ng standard na uri ng file para sa web development.
 
-**Proseso ng paggawa ng file:**
+**Proseso ng Paggawa ng File:**
 
 1. Pumunta sa target folder sa Explorer sidebar
-2. I-hover ang pangalan ng folder para lumitaw ang "New File" icon (📄+)
-3. Ipasok ang filename kasama ang tamang extension (`style.css`, `script.js`, `index.html`)
-4. Pindutin ang Enter para gumawa ng file
+2. I-hover ang pangalan ng folder para makita ang "New File" icon (📄+)
+3. I-type ang filename kasama ang tamang extension (`style.css`, `script.js`, `index.html`)
+4. Pindutin ang Enter para gawin ang file
 
 ![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.tl.png)
 
-**Mga naming conventions:**
+**Mga Naming Conventions:**
 - Gumamit ng mga deskriptibong pangalan na nagpapahiwatig ng layunin ng file
 - Isama ang file extensions para sa tamang syntax highlighting
-- Sundin ang consistent na naming patterns sa buong proyekto
-- Gumamit ng lowercase letters at hyphens sa halip na spaces
+- Sundin ang consistent na pattern ng pangalan sa buong proyekto
+- Gumamit ng maliliit na letra at hyphens sa halip na spaces
 
-### Pag-edit at Pag-save ng Mga File
+### Pag-edit at Pag-save ng Files
 
 Dito nagsisimula ang totoong kasiyahan! Ang editor ng VSCode.dev ay puno ng mga kapaki-pakinabang na feature na nagpapadali at nagpapasaya sa coding. Para itong may napakatalinong writing assistant, pero para sa code.
 
 **Ang iyong editing workflow:**
 
 1. I-click ang anumang file sa Explorer para buksan ito sa pangunahing area
-2. Simulan ang pag-type at panoorin ang VSCode.dev na tumutulong sa iyo gamit ang mga kulay, suggestions, at error spotting
+2. Simulan ang pag-type at panoorin ang VSCode.dev na tumutulong sa iyo gamit ang kulay, mga suggestion, at pag-detect ng error
 3. I-save ang iyong trabaho gamit ang Ctrl+S (Windows/Linux) o Cmd+S (Mac) – bagama't auto-save din ito!
 
 ![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.tl.png)
 
 **Ang mga cool na bagay na nangyayari habang nagko-code ka:**
-- Ang iyong code ay nagiging maganda ang kulay kaya madaling basahin
-- Ang VSCode.dev ay nagbibigay ng mga suggestion habang nagta-type ka (parang autocorrect, pero mas matalino)
+- Ang iyong code ay nagiging maganda ang kulay kaya madali itong basahin
+- Nagbibigay ang VSCode.dev ng mga suggestion habang nagta-type ka (parang autocorrect, pero mas matalino)
 - Nahuhuli nito ang mga typo at error bago mo pa i-save
 - Maaari kang magbukas ng maraming file sa mga tab, tulad ng sa browser
 - Lahat ay awtomatikong nasasave sa background
 
-> ⚠️ **Quick tip**: Kahit na may auto-save, ang pag-pindot sa Ctrl+S o Cmd+S ay magandang ugali pa rin. Agad nitong sine-save ang lahat at nagti-trigger ng ilang extra helpful features tulad ng error checking.
+> ⚠️ **Mabilisang Tip**: Kahit na may auto-save, magandang ugali pa rin ang pag-hit ng Ctrl+S o Cmd+S. Agad nitong sine-save ang lahat at nagti-trigger ng ilang extra helpful features tulad ng error checking.
 
 ### Version Control gamit ang Git
 
-Katulad ng kung paano gumagawa ng detalyadong tala ang mga archaeologist ng mga excavation layers, ang Git ay nagta-track ng mga pagbabago sa iyong code sa paglipas ng panahon. Ang system na ito ay nagpe-preserve ng project history at nagbibigay-daan sa iyo na bumalik sa mga nakaraang bersyon kung kinakailangan. Ang VSCode.dev ay may integrated na Git functionality.
+Katulad ng kung paano gumagawa ng detalyadong tala ang mga archaeologist ng excavation layers, sinusubaybayan ng Git ang mga pagbabago sa iyong code sa paglipas ng panahon. Ang sistemang ito ay nagpe-preserve ng project history at nagbibigay-daan sa iyong bumalik sa mga nakaraang bersyon kung kinakailangan. Ang VSCode.dev ay may integrated na Git functionality.
 
-**Source Control interface:**
+**Source Control Interface:**
 
 1. I-access ang Source Control panel sa pamamagitan ng 🌿 icon sa Activity Bar
-2. Ang mga binagong file ay lumilitaw sa "Changes" section
+2. Ang mga binagong file ay lumalabas sa seksyong "Changes"
 3. Ang color coding ay nagpapahiwatig ng uri ng pagbabago: berde para sa mga dagdag, pula para sa mga binura
 
 ![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.tl.png)
@@ -215,169 +356,288 @@ flowchart TD
     E --> F[Changes pushed to GitHub]
 ```
 
+```mermaid
+stateDiagram-v2
+    [*] --> Modified: Edit files
+    Modified --> Staged: Click + to stage
+    Staged --> Modified: Click - to unstage
+    Staged --> Committed: Add message & commit
+    Committed --> [*]: Sync to GitHub
+    
+    state Committed {
+        [*] --> LocalCommit
+        LocalCommit --> RemotePush: Auto-sync
+    }
+```
+
 **Narito ang step-by-step na proseso:**
 - I-click ang "+" icon sa tabi ng mga file na nais mong i-save (ito ang "staging" sa kanila)
-- Double-check na masaya ka sa lahat ng iyong staged changes
-- Sumulat ng maikling note na nagpapaliwanag kung ano ang ginawa mo (ito ang "commit message" mo)
-- I-click ang checkmark button para i-save ang lahat sa GitHub
-- Kung nagbago ang isip mo tungkol sa isang bagay, ang undo icon ay nagbibigay-daan sa iyo na i-discard ang mga pagbabago
+- Siguraduhing masaya ka sa lahat ng mga pagbabago na na-staged mo  
+- Sumulat ng maikling tala na nagpapaliwanag kung ano ang ginawa mo (ito ang iyong "commit message")  
+- I-click ang checkmark button para i-save ang lahat sa GitHub  
+- Kung magbago ang isip mo tungkol sa isang bagay, ang undo icon ay nagbibigay-daan sa iyo na i-discard ang mga pagbabago  
+
+**Pagsulat ng magagandang commit messages (mas madali ito kaysa sa iniisip mo!):**  
+- Ilarawan lang kung ano ang ginawa mo, tulad ng "Magdagdag ng contact form" o "Ayusin ang sirang navigation"  
+- Panatilihing maikli at simple – isipin ang haba ng tweet, hindi sanaysay  
+- Simulan sa mga salitang aksyon tulad ng "Magdagdag", "Ayusin", "I-update", o "Tanggalin"  
+- **Magandang halimbawa**: "Magdagdag ng responsive navigation menu", "Ayusin ang mga isyu sa mobile layout", "I-update ang mga kulay para sa mas mahusay na accessibility"  
+
+> 💡 **Mabilis na tip sa pag-navigate**: Gamitin ang hamburger menu (☰) sa kaliwang itaas para bumalik sa iyong GitHub repository at makita ang iyong mga na-commit na pagbabago online. Para itong portal sa pagitan ng iyong editing environment at ng home ng iyong proyekto sa GitHub!  
 
-**Pagsulat ng magagandang commit messages (mas madali ito kaysa sa iniisip mo!):**
-- Ilarawan lang kung ano ang ginawa mo, tulad ng "Add contact form" o "Fix broken navigation"
-- Panatilihing maikli at simple – isipin ang haba ng tweet, hindi essay
-- Simulan sa mga action words tulad ng "Add", "Fix", "Update", o "Remove"
-- **Magandang halimbawa**: "Add responsive navigation menu", "Fix mobile layout issues", "Update colors for better accessibility"
+## Pagpapahusay ng Functionality gamit ang Extensions  
 
-> 💡 **Quick navigation tip**: Gamitin ang hamburger menu (☰) sa kaliwang itaas para bumalik sa iyong GitHub repository at makita ang iyong mga committed changes online. Para itong portal sa pagitan ng iyong editing environment at ng home ng iyong proyekto sa GitHub!
+Tulad ng workshop ng isang craftsperson na may mga espesyal na tool para sa iba't ibang gawain, ang VSCode.dev ay maaaring i-customize gamit ang extensions na nagdadagdag ng partikular na kakayahan. Ang mga plugin na ginawa ng komunidad ay tumutugon sa mga karaniwang pangangailangan sa pag-develop tulad ng code formatting, live preview, at pinahusay na Git integration.  
 
-## Pagpapahusay ng Functionality gamit ang Extensions
+Ang extension marketplace ay nagho-host ng libu-libong libreng tool na ginawa ng mga developer sa buong mundo. Ang bawat extension ay nag-aalok ng solusyon sa mga partikular na hamon sa workflow, na nagbibigay-daan sa iyo na bumuo ng personalized na development environment na angkop sa iyong mga pangangailangan at kagustuhan.  
 
-Katulad ng workshop ng isang craftsperson na may mga specialized tools para sa iba't ibang gawain, ang VSCode.dev ay maaaring i-customize gamit ang mga extension na nagdadagdag ng partikular na kakayahan. Ang mga community-developed plugins na ito ay tumutugon sa mga karaniwang pangangailangan sa pag-develop tulad ng code formatting, live preview, at enhanced Git integration.
+```mermaid
+mindmap
+  root((Extension Ecosystem))
+    Essential Categories
+      Productivity
+        Live Server
+        Auto Rename Tag
+        Bracket Pair Colorizer
+        GitLens
+      Code Quality
+        Prettier
+        ESLint
+        Spell Checker
+        Error Lens
+      Language Support
+        HTML CSS Support
+        JavaScript ES6
+        Python Extension
+        Markdown Preview
+      Themes & UI
+        Dark+ Modern
+        Material Icon Theme
+        Peacock
+        Rainbow Brackets
+    Discovery Methods
+      Popular Rankings
+        Download Counts
+        User Ratings
+        Recent Updates
+        Community Reviews
+      Recommendations
+        Workspace Suggestions
+        Language-based
+        Workflow-specific
+        Team Standards
+```
+  
+### Paghahanap ng Perpektong Extensions  
+
+Ang extension marketplace ay talagang maayos ang pagkakaorganisa, kaya hindi ka maliligaw sa paghahanap ng kailangan mo. Dinisenyo ito upang matulungan kang matuklasan ang parehong mga partikular na tool at mga cool na bagay na hindi mo alam na umiiral!  
 
-Ang extension marketplace ay nagho-host ng libu-libong libreng tools na ginawa ng mga developer sa buong mundo. Ang bawat extension ay nagso-solve ng partikular na workflow challenges, na nagbibigay-daan sa iyo na bumuo ng personalized na development environment na angkop sa iyong mga pangangailangan at kagustuhan.
+**Paano pumunta sa marketplace:**  
 
-### Paghahanap ng Iyong Perpektong Extensions
+1. I-click ang Extensions icon (🧩) sa Activity Bar  
+2. Mag-browse o maghanap ng isang partikular na bagay  
+3. I-click ang anumang mukhang kawili-wili upang matuto pa tungkol dito  
 
-Ang extension marketplace ay talagang maayos ang pagkakaorganize, kaya hindi ka maliligaw sa paghahanap ng kailangan mo. Dinisenyo ito para tulungan kang matuklasan ang parehong specific tools at mga cool na bagay na hindi mo alam na kailangan mo!
+![Interface ng extension marketplace](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.tl.png)  
 
-**Pagpunta sa marketplace:**
+**Ano ang makikita mo roon:**  
 
-1. I-click ang Extensions icon (🧩) sa Activity Bar
-2. Mag-browse o maghanap ng isang partikular na bagay
-3. I-click ang anumang mukhang interesante para malaman pa ang tungkol dito
+| Seksyon | Ano ang Nasa Loob | Bakit Ito Kapaki-pakinabang |  
+|----------|---------|----------|  
+| **Installed** | Mga extension na naidagdag mo na | Ang personal mong coding toolkit |  
+| **Popular** | Mga paborito ng karamihan | Mga tool na sinumpaan ng karamihan ng mga developer |  
+| **Recommended** | Mga matalinong mungkahi para sa iyong proyekto | Mga kapaki-pakinabang na rekomendasyon ng VSCode.dev |  
 
-![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.tl.png)
+**Ano ang nagpapadali sa pag-browse:**  
+- Ang bawat extension ay nagpapakita ng ratings, bilang ng pag-download, at mga tunay na review ng user  
+- Makakakita ka ng screenshots at malinaw na deskripsyon ng ginagawa ng bawat isa  
+- Lahat ay malinaw na may compatibility info  
+- May mga suggested na katulad na extensions para maikumpara mo ang mga opsyon  
 
-**Ang makikita mo sa loob:**
+### Pag-install ng Extensions (Napakadali!)  
 
-| Seksyon | Ano ang Nasa Loob | Bakit Ito Kapaki-pakinabang |
-|----------|---------|----------|
-| **Installed** | Mga extension na naidagdag mo na | Ang personal coding toolkit mo |
-| **Popular** | Mga paborito ng karamihan | Ang mga swear-by ng mga developer |
-| **Recommended** | Mga matalinong rekomendasyon para sa iyong proyekto | Ang helpful na suggestions ng VSCode.dev |
+Ang pagdaragdag ng mga bagong kakayahan sa iyong editor ay kasing simple ng pag-click sa isang button. Ang mga extension ay na-install sa loob ng ilang segundo at agad na gumagana – walang restart, walang paghihintay.  
 
-**Ano ang nagpapadali sa pag-browse:**
-- Bawat extension ay nagpapakita ng ratings, bilang ng downloads, at mga tunay na review mula sa mga user
-- Makakakita ka ng screenshots at malinaw na deskripsyon kung ano ang ginagawa ng bawat isa
-- Lahat ay malinaw na may compatibility info
-- May mga rekomendasyon ng katulad na extensions para maikumpara mo ang mga opsyon
+**Narito ang kailangan mong gawin:**  
 
-### Pag-install ng Extensions (Napakadali!)
+1. Maghanap ng gusto mo (subukang maghanap ng "live server" o "prettier")  
+2. I-click ang isa na mukhang maganda upang makita ang higit pang detalye  
+3. Basahin ang tungkol sa ginagawa nito at tingnan ang mga ratings  
+4. I-click ang asul na "Install" button at tapos ka na!  
 
-Ang pagdaragdag ng bagong kakayahan sa iyong editor ay kasing simple ng pag-click ng isang button. Ang mga extension ay nag-i-install sa loob ng ilang segundo at agad na gumagana – walang restart, walang paghihintay.
+![Pag-install ng extensions](../../../../8-code-editor/images/install-extension.gif)  
 
-**Narito ang kailangan mong gawin:**
+**Ano ang nangyayari sa likod ng eksena:**  
+- Ang extension ay nagda-download at nagse-set up ng sarili nito nang awtomatiko  
+- Ang mga bagong feature ay lumalabas agad sa iyong interface  
+- Lahat ay agad na gumagana (seryoso, ganun kabilis!)  
+- Kung naka-sign in ka, ang extension ay nagsi-sync sa lahat ng iyong device  
 
-1. Maghanap ng gusto mo (subukang maghanap ng "live server" o "prettier")
-2. I-click ang mukhang maganda para makita ang higit pang detalye
-3. Basahin kung ano ang ginagawa nito at tingnan ang ratings
-4. I-click ang asul na "Install" button at tapos ka na!
+**Ilang extension na mairerekomenda ko para magsimula:**  
+- **Live Server**: Makikita ang iyong website na nag-a-update nang real-time habang nagko-code ka (magical ito!)  
+- **Prettier**: Ginagawang malinis at propesyonal ang hitsura ng iyong code nang awtomatiko  
+- **Auto Rename Tag**: Baguhin ang isang HTML tag at ang partner nito ay nag-a-update din  
+- **Bracket Pair Colorizer**: Nagko-color-code ng iyong mga bracket para hindi ka maligaw  
+- **GitLens**: Pinapalakas ang iyong Git features gamit ang maraming kapaki-pakinabang na impormasyon  
 
-![Pag-install ng extensions](../../../../8-code-editor/images/install-extension.gif)
+### Pag-customize ng Iyong Extensions  
 
-**Ano ang nangyayari sa likod ng eksena:**
-- Ang extension ay awtomatikong nagda-download at nagse-set up
-- Ang mga bagong feature ay agad na lumalabas sa iyong interface
-- Lahat ay agad na gumagana (seryoso, ganito kabilis!)
-- Kung naka-sign in ka, ang extension ay nagsi-sync sa lahat ng iyong devices
+Karamihan sa mga extension ay may mga setting na maaari mong i-tweak upang gumana ang mga ito ayon sa gusto mo. Isipin ito tulad ng pag-aayos ng upuan at salamin sa isang kotse – lahat ay may kani-kaniyang kagustuhan!  
 
-**Ilang extensions na inirerekomenda kong simulan:**
-- **Live Server**: Makikita mo ang iyong website na nag-a-update nang real-time habang nagko-code ka (sobrang galing nito!)
-- **Prettier**: Ginagawang malinis at propesyonal ang iyong code nang awtomatiko
-- **Auto Rename Tag**: Kapag binago mo ang isang HTML tag, awtomatikong nag-a-update ang partner nito
-- **Bracket Pair Colorizer**: Nagko-color-code ng iyong brackets para hindi ka malito
-- **GitLens**: Pinapalakas ang iyong Git features gamit ang maraming kapaki-pakinabang na impormasyon
+**Pag-tweak ng mga setting ng extension:**  
 
-### Pag-customize ng Iyong Extensions
+1. Hanapin ang iyong na-install na extension sa Extensions panel  
+2. Hanapin ang maliit na gear icon (⚙️) sa tabi ng pangalan nito at i-click ito  
+3. Piliin ang "Extension Settings" mula sa dropdown  
+4. Ayusin ang mga bagay hanggang sa maging tama ang pakiramdam para sa iyong workflow  
 
-Karamihan sa mga extension ay may settings na maaari mong i-adjust para gumana ito ayon sa gusto mo. Isipin ito na parang inaayos ang upuan at salamin sa kotse – may kanya-kanyang preference ang bawat isa!
+![Pag-customize ng mga setting ng extension](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.tl.png)  
 
-**Pag-aayos ng settings ng extension:**
+**Mga karaniwang bagay na maaaring gusto mong ayusin:**  
+- Paano nafo-format ang iyong code (tabs vs spaces, haba ng linya, atbp.)  
+- Aling mga keyboard shortcuts ang nagti-trigger ng iba't ibang aksyon  
+- Anong mga file type ang dapat gumana ang extension  
+- Pag-on o pag-off ng mga partikular na feature para panatilihing malinis ang interface  
 
-1. Hanapin ang iyong na-install na extension sa Extensions panel
-2. Hanapin ang maliit na gear icon (⚙️) sa tabi ng pangalan nito at i-click ito
-3. Piliin ang "Extension Settings" mula sa dropdown
-4. I-adjust ang mga setting hanggang sa maging angkop ito sa iyong workflow
+### Pagpapanatili ng Organisasyon ng Iyong Extensions  
 
-![Pag-customize ng settings ng extension](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.tl.png)
+Habang natutuklasan mo ang mas maraming cool na extensions, gugustuhin mong panatilihing maayos ang iyong koleksyon at tumatakbo nang maayos. Ginagawang madali ng VSCode.dev ang pamamahala nito.  
 
-**Mga karaniwang bagay na maaaring i-adjust:**
-- Paano nafo-format ang iyong code (tabs vs spaces, haba ng linya, atbp.)
-- Aling mga keyboard shortcut ang magti-trigger ng iba't ibang aksyon
-- Anong mga uri ng file ang dapat gumana ang extension
-- Pag-on o pag-off ng mga partikular na feature para panatilihing malinis ang interface
+**Mga opsyon sa pamamahala ng extension:**  
 
-### Panatilihing Organisado ang Iyong Extensions
+| Ano ang Magagawa Mo | Kailan Ito Kapaki-pakinabang | Pro Tip |  
+|--------|---------|----------|  
+| **Disable** | Kapag sinusubukan kung ang isang extension ang sanhi ng mga isyu | Mas mabuti kaysa sa pag-uninstall kung maaaring gusto mo itong ibalik |  
+| **Uninstall** | Ganap na pag-alis ng mga extension na hindi mo kailangan | Pinapanatili ang malinis at mabilis na environment |  
+| **Update** | Pagkuha ng pinakabagong features at bug fixes | Karaniwang nangyayari nang awtomatiko, ngunit sulit na i-check |  
 
-Habang nadidiskubre mo ang mas maraming cool na extensions, gugustuhin mong panatilihing maayos at mabilis ang iyong koleksyon. Madali itong pamahalaan gamit ang VSCode.dev.
+**Paano ko gustong pamahalaan ang mga extension:**  
+- Tuwing ilang buwan, nire-review ko ang mga na-install ko at tinatanggal ang anumang hindi ko ginagamit  
+- Pinapanatili kong updated ang mga extension para makuha ang pinakabagong mga pagpapabuti at security fixes  
+- Kung may mukhang mabagal, pansamantala kong dini-disable ang mga extension upang makita kung isa sa mga ito ang sanhi  
+- Binabasa ko ang update notes kapag may major updates ang mga extension – minsan may mga cool na bagong feature!  
 
-**Mga opsyon sa pamamahala ng extension:**
+> ⚠️ **Tip sa Performance**: Ang mga extension ay kahanga-hanga, ngunit ang sobrang dami ay maaaring magpabagal. Mag-focus sa mga talagang nagpapadali sa buhay mo at huwag matakot na i-uninstall ang mga hindi mo ginagamit.  
 
-| Ano ang Pwede Mong Gawin | Kailan Ito Kapaki-pakinabang | Pro Tip |
-|--------|---------|----------|
-| **Disable** | Kapag sinusubukan kung ang extension ang sanhi ng problema | Mas maganda kaysa sa pag-uninstall kung sakaling gusto mo itong ibalik |
-| **Uninstall** | Ganap na pag-aalis ng mga extension na hindi mo kailangan | Pinapanatili ang iyong environment na malinis at mabilis |
-| **Update** | Pagkuha ng pinakabagong features at bug fixes | Karaniwang awtomatikong nangyayari, pero sulit na i-check |
+### 🎯 Pedagogical Check-in: Pag-customize ng Development Environment  
 
-**Paano ko pinamamahalaan ang extensions:**
-- Tuwing ilang buwan, nire-review ko ang mga na-install ko at inaalis ang mga hindi ko ginagamit
-- Pinapanatili kong updated ang extensions para makuha ang pinakabagong improvements at security fixes
-- Kapag may mabagal, pansamantala kong dini-disable ang mga extension para makita kung alin ang sanhi
-- Binabasa ko ang update notes kapag may major updates – minsan may mga cool na bagong features!
+**Pag-unawa sa Arkitektura**: Natutunan mong i-customize ang isang propesyonal na development environment gamit ang mga extension na ginawa ng komunidad. Ito ay sumasalamin sa kung paano bumubuo ang mga enterprise development teams ng standardized toolchains.  
 
-> ⚠️ **Tip sa Performance**: Ang extensions ay kahanga-hanga, pero ang sobrang dami ay maaaring magpabagal. Mag-focus sa mga talagang nagpapadali ng buhay mo at huwag matakot na i-uninstall ang mga hindi mo ginagamit.
+**Mga Key Concepts na Na-master**:  
+- **Extension Discovery**: Paghahanap ng mga tool na nagso-solve ng partikular na mga hamon sa pag-develop  
+- **Environment Configuration**: Pag-customize ng mga tool upang tumugma sa personal o team preferences  
+- **Performance Optimization**: Pagbabalanse ng functionality sa performance ng sistema  
+- **Community Collaboration**: Paggamit ng mga tool na ginawa ng global developer community  
 
-## Hamon ng GitHub Copilot Agent 🚀
+**Koneksyon sa Industriya**: Ang mga extension ecosystem ay nagpapalakas ng mga pangunahing development platform tulad ng VS Code, Chrome DevTools, at mga modernong IDE. Ang pag-unawa kung paano mag-evaluate, mag-install, at mag-configure ng mga extension ay mahalaga para sa mga propesyonal na workflow sa pag-develop.  
 
-Katulad ng sistematikong approach ng NASA sa mga space mission, ang hamon na ito ay tungkol sa sistematikong paggamit ng mga kasanayan sa VSCode.dev sa isang kumpletong workflow scenario.
+**Tanong sa Pagmumuni-muni**: Paano mo lalapitan ang pag-set up ng standardized development environment para sa isang team ng 10 developer? Isaalang-alang ang consistency, performance, at mga personal na kagustuhan.  
 
-**Layunin:** Ipakita ang kahusayan sa VSCode.dev sa pamamagitan ng pagtatatag ng komprehensibong web development workflow.
+## 📈 Ang Iyong Timeline sa Mastery ng Cloud Development  
 
-**Mga kinakailangan sa proyekto:** Gamit ang Agent mode assistance, kumpletuhin ang mga sumusunod na gawain:
-1. Mag-fork ng umiiral na repository o gumawa ng bago
-2. Magtatag ng functional na istruktura ng proyekto na may HTML, CSS, at JavaScript files
-3. Mag-install at mag-configure ng tatlong development-enhancing extensions
-4. Magpraktis ng version control gamit ang mga descriptive commit messages
-5. Mag-eksperimento sa paggawa at pagbabago ng feature branch
-6. I-dokumenta ang proseso at mga natutunan sa isang README.md file
+```mermaid
+timeline
+    title Professional Cloud Development Journey
+    
+    section Platform Foundations
+        Cloud Development Understanding
+            : Master web-based editing concepts
+            : Connect GitHub integration patterns
+            : Navigate professional interfaces
+    
+    section Workflow Mastery
+        File & Project Management
+            : Create organized project structures
+            : Master syntax highlighting benefits
+            : Handle multi-file editing workflows
+        
+        Version Control Integration
+            : Understand Git visualization
+            : Practice commit message standards
+            : Master change tracking workflows
+    
+    section Environment Customization
+        Extension Ecosystem
+            : Discover productivity extensions
+            : Configure development preferences
+            : Optimize performance vs functionality
+        
+        Professional Setup
+            : Build consistent workflows
+            : Create reusable configurations
+            : Establish team standards
+    
+    section Industry Readiness
+        Cloud-First Development
+            : Master remote development practices
+            : Understand collaborative workflows
+            : Build platform-independent skills
+        
+        Professional Practices
+            : Follow industry standards
+            : Create maintainable workflows
+            : Prepare for team environments
+```
+  
+**🎓 Graduation Milestone**: Matagumpay mong na-master ang cloud-based development gamit ang parehong mga tool at workflow na ginagamit ng mga propesyonal na developer sa mga pangunahing tech companies. Ang mga kasanayang ito ay kumakatawan sa hinaharap ng software development.  
 
-Ang exercise na ito ay pinagsasama-sama ang lahat ng VSCode.dev concepts sa isang praktikal na workflow na maaaring gamitin sa mga susunod na development projects.
+**🔄 Mga Kakayahang Susunod na Antas**:  
+- Handa nang tuklasin ang mga advanced na cloud development platforms (Codespaces, GitPod)  
+- Handa nang magtrabaho sa mga distributed development teams  
+- May kakayahang mag-ambag sa mga open source projects sa buong mundo  
+- Naka-set na ang pundasyon para sa modernong DevOps at mga continuous integration practices  
 
-Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+## Hamon sa GitHub Copilot Agent 🚀  
 
-## Assignment
+Tulad ng structured approach na ginagamit ng NASA para sa mga space missions, ang hamon na ito ay kinabibilangan ng sistematikong aplikasyon ng mga kasanayan sa VSCode.dev sa isang kumpletong workflow scenario.  
 
-Panahon na para subukan ang mga kasanayan na ito! May hands-on na proyekto ako na magpapahintulot sa iyo na i-practice ang lahat ng napag-usapan natin: [Gumawa ng resume website gamit ang VSCode.dev](./assignment.md)
+**Layunin:** Ipakita ang kahusayan sa VSCode.dev sa pamamagitan ng pagtatatag ng isang komprehensibong web development workflow.  
 
-Ang assignment na ito ay magtuturo sa iyo kung paano bumuo ng isang propesyonal na resume website nang buo sa iyong browser. Gagamitin mo ang lahat ng VSCode.dev features na napag-usapan natin, at sa huli, magkakaroon ka ng maganda at propesyonal na website pati na rin ang kumpiyansa sa iyong bagong workflow.
+**Mga kinakailangan sa proyekto:** Gamit ang Agent mode assistance, kumpletuhin ang mga sumusunod na gawain:  
+1. Mag-fork ng umiiral na repository o gumawa ng bago  
+2. Magtatag ng functional na project structure na may mga HTML, CSS, at JavaScript files  
+3. Mag-install at mag-configure ng tatlong development-enhancing extensions  
+4. Magpraktis ng version control gamit ang mga descriptive commit messages  
+5. Mag-eksperimento sa paggawa at pagbabago ng feature branch  
+6. I-dokumenta ang proseso at mga natutunan sa isang README.md file  
 
-## Patuloy na Tuklasin at Paunlarin ang Iyong Mga Kasanayan
+Ang exercise na ito ay pinagsasama-sama ang lahat ng mga konsepto ng VSCode.dev sa isang praktikal na workflow na maaaring i-apply sa mga susunod na development projects.  
 
-May matibay ka nang pundasyon ngayon, pero marami pang cool na bagay na matutuklasan! Narito ang ilang resources at ideya para dalhin ang iyong VSCode.dev skills sa susunod na level:
+Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.  
 
-**Opisyal na dokumentasyon na sulit i-bookmark:**
-- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – Ang kumpletong gabay sa browser-based editing
-- [GitHub Codespaces](https://docs.github.com/en/codespaces) – Para sa mas malakas na cloud-based development
+## Assignment  
 
-**Mga cool na features na susubukan:**
-- **Keyboard Shortcuts**: Alamin ang mga key combos na magpaparamdam sa iyo na parang coding ninja
-- **Workspace Settings**: Mag-set up ng iba't ibang environment para sa iba't ibang uri ng proyekto
-- **Multi-root Workspaces**: Magtrabaho sa maraming repositories nang sabay-sabay (sobrang kapaki-pakinabang!)
-- **Terminal Integration**: Mag-access ng command-line tools direkta sa iyong browser
+Panahon na para subukan ang mga kasanayang ito! Mayroon akong hands-on na proyekto na magpapahintulot sa iyo na magpraktis ng lahat ng ating natalakay: [Gumawa ng resume website gamit ang VSCode.dev](./assignment.md)  
 
-**Mga ideya para magpraktis:**
-- Sumali sa mga open-source projects at mag-contribute gamit ang VSCode.dev – magandang paraan para magbigay pabalik!
-- Subukan ang iba't ibang extensions para mahanap ang perpektong setup
-- Gumawa ng project templates para sa mga uri ng site na madalas mong binubuo
-- Magpraktis ng Git workflows tulad ng branching at merging – mahalaga ang mga kasanayang ito sa team projects
+Ang assignment na ito ay gagabay sa iyo sa paggawa ng isang propesyonal na resume website nang buo sa iyong browser. Gagamitin mo ang lahat ng VSCode.dev features na ating tinalakay, at sa huli, magkakaroon ka ng isang mahusay na website at solidong kumpiyansa sa iyong bagong workflow.  
 
----
+## Patuloy na Tuklasin at Palawakin ang Iyong Kasanayan  
+
+Mayroon ka nang matibay na pundasyon, ngunit marami pang mga cool na bagay na matutuklasan! Narito ang ilang mga resources at ideya para sa pagpapalawak ng iyong mga kasanayan sa VSCode.dev:  
+
+**Mga opisyal na dokumento na dapat i-bookmark:**  
+- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – Ang kumpletong gabay sa browser-based editing  
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) – Para sa mas makapangyarihang cloud development  
+
+**Mga cool na features na susunod na subukan:**  
+- **Keyboard Shortcuts**: Alamin ang mga key combos na magpaparamdam sa iyo na parang coding ninja  
+- **Workspace Settings**: Mag-set up ng iba't ibang environment para sa iba't ibang uri ng proyekto  
+- **Multi-root Workspaces**: Magtrabaho sa maraming repositories nang sabay-sabay (sobrang kapaki-pakinabang!)  
+- **Terminal Integration**: I-access ang mga command-line tools nang direkta sa iyong browser  
+
+**Mga ideya para magpraktis:**  
+- Sumali sa mga open-source projects at mag-ambag gamit ang VSCode.dev – mahusay na paraan para magbigay pabalik!  
+- Subukan ang iba't ibang extensions upang mahanap ang perpektong setup  
+- Gumawa ng mga project templates para sa mga uri ng site na madalas mong ginagawa  
+- Magpraktis ng Git workflows tulad ng branching at merging – ang mga kasanayang ito ay mahalaga sa team projects  
+
+---  
 
-**Na-master mo na ang browser-based development!** 🎉 Katulad ng imbensyon ng portable instruments na nagbigay-daan sa mga siyentipiko na magsagawa ng pananaliksik sa malalayong lugar, ang VSCode.dev ay nagbibigay-daan sa propesyonal na coding mula sa anumang device na may internet.
+**Na-master mo na ang browser-based development!** 🎉 Tulad ng kung paano ang imbensyon ng portable instruments ay nagbigay-daan sa mga siyentipiko na magsagawa ng pananaliksik sa mga remote na lokasyon, ang VSCode.dev ay nagbibigay-daan sa propesyonal na coding mula sa anumang device na may koneksyon sa internet.  
 
-Ang mga kasanayang ito ay sumasalamin sa kasalukuyang mga praktis sa industriya – maraming propesyonal na developer ang gumagamit ng cloud-based development environments para sa flexibility at accessibility. Natutunan mo ang workflow na maaaring gamitin mula sa mga indibidwal na proyekto hanggang sa malalaking team collaborations.
+Ang mga kasanayang ito ay sumasalamin sa kasalukuyang mga gawi sa industriya – maraming propesyonal na developer ang gumagamit ng cloud-based development environments para sa kanilang flexibility at accessibility. Natutunan mo ang isang workflow na maaaring i-scale mula sa mga indibidwal na proyekto hanggang sa malalaking team collaborations.  
 
-I-apply ang mga teknik na ito sa iyong susunod na development project! 🚀
+I-apply ang mga teknik na ito sa iyong susunod na development project! 🚀  
 
 ---
 
diff --git a/translations/tl/9-chat-project/README.md b/translations/tl/9-chat-project/README.md
index e2aace9128..e97fc44388 100644
--- a/translations/tl/9-chat-project/README.md
+++ b/translations/tl/9-chat-project/README.md
@@ -1,44 +1,107 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46d665af66e51524598af34a42b9b663",
-  "translation_date": "2025-10-22T15:28:09+00:00",
+  "original_hash": "2066c17078e9d18b5e309f31d8e8bc24",
+  "translation_date": "2025-11-03T13:53:25+00:00",
   "source_file": "9-chat-project/README.md",
   "language_code": "tl"
 }
 -->
 # Gumawa ng Chat Assistant gamit ang AI
 
-Naalala mo ba sa Star Trek kung paano nakikipag-usap ang crew sa computer ng barko, nagtatanong ng mga kumplikadong tanong at nakakatanggap ng mga makabuluhang sagot? Ang tila isang purong science fiction noong 1960s ay ngayon ay kaya mo nang gawin gamit ang mga teknolohiyang web na alam mo na.
+Naalala mo ba sa Star Trek kung paano nakikipag-usap ang crew sa computer ng barko, nagtatanong ng mahihirap na tanong at nakakatanggap ng makabuluhang sagot? Ang tila purong science fiction noong 1960s ay ngayon ay kaya mo nang gawin gamit ang mga teknolohiyang web na alam mo na.
 
-Sa araling ito, gagawa tayo ng AI chat assistant gamit ang HTML, CSS, JavaScript, at ilang backend integration. Matutuklasan mo kung paano ang parehong mga kasanayan na natutunan mo ay maaaring kumonekta sa mga makapangyarihang serbisyo ng AI na nakakaunawa ng konteksto at bumubuo ng makabuluhang mga sagot.
+Sa araling ito, gagawa tayo ng AI chat assistant gamit ang HTML, CSS, JavaScript, at ilang backend integration. Matutuklasan mo kung paano ang parehong mga kasanayan na natutunan mo ay maaaring kumonekta sa makapangyarihang AI services na nakakaunawa ng konteksto at bumubuo ng makabuluhang sagot.
 
-Isipin ang AI na parang may access ka sa isang napakalaking library na hindi lang naghahanap ng impormasyon kundi nagbubuo rin ng malinaw na mga sagot na naaayon sa iyong mga tanong. Sa halip na maghanap sa libu-libong pahina, makakakuha ka ng direktang sagot na may konteksto.
+Isipin ang AI na parang may access ka sa isang napakalaking library na hindi lang naghahanap ng impormasyon kundi nag-synthesize din nito sa malinaw na sagot na naaayon sa iyong mga tanong. Sa halip na maghanap sa libu-libong pahina, makakakuha ka ng direktang, kontekstwal na sagot.
 
-Ang integration ay nangyayari sa pamamagitan ng mga pamilyar na teknolohiyang web na nagtutulungan. Ang HTML ang gumagawa ng chat interface, ang CSS ang nag-aayos ng disenyo, ang JavaScript ang namamahala sa mga interaksyon ng user, at ang backend API ang nagkokonekta sa lahat ng ito sa mga serbisyo ng AI. Katulad ito ng kung paano nagtutulungan ang iba't ibang seksyon ng orchestra upang makabuo ng isang sinfonya.
+Ang integration ay nangyayari sa pamamagitan ng mga pamilyar na teknolohiyang web na nagtutulungan. Ang HTML ang gumagawa ng chat interface, ang CSS ang nag-aayos ng disenyo, ang JavaScript ang namamahala sa interaksyon ng user, at ang backend API ang nagkokonekta sa lahat sa AI services. Katulad ito ng kung paano nagtutulungan ang iba't ibang seksyon ng orchestra upang makabuo ng isang symphony.
 
-Sa esensya, gumagawa tayo ng tulay sa pagitan ng natural na komunikasyon ng tao at pagproseso ng makina. Matutunan mo ang parehong teknikal na implementasyon ng AI service integration at ang mga disenyo na nagpapadali sa pakikipag-ugnayan.
+Sa esensya, gumagawa tayo ng tulay sa pagitan ng natural na komunikasyon ng tao at pagproseso ng makina. Matutunan mo ang parehong teknikal na implementasyon ng AI service integration at ang mga disenyo na nagpapadama sa interaksyon na intuitive.
 
-Sa pagtatapos ng araling ito, ang AI integration ay magiging mas pamilyar sa iyo, parang isa pang API na kaya mong gamitin. Maiintindihan mo ang mga pundasyong pattern na nagpapagana sa mga aplikasyon tulad ng ChatGPT at Claude, gamit ang parehong mga prinsipyo ng web development na natutunan mo.
+Sa pagtatapos ng araling ito, ang AI integration ay magiging mas pamilyar, parang isa pang API na kaya mong gamitin. Maiintindihan mo ang mga pundasyong pattern na nagpapagana sa mga aplikasyon tulad ng ChatGPT at Claude, gamit ang parehong mga prinsipyo ng web development na natutunan mo.
+
+## ⚡ Mga Kaya Mong Gawin sa Loob ng 5 Minuto
+
+**Mabilisang Landas para sa Abalang Developer**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Get GitHub token]
+    B --> C[Test AI playground]
+    C --> D[Copy Python code]
+    D --> E[See AI responses]
+```
+
+- **Minuto 1**: Bisitahin ang [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) at gumawa ng personal access token
+- **Minuto 2**: Subukan ang AI interactions direkta sa playground interface
+- **Minuto 3**: I-click ang "Code" tab at kopyahin ang Python snippet
+- **Minuto 4**: Patakbuhin ang code sa lokal gamit ang iyong token: `GITHUB_TOKEN=your_token python test.py`
+- **Minuto 5**: Panoorin ang unang AI response na nabuo mula sa sarili mong code
+
+**Mabilisang Test Code**:
+```python
+import os
+from openai import OpenAI
+
+client = OpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key="your_token_here"
+)
+
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Hello AI!"}],
+    model="openai/gpt-4o-mini"
+)
+
+print(response.choices[0].message.content)
+```
+
+**Bakit Ito Mahalaga**: Sa loob ng 5 minuto, mararanasan mo ang magic ng programmatic AI interaction. Ito ang pundasyon na nagpapagana sa bawat AI application na ginagamit mo.
 
 Ganito ang magiging hitsura ng iyong natapos na proyekto:
 
-![Interface ng chat app na nagpapakita ng usapan sa pagitan ng user at AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tl.png)
+![Chat app interface na nagpapakita ng usapan sa pagitan ng user at AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tl.png)
 
-## Pag-unawa sa AI: Mula sa Misteryo patungo sa Mastery
+## 🗺️ Ang Iyong Paglalakbay sa Pagbuo ng AI Application
 
-Bago sumabak sa code, unawain muna natin kung ano ang ating ginagawa. Kung nakagamit ka na ng mga API dati, alam mo ang pangunahing pattern: magpadala ng request, tumanggap ng response.
+```mermaid
+journey
+    title From Web Development to AI Integration
+    section Understanding AI Foundations
+      Discover generative AI concepts: 4: You
+      Explore GitHub Models platform: 6: You
+      Master AI parameters and prompts: 8: You
+    section Backend Integration
+      Build Python API server: 5: You
+      Implement AI function calls: 7: You
+      Handle async operations: 8: You
+    section Frontend Development
+      Create modern chat interface: 6: You
+      Master real-time interactions: 8: You
+      Build responsive user experience: 9: You
+    section Professional Application
+      Deploy complete AI system: 7: You
+      Optimize performance patterns: 8: You
+      Create production-ready app: 9: You
+```
+
+**Destinasyon ng Iyong Paglalakbay**: Sa pagtatapos ng araling ito, makakabuo ka ng kumpletong AI-powered application gamit ang parehong teknolohiya at pattern na nagpapagana sa mga modernong AI assistant tulad ng ChatGPT, Claude, at Google Bard.
 
-Ang mga AI API ay sumusunod sa parehong istruktura, ngunit sa halip na kumuha ng pre-stored na data mula sa database, bumubuo sila ng mga bagong sagot batay sa mga pattern na natutunan mula sa napakalaking dami ng teksto. Isipin ito na parang pagkakaiba ng sistema ng katalogo ng library at isang librarian na marunong mag-synthesize ng impormasyon mula sa maraming mapagkukunan.
+## Pag-unawa sa AI: Mula sa Misteryo Patungo sa Mastery
 
-### Ano ba Talaga ang "Generative AI"?
+Bago sumabak sa code, unawain muna natin kung ano ang ating ginagawa. Kung nakagamit ka na ng APIs dati, alam mo ang basic na pattern: magpadala ng request, tumanggap ng response.
 
-Isipin kung paano ang Rosetta Stone ay nagbigay-daan sa mga iskolar na maunawaan ang mga hieroglyphics ng Egypt sa pamamagitan ng paghahanap ng mga pattern sa pagitan ng mga kilala at hindi kilalang wika. Ganito rin ang ginagawa ng mga AI model – hinahanap nila ang mga pattern sa napakalaking dami ng teksto upang maunawaan kung paano gumagana ang wika, at ginagamit ang mga pattern na ito upang bumuo ng angkop na mga sagot sa mga bagong tanong.
+Ang AI APIs ay sumusunod sa parehong istruktura, ngunit sa halip na kumuha ng pre-stored na data mula sa database, bumubuo sila ng bagong sagot batay sa mga pattern na natutunan mula sa napakaraming teksto. Isipin ito na parang pagkakaiba ng library catalog system at isang librarian na marunong mag-synthesize ng impormasyon mula sa maraming mapagkukunan.
 
-**Hayaan kong ipaliwanag ito sa isang simpleng paghahambing:**
-- **Tradisyunal na database**: Parang humihingi ng birth certificate – palaging pareho ang dokumento na makukuha mo
+### Ano nga ba ang "Generative AI"?
+
+Isipin kung paano ang Rosetta Stone ay nagbigay-daan sa mga iskolar na maunawaan ang Egyptian hieroglyphics sa pamamagitan ng paghahanap ng mga pattern sa pagitan ng kilala at hindi kilalang wika. Ganito rin gumagana ang AI models – naghahanap sila ng mga pattern sa napakaraming teksto upang maunawaan kung paano gumagana ang wika, at ginagamit ang mga pattern na ito upang bumuo ng angkop na sagot sa mga bagong tanong.
+
+**Hayaan kong ipaliwanag ito gamit ang simpleng paghahambing:**
+- **Tradisyunal na database**: Parang humihingi ng birth certificate – makukuha mo ang eksaktong dokumento tuwing hihilingin mo ito
 - **Search engine**: Parang humihingi sa librarian na maghanap ng mga libro tungkol sa pusa – ipapakita nila kung ano ang available
-- **Generative AI**: Parang nagtatanong sa isang matalinong kaibigan tungkol sa pusa – sasabihin nila ang mga kawili-wiling bagay sa kanilang sariling mga salita, naaayon sa gusto mong malaman
+- **Generative AI**: Parang nagtatanong sa isang matalinong kaibigan tungkol sa pusa – sasabihin nila ang mga kawili-wiling bagay sa sarili nilang salita, naaayon sa gusto mong malaman
 
 ```mermaid
 graph LR
@@ -52,19 +115,19 @@ graph LR
 
 ### Paano Natututo ang AI Models (Simpleng Bersyon)
 
-Ang mga AI model ay natututo sa pamamagitan ng exposure sa napakalaking dataset na naglalaman ng teksto mula sa mga libro, artikulo, at usapan. Sa prosesong ito, natutukoy nila ang mga pattern sa:
-- Paano binubuo ang mga ideya sa nakasulat na komunikasyon
+Ang AI models ay natututo sa pamamagitan ng exposure sa napakalaking datasets na naglalaman ng teksto mula sa mga libro, artikulo, at usapan. Sa prosesong ito, natutukoy nila ang mga pattern sa:
+- Paano istruktura ang mga ideya sa nakasulat na komunikasyon
 - Aling mga salita ang karaniwang magkasama
 - Paano karaniwang dumadaloy ang mga usapan
 - Mga pagkakaiba sa konteksto sa pagitan ng pormal at impormal na komunikasyon
 
-**Katulad ito ng kung paano binibigyang-kahulugan ng mga archaeologist ang mga sinaunang wika**: sinusuri nila ang libu-libong halimbawa upang maunawaan ang grammar, bokabularyo, at konteksto ng kultura, hanggang sa kaya na nilang bigyang-kahulugan ang mga bagong teksto gamit ang mga natutunang pattern.
+**Katulad ito ng kung paano binibigyang-kahulugan ng mga archaeologist ang sinaunang wika**: sinusuri nila ang libu-libong halimbawa upang maunawaan ang grammar, bokabularyo, at konteksto ng kultura, hanggang sa kaya na nilang bigyang-kahulugan ang mga bagong teksto gamit ang mga natutunang pattern.
 
 ### Bakit GitHub Models?
 
-Ginagamit natin ang GitHub Models para sa isang praktikal na dahilan – nagbibigay ito ng access sa enterprise-level AI nang hindi kinakailangang mag-set up ng sarili nating AI infrastructure (na, maniwala ka, hindi mo gugustuhing gawin ngayon!). Isipin ito na parang paggamit ng weather API sa halip na subukang hulaan ang panahon sa pamamagitan ng pag-set up ng mga weather station sa lahat ng lugar.
+Ginagamit natin ang GitHub Models para sa praktikal na dahilan – nagbibigay ito ng access sa enterprise-level AI nang hindi kailangang mag-set up ng sarili nating AI infrastructure (na, maniwala ka, hindi mo gugustuhing gawin ngayon!). Isipin ito na parang paggamit ng weather API sa halip na subukang hulaan ang panahon sa pamamagitan ng pag-set up ng mga weather station sa bawat lugar.
 
-Ito ay "AI-as-a-Service," at ang pinakamagandang bahagi? Libre itong simulan, kaya maaari kang mag-eksperimento nang hindi nag-aalala tungkol sa malaking gastos.
+Ito ay "AI-as-a-Service," at ang pinakamagandang bahagi? Libre itong simulan, kaya maaari kang mag-eksperimento nang hindi nag-aalala sa malaking gastusin.
 
 ```mermaid
 graph LR
@@ -76,19 +139,72 @@ graph LR
     B --> A
 ```
 
-Gagamitin natin ang GitHub Models para sa ating backend integration, na nagbibigay ng access sa mga propesyonal na AI capabilities sa pamamagitan ng isang developer-friendly interface. Ang [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ay nagsisilbing testing environment kung saan maaari kang mag-eksperimento sa iba't ibang AI models at maunawaan ang kanilang kakayahan bago ito i-implement sa code.
+Gagamitin natin ang GitHub Models para sa ating backend integration, na nagbibigay ng access sa professional-grade AI capabilities sa pamamagitan ng developer-friendly interface. Ang [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ay nagsisilbing testing environment kung saan maaari kang mag-eksperimento sa iba't ibang AI models at maunawaan ang kanilang kakayahan bago ito i-implement sa code.
 
-![Interface ng GitHub Models AI Playground na may model selection at testing area](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tl.png)
+## 🧠 Ecosystem ng Pagbuo ng AI Application
+
+```mermaid
+mindmap
+  root((AI Development))
+    Understanding AI
+      Generative Models
+        Pattern Recognition
+        Content Generation
+        Context Understanding
+        Response Synthesis
+      AI Parameters
+        Temperature Control
+        Token Limits
+        Top-p Filtering
+        System Prompts
+    Backend Architecture
+      API Integration
+        GitHub Models
+        Authentication
+        Request Handling
+        Error Management
+      Python Infrastructure
+        FastAPI Framework
+        Async Operations
+        Environment Security
+        CORS Configuration
+    Frontend Experience
+      Chat Interface
+        Real-time Updates
+        Message History
+        User Feedback
+        Loading States
+      Modern Web Tech
+        ES6 Classes
+        Async/Await
+        DOM Manipulation
+        Event Handling
+    Professional Patterns
+      Security Best Practices
+        Token Management
+        Input Validation
+        XSS Prevention
+        Error Boundaries
+      Production Readiness
+        Performance Optimization
+        Responsive Design
+        Accessibility
+        Testing Strategies
+```
+
+**Pangunahing Prinsipyo**: Ang pagbuo ng AI application ay pinagsasama ang tradisyunal na kasanayan sa web development at AI service integration, na lumilikha ng matatalinong aplikasyon na natural at tumutugon sa mga user.
+
+![GitHub Models AI Playground interface na may model selection at testing area](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tl.png)
 
 **Narito kung bakit kapaki-pakinabang ang playground:**
 - **Subukan** ang iba't ibang AI models tulad ng GPT-4o-mini, Claude, at iba pa (lahat libre!)
 - **I-test** ang iyong mga ideya at prompts bago ka magsulat ng code
-- **Kumuha** ng ready-to-use code snippets sa iyong paboritong programming language
+- **Kumuha** ng ready-to-use code snippets sa paborito mong programming language
 - **I-tweak** ang mga setting tulad ng creativity level at response length upang makita kung paano ito nakakaapekto sa output
 
-Kapag nakapaglaro ka na nang kaunti, i-click lang ang "Code" tab at piliin ang iyong programming language upang makuha ang implementation code na kakailanganin mo.
+Kapag nakapaglaro ka na nang kaunti, i-click lang ang "Code" tab at piliin ang programming language para makuha ang implementation code na kailangan mo.
 
-![Pagpipilian sa Playground na nagpapakita ng code generation options para sa iba't ibang programming languages](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tl.png)
+![Playground choice na nagpapakita ng code generation options para sa iba't ibang programming languages](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tl.png)
 
 ## Pag-set Up ng Python Backend Integration
 
@@ -113,7 +229,6 @@ client = OpenAI(
     api_key=os.environ["GITHUB_TOKEN"],
 )
 
-```python
 response = client.chat.completions.create(
     messages=[
         {
@@ -135,16 +250,16 @@ print(response.choices[0].message.content)
 ```
 
 **Narito ang nangyayari sa code na ito:**
-- **Nag-i-import** tayo ng mga tools na kailangan: `os` para sa pagbabasa ng environment variables at `OpenAI` para sa pakikipag-usap sa AI
-- **Inaayos** natin ang OpenAI client upang ituro sa GitHub's AI servers sa halip na direktang OpenAI
+- **Ini-import** natin ang mga tools na kailangan: `os` para sa pagbabasa ng environment variables at `OpenAI` para sa pakikipag-usap sa AI
+- **Inaayos** natin ang OpenAI client upang ituro sa GitHub's AI servers sa halip na direkta sa OpenAI
 - **Nag-aauthenticate** gamit ang isang espesyal na GitHub token (higit pa tungkol dito mamaya!)
 - **Istruktura** natin ang usapan gamit ang iba't ibang "roles" – isipin ito na parang pag-set ng eksena para sa isang play
 - **Nagpapadala** tayo ng request sa AI na may ilang fine-tuning parameters
 - **Kinukuha** natin ang aktwal na response text mula sa lahat ng data na bumalik
 
-### Pag-unawa sa Message Roles: Ang AI Conversation Framework
+### Pag-unawa sa Message Roles: Framework ng AI Conversation
 
-Ang mga usapan sa AI ay gumagamit ng isang partikular na istruktura na may iba't ibang "roles" na may natatanging layunin:
+Ang mga AI conversation ay gumagamit ng partikular na istruktura na may iba't ibang "roles" na may natatanging layunin:
 
 ```python
 messages=[
@@ -159,28 +274,28 @@ messages=[
 ]
 ```
 
-**Isipin ito na parang pagdidirekta ng isang play:**
-- **System role**: Parang stage directions para sa isang aktor – sinasabi nito sa AI kung paano kumilos, anong personalidad ang dapat mayroon, at kung paano sumagot
+**Isipin ito na parang nagdidirekta ng isang play:**
+- **System role**: Parang stage directions para sa aktor – sinasabi nito sa AI kung paano kumilos, anong personalidad ang dapat mayroon, at paano sumagot
 - **User role**: Ang aktwal na tanong o mensahe mula sa taong gumagamit ng iyong aplikasyon
-- **Assistant role**: Ang sagot ng AI (hindi mo ito ipinapadala, ngunit lumalabas ito sa history ng usapan)
+- **Assistant role**: Ang sagot ng AI (hindi mo ito ipinapadala, ngunit lumalabas ito sa conversation history)
 
-**Real-world analogy**: Isipin na ipinakikilala mo ang isang kaibigan sa isang tao sa party:
+**Halimbawa sa totoong buhay**: Isipin na ipinakikilala mo ang isang kaibigan sa isang tao sa party:
 - **System message**: "Ito ang kaibigan kong si Sarah, isa siyang doktor na mahusay magpaliwanag ng mga konsepto sa medisina sa simpleng paraan"
 - **User message**: "Paano gumagana ang mga bakuna?"
 - **Assistant response**: Sumagot si Sarah bilang isang magiliw na doktor, hindi bilang abogado o chef
 
-### Pag-unawa sa AI Parameters: Fine-Tuning Response Behavior
+### Pag-unawa sa AI Parameters: Fine-Tuning ng Ugali ng Pagsagot
 
-Ang mga numerical parameters sa AI API calls ay kumokontrol kung paano bumubuo ng mga sagot ang model. Ang mga setting na ito ay nagbibigay-daan sa iyo na i-adjust ang ugali ng AI para sa iba't ibang use cases:
+Ang mga numerikal na parameter sa AI API calls ay kumokontrol kung paano bumubuo ng sagot ang model. Ang mga setting na ito ay nagbibigay-daan sa iyo na i-adjust ang ugali ng AI para sa iba't ibang gamit:
 
 #### Temperature (0.0 hanggang 2.0): Ang Creativity Dial
 
 **Ano ang ginagawa nito**: Kinokontrol kung gaano ka-creative o predictable ang mga sagot ng AI.
 
-**Isipin ito na parang antas ng improvisation ng isang jazz musician:**
-- **Temperature = 0.1**: Tumutugtog ng eksaktong parehong melody sa bawat pagkakataon (sobrang predictable)
-- **Temperature = 0.7**: Nagdadagdag ng ilang tasteful na variation habang nananatiling pamilyar (balanced creativity)
-- **Temperature = 1.5**: Buong experimental jazz na may mga hindi inaasahang liko (sobrang unpredictable)
+**Isipin ito na parang antas ng improvisation ng jazz musician:**
+- **Temperature = 0.1**: Tumutugtog ng eksaktong parehong melody tuwing (sobrang predictable)
+- **Temperature = 0.7**: Nagdadagdag ng ilang tasteful variations habang nananatiling recognizable (balanced creativity)
+- **Temperature = 1.5**: Buong experimental jazz na may hindi inaasahang liko (sobrang unpredictable)
 
 ```python
 # Very predictable responses (good for factual questions)
@@ -196,7 +311,7 @@ response = client.chat.completions.create(
 )
 ```
 
-#### Max Tokens (1 hanggang 4096+): Ang Response Length Controller
+#### Max Tokens (1 hanggang 4096+): Ang Controller ng Haba ng Sagot
 
 **Ano ang ginagawa nito**: Naglalagay ng limitasyon sa haba ng sagot ng AI.
 
@@ -219,20 +334,20 @@ response = client.chat.completions.create(
 )
 ```
 
-#### Top_p (0.0 hanggang 1.0): Ang Focus Parameter
+#### Top_p (0.0 hanggang 1.0): Ang Parameter ng Focus
 
 **Ano ang ginagawa nito**: Kinokontrol kung gaano ka-focus ang AI sa mga pinaka-malamang na sagot.
 
-**Isipin ang AI na may napakalaking bokabularyo, niraranggo batay sa kung gaano ka-malamang ang bawat salita:**
-- **top_p=0.1**: Tanging isinasaalang-alang ang top 10% na pinaka-malamang na mga salita (sobrang focus)
-- **top_p=0.9**: Isinasaalang-alang ang 90% ng mga posibleng salita (mas creative)
+**Isipin ang AI na may napakalaking bokabularyo, niraranggo ayon sa kung gaano ka-malamang ang bawat salita:**
+- **top_p=0.1**: Tanging isinasaalang-alang ang top 10% na pinaka-malamang na salita (sobrang focus)
+- **top_p=0.9**: Isinasaalang-alang ang 90% ng posibleng salita (mas creative)
 - **top_p=1.0**: Isinasaalang-alang ang lahat (maximum variety)
 
-**Halimbawa**: Kung tatanungin mo "Ang langit ay karaniwang..."
+**Halimbawa**: Kung magtanong ka ng "Ang langit ay karaniwang..."
 - **Mababang top_p**: Halos tiyak na sasabihin "asul"
 - **Mataas na top_p**: Maaaring sabihin "asul", "maulap", "malawak", "nagbabago", "maganda", atbp.
 
-### Pagsasama-sama: Mga Kombinasyon ng Parameter para sa Iba't ibang Use Cases
+### Pagsasama-sama: Mga Kombinasyon ng Parameter para sa Iba't Ibang Gamit
 
 ```python
 # For factual, consistent answers (like a documentation bot)
@@ -257,7 +372,25 @@ conversational_params = {
 }
 ```
 
-**Pag-unawa kung bakit mahalaga ang mga parameter na ito**: Ang iba't ibang aplikasyon ay nangangailangan ng iba't ibang uri ng sagot. Ang customer service bot ay dapat na consistent at factual (mababang temperature), habang ang creative writing assistant ay dapat na imaginative at varied (mataas na temperature). Ang pag-unawa sa mga parameter na ito ay nagbibigay sa iyo ng kontrol sa personalidad at istilo ng sagot ng iyong AI.
+```mermaid
+quadrantChart
+    title AI Parameter Optimization Matrix
+    x-axis Low Creativity --> High Creativity
+    y-axis Short Response --> Long Response
+    
+    quadrant-1 Creative Content
+    quadrant-2 Detailed Analysis
+    quadrant-3 Quick Facts
+    quadrant-4 Conversational AI
+    
+    Documentation Bot: [0.2, 0.3]
+    Customer Service: [0.4, 0.4]
+    General Assistant: [0.7, 0.5]
+    Creative Writer: [0.9, 0.9]
+    Brainstorming Tool: [0.8, 0.8]
+```
+
+**Pag-unawa kung bakit mahalaga ang mga parameter na ito**: Ang iba't ibang aplikasyon ay nangangailangan ng iba't ibang uri ng sagot. Ang customer service bot ay dapat na consistent at factual (mababang temperature), habang ang creative writing assistant ay dapat na imaginative at varied (mataas na temperature). Ang pag-unawa sa mga parameter na ito ay nagbibigay sa iyo ng kontrol sa personalidad at istilo ng sagot ng AI.
 ```
 
 **Here's what's happening in this code:**
@@ -328,23 +461,23 @@ def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
 - **Nagbibigay** ng default na system message para sa pangkalahatang assistant behavior
 - **Gumagamit** ng tamang Python type hints para sa mas mahusay na dokumentasyon ng code
 - **Nagbabalik** ng response content lamang, na ginagawang madali itong gamitin sa ating web API
-- **Pinapanatili** ang parehong model parameters para sa consistent na AI behavior
+- **Pinapanatili** ang parehong model parameters para sa consistent na ugali ng AI
 
-### Ang Magic ng System Prompts: Pag-program ng AI Personality
+### Ang Magic ng System Prompts: Pag-program ng Personalidad ng AI
 
-Kung ang mga parameter ang kumokontrol kung paano mag-isip ang AI, ang system prompts ang kumokontrol kung sino ang iniisip ng AI na siya. Isa ito sa mga pinakakapanapanabik na bahagi ng pagtatrabaho sa AI – parang binibigyan mo ang AI ng kumpletong personalidad, antas ng expertise, at istilo ng komunikasyon.
+Kung ang mga parameter ang kumokontrol kung paano mag-isip ang AI, ang system prompts ang kumokontrol kung sino ang iniisip ng AI na siya. Isa ito sa pinakakapanapanabik na bahagi ng pagtatrabaho sa AI – parang binibigyan mo ang AI ng kumpletong personalidad, antas ng expertise, at istilo ng komunikasyon.
 
-**Isipin ang system prompts na parang pag-cast ng iba't ibang aktor para sa iba't ibang role**: Sa halip na magkaroon ng isang generic na assistant, maaari kang lumikha ng mga espesyal na eksperto para sa iba't ibang sitwasyon. Kailangan mo ba ng pasensyosong guro? Isang creative brainstorming partner? Isang no-nonsense na business advisor? Palitan lang ang system prompt!
+**Isipin ang system prompts na parang pag-cast ng iba't ibang aktor para sa iba't ibang role**: Sa halip na magkaroon ng isang generic na assistant, maaari kang lumikha ng mga espesyalista para sa iba't ibang sitwasyon. Kailangan mo ba ng pasensyosong guro? Isang creative brainstorming partner? Isang seryosong business advisor? Palitan lang ang system prompt!
 
 #### Bakit Napakalakas ng System Prompts
 
-Narito ang kamangha-manghang bahagi: Ang mga AI model ay na-train sa napakaraming usapan kung saan ang mga tao ay nag-a-adopt ng iba't ibang role at antas ng expertise. Kapag binigyan mo ang AI ng isang partikular na role, parang pinipindot mo ang isang switch na nag-a-activate sa lahat ng natutunang pattern.
+Narito ang kamangha-manghang bahagi: Ang AI models ay sinanay sa napakaraming usapan kung saan ang mga tao ay nag-a-adopt ng iba't ibang role at antas ng expertise. Kapag binigyan mo ang AI ng partikular na role, parang pinipindot mo ang switch na nag-a-activate sa lahat ng natutunang pattern.
 
-**Parang method acting para sa AI**: Sabihin sa isang aktor "ikaw ay isang matalinong propesor" at panoorin kung paano nila awtomatikong ina-adjust ang kanilang postura, bokabularyo, at kilos. Ang AI ay gumagawa ng isang bagay na kahanga-hanga na katulad nito gamit ang mga pattern ng wika.
+**Parang method acting para sa AI**: Sabihin sa aktor "ikaw ay isang matalinong propesor" at panoorin kung paano nila awtomatikong ina-adjust ang kanilang postura, bokabularyo, at kilos. Ginagawa ng AI ang isang bagay na kahanga-hanga sa mga pattern ng wika.
 
-#### Paggawa ng Epektibong System Prompts: Ang Art at Science
+#### Paglikha ng Epektibong System Prompts: Ang Art at Science
 
-**Ang anatomy ng isang mahusay na system prompt:**
+**Ang anatomy ng mahusay na system prompt:**
 1. **Role/Identity**: Sino ang AI?
 2. **Expertise**: Ano ang alam nila?
 3. **Communication style**: Paano sila magsalita?
@@ -388,7 +521,7 @@ probing questions to understand the full business context before giving advice.
 """
 ```
 
-#### Pagkakita ng System Prompts sa Aksyon
+#### Nakikita ang System Prompts sa Aksyon
 
 Subukan natin ang parehong tanong gamit ang iba't ibang system prompts upang makita ang dramatikong pagkakaiba:
 
@@ -413,9 +546,9 @@ business_response = call_llm(
 # user experience, and scalability..."
 ```
 
-#### Advanced System Prompt Techniques
+#### Mga Advanced na Teknik sa System Prompt
 
-**1. Context Setting**: Bigyan ang AI ng background information
+**1. Pag-set ng Konteksto**: Bigyan ang AI ng background information
 ```python
 system_prompt = """
 You are helping a junior developer who just started their first job at a startup. 
@@ -424,7 +557,7 @@ Be encouraging and explain things step-by-step without being condescending.
 """
 ```
 
-**2. Output Formatting**: Sabihin sa AI kung paano istrukturahin ang mga sagot
+**2. Pag-format ng Output**: Sabihin sa AI kung paano istruktura ang mga sagot  
 ```python
 system_prompt = """
 You are a technical mentor. Always structure your responses as:
@@ -435,8 +568,8 @@ You are a technical mentor. Always structure your responses as:
 5. Next Steps for Learning
 """
 ```
-
-**3. Constraint Setting**: Tukuyin kung ano ang hindi dapat gawin ng AI
+  
+**3. Pag-set ng Constraint**: Tukuyin kung ano ang HINDI dapat gawin ng AI  
 ```python
 system_prompt = """
 You are a coding tutor focused on teaching best practices. Never write complete 
@@ -444,50 +577,65 @@ solutions for the user - instead, guide them with hints and questions so they
 learn by doing. Always explain the 'why' behind coding decisions.
 """
 ```
+  
+
+#### Bakit Mahalaga Ito para sa Iyong Chat Assistant  
 
-#### Bakit Mahalaga Ito para sa Iyong Chat Assistant
+Ang pag-unawa sa mga system prompt ay nagbibigay sa iyo ng kapangyarihang lumikha ng mga espesyal na AI assistant:  
+- **Bot para sa Serbisyo sa Customer**: Matulungin, pasensyoso, may kaalaman sa mga patakaran  
+- **Tutor sa Pag-aaral**: Nakakaengganyo, hakbang-hakbang, sinusuri ang pag-unawa  
+- **Kasamang Malikhain**: Imaginative, nagtatayo sa mga ideya, nagtatanong ng "paano kung?"  
+- **Eksperto sa Teknolohiya**: Eksakto, detalyado, may kamalayan sa seguridad  
 
-Ang pag-unawa sa system prompts ay nagbibigay sa iyo ng kamangha-manghang kapangyarihan upang lumikha ng mga espesyal na AI assistants:
-- **Customer service bot**: Matulungin, pasensyoso, may alam sa mga polisiya
-- **Learning tutor**: Nakaka-encourage, step-by-step, sinusuri ang pag-unawa
-- **Creative partner**: Imaginative, nagbuo ng mga ideya, nagtatanong ng "paano kung?"
-- **Technical expert**: Precise, detalyado, may kamalayan sa seguridad
+**Ang mahalagang insight**: Hindi ka lang tumatawag sa isang AI API – gumagawa ka ng custom na AI personality na tumutugon sa iyong partikular na layunin. Ito ang dahilan kung bakit ang mga modernong AI application ay nararamdaman na akma at kapaki-pakinabang sa halip na generic.  
 
-**Ang pangunahing insight**: Hindi ka lang tumatawag sa isang AI API – lumilikha ka ng custom na AI personality na nagsisilbi sa iyong partikular na use case. Ito ang nagpaparamdam sa mga modernong AI application na tailored at kapaki-pakinabang sa halip na generic.
+### 🎯 Pedagogical Check-in: Pag-program ng AI Personality  
 
-## Pagbuo ng Web API gamit ang FastAPI: Ang Iyong High-Performance AI Communication Hub
+**Huminto at Magnilay**: Natutunan mo lang kung paano i-program ang mga AI personality gamit ang mga system prompt. Ito ay isang pangunahing kasanayan sa modernong pag-develop ng AI application.  
 
-Ngayon, gawin natin ang backend na kumokonekta sa iyong frontend sa mga AI services. Gagamit tayo ng FastAPI, isang modernong Python framework na mahusay sa paggawa ng mga API para sa AI applications.
+**Mabilis na Pagsusuri sa Sarili**:  
+- Kaya mo bang ipaliwanag kung paano naiiba ang mga system prompt sa mga regular na mensahe ng user?  
+- Ano ang pagkakaiba ng temperature at top_p parameters?  
+- Paano ka gagawa ng system prompt para sa isang partikular na layunin (halimbawa, coding tutor)?  
 
-Ang FastAPI ay nag-aalok ng ilang mga benepisyo para sa ganitong uri ng proyekto: built-in async support para sa paghawak ng sabay-sabay na mga request, automatic API documentation generation, at mahusay na performance. Ang iyong FastAPI server ay nagsisilbing tagapamagitan na tumatanggap ng mga request mula sa frontend, nakikipag-usap sa mga AI services, at nagbabalik ng mga formatted na sagot.
+**Koneksyon sa Tunay na Mundo**: Ang mga teknik sa system prompt na natutunan mo ay ginagamit sa bawat pangunahing AI application - mula sa coding assistance ng GitHub Copilot hanggang sa conversational interface ng ChatGPT. Master mo na ang parehong mga pattern na ginagamit ng mga AI product team sa malalaking tech na kumpanya.  
 
-### Bakit FastAPI para sa AI Applications?
+**Tanong sa Hamon**: Paano mo ididisenyo ang iba't ibang AI personality para sa iba't ibang uri ng user (baguhan vs eksperto)? Isaalang-alang kung paano maaaring maglingkod ang parehong AI model sa iba't ibang audience sa pamamagitan ng prompt engineering.  
 
-Maaaring iniisip mo: "Hindi ba pwedeng direktang tumawag sa AI mula sa aking frontend JavaScript?" o "Bakit FastAPI sa halip na Flask o Django?" Magandang tanong!
-**Narito kung bakit perpekto ang FastAPI para sa ginagawa natin:**
-- **Async by default**: Kayang mag-handle ng maraming AI requests nang sabay-sabay nang hindi natatambakan
-- **Automatic docs**: Bisitahin ang `/docs` para sa maganda at interactive na API documentation page nang libre
-- **Built-in validation**: Nahuhuli ang mga error bago pa ito magdulot ng problema
-- **Napakabilis**: Isa sa pinakamabilis na Python frameworks
-- **Modern Python**: Ginagamit ang pinakabagong features ng Python
+## Pagbuo ng Web API gamit ang FastAPI: Ang Iyong High-Performance AI Communication Hub  
 
-**At narito kung bakit kailangan natin ng backend:**
+Ngayon, magtatayo tayo ng backend na kumokonekta sa iyong frontend sa mga AI service. Gagamit tayo ng FastAPI, isang modernong Python framework na mahusay sa pagbuo ng mga API para sa mga AI application.  
 
-**Seguridad**: Ang iyong AI API key ay parang password – kung ilalagay mo ito sa frontend JavaScript, maaaring makita ito ng sinuman na tumingin sa source code ng iyong website at gamitin ang iyong AI credits. Ang backend ang nagtatago ng mga sensitibong credentials.
+Nag-aalok ang FastAPI ng ilang mga benepisyo para sa ganitong uri ng proyekto: built-in async support para sa paghawak ng sabay-sabay na mga request, awtomatikong pagbuo ng API documentation, at mahusay na performance. Ang iyong FastAPI server ang magsisilbing tagapamagitan na tumatanggap ng mga request mula sa frontend, nakikipag-ugnayan sa mga AI service, at nagbabalik ng mga formatted na sagot.  
 
-**Rate Limiting & Control**: Sa backend, makokontrol mo kung gaano kadalas maaaring mag-request ang mga user, mag-implement ng user authentication, at magdagdag ng logging para sa pagsubaybay sa paggamit.
+### Bakit FastAPI para sa AI Applications?  
 
-**Data Processing**: Maaaring gusto mong i-save ang mga pag-uusap, i-filter ang hindi angkop na content, o pagsamahin ang iba't ibang AI services. Sa backend ginagawa ang ganitong logic.
+Maaaring iniisip mo: "Hindi ba pwedeng tawagan ko na lang ang AI direkta mula sa aking frontend JavaScript?" o "Bakit FastAPI sa halip na Flask o Django?" Magandang tanong!  
 
-**Ang arkitektura ay kahalintulad ng client-server model:**
-- **Frontend**: Layer para sa user interface at interaksyon
-- **Backend API**: Layer para sa pagproseso ng request at routing
-- **AI Service**: Panlabas na computation at response generation
-- **Environment Variables**: Secure na storage para sa configuration at credentials
+**Narito kung bakit perpekto ang FastAPI para sa ating binubuo:**  
+- **Async by default**: Kayang hawakan ang maraming AI request nang sabay-sabay nang hindi natatali  
+- **Automatic docs**: Bisitahin ang `/docs` at makakakuha ng maganda, interactive na API documentation page nang libre  
+- **Built-in validation**: Nahuhuli ang mga error bago ito magdulot ng problema  
+- **Napakabilis**: Isa sa pinakamabilis na Python frameworks  
+- **Modern Python**: Gumagamit ng lahat ng pinakabagong feature ng Python  
 
-### Pag-unawa sa Request-Response Flow
+**At narito kung bakit kailangan natin ng backend:**  
 
-Sundan natin ang nangyayari kapag nagpadala ng mensahe ang isang user:
+**Seguridad**: Ang iyong AI API key ay parang password – kung ilalagay mo ito sa frontend JavaScript, maaaring makita ito ng sinuman na tumitingin sa source code ng iyong website at gamitin ang iyong AI credits. Ang backend ang nagtatago ng mga sensitibong kredensyal.  
+
+**Rate Limiting & Control**: Ang backend ang nagbibigay-daan sa iyo na kontrolin kung gaano kadalas maaaring mag-request ang mga user, magpatupad ng user authentication, at magdagdag ng logging para subaybayan ang paggamit.  
+
+**Pagproseso ng Data**: Maaaring gusto mong i-save ang mga pag-uusap, i-filter ang hindi naaangkop na content, o pagsamahin ang maraming AI service. Ang backend ang lugar kung saan naninirahan ang logic na ito.  
+
+**Ang arkitektura ay kahawig ng client-server model:**  
+- **Frontend**: Layer ng user interface para sa interaksyon  
+- **Backend API**: Layer ng pagproseso ng request at routing  
+- **AI Service**: Panlabas na computation at pagbuo ng sagot  
+- **Environment Variables**: Secure na configuration at storage ng kredensyal  
+
+### Pag-unawa sa Request-Response Flow  
+
+Subaybayan natin kung ano ang nangyayari kapag ang isang user ay nagpadala ng mensahe:  
 
 ```mermaid
 sequenceDiagram
@@ -505,16 +653,16 @@ sequenceDiagram
     API->>Frontend: {"response": "Hello! How can I help?"}
     Frontend->>User: Displays AI message
 ```
+  
+**Pag-unawa sa bawat hakbang:**  
+1. **Interaksyon ng User**: Nagta-type ang tao sa chat interface  
+2. **Pagproseso ng Frontend**: Kinukuha ng JavaScript ang input at inaayos ito bilang JSON  
+3. **Pag-validate ng API**: Awtomatikong sine-check ng FastAPI ang request gamit ang Pydantic models  
+4. **AI integration**: Idinadagdag ng backend ang context (system prompt) at tinatawag ang AI service  
+5. **Paghawak ng Sagot**: Tinatanggap ng API ang sagot ng AI at maaaring baguhin ito kung kinakailangan  
+6. **Pag-display sa Frontend**: Ipinapakita ng JavaScript ang sagot sa chat interface  
 
-**Pag-unawa sa bawat hakbang:**
-1. **User interaction**: Nagta-type ang tao sa chat interface
-2. **Frontend processing**: Kinukuha ng JavaScript ang input at inaayos ito bilang JSON
-3. **API validation**: Awtomatikong sine-check ng FastAPI ang request gamit ang Pydantic models
-4. **AI integration**: Idinadagdag ng backend ang context (system prompt) at tinatawag ang AI service
-5. **Response handling**: Tinatanggap ng API ang AI response at maaaring baguhin ito kung kinakailangan
-6. **Frontend display**: Ipinapakita ng JavaScript ang response sa chat interface
-
-### Pag-unawa sa API Architecture
+### Pag-unawa sa API Architecture  
 
 ```mermaid
 sequenceDiagram
@@ -530,10 +678,34 @@ sequenceDiagram
     AI Function->>FastAPI: response text
     FastAPI->>Frontend: {"response": "Hello! How can I help?"}
 ```
+  
+```mermaid
+flowchart TD
+    A[User Input] --> B[Frontend Validation]
+    B --> C[HTTP POST Request]
+    C --> D[FastAPI Router]
+    D --> E[Pydantic Validation]
+    E --> F[AI Function Call]
+    F --> G[GitHub Models API]
+    G --> H[Response Processing]
+    H --> I[JSON Response]
+    I --> J[Frontend Update]
+    
+    subgraph "Security Layer"
+        K[CORS Middleware]
+        L[Environment Variables]
+        M[Error Handling]
+    end
+    
+    D --> K
+    F --> L
+    H --> M
+```
+  
 
-### Paglikha ng FastAPI Application
+### Paglikha ng FastAPI Application  
 
-Gawin natin ang API step by step. Gumawa ng file na tinatawag na `api.py` gamit ang sumusunod na FastAPI code:
+Gawin natin ang API step by step. Gumawa ng file na tinatawag na `api.py` gamit ang sumusunod na FastAPI code:  
 
 ```python
 # api.py
@@ -611,43 +783,43 @@ if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
 ```
+  
+**Pag-unawa sa implementasyon ng FastAPI:**  
+- **Imports** FastAPI para sa modernong functionality ng web framework at Pydantic para sa data validation  
+- **Nagbibigay** ng awtomatikong API documentation (available sa `/docs` kapag tumatakbo ang server)  
+- **Nag-enable** ng CORS middleware para payagan ang mga request ng frontend mula sa iba't ibang pinagmulan  
+- **Nagde-define** ng Pydantic models para sa awtomatikong validation ng request/response at documentation  
+- **Gumagamit** ng async endpoints para sa mas mahusay na performance sa sabay-sabay na mga request  
+- **Nag-implement** ng tamang HTTP status codes at error handling gamit ang HTTPException  
+- **Naglalaman** ng structured logging para sa monitoring at debugging  
+- **Nagbibigay** ng health check endpoint para sa monitoring ng status ng serbisyo  
 
-**Pag-unawa sa FastAPI implementation:**
-- **Imports** FastAPI para sa modernong web framework functionality at Pydantic para sa data validation
-- **Nagbibigay** ng awtomatikong API documentation (makikita sa `/docs` kapag tumatakbo ang server)
-- **Nag-enable** ng CORS middleware para payagan ang frontend requests mula sa iba't ibang origins
-- **Nagde-define** ng Pydantic models para sa awtomatikong request/response validation at documentation
-- **Gumagamit** ng async endpoints para sa mas mahusay na performance sa sabay-sabay na requests
-- **Nag-iimplement** ng tamang HTTP status codes at error handling gamit ang HTTPException
-- **Naglalaman** ng structured logging para sa monitoring at debugging
-- **Nagbibigay** ng health check endpoint para sa pagsubaybay sa status ng serbisyo
+**Mga pangunahing benepisyo ng FastAPI kumpara sa tradisyunal na mga framework:**  
+- **Awtomatikong validation**: Tinitiyak ng Pydantic models ang integridad ng data bago ito iproseso  
+- **Interactive docs**: Bisitahin ang `/docs` para sa auto-generated, testable API documentation  
+- **Type safety**: Ang Python type hints ay pumipigil sa runtime errors at nagpapabuti sa kalidad ng code  
+- **Async support**: Kayang hawakan ang maraming AI request nang sabay-sabay nang hindi natatali  
+- **Performance**: Mas mabilis ang pagproseso ng request para sa real-time na mga application  
 
-**Mga pangunahing bentahe ng FastAPI kumpara sa tradisyunal na frameworks:**
-- **Awtomatikong validation**: Tinitiyak ng Pydantic models ang integridad ng data bago ito iproseso
-- **Interactive docs**: Bisitahin ang `/docs` para sa auto-generated, testable API documentation
-- **Type safety**: Ang Python type hints ay nakakaiwas sa runtime errors at nagpapabuti sa kalidad ng code
-- **Async support**: Kayang mag-handle ng maraming AI requests nang sabay-sabay
-- **Performance**: Mas mabilis ang request processing para sa real-time applications
+### Pag-unawa sa CORS: Ang Security Guard ng Web  
 
-### Pag-unawa sa CORS: Ang Security Guard ng Web
+Ang CORS (Cross-Origin Resource Sharing) ay parang security guard sa isang gusali na nagche-check kung pinapayagan ang mga bisita na pumasok. Unawain natin kung bakit ito mahalaga at paano ito nakakaapekto sa iyong application.  
 
-Ang CORS (Cross-Origin Resource Sharing) ay parang security guard sa isang gusali na nagche-check kung pinapayagan ang mga bisita na pumasok. Alamin natin kung bakit ito mahalaga at paano ito nakakaapekto sa iyong application.
+#### Ano ang CORS at Bakit Ito Umiiral?  
 
-#### Ano ang CORS at Bakit Ito Umiiral?
+**Ang Problema**: Isipin kung ang anumang website ay maaaring mag-request sa website ng iyong bangko sa ngalan mo nang walang pahintulot. Isang security nightmare iyon! Pinipigilan ito ng mga browser sa pamamagitan ng "Same-Origin Policy."  
 
-**Ang Problema**: Isipin kung ang anumang website ay maaaring mag-request sa website ng iyong bangko nang walang pahintulot mo. Isang malaking security issue iyon! Pinipigilan ito ng mga browser sa pamamagitan ng "Same-Origin Policy."
+**Same-Origin Policy**: Pinapayagan lang ng mga browser ang mga web page na mag-request sa parehong domain, port, at protocol kung saan sila na-load.  
 
-**Same-Origin Policy**: Pinapayagan lamang ng mga browser ang mga web page na mag-request sa parehong domain, port, at protocol kung saan sila na-load.
+**Real-world analogy**: Parang security sa apartment building – ang mga residente (same origin) lang ang maaaring pumasok sa gusali bilang default. Kung gusto mong papasukin ang isang kaibigan (different origin), kailangan mong sabihin sa security na okay lang.  
 
-**Real-world analogy**: Parang security sa apartment building – ang mga residente (same origin) lang ang maaaring pumasok sa gusali nang default. Kung gusto mong papasukin ang kaibigan (different origin), kailangan mong sabihin sa security na okay lang.
+#### CORS sa Iyong Development Environment  
 
-#### CORS sa Iyong Development Environment
+Sa panahon ng development, ang iyong frontend at backend ay tumatakbo sa iba't ibang ports:  
+- Frontend: `http://localhost:3000` (o file:// kung direktang binubuksan ang HTML)  
+- Backend: `http://localhost:5000`  
 
-Sa development, ang iyong frontend at backend ay tumatakbo sa iba't ibang ports:
-- Frontend: `http://localhost:3000` (o file:// kung direktang binuksan ang HTML)
-- Backend: `http://localhost:5000`
-
-Ang mga ito ay itinuturing na "different origins" kahit na nasa parehong computer!
+Ang mga ito ay itinuturing na "magkaibang origins" kahit na nasa parehong computer!  
 
 ```python
 from fastapi.middleware.cors import CORSMiddleware
@@ -655,13 +827,13 @@ from fastapi.middleware.cors import CORSMiddleware
 app = FastAPI(__name__)
 CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"
 ```
+  
+**Ano ang ginagawa ng CORS configuration sa praktika:**  
+- **Nagdadagdag** ng espesyal na HTTP headers sa mga API response na nagsasabi sa mga browser "pinapayagan ang cross-origin request na ito"  
+- **Humahawak** ng "preflight" requests (minsan sine-check ng mga browser ang permissions bago magpadala ng aktwal na request)  
+- **Pinipigilan** ang nakakatakot na "blocked by CORS policy" error sa iyong browser console  
 
-**Ano ang ginagawa ng CORS configuration sa praktika:**
-- **Nagdadagdag** ng espesyal na HTTP headers sa API responses na nagsasabi sa mga browser "pinapayagan ang cross-origin request na ito"
-- **Nagha-handle** ng "preflight" requests (minsan sine-check ng mga browser ang permissions bago magpadala ng aktwal na request)
-- **Pinipigilan** ang nakakainis na "blocked by CORS policy" error sa iyong browser console
-
-#### CORS Security: Development vs Production
+#### Seguridad ng CORS: Development vs Production  
 
 ```python
 # 🚨 Development: Allows ALL origins (convenient but insecure)
@@ -676,43 +848,43 @@ if app.debug:  # Development mode
 else:  # Production mode
     CORS(app, origins=["https://yourdomain.com"])
 ```
+  
+**Bakit ito mahalaga**: Sa development, ang `CORS(app)` ay parang iniwang bukas ang pintuan – maginhawa pero hindi secure. Sa production, gusto mong tukuyin nang eksakto kung aling mga website ang maaaring makipag-usap sa iyong API.  
 
-**Bakit ito mahalaga**: Sa development, ang `CORS(app)` ay parang iniwan mong bukas ang pintuan – maginhawa pero hindi secure. Sa production, gusto mong tukuyin kung aling mga website lang ang maaaring makipag-usap sa iyong API.
+#### Karaniwang CORS Scenarios at Solusyon  
 
-#### Karaniwang CORS Scenarios at Solusyon
+| Scenario | Problema | Solusyon |  
+|----------|---------|----------|  
+| **Local Development** | Hindi maabot ng frontend ang backend | Magdagdag ng CORSMiddleware sa FastAPI |  
+| **GitHub Pages + Heroku** | Hindi maabot ng deployed frontend ang API | Idagdag ang URL ng GitHub Pages sa CORS origins |  
+| **Custom Domain** | CORS errors sa production | I-update ang CORS origins para tumugma sa iyong domain |  
+| **Mobile App** | Hindi maabot ng app ang web API | Idagdag ang domain ng iyong app o gamitin ang `*` nang maingat |  
 
-| Scenario | Problema | Solusyon |
-|----------|----------|----------|
-| **Local Development** | Hindi maabot ng frontend ang backend | Magdagdag ng CORSMiddleware sa FastAPI |
-| **GitHub Pages + Heroku** | Hindi maabot ng deployed frontend ang API | Idagdag ang URL ng GitHub Pages sa CORS origins |
-| **Custom Domain** | CORS errors sa production | I-update ang CORS origins para tumugma sa iyong domain |
-| **Mobile App** | Hindi maabot ng app ang web API | Idagdag ang domain ng iyong app o gamitin ang `*` nang maingat |
-
-**Pro tip**: Maaari mong i-check ang CORS headers sa Developer Tools ng iyong browser sa ilalim ng Network tab. Hanapin ang headers tulad ng `Access-Control-Allow-Origin` sa response.
+**Pro tip**: Maaari mong i-check ang CORS headers sa Developer Tools ng iyong browser sa ilalim ng Network tab. Hanapin ang headers tulad ng `Access-Control-Allow-Origin` sa response.  
 
-### Error Handling at Validation
+### Pag-handle ng Error at Validation  
 
-Pansinin kung paano ang API natin ay may tamang error handling:
+Pansinin kung paano ang ating API ay may tamang pag-handle ng error:  
 
 ```python
 # Validate that we received a message
 if not message:
     return jsonify({"error": "Message field is required"}), 400
 ```
+  
+**Mga pangunahing prinsipyo ng validation:**  
+- **Sine-check** ang mga kinakailangang field bago iproseso ang mga request  
+- **Nagbabalik** ng makabuluhang error messages sa JSON format  
+- **Gumagamit** ng tamang HTTP status codes (400 para sa bad requests)  
+- **Nagbibigay** ng malinaw na feedback para matulungan ang mga frontend developer na mag-debug ng mga isyu  
 
-**Mga pangunahing prinsipyo ng validation:**
-- **Sine-check** ang mga kinakailangang field bago iproseso ang requests
-- **Nagbabalik** ng makabuluhang error messages sa JSON format
-- **Gumagamit** ng tamang HTTP status codes (400 para sa bad requests)
-- **Nagbibigay** ng malinaw na feedback para matulungan ang mga frontend developers na mag-debug ng issues
+## Pag-set Up at Pagpapatakbo ng Iyong Backend  
 
-## Pag-setup at Pagpapatakbo ng Iyong Backend
+Ngayon na mayroon na tayong AI integration at FastAPI server, simulan natin ang lahat. Ang proseso ng setup ay kinabibilangan ng pag-install ng Python dependencies, pag-configure ng environment variables, at pagsisimula ng development server.  
 
-Ngayon na mayroon na tayong AI integration at FastAPI server, simulan na natin ang lahat. Ang proseso ng setup ay kinabibilangan ng pag-install ng Python dependencies, pag-configure ng environment variables, at pagsisimula ng development server.
+### Python Environment Setup  
 
-### Python Environment Setup
-
-I-setup natin ang iyong Python development environment. Ang virtual environments ay parang compartmentalized approach ng Manhattan Project – bawat proyekto ay may sariling isolated space na may partikular na tools at dependencies, na pumipigil sa conflicts sa pagitan ng iba't ibang proyekto.
+I-set up natin ang iyong Python development environment. Ang virtual environments ay parang compartmentalized approach ng Manhattan Project – bawat proyekto ay may sariling isolated space na may partikular na tools at dependencies, na pumipigil sa mga conflict sa pagitan ng iba't ibang proyekto.  
 
 ```bash
 # Navigate to your backend directory
@@ -730,31 +902,31 @@ source ./venv/bin/activate
 # Install the good stuff
 pip install openai fastapi uvicorn python-dotenv
 ```
+  
+**Ano ang ginawa natin:**  
+- **Gumawa** ng sarili nating Python bubble kung saan maaari tayong mag-install ng mga package nang hindi naaapektuhan ang iba  
+- **In-activate** ito para malaman ng terminal na gamitin ang partikular na environment na ito  
+- **Nag-install** ng mga essentials: OpenAI para sa AI magic, FastAPI para sa ating web API, Uvicorn para sa pagpapatakbo nito, at python-dotenv para sa secure na pamamahala ng mga secrets  
 
-**Ano ang ginawa natin:**
-- **Gumawa** ng sarili nating Python bubble kung saan maaari tayong mag-install ng packages nang hindi naaapektuhan ang iba
-- **In-activate** ito para malaman ng terminal na gamitin ang partikular na environment na ito
-- **Nag-install** ng essentials: OpenAI para sa AI magic, FastAPI para sa web API, Uvicorn para sa pag-run nito, at python-dotenv para sa secure secrets management
-
-**Mga pangunahing dependencies na ipinaliwanag:**
-- **FastAPI**: Modernong, mabilis na web framework na may awtomatikong API documentation
-- **Uvicorn**: Napakabilis na ASGI server na nagpapatakbo ng FastAPI applications
-- **OpenAI**: Opisyal na library para sa GitHub Models at OpenAI API integration
-- **python-dotenv**: Secure na pag-load ng environment variables mula sa .env files
+**Mga pangunahing dependencies na ipinaliwanag:**  
+- **FastAPI**: Modernong, mabilis na web framework na may awtomatikong API documentation  
+- **Uvicorn**: Napakabilis na ASGI server na nagpapatakbo ng FastAPI applications  
+- **OpenAI**: Opisyal na library para sa GitHub Models at OpenAI API integration  
+- **python-dotenv**: Secure na pag-load ng environment variables mula sa .env files  
 
-### Environment Configuration: Panatilihing Ligtas ang Mga Sekreto
+### Configuration ng Environment: Panatilihing Ligtas ang Mga Secrets  
 
-Bago natin simulan ang API, pag-usapan natin ang isa sa pinakamahalagang aral sa web development: paano panatilihing talagang sikreto ang iyong mga sekreto. Ang environment variables ay parang secure vault na ang iyong application lang ang may access.
+Bago natin simulan ang API, pag-usapan natin ang isa sa pinakamahalagang aral sa web development: kung paano panatilihing talagang sikreto ang iyong mga secrets. Ang environment variables ay parang secure vault na ang iyong application lang ang may access.  
 
-#### Ano ang Environment Variables?
+#### Ano ang Environment Variables?  
 
-**Isipin ang environment variables na parang safety deposit box** – inilalagay mo ang mahalagang bagay doon, at ikaw (at ang iyong app) lang ang may susi para makuha ito. Sa halip na isulat ang sensitibong impormasyon nang direkta sa iyong code (kung saan makikita ito ng kahit sino), itinatago mo ito nang ligtas sa environment.
+**Isipin ang environment variables na parang safety deposit box** – inilalagay mo ang iyong mahalagang bagay doon, at ikaw (at ang iyong app) lang ang may susi para makuha ito. Sa halip na isulat ang sensitibong impormasyon nang direkta sa iyong code (kung saan makikita ito ng kahit sino), itinatago mo ito nang ligtas sa environment.  
 
-**Narito ang pagkakaiba:**
-- **Maling paraan**: Isinusulat ang password sa sticky note at inilalagay ito sa monitor
-- **Tamang paraan**: Itinatago ang password sa secure password manager na ikaw lang ang may access
+**Narito ang pagkakaiba:**  
+- **Maling paraan**: Isinusulat ang iyong password sa sticky note at inilalagay ito sa monitor  
+- **Tamang paraan**: Itinatago ang iyong password sa secure na password manager na ikaw lang ang may access  
 
-#### Bakit Mahalaga ang Environment Variables
+#### Bakit Mahalaga ang Environment Variables  
 
 ```python
 # 🚨 NEVER DO THIS - API key visible to everyone
@@ -769,16 +941,16 @@ client = OpenAI(
     base_url="https://models.github.ai/inference"
 )
 ```
+  
+**Ano ang mangyayari kapag hardcoded ang secrets:**  
+1. **Exposure sa version control**: Makikita ng sinuman na may access sa iyong Git repository ang iyong API key  
+2. **Public repositories**: Kapag na-push sa GitHub, makikita ng buong internet ang iyong key  
+3. **Team sharing**: Ang ibang developer na nagtatrabaho sa iyong proyekto ay magkakaroon ng access sa iyong personal na API key  
+4. **Security breaches**: Kapag ninakaw ang iyong API key, magagamit nila ang iyong AI credits  
 
-**Ano ang nangyayari kapag hardcoded ang mga sekreto:**
-1. **Version control exposure**: Makikita ng sinuman na may access sa iyong Git repository ang iyong API key
-2. **Public repositories**: Kung i-push mo sa GitHub, makikita ng buong internet ang iyong key
-3. **Team sharing**: Ang ibang developers na nagtatrabaho sa iyong proyekto ay magkakaroon ng access sa iyong personal API key
-4. **Security breaches**: Kung may magnakaw ng iyong API key, magagamit nila ang iyong AI credits
+#### Pag-set Up ng Iyong Environment File  
 
-#### Pag-setup ng Iyong Environment File
-
-Gumawa ng `.env` file sa iyong backend directory. Ang file na ito ang nagtatago ng iyong mga sekreto nang lokal:
+Gumawa ng `.env` file sa iyong backend directory. Ang file na ito ang nagtatago ng iyong mga secrets nang lokal:  
 
 ```bash
 # .env file - This should NEVER be committed to Git
@@ -786,31 +958,31 @@ GITHUB_TOKEN=your_github_personal_access_token_here
 FASTAPI_DEBUG=True
 ENVIRONMENT=development
 ```
+  
+**Pag-unawa sa .env file:**  
+- **Isang secret kada linya** sa `KEY=value` format  
+- **Walang spaces** sa paligid ng equals sign  
+- **Walang quotes** na kailangan sa paligid ng values (karaniwan)  
+- **Mga komento** ay nagsisimula sa `#`  
 
-**Pag-unawa sa .env file:**
-- **Isang sekreto kada linya** sa `KEY=value` format
-- **Walang spaces** sa paligid ng equals sign
-- **Hindi kailangan ng quotes** sa paligid ng values (karaniwan)
-- **Comments** nagsisimula sa `#`
-
-#### Paglikha ng Iyong GitHub Personal Access Token
+#### Paglikha ng Iyong GitHub Personal Access Token  
 
-Ang iyong GitHub token ay parang espesyal na password na nagbibigay ng pahintulot sa iyong application na gamitin ang GitHub's AI services:
+Ang iyong GitHub token ay parang espesyal na password na nagbibigay ng pahintulot sa iyong application na gamitin ang mga AI service ng GitHub:  
 
-**Step-by-step token creation:**
-1. **Pumunta sa GitHub Settings** → Developer settings → Personal access tokens → Tokens (classic)
-2. **I-click ang "Generate new token (classic)"**
-3. **Itakda ang expiration** (30 araw para sa testing, mas mahaba para sa production)
-4. **Piliin ang scopes**: I-check ang "repo" at iba pang permissions na kailangan mo
-5. **I-generate ang token** at kopyahin ito kaagad (hindi mo na ito makikita ulit!)
-6. **I-paste sa iyong .env file**
+**Step-by-step na paglikha ng token:**  
+1. **Pumunta sa GitHub Settings** → Developer settings → Personal access tokens → Tokens (classic)  
+2. **I-click ang "Generate new token (classic)"**  
+3. **I-set ang expiration** (30 araw para sa testing, mas mahaba para sa production)  
+4. **Piliin ang scopes**: I-check ang "repo" at anumang iba pang permissions na kailangan mo  
+5. **I-generate ang token** at kopyahin ito kaagad (hindi mo na ito makikita ulit!)  
+6. **I-paste sa iyong .env file**  
 
 ```bash
 # Example of what your token looks like (this is fake!)
 GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
 ```
-
-#### Pag-load ng Environment Variables sa Python
+  
+#### Pag-load ng Environment Variables sa Python  
 
 ```python
 import os
@@ -829,16 +1001,16 @@ client = OpenAI(
     base_url="https://models.github.ai/inference"
 )
 ```
+  
+**Ano ang ginagawa ng code na ito:**  
+- **Naglo-load** ng iyong .env file at ginagawang available ang variables sa Python  
+- **Sine-check** kung umiiral ang kinakailangang token (magandang pag-handle ng error!)  
+- **Nag-raise** ng malinaw na error kung nawawala ang token  
+- **Gumagamit** ng token nang ligtas nang hindi ito inilalantad sa code  
 
-**Ano ang ginagawa ng code na ito:**
-- **Naglo-load** ng iyong .env file at ginagawang available ang variables sa Python
-- **Sine-check** kung umiiral ang kinakailangang token (magandang error handling!)
-- **Nag-raise** ng malinaw na error kung nawawala ang token
-- **Ginagamit** ang token nang ligtas nang hindi ito inilalantad sa code
+#### Seguridad ng Git: Ang .gitignore File  
 
-#### Git Security: Ang .gitignore File
-
-Ang iyong `.gitignore` file ang nagsasabi sa Git kung aling mga file ang hindi kailanman dapat i-track o i-upload:
+Ang iyong `.gitignore` file ang nagsasabi sa Git kung aling mga file ang hindi kailanman dapat i-track o i-upload:  
 
 ```bash
 # .gitignore - Add these lines
@@ -850,12 +1022,12 @@ __pycache__/
 venv/
 .vscode/
 ```
+  
+**Bakit ito mahalaga**: Kapag idinagdag mo ang `.env` sa `.gitignore`, i-ignore ng Git ang iyong environment file, pinipigilan kang aksidenteng ma-upload ang iyong secrets sa GitHub.  
 
-**Bakit ito mahalaga**: Kapag idinagdag mo ang `.env` sa `.gitignore`, i-ignore ito ng Git, na pumipigil sa iyo na aksidenteng ma-upload ang iyong mga sekreto sa GitHub.
-
-#### Iba't Ibang Environments, Iba't Ibang Sekreto
+#### Iba't ibang Environment, Iba't ibang Secrets  
 
-Ang mga propesyonal na application ay gumagamit ng iba't ibang API keys para sa iba't ibang environments:
+Ang mga propesyonal na application ay gumagamit ng iba't ibang API keys para sa iba't ibang environment:  
 
 ```bash
 # .env.development
@@ -866,14 +1038,13 @@ DEBUG=True
 GITHUB_TOKEN=your_production_token
 DEBUG=False
 ```
+  
+**Bakit ito mahalaga**: Ayaw mong maapektuhan ng iyong development experiments ang iyong production AI usage quota, at gusto mo ng iba't ibang antas ng seguridad para sa iba't ibang environment.  
 
-**Bakit ito mahalaga**: Ayaw mong maapektuhan ng iyong development experiments ang iyong production AI usage quota, at gusto mo ng iba't ibang security levels para sa iba't ibang environments.
-
-### Pagsisimula ng Iyong Development Server: Pagpapagana ng Iyong FastAPI
+### Pagsisimula ng Iyong Development Server: Pagbibigay-buhay sa Iyong FastAPI  
+Ngayon ay dumating na ang kapanapanabik na sandali – simulan ang iyong FastAPI development server at makita ang iyong AI integration na gumagana! Ang FastAPI ay gumagamit ng Uvicorn, isang napakabilis na ASGI server na partikular na idinisenyo para sa async Python applications.
 
-Ngayon na ang exciting na bahagi – simulan ang iyong FastAPI development server at makita ang iyong AI integration na gumagana! Ang FastAPI ay gumagamit ng Uvicorn, isang napakabilis na ASGI server na partikular na dinisenyo para sa async Python applications.
-
-#### Pag-unawa sa FastAPI Server Startup Process
+#### Pag-unawa sa Proseso ng Startup ng FastAPI Server
 
 ```bash
 # Method 1: Direct Python execution (includes auto-reload)
@@ -886,22 +1057,22 @@ uvicorn api:app --host 0.0.0.0 --port 5000 --reload
 Kapag pinatakbo mo ang command na ito, narito ang nangyayari sa likod ng eksena:
 
 **1. I-load ng Python ang iyong FastAPI application**:
-- Ini-import ang lahat ng kinakailangang libraries (FastAPI, Pydantic, OpenAI, atbp.)
-- I-load ang environment variables mula sa iyong `.env` file
-- Gumagawa ng FastAPI application instance na may awtomatikong documentation
+- Ini-import ang lahat ng kinakailangang library (FastAPI, Pydantic, OpenAI, atbp.)
+- I-load ang mga environment variable mula sa iyong `.env` file
+- Gumagawa ng FastAPI application instance na may awtomatikong dokumentasyon
 
 **2. I-configure ng Uvicorn ang ASGI server**:
-- Nagbi-bind sa port 5000 na may async request handling capabilities
+- Kumokonekta sa port 5000 na may kakayahan sa async request handling
 - Nagse-set up ng request routing na may awtomatikong validation
-- Nag-enable ng hot reload para sa development (nagre-restart kapag may file changes)
+- Pinapagana ang hot reload para sa development (nagre-restart kapag may pagbabago sa file)
 - Gumagawa ng interactive API documentation
 
-**3. Nagsisimulang makinig ang server**:
+**3. Nagsisimula ang server sa pakikinig**:
 - Makikita mo sa terminal: `INFO: Uvicorn running on http://0.0.0.0:5000`
-- Kayang mag-handle ng maraming sabay-sabay na AI requests ang server
-- Handa na ang iyong API na may awtomatikong docs sa `http://localhost:5000/docs`
+- Kaya ng server na mag-handle ng maraming sabay-sabay na AI requests
+- Handa na ang iyong API na may awtomatikong dokumentasyon sa `http://localhost:5000/docs`
 
-#### Ano ang Dapat Mong Makita Kapag Gumagana ang Lahat
+#### Ano ang Dapat Mong Makita Kapag Lahat ay Gumagana
 
 ```bash
 $ python api.py
@@ -913,10 +1084,10 @@ INFO:     Waiting for application startup.
 INFO:     Application startup complete.
 ```
 
-**Pag-unawa sa FastAPI output:**
-- **Magmo-monitor ng changes**: Auto-reload enabled para sa development
+**Pag-unawa sa output ng FastAPI**:
+- **Magbabantay para sa mga pagbabago**: Naka-enable ang auto-reload para sa development
 - **Uvicorn running**: Aktibo ang high-performance ASGI server
-- **Nagsimula ang reloader process**: File watcher para sa awtomatikong restarts
+- **Nagsimula ang reloader process**: File watcher para sa awtomatikong restart
 - **Application startup complete**: Matagumpay na na-initialize ang FastAPI app
 - **Interactive docs available**: Bisitahin ang `/docs` para sa awtomatikong API documentation
 
@@ -926,14 +1097,14 @@ Nagbibigay ang FastAPI ng ilang maginhawang paraan para subukan ang iyong API, k
 
 **Paraan 1: Interactive API Documentation (Inirerekomenda)**
 1. Buksan ang iyong browser at pumunta sa `http://localhost:5000/docs`
-2. Makikita mo ang Swagger UI na may lahat ng iyong endpoints na documented
+2. Makikita mo ang Swagger UI na may dokumentasyon ng lahat ng iyong endpoints
 3. I-click ang `/hello` → "Try it out" → Maglagay ng test message → "Execute"
 4. Makikita ang response direkta sa browser na may tamang formatting
 
 **Paraan 2: Basic Browser Test**
 1. Pumunta sa `http://localhost:5000` para sa root endpoint
 2. Pumunta sa `http://localhost:5000/health` para i-check ang server health
-3. Kinukumpirma nito na tumatakbo nang maayos ang iyong FastAPI server
+3. Kinukumpirma nito na gumagana nang maayos ang iyong FastAPI server
 
 **Paraan 3: Command Line Test (Advanced)**
 ```bash
@@ -947,42 +1118,97 @@ curl -X POST http://localhost:5000/hello \
 ```
 
 **Paraan 4: Python Test Script**
-#### Pag-aayos ng Karaniwang Problema sa Startup
+```python
+# test_api.py - Create this file to test your API
+import requests
+import json
+
+# Test the API endpoint
+url = "http://localhost:5000/hello"
+data = {"message": "Tell me a joke about programming"}
+
+response = requests.post(url, json=data)
+if response.status_code == 200:
+    result = response.json()
+    print("AI Response:", result['response'])
+else:
+    print("Error:", response.status_code, response.text)
+```
 
-| Mensahe ng Error | Ano ang Kahulugan | Paano Ayusin |
-|-------------------|-------------------|-------------|
+#### Pag-aayos ng Karaniwang Startup Issues
+
+| Error Message | Ano ang Kahulugan | Paano Ayusin |
+|---------------|-------------------|--------------|
 | `ModuleNotFoundError: No module named 'fastapi'` | Hindi naka-install ang FastAPI | Patakbuhin ang `pip install fastapi uvicorn` sa iyong virtual environment |
 | `ModuleNotFoundError: No module named 'uvicorn'` | Hindi naka-install ang ASGI server | Patakbuhin ang `pip install uvicorn` sa iyong virtual environment |
-| `KeyError: 'GITHUB_TOKEN'` | Hindi natagpuan ang environment variable | Suriin ang iyong `.env` file at ang tawag sa `load_dotenv()` |
-| `Address already in use` | Abala ang Port 5000 | Patayin ang ibang proseso na gumagamit ng port 5000 o palitan ang port |
-| `ValidationError` | Hindi tugma ang request data sa Pydantic model | Suriin kung ang format ng iyong request ay tumutugma sa inaasahang schema |
-| `HTTPException 422` | Hindi maiproseso ang entity | Nabigo ang request validation, suriin ang `/docs` para sa tamang format |
-| `OpenAI API error` | Nabigo ang authentication ng AI service | Siguraduhing tama ang iyong GitHub token at may tamang mga pahintulot |
+| `KeyError: 'GITHUB_TOKEN'` | Hindi natagpuan ang environment variable | I-check ang iyong `.env` file at `load_dotenv()` call |
+| `Address already in use` | Abala ang port 5000 | Patayin ang ibang proseso na gumagamit ng port 5000 o palitan ang port |
+| `ValidationError` | Hindi tugma ang request data sa Pydantic model | I-check ang format ng iyong request na tumutugma sa inaasahang schema |
+| `HTTPException 422` | Hindi maiproseso ang entity | Nabigo ang request validation, i-check ang `/docs` para sa tamang format |
+| `OpenAI API error` | Nabigo ang authentication ng AI service | Siguraduhin na tama ang iyong GitHub token at may tamang permissions |
 
-#### Mga Pinakamahusay na Praktika sa Pag-develop
+#### Mga Best Practices sa Development
 
-**Hot Reloading**: Ang FastAPI kasama ang Uvicorn ay nagbibigay ng awtomatikong pag-reload kapag nag-save ka ng mga pagbabago sa iyong Python files. Nangangahulugan ito na maaari mong baguhin ang iyong code at agad na subukan nang hindi mano-manong nire-restart.
+**Hot Reloading**: Ang FastAPI na may Uvicorn ay nagbibigay ng awtomatikong pag-reload kapag nag-save ka ng mga pagbabago sa iyong Python files. Nangangahulugan ito na maaari mong baguhin ang iyong code at subukan agad nang hindi mano-manong nire-restart.
 
-**Pag-log para sa Pag-develop**: Magdagdag ng logging upang maunawaan ang nangyayari:
+```python
+# Enable hot reloading explicitly
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True enables hot reload
+```
+
+**Logging para sa Development**: Magdagdag ng logging para maunawaan kung ano ang nangyayari:
+
+```python
+import logging
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+@app.route("/hello", methods=["POST"])
+def hello():
+    data = request.get_json()
+    message = data.get("message", "")
+    
+    logger.info(f"Received message: {message}")
+    
+    if not message:
+        logger.warning("Empty message received")
+        return jsonify({"error": "Message field is required"}), 400
+    
+    try:
+        response = call_llm(message, "You are a helpful and friendly assistant.")
+        logger.info(f"AI response generated successfully")
+        return jsonify({"response": response})
+    except Exception as e:
+        logger.error(f"AI API error: {str(e)}")
+        return jsonify({"error": "AI service temporarily unavailable"}), 500
+```
 
-**Bakit nakakatulong ang logging**: Sa panahon ng pag-develop, makikita mo nang eksakto kung anong mga request ang pumapasok, kung ano ang tugon ng AI, at kung saan nagkakaroon ng mga error. Mas mabilis ang debugging dahil dito.
+**Bakit nakakatulong ang logging**: Sa panahon ng development, makikita mo kung anong mga request ang pumapasok, kung ano ang sagot ng AI, at kung saan nagkakaroon ng errors. Pinapabilis nito ang debugging.
 
-### Pag-configure para sa GitHub Codespaces: Madaling Pag-develop sa Cloud
+### Pag-configure para sa GitHub Codespaces: Madaling Cloud Development
 
-Ang GitHub Codespaces ay parang pagkakaroon ng makapangyarihang development computer sa cloud na maaari mong ma-access mula sa anumang browser. Kung nagtatrabaho ka sa Codespaces, may ilang karagdagang hakbang upang gawing accessible ang iyong backend sa iyong frontend.
+Ang GitHub Codespaces ay parang pagkakaroon ng makapangyarihang development computer sa cloud na ma-access mo mula sa anumang browser. Kung nagtatrabaho ka sa Codespaces, may ilang karagdagang hakbang para gawing accessible ang iyong backend sa iyong frontend.
 
-#### Pag-unawa sa Networking ng Codespaces
+#### Pag-unawa sa Codespaces Networking
 
 Sa lokal na development environment, lahat ay tumatakbo sa parehong computer:
 - Backend: `http://localhost:5000`
 - Frontend: `http://localhost:3000` (o file://)
 
-Sa Codespaces, ang iyong development environment ay tumatakbo sa mga server ng GitHub, kaya ang "localhost" ay may ibang kahulugan. Awtomatikong lumilikha ang GitHub ng mga pampublikong URL para sa iyong mga serbisyo, ngunit kailangan mong i-configure ang mga ito nang maayos.
+Sa Codespaces, ang iyong development environment ay tumatakbo sa mga server ng GitHub, kaya ang "localhost" ay may ibang kahulugan. Awtomatikong gumagawa ang GitHub ng mga pampublikong URL para sa iyong mga serbisyo, ngunit kailangan mo itong i-configure nang maayos.
 
-#### Hakbang-hakbang na Configuration ng Codespaces
+#### Step-by-Step Codespaces Configuration
 
 **1. Simulan ang iyong backend server**:
-Makikita mo ang pamilyar na FastAPI/Uvicorn startup message, ngunit mapapansin mong ito ay tumatakbo sa loob ng Codespace environment.
+```bash
+cd backend
+python api.py
+```
+
+Makikita mo ang pamilyar na FastAPI/Uvicorn startup message, ngunit mapapansin mong tumatakbo ito sa loob ng Codespace environment.
 
 **2. I-configure ang visibility ng port**:
 - Hanapin ang "Ports" tab sa ibabang panel ng VS Code
@@ -990,197 +1216,511 @@ Makikita mo ang pamilyar na FastAPI/Uvicorn startup message, ngunit mapapansin m
 - I-right-click ang port 5000
 - Piliin ang "Port Visibility" → "Public"
 
-**Bakit gawing pampubliko?** Sa default, ang mga port ng Codespace ay pribado (accessible lamang sa iyo). Ang paggawa nito bilang pampubliko ay magpapahintulot sa iyong frontend (na tumatakbo sa browser) na makipag-ugnayan sa iyong backend.
+**Bakit gawing pampubliko?** Sa default, ang mga Codespace port ay pribado (accessible lamang sa iyo). Ang paggawa nito na pampubliko ay nagpapahintulot sa iyong frontend (na tumatakbo sa browser) na makipag-ugnayan sa iyong backend.
 
 **3. Kunin ang iyong pampublikong URL**:
 Pagkatapos gawing pampubliko ang port, makakakita ka ng URL tulad ng:
-**4. I-update ang configuration ng iyong frontend**:
+```
+https://your-codespace-name-5000.app.github.dev
+```
 
-#### Pag-unawa sa mga URL ng Codespace
+**4. I-update ang iyong frontend configuration**:
+```javascript
+// In your frontend app.js, update the BASE_URL:
+this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
+```
+
+#### Pag-unawa sa Codespace URLs
+
+Ang Codespace URLs ay sumusunod sa predictable na pattern:
+```
+https://[codespace-name]-[port].app.github.dev
+```
 
-Ang mga URL ng Codespace ay sumusunod sa isang predictable na pattern:
-**Pag-unawa sa istruktura**:
+**Pag-unawa dito**:
 - `codespace-name`: Isang natatanging identifier para sa iyong Codespace (karaniwang kasama ang iyong username)
 - `port`: Ang numero ng port kung saan tumatakbo ang iyong serbisyo (5000 para sa aming FastAPI app)
-- `app.github.dev`: Domain ng GitHub para sa mga application ng Codespace
+- `app.github.dev`: Domain ng GitHub para sa Codespace applications
 
-#### Pagsubok sa Iyong Setup ng Codespace
+#### Pagsubok sa Iyong Codespace Setup
+
+**1. Subukan ang backend direkta**:
+Buksan ang iyong pampublikong URL sa bagong browser tab. Dapat mong makita:
+```
+Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
+```
 
-**1. Subukan ang backend nang direkta**:
-Buksan ang iyong pampublikong URL sa isang bagong tab ng browser. Makikita mo:
 **2. Subukan gamit ang browser developer tools**:
+```javascript
+// Open browser console and test your API
+fetch('https://your-codespace-name-5000.app.github.dev/hello', {
+  method: 'POST',
+  headers: {'Content-Type': 'application/json'},
+  body: JSON.stringify({message: 'Hello from Codespaces!'})
+})
+.then(response => response.json())
+.then(data => console.log(data));
+```
 
-#### Codespaces vs Lokal na Pag-develop
+#### Codespaces vs Lokal na Development
 
-| Aspeto | Lokal na Pag-develop | GitHub Codespaces |
+| Aspeto | Lokal na Development | GitHub Codespaces |
 |--------|-----------------------|-------------------|
-| **Oras ng Setup** | Mas matagal (install Python, dependencies) | Agad (pre-configured environment) |
+| **Setup Time** | Mas matagal (install Python, dependencies) | Instant (pre-configured environment) |
 | **URL Access** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
-| **Configuration ng Port** | Awtomatiko | Manu-mano (gawing pampubliko ang mga port) |
+| **Port Configuration** | Automatic | Manual (gawing pampubliko ang ports) |
 | **File Persistence** | Lokal na makina | GitHub repository |
-| **Collaborative** | Mahirap ibahagi ang environment | Madaling ibahagi ang link ng Codespace |
+| **Collaboration** | Mahirap i-share ang environment | Madaling i-share ang Codespace link |
 | **Internet Dependency** | Para lamang sa AI API calls | Kinakailangan para sa lahat |
 
-#### Mga Tip sa Pag-develop gamit ang Codespaces
+#### Mga Tips sa Codespace Development
 
 **Environment Variables sa Codespaces**:
-Ang iyong `.env` file ay gumagana nang pareho sa Codespaces, ngunit maaari ka ring mag-set ng environment variables nang direkta sa Codespace.
+Ang iyong `.env` file ay gumagana nang pareho sa Codespaces, ngunit maaari ka ring mag-set ng environment variables direkta sa Codespace:
 
-**Pamamahala ng Port**:
-- Awtomatikong nadedetect ng Codespaces kapag ang iyong application ay nagsimulang makinig sa isang port
-- Maaari kang mag-forward ng maraming port nang sabay-sabay (kapaki-pakinabang kung magdadagdag ka ng database sa hinaharap)
-- Ang mga port ay nananatiling accessible hangga't tumatakbo ang iyong Codespace
+```bash
+# Set environment variable for the current session
+export GITHUB_TOKEN="your_token_here"
 
-**Workflow ng Pag-develop**:
+# Or add to your .bashrc for persistence
+echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
+```
+
+**Port Management**:
+- Awtomatikong nadedetect ng Codespaces kapag nagsimula ang iyong application sa pakikinig sa isang port
+- Maaari kang mag-forward ng maraming ports nang sabay-sabay (kapaki-pakinabang kung magdadagdag ka ng database sa hinaharap)
+- Ang mga ports ay nananatiling accessible hangga't tumatakbo ang iyong Codespace
+
+**Development Workflow**:
 1. Gumawa ng mga pagbabago sa code sa VS Code
 2. Awtomatikong nagre-reload ang FastAPI (salamat sa reload mode ng Uvicorn)
-3. Agad na subukan ang mga pagbabago sa pamamagitan ng pampublikong URL
+3. Subukan agad ang mga pagbabago sa pamamagitan ng pampublikong URL
 4. I-commit at i-push kapag handa na
 
-> 💡 **Pro Tip**: I-bookmark ang iyong Codespace backend URL sa panahon ng pag-develop. Dahil ang mga pangalan ng Codespace ay stable, hindi magbabago ang URL hangga't ginagamit mo ang parehong Codespace.
+> 💡 **Pro Tip**: I-bookmark ang iyong Codespace backend URL sa panahon ng development. Dahil stable ang Codespace names, hindi magbabago ang URL hangga't ginagamit mo ang parehong Codespace.
 
 ## Paglikha ng Frontend Chat Interface: Kung Saan Nagkikita ang Tao at AI
 
-Ngayon ay gagawa tayo ng user interface – ang bahagi na tumutukoy kung paano nakikipag-ugnayan ang mga tao sa iyong AI assistant. Tulad ng disenyo ng orihinal na interface ng iPhone, magpo-focus tayo sa paggawa ng kumplikadong teknolohiya na intuitive at natural gamitin.
+Ngayon ay gagawin natin ang user interface – ang bahagi na tumutukoy kung paano nakikipag-ugnayan ang mga tao sa iyong AI assistant. Tulad ng disenyo ng orihinal na interface ng iPhone, magpo-focus tayo sa paggawa ng kumplikadong teknolohiya na intuitive at natural gamitin.
+
+### Pag-unawa sa Modern Frontend Architecture
 
-### Pag-unawa sa Modernong Arkitektura ng Frontend
+Ang ating chat interface ay magiging tinatawag na "Single Page Application" o SPA. Sa halip na lumang paraan kung saan bawat click ay naglo-load ng bagong page, ang ating app ay nag-a-update nang maayos at instant:
 
-Ang ating chat interface ay magiging tinatawag na "Single Page Application" o SPA. Sa halip na ang lumang paraan kung saan bawat click ay naglo-load ng bagong pahina, ang ating app ay nag-a-update nang maayos at instant:
+**Lumang websites**: Parang nagbabasa ng pisikal na libro – nagbabago ka ng buong pahina
+**Ang ating chat app**: Parang gumagamit ng iyong telepono – lahat ay dumadaloy at nag-a-update nang maayos
 
-**Lumang websites**: Parang nagbabasa ng pisikal na libro – nag-flip ka sa ganap na bagong mga pahina
-**Ang ating chat app**: Parang gumagamit ng iyong telepono – lahat ay dumadaloy at nag-a-update nang seamless
+```mermaid
+graph TD
+    A[User Types Message] --> B[JavaScript Captures Input]
+    B --> C[Validate & Format Data]
+    C --> D[Send to Backend API]
+    D --> E[Display Loading State]
+    E --> F[Receive AI Response]
+    F --> G[Update Chat Interface]
+    G --> H[Ready for Next Message]
+```
+
+```mermaid
+classDiagram
+    class ChatApp {
+        +messages: HTMLElement
+        +form: HTMLElement
+        +input: HTMLElement
+        +sendButton: HTMLElement
+        +BASE_URL: string
+        +API_ENDPOINT: string
+        
+        +constructor()
+        +initializeEventListeners()
+        +handleSubmit(event)
+        +callAPI(message)
+        +appendMessage(text, role)
+        +escapeHtml(text)
+        +scrollToBottom()
+        +setLoading(isLoading)
+    }
+    
+    ChatApp --> DOM : manipulates
+    ChatApp --> FastAPI : sends requests
+```
 
 ### Ang Tatlong Haligi ng Frontend Development
 
 Ang bawat frontend application – mula sa simpleng websites hanggang sa mga kumplikadong apps tulad ng Discord o Slack – ay binubuo ng tatlong pangunahing teknolohiya. Isipin ang mga ito bilang pundasyon ng lahat ng nakikita at nakikipag-ugnayan sa web:
 
-**HTML (Istruktura)**: Ito ang iyong pundasyon
+**HTML (Structure)**: Ito ang iyong pundasyon
 - Nagpapasya kung anong mga elemento ang umiiral (mga button, text areas, containers)
 - Nagbibigay ng kahulugan sa content (ito ay header, ito ay form, atbp.)
-- Lumilikha ng pangunahing istruktura na binubuo ng lahat ng iba pa
+- Gumagawa ng pangunahing istruktura na binubuo ng lahat ng iba pa
 
-**CSS (Presentasyon)**: Ito ang iyong interior designer
+**CSS (Presentation)**: Ito ang iyong interior designer
 - Ginagawang maganda ang lahat (kulay, font, layout)
-- Nag-a-adjust sa iba't ibang screen sizes (telepono vs laptop vs tablet)
-- Lumilikha ng smooth animations at visual feedback
+- Nagha-handle ng iba't ibang screen sizes (telepono vs laptop vs tablet)
+- Gumagawa ng smooth animations at visual feedback
 
-**JavaScript (Pag-uugali)**: Ito ang iyong utak
+**JavaScript (Behavior)**: Ito ang iyong utak
 - Tumutugon sa ginagawa ng mga user (clicks, typing, scrolling)
-- Nakikipag-usap sa iyong backend at nag-a-update ng pahina
+- Nakikipag-usap sa iyong backend at nag-a-update ng page
 - Ginagawang interactive at dynamic ang lahat
 
-**Isipin ito tulad ng architectural design:**
+**Isipin ito tulad ng architectural design**:
 - **HTML**: Ang structural blueprint (nagde-define ng spaces at relationships)
 - **CSS**: Ang aesthetic at environmental design (visual style at user experience)
 - **JavaScript**: Ang mechanical systems (functionality at interactivity)
 
-### Bakit Mahalaga ang Modernong Arkitektura ng JavaScript
+### Bakit Mahalaga ang Modern JavaScript Architecture
 
-Ang ating chat application ay gagamit ng modernong JavaScript patterns na makikita mo sa mga propesyonal na application. Ang pag-unawa sa mga konseptong ito ay makakatulong sa iyo habang lumalago ka bilang developer:
+Ang ating chat application ay gagamit ng modernong JavaScript patterns na makikita mo sa mga propesyonal na applications. Ang pag-unawa sa mga konseptong ito ay makakatulong sa iyo habang lumalago ka bilang developer:
 
-**Class-Based Architecture**: I-oorganisa natin ang ating code sa mga klase, na parang gumagawa ng blueprint para sa mga object
-**Async/Await**: Modernong paraan ng pag-handle ng mga operasyon na tumatagal ng oras (tulad ng API calls)
-**Event-Driven Programming**: Ang ating app ay tumutugon sa mga aksyon ng user (clicks, key presses) sa halip na tumakbo sa loop
-**DOM Manipulation**: Dinamikong pag-update ng content ng webpage base sa mga interaksyon ng user at mga tugon ng API
+**Class-Based Architecture**: I-oorganize natin ang ating code sa mga klase, na parang gumagawa ng blueprints para sa mga object
+**Async/Await**: Modernong paraan para mag-handle ng mga operasyon na tumatagal (tulad ng API calls)
+**Event-Driven Programming**: Ang ating app ay tumutugon sa mga aksyon ng user (clicks, key presses) sa halip na tumatakbo sa loop
+**DOM Manipulation**: Dinamikong ina-update ang webpage content batay sa user interactions at API responses
 
-### Setup ng Istruktura ng Proyekto
+### Project Structure Setup
 
-Gumawa ng frontend directory na may ganitong organisadong istruktura:
+Gumawa ng frontend directory na may ganitong organized structure:
 
-**Pag-unawa sa arkitektura:**
-- **Pinaghihiwalay** ang mga concern sa pagitan ng istruktura (HTML), pag-uugali (JavaScript), at presentasyon (CSS)
+```text
+frontend/
+├── index.html      # Main HTML structure
+├── app.js          # JavaScript functionality
+└── styles.css      # Visual styling
+```
+
+**Pag-unawa sa architecture**:
+- **Pinaghihiwalay** ang mga concern sa pagitan ng structure (HTML), behavior (JavaScript), at presentation (CSS)
 - **Pinapanatili** ang simpleng file structure na madaling i-navigate at i-modify
-- **Sumusunod** sa mga pinakamahusay na praktika sa web development para sa organisasyon at maintainability
+- **Sumusunod** sa web development best practices para sa organization at maintainability
 
 ### Paggawa ng HTML Foundation: Semantic Structure para sa Accessibility
 
-Simulan natin sa HTML structure. Ang modernong web development ay nagbibigay-diin sa "semantic HTML" – paggamit ng mga HTML element na malinaw na naglalarawan ng kanilang layunin, hindi lamang ang kanilang hitsura. Ginagawa nitong accessible ang iyong application sa screen readers, search engines, at iba pang tools.
+Magsimula tayo sa HTML structure. Ang modernong web development ay nagbibigay-diin sa "semantic HTML" – paggamit ng HTML elements na malinaw na naglalarawan ng kanilang layunin, hindi lang ang kanilang hitsura. Ginagawa nitong accessible ang iyong application sa screen readers, search engines, at iba pang tools.
 
-**Bakit mahalaga ang semantic HTML**: Isipin ang pag-describe ng iyong chat app sa isang tao sa telepono. Sasabihin mo "may header na may title, isang pangunahing lugar kung saan lumalabas ang mga conversation, at isang form sa ibaba para sa pag-type ng mga mensahe." Ang semantic HTML ay gumagamit ng mga element na tumutugma sa natural na deskripsyon na ito.
+**Bakit mahalaga ang semantic HTML**: Isipin ang pag-describe ng iyong chat app sa isang tao sa telepono. Sasabihin mo "may header na may title, isang main area kung saan lumalabas ang mga conversation, at isang form sa ibaba para mag-type ng mga mensahe." Ang semantic HTML ay gumagamit ng mga elemento na tumutugma sa natural na deskripsyon na ito.
 
 Gumawa ng `index.html` na may ganitong maingat na structured markup:
 
-**Pag-unawa sa bawat HTML element at ang layunin nito:**
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chat Assistant</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="chat-container">
+        <header class="chat-header">
+            <h1>AI Chat Assistant</h1>
+            <p>Ask me anything!</p>
+        </header>
+        
+        <main class="chat-messages" id="messages" role="log" aria-live="polite">
+            <!-- Messages will be dynamically added here -->
+        </main>
+        
+        <form class="chat-form" id="chatForm">
+            <div class="input-group">
+                <input 
+                    type="text" 
+                    id="messageInput" 
+                    placeholder="Type your message here..." 
+                    required
+                    aria-label="Chat message input"
+                >
+                <button type="submit" id="sendBtn" aria-label="Send message">
+                    Send
+                </button>
+            </div>
+        </form>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
+```
+
+**Pag-unawa sa bawat HTML element at ang layunin nito**:
 
-#### Istruktura ng Dokumento
+#### Document Structure
 - **`<!DOCTYPE html>`**: Sinasabi sa browser na ito ay modernong HTML5
-- **`<html lang="en">`**: Nagsasaad ng wika ng pahina para sa screen readers at translation tools
+- **`<html lang="en">`**: Nagsasaad ng wika ng page para sa screen readers at translation tools
 - **`<meta charset="UTF-8">`**: Tinitiyak ang tamang character encoding para sa international text
-- **`<meta name="viewport"...>`**: Ginagawang mobile-responsive ang pahina sa pamamagitan ng pag-control sa zoom at scale
+- **`<meta name="viewport"...>`**: Ginagawang mobile-responsive ang page sa pamamagitan ng pag-control sa zoom at scale
 
 #### Semantic Elements
 - **`<header>`**: Malinaw na tinutukoy ang top section na may title at description
-- **`<main>`**: Itinalaga ang pangunahing content area (kung saan nagaganap ang mga conversation)
+- **`<main>`**: Itinalaga ang pangunahing content area (kung saan lumalabas ang mga conversation)
 - **`<form>`**: Semantically tama para sa user input, nagbibigay-daan sa tamang keyboard navigation
 
-#### Mga Feature ng Accessibility
+#### Accessibility Features
 - **`role="log"`**: Sinasabi sa screen readers na ang area na ito ay naglalaman ng chronological log ng mga mensahe
-- **`aria-live="polite"`**: Ina-announce ang mga bagong mensahe sa screen readers nang hindi ini-interrupt
-- **`aria-label`**: Nagbibigay ng descriptive labels para sa mga form controls
-- **`required`**: Ang browser ay nagva-validate na ang mga user ay maglalagay ng mensahe bago mag-send
+- **`aria-live="polite"`**: Ina-announce ang mga bagong mensahe sa screen readers nang hindi nakakaabala
+- **`aria-label`**: Nagbibigay ng descriptive labels para sa form controls
+- **`required`**: Ang browser ay nagva-validate na maglagay ang user ng mensahe bago mag-send
 
 #### CSS at JavaScript Integration
 - **`class` attributes**: Nagbibigay ng styling hooks para sa CSS (hal., `chat-container`, `input-group`)
 - **`id` attributes**: Pinapayagan ang JavaScript na hanapin at manipulahin ang mga partikular na elemento
-- **Script placement**: Ang JavaScript file ay na-load sa dulo para ma-load muna ang HTML
+- **Script placement**: Ang JavaScript file ay naka-load sa dulo para ma-load muna ang HTML
 
-**Bakit gumagana ang istrukturang ito:**
+**Bakit gumagana ang structure na ito**:
 - **Logical flow**: Header → Main content → Input form ay tumutugma sa natural na reading order
-- **Keyboard accessible**: Ang mga user ay maaaring mag-tab sa lahat ng interactive elements
+- **Keyboard accessible**: Maaaring mag-tab ang mga user sa lahat ng interactive elements
 - **Screen reader friendly**: Malinaw na landmarks at deskripsyon para sa visually impaired users
 - **Mobile responsive**: Ang viewport meta tag ay nagbibigay-daan sa responsive design
-- **Progressive enhancement**: Gumagana kahit na ang CSS o JavaScript ay nabigo mag-load
+- **Progressive enhancement**: Gumagana kahit na hindi mag-load ang CSS o JavaScript
 
-### Pagdaragdag ng Interactive JavaScript: Modernong Logic ng Web Application
-
-Ngayon ay gagawin natin ang JavaScript na magbibigay-buhay sa ating chat interface. Gagamit tayo ng modernong JavaScript patterns na makikita sa propesyonal na web development, kabilang ang ES6 classes, async/await, at event-driven programming.
+### Pagdaragdag ng Interactive JavaScript: Modern Web Application Logic
+Ngayon, gagawa tayo ng JavaScript na magbibigay-buhay sa ating chat interface. Gagamit tayo ng mga modernong pattern sa JavaScript na karaniwang ginagamit sa propesyonal na web development, kabilang ang ES6 classes, async/await, at event-driven programming.
 
 #### Pag-unawa sa Modernong Arkitektura ng JavaScript
 
-Sa halip na magsulat ng procedural code (isang serye ng mga function na tumatakbo nang sunod-sunod), gagawa tayo ng **class-based architecture**. Isipin ang isang class bilang blueprint para sa paggawa ng mga object – tulad ng kung paano ang blueprint ng arkitekto ay maaaring gamitin upang magtayo ng maraming bahay.
+Sa halip na magsulat ng procedural code (isang serye ng mga function na tumatakbo nang sunod-sunod), gagawa tayo ng **class-based architecture**. Isipin ang isang class bilang blueprint para sa paggawa ng mga object – tulad ng blueprint ng isang arkitekto na maaaring gamitin upang magtayo ng maraming bahay.
+
+**Bakit gumagamit ng classes para sa mga web application?**
+- **Organisasyon**: Ang lahat ng kaugnay na functionality ay pinagsama-sama
+- **Reusability**: Maaari kang lumikha ng maraming chat instances sa parehong pahina
+- **Maintainability**: Mas madaling i-debug at baguhin ang mga partikular na feature
+- **Pamantayan sa Propesyonal**: Ang pattern na ito ay ginagamit sa mga framework tulad ng React, Vue, at Angular
+
+Gumawa ng `app.js` gamit ang modernong, maayos na JavaScript:
 
-**Bakit gumamit ng mga klase para sa mga web application?**
-- **Organisasyon**: Ang lahat ng kaugnay na functionality ay naka-group
-- **Reusability**: Maaari kang gumawa ng maraming chat instances sa parehong pahina
-- **Maintainability**: Mas madaling i-debug at i-modify ang mga partikular na feature
-- **Propesyonal na standard**: Ang pattern na ito ay ginagamit sa mga framework tulad ng React, Vue, at Angular
+```javascript
+// app.js - Modern chat application logic
+
+class ChatApp {
+    constructor() {
+        // Get references to DOM elements we'll need to manipulate
+        this.messages = document.getElementById("messages");
+        this.form = document.getElementById("chatForm");
+        this.input = document.getElementById("messageInput");
+        this.sendButton = document.getElementById("sendBtn");
+        
+        // Configure your backend URL here
+        this.BASE_URL = "http://localhost:5000"; // Update this for your environment
+        this.API_ENDPOINT = `${this.BASE_URL}/hello`;
+        
+        // Set up event listeners when the chat app is created
+        this.initializeEventListeners();
+    }
+    
+    initializeEventListeners() {
+        // Listen for form submission (when user clicks Send or presses Enter)
+        this.form.addEventListener("submit", (e) => this.handleSubmit(e));
+        
+        // Also listen for Enter key in the input field (better UX)
+        this.input.addEventListener("keypress", (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSubmit(e);
+            }
+        });
+    }
+    
+    async handleSubmit(event) {
+        event.preventDefault(); // Prevent form from refreshing the page
+        
+        const messageText = this.input.value.trim();
+        if (!messageText) return; // Don't send empty messages
+        
+        // Provide user feedback that something is happening
+        this.setLoading(true);
+        
+        // Add user message to chat immediately (optimistic UI)
+        this.appendMessage(messageText, "user");
+        
+        // Clear input field so user can type next message
+        this.input.value = '';
+        
+        try {
+            // Call the AI API and wait for response
+            const reply = await this.callAPI(messageText);
+            
+            // Add AI response to chat
+            this.appendMessage(reply, "assistant");
+        } catch (error) {
+            console.error('API Error:', error);
+            this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
+        } finally {
+            // Re-enable the interface regardless of success or failure
+            this.setLoading(false);
+        }
+    }
+    
+    async callAPI(message) {
+        const response = await fetch(this.API_ENDPOINT, {
+            method: "POST",
+            headers: { 
+                "Content-Type": "application/json" 
+            },
+            body: JSON.stringify({ message })
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        return data.response;
+    }
+    
+    appendMessage(text, role) {
+        const messageElement = document.createElement("div");
+        messageElement.className = `message ${role}`;
+        messageElement.innerHTML = `
+            <div class="message-content">
+                <span class="message-text">${this.escapeHtml(text)}</span>
+                <span class="message-time">${new Date().toLocaleTimeString()}</span>
+            </div>
+        `;
+        
+        this.messages.appendChild(messageElement);
+        this.scrollToBottom();
+    }
+    
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    
+    scrollToBottom() {
+        this.messages.scrollTop = this.messages.scrollHeight;
+    }
+    
+    setLoading(isLoading) {
+        this.sendButton.disabled = isLoading;
+        this.input.disabled = isLoading;
+        this.sendButton.textContent = isLoading ? "Sending..." : "Send";
+    }
+}
 
-Gumawa ng `app.js` na may modernong, maayos na structured JavaScript:
+// Initialize the chat application when the page loads
+document.addEventListener("DOMContentLoaded", () => {
+    new ChatApp();
+});
+```
 
 #### Pag-unawa sa Bawat Konsepto ng JavaScript
 
 **ES6 Class Structure**:
+```javascript
+class ChatApp {
+    constructor() {
+        // This runs when you create a new ChatApp instance
+        // It's like the "setup" function for your chat
+    }
+    
+    methodName() {
+        // Methods are functions that belong to the class
+        // They can access class properties using "this"
+    }
+}
+```
+
 **Async/Await Pattern**:
+```javascript
+// Old way (callback hell):
+fetch(url)
+  .then(response => response.json())
+  .then(data => console.log(data))
+  .catch(error => console.error(error));
+
+// Modern way (async/await):
+try {
+    const response = await fetch(url);
+    const data = await response.json();
+    console.log(data);
+} catch (error) {
+    console.error(error);
+}
+```
+
 **Event-Driven Programming**:
 Sa halip na patuloy na suriin kung may nangyari, "nakikinig" tayo sa mga event:
+```javascript
+// When form is submitted, run handleSubmit
+this.form.addEventListener("submit", (e) => this.handleSubmit(e));
+
+// When Enter key is pressed, also run handleSubmit
+this.input.addEventListener("keypress", (e) => { /* ... */ });
+```
+
 **DOM Manipulation**:
+```javascript
+// Create new elements
+const messageElement = document.createElement("div");
+
+// Modify their properties
+messageElement.className = "message user";
+messageElement.innerHTML = "Hello world!";
+
+// Add to the page
+this.messages.appendChild(messageElement);
+```
 
 #### Seguridad at Mga Pinakamahusay na Praktika
 
-**XSS Prevention**:
-**Bakit mahalaga ito**: Kung ang isang user ay nag-type ng `<script>alert('hack')</script>`, tinitiyak ng function na ito na magdi-display ito bilang text sa halip na mag-execute bilang code.
+**Pag-iwas sa XSS**:
+```javascript
+escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;  // This automatically escapes HTML
+    return div.innerHTML;
+}
+```
+
+**Bakit ito mahalaga**: Kung ang isang user ay mag-type ng `<script>alert('hack')</script>`, tinitiyak ng function na ito na magpapakita ito bilang text sa halip na mag-execute bilang code.
+
+**Paghawak ng Error**:
+```javascript
+try {
+    const reply = await this.callAPI(messageText);
+    this.appendMessage(reply, "assistant");
+} catch (error) {
+    // Show user-friendly error instead of breaking the app
+    this.appendMessage("Sorry, I'm having trouble...", "error");
+}
+```
 
-**Error Handling**:
 **Mga Pagsasaalang-alang sa User Experience**:
-- **Optimistic UI**: Agad na idagdag ang mensahe ng user, huwag maghintay para sa tugon ng server
+- **Optimistic UI**: Idagdag agad ang mensahe ng user, huwag maghintay sa tugon ng server
 - **Loading states**: I-disable ang mga button at ipakita ang "Sending..." habang naghihintay
 - **Auto-scroll**: Panatilihing nakikita ang pinakabagong mga mensahe
-- **Input validation**: Huwag mag-send ng mga empty messages
-- **Keyboard shortcuts**: Ang Enter key ay nagse-send ng mga mensahe (tulad ng tunay na chat apps)
+- **Input validation**: Huwag magpadala ng mga walang laman na mensahe
+- **Keyboard shortcuts**: Ang Enter key ay nagpapadala ng mga mensahe (tulad ng mga tunay na chat app)
 
 #### Pag-unawa sa Daloy ng Application
 
-1. **Naglo-load ang pahina** → Nag-fire ang `DOMContentLoaded` event → Naka-create ang `new ChatApp()`
-2. **Tumakbo ang constructor** → Nakakuha ng mga DOM element references → Naka-setup ang mga event listeners
-3. **Nagta-type ang user ng mensahe** → Pinindot ang Enter o kinlick ang Send → Tumakbo ang `handleSubmit`
-4. **Tumakbo ang `handleSubmit`** → Na-validate ang input → Nagpakita ng loading state → Tumawag sa API
-5. **Tumugon ang API** → Idagdag ang AI message sa chat → I-enable muli ang interface
+1. **Naglo-load ang pahina** → Nag-trigger ang event na `DOMContentLoaded` → Nilikha ang `new ChatApp()`
+2. **Tumakbo ang Constructor** → Nakakuha ng mga reference ng DOM element → Nagsa-set up ng mga event listener
+3. **Nagta-type ang user ng mensahe** → Pinindot ang Enter o kinlik ang Send → Tumakbo ang `handleSubmit`
+4. **handleSubmit** → Bine-validate ang input → Ipinapakita ang loading state → Tumatawag sa API
+5. **Tumugon ang API** → Idinagdag ang mensahe ng AI sa chat → Muling pinapagana ang interface
 6. **Handa para sa susunod na mensahe** → Maaaring magpatuloy ang user sa pag-chat
-Ang arkitektura na ito ay madaling i-scale – madali mong maidaragdag ang mga tampok tulad ng pag-edit ng mensahe, pag-upload ng file, o maraming thread ng pag-uusap nang hindi binabago ang pangunahing istruktura.
+
+Ang arkitekturang ito ay scalable – madali mong madaragdagan ang mga feature tulad ng pag-edit ng mensahe, pag-upload ng file, o maraming thread ng pag-uusap nang hindi nire-rewrite ang pangunahing istruktura.
+
+### 🎯 Pedagogical Check-in: Modernong Arkitektura ng Frontend
+
+**Pag-unawa sa Arkitektura**: Naisakatuparan mo ang isang kumpletong single-page application gamit ang mga modernong pattern ng JavaScript. Ito ay kumakatawan sa propesyonal na antas ng frontend development.
+
+**Mga Pangunahing Konseptong Na-master**:
+- **ES6 Class Architecture**: Organisado, maayos na istruktura ng code
+- **Async/Await Patterns**: Modernong asynchronous programming
+- **Event-Driven Programming**: Disenyo ng responsive user interface
+- **Mga Pinakamahusay na Praktika sa Seguridad**: Pag-iwas sa XSS at input validation
+
+**Koneksyon sa Industriya**: Ang mga pattern na natutunan mo (class-based architecture, async operations, DOM manipulation) ay pundasyon ng mga modernong framework tulad ng React, Vue, at Angular. Gumagawa ka gamit ang parehong arkitektural na pag-iisip na ginagamit sa mga production application.
+
+**Tanong para sa Pagmumuni-muni**: Paano mo palalawakin ang chat application na ito upang mag-handle ng maraming pag-uusap o user authentication? Isaalang-alang ang mga pagbabago sa arkitektura na kinakailangan at kung paano mag-e-evolve ang class structure.
 
 ### Pag-istilo ng Iyong Chat Interface
 
-Ngayon, gagawa tayo ng modernong, kaakit-akit na chat interface gamit ang CSS. Ang magandang disenyo ay nagpaparamdam na propesyonal ang iyong aplikasyon at nagpapabuti sa kabuuang karanasan ng gumagamit. Gagamit tayo ng mga modernong tampok ng CSS tulad ng Flexbox, CSS Grid, at custom properties para sa isang responsive at accessible na disenyo.
+Ngayon, gagawa tayo ng modernong, visually appealing na chat interface gamit ang CSS. Ang magandang disenyo ay nagpaparamdam sa iyong application na propesyonal at nagpapabuti sa kabuuang karanasan ng user. Gagamit tayo ng mga modernong feature ng CSS tulad ng Flexbox, CSS Grid, at mga custom properties para sa isang responsive at accessible na disenyo.
 
 Gumawa ng `styles.css` gamit ang mga komprehensibong estilo:
 
@@ -1442,13 +1982,13 @@ body {
 ```
 
 **Pag-unawa sa arkitektura ng CSS:**
-- **Gumagamit** ng mga custom properties ng CSS (mga variable) para sa pare-parehong tema at madaling maintenance
-- **Nagpapatupad** ng layout ng Flexbox para sa responsive na disenyo at tamang alignment
+- **Gumagamit** ng mga custom properties ng CSS (variables) para sa consistent na tema at madaling maintenance
+- **Nagpapatupad** ng Flexbox layout para sa responsive na disenyo at tamang alignment
 - **Kasama** ang smooth animations para sa paglitaw ng mensahe nang hindi nakakagambala
-- **Nagbibigay** ng visual na pagkakaiba sa pagitan ng mga mensahe ng user, mga tugon ng AI, at mga error states
+- **Nagbibigay** ng visual na pagkakaiba sa pagitan ng mga mensahe ng user, mga tugon ng AI, at mga estado ng error
 - **Sumusuporta** sa responsive na disenyo na gumagana sa parehong desktop at mobile devices
 - **Isinasaalang-alang** ang accessibility gamit ang reduced motion preferences at tamang contrast ratios
-- **Nag-aalok** ng dark mode support batay sa system preferences ng user
+- **Nag-aalok** ng suporta sa dark mode batay sa system preferences ng user
 
 ### Pag-configure ng Iyong Backend URL
 
@@ -1462,20 +2002,20 @@ this.BASE_URL = "http://localhost:5000";
 this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 ```
 
-**Pagpapasya sa iyong backend URL:**
-- **Local development**: Gamitin ang `http://localhost:5000` kung parehong tumatakbo ang frontend at backend nang lokal
-- **Codespaces**: Hanapin ang iyong backend URL sa tab na Ports pagkatapos gawing pampubliko ang port 5000
+**Pag-determina ng iyong backend URL:**
+- **Local development**: Gamitin ang `http://localhost:5000` kung parehong lokal na tumatakbo ang frontend at backend
+- **Codespaces**: Hanapin ang iyong backend URL sa Ports tab pagkatapos gawing pampubliko ang port 5000
 - **Production**: Palitan ng iyong aktwal na domain kapag dineploy sa hosting service
 
-> 💡 **Tip sa Pagsubok**: Maaari mong subukan ang iyong backend nang direkta sa pamamagitan ng pagbisita sa root URL sa iyong browser. Makikita mo ang welcome message mula sa iyong FastAPI server.
+> 💡 **Testing Tip**: Maaari mong i-test ang iyong backend nang direkta sa pamamagitan ng pagbisita sa root URL sa iyong browser. Dapat mong makita ang welcome message mula sa iyong FastAPI server.
 
 ## Pagsubok at Deployment
 
-Ngayon na mayroon ka nang parehong frontend at backend components, subukan natin kung gumagana ang lahat nang magkasama at tuklasin ang mga opsyon sa deployment para maibahagi ang iyong chat assistant sa iba.
+Ngayon na mayroon ka ng parehong frontend at backend components, subukan natin kung gumagana ang lahat nang magkasama at tuklasin ang mga opsyon sa deployment para maibahagi ang iyong chat assistant sa iba.
 
 ### Workflow ng Lokal na Pagsubok
 
-Sundin ang mga hakbang na ito upang subukan ang iyong kumpletong aplikasyon:
+Sundin ang mga hakbang na ito upang subukan ang iyong kumpletong application:
 
 ```mermaid
 graph TD
@@ -1488,19 +2028,19 @@ graph TD
 
 **Hakbang-hakbang na proseso ng pagsubok:**
 
-1. **Simulan ang iyong backend server**:
+1. **I-start ang iyong backend server**:
    ```bash
    cd backend
    source venv/bin/activate  # or venv\Scripts\activate on Windows
    python api.py
    ```
 
-2. **I-verify ang API ay gumagana**:
+2. **I-verify na gumagana ang API**:
    - Buksan ang `http://localhost:5000` sa iyong browser
-   - Makikita mo ang welcome message mula sa iyong FastAPI server
+   - Dapat mong makita ang welcome message mula sa iyong FastAPI server
 
 3. **Buksan ang iyong frontend**:
-   - Pumunta sa iyong frontend directory
+   - Mag-navigate sa iyong frontend directory
    - Buksan ang `index.html` sa iyong web browser
    - O gamitin ang Live Server extension ng VS Code para sa mas magandang karanasan sa development
 
@@ -1510,38 +2050,97 @@ graph TD
    - I-verify na ang AI ay tumutugon nang naaangkop
    - Suriin ang browser console para sa anumang JavaScript errors
 
-### Pag-aayos ng Karaniwang Problema
+### Pag-troubleshoot ng Karaniwang Isyu
 
 | Problema | Sintomas | Solusyon |
 |----------|----------|----------|
-| **CORS Error** | Hindi maabot ng frontend ang backend | Siguraduhing maayos na naka-configure ang FastAPI CORSMiddleware |
+| **CORS Error** | Hindi maabot ng frontend ang backend | Tiyaking maayos na naka-configure ang FastAPI CORSMiddleware |
 | **API Key Error** | 401 Unauthorized responses | Suriin ang iyong `GITHUB_TOKEN` environment variable |
-| **Connection Refused** | Mga error sa network sa frontend | I-verify ang backend URL at na tumatakbo ang Flask server |
-| **No AI Response** | Walang laman o error na tugon | Suriin ang backend logs para sa API quota o authentication issues |
+| **Connection Refused** | Mga network error sa frontend | I-verify ang backend URL at na tumatakbo ang Flask server |
+| **No AI Response** | Walang laman o error na mga tugon | Suriin ang backend logs para sa API quota o authentication issues |
 
-**Karaniwang hakbang sa debugging:**
-- **Suriin** ang browser Developer Tools Console para sa mga JavaScript errors
+**Karaniwang hakbang sa pag-debug**:
+- **Suriin** ang Console ng Developer Tools ng browser para sa mga error sa JavaScript
 - **I-verify** na ang Network tab ay nagpapakita ng matagumpay na API requests at responses
-- **Suriin** ang backend terminal output para sa mga Python errors o API issues
-- **Siguraduhin** na ang environment variables ay maayos na na-load at accessible
+- **I-review** ang output ng terminal ng backend para sa mga error sa Python o isyu sa API
+- **I-confirm** na ang mga environment variable ay maayos na na-load at accessible
+
+## 📈 Timeline ng Iyong Mastery sa AI Application Development
+
+```mermaid
+timeline
+    title Complete AI Application Development Journey
+    
+    section AI Foundations
+        Understanding Generative AI
+            : Grasp pattern recognition concepts
+            : Master AI parameter control
+            : Learn prompt engineering techniques
+        
+        GitHub Models Integration
+            : Navigate AI service platforms
+            : Handle authentication securely
+            : Optimize model parameters
+    
+    section Backend Development
+        Python API Architecture
+            : Build FastAPI applications
+            : Implement async operations
+            : Create secure endpoints
+        
+        AI Service Integration
+            : Connect to external AI APIs
+            : Handle rate limiting
+            : Implement error boundaries
+    
+    section Frontend Mastery
+        Modern JavaScript Patterns
+            : Master ES6 class architecture
+            : Implement async/await flows
+            : Build responsive interfaces
+        
+        Real-time User Experience
+            : Create dynamic chat interfaces
+            : Handle loading states
+            : Optimize user interactions
+    
+    section Production Readiness
+        Security & Performance
+            : Implement secure token management
+            : Prevent XSS vulnerabilities
+            : Optimize API performance
+        
+        Professional Deployment
+            : Build scalable architectures
+            : Create maintainable code
+            : Document development processes
+```
+
+**🎓 Graduation Milestone**: Matagumpay mong naitayo ang isang kumpletong AI-powered application gamit ang parehong teknolohiya at arkitektural na pattern na nagpapagana sa mga modernong AI assistant. Ang mga kasanayang ito ay kumakatawan sa intersection ng tradisyunal na web development at cutting-edge AI integration.
+
+**🔄 Next Level Capabilities**:
+- Handa nang tuklasin ang advanced AI frameworks (LangChain, LangGraph)
+- Handa nang gumawa ng multi-modal AI applications (text, image, voice)
+- May kakayahang mag-implement ng vector databases at retrieval systems
+- Naka-set ang pundasyon para sa machine learning at AI model fine-tuning
 
 ## Hamon ng GitHub Copilot Agent 🚀
 
-Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:
+Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
 
-**Deskripsyon:** Pagandahin ang chat assistant sa pamamagitan ng pagdaragdag ng conversation history at message persistence. Ang hamon na ito ay makakatulong sa iyo na maunawaan kung paano pamahalaan ang estado sa mga chat application at magpatupad ng data storage para sa mas magandang karanasan ng user.
+**Deskripsyon:** Pagandahin ang chat assistant sa pamamagitan ng pagdaragdag ng conversation history at message persistence. Ang hamon na ito ay makakatulong sa iyo na maunawaan kung paano pamahalaan ang state sa mga chat application at mag-implement ng data storage para sa mas magandang karanasan ng user.
 
-**Prompt:** Baguhin ang chat application upang isama ang conversation history na nananatili sa pagitan ng mga session. Magdagdag ng functionality upang i-save ang mga chat message sa local storage, ipakita ang conversation history kapag nag-load ang page, at isama ang "Clear History" button. Magpatupad din ng typing indicators at message timestamps upang gawing mas makatotohanan ang karanasan sa chat.
+**Prompt:** Baguhin ang chat application upang isama ang conversation history na nananatili kahit matapos ang session. Magdagdag ng functionality upang i-save ang mga chat message sa local storage, ipakita ang conversation history kapag nag-load ang pahina, at magdagdag ng "Clear History" button. Mag-implement din ng typing indicators at message timestamps upang gawing mas makatotohanan ang karanasan sa chat.
 
-Alamin pa ang tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
+Alamin ang higit pa tungkol sa [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) dito.
 
-## Asaynment: Gumawa ng Iyong Personal na AI Assistant
+## Assignment: Gumawa ng Iyong Personal na AI Assistant
 
-Ngayon ay gagawa ka ng sarili mong implementasyon ng AI assistant. Sa halip na gayahin lamang ang tutorial code, ito ay pagkakataon upang ilapat ang mga konsepto habang gumagawa ng isang bagay na sumasalamin sa iyong sariling interes at mga use case.
+Ngayon, gagawa ka ng sarili mong AI assistant implementation. Sa halip na simpleng kopyahin ang tutorial code, ito ay pagkakataon upang i-apply ang mga konsepto habang gumagawa ng isang bagay na sumasalamin sa iyong sariling interes at mga use case.
 
 ### Mga Kinakailangan sa Proyekto
 
-I-set up ang iyong proyekto gamit ang malinis at organisadong istruktura:
+I-set up ang iyong proyekto gamit ang malinis, organisadong istruktura:
 
 ```text
 my-ai-assistant/
@@ -1557,7 +2156,7 @@ my-ai-assistant/
 └── README.md           # Tell the world about your creation
 ```
 
-### Mga Gawain sa Core Implementation
+### Mga Core Implementation Tasks
 
 **Backend Development:**
 - **Gamitin** ang aming FastAPI code at gawing sarili mo
@@ -1566,24 +2165,24 @@ my-ai-assistant/
 - **Sumulat** ng malinaw na dokumentasyon para sa sinumang gustong maunawaan kung paano gumagana ang iyong API
 
 **Frontend Development:**
-- **Gumawa** ng chat interface na intuitive at welcoming
+- **Bumuo** ng chat interface na intuitive at welcoming
 - **Sumulat** ng malinis, modernong JavaScript na maipagmamalaki mong ipakita sa ibang developer
 - **Magdisenyo** ng custom styling na sumasalamin sa personalidad ng iyong AI – masaya at makulay? Malinis at minimal? Nasa iyo ang desisyon!
-- **Siguraduhin** na gumagana ito nang mahusay sa parehong telepono at computer
+- **Siguraduhin** na gumagana ito nang mahusay sa parehong mga telepono at computer
 
 **Mga Kinakailangan sa Personalization:**
-- **Pumili** ng natatanging pangalan at personalidad para sa iyong AI assistant – maaaring isang bagay na sumasalamin sa iyong interes o mga problemang nais mong lutasin
-- **I-customize** ang disenyo ng visual upang tumugma sa vibe ng iyong assistant
-- **Sumulat** ng nakakaakit na welcome message na magpapasimula sa mga tao na makipag-chat
+- **Pumili** ng natatanging pangalan at personalidad para sa iyong AI assistant – maaaring sumasalamin sa iyong interes o mga problemang nais mong lutasin
+- **I-customize** ang visual design upang tumugma sa vibe ng iyong assistant
+- **Sumulat** ng nakakaengganyong welcome message na magpapasimula sa mga tao na makipag-chat
 - **Subukan** ang iyong assistant gamit ang iba't ibang uri ng tanong upang makita kung paano ito tumutugon
 
 ### Mga Ideya sa Pagpapahusay (Opsyonal)
 
-Gusto mo bang dalhin ang iyong proyekto sa susunod na antas? Narito ang ilang mga ideya na masaya tuklasin:
+Gusto mo bang dalhin ang iyong proyekto sa susunod na antas? Narito ang ilang mga ideya na maaaring tuklasin:
 
-| Tampok | Deskripsyon | Mga Kasanayang Iyong Mapa-practice |
-|--------|-------------|------------------------------------|
-| **Message History** | Tandaan ang mga pag-uusap kahit na mag-refresh ang page | Paggamit ng localStorage, JSON handling |
+| Feature | Deskripsyon | Mga Kasanayang Matututuhan |
+|---------|-------------|---------------------------|
+| **Message History** | Tandaan ang mga pag-uusap kahit matapos ang page refresh | Paggamit ng localStorage, JSON handling |
 | **Typing Indicators** | Ipakita ang "AI is typing..." habang naghihintay ng tugon | CSS animations, async programming |
 | **Message Timestamps** | Ipakita kung kailan ipinadala ang bawat mensahe | Date/time formatting, UX design |
 | **Export Chat** | Payagan ang mga user na i-download ang kanilang pag-uusap | File handling, data export |
@@ -1593,15 +2192,15 @@ Gusto mo bang dalhin ang iyong proyekto sa susunod na antas? Narito ang ilang mg
 ### Pagsubok at Dokumentasyon
 
 **Quality Assurance:**
-- **Subukan** ang iyong aplikasyon gamit ang iba't ibang uri ng input at edge cases
+- **Subukan** ang iyong application gamit ang iba't ibang uri ng input at edge cases
 - **I-verify** na gumagana ang responsive design sa iba't ibang screen sizes
 - **Suriin** ang accessibility gamit ang keyboard navigation at screen readers
 - **I-validate** ang HTML at CSS para sa standards compliance
 
 **Mga Kinakailangan sa Dokumentasyon:**
 - **Sumulat** ng README.md na nagpapaliwanag ng iyong proyekto at kung paano ito patakbuhin
-- **Isama** ang mga screenshot ng iyong chat interface habang gumagana
-- **Idokumento** ang anumang natatanging tampok o customizations na iyong idinagdag
+- **Isama** ang mga screenshot ng iyong chat interface habang ginagamit
+- **I-dokumento** ang anumang natatanging feature o customizations na idinagdag mo
 - **Magbigay** ng malinaw na setup instructions para sa ibang developer
 
 ### Mga Alituntunin sa Pagsumite
@@ -1609,17 +2208,17 @@ Gusto mo bang dalhin ang iyong proyekto sa susunod na antas? Narito ang ilang mg
 **Mga Deliverables ng Proyekto:**
 1. Kumpletong project folder na may lahat ng source code
 2. README.md na may deskripsyon ng proyekto at setup instructions
-3. Mga screenshot na nagpapakita ng iyong chat assistant habang gumagana
-4. Maikling reflection sa kung ano ang iyong natutunan at mga hamon na iyong hinarap
+3. Mga screenshot na nagpapakita ng iyong chat assistant habang ginagamit
+4. Maikling pagninilay sa natutunan mo at mga hamon na hinarap mo
 
 **Kriteria sa Pagsusuri:**
 - **Functionality**: Gumagana ba ang chat assistant ayon sa inaasahan?
-- **Code Quality**: Organisado, may komento, at madaling i-maintain ba ang code?
-- **Design**: Kaakit-akit ba ang interface at user-friendly?
-- **Creativity**: Gaano ka-unique at personalized ang iyong implementasyon?
+- **Code Quality**: Maayos ba ang pagkaka-organize, may mga komento, at madaling i-maintain ang code?
+- **Design**: Kaaya-aya ba ang interface at user-friendly?
+- **Creativity**: Gaano ka-unique at personalized ang iyong implementation?
 - **Documentation**: Malinaw at kumpleto ba ang setup instructions?
 
-> 💡 **Tip para sa Tagumpay**: Simulan muna sa mga pangunahing kinakailangan, pagkatapos ay magdagdag ng mga pagpapahusay kapag gumagana na ang lahat. Mag-focus sa paglikha ng isang polished na core experience bago magdagdag ng advanced features.
+> 💡 **Success Tip**: Magsimula sa mga pangunahing kinakailangan muna, pagkatapos ay magdagdag ng mga pagpapahusay kapag gumagana na ang lahat. Mag-focus sa paglikha ng isang polished na core experience bago magdagdag ng mga advanced na feature.
 
 ## Solusyon
 
@@ -1633,78 +2232,78 @@ Handa ka na bang dalhin ang iyong AI assistant sa susunod na antas? Subukan ang
 
 Ang tunay na magic ay nangyayari kapag binigyan mo ang iyong AI assistant ng natatanging personalidad. Mag-eksperimento sa iba't ibang system prompts upang lumikha ng mga specialized assistants:
 
-**Halimbawa ng Professional Assistant:**
+**Halimbawa ng Professional Assistant**:
 ```python
 call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
 ```
 
-**Halimbawa ng Creative Writing Helper:**
+**Halimbawa ng Creative Writing Helper**:
 ```python
 call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
 ```
 
-**Halimbawa ng Technical Mentor:**
+**Halimbawa ng Technical Mentor**:
 ```python
 call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
 ```
 
 ### Mga Pagpapahusay sa Frontend
 
-Baguhin ang iyong chat interface gamit ang mga visual at functional na pagpapabuti:
+Baguhin ang iyong chat interface gamit ang mga visual at functional na pagpapahusay:
 
-**Mga Advanced na Tampok ng CSS:**
+**Mga Advanced na Feature ng CSS**:
 - **Magpatupad** ng smooth message animations at transitions
 - **Magdagdag** ng custom chat bubble designs gamit ang CSS shapes at gradients
 - **Gumawa** ng typing indicator animation para sa kapag "nag-iisip" ang AI
 - **Magdisenyo** ng emoji reactions o message rating system
 
-**Mga Pagpapahusay sa JavaScript:**
-- **Magdagdag** ng keyboard shortcuts (Ctrl+Enter para mag-send, Escape para i-clear ang input)
-- **Magpatupad** ng message search at filtering functionality
+**Mga Pagpapahusay sa JavaScript**:
+- **Magdagdag** ng keyboard shortcuts (Ctrl+Enter para mag-send, Escape para mag-clear ng input)
+- **Mag-implement** ng message search at filtering functionality
 - **Gumawa** ng conversation export feature (i-download bilang text o JSON)
 - **Magdagdag** ng auto-save sa localStorage upang maiwasan ang pagkawala ng mensahe
 
-### Advanced na AI Integration
+### Advanced AI Integration
 
-**Maramihang AI Personalities:**
-- **Gumawa** ng dropdown upang lumipat sa iba't ibang AI personalities
+**Maramihang AI Personalities**:
+- **Gumawa** ng dropdown upang mag-switch sa iba't ibang AI personalities
 - **I-save** ang preferred personality ng user sa localStorage
-- **Magpatupad** ng context switching na nagpapanatili ng daloy ng pag-uusap
+- **Mag-implement** ng context switching na nagpapanatili ng daloy ng pag-uusap
 
-**Mga Tampok ng Smart Response:**
-- **Magdagdag** ng conversation context awareness (naalala ng AI ang mga nakaraang mensahe)
-- **Magpatupad** ng smart suggestions batay sa topic ng pag-uusap
-- **Gumawa** ng quick reply buttons para sa mga karaniwang tanong
+**Mga Smart Response Features**:
+- **Magdagdag** ng conversation context awareness (naaalala ng AI ang mga nakaraang mensahe)
+- **Ipatupad** ang matatalinong mungkahi batay sa paksa ng usapan  
+- **Gumawa** ng mga quick reply button para sa mga karaniwang tanong  
 
-> 🎯 **Layunin sa Pag-aaral**: Ang mga bonus na hamon na ito ay tumutulong sa iyo na maunawaan ang mga advanced na pattern ng web development at mga teknik sa AI integration na ginagamit sa mga production application.
+> 🎯 **Layunin sa Pag-aaral**: Ang mga bonus na hamon na ito ay makakatulong sa iyo na maunawaan ang mga advanced na pattern sa web development at mga teknik sa AI integration na ginagamit sa mga production application.  
 
-## Buod at Susunod na Hakbang
+## Buod at Susunod na Hakbang  
 
-Binabati kita! Matagumpay mong naitayo ang isang kumpletong AI-powered chat assistant mula sa simula. Ang proyektong ito ay nagbigay sa iyo ng hands-on na karanasan sa mga modernong teknolohiya ng web development at AI integration – mga kasanayang lalong mahalaga sa kasalukuyang tech landscape.
+Binabati kita! Matagumpay mong naitayo ang isang kumpletong AI-powered chat assistant mula sa simula. Ang proyektong ito ay nagbigay sa iyo ng hands-on na karanasan sa mga modernong teknolohiya sa web development at AI integration – mga kasanayan na lalong mahalaga sa kasalukuyang teknolohikal na landscape.  
 
-### Ano ang Iyong Naabot
+### Mga Naisakatuparan Mo  
 
-Sa buong araling ito, na-master mo ang ilang mahahalagang teknolohiya at konsepto:
+Sa buong araling ito, na-master mo ang ilang mahahalagang teknolohiya at konsepto:  
 
-**Backend Development:**
-- **Na-integrate** sa GitHub Models API para sa AI functionality
-- **Nagtayo** ng RESTful API gamit ang Flask na may tamang error handling
-- **Nagpatupad** ng secure authentication gamit ang environment variables
-- **Nag-configure** ng CORS para sa cross-origin requests sa pagitan ng frontend at backend
+**Backend Development:**  
+- **Inintegrate** sa GitHub Models API para sa AI functionality  
+- **Nagtayo** ng RESTful API gamit ang Flask na may tamang error handling  
+- **Nagpatupad** ng secure authentication gamit ang environment variables  
+- **Kinonfigura** ang CORS para sa cross-origin requests sa pagitan ng frontend at backend  
 
-**Frontend Development:**
-- **Gumawa** ng responsive chat interface gamit ang semantic HTML
-- **Nagpatupad** ng modernong JavaScript gamit ang async/await at class-based architecture
-- **Nagdisenyo** ng engaging user interface gamit ang CSS Grid, Flexbox, at animations
-- **Nagdagdag** ng accessibility features at responsive design principles
+**Frontend Development:**  
+- **Gumawa** ng responsive chat interface gamit ang semantic HTML  
+- **Nagpatupad** ng modernong JavaScript gamit ang async/await at class-based na arkitektura  
+- **Nagdisenyo** ng nakakaengganyong user interface gamit ang CSS Grid, Flexbox, at animations  
+- **Nagdagdag** ng mga accessibility feature at prinsipyo ng responsive design  
 
-**Full-Stack Integration:**
-- **Ikonekta** ang frontend at backend sa pamamagitan ng HTTP API calls
-- **Pinamahalaan** ang real-time user interactions at asynchronous data flow
-- **Nagpatupad** ng error handling at user feedback sa buong aplikasyon
-- **Sinubukan** ang kumpletong workflow ng aplikasyon mula sa user input hanggang sa AI response
+**Full-Stack Integration:**  
+- **Ikonekta** ang frontend at backend sa pamamagitan ng HTTP API calls  
+- **Hinawakan** ang real-time na interaksyon ng user at asynchronous na daloy ng data  
+- **Nagpatupad** ng error handling at feedback para sa user sa buong application  
+- **Sinubukan** ang kumpletong workflow ng application mula sa input ng user hanggang sa AI response  
 
-### Mga Pangunahing Natutunan
+### Mga Pangunahing Natutunan  
 
 ```mermaid
 mindmap
@@ -1726,68 +2325,68 @@ mindmap
       Model Parameters
       Conversation Flow
 ```
+  
+Ang proyektong ito ay nagpakilala sa iyo sa mga pundasyon ng pagbuo ng mga AI-powered na application, na kumakatawan sa hinaharap ng web development. Nauunawaan mo na ngayon kung paano isama ang mga kakayahan ng AI sa tradisyunal na mga web application, na lumilikha ng mga nakakaengganyong karanasan para sa user na matalino at tumutugon.  
 
-Ang proyektong ito ay nagpakilala sa iyo sa mga pundasyon ng pagbuo ng AI-powered applications, na kumakatawan sa hinaharap ng web development. Ngayon ay nauunawaan mo na kung paano i-integrate ang AI capabilities sa tradisyunal na web applications, na lumilikha ng engaging user experiences na parang matalino at responsive.
-
-### Mga Propesyonal na Aplikasyon
+### Mga Propesyonal na Aplikasyon  
 
-Ang mga kasanayang iyong nakuha sa araling ito ay direktang naaangkop sa mga modernong karera sa software development:
+Ang mga kasanayan na iyong natutunan sa araling ito ay direktang naaangkop sa mga modernong karera sa software development:  
 
-- **Full-stack web development** gamit ang mga modernong frameworks at APIs
-- **AI integration** sa mga web applications at mobile apps
-- **API design and development** para sa microservices architectures
-- **User interface development** na may focus sa accessibility at responsive design
-- **DevOps practices** kabilang ang environment configuration at deployment
+- **Full-stack web development** gamit ang mga modernong framework at API  
+- **AI integration** sa mga web application at mobile apps  
+- **API design at development** para sa microservices architectures  
+- **Pagbuo ng user interface** na nakatuon sa accessibility at responsive design  
+- **DevOps practices** kabilang ang environment configuration at deployment  
 
-### Pagpapatuloy ng Iyong AI Development Journey
+### Pagpapatuloy ng Iyong AI Development Journey  
 
-**Mga Susunod na Hakbang sa Pag-aaral:**
-- **Mag-explore** ng mas advanced na AI models at APIs (GPT-4, Claude, Gemini)
-- **Matuto** tungkol sa prompt engineering techniques para sa mas mahusay na AI responses
-- **Pag-aralan** ang conversation design at chatbot user experience principles
-- **Mag-imbestiga** sa AI safety, ethics, at responsible AI development practices
-- **Magbuo** ng mas kumplikadong applications na may conversation memory at context awareness
+**Susunod na Mga Hakbang sa Pag-aaral:**  
+- **Galugarin** ang mas advanced na AI models at APIs (GPT-4, Claude, Gemini)  
+- **Pag-aralan** ang mga teknik sa prompt engineering para sa mas mahusay na AI responses  
+- **Pag-aralan** ang disenyo ng usapan at mga prinsipyo ng chatbot user experience  
+- **Siyasatin** ang AI safety, ethics, at responsableng pag-develop ng AI  
+- **Bumuo** ng mas kumplikadong mga application na may memorya ng usapan at context awareness  
 
-**Mga Advanced na Ideya sa Proyekto:**
-- Multi-user chat rooms na may AI moderation
-- AI-powered customer service chatbots
-- Educational tutoring assistants na may personalized learning
-- Creative writing collaborators na may iba't ibang AI personalities
-- Technical documentation assistants para sa mga developer
+**Mga Ideya para sa Advanced na Proyekto:**  
+- Multi-user chat rooms na may AI moderation  
+- AI-powered na customer service chatbots  
+- Mga educational tutoring assistant na may personalized learning  
+- Mga creative writing collaborator na may iba't ibang AI personalities  
+- Mga technical documentation assistant para sa mga developer  
 
-## Pagsisimula sa GitHub Codespaces
+## Pagsisimula sa GitHub Codespaces  
 
-Gusto mo bang subukan ang proyektong ito sa isang cloud development environment? Ang GitHub Codespaces ay nagbibigay ng kumpletong development setup sa iyong browser, perpekto para sa pag-eksperimento sa AI applications nang walang lokal na setup requirements.
+Gusto mo bang subukan ang proyektong ito sa isang cloud development environment? Ang GitHub Codespaces ay nagbibigay ng kumpletong development setup sa iyong browser, perpekto para sa pag-eeksperimento sa mga AI application nang walang kinakailangang lokal na setup.  
 
-### Pag-set Up ng Iyong Development Environment
+### Pag-set Up ng Iyong Development Environment  
 
-**Hakbang 1: Gumawa mula sa Template**
-- **Pumunta** sa [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
-- **I-click** ang "Use this template" sa kanang itaas na bahagi (siguraduhing naka-log in ka sa GitHub)
+**Hakbang 1: Gumawa mula sa Template**  
+- **Pumunta** sa [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)  
+- **I-click** ang "Use this template" sa kanang itaas na bahagi (siguraduhing naka-log in ka sa GitHub)  
 
-![Interface ng paggawa mula sa template na nagpapakita ng berdeng "Use this template" button](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tl.png)
+![Interface ng paggawa mula sa template na nagpapakita ng berdeng "Use this template" button](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tl.png)  
 
-**Hakbang 2: I-launch ang Codespaces**
-- **Buksan** ang iyong bagong likhang repository
-- **I-click** ang berdeng "Code" button at piliin ang "Codespaces"
-- **Piliin** ang "Create codespace on main" upang simulan ang iyong development environment
+**Hakbang 2: I-launch ang Codespaces**  
+- **Buksan** ang iyong bagong likhang repository  
+- **I-click** ang berdeng "Code" button at piliin ang "Codespaces"  
+- **Piliin** ang "Create codespace on main" upang simulan ang iyong development environment  
 
-![Interface ng paggawa ng codespace na may mga opsyon para sa paglulunsad ng cloud development environment](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tl.png)
+![Interface ng paggawa ng codespace na may mga opsyon para sa paglulunsad ng cloud development environment](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tl.png)  
 
-**Hakbang 3: Configuration ng Environment**
-Kapag nag-load ang iyong Codespace, magkakaroon ka ng access sa:
-- **Pre-installed** na Python, Node.js, at lahat ng kinakailangang development tools
-- **VS Code interface** na may mga extension para sa web development
-- **Terminal access** para sa pagpapatakbo ng backend at frontend servers
-- **Port forwarding** para sa pagsubok ng iyong mga aplikasyon
+**Hakbang 3: Configuration ng Environment**  
+Kapag nag-load ang iyong Codespace, magkakaroon ka ng access sa:  
+- **Pre-installed** na Python, Node.js, at lahat ng kinakailangang development tools  
+- **VS Code interface** na may mga extension para sa web development  
+- **Terminal access** para sa pagpapatakbo ng backend at frontend servers  
+- **Port forwarding** para sa pagsubok ng iyong mga application  
 
-**Ano ang ibinibigay ng Codespaces:**
-- **Inaalis** ang mga isyu sa pag-setup at pag-configure ng lokal na environment
-- **Nagbibigay** ng pare-parehong development environment sa iba't ibang device
-- **Kasama** ang mga pre-configured na tools at extensions para sa web development
-- **Nag-aalok** ng seamless na integrasyon sa GitHub para sa version control at collaboration
+**Ano ang ibinibigay ng Codespaces:**  
+- **Inaalis** ang mga isyu sa lokal na setup ng environment at configuration  
+- **Nagbibigay** ng consistent na development environment sa iba't ibang device  
+- **Kasama** ang mga pre-configured na tools at extension para sa web development  
+- **Nag-aalok** ng seamless integration sa GitHub para sa version control at collaboration  
 
-> 🚀 **Pro Tip**: Ang Codespaces ay perpekto para sa pag-aaral at pag-prototype ng mga AI application dahil awtomatikong inaasikaso nito ang lahat ng kumplikadong pag-setup ng environment, kaya't makakapag-focus ka sa paggawa at pag-aaral sa halip na sa pag-troubleshoot ng configuration.
+> 🚀 **Pro Tip**: Ang Codespaces ay perpekto para sa pag-aaral at pag-prototype ng mga AI application dahil inaasikaso nito ang lahat ng kumplikadong setup ng environment nang awtomatiko, na nagbibigay-daan sa iyo na mag-focus sa pagbuo at pag-aaral sa halip na sa troubleshooting ng configuration.  
 
 ---
 
diff --git a/translations/tl/README.md b/translations/tl/README.md
index b67112a5d2..0a0d937e8b 100644
--- a/translations/tl/README.md
+++ b/translations/tl/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3fd21589b9bb0a90b9c9dd7d587f7e43",
-  "translation_date": "2025-10-20T20:59:57+00:00",
+  "original_hash": "8b9d0562ea649b6012d1a67acc630681",
+  "translation_date": "2025-11-03T13:43:02+00:00",
   "source_file": "README.md",
   "language_code": "tl"
 }
@@ -21,7 +21,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 # Web Development para sa mga Baguhan - Isang Kurikulum
 
-Matutunan ang mga pangunahing kaalaman sa web development sa aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Ang bawat isa sa 24 na leksyon ay sumisid sa JavaScript, CSS, at HTML sa pamamagitan ng mga hands-on na proyekto tulad ng terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at praktikal na mga gawain. Palawakin ang iyong kakayahan at pagbutihin ang iyong kaalaman gamit ang aming epektibong project-based na pamamaraan ng pagtuturo. Simulan ang iyong coding journey ngayon!
+Matutunan ang mga pangunahing kaalaman sa web development sa aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Ang bawat isa sa 24 na aralin ay sumisid sa JavaScript, CSS, at HTML sa pamamagitan ng mga hands-on na proyekto tulad ng terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at praktikal na mga gawain. Paunlarin ang iyong kakayahan at pagbutihin ang iyong kaalaman gamit ang aming epektibong project-based na pamamaraan. Simulan ang iyong coding journey ngayon!
 
 Sumali sa Azure AI Foundry Discord Community
 
@@ -30,11 +30,11 @@ Sumali sa Azure AI Foundry Discord Community
 Sundin ang mga hakbang na ito upang simulan ang paggamit ng mga resources na ito:
 1. **I-fork ang Repository**: I-click ang [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
 2. **I-clone ang Repository**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
-3. [**Sumali sa Azure AI Foundry Discord at makipagkita sa mga eksperto at kapwa developer**](https://discord.com/invite/ByRwuEEgH4)
+3. [**Sumali sa Azure AI Foundry Discord at makipagkilala sa mga eksperto at kapwa developer**](https://discord.com/invite/ByRwuEEgH4)
 
-### 🌐 Suporta sa Iba't Ibang Wika
+### 🌐 Suporta sa Multi-Language
 
-#### Sinusuportahan sa pamamagitan ng GitHub Action (Automated at Laging Napapanahon)
+#### Sinusuportahan sa pamamagitan ng GitHub Action (Automated & Laging Napapanahon)
 
 <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
 [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](./README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
@@ -46,53 +46,53 @@ Sundin ang mga hakbang na ito upang simulan ang paggamit ng mga resources na ito
 
 #### 🧑‍🎓 _Estudyante ka ba?_
 
-Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makakahanap ka ng mga resources para sa mga baguhan, Student packs, at mga paraan para makakuha ng libreng certificate voucher. Ito ang pahina na dapat mong i-bookmark at balikan paminsan-minsan dahil nagbabago ang nilalaman nito buwan-buwan.
+Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makakahanap ka ng mga resources para sa mga baguhan, mga Student packs, at maging mga paraan upang makakuha ng libreng certificate voucher. Ito ang pahina na dapat mong i-bookmark at balikan paminsan-minsan dahil pinapalitan namin ang nilalaman buwan-buwan.
 
-### 📣 Anunsyo - Bagong mga hamon gamit ang GitHub Copilot Agent mode!
+### 📣 Anunsyo - Mga bagong hamon gamit ang GitHub Copilot Agent mode!
 
-May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay bagong hamon para sa iyo na magawa gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagagamit ang Agent mode, kaya nitong hindi lang mag-generate ng text kundi gumawa at mag-edit ng mga file, magpatakbo ng mga command, at marami pa.
+May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay bagong hamon para sa iyo na kumpletuhin gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagagamit ang Agent mode, ito ay may kakayahang hindi lang mag-generate ng text kundi maaari ring gumawa at mag-edit ng mga file, magpatakbo ng mga command, at marami pa.
 
 ### 📣 Anunsyo - _Bagong Proyekto na gagawin gamit ang Generative AI_
 
-Bagong AI Assistant project ang idinagdag, tingnan ito [project](./09-chat-project/README.md)
+May bagong AI Assistant project na idinagdag, tingnan ito [project](./09-chat-project/README.md)
 
 ### 📣 Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript ay inilabas na
 
 Huwag palampasin ang aming bagong kurikulum sa Generative AI!
 
-Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula!
+Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang magsimula!
 
 ![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.tl.png)
 
-- Mga leksyon na sumasaklaw mula sa mga pangunahing kaalaman hanggang sa RAG.
+- Mga aralin na sumasaklaw mula sa mga pangunahing kaalaman hanggang sa RAG.
 - Makipag-ugnayan sa mga makasaysayang karakter gamit ang GenAI at ang aming companion app.
 - Masaya at nakaka-engganyong kwento, maglalakbay ka sa panahon!
 
 ![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.tl.png)
 
-Ang bawat leksyon ay may kasamang gawain na dapat tapusin, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksa tulad ng:
+Ang bawat aralin ay may kasamang assignment na dapat kumpletuhin, isang knowledge check, at isang hamon upang gabayan ka sa pag-aaral ng mga paksa tulad ng:
 - Prompting at prompt engineering
 - Text at image app generation
 - Search apps
 
-Bisitahin ang [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para makapagsimula!
+Bisitahin ang [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) upang magsimula!
 
 ## 🌱 Pagsisimula
 
 > **Mga Guro**, nagdagdag kami ng [ilang mga mungkahi](for-teachers.md) kung paano gamitin ang kurikulum na ito. Gusto naming marinig ang inyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
 
-**[Mga Nag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para sa bawat leksyon, magsimula sa pre-lecture quiz at sundan ito sa pagbabasa ng lecture material, tapusin ang iba't ibang aktibidad, at suriin ang iyong kaalaman gamit ang post-lecture quiz.
+**[Mga Mag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para sa bawat aralin, magsimula sa pre-lecture quiz at sundan ito sa pagbabasa ng lecture material, pagkumpleto ng iba't ibang aktibidad, at suriin ang iyong kaalaman gamit ang post-lecture quiz.
 
 Upang mapahusay ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kapwa mag-aaral upang magtulungan sa mga proyekto! Ang mga talakayan ay hinihikayat sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan ang aming team ng mga moderator ay magagamit upang sagutin ang iyong mga tanong.
 
-Upang higit pang mapalawak ang iyong kaalaman, lubos naming inirerekomenda ang pag-explore sa [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para sa karagdagang mga materyales sa pag-aaral.
+Upang higit pang mapalawak ang iyong edukasyon, lubos naming inirerekomenda ang pag-explore sa [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para sa karagdagang mga materyales sa pag-aaral.
 
 ### 📋 Pag-set up ng iyong environment
 
-Ang kurikulum na ito ay may development environment na handa nang gamitin! Sa pagsisimula, maaari mong piliin na patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based, walang kailangang i-install na environment_), o lokal sa iyong computer gamit ang isang text editor tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
+Ang kurikulum na ito ay may development environment na handa na! Sa pagsisimula, maaari mong piliin na patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based, walang kailangang i-install na environment_), o lokal sa iyong computer gamit ang isang text editor tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
 
 #### Gumawa ng iyong repository
-Upang madali mong ma-save ang iyong trabaho, inirerekomenda na gumawa ka ng sarili mong kopya ng repository na ito. Magagawa mo ito sa pamamagitan ng pag-click sa **Use this template** button sa itaas ng pahina. Ito ay lilikha ng bagong repository sa iyong GitHub account na may kopya ng kurikulum.
+Upang madali mong mai-save ang iyong trabaho, inirerekomenda na gumawa ka ng sarili mong kopya ng repository na ito. Maaari mo itong gawin sa pamamagitan ng pag-click sa **Use this template** button sa itaas ng pahina. Ito ay gagawa ng bagong repository sa iyong GitHub account na may kopya ng kurikulum.
 
 Sundin ang mga hakbang na ito:
 1. **I-fork ang Repository**: I-click ang "Fork" button sa kanang-itaas na bahagi ng pahinang ito.
@@ -100,17 +100,17 @@ Sundin ang mga hakbang na ito:
 
 #### Pagpapatakbo ng kurikulum sa isang Codespace
 
-Sa kopya ng repository na ginawa mo, i-click ang **Code** button at piliin ang **Open with Codespaces**. Ito ay lilikha ng bagong Codespace para sa iyo upang magtrabaho.
+Sa iyong kopya ng repository na ginawa mo, i-click ang **Code** button at piliin ang **Open with Codespaces**. Ito ay gagawa ng bagong Codespace para sa iyo upang magtrabaho.
 
 ![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.tl.png)
 
-#### Pagpapatakbo ng kurikulum nang lokal sa iyong computer
+#### Pagpapatakbo ng kurikulum lokal sa iyong computer
 
-Upang patakbuhin ang kurikulum na ito nang lokal sa iyong computer, kakailanganin mo ng text editor, browser, at command line tool. Ang aming unang leksyon, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ay magpapaliwanag sa iba't ibang opsyon para sa bawat isa sa mga tool na ito upang mapili mo kung ano ang pinakamainam para sa iyo.
+Upang patakbuhin ang kurikulum na ito lokal sa iyong computer, kakailanganin mo ng text editor, browser, at command line tool. Ang aming unang aralin, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ay magpapaliwanag sa iba't ibang opsyon para sa bawat isa sa mga tool na ito upang mapili mo kung ano ang pinakamainam para sa iyo.
 
 Ang aming rekomendasyon ay gamitin ang [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) bilang iyong editor, na mayroon ding built-in na [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Maaari mong i-download ang Visual Studio Code [dito](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
 
-1. I-clone ang iyong repository sa iyong computer. Magagawa mo ito sa pamamagitan ng pag-click sa **Code** button at pagkopya ng URL:
+1. I-clone ang iyong repository sa iyong computer. Maaari mo itong gawin sa pamamagitan ng pag-click sa **Code** button at pagkopya ng URL:
 
     [CodeSpace](./images/createcodespace.png)
 
@@ -120,121 +120,139 @@ Ang aming rekomendasyon ay gamitin ang [Visual Studio Code](https://code.visuals
     git clone <your-repository-url>
     ```
 
-2. Buksan ang folder sa Visual Studio Code. Magagawa mo ito sa pamamagitan ng pag-click sa **File** > **Open Folder** at piliin ang folder na kinopya mo.
+2. Buksan ang folder sa Visual Studio Code. Maaari mo itong gawin sa pamamagitan ng pag-click sa **File** > **Open Folder** at piliin ang folder na kinopya mo.
 
 > Mga inirerekomendang Visual Studio Code extensions:
 >
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para ma-preview ang mga HTML page sa loob ng Visual Studio Code  
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para makatulong sa mas mabilis na pagsulat ng code  
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para ma-preview ang mga HTML page sa loob ng Visual Studio Code
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para makatulong sa mas mabilis na paggawa ng code
 
 ## 📂 Bawat aralin ay naglalaman ng:
 
-- opsyonal na sketchnote  
-- opsyonal na karagdagang video  
-- paunang pagsusulit bago ang aralin  
-- nakasulat na aralin  
-- para sa mga araling nakabase sa proyekto, mga gabay sa hakbang-hakbang kung paano buuin ang proyekto  
-- pagsusuri ng kaalaman  
-- isang hamon  
-- karagdagang babasahin  
-- takdang-aralin  
-- [pagsusulit pagkatapos ng aralin](https://ff-quizzes.netlify.app/web/)  
+- opsyonal na sketchnote
+- opsyonal na karagdagang video
+- warmup quiz bago ang aralin
+- nakasulat na aralin
+- para sa mga araling nakabase sa proyekto, step-by-step na gabay kung paano buuin ang proyekto
+- pagsusuri ng kaalaman
+- isang hamon
+- karagdagang babasahin
+- takdang-aralin
+- [quiz pagkatapos ng aralin](https://ff-quizzes.netlify.app/web/)
 
-> **Tungkol sa mga pagsusulit**: Ang lahat ng pagsusulit ay nasa folder ng Quiz-app, kabuuang 48 na pagsusulit na may tig-tatlong tanong bawat isa. Makikita ang mga ito [dito](https://ff-quizzes.netlify.app/web/). Ang quiz app ay maaaring patakbuhin nang lokal o i-deploy sa Azure; sundin ang mga tagubilin sa folder na `quiz-app`.  
+> **Tungkol sa mga quiz**: Ang lahat ng quiz ay nasa folder ng Quiz-app, kabuuang 48 quiz na may tig-tatlong tanong bawat isa. Makikita ang mga ito [dito](https://ff-quizzes.netlify.app/web/) at maaaring patakbuhin ang quiz app nang lokal o i-deploy sa Azure; sundin ang mga tagubilin sa folder na `quiz-app`.
 
-## 🗃️ Mga Aralin  
+## 🗃️ Mga Aralin
 
-|     |                       Pangalan ng Proyekto                       |                            Mga Konseptong Itinuturo                             | Mga Layunin sa Pagkatuto                                                                                                                 |                                                         Nakakabit na Aralin                                                          |         May-akda          |  
-| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |  
-| 01  |                     Pagsisimula                      |           Panimula sa Programming at Mga Kasangkapan sa Trabaho           | Matutunan ang mga pangunahing pundasyon ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer sa kanilang trabaho | [Panimula sa Programming Languages at Mga Kasangkapan sa Trabaho](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |  
-| 02  |                     Pagsisimula                      |             Mga Pangunahing Kaalaman sa GitHub, kabilang ang pakikipagtulungan sa isang team             | Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base                                                    |                            [Panimula sa GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |  
-| 03  |                     Pagsisimula                      |                             Accessibility                              | Matutunan ang mga pangunahing kaalaman sa web accessibility                                                                                               |                       [Mga Pangunahing Kaalaman sa Accessibility](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |  
-| 04  |                        Mga Pangunahing Kaalaman sa JS                         |                         Mga Uri ng Data sa JavaScript                          | Ang mga pangunahing kaalaman sa mga uri ng data sa JavaScript                                                                                                 |                                       [Mga Uri ng Data](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |  
-| 05  |                        Mga Pangunahing Kaalaman sa JS                         |                         Mga Function at Method                          | Matutunan ang tungkol sa mga function at method para pamahalaan ang daloy ng lohika ng isang application                                                             |                              [Mga Function at Method](./2-js-basics/2-functions-methods/README.md)                               | Jasmine at Christopher |  
-| 06  |                        Mga Pangunahing Kaalaman sa JS                         |                        Paggawa ng Desisyon gamit ang JS                        | Matutunan kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon                                                           |                                 [Paggawa ng Desisyon](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |  
-| 07  |                        Mga Pangunahing Kaalaman sa JS                         |                            Mga Array at Loop                            | Gumamit ng data gamit ang mga array at loop sa JavaScript                                                                                 |                                   [Mga Array at Loop](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |  
-| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML sa Praktika                            | Buuin ang HTML para gumawa ng isang online terrarium, na nakatuon sa paggawa ng layout                                                         |                                 [Panimula sa HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |  
-| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS sa Praktika                             | Buuin ang CSS para i-style ang online terrarium, na nakatuon sa mga pangunahing kaalaman sa CSS kabilang ang paggawa ng page na responsive                     |                                  [Panimula sa CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |  
-| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 Mga JavaScript Closures, DOM manipulation                  | Buuin ang JavaScript para gawing drag/drop interface ang terrarium, na nakatuon sa closures at DOM manipulation             |                  [Mga JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |  
-| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Gumawa ng Typing Game                           | Matutunan kung paano gamitin ang mga keyboard event para magpatakbo ng lohika ng iyong JavaScript app                                                          |                                [Event-Driven Programming](./4-typing-game/typing-game/README.md)                                |       Christopher       |  
-| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Paggawa gamit ang Mga Browser                          | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano i-scaffold ang mga unang elemento ng isang browser extension                               |                               [Tungkol sa Mga Browser](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |  
-| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggawa ng form, pagtawag sa API at pag-iimbak ng mga variable sa local storage | Buuin ang mga elemento ng JavaScript ng iyong browser extension para tumawag sa API gamit ang mga variable na nakaimbak sa local storage                      |                [Mga API, Form, at Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |  
-| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          Mga proseso sa background ng browser, web performance          | Gamitin ang mga proseso sa background ng browser para pamahalaan ang icon ng extension; matutunan ang tungkol sa web performance at ilang mga optimization para mapabuti   |             [Mga Gawain sa Background at Performance](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |  
-| 15  |           [Space Game](./6-space-game/solution/README.md)           |             Mas Advanced na Paggawa ng Laro gamit ang JavaScript             | Matutunan ang tungkol sa Inheritance gamit ang parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro              |                      [Panimula sa Advanced na Paggawa ng Laro](./6-space-game/1-introduction/README.md)                       |          Chris          |  
-| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Pag-drawing sa canvas                            | Matutunan ang tungkol sa Canvas API, na ginagamit para mag-drawing ng mga elemento sa screen                                                                       |                                [Pag-drawing sa Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |  
-| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Paggalaw ng mga elemento sa screen                    | Tuklasin kung paano makakakuha ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API                                            |                           [Paggalaw ng mga Elemento](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |  
-| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Pagtuklas ng Banggaan                           | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses at magbigay ng cooldown function para matiyak ang performance ng laro    |                              [Pagtuklas ng Banggaan](./6-space-game/4-collision-detection/README.md)                              |          Chris          |  
-| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Pagpapanatili ng Score                              | Gumawa ng mga kalkulasyon sa matematika batay sa status at performance ng laro                                                                |                                    [Pagpapanatili ng Score](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |  
-| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Pagtatapos at muling pagsisimula ng laro                     | Matutunan ang tungkol sa pagtatapos at muling pagsisimula ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga halaga ng variable                              |                                [Kondisyon ng Pagtatapos](./6-space-game/6-end-condition/README.md)                                 |          Chris          |  
-| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 Mga HTML Template at Route sa isang Web App                 | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage website gamit ang routing at HTML templates                             |                            [Mga HTML Template at Route](./7-bank-project/1-template-route/README.md)                             |          Yohan          |  
-| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Gumawa ng Login at Registration Form                   | Matutunan ang tungkol sa paggawa ng mga form at paghawak ng mga validation routine                                                                          |                                           [Mga Form](./7-bank-project/2-forms/README.md)                                           |          Yohan          |  
-| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Mga Paraan ng Pagkuha at Paggamit ng Data                   | Paano dumadaloy ang data papasok at palabas ng iyong app, paano ito kunin, itago, at itapon                                                 |                                            [Data](./7-bank-project/3-data/README.md)                                            |          Yohan          |  
-| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Mga Konsepto ng State Management                      | Matutunan kung paano pinapanatili ng iyong app ang estado at kung paano ito pamahalaan sa programmatic na paraan                                                              |                                [State Management](./7-bank-project/4-state-management/README.md)                                |          Yohan          |  
-| 25 | [Browser/VScode Code](../../8-code-editor) | Paggawa gamit ang VScode | Matutunan kung paano gamitin ang code editor| [Gamitin ang VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |  
-| 26 | [AI Assistants](./9-chat-project/README.md) | Paggawa gamit ang AI | Matutunan kung paano gumawa ng sarili mong AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |  
+|     |                       Pangalan ng Proyekto                       |                            Mga Konseptong Itinuturo                             | Mga Layunin sa Pagkatuto                                                                                                                 |                                                         Nakakabit na Aralin                                                          |         May-akda          |
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
+| 01  |                     Pagsisimula                      |           Panimula sa Programming at Mga Kasangkapan sa Trabaho           | Matutunan ang mga pangunahing pundasyon ng karamihan sa mga programming language at ang software na tumutulong sa mga propesyonal na developer sa kanilang trabaho | [Panimula sa Programming Languages at Mga Kasangkapan sa Trabaho](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+| 02  |                     Pagsisimula                      |             Mga Pangunahing Kaalaman sa GitHub, kabilang ang pakikipagtulungan sa isang team             | Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base                                                    |                            [Panimula sa GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
+| 03  |                     Pagsisimula                      |                             Accessibility                              | Matutunan ang mga pangunahing kaalaman sa web accessibility                                                                                               |                       [Mga Pangunahing Kaalaman sa Accessibility](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
+| 04  |                        Mga Pangunahing Kaalaman sa JS                         |                         Mga Uri ng Data sa JavaScript                          | Ang mga pangunahing kaalaman sa mga uri ng data sa JavaScript                                                                                                 |                                       [Mga Uri ng Data](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+| 05  |                        Mga Pangunahing Kaalaman sa JS                         |                         Mga Function at Method                          | Matutunan ang tungkol sa mga function at method para pamahalaan ang daloy ng lohika ng isang application                                                             |                              [Mga Function at Method](./2-js-basics/2-functions-methods/README.md)                               | Jasmine at Christopher |
+| 06  |                        Mga Pangunahing Kaalaman sa JS                         |                        Paggawa ng Desisyon gamit ang JS                        | Matutunan kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon                                                           |                                 [Paggawa ng Desisyon](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
+| 07  |                        Mga Pangunahing Kaalaman sa JS                         |                            Mga Array at Loop                            | Paggamit ng data gamit ang mga array at loop sa JavaScript                                                                                 |                                   [Mga Array at Loop](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML sa Praktika                            | Bumuo ng HTML para lumikha ng isang online terrarium, na nakatuon sa paggawa ng layout                                                         |                                 [Panimula sa HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS sa Praktika                             | Bumuo ng CSS para i-style ang online terrarium, na nakatuon sa mga pangunahing kaalaman sa CSS kabilang ang paggawa ng responsive na pahina                     |                                  [Panimula sa CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 Mga JavaScript Closures, Manipulasyon ng DOM                  | Bumuo ng JavaScript para gawing drag/drop interface ang terrarium, na nakatuon sa closures at manipulasyon ng DOM             |                  [Mga JavaScript Closures, Manipulasyon ng DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          Bumuo ng Typing Game                           | Matutunan kung paano gamitin ang mga keyboard event para patakbuhin ang lohika ng iyong JavaScript app                                                          |                                [Event-Driven Programming](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         Paggamit ng Mga Browser                          | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano i-scaffold ang mga unang elemento ng isang browser extension                               |                               [Tungkol sa Mga Browser](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | Pagbuo ng form, pagtawag sa API at pag-iimbak ng mga variable sa local storage | Bumuo ng mga elemento ng JavaScript ng iyong browser extension para tumawag sa API gamit ang mga variable na nakaimbak sa local storage                      |                [Mga API, Form, at Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          Mga background process sa browser, pagganap ng web          | Gamitin ang mga background process ng browser para pamahalaan ang icon ng extension; matutunan ang tungkol sa pagganap ng web at ilang mga optimization upang mapabuti ito   |             [Mga Background Task at Pagganap](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             Mas Advanced na Pagbuo ng Laro gamit ang JavaScript             | Matutunan ang tungkol sa Inheritance gamit ang parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda sa pagbuo ng laro              |                      [Panimula sa Advanced na Pagbuo ng Laro](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           Pag-drawing sa canvas                            | Matutunan ang tungkol sa Canvas API, na ginagamit para mag-drawing ng mga elemento sa screen                                                                       |                                [Pag-drawing sa Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   Paggalaw ng mga elemento sa screen                    | Tuklasin kung paano makakakuha ng motion ang mga elemento gamit ang cartesian coordinates at ang Canvas API                                            |                           [Paggalaw ng mga Elemento](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          Pagtukoy ng banggaan                           | Gawin ang mga elemento na magbanggaan at mag-react sa isa't isa gamit ang keypresses at magbigay ng cooldown function para matiyak ang pagganap ng laro    |                              [Pagtukoy ng Banggaan](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             Pagpapanatili ng score                              | Gumawa ng mga kalkulasyon sa matematika batay sa status at pagganap ng laro                                                                |                                    [Pagpapanatili ng Score](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     Pagtatapos at pag-restart ng laro                     | Matutunan ang tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga halaga ng variable                              |                                [Kondisyon ng Pagtatapos](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 Mga HTML Template at Route sa isang Web App                 | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage website gamit ang routing at HTML template                             |                            [Mga HTML Template at Route](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  Pagbuo ng Login at Registration Form                   | Matutunan ang tungkol sa pagbuo ng mga form at paghawak ng mga validation routine                                                                          |                                           [Mga Form](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   Mga Pamamaraan ng Pagkuha at Paggamit ng Data                   | Paano dumadaloy ang data papasok at palabas ng iyong app, paano ito kunin, iimbak, at itapon                                                 |                                            [Data](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      Mga Konsepto ng State Management                      | Matutunan kung paano pinapanatili ng iyong app ang estado nito at kung paano ito pamahalaan sa pamamagitan ng programa                                                              |                                [State Management](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
+| 25 | [Browser/VScode Code](../../8-code-editor) | Paggamit ng VScode | Matutunan kung paano gamitin ang code editor| [Gamitin ang VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
+| 26 | [AI Assistants](./9-chat-project/README.md) | Paggamit ng AI | Matutunan kung paano bumuo ng sarili mong AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
 
-## 🏫 Pedagohiya  
+## 🏫 Pedagohiya
 
-Ang aming kurikulum ay dinisenyo gamit ang dalawang pangunahing prinsipyo ng pedagohiya:  
-* pagkatuto na nakabase sa proyekto  
-* madalas na pagsusulit  
+Ang aming kurikulum ay idinisenyo gamit ang dalawang pangunahing prinsipyo ng pedagohiya:
+* pagkatuto na nakabase sa proyekto
+* madalas na mga quiz
 
-Itinuturo ng programa ang mga pangunahing kaalaman sa JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kasangkapan at teknik na ginagamit ng mga web developer sa kasalukuyan. Magkakaroon ng pagkakataon ang mga mag-aaral na magkaroon ng hands-on na karanasan sa pamamagitan ng paggawa ng typing game, virtual terrarium, eco-friendly browser extension, space-invader-style na laro, at banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ng matibay na kaalaman ang mga mag-aaral sa web development.  
+Ang programa ay nagtuturo ng mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kasangkapan at teknik na ginagamit ng mga web developer ngayon. Magkakaroon ng pagkakataon ang mga estudyante na magkaroon ng hands-on na karanasan sa pamamagitan ng pagbuo ng typing game, virtual terrarium, eco-friendly browser extension, space-invader-style na laro, at banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na kaalaman sa web development.
 
-> 🎓 Maaari mong kunin ang ilang unang aralin sa kurikulum na ito bilang isang [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn!  
+> 🎓 Maaari mong kunin ang unang ilang aralin sa kurikulum na ito bilang isang [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn!
 
-Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ang proseso ng pag-aaral ay nagiging mas kapana-panabik para sa mga mag-aaral at mas napapanatili ang mga konsepto. Nagsulat din kami ng ilang panimulang aralin sa mga pangunahing kaalaman sa JavaScript upang ipakilala ang mga konsepto, na sinamahan ng isang video mula sa koleksyon ng mga tutorial na video na "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", na ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito.  
+Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ang proseso ay nagiging mas nakakaengganyo para sa mga estudyante at ang pagkatuto ng mga konsepto ay mas mapapalakas. Nagsulat din kami ng ilang mga panimulang aralin sa mga pangunahing kaalaman sa JavaScript upang ipakilala ang mga konsepto, na sinamahan ng isang video mula sa "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" na koleksyon ng mga video tutorial, ang ilan sa mga may-akda nito ay nag-ambag sa kurikulum na ito.
 
-Bukod dito, ang isang mababang-panganib na pagsusulit bago ang klase ay nagtatakda ng intensyon ng mag-aaral patungo sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay higit pang nagpapalakas ng retention. Ang kurikulum na ito ay dinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi lamang. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12-linggong cycle.  
+Bukod dito, ang isang mababang-stakes na quiz bago ang klase ay nagtatakda ng intensyon ng estudyante patungo sa pag-aaral ng isang paksa, habang ang pangalawang quiz pagkatapos ng klase ay mas nagpapalakas ng retention. Ang kurikulum na ito ay idinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi lamang. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12-linggong siklo.
 
-Bagama't sinadya naming iwasan ang pagpapakilala ng mga JavaScript framework upang magtuon sa mga pangunahing kasanayan na kinakailangan bilang isang web developer bago magpatibay ng framework, isang magandang susunod na hakbang pagkatapos makumpleto ang kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".  
+Habang sinadya naming iwasan ang pagpapakilala ng mga JavaScript framework upang magtuon sa mga pangunahing kasanayan na kinakailangan bilang isang web developer bago mag-adopt ng framework, isang magandang susunod na hakbang pagkatapos makumpleto ang kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
 
-> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga alituntunin. Malugod naming tinatanggap ang inyong mga makabuluhang feedback!  
+> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga alituntunin. Malugod naming tinatanggap ang inyong mga nakabubuong feedback!
 
-## 🧭 Offline na access  
 
-Maaari mong patakbuhin ang dokumentasyong ito offline gamit ang [Docsify](https://docsify.js.org/#/). I-fork ang repo na ito, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos sa root folder ng repo na ito, i-type ang `docsify serve`. Ang website ay maihahatid sa port 3000 sa iyong localhost: `localhost:3000`.  
+## 🧭 Offline na access
 
-## 📘 PDF  
+Maaari mong patakbuhin ang dokumentasyong ito offline gamit ang [Docsify](https://docsify.js.org/#/). I-fork ang repo na ito, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos sa root folder ng repo na ito, i-type ang `docsify serve`. Ang website ay magsisilbi sa port 3000 sa iyong localhost: `localhost:3000`.
 
-Ang PDF ng lahat ng mga aralin ay makikita [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).  
+## 📘 PDF
 
-## 🎒 Iba Pang Kurso  
+Ang PDF ng lahat ng mga aralin ay makikita [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
 
-Ang aming team ay gumagawa ng iba pang mga kurso! Tingnan:  
 
-- [MCP for Beginners](https://aka.ms/mcp-for-beginners)  
-- [Edge AI for Beginners](https://aka.ms/edgeai-for-beginners)  
-- [AI Agents for Beginners](https://aka.ms/ai-agents-beginners)  
-- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)  
-- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)  
-- [Generative AI gamit ang Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
-- [AI para sa mga Baguhan](https://aka.ms/ai-beginners)
-- [Data Science para sa mga Baguhan](https://aka.ms/datascience-beginners)
-- [ML para sa mga Baguhan](https://aka.ms/ml-beginners)
-- [Cybersecurity para sa mga Baguhan](https://github.com/microsoft/Security-101)
-- [Web Dev para sa mga Baguhan](https://aka.ms/webdev-beginners)
-- [IoT para sa mga Baguhan](https://aka.ms/iot-beginners)
-- [Pag-develop ng XR para sa mga Baguhan](https://github.com/microsoft/xr-development-for-beginners)
-- [Pag-master ng GitHub Copilot para sa Agentic na paggamit](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
-- [Pag-master ng GitHub Copilot para sa mga C#/.NET Developer](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
-- [Piliin ang Iyong Sariling Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
+## 🎒 Iba Pang Kurso
 
-## Pagkuha ng Tulong
+Ang aming team ay gumagawa ng iba pang mga kurso! Tingnan:
 
-Kung ikaw ay nahihirapan o may mga tanong tungkol sa paggawa ng AI apps, sumali sa:
+### Azure / Edge / MCP / Agents
+[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![Edge AI para sa mga Baguhan](https://img.shields.io/badge/Edge%20AI%20para%20sa%20mga%20Baguhan-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![MCP para sa mga Baguhan](https://img.shields.io/badge/MCP%20para%20sa%20mga%20Baguhan-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![AI Agents para sa mga Baguhan](https://img.shields.io/badge/AI%20Agents%20para%20sa%20mga%20Baguhan-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)  
 
-[![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)
+---
+
+### Serye ng Generative AI  
+[![Generative AI para sa mga Baguhan](https://img.shields.io/badge/Generative%20AI%20para%20sa%20mga%20Baguhan-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)  
+[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)  
+[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### Pangunahing Pag-aaral  
+[![ML para sa mga Baguhan](https://img.shields.io/badge/ML%20para%20sa%20mga%20Baguhan-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)  
+[![Data Science para sa mga Baguhan](https://img.shields.io/badge/Data%20Science%20para%20sa%20mga%20Baguhan-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)  
+[![AI para sa mga Baguhan](https://img.shields.io/badge/AI%20para%20sa%20mga%20Baguhan-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)  
+[![Cybersecurity para sa mga Baguhan](https://img.shields.io/badge/Cybersecurity%20para%20sa%20mga%20Baguhan-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)  
+[![Web Dev para sa mga Baguhan](https://img.shields.io/badge/Web%20Dev%20para%20sa%20mga%20Baguhan-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)  
+[![IoT para sa mga Baguhan](https://img.shields.io/badge/IoT%20para%20sa%20mga%20Baguhan-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)  
+[![XR Development para sa mga Baguhan](https://img.shields.io/badge/XR%20Development%20para%20sa%20mga%20Baguhan-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### Serye ng Copilot  
+[![Copilot para sa AI Paired Programming](https://img.shields.io/badge/Copilot%20para%20sa%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)  
+[![Copilot para sa C#/.NET](https://img.shields.io/badge/Copilot%20para%20sa%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)  
+[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)  
+<!-- CO-OP TRANSLATOR OTHER COURSES END -->
+
+## Pagkuha ng Tulong  
+
+Kung ikaw ay nahihirapan o may mga tanong tungkol sa paggawa ng mga AI apps, sumali sa:  
+
+[![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)  
 
-Kung mayroon kang feedback sa produkto o mga error habang gumagawa, bisitahin:
+Kung ikaw ay may feedback sa produkto o nakakaranas ng mga error habang gumagawa, bisitahin:  
 
-[![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
+[![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)  
 
-## Lisensya
+## Lisensya  
 
-Ang repository na ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) file para sa karagdagang impormasyon.
+Ang repository na ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) file para sa karagdagang impormasyon.  
 
 ---
 
 **Paunawa**:  
-Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
+Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
\ No newline at end of file
diff --git a/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index 1f28abc259..7e0b0ac064 100644
--- a/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -1,73 +1,139 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3e0da5eb9b275fe3cb431033c1413ec2",
-  "translation_date": "2025-10-22T14:39:18+00:00",
+  "original_hash": "d45ddcc54eb9232a76d08328b09d792e",
+  "translation_date": "2025-11-03T12:59:41+00:00",
   "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
   "language_code": "ur"
 }
 -->
 # پروگرامنگ زبانوں اور جدید ڈیولپر ٹولز کا تعارف
 
-ہیلو، مستقبل کے ڈیولپر! 👋 کیا میں آپ کو کچھ بتا سکتا ہوں جو مجھے ہر روز حیران کر دیتا ہے؟ آپ ابھی یہ دریافت کرنے والے ہیں کہ پروگرامنگ صرف کمپیوٹرز کے بارے میں نہیں ہے – یہ آپ کے سب سے حیرت انگیز خیالات کو حقیقت میں بدلنے کی طاقت ہے!
+ہیلو، مستقبل کے ڈیولپر! 👋 کیا میں آپ کو کچھ بتا سکتا ہوں جو مجھے ہر دن حیران کر دیتا ہے؟ آپ یہ دریافت کرنے والے ہیں کہ پروگرامنگ صرف کمپیوٹرز کے بارے میں نہیں ہے – یہ آپ کے سب سے منفرد خیالات کو حقیقت میں بدلنے کی طاقت ہے!
 
-کیا آپ کو وہ لمحہ یاد ہے جب آپ اپنی پسندیدہ ایپ استعمال کر رہے ہوتے ہیں اور سب کچھ بالکل ٹھیک کام کرتا ہے؟ جب آپ ایک بٹن پر کلک کرتے ہیں اور کچھ جادوئی ہوتا ہے جو آپ کو "واہ، انہوں نے یہ کیسے کیا؟" کہنے پر مجبور کرتا ہے؟ تو، کوئی آپ جیسا – شاید رات کے 2 بجے اپنی پسندیدہ کافی شاپ میں بیٹھا ہوا، تیسرے ایسپریسو کے ساتھ – وہ کوڈ لکھ رہا تھا جس نے وہ جادو تخلیق کیا۔ اور یہاں وہ بات ہے جو آپ کے دماغ کو حیران کر دے گی: اس سبق کے اختتام تک، آپ نہ صرف یہ سمجھ جائیں گے کہ انہوں نے یہ کیسے کیا، بلکہ آپ خود اسے آزمانے کے لیے بے چین ہوں گے!
+آپ جانتے ہیں وہ لمحہ جب آپ اپنی پسندیدہ ایپ استعمال کر رہے ہوتے ہیں اور سب کچھ بالکل ٹھیک کام کرتا ہے؟ جب آپ ایک بٹن پر کلک کرتے ہیں اور کچھ جادوئی ہوتا ہے جو آپ کو "واہ، انہوں نے یہ کیسے کیا؟" کہنے پر مجبور کر دیتا ہے؟ تو، کوئی آپ جیسا – شاید رات کے 2 بجے اپنی پسندیدہ کافی شاپ میں بیٹھا ہوا، تیسرا ایسپریسو پیتے ہوئے – نے وہ کوڈ لکھا تھا جس نے وہ جادو تخلیق کیا۔ اور یہاں وہ بات ہے جو آپ کو حیران کر دے گی: اس سبق کے اختتام تک، آپ نہ صرف یہ سمجھیں گے کہ انہوں نے یہ کیسے کیا، بلکہ آپ خود اسے آزمانے کے لیے بے چین ہوں گے!
 
-دیکھیں، اگر پروگرامنگ ابھی آپ کو خوفناک لگ رہی ہے تو میں بالکل سمجھ سکتا ہوں۔ جب میں نے پہلی بار شروع کیا، تو مجھے واقعی لگا کہ آپ کو کسی قسم کا ریاضی کا ماہر ہونا چاہیے یا پانچ سال کی عمر سے کوڈنگ کرنی چاہیے۔ لیکن یہاں وہ بات ہے جس نے میری سوچ کو مکمل طور پر بدل دیا: پروگرامنگ بالکل ایک نئی زبان میں گفتگو کرنا سیکھنے جیسا ہے۔ آپ "ہیلو" اور "شکریہ" سے شروع کرتے ہیں، پھر کافی کا آرڈر دینے تک پہنچتے ہیں، اور اس سے پہلے کہ آپ کو پتہ چلے، آپ گہرے فلسفیانہ مباحثے کر رہے ہوتے ہیں! بس اس معاملے میں، آپ کمپیوٹرز کے ساتھ گفتگو کر رہے ہوتے ہیں، اور ایمانداری سے؟ وہ سب سے زیادہ صبر کرنے والے گفتگو کے ساتھی ہیں جو آپ کو کبھی ملیں گے – وہ آپ کی غلطیوں پر کبھی فیصلہ نہیں کرتے اور ہمیشہ دوبارہ کوشش کرنے کے لیے تیار رہتے ہیں!
+دیکھیں، اگر آپ کو ابھی پروگرامنگ مشکل لگ رہی ہے تو میں بالکل سمجھ سکتا ہوں۔ جب میں نے پہلی بار شروع کیا، تو مجھے واقعی لگا کہ آپ کو کوئی ریاضی کا ماہر ہونا چاہیے یا پانچ سال کی عمر سے کوڈنگ کرنی چاہیے۔ لیکن یہاں وہ بات ہے جس نے میری سوچ کو مکمل طور پر بدل دیا: پروگرامنگ بالکل ایک نئی زبان میں گفتگو کرنا سیکھنے جیسا ہے۔ آپ "ہیلو" اور "شکریہ" سے شروع کرتے ہیں، پھر کافی آرڈر کرنے تک پہنچتے ہیں، اور اس سے پہلے کہ آپ کو پتہ چلے، آپ گہرے فلسفیانہ مباحثے کر رہے ہوتے ہیں! لیکن اس معاملے میں، آپ کمپیوٹرز کے ساتھ گفتگو کر رہے ہیں، اور ایمانداری سے؟ وہ سب سے زیادہ صبر کرنے والے گفتگو کے ساتھی ہیں – وہ کبھی آپ کی غلطیوں پر فیصلہ نہیں کرتے اور ہمیشہ دوبارہ کوشش کرنے کے لیے تیار رہتے ہیں!
 
 آج، ہم ان حیرت انگیز ٹولز کو دریافت کرنے جا رہے ہیں جو جدید ویب ڈیولپمنٹ کو نہ صرف ممکن بناتے ہیں بلکہ واقعی دلچسپ بناتے ہیں۔ میں ان ایڈیٹرز، براؤزرز، اور ورک فلو کے بارے میں بات کر رہا ہوں جو نیٹ فلکس، اسپاٹیفائی، اور آپ کے پسندیدہ انڈی ایپ اسٹوڈیو کے ڈیولپرز ہر روز استعمال کرتے ہیں۔ اور یہاں وہ حصہ ہے جو آپ کو خوشی سے جھومنے پر مجبور کر دے گا: ان میں سے زیادہ تر پروفیشنل گریڈ، انڈسٹری اسٹینڈرڈ ٹولز مکمل طور پر مفت ہیں!
 
 ![پروگرامنگ کا تعارف](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ur.png)
 > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
 
+```mermaid
+journey
+    title Your Programming Journey Today
+    section Discover
+      What is Programming: 5: You
+      Programming Languages: 4: You
+      Tools Overview: 5: You
+    section Explore
+      Code Editors: 4: You
+      Browsers & DevTools: 5: You
+      Command Line: 3: You
+    section Practice
+      Language Detective: 4: You
+      Tool Exploration: 5: You
+      Community Connection: 5: You
+```
+
 ## دیکھتے ہیں کہ آپ پہلے سے کیا جانتے ہیں!
 
-تفریحی چیزوں میں کودنے سے پہلے، میں جاننا چاہتا ہوں – آپ اس پروگرامنگ دنیا کے بارے میں پہلے سے کیا جانتے ہیں؟ اور سنیں، اگر آپ ان سوالات کو دیکھ رہے ہیں اور سوچ رہے ہیں "مجھے ان میں سے کسی کے بارے میں بالکل بھی کوئی اندازہ نہیں ہے"، تو یہ نہ صرف ٹھیک ہے بلکہ بہترین ہے! اس کا مطلب ہے کہ آپ بالکل صحیح جگہ پر ہیں۔ اس کوئز کو ورزش سے پہلے کھینچنے جیسا سمجھیں – ہم صرف ان دماغی عضلات کو گرم کر رہے ہیں!
+تفریحی چیزوں میں کودنے سے پہلے، مجھے تجسس ہے – آپ اس پروگرامنگ دنیا کے بارے میں پہلے سے کیا جانتے ہیں؟ اور سنیں، اگر آپ ان سوالات کو دیکھ رہے ہیں اور سوچ رہے ہیں "مجھے ان میں سے کسی کے بارے میں بالکل کوئی اندازہ نہیں ہے"، تو یہ نہ صرف ٹھیک ہے بلکہ بہترین ہے! اس کا مطلب ہے کہ آپ بالکل صحیح جگہ پر ہیں۔ اس کوئز کو ورزش سے پہلے کھینچنے جیسا سمجھیں – ہم صرف ان دماغی عضلات کو گرم کر رہے ہیں!
 
-[سبق سے پہلے کا کوئز لیں](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+[پری سبق کوئز لیں](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
 
 ## وہ مہم جو ہم مل کر شروع کرنے والے ہیں
 
-ٹھیک ہے، میں واقعی اس بارے میں پرجوش ہوں کہ ہم آج کیا دریافت کرنے والے ہیں! سنجیدگی سے، میں آپ کا چہرہ دیکھنا چاہتا ہوں جب ان میں سے کچھ تصورات آپ کو سمجھ آئیں گے۔ یہ ہے وہ حیرت انگیز سفر جو ہم مل کر کرنے والے ہیں:
+ٹھیک ہے، میں واقعی اس بارے میں پرجوش ہوں کہ ہم آج کیا دریافت کرنے والے ہیں! سنجیدگی سے، میں آپ کا چہرہ دیکھنا چاہتا ہوں جب ان میں سے کچھ تصورات واضح ہوں۔ یہ ہے وہ ناقابل یقین سفر جو ہم مل کر کر رہے ہیں:
 
-- **پروگرامنگ اصل میں کیا ہے (اور یہ کیوں سب سے زبردست چیز ہے!)** – ہم یہ دریافت کریں گے کہ کوڈ واقعی وہ پوشیدہ جادو ہے جو آپ کے ارد گرد ہر چیز کو طاقت دیتا ہے، اس الارم سے جو کسی طرح جانتا ہے کہ پیر کی صبح ہے، اس الگورتھم تک جو آپ کے نیٹ فلکس کی سفارشات کو بالکل درست کرتا ہے۔
-- **پروگرامنگ زبانیں اور ان کی حیرت انگیز شخصیات** – تصور کریں کہ آپ ایک پارٹی میں داخل ہو رہے ہیں جہاں ہر شخص کے پاس مسائل کو حل کرنے کے مکمل طور پر مختلف سپر پاورز ہیں۔ پروگرامنگ زبانوں کی دنیا ایسی ہی ہے، اور آپ انہیں ملنے میں مزہ کریں گے!
-- **وہ بنیادی اجزاء جو ڈیجیٹل جادو کو ممکن بناتے ہیں** – انہیں حتمی تخلیقی LEGO سیٹ سمجھیں۔ ایک بار جب آپ سمجھ جائیں کہ یہ ٹکڑے کیسے ایک دوسرے کے ساتھ جڑتے ہیں، تو آپ کو احساس ہوگا کہ آپ لفظی طور پر وہ سب کچھ بنا سکتے ہیں جو آپ کا تخیل خواب دیکھتا ہے۔
-- **پروفیشنل ٹولز جو آپ کو ایسا محسوس کریں گے جیسے آپ کو جادوگر کی چھڑی دی گئی ہو** – میں یہاں ڈرامائی نہیں ہو رہا – یہ ٹولز واقعی آپ کو ایسا محسوس کریں گے جیسے آپ کے پاس سپر پاورز ہیں، اور سب سے اچھی بات؟ یہ وہی ہیں جو پروفیشنل استعمال کرتے ہیں!
+- **پروگرامنگ اصل میں کیا ہے (اور یہ سب سے زبردست چیز کیوں ہے!)** – ہم یہ دریافت کریں گے کہ کوڈ واقعی وہ پوشیدہ جادو ہے جو آپ کے ارد گرد ہر چیز کو طاقت دیتا ہے، اس الارم سے جو کسی طرح جانتا ہے کہ پیر کی صبح ہے، اس الگورتھم تک جو آپ کے نیٹ فلکس کی سفارشات کو بالکل ترتیب دیتا ہے۔
+- **پروگرامنگ زبانیں اور ان کی حیرت انگیز شخصیات** – تصور کریں کہ آپ ایک پارٹی میں داخل ہو رہے ہیں جہاں ہر شخص کے پاس مسائل کو حل کرنے کے مکمل طور پر مختلف سپر پاورز ہیں۔ پروگرامنگ زبانوں کی دنیا ایسی ہی ہے، اور آپ انہیں ملنے سے محبت کریں گے!
+- **وہ بنیادی تعمیراتی بلاکس جو ڈیجیٹل جادو کو ممکن بناتے ہیں** – انہیں حتمی تخلیقی LEGO سیٹ سمجھیں۔ ایک بار جب آپ سمجھ جائیں کہ یہ ٹکڑے کیسے ایک دوسرے کے ساتھ جڑتے ہیں، تو آپ کو احساس ہوگا کہ آپ لفظی طور پر وہ سب کچھ بنا سکتے ہیں جو آپ کا تخیل خواب دیکھتا ہے۔
+- **پروفیشنل ٹولز جو آپ کو ایسا محسوس کرائیں گے جیسے آپ کو جادوگر کی چھڑی دی گئی ہو** – میں یہاں ڈرامائی نہیں ہو رہا – یہ ٹولز واقعی آپ کو ایسا محسوس کرائیں گے جیسے آپ کے پاس سپر پاورز ہیں، اور سب سے اچھی بات؟ یہ وہی ہیں جو پروفیشنل استعمال کرتے ہیں!
 
-> 💡 **یہاں بات یہ ہے**: آج سب کچھ یاد رکھنے کی کوشش بھی نہ کریں! ابھی، میں صرف یہ چاہتا ہوں کہ آپ اس بات کے بارے میں جوش محسوس کریں کہ کیا ممکن ہے۔ تفصیلات قدرتی طور پر چپک جائیں گی جب ہم مل کر مشق کریں گے – یہی حقیقی سیکھنے کا طریقہ ہے!
+> 💡 **یہاں بات یہ ہے**: آج سب کچھ یاد رکھنے کی کوشش بھی نہ کریں! ابھی، میں صرف چاہتا ہوں کہ آپ اس بات کے بارے میں جوش محسوس کریں کہ کیا ممکن ہے۔ تفصیلات قدرتی طور پر چپک جائیں گی جب ہم مل کر مشق کریں گے – یہی حقیقی سیکھنے کا طریقہ ہے!
 
 > آپ یہ سبق [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) پر لے سکتے ہیں!
 
-## تو پروگرامنگ اصل میں *ہے* کیا؟
+## تو پروگرامنگ اصل میں *کیا* ہے؟
+
+ٹھیک ہے، آئیے اس ملین ڈالر کے سوال کو حل کرتے ہیں: پروگرامنگ واقعی کیا ہے؟
+
+میں آپ کو ایک کہانی سناؤں گا جس نے میرے سوچنے کے انداز کو مکمل طور پر بدل دیا۔ پچھلے ہفتے، میں اپنی ماں کو ہمارے نئے اسمارٹ ٹی وی ریموٹ استعمال کرنے کا طریقہ سمجھانے کی کوشش کر رہا تھا۔ میں نے خود کو یہ کہتے ہوئے پایا "لال بٹن دبائیں، لیکن بڑا لال بٹن نہیں، چھوٹا لال بٹن بائیں طرف... نہیں، آپ کا دوسرا بایاں... ٹھیک ہے، اب اسے دو سیکنڈ کے لیے دبائیں، ایک نہیں، تین نہیں..." کیا یہ جانا پہچانا لگتا ہے؟ 😅
+
+یہی پروگرامنگ ہے! یہ طاقتور چیز کو انتہائی تفصیلی، قدم بہ قدم ہدایات دینے کا فن ہے لیکن اسے ہر چیز بالکل واضح طور پر بتانے کی ضرورت ہوتی ہے۔ لیکن ماں کو سمجھانے کے بجائے (جو پوچھ سکتی ہے "کون سا لال بٹن؟!"), آپ کمپیوٹر کو سمجھا رہے ہیں (جو بالکل وہی کرتا ہے جو آپ کہتے ہیں، چاہے آپ نے جو کہا وہ وہ نہ ہو جو آپ کا مطلب تھا)۔
 
-ٹھیک ہے، آئیے اس ملین ڈالر کے سوال کو حل کرتے ہیں: پروگرامنگ اصل میں کیا ہے؟
+یہاں وہ بات ہے جس نے مجھے حیران کر دیا جب میں نے پہلی بار یہ سیکھا: کمپیوٹرز بنیادی طور پر کافی سادہ ہیں۔ وہ لفظی طور پر صرف دو چیزیں سمجھتے ہیں – 1 اور 0، جو بنیادی طور پر صرف "ہاں" اور "نہیں" یا "آن" اور "آف" ہے۔ بس اتنا ہی! لیکن یہاں وہ جادو ہے – ہمیں 1s اور 0s میں بات کرنے کی ضرورت نہیں ہے جیسے ہم دی میٹرکس میں ہیں۔ یہی وہ جگہ ہے جہاں **پروگرامنگ زبانیں** مدد کے لیے آتی ہیں۔ وہ دنیا کے بہترین مترجم کی طرح ہیں جو آپ کے بالکل عام انسانی خیالات کو کمپیوٹر زبان میں تبدیل کرتے ہیں۔
 
-میں آپ کو ایک کہانی سناتا ہوں جس نے میرے سوچنے کے انداز کو مکمل طور پر بدل دیا۔ پچھلے ہفتے، میں اپنی ماں کو ہمارے نئے اسمارٹ ٹی وی ریموٹ استعمال کرنے کا طریقہ سمجھانے کی کوشش کر رہا تھا۔ میں نے خود کو یہ کہتے ہوئے پایا، "لال بٹن دبائیں، لیکن بڑا لال بٹن نہیں، چھوٹا لال بٹن جو بائیں طرف ہے... نہیں، آپ کا دوسرا بایاں... ٹھیک ہے، اب اسے دو سیکنڈ کے لیے دبائیں، ایک نہیں، تین نہیں..." کیا یہ جانا پہچانا لگتا ہے؟ 😅
+اور یہاں وہ بات ہے جو مجھے ہر صبح جب میں جاگتا ہوں تو واقعی حیران کر دیتی ہے: آپ کی زندگی میں ہر ڈیجیٹل چیز کسی ایسے شخص کے ساتھ شروع ہوئی جو آپ جیسا تھا، شاید اپنے پاجامے میں کافی کا کپ لے کر بیٹھا ہوا، اپنے لیپ ٹاپ پر کوڈ ٹائپ کر رہا تھا۔ وہ انسٹاگرام فلٹر جو آپ کو بے عیب دکھاتا ہے؟ کسی نے اسے کوڈ کیا۔ وہ سفارش جس نے آپ کو آپ کے نئے پسندیدہ گانے تک پہنچایا؟ ایک ڈیولپر نے وہ الگورتھم بنایا۔ وہ ایپ جو آپ کو دوستوں کے ساتھ ڈنر بل تقسیم کرنے میں مدد دیتی ہے؟ ہاں، کسی نے سوچا "یہ پریشان کن ہے، مجھے لگتا ہے کہ میں اسے ٹھیک کر سکتا ہوں" اور پھر... انہوں نے کر دیا!
 
-یہی پروگرامنگ ہے! یہ ایک بہت طاقتور چیز کو انتہائی تفصیلی، قدم بہ قدم ہدایات دینے کا فن ہے لیکن اسے ہر چیز بالکل واضح طور پر بتانے کی ضرورت ہوتی ہے۔ بس ماں کو سمجھانے کے بجائے (جو پوچھ سکتی ہے "کون سا لال بٹن؟!"), آپ کمپیوٹر کو سمجھا رہے ہیں (جو بالکل وہی کرتا ہے جو آپ کہتے ہیں، چاہے آپ نے جو کہا وہ وہ نہ ہو جو آپ کا مطلب تھا)۔
+جب آپ پروگرامنگ سیکھتے ہیں، تو آپ صرف ایک نئی مہارت حاصل نہیں کر رہے ہوتے – آپ اس ناقابل یقین مسئلہ حل کرنے والوں کی کمیونٹی کا حصہ بن رہے ہیں جو اپنے دن یہ سوچتے ہوئے گزارتے ہیں، "کیا ہوگا اگر میں کچھ ایسا بنا سکوں جو کسی کا دن تھوڑا سا بہتر بنا دے؟" ایمانداری سے، کیا اس سے زیادہ زبردست کوئی چیز ہے؟
 
-یہاں وہ بات ہے جس نے مجھے پہلی بار یہ سیکھنے پر حیران کر دیا: کمپیوٹرز اصل میں اپنی بنیاد پر کافی سادہ ہیں۔ وہ لفظی طور پر صرف دو چیزیں سمجھتے ہیں – 1 اور 0، جو بنیادی طور پر صرف "ہاں" اور "نہیں" یا "آن" اور "آف" ہے۔ بس اتنا! لیکن یہاں وہ بات ہے جہاں یہ جادوئی ہو جاتا ہے – ہمیں 1s اور 0s میں بات کرنے کی ضرورت نہیں ہے جیسے ہم The Matrix میں ہیں۔ یہی وہ جگہ ہے جہاں **پروگرامنگ زبانیں** مدد کے لیے آتی ہیں۔ یہ دنیا کے بہترین مترجم ہونے کی طرح ہیں جو آپ کے بالکل عام انسانی خیالات کو کمپیوٹر زبان میں تبدیل کرتے ہیں۔
+✅ **تفریحی حقیقت کی تلاش**: جب آپ کے پاس فارغ وقت ہو تو کچھ بہت دلچسپ تلاش کریں – آپ کے خیال میں دنیا کا پہلا کمپیوٹر پروگرامر کون تھا؟ میں آپ کو ایک اشارہ دوں گا: یہ وہ نہیں ہو سکتا جس کی آپ توقع کر رہے ہیں! اس شخص کے پیچھے کہانی بالکل دلچسپ ہے اور یہ ظاہر کرتی ہے کہ پروگرامنگ ہمیشہ تخلیقی مسئلہ حل کرنے اور باکس سے باہر سوچنے کے بارے میں رہی ہے۔
 
-اور یہاں وہ بات ہے جو مجھے ہر صبح جب میں جاگتا ہوں تو واقعی حیران کر دیتی ہے: آپ کی زندگی میں ہر ڈیجیٹل چیز کسی ایسے شخص سے شروع ہوئی جو آپ جیسا تھا، شاید اپنے پاجامے میں کافی کے کپ کے ساتھ بیٹھا ہوا، اپنے لیپ ٹاپ پر کوڈ ٹائپ کر رہا تھا۔ وہ انسٹاگرام فلٹر جو آپ کو بے عیب دکھاتا ہے؟ کسی نے اسے کوڈ کیا۔ وہ سفارش جس نے آپ کو آپ کے نئے پسندیدہ گانے تک پہنچایا؟ ایک ڈیولپر نے وہ الگورتھم بنایا۔ وہ ایپ جو آپ کو دوستوں کے ساتھ ڈنر بل تقسیم کرنے میں مدد دیتی ہے؟ ہاں، کسی نے سوچا "یہ پریشان کن ہے، مجھے لگتا ہے کہ میں اسے ٹھیک کر سکتا ہوں" اور پھر... انہوں نے کر دیا!
+### 🧠 **چیک ان وقت: آپ کیسا محسوس کر رہے ہیں؟**
 
-جب آپ پروگرامنگ سیکھتے ہیں، تو آپ صرف ایک نئی مہارت حاصل نہیں کر رہے ہوتے – آپ مسئلے حل کرنے والوں کی اس حیرت انگیز کمیونٹی کا حصہ بن رہے ہوتے ہیں جو اپنے دن یہ سوچتے ہوئے گزارتے ہیں، "کیا میں کچھ ایسا بنا سکتا ہوں جو کسی کے دن کو تھوڑا سا بہتر بنا دے؟" ایمانداری سے، کیا اس سے زیادہ زبردست کوئی چیز ہو سکتی ہے؟
+**ایک لمحہ لیں اور غور کریں:**
+- کیا "کمپیوٹرز کو ہدایات دینے" کا تصور اب آپ کو سمجھ آتا ہے؟
+- کیا آپ کسی روزمرہ کے کام کے بارے میں سوچ سکتے ہیں جسے آپ پروگرامنگ کے ذریعے خودکار بنانا چاہیں گے؟
+- اس پورے پروگرامنگ کے بارے میں آپ کے ذہن میں کون سے سوالات اٹھ رہے ہیں؟
 
-✅ **تفریحی حقیقت کی تلاش**: یہاں کچھ بہت زبردست ہے جسے آپ فارغ وقت میں دیکھ سکتے ہیں – آپ کے خیال میں دنیا کا پہلا کمپیوٹر پروگرامر کون تھا؟ میں آپ کو ایک اشارہ دیتا ہوں: یہ وہ نہیں ہو سکتا جس کی آپ توقع کر رہے ہوں! اس شخص کے پیچھے کہانی بالکل دلچسپ ہے اور یہ ظاہر کرتی ہے کہ پروگرامنگ ہمیشہ تخلیقی مسئلہ حل کرنے اور باکس سے باہر سوچنے کے بارے میں رہی ہے۔
+> **یاد رکھیں**: اگر کچھ تصورات ابھی دھندلے محسوس ہو رہے ہیں تو یہ بالکل معمول کی بات ہے۔ پروگرامنگ سیکھنا ایک نئی زبان سیکھنے جیسا ہے – آپ کے دماغ کو ان نیورل راستوں کو بنانے میں وقت لگتا ہے۔ آپ بہت اچھا کر رہے ہیں!
 
 ## پروگرامنگ زبانیں جادو کے مختلف ذائقوں کی طرح ہیں
 
-ٹھیک ہے، یہ عجیب لگے گا، لیکن میرے ساتھ رہیں – پروگرامنگ زبانیں مختلف قسم کے موسیقی کی طرح ہیں۔ اس کے بارے میں سوچیں: آپ کے پاس جاز ہے، جو ہموار اور تخلیقی ہے، راک جو طاقتور اور سیدھا ہے، کلاسیکل جو خوبصورت اور منظم ہے، اور ہپ ہاپ جو تخلیقی اور اظہار خیال ہے۔ ہر انداز کا اپنا مزاج، اپنے پرجوش مداحوں کا کمیونٹی ہے، اور ہر ایک مختلف موڈز اور مواقع کے لیے بہترین ہے۔
+ٹھیک ہے، یہ عجیب لگے گا، لیکن میرے ساتھ رہیں – پروگرامنگ زبانیں مختلف قسم کے موسیقی کی طرح ہیں۔ اس کے بارے میں سوچیں: آپ کے پاس جاز ہے، جو ہموار اور تخلیقی ہے، راک جو طاقتور اور سیدھا ہے، کلاسیکل جو خوبصورت اور منظم ہے، اور ہپ ہاپ جو تخلیقی اور اظہار خیال ہے۔ ہر انداز کا اپنا مزاج، اپنے شائقین کا گروپ، اور ہر ایک مختلف مواقع کے لیے بہترین ہے۔
 
-پروگرامنگ زبانیں بالکل اسی طرح کام کرتی ہیں! آپ وہی زبان استعمال نہیں کریں گے جو ایک تفریحی موبائل گیم بنانے کے لیے استعمال کی جاتی ہے جو آپ بڑے پیمانے پر موسمیاتی ڈیٹا کو پروسیس کرنے کے لیے استعمال کریں گے، جیسے آپ یوگا کلاس میں ڈیتھ میٹل نہیں بجائیں گے (ٹھیک ہے، زیادہ تر یوگا کلاسز میں بہرحال! 😄)۔
+پروگرامنگ زبانیں بالکل اسی طرح کام کرتی ہیں! آپ وہی زبان استعمال نہیں کریں گے جو ایک تفریحی موبائل گیم بنانے کے لیے استعمال کی جاتی ہے جو آپ بڑے پیمانے پر موسمیاتی ڈیٹا کو پروسیس کرنے کے لیے استعمال کریں گے، جیسے آپ یوگا کلاس میں ڈیتھ میٹل نہیں بجائیں گے (اچھا، زیادہ تر یوگا کلاسز میں! 😄)۔
 
-لیکن یہاں وہ بات ہے جو ہر بار جب میں اس کے بارے میں سوچتا ہوں تو مجھے حیران کر دیتی ہے: یہ زبانیں دنیا کے سب سے زیادہ صبر کرنے والے، شاندار مترجم کی طرح ہیں جو آپ کے ساتھ بیٹھا ہوا ہے۔ آپ اپنے خیالات کو اس طرح ظاہر کر سکتے ہیں جو آپ کے انسانی دماغ کے لیے قدرتی محسوس ہوتا ہے، اور وہ اس پیچیدہ کام کو سنبھالتے ہیں کہ اسے 1s اور 0s میں تبدیل کریں جو کمپیوٹرز اصل میں بولتے ہیں۔ یہ ایسا ہے جیسے آپ کے پاس ایک دوست ہو جو "انسانی تخلیقی صلاحیت" اور "کمپیوٹر منطق" دونوں میں بالکل روانی رکھتا ہو – اور وہ کبھی تھکتا نہیں، کبھی کافی بریک کی ضرورت نہیں ہوتی، اور کبھی آپ سے ایک ہی سوال دوبارہ پوچھنے پر فیصلہ نہیں کرتا!
+لیکن یہاں وہ بات ہے جو مجھے ہر بار حیران کر دیتی ہے جب میں اس کے بارے میں سوچتا ہوں: یہ زبانیں ایسی ہیں جیسے آپ کے ساتھ دنیا کا سب سے صبر کرنے والا، شاندار مترجم بیٹھا ہوا ہو۔ آپ اپنے خیالات کو اس طرح بیان کر سکتے ہیں جو آپ کے انسانی دماغ کے لیے قدرتی محسوس ہوتا ہے، اور وہ اس تمام پیچیدہ کام کو سنبھالتے ہیں جو اسے 1s اور 0s میں تبدیل کرنے کے لیے ضروری ہے جو کمپیوٹرز اصل میں بولتے ہیں۔ یہ ایسا ہے جیسے آپ کے پاس ایک دوست ہو جو "انسانی تخلیقی صلاحیت" اور "کمپیوٹر منطق" دونوں میں مکمل طور پر ماہر ہو – اور وہ کبھی تھکتے نہیں، کبھی کافی بریک کی ضرورت نہیں ہوتی، اور کبھی آپ سے ایک ہی سوال دوبارہ پوچھنے پر فیصلہ نہیں کرتے!
 
 ### مشہور پروگرامنگ زبانیں اور ان کے استعمال
 
-| زبان | بہترین استعمال | کیوں مشہور ہے |
-|----------|----------|------------------|
-| **JavaScript** | ویب ڈیولپمنٹ، یوزر انٹرفیسز | براؤزرز میں چلتی ہے اور انٹرایکٹو ویب سائٹس کو طاقت دیتی ہے |
+```mermaid
+mindmap
+  root((Programming Languages))
+    Web Development
+      JavaScript
+        Frontend Magic
+        Interactive Websites
+      TypeScript
+        JavaScript + Types
+        Enterprise Apps
+    Data & AI
+      Python
+        Data Science
+        Machine Learning
+        Automation
+      R
+        Statistics
+        Research
+    Mobile Apps
+      Java
+        Android
+        Enterprise
+      Swift
+        iOS
+        Apple Ecosystem
+      Kotlin
+        Modern Android
+        Cross-platform
+    Systems & Performance
+      C++
+        Games
+        Performance Critical
+      Rust
+        Memory Safety
+        System Programming
+      Go
+        Cloud Services
+        Scalable Backend
+```
+
+| زبان | بہترین استعمال | یہ کیوں مقبول ہے |
+|------|----------------|------------------|
+| **JavaScript** | ویب ڈیولپمنٹ، یوزر انٹرفیس | براؤزرز میں چلتی ہے اور انٹرایکٹو ویب سائٹس کو طاقت دیتی ہے |
 | **Python** | ڈیٹا سائنس، آٹومیشن، AI | پڑھنے اور سیکھنے میں آسان، طاقتور لائبریریاں |
 | **Java** | انٹرپرائز ایپلیکیشنز، اینڈرائیڈ ایپس | پلیٹ فارم سے آزاد، بڑے سسٹمز کے لیے مضبوط |
 | **C#** | ونڈوز ایپلیکیشنز، گیم ڈیولپمنٹ | مضبوط مائیکروسافٹ ایکو سسٹم سپورٹ |
@@ -75,25 +141,45 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### ہائی لیول بمقابلہ لو لیول زبانیں
 
-ٹھیک ہے، یہ وہ تصور تھا جس نے مجھے پہلی بار سیکھتے وقت حیران کر دیا، لہذا میں وہ مثال شیئر کرنے جا رہا ہوں جس نے آخر کار مجھے سمجھایا – اور مجھے واقعی امید ہے کہ یہ آپ کی بھی مدد کرے گی!
+ٹھیک ہے، یہ وہ تصور تھا جس نے مجھے پہلی بار سیکھتے وقت واقعی الجھن میں ڈال دیا، لہذا میں وہ مثال شیئر کرنے جا رہا ہوں جس نے آخر کار مجھے سمجھایا – اور مجھے واقعی امید ہے کہ یہ آپ کی بھی مدد کرے گی!
 
-تصور کریں کہ آپ ایک ایسے ملک کا دورہ کر رہے ہیں جہاں آپ زبان نہیں بولتے، اور آپ کو فوری طور پر قریب ترین باتھ روم تلاش کرنے کی ضرورت ہے (ہم سب وہاں رہے ہیں، ٹھیک ہے؟ 😅):
+تصور کریں کہ آپ ایک ایسے ملک میں جا رہے ہیں جہاں آپ زبان نہیں بولتے، اور آپ کو فوری طور پر قریب ترین باتھ روم تلاش کرنے کی ضرورت ہے (ہم سب وہاں رہے ہیں، ٹھیک ہے؟ 😅):
 
-- **لو لیول پروگرامنگ** مقامی بولی کو اتنا اچھی طرح سیکھنے جیسا ہے کہ آپ کونے پر پھل بیچنے والی دادی کے ساتھ ثقافتی حوالوں، مقامی زبان، اور اندرونی لطیفوں کے ساتھ بات چیت کر سکتے ہیں جو صرف وہی سمجھ سکتا ہے جو وہاں پلا بڑھا ہو۔ بہت متاثر کن اور انتہائی موثر... اگر آپ روانی رکھتے ہیں! لیکن جب آپ صرف باتھ روم تلاش کرنے کی کوشش کر رہے ہیں تو کافی پریشان کن۔
+- **لو لیول پروگرامنگ** مقامی بولی کو اتنا اچھی طرح سیکھنے جیسا ہے کہ آپ کونے پر پھل بیچنے والی دادی کے ساتھ ثقافتی حوالوں، مقامی زبان، اور اندرونی لطیفوں کے ساتھ بات چیت کر سکتے ہیں جو صرف وہی سمجھ سکتا ہے جو وہاں پلا بڑھا ہو۔ بہت متاثر کن اور انتہائی مؤثر... اگر آپ روانی رکھتے ہیں! لیکن جب آپ صرف باتھ روم تلاش کرنے کی کوشش کر رہے ہیں تو کافی پریشان کن۔
 
-- **ہائی لیول پروگرامنگ** اس حیرت انگیز مقامی دوست کی طرح ہے جو آپ کو سمجھتا ہے۔ آپ "مجھے واقعی باتھ روم تلاش کرنے کی ضرورت ہے" سادہ انگریزی میں کہہ سکتے ہیں، اور وہ تمام ثقافتی ترجمہ سنبھالتے ہیں اور آپ کو ایسے انداز میں ہدایات دیتے ہیں جو آپ کے غیر مقامی دماغ کے لیے بالکل معنی رکھتا ہے۔
+- **ہائی لیول پروگرامنگ** اس حیرت انگیز مقامی دوست کی طرح ہے جو آپ کو سمجھتا ہے۔ آپ سادہ انگریزی میں کہہ سکتے ہیں "مجھے واقعی باتھ روم تلاش کرنے کی ضرورت ہے"، اور وہ تمام ثقافتی ترجمہ سنبھالتے ہیں اور آپ کو ایسے انداز میں ہدایات دیتے ہیں جو آپ کے غیر مقامی دماغ کے لیے بالکل معنی رکھتا ہے۔
 
 پروگرامنگ کی اصطلاحات میں:
-- **لو لیول زبانیں** (جیسے Assembly یا C) آپ کو کمپیوٹر کے اصل ہارڈویئر کے ساتھ انتہائی تفصیلی گفتگو کرنے دیتی ہیں، لیکن آپ کو مشین کی طرح سوچنا پڑتا ہے، جو... ٹھیک ہے، آئیے صرف یہ کہیں کہ یہ ایک بہت بڑا ذہنی تبدیلی ہے!
-- **ہائی لیول زبانیں** (جیسے JavaScript, Python, یا C#) آپ کو انسان کی طرح سوچنے دیتی ہیں جبکہ وہ تمام مشین کی بات چیت کو پردے کے پیچھے سنبھالتے ہیں۔ اس کے علاوہ، ان کے پاس یہ انتہائی خوش آمدید کمیونٹیز ہیں جو ان لوگوں سے بھری ہوئی ہیں جو یاد رکھتے ہیں کہ نیا ہونا کیسا محسوس ہوتا ہے اور واقعی مدد کرنا چاہتے ہیں!
-
-آپ کے خیال میں میں آپ کو کس سے شروع کرنے کا مشورہ دوں گا؟ 😉 ہائی لیول زبانیں تربیتی پہیوں کی طرح ہیں جنہیں آپ کبھی بھی اتارنا نہیں چاہتے کیونکہ وہ پورے تجربے کو اتنا زیادہ خوشگوار بناتی ہیں!
+- **لو لیول زبانیں** (جیسے Assembly یا C) آپ کو کمپیوٹر کے اصل ہارڈویئر کے ساتھ انتہائی تفصیلی بات چیت کرنے دیتی ہیں، لیکن آپ کو مشین کی طرح سوچنا پڑتا ہے، جو... ٹھیک ہے، آئیے صرف یہ کہیں کہ یہ ایک بہت بڑی ذہنی تبدیلی ہے!
+- **ہائی لیول زبانیں** (جیسے JavaScript, Python, یا C#) آپ کو انسان کی طرح سوچنے دیتی ہیں جبکہ وہ تمام مشین کی زبان کو پس پردہ سنبھالتی ہیں۔ اس کے علاوہ، ان کے پاس انتہائی خوش آمدید کہنے والی کمیونٹیز ہیں جو ان لوگوں سے بھری ہوئی ہیں جو یاد رکھتے ہیں کہ نیا ہونا کیسا محسوس ہوتا ہے اور واقعی آپ کی مدد کرنا چاہتے ہیں!
+
+آپ اندازہ لگا سکتے ہیں کہ میں آپ کو کس سے شروع کرنے کا مشورہ دوں گا؟ 😉 ہائی لیول زبانیں تربیتی پہیوں کی طرح ہیں جنہیں آپ کبھی بھی ہٹانا نہیں چاہیں گے کیونکہ وہ پورے تجربے کو بہت زیادہ خوشگوار بناتی ہیں!
+
+```mermaid
+flowchart TB
+    A["👤 Human Thought:<br/>'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level}
+    
+    B -->|High-Level| C["🌟 JavaScript/Python<br/>Easy to read and write"]
+    B -->|Low-Level| D["⚙️ Assembly/C<br/>Direct hardware control"]
+    
+    C --> E["📝 Write: fibonacci(10)"]
+    D --> F["📝 Write: mov r0,#00<br/>sub r0,r0,#01"]
+    
+    E --> G["🤖 Computer Understanding:<br/>Translator handles complexity"]
+    F --> G
+    
+    G --> H["💻 Same Result:<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
+    
+    style C fill:#e1f5fe
+    style D fill:#fff3e0
+    style H fill:#e8f5e8
+```
 
-### مجھے آپ کو دکھانے دیں کہ ہائی لیول زبانیں کیوں زیادہ دوستانہ ہیں
+### میں آپ کو دکھاتا ہوں کہ ہائی لیول زبانیں کیوں زیادہ دوستانہ ہیں
 
-ٹھیک ہے، میں آپ کو کچھ دکھانے والا ہوں جو بالکل ظاہر کرتا ہے کہ میں ہائی لیول زبانوں سے کیوں محبت کرتا ہوں، لیکن پہلے – مجھے آپ سے کچھ وعدہ کرنے کی ضرورت ہے۔ جب آپ وہ پہلا کوڈ مثال دیکھیں گے، تو گھبرائیں نہیں! یہ خوفناک نظر آنے کے لیے ہے۔ یہی وہ نکتہ ہے جو میں بنا رہا ہوں!
+ٹھیک ہے، میں آپ کو کچھ دکھانے والا ہوں جو بالکل ظاہر کرتا ہے کہ میں ہائی لیول زبانوں سے کیوں محبت کرتا ہوں، لیکن پہلے – مجھے آپ سے کچھ وعدہ کرنے کی ضرورت ہے۔ جب آپ وہ پہلا کوڈ مثال دیکھیں، تو گھبرائیں نہیں! یہ خوفناک لگنا چاہیے۔ یہی وہ نکتہ ہے جو میں بنا رہا ہوں!
 
-ہم بالکل ایک ہی کام کو دو مکمل طور پر مختلف انداز میں لکھا ہوا دیکھنے جا رہے ہیں۔ دونوں وہ چیز تخلیق کرتے ہیں جسے Fibonacci sequence کہا جاتا ہے – یہ ایک خوبصورت ریاضیاتی نمونہ ہے جہاں ہر نمبر اس سے پہلے کے دو نمبروں کا مجموعہ ہوتا ہے: 0, 1, 1, 2, 3, 5, 8, 13... (تفریحی حقیقت: آپ یہ نمونہ لفظی طور پر ہر جگہ قدرت میں پائیں گے – سورج مکھی کے بیجوں کے گھومنے، پائن کون کے نمونے، یہاں تک کہ کہکشاؤں کے بننے کے طریقے!)
+ہم بالکل ایک ہی کام کو دو مکمل طور پر مختلف انداز میں لکھا ہوا دیکھنے جا رہے ہیں۔ دونوں وہ چیز تخلیق کرتے ہیں جسے فبوناکی سیکوئنس کہا جاتا ہے – یہ ایک خوبصورت ریاضیاتی نمونہ ہے جہاں ہر نمبر اس سے پہلے کے دو نمبروں کا مجموعہ ہوتا ہے: 0, 1, 1, 2, 3, 5, 8, 13... (تفریحی حقیقت: آپ یہ نمونہ لفظی طور پر قدرت میں ہر جگہ پائیں گے – سورج مکھی کے بیجوں کے گھومنے، پائن کون کے نمونوں، یہاں تک کہ کہکشاؤں کے بننے کے طریقے میں!)
 
 تیار ہیں فرق دیکھنے کے لیے؟ چلیں!
 
@@ -109,9 +195,9 @@ console.log('Fibonacci sequence:');
 ```
 
 **یہ کوڈ کیا کرتا ہے:**
-- **ایک مستقل اعلان کریں** تاکہ یہ بتا سکیں کہ ہم کتنے Fibonacci نمبر تخلیق کرنا چاہتے ہیں
-- **دو متغیرات کو شروع کریں** تاکہ ترتیب میں موجودہ اور اگلے نمبروں کو ٹریک کیا جا سکے
-- **ابتدائی اقدار مقرر کریں** (0 اور 1) جو Fibonacci نمونہ کی وضاحت کرتے ہیں
+- **ایک مستقل اعلان کریں** تاکہ یہ بتا سکیں کہ ہم کتنے فبوناکی نمبر بنانا چاہتے ہیں
+- **دو متغیرات کو شروع کریں** تاکہ سیکوئنس میں موجودہ اور اگلے نمبروں کو ٹریک کریں
+- **آغاز کریں** ابتدائی اقدار (0 اور 1) جو فبوناکی نمونہ کی وضاحت کرتی ہیں
 - **ایک ہیڈر پیغام دکھائیں** تاکہ ہماری آؤٹ پٹ کی شناخت ہو
 
 ```javascript
@@ -127,75 +213,27 @@ for (let i = 0; i < fibonacciCount; i++) {
 ```
 
 **یہاں کیا ہوتا ہے:**
-- **ہر پوزیشن کے ذریعے لوپ کریں** ترتیب میں `for` لوپ کا استعمال کرتے ہوئے
+- **ہر پوزیشن کے ذریعے لوپ کریں** ہمارے سیکوئنس میں `for` لوپ کا استعمال کرتے ہوئے
 - **ہر نمبر کو اس کی پوزیشن کے ساتھ دکھائیں** ٹیمپلیٹ لیٹرل فارمیٹنگ کا استعمال کرتے ہوئے
-- **اگلا Fibonacci نمبر حساب کریں** موجودہ اور اگلی اقدار کو شامل کر کے
-- **ہمارے ٹریکنگ متغیرات کو اپ ڈیٹ کریں** اگلے iteration پر جانے کے لیے
-
-```javascript
-// Step 3: Modern functional approach
-const generateFibonacci = (count) => {
-  const sequence = [0, 1];
-  
-  for (let i = 2; i < count; i++) {
-    sequence[i] = sequence[i - 1] + sequence[i - 2];
-  }
-  
-  return sequence;
-};
-
-// Usage example
-const fibSequence = generateFibonacci(10);
-console.log(fibSequence);
-```
-
-**اوپر، ہم نے:**
-- **ایک قابل استعمال فنکشن تخلیق کیا** جدید تیر فنکشن syntax کا استعمال کرتے ہوئے
-- **ایک array بنایا** مکمل ترتیب کو ذخیرہ کرنے کے لیے بجائے ایک ایک کر کے دکھانے کے
-- **array indexing کا استعمال کیا** ہر نئے نمبر کو پچھلے اقدار سے حساب کرنے کے لیے
-- **مکمل ترتیب واپس کی** تاکہ ہمارے پروگرام کے دوسرے حصوں میں لچکدار استعمال کے لیے
-
-**لو لیول زبان (ARM Assembly) – کمپیوٹر دوست:**
-
-```assembly
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
+- **اگلا فبوناکی نمبر حساب کریں** موجودہ اور اگلی اقدار کو شامل کرکے
+- **ہمارے ٹریکنگ متغیرات کو اپ ڈیٹ کریں** اگلی تکرار پر
+- **تبصرے**: اعلیٰ سطح کی زبانیں وضاحتی تبصرے لکھنے کی حوصلہ افزائی کرتی ہیں جو کوڈ کو خود وضاحتی بناتی ہیں  
+- **ساخت**: جاوا اسکرپٹ کی منطقی ترتیب مسائل کو قدم بہ قدم سمجھنے کے انسانی طریقے سے میل کھاتی ہے  
+- **نگہداشت**: مختلف ضروریات کے لیے جاوا اسکرپٹ ورژن کو اپ ڈیٹ کرنا آسان اور واضح ہے  
 
-نوٹ کریں کہ JavaScript ورژن تقریباً انگریزی ہدایات کی طرح پڑھتا ہے، جبکہ Assembly ورژن خفیہ کمانڈز استعمال کرتا ہے جو کمپیوٹر
-✅ **فبوناکی تسلسل کے بارے میں**: یہ حیرت انگیز نمبر پیٹرن (جہاں ہر نمبر پچھلے دو نمبروں کے مجموعے کے برابر ہوتا ہے: 0، 1، 1، 2، 3، 5، 8...) قدرت میں ہر جگہ نظر آتا ہے! آپ اسے سورج مکھی کے گھومنے والے نمونوں، پائن کون کے ڈیزائن، ناٹلس شیلز کے خم، اور یہاں تک کہ درختوں کی شاخوں کے بڑھنے کے طریقے میں بھی دیکھ سکتے ہیں۔ یہ واقعی حیرت انگیز ہے کہ ریاضی اور کوڈ ہمیں ان نمونوں کو سمجھنے اور دوبارہ تخلیق کرنے میں مدد دیتے ہیں جو قدرت خوبصورتی پیدا کرنے کے لیے استعمال کرتی ہے!
+✅ **فبوناکی تسلسل کے بارے میں**: یہ حیرت انگیز نمبر کا نمونہ (جہاں ہر نمبر پچھلے دو نمبروں کے مجموعے کے برابر ہوتا ہے: 0، 1، 1، 2، 3، 5، 8...) قدرت میں ہر جگہ نظر آتا ہے! آپ اسے سورج مکھی کے گھومنے والے نمونوں، پائن کون کے ڈیزائن، ناٹلس شیلز کے خم، اور یہاں تک کہ درختوں کی شاخوں کے بڑھنے کے طریقے میں بھی دیکھیں گے۔ یہ واقعی حیرت انگیز ہے کہ ریاضی اور کوڈ ہمیں قدرت کے حسن پیدا کرنے کے نمونوں کو سمجھنے اور دوبارہ تخلیق کرنے میں کیسے مدد دیتے ہیں!  
 
-## وہ بنیادی اجزاء جو جادو کو ممکن بناتے ہیں
+## وہ بنیادی اجزاء جو جادو کو ممکن بناتے ہیں  
 
-ٹھیک ہے، اب جب کہ آپ نے دیکھا کہ پروگرامنگ زبانیں عمل میں کیسی نظر آتی ہیں، آئیے ان بنیادی حصوں کو توڑتے ہیں جو ہر پروگرام کو تشکیل دیتے ہیں جو کبھی لکھا گیا ہے۔ ان کو اپنے پسندیدہ نسخے کے ضروری اجزاء کے طور پر سوچیں – ایک بار جب آپ سمجھ جائیں کہ ہر ایک کیا کرتا ہے، تو آپ تقریباً کسی بھی زبان میں کوڈ پڑھنے اور لکھنے کے قابل ہو جائیں گے!
+ٹھیک ہے، اب جب کہ آپ نے دیکھا کہ پروگرامنگ زبانیں عملی طور پر کیسی نظر آتی ہیں، آئیے ان بنیادی حصوں کو توڑتے ہیں جو ہر پروگرام کو تشکیل دیتے ہیں جو کبھی لکھا گیا ہے۔ ان کو اپنے پسندیدہ نسخے کے ضروری اجزاء کے طور پر سوچیں – ایک بار جب آپ سمجھ جائیں کہ ہر ایک کیا کرتا ہے، آپ تقریباً کسی بھی زبان میں کوڈ پڑھنے اور لکھنے کے قابل ہو جائیں گے!  
 
-یہ پروگرامنگ کے گرامر کو سیکھنے جیسا ہے۔ یاد ہے اسکول میں جب آپ نے اسم، فعل، اور جملے بنانے کے بارے میں سیکھا تھا؟ پروگرامنگ کا اپنا گرامر ہے، اور ایمانداری سے، یہ انگریزی گرامر سے کہیں زیادہ منطقی اور معاف کرنے والا ہے! 😄
+یہ پروگرامنگ کے گرامر کو سیکھنے جیسا ہے۔ یاد ہے اسکول میں جب آپ نے اسم، فعل، اور جملے بنانے کے طریقے کے بارے میں سیکھا تھا؟ پروگرامنگ کا اپنا گرامر ہے، اور ایمانداری سے، یہ انگریزی گرامر سے کہیں زیادہ منطقی اور معاف کرنے والا ہے! 😄  
 
-### بیانات: مرحلہ وار ہدایات
+### بیانات: قدم بہ قدم ہدایات  
 
-آئیے **بیانات** سے شروع کرتے ہیں – یہ آپ کے کمپیوٹر کے ساتھ گفتگو میں انفرادی جملوں کی طرح ہیں۔ ہر بیان کمپیوٹر کو ایک مخصوص کام کرنے کو کہتا ہے، جیسے ہدایات دینا: "یہاں بائیں مڑیں،" "سرخ روشنی پر رکیں،" "اس جگہ پر پارک کریں۔"
+آئیے **بیانات** سے شروع کرتے ہیں – یہ آپ کے کمپیوٹر کے ساتھ گفتگو میں انفرادی جملوں کی طرح ہیں۔ ہر بیان کمپیوٹر کو ایک مخصوص کام کرنے کے لیے کہتا ہے، جیسے ہدایات دینا: "یہاں بائیں مڑیں،" "سرخ روشنی پر رکیں،" "اس جگہ پر پارک کریں۔"  
 
-مجھے بیانات کے بارے میں جو چیز پسند ہے وہ یہ ہے کہ وہ عام طور پر کتنے قابل مطالعہ ہوتے ہیں۔ یہ دیکھیں:
+مجھے بیانات کے بارے میں جو چیز پسند ہے وہ یہ ہے کہ وہ عام طور پر کتنے قابل مطالعہ ہوتے ہیں۔ یہ دیکھیں:  
 
 ```javascript
 // Basic statements that perform single actions
@@ -203,31 +241,31 @@ const userName = "Alex";
 console.log("Hello, world!");              
 const sum = 5 + 3;                         
 ```
-
-**یہ کوڈ کیا کرتا ہے:**
-- **ایک مستقل متغیر** کا اعلان کریں تاکہ صارف کا نام محفوظ کیا جا سکے
-- **ایک خوش آمدیدی پیغام** کو کنسول آؤٹ پٹ پر دکھائیں
-- **ریاضی کے آپریشن کا نتیجہ** حساب لگائیں اور محفوظ کریں
+  
+**یہ کوڈ کیا کرتا ہے:**  
+- **ایک مستقل متغیر کا اعلان کریں** تاکہ صارف کے نام کو ذخیرہ کیا جا سکے  
+- **ایک مبارکبادی پیغام کو کنسول آؤٹ پٹ پر دکھائیں**  
+- **ریاضی کے عمل کا نتیجہ حساب کریں اور ذخیرہ کریں**  
 
 ```javascript
 // Statements that interact with web pages
 document.title = "My Awesome Website";      
 document.body.style.backgroundColor = "lightblue";
 ```
+  
+**قدم بہ قدم، یہاں کیا ہو رہا ہے:**  
+- **ویب پیج کے عنوان کو تبدیل کریں** جو براؤزر ٹیب میں ظاہر ہوتا ہے  
+- **پورے صفحے کے جسم کا پس منظر کا رنگ تبدیل کریں**  
 
-**مرحلہ وار، یہاں کیا ہو رہا ہے:**
-- **ویب پیج کے عنوان** کو تبدیل کریں جو براؤزر ٹیب میں ظاہر ہوتا ہے
-- **پورے صفحے کے پس منظر کا رنگ** تبدیل کریں
-
-### متغیرات: آپ کے پروگرام کا میموری سسٹم
+### متغیرات: آپ کے پروگرام کا میموری سسٹم  
 
-ٹھیک ہے، **متغیرات** ایمانداری سے میرے پسندیدہ تصورات میں سے ایک ہیں کیونکہ وہ ان چیزوں کی طرح ہیں جو آپ روزانہ استعمال کرتے ہیں!
+ٹھیک ہے، **متغیرات** ایمانداری سے میرے پسندیدہ تصورات میں سے ایک ہیں کیونکہ وہ ان چیزوں کی طرح ہیں جنہیں آپ ہر روز استعمال کرتے ہیں!  
 
-اپنے فون کی کانٹیکٹ لسٹ کے بارے میں ایک لمحے کے لیے سوچیں۔ آپ ہر کسی کا فون نمبر یاد نہیں رکھتے – اس کے بجائے، آپ "ماں"، "بہترین دوست"، یا "پیزا پلیس جو رات 2 بجے تک ڈیلیور کرتا ہے" محفوظ کرتے ہیں اور اپنے فون کو اصل نمبر یاد رکھنے دیتے ہیں۔ متغیرات بالکل اسی طرح کام کرتے ہیں! وہ لیبل والے کنٹینرز کی طرح ہیں جہاں آپ کا پروگرام معلومات محفوظ کر سکتا ہے اور بعد میں اسے ایک ایسے نام کے ذریعے حاصل کر سکتا ہے جو واقعی معنی رکھتا ہو۔
+اپنے فون کی رابطہ فہرست کے بارے میں ایک لمحے کے لیے سوچیں۔ آپ سب کے فون نمبر یاد نہیں رکھتے – اس کے بجائے، آپ "ماں"، "بہترین دوست"، یا "پیزا پلیس جو رات 2 بجے تک ڈیلیور کرتی ہے" محفوظ کرتے ہیں اور اپنے فون کو اصل نمبر یاد رکھنے دیتے ہیں۔ متغیرات بالکل اسی طرح کام کرتے ہیں! وہ لیبل والے کنٹینرز کی طرح ہیں جہاں آپ کا پروگرام معلومات ذخیرہ کر سکتا ہے اور بعد میں ایک نام کا استعمال کرتے ہوئے اسے بازیافت کر سکتا ہے جو واقعی معنی رکھتا ہے۔  
 
-یہاں جو چیز واقعی دلچسپ ہے: متغیرات آپ کے پروگرام کے چلنے کے ساتھ ساتھ تبدیل ہو سکتے ہیں (اسی لیے انہیں "متغیر" کہا جاتا ہے – دیکھیں انہوں نے کیا کیا؟)۔ بالکل اسی طرح جیسے آپ اس پیزا پلیس کانٹیکٹ کو اپ ڈیٹ کر سکتے ہیں جب آپ کہیں اور بہتر جگہ دریافت کرتے ہیں، متغیرات کو اپ ڈیٹ کیا جا سکتا ہے کیونکہ آپ کا پروگرام نئی معلومات سیکھتا ہے یا حالات بدلتے ہیں!
+یہاں جو چیز واقعی ٹھنڈی ہے: جیسے جیسے آپ کا پروگرام چلتا ہے، متغیرات تبدیل ہو سکتے ہیں (اسی لیے نام "متغیر" ہے – دیکھیں انہوں نے کیا کیا؟)۔ بالکل اسی طرح جیسے آپ اس پیزا پلیس رابطے کو اپ ڈیٹ کر سکتے ہیں جب آپ کو کہیں اور بہتر جگہ مل جائے، متغیرات کو اپ ڈیٹ کیا جا سکتا ہے کیونکہ آپ کا پروگرام نئی معلومات سیکھتا ہے یا حالات بدلتے ہیں!  
 
-مجھے آپ کو دکھانے دیں کہ یہ کتنا خوبصورت اور آسان ہو سکتا ہے:
+مجھے آپ کو دکھانے دیں کہ یہ کتنا خوبصورت اور آسان ہو سکتا ہے:  
 
 ```javascript
 // Step 1: Creating basic variables
@@ -236,12 +274,12 @@ let currentWeather = "sunny";
 let temperature = 75;                       
 let isRaining = false;                      
 ```
-
-**ان تصورات کو سمجھنا:**
-- **غیر تبدیل ہونے والی اقدار** کو `const` متغیرات میں محفوظ کریں (جیسے سائٹ کا نام)
-- **`let` استعمال کریں** ان اقدار کے لیے جو آپ کے پروگرام کے دوران تبدیل ہو سکتی ہیں
-- **مختلف ڈیٹا ٹائپس تفویض کریں**: سٹرنگز (متن)، نمبر، اور بوولینز (سچ/جھوٹ)
-- **وضاحتی نام منتخب کریں** جو ہر متغیر میں موجود مواد کی وضاحت کریں
+  
+**ان تصورات کو سمجھنا:**  
+- **غیر تبدیل ہونے والی اقدار کو `const` متغیرات میں ذخیرہ کریں** (جیسے سائٹ کا نام)  
+- **اپنے پروگرام کے دوران تبدیل ہونے والی اقدار کے لیے `let` استعمال کریں**  
+- **مختلف ڈیٹا کی اقسام تفویض کریں**: سٹرنگز (متن)، نمبر، اور بوولینز (سچ/جھوٹ)  
+- **وضاحتی نام منتخب کریں** جو بتاتے ہیں کہ ہر متغیر میں کیا ہے  
 
 ```javascript
 // Step 2: Working with objects to group related data
@@ -251,11 +289,11 @@ const weatherData = {
   windSpeed: 12
 };
 ```
-
-**اوپر، ہم نے:**
-- **ایک آبجیکٹ بنایا** تاکہ متعلقہ موسمی معلومات کو ایک ساتھ گروپ کیا جا سکے
-- **متعدد ڈیٹا کے ٹکڑوں کو** ایک متغیر نام کے تحت منظم کیا
-- **کلیدی قدر کے جوڑوں کا استعمال کیا** تاکہ ہر معلومات کے ٹکڑے کو واضح طور پر لیبل کیا جا سکے
+  
+**اوپر، ہم نے:**  
+- **ایک آبجیکٹ بنایا** تاکہ متعلقہ موسمی معلومات کو ایک ساتھ گروپ کیا جا سکے  
+- **متعدد ڈیٹا کے ٹکڑوں کو ایک متغیر نام کے تحت منظم کیا**  
+- **ہر معلومات کے ٹکڑے کو واضح طور پر لیبل کرنے کے لیے کلیدی قدر کے جوڑے استعمال کیے**  
 
 ```javascript
 // Step 3: Using and updating variables
@@ -266,33 +304,33 @@ console.log(`Wind speed: ${weatherData.windSpeed} mph`);
 currentWeather = "cloudy";                  
 temperature = 68;                          
 ```
-
-**آئیے ہر حصے کو سمجھیں:**
-- **معلومات دکھائیں** ٹیمپلیٹ لیٹرلز کا استعمال کرتے ہوئے `${}` سینٹیکس کے ساتھ
-- **آبجیکٹ پراپرٹیز تک رسائی حاصل کریں** ڈاٹ نوٹیشن (`weatherData.windSpeed`) کا استعمال کرتے ہوئے
-- **`let` کے ساتھ اعلان کردہ متغیرات کو اپ ڈیٹ کریں** تاکہ بدلتے حالات کی عکاسی ہو
-- **متعدد متغیرات کو یکجا کریں** تاکہ بامعنی پیغامات بنائے جا سکیں
+  
+**آئیے ہر حصے کو سمجھیں:**  
+- **معلومات کو ٹیمپلیٹ لیٹرلز کا استعمال کرتے ہوئے دکھائیں** `${}` نحو کے ساتھ  
+- **ڈاٹ نوٹیشن کا استعمال کرتے ہوئے آبجیکٹ پراپرٹیز تک رسائی حاصل کریں** (`weatherData.windSpeed`)  
+- **حالات کو تبدیل کرنے کی عکاسی کرنے کے لیے `let` کے ساتھ اعلان کردہ متغیرات کو اپ ڈیٹ کریں**  
+- **بامعنی پیغامات بنانے کے لیے متعدد متغیرات کو یکجا کریں**  
 
 ```javascript
 // Step 4: Modern destructuring for cleaner code
 const { location, humidity } = weatherData; 
 console.log(`${location} humidity: ${humidity}%`);
 ```
+  
+**آپ کو کیا جاننے کی ضرورت ہے:**  
+- **آبجیکٹس سے مخصوص پراپرٹیز نکالیں** ڈیسٹرکچرنگ اسائنمنٹ کا استعمال کرتے ہوئے  
+- **آبجیکٹ کیز کے جیسے ناموں کے ساتھ خود بخود نئے متغیرات بنائیں**  
+- **بار بار ڈاٹ نوٹیشن سے بچ کر کوڈ کو آسان بنائیں**  
 
-**آپ کو کیا جاننے کی ضرورت ہے:**
-- **آبجیکٹس سے مخصوص پراپرٹیز نکالیں** ڈسٹرکچرنگ اسائنمنٹ کا استعمال کرتے ہوئے
-- **خود بخود نئے متغیرات بنائیں** جو آبجیکٹ کیز کے ناموں کے مطابق ہوں
-- **ڈاٹ نوٹیشن کو بار بار استعمال کرنے سے بچتے ہوئے** کوڈ کو آسان بنائیں
-
-### کنٹرول فلو: اپنے پروگرام کو سوچنا سکھائیں
+### کنٹرول فلو: اپنے پروگرام کو سوچنا سکھائیں  
 
-ٹھیک ہے، یہ وہ جگہ ہے جہاں پروگرامنگ بالکل حیرت انگیز ہو جاتی ہے! **کنٹرول فلو** بنیادی طور پر آپ کے پروگرام کو سکھانا ہے کہ ہوشیار فیصلے کیسے کیے جائیں، بالکل اسی طرح جیسے آپ ہر روز بغیر سوچے سمجھے کرتے ہیں۔
+ٹھیک ہے، یہ وہ جگہ ہے جہاں پروگرامنگ بالکل حیرت انگیز ہو جاتی ہے! **کنٹرول فلو** بنیادی طور پر آپ کے پروگرام کو ہوشیار فیصلے کرنے کا طریقہ سکھا رہا ہے، بالکل اسی طرح جیسے آپ ہر روز بغیر سوچے سمجھے کرتے ہیں۔  
 
-تصور کریں: آج صبح آپ نے شاید کچھ ایسا کیا ہوگا "اگر بارش ہو رہی ہے، تو میں چھتری لے لوں گا۔ اگر سردی ہے، تو میں جیکٹ پہنوں گا۔ اگر دیر ہو رہی ہے، تو میں ناشتہ چھوڑ دوں گا اور راستے میں کافی لے لوں گا۔" آپ کا دماغ قدرتی طور پر اس اگر-تو منطق کی پیروی روزانہ درجنوں بار کرتا ہے!
+تصور کریں: آج صبح آپ نے شاید کچھ ایسا کیا ہوگا "اگر بارش ہو رہی ہے، تو میں چھتری لے جاؤں گا۔ اگر سردی ہے، تو میں جیکٹ پہنوں گا۔ اگر دیر ہو رہی ہے، تو میں ناشتہ چھوڑ دوں گا اور راستے میں کافی لے لوں گا۔" آپ کا دماغ قدرتی طور پر اس اگر-تو منطق کی روزانہ درجنوں بار پیروی کرتا ہے!  
 
-یہی وہ چیز ہے جو پروگراموں کو ذہین اور زندہ محسوس کرتی ہے بجائے اس کے کہ وہ صرف کسی بورنگ، پیش گوئی کے اسکرپٹ کی پیروی کریں۔ وہ واقعی کسی صورتحال کو دیکھ سکتے ہیں، جو ہو رہا ہے اس کا اندازہ لگا سکتے ہیں، اور مناسب جواب دے سکتے ہیں۔ یہ آپ کے پروگرام کو ایک ایسا دماغ دینے جیسا ہے جو ڈھل سکتا ہے اور انتخاب کر سکتا ہے!
+یہی وہ چیز ہے جو پروگراموں کو ذہین اور زندہ محسوس کرتی ہے بجائے اس کے کہ وہ صرف کسی بورنگ، پیش گوئی کے اسکرپٹ کی پیروی کریں۔ وہ واقعی کسی صورتحال کو دیکھ سکتے ہیں، جو ہو رہا ہے اس کا اندازہ لگا سکتے ہیں، اور مناسب جواب دے سکتے ہیں۔ یہ آپ کے پروگرام کو ایک دماغ دینے جیسا ہے جو ڈھال سکتا ہے اور انتخاب کر سکتا ہے!  
 
-کیا آپ دیکھنا چاہتے ہیں کہ یہ کتنی خوبصورتی سے کام کرتا ہے؟ مجھے آپ کو دکھانے دیں:
+یہ کیسے کام کرتا ہے، یہ دیکھنا چاہتے ہیں؟ مجھے آپ کو دکھانے دیں:  
 
 ```javascript
 // Step 1: Basic conditional logic
@@ -305,12 +343,12 @@ if (userAge >= 18) {
   console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
 }
 ```
-
-**یہ کوڈ کیا کرتا ہے:**
-- **چیک کریں** کہ آیا صارف کی عمر ووٹنگ کی ضرورت کو پورا کرتی ہے
-- **مختلف کوڈ بلاکس پر عمل کریں** شرط کے نتیجے کی بنیاد پر
-- **حساب لگائیں** اور دکھائیں کہ ووٹنگ کی اہلیت تک کتنے سال باقی ہیں اگر عمر 18 سے کم ہو
-- **ہر منظر نامے کے لیے مخصوص، مددگار فیڈبیک فراہم کریں**
+  
+**یہ کوڈ کیا کرتا ہے:**  
+- **چیک کریں** کہ آیا صارف کی عمر ووٹنگ کی ضرورت کو پورا کرتی ہے  
+- **شرط کے نتیجے کی بنیاد پر مختلف کوڈ بلاکس پر عمل کریں**  
+- **ووٹنگ کی اہلیت تک کتنا وقت باقی ہے حساب کریں اور دکھائیں اگر عمر 18 سے کم ہو**  
+- **ہر منظر نامے کے لیے مخصوص، مددگار تاثرات فراہم کریں**  
 
 ```javascript
 // Step 2: Multiple conditions with logical operators
@@ -325,23 +363,23 @@ if (userAge >= 18 && hasPermission) {
   console.log("Sorry, you must be at least 16 years old.");
 }
 ```
-
-**یہاں کیا ہوتا ہے اس کو توڑنا:**
-- **متعدد شرائط کو یکجا کریں** `&&` (اور) آپریٹر کا استعمال کرتے ہوئے
-- **شرائط کی ایک درجہ بندی بنائیں** `else if` کا استعمال کرتے ہوئے متعدد منظرناموں کے لیے
-- **تمام ممکنہ کیسز کو ہینڈل کریں** ایک آخری `else` بیان کے ساتھ
-- **ہر مختلف صورتحال کے لیے واضح، قابل عمل فیڈبیک فراہم کریں**
+  
+**یہاں کیا ہوتا ہے اس کو توڑنا:**  
+- **متعدد شرائط کو `&&` (اور) آپریٹر کا استعمال کرتے ہوئے یکجا کریں**  
+- **متعدد منظرناموں کے لیے `else if` کا استعمال کرتے ہوئے شرائط کی درجہ بندی بنائیں**  
+- **تمام ممکنہ کیسز کو ایک آخری `else` بیان کے ساتھ ہینڈل کریں**  
+- **ہر مختلف صورتحال کے لیے واضح، قابل عمل تاثرات فراہم کریں**  
 
 ```javascript
 // Step 3: Concise conditional with ternary operator
 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
 console.log(`Status: ${votingStatus}`);
 ```
-
-**آپ کو یاد رکھنے کی ضرورت ہے:**
-- **دو آپشنز کی سادہ شرائط کے لیے** ٹرنری آپریٹر (`? :`) استعمال کریں
-- **پہلے شرط لکھیں**، اس کے بعد `?`، پھر سچ نتیجہ، پھر `:`، پھر جھوٹا نتیجہ
-- **اس پیٹرن کو اپلائی کریں** جب آپ کو شرائط کی بنیاد پر اقدار تفویض کرنے کی ضرورت ہو
+  
+**آپ کو یاد رکھنے کی ضرورت ہے:**  
+- **سادہ دو آپشن شرائط کے لیے ٹرنری آپریٹر (`? :`) استعمال کریں**  
+- **پہلے شرط لکھیں، اس کے بعد `?`، پھر سچ نتیجہ، پھر `:`، پھر جھوٹ نتیجہ**  
+- **جب آپ کو شرائط کی بنیاد پر اقدار تفویض کرنے کی ضرورت ہو تو اس پیٹرن کو لاگو کریں**  
 
 ```javascript
 // Step 4: Handling multiple specific cases
@@ -363,103 +401,144 @@ switch (dayOfWeek) {
     console.log("Invalid day of the week");
 }
 ```
+  
+**یہ کوڈ درج ذیل کو پورا کرتا ہے:**  
+- **متغیر کی قدر کو متعدد مخصوص کیسز کے خلاف ملائیں**  
+- **مشابہت والے کیسز کو ایک ساتھ گروپ کریں** (ہفتے کے دن بمقابلہ ہفتے کے آخر)  
+- **جب کوئی میچ مل جائے تو مناسب کوڈ بلاک پر عمل کریں**  
+- **غیر متوقع اقدار کو ہینڈل کرنے کے لیے `default` کیس شامل کریں**  
+- **اگلے کیس پر کوڈ کے جاری رہنے سے روکنے کے لیے `break` بیانات استعمال کریں**  
+
+> 💡 **حقیقی دنیا کی مثال**: کنٹرول فلو کو دنیا کے سب سے زیادہ صبر کرنے والے GPS کی طرح سمجھیں جو آپ کو ہدایات دے رہا ہے۔ یہ کہہ سکتا ہے "اگر مین اسٹریٹ پر ٹریفک ہے، تو ہائی وے لیں۔ اگر ہائی وے پر تعمیراتی کام ہو رہا ہے، تو خوبصورت راستہ آزمائیں۔" پروگرام بالکل اسی قسم کی مشروط منطق کا استعمال کرتے ہیں تاکہ مختلف حالات کا ذہانت سے جواب دیں اور ہمیشہ صارفین کو بہترین ممکنہ تجربہ فراہم کریں۔  
+
+### 🎯 **تصور کی جانچ: بنیادی اجزاء کی مہارت**  
+
+**آئیے دیکھتے ہیں کہ آپ بنیادی باتوں کے ساتھ کیسے کر رہے ہیں:**  
+- کیا آپ اپنے الفاظ میں متغیر اور بیان کے درمیان فرق کی وضاحت کر سکتے ہیں؟  
+- ایک حقیقی دنیا کا منظر نامہ سوچیں جہاں آپ اگر-تو فیصلہ استعمال کریں گے (جیسے ہمارا ووٹنگ کی مثال)  
+- پروگرامنگ منطق کے بارے میں ایک چیز کیا ہے جس نے آپ کو حیران کیا؟  
+
+**فوری اعتماد بڑھانے والا:**  
+```mermaid
+flowchart LR
+    A["📝 Statements<br/>(Instructions)"] --> B["📦 Variables<br/>(Storage)"] --> C["🔀 Control Flow<br/>(Decisions)"] --> D["🎉 Working Program!"]
+    
+    style A fill:#ffeb3b
+    style B fill:#4caf50
+    style C fill:#2196f3
+    style D fill:#ff4081
+```
+  
+✅ **آگے کیا آنے والا ہے**: ہم ان تصورات میں مزید گہرائی میں جانے کے لیے ایک زبردست وقت گزارنے والے ہیں جب ہم اس ناقابل یقین سفر کو ایک ساتھ جاری رکھیں گے! ابھی، بس ان تمام حیرت انگیز امکانات کے بارے میں جوش محسوس کرنے پر توجہ مرکوز کریں۔ مخصوص مہارتیں اور تکنیکیں قدرتی طور پر چپک جائیں گی جب ہم ایک ساتھ مشق کریں گے – میں وعدہ کرتا ہوں کہ یہ آپ کی توقع سے کہیں زیادہ مزہ آنے والا ہے!  
+
+## تجارت کے اوزار  
+
+ٹھیک ہے، یہ ایمانداری سے وہ جگہ ہے جہاں میں اتنا پرجوش ہو جاتا ہوں کہ میں خود کو بمشکل قابو میں رکھ سکتا ہوں! 🚀 ہم ان ناقابل یقین ٹولز کے بارے میں بات کرنے والے ہیں جو آپ کو ایسا محسوس کریں گے جیسے آپ کو ڈیجیٹل خلائی جہاز کی چابیاں دی گئی ہیں۔  
+
+آپ جانتے ہیں کہ ایک شیف کے پاس وہ بالکل متوازن چاقو ہوتے ہیں جو ان کے ہاتھوں کے توسیع کی طرح محسوس ہوتے ہیں؟ یا ایک موسیقار کے پاس وہ ایک گٹار ہوتا ہے جو ان کے چھونے کے لمحے گاتا ہوا لگتا ہے؟ ٹھیک ہے، ڈویلپرز کے پاس ہمارے اپنے ورژن ہیں ان جادوئی ٹولز کے، اور یہاں وہ چیز ہے جو آپ کے دماغ کو بالکل اڑا دے گی – ان میں سے زیادہ تر مکمل طور پر مفت ہیں!  
+
+میں آپ کے ساتھ ان کا اشتراک کرنے کے بارے میں سوچتے ہوئے اپنی کرسی پر اچھل رہا ہوں کیونکہ انہوں نے مکمل طور پر انقلاب برپا کر دیا ہے کہ ہم سافٹ ویئر کیسے بناتے ہیں۔ ہم AI سے چلنے والے کوڈنگ اسسٹنٹس کے بارے میں بات کر رہے ہیں جو آپ کے کوڈ کو لکھنے میں مدد کر سکتے ہیں (میں مذاق بھی نہیں کر رہا ہوں!)، کلاؤڈ ماحول جہاں آپ کہیں بھی Wi-Fi کے ساتھ پورے ایپلیکیشنز بنا سکتے ہیں، اور ڈیبگنگ ٹولز جو اتنے نفیس ہیں کہ وہ آپ کے پروگراموں کے لیے ایکس رے وژن رکھنے جیسے ہیں۔  
+
+اور یہاں وہ حصہ ہے جو مجھے اب بھی جھنجھوڑ دیتا ہے: یہ "ابتدائی ٹولز" نہیں ہیں جنہیں آپ بڑھا دیں گے۔ یہ وہی پیشہ ورانہ گریڈ کے ٹولز ہیں جو گوگل، نیٹ فلکس، اور وہ انڈی ایپ اسٹوڈیو جسے آپ پسند کرتے ہیں، اس وقت استعمال کر رہے ہیں۔ آپ انہیں استعمال کرتے ہوئے ایک پرو کی طرح محسوس کریں گے!  
+
+```mermaid
+graph TD
+    A["💡 Your Idea"] --> B["⌨️ Code Editor<br/>(VS Code)"] 
+    B --> C["🌐 Browser DevTools<br/>(Testing & Debugging)"]
+    C --> D["⚡ Command Line<br/>(Automation & Tools)"]
+    D --> E["📚 Documentation<br/>(Learning & Reference)"]
+    E --> F["🚀 Amazing Web App!"]
+    
+    B -.-> G["🤖 AI Assistant<br/>(GitHub Copilot)"]
+    C -.-> H["📱 Device Testing<br/>(Responsive Design)"]
+    D -.-> I["📦 Package Managers<br/>(npm, yarn)"]
+    E -.-> J["👥 Community<br/>(Stack Overflow)"]
+    
+    style A fill:#fff59d
+    style F fill:#c8e6c9
+    style G fill:#e1f5fe
+    style H fill:#f3e5f5
+    style I fill:#ffccbc
+    style J fill:#e8eaf6
+```
+  
+### کوڈ ایڈیٹرز اور IDEs: آپ کے نئے ڈیجیٹل بہترین دوست  
 
-**یہ کوڈ درج ذیل کو پورا کرتا ہے:**
-- **متغیر کی قدر کو متعدد مخصوص کیسز کے خلاف میچ کریں**
-- **مشابہ کیسز کو ایک ساتھ گروپ کریں** (ہفتے کے دن بمقابلہ ہفتے کے آخر)
-- **مناسب کوڈ بلاک پر عمل کریں** جب کوئی میچ مل جائے
-- **غیر متوقع اقدار کو ہینڈل کرنے کے لیے** ایک `default` کیس شامل کریں
-- **`break` بیانات کا استعمال کریں** تاکہ کوڈ اگلے کیس پر جاری نہ رہے
-
-> 💡 **حقیقی دنیا کی مثال**: کنٹرول فلو کو دنیا کے سب سے زیادہ صبر کرنے والے GPS کی طرح سمجھیں جو آپ کو ہدایات دے رہا ہے۔ یہ کہہ سکتا ہے "اگر مین اسٹریٹ پر ٹریفک ہے، تو ہائی وے لے لیں۔ اگر ہائی وے پر تعمیراتی کام ہو رہا ہے، تو خوبصورت راستہ آزمائیں۔" پروگرام بالکل اسی قسم کی مشروط منطق کا استعمال کرتے ہیں تاکہ مختلف حالات کے لیے ذہانت سے جواب دیں اور ہمیشہ صارفین کو بہترین ممکنہ تجربہ فراہم کریں۔
-
-✅ **آگے کیا آنے والا ہے**: ہم ان تصورات میں مزید گہرائی میں جانے کے لیے ایک زبردست وقت گزارنے والے ہیں جب ہم اس ناقابل یقین سفر کو ایک ساتھ جاری رکھیں گے! ابھی، صرف ان تمام حیرت انگیز امکانات کے بارے میں جوش محسوس کرنے پر توجہ مرکوز کریں جو آپ کے سامنے ہیں۔ مخصوص مہارتیں اور تکنیکیں قدرتی طور پر چپک جائیں گی جب ہم ایک ساتھ مشق کریں گے – میں وعدہ کرتا ہوں کہ یہ آپ کی توقع سے کہیں زیادہ مزے کا ہوگا!
-
-## کام کے اوزار
-
-ٹھیک ہے، یہ وہ جگہ ہے جہاں میں اتنا پرجوش ہو جاتا ہوں کہ خود کو قابو میں رکھنا مشکل ہو جاتا ہے! 🚀 ہم ان حیرت انگیز اوزاروں کے بارے میں بات کرنے والے ہیں جو آپ کو ایسا محسوس کریں گے جیسے آپ کو ایک ڈیجیٹل خلائی جہاز کی چابیاں دی گئی ہیں۔
-
-آپ جانتے ہیں کہ ایک شیف کے پاس وہ بالکل متوازن چاقو ہوتے ہیں جو ان کے ہاتھوں کا حصہ لگتے ہیں؟ یا ایک موسیقار کے پاس وہ ایک گٹار ہوتا ہے جو ان کے چھونے کے لمحے گاتا ہوا لگتا ہے؟ ٹھیک ہے، ڈویلپرز کے پاس ہمارے اپنے ورژن ہیں ان جادوئی اوزاروں کے، اور یہاں وہ چیز ہے جو آپ کے دماغ کو بالکل اڑا دے گی – ان میں سے زیادہ تر مکمل طور پر مفت ہیں!
-
-میں آپ کے ساتھ ان کا اشتراک کرنے کے بارے میں سوچتے ہوئے اپنی کرسی پر اچھل رہا ہوں کیونکہ انہوں نے مکمل طور پر اس بات کو بدل دیا ہے کہ ہم سافٹ ویئر کیسے بناتے ہیں۔ ہم AI سے چلنے والے کوڈنگ اسسٹنٹس کے بارے میں بات کر رہے ہیں جو کوڈ لکھنے میں مدد کر سکتے ہیں (میں مذاق نہیں کر رہا ہوں!)، کلاؤڈ ماحول جہاں آپ کہیں بھی Wi-Fi کے ساتھ پورے ایپلیکیشنز بنا سکتے ہیں، اور ڈیبگنگ ٹولز جو اتنے نفیس ہیں کہ وہ آپ کے پروگراموں کے لیے ایکس رے وژن رکھنے جیسے ہیں۔
-
-اور یہاں وہ حصہ ہے جو اب بھی مجھے جھنجھوڑ دیتا ہے: یہ "ابتدائی اوزار" نہیں ہیں جنہیں آپ بڑھا دیں گے۔ یہ بالکل وہی پیشہ ورانہ گریڈ کے اوزار ہیں جو گوگل، نیٹ فلکس، اور وہ انڈی ایپ اسٹوڈیو جسے آپ پسند کرتے ہیں، اس لمحے استعمال کر رہے ہیں۔ آپ انہیں استعمال کرتے ہوئے ایک پرو کی طرح محسوس کریں گے!
-
-### کوڈ ایڈیٹرز اور IDEs: آپ کے نئے ڈیجیٹل بہترین دوست
+آئیے کوڈ ایڈیٹرز کے بارے میں بات کرتے ہیں – یہ سنجیدگی سے آپ کے نئے پسندیدہ جگہیں بننے والے ہیں! انہیں اپنے ذاتی کوڈنگ سینکچرری کے طور پر سوچیں جہاں آپ اپنا زیادہ تر وقت اپنے ڈیجیٹل تخلیقات کو تیار کرنے اور کامل بنانے میں گزاریں گے۔  
 
-آئیے کوڈ ایڈیٹرز کے بارے میں بات کرتے ہیں – یہ واقعی آپ کے نئے پسندیدہ جگہیں بننے والے ہیں! انہیں اپنے ذاتی کوڈنگ سینکچری کے طور پر سوچیں جہاں آپ اپنا زیادہ تر وقت اپنے ڈیجیٹل تخلیقات کو تیار کرنے اور کامل بنانے میں گزاریں گے۔
+لیکن یہاں جدید ایڈیٹرز کے بارے میں جو چیز بالکل جادوئی ہے وہ یہ ہے: وہ صرف فینسی ٹیکسٹ ایڈیٹرز نہیں ہیں۔ وہ آپ کے ساتھ 24/7 بیٹھے سب سے زیادہ شاندار، معاون کوڈنگ مینٹور رکھنے جیسے ہیں۔ وہ آپ کی ٹائپوز کو پکڑتے ہیں اس سے پہلے کہ آپ انہیں محسوس کریں، ایسی بہتری تجویز کرتے ہیں جو آپ کو ایک جینئس کی طرح دکھاتی ہیں، آپ کو سمجھنے میں مدد کرتے ہیں کہ کوڈ کا ہر ٹکڑا کیا کرتا ہے، اور ان میں سے کچھ تو یہ بھی پیش کرتے ہیں کہ آپ کیا ٹائپ کرنے والے ہیں اور آپ کے خیالات کو ختم کرنے کی پیشکش کرتے ہیں!  
 
-لیکن یہاں جدید ایڈیٹرز کے بارے میں جو چیز بالکل جادوئی ہے: وہ صرف فینسی ٹیکسٹ ایڈیٹرز نہیں ہیں۔ وہ ایسے ہیں جیسے آپ کے ساتھ 24/7 بیٹھا ہوا سب سے شاندار، معاون کوڈنگ مینٹور ہو۔ وہ آپ کی ٹائپوز کو پکڑتے ہیں اس سے پہلے کہ آپ انہیں محسوس کریں، ایسی بہتری تجویز کرتے ہیں جو آپ کو ایک جینئس کی طرح دکھاتی ہیں، آپ کو یہ سمجھنے میں مدد دیتی ہیں کہ کوڈ کا ہر ٹکڑا کیا کرتا ہے، اور ان میں سے کچھ تو یہ بھی پیش کرتے ہیں کہ آپ کیا ٹائپ کرنے والے ہیں اور آپ کے خیالات کو ختم کرنے کی پیشکش کرتے ہیں!
+مجھے یاد ہے جب میں نے پہلی بار آٹو کمپلیشن دریافت کیا – مجھے لفظی طور پر ایسا لگا جیسے میں مستقبل میں رہ رہا ہوں۔ آپ کچھ ٹائپ کرنا شروع کرتے ہیں، اور آپ کا ایڈیٹر کہتا ہے، "ارے، کیا آپ اس فنکشن کے بارے میں سوچ رہے تھے جو بالکل وہی کرتا ہے جو آپ کو ضرورت ہے؟" یہ ایک دماغ پڑھنے والے کوڈنگ ساتھی رکھنے جیسا ہے!  
 
-مجھے یاد ہے جب میں نے پہلی بار آٹو کمپلیشن دریافت کیا – مجھے واقعی ایسا لگا جیسے میں مستقبل میں رہ رہا ہوں۔ آپ کچھ ٹائپ کرنا شروع کرتے ہیں، اور آپ کا ایڈیٹر کہتا ہے، "ارے، کیا آپ اس فنکشن کے بارے میں سوچ رہے تھے جو بالکل وہی کرتا ہے جو آپ کو چاہیے؟" یہ ایک ذہن پڑھنے والے کوڈنگ ساتھی کے طور پر رکھنے جیسا ہے!
+**یہ ایڈیٹرز کو اتنا ناقابل یقین کیا بناتا ہے؟**  
 
-**یہ ایڈیٹرز کو اتنا ناقابل یقین کیا بناتا ہے؟**
+جدید کوڈ ایڈیٹرز پیداواری صلاحیت کو بڑھانے کے لیے متاثر کن خصوصیات کی ایک صف پیش کرتے ہیں:  
 
-جدید کوڈ ایڈیٹرز پیداواری صلاحیت کو بڑھانے کے لیے متاثر کن خصوصیات کی ایک صف پیش کرتے ہیں:
+| خصوصیت | یہ کیا کرتی ہے | یہ کیوں مدد کرتی ہے |  
+|---------|--------------|--------------|  
+| **سینٹیکس ہائی لائٹنگ** | آپ کے کوڈ کے مختلف حصوں کو رنگ دیتی ہے | کوڈ کو پڑھنے اور غلطیوں کو دیکھنے میں آسان بناتی ہے |  
+| **آٹو کمپلیشن** | آپ کے ٹائپ کرنے کے ساتھ کوڈ تجویز کرتی ہے | کوڈنگ کو تیز کرتی ہے اور ٹائپوز کو کم کرتی ہے |  
+| **ڈیبگنگ ٹولز** | آپ کو غلطیاں تلاش کرنے اور ٹھیک کرنے میں مدد کرتی ہیں | خرابیوں کا سراغ لگانے کے وقت کو بچاتی ہیں |  
+| **ایکسٹینشنز** | خصوصی خصوصیات شامل کرتی ہیں | کسی بھی ٹیکنالوجی کے لیے اپنے ایڈیٹر کو حسب ضرورت بنائیں |  
+| **AI اسسٹنٹس** | کوڈ اور وضاحتیں تجویز کرتی ہیں | سیکھنے اور پیداواری صلاحیت کو تیز کرتی ہیں |  
 
-| خصوصیت | یہ کیا کرتی ہے | یہ کیوں مدد کرتی ہے |
-|---------|--------------|--------------|
-| **سینٹیکس ہائی لائٹنگ** | آپ کے کوڈ کے مختلف حصوں کو رنگ دیتی ہے | کوڈ کو پڑھنے اور غلطیوں کو دیکھنے میں آسان بناتی ہے |
-| **آٹو کمپلیشن** | ٹائپ کرتے وقت کوڈ تجویز کرتی ہے | کوڈنگ کو تیز کرتی ہے اور ٹائپوز کو کم کرتی ہے |
-| **ڈیبگنگ ٹولز** | آپ کو غلطیاں تلاش کرنے اور ٹھیک کرنے میں مدد دیتی ہیں | گھنٹوں کی ٹربل شوٹنگ کا وقت بچاتی ہیں |
-| **ایکسٹینشنز** | خصوصی خصوصیات شامل کرتی ہیں | کسی بھی ٹیکنالوجی کے لیے اپنے ایڈیٹر کو حسب ضرورت بنائیں |
-| **AI اسسٹنٹس** | کوڈ اور وضاحتیں تجویز کرتے ہیں | سیکھنے اور پیداواری صلاحیت کو تیز کرتی ہیں |
+> 🎥 **ویڈیو وسائل**: کیا آپ ان ٹولز کو ایکشن میں دیکھنا چاہتے ہیں؟ اس [تجارت کے اوزار ویڈیو](https://youtube.com/watch?v=69WJeXGBdxg) کو ایک جامع جائزہ کے لیے دیکھیں۔  
 
-> 🎥 **ویڈیو ریسورس**: کیا آپ ان ٹولز کو ایکشن میں دیکھنا چاہتے ہیں؟ اس [Tools of the Trade ویڈیو](https://youtube.com/watch?v=69WJeXGBdxg) کو دیکھیں ایک جامع جائزے کے لیے۔
+#### ویب ڈویلپمنٹ کے لیے تجویز کردہ ایڈیٹرز  
 
-#### ویب ڈیویلپمنٹ کے لیے تجویز کردہ ایڈیٹرز
+**[ویژول اسٹوڈیو کوڈ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (مفت)  
+- ویب ڈویلپرز میں سب سے زیادہ مقبول  
+- بہترین ایکسٹینشن ایکو سسٹم  
+- بلٹ ان ٹرمینل اور گٹ انٹیگریشن  
+- **ضروری ایکسٹینشنز**:  
+  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI سے چلنے والی کوڈ تجاویز  
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - حقیقی وقت تعاون  
+  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - خودکار کوڈ فارمیٹنگ  
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - آپ کے کوڈ میں ٹائپوز کو پکڑیں  
 
-**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (مفت)
-- ویب ڈیویلپرز میں سب سے زیادہ مقبول
-- شاندار ایکسٹینشن ایکو سسٹم
-- بلٹ ان ٹرمینل اور Git انٹیگریشن
-- **ضروری ایکسٹینشنز**:
-  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI سے چلنے والی کوڈ تجاویز
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - ریئل ٹائم تعاون
-  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - خودکار کوڈ فارمیٹنگ
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - کوڈ میں ٹائپوز کو پکڑیں
+**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (ادا شدہ، طلباء کے لیے مفت)  
+- اعلی درجے کے ڈیبگنگ اور ٹیسٹنگ ٹولز  
+- ذہین کوڈ کمپلیشن  
+- بلٹ ان ورژن کنٹرول  
 
-**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (ادائیگی شدہ، طلباء کے لیے مفت)
-- جدید ڈیبگنگ اور ٹیسٹنگ ٹولز
-- ذہین کوڈ کمپلیشن
-- بلٹ ان ورژن کنٹرول
+**کلاؤڈ
+جب پہلی بار کسی نے مجھے براؤزر ڈیولپر ٹولز دکھائے، تو میں نے تقریباً تین گھنٹے صرف کلک کرتے ہوئے گزارے اور بار بار کہا، "رکو، یہ بھی کر سکتا ہے؟!" آپ واقعی کسی بھی ویب سائٹ کو حقیقی وقت میں ایڈٹ کر سکتے ہیں، دیکھ سکتے ہیں کہ سب کچھ کتنی تیزی سے لوڈ ہوتا ہے، مختلف ڈیوائسز پر اپنی سائٹ کی شکل کو ٹیسٹ کر سکتے ہیں، اور جاوا اسکرپٹ کو ایک ماہر کی طرح ڈیبگ کر سکتے ہیں۔ یہ بالکل حیرت انگیز ہے!
 
-**کلاؤڈ بیسڈ IDEs** (مختلف قیمتیں)
-- [GitHub Codespaces](https://github.com/features/codespaces) - آپ کے براؤزر میں مکمل VS کوڈ
-- [Replit](https://replit.com/) - سیکھنے اور کوڈ شیئر کرنے کے لیے بہترین
-- [StackBlitz](https://stackblitz.com/) - فوری، فل اسٹیک ویب ڈیویلپمنٹ
+**یہی وجہ ہے کہ براؤزرز آپ کا خفیہ ہتھیار ہیں:**
 
-> 💡 **شروع کرنے کی تجویز**: Visual Studio Code سے شروع کریں – یہ مفت ہے، صنعت میں بڑے پیمانے پر استعمال ہوتا ہے، اور اس کے پاس مددگار ٹیوٹوریلز اور ایکسٹینشنز بنانے والی ایک بڑی کمیونٹی ہے۔
+جب آپ کوئی ویب سائٹ یا ویب ایپلیکیشن بناتے ہیں، تو آپ کو دیکھنا ہوتا ہے کہ یہ حقیقی دنیا میں کیسی نظر آتی ہے اور کیسے کام کرتی ہے۔ براؤزرز نہ صرف آپ کا کام دکھاتے ہیں بلکہ کارکردگی، رسائی، اور ممکنہ مسائل کے بارے میں تفصیلی فیڈبیک بھی فراہم کرتے ہیں۔
 
-### ویب براؤزرز: آپ کی خفیہ ڈیویلپمنٹ لیبارٹری
+#### براؤزر ڈیولپر ٹولز (DevTools)
 
-ٹھیک ہے, اپنے دماغ کو مکمل طور پر اڑانے کے لیے تیار ہو جائیں! آپ جانتے ہیں کہ آپ براؤزرز کو سوشل میڈیا پر سکرول کرنے اور ویڈیوز دیکھنے کے لیے استعمال کر رہے ہیں؟ ٹھیک ہے, یہ پتہ چلتا ہے کہ وہ اس ناقابل یقین خفیہ ڈیویلپر لیبارٹری کو چھپا رہے ہیں جو اس وقت تک انتظار کر رہی ہے جب تک آپ اسے دریافت نہ کریں!
+جدید براؤزرز میں جامع ڈیولپمنٹ سوئٹس شامل ہیں:
 
-ہر بار جب آپ کسی ویب
-| **کنسول** | غلطی کے پیغامات دیکھیں اور جاوا اسکرپٹ ٹیسٹ کریں | مسائل کو ڈیبگ کریں اور کوڈ کے ساتھ تجربہ کریں |
-| **نیٹ ورک مانیٹر** | وسائل کے لوڈ ہونے کا پتہ لگائیں | کارکردگی اور لوڈنگ وقت کو بہتر بنائیں |
-| **ایکسسیبیلٹی چیکر** | جامع ڈیزائن کے لیے ٹیسٹ کریں | یقینی بنائیں کہ آپ کی سائٹ تمام صارفین کے لیے کام کرتی ہے |
-| **ڈیوائس سیمولیٹر** | مختلف اسکرین سائز پر پیش نظارہ کریں | بغیر متعدد ڈیوائسز کے ریسپانسیو ڈیزائن ٹیسٹ کریں |
+| ٹول کی قسم | یہ کیا کرتا ہے | استعمال کی مثال |
+|------------|----------------|------------------|
+| **ایلیمنٹ انسپیکٹر** | HTML/CSS کو حقیقی وقت میں دیکھیں اور ایڈٹ کریں | اسٹائلنگ کو ایڈجسٹ کریں اور فوری نتائج دیکھیں |
+| **کنسول** | ایرر میسجز دیکھیں اور جاوا اسکرپٹ ٹیسٹ کریں | مسائل کو ڈیبگ کریں اور کوڈ کے ساتھ تجربہ کریں |
+| **نیٹ ورک مانیٹر** | وسائل کے لوڈ ہونے کا ٹریک کریں | کارکردگی اور لوڈنگ وقت کو بہتر بنائیں |
+| **ایکسس ایبلٹی چیکر** | انکلوسیو ڈیزائن کے لیے ٹیسٹ کریں | یقینی بنائیں کہ آپ کی سائٹ تمام صارفین کے لیے کام کرتی ہے |
+| **ڈیوائس سیمولیٹر** | مختلف اسکرین سائزز پر پیش نظارہ کریں | بغیر متعدد ڈیوائسز کے ریسپانسیو ڈیزائن ٹیسٹ کریں |
 
-#### ترقی کے لیے تجویز کردہ براؤزرز
+#### ڈیولپمنٹ کے لیے تجویز کردہ براؤزرز
 
-- **[کروم](https://developers.google.com/web/tools/chrome-devtools/)** - انڈسٹری اسٹینڈرڈ ڈیول ٹولز کے ساتھ وسیع دستاویزات
-- **[فائر فاکس](https://developer.mozilla.org/docs/Tools)** - بہترین CSS گرڈ اور ایکسسیبیلٹی ٹولز
-- **[ایج](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - کرومیم پر مبنی، مائیکروسافٹ کے ڈیولپر وسائل کے ساتھ
+- **[کروم](https://developers.google.com/web/tools/chrome-devtools/)** - انڈسٹری اسٹینڈرڈ DevTools کے ساتھ وسیع دستاویزات
+- **[فائر فاکس](https://developer.mozilla.org/docs/Tools)** - بہترین CSS گرڈ اور ایکسس ایبلٹی ٹولز
+- **[ایج](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - کرومیئم پر مبنی، مائیکروسافٹ کے ڈیولپر وسائل کے ساتھ
 
-> ⚠️ **اہم ٹیسٹنگ ٹپ**: ہمیشہ اپنی ویب سائٹس کو مختلف براؤزرز میں ٹیسٹ کریں! جو کروم میں بہترین کام کرتا ہے وہ سفاری یا فائر فاکس میں مختلف نظر آ سکتا ہے۔ پیشہ ور ڈیولپرز تمام بڑے براؤزرز میں ٹیسٹ کرتے ہیں تاکہ صارفین کے تجربے کو مستقل بنایا جا سکے۔
+> ⚠️ **اہم ٹیسٹنگ ٹپ**: ہمیشہ اپنی ویب سائٹس کو متعدد براؤزرز میں ٹیسٹ کریں! جو کروم میں بالکل کام کرتا ہے وہ سفاری یا فائر فاکس میں مختلف نظر آ سکتا ہے۔ پروفیشنل ڈیولپرز تمام بڑے براؤزرز میں ٹیسٹ کرتے ہیں تاکہ صارفین کے تجربات کو مستقل رکھا جا سکے۔
 
 ### کمانڈ لائن ٹولز: ڈیولپر سپر پاورز کا گیٹ وے
 
-ٹھیک ہے، آئیے کمانڈ لائن کے بارے میں ایک بالکل ایماندار لمحہ گزاریں، کیونکہ میں چاہتا ہوں کہ آپ یہ کسی ایسے شخص سے سنیں جو واقعی اسے سمجھتا ہے۔ جب میں نے پہلی بار اسے دیکھا – بس یہ خوفناک سیاہ اسکرین جس پر ٹیکسٹ چمک رہا تھا – میں نے لفظی طور پر سوچا، "نہیں، بالکل نہیں! یہ کسی 1980 کی ہیکر فلم کی طرح لگتا ہے، اور میں اس کے لیے کافی ہوشیار نہیں ہوں!" 😅
+چلیں، یہاں کمانڈ لائن کے بارے میں ایک بالکل ایماندار لمحہ رکھتے ہیں، کیونکہ میں چاہتا ہوں کہ آپ یہ کسی ایسے شخص سے سنیں جو واقعی سمجھتا ہے۔ جب میں نے پہلی بار اسے دیکھا – بس یہ خوفناک سیاہ اسکرین جس پر ٹیکسٹ چمک رہا تھا – تو میں نے لفظی طور پر سوچا، "نہیں، بالکل نہیں! یہ 1980 کی دہائی کی ہیکر فلم جیسا لگتا ہے، اور میں یقینی طور پر اس کے لیے کافی ذہین نہیں ہوں!" 😅
 
-لیکن یہاں وہ بات ہے جو میں چاہتا ہوں کہ کسی نے مجھے اس وقت بتائی ہوتی، اور جو میں آپ کو ابھی بتا رہا ہوں: کمانڈ لائن خوفناک نہیں ہے – یہ دراصل آپ کے کمپیوٹر کے ساتھ براہ راست بات چیت کرنے جیسا ہے۔ اسے اس طرح سوچیں جیسے کھانے کا آرڈر دینا کسی فینسی ایپ کے ذریعے جس میں تصاویر اور مینو ہوں (جو اچھا اور آسان ہے) بمقابلہ اپنے پسندیدہ مقامی ریستوران میں جانا جہاں شیف بالکل جانتا ہے کہ آپ کو کیا پسند ہے اور آپ کے کہنے پر کچھ حیرت انگیز بنا سکتا ہے۔
+لیکن یہ وہ بات ہے جو میں چاہتا ہوں کہ کسی نے مجھے اس وقت بتائی ہوتی، اور جو میں آپ کو ابھی بتا رہا ہوں: کمانڈ لائن خوفناک نہیں ہے – یہ دراصل آپ کے کمپیوٹر کے ساتھ براہ راست بات چیت کرنے جیسا ہے۔ اسے اس طرح سوچیں جیسے کھانے کا آرڈر دینا کسی فینسی ایپ کے ذریعے جس میں تصاویر اور مینو ہوں (جو اچھا اور آسان ہے) بمقابلہ اپنے پسندیدہ مقامی ریستوران میں جانا جہاں شیف بالکل جانتا ہے کہ آپ کیا پسند کرتے ہیں اور صرف آپ کے کہنے پر "کچھ حیرت انگیز" بنا سکتا ہے۔
 
-کمانڈ لائن وہ جگہ ہے جہاں ڈیولپرز جادوگر محسوس کرنے جاتے ہیں۔ آپ کچھ جادوئی الفاظ (ٹھیک ہے، وہ صرف کمانڈز ہیں، لیکن وہ جادوئی محسوس ہوتے ہیں!) ٹائپ کرتے ہیں، انٹر دباتے ہیں، اور بوم – آپ نے پورے پروجیکٹ کے ڈھانچے بنائے، دنیا بھر سے طاقتور ٹولز انسٹال کیے، یا اپنی ایپ کو انٹرنیٹ پر لاکھوں لوگوں کے لیے تعینات کیا۔ ایک بار جب آپ اس طاقت کا پہلا ذائقہ حاصل کرتے ہیں، تو یہ واقعی کافی نشہ آور ہوتا ہے!
+کمانڈ لائن وہ جگہ ہے جہاں ڈیولپرز جادوگر محسوس کرتے ہیں۔ آپ کچھ جادوئی الفاظ (ٹھیک ہے، وہ صرف کمانڈز ہیں، لیکن وہ جادوئی محسوس ہوتے ہیں!) ٹائپ کرتے ہیں، انٹر دبائیں، اور بوم – آپ نے پورے پروجیکٹ کے ڈھانچے بنائے، دنیا بھر سے طاقتور ٹولز انسٹال کیے، یا اپنی ایپ کو انٹرنیٹ پر لاکھوں لوگوں کے لیے ڈپلائے کیا۔ ایک بار جب آپ اس طاقت کا پہلا ذائقہ حاصل کرتے ہیں، تو یہ واقعی کافی نشہ آور ہوتا ہے!
 
 **کیوں کمانڈ لائن آپ کا پسندیدہ ٹول بن جائے گا:**
 
-گرافیکل انٹرفیس بہت سے کاموں کے لیے بہترین ہیں، لیکن کمانڈ لائن آٹومیشن، درستگی، اور رفتار میں بہترین ہے۔ بہت سے ترقیاتی ٹولز بنیادی طور پر کمانڈ لائن انٹرفیس کے ذریعے کام کرتے ہیں، اور انہیں مؤثر طریقے سے استعمال کرنا سیکھنا آپ کی پیداواری صلاحیت کو ڈرامائی طور پر بہتر بنا سکتا ہے۔
+گرافیکل انٹرفیس بہت سے کاموں کے لیے بہترین ہیں، لیکن کمانڈ لائن آٹومیشن، درستگی، اور رفتار میں مہارت رکھتی ہے۔ بہت سے ڈیولپمنٹ ٹولز بنیادی طور پر کمانڈ لائن انٹرفیس کے ذریعے کام کرتے ہیں، اور انہیں مؤثر طریقے سے استعمال کرنا سیکھنا آپ کی پیداواریت کو ڈرامائی طور پر بہتر بنا سکتا ہے۔
 
 ```bash
 # Step 1: Create and navigate to project directory
@@ -468,8 +547,8 @@ cd my-awesome-website
 ```
 
 **یہ کوڈ کیا کرتا ہے:**
-- **ایک نیا ڈائریکٹری بنائیں** جس کا نام "my-awesome-website" ہے آپ کے پروجیکٹ کے لیے
-- **نئی بنائی گئی ڈائریکٹری میں جائیں** کام شروع کرنے کے لیے
+- **ایک نیا ڈائریکٹری بنائیں** جس کا نام "my-awesome-website" ہو آپ کے پروجیکٹ کے لیے
+- **نئے بنائے گئے ڈائریکٹری میں جائیں** تاکہ کام شروع کریں
 
 ```bash
 # Step 2: Initialize project with package.json
@@ -482,9 +561,9 @@ npm install --save-dev @eslint/js
 
 **مرحلہ وار، یہاں کیا ہو رہا ہے:**
 - **ایک نیا Node.js پروجیکٹ شروع کریں** ڈیفالٹ سیٹنگز کے ساتھ `npm init -y` استعمال کرتے ہوئے
-- **Vite انسٹال کریں** ایک جدید بلڈ ٹول کے طور پر تیز ترقی اور پروڈکشن بلڈز کے لیے
-- **Prettier شامل کریں** خودکار کوڈ فارمیٹنگ کے لیے اور ESLint کوڈ کوالٹی چیک کے لیے
-- **استعمال کریں** `--save-dev` فلیگ ان کو صرف ترقیاتی انحصار کے طور پر نشان زد کرنے کے لیے
+- **Vite انسٹال کریں** ایک جدید بلڈ ٹول کے طور پر تیز ڈیولپمنٹ اور پروڈکشن بلڈز کے لیے
+- **Prettier شامل کریں** خودکار کوڈ فارمیٹنگ کے لیے اور ESLint کوڈ کوالٹی چیکس کے لیے
+- **`--save-dev` فلیگ استعمال کریں** تاکہ انہیں صرف ڈیولپمنٹ کے لیے ڈیپینڈنسیز کے طور پر نشان زد کریں
 
 ```bash
 # Step 3: Create project structure and files
@@ -497,20 +576,20 @@ npx vite
 
 **اوپر، ہم نے:**
 - **اپنے پروجیکٹ کو منظم کیا** سورس کوڈ اور اثاثوں کے لیے الگ فولڈرز بنا کر
-- **ایک بنیادی HTML فائل تیار کی** مناسب دستاویز کے ڈھانچے کے ساتھ
-- **Vite ترقیاتی سرور شروع کیا** لائیو ری لوڈنگ اور ہاٹ ماڈیول ریپلیسمنٹ کے لیے
+- **ایک بنیادی HTML فائل بنائی** مناسب دستاویز کے ڈھانچے کے ساتھ
+- **Vite ڈیولپمنٹ سرور شروع کیا** لائیو ری لوڈنگ اور ہاٹ ماڈیول ریپلیسمنٹ کے لیے
 
 #### ویب ڈیولپمنٹ کے لیے ضروری کمانڈ لائن ٹولز
 
-| ٹول | مقصد | آپ کو اس کی ضرورت کیوں ہے |
-|------|---------|-----------------|
-| **[Git](https://git-scm.com/)** | ورژن کنٹرول | تبدیلیوں کا پتہ لگائیں، دوسروں کے ساتھ تعاون کریں، اپنا کام بیک اپ کریں |
-| **[Node.js & npm](https://nodejs.org/)** | جاوا اسکرپٹ رن ٹائم اور پیکیج مینجمنٹ | براؤزرز کے باہر جاوا اسکرپٹ چلائیں، جدید ترقیاتی ٹولز انسٹال کریں |
-| **[Vite](https://vitejs.dev/)** | بلڈ ٹول اور ڈیولپمنٹ سرور | ہاٹ ماڈیول ریپلیسمنٹ کے ساتھ تیز ترقی |
-| **[ESLint](https://eslint.org/)** | کوڈ کوالٹی | خود بخود جاوا اسکرپٹ میں مسائل تلاش کریں اور ٹھیک کریں |
+| ٹول | مقصد | کیوں آپ کو اس کی ضرورت ہے |
+|-----|-------|---------------------------|
+| **[Git](https://git-scm.com/)** | ورژن کنٹرول | تبدیلیوں کو ٹریک کریں، دوسروں کے ساتھ تعاون کریں، اپنا کام بیک اپ کریں |
+| **[Node.js & npm](https://nodejs.org/)** | جاوا اسکرپٹ رن ٹائم اور پیکیج مینجمنٹ | براؤزرز کے باہر جاوا اسکرپٹ چلائیں، جدید ڈیولپمنٹ ٹولز انسٹال کریں |
+| **[Vite](https://vitejs.dev/)** | بلڈ ٹول اور ڈیولپمنٹ سرور | تیز رفتار ڈیولپمنٹ ہاٹ ماڈیول ریپلیسمنٹ کے ساتھ |
+| **[ESLint](https://eslint.org/)** | کوڈ کوالٹی | جاوا اسکرپٹ میں مسائل کو خود بخود تلاش کریں اور ٹھیک کریں |
 | **[Prettier](https://prettier.io/)** | کوڈ فارمیٹنگ | اپنے کوڈ کو مستقل طور پر فارمیٹڈ اور پڑھنے کے قابل رکھیں |
 
-#### پلیٹ فارم مخصوص اختیارات
+#### پلیٹ فارم کے لحاظ سے اختیارات
 
 **ونڈوز:**
 - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - جدید، فیچر سے بھرپور ٹرمینل
@@ -527,105 +606,178 @@ npx vite
 
 > 💻 = آپریٹنگ سسٹم پر پہلے سے انسٹال شدہ
 
-> 🎯 **سیکھنے کا راستہ**: بنیادی کمانڈز جیسے `cd` (ڈائریکٹری تبدیل کریں)، `ls` یا `dir` (فائلوں کی فہرست)، اور `mkdir` (فولڈر بنائیں) سے شروع کریں۔ جدید ورک فلو کمانڈز جیسے `npm install`, `git status`, اور `code .` (موجودہ ڈائریکٹری کو VS کوڈ میں کھولیں) کے ساتھ مشق کریں۔ جیسے جیسے آپ زیادہ آرام دہ ہوں گے، آپ قدرتی طور پر مزید جدید کمانڈز اور آٹومیشن تکنیک سیکھیں گے۔
+> 🎯 **سیکھنے کا راستہ**: بنیادی کمانڈز جیسے `cd` (ڈائریکٹری تبدیل کریں)، `ls` یا `dir` (فائلز کی فہرست)، اور `mkdir` (فولڈر بنائیں) سے شروع کریں۔ جدید ورک فلو کمانڈز جیسے `npm install`, `git status`, اور `code .` (موجودہ ڈائریکٹری کو VS Code میں کھولیں) کے ساتھ مشق کریں۔ جیسے جیسے آپ زیادہ آرام دہ ہوں گے، آپ خود بخود مزید جدید کمانڈز اور آٹومیشن تکنیک سیکھیں گے۔
 
 ### دستاویزات: آپ کا ہمیشہ دستیاب سیکھنے کا رہنما
 
-ٹھیک ہے، میں آپ کے ساتھ ایک چھوٹا سا راز شیئر کرنے جا رہا ہوں جو آپ کو ایک ابتدائی ہونے کے بارے میں بہت بہتر محسوس کرے گا: یہاں تک کہ سب سے زیادہ تجربہ کار ڈیولپرز اپنا بہت سا وقت دستاویزات پڑھنے میں گزارتے ہیں۔ اور یہ اس لیے نہیں کہ وہ نہیں جانتے کہ وہ کیا کر رہے ہیں – یہ دراصل دانشمندی کی علامت ہے!
+چلیں، میں آپ کے ساتھ ایک چھوٹا سا راز شیئر کرتا ہوں جو آپ کو ایک ابتدائی ہونے کے بارے میں بہت بہتر محسوس کرے گا: یہاں تک کہ سب سے زیادہ تجربہ کار ڈیولپرز اپنا بہت سا وقت دستاویزات پڑھنے میں گزارتے ہیں۔ اور یہ اس لیے نہیں کہ وہ نہیں جانتے کہ وہ کیا کر رہے ہیں – یہ دراصل دانشمندی کی علامت ہے!
 
-دستاویزات کو دنیا کے سب سے زیادہ صبر کرنے والے، علم رکھنے والے اساتذہ تک رسائی حاصل کرنے کے طور پر سوچیں جو 24/7 دستیاب ہیں۔ رات 2 بجے کسی مسئلے پر پھنس گئے؟ دستاویزات وہاں ہیں ایک گرم ورچوئل گلے کے ساتھ اور بالکل وہی جواب جو آپ کو چاہیے۔ کسی ٹھنڈی نئی خصوصیت کے بارے میں سیکھنا چاہتے ہیں جس کے بارے میں ہر کوئی بات کر رہا ہے؟ دستاویزات آپ کے ساتھ ہیں مرحلہ وار مثالوں کے ساتھ۔ یہ سمجھنے کی کوشش کر رہے ہیں کہ کچھ اس طرح کیوں کام کرتا ہے؟ آپ نے صحیح اندازہ لگایا – دستاویزات اسے اس طرح سمجھانے کے لیے تیار ہیں کہ آخر کار یہ کلک کرے!
+دستاویزات کو ایسے سمجھیں جیسے آپ کے پاس دنیا کے سب سے زیادہ صبر کرنے والے، علم رکھنے والے اساتذہ ہوں جو 24/7 دستیاب ہوں۔ رات 2 بجے کسی مسئلے پر پھنس گئے؟ دستاویزات وہاں ہیں ایک گرم ورچوئل گلے کے ساتھ اور بالکل وہ جواب جو آپ کو چاہیے۔ کسی زبردست نئے فیچر کے بارے میں جاننا چاہتے ہیں جس کے بارے میں سب بات کر رہے ہیں؟ دستاویزات آپ کے ساتھ ہیں مرحلہ وار مثالوں کے ساتھ۔ یہ سمجھنے کی کوشش کر رہے ہیں کہ کچھ کام کیسے اور کیوں ہوتا ہے؟ آپ نے صحیح اندازہ لگایا – دستاویزات آپ کو اس طرح سے سمجھانے کے لیے تیار ہیں کہ آخر کار آپ کو سمجھ آ جائے!
 
-یہاں کچھ ہے جس نے میری سوچ کو مکمل طور پر بدل دیا: ویب ڈیولپمنٹ کی دنیا ناقابل یقین حد تک تیزی سے حرکت کرتی ہے، اور کوئی بھی (میرا مطلب بالکل کوئی بھی نہیں!) سب کچھ یاد نہیں رکھتا۔ میں نے 15+ سال کے تجربے والے سینئر ڈیولپرز کو بنیادی نحو دیکھتے ہوئے دیکھا ہے، اور آپ جانتے ہیں کیا؟ یہ شرمندگی کی بات نہیں ہے – یہ ہوشیاری ہے! یہ کامل یادداشت رکھنے کے بارے میں نہیں ہے؛ یہ قابل اعتماد جوابات کو جلدی تلاش کرنے اور انہیں لاگو کرنے کے طریقے کو سمجھنے کے بارے میں ہے۔
+یہاں ایک چیز ہے جس نے میری سوچ کو مکمل طور پر بدل دیا: ویب ڈیولپمنٹ کی دنیا ناقابل یقین حد تک تیزی سے حرکت کرتی ہے، اور کوئی بھی (میرا مطلب بالکل کوئی بھی نہیں!) سب کچھ یاد نہیں رکھتا۔ میں نے 15+ سال کے تجربے والے سینئر ڈیولپرز کو بنیادی سینٹیکس دیکھتے ہوئے دیکھا ہے، اور آپ جانتے ہیں کیا؟ یہ شرمندگی کی بات نہیں ہے – یہ ہوشیاری ہے! یہ کامل یادداشت رکھنے کے بارے میں نہیں ہے؛ یہ قابل اعتماد جوابات کو جلدی سے تلاش کرنے اور انہیں لاگو کرنے کے بارے میں ہے۔
 
-**یہاں حقیقی جادو ہوتا ہے:**
+**یہاں اصل جادو ہوتا ہے:**
 
-پیشہ ور ڈیولپرز اپنا ایک اہم حصہ دستاویزات پڑھنے میں گزارتے ہیں – اس لیے نہیں کہ وہ نہیں جانتے کہ وہ کیا کر رہے ہیں، بلکہ اس لیے کہ ویب ڈیولپمنٹ کا منظر نامہ اتنی تیزی سے ترقی کرتا ہے کہ موجودہ رہنے کے لیے مسلسل سیکھنا ضروری ہے۔ عظیم دستاویزات آپ کو یہ سمجھنے میں مدد کرتی ہیں کہ کچھ استعمال کرنے کا *کیسے*، بلکہ *کیوں* اور *کب*۔
+پروفیشنل ڈیولپرز اپنا ایک بڑا حصہ دستاویزات پڑھنے میں گزارتے ہیں – نہ کہ اس لیے کہ وہ نہیں جانتے کہ وہ کیا کر رہے ہیں، بلکہ اس لیے کہ ویب ڈیولپمنٹ کا منظر نامہ اتنی تیزی سے ترقی کرتا ہے کہ موجودہ رہنے کے لیے مسلسل سیکھنا ضروری ہے۔ بہترین دستاویزات آپ کو یہ سمجھنے میں مدد دیتی ہیں کہ کچھ *کیسے* استعمال کرنا ہے، بلکہ *کیوں* اور *کب* استعمال کرنا ہے۔
 
-#### ضروری دستاویزات کے وسائل
+#### ضروری دستاویزاتی وسائل
 
 **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
-- ویب ٹیکنالوجی دستاویزات کے لیے سونے کا معیار
+- ویب ٹیکنالوجی دستاویزات کے لیے گولڈ اسٹینڈرڈ
 - HTML، CSS، اور جاوا اسکرپٹ کے لیے جامع گائیڈز
 - براؤزر مطابقت کی معلومات شامل ہیں
-- عملی مثالیں اور انٹرایکٹو ڈیمو پیش کرتا ہے
+- عملی مثالیں اور انٹرایکٹو ڈیموز پیش کرتا ہے
 
 **[Web.dev](https://web.dev)** (گوگل کی طرف سے)
 - جدید ویب ڈیولپمنٹ کے بہترین طریقے
 - کارکردگی کی اصلاح کے گائیڈز
-- ایکسسیبیلٹی اور جامع ڈیزائن کے اصول
+- ایکسس ایبلٹی اور انکلوسیو ڈیزائن کے اصول
 - حقیقی دنیا کے پروجیکٹس سے کیس اسٹڈیز
 
 **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
-- ایج براؤزر ڈیولپمنٹ کے وسائل
+- ایج براؤزر ڈیولپمنٹ وسائل
 - پروگریسو ویب ایپ گائیڈز
-- کراس پلیٹ فارم ڈیولپمنٹ کے بصیرت
+- کراس پلیٹ فارم ڈیولپمنٹ بصیرت
 
 **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
 - ساختی سیکھنے کے نصاب
-- انڈسٹری ماہرین سے ویڈیو کورسز
+- انڈسٹری ماہرین کے ویڈیو کورسز
 - ہینڈز آن کوڈنگ مشقیں
 
-> 📚 **مطالعہ کی حکمت عملی**: دستاویزات کو یاد کرنے کی کوشش نہ کریں – بلکہ، اسے مؤثر طریقے سے نیویگیٹ کرنے کا طریقہ سیکھیں۔ اکثر استعمال ہونے والے حوالہ جات کو بک مارک کریں اور مخصوص معلومات کو جلدی تلاش کرنے کے لیے سرچ فنکشنز کا استعمال کرنے کی مشق کریں۔
-
-✅ **سوچنے کے لیے خوراک**: یہاں کچھ دلچسپ ہے غور کرنے کے لیے – آپ کے خیال میں ویب سائٹس بنانے کے ٹولز (ترقی) ان ٹولز سے کیسے مختلف ہو سکتے ہیں جو ان کے نظر آنے کے طریقے کو ڈیزائن کرتے ہیں (ڈیزائن)؟ یہ اس فرق کی طرح ہے جو ایک معمار کے درمیان ہوتا ہے جو ایک خوبصورت گھر ڈیزائن کرتا ہے اور ٹھیکیدار جو اسے حقیقت میں بناتا ہے۔ دونوں اہم ہیں، لیکن انہیں مختلف ٹول باکسز کی ضرورت ہوتی ہے! اس قسم کی سوچ واقعی آپ کو یہ دیکھنے میں مدد دے گی کہ ویب سائٹس کیسے زندہ ہوتی ہیں۔
+> 📚 **مطالعہ کی حکمت عملی**: دستاویزات کو یاد کرنے کی کوشش نہ کریں – بلکہ، اسے مؤثر طریقے سے نیویگیٹ کرنے کا طریقہ سیکھیں۔ اکثر استعمال ہونے والے حوالہ جات کو بک مارک کریں اور مخصوص معلومات کو جلدی سے تلاش کرنے کے لیے سرچ فنکشنز کا استعمال کریں۔
 
-## GitHub Copilot ایجنٹ چیلنج 🚀
+### 🔧 **ٹول ماسٹری چیک: آپ کو کیا زیادہ دلچسپ لگتا ہے؟**
 
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+**ایک لمحہ نکالیں اور غور کریں:**
+- کون سا ٹول آپ سب سے پہلے آزمانے کے لیے سب سے زیادہ پرجوش ہیں؟ (کوئی غلط جواب نہیں ہے!)
+- کیا کمانڈ لائن اب بھی خوفناک لگتی ہے، یا آپ اس کے بارے میں متجسس ہیں؟
+- کیا آپ تصور کر سکتے ہیں کہ براؤزر DevTools کا استعمال کرتے ہوئے اپنی پسندیدہ ویب سائٹس کے پردے کے پیچھے جھانکیں؟
 
-**تفصیل:** ایک جدید کوڈ ایڈیٹر یا IDE کی خصوصیات کو دریافت کریں اور مظاہرہ کریں کہ یہ آپ کے ورک فلو کو ویب ڈیولپر کے طور پر کیسے بہتر بنا سکتا ہے۔
+```mermaid
+pie title "Developer Time Spent With Tools"
+    "Code Editor" : 40
+    "Browser Testing" : 25
+    "Command Line" : 15
+    "Reading Docs" : 15
+    "Debugging" : 5
+```
 
-**پرومپٹ:** ایک کوڈ ایڈیٹر یا IDE (جیسے Visual Studio Code، WebStorm، یا کلاؤڈ بیسڈ IDE) کا انتخاب کریں۔ تین خصوصیات یا ایکسٹینشنز کی فہرست بنائیں جو آپ کو کوڈ لکھنے، ڈیبگ کرنے، یا مؤثر طریقے سے برقرار رکھنے میں مدد کرتی ہیں۔ ہر ایک کے لیے، وضاحت کریں کہ یہ آپ کے ورک فلو کو کیسے فائدہ پہنچاتا ہے۔
+> **دلچسپ بصیرت**: زیادہ تر ڈیولپرز اپنا تقریباً 40% وقت اپنے کوڈ ایڈیٹر میں گزارتے ہیں، لیکن نوٹ کریں کہ کتنا وقت ٹیسٹنگ، سیکھنے، اور مسئلے کو حل کرنے میں جاتا ہے۔ پروگرامنگ صرف کوڈ لکھنے کے بارے میں نہیں ہے – یہ تجربات تخلیق کرنے کے بارے میں ہے!
 
----
+✅ **غور کرنے کے لیے خوراک**: یہاں ایک دلچسپ بات ہے – آپ کے خیال میں ویب سائٹس بنانے کے ٹولز (ڈیولپمنٹ) ویب سائٹس کے ڈیزائن کے ٹولز (ڈیزائن) سے کیسے مختلف ہو سکتے ہیں؟ یہ بالکل ایسے ہے جیسے ایک معمار جو ایک خوبصورت گھر ڈیزائن کرتا ہے اور وہ ٹھیکیدار جو اسے حقیقت میں بناتا ہے۔ دونوں اہم ہیں، لیکن انہیں مختلف ٹول باکسز کی ضرورت ہوتی ہے! اس قسم کی سوچ واقعی آپ کو یہ بڑی تصویر دیکھنے میں مدد دے گی کہ ویب سائٹس کیسے زندہ ہوتی ہیں۔
 
-## 🚀 چیلنج
+## GitHub Copilot Agent Challenge 🚀
 
-**ٹھیک ہے، جاسوس، کیا آپ اپنے پہلے کیس کے لیے تیار ہیں؟**
+Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-اب جب کہ آپ کے پاس یہ زبردست بنیاد ہے، میرے پاس ایک مہم جوئی ہے جو آپ کو دکھائے گی کہ پروگرامنگ کی دنیا کتنی متنوع اور دلچسپ ہے۔ اور سنیں – یہ ابھی کوڈ لکھنے کے بارے میں نہیں ہے، لہذا کوئی دباؤ نہیں! اپنے آپ کو ایک پروگرامنگ زبان کے جاسوس کے طور پر سوچیں جو اپنے پہلے دلچسپ کیس پر ہے!
+**تفصیل:** ایک جدید کوڈ ایڈیٹر یا IDE کی خصوصیات کو دریافت کریں اور دکھائیں کہ یہ آپ کے ورک فلو کو بطور ویب ڈیولپر کیسے بہتر بنا سکتا ہے۔
 
-**آپ کا مشن، اگر آپ اسے قبول کرنے کا انتخاب کرتے ہیں:**
-1. **ایک زبان کے ایکسپلورر بنیں**: تین پروگرامنگ زبانیں منتخب کریں جو مکمل طور پر مختلف دنیاؤں سے ہوں – شاید ایک جو ویب سائٹس بناتی ہے، ایک جو موبائل ایپس بناتی ہے، اور ایک جو سائنسدانوں کے لیے ڈیٹا کو کرنچ کرتی ہے۔ ہر زبان میں لکھی گئی ایک ہی سادہ کام کی مثالیں تلاش کریں۔ میں وعدہ کرتا ہوں کہ آپ بالکل حیران ہوں گے کہ وہ ایک ہی کام کرتے ہوئے کتنے مختلف نظر آ سکتے ہیں!
+**پرومپٹ:** ایک کوڈ ایڈیٹر یا IDE منتخب کریں (جیسے Visual Studio Code، WebStorm، یا کلاؤڈ بیسڈ IDE)۔ تین خصوصیات یا ایکسٹینشنز کی فہرست بنائیں جو آپ کو کوڈ لکھنے، ڈیبگ کرنے، یا مؤثر طریقے سے برقرار رکھنے میں مدد دیتی ہیں۔ ہر ایک کے لیے، وضاحت کریں کہ یہ آپ کے ورک فلو کو کیسے فائدہ پہنچاتی ہے۔
 
-2. **ان کی اصل کہانیاں دریافت کریں**: ہر زبان کو خاص کیا بناتا ہے؟ یہاں ایک دلچسپ حقیقت ہے – ہر ایک پروگرامنگ زبان اس لیے بنائی گئی تھی کیونکہ کسی نے سوچا، "آپ جانتے ہیں کیا؟ اس مخصوص مسئلے کو حل کرنے کا ایک بہتر طریقہ ہونا چاہیے۔" کیا آپ یہ معلوم کر سکتے ہیں کہ وہ مسائل کیا تھے؟ ان میں سے کچھ کہانیاں واقعی دلچسپ ہیں!
-
-3. **کمیونٹیز سے ملیں**: دیکھیں کہ ہر زبان کی کمیونٹی کتنی خوش آمدید اور پرجوش ہے۔ کچھ کے پاس لاکھوں ڈیولپرز ہیں جو علم کا اشتراک کرتے ہیں اور ایک دوسرے کی مدد کرتے ہیں، دیگر چھوٹے ہیں لیکن ناقابل یقین حد تک مضبوط اور معاون ہیں۔ آپ کو ان کمیونٹیز کی مختلف شخصیات دیکھ کر مزہ آئے گا!
-
-4. **اپنے دل کی بات سنیں**: اس وقت آپ کے لیے کون سی زبان سب سے زیادہ قابل رسائی محسوس ہوتی ہے؟ "کامل" انتخاب کرنے کے بارے میں فکر نہ کریں – بس اپنے وجدان کو سنیں! یہاں کوئی غلط جواب نہیں ہے، اور آپ بعد میں دوسروں کو بھی دریافت کر سکتے ہیں۔
+---
 
-**اضافی جاسوسی کام**: دیکھیں کہ آپ یہ معلوم کر سکتے ہیں کہ کون سی بڑی ویب سائٹس یا ایپس ہر زبان کے ساتھ بنائی گئی ہیں۔ میں ضمانت دیتا ہوں کہ آپ یہ جان کر حیران ہوں گے کہ انسٹاگرام، نیٹ فلکس، یا وہ موبائل گیم جو آپ کھیلنا بند نہیں کر سکتے، کس چیز سے چلتا ہے!
+## 🚀 چیلنج
 
-> 💡 **یاد رکھیں**: آپ آج ان زبانوں میں سے کسی میں ماہر بننے کی کوشش نہیں کر رہے ہیں۔ آپ صرف پڑوس کو جاننے کی کوشش کر رہے ہیں اس سے پہلے کہ آپ فیصلہ کریں کہ آپ کہاں دکان لگانا چاہتے ہیں۔ اپنا وقت لیں، اس کے ساتھ مزہ کریں، اور اپنی تجسس کو رہنمائی کرنے دیں!
+**ٹھیک ہے، جاسوس، کیا آپ اپنے پہلے کیس کے لیے تیار ہیں؟**
 
-## آئیے آپ نے جو دریافت کیا ہے اس کا جشن منائیں!
+اب جب کہ آپ کے پاس یہ زبردست بنیاد ہے، میرے پاس ایک مہم جوئی ہے جو آپ کو دکھائے گی کہ پروگرامنگ کی دنیا کتنی متنوع اور دلچسپ ہے۔ اور سنیں – یہ ابھی کوڈ لکھنے کے بارے میں نہیں ہے، لہذا اس میں کوئی دباؤ نہیں! اپنے آپ کو ایک پروگرامنگ زبان کے جاسوس کے طور پر سوچیں جو اپنے پہلے دلچسپ کیس پر ہے!
 
-واہ، آپ نے آج اتنی ناقابل یقین معلومات جذب کی ہیں! میں واقعی پرجوش ہوں کہ دیکھوں کہ اس حیرت انگیز سفر کا کتنا حصہ آپ کے ساتھ رہا ہے۔ اور یاد رکھیں – یہ ایسا امتحان نہیں ہے جہاں آپ کو سب کچھ کامل حاصل کرنے کی ضرورت ہو۔ یہ زیادہ اس بات کا جشن ہے کہ آپ نے اس دلچسپ دنیا کے بارے میں جو کچھ سیکھا ہے جس میں آپ غوطہ لگانے والے ہیں!
+**آپ کا مشن، اگر آپ اسے قبول کرنے کا انتخاب کرتے ہیں:**
+1. **ایک زبان کا ایکسپلورر بنیں**: تین پروگرامنگ زبانیں منتخب کریں جو مکمل طور پر مختلف دنیاؤں سے ہوں – شاید ایک جو ویب سائٹس بناتی ہے، ایک جو موبائل ایپس بناتی ہے، اور ایک جو سائنسدانوں کے لیے ڈیٹا کو کرنچ کرتی ہے۔ ہر زبان میں ایک ہی سادہ کام کی مثالیں تلاش کریں۔ میں وعدہ کرتا ہوں کہ آپ حیران ہوں گے کہ وہ بالکل مختلف نظر آ سکتی ہیں جبکہ بالکل ایک ہی کام کر رہی ہیں!
 
-[سبق کے بعد کا کوئز لیں](https://ff-quizzes.netlify.app/web/)
+2. **ان کی اصل کہانیاں دریافت کریں**: ہر زبان کو خاص کیا بناتا ہے؟ یہاں ایک زبردست حقیقت ہے – ہر ایک پروگرامنگ زبان اس لیے بنائی گئی کیونکہ کسی نے سوچا، "آپ جانتے ہیں کیا؟ اس مخصوص مسئلے کو حل کرنے کا ایک بہتر طریقہ ہونا چاہیے۔" کیا آپ یہ معلوم کر سکتے ہیں کہ وہ مسائل کیا تھے؟ ان میں سے کچھ کہانیاں واقعی دلچسپ ہیں!
 
+3. **کمیونٹیز سے ملیں**: دیکھیں کہ ہر زبان کی کمیونٹی کتنی خوش آمدید اور پرجوش ہے۔ کچھ کے پاس لاکھوں ڈیولپرز ہیں جو علم کا اشتراک کرتے ہیں اور ایک دوسرے کی مدد کرتے ہیں
 ## جائزہ اور خود مطالعہ
 
-**اپنے وقت کے ساتھ دریافت کریں اور اس سے لطف اٹھائیں!**
+**آرام سے وقت لیں اور اس سے لطف اندوز ہوں!**
 
-آپ نے آج بہت کچھ کور کیا ہے، اور یہ فخر کرنے کی بات ہے! اب مزے کا حصہ آتا ہے – ان موضوعات کو دریافت کرنا جنہوں نے آپ کی تجسس کو جنم دیا۔ یاد رکھیں، یہ ہوم ورک نہیں ہے – یہ ایک مہم جوئی ہے!
+آپ نے آج بہت کچھ سیکھا ہے، اور یہ قابل فخر بات ہے! اب دلچسپ حصہ آتا ہے – ان موضوعات کو دریافت کرنا جنہوں نے آپ کی دلچسپی کو جنم دیا۔ یاد رکھیں، یہ ہوم ورک نہیں ہے – یہ ایک مہم جوئی ہے!
 
-**اس میں گہرائی میں جائیں جو آپ کو دلچسپ لگے:**
+**ان چیزوں میں گہرائی سے جائیں جو آپ کو دلچسپ لگتی ہیں:**
 
-**پروگرامنگ زبانوں کے ساتھ عملی طور پر مشغول ہوں:**
-- ان 2-3 زبانوں کی آفیشل ویب سائٹس پر جائیں جنہوں نے
-- یوٹیوب پر کچھ ابتدائی سطح کے کوڈنگ ویڈیوز دیکھیں۔ وہاں بہت سے بہترین تخلیق کار موجود ہیں جو یاد رکھتے ہیں کہ شروعات کرنا کیسا محسوس ہوتا ہے۔
-- مقامی ملاقاتوں یا آن لائن کمیونٹیز میں شامل ہونے پر غور کریں۔ یقین کریں، ڈویلپرز نئے آنے والوں کی مدد کرنا پسند کرتے ہیں!
+**پروگرامنگ زبانوں کے ساتھ عملی تجربہ حاصل کریں:**
+- ان 2-3 زبانوں کی آفیشل ویب سائٹس پر جائیں جنہوں نے آپ کی توجہ حاصل کی۔ ہر زبان کی اپنی شخصیت اور کہانی ہوتی ہے!
+- کچھ آن لائن کوڈنگ پلیٹ فارمز جیسے [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/)، یا [Replit](https://replit.com/) آزمائیں۔ تجربہ کرنے سے نہ گھبرائیں – آپ کچھ خراب نہیں کر سکتے!
+- اپنی پسندیدہ زبان کے آغاز کے بارے میں پڑھیں۔ واقعی، ان میں سے کچھ کہانیاں دلچسپ ہیں اور آپ کو سمجھنے میں مدد دیں گی کہ زبانیں اس طرح کیوں کام کرتی ہیں۔
 
-> 🎯 **سنیں، یہ بات یاد رکھیں**: آپ سے یہ توقع نہیں کی جا رہی کہ آپ ایک دن میں کوڈنگ کے ماہر بن جائیں گے! ابھی آپ صرف اس حیرت انگیز نئی دنیا کو جاننے کی کوشش کر رہے ہیں جس کا آپ حصہ بننے والے ہیں۔ اپنا وقت لیں، اس سفر کا لطف اٹھائیں، اور یاد رکھیں – ہر وہ ڈویلپر جس کی آپ تعریف کرتے ہیں، کبھی وہیں بیٹھا تھا جہاں آپ ابھی ہیں، پرجوش اور شاید تھوڑا سا پریشان۔ یہ بالکل عام بات ہے، اور اس کا مطلب ہے کہ آپ صحیح راستے پر ہیں!
+**اپنے نئے ٹولز کے ساتھ آرام دہ ہوں:**
+- اگر آپ نے ابھی تک Visual Studio Code ڈاؤنلوڈ نہیں کیا ہے تو اسے ڈاؤنلوڈ کریں – یہ مفت ہے اور آپ کو یہ پسند آئے گا!
+- Extensions مارکیٹ پلیس کو چند منٹ کے لیے براؤز کریں۔ یہ آپ کے کوڈ ایڈیٹر کے لیے ایپ اسٹور کی طرح ہے!
+- اپنے براؤزر کے Developer Tools کو کھولیں اور بس کلک کریں۔ سب کچھ سمجھنے کی فکر نہ کریں – بس وہاں موجود چیزوں سے واقفیت حاصل کریں۔
 
+**کمیونٹی میں شامل ہوں:**
+- کچھ ڈویلپر کمیونٹیز کو [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/)، یا [GitHub](https://github.com/) پر فالو کریں۔ پروگرامنگ کمیونٹی نئے آنے والوں کے لیے انتہائی خوش آمدید ہے!
+- یوٹیوب پر کچھ ابتدائی دوستانہ کوڈنگ ویڈیوز دیکھیں۔ وہاں بہت سارے زبردست تخلیق کار ہیں جو یاد رکھتے ہیں کہ شروع میں کیسا محسوس ہوتا ہے۔
+- مقامی ملاقاتوں یا آن لائن کمیونٹیز میں شامل ہونے پر غور کریں۔ یقین کریں، ڈویلپرز نئے آنے والوں کی مدد کرنا پسند کرتے ہیں!
 
+> 🎯 **سنیں، یہ بات یاد رکھیں**: آپ سے یہ توقع نہیں کی جا رہی کہ آپ راتوں رات کوڈنگ کے ماہر بن جائیں! ابھی، آپ صرف اس حیرت انگیز نئی دنیا کو جاننے کی کوشش کر رہے ہیں جس کا آپ حصہ بننے والے ہیں۔ اپنا وقت لیں، سفر کا لطف اٹھائیں، اور یاد رکھیں – ہر وہ ڈویلپر جس کی آپ تعریف کرتے ہیں، کبھی وہیں بیٹھا تھا جہاں آپ ابھی ہیں، پرجوش اور شاید تھوڑا سا پریشان۔ یہ بالکل معمولی بات ہے، اور اس کا مطلب ہے کہ آپ صحیح کر رہے ہیں۔
 
 ## اسائنمنٹ
 
 [ڈاکس پڑھنا](assignment.md)
 
-> 💡 **آپ کے اسائنمنٹ کے لیے ایک چھوٹا سا اشارہ**: مجھے واقعی خوشی ہوگی اگر آپ کچھ ایسے ٹولز کو تلاش کریں جن کا ہم نے ابھی تک ذکر نہیں کیا! ان ایڈیٹرز، براؤزرز، اور کمانڈ لائن ٹولز کو چھوڑ دیں جن پر ہم پہلے ہی بات کر چکے ہیں – وہاں ایک حیرت انگیز دنیا موجود ہے جو شاندار ترقیاتی ٹولز سے بھری ہوئی ہے جو دریافت کیے جانے کے منتظر ہیں۔ ایسے ٹولز تلاش کریں جو فعال طور پر برقرار رکھے جا رہے ہوں اور جن کی کمیونٹیز متحرک اور مددگار ہوں (یہ عام طور پر بہترین ٹیوٹوریلز اور سب سے زیادہ معاون لوگ رکھتے ہیں جب آپ کسی مسئلے میں پھنس جائیں اور ایک دوستانہ مدد کی ضرورت ہو)۔
+> 💡 **آپ کے اسائنمنٹ کے لیے ایک چھوٹا سا اشارہ**: میں واقعی چاہوں گا کہ آپ کچھ ایسے ٹولز کو دریافت کریں جن پر ہم نے ابھی تک بات نہیں کی ہے! ان ایڈیٹرز، براؤزرز، اور کمانڈ لائن ٹولز کو چھوڑ دیں جن پر ہم پہلے ہی بات کر چکے ہیں – وہاں ایک حیرت انگیز دنیا ہے جو آپ کے دریافت کرنے کے لیے تیار ہے۔ ایسے ٹولز تلاش کریں جو فعال طور پر برقرار رکھے جا رہے ہوں اور جن کی کمیونٹیز متحرک اور مددگار ہوں (یہ عام طور پر بہترین ٹیوٹوریلز اور سب سے زیادہ معاون لوگ رکھتے ہیں جب آپ کو کسی مشکل میں مدد کی ضرورت ہو)۔
+
+---
+
+## 🚀 آپ کا پروگرامنگ سفر کا ٹائم لائن
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] 2-3 پروگرامنگ زبانوں کی ویب سائٹس کو بک مارک کریں جو آپ کی توجہ حاصل کر چکی ہیں
+- [ ] Visual Studio Code ڈاؤنلوڈ کریں اگر آپ نے ابھی تک نہیں کیا ہے
+- [ ] اپنے براؤزر کے DevTools (F12) کو کھولیں اور کسی بھی ویب سائٹ پر کلک کریں
+- [ ] ایک پروگرامنگ کمیونٹی میں شامل ہوں (Dev.to، Reddit r/webdev، یا Stack Overflow)
+
+### ⏰ **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] سبق کے بعد کا کوئز مکمل کریں اور اپنے جوابات پر غور کریں
+- [ ] VS Code کو GitHub Copilot ایکسٹینشن کے ساتھ سیٹ اپ کریں
+- [ ] 2 مختلف پروگرامنگ زبانوں میں آن لائن "Hello World" مثال آزمائیں
+- [ ] یوٹیوب پر "Day in the Life of a Developer" ویڈیو دیکھیں
+- [ ] اپنی پروگرامنگ زبان کی جاسوسی کا کام شروع کریں (چیلنج سے)
+
+### 📅 **آپ کی ہفتہ بھر کی مہم جوئی**
+- [ ] اسائنمنٹ مکمل کریں اور 3 نئے ڈیولپمنٹ ٹولز کو دریافت کریں
+- [ ] سوشل میڈیا پر 5 ڈویلپرز یا پروگرامنگ اکاؤنٹس کو فالو کریں
+- [ ] CodePen یا Replit میں کچھ چھوٹا بنانے کی کوشش کریں (یہاں تک کہ "Hello, [آپ کا نام]!")
+- [ ] کسی ڈویلپر کے بلاگ پوسٹ کو پڑھیں جو کسی کے کوڈنگ سفر کے بارے میں ہو
+- [ ] ورچوئل ملاقات میں شامل ہوں یا پروگرامنگ ٹاک دیکھیں
+- [ ] اپنی منتخب کردہ زبان کو آن لائن ٹیوٹوریلز کے ساتھ سیکھنا شروع کریں
+
+### 🗓️ **آپ کی مہینے بھر کی تبدیلی**
+- [ ] اپنا پہلا چھوٹا پروجیکٹ بنائیں (یہاں تک کہ ایک سادہ ویب صفحہ بھی شمار ہوتا ہے!)
+- [ ] کسی اوپن سورس پروجیکٹ میں تعاون کریں (دستاویزات کی اصلاحات سے شروع کریں)
+- [ ] کسی ایسے شخص کی رہنمائی کریں جو ابھی اپنا پروگرامنگ سفر شروع کر رہا ہو
+- [ ] اپنا ڈویلپر پورٹ فولیو ویب سائٹ بنائیں
+- [ ] مقامی ڈویلپر کمیونٹیز یا اسٹڈی گروپس سے جڑیں
+- [ ] اپنی اگلی سیکھنے کی منزل کی منصوبہ بندی شروع کریں
+
+### 🎯 **آخری عکاسی چیک ان**
+
+**آگے بڑھنے سے پہلے، ایک لمحہ لیں اور جشن منائیں:**
+- پروگرامنگ کے بارے میں آج آپ کو سب سے زیادہ کیا چیز دلچسپ لگی؟
+- کون سا ٹول یا تصور آپ سب سے پہلے دریافت کرنا چاہتے ہیں؟
+- پروگرامنگ سفر شروع کرنے کے بارے میں آپ کیسا محسوس کرتے ہیں؟
+- ابھی آپ کسی ڈویلپر سے کون سا سوال پوچھنا چاہیں گے؟
+
+```mermaid
+journey
+    title Your Confidence Building Journey
+    section Today
+      Curious: 3: You
+      Overwhelmed: 4: You
+      Excited: 5: You
+    section This Week
+      Exploring: 4: You
+      Learning: 5: You
+      Connecting: 4: You
+    section Next Month
+      Building: 5: You
+      Confident: 5: You
+      Helping Others: 5: You
+```
+
+> 🌟 **یاد رکھیں**: ہر ماہر کبھی ایک مبتدی تھا۔ ہر سینئر ڈویلپر نے کبھی بالکل وہی محسوس کیا تھا جو آپ ابھی محسوس کر رہے ہیں – پرجوش، شاید تھوڑا سا پریشان، اور یقینی طور پر یہ جاننے کے لیے متجسس کہ کیا ممکن ہے۔ آپ حیرت انگیز کمپنی میں ہیں، اور یہ سفر ناقابل یقین ہونے والا ہے۔ پروگرامنگ کی شاندار دنیا میں خوش آمدید! 🎉
 
 ---
 
diff --git a/translations/ur/1-getting-started-lessons/2-github-basics/README.md b/translations/ur/1-getting-started-lessons/2-github-basics/README.md
index f5b35221a1..6c0b267c5c 100644
--- a/translations/ur/1-getting-started-lessons/2-github-basics/README.md
+++ b/translations/ur/1-getting-started-lessons/2-github-basics/README.md
@@ -1,50 +1,67 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "acad15f3164cd6348e065ff38619aae9",
-  "translation_date": "2025-10-22T14:43:38+00:00",
+  "original_hash": "0fe3ff66299b447f1c8cb34dcbf0c5ef",
+  "translation_date": "2025-11-03T13:04:55+00:00",
   "source_file": "1-getting-started-lessons/2-github-basics/README.md",
   "language_code": "ur"
 }
 -->
 # GitHub کا تعارف
 
-ہیلو، مستقبل کے ڈویلپر! 👋 کیا آپ دنیا بھر کے لاکھوں کوڈرز کے ساتھ شامل ہونے کے لیے تیار ہیں؟ میں واقعی پرجوش ہوں کہ آپ کو GitHub سے متعارف کراؤں – اسے پروگرامرز کے لیے سوشل میڈیا پلیٹ فارم سمجھیں، لیکن یہاں لنچ کی تصاویر شیئر کرنے کے بجائے، ہم کوڈ شیئر کرتے ہیں اور مل کر حیرت انگیز چیزیں بناتے ہیں!
+ہیلو، مستقبل کے ڈویلپر! 👋 کیا آپ دنیا بھر کے لاکھوں کوڈرز کے ساتھ شامل ہونے کے لیے تیار ہیں؟ میں واقعی پرجوش ہوں کہ آپ کو GitHub سے متعارف کراؤں – اسے پروگرامرز کے لیے سوشل میڈیا پلیٹ فارم سمجھیں، لیکن یہاں لنچ کی تصاویر شیئر کرنے کے بجائے، ہم کوڈ شیئر کرتے ہیں اور حیرت انگیز چیزیں مل کر بناتے ہیں!
 
 یہ بات واقعی حیران کن ہے: آپ کے فون پر موجود ہر ایپ، ہر ویب سائٹ جسے آپ وزٹ کرتے ہیں، اور زیادہ تر ٹولز جنہیں آپ استعمال کرنا سیکھیں گے، وہ ڈویلپرز کی ٹیموں نے GitHub جیسے پلیٹ فارمز پر تعاون کرتے ہوئے بنائے ہیں۔ وہ میوزک ایپ جسے آپ پسند کرتے ہیں؟ کوئی آپ جیسا شخص اس میں حصہ ڈال چکا ہے۔ وہ گیم جسے آپ چھوڑ نہیں سکتے؟ ہاں، شاید GitHub کے تعاون سے بنایا گیا۔ اور اب آپ اس حیرت انگیز کمیونٹی کا حصہ بننا سیکھنے والے ہیں!
 
-مجھے معلوم ہے کہ شروع میں یہ سب کچھ بہت زیادہ محسوس ہو سکتا ہے – مجھے یاد ہے کہ جب میں نے پہلی بار GitHub کا صفحہ دیکھا تو سوچا "یہ سب کیا مطلب ہے؟" لیکن بات یہ ہے: ہر ایک ڈویلپر بالکل وہیں سے شروع کرتا ہے جہاں آپ ابھی ہیں۔ اس سبق کے اختتام تک، آپ کے پاس اپنا ذاتی GitHub ریپوزیٹری ہوگا (اسے کلاؤڈ میں آپ کے ذاتی پروجیکٹ شوکیس کے طور پر سمجھیں)، اور آپ جان جائیں گے کہ اپنا کام کیسے محفوظ کریں، دوسروں کے ساتھ کیسے شیئر کریں، اور ان پروجیکٹس میں کیسے حصہ ڈالیں جنہیں لاکھوں لوگ استعمال کرتے ہیں۔
+مجھے معلوم ہے کہ شروع میں یہ سب کچھ بہت زیادہ لگ سکتا ہے – مجھے یاد ہے کہ میں نے اپنی پہلی GitHub پیج کو دیکھتے ہوئے سوچا تھا "یہ سب کچھ کیا مطلب رکھتا ہے؟" لیکن بات یہ ہے: ہر ایک ڈویلپر بالکل وہیں سے شروع کرتا ہے جہاں آپ ابھی ہیں۔ اس سبق کے اختتام تک، آپ کے پاس اپنا ذاتی GitHub ریپوزیٹری ہوگا (اسے کلاؤڈ میں آپ کے ذاتی پروجیکٹ شوکیس کے طور پر سمجھیں)، اور آپ جان جائیں گے کہ اپنا کام کیسے محفوظ کریں، دوسروں کے ساتھ کیسے شیئر کریں، اور ان پروجیکٹس میں کیسے حصہ ڈالیں جنہیں لاکھوں لوگ استعمال کرتے ہیں۔
 
-ہم یہ سفر ایک ساتھ کریں گے، ایک قدم بہ ایک قدم۔ کوئی جلدی نہیں، کوئی دباؤ نہیں – بس آپ، میں، اور کچھ واقعی زبردست ٹولز جو آپ کے نئے بہترین دوست بننے والے ہیں!
+ہم یہ سفر ایک ساتھ کریں گے، ایک قدم بہ قدم۔ کوئی جلد بازی نہیں، کوئی دباؤ نہیں – بس آپ، میں، اور کچھ واقعی زبردست ٹولز جو آپ کے نئے بہترین دوست بننے والے ہیں!
 
 ![GitHub کا تعارف](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ur.png)
 > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
 
+```mermaid
+journey
+    title Your GitHub Adventure Today
+    section Setup
+      Install Git: 4: You
+      Create Account: 5: You
+      First Repository: 5: You
+    section Master Git
+      Local Changes: 4: You
+      Commits & Pushes: 5: You
+      Branching: 4: You
+    section Collaborate
+      Fork Projects: 4: You
+      Pull Requests: 5: You
+      Open Source: 5: You
+```
+
 ## پری لیکچر کوئز
 [پری لیکچر کوئز](https://ff-quizzes.netlify.app)
 
 ## تعارف
 
-اس سے پہلے کہ ہم واقعی دلچسپ چیزوں میں غوطہ لگائیں، آئیے آپ کے کمپیوٹر کو کچھ GitHub جادو کے لیے تیار کریں! اسے ایک شاہکار تخلیق کرنے سے پہلے اپنے آرٹ سپلائیز کو منظم کرنے جیسا سمجھیں – صحیح ٹولز تیار ہونے سے سب کچھ زیادہ آسان اور زیادہ مزے دار ہو جاتا ہے۔
+اس سے پہلے کہ ہم واقعی دلچسپ چیزوں میں غوطہ لگائیں، آئیے آپ کے کمپیوٹر کو کچھ GitHub جادو کے لیے تیار کریں! اسے ایک شاہکار بنانے سے پہلے اپنے آرٹ سپلائیز کو منظم کرنے جیسا سمجھیں – صحیح ٹولز تیار ہونے سے سب کچھ زیادہ آسان اور بہت زیادہ مزے دار ہو جاتا ہے۔
 
-میں آپ کو ہر سیٹ اپ مرحلے سے ذاتی طور پر گزاروں گا، اور میں وعدہ کرتا ہوں کہ یہ اتنا خوفناک نہیں جتنا پہلی نظر میں لگتا ہے۔ اگر کچھ فوری طور پر سمجھ میں نہ آئے، تو یہ بالکل معمول کی بات ہے! مجھے یاد ہے کہ جب میں نے اپنا پہلا ڈیولپمنٹ ماحول سیٹ اپ کیا تو ایسا محسوس ہوا جیسے میں قدیم ہائروگلیفس پڑھنے کی کوشش کر رہا ہوں۔ ہر ایک ڈویلپر بالکل وہیں رہا ہے جہاں آپ ابھی ہیں، یہ سوچتے ہوئے کہ آیا وہ صحیح کر رہے ہیں۔ اسپوئلر الرٹ: اگر آپ یہاں سیکھ رہے ہیں، تو آپ پہلے ہی صحیح کر رہے ہیں! 🌟
+میں آپ کو ہر سیٹ اپ مرحلے سے ذاتی طور پر گزاروں گا، اور میں وعدہ کرتا ہوں کہ یہ اتنا خوفناک نہیں ہے جتنا کہ یہ پہلی نظر میں لگ سکتا ہے۔ اگر کچھ فوری طور پر سمجھ میں نہ آئے، تو یہ بالکل معمول کی بات ہے! مجھے یاد ہے کہ میں نے اپنا پہلا ڈیولپمنٹ ماحول سیٹ کرتے ہوئے محسوس کیا تھا کہ جیسے میں قدیم ہائروگلیفس پڑھنے کی کوشش کر رہا ہوں۔ ہر ایک ڈویلپر بالکل وہیں رہا ہے جہاں آپ ابھی ہیں، یہ سوچتے ہوئے کہ آیا وہ صحیح کر رہے ہیں۔ اسپوئلر الرٹ: اگر آپ یہاں سیکھ رہے ہیں، تو آپ پہلے ہی صحیح کر رہے ہیں! 🌟
 
 اس سبق میں، ہم کور کریں گے:
 
-- آپ کے کمپیوٹر پر کیے گئے کام کو ٹریک کرنا
+- آپ کے مشین پر کیے گئے کام کو ٹریک کرنا
 - دوسروں کے ساتھ پروجیکٹس پر کام کرنا
 - اوپن سورس سافٹ ویئر میں حصہ ڈالنا
 
 ### ضروریات
 
-آئیے آپ کے کمپیوٹر کو کچھ GitHub جادو کے لیے تیار کریں! پریشان نہ ہوں – یہ سیٹ اپ آپ کو صرف ایک بار کرنا ہوگا، اور پھر آپ اپنی پوری کوڈنگ سفر کے لیے تیار ہوں گے۔
+آئیے آپ کے کمپیوٹر کو کچھ GitHub جادو کے لیے تیار کریں! فکر نہ کریں – یہ سیٹ اپ آپ کو صرف ایک بار کرنا ہوگا، اور پھر آپ اپنی پوری کوڈنگ سفر کے لیے تیار ہوں گے۔
 
 ٹھیک ہے، آئیے بنیاد سے شروع کریں! سب سے پہلے، ہمیں یہ چیک کرنا ہوگا کہ آیا Git پہلے سے ہی آپ کے کمپیوٹر پر موجود ہے۔ Git بنیادی طور پر ایک سپر اسمارٹ اسسٹنٹ کی طرح ہے جو آپ کے کوڈ میں کی گئی ہر تبدیلی کو یاد رکھتا ہے – ہر دو سیکنڈ میں Ctrl+S کو فرینٹکلی دبانے سے کہیں بہتر (ہم سب وہاں رہے ہیں!)۔
 
 آئیے دیکھتے ہیں کہ آیا Git پہلے سے انسٹال ہے، اس جادوئی کمانڈ کو اپنے ٹرمینل میں ٹائپ کریں:
 `git --version`
 
-اگر Git ابھی تک موجود نہیں ہے، تو کوئی مسئلہ نہیں! بس [Git ڈاؤنلوڈ کریں](https://git-scm.com/downloads) اور اسے حاصل کریں۔ ایک بار جب آپ نے اسے انسٹال کر لیا، تو ہمیں Git کو آپ سے صحیح طریقے سے متعارف کرانا ہوگا:
+اگر Git ابھی تک موجود نہیں ہے، تو کوئی مسئلہ نہیں! بس [Git ڈاؤنلوڈ کریں](https://git-scm.com/downloads) پر جائیں اور اسے حاصل کریں۔ ایک بار جب آپ نے اسے انسٹال کر لیا، ہمیں Git کو آپ سے صحیح طریقے سے متعارف کرانا ہوگا:
 
 > 💡 **پہلی بار سیٹ اپ**: یہ کمانڈز Git کو بتاتے ہیں کہ آپ کون ہیں۔ یہ معلومات آپ کے ہر کمیٹ کے ساتھ منسلک ہوگی، لہذا ایک نام اور ای میل منتخب کریں جسے آپ عوامی طور پر شیئر کرنے میں آرام دہ ہوں۔
 
@@ -68,13 +85,13 @@ git config --list
 
 ### تیاری
 
-آپ کو اپنے لوکل مشین (لیپ ٹاپ یا پی سی) پر کوڈ پروجیکٹ کے ساتھ ایک فولڈر اور GitHub پر ایک پبلک ریپوزیٹری کی ضرورت ہوگی، جو دوسروں کے پروجیکٹس میں حصہ ڈالنے کی مثال کے طور پر کام کرے گا۔
+آپ کو اپنے لوکل مشین (لیپ ٹاپ یا پی سی) پر کوڈ پروجیکٹ کے ساتھ ایک فولڈر اور GitHub پر ایک پبلک ریپوزیٹری کی ضرورت ہوگی، جو دوسروں کے پروجیکٹس میں حصہ ڈالنے کے لیے ایک مثال کے طور پر کام کرے گا۔
 
 ### اپنے کوڈ کو محفوظ رکھنا
 
-آئیے ایک لمحے کے لیے سیکیورٹی کے بارے میں بات کرتے ہیں – لیکن پریشان نہ ہوں، ہم آپ کو خوفزدہ کرنے والے مواد سے مغلوب نہیں کریں گے! ان سیکیورٹی طریقوں کو اپنی گاڑی یا گھر کو لاک کرنے جیسا سمجھیں۔ یہ آسان عادات ہیں جو فطری بن جاتی ہیں اور آپ کے محنتی کام کو محفوظ رکھتی ہیں۔
+آئیے سیکیورٹی کے بارے میں ایک لمحے کے لیے بات کرتے ہیں – لیکن فکر نہ کریں، ہم آپ کو خوفزدہ کرنے والے چیزوں سے مغلوب نہیں کریں گے! ان سیکیورٹی طریقوں کو اپنی گاڑی یا اپنے گھر کو لاک کرنے جیسا سمجھیں۔ یہ آسان عادات ہیں جو فطری بن جاتی ہیں اور آپ کے محنت کو محفوظ رکھتی ہیں۔
 
-ہم آپ کو شروع سے ہی GitHub کے ساتھ کام کرنے کے جدید، محفوظ طریقے دکھائیں گے۔ اس طرح، آپ اچھے عادات پیدا کریں گے جو آپ کی کوڈنگ کیریئر کے دوران آپ کے لیے فائدہ مند ہوں گے۔
+ہم آپ کو شروع سے ہی GitHub کے ساتھ کام کرنے کے جدید، محفوظ طریقے دکھائیں گے۔ اس طرح، آپ اچھے عادات پیدا کریں گے جو آپ کے کوڈنگ کیریئر کے دوران آپ کے لیے فائدہ مند ہوں گے۔
 
 GitHub کے ساتھ کام کرتے وقت، سیکیورٹی کے بہترین طریقوں پر عمل کرنا ضروری ہے:
 
@@ -82,8 +99,8 @@ GitHub کے ساتھ کام کرتے وقت، سیکیورٹی کے بہترین
 |---------------|---------------|----------------|
 | **تصدیق** | SSH keys یا Personal Access Tokens استعمال کریں | پاس ورڈز کم محفوظ ہیں اور ختم کیے جا رہے ہیں |
 | **ٹو فیکٹر تصدیق** | اپنے GitHub اکاؤنٹ پر 2FA فعال کریں | اکاؤنٹ کی حفاظت کی اضافی تہہ شامل کرتا ہے |
-| **ریپوزیٹری سیکیورٹی** | حساس معلومات کبھی بھی کمیٹ نہ کریں | API keys اور پاس ورڈز کبھی بھی پبلک ریپوز میں نہیں ہونے چاہئیں |
-| **ڈیپینڈنسی مینجمنٹ** | Dependabot کو اپڈیٹس کے لیے فعال کریں | آپ کی ڈیپینڈنسیز کو محفوظ اور اپ ٹو ڈیٹ رکھتا ہے |
+| **ریپوزیٹری سیکیورٹی** | حساس معلومات کبھی بھی کمیٹ نہ کریں | API keys اور پاس ورڈز کو کبھی بھی پبلک ریپوز میں نہیں ہونا چاہیے |
+| **ڈیپینڈنسی مینجمنٹ** | Dependabot کو اپڈیٹس کے لیے فعال کریں | آپ کے ڈیپینڈنسیز کو محفوظ اور اپ ٹو ڈیٹ رکھتا ہے |
 
 > ⚠️ **اہم سیکیورٹی یاد دہانی**: API keys، پاس ورڈز، یا دیگر حساس معلومات کو کسی بھی ریپوزیٹری میں کبھی بھی کمیٹ نہ کریں۔ حساس ڈیٹا کی حفاظت کے لیے environment variables اور `.gitignore` فائلز استعمال کریں۔
 
@@ -97,27 +114,51 @@ ssh-keygen -t ed25519 -C "your_email@example.com"
 git remote set-url origin git@github.com:username/repository.git
 ```
 
-> 💡 **پرو ٹپ**: SSH keys بار بار پاس ورڈز داخل کرنے کی ضرورت کو ختم کر دیتے ہیں اور روایتی تصدیق کے طریقوں سے زیادہ محفوظ ہیں۔
+> 💡 **پرو مشورہ**: SSH keys پاس ورڈز کو بار بار داخل کرنے کی ضرورت کو ختم کرتے ہیں اور روایتی تصدیق کے طریقوں سے زیادہ محفوظ ہیں۔
 
 ---
 
 ## اپنے کوڈ کو پروفیشنل انداز میں منظم کرنا
 
-ٹھیک ہے، یہ وہ جگہ ہے جہاں چیزیں واقعی دلچسپ ہو جاتی ہیں! 🎉 ہم یہ سیکھنے والے ہیں کہ اپنے کوڈ کو پروفیشنلز کی طرح کیسے ٹریک اور منظم کریں، اور ایمانداری سے، یہ میری پسندیدہ چیزوں میں سے ایک ہے کیونکہ یہ واقعی گیم چینجر ہے۔
-
-تصور کریں: آپ ایک حیرت انگیز کہانی لکھ رہے ہیں، اور آپ ہر ڈرافٹ، ہر شاندار ایڈیٹ، اور ہر "انتظار کریں، یہ تو زبردست ہے!" لمحے کو ٹریک کرنا چاہتے ہیں۔ یہی کام Git آپ کے کوڈ کے لیے کرتا ہے! یہ ایسا ہے جیسے آپ کے پاس سب سے ناقابل یقین وقت سفر کرنے والی نوٹ بک ہو جو سب کچھ یاد رکھتی ہے – ہر کی اسٹروک، ہر تبدیلی، ہر "اوہ، یہ سب کچھ خراب ہو گیا" لمحہ جسے آپ فوری طور پر واپس لے سکتے ہیں۔
-
-میں ایمانداری سے کہوں تو – شروع میں یہ سب کچھ بہت زیادہ محسوس ہو سکتا ہے۔ جب میں نے شروع کیا، تو میں نے سوچا "میں اپنی فائلز کو نارمل طریقے سے کیوں محفوظ نہیں کر سکتا؟" لیکن مجھ پر بھروسہ کریں: ایک بار جب Git آپ کے لیے کلک کرے گا (اور یہ کرے گا!)، آپ کے پاس وہ لمحہ ہوگا جب آپ سوچیں گے "میں نے کبھی اس کے بغیر کوڈنگ کیسے کی؟" یہ ایسا ہے جیسے آپ نے دریافت کیا کہ آپ اڑ سکتے ہیں جب آپ اپنی پوری زندگی پیدل چل رہے تھے!
-
-فرض کریں کہ آپ کے پاس لوکل فولڈر میں کچھ کوڈ پروجیکٹ ہے اور آپ اپنے پروگریس کو ٹریک کرنا چاہتے ہیں – ورژن کنٹرول سسٹم Git کا استعمال کرتے ہوئے۔ کچھ لوگ Git کا استعمال اپنے مستقبل کے خود کے لیے محبت کا خط لکھنے کے مترادف سمجھتے ہیں۔ اپنے کمیٹ میسیجز کو دنوں، ہفتوں، یا مہینوں بعد پڑھتے ہوئے آپ کو یاد آئے گا کہ آپ نے کوئی فیصلہ کیوں کیا، یا کسی تبدیلی کو "رول بیک" کریں گے – یعنی، جب آپ اچھے "کمیٹ میسیجز" لکھتے ہیں۔
+ٹھیک ہے، یہ وہ جگہ ہے جہاں چیزیں واقعی دلچسپ ہو جاتی ہیں! 🎉 ہم یہ سیکھنے والے ہیں کہ اپنے کوڈ کو پروفیشنلز کی طرح کیسے ٹریک اور منظم کریں، اور ایمانداری سے، یہ میری پسندیدہ چیزوں میں سے ایک ہے کیونکہ یہ واقعی ایک گیم چینجر ہے۔
+
+تصور کریں: آپ ایک حیرت انگیز کہانی لکھ رہے ہیں، اور آپ ہر ڈرافٹ، ہر شاندار ایڈیٹ، اور ہر "انتظار کریں، یہ تو زبردست ہے!" لمحے کو ٹریک کرنا چاہتے ہیں۔ یہی کام Git آپ کے کوڈ کے لیے کرتا ہے! یہ ایسا ہے جیسے آپ کے پاس سب سے حیرت انگیز وقت سفر کرنے والی نوٹ بک ہو جو سب کچھ یاد رکھتی ہے – ہر کی اسٹروک، ہر تبدیلی، ہر "اوہ، یہ سب کچھ خراب ہو گیا" لمحہ جسے آپ فوری طور پر واپس لے سکتے ہیں۔
+
+میں ایمانداری سے کہوں تو – شروع میں یہ سب کچھ بہت زیادہ لگ سکتا ہے۔ جب میں نے شروع کیا، تو میں نے سوچا "میں اپنی فائلز کو نارمل طریقے سے کیوں محفوظ نہیں کر سکتا؟" لیکن مجھ پر بھروسہ کریں: ایک بار جب Git آپ کے لیے کلک کرے گا (اور یہ کرے گا!)، تو آپ کے پاس وہ لمحہ ہوگا جب آپ سوچیں گے "میں نے بغیر اس کے کبھی کوڈنگ کیسے کی؟" یہ ایسا ہے جیسے آپ نے اڑنا دریافت کیا ہو جب آپ اپنی پوری زندگی پیدل چل رہے تھے!
+
+فرض کریں کہ آپ کے پاس لوکل طور پر ایک فولڈر ہے جس میں کچھ کوڈ پروجیکٹ ہے اور آپ git – ورژن کنٹرول سسٹم – کا استعمال کرتے ہوئے اپنی پیش رفت کو ٹریک کرنا چاہتے ہیں۔ کچھ لوگ git استعمال کرنے کو اپنے مستقبل کے خود کے لیے محبت کا خط لکھنے کے مترادف قرار دیتے ہیں۔ اپنے کمیٹ میسیجز کو دنوں، ہفتوں یا مہینوں بعد پڑھتے ہوئے آپ کو یاد آئے گا کہ آپ نے کوئی فیصلہ کیوں کیا، یا کسی تبدیلی کو "رول بیک" کریں گے – یعنی، جب آپ اچھے "کمیٹ میسیجز" لکھتے ہیں۔
+
+```mermaid
+flowchart TD
+    A[📁 Your Project Files] --> B{Is it a Git Repository?}
+    B -->|No| C[git init]
+    B -->|Yes| D[Make Changes]
+    C --> D
+    D --> E[git add .]
+    E --> F["git commit -m 'message'"]
+    F --> G[git push]
+    G --> H[🌟 Code on GitHub!]
+    
+    H --> I{Want to collaborate?}
+    I -->|Yes| J[Fork & Clone]
+    I -->|No| D
+    J --> K[Create Branch]
+    K --> L[Make Changes]
+    L --> M[Pull Request]
+    M --> N[🎉 Contributing!]
+    
+    style A fill:#fff59d
+    style H fill:#c8e6c9
+    style N fill:#ff4081,color:#fff
+```
 
 ### کام: اپنی پہلی ریپوزیٹری بنائیں!
 
-> 🎯 **آپ کا مشن (اور میں آپ کے لیے بہت پرجوش ہوں!)**: ہم آپ کے ساتھ مل کر آپ کی پہلی GitHub ریپوزیٹری بنائیں گے! جب ہم یہاں ختم کریں گے، تو آپ کے پاس انٹرنیٹ پر اپنا چھوٹا سا گوشہ ہوگا جہاں آپ کا کوڈ موجود ہوگا، اور آپ نے اپنا پہلا "کمیٹ" کیا ہوگا (یہ ڈویلپر زبان میں اپنے کام کو واقعی ہوشیار طریقے سے محفوظ کرنے کے لیے کہا جاتا ہے)۔
+> 🎯 **آپ کا مشن (اور میں آپ کے لیے بہت پرجوش ہوں!)**: ہم آپ کے ساتھ مل کر آپ کی پہلی GitHub ریپوزیٹری بنائیں گے! جب ہم یہاں ختم کریں گے، تو آپ کے پاس انٹرنیٹ کا اپنا چھوٹا سا گوشہ ہوگا جہاں آپ کا کوڈ موجود ہوگا، اور آپ نے اپنا پہلا "کمیٹ" کیا ہوگا (یہ ڈویلپر زبان میں اپنے کام کو واقعی ہوشیار طریقے سے محفوظ کرنے کے لیے کہا جاتا ہے)۔
 >
-> یہ واقعی ایک خاص لمحہ ہے – آپ عالمی ڈویلپرز کی کمیونٹی میں باضابطہ طور پر شامل ہونے والے ہیں! مجھے اب بھی یاد ہے کہ اپنی پہلی ریپوزیٹری بنانے کا جوش اور یہ سوچنا "واہ، میں واقعی یہ کر رہا ہوں!"
+> یہ واقعی ایک خاص لمحہ ہے – آپ عالمی ڈویلپرز کی کمیونٹی میں باضابطہ طور پر شامل ہونے والے ہیں! مجھے اب بھی یاد ہے کہ اپنی پہلی ریپو بنانے کا جوش اور یہ سوچنا "واہ، میں واقعی یہ کر رہا ہوں!"
 
-آئیے اس مہم جوئی کو ایک ساتھ، قدم بہ قدم، طے کریں۔ ہر حصے کے ساتھ اپنا وقت لیں – جلدی کرنے کا کوئی انعام نہیں ہے، اور میں وعدہ کرتا ہوں کہ ہر ایک قدم سمجھ میں آئے گا۔ یاد رکھیں، ہر وہ کوڈنگ سپر اسٹار جس کی آپ تعریف کرتے ہیں، کبھی وہیں بیٹھا تھا جہاں آپ ابھی ہیں، اپنی پہلی ریپوزیٹری بنانے والا۔ یہ کتنا زبردست ہے؟
+آئیے اس مہم جوئی کو ایک ساتھ، قدم بہ قدم چلتے ہیں۔ ہر حصے کے ساتھ اپنا وقت لیں – جلدی کرنے کا کوئی انعام نہیں ہے، اور میں وعدہ کرتا ہوں کہ ہر ایک قدم سمجھ میں آئے گا۔ یاد رکھیں، ہر کوڈنگ سپر اسٹار جس کی آپ تعریف کرتے ہیں، ایک بار بالکل وہیں بیٹھا تھا جہاں آپ ہیں، اپنی پہلی ریپوزیٹری بنانے کے لیے تیار۔ یہ کتنا زبردست ہے؟
 
 > ویڈیو دیکھیں
 > 
@@ -129,18 +170,18 @@ git remote set-url origin git@github.com:username/repository.git
 
    یہاں کیا کرنا ہے:
    1. اپنی ریپوزیٹری کو ایک نام دیں – اسے اپنے لیے معنی خیز بنائیں!
-   1. اگر آپ چاہیں تو ایک وضاحت شامل کریں (یہ دوسروں کو بتانے میں مدد کرتا ہے کہ آپ کا پروجیکٹ کیا ہے)
-   1. فیصلہ کریں کہ آپ اسے پبلک (ہر کوئی اسے دیکھ سکتا ہے) یا پرائیویٹ (صرف آپ کے لیے) بنانا چاہتے ہیں
-   1. میں تجویز کرتا ہوں کہ README فائل شامل کرنے کے باکس کو چیک کریں – یہ آپ کے پروجیکٹ کا فرنٹ پیج جیسا ہے
-   1. **ریپوزیٹری بنائیں** پر کلک کریں اور جشن منائیں – آپ نے اپنی پہلی ریپوزیٹری بنائی! 🎉
+   1. اگر آپ چاہیں تو ایک وضاحت شامل کریں (یہ دوسروں کو بتانے میں مدد کرتا ہے کہ آپ کا پروجیکٹ کس بارے میں ہے)
+   1. فیصلہ کریں کہ آپ اسے عوامی (سب کے لیے قابل دید) یا نجی (صرف آپ کے لیے) بنانا چاہتے ہیں
+   1. میں تجویز کرتا ہوں کہ README فائل شامل کرنے کے لیے باکس کو چیک کریں – یہ آپ کے پروجیکٹ کا فرنٹ پیج جیسا ہے
+   1. **ریپوزیٹری بنائیں** پر کلک کریں اور جشن منائیں – آپ نے اپنی پہلی ریپو بنائی! 🎉
 
-2. **اپنے پروجیکٹ فولڈر پر جائیں**۔ اب آئیے اپنا ٹرمینل کھولیں (پریشان نہ ہوں، یہ اتنا خوفناک نہیں جتنا لگتا ہے!)۔ ہمیں اپنے کمپیوٹر کو بتانا ہوگا کہ ہمارے پروجیکٹ فائلز کہاں ہیں۔ یہ کمانڈ ٹائپ کریں:
+2. **اپنے پروجیکٹ فولڈر پر جائیں**۔ اب آئیے اپنا ٹرمینل کھولیں (فکر نہ کریں، یہ اتنا خوفناک نہیں ہے جتنا کہ یہ لگتا ہے!)۔ ہمیں اپنے کمپیوٹر کو بتانا ہوگا کہ ہمارے پروجیکٹ فائلز کہاں ہیں۔ یہ کمانڈ ٹائپ کریں:
 
    ```bash
    cd [name of your folder]
    ```
 
-   **یہاں ہم کیا کر رہے ہیں:**
+   **ہم یہاں کیا کر رہے ہیں:**
    - ہم بنیادی طور پر کہہ رہے ہیں "ہی کمپیوٹر، مجھے میرے پروجیکٹ فولڈر پر لے چلو"
    - یہ آپ کے ڈیسک ٹاپ پر ایک مخصوص فولڈر کھولنے جیسا ہے، لیکن ہم یہ ٹیکسٹ کمانڈز کے ساتھ کر رہے ہیں
    - `[آپ کے فولڈر کا نام]` کو اپنے پروجیکٹ فولڈر کے اصل نام سے تبدیل کریں
@@ -152,17 +193,17 @@ git remote set-url origin git@github.com:username/repository.git
    ```
 
    **یہاں کیا ہوا (واقعی زبردست چیزیں!):**
-   - Git نے آپ کے پروجیکٹ میں ایک چھپا ہوا `.git` فولڈر بنایا – آپ اسے نہیں دیکھیں گے، لیکن یہ وہاں موجود ہے!
+   - Git نے آپ کے پروجیکٹ میں ایک چھپا ہوا `.git` فولڈر بنایا – آپ اسے نہیں دیکھیں گے، لیکن یہ وہاں ہے!
    - آپ کا عام فولڈر اب ایک "ریپوزیٹری" ہے جو آپ کی کی گئی ہر تبدیلی کو ٹریک کر سکتا ہے
-   - اسے ایسا سمجھیں جیسے آپ کے فولڈر کو سب کچھ یاد رکھنے کی سپر پاورز دی گئی ہوں
+   - اسے ایسا سمجھیں جیسے آپ کے فولڈر کو سب کچھ یاد رکھنے کی سپر پاورز دینا
 
-4. **چیک کریں کہ کیا ہو رہا ہے**۔ آئیے دیکھتے ہیں کہ Git اس وقت آپ کے پروجیکٹ کے بارے میں کیا سوچتا ہے:
+4. **چیک کریں کہ کیا ہو رہا ہے**۔ آئیے دیکھتے ہیں کہ Git آپ کے پروجیکٹ کے بارے میں ابھی کیا سوچتا ہے:
 
    ```bash
    git status
    ```
 
-   **سمجھیں کہ Git آپ کو کیا بتا رہا ہے:**
+   **سمجھنا کہ Git آپ کو کیا بتا رہا ہے:**
    
    آپ کو کچھ ایسا نظر آ سکتا ہے:
 
@@ -180,7 +221,7 @@ git remote set-url origin git@github.com:username/repository.git
    - **سبز** میں فائلز (جب آپ انہیں دیکھیں گے) محفوظ کرنے کے لیے تیار ہیں
    - Git آپ کی مدد کر رہا ہے، بالکل بتا کر کہ آپ اگلے کیا کر سکتے ہیں
 
-   > 💡 **پرو ٹپ**: `git status` کمانڈ آپ کا بہترین دوست ہے! جب بھی آپ الجھن میں ہوں کہ کیا ہو رہا ہے، اسے استعمال کریں۔ یہ ایسا ہے جیسے Git سے پوچھنا "ہی، ابھی کیا صورتحال ہے؟"
+   > 💡 **پرو مشورہ**: `git status` کمانڈ آپ کا بہترین دوست ہے! جب بھی آپ الجھن میں ہوں کہ کیا ہو رہا ہے، اسے استعمال کریں۔ یہ ایسا ہے جیسے Git سے پوچھنا "ہی، ابھی کیا صورتحال ہے؟"
 
 5. **اپنی فائلز کو محفوظ کرنے کے لیے تیار کریں** (اسے "اسٹیجنگ" کہا جاتا ہے):
 
@@ -214,9 +255,9 @@ git remote set-url origin git@github.com:username/repository.git
    git reset [file name]
    ```
 
-   پریشان نہ ہوں – یہ آپ کے کام کو حذف نہیں کرتا، یہ صرف فائلز کو "محفوظ کرنے کے لیے تیار" کے ڈھیر سے نکالتا ہے۔
+   فکر نہ کریں – یہ آپ کے کام کو حذف نہیں کرتا، یہ صرف فائلز کو "محفوظ کرنے کے لیے تیار" ڈھیر سے نکالتا ہے۔
 
-6. **اپنا کام مستقل طور پر محفوظ کریں** (اپنا پہلا کمیٹ بنانا!):
+6. **اپنے کام کو مستقل طور پر محفوظ کریں** (اپنا پہلا کمیٹ بنانا!):
 
    ```bash
    git commit -m "first commit"
@@ -225,19 +266,18 @@ git remote set-url origin git@github.com:username/repository.git
    **🎉 مبارک ہو! آپ نے اپنا پہلا کمیٹ بنایا!**
    
    **یہاں کیا ہوا:**
-   - Git نے آپ کی تمام اسٹیجڈ فائلز کا اس خاص لمحے پر "اسنیپ شاٹ" لیا
+   - Git نے اس لمحے پر آپ کی تمام اسٹیجڈ فائلز کا "اسنیپ شاٹ" لیا
    - آپ کا کمیٹ میسیج "پہلا کمیٹ" بتاتا ہے کہ یہ محفوظ کرنے کا پوائنٹ کس بارے میں ہے
-   - Git نے اس اسنیپ شاٹ کو ایک منفرد ID دی تاکہ آپ اسے ہمیشہ بعد میں تلاش کر سکیں
+   - Git نے اس اسنیپ شاٹ کو ایک منفرد ID دیا تاکہ آپ اسے ہمیشہ بعد میں تلاش کر سکیں
    - آپ نے باضابطہ طور پر اپنے پروجیکٹ کی تاریخ کو ٹریک کرنا شروع کر دیا ہے!
 
-   > 💡 **مستقبل کے کمیٹ میسیجز**: اپنے اگلے کمیٹس کے لیے، زیادہ وضاحت کریں! "اپ ڈیٹڈ اسٹف" کے بجائے، "ہوم پیج پر کانٹیکٹ فارم شامل کریں" یا "نیویگیشن مینو بگ کو ٹھیک کریں" آزمائیں۔ آپ کا مستقبل کا خود آپ کا شکر گزار ہوگا!
-
-7. **اپنے لوکل پرو
-   - ہم نے آپ کے مقامی پروجیکٹ اور آپ کے GitHub ریپوزیٹری کے درمیان ایک کنکشن بنایا ہے۔
-   - "Origin" آپ کے GitHub ریپوزیٹری کا صرف ایک عرفی نام ہے – یہ بالکل ایسے ہے جیسے آپ اپنے فون میں کسی کانٹیکٹ کو شامل کرتے ہیں۔
-   - اب آپ کا مقامی Git جانتا ہے کہ آپ کا کوڈ کہاں بھیجنا ہے جب آپ اسے شیئر کرنے کے لیے تیار ہوں۔
+   > 💡 **مستقبل کے کمیٹ میسیجز**: اپنے اگلے کمیٹس کے لیے، زیادہ وضاحت کریں! "اپ ڈیٹڈ اسٹف" کے بجائے، "ہوم پیج پر کانٹیکٹ فارم شامل کریں" یا "نیویگیشن مینو بگ کو ٹھیک کریں" آزمائیں۔ آپ کا مستقبل کا خود آپ کا
+**ہم نے ابھی کیا کیا:**
+- ہم نے آپ کے مقامی پروجیکٹ اور آپ کے GitHub ریپوزٹری کے درمیان ایک کنکشن بنایا۔
+- "Origin" آپ کے GitHub ریپوزٹری کا ایک عرفی نام ہے – یہ بالکل ایسے ہے جیسے آپ اپنے فون میں کسی کا کانٹیکٹ ایڈ کریں۔
+- اب آپ کا مقامی Git جانتا ہے کہ آپ کا کوڈ کہاں بھیجنا ہے جب آپ اسے شیئر کرنے کے لیے تیار ہوں۔
 
-   💡 **آسان طریقہ**: اگر آپ نے GitHub CLI انسٹال کیا ہوا ہے، تو آپ یہ ایک کمانڈ میں کر سکتے ہیں:
+💡 **آسان طریقہ**: اگر آپ کے پاس GitHub CLI انسٹال ہے، تو آپ یہ ایک کمانڈ میں کر سکتے ہیں:
    ```bash
    gh repo create my-repo --public --push --source=.
    ```
@@ -248,19 +288,19 @@ git remote set-url origin git@github.com:username/repository.git
    git push -u origin main
    ```
 
-   **🚀 یہ وہ لمحہ ہے! آپ اپنا کوڈ GitHub پر اپلوڈ کر رہے ہیں!**
-   
-   **کیا ہو رہا ہے:**
-   - آپ کے commits آپ کے کمپیوٹر سے GitHub تک جا رہے ہیں۔
-   - `-u` فلیگ ایک مستقل کنکشن قائم کرتا ہے تاکہ آئندہ کے اپلوڈز آسان ہوں۔
-   - "main" آپ کی بنیادی برانچ کا نام ہے (جیسے مرکزی فولڈر)۔
-   - اس کے بعد، آپ آئندہ اپلوڈز کے لیے صرف `git push` ٹائپ کر سکتے ہیں!
+**🚀 یہ وہی ہے! آپ اپنا کوڈ GitHub پر اپلوڈ کر رہے ہیں!**
+
+**کیا ہو رہا ہے:**
+- آپ کے commits آپ کے کمپیوٹر سے GitHub کی طرف جا رہے ہیں۔
+- `-u` فلیگ ایک مستقل کنکشن سیٹ کرتا ہے تاکہ آئندہ کے pushes آسان ہوں۔
+- "main" آپ کی پرائمری برانچ کا نام ہے (جیسے مرکزی فولڈر)۔
+- اس کے بعد، آپ صرف `git push` لکھ سکتے ہیں آئندہ اپلوڈز کے لیے!
 
-   💡 **جلدی نوٹ**: اگر آپ کی برانچ کا نام کچھ اور ہے (جیسے "master")، تو وہ نام استعمال کریں۔ آپ `git branch --show-current` کے ذریعے چیک کر سکتے ہیں۔
+💡 **ایک چھوٹا نوٹ**: اگر آپ کی برانچ کا نام کچھ اور ہے (جیسے "master")، تو وہ نام استعمال کریں۔ آپ `git branch --show-current` کے ذریعے چیک کر سکتے ہیں۔
 
 9. **آپ کا نیا روزمرہ کوڈنگ کا معمول** (یہ وہ جگہ ہے جہاں یہ عادت بن جاتی ہے!):
 
-   اب سے، جب بھی آپ اپنے پروجیکٹ میں تبدیلیاں کریں گے، آپ کے پاس یہ آسان تین قدمی عمل ہوگا:
+اب سے، جب بھی آپ اپنے پروجیکٹ میں تبدیلیاں کریں گے، آپ کے پاس یہ آسان تین قدمی عمل ہوگا:
 
    ```bash
    git add .
@@ -268,101 +308,147 @@ git remote set-url origin git@github.com:username/repository.git
    git push
    ```
 
-   **یہ آپ کی کوڈنگ کی دھڑکن بن جاتی ہے:**
-   - اپنے کوڈ میں کچھ زبردست تبدیلیاں کریں ✨
-   - انہیں `git add` کے ساتھ اسٹیج کریں ("Hey Git, ان تبدیلیوں پر توجہ دیں!")
-   - انہیں `git commit` اور ایک وضاحتی پیغام کے ساتھ محفوظ کریں (مستقبل کا آپ آپ کا شکریہ ادا کرے گا!)
-   - انہیں دنیا کے ساتھ شیئر کریں `git push` کے ذریعے 🚀
-   - بار بار کریں – واقعی، یہ سانس لینے کی طرح قدرتی بن جاتا ہے!
-
-   مجھے یہ ورک فلو پسند ہے کیونکہ یہ ویڈیو گیم میں متعدد سیو پوائنٹس رکھنے جیسا ہے۔ کوئی تبدیلی کی جو آپ کو پسند آئی؟ Commit کریں! کچھ خطرناک آزمانا چاہتے ہیں؟ کوئی مسئلہ نہیں – اگر چیزیں خراب ہو جائیں تو آپ ہمیشہ اپنے آخری commit پر واپس جا سکتے ہیں!
+**یہ آپ کی کوڈنگ کی دھڑکن بن جاتی ہے:**
+- اپنے کوڈ میں کچھ زبردست تبدیلیاں کریں ✨
+- انہیں `git add` کے ساتھ اسٹیج کریں ("ارے Git، ان تبدیلیوں پر توجہ دو!")
+- انہیں `git commit` اور ایک وضاحتی پیغام کے ساتھ محفوظ کریں (مستقبل کا آپ آپ کا شکر گزار ہوگا!)
+- انہیں دنیا کے ساتھ شیئر کریں `git push` کے ذریعے 🚀
+- دہرائیں اور جاری رکھیں – واقعی، یہ سانس لینے جتنا قدرتی بن جاتا ہے!
+
+مجھے یہ ورک فلو پسند ہے کیونکہ یہ ویڈیو گیم میں متعدد سیو پوائنٹس رکھنے جیسا ہے۔ کوئی تبدیلی کی جو آپ کو پسند آئی؟ Commit کریں! کچھ خطرناک آزمانا چاہتے ہیں؟ کوئی مسئلہ نہیں – اگر چیزیں خراب ہو جائیں تو آپ ہمیشہ اپنے آخری commit پر واپس جا سکتے ہیں!
+
+> 💡 **ٹپ**: آپ ایک `.gitignore` فائل اپنانا بھی چاہیں گے تاکہ وہ فائلز جو آپ ٹریک نہیں کرنا چاہتے GitHub پر ظاہر نہ ہوں – جیسے وہ نوٹس فائل جو آپ اسی فولڈر میں رکھتے ہیں لیکن اس کا عوامی ریپوزٹری میں کوئی کام نہیں۔ آپ `.gitignore` فائلز کے ٹیمپلیٹس [.gitignore templates](https://github.com/github/gitignore) پر یا [gitignore.io](https://www.toptal.com/developers/gitignore) کے ذریعے بنا سکتے ہیں۔
+
+### 🧠 **پہلا ریپوزٹری چیک ان: کیسا لگا؟**
+
+**ایک لمحہ نکالیں اور جشن منائیں:**
+- آپ کا کوڈ پہلی بار GitHub پر دیکھ کر کیسا لگا؟
+- کون سا قدم سب سے زیادہ الجھا ہوا لگا، اور کون سا حیرت انگیز طور پر آسان لگا؟
+- کیا آپ اپنے الفاظ میں `git add`, `git commit`, اور `git push` کے فرق کی وضاحت کر سکتے ہیں؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> LocalFiles: Create project
+    LocalFiles --> Staged: git add .
+    Staged --> Committed: git commit
+    Committed --> GitHub: git push
+    GitHub --> [*]: Success! 🎉
+    
+    note right of Staged
+        Files ready to save
+    end note
+    
+    note right of Committed
+        Snapshot created
+    end note
+```
 
-   > 💡 **ٹپ**: آپ `.gitignore` فائل اپنانا بھی چاہ سکتے ہیں تاکہ وہ فائلیں جو آپ ٹریک نہیں کرنا چاہتے GitHub پر ظاہر نہ ہوں - جیسے وہ نوٹس فائل جو آپ اسی فولڈر میں محفوظ کرتے ہیں لیکن عوامی ریپوزیٹری میں اس کی کوئی جگہ نہیں۔ آپ `.gitignore` فائلز کے ٹیمپلیٹس [.gitignore templates](https://github.com/github/gitignore) پر یا [gitignore.io](https://www.toptal.com/developers/gitignore) کے ذریعے بنا سکتے ہیں۔
+> **یاد رکھیں**: یہاں تک کہ تجربہ کار ڈویلپرز بھی کبھی کبھار صحیح کمانڈز بھول جاتے ہیں۔ اس ورک فلو کو عادت بنانے میں وقت لگتا ہے – آپ بہت اچھا کر رہے ہیں!
 
 #### جدید Git ورک فلو
 
 ان جدید طریقوں کو اپنانے پر غور کریں:
 
-- **Conventional Commits**: ایک معیاری commit پیغام فارمیٹ استعمال کریں جیسے `feat:`, `fix:`, `docs:` وغیرہ۔ مزید جانیں [conventionalcommits.org](https://www.conventionalcommits.org/) پر۔
-- **Atomic commits**: ہر commit کو ایک منطقی تبدیلی کی نمائندگی کریں۔
+- **Conventional Commits**: ایک معیاری commit میسج فارمیٹ استعمال کریں جیسے `feat:`, `fix:`, `docs:` وغیرہ۔ مزید جانیں [conventionalcommits.org](https://www.conventionalcommits.org/) پر۔
+- **Atomic commits**: ہر commit کو ایک منطقی تبدیلی کی نمائندگی کرنے دیں۔
 - **Frequent commits**: بڑے، کم وقفے والے commits کے بجائے اکثر اور وضاحتی پیغامات کے ساتھ commit کریں۔
 
-#### Commit پیغامات
+#### Commit میسجز
 
 ایک بہترین Git commit سبجیکٹ لائن درج ذیل جملے کو مکمل کرتی ہے:
-اگر لاگو کیا گیا، تو یہ commit <آپ کی سبجیکٹ لائن یہاں>
+اگر لاگو کیا گیا، تو یہ commit <آپ کی سبجیکٹ لائن یہاں> کرے گا۔
 
-سبجیکٹ کے لیے imperative، present tense استعمال کریں: "change" نہ کہ "changed" یا "changes"۔
-جیسے سبجیکٹ میں، باڈی (اختیاری) میں بھی imperative، present tense استعمال کریں۔ باڈی میں تبدیلی کی وجہ شامل کریں اور اسے پچھلے رویے کے ساتھ موازنہ کریں۔ آپ `کیوں` کی وضاحت کر رہے ہیں، نہ کہ `کیسے`۔
+سبجیکٹ کے لیے imperative، present tense استعمال کریں: "change" نہ کہ "changed" یا "changes"۔ 
+جیسے کہ سبجیکٹ میں، باڈی (اختیاری) میں بھی imperative، present tense استعمال کریں۔ باڈی میں تبدیلی کی وجہ شامل کریں اور اسے پچھلے رویے کے ساتھ موازنہ کریں۔ آپ `کیوں` کی وضاحت کر رہے ہیں، `کیسے` کی نہیں۔
 
-✅ GitHub پر کچھ وقت گزاریں۔ کیا آپ واقعی ایک بہترین commit پیغام تلاش کر سکتے ہیں؟ کیا آپ ایک بہت ہی مختصر پیغام تلاش کر سکتے ہیں؟ آپ کے خیال میں commit پیغام میں کون سی معلومات سب سے زیادہ اہم اور مفید ہیں؟
+✅ چند منٹ نکال کر GitHub پر گھومیں۔ کیا آپ کو کوئی واقعی زبردست commit میسج ملتا ہے؟ کیا آپ کو کوئی بہت ہی مختصر میسج ملتا ہے؟ آپ کے خیال میں commit میسج میں کون سی معلومات سب سے زیادہ اہم اور مفید ہیں؟
 
-## دوسروں کے ساتھ کام کرنا (مزا دار حصہ!)
+## دوسروں کے ساتھ کام کرنا (مزے کا حصہ!)
 
-اپنی ٹوپی تھام لیں کیونکہ یہ وہ جگہ ہے جہاں GitHub بالکل جادوئی ہو جاتا ہے! 🪄 آپ نے اپنے کوڈ کو منظم کرنے میں مہارت حاصل کر لی ہے، لیکن اب ہم میرے بالکل پسندیدہ حصے میں جا رہے ہیں – دنیا بھر کے حیرت انگیز لوگوں کے ساتھ تعاون کرنا۔
+اپنی ٹوپی تھام لیں کیونکہ یہ وہ جگہ ہے جہاں GitHub بالکل جادوئی بن جاتا ہے! 🪄 آپ نے اپنے کوڈ کو منظم کرنے میں مہارت حاصل کر لی ہے، لیکن اب ہم میرے بالکل پسندیدہ حصے میں جا رہے ہیں – دنیا بھر کے حیرت انگیز لوگوں کے ساتھ تعاون کرنا۔
 
-یہ تصور کریں: آپ کل صبح اٹھتے ہیں اور دیکھتے ہیں کہ ٹوکیو میں کسی نے آپ کے کوڈ کو بہتر بنایا ہے جب آپ سو رہے تھے۔ پھر برلن میں کسی نے ایک بگ ٹھیک کیا جس پر آپ پھنسے ہوئے تھے۔ دوپہر تک، ساؤ پالو میں ایک ڈویلپر نے ایک فیچر شامل کیا جس کے بارے میں آپ نے کبھی سوچا بھی نہیں تھا۔ یہ سائنس فکشن نہیں ہے – یہ صرف GitHub کائنات میں ایک عام دن ہے!
+یہ تصور کریں: آپ کل صبح اٹھتے ہیں اور دیکھتے ہیں کہ ٹوکیو میں کسی نے آپ کے کوڈ کو بہتر بنایا ہے جب آپ سو رہے تھے۔ پھر برلن میں کسی نے ایک بگ ٹھیک کیا جس پر آپ پھنسے ہوئے تھے۔ دوپہر تک، ساؤ پالو میں ایک ڈویلپر نے ایک ایسا فیچر شامل کیا جس کے بارے میں آپ نے کبھی سوچا بھی نہیں تھا۔ یہ سائنس فکشن نہیں ہے – یہ صرف GitHub کی دنیا میں ایک عام دن ہے!
 
-جو چیز مجھے واقعی پرجوش کرتی ہے وہ یہ ہے کہ آپ جو تعاون کی مہارتیں سیکھنے والے ہیں؟ یہ وہی ورک فلو ہیں جو گوگل، مائیکروسافٹ، اور آپ کے پسندیدہ اسٹارٹ اپس کی ٹیمیں ہر روز استعمال کرتی ہیں۔ آپ صرف ایک زبردست ٹول نہیں سیکھ رہے – آپ وہ خفیہ زبان سیکھ رہے ہیں جو پوری سافٹ ویئر دنیا کو ایک ساتھ کام کرنے کے قابل بناتی ہے۔
+جو چیز مجھے واقعی پرجوش کرتی ہے وہ یہ ہے کہ آپ جو تعاون کی مہارتیں سیکھنے والے ہیں؟ یہ وہی ورک فلو ہیں جو گوگل، مائیکروسافٹ، اور آپ کے پسندیدہ اسٹارٹ اپس کی ٹیمیں ہر روز استعمال کرتی ہیں۔ آپ صرف ایک زبردست ٹول نہیں سیکھ رہے – آپ وہ خفیہ زبان سیکھ رہے ہیں جو پورے سافٹ ویئر کی دنیا کو ایک ساتھ کام کرنے کے قابل بناتی ہے۔
 
-سچ میں، جب آپ کسی کے پہلے pull request کو merge کرنے کا جوش محسوس کرتے ہیں، تو آپ سمجھ جائیں گے کہ ڈویلپرز اوپن سورس کے بارے میں اتنے پرجوش کیوں ہوتے ہیں۔ یہ دنیا کے سب سے بڑے، سب سے تخلیقی ٹیم پروجیکٹ کا حصہ بننے جیسا ہے!
+سچ میں، جب آپ کو کوئی آپ کی پہلی pull request merge کرتا ہے تو آپ کو جو جوش محسوس ہوتا ہے، آپ سمجھ جائیں گے کہ ڈویلپرز اوپن سورس کے بارے میں اتنے پرجوش کیوں ہوتے ہیں۔ یہ دنیا کے سب سے بڑے، سب سے تخلیقی ٹیم پروجیکٹ کا حصہ بننے جیسا ہے!
 
 > ویڈیو دیکھیں
 >
-> [![Git اور GitHub بنیادی ویڈیو](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
-
-GitHub پر چیزیں ڈالنے کی بنیادی وجہ دوسرے ڈویلپرز کے ساتھ تعاون ممکن بنانا تھا۔
+> [![Git اور GitHub کی بنیادی باتیں ویڈیو](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+GitHub پر چیزیں ڈالنے کی بنیادی وجہ یہ تھی کہ دوسرے ڈویلپرز کے ساتھ تعاون ممکن ہو۔
+
+```mermaid
+flowchart LR
+    A[🔍 Find Project] --> B[🍴 Fork Repository]
+    B --> C[📥 Clone to Local]
+    C --> D[🌿 Create Branch]
+    D --> E[✏️ Make Changes]
+    E --> F[💾 Commit Changes]
+    F --> G[📤 Push Branch]
+    G --> H[🔄 Create Pull Request]
+    H --> I{Maintainer Review}
+    I -->|✅ Approved| J[🎉 Merge!]
+    I -->|❓ Changes Requested| K[📝 Make Updates]
+    K --> F
+    J --> L[🧹 Clean Up Branches]
+    
+    style A fill:#e3f2fd
+    style J fill:#e8f5e8
+    style L fill:#fff3e0
+```
 
-اپنے ریپوزیٹری میں، `Insights > Community` پر جائیں تاکہ دیکھ سکیں کہ آپ کا پروجیکٹ تجویز کردہ کمیونٹی معیارات کے ساتھ کیسے موازنہ کرتا ہے۔
+اپنے ریپوزٹری میں، `Insights > Community` پر جائیں تاکہ دیکھ سکیں کہ آپ کا پروجیکٹ تجویز کردہ کمیونٹی معیارات کے ساتھ کیسے موازنہ کرتا ہے۔
 
-اپنے ریپوزیٹری کو پیشہ ورانہ اور خوش آمدید بنانے کے لیے؟ اپنے ریپوزیٹری پر جائیں اور `Insights > Community` پر کلک کریں۔ یہ زبردست فیچر آپ کو دکھاتا ہے کہ آپ کا پروجیکٹ GitHub کمیونٹی کے "اچھے ریپوزیٹری طریقوں" کے ساتھ کیسے موازنہ کرتا ہے۔
+اپنے ریپوزٹری کو پیشہ ورانہ اور خوش آمدید کہنے والا بنانا چاہتے ہیں؟ اپنے ریپوزٹری پر جائیں اور `Insights > Community` پر کلک کریں۔ یہ زبردست فیچر آپ کو دکھاتا ہے کہ آپ کا پروجیکٹ GitHub کمیونٹی کے "اچھے ریپوزٹری کے طریقوں" کے ساتھ کیسے موازنہ کرتا ہے۔
 
-> 🎯 **اپنے پروجیکٹ کو چمکائیں**: ایک اچھی طرح سے منظم ریپوزیٹری جس میں اچھی دستاویزات ہوں، ایک صاف، خوش آمدید دینے والے اسٹور فرنٹ کی طرح ہے۔ یہ لوگوں کو بتاتا ہے کہ آپ اپنے کام کی پرواہ کرتے ہیں اور دوسروں کو تعاون کرنے کی ترغیب دیتا ہے!
+> 🎯 **اپنے پروجیکٹ کو چمکائیں**: ایک اچھی طرح سے منظم ریپوزٹری جس میں اچھی دستاویزات ہوں، ایک صاف، خوش آمدید کہنے والے اسٹور فرنٹ کی طرح ہے۔ یہ لوگوں کو بتاتا ہے کہ آپ اپنے کام کی پرواہ کرتے ہیں اور دوسروں کو تعاون کرنے کی ترغیب دیتا ہے!
 
-**ایک ریپوزیٹری کو زبردست بنانے کے لیے:**
+**ایک زبردست ریپوزٹری کو کیا چیز بناتی ہے:**
 
 | کیا شامل کریں | کیوں یہ اہم ہے | آپ کے لیے کیا کرتا ہے |
 |-------------|-------------------|---------------------|
-| **تفصیل** | پہلا تاثر اہم ہے! | لوگ فوراً جانتے ہیں کہ آپ کا پروجیکٹ کیا کرتا ہے |
+| **تفصیل** | پہلا تاثر اہم ہے! | لوگ فوراً جان لیتے ہیں کہ آپ کا پروجیکٹ کیا کرتا ہے |
 | **README** | آپ کے پروجیکٹ کا فرنٹ پیج | نئے وزیٹرز کے لیے ایک دوستانہ گائیڈ کی طرح |
 | **Contributing Guidelines** | دکھاتا ہے کہ آپ مدد کا خیر مقدم کرتے ہیں | لوگ جانتے ہیں کہ وہ آپ کی کیسے مدد کر سکتے ہیں |
-| **Code of Conduct** | ایک دوستانہ جگہ بناتا ہے | ہر کوئی حصہ لینے کے لیے خوش آمدید محسوس کرتا ہے |
+| **Code of Conduct** | ایک دوستانہ جگہ بناتا ہے | ہر کوئی شرکت کے لیے خوش آمدید محسوس کرتا ہے |
 | **License** | قانونی وضاحت | دوسرے جانتے ہیں کہ وہ آپ کے کوڈ کو کیسے استعمال کر سکتے ہیں |
 | **Security Policy** | دکھاتا ہے کہ آپ ذمہ دار ہیں | پیشہ ورانہ طریقوں کا مظاہرہ کرتا ہے |
 
-> 💡 **پرو ٹپ**: GitHub ان تمام فائلوں کے لیے ٹیمپلیٹس فراہم کرتا ہے۔ جب نیا ریپوزیٹری بناتے ہیں، تو ان فائلوں کو خودکار طور پر بنانے کے لیے چیک باکسز کو منتخب کریں۔
+> 💡 **پرو ٹپ**: GitHub ان تمام فائلز کے لیے ٹیمپلیٹس فراہم کرتا ہے۔ ایک نیا ریپوزٹری بناتے وقت، ان فائلز کو خودکار طور پر بنانے کے لیے چیک باکسز کو منتخب کریں۔
 
 **جدید GitHub فیچرز کو دریافت کریں:**
 
 🤖 **آٹومیشن اور CI/CD:**
-- **GitHub Actions** خودکار ٹیسٹنگ اور ڈیپلائمنٹ کے لیے
+- **GitHub Actions** خودکار ٹیسٹنگ اور ڈپلائمنٹ کے لیے
 - **Dependabot** خودکار dependency اپڈیٹس کے لیے
 
 💬 **کمیونٹی اور پروجیکٹ مینجمنٹ:**
-- **GitHub Discussions** مسائل سے ہٹ کر کمیونٹی گفتگو کے لیے
-- **GitHub Projects** کانبان اسٹائل پروجیکٹ مینجمنٹ کے لیے
-- **Branch protection rules** کوڈ کوالٹی معیارات نافذ کرنے کے لیے
+- **GitHub Discussions** کمیونٹی گفتگو کے لیے جو issues سے آگے ہو
+- **GitHub Projects** kanban-style پروجیکٹ مینجمنٹ کے لیے
+- **Branch protection rules** کوڈ کے معیار کے معیارات کو نافذ کرنے کے لیے
 
-یہ تمام وسائل نئے ٹیم ممبرز کو شامل کرنے میں فائدہ مند ہوں گے۔ اور یہ وہ چیزیں ہیں جنہیں نئے تعاون کرنے والے آپ کے کوڈ کو دیکھنے سے پہلے دیکھتے ہیں، یہ جاننے کے لیے کہ آیا آپ کا پروجیکٹ ان کے وقت کے لیے صحیح جگہ ہے۔
+یہ تمام وسائل نئے ٹیم ممبرز کو آن بورڈ کرنے میں مدد دیں گے۔ اور یہ وہی چیزیں ہیں جنہیں نئے کنٹریبیوٹرز آپ کے کوڈ کو دیکھنے سے پہلے دیکھتے ہیں تاکہ یہ معلوم ہو سکے کہ آیا آپ کا پروجیکٹ ان کے وقت کے قابل ہے۔
 
-✅ README فائلز، حالانکہ انہیں تیار کرنے میں وقت لگتا ہے، اکثر مصروف منتظمین کے ذریعے نظر انداز کی جاتی ہیں۔ کیا آپ کسی خاص طور پر وضاحتی مثال تلاش کر سکتے ہیں؟ نوٹ: کچھ [اوزار جو اچھی README بنانے میں مدد کرتے ہیں](https://www.makeareadme.com/) آپ آزما سکتے ہیں۔
+✅ README فائلز، حالانکہ انہیں تیار کرنے میں وقت لگتا ہے، اکثر مصروف مینٹینرز نظر انداز کر دیتے ہیں۔ کیا آپ کسی خاص طور پر وضاحتی مثال تلاش کر سکتے ہیں؟ نوٹ: کچھ [اوزار جو اچھی README بنانے میں مدد کرتے ہیں](https://www.makeareadme.com/) آپ آزما سکتے ہیں۔
 
-### کام: کچھ کوڈ کو merge کریں
+### کام: کچھ کوڈ merge کریں
 
-Contributing دستاویزات لوگوں کو پروجیکٹ میں تعاون کرنے میں مدد دیتی ہیں۔ یہ وضاحت کرتی ہیں کہ آپ کس قسم کے تعاون کی تلاش کر رہے ہیں اور عمل کیسے کام کرتا ہے۔ تعاون کرنے والوں کو آپ کے GitHub ریپوزیٹری میں تعاون کرنے کے قابل ہونے کے لیے کئی مراحل سے گزرنا ہوگا:
+Contributing docs لوگوں کو پروجیکٹ میں تعاون کرنے میں مدد دیتے ہیں۔ یہ وضاحت کرتا ہے کہ آپ کس قسم کے تعاون کی تلاش میں ہیں اور عمل کیسے کام کرتا ہے۔ کنٹریبیوٹرز کو آپ کے GitHub ریپوزٹری میں تعاون کرنے کے قابل ہونے کے لیے کئی مراحل سے گزرنا ہوگا:
 
-1. **آپ کے ریپوزیٹری کو فورک کرنا** آپ شاید چاہیں گے کہ لوگ آپ کے پروجیکٹ کو _fork_ کریں۔ فورک کرنے کا مطلب ہے کہ آپ کے ریپوزیٹری کی ایک نقل ان کے GitHub پروفائل پر بنانا۔
-1. **کلون**۔ وہاں سے وہ پروجیکٹ کو اپنی مقامی مشین پر کلون کریں گے۔
-1. **برانچ بنائیں**۔ آپ چاہیں گے کہ وہ اپنے کام کے لیے ایک _برانچ_ بنائیں۔
-1. **اپنی تبدیلی کو ایک علاقے پر مرکوز کریں**۔ تعاون کرنے والوں سے کہیں کہ وہ اپنی تبدیلیوں کو ایک وقت میں ایک چیز پر مرکوز کریں - اس طرح ان کے کام کو _merge_ کرنے کے امکانات زیادہ ہیں۔ تصور کریں کہ انہوں نے ایک بگ ٹھیک کیا، ایک نیا فیچر شامل کیا، اور کئی ٹیسٹس کو اپڈیٹ کیا - کیا ہوگا اگر آپ 3 میں سے 2 یا 1 تبدیلی کو نافذ کرنا چاہتے ہیں یا کر سکتے ہیں؟
+1. **آپ کے ریپوزٹری کو فورک کرنا**۔ آپ شاید چاہیں گے کہ لوگ آپ کے پروجیکٹ کو _fork_ کریں۔ فورک کرنے کا مطلب ہے کہ آپ کے ریپوزٹری کی ایک نقل ان کے GitHub پروفائل پر بنائی جائے۔
+1. **کلون کریں**۔ اس کے بعد وہ پروجیکٹ کو اپنی مقامی مشین پر کلون کریں گے۔
+1. **ایک برانچ بنائیں**۔ آپ چاہیں گے کہ وہ اپنے کام کے لیے ایک _برانچ_ بنائیں۔
+1. **اپنی تبدیلی کو ایک علاقے پر مرکوز کریں**۔ کنٹریبیوٹرز سے کہیں کہ وہ اپنی شراکت کو ایک وقت میں ایک چیز پر مرکوز کریں – اس طرح ان کے کام کو _merge_ کرنے کے امکانات زیادہ ہیں۔ تصور کریں کہ وہ ایک بگ ٹھیک کرتے ہیں، ایک نیا فیچر شامل کرتے ہیں، اور کئی ٹیسٹس اپڈیٹ کرتے ہیں – کیا ہوگا اگر آپ 3 میں سے 2 یا 1 میں سے 1 تبدیلی کو لاگو کرنا چاہتے ہیں یا کر سکتے ہیں؟
 
-✅ ایک ایسی صورتحال کا تصور کریں جہاں برانچز اچھا کوڈ لکھنے اور بھیجنے کے لیے خاص طور پر اہم ہوں۔ آپ کون سے استعمال کے کیسز سوچ سکتے ہیں؟
+✅ ایک ایسی صورتحال کا تصور کریں جہاں برانچز خاص طور پر اچھا کوڈ لکھنے اور بھیجنے کے لیے اہم ہوں۔ آپ کون سے استعمال کے کیسز کے بارے میں سوچ سکتے ہیں؟
 
-> نوٹ، وہ تبدیلی بنیں جو آپ دنیا میں دیکھنا چاہتے ہیں، اور اپنے کام کے لیے برانچز بنائیں۔ کوئی بھی commits جو آپ کرتے ہیں وہ اس برانچ پر کیے جائیں گے جس پر آپ فی الحال "چیک آؤٹ" ہیں۔ `git status` استعمال کریں یہ دیکھنے کے لیے کہ وہ کون سی برانچ ہے۔
+> نوٹ کریں، وہ تبدیلی بنیں جو آپ دنیا میں دیکھنا چاہتے ہیں، اور اپنے کام کے لیے برانچز بنائیں۔ آپ جو بھی commits کریں گے وہ اس برانچ پر ہوں گے جس پر آپ اس وقت "چیک آؤٹ" ہیں۔ `git status` استعمال کریں یہ دیکھنے کے لیے کہ وہ کون سی برانچ ہے۔
 
-آئیے ایک تعاون کرنے والے کے ورک فلو سے گزرتے ہیں۔ فرض کریں کہ تعاون کرنے والے نے پہلے ہی ریپوزیٹری کو _fork_ اور _clone_ کیا ہے تاکہ ان کے پاس کام کرنے کے لیے ایک تیار Git ریپوزیٹری ہو، ان کی مقامی مشین پر:
+آئیے ایک کنٹریبیوٹر ورک فلو سے گزرتے ہیں۔ فرض کریں کہ کنٹریبیوٹر نے پہلے ہی ریپوزٹری کو _fork_ اور _clone_ کر لیا ہے تاکہ ان کے پاس ایک Git ریپوزٹری ہو جس پر وہ اپنی مقامی مشین پر کام کر سکیں:
 
-1. **برانچ بنائیں**۔ کمانڈ `git branch` استعمال کریں تاکہ ایک برانچ بنائی جا سکے جو وہ تبدیلیاں رکھے گی جو وہ تعاون کرنے کا ارادہ رکھتے ہیں:
+1. **ایک برانچ بنائیں**۔ کمانڈ `git branch` کا استعمال کریں ایک برانچ بنانے کے لیے جو ان تبدیلیوں پر مشتمل ہوگی جو وہ تعاون کے لیے دینا چاہتے ہیں:
 
    ```bash
    git branch [branch-name]
@@ -379,32 +465,32 @@ Contributing دستاویزات لوگوں کو پروجیکٹ میں تعاون
    git switch [branch-name]
    ```
 
-   > 💡 **جدید نوٹ**: `git switch` برانچز تبدیل کرنے کے لیے `git checkout` کا جدید متبادل ہے۔ یہ واضح اور ابتدائیوں کے لیے محفوظ ہے۔
+   > 💡 **جدید نوٹ**: `git switch` برانچز تبدیل کرنے کے لیے `git checkout` کا جدید متبادل ہے۔ یہ زیادہ واضح اور ابتدائیوں کے لیے محفوظ ہے۔
 
-1. **کام کریں**۔ اس مرحلے پر آپ اپنی تبدیلیاں شامل کرنا چاہتے ہیں۔ Git کو اس کے بارے میں بتانا نہ بھولیں درج ذیل کمانڈز کے ساتھ:
+1. **کام کریں**۔ اس مقام پر آپ اپنی تبدیلیاں شامل کرنا چاہتے ہیں۔ یہ نہ بھولیں کہ Git کو اس کے بارے میں بتائیں درج ذیل کمانڈز کے ساتھ:
 
    ```bash
    git add .
    git commit -m "my changes"
    ```
 
-   > ⚠️ **Commit پیغام کا معیار**: یقینی بنائیں کہ آپ اپنے commit کو اچھا نام دیں، اپنے اور اس ریپوزیٹری کے منتظم کے لیے جس پر آپ مدد کر رہے ہیں۔ آپ نے کیا تبدیل کیا اس کے بارے میں مخصوص رہیں!
+   > ⚠️ **Commit میسج کا معیار**: یقینی بنائیں کہ آپ اپنے commit کو ایک اچھا نام دیں، اپنے لیے اور اس ریپوزٹری کے مینٹینر کے لیے جس پر آپ مدد کر رہے ہیں۔ خاص طور پر بتائیں کہ آپ نے کیا تبدیل کیا!
 
-1. **اپنے کام کو `main` برانچ کے ساتھ ملائیں**۔ کسی وقت آپ کام مکمل کر لیتے ہیں اور آپ اپنا کام `main` برانچ کے ساتھ ملانا چاہتے ہیں۔ اس دوران `main` برانچ میں تبدیلی ہو سکتی ہے، اس لیے یقینی بنائیں کہ آپ پہلے اسے درج ذیل کمانڈز کے ساتھ تازہ ترین کریں:
+1. **اپنے کام کو `main` برانچ کے ساتھ ملائیں**۔ کسی وقت آپ کام مکمل کر لیتے ہیں اور آپ اپنے کام کو `main` برانچ کے ساتھ ملانا چاہتے ہیں۔ اس دوران `main` برانچ میں تبدیلی ہو سکتی ہے، اس لیے پہلے اسے درج ذیل کمانڈز کے ساتھ تازہ ترین کریں:
 
    ```bash
    git switch main
    git pull
    ```
 
-   اس مرحلے پر آپ یہ یقینی بنانا چاہتے ہیں کہ کوئی _conflicts_، ایسی صورتحال جہاں Git آسانی سے _combine_ نہیں کر سکتا، آپ کی ورکنگ برانچ میں ہو۔ لہذا درج ذیل کمانڈز چلائیں:
+   اس مقام پر آپ یہ یقینی بنانا چاہتے ہیں کہ کوئی بھی _conflicts_، ایسی صورتحال جہاں Git آسانی سے _combine_ نہیں کر سکتا، آپ کی ورکنگ برانچ میں ہو۔ اس لیے درج ذیل کمانڈز چلائیں:
 
    ```bash
    git switch [branch_name]
    git merge main
    ```
 
-   `git merge main` کمانڈ آپ کی برانچ میں `main` سے تمام تبدیلیاں لے آئے گی۔ امید ہے کہ آپ بس جاری رکھ سکتے ہیں۔ اگر نہیں، تو VS Code آپ کو بتائے گا کہ Git کہاں _confused_ ہے اور آپ متاثرہ فائلوں میں ترمیم کر کے بتا سکتے ہیں کہ کون سا مواد زیادہ درست ہے۔
+   `git merge main` کمانڈ `main` سے تمام تبدیلیاں آپ کی برانچ میں لے آئے گی۔ امید ہے کہ آپ بس جاری رکھ سکتے ہیں۔ اگر نہیں، تو VS Code آپ کو بتائے گا کہ Git کہاں _confused_ ہے اور آپ متاثرہ فائلز کو تبدیل کر کے بتا سکتے ہیں کہ کون سا مواد زیادہ درست ہے۔
 
    💡 **جدید متبادل**: ایک صاف ستھری ہسٹری کے لیے `git rebase` استعمال کرنے پر غور کریں:
    ```bash
@@ -412,64 +498,107 @@ Contributing دستاویزات لوگوں کو پروجیکٹ میں تعاون
    ```
    یہ آپ کے commits کو تازہ ترین main برانچ کے اوپر دوبارہ چلاتا ہے، ایک لکیری ہسٹری بناتا ہے۔
 
-1. **اپنا کام GitHub پر بھیجیں**۔ اپنا کام GitHub پر بھیجنے کا مطلب دو چیزیں ہیں۔ اپنی برانچ کو اپنے ریپوزیٹری پر دھکیلنا اور پھر ایک PR، Pull Request کھولنا۔
+1. **اپنا کام GitHub پر بھیجیں**۔ اپنا کام GitHub پر بھیجنے کا مطلب دو چیزیں ہیں۔ اپنی برانچ کو اپنی فورکڈ ریپوزٹری پر بھیجنا اور پھر ایک PR، Pull Request کھولنا۔
 
    ```bash
    git push --set-upstream origin [branch-name]
    ```
 
-   اوپر دی گئی کمانڈ آپ کے فورک کیے گئے ریپوزیٹری پر برانچ بناتی ہے۔
+   اوپر دی گئی کمانڈ آپ کی فورکڈ ریپوزٹری پر برانچ بناتی ہے۔
+
+### 🤝 **تعاون کی مہارتوں کی جانچ: کیا آپ دوسروں کے ساتھ کام کرنے کے لیے تیار ہیں؟**
+
+**آئیے دیکھتے ہیں کہ آپ تعاون کے بارے میں کیسا محسوس کر رہے ہیں:**
+- کیا آپ کو فورکنگ اور pull requests کا تصور اب سمجھ آتا ہے؟
+- برانچز کے ساتھ کام کرنے کے بارے میں آپ کس چیز پر مزید مشق کرنا چاہتے ہیں؟
+- آپ کسی اور کے پروجیکٹ میں تعاون کرنے کے بارے میں کتنا آرام دہ محسوس کرتے ہیں؟
+
+```mermaid
+mindmap
+  root((Git Collaboration))
+    Branching
+      Feature branches
+      Bug fix branches
+      Experimental work
+    Pull Requests
+      Code review
+      Discussion
+      Testing
+    Best Practices
+      Clear commit messages
+      Small focused changes
+      Good documentation
+```
 
-1. **PR کھولیں**۔ اگلے مرحلے میں، آپ ایک PR کھولنا چاہتے ہیں۔ آپ یہ GitHub پر فورک کیے گئے ریپوزیٹری پر جا کر کرتے ہیں۔ آپ کو GitHub پر ایک اشارہ نظر آئے گا جہاں وہ پوچھے گا کہ آیا آپ ایک نیا PR بنانا چاہتے ہیں، آپ اس پر کلک کریں گے اور آپ کو ایک انٹرفیس پر لے جایا جائے گا جہاں آپ commit پیغام کا عنوان تبدیل کر سکتے ہیں، اسے ایک زیادہ موزوں وضاحت دے سکتے ہیں۔ اب وہ ریپوزیٹری کا منتظم جسے آپ نے فورک کیا تھا، اس PR کو دیکھے گا اور _امید ہے_ کہ وہ اس کی تعریف کرے گا اور آپ کے PR کو _merge_ کرے گا۔ آپ اب ایک تعاون کرنے والے ہیں، واہ :)
+> **اعتماد بڑھانے والا**: ہر وہ ڈویلپر جس کی آپ تعریف کرتے ہیں، کبھی نہ کبھی اپنی پہلی pull request کے بارے میں نروس تھا۔ GitHub کمیونٹی نئے آنے والوں کو انتہائی خوش آمدید کہتی ہے!
 
-   💡 **جدید ٹپ**: آپ GitHub CLI استعمال کرتے ہوئے بھی PR بنا سکتے ہیں:
+1. **ایک PR کھولیں**۔ اگلا، آپ ایک PR کھولنا چاہتے ہیں۔ آپ یہ GitHub پر فورکڈ ریپوزٹری پر جا کر کرتے ہیں۔ آپ کو GitHub پر ایک اشارہ نظر آئے گا جہاں وہ پوچھے گا کہ کیا آپ ایک نیا PR بنانا چاہتے ہیں، آپ اس پر کلک کریں گے اور آپ کو ایک انٹرفیس پر لے جایا جائے گا جہاں آپ commit میسج کا عنوان تبدیل کر سکتے ہیں، اسے ایک زیادہ موزوں وضاحت دے سکتے ہیں۔ اب جس ریپوزٹری کے مینٹینر کو آپ نے فورک کیا ہے وہ اس PR کو دیکھے گا اور _انگلیاں کراس کریں_ وہ اس PR کو سراہیں گے اور _merge_ کریں گے۔ آپ اب ایک کنٹریبیوٹر ہیں، واہ :)
+
+   💡 **جدید ٹپ**: آپ GitHub CLI کا استعمال کرتے ہوئے بھی PRs بنا سکتے ہیں:
    ```bash
    gh pr create --title "Your PR title" --body "Description of changes"
    ```
 
    🔧 **PRs کے لیے بہترین طریقے**:
-   - متعلقہ مسائل کو "Fixes #123" جیسے کلیدی الفاظ کے ساتھ لنک کریں۔
-   - UI تبدیلیوں کے لیے اسکرین شاٹس شامل کریں۔
-   - مخصوص جائزہ لینے والوں کی درخواست کریں۔
-   - کام جاری رکھنے کے لیے ڈرافٹ PRs استعمال کریں۔
-   - جائزہ لینے کی درخواست کرنے سے پہلے تمام CI چیکس پاس کریں۔
-
-1. **صفائی کریں**۔ یہ اچھا عمل سمجھا جاتا ہے کہ آپ کامیابی سے PR merge کرنے کے بعد _صفائی کریں_۔ آپ اپنی مقامی برانچ اور وہ برانچ جسے آپ نے GitHub پر دھکیلا ہے، دونوں کو صاف کرنا چاہتے ہیں۔ پہلے اسے درج ذیل کمانڈ کے ساتھ مقامی طور پر حذف کریں:
+   - متعلقہ issues کو "Fixes #123" جیسے کلیدی الفاظ کے ساتھ لنک کریں۔
+   - UI تبدیلیوں کے لیے اسکرین شا
+1. **صفائی کریں**۔ یہ ایک اچھی عادت سمجھی جاتی ہے کہ جب آپ کامیابی سے ایک PR کو مرج کر لیں تو اس کے بعد صفائی کریں۔ آپ کو اپنی لوکل برانچ اور وہ برانچ جو آپ نے GitHub پر پش کی تھی، دونوں کو صاف کرنا ہوگا۔ پہلے اسے لوکل طور پر ڈیلیٹ کریں، اس کمانڈ کے ذریعے:
 
    ```bash
    git branch -d [branch-name]
    ```
+  
+پھر GitHub پر جائیں اور فورک کیے گئے ریپو کی ریموٹ برانچ کو بھی ہٹا دیں جسے آپ نے ابھی پش کیا تھا۔
 
-   یقینی بنائیں کہ آپ فورک کیے گئے ریپوزیٹری کے GitHub صفحے پر جائیں اور وہ ریموٹ برانچ ہٹا دیں جسے آپ نے ابھی دھکیلا ہے۔
+`Pull request` ایک عجیب سا لفظ لگتا ہے کیونکہ حقیقت میں آپ اپنی تبدیلیاں پروجیکٹ میں پش کرنا چاہتے ہیں۔ لیکن مینٹینر (پروجیکٹ کے مالک) یا کور ٹیم کو آپ کی تبدیلیوں پر غور کرنا ہوتا ہے اس سے پہلے کہ وہ پروجیکٹ کی "مین" برانچ کے ساتھ مرج کریں، اس لیے آپ حقیقت میں مینٹینر سے تبدیلی کی منظوری کی درخواست کر رہے ہوتے ہیں۔
 
-`Pull request` ایک عجیب اصطلاح لگتی ہے کیونکہ حقیقت میں آپ اپنے پروجیکٹ میں تبدیلیاں دھکیلنا چاہتے ہیں۔ لیکن منتظم (پروجیکٹ کے مالک) یا کور ٹیم کو آپ کی تبدیلیوں پر غور کرنے کی ضرورت ہے اس سے پہلے کہ وہ پروجیکٹ کی "main" برانچ کے ساتھ merge کریں، اس لیے آپ واقعی منتظم سے تبدیلی کے فیصلے کی درخواست کر رہے ہیں۔
+ایک pull request وہ جگہ ہے جہاں آپ برانچ میں کی گئی تبدیلیوں کا موازنہ اور بحث کر سکتے ہیں، ریویوز، کمنٹس، انٹیگریٹڈ ٹیسٹس، اور مزید کے ساتھ۔ ایک اچھا pull request تقریباً انہی اصولوں پر عمل کرتا ہے جو ایک commit میسج کے لیے ہوتے ہیں۔ آپ کسی مسئلے کے ٹریکر میں ایک مسئلے کا حوالہ دے سکتے ہیں، مثلاً جب آپ کا کام کسی مسئلے کو حل کرتا ہے۔ یہ `#` کے ساتھ اور آپ کے مسئلے کے نمبر کے ساتھ کیا جاتا ہے۔ مثال کے طور پر `#97`۔
 
-ایک pull request وہ جگہ ہے جہاں برانچ پر متعارف کرائی گئی تبدیلیوں کا موازنہ اور بحث کی جاتی ہے، جائزوں، تبصروں، مربوط ٹیسٹس، اور مزید کے ساتھ۔ ایک اچھا pull request تقریباً وہی اصولوں پر عمل کرتا ہے جو ایک commit پیغام کے لیے ہوتے ہیں۔ آپ مسئلے کے ٹریکر میں کسی مسئلے کا حوالہ دے سکتے ہیں، جب آپ کا کام مثال کے طور پر کسی مسئلے
-🤞امید ہے کہ تمام چیکس کامیاب ہوں اور پروجیکٹ کے مالک آپ کی تبدیلیوں کو پروجیکٹ میں شامل کر لیں🤞
+🤞امید ہے کہ تمام چیکس پاس ہو جائیں اور پروجیکٹ کے مالک آپ کی تبدیلیوں کو پروجیکٹ میں مرج کر دیں🤞
 
-اپنی موجودہ لوکل ورکنگ برانچ کو GitHub پر متعلقہ ریموٹ برانچ کے تمام نئے کمیٹس کے ساتھ اپ ڈیٹ کریں:
+اپنی موجودہ لوکل ورکنگ برانچ کو GitHub پر موجود متعلقہ ریموٹ برانچ سے تمام نئے commits کے ساتھ اپڈیٹ کریں:
 
 `git pull`
 
-## اوپن سورس میں تعاون (آپ کا موقع اثر ڈالنے کا!)
-
-کیا آپ کچھ ایسا کرنے کے لیے تیار ہیں جو آپ کے دماغ کو حیران کر دے گا؟ 🤯 آئیے اوپن سورس پروجیکٹس میں تعاون کے بارے میں بات کرتے ہیں – اور میں یہ آپ کے ساتھ شیئر کرنے کے بارے میں سوچ کر ہی پرجوش ہو رہا ہوں!
-
-یہ آپ کا موقع ہے کہ آپ کچھ واقعی غیر معمولی کا حصہ بنیں۔ تصور کریں کہ ان ٹولز کو بہتر بنائیں جو لاکھوں ڈویلپرز روزانہ استعمال کرتے ہیں، یا کسی ایپ میں بگ کو ٹھیک کریں جسے آپ کے دوست پسند کرتے ہیں۔ یہ صرف ایک خواب نہیں ہے – یہی اوپن سورس تعاون کا مطلب ہے!
-
-یہ وہ چیز ہے جو مجھے ہر بار سوچنے پر جھنجھوڑ دیتی ہے: ہر وہ ٹول جس کے ساتھ آپ نے سیکھا ہے – آپ کا کوڈ ایڈیٹر، وہ فریم ورک جنہیں ہم دریافت کریں گے، یہاں تک کہ وہ براؤزر جس میں آپ یہ پڑھ رہے ہیں – کسی نے اپنی پہلی شراکت کے ساتھ شروع کیا تھا، بالکل آپ کی طرح۔ وہ شاندار ڈویلپر جس نے آپ کا پسندیدہ VS Code ایکسٹینشن بنایا؟ وہ بھی کبھی ایک مبتدی تھے جو "create pull request" پر کانپتے ہاتھوں کے ساتھ کلک کر رہے تھے، بالکل جیسے آپ کرنے والے ہیں۔
-
-اور سب سے خوبصورت حصہ یہ ہے: اوپن سورس کمیونٹی انٹرنیٹ کا سب سے بڑا گروپ ہگ کی طرح ہے۔ زیادہ تر پروجیکٹس نئے آنے والوں کی تلاش میں ہوتے ہیں اور "good first issue" کے ٹیگ کے ساتھ مسائل رکھتے ہیں خاص طور پر آپ جیسے لوگوں کے لیے! مینٹینرز واقعی نئے تعاون کرنے والوں کو دیکھ کر پرجوش ہوتے ہیں کیونکہ وہ اپنے پہلے قدموں کو یاد کرتے ہیں۔
-
-آپ یہاں صرف کوڈ سیکھنے نہیں رہے – آپ ایک عالمی خاندان میں شامل ہونے کی تیاری کر رہے ہیں جو ہر روز یہ سوچتے ہیں "ہم ڈیجیٹل دنیا کو تھوڑا بہتر کیسے بنا سکتے ہیں؟" کلب میں خوش آمدید! 🌟
+## اوپن سورس میں تعاون (آپ کا موقع کچھ خاص کرنے کا!)
+
+کیا آپ کچھ ایسا کرنے کے لیے تیار ہیں جو آپ کے دماغ کو حیران کر دے؟ 🤯 آئیے بات کرتے ہیں اوپن سورس پروجیکٹس میں تعاون کے بارے میں – اور میں یہ آپ کے ساتھ شیئر کرنے کے بارے میں سوچ کر ہی پرجوش ہو رہا ہوں!
+
+یہ آپ کا موقع ہے کہ آپ کسی واقعی غیر معمولی چیز کا حصہ بنیں۔ تصور کریں کہ ان ٹولز کو بہتر بنائیں جو لاکھوں ڈویلپرز روزانہ استعمال کرتے ہیں، یا کسی ایسی ایپ میں بگ کو ٹھیک کریں جو آپ کے دوست پسند کرتے ہیں۔ یہ صرف ایک خواب نہیں – یہی اوپن سورس تعاون کا مطلب ہے!
+
+یہی وہ چیز ہے جو مجھے ہر بار جوش دلاتی ہے: ہر وہ ٹول جس کے ساتھ آپ سیکھ رہے ہیں – آپ کا کوڈ ایڈیٹر، وہ فریم ورک جنہیں ہم دریافت کریں گے، یہاں تک کہ وہ براؤزر جس میں آپ یہ پڑھ رہے ہیں – کسی نے اپنی پہلی شراکت کے ساتھ شروع کیا تھا۔ وہ شاندار ڈویلپر جس نے آپ کا پسندیدہ VS Code ایکسٹینشن بنایا؟ وہ بھی کبھی ایک مبتدی تھے جو "create pull request" پر کانپتے ہاتھوں کے ساتھ کلک کر رہے تھے، بالکل ویسے جیسے آپ کرنے والے ہیں۔
+
+اور سب سے خوبصورت بات یہ ہے: اوپن سورس کمیونٹی انٹرنیٹ کا سب سے بڑا گروپ ہگ کی طرح ہے۔ زیادہ تر پروجیکٹس نئے آنے والوں کی تلاش میں ہوتے ہیں اور ان کے لیے "good first issue" کے ٹیگ والے مسائل ہوتے ہیں! مینٹینرز واقعی پرجوش ہوتے ہیں جب وہ نئے تعاون کرنے والوں کو دیکھتے ہیں کیونکہ وہ اپنے پہلے قدموں کو یاد کرتے ہیں۔
+
+```mermaid
+flowchart TD
+    A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"]
+    B --> C[📖 Read Contributing Guidelines]
+    C --> D[🍴 Fork Repository]
+    D --> E[💻 Set Up Local Environment]
+    E --> F[🌿 Create Feature Branch]
+    F --> G[✨ Make Your Contribution]
+    G --> H[🧪 Test Your Changes]
+    H --> I[📝 Write Clear Commit]
+    I --> J[📤 Push & Create PR]
+    J --> K[💬 Engage with Feedback]
+    K --> L[🎉 Merged! You're a Contributor!]
+    L --> M[🌟 Find Next Issue]
+    
+    style A fill:#e1f5fe
+    style L fill:#c8e6c9
+    style M fill:#fff59d
+```
+  
+آپ یہاں صرف کوڈنگ نہیں سیکھ رہے – آپ ایک عالمی خاندان میں شامل ہونے کی تیاری کر رہے ہیں جو ہر روز یہ سوچتا ہے "ہم ڈیجیٹل دنیا کو تھوڑا بہتر کیسے بنا سکتے ہیں؟" کلب میں خوش آمدید! 🌟
 
-سب سے پہلے، GitHub پر ایک ریپوزٹری (یا **repo**) تلاش کریں جو آپ کے لیے دلچسپ ہو اور جس میں آپ تبدیلی کا تعاون کرنا چاہتے ہوں۔ آپ اس کے مواد کو اپنی مشین پر کاپی کرنا چاہیں گے۔
+پہلے، آئیے GitHub پر ایک ریپوزٹری (یا **ریپو**) تلاش کریں جو آپ کے لیے دلچسپ ہو اور جس میں آپ کوئی تبدیلی شامل کرنا چاہتے ہوں۔ آپ اس کے مواد کو اپنی مشین پر کاپی کرنا چاہیں گے۔
 
-✅ 'beginner-friendly' ریپوزٹریز تلاش کرنے کا ایک اچھا طریقہ [tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) کے ذریعے تلاش کرنا ہے۔
+✅ 'beginner-friendly' ریپوزٹریز تلاش کرنے کا ایک اچھا طریقہ یہ ہے کہ [tag 'good-first-issue' کے ذریعے تلاش کریں](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)۔
 
 ![ریپو کو لوکل کاپی کریں](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ur.png)
 
-کوڈ کاپی کرنے کے کئی طریقے ہیں۔ ایک طریقہ یہ ہے کہ ریپوزٹری کے مواد کو "clone" کریں، HTTPS، SSH، یا GitHub CLI (Command Line Interface) کا استعمال کرتے ہوئے۔
+کوڈ کاپی کرنے کے کئی طریقے ہیں۔ ایک طریقہ یہ ہے کہ ریپوزٹری کے مواد کو "کلون" کریں، HTTPS، SSH، یا GitHub CLI (کمانڈ لائن انٹرفیس) کا استعمال کرتے ہوئے۔
 
 اپنا ٹرمینل کھولیں اور ریپوزٹری کو اس طرح کلون کریں:
 ```bash
@@ -482,7 +611,7 @@ git clone git@github.com:username/repository.git
 # Using GitHub CLI
 gh repo clone username/repository
 ```
-
+  
 پروجیکٹ پر کام کرنے کے لیے، صحیح فولڈر میں جائیں:
 `cd ProjectURL`
 
@@ -492,20 +621,20 @@ gh repo clone username/repository
 - **[GitHub.dev](https://github.dev)** - کسی بھی GitHub ریپو پر `.` کی کلید دبائیں تاکہ براؤزر میں VS Code کھل جائے
 - **VS Code** GitHub Pull Requests ایکسٹینشن کے ساتھ
 
-آخر میں، آپ کوڈ کو زپ فولڈر میں ڈاؤنلوڈ کر سکتے ہیں۔
+آخر میں، آپ کوڈ کو زپ فولڈر میں ڈاؤن لوڈ بھی کر سکتے ہیں۔
 
 ### GitHub کے بارے میں کچھ مزید دلچسپ باتیں
 
-آپ GitHub پر کسی بھی پبلک ریپوزٹری کو اسٹار، واچ اور/یا "fork" کر سکتے ہیں۔ آپ اپنی اسٹار کردہ ریپوزٹریز کو اوپر دائیں ڈراپ ڈاؤن مینو میں تلاش کر سکتے ہیں۔ یہ بک مارکنگ کی طرح ہے، لیکن کوڈ کے لیے۔
+آپ GitHub پر کسی بھی پبلک ریپوزٹری کو اسٹار، واچ، اور/یا "فورک" کر سکتے ہیں۔ آپ اپنی اسٹار کردہ ریپوزٹریز کو اوپر دائیں ڈراپ ڈاؤن مینو میں دیکھ سکتے ہیں۔ یہ بک مارکنگ کی طرح ہے، لیکن کوڈ کے لیے۔
 
-پروجیکٹس میں ایک ایشو ٹریکر ہوتا ہے، زیادہ تر GitHub پر "Issues" ٹیب میں جب تک کہ دوسری صورت میں اشارہ نہ کیا جائے، جہاں لوگ پروجیکٹ سے متعلق مسائل پر بات کرتے ہیں۔ اور Pull Requests ٹیب وہ جگہ ہے جہاں لوگ ان تبدیلیوں پر بات کرتے ہیں اور جائزہ لیتے ہیں جو جاری ہیں۔
+پروجیکٹس کے پاس ایک مسئلہ ٹریکر ہوتا ہے، زیادہ تر GitHub پر "Issues" ٹیب میں جب تک کہ دوسری صورت میں اشارہ نہ کیا جائے، جہاں لوگ پروجیکٹ سے متعلق مسائل پر بات کرتے ہیں۔ اور Pull Requests ٹیب وہ جگہ ہے جہاں لوگ جاری تبدیلیوں پر بات کرتے ہیں اور ان کا جائزہ لیتے ہیں۔
 
 پروجیکٹس میں فورمز، میلنگ لسٹس، یا چیٹ چینلز جیسے Slack، Discord یا IRC میں بھی گفتگو ہو سکتی ہے۔
 
 🔧 **جدید GitHub خصوصیات**:
 - **GitHub Discussions** - کمیونٹی گفتگو کے لیے بلٹ ان فورم
 - **GitHub Sponsors** - مینٹینرز کو مالی طور پر سپورٹ کریں  
-- **Security tab** - کمزوری کی رپورٹس اور سیکیورٹی ایڈوائزریز
+- **Security tab** - کمزوریوں کی رپورٹس اور سیکیورٹی ایڈوائزریز
 - **Actions tab** - خودکار ورک فلو اور CI/CD پائپ لائنز دیکھیں
 - **Insights tab** - تعاون کرنے والوں، کمیٹس، اور پروجیکٹ کی صحت کے بارے میں تجزیات
 - **Projects tab** - GitHub کے بلٹ ان پروجیکٹ مینجمنٹ ٹولز
@@ -514,38 +643,38 @@ gh repo clone username/repository
 
 ---
 
-## 🚀 چیلنج 
+## 🚀 چیلنج
 
-ٹھیک ہے، یہ وقت ہے کہ آپ اپنی نئی GitHub سپر پاورز کو آزمائیں! 🚀 یہاں ایک چیلنج ہے جو سب کچھ انتہائی اطمینان بخش طریقے سے واضح کر دے گا:
+ٹھیک ہے، اب وقت آ گیا ہے کہ آپ اپنی نئی چمکتی ہوئی GitHub سپر پاورز کو آزمائیں! 🚀 یہاں ایک چیلنج ہے جو سب کچھ انتہائی اطمینان بخش طریقے سے واضح کر دے گا:
 
-ایک دوست کو پکڑیں (یا وہ فیملی ممبر جو ہمیشہ پوچھتا ہے کہ آپ اس "کمپیوٹر چیز" کے ساتھ کیا کر رہے ہیں) اور ایک مشترکہ کوڈنگ ایڈونچر پر نکلیں! یہ وہ جگہ ہے جہاں حقیقی جادو ہوتا ہے – ایک پروجیکٹ بنائیں، انہیں اسے فورک کرنے دیں، کچھ برانچز بنائیں، اور تبدیلیوں کو اس طرح ضم کریں جیسے آپ پروفیشنل بن رہے ہیں۔
+ایک دوست (یا وہ فیملی ممبر جو ہمیشہ پوچھتا ہے کہ آپ "کمپیوٹر چیزوں" کے ساتھ کیا کر رہے ہیں) کو پکڑیں اور ایک مشترکہ کوڈنگ ایڈونچر پر نکلیں! یہی وہ جگہ ہے جہاں حقیقی جادو ہوتا ہے – ایک پروجیکٹ بنائیں، انہیں فورک کرنے دیں، کچھ برانچز بنائیں، اور پروفیشنل کی طرح تبدیلیاں مرج کریں۔
 
-میں جھوٹ نہیں بولوں گا – آپ شاید کسی وقت ہنسیں گے (خاص طور پر جب آپ دونوں ایک ہی لائن کو تبدیل کرنے کی کوشش کریں گے)، شاید الجھن میں سر کھجائیں گے، لیکن آپ کو یقینی طور پر وہ حیرت انگیز "آہا!" لمحات ملیں گے جو تمام سیکھنے کو قابل قدر بناتے ہیں۔ اس کے علاوہ، کسی اور کے ساتھ وہ پہلی کامیاب ضم شیئر کرنے میں کچھ خاص بات ہے – یہ اس بات کا ایک چھوٹا سا جشن ہے کہ آپ کتنی دور آ چکے ہیں!
+میں جھوٹ نہیں بولوں گا – آپ شاید کسی وقت ہنسیں گے (خاص طور پر جب آپ دونوں ایک ہی لائن کو تبدیل کرنے کی کوشش کریں گے)، شاید الجھن میں سر کھجائیں، لیکن آپ کو وہ حیرت انگیز "آہا!" لمحات ضرور ملیں گے جو تمام سیکھنے کو قابل قدر بناتے ہیں۔ اس کے علاوہ، کسی اور کے ساتھ پہلی کامیاب مرج کا اشتراک کرنے میں کچھ خاص بات ہے – یہ اس بات کا ایک چھوٹا سا جشن ہے کہ آپ کتنی دور آ چکے ہیں!
 
 ابھی تک کوئی کوڈنگ ساتھی نہیں ہے؟ کوئی مسئلہ نہیں! GitHub کمیونٹی ناقابل یقین حد تک خوش آمدید کہنے والے لوگوں سے بھری ہوئی ہے جو یاد کرتے ہیں کہ نیا ہونا کیسا محسوس ہوتا ہے۔ "good first issue" لیبل والے ریپوزٹریز تلاش کریں – وہ بنیادی طور پر کہہ رہے ہیں "ارے مبتدیوں، ہمارے ساتھ سیکھیں!" یہ کتنا زبردست ہے؟
 
-## لیکچر کے بعد کا کوئز
-[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/en/)
+## پوسٹ لیکچر کوئز
+[پوسٹ لیکچر کوئز](https://ff-quizzes.netlify.app/web/en/)
 
-## جائزہ اور سیکھتے رہیں
+## جائزہ اور مزید سیکھنا
 
-واہ! 🎉 دیکھیں آپ – آپ نے ابھی GitHub کی بنیادی باتوں کو ایک مطلق چیمپئن کی طرح فتح کر لیا ہے! اگر آپ کا دماغ ابھی تھوڑا بھرا ہوا محسوس کر رہا ہے، تو یہ بالکل معمول کی بات ہے اور ایمانداری سے ایک اچھا اشارہ ہے۔ آپ نے ابھی وہ ٹولز سیکھے ہیں جنہیں سمجھنے میں مجھے شروع میں ہفتے لگے تھے۔
+واہ! 🎉 دیکھیں آپ – آپ نے ابھی GitHub کی بنیادی باتوں کو ایک مکمل چیمپئن کی طرح فتح کر لیا ہے! اگر آپ کا دماغ ابھی تھوڑا بھرا ہوا محسوس ہو رہا ہے، تو یہ بالکل معمول کی بات ہے اور ایمانداری سے ایک اچھا اشارہ ہے۔ آپ نے ابھی وہ ٹولز سیکھے ہیں جنہیں سمجھنے میں مجھے شروع میں ہفتے لگے۔
 
-Git اور GitHub ناقابل یقین حد تک طاقتور ہیں (یعنی، واقعی طاقتور)، اور ہر وہ ڈویلپر جسے میں جانتا ہوں – بشمول وہ جو اب جادوگر لگتے ہیں – کو اس سب کو سمجھنے سے پہلے مشق اور تھوڑا سا ٹھوکر کھانی پڑی۔ حقیقت یہ ہے کہ آپ نے یہ سبق مکمل کر لیا ہے اس کا مطلب ہے کہ آپ پہلے ہی ایک ڈویلپر کے ٹول کٹ کے سب سے اہم ٹولز میں مہارت حاصل کرنے کی راہ پر گامزن ہیں۔
+Git اور GitHub ناقابل یقین حد تک طاقتور ہیں (جیسے، واقعی طاقتور)، اور ہر وہ ڈویلپر جسے میں جانتا ہوں – بشمول وہ جو اب جادوگر لگتے ہیں – کو اس سب کو سمجھنے سے پہلے مشق اور تھوڑی سی جدوجہد کرنی پڑی۔ اس سبق کو مکمل کرنے کا مطلب ہے کہ آپ پہلے ہی ان سب سے اہم ٹولز میں مہارت حاصل کرنے کے راستے پر ہیں جو ایک ڈویلپر کے ٹول کٹ میں ہوتے ہیں۔
 
-یہاں کچھ بالکل شاندار وسائل ہیں جو آپ کو مشق کرنے اور مزید شاندار بننے میں مدد کریں گے:
+یہاں کچھ شاندار وسائل ہیں جو آپ کو مشق کرنے اور مزید شاندار بننے میں مدد کریں گے:
 
-- [اوپن سورس سافٹ ویئر میں تعاون کرنے کی گائیڈ](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – فرق پیدا کرنے کے لیے آپ کا روڈ میپ
-- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – فوری حوالہ کے لیے اسے ہاتھ میں رکھیں!
+- [اوپن سورس سافٹ ویئر میں تعاون کرنے کی گائیڈ](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – فرق پیدا کرنے کا آپ کا روڈ میپ
+- [Git چیٹ شیٹ](https://training.github.com/downloads/github-git-cheat-sheet/) – فوری حوالہ کے لیے یہ اپنے پاس رکھیں!
 
-اور یاد رکھیں: مشق ترقی لاتی ہے، کمال نہیں! جتنا زیادہ آپ Git اور GitHub استعمال کریں گے، اتنا ہی یہ قدرتی بن جائے گا۔ GitHub نے کچھ حیرت انگیز انٹرایکٹو کورسز بنائے ہیں جو آپ کو محفوظ ماحول میں مشق کرنے دیتے ہیں:
+اور یاد رکھیں: مشق ترقی لاتی ہے، کامل نہیں! جتنا زیادہ آپ Git اور GitHub کا استعمال کریں گے، یہ اتنا ہی قدرتی ہو جائے گا۔ GitHub نے کچھ حیرت انگیز انٹرایکٹو کورسز بنائے ہیں جو آپ کو محفوظ ماحول میں مشق کرنے دیتے ہیں:
 
 - [GitHub کا تعارف](https://github.com/skills/introduction-to-github)
-- [Markdown کا استعمال کرتے ہوئے بات چیت کریں](https://github.com/skills/communicate-using-markdown)  
-- [GitHub Pages](https://github.com/skills/github-pages)
+- [مارک ڈاؤن کا استعمال کرتے ہوئے بات چیت کریں](https://github.com/skills/communicate-using-markdown)  
+- [GitHub پیجز](https://github.com/skills/github-pages)
 - [مرج تنازعات کا انتظام](https://github.com/skills/resolve-merge-conflicts)
 
-**ایڈونچر کے لیے تیار محسوس کر رہے ہیں؟ ان جدید ٹولز کو دیکھیں:**
+**ایڈونچر کے لیے تیار؟ ان جدید ٹولز کو دیکھیں:**
 - [GitHub CLI دستاویزات](https://cli.github.com/manual/) – جب آپ کمانڈ لائن جادوگر کی طرح محسوس کرنا چاہتے ہیں
 - [GitHub Codespaces دستاویزات](https://docs.github.com/en/codespaces) – کلاؤڈ میں کوڈ کریں!
 - [GitHub Actions دستاویزات](https://docs.github.com/en/actions) – سب کچھ خودکار بنائیں
@@ -555,23 +684,83 @@ Git اور GitHub ناقابل یقین حد تک طاقتور ہیں (یعنی
 
 ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** ایک مشترکہ ویب ڈیولپمنٹ پروجیکٹ بنائیں جو مکمل GitHub ورک فلو کو ظاہر کرے جو آپ نے اس سبق میں سیکھا ہے۔ یہ چیلنج آپ کو ریپوزٹری تخلیق، تعاون کی خصوصیات، اور جدید Git ورک فلو کو حقیقی دنیا کے منظر نامے میں مشق کرنے میں مدد کرے گا۔
+**تفصیل:** ایک مشترکہ ویب ڈیولپمنٹ پروجیکٹ بنائیں جو مکمل GitHub ورک فلو کو ظاہر کرے جو آپ نے اس سبق میں سیکھا ہے۔ یہ چیلنج آپ کو ریپوزٹری تخلیق، تعاون کی خصوصیات، اور حقیقی دنیا کے منظرنامے میں جدید Git ورک فلو کی مشق کرنے میں مدد کرے گا۔
 
-**پرومپٹ:** ایک نیا پبلک GitHub ریپوزٹری بنائیں ایک سادہ "Web Development Resources" پروجیکٹ کے لیے۔ ریپوزٹری میں ایک اچھی طرح سے ساختہ README.md فائل شامل ہونی چاہیے جو مفید ویب ڈیولپمنٹ ٹولز اور وسائل کو زمرہ جات (HTML, CSS, JavaScript, وغیرہ) کے لحاظ سے ترتیب دے۔ ریپوزٹری کو مناسب کمیونٹی معیارات کے ساتھ سیٹ کریں بشمول لائسنس، تعاون کے رہنما اصول، اور ضابطہ اخلاق۔ کم از کم دو فیچر برانچز بنائیں: ایک CSS وسائل شامل کرنے کے لیے اور دوسری JavaScript وسائل کے لیے۔ ہر برانچ میں وضاحتی کمیٹ پیغامات کے ساتھ کمیٹس کریں، پھر تبدیلیوں کو واپس مین میں ضم کرنے کے لیے Pull Requests بنائیں۔ GitHub کی خصوصیات جیسے Issues، Discussions کو فعال کریں اور خودکار چیکس کے لیے ایک بنیادی GitHub Actions ورک فلو سیٹ کریں۔
+**پرومپٹ:** ایک نیا پبلک GitHub ریپوزٹری بنائیں جو ایک سادہ "ویب ڈیولپمنٹ ریسورسز" پروجیکٹ کے لیے ہو۔ ریپوزٹری میں ایک اچھی طرح سے منظم README.md فائل شامل ہونی چاہیے جس میں مفید ویب ڈیولپمنٹ ٹولز اور وسائل کی فہرست ہو، جو زمرہ جات (HTML, CSS, JavaScript, وغیرہ) کے مطابق ترتیب دی گئی ہو۔ ریپوزٹری کو مناسب کمیونٹی معیارات کے ساتھ سیٹ کریں جن میں لائسنس، تعاون کے رہنما اصول، اور ضابطہ اخلاق شامل ہوں۔ کم از کم دو فیچر برانچز بنائیں: ایک CSS وسائل شامل کرنے کے لیے اور دوسری JavaScript وسائل کے لیے۔ ہر برانچ میں وضاحتی commit میسجز کے ساتھ commits کریں، پھر تبدیلیوں کو main میں مرج کرنے کے لیے pull requests بنائیں۔ GitHub کی خصوصیات جیسے Issues، Discussions کو فعال کریں اور خودکار چیکس کے لیے ایک بنیادی GitHub Actions ورک فلو سیٹ کریں۔
 
 ## اسائنمنٹ 
 
-آپ کا مشن، اگر آپ اسے قبول کرنے کا انتخاب کرتے ہیں: GitHub Skills پر [GitHub کا تعارف](https://github.com/skills/introduction-to-github) کورس مکمل کریں۔ یہ انٹرایکٹو کورس آپ کو محفوظ، رہنمائی والے ماحول میں آپ نے جو کچھ سیکھا ہے اس پر عمل کرنے دے گا۔ اس کے علاوہ، جب آپ ختم کریں گے تو آپ کو ایک زبردست بیج ملے گا! 🏅
+آپ کا مشن، اگر آپ اسے قبول کرنے کا انتخاب کرتے ہیں: GitHub Skills پر [Introduction to GitHub](https://github.com/skills/introduction-to-github) کورس مکمل کریں۔ یہ انٹرایکٹو کورس آپ کو ہر وہ چیز مشق کرنے دے گا جو آپ نے ایک محفوظ، گائیڈڈ ماحول میں سیکھی ہے۔ اس کے علاوہ، آپ کو ختم کرنے پر ایک زبردست بیج ملے گا! 🏅
 
-**مزید چیلنجز کے لیے تیار محسوس کر رہے ہیں؟**
-- اپنے GitHub اکاؤنٹ کے لیے SSH تصدیق سیٹ کریں (پاس ورڈز کی ضرورت نہیں!)
-- اپنے روزمرہ کے Git آپریشنز کے لیے GitHub CLI استعمال کرنے کی کوشش کریں
+**مزید چیلنجز کے لیے تیار ہیں؟**
+- اپنے GitHub اکاؤنٹ کے لیے SSH تصدیق سیٹ کریں (پاس ورڈ کی ضرورت نہیں!)
+- اپنی روزمرہ کی Git آپریشنز کے لیے GitHub CLI کا استعمال کرنے کی کوشش کریں
 - ایک ریپوزٹری بنائیں جس میں GitHub Actions ورک فلو ہو
-- GitHub Codespaces کو دریافت کریں اس بہت ریپوزٹری کو کلاؤڈ بیسڈ ایڈیٹر میں کھول کر
+- GitHub Codespaces کو دریافت کریں اور اس ریپوزٹری کو کلاؤڈ بیسڈ ایڈیٹر میں کھولیں
+
+---
+
+## 🚀 آپ کی GitHub مہارت کا ٹائم لائن
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] اس ریپوزٹری اور 3 دیگر پروجیکٹس کو اسٹار کریں جو آپ کو دلچسپ لگیں
+- [ ] اپنے GitHub اکاؤنٹ پر دو فیکٹر تصدیق سیٹ کریں
+- [ ] اپنے پہلے ریپوزٹری کے لیے ایک سادہ README بنائیں
+- [ ] 5 ڈویلپرز کو فالو کریں جن کا کام آپ کو متاثر کرتا ہے
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] پوسٹ لیکچر کوئز مکمل کریں اور اپنے GitHub سفر پر غور کریں
+- [ ] GitHub تصدیق کے لیے SSH کیز سیٹ کریں
+- [ ] ایک بہترین commit میسج کے ساتھ اپنی پہلی معنی خیز commit بنائیں
+- [ ] GitHub کے "Explore" ٹیب کو دریافت کریں تاکہ ٹرینڈنگ پروجیکٹس کو دریافت کریں
+- [ ] ایک ریپوزٹری کو فورک کرنے اور ایک چھوٹی سی تبدیلی کرنے کی مشق کریں
+
+### 📅 **آپ کی ہفتہ بھر کی GitHub مہم جوئی**
+- [ ] GitHub Skills کورسز مکمل کریں (Introduction to GitHub, Markdown)
+- [ ] کسی اوپن سورس پروجیکٹ میں اپنی پہلی pull request کریں
+- [ ] اپنے کام کو دکھانے کے لیے ایک GitHub Pages سائٹ سیٹ کریں
+- [ ] ان پروجیکٹس پر GitHub Discussions میں شامل ہوں جن میں آپ دلچسپی رکھتے ہیں
+- [ ] ایک ریپوزٹری بنائیں جس میں مناسب کمیونٹی معیارات ہوں (README, License, وغیرہ)
+- [ ] کلاؤڈ بیسڈ ڈیولپمنٹ کے لیے GitHub Codespaces آزمائیں
+
+### 🌟 **آپ کی ماہ بھر کی تبدیلی**
+- [ ] 3 مختلف اوپن سورس پروجیکٹس میں تعاون کریں
+- [ ] کسی نئے GitHub صارف کو رہنمائی فراہم کریں (آگے بڑھائیں!)
+- [ ] GitHub Actions کے ساتھ خودکار ورک فلو سیٹ کریں
+- [ ] اپنے GitHub تعاون کو ظاہر کرنے کے لیے ایک پورٹ فولیو بنائیں
+- [ ] Hacktoberfest یا اسی طرح کے کمیونٹی ایونٹس میں حصہ لیں
+- [ ] اپنے پروجیکٹ کے مینٹینر بنیں جس میں دوسرے تعاون کریں
+
+### 🎓 **حتمی GitHub مہارت چیک ان**
+
+**یہ جشن منائیں کہ آپ کتنی دور آ چکے ہیں:**
+- GitHub استعمال کرنے کے بارے میں آپ کی پسندیدہ چیز کیا ہے؟
+- کون سی تعاون کی خصوصیت آپ کو سب سے زیادہ پرجوش کرتی ہے؟
+- اوپن سورس میں تعاون کرنے کے بارے میں آپ کتنا پراعتماد محسوس کرتے ہیں؟
+- آپ کس پہلے پروجیکٹ میں تعاون کرنا چاہتے ہیں؟
+
+```mermaid
+journey
+    title Your GitHub Confidence Journey
+    section Today
+      Nervous: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Contributing: 5: You
+      Connecting: 5: You
+    section Next Month
+      Collaborating: 5: You
+      Leading: 5: You
+      Inspiring Others: 5: You
+```
+  
+> 🌍 **عالمی ڈویلپر کمیونٹی میں خوش آمدید!** اب آپ کے پاس وہ ٹولز ہیں جن کے ذریعے آپ دنیا بھر کے لاکھوں ڈویلپرز کے ساتھ تعاون کر سکتے ہیں۔ آپ کی پہلی شراکت شاید چھوٹی لگے، لیکن یاد رکھیں - ہر بڑا اوپن سورس پروجیکٹ کسی کے پہلے commit سے شروع ہوا تھا۔ سوال یہ نہیں ہے کہ آپ اثر ڈالیں گے یا نہیں، بلکہ یہ ہے کہ آپ کے منفرد نقطہ نظر سے کون سا حیرت انگیز پروجیکٹ سب سے پہلے فائدہ اٹھائے گا! 🚀
 
 یاد رکھیں: ہر ماہر کبھی مبتدی تھا۔ آپ یہ کر سکتے ہیں! 💪
 
 ---
 
-**ڈسکلیمر**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**اعلانِ لاتعلقی**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا عدم درستگی ہو سکتی ہے۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/1-getting-started-lessons/3-accessibility/README.md b/translations/ur/1-getting-started-lessons/3-accessibility/README.md
index 726da5bd05..5c199a21f1 100644
--- a/translations/ur/1-getting-started-lessons/3-accessibility/README.md
+++ b/translations/ur/1-getting-started-lessons/3-accessibility/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90b19cde5b79b29e91babd3138cd8035",
-  "translation_date": "2025-10-22T14:42:10+00:00",
+  "original_hash": "7f2c48e04754724123ea100a822765e5",
+  "translation_date": "2025-11-03T13:03:16+00:00",
   "source_file": "1-getting-started-lessons/3-accessibility/README.md",
   "language_code": "ur"
 }
@@ -10,39 +10,81 @@ CO_OP_TRANSLATOR_METADATA:
 # قابل رسائی ویب صفحات بنانا
 
 ![سب کچھ قابل رسائی کے بارے میں](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ur.png)
-> اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac)
+> اسکیچ نوٹ از [ٹومومی ایمورا](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title Your Accessibility Learning Adventure
+    section Foundation
+      Understanding Users: 5: You
+      Testing Tools: 4: You
+      POUR Principles: 5: You
+    section Build Skills
+      Semantic HTML: 4: You
+      Visual Design: 5: You
+      ARIA Techniques: 4: You
+    section Master Practice
+      Keyboard Navigation: 5: You
+      Form Accessibility: 4: You
+      Real-world Testing: 5: You
+```
 
 ## لیکچر سے پہلے کا کوئز
 [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/)
 
-> ویب کی طاقت اس کی عالمگیریت میں ہے۔ معذوری سے قطع نظر ہر کسی کے لیے رسائی ایک لازمی پہلو ہے۔
+> ویب کی طاقت اس کی عالمگیریت میں ہے۔ معذوری سے قطع نظر ہر کسی کے لیے رسائی ایک ضروری پہلو ہے۔
 >
 > \- سر ٹموتھی برنرز لی، W3C کے ڈائریکٹر اور ورلڈ وائڈ ویب کے موجد
 
 یہ بات آپ کو حیران کر سکتی ہے: جب آپ قابل رسائی ویب سائٹس بناتے ہیں، تو آپ صرف معذور افراد کی مدد نہیں کر رہے ہوتے—بلکہ آپ ویب کو سب کے لیے بہتر بنا رہے ہوتے ہیں!
 
-کبھی گلی کے کونوں پر وہ چھوٹے ریمپ دیکھے ہیں؟ وہ اصل میں وہیل چیئرز کے لیے بنائے گئے تھے، لیکن اب وہ بچوں کی گاڑیوں، سامان لے جانے والے کارکنوں، سفر کرنے والوں کے سامان کے ساتھ، اور سائیکل سواروں کے لیے بھی مددگار ہیں۔ یہی طریقہ قابل رسائی ویب ڈیزائن کا ہے—ایسے حل جو ایک گروپ کی مدد کرتے ہیں، اکثر سب کے لیے فائدہ مند ثابت ہوتے ہیں۔ کافی دلچسپ، ہے نا؟
+کبھی گلی کے کونوں پر وہ چھوٹے ریمپ دیکھے ہیں؟ وہ اصل میں وہیل چیئرز کے لیے بنائے گئے تھے، لیکن اب وہ بچوں کی گاڑیوں، ڈلیوری ورکرز کے ڈولیز، سفر کرنے والوں کے رولنگ سامان، اور سائیکل سواروں کے لیے بھی مددگار ہیں۔ یہی طریقہ قابل رسائی ویب ڈیزائن کا ہے—ایسے حل جو ایک گروپ کی مدد کرتے ہیں، اکثر سب کے لیے فائدہ مند ثابت ہوتے ہیں۔ کافی دلچسپ، ہے نا؟
 
-اس سبق میں، ہم یہ دریافت کریں گے کہ ایسی ویب سائٹس کیسے بنائی جائیں جو واقعی سب کے لیے کام کریں، چاہے وہ ویب کو کیسے بھی براؤز کریں۔ آپ عملی تکنیکیں دریافت کریں گے جو پہلے ہی ویب کے معیارات میں شامل ہیں، ٹیسٹنگ ٹولز کے ساتھ کام کریں گے، اور دیکھیں گے کہ قابل رسائی ویب سائٹس کیسے سب کے لیے زیادہ قابل استعمال بناتی ہیں۔
+اس سبق میں، ہم یہ جانیں گے کہ ایسی ویب سائٹس کیسے بنائی جائیں جو واقعی سب کے لیے کام کریں، چاہے وہ ویب کو کیسے بھی براؤز کریں۔ آپ عملی تکنیکیں دریافت کریں گے جو پہلے ہی ویب کے معیارات میں شامل ہیں، ٹیسٹنگ ٹولز کے ساتھ کام کریں گے، اور دیکھیں گے کہ قابل رسائی ویب سائٹس کیسے سب کے لیے زیادہ قابل استعمال بناتی ہیں۔
 
-اس سبق کے اختتام تک، آپ کو یہ اعتماد ہوگا کہ قابل رسائی کو اپنے ترقیاتی ورک فلو کا قدرتی حصہ بنا سکیں۔ تیار ہیں یہ دریافت کرنے کے لیے کہ سوچ سمجھ کر کیے گئے ڈیزائن کے انتخاب کیسے اربوں صارفین کے لیے ویب کو کھول سکتے ہیں؟ آئیے شروع کریں!
+اس سبق کے اختتام تک، آپ کو یہ اعتماد ہوگا کہ قابل رسائی کو اپنے ڈیولپمنٹ ورک فلو کا قدرتی حصہ بنا سکیں۔ تیار ہیں یہ جاننے کے لیے کہ سوچ سمجھ کر کیے گئے ڈیزائن کے انتخاب کیسے اربوں صارفین کے لیے ویب کو کھول سکتے ہیں؟ آئیے شروع کریں!
+
+```mermaid
+mindmap
+  root((Web Accessibility))
+    Users
+      Screen readers
+      Keyboard navigation
+      Voice control
+      Magnification
+    Technologies
+      HTML semantics
+      ARIA attributes
+      CSS focus indicators
+      Keyboard events
+    Benefits
+      Wider audience
+      Better SEO
+      Legal compliance
+      Universal design
+    Testing
+      Automated tools
+      Manual testing
+      User feedback
+      Real assistive tech
+```
 
 > آپ یہ سبق [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) پر لے سکتے ہیں!
 
 ## معاون ٹیکنالوجیز کو سمجھنا
 
-کوڈنگ شروع کرنے سے پہلے، آئیے ایک لمحہ نکال کر یہ سمجھیں کہ مختلف صلاحیتوں والے لوگ ویب کو حقیقت میں کیسے تجربہ کرتے ہیں۔ یہ صرف نظریہ نہیں ہے—ان حقیقی دنیا کے نیویگیشن پیٹرنز کو سمجھنا آپ کو ایک بہتر ڈویلپر بنائے گا!
+کوڈنگ شروع کرنے سے پہلے، آئیے ایک لمحہ نکال کر یہ سمجھیں کہ مختلف صلاحیتوں والے لوگ ویب کو حقیقت میں کیسے تجربہ کرتے ہیں۔ یہ صرف نظریہ نہیں ہے—ان حقیقی دنیا کے نیویگیشن پیٹرنز کو سمجھنا آپ کو ایک بہتر ڈیولپر بنائے گا!
 
-معاون ٹیکنالوجیز حیرت انگیز ٹولز ہیں جو معذور افراد کو ویب سائٹس کے ساتھ ایسے طریقوں سے تعامل کرنے میں مدد دیتی ہیں جو آپ کو حیران کر سکتے ہیں۔ ایک بار جب آپ ان ٹیکنالوجیز کے کام کرنے کا طریقہ سمجھ لیں، تو قابل رسائی ویب تجربات بنانا بہت زیادہ آسان ہو جاتا ہے۔ یہ بالکل ایسے ہے جیسے آپ اپنے کوڈ کو کسی اور کی نظر سے دیکھنا سیکھ رہے ہوں۔
+معاون ٹیکنالوجیز حیرت انگیز ٹولز ہیں جو معذور افراد کو ویب سائٹس کے ساتھ ایسے طریقوں سے تعامل کرنے میں مدد دیتی ہیں جو آپ کو حیران کر سکتے ہیں۔ ایک بار جب آپ ان ٹیکنالوجیز کے کام کرنے کا طریقہ سمجھ لیں گے، تو قابل رسائی ویب تجربات بنانا بہت زیادہ آسان ہو جائے گا۔ یہ بالکل ایسے ہے جیسے آپ اپنے کوڈ کو کسی اور کی نظر سے دیکھنا سیکھ رہے ہوں۔
 
 ### اسکرین ریڈرز
 
-[اسکرین ریڈرز](https://en.wikipedia.org/wiki/Screen_reader) کافی پیچیدہ ٹیکنالوجی ہیں جو ڈیجیٹل متن کو تقریر یا بریل آؤٹ پٹ میں تبدیل کرتی ہیں۔ اگرچہ وہ بنیادی طور پر بصری معذوری والے افراد کے لیے استعمال ہوتے ہیں، وہ سیکھنے کی معذوری جیسے ڈسلیکسیا والے صارفین کے لیے بھی بہت مددگار ہیں۔
+[اسکرین ریڈرز](https://en.wikipedia.org/wiki/Screen_reader) بہت جدید ٹیکنالوجی ہیں جو ڈیجیٹل متن کو تقریر یا بریل آؤٹ پٹ میں تبدیل کرتی ہیں۔ اگرچہ یہ بنیادی طور پر بصری معذوری والے افراد استعمال کرتے ہیں، لیکن یہ ڈسلیکسیا جیسے سیکھنے کی معذوری والے صارفین کے لیے بھی بہت مددگار ہیں۔
 
-میں اسکرین ریڈر کو ایک بہت ہی ذہین راوی کے طور پر سوچتا ہوں جو آپ کو کتاب پڑھ کر سناتا ہے۔ یہ مواد کو منطقی ترتیب میں بلند آواز سے پڑھتا ہے، انٹرایکٹو عناصر جیسے "بٹن" یا "لنک" کا اعلان کرتا ہے، اور صفحہ کے ارد گرد چھلانگ لگانے کے لیے کی بورڈ شارٹ کٹس فراہم کرتا ہے۔ لیکن بات یہ ہے—اسکرین ریڈرز صرف اس وقت اپنا جادو دکھا سکتے ہیں جب ہم ویب سائٹس کو مناسب ساخت اور بامعنی مواد کے ساتھ بنائیں۔ یہی وہ جگہ ہے جہاں آپ بطور ڈویلپر آتے ہیں!
+میں اسکرین ریڈر کو ایک بہت ہوشیار راوی کے طور پر سوچتا ہوں جو آپ کو کتاب پڑھ کر سناتا ہے۔ یہ مواد کو منطقی ترتیب میں بلند آواز سے پڑھتا ہے، انٹرایکٹو عناصر جیسے "بٹن" یا "لنک" کا اعلان کرتا ہے، اور صفحے پر نیویگیٹ کرنے کے لیے کی بورڈ شارٹ کٹس فراہم کرتا ہے۔ لیکن بات یہ ہے—اسکرین ریڈرز صرف تب ہی اپنا جادو دکھا سکتے ہیں جب ہم ویب سائٹس کو مناسب ساخت اور معنی خیز مواد کے ساتھ بنائیں۔ یہی آپ کا کام ہے بطور ڈیولپر!
 
 **پلیٹ فارمز پر مشہور اسکرین ریڈرز:**
-- **ونڈوز**: [NVDA](https://www.nvaccess.org/about-nvda/) (مفت اور سب سے زیادہ مقبول)، [JAWS](https://webaim.org/articles/jaws/)، [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (بلٹ ان)
+- **ونڈوز**: [NVDA](https://www.nvaccess.org/about-nvda/) (مفت اور سب سے مشہور)، [JAWS](https://webaim.org/articles/jaws/)، [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (بلٹ ان)
 - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (بلٹ ان اور بہت قابل)
 - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (بلٹ ان)
 - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (مفت اور اوپن سورس)
@@ -51,72 +93,80 @@ CO_OP_TRANSLATOR_METADATA:
 
 اسکرین ریڈرز متعدد نیویگیشن طریقے فراہم کرتے ہیں جو تجربہ کار صارفین کے لیے براؤزنگ کو مؤثر بناتے ہیں:
 - **تسلسل سے پڑھنا**: مواد کو اوپر سے نیچے تک پڑھتا ہے، جیسے کتاب کی پیروی کرنا
-- **لینڈ مارک نیویگیشن**: صفحہ کے سیکشنز کے درمیان چھلانگ لگائیں (ہیڈر، نیویگیشن، مین، فوٹر)
-- **ہیڈنگ نیویگیشن**: ہیڈنگز کے درمیان چھلانگ لگائیں تاکہ صفحہ کی ساخت کو سمجھ سکیں
-- **لنک لسٹس**: تمام لنکس کی فہرست تیار کریں تاکہ جلدی رسائی حاصل ہو
-- **فارم کنٹرولز**: ان پٹ فیلڈز اور بٹنوں کے درمیان براہ راست نیویگیٹ کریں
+- **لینڈ مارک نیویگیشن**: صفحے کے سیکشنز کے درمیان چھلانگ لگانا (ہیڈر، نیویگیشن، مین، فوٹر)
+- **ہیڈنگ نیویگیشن**: ہیڈنگز کے درمیان چھلانگ لگانا تاکہ صفحے کی ساخت کو سمجھا جا سکے
+- **لنک لسٹس**: تمام لنکس کی فہرست تیار کرنا تاکہ جلدی رسائی ہو سکے
+- **فارم کنٹرولز**: ان پٹ فیلڈز اور بٹنوں کے درمیان براہ راست نیویگیشن
 
-> 💡 **یہاں ایک چیز جو مجھے حیران کر گئی**: 68% اسکرین ریڈر صارفین بنیادی طور پر ہیڈنگز کے ذریعے نیویگیٹ کرتے ہیں ([WebAIM سروے](https://webaim.org/projects/screenreadersurvey9/#finding))۔ اس کا مطلب ہے کہ آپ کی ہیڈنگ کی ساخت صارفین کے لیے ایک روڈ میپ کی طرح ہے—جب آپ اسے درست کرتے ہیں، تو آپ واقعی لوگوں کو اپنے مواد کے ارد گرد تیزی سے راستہ تلاش کرنے میں مدد کر رہے ہوتے ہیں!
+> 💡 **یہ بات حیران کن ہے**: 68% اسکرین ریڈر صارفین بنیادی طور پر ہیڈنگز کے ذریعے نیویگیٹ کرتے ہیں ([WebAIM سروے](https://webaim.org/projects/screenreadersurvey9/#finding))۔ اس کا مطلب ہے کہ آپ کی ہیڈنگ کی ساخت صارفین کے لیے ایک نقشہ کی طرح ہے—جب آپ اسے درست بناتے ہیں، تو آپ واقعی لوگوں کو اپنے مواد کے ارد گرد تیزی سے راستہ تلاش کرنے میں مدد کر رہے ہوتے ہیں!
 
 ### اپنی ٹیسٹنگ ورک فلو بنانا
 
-یہ اچھی خبر ہے—مؤثر قابل رسائی ٹیسٹنگ کو زبردست ہونے کی ضرورت نہیں ہے! آپ خودکار ٹولز کو شامل کرنا چاہیں گے (یہ واضح مسائل کو پکڑنے میں شاندار ہیں) اور کچھ ہاتھ سے ٹیسٹنگ کریں۔ یہاں ایک منظم طریقہ ہے جو میں نے پایا ہے کہ زیادہ تر مسائل کو پکڑتا ہے بغیر آپ کا پورا دن کھائے:
+یہ اچھی خبر ہے—مؤثر قابل رسائی ٹیسٹنگ کو پریشان کن ہونے کی ضرورت نہیں ہے! آپ کو خودکار ٹولز کو شامل کرنا ہوگا (یہ واضح مسائل کو پکڑنے میں شاندار ہیں) اور کچھ ہاتھ سے ٹیسٹنگ کرنی ہوگی۔ یہاں ایک منظم طریقہ ہے جو زیادہ تر مسائل کو پکڑتا ہے بغیر آپ کا پورا دن ضائع کیے:
 
 **ضروری دستی ٹیسٹنگ ورک فلو:**
 
 ```mermaid
-graph TD
-    A[Start Testing] --> B{Keyboard Navigation}
+flowchart TD
+    A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation}
     B --> C[Tab through all interactive elements]
-    C --> D{Screen Reader Testing}
+    C --> D{🎧 Screen Reader Testing}
     D --> E[Test with NVDA/VoiceOver]
-    E --> F{Zoom Testing}
+    E --> F{🔍 Zoom Testing}
     F --> G[Zoom to 200% and test functionality]
-    G --> H{Color/Contrast Check}
+    G --> H{🎨 Color/Contrast Check}
     H --> I[Verify all text meets contrast ratios]
-    I --> J{Focus Management}
+    I --> J{👁️ Focus Management}
     J --> K[Ensure focus indicators are visible]
-    K --> L[Testing Complete]
+    K --> L[✅ Testing Complete]
+    
+    style A fill:#e3f2fd
+    style L fill:#e8f5e8
+    style B fill:#fff3e0
+    style D fill:#f3e5f5
+    style F fill:#e0f2f1
+    style H fill:#fce4ec
+    style J fill:#e8eaf6
 ```
 
 **مرحلہ وار ٹیسٹنگ چیک لسٹ:**
 1. **کی بورڈ نیویگیشن**: صرف Tab، Shift+Tab، Enter، Space، اور Arrow keys استعمال کریں
-2. **اسکرین ریڈر ٹیسٹنگ**: NVDA، VoiceOver، یا Narrator کو فعال کریں اور بند آنکھوں کے ساتھ نیویگیٹ کریں
+2. **اسکرین ریڈر ٹیسٹنگ**: NVDA، VoiceOver، یا Narrator کو فعال کریں اور بند آنکھوں سے نیویگیٹ کریں
 3. **زوم ٹیسٹنگ**: 200% اور 400% زوم لیولز پر ٹیسٹ کریں
 4. **رنگ کے تضاد کی تصدیق**: تمام متن اور UI اجزاء چیک کریں
-5. **فوکس انڈیکیٹر ٹیسٹنگ**: یقینی بنائیں کہ تمام انٹرایکٹو عناصر کے پاس نظر آنے والے فوکس اسٹیٹس ہیں
+5. **فوکس انڈیکیٹر ٹیسٹنگ**: یقینی بنائیں کہ تمام انٹرایکٹو عناصر کے واضح فوکس اسٹیٹس ہوں
 
 ✅ **لائٹ ہاؤس سے شروع کریں**: اپنے براؤزر کے DevTools کھولیں، لائٹ ہاؤس قابل رسائی آڈٹ چلائیں، پھر نتائج کو اپنی دستی ٹیسٹنگ کے فوکس ایریاز کی رہنمائی کے لیے استعمال کریں۔
 
 ### زوم اور میگنیفیکیشن ٹولز
 
-آپ جانتے ہیں کہ آپ کبھی کبھار اپنے فون پر متن کو بڑا کرنے کے لیے زوم کرتے ہیں، یا روشن دھوپ میں اپنے لیپ ٹاپ اسکرین پر جھکتے ہیں؟ بہت سے صارفین روزانہ مواد کو پڑھنے کے قابل بنانے کے لیے میگنیفیکیشن ٹولز پر انحصار کرتے ہیں۔ اس میں کم بصارت والے افراد، عمر رسیدہ افراد، اور کوئی بھی شامل ہے جو کبھی باہر ویب سائٹ پڑھنے کی کوشش کرتا ہے۔
+آپ جانتے ہیں کہ کبھی کبھار فون پر متن چھوٹا ہونے پر زوم کرتے ہیں، یا روشن دھوپ میں لیپ ٹاپ اسکرین پر نظر ڈالنے کی کوشش کرتے ہیں؟ بہت سے صارفین روزانہ مواد کو پڑھنے کے قابل بنانے کے لیے میگنیفیکیشن ٹولز پر انحصار کرتے ہیں۔ اس میں کم نظر والے افراد، بزرگ، اور وہ لوگ شامل ہیں جو کبھی باہر ویب سائٹ پڑھنے کی کوشش کرتے ہیں۔
 
 جدید زوم ٹیکنالوجیز صرف چیزوں کو بڑا کرنے سے آگے بڑھ چکی ہیں۔ یہ سمجھنا کہ یہ ٹولز کیسے کام کرتے ہیں آپ کو ایسے ذمہ دار ڈیزائن بنانے میں مدد دے گا جو کسی بھی میگنیفیکیشن لیول پر فعال اور دلکش رہیں۔
 
 **جدید براؤزر زوم کی صلاحیتیں:**
 - **صفحہ زوم**: تمام مواد کو تناسب سے بڑھاتا ہے (متن، تصاویر، لے آؤٹ) - یہ ترجیحی طریقہ ہے
-- **صرف متن زوم**: فونٹ سائز کو بڑھاتا ہے جبکہ اصل لے آؤٹ کو برقرار رکھتا ہے
+- **صرف متن زوم**: فونٹ سائز بڑھاتا ہے جبکہ اصل لے آؤٹ برقرار رکھتا ہے
 - **پنچ ٹو زوم**: موبائل اشارے کی حمایت عارضی میگنیفیکیشن کے لیے
 - **براؤزر سپورٹ**: تمام جدید براؤزرز 500% تک زوم کی حمایت کرتے ہیں بغیر فعالیت کو توڑے
 
 **خصوصی میگنیفیکیشن سافٹ ویئر:**
 - **ونڈوز**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (بلٹ ان)، [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
-- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (بلٹ ان جدید خصوصیات کے ساتھ)
+- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (بلٹ ان اور جدید خصوصیات کے ساتھ)
 
 > ⚠️ **ڈیزائن پر غور کریں**: WCAG کا تقاضا ہے کہ مواد 200% زوم پر فعال رہے۔ اس سطح پر، افقی اسکرولنگ کم سے کم ہونی چاہیے، اور تمام انٹرایکٹو عناصر قابل رسائی رہنے چاہئیں۔
 
-✅ **اپنے ذمہ دار ڈیزائن کا ٹیسٹ کریں**: اپنے براؤزر کو 200% اور 400% زوم کریں۔ کیا آپ کا لے آؤٹ خوبصورتی سے ڈھلتا ہے؟ کیا آپ اب بھی بغیر زیادہ اسکرولنگ کے تمام فعالیت تک رسائی حاصل کر سکتے ہیں؟
+✅ **اپنے ذمہ دار ڈیزائن کا ٹیسٹ کریں**: اپنے براؤزر کو 200% اور 400% زوم کریں۔ کیا آپ کا لے آؤٹ خوبصورتی سے ڈھلتا ہے؟ کیا آپ بغیر زیادہ اسکرولنگ کے تمام فعالیت تک رسائی حاصل کر سکتے ہیں؟
 
 ## جدید قابل رسائی ٹیسٹنگ ٹولز
 
 اب جب کہ آپ سمجھ گئے ہیں کہ لوگ معاون ٹیکنالوجیز کے ساتھ ویب کو کیسے نیویگیٹ کرتے ہیں، آئیے ان ٹولز کو دریافت کریں جو آپ کو قابل رسائی ویب سائٹس بنانے اور ٹیسٹ کرنے میں مدد دیتے ہیں۔
 
-اسے اس طرح سوچیں: خودکار ٹولز واضح مسائل (جیسے گمشدہ alt متن) کو پکڑنے میں زبردست ہیں، جبکہ ہاتھ سے ٹیسٹنگ آپ کو یہ یقینی بنانے میں مدد دیتی ہے کہ آپ کی سائٹ حقیقی دنیا میں استعمال کرنے کے لیے اچھی محسوس ہوتی ہے۔ دونوں مل کر آپ کو یہ اعتماد دیتے ہیں کہ آپ کی سائٹس سب کے لیے کام کرتی ہیں۔
+اسے یوں سمجھیں: خودکار ٹولز واضح مسائل (جیسے گمشدہ alt متن) کو پکڑنے میں شاندار ہیں، جبکہ ہاتھ سے ٹیسٹنگ آپ کو یہ یقینی بنانے میں مدد دیتی ہے کہ آپ کی سائٹ حقیقی دنیا میں استعمال کرنے کے لیے اچھی لگتی ہے۔ دونوں مل کر آپ کو یہ اعتماد دیتے ہیں کہ آپ کی سائٹس سب کے لیے کام کرتی ہیں۔
 
 ### رنگ کے تضاد کی جانچ
 
-یہ اچھی خبر ہے: رنگ کے تضاد سب سے عام قابل رسائی مسائل میں سے ایک ہے، لیکن یہ ٹھیک کرنے میں بھی سب سے آسان ہے۔ اچھا تضاد سب کے لیے فائدہ مند ہے—بصری معذوری والے صارفین سے لے کر ساحل پر اپنے فون پڑھنے کی کوشش کرنے والے افراد تک۔
+یہ اچھی خبر ہے: رنگ کے تضاد قابل رسائی کے سب سے عام مسائل میں سے ایک ہے، لیکن یہ ٹھیک کرنے میں سب سے آسان بھی ہے۔ اچھا تضاد سب کے لیے فائدہ مند ہے—بصری معذوری والے صارفین سے لے کر ساحل پر اپنے فون پڑھنے کی کوشش کرنے والے لوگوں تک۔
 
 **WCAG تضاد کے تقاضے:**
 
@@ -127,24 +177,24 @@ graph TD
 | **UI اجزاء** (بٹن، فارم بارڈرز) | 3:1 تضاد تناسب | 3:1 تضاد تناسب |
 
 **ضروری ٹیسٹنگ ٹولز:**
-- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - کلر پکر کے ساتھ ڈیسک ٹاپ ایپ
-- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - فوری فیڈبیک کے ساتھ ویب پر مبنی
-- [Stark](https://www.getstark.co/) - Figma، Sketch، Adobe XD کے لیے ڈیزائن ٹول پلگ ان
+- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - کلر پککر کے ساتھ ڈیسک ٹاپ ایپ
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - ویب پر مبنی فوری فیڈبیک کے ساتھ
+- [Stark](https://www.getstark.co/) - فگما، اسکیچ، ایڈوب XD کے لیے ڈیزائن ٹول پلگ ان
 - [Accessible Colors](https://accessible-colors.com/) - قابل رسائی رنگ پیلیٹس تلاش کریں
 
 ✅ **بہتر رنگ پیلیٹس بنائیں**: اپنے برانڈ کے رنگوں سے شروع کریں اور قابل رسائی تغیرات بنانے کے لیے تضاد چیکرز کا استعمال کریں۔ انہیں اپنے ڈیزائن سسٹم کے قابل رسائی رنگ ٹوکن کے طور پر دستاویز کریں۔
 
 ### جامع قابل رسائی آڈٹ
 
-سب سے مؤثر قابل رسائی ٹیسٹنگ متعدد طریقوں کو یکجا کرتی ہے۔ کوئی ایک ٹول سب کچھ نہیں پکڑتا، لہذا مختلف طریقوں کے ساتھ ٹیسٹنگ روٹین بنانا مکمل کوریج کو یقینی بناتا ہے۔
+سب سے مؤثر قابل رسائی ٹیسٹنگ متعدد طریقوں کو یکجا کرتی ہے۔ کوئی ایک ٹول سب کچھ نہیں پکڑ سکتا، اس لیے مختلف طریقوں کے ساتھ ٹیسٹنگ روٹین بنانا مکمل کوریج کو یقینی بناتا ہے۔
 
 **براؤزر پر مبنی ٹیسٹنگ (DevTools میں بلٹ ان):**
-- **Chrome/Edge**: لائٹ ہاؤس قابل رسائی آڈٹ + قابل رسائی پینل
-- **Firefox**: تفصیلی درخت منظر کے ساتھ قابل رسائی انسپکٹر
-- **Safari**: Web Inspector میں آڈٹ ٹیب VoiceOver سیمولیشن کے ساتھ
+- **کروم/ایج**: لائٹ ہاؤس قابل رسائی آڈٹ + قابل رسائی پینل
+- **فائر فاکس**: تفصیلی درخت منظر کے ساتھ قابل رسائی انسپکٹر
+- **سفاری**: ویب انسپکٹر میں آڈٹ ٹیب کے ساتھ VoiceOver کی تخروپن
 
 **پروفیشنل ٹیسٹنگ ایکسٹینشنز:**
-- [axe DevTools](https://www.deque.com/axe/devtools/) - صنعت کا معیاری خودکار ٹیسٹنگ
+- [axe DevTools](https://www.deque.com/axe/devtools/) - صنعت کے معیاری خودکار ٹیسٹنگ
 - [WAVE](https://wave.webaim.org/extension/) - غلطی کو نمایاں کرنے کے ساتھ بصری فیڈبیک
 - [Accessibility Insights](https://accessibilityinsights.io/) - مائیکروسافٹ کا جامع ٹیسٹنگ سوٹ
 
@@ -153,52 +203,113 @@ graph TD
 - [Pa11y](https://pa11y.org/) - کمانڈ لائن قابل رسائی ٹیسٹنگ ٹول
 - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - خودکار قابل رسائی اسکورنگ
 
-> 🎯 **ٹیسٹنگ کا مقصد**: لائٹ ہاؤس قابل رسائی اسکور کو 95+ کے طور پر اپنا بنیادی معیار بنائیں۔ یاد رکھیں، خودکار ٹولز صرف 30-40% قابل رسائی مسائل کو پکڑتے ہیں—دستی ٹیسٹنگ اب بھی ضروری ہے!
+> 🎯 **ٹیسٹنگ کا مقصد**: لائٹ ہاؤس قابل رسائی اسکور کو 95+ کے طور پر اپنا بنیادی معیار بنائیں۔ یاد رکھیں، خودکار ٹولز صرف 30-40% قابل رسائی مسائل پکڑتے ہیں—دستی ٹیسٹنگ اب بھی ضروری ہے!
+
+### 🧠 **ٹیسٹنگ مہارت چیک: مسائل تلاش کرنے کے لیے تیار؟**
 
-## بنیاد سے قابل رسائی بنانا
+**آئیے دیکھتے ہیں کہ آپ قابل رسائی ٹیسٹنگ کے بارے میں کیسا محسوس کر رہے ہیں:**
+- آپ کے لیے ابھی کون سا ٹیسٹنگ طریقہ سب سے زیادہ قابل رسائی لگتا ہے؟
+- کیا آپ پورے دن کے لیے صرف کی بورڈ نیویگیشن استعمال کرنے کا تصور کر سکتے ہیں؟
+- آن لائن آپ نے ذاتی طور پر کون سی قابل رسائی رکاوٹ کا سامنا کیا ہے؟
+
+```mermaid
+pie title "Accessibility Issues Caught by Different Methods"
+    "Automated Tools" : 35
+    "Manual Testing" : 40
+    "User Feedback" : 25
+```
 
-قابل رسائی کامیابی کی کلید یہ ہے کہ اسے پہلے دن سے اپنی بنیاد میں شامل کریں۔ مجھے معلوم ہے کہ یہ سوچنا پرکشش ہے "میں بعد میں قابل رسائی شامل کروں گا"، لیکن یہ بالکل ایسے ہے جیسے پہلے سے بنے ہوئے گھر میں ریمپ شامل کرنے کی کوشش کرنا۔ ممکن؟ ہاں۔ آسان؟ بالکل نہیں۔
+> **اعتماد بڑھانے والا**: پیشہ ورانہ قابل رسائی ٹیسٹرز بالکل یہی طریقے استعمال کرتے ہیں۔ آپ صنعت کے معیاری طریقے سیکھ رہے ہیں!
 
-قابل رسائی کو گھر کی منصوبہ بندی کی طرح سوچیں—ابتدائی معمارانہ منصوبوں میں وہیل چیئر کی رسائی شامل کرنا بہت آسان ہے بجائے اس کے کہ بعد میں سب کچھ دوبارہ بنایا جائے۔
+## ابتدا سے قابل رسائی بنانا
+
+قابل رسائی کامیابی کی کلید یہ ہے کہ اسے پہلے دن سے اپنی بنیاد میں شامل کریں۔ میں جانتا ہوں کہ یہ سوچنا پرکشش ہے "میں بعد میں قابل رسائی شامل کروں گا"، لیکن یہ ایسے ہے جیسے پہلے سے بنے گھر میں ریمپ شامل کرنے کی کوشش کرنا۔ ممکن؟ ہاں۔ آسان؟ بالکل نہیں۔
+
+قابل رسائی کو گھر کی منصوبہ بندی کی طرح سوچیں—اپنے ابتدائی تعمیراتی منصوبوں میں وہیل چیئر کی رسائی شامل کرنا بہت آسان ہے بجائے اس کے کہ بعد میں سب کچھ دوبارہ بنایا جائے۔
 
 ### POUR اصول: آپ کی قابل رسائی بنیاد
 
-ویب مواد کی قابل رسائی رہنما اصول (WCAG) چار بنیادی اصولوں کے ارد گرد بنائے گئے ہیں جو POUR کے طور پر بیان کرتے ہیں۔ پریشان نہ ہوں—یہ خشک علمی تصورات نہیں ہیں! یہ دراصل عملی رہنما ہیں جو ایسا مواد بنانے کے لیے ہیں جو سب کے لیے کام کرے۔
+ویب مواد کی قابل رسائی گائیڈ لائنز (WCAG) چار بنیادی اصولوں کے گرد بنی ہیں جو POUR کے مخفف میں آتی ہیں۔ فکر نہ کریں—یہ صرف علمی تصورات نہیں ہیں! یہ دراصل عملی رہنما خطوط ہیں جو ایسا مواد بنانے کے لیے ہیں جو سب کے لیے کام کرے۔
 
-ایک بار جب آپ POUR کو سمجھ لیں، تو قابل رسائی فیصلے لینا بہت زیادہ آسان ہو جاتا ہے۔ یہ بالکل ایسے ہے جیسے آپ کے ڈیزائن کے انتخاب کی رہنمائی کے لیے ایک ذہنی چیک لسٹ ہو۔ آئیے اسے توڑتے ہیں:
+ایک بار جب آپ POUR کو سمجھ لیں گے، تو قابل رسائی فیصلے کرنا بہت زیادہ آسان ہو جائے گا۔ یہ بالکل ایسے ہے جیسے آپ کے پاس ایک ذہنی چیک لسٹ ہو جو آپ کے ڈیزائن کے انتخاب کی رہنمائی کرے۔ آئیے اسے تفصیل سے دیکھتے ہیں:
 
-**🔍 قابل محسوس**: معلومات کو ایسے طریقوں سے پیش کیا جانا چاہیے جو صارفین اپنے دستیاب حواس کے ذریعے محسوس کر سکیں
+```mermaid
+flowchart LR
+    A[🔍 PERCEIVABLE<br/>Can users sense it?] --> B[🎮 OPERABLE<br/>Can users use it?]
+    B --> C[📖 UNDERSTANDABLE<br/>Can users get it?]
+    C --> D[💪 ROBUST<br/>Does it work everywhere?]
+    
+    A1[Alt text<br/>Captions<br/>Contrast] --> A
+    B1[Keyboard access<br/>No seizures<br/>Time limits] --> B
+    C1[Clear language<br/>Predictable<br/>Error help] --> C
+    D1[Valid code<br/>Compatible<br/>Future-proof] --> D
+    
+    style A fill:#e1f5fe
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
 
-- غیر متن مواد (تصاویر، ویڈیوز، آڈیو) کے لیے متن کے متبادل فراہم کریں
+**🔍 قابل محسوس**: معلومات کو ایسے طریقوں سے پیش کرنا ضروری ہے جو صارفین اپنی دستیاب حواس کے ذریعے محسوس کر سکیں
+
+- غیر متن مواد کے لیے متن کے متبادل فراہم کریں (تصاویر، ویڈیوز، آڈیو)
 - تمام متن اور UI اجزاء کے لیے کافی رنگ کے تضاد کو یقینی بنائیں
 - ملٹی میڈیا مواد کے لیے کیپشنز اور ٹرانسکرپٹس پیش کریں
-- ایسا مواد ڈیزائن کریں جو 200% تک دوبارہ سائز کیے جانے پر فعال رہے
-- معلومات کو پہنچانے کے لیے متعدد حسی خصوصیات (صرف رنگ نہیں) استعمال کریں
+- ایسا مواد ڈیزائن کریں جو 200% تک سائز میں بڑھنے پر بھی فعال رہے
+- معلومات پہنچانے کے لیے متعدد حسی خصوصیات (صرف رنگ نہیں) استعمال کریں
 
 **🎮 قابل عمل**: تمام انٹرفیس اجزاء دستیاب ان پٹ طریقوں کے ذریعے قابل عمل ہونے چاہئیں
 
 - تمام فعالیت کو کی بورڈ نیویگیشن کے ذریعے قابل رسائی بنائیں
-- صارفین کو مواد پڑھنے اور اس کے ساتھ تعامل کرنے کے لیے کافی وقت فراہم کریں
-- ایسا مواد سے بچیں جو دورے یا ویسٹیبلر عوارض کا سبب بنے
-- صارفین کو واضح ساخت اور لینڈ مارکس کے ساتھ مؤثر طریقے سے نیویگیٹ کرنے میں مدد کریں
-- انٹرایکٹو عناصر کے لیے مناسب ہدف کے سائز کو یقینی بنائیں (کم از کم 44px)
 
-**📖 قابل فہم**: معلومات اور UI آپریشن واضح اور قابل فہم ہونا چاہیے
+- **مختلف براؤزرز، ڈیوائسز، اور معاون ٹولز پر ٹیسٹ کریں**
+- **مواد کو اس طرح ترتیب دیں کہ جب جدید فیچرز سپورٹ نہ ہوں تو یہ آسانی سے کام کرے**
+
+### 🎯 **POUR اصولوں کی جانچ: بنیادوں کو مضبوط بنانا**
+
+**بنیادوں پر ایک مختصر نظر:**
+- کیا آپ کسی ویب سائٹ فیچر کے بارے میں سوچ سکتے ہیں جو ہر POUR اصول میں ناکام ہو؟
+- بطور ڈیولپر آپ کو کون سا اصول سب سے زیادہ قدرتی لگتا ہے؟
+- یہ اصول سب کے لیے، نہ صرف معذور صارفین کے لیے، ڈیزائن کو کیسے بہتر بنا سکتے ہیں؟
+
+```mermaid
+quadrantChart
+    title POUR Principles Impact Matrix
+    x-axis Low Effort --> High Effort
+    y-axis Low Impact --> High Impact
+    quadrant-1 Quick Wins
+    quadrant-2 Major Projects
+    quadrant-3 Consider Later
+    quadrant-4 Strategic Focus
+    
+    Alt Text: [0.2, 0.9]
+    Color Contrast: [0.3, 0.8]
+    Semantic HTML: [0.4, 0.9]
+    Keyboard Nav: [0.6, 0.8]
+    ARIA Complex: [0.8, 0.7]
+    Screen Reader Testing: [0.7, 0.6]
+```
+
+> **یاد رکھیں**: زیادہ اثر والے، کم محنت والے بہتریوں سے شروع کریں۔ سیمینٹک HTML اور alt ٹیکسٹ آپ کو کم محنت میں سب سے زیادہ رسائی فراہم کرتے ہیں!
+
+## قابل رسائی بصری ڈیزائن بنانا
+
+اچھا بصری ڈیزائن اور رسائی ایک دوسرے کے ساتھ چلتے ہیں۔ جب آپ رسائی کو مدنظر رکھتے ہوئے ڈیزائن کرتے ہیں، تو آپ اکثر یہ دریافت کرتے ہیں کہ یہ پابندیاں صاف، زیادہ خوبصورت حل پیدا کرتی ہیں جو تمام صارفین کے لیے فائدہ مند ہیں۔
+
+آئیے دیکھتے ہیں کہ بصری طور پر دلکش ڈیزائن کیسے بنائیں جو ہر کسی کے لیے کام کرے، چاہے ان کی بصری صلاحیتیں کچھ بھی ہوں یا وہ آپ کے مواد کو کس حالت میں دیکھ رہے ہوں۔
 
-- اپنے سامعین کے لیے مناسب واضح، سادہ زبان استعمال کریں
-- مواد کو پیش گوئی کے قابل، مستقل طریقوں سے ظاہر اور چلائیں
-- صارف ان پٹ کے لیے واضح ہدایات اور غلطی کے پیغامات فراہم کریں
-- صارفین کو فارم میں غلطیوں کو سمجھ
-رنگ مواصلات کے لیے ایک طاقتور ذریعہ ہے، لیکن یہ کبھی بھی اہم معلومات پہنچانے کا واحد طریقہ نہیں ہونا چاہیے۔ رنگ سے آگے ڈیزائن کرنا زیادہ مضبوط اور جامع تجربات تخلیق کرتا ہے جو مختلف حالات میں کام کرتے ہیں۔
+### رنگ اور بصری رسائی کی حکمت عملی
 
-**رنگ کی بصری فرق کے لیے ڈیزائن کریں:**
+رنگ مواصلات کے لیے طاقتور ہے، لیکن یہ کبھی بھی اہم معلومات پہنچانے کا واحد ذریعہ نہیں ہونا چاہیے۔ رنگ سے آگے ڈیزائن کرنا زیادہ مضبوط، جامع تجربات پیدا کرتا ہے جو زیادہ حالات میں کام کرتے ہیں۔
 
-تقریباً 8% مرد اور 0.5% خواتین کو رنگ کی بصری فرق کا سامنا ہوتا ہے (جسے اکثر "رنگ کی نابینا پن" کہا جاتا ہے)۔ سب سے عام اقسام یہ ہیں:
-- **Deuteranopia**: سرخ اور سبز کو الگ کرنے میں دشواری
-- **Protanopia**: سرخ زیادہ مدھم نظر آتا ہے
-- **Tritanopia**: نیلے اور پیلے کے ساتھ دشواری (نایاب)
+**رنگین وژن کے فرق کے لیے ڈیزائن کریں:**
 
-**جامع رنگ کی حکمت عملی:**
+تقریباً 8% مرد اور 0.5% خواتین کو رنگین وژن کا فرق ہوتا ہے (جسے اکثر "کلر بلائنڈنس" کہا جاتا ہے)۔ سب سے عام اقسام ہیں:
+- **ڈیوٹرانوپیا**: سرخ اور سبز کو پہچاننے میں دشواری
+- **پروٹانوپیا**: سرخ زیادہ مدھم نظر آتا ہے
+- **ٹریٹانوپیا**: نیلے اور پیلے کے ساتھ دشواری (نایاب)
+
+**جامع رنگین حکمت عملی:**
 
 ```css
 /* ❌ Bad: Using only color to indicate status */
@@ -225,17 +336,17 @@ graph TD
 }
 ```
 
-**بنیادی تضاد کی ضروریات سے آگے:**
-- اپنے رنگ کے انتخاب کو رنگ کی نابینا پن کے سمیلیٹرز کے ساتھ آزمائیں
-- رنگ کوڈنگ کے ساتھ ساتھ پیٹرنز، ٹیکسچرز، یا شکلیں استعمال کریں
-- یقینی بنائیں کہ انٹرایکٹو حالتیں بغیر رنگ کے بھی قابل شناخت رہیں
+**بنیادی کنٹراسٹ کی ضروریات سے آگے:**
+- اپنے رنگوں کے انتخاب کو کلر بلائنڈ سمیلیٹرز کے ساتھ ٹیسٹ کریں
+- رنگ کوڈنگ کے ساتھ پیٹرنز، ٹیکسچرز، یا شکلیں استعمال کریں
+- یقینی بنائیں کہ انٹرایکٹو حالتیں رنگ کے بغیر بھی قابل شناخت رہیں
 - غور کریں کہ آپ کا ڈیزائن ہائی کنٹراسٹ موڈ میں کیسا نظر آتا ہے
 
-✅ **اپنی رنگ کی رسائی کو آزمائیں**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) جیسے ٹولز استعمال کریں تاکہ دیکھ سکیں کہ آپ کی سائٹ مختلف قسم کی رنگ کی بصری فرق رکھنے والے صارفین کے لیے کیسی نظر آتی ہے۔
+✅ **اپنی رنگین رسائی کی جانچ کریں**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) جیسے ٹولز استعمال کریں تاکہ دیکھ سکیں کہ آپ کی سائٹ مختلف قسم کے رنگین وژن والے صارفین کے لیے کیسی نظر آتی ہے۔
 
 ### فوکس انڈیکیٹرز اور انٹرایکشن ڈیزائن
 
-فوکس انڈیکیٹرز ڈیجیٹل کرسر کے برابر ہیں—یہ کی بورڈ صارفین کو دکھاتے ہیں کہ وہ صفحے پر کہاں ہیں۔ اچھی طرح سے ڈیزائن کردہ فوکس انڈیکیٹرز ہر کسی کے تجربے کو بہتر بناتے ہیں، انٹرایکشنز کو واضح اور پیش گوئی کے قابل بناتے ہیں۔
+فوکس انڈیکیٹرز ڈیجیٹل کرسر کے برابر ہیں—یہ کی بورڈ صارفین کو دکھاتے ہیں کہ وہ صفحے پر کہاں ہیں۔ اچھی طرح سے ڈیزائن کیے گئے فوکس انڈیکیٹرز ہر کسی کے تجربے کو بہتر بناتے ہیں، انٹرایکشنز کو واضح اور پیش گوئی کے قابل بناتے ہیں۔
 
 **جدید فوکس انڈیکیٹرز کے بہترین طریقے:**
 
@@ -274,15 +385,37 @@ button:focus:not(:focus-visible) {
 
 > 💡 **ڈیزائن ٹپ**: بہترین فوکس انڈیکیٹرز اکثر آؤٹ لائن، باکس شیڈو، اور رنگ کی تبدیلیوں کا امتزاج استعمال کرتے ہیں تاکہ مختلف پس منظر اور سیاق و سباق میں نظر آنے کو یقینی بنایا جا سکے۔
 
-✅ **فوکس انڈیکیٹرز کا آڈٹ کریں**: اپنی ویب سائٹ پر ٹیب کریں اور نوٹ کریں کہ کون سے عناصر کے واضح فوکس انڈیکیٹرز ہیں۔ کیا کوئی دیکھنے میں مشکل یا مکمل طور پر غائب ہیں؟
+✅ **اپنے فوکس انڈیکیٹرز کا آڈٹ کریں**: اپنی ویب سائٹ پر ٹیب کریں اور نوٹ کریں کہ کون سے عناصر کے واضح فوکس انڈیکیٹرز ہیں۔ کیا کوئی دیکھنے میں مشکل یا مکمل طور پر غائب ہیں؟
 
 ### سیمینٹک HTML: رسائی کی بنیاد
 
-سیمینٹک HTML آپ کی ویب سائٹ کے لیے معاون ٹیکنالوجیز کو GPS سسٹم دینے جیسا ہے۔ جب آپ صحیح HTML عناصر کو ان کے مطلوبہ مقصد کے لیے استعمال کرتے ہیں، تو آپ بنیادی طور پر اسکرین ریڈرز، کی بورڈز، اور دیگر ٹولز کو ایک تفصیلی روڈ میپ فراہم کرتے ہیں تاکہ صارفین کو مؤثر طریقے سے نیویگیٹ کرنے میں مدد ملے۔
+سیمینٹک HTML معاون ٹیکنالوجیز کے لیے آپ کی ویب سائٹ کا GPS سسٹم فراہم کرنے جیسا ہے۔ جب آپ HTML عناصر کو ان کے مطلوبہ مقصد کے لیے استعمال کرتے ہیں، تو آپ بنیادی طور پر اسکرین ریڈرز، کی بورڈز، اور دیگر ٹولز کو ایک تفصیلی نقشہ فراہم کرتے ہیں تاکہ صارفین کو مؤثر طریقے سے نیویگیٹ کرنے میں مدد ملے۔
 
 یہاں ایک مثال ہے جو واقعی میرے لیے واضح ہوئی: سیمینٹک HTML ایک اچھی طرح سے منظم لائبریری کے درمیان فرق ہے جس میں واضح زمرے اور مددگار نشانات ہیں بمقابلہ ایک گودام جہاں کتابیں بے ترتیب بکھری ہوئی ہیں۔ دونوں جگہوں پر ایک ہی کتابیں ہیں، لیکن آپ کس جگہ پر کچھ تلاش کرنے کی کوشش کرنا پسند کریں گے؟ بالکل!
 
-**رسائی کے قابل صفحہ ڈھانچے کے بنیادی اجزاء:**
+```mermaid
+flowchart TD
+    A[🏠 HTML Document] --> B[📰 header]
+    A --> C[🧭 nav]
+    A --> D[📄 main]
+    A --> E[📋 footer]
+    
+    B --> B1[h1: Site Name<br/>Logo & branding]
+    C --> C1[ul: Navigation<br/>Primary links]
+    D --> D1[article: Content<br/>section: Subsections]
+    D --> D2[aside: Sidebar<br/>Related content]
+    E --> E1[nav: Footer links<br/>Copyright info]
+    
+    D1 --> D1a[h1: Page title<br/>h2: Major sections<br/>h3: Subsections]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+
+**قابل رسائی صفحہ ڈھانچے کے بنیادی اجزاء:**
 
 ```html
 <!-- Landmark elements provide page navigation structure -->
@@ -337,7 +470,7 @@ button:focus:not(:focus-visible) {
 </footer>
 ```
 
-**کیوں سیمینٹک HTML رسائی کو تبدیل کرتا ہے:**
+**سیمینٹک HTML رسائی کو کیسے تبدیل کرتا ہے:**
 
 | سیمینٹک عنصر | مقصد | اسکرین ریڈر کا فائدہ |
 |------------------|---------|----------------------|
@@ -351,20 +484,47 @@ button:focus:not(:focus-visible) {
 
 **سیمینٹک HTML کے ساتھ اسکرین ریڈر کی سپر پاورز:**
 - **لینڈ مارک نیویگیشن**: بڑے صفحہ سیکشنز کے درمیان فوری طور پر چھلانگ لگائیں
-- **ہیڈنگ آؤٹ لائنز**: آپ کی ہیڈنگ ساخت سے مواد کی فہرست تیار کریں
+- **ہیڈنگ آؤٹ لائنز**: آپ کی ہیڈنگ ساخت سے مواد کی فہرست بنائیں
 - **عنصر کی فہرستیں**: تمام لنکس، بٹن، یا فارم کنٹرولز کی فہرست بنائیں
 - **سیاق و سباق کی آگاہی**: مواد کے سیکشنز کے درمیان تعلقات کو سمجھیں
 
-> 🎯 **فوری ٹیسٹ**: لینڈ مارک شارٹ کٹس (NVDA/JAWS میں D لینڈ مارک کے لیے، H ہیڈنگ کے لیے، K لنک کے لیے) استعمال کرتے ہوئے اپنی سائٹ کو اسکرین ریڈر کے ساتھ نیویگیٹ کرنے کی کوشش کریں۔ کیا نیویگیشن معنی خیز ہے؟
+> 🎯 **فوری ٹیسٹ**: اپنے سائٹ کو اسکرین ریڈر کے ساتھ نیویگیٹ کرنے کی کوشش کریں، لینڈ مارک شارٹ کٹس (NVDA/JAWS میں D لینڈ مارک کے لیے، H ہیڈنگ کے لیے، K لنک کے لیے) استعمال کریں۔ کیا نیویگیشن سمجھ میں آتی ہے؟
+
+### 🏗️ **سیمینٹک HTML مہارت کی جانچ: مضبوط بنیادیں بنانا**
 
-✅ **اپنی سیمینٹک ساخت کا آڈٹ کریں**: اپنے براؤزر کے ڈویلپر ٹولز میں رسائی پینل استعمال کریں تاکہ رسائی کے درخت کو دیکھیں اور یقینی بنائیں کہ آپ کا مارک اپ منطقی ساخت تخلیق کرتا ہے۔
+**آئیے آپ کی سیمینٹک سمجھ کا جائزہ لیتے ہیں:**
+- کیا آپ HTML کو دیکھ کر ویب صفحہ کے لینڈ مارکس کی شناخت کر سکتے ہیں؟
+- آپ اپنے دوست کو `<section>` اور `<div>` کے فرق کو کیسے سمجھائیں گے؟
+- اگر اسکرین ریڈر صارف نیویگیشن کے مسائل کی اطلاع دے تو آپ سب سے پہلے کیا چیک کریں گے؟
 
-### ہیڈنگ کی درجہ بندی: منطقی مواد کا خاکہ بنانا
+```mermaid
+stateDiagram-v2
+    [*] --> UnsementicHTML: div soup
+    UnsementicHTML --> SemanticHTML: Add landmarks
+    SemanticHTML --> AccessibleHTML: Test with AT
+    AccessibleHTML --> [*]: User success!
+    
+    note right of UnsementicHTML
+        Screen readers lost
+        Keyboard nav broken
+    end note
+    
+    note right of AccessibleHTML
+        Clear navigation
+        Efficient browsing
+    end note
+```
 
-ہیڈنگز رسائی کے قابل مواد کے لیے بالکل ضروری ہیں—یہ ریڑھ کی ہڈی کی طرح ہیں جو سب کچھ ایک ساتھ رکھتی ہیں۔ اسکرین ریڈر صارفین ہیڈنگز پر بہت زیادہ انحصار کرتے ہیں تاکہ آپ کے مواد کو سمجھ سکیں اور نیویگیٹ کر سکیں۔ اسے اپنے صفحے کے لیے مواد کی فہرست فراہم کرنے کے طور پر سوچیں۔
+> **ماہرانہ بصیرت**: اچھا سیمینٹک HTML خود بخود تقریباً 70% رسائی کے مسائل حل کرتا ہے۔ اس بنیاد کو ماسٹر کریں اور آپ صحیح راستے پر ہیں!
+
+✅ **اپنے سیمینٹک ڈھانچے کا آڈٹ کریں**: اپنے براؤزر کے ڈویلپر ٹولز میں رسائی پینل استعمال کریں تاکہ رسائی کے درخت کو دیکھیں اور یقینی بنائیں کہ آپ کا مارک اپ منطقی ڈھانچہ بناتا ہے۔
+
+### ہیڈنگ ہائیرارکی: منطقی مواد کا خاکہ بنانا
+
+ہیڈنگز قابل رسائی مواد کے لیے بالکل ضروری ہیں—یہ وہ ریڑھ کی ہڈی ہیں جو سب کچھ ایک ساتھ رکھتی ہیں۔ اسکرین ریڈر صارفین ہیڈنگز پر بہت زیادہ انحصار کرتے ہیں تاکہ آپ کے مواد کو سمجھ سکیں اور نیویگیٹ کر سکیں۔ اسے اپنے صفحے کے لیے مواد کی فہرست فراہم کرنے کے طور پر سوچیں۔
 
 **ہیڈنگز کے لیے سنہری اصول یہ ہے:**
-کبھی بھی سطحیں نہ چھوڑیں۔ ہمیشہ منطقی طور پر `<h1>` سے `<h2>` سے `<h3>` تک ترقی کریں، اور اسی طرح۔ اسکول میں خاکے بنانا یاد ہے؟ یہ بالکل وہی اصول ہے—آپ "I. مین پوائنٹ" سے سیدھے "C. سب-سب پوائنٹ" پر بغیر "A. سب پوائنٹ" کے درمیان میں نہیں جائیں گے، ٹھیک؟
+کبھی بھی سطحیں نہ چھوڑیں۔ ہمیشہ منطقی طور پر `<h1>` سے `<h2>` سے `<h3>` تک ترقی کریں، اور اسی طرح۔ اسکول میں خاکے بناتے وقت یاد ہے؟ یہ بالکل وہی اصول ہے—آپ "I. مین پوائنٹ" سے سیدھے "C. سب-سب پوائنٹ" پر بغیر "A. سب پوائنٹ" کے درمیان نہیں جائیں گے، ٹھیک ہے؟
 
 **کامل ہیڈنگ ساخت کی مثال:**
 
@@ -405,34 +565,34 @@ button:focus:not(:focus-visible) {
 <h1>Another main heading?</h1> <!-- Multiple h1s -->
 ```
 
-**ہیڈنگز کے بہترین طریقے:**
-- **ایک صفحے پر ایک `<h1>`**: عام طور پر آپ کا مرکزی صفحہ عنوان یا بنیادی مواد کی ہیڈنگ
+**ہیڈنگ بہترین طریقے:**
+- **ایک `<h1>` فی صفحہ**: عام طور پر آپ کا مرکزی صفحہ عنوان یا بنیادی مواد ہیڈنگ
 - **منطقی ترقی**: کبھی بھی سطحیں نہ چھوڑیں (h1 → h2 → h3، نہ کہ h1 → h3)
-- **وضاحتی مواد**: ہیڈنگز کو سیاق و سباق سے باہر پڑھنے پر معنی خیز بنائیں
+- **وضاحتی مواد**: ہیڈنگز کو معنی خیز بنائیں جب سیاق و سباق سے باہر پڑھی جائیں
 - **CSS کے ساتھ بصری اسٹائلنگ**: ظاہری شکل کے لیے CSS استعمال کریں، ساخت کے لیے HTML سطحیں
 
-**اسکرین ریڈر نیویگیشن کے اعداد و شمار:**
+**اسکرین ریڈر نیویگیشن کے اعدادوشمار:**
 - 68% اسکرین ریڈر صارفین ہیڈنگز کے ذریعے نیویگیٹ کرتے ہیں ([WebAIM سروے](https://webaim.org/projects/screenreadersurvey9/#finding))
-- صارفین منطقی ہیڈنگ آؤٹ لائن کی توقع کرتے ہیں
-- ہیڈنگز صفحہ کی ساخت کو سمجھنے کا تیز ترین طریقہ فراہم کرتی ہیں
+- صارفین منطقی ہیڈنگ خاکہ تلاش کرنے کی توقع کرتے ہیں
+- ہیڈنگز صفحہ کی ساخت کو سمجھنے کا سب سے تیز طریقہ فراہم کرتی ہیں
 
-> 💡 **پرو ٹپ**: "HeadingsMap" جیسے براؤزر ایکسٹینشنز استعمال کریں تاکہ اپنی ہیڈنگ ساخت کو بصری طور پر دیکھ سکیں۔ یہ ایک اچھی طرح سے منظم مواد کی فہرست کی طرح پڑھنی چاہیے۔
+> 💡 **ماہرانہ ٹپ**: "HeadingsMap" جیسے براؤزر ایکسٹینشنز استعمال کریں تاکہ اپنی ہیڈنگ ساخت کو بصری طور پر دیکھ سکیں۔ یہ ایک اچھی طرح سے منظم مواد کی فہرست کی طرح پڑھنی چاہیے۔
 
-✅ **اپنی ہیڈنگ ساخت کا ٹیسٹ کریں**: اسکرین ریڈر کی ہیڈنگ نیویگیشن (NVDA میں H کلید) استعمال کریں تاکہ اپنی ہیڈنگز کے ذریعے چھلانگ لگائیں۔ کیا ترقی آپ کے مواد کی کہانی کو منطقی طور پر بیان کرتی ہے؟
+✅ **اپنی ہیڈنگ ساخت کی جانچ کریں**: اسکرین ریڈر کی ہیڈنگ نیویگیشن (NVDA میں H کلید) استعمال کریں تاکہ اپنی ہیڈنگز کے ذریعے چھلانگ لگائیں۔ کیا ترقی آپ کے مواد کی کہانی منطقی طور پر بتاتی ہے؟
 
-### بصری رسائی کی جدید تکنیکیں
+### جدید بصری رسائی کی تکنیکیں
 
-تضاد اور رنگ کی بنیادی باتوں سے آگے، کچھ نفیس تکنیکیں ہیں جو واقعی جامع بصری تجربات تخلیق کرنے میں مدد کرتی ہیں۔ یہ طریقے یقینی بناتے ہیں کہ آپ کا مواد مختلف دیکھنے کے حالات اور معاون ٹیکنالوجیز کے ساتھ کام کرتا ہے۔
+کنٹراسٹ اور رنگ کے بنیادی اصولوں سے آگے، ایسے نفیس طریقے ہیں جو واقعی جامع بصری تجربات بنانے میں مدد کرتے ہیں۔ یہ طریقے مختلف دیکھنے کے حالات اور معاون ٹیکنالوجیز کے ذریعے آپ کے مواد کو کام کرنے کو یقینی بناتے ہیں۔
 
 **ضروری بصری مواصلات کی حکمت عملی:**
 
 - **ملٹی موڈل فیڈبیک**: بصری، متنی، اور کبھی کبھار آڈیو اشارے کو یکجا کریں
-- **پروگریسو ڈسکلوژر**: معلومات کو ہضم کرنے کے قابل حصوں میں پیش کریں
+- **پروگریسو ڈسکلوزر**: معلومات کو ہضم کرنے کے قابل حصوں میں پیش کریں
 - **مستقل انٹرایکشن پیٹرنز**: مانوس UI کنونشنز استعمال کریں
 - **جوابی ٹائپوگرافی**: مختلف ڈیوائسز پر متن کو مناسب طور پر اسکیل کریں
 - **لوڈنگ اور ایرر اسٹیٹس**: تمام صارف اعمال کے لیے واضح فیڈبیک فراہم کریں
 
-**رسائی کو بہتر بنانے کے لیے CSS کی سہولیات:**
+**بہتر رسائی کے لیے CSS یوٹیلیٹیز:**
 
 ```css
 /* Screen reader only text - visually hidden but accessible */
@@ -490,17 +650,17 @@ button:focus:not(:focus-visible) {
 
 > 🎯 **رسائی کا پیٹرن**: "اسکیپ لنک" کی بورڈ صارفین کے لیے ضروری ہے۔ یہ آپ کے صفحے پر پہلا فوکس ایبل عنصر ہونا چاہیے اور براہ راست مرکزی مواد کے علاقے پر چھلانگ لگانا چاہیے۔
 
-✅ **اسکیپ نیویگیشن نافذ کریں**: اپنے صفحات میں اسکیپ لنکس شامل کریں اور انہیں ٹیسٹ کریں کہ جب صفحہ لوڈ ہو تو فوراً ٹیب دبائیں۔ انہیں ظاہر ہونا چاہیے اور آپ کو مرکزی مواد پر چھلانگ لگانے کی اجازت دینی چاہیے۔
+✅ **اسکیپ نیویگیشن نافذ کریں**: اپنے صفحات میں اسکیپ لنکس شامل کریں اور انہیں ٹیسٹ کریں، جیسے ہی صفحہ لوڈ ہو، ٹیب دبائیں۔ انہیں ظاہر ہونا چاہیے اور آپ کو مرکزی مواد پر چھلانگ لگانے کی اجازت دینی چاہیے۔
 
 ## معنی خیز لنک ٹیکسٹ تیار کرنا
 
-لنکس بنیادی طور پر ویب کے ہائی ویز ہیں، لیکن خراب لکھا ہوا لنک ٹیکسٹ ایسا ہے جیسے روڈ سائنز پر صرف "جگہ" لکھا ہو بجائے "ڈاؤن ٹاؤن شکاگو"۔ بہت مددگار نہیں، ٹھیک؟
+لنکس بنیادی طور پر ویب کے ہائی ویز ہیں، لیکن خراب لکھا ہوا لنک ٹیکسٹ ایسا ہے جیسے روڈ سائنز پر صرف "جگہ" لکھا ہو بجائے "ڈاؤن ٹاؤن شکاگو"۔ زیادہ مددگار نہیں، ٹھیک ہے؟
 
-یہاں ایک چیز ہے جو مجھے پہلی بار جان کر حیران کر گئی: اسکرین ریڈرز صفحے سے تمام لنکس نکال سکتے ہیں اور انہیں ایک بڑی فہرست کے طور پر دکھا سکتے ہیں۔ تصور کریں کہ کوئی آپ کو آپ کے صفحے پر موجود ہر لنک کی ڈائریکٹری دے۔ کیا ہر ایک اپنے طور پر معنی رکھتا ہے؟ یہ وہ ٹیسٹ ہے جسے آپ کے لنک ٹیکسٹ کو پاس کرنا چاہیے!
+یہاں ایک چیز ہے جو مجھے پہلی بار سیکھنے پر حیران کر گئی: اسکرین ریڈرز صفحے سے تمام لنکس نکال سکتے ہیں اور انہیں ایک بڑی فہرست کے طور پر دکھا سکتے ہیں۔ تصور کریں کہ اگر کوئی آپ کو آپ کے صفحے پر موجود ہر لنک کی ڈائریکٹری دے۔ کیا ہر ایک اپنے طور پر معنی رکھتا ہے؟ یہی وہ ٹیسٹ ہے جسے آپ کے لنک ٹیکسٹ کو پاس کرنا چاہیے!
 
-### لنک نیویگیشن کے پیٹرنز کو سمجھنا
+### لنک نیویگیشن پیٹرنز کو سمجھنا
 
-اسکرین ریڈرز لنک نیویگیشن کی طاقتور خصوصیات پیش کرتے ہیں جو اچھی طرح سے لکھے گئے لنک ٹیکسٹ پر انحصار کرتے ہیں:
+اسکرین ریڈرز طاقتور لنک نیویگیشن فیچرز پیش کرتے ہیں جو اچھی طرح سے لکھے گئے لنک ٹیکسٹ پر انحصار کرتے ہیں:
 
 **لنک نیویگیشن کے طریقے:**
 - **تسلسل کے ساتھ پڑھنا**: لنکس کو مواد کے بہاؤ کے حصے کے طور پر سیاق و سباق میں پڑھا جاتا ہے
@@ -509,20 +669,20 @@ button:focus:not(:focus-visible) {
 - **تلاش کی فعالیت**: جزوی متن ٹائپ کرکے مخصوص لنکس تلاش کریں
 
 **کیوں سیاق و سباق اہم ہے:**
-جب اسکرین ریڈر صارفین لنک فہرست تیار کرتے ہیں، تو وہ کچھ اس طرح دیکھتے ہیں:
+جب اسکرین ریڈر صارفین لنک فہرست بناتے ہیں، تو وہ کچھ اس طرح دیکھتے ہیں:
 - "رپورٹ ڈاؤن لوڈ کریں"
 - "مزید جانیں"
 - "یہاں کلک کریں"
 - "پرائیویسی پالیسی"
 - "یہاں کلک کریں"
 
-ان میں سے صرف دو لنکس سیاق و سباق سے باہر پڑھنے پر مفید معلومات فراہم کرتے ہیں!
+ان میں سے صرف دو لنکس سیاق و سباق سے باہر پڑھے جانے پر مفید معلومات فراہم کرتے ہیں!
 
 > 📊 **صارف اثر**: اسکرین ریڈر صارفین لنک فہرستوں کو جلدی سے صفحہ مواد کو سمجھنے کے لیے اسکین کرتے ہیں۔ عمومی لنک ٹیکسٹ انہیں ہر لنک کے سیاق و سباق پر واپس نیویگیٹ کرنے پر مجبور کرتا ہے، ان کے براؤزنگ کے تجربے کو نمایاں طور پر سست کر دیتا ہے۔
 
 ### عام لنک ٹیکسٹ کی غلطیوں سے بچنا
 
-سمجھنا کہ کیا کام نہیں کرتا آپ کو موجودہ مواد میں رسائی کے مسائل کو پہچاننے اور ٹھیک کرنے میں مدد دیتا ہے۔
+سمجھنا کہ کیا کام نہیں کرتا آپ کو موجودہ مواد میں رسائی کے مسائل کو پہچاننے اور ٹھیک کرنے میں مدد کرتا ہے۔
 
 **❌ عمومی لنک ٹیکسٹ جو کوئی سیاق و سباق فراہم نہیں کرتا:**
 
@@ -552,13 +712,13 @@ button:focus:not(:focus-visible) {
 
 **کیوں یہ پیٹرنز ناکام ہوتے ہیں:**
 - **"یہاں کلک کریں"** صارفین کو منزل کے بارے میں کچھ نہیں بتاتا
-- **"مزید پڑھیں"** بار بار استعمال ہونے سے الجھن پیدا ہوتی ہے
+- **"مزید پڑھیں"** متعدد بار دہرایا گیا الجھن پیدا کرتا ہے
 - **خام URLs** اسکرین ریڈرز کے لیے واضح طور پر تلفظ کرنا مشکل ہیں
-- **ایک لفظی** جیسے "جائیں" یا "دیکھیں" وضاحتی سیاق و سباق سے محروم ہیں
+- **واحد الفاظ** جیسے "جائیں" یا "دیکھیں" وضاحتی سیاق و سباق سے محروم ہیں
 
 ### بہترین لنک ٹیکسٹ لکھنا
 
-وضاحتی لنک ٹیکسٹ ہر کسی کے لیے فائدہ مند ہے—نظر رکھنے والے صارفین لنکس کو جلدی اسکین کر سکتے ہیں، اور اسکرین ریڈر صارفین فوری طور پر منزلوں کو سمجھ سکتے ہیں۔
+وضاحتی لنک ٹیکسٹ سب کے لیے فائدہ مند ہے—نظر رکھنے والے صارفین لنکس کو جلدی سے اسکین کر سکتے ہیں، اور اسکرین ریڈر صارفین فوری طور پر منزلوں کو سمجھ سکتے ہیں۔
 
 **✅ واضح، وضاحتی لنک ٹیکسٹ کی مثالیں:**
 
@@ -589,14 +749,14 @@ button:focus:not(:focus-visible) {
 
 **لنک ٹیکسٹ کے بہترین طریقے:**
 - **مخصوص بنیں**: "چوتھائی مالیاتی رپورٹ ڈاؤن لوڈ کریں" بمقابلہ "ڈاؤن لوڈ کریں"
-- **فائل کی قسم اور سائز شامل کریں**: "(PDF, 1.2MB)" ڈاؤن لوڈ کے قابل فائلوں کے لیے
+- **فائل کی قسم اور سائز شامل کریں**: "(PDF، 1.2MB)" ڈاؤن لوڈ کے قابل فائلوں کے لیے
 - **ذکر کریں کہ لنکس بیرونی طور پر کھلتے ہیں**: "(نئی ونڈو میں کھلتا ہے)" جب مناسب ہو
 - **فعال زبان استعمال کریں**: "ہم سے رابطہ کریں" بمقابلہ "رابطہ صفحہ"
 - **مختصر رکھیں**: ممکن ہو تو 2-8 الفاظ کا مقصد رکھیں
 
-### لنک رسائی کے جدید پیٹرنز
+### جدید لنک رسائی کے پیٹرنز
 
-کبھی کبھی بصری ڈیزائن کی حدود یا تکنیکی ضروریات کو خاص حل کی ضرورت ہوتی ہے۔ یہاں عام چیلنجنگ منظرناموں کے لیے نفیس تکنیکیں ہیں:
+کبھی کبھی بصری ڈیزائن کی پابندیاں یا تکنیکی ضروریات خاص حل کی ضرورت ہوتی ہیں۔ یہاں عام چیلنجنگ منظرناموں کے لیے نفیس تکنیکیں ہیں:
 
 **بہتر سیاق و سباق کے لیے ARIA کا استعمال:**
 
@@ -667,31 +827,135 @@ button:focus:not(:focus-visible) {
 }
 ```
 
-> ⚠️ **اہم**: جب `target="_blank"` استعمال کریں، ہمیشہ صارفین کو مطلع کریں کہ لنک نئی ونڈو یا ٹیب میں کھلتا ہے۔ غیر متوقع نیویگیشن تبدیلیاں الجھن پیدا کر سکتی ہیں۔
+> ⚠️ **اہم**: جب `target="_blank"` استعمال کریں، ہمیشہ صارفین کو
+**ARIA کی پانچ اقسام:**
 
-✅ **اپنے لنک کے سیاق و سباق کا ٹیسٹ کریں**: اپنے براؤزر کے ڈویلپر ٹولز استعمال کریں تاکہ اپنے صفحے پر موجود تمام لنکس کی فہرست تیار کریں۔ کیا آپ ہر لنک کے مقصد کو کسی بھی ارد گرد کے سیاق و سباق کے بغیر سمجھ سکتے ہیں؟
+1. **رولز**: یہ عنصر کیا ہے؟ (`button`, `tab`, `dialog`)
+2. **پراپرٹیز**: اس کی خصوصیات کیا ہیں؟ (`aria-required`, `aria-haspopup`)
+3. **اسٹیٹس**: اس کی موجودہ حالت کیا ہے؟ (`aria-expanded`, `aria-checked`)
+4. **لینڈمارکس**: صفحے کی ساخت میں یہ کہاں ہے؟ (`banner`, `navigation`, `main`)
+5. **لائیو ریجنز**: تبدیلیوں کو کیسے اعلان کیا جائے؟ (`aria-live`, `aria-atomic`)
 
-## ARIA: HTML رسائی کو سپرچارج کرنا
+### جدید ویب ایپس کے لیے ضروری ARIA پیٹرنز
 
-[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) آپ کے پیچیدہ ویب ایپلیکیشنز اور معاون ٹیکنالوجیز کے درمیان ایک عالمی مترجم رکھنے جیسا ہے۔ جب HTML اکیلا آپ کے انٹرایکٹو اجزاء کے تمام کاموں کو ظاہر نہیں کر سکتا، تو ARIA ان خلا کو پر کرنے کے لیے قدم اٹھاتا ہے۔
+یہ پیٹرنز انٹرایکٹو ویب ایپلیکیشنز میں عام طور پر پیش آنے والے ایکسیسبلٹی چیلنجز کو حل کرتے ہیں:
 
-میں ARIA کو آپ کے HTML میں مددگار تشریحات شامل کرنے کے طور پر سوچتا ہوں—کسی پلے اسکرپٹ میں اسٹیج کی ہدایات کی طرح جو اداکاروں کو ان کے کرداروں اور تعلقات کو سمجھنے میں مدد دیتی ہیں۔
+**عنصر کو نام دینا اور بیان کرنا:**
 
-**ARIA کے بارے میں سب سے اہم اصول یہ ہے**: ہمیشہ پہلے سیمینٹک HTML استعمال کریں، پھر ARIA کو بہتر بنانے کے لیے شامل کریں۔ ARIA کو مصالحے کے طور پر سوچیں، نہ کہ مرکزی ڈش۔ یہ آپ کے HTML ڈھانچے کو واضح اور بہتر بنانا چاہیے، کبھی بھی اسے تبدیل نہیں کرنا چاہیے۔ پہلے وہ بنیاد درست کریں!
+```html
+<!-- aria-label: Provides accessible name when visible text isn't sufficient -->
+<button aria-label="Close newsletter subscription dialog">×</button>
+
+<!-- aria-labelledby: References existing text as the accessible name -->
+<section aria-labelledby="news-heading">
+  <h2 id="news-heading">Latest News</h2>
+  <!-- news content -->
+</section>
+
+<!-- aria-describedby: Links to additional descriptive text -->
+<input type="password" 
+       aria-describedby="pwd-requirements pwd-strength"
+       required>
+<div id="pwd-requirements">
+  Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
+</div>
+<div id="pwd-strength" aria-live="polite">
+  <!-- Dynamic password strength indicator -->
+</div>
+```
+
+**ڈائنامک مواد کے لیے لائیو ریجنز:**
 
-### ARIA کے نفاذ کی حکمت عملی
+```html
+<!-- Polite announcements (don't interrupt current speech) -->
+<div aria-live="polite" id="status-updates">
+  <!-- Status messages appear here -->
+</div>
 
-ARIA طاقتور ہے، لیکن طاقت کے ساتھ ذمہ داری آتی ہے۔ غلط ARIA رسائی کو بغیر ARIA کے مقابلے میں بدتر بنا سکتا ہے۔ یہاں کب اور کیسے اسے مؤثر طریقے سے استعمال کرنا ہے:
+<!-- Assertive announcements (interrupt and announce immediately) -->
+<div aria-live="assertive" id="urgent-alerts">
+  <!-- Error messages and critical alerts -->
+</div>
 
-**✅ ARIA استعمال کریں جب:**
-- حسب ضرورت انٹرایکٹو ویجٹس (اکارڈینز، ٹیبز، کیروسلز) بنانا
-- متحرک مواد بنانا جو صفحہ دوبارہ لوڈ کیے بغیر تبدیل ہوتا ہے
-- پیچیدہ UI تعلقات کے لیے اضافی سیاق و سباق فراہم کرنا
-- لوڈنگ کی حالتوں یا لائیو مواد کی اپڈیٹس کی نشاندہی کرنا
-- حسب ضرورت کنٹرولز کے ساتھ ایپ جیسی انٹرفیسز بنانا
+<!-- Loading states with live regions -->
+<button id="submit-btn" aria-describedby="loading-status">
+  Submit Application
+</button>
+<div id="loading-status" aria-live="polite" aria-atomic="true">
+  <!-- "Processing your application..." appears here -->
+</div>
+```
 
-**❌ ARIA سے
-5. **سادہ شروع کریں**: پیچیدہ ARIA implementations میں غلطیوں کا امکان زیادہ ہوتا ہے
+**انٹرایکٹو ویجیٹ کی مثال (اکارڈین):**
+
+```html
+<div class="accordion">
+  <h3>
+    <button aria-expanded="false" 
+            aria-controls="panel-1" 
+            id="accordion-trigger-1"
+            class="accordion-trigger">
+      Accessibility Guidelines
+    </button>
+  </h3>
+  <div id="panel-1" 
+       role="region"
+       aria-labelledby="accordion-trigger-1" 
+       hidden>
+    <p>WCAG 2.1 provides comprehensive guidelines...</p>
+  </div>
+</div>
+```
+
+```javascript
+// JavaScript to manage accordion state
+function toggleAccordion(trigger) {
+  const panel = document.getElementById(trigger.getAttribute('aria-controls'));
+  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+  
+  // Toggle states
+  trigger.setAttribute('aria-expanded', !isExpanded);
+  panel.hidden = isExpanded;
+  
+  // Announce change to screen readers
+  const status = document.getElementById('status-updates');
+  status.textContent = isExpanded ? 'Section collapsed' : 'Section expanded';
+}
+```
+
+### ARIA کے نفاذ کے بہترین طریقے
+
+ARIA طاقتور ہے لیکن اس کے نفاذ میں احتیاط کی ضرورت ہے۔ ان ہدایات پر عمل کرنے سے یہ یقینی بنایا جا سکتا ہے کہ آپ کا ARIA ایکسیسبلٹی کو بہتر بنائے نہ کہ اسے نقصان پہنچائے:
+
+**🛡️ بنیادی اصول:**
+
+```mermaid
+flowchart TD
+    A[🚀 Start with semantic HTML] --> B{Does HTML provide needed semantics?}
+    B -->|Yes| C[✅ Use HTML only]
+    B -->|No| D[Consider ARIA enhancement]
+    D --> E{Can you achieve it with simpler means?}
+    E -->|Yes| F[🔄 Simplify approach]
+    E -->|No| G[📝 Implement ARIA carefully]
+    G --> H[🧪 Test with real AT]
+    H --> I{Works as expected?}
+    I -->|No| J[🔧 Debug and fix]
+    I -->|Yes| K[✅ Success!]
+    J --> H
+    F --> C
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style K fill:#e8f5e8
+    style G fill:#fff3e0
+    style H fill:#f3e5f5
+```
+
+1. **سب سے پہلے سیمینٹک HTML**: ہمیشہ `<button>` کو `<div role="button">` پر ترجیح دیں
+2. **سیمینٹکس کو خراب نہ کریں**: موجودہ HTML معنی کو کبھی اووررائیڈ نہ کریں (جیسے `<h1 role="button">` سے گریز کریں)
+3. **کی بورڈ ایکسیسبلٹی برقرار رکھیں**: تمام انٹرایکٹو ARIA عناصر کو مکمل طور پر کی بورڈ ایکسیسبل ہونا چاہیے
+4. **حقیقی صارفین کے ساتھ ٹیسٹ کریں**: مختلف اسسٹیو ٹیکنالوجیز میں ARIA سپورٹ کافی مختلف ہوتی ہے
+5. **سادہ شروع کریں**: پیچیدہ ARIA نفاذ میں غلطیوں کا امکان زیادہ ہوتا ہے
 
 **🔍 ٹیسٹنگ ورک فلو:**
 
@@ -707,41 +971,58 @@ graph TD
     G --> B
 ```
 
-**🚫 عام ARIA غلطیاں جن سے بچنا چاہیے:**
+**🚫 عام ARIA غلطیوں سے بچیں:**
 
-- **متضاد معلومات**: HTML semantics کے ساتھ تضاد نہ کریں
-- **زیادہ لیبلنگ**: بہت زیادہ ARIA معلومات صارفین کو الجھا دیتی ہیں
-- **جامد ARIA**: مواد میں تبدیلی کے وقت ARIA states کو اپ ڈیٹ کرنا بھول جانا
-- **غیر آزمودہ implementations**: ARIA جو نظریہ میں کام کرتی ہے لیکن عملی طور پر ناکام ہو جاتی ہے
-- **کی بورڈ سپورٹ کی کمی**: ARIA roles بغیر متعلقہ کی بورڈ interactions کے
+- **متضاد معلومات**: HTML سیمینٹکس سے تضاد نہ کریں
+- **زیادہ لیبلنگ**: بہت زیادہ ARIA معلومات صارفین کو مغلوب کر دیتی ہیں
+- **جامد ARIA**: مواد میں تبدیلی کے وقت ARIA اسٹیٹس کو اپ ڈیٹ کرنا بھول جانا
+- **غیر آزمودہ نفاذ**: ARIA جو نظریہ میں کام کرتا ہے لیکن عملی طور پر ناکام ہوتا ہے
+- **کی بورڈ سپورٹ کی کمی**: ARIA رولز بغیر متعلقہ کی بورڈ انٹریکشن کے
 
-> 💡 **ٹیسٹنگ وسائل**: [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) جیسے ٹولز کا استعمال کریں ARIA validation کے لیے، لیکن مکمل تجربے کے لیے حقیقی screen readers کے ساتھ ہمیشہ ٹیسٹ کریں۔
+> 💡 **ٹیسٹنگ وسائل**: [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) جیسے ٹولز کا استعمال کریں ARIA کی خودکار توثیق کے لیے، لیکن مکمل تجربے کے لیے ہمیشہ حقیقی اسکرین ریڈرز کے ساتھ ٹیسٹ کریں۔
 
-✅ **ماہرین سے سیکھیں**: [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) کا مطالعہ کریں پیچیدہ interactive widgets کے آزمودہ patterns اور implementations کے لیے۔
+### 🎭 **ARIA مہارت چیک: پیچیدہ انٹریکشنز کے لیے تیار ہیں؟**
 
-## تصاویر اور میڈیا کو قابل رسائی بنانا
+**اپنے ARIA اعتماد کا اندازہ لگائیں:**
+- آپ کب ARIA کو سیمینٹک HTML پر ترجیح دیں گے؟ (اشارہ: تقریباً کبھی نہیں!)
+- کیا آپ وضاحت کر سکتے ہیں کہ `<div role="button">` عام طور پر `<button>` سے کیوں خراب ہے؟
+- ARIA ٹیسٹنگ کے بارے میں سب سے اہم بات کیا یاد رکھنی ہے؟
 
-بصری اور آڈیو مواد جدید ویب تجربات کا ایک اہم حصہ ہیں، لیکن اگر انہیں سوچ سمجھ کر نافذ نہ کیا جائے تو یہ رکاوٹیں پیدا کر سکتے ہیں۔ مقصد یہ ہے کہ آپ کے میڈیا کی معلومات اور جذباتی اثر ہر صارف تک پہنچے۔ ایک بار جب آپ اسے سمجھ لیں، تو یہ آپ کی عادت بن جائے گی۔
+```mermaid
+pie title "Common ARIA Usage Patterns"
+    "Labels & Descriptions" : 40
+    "Live Regions" : 25
+    "Widget States" : 20
+    "Complex Controls" : 15
+```
 
-مختلف قسم کے میڈیا کو مختلف accessibility approaches کی ضرورت ہوتی ہے۔ یہ بالکل کھانے پکانے کی طرح ہے—آپ نازک مچھلی کو وہی طریقہ نہیں دیں گے جو آپ ایک مضبوط اسٹیک کو دیں گے۔ ان فرقوں کو سمجھنا آپ کو ہر صورتحال کے لیے صحیح حل منتخب کرنے میں مدد دیتا ہے۔
+> **اہم بصیرت**: زیادہ تر ARIA استعمال عناصر کو لیبل کرنے اور بیان کرنے کے لیے ہوتا ہے۔ پیچیدہ ویجیٹ پیٹرنز اتنے عام نہیں ہیں جتنا آپ سوچ سکتے ہیں!
 
-### تصاویر کی قابل رسائی حکمت عملی
+✅ **ماہرین سے سیکھیں**: [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) کا مطالعہ کریں پیچیدہ انٹرایکٹو ویجیٹس کے آزمودہ پیٹرنز اور نفاذ کے لیے۔
 
-آپ کی ویب سائٹ پر ہر تصویر کا ایک مقصد ہوتا ہے۔ اس مقصد کو سمجھنا آپ کو بہتر alternative text لکھنے اور زیادہ جامع تجربات تخلیق کرنے میں مدد دیتا ہے۔
+## تصاویر اور میڈیا کو ایکسیسبل بنانا
 
-**تصاویر کی چار اقسام اور ان کے alt text کی حکمت عملی:**
+بصری اور آڈیو مواد جدید ویب تجربات کا لازمی حصہ ہیں، لیکن اگر ان کا نفاذ سوچ سمجھ کر نہ کیا جائے تو یہ رکاوٹیں پیدا کر سکتے ہیں۔ مقصد یہ ہے کہ آپ کے میڈیا کی معلومات اور جذباتی اثر ہر صارف تک پہنچے۔ ایک بار جب آپ اسے سمجھ لیں، تو یہ آپ کی عادت بن جاتا ہے۔
+
+مختلف قسم کے میڈیا کو مختلف ایکسیسبلٹی طریقوں کی ضرورت ہوتی ہے۔ یہ بالکل ایسے ہی ہے جیسے کھانا پکانا—آپ نازک مچھلی کو مضبوط اسٹیک کی طرح نہیں پکائیں گے۔ ان فرقوں کو سمجھنا آپ کو ہر صورتحال کے لیے صحیح حل منتخب کرنے میں مدد دیتا ہے۔
+
+### اسٹریٹجک تصویر کی ایکسیسبلٹی
+
+آپ کی ویب سائٹ پر ہر تصویر کا ایک مقصد ہوتا ہے۔ اس مقصد کو سمجھنا آپ کو بہتر متبادل متن لکھنے اور زیادہ شامل تجربات تخلیق کرنے میں مدد دیتا ہے۔
+
+**تصاویر کی چار اقسام اور ان کے alt متن کی حکمت عملی:**
 
 **معلوماتی تصاویر** - اہم معلومات فراہم کرتی ہیں:
 ```html
 <img src="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.ur.png" alt="Sales increased 25% from Q1 to Q2 2024">
 ```
 
-**سجاوٹی تصاویر** - صرف بصری ہیں اور کوئی معلوماتی قدر نہیں رکھتیں:
+**سجاوٹی تصاویر** - صرف بصری ہیں اور کوئی معلوماتی قدر نہیں رکھتی:
 ```html
 <img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d57fb6357835906c16938df3d5651c1314c196c3b1c52df98.ur.png" alt="" role="presentation">
 ```
 
-**فعالی تصاویر** - بٹن یا کنٹرول کے طور پر کام کرتی ہیں:
+**فنکشنل تصاویر** - بٹن یا کنٹرول کے طور پر کام کرتی ہیں:
 ```html
 <button>
   <img src="search-icon.svg" alt="Search">
@@ -756,7 +1037,7 @@ graph TD
 </div>
 ```
 
-### ویڈیو اور آڈیو کی قابل رسائی
+### ویڈیو اور آڈیو کی ایکسیسبلٹی
 
 **ویڈیو کے تقاضے:**
 - **کیپشنز**: بولے گئے مواد اور صوتی اثرات کا متن ورژن
@@ -773,9 +1054,9 @@ graph TD
 
 **آڈیو کے تقاضے:**
 - **ٹرانسکرپٹس**: تمام بولے گئے مواد کا متن ورژن
-- **بصری اشارے**: صرف آڈیو مواد کے لیے، بصری cues فراہم کریں
+- **بصری اشارے**: صرف آڈیو مواد کے لیے بصری اشارے فراہم کریں
 
-### جدید تصویری تکنیکیں
+### جدید تصویر کی تکنیکیں
 
 **سجاوٹی تصاویر کے لیے CSS کا استعمال:**
 ```css
@@ -785,7 +1066,7 @@ graph TD
 }
 ```
 
-**قابل رسائی کے ساتھ responsive تصاویر:**
+**ایکسیسبلٹی کے ساتھ ریسپانسیو تصاویر:**
 ```html
 <picture>
   <source media="(min-width: 800px)" srcset="large-chart.png">
@@ -794,25 +1075,44 @@ graph TD
 </picture>
 ```
 
-✅ **تصویری قابل رسائی کی جانچ کریں**: ایک screen reader کا استعمال کرتے ہوئے تصاویر کے ساتھ ایک صفحہ پر نیویگیٹ کریں۔ کیا آپ کو مواد کو سمجھنے کے لیے کافی معلومات مل رہی ہیں؟
+✅ **تصویر کی ایکسیسبلٹی کا ٹیسٹ کریں**: اسکرین ریڈر کا استعمال کرتے ہوئے تصاویر کے ساتھ صفحہ پر نیویگیٹ کریں۔ کیا آپ کو مواد کو سمجھنے کے لیے کافی معلومات مل رہی ہیں؟
 
 ## کی بورڈ نیویگیشن اور فوکس مینجمنٹ
 
-بہت سے صارفین صرف اپنے کی بورڈ کے ساتھ ویب پر نیویگیٹ کرتے ہیں۔ اس میں وہ لوگ شامل ہیں جنہیں موٹر معذوری ہے، وہ پاور صارفین جو کی بورڈ کو ماؤس سے زیادہ تیز سمجھتے ہیں، اور وہ لوگ جن کا ماؤس کام کرنا بند کر چکا ہے۔ یہ یقینی بنانا کہ آپ کی سائٹ کی بورڈ ان پٹ کے ساتھ اچھی طرح کام کرتی ہے ضروری ہے اور اکثر ہر کسی کے لیے آپ کی سائٹ کو زیادہ موثر بناتی ہے۔
+بہت سے صارفین ویب کو مکمل طور پر اپنے کی بورڈز کے ساتھ نیویگیٹ کرتے ہیں۔ اس میں وہ لوگ شامل ہیں جنہیں موٹر معذوری ہے، پاور صارفین جو کی بورڈز کو ماؤس سے زیادہ تیز سمجھتے ہیں، اور وہ لوگ جن کا ماؤس کام کرنا بند کر چکا ہے۔ یہ یقینی بنانا کہ آپ کی سائٹ کی بورڈ ان پٹ کے ساتھ اچھی طرح کام کرتی ہے ضروری ہے اور اکثر ہر کسی کے لیے آپ کی سائٹ کو زیادہ موثر بناتی ہے۔
+
+```mermaid
+flowchart LR
+    A[⌨️ Keyboard Navigation] --> B[Tab Order]
+    A --> C[Focus Indicators]
+    A --> D[Skip Links]
+    A --> E[Keyboard Shortcuts]
+    
+    B --> B1[Logical sequence<br/>All interactive elements<br/>No tab traps]
+    C --> C1[Visible outlines<br/>High contrast<br/>Clear boundaries]
+    D --> D1[Skip to main<br/>Skip to nav<br/>Bypass repetitive]
+    E --> E1[Escape to close<br/>Enter to activate<br/>Arrows in groups]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
 ### ضروری کی بورڈ نیویگیشن پیٹرنز
 
-**معیاری کی بورڈ interactions:**
-- **Tab**: interactive عناصر کے ذریعے فوکس کو آگے بڑھائیں
+**معیاری کی بورڈ انٹریکشنز:**
+- **Tab**: انٹرایکٹو عناصر کے ذریعے فوکس کو آگے بڑھائیں
 - **Shift + Tab**: فوکس کو پیچھے لے جائیں
 - **Enter**: بٹن اور لنکس کو فعال کریں
 - **Space**: بٹن کو فعال کریں، چیک باکسز کو چیک کریں
-- **Arrow keys**: component گروپس کے اندر نیویگیٹ کریں (radio buttons، menus)
-- **Escape**: modals، dropdowns کو بند کریں یا آپریشنز منسوخ کریں
+- **Arrow keys**: کمپوننٹ گروپس کے اندر نیویگیٹ کریں (ریڈیو بٹن، مینو)
+- **Escape**: موڈلز، ڈراپ ڈاؤنز کو بند کریں یا آپریشنز منسوخ کریں
 
 ### فوکس مینجمنٹ کے بہترین طریقے
 
-**مرئی فوکس indicators:**
+**مرئی فوکس اشارے:**
 ```css
 /* Ensure focus is always visible */
 button:focus-visible {
@@ -826,7 +1126,7 @@ button:focus-visible {
 }
 ```
 
-**موثر نیویگیشن کے لیے skip links:**
+**موثر نیویگیشن کے لیے اسکیپ لنکس:**
 ```html
 <a href="#main-content" class="skip-link">Skip to main content</a>
 <a href="#navigation" class="skip-link">Skip to navigation</a>
@@ -839,7 +1139,7 @@ button:focus-visible {
 </main>
 ```
 
-**مناسب tab ترتیب:**
+**مناسب ٹیب آرڈر:**
 ```html
 <!-- Use semantic HTML for natural tab order -->
 <form>
@@ -853,9 +1153,9 @@ button:focus-visible {
 </form>
 ```
 
-### Modals میں فوکس کو محدود کرنا
+### موڈلز میں فوکس کو محدود کرنا
 
-جب modal dialogs کھولیں، فوکس کو modal کے اندر محدود ہونا چاہیے:
+جب موڈل ڈائیلاگ کھولیں، فوکس کو موڈل کے اندر محدود ہونا چاہیے:
 
 ```javascript
 // Modern focus trap implementation
@@ -888,13 +1188,13 @@ function trapFocus(element) {
 }
 ```
 
-✅ **کی بورڈ نیویگیشن کی جانچ کریں**: صرف Tab key کا استعمال کرتے ہوئے اپنی ویب سائٹ پر نیویگیٹ کرنے کی کوشش کریں۔ کیا آپ تمام interactive عناصر تک پہنچ سکتے ہیں؟ کیا فوکس ترتیب منطقی ہے؟ کیا فوکس indicators واضح طور پر نظر آ رہے ہیں؟
+✅ **کی بورڈ نیویگیشن کا ٹیسٹ کریں**: صرف Tab کلید کا استعمال کرتے ہوئے اپنی ویب سائٹ پر نیویگیٹ کرنے کی کوشش کریں۔ کیا آپ تمام انٹرایکٹو عناصر تک پہنچ سکتے ہیں؟ کیا فوکس آرڈر منطقی ہے؟ کیا فوکس اشارے واضح طور پر نظر آ رہے ہیں؟
 
-## فارم کی قابل رسائی
+## فارم کی ایکسیسبلٹی
 
-فارمز صارف کے تعامل کے لیے اہم ہیں اور انہیں قابل رسائی بنانے کے لیے خاص توجہ کی ضرورت ہوتی ہے۔
+فارمز صارف کے تعامل کے لیے اہم ہیں اور انہیں ایکسیسبلٹی پر خصوصی توجہ کی ضرورت ہوتی ہے۔
 
-### لیبل اور فارم کنٹرول کا تعلق
+### لیبل اور فارم کنٹرول ایسوسی ایشن
 
 **ہر فارم کنٹرول کو ایک لیبل کی ضرورت ہوتی ہے:**
 ```html
@@ -912,9 +1212,9 @@ function trapFocus(element) {
 <input type="search" aria-label="Search products" placeholder="Search...">
 ```
 
-### غلطی کی ہینڈلنگ اور validation
+### ایرر ہینڈلنگ اور توثیق
 
-**قابل رسائی غلطی کے پیغامات:**
+**ایکسیسبل ایرر میسجز:**
 ```html
 <label for="email">Email Address:</label>
 <input type="email" id="email" name="email" 
@@ -925,13 +1225,13 @@ function trapFocus(element) {
 </div>
 ```
 
-**فارم validation کے بہترین طریقے:**
-- `aria-invalid` کا استعمال کریں غلط فیلڈز کی نشاندہی کے لیے
-- واضح، مخصوص غلطی کے پیغامات فراہم کریں
-- اہم غلطی کے اعلانات کے لیے `role="alert"` کا استعمال کریں
-- غلطیاں فوری طور پر اور فارم جمع کرانے پر دکھائیں
+**فارم توثیق کے بہترین طریقے:**
+- `aria-invalid` کا استعمال کریں تاکہ غلط فیلڈز کی نشاندہی ہو سکے
+- واضح، مخصوص ایرر میسجز فراہم کریں
+- اہم ایرر اعلانات کے لیے `role="alert"` کا استعمال کریں
+- ایرر کو فوراً اور فارم جمع کرانے پر دکھائیں
 
-### Fieldsets اور گروپنگ
+### فیلڈ سیٹس اور گروپنگ
 
 **متعلقہ فارم کنٹرولز کو گروپ کریں:**
 ```html
@@ -954,72 +1254,72 @@ function trapFocus(element) {
 </fieldset>
 ```
 
-## آپ کا Accessibility سفر: اہم نکات
+## آپ کا ایکسیسبلٹی سفر: اہم نکات
 
-مبارک ہو! آپ نے واقعی جامع ویب تجربات تخلیق کرنے کے لیے بنیادی معلومات حاصل کر لی ہیں۔ یہ بہت دلچسپ چیزیں ہیں! ویب accessibility صرف compliance کے باکسز کو چیک کرنے کے بارے میں نہیں ہے—یہ اس بات کو تسلیم کرنے کے بارے میں ہے کہ لوگ ڈیجیٹل مواد کے ساتھ مختلف طریقوں سے تعامل کرتے ہیں اور اس حیرت انگیز پیچیدگی کے لیے ڈیزائن کرتے ہیں۔
+مبارک ہو! آپ نے واقعی شامل ویب تجربات تخلیق کرنے کے لیے بنیادی معلومات حاصل کر لی ہیں۔ یہ کافی دلچسپ چیز ہے! ویب ایکسیسبلٹی صرف تعمیل کے خانوں کو چیک کرنے کے بارے میں نہیں ہے—یہ لوگوں کے ڈیجیٹل مواد کے ساتھ تعامل کے مختلف طریقوں کو پہچاننے اور اس حیرت انگیز پیچیدگی کے لیے ڈیزائن کرنے کے بارے میں ہے۔
 
-آپ اب ان developers کی بڑھتی ہوئی کمیونٹی کا حصہ ہیں جو سمجھتے ہیں کہ بہترین ڈیزائن ہر کسی کے لیے کام کرتا ہے۔ کلب میں خوش آمدید!
+اب آپ ان ڈویلپرز کی بڑھتی ہوئی کمیونٹی کا حصہ ہیں جو سمجھتے ہیں کہ بہترین ڈیزائن ہر کسی کے لیے کام کرتا ہے۔ کلب میں خوش آمدید!
 
-**🎯 آپ کے accessibility ٹول کٹ میں اب شامل ہیں:**
+**🎯 آپ کے ایکسیسبلٹی ٹول کٹ میں اب شامل ہیں:**
 
 | بنیادی اصول | نفاذ | اثر |
 |--------------|-------|------|
-| **Semantic HTML بنیاد** | HTML عناصر کو ان کے مطلوبہ مقصد کے لیے استعمال کریں | Screen readers مؤثر طریقے سے نیویگیٹ کر سکتے ہیں، کی بورڈ خود بخود کام کرتے ہیں |
-| **جامع بصری ڈیزائن** | مناسب contrast، معنی خیز رنگ کا استعمال، مرئی فوکس indicators | کسی بھی روشنی کی حالت میں ہر کسی کے لیے واضح |
-| **وضاحتی مواد** | معنی خیز لنک متن، alt text، headings | صارفین بصری سیاق و سباق کے بغیر مواد کو سمجھتے ہیں |
-| **کی بورڈ Accessibility** | Tab ترتیب، کی بورڈ شارٹ کٹس، فوکس مینجمنٹ | موٹر accessibility اور پاور صارف کی کارکردگی |
-| **ARIA Enhancement** | semantic gaps کو پر کرنے کے لیے اسٹریٹجک استعمال | پیچیدہ applications assistive technologies کے ساتھ کام کرتے ہیں |
-| **جامع ٹیسٹنگ** | Automated tools + manual verification + حقیقی صارفین کی جانچ | مسائل کو پکڑیں اس سے پہلے کہ وہ صارفین کو متاثر کریں |
+| **سیمینٹک HTML بنیاد** | HTML عناصر کو ان کے مطلوبہ مقصد کے لیے استعمال کریں | اسکرین ریڈرز مؤثر طریقے سے نیویگیٹ کر سکتے ہیں، کی بورڈز خود بخود کام کرتے ہیں |
+| **شامل بصری ڈیزائن** | کافی کنٹراسٹ، معنی خیز رنگ کا استعمال، مرئی فوکس اشارے | کسی بھی روشنی کی حالت میں ہر کسی کے لیے واضح |
+| **وضاحتی مواد** | معنی خیز لنک متن، alt متن، ہیڈنگز | صارفین بصری سیاق و سباق کے بغیر مواد کو سمجھتے ہیں |
+| **کی بورڈ ایکسیسبلٹی** | ٹیب آرڈر، کی بورڈ شارٹ کٹس، فوکس مینجمنٹ | موٹر ایکسیسبلٹی اور پاور صارف کی کارکردگی |
+| **ARIA اضافہ** | سیمینٹک خلا کو پر کرنے کے لیے اسٹریٹجک استعمال | پیچیدہ ایپلیکیشنز اسسٹیو ٹیکنالوجیز کے ساتھ کام کرتی ہیں |
+| **جامع ٹیسٹنگ** | خودکار ٹولز + دستی تصدیق + حقیقی صارفین کے ساتھ ٹیسٹنگ | مسائل کو صارفین پر اثر انداز ہونے سے پہلے پکڑیں |
 
 **🚀 آپ کے اگلے اقدامات:**
 
-1. **اپنے ورک فلو میں accessibility کو شامل کریں**: ٹیسٹنگ کو اپنے development process کا ایک قدرتی حصہ بنائیں
-2. **حقیقی صارفین سے سیکھیں**: ان لوگوں سے feedback حاصل کریں جو assistive technologies استعمال کرتے ہیں
-3. **اپ ڈیٹ رہیں**: Accessibility techniques نئی technologies اور standards کے ساتھ ترقی کرتی ہیں
-4. **شمولیت کی وکالت کریں**: اپنے علم کو شیئر کریں اور accessibility کو ٹیم کی ترجیح بنائیں
+1. **اپنے ورک فلو میں ایکسیسبلٹی کو شامل کریں**: ٹیسٹنگ کو اپنے ترقیاتی عمل کا قدرتی حصہ بنائیں
+2. **حقیقی صارفین سے سیکھیں**: اسسٹیو ٹیکنالوجیز استعمال کرنے والے لوگوں سے فیڈبیک حاصل کریں
+3. **اپ ڈیٹ رہیں**: ایکسیسبلٹی تکنیکیں نئی ٹیکنالوجیز اور معیارات کے ساتھ ترقی کرتی ہیں
+4. **شمولیت کی وکالت کریں**: اپنے علم کو شیئر کریں اور ایکسیسبلٹی کو ٹیم کی ترجیح بنائیں
 
-> 💡 **یاد رکھیں**: Accessibility کی پابندیاں اکثر جدید، خوبصورت حل کی طرف لے جاتی ہیں جو ہر کسی کو فائدہ پہنچاتی ہیں۔ Curb cuts، captions، اور voice controls سب accessibility features کے طور پر شروع ہوئے اور mainstream improvements بن گئے۔
+> 💡 **یاد رکھیں**: ایکسیسبلٹی کی حدود اکثر اختراعی، خوبصورت حل کی طرف لے جاتی ہیں جو ہر کسی کو فائدہ پہنچاتی ہیں۔ کرب کٹس، کیپشنز، اور وائس کنٹرولز سب ایکسیسبلٹی فیچرز کے طور پر شروع ہوئے اور مین اسٹریم بہتری بن گئے۔
 
-**کاروباری معاملہ بالکل واضح ہے**: قابل رسائی ویب سائٹس زیادہ صارفین تک پہنچتی ہیں، search engines میں بہتر درجہ بندی کرتی ہیں، maintenance کے کم اخراجات رکھتی ہیں، اور قانونی خطرات سے بچتی ہیں۔ لیکن ایمانداری سے؟ Accessibility کی پرواہ کرنے کی اصل وجہ بہت گہری ہے۔ قابل رسائی ویب سائٹس ویب کی بہترین اقدار کو مجسم کرتی ہیں—کھلاپن، شمولیت، اور یہ خیال کہ ہر کسی کو معلومات تک مساوی رسائی کا حق ہے۔
+**کاروباری معاملہ بالکل واضح ہے**: ایکسیسبل ویب سائٹس زیادہ صارفین تک پہنچتی ہیں، سرچ انجنز میں بہتر رینک کرتی ہیں، کم دیکھ بھال کے اخراجات رکھتی ہیں، اور قانونی خطرات سے بچتی ہیں۔ لیکن ایمانداری سے؟ ایکسیسبلٹی کی پرواہ کرنے کی اصل وجہ اس سے کہیں زیادہ گہری ہے۔ ایکسیسبل ویب سائٹس ویب کی بہترین اقدار—کھلے پن، شمولیت، اور یہ خیال کہ ہر کسی کو معلومات تک مساوی رسائی کا حق ہے—کی عکاسی کرتی ہیں۔
 
-آپ اب مستقبل کے جامع ویب کو تخلیق کرنے کے لیے تیار ہیں۔ ہر قابل رسائی سائٹ جو آپ تخلیق کرتے ہیں انٹرنیٹ کو ہر کسی کے لیے زیادہ خوش آئند جگہ بناتی ہے۔ جب آپ اس کے بارے میں سوچتے ہیں تو یہ واقعی حیرت انگیز ہے!
+اب آپ مستقبل کے شامل ویب کی تعمیر کے لیے تیار ہیں۔ ہر ایکسیسبل سائٹ جو آپ تخلیق کرتے ہیں انٹرنیٹ کو ہر کسی کے لیے زیادہ خوش آمدید جگہ بناتی ہے۔ جب آپ اس کے بارے میں سوچتے ہیں تو یہ کافی حیرت انگیز ہے!
 
 ## اضافی وسائل
 
-اپنے accessibility سیکھنے کے سفر کو ان ضروری وسائل کے ساتھ جاری رکھیں:
+اپنے ایکسیسبلٹی سیکھنے کے سفر کو ان ضروری وسائل کے ساتھ جاری رکھیں:
 
-**📚 سرکاری معیارات اور رہنما خطوط:**
-- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - سرکاری accessibility معیار کے ساتھ فوری حوالہ
-- [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - interactive widgets کے لیے جامع patterns
-- [WebAIM Guidelines](https://webaim.org/) - عملی، ابتدائی دوستانہ accessibility رہنمائی
+**📚 آفیشل معیارات اور رہنما خطوط:**
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - آفیشل ایکسیسبلٹی معیار کے ساتھ فوری حوالہ
+- [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - انٹرایکٹو ویجیٹس کے لیے جامع پیٹرنز
+- [WebAIM Guidelines](https://webaim.org/) - عملی، ابتدائی دوستانہ ایکسیسبلٹی رہنمائی
 
 **🛠️ ٹولز اور ٹیسٹنگ وسائل:**
-- [axe DevTools](https://www.deque.com/axe/devtools/) - صنعت کے معیاری accessibility ٹیسٹنگ
-- [A11y Project Checklist](https://www.a11yproject.com/checklist/) - مرحلہ وار accessibility verification
-- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft کا جامع ٹیسٹنگ suite
-- [Color Oracle](https://colororacle.org/) - ڈیزائن ٹیسٹنگ کے لیے color blindness simulator
+- [axe DevTools](https://www.deque.com/axe/devtools/) - انڈسٹری اسٹینڈرڈ ایکسیسبلٹی ٹیسٹنگ
+- [A11y Project Checklist](https://www.a11yproject.com/checklist/) - قدم بہ قدم ایکسیسبلٹی تصدیق
+- [Accessibility Insights](https://accessibilityinsights.io/) - مائیکروسافٹ کا جامع ٹیسٹنگ سوٹ
+- [Color Oracle](https://colororacle.org/) - ڈیزائن ٹیسٹنگ کے لیے کلر بلائنڈنس سمیلیٹر
 
-**🎓 سیکھنا اور کمیونٹی:**
+**🎓 سیکھنے اور کمیونٹی:**
 - [WebAIM Screen Reader Survey](https://webaim.org/projects/screenreadersurvey9/) - حقیقی صارفین کی ترجیحات اور رویے
-- [Inclusive Components](https://inclusive-components.design/) - جدید قابل رسائی component patterns
-- [A11y Coffee](https://a11y.coffee/) - فوری accessibility tips اور insights
-- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) - W3C کے جامع accessibility وسائل
+- [Inclusive Components](https://inclusive-components.design/) - جدید ایکسیسبل کمپوننٹ پیٹرنز
+- [A11y Coffee](https://a11y.coffee/) - فوری ایکسیسبلٹی تجاویز اور بصیرت
+- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) - W3C کے جامع ایکسیسبلٹی وسائل
 
-**🎥 عملی سیکھنا:**
+**🎥 عملی سیکھنے:**
 - [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/) - عملی نفاذ کی رہنمائی
-- [Deque University](https://dequeuniversity.com/) - پیشہ ورانہ accessibility training courses
+- [Deque University](https://dequeuniversity.com/) - پیشہ ورانہ ایکسیسبلٹی تربیتی کورسز
 
 ## GitHub Copilot Agent Challenge 🚀
 
 Agent mode کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** ایک قابل رسائی modal dialog component بنائیں جو مناسب فوکس مینجمنٹ، ARIA attributes، اور کی بورڈ نیویگیشن patterns کو ظاہر کرے۔
+**تفصیل:** ایک ایکسیسبل موڈل ڈائیلاگ کمپوننٹ بنائیں جو مناسب فوکس مینجمنٹ، ARIA ایٹریبیوٹس، اور کی بورڈ نیویگیشن پیٹرنز کو ظاہر کرے۔
 
-**Prompt:** HTML، CSS، اور JavaScript کے ساتھ ایک مکمل modal dialog component بنائیں جس میں شامل ہوں: مناسب فوکس محدود کرنا، ESC key سے بند کرنا، باہر کلک کرنے سے بند کرنا، screen readers کے لیے ARIA attributes، اور مرئی فوکس indicators۔ modal میں ایک فارم ہونا چاہیے جس میں مناسب لیبلز اور غلطی کی ہینڈلنگ ہو۔ یقینی بنائیں کہ component WCAG 2.1 AA standards پر پورا اترتا ہے۔
+**پرومپٹ:** HTML, CSS, اور JavaScript کے ساتھ ایک مکمل موڈل ڈائیلاگ کمپوننٹ بنائیں جس میں شامل ہوں: مناسب فوکس کو محدود کرنا، ESC کلید سے بند کرنا، باہر کلک کرنے سے بند کرنا، اسکرین ریڈرز کے لیے ARIA ایٹریبیوٹس، اور مرئی فوکس اشارے۔ موڈل میں ایک فارم شامل ہونا چاہیے جس میں مناسب لیبلز اور ایرر ہینڈلنگ ہو۔ یقینی بنائیں کہ کمپوننٹ WCAG 2.1 AA معیارات پر پورا اترتا ہے۔
 
 ## 🚀 چیلنج
 
-اس HTML کو لیں اور اسے جتنا ممکن ہو قابل رسائی بنائیں، ان حکمت عملیوں کو مدنظر رکھتے ہوئے جو آپ نے سیکھی ہیں۔
+اس HTML کو لیں اور اسے جتنا ممکن ہو ایکسیسبل بنائیں، دی گئی حکمت عملیوں کے مطابق جو آپ نے سیکھی ہیں۔
 
 ```html
 <!DOCTYPE html>
@@ -1078,26 +1378,63 @@ Agent mode کا استعمال کرتے ہوئے درج ذیل چیلنج مکم
 ```
 
 **کیے گئے اہم بہتریاں:**
-- مناسب semantic HTML ساخت شامل کی
-- heading hierarchy کو درست کیا (ایک h1، منطقی progression)
+- مناسب سیمینٹک HTML ساخت شامل کی گئی
+- ہیڈنگ ہائیرارکی کو درست کیا (واحد h1، منطقی ترقی)
 - "click here" کے بجائے معنی خیز لنک متن شامل کیا
-- نیویگیشن کے لیے مناسب ARIA labels شامل کیے
-- lang attribute اور مناسب meta tags شامل کیے
-- interactive عناصر کے لیے button element کا استعمال کیا
-- footer مواد کو مناسب landmarks کے ساتھ structured کیا
+- نیویگیشن کے لیے مناسب ARIA لیبلز شامل کیے
+- lang ایٹریبیوٹ اور مناسب میٹا ٹیگز شامل کیے
+- انٹرایکٹو عناصر کے لیے بٹن عنصر کا استعمال کیا
+- فوٹر مواد کو مناسب لینڈمارکس کے ساتھ ساخت کیا
 
-## لیکچر کے بعد کا کوئز
-[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/en/)
+## پوسٹ لیکچر کوئز
+[پوسٹ لیکچر کوئز](https://ff-quizzes.netlify.app/web/en/)
 
 ## جائزہ اور خود مطالعہ
 
-بہت سے ممالک میں accessibility requirements کے حوالے سے قوانین موجود ہیں۔ اپنے ملک کے accessibility قوانین کے بارے میں پڑھیں۔ کیا شامل ہے، اور کیا نہیں؟ ایک مثال [یہ حکومتی ویب سائٹ](https://accessibility.blog.gov.uk/) ہے۔
+بہت سے حکومتوں کے پاس ایکسیسبلٹی ضروریات کے بارے میں قوانین ہیں۔ اپنے ملک کے ایکسیسبلٹی قوانین کے بارے میں پڑھیں۔ کیا شامل ہے، اور کیا نہیں؟ ایک مثال [یہ حکومتی ویب سائٹ](https://accessibility.blog.gov.uk/) ہے۔
 
 ## اسائنمنٹ
 
-[ایک غیر قابل رسائی ویب سائٹ کا تجزیہ کریں](assignment.md)
+[ایک
+- [ ] پانچ مختلف پیچیدہ ویب سائٹس پر کی بورڈ نیویگیشن کی مشق کریں  
+- [ ] ایک سادہ فارم بنائیں جس میں مناسب لیبلز، غلطی کی ہینڈلنگ، اور ARIA شامل ہو  
+- [ ] کسی رسائی کمیونٹی میں شامل ہوں (A11y Slack، WebAIM فورم)  
+- [ ] معذوری کے شکار حقیقی صارفین کو ویب سائٹس پر نیویگیٹ کرتے ہوئے دیکھیں (YouTube پر بہترین مثالیں موجود ہیں)  
+
+### 🌟 **آپ کی مہینے بھر کی تبدیلی**  
+- [ ] اپنی ڈیولپمنٹ ورک فلو میں رسائی کی جانچ کو شامل کریں  
+- [ ] کسی اوپن سورس پروجیکٹ میں رسائی کے مسائل حل کرکے تعاون کریں  
+- [ ] کسی ایسے شخص کے ساتھ قابل استعمالیت کی جانچ کریں جو معاون ٹیکنالوجی استعمال کرتا ہو  
+- [ ] اپنی ٹیم کے لیے ایک قابل رسائی کمپوننٹ لائبریری بنائیں  
+- [ ] اپنے کام کی جگہ یا کمیونٹی میں رسائی کے لیے آواز اٹھائیں  
+- [ ] کسی نئے شخص کو رسائی کے تصورات سکھانے میں رہنمائی کریں  
 
-کریڈٹس: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) از Instrument
+### 🏆 **آخری رسائی چیمپئن چیک ان**  
+
+**اپنے رسائی کے سفر کا جشن منائیں:**  
+- ویب استعمال کرنے کے طریقے کے بارے میں آپ نے سب سے حیرت انگیز چیز کیا سیکھی؟  
+- کون سا رسائی اصول آپ کے ڈیولپمنٹ اسٹائل کے ساتھ سب سے زیادہ ہم آہنگ ہے؟  
+- رسائی کے بارے میں سیکھنے سے آپ کے ڈیزائن کے نظریے میں کیا تبدیلی آئی؟  
+- کسی حقیقی پروجیکٹ پر آپ سب سے پہلا رسائی کا بہتری لانا چاہتے ہیں؟  
+
+```mermaid
+journey
+    title Your Accessibility Confidence Evolution
+    section Today
+      Overwhelmed: 3: You
+      Curious: 4: You
+      Motivated: 5: You
+    section This Week
+      Practicing: 4: You
+      Testing: 5: You
+      Understanding: 5: You
+    section Next Month
+      Advocating: 5: You
+      Leading: 5: You
+      Inclusive by Default: 5: You
+```
+  
+> 🌍 **آپ اب ایک رسائی چیمپئن ہیں!** آپ سمجھتے ہیں کہ بہترین ویب تجربات ہر کسی کے لیے کام کرتے ہیں، چاہے وہ ویب تک کیسے رسائی حاصل کریں۔ ہر قابل رسائی فیچر جو آپ بناتے ہیں، انٹرنیٹ کو مزید جامع بناتا ہے۔ ویب کو آپ جیسے ڈیولپرز کی ضرورت ہے جو رسائی کو ایک رکاوٹ کے بجائے ایک موقع کے طور پر دیکھتے ہیں تاکہ تمام صارفین کے لیے بہتر تجربات تخلیق کیے جا سکیں۔ تحریک میں خوش آمدید! 🎉  
 
 ---
 
diff --git a/translations/ur/10-ai-framework-project/README.md b/translations/ur/10-ai-framework-project/README.md
index 4d52dc6f8a..aa6f462bd8 100644
--- a/translations/ur/10-ai-framework-project/README.md
+++ b/translations/ur/10-ai-framework-project/README.md
@@ -1,31 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e2c4ae5688e34b4b8b09d52aec56c79e",
-  "translation_date": "2025-10-22T14:45:59+00:00",
+  "original_hash": "3925b6a1c31c60755eaae4d578232c25",
+  "translation_date": "2025-11-03T13:07:43+00:00",
   "source_file": "10-ai-framework-project/README.md",
   "language_code": "ur"
 }
 -->
 # اے آئی فریم ورک
 
-کبھی ایسا محسوس ہوا کہ اے آئی ایپلیکیشنز کو شروع سے بنانے کی کوشش کرتے ہوئے آپ پریشان ہو گئے ہیں؟ آپ اکیلے نہیں ہیں! اے آئی فریم ورکز ایسے ہیں جیسے اے آئی ڈیولپمنٹ کے لیے سوئس آرمی نائف - یہ طاقتور ٹولز ہیں جو ذہین ایپلیکیشنز بناتے وقت آپ کا وقت اور پریشانی بچا سکتے ہیں۔ اے آئی فریم ورک کو ایک منظم لائبریری کے طور پر سوچیں: یہ پہلے سے تیار شدہ اجزاء، معیاری APIs، اور ذہین خلاصے فراہم کرتا ہے تاکہ آپ مسائل حل کرنے پر توجہ مرکوز کر سکیں بجائے اس کے کہ آپ عمل درآمد کی تفصیلات سے لڑیں۔
+کبھی ایسا محسوس ہوا کہ اے آئی ایپلیکیشنز کو شروع سے بنانے کی کوشش کرتے ہوئے آپ پریشان ہو گئے ہیں؟ آپ اکیلے نہیں ہیں! اے آئی فریم ورک ایک سوئس آرمی نائف کی طرح ہیں جو اے آئی ڈیولپمنٹ کے لیے طاقتور ٹولز فراہم کرتے ہیں، جو آپ کو ذہین ایپلیکیشنز بنانے میں وقت اور پریشانی سے بچاتے ہیں۔ اے آئی فریم ورک کو ایک منظم لائبریری کی طرح سمجھیں: یہ پہلے سے تیار شدہ اجزاء، معیاری APIs، اور ذہین خلاصے فراہم کرتا ہے تاکہ آپ مسائل حل کرنے پر توجہ مرکوز کر سکیں بجائے اس کے کہ آپ عمل درآمد کی تفصیلات سے لڑیں۔
 
 اس سبق میں، ہم دیکھیں گے کہ کس طرح LangChain جیسے فریم ورک پیچیدہ اے آئی انٹیگریشن کے کاموں کو صاف، قابلِ پڑھ کوڈ میں تبدیل کر سکتے ہیں۔ آپ یہ سیکھیں گے کہ حقیقی دنیا کے چیلنجز جیسے گفتگو کا ریکارڈ رکھنا، ٹول کالنگ کو نافذ کرنا، اور مختلف اے آئی ماڈلز کو ایک متحد انٹرفیس کے ذریعے سنبھالنا کیسے ممکن ہے۔
 
-جب ہم ختم کریں گے، تو آپ جان جائیں گے کہ کب فریم ورکز کا استعمال کرنا ہے بجائے خام API کالز کے، ان کے خلاصے کو مؤثر طریقے سے کیسے استعمال کرنا ہے، اور حقیقی دنیا کے استعمال کے لیے تیار اے آئی ایپلیکیشنز کیسے بنانی ہیں۔ آئیے دیکھتے ہیں کہ اے آئی فریم ورکز آپ کے پروجیکٹس کے لیے کیا کر سکتے ہیں۔
+جب ہم ختم کریں گے، تو آپ جان جائیں گے کہ کب فریم ورک استعمال کرنا ہے بجائے خام API کالز کے، ان کے خلاصے کو مؤثر طریقے سے کیسے استعمال کرنا ہے، اور حقیقی دنیا کے استعمال کے لیے تیار اے آئی ایپلیکیشنز کیسے بنانی ہیں۔ آئیے دیکھتے ہیں کہ اے آئی فریم ورک آپ کے پروجیکٹس کے لیے کیا کر سکتے ہیں۔
+
+## ⚡ اگلے 5 منٹ میں آپ کیا کر سکتے ہیں
+
+**مصروف ڈیولپرز کے لیے فوری آغاز کا راستہ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Install LangChain]
+    B --> C[Create ChatOpenAI client]
+    C --> D[Send first prompt]
+    D --> E[See framework power]
+```
+
+- **پہلا منٹ**: LangChain انسٹال کریں: `pip install langchain langchain-openai`
+- **دوسرا منٹ**: اپنا GitHub ٹوکن سیٹ کریں اور ChatOpenAI کلائنٹ درآمد کریں
+- **تیسرا منٹ**: سسٹم اور انسانی پیغامات کے ساتھ ایک سادہ گفتگو بنائیں
+- **چوتھا منٹ**: ایک بنیادی ٹول (جیسے ایک جمع کرنے کا فنکشن) شامل کریں اور اے آئی ٹول کالنگ دیکھیں
+- **پانچواں منٹ**: خام API کالز اور فریم ورک خلاصے کے درمیان فرق کا تجربہ کریں
+
+**فوری ٹیسٹ کوڈ**:
+```python
+from langchain_openai import ChatOpenAI
+from langchain_core.messages import SystemMessage, HumanMessage
+
+llm = ChatOpenAI(
+    api_key=os.environ["GITHUB_TOKEN"],
+    base_url="https://models.github.ai/inference",
+    model="openai/gpt-4o-mini"
+)
+
+response = llm.invoke([
+    SystemMessage(content="You are a helpful coding assistant"),
+    HumanMessage(content="Explain Python functions briefly")
+])
+print(response.content)
+```
+
+**یہ کیوں اہم ہے**: 5 منٹ میں، آپ تجربہ کریں گے کہ اے آئی فریم ورک پیچیدہ اے آئی انٹیگریشن کو سادہ میتھڈ کالز میں کیسے تبدیل کرتے ہیں۔ یہ وہ بنیاد ہے جو پروڈکشن اے آئی ایپلیکیشنز کو طاقت دیتی ہے۔
 
 ## فریم ورک کیوں منتخب کریں؟
 
-تو آپ اے آئی ایپ بنانے کے لیے تیار ہیں - زبردست! لیکن بات یہ ہے: آپ کے پاس کئی مختلف راستے ہیں جنہیں آپ اختیار کر سکتے ہیں، اور ہر ایک کے اپنے فوائد اور نقصانات ہیں۔ یہ کچھ ایسا ہی ہے جیسے کہیں پہنچنے کے لیے پیدل چلنا، سائیکل چلانا، یا گاڑی چلانا منتخب کرنا - یہ سب آپ کو وہاں پہنچا دیں گے، لیکن تجربہ (اور کوشش) بالکل مختلف ہوگی۔
+تو آپ اے آئی ایپ بنانے کے لیے تیار ہیں - زبردست! لیکن بات یہ ہے: آپ کے پاس کئی مختلف راستے ہیں جنہیں آپ لے سکتے ہیں، اور ہر ایک کے اپنے فوائد اور نقصانات ہیں۔ یہ کچھ ایسا ہی ہے جیسے کہیں پہنچنے کے لیے پیدل چلنا، سائیکل چلانا، یا گاڑی چلانا منتخب کرنا - یہ سب آپ کو وہاں پہنچا دیں گے، لیکن تجربہ (اور کوشش) بالکل مختلف ہوگی۔
 
-آئیے تین اہم طریقے دیکھتے ہیں جن سے آپ اپنے پروجیکٹس میں اے آئی کو شامل کر سکتے ہیں:
+آئیے تین اہم طریقوں کو توڑتے ہیں جن سے آپ اپنے پروجیکٹس میں اے آئی کو شامل کر سکتے ہیں:
 
-| طریقہ | فوائد | بہترین استعمال | غور طلب نکات |
-|-------|--------|----------------|---------------|
+| طریقہ | فوائد | بہترین استعمال | غور و فکر |
+|-------|-------|----------------|----------|
 | **براہ راست HTTP درخواستیں** | مکمل کنٹرول، کوئی انحصار نہیں | سادہ سوالات، بنیادی اصول سیکھنا | زیادہ تفصیلی کوڈ، دستی خرابی ہینڈلنگ |
 | **SDK انٹیگریشن** | کم بوائلر پلیٹ، ماڈل مخصوص اصلاح | سنگل ماڈل ایپلیکیشنز | مخصوص فراہم کنندگان تک محدود |
-| **اے آئی فریم ورکز** | متحد API، بلٹ ان خلاصے | ملٹی ماڈل ایپس، پیچیدہ ورک فلو | سیکھنے کا منحنی خط، ممکنہ زیادہ خلاصہ |
+| **اے آئی فریم ورک** | متحد API، بلٹ ان خلاصے | ملٹی ماڈل ایپس، پیچیدہ ورک فلو | سیکھنے کا منحنی خط، ممکنہ زیادہ خلاصہ |
 
 ### عملی طور پر فریم ورک کے فوائد
 
@@ -44,16 +82,41 @@ graph TD
     G --> K[Error Handling]
 ```
 
-**فریم ورکز کیوں اہم ہیں:**
+**فریم ورک کیوں اہم ہیں:**
 - **متحد کرتا ہے** متعدد اے آئی فراہم کنندگان کو ایک انٹرفیس کے تحت
-- **خودکار طور پر سنبھالتا ہے** گفتگو کی یادداشت
-- **فراہم کرتا ہے** عام کاموں جیسے ایمبیڈنگز اور فنکشن کالنگ کے لیے تیار ٹولز
-- **خرابی ہینڈلنگ اور ریٹری لاجک** کو منظم کرتا ہے
-- **پیچیدہ ورک فلو کو** قابلِ پڑھ طریقہ کار میں تبدیل کرتا ہے
+- **خودکار طور پر** گفتگو کی یادداشت کو سنبھالتا ہے
+- **فراہم کرتا ہے** عام کاموں جیسے ایمبیڈنگز اور فنکشن کالنگ کے لیے تیار شدہ ٹولز
+- **خرابی ہینڈلنگ** اور ریٹری لاجک کو منظم کرتا ہے
+- **پیچیدہ ورک فلو کو** قابلِ پڑھ میتھڈ کالز میں تبدیل کرتا ہے
+
+> 💡 **پرو ٹپ**: فریم ورک استعمال کریں جب مختلف اے آئی ماڈلز کے درمیان سوئچ کرنا ہو یا ایجنٹس، میموری، یا ٹول کالنگ جیسے پیچیدہ فیچرز بنانا ہو۔ بنیادی اصول سیکھنے یا سادہ، مرکوز ایپلیکیشنز بنانے کے لیے براہ راست APIs کے ساتھ رہیں۔
+
+**خلاصہ**: جیسے کسی کاریگر کے مخصوص ٹولز اور مکمل ورکشاپ کے درمیان انتخاب کرنا، یہ کام کے مطابق ٹول کو ملانے کے بارے میں ہے۔ فریم ورک پیچیدہ، فیچر سے بھرپور ایپلیکیشنز کے لیے بہترین ہیں، جبکہ براہ راست APIs سادہ استعمال کے معاملات کے لیے اچھے ہیں۔
 
-> 💡 **پرو ٹپ**: جب مختلف اے آئی ماڈلز کے درمیان سوئچ کرنا ہو یا ایجنٹس، میموری، یا ٹول کالنگ جیسے پیچیدہ فیچرز بنانا ہو تو فریم ورکز کا استعمال کریں۔ بنیادی اصول سیکھنے یا سادہ، مرکوز ایپلیکیشنز بنانے کے لیے براہ راست APIs پر قائم رہیں۔
+## 🗺️ اے آئی فریم ورک مہارت کے ذریعے آپ کا سیکھنے کا سفر
 
-**خلاصہ**: جیسے کسی ماہر کاریگر کے مخصوص ٹولز اور مکمل ورکشاپ کے درمیان انتخاب کرنا، یہ کام کے مطابق ٹول کو منتخب کرنے کی بات ہے۔ فریم ورکز پیچیدہ، فیچر سے بھرپور ایپلیکیشنز کے لیے بہترین ہیں، جبکہ براہ راست APIs سادہ استعمال کے معاملات کے لیے اچھے ہیں۔
+```mermaid
+journey
+    title From Raw APIs to Production AI Applications
+    section Framework Foundations
+      Understand abstraction benefits: 4: You
+      Master LangChain basics: 6: You
+      Compare approaches: 7: You
+    section Conversation Systems
+      Build chat interfaces: 5: You
+      Implement memory patterns: 7: You
+      Handle streaming responses: 8: You
+    section Advanced Features
+      Create custom tools: 6: You
+      Master structured output: 8: You
+      Build document systems: 8: You
+    section Production Applications
+      Combine all features: 7: You
+      Handle error scenarios: 8: You
+      Deploy complete systems: 9: You
+```
+
+**آپ کا سفر کا مقصد**: اس سبق کے آخر تک، آپ اے آئی فریم ورک ڈیولپمنٹ میں مہارت حاصل کر چکے ہوں گے اور پیچیدہ، پروڈکشن کے لیے تیار اے آئی ایپلیکیشنز بنا سکیں گے جو کمرشل اے آئی اسسٹنٹس کا مقابلہ کریں۔
 
 ## تعارف
 
@@ -61,15 +124,68 @@ graph TD
 
 - ایک عام اے آئی فریم ورک کا استعمال۔
 - عام مسائل جیسے چیٹ گفتگو، ٹول کا استعمال، میموری اور سیاق و سباق کو حل کرنا۔
-- اس کا فائدہ اٹھا کر اے آئی ایپلیکیشنز بنانا۔
+- اس کا فائدہ اٹھا کر اے آئی ایپس بنانا۔
+
+## 🧠 اے آئی فریم ورک ڈیولپمنٹ ایکو سسٹم
+
+```mermaid
+mindmap
+  root((AI Frameworks))
+    Abstraction Benefits
+      Code Simplification
+        Unified APIs
+        Built-in Error Handling
+        Consistent Patterns
+        Reduced Boilerplate
+      Multi-Model Support
+        Provider Agnostic
+        Easy Switching
+        Fallback Options
+        Cost Optimization
+    Core Components
+      Conversation Management
+        Message Types
+        Memory Systems
+        Context Tracking
+        History Persistence
+      Tool Integration
+        Function Calling
+        API Connections
+        Custom Tools
+        Workflow Automation
+    Advanced Features
+      Structured Output
+        Pydantic Models
+        JSON Schemas
+        Type Safety
+        Validation Rules
+      Document Processing
+        Embeddings
+        Vector Stores
+        Similarity Search
+        RAG Systems
+    Production Patterns
+      Application Architecture
+        Modular Design
+        Error Boundaries
+        Async Operations
+        State Management
+      Deployment Strategies
+        Scalability
+        Monitoring
+        Performance
+        Security
+```
+
+**بنیادی اصول**: اے آئی فریم ورک پیچیدگی کو خلاصہ کرتے ہیں جبکہ گفتگو کے انتظام، ٹول انٹیگریشن، اور دستاویز پروسیسنگ کے لیے طاقتور خلاصے فراہم کرتے ہیں، ڈیولپرز کو صاف، قابلِ دیکھ بھال کوڈ کے ساتھ پیچیدہ اے آئی ایپلیکیشنز بنانے کے قابل بناتے ہیں۔
 
 ## آپ کا پہلا اے آئی پرامپٹ
 
-آئیے بنیادی اصولوں سے شروع کرتے ہیں اور اپنی پہلی اے آئی ایپلیکیشن بناتے ہیں جو ایک سوال بھیجتی ہے اور جواب حاصل کرتی ہے۔ جیسے ارشمیدس نے اپنے غسل میں بے گھر ہونے کے اصول کو دریافت کیا، کبھی کبھی سب سے سادہ مشاہدات سب سے طاقتور بصیرت کی طرف لے جاتے ہیں - اور فریم ورکز ان بصیرتوں کو قابل رسائی بناتے ہیں۔
+آئیے بنیادی اصولوں سے شروع کرتے ہیں اور اپنا پہلا اے آئی ایپلیکیشن بناتے ہیں جو ایک سوال بھیجتا ہے اور جواب واپس حاصل کرتا ہے۔ جیسے ارشمیدس نے اپنے غسل میں ڈسپلیسمنٹ کے اصول کو دریافت کیا، کبھی کبھی سب سے سادہ مشاہدات سب سے طاقتور بصیرتوں کی طرف لے جاتے ہیں - اور فریم ورک ان بصیرتوں کو قابلِ رسائی بناتے ہیں۔
 
 ### GitHub ماڈلز کے ساتھ LangChain سیٹ اپ کرنا
 
-ہم LangChain کا استعمال کریں گے تاکہ GitHub ماڈلز سے جڑ سکیں، جو کافی زبردست ہے کیونکہ یہ آپ کو مختلف اے آئی ماڈلز تک مفت رسائی فراہم کرتا ہے۔ سب سے اچھی بات؟ شروع کرنے کے لیے آپ کو صرف چند سادہ کنفیگریشن پیرامیٹرز کی ضرورت ہے:
+ہم LangChain استعمال کریں گے تاکہ GitHub ماڈلز سے جڑ سکیں، جو بہت زبردست ہے کیونکہ یہ آپ کو مختلف اے آئی ماڈلز تک مفت رسائی دیتا ہے۔ سب سے اچھی بات؟ شروع کرنے کے لیے آپ کو صرف چند سادہ کنفیگریشن پیرامیٹرز کی ضرورت ہے:
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -87,15 +203,15 @@ print(response.content)
 ```
 
 **یہاں کیا ہو رہا ہے:**
-- **LangChain کلائنٹ بناتا ہے** `ChatOpenAI` کلاس کا استعمال کرتے ہوئے - یہ آپ کا اے آئی کا گیٹ وے ہے!
+- **ایک LangChain کلائنٹ بناتا ہے** `ChatOpenAI` کلاس کا استعمال کرتے ہوئے - یہ آپ کا اے آئی تک گیٹ وے ہے!
 - **GitHub ماڈلز کے ساتھ کنکشن کو ترتیب دیتا ہے** آپ کے تصدیقی ٹوکن کے ساتھ
-- **یہ بتاتا ہے** کہ کون سا اے آئی ماڈل استعمال کرنا ہے (`gpt-4o-mini`) - اسے اپنا اے آئی اسسٹنٹ منتخب کرنے کے طور پر سوچیں
-- **آپ کا سوال بھیجتا ہے** `invoke()` طریقہ استعمال کرتے ہوئے - یہاں جادو ہوتا ہے
-- **جواب نکالتا ہے اور دکھاتا ہے** - اور voilà، آپ اے آئی کے ساتھ چیٹ کر رہے ہیں!
+- **وضاحت کرتا ہے** کہ کون سا اے آئی ماڈل استعمال کرنا ہے (`gpt-4o-mini`) - اسے اپنا اے آئی اسسٹنٹ منتخب کرنے کے طور پر سمجھیں
+- **آپ کا سوال بھیجتا ہے** `invoke()` میتھڈ کا استعمال کرتے ہوئے - یہاں جادو ہوتا ہے
+- **جواب نکالتا ہے اور دکھاتا ہے** - اور voilà، آپ اے آئی کے ساتھ بات چیت کر رہے ہیں!
 
-> 🔧 **سیٹ اپ نوٹ**: اگر آپ GitHub Codespaces استعمال کر رہے ہیں، تو آپ خوش قسمت ہیں - `GITHUB_TOKEN` پہلے ہی سیٹ اپ ہے! مقامی طور پر کام کر رہے ہیں؟ کوئی مسئلہ نہیں، آپ کو صرف صحیح اجازتوں کے ساتھ ایک ذاتی رسائی ٹوکن بنانا ہوگا۔
+> 🔧 **سیٹ اپ نوٹ**: اگر آپ GitHub Codespaces استعمال کر رہے ہیں، تو آپ خوش قسمت ہیں - `GITHUB_TOKEN` پہلے ہی سیٹ اپ ہے! مقامی طور پر کام کر رہے ہیں؟ کوئی مسئلہ نہیں، آپ کو صرف صحیح اجازتوں کے ساتھ ایک پرسنل ایکسیس ٹوکن بنانا ہوگا۔
 
-**متوقع آؤٹ پٹ:**
+**متوقع آؤٹ پٹ**:
 ```text
 The capital of France is Paris.
 ```
@@ -117,18 +233,18 @@ sequenceDiagram
 
 ## گفتگو پر مبنی اے آئی بنانا
 
-پہلی مثال بنیادی اصولوں کو ظاہر کرتی ہے، لیکن یہ صرف ایک واحد تبادلہ ہے - آپ سوال پوچھتے ہیں، جواب حاصل کرتے ہیں، اور بس۔ حقیقی ایپلیکیشنز میں، آپ چاہتے ہیں کہ آپ کا اے آئی یاد رکھے کہ آپ کیا بات کر رہے ہیں، جیسے Watson اور Holmes نے وقت کے ساتھ اپنی تحقیقی گفتگو بنائی۔
+پہلا مثال بنیادی اصولوں کو ظاہر کرتا ہے، لیکن یہ صرف ایک واحد تبادلہ ہے - آپ ایک سوال پوچھتے ہیں، جواب حاصل کرتے ہیں، اور بس۔ حقیقی ایپلیکیشنز میں، آپ چاہتے ہیں کہ آپ کا اے آئی وہ یاد رکھے جو آپ نے بات چیت کی ہے، جیسے واٹسن اور ہومز نے اپنے تحقیقی گفتگو کو وقت کے ساتھ بنایا۔
 
-یہ وہ جگہ ہے جہاں LangChain خاص طور پر مفید ہو جاتا ہے۔ یہ مختلف پیغام کی اقسام فراہم کرتا ہے جو گفتگو کو منظم کرنے میں مدد کرتے ہیں اور آپ کو اپنے اے آئی کو ایک شخصیت دینے دیتے ہیں۔ آپ چیٹ کے تجربات بنائیں گے جو سیاق و سباق اور کردار کو برقرار رکھتے ہیں۔
+یہ وہ جگہ ہے جہاں LangChain خاص طور پر مفید ہوتا ہے۔ یہ مختلف پیغام کی اقسام فراہم کرتا ہے جو گفتگو کو ساخت دیتے ہیں اور آپ کو اپنے اے آئی کو ایک شخصیت دینے دیتے ہیں۔ آپ چیٹ کے تجربات بنائیں گے جو سیاق و سباق اور کردار کو برقرار رکھتے ہیں۔
 
 ### پیغام کی اقسام کو سمجھنا
 
-ان پیغام کی اقسام کو ان مختلف "ٹوپیوں" کے طور پر سوچیں جو گفتگو میں شرکاء پہنتے ہیں۔ LangChain مختلف پیغام کی کلاسز استعمال کرتا ہے تاکہ یہ معلوم ہو سکے کہ کون کیا کہہ رہا ہے:
+ان پیغام کی اقسام کو گفتگو میں شرکاء کے مختلف "ٹوپیاں" سمجھیں۔ LangChain مختلف پیغام کلاسز استعمال کرتا ہے تاکہ یہ معلوم ہو سکے کہ کون کیا کہہ رہا ہے:
 
 | پیغام کی قسم | مقصد | مثال استعمال کیس |
 |--------------|-------|------------------|
 | `SystemMessage` | اے آئی کی شخصیت اور رویے کی وضاحت کرتا ہے | "آپ ایک مددگار کوڈنگ اسسٹنٹ ہیں" |
-| `HumanMessage` | صارف کی ان پٹ کی نمائندگی کرتا ہے | "فنکشنز کیسے کام کرتے ہیں وضاحت کریں" |
+| `HumanMessage` | صارف کی انپٹ کی نمائندگی کرتا ہے | "فنکشنز کیسے کام کرتے ہیں وضاحت کریں" |
 | `AIMessage` | اے آئی کے جوابات کو محفوظ کرتا ہے | گفتگو میں پچھلے اے آئی جوابات |
 
 ### اپنی پہلی گفتگو بنانا
@@ -145,7 +261,7 @@ messages = [
 **اس گفتگو کے سیٹ اپ کو توڑنا:**
 - **اے آئی کے کردار اور شخصیت کو قائم کرتا ہے** `SystemMessage` کے ذریعے
 - **ابتدائی صارف کی درخواست فراہم کرتا ہے** `HumanMessage` کے ذریعے
-- **ملٹی ٹرن گفتگو کے لیے بنیاد بناتا ہے**
+- **کثیر موڑ گفتگو کے لیے بنیاد بناتا ہے**
 
 اس مثال کے لیے مکمل کوڈ کچھ اس طرح نظر آتا ہے:
 
@@ -171,7 +287,7 @@ response  = llm.invoke(messages)
 print(response.content)
 ```
 
-آپ کو ایک نتیجہ دیکھنا چاہیے جو اس طرح کا ہو:
+آپ کو ایک نتیجہ دیکھنا چاہیے جو اس طرح ہو:
 
 ```text
 I am Captain Jean-Luc Picard, the commanding officer of the USS Enterprise (NCC-1701-D), a starship in the United Federation of Planets. My primary mission is to explore new worlds, seek out new life and new civilizations, and boldly go where no one has gone before. 
@@ -181,7 +297,7 @@ I believe in the importance of diplomacy, reason, and the pursuit of knowledge.
 I hold the ideals of the Federation close to my heart, believing in the importance of cooperation, understanding, and respect for all sentient beings. My experiences have shaped my leadership style, and I strive to be a thoughtful and just captain. How may I assist you further?
 ```
 
-گفتگو کی تسلسل کو برقرار رکھنے کے لیے (ہر بار سیاق و سباق کو دوبارہ ترتیب دینے کے بجائے)، آپ کو اپنے پیغام کی فہرست میں جوابات شامل کرتے رہنا ہوگا۔ جیسے زبانی روایات نے نسلوں کے دوران کہانیاں محفوظ کیں، یہ طریقہ کار پائیدار یادداشت بناتا ہے:
+گفتگو کی تسلسل کو برقرار رکھنے کے لیے (ہر بار سیاق و سباق کو ری سیٹ کرنے کے بجائے)، آپ کو اپنے پیغام کی فہرست میں جوابات شامل کرتے رہنا ہوگا۔ جیسے زبانی روایات نے نسلوں کے دوران کہانیاں محفوظ کیں، یہ طریقہ پائیدار یادداشت بناتا ہے:
 
 ```python
 from langchain_core.messages import HumanMessage, SystemMessage
@@ -216,9 +332,9 @@ print(response.content)
 
 ```
 
-کافی دلچسپ، ہے نا؟ یہاں جو ہو رہا ہے وہ یہ ہے کہ ہم LLM کو دو بار کال کر رہے ہیں - پہلے صرف ہمارے ابتدائی دو پیغامات کے ساتھ، لیکن پھر دوبارہ مکمل گفتگو کی تاریخ کے ساتھ۔ یہ ایسا ہے جیسے اے آئی واقعی ہماری چیٹ کے ساتھ چل رہا ہو!
+کافی دلچسپ، ہے نا؟ یہاں جو ہو رہا ہے وہ یہ ہے کہ ہم LLM کو دو بار کال کر رہے ہیں - پہلے صرف ہمارے ابتدائی دو پیغامات کے ساتھ، لیکن پھر مکمل گفتگو کی تاریخ کے ساتھ۔ یہ ایسا ہے جیسے اے آئی واقعی ہماری چیٹ کو فالو کر رہا ہو!
 
-جب آپ یہ کوڈ چلائیں گے، تو آپ کو دوسرا جواب ملے گا جو کچھ اس طرح کا لگتا ہے:
+جب آپ یہ کوڈ چلائیں گے، تو آپ کو دوسرا جواب ملے گا جو کچھ اس طرح لگتا ہے:
 
 ```text
 Welcome aboard, Chris! It's always a pleasure to meet those who share a passion for exploration and discovery. While I cannot formally offer you a position on the Enterprise right now, I encourage you to pursue your aspirations. We are always in need of talented individuals with diverse skills and backgrounds. 
@@ -226,11 +342,35 @@ Welcome aboard, Chris! It's always a pleasure to meet those who share a passion
 If you are interested in space exploration, consider education and training in the sciences, engineering, or diplomacy. The values of curiosity, resilience, and teamwork are crucial in Starfleet. Should you ever find yourself on a starship, remember to uphold the principles of the Federation: peace, understanding, and respect for all beings. Your journey can lead you to remarkable adventures, whether in the stars or on the ground. Engage!
 ```
 
+```mermaid
+sequenceDiagram
+    participant User
+    participant App
+    participant LangChain
+    participant AI
+    
+    User->>App: "Tell me about you"
+    App->>LangChain: [SystemMessage, HumanMessage]
+    LangChain->>AI: Formatted conversation
+    AI->>LangChain: Captain Picard response
+    LangChain->>App: AIMessage object
+    App->>User: Display response
+    
+    Note over App: Add AIMessage to conversation
+    
+    User->>App: "Can I join your crew?"
+    App->>LangChain: [SystemMessage, HumanMessage, AIMessage, HumanMessage]
+    LangChain->>AI: Full conversation context
+    AI->>LangChain: Contextual response
+    LangChain->>App: New AIMessage
+    App->>User: Display contextual response
+```
+
 میں اسے شاید کے طور پر لوں گا ;)
 
 ## اسٹریمنگ جوابات
 
-کبھی نوٹ کیا کہ ChatGPT اپنے جوابات کو حقیقی وقت میں "ٹائپ" کرتا ہوا لگتا ہے؟ یہ اسٹریمنگ کی کارروائی ہے۔ جیسے کسی ماہر خطاط کو کام کرتے دیکھنا - کرداروں کو اسٹروک بہ اسٹروک ظاہر ہوتے دیکھنا بجائے اس کے کہ وہ فوراً ظاہر ہو جائیں - اسٹریمنگ تعامل کو زیادہ قدرتی محسوس کرتی ہے اور فوری فیڈبیک فراہم کرتی ہے۔
+کبھی نوٹ کیا کہ ChatGPT اپنے جوابات کو حقیقی وقت میں "ٹائپ" کرتا ہوا لگتا ہے؟ یہ اسٹریمنگ کی کارروائی ہے۔ جیسے کسی ماہر خطاط کو کام کرتے دیکھنا - کرداروں کو اسٹروک بہ اسٹروک ظاہر ہوتے دیکھنا بجائے فوری طور پر ظاہر ہونے کے - اسٹریمنگ تعامل کو زیادہ قدرتی محسوس کرتی ہے اور فوری فیڈبیک فراہم کرتی ہے۔
 
 ### LangChain کے ساتھ اسٹریمنگ کو نافذ کرنا
 
@@ -258,11 +398,24 @@ for chunk in llm.stream("Write a short story about a robot learning to code"):
 
 > 💡 **صارف کے تجربے کا ٹپ**: اسٹریمنگ واقعی چمکتی ہے جب آپ لمبے جوابات جیسے کوڈ وضاحتیں، تخلیقی تحریر، یا تفصیلی ٹیوٹوریلز سے نمٹ رہے ہوں۔ آپ کے صارفین پیش رفت دیکھنے کو پسند کریں گے بجائے خالی اسکرین کو گھورنے کے!
 
+### 🎯 تعلیمی چیک ان: فریم ورک خلاصے کے فوائد
+
+**رکیں اور غور کریں**: آپ نے ابھی اے آئی فریم ورک خلاصے کی طاقت کا تجربہ کیا۔ اس سبق کو پچھلے اسباق کی خام API کالز سے موازنہ کریں۔
+
+**فوری خود تشخیص**:
+- کیا آپ وضاحت کر سکتے ہیں کہ LangChain گفتگو کے انتظام کو دستی پیغام کی ٹریکنگ کے مقابلے میں کیسے آسان بناتا ہے؟
+- `invoke()` اور `stream()` میتھڈز کے درمیان کیا فرق ہے، اور آپ انہیں کب استعمال کریں گے؟
+- فریم ورک کے پیغام کی قسم کے نظام کوڈ کی تنظیم کو کیسے بہتر بناتا ہے؟
+
+**حقیقی دنیا کا تعلق**: وہ خلاصے کے نمونے جو آپ نے سیکھے ہیں (پیغام کی اقسام، اسٹریمنگ انٹرفیس، گفتگو کی یادداشت) ہر بڑے اے آئی ایپلیکیشن میں استعمال ہوتے ہیں - ChatGPT کے انٹرفیس سے لے کر GitHub Copilot کے کوڈ اسسٹنس تک۔ آپ وہی آرکیٹیکچرل نمونے سیکھ رہے ہیں جو پیشہ ور اے آئی ڈیولپمنٹ ٹیمیں استعمال کرتی ہیں۔
+
+**چیلنج سوال**: آپ مختلف اے آئی ماڈل فراہم کنندگان (OpenAI, Anthropic, Google) کو ایک انٹرفیس کے ساتھ سنبھالنے کے لیے فریم ورک خلاصہ کیسے ڈیزائن کریں گے؟ فوائد اور نقصانات پر غور کریں۔
+
 ## پرامپٹ ٹیمپلیٹس
 
-پرامپٹ ٹیمپلیٹس کلاسیکل خطابت میں استعمال ہونے والے بیانیہ ڈھانچے کی طرح کام کرتے ہیں - سوچیں کہ کس طرح Cicero اپنے تقریری انداز کو مختلف سامعین کے لیے اپناتا تھا جبکہ ایک ہی قائل کرنے والے فریم ورک کو برقرار رکھتا تھا۔ یہ آپ کو دوبارہ استعمال کے قابل پرامپٹس بنانے دیتے ہیں جہاں آپ مختلف معلومات کے ٹکڑوں کو دوبارہ لکھے بغیر تبدیل کر سکتے ہیں۔ ایک بار جب آپ ٹیمپلیٹ سیٹ اپ کر لیتے ہیں، تو آپ صرف متغیرات کو مطلوبہ اقدار کے ساتھ بھر دیتے ہیں۔
+پرامپٹ ٹیمپلیٹس کلاسیکل خطابت میں استعمال ہونے والے بیانیہ ڈھانچے کی طرح کام کرتے ہیں - سوچیں کہ کس طرح Cicero اپنے تقریری انداز کو مختلف سامعین کے لیے ڈھالتا تھا جبکہ ایک ہی قائل کرنے والے فریم ورک کو برقرار رکھتا تھا۔ یہ آپ کو قابلِ استعمال پرامپٹس بنانے دیتے ہیں جہاں آپ مختلف معلومات کے ٹکڑوں کو تبدیل کر سکتے ہیں بغیر سب کچھ دوبارہ لکھے۔
 
-### دوبارہ استعمال کے قابل پرامپٹس بنانا
+### قابلِ استعمال پرامپٹس بنانا
 
 ```python
 from langchain_core.prompts import ChatPromptTemplate
@@ -286,15 +439,15 @@ for question in questions:
     print(f"Topic: {question['concept']}\n{response.content}\n---\n")
 ```
 
-**آپ ٹیمپلیٹس استعمال کرنے سے کیوں محبت کریں گے:**
+**آپ ٹیمپلیٹس استعمال کرنے سے کیوں محبت کریں گے**:
 - **آپ کے پرامپٹس کو** آپ کی پوری ایپ میں مستقل رکھتا ہے
-- **گندے اسٹرنگ کنکیٹینیشن کی ضرورت نہیں** - صرف صاف، سادہ متغیرات
-- **آپ کا اے آئی** پیش گوئی کے قابل برتاؤ کرتا ہے کیونکہ ڈھانچہ وہی رہتا ہے
-- **اپ ڈیٹس** آسان ہیں - ٹیمپلیٹ کو ایک بار تبدیل کریں، اور یہ ہر جگہ ٹھیک ہو گیا
+- **مزید گندے اسٹرنگ کنکیٹینیشن نہیں** - صرف صاف، سادہ متغیرات
+- **آپ کا اے آئی** پیش گوئی کے قابل ہوتا ہے کیونکہ ڈھانچہ وہی رہتا ہے
+- **اپ ڈیٹس** آسان ہیں - ٹیمپلیٹ کو ایک بار تبدیل کریں، اور یہ ہر جگہ ٹھیک ہو جاتا ہے
 
 ## منظم آؤٹپٹ
 
-کبھی اے آئی کے جوابات کو غیر منظم متن کے طور پر واپس کرنے کی کوشش کرتے ہوئے مایوس ہوئے؟ منظم آؤٹپٹ ایسا ہے جیسے آپ کے اے آئی کو سکھایا جائے کہ Linnaeus نے حیاتیاتی درجہ بندی کے لیے منظم طریقہ اختیار کیا - منظم، پیش گوئی کے قابل، اور کام کرنے میں آسان۔ آپ JSON، مخصوص ڈیٹا ڈھانچے، یا کسی بھی فارمیٹ کی درخواست کر سکتے ہیں جس کی آپ کو ضرورت ہو۔
+کبھی اے آئی جوابات کو غیر منظم متن کے طور پر واپس حاصل کرنے کی کوشش کرتے ہوئے مایوس ہوئے؟ منظم آؤٹپٹ ایسا ہے جیسے آپ کے اے آئی کو سکھایا جائے کہ Linnaeus نے حیاتیاتی درجہ بندی کے لیے جو منظم طریقہ استعمال کیا - منظم، پیش گوئی کے قابل، اور کام کرنے میں آسان۔ آپ JSON، مخصوص ڈیٹا ڈھانچے، یا جو بھی فارمیٹ آپ کو چاہیے، درخواست کر سکتے ہیں۔
 
 ### آؤٹپٹ اسکیمز کی وضاحت
 
@@ -336,15 +489,15 @@ print(f"Score: {result['score']}")
 print(f"Strengths: {', '.join(result['strengths'])}")
 ```
 
-**منظم آؤٹپٹ کیوں گیم چینجر ہے:**
-- **اب مزید اندازہ لگانے کی ضرورت نہیں** کہ آپ کو کون سا فارمیٹ واپس ملے گا - یہ ہر بار مستقل ہے
-- **آپ کے ڈیٹا بیس اور APIs میں** بغیر اضافی کام کے براہ راست پلگ کرتا ہے
-- **عجیب اے آئی جوابات کو پکڑتا ہے** اس سے پہلے کہ وہ آپ کی ایپ کو نقصان پہنچائیں
+**منظم آؤٹپٹ کیوں گیم چینجر ہے**:
+- **مزید اندازہ نہیں** کہ آپ کو کون سا فارمیٹ واپس ملے گا - یہ ہر بار مستقل ہے
+- **براہ راست آپ کے ڈیٹا بیس اور APIs میں پلگ کرتا ہے** بغیر اضافی کام کے
+- **عجیب اے آئی جوابات کو پکڑتا ہے** اس سے پہلے کہ وہ آپ کی ایپ کو خراب کریں
 - **آپ کے کوڈ کو صاف کرتا ہے** کیونکہ آپ بالکل جانتے ہیں کہ آپ کس کے ساتھ کام کر رہے ہیں
 
 ## ٹول کالنگ
 
-اب ہم ایک سب سے طاقتور فیچر پر پہنچتے ہیں: ٹولز۔ یہ وہ طریقہ ہے جس سے آپ اپنے اے آئی کو گفتگو سے آگے عملی صلاحیتیں دیتے ہیں۔ جیسے قرون وسطیٰ کے گلڈز نے مخصوص دستکاری کے لیے خصوصی ٹولز تیار کیے، آپ اپنے اے آئی کو مرکوز آلات سے لیس کر سکتے ہیں۔ آپ بیان کرتے ہیں کہ کون سے ٹولز دستیاب ہیں، اور جب کوئی ایسی چیز کی درخواست کرتا ہے جو میل کھاتی ہے، تو آپ کا اے آئی کارروائی کر سکتا ہے۔
+اب ہم سب سے طاقتور خصوصیات میں سے ایک تک پہنچتے ہیں: ٹولز۔ یہ وہ طریقہ ہے جس سے آپ اپنے اے آئی کو گفتگو سے آگے عملی صلاحیتیں دیتے ہیں۔ جیسے کہ قرون وسطیٰ کے گلڈز نے مخصوص دستکاری کے لیے خصوصی ٹولز تیار کیے، آپ اپنے اے آئی کو مرکوز آلات سے لیس کر سکتے ہیں۔ آپ بیان کرتے ہیں کہ کون سے ٹولز دستیاب ہیں، اور جب کوئی ایسی چیز کی درخواست کرتا ہے جو مماثل ہو، تو آپ کا اے آئی کارروائی کر سکتا ہے۔
 
 ### Python کا استعمال
 
@@ -367,88 +520,12 @@ functions = {
 }
 ```
 
-تو یہاں کیا ہو رہا ہے؟ ہم نے `add` نامی ایک ٹول کے لیے بلیو پرنٹ بنایا۔ `TypedDict` سے وراثت لے کر اور ان فینسی `Annotated` اقسام کو `a` اور `b` کے لیے استعمال کرتے ہوئے، ہم LLM کو واضح تصویر دے رہے ہیں کہ یہ ٹول کیا کرتا ہے اور اسے کیا ضرورت ہے۔ `functions` ڈکشنری ہماری ٹول باکس کی طرح ہے - یہ ہمارے کوڈ کو بالکل بتاتا ہے کہ جب اے آئی کسی مخصوص ٹول کو استعمال کرنے کا فیصلہ کرے تو کیا کرنا ہے۔
+تو یہاں کیا ہو رہا ہے؟ ہم نے ایک ٹول کے لیے بلیو پرنٹ بنایا جسے `add` کہا جاتا ہے۔ `TypedDict` سے وراثت لے کر اور `Annotated` اقسام کو `a` اور `b` کے لیے استعمال کرتے ہوئے، ہم LLM کو واضح تصویر دے رہے ہیں کہ یہ ٹول کیا کرتا ہے اور اسے کیا چاہیے۔ `functions` ڈکشنری ہماری ٹول باکس کی طرح ہے - یہ ہمارے کوڈ کو بالکل بتاتا ہے کہ جب اے آئی کسی مخصوص ٹول کو استعمال کرنے کا فیصلہ کرے تو کیا کرنا ہے۔
 
 آئیے دیکھتے ہیں کہ ہم اگلے مرحلے میں اس ٹول کے ساتھ LLM کو کیسے کال کرتے ہیں:
 
-```python
-llm = ChatOpenAI(
-    api_key=os.environ["GITHUB_TOKEN"],
-    base_url="https://models.github.ai/inference",
-    model="openai/gpt-4o-mini",
-)
-
-llm_with_tools = llm.bind_tools(tools)
-```
-
-یہاں ہم `bind_tools` کو اپنے `tools` array کے ساتھ کال کرتے ہیں اور اس طرح LLM `llm_with_tools` اب اس ٹول کے بارے میں جانتا ہے۔
-
-اس نئے LLM کو استعمال کرنے کے لیے، ہم درج ذیل کوڈ ٹائپ کر سکتے ہیں:
-
-```python
-query = "What is 3 + 12?"
-
-res = llm_with_tools.invoke(query)
-if(res.tool_calls):
-    for tool in res.tool_calls:
-        print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
-print("CONTENT: ",res.content)
-```
-
-اب جب ہم اس نئے llm پر `invoke` کال کرتے ہیں، جس کے پاس ٹولز ہیں، تو شاید پراپرٹی `tool_calls` پاپولیٹ ہو جائے۔ اگر ایسا ہے، تو کوئی بھی شناخت شدہ ٹولز کے پاس `name` اور `args` پراپرٹی ہوتی ہے جو شناخت کرتی ہے کہ کون سا ٹول استعمال کیا جانا چاہیے اور کس دلائل کے ساتھ۔ مکمل کوڈ کچھ اس طرح نظر آتا ہے:
-
-```python
-from langchain_core.messages import HumanMessage, SystemMessage
-from langchain_openai import ChatOpenAI
-import os
-from typing_extensions import Annotated, TypedDict
-
-class add(TypedDict):
-    """Add two integers."""
-
-    # Annotations must have the type and can optionally include a default value and description (in that order).
-    a: Annotated[int, ..., "First integer"]
-    b: Annotated[int, ..., "Second integer"]
-
-tools = [add]
-
-functions = {
-    "add": lambda a, b: a + b
-}
-
-llm = ChatOpenAI(
-    api_key=os.environ["GITHUB_TOKEN"],
-    base_url="https://models.github.ai/inference",
-    model="openai/gpt-4o-mini",
-)
-
-llm_with_tools = llm.bind_tools(tools)
-
-query = "What is 3 + 12?"
-
-res = llm_with_tools.invoke(query)
-if(res.tool_calls):
-    for tool in res.tool_calls:
-        print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
-print("CONTENT: ",res.content)
-```
-
-اس کوڈ کو چلانے پر، آپ کو آؤٹپٹ کچھ اس طرح نظر آنا چاہیے:
-
-```text
-TOOL CALL:  15
-CONTENT: 
-```
-
-اے آئی نے "What is 3 + 12" کا جائزہ لیا اور اسے `add` ٹول کے لیے ایک کام کے طور پر پہچانا۔ جیسے ایک ماہر لائبریرین جانتا ہے کہ کس قسم کے سوال کے مطابق کون سا حوالہ مشورہ کرنا ہے، اس نے یہ تعین ٹول کے نام، وضاحت، اور فیلڈ کی وضاحتوں سے کیا۔ 15 کا نتیجہ ہمارے `functions` ڈکشنری سے ٹول کو انجام دینے سے آیا:
-
-```python
-print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"]))
-```
-
-### ایک زیادہ دلچسپ ٹول جو ویب API کو کال کرتا ہے
-
-نمبرز کو شامل کرنا تصور کو ظاہر کرتا ہے، لیکن حقیقی ٹولز عام طور پر زیادہ پیچیدہ آپریشنز انجام دیتے ہیں، جیسے ویب APIs کو کال کرنا۔ آئیے اپنے مثال کو بڑھاتے ہیں تاکہ اے آئی انٹرنیٹ سے مواد حاصل کرے - جیسے ٹیلی گراف آپریٹرز نے کبھی دور دراز مقامات کو جوڑا:
+@@CODE
+اعداد کو جمع کرنا تصور کو ظاہر کرتا ہے، لیکن حقیقی ٹولز عام طور پر زیادہ پیچیدہ آپریشنز انجام دیتے ہیں، جیسے ویب APIs کو کال کرنا۔ آئیے اپنے مثال کو وسعت دیتے ہیں تاکہ AI انٹرنیٹ سے مواد حاصل کرے - بالکل اسی طرح جیسے ٹیلی گراف آپریٹرز نے کبھی دور دراز مقامات کو جوڑا تھا:
 
 ```python
 class joke(TypedDict):
@@ -473,14 +550,41 @@ query = "Tell me a joke about animals"
 # the rest of the code is the same
 ```
 
-اب اگر آپ یہ کوڈ چلائیں تو آپ کو ایک جواب ملے گا جو کچھ اس طرح کہتا ہے:
+اب اگر آپ یہ کوڈ چلائیں گے تو آپ کو کچھ اس طرح کا جواب ملے گا:
 
 ```text
 TOOL CALL:  Chuck Norris once rode a nine foot grizzly bear through an automatic car wash, instead of taking a shower.
 CONTENT:  
 ```
 
-یہاں مکمل کوڈ ہے:
+```mermaid
+flowchart TD
+    A[User Query: "Tell me a joke about animals"] --> B[LangChain Analysis]
+    B --> C{Tool Available?}
+    C -->|Yes| D[Select joke tool]
+    C -->|No| E[Generate direct response]
+    
+    D --> F[Extract Parameters]
+    F --> G[Call joke(category="animals")]
+    G --> H[API Request to chucknorris.io]
+    H --> I[Return joke content]
+    I --> J[Display to user]
+    
+    E --> K[AI-generated response]
+    K --> J
+    
+    subgraph "Tool Definition Layer"
+        L[TypedDict Schema]
+        M[Function Implementation]
+        N[Parameter Validation]
+    end
+    
+    D --> L
+    F --> N
+    G --> M
+```
+
+یہ ہے مکمل کوڈ:
 
 ```python
 from langchain_openai import ChatOpenAI
@@ -534,7 +638,7 @@ print("CONTENT: ",res.content)
 
 ## ایمبیڈنگز اور دستاویز پروسیسنگ
 
-ایمبیڈنگز جدید اے آئی میں سب سے زیادہ خوبصورت حلوں میں سے ایک کی نمائندگی کرتی ہیں۔ تصور کریں کہ آپ کسی بھی متن کو لے سکتے ہیں اور اسے عددی نقاط میں تبدیل کر سکتے ہیں جو اس کے معنی کو ظاہر کرتے ہیں۔ یہی ایمبیڈنگز کرتی ہیں - وہ متن کو کثیر جہتی جگہ میں پوائنٹس میں تبدیل کرتی ہیں جہاں ملتے جلتے تصورات ایک ساتھ جمع ہوتے ہیں۔ یہ خیالات کے لیے ایک کوآرڈینیٹ سسٹم رکھنے جیسا ہے، جیسے Mendeleev نے ایٹمی خصوصیات کے ذریعے پیریوڈک ٹیبل کو منظم کیا۔
+ایمبیڈنگز جدید AI میں سب سے خوبصورت حلوں میں سے ایک ہیں۔ تصور کریں کہ اگر آپ کسی بھی متن کو لے کر اسے عددی کوآرڈینیٹس میں تبدیل کر سکیں جو اس کے معنی کو ظاہر کریں۔ یہی کام ایمبیڈنگز کرتی ہیں - وہ متن کو کثیر جہتی جگہ میں پوائنٹس میں تبدیل کرتی ہیں جہاں ملتے جلتے تصورات ایک ساتھ جمع ہوتے ہیں۔ یہ بالکل ایسے ہی ہے جیسے مینڈیلیف نے ایٹمی خصوصیات کے ذریعے پیریوڈک ٹیبل کو منظم کیا۔
 
 ### ایمبیڈنگز بنانا اور استعمال کرنا
 
@@ -593,44 +697,211 @@ for loader in [pdf_loader, csv_loader, json_loader, web_loader]:
 ```
 
 **ایمبیڈنگز کے ساتھ آپ کیا کر سکتے ہیں:**
-- **ایسا سرچ بنائیں** جو واقعی آپ کا مطلب سمجھتا ہو، صرف کی ورڈ میچنگ نہیں
-- **ایسا اے آئی بنائیں** جو آپ کے دستاویزات کے بارے میں سوالات کا جواب دے سکے
-- **ایسی سفارشاتی نظام بنائیں** جو واقعی متعلقہ مواد تجویز
-3. **ذاتی تعلیم**: مختلف مہارت کی سطحوں کے مطابق جوابات کو ڈھالنے کے لیے سسٹم پیغامات کا استعمال کریں  
-4. **جواب کی ترتیب**: کوئز سوالات کے لیے منظم آؤٹ پٹ نافذ کریں  
+- **تلاش کریں** جو واقعی آپ کے مطلب کو سمجھتی ہو، صرف کی ورڈ میچنگ نہیں
+- **AI بنائیں** جو آپ کے دستاویزات کے بارے میں سوالات کے جواب دے سکے
+- **تجویز کریں** ایسے سسٹمز جو واقعی متعلقہ مواد تجویز کریں
+- **خودکار طور پر** آپ کے مواد کو منظم اور درجہ بندی کریں
+
+```mermaid
+flowchart LR
+    A[Documents] --> B[Text Splitter]
+    B --> C[Create Embeddings]
+    C --> D[Vector Store]
+    
+    E[User Query] --> F[Query Embedding]
+    F --> G[Similarity Search]
+    G --> D
+    D --> H[Relevant Documents]
+    H --> I[AI Response]
+    
+    subgraph "Vector Space"
+        J[Document A: [0.1, 0.8, 0.3...]]
+        K[Document B: [0.2, 0.7, 0.4...]]
+        L[Query: [0.15, 0.75, 0.35...]]
+    end
+    
+    C --> J
+    C --> K
+    F --> L
+    G --> J
+    G --> K
+```
+
+## مکمل AI ایپلیکیشن بنانا
+
+اب ہم سب کچھ جو آپ نے سیکھا ہے ایک جامع ایپلیکیشن میں ضم کریں گے - ایک کوڈنگ اسسٹنٹ جو سوالات کے جواب دے سکتا ہے، ٹولز استعمال کر سکتا ہے، اور گفتگو کی یادداشت کو برقرار رکھ سکتا ہے۔ جیسے پرنٹنگ پریس نے موجودہ ٹیکنالوجیز (مووایبل ٹائپ، انک، پیپر، اور پریشر) کو کچھ تبدیلی کے لیے یکجا کیا، ہم اپنے AI اجزاء کو کچھ عملی اور مفید بنانے کے لیے یکجا کریں گے۔
+
+### مکمل ایپلیکیشن کی مثال
+
+```python
+from langchain_openai import ChatOpenAI, OpenAIEmbeddings
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_core.messages import HumanMessage, SystemMessage, AIMessage
+from langchain_community.vectorstores import FAISS
+from typing_extensions import Annotated, TypedDict
+import os
+import requests
+
+class CodingAssistant:
+    def __init__(self):
+        self.llm = ChatOpenAI(
+            api_key=os.environ["GITHUB_TOKEN"],
+            base_url="https://models.github.ai/inference",
+            model="openai/gpt-4o-mini"
+        )
+        
+        self.conversation_history = [
+            SystemMessage(content="""You are an expert coding assistant. 
+            Help users learn programming concepts, debug code, and write better software.
+            Use tools when needed and maintain a helpful, encouraging tone.""")
+        ]
+        
+        # Define tools
+        self.setup_tools()
+    
+    def setup_tools(self):
+        class web_search(TypedDict):
+            """Search for programming documentation or examples."""
+            query: Annotated[str, "Search query for programming help"]
+        
+        class code_formatter(TypedDict):
+            """Format and validate code snippets."""
+            code: Annotated[str, "Code to format"]
+            language: Annotated[str, "Programming language"]
+        
+        self.tools = [web_search, code_formatter]
+        self.llm_with_tools = self.llm.bind_tools(self.tools)
+    
+    def chat(self, user_input: str):
+        # Add user message to conversation
+        self.conversation_history.append(HumanMessage(content=user_input))
+        
+        # Get AI response
+        response = self.llm_with_tools.invoke(self.conversation_history)
+        
+        # Handle tool calls if any
+        if response.tool_calls:
+            for tool_call in response.tool_calls:
+                tool_result = self.execute_tool(tool_call)
+                print(f"🔧 Tool used: {tool_call['name']}")
+                print(f"📊 Result: {tool_result}")
+        
+        # Add AI response to conversation
+        self.conversation_history.append(response)
+        
+        return response.content
+    
+    def execute_tool(self, tool_call):
+        tool_name = tool_call['name']
+        args = tool_call['args']
+        
+        if tool_name == 'web_search':
+            return f"Found documentation for: {args['query']}"
+        elif tool_name == 'code_formatter':
+            return f"Formatted {args['language']} code: {args['code'][:50]}..."
+        
+        return "Tool execution completed"
+
+# Usage example
+assistant = CodingAssistant()
+
+print("🤖 Coding Assistant Ready! Type 'quit' to exit.\n")
+
+while True:
+    user_input = input("You: ")
+    if user_input.lower() == 'quit':
+        break
+    
+    response = assistant.chat(user_input)
+    print(f"🤖 Assistant: {response}\n")
+```
+
+**ایپلیکیشن آرکیٹیکچر:**
+
+```mermaid
+graph TD
+    A[User Input] --> B[Coding Assistant]
+    B --> C[Conversation Memory]
+    B --> D[Tool Detection]
+    B --> E[LLM Processing]
+    
+    D --> F[Web Search Tool]
+    D --> G[Code Formatter Tool]
+    
+    E --> H[Response Generation]
+    F --> H
+    G --> H
+    
+    H --> I[User Interface]
+    H --> C
+```
+
+**اہم خصوصیات جو ہم نے نافذ کی ہیں:**
+- **آپ کی پوری گفتگو کو یاد رکھتا ہے** تاکہ سیاق و سباق برقرار رہے
+- **ٹولز کے ذریعے عمل انجام دیتا ہے**، صرف گفتگو نہیں
+- **پیش گوئی کے قابل تعامل کے نمونے پر عمل کرتا ہے**
+- **خودکار طور پر** ایرر ہینڈلنگ اور پیچیدہ ورک فلو کو منظم کرتا ہے
+
+### 🎯 تعلیمی جائزہ: پروڈکشن AI آرکیٹیکچر
 
-### عمل درآمد کے مراحل  
+**آرکیٹیکچر کی سمجھ**: آپ نے ایک مکمل AI ایپلیکیشن بنائی ہے جو گفتگو کے انتظام، ٹول کالنگ، اور منظم ورک فلو کو یکجا کرتی ہے۔ یہ پروڈکشن لیول AI ایپلیکیشن ڈیولپمنٹ کی نمائندگی کرتا ہے۔
 
-**مرحلہ 1: اپنے ماحول کو ترتیب دیں**  
+**اہم تصورات میں مہارت حاصل کی گئی**:
+- **کلاس پر مبنی آرکیٹیکچر**: منظم، قابل دیکھ بھال AI ایپلیکیشن کی ساخت
+- **ٹول انٹیگریشن**: گفتگو سے آگے کی حسب ضرورت فعالیت
+- **یادداشت کا انتظام**: مستقل گفتگو کا سیاق و سباق
+- **ایرر ہینڈلنگ**: مضبوط ایپلیکیشن کا رویہ
+
+**صنعتی تعلق**: آپ نے جو آرکیٹیکچر پیٹرنز نافذ کیے ہیں (گفتگو کلاسز، ٹول سسٹمز، یادداشت کا انتظام) وہی پیٹرنز ہیں جو انٹرپرائز AI ایپلیکیشنز جیسے Slack کے AI اسسٹنٹ، GitHub Copilot، اور Microsoft Copilot میں استعمال ہوتے ہیں۔ آپ پیشہ ورانہ گریڈ آرکیٹیکچرل سوچ کے ساتھ تعمیر کر رہے ہیں۔
+
+**عکاسی کا سوال**: آپ اس ایپلیکیشن کو متعدد صارفین، مستقل اسٹوریج، یا بیرونی ڈیٹا بیس کے ساتھ انٹیگریشن کو کیسے سنبھالیں گے؟ اسکیل ایبلٹی اور اسٹیٹ مینجمنٹ کے چیلنجز پر غور کریں۔
+
+## اسائنمنٹ: اپنا AI پاورڈ اسٹڈی اسسٹنٹ بنائیں
+
+**مقصد**: ایک AI ایپلیکیشن بنائیں جو طلباء کو پروگرامنگ تصورات سیکھنے میں مدد دے، وضاحتیں، کوڈ کی مثالیں، اور انٹرایکٹو کوئزز فراہم کرے۔
+
+### ضروریات
+
+**بنیادی خصوصیات (ضروری):**
+1. **گفتگو کا انٹرفیس**: ایک چیٹ سسٹم نافذ کریں جو متعدد سوالات کے دوران سیاق و سباق کو برقرار رکھے
+2. **تعلیمی ٹولز**: کم از کم دو ٹولز بنائیں جو سیکھنے میں مدد کریں:
+   - کوڈ وضاحت کا ٹول
+   - تصور کوئز جنریٹر
+3. **ذاتی سیکھنے**: مختلف مہارت کی سطحوں کے لیے جوابات کو اپنانے کے لیے سسٹم میسجز استعمال کریں
+4. **جواب کی فارمیٹنگ**: کوئز سوالات کے لیے منظم آؤٹ پٹ نافذ کریں
+
+### نفاذ کے مراحل
+
+**مرحلہ 1: اپنا ماحول ترتیب دیں**
 ```bash
 pip install langchain langchain-openai
 ```
-  
-**مرحلہ 2: بنیادی چیٹ کی فعالیت**  
-- `StudyAssistant` کلاس بنائیں  
-- گفتگو کی یادداشت کو نافذ کریں  
-- تعلیمی مدد کے لیے شخصیت کی ترتیب شامل کریں  
 
-**مرحلہ 3: تعلیمی ٹولز شامل کریں**  
-- **کوڈ وضاحت کنندہ**: کوڈ کو قابل فہم حصوں میں تقسیم کرتا ہے  
-- **کوئز جنریٹر**: پروگرامنگ تصورات کے بارے میں سوالات تیار کرتا ہے  
-- **پیش رفت ٹریکر**: کور کیے گئے موضوعات کا ریکارڈ رکھتا ہے  
+**مرحلہ 2: بنیادی چیٹ فعالیت**
+- `StudyAssistant` کلاس بنائیں
+- گفتگو کی یادداشت نافذ کریں
+- تعلیمی مدد کے لیے شخصیت کی ترتیب شامل کریں
+
+**مرحلہ 3: تعلیمی ٹولز شامل کریں**
+- **کوڈ وضاحت کنندہ**: کوڈ کو سمجھنے کے قابل حصوں میں تقسیم کرتا ہے
+- **کوئز جنریٹر**: پروگرامنگ تصورات کے بارے میں سوالات بناتا ہے
+- **پروگریس ٹریکر**: کور کیے گئے موضوعات کا ٹریک رکھتا ہے
 
-**مرحلہ 4: بہتر خصوصیات (اختیاری)**  
-- بہتر صارف تجربے کے لیے اسٹریمنگ جوابات نافذ کریں  
-- کورس مواد کو شامل کرنے کے لیے دستاویز لوڈنگ شامل کریں  
-- مواد کی بازیافت کے لیے مماثلت پر مبنی ایمبیڈنگز بنائیں  
+**مرحلہ 4: بہتر خصوصیات (اختیاری)**
+- بہتر صارف تجربے کے لیے اسٹریمنگ جوابات نافذ کریں
+- کورس مواد کو شامل کرنے کے لیے دستاویز لوڈنگ شامل کریں
+- مواد کی بازیافت کے لیے مماثلت پر مبنی ایمبیڈنگز بنائیں
 
-### تشخیصی معیار  
+### تشخیصی معیار
 
-| خصوصیت | بہترین (4) | اچھا (3) | تسلی بخش (2) | مزید کام کی ضرورت (1) |  
-|---------|---------------|----------|------------------|----------------|  
-| **گفتگو کا بہاؤ** | قدرتی، سیاق و سباق سے آگاہ جوابات | اچھا سیاق و سباق برقرار رکھنا | بنیادی گفتگو | تبادلے کے درمیان کوئی یادداشت نہیں |  
-| **ٹول انضمام** | متعدد مفید ٹولز بغیر کسی رکاوٹ کے کام کر رہے ہیں | 2+ ٹولز درست طریقے سے نافذ کیے گئے | 1-2 بنیادی ٹولز | ٹولز کام نہیں کر رہے |  
-| **کوڈ کا معیار** | صاف، اچھی طرح سے دستاویزی، غلطی کا انتظام | اچھی ساخت، کچھ دستاویزات | بنیادی فعالیت کام کرتی ہے | خراب ساخت، کوئی غلطی کا انتظام نہیں |  
-| **تعلیمی قدر** | سیکھنے کے لیے واقعی مددگار، موافقت پذیر | اچھا تعلیمی تعاون | بنیادی وضاحتیں | محدود تعلیمی فائدہ |  
+| خصوصیت | بہترین (4) | اچھا (3) | تسلی بخش (2) | مزید کام کی ضرورت ہے (1) |
+|---------|---------------|----------|------------------|----------------|
+| **گفتگو کا بہاؤ** | قدرتی، سیاق و سباق سے آگاہ جوابات | اچھا سیاق و سباق برقرار رکھتا ہے | بنیادی گفتگو | تبادلے کے درمیان کوئی یادداشت نہیں |
+| **ٹول انٹیگریشن** | متعدد مفید ٹولز جو بغیر کسی رکاوٹ کے کام کرتے ہیں | 2+ ٹولز درست طریقے سے نافذ کیے گئے | 1-2 بنیادی ٹولز | ٹولز کام نہیں کر رہے |
+| **کوڈ کا معیار** | صاف، اچھی طرح سے دستاویزی، ایرر ہینڈلنگ | اچھی ساخت، کچھ دستاویزات | بنیادی فعالیت کام کرتی ہے | خراب ساخت، کوئی ایرر ہینڈلنگ نہیں |
+| **تعلیمی قدر** | سیکھنے کے لیے واقعی مددگار، موافق | اچھا سیکھنے کا تعاون | بنیادی وضاحتیں | محدود تعلیمی فائدہ |
 
-### نمونہ کوڈ کی ساخت  
+### نمونہ کوڈ کی ساخت
 
 ```python
 class StudyAssistant:
@@ -654,42 +925,101 @@ class StudyAssistant:
 assistant = StudyAssistant(skill_level="intermediate")
 response = assistant.chat("Explain how Python functions work")
 ```
-  
-**اضافی چیلنجز:**  
-- آواز کی ان پٹ/آؤٹ پٹ صلاحیتیں شامل کریں  
-- Streamlit یا Flask کا استعمال کرتے ہوئے ویب انٹرفیس نافذ کریں  
-- ایمبیڈنگز کا استعمال کرتے ہوئے کورس مواد سے علم کا ذخیرہ بنائیں  
-- پیش رفت کی ٹریکنگ اور ذاتی تعلیم کے راستے شامل کریں  
 
-## خلاصہ  
+**اضافی چیلنجز:**
+- وائس ان پٹ/آؤٹ پٹ کی صلاحیتیں شامل کریں
+- Streamlit یا Flask کا استعمال کرتے ہوئے ویب انٹرفیس نافذ کریں
+- ایمبیڈنگز کا استعمال کرتے ہوئے کورس مواد سے نالج بیس بنائیں
+- پروگریس ٹریکنگ اور ذاتی سیکھنے کے راستے شامل کریں
 
-🎉 آپ نے اب AI فریم ورک کی ترقی کے بنیادی اصولوں میں مہارت حاصل کر لی ہے اور LangChain کا استعمال کرتے ہوئے جدید AI ایپلیکیشنز بنانے کا طریقہ سیکھ لیا ہے۔ جیسے ایک جامع تربیت مکمل کرنا، آپ نے مہارتوں کا ایک اہم ٹول کٹ حاصل کر لیا ہے۔ آئیے جائزہ لیتے ہیں کہ آپ نے کیا حاصل کیا ہے۔  
+## 📈 آپ کی AI فریم ورک ڈیولپمنٹ مہارت کا ٹائم لائن
 
-### آپ نے کیا سیکھا  
+```mermaid
+timeline
+    title Production AI Framework Development Journey
+    
+    section Framework Foundations
+        Understanding Abstractions
+            : Master framework vs API decisions
+            : Learn LangChain core concepts
+            : Implement message type systems
+        
+        Basic Integration
+            : Connect to AI providers
+            : Handle authentication
+            : Manage configuration
+    
+    section Conversation Systems
+        Memory Management
+            : Build conversation history
+            : Implement context tracking
+            : Handle session persistence
+        
+        Advanced Interactions
+            : Master streaming responses
+            : Create prompt templates
+            : Implement structured output
+    
+    section Tool Integration
+        Custom Tool Development
+            : Design tool schemas
+            : Implement function calling
+            : Handle external APIs
+        
+        Workflow Automation
+            : Chain multiple tools
+            : Create decision trees
+            : Build agent behaviors
+    
+    section Production Applications
+        Complete System Architecture
+            : Combine all framework features
+            : Implement error boundaries
+            : Create maintainable code
+        
+        Enterprise Readiness
+            : Handle scalability concerns
+            : Implement monitoring
+            : Build deployment strategies
+```
+
+**🎓 گریجویشن سنگ میل**: آپ نے کامیابی کے ساتھ AI فریم ورک ڈیولپمنٹ میں مہارت حاصل کی ہے، وہی ٹولز اور پیٹرنز استعمال کرتے ہوئے جو جدید AI ایپلیکیشنز کو طاقت دیتے ہیں۔ یہ مہارتیں AI ایپلیکیشن ڈیولپمنٹ کے جدید ترین کنارے کی نمائندگی کرتی ہیں اور آپ کو انٹرپرائز گریڈ ذہین سسٹمز بنانے کے لیے تیار کرتی ہیں۔
 
-**بنیادی فریم ورک تصورات:**  
-- **فریم ورک کے فوائد**: براہ راست API کالز کے مقابلے میں فریم ورک کا انتخاب کب کرنا ہے  
-- **LangChain کی بنیادی باتیں**: AI ماڈل کنکشنز کو ترتیب دینا اور تشکیل دینا  
-- **پیغام کی اقسام**: `SystemMessage`, `HumanMessage`, اور `AIMessage` کا استعمال منظم گفتگو کے لیے  
+**🔄 اگلے درجے کی صلاحیتیں**:
+- جدید AI آرکیٹیکچرز (ایجنٹس، ملٹی ایجنٹ سسٹمز) کو دریافت کرنے کے لیے تیار
+- RAG سسٹمز کو ویکٹر ڈیٹا بیس کے ساتھ بنانے کے لیے تیار
+- ملٹی موڈل AI ایپلیکیشنز بنانے کے لیے لیس
+- AI ایپلیکیشن اسکیلنگ اور آپٹیمائزیشن کے لیے بنیاد تیار
 
-**جدید خصوصیات:**  
-- **ٹول کالنگ**: AI صلاحیتوں کو بڑھانے کے لیے حسب ضرورت ٹولز بنانا اور انضمام کرنا  
-- **گفتگو کی یادداشت**: متعدد گفتگو کے دوران سیاق و سباق کو برقرار رکھنا  
-- **اسٹریمنگ جوابات**: حقیقی وقت میں جواب کی ترسیل کو نافذ کرنا  
-- **پرامپٹ ٹیمپلیٹس**: دوبارہ قابل استعمال، متحرک پرامپٹس بنانا  
-- **منظم آؤٹ پٹ**: مستقل، قابل تجزیہ AI جوابات کو یقینی بنانا  
-- **ایمبیڈنگز**: سیمینٹک سرچ اور دستاویز پروسیسنگ کی صلاحیتیں بنانا  
+## خلاصہ
 
-**عملی اطلاقات:**  
-- **مکمل ایپس بنانا**: متعدد خصوصیات کو پروڈکشن کے لیے تیار ایپلیکیشنز میں یکجا کرنا  
-- **غلطی کا انتظام**: مضبوط غلطی کے انتظام اور توثیق کو نافذ کرنا  
-- **ٹول انضمام**: حسب ضرورت ٹولز بنانا جو AI صلاحیتوں کو بڑھاتے ہیں  
+🎉 آپ نے اب AI فریم ورک ڈیولپمنٹ کے بنیادی اصولوں میں مہارت حاصل کر لی ہے اور LangChain کا استعمال کرتے ہوئے نفیس AI ایپلیکیشنز بنانے کا طریقہ سیکھ لیا ہے۔ جیسے ایک جامع اپرنٹس شپ مکمل کرنا، آپ نے مہارتوں کا ایک اہم ٹول کٹ حاصل کر لیا ہے۔ آئیے جائزہ لیں کہ آپ نے کیا حاصل کیا ہے۔
 
-### اہم نکات  
+### آپ نے کیا سیکھا
 
-> 🎯 **یاد رکھیں**: LangChain جیسے AI فریم ورک بنیادی طور پر آپ کے پیچیدگی کو چھپانے والے، خصوصیات سے بھرے بہترین دوست ہیں۔ یہ کامل ہیں جب آپ کو گفتگو کی یادداشت، ٹول کالنگ، یا متعدد AI ماڈلز کے ساتھ کام کرنے کی ضرورت ہو بغیر اپنی ذہنی سکون کھونے کے۔  
+**بنیادی فریم ورک تصورات:**
+- **فریم ورک کے فوائد**: براہ راست API کالز کے مقابلے میں فریم ورک کا انتخاب کب کرنا ہے
+- **LangChain کی بنیادی باتیں**: AI ماڈل کنکشنز کو ترتیب دینا اور تشکیل دینا
+- **پیغام کی اقسام**: منظم گفتگو کے لیے `SystemMessage`، `HumanMessage`، اور `AIMessage` کا استعمال
 
-**AI انضمام کے لیے فیصلہ سازی کا فریم ورک:**  
+**جدید خصوصیات:**
+- **ٹول کالنگ**: AI کی صلاحیتوں کو بڑھانے کے لیے حسب ضرورت ٹولز بنانا اور انٹیگریٹ کرنا
+- **گفتگو کی یادداشت**: متعدد گفتگو کے دوران سیاق و سباق برقرار رکھنا
+- **اسٹریمنگ جوابات**: حقیقی وقت میں جواب کی ترسیل کو نافذ کرنا
+- **پرامپٹ ٹیمپلیٹس**: دوبارہ استعمال کے قابل، متحرک پرامپٹس بنانا
+- **منظم آؤٹ پٹ**: مستقل، قابل تجزیہ AI جوابات کو یقینی بنانا
+- **ایمبیڈنگز**: سیمینٹک سرچ اور دستاویز پروسیسنگ کی صلاحیتیں بنانا
+
+**عملی ایپلیکیشنز:**
+- **مکمل ایپس بنانا**: متعدد خصوصیات کو پروڈکشن ریڈی ایپلیکیشنز میں یکجا کرنا
+- **ایرر ہینڈلنگ**: مضبوط ایرر مینجمنٹ اور توثیق کو نافذ کرنا
+- **ٹول انٹیگریشن**: AI کی صلاحیتوں کو بڑھانے کے لیے حسب ضرورت ٹولز بنانا
+
+### اہم نکات
+
+> 🎯 **یاد رکھیں**: LangChain جیسے AI فریم ورک بنیادی طور پر آپ کے پیچیدگی کو چھپانے والے، خصوصیات سے بھرے بہترین دوست ہیں۔ وہ کامل ہیں جب آپ کو گفتگو کی یادداشت، ٹول کالنگ، یا متعدد AI ماڈلز کے ساتھ کام کرنے کی ضرورت ہو بغیر اپنی عقل کھونے کے۔
+
+**AI انٹیگریشن کے لیے فیصلہ فریم ورک:**
 
 ```mermaid
 flowchart TD
@@ -706,43 +1036,43 @@ flowchart TD
     G --> K[LangChain basic chat]
     H --> L[LangChain with tools, memory, agents]
 ```
-  
-### آگے کیا کریں؟  
 
-**ابھی بنانا شروع کریں:**  
-- ان تصورات کو لے کر کچھ ایسا بنائیں جو آپ کو پرجوش کرے!  
-- LangChain کے ذریعے مختلف AI ماڈلز کے ساتھ کھیلیں - یہ AI ماڈلز کا ایک کھیل کا میدان ہے  
-- ایسے ٹولز بنائیں جو آپ کے کام یا منصوبوں میں آپ کو درپیش حقیقی مسائل کو حل کریں  
+### اب آپ کہاں جائیں گے؟
+
+**ابھی بنانا شروع کریں:**
+- ان تصورات کو لے کر کچھ ایسا بنائیں جو آپ کو پرجوش کرے!
+- LangChain کے ذریعے مختلف AI ماڈلز کے ساتھ کھیلیں - یہ AI ماڈلز کا ایک کھیل کا میدان ہے
+- ایسے ٹولز بنائیں جو آپ کے کام یا پروجیکٹس میں آپ کو درپیش حقیقی مسائل کو حل کریں
 
-**اگلے درجے کے لیے تیار ہیں؟**  
-- **AI ایجنٹس**: AI سسٹمز بنائیں جو خود پیچیدہ کاموں کی منصوبہ بندی اور انجام دے سکیں  
-- **RAG (Retrieval-Augmented Generation)**: AI کو اپنے علم کے ذخیرے کے ساتھ جوڑیں تاکہ سپر پاورڈ ایپلیکیشنز بن سکیں  
-- **ملٹی موڈل AI**: متن، تصاویر، اور آڈیو کے ساتھ ایک ساتھ کام کریں - امکانات لامحدود ہیں!  
-- **پروڈکشن ڈیپلائمنٹ**: اپنی AI ایپس کو پیمانے اور حقیقی دنیا میں ان کی نگرانی کرنا سیکھیں  
+**اگلے درجے کے لیے تیار؟**
+- **AI ایجنٹس**: AI سسٹمز بنائیں جو خود پیچیدہ کاموں کی منصوبہ بندی اور انجام دے سکیں
+- **RAG (ریٹریول-اگمینٹڈ جنریشن)**: AI کو اپنے نالج بیس کے ساتھ یکجا کریں تاکہ سپر پاورڈ ایپلیکیشنز بن سکیں
+- **ملٹی موڈل AI**: متن، تصاویر، اور آڈیو کے ساتھ کام کریں - امکانات لامحدود ہیں!
+- **پروڈکشن ڈیپلائمنٹ**: اپنی AI ایپس کو اسکیل کرنے اور حقیقی دنیا میں ان کی نگرانی کرنے کا طریقہ سیکھیں
 
-**کمیونٹی میں شامل ہوں:**  
-- LangChain کمیونٹی بہترین ہے تازہ ترین رہنے اور بہترین طریقے سیکھنے کے لیے  
-- GitHub Models آپ کو جدید AI صلاحیتوں تک رسائی فراہم کرتا ہے - تجربہ کرنے کے لیے بہترین  
-- مختلف استعمال کے معاملات کے ساتھ مشق کرتے رہیں - ہر منصوبہ آپ کو کچھ نیا سکھائے گا  
+**کمیونٹی میں شامل ہوں:**
+- LangChain کمیونٹی بہترین ہے تازہ ترین رہنے اور بہترین طریقے سیکھنے کے لیے
+- GitHub Models آپ کو جدید AI صلاحیتوں تک رسائی فراہم کرتا ہے - تجربہ کرنے کے لیے بہترین
+- مختلف استعمال کے معاملات کے ساتھ مشق کرتے رہیں - ہر پروجیکٹ آپ کو کچھ نیا سکھائے گا
 
-اب آپ کے پاس ذہین، گفتگو کرنے والی ایپلیکیشنز بنانے کا علم ہے جو لوگوں کو حقیقی مسائل حل کرنے میں مدد دے سکتی ہیں۔ جیسے نشاۃ ثانیہ کے کاریگر جو فنکارانہ وژن کو تکنیکی مہارت کے ساتھ جوڑتے تھے، آپ اب AI صلاحیتوں کو عملی اطلاق کے ساتھ جوڑ سکتے ہیں۔ سوال یہ ہے: آپ کیا بنائیں گے؟ 🚀  
+اب آپ کے پاس ذہین، گفتگو کرنے والی ایپلیکیشنز بنانے کا علم ہے جو لوگوں کو حقیقی مسائل حل کرنے میں مدد دے سکتی ہیں۔ جیسے نشاۃ ثانیہ کے کاریگر جنہوں نے فنی وژن کو تکنیکی مہارت کے ساتھ یکجا کیا، آپ اب AI کی صلاحیتوں کو عملی ایپلیکیشن کے ساتھ یکجا کر سکتے ہیں۔ سوال یہ ہے: آپ کیا بنائیں گے؟ 🚀
 
-## GitHub Copilot Agent Challenge 🚀  
+## GitHub Copilot Agent Challenge 🚀
 
-Agent mode کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:  
+ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** ایک جدید AI سے چلنے والا کوڈ ریویو اسسٹنٹ بنائیں جو متعدد LangChain خصوصیات کو یکجا کرے، بشمول ٹول کالنگ، منظم آؤٹ پٹ، اور گفتگو کی یادداشت، تاکہ کوڈ جمع کرانے پر جامع تاثرات فراہم کیے جا سکیں۔  
+**تفصیل:** ایک جدید AI پاورڈ کوڈ ریویو اسسٹنٹ بنائیں جو متعدد LangChain خصوصیات کو یکجا کرے، بشمول ٹول کالنگ، منظم آؤٹ پٹ، اور گفتگو کی یادداشت، تاکہ کوڈ جمع کرانے پر جامع تاثرات فراہم کیے جا سکیں۔
 
-**پرامپٹ:** ایک CodeReviewAssistant کلاس بنائیں جو نافذ کرے:  
-1. کوڈ کی پیچیدگی کا تجزیہ کرنے اور بہتری کی تجاویز دینے کے لیے ایک ٹول  
-2. بہترین طریقوں کے خلاف کوڈ کی جانچ کرنے کے لیے ایک ٹول  
-3. منظم آؤٹ پٹ کے لیے Pydantic ماڈلز کا استعمال جو مستقل ریویو فارمیٹ فراہم کرے  
-4. ریویو سیشنز کو ٹریک کرنے کے لیے گفتگو کی یادداشت  
-5. ایک مرکزی چیٹ انٹرفیس جو کوڈ جمع کرانے کو سنبھال سکے اور تفصیلی، قابل عمل تاثرات فراہم کرے  
+**پرامپٹ:** ایک CodeReviewAssistant کلاس بنائیں جو نافذ کرے:
+1. کوڈ کی پیچیدگی کا تجزیہ کرنے اور بہتری کی تجاویز دینے کے لیے ایک ٹول
+2. بہترین طریقوں کے خلاف کوڈ کی جانچ کرنے کے لیے ایک ٹول
+3. Pydantic ماڈلز کا استعمال کرتے ہوئے منظم آؤٹ پٹ کے لیے مستقل ریویو فارمیٹ
+4. ریویو سیشنز کو ٹریک کرنے کے لیے گفتگو کی یادداشت
+5. ایک مرکزی چیٹ انٹرفیس جو کوڈ جمع کرانے کو سنبھال سکے اور تفصیلی، قابل عمل تاثرات فراہم کرے
 
-اسسٹنٹ کو متعدد پروگرامنگ زبانوں میں کوڈ کا جائزہ لینے کے قابل ہونا چاہیے، ایک سیشن میں متعدد کوڈ جمع کرانے کے دوران سیاق و سباق کو برقرار رکھنا چاہیے، اور خلاصہ اسکورز اور تفصیلی بہتری کی تجاویز دونوں فراہم کرنا چاہیے۔  
+اسسٹنٹ کو متعدد پروگرامنگ زبانوں میں کوڈ کا جائزہ لینے، ایک سیشن میں متعدد کوڈ جمع کرانے کے دوران سیاق و سباق برقرار رکھنے، اور خلاصہ اسکورز اور تفصیلی بہتری کی تجاویز فراہم کرنے کے قابل ہونا چاہیے۔
 
-مزید جانیں [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) یہاں۔  
+[ایجنٹ موڈ کے بارے میں مزید جانیں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
 
 ---
 
diff --git a/translations/ur/2-js-basics/1-data-types/README.md b/translations/ur/2-js-basics/1-data-types/README.md
index ace9ea3d35..286311f42b 100644
--- a/translations/ur/2-js-basics/1-data-types/README.md
+++ b/translations/ur/2-js-basics/1-data-types/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d0092f6533ae3ec3adad5b5ece68efaf",
-  "translation_date": "2025-10-22T14:31:31+00:00",
+  "original_hash": "672b0bb6e8b431075f3bdb7130590d2d",
+  "translation_date": "2025-11-03T12:52:12+00:00",
   "source_file": "2-js-basics/1-data-types/README.md",
   "language_code": "ur"
 }
@@ -10,13 +10,30 @@ CO_OP_TRANSLATOR_METADATA:
 # جاوا اسکرپٹ کی بنیادی باتیں: ڈیٹا کی اقسام
 
 ![جاوا اسکرپٹ کی بنیادی باتیں - ڈیٹا کی اقسام](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ur.png)
-> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی جانب سے
+> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
+
+```mermaid
+journey
+    title Your JavaScript Data Types Adventure
+    section Foundation
+      Variables & Constants: 5: You
+      Declaration Syntax: 4: You
+      Assignment Concepts: 5: You
+    section Core Types
+      Numbers & Math: 4: You
+      Strings & Text: 5: You
+      Booleans & Logic: 4: You
+    section Apply Knowledge
+      Type Conversion: 4: You
+      Real-world Examples: 5: You
+      Best Practices: 5: You
+```
 
 ڈیٹا کی اقسام جاوا اسکرپٹ کے بنیادی تصورات میں سے ایک ہیں جن کا سامنا آپ کو ہر پروگرام میں ہوگا جو آپ لکھتے ہیں۔ ڈیٹا کی اقسام کو قدیم لائبریریوں کے فائلنگ سسٹم کی طرح سمجھیں – ان کے پاس شاعری، ریاضی، اور تاریخی ریکارڈز کے لیے مخصوص جگہیں تھیں۔ جاوا اسکرپٹ معلومات کو اسی طرح مختلف اقسام میں منظم کرتا ہے۔
 
-اس سبق میں، ہم جاوا اسکرپٹ کو چلانے والی بنیادی ڈیٹا کی اقسام کا جائزہ لیں گے۔ آپ سیکھیں گے کہ نمبروں، متن، سچ/جھوٹ کی قدروں کو کیسے سنبھالنا ہے، اور یہ سمجھیں گے کہ آپ کے پروگراموں کے لیے صحیح قسم کا انتخاب کیوں ضروری ہے۔ یہ تصورات شروع میں تجریدی لگ سکتے ہیں، لیکن مشق کے ساتھ، یہ آپ کے لیے فطری بن جائیں گے۔
+اس سبق میں، ہم جاوا اسکرپٹ کو چلانے والی بنیادی ڈیٹا کی اقسام کا جائزہ لیں گے۔ آپ سیکھیں گے کہ نمبروں، متن، سچ/جھوٹ کی اقدار کو کیسے سنبھالنا ہے، اور یہ سمجھیں گے کہ آپ کے پروگراموں کے لیے صحیح قسم کا انتخاب کیوں ضروری ہے۔ یہ تصورات شروع میں تجریدی لگ سکتے ہیں، لیکن مشق کے ساتھ، یہ آپ کے لیے آسان ہو جائیں گے۔
 
-ڈیٹا کی اقسام کو سمجھنا جاوا اسکرپٹ میں باقی سب کچھ واضح کر دے گا۔ جیسے معماروں کو گرجا گھر بنانے سے پہلے مختلف تعمیراتی مواد کو سمجھنا ضروری ہوتا ہے، یہ بنیادی باتیں آپ کے آگے بڑھنے والے ہر کام کی حمایت کریں گی۔
+ڈیٹا کی اقسام کو سمجھنا جاوا اسکرپٹ میں باقی سب کچھ بہت واضح کر دے گا۔ جیسے معماروں کو گرجا گھر بنانے سے پہلے مختلف تعمیراتی مواد کو سمجھنا ضروری ہوتا ہے، یہ بنیادی باتیں آپ کے آگے بڑھنے والے ہر کام کی حمایت کریں گی۔
 
 ## لیکچر سے پہلے کا کوئز
 [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/)
@@ -31,7 +48,39 @@ CO_OP_TRANSLATOR_METADATA:
 
 > 🎥 اوپر دی گئی تصاویر پر کلک کریں تاکہ متغیرات اور ڈیٹا کی اقسام کے بارے میں ویڈیوز دیکھ سکیں
 
-آئیے متغیرات اور ان ڈیٹا کی اقسام سے شروع کرتے ہیں جو انہیں آباد کرتے ہیں!
+چلیں متغیرات اور ان میں موجود ڈیٹا کی اقسام سے شروع کرتے ہیں!
+
+```mermaid
+mindmap
+  root((JavaScript Data))
+    Variables
+      let myVar
+      const PI = 3.14
+      var oldStyle
+    Primitive Types
+      number
+        42
+        3.14
+        -5
+      string
+        "Hello"
+        'World'
+        `Template`
+      boolean
+        true
+        false
+      undefined
+      null
+    Operations
+      Arithmetic
+        + - * / %
+      String Methods
+        concatenation
+        template literals
+      Type Conversion
+        implicit
+        explicit
+```
 
 ## متغیرات
 
@@ -41,10 +90,10 @@ CO_OP_TRANSLATOR_METADATA:
 
 متغیر بنانے اور **اعلان کرنے** کا درج ذیل نحو ہے **[keyword] [name]**۔ یہ دو حصوں پر مشتمل ہے:
 
-- **کلیدی لفظ**۔ ان متغیرات کے لیے `let` استعمال کریں جو تبدیل ہو سکتے ہیں، یا ان قدروں کے لیے `const` جو ہمیشہ ایک جیسی رہتی ہیں۔
+- **کلیدی لفظ**۔ ایسے متغیرات کے لیے `let` استعمال کریں جو تبدیل ہو سکتے ہیں، یا ایسی اقدار کے لیے `const` جو ہمیشہ ایک جیسی رہتی ہیں۔
 - **متغیر کا نام**، یہ ایک وضاحتی نام ہے جو آپ خود منتخب کرتے ہیں۔
 
-✅ کلیدی لفظ `let` ES6 میں متعارف کرایا گیا تھا اور آپ کے متغیر کو ایک _block scope_ دیتا ہے۔ یہ تجویز کیا جاتا ہے کہ آپ `let` یا `const` استعمال کریں بجائے پرانے `var` کلیدی لفظ کے۔ ہم مستقبل کے حصوں میں بلاک اسکوپس کو مزید گہرائی سے کور کریں گے۔
+✅ کلیدی لفظ `let` ES6 میں متعارف کرایا گیا تھا اور آپ کے متغیر کو ایک _بلاک اسکوپ_ دیتا ہے۔ یہ تجویز کیا جاتا ہے کہ آپ `let` یا `const` استعمال کریں بجائے پرانے `var` کلیدی لفظ کے۔ ہم مستقبل کے حصوں میں بلاک اسکوپ کو مزید گہرائی سے کور کریں گے۔
 
 ### کام - متغیرات کے ساتھ کام کرنا
 
@@ -68,9 +117,9 @@ CO_OP_TRANSLATOR_METADATA:
    **تفویض کیسے کام کرتی ہے:**
    - `=` آپریٹر ہمارے متغیر کو 123 کی قدر تفویض کرتا ہے
    - متغیر اب اس قدر کو رکھتا ہے بجائے غیر متعین ہونے کے
-   - آپ اپنے کوڈ میں `myVariable` کا استعمال کرتے ہوئے اس قدر کا حوالہ دے سکتے ہیں
+   - آپ اپنے کوڈ میں اس قدر کا حوالہ دے سکتے ہیں `myVariable` استعمال کرتے ہوئے
 
-   > نوٹ: اس سبق میں `=` کا استعمال ایک "تفویض آپریٹر" کے طور پر ہوتا ہے، جو متغیر کو ایک قدر تفویض کرنے کے لیے استعمال ہوتا ہے۔ یہ مساوات کو ظاہر نہیں کرتا۔
+   > نوٹ: اس سبق میں `=` کا استعمال ایک "تفویض آپریٹر" کے طور پر کیا جاتا ہے، جو متغیر کو ایک قدر تفویض کرنے کے لیے استعمال ہوتا ہے۔ یہ مساوات کو ظاہر نہیں کرتا۔
 
 3. **سمارٹ طریقہ اختیار کریں**۔ دراصل، آئیے ان دونوں مراحل کو یکجا کریں:
 
@@ -92,17 +141,45 @@ CO_OP_TRANSLATOR_METADATA:
    **دوبارہ تفویض کو سمجھنا:**
    - متغیر اب 321 رکھتا ہے بجائے 123 کے
    - پچھلی قدر کو تبدیل کر دیا گیا ہے – متغیرات ایک وقت میں صرف ایک قدر ذخیرہ کرتے ہیں
-   - یہ تبدیلی `let` کے ساتھ اعلان کردہ متغیرات کی کلیدی خصوصیت ہے
+   - یہ تبدیلی متغیرات کے ساتھ `let` کے ذریعے اعلان کردہ کلیدی خصوصیت ہے
+
+   ✅ اسے آزمائیں! آپ اپنے براؤزر میں جاوا اسکرپٹ لکھ سکتے ہیں۔ ایک براؤزر ونڈو کھولیں اور ڈیولپر ٹولز پر جائیں۔ کنسول میں، آپ کو ایک پرامپٹ ملے گا؛ `let myVariable = 123` ٹائپ کریں، ریٹرن دبائیں، پھر `myVariable` ٹائپ کریں۔ کیا ہوتا ہے؟ نوٹ کریں، آپ ان تصورات کے بارے میں مزید اگلے اسباق میں سیکھیں گے۔
+
+### 🧠 **متغیرات کی مہارت چیک: آرام دہ ہونا**
+
+**آئیے دیکھتے ہیں کہ آپ متغیرات کے بارے میں کیسا محسوس کر رہے ہیں:**
+- کیا آپ متغیر کے اعلان اور تفویض کے درمیان فرق کی وضاحت کر سکتے ہیں؟
+- اگر آپ کسی متغیر کو اعلان کرنے سے پہلے استعمال کرنے کی کوشش کریں تو کیا ہوتا ہے؟
+- آپ `let` کو `const` پر کب ترجیح دیں گے؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> Declared: let myVar
+    Declared --> Assigned: myVar = 123
+    Assigned --> Reassigned: myVar = 456
+    Assigned --> [*]: Variable ready!
+    Reassigned --> [*]: Updated value
+    
+    note right of Declared
+        Variable exists but
+        has no value (undefined)
+    end note
+    
+    note right of Assigned
+        Variable contains
+        the value 123
+    end note
+```
 
-   ✅ اسے آزمائیں! آپ اپنے براؤزر میں براہ راست جاوا اسکرپٹ لکھ سکتے ہیں۔ ایک براؤزر ونڈو کھولیں اور ڈیولپر ٹولز پر جائیں۔ کنسول میں، آپ کو ایک پرامپٹ ملے گا؛ `let myVariable = 123` ٹائپ کریں، ریٹرن دبائیں، پھر `myVariable` ٹائپ کریں۔ کیا ہوتا ہے؟ نوٹ کریں، آپ ان تصورات کے بارے میں مزید اگلے اسباق میں سیکھیں گے۔
+> **جلدی سے مشورہ**: متغیرات کو لیبل والے اسٹوریج باکسز کے طور پر سوچیں۔ آپ باکس بناتے ہیں (`let`)، اس میں کچھ ڈالتے ہیں (`=`)، اور بعد میں اگر ضرورت ہو تو مواد کو تبدیل کر سکتے ہیں!
 
 ## مستقلات
 
-کبھی کبھی آپ کو ایسی معلومات ذخیرہ کرنے کی ضرورت ہوتی ہے جو پروگرام کے دوران کبھی تبدیل نہیں ہونی چاہیے۔ مستقلات کو ان ریاضیاتی اصولوں کی طرح سمجھیں جو یوقلیڈ نے قدیم یونان میں قائم کیے تھے – ایک بار ثابت اور دستاویزی ہونے کے بعد، وہ تمام مستقبل کے حوالہ کے لیے مقرر رہے۔
+کبھی کبھی آپ کو ایسی معلومات ذخیرہ کرنے کی ضرورت ہوتی ہے جو پروگرام کے دوران کبھی تبدیل نہ ہو۔ مستقلات کو ان ریاضیاتی اصولوں کی طرح سمجھیں جو یورپ میں قدیم یونان میں قائم کیے گئے تھے – ایک بار ثابت اور دستاویزی، وہ تمام مستقبل کے حوالہ کے لیے مستقل رہے۔
 
-مستقلات متغیرات کی طرح کام کرتے ہیں، لیکن ایک اہم پابندی کے ساتھ: ایک بار جب آپ ان کی قدر تفویض کرتے ہیں، تو اسے تبدیل نہیں کیا جا سکتا۔ یہ غیر ارادی طور پر آپ کے پروگرام میں اہم قدروں میں ترمیم کو روکنے میں مدد کرتا ہے۔
+مستقلات متغیرات کی طرح کام کرتے ہیں، لیکن ایک اہم پابندی کے ساتھ: ایک بار جب آپ ان کی قدر تفویض کرتے ہیں، تو اسے تبدیل نہیں کیا جا سکتا۔ یہ غیر متغیر خصوصیت آپ کے پروگرام میں اہم اقدار کو حادثاتی ترمیم سے بچانے میں مدد کرتی ہے۔
 
-مستقل کا اعلان اور ابتدائیہ متغیر کی طرح کے تصورات کی پیروی کرتا ہے، سوائے `const` کلیدی لفظ کے۔ مستقلات کو عام طور پر تمام بڑے حروف میں اعلان کیا جاتا ہے۔
+مستقل کے اعلان اور ابتدائیہ وہی تصورات پر عمل کرتے ہیں جیسے متغیر، سوائے `const` کلیدی لفظ کے۔ مستقلات عام طور پر تمام بڑے حروف کے ساتھ اعلان کیے جاتے ہیں۔
 
 ```javascript
 const MY_VARIABLE = 123;
@@ -127,8 +204,8 @@ const MY_VARIABLE = 123;
 
    **آپ کو کیا یاد رکھنا ہے:**
    - **مستقل کو دوبارہ تفویض کرنے کی کوششیں** ایک غلطی کا سبب بنیں گی
-   - **اہم قدروں کو حادثاتی تبدیلیوں سے بچاتا ہے**
-   - **یقینی بناتا ہے** کہ قدر آپ کے پروگرام میں مستقل رہے
+   - **اہم اقدار کو حادثاتی تبدیلیوں سے بچاتا ہے**
+   - **یقینی بناتا ہے** کہ قدر آپ کے پروگرام کے دوران مستقل رہے
 
    **آبجیکٹ حوالہ محفوظ ہے** - درج ذیل کی اجازت نہیں ہے:
    
@@ -138,11 +215,11 @@ const MY_VARIABLE = 123;
       ```
 
    **ان تصورات کو سمجھنا:**
-   - **پورے آبجیکٹ کو ایک نئے کے ساتھ تبدیل کرنے سے روکتا ہے**
+   - **پورے آبجیکٹ کو ایک نئے سے تبدیل کرنے سے روکتا ہے**
    - **اصل آبجیکٹ کے حوالہ کو محفوظ رکھتا ہے**
    - **میموری میں آبجیکٹ کی شناخت کو برقرار رکھتا ہے**
 
-    **آبجیکٹ قدر محفوظ نہیں ہے** - درج ذیل کی اجازت ہے:
+    **آبجیکٹ کی قدر محفوظ نہیں ہے** - درج ذیل کی اجازت ہے:
     
       ```javascript
       const obj = { a: 3 };
@@ -151,63 +228,103 @@ const MY_VARIABLE = 123;
 
       **یہاں کیا ہوتا ہے:**
       - **آبجیکٹ کے اندر پراپرٹی کی قدر کو تبدیل کرتا ہے**
-      - **اسی آبجیکٹ کے حوالہ کو برقرار رکھتا ہے**
-      - **دکھاتا ہے** کہ آبجیکٹ کے مواد تبدیل ہو سکتے ہیں جبکہ حوالہ مستقل رہتا ہے
+      - **وہی آبجیکٹ حوالہ رکھتا ہے**
+      - **دکھاتا ہے کہ آبجیکٹ کے مواد تبدیل ہو سکتے ہیں جبکہ حوالہ مستقل رہتا ہے**
 
-   > نوٹ کریں، ایک `const` کا مطلب ہے کہ حوالہ دوبارہ تفویض سے محفوظ ہے۔ قدر _غیر تبدیل پذیر_ نہیں ہے اور تبدیل ہو سکتی ہے، خاص طور پر اگر یہ ایک پیچیدہ تعمیر جیسے آبجیکٹ ہو۔
+   > نوٹ کریں، `const` کا مطلب ہے کہ حوالہ دوبارہ تفویض سے محفوظ ہے۔ قدر _غیر متغیر_ نہیں ہے اور تبدیل ہو سکتی ہے، خاص طور پر اگر یہ ایک پیچیدہ ساخت جیسے آبجیکٹ ہو۔
 
 ## ڈیٹا کی اقسام
 
-جاوا اسکرپٹ معلومات کو مختلف اقسام میں منظم کرتا ہے جنہیں ڈیٹا کی اقسام کہا جاتا ہے۔ یہ تصور اس طرح ہے جیسے قدیم علماء نے علم کو درجہ بندی کیا – ارسطو نے مختلف قسم کی دلیلوں کے درمیان فرق کیا، یہ جانتے ہوئے کہ منطقی اصولوں کو شاعری، ریاضیات، اور قدرتی فلسفہ پر یکساں طور پر لاگو نہیں کیا جا سکتا۔
+جاوا اسکرپٹ معلومات کو مختلف اقسام میں منظم کرتا ہے جنہیں ڈیٹا کی اقسام کہا جاتا ہے۔ یہ تصور اس طرح ہے جیسے قدیم علماء نے علم کو مختلف اقسام میں تقسیم کیا – ارسطو نے مختلف قسم کی دلیلوں کے درمیان فرق کیا، یہ جانتے ہوئے کہ منطقی اصول شاعری، ریاضی، اور قدرتی فلسفہ پر یکساں طور پر لاگو نہیں ہو سکتے۔
 
-ڈیٹا کی اقسام اہم ہیں کیونکہ مختلف آپریشنز مختلف قسم کی معلومات کے ساتھ کام کرتے ہیں۔ جیسے آپ کسی شخص کے نام پر ریاضی نہیں کر سکتے یا ریاضیاتی مساوات کو حروف تہجی کے مطابق ترتیب نہیں دے سکتے، جاوا اسکرپٹ ہر آپریشن کے لیے مناسب ڈیٹا کی قسم کی ضرورت ہوتی ہے۔ اسے سمجھنا غلطیوں کو روکتا ہے اور آپ کے کوڈ کو زیادہ قابل اعتماد بناتا ہے۔
+ڈیٹا کی اقسام اہم ہیں کیونکہ مختلف آپریشنز مختلف قسم کی معلومات کے ساتھ کام کرتے ہیں۔ جیسے آپ کسی شخص کے نام پر ریاضی نہیں کر سکتے یا کسی ریاضیاتی مساوات کو حروف تہجی کے مطابق ترتیب نہیں دے سکتے، جاوا اسکرپٹ ہر آپریشن کے لیے مناسب ڈیٹا کی قسم کی ضرورت ہوتی ہے۔ اسے سمجھنا غلطیوں کو روکتا ہے اور آپ کے کوڈ کو زیادہ قابل اعتماد بناتا ہے۔
 
-متغیرات مختلف قسم کی قدروں کو ذخیرہ کر سکتے ہیں، جیسے نمبر اور متن۔ ان مختلف قسم کی قدروں کو **ڈیٹا کی قسم** کہا جاتا ہے۔ ڈیٹا کی اقسام سافٹ ویئر ڈویلپمنٹ کا ایک اہم حصہ ہیں کیونکہ یہ ڈویلپرز کو یہ فیصلہ کرنے میں مدد دیتی ہیں کہ کوڈ کو کیسے لکھا جانا چاہیے اور سافٹ ویئر کو کیسے چلنا چاہیے۔ مزید برآں، کچھ ڈیٹا کی اقسام میں منفرد خصوصیات ہوتی ہیں جو کسی قدر میں اضافی معلومات کو تبدیل کرنے یا نکالنے میں مدد کرتی ہیں۔
+متغیرات مختلف قسم کی اقدار ذخیرہ کر سکتے ہیں، جیسے نمبر اور متن۔ ان مختلف قسم کی اقدار کو **ڈیٹا کی قسم** کہا جاتا ہے۔ ڈیٹا کی اقسام سافٹ ویئر ڈویلپمنٹ کا ایک اہم حصہ ہیں کیونکہ یہ ڈویلپرز کو یہ فیصلہ کرنے میں مدد دیتی ہیں کہ کوڈ کیسے لکھا جانا چاہیے اور سافٹ ویئر کیسے چلنا چاہیے۔ مزید برآں، کچھ ڈیٹا کی اقسام میں منفرد خصوصیات ہوتی ہیں جو کسی قدر میں اضافی معلومات کو تبدیل کرنے یا نکالنے میں مدد کرتی ہیں۔
 
-✅ ڈیٹا کی اقسام کو جاوا اسکرپٹ ڈیٹا پرائمٹوز بھی کہا جاتا ہے، کیونکہ یہ زبان کے ذریعہ فراہم کردہ سب سے کم سطح کی ڈیٹا کی اقسام ہیں۔ سات پرائمٹوز ہیں: string، number، bigint، boolean، undefined، null اور symbol۔ ایک لمحہ نکالیں اور تصور کریں کہ ان میں سے ہر ایک پرائمٹوز کیا ظاہر کر سکتا ہے۔ `zebra` کیا ہے؟ `0` کے بارے میں کیا خیال ہے؟ `true`؟
+✅ ڈیٹا کی اقسام کو جاوا اسکرپٹ ڈیٹا پرائمٹیوز بھی کہا جاتا ہے، کیونکہ یہ زبان کے ذریعہ فراہم کردہ سب سے کم سطح کی ڈیٹا کی اقسام ہیں۔ 7 پرائمٹیو ڈیٹا کی اقسام ہیں: string, number, bigint, boolean, undefined, null اور symbol۔ ایک لمحہ نکال کر تصور کریں کہ ان میں سے ہر ایک پرائمٹیو کیا ظاہر کر سکتا ہے۔ `zebra` کیا ہے؟ `0` کے بارے میں کیا خیال ہے؟ `true`؟
 
 ### نمبر
 
-نمبر جاوا اسکرپٹ میں سب سے سیدھی ڈیٹا کی قسم ہیں۔ چاہے آپ پورے نمبروں جیسے 42، اعشاریہ جیسے 3.14، یا منفی نمبروں جیسے -5 کے ساتھ کام کر رہے ہوں، جاوا اسکرپٹ انہیں یکساں طور پر سنبھالتا ہے۔
+نمبر جاوا اسکرپٹ میں سب سے سیدھی ڈیٹا کی قسم ہیں۔ چاہے آپ پورے نمبر جیسے 42، اعشاریہ جیسے 3.14، یا منفی نمبر جیسے -5 کے ساتھ کام کر رہے ہوں، جاوا اسکرپٹ انہیں یکساں طور پر سنبھالتا ہے۔
 
-یاد ہے ہمارا متغیر پہلے؟ وہ 123 جو ہم نے ذخیرہ کیا تھا دراصل ایک نمبر ڈیٹا کی قسم تھی:
+ہمارے پہلے متغیر کو یاد رکھیں؟ وہ 123 جو ہم نے ذخیرہ کیا تھا دراصل ایک نمبر ڈیٹا کی قسم تھی:
 
 ```javascript
 let myVariable = 123;
 ```
 
 **اہم خصوصیات:**
-- جاوا اسکرپٹ خود بخود عددی قدروں کو پہچانتا ہے
-- آپ ان متغیرات کے ساتھ ریاضیاتی آپریشنز انجام دے سکتے ہیں
+- جاوا اسکرپٹ خود بخود عددی اقدار کو پہچانتا ہے
+- آپ ان متغیرات کے ساتھ ریاضی کے آپریشنز انجام دے سکتے ہیں
 - کسی واضح قسم کے اعلان کی ضرورت نہیں ہے
 
-متغیرات تمام قسم کے نمبروں کو ذخیرہ کر سکتے ہیں، بشمول اعشاریہ یا منفی نمبر۔ نمبر ریاضیاتی آپریٹرز کے ساتھ بھی استعمال کیے جا سکتے ہیں، جو [اگلے حصے](../../../../2-js-basics/1-data-types) میں شامل ہیں۔
+متغیرات تمام قسم کے نمبر ذخیرہ کر سکتے ہیں، بشمول اعشاریہ یا منفی نمبر۔ نمبر ریاضیاتی آپریٹرز کے ساتھ بھی استعمال کیے جا سکتے ہیں، جو [اگلے حصے](../../../../2-js-basics/1-data-types) میں شامل ہیں۔
+
+```mermaid
+flowchart LR
+    A["🔢 Numbers"] --> B["➕ Addition"]
+    A --> C["➖ Subtraction"]
+    A --> D["✖️ Multiplication"]
+    A --> E["➗ Division"]
+    A --> F["📊 Remainder %"]
+    
+    B --> B1["1 + 2 = 3"]
+    C --> C1["5 - 3 = 2"]
+    D --> D1["4 * 3 = 12"]
+    E --> E1["10 / 2 = 5"]
+    F --> F1["7 % 3 = 1"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
 
 ### ریاضیاتی آپریٹرز
 
-ریاضیاتی آپریٹرز آپ کو جاوا اسکرپٹ میں ریاضیاتی حسابات انجام دینے کی اجازت دیتے ہیں۔ یہ آپریٹرز وہی اصولوں پر عمل کرتے ہیں جو صدیوں سے ریاضی دان استعمال کرتے رہے ہیں – وہی علامتیں جو اسکالرز جیسے الخوارزمی کے کاموں میں ظاہر ہوئیں، جنہوں نے الجبرا کی علامتیں تیار کیں۔
+ریاضیاتی آپریٹرز آپ کو جاوا اسکرپٹ میں ریاضیاتی حسابات انجام دینے کی اجازت دیتے ہیں۔ یہ آپریٹرز وہی اصول استعمال کرتے ہیں جو صدیوں سے ریاضی دان استعمال کرتے آئے ہیں – وہی علامتیں جو علماء جیسے الخوارزمی کے کاموں میں ظاہر ہوئیں، جنہوں نے الجبری علامتیں تیار کیں۔
+
+یہ آپریٹرز وہی کام کرتے ہیں جو آپ روایتی ریاضی سے توقع کرتے ہیں: جمع کے لیے پلس، تفریق کے لیے مائنس، وغیرہ۔
 
-آپریٹرز وہی کام کرتے ہیں جیسا کہ آپ روایتی ریاضی سے توقع کرتے ہیں: جمع کے لیے پلس، تفریق کے لیے مائنس، وغیرہ۔
+ریاضیاتی افعال انجام دیتے وقت استعمال کرنے کے لیے کئی قسم کے آپریٹرز ہیں، اور ان میں سے کچھ یہاں درج ہیں:
 
-ریاضیاتی افعال انجام دیتے وقت استعمال کرنے کے لیے کئی قسم کے آپریٹرز ہیں، اور کچھ یہاں درج ہیں:
+| علامت | وضاحت                                                                  | مثال                              |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **جمع**: دو نمبروں کا مجموعہ نکالتا ہے                                  | `1 + 2 //متوقع جواب 3 ہے`       |
+| `-`    | **تفریق**: دو نمبروں کا فرق نکالتا ہے                                   | `1 - 2 //متوقع جواب -1 ہے`      |
+| `*`    | **ضرب**: دو نمبروں کی پیداوار نکالتا ہے                                  | `1 * 2 //متوقع جواب 2 ہے`       |
+| `/`    | **تقسیم**: دو نمبروں کا حاصل ضرب نکالتا ہے                              | `1 / 2 //متوقع جواب 0.5 ہے`     |
+| `%`    | **باقی**: دو نمبروں کی تقسیم سے باقی نکالتا ہے                          | `1 % 2 //متوقع جواب 1 ہے`       |
 
-| علامت | وضاحت                                                               | مثال                          |
-| ------ | -------------------------------------------------------------------- | ----------------------------- |
-| `+`    | **جمع**: دو نمبروں کا مجموعہ نکالتا ہے                              | `1 + 2 //متوقع جواب 3 ہے`    |
-| `-`    | **تفریق**: دو نمبروں کا فرق نکالتا ہے                               | `1 - 2 //متوقع جواب -1 ہے`   |
-| `*`    | **ضرب**: دو نمبروں کی پیداوار نکالتا ہے                              | `1 * 2 //متوقع جواب 2 ہے`    |
-| `/`    | **تقسیم**: دو نمبروں کا حاصل نکالتا ہے                              | `1 / 2 //متوقع جواب 0.5 ہے`  |
-| `%`    | **باقی**: دو نمبروں کی تقسیم سے باقی نکالتا ہے                      | `1 % 2 //متوقع جواب 1 ہے`    |
+✅ اسے آزمائیں! اپنے براؤزر کے کنسول میں ایک ریاضیاتی آپریشن آزمائیں۔ کیا نتائج نے آپ کو حیران کیا؟
 
-✅ اسے آزمائیں! اپنے براؤزر کے کنسول میں ایک ریاضیاتی آپریشن آزمائیں۔ کیا نتائج آپ کو حیران کرتے ہیں؟
+### 🧮 **ریاضی کی مہارت چیک: اعتماد کے ساتھ حساب لگانا**
+
+**اپنی ریاضی کی سمجھ کو جانچیں:**
+- `/` (تقسیم) اور `%` (باقی) کے درمیان کیا فرق ہے؟
+- کیا آپ پیش گوئی کر سکتے ہیں کہ `10 % 3` کیا ہوگا؟ (اشارہ: یہ 3.33 نہیں ہے...)
+- پروگرامنگ میں باقی آپریٹر کیوں مفید ہو سکتا ہے؟
+
+```mermaid
+pie title "JavaScript Number Operations Usage"
+    "Addition (+)" : 35
+    "Subtraction (-)" : 20
+    "Multiplication (*)" : 20
+    "Division (/)" : 15
+    "Remainder (%)" : 10
+```
+
+> **حقیقی دنیا کی بصیرت**: باقی آپریٹر (%) نمبروں کو جفت/طاق چیک کرنے، پیٹرن بنانے، یا آرے کے ذریعے سائیکل کرنے کے لیے بہت مفید ہے!
 
 ### سٹرنگز
 
-جاوا اسکرپٹ میں، متنی ڈیٹا کو سٹرنگز کے طور پر ظاہر کیا جاتا ہے۔ "سٹرنگ" کی اصطلاح کرداروں کو ترتیب میں ایک ساتھ جوڑنے کے تصور سے آتی ہے، بالکل اسی طرح جیسے قرون وسطیٰ کے خانقاہوں میں کاتب حروف کو جوڑ کر الفاظ اور جملے بناتے تھے۔
+جاوا اسکرپٹ میں، متنی ڈیٹا کو سٹرنگز کے طور پر ظاہر کیا جاتا ہے۔ "سٹرنگ" کی اصطلاح کرداروں کو ترتیب میں جوڑنے کے تصور سے آتی ہے، بالکل اسی طرح جیسے قرون وسطیٰ کے خانقاہوں میں کاتب حروف کو جوڑ کر اپنے مخطوطات میں الفاظ اور جملے بناتے تھے۔
 
-سٹرنگز ویب ڈویلپمنٹ کے لیے بنیادی ہیں۔ ویب سائٹ پر دکھایا گیا ہر متن – صارف کے نام، بٹن کے لیبل، غلطی کے پیغامات، مواد – سٹرنگ ڈیٹا کے طور پر ہینڈل کیا جاتا ہے۔ سٹرنگز کو سمجھنا فعال صارف انٹرفیس بنانے کے لیے ضروری ہے۔
+سٹرنگز ویب ڈویلپمنٹ کے لیے بنیادی ہیں۔ ویب سائٹ پر دکھایا گیا ہر متن – صارف کے نام، بٹن کے لیبل، غلطی کے پیغامات، مواد – کو سٹرنگ ڈیٹا کے طور پر سنبھالا جاتا ہے۔ فعال یوزر انٹرفیس بنانے کے لیے سٹرنگز کو سمجھنا ضروری ہے۔
 
-سٹرنگز وہ کرداروں کے سیٹ ہیں جو سنگل یا ڈبل کوٹس کے درمیان رہتے ہیں۔
+سٹرنگز وہ کرداروں کے سیٹ ہیں جو سنگل یا ڈبل کوٹس کے درمیان ہوتے ہیں۔
 
 ```javascript
 'This is a string'
@@ -216,20 +333,11 @@ let myString = 'This is a string value stored in a variable';
 ```
 
 **ان تصورات کو سمجھنا:**
-- **سنگل کوٹس `'` یا ڈبل کوٹس `"` کا استعمال کرتا ہے** سٹرنگز کی وضاحت کے لیے
-- **متنی ڈیٹا ذخیرہ کرتا ہے** جس میں حروف، نمبر، اور علامتیں شامل ہو سکتی ہیں
-- **سٹرنگ قدروں کو متغیرات میں تفویض کرتا ہے** تاکہ بعد میں استعمال کیا جا سکے
-- **کوٹس کی ضرورت ہوتی ہے** متن کو متغیر ناموں سے ممتاز کرنے کے لیے
-
-یاد رکھیں کہ سٹرنگ لکھتے وقت کوٹس کا استعمال کریں، ورنہ جاوا اسکرپٹ فرض کرے گا کہ یہ متغیر کا نام ہے۔
-
-### سٹرنگز کی فارمیٹنگ
-
-سٹرنگز کی ہیرا پھیری آپ کو متن کے عناصر کو جوڑنے، متغیرات کو شامل کرنے، اور پروگرام کی حالت کے مطابق متحرک مواد بنانے کی اجازت دیتی ہے۔ یہ تکنیک آپ کو پروگرام کے ذریعے متن بنانے کے قابل بناتی ہے۔
-
-اکثر آپ کو متعدد سٹرنگز کو ایک ساتھ جوڑنے کی ضرورت ہوتی ہے – اس عمل کو کنکیٹینیشن کہا جاتا ہے۔
-
-دو یا زیادہ سٹرنگز کو **کنکیٹینیٹ** کرنے کے لیے، یا انہیں ایک ساتھ جوڑنے کے لیے، `+` آپریٹر استعمال کریں۔
+- **سنگل کوٹس `'` یا ڈبل کوٹس `"` کا استعمال کرتا ہے** سٹرنگز کو بیان کرنے کے لیے
+- **متن کا ڈیٹا ذخیرہ کرتا ہے** جس میں حروف، نمبر، اور علامتیں شامل ہو سکتی ہیں
+- **متغیرات کو سٹرنگ کی اقدار تفویض کرتا ہے** تاکہ بعد میں استعمال کیا جا سکے
+- **
+دو یا زیادہ strings کو **جوڑنے** یا اکٹھا کرنے کے لیے، `+` آپریٹر استعمال کریں۔
 
 ```javascript
 let myString1 = "Hello";
@@ -241,67 +349,247 @@ myString1 + ", " + myString2 + "!"; //Hello, World!
 ```
 
 **مرحلہ وار، یہاں کیا ہو رہا ہے:**
-- **متعدد سٹرنگز کو `+` آپریٹر کے ذریعے جوڑتا ہے**
-- **پہلی مثال میں بغیر اسپیس کے سٹرنگز کو براہ راست جوڑتا ہے**
-- **پڑھنے کے قابل بنانے کے لیے سٹرنگز کے درمیان اسپیس کردار `" "` شامل کرتا ہے**
-- **صحیح فارمیٹنگ بنانے کے لیے کوما جیسے رموز شامل کرتا ہے**
+- **مختلف strings کو** `+` آپریٹر کے ذریعے جوڑنا
+- **strings کو** پہلے مثال میں بغیر اسپیس کے براہ راست جوڑنا
+- **پڑھنے میں آسانی کے لیے** strings کے درمیان اسپیس کردار `" "` شامل کرنا
+- **صحیح فارمیٹنگ کے لیے** کاما جیسے علامات شامل کرنا
+
+✅ کیوں `1 + 1 = 2` جاوا اسکرپٹ میں ہوتا ہے، لیکن `'1' + '1' = 11؟` اس بارے میں سوچیں۔ اور `'1' + 1` کے بارے میں کیا خیال ہے؟
+
+**ٹیمپلیٹ لیٹرلز** strings کو فارمیٹ کرنے کا ایک اور طریقہ ہیں، لیکن یہاں quotes کے بجائے backtick استعمال ہوتا ہے۔ جو کچھ بھی plain text نہیں ہے اسے placeholders `${ }` کے اندر رکھا جاتا ہے۔ اس میں وہ تمام متغیرات شامل ہیں جو strings ہو سکتے ہیں۔
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
 
-✅ کیوں `1 + 1 = 2` جاوا اسکرپٹ میں، لیکن `'1' + '1' = 11؟` اس کے
-آپ اپنے فارمیٹنگ کے اہداف دونوں طریقوں سے حاصل کر سکتے ہیں، لیکن ٹیمپلیٹ لیٹرلز اسپیسز اور لائن بریکس کا احترام کریں گے۔
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
 
-✅ آپ ٹیمپلیٹ لیٹرل کب استعمال کریں گے اور سادہ سٹرنگ کب؟
+**آئیے ہر حصہ سمجھتے ہیں:**
+- **بیک ٹکس** `` ` `` استعمال کرتا ہے عام quotes کے بجائے ٹیمپلیٹ لیٹرلز بنانے کے لیے
+- **متغیرات کو** براہ راست `${}` placeholder syntax کے ذریعے شامل کرتا ہے
+- **اسپیس اور فارمیٹنگ کو** بالکل ویسا ہی محفوظ رکھتا ہے جیسا لکھا گیا ہے
+- **ایک صاف طریقہ فراہم کرتا ہے** پیچیدہ strings کو متغیرات کے ساتھ بنانے کے لیے
+
+آپ اپنی فارمیٹنگ کے اہداف دونوں طریقوں سے حاصل کر سکتے ہیں، لیکن ٹیمپلیٹ لیٹرلز اسپیس اور لائن بریکس کا احترام کریں گے۔
+
+✅ آپ ٹیمپلیٹ لیٹرل کب استعمال کریں گے اور plain string کب؟
+
+### 🔤 **String مہارت چیک: متن میں تبدیلی کا اعتماد**
+
+**اپنی string مہارت کا جائزہ لیں:**
+- کیا آپ وضاحت کر سکتے ہیں کہ `'1' + '1'` کیوں `'11'` کے برابر ہے نہ کہ `2`؟
+- آپ کو کون سا string طریقہ زیادہ پڑھنے کے قابل لگتا ہے: concatenation یا template literals؟
+- اگر آپ string کے ارد گرد quotes بھول جائیں تو کیا ہوتا ہے؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> PlainText: "Hello"
+    [*] --> Variable: name = "Alice"
+    PlainText --> Concatenated: + " " + name
+    Variable --> Concatenated
+    PlainText --> Template: `Hello ${name}`
+    Variable --> Template
+    Concatenated --> Result: "Hello Alice"
+    Template --> Result
+    
+    note right of Concatenated
+        Traditional method
+        More verbose
+    end note
+    
+    note right of Template
+        Modern ES6 syntax
+        Cleaner & more readable
+    end note
+```
+
+> **پرو ٹپ**: ٹیمپلیٹ لیٹرلز عام طور پر پیچیدہ string بنانے کے لیے ترجیح دی جاتی ہیں کیونکہ وہ زیادہ پڑھنے کے قابل ہیں اور multi-line strings کو خوبصورتی سے ہینڈل کرتے ہیں!
 
-### بُولینز
+### Booleans
 
-بُولینز ڈیٹا کی سب سے سادہ شکل کی نمائندگی کرتے ہیں: یہ صرف دو ویلیوز رکھ سکتے ہیں – `true` یا `false`۔ یہ بائنری لاجک سسٹم 19ویں صدی کے ریاضی دان جارج بُول کے کام سے جڑا ہوا ہے، جنہوں نے بُولین الجبرا تیار کی۔
+Booleans ڈیٹا کی سب سے سادہ شکل کی نمائندگی کرتے ہیں: یہ صرف دو قدریں رکھ سکتے ہیں – `true` یا `false`۔ یہ binary logic system 19ویں صدی کے ریاضی دان George Boole کے کام سے جڑا ہوا ہے، جنہوں نے Boolean algebra تیار کی۔
 
-ان کی سادگی کے باوجود، بُولینز پروگرام لاجک کے لیے بہت ضروری ہیں۔ یہ آپ کے کوڈ کو حالات کی بنیاد پر فیصلے کرنے کے قابل بناتے ہیں – جیسے کہ آیا صارف لاگ ان ہے، کوئی بٹن کلک کیا گیا ہے، یا کچھ خاص معیار پورے کیے گئے ہیں۔
+ان کی سادگی کے باوجود، booleans پروگرام کی منطق کے لیے ضروری ہیں۔ یہ آپ کے کوڈ کو حالات کی بنیاد پر فیصلے کرنے کے قابل بناتے ہیں – چاہے صارف لاگ ان ہو، کوئی بٹن کلک کیا گیا ہو، یا کچھ شرائط پوری ہوں۔
 
-بُولینز صرف دو ویلیوز ہو سکتے ہیں: `true` یا `false`۔ بُولینز ان فیصلوں میں مدد کرتے ہیں کہ کون سی لائنز کوڈ چلنی چاہیے جب کچھ حالات پورے ہوں۔ اکثر اوقات، [operators](../../../../2-js-basics/1-data-types) بُولین کی ویلیو سیٹ کرنے میں مدد کرتے ہیں اور آپ اکثر دیکھیں گے کہ ویریبلز کو انیشیئلائز کیا جا رہا ہے یا ان کی ویلیوز کو اپڈیٹ کیا جا رہا ہے ایک آپریٹر کے ساتھ۔
+Booleans صرف دو قدریں رکھ سکتے ہیں: `true` یا `false`۔ Booleans ان حالات میں فیصلے کرنے میں مدد کرتے ہیں کہ کون سی کوڈ لائنز چلنی چاہئیں۔ بہت سے معاملات میں، [operators](../../../../2-js-basics/1-data-types) Boolean کی قدر کو سیٹ کرنے میں مدد کرتے ہیں اور آپ اکثر متغیرات کو ابتدائی یا ان کی قدریں آپریٹر کے ساتھ اپ ڈیٹ کرتے ہوئے دیکھیں گے۔
 
 ```javascript
 let myTrueBool = true;
 let myFalseBool = false;
 ```
 
-**اوپر دیے گئے کوڈ میں، ہم نے:**
-- **ایک ویریبل بنایا** جو بُولین ویلیو `true` کو اسٹور کرتا ہے
-- **دکھایا** کہ بُولین ویلیو `false` کو کیسے اسٹور کیا جائے
-- **استعمال کیا** بالکل وہی کی ورڈز `true` اور `false` (کوئی کوٹس کی ضرورت نہیں)
-- **تیار کیا** ان ویریبلز کو کنڈیشنل اسٹیٹمنٹس میں استعمال کے لیے
+**اوپر، ہم نے:**
+- **ایک متغیر بنایا** جو Boolean قدر `true` کو محفوظ کرتا ہے
+- **دکھایا** کہ Boolean قدر `false` کو کیسے محفوظ کریں
+- **بالکل وہی keywords استعمال کیے** `true` اور `false` (کوئی quotes کی ضرورت نہیں)
+- **ان متغیرات کو تیار کیا** conditional statements میں استعمال کے لیے
+
+✅ ایک متغیر 'truthy' سمجھا جا سکتا ہے اگر وہ Boolean `true` میں تبدیل ہو۔ دلچسپ بات یہ ہے کہ جاوا اسکرپٹ میں، [تمام قدریں truthy ہیں جب تک کہ وہ falsy کے طور پر بیان نہ کی جائیں](https://developer.mozilla.org/docs/Glossary/Truthy)۔
+
+```mermaid
+flowchart LR
+    A["🔘 Boolean Values"] --> B["true"]
+    A --> C["false"]
+    
+    D["Truthy Values"] --> D1["'hello'"]
+    D --> D2["42"]
+    D --> D3["[]"]
+    D --> D4["{}"]
+    
+    E["Falsy Values"] --> E1["false"]
+    E --> E2["0"]
+    E --> E3["''"]
+    E --> E4["null"]
+    E --> E5["undefined"]
+    E --> E6["NaN"]
+    
+    style B fill:#e8f5e8
+    style C fill:#ffebee
+    style D fill:#e3f2fd
+    style E fill:#fff3e0
+```
+
+### 🎯 **Boolean منطق چیک: فیصلہ سازی کی مہارت**
+
+**اپنی boolean سمجھ کو آزمائیں:**
+- آپ کیوں سوچتے ہیں کہ جاوا اسکرپٹ میں `true` اور `false` کے علاوہ "truthy" اور "falsy" قدریں ہیں؟
+- کیا آپ پیش گوئی کر سکتے ہیں کہ ان میں سے کون سی falsy ہے: `0`, `"0"`, `[]`, `"false"`؟
+- booleans پروگرام کے flow کو کنٹرول کرنے میں کیسے مفید ہو سکتے ہیں؟
 
-✅ ایک ویریبل 'truthy' سمجھا جا سکتا ہے اگر وہ بُولین `true` کو ایویلیویٹ کرے۔ دلچسپ بات یہ ہے کہ جاوا اسکرپٹ میں، [تمام ویلیوز truthy ہوتی ہیں جب تک کہ وہ falsy کے طور پر ڈیفائن نہ کی جائیں](https://developer.mozilla.org/docs/Glossary/Truthy)۔
+```mermaid
+pie title "Common Boolean Use Cases"
+    "Conditional Logic" : 40
+    "User State" : 25
+    "Feature Toggles" : 20
+    "Validation" : 15
+```
+
+> **یاد رکھیں**: جاوا اسکرپٹ میں صرف 6 قدریں falsy ہیں: `false`, `0`, `""`, `null`, `undefined`, اور `NaN`۔ باقی سب truthy ہیں!
 
 ---
 
+## 📊 **آپ کا ڈیٹا ٹائپس ٹول کٹ خلاصہ**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Data Types"] --> B["📦 Variables"]
+    A --> C["🔢 Numbers"]
+    A --> D["📝 Strings"]
+    A --> E["🔘 Booleans"]
+    
+    B --> B1["let mutable"]
+    B --> B2["const immutable"]
+    
+    C --> C1["42, 3.14, -5"]
+    C --> C2["+ - * / %"]
+    
+    D --> D1["'quotes' or \\\"quotes\\\""]
+    D --> D2["`template literals`"]
+    
+    E --> E1["true or false"]
+    E --> E2["truthy vs falsy"]
+    
+    F["⚡ Key Concepts"] --> F1["Type matters for operations"]
+    F --> F2["JavaScript is dynamically typed"]
+    F --> F3["Variables can change types"]
+    F --> F4["Naming is case-sensitive"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
 ## GitHub Copilot Agent Challenge 🚀
 
-ایجنٹ موڈ استعمال کریں اور درج ذیل چیلنج مکمل کریں:
+Agent mode استعمال کریں اور درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** ایک پرسنل انفارمیشن مینیجر بنائیں جو اس سبق میں سیکھے گئے تمام جاوا اسکرپٹ ڈیٹا ٹائپس کو حقیقی دنیا کے ڈیٹا سیناریوز کے ساتھ ہینڈل کرتے ہوئے ظاہر کرے۔
+**تفصیل:** ایک personal information manager بنائیں جو اس سبق میں سیکھے گئے تمام جاوا اسکرپٹ ڈیٹا ٹائپس کو حقیقی دنیا کے ڈیٹا منظرناموں کو ہینڈل کرتے ہوئے ظاہر کرے۔
 
-**پرومپٹ:** ایک جاوا اسکرپٹ پروگرام بنائیں جو ایک یوزر پروفائل آبجیکٹ تخلیق کرے جس میں شامل ہو: ایک شخص کا نام (string)، عمر (number)، اسٹوڈنٹ اسٹیٹس (boolean)، پسندیدہ رنگوں کی ایک array، اور ایک ایڈریس آبجیکٹ جس میں اسٹریٹ، شہر، اور زپ کوڈ پراپرٹیز ہوں۔ ایسے فنکشنز شامل کریں جو پروفائل معلومات کو ظاہر کریں اور انفرادی فیلڈز کو اپڈیٹ کریں۔ یقینی بنائیں کہ سٹرنگ کنکیٹینیشن، ٹیمپلیٹ لیٹرلز، عمر کے ساتھ اریتھمیٹک آپریشنز، اور اسٹوڈنٹ اسٹیٹس کے لیے بُولین لاجک کو ظاہر کریں۔
+**Prompt:** ایک جاوا اسکرپٹ پروگرام بنائیں جو ایک user profile object بنائے جس میں شامل ہو: ایک شخص کا نام (string)، عمر (number)، طالب علم ہونے کی حیثیت (boolean)، پسندیدہ رنگوں کی ایک array، اور ایک address object جس میں street، city، اور zip code کی خصوصیات ہوں۔ پروفائل معلومات دکھانے اور انفرادی fields کو اپ ڈیٹ کرنے کے لیے functions شامل کریں۔ string concatenation، template literals، عمر کے ساتھ arithmetic operations، اور طالب علم کی حیثیت کے لیے boolean logic کو ظاہر کریں۔
 
-ایجنٹ موڈ کے بارے میں مزید جانیں [یہاں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
+Agent mode کے بارے میں مزید جانیں [یہاں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
 
 ## 🚀 چیلنج
 
-جاوا اسکرپٹ میں کچھ رویے ہیں جو ڈیولپرز کو حیران کر سکتے ہیں۔ یہاں ایک کلاسک مثال ہے: اپنے براؤزر کنسول میں یہ ٹائپ کریں: `let age = 1; let Age = 2; age == Age` اور نتیجہ دیکھیں۔ یہ `false` واپس کرتا ہے – کیا آپ اس کی وجہ معلوم کر سکتے ہیں؟
+جاوا اسکرپٹ کے کچھ رویے ہیں جو ڈویلپرز کو حیران کر سکتے ہیں۔ یہاں ایک کلاسک مثال ہے: اپنے براؤزر کنسول میں یہ ٹائپ کریں: `let age = 1; let Age = 2; age == Age` اور نتیجہ دیکھیں۔ یہ `false` واپس کرتا ہے – کیا آپ اس کی وجہ معلوم کر سکتے ہیں؟
 
-یہ جاوا اسکرپٹ کے ان بہت سے رویوں میں سے ایک ہے جنہیں سمجھنا ضروری ہے۔ ان عجیب و غریب پہلوؤں سے واقفیت آپ کو زیادہ قابل اعتماد کوڈ لکھنے اور مسائل کو مؤثر طریقے سے ڈیبگ کرنے میں مدد دے گی۔
+یہ جاوا اسکرپٹ کے بہت سے رویوں میں سے ایک ہے جسے سمجھنا ضروری ہے۔ ان عجیب و غریب پہلوؤں سے واقفیت آپ کو زیادہ قابل اعتماد کوڈ لکھنے اور مسائل کو مؤثر طریقے سے ڈیبگ کرنے میں مدد دے گی۔
 
-## لیکچر کے بعد کا کوئز
-[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app)
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ff-quizzes.netlify.app)
 
 ## جائزہ اور خود مطالعہ
 
-جاوا اسکرپٹ کے [اس مشقوں کی فہرست](https://css-tricks.com/snippets/javascript/) پر نظر ڈالیں اور ایک آزمائیں۔ آپ نے کیا سیکھا؟
+[جاوا اسکرپٹ مشقوں کی اس فہرست](https://css-tricks.com/snippets/javascript/) کو دیکھیں اور ایک آزمائیں۔ آپ نے کیا سیکھا؟
 
-## اسائنمنٹ
+## Assignment
 
 [ڈیٹا ٹائپس پریکٹس](assignment.md)
 
+## 🚀 آپ کا جاوا اسکرپٹ ڈیٹا ٹائپس مہارت کا ٹائم لائن
+
+### ⚡ **آپ اگلے 5 منٹ میں کیا کر سکتے ہیں**
+- [ ] اپنے براؤزر کنسول کو کھولیں اور مختلف ڈیٹا ٹائپس کے ساتھ 3 متغیرات بنائیں
+- [ ] چیلنج آزمائیں: `let age = 1; let Age = 2; age == Age` اور معلوم کریں کہ یہ false کیوں ہے
+- [ ] اپنے نام اور پسندیدہ نمبر کے ساتھ string concatenation کی مشق کریں
+- [ ] آزمائیں کہ جب آپ string میں نمبر شامل کرتے ہیں تو کیا ہوتا ہے
+
+### 🎯 **آپ اس گھنٹے میں کیا حاصل کر سکتے ہیں**
+- [ ] سبق کے بعد کا کوئز مکمل کریں اور کسی بھی الجھن والے تصورات کا جائزہ لیں
+- [ ] ایک منی کیلکولیٹر بنائیں جو دو نمبروں کو جمع، تفریق، ضرب، اور تقسیم کرے
+- [ ] ٹیمپلیٹ لیٹرلز استعمال کرتے ہوئے ایک سادہ نام فارمیٹر بنائیں
+- [ ] `==` اور `===` موازنہ آپریٹرز کے فرق کو دریافت کریں
+- [ ] مختلف ڈیٹا ٹائپس کے درمیان تبدیل کرنے کی مشق کریں
+
+### 📅 **آپ کی ہفتہ بھر کی جاوا اسکرپٹ بنیاد**
+- [ ] اعتماد اور تخلیقی صلاحیت کے ساتھ اسائنمنٹ مکمل کریں
+- [ ] تمام سیکھے گئے ڈیٹا ٹائپس کا استعمال کرتے ہوئے ایک personal profile object بنائیں
+- [ ] [CSS-Tricks سے جاوا اسکرپٹ مشقوں](https://css-tricks.com/snippets/javascript/) کے ساتھ مشق کریں
+- [ ] Boolean logic استعمال کرتے ہوئے ایک سادہ فارم validator بنائیں
+- [ ] array اور object ڈیٹا ٹائپس کے ساتھ تجربہ کریں (آنے والے اسباق کا پیش نظارہ)
+- [ ] جاوا اسکرپٹ کمیونٹی میں شامل ہوں اور ڈیٹا ٹائپس کے بارے میں سوالات پوچھیں
+
+### 🌟 **آپ کی مہینہ بھر کی تبدیلی**
+- [ ] ڈیٹا ٹائپس کے علم کو بڑے پروگرامنگ پروجیکٹس میں شامل کریں
+- [ ] حقیقی ایپلیکیشنز میں ہر ڈیٹا ٹائپ کو استعمال کرنے کا وقت اور وجہ سمجھیں
+- [ ] دوسرے ابتدائی افراد کو جاوا اسکرپٹ کے بنیادی اصول سمجھنے میں مدد کریں
+- [ ] ایک چھوٹا ایپلیکیشن بنائیں جو مختلف قسم کے صارف ڈیٹا کو منظم کرے
+- [ ] advanced ڈیٹا ٹائپ تصورات جیسے type coercion اور strict equality کو دریافت کریں
+- [ ] اوپن سورس جاوا اسکرپٹ پروجیکٹس میں دستاویزات کی بہتری کے ساتھ تعاون کریں
+
+### 🧠 **آخری ڈیٹا ٹائپس مہارت چیک ان**
+
+**اپنی جاوا اسکرپٹ بنیاد کا جشن منائیں:**
+- کون سا ڈیٹا ٹائپ آپ کو سب سے زیادہ حیران کر گیا اس کے رویے کے لحاظ سے؟
+- آپ متغیرات اور constants کو دوست کو سمجھانے میں کتنا آرام دہ محسوس کرتے ہیں؟
+- جاوا اسکرپٹ کے ٹائپ سسٹم کے بارے میں آپ نے سب سے دلچسپ چیز کیا دریافت کی؟
+- آپ ان بنیادی اصولوں کے ساتھ کون سی حقیقی دنیا کی ایپلیکیشن بنانے کا تصور کر سکتے ہیں؟
+
+```mermaid
+journey
+    title Your JavaScript Confidence Journey
+    section Today
+      Confused: 3: You
+      Curious: 4: You
+      Excited: 5: You
+    section This Week
+      Practicing: 4: You
+      Understanding: 5: You
+      Building: 5: You
+    section Next Month
+      Problem Solving: 5: You
+      Teaching Others: 5: You
+      Real Projects: 5: You
+```
+
+> 💡 **آپ نے بنیاد بنا لی ہے!** ڈیٹا ٹائپس کو سمجھنا کہانی لکھنے سے پہلے حروف تہجی سیکھنے جیسا ہے۔ ہر جاوا اسکرپٹ پروگرام جو آپ کبھی لکھیں گے ان بنیادی تصورات کو استعمال کرے گا۔ آپ کے پاس اب انٹرایکٹو ویب سائٹس، متحرک ایپلیکیشنز، اور کوڈ کے ذریعے حقیقی دنیا کے مسائل حل کرنے کے لیے عمارت کے بلاکس ہیں۔ جاوا اسکرپٹ کی شاندار دنیا میں خوش آمدید! 🎉
+
 ---
 
 **اعلانِ لاتعلقی**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/2-js-basics/2-functions-methods/README.md b/translations/ur/2-js-basics/2-functions-methods/README.md
index cc6312c9d2..9091257ec0 100644
--- a/translations/ur/2-js-basics/2-functions-methods/README.md
+++ b/translations/ur/2-js-basics/2-functions-methods/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "ec43b53e8e015cdabfd3ad877b3c28e5",
-  "translation_date": "2025-10-22T14:32:24+00:00",
+  "original_hash": "71f7d7dafa1c7194d79ddac87f669ff9",
+  "translation_date": "2025-11-03T12:53:48+00:00",
   "source_file": "2-js-basics/2-functions-methods/README.md",
   "language_code": "ur"
 }
@@ -10,14 +10,31 @@ CO_OP_TRANSLATOR_METADATA:
 # جاوا اسکرپٹ کی بنیادی باتیں: طریقے اور فنکشنز
 
 ![جاوا اسکرپٹ کی بنیادی باتیں - فنکشنز](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ur.png)
-> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
+> اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title Your JavaScript Functions Adventure
+    section Foundation
+      Function Syntax: 5: You
+      Calling Functions: 4: You
+      Parameters & Arguments: 5: You
+    section Advanced Concepts
+      Return Values: 4: You
+      Default Parameters: 5: You
+      Function Composition: 4: You
+    section Modern JavaScript
+      Arrow Functions: 5: You
+      Anonymous Functions: 4: You
+      Higher-Order Functions: 5: You
+```
 
 ## لیکچر سے پہلے کا کوئز
 [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app)
 
 بار بار ایک ہی کوڈ لکھنا پروگرامنگ کے سب سے عام مسائل میں سے ایک ہے۔ فنکشنز اس مسئلے کو حل کرتے ہیں کیونکہ یہ کوڈ کو دوبارہ استعمال کے قابل بلاکس میں پیک کرنے کی اجازت دیتے ہیں۔ فنکشنز کو ہنری فورڈ کی اسمبلی لائن کے معیاری حصوں کی طرح سمجھیں – ایک بار جب آپ ایک قابل اعتماد جزو بنا لیتے ہیں، تو آپ اسے جہاں ضرورت ہو استعمال کر سکتے ہیں بغیر دوبارہ شروع سے بنانے کے۔
 
-فنکشنز آپ کو کوڈ کے ٹکڑوں کو پیک کرنے کی اجازت دیتے ہیں تاکہ آپ انہیں اپنے پروگرام میں دوبارہ استعمال کر سکیں۔ ایک ہی منطق کو ہر جگہ کاپی اور پیسٹ کرنے کے بجائے، آپ ایک بار فنکشن بنا سکتے ہیں اور جب بھی ضرورت ہو اسے کال کر سکتے ہیں۔ یہ طریقہ آپ کے کوڈ کو منظم رکھتا ہے اور اپ ڈیٹس کو بہت آسان بناتا ہے۔
+فنکشنز آپ کو کوڈ کے ٹکڑوں کو ایک جگہ جمع کرنے کی اجازت دیتے ہیں تاکہ آپ انہیں اپنے پروگرام میں دوبارہ استعمال کر سکیں۔ ایک ہی منطق کو ہر جگہ کاپی اور پیسٹ کرنے کے بجائے، آپ ایک بار فنکشن بنا سکتے ہیں اور جب بھی ضرورت ہو اسے کال کر سکتے ہیں۔ یہ طریقہ آپ کے کوڈ کو منظم رکھتا ہے اور اپ ڈیٹس کو بہت آسان بناتا ہے۔
 
 اس سبق میں، آپ سیکھیں گے کہ اپنے فنکشنز کیسے بنائیں، ان میں معلومات کیسے پاس کریں، اور ان سے مفید نتائج کیسے حاصل کریں۔ آپ فنکشنز اور طریقوں کے درمیان فرق دریافت کریں گے، جدید نحو کے طریقے سیکھیں گے، اور دیکھیں گے کہ فنکشنز دوسرے فنکشنز کے ساتھ کیسے کام کر سکتے ہیں۔ ہم ان تصورات کو مرحلہ وار بنائیں گے۔
 
@@ -27,17 +44,50 @@ CO_OP_TRANSLATOR_METADATA:
 
 > آپ یہ سبق [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) پر لے سکتے ہیں!
 
+```mermaid
+mindmap
+  root((JavaScript Functions))
+    Basic Concepts
+      Declaration
+        Traditional syntax
+        Arrow function syntax
+      Calling
+        Using parentheses
+        Parentheses required
+    Parameters
+      Input Values
+        Multiple parameters
+        Default values
+      Arguments
+        Values passed in
+        Can be any type
+    Return Values
+      Output Data
+        return statement
+        Exit function
+      Use Results
+        Store in variables
+        Chain functions
+    Advanced Patterns
+      Higher-Order
+        Functions as parameters
+        Callbacks
+      Anonymous
+        No name needed
+        Inline definition
+```
+
 ## فنکشنز
 
-فنکشن ایک خود مختار کوڈ بلاک ہے جو ایک مخصوص کام انجام دیتا ہے۔ یہ منطق کو انکیپسولیٹ کرتا ہے جسے آپ جب بھی ضرورت ہو چلا سکتے ہیں۔
+فنکشن ایک خود مختار کوڈ بلاک ہے جو ایک خاص کام انجام دیتا ہے۔ یہ منطق کو انکیپسولیٹ کرتا ہے جسے آپ جب چاہیں چلا سکتے ہیں۔
 
-اپنے پروگرام میں ایک ہی کوڈ کو کئی بار لکھنے کے بجائے، آپ اسے ایک فنکشن میں پیک کر سکتے ہیں اور جب بھی ضرورت ہو اسے کال کر سکتے ہیں۔ یہ طریقہ آپ کے کوڈ کو صاف رکھتا ہے اور اپ ڈیٹس کو بہت آسان بناتا ہے۔ تصور کریں کہ اگر آپ کو اپنے کوڈ بیس کے 20 مختلف مقامات پر بکھری ہوئی منطق کو تبدیل کرنے کی ضرورت ہو تو دیکھ بھال کا چیلنج کیا ہوگا۔
+اپنے پروگرام میں ایک ہی کوڈ کو کئی بار لکھنے کے بجائے، آپ اسے ایک فنکشن میں پیک کر سکتے ہیں اور جب بھی ضرورت ہو اسے کال کر سکتے ہیں۔ یہ طریقہ آپ کے کوڈ کو صاف رکھتا ہے اور اپ ڈیٹس کو بہت آسان بناتا ہے۔ تصور کریں کہ اگر آپ کو اپنے کوڈ بیس کے 20 مختلف مقامات پر بکھری ہوئی منطق کو تبدیل کرنے کی ضرورت ہو تو یہ کتنا مشکل ہوگا۔
 
 اپنے فنکشنز کو وضاحتی نام دینا ضروری ہے۔ ایک اچھا نام دیا گیا فنکشن اس کے مقصد کو واضح طور پر بتاتا ہے – جب آپ `cancelTimer()` دیکھتے ہیں، تو آپ فوراً سمجھ جاتے ہیں کہ یہ کیا کرتا ہے، بالکل اسی طرح جیسے ایک واضح طور پر لیبل لگا ہوا بٹن آپ کو بتاتا ہے کہ جب آپ اسے کلک کریں گے تو کیا ہوگا۔
 
 ## فنکشن بنانا اور کال کرنا
 
-آئیے دیکھتے ہیں کہ فنکشن کیسے بنایا جاتا ہے۔ نحو ایک مستقل نمونہ کی پیروی کرتا ہے:
+آئیے دیکھتے ہیں کہ فنکشن کیسے بنایا جائے۔ نحو ایک مستقل پیٹرن کی پیروی کرتا ہے:
 
 ```javascript
 function nameOfFunction() { // function definition
@@ -45,11 +95,11 @@ function nameOfFunction() { // function definition
 }
 ```
 
-آئیے اسے توڑتے ہیں:
+آئیے اسے توڑ کر دیکھتے ہیں:
 - `function` کلیدی لفظ جاوا اسکرپٹ کو بتاتا ہے "ارے، میں ایک فنکشن بنا رہا ہوں!"
 - `nameOfFunction` وہ جگہ ہے جہاں آپ اپنے فنکشن کو ایک وضاحتی نام دیتے ہیں
 - قوسین `()` وہ جگہ ہیں جہاں آپ پیرامیٹرز شامل کر سکتے ہیں (ہم جلد ہی اس پر پہنچیں گے)
-- کرلی بریکٹس `{}` میں اصل کوڈ ہوتا ہے جو آپ کے فنکشن کو کال کرنے پر چلتا ہے
+- گھنگریالے بریکٹس `{}` میں اصل کوڈ ہوتا ہے جو آپ کے فنکشن کو کال کرنے پر چلتا ہے
 
 آئیے ایک سادہ گریٹنگ فنکشن بناتے ہیں تاکہ اسے عملی طور پر دیکھ سکیں:
 
@@ -59,25 +109,49 @@ function displayGreeting() {
 }
 ```
 
-یہ فنکشن "Hello, world!" کو کنسول پر پرنٹ کرتا ہے۔ ایک بار جب آپ نے اسے ڈیفائن کر لیا، تو آپ اسے جتنی بار چاہیں استعمال کر سکتے ہیں۔
+یہ فنکشن "Hello, world!" کو کنسول میں پرنٹ کرتا ہے۔ ایک بار جب آپ نے اسے ڈیفائن کر لیا، تو آپ اسے جتنی بار چاہیں استعمال کر سکتے ہیں۔
 
-اپنے فنکشن کو چلانے (یا "کال کرنے") کے لیے، اس کا نام لکھیں اور اس کے بعد قوسین لگائیں۔ جاوا اسکرپٹ آپ کو اپنے فنکشن کو کال کرنے سے پہلے یا بعد میں ڈیفائن کرنے کی اجازت دیتا ہے – جاوا اسکرپٹ انجن عمل درآمد کے ترتیب کو سنبھال لے گا۔
+اپنے فنکشن کو چلانے (یا "کال کرنے") کے لیے، اس کا نام لکھیں اور اس کے بعد قوسین لگائیں۔ جاوا اسکرپٹ آپ کو اپنے فنکشن کو کال کرنے سے پہلے یا بعد میں ڈیفائن کرنے کی اجازت دیتا ہے – جاوا اسکرپٹ انجن عملدرآمد کے ترتیب کو سنبھال لے گا۔
 
 ```javascript
 // calling our function
 displayGreeting();
 ```
 
-جب آپ یہ لائن چلاتے ہیں، تو یہ آپ کے `displayGreeting` فنکشن کے اندر موجود تمام کوڈ کو چلاتا ہے، اور آپ کے براؤزر کے کنسول میں "Hello, world!" دکھاتا ہے۔ آپ اس فنکشن کو بار بار کال کر سکتے ہیں۔
+جب آپ یہ لائن چلاتے ہیں، تو یہ آپ کے `displayGreeting` فنکشن کے اندر موجود تمام کوڈ کو چلاتا ہے، اور "Hello, world!" کو آپ کے براؤزر کے کنسول میں دکھاتا ہے۔ آپ اس فنکشن کو بار بار کال کر سکتے ہیں۔
+
+### 🧠 **فنکشن کی بنیادی باتوں کی جانچ: اپنے پہلے فنکشنز بنانا**
+
+**آئیے دیکھتے ہیں کہ آپ بنیادی فنکشنز کے بارے میں کیسا محسوس کر رہے ہیں:**
+- کیا آپ وضاحت کر سکتے ہیں کہ فنکشن ڈیفینیشنز میں گھنگریالے بریکٹس `{}` کیوں استعمال کیے جاتے ہیں؟
+- اگر آپ `displayGreeting` کو بغیر قوسین کے لکھیں تو کیا ہوگا؟
+- آپ ایک ہی فنکشن کو کئی بار کال کیوں کرنا چاہیں گے؟
+
+```mermaid
+flowchart TD
+    A["✏️ Define Function"] --> B["📦 Package Code"]
+    B --> C["🏷️ Give it a Name"]
+    C --> D["📞 Call When Needed"]
+    D --> E["🔄 Reuse Anywhere"]
+    
+    F["💡 Benefits"] --> F1["No code repetition"]
+    F --> F2["Easy to maintain"]
+    F --> F3["Clear organization"]
+    F --> F4["Easier testing"]
+    
+    style A fill:#e3f2fd
+    style E fill:#e8f5e8
+    style F fill:#fff3e0
+```
 
-> **نوٹ:** آپ نے ان اسباق کے دوران **طریقے** استعمال کیے ہیں۔ `console.log()` ایک طریقہ ہے – بنیادی طور پر ایک فنکشن جو `console` آبجیکٹ سے تعلق رکھتا ہے۔ اہم فرق یہ ہے کہ طریقے آبجیکٹس سے منسلک ہوتے ہیں، جبکہ فنکشنز آزادانہ طور پر کھڑے ہوتے ہیں۔ بہت سے ڈویلپرز ان اصطلاحات کو غیر رسمی گفتگو میں ایک دوسرے کے ساتھ استعمال کرتے ہیں۔
+> **نوٹ:** آپ نے ان اسباق میں **طریقے** استعمال کیے ہیں۔ `console.log()` ایک طریقہ ہے – بنیادی طور پر ایک فنکشن جو `console` آبجیکٹ سے تعلق رکھتا ہے۔ اہم فرق یہ ہے کہ طریقے آبجیکٹس سے منسلک ہوتے ہیں، جبکہ فنکشنز آزادانہ طور پر کھڑے ہوتے ہیں۔ بہت سے ڈویلپرز ان اصطلاحات کو غیر رسمی گفتگو میں ایک دوسرے کے ساتھ استعمال کرتے ہیں۔
 
 ### فنکشنز کے بہترین طریقے
 
 یہاں کچھ تجاویز ہیں جو آپ کو بہترین فنکشنز لکھنے میں مدد کریں گی:
 
 - اپنے فنکشنز کو واضح، وضاحتی نام دیں – آپ کا مستقبل کا خود آپ کا شکر گزار ہوگا!
-- **camelCasing** کا استعمال کریں جب نام میں کئی الفاظ ہوں (جیسے `calculateTotal` بجائے `calculate_total`)
+- **camelCasing** کا استعمال کریں جب نام میں ایک سے زیادہ الفاظ ہوں (جیسے `calculateTotal` بجائے `calculate_total`)
 - ہر فنکشن کو ایک کام کو اچھی طرح انجام دینے پر مرکوز رکھیں
 
 ## فنکشن کو معلومات دینا
@@ -86,7 +160,7 @@ displayGreeting();
 
 **پیرامیٹرز** ایسے پلیس ہولڈرز کی طرح کام کرتے ہیں جہاں آپ ہر بار فنکشن استعمال کرتے وقت مختلف اقدار ڈال سکتے ہیں۔ اس طرح، ایک ہی فنکشن ہر کال پر مختلف معلومات کے ساتھ کام کر سکتا ہے۔
 
-جب آپ اپنے فنکشن کو ڈیفائن کرتے ہیں تو آپ پیرامیٹرز کو قوسین کے اندر درج کرتے ہیں، اور متعدد پیرامیٹرز کو کاما کے ساتھ الگ کرتے ہیں:
+جب آپ اپنے فنکشن کو ڈیفائن کرتے ہیں تو پیرامیٹرز کو قوسین کے اندر درج کریں، اور متعدد پیرامیٹرز کو کاما کے ساتھ الگ کریں:
 
 ```javascript
 function name(param, param2, param3) {
@@ -105,7 +179,7 @@ function displayGreeting(name) {
 }
 ```
 
-نوٹ کریں کہ ہم بیک ٹکس (`` ` ``) اور `${}` کا استعمال کر رہے ہیں تاکہ نام کو براہ راست اپنے پیغام میں ڈال سکیں – اسے ٹیمپلیٹ لیٹرل کہا جاتا ہے، اور یہ متغیرات کے ساتھ ملے ہوئے اسٹرنگز بنانے کا ایک واقعی مفید طریقہ ہے۔
+نوٹ کریں کہ ہم بیک ٹکس (`` ` ``) اور `${}` کا استعمال کر رہے ہیں تاکہ نام کو براہ راست اپنے پیغام میں ڈال سکیں – اسے ٹیمپلیٹ لیٹرل کہا جاتا ہے، اور یہ متغیرات کے ساتھ ملے ہوئے اسٹرنگز بنانے کا ایک بہت ہی آسان طریقہ ہے۔
 
 اب جب ہم اپنے فنکشن کو کال کرتے ہیں، تو ہم کوئی بھی نام پاس کر سکتے ہیں:
 
@@ -116,11 +190,34 @@ displayGreeting('Christopher');
 
 جاوا اسکرپٹ اسٹرنگ `'Christopher'` لیتا ہے، اسے `name` پیرامیٹر کو تفویض کرتا ہے، اور ذاتی پیغام "Hello, Christopher!" بناتا ہے۔
 
+```mermaid
+flowchart LR
+    A["🎯 Function Call"] --> B["📥 Parameters"]
+    B --> C["⚙️ Function Body"]
+    C --> D["📤 Result"]
+    
+    A1["displayGreeting('Alice')"] --> A
+    B1["name = 'Alice'"] --> B
+    C1["Template literal\n\`Hello, \${name}!\`"] --> C
+    D1["'Hello, Alice!'"] --> D
+    
+    E["🔄 Parameter Types"] --> E1["Strings"]
+    E --> E2["Numbers"]
+    E --> E3["Booleans"]
+    E --> E4["Objects"]
+    E --> E5["Functions"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style D fill:#fff3e0
+    style E fill:#f3e5f5
+```
+
 ## ڈیفالٹ اقدار
 
 اگر ہم کچھ پیرامیٹرز کو اختیاری بنانا چاہتے ہیں تو کیا ہوگا؟ یہی وہ جگہ ہے جہاں ڈیفالٹ اقدار کام آتی ہیں!
 
-فرض کریں کہ ہم چاہتے ہیں کہ لوگ گریٹنگ کے لفظ کو اپنی مرضی کے مطابق بنا سکیں، لیکن اگر وہ کوئی خاص لفظ نہ بتائیں، تو ہم صرف "Hello" کو بیک اپ کے طور پر استعمال کریں گے۔ آپ ڈیفالٹ اقدار کو برابر کے نشان کا استعمال کرتے ہوئے سیٹ کر سکتے ہیں، بالکل ویری ایبل سیٹ کرنے کی طرح:
+فرض کریں کہ ہم چاہتے ہیں کہ لوگ گریٹنگ کے لفظ کو اپنی مرضی کے مطابق بنا سکیں، لیکن اگر وہ کوئی خاص لفظ نہ بتائیں، تو ہم "Hello" کو بیک اپ کے طور پر استعمال کریں گے۔ آپ ڈیفالٹ اقدار کو برابر کے نشان کا استعمال کرتے ہوئے سیٹ کر سکتے ہیں، بالکل ویری ایبل سیٹ کرنے کی طرح:
 
 ```javascript
 function displayGreeting(name, salutation='Hello') {
@@ -128,7 +225,7 @@ function displayGreeting(name, salutation='Hello') {
 }
 ```
 
-یہاں، `name` اب بھی ضروری ہے، لیکن `salutation` کے پاس بیک اپ ویلیو `'Hello'` ہے اگر کوئی مختلف گریٹنگ فراہم نہ کرے۔
+یہاں، `name` اب بھی ضروری ہے، لیکن `salutation` کے پاس `'Hello'` کی بیک اپ ویلیو ہے اگر کوئی مختلف گریٹنگ فراہم نہ کرے۔
 
 اب ہم اس فنکشن کو دو مختلف طریقوں سے کال کر سکتے ہیں:
 
@@ -142,19 +239,48 @@ displayGreeting('Christopher', 'Hi');
 
 پہلی کال میں، جاوا اسکرپٹ ڈیفالٹ "Hello" استعمال کرتا ہے کیونکہ ہم نے کوئی گریٹنگ نہیں بتائی۔ دوسری کال میں، یہ ہماری مرضی کے مطابق "Hi" استعمال کرتا ہے۔ یہ لچک فنکشنز کو مختلف حالات کے مطابق ڈھالنے کے قابل بناتی ہے۔
 
+### 🎛️ **پیرامیٹرز کی مہارت کی جانچ: فنکشنز کو لچکدار بنانا**
+
+**اپنے پیرامیٹرز کی سمجھ کو جانچیں:**
+- پیرامیٹر اور آرگیومنٹ میں کیا فرق ہے؟
+- حقیقی دنیا کی پروگرامنگ میں ڈیفالٹ اقدار کیوں مفید ہیں؟
+- کیا آپ پیش گوئی کر سکتے ہیں کہ اگر آپ پیرامیٹرز سے زیادہ آرگیومنٹس پاس کریں تو کیا ہوگا؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> NoParams: function greet() {}
+    [*] --> WithParams: function greet(name) {}
+    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
+    
+    NoParams --> Static: Same output always
+    WithParams --> Dynamic: Changes with input
+    WithDefaults --> Flexible: Optional customization
+    
+    Static --> [*]
+    Dynamic --> [*]
+    Flexible --> [*]
+    
+    note right of WithDefaults
+        Most flexible approach
+        Backwards compatible
+    end note
+```
+
+> **پرو ٹپ**: ڈیفالٹ پیرامیٹرز آپ کے فنکشنز کو زیادہ صارف دوست بناتے ہیں۔ صارفین معقول ڈیفالٹس کے ساتھ جلدی شروع کر سکتے ہیں، لیکن ضرورت پڑنے پر اپنی مرضی کے مطابق بنا سکتے ہیں!
+
 ## واپسی کی اقدار
 
 ہمارے فنکشنز اب تک صرف کنسول میں پیغامات پرنٹ کر رہے ہیں، لیکن اگر آپ چاہتے ہیں کہ فنکشن کچھ حساب کرے اور آپ کو نتیجہ واپس دے؟
 
-یہی وہ جگہ ہے جہاں **واپسی کی اقدار** کام آتی ہیں۔ کچھ دکھانے کے بجائے، فنکشن آپ کو ایک ویلیو واپس دے سکتا ہے جسے آپ ویری ایبل میں اسٹور کر سکتے ہیں یا اپنے کوڈ کے دوسرے حصوں میں استعمال کر سکتے ہیں۔
+یہی وہ جگہ ہے جہاں **واپسی کی اقدار** کام آتی ہیں۔ کچھ دکھانے کے بجائے، ایک فنکشن آپ کو ایک ویلیو واپس دے سکتا ہے جسے آپ ویری ایبل میں اسٹور کر سکتے ہیں یا اپنے کوڈ کے دوسرے حصوں میں استعمال کر سکتے ہیں۔
 
-ویلیو واپس بھیجنے کے لیے، آپ `return` کلیدی لفظ کا استعمال کرتے ہیں اور اس کے بعد جو بھی آپ واپس بھیجنا چاہتے ہیں:
+ویلیو واپس بھیجنے کے لیے، آپ `return` کلیدی لفظ استعمال کرتے ہیں اور اس کے بعد جو بھی آپ واپس بھیجنا چاہتے ہیں:
 
 ```javascript
 return myVariable;
 ```
 
-یہاں ایک اہم بات ہے: جب فنکشن `return` اسٹیٹمنٹ پر پہنچتا ہے، تو یہ فوراً چلنا بند کر دیتا ہے اور وہ ویلیو واپس بھیج دیتا ہے جس نے اسے کال کیا تھا۔
+یہاں ایک اہم بات ہے: جب فنکشن `return` اسٹیٹمنٹ پر پہنچتا ہے، تو یہ فوراً چلنا بند کر دیتا ہے اور اس ویلیو کو واپس بھیج دیتا ہے جس نے اسے کال کیا تھا۔
 
 آئیے اپنے گریٹنگ فنکشن کو تبدیل کریں تاکہ پیغام کو پرنٹ کرنے کے بجائے واپس کرے:
 
@@ -175,11 +301,51 @@ const greetingMessage = createGreetingMessage('Christopher');
 
 اب `greetingMessage` میں "Hello, Christopher" موجود ہے اور ہم اسے اپنے کوڈ میں کہیں بھی استعمال کر سکتے ہیں – ویب پیج پر دکھانے کے لیے، ای میل میں شامل کرنے کے لیے، یا کسی دوسرے فنکشن کو پاس کرنے کے لیے۔
 
+```mermaid
+flowchart TD
+    A["🔧 Function Processing"] --> B{"return statement?"}
+    B -->|Yes| C["📤 Return Value"]
+    B -->|No| D["📭 Return undefined"]
+    
+    C --> E["💾 Store in Variable"]
+    C --> F["🔗 Use in Expression"]
+    C --> G["📞 Pass to Function"]
+    
+    D --> H["⚠️ Usually not useful"]
+    
+    I["📋 Return Value Uses"] --> I1["Calculate results"]
+    I --> I2["Validate input"]
+    I --> I3["Transform data"]
+    I --> I4["Create objects"]
+    
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style I fill:#e3f2fd
+```
+
+### 🔄 **واپسی کی اقدار کی جانچ: نتائج واپس حاصل کرنا**
+
+**اپنی واپسی کی اقدار کی سمجھ کو جانچیں:**
+- فنکشن میں `return` اسٹیٹمنٹ کے بعد کوڈ کے ساتھ کیا ہوتا ہے؟
+- کنسول میں صرف پرنٹ کرنے کے بجائے ویلیوز واپس کرنا کیوں بہتر ہے؟
+- کیا فنکشن مختلف قسم کی ویلیوز واپس کر سکتا ہے (اسٹرنگ، نمبر، بولین)؟
+
+```mermaid
+pie title "Common Return Value Types"
+    "Strings" : 30
+    "Numbers" : 25
+    "Objects" : 20
+    "Booleans" : 15
+    "Arrays" : 10
+```
+
+> **اہم بصیرت**: ویلیوز واپس کرنے والے فنکشنز زیادہ ورسٹائل ہوتے ہیں کیونکہ کالر فیصلہ کرتا ہے کہ نتیجہ کے ساتھ کیا کرنا ہے۔ یہ آپ کے کوڈ کو زیادہ ماڈیولر اور دوبارہ استعمال کے قابل بناتا ہے!
+
 ## فنکشنز کو فنکشنز کے پیرامیٹرز کے طور پر استعمال کرنا
 
 فنکشنز کو دوسرے فنکشنز کے پیرامیٹرز کے طور پر پاس کیا جا سکتا ہے۔ اگرچہ یہ تصور شروع میں پیچیدہ لگ سکتا ہے، یہ ایک طاقتور خصوصیت ہے جو لچکدار پروگرامنگ پیٹرنز کو فعال کرتی ہے۔
 
-یہ پیٹرن بہت عام ہے جب آپ کہنا چاہتے ہیں "جب کچھ ہوتا ہے، تو یہ دوسرا کام کرو۔" مثال کے طور پر، "جب ٹائمر ختم ہو، تو یہ کوڈ چلائیں" یا "جب صارف بٹن پر کلک کرے، تو اس فنکشن کو کال کریں۔"
+یہ پیٹرن بہت عام ہے جب آپ کہنا چاہتے ہیں "جب کچھ ہو، تو یہ دوسرا کام کرو۔" مثال کے طور پر، "جب ٹائمر ختم ہو، تو یہ کوڈ چلائیں" یا "جب صارف بٹن پر کلک کرے، تو اس فنکشن کو کال کریں۔"
 
 آئیے `setTimeout` دیکھتے ہیں، جو ایک بلٹ ان فنکشن ہے جو کچھ وقت انتظار کرتا ہے اور پھر کچھ کوڈ چلاتا ہے۔ ہمیں اسے بتانا ہوگا کہ کون سا کوڈ چلانا ہے – فنکشن پاس کرنے کے لیے بہترین کیس!
 
@@ -193,13 +359,13 @@ function displayDone() {
 setTimeout(displayDone, 3000);
 ```
 
-نوٹ کریں کہ ہم `displayDone` (بغیر قوسین کے) کو `setTimeout` میں پاس کرتے ہیں۔ ہم خود فنکشن کو کال نہیں کر رہے – ہم اسے `setTimeout` کے حوالے کر رہے ہیں اور کہہ رہے ہیں "اسے 3 سیکنڈ میں کال کریں۔"
+نوٹ کریں کہ ہم `displayDone` کو (بغیر قوسین کے) `setTimeout` کو پاس کرتے ہیں۔ ہم خود فنکشن کو کال نہیں کر رہے – ہم اسے `setTimeout` کے حوالے کر رہے ہیں اور کہہ رہے ہیں "اسے 3 سیکنڈ میں کال کریں۔"
 
 ### گمنام فنکشنز
 
-کبھی کبھی آپ کو صرف ایک چیز کے لیے فنکشن کی ضرورت ہوتی ہے اور آپ اسے نام دینا نہیں چاہتے۔ اس کے بارے میں سوچیں – اگر آپ صرف ایک بار فنکشن استعمال کر رہے ہیں، تو کیوں اپنے کوڈ کو ایک اضافی نام کے ساتھ بھر دیں؟
+کبھی کبھی آپ کو صرف ایک چیز کے لیے فنکشن کی ضرورت ہوتی ہے اور آپ اسے نام دینا نہیں چاہتے۔ سوچیں – اگر آپ صرف ایک بار فنکشن استعمال کر رہے ہیں، تو کیوں اپنے کوڈ کو ایک اضافی نام سے بھر دیں؟
 
-جاوا اسکرپٹ آپ کو **گمنام فنکشنز** بنانے کی اجازت دیتا ہے – بغیر نام کے فنکشنز جو آپ جہاں ضرورت ہو وہیں ڈیفائن کر سکتے ہیں۔
+جاوا اسکرپٹ آپ کو **گمنام فنکشنز** بنانے کی اجازت دیتا ہے – ایسے فنکشنز جن کے نام نہیں ہوتے اور آپ انہیں وہیں ڈیفائن کر سکتے ہیں جہاں آپ کو ضرورت ہو۔
 
 یہاں ہم اپنے ٹائمر کی مثال کو گمنام فنکشن کا استعمال کرتے ہوئے دوبارہ لکھ سکتے ہیں:
 
@@ -209,13 +375,13 @@ setTimeout(function() {
 }, 3000);
 ```
 
-یہ وہی نتیجہ حاصل کرتا ہے، لیکن فنکشن کو براہ راست `setTimeout` کال کے اندر ڈیفائن کیا گیا ہے، جس سے الگ فنکشن ڈیفائن کرنے کی ضرورت ختم ہو جاتی ہے۔
+یہ وہی نتیجہ حاصل کرتا ہے، لیکن فنکشن کو براہ راست `setTimeout` کال کے اندر ڈیفائن کیا گیا ہے، جس سے الگ فنکشن ڈیفینیشن کی ضرورت ختم ہو جاتی ہے۔
 
 ### فیٹ ایرو فنکشنز
 
-جدید جاوا اسکرپٹ میں فنکشنز لکھنے کا ایک اور مختصر طریقہ ہے جسے **ایرو فنکشنز** کہا جاتا ہے۔ یہ `=>` کا استعمال کرتے ہیں (جو ایک تیر کی طرح لگتا ہے – سمجھ گئے؟) اور ڈویلپرز میں بہت مقبول ہیں۔
+جدید جاوا اسکرپٹ میں فنکشنز لکھنے کا ایک اور مختصر طریقہ ہے جسے **ایرو فنکشنز** کہا جاتا ہے۔ یہ `=>` استعمال کرتے ہیں (جو ایک تیر کی طرح لگتا ہے – سمجھ گئے؟) اور ڈویلپرز میں بہت مقبول ہیں۔
 
-ایرو فنکشنز آپ کو `function` کلیدی لفظ چھوڑنے اور زیادہ مختصر کوڈ لکھنے دیتی ہیں۔
+ایرو فنکشنز آپ کو `function` کلیدی لفظ چھوڑنے اور زیادہ مختصر کوڈ لکھنے کی اجازت دیتی ہیں۔
 
 یہاں ہمارا ٹائمر کی مثال ایرو فنکشن کا استعمال کرتے ہوئے ہے:
 
@@ -225,47 +391,137 @@ setTimeout(() => {
 }, 3000);
 ```
 
-`()` وہ جگہ ہے جہاں پیرامیٹرز جائیں گے (اس کیس میں خالی)، پھر تیر `=>` آتا ہے، اور آخر میں فنکشن باڈی کرلی بریکٹس میں۔ یہ زیادہ مختصر نحو کے ساتھ وہی فعالیت فراہم کرتا ہے۔
+`()` وہ جگہ ہے جہاں پیرامیٹرز جائیں گے (اس کیس میں خالی)، پھر تیر `=>` آتا ہے، اور آخر میں فنکشن باڈی گھنگریالے بریکٹس میں۔ یہ زیادہ مختصر نحو کے ساتھ وہی فعالیت فراہم کرتا ہے۔
+
+```mermaid
+flowchart LR
+    A["📝 Function Styles"] --> B["Traditional"]
+    A --> C["Arrow"]
+    A --> D["Anonymous"]
+    
+    B --> B1["function name() {}"]
+    B --> B2["Hoisted"]
+    B --> B3["Named"]
+    
+    C --> C1["const name = () => {}"]
+    C --> C2["Concise syntax"]
+    C --> C3["Modern style"]
+    
+    D --> D1["function() {}"]
+    D --> D2["No name"]
+    D --> D3["One-time use"]
+    
+    E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
+    E --> E2["Arrow: Short callbacks"]
+    E --> E3["Anonymous: Event handlers"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
 
-### ہر حکمت عملی کا استعمال کب کریں
+### ہر حکمت عملی کب استعمال کریں
+
+آپ کو ہر طریقہ کب استعمال کرنا چاہیے؟ ایک عملی رہنما: اگر آپ فنکشن کو کئی بار استعمال کریں گے، تو اسے ایک نام دیں اور الگ سے ڈیفائن کریں۔ اگر یہ ایک خاص استعمال کے لیے ہے، تو گمنام فنکشن پر غور کریں۔ ایرو فنکشنز اور روایتی نحو دونوں درست انتخاب ہیں، حالانکہ ایرو فنکشنز جدید جاوا اسکرپٹ کوڈ بیسز میں عام ہیں۔
+
+### 🎨 **فنکشن اسٹائلز کی مہارت کی جانچ: صحیح نحو کا انتخاب**
+
+**اپنے نحو کی سمجھ کو جانچیں:**
+- آپ ایرو فنکشنز کو روایتی فنکشن نحو پر کب ترجیح دیں گے؟
+- گمنام فنکشنز کا بنیادی فائدہ کیا ہے؟
+- کیا آپ ایسی صورتحال کے بارے میں سوچ سکتے ہیں جہاں گمنام فنکشن کے بجائے نام دیا گیا فنکشن بہتر ہو؟
+
+```mermaid
+quadrantChart
+    title Function Choice Decision Matrix
+    x-axis Simple --> Complex
+    y-axis One-time use --> Reusable
+    quadrant-1 Arrow Functions
+    quadrant-2 Named Functions
+    quadrant-3 Anonymous Functions
+    quadrant-4 Traditional Functions
+    
+    Event Handlers: [0.3, 0.2]
+    Utility Functions: [0.7, 0.8]
+    Callbacks: [0.2, 0.3]
+    Class Methods: [0.8, 0.7]
+    Mathematical Operations: [0.4, 0.6]
+```
 
-آپ کو ہر طریقہ کب استعمال کرنا چاہیے؟ ایک عملی رہنما: اگر آپ فنکشن کو کئی بار استعمال کریں گے، تو اسے ایک نام دیں اور الگ سے ڈیفائن کریں۔ اگر یہ ایک مخصوص استعمال کے لیے ہے، تو گمنام فنکشن پر غور کریں۔ ایرو فنکشنز اور روایتی نحو دونوں درست انتخاب ہیں، حالانکہ ایرو فنکشنز جدید جاوا اسکرپٹ کوڈ بیسز میں عام ہیں۔
+> **جدید رجحان**: ایرو فنکشنز بہت سے ڈویلپرز کے لیے ڈیفالٹ انتخاب بن رہی ہیں کیونکہ ان کی مختصر نحو، لیکن روایتی فنکشنز کا بھی اپنا مقام ہے!
 
 ---
 
-
-
 ## 🚀 چیلنج
 
 کیا آپ ایک جملے میں فنکشنز اور طریقوں کے درمیان فرق بیان کر سکتے ہیں؟ کوشش کریں!
 
 ## GitHub Copilot Agent چیلنج 🚀
 
-Agent mode کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** ایک یوٹیلیٹی لائبریری بنائیں جو مختلف ریاضیاتی فنکشنز کو ظاہر کرے جو اس سبق میں شامل مختلف فنکشن تصورات کو ظاہر کرے، بشمول پیرامیٹرز، ڈیفالٹ اقدار، واپسی کی اقدار، اور ایرو فنکشنز۔
+**تفصیل:** ایک یوٹیلیٹی لائبریری بنائیں جو مختلف فنکشن تصورات کو ظاہر کرے جو اس سبق میں شامل ہیں، بشمول پیرامیٹرز، ڈیفالٹ اقدار، واپسی کی اقدار، اور ایرو فنکشنز۔
 
 **پرومپٹ:** ایک جاوا اسکرپٹ فائل بنائیں جس کا نام `mathUtils.js` ہو جس میں درج ذیل فنکشنز شامل ہوں:
 1. ایک فنکشن `add` جو دو پیرامیٹرز لیتا ہے اور ان کا مجموعہ واپس کرتا ہے
-2. ایک فنکشن `multiply` جس کے ڈیفالٹ پیرامیٹر ویلیوز ہوں (دوسرا پیرامیٹر ڈیفالٹ 1 ہو)
-3. ایک ایرو فنکشن `square` جو ایک نمبر لیتا ہے اور اس کا مربع واپس کرتا ہے
-4. ایک فنکشن `calculate` جو ایک اور فنکشن کو پیرامیٹر کے طور پر قبول کرتا ہے اور دو نمبر، پھر ان نمبروں پر فنکشن لاگو کرتا ہے
-5. ہر فنکشن کو مناسب ٹیسٹ کیسز کے ساتھ کال کرنے کا مظاہرہ کریں
-
-Agent mode کے بارے میں مزید جانیں [یہاں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
-
-## لیکچر کے بعد کا کوئز
-[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app)
-
-## جائزہ اور خود مطالعہ
-
-یہ [ایرو فنکشنز کے بارے میں تھوڑا مزید پڑھنے](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) کے قابل ہے، کیونکہ وہ کوڈ بیسز میں بڑھتے ہوئے استعمال ہو رہے ہیں۔ ایک فنکشن لکھنے کی مشق کریں، اور پھر اسے اس نحو کے ساتھ دوبارہ لکھیں۔
-
-## اسائنمنٹ
-
-[فنکشنز کے ساتھ مزہ](assignment.md)
+2. ایک فنکشن `multiply` جس میں ڈیفالٹ پیرامیٹر ویلیوز ہوں (دوسرا پیرامیٹر ڈیفالٹ 1 ہو)
+3. ایک ایرو فنکشن `
+- [ ] روایتی فنکشن کو ایرو فنکشن کے انداز میں تبدیل کرنے کی کوشش کریں  
+- [ ] چیلنج پر عمل کریں: فنکشنز اور میتھڈز کے درمیان فرق کو سمجھائیں  
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**  
+- [ ] سبق کے بعد کا کوئز مکمل کریں اور کسی بھی الجھن والے تصورات کا جائزہ لیں  
+- [ ] GitHub Copilot چیلنج سے میتھ یوٹیلیٹیز لائبریری بنائیں  
+- [ ] ایک فنکشن بنائیں جو دوسرے فنکشن کو پیرامیٹر کے طور پر استعمال کرے  
+- [ ] ڈیفالٹ پیرامیٹرز کے ساتھ فنکشن لکھنے کی مشق کریں  
+- [ ] فنکشن کے ریٹرن ویلیوز میں ٹیمپلیٹ لیٹرلز کے ساتھ تجربہ کریں  
+
+### 📅 **آپ کی ہفتہ بھر کی فنکشن مہارت**  
+- [ ] "فن ود فنکشنز" اسائنمنٹ کو تخلیقی انداز میں مکمل کریں  
+- [ ] اپنے لکھے ہوئے کچھ دہرائے گئے کوڈ کو دوبارہ قابل استعمال فنکشنز میں تبدیل کریں  
+- [ ] صرف فنکشنز کا استعمال کرتے ہوئے ایک چھوٹا کیلکولیٹر بنائیں (کوئی گلوبل ویریبلز نہیں)  
+- [ ] ایرو فنکشنز کی مشق کریں جیسے `map()` اور `filter()` کے ساتھ  
+- [ ] عام کاموں کے لیے یوٹیلیٹی فنکشنز کا مجموعہ بنائیں  
+- [ ] ہائر آرڈر فنکشنز اور فنکشنل پروگرامنگ کے تصورات کا مطالعہ کریں  
+
+### 🌟 **آپ کی مہینے بھر کی تبدیلی**  
+- [ ] ایڈوانس فنکشن تصورات جیسے کلوزرز اور اسکوپ میں مہارت حاصل کریں  
+- [ ] ایک پروجیکٹ بنائیں جو فنکشن کمپوزیشن کا بھرپور استعمال کرے  
+- [ ] اوپن سورس میں حصہ لیں اور فنکشن ڈاکیومنٹیشن کو بہتر بنائیں  
+- [ ] کسی اور کو فنکشنز اور مختلف انداز کے بارے میں سکھائیں  
+- [ ] جاوا اسکرپٹ میں فنکشنل پروگرامنگ کے پیراڈائمز کو دریافت کریں  
+- [ ] مستقبل کے پروجیکٹس کے لیے قابل استعمال فنکشنز کی ذاتی لائبریری بنائیں  
+
+### 🏆 **فنکشنز چیمپئن کی آخری چیک ان**  
+
+**اپنی فنکشن مہارت کا جشن منائیں:**  
+- اب تک آپ نے سب سے زیادہ مفید فنکشن کون سا بنایا ہے؟  
+- فنکشنز کے بارے میں سیکھنے سے کوڈ آرگنائزیشن کے بارے میں آپ کی سوچ کیسے بدلی؟  
+- آپ کو کون سا فنکشن انداز زیادہ پسند ہے اور کیوں؟  
+- آپ کون سا حقیقی دنیا کا مسئلہ فنکشن لکھ کر حل کریں گے؟  
+
+```mermaid
+journey
+    title Your Function Confidence Evolution
+    section Today
+      Confused by Syntax: 3: You
+      Understanding Basics: 4: You
+      Writing Simple Functions: 5: You
+    section This Week
+      Using Parameters: 4: You
+      Returning Values: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Function Composition: 5: You
+      Advanced Patterns: 5: You
+      Teaching Others: 5: You
+```
+  
+> 🎉 **آپ نے پروگرامنگ کے سب سے طاقتور تصور میں مہارت حاصل کر لی ہے!** فنکشنز بڑے پروگراموں کے بنیادی اجزاء ہیں۔ ہر ایپلیکیشن جو آپ کبھی بنائیں گے، فنکشنز کا استعمال کرے گی تاکہ کوڈ کو منظم، دوبارہ استعمال اور ساخت دیا جا سکے۔ آپ اب سمجھتے ہیں کہ منطق کو دوبارہ قابل استعمال اجزاء میں کیسے پیک کیا جائے، جو آپ کو زیادہ موثر اور مؤثر پروگرامر بناتا ہے۔ ماڈیولر پروگرامنگ کی دنیا میں خوش آمدید! 🚀  
 
 ---
 
-**ڈسکلیمر**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**اعلانِ لاتعلقی**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/2-js-basics/3-making-decisions/README.md b/translations/ur/2-js-basics/3-making-decisions/README.md
index fcc87bb923..253c028a3c 100644
--- a/translations/ur/2-js-basics/3-making-decisions/README.md
+++ b/translations/ur/2-js-basics/3-making-decisions/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "90a3c32c3377f83ab750c2447c77ab98",
-  "translation_date": "2025-10-22T14:33:51+00:00",
+  "original_hash": "c688385d15dd3645e924ea0ffee8967f",
+  "translation_date": "2025-11-03T12:55:10+00:00",
   "source_file": "2-js-basics/3-making-decisions/README.md",
   "language_code": "ur"
 }
@@ -11,65 +11,170 @@ CO_OP_TRANSLATOR_METADATA:
 
 ![جاوا اسکرپٹ کی بنیادی باتیں - فیصلے کرنا](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ur.png)
 
-> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی جانب سے
+> اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac)
+
+```mermaid
+journey
+    title Your JavaScript Decision-Making Adventure
+    section Foundation
+      Boolean Values: 5: You
+      Comparison Operators: 4: You
+      Logical Thinking: 5: You
+    section Basic Decisions
+      If Statements: 4: You
+      If-Else Logic: 5: You
+      Switch Statements: 4: You
+    section Advanced Logic
+      Logical Operators: 5: You
+      Complex Conditions: 4: You
+      Ternary Expressions: 5: You
+```
 
-کیا آپ نے کبھی سوچا ہے کہ ایپلیکیشنز کیسے سمجھدار فیصلے کرتی ہیں؟ جیسے کہ نیویگیشن سسٹم تیز ترین راستہ کیسے منتخب کرتا ہے، یا تھرمو اسٹیٹ کب ہیٹ آن کرے گا؟ یہ پروگرامنگ میں فیصلے کرنے کا بنیادی تصور ہے۔
+کیا آپ نے کبھی سوچا ہے کہ ایپلیکیشنز کیسے سمجھدار فیصلے کرتی ہیں؟ جیسے کہ نیویگیشن سسٹم کیسے تیز ترین راستہ منتخب کرتا ہے، یا تھرمو اسٹیٹ کیسے فیصلہ کرتا ہے کہ گرمی کب آن کرنی ہے؟ یہ پروگرامنگ میں فیصلے کرنے کا بنیادی تصور ہے۔
 
-جیسے کہ چارلس بیبیج کے اینالیٹیکل انجن کو مختلف حالات کے تحت مختلف آپریشنز کے سیکوینسز کو فالو کرنے کے لیے ڈیزائن کیا گیا تھا، جدید جاوا اسکرپٹ پروگرامز کو مختلف حالات کے تحت انتخاب کرنے کی ضرورت ہوتی ہے۔ یہ صلاحیت کہ کوڈ کو مختلف راستوں پر لے جایا جا سکے، جامد کوڈ کو جوابدہ اور ذہین ایپلیکیشنز میں تبدیل کرتی ہے۔
+جیسے کہ چارلس بیبج کے اینالیٹیکل انجن کو مختلف حالات کے مطابق مختلف آپریشنز کے سلسلے پر عمل کرنے کے لیے ڈیزائن کیا گیا تھا، جدید جاوا اسکرپٹ پروگرامز کو مختلف حالات کے مطابق انتخاب کرنے کی ضرورت ہوتی ہے۔ یہ صلاحیت کہ کوڈ مختلف راستوں پر جا سکے اور فیصلے کر سکے، جامد کوڈ کو جوابدہ اور ذہین ایپلیکیشنز میں تبدیل کرتی ہے۔
 
-اس سبق میں، آپ اپنے پروگرامز میں کنڈیشنل لاجک کو نافذ کرنے کا طریقہ سیکھیں گے۔ ہم کنڈیشنل اسٹیٹمنٹس، کمپیریزن آپریٹرز، اور لاجیکل ایکسپریشنز کا جائزہ لیں گے جو آپ کے کوڈ کو حالات کا جائزہ لینے اور مناسب ردعمل دینے کی اجازت دیتے ہیں۔
+اس سبق میں، آپ اپنے پروگرامز میں مشروط منطق کو نافذ کرنے کا طریقہ سیکھیں گے۔ ہم مشروط بیانات، موازنہ آپریٹرز، اور منطقی اظہاروں کو دریافت کریں گے جو آپ کے کوڈ کو حالات کا جائزہ لینے اور مناسب ردعمل دینے کی اجازت دیتے ہیں۔
 
 ## لیکچر سے پہلے کا کوئز
 
 [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/11)
 
-فیصلے کرنے اور پروگرام کے بہاؤ کو کنٹرول کرنے کی صلاحیت پروگرامنگ کا ایک بنیادی پہلو ہے۔ اس سیکشن میں ہم جاوا اسکرپٹ پروگرامز کے ایگزیکیوشن راستے کو Boolean ویلیوز اور کنڈیشنل لاجک کے ذریعے کنٹرول کرنے کا طریقہ سیکھیں گے۔
+فیصلے کرنے اور پروگرام کے بہاؤ کو کنٹرول کرنے کی صلاحیت پروگرامنگ کا ایک بنیادی پہلو ہے۔ یہ سیکشن آپ کے جاوا اسکرپٹ پروگرامز کے عمل کے راستے کو کنٹرول کرنے کا احاطہ کرتا ہے، بوولین ویلیوز اور مشروط منطق کا استعمال کرتے ہوئے۔
 
 [![فیصلے کرنا](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "فیصلے کرنا")
 
-> 🎥 اوپر دی گئی تصویر پر کلک کریں فیصلے کرنے کے بارے میں ویڈیو دیکھنے کے لیے۔
+> 🎥 اوپر دی گئی تصویر پر کلک کریں تاکہ فیصلے کرنے کے بارے میں ویڈیو دیکھ سکیں۔
 
 > آپ یہ سبق [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) پر لے سکتے ہیں!
 
-## Boolean پر مختصر نظر
+```mermaid
+mindmap
+  root((Decision Making))
+    Boolean Logic
+      true/false
+      Comparison results
+      Logical expressions
+    Conditional Statements
+      if statements
+        Single condition
+        Code execution
+      if-else
+        Two paths
+        Alternative actions
+      switch
+        Multiple options
+        Clean structure
+    Operators
+      Comparison
+        === !== < > <= >=
+        Value relationships
+      Logical
+        && || !
+        Combine conditions
+    Advanced Patterns
+      Ternary
+        ? : syntax
+        Inline decisions
+      Complex Logic
+        Nested conditions
+        Multiple criteria
+```
+
+## بوولینز پر مختصر نظر
 
-فیصلے کرنے سے پہلے، آئیے پچھلے سبق سے Boolean ویلیوز پر نظر ڈالیں۔ یہ ویلیوز، جو ریاضی دان جارج بول کے نام پر ہیں، دو حالتوں کی نمائندگی کرتی ہیں – `true` یا `false`۔ کوئی ابہام نہیں، کوئی درمیانی راستہ نہیں۔
+فیصلے کرنے کو دریافت کرنے سے پہلے، آئیے اپنے پچھلے سبق سے بوولین ویلیوز پر دوبارہ نظر ڈالیں۔ ریاضی دان جارج بول کے نام پر رکھی گئی، یہ ویلیوز بائنری حالتوں کی نمائندگی کرتی ہیں – یا تو `true` یا `false`۔ اس میں کوئی ابہام نہیں، کوئی درمیانی راستہ نہیں۔
 
-یہ بائنری ویلیوز تمام کمپیوٹیشنل لاجک کی بنیاد ہیں۔ آپ کے پروگرام کا ہر فیصلہ بالآخر Boolean ایویلیوایشن پر آتا ہے۔
+یہ بائنری ویلیوز تمام کمپیوٹیشنل منطق کی بنیاد بناتی ہیں۔ آپ کا پروگرام جو بھی فیصلہ کرتا ہے وہ بالآخر بوولین جائزے میں تبدیل ہو جاتا ہے۔
 
-Boolean ویریبلز بنانا آسان ہے:
+بوولین ویریبلز بنانا آسان ہے:
 
 ```javascript
 let myTrueBool = true;
 let myFalseBool = false;
 ```
 
-یہ دو ویریبلز کو واضح Boolean ویلیوز کے ساتھ بناتا ہے۔
+یہ دو ویریبلز کو واضح بوولین ویلیوز کے ساتھ بناتا ہے۔
 
-✅ Boolean ویلیوز کا نام انگریزی ریاضی دان، فلسفی اور منطقی جارج بول (1815–1864) کے نام پر رکھا گیا ہے۔
+✅ بوولینز کا نام انگریزی ریاضی دان، فلسفی اور منطقی جارج بول (1815–1864) کے نام پر رکھا گیا ہے۔
 
-## کمپیریزن آپریٹرز اور Boolean
+## موازنہ آپریٹرز اور بوولینز
 
-عملی طور پر، آپ شاذ و نادر ہی Boolean ویلیوز کو دستی طور پر سیٹ کریں گے۔ اس کے بجائے، آپ حالات کا جائزہ لے کر انہیں جنریٹ کریں گے: "کیا یہ نمبر اس سے بڑا ہے؟" یا "کیا یہ ویلیوز برابر ہیں؟"
+عملی طور پر، آپ شاذ و نادر ہی بوولین ویلیوز کو دستی طور پر سیٹ کریں گے۔ اس کے بجائے، آپ حالات کا جائزہ لے کر انہیں پیدا کریں گے: "کیا یہ نمبر اس سے بڑا ہے؟" یا "کیا یہ ویلیوز برابر ہیں؟"
 
-کمپیریزن آپریٹرز ان جائزوں کو ممکن بناتے ہیں۔ یہ ویلیوز کا موازنہ کرتے ہیں اور Boolean نتائج واپس کرتے ہیں جو آپریندز کے درمیان تعلق پر مبنی ہوتے ہیں۔
+موازنہ آپریٹرز ان جائزوں کو ممکن بناتے ہیں۔ وہ ویلیوز کا موازنہ کرتے ہیں اور آپریٹرز کے درمیان تعلق کی بنیاد پر بوولین نتائج واپس کرتے ہیں۔
 
 | علامت | وضاحت                                                                                                                                                   | مثال            |
 | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **کم سے کم**: دو ویلیوز کا موازنہ کرتا ہے اور `true` Boolean ڈیٹا ٹائپ واپس کرتا ہے اگر بائیں طرف کی ویلیو دائیں طرف سے کم ہو                              | `5 < 6 // true`    |
-| `<=`   | **کم یا برابر**: دو ویلیوز کا موازنہ کرتا ہے اور `true` Boolean ڈیٹا ٹائپ واپس کرتا ہے اگر بائیں طرف کی ویلیو دائیں طرف سے کم یا برابر ہو      | `5 <= 6 // true`   |
-| `>`    | **زیادہ**: دو ویلیوز کا موازنہ کرتا ہے اور `true` Boolean ڈیٹا ٹائپ واپس کرتا ہے اگر بائیں طرف کی ویلیو دائیں طرف سے زیادہ ہو                         | `5 > 6 // false`   |
-| `>=`   | **زیادہ یا برابر**: دو ویلیوز کا موازنہ کرتا ہے اور `true` Boolean ڈیٹا ٹائپ واپس کرتا ہے اگر بائیں طرف کی ویلیو دائیں طرف سے زیادہ یا برابر ہو | `5 >= 6 // false`  |
-| `===`  | **سخت برابری**: دو ویلیوز کا موازنہ کرتا ہے اور `true` Boolean ڈیٹا ٹائپ واپس کرتا ہے اگر بائیں اور دائیں ویلیوز برابر ہوں اور ایک ہی ڈیٹا ٹائپ ہوں۔       | `5 === 6 // false` |
-| `!==`  | **عدم برابری**: دو ویلیوز کا موازنہ کرتا ہے اور سخت برابری آپریٹر کے برعکس Boolean ویلیو واپس کرتا ہے                                    | `5 !== 6 // true`  |
+| `<`    | **کم از کم**: دو ویلیوز کا موازنہ کرتا ہے اور `true` بوولین ڈیٹا ٹائپ واپس کرتا ہے اگر بائیں طرف کی ویلیو دائیں طرف سے کم ہو                              | `5 < 6 // true`    |
+| `<=`   | **کم یا برابر**: دو ویلیوز کا موازنہ کرتا ہے اور `true` بوولین ڈیٹا ٹائپ واپس کرتا ہے اگر بائیں طرف کی ویلیو دائیں طرف سے کم یا برابر ہو      | `5 <= 6 // true`   |
+| `>`    | **زیادہ**: دو ویلیوز کا موازنہ کرتا ہے اور `true` بوولین ڈیٹا ٹائپ واپس کرتا ہے اگر بائیں طرف کی ویلیو دائیں طرف سے زیادہ ہو                         | `5 > 6 // false`   |
+| `>=`   | **زیادہ یا برابر**: دو ویلیوز کا موازنہ کرتا ہے اور `true` بوولین ڈیٹا ٹائپ واپس کرتا ہے اگر بائیں طرف کی ویلیو دائیں طرف سے زیادہ یا برابر ہو | `5 >= 6 // false`  |
+| `===`  | **سخت برابری**: دو ویلیوز کا موازنہ کرتا ہے اور `true` بوولین ڈیٹا ٹائپ واپس کرتا ہے اگر دائیں اور بائیں طرف کی ویلیوز برابر ہوں اور ایک ہی ڈیٹا ٹائپ ہوں۔       | `5 === 6 // false` |
+| `!==`  | **عدم برابری**: دو ویلیوز کا موازنہ کرتا ہے اور وہ بوولین ویلیو واپس کرتا ہے جو سخت برابری آپریٹر واپس کرے                                    | `5 !== 6 // true`  |
+
+✅ اپنے علم کو جانچنے کے لیے اپنے براؤزر کے کنسول میں کچھ موازنہ لکھیں۔ کیا کوئی واپس شدہ ڈیٹا آپ کو حیران کرتا ہے؟
+
+```mermaid
+flowchart LR
+    A["🔢 Values"] --> B["⚖️ Comparison"]
+    B --> C["✅ Boolean Result"]
+    
+    D["5"] --> E["< 6"]
+    E --> F["true"]
+    
+    G["10"] --> H["=== '10'"]
+    H --> I["false"]
+    
+    J["'hello'"] --> K["!== 'world'"]
+    K --> L["true"]
+    
+    M["📋 Operator Types"] --> M1["Equality: === !=="]
+    M --> M2["Relational: < > <= >="]
+    M --> M3["Strict vs Loose"]
+    
+    style A fill:#e3f2fd
+    style C fill:#e8f5e8
+    style M fill:#fff3e0
+```
 
-✅ اپنے علم کو چیک کریں اور کچھ موازنہ اپنے براؤزر کے کنسول میں لکھیں۔ کیا کوئی واپس شدہ ڈیٹا آپ کو حیران کرتا ہے؟
+### 🧠 **موازنہ کی مہارت کی جانچ: بوولین منطق کو سمجھنا**
+
+**اپنے موازنہ کی سمجھ کو جانچیں:**
+- آپ کیوں سوچتے ہیں کہ `===` (سخت برابری) عام طور پر `==` (ڈھیلی برابری) پر ترجیح دی جاتی ہے؟
+- کیا آپ پیش گوئی کر سکتے ہیں کہ `5 === '5'` کیا واپس کرے گا؟ اور `5 == '5'`؟
+- `!==` اور `!=` میں کیا فرق ہے؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> Comparison: Two values
+    Comparison --> StrictEqual: === or !==
+    Comparison --> Relational: < > <= >=
+    
+    StrictEqual --> TypeCheck: Check type AND value
+    Relational --> NumberCompare: Convert to numbers
+    
+    TypeCheck --> BooleanResult: true or false
+    NumberCompare --> BooleanResult
+    
+    note right of StrictEqual
+        Preferred approach
+        No type conversion
+    end note
+    
+    note right of Relational
+        Useful for ranges
+        Numerical comparisons
+    end note
+```
+
+> **پرو ٹپ**: برابری چیک کے لیے ہمیشہ `===` اور `!==` استعمال کریں جب تک کہ آپ کو خاص طور پر ٹائپ کنورژن کی ضرورت نہ ہو۔ یہ غیر متوقع رویے کو روکتا ہے!
 
-## If اسٹیٹمنٹ
+## If بیان
 
-`if` اسٹیٹمنٹ آپ کے کوڈ میں سوال پوچھنے جیسا ہے۔ "اگر یہ حالت درست ہے، تو یہ کام کرو۔" یہ شاید جاوا اسکرپٹ میں فیصلے کرنے کے لیے سب سے اہم ٹول ہے۔
+`if` بیان آپ کے کوڈ میں سوال پوچھنے جیسا ہے۔ "اگر یہ حالت درست ہے، تو یہ کام کرو۔" یہ شاید جاوا اسکرپٹ میں فیصلے کرنے کے لیے آپ کا سب سے اہم ٹول ہوگا۔
 
-یہ اس طرح کام کرتا ہے:
+یہاں یہ کیسے کام کرتا ہے:
 
 ```javascript
 if (condition) {
@@ -77,9 +182,9 @@ if (condition) {
 }
 ```
 
-حالت کو قوسین کے اندر رکھا جاتا ہے، اور اگر یہ `true` ہو، تو جاوا اسکرپٹ کوڈ کو کرلی بریکٹس کے اندر چلاتا ہے۔ اگر یہ `false` ہو، تو جاوا اسکرپٹ اس پورے بلاک کو چھوڑ دیتا ہے۔
+حالت قوسین کے اندر جاتی ہے، اور اگر یہ `true` ہے، تو جاوا اسکرپٹ کوڈ کو گھنگریالے بریکٹس کے اندر چلاتا ہے۔ اگر یہ `false` ہے، تو جاوا اسکرپٹ پورے بلاک کو چھوڑ دیتا ہے۔
 
-آپ اکثر کمپیریزن آپریٹرز کا استعمال کرتے ہوئے ان حالات کو بنائیں گے۔ آئیے ایک عملی مثال دیکھتے ہیں:
+آپ اکثر ان حالات کو بنانے کے لیے موازنہ آپریٹرز استعمال کریں گے۔ آئیے ایک عملی مثال دیکھتے ہیں:
 
 ```javascript
 let currentMoney = 1000;
@@ -91,13 +196,31 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-چونکہ `1000 >= 800` کا نتیجہ `true` ہے، بلاک کے اندر کا کوڈ چلتا ہے، اور کنسول میں "Getting a new laptop!" ظاہر ہوتا ہے۔
+چونکہ `1000 >= 800` `true` کے طور پر جائزہ لیتا ہے، بلاک کے اندر کوڈ چلتا ہے، اور کنسول میں "Getting a new laptop!" دکھاتا ہے۔
+
+```mermaid
+flowchart TD
+    A["🚀 Program Start"] --> B{"💰 currentMoney >= laptopPrice?"}
+    B -->|true| C["🎉 'Getting a new laptop!'"]
+    B -->|false| D["⏭️ Skip code block"]
+    C --> E["📋 Continue program"]
+    D --> E
+    
+    F["📊 If Statement Structure"] --> F1["if (condition) {"]
+    F1 --> F2["  // code to run if true"]
+    F2 --> F3["}"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+    style F fill:#e3f2fd
+```
 
-## If..Else اسٹیٹمنٹ
+## If..Else بیان
 
-لیکن اگر آپ چاہتے ہیں کہ آپ کا پروگرام حالت کے غلط ہونے پر کچھ مختلف کرے؟ یہی وہ جگہ ہے جہاں `else` آتا ہے – یہ جیسے ایک بیک اپ پلان ہے۔
+لیکن اگر آپ چاہتے ہیں کہ آپ کا پروگرام حالت کے غلط ہونے پر کچھ مختلف کرے؟ یہی وہ جگہ ہے جہاں `else` آتا ہے – یہ آپ کو "اگر یہ حالت درست نہیں ہے، تو اس کے بجائے یہ دوسرا کام کرو" کہنے کا طریقہ دیتا ہے۔
 
-`else` اسٹیٹمنٹ آپ کو یہ کہنے کا طریقہ دیتا ہے "اگر یہ حالت درست نہیں ہے، تو یہ دوسرا کام کرو۔"
+`else` بیان آپ کو ایک بیک اپ پلان فراہم کرتا ہے۔
 
 ```javascript
 let currentMoney = 500;
@@ -112,15 +235,44 @@ if (currentMoney >= laptopPrice) {
 }
 ```
 
-اب چونکہ `500 >= 800` `false` ہے، جاوا اسکرپٹ پہلے بلاک کو چھوڑ دیتا ہے اور `else` بلاک کو چلاتا ہے۔ آپ کنسول میں "Can't afford a new laptop, yet!" دیکھیں گے۔
+اب چونکہ `500 >= 800` `false` ہے، جاوا اسکرپٹ پہلے بلاک کو چھوڑ دیتا ہے اور اس کے بجائے `else` بلاک چلاتا ہے۔ آپ کنسول میں "Can't afford a new laptop, yet!" دیکھیں گے۔
+
+✅ اس کوڈ اور درج ذیل کوڈ کو براؤزر کنسول میں چلا کر اپنی سمجھ کو جانچیں۔ `currentMoney` اور `laptopPrice` ویریبلز کی ویلیوز کو تبدیل کریں تاکہ واپس شدہ `console.log()` کو تبدیل کیا جا سکے۔
+
+### 🎯 **If-Else منطق کی جانچ: شاخوں کے راستے**
+
+**اپنی مشروط منطق کی سمجھ کو جانچیں:**
+- کیا ہوتا ہے اگر `currentMoney` بالکل `laptopPrice` کے برابر ہو؟
+- کیا آپ کسی حقیقی دنیا کے منظر نامے کے بارے میں سوچ سکتے ہیں جہاں if-else منطق مفید ہو؟
+- آپ اسے متعدد قیمتوں کی حدوں کو سنبھالنے کے لیے کیسے بڑھا سکتے ہیں؟
+
+```mermaid
+flowchart TD
+    A["🔍 Evaluate Condition"] --> B{"Condition True?"}
+    B -->|Yes| C["📤 Execute IF block"]
+    B -->|No| D["📥 Execute ELSE block"]
+    
+    C --> E["✅ One path taken"]
+    D --> E
+    
+    F["🌐 Real-world Examples"] --> F1["User login status"]
+    F --> F2["Age verification"]
+    F --> F3["Form validation"]
+    F --> F4["Game state changes"]
+    
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#e3f2fd
+    style F fill:#f3e5f5
+```
 
-✅ اس کوڈ اور نیچے دیے گئے کوڈ کو براؤزر کنسول میں چلا کر اپنی سمجھ کو جانچیں۔ currentMoney اور laptopPrice ویریبلز کی ویلیوز کو تبدیل کریں تاکہ واپس شدہ `console.log()` کو تبدیل کیا جا سکے۔
+> **اہم بصیرت**: If-Else یقینی بناتا ہے کہ بالکل ایک راستہ لیا جائے۔ یہ ضمانت دیتا ہے کہ آپ کا پروگرام کسی بھی حالت کے لیے ہمیشہ جواب دے گا!
 
-## Switch اسٹیٹمنٹ
+## Switch بیان
 
-کبھی کبھار آپ کو ایک ویلیو کو کئی آپشنز کے خلاف موازنہ کرنے کی ضرورت ہوتی ہے۔ حالانکہ آپ کئی `if..else` اسٹیٹمنٹس کو چین کر سکتے ہیں، یہ طریقہ غیر عملی ہو جاتا ہے۔ `switch` اسٹیٹمنٹ متعدد واضح ویلیوز کو ہینڈل کرنے کے لیے ایک صاف ستھرا ڈھانچہ فراہم کرتا ہے۔
+کبھی کبھی آپ کو ایک ویلیو کو متعدد اختیارات کے خلاف موازنہ کرنے کی ضرورت ہوتی ہے۔ حالانکہ آپ کئی `if..else` بیانات کو جوڑ سکتے ہیں، یہ طریقہ غیر عملی ہو جاتا ہے۔ `switch` بیان متعدد مخصوص ویلیوز کو سنبھالنے کے لیے ایک صاف ستھری ساخت فراہم کرتا ہے۔
 
-یہ تصور ابتدائی ٹیلیفون ایکسچینجز میں استعمال ہونے والے میکینیکل سوئچنگ سسٹمز سے مشابہت رکھتا ہے – ایک ان پٹ ویلیو یہ طے کرتی ہے کہ ایگزیکیوشن کس مخصوص راستے پر جائے گا۔
+یہ تصور ابتدائی ٹیلیفون ایکسچینجز میں استعمال ہونے والے میکینیکل سوئچنگ سسٹمز سے مشابہت رکھتا ہے – ایک ان پٹ ویلیو فیصلہ کرتی ہے کہ عمل کس مخصوص راستے پر جائے گا۔
 
 ```javascript
 switch (expression) {
@@ -135,12 +287,12 @@ switch (expression) {
 }
 ```
 
-یہاں اس کا ڈھانچہ ہے:
-- جاوا اسکرپٹ ایکسپریشن کو ایک بار ایویلیوایٹ کرتا ہے
-- ہر `case` کو دیکھتا ہے تاکہ میچ تلاش کرے
-- جب میچ ملتا ہے، تو وہ کوڈ بلاک چلاتا ہے
-- `break` جاوا اسکرپٹ کو سوئچ سے باہر نکلنے کا کہتا ہے
-- اگر کوئی کیس میچ نہ کرے، تو وہ `default` بلاک چلاتا ہے (اگر آپ کے پاس ہو)
+یہاں یہ کیسے ترتیب دیا گیا ہے:
+- جاوا اسکرپٹ ایکسپریشن کا ایک بار جائزہ لیتا ہے
+- یہ ہر `case` کو دیکھتا ہے تاکہ ایک میچ تلاش کرے
+- جب اسے میچ ملتا ہے، تو وہ کوڈ بلاک چلاتا ہے
+- `break` جاوا اسکرپٹ کو بتاتا ہے کہ رک جائے اور سوئچ سے باہر نکل جائے
+- اگر کوئی کیسز میچ نہیں کرتے، تو یہ `default` بلاک چلاتا ہے (اگر آپ کے پاس ہو)
 
 ```javascript
 // Program using switch statement for day of week
@@ -164,30 +316,101 @@ switch (dayNumber) {
 console.log(`Today is ${dayName}`);
 ```
 
-اس مثال میں، جاوا اسکرپٹ دیکھتا ہے کہ `dayNumber` `2` ہے، میچنگ `case 2` کو تلاش کرتا ہے، `dayName` کو "Tuesday" پر سیٹ کرتا ہے، اور پھر سوئچ سے باہر نکلتا ہے۔ نتیجہ؟ "Today is Tuesday" کنسول میں ظاہر ہوتا ہے۔
+اس مثال میں، جاوا اسکرپٹ دیکھتا ہے کہ `dayNumber` `2` ہے، مماثل `case 2` تلاش کرتا ہے، `dayName` کو "Tuesday" پر سیٹ کرتا ہے، اور پھر سوئچ سے باہر نکل جاتا ہے۔ نتیجہ؟ "Today is Tuesday" کنسول میں لاگ ہوتا ہے۔
+
+```mermaid
+flowchart TD
+    A["📥 switch(expression)"] --> B["🔍 Evaluate once"]
+    B --> C{"Match case 1?"}
+    C -->|Yes| D["📋 Execute case 1"]
+    C -->|No| E{"Match case 2?"}
+    E -->|Yes| F["📋 Execute case 2"]
+    E -->|No| G{"Match case 3?"}
+    G -->|Yes| H["📋 Execute case 3"]
+    G -->|No| I["📋 Execute default"]
+    
+    D --> J["🛑 break"]
+    F --> K["🛑 break"]
+    H --> L["🛑 break"]
+    
+    J --> M["✅ Exit switch"]
+    K --> M
+    L --> M
+    I --> M
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style M fill:#e8f5e8
+```
+
+✅ اس کوڈ اور درج ذیل کوڈ کو براؤزر کنسول میں چلا کر اپنی سمجھ کو جانچیں۔ ویریبل `a` کی ویلیوز کو تبدیل کریں تاکہ واپس شدہ `console.log()` کو تبدیل کیا جا سکے۔
+
+### 🔄 **Switch بیان کی مہارت: متعدد اختیارات**
+
+**اپنی سوئچ کی سمجھ کو جانچیں:**
+- کیا ہوتا ہے اگر آپ `break` بیان بھول جائیں؟
+- آپ کب `switch` کو متعدد `if-else` بیانات کے بجائے استعمال کریں گے؟
+- `default` کیس کیوں مفید ہے حالانکہ آپ سوچتے ہیں کہ آپ نے تمام امکانات کا احاطہ کر لیا ہے؟
+
+```mermaid
+pie title "When to Use Each Decision Structure"
+    "Simple if-else" : 40
+    "Complex if-else chains" : 25
+    "Switch statements" : 20
+    "Ternary operators" : 15
+```
 
-✅ اس کوڈ اور نیچے دیے گئے کوڈ کو براؤزر کنسول میں چلا کر اپنی سمجھ کو جانچیں۔ ویریبل a کی ویلیوز کو تبدیل کریں تاکہ واپس شدہ `console.log()` کو تبدیل کیا جا سکے۔
+> **بہترین عمل**: جب ایک ویریبل کو متعدد مخصوص ویلیوز کے خلاف موازنہ کریں تو `switch` استعمال کریں۔ رینج چیک یا پیچیدہ حالات کے لیے `if-else` استعمال کریں!
 
-## لاجیکل آپریٹرز اور Boolean
+## منطقی آپریٹرز اور بوولینز
 
-پیچیدہ فیصلے اکثر ایک ساتھ کئی حالات کا جائزہ لینے کی ضرورت ہوتی ہے۔ جیسے کہ Boolean الجبرا ریاضی دانوں کو لاجیکل ایکسپریشنز کو جوڑنے کی اجازت دیتا ہے، پروگرامنگ لاجیکل آپریٹرز فراہم کرتی ہے تاکہ کئی Boolean حالات کو جوڑا جا سکے۔
+پیچیدہ فیصلے اکثر ایک ساتھ متعدد حالات کا جائزہ لینے کی ضرورت ہوتی ہے۔ جیسے کہ بوولین الجبرا ریاضی دانوں کو منطقی اظہاروں کو جوڑنے کی اجازت دیتا ہے، پروگرامنگ منطقی آپریٹرز فراہم کرتی ہے تاکہ متعدد بوولین حالات کو جوڑا جا سکے۔
 
-یہ آپریٹرز سادہ true/false جائزوں کو جوڑ کر پیچیدہ کنڈیشنل لاجک کو ممکن بناتے ہیں۔
+یہ آپریٹرز سادہ true/false جائزوں کو جوڑ کر پیچیدہ مشروط منطق کو ممکن بناتے ہیں۔
 
 | علامت | وضاحت                                                                                     | مثال                                                                 |
 | ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| `&&`   | **لاجیکل AND**: دو Boolean ایکسپریشنز کا موازنہ کرتا ہے۔ صرف اس وقت true واپس کرتا ہے جب دونوں طرف true ہوں | `(5 > 3) && (5 < 10) // دونوں طرف true ہیں۔ true واپس کرتا ہے` |
-| `\|\|` | **لاجیکل OR**: دو Boolean ایکسپریشنز کا موازنہ کرتا ہے۔ اگر کم از کم ایک طرف true ہو تو true واپس کرتا ہے     | `(5 > 10) \|\| (5 < 10) // ایک طرف false ہے، دوسری true ہے۔ true واپس کرتا ہے` |
-| `!`    | **لاجیکل NOT**: Boolean ایکسپریشن کی مخالف ویلیو واپس کرتا ہے                             | `!(5 > 10) // 5 10 سے زیادہ نہیں ہے، تو "!" اسے true بناتا ہے`         |
+| `&&`   | **منطقی AND**: دو بوولین اظہاروں کا موازنہ کرتا ہے۔ true **صرف** تب واپس کرتا ہے جب دونوں طرف true ہوں | `(5 > 3) && (5 < 10) // دونوں طرف true ہیں۔ true واپس کرتا ہے` |
+| `\|\|` | **منطقی OR**: دو بوولین اظہاروں کا موازنہ کرتا ہے۔ true واپس کرتا ہے اگر کم از کم ایک طرف true ہو     | `(5 > 10) \|\| (5 < 10) // ایک طرف false ہے، دوسری true ہے۔ true واپس کرتا ہے` |
+| `!`    | **منطقی NOT**: بوولین اظہار کی مخالف ویلیو واپس کرتا ہے                             | `!(5 > 10) // 5 10 سے بڑا نہیں ہے، تو "!" اسے true بناتا ہے`         |
 
-یہ آپریٹرز آپ کو حالات کو مفید طریقوں سے جوڑنے دیتے ہیں:
-- AND (`&&`) کا مطلب ہے دونوں حالات true ہونے چاہئیں
-- OR (`||`) کا مطلب ہے کم از کم ایک حالت true ہونی چاہیے  
+یہ آپریٹرز آپ کو حالات کو مفید طریقوں سے جوڑنے کی اجازت دیتے ہیں:
+- AND (`&&`) کا مطلب ہے کہ دونوں حالات true ہونے چاہئیں
+- OR (`||`) کا مطلب ہے کہ کم از کم ایک حالت true ہونی چاہیے  
 - NOT (`!`) true کو false میں تبدیل کرتا ہے (اور اس کے برعکس)
 
-## لاجیکل آپریٹرز کے ساتھ حالات اور فیصلے
+```mermaid
+flowchart LR
+    A["🔗 Logical Operators"] --> B["&& AND"]
+    A --> C["|| OR"]
+    A --> D["! NOT"]
+    
+    B --> B1["Both must be true"]
+    B --> B2["true && true = true"]
+    B --> B3["true && false = false"]
+    
+    C --> C1["At least one true"]
+    C --> C2["true || false = true"]
+    C --> C3["false || false = false"]
+    
+    D --> D1["Flips the value"]
+    D --> D2["!true = false"]
+    D --> D3["!false = true"]
+    
+    E["🌍 Real Examples"] --> E1["Age >= 18 && hasLicense"]
+    E --> E2["isWeekend || isHoliday"]
+    E --> E3["!isLoggedIn"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+
+## منطقی آپریٹرز کے ساتھ حالات اور فیصلے
 
-آئیے ان لاجیکل آپریٹرز کو ایک زیادہ حقیقت پسندانہ مثال کے ساتھ دیکھتے ہیں:
+آئیے ان منطقی آپریٹرز کو ایک زیادہ حقیقت پسندانہ مثال کے ساتھ دیکھتے ہیں:
 
 ```javascript
 let currentMoney = 600;
@@ -203,11 +426,40 @@ if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
 }
 ```
 
-اس مثال میں: ہم 20% ڈسکاؤنٹ قیمت (640) کا حساب لگاتے ہیں، پھر جائزہ لیتے ہیں کہ آیا ہمارے دستیاب فنڈز مکمل قیمت یا ڈسکاؤنٹ قیمت کو پورا کرتے ہیں۔ چونکہ 600 ڈسکاؤنٹ قیمت کی حد 640 کو پورا کرتا ہے، حالت true میں ایویلیوایٹ ہوتی ہے۔
+اس مثال میں: ہم 20% ڈسکاؤنٹ قیمت (640) کا حساب لگاتے ہیں، پھر جائزہ لیتے ہیں کہ آیا ہمارے دستیاب فنڈز مکمل قیمت یا ڈسکاؤنٹ قیمت کو پورا کرتے ہیں۔ چونکہ 600 ڈسکاؤنٹ قیمت کی حد 640 کو پورا کرتا ہے، حالت true کے طور پر جائزہ لیتی ہے۔
+
+### 🧮 **منطقی آپریٹرز کی جانچ: حالات کو جوڑنا**
+
+**اپنی منطقی آپریٹرز کی سمجھ کو جانچیں:**
+- اظہار `A && B` میں، کیا ہوتا ہے اگر A false ہو؟ کیا B کا جائزہ لیا جاتا ہے؟
+- کیا آپ ایسی صورتحال کے بارے میں سوچ سکتے ہیں جہاں آپ کو تینوں آپریٹرز (&&, ||, !) کی ضرورت ہو؟
+- `!user.isActive` اور `user.isActive !== true` میں کیا فرق ہے؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> EvaluateA: A && B
+    EvaluateA --> CheckB: A is true
+    EvaluateA --> ReturnFalse: A is false
+    CheckB --> ReturnTrue: B is true
+    CheckB --> ReturnFalse: B is false
+    
+    [*] --> EvaluateC: A || B
+    EvaluateC --> ReturnTrue: A is true
+    EvaluateC --> CheckD: A is false
+    CheckD --> ReturnTrue: B is true
+    CheckD --> ReturnFalse: B is false
+    
+    note right of EvaluateA
+        Short-circuit evaluation:
+        If A is false, B is never checked
+    end note
+```
+
+> **کارکردگی کا ٹپ**: جاوا اسکرپٹ "شارٹ سرکٹ جائزہ" استعمال کرتا ہے - `A && B` میں، اگر A false ہو، تو B کا جائزہ بھی نہیں لیا جاتا۔ اس کا فائدہ اٹھائیں!
 
-### نیگیشن آپریٹر
+### نفی کا آپریٹر
 
-کبھی کبھار یہ آسان ہوتا ہے کہ جب کچھ true نہ ہو تو اس کے بارے میں سوچا جائے۔ جیسے کہ "کیا یوزر لاگ ان ہے؟" پوچھنے کے بجائے، آپ "کیا یوزر لاگ ان نہیں ہے؟" پوچھنا چاہیں گے۔ ایکسکلیمیشن مارک (`!`) آپ کے لیے لاجک کو پلٹ دیتا ہے۔
+کبھی کبھی یہ سوچنا آسان ہوتا ہے کہ جب کچھ درست نہیں ہوتا۔ جیسے کہ "کیا صارف لاگ ان ہے؟" پوچھنے کے بجائے، آپ "کیا صارف لاگ ان نہیں ہے؟" پوچھنا چاہتے ہیں۔ تعجب نشان (`!`) آپ کے لیے منطق کو پلٹ دیتا ہے۔
 
 ```javascript
 if (!condition) {
@@ -217,17 +469,17 @@ if (!condition) {
 }
 ```
 
-`!` آپریٹر یہ کہنے جیسا ہے "اس کے برعکس..." – اگر کچھ `true` ہے، `!` اسے `false` بناتا ہے، اور اس کے برعکس۔
+`!` آپریٹر ایسا ہے جیسے کہ "اس کے برعکس..." – اگر کچھ `true` ہے، `!` اسے `false` بناتا ہے، اور اس کے برعکس۔
 
-### ٹرنری ایکسپریشنز
+### تین گنا اظہار
 
-سادہ کنڈیشنل اسائنمنٹس کے لیے، جاوا اسکرپٹ **ٹرنری آپریٹر** فراہم کرتا ہے۔ یہ مختصر سینٹیکس آپ کو ایک کنڈیشنل ایکسپریشن کو ایک لائن میں لکھنے کی اجازت دیتا ہے، جو اس وقت مفید ہوتا ہے جب آپ کو کسی حالت کی بنیاد پر دو ویلیوز میں سے ایک کو اسائن کرنا ہو۔
+سادہ مشروط تفویضات کے لیے، جاوا اسکرپٹ **تین گنا آپریٹر** فراہم کرتا ہے۔ یہ مختصر نحو آپ کو ایک مشروط اظہار کو ایک لائن میں لکھنے کی اجازت دیتا ہے، جب آپ کو کسی حالت کی بنیاد پر دو ویلیوز میں سے ایک تفویض کرنے کی ضرورت ہو تو مفید ہے۔
 
 ```javascript
 let variable = condition ? returnThisIfTrue : returnThisIfFalse;
 ```
 
-یہ ایک سوال کی طرح پڑھتا ہے: "کیا یہ حالت true ہے؟ اگر ہاں، تو یہ ویلیو استعمال کریں۔ اگر نہیں، تو وہ ویلیو استعمال کریں۔"
+یہ سوال کی طرح پڑھتا ہے: "کیا یہ حالت درست ہے؟ اگر ہاں، تو یہ ویلیو استعمال کریں۔ اگر نہیں، تو وہ ویلیو استعمال کریں۔"
 
 نیچے ایک زیادہ قابل فہم مثال ہے:
 
@@ -241,7 +493,7 @@ let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
 
 یہ لائن یہ کہہ رہی ہے: "کیا `firstNumber` `secondNumber` سے بڑا ہے؟ اگر ہاں، تو `firstNumber` کو `biggestNumber` میں ڈالیں۔ اگر نہیں، تو `secondNumber` کو `biggestNumber` میں ڈالیں۔"
 
-ٹرنری آپریٹر یہ روایتی `if..else` اسٹیٹمنٹ لکھنے کا صرف ایک مختصر طریقہ ہے:
+تین گنا آپریٹر یہ روایتی `if..else` بیان لکھنے کا صرف ایک مختصر طریقہ ہے:
 
 ```javascript
 let biggestNumber;
@@ -252,23 +504,45 @@ if (firstNumber > secondNumber) {
 }
 ```
 
-دونوں طریقے ایک جیسے نتائج پیدا کرتے ہیں۔ ٹرنری آپریٹر اختصار فراہم کرتا ہے، جبکہ روایتی if-else ڈھانچہ پیچیدہ حالات کے لیے زیادہ قابل مطالعہ ہو سکتا ہے۔
+دونوں طریقے ایک جیسے نتائج پیدا کرتے ہیں۔ تین گنا آپریٹر اختصار فراہم کرتا ہے، جبکہ روایتی if-else ساخت پیچیدہ حالات کے لیے زیادہ قابل مطالعہ ہو سکتی ہے۔
+
+```mermaid
+flowchart LR
+    A["🤔 Ternary Operator"] --> B["condition ?"]
+    B --> C["valueIfTrue :"]
+    C --> D["valueIfFalse"]
+    
+    E["📝 Traditional If-Else"] --> F["if (condition) {"]
+    F --> G["  return valueIfTrue"]
+    G --> H["} else {"]
+    H --> I["  return valueIfFalse"]
+    I --> J["}"]
+    
+    K["⚡ When to Use"] --> K1["Simple assignments"]
+    K --> K2["Short conditions"]
+    K --> K3["Inline decisions"]
+    K --> K4["Return statements"]
+    
+    style A fill:#e3f2fd
+    style E fill:#fff3e0
+    style K fill:#e8f5e8
+```
 
 ---
 
 ## 🚀 چیلنج
 
-ایک پروگرام بنائیں جو پہلے لاجیکل آپریٹرز کے ساتھ لکھا گیا ہو، اور پھر اسے ٹرنری ایکسپریشن کا استعمال کرتے ہوئے دوبارہ لکھیں۔ آپ کو کون سا سینٹیکس پسند ہے؟
+ایک پروگرام بنائیں جو پہلے منطقی آپریٹرز کے ساتھ لکھا گیا ہو، اور پھر اسے تین گنا اظہار کا استعمال کرتے ہوئے دوبارہ لکھیں۔ آپ کو کون سا نحو زیادہ پسند ہے؟
 
 ---
 
-## GitHub Copilot ایجنٹ چیلنج 🚀
+## GitHub Copilot Agent چیلنج 🚀
 
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** ایک جامع گریڈ کیلکولیٹر بنائیں جو اس سبق سے متعدد فیصلے کرنے کے تصورات کو ظاہر کرے، بشمول if-else اسٹیٹمنٹس، switch اسٹیٹمنٹس، لاجیکل آپریٹرز، اور ٹرنری ایکسپریشنز۔
+**تفصیل:** ایک جامع گریڈ کیلکولیٹر بنائیں جو اس سبق سے متعدد فیصلے کرنے کے تصورات کو ظاہر کرے، بشمول if-else بیانات، switch بیانات، منطقی آپریٹرز، اور تین گنا اظہار۔
 
-**پرومپٹ:** ایک جاوا اسکرپٹ پروگرام لکھیں جو طالب علم کے عددی اسکور (0-100) کو لے اور درج ذیل معیار کے مطابق ان کے لیٹر گریڈ کا تعین کرے:
+**پرومپٹ:** ایک جاوا اسکرپٹ پروگرام لکھیں جو ایک طالب علم کے عددی اسکور (0-100) کو لے اور ان کے لیٹر گریڈ کا تعین کرے درج ذیل معیار کے مطابق:
 - A: 90-100
 - B: 80-89  
 - C: 70-79
@@ -276,13 +550,13 @@ if (firstNumber > secondNumber) {
 - F: 60 سے کم
 
 ضروریات:
-1. لیٹر گریڈ کا تعین کرنے کے لیے if-else اسٹیٹمنٹ کا استعمال کریں
-2. چیک کرنے کے لیے لاجیکل آپریٹرز کا استعمال کریں کہ آیا طالب علم پاس کرتا ہے (گریڈ >= 60) اور آنرز حاصل کرتا ہے (گریڈ >= 90)
-3. ہر لیٹر گریڈ کے لیے مخصوص فیڈبیک فراہم کرنے کے لیے switch اسٹیٹمنٹ کا استعمال کریں
-4. اگلے کورس کے لیے اہل ہونے کا تعین کرنے کے لیے ٹرنری آپریٹر کا استعمال کریں (گریڈ >= 70)
-5. اسکور کو 0 اور 100 کے درمیان یقینی بنانے کے لیے ان پٹ ویلیڈیشن شامل کریں
+1. لیٹر گریڈ کا تعین کرنے کے لیے if-else بیان کا استعمال کریں
+2. منطقی آپریٹرز کا استعمال کریں تاکہ یہ چیک کیا جا سکے کہ طالب علم پاس کرتا ہے (گریڈ >= 60) اور اعزاز حاصل کرتا ہے (گریڈ >= 90)۔
+3. ایک سوئچ اسٹیٹمنٹ کا استعمال کریں تاکہ ہر لیٹر گریڈ کے لیے مخصوص فیڈبیک فراہم کیا جا سکے۔
+4. ایک ٹرنری آپریٹر کا استعمال کریں تاکہ یہ طے کیا جا سکے کہ طالب علم اگلے کورس کے لیے اہل ہے یا نہیں (گریڈ >= 70)۔
+5. ان پٹ کی تصدیق شامل کریں تاکہ اسکور 0 اور 100 کے درمیان ہو۔
 
-اپنے پروگرام کو مختلف اسکورز کے ساتھ ٹیسٹ کریں، بشمول کنارے کے کیسز جیسے 59، 60، 89، 90، اور غیر درست ان پٹس۔
+اپنے پروگرام کو مختلف اسکورز کے ساتھ ٹیسٹ کریں، جن میں کنارے کے کیسز جیسے 59، 60، 89، 90، اور غیر درست ان پٹ شامل ہوں۔
 
 [ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
 
@@ -292,7 +566,7 @@ if (firstNumber > secondNumber) {
 
 ## جائزہ اور خود مطالعہ
 
-صارف کے لیے دستیاب متعدد آپریٹرز کے بارے میں مزید پڑھیں [MDN پر](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)۔
+صارف کے لیے دستیاب مختلف آپریٹرز کے بارے میں مزید پڑھیں [ایم ڈی این پر](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)۔
 
 جوش کومو کے شاندار [آپریٹر لوک اپ](https://joshwcomeau.com/operator-lookup/) کو دیکھیں!
 
@@ -302,5 +576,105 @@ if (firstNumber > secondNumber) {
 
 ---
 
-**اعلانِ لاتعلقی**:  
+## 🧠 **آپ کے فیصلہ سازی کے ٹول کٹ کا خلاصہ**
+
+```mermaid
+graph TD
+    A["🎯 JavaScript Decisions"] --> B["🔍 Boolean Logic"]
+    A --> C["📊 Conditional Statements"]
+    A --> D["🔗 Logical Operators"]
+    A --> E["⚡ Advanced Patterns"]
+    
+    B --> B1["true/false values"]
+    B --> B2["Comparison operators"]
+    B --> B3["Truthiness concepts"]
+    
+    C --> C1["if statements"]
+    C --> C2["if-else chains"]
+    C --> C3["switch statements"]
+    
+    D --> D1["&& (AND)"]
+    D --> D2["|| (OR)"]
+    D --> D3["! (NOT)"]
+    
+    E --> E1["Ternary operator"]
+    E --> E2["Short-circuit evaluation"]
+    E --> E3["Complex conditions"]
+    
+    F["💡 Key Principles"] --> F1["Clear readable conditions"]
+    F --> F2["Consistent comparison style"]
+    F --> F3["Proper operator precedence"]
+    F --> F4["Efficient evaluation order"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 آپ کے جاوا اسکرپٹ فیصلہ سازی کے ماہر بننے کا ٹائم لائن
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] اپنے براؤزر کنسول میں موازنہ آپریٹرز کی مشق کریں۔
+- [ ] ایک سادہ if-else اسٹیٹمنٹ لکھیں جو آپ کی عمر چیک کرے۔
+- [ ] چیلنج آزمائیں: ایک if-else کو ٹرنری آپریٹر کے ذریعے دوبارہ لکھیں۔
+- [ ] مختلف "truthy" اور "falsy" ویلیوز کے ساتھ کیا ہوتا ہے، ٹیسٹ کریں۔
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] لیکچر کے بعد کا کوئز مکمل کریں اور کسی بھی الجھن والے تصورات کا جائزہ لیں۔
+- [ ] گٹ ہب کوپائلٹ چیلنج سے جامع گریڈ کیلکولیٹر بنائیں۔
+- [ ] ایک حقیقی دنیا کے منظرنامے کے لیے ایک سادہ فیصلہ درخت بنائیں (جیسے کیا پہننا ہے منتخب کرنا)۔
+- [ ] منطقی آپریٹرز کے ساتھ متعدد شرائط کو یکجا کرنے کی مشق کریں۔
+- [ ] مختلف استعمال کے کیسز کے لیے سوئچ اسٹیٹمنٹ کے ساتھ تجربہ کریں۔
+
+### 📅 **آپ کی ہفتہ بھر کی منطق کی مہارت**
+- [ ] تخلیقی مثالوں کے ساتھ آپریٹرز اسائنمنٹ مکمل کریں۔
+- [ ] مختلف مشروط ڈھانچوں کا استعمال کرتے ہوئے ایک منی کوئز ایپلیکیشن بنائیں۔
+- [ ] ایک فارم ویلیڈیٹر بنائیں جو متعدد ان پٹ شرائط کو چیک کرے۔
+- [ ] جوش کومو کے [آپریٹر لوک اپ](https://joshwcomeau.com/operator-lookup/) مشقوں کی مشق کریں۔
+- [ ] موجودہ کوڈ کو زیادہ مناسب مشروط ڈھانچوں کے استعمال کے لیے دوبارہ ترتیب دیں۔
+- [ ] شارٹ سرکٹ ایویلیوایشن اور کارکردگی کے اثرات کا مطالعہ کریں۔
+
+### 🌟 **آپ کی مہینے بھر کی تبدیلی**
+- [ ] پیچیدہ نیسٹڈ شرائط میں مہارت حاصل کریں اور کوڈ کی پڑھنے کی صلاحیت کو برقرار رکھیں۔
+- [ ] پیچیدہ فیصلہ سازی کی منطق کے ساتھ ایک ایپلیکیشن بنائیں۔
+- [ ] موجودہ پروجیکٹس میں مشروط منطق کو بہتر بنا کر اوپن سورس میں تعاون کریں۔
+- [ ] کسی اور کو مختلف مشروط ڈھانچوں کے بارے میں سکھائیں اور کب کس کا استعمال کرنا ہے۔
+- [ ] مشروط منطق کے لیے فنکشنل پروگرامنگ کے طریقوں کو دریافت کریں۔
+- [ ] مشروط بہترین طریقوں کے لیے ذاتی حوالہ گائیڈ بنائیں۔
+
+### 🏆 **فیصلہ سازی کے چیمپئن کے لیے آخری چیک ان**
+
+**اپنی منطقی سوچ کی مہارت کا جشن منائیں:**
+- آپ نے سب سے پیچیدہ فیصلہ سازی کی منطق کون سی کامیابی سے نافذ کی؟
+- آپ کو کون سا مشروط ڈھانچہ سب سے زیادہ قدرتی لگتا ہے اور کیوں؟
+- منطقی آپریٹرز کے بارے میں جاننے سے آپ کے مسئلے کو حل کرنے کے طریقے میں کیا تبدیلی آئی؟
+- کون سی حقیقی دنیا کی ایپلیکیشن پیچیدہ فیصلہ سازی کی منطق سے فائدہ اٹھا سکتی ہے؟
+
+```mermaid
+journey
+    title Your Logical Thinking Evolution
+    section Today
+      Boolean Confusion: 3: You
+      If-Else Understanding: 4: You
+      Operator Recognition: 5: You
+    section This Week
+      Complex Conditions: 4: You
+      Switch Mastery: 5: You
+      Logical Combinations: 5: You
+    section Next Month
+      Advanced Patterns: 5: You
+      Performance Awareness: 5: You
+      Teaching Others: 5: You
+```
+
+> 🧠 **آپ نے ڈیجیٹل فیصلہ سازی کی مہارت حاصل کر لی ہے!** ہر انٹرایکٹو ایپلیکیشن صارف کی کارروائیوں اور بدلتے حالات کا ذہانت سے جواب دینے کے لیے مشروط منطق پر انحصار کرتی ہے۔ آپ اب سمجھتے ہیں کہ اپنے پروگراموں کو سوچنے، جانچنے، اور مناسب ردعمل کا انتخاب کرنے کا طریقہ کیسے سکھایا جائے۔ یہ منطقی بنیاد ہر متحرک ایپلیکیشن کو طاقت دے گی جو آپ بنائیں گے! 🎉
+
+---
+
+**ڈسکلیمر**:  
 یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/2-js-basics/4-arrays-loops/README.md b/translations/ur/2-js-basics/4-arrays-loops/README.md
index 44394e141f..6e02e31802 100644
--- a/translations/ur/2-js-basics/4-arrays-loops/README.md
+++ b/translations/ur/2-js-basics/4-arrays-loops/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "9197f8af0fef9be6e81d4dbda23c7e7d",
-  "translation_date": "2025-10-22T14:33:06+00:00",
+  "original_hash": "1710a50a519a6e4a1b40a5638783018d",
+  "translation_date": "2025-11-03T12:54:29+00:00",
   "source_file": "2-js-basics/4-arrays-loops/README.md",
   "language_code": "ur"
 }
@@ -10,16 +10,33 @@ CO_OP_TRANSLATOR_METADATA:
 # جاوا اسکرپٹ کی بنیادی باتیں: Arrays اور Loops
 
 ![جاوا اسکرپٹ کی بنیادی باتیں - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ur.png)
-> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی جانب سے
+> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
+
+```mermaid
+journey
+    title Your Arrays & Loops Adventure
+    section Array Fundamentals
+      Creating Arrays: 5: You
+      Accessing Elements: 4: You
+      Array Methods: 5: You
+    section Loop Mastery
+      For Loops: 4: You
+      While Loops: 5: You
+      Modern Syntax: 4: You
+    section Data Processing
+      Array + Loops: 5: You
+      Real-world Applications: 4: You
+      Performance Optimization: 5: You
+```
 
 ## لیکچر سے پہلے کا کوئز
 [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/13)
 
-کبھی سوچا ہے کہ ویب سائٹس شاپنگ کارٹ آئٹمز کو کیسے ٹریک کرتی ہیں یا آپ کے دوستوں کی فہرست کیسے دکھاتی ہیں؟ یہی وہ جگہ ہے جہاں arrays اور loops کام آتے ہیں۔ Arrays ڈیجیٹل کنٹینرز کی طرح ہیں جو کئی معلومات کو ایک ساتھ رکھتے ہیں، جبکہ loops آپ کو اس ڈیٹا کے ساتھ مؤثر طریقے سے کام کرنے دیتے ہیں بغیر بار بار کوڈ لکھے۔
+کبھی سوچا ہے کہ ویب سائٹس شاپنگ کارٹ آئٹمز کو کیسے ٹریک کرتی ہیں یا آپ کی فرینڈ لسٹ کیسے دکھاتی ہیں؟ یہی وہ جگہ ہے جہاں arrays اور loops کام آتے ہیں۔ Arrays ڈیجیٹل کنٹینرز کی طرح ہیں جو کئی معلومات کو ایک ساتھ رکھتے ہیں، جبکہ loops آپ کو اس ڈیٹا کے ساتھ مؤثر طریقے سے کام کرنے دیتے ہیں بغیر بار بار کوڈ لکھے۔
 
-یہ دونوں تصورات مل کر آپ کے پروگرامز میں معلومات کو سنبھالنے کی بنیاد بناتے ہیں۔ آپ سیکھیں گے کہ ہر قدم کو دستی طور پر لکھنے سے لے کر ذہین اور مؤثر کوڈ بنانے تک کیسے جائیں جو سیکڑوں یا ہزاروں آئٹمز کو جلدی سے پروسیس کر سکے۔
+یہ دونوں تصورات مل کر آپ کے پروگرامز میں معلومات کو سنبھالنے کی بنیاد بناتے ہیں۔ آپ سیکھیں گے کہ ہر قدم کو دستی طور پر لکھنے سے لے کر اسمارٹ، مؤثر کوڈ بنانے تک کیسے جائیں جو سیکڑوں یا ہزاروں آئٹمز کو جلدی سے پروسیس کر سکے۔
 
-اس سبق کے اختتام تک، آپ سمجھ جائیں گے کہ پیچیدہ ڈیٹا کے کاموں کو صرف چند لائنوں کے کوڈ کے ذریعے کیسے انجام دیا جا سکتا ہے۔ آئیے ان ضروری پروگرامنگ تصورات کو دریافت کریں۔
+اس سبق کے اختتام تک، آپ سمجھ جائیں گے کہ صرف چند لائنوں کے کوڈ کے ساتھ پیچیدہ ڈیٹا کے کام کیسے انجام دیے جا سکتے ہیں۔ آئیے ان ضروری پروگرامنگ تصورات کو دریافت کریں۔
 
 [![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
 
@@ -29,17 +46,57 @@ CO_OP_TRANSLATOR_METADATA:
 
 > آپ یہ سبق [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) پر لے سکتے ہیں!
 
+```mermaid
+mindmap
+  root((Data Processing))
+    Arrays
+      Structure
+        Square brackets syntax
+        Zero-based indexing
+        Dynamic sizing
+      Operations
+        push/pop
+        shift/unshift
+        indexOf/includes
+      Types
+        Numbers array
+        Strings array
+        Mixed types
+    Loops
+      For Loops
+        Counting iterations
+        Array processing
+        Predictable flow
+      While Loops
+        Condition-based
+        Unknown iterations
+        User input
+      Modern Syntax
+        for...of
+        forEach
+        Functional methods
+    Applications
+      Data Analysis
+        Statistics
+        Filtering
+        Transformations
+      User Interfaces
+        Lists
+        Menus
+        Galleries
+```
+
 ## Arrays
 
-Arrays کو ایک ڈیجیٹل فائلنگ کابینہ کے طور پر سوچیں - ایک دراز میں ایک دستاویز رکھنے کے بجائے، آپ کئی متعلقہ آئٹمز کو ایک ہی منظم کنٹینر میں ترتیب دے سکتے ہیں۔ پروگرامنگ کی زبان میں، arrays آپ کو کئی معلومات کو ایک منظم پیکج میں رکھنے دیتے ہیں۔
+Arrays کو ایک ڈیجیٹل فائلنگ کیبنٹ کے طور پر سوچیں - ایک دراز میں ایک دستاویز رکھنے کے بجائے، آپ ایک ہی منظم کنٹینر میں کئی متعلقہ آئٹمز کو ترتیب دے سکتے ہیں۔ پروگرامنگ کی زبان میں، arrays آپ کو ایک منظم پیکج میں کئی معلومات ذخیرہ کرنے دیتے ہیں۔
 
-چاہے آپ فوٹو گیلری بنا رہے ہوں، ٹو ڈو لسٹ کا انتظام کر رہے ہوں، یا گیم میں ہائی اسکورز کو ٹریک کر رہے ہوں، arrays ڈیٹا کی تنظیم کے لیے بنیاد فراہم کرتے ہیں۔ آئیے دیکھتے ہیں کہ یہ کیسے کام کرتے ہیں۔
+چاہے آپ فوٹو گیلری بنا رہے ہوں، ٹو ڈو لسٹ کا انتظام کر رہے ہوں، یا کسی گیم میں ہائی اسکورز کو ٹریک کر رہے ہوں، arrays ڈیٹا آرگنائزیشن کی بنیاد فراہم کرتے ہیں۔ آئیے دیکھتے ہیں کہ یہ کیسے کام کرتے ہیں۔
 
-✅ Arrays ہر جگہ موجود ہیں! کیا آپ arrays کی کوئی حقیقی زندگی کی مثال دے سکتے ہیں، جیسے کہ سولر پینل array؟
+✅ Arrays ہر جگہ موجود ہیں! کیا آپ arrays کی کسی حقیقی زندگی کی مثال دے سکتے ہیں، جیسے سولر پینل array؟
 
 ### Arrays بنانا
 
-Array بنانا بہت آسان ہے - بس مربع بریکٹس استعمال کریں!
+Arrays بنانا بہت آسان ہے - بس مربع بریکٹس استعمال کریں!
 
 ```javascript
 // Empty array - like an empty shopping cart waiting for items
@@ -47,9 +104,9 @@ const myArray = [];
 ```
 
 **یہاں کیا ہو رہا ہے؟**
-آپ نے ابھی مربع بریکٹس `[]` استعمال کر کے ایک خالی کنٹینر بنایا ہے۔ اسے ایک خالی لائبریری شیلف کی طرح سوچیں - یہ تیار ہے کہ آپ جو کتابیں وہاں ترتیب دینا چاہیں۔
+آپ نے ابھی ان مربع بریکٹس `[]` کا استعمال کرتے ہوئے ایک خالی کنٹینر بنایا ہے۔ اسے ایک خالی لائبریری شیلف کی طرح سوچیں - یہ تیار ہے کہ آپ جو کتابیں وہاں رکھنا چاہتے ہیں انہیں ترتیب دے۔
 
-آپ اپنے array کو شروع سے ہی ابتدائی اقدار سے بھر سکتے ہیں:
+آپ اپنے array کو شروع سے ہی ابتدائی اقدار کے ساتھ بھر سکتے ہیں:
 
 ```javascript
 // Your ice cream shop's flavor menu
@@ -62,16 +119,46 @@ const userData = ["John", 25, true, "developer"];
 const scores = [95, 87, 92, 78, 85];
 ```
 
-**نوٹ کرنے کے لیے دلچسپ چیزیں:**
-- آپ ایک ہی array میں متن، نمبر، یا حتیٰ کہ true/false اقدار کو بھی رکھ سکتے ہیں
-- ہر آئٹم کو ایک کاما سے الگ کریں - آسان!
+**نوٹ کرنے کے لیے دلچسپ باتیں:**
+- آپ ایک ہی array میں متن، نمبر، یا یہاں تک کہ true/false اقدار کو ذخیرہ کر سکتے ہیں
+- ہر آئٹم کو کاما سے الگ کریں - آسان!
 - Arrays متعلقہ معلومات کو ایک ساتھ رکھنے کے لیے بہترین ہیں
 
+```mermaid
+flowchart LR
+    A["📦 Arrays"] --> B["Create [ ]"]
+    A --> C["Store Multiple Items"]
+    A --> D["Access by Index"]
+    
+    B --> B1["const arr = []"]
+    B --> B2["const arr = [1,2,3]"]
+    
+    C --> C1["Numbers"]
+    C --> C2["Strings"]
+    C --> C3["Booleans"]
+    C --> C4["Mixed Types"]
+    
+    D --> D1["arr[0] = first"]
+    D --> D2["arr[1] = second"]
+    D --> D3["arr[2] = third"]
+    
+    E["📊 Array Index"] --> E1["Index 0: First"]
+    E --> E2["Index 1: Second"]
+    E --> E3["Index 2: Third"]
+    E --> E4["Index n-1: Last"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+```
+
 ### Array Indexing
 
-یہاں ایک چیز ہے جو شروع میں غیر معمولی لگ سکتی ہے: arrays اپنے آئٹمز کو 0 سے شروع کر کے نمبر دیتے ہیں، 1 سے نہیں۔ یہ zero-based indexing کمپیوٹر میموری کے کام کرنے کے طریقے کی جڑوں میں ہے - یہ پروگرامنگ کی روایت ہے جو C جیسی کمپیوٹنگ زبانوں کے ابتدائی دنوں سے چلی آ رہی ہے۔ array میں ہر جگہ کو ایک ایڈریس نمبر ملتا ہے جسے **index** کہا جاتا ہے۔
+یہاں ایک چیز ہے جو شروع میں غیر معمولی لگ سکتی ہے: arrays اپنے آئٹمز کو 0 سے شروع کرتے ہوئے نمبر دیتے ہیں، 1 سے نہیں۔ یہ زیرو بیسڈ انڈیکسنگ کمپیوٹر میموری کے کام کرنے کے طریقے کی جڑوں میں ہے - یہ کمپیوٹنگ زبانوں جیسے C کے ابتدائی دنوں سے ایک پروگرامنگ روایت رہی ہے۔ array میں ہر جگہ کو ایک اپنا ایڈریس نمبر ملتا ہے جسے **index** کہا جاتا ہے۔
 
-| Index | Value | Description |
+| انڈیکس | ویلیو | وضاحت |
 |-------|-------|-------------|
 | 0 | "Chocolate" | پہلا عنصر |
 | 1 | "Strawberry" | دوسرا عنصر |
@@ -79,7 +166,7 @@ const scores = [95, 87, 92, 78, 85];
 | 3 | "Pistachio" | چوتھا عنصر |
 | 4 | "Rocky Road" | پانچواں عنصر |
 
-✅ کیا یہ آپ کو حیران کرتا ہے کہ arrays 0 index سے شروع ہوتے ہیں؟ کچھ پروگرامنگ زبانوں میں indexes 1 سے شروع ہوتے ہیں۔ اس کے پیچھے دلچسپ تاریخ ہے، جسے آپ [Wikipedia پر پڑھ سکتے ہیں](https://en.wikipedia.org/wiki/Zero-based_numbering)۔
+✅ کیا آپ کو حیرت ہوتی ہے کہ arrays زیرو انڈیکس سے شروع ہوتے ہیں؟ کچھ پروگرامنگ زبانوں میں انڈیکس 1 سے شروع ہوتے ہیں۔ اس کے بارے میں دلچسپ تاریخ [Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering) پر پڑھ سکتے ہیں۔
 
 **Array عناصر تک رسائی حاصل کرنا:**
 
@@ -93,9 +180,9 @@ console.log(iceCreamFlavors[4]); // "Rocky Road" - last element
 ```
 
 **یہاں کیا ہو رہا ہے:**
-- **استعمال کرتا ہے** مربع بریکٹ نوٹیشن کے ساتھ index نمبر عناصر تک رسائی حاصل کرنے کے لیے
-- **واپس کرتا ہے** array میں اس مخصوص پوزیشن پر محفوظ کردہ قدر
-- **شروع کرتا ہے** 0 سے گنتی، پہلا عنصر index 0 بناتا ہے
+- **استعمال کرتا ہے** مربع بریکٹ نوٹیشن کے ساتھ انڈیکس نمبر عناصر تک رسائی حاصل کرنے کے لیے
+- **واپس کرتا ہے** array میں اس مخصوص پوزیشن پر ذخیرہ شدہ ویلیو
+- **شروع کرتا ہے** 0 سے گنتی، پہلا عنصر انڈیکس 0 بناتا ہے
 
 **Array عناصر میں ترمیم کرنا:**
 
@@ -110,13 +197,13 @@ console.log(iceCreamFlavors[5]); // "Cookie Dough"
 ```
 
 **اوپر، ہم نے:**
-- **ترمیم کی** عنصر index 4 پر "Rocky Road" سے "Butter Pecan" میں
-- **ایک نیا عنصر شامل کیا** "Cookie Dough" index 5 پر
-- **خود بخود** array کی لمبائی کو موجودہ حدود سے آگے شامل کرنے پر بڑھایا
+- **ترمیم کی** انڈیکس 4 پر عنصر "Rocky Road" سے "Butter Pecan" میں
+- **ایک نیا عنصر شامل کیا** "Cookie Dough" انڈیکس 5 پر
+- **خودکار طور پر** array کی لمبائی بڑھائی جب موجودہ حد سے آگے شامل کیا
 
 ### Array کی لمبائی اور عام طریقے
 
-Arrays میں بلٹ ان خصوصیات اور طریقے ہوتے ہیں جو ڈیٹا کے ساتھ کام کرنا بہت آسان بنا دیتے ہیں۔
+Arrays میں بلٹ ان پراپرٹیز اور طریقے ہوتے ہیں جو ڈیٹا کے ساتھ کام کرنا بہت آسان بناتے ہیں۔
 
 **Array کی لمبائی معلوم کرنا:**
 
@@ -131,8 +218,8 @@ console.log(iceCreamFlavors.length); // 6
 
 **یاد رکھنے کے اہم نکات:**
 - **واپس کرتا ہے** array میں عناصر کی کل تعداد
-- **خود بخود اپ ڈیٹ ہوتا ہے** جب عناصر شامل یا ہٹائے جاتے ہیں
-- **فراہم کرتا ہے** ایک متحرک شمار جو loops اور validation کے لیے مفید ہے
+- **خودکار طور پر اپ ڈیٹ ہوتا ہے** جب عناصر شامل یا ہٹائے جاتے ہیں
+- **فراہم کرتا ہے** ایک متحرک گنتی جو loops اور validation کے لیے مفید ہے
 
 **ضروری Array طریقے:**
 
@@ -153,28 +240,95 @@ const hasApple = fruits.includes("apple"); // Returns true
 ```
 
 **ان طریقوں کو سمجھنا:**
-- **شامل کرتا ہے** عناصر کو `push()` (آخر میں) اور `unshift()` (شروع میں)
-- **ہٹاتا ہے** عناصر کو `pop()` (آخر میں) اور `shift()` (شروع میں)
-- **مقام کا پتہ لگاتا ہے** `indexOf()` کے ساتھ اور موجودگی کو `includes()` کے ساتھ چیک کرتا ہے
-- **واپس کرتا ہے** مفید اقدار جیسے ہٹائے گئے عناصر یا پوزیشن indexes
+- **شامل کرتا ہے** عناصر `push()` (آخر میں) اور `unshift()` (شروع میں) کے ساتھ
+- **ہٹاتا ہے** عناصر `pop()` (آخر میں) اور `shift()` (شروع میں) کے ساتھ
+- **مقام کا پتہ لگاتا ہے** `indexOf()` کے ساتھ اور موجودگی کو چیک کرتا ہے `includes()` کے ساتھ
+- **واپس کرتا ہے** مفید ویلیوز جیسے ہٹائے گئے عناصر یا پوزیشن انڈیکس
 
 ✅ خود آزمائیں! اپنے براؤزر کے کنسول میں ایک array بنائیں اور اس میں ترمیم کریں۔
 
-## Loops
+### 🧠 **Array کی بنیادی باتوں کی جانچ: اپنے ڈیٹا کو منظم کرنا**
+
+**اپنی array کی سمجھ کو جانچیں:**
+- آپ کے خیال میں arrays 0 سے گنتی کیوں شروع کرتے ہیں نہ کہ 1 سے؟
+- اگر آپ کسی انڈیکس تک رسائی حاصل کرنے کی کوشش کریں جو موجود نہیں ہے (جیسے `arr[100]` 5 عنصر والے array میں)، تو کیا ہوگا؟
+- کیا آپ تین حقیقی دنیا کے منظرنامے سوچ سکتے ہیں جہاں arrays مفید ہوں؟
+
+```mermaid
+stateDiagram-v2
+    [*] --> EmptyArray: const arr = []
+    EmptyArray --> WithItems: Add elements
+    WithItems --> Accessing: Use indexes
+    Accessing --> Modifying: Change values
+    Modifying --> Processing: Use methods
+    
+    WithItems --> WithItems: push(), unshift()
+    Processing --> Processing: pop(), shift()
+    
+    note right of Accessing
+        Zero-based indexing
+        arr[0] = first element
+    end note
+    
+    note right of Processing
+        Built-in methods
+        Dynamic operations
+    end note
+```
 
-چارلس ڈکنز کے ناولز میں مشہور سزا کے بارے میں سوچیں جہاں طلباء کو بار بار تختی پر لائنیں لکھنی پڑتی تھیں۔ تصور کریں کہ اگر آپ کسی کو صرف یہ ہدایت دے سکیں کہ "یہ جملہ 100 بار لکھو" اور یہ خود بخود ہو جائے۔ یہی کام loops آپ کے کوڈ کے لیے کرتے ہیں۔
+> **حقیقی دنیا کی بصیرت**: Arrays پروگرامنگ میں ہر جگہ موجود ہیں! سوشل میڈیا فیڈز، شاپنگ کارٹس، فوٹو گیلریاں، پلے لسٹ گانے - یہ سب پردے کے پیچھے arrays ہیں!
 
-Loops ایک تھکے نہ جانے والے معاون کی طرح ہیں جو کاموں کو بغیر کسی غلطی کے دہرا سکتے ہیں۔ چاہے آپ کو شاپنگ کارٹ میں ہر آئٹم کو چیک کرنا ہو یا البم میں تمام تصاویر دکھانی ہوں، loops مؤثر طریقے سے تکرار کو سنبھالتے ہیں۔
+## Loops
 
-جاوا اسکرپٹ کئی قسم کے loops فراہم کرتا ہے جن میں سے آپ انتخاب کر سکتے ہیں۔ آئیے ہر ایک کا جائزہ لیتے ہیں اور سمجھتے ہیں کہ کب ان کا استعمال کرنا ہے۔
+چارلس ڈکنز کے ناولوں میں مشہور سزا کے بارے میں سوچیں جہاں طلباء کو بار بار تختی پر لائنیں لکھنی پڑتی تھیں۔ تصور کریں کہ اگر آپ کسی کو صرف یہ ہدایت دے سکیں کہ "یہ جملہ 100 بار لکھو" اور یہ خود بخود ہو جائے۔ یہی کام loops آپ کے کوڈ کے لیے کرتے ہیں۔
+
+Loops ایک تھکے بغیر کام کرنے والے معاون کی طرح ہیں جو کاموں کو بغیر کسی غلطی کے دہراتے ہیں۔ چاہے آپ کو شاپنگ کارٹ میں ہر آئٹم کو چیک کرنا ہو یا البم میں تمام تصاویر دکھانی ہوں، loops مؤثر طریقے سے تکرار کو سنبھالتے ہیں۔
+
+جاوا اسکرپٹ کئی قسم کے loops فراہم کرتا ہے جن میں سے انتخاب کیا جا سکتا ہے۔ آئیے ہر ایک کو دیکھتے ہیں اور سمجھتے ہیں کہ کب ان کا استعمال کرنا ہے۔
+
+```mermaid
+flowchart TD
+    A["🔄 Loop Types"] --> B["For Loop"]
+    A --> C["While Loop"]
+    A --> D["For...of Loop"]
+    A --> E["forEach Method"]
+    
+    B --> B1["Known iterations"]
+    B --> B2["Counter-based"]
+    B --> B3["for(init; condition; increment)"]
+    
+    C --> C1["Unknown iterations"]
+    C --> C2["Condition-based"]
+    C --> C3["while(condition)"]
+    
+    D --> D1["Modern ES6+"]
+    D --> D2["Array iteration"]
+    D --> D3["for(item of array)"]
+    
+    E --> E1["Functional style"]
+    E --> E2["Array method"]
+    E --> E3["array.forEach(callback)"]
+    
+    F["⏰ When to Use"] --> F1["For: Counting, indexes"]
+    F --> F2["While: User input, searching"]
+    F --> F3["For...of: Simple iteration"]
+    F --> F4["forEach: Functional programming"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
 
 ### For Loop
 
-`for` loop ایک ٹائمر سیٹ کرنے کی طرح ہے - آپ کو بالکل معلوم ہوتا ہے کہ آپ کچھ کتنی بار چاہتے ہیں۔ یہ بہت منظم اور پیش گوئی کے قابل ہے، جو اسے arrays کے ساتھ کام کرنے یا چیزوں کو گننے کے لیے بہترین بناتا ہے۔
+`for` loop ایک ٹائمر سیٹ کرنے کی طرح ہے - آپ کو بالکل معلوم ہوتا ہے کہ آپ کچھ کتنی بار کرنا چاہتے ہیں۔ یہ بہت منظم اور پیش گوئی کے قابل ہے، جو اسے arrays کے ساتھ کام کرنے یا چیزوں کو گننے کے لیے بہترین بناتا ہے۔
 
-**For Loop کا ڈھانچہ:**
+**For Loop کی ساخت:**
 
-| Component | Purpose | Example |
+| جزو | مقصد | مثال |
 |-----------|---------|----------|
 | **Initialization** | شروع کرنے کا نقطہ سیٹ کرتا ہے | `let i = 0` |
 | **Condition** | کب جاری رکھنا ہے | `i < 10` |
@@ -194,23 +348,50 @@ for (let i = 0; i < testScores.length; i++) {
 ```
 
 **مرحلہ وار، یہاں کیا ہو رہا ہے:**
-- **ابتدائیہ** متغیر `i` کو 0 پر سیٹ کرتا ہے شروع میں
+- **ابتدائیہ** کاؤنٹر ویریبل `i` کو 0 پر سیٹ کرتا ہے شروع میں
 - **چیک کرتا ہے** شرط `i < 10` ہر iteration سے پہلے
-- **عمل کرتا ہے** کوڈ بلاک جب شرط سچ ہو
+- **عمل کرتا ہے** کوڈ بلاک جب شرط درست ہو
 - **اضافہ کرتا ہے** `i` کو 1 سے ہر iteration کے بعد `i++` کے ساتھ
-- **روکتا ہے** جب شرط جھوٹ ہو جائے (جب `i` 10 تک پہنچ جائے)
+- **روکتا ہے** جب شرط غلط ہو جائے (جب `i` 10 تک پہنچ جائے)
+
+✅ اس کوڈ کو براؤزر کنسول میں چلائیں۔ کیا ہوتا ہے جب آپ کاؤنٹر، شرط، یا iteration expression میں چھوٹے تبدیلیاں کرتے ہیں؟ کیا آپ اسے الٹا چلا سکتے ہیں، ایک countdown بناتے ہوئے؟
+
+### 🗓️ **For Loop کی مہارت کی جانچ: کنٹرول شدہ تکرار**
+
+**اپنی for loop کی سمجھ کو جانچیں:**
+- for loop کے تین حصے کیا ہیں، اور ہر ایک کیا کرتا ہے؟
+- آپ array کو الٹا کیسے loop کریں گے؟
+- اگر آپ increment حصہ (`i++`) بھول جائیں تو کیا ہوگا؟
+
+```mermaid
+flowchart TD
+    A["🚀 Start For Loop"] --> B["Initialize: let i = 0"]
+    B --> C{"Condition: i < array.length?"}
+    C -->|true| D["Execute code block"]
+    D --> E["Increment: i++"]
+    E --> C
+    C -->|false| F["✅ Exit loop"]
+    
+    G["📋 Common Patterns"] --> G1["for(let i=0; i<n; i++)"]
+    G --> G2["for(let i=n-1; i>=0; i--)"]
+    G --> G3["for(let i=0; i<arr.length; i+=2)"]
+    
+    style A fill:#e3f2fd
+    style F fill:#e8f5e8
+    style G fill:#fff3e0
+```
 
-✅ اس کوڈ کو براؤزر کنسول میں چلائیں۔ کیا ہوتا ہے جب آپ counter، condition، یا iteration expression میں چھوٹے تبدیلیاں کرتے ہیں؟ کیا آپ اسے الٹا چلا سکتے ہیں، ایک countdown بناتے ہوئے؟
+> **Loop کی دانشمندی**: For loops بہترین ہیں جب آپ کو بالکل معلوم ہو کہ آپ کو کچھ کتنی بار دہرانا ہے۔ یہ array پروسیسنگ کے لیے سب سے عام انتخاب ہیں!
 
 ### While Loop
 
-`while` loop ایسا ہے جیسے کہنا "یہ کرتے رہو جب تک کہ..." - آپ کو شاید معلوم نہ ہو کہ یہ کتنی بار چلے گا، لیکن آپ جانتے ہیں کہ کب رکنا ہے۔ یہ ان چیزوں کے لیے بہترین ہے جیسے صارف سے ان پٹ مانگنا جب تک کہ وہ آپ کو مطلوبہ چیز نہ دے، یا ڈیٹا میں تلاش کرنا جب تک کہ آپ کو مطلوبہ چیز نہ مل جائے۔
+`while` loop ایسا ہے جیسے "یہ کرتے رہو جب تک..." - آپ کو معلوم نہیں ہو سکتا کہ یہ کتنی بار چلے گا، لیکن آپ جانتے ہیں کہ کب رکنا ہے۔ یہ چیزوں کے لیے بہترین ہے جیسے صارف سے ان پٹ مانگنا جب تک وہ آپ کو مطلوبہ چیز نہ دے، یا ڈیٹا میں تلاش کرنا جب تک آپ کو مطلوبہ چیز نہ ملے۔
 
 **While Loop کی خصوصیات:**
-- **جاری رکھتا ہے** جب تک کہ شرط سچ ہو
-- **ضرورت ہوتی ہے** کسی بھی counter متغیر کا دستی انتظام
+- **جاری رکھتا ہے** جب تک شرط درست ہو
+- **ضرورت ہوتی ہے** کسی بھی کاؤنٹر ویریبل کا دستی انتظام
 - **چیک کرتا ہے** شرط ہر iteration سے پہلے
-- **خطرہ ہوتا ہے** لامتناہی loops کا اگر شرط کبھی جھوٹ نہ ہو
+- **خطرہ ہوتا ہے** لامتناہی loops کا اگر شرط کبھی غلط نہ ہو
 
 ```javascript
 // Basic counting example
@@ -236,14 +417,48 @@ if (attempts >= maxAttempts) {
 ```
 
 **ان مثالوں کو سمجھنا:**
-- **منظم کرتا ہے** counter متغیر `i` کو دستی طور پر loop body کے اندر
-- **اضافہ کرتا ہے** counter کو لامتناہی loops کو روکنے کے لیے
-- **عملی استعمال کا مظاہرہ کرتا ہے** صارف ان پٹ اور کوششوں کی حد بندی کے ساتھ
+- **منظم کرتا ہے** کاؤنٹر ویریبل `i` کو دستی طور پر loop کے اندر
+- **اضافہ کرتا ہے** کاؤنٹر کو لامتناہی loops سے بچانے کے لیے
+- **عملی استعمال کا مظاہرہ کرتا ہے** صارف انپٹ اور کوششوں کی حد بندی کے ساتھ
 - **شامل کرتا ہے** حفاظتی میکانزم لامتناہی عمل کو روکنے کے لیے
 
-### جدید Loop متبادل
+### ♾️ **While Loop کی دانشمندی کی جانچ: شرط پر مبنی تکرار**
+
+**اپنی while loop کی سمجھ کو جانچیں:**
+- while loops استعمال کرتے وقت سب سے بڑا خطرہ کیا ہے؟
+- آپ while loop کو for loop پر کب ترجیح دیں گے؟
+- آپ لامتناہی loops کو کیسے روک سکتے ہیں؟
+
+```mermaid
+flowchart LR
+    A["🔄 While vs For"] --> B["While Loop"]
+    A --> C["For Loop"]
+    
+    B --> B1["Unknown iterations"]
+    B --> B2["Condition-driven"]
+    B --> B3["User input, searching"]
+    B --> B4["⚠️ Risk: infinite loops"]
+    
+    C --> C1["Known iterations"]
+    C --> C2["Counter-driven"]
+    C --> C3["Array processing"]
+    C --> C4["✅ Safe: predictable end"]
+    
+    D["🛡️ Safety Tips"] --> D1["Always modify condition variable"]
+    D --> D2["Include escape conditions"]
+    D --> D3["Set maximum iteration limits"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#ffebee
+```
 
-جاوا اسکرپٹ جدید loop syntax فراہم کرتا ہے جو آپ کے کوڈ کو زیادہ پڑھنے کے قابل اور کم غلطی کا شکار بنا سکتا ہے۔
+> **حفاظتی پہلو**: While loops طاقتور ہیں لیکن شرط کے انتظام میں احتیاط کی ضرورت ہوتی ہے۔ ہمیشہ یقینی بنائیں کہ آپ کی loop شرط آخر کار غلط ہو جائے گی!
+
+### جدید Loop کے متبادل
+
+جاوا اسکرپٹ جدید loop syntax پیش کرتا ہے جو آپ کے کوڈ کو زیادہ پڑھنے کے قابل اور کم غلطی کا شکار بناتا ہے۔
 
 **For...of Loop (ES6+):**
 
@@ -262,9 +477,9 @@ for (let i = 0; i < colors.length; i++) {
 ```
 
 **For...of کے اہم فوائد:**
-- **ختم کرتا ہے** index کے انتظام اور ممکنہ off-by-one غلطیوں کو
+- **ختم کرتا ہے** انڈیکس کے انتظام اور ممکنہ off-by-one غلطیوں کو
 - **فراہم کرتا ہے** array عناصر تک براہ راست رسائی
-- **بہتر بناتا ہے** کوڈ readability اور syntax complexity کو کم کرتا ہے
+- **بہتر بناتا ہے** کوڈ readability اور syntax کی پیچیدگی کو کم کرتا ہے
 
 **forEach طریقہ:**
 
@@ -280,17 +495,43 @@ prices.forEach((price, index) => {
 prices.forEach(price => console.log(`Price: $${price}`));
 ```
 
-**forEach کے بارے میں جاننے کے لیے:**
-- **عمل کرتا ہے** ایک فنکشن ہر array عنصر کے لیے
-- **فراہم کرتا ہے** عنصر کی قدر اور index دونوں کو پیرامیٹرز کے طور پر
+**forEach کے بارے میں جاننے کی باتیں:**
+- **عمل کرتا ہے** ہر array عنصر کے لیے ایک فنکشن
+- **فراہم کرتا ہے** عنصر کی ویلیو اور انڈیکس دونوں کو پیرامیٹرز کے طور پر
 - **روکا نہیں جا سکتا** جلدی (روایتی loops کے برعکس)
 - **واپس کرتا ہے** undefined (نیا array نہیں بناتا)
 
-✅ آپ for loop اور while loop میں سے کیوں انتخاب کریں گے؟ StackOverflow پر 17K ناظرین کے پاس یہی سوال تھا، اور کچھ آراء [آپ کے لیے دلچسپ ہو سکتی ہیں](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)۔
+✅ آپ for loop کے مقابلے میں while loop کیوں منتخب کریں گے؟ 17K ناظرین نے StackOverflow پر یہی سوال کیا، اور کچھ آراء [آپ کے لیے دلچسپ ہو سکتی ہیں](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)۔
+
+### 🎨 **جدید Loop Syntax کی جانچ: ES6+ کو اپنانا**
+
+**اپنی جدید جاوا اسکرپٹ کی سمجھ کو جانچیں:**
+- روایتی for loops کے مقابلے میں `for...of` کے فوائد کیا ہیں؟
+- آپ روایتی for loops کو کب ترجیح دیں گے؟
+- `forEach` اور `map` میں کیا فرق ہے؟
+
+```mermaid
+quadrantChart
+    title Loop Selection Guide
+    x-axis Traditional --> Modern
+    y-axis Simple --> Complex
+    quadrant-1 Modern Complex
+    quadrant-2 Traditional Complex
+    quadrant-3 Traditional Simple
+    quadrant-4 Modern Simple
+    
+    Traditional For: [0.2, 0.7]
+    While Loop: [0.3, 0.6]
+    For...of: [0.8, 0.3]
+    forEach: [0.9, 0.4]
+    Array Methods: [0.8, 0.8]
+```
+
+> **جدید رجحان**: ES6+ syntax جیسے `for...of` اور `forEach` array iteration کے لیے ترجیحی طریقہ بن رہے ہیں کیونکہ یہ صاف اور کم غلطی کا شکار ہیں!
 
 ## Loops اور Arrays
 
-Arrays کے ساتھ loops کو جوڑنا طاقتور ڈیٹا پروسیسنگ صلاحیتیں پیدا کرتا ہے۔ یہ جوڑی بہت سے پروگرامنگ کاموں کے لیے بنیادی ہے، جیسے فہرستیں دکھانا یا شماریات کا حساب لگانا۔
+Arrays کو loops کے ساتھ جوڑنا طاقتور ڈیٹا پروسیسنگ کی صلاحیتیں پیدا کرتا ہے۔ یہ جوڑی بہت سے پروگرامنگ کاموں کے لیے بنیادی ہے، جیسے فہرستیں دکھانا یا شماریات کا حساب لگانا۔
 
 **روایتی Array پروسیسنگ:**
 
@@ -309,12 +550,12 @@ for (const flavor of iceCreamFlavors) {
 ```
 
 **آئیے ہر طریقہ کو سمجھتے ہیں:**
-- **استعمال کرتا ہے** array کی لمبائی کی خصوصیت loop کی حد کا تعین کرنے کے لیے
-- **رسائی حاصل کرتا ہے** عناصر کو index کے ذریعے روایتی for loops میں
+- **استعمال کرتا ہے** array کی لمبائی پراپرٹی loop کی حد کا تعین کرنے کے لیے
+- **رسائی حاصل کرتا ہے** عناصر کو انڈیکس کے ذریعے روایتی for loops میں
 - **فراہم کرتا ہے** براہ راست عنصر تک رسائی for...of loops میں
 - **پروسیس کرتا ہے** ہر array عنصر کو بالکل ایک بار
 
-**عملی ڈیٹا پروسیسنگ مثال:**
+**عملی ڈیٹا پروسیسنگ کی مثال:**
 
 ```javascript
 const studentGrades = [85, 92, 78, 96, 88, 73, 89];
@@ -343,13 +584,41 @@ console.log(`Lowest: ${lowestGrade}`);
 ```
 
 **یہ کوڈ کیسے کام کرتا ہے:**
-- **ابتدائیہ کرتا ہے** tracking متغیرات کو sum اور extremes کے لیے
-- **پروسیس کرتا ہے** ہر grade کو ایک مؤثر loop کے ساتھ
+- **ابتدائیہ کرتا ہے** ٹریکنگ ویریبلز کو مجموعی اور انتہائی اقدار کے لیے
+- **پروسیس کرتا ہے** ہر گریڈ کو ایک مؤثر loop کے ساتھ
 - **جمع کرتا ہے** کل کو اوسط حساب کے لیے
-- **ٹریک کرتا ہے** سب سے زیادہ اور سب سے کم اقدار iteration کے دوران
-- **حساب کرتا ہے** حتمی شماریات loop مکمل ہونے کے بعد
-
-✅ اپنے براؤزر کے کنسول میں اپنے بنائے ہوئے array پر loop کرنے کی مشق کریں۔
+- **ٹریک کرتا ہے** سب سے زیادہ اور سب سے کم ویلیوز iteration کے دوران
+- **حساب کرتا ہے** حتمی شماریات loop کے اختتام کے بعد
+
+✅ اپنے براؤزر کے کنسول میں اپنے بنائے ہوئے array پر loop کرنے کا تجربہ کریں۔
+
+```mermaid
+flowchart TD
+    A["📦 Array Data"] --> B["🔄 Loop Processing"]
+    B --> C["📈 Results"]
+    
+    A1["[85, 92, 78, 96, 88]"] --> A
+    
+    B --> B1["Calculate total"]
+    B --> B2["Find min/max"]
+    B --> B3["Count conditions"]
+    B --> B4["Transform data"]
+    
+    C --> C1["Average: 87.8"]
+    C --> C2["Highest: 96"]
+    C --> C3["Passing: 5/5"]
+    C --> C4["Letter grades"]
+    
+    D["⚡ Processing Patterns"] --> D1["Accumulation (sum)"]
+    D --> D2["Comparison (min/max)"]
+    D --> D3["Filtering (conditions)"]
+    D --> D4["Mapping (transformation)"]
+    
+    style A fill:#e3f2fd
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style D fill:#f3e5f5
+```
 
 ---
 
@@ -357,30 +626,133 @@ console.log(`Lowest: ${lowestGrade}`);
 
 Agent mode استعمال کریں درج ذیل چیلنج مکمل کرنے کے لیے:
 
-**تفصیل:** ایک جامع ڈیٹا پروسیسنگ فنکشن بنائیں جو arrays اور loops کو جوڑ کر ایک dataset کا تجزیہ کرے اور معنی خیز insights پیدا کرے۔
+**تفصیل:** ایک جامع ڈیٹا پروسیسنگ فنکشن بنائیں جو arrays اور loops کو ملا کر ایک dataset کا تجزیہ کرے اور معنی خیز بصیرت پیدا کرے۔
 
-**Prompt:** ایک فنکشن بنائیں جس کا نام `analyzeGrades` ہو جو ایک array لے جس میں طالب علموں کے grade objects ہوں (ہر ایک میں name اور score کی خصوصیات ہوں) اور ایک object واپس کرے جس میں شماریات شامل ہوں جیسے سب سے زیادہ score، سب سے کم score، اوسط score، پاس ہونے والے طلباء کی تعداد (score >= 70)، اور ایک array ان طالب علموں کے ناموں کا جو اوسط سے زیادہ score رکھتے ہوں۔ اپنے حل میں کم از کم دو مختلف loop اقسام استعمال کریں۔
+**Prompt:** ایک فنکشن بنائیں جس کا نام `analyzeGrades` ہو جو ایک array لے جس میں طالب علموں کے گریڈ objects ہوں (ہر ایک میں name اور score پراپرٹیز ہوں) اور ایک object واپس کرے جس میں شماریات شامل ہوں جیسے سب سے زیادہ سکور، سب سے کم سکور، اوسط سکور، پاس ہونے والے طالب علموں کی تعداد (score >= 70)، اور ایک array طالب علموں کے ناموں کا جو اوسط سے زیادہ سکور حاصل کریں۔ اپنے حل میں کم از کم دو مختلف loop اقسام استعمال کریں۔
 
 Agent mode کے بارے میں مزید جانیں [یہاں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
 
 ## 🚀 چیلنج
+جاوا اسکرپٹ کئی جدید array کے طریقے پیش کرتا ہے جو مخصوص کاموں کے لیے روایتی loops کی جگہ لے سکتے ہیں۔ [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)، [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of)، [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)، [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)، اور [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) کو دریافت کریں۔
 
-جاوا اسکرپٹ کئی جدید array طریقے پیش کرتا ہے جو مخصوص کاموں کے لیے روایتی loops کی جگہ لے سکتے ہیں۔ [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)، [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of)، [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)، [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)، اور [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) کو دریافت کریں۔
-
-**آپ کا چیلنج:** طالب علموں کے grades کی مثال کو کم از کم تین مختلف array طریقوں کا استعمال کرتے ہوئے دوبارہ لکھیں۔ نوٹ کریں کہ جدید جاوا اسکرپٹ syntax کے ساتھ کوڈ کتنا صاف اور زیادہ پڑھنے کے قابل ہو جاتا ہے۔
+**آپ کا چیلنج:** طالب علموں کے گریڈز کی مثال کو کم از کم تین مختلف array کے طریقوں کا استعمال کرتے ہوئے دوبارہ لکھیں۔ دیکھیں کہ جدید جاوا اسکرپٹ سینٹیکس کے ساتھ کوڈ کتنا صاف اور پڑھنے کے قابل ہو جاتا ہے۔
 
 ## لیکچر کے بعد کا کوئز
 [لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/14)
 
 ## جائزہ اور خود مطالعہ
 
-جاوا اسکرپٹ میں arrays کے ساتھ کئی طریقے منسلک ہیں، جو ڈیٹا کی ہیرا پھیری کے لیے انتہائی مفید ہیں۔ [ان طریقوں کے بارے میں پڑھیں](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) اور ان میں سے کچھ کو آزمائیں (جیسے push، pop، slice اور splice) اپنے بنائے ہوئے array پر۔
+جاوا اسکرپٹ میں arrays کے ساتھ کئی طریقے منسلک ہوتے ہیں جو ڈیٹا کو منظم کرنے میں انتہائی مفید ہیں۔ [ان طریقوں کے بارے میں پڑھیں](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) اور ان میں سے کچھ کو اپنی تخلیق کردہ array پر آزمائیں (جیسے push، pop، slice اور splice)۔
 
 ## اسائنمنٹ
 
-[Loop an Array](assignment.md)
+[ایک Array کو لوپ کریں](assignment.md)
+
+---
+
+## 📊 **آپ کے Arrays اور Loops کے ٹول کٹ کا خلاصہ**
+
+```mermaid
+graph TD
+    A["🎯 Arrays & Loops Mastery"] --> B["📦 Array Fundamentals"]
+    A --> C["🔄 Loop Types"]
+    A --> D["🔗 Data Processing"]
+    A --> E["🎨 Modern Techniques"]
+    
+    B --> B1["Creation: [ ]"]
+    B --> B2["Indexing: arr[0]"]
+    B --> B3["Methods: push, pop"]
+    B --> B4["Properties: length"]
+    
+    C --> C1["For: Known iterations"]
+    C --> C2["While: Condition-based"]
+    C --> C3["For...of: Direct access"]
+    C --> C4["forEach: Functional"]
+    
+    D --> D1["Statistics calculation"]
+    D --> D2["Data transformation"]
+    D --> D3["Filtering & searching"]
+    D --> D4["Real-time processing"]
+    
+    E --> E1["Arrow functions"]
+    E --> E2["Method chaining"]
+    E --> E3["Destructuring"]
+    E --> E4["Template literals"]
+    
+    F["💡 Key Benefits"] --> F1["Efficient data handling"]
+    F --> F2["Reduced code repetition"]
+    F --> F3["Scalable solutions"]
+    F --> F4["Cleaner syntax"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+```
+
+---
+
+## 🚀 آپ کے Arrays اور Loops کی مہارت کا ٹائم لائن
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] اپنی پسندیدہ فلموں کی ایک array بنائیں اور مخصوص عناصر تک رسائی حاصل کریں
+- [ ] ایک for loop لکھیں جو 1 سے 10 تک گنتی کرے
+- [ ] سبق سے جدید array کے طریقوں کا چیلنج آزمائیں
+- [ ] اپنے براؤزر کنسول میں array indexing کی مشق کریں
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] لیکچر کے بعد کا کوئز مکمل کریں اور کسی بھی مشکل تصورات کا جائزہ لیں
+- [ ] GitHub Copilot چیلنج سے جامع گریڈ تجزیہ کار بنائیں
+- [ ] ایک سادہ shopping cart بنائیں جو اشیاء کو شامل اور ہٹائے
+- [ ] مختلف loop کی اقسام میں تبدیل کرنے کی مشق کریں
+- [ ] array کے طریقوں جیسے `push`، `pop`، `slice`، اور `splice` کے ساتھ تجربہ کریں
+
+### 📅 **آپ کا ہفتہ بھر کا ڈیٹا پروسیسنگ سفر**
+- [ ] "ایک Array کو لوپ کریں" اسائنمنٹ کو تخلیقی اضافوں کے ساتھ مکمل کریں
+- [ ] arrays اور loops کا استعمال کرتے ہوئے ایک to-do list ایپلیکیشن بنائیں
+- [ ] عددی ڈیٹا کے لیے ایک سادہ شماریاتی کیلکولیٹر بنائیں
+- [ ] [MDN array کے طریقوں](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) کے ساتھ مشق کریں
+- [ ] ایک فوٹو گیلری یا موسیقی کی پلے لسٹ انٹرفیس بنائیں
+- [ ] `map`، `filter`، اور `reduce` کے ساتھ functional programming کو دریافت کریں
+
+### 🌟 **آپ کی مہینے بھر کی تبدیلی**
+- [ ] جدید array آپریشنز اور کارکردگی کی اصلاح میں مہارت حاصل کریں
+- [ ] ایک مکمل ڈیٹا visualization ڈیش بورڈ بنائیں
+- [ ] ڈیٹا پروسیسنگ سے متعلق اوپن سورس پروجیکٹس میں حصہ لیں
+- [ ] عملی مثالوں کے ساتھ کسی اور کو arrays اور loops کے بارے میں سکھائیں
+- [ ] دوبارہ استعمال کے قابل ڈیٹا پروسیسنگ فنکشنز کی ذاتی لائبریری بنائیں
+- [ ] arrays پر مبنی الگورتھمز اور ڈیٹا اسٹرکچرز کو دریافت کریں
+
+### 🏆 **ڈیٹا پروسیسنگ چیمپئن کے آخری چیک ان**
+
+**اپنی array اور loop کی مہارت کا جشن منائیں:**
+- آپ نے حقیقی دنیا کی ایپلیکیشنز کے لیے سب سے زیادہ مفید array آپریشن کون سا سیکھا؟
+- آپ کو کون سا loop کی قسم سب سے زیادہ قدرتی لگتی ہے اور کیوں؟
+- arrays اور loops کو سمجھنے سے آپ کے ڈیٹا کو منظم کرنے کے طریقے میں کیا تبدیلی آئی؟
+- آپ اگلا کون سا پیچیدہ ڈیٹا پروسیسنگ کام کرنا چاہیں گے؟
+
+```mermaid
+journey
+    title Your Data Processing Evolution
+    section Today
+      Array Confusion: 3: You
+      Loop Basics: 4: You
+      Index Understanding: 5: You
+    section This Week
+      Method Mastery: 4: You
+      Efficient Processing: 5: You
+      Modern Syntax: 5: You
+    section Next Month
+      Complex Algorithms: 5: You
+      Performance Optimization: 5: You
+      Teaching Others: 5: You
+```
+
+> 📦 **آپ نے ڈیٹا کو منظم کرنے اور پروسیسنگ کی طاقت کو کھول دیا ہے!** Arrays اور loops تقریباً ہر ایپلیکیشن کی بنیاد ہیں جو آپ کبھی بنائیں گے۔ سادہ فہرستوں سے لے کر پیچیدہ ڈیٹا تجزیہ تک، آپ کے پاس اب معلومات کو مؤثر اور خوبصورتی سے سنبھالنے کے اوزار موجود ہیں۔ ہر متحرک ویب سائٹ، موبائل ایپ، اور ڈیٹا پر مبنی ایپلیکیشن ان بنیادی تصورات پر انحصار کرتی ہے۔ قابل پیمائش ڈیٹا پروسیسنگ کی دنیا میں خوش آمدید! 🎉
 
 ---
 
-**ڈسکلیمر**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**اعلانِ لاتعلقی**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/3-terrarium/1-intro-to-html/README.md b/translations/ur/3-terrarium/1-intro-to-html/README.md
index 76b67021f4..1efa3ac566 100644
--- a/translations/ur/3-terrarium/1-intro-to-html/README.md
+++ b/translations/ur/3-terrarium/1-intro-to-html/README.md
@@ -1,22 +1,69 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "20c72cf2e5b0050d38ca3cb14a75a9df",
-  "translation_date": "2025-10-22T14:55:18+00:00",
+  "original_hash": "3fcfa99c4897e051b558b5eaf1e8cc74",
+  "translation_date": "2025-11-03T13:16:50+00:00",
   "source_file": "3-terrarium/1-intro-to-html/README.md",
   "language_code": "ur"
 }
 -->
 # ٹیریریم پروجیکٹ حصہ 1: HTML کا تعارف
 
+```mermaid
+journey
+    title Your HTML Learning Journey
+    section Foundation
+      Create HTML file: 3: Student
+      Add DOCTYPE: 4: Student
+      Structure document: 5: Student
+    section Content
+      Add metadata: 4: Student
+      Include images: 5: Student
+      Organize layout: 5: Student
+    section Semantics
+      Use proper tags: 4: Student
+      Enhance accessibility: 5: Student
+      Build terrarium: 5: Student
+```
+
 ![HTML کا تعارف](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ur.png)
 > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
 
-HTML، یا HyperText Markup Language، ہر ویب سائٹ کی بنیاد ہے جو آپ نے کبھی دیکھی ہے۔ HTML کو ویب صفحات کی ساخت دینے والے ڈھانچے کے طور پر سوچیں – یہ بتاتا ہے کہ مواد کہاں جائے گا، کیسے منظم ہوگا، اور ہر حصہ کیا ظاہر کرتا ہے۔ جبکہ CSS بعد میں آپ کے HTML کو رنگوں اور لے آؤٹ کے ساتھ "سجائے گا"، اور JavaScript اسے انٹرایکٹیویٹی کے ساتھ زندہ کرے گا، HTML وہ بنیادی ڈھانچہ فراہم کرتا ہے جو باقی سب کچھ ممکن بناتا ہے۔
-
-اس سبق میں، آپ ایک ورچوئل ٹیریریم انٹرفیس کے لیے HTML ساخت بنائیں گے۔ یہ عملی پروجیکٹ آپ کو بنیادی HTML تصورات سکھائے گا جبکہ کچھ بصری طور پر دلچسپ چیز بناتے ہوئے۔ آپ سیکھیں گے کہ مواد کو سیمینٹک عناصر کے ذریعے کیسے منظم کریں، تصاویر کے ساتھ کام کریں، اور ایک انٹرایکٹو ویب ایپلیکیشن کے لیے بنیاد بنائیں۔
-
-سبق کے اختتام تک، آپ کے پاس ایک کام کرنے والا HTML صفحہ ہوگا جو پودوں کی تصاویر کو منظم کالموں میں دکھائے گا، جو اگلے سبق میں اسٹائلنگ کے لیے تیار ہوگا۔ فکر نہ کریں اگر یہ شروع میں بنیادی لگے – یہی HTML کا کام ہے، CSS کے اضافے سے پہلے۔
+HTML، یا HyperText Markup Language، ہر ویب سائٹ کی بنیاد ہے جو آپ نے کبھی دیکھی ہے۔ HTML کو ویب صفحات کا ڈھانچہ سمجھیں – یہ بتاتا ہے کہ مواد کہاں جائے گا، کیسے منظم ہوگا، اور ہر حصہ کیا ظاہر کرتا ہے۔ جبکہ CSS بعد میں آپ کے HTML کو رنگوں اور لے آؤٹ کے ساتھ "سجائے گا"، اور JavaScript اسے انٹرایکٹیویٹی کے ساتھ زندہ کرے گا، HTML وہ بنیادی ڈھانچہ فراہم کرتا ہے جو باقی سب کچھ ممکن بناتا ہے۔
+
+اس سبق میں، آپ ایک ورچوئل ٹیریریم انٹرفیس کے لیے HTML ڈھانچہ بنائیں گے۔ یہ عملی پروجیکٹ آپ کو بنیادی HTML تصورات سکھائے گا جبکہ کچھ بصری طور پر دلچسپ چیز بناتے ہوئے۔ آپ سیکھیں گے کہ مواد کو سیمینٹک عناصر کے ذریعے کیسے منظم کریں، تصاویر کے ساتھ کام کریں، اور ایک انٹرایکٹو ویب ایپلیکیشن کے لیے بنیاد بنائیں۔
+
+سبق کے اختتام تک، آپ کے پاس ایک کام کرنے والا HTML صفحہ ہوگا جو پودوں کی تصاویر کو منظم کالموں میں دکھائے گا، اگلے سبق میں اسٹائلنگ کے لیے تیار۔ اگر یہ شروع میں بنیادی لگے تو پریشان نہ ہوں – یہی HTML کا کام ہے، CSS کے اضافے سے پہلے۔
+
+```mermaid
+mindmap
+  root((HTML Fundamentals))
+    Structure
+      DOCTYPE Declaration
+      HTML Element
+      Head Section
+      Body Content
+    Elements
+      Tags & Attributes
+      Self-closing Tags
+      Nested Elements
+      Block vs Inline
+    Content
+      Text Elements
+      Images
+      Containers (div)
+      Lists
+    Semantics
+      Meaningful Tags
+      Accessibility
+      Screen Readers
+      SEO Benefits
+    Best Practices
+      Proper Nesting
+      Valid Markup
+      Descriptive Alt Text
+      Organized Structure
+```
 
 ## پری لیکچر کوئز
 
@@ -32,18 +79,18 @@ HTML کوڈ میں جانے سے پہلے، آئیے آپ کے ٹیریریم پ
 
 ### کام: اپنے پروجیکٹ کا ڈھانچہ بنائیں
 
-آپ اپنے ٹیریریم پروجیکٹ کے لیے ایک مخصوص فولڈر بنائیں گے اور اپنا پہلا HTML فائل شامل کریں گے۔ یہاں دو طریقے ہیں جنہیں آپ استعمال کر سکتے ہیں:
+آپ اپنے ٹیریریم پروجیکٹ کے لیے ایک مخصوص فولڈر بنائیں گے اور اپنی پہلی HTML فائل شامل کریں گے۔ یہاں دو طریقے ہیں جنہیں آپ استعمال کر سکتے ہیں:
 
-**آپشن 1: ویژول اسٹوڈیو کوڈ کا استعمال کرتے ہوئے**
-1. ویژول اسٹوڈیو کوڈ کھولیں
-2. "فائل" → "فولڈر کھولیں" پر کلک کریں یا `Ctrl+K, Ctrl+O` (ونڈوز/لینکس) یا `Cmd+K, Cmd+O` (میک) استعمال کریں
+**آپشن 1: Visual Studio Code کا استعمال**
+1. Visual Studio Code کھولیں
+2. "File" → "Open Folder" پر کلک کریں یا `Ctrl+K, Ctrl+O` (Windows/Linux) یا `Cmd+K, Cmd+O` (Mac) استعمال کریں
 3. ایک نیا فولڈر بنائیں جس کا نام `terrarium` ہو اور اسے منتخب کریں
-4. ایکسپلورر پین میں، "نئی فائل" آئیکن پر کلک کریں
+4. Explorer پین میں، "New File" آئیکن پر کلک کریں
 5. اپنی فائل کا نام `index.html` رکھیں
 
-![ویژول اسٹوڈیو کوڈ ایکسپلورر نئی فائل تخلیق دکھا رہا ہے](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ur.png)
+![VS Code Explorer میں نئی فائل بنانے کا عمل](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ur.png)
 
-**آپشن 2: ٹرمینل کمانڈز کا استعمال کرتے ہوئے**
+**آپشن 2: ٹرمینل کمانڈز کا استعمال**
 ```bash
 mkdir terrarium
 cd terrarium
@@ -55,19 +102,37 @@ code index.html
 - **ایک نیا ڈائریکٹری بناتی ہیں** جس کا نام `terrarium` ہے آپ کے پروجیکٹ کے لیے
 - **ٹریریم ڈائریکٹری میں جاتی ہیں**
 - **ایک خالی `index.html` فائل بناتی ہیں**
-- **فائل کو ویژول اسٹوڈیو کوڈ میں ایڈیٹنگ کے لیے کھولتی ہیں**
+- **فائل کو Visual Studio Code میں ایڈیٹنگ کے لیے کھولتی ہیں**
 
-> 💡 **پرو ٹپ**: فائل کا نام `index.html` ویب ڈیولپمنٹ میں خاص ہے۔ جب کوئی ویب سائٹ دیکھتا ہے، براؤزرز خود بخود `index.html` کو بطور ڈیفالٹ صفحہ دکھانے کے لیے تلاش کرتے ہیں۔ اس کا مطلب ہے کہ ایک URL جیسے `https://mysite.com/projects/` خود بخود `projects` فولڈر سے `index.html` فائل کو پیش کرے گا بغیر URL میں فائل کا نام بتائے۔
+> 💡 **پرو ٹپ**: فائل کا نام `index.html` ویب ڈیولپمنٹ میں خاص اہمیت رکھتا ہے۔ جب کوئی ویب سائٹ وزٹ کرتا ہے، تو براؤزرز خود بخود `index.html` کو بطور ڈیفالٹ صفحہ دکھانے کے لیے تلاش کرتے ہیں۔ اس کا مطلب ہے کہ ایک URL جیسے `https://mysite.com/projects/` خود بخود `projects` فولڈر سے `index.html` فائل کو پیش کرے گا بغیر URL میں فائل کا نام بتائے۔
 
 ## HTML دستاویز کا ڈھانچہ سمجھنا
 
-ہر HTML دستاویز ایک مخصوص ڈھانچے کی پیروی کرتی ہے جسے براؤزرز کو صحیح طریقے سے سمجھنے اور دکھانے کی ضرورت ہوتی ہے۔ اس ڈھانچے کو ایک رسمی خط کی طرح سوچیں – اس میں ایک خاص ترتیب میں مطلوبہ عناصر ہوتے ہیں جو وصول کنندہ (اس صورت میں، براؤزر) کو مواد کو صحیح طریقے سے پروسیس کرنے میں مدد دیتے ہیں۔
+ہر HTML دستاویز ایک مخصوص ڈھانچے کی پیروی کرتی ہے جسے براؤزرز کو صحیح طریقے سے سمجھنے اور دکھانے کی ضرورت ہوتی ہے۔ اس ڈھانچے کو ایک رسمی خط کی طرح سمجھیں – اس میں مطلوبہ عناصر ایک خاص ترتیب میں ہوتے ہیں جو وصول کنندہ (اس صورت میں، براؤزر) کو مواد کو صحیح طریقے سے پروسیس کرنے میں مدد دیتے ہیں۔
+
+```mermaid
+flowchart TD
+    A["<!DOCTYPE html>"] --> B["<html>"]
+    B --> C["<head>"]
+    C --> D["<title>"]
+    C --> E["<meta charset>"]
+    C --> F["<meta viewport>"]
+    B --> G["<body>"]
+    G --> H["<h1> Heading"]
+    G --> I["<div> Containers"]
+    G --> J["<img> Images"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style C fill:#fff3e0
+    style G fill:#e8f5e8
+```
 
-آئیے اس ضروری بنیاد کو شامل کریں جو ہر HTML دستاویز کو چاہیے۔
+آئیے وہ ضروری بنیاد شامل کریں جو ہر HTML دستاویز کو چاہیے۔
 
 ### DOCTYPE اعلان اور روٹ عنصر
 
-کسی بھی HTML فائل کی پہلی دو لائنیں براؤزر کے لیے دستاویز کا "تعارف" کے طور پر کام کرتی ہیں:
+کسی بھی HTML فائل کی پہلی دو لائنیں براؤزر کے لیے دستاویز کا "تعارف" ہوتی ہیں:
 
 ```html
 <!DOCTYPE html>
@@ -75,24 +140,32 @@ code index.html
 ```
 
 **یہ کوڈ کیا کرتا ہے:**
-- **دستاویز کی قسم کو HTML5 کے طور پر اعلان کرتا ہے** `<!DOCTYPE html>` کا استعمال کرتے ہوئے
+- **دستاویز کی قسم HTML5 کے طور پر اعلان کرتا ہے** `<!DOCTYPE html>` استعمال کرتے ہوئے
 - **روٹ `<html>` عنصر بناتا ہے** جو تمام صفحہ مواد کو رکھے گا
 - **جدید ویب معیارات قائم کرتا ہے** مناسب براؤزر رینڈرنگ کے لیے
 - **مختلف براؤزرز اور ڈیوائسز پر مستقل ڈسپلے کو یقینی بناتا ہے**
 
-> 💡 **ویژول اسٹوڈیو کوڈ ٹپ**: ویژول اسٹوڈیو کوڈ میں کسی بھی HTML ٹیگ پر ہوور کریں تاکہ MDN ویب ڈاکس سے مددگار معلومات دیکھ سکیں، بشمول استعمال کی مثالیں اور براؤزر مطابقت کی تفصیلات۔
+> 💡 **VS Code ٹپ**: VS Code میں کسی بھی HTML ٹیگ پر ہوور کریں تاکہ MDN Web Docs سے مددگار معلومات دیکھ سکیں، بشمول استعمال کی مثالیں اور براؤزر مطابقت کی تفصیلات۔
 
 > 📚 **مزید سیکھیں**: DOCTYPE اعلان براؤزرز کو "quirks mode" میں داخل ہونے سے روکتا ہے، جو بہت پرانی ویب سائٹس کو سپورٹ کرنے کے لیے استعمال ہوتا تھا۔ جدید ویب ڈیولپمنٹ سادہ `<!DOCTYPE html>` اعلان استعمال کرتی ہے تاکہ [معیارات کے مطابق رینڈرنگ](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) کو یقینی بنایا جا سکے۔
 
+### 🔄 **تعلیمی جائزہ**
+**رکیں اور غور کریں**: جاری رکھنے سے پہلے، یقینی بنائیں کہ آپ سمجھتے ہیں:
+- ✅ کیوں ہر HTML دستاویز کو DOCTYPE اعلان کی ضرورت ہوتی ہے
+- ✅ `<html>` روٹ عنصر کیا رکھتا ہے
+- ✅ یہ ڈھانچہ براؤزرز کو صفحات کو صحیح طریقے سے رینڈر کرنے میں کیسے مدد کرتا ہے
+
+**خود کو جلدی آزمائیں**: کیا آپ اپنے الفاظ میں وضاحت کر سکتے ہیں کہ "معیارات کے مطابق رینڈرنگ" کا کیا مطلب ہے؟
+
 ## ضروری دستاویز میٹا ڈیٹا شامل کرنا
 
-HTML دستاویز کا `<head>` سیکشن اہم معلومات پر مشتمل ہوتا ہے جو براؤزرز اور سرچ انجنز کو چاہیے، لیکن جو زائرین کو صفحے پر براہ راست نظر نہیں آتی۔ اسے "پردے کے پیچھے" کی معلومات کے طور پر سوچیں جو آپ کے ویب صفحے کو صحیح طریقے سے کام کرنے اور مختلف ڈیوائسز اور پلیٹ فارمز پر صحیح طور پر ظاہر ہونے میں مدد دیتی ہے۔
+HTML دستاویز کا `<head>` سیکشن اہم معلومات رکھتا ہے جو براؤزرز اور سرچ انجنز کو چاہیے، لیکن جو وزیٹرز کو صفحے پر براہ راست نظر نہیں آتی۔ اسے "پردے کے پیچھے" معلومات سمجھیں جو آپ کے ویب صفحے کو صحیح طریقے سے کام کرنے اور مختلف ڈیوائسز اور پلیٹ فارمز پر صحیح طور پر ظاہر ہونے میں مدد دیتی ہے۔
 
-یہ میٹا ڈیٹا براؤزرز کو بتاتا ہے کہ آپ کے صفحے کو کیسے دکھایا جائے، کون سا کریکٹر انکوڈنگ استعمال کیا جائے، اور مختلف اسکرین سائزز کو کیسے ہینڈل کیا جائے – یہ سب پیشہ ور، قابل رسائی ویب صفحات بنانے کے لیے ضروری ہیں۔
+یہ میٹا ڈیٹا براؤزرز کو بتاتا ہے کہ آپ کا صفحہ کیسے دکھایا جائے، کون سا کریکٹر انکوڈنگ استعمال کیا جائے، اور مختلف اسکرین سائزز کو کیسے ہینڈل کیا جائے – پیشہ ورانہ، قابل رسائی ویب صفحات بنانے کے لیے سب ضروری ہیں۔
 
 ### کام: دستاویز کا ہیڈ شامل کریں
 
-اپنے کھلنے اور بند ہونے والے `<html>` ٹیگز کے درمیان یہ `<head>` سیکشن شامل کریں:
+اپنے `<html>` ٹیگز کے درمیان یہ `<head>` سیکشن شامل کریں:
 
 ```html
 <head>
@@ -106,25 +179,25 @@ HTML دستاویز کا `<head>` سیکشن اہم معلومات پر مشتم
 **ہر عنصر کیا کرتا ہے:**
 - **صفحے کا عنوان سیٹ کرتا ہے** جو براؤزر ٹیبز اور سرچ نتائج میں ظاہر ہوتا ہے
 - **UTF-8 کریکٹر انکوڈنگ کی وضاحت کرتا ہے** تاکہ دنیا بھر میں صحیح ٹیکسٹ ڈسپلے ہو
-- **جدید انٹرنیٹ ایکسپلورر ورژنز کے ساتھ مطابقت کو یقینی بناتا ہے**
-- **ریسپانسیو ڈیزائن کو کنفیگر کرتا ہے** ڈیوائس کی چوڑائی سے میچ کرنے کے لیے ویوپورٹ سیٹ کرکے
+- **جدید Internet Explorer ورژنز کے ساتھ مطابقت کو یقینی بناتا ہے**
+- **ریسپانسیو ڈیزائن کو ترتیب دیتا ہے** ڈیوائس کی چوڑائی سے میچ کرنے کے لیے ویوپورٹ سیٹ کرکے
 - **ابتدائی زوم لیول کنٹرول کرتا ہے** تاکہ مواد کو قدرتی سائز پر دکھایا جا سکے
 
-> 🤔 **اس بارے میں سوچیں**: اگر آپ نے ویوپورٹ میٹا ٹیگ کو اس طرح سیٹ کیا: `<meta name="viewport" content="width=600">`؟ یہ صفحے کو ہمیشہ 600 پکسل چوڑا رکھنے پر مجبور کرے گا، ریسپانسیو ڈیزائن کو خراب کر دے گا! [ویوپورٹ کنفیگریشن](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) کے بارے میں مزید جانیں۔
+> 🤔 **اس بارے میں سوچیں**: اگر آپ نے ویوپورٹ میٹا ٹیگ کو اس طرح سیٹ کیا: `<meta name="viewport" content="width=600">` تو کیا ہوگا؟ یہ صفحے کو ہمیشہ 600 پکسل چوڑا کرنے پر مجبور کرے گا، ریسپانسیو ڈیزائن کو خراب کر دے گا! [ویوپورٹ کی صحیح ترتیب](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) کے بارے میں مزید جانیں۔
 
 ## دستاویز کا باڈی بنانا
 
-HTML کے `<body>` عنصر میں آپ کے ویب صفحے کا تمام نظر آنے والا مواد شامل ہوتا ہے – وہ سب کچھ جو صارفین دیکھیں گے اور اس کے ساتھ انٹرایکٹ کریں گے۔ جبکہ `<head>` سیکشن نے براؤزر کو ہدایات فراہم کیں، `<body>` سیکشن میں اصل مواد شامل ہوتا ہے: ٹیکسٹ، تصاویر، بٹن، اور دیگر عناصر جو آپ کا یوزر انٹرفیس بناتے ہیں۔
+HTML دستاویز کا `<body>` عنصر آپ کے ویب صفحے کے تمام نظر آنے والے مواد کو رکھتا ہے – وہ سب کچھ جو صارفین دیکھیں گے اور اس کے ساتھ تعامل کریں گے۔ جبکہ `<head>` سیکشن نے براؤزر کو ہدایات فراہم کیں، `<body>` سیکشن اصل مواد رکھتا ہے: ٹیکسٹ، تصاویر، بٹن، اور دیگر عناصر جو آپ کا یوزر انٹرفیس بناتے ہیں۔
 
-آئیے باڈی کا ڈھانچہ شامل کریں اور سمجھیں کہ HTML ٹیگز ایک ساتھ کیسے کام کرتے ہیں تاکہ معنی خیز مواد بن سکے۔
+آئیے باڈی ڈھانچہ شامل کریں اور سمجھیں کہ HTML ٹیگز ایک ساتھ کیسے کام کرتے ہیں تاکہ معنی خیز مواد بنائیں۔
 
 ### HTML ٹیگ ڈھانچہ سمجھنا
 
-HTML جوڑے والے ٹیگز کا استعمال کرتا ہے تاکہ عناصر کی وضاحت کی جا سکے۔ زیادہ تر ٹیگز کے پاس ایک اوپننگ ٹیگ ہوتا ہے جیسے `<p>` اور ایک کلوزنگ ٹیگ جیسے `</p>`, جس کے درمیان مواد ہوتا ہے: `<p>Hello, world!</p>`۔ یہ ایک پیراگراف عنصر بناتا ہے جس میں "Hello, world!" ٹیکسٹ ہوتا ہے۔
+HTML جوڑے ٹیگز استعمال کرتا ہے تاکہ عناصر کی وضاحت کی جا سکے۔ زیادہ تر ٹیگز کے پاس ایک اوپننگ ٹیگ ہوتا ہے جیسے `<p>` اور ایک کلوزنگ ٹیگ جیسے `</p>`, جس کے درمیان مواد ہوتا ہے: `<p>Hello, world!</p>`. یہ ایک پیراگراف عنصر بناتا ہے جس میں "Hello, world!" ٹیکسٹ ہوتا ہے۔
 
 ### کام: باڈی عنصر شامل کریں
 
-اپنی HTML فائل کو اپ ڈیٹ کریں تاکہ `<body>` عنصر شامل ہو:
+اپنی HTML فائل کو اپ ڈیٹ کریں تاکہ اس میں `<body>` عنصر شامل ہو:
 
 ```html
 <!DOCTYPE html>
@@ -140,23 +213,23 @@ HTML جوڑے والے ٹیگز کا استعمال کرتا ہے تاکہ عن
 ```
 
 **یہ مکمل ڈھانچہ کیا فراہم کرتا ہے:**
-- **بنیادی HTML5 دستاویز کا فریم ورک قائم کرتا ہے**
-- **مناسب براؤزر رینڈرنگ کے لیے ضروری میٹا ڈیٹا شامل کرتا ہے**
-- **ایک خالی باڈی بناتا ہے جو آپ کے نظر آنے والے مواد کے لیے تیار ہے**
+- **HTML5 دستاویز کا بنیادی فریم ورک قائم کرتا ہے**
+- **صحیح براؤزر رینڈرنگ کے لیے ضروری میٹا ڈیٹا شامل کرتا ہے**
+- **ایک خالی باڈی بناتا ہے** جو آپ کے نظر آنے والے مواد کے لیے تیار ہے
 - **جدید ویب ڈیولپمنٹ کے بہترین طریقوں کی پیروی کرتا ہے**
 
-اب آپ اپنے ٹیریریم کے نظر آنے والے عناصر شامل کرنے کے لیے تیار ہیں۔ ہم `<div>` عناصر کو کنٹینرز کے طور پر استعمال کریں گے تاکہ مواد کے مختلف حصوں کو منظم کریں، اور `<img>` عناصر کو پودوں کی تصاویر دکھانے کے لیے۔
+اب آپ اپنے ٹیریریم کے نظر آنے والے عناصر شامل کرنے کے لیے تیار ہیں۔ ہم `<div>` عناصر کو کنٹینرز کے طور پر استعمال کریں گے تاکہ مواد کے مختلف حصوں کو منظم کریں، اور `<img>` عناصر کو پودوں کی تصاویر دکھانے کے لیے استعمال کریں۔
 
 ### تصاویر اور لے آؤٹ کنٹینرز کے ساتھ کام کرنا
 
-HTML میں تصاویر خاص ہوتی ہیں کیونکہ وہ "سیلف کلوزنگ" ٹیگز استعمال کرتی ہیں۔ عناصر جیسے `<p></p>` جو مواد کے ارد گرد لپیٹتے ہیں، کے برعکس، `<img>` ٹیگ اپنی تمام معلومات ٹیگ کے اندر ہی رکھتا ہے، جیسے `src` تصویر فائل کے راستے کے لیے اور `alt` رسائی کے لیے۔
+HTML میں تصاویر خاص ہوتی ہیں کیونکہ وہ "سیلف کلوزنگ" ٹیگز استعمال کرتی ہیں۔ عناصر جیسے `<p></p>` کے برعکس جو مواد کے ارد گرد لپیٹتے ہیں، `<img>` ٹیگ اپنی تمام معلومات ٹیگ کے اندر ہی رکھتا ہے، جیسے `src` تصویر فائل کے راستے کے لیے اور `alt` رسائی کے لیے۔
 
-تصاویر کو اپنے HTML میں شامل کرنے سے پہلے، آپ کو اپنے پروجیکٹ فائلز کو مناسب طریقے سے منظم کرنے کی ضرورت ہوگی، ایک تصاویر فولڈر بنا کر اور پودوں کے گرافکس شامل کر کے۔
+تصاویر کو اپنے HTML میں شامل کرنے سے پہلے، آپ کو اپنے پروجیکٹ فائلز کو صحیح طریقے سے منظم کرنے کی ضرورت ہوگی، ایک تصاویر فولڈر بنا کر اور پودوں کے گرافکس شامل کر کے۔
 
 **پہلے، اپنی تصاویر ترتیب دیں:**
 1. اپنے ٹیریریم پروجیکٹ فولڈر کے اندر ایک فولڈر بنائیں جس کا نام `images` ہو
-2. پودوں کی تصاویر [حل فولڈر](../../../../3-terrarium/solution/images) سے ڈاؤنلوڈ کریں (کل 14 پودوں کی تصاویر)
-3. تمام پودوں کی تصاویر کو اپنے نئے `images` فولڈر میں کاپی کریں
+2. پودوں کی تصاویر [حل فولڈر](../../../../3-terrarium/solution/images) سے ڈاؤن لوڈ کریں (کل 14 پودوں کی تصاویر)
+3. تمام پودوں کی تصاویر اپنے نئے `images` فولڈر میں کاپی کریں
 
 ### کام: پودوں کی ڈسپلے لے آؤٹ بنائیں
 
@@ -214,39 +287,83 @@ HTML میں تصاویر خاص ہوتی ہیں کیونکہ وہ "سیلف کل
 ```
 
 **مرحلہ وار، اس کوڈ میں کیا ہو رہا ہے:**
-- **ایک مرکزی صفحہ کنٹینر بناتا ہے** `id="page"` کے ساتھ جو تمام مواد کو رکھے گا
+- **ایک مرکزی صفحہ کنٹینر بناتا ہے** `id="page"` کے ساتھ تمام مواد رکھنے کے لیے
 - **دو کالم کنٹینرز قائم کرتا ہے**: `left-container` اور `right-container`
 - **7 پودوں کو بائیں کالم میں اور 7 پودوں کو دائیں کالم میں منظم کرتا ہے**
 - **ہر پودے کی تصویر کو ایک `plant-holder` div میں لپیٹتا ہے** انفرادی پوزیشننگ کے لیے
 - **CSS اسٹائلنگ کے لیے مستقل کلاس ناموں کا اطلاق کرتا ہے** اگلے سبق میں
-- **ہر پودے کی تصویر کو منفرد IDs تفویض کرتا ہے** بعد میں JavaScript انٹرایکشن کے لیے
-- **تصاویر فولڈر کی طرف اشارہ کرنے والے مناسب فائل راستے شامل کرتا ہے**
+- **ہر پودے کی تصویر کو منفرد IDs تفویض کرتا ہے** بعد میں JavaScript انٹریکشن کے لیے
+- **تصاویر فولڈر کی طرف اشارہ کرنے والے صحیح فائل راستے شامل کرتا ہے**
 
-> 🤔 **اس پر غور کریں**: نوٹ کریں کہ تمام تصاویر کے پاس فی الحال ایک ہی alt ٹیکسٹ "plant" ہے۔ یہ رسائی کے لیے مثالی نہیں ہے۔ اسکرین ریڈر استعمال کرنے والے "plant" کو 14 بار سنیں گے بغیر یہ جانے کہ ہر تصویر کون سا مخصوص پودا دکھاتی ہے۔ کیا آپ ہر تصویر کے لیے بہتر، زیادہ وضاحتی alt ٹیکسٹ کے بارے میں سوچ سکتے ہیں؟
+> 🤔 **اس پر غور کریں**: نوٹ کریں کہ تمام تصاویر کے پاس فی الحال ایک ہی alt ٹیکسٹ "plant" ہے۔ یہ رسائی کے لیے مثالی نہیں ہے۔ اسکرین ریڈر صارفین "plant" کو 14 بار سنیں گے بغیر یہ جانے کہ ہر تصویر کون سا مخصوص پودا دکھاتی ہے۔ کیا آپ ہر تصویر کے لیے بہتر، زیادہ وضاحتی alt ٹیکسٹ کے بارے میں سوچ سکتے ہیں؟
 
 > 📝 **HTML عنصر کی اقسام**: `<div>` عناصر "بلاک لیول" ہوتے ہیں اور مکمل چوڑائی لیتے ہیں، جبکہ `<span>` عناصر "ان لائن" ہوتے ہیں اور صرف ضروری چوڑائی لیتے ہیں۔ آپ کے خیال میں کیا ہوگا اگر آپ ان تمام `<div>` ٹیگز کو `<span>` ٹیگز میں تبدیل کر دیں؟
 
-اس مارک اپ کو شامل کرنے کے ساتھ، پودے اسکرین پر ظاہر ہوں گے، حالانکہ وہ ابھی تک پالش نہیں لگیں گے – یہی کام CSS کا ہے اگلے سبق میں! فی الحال، آپ کے پاس ایک مضبوط HTML بنیاد ہے جو آپ کے مواد کو صحیح طریقے سے منظم کرتی ہے اور رسائی کے بہترین طریقوں کی پیروی کرتی ہے۔
+### 🔄 **تعلیمی جائزہ**
+**ڈھانچہ سمجھنا**: اپنے HTML ڈھانچے کا جائزہ لینے کے لیے ایک لمحہ نکالیں:
+- ✅ کیا آپ اپنے لے آؤٹ میں مرکزی کنٹینرز کی شناخت کر سکتے ہیں؟
+- ✅ کیا آپ سمجھتے ہیں کہ ہر تصویر کے پاس منفرد ID کیوں ہے؟
+- ✅ آپ `plant-holder` divs کے مقصد کو کیسے بیان کریں گے؟
+
+**بصری معائنہ**: اپنے HTML فائل کو براؤزر میں کھولیں۔ آپ کو دیکھنا چاہیے:
+- پودوں کی تصاویر کی ایک بنیادی فہرست
+- تصاویر دو کالموں میں منظم
+- سادہ، بغیر اسٹائل کا لے آؤٹ
+
+**یاد رکھیں**: یہ سادہ ظاہری شکل بالکل وہی ہے جو HTML کو CSS اسٹائلنگ سے پہلے نظر آنا چاہیے!
+
+اس مارک اپ کے اضافے کے ساتھ، پودے اسکرین پر ظاہر ہوں گے، حالانکہ وہ ابھی تک پالش نہیں لگیں گے – یہی کام CSS کا ہے اگلے سبق میں! فی الحال، آپ کے پاس ایک مضبوط HTML بنیاد ہے جو آپ کے مواد کو صحیح طریقے سے منظم کرتی ہے اور رسائی کے بہترین طریقوں کی پیروی کرتی ہے۔
 
 ## رسائی کے لیے سیمینٹک HTML کا استعمال
 
-سیمینٹک HTML کا مطلب ہے HTML عناصر کا انتخاب ان کے معنی اور مقصد کی بنیاد پر، نہ کہ صرف ان کی ظاہری شکل پر۔ جب آپ سیمینٹک مارک اپ استعمال کرتے ہیں، تو آپ اپنے مواد کی ساخت اور معنی کو براؤزرز، سرچ انجنز، اور اسسٹیو ٹیکنالوجیز جیسے اسکرین ریڈرز کے ساتھ بات چیت کر رہے ہوتے ہیں۔
+سیمینٹک HTML کا مطلب ہے HTML عناصر کو ان کے معنی اور مقصد کی بنیاد پر منتخب کرنا، نہ کہ صرف ان کی ظاہری شکل پر۔ جب آپ سیمینٹک مارک اپ استعمال کرتے ہیں، تو آپ اپنے مواد کی ساخت اور معنی کو براؤزرز، سرچ انجنز، اور اسسٹیو ٹیکنالوجیز جیسے اسکرین ریڈرز کے ساتھ بات چیت کرتے ہیں۔
+
+```mermaid
+flowchart TD
+    A[Need to add content?] --> B{What type?}
+    B -->|Main heading| C["<h1>"]
+    B -->|Subheading| D["<h2>, <h3>, etc."]
+    B -->|Paragraph| E["<p>"]
+    B -->|List| F["<ul>, <ol>"]
+    B -->|Navigation| G["<nav>"]
+    B -->|Article| H["<article>"]
+    B -->|Section| I["<section>"]
+    B -->|Generic container| J["<div>"]
+    
+    C --> K[Screen readers announce as main title]
+    D --> L[Creates proper heading hierarchy]
+    E --> M[Provides proper text spacing]
+    F --> N[Enables list navigation shortcuts]
+    G --> O[Identifies navigation landmarks]
+    H --> P[Marks standalone content]
+    I --> Q[Groups related content]
+    J --> R[Use only when no semantic tag fits]
+    
+    style C fill:#4caf50
+    style D fill:#4caf50
+    style E fill:#4caf50
+    style F fill:#4caf50
+    style G fill:#2196f3
+    style H fill:#2196f3
+    style I fill:#2196f3
+    style J fill:#ff9800
+```
 
-یہ طریقہ آپ کی ویب سائٹس کو معذوری والے صارفین کے لیے زیادہ قابل رسائی بناتا ہے اور سرچ انجنز کو آپ کے مواد کو بہتر طور پر سمجھنے میں مدد دیتا ہے۔ یہ جدید ویب ڈیولپمنٹ کا ایک بنیادی اصول ہے جو سب کے لیے بہتر تجربات پیدا کرتا ہے۔
+یہ طریقہ آپ کی ویب سائٹس کو معذوری والے صارفین کے لیے زیادہ قابل رسائی بناتا ہے اور سرچ انجنز کو آپ کے مواد کو بہتر سمجھنے میں مدد دیتا ہے۔ یہ جدید ویب ڈیولپمنٹ کا ایک بنیادی اصول ہے جو سب کے لیے بہتر تجربات پیدا کرتا ہے۔
 
 ### سیمینٹک صفحہ عنوان شامل کرنا
 
-آئیے آپ کے ٹیریریم صفحے کے لیے ایک مناسب ہیڈنگ شامل کریں۔ اپنے کھلنے والے `<body>` ٹیگ کے فوراً بعد یہ لائن شامل کریں:
+آئیے آپ کے ٹیریریم صفحے کے لیے ایک مناسب ہیڈنگ شامل کریں۔ اپنے اوپننگ `<body>` ٹیگ کے فوراً بعد یہ لائن شامل کریں:
 
 ```html
 <h1>My Terrarium</h1>
 ```
 
-**سیمینٹک مارک اپ کیوں اہم ہے:**
-- **اسکرین ریڈرز کو صفحہ کی ساخت کو نیویگیٹ کرنے اور سمجھنے میں مدد دیتا ہے**
+**کیوں سیمینٹک مارک اپ اہم ہے:**
+- **اسکرین ریڈرز کو صفحے کی ساخت کو نیویگیٹ کرنے اور سمجھنے میں مدد دیتا ہے**
 - **سرچ انجن آپٹیمائزیشن (SEO) کو بہتر بناتا ہے** مواد کی درجہ بندی کو واضح کر کے
 - **بصری معذوری یا علمی فرق والے صارفین کے لیے رسائی کو بڑھاتا ہے**
-- **تمام ڈیوائسز اور پلیٹ فارمز پر بہتر یوزر تجربات تخلیق کرتا ہے**
+- **تمام ڈیوائسز اور پلیٹ فارمز پر بہتر یوزر تجربات پیدا کرتا ہے**
 - **پیشہ ورانہ ترقی کے لیے ویب معیارات اور بہترین طریقوں کی پیروی کرتا ہے**
 
 **سیمینٹک بمقابلہ غیر سیمینٹک انتخاب کی مثالیں:**
@@ -258,105 +375,203 @@ HTML میں تصاویر خاص ہوتی ہیں کیونکہ وہ "سیلف کل
 | بٹن | `<button>کلک کریں</button>` | `<span onclick="...">کلک کریں</span>` |
 | مضمون کا مواد | `<article><p></p></article>` | `<div class="content"><div></div></div>` |
 
-> 🎥 **عمل میں دیکھیں**: [اسکرین ریڈرز ویب صفحات کے ساتھ کیسے انٹرایکٹ کرتے ہیں](https://www.youtube.com/watch?v=OUDV1gqs9GA) دیکھیں تاکہ سمجھ سکیں کہ سیمینٹک مارک اپ رسائی کے لیے کیوں ضروری ہے۔ نوٹ کریں کہ مناسب HTML ساخت صارفین کو مؤثر طریقے سے نیویگیٹ کرنے میں مدد دیتی ہے۔
+> 🎥 **عمل میں دیکھیں**: [اسکرین ریڈرز ویب صفحات کے ساتھ کیسے تعامل کرتے ہیں](https://www.youtube.com/watch?v=OUDV1gqs9GA) دیکھیں تاکہ سمجھ سکیں کہ سیمینٹک مارک اپ رسائی کے لیے کیوں ضروری ہے۔ نوٹ کریں کہ صحیح HTML ڈھانچہ صارفین کو مؤثر طریقے سے نیویگیٹ کرنے میں کیسے مدد دیتا ہے۔
 
 ## ٹیریریم کنٹینر بنانا
 
-اب آئیے ٹیریریم کے لیے HTML ساخت شامل کریں – شیشے کا کنٹینر جہاں پودے بالآخر رکھے جائیں گے۔ یہ سیکشن ایک اہم تصور کو ظاہر کرتا ہے: HTML ساخت فراہم کرتا ہے، لیکن بغیر CSS اسٹائلنگ کے، یہ عناصر ابھی تک نظر نہیں آئیں گے۔
-
-ٹریریم مارک اپ وضاحتی کلاس ناموں کا استعمال کرتا ہے جو اگلے سبق میں CSS اسٹائلنگ کو بدیہی اور برقرار رکھنے کے قابل بنائے گا۔
-
-### کام: ٹیریریم ساخت شامل کریں
-
-آخری `</div>` ٹیگ کے اوپر یہ مارک اپ شامل کریں (صفحہ کنٹینر کے بند ہونے والے ٹیگ سے پہلے):
-
-```html
-<div id="terrarium">
-	<div class="jar-top"></div>
-	<div class="jar-walls">
-		<div class="jar-glossy-long"></div>
-		<div class="jar-glossy-short"></div>
-	</div>
-	<div class="dirt"></div>
-	<div class="jar-bottom"></div>
-</div>
+اب آئیے ٹیریریم کے لیے HTML ڈھانچہ شامل کریں – شیشے کا کنٹینر جہاں پودے بالآخر رکھے جائیں گے۔ یہ سیکشن ایک اہم تصور کو ظاہر کرتا ہے: HTML ڈھانچہ فراہم کرتا ہے، لیکن CSS اسٹائلنگ کے بغیر، یہ عناصر ابھی تک نظر نہیں آئیں گے۔
+
+ٹریریم مارک اپ وضاحتی کلاس ناموں کا استعمال کرتا ہے جو اگلے سبق میں CSS اسٹائلنگ
+- **الگ الگ عناصر** ہر بصری جزو کے لیے (اوپر، دیواریں، مٹی، نیچے) کی وضاحت کرتا ہے  
+- **شامل کرتا ہے** شیشے کے انعکاس اثرات کے لیے اندرونی عناصر (چمکدار عناصر)  
+- **استعمال کرتا ہے** وضاحتی کلاس نام جو ہر عنصر کے مقصد کو واضح طور پر ظاہر کرتے ہیں  
+- **تیار کرتا ہے** ساخت کو CSS اسٹائلنگ کے لیے جو شیشے کے ٹیریریم کی شکل پیدا کرے گا  
+
+> 🤔 **کچھ محسوس کیا؟**: حالانکہ آپ نے یہ مارک اپ شامل کیا ہے، آپ صفحے پر کچھ نیا نہیں دیکھ رہے ہیں! یہ بالکل واضح کرتا ہے کہ HTML ساخت فراہم کرتا ہے جبکہ CSS ظاہری شکل فراہم کرتا ہے۔ یہ `<div>` عناصر موجود ہیں لیکن ابھی تک ان کے پاس کوئی بصری اسٹائلنگ نہیں ہے – یہ اگلے سبق میں آئے گا!  
+
+```mermaid
+flowchart TD
+    A[HTML Document] --> B[Document Head]
+    A --> C[Document Body]
+    B --> D[Title Element]
+    B --> E[Meta Charset]
+    B --> F[Meta Viewport]
+    C --> G[Main Heading]
+    C --> H[Page Container]
+    H --> I[Left Container with 7 plants]
+    H --> J[Right Container with 7 plants]
+    H --> K[Terrarium Structure]
+    
+    style A fill:#e1f5fe
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style H fill:#f3e5f5
 ```
+  
+### 🔄 **تعلیمی جائزہ**  
+**HTML ساخت کی مہارت**: آگے بڑھنے سے پہلے، یقینی بنائیں کہ آپ:  
+- ✅ HTML ساخت اور بصری ظاہری شکل کے فرق کو بیان کر سکتے ہیں  
+- ✅ معنوی اور غیر معنوی HTML عناصر کی شناخت کر سکتے ہیں  
+- ✅ وضاحت کر سکتے ہیں کہ مناسب مارک اپ رسائی کو کیسے فائدہ پہنچاتا ہے  
+- ✅ مکمل دستاویز درخت کی ساخت کو پہچان سکتے ہیں  
 
-**اس ٹیریریم ساخت کو سمجھنا:**
-- **ایک مرکزی ٹیریریم کنٹینر بناتا ہے** منفرد ID کے ساتھ اسٹائلنگ کے لیے
-- **ہر بصری جزو کے لیے الگ الگ عناصر کی وضاحت کرتا ہے** (اوپر، دیواریں، مٹی، نیچے)
-- **شیشے کے انعکاس اثرات کے لیے گھونسلا عناصر شامل کرتا ہے** (چمکدار عناصر)
-- **وضاحتی کلاس ناموں کا استعمال کرتا ہے** جو ہر عنصر کے مقصد کو واضح طور پر ظاہر کرتے ہیں
-- **شیشے کے ٹیریریم ظاہری شکل بنانے کے لیے CSS اسٹائلنگ کے لیے ساخت تیار کرتا ہے**
-
-> 🤔 **کچھ نوٹ کریں؟**: حالانکہ آپ نے یہ مارک اپ شامل کیا، آپ صفحے پر کچھ نیا نہیں دیکھتے! یہ بال
-**پلانٹ کی دیکھ بھال کے رہنما**
-
-### پانی دینا
-پودوں کو مناسب مقدار میں پانی دینا ضروری ہے تاکہ وہ صحت مند رہ سکیں۔ زیادہ پانی دینے سے جڑیں خراب ہو سکتی ہیں، جبکہ کم پانی دینے سے پودے سوکھ سکتے ہیں۔ ہر پودے کی پانی کی ضروریات مختلف ہوتی ہیں، اس لیے ان کی نوعیت کے مطابق پانی دیں۔
-
-### روشنی کی ضروریات
-پودوں کو بڑھنے کے لیے روشنی کی ضرورت ہوتی ہے، لیکن ہر پودے کی روشنی کی ضروریات مختلف ہوتی ہیں۔ کچھ پودے دھوپ میں بہتر بڑھتے ہیں، جبکہ کچھ کو سایہ پسند ہوتا ہے۔ اپنے پودے کی نوعیت کو سمجھیں اور اسے مناسب روشنی فراہم کریں۔
-
-### مٹی کی دیکھ بھال
-پودوں کی صحت مند نشوونما کے لیے مٹی کا معیار بہت اہم ہے۔ مٹی کو وقتاً فوقتاً کھاد دیں اور اس کی نمی کو برقرار رکھیں۔ مٹی کی قسم اور اس میں موجود غذائی اجزاء پودے کی بڑھوتری پر اثر انداز ہوتے ہیں، اس لیے مناسب مٹی کا انتخاب کریں۔
-
-[ایجنٹ موڈ کے بارے میں مزید جانیں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
-
-## HTML کی تاریخ کا چیلنج
+**اپنی سمجھ کی جانچ کریں**: اپنے HTML فائل کو براؤزر میں جاوا اسکرپٹ غیر فعال اور CSS ہٹانے کے ساتھ کھولنے کی کوشش کریں۔ یہ آپ کو وہ خالص معنوی ساخت دکھاتا ہے جو آپ نے تخلیق کی ہے!  
 
-**ویب کی ترقی کے بارے میں سیکھنا**
-
-HTML نے 1990 میں ٹم برنرز لی کے ذریعہ CERN میں پہلا ویب براؤزر بنانے کے بعد سے بہت ترقی کی ہے۔ کچھ پرانے ٹیگز جیسے `<marquee>` اب ختم ہو چکے ہیں کیونکہ وہ جدید رسائی کے معیار اور ریسپانسیو ڈیزائن اصولوں کے ساتھ مطابقت نہیں رکھتے۔
-
-**یہ تجربہ کریں:**
-1. اپنے `<h1>` عنوان کو عارضی طور پر `<marquee>` ٹیگ میں لپیٹیں: `<marquee><h1>میرا ٹیریریم</h1></marquee>`
-2. اپنے صفحے کو براؤزر میں کھولیں اور اسکرولنگ اثر کا مشاہدہ کریں
-3. غور کریں کہ یہ ٹیگ کیوں ختم کیا گیا (اشارہ: صارف کے تجربے اور رسائی کے بارے میں سوچیں)
-4. `<marquee>` ٹیگ کو ہٹا دیں اور سیمینٹک مارک اپ پر واپس جائیں
-
-**عکاسی کے سوالات:**
-- اسکرولنگ عنوان بصری معذوری یا حرکت کی حساسیت والے صارفین کو کیسے متاثر کر سکتا ہے؟
-- کون سی جدید CSS تکنیکیں اسی طرح کے بصری اثرات کو زیادہ قابل رسائی طریقے سے حاصل کر سکتی ہیں؟
-- ختم شدہ عناصر کے بجائے موجودہ ویب معیارات کا استعمال کیوں ضروری ہے؟
-
-[ختم شدہ اور ختم کیے گئے HTML عناصر](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) کے بارے میں مزید جانیں تاکہ ویب معیارات کے ارتقاء کو سمجھ سکیں اور صارف کے تجربے کو بہتر بنایا جا سکے۔
-
-## لیکچر کے بعد کا کوئز
-
-[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/16)
+---
 
-## جائزہ اور خود مطالعہ
+## GitHub Copilot Agent Challenge  
 
-**HTML کے علم کو گہرا کریں**
+Agent موڈ استعمال کریں اور درج ذیل چیلنج مکمل کریں:  
 
-HTML گزشتہ 30 سالوں سے ویب کی بنیاد رہا ہے، ایک سادہ دستاویز مارک اپ زبان سے انٹرایکٹو ایپلیکیشنز بنانے کے لیے ایک جدید پلیٹ فارم میں تبدیل ہو گیا ہے۔ اس ارتقاء کو سمجھنا جدید ویب معیارات کی قدر کرنے اور بہتر ترقیاتی فیصلے کرنے میں مدد کرتا ہے۔
+**تفصیل:** ٹیریریم پروجیکٹ میں شامل کرنے کے لیے پودوں کی دیکھ بھال کے گائیڈ سیکشن کے لیے ایک معنوی HTML ساخت بنائیں۔  
 
-**تجویز کردہ سیکھنے کے راستے:**
+**پرومپٹ:** ایک معنوی HTML سیکشن بنائیں جس میں ایک مرکزی سرخی "پودوں کی دیکھ بھال کی گائیڈ"، تین ذیلی سیکشنز کے ساتھ سرخیاں "پانی دینا"، "روشنی کی ضروریات"، اور "مٹی کی دیکھ بھال"، ہر ایک میں پودوں کی دیکھ بھال کی معلومات کا ایک پیراگراف شامل ہو۔ مناسب معنوی HTML ٹیگز جیسے `<section>`, `<h2>`, `<h3>`, اور `<p>` استعمال کریں تاکہ مواد کو مناسب طریقے سے ترتیب دیا جا سکے۔  
 
-1. **HTML کی تاریخ اور ارتقاء**
-   - HTML 1.0 سے HTML5 تک کے ٹائم لائن کی تحقیق کریں
-   - معلوم کریں کہ کچھ ٹیگز کیوں ختم کیے گئے (رسائی، موبائل دوستانہ، برقرار رکھنے کی صلاحیت)
-   - ابھرتی ہوئی HTML خصوصیات اور تجاویز کی تحقیق کریں
+مزید جانیں [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں یہاں۔  
 
-2. **سیمینٹک HTML کی گہرائی میں مطالعہ**
-   - [HTML5 سیمینٹک عناصر](https://developer.mozilla.org/docs/Web/HTML/Element) کی مکمل فہرست کا مطالعہ کریں
-   - یہ پہچاننے کی مشق کریں کہ کب `<article>`, `<section>`, `<aside>`, اور `<main>` استعمال کرنا ہے
-   - بہتر رسائی کے لیے ARIA صفات کے بارے میں سیکھیں
+## HTML تاریخ چیلنج  
+
+**ویب ارتقاء کے بارے میں سیکھنا**  
+
+HTML نے 1990 میں CERN میں ٹم برنرز لی کے پہلے ویب براؤزر بنانے کے بعد سے نمایاں ترقی کی ہے۔ کچھ پرانے ٹیگز جیسے `<marquee>` اب ختم ہو چکے ہیں کیونکہ وہ جدید رسائی کے معیار اور جوابدہ ڈیزائن اصولوں کے ساتھ اچھی طرح کام نہیں کرتے۔  
+
+**یہ تجربہ آزمائیں:**  
+1. عارضی طور پر اپنی `<h1>` سرخی کو `<marquee>` ٹیگ میں لپیٹیں: `<marquee><h1>میرا ٹیریریم</h1></marquee>`  
+2. اپنے صفحے کو براؤزر میں کھولیں اور اسکرولنگ اثر کا مشاہدہ کریں  
+3. غور کریں کہ یہ ٹیگ کیوں ختم ہو گیا (اشارہ: صارف کے تجربے اور رسائی کے بارے میں سوچیں)  
+4. `<marquee>` ٹیگ کو ہٹا دیں اور معنوی مارک اپ پر واپس جائیں  
+
+**عکاسی کے سوالات:**  
+- اسکرولنگ سرخی بصری معذوری یا حرکت کی حساسیت والے صارفین کو کیسے متاثر کر سکتی ہے؟  
+- کون سی جدید CSS تکنیکیں اسی طرح کے بصری اثرات کو زیادہ قابل رسائی طریقے سے حاصل کر سکتی ہیں؟  
+- موجودہ ویب معیارات کو ختم شدہ عناصر کے بجائے استعمال کرنا کیوں ضروری ہے؟  
+
+مزید دریافت کریں [obsolete and deprecated HTML elements](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) کے بارے میں تاکہ سمجھ سکیں کہ ویب معیارات صارف کے تجربے کو بہتر بنانے کے لیے کیسے ترقی کرتے ہیں۔  
+
+## لیکچر کے بعد کا کوئز  
+
+[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/16)  
+
+## جائزہ اور خود مطالعہ  
+
+**اپنے HTML علم کو گہرا کریں**  
+
+HTML ویب کی بنیاد 30 سال سے زیادہ عرصے سے ہے، ایک سادہ دستاویز مارک اپ زبان سے انٹرایکٹو ایپلیکیشنز بنانے کے لیے ایک جدید پلیٹ فارم تک ترقی کر چکا ہے۔ اس ارتقاء کو سمجھنا آپ کو جدید ویب معیارات کی قدر کرنے اور بہتر ترقیاتی فیصلے کرنے میں مدد دیتا ہے۔  
+
+**تجویز کردہ سیکھنے کے راستے:**  
+
+1. **HTML تاریخ اور ارتقاء**  
+   - HTML 1.0 سے HTML5 تک کے ٹائم لائن کی تحقیق کریں  
+   - معلوم کریں کہ کچھ ٹیگز کیوں ختم ہو گئے (رسائی، موبائل دوستانہ، دیکھ بھال)  
+   - ابھرتی ہوئی HTML خصوصیات اور تجاویز کی تحقیق کریں  
+
+2. **معنوی HTML کی گہرائی میں مطالعہ**  
+   - [HTML5 معنوی عناصر](https://developer.mozilla.org/docs/Web/HTML/Element) کی مکمل فہرست کا مطالعہ کریں  
+   - یہ پہچاننے کی مشق کریں کہ کب `<article>`, `<section>`, `<aside>`, اور `<main>` استعمال کرنا ہے  
+   - بہتر رسائی کے لیے ARIA صفات کے بارے میں سیکھیں  
+
+3. **جدید ویب ترقی**  
+   - [جوابدہ ویب سائٹس بنانا](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) Microsoft Learn پر دریافت کریں  
+   - سمجھیں کہ HTML CSS اور جاوا اسکرپٹ کے ساتھ کیسے مربوط ہوتا ہے  
+   - ویب کارکردگی اور SEO بہترین طریقوں کے بارے میں سیکھیں  
+
+**عکاسی کے سوالات:**  
+- آپ نے کون سے ختم شدہ HTML ٹیگز دریافت کیے، اور وہ کیوں ہٹائے گئے؟  
+- HTML کے مستقبل کے ورژنز کے لیے کون سی نئی خصوصیات تجویز کی جا رہی ہیں؟  
+- معنوی HTML ویب رسائی اور SEO میں کیسے مدد دیتا ہے؟  
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**  
+- [ ] DevTools (F12) کھولیں اور اپنی پسندیدہ ویب سائٹ کے HTML ساخت کا معائنہ کریں  
+- [ ] بنیادی ٹیگز کے ساتھ ایک سادہ HTML فائل بنائیں: `<h1>`, `<p>`, اور `<img>`  
+- [ ] W3C HTML Validator آن لائن کے ذریعے اپنے HTML کی توثیق کریں  
+- [ ] اپنے HTML میں ایک تبصرہ شامل کرنے کی کوشش کریں `<!-- تبصرہ -->`  
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**  
+- [ ] لیکچر کے بعد کا کوئز مکمل کریں اور معنوی HTML تصورات کا جائزہ لیں  
+- [ ] مناسب HTML ساخت کے ساتھ اپنے بارے میں ایک سادہ ویب صفحہ بنائیں  
+- [ ] مختلف سرخی کی سطحوں اور متن فارمیٹنگ ٹیگز کے ساتھ تجربہ کریں  
+- [ ] ملٹی میڈیا انضمام کی مشق کے لیے تصاویر اور لنکس شامل کریں  
+- [ ] HTML5 خصوصیات پر تحقیق کریں جو آپ نے ابھی تک آزمائی نہیں ہیں  
+
+### 📅 **آپ کا ہفتہ بھر کا HTML سفر**  
+- [ ] معنوی مارک اپ کے ساتھ ٹیریریم پروجیکٹ اسائنمنٹ مکمل کریں  
+- [ ] ARIA لیبلز اور رولز کا استعمال کرتے ہوئے ایک قابل رسائی ویب صفحہ بنائیں  
+- [ ] مختلف ان پٹ اقسام کے ساتھ فارم تخلیق کی مشق کریں  
+- [ ] HTML5 APIs جیسے localStorage یا geolocation کو دریافت کریں  
+- [ ] جوابدہ HTML پیٹرنز اور موبائل فرسٹ ڈیزائن کا مطالعہ کریں  
+- [ ] دوسرے ڈویلپرز کے HTML کوڈ کا جائزہ لیں بہترین طریقوں کے لیے  
+
+### 🌟 **آپ کا مہینہ بھر کا ویب بنیاد**  
+- [ ] اپنی HTML مہارت کو ظاہر کرنے کے لیے ایک پورٹ فولیو ویب سائٹ بنائیں  
+- [ ] Handlebars جیسے فریم ورک کے ساتھ HTML ٹیمپلیٹنگ سیکھیں  
+- [ ] اوپن سورس پروجیکٹس میں حصہ لیں HTML دستاویزات کو بہتر بنا کر  
+- [ ] جدید HTML تصورات جیسے کسٹم عناصر میں مہارت حاصل کریں  
+- [ ] HTML کو CSS فریم ورک اور جاوا اسکرپٹ لائبریریوں کے ساتھ مربوط کریں  
+- [ ] HTML بنیادی اصول سیکھنے والوں کی رہنمائی کریں  
+
+## 🎯 آپ کا HTML مہارت کا ٹائم لائن  
+
+```mermaid
+timeline
+    title HTML Learning Progression
+    
+    section Foundation (5 minutes)
+        Document Structure: DOCTYPE declaration
+                         : HTML root element
+                         : Head vs Body understanding
+        
+    section Metadata (10 minutes)
+        Essential Meta Tags: Character encoding
+                           : Viewport configuration
+                           : Browser compatibility
+        
+    section Content Creation (15 minutes)
+        Image Integration: Proper file paths
+                         : Alt text importance
+                         : Self-closing tags
+        
+    section Layout Organization (20 minutes)
+        Container Strategy: Div elements for structure
+                          : Class and ID naming
+                          : Nested element hierarchy
+        
+    section Semantic Mastery (30 minutes)
+        Meaningful Markup: Heading hierarchy
+                         : Screen reader navigation
+                         : Accessibility best practices
+        
+    section Advanced Concepts (1 hour)
+        HTML5 Features: Modern semantic elements
+                      : ARIA attributes
+                      : Performance considerations
+        
+    section Professional Skills (1 week)
+        Code Organization: File structure patterns
+                         : Maintainable markup
+                         : Team collaboration
+        
+    section Expert Level (1 month)
+        Modern Web Standards: Progressive enhancement
+                            : Cross-browser compatibility
+                            : HTML specification updates
+```
+  
+### 🛠️ آپ کا HTML ٹول کٹ خلاصہ  
 
-3. **جدید ویب ترقی**
-   - [ریسپانسیو ویب سائٹس بنانا](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) پر Microsoft Learn پر تحقیق کریں
-   - سمجھیں کہ HTML CSS اور JavaScript کے ساتھ کیسے انٹیگریٹ ہوتا ہے
-   - ویب کی کارکردگی اور SEO کے بہترین طریقوں کے بارے میں سیکھیں
+اس سبق کو مکمل کرنے کے بعد، آپ کے پاس:  
+- **دستاویز کی ساخت**: مکمل HTML5 بنیاد مناسب DOCTYPE کے ساتھ  
+- **معنوی مارک اپ**: معنی خیز ٹیگز جو رسائی اور SEO کو بہتر بناتے ہیں  
+- **تصویری انضمام**: مناسب فائل تنظیم اور alt متن کے طریقے  
+- **لے آؤٹ کنٹینرز**: وضاحتی کلاس ناموں کے ساتھ divs کا اسٹریٹجک استعمال  
+- **رسائی کی آگاہی**: اسکرین ریڈر نیویگیشن کی سمجھ  
+- **جدید معیارات**: موجودہ HTML5 طریقے اور ختم شدہ ٹیگ کا علم  
+- **پروجیکٹ کی بنیاد**: CSS اسٹائلنگ اور جاوا اسکرپٹ انٹرایکٹیویٹی کے لیے مضبوط بنیاد  
 
-**عکاسی کے سوالات:**
-- آپ نے کون سے ختم شدہ HTML ٹیگز دریافت کیے، اور وہ کیوں ہٹائے گئے؟
-- مستقبل کے ورژنز کے لیے کون سی نئی HTML خصوصیات تجویز کی جا رہی ہیں؟
-- سیمینٹک HTML ویب کی رسائی اور SEO میں کیسے مدد کرتا ہے؟
+**اگلے مراحل**: آپ کی HTML ساخت CSS اسٹائلنگ کے لیے تیار ہے! آپ نے جو معنوی بنیاد بنائی ہے وہ اگلے سبق کو سمجھنے میں بہت آسان بنا دے گی۔  
 
-## اسائنمنٹ
+## اسائنمنٹ  
 
-[اپنا HTML مشق کریں: بلاگ ماک اپ بنائیں](assignment.md)
+[اپنے HTML کی مشق کریں: بلاگ ماک اپ بنائیں](assignment.md)  
 
 ---
 
diff --git a/translations/ur/3-terrarium/2-intro-to-css/README.md b/translations/ur/3-terrarium/2-intro-to-css/README.md
index 72734987db..073e5698a1 100644
--- a/translations/ur/3-terrarium/2-intro-to-css/README.md
+++ b/translations/ur/3-terrarium/2-intro-to-css/README.md
@@ -1,46 +1,102 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "92c4431eac70670b0450b02c1d11279a",
-  "translation_date": "2025-10-22T14:53:29+00:00",
+  "original_hash": "e39f3a4e3bcccf94639e3af1248f8a4d",
+  "translation_date": "2025-11-03T13:15:52+00:00",
   "source_file": "3-terrarium/2-intro-to-css/README.md",
   "language_code": "ur"
 }
 -->
 # ٹیریریم پروجیکٹ حصہ 2: CSS کا تعارف
 
+```mermaid
+journey
+    title Your CSS Styling Journey
+    section Foundation
+      Link CSS file: 3: Student
+      Understand cascade: 4: Student
+      Learn inheritance: 4: Student
+    section Selectors
+      Element targeting: 4: Student
+      Class patterns: 5: Student
+      ID specificity: 5: Student
+    section Layout
+      Position elements: 4: Student
+      Create containers: 5: Student
+      Build terrarium: 5: Student
+    section Polish
+      Add visual effects: 5: Student
+      Responsive design: 5: Student
+      Glass reflections: 5: Student
+```
+
 ![CSS کا تعارف](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ur.png)
-> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی جانب سے
+> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
 
-یاد ہے آپ کا HTML ٹیریریم کتنا سادہ نظر آتا تھا؟ CSS وہ جگہ ہے جہاں ہم اس سادہ ڈھانچے کو بصری طور پر دلکش چیز میں تبدیل کرتے ہیں۔
+یاد ہے آپ کا HTML ٹیریریم کتنا سادہ نظر آ رہا تھا؟ CSS وہ جگہ ہے جہاں ہم اس سادہ ڈھانچے کو بصری طور پر دلکش چیز میں تبدیل کرتے ہیں۔
 
-اگر HTML کو ایک گھر کا فریم بنانے جیسا سمجھا جائے، تو CSS وہ سب کچھ ہے جو اسے گھر جیسا محسوس کراتا ہے - رنگ، فرنیچر کی ترتیب، روشنی، اور کمرے کیسے ایک دوسرے سے جڑے ہوئے ہیں۔ سوچیں کہ کیسے ورسائی کا محل ایک سادہ شکار کے لاج سے شروع ہوا، لیکن سجاوٹ اور ترتیب پر توجہ نے اسے دنیا کی سب سے شاندار عمارتوں میں سے ایک میں تبدیل کر دیا۔
+اگر HTML کو گھر کا فریم بنانے جیسا سمجھا جائے، تو CSS وہ سب کچھ ہے جو اسے گھر جیسا محسوس کراتا ہے - رنگ، فرنیچر کی ترتیب، روشنی، اور کمرے کیسے ایک دوسرے سے جڑے ہوئے ہیں۔ سوچیں کہ کیسے ورسائی کا محل ایک سادہ شکار کے لاج سے شروع ہوا، لیکن سجاوٹ اور ترتیب پر توجہ نے اسے دنیا کی سب سے شاندار عمارتوں میں تبدیل کر دیا۔
 
-آج، ہم آپ کے ٹیریریم کو فعال سے خوبصورت میں تبدیل کریں گے۔ آپ سیکھیں گے کہ عناصر کو بالکل صحیح جگہ پر کیسے رکھیں، مختلف اسکرین سائزز کے مطابق لے آؤٹ کو کیسے بنائیں، اور وہ بصری کشش پیدا کریں جو ویب سائٹس کو دلچسپ بناتی ہے۔
+آج، ہم آپ کے ٹیریریم کو فعال سے خوبصورت میں تبدیل کریں گے۔ آپ سیکھیں گے کہ عناصر کو بالکل صحیح جگہ پر کیسے رکھیں، مختلف اسکرین سائزز کے مطابق لے آؤٹ کو کیسے جوابدہ بنائیں، اور وہ بصری کشش پیدا کریں جو ویب سائٹس کو دلچسپ بناتی ہے۔
 
 اس سبق کے اختتام تک، آپ دیکھیں گے کہ کس طرح اسٹریٹجک CSS اسٹائلنگ آپ کے پروجیکٹ کو ڈرامائی طور پر بہتر بنا سکتی ہے۔ آئیے آپ کے ٹیریریم میں کچھ اسٹائل شامل کریں۔
 
+```mermaid
+mindmap
+  root((CSS Fundamentals))
+    Cascade
+      Specificity Rules
+      Inheritance
+      Priority Order
+      Conflict Resolution
+    Selectors
+      Element Tags
+      Classes (.class)
+      IDs (#id)
+      Combinators
+    Box Model
+      Margin
+      Border
+      Padding
+      Content
+    Layout
+      Positioning
+      Display Types
+      Flexbox
+      Grid
+    Visual Effects
+      Colors
+      Shadows
+      Transitions
+      Animations
+    Responsive Design
+      Media Queries
+      Flexible Units
+      Viewport Meta
+      Mobile First
+```
+
 ## پری لیکچر کوئز
 
 [پری لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/17)
 
 ## CSS کے ساتھ شروعات
 
-CSS کو اکثر "چیزوں کو خوبصورت بنانے" کے طور پر سمجھا جاتا ہے، لیکن یہ اس سے کہیں زیادہ وسیع مقصد رکھتا ہے۔ CSS فلم کے ڈائریکٹر ہونے جیسا ہے - آپ نہ صرف یہ کنٹرول کرتے ہیں کہ سب کچھ کیسا نظر آتا ہے، بلکہ یہ کیسے حرکت کرتا ہے، تعامل پر کیسے ردعمل دیتا ہے، اور مختلف حالات میں کیسے ڈھلتا ہے۔
+CSS کو اکثر "چیزوں کو خوبصورت بنانے" کے طور پر سمجھا جاتا ہے، لیکن یہ اس سے کہیں زیادہ وسیع مقصد رکھتا ہے۔ CSS فلم کے ڈائریکٹر ہونے جیسا ہے - آپ نہ صرف یہ کنٹرول کرتے ہیں کہ سب کچھ کیسا نظر آتا ہے، بلکہ یہ کیسے حرکت کرتا ہے، تعامل پر کیسے جواب دیتا ہے، اور مختلف حالات میں کیسے ڈھلتا ہے۔
 
-جدید CSS حیرت انگیز طور پر قابل ہے۔ آپ ایسا کوڈ لکھ سکتے ہیں جو خود بخود فون، ٹیبلٹ، اور ڈیسک ٹاپ کمپیوٹرز کے لے آؤٹ کو ایڈجسٹ کرتا ہے۔ آپ ہموار اینیمیشنز بنا سکتے ہیں جو صارفین کی توجہ کو ضرورت کے مطابق رہنمائی کرتے ہیں۔ جب سب کچھ ایک ساتھ کام کرتا ہے تو نتائج کافی متاثر کن ہو سکتے ہیں۔
+جدید CSS حیرت انگیز طور پر قابل ہے۔ آپ ایسا کوڈ لکھ سکتے ہیں جو خود بخود فونز، ٹیبلٹس، اور ڈیسک ٹاپ کمپیوٹرز کے لے آؤٹ کو ایڈجسٹ کرتا ہے۔ آپ ہموار اینیمیشنز بنا سکتے ہیں جو صارفین کی توجہ کو ضرورت کے مطابق گائیڈ کرتی ہیں۔ جب سب کچھ ایک ساتھ کام کرتا ہے تو نتائج کافی متاثر کن ہو سکتے ہیں۔
 
 > 💡 **پرو ٹپ**: CSS مسلسل نئے فیچرز اور صلاحیتوں کے ساتھ ترقی کر رہا ہے۔ پروڈکشن پروجیکٹس میں استعمال کرنے سے پہلے جدید CSS فیچرز کے لیے براؤزر سپورٹ کی تصدیق کرنے کے لیے ہمیشہ [CanIUse.com](https://caniuse.com) چیک کریں۔
 
 **اس سبق میں ہم یہ حاصل کریں گے:**
-- **مکمل** بصری ڈیزائن بنائیں گے اپنے ٹیریریم کے لیے جدید CSS تکنیکوں کا استعمال کرتے ہوئے
-- **بنیادی تصورات** جیسے cascade، inheritance، اور CSS selectors کو دریافت کریں گے
-- **جوابی پوزیشننگ** اور لے آؤٹ حکمت عملیوں کو نافذ کریں گے
-- **ٹریریم کنٹینر** کو CSS shapes اور اسٹائلنگ کے ذریعے بنائیں گے
+- **بنائیں گے** جدید CSS تکنیکوں کا استعمال کرتے ہوئے آپ کے ٹیریریم کے لیے مکمل بصری ڈیزائن
+- **دریافت کریں گے** بنیادی تصورات جیسے کہ کیسکیڈ، وراثت، اور CSS سلیکٹرز
+- **نافذ کریں گے** جوابدہ پوزیشننگ اور لے آؤٹ کی حکمت عملی
+- **بنائیں گے** CSS شیپس اور اسٹائلنگ کا استعمال کرتے ہوئے ٹیریریم کنٹینر
 
 ### پیشگی شرط
 
-آپ کو اپنے ٹیریریم کے لیے HTML ڈھانچہ مکمل کرنا چاہیے جو پچھلے سبق میں بنایا گیا تھا اور اسے اسٹائل کے لیے تیار ہونا چاہیے۔
+آپ کو اپنے ٹیریریم کے لیے HTML ڈھانچہ مکمل کر لینا چاہیے جو پچھلے سبق میں تھا اور اسے اسٹائل کے لیے تیار رکھنا چاہیے۔
 
 > 📺 **ویڈیو وسائل**: اس مددگار ویڈیو واک تھرو کو دیکھیں
 >
@@ -57,29 +113,29 @@ CSS کو اکثر "چیزوں کو خوبصورت بنانے" کے طور پر 
 ```
 
 **یہ کوڈ کیا کرتا ہے:**
-- **HTML اور CSS فائلز کے درمیان** کنکشن بناتا ہے
-- **براؤزر کو بتاتا ہے** کہ `style.css` سے اسٹائلز لوڈ اور لاگو کریں
-- **`rel="stylesheet"` ایٹریبیوٹ** استعمال کرتا ہے تاکہ یہ بتا سکے کہ یہ CSS فائل ہے
-- **فائل کا راستہ** `href="./style.css"` کے ساتھ حوالہ دیتا ہے
+- **بناتا ہے** آپ کے HTML اور CSS فائلز کے درمیان کنکشن
+- **بتاتا ہے** براؤزر کو کہ `style.css` سے اسٹائلز لوڈ اور اپلائی کریں
+- **استعمال کرتا ہے** `rel="stylesheet"` ایٹریبیوٹ یہ بتانے کے لیے کہ یہ CSS فائل ہے
+- **حوالہ دیتا ہے** فائل کے راستے کو `href="./style.css"` کے ساتھ
 
-## CSS Cascade کو سمجھنا
+## CSS کی کیسکیڈ کو سمجھنا
 
-کبھی سوچا کہ CSS کو "Cascading" Style Sheets کیوں کہا جاتا ہے؟ اسٹائلز ایک آبشار کی طرح نیچے گرتے ہیں، اور کبھی کبھی وہ ایک دوسرے سے متصادم ہوتے ہیں۔
+کبھی سوچا کہ CSS کو "Cascading" اسٹائل شیٹس کیوں کہا جاتا ہے؟ اسٹائلز ایک آبشار کی طرح نیچے گرتے ہیں، اور کبھی کبھی وہ ایک دوسرے سے ٹکراتے ہیں۔
 
-سوچیں کہ فوجی کمانڈ ڈھانچے کیسے کام کرتے ہیں - ایک جنرل آرڈر کہہ سکتا ہے "تمام فوجی سبز پہنیں"، لیکن آپ کی یونٹ کے لیے ایک مخصوص آرڈر کہہ سکتا ہے "تقریب کے لیے نیلے لباس پہنیں"۔ زیادہ مخصوص ہدایت کو ترجیح دی جاتی ہے۔ CSS اسی منطق کی پیروی کرتا ہے، اور اس درجہ بندی کو سمجھنا ڈیبگنگ کو بہت زیادہ قابل انتظام بناتا ہے۔
+سوچیں کہ فوجی کمانڈ ڈھانچے کیسے کام کرتے ہیں - ایک جنرل آرڈر کہہ سکتا ہے "تمام فوجی سبز پہنیں"، لیکن آپ کی یونٹ کے لیے ایک خاص آرڈر کہہ سکتا ہے "تقریب کے لیے نیلے لباس پہنیں"۔ زیادہ مخصوص ہدایت کو ترجیح دی جاتی ہے۔ CSS اسی منطق کی پیروی کرتا ہے، اور اس درجہ بندی کو سمجھنا ڈیبگنگ کو بہت زیادہ قابل انتظام بناتا ہے۔
 
-### Cascade Priority کے ساتھ تجربہ کرنا
+### کیسکیڈ ترجیح کے ساتھ تجربہ کرنا
 
-آئیے ایک اسٹائل تنازعہ پیدا کرکے cascade کو عمل میں دیکھتے ہیں۔ پہلے، اپنے `<h1>` ٹیگ میں ایک inline style شامل کریں:
+آئیے کیسکیڈ کو ایک اسٹائل تنازعہ بنا کر عمل میں دیکھتے ہیں۔ پہلے، اپنے `<h1>` ٹیگ میں ایک ان لائن اسٹائل شامل کریں:
 
 ```html
 <h1 style="color: red">My Terrarium</h1>
 ```
 
 **یہ کوڈ کیا کرتا ہے:**
-- **سرخ رنگ** کو براہ راست `<h1>` عنصر پر لاگو کرتا ہے inline اسٹائلنگ کا استعمال کرتے ہوئے
-- **`style` ایٹریبیوٹ** استعمال کرتا ہے تاکہ CSS کو براہ راست HTML میں شامل کیا جا سکے
-- **اس مخصوص عنصر کے لیے** سب سے زیادہ ترجیحی اسٹائل رول بناتا ہے
+- **لاگو کرتا ہے** ایک سرخ رنگ کو براہ راست `<h1>` عنصر پر ان لائن اسٹائلنگ کا استعمال کرتے ہوئے
+- **استعمال کرتا ہے** `style` ایٹریبیوٹ کو CSS کو براہ راست HTML میں شامل کرنے کے لیے
+- **بناتا ہے** اس مخصوص عنصر کے لیے سب سے زیادہ ترجیحی اسٹائل رول
 
 پھر، اپنے `style.css` فائل میں یہ رول شامل کریں:
 
@@ -89,29 +145,51 @@ h1 {
 }
 ```
 
-**اوپر دیے گئے میں ہم نے:**
-- **CSS رول** کی وضاحت کی جو تمام `<h1>` عناصر کو ہدف بناتا ہے
-- **ٹیکسٹ کا رنگ** نیلا مقرر کیا ایک بیرونی اسٹائل شیٹ کا استعمال کرتے ہوئے
-- **ایک کم ترجیحی رول** بنایا inline اسٹائلز کے مقابلے میں
+**اوپر میں ہم نے:**
+- **تعریف کی** ایک CSS رول جو تمام `<h1>` عناصر کو ہدف بناتا ہے
+- **سیٹ کیا** ٹیکسٹ کا رنگ نیلا ایک بیرونی اسٹائل شیٹ کا استعمال کرتے ہوئے
+- **بنایا** ایک کم ترجیحی رول ان لائن اسٹائلز کے مقابلے میں
 
 ✅ **علمی جانچ**: آپ کے ویب ایپ میں کون سا رنگ ظاہر ہوتا ہے؟ وہ رنگ کیوں جیتتا ہے؟ کیا آپ ایسے منظرنامے سوچ سکتے ہیں جہاں آپ اسٹائلز کو اوور رائیڈ کرنا چاہیں؟
 
+```mermaid
+flowchart TD
+    A["Browser encounters h1 element"] --> B{"Check for inline styles"}
+    B -->|Found| C["style='color: red'"] 
+    B -->|None| D{"Check for ID rules"}
+    C --> E["Apply red color (1000 points)"]
+    D -->|Found| F["#heading { color: green }"]
+    D -->|None| G{"Check for class rules"}
+    F --> H["Apply green color (100 points)"]
+    G -->|Found| I[".title { color: blue }"]
+    G -->|None| J{"Check element rules"}
+    I --> K["Apply blue color (10 points)"]
+    J -->|Found| L["h1 { color: purple }"]
+    J -->|None| M["Use browser default"]
+    L --> N["Apply purple color (1 point)"]
+    
+    style C fill:#ff6b6b
+    style F fill:#51cf66
+    style I fill:#339af0
+    style L fill:#9775fa
+```
+
 > 💡 **CSS ترجیحی ترتیب (سب سے زیادہ سے کم):**
-> 1. **Inline styles** (style attribute)
+> 1. **ان لائن اسٹائلز** (style ایٹریبیوٹ)
 > 2. **IDs** (#myId)
-> 3. **Classes** (.myClass) اور attributes
-> 4. **Element selectors** (h1, div, p)
+> 3. **کلاسز** (.myClass) اور ایٹریبیٹس
+> 4. **عنصر سلیکٹرز** (h1, div, p)
 > 5. **براؤزر ڈیفالٹس**
 
-## CSS Inheritance کو عمل میں دیکھنا
+## CSS وراثت کا عمل
 
-CSS inheritance جینیات کی طرح کام کرتا ہے - عناصر اپنے پیرنٹ عناصر سے کچھ پراپرٹیز وراثت میں حاصل کرتے ہیں۔ اگر آپ نے body عنصر پر فونٹ فیملی سیٹ کی ہے، تو اندر کا تمام ٹیکسٹ خود بخود وہی فونٹ استعمال کرتا ہے۔ یہ بالکل ویسا ہی ہے جیسے ہبسبرگ خاندان کی منفرد جبڑے کی ساخت نسلوں میں ظاہر ہوئی بغیر ہر فرد کے لیے مخصوص کیے۔
+CSS وراثت جینیات کی طرح کام کرتی ہے - عناصر اپنے پیرنٹ عناصر سے کچھ پراپرٹیز وراثت میں لیتے ہیں۔ اگر آپ نے باڈی عنصر پر فونٹ فیملی سیٹ کیا ہے، تو اندر کا تمام ٹیکسٹ خود بخود وہی فونٹ استعمال کرتا ہے۔ یہ بالکل ویسے ہی ہے جیسے ہابسبرگ خاندان کی منفرد جبڑے کی ساخت نسلوں میں ظاہر ہوئی بغیر ہر فرد کے لیے مخصوص کیے۔
 
-تاہم، ہر چیز وراثت میں نہیں ملتی۔ ٹیکسٹ اسٹائلز جیسے فونٹس اور رنگ وراثت میں ملتے ہیں، لیکن لے آؤٹ پراپرٹیز جیسے margins اور borders نہیں ملتے۔ جیسے بچے جسمانی خصوصیات وراثت میں حاصل کر سکتے ہیں لیکن اپنے والدین کے فیشن انتخاب نہیں۔
+تاہم، سب کچھ وراثت میں نہیں ملتا۔ ٹیکسٹ اسٹائلز جیسے فونٹس اور رنگ وراثت میں ملتے ہیں، لیکن لے آؤٹ پراپرٹیز جیسے مارجنز اور بارڈرز نہیں ملتے۔ جیسے بچے جسمانی خصوصیات وراثت میں لے سکتے ہیں لیکن اپنے والدین کے فیشن انتخاب نہیں۔
 
 ### فونٹ وراثت کا مشاہدہ
 
-آئیے وراثت کو عمل میں دیکھتے ہیں `<body>` عنصر پر فونٹ فیملی سیٹ کرکے:
+آئیے وراثت کو عمل میں دیکھتے ہیں باڈی عنصر پر فونٹ فیملی سیٹ کر کے:
 
 ```css
 body {
@@ -120,30 +198,45 @@ body {
 ```
 
 **یہاں کیا ہوتا ہے:**
-- **فونٹ فیملی** پورے صفحے کے لیے سیٹ کرتا ہے `<body>` عنصر کو ہدف بنا کر
-- **فونٹ اسٹیک** استعمال کرتا ہے بہتر براؤزر مطابقت کے لیے
-- **جدید سسٹم فونٹس** لاگو کرتا ہے جو مختلف آپریٹنگ سسٹمز پر اچھے لگتے ہیں
-- **یقین دہانی کراتا ہے** کہ تمام چائلڈ عناصر یہ فونٹ وراثت میں حاصل کریں جب تک کہ خاص طور پر اوور رائیڈ نہ کیا جائے
+- **سیٹ کرتا ہے** فونٹ فیملی پورے صفحے کے لیے باڈی عنصر کو ہدف بنا کر
+- **استعمال کرتا ہے** ایک فونٹ اسٹیک فال بیک آپشنز کے ساتھ بہتر براؤزر مطابقت کے لیے
+- **لاگو کرتا ہے** جدید سسٹم فونٹس جو مختلف آپریٹنگ سسٹمز پر بہترین نظر آتے ہیں
+- **یقینی بناتا ہے** کہ تمام چائلڈ عناصر یہ فونٹ وراثت میں لیتے ہیں جب تک کہ خاص طور پر اوور رائیڈ نہ کیا جائے
 
-اپنے براؤزر کے ڈیولپر ٹولز (F12) کھولیں، Elements ٹیب پر جائیں، اور اپنے `<h1>` عنصر کا معائنہ کریں۔ آپ دیکھیں گے کہ یہ فونٹ فیملی کو body سے وراثت میں حاصل کرتا ہے:
+اپنے براؤزر کے ڈیولپر ٹولز (F12) کھولیں، ایلیمنٹس ٹیب پر جائیں، اور اپنے `<h1>` عنصر کا معائنہ کریں۔ آپ دیکھیں گے کہ یہ باڈی سے فونٹ فیملی وراثت میں لیتا ہے:
 
-![وراثت میں ملا فونٹ](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ur.png)
+![وراثت میں لیا گیا فونٹ](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ur.png)
 
-✅ **تجربہ کا وقت**: `<body>` پر دیگر وراثت میں ملنے والی پراپرٹیز جیسے `color`, `line-height`, یا `text-align` سیٹ کرنے کی کوشش کریں۔ آپ کی ہیڈنگ اور دیگر عناصر کے ساتھ کیا ہوتا ہے؟
+✅ **تجربہ کا وقت**: باڈی پر دیگر وراثت میں ملنے والی پراپرٹیز جیسے `color`, `line-height`, یا `text-align` سیٹ کرنے کی کوشش کریں۔ آپ کے ہیڈنگ اور دیگر عناصر کے ساتھ کیا ہوتا ہے؟
 
 > 📝 **وراثت میں ملنے والی پراپرٹیز شامل ہیں**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
 >
 > **غیر وراثت میں ملنے والی پراپرٹیز شامل ہیں**: `margin`, `padding`, `border`, `width`, `height`, `position`
 
-## CSS Selectors کو مہارت سے سمجھنا
+### 🔄 **تعلیمی جائزہ**
+**CSS بنیادوں کی سمجھ**: سلیکٹرز پر جانے سے پہلے، یقینی بنائیں کہ آپ:
+- ✅ کیسکیڈ اور وراثت کے فرق کو بیان کر سکتے ہیں
+- ✅ پیش گوئی کر سکتے ہیں کہ کون سا اسٹائل مخصوصیت تنازعہ میں جیتے گا
+- ✅ شناخت کر سکتے ہیں کہ کون سی پراپرٹیز پیرنٹ عناصر سے وراثت میں ملتی ہیں
+- ✅ CSS فائلز کو HTML کے ساتھ صحیح طریقے سے جوڑ سکتے ہیں
+
+**فوری ٹیسٹ**: اگر آپ کے پاس یہ اسٹائلز ہیں، تو `<div class="special">` کے اندر ایک `<h1>` کا رنگ کیا ہوگا؟
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*جواب: سرخ (عنصر سلیکٹر براہ راست h1 کو ہدف بناتا ہے)*
+
+## CSS سلیکٹرز میں مہارت حاصل کرنا
 
-CSS selectors آپ کے لیے مخصوص عناصر کو اسٹائل کرنے کا طریقہ ہیں۔ یہ بالکل درست ہدایات دینے جیسا کام کرتے ہیں - "گھر" کہنے کے بجائے، آپ کہہ سکتے ہیں "نیلے دروازے والا گھر میپل اسٹریٹ پر۔"
+CSS سلیکٹرز آپ کے لیے مخصوص عناصر کو اسٹائل کرنے کا طریقہ ہیں۔ یہ بالکل درست ہدایات دینے جیسا کام کرتے ہیں - "گھر" کہنے کے بجائے، آپ کہہ سکتے ہیں "نیلے گھر جس کے دروازے پر سرخ رنگ ہے، میپل اسٹریٹ پر۔"
 
-CSS مختلف طریقے فراہم کرتا ہے مخصوص ہونے کے لیے، اور صحیح selector کا انتخاب کرنا کام کے لیے مناسب ٹول کا انتخاب کرنے جیسا ہے۔ کبھی آپ کو پورے محلے کے دروازے اسٹائل کرنے کی ضرورت ہوتی ہے، اور کبھی صرف ایک مخصوص دروازہ۔
+CSS مختلف طریقے فراہم کرتا ہے مخصوص ہونے کے لیے، اور صحیح سلیکٹر کا انتخاب کرنا کام کے لیے مناسب ٹول کا انتخاب کرنے جیسا ہے۔ کبھی آپ کو پورے محلے کے دروازے اسٹائل کرنے کی ضرورت ہوتی ہے، اور کبھی صرف ایک مخصوص دروازہ۔
 
-### عنصر کے سلیکٹرز (Tags)
+### عنصر سلیکٹرز (ٹیگز)
 
-عنصر کے سلیکٹرز HTML عناصر کو ان کے ٹیگ نام سے ہدف بناتے ہیں۔ یہ بنیادی اسٹائلز سیٹ کرنے کے لیے بہترین ہیں جو آپ کے صفحے پر وسیع پیمانے پر لاگو ہوتے ہیں:
+عنصر سلیکٹرز HTML عناصر کو ان کے ٹیگ نام سے ہدف بناتے ہیں۔ یہ بنیادی اسٹائلز سیٹ کرنے کے لیے بہترین ہیں جو آپ کے صفحے پر وسیع پیمانے پر لاگو ہوتے ہیں:
 
 ```css
 body {
@@ -161,16 +254,16 @@ h1 {
 ```
 
 **ان اسٹائلز کو سمجھنا:**
-- **پورے صفحے پر مستقل ٹائپوگرافی** سیٹ کرتا ہے `body` سلیکٹر کے ساتھ
-- **ڈیفالٹ براؤزر margins اور padding** ہٹاتا ہے بہتر کنٹرول کے لیے
-- **تمام ہیڈنگ عناصر کو اسٹائل کرتا ہے** رنگ، الائنمنٹ، اور اسپیسنگ کے ساتھ
-- **`rem` یونٹس استعمال کرتا ہے** قابل پیمائش، قابل رسائی فونٹ سائز کے لیے
+- **سیٹ کرتا ہے** پورے صفحے پر مستقل ٹائپوگرافی `body` سلیکٹر کے ساتھ
+- **ہٹاتا ہے** ڈیفالٹ براؤزر مارجنز اور پیڈنگ بہتر کنٹرول کے لیے
+- **اسٹائل کرتا ہے** تمام ہیڈنگ عناصر کو رنگ، الائنمنٹ، اور اسپیسنگ کے ساتھ
+- **استعمال کرتا ہے** `rem` یونٹس قابل پیمائش، قابل رسائی فونٹ سائز کے لیے
 
-جبکہ عنصر کے سلیکٹرز عمومی اسٹائلنگ کے لیے اچھے کام کرتے ہیں، آپ کو زیادہ مخصوص سلیکٹرز کی ضرورت ہوگی انفرادی اجزاء جیسے ٹیریریم میں پودوں کو اسٹائل کرنے کے لیے۔
+جبکہ عنصر سلیکٹرز عمومی اسٹائلنگ کے لیے اچھے کام کرتے ہیں، آپ کو زیادہ مخصوص سلیکٹرز کی ضرورت ہوگی انفرادی اجزاء کو اسٹائل کرنے کے لیے جیسے کہ آپ کے ٹیریریم میں پودے۔
 
 ### منفرد عناصر کے لیے ID سلیکٹرز
 
-ID سلیکٹرز `#` علامت استعمال کرتے ہیں اور عناصر کو مخصوص `id` attributes کے ساتھ ہدف بناتے ہیں۔ چونکہ IDs صفحے پر منفرد ہونے چاہیئے، یہ انفرادی، خاص عناصر کو اسٹائل کرنے کے لیے بہترین ہیں جیسے ہمارے بائیں اور دائیں پودوں کے کنٹینرز۔
+ID سلیکٹرز `#` علامت کا استعمال کرتے ہیں اور عناصر کو مخصوص `id` ایٹریبیٹس کے ساتھ ہدف بناتے ہیں۔ چونکہ IDs صفحے پر منفرد ہونے چاہیئے، یہ انفرادی، خاص عناصر کو اسٹائل کرنے کے لیے بہترین ہیں جیسے ہمارے بائیں اور دائیں پودے کے کنٹینرز۔
 
 آئیے اپنے ٹیریریم کے سائیڈ کنٹینرز کے لیے اسٹائلنگ بنائیں جہاں پودے رہیں گے:
 
@@ -199,11 +292,11 @@ ID سلیکٹرز `#` علامت استعمال کرتے ہیں اور عناص
 ```
 
 **یہ کوڈ کیا حاصل کرتا ہے:**
-- **کنٹینرز کو پوزیشن کرتا ہے** اسکرین کے بائیں اور دائیں کناروں پر `absolute` پوزیشننگ کا استعمال کرتے ہوئے
-- **`vh` یونٹس استعمال کرتا ہے** جوابی اونچائی کے لیے جو اسکرین کے سائز کے مطابق ڈھلتی ہے
-- **`box-sizing: border-box` لاگو کرتا ہے** تاکہ padding کل چوڑائی میں شامل ہو
-- **غیر ضروری `px` یونٹس ہٹاتا ہے** صفر ویلیوز سے صاف کوڈ کے لیے
-- **ایک ہلکا پس منظر رنگ سیٹ کرتا ہے** جو آنکھوں پر سخت گرے کے مقابلے میں آسان ہے
+- **پوزیشن کرتا ہے** کنٹینرز کو اسکرین کے کناروں پر `absolute` پوزیشننگ کا استعمال کرتے ہوئے
+- **استعمال کرتا ہے** `vh` (ویوپورٹ ہائٹ) یونٹس جوابدہ اونچائی کے لیے جو اسکرین سائز کے مطابق ڈھلتی ہے
+- **لاگو کرتا ہے** `box-sizing: border-box` تاکہ پیڈنگ کل چوڑائی میں شامل ہو
+- **ہٹاتا ہے** غیر ضروری `px` یونٹس صفر ویلیوز سے صاف کوڈ کے لیے
+- **سیٹ کرتا ہے** ایک ہلکا پس منظر رنگ جو آنکھوں پر سخت گرے کے مقابلے میں آسان ہے
 
 ✅ **کوڈ کوالٹی چیلنج**: نوٹ کریں کہ یہ CSS DRY (Don't Repeat Yourself) اصول کی خلاف ورزی کرتا ہے۔ کیا آپ اسے ID اور کلاس دونوں کا استعمال کرتے ہوئے ریفیکٹر کر سکتے ہیں؟
 
@@ -233,11 +326,11 @@ ID سلیکٹرز `#` علامت استعمال کرتے ہیں اور عناص
 }
 ```
 
-### کلاس سلیکٹرز کے لیے دوبارہ استعمال ہونے والے اسٹائلز
+### کلاس سلیکٹرز دوبارہ استعمال کے قابل اسٹائلز کے لیے
 
-کلاس سلیکٹرز `.` علامت استعمال کرتے ہیں اور بہترین ہیں جب آپ ایک جیسے اسٹائلز کو متعدد عناصر پر لاگو کرنا چاہتے ہیں۔ IDs کے برعکس، کلاسز آپ کے HTML میں دوبارہ استعمال کی جا سکتی ہیں، جو انہیں مستقل اسٹائلنگ پیٹرنز کے لیے مثالی بناتی ہیں۔
+کلاس سلیکٹرز `.` علامت کا استعمال کرتے ہیں اور بہترین ہیں جب آپ ایک ہی اسٹائلز کو متعدد عناصر پر لاگو کرنا چاہتے ہیں۔ IDs کے برعکس، کلاسز آپ کے HTML میں دوبارہ استعمال کی جا سکتی ہیں، جو انہیں مستقل اسٹائلنگ پیٹرنز کے لیے مثالی بناتی ہیں۔
 
-ہمارے ٹیریریم میں، ہر پودے کو ایک جیسا اسٹائلنگ کی ضرورت ہے لیکن انفرادی پوزیشننگ بھی چاہیے۔ ہم مشترکہ اسٹائلز کے لیے کلاسز اور منفرد پوزیشننگ کے لیے IDs کا مجموعہ استعمال کریں گے۔
+ہمارے ٹیریریم میں، ہر پودے کو اسی طرح کی اسٹائلنگ کی ضرورت ہے لیکن انفرادی پوزیشننگ بھی چاہیے۔ ہم مشترکہ اسٹائلز کے لیے کلاسز اور منفرد پوزیشننگ کے لیے IDs کا مجموعہ استعمال کریں گے۔
 
 **ہر پودے کے لیے HTML ڈھانچہ یہ ہے:**
 ```html
@@ -247,12 +340,12 @@ ID سلیکٹرز `#` علامت استعمال کرتے ہیں اور عناص
 ```
 
 **اہم عناصر کی وضاحت:**
-- **`class="plant-holder"` استعمال کرتا ہے** مستقل کنٹینر اسٹائلنگ کے لیے تمام پودوں میں
-- **`class="plant"` لاگو کرتا ہے** مشترکہ تصویر اسٹائلنگ اور رویے کے لیے
-- **منفرد `id="plant1"` شامل کرتا ہے** انفرادی پوزیشننگ اور جاوا اسکرپٹ تعامل کے لیے
-- **وضاحتی alt ٹیکسٹ فراہم کرتا ہے** اسکرین ریڈر کی رسائی کے لیے
+- **استعمال کرتا ہے** `class="plant-holder"` مستقل کنٹینر اسٹائلنگ کے لیے تمام پودوں میں
+- **لاگو کرتا ہے** `class="plant"` مشترکہ تصویر اسٹائلنگ اور رویے کے لیے
+- **شامل کرتا ہے** منفرد `id="plant1"` انفرادی پوزیشننگ اور جاوا اسکرپٹ تعامل کے لیے
+- **فراہم کرتا ہے** وضاحتی alt ٹیکسٹ اسکرین ریڈر کی رسائی کے لیے
 
-اب یہ اسٹائلز اپنے `style.css` فائل میں شامل کریں:
+اب یہ اسٹائلز اپنی `style.css` فائل میں شامل کریں:
 
 ```css
 .plant-holder {
@@ -274,13 +367,13 @@ ID سلیکٹرز `#` علامت استعمال کرتے ہیں اور عناص
 }
 ```
 
-**ان اسٹائلز کو توڑ کر سمجھنا:**
-- **کنٹینر کے لیے رشتہ دار پوزیشننگ بناتا ہے** پوزیشننگ سیاق و سباق قائم کرنے کے لیے
-- **ہر پودے کے کنٹینر کو 13% اونچائی پر سیٹ کرتا ہے** تاکہ تمام پودے عمودی طور پر فٹ ہوں بغیر اسکرولنگ کے
-- **کنٹینرز کو تھوڑا سا بائیں طرف منتقل کرتا ہے** تاکہ پودے اپنے کنٹینرز کے اندر بہتر مرکز میں ہوں
-- **پودوں کو جوابی طور پر اسکیل کرنے کی اجازت دیتا ہے** `max-width` اور `max-height` پراپرٹیز کے ساتھ
-- **`z-index` استعمال کرتا ہے** تاکہ پودے ٹیریریم کے دیگر عناصر کے اوپر تہہ ہوں
-- **ایک ہلکا hover اثر شامل کرتا ہے** CSS ٹرانزیشنز کے ساتھ بہتر صارف تعامل کے لیے
+**ان اسٹائلز کو سمجھنا:**
+- **بناتا ہے** کنٹینر کے لیے رشتہ دار پوزیشننگ تاکہ پوزیشننگ کا سیاق و سباق قائم ہو
+- **سیٹ کرتا ہے** ہر پودے کے کنٹینر کو 13% اونچائی پر، یہ یقینی بناتے ہوئے کہ تمام پودے عمودی طور پر فٹ ہوں بغیر اسکرولنگ کے
+- **تھوڑا سا بائیں طرف منتقل کرتا ہے** کنٹینرز کو تاکہ پودے اپنے کنٹینرز میں بہتر طور پر مرکز ہوں
+- **اجازت دیتا ہے** پودوں کو جوابدہ طور پر اسکیل کرنے کی `max-width` اور `max-height` پراپرٹیز کے ساتھ
+- **استعمال کرتا ہے** `z-index` پودوں کو ٹیریریم میں دیگر عناصر کے اوپر تہہ کرنے کے لیے
+- **شامل کرتا ہے** ایک ہلکا ہور اثر CSS ٹرانزیشنز کے ساتھ بہتر صارف تعامل کے لیے
 
 ✅ **تنقیدی سوچ**: ہمیں `.plant-holder` اور `.plant` سلیکٹرز دونوں کی ضرورت کیوں ہے؟ کیا ہوگا اگر ہم صرف ایک استعمال کرنے کی کوشش کریں؟
 
@@ -288,52 +381,79 @@ ID سلیکٹرز `#` علامت استعمال کرتے ہیں اور عناص
 
 ## CSS پوزیشننگ کو سمجھنا
 
-CSS پوزیشننگ ایک کھیل کے اسٹیج ڈائریکٹر ہونے جیسا ہے - آپ ہدایت دیتے ہیں کہ ہر اداکار کہاں کھڑا ہو اور اسٹیج پر کیسے حرکت کرے۔ کچھ اداکار معیاری ترتیب کی پیروی کرتے ہیں، جبکہ دوسروں کو ڈرامائی اثر کے لیے مخصوص پوزیشننگ کی ضرورت ہوتی ہے۔
+CSS پوزیشننگ اسٹیج ڈائریکٹر ہونے جیسا ہے - آپ ہدایت دیتے ہیں کہ ہر اداکار کہاں کھڑا ہو اور اسٹیج پر کیسے حرکت کرے۔ کچھ اداکار معیاری ترتیب کی پیروی کرتے ہیں، جبکہ دوسروں کو ڈرامائی اثر کے لیے مخصوص پوزیشننگ کی ضرورت ہوتی ہے۔
 
-ایک بار جب آپ پوزیشننگ کو سمجھ لیں، بہت سے لے آؤٹ چیلنجز قابل انتظام ہو جاتے ہیں۔ کیا آپ کو ایک نیویگیشن بار کی ضرورت ہے جو صارفین کے اسکرول کرتے وقت اوپر رہتا ہے؟ پوزیشننگ اس کا انتظام کرتی ہے۔ کیا آپ کو ایک ٹول ٹپ چاہیے جو مخصوص جگہ پر ظاہر ہو؟ یہ بھی پوزیشننگ ہے۔
+ایک بار جب آپ پوزیشننگ کو سمجھ لیتے ہیں، بہت سے لے آؤٹ چیلنجز قابل انتظام ہو جاتے ہیں۔ کیا آپ کو ایک نیویگیشن بار کی ضرورت ہے جو صارفین کے اسکرول کرتے وقت اوپر رہے؟ پوزیشننگ اس کا انتظام کرتی ہے۔ کیا آپ کو ایک ٹول ٹپ چاہیے جو کسی مخصوص مقام پر ظاہر ہو؟ یہ بھی پوزیشننگ ہے۔
 
 ### پانچ پوزیشن ویلیوز
 
+```mermaid
+quadrantChart
+    title CSS Positioning Strategy
+    x-axis Document Flow --> Removed from Flow
+    y-axis Static Position --> Precise Control
+    quadrant-1 Absolute
+    quadrant-2 Fixed
+    quadrant-3 Static
+    quadrant-4 Sticky
+    
+    Static: [0.2, 0.2]
+    Relative: [0.3, 0.6]
+    Absolute: [0.8, 0.8]
+    Fixed: [0.9, 0.7]
+    Sticky: [0.5, 0.9]
+```
+
 | پوزیشن ویلیو | رویہ | استعمال کا کیس |
 |----------------|----------|----------|
-| `static` | ڈیفالٹ فلو، top/left/right/bottom کو نظر انداز کرتا ہے | عام دستاویز لے آؤٹ |
-| `relative` | اپنی معمول کی پوزیشن کے لحاظ سے پوزیشنڈ | چھوٹے ایڈجسٹمنٹس، پوزیشننگ سیاق و سباق بنانا |
-| `absolute` | قریب ترین پوزیشنڈ ancestor کے لحاظ سے پوزیشنڈ | درست جگہ، overlays |
-| `fixed` | viewport کے لحاظ سے پوزیشنڈ | نیویگیشن بارز، فلوٹنگ عناصر |
-| `sticky` | اسکرول کے لحاظ سے relative اور fixed کے درمیان سوئچ کرتا ہے | اسکرول کرتے وقت چپکنے والے ہیڈرز |
-
-### ہمارے ٹیریریم میں پوزیشننگ
-
-ہمارا ٹیریریم مطلوبہ لے آؤٹ بنانے کے لیے پوزیشننگ کی اقسام کا اسٹریٹجک مجموعہ استعمال کرتا ہے:
-
-```css
-/* Container positioning */
-.container {
-  position: absolute; /* Removes from normal flow */
-  /* ... other styles ... */
-}
-
-/* Plant holder positioning */
-.plant-holder {
-  position: relative; /* Creates positioning context */
-  /* ... other styles ... */
-}
-
-/* Plant positioning */
-.plant {
-  position: absolute; /* Allows precise placement within holder */
-  /* ... other styles ... */
-}
+| `static` | ڈیفالٹ فلو، اوپر/بائیں/دائیں/نیچے کو نظر انداز کرتا ہے | نارمل دستاویز لے آؤٹ |
+| `relative` | اپنی نارمل پوزیشن کے نسبت پوزیشنڈ | چھوٹی ایڈجسٹمنٹس، پوزیشننگ سیاق و سب
+- اگر `.plant-holder` `absolute` کی بجائے `relative` استعمال کرے تو لے آؤٹ کیسے تبدیل ہوگا؟
+- جب آپ `.plant` کو `relative` پوزیشننگ میں تبدیل کرتے ہیں تو کیا ہوتا ہے؟
+
+### 🔄 **تعلیمی جائزہ**
+**CSS پوزیشننگ کی مہارت**: اپنی سمجھ کو جانچنے کے لیے توقف کریں:
+- ✅ کیا آپ وضاحت کر سکتے ہیں کہ ڈریگ اینڈ ڈراپ کے لیے پودوں کو `absolute` پوزیشننگ کی ضرورت کیوں ہے؟
+- ✅ کیا آپ سمجھتے ہیں کہ `relative` کنٹینرز پوزیشننگ کا سیاق و سباق کیسے بناتے ہیں؟
+- ✅ سائیڈ کنٹینرز `absolute` پوزیشننگ کیوں استعمال کرتے ہیں؟
+- ✅ اگر آپ پوزیشن کے اعلانات کو مکمل طور پر ہٹا دیں تو کیا ہوگا؟
+
+**حقیقی دنیا کا تعلق**: سوچیں کہ CSS پوزیشننگ حقیقی دنیا کے لے آؤٹ کی عکاسی کیسے کرتی ہے:
+- **Static**: شیلف پر کتابیں (قدرتی ترتیب)
+- **Relative**: کتاب کو تھوڑا سا حرکت دینا لیکن اس کی جگہ برقرار رکھنا
+- **Absolute**: کسی صفحے نمبر پر بک مارک رکھنا
+- **Fixed**: ایک اسٹکی نوٹ جو صفحات پلٹنے پر بھی نظر آتا ہے
+
+## CSS کے ساتھ ٹیریریم بنانا
+
+اب ہم صرف CSS کا استعمال کرتے ہوئے ایک شیشے کا جار بنائیں گے - کوئی تصاویر یا گرافکس سافٹ ویئر استعمال نہیں ہوگا۔
+
+پوزیشننگ اور شفافیت کے ذریعے حقیقت پسندانہ شیشے، سائے، اور گہرائی کے اثرات بنانا CSS کی بصری صلاحیتوں کو ظاہر کرتا ہے۔ یہ تکنیک اس طرح کی ہے جیسے Bauhaus تحریک کے معماروں نے سادہ جیومیٹرک شکلوں کا استعمال کرتے ہوئے پیچیدہ، خوبصورت ڈھانچے بنائے۔ ایک بار جب آپ ان اصولوں کو سمجھ لیں گے، تو آپ بہت سے ویب ڈیزائنز کے پیچھے CSS تکنیک کو پہچان سکیں گے۔
+
+```mermaid
+flowchart LR
+    A[Jar Top] --> E[Complete Terrarium]
+    B[Jar Walls] --> E
+    C[Dirt Layer] --> E
+    D[Jar Bottom] --> E
+    F[Glass Effects] --> E
+    
+    A1["50% width<br/>5% height<br/>Top position"] --> A
+    B1["60% width<br/>80% height<br/>Rounded corners<br/>0.5 opacity"] --> B
+    C1["60% width<br/>5% height<br/>Dark brown<br/>Bottom layer"] --> C
+    D1["50% width<br/>1% height<br/>Bottom position"] --> D
+    F1["Subtle shadows<br/>Transparency<br/>Z-index layering"] --> F
+    
+    style E fill:#d1e1df,stroke:#3a241d
+    style A fill:#e8f5e8
+    style B fill:#e8f5e8
+    style C fill:#8B4513
+    style D fill:#e8f5e8
 ```
 
-**پوزیشننگ حکمت عملی کو سمجھنا:**
-- **Absolute کنٹینرز** عام دستاویز فلو سے ہٹا دیے جاتے ہیں اور اسکرین کے کناروں پر پن کیے جاتے ہیں
-- **Relative plant holders** پوزیشننگ سیاق و سباق بناتے ہیں جبکہ دستاویز فلو میں رہتے ہیں
-- **Absolute plants** کو ان کے relative کنٹینرز کے اندر درست طریقے سے پوزیشن کیا جا سکتا ہے
-- **یہ مجموعہ** پودوں کو عمودی طور پر اسٹیک کرنے کی اجازت دیتا ہے جبکہ انفرادی طور پر پوزیشن ایبل ہوتا ہے
+### شیشے کے جار کے اجزاء بنانا
 
-> 🎯 **یہ کیوں اہم ہے**: `plant` عناصر کو اگلے سبق میں ڈریگ ایبل بنانے کے لیے absolute پوزیشننگ کی ضرورت ہے۔ Absolute پوزیشننگ انہیں عام لے آؤٹ فلو سے ہٹا دیتی ہے، ڈریگ
-آئیے ٹیریریم جار کو ایک ایک حصہ بنا کر تیار کریں۔ ہر حصہ مطلق پوزیشننگ اور فیصد پر مبنی سائزنگ کا استعمال کرتا ہے تاکہ ریسپانسیو ڈیزائن بنایا جا سکے:
+آئیے ٹیریریم جار کو ٹکڑوں میں بنائیں۔ ہر حصہ `absolute` پوزیشننگ اور فیصد پر مبنی سائزنگ کا استعمال کرتا ہے تاکہ ریسپانسیو ڈیزائن بنایا جا سکے:
 
 ```css
 .jar-walls {
@@ -385,58 +505,70 @@ CSS پوزیشننگ ایک کھیل کے اسٹیج ڈائریکٹر ہونے 
 }
 ```
 
-**ٹیریریم کی تعمیر کو سمجھنا:**
-- **استعمال کرتا ہے** فیصد پر مبنی ڈائمینشنز تاکہ تمام اسکرین سائزز پر ریسپانسیو اسکیلنگ ہو سکے
-- **پوزیشن کرتا ہے** عناصر کو مطلق طور پر تاکہ انہیں درست طریقے سے اسٹیک اور الائن کیا جا سکے
-- **لگاتا ہے** مختلف اوپیسٹی ویلیوز تاکہ شیشے کی شفافیت کا اثر پیدا ہو
+**ٹریریریم کی تعمیر کو سمجھنا:**
+- **استعمال کرتا ہے** فیصد پر مبنی طول و عرض تاکہ تمام اسکرین سائزز پر ریسپانسیو اسکیلنگ ہو سکے
+- **پوزیشن کرتا ہے** عناصر کو بالکل اسٹیک اور سیدھ میں لانے کے لیے
+- **لگاتا ہے** مختلف شفافیت کی قدریں تاکہ شیشے کی شفافیت کا اثر پیدا ہو
 - **نافذ کرتا ہے** `z-index` لیئرنگ تاکہ پودے جار کے اندر نظر آئیں
-- **شامل کرتا ہے** ہلکا باکس شیڈو اور نفیس بارڈر-ریڈیئس تاکہ زیادہ حقیقت پسندانہ شکل دی جا سکے
+- **شامل کرتا ہے** ہلکا سا باکس شیڈو اور بہتر بارڈر ریڈیئس تاکہ زیادہ حقیقت پسندانہ ظاہری شکل ہو
 
 ### فیصد کے ساتھ ریسپانسیو ڈیزائن
 
-نوٹ کریں کہ تمام ڈائمینشنز فیصد کا استعمال کرتے ہیں بجائے فکسڈ پکسل ویلیوز کے:
+نوٹ کریں کہ تمام طول و عرض فکسڈ پکسل ویلیوز کی بجائے فیصد استعمال کرتے ہیں:
 
 **یہ کیوں اہم ہے:**
-- **یقینی بناتا ہے** کہ ٹیریریم کسی بھی اسکرین سائز پر تناسبی طور پر اسکیل کرے
+- **یقینی بناتا ہے** کہ ٹیریریم کسی بھی اسکرین سائز پر تناسب سے اسکیل کرے
 - **برقرار رکھتا ہے** جار کے اجزاء کے درمیان بصری تعلقات
 - **فراہم کرتا ہے** موبائل فونز سے لے کر بڑے ڈیسک ٹاپ مانیٹرز تک ایک مستقل تجربہ
-- **اجازت دیتا ہے** ڈیزائن کو بغیر بصری ترتیب کو توڑے ایڈجسٹ کرنے کی
+- **ڈیزائن کو** بغیر بصری لے آؤٹ کو توڑے ڈھالنے دیتا ہے
 
 ### CSS یونٹس کا استعمال
 
-ہم بارڈر-ریڈیئس کے لیے `rem` یونٹس استعمال کر رہے ہیں، جو روٹ فونٹ سائز کے مطابق اسکیل کرتے ہیں۔ یہ زیادہ قابل رسائی ڈیزائنز بناتا ہے جو صارف کے فونٹ ترجیحات کا احترام کرتے ہیں۔ [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) کے بارے میں مزید جانیں آفیشل اسپیسفیکیشن میں۔
+ہم `rem` یونٹس کو بارڈر ریڈیئس کے لیے استعمال کر رہے ہیں، جو روٹ فونٹ سائز کے مطابق اسکیل کرتے ہیں۔ یہ زیادہ قابل رسائی ڈیزائنز بناتا ہے جو صارف کے فونٹ کی ترجیحات کا احترام کرتے ہیں۔ [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) کے بارے میں مزید جانیں۔
 
-✅ **بصری تجربہ کاری**: ان ویلیوز کو تبدیل کریں اور اثرات کا مشاہدہ کریں:
-- جار کی اوپیسٹی کو 0.5 سے 0.8 میں تبدیل کریں – شیشے کی شکل پر اس کا کیا اثر پڑتا ہے؟
+✅ **بصری تجربہ**: ان اقدار کو تبدیل کرنے کی کوشش کریں اور اثرات کا مشاہدہ کریں:
+- جار کی شفافیت کو 0.5 سے 0.8 میں تبدیل کریں – شیشے کی ظاہری شکل پر اس کا کیا اثر پڑتا ہے؟
 - مٹی کے رنگ کو `#3a241d` سے `#8B4513` میں ایڈجسٹ کریں – اس کا بصری اثر کیا ہوتا ہے؟
 - مٹی کے `z-index` کو 2 میں تبدیل کریں – لیئرنگ پر کیا اثر پڑتا ہے؟
 
+### 🔄 **تعلیمی جائزہ**
+**CSS بصری ڈیزائن کی سمجھ**: بصری CSS کو سمجھنے کی تصدیق کریں:
+- ✅ فیصد پر مبنی طول و عرض ریسپانسیو ڈیزائن کیسے بناتے ہیں؟
+- ✅ شفافیت شیشے کی شفافیت کا اثر کیسے پیدا کرتی ہے؟
+- ✅ `z-index` عناصر کی لیئرنگ میں کیا کردار ادا کرتا ہے؟
+- ✅ بارڈر ریڈیئس کی قدریں جار کی شکل کیسے بناتی ہیں؟
+
+**ڈیزائن اصول**: نوٹ کریں کہ ہم سادہ شکلوں سے پیچیدہ بصری بنا رہے ہیں:
+1. **مستطیلیں** → **گول مستطیلیں** → **جار کے اجزاء**
+2. **فلیٹ رنگ** → **شفافیت** → **شیشے کا اثر**
+3. **انفرادی عناصر** → **لیئرڈ کمپوزیشن** → **3D ظاہری شکل**
+
 ---
 
 ## GitHub Copilot Agent Challenge 🚀
 
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+Agent mode کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** ایک CSS اینیمیشن بنائیں جو ٹیریریم کے پودوں کو ہلکی ہوا کے اثر کی طرح آہستہ آہستہ جھومنے دے۔ یہ آپ کو CSS اینیمیشنز، ٹرانسفارمز، اور کی فریمز کی مشق کرنے میں مدد دے گا جبکہ آپ کے ٹیریریم کی بصری کشش کو بڑھائے گا۔
+**تفصیل:** ایک CSS اینیمیشن بنائیں جو ٹیریریم کے پودوں کو آہستہ آہستہ جھولنے کا اثر دے، قدرتی ہوا کی نقل کرتے ہوئے۔ یہ آپ کو CSS اینیمیشنز، ٹرانسفارمز، اور کی فریمز کی مشق کرنے میں مدد دے گا جبکہ آپ کے ٹیریریم کی بصری کشش کو بڑھائے گا۔
 
-**پرومپٹ:** CSS کی فریم اینیمیشنز شامل کریں تاکہ ٹیریریم کے پودے آہستہ آہستہ ایک طرف سے دوسری طرف جھومیں۔ ایک جھومنے والی اینیمیشن بنائیں جو ہر پودے کو تھوڑا سا (2-3 ڈگری) بائیں اور دائیں گھمائے، جس کی مدت 3-4 سیکنڈ ہو، اور اسے `.plant` کلاس پر لاگو کریں۔ یقینی بنائیں کہ اینیمیشن لامتناہی طور پر لوپ کرے اور قدرتی حرکت کے لیے ایزنگ فنکشن ہو۔
+**پرومپٹ:** CSS کی فریم اینیمیشنز شامل کریں تاکہ ٹیریریم کے پودے آہستہ آہستہ ایک طرف سے دوسری طرف جھولیں۔ ایک جھولنے والی اینیمیشن بنائیں جو ہر پودے کو تھوڑا سا (2-3 ڈگری) بائیں اور دائیں گھمائے، جس کی مدت 3-4 سیکنڈ ہو، اور اسے `.plant` کلاس پر لاگو کریں۔ یقینی بنائیں کہ اینیمیشن لامتناہی لوپ کرے اور قدرتی حرکت کے لیے ایک ایزنگ فنکشن ہو۔
 
-[ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
 
 ## 🚀 چیلنج: شیشے کی عکاسی شامل کرنا
 
 کیا آپ اپنے ٹیریریم میں حقیقت پسندانہ شیشے کی عکاسی شامل کرنے کے لیے تیار ہیں؟ یہ تکنیک ڈیزائن میں گہرائی اور حقیقت پسندی کا اضافہ کرے گی۔
 
-آپ ہلکے سفید یا روشنی کے رنگ کے بیضوی شکلیں بنائیں گے جو شیشے کی عکاسی کو ظاہر کریں۔ یہ طریقہ بالکل ویسا ہی ہے جیسے رینیسنس کے مصور جیسے جان وان آئیک نے روشنی اور عکاسی کا استعمال کیا تاکہ پینٹ کیے گئے شیشے کو تین جہتی ظاہر کیا جا سکے۔ آپ کا مقصد یہ ہے:
+آپ ہلکے سفید یا ہلکے رنگ کے بیضوی شکلیں بنائیں گے جو شیشے کی عکاسی کی نقل کرتے ہیں۔ یہ طریقہ اس طرح ہے جیسے Renaissance کے مصور جیسے Jan van Eyck نے روشنی اور عکاسی کا استعمال کرتے ہوئے پینٹ شدہ شیشے کو تین جہتی ظاہر کیا۔ آپ کا مقصد یہ ہے:
 
 ![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ur.png)
 
 **آپ کا چیلنج:**
-- **بنائیں** ہلکے سفید یا روشنی کے رنگ کے بیضوی شکلیں شیشے کی عکاسی کے لیے
+- **بنائیں** ہلکے سفید یا روشنی والے بیضوی شکلیں شیشے کی عکاسی کے لیے
 - **انہیں** جار کے بائیں جانب اسٹریٹجک طور پر پوزیشن کریں
-- **لگائیں** مناسب اوپیسٹی اور بلر ایفیکٹس حقیقت پسندانہ روشنی کی عکاسی کے لیے
+- **مناسب** شفافیت اور بلر اثرات لگائیں تاکہ روشنی کی حقیقت پسندانہ عکاسی ہو
 - **استعمال کریں** `border-radius` تاکہ قدرتی، بلبلے جیسی شکلیں بن سکیں
-- **تجربہ کریں** گریڈینٹس یا باکس شیڈوز کے ساتھ حقیقت پسندی کو بڑھانے کے لیے
+- **گریڈینٹس یا باکس شیڈوز کے ساتھ تجربہ کریں** تاکہ حقیقت پسندی کو بڑھایا جا سکے
 
 ## لیکچر کے بعد کا کوئز
 
@@ -444,24 +576,120 @@ CSS پوزیشننگ ایک کھیل کے اسٹیج ڈائریکٹر ہونے 
 
 ## اپنے CSS علم کو بڑھائیں
 
-CSS شروع میں پیچیدہ محسوس ہو سکتا ہے، لیکن ان بنیادی تصورات کو سمجھنا آپ کو مزید جدید تکنیکوں کے لیے مضبوط بنیاد فراہم کرتا ہے۔
+CSS شروع میں پیچیدہ محسوس ہو سکتا ہے، لیکن ان بنیادی تصورات کو سمجھنا آپ کو مزید جدید تکنیکوں کے لیے ایک مضبوط بنیاد فراہم کرتا ہے۔
 
 **آپ کے اگلے CSS سیکھنے کے علاقے:**
 - **Flexbox** - عناصر کی سیدھ اور تقسیم کو آسان بناتا ہے
-- **CSS Grid** - پیچیدہ لے آؤٹس بنانے کے لیے طاقتور ٹولز فراہم کرتا ہے
-- **CSS Variables** - تکرار کو کم کرتا ہے اور مینٹین ایبلٹی کو بہتر بناتا ہے
+- **CSS Grid** - پیچیدہ لے آؤٹ بنانے کے لیے طاقتور ٹولز فراہم کرتا ہے
+- **CSS Variables** - تکرار کو کم کرتا ہے اور برقرار رکھنے کی صلاحیت کو بہتر بناتا ہے
 - **Responsive design** - یقینی بناتا ہے کہ سائٹس مختلف اسکرین سائزز پر اچھی طرح کام کریں
 
-### انٹرایکٹو لرننگ ریسورسز
+### انٹرایکٹو سیکھنے کے وسائل
 
 ان تصورات کو ان دلچسپ، عملی گیمز کے ساتھ مشق کریں:
-- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Flexbox کو تفریحی چیلنجز کے ذریعے سیکھیں
-- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid کو ورچوئل گاجروں کو اگا کر سیکھیں
-- 🎯 [CSS Battle](https://cssbattle.dev/) - کوڈنگ چیلنجز کے ساتھ اپنے CSS مہارتوں کو آزمائیں
+- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - تفریحی چیلنجز کے ذریعے Flexbox میں مہارت حاصل کریں
+- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid سیکھیں اور ورچوئل گاجریں اگائیں
+- 🎯 [CSS Battle](https://cssbattle.dev/) - کوڈنگ چیلنجز کے ساتھ اپنی CSS مہارت کو آزمائیں
 
 ### اضافی سیکھنا
 
-CSS کے بنیادی اصولوں کے لیے، یہ Microsoft Learn ماڈیول مکمل کریں: [اپنے HTML ایپ کو CSS کے ساتھ اسٹائل کریں](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+CSS کے بنیادی اصولوں کے لیے یہ Microsoft Learn ماڈیول مکمل کریں: [اپنے HTML ایپ کو CSS کے ساتھ اسٹائل کریں](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **آپ اگلے 5 منٹ میں کیا کر سکتے ہیں**
+- [ ] DevTools کھولیں اور کسی بھی ویب سائٹ پر CSS اسٹائلز کو Elements پینل کے ذریعے دیکھیں
+- [ ] ایک سادہ CSS فائل بنائیں اور اسے HTML صفحے سے لنک کریں
+- [ ] مختلف طریقوں سے رنگ تبدیل کرنے کی کوشش کریں: hex، RGB، اور نامزد رنگ
+- [ ] باکس ماڈل کی مشق کریں اور padding اور margin کو div میں شامل کریں
+
+### 🎯 **آپ اس گھنٹے میں کیا حاصل کر سکتے ہیں**
+- [ ] لیکچر کے بعد کا کوئز مکمل کریں اور CSS کے بنیادی اصولوں کا جائزہ لیں
+- [ ] اپنے HTML صفحے کو فونٹس، رنگوں، اور اسپیسنگ کے ساتھ اسٹائل کریں
+- [ ] Flexbox یا Grid کا استعمال کرتے ہوئے ایک سادہ لے آؤٹ بنائیں
+- [ ] CSS ٹرانزیشنز کے ساتھ ہموار اثرات کی مشق کریں
+- [ ] میڈیا کوئریز کے ساتھ ریسپانسیو ڈیزائن کی مشق کریں
+
+### 📅 **آپ کی ہفتہ بھر کی CSS مہم**
+- [ ] تخلیقی انداز کے ساتھ ٹیریریم اسٹائلنگ اسائنمنٹ مکمل کریں
+- [ ] CSS Grid میں مہارت حاصل کریں اور فوٹو گیلری لے آؤٹ بنائیں
+- [ ] CSS اینیمیشنز سیکھیں اور اپنے ڈیزائنز کو زندگی بخشیں
+- [ ] Sass یا Less جیسے CSS پری پروسیسرز کو دریافت کریں
+- [ ] ڈیزائن کے اصولوں کا مطالعہ کریں اور انہیں اپنے CSS میں لاگو کریں
+- [ ] دلچسپ ڈیزائنز کا تجزیہ کریں اور انہیں آن لائن دوبارہ بنائیں
+
+### 🌟 **آپ کا ماہانہ ڈیزائن ماسٹری**
+- [ ] ایک مکمل ریسپانسیو ویب سائٹ ڈیزائن سسٹم بنائیں
+- [ ] CSS-in-JS یا Tailwind جیسے یوٹیلیٹی فرسٹ فریم ورک سیکھیں
+- [ ] CSS میں بہتری کے ساتھ اوپن سورس پروجیکٹس میں تعاون کریں
+- [ ] جدید CSS تصورات جیسے CSS کسٹم پراپرٹیز اور کنٹینمنٹ میں مہارت حاصل کریں
+- [ ] ماڈیولر CSS کے ساتھ دوبارہ قابل استعمال کمپوننٹ لائبریریاں بنائیں
+- [ ] CSS سیکھنے والے دوسروں کی رہنمائی کریں اور ڈیزائن کا علم شیئر کریں
+
+## 🎯 آپ کا CSS ماسٹری ٹائم لائن
+
+```mermaid
+timeline
+    title CSS Learning Progression
+    
+    section Foundation (10 minutes)
+        File Connection: Link CSS to HTML
+                       : Understand cascade rules
+                       : Learn inheritance basics
+        
+    section Selectors (15 minutes)
+        Targeting Elements: Element selectors
+                          : Class patterns
+                          : ID specificity
+                          : Combinators
+        
+    section Box Model (20 minutes)
+        Layout Fundamentals: Margin and padding
+                           : Border properties
+                           : Content sizing
+                           : Box-sizing behavior
+        
+    section Positioning (25 minutes)
+        Element Placement: Static vs relative
+                         : Absolute positioning
+                         : Z-index layering
+                         : Responsive units
+        
+    section Visual Design (30 minutes)
+        Styling Mastery: Colors and opacity
+                       : Shadows and effects
+                       : Transitions
+                       : Transform properties
+        
+    section Responsive Design (45 minutes)
+        Multi-Device Support: Media queries
+                            : Flexible layouts
+                            : Mobile-first approach
+                            : Viewport optimization
+        
+    section Advanced Techniques (1 week)
+        Modern CSS: Flexbox layouts
+                  : CSS Grid systems
+                  : Custom properties
+                  : Animation keyframes
+        
+    section Professional Skills (1 month)
+        CSS Architecture: Component patterns
+                        : Maintainable code
+                        : Performance optimization
+                        : Cross-browser compatibility
+```
+
+### 🛠️ آپ کا CSS ٹول کٹ خلاصہ
+
+اس سبق کو مکمل کرنے کے بعد، آپ کے پاس ہے:
+- **Cascade Understanding**: اسٹائلز کیسے وراثت میں ملتے ہیں اور ایک دوسرے کو اووررائیڈ کرتے ہیں
+- **Selector Mastery**: عناصر، کلاسز، اور IDs کے ساتھ درست ہدف بنانا
+- **Positioning Skills**: عناصر کی اسٹریٹجک جگہ اور لیئرنگ
+- **Visual Design**: شیشے کے اثرات، سائے، اور شفافیت بنانا
+- **Responsive Techniques**: فیصد پر مبنی لے آؤٹ جو کسی بھی اسکرین پر ڈھلتے ہیں
+- **Code Organization**: صاف، برقرار رکھنے کے قابل CSS ڈھانچہ
+- **Modern Practices**: رشتہ دار یونٹس اور قابل رسائی ڈیزائن پیٹرنز کا استعمال
+
+**اگلے اقدامات**: آپ کے ٹیریریم میں اب ساخت (HTML) اور اسٹائل (CSS) دونوں ہیں۔ آخری سبق جاوا اسکرپٹ کے ساتھ انٹرایکٹوٹی شامل کرے گا!
 
 ## اسائنمنٹ
 
@@ -470,4 +698,4 @@ CSS کے بنیادی اصولوں کے لیے، یہ Microsoft Learn ماڈیو
 ---
 
 **ڈسکلیمر**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ur/3-terrarium/3-intro-to-DOM-and-closures/README.md
index a9d64276d7..4d40f62968 100644
--- a/translations/ur/3-terrarium/3-intro-to-DOM-and-closures/README.md
+++ b/translations/ur/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -1,56 +1,160 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "bc93f6285423033ebf5b8abeb5282888",
-  "translation_date": "2025-10-22T14:52:21+00:00",
+  "original_hash": "973e48ad87d67bf5bb819746c9f8e302",
+  "translation_date": "2025-11-03T13:13:52+00:00",
   "source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
   "language_code": "ur"
 }
 -->
 # ٹیریریم پروجیکٹ حصہ 3: DOM مینپولیشن اور جاوا اسکرپٹ کلوزرز
 
+```mermaid
+journey
+    title Your JavaScript DOM Journey
+    section Foundation
+      Understand DOM: 3: Student
+      Learn closures: 4: Student
+      Connect elements: 4: Student
+    section Interaction
+      Setup drag events: 4: Student
+      Track coordinates: 5: Student
+      Handle movement: 5: Student
+    section Polish
+      Add cleanup: 4: Student
+      Test functionality: 5: Student
+      Complete terrarium: 5: Student
+```
+
 ![DOM اور ایک کلوزر](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ur.png)
 > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
 
-ویب ڈیولپمنٹ کے سب سے دلچسپ پہلوؤں میں خوش آمدید - چیزوں کو انٹرایکٹو بنانا! دستاویز آبجیکٹ ماڈل (DOM) آپ کے HTML اور جاوا اسکرپٹ کے درمیان ایک پل کی طرح ہے، اور آج ہم اس کا استعمال کریں گے تاکہ آپ کے ٹیریریم کو زندہ کر سکیں۔ جب ٹم برنرز لی نے پہلا ویب براؤزر بنایا، تو انہوں نے ایک ایسی ویب کا تصور کیا جہاں دستاویزات متحرک اور انٹرایکٹو ہو سکتی ہیں - DOM اس تصور کو ممکن بناتا ہے۔
+ویب ڈیولپمنٹ کے سب سے دلچسپ پہلو میں خوش آمدید - چیزوں کو انٹرایکٹو بنانا! دستاویز آبجیکٹ ماڈل (DOM) آپ کے HTML اور جاوا اسکرپٹ کے درمیان ایک پل کی طرح ہے، اور آج ہم اسے آپ کے ٹیریریم کو زندہ کرنے کے لیے استعمال کریں گے۔ جب ٹم برنرز لی نے پہلا ویب براؤزر بنایا، تو انہوں نے ایک ایسی ویب کا تصور کیا جہاں دستاویزات متحرک اور انٹرایکٹو ہو سکیں - DOM اس تصور کو ممکن بناتا ہے۔
 
 ہم جاوا اسکرپٹ کلوزرز کو بھی دریافت کریں گے، جو شروع میں خوفناک لگ سکتے ہیں۔ کلوزرز کو "یادداشت کے جیب" بنانے کے طور پر سوچیں جہاں آپ کے فنکشنز اہم معلومات کو یاد رکھ سکتے ہیں۔ یہ بالکل ایسے ہی ہے جیسے آپ کے ٹیریریم میں ہر پودے کے پاس اپنی پوزیشن کو ٹریک کرنے کے لیے اپنا ڈیٹا ریکارڈ ہو۔ اس سبق کے اختتام تک، آپ سمجھ جائیں گے کہ یہ کتنے قدرتی اور مفید ہیں۔
 
 یہ ہے جو ہم بنا رہے ہیں: ایک ٹیریریم جہاں صارفین پودوں کو کہیں بھی گھسیٹ کر چھوڑ سکتے ہیں۔ آپ DOM مینپولیشن تکنیک سیکھیں گے جو ڈریگ اینڈ ڈراپ فائل اپلوڈز سے لے کر انٹرایکٹو گیمز تک سب کچھ طاقتور بناتی ہیں۔ آئیے آپ کے ٹیریریم کو زندہ کریں۔
 
-## لیکچر سے پہلے کا کوئز
+```mermaid
+mindmap
+  root((DOM & JavaScript))
+    DOM Tree
+      Element Selection
+      Property Access
+      Event Handling
+      Dynamic Updates
+    Events
+      Pointer Events
+      Mouse Events
+      Touch Events
+      Event Listeners
+    Closures
+      Private Variables
+      Function Scope
+      Memory Persistence
+      State Management
+    Drag & Drop
+      Position Tracking
+      Coordinate Math
+      Event Lifecycle
+      User Interaction
+    Modern Patterns
+      Event Delegation
+      Performance
+      Cross-Device
+      Accessibility
+```
 
-[لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/19)
+## پری لیکچر کوئز
+
+[پری لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/19)
 
 ## DOM کو سمجھنا: انٹرایکٹو ویب صفحات کے لیے آپ کا گیٹ وے
 
-دستاویز آبجیکٹ ماڈل (DOM) وہ طریقہ ہے جس سے جاوا اسکرپٹ آپ کے HTML عناصر کے ساتھ بات چیت کرتا ہے۔ جب آپ کا براؤزر ایک HTML صفحہ لوڈ کرتا ہے، تو یہ میموری میں اس صفحے کی ایک منظم نمائندگی بناتا ہے - یہی DOM ہے۔ اسے ایک خاندانی درخت کے طور پر سوچیں جہاں ہر HTML عنصر ایک خاندانی رکن ہے جس تک جاوا اسکرپٹ رسائی حاصل کر سکتا ہے، اسے تبدیل کر سکتا ہے، یا دوبارہ ترتیب دے سکتا ہے۔
+دستاویز آبجیکٹ ماڈل (DOM) وہ طریقہ ہے جس سے جاوا اسکرپٹ آپ کے HTML عناصر کے ساتھ بات چیت کرتا ہے۔ جب آپ کا براؤزر ایک HTML صفحہ لوڈ کرتا ہے، تو یہ اس صفحے کی ایک منظم نمائندگی کو میموری میں بناتا ہے - یہی DOM ہے۔ اسے ایک خاندانی درخت کے طور پر سوچیں جہاں ہر HTML عنصر ایک خاندانی رکن ہے جسے جاوا اسکرپٹ رسائی، ترمیم یا ترتیب دے سکتا ہے۔
 
-DOM مینپولیشن جامد صفحات کو انٹرایکٹو ویب سائٹس میں تبدیل کرتا ہے۔ جب بھی آپ دیکھتے ہیں کہ ایک بٹن ہوور پر رنگ بدلتا ہے، مواد صفحہ ریفریش کے بغیر اپ ڈیٹ ہوتا ہے، یا عناصر جنہیں آپ گھسیٹ سکتے ہیں، یہ سب DOM مینپولیشن کا کام ہے۔
+DOM مینپولیشن جامد صفحات کو انٹرایکٹو ویب سائٹس میں تبدیل کرتا ہے۔ جب بھی آپ دیکھتے ہیں کہ ایک بٹن ہوور پر رنگ بدلتا ہے، مواد صفحہ ریفریش کے بغیر اپ ڈیٹ ہوتا ہے، یا عناصر جنہیں آپ گھسیٹ سکتے ہیں، تو یہ سب DOM مینپولیشن کا کام ہے۔
+
+```mermaid
+flowchart TD
+    A["Document"] --> B["HTML"]
+    B --> C["Head"]
+    B --> D["Body"]
+    C --> E["Title"]
+    C --> F["Meta Tags"]
+    D --> G["H1: My Terrarium"]
+    D --> H["Div: Page Container"]
+    H --> I["Div: Left Container"]
+    H --> J["Div: Right Container"]
+    H --> K["Div: Terrarium"]
+    I --> L["Plant Elements 1-7"]
+    J --> M["Plant Elements 8-14"]
+    
+    L --> N["img#plant1"]
+    L --> O["img#plant2"]
+    M --> P["img#plant8"]
+    M --> Q["img#plant9"]
+    
+    style A fill:#e1f5fe
+    style B fill:#f3e5f5
+    style D fill:#e8f5e8
+    style H fill:#fff3e0
+    style N fill:#ffebee
+    style O fill:#ffebee
+    style P fill:#ffebee
+    style Q fill:#ffebee
+```
 
 ![DOM درخت کی نمائندگی](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ur.png)
 
-> DOM اور HTML مارک اپ کی نمائندگی جو اس کا حوالہ دیتا ہے۔ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) سے
+> DOM اور HTML مارک اپ کی نمائندگی جو اس کا حوالہ دیتا ہے۔ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) کی طرف سے
 
 **یہ ہے جو DOM کو طاقتور بناتا ہے:**
 - **فراہم کرتا ہے** آپ کے صفحے پر کسی بھی عنصر تک رسائی کا ایک منظم طریقہ
-- **قابل بناتا ہے** مواد کو صفحہ ریفریش کے بغیر اپ ڈیٹ کرنا
-- **اجازت دیتا ہے** صارف کے تعاملات جیسے کلکس اور ڈریگز کا حقیقی وقت میں جواب دینا
+- **قابل بناتا ہے** صفحہ ریفریش کے بغیر متحرک مواد کی اپ ڈیٹس
+- **اجازت دیتا ہے** صارف کے تعاملات جیسے کلکس اور ڈریگز کا حقیقی وقت میں جواب
 - **بنیاد بناتا ہے** جدید انٹرایکٹو ویب ایپلیکیشنز کے لیے
 
 ## جاوا اسکرپٹ کلوزرز: منظم، طاقتور کوڈ بنانا
 
-ایک [جاوا اسکرپٹ کلوزر](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ایسا ہے جیسے کسی فنکشن کو اپنی ذاتی ورک اسپیس دینا جس میں مستقل یادداشت ہو۔ غور کریں کہ گالاپاگوس جزائر کے ڈارون کے فنچز نے اپنے مخصوص ماحول کی بنیاد پر خصوصی چونچیں کیسے تیار کیں - کلوزرز اسی طرح کام کرتے ہیں، مخصوص فنکشنز بناتے ہیں جو اپنے مخصوص سیاق و سباق کو "یاد" رکھتے ہیں یہاں تک کہ ان کے پیرنٹ فنکشن ختم ہو چکے ہوں۔
+ایک [جاوا اسکرپٹ کلوزر](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ایک فنکشن کو اس کی اپنی نجی ورک اسپیس دینے جیسا ہے جس میں مستقل یادداشت ہو۔ غور کریں کہ گالاپاگوس جزائر کے ڈارون کے فنچز نے اپنے مخصوص ماحول کی بنیاد پر خصوصی چونچیں کیسے تیار کیں - کلوزرز اسی طرح کام کرتے ہیں، مخصوص فنکشنز بناتے ہیں جو اپنے مخصوص سیاق و سباق کو "یاد رکھتے ہیں" یہاں تک کہ ان کے پیرنٹ فنکشن ختم ہو جائے۔
 
-ہمارے ٹیریریم میں، کلوزرز ہر پودے کو اپنی پوزیشن کو آزادانہ طور پر یاد رکھنے میں مدد دیتے ہیں۔ یہ پیٹرن پیشہ ورانہ جاوا اسکرپٹ ڈیولپمنٹ میں ہر جگہ ظاہر ہوتا ہے، جس سے یہ سمجھنے کے لیے ایک قیمتی تصور بن جاتا ہے۔
+ہمارے ٹیریریم میں، کلوزرز ہر پودے کو اپنی پوزیشن کو آزادانہ طور پر یاد رکھنے میں مدد کرتے ہیں۔ یہ پیٹرن پیشہ ورانہ جاوا اسکرپٹ ڈیولپمنٹ میں ہر جگہ ظاہر ہوتا ہے، جس سے یہ سمجھنے کے لیے ایک قیمتی تصور بن جاتا ہے۔
 
-> 💡 **کلوزرز کو سمجھنا**: جاوا اسکرپٹ میں کلوزرز ایک اہم موضوع ہیں، اور بہت سے ڈیولپرز انہیں مکمل طور پر سمجھنے سے پہلے کئی سالوں تک استعمال کرتے ہیں۔ آج، ہم عملی اطلاق پر توجہ مرکوز کر رہے ہیں - آپ دیکھیں گے کہ کلوزرز قدرتی طور پر ابھرتے ہیں جب ہم اپنی انٹرایکٹو خصوصیات بناتے ہیں۔ سمجھ بوجھ اس وقت پیدا ہوگی جب آپ دیکھیں گے کہ وہ حقیقی مسائل کو کیسے حل کرتے ہیں۔
+```mermaid
+flowchart LR
+    A["dragElement(plant1)"] --> B["Creates Closure"]
+    A2["dragElement(plant2)"] --> B2["Creates Closure"]
+    
+    B --> C["Private Variables"]
+    B2 --> C2["Private Variables"]
+    
+    C --> D["pos1, pos2, pos3, pos4"]
+    C --> E["pointerDrag function"]
+    C --> F["elementDrag function"]
+    C --> G["stopElementDrag function"]
+    
+    C2 --> D2["pos1, pos2, pos3, pos4"]
+    C2 --> E2["pointerDrag function"]
+    C2 --> F2["elementDrag function"]
+    C2 --> G2["stopElementDrag function"]
+    
+    H["Plant 1 remembers its position"] --> B
+    H2["Plant 2 remembers its position"] --> B2
+    
+    style B fill:#e8f5e8
+    style B2 fill:#e8f5e8
+    style C fill:#fff3e0
+    style C2 fill:#fff3e0
+```
+
+> 💡 **کلوزرز کو سمجھنا**: کلوزرز جاوا اسکرپٹ میں ایک اہم موضوع ہیں، اور بہت سے ڈیولپرز انہیں سالوں تک استعمال کرتے ہیں اس سے پہلے کہ وہ تمام نظریاتی پہلوؤں کو مکمل طور پر سمجھ سکیں۔ آج، ہم عملی اطلاق پر توجہ مرکوز کر رہے ہیں - آپ دیکھیں گے کہ کلوزرز قدرتی طور پر ابھرتے ہیں جب ہم اپنی انٹرایکٹو خصوصیات بناتے ہیں۔ سمجھنا اس وقت ترقی کرے گا جب آپ دیکھیں گے کہ وہ حقیقی مسائل کو کیسے حل کرتے ہیں۔
 
 ![DOM درخت کی نمائندگی](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ur.png)
 
-> DOM اور HTML مارک اپ کی نمائندگی جو اس کا حوالہ دیتا ہے۔ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) سے
+> DOM اور HTML مارک اپ کی نمائندگی جو اس کا حوالہ دیتا ہے۔ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) کی طرف سے
 
-اس سبق میں، ہم اپنے انٹرایکٹو ٹیریریم پروجیکٹ کو مکمل کریں گے، جاوا اسکرپٹ بنا کر جو صارف کو صفحے پر پودوں کو جوڑنے کی اجازت دے گا۔
+اس سبق میں، ہم اپنے انٹرایکٹو ٹیریریم پروجیکٹ کو مکمل کریں گے جاوا اسکرپٹ بنا کر جو صارف کو صفحے پر پودوں کو جوڑنے کی اجازت دے گا۔
 
 ## شروع کرنے سے پہلے: کامیابی کے لیے سیٹ اپ کرنا
 
@@ -59,10 +163,10 @@ DOM مینپولیشن جامد صفحات کو انٹرایکٹو ویب سائ
 یہ ہے جو ہم بنائیں گے:
 - **ہموار ڈریگ اینڈ ڈراپ** تمام ٹیریریم پودوں کے لیے
 - **کوآرڈینیٹ ٹریکنگ** تاکہ پودے اپنی پوزیشنز یاد رکھ سکیں
-- **ایک مکمل انٹرایکٹو انٹرفیس** وینیلا جاوا اسکرپٹ استعمال کرتے ہوئے
-- **صاف، منظم کوڈ** کلوزر پیٹرنز استعمال کرتے ہوئے
+- **ایک مکمل انٹرایکٹو انٹرفیس** وینیلا جاوا اسکرپٹ کا استعمال کرتے ہوئے
+- **صاف، منظم کوڈ** کلوزر پیٹرنز کا استعمال کرتے ہوئے
 
-## اپنے جاوا اسکرپٹ فائل کا سیٹ اپ کرنا
+## اپنے جاوا اسکرپٹ فائل کو سیٹ اپ کرنا
 
 آئیے جاوا اسکرپٹ فائل بنائیں جو آپ کے ٹیریریم کو انٹرایکٹو بنائے گی۔
 
@@ -70,7 +174,7 @@ DOM مینپولیشن جامد صفحات کو انٹرایکٹو ویب سائ
 
 اپنے ٹیریریم فولڈر میں، ایک نئی فائل بنائیں جس کا نام `script.js` ہو۔
 
-**مرحلہ 2: جاوا اسکرپٹ کو اپنے HTML سے جوڑیں**
+**مرحلہ 2: جاوا اسکرپٹ کو اپنے HTML سے لنک کریں**
 
 اپنے `index.html` فائل کے `<head>` سیکشن میں یہ اسکرپٹ ٹیگ شامل کریں:
 
@@ -79,24 +183,24 @@ DOM مینپولیشن جامد صفحات کو انٹرایکٹو ویب سائ
 ```
 
 **کیوں `defer` ایٹریبیوٹ اہم ہے:**
-- **یقینی بناتا ہے** کہ آپ کا جاوا اسکرپٹ اس وقت تک انتظار کرے جب تک کہ تمام HTML لوڈ نہ ہو جائے
+- **یقینی بناتا ہے** کہ آپ کا جاوا اسکرپٹ تمام HTML لوڈ ہونے تک انتظار کرے
 - **روکتا ہے** وہ غلطیاں جہاں جاوا اسکرپٹ ایسے عناصر کو تلاش کرنے کی کوشش کرتا ہے جو ابھی تیار نہیں ہیں
-- **یقین دہانی کرتا ہے** کہ آپ کے تمام پودے عناصر تعامل کے لیے دستیاب ہیں
+- **یقین دہانی کرتا ہے** کہ آپ کے تمام پودے کے عناصر تعامل کے لیے دستیاب ہیں
 - **بہتر کارکردگی فراہم کرتا ہے** صفحے کے نیچے اسکرپٹس رکھنے کے مقابلے میں
 
-> ⚠️ **اہم نوٹ**: `defer` ایٹریبیوٹ عام وقت کے مسائل کو روکتا ہے۔ اس کے بغیر، جاوا اسکرپٹ HTML عناصر تک رسائی حاصل کرنے کی کوشش کر سکتا ہے اس سے پہلے کہ وہ لوڈ ہوں، جس سے غلطیاں پیدا ہو سکتی ہیں۔
+> ⚠️ **اہم نوٹ**: `defer` ایٹریبیوٹ عام وقت کے مسائل کو روکتا ہے۔ اس کے بغیر، جاوا اسکرپٹ HTML عناصر تک رسائی کرنے کی کوشش کر سکتا ہے اس سے پہلے کہ وہ لوڈ ہوں، جس سے غلطیاں پیدا ہو سکتی ہیں۔
 
 ---
 
-## اپنے HTML عناصر کو جاوا اسکرپٹ سے جوڑنا
+## جاوا اسکرپٹ کو آپ کے HTML عناصر سے جوڑنا
 
-اس سے پہلے کہ ہم عناصر کو ڈریگ ایبل بنا سکیں، جاوا اسکرپٹ کو انہیں DOM میں تلاش کرنے کی ضرورت ہے۔ اسے ایک لائبریری کی کیٹلاگنگ سسٹم کی طرح سوچیں - ایک بار جب آپ کے پاس کیٹلاگ نمبر ہو، تو آپ بالکل وہی کتاب تلاش کر سکتے ہیں جس کی آپ کو ضرورت ہے اور اس کے تمام مواد تک رسائی حاصل کر سکتے ہیں۔
+اس سے پہلے کہ ہم عناصر کو ڈریگ ایبل بنائیں، جاوا اسکرپٹ کو DOM میں انہیں تلاش کرنے کی ضرورت ہے۔ اسے ایک لائبریری کی کیٹلاگنگ سسٹم کی طرح سوچیں - ایک بار جب آپ کے پاس کیٹلاگ نمبر ہو، تو آپ بالکل وہی کتاب تلاش کر سکتے ہیں جس کی آپ کو ضرورت ہے اور اس کے تمام مواد تک رسائی حاصل کر سکتے ہیں۔
 
-ہم `document.getElementById()` طریقہ استعمال کریں گے تاکہ ان کنکشنز کو بنایا جا سکے۔ یہ بالکل ایک درست فائلنگ سسٹم رکھنے کی طرح ہے - آپ ایک ID فراہم کرتے ہیں، اور یہ بالکل وہی عنصر تلاش کرتا ہے جس کی آپ کو اپنے HTML میں ضرورت ہے۔
+ہم `document.getElementById()` طریقہ استعمال کریں گے تاکہ یہ کنکشنز بنائے جا سکیں۔ یہ بالکل ایک درست فائلنگ سسٹم رکھنے جیسا ہے - آپ ایک ID فراہم کرتے ہیں، اور یہ بالکل وہی عنصر تلاش کرتا ہے جس کی آپ کو اپنے HTML میں ضرورت ہے۔
 
 ### تمام پودوں کے لیے ڈریگ فنکشنلٹی کو فعال کرنا
 
-اپنی `script.js` فائل میں یہ کوڈ شامل کریں:
+اپنے `script.js` فائل میں یہ کوڈ شامل کریں:
 
 ```javascript
 // Enable drag functionality for all 14 plants
@@ -118,24 +222,34 @@ dragElement(document.getElementById('plant14'));
 
 **یہ کوڈ کیا حاصل کرتا ہے:**
 - **ہر پودے کے عنصر کو DOM میں تلاش کرتا ہے** اس کے منفرد ID کا استعمال کرتے ہوئے
-- **جاوا اسکرپٹ ریفرنس حاصل کرتا ہے** ہر HTML عنصر کا
-- **ہر عنصر کو پاس کرتا ہے** ایک `dragElement` فنکشن میں (جسے ہم اگلے مرحلے میں بنائیں گے)
-- **ہر پودے کو تیار کرتا ہے** ڈریگ اینڈ ڈراپ تعامل کے لیے
-- **آپ کے HTML ڈھانچے کو جاوا اسکرپٹ فنکشنلٹی سے جوڑتا ہے
+- **ہر HTML عنصر کے لیے جاوا اسکرپٹ ریفرنس حاصل کرتا ہے**
+- **ہر عنصر کو `dragElement` فنکشن میں پاس کرتا ہے** (جسے ہم اگلے مرحلے میں بنائیں گے)
+- **ہر پودے کو ڈریگ اینڈ ڈراپ تعامل کے لیے تیار کرتا ہے**
+- **آپ کے HTML ڈھانچے کو جاوا اسکرپٹ فنکشنلٹی سے جوڑتا ہے**
+
+> 🎯 **کیوں IDs کو کلاسز کے بجائے استعمال کریں؟** IDs مخصوص عناصر کے لیے منفرد شناخت فراہم کرتے ہیں، جبکہ CSS کلاسز گروپ کے عناصر کو اسٹائل کرنے کے لیے بنائی گئی ہیں۔ جب جاوا اسکرپٹ کو انفرادی عناصر کو مینپولیٹ کرنے کی ضرورت ہوتی ہے، تو IDs وہ درستگی اور کارکردگی فراہم کرتے ہیں جس کی ہمیں ضرورت ہے۔
+
+> 💡 **پرو ٹپ**: نوٹ کریں کہ ہم ہر پودے کے لیے انفرادی طور پر `dragElement()` کو کال کر رہے ہیں۔ یہ طریقہ یقینی بناتا ہے کہ ہر پودے کو اپنی آزادانہ ڈریگنگ کی خصوصیت ملے، جو ہموار صارف تعامل کے لیے ضروری ہے۔
 
-> 🎯 **کیوں IDs استعمال کریں بجائے کلاسز کے؟** IDs مخصوص عناصر کے لیے منفرد شناخت فراہم کرتے ہیں، جبکہ CSS کلاسز گروپ کے عناصر کو اسٹائل کرنے کے لیے بنائی گئی ہیں۔ جب جاوا اسکرپٹ کو انفرادی عناصر کو مینپولیٹ کرنے کی ضرورت ہوتی ہے، تو IDs وہ درستگی اور کارکردگی فراہم کرتے ہیں جس کی ہمیں ضرورت ہے۔
+### 🔄 **تعلیمی جائزہ**
+**DOM کنکشن کو سمجھنا**: ڈریگ فنکشنلٹی کی طرف بڑھنے سے پہلے، تصدیق کریں کہ آپ:
+- ✅ وضاحت کر سکتے ہیں کہ `document.getElementById()` HTML عناصر کو کیسے تلاش کرتا ہے
+- ✅ سمجھتے ہیں کہ ہم ہر پودے کے لیے منفرد IDs کیوں استعمال کرتے ہیں
+- ✅ اسکرپٹ ٹیگز میں `defer` ایٹریبیوٹ کے مقصد کو بیان کر سکتے ہیں
+- ✅ پہچان سکتے ہیں کہ جاوا اسکرپٹ اور HTML DOM کے ذریعے کیسے جڑتے ہیں
 
-> 💡 **پرو ٹپ**: نوٹ کریں کہ ہم ہر پودے کے لیے انفرادی طور پر `dragElement()` کو کال کر رہے ہیں۔ یہ طریقہ یقینی بناتا ہے کہ ہر پودے کو اپنی آزادانہ ڈریگنگ بیہیویر ملے، جو ہموار صارف تعامل کے لیے ضروری ہے۔
+**خود کا فوری ٹیسٹ**: اگر دو عناصر کے پاس ایک ہی ID ہو تو کیا ہوگا؟ کیوں `getElementById()` صرف ایک عنصر واپس کرتا ہے؟
+*جواب: IDs منفرد ہونے چاہئیں؛ اگر دہرائے جائیں، تو صرف پہلا عنصر واپس کیا جاتا ہے*
 
 ---
 
 ## ڈریگ عنصر کلوزر بنانا
 
-اب ہم اپنی ڈریگنگ فنکشنلٹی کے دل کو بنائیں گے: ایک کلوزر جو ہر پودے کے لیے ڈریگنگ بیہیویر کو منظم کرتا ہے۔ یہ کلوزر متعدد اندرونی فنکشنز پر مشتمل ہوگا جو ماؤس کی حرکت کو ٹریک کرنے اور عنصر کی پوزیشنز کو اپ ڈیٹ کرنے کے لیے مل کر کام کریں گے۔
+اب ہم اپنی ڈریگنگ فنکشنلٹی کے دل کو بنائیں گے: ایک کلوزر جو ہر پودے کے لیے ڈریگنگ کے رویے کو منظم کرتا ہے۔ یہ کلوزر متعدد اندرونی فنکشنز پر مشتمل ہوگا جو ماؤس کی حرکت کو ٹریک کرنے اور عنصر کی پوزیشنز کو اپ ڈیٹ کرنے کے لیے مل کر کام کریں گے۔
 
-کلوزرز اس کام کے لیے بہترین ہیں کیونکہ وہ ہمیں "پرائیویٹ" ویریبلز بنانے کی اجازت دیتے ہیں جو فنکشن کالز کے درمیان برقرار رہتے ہیں، ہر پودے کے لیے اس کا اپنا آزادانہ کوآرڈینیٹ ٹریکنگ سسٹم فراہم کرتے ہیں۔
+کلوزرز اس کام کے لیے بہترین ہیں کیونکہ وہ ہمیں "نجی" متغیرات بنانے کی اجازت دیتے ہیں جو فنکشن کالز کے درمیان برقرار رہتے ہیں، ہر پودے کو اس کا اپنا آزاد کوآرڈینیٹ ٹریکنگ سسٹم دیتے ہیں۔
 
-### کلوزرز کو ایک سادہ مثال کے ساتھ سمجھنا
+### ایک سادہ مثال کے ساتھ کلوزرز کو سمجھنا
 
 آئیے کلوزرز کو ایک سادہ مثال کے ساتھ سمجھاتے ہیں جو اس تصور کو واضح کرتی ہے:
 
@@ -156,27 +270,55 @@ console.log(myCounter()); // 1
 console.log(myCounter()); // 2
 ```
 
-**یہاں کیا ہو رہا ہے اس کلوزر پیٹرن میں:**
-- **ایک پرائیویٹ `count` ویریبل بناتا ہے** جو صرف اس کلوزر کے اندر موجود ہے
-- **اندرونی فنکشن** اس بیرونی ویریبل تک رسائی حاصل کر سکتا ہے اور اسے تبدیل کر سکتا ہے (کلوزر میکانزم)
-- **جب ہم واپس کرتے ہیں** اندرونی فنکشن، یہ اس پرائیویٹ ڈیٹا کے ساتھ اپنا کنکشن برقرار رکھتا ہے
-- **یہاں تک کہ جب** `createCounter()` اپنی عملدرآمد ختم کر لیتا ہے، `count` اپنی ویلیو کو برقرار رکھتا ہے
+**یہاں کلوزر پیٹرن میں کیا ہو رہا ہے:**
+- **ایک نجی `count` متغیر بناتا ہے** جو صرف اس کلوزر کے اندر موجود ہے
+- **اندرونی فنکشن** اس بیرونی متغیر تک رسائی حاصل کر سکتا ہے اور اسے تبدیل کر سکتا ہے (کلوزر میکانزم)
+- **جب ہم واپس کرتے ہیں** اندرونی فنکشن، یہ اس نجی ڈیٹا سے اپنا کنکشن برقرار رکھتا ہے
+- **یہاں تک کہ** `createCounter()` ختم ہونے کے بعد بھی، `count` برقرار رہتا ہے اور اپنی قدر کو یاد رکھتا ہے
 
 ### کیوں کلوزرز ڈریگ فنکشنلٹی کے لیے بہترین ہیں
 
 ہمارے ٹیریریم کے لیے، ہر پودے کو اپنی موجودہ پوزیشن کوآرڈینیٹس یاد رکھنے کی ضرورت ہے۔ کلوزرز بہترین حل فراہم کرتے ہیں:
 
 **ہمارے پروجیکٹ کے لیے کلیدی فوائد:**
-- **ہر پودے کے لیے پرائیویٹ پوزیشن ویریبلز برقرار رکھتا ہے**
+- **ہر پودے کے لیے نجی پوزیشن متغیرات برقرار رکھتا ہے**
 - **ڈریگ ایونٹس کے درمیان کوآرڈینیٹ ڈیٹا محفوظ رکھتا ہے**
-- **مختلف ڈریگ ایبل عناصر کے درمیان ویریبل تنازعات کو روکتا ہے**
+- **مختلف ڈریگ ایبل عناصر کے درمیان متغیر تنازعات کو روکتا ہے**
 - **صاف، منظم کوڈ ڈھانچہ بناتا ہے**
 
-> 🎯 **سیکھنے کا مقصد**: آپ کو ابھی کلوزرز کے ہر پہلو میں مہارت حاصل کرنے کی ضرورت نہیں ہے۔ اس بات پر توجہ مرکوز کریں کہ وہ ہمارے کوڈ کو منظم کرنے اور ڈریگنگ فنکشنلٹی کے لیے اسٹیٹ کو برقرار رکھنے میں کیسے مدد کرتے ہیں۔
+> 🎯 **سیکھنے کا مقصد**: آپ کو ابھی کلوزرز کے ہر پہلو میں مہارت حاصل کرنے کی ضرورت نہیں ہے۔ اس بات پر توجہ مرکوز کریں کہ وہ ہمارے کوڈ کو منظم کرنے اور ہماری ڈریگنگ فنکشنلٹی کے لیے اسٹیٹ کو برقرار رکھنے میں کیسے مدد کرتے ہیں۔
+
+```mermaid
+stateDiagram-v2
+    [*] --> Ready: Page loads
+    Ready --> DragStart: User presses down (pointerdown)
+    DragStart --> Dragging: Mouse/finger moves (pointermove)
+    Dragging --> Dragging: Continue moving
+    Dragging --> DragEnd: User releases (pointerup)
+    DragEnd --> Ready: Reset for next drag
+    
+    state DragStart {
+        [*] --> CapturePosition
+        CapturePosition --> SetupListeners
+        SetupListeners --> [*]
+    }
+    
+    state Dragging {
+        [*] --> CalculateMovement
+        CalculateMovement --> UpdatePosition
+        UpdatePosition --> [*]
+    }
+    
+    state DragEnd {
+        [*] --> RemoveListeners
+        RemoveListeners --> CleanupState
+        CleanupState --> [*]
+    }
+```
 
-### ڈریگ عنصر فنکشن بنانا
+### `dragElement` فنکشن بنانا
 
-اب آئیے وہ مرکزی فنکشن بنائیں جو تمام ڈریگنگ منطق کو سنبھالے گا۔ اپنے پودے عنصر کے اعلانات کے نیچے یہ فنکشن شامل کریں:
+اب ہم وہ مرکزی فنکشن بنائیں گے جو تمام ڈریگنگ منطق کو سنبھالے گا۔ اپنے پودے کے عنصر کے اعلانات کے نیچے یہ فنکشن شامل کریں:
 
 ```javascript
 function dragElement(terrariumElement) {
@@ -194,88 +336,135 @@ function dragElement(terrariumElement) {
 **پوزیشن ٹریکنگ سسٹم کو سمجھنا:**
 - **`pos1` اور `pos2`**: پرانے اور نئے ماؤس پوزیشنز کے درمیان فرق کو اسٹور کرتے ہیں
 - **`pos3` اور `pos4`**: موجودہ ماؤس کوآرڈینیٹس کو ٹریک کرتے ہیں
-- **`terrariumElement`**: مخصوص پودے عنصر جسے ہم ڈریگ ایبل بنا رہے ہیں
+- **`terrariumElement`**: مخصوص پودے کا عنصر جسے ہم ڈریگ ایبل بنا رہے ہیں
 - **`onpointerdown`**: وہ ایونٹ جو اس وقت ٹرگر ہوتا ہے جب صارف ڈریگنگ شروع کرتا ہے
 
 **یہاں کلوزر پیٹرن کیسے کام کرتا ہے:**
-- **ہر پودے عنصر کے لیے پرائیویٹ پوزیشن ویریبلز بناتا ہے**
-- **ڈریگنگ لائف سائیکل کے دوران ان ویریبلز کو برقرار رکھتا ہے**
-- **یقینی بناتا ہے** کہ ہر پودے اپنی کوآرڈینیٹس کو آزادانہ طور پر ٹریک کرے
+- **ہر پودے کے عنصر کے لیے نجی پوزیشن متغیرات بناتا ہے**
+- **یہ متغیرات ڈریگنگ کے لائف سائیکل کے دوران برقرار رکھتا ہے**
+- **یقینی بناتا ہے** کہ ہر پودا اپنی کوآرڈینیٹس کو آزادانہ طور پر ٹریک کرتا ہے
 - **ایک صاف انٹرفیس فراہم کرتا ہے** `dragElement` فنکشن کے ذریعے
 
 ### کیوں پوائنٹر ایونٹس استعمال کریں؟
 
-آپ سوچ سکتے ہیں کہ ہم `onpointerdown` کیوں استعمال کرتے ہیں بجائے زیادہ مانوس `onclick` کے۔ یہاں وجہ ہے:
+آپ سوچ سکتے ہیں کہ ہم `onpointerdown` کے بجائے زیادہ مانوس `onclick` کیوں استعمال کرتے ہیں۔ یہاں وجہ ہے:
 
 | ایونٹ کی قسم | بہترین استعمال | مسئلہ |
 |------------|----------|-------------|
-| `onclick` | سادہ بٹن کلکس | ڈریگنگ کو ہینڈل نہیں کر سکتا (صرف کلکس اور ریلیزز) |
-| `onpointerdown` | ماؤس اور ٹچ دونوں کے لیے | نیا ہے، لیکن آج کل اچھی طرح سے سپورٹ کیا جاتا ہے |
-| `onmousedown` | صرف ڈیسک ٹاپ ماؤس کے لیے | موبائل صارفین کو نظر انداز کرتا ہے |
+| `onclick` | سادہ بٹن کلکس | ڈریگنگ کو ہینڈل نہیں کر سکتا (صرف کلکس اور ریلیز) |
+| `onpointerdown` | ماؤس اور ٹچ دونوں | نیا ہے، لیکن آج کل اچھی طرح سے سپورٹڈ ہے |
+| `onmousedown` | صرف ڈیسک ٹاپ ماؤس | موبائل صارفین کو نظر انداز کرتا ہے |
 
-**کیوں پوائنٹر ایونٹس ہمارے بنائے ہوئے کام کے لیے بہترین ہیں:**
-- **بہترین کام کرتا ہے** چاہے کوئی ماؤس، انگلی، یا اسٹائلس استعمال کر رہا ہو
+**کیوں پوائنٹر ایونٹس ہمارے بنائے ہوئے کے لیے بہترین ہیں:**
+- **زبردست کام کرتا ہے** چاہے کوئی ماؤس، انگلی، یا اسٹائلس استعمال کر رہا ہو
 - **ایک جیسا محسوس ہوتا ہے** لیپ ٹاپ، ٹیبلٹ، یا فون پر
 - **اصل ڈریگنگ موشن کو ہینڈل کرتا ہے** (صرف کلک اینڈ ڈن نہیں)
-- **ایک ہموار تجربہ بناتا ہے** جو صارفین جدید ویب ایپس سے توقع کرتے ہیں
+- **ایک ہموار تجربہ تخلیق کرتا ہے** جو صارفین جدید ویب ایپس سے توقع کرتے ہیں
+
+> 💡 **مستقبل کی تیاری**: پوائنٹر ایونٹس صارف کے تعاملات کو ہینڈل کرنے کا جدید طریقہ ہیں۔ ماؤس اور ٹچ کے لیے الگ کوڈ لکھنے کے بجائے، آپ دونوں کو مفت میں حاصل کرتے ہیں۔ کافی زبردست، ہے نا؟
 
-> 💡 **مستقبل کی تیاری**: پوائنٹر ایونٹس صارف تعاملات کو ہینڈل کرنے کا جدید طریقہ ہیں۔ ماؤس اور ٹچ کے لیے الگ کوڈ لکھنے کے بجائے، آپ دونوں کو مفت میں حاصل کرتے ہیں۔ کافی زبردست، ہے نا؟
+### 🔄 **تعلیمی جائزہ**
+**ایونٹ ہینڈلنگ کو سمجھنا**: ایونٹس کی سمجھ کی تصدیق کے لیے توقف کریں:
+- ✅ ہم ماؤس ایونٹس کے بجائے پوائنٹر ایونٹس کیوں استعمال کرتے ہیں؟
+- ✅ کلوزر متغیرات فنکشن کالز کے درمیان کیسے برقرار رہتے ہیں؟
+- ✅ `preventDefault()` ہموار ڈریگنگ میں کیا کردار ادا کرتا ہے؟
+- ✅ ہم انفرادی عناصر کے بجائے دستاویز پر سننے والے کیوں منسلک کرتے ہیں؟
+
+**حقیقی دنیا کا کنکشن**: ان ڈریگ اینڈ ڈراپ انٹرفیسز کے بارے میں سوچیں جو آپ روزانہ استعمال کرتے ہیں:
+- **فائل اپلوڈز**: فائلز کو براؤزر ونڈو میں گھسیٹنا
+- **کانبان بورڈز**: کاموں کو کالمز کے درمیان منتقل کرنا
+- **امیج گیلریز**: فوٹو آرڈر کو دوبارہ ترتیب دینا
+- **موبائل انٹرفیسز**: ٹچ اسکرینز پر سوائپ اور ڈریگ کرنا
 
 ---
 
 ## پوائنٹر ڈریگ فنکشن: ڈریگ کے آغاز کو کیپچر کرنا
 
-جب کوئی صارف کسی پودے پر دباؤ ڈالتا ہے (چاہے ماؤس کلک یا انگلی کے ٹچ کے ساتھ)، `pointerDrag` فنکشن حرکت میں آتا ہے۔ یہ فنکشن ابتدائی کوآرڈینیٹس کو کیپچر کرتا ہے اور ڈریگنگ سسٹم کو سیٹ اپ کرتا ہے۔
+جب کوئی صارف کسی پودے پر دباؤ ڈالتا ہے (
+**ان کوآرڈینیٹس کو سمجھنا:**
+- **فراہم کرتا ہے** پکسل-پرفیکٹ پوزیشننگ کی معلومات
+- **ریئل ٹائم میں اپڈیٹ ہوتا ہے** جب صارف اپنا پوائنٹر حرکت دیتا ہے
+- **مستقل رہتا ہے** مختلف اسکرین سائز اور زوم لیولز پر
+- **ممکن بناتا ہے** ہموار، ردعمل دینے والے ڈریگ انٹریکشنز
+
+### دستاویز سطح کے ایونٹ لسٹنرز سیٹ اپ کرنا
 
-اپنے `dragElement` کلوزر کے اندر یہ فنکشن شامل کریں، بالکل اس لائن کے بعد `terrariumElement.onpointerdown = pointerDrag;`:
+دیکھیں کہ ہم نے موو اور اسٹاپ ایونٹس کو پورے `document` پر منسلک کیا ہے، نہ کہ صرف پلانٹ عنصر پر:
 
 ```javascript
-function pointerDrag(e) {
-    // Prevent default browser behavior (like text selection)
-    e.preventDefault();
-    
-    // Capture the initial mouse/touch position
-    pos3 = e.clientX;  // X coordinate where drag started
-    pos4 = e.clientY;  // Y coordinate where drag started
-    
-    // Set up event listeners for the dragging process
-    document.onpointermove = elementDrag;
-    document.onpointerup = stopElementDrag;
-}
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
 ```
 
-**مرحلہ وار، یہاں کیا ہو رہا ہے:**
-- **روکتا ہے** ڈیفالٹ براؤزر بیہیویرز جو ڈریگنگ میں مداخلت کر سکتے ہیں
-- **ریکارڈ کرتا ہے** بالکل وہ کوآرڈینیٹس جہاں صارف نے ڈریگ اشارہ شروع کیا
-- **ایونٹ لسٹنرز قائم کرتا ہے** جاری ڈریگ موومنٹ کے لیے
-- **سسٹم کو تیار کرتا ہے** ماؤس/انگلی کی حرکت کو پورے دستاویز میں ٹریک کرنے کے لیے
+**دستاویز سے منسلک کرنے کی وجہ:**
+- **ٹریکنگ جاری رکھتا ہے** یہاں تک کہ جب ماؤس پلانٹ عنصر کو چھوڑ دیتا ہے
+- **ڈریگ میں خلل کو روکتا ہے** اگر صارف تیزی سے حرکت کرے
+- **پورے اسکرین پر ہموار ڈریگنگ فراہم کرتا ہے**
+- **ایج کیسز کو ہینڈل کرتا ہے** جہاں کرسر براؤزر ونڈو کے باہر چلا جاتا ہے
 
-### ایونٹ پریوینشن کو سمجھنا
+> ⚡ **پرفارمنس نوٹ**: ہم ڈریگنگ کے رکنے پر ان دستاویز سطح کے لسٹنرز کو صاف کریں گے تاکہ میموری لیکس اور پرفارمنس مسائل سے بچا جا سکے۔
 
-لائن `e.preventDefault()` ہموار ڈریگنگ کے لیے بہت اہم ہے:
+## ڈریگ سسٹم مکمل کرنا: حرکت اور صفائی
 
-**پریوینشن کے بغیر، براؤزرز ممکنہ طور پر:**
-- **ٹیکسٹ کو منتخب کریں** جب صفحے پر ڈریگ کرتے ہیں
-- **کنٹیکسٹ مینو کو ٹرگر کریں** رائٹ کلک ڈریگ پر
-- **ہمارے کسٹم ڈریگنگ بیہیویر میں مداخلت کریں**
-- **ڈریگ آپریشن کے دوران بصری آرٹیفیکٹس بنائیں**
+اب ہم دو باقی رہنے والے فنکشنز شامل کریں گے جو اصل ڈریگنگ حرکت اور ڈریگنگ کے رکنے پر صفائی کو ہینڈل کرتے ہیں۔ یہ فنکشنز مل کر آپ کے ٹیریریم میں ہموار، ردعمل دینے والی پلانٹ حرکت پیدا کرتے ہیں۔
 
-> 🔍 **تجربہ کریں**: اس سبق کو مکمل کرنے کے بعد، `e.preventDefault()` کو ہٹا کر دیکھیں کہ یہ ڈریگنگ کے تجربے کو کیسے متاثر کرتا ہے۔ آپ جلدی سمجھ جائیں گے کہ یہ لائن کیوں ضروری ہے!
+### elementDrag فنکشن: حرکت کو ٹریک کرنا
 
-### کوآرڈینیٹ ٹریکنگ سسٹم
+`pointerDrag` کے بند ہونے والے کرلی بریکٹ کے بعد `elementDrag` فنکشن شامل کریں:
 
-پراپرٹیز `e.clientX` اور `e.clientY` ہمیں بالکل درست ماؤس/ٹچ کوآ
-- **`pos3` اور `pos4`**: اگلے حساب کے لیے موجودہ ماؤس کی پوزیشن کو محفوظ کریں  
-- **`offsetTop` اور `offsetLeft`**: صفحے پر عنصر کی موجودہ پوزیشن حاصل کریں  
-- **تفریق کی منطق**: عنصر کو اتنا ہی حرکت دیں جتنا ماؤس حرکت کرتا ہے  
+```javascript
+function elementDrag(e) {
+    // Calculate the distance moved since the last event
+    pos1 = pos3 - e.clientX;  // Horizontal distance moved
+    pos2 = pos4 - e.clientY;  // Vertical distance moved
+    
+    // Update the current position tracking
+    pos3 = e.clientX;  // New current X position
+    pos4 = e.clientY;  // New current Y position
+    
+    // Apply the movement to the element's position
+    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
+}
+```
 
-**یہاں حرکت کے حساب کتاب کی تفصیل ہے:**  
-1. **پیمائش کریں** پرانے اور نئے ماؤس کی پوزیشن کے درمیان فرق  
-2. **حساب لگائیں** کہ ماؤس کی حرکت کی بنیاد پر عنصر کو کتنا حرکت دینا ہے  
-3. **اپ ڈیٹ کریں** عنصر کی CSS پوزیشن کی خصوصیات کو حقیقی وقت میں  
-4. **محفوظ کریں** نئی پوزیشن کو اگلی حرکت کے حساب کے لیے بنیاد کے طور پر  
+**کوآرڈینیٹ ریاضی کو سمجھنا:**
+- **`pos1` اور `pos2`**: حساب لگاتے ہیں کہ ماؤس آخری اپڈیٹ کے بعد کتنی دور چلا گیا ہے
+- **`pos3` اور `pos4`**: اگلے حساب کے لیے موجودہ ماؤس پوزیشن کو اسٹور کرتے ہیں
+- **`offsetTop` اور `offsetLeft`**: صفحے پر عنصر کی موجودہ پوزیشن حاصل کرتے ہیں
+- **سبٹریکشن منطق**: عنصر کو اتنی ہی مقدار میں حرکت دیتا ہے جتنی ماؤس نے حرکت کی
 
-### ریاضی کی بصری نمائندگی  
+```mermaid
+sequenceDiagram
+    participant User
+    participant Mouse
+    participant JavaScript
+    participant Plant
+    
+    User->>Mouse: Start drag at (100, 50)
+    Mouse->>JavaScript: pointerdown event
+    JavaScript->>JavaScript: Store initial position (pos3=100, pos4=50)
+    JavaScript->>JavaScript: Setup move/up listeners
+    
+    User->>Mouse: Move to (110, 60)
+    Mouse->>JavaScript: pointermove event
+    JavaScript->>JavaScript: Calculate: pos1=10, pos2=10
+    JavaScript->>Plant: Update: left += 10px, top += 10px
+    Plant->>Plant: Render at new position
+    
+    User->>Mouse: Release at (120, 65)
+    Mouse->>JavaScript: pointerup event
+    JavaScript->>JavaScript: Remove listeners
+    JavaScript->>JavaScript: Reset for next drag
+```
+
+**یہاں حرکت کے حساب کا خلاصہ ہے:**
+1. **پرانے اور نئے ماؤس پوزیشنز کے درمیان فرق کی پیمائش کرتا ہے**
+2. **عنصر کو ماؤس کی حرکت کی بنیاد پر حرکت دینے کی مقدار کا حساب لگاتا ہے**
+3. **عنصر کی CSS پوزیشن پراپرٹیز کو ریئل ٹائم میں اپڈیٹ کرتا ہے**
+4. **نئی پوزیشن کو اگلے حرکت کے حساب کے لیے بیس لائن کے طور پر اسٹور کرتا ہے**
+
+### ریاضی کی بصری نمائندگی
 
 ```mermaid
 sequenceDiagram
@@ -288,10 +477,10 @@ sequenceDiagram
     JavaScript->>Plant: Update position by +10px right, +10px down
     Plant->>Plant: Render at new position
 ```
-  
-### stopElementDrag فنکشن: صفائی کرنا  
 
-`elementDrag` کے بند کرنے والے کرلی بریکٹ کے بعد صفائی کا فنکشن شامل کریں:  
+### stopElementDrag فنکشن: صفائی کرنا
+
+`elementDrag` کے بند ہونے والے کرلی بریکٹ کے بعد صفائی کا فنکشن شامل کریں:
 
 ```javascript
 function stopElementDrag() {
@@ -300,136 +489,233 @@ function stopElementDrag() {
     document.onpointermove = null;
 }
 ```
-  
-**صفائی کیوں ضروری ہے:**  
-- **روکتا ہے** میموری لیک کو جو باقی رہنے والے ایونٹ لسٹنرز کی وجہ سے ہو سکتے ہیں  
-- **روکتا ہے** ڈریگنگ کا عمل جب صارف پلانٹ کو چھوڑتا ہے  
-- **اجازت دیتا ہے** دوسرے عناصر کو آزادانہ طور پر ڈریگ کرنے کی  
-- **سسٹم کو ری سیٹ کرتا ہے** اگلے ڈریگ آپریشن کے لیے  
 
-**صفائی کے بغیر کیا ہوتا ہے:**  
-- ایونٹ لسٹنرز ڈریگنگ کے رکنے کے بعد بھی چلتے رہتے ہیں  
-- کارکردگی خراب ہو جاتی ہے کیونکہ غیر استعمال شدہ لسٹنرز جمع ہو جاتے ہیں  
-- دوسرے عناصر کے ساتھ تعامل کرتے وقت غیر متوقع رویہ  
-- براؤزر کے وسائل غیر ضروری ایونٹ ہینڈلنگ پر ضائع ہوتے ہیں  
+**صفائی کیوں ضروری ہے:**
+- **میموری لیکس کو روکتا ہے** جو باقی رہنے والے ایونٹ لسٹنرز کی وجہ سے ہو سکتے ہیں
+- **ڈریگنگ کے رویے کو روکتا ہے** جب صارف پلانٹ کو چھوڑ دیتا ہے
+- **دوسرے عناصر کو آزادانہ طور پر ڈریگ کرنے کی اجازت دیتا ہے**
+- **اگلے ڈریگ آپریشن کے لیے سسٹم کو ری سیٹ کرتا ہے**
 
-### CSS پوزیشن کی خصوصیات کو سمجھنا  
+**صفائی کے بغیر کیا ہوتا ہے:**
+- ایونٹ لسٹنرز ڈریگنگ کے رکنے کے بعد بھی چلتے رہتے ہیں
+- پرفارمنس خراب ہو جاتی ہے کیونکہ غیر استعمال شدہ لسٹنرز جمع ہو جاتے ہیں
+- دوسرے عناصر کے ساتھ انٹریکشن میں غیر متوقع رویہ
+- براؤزر کے وسائل غیر ضروری ایونٹ ہینڈلنگ پر ضائع ہوتے ہیں
 
-ہمارا ڈریگنگ سسٹم دو اہم CSS خصوصیات کو تبدیل کرتا ہے:  
+### CSS پوزیشن پراپرٹیز کو سمجھنا
 
-| خصوصیت | یہ کیا کنٹرول کرتی ہے | ہم اسے کیسے استعمال کرتے ہیں |  
-|----------|------------------|---------------|  
-| `top` | اوپر کے کنارے سے فاصلہ | ڈریگ کے دوران عمودی پوزیشننگ |  
-| `left` | بائیں کنارے سے فاصلہ | ڈریگ کے دوران افقی پوزیشننگ |  
+ہمارا ڈریگنگ سسٹم دو اہم CSS پراپرٹیز کو تبدیل کرتا ہے:
 
-**آفسیٹ خصوصیات کے بارے میں اہم معلومات:**  
-- **`offsetTop`**: پوزیشنڈ پیرنٹ عنصر سے موجودہ فاصلہ اوپر کی طرف  
-- **`offsetLeft`**: پوزیشنڈ پیرنٹ عنصر سے موجودہ فاصلہ بائیں طرف  
-- **پوزیشننگ کا سیاق و سباق**: یہ اقدار قریب ترین پوزیشنڈ اجداد کے نسبت ہوتی ہیں  
-- **حقیقی وقت کی اپ ڈیٹس**: جب ہم CSS خصوصیات کو تبدیل کرتے ہیں تو فوری طور پر تبدیلیاں ہوتی ہیں  
+| پراپرٹی | کنٹرول کرتی ہے | ہم اسے کیسے استعمال کرتے ہیں |
+|----------|------------------|---------------|
+| `top` | اوپر کے کنارے سے فاصلہ | ڈریگ کے دوران عمودی پوزیشننگ |
+| `left` | بائیں کنارے سے فاصلہ | ڈریگ کے دوران افقی پوزیشننگ |
 
-> 🎯 **ڈیزائن فلسفہ**: یہ ڈریگ سسٹم جان بوجھ کر لچکدار بنایا گیا ہے – کوئی "ڈراپ زون" یا پابندیاں نہیں ہیں۔ صارفین پلانٹس کو کہیں بھی رکھ سکتے ہیں، انہیں اپنے ٹیریریم ڈیزائن پر مکمل تخلیقی کنٹرول دیتے ہیں۔  
+**آفسیٹ پراپرٹیز کے بارے میں اہم بصیرت:**
+- **`offsetTop`**: پوزیشنڈ پیرنٹ عنصر سے اوپر کا موجودہ فاصلہ
+- **`offsetLeft`**: پوزیشنڈ پیرنٹ عنصر سے بائیں کا موجودہ فاصلہ
+- **پوزیشننگ کا سیاق و سباق**: یہ قدریں قریب ترین پوزیشنڈ اجداد کے نسبت ہوتی ہیں
+- **ریئل ٹائم اپڈیٹس**: CSS پراپرٹیز کو تبدیل کرنے پر فوری تبدیلیاں
 
-## سب کچھ ایک ساتھ لانا: آپ کا مکمل ڈریگ سسٹم  
+> 🎯 **ڈیزائن فلسفہ**: یہ ڈریگ سسٹم جان بوجھ کر لچکدار ہے – کوئی "ڈراپ زونز" یا پابندیاں نہیں ہیں۔ صارفین پلانٹس کو کہیں بھی رکھ سکتے ہیں، انہیں اپنے ٹیریریم ڈیزائن پر مکمل تخلیقی کنٹرول دیتے ہیں۔
 
-مبارک ہو! آپ نے وینیلا جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک نفیس ڈریگ اینڈ ڈراپ سسٹم بنایا ہے۔ آپ کا مکمل `dragElement` فنکشن اب ایک طاقتور کلوزر پر مشتمل ہے جو مندرجہ ذیل کو منظم کرتا ہے:  
+## سب کچھ ایک ساتھ لانا: آپ کا مکمل ڈریگ سسٹم
 
-**آپ کا کلوزر کیا حاصل کرتا ہے:**  
-- **نجی پوزیشن متغیرات کو برقرار رکھتا ہے** ہر پلانٹ کے لیے آزادانہ طور پر  
-- **مکمل ڈریگ لائف سائیکل کو ہینڈل کرتا ہے** شروع سے آخر تک  
-- **پورے اسکرین پر ہموار، جوابدہ حرکت فراہم کرتا ہے**  
-- **وسائل کو صحیح طریقے سے صاف کرتا ہے** میموری لیک کو روکنے کے لیے  
-- **ٹریریم ڈیزائن کے لیے ایک بدیہی، تخلیقی انٹرفیس بناتا ہے**  
+مبارک ہو! آپ نے وینیلا جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک نفیس ڈریگ اینڈ ڈراپ سسٹم بنایا ہے۔ آپ کا مکمل `dragElement` فنکشن اب ایک طاقتور کلوزر پر مشتمل ہے جو مندرجہ ذیل کو منظم کرتا ہے:
 
-### اپنے انٹرایکٹو ٹیریریم کی جانچ کرنا  
+**آپ کا کلوزر کیا حاصل کرتا ہے:**
+- **ہر پلانٹ کے لیے نجی پوزیشن متغیرات کو برقرار رکھتا ہے**
+- **ڈریگ کے مکمل لائف سائیکل کو شروع سے آخر تک ہینڈل کرتا ہے**
+- **پورے اسکرین پر ہموار، ردعمل دینے والی حرکت فراہم کرتا ہے**
+- **وسائل کو صحیح طریقے سے صاف کرتا ہے تاکہ میموری لیکس سے بچا جا سکے**
+- **ٹریریم ڈیزائن کے لیے ایک بدیہی، تخلیقی انٹرفیس بناتا ہے**
 
-اب اپنے انٹرایکٹو ٹیریریم کی جانچ کریں! اپنے `index.html` فائل کو ویب براؤزر میں کھولیں اور فعالیت کو آزمائیں:  
+### اپنے انٹرایکٹو ٹیریریم کی جانچ کریں
 
-1. **کسی بھی پلانٹ پر کلک کریں اور پکڑیں** ڈریگنگ شروع کرنے کے لیے  
-2. **اپنا ماؤس یا انگلی حرکت دیں** اور دیکھیں کہ پلانٹ ہمواری سے پیروی کرتا ہے  
-3. **چھوڑیں** پلانٹ کو اس کی نئی پوزیشن میں چھوڑنے کے لیے  
-4. **مختلف انتظامات کے ساتھ تجربہ کریں** انٹرفیس کو دریافت کرنے کے لیے  
+اب اپنے انٹرایکٹو ٹیریریم کو جانچیں! اپنے `index.html` فائل کو ویب براؤزر میں کھولیں اور فعالیت کو آزمائیں:
 
-🥇 **کامیابی**: آپ نے ایک مکمل انٹرایکٹو ویب ایپلیکیشن بنائی ہے جو بنیادی تصورات کا استعمال کرتی ہے جو پیشہ ورانہ ڈویلپرز روزانہ استعمال کرتے ہیں۔ یہ ڈریگ اینڈ ڈراپ فعالیت وہی اصول استعمال کرتی ہے جو فائل اپلوڈز، کانبان بورڈز، اور بہت سے دوسرے انٹرایکٹو انٹرفیس کے پیچھے ہیں۔  
+1. **کسی بھی پلانٹ پر کلک کریں اور پکڑیں** تاکہ ڈریگنگ شروع ہو
+2. **اپنا ماؤس یا انگلی حرکت دیں** اور دیکھیں کہ پلانٹ ہموار طریقے سے پیچھے چلتا ہے
+3. **چھوڑیں** تاکہ پلانٹ کو اس کی نئی پوزیشن میں چھوڑ دیں
+4. **مختلف ترتیبوں کے ساتھ تجربہ کریں** تاکہ انٹرفیس کو دریافت کریں
 
-![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ur.png)  
+🥇 **کامیابی**: آپ نے ایک مکمل انٹرایکٹو ویب ایپلیکیشن بنائی ہے جو پیشہ ورانہ ڈویلپرز روزانہ استعمال کرتے ہیں۔ یہ ڈریگ اینڈ ڈراپ فعالیت وہی اصول استعمال کرتی ہے جو فائل اپلوڈز، کانبان بورڈز، اور بہت سے دوسرے انٹرایکٹو انٹرفیس کے پیچھے ہیں۔
+
+### 🔄 **تعلیمی جائزہ**
+**مکمل سسٹم کی سمجھ**: اپنے مکمل ڈریگ سسٹم کی مہارت کی تصدیق کریں:
+- ✅ کلوزرز ہر پلانٹ کے لیے آزادانہ حالت کو کیسے برقرار رکھتے ہیں؟
+- ✅ ہموار حرکت کے لیے کوآرڈینیٹ حساب کی ریاضی کیوں ضروری ہے؟
+- ✅ اگر ہم ایونٹ لسٹنرز کو صاف کرنا بھول جائیں تو کیا ہوگا؟
+- ✅ یہ پیٹرن زیادہ پیچیدہ انٹریکشنز کے لیے کیسے اسکیل کرتا ہے؟
+
+**کوڈ کوالٹی کا جائزہ**: اپنے مکمل حل کا جائزہ لیں:
+- **ماڈیولر ڈیزائن**: ہر پلانٹ کو اپنا کلوزر انسٹینس ملتا ہے
+- **ایونٹ کی کارکردگی**: لسٹنرز کی مناسب سیٹ اپ اور صفائی
+- **کراس ڈیوائس سپورٹ**: ڈیسک ٹاپ اور موبائل پر کام کرتا ہے
+- **پرفارمنس کا خیال**: کوئی میموری لیکس یا غیر ضروری حسابات نہیں
+
+![مکمل شدہ ٹیریریم](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ur.png)
 
 ---
 
-## GitHub Copilot Agent Challenge 🚀  
+## GitHub Copilot Agent Challenge 🚀
+
+ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:  
+**تفصیل:** ٹیریریم پروجیکٹ میں ایک ری سیٹ فعالیت شامل کریں جو تمام پلانٹس کو ان کی اصل پوزیشنز پر ہموار اینیمیشنز کے ساتھ واپس لے جائے۔
 
-**تفصیل:** ٹیریریم پروجیکٹ میں ایک ری سیٹ فعالیت شامل کریں جو تمام پلانٹس کو ان کی اصل پوزیشنز پر ہموار اینیمیشنز کے ساتھ واپس لے جائے۔  
+**پرومپٹ:** ایک ری سیٹ بٹن بنائیں جو کلک کرنے پر تمام پلانٹس کو ان کی اصل سائیڈبار پوزیشنز پر CSS ٹرانزیشنز کا استعمال کرتے ہوئے 1 سیکنڈ میں واپس لے جائے۔ فنکشن کو صفحہ لوڈ ہونے پر اصل پوزیشنز اسٹور کرنی چاہیے اور ری سیٹ بٹن دبانے پر پلانٹس کو ان پوزیشنز پر ہموار طریقے سے منتقل کرنا چاہیے۔
 
-**پرومپٹ:** ایک ری سیٹ بٹن بنائیں جو کلک کرنے پر تمام پلانٹس کو ان کی اصل سائیڈبار پوزیشنز پر CSS ٹرانزیشنز کا استعمال کرتے ہوئے 1 سیکنڈ کے اندر ہمواری سے واپس لے جائے۔ فنکشن کو صفحہ لوڈ ہونے پر اصل پوزیشنز کو محفوظ کرنا چاہیے اور ری سیٹ بٹن دبانے پر پلانٹس کو ان پوزیشنز پر منتقل کرنا چاہیے۔  
+[ایجنٹ موڈ کے بارے میں مزید جانیں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) یہاں۔
 
-مزید جانیں [ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں یہاں۔  
+## 🚀 اضافی چیلنج: اپنی مہارت کو بڑھائیں
 
-## 🚀 اضافی چیلنج: اپنی مہارت کو بڑھائیں  
+اپنے ٹیریریم کو اگلے درجے پر لے جانے کے لیے تیار ہیں؟ ان اضافوں کو نافذ کرنے کی کوشش کریں:
 
-اپنے ٹیریریم کو اگلے درجے پر لے جانے کے لیے تیار ہیں؟ ان اضافوں کو نافذ کرنے کی کوشش کریں:  
+**تخلیقی توسیعات:**
+- **ڈبل کلک** کریں کسی پلانٹ پر تاکہ اسے سامنے لایا جا سکے (z-index میں تبدیلی)
+- **بصری فیڈبیک شامل کریں** جیسے پلانٹس پر ہور کرنے پر ہلکی روشنی
+- **حدود نافذ کریں** تاکہ پلانٹس کو ٹیریریم کے باہر ڈریگ کرنے سے روکا جا سکے
+- **ایک سیو فنکشن بنائیں** جو پلانٹ پوزیشنز کو localStorage میں یاد رکھے
+- **آواز کے اثرات شامل کریں** پلانٹس کو اٹھانے اور رکھنے کے لیے
 
-**تخلیقی توسیعات:**  
-- **ڈبل کلک کریں** کسی پلانٹ پر اسے سامنے لانے کے لیے (z-index میں تبدیلی)  
-- **بصری تاثرات شامل کریں** جیسے پلانٹس پر ہور کرنے پر ہلکی روشنی  
-- **حدود نافذ کریں** تاکہ پلانٹس کو ٹیریریم کے باہر ڈریگ کرنے سے روکا جا سکے  
-- **ایک سیو فنکشن بنائیں** جو پلانٹ کی پوزیشنز کو لوکل اسٹوریج میں یاد رکھے  
-- **آواز کے اثرات شامل کریں** پلانٹس کو اٹھانے اور رکھنے کے لیے  
+> 💡 **سیکھنے کا موقع**: ان میں سے ہر چیلنج آپ کو DOM مینپولیشن، ایونٹ ہینڈلنگ، اور یوزر ایکسپیرینس ڈیزائن کے نئے پہلو سکھائے گا۔
 
-> 💡 **سیکھنے کا موقع**: ان میں سے ہر چیلنج آپ کو DOM مینپولیشن، ایونٹ ہینڈلنگ، اور صارف کے تجربے کے ڈیزائن کے نئے پہلو سکھائے گا۔  
+## پوسٹ لیکچر کوئز
 
-## لیکچر کے بعد کا کوئز  
+[پوسٹ لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/20)
 
-[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/20)  
+## جائزہ اور خود مطالعہ: اپنی سمجھ کو گہرا کریں
 
-## جائزہ اور خود مطالعہ: اپنی سمجھ کو گہرا کرنا  
+آپ نے DOM مینپولیشن اور کلوزرز کے بنیادی اصولوں میں مہارت حاصل کر لی ہے، لیکن ہمیشہ مزید دریافت کرنے کے لیے کچھ ہوتا ہے! یہاں کچھ راستے ہیں اپنی معلومات اور مہارت کو بڑھانے کے لیے۔
 
-آپ نے DOM مینپولیشن اور کلوزرز کے بنیادی اصولوں میں مہارت حاصل کر لی ہے، لیکن ہمیشہ مزید دریافت کرنے کے لیے موجود ہے! یہاں کچھ راستے ہیں اپنی معلومات اور مہارت کو بڑھانے کے لیے۔  
+### متبادل ڈریگ اینڈ ڈراپ طریقے
 
-### متبادل ڈریگ اینڈ ڈراپ طریقے  
+ہم نے زیادہ سے زیادہ لچک کے لیے پوائنٹر ایونٹس استعمال کیے، لیکن ویب ڈویلپمنٹ متعدد طریقے پیش کرتا ہے:
 
-ہم نے زیادہ سے زیادہ لچک کے لیے پوائنٹر ایونٹس کا استعمال کیا، لیکن ویب ڈویلپمنٹ متعدد طریقے پیش کرتا ہے:  
+| طریقہ | بہترین استعمال | سیکھنے کی قدر |
+|----------|----------|----------------|
+| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | فائل اپلوڈز، رسمی ڈریگ زونز | براؤزر کی نیٹو صلاحیتوں کو سمجھنا |
+| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | موبائل مخصوص انٹریکشنز | موبائل فرسٹ ڈویلپمنٹ پیٹرنز |
+| CSS `transform` پراپرٹیز | ہموار اینیمیشنز | پرفارمنس آپٹیمائزیشن تکنیکس |
 
-| طریقہ | بہترین استعمال | سیکھنے کی قدر |  
-|----------|----------|----------------|  
-| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | فائل اپلوڈز، رسمی ڈریگ زونز | براؤزر کی مقامی صلاحیتوں کو سمجھنا |  
-| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | موبائل مخصوص تعاملات | موبائل فرسٹ ڈویلپمنٹ پیٹرنز |  
-| CSS `transform` خصوصیات | ہموار اینیمیشنز | کارکردگی کی اصلاح کی تکنیکیں |  
+### ایڈوانسڈ DOM مینپولیشن موضوعات
 
-### ایڈوانسڈ DOM مینپولیشن موضوعات  
+**آپ کے سیکھنے کے سفر میں اگلے مراحل:**
+- **ایونٹ ڈیلیگیشن**: متعدد عناصر کے لیے ایونٹس کو مؤثر طریقے سے ہینڈل کرنا
+- **Intersection Observer**: عناصر کے ویوپورٹ میں داخل ہونے/چھوڑنے کا پتہ لگانا
+- **Mutation Observer**: DOM اسٹرکچر میں تبدیلیوں کو دیکھنا
+- **Web Components**: دوبارہ استعمال کے قابل، انکیپسولیٹڈ UI عناصر بنانا
+- **Virtual DOM تصورات**: یہ سمجھنا کہ فریم ورک DOM اپڈیٹس کو کیسے بہتر بناتے ہیں
 
-**آپ کے سیکھنے کے سفر میں اگلے مراحل:**  
-- **ایونٹ ڈیلیگیشن**: متعدد عناصر کے لیے ایونٹس کو مؤثر طریقے سے ہینڈل کرنا  
-- **انٹرسیکشن آبزرور**: جب عناصر ویوپورٹ میں داخل/نکلتے ہیں تو پتہ لگانا  
-- **میوٹیشن آبزرور**: DOM ساخت میں تبدیلیوں کو دیکھنا  
-- **ویب کمپوننٹس**: دوبارہ استعمال کے قابل، انکیپسولیٹڈ UI عناصر بنانا  
-- **ورچوئل DOM تصورات**: یہ سمجھنا کہ فریم ورک کیسے DOM اپ ڈیٹس کو بہتر بناتے ہیں  
+### مسلسل سیکھنے کے لیے ضروری وسائل
 
-### مسلسل سیکھنے کے لیے ضروری وسائل  
+**تکنیکی دستاویزات:**
+- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - جامع پوائنٹر ایونٹ ریفرنس
+- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - آفیشل اسٹینڈرڈز دستاویزات
+- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - ایڈوانسڈ کلوزر پیٹرنز
 
-**تکنیکی دستاویزات:**  
-- [MDN پوائنٹر ایونٹس گائیڈ](https://developer.mozilla.org/docs/Web/API/Pointer_events) - جامع پوائنٹر ایونٹ حوالہ  
-- [W3C پوائنٹر ایونٹس وضاحت](https://www.w3.org/TR/pointerevents1/) - آفیشل معیارات کی دستاویزات  
-- [جاوا اسکرپٹ کلوزرز ڈیپ ڈائیو](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - ایڈوانسڈ کلوزر پیٹرنز  
+**براؤزر مطابقت:**
+- [CanIUse.com](https://caniuse.com/) - فیچر سپورٹ کو براؤزرز میں چیک کریں
+- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - تفصیلی مطابقت کی معلومات
 
-**براؤزر مطابقت:**  
-- [CanIUse.com](https://caniuse.com/) - مختلف براؤزرز میں فیچر سپورٹ چیک کریں  
-- [MDN براؤزر مطابقت ڈیٹا](https://github.com/mdn/browser-compat-data) - تفصیلی مطابقت کی معلومات  
+**پریکٹس کے مواقع:**
+- **بنائیں** ایک پزل گیم جو اسی ڈریگ میکینکس کا استعمال کرتا ہے
+- **کریٹ کریں** ایک کانبان بورڈ ڈریگ اینڈ ڈراپ ٹاسک مینجمنٹ کے ساتھ
+- **ڈیزائن کریں** ایک امیج گیلری ڈریگ ایبل فوٹو ارینجمنٹ کے ساتھ
+- **ایکسپیریمنٹ کریں** موبائل انٹرفیس کے لیے ٹچ جیسچرز کے ساتھ
 
-**عملی مواقع:**  
-- **ایک پہیلی گیم بنائیں** اسی ڈریگ میکینکس کا استعمال کرتے ہوئے  
-- **ایک کانبان بورڈ بنائیں** ڈریگ اینڈ ڈراپ ٹاسک مینجمنٹ کے ساتھ  
-- **ایک امیج گیلری ڈیزائن کریں** ڈریگ ایبل فوٹو انتظامات کے ساتھ  
-- **موبائل انٹرفیس کے لیے ٹچ اشاروں کے ساتھ تجربہ کریں**  
+> 🎯 **سیکھنے کی حکمت عملی**: ان تصورات کو مضبوط کرنے کا بہترین طریقہ پریکٹس ہے۔ ڈریگ ایبل انٹرفیس کی مختلف اقسام بنانے کی کوشش کریں – ہر پروجیکٹ آپ کو یوزر انٹریکشن اور DOM مینپولیشن کے بارے میں کچھ نیا سکھائے گا۔
 
-> 🎯 **سیکھنے کی حکمت عملی**: ان تصورات کو مضبوط کرنے کا بہترین طریقہ عملی ہے۔ ڈریگ ایبل انٹرفیس کی مختلف اقسام بنانے کی کوشش کریں – ہر پروجیکٹ آپ کو صارف کے تعامل اور DOM مینپولیشن کے بارے میں کچھ نیا سکھائے گا۔  
+### ⚡ **آپ اگلے 5 منٹ میں کیا کر سکتے ہیں**
+- [ ] براؤزر DevTools کھولیں اور کنسول میں `document.querySelector('body')` ٹائپ کریں
+- [ ] کسی ویب پیج کے متن کو `innerHTML` یا `textContent` کا استعمال کرتے ہوئے تبدیل کرنے کی کوشش کریں
+- [ ] کسی بھی بٹن یا لنک پر کلک ایونٹ لسٹنر شامل کریں
+- [ ] Elements پینل کا استعمال کرتے ہوئے DOM ٹری اسٹرکچر کا معائنہ کریں
+
+### 🎯 **آپ اس گھنٹے میں کیا حاصل کر سکتے ہیں**
+- [ ] پوسٹ لیکچر کوئز مکمل کریں اور DOM مینپولیشن تصورات کا جائزہ لیں
+- [ ] ایک انٹرایکٹو ویب پیج بنائیں جو یوزر کلکس کا جواب دیتا ہو
+- [ ] مختلف ایونٹ ٹائپس (کلک، ماؤس اوور، کی پریس) کے ساتھ ایونٹ ہینڈلنگ کی مشق کریں
+- [ ] ایک سادہ ٹو-ڈو لسٹ یا کاؤنٹر DOM مینپولیشن کا استعمال کرتے ہوئے بنائیں
+- [ ] HTML عناصر اور جاوا اسکرپٹ آبجیکٹس کے درمیان تعلق کو دریافت کریں
+
+### 📅 **آپ کا ہفتہ بھر کا جاوا اسکرپٹ سفر**
+- [ ] انٹرایکٹو ٹیریریم پروجیکٹ مکمل کریں ڈریگ اینڈ ڈراپ فعالیت کے ساتھ
+- [ ] ایونٹ ڈیلیگیشن میں مہارت حاصل کریں مؤثر ایونٹ ہینڈلنگ کے لیے
+- [ ] ایونٹ لوپ اور اسینکرونس جاوا اسکرپٹ کے بارے میں سیکھیں
+- [ ] کلوزرز کی مشق کریں نجی حالت کے ساتھ ماڈیولز بنا کر
+- [ ] جدید DOM APIs جیسے Intersection Observer کو دریافت کریں
+- [ ] فریم ورک کے بغیر انٹرایکٹو کمپوننٹس بنائیں
+
+### 🌟 **آپ کی ماہ بھر کی جاوا اسکرپٹ مہارت**
+- [ ] وینیلا جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک پیچیدہ سنگل پیج ایپلیکیشن بنائیں
+- [ ] ایک جدید فریم ورک (React، Vue، یا Angular) سیکھیں اور اسے وینیلا DOM کے ساتھ موازنہ کریں
+- [ ] اوپن سورس جاوا اسکرپٹ پروجیکٹس میں تعاون کریں
+- [ ] ایڈوانسڈ تصورات جیسے ویب کمپوننٹس اور کسٹم ایلیمنٹس میں مہارت حاصل کریں
+- [ ] بہترین DOM پیٹرنز کے ساتھ پرفارمنٹ ویب ایپلیکیشنز بنائیں
+- [ ] DOM مینپولیشن اور جاوا اسکرپٹ بنیادی اصولوں کے بارے میں دوسروں کو سکھائیں
+
+## 🎯 آپ کا جاوا اسکرپٹ DOM مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title DOM & JavaScript Learning Progression
+    
+    section Foundation (15 minutes)
+        DOM Understanding: Element selection methods
+                         : Tree structure navigation
+                         : Property access patterns
+        
+    section Event Handling (20 minutes)
+        User Interaction: Pointer event basics
+                        : Event listener setup
+                        : Cross-device compatibility
+                        : Event prevention techniques
+        
+    section Closures (25 minutes)
+        Scope Management: Private variable creation
+                        : Function persistence
+                        : State management patterns
+                        : Memory efficiency
+        
+    section Drag System (30 minutes)
+        Interactive Features: Coordinate tracking
+                            : Position calculation
+                            : Movement mathematics
+                            : Cleanup procedures
+        
+    section Advanced Patterns (45 minutes)
+        Professional Skills: Event delegation
+                           : Performance optimization
+                           : Error handling
+                           : Accessibility considerations
+        
+    section Framework Understanding (1 week)
+        Modern Development: Virtual DOM concepts
+                          : State management libraries
+                          : Component architectures
+                          : Build tool integration
+        
+    section Expert Level (1 month)
+        Advanced DOM APIs: Intersection Observer
+                         : Mutation Observer
+                         : Custom Elements
+                         : Web Components
+```
 
-## اسائنمنٹ  
+### 🛠️ آپ کا جاوا اسکرپٹ ٹول کٹ کا خلاصہ
 
-[DOM کے ساتھ تھوڑا اور کام کریں](assignment.md)  
+اس سبق کو مکمل کرنے کے بعد، آپ کے پاس:
+- **DOM مہارت**: عنصر کا انتخاب، پراپرٹی مینپولیشن، اور ٹری نیویگیشن
+- **ایونٹ مہارت**: پوائنٹر ایونٹس کے ساتھ کراس ڈیوائس انٹریکشن ہینڈلنگ
+- **کلوزر کی سمجھ**: نجی حالت کا انتظام اور فنکشن کی مستقل مزاجی
+- **انٹرایکٹو سسٹمز**: شروع سے مکمل ڈریگ اینڈ ڈراپ عمل درآمد
+- **پرفارمنس آگاہی**: ایونٹ کی صفائی اور میموری مینجمنٹ
+- **جدید پیٹرنز**: پیشہ ورانہ ترقی میں استعمال ہونے والے کوڈ آرگنائزیشن تکنیکس
+- **یوزر ایکسپیرینس**: بدیہی، ردعمل دینے والے ان
 
 ---
 
-**اعلانِ لاتعلقی**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**ڈسکلیمر**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/4-typing-game/README.md b/translations/ur/4-typing-game/README.md
index 154ed80cbd..5dd7cbf2df 100644
--- a/translations/ur/4-typing-game/README.md
+++ b/translations/ur/4-typing-game/README.md
@@ -1,29 +1,142 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5adea7059676fcdb1b546ccd54c956c2",
-  "translation_date": "2025-10-22T15:05:54+00:00",
+  "original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
+  "translation_date": "2025-11-03T13:27:08+00:00",
   "source_file": "4-typing-game/README.md",
   "language_code": "ur"
 }
 -->
 # ایونٹ ڈرائیون پروگرامنگ - ایک ٹائپنگ گیم بنائیں
 
+```mermaid
+journey
+    title Your Typing Game Development Journey
+    section Foundation
+      Plan game structure: 3: Student
+      Design user interface: 4: Student
+      Setup HTML elements: 4: Student
+    section Functionality
+      Handle user input: 4: Student
+      Track timing: 5: Student
+      Calculate accuracy: 5: Student
+    section Features
+      Add visual feedback: 5: Student
+      Implement game logic: 5: Student
+      Polish experience: 5: Student
+```
+
 ## تعارف
 
-یہ ایک ایسی بات ہے جو ہر ڈویلپر جانتا ہے لیکن کم ہی اس پر بات کرتا ہے: تیز ٹائپنگ ایک سپر پاور ہے! 🚀 ذرا سوچیں - جتنی جلدی آپ اپنے خیالات کو اپنے دماغ سے کوڈ ایڈیٹر تک پہنچا سکتے ہیں، اتنی ہی زیادہ آپ کی تخلیقی صلاحیت بہہ سکتی ہے۔ یہ بالکل ایسے ہے جیسے آپ کے خیالات اور اسکرین کے درمیان ایک سیدھا راستہ ہو۔
+یہ ایک حقیقت ہے جو ہر ڈویلپر جانتا ہے لیکن کم ہی اس پر بات کرتا ہے: تیز ٹائپنگ ایک سپر پاور ہے! 🚀 سوچیں - جتنا جلدی آپ اپنے خیالات کو اپنے دماغ سے کوڈ ایڈیٹر تک پہنچا سکتے ہیں، اتنا ہی زیادہ آپ کی تخلیقی صلاحیتیں بہہ سکتی ہیں۔ یہ بالکل ایسے ہے جیسے آپ کے خیالات اور اسکرین کے درمیان ایک سیدھا راستہ ہو۔
+
+```mermaid
+pie title Game Features
+    "Real-time Feedback" : 25
+    "Performance Tracking" : 20
+    "Interactive UI" : 20
+    "Timer System" : 15
+    "Quote Management" : 10
+    "Results Display" : 10
+```
 
 کیا آپ جاننا چاہتے ہیں کہ اس مہارت کو بہتر بنانے کا بہترین طریقہ کیا ہے؟ آپ نے صحیح اندازہ لگایا - ہم ایک گیم بنانے جا رہے ہیں!
 
+```mermaid
+flowchart LR
+    A[Player starts game] --> B[Random quote displayed]
+    B --> C[Player types characters]
+    C --> D{Character correct?}
+    D -->|Yes| E[Green highlight]
+    D -->|No| F[Red highlight]
+    E --> G[Update accuracy]
+    F --> G
+    G --> H{Quote complete?}
+    H -->|No| C
+    H -->|Yes| I[Calculate WPM]
+    I --> J[Display results]
+    J --> K[Play again?]
+    K -->|Yes| B
+    K -->|No| L[Game over]
+    
+    style A fill:#e1f5fe
+    style D fill:#fff3e0
+    style E fill:#e8f5e8
+    style F fill:#ffebee
+    style I fill:#f3e5f5
+```
+
 > آئیے مل کر ایک زبردست ٹائپنگ گیم بناتے ہیں!
 
-تیار ہیں کہ آپ نے جو جاوا اسکرپٹ، ایچ ٹی ایم ایل، اور سی ایس ایس کی مہارتیں سیکھی ہیں انہیں کام میں لائیں؟ ہم ایک ٹائپنگ گیم بنائیں گے جو آپ کو لیجنڈری ڈیٹیکٹیو [شرلاک ہومز](https://en.wikipedia.org/wiki/Sherlock_Holmes) کے بے ترتیب اقتباسات کے ساتھ چیلنج کرے گا۔ یہ گیم آپ کی ٹائپنگ کی رفتار اور درستگی کو ٹریک کرے گا - اور یقین کریں، یہ آپ کے خیال سے زیادہ دلچسپ ہے!
+تیار ہیں کہ آپ نے جو جاوا اسکرپٹ، ایچ ٹی ایم ایل، اور سی ایس ایس کی مہارتیں سیکھی ہیں انہیں استعمال کریں؟ ہم ایک ٹائپنگ گیم بنائیں گے جو آپ کو لیجنڈری ڈیٹیکٹیو [شرلاک ہومز](https://en.wikipedia.org/wiki/Sherlock_Holmes) کے بے ترتیب اقتباسات کے ساتھ چیلنج کرے گا۔ یہ گیم آپ کی ٹائپنگ کی رفتار اور درستگی کو ٹریک کرے گا - اور یقین کریں، یہ آپ کے خیال سے زیادہ دلچسپ ہے!
+
+```mermaid
+mindmap
+  root((Typing Game Development))
+    User Interface
+      Input Elements
+      Visual Feedback
+      Responsive Design
+      Accessibility
+    Game Logic
+      Quote Selection
+      Timer Management
+      Accuracy Tracking
+      Score Calculation
+    Event Handling
+      Keyboard Input
+      Button Clicks
+      Real-time Updates
+      Game State Changes
+    Performance Metrics
+      Words Per Minute
+      Character Accuracy
+      Error Tracking
+      Progress Display
+    User Experience
+      Immediate Feedback
+      Clear Instructions
+      Engaging Content
+      Achievement System
+```
 
 ![demo](../../../4-typing-game/images/demo.gif)
 
 ## آپ کو کیا جاننا ہوگا
 
-شروع کرنے سے پہلے، یہ یقینی بنائیں کہ آپ ان تصورات سے واقف ہیں (اگر آپ کو تھوڑا سا یاد دہانی کی ضرورت ہو تو فکر نہ کریں - ہم سب وہاں سے گزرے ہیں!):
+```mermaid
+flowchart TD
+    A[User Action] --> B{Event Type?}
+    B -->|Key Press| C[Keyboard Event]
+    B -->|Button Click| D[Mouse Event]
+    B -->|Timer| E[Time Event]
+    
+    C --> F[Check Character]
+    D --> G[Start/Reset Game]
+    E --> H[Update Timer]
+    
+    F --> I{Correct?}
+    I -->|Yes| J[Highlight Green]
+    I -->|No| K[Highlight Red]
+    
+    J --> L[Update Score]
+    K --> L
+    L --> M[Check Game State]
+    
+    G --> N[Generate New Quote]
+    H --> O[Display Time]
+    
+    M --> P{Game Complete?}
+    P -->|Yes| Q[Show Results]
+    P -->|No| R[Continue Game]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#fff3e0
+    style Q fill:#f3e5f5
+```
+
+شروع کرنے سے پہلے، یقینی بنائیں کہ آپ ان تصورات سے واقف ہیں (اگر آپ کو تھوڑا سا ریفریشر کی ضرورت ہو تو فکر نہ کریں - ہم سب وہاں سے گزرے ہیں!):
 
 - ٹیکسٹ ان پٹ اور بٹن کنٹرولز بنانا
 - سی ایس ایس اور کلاسز کے ذریعے اسٹائل سیٹ کرنا  
@@ -32,17 +145,151 @@ CO_OP_TRANSLATOR_METADATA:
   - ایک بے ترتیب نمبر بنانا
   - موجودہ وقت حاصل کرنا
 
-اگر ان میں سے کوئی چیز تھوڑی سی بھولی ہوئی لگے، تو بالکل ٹھیک ہے! کبھی کبھی اپنے علم کو مضبوط کرنے کا بہترین طریقہ یہ ہے کہ کسی پروجیکٹ میں کود جائیں اور چیزوں کو راستے میں سیکھیں۔
+اگر ان میں سے کوئی چیز تھوڑی سی کمزور لگتی ہے، تو یہ بالکل ٹھیک ہے! کبھی کبھی اپنے علم کو مضبوط کرنے کا بہترین طریقہ یہ ہے کہ کسی پروجیکٹ میں کودیں اور چیزوں کو راستے میں سیکھیں۔
 
-## آئیے اسے بنائیں!
+### 🔄 **تعلیمی جائزہ**
+**بنیادی تشخیص**: ترقی شروع کرنے سے پہلے، یقینی بنائیں کہ آپ سمجھتے ہیں:
+- ✅ ایچ ٹی ایم ایل فارم اور ان پٹ عناصر کیسے کام کرتے ہیں
+- ✅ سی ایس ایس کلاسز اور ڈائنامک اسٹائلنگ
+- ✅ جاوا اسکرپٹ ایونٹ لسٹنرز اور ہینڈلرز
+- ✅ ارے کی ہیرا پھیری اور بے ترتیب انتخاب
+- ✅ وقت کی پیمائش اور حسابات
+
+**خود کا فوری ٹیسٹ**: کیا آپ وضاحت کر سکتے ہیں کہ یہ تصورات ایک انٹرایکٹو گیم میں کیسے کام کرتے ہیں؟
+- **ایونٹس** اس وقت ٹرگر ہوتے ہیں جب صارف عناصر کے ساتھ تعامل کرتے ہیں
+- **ہینڈلرز** ان ایونٹس کو پروسیس کرتے ہیں اور گیم کی حالت کو اپ ڈیٹ کرتے ہیں
+- **سی ایس ایس** صارف کے اعمال کے لیے بصری فیڈبیک فراہم کرتا ہے
+- **ٹائمنگ** کارکردگی کی پیمائش اور گیم کی ترقی کو فعال کرتی ہے
+
+```mermaid
+quadrantChart
+    title Typing Game Skills Development
+    x-axis Beginner --> Expert
+    y-axis Static --> Interactive
+    quadrant-1 Advanced Games
+    quadrant-2 Real-time Apps
+    quadrant-3 Basic Pages
+    quadrant-4 Interactive Sites
+    
+    HTML Forms: [0.3, 0.2]
+    CSS Styling: [0.4, 0.3]
+    Event Handling: [0.7, 0.8]
+    Game Logic: [0.8, 0.9]
+    Performance Tracking: [0.9, 0.7]
+```
+
+## آئیے اس چیز کو بنائیں!
 
 [ایونٹ ڈرائیون پروگرامنگ کے ذریعے ٹائپنگ گیم بنانا](./typing-game/README.md)
 
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] اپنے براؤزر کنسول کو کھولیں اور `addEventListener` کے ساتھ کی بورڈ ایونٹس سننے کی کوشش کریں
+- [ ] ایک سادہ ایچ ٹی ایم ایل صفحہ بنائیں جس میں ایک ان پٹ فیلڈ ہو اور ٹائپنگ ڈیٹیکشن کی جانچ کریں
+- [ ] اسٹرنگ مینپولیشن کی مشق کریں تاکہ ٹائپ کردہ متن کو ہدف متن کے ساتھ موازنہ کریں
+- [ ] `setTimeout` کے ساتھ تجربہ کریں تاکہ ٹائمنگ فنکشنز کو سمجھ سکیں
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] سبق کے بعد کا کوئز مکمل کریں اور ایونٹ ڈرائیون پروگرامنگ کو سمجھیں
+- [ ] ٹائپنگ گیم کا ایک بنیادی ورژن بنائیں جس میں لفظ کی تصدیق ہو
+- [ ] درست اور غلط ٹائپنگ کے لیے بصری فیڈبیک شامل کریں
+- [ ] رفتار اور درستگی کی بنیاد پر ایک سادہ اسکورنگ سسٹم نافذ کریں
+- [ ] اپنے گیم کو سی ایس ایس کے ساتھ اسٹائل کریں تاکہ یہ بصری طور پر دلکش ہو
+
+### 📅 **آپ کی ہفتہ بھر کی گیم ڈیولپمنٹ**
+- [ ] مکمل ٹائپنگ گیم تمام خصوصیات اور پالش کے ساتھ مکمل کریں
+- [ ] مختلف لفظی پیچیدگی کے ساتھ مشکل کی سطحیں شامل کریں
+- [ ] صارف کے اعدادوشمار کو ٹریک کریں (WPM، وقت کے ساتھ درستگی)
+- [ ] بہتر صارف تجربے کے لیے ساؤنڈ ایفیکٹس اور اینیمیشنز بنائیں
+- [ ] اپنے گیم کو موبائل کے لیے ریسپانسیو بنائیں تاکہ ٹچ ڈیوائسز پر کام کرے
+- [ ] اپنا گیم آن لائن شیئر کریں اور صارفین سے فیڈبیک حاصل کریں
+
+### 🌟 **آپ کی مہینے بھر کی انٹرایکٹو ڈیولپمنٹ**
+- [ ] مختلف انٹرایکشن پیٹرنز کو دریافت کرتے ہوئے متعدد گیمز بنائیں
+- [ ] گیم لوپس، اسٹیٹ مینجمنٹ، اور کارکردگی کی اصلاح کے بارے میں سیکھیں
+- [ ] اوپن سورس گیم ڈیولپمنٹ پروجیکٹس میں حصہ لیں
+- [ ] جدید ٹائمنگ تصورات اور ہموار اینیمیشنز میں مہارت حاصل کریں
+- [ ] مختلف انٹرایکٹو ایپلیکیشنز کو دکھانے والا پورٹ فولیو بنائیں
+- [ ] گیم ڈیولپمنٹ اور صارف کے تعامل میں دلچسپی رکھنے والوں کی رہنمائی کریں
+
+## 🎯 آپ کی ٹائپنگ گیم مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title Game Development Learning Progression
+    
+    section Setup (10 minutes)
+        Project Structure: HTML foundation
+                         : CSS styling setup
+                         : JavaScript file creation
+        
+    section User Interface (20 minutes)
+        Interactive Elements: Input fields
+                            : Button controls
+                            : Display areas
+                            : Responsive layout
+        
+    section Event Handling (25 minutes)
+        User Interaction: Keyboard events
+                        : Mouse events
+                        : Real-time feedback
+                        : State management
+        
+    section Game Logic (30 minutes)
+        Core Functionality: Quote generation
+                          : Character comparison
+                          : Accuracy calculation
+                          : Timer implementation
+        
+    section Performance Tracking (35 minutes)
+        Metrics & Analytics: WPM calculation
+                           : Error tracking
+                           : Progress visualization
+                           : Results display
+        
+    section Polish & Enhancement (45 minutes)
+        User Experience: Visual feedback
+                       : Sound effects
+                       : Animations
+                       : Accessibility features
+        
+    section Advanced Features (1 week)
+        Extended Functionality: Difficulty levels
+                              : Leaderboards
+                              : Custom quotes
+                              : Multiplayer options
+        
+    section Professional Skills (1 month)
+        Game Development: Performance optimization
+                        : Code architecture
+                        : Testing strategies
+                        : Deployment patterns
+```
+
+### 🛠️ آپ کے گیم ڈیولپمنٹ ٹول کٹ کا خلاصہ
+
+اس پروجیکٹ کو مکمل کرنے کے بعد، آپ مہارت حاصل کر چکے ہوں گے:
+- **ایونٹ ڈرائیون پروگرامنگ**: صارف کے انٹرفیس جو ان پٹ پر ردعمل دیتے ہیں
+- **ریئل ٹائم فیڈبیک**: فوری بصری اور کارکردگی کی اپ ڈیٹس
+- **کارکردگی کی پیمائش**: درست ٹائمنگ اور اسکورنگ سسٹمز
+- **گیم اسٹیٹ مینجمنٹ**: ایپلیکیشن کے بہاؤ اور صارف کے تجربے کو کنٹرول کرنا
+- **انٹرایکٹو ڈیزائن**: دلکش، دلچسپ صارف کے تجربات بنانا
+- **جدید ویب APIs**: براؤزر کی صلاحیتوں کو بھرپور انٹرایکشنز کے لیے استعمال کرنا
+- **ایکسس ایبلٹی پیٹرنز**: تمام صارفین کے لیے شامل ڈیزائن
+
+**حقیقی دنیا کی ایپلیکیشنز**: یہ مہارتیں براہ راست ان پر لاگو ہوتی ہیں:
+- **ویب ایپلیکیشنز**: کوئی بھی انٹرایکٹو انٹرفیس یا ڈیش بورڈ
+- **تعلیمی سافٹ ویئر**: لرننگ پلیٹ فارمز اور مہارت کی تشخیص کے ٹولز
+- **پروڈکٹیویٹی ٹولز**: ٹیکسٹ ایڈیٹرز، IDEs، اور تعاون کے سافٹ ویئر
+- **گیمنگ انڈسٹری**: براؤزر گیمز اور انٹرایکٹو انٹرٹینمنٹ
+- **موبائل ڈیولپمنٹ**: ٹچ بیسڈ انٹرفیس اور اشاروں کی ہینڈلنگ
+
+**اگلا مرحلہ**: آپ ایڈوانسڈ گیم فریم ورک، ریئل ٹائم ملٹی پلیئر سسٹمز، یا پیچیدہ انٹرایکٹو ایپلیکیشنز کو دریافت کرنے کے لیے تیار ہیں!
+
 ## کریڈٹس
 
-محبت کے ساتھ لکھا گیا [کرسٹوفر ہیریسن](http://www.twitter.com/geektrainer)
+محبت کے ساتھ لکھا گیا [کرسٹوفر ہیریسن](http://www.twitter.com/geektrainer) کے ذریعے
 
 ---
 
-**اعلانِ لاتعلقی**:  
+**ڈسکلیمر**:  
 یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/4-typing-game/typing-game/README.md b/translations/ur/4-typing-game/typing-game/README.md
index a7dc892051..1aedabfe52 100644
--- a/translations/ur/4-typing-game/typing-game/README.md
+++ b/translations/ur/4-typing-game/typing-game/README.md
@@ -1,19 +1,19 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "e6b75e5b8caae906473a8a09d77b7121",
-  "translation_date": "2025-10-22T15:06:03+00:00",
+  "original_hash": "da8bc72041a2bb3826a54654ee1a8844",
+  "translation_date": "2025-11-03T13:28:28+00:00",
   "source_file": "4-typing-game/typing-game/README.md",
   "language_code": "ur"
 }
 -->
 # کھیل بنانا ایونٹس کے ذریعے
 
-کیا آپ نے کبھی سوچا ہے کہ ویب سائٹس کو کیسے پتہ چلتا ہے جب آپ بٹن پر کلک کرتے ہیں یا ٹیکسٹ باکس میں کچھ ٹائپ کرتے ہیں؟ یہ ایونٹ ڈرائیون پروگرامنگ کا جادو ہے! اس اہم مہارت کو سیکھنے کا بہترین طریقہ یہ ہے کہ کچھ مفید بنائیں - ایک ٹائپنگ اسپیڈ گیم جو آپ کے ہر کی اسٹروک پر ردعمل ظاہر کرے۔
+کیا آپ نے کبھی سوچا ہے کہ ویب سائٹس کو کیسے پتہ چلتا ہے جب آپ کوئی بٹن کلک کرتے ہیں یا ٹیکسٹ باکس میں کچھ ٹائپ کرتے ہیں؟ یہ ایونٹ ڈرائیون پروگرامنگ کا جادو ہے! اس اہم مہارت کو سیکھنے کا بہترین طریقہ یہ ہے کہ کچھ مفید بنائیں - ایک ٹائپنگ اسپیڈ گیم جو آپ کے ہر کی اسٹروک پر ردعمل ظاہر کرے۔
 
-آپ خود دیکھیں گے کہ ویب براؤزرز آپ کے جاوا اسکرپٹ کوڈ سے "بات" کیسے کرتے ہیں۔ جب بھی آپ کلک کرتے ہیں، ٹائپ کرتے ہیں، یا ماؤس کو حرکت دیتے ہیں، براؤزر آپ کے کوڈ کو چھوٹے پیغامات (جنہیں ہم ایونٹس کہتے ہیں) بھیج رہا ہوتا ہے، اور آپ فیصلہ کرتے ہیں کہ ان پر کیسے ردعمل دینا ہے!
+آپ خود دیکھیں گے کہ ویب براؤزرز آپ کے جاوا اسکرپٹ کوڈ سے "بات" کیسے کرتے ہیں۔ جب بھی آپ کلک کرتے ہیں، ٹائپ کرتے ہیں، یا ماؤس کو حرکت دیتے ہیں، براؤزر آپ کے کوڈ کو چھوٹے پیغامات (جنہیں ہم ایونٹس کہتے ہیں) بھیج رہا ہوتا ہے، اور آپ فیصلہ کرتے ہیں کہ کیسے ردعمل دینا ہے!
 
-جب ہم یہاں ختم کریں گے، تو آپ نے ایک حقیقی ٹائپنگ گیم بنائی ہوگی جو آپ کی رفتار اور درستگی کو ٹریک کرے گی۔ سب سے اہم بات، آپ ان بنیادی تصورات کو سمجھیں گے جو ہر انٹرایکٹو ویب سائٹ کو طاقت دیتے ہیں جو آپ نے کبھی استعمال کی ہے۔ آئیے شروع کریں!
+جب ہم یہاں ختم کریں گے، تو آپ نے ایک حقیقی ٹائپنگ گیم بنایا ہوگا جو آپ کی رفتار اور درستگی کو ٹریک کرے گا۔ اس سے بھی اہم بات یہ ہے کہ آپ ان بنیادی تصورات کو سمجھیں گے جو ہر انٹرایکٹو ویب سائٹ کو طاقت دیتے ہیں جو آپ نے کبھی استعمال کی ہے۔ آئیے شروع کریں!
 
 ## لیکچر سے پہلے کا کوئز
 
@@ -21,50 +21,50 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## ایونٹ ڈرائیون پروگرامنگ
 
-اپنی پسندیدہ ایپ یا ویب سائٹ کے بارے میں سوچیں - اسے زندہ اور جوابدہ کیا بناتا ہے؟ یہ سب اس بات پر منحصر ہے کہ یہ آپ کے اعمال پر کیسے ردعمل ظاہر کرتی ہے! ہر ٹیپ، کلک، سوائپ، یا کی اسٹروک ایک "ایونٹ" پیدا کرتا ہے، اور یہی وہ جگہ ہے جہاں ویب ڈیولپمنٹ کا حقیقی جادو ہوتا ہے۔
+اپنے پسندیدہ ایپ یا ویب سائٹ کے بارے میں سوچیں - اسے زندہ اور جوابدہ کیا بناتا ہے؟ یہ سب اس بات پر منحصر ہے کہ یہ آپ کے اعمال پر کیسے ردعمل ظاہر کرتا ہے! ہر ٹیپ، کلک، سوائپ، یا کی اسٹروک ایک "ایونٹ" پیدا کرتا ہے، اور یہی وہ جگہ ہے جہاں ویب ڈیولپمنٹ کا حقیقی جادو ہوتا ہے۔
 
-ویب کے لیے پروگرامنگ کو دلچسپ بنانے والی بات یہ ہے: ہمیں کبھی نہیں معلوم کہ کوئی کب اس بٹن پر کلک کرے گا یا ٹیکسٹ باکس میں ٹائپ کرنا شروع کرے گا۔ وہ فوراً کلک کر سکتے ہیں، پانچ منٹ انتظار کر سکتے ہیں، یا شاید کبھی کلک نہ کریں! اس غیر یقینی صورتحال کا مطلب ہے کہ ہمیں اپنے کوڈ لکھنے کے بارے میں مختلف انداز میں سوچنا ہوگا۔
+ویب کے لیے پروگرامنگ کو دلچسپ بنانے والی بات یہ ہے کہ ہمیں کبھی معلوم نہیں ہوتا کہ کوئی کب اس بٹن کو کلک کرے گا یا ٹیکسٹ باکس میں ٹائپ کرنا شروع کرے گا۔ وہ فوراً کلک کر سکتے ہیں، پانچ منٹ انتظار کر سکتے ہیں، یا شاید کبھی کلک نہ کریں! اس غیر یقینی صورتحال کا مطلب ہے کہ ہمیں اپنے کوڈ لکھنے کے بارے میں مختلف انداز میں سوچنا ہوگا۔
 
-ایک نسخے کی طرح اوپر سے نیچے تک چلنے والے کوڈ لکھنے کے بجائے، ہم ایسا کوڈ لکھتے ہیں جو صبر سے کسی چیز کے ہونے کا انتظار کرتا ہے۔ یہ بالکل ویسا ہی ہے جیسے 1800 کی دہائی میں ٹیلی گراف آپریٹرز اپنی مشینوں کے پاس بیٹھ کر تار کے ذریعے پیغام آنے کا انتظار کرتے تھے۔
+ایک نسخے کی طرح اوپر سے نیچے تک چلنے والے کوڈ لکھنے کے بجائے، ہم ایسا کوڈ لکھتے ہیں جو کچھ ہونے کا انتظار کرتا ہے۔ یہ بالکل ویسا ہی ہے جیسے 1800 کی دہائی میں ٹیلی گراف آپریٹرز اپنی مشینوں کے پاس بیٹھے رہتے تھے، اس لمحے کے لیے تیار جب تار کے ذریعے کوئی پیغام آتا۔
 
 تو بالکل "ایونٹ" کیا ہے؟ سیدھے الفاظ میں، یہ کچھ ایسا ہے جو ہوتا ہے! جب آپ بٹن پر کلک کرتے ہیں - یہ ایک ایونٹ ہے۔ جب آپ ایک حرف ٹائپ کرتے ہیں - یہ ایک ایونٹ ہے۔ جب آپ ماؤس کو حرکت دیتے ہیں - یہ ایک اور ایونٹ ہے۔
 
-ایونٹ ڈرائیون پروگرامنگ ہمیں اپنے کوڈ کو سننے اور جواب دینے کے لیے ترتیب دینے دیتی ہے۔ ہم خاص فنکشنز بناتے ہیں جنہیں **ایونٹ لسٹنرز** کہا جاتا ہے جو مخصوص چیزوں کے ہونے کا صبر سے انتظار کرتے ہیں، پھر جب وہ ہوتے ہیں تو فوراً حرکت میں آ جاتے ہیں۔
+ایونٹ ڈرائیون پروگرامنگ ہمیں اپنے کوڈ کو سننے اور ردعمل دینے کے لیے ترتیب دینے دیتی ہے۔ ہم خاص فنکشنز بناتے ہیں جنہیں **ایونٹ لسٹنرز** کہا جاتا ہے جو مخصوص چیزوں کے ہونے کا انتظار کرتے ہیں، پھر جب وہ ہوتے ہیں تو فوراً عمل میں آ جاتے ہیں۔
 
-ایونٹ لسٹنرز کو اپنے کوڈ کے لیے ڈور بیل رکھنے جیسا سمجھیں۔ آپ ڈور بیل ترتیب دیتے ہیں (`addEventListener()`)، اسے بتاتے ہیں کہ کس آواز کو سننا ہے (جیسے 'کلک' یا 'کی پریس')، اور پھر یہ بتاتے ہیں کہ جب کوئی اسے بجائے تو کیا ہونا چاہیے (آپ کا کسٹم فنکشن)۔
+ایونٹ لسٹنرز کو اپنے کوڈ کے لیے ڈور بیل رکھنے جیسا سمجھیں۔ آپ ڈور بیل کو سیٹ کرتے ہیں (`addEventListener()`)، اسے بتاتے ہیں کہ کس آواز کو سننا ہے (جیسے 'کلک' یا 'کی پریس')، اور پھر یہ بتاتے ہیں کہ جب کوئی اسے بجائے تو کیا ہونا چاہیے (آپ کا کسٹم فنکشن)۔
 
 **ایونٹ لسٹنرز کیسے کام کرتے ہیں:**
-- **سنتے ہیں** مخصوص صارف کے اعمال جیسے کلکس، کی اسٹروکس، یا ماؤس کی حرکت
+- **سنتے ہیں** مخصوص یوزر ایکشنز جیسے کلکس، کی اسٹروکس، یا ماؤس موومنٹس
 - **عمل کرتے ہیں** آپ کے کسٹم کوڈ پر جب مخصوص ایونٹ ہوتا ہے
-- **فوری ردعمل دیتے ہیں** صارف کے تعاملات پر، ایک ہموار تجربہ تخلیق کرتے ہیں
+- **فوراً ردعمل دیتے ہیں** یوزر انٹریکشنز پر، ایک ہموار تجربہ تخلیق کرتے ہیں
 - **متعدد ایونٹس کو ہینڈل کرتے ہیں** ایک ہی عنصر پر مختلف لسٹنرز کے ذریعے
 
 > **نوٹ:** یہ بات قابل ذکر ہے کہ ایونٹ لسٹنرز بنانے کے کئی طریقے ہیں۔ آپ گمنام فنکشنز استعمال کر سکتے ہیں، یا نامزد فنکشنز بنا سکتے ہیں۔ آپ مختلف شارٹ کٹس استعمال کر سکتے ہیں، جیسے `click` پراپرٹی سیٹ کرنا، یا `addEventListener()` استعمال کرنا۔ ہماری مشق میں ہم `addEventListener()` اور گمنام فنکشنز پر توجہ مرکوز کریں گے، کیونکہ یہ ویب ڈیولپرز کے استعمال کا سب سے عام طریقہ ہے۔ یہ سب سے زیادہ لچکدار بھی ہے، کیونکہ `addEventListener()` تمام ایونٹس کے لیے کام کرتا ہے، اور ایونٹ کا نام پیرامیٹر کے طور پر فراہم کیا جا سکتا ہے۔
 
 ### عام ایونٹس
 
-جبکہ ویب براؤزرز درجنوں مختلف ایونٹس پیش کرتے ہیں جنہیں آپ سن سکتے ہیں، زیادہ تر انٹرایکٹو ایپلیکیشنز صرف چند ضروری ایونٹس پر انحصار کرتی ہیں۔ ان بنیادی ایونٹس کو سمجھنا آپ کو پیچیدہ صارف تعاملات بنانے کی بنیاد فراہم کرے گا۔
+جبکہ ویب براؤزرز درجنوں مختلف ایونٹس پیش کرتے ہیں جنہیں آپ سن سکتے ہیں، زیادہ تر انٹرایکٹو ایپلیکیشنز صرف چند ضروری ایونٹس پر انحصار کرتی ہیں۔ ان بنیادی ایونٹس کو سمجھنا آپ کو پیچیدہ یوزر انٹریکشنز بنانے کی بنیاد فراہم کرے گا۔
 
-ایپلیکیشن بناتے وقت آپ کے سننے کے لیے [درجنوں ایونٹس](https://developer.mozilla.org/docs/Web/Events) دستیاب ہیں۔ بنیادی طور پر صارف کے صفحے پر کچھ بھی کرنے سے ایک ایونٹ پیدا ہوتا ہے، جو آپ کو بہت زیادہ طاقت دیتا ہے تاکہ وہ تجربہ فراہم کریں جو آپ چاہتے ہیں۔ خوش قسمتی سے، آپ کو عام طور پر صرف چند ایونٹس کی ضرورت ہوتی ہے۔ یہاں کچھ عام ایونٹس ہیں (جن میں سے دو ہم اپنے گیم بنانے میں استعمال کریں گے):
+جب آپ ایپلیکیشن بنا رہے ہوں تو [درجنوں ایونٹس](https://developer.mozilla.org/docs/Web/Events) دستیاب ہیں جنہیں آپ سن سکتے ہیں۔ بنیادی طور پر، یوزر جو کچھ بھی پیج پر کرتا ہے وہ ایک ایونٹ پیدا کرتا ہے، جو آپ کو بہت زیادہ طاقت دیتا ہے تاکہ آپ ان کے مطلوبہ تجربے کو یقینی بنا سکیں۔ خوش قسمتی سے، آپ کو عام طور پر صرف چند ایونٹس کی ضرورت ہوتی ہے۔ یہاں کچھ عام ایونٹس ہیں (جن میں سے دو ہم اپنے گیم بنانے میں استعمال کریں گے):
 
 | ایونٹ | وضاحت | عام استعمال کے کیسز |
 |-------|-------------|------------------|
-| `click` | صارف نے کسی چیز پر کلک کیا | بٹن، لنکس، انٹرایکٹو عناصر |
-| `contextmenu` | صارف نے دائیں ماؤس بٹن پر کلک کیا | کسٹم رائٹ کلک مینو |
-| `select` | صارف نے کچھ ٹیکسٹ کو ہائی لائٹ کیا | ٹیکسٹ ایڈیٹنگ، کاپی آپریشنز |
-| `input` | صارف نے کچھ ٹیکسٹ ان پٹ کیا | فارم ویلیڈیشن، ریئل ٹائم سرچ |
+| `click` | یوزر نے کسی چیز پر کلک کیا | بٹن، لنکس، انٹرایکٹو عناصر |
+| `contextmenu` | یوزر نے دائیں ماؤس بٹن کلک کیا | کسٹم رائٹ کلک مینو |
+| `select` | یوزر نے کچھ ٹیکسٹ کو ہائی لائٹ کیا | ٹیکسٹ ایڈیٹنگ، کاپی آپریشنز |
+| `input` | یوزر نے کچھ ٹیکسٹ ان پٹ کیا | فارم ویلیڈیشن، ریئل ٹائم سرچ |
 
-**ان ایونٹ کی اقسام کو سمجھنا:**
-- **ٹریگرز** جب صارفین آپ کے صفحے پر مخصوص عناصر کے ساتھ تعامل کرتے ہیں
-- **تفصیلی معلومات فراہم کرتے ہیں** صارف کے عمل کے بارے میں ایونٹ آبجیکٹس کے ذریعے
-- **آپ کو قابل بناتے ہیں** کہ آپ جوابدہ، انٹرایکٹو ویب ایپلیکیشنز بنائیں
-- **مختلف براؤزرز اور ڈیوائسز پر مستقل کام کرتے ہیں**
+**ان ایونٹ ٹائپس کو سمجھنا:**
+- **ٹریگرز** جب یوزرز مخصوص عناصر پر انٹریکٹ کرتے ہیں
+- **تفصیلی معلومات فراہم کرتا ہے** یوزر کے ایکشن کے بارے میں ایونٹ آبجیکٹس کے ذریعے
+- **آپ کو قابل بناتا ہے** کہ آپ ریسپانسیو، انٹرایکٹو ویب ایپلیکیشنز بنائیں
+- **مختلف براؤزرز اور ڈیوائسز پر مستقل کام کرتا ہے**
 
 ## گیم بنانا
 
-اب جب کہ آپ ایونٹس کو سمجھ گئے ہیں، آئیے اس علم کو عملی جامہ پہنائیں اور کچھ مفید بنائیں۔ ہم ایک ٹائپنگ اسپیڈ گیم بنائیں گے جو ایونٹ ہینڈلنگ کو ظاہر کرے گا اور آپ کو ایک اہم ڈیولپر مہارت سیکھنے میں مدد دے گا۔
+اب جب کہ آپ ایونٹس کو سمجھ چکے ہیں، آئیے اس علم کو عملی جامہ پہنائیں اور کچھ مفید بنائیں۔ ہم ایک ٹائپنگ اسپیڈ گیم بنائیں گے جو ایونٹ ہینڈلنگ کو ظاہر کرے گا اور آپ کو ایک اہم ڈیولپر مہارت سیکھنے میں مدد دے گا۔
 
-ہم ایک گیم بنانے جا رہے ہیں تاکہ جاوا اسکرپٹ میں ایونٹس کے کام کرنے کے طریقے کو دریافت کیا جا سکے۔ ہمارا گیم کھلاڑی کی ٹائپنگ کی مہارت کو جانچے گا، جو کہ تمام ڈیولپرز کے لیے ایک انتہائی اہم مہارت ہے۔ دلچسپ حقیقت: آج ہم جو QWERTY کی بورڈ لے آؤٹ استعمال کرتے ہیں وہ اصل میں 1870 کی دہائی میں ٹائپ رائٹرز کے لیے ڈیزائن کیا گیا تھا - اور اچھی ٹائپنگ کی مہارت آج بھی پروگرامرز کے لیے اتنی ہی قیمتی ہے! گیم کا عمومی بہاؤ کچھ اس طرح نظر آئے گا:
+ہم جاوا اسکرپٹ میں ایونٹس کے کام کرنے کے طریقے کو دریافت کرنے کے لیے ایک گیم بنائیں گے۔ ہمارا گیم ایک پلیئر کی ٹائپنگ مہارت کو جانچے گا، جو کہ تمام ڈیولپرز کے لیے ایک انتہائی کم قدر کی حامل مہارت ہے۔ دلچسپ حقیقت: آج ہم جو QWERTY کی بورڈ لے آؤٹ استعمال کرتے ہیں وہ اصل میں 1870 کی دہائی میں ٹائپ رائٹرز کے لیے ڈیزائن کیا گیا تھا - اور اچھی ٹائپنگ مہارت آج بھی پروگرامرز کے لیے اتنی ہی قیمتی ہے! گیم کا عمومی بہاؤ کچھ اس طرح نظر آئے گا:
 
 ```mermaid
 flowchart TD
@@ -83,19 +83,19 @@ flowchart TD
 ```
 
 **ہمارا گیم کیسے کام کرے گا:**
-- **شروع ہوتا ہے** جب کھلاڑی اسٹارٹ بٹن پر کلک کرتا ہے اور ایک رینڈم کوٹ دکھاتا ہے
-- **کھلاڑی کی ٹائپنگ کی پیش رفت کو حقیقی وقت میں لفظ بہ لفظ ٹریک کرتا ہے**
-- **موجودہ لفظ کو نمایاں کرتا ہے تاکہ کھلاڑی کی توجہ مرکوز رہے**
+- **شروع ہوتا ہے** جب پلیئر اسٹارٹ بٹن کلک کرتا ہے اور ایک رینڈم کوٹ دکھاتا ہے
+- **پلیئر کی ٹائپنگ پروگریس کو ٹریک کرتا ہے** لفظ بہ لفظ ریئل ٹائم میں
+- **موجودہ لفظ کو ہائی لائٹ کرتا ہے** پلیئر کی توجہ کے لیے
 - **ٹائپنگ کی غلطیوں کے لیے فوری بصری فیڈبیک فراہم کرتا ہے**
-- **کل وقت کا حساب لگاتا ہے اور کوٹ مکمل ہونے پر دکھاتا ہے**
+- **کل وقت کا حساب لگاتا ہے اور دکھاتا ہے** جب کوٹ مکمل ہو جاتا ہے
 
 آئیے اپنا گیم بنائیں اور ایونٹس کے بارے میں سیکھیں!
 
 ### فائل اسٹرکچر
 
-کوڈنگ شروع کرنے سے پہلے، آئیے منظم ہو جائیں! شروع سے صاف فائل اسٹرکچر رکھنے سے آپ کو بعد میں پریشانیوں سے بچنے میں مدد ملے گی اور آپ کے پروجیکٹ کو زیادہ پیشہ ورانہ بنائے گا۔ 😊
+کوڈنگ شروع کرنے سے پہلے، آئیے منظم ہو جائیں! شروع سے صاف فائل اسٹرکچر رکھنے سے آپ کو بعد میں پریشانیوں سے بچنے میں مدد ملے گی اور آپ کے پروجیکٹ کو زیادہ پروفیشنل بنائے گا۔ 😊
 
-ہم صرف تین فائلوں کے ساتھ چیزوں کو آسان رکھیں گے: `index.html` ہمارے صفحے کے اسٹرکچر کے لیے، `script.js` ہمارے تمام گیم لاجک کے لیے، اور `style.css` سب کچھ اچھا دکھانے کے لیے۔ یہ وہ کلاسک تریو ہے جو زیادہ تر ویب کو طاقت دیتا ہے!
+ہم صرف تین فائلوں کے ساتھ چیزوں کو آسان رکھیں گے: `index.html` ہمارے پیج اسٹرکچر کے لیے، `script.js` ہمارے تمام گیم لاجک کے لیے، اور `style.css` سب کچھ اچھا دکھانے کے لیے۔ یہ وہ کلاسک تریو ہے جو زیادہ تر ویب کو طاقت دیتا ہے!
 
 **کنسول یا ٹرمینل ونڈو کھول کر اپنے کام کے لیے ایک نیا فولڈر بنائیں اور درج ذیل کمانڈ جاری کریں:**
 
@@ -109,8 +109,8 @@ md typing-game && cd typing-game
 
 **یہ کمانڈز کیا کرتی ہیں:**
 - **ایک نیا ڈائریکٹری بناتی ہیں** جس کا نام `typing-game` ہے آپ کے پروجیکٹ فائلز کے لیے
-- **خود بخود نئے بنائے گئے ڈائریکٹری میں جاتی ہیں**
-- **آپ کے گیم ڈیولپمنٹ کے لیے ایک صاف ورک اسپیس ترتیب دیتی ہیں**
+- **خود بخود نئی بنائی گئی ڈائریکٹری میں نیویگیٹ کرتی ہیں**
+- **آپ کے گیم ڈیولپمنٹ کے لیے ایک صاف ورک اسپیس سیٹ کرتی ہیں**
 
 **ویژول اسٹوڈیو کوڈ کھولیں:**
 
@@ -123,31 +123,31 @@ code .
 - **آپ کے پروجیکٹ فولڈر کو ایڈیٹر میں کھولتی ہے**
 - **آپ کو تمام ڈیولپمنٹ ٹولز تک رسائی فراہم کرتی ہے**
 
-**ویژول اسٹوڈیو کوڈ میں فولڈر میں تین فائلیں شامل کریں جن کے نام درج ذیل ہیں:**
-- `index.html` - آپ کے گیم کی اسٹرکچر اور مواد پر مشتمل ہے
+**ویژول اسٹوڈیو کوڈ میں فولڈر میں تین فائلیں درج ذیل ناموں کے ساتھ شامل کریں:**
+- `index.html` - آپ کے گیم کی ساخت اور مواد پر مشتمل ہے
 - `script.js` - تمام گیم لاجک اور ایونٹ لسٹنرز کو ہینڈل کرتا ہے
-- `style.css` - بصری ظاہری شکل اور اسٹائلنگ کی وضاحت کرتا ہے
+- `style.css` - بصری ظاہری شکل اور اسٹائلنگ کو ڈیفائن کرتا ہے
 
 ## یوزر انٹرفیس بنائیں
 
-اب آئیے وہ اسٹیج بنائیں جہاں ہمارا گیم ایکشن ہوگا! اس کو ایک اسپیس شپ کے کنٹرول پینل کو ڈیزائن کرنے جیسا سمجھیں - ہمیں یہ یقینی بنانا ہوگا کہ ہمارے کھلاڑیوں کو جو کچھ بھی چاہیے وہ وہیں موجود ہو جہاں وہ توقع کرتے ہیں۔
+اب آئیے وہ اسٹیج بنائیں جہاں ہمارا گیم ایکشن ہوگا! اس کو ایک اسپیس شپ کے کنٹرول پینل کو ڈیزائن کرنے جیسا سمجھیں - ہمیں یہ یقینی بنانا ہوگا کہ ہمارے پلیئرز کو جو کچھ بھی چاہیے وہ وہیں ہو جہاں وہ توقع کرتے ہیں۔
 
-آئیے معلوم کریں کہ ہمارے گیم کو اصل میں کیا ضرورت ہے۔ اگر آپ ٹائپنگ گیم کھیل رہے ہوتے، تو آپ اسکرین پر کیا دیکھنا چاہتے؟ یہاں وہ چیزیں ہیں جن کی ہمیں ضرورت ہوگی:
+آئیے معلوم کریں کہ ہمارے گیم کو اصل میں کیا ضرورت ہے۔ اگر آپ ٹائپنگ گیم کھیل رہے ہوتے، تو آپ اسکرین پر کیا دیکھنا چاہتے؟ یہاں ہمیں کیا چاہیے:
 
 | UI عنصر | مقصد | HTML عنصر |
 |------------|---------|-------------|
 | کوٹ ڈسپلے | ٹائپ کرنے کے لیے ٹیکسٹ دکھاتا ہے | `<p>` جس کا `id="quote"` ہو |
 | میسج ایریا | اسٹیٹس اور کامیابی کے پیغامات دکھاتا ہے | `<p>` جس کا `id="message"` ہو |
-| ٹیکسٹ انپٹ | جہاں کھلاڑی کوٹ ٹائپ کرتے ہیں | `<input>` جس کا `id="typed-value"` ہو |
+| ٹیکسٹ انپٹ | جہاں پلیئرز کوٹ ٹائپ کرتے ہیں | `<input>` جس کا `id="typed-value"` ہو |
 | اسٹارٹ بٹن | گیم شروع کرتا ہے | `<button>` جس کا `id="start"` ہو |
 
 **UI اسٹرکچر کو سمجھنا:**
 - **مواد کو منطقی طور پر اوپر سے نیچے تک منظم کرتا ہے**
-- **عنصر کو منفرد IDs تفویض کرتا ہے تاکہ جاوا اسکرپٹ کے ذریعے ٹارگٹ کیا جا سکے**
-- **بہتر صارف تجربے کے لیے واضح بصری درجہ بندی فراہم کرتا ہے**
-- **رسائی کے لیے سیمینٹک HTML عناصر شامل کرتا ہے**
+- **عنصر کو منفرد IDs تفویض کرتا ہے** جاوا اسکرپٹ کے لیے ٹارگٹنگ کے لیے
+- **بہتر یوزر تجربے کے لیے واضح بصری درجہ بندی فراہم کرتا ہے**
+- **ایکسس ایبلٹی کے لیے سیمینٹک HTML عناصر شامل کرتا ہے**
 
-ان میں سے ہر ایک کو IDs کی ضرورت ہوگی تاکہ ہم انہیں اپنے جاوا اسکرپٹ میں استعمال کر سکیں۔ ہم ان CSS اور جاوا اسکرپٹ فائلز کے حوالہ جات بھی شامل کریں گے جنہیں ہم بنانے جا رہے ہیں۔
+ان میں سے ہر ایک کو IDs کی ضرورت ہوگی تاکہ ہم انہیں اپنے جاوا اسکرپٹ میں کام کر سکیں۔ ہم ان CSS اور جاوا اسکرپٹ فائلز کے حوالہ جات بھی شامل کریں گے جنہیں ہم بنانے جا رہے ہیں۔
 
 ایک نئی فائل بنائیں جس کا نام `index.html` ہو۔ درج ذیل HTML شامل کریں:
 
@@ -173,25 +173,25 @@ code .
 ```
 
 **یہ HTML اسٹرکچر کیا حاصل کرتا ہے:**
-- **CSS اسٹائل شیٹ کو `<head>` میں لنک کرتا ہے اسٹائلنگ کے لیے**
-- **صارفین کے لیے واضح ہیڈنگ اور ہدایات تخلیق کرتا ہے**
-- **مخصوص IDs کے ساتھ ڈائنامک مواد کے لیے پلیس ہولڈر پیراگراف قائم کرتا ہے**
-- **ایک انپٹ فیلڈ شامل کرتا ہے رسائی کے صفات کے ساتھ**
+- **CSS اسٹائل شیٹ کو `<head>` میں لنک کرتا ہے** اسٹائلنگ کے لیے
+- **یوزرز کے لیے واضح ہیڈنگ اور ہدایات بناتا ہے**
+- **مخصوص IDs کے ساتھ پلیس ہولڈر پیراگراف قائم کرتا ہے** ڈائنامک مواد کے لیے
+- **ایکسس ایبلٹی ایٹریبیوٹس کے ساتھ انپٹ فیلڈ شامل کرتا ہے**
 - **گیم کو ٹرگر کرنے کے لیے اسٹارٹ بٹن فراہم کرتا ہے**
-- **جاوا اسکرپٹ فائل کو آخر میں لوڈ کرتا ہے بہتر کارکردگی کے لیے**
+- **جاوا اسکرپٹ فائل کو آخر میں لوڈ کرتا ہے** بہترین پرفارمنس کے لیے
 
 ### ایپلیکیشن لانچ کریں
 
-ڈیولپمنٹ کے دوران اپنی ایپلیکیشن کو بار بار ٹیسٹ کرنا آپ کو جلدی مسائل پکڑنے اور حقیقی وقت میں اپنی پیش رفت دیکھنے میں مدد دیتا ہے۔ لائیو سرور ایک انمول ٹول ہے جو آپ کی فائلز کو محفوظ کرنے پر خود بخود آپ کے براؤزر کو ریفریش کرتا ہے، ڈیولپمنٹ کو بہت زیادہ موثر بناتا ہے۔
+ڈیولپمنٹ کے دوران اپنی ایپلیکیشن کو بار بار ٹیسٹ کرنا آپ کو جلدی مسائل پکڑنے اور ریئل ٹائم میں اپنی پیش رفت دیکھنے میں مدد دیتا ہے۔ لائیو سرور ایک قیمتی ٹول ہے جو آپ کی فائلز کو محفوظ کرنے پر خود بخود آپ کے براؤزر کو ریفریش کرتا ہے، ڈیولپمنٹ کو بہت زیادہ موثر بناتا ہے۔
 
-ہمیشہ بہتر ہوتا ہے کہ ترقیاتی کام کو مرحلہ وار کریں تاکہ دیکھ سکیں کہ چیزیں کیسی لگ رہی ہیں۔ آئیے اپنی ایپلیکیشن لانچ کریں۔ ویژول اسٹوڈیو کوڈ کے لیے ایک شاندار ایکسٹینشن ہے جسے [لائیو سرور](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) کہا جاتا ہے جو آپ کی ایپلیکیشن کو مقامی طور پر ہوسٹ کرے گا اور ہر بار جب آپ فائلز محفوظ کریں گے براؤزر کو ریفریش کرے گا۔
+ہمیشہ بہتر ہوتا ہے کہ آپ چیزوں کو دیکھنے کے لیے بار بار ڈیولپ کریں۔ آئیے اپنی ایپلیکیشن لانچ کریں۔ ویژول اسٹوڈیو کوڈ کے لیے ایک شاندار ایکسٹینشن ہے جسے [لائیو سرور](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) کہتے ہیں جو آپ کی ایپلیکیشن کو لوکل طور پر ہوسٹ کرے گا اور ہر بار جب آپ فائلز محفوظ کریں گے براؤزر کو ریفریش کرے گا۔
 
-**[لائیو سرور](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) انسٹال کریں لنک پر کلک کرکے اور انسٹال پر کلک کریں:**
+**[لائیو سرور](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) انسٹال کریں، لنک پر کلک کریں اور انسٹال پر کلک کریں:**
 
 **انسٹالیشن کے دوران کیا ہوتا ہے:**
 - **آپ کے براؤزر کو ویژول اسٹوڈیو کوڈ کھولنے کے لیے پرامپٹ کرتا ہے**
 - **آپ کو ایکسٹینشن انسٹالیشن کے عمل کے ذریعے گائیڈ کرتا ہے**
-- **ویژول اسٹوڈیو کوڈ کو دوبارہ شروع کرنے کی ضرورت ہو سکتی ہے سیٹ اپ مکمل کرنے کے لیے**
+- **ویژول اسٹوڈیو کوڈ کو دوبارہ شروع کرنے کی ضرورت ہو سکتی ہے** سیٹ اپ مکمل کرنے کے لیے
 
 **انسٹال ہونے کے بعد، ویژول اسٹوڈیو کوڈ میں، Ctrl-Shift-P (یا Cmd-Shift-P) دبائیں کمانڈ پیلیٹ کھولنے کے لیے:**
 
@@ -203,19 +203,19 @@ code .
 **"Live Server: Open with Live Server" ٹائپ کریں:**
 
 **لائیو سرور کیا کرتا ہے:**
-- **آپ کے پروجیکٹ کے لیے مقامی ڈیولپمنٹ سرور شروع کرتا ہے**
+- **آپ کے پروجیکٹ کے لیے لوکل ڈیولپمنٹ سرور شروع کرتا ہے**
 - **فائلز محفوظ کرنے پر خود بخود براؤزر کو ریفریش کرتا ہے**
-- **آپ کی فائلز کو مقامی URL سے فراہم کرتا ہے (عام طور پر `localhost:5500`)**
+- **آپ کی فائلز کو لوکل URL سے سرو کرتا ہے** (عام طور پر `localhost:5500`)
 
 **براؤزر کھولیں اور `https://localhost:5500` پر جائیں:**
 
-اب آپ کو وہ صفحہ نظر آنا چاہیے جو آپ نے بنایا ہے! آئیے کچھ فعالیت شامل کریں۔
+اب آپ کو وہ صفحہ نظر آنا چاہیے جو آپ نے بنایا ہے! آئیے کچھ فنکشنلٹی شامل کریں۔
 
 ## CSS شامل کریں
 
-اب چیزوں کو اچھا بنائیں! بصری فیڈبیک کمپیوٹنگ کے ابتدائی دنوں سے صارف انٹرفیس کے لیے اہم رہا ہے۔ 1980 کی دہائی میں، محققین نے دریافت کیا کہ فوری بصری فیڈبیک صارف کی کارکردگی کو ڈرامائی طور پر بہتر بناتا ہے اور غلطیوں کو کم کرتا ہے۔ یہی وہ چیز ہے جو ہم تخلیق کرنے جا رہے ہیں۔
+اب چیزوں کو اچھا بنائیں! بصری فیڈبیک کمپیوٹنگ کے ابتدائی دنوں سے یوزر انٹرفیس کے لیے اہم رہا ہے۔ 1980 کی دہائی میں، محققین نے دریافت کیا کہ فوری بصری فیڈبیک یوزر کی کارکردگی کو ڈرامائی طور پر بہتر بناتا ہے اور غلطیوں کو کم کرتا ہے۔ یہی وہ چیز ہے جو ہم بنانے جا رہے ہیں۔
 
-ہمارے گیم کو یہ واضح کرنا ہوگا کہ کیا ہو رہا ہے۔ کھلاڑیوں کو فوراً معلوم ہونا چاہیے کہ کون سا لفظ انہیں ٹائپ کرنا ہے، اور اگر وہ غلطی کرتے ہیں، تو انہیں فوراً نظر آنا چاہیے۔ آئیے کچھ سادہ لیکن مؤثر اسٹائلنگ بنائیں:
+ہمارے گیم کو یہ واضح کرنا ہوگا کہ کیا ہو رہا ہے۔ پلیئرز کو فوراً معلوم ہونا چاہیے کہ کون سا لفظ انہیں ٹائپ کرنا ہے، اور اگر وہ غلطی کرتے ہیں تو انہیں فوراً نظر آنا چاہیے۔ آئیے کچھ سادہ لیکن موثر اسٹائلنگ بنائیں:
 
 ایک نئی فائل بنائیں جس کا نام `style.css` ہو اور درج ذیل سینٹیکس شامل کریں۔
 
@@ -232,20 +232,16 @@ code .
 ```
 
 **ان CSS کلاسز کو سمجھنا:**
-- **موجودہ لفظ کو نمایاں کرتا ہے** ایک پیلے رنگ کے پس منظر کے ساتھ واضح بصری رہنمائی کے لیے
-- **ٹائپنگ کی غلطیوں کا اشارہ دیتا ہے** ہلکے کورل پس منظر کے رنگ کے ساتھ
-- **فوری فیڈبیک فراہم کرتا ہے** بغیر صارف کے ٹائپنگ کے بہاؤ کو متاثر کیے
-- **رسائی اور واضح بصری مواصلات کے لیے متضاد رنگ استعمال کرتا ہے**
+- **موجودہ لفظ کو ہائی لائٹ کرتا ہے** واضح بصری رہنمائی کے لیے پیلے رنگ کے پس منظر کے ساتھ
+- **ٹائپنگ کی غلطیوں کو سگنل کرتا ہے** ہلکے کورل پس منظر کے رنگ کے ساتھ
+- **فوری فیڈبیک فراہم کرتا ہے** یوزر کے ٹائپنگ فلو کو متاثر کیے بغیر
+- **ایکسس ایبلٹی اور واضح بصری کمیونیکیشن کے لیے متضاد رنگ استعمال کرتا ہے**
 
-✅ جب بات CSS کی ہو تو آپ اپنے صفحے کو اپنی مرضی کے مطابق ترتیب دے سکتے ہیں۔ تھوڑا وقت نکالیں اور صفحے کو مزید دلکش بنائیں:
+✅ جب بات CSS کی ہو تو آپ اپنی صفحہ کی ترتیب کو اپنی مرضی کے مطابق بنا سکتے ہیں۔ تھوڑا وقت نکالیں اور صفحہ کو مزید دلکش بنائیں:
 
-- مختلف فونٹ منتخب کریں
-- ہیڈرز کو رنگین کریں
-- آئٹمز کا سائز تبدیل کریں
-
-## جاوا اسکرپٹ
-
-یہاں چیزیں دلچسپ ہو جاتی ہیں! 🎉 ہمارے پاس HTML اسٹرکچر اور CSS اسٹائلنگ ہے، لیکن ابھی ہمارا گیم ایک خوبصورت کار کی طرح ہے جس کے پاس انجن نہیں ہے۔ جاوا
+- مختلف فونٹ کا انتخاب کریں
+- ہیڈرز کو رنگین بنائیں
+- آئٹمز کا سائز
 | اقتباسات کی فہرست | کھیل کے لیے تمام ممکنہ اقتباسات محفوظ کریں | `['Quote 1', 'Quote 2', ...]` |
 | الفاظ کی فہرست | موجودہ اقتباس کو انفرادی الفاظ میں تقسیم کریں | `['When', 'you', 'have', ...]` |
 | الفاظ کا انڈیکس | اس لفظ کو ٹریک کریں جو کھلاڑی ٹائپ کر رہا ہے | `0, 1, 2, 3...` |
@@ -281,24 +277,24 @@ const messageElement = document.getElementById('message');
 const typedValueElement = document.getElementById('typed-value');
 ```
 
-**اس سیٹ اپ کوڈ کے مقاصد کو سمجھنا:**
-- **محفوظ کرتا ہے** Sherlock Holmes کے اقتباسات کی فہرست کو `const` کے ذریعے کیونکہ اقتباسات تبدیل نہیں ہوں گے
-- **ابتدا کرتا ہے** ٹریکنگ متغیرات کو `let` کے ذریعے کیونکہ یہ اقدار کھیل کے دوران اپ ڈیٹ ہوں گی
-- **حاصل کرتا ہے** DOM عناصر کے حوالہ جات کو `document.getElementById()` کے ذریعے مؤثر رسائی کے لیے
+**اس سیٹ اپ کوڈ کے مقاصد کی تفصیل:**
+- **محفوظ کرتا ہے** Sherlock Holmes کے اقتباسات کی فہرست `const` کے ذریعے کیونکہ اقتباسات تبدیل نہیں ہوں گے
+- **ابتدا کرتا ہے** ٹریکنگ متغیرات کی `let` کے ذریعے کیونکہ یہ اقدار کھیل کے دوران اپڈیٹ ہوں گی
+- **حاصل کرتا ہے** DOM عناصر کے حوالہ جات `document.getElementById()` کے ذریعے مؤثر رسائی کے لیے
 - **بنیاد رکھتا ہے** کھیل کی تمام فعالیت کے لیے واضح اور وضاحتی متغیر ناموں کے ساتھ
 - **منظم کرتا ہے** متعلقہ ڈیٹا اور عناصر کو منطقی طور پر تاکہ کوڈ کی دیکھ بھال آسان ہو
 
 ✅ اپنے کھیل میں مزید اقتباسات شامل کریں
 
-> 💡 **پرو ٹپ**: ہم کوڈ میں جب چاہیں عناصر کو `document.getElementById()` کے ذریعے حاصل کر سکتے ہیں۔ چونکہ ہم ان عناصر کا بار بار حوالہ دیں گے، ہم اسٹرنگ لٹریلز کے ذریعے ٹائپوز سے بچیں گے۔ [Vue.js](https://vuejs.org/) یا [React](https://reactjs.org/) جیسے فریم ورک آپ کو اپنے کوڈ کو مرکزی بنانے میں بہتر مدد فراہم کر سکتے ہیں۔
+> 💡 **پرو ٹپ**: ہم کوڈ میں جب چاہیں عناصر حاصل کر سکتے ہیں `document.getElementById()` کے ذریعے۔ چونکہ ہم ان عناصر کا بار بار حوالہ دیں گے، ہم اسٹرنگ لٹریلز میں ٹائپوز سے بچنے کے لیے کانسٹینٹس استعمال کریں گے۔ [Vue.js](https://vuejs.org/) یا [React](https://reactjs.org/) جیسے فریم ورک آپ کو اپنے کوڈ کو مرکزی بنانے میں بہتر مدد فراہم کر سکتے ہیں۔
 >
-**یہ طریقہ کیوں اتنا مؤثر ہے:**
-- **روکتا ہے** عناصر کے حوالہ دیتے وقت ہجے کی غلطیاں
-- **بہتر بناتا ہے** کوڈ کی پڑھائی کو وضاحتی مستقل ناموں کے ساتھ
+**یہ طریقہ کیوں بہترین کام کرتا ہے:**
+- **روکتا ہے** عناصر کا حوالہ دیتے وقت ہجے کی غلطیاں
+- **بہتر بناتا ہے** کوڈ کی پڑھنے کی صلاحیت وضاحتی کانسٹینٹ ناموں کے ساتھ
 - **فعال کرتا ہے** بہتر IDE سپورٹ آٹو کمپلیٹ اور ایرر چیکنگ کے ساتھ
-- **آسان بناتا ہے** ریفیکٹرنگ اگر عناصر کے IDs بعد میں تبدیل ہوں
+- **آسان بناتا ہے** ریفیکٹرنگ اگر بعد میں عنصر کے IDs تبدیل ہوں
 
-`const`, `let` اور `var` کے استعمال پر ویڈیو دیکھنے کے لیے ایک منٹ نکالیں
+`const`, `let` اور `var` کے استعمال پر ایک ویڈیو دیکھنے کے لیے وقت نکالیں
 
 [![متغیرات کی اقسام](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "متغیرات کی اقسام")
 
@@ -306,9 +302,9 @@ const typedValueElement = document.getElementById('typed-value');
 
 ### شروع کرنے کی منطق شامل کریں
 
-یہ وہ جگہ ہے جہاں سب کچھ جڑتا ہے! 🚀 آپ اپنا پہلا حقیقی ایونٹ لسٹنر لکھنے والے ہیں، اور یہ دیکھنا کافی خوشگوار ہے کہ آپ کا کوڈ بٹن کلک پر جواب دیتا ہے۔
+یہ وہ جگہ ہے جہاں سب کچھ جڑتا ہے! 🚀 آپ اپنا پہلا حقیقی ایونٹ لسٹنر لکھنے والے ہیں، اور یہ دیکھنا کافی اطمینان بخش ہے کہ آپ کا کوڈ بٹن کلک پر ردعمل دیتا ہے۔
 
-سوچیں: کہیں نہ کہیں، ایک کھلاڑی "شروع کریں" بٹن پر کلک کرنے والا ہے، اور آپ کا کوڈ ان کے لیے تیار ہونا چاہیے۔ ہمیں نہیں معلوم کہ وہ کب کلک کریں گے - فوراً، یا کافی لینے کے بعد - لیکن جب وہ کریں گے، آپ کا کھیل زندگی میں آ جائے گا۔
+سوچیں: کہیں نہ کہیں، ایک کھلاڑی "شروع کریں" بٹن پر کلک کرنے والا ہے، اور آپ کا کوڈ ان کے لیے تیار ہونا چاہیے۔ ہمیں نہیں معلوم کہ وہ کب کلک کریں گے - فوراً، یا کافی لینے کے بعد - لیکن جب وہ کریں گے، آپ کا کھیل زندگی میں آجائے گا۔
 
 جب صارف `start` پر کلک کرتا ہے، ہمیں ایک اقتباس منتخب کرنا ہوگا، صارف انٹرفیس سیٹ اپ کرنا ہوگا، اور موجودہ لفظ اور وقت کے لیے ٹریکنگ سیٹ اپ کرنا ہوگا۔ نیچے وہ جاوا اسکرپٹ ہے جو آپ کو شامل کرنا ہوگا؛ ہم اسکرپٹ بلاک کے بعد اس پر بات کرتے ہیں۔
 
@@ -345,7 +341,7 @@ document.getElementById('start').addEventListener('click', () => {
 });
 ```
 
-**کوڈ کو منطقی حصوں میں تقسیم کرنا:**
+**کوڈ کو منطقی حصوں میں تقسیم کریں:**
 
 **📊 الفاظ کی ٹریکنگ سیٹ اپ:**
 - **منتخب کرتا ہے** ایک بے ترتیب اقتباس `Math.floor()` اور `Math.random()` کے ذریعے مختلفیت کے لیے
@@ -355,7 +351,7 @@ document.getElementById('start').addEventListener('click', () => {
 
 **🎨 UI سیٹ اپ اور نمائش:**
 - **بناتا ہے** `<span>` عناصر کی فہرست، ہر لفظ کو انفرادی اسٹائلنگ کے لیے لپیٹتا ہے
-- **جوڑتا ہے** span عناصر کو ایک واحد اسٹرنگ میں مؤثر DOM اپ ڈیٹنگ کے لیے
+- **جوڑتا ہے** span عناصر کو ایک واحد اسٹرنگ میں مؤثر DOM اپڈیٹنگ کے لیے
 - **نمایاں کرتا ہے** پہلے لفظ کو `highlight` CSS کلاس شامل کر کے
 - **صاف کرتا ہے** کسی بھی پچھلے کھیل کے پیغامات کو ایک صاف سلیٹ فراہم کرنے کے لیے
 
@@ -366,7 +362,7 @@ document.getElementById('start').addEventListener('click', () => {
 
 **⏱️ ٹائمر کی ابتدا:**
 - **حاصل کرتا ہے** موجودہ ٹائم اسٹیمپ `new Date().getTime()` کے ذریعے
-- **فعال کرتا ہے** ٹائپنگ کی رفتار اور مکمل ہونے کے وقت کی درست حساب
+- **فعال کرتا ہے** ٹائپنگ کی رفتار اور مکمل ہونے کے وقت کی درست حساب کتاب
 - **شروع کرتا ہے** کھیل کے سیشن کے لیے پرفارمنس ٹریکنگ
 
 ### ٹائپنگ کی منطق شامل کریں
@@ -432,18 +428,18 @@ flowchart TD
 - **چیک کرتا ہے** کہ ٹائپ کردہ ویلیو موجودہ لفظ سے میل کھاتی ہے اور ہم آخری لفظ پر ہیں
 - **حساب کرتا ہے** گزرا ہوا وقت، شروع کے وقت کو موجودہ وقت سے منفی کر کے
 - **تبدیل کرتا ہے** ملی سیکنڈز کو سیکنڈز میں 1,000 سے تقسیم کر کے
-- **نمائش کرتا ہے** مبارکبادی پیغام مکمل ہونے کے وقت کے ساتھ
+- **دکھاتا ہے** مبارکبادی پیغام مکمل ہونے کے وقت کے ساتھ
 
 **✅ لفظ مکمل (منظر نامہ 2):**
-- **پہچانتا ہے** لفظ کی تکمیل جب انپٹ اسپیس کے ساتھ ختم ہوتا ہے
-- **تصدیق کرتا ہے** کہ ٹرِم کردہ انپٹ موجودہ لفظ سے بالکل میل کھاتا ہے
+- **پہچانتا ہے** لفظ کی تکمیل جب ان پٹ اسپیس پر ختم ہوتا ہے
+- **تصدیق کرتا ہے** کہ ٹرِم کیا گیا انپٹ موجودہ لفظ سے بالکل میل کھاتا ہے
 - **صاف کرتا ہے** انپٹ فیلڈ کو اگلے لفظ کے لیے
-- **آگے بڑھتا ہے** اگلے لفظ پر `wordIndex` کو بڑھا کر
-- **اپ ڈیٹ کرتا ہے** بصری نمایاں کو تمام کلاسز ہٹا کر اور نئے لفظ کو نمایاں کر کے
+- **آگے بڑھتا ہے** اگلے لفظ پر `wordIndex` کو انکریمنٹ کر کے
+- **اپڈیٹ کرتا ہے** بصری نمایاں کو تمام کلاسز ہٹا کر اور نئے لفظ کو نمایاں کر کے
 
-**📝 ٹائپنگ جاری (منظر نامہ 3):**
+**📝 ٹائپنگ جاری ہے (منظر نامہ 3):**
 - **تصدیق کرتا ہے** کہ موجودہ لفظ اس سے شروع ہوتا ہے جو ابھی تک ٹائپ کیا گیا ہے
-- **ہٹاتا ہے** کسی بھی ایرر اسٹائلنگ کو دکھانے کے لیے کہ انپٹ درست ہے
+- **ہٹاتا ہے** کسی بھی ایرر اسٹائلنگ کو تاکہ انپٹ درست دکھائی دے
 - **اجازت دیتا ہے** جاری ٹائپنگ بغیر کسی مداخلت کے
 
 **❌ ایرر اسٹیٹ (منظر نامہ 4):**
@@ -451,28 +447,28 @@ flowchart TD
 - **لگاتا ہے** ایرر CSS کلاس فوری بصری فیڈبیک فراہم کرنے کے لیے
 - **مدد کرتا ہے** کھلاڑیوں کو جلدی سے غلطیوں کی شناخت اور درست کرنے میں
 
-## اپنی ایپلیکیشن کو ٹیسٹ کریں
+## اپنی ایپلیکیشن کی جانچ کریں
 
-دیکھیں آپ نے کیا حاصل کیا! 🎉 آپ نے ایونٹ ڈرائیون پروگرامنگ کا استعمال کرتے ہوئے شروع سے ایک حقیقی، کام کرنے والا ٹائپنگ کھیل بنایا۔ ایک لمحہ نکالیں اور اس کی قدر کریں - یہ کوئی چھوٹی کامیابی نہیں ہے!
+دیکھیں آپ نے کیا حاصل کیا! 🎉 آپ نے ایونٹ ڈرائیون پروگرامنگ کا استعمال کرتے ہوئے شروع سے ایک حقیقی، کام کرنے والا ٹائپنگ کھیل بنایا۔ ایک لمحہ لیں اور اس کی قدر کریں - یہ کوئی معمولی کارنامہ نہیں ہے!
 
-اب ٹیسٹنگ کا مرحلہ آتا ہے! کیا یہ توقع کے مطابق کام کرے گا؟ کیا ہم نے کچھ چھوڑ دیا؟ بات یہ ہے کہ: اگر کچھ فوراً بالکل کام نہ کرے، تو یہ بالکل معمول کی بات ہے۔ تجربہ کار ڈویلپرز بھی اپنے کوڈ میں باقاعدگی سے بگز تلاش کرتے ہیں۔ یہ ترقی کے عمل کا حصہ ہے!
+اب جانچ کا مرحلہ آتا ہے! کیا یہ توقع کے مطابق کام کرے گا؟ کیا ہم نے کچھ چھوڑ دیا؟ بات یہ ہے: اگر کچھ فوراً بالکل کام نہ کرے، تو یہ بالکل معمول کی بات ہے۔ تجربہ کار ڈویلپرز بھی اپنے کوڈ میں باقاعدگی سے بگز تلاش کرتے ہیں۔ یہ ترقی کے عمل کا حصہ ہے!
 
-`start` پر کلک کریں، اور ٹائپ کرنا شروع کریں! یہ کچھ ایسا ہی نظر آنا چاہیے جیسا کہ ہم نے پہلے اینیمیشن میں دیکھا تھا۔
+`start` پر کلک کریں، اور ٹائپ کرنا شروع کریں! یہ کچھ اس طرح نظر آنا چاہیے جیسے ہم نے پہلے اینیمیشن دیکھی تھی۔
 
-![کھیل کے عمل میں اینیمیشن](../../../../4-typing-game/images/demo.gif)
+![کھیل کی حرکت میں اینیمیشن](../../../../4-typing-game/images/demo.gif)
 
-**اپنی ایپلیکیشن میں کیا ٹیسٹ کریں:**
+**اپنی ایپلیکیشن میں کیا جانچنا ہے:**
 - **تصدیق کرتا ہے** کہ شروع پر کلک کرنے سے ایک بے ترتیب اقتباس ظاہر ہوتا ہے
 - **یقین دہانی کرتا ہے** کہ ٹائپنگ موجودہ لفظ کو صحیح طریقے سے نمایاں کرتی ہے
 - **چیک کرتا ہے** کہ غلط ٹائپنگ کے لیے ایرر اسٹائلنگ ظاہر ہوتی ہے
-- **یقین دہانی کرتا ہے** کہ الفاظ مکمل ہونے پر نمایاں صحیح طریقے سے آگے بڑھتا ہے
-- **ٹیسٹ کرتا ہے** کہ اقتباس مکمل ہونے پر وقت کے ساتھ مکمل ہونے کا پیغام ظاہر ہوتا ہے
+- **یقین دہانی کرتا ہے** کہ الفاظ مکمل کرنے سے نمایاں کرنے کا عمل صحیح طریقے سے آگے بڑھتا ہے
+- **جانچتا ہے** کہ اقتباس مکمل کرنے سے مکمل ہونے کا پیغام وقت کے ساتھ ظاہر ہوتا ہے
 
 **عام ڈیبگنگ کے نکات:**
 - **چیک کریں** براؤزر کنسول (F12) میں جاوا اسکرپٹ ایررز
 - **تصدیق کریں** کہ تمام فائل نام بالکل میل کھاتے ہیں (کیس سینسیٹو)
-- **یقین دہانی کریں** کہ لائیو سرور صحیح طریقے سے چل رہا ہے اور ریفریش ہو رہا ہے
-- **مختلف اقتباسات ٹیسٹ کریں** بے ترتیب انتخاب کی تصدیق کے لیے
+- **یقین دہانی کریں** کہ لائیو سرور چل رہا ہے اور صحیح طریقے سے ریفریش ہو رہا ہے
+- **مختلف اقتباسات آزمائیں** بے ترتیب انتخاب کی تصدیق کے لیے
 
 ---
 
@@ -480,14 +476,14 @@ flowchart TD
 
 ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** ٹائپنگ کھیل کو بڑھا کر ایک مشکل نظام نافذ کریں جو کھلاڑی کی کارکردگی کی بنیاد پر کھیل کو ایڈجسٹ کرے۔ یہ چیلنج آپ کو ایونٹ ہینڈلنگ، ڈیٹا تجزیہ، اور متحرک UI اپ ڈیٹس کی مشق کرنے میں مدد کرے گا۔
+**تفصیل:** ٹائپنگ کھیل کو بڑھا کر ایک مشکل نظام نافذ کریں جو کھلاڑی کی کارکردگی کی بنیاد پر کھیل کو ایڈجسٹ کرے۔ یہ چیلنج آپ کو ایونٹ ہینڈلنگ، ڈیٹا تجزیہ، اور ڈائنامک UI اپڈیٹس کی مشق کرنے میں مدد دے گا۔
 
-**پرومپٹ:** ٹائپنگ کھیل کے لیے ایک مشکل ایڈجسٹمنٹ سسٹم بنائیں جو:
+**پرومپٹ:** ٹائپنگ کھیل کے لیے ایک مشکل ایڈجسٹمنٹ نظام بنائیں جو:
 1. کھلاڑی کی ٹائپنگ کی رفتار (الفاظ فی منٹ) اور درستگی فیصد کو ٹریک کرے
-2. خود بخود تین مشکل سطحوں پر ایڈجسٹ کرے: آسان (سادہ اقتباسات)، درمیانہ (موجودہ اقتباسات)، مشکل (پیچیدہ اقتباسات، نشانات کے ساتھ)
-3. موجودہ مشکل سطح اور کھلاڑی کے اعداد و شمار کو UI پر ظاہر کرے
+2. خود بخود تین مشکل سطحوں پر ایڈجسٹ کرے: آسان (سادہ اقتباسات)، درمیانہ (موجودہ اقتباسات)، مشکل (پیچیدہ اقتباسات، علامات کے ساتھ)
+3. موجودہ مشکل سطح اور کھلاڑی کے اعدادوشمار UI پر دکھائے
 4. ایک اسٹریک کاؤنٹر نافذ کرے جو 3 مسلسل اچھی کارکردگی کے بعد مشکل بڑھاتا ہے
-5. بصری فیڈبیک (رنگ، اینیمیشنز) شامل کرے تاکہ مشکل کی تبدیلیوں کو ظاہر کرے
+5. بصری فیڈبیک (رنگ، اینیمیشنز) شامل کرے تاکہ مشکل کی تبدیلیوں کو ظاہر کیا جا سکے
 
 ضروری HTML عناصر، CSS اسٹائلز، اور جاوا اسکرپٹ فنکشنز شامل کریں تاکہ اس فیچر کو نافذ کیا جا سکے۔ مناسب ایرر ہینڈلنگ شامل کریں اور یقینی بنائیں کہ کھیل مناسب ARIA لیبلز کے ساتھ قابل رسائی رہے۔
 
@@ -499,7 +495,7 @@ flowchart TD
 
 **مزید فعالیت شامل کریں:**
 
-| فیچر | تفصیل | آپ جو مہارتیں مشق کریں گے |
+| خصوصیت | تفصیل | آپ جو مہارتیں مشق کریں گے |
 |---------|-------------|------------------------|
 | **انپٹ کنٹرول** | اقتباس مکمل ہونے پر `input` ایونٹ لسٹنر کو غیر فعال کریں، اور بٹن پر کلک کرنے پر دوبارہ فعال کریں | ایونٹ مینجمنٹ اور اسٹیٹ کنٹرول |
 | **UI اسٹیٹ مینجمنٹ** | اقتباس مکمل ہونے پر ٹیکسٹ باکس کو غیر فعال کریں | DOM پراپرٹی مینپولیشن |
@@ -508,7 +504,7 @@ flowchart TD
 
 **نفاذ کے نکات:**
 - **ریسرچ کریں** `localStorage.setItem()` اور `localStorage.getItem()` مستقل اسٹوریج کے لیے
-- **پریکٹس کریں** ایونٹ لسٹنرز کو متحرک طور پر شامل اور ہٹانے میں
+- **پریکٹس کریں** ایونٹ لسٹنرز کو ڈائنامک طور پر شامل اور ہٹانا
 - **ایکسپلور کریں** HTML ڈائیلاگ عناصر یا CSS موڈل پیٹرنز
 - **غور کریں** قابل رسائی پر جب فارم کنٹرولز کو غیر فعال اور فعال کریں
 
@@ -516,15 +512,64 @@ flowchart TD
 
 [پوسٹ لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/22)
 
-## جائزہ اور خود مطالعہ
+---
 
-[تمام دستیاب ایونٹس](https://developer.mozilla.org/docs/Web/Events) کے بارے میں پڑھیں جو ویب براؤزر کے ذریعے ڈویلپر کو دستیاب ہیں، اور ان منظرناموں پر غور کریں جن میں آپ ہر ایک کا استعمال کریں گے۔
+## 🚀 آپ کے ٹائپنگ کھیل کی مہارت کا ٹائم لائن
+
+### ⚡ **آپ اگلے 5 منٹ میں کیا کر سکتے ہیں**
+- [ ] مختلف اقتباسات کے ساتھ اپنے ٹائپنگ کھیل کی جانچ کریں تاکہ یہ ہموار کام کرے
+- [ ] CSS اسٹائلنگ کے ساتھ تجربہ کریں - نمایاں اور ایرر رنگ تبدیل کرنے کی کوشش کریں
+- [ ] اپنے براؤزر کے DevTools (F12) کھولیں اور کھیلتے وقت کنسول دیکھیں
+- [ ] خود کو چیلنج کریں کہ اقتباس کو جتنا جلدی ممکن ہو مکمل کریں
+
+### ⏰ **آپ اس گھنٹے میں کیا حاصل کر سکتے ہیں**
+- [ ] اقتباسات کی فہرست میں مزید اقتباسات شامل کریں (شاید آپ کی پسندیدہ کتابوں یا فلموں سے)
+- [ ] چیلنج سیکشن سے localStorage ہائی اسکور سسٹم نافذ کریں
+- [ ] ایک الفاظ فی منٹ کیلکولیٹر بنائیں جو ہر کھیل کے بعد دکھائے
+- [ ] درست ٹائپنگ، غلطیوں، اور مکمل ہونے کے لیے صوتی اثرات شامل کریں
+
+### 📅 **آپ کی ہفتہ بھر کی مہم**
+- [ ] ایک ملٹی پلیئر ورژن بنائیں جہاں دوست ساتھ ساتھ مقابلہ کر سکیں
+- [ ] مختلف مشکل سطحیں بنائیں مختلف اقتباس کی پیچیدگی کے ساتھ
+- [ ] ایک پروگریس بار شامل کریں جو دکھائے کہ اقتباس کتنا مکمل ہو چکا ہے
+- [ ] صارف اکاؤنٹس نافذ کریں ذاتی اعدادوشمار کی ٹریکنگ کے ساتھ
+- [ ] کسٹم تھیمز ڈیزائن کریں اور صارفین کو اپنی پسندیدہ اسٹائلنگ منتخب کرنے دیں
+
+### 🗓️ **آپ کی مہینہ بھر کی تبدیلی**
+- [ ] ایک ٹائپنگ کورس بنائیں جس میں سبق ہوں جو مناسب انگلیوں کی جگہ سکھاتے ہیں
+- [ ] تجزیات بنائیں جو دکھائیں کہ کون سے حروف یا الفاظ سب سے زیادہ غلطیاں پیدا کرتے ہیں
+- [ ] مختلف زبانوں اور کی بورڈ لے آؤٹس کے لیے سپورٹ شامل کریں
+- [ ] تعلیمی APIs کے ساتھ انٹیگریٹ کریں تاکہ ادب کے ڈیٹا بیس سے اقتباسات حاصل کیے جا سکیں
+- [ ] اپنے بہتر ٹائپنگ کھیل کو دوسروں کے استعمال اور لطف اندوز ہونے کے لیے شائع کریں
+
+### 🎯 **آخری عکاسی چیک ان**
+
+**آگے بڑھنے سے پہلے، ایک لمحہ لیں اور جشن منائیں:**
+- کھیل بناتے وقت سب سے زیادہ اطمینان بخش لمحہ کیا تھا؟
+- ایونٹ ڈرائیون پروگرامنگ کے بارے میں آپ کی رائے اب کیسی ہے جب آپ نے شروع کیا تھا؟
+- ایک خصوصیت کیا ہے جسے شامل کرنے کے لیے آپ پرجوش ہیں تاکہ یہ کھیل آپ کا منفرد بنے؟
+- آپ ایونٹ ہینڈلنگ کے تصورات کو دوسرے منصوبوں پر کیسے لاگو کر سکتے ہیں؟
 
-## اسائنمنٹ
+```mermaid
+journey
+    title Your Event Programming Confidence Journey
+    section Today
+      Understanding Events: 3: You
+      Building UI: 4: You
+      Writing Event Listeners: 5: You
+    section This Week
+      Adding Features: 4: You
+      Debugging Issues: 5: You
+      Enhancing UX: 4: You
+    section Next Month
+      Building Complex Apps: 5: You
+      Teaching Others: 5: You
+      Creating Frameworks: 5: You
+```
 
-[ایک نیا کی بورڈ کھیل بنائیں](assignment.md)
+> 🌟 **یاد رکھیں**: آپ نے ابھی ان بنیادی تصورات میں مہارت حاصل کی ہے جو ہر انٹرایکٹو ویب سائٹ اور ایپلیکیشن کو طاقت دیتے ہیں۔ ایونٹ ڈرائیون پروگرامنگ وہ ہے جو ویب کو زندہ اور جوابدہ محسوس کرتی ہے۔ ہر بار جب آپ ڈراپ ڈاؤن مینو، ایک فارم جو ٹائپ کرتے وقت ویلیڈیٹ کرتا ہے، یا ایک کھیل جو آپ کے کلکس پر ردعمل دیتا ہے، آپ اب اس کے پیچھے جادو
 
 ---
 
-**اعلانِ لاتعلقی**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا عدم درستگی ہو سکتی ہے۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**ڈسکلیمر**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/5-browser-extension/1-about-browsers/README.md b/translations/ur/5-browser-extension/1-about-browsers/README.md
index b93a290df4..cd207e34fa 100644
--- a/translations/ur/5-browser-extension/1-about-browsers/README.md
+++ b/translations/ur/5-browser-extension/1-about-browsers/README.md
@@ -1,14 +1,31 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "33a875c522f237a2026e4653240dfc07",
-  "translation_date": "2025-10-22T15:15:33+00:00",
+  "original_hash": "00aa85715e1efd4930c17a23e3012e69",
+  "translation_date": "2025-11-03T13:42:16+00:00",
   "source_file": "5-browser-extension/1-about-browsers/README.md",
   "language_code": "ur"
 }
 -->
 # براؤزر ایکسٹینشن پروجیکٹ حصہ 1: براؤزرز کے بارے میں سب کچھ
 
+```mermaid
+journey
+    title Your Browser Extension Development Journey
+    section Foundation
+      Understand browsers: 3: Student
+      Learn extension types: 4: Student
+      Setup development: 4: Student
+    section Development
+      Build interface: 4: Student
+      Add functionality: 5: Student
+      Handle data: 5: Student
+    section Integration
+      Test in browser: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
+
 ![براؤزر اسکیچ نوٹ](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ur.jpg)
 > اسکیچ نوٹ از [وسیم چگم](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
 
@@ -18,57 +35,93 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### تعارف
 
-براؤزر ایکسٹینشنز چھوٹے ایپلیکیشنز ہیں جو آپ کے ویب براؤزنگ تجربے کو بہتر بناتی ہیں۔ جیسے کہ ٹم برنرز لی نے انٹرایکٹو ویب کا تصور پیش کیا تھا، ایکسٹینشنز براؤزر کی صلاحیتوں کو سادہ دستاویز دیکھنے سے آگے بڑھاتی ہیں۔ پاس ورڈ مینیجرز سے لے کر جو آپ کے اکاؤنٹس کو محفوظ رکھتے ہیں، اور کلر پکرز تک جو ڈیزائنرز کو بہترین رنگ حاصل کرنے میں مدد دیتے ہیں، ایکسٹینشنز روزمرہ کے براؤزنگ مسائل حل کرتی ہیں۔
+براؤزر ایکسٹینشنز چھوٹے ایپلیکیشنز ہیں جو آپ کے ویب براؤزنگ تجربے کو بہتر بناتے ہیں۔ جیسے کہ ٹم برنرز لی نے انٹرایکٹو ویب کا تصور پیش کیا تھا، ایکسٹینشنز براؤزر کی صلاحیتوں کو سادہ دستاویز دیکھنے سے آگے بڑھاتے ہیں۔ پاس ورڈ مینیجرز سے لے کر جو آپ کے اکاؤنٹس کو محفوظ رکھتے ہیں، اور کلر پکرز تک جو ڈیزائنرز کو بہترین رنگ منتخب کرنے میں مدد دیتے ہیں، ایکسٹینشنز روزمرہ کے براؤزنگ مسائل حل کرتے ہیں۔
+
+آپ کا پہلا ایکسٹینشن بنانے سے پہلے، آئیے سمجھتے ہیں کہ براؤزر کیسے کام کرتے ہیں۔ جیسے الیگزینڈر گراہم بیل کو ٹیلیفون ایجاد کرنے سے پہلے آواز کی ترسیل کو سمجھنا ضروری تھا، براؤزر کی بنیادی باتوں کو جاننا آپ کو ایسے ایکسٹینشنز بنانے میں مدد دے گا جو موجودہ براؤزر سسٹمز کے ساتھ آسانی سے ہم آہنگ ہوں۔
 
-پہلا ایکسٹینشن بنانے سے پہلے، آئیے سمجھتے ہیں کہ براؤزرز کیسے کام کرتے ہیں۔ جیسے الیگزینڈر گراہم بیل کو ٹیلیفون ایجاد کرنے سے پہلے آواز کی ترسیل کو سمجھنا ضروری تھا، براؤزر کی بنیادی باتوں کو جاننا آپ کو ایسے ایکسٹینشنز بنانے میں مدد دے گا جو موجودہ براؤزر سسٹمز کے ساتھ آسانی سے ہم آہنگ ہوں۔
+اس سبق کے اختتام تک، آپ براؤزر کی ساخت کو سمجھ جائیں گے اور اپنا پہلا ایکسٹینشن بنانا شروع کر چکے ہوں گے۔
 
-اس سبق کے اختتام تک، آپ براؤزر کی ساخت کو سمجھ جائیں گے اور اپنا پہلا ایکسٹینشن بنانا شروع کر دیں گے۔
+```mermaid
+mindmap
+  root((Browser Architecture))
+    Core Components
+      Rendering Engine
+      JavaScript Engine
+      Network Stack
+      Storage APIs
+    User Interface
+      Address Bar
+      Tab Management
+      Bookmarks
+      Extension Icons
+    Extension System
+      Manifest Files
+      Content Scripts
+      Background Pages
+      Popup Windows
+    Security Model
+      Same-Origin Policy
+      Permissions API
+      Content Security
+      Isolated Worlds
+    Development Tools
+      DevTools Integration
+      Debug Console
+      Performance Monitor
+      Extension Inspector
+```
 
 ## ویب براؤزرز کو سمجھنا
 
 ویب براؤزر بنیادی طور پر ایک پیچیدہ دستاویز انٹرپریٹر ہے۔ جب آپ ایڈریس بار میں "google.com" ٹائپ کرتے ہیں، تو براؤزر ایک پیچیدہ سلسلہ وار عمل انجام دیتا ہے - دنیا بھر کے سرورز سے مواد کی درخواست کرتا ہے، پھر اس کوڈ کو انٹرایکٹو ویب صفحات میں تبدیل کرتا ہے جو آپ دیکھتے ہیں۔
 
-یہ عمل اس طرح ہے جیسے پہلا ویب براؤزر، ورلڈ وائڈ ویب، 1990 میں ٹم برنرز لی نے بنایا تھا تاکہ ہائپر لنکڈ دستاویزات کو سب کے لیے قابل رسائی بنایا جا سکے۔
+یہ عمل اس طرح ہے جیسے پہلا ویب براؤزر، ورلڈ وائڈ ویب، 1990 میں ٹم برنرز لی نے ڈیزائن کیا تھا تاکہ ہائپر لنکڈ دستاویزات کو سب کے لیے قابل رسائی بنایا جا سکے۔
 
-✅ **تھوڑا سا تاریخ کا علم**: پہلا براؤزر 'ورلڈ وائڈ ویب' کہلاتا تھا اور اسے سر ٹموتھی برنرز لی نے 1990 میں بنایا تھا۔
+✅ **تھوڑا سا تاریخ کے بارے میں**: پہلا براؤزر 'ورلڈ وائڈ ویب' کہلاتا تھا اور اسے سر ٹموتھی برنرز لی نے 1990 میں بنایا تھا۔
 
 ![ابتدائی براؤزرز](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ur.jpg)
 > کچھ ابتدائی براؤزرز، از [کیرن میکگرین](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
 
 ### براؤزرز ویب مواد کو کیسے پروسیس کرتے ہیں
 
-ایک URL درج کرنے اور ویب صفحہ دیکھنے کے درمیان عمل میں کئی مربوط مراحل شامل ہوتے ہیں جو سیکنڈوں میں مکمل ہو جاتے ہیں:
+ایک URL درج کرنے اور ویب صفحہ دیکھنے کے درمیان عمل میں کئی مربوط مراحل شامل ہوتے ہیں جو چند سیکنڈز میں مکمل ہو جاتے ہیں:
 
 ```mermaid
 sequenceDiagram
     participant User
     participant Browser
+    participant Extension
     participant DNS
     participant Server
     
     User->>Browser: Types URL and presses Enter
+    Browser->>Extension: Trigger beforeRequest event
+    Extension->>Extension: Check if URL needs modification
     Browser->>DNS: Looks up server IP address
     DNS->>Browser: Returns IP address
     Browser->>Server: Requests web page content
     Server->>Browser: Sends HTML, CSS, and JavaScript
+    Browser->>Extension: Trigger beforeResponse event
+    Extension->>Extension: Modify content if needed
     Browser->>User: Renders complete web page
+    Extension->>User: Show extension UI updates
 ```
 
 **یہ عمل کیا حاصل کرتا ہے:**
-- **ترجمہ کرتا ہے** انسانی قابل پڑھائی URL کو DNS لوک اپ کے ذریعے سرور IP ایڈریس میں
-- **قائم کرتا ہے** ویب سرور کے ساتھ ایک محفوظ کنکشن HTTP یا HTTPS پروٹوکولز کا استعمال کرتے ہوئے
-- **درخواست کرتا ہے** مخصوص ویب صفحہ مواد سرور سے
+- **ترجمہ کرتا ہے** انسانی قابل پڑھائی URL کو DNS لوک اپ کے ذریعے سرور کے IP ایڈریس میں
+- **قائم کرتا ہے** ویب سرور کے ساتھ محفوظ کنکشن HTTP یا HTTPS پروٹوکولز کا استعمال کرتے ہوئے
+- **درخواست کرتا ہے** مخصوص ویب صفحہ کا مواد سرور سے
 - **وصول کرتا ہے** HTML مارک اپ، CSS اسٹائلنگ، اور جاوا اسکرپٹ کوڈ سرور سے
 - **رینڈر کرتا ہے** تمام مواد کو انٹرایکٹو ویب صفحہ میں جو آپ دیکھتے ہیں
 
-### براؤزر کی بنیادی خصوصیات
+### براؤزر کے بنیادی خصوصیات
 
 جدید براؤزرز کئی خصوصیات فراہم کرتے ہیں جنہیں ایکسٹینشن ڈیولپرز استعمال کر سکتے ہیں:
 
 | خصوصیت | مقصد | ایکسٹینشن کے مواقع |
 |---------|---------|------------------------|
-| **رینڈرنگ انجن** | HTML، CSS، اور جاوا اسکرپٹ کو دکھاتا ہے | مواد میں ترمیم، اسٹائلنگ انجیکشن |
-| **جاوا اسکرپٹ انجن** | جاوا اسکرپٹ کوڈ کو چلاتا ہے | کسٹم اسکرپٹس، API انٹریکشن |
+| **رینڈرنگ انجن** | HTML، CSS، اور جاوا اسکرپٹ دکھاتا ہے | مواد میں تبدیلی، اسٹائلنگ انجیکشن |
+| **جاوا اسکرپٹ انجن** | جاوا اسکرپٹ کوڈ کو چلاتا ہے | کسٹم اسکرپٹس، API انٹریکشنز |
 | **لوکل اسٹوریج** | ڈیٹا کو مقامی طور پر محفوظ کرتا ہے | صارف کی ترجیحات، کیشڈ ڈیٹا |
 | **نیٹ ورک اسٹیک** | ویب درخواستوں کو ہینڈل کرتا ہے | درخواست کی نگرانی، ڈیٹا تجزیہ |
 | **سیکیورٹی ماڈل** | صارفین کو نقصان دہ مواد سے محفوظ رکھتا ہے | مواد فلٹرنگ، سیکیورٹی میں بہتری |
@@ -76,28 +129,48 @@ sequenceDiagram
 **ان خصوصیات کو سمجھنے سے آپ کو مدد ملتی ہے:**
 - **شناخت کریں** کہ آپ کا ایکسٹینشن سب سے زیادہ قدر کہاں شامل کر سکتا ہے
 - **منتخب کریں** صحیح براؤزر APIs اپنے ایکسٹینشن کی فعالیت کے لیے
-- **ڈیزائن کریں** ایکسٹینشنز جو براؤزر سسٹمز کے ساتھ مؤثر طریقے سے کام کریں
-- **یقینی بنائیں** کہ آپ کا ایکسٹینشن براؤزر سیکیورٹی کے بہترین طریقوں پر عمل کرتا ہے
+- **ڈیزائن کریں** ایکسٹینشنز جو براؤزر سسٹمز کے ساتھ مؤثر طریقے سے کام کرتے ہیں
+- **یقینی بنائیں** کہ آپ کا ایکسٹینشن براؤزر سیکیورٹی کے بہترین اصولوں پر عمل کرتا ہے
 
 ### کراس-براؤزر ڈیولپمنٹ کے غور و فکر
 
-مختلف براؤزرز معیارات کو تھوڑے مختلف طریقے سے نافذ کرتے ہیں، جیسے مختلف پروگرامنگ زبانیں ایک ہی الگورتھم کو مختلف طریقے سے ہینڈل کر سکتی ہیں۔ کروم، فائر فاکس، اور سفاری کے اپنے منفرد خصوصیات ہیں جنہیں ایکسٹینشن ڈیولپمنٹ کے دوران مدنظر رکھنا ضروری ہے۔
+مختلف براؤزرز معیارات کو تھوڑے مختلف طریقے سے نافذ کرتے ہیں، جیسے کہ مختلف پروگرامنگ زبانیں ایک ہی الگورتھم کو مختلف طریقے سے ہینڈل کر سکتی ہیں۔ کروم، فائر فاکس، اور سفاری کے اپنے منفرد خصوصیات ہیں جنہیں ایکسٹینشن ڈیولپمنٹ کے دوران مدنظر رکھنا ضروری ہے۔
 
-> 💡 **پرو ٹپ**: [caniuse.com](https://www.caniuse.com) استعمال کریں تاکہ معلوم ہو سکے کہ کون سی ویب ٹیکنالوجیز مختلف براؤزرز میں سپورٹ کی جاتی ہیں۔ یہ آپ کے ایکسٹینشن کی خصوصیات کی منصوبہ بندی کے دوران بہت قیمتی ہے!
+> 💡 **پرو ٹپ**: [caniuse.com](https://www.caniuse.com) استعمال کریں یہ چیک کرنے کے لیے کہ کون سی ویب ٹیکنالوجیز مختلف براؤزرز میں سپورٹ کی جاتی ہیں۔ یہ آپ کے ایکسٹینشن کی خصوصیات کی منصوبہ بندی کے دوران بہت قیمتی ہے!
 
 **ایکسٹینشن ڈیولپمنٹ کے لیے اہم غور و فکر:**
 - **ٹیسٹ کریں** اپنے ایکسٹینشن کو کروم، فائر فاکس، اور ایج براؤزرز میں
-- **مطابقت کریں** مختلف براؤزر ایکسٹینشن APIs اور مینفسٹ فارمیٹس کے ساتھ
-- **ہینڈل کریں** مختلف براؤزرز کی کارکردگی کی خصوصیات اور حدود
-- **فراہم کریں** براؤزر مخصوص خصوصیات کے لیے متبادل جو دستیاب نہیں ہو سکتی ہیں
+- **ڈھالیں** مختلف براؤزر ایکسٹینشن APIs اور مینفسٹ فارمیٹس کے لیے
+- **ہینڈل کریں** مختلف کارکردگی کی خصوصیات اور حدود
+- **فراہم کریں** بیک اپس براؤزر مخصوص خصوصیات کے لیے جو دستیاب نہیں ہو سکتی ہیں
 
-✅ **تجزیاتی بصیرت**: آپ اپنے ویب ڈیولپمنٹ پروجیکٹس میں تجزیاتی پیکجز انسٹال کر کے یہ معلوم کر سکتے ہیں کہ آپ کے صارفین کون سے براؤزرز کو ترجیح دیتے ہیں۔ یہ ڈیٹا آپ کو یہ ترجیح دینے میں مدد دیتا ہے کہ پہلے کون سے براؤزرز کو سپورٹ کرنا ہے۔
+✅ **تجزیاتی بصیرت**: آپ یہ معلوم کر سکتے ہیں کہ آپ کے صارفین کون سے براؤزرز کو ترجیح دیتے ہیں، اپنے ویب ڈیولپمنٹ پروجیکٹس میں تجزیاتی پیکجز انسٹال کر کے۔ یہ ڈیٹا آپ کو یہ ترجیح دینے میں مدد دیتا ہے کہ کون سے براؤزرز کو پہلے سپورٹ کرنا ہے۔
 
 ## براؤزر ایکسٹینشنز کو سمجھنا
 
-براؤزر ایکسٹینشنز عام ویب براؤزنگ کے مسائل کو حل کرتے ہیں اور براہ راست براؤزر انٹرفیس میں فعالیت شامل کرتے ہیں۔ الگ ایپلیکیشنز یا پیچیدہ ورک فلو کی ضرورت کے بجائے، ایکسٹینشنز فوری طور پر ٹولز اور خصوصیات تک رسائی فراہم کرتے ہیں۔
+براؤزر ایکسٹینشنز عام ویب براؤزنگ کے مسائل کو حل کرتے ہیں، براؤزر انٹرفیس میں براہ راست فعالیت شامل کر کے۔ علیحدہ ایپلیکیشنز یا پیچیدہ ورک فلو کی ضرورت کے بجائے، ایکسٹینشنز فوری طور پر ٹولز اور خصوصیات تک رسائی فراہم کرتے ہیں۔
 
-یہ تصور اس طرح ہے جیسے ابتدائی کمپیوٹر کے پیشرو جیسے ڈگلس اینگلبرٹ نے انسانی صلاحیتوں کو ٹیکنالوجی کے ساتھ بڑھانے کا تصور کیا تھا - ایکسٹینشنز آپ کے براؤزر کی بنیادی فعالیت کو بڑھاتے ہیں۔
+یہ تصور اس طرح ہے جیسے ابتدائی کمپیوٹر کے پیشرو جیسے ڈگلس اینگلبرٹ نے ٹیکنالوجی کے ذریعے انسانی صلاحیتوں کو بڑھانے کا تصور کیا تھا - ایکسٹینشنز آپ کے براؤزر کی بنیادی فعالیت کو بڑھاتے ہیں۔
+
+```mermaid
+quadrantChart
+    title Browser Extension Categories
+    x-axis Simple --> Complex
+    y-axis Personal Use --> Professional Tools
+    quadrant-1 Developer Tools
+    quadrant-2 Enterprise Solutions
+    quadrant-3 Personal Utilities
+    quadrant-4 Productivity Apps
+    
+    Ad Blockers: [0.3, 0.2]
+    Password Managers: [0.7, 0.3]
+    Color Pickers: [0.4, 0.8]
+    Code Formatters: [0.8, 0.9]
+    Note Taking: [0.6, 0.5]
+    Video Downloaders: [0.5, 0.2]
+    Time Trackers: [0.7, 0.6]
+    Screenshot Tools: [0.4, 0.4]
+```
 
 **مقبول ایکسٹینشن کیٹیگریز اور ان کے فوائد:**
 - **پروڈکٹیویٹی ٹولز**: ٹاسک مینیجرز، نوٹ لینے والے ایپس، اور وقت کے ٹریکرز جو آپ کو منظم رہنے میں مدد دیتے ہیں
@@ -107,17 +180,51 @@ sequenceDiagram
 
 ✅ **عکاسی کا سوال**: آپ کے پسندیدہ براؤزر ایکسٹینشنز کون سے ہیں؟ وہ کون سے مخصوص کام انجام دیتے ہیں، اور وہ آپ کے براؤزنگ تجربے کو کیسے بہتر بناتے ہیں؟
 
+### 🔄 **تعلیمی چیک ان**
+**براؤزر کی ساخت کو سمجھنا**: ایکسٹینشن ڈیولپمنٹ کی طرف بڑھنے سے پہلے، یقینی بنائیں کہ آپ:
+- ✅ وضاحت کر سکتے ہیں کہ براؤزرز ویب درخواستوں کو کیسے پروسیس کرتے ہیں اور مواد کو کیسے رینڈر کرتے ہیں
+- ✅ براؤزر کی ساخت کے اہم اجزاء کی شناخت کر سکتے ہیں
+- ✅ سمجھ سکتے ہیں کہ ایکسٹینشنز براؤزر کی فعالیت کے ساتھ کیسے انضمام کرتے ہیں
+- ✅ وہ سیکیورٹی ماڈل پہچان سکتے ہیں جو صارفین کی حفاظت کرتا ہے
+
+**فوری خود ٹیسٹ**: کیا آپ URL ٹائپ کرنے سے لے کر ویب صفحہ دیکھنے تک کا راستہ بیان کر سکتے ہیں؟
+1. **DNS لوک اپ** URL کو IP ایڈریس میں تبدیل کرتا ہے
+2. **HTTP درخواست** سرور سے مواد حاصل کرتی ہے
+3. **پارسنگ** HTML، CSS، اور جاوا اسکرپٹ کو پروسیس کرتی ہے
+4. **رینڈرنگ** حتمی ویب صفحہ دکھاتی ہے
+5. **ایکسٹینشنز** مواد کو کئی مراحل پر تبدیل کر سکتے ہیں
+
 ## ایکسٹینشنز انسٹال کرنا اور مینج کرنا
 
 ایکسٹینشن انسٹالیشن کے عمل کو سمجھنا آپ کو صارف کے تجربے کی پیش گوئی کرنے میں مدد دیتا ہے جب لوگ آپ کا ایکسٹینشن انسٹال کرتے ہیں۔ انسٹالیشن کا عمل جدید براؤزرز میں معیاری ہے، انٹرفیس ڈیزائن میں معمولی فرق کے ساتھ۔
 
-![ایج براؤزر کا اسکرین شاٹ جس میں edge://extensions صفحہ اور سیٹنگز مینو کھلا ہوا ہے](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ur.png)
+![ایج براؤزر کا اسکرین شاٹ جس میں edge://extensions صفحہ اور سیٹنگز مینو کھلا ہوا دکھایا گیا ہے](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ur.png)
 
 > **اہم**: جب آپ اپنے ایکسٹینشنز کی جانچ کر رہے ہوں تو ڈویلپر موڈ کو آن کریں اور دوسرے اسٹورز سے ایکسٹینشنز کی اجازت دیں۔
 
 ### ڈیولپمنٹ ایکسٹینشن انسٹالیشن کا عمل
 
-جب آپ اپنے ایکسٹینشنز کو ڈیولپ اور ٹیسٹ کر رہے ہوں، تو اس ورک فلو پر عمل کریں:
+جب آپ اپنے ایکسٹینشنز کو ڈیولپ اور ٹیسٹ کر رہے ہوں، تو اس ورک فلو کو فالو کریں:
+
+```mermaid
+flowchart TD
+    A[Write Code] --> B[Build Extension]
+    B --> C{First Install?}
+    C -->|Yes| D[Load Unpacked]
+    C -->|No| E[Reload Extension]
+    D --> F[Test Functionality]
+    E --> F
+    F --> G{Working Correctly?}
+    G -->|No| H[Debug Issues]
+    G -->|Yes| I[Ready for Users]
+    H --> A
+    I --> J[Publish to Store]
+    
+    style A fill:#e1f5fe
+    style F fill:#e8f5e8
+    style I fill:#f3e5f5
+    style J fill:#fff3e0
+```
 
 ```bash
 # Step 1: Build your extension
@@ -125,15 +232,15 @@ npm run build
 ```
 
 **یہ کمانڈ کیا حاصل کرتی ہے:**
-- **کمپائل کرتی ہے** آپ کے سورس کوڈ کو براؤزر کے لیے تیار فائلز میں
-- **بنڈل کرتی ہے** جاوا اسکرپٹ ماڈیولز کو بہتر پیکجز میں
-- **جنریٹ کرتی ہے** حتمی ایکسٹینشن فائلز `/dist` فولڈر میں
-- **تیار کرتی ہے** آپ کے ایکسٹینشن کو انسٹالیشن اور ٹیسٹنگ کے لیے
+- **آپ کے سورس کوڈ کو** براؤزر کے لیے تیار فائلز میں کمپائل کرتی ہے
+- **جاوا اسکرپٹ ماڈیولز کو** بہتر پیکجز میں بنڈل کرتی ہے
+- **حتمی ایکسٹینشن فائلز کو** `/dist` فولڈر میں جنریٹ کرتی ہے
+- **آپ کے ایکسٹینشن کو** انسٹالیشن اور ٹیسٹنگ کے لیے تیار کرتی ہے
 
 **مرحلہ 2: براؤزر ایکسٹینشنز پر جائیں**
-1. **کھولیں** اپنے براؤزر کا ایکسٹینشنز مینجمنٹ صفحہ
-2. **کلک کریں** "سیٹنگز اور مزید" بٹن (اوپر دائیں جانب `...` آئیکن)
-3. **منتخب کریں** "ایکسٹینشنز" ڈراپ ڈاؤن مینو سے
+1. **اپنے براؤزر کے** ایکسٹینشنز مینجمنٹ صفحہ کو کھولیں
+2. **"سیٹنگز اور مزید" بٹن** (اوپر دائیں طرف `...` آئیکن) پر کلک کریں
+3. **ڈراپ ڈاؤن مینو سے** "ایکسٹینشنز" منتخب کریں
 
 **مرحلہ 3: اپنا ایکسٹینشن لوڈ کریں**
 - **نئی انسٹالیشنز کے لیے**: `load unpacked` منتخب کریں اور اپنے `/dist` فولڈر کو منتخب کریں
@@ -142,36 +249,36 @@ npm run build
 
 ### پروڈکشن ایکسٹینشن انسٹالیشن
 
-> ✅ **نوٹ**: یہ ڈیولپمنٹ ہدایات خاص طور پر ان ایکسٹینشنز کے لیے ہیں جو آپ خود بناتے ہیں۔ شائع شدہ ایکسٹینشنز انسٹال کرنے کے لیے، آفیشل براؤزر ایکسٹینشن اسٹورز پر جائیں جیسے [مائیکروسافٹ ایج ایڈ-آنز اسٹور](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home)۔
+> ✅ **نوٹ**: یہ ڈیولپمنٹ ہدایات خاص طور پر ان ایکسٹینشنز کے لیے ہیں جو آپ خود بناتے ہیں۔ شائع شدہ ایکسٹینشنز انسٹال کرنے کے لیے، آفیشل براؤزر ایکسٹینشن اسٹورز جیسے [مائیکروسافٹ ایج ایڈ-آنز اسٹور](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) پر جائیں۔
 
 **فرق کو سمجھنا:**
-- **ڈیولپمنٹ انسٹالیشنز** آپ کو غیر شائع شدہ ایکسٹینشنز کو ڈیولپمنٹ کے دوران ٹیسٹ کرنے دیتی ہیں
+- **ڈیولپمنٹ انسٹالیشنز** آپ کو ڈیولپمنٹ کے دوران غیر شائع شدہ ایکسٹینشنز کی جانچ کرنے دیتی ہیں
 - **اسٹور انسٹالیشنز** تصدیق شدہ، شائع شدہ ایکسٹینشنز فراہم کرتی ہیں جن کے خودکار اپ ڈیٹس ہوتے ہیں
 - **سائیڈ لوڈنگ** آپ کو آفیشل اسٹورز کے باہر سے ایکسٹینشنز انسٹال کرنے کی اجازت دیتی ہے (ڈویلپر موڈ کی ضرورت ہوتی ہے)
 
 ## اپنا کاربن فوٹ پرنٹ ایکسٹینشن بنانا
 
-ہم ایک براؤزر ایکسٹینشن بنائیں گے جو آپ کے علاقے کے توانائی کے استعمال کے کاربن فوٹ پرنٹ کو ظاہر کرے گا۔ یہ پروجیکٹ ضروری ایکسٹینشن ڈیولپمنٹ کے تصورات کو ظاہر کرتا ہے جبکہ ماحولیاتی آگاہی کے لیے ایک عملی ٹول بناتا ہے۔
+ہم ایک براؤزر ایکسٹینشن بنائیں گے جو آپ کے علاقے کی توانائی کے استعمال کے کاربن فوٹ پرنٹ کو دکھاتا ہے۔ یہ پروجیکٹ ضروری ایکسٹینشن ڈیولپمنٹ کے تصورات کو عملی ٹول کے ساتھ ماحولیاتی آگاہی کے لیے ظاہر کرتا ہے۔
 
-یہ طریقہ "عمل کے ذریعے سیکھنے" کے اصول کی پیروی کرتا ہے جو جان ڈیوی کے تعلیمی نظریات کے بعد سے مؤثر ثابت ہوا ہے - تکنیکی مہارتوں کو بامعنی حقیقی دنیا کی ایپلیکیشنز کے ساتھ جوڑنا۔
+یہ طریقہ "عمل کے ذریعے سیکھنے" کے اصول پر عمل کرتا ہے جو جان ڈیوی کے تعلیمی نظریات کے بعد سے مؤثر ثابت ہوا ہے - تکنیکی مہارتوں کو حقیقی دنیا کے معنی خیز ایپلیکیشنز کے ساتھ جوڑنا۔
 
 ### پروجیکٹ کی ضروریات
 
-ڈیولپمنٹ شروع کرنے سے پہلے، آئیے مطلوبہ وسائل اور ڈیپینڈنسیز جمع کریں:
+ڈیولپمنٹ شروع کرنے سے پہلے، آئیے مطلوبہ وسائل اور ڈیپینڈنسیز جمع کرتے ہیں:
 
 **ضروری API رسائی:**
 - **[CO2 سگنل API کلید](https://www.co2signal.com/)**: اپنا ای میل ایڈریس درج کریں تاکہ آپ کو مفت API کلید ملے
 - **[علاقے کا کوڈ](http://api.electricitymap.org/v3/zones)**: اپنا علاقے کا کوڈ [الیکٹریسٹی میپ](https://www.electricitymap.org/map) کے ذریعے تلاش کریں (مثال کے طور پر، بوسٹن 'US-NEISO' استعمال کرتا ہے)
 
 **ڈیولپمنٹ ٹولز:**
-- **[Node.js اور NPM](https://www.npmjs.com)**: پیکج مینجمنٹ ٹول پروجیکٹ ڈیپینڈنسیز انسٹال کرنے کے لیے
-- **[اسٹارٹر کوڈ](../../../../5-browser-extension/start)**: `start` فولڈر ڈاؤنلوڈ کریں تاکہ ڈیولپمنٹ شروع کی جا سکے
+- **[Node.js اور NPM](https://www.npmjs.com)**: پروجیکٹ ڈیپینڈنسیز انسٹال کرنے کے لیے پیکج مینجمنٹ ٹول
+- **[اسٹارٹر کوڈ](../../../../5-browser-extension/start)**: ڈیولپمنٹ شروع کرنے کے لیے `start` فولڈر ڈاؤنلوڈ کریں
 
-✅ **مزید جانیں**: اپنے پیکج مینجمنٹ کی مہارت کو اس [جامع لرن ماڈیول](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) کے ساتھ بہتر بنائیں
+✅ **مزید سیکھیں**: اپنے پیکج مینجمنٹ کی مہارت کو اس [جامع لرن ماڈیول](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) کے ساتھ بہتر بنائیں
 
 ### پروجیکٹ کی ساخت کو سمجھنا
 
-پروجیکٹ کی ساخت کو سمجھنا ڈیولپمنٹ کے کام کو مؤثر طریقے سے منظم کرنے میں مدد دیتا ہے۔ جیسے کہ اسکندریہ کی لائبریری آسان علم کی بازیابی کے لیے منظم کی گئی تھی، ایک اچھی طرح سے منظم کوڈ بیس ڈیولپمنٹ کو زیادہ مؤثر بناتا ہے:
+پروجیکٹ کی ساخت کو سمجھنا ڈیولپمنٹ کے کام کو مؤثر طریقے سے منظم کرنے میں مدد دیتا ہے۔ جیسے کہ اسکندریہ کی لائبریری کو آسان علم کی بازیافت کے لیے منظم کیا گیا تھا، ایک اچھی طرح سے منظم کوڈ بیس ڈیولپمنٹ کو زیادہ مؤثر بناتا ہے:
 
 ```
 project-root/
@@ -180,90 +287,193 @@ project-root/
 │   ├── index.html           # User interface markup
 │   ├── background.js        # Background script functionality
 │   └── main.js              # Compiled JavaScript bundle
-└── src/                     # Source development files
-    └── index.js             # Your main JavaScript code
+├── src/                     # Source development files
+│   └── index.js             # Your main JavaScript code
+├── package.json             # Project dependencies and scripts
+└── webpack.config.js        # Build configuration
 ```
 
 **ہر فائل کیا حاصل کرتی ہے:**
 - **`manifest.json`**: **تعریف کرتا ہے** ایکسٹینشن میٹا ڈیٹا، اجازتیں، اور انٹری پوائنٹس
 - **`index.html`**: **بناتا ہے** صارف انٹرفیس جو صارفین آپ کے ایکسٹینشن پر کلک کرتے وقت دیکھتے ہیں
-- **`background.js`**: **ہینڈل کرتا ہے** پس منظر کے کام اور براؤزر ایونٹ لسٹنرز
-- **`main.js`**: **رکھتا ہے** حتمی بنڈل شدہ جاوا اسکرپٹ بلڈ پروسیس کے بعد
+- **`background.js`**: **ہینڈل کرتا ہے** بیک گراؤنڈ ٹاسکس اور براؤزر ایونٹ لسٹنرز
+- **`main.js`**: **شامل کرتا ہے** حتمی بنڈل جاوا اسکرپٹ بلڈ پروسیس کے بعد
 - **`src/index.js`**: **رکھتا ہے** آپ کا بنیادی ڈیولپمنٹ کوڈ جو `main.js` میں کمپائل ہوتا ہے
 
-> 💡 **تنظیمی ٹپ**: اپنے API کلید اور علاقے کے کوڈ کو محفوظ نوٹ میں محفوظ کریں تاکہ ڈیولپمنٹ کے دوران آسان حوالہ کے لیے۔ آپ کو ان اقدار کی ضرورت ہوگی تاکہ اپنے ایکسٹینشن کی فعالیت کو ٹیسٹ کر سکیں۔
+> 💡 **تنظیمی ٹپ**: اپنے API کلید اور علاقے کے کوڈ کو محفوظ نوٹ میں اسٹور کریں تاکہ ڈیولپمنٹ کے دوران آسان حوالہ کے لیے۔ آپ کو ان اقدار کی ضرورت ہوگی تاکہ اپنے ایکسٹینشن کی فعالیت کو ٹیسٹ کریں۔
 
-✅ **سیکیورٹی نوٹ**: کبھی بھی API کلید یا حساس اسناد کو اپنے کوڈ ریپوزیٹری میں شامل نہ کریں۔ ہم آپ کو اگلے مراحل میں دکھائیں گے کہ انہیں محفوظ طریقے سے کیسے ہینڈل کریں۔
+✅ **سیکیورٹی نوٹ**: کبھی بھی API کلید یا حساس اسناد کو اپنے کوڈ ریپوزیٹری میں کمیٹ نہ کریں۔ ہم آپ کو اگلے مراحل میں دکھائیں گے کہ انہیں محفوظ طریقے سے کیسے ہینڈل کریں۔
 
 ## ایکسٹینشن انٹرفیس بنانا
 
 اب ہم صارف انٹرفیس کے اجزاء بنائیں گے۔ ایکسٹینشن دو اسکرین اپروچ استعمال کرتا ہے: ابتدائی سیٹ اپ کے لیے کنفیگریشن اسکرین اور ڈیٹا ڈسپلے کے لیے نتائج کی اسکرین۔
 
-یہ کمپیوٹنگ کے ابتدائی دنوں سے انٹرفیس ڈیزائن میں استعمال ہونے والے ترقی پسند انکشاف کے اصول کی پیروی کرتا ہے - صارفین کو مغلوب کرنے سے بچانے کے لیے معلومات اور اختیارات کو منطقی ترتیب میں ظاہر کرنا۔
+یہ انٹرفیس ڈیزائن میں استعمال ہونے والے ترقی پسند انکشاف کے اصول پر عمل کرتا ہے، کمپیوٹنگ کے ابتدائی دنوں سے - معلومات اور اختیارات کو منطقی ترتیب میں ظاہر کرنا تاکہ صارفین کو مغلوب نہ کیا جائے۔
 
 ### ایکسٹینشن ویوز کا جائزہ
 
 **سیٹ اپ ویو** - پہلی بار صارف کنفیگریشن:
-![مکمل ایکسٹینشن کا اسکرین شاٹ جو براؤزر میں کھلا ہوا ہے، فارم کے ساتھ جس میں علاقے کا نام اور API کلید کے لیے ان پٹ شامل ہیں۔](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ur.png)
-
-**نتائج ویو** - کاربن فوٹ پرنٹ ڈیٹا ڈسپلے:
-![مکمل ایکسٹینشن کا اسکرین شاٹ جو US-NEISO علاقے کے لیے کاربن استعمال اور فوسل فیول فیصد کے لیے اقدار دکھا رہا ہے۔](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ur.png)
-
-### کنفیگریشن فارم بنانا
-
-سیٹ اپ فارم ابتدائی استعمال کے دوران صارف کنفیگریشن ڈیٹا جمع کرتا ہے۔ ایک بار کنفیگریشن ہو جانے کے بعد، یہ معلومات براؤزر اسٹوریج میں مستقبل کے سیشنز کے لیے برقرار رہتی ہے۔
-
-`/dist/index.html` فائل میں، یہ فارم اسٹرکچر شامل کریں:
-
-```html
-<form class="form-data" autocomplete="on">
-    <div>
-        <h2>New? Add your Information</h2>
-    </div>
-    <div>
-        <label for="region">Region Name</label>
-        <input type="text" id="region" required class="region-name" />
-    </div>
-    <div>
-        <label for="api">Your API Key from tmrow</label>
-        <input type="text" id="api" required class="api-key" />
-    </div>
-    <button class="search-btn">Submit</button>
-</form>
-```
+![مکمل ایکسٹین
+1. **چلائیں** بلڈ کمانڈ تاکہ آپ کا کوڈ کمپائل ہو سکے  
+2. **لوڈ کریں** ایکسٹینشن کو اپنے براؤزر میں ڈیولپر موڈ استعمال کرتے ہوئے  
+3. **تصدیق کریں** کہ فارم صحیح طریقے سے دکھائی دے رہا ہے اور پیشہ ورانہ لگ رہا ہے  
+4. **چیک کریں** کہ تمام فارم عناصر صحیح طریقے سے ترتیب دیے گئے ہیں اور کام کر رہے ہیں  
+
+**آپ نے کیا حاصل کیا:**  
+- **بنیادی HTML ڈھانچہ بنایا** اپنے ایکسٹینشن کے لیے  
+- **تشکیل اور نتائج کے انٹرفیس تیار کیے** مناسب سیمینٹک مارک اپ کے ساتھ  
+- **جدید ڈیولپمنٹ ورک فلو سیٹ اپ کیا** انڈسٹری کے معیاری ٹولز استعمال کرتے ہوئے  
+- **بنیاد تیار کی** انٹرایکٹو جاوا اسکرپٹ فنکشنلٹی شامل کرنے کے لیے  
+
+### 🔄 **تعلیمی جائزہ**  
+**ایکسٹینشن ڈیولپمنٹ کی پیش رفت**: آگے بڑھنے سے پہلے اپنی سمجھ کی تصدیق کریں:  
+- ✅ کیا آپ پروجیکٹ اسٹرکچر میں ہر فائل کے مقصد کو بیان کر سکتے ہیں؟  
+- ✅ کیا آپ سمجھتے ہیں کہ بلڈ پروسیس آپ کے سورس کوڈ کو کیسے تبدیل کرتا ہے؟  
+- ✅ ہم کیوں تشکیل اور نتائج کو مختلف UI سیکشنز میں تقسیم کرتے ہیں؟  
+- ✅ فارم کا ڈھانچہ استعمال اور رسائی کو کیسے سپورٹ کرتا ہے؟  
+
+**ڈیولپمنٹ ورک فلو کی سمجھ**: اب آپ کو یہ کرنے کے قابل ہونا چاہیے:  
+1. **ترمیم کریں** HTML اور CSS اپنے ایکسٹینشن انٹرفیس کے لیے  
+2. **چلائیں** بلڈ کمانڈ تاکہ آپ کی تبدیلیاں کمپائل ہو سکیں  
+3. **دوبارہ لوڈ کریں** ایکسٹینشن کو اپنے براؤزر میں اپڈیٹس ٹیسٹ کرنے کے لیے  
+4. **ڈی بگ کریں** مسائل کو براؤزر ڈیولپر ٹولز استعمال کرتے ہوئے  
+
+آپ نے براؤزر ایکسٹینشن ڈیولپمنٹ کے پہلے مرحلے کو مکمل کر لیا ہے۔ جیسے رائٹ برادرز کو پرواز حاصل کرنے سے پہلے ایروڈائنامکس کو سمجھنا ضروری تھا، ان بنیادی تصورات کو سمجھنا آپ کو اگلے سبق میں مزید پیچیدہ انٹرایکٹو فیچرز بنانے کے لیے تیار کرتا ہے۔  
+
+## GitHub Copilot Agent Challenge 🚀  
+
+ایجنٹ موڈ استعمال کریں اور درج ذیل چیلنج مکمل کریں:  
 
-**یہ فارم کیا حاصل کرتا ہے:**
-- **بناتا ہے** ایک سیمینٹک فارم اسٹرکچر مناسب لیبلز اور ان پٹ ایسوسی ایشنز کے ساتھ
-- **فعال کرتا ہے** براؤزر آٹو کمپلیٹ فعالیت بہتر صارف تجربے کے لیے
-- **ضروری بناتا ہے** دونوں فیلڈز کو جمع کرانے سے پہلے بھرنا `required` ایٹریبیوٹ کا استعمال کرتے ہوئے
-- **منظم کرتا ہے** ان پٹس کو وضاحتی کلاس ناموں کے ساتھ آسان اسٹائل
-**تفصیل:** براؤزر ایکسٹینشن کو بہتر بنائیں اور فارم کی تصدیق اور صارف کی رائے کے فیچرز شامل کریں تاکہ API کیز اور ریجن کوڈز داخل کرتے وقت صارف کے تجربے کو بہتر بنایا جا سکے۔
+**تفصیل:** براؤزر ایکسٹینشن کو بہتر بنائیں اور فارم ویلیڈیشن اور یوزر فیڈبیک فیچرز شامل کریں تاکہ API کیز اور ریجن کوڈز داخل کرتے وقت یوزر کے تجربے کو بہتر بنایا جا سکے۔  
 
-**ہدایت:** جاوا اسکرپٹ کی تصدیقی فنکشنز بنائیں جو چیک کریں کہ آیا API کیز کا فیلڈ کم از کم 20 حروف پر مشتمل ہے اور ریجن کوڈ صحیح فارمیٹ (جیسے 'US-NEISO') کے مطابق ہے۔ بصری رائے شامل کریں، جیسے کہ درست ان پٹ کے لیے بارڈر کا رنگ سبز اور غلط ان پٹ کے لیے سرخ کر دیں۔ ساتھ ہی ایک ٹوگل فیچر شامل کریں تاکہ سیکیورٹی کے لیے API کیز کو دکھایا یا چھپایا جا سکے۔
+**پرومپٹ:** جاوا اسکرپٹ ویلیڈیشن فنکشنز بنائیں جو چیک کریں کہ آیا API کیز فیلڈ میں کم از کم 20 کریکٹرز ہیں اور ریجن کوڈ صحیح فارمیٹ (جیسے 'US-NEISO') کے مطابق ہے۔ ویژول فیڈبیک شامل کریں تاکہ درست ان پٹ کے لیے بارڈر کا رنگ سبز ہو اور غلط ان پٹ کے لیے سرخ ہو۔ سیکیورٹی کے لیے API کیز کو شو/ہائڈ کرنے کا فیچر بھی شامل کریں۔  
 
-[ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
+[ایجنٹ موڈ کے بارے میں مزید جانیں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) یہاں۔  
 
-## 🚀 چیلنج
+## 🚀 چیلنج  
 
-براؤزر ایکسٹینشن اسٹور پر جائیں اور ایک ایکسٹینشن اپنے براؤزر میں انسٹال کریں۔ آپ اس کے فائلز کو دلچسپ طریقوں سے جانچ سکتے ہیں۔ آپ کیا دریافت کرتے ہیں؟
+براؤزر ایکسٹینشن اسٹور پر جائیں اور ایک ایکسٹینشن انسٹال کریں۔ آپ اس کی فائلز کو دلچسپ طریقوں سے جانچ سکتے ہیں۔ آپ کیا دریافت کرتے ہیں؟  
 
-## لیکچر کے بعد کا کوئز
+## لیکچر کے بعد کا کوئز  
 
-[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/24)
+[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/24)  
 
-## جائزہ اور خود مطالعہ
+## جائزہ اور خود مطالعہ  
 
-اس سبق میں آپ نے ویب براؤزر کی تاریخ کے بارے میں تھوڑا سا سیکھا؛ اس موقع کو استعمال کریں اور ورلڈ وائڈ ویب کے موجدین نے اس کے استعمال کے بارے میں کیا تصور کیا تھا، اس کی تاریخ کے بارے میں مزید پڑھیں۔ کچھ مفید سائٹس شامل ہیں:
+اس سبق میں آپ نے ویب براؤزر کی تاریخ کے بارے میں تھوڑا سا سیکھا؛ اس موقع کو استعمال کریں اور ورلڈ وائڈ ویب کے موجدوں نے اس کے استعمال کے بارے میں کیا تصور کیا تھا، اس کی تاریخ کے بارے میں مزید پڑھیں۔ کچھ مفید سائٹس شامل ہیں:  
 
-[ویب براؤزرز کی تاریخ](https://www.mozilla.org/firefox/browsers/browser-history/)
+[ویب براؤزرز کی تاریخ](https://www.mozilla.org/firefox/browsers/browser-history/)  
 
-[ویب کی تاریخ](https://webfoundation.org/about/vision/history-of-the-web/)
+[ویب کی تاریخ](https://webfoundation.org/about/vision/history-of-the-web/)  
 
-[ٹم برنرز-لی کے ساتھ ایک انٹرویو](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+[ٹم برنرز لی کے ساتھ ایک انٹرویو](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  
 
-## اسائنمنٹ 
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**  
+- [ ] کروم/ایج ایکسٹینشنز پیج کھولیں (chrome://extensions) اور دیکھیں کہ آپ نے کیا انسٹال کیا ہے  
+- [ ] اپنے براؤزر کے ڈیولپر ٹولز نیٹ ورک ٹیب کو دیکھیں جب کوئی ویب پیج لوڈ ہو رہا ہو  
+- [ ] پیج سورس دیکھنے کی کوشش کریں (Ctrl+U) تاکہ HTML ڈھانچہ دیکھ سکیں  
+- [ ] کسی بھی ویب پیج عنصر کا معائنہ کریں اور اس کے CSS کو ڈیولپر ٹولز میں تبدیل کریں  
 
-[اپنے ایکسٹینشن کو دوبارہ اسٹائل کریں](assignment.md)
+### 🎯 **آپ اس گھنٹے میں کیا حاصل کر سکتے ہیں**  
+- [ ] لیکچر کے بعد کا کوئز مکمل کریں اور براؤزر کے بنیادی اصولوں کو سمجھیں  
+- [ ] براؤزر ایکسٹینشن کے لیے ایک بنیادی manifest.json فائل بنائیں  
+- [ ] ایک سادہ "ہیلو ورلڈ" ایکسٹینشن بنائیں جو ایک پاپ اپ دکھائے  
+- [ ] اپنے ایکسٹینشن کو ڈیولپر موڈ میں لوڈ کرنے کا ٹیسٹ کریں  
+- [ ] اپنے ہدف براؤزر کے لیے ایکسٹینشن دستاویزات کو دریافت کریں  
+
+### 📅 **آپ کا ہفتہ بھر کا ایکسٹینشن سفر**  
+- [ ] ایک مکمل فنکشنل براؤزر ایکسٹینشن بنائیں جو حقیقی افادیت فراہم کرے  
+- [ ] مواد اسکرپٹس، بیک گراؤنڈ اسکرپٹس، اور پاپ اپ انٹریکشنز کے بارے میں سیکھیں  
+- [ ] براؤزر APIs جیسے اسٹوریج، ٹیبز، اور میسجنگ کو ماسٹر کریں  
+- [ ] اپنے ایکسٹینشن کے لیے یوزر فرینڈلی انٹرفیس ڈیزائن کریں  
+- [ ] مختلف ویب سائٹس اور منظرناموں میں اپنے ایکسٹینشن کا ٹیسٹ کریں  
+- [ ] اپنے ایکسٹینشن کو براؤزر کے ایکسٹینشن اسٹور میں شائع کریں  
+
+### 🌟 **آپ کا مہینہ بھر کا براؤزر ڈیولپمنٹ**  
+- [ ] مختلف یوزر مسائل حل کرنے والے متعدد ایکسٹینشنز بنائیں  
+- [ ] ایڈوانس براؤزر APIs اور سیکیورٹی بہترین طریقوں کے بارے میں سیکھیں  
+- [ ] اوپن سورس براؤزر ایکسٹینشن پروجیکٹس میں تعاون کریں  
+- [ ] کراس براؤزر کمپٹیبلٹی اور پروگریسو انہانسمنٹ کو ماسٹر کریں  
+- [ ] دوسرے ڈیولپرز کے لیے ایکسٹینشن ڈیولپمنٹ ٹولز اور ٹیمپلیٹس بنائیں  
+- [ ] براؤزر ایکسٹینشن کے ماہر بنیں جو دوسرے ڈیولپرز کی مدد کرے  
+
+## 🎯 آپ کا براؤزر ایکسٹینشن مہارت کا ٹائم لائن  
+
+```mermaid
+timeline
+    title Browser Extension Development Progression
+    
+    section Foundation (15 minutes)
+        Browser Understanding: Core architecture
+                              : Rendering process
+                              : Extension integration points
+        
+    section Setup (20 minutes)
+        Development Environment: Project structure
+                               : Build tools configuration
+                               : Browser developer mode
+                               : Extension loading process
+        
+    section Interface Design (25 minutes)
+        User Experience: HTML structure
+                       : CSS styling
+                       : Form validation
+                       : Responsive design
+        
+    section Core Functionality (35 minutes)
+        JavaScript Integration: Event handling
+                              : API interactions
+                              : Data storage
+                              : Error handling
+        
+    section Browser APIs (45 minutes)
+        Platform Integration: Permissions system
+                            : Storage APIs
+                            : Tab management
+                            : Context menus
+        
+    section Advanced Features (1 week)
+        Professional Extensions: Background scripts
+                               : Content scripts
+                               : Cross-browser compatibility
+                               : Performance optimization
+        
+    section Publishing (2 weeks)
+        Distribution: Store submission
+                   : Review process
+                   : User feedback
+                   : Update management
+        
+    section Expert Level (1 month)
+        Extension Ecosystem: Advanced APIs
+                           : Security best practices
+                           : Enterprise features
+                           : Framework integration
+```
+  
+### 🛠️ آپ کے ایکسٹینشن ڈیولپمنٹ ٹول کٹ کا خلاصہ  
+
+اس سبق کو مکمل کرنے کے بعد، آپ کے پاس اب ہے:  
+- **براؤزر آرکیٹیکچر کا علم**: رینڈرنگ انجنز، سیکیورٹی ماڈلز، اور ایکسٹینشن انٹیگریشن کی سمجھ  
+- **ڈیولپمنٹ ماحول**: جدید ٹول چین Webpack، NPM، اور ڈی بگنگ صلاحیتوں کے ساتھ  
+- **UI/UX بنیاد**: سیمینٹک HTML ڈھانچہ پروگریسو ڈسکلوزر پیٹرنز کے ساتھ  
+- **سیکیورٹی آگاہی**: براؤزر پرمیشنز اور محفوظ ڈیولپمنٹ طریقوں کی سمجھ  
+- **کراس براؤزر تصورات**: کمپٹیبلٹی کے پہلوؤں اور ٹیسٹنگ کے طریقوں کا علم  
+- **API انٹیگریشن**: بیرونی ڈیٹا سورسز کے ساتھ کام کرنے کی بنیاد  
+- **پیشہ ورانہ ورک فلو**: انڈسٹری کے معیاری ڈیولپمنٹ اور ٹیسٹنگ طریقے  
+
+**حقیقی دنیا کی ایپلیکیشنز**: یہ مہارتیں براہ راست لاگو ہوتی ہیں:  
+- **ویب ڈیولپمنٹ**: سنگل پیج ایپلیکیشنز اور پروگریسو ویب ایپس  
+- **ڈیسک ٹاپ ایپلیکیشنز**: الیکٹران اور ویب بیسڈ ڈیسک ٹاپ سافٹ ویئر  
+- **موبائل ڈیولپمنٹ**: ہائبرڈ ایپس اور ویب بیسڈ موبائل سلوشنز  
+- **انٹرپرائز ٹولز**: اندرونی پروڈکٹیویٹی ایپلیکیشنز اور ورک فلو آٹومیشن  
+- **اوپن سورس**: براؤزر ایکسٹینشن پروجیکٹس اور ویب اسٹینڈرڈز میں تعاون  
+
+**اگلا مرحلہ**: آپ انٹرایکٹو فنکشنلٹی شامل کرنے، براؤزر APIs کے ساتھ کام کرنے، اور ایسے ایکسٹینشنز بنانے کے لیے تیار ہیں جو حقیقی یوزر مسائل حل کریں!  
+
+## اسائنمنٹ  
+
+[اپنے ایکسٹینشن کو دوبارہ ڈیزائن کریں](assignment.md)  
 
 ---
 
diff --git a/translations/ur/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ur/5-browser-extension/2-forms-browsers-local-storage/README.md
index 93a66b4da2..70aea6e48c 100644
--- a/translations/ur/5-browser-extension/2-forms-browsers-local-storage/README.md
+++ b/translations/ur/5-browser-extension/2-forms-browsers-local-storage/README.md
@@ -1,14 +1,31 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "8c8cd4af6086cc1d47e1d43aa4983d20",
-  "translation_date": "2025-10-22T15:14:01+00:00",
+  "original_hash": "2b6203a48c48d8234e0948353b47d84e",
+  "translation_date": "2025-11-03T13:40:35+00:00",
   "source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
   "language_code": "ur"
 }
 -->
 # براؤزر ایکسٹینشن پروجیکٹ حصہ 2: API کال کریں، لوکل اسٹوریج استعمال کریں
 
+```mermaid
+journey
+    title Your API Integration & Storage Journey
+    section Foundation
+      Setup DOM references: 3: Student
+      Add event listeners: 4: Student
+      Handle form submission: 4: Student
+    section Data Management
+      Implement local storage: 4: Student
+      Build API calls: 5: Student
+      Handle async operations: 5: Student
+    section User Experience
+      Add error handling: 5: Student
+      Create loading states: 4: Student
+      Polish interactions: 5: Student
+```
+
 ## لیکچر سے پہلے کا کوئز
 
 [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/25)
@@ -17,19 +34,76 @@ CO_OP_TRANSLATOR_METADATA:
 
 یاد ہے وہ براؤزر ایکسٹینشن جو آپ نے بنانا شروع کیا تھا؟ ابھی آپ کے پاس ایک خوبصورت فارم ہے، لیکن یہ بنیادی طور پر جامد ہے۔ آج ہم اسے حقیقی ڈیٹا سے جوڑ کر اور اسے یادداشت دے کر زندہ کریں گے۔
 
-اپولو مشن کنٹرول کمپیوٹرز کے بارے میں سوچیں - وہ صرف مقررہ معلومات ظاہر نہیں کرتے تھے۔ وہ مسلسل خلائی جہاز کے ساتھ بات چیت کرتے تھے، ٹیلی میٹری ڈیٹا کے ساتھ اپ ڈیٹ ہوتے تھے، اور اہم مشن پیرامیٹرز کو یاد رکھتے تھے۔ یہی قسم کا متحرک رویہ ہم آج بنا رہے ہیں۔ آپ کا ایکسٹینشن انٹرنیٹ سے رابطہ کرے گا، حقیقی ماحولیاتی ڈیٹا حاصل کرے گا، اور اگلی بار کے لیے آپ کی سیٹنگز کو یاد رکھے گا۔
-
-API انٹیگریشن پیچیدہ لگ سکتی ہے، لیکن یہ صرف آپ کے کوڈ کو دوسرے سروسز کے ساتھ بات چیت کرنا سکھانے کی بات ہے۔ چاہے آپ موسم کا ڈیٹا حاصل کر رہے ہوں، سوشل میڈیا فیڈز، یا کاربن فوٹ پرنٹ کی معلومات جیسا کہ ہم آج کریں گے، یہ سب ڈیجیٹل کنکشنز قائم کرنے کے بارے میں ہے۔ ہم یہ بھی دیکھیں گے کہ براؤزرز معلومات کو کیسے برقرار رکھ سکتے ہیں - بالکل اسی طرح جیسے لائبریریاں کتابوں کی جگہ کو یاد رکھنے کے لیے کارڈ کیٹلاگ استعمال کرتی ہیں۔
-
-اس سبق کے اختتام تک، آپ کے پاس ایک براؤزر ایکسٹینشن ہوگا جو حقیقی ڈیٹا حاصل کرتا ہے، صارف کی ترجیحات کو محفوظ کرتا ہے، اور ایک ہموار تجربہ فراہم کرتا ہے۔ آئیے شروع کریں!
+اپولو مشن کنٹرول کمپیوٹرز کے بارے میں سوچیں - وہ صرف مقررہ معلومات ظاہر نہیں کرتے تھے۔ وہ مسلسل خلائی جہاز کے ساتھ بات چیت کرتے تھے، ٹیلی میٹری ڈیٹا کے ساتھ اپ ڈیٹ ہوتے تھے، اور اہم مشن پیرامیٹرز کو یاد رکھتے تھے۔ آج ہم اسی قسم کا متحرک رویہ بنا رہے ہیں۔ آپ کا ایکسٹینشن انٹرنیٹ تک پہنچے گا، حقیقی ماحولیاتی ڈیٹا حاصل کرے گا، اور اگلی بار کے لیے آپ کی سیٹنگز کو یاد رکھے گا۔
+
+API انٹیگریشن پیچیدہ لگ سکتی ہے، لیکن یہ واقعی آپ کے کوڈ کو دوسرے سروسز کے ساتھ بات چیت کرنا سکھانے کے بارے میں ہے۔ چاہے آپ موسم کا ڈیٹا حاصل کر رہے ہوں، سوشل میڈیا فیڈز، یا کاربن فوٹ پرنٹ کی معلومات جیسا کہ ہم آج کریں گے، یہ سب ڈیجیٹل کنکشن قائم کرنے کے بارے میں ہے۔ ہم یہ بھی دیکھیں گے کہ براؤزرز معلومات کو کیسے برقرار رکھ سکتے ہیں - جیسے کہ لائبریریوں نے کارڈ کیٹلاگ استعمال کیے ہیں تاکہ کتابوں کی جگہ کو یاد رکھا جا سکے۔
+
+اس سبق کے اختتام تک، آپ کے پاس ایک براؤزر ایکسٹینشن ہوگا جو حقیقی ڈیٹا حاصل کرے گا، صارف کی ترجیحات کو محفوظ کرے گا، اور ایک ہموار تجربہ فراہم کرے گا۔ آئیے شروع کریں!
+
+```mermaid
+mindmap
+  root((Dynamic Extensions))
+    DOM Manipulation
+      Element Selection
+      Event Handling
+      State Management
+      UI Updates
+    Local Storage
+      Data Persistence
+      Key-Value Pairs
+      Session Management
+      User Preferences
+    API Integration
+      HTTP Requests
+      Authentication
+      Data Parsing
+      Error Handling
+    Async Programming
+      Promises
+      Async/Await
+      Error Catching
+      Non-blocking Code
+    User Experience
+      Loading States
+      Error Messages
+      Smooth Transitions
+      Data Validation
+```
 
-✅ مناسب فائلوں میں نمبر شدہ حصوں کی پیروی کریں تاکہ آپ کوڈ کہاں رکھنا ہے یہ جان سکیں۔
+✅ مناسب فائلوں میں نمبر شدہ حصوں کی پیروی کریں تاکہ معلوم ہو کہ آپ کا کوڈ کہاں رکھنا ہے
 
 ## ایکسٹینشن میں عناصر کو ترتیب دیں
 
-آپ کے جاوا اسکرپٹ کو انٹرفیس میں تبدیلی کرنے سے پہلے، اسے مخصوص HTML عناصر کے حوالہ جات کی ضرورت ہوتی ہے۔ اسے ایسے سمجھیں جیسے دوربین کو مخصوص ستاروں کی طرف اشارہ کرنے کی ضرورت ہوتی ہے - گلیلیو کو مشتری کے چاندوں کا مطالعہ کرنے سے پہلے، اسے مشتری کو تلاش کرنا اور فوکس کرنا پڑا۔
-
-آپ کی `index.js` فائل میں، ہم `const` ویریبلز بنائیں گے جو ہر اہم فارم عنصر کے حوالہ جات کو پکڑیں گے۔ یہ بالکل ویسے ہی ہے جیسے سائنسدان اپنے آلات کو لیبل کرتے ہیں - ہر بار پورے لیبارٹری میں تلاش کرنے کے بجائے، وہ براہ راست اس تک رسائی حاصل کر سکتے ہیں جس کی انہیں ضرورت ہے۔
+آپ کا جاوا اسکرپٹ انٹرفیس کو جوڑنے سے پہلے، اسے مخصوص HTML عناصر کے حوالہ جات کی ضرورت ہوتی ہے۔ اسے ایسے سمجھیں جیسے دوربین کو مخصوص ستاروں کی طرف اشارہ کرنے کی ضرورت ہو - گلیلیو کو مشتری کے چاندوں کا مطالعہ کرنے سے پہلے، اسے مشتری کو تلاش کرنا اور اس پر توجہ مرکوز کرنا پڑی۔
+
+آپ کی `index.js` فائل میں، ہم `const` متغیرات بنائیں گے جو ہر اہم فارم عنصر کے حوالہ جات کو پکڑیں گے۔ یہ اس طرح ہے جیسے سائنسدان اپنے آلات کو لیبل کرتے ہیں - ہر بار پورے لیبارٹری میں تلاش کرنے کے بجائے، وہ براہ راست اس تک رسائی حاصل کر سکتے ہیں جس کی انہیں ضرورت ہے۔
+
+```mermaid
+flowchart LR
+    A[JavaScript Code] --> B[document.querySelector]
+    B --> C[CSS Selectors]
+    C --> D[HTML Elements]
+    
+    D --> E[".form-data"]
+    D --> F[".region-name"]
+    D --> G[".api-key"]
+    D --> H[".loading"]
+    D --> I[".errors"]
+    D --> J[".result-container"]
+    
+    E --> K[Form Element]
+    F --> L[Input Field]
+    G --> M[Input Field]
+    H --> N[UI Element]
+    I --> O[UI Element]
+    J --> P[UI Element]
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style K fill:#fff3e0
+    style L fill:#fff3e0
+    style M fill:#fff3e0
+```
 
 ```javascript
 // form fields
@@ -52,12 +126,35 @@ const clearBtn = document.querySelector('.clear-btn');
 - **بناتا ہے** ان پٹ فیلڈز کے حوالہ جات علاقے کے نام اور API کلید کے لیے
 - **قائم کرتا ہے** کاربن استعمال کے ڈیٹا کے نتائج دکھانے والے عناصر کے ساتھ کنکشن
 - **ترتیب دیتا ہے** UI عناصر تک رسائی جیسے لوڈنگ انڈیکیٹرز اور ایرر میسیجز
-- **محفوظ کرتا ہے** ہر عنصر کا حوالہ `const` ویریبل میں تاکہ آپ کے کوڈ میں آسانی سے دوبارہ استعمال ہو سکے
+- **محفوظ کرتا ہے** ہر عنصر کا حوالہ `const` متغیر میں تاکہ آپ کے کوڈ میں آسانی سے دوبارہ استعمال ہو سکے
 
 ## ایونٹ لسٹنرز شامل کریں
 
 اب ہم آپ کے ایکسٹینشن کو صارف کے اعمال کا جواب دینے کے قابل بنائیں گے۔ ایونٹ لسٹنرز آپ کے کوڈ کا صارف کے تعاملات کی نگرانی کرنے کا طریقہ ہیں۔ انہیں ابتدائی ٹیلیفون ایکسچینجز کے آپریٹرز کی طرح سمجھیں - وہ آنے والی کالز کے لیے سنتے تھے اور جب کوئی کنکشن بنانا چاہتا تھا تو صحیح سرکٹس کو جوڑتے تھے۔
 
+```mermaid
+sequenceDiagram
+    participant User
+    participant Form
+    participant JavaScript
+    participant API
+    participant Storage
+    
+    User->>Form: Fills out region/API key
+    User->>Form: Clicks submit
+    Form->>JavaScript: Triggers submit event
+    JavaScript->>JavaScript: handleSubmit(e)
+    JavaScript->>Storage: Save user preferences
+    JavaScript->>API: Fetch carbon data
+    API->>JavaScript: Returns data
+    JavaScript->>Form: Update UI with results
+    
+    User->>Form: Clicks clear button
+    Form->>JavaScript: Triggers click event
+    JavaScript->>Storage: Clear saved data
+    JavaScript->>Form: Reset to initial state
+```
+
 ```javascript
 form.addEventListener('submit', (e) => handleSubmit(e));
 clearBtn.addEventListener('click', (e) => reset(e));
@@ -66,17 +163,27 @@ init();
 
 **ان تصورات کو سمجھنا:**
 - **جوڑتا ہے** ایک سبمٹ لسٹنر کو فارم کے ساتھ جو اس وقت متحرک ہوتا ہے جب صارفین انٹر دبائیں یا سبمٹ پر کلک کریں
-- **جوڑتا ہے** ایک کلک لسٹنر کو کلئیر بٹن کے ساتھ فارم کو ری سیٹ کرنے کے لیے
+- **جوڑتا ہے** ایک کلک لسٹنر کو کلیر بٹن کے ساتھ فارم کو ری سیٹ کرنے کے لیے
 - **پاس کرتا ہے** ایونٹ آبجیکٹ `(e)` کو ہینڈلر فنکشنز کے لیے اضافی کنٹرول کے لیے
 - **کال کرتا ہے** `init()` فنکشن کو فوری طور پر تاکہ آپ کے ایکسٹینشن کی ابتدائی حالت ترتیب دی جا سکے
 
-✅ یہاں استعمال ہونے والے شارٹ ہینڈ ایرو فنکشن سینٹیکس پر غور کریں۔ یہ جدید جاوا اسکرپٹ طریقہ روایتی فنکشن ایکسپریشنز سے زیادہ صاف ہے، لیکن دونوں برابر کام کرتے ہیں!
+✅ یہاں استعمال ہونے والے شارٹ ہینڈ ایرو فنکشن سینٹیکس پر غور کریں۔ یہ جدید جاوا اسکرپٹ طریقہ روایتی فنکشن ایکسپریشنز سے زیادہ صاف ہے، لیکن دونوں یکساں طور پر کام کرتے ہیں!
+
+### 🔄 **تعلیمی جائزہ**
+**ایونٹ ہینڈلنگ کی سمجھ**: ابتدائیہ کی طرف جانے سے پہلے، یقینی بنائیں کہ آپ:
+- ✅ وضاحت کر سکتے ہیں کہ `addEventListener` صارف کے اعمال کو جاوا اسکرپٹ فنکشنز سے کیسے جوڑتا ہے
+- ✅ سمجھتے ہیں کہ ہم ایونٹ آبجیکٹ `(e)` کو ہینڈلر فنکشنز کو کیوں پاس کرتے ہیں
+- ✅ `submit` اور `click` ایونٹس کے درمیان فرق کو پہچانتے ہیں
+- ✅ بیان کر سکتے ہیں کہ `init()` فنکشن کب چلتا ہے اور کیوں
+
+**خود کا فوری ٹیسٹ**: اگر آپ فارم سبمیشن میں `e.preventDefault()` کو بھول جائیں تو کیا ہوگا؟
+*جواب: صفحہ دوبارہ لوڈ ہو جائے گا، تمام جاوا اسکرپٹ اسٹیٹ کھو جائے گی اور صارف کے تجربے میں خلل پڑے گا*
 
-## انیشیلائزیشن اور ری سیٹ فنکشنز بنائیں
+## ابتدائیہ اور ری سیٹ فنکشنز بنائیں
 
-آئیے آپ کے ایکسٹینشن کے لیے انیشیلائزیشن لاجک بنائیں۔ `init()` فنکشن ایک جہاز کے نیویگیشن سسٹم کی طرح ہے جو اپنے آلات کو چیک کرتا ہے - یہ موجودہ حالت کا تعین کرتا ہے اور انٹرفیس کو اسی کے مطابق ایڈجسٹ کرتا ہے۔ یہ چیک کرتا ہے کہ آیا کسی نے آپ کے ایکسٹینشن کو پہلے استعمال کیا ہے اور ان کی پچھلی سیٹنگز کو لوڈ کرتا ہے۔
+آئیے آپ کے ایکسٹینشن کے لیے ابتدائی منطق بنائیں۔ `init()` فنکشن ایک جہاز کے نیویگیشن سسٹم کی طرح ہے جو اپنے آلات کو چیک کرتا ہے - یہ موجودہ حالت کا تعین کرتا ہے اور انٹرفیس کو اسی کے مطابق ایڈجسٹ کرتا ہے۔ یہ چیک کرتا ہے کہ آیا کسی نے پہلے آپ کے ایکسٹینشن کا استعمال کیا ہے اور ان کی پچھلی سیٹنگز کو لوڈ کرتا ہے۔
 
-`reset()` فنکشن صارفین کو ایک نیا آغاز فراہم کرتا ہے - بالکل ویسے جیسے سائنسدان اپنے آلات کو تجربات کے درمیان ری سیٹ کرتے ہیں تاکہ صاف ڈیٹا یقینی بنایا جا سکے۔
+`reset()` فنکشن صارفین کو ایک نئی شروعات فراہم کرتا ہے - جیسے کہ سائنسدان اپنے آلات کو تجربات کے درمیان ری سیٹ کرتے ہیں تاکہ صاف ڈیٹا کو یقینی بنایا جا سکے۔
 
 ```javascript
 function init() {
@@ -112,7 +219,7 @@ function reset(e) {
 }
 ```
 
-**یہاں کیا ہوتا ہے اس کا تجزیہ:**
+**یہاں کیا ہوتا ہے:**
 - **حاصل کرتا ہے** محفوظ شدہ API کلید اور علاقے کو براؤزر کے لوکل اسٹوریج سے
 - **چیک کرتا ہے** کہ آیا یہ پہلی بار استعمال کرنے والا ہے (کوئی محفوظ شدہ اسناد نہیں) یا واپس آنے والا صارف
 - **دکھاتا ہے** سیٹ اپ فارم نئے صارفین کے لیے اور دیگر انٹرفیس عناصر کو چھپاتا ہے
@@ -121,21 +228,45 @@ function reset(e) {
 
 **لوکل اسٹوریج کے بارے میں اہم تصورات:**
 - **برقرار رکھتا ہے** ڈیٹا براؤزر سیشنز کے درمیان (سیشن اسٹوریج کے برعکس)
-- **محفوظ کرتا ہے** ڈیٹا کو کلید-ویلیو جوڑوں کے طور پر `getItem()` اور `setItem()` استعمال کرتے ہوئے
+- **محفوظ کرتا ہے** ڈیٹا کو کلیدی-قدر کے جوڑوں کے طور پر `getItem()` اور `setItem()` استعمال کرتے ہوئے
 - **واپس کرتا ہے** `null` جب کسی دی گئی کلید کے لیے کوئی ڈیٹا موجود نہ ہو
 - **فراہم کرتا ہے** صارف کی ترجیحات اور سیٹنگز کو یاد رکھنے کا ایک آسان طریقہ
 
-> 💡 **براؤزر اسٹوریج کو سمجھنا**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) آپ کے ایکسٹینشن کو مستقل یادداشت دینے جیسا ہے۔ غور کریں کہ قدیم لائبریری آف اسکندریہ نے طوماروں کو کیسے محفوظ کیا - معلومات دستیاب رہتی تھیں چاہے اسکالرز چھوڑ کر واپس آتے۔
-
+> 💡 **براؤزر اسٹوریج کو سمجھنا**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) آپ کے ایکسٹینشن کو مستقل یادداشت دینے جیسا ہے۔ غور کریں کہ قدیم لائبریری آف اسکندریہ نے طوماروں کو کیسے محفوظ کیا - معلومات دستیاب رہتی تھیں یہاں تک کہ جب اسکالرز جاتے اور واپس آتے۔
+>
 > **اہم خصوصیات:**
 > - **برقرار رکھتا ہے** ڈیٹا یہاں تک کہ آپ اپنا براؤزر بند کر دیں
-> - **زندہ رہتا ہے** کمپیوٹر ری اسٹارٹس اور براؤزر کریشز کے بعد بھی
+> - **بچاتا ہے** کمپیوٹر ری اسٹارٹس اور براؤزر کریشز کے دوران
 > - **فراہم کرتا ہے** صارف کی ترجیحات کے لیے کافی اسٹوریج اسپیس
-> - **فوری رسائی فراہم کرتا ہے** بغیر نیٹ ورک کی تاخیر کے
-
-> **اہم نوٹ**: آپ کے براؤزر ایکسٹینشن کا اپنا الگ تھلگ لوکل اسٹوریج ہے جو عام ویب صفحات سے الگ ہے۔ یہ سیکیورٹی فراہم کرتا ہے اور دیگر ویب سائٹس کے ساتھ تنازعات کو روکتا ہے۔
-
-آپ اپنے محفوظ شدہ ڈیٹا کو براؤزر ڈیولپر ٹولز (F12) کھول کر، **Application** ٹیب پر جا کر، اور **Local Storage** سیکشن کو بڑھا کر دیکھ سکتے ہیں۔
+> - **فوری رسائی دیتا ہے** بغیر نیٹ ورک کی تاخیر کے
+
+> **اہم نوٹ**: آپ کے براؤزر ایکسٹینشن کا اپنا الگ لوکل اسٹوریج ہے جو عام ویب صفحات سے الگ ہے۔ یہ سیکیورٹی فراہم کرتا ہے اور دیگر ویب سائٹس کے ساتھ تنازعات کو روکتا ہے۔
+
+آپ اپنے محفوظ شدہ ڈیٹا کو براؤزر ڈیولپر ٹولز (F12) کھول کر، **ایپلیکیشن** ٹیب پر جا کر، اور **لوکل اسٹوریج** سیکشن کو بڑھا کر دیکھ سکتے ہیں۔
+
+```mermaid
+stateDiagram-v2
+    [*] --> CheckStorage: Extension starts
+    CheckStorage --> FirstTime: No stored data
+    CheckStorage --> Returning: Data found
+    
+    FirstTime --> ShowForm: Display setup form
+    ShowForm --> UserInput: User enters data
+    UserInput --> SaveData: Store in localStorage
+    SaveData --> FetchAPI: Get carbon data
+    
+    Returning --> LoadData: Read from localStorage
+    LoadData --> FetchAPI: Get carbon data
+    
+    FetchAPI --> ShowResults: Display data
+    ShowResults --> UserAction: User interacts
+    
+    UserAction --> Reset: Clear button clicked
+    UserAction --> ShowResults: View data
+    
+    Reset --> ClearStorage: Remove saved data
+    ClearStorage --> FirstTime: Back to setup
+```
 
 ![لوکل اسٹوریج پین](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ur.png)
 
@@ -143,11 +274,11 @@ function reset(e) {
 
 ## فارم سبمیشن کو ہینڈل کریں
 
-اب ہم اس بات کو ہینڈل کریں گے کہ جب کوئی آپ کا فارم سبمٹ کرے تو کیا ہوتا ہے۔ ڈیفالٹ کے طور پر، براؤزرز فارم سبمٹ ہونے پر صفحہ کو ری لوڈ کرتے ہیں، لیکن ہم اس رویے کو روکیں گے تاکہ ایک ہموار تجربہ بنایا جا سکے۔
+اب ہم اس بات کو ہینڈل کریں گے کہ جب کوئی آپ کا فارم سبمٹ کرے تو کیا ہوتا ہے۔ ڈیفالٹ کے طور پر، براؤزرز فارم سبمٹ ہونے پر صفحہ کو دوبارہ لوڈ کرتے ہیں، لیکن ہم اس رویے کو روکیں گے تاکہ ایک ہموار تجربہ بنایا جا سکے۔
 
-یہ طریقہ بالکل ویسے ہی ہے جیسے مشن کنٹرول خلائی جہاز کے مواصلات کو ہینڈل کرتا ہے - ہر ٹرانسمیشن کے لیے پورے سسٹم کو ری سیٹ کرنے کے بجائے، وہ مسلسل آپریشن برقرار رکھتے ہیں جبکہ نئی معلومات کو پروسیس کرتے ہیں۔
+یہ طریقہ اس طرح ہے جیسے مشن کنٹرول خلائی جہاز کے مواصلات کو ہینڈل کرتا ہے - ہر ٹرانسمیشن کے لیے پورے سسٹم کو ری سیٹ کرنے کے بجائے، وہ مسلسل آپریشن کو برقرار رکھتے ہیں جبکہ نئی معلومات کو پروسیس کرتے ہیں۔
 
-ایک فنکشن بنائیں جو فارم سبمیشن ایونٹ کو کیپچر کرے اور صارف کے ان پٹ کو نکالے:
+ایک فنکشن بنائیں جو فارم سبمیشن ایونٹ کو پکڑتا ہے اور صارف کے ان پٹ کو نکالتا ہے:
 
 ```javascript
 function handleSubmit(e) {
@@ -157,12 +288,12 @@ function handleSubmit(e) {
 ```
 
 **اوپر، ہم نے:**
-- **روکتا ہے** ڈیفالٹ فارم سبمیشن رویے کو جو صفحہ کو ریفریش کرے گا
-- **نکالتا ہے** صارف کے انپٹ ویلیوز کو API کلید اور علاقے کے فیلڈز سے
+- **روکتا ہے** ڈیفالٹ فارم سبمیشن رویے جو صفحہ کو ریفریش کرے گا
+- **نکالتا ہے** صارف کے انپٹ ویلیوز API کلید اور علاقے کے فیلڈز سے
 - **پاس کرتا ہے** فارم ڈیٹا کو `setUpUser()` فنکشن کے لیے پروسیسنگ کے لیے
 - **برقرار رکھتا ہے** سنگل پیج ایپلیکیشن رویہ صفحہ ری لوڈز سے بچ کر
 
-✅ یاد رکھیں کہ آپ کے HTML فارم فیلڈز میں `required` ایٹریبیوٹ شامل ہے، لہذا براؤزر خود بخود تصدیق کرتا ہے کہ صارفین اس فنکشن کے چلنے سے پہلے API کلید اور علاقے دونوں فراہم کریں۔
+✅ یاد رکھیں کہ آپ کے HTML فارم فیلڈز میں `required` ایٹریبیوٹ شامل ہے، لہذا براؤزر خود بخود اس بات کی تصدیق کرتا ہے کہ صارفین اس فنکشن کے چلنے سے پہلے API کلید اور علاقے دونوں فراہم کریں۔
 
 ## صارف کی ترجیحات ترتیب دیں
 
@@ -188,29 +319,59 @@ function setUpUser(apiKey, regionName) {
 - **محفوظ کرتا ہے** API کلید اور علاقے کا نام لوکل اسٹوریج میں مستقبل کے استعمال کے لیے
 - **دکھاتا ہے** ایک لوڈنگ انڈیکیٹر تاکہ صارفین کو مطلع کیا جا سکے کہ ڈیٹا حاصل کیا جا رہا ہے
 - **صاف کرتا ہے** کسی بھی پچھلے ایرر میسیجز کو ڈسپلے سے
-- **ظاہر کرتا ہے** کلئیر بٹن صارفین کے لیے تاکہ وہ اپنی سیٹنگز کو بعد میں ری سیٹ کر سکیں
+- **ظاہر کرتا ہے** کلیر بٹن صارفین کے لیے تاکہ وہ بعد میں اپنی سیٹنگز ری سیٹ کر سکیں
 - **شروع کرتا ہے** API کال حقیقی کاربن استعمال کے ڈیٹا کو حاصل کرنے کے لیے
 
-یہ فنکشن ایک ہموار صارف تجربہ پیدا کرتا ہے جو ڈیٹا کی مستقل مزاجی اور صارف انٹرفیس اپڈیٹس دونوں کو ایک مربوط عمل میں منظم کرتا ہے۔
+یہ فنکشن ایک ہموار صارف تجربہ پیدا کرتا ہے جو ڈیٹا کی مستقل مزاجی اور صارف انٹرفیس اپ ڈیٹس دونوں کو ایک مربوط عمل میں منظم کرتا ہے۔
 
 ## کاربن استعمال کے ڈیٹا کو دکھائیں
 
-اب ہم آپ کے ایکسٹینشن کو APIs کے ذریعے بیرونی ڈیٹا ذرائع سے جوڑیں گے۔ یہ آپ کے ایکسٹینشن کو ایک اسٹینڈ الون ٹول سے کچھ ایسا بناتا ہے جو انٹرنیٹ بھر سے حقیقی وقت کی معلومات تک رسائی حاصل کر سکتا ہے۔
+اب ہم آپ کے ایکسٹینشن کو APIs کے ذریعے بیرونی ڈیٹا سورسز سے جوڑیں گے۔ یہ آپ کے ایکسٹینشن کو ایک اسٹینڈ الون ٹول سے کچھ ایسا بناتا ہے جو انٹرنیٹ سے حقیقی وقت کی معلومات تک رسائی حاصل کر سکتا ہے۔
 
 **APIs کو سمجھنا**
 
-[APIs](https://www.webopedia.com/TERM/A/API.html) مختلف ایپلیکیشنز کے ایک دوسرے کے ساتھ بات کرنے کا طریقہ ہیں۔ انہیں 19ویں صدی میں دور دراز شہروں کو جوڑنے والے ٹیلی گراف سسٹم کی طرح سمجھیں - آپریٹرز دور دراز اسٹیشنز کو درخواستیں بھیجتے تھے اور مطلوبہ معلومات کے ساتھ جوابات وصول کرتے تھے۔ جب بھی آپ سوشل میڈیا چیک کرتے ہیں، وائس اسسٹنٹ سے سوال پوچھتے ہیں، یا ڈیلیوری ایپ استعمال کرتے ہیں، APIs ان ڈیٹا ایکسچینجز کو آسان بنا رہے ہیں۔
+[APIs](https://www.webopedia.com/TERM/A/API.html) مختلف ایپلیکیشنز کو ایک دوسرے کے ساتھ بات چیت کرنے کا طریقہ ہیں۔ انہیں 19ویں صدی میں دور دراز شہروں کو جوڑنے والے ٹیلی گراف سسٹم کی طرح سمجھیں - آپریٹرز دور دراز اسٹیشنز کو درخواستیں بھیجتے تھے اور مطلوبہ معلومات کے ساتھ جوابات وصول کرتے تھے۔ جب بھی آپ سوشل میڈیا چیک کرتے ہیں، وائس اسسٹنٹ سے سوال پوچھتے ہیں، یا ڈیلیوری ایپ استعمال کرتے ہیں، APIs ان ڈیٹا ایکسچینجز کو سہولت فراہم کر رہے ہیں۔
+
+```mermaid
+flowchart TD
+    A[Your Extension] --> B[HTTP Request]
+    B --> C[CO2 Signal API]
+    C --> D{Valid Request?}
+    D -->|Yes| E[Query Database]
+    D -->|No| F[Return Error]
+    E --> G[Carbon Data]
+    G --> H[JSON Response]
+    H --> I[Your Extension]
+    F --> I
+    I --> J[Update UI]
+    
+    subgraph "API Request"
+        K[Headers: auth-token]
+        L[Parameters: countryCode]
+        M[Method: GET]
+    end
+    
+    subgraph "API Response"
+        N[Carbon Intensity]
+        O[Fossil Fuel %]
+        P[Timestamp]
+    end
+    
+    style C fill:#e8f5e8
+    style G fill:#fff3e0
+    style I fill:#e1f5fe
+```
 
 **REST APIs کے بارے میں اہم تصورات:**
-- **REST** کا مطلب ہے 'Representational State Transfer'
+- **REST** کا مطلب ہے 'ریپریزنٹیشنل اسٹیٹ ٹرانسفر'
 - **استعمال کرتا ہے** معیاری HTTP طریقے (GET, POST, PUT, DELETE) ڈیٹا کے ساتھ تعامل کے لیے
-- **واپس کرتا ہے** ڈیٹا کو پیش گوئی کے قابل فارمیٹس میں، عام طور پر JSON
-- **فراہم کرتا ہے** مختلف قسم کی درخواستوں کے لیے مستقل، URL پر مبنی اینڈپوائنٹس
+- **واپس کرتا ہے** ڈیٹا کو متوقع فارمیٹس میں، عام طور پر JSON
+- **فراہم کرتا ہے** مختلف قسم کی درخواستوں کے لیے مستقل، URL پر مبنی اینڈ پوائنٹس
 
-✅ [CO2 Signal API](https://www.co2signal.com/) جسے ہم استعمال کریں گے، دنیا بھر کے الیکٹریکل گرڈز سے حقیقی وقت کے کاربن شدت کے ڈیٹا فراہم کرتا ہے۔ یہ صارفین کو ان کی بجلی کے استعمال کے ماحولیاتی اثرات کو سمجھنے میں مدد کرتا ہے!
-
-> 💡 **غیر متزامن جاوا اسکرپٹ کو سمجھنا**: [`async` کلیدی لفظ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) آپ کے کوڈ کو بیک وقت متعدد آپریشنز کو ہینڈل کرنے کے قابل بناتا ہے۔ جب آپ سرور سے ڈیٹا کی درخواست کرتے ہیں، تو آپ نہیں چاہتے کہ آپ کا پورا ایکسٹینشن منجمد ہو جائے - یہ بالکل ویسے ہوگا جیسے ایئر ٹریفک کنٹرول ایک ہوائی جہاز کے جواب کا انتظار کرتے ہوئے تمام آپریشنز کو روک دے۔
+✅ [CO2 Signal API](https://www.co2signal.com/) جو ہم استعمال کریں گے، دنیا بھر کے الیکٹریکل گرڈز سے حقیقی وقت کے کاربن شدت کے ڈیٹا فراہم کرتا ہے۔ یہ صارفین کو ان کی بجلی کے استعمال کے ماحولیاتی اثرات کو سمجھنے میں مدد دیتا ہے!
 
+> 💡 **غیر متزامن جاوا اسکرپٹ کو سمجھنا**: [`async` کلیدی لفظ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) آپ کے کوڈ کو بیک وقت متعدد آپریشنز کو ہینڈل کرنے کے قابل بناتا ہے۔ جب آپ سرور سے ڈیٹا کی درخواست کرتے ہیں، تو آپ نہیں چاہتے کہ آپ کا پورا ایکسٹینشن منجمد ہو جائے - یہ ایسا ہوگا جیسے ہوائی ٹریفک کنٹرول ایک ہوائی جہاز کے جواب کا انتظار کرتے ہوئے تمام آپریشنز کو روک دے۔
+>
 > **اہم فوائد:**
 > - **برقرار رکھتا ہے** ایکسٹینشن کی جواب دہی جبکہ ڈیٹا لوڈ ہو رہا ہو
 > - **اجازت دیتا ہے** دوسرے کوڈ کو نیٹ ورک کی درخواستوں کے دوران چلتے رہنے کی
@@ -223,6 +384,33 @@ function setUpUser(apiKey, regionName) {
 
 > 🎥 اوپر دی گئی تصویر پر کلک کریں `async/await` کے بارے میں ویڈیو کے لیے۔
 
+### 🔄 **تعلیمی جائزہ**
+**غیر متزامن پروگرامنگ کی سمجھ**: API فنکشن میں جانے سے پہلے، تصدیق کریں کہ آپ سمجھتے ہیں:
+- ✅ ہم `async/await` کا استعمال کیوں کرتے ہیں بجائے پورے ایکسٹینشن کو منجمد کرنے کے
+- ✅ `try/catch` بلاکس نیٹ ورک ایررز کو شائستگی سے کیسے ہینڈل کرتے ہیں
+- ✅ متزامن اور غیر متزامن آپریشنز کے درمیان فرق
+- ✅ API کالز کیوں ناکام ہو سکتی ہیں اور ان ناکامیوں کو کیسے ہینڈل کیا جائے
+
+**حقیقی دنیا کا تعلق**: ان روزمرہ کے غیر متزامن مثالوں پر غور کریں:
+- **کھانے کا آرڈر دینا**: آپ باورچی خانے کے پاس انتظار نہیں کرتے - آپ رسید حاصل کرتے ہیں اور دیگر سرگرمیاں جاری رکھتے ہیں
+- **ای میل بھیجنا**: آپ کا ای میل ایپ بھیجتے وقت منجمد نہیں ہوتا - آپ مزید ای میلز لکھ سکتے ہیں
+- **ویب صفحات لوڈ کرنا**: تصاویر بتدریج لوڈ ہوتی ہیں جبکہ آپ پہلے ہی متن پڑھ سکتے ہیں
+
+**API تصدیقی بہاؤ**:
+```mermaid
+sequenceDiagram
+    participant Ext as Extension
+    participant API as CO2 Signal API
+    participant DB as Database
+    
+    Ext->>API: Request with auth-token
+    API->>API: Validate token
+    API->>DB: Query carbon data
+    DB->>API: Return data
+    API->>Ext: JSON response
+    Ext->>Ext: Update UI
+```
+
 کاربن استعمال کے ڈیٹا کو حاصل کرنے اور دکھانے کے لیے فنکشن بنائیں:
 
 ```javascript
@@ -274,38 +462,146 @@ async function displayCarbonUsage(apiKey, region) {
 }
 ```
 
-**یہاں کیا ہوتا ہے اس کا تجزیہ:**
-- **استعمال کرتا ہے** جدید `fetch()` API بجائے بیرونی لائبریریوں جیسے Axios کے، صاف، ڈیپینڈنسی فری کوڈ کے لیے
+**یہاں کیا ہوتا ہے:**
+- **استعمال کرتا ہے** جدید `fetch()` API بیرونی لائبریریوں جیسے Axios کے بجائے صاف، ڈیپینڈنسی فری کوڈ کے لیے
 - **نافذ کرتا ہے** مناسب ایرر چیکنگ `response.ok` کے ساتھ تاکہ API کی ناکامیوں کو جلدی پکڑا جا سکے
 - **ہینڈل کرتا ہے** غیر متزامن آپریشنز `async/await` کے ساتھ زیادہ پڑھنے کے قابل کوڈ فلو کے لیے
-- **تصدیق کرتا ہے** CO2 Signal API کے ساتھ `auth-token` ہیڈر استعمال کرتے ہوئے
-- **پارس کرتا ہے** JSON ریسپانس ڈیٹا اور کاربن شدت کی معلومات نکالتا ہے
-- **اپڈیٹ کرتا ہے** متعدد UI عناصر کو فارمیٹ شدہ ماحولیاتی ڈیٹا کے ساتھ
-- **فراہم کرتا ہے** صارف دوست ایرر میسیجز جب API کالز ناکام ہوں
-
-**جدید جاوا اسکرپٹ کے اہم تصورات کا مظاہرہ:**
-- **ٹیمپلیٹ لیٹرلز** `${}` سینٹیکس کے ساتھ صاف اسٹرنگ فارمیٹنگ کے لیے
-- **ایرر ہینڈلنگ** try/catch بلاکس کے ساتھ مضبوط ایپلیکیشنز کے لیے
-- **Async/await** پیٹرن نیٹ ورک کی درخواستوں کو شائستگی سے ہینڈل کرنے کے لیے
-- **آبجیکٹ ڈسٹرکچرنگ** API ریسپانسز سے مخصوص ڈیٹا نکالنے کے لیے
-- **میٹھوڈ چیننگ** متعدد DOM مینپولیشنز کے لیے
-
-✅ یہ فنکشن کئی اہم ویب ڈیولپمنٹ تصورات کا مظاہرہ کرتا ہے - بیرونی سرورز کے ساتھ بات چیت، تصدیق کو ہینڈل کرنا، ڈیٹا کو پروسیس کرنا، انٹرفیس کو اپڈیٹ کرنا، اور ایررز کو شائستگی سے منظم کرنا۔ یہ بنیادی مہارتیں ہیں جو پیشہ ور ڈیولپرز باقاعدگی سے استعمال کرتے ہیں۔
-
-🎉 **جو آپ نے حاصل کیا:** آپ نے ایک براؤزر ایکسٹینشن بنایا جو:
-- **کنیکٹ کرتا ہے** انٹرنیٹ سے اور حقیقی ماحولیاتی ڈیٹا حاصل کرتا ہے
-- **برقرار رکھتا ہے** صارف کی سیٹنگز سیشنز کے درمیان
-- **ایررز کو شائستگی سے ہینڈل کرتا ہے** بجائے کریش ہونے کے
-- **فراہم کرتا ہے** ایک ہموار، پیشہ ورانہ صارف تجربہ
-
-اپنے کام کو ٹیسٹ کرنے کے لیے `npm run build` چلائیں اور اپنے ایکسٹینشن کو براؤزر میں ریفریش کریں۔ اب آپ کے پاس ایک فعال کاربن فوٹ پرنٹ ٹریکر ہے۔ اگلے سبق میں ہم ایکسٹینشن کو مکمل کرنے کے لیے ڈائنامک آئیکن فنکشنلٹی شامل کریں گے۔
-
----
-
-## GitHub Copilot ایجنٹ چیلنج 🚀
+- **تصدیق کرتا ہے** CO2 Signal API کے ساتھ `auth-token` ہیڈر کا استعمال کرتے ہوئے
+- **پ
+**تفصیل:** براؤزر ایکسٹینشن کو بہتر بنائیں اور اس میں ایرر ہینڈلنگ اور صارف کے تجربے کی خصوصیات شامل کریں۔ یہ چیلنج آپ کو APIs، لوکل اسٹوریج، اور DOM مینپولیشن کے ساتھ جدید جاوا اسکرپٹ پیٹرنز پر کام کرنے کی مشق فراہم کرے گا۔
+
+**پرومپٹ:** displayCarbonUsage فنکشن کا ایک بہتر ورژن بنائیں جس میں شامل ہو: 1) API کالز کے ناکام ہونے پر دوبارہ کوشش کرنے کا میکانزم، جس میں ایکسپونینشل بیک آف شامل ہو، 2) API کال سے پہلے ریجن کوڈ کی ان پٹ ویلیڈیشن، 3) لوڈنگ اینیمیشن کے ساتھ پروگریس انڈیکیٹرز، 4) API کے جوابات کو لوکل اسٹوریج میں 30 منٹ کے لیے کیش کرنا، اور 5) پچھلی API کالز سے تاریخی ڈیٹا دکھانے کی خصوصیت۔ تمام فنکشن پیرامیٹرز اور ریٹرن ٹائپس کو دستاویز کرنے کے لیے مناسب TypeScript-style JSDoc کمنٹس بھی شامل کریں۔
+
+[ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
+
+## 🚀 چیلنج
+
+APIs کو بہتر طور پر سمجھنے کے لیے براؤزر پر مبنی APIs کی دولت کو دریافت کریں جو ویب ڈیولپمنٹ کے لیے دستیاب ہیں۔ ان براؤزر APIs میں سے ایک کو منتخب کریں اور ایک چھوٹا مظاہرہ بنائیں:
+
+- [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - صارف کا موجودہ مقام حاصل کریں
+- [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - ڈیسک ٹاپ نوٹیفیکیشن بھیجیں
+- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - انٹرایکٹو ڈریگ انٹرفیس بنائیں
+- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - لوکل اسٹوریج کی جدید تکنیکیں
+- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - XMLHttpRequest کا جدید متبادل
+
+**تحقیقی سوالات پر غور کریں:**
+- یہ API حقیقی دنیا کے مسائل کو کیسے حل کرتی ہے؟
+- یہ API ایررز اور ایج کیسز کو کیسے ہینڈل کرتی ہے؟
+- اس API کو استعمال کرتے وقت کون سے سیکیورٹی پہلو موجود ہیں؟
+- مختلف براؤزرز میں اس API کی سپورٹ کتنی وسیع ہے؟
+
+اپنی تحقیق کے بعد، ان خصوصیات کی نشاندہی کریں جو ایک API کو ڈیولپر کے لیے دوستانہ اور قابل اعتماد بناتی ہیں۔
+
+## لیکچر کے بعد کا کوئز
+
+[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/26)
+
+## جائزہ اور خود مطالعہ
+
+آپ نے اس سبق میں LocalStorage اور APIs کے بارے میں سیکھا، جو پیشہ ور ویب ڈیولپر کے لیے بہت مفید ہیں۔ کیا آپ سوچ سکتے ہیں کہ یہ دونوں چیزیں ایک ساتھ کیسے کام کرتی ہیں؟ تصور کریں کہ آپ ایک ویب سائٹ کو کیسے ڈیزائن کریں گے جو API کے ذریعے استعمال ہونے والی اشیاء کو اسٹور کرے۔
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] DevTools کے Application ٹیب کو کھولیں اور کسی بھی ویب سائٹ پر لوکل اسٹوریج کو دریافت کریں
+- [ ] ایک سادہ HTML فارم بنائیں اور براؤزر میں فارم ویلیڈیشن کی جانچ کریں
+- [ ] براؤزر کنسول میں لوکل اسٹوریج کا استعمال کرتے ہوئے ڈیٹا اسٹور اور ریٹریو کریں
+- [ ] نیٹ ورک ٹیب کا استعمال کرتے ہوئے فارم ڈیٹا کو جمع کرانے کا معائنہ کریں
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] لیکچر کے بعد کا کوئز مکمل کریں اور فارم ہینڈلنگ کے تصورات کو سمجھیں
+- [ ] ایک براؤزر ایکسٹینشن فارم بنائیں جو صارف کی ترجیحات کو محفوظ کرے
+- [ ] کلائنٹ سائیڈ فارم ویلیڈیشن کو مفید ایرر میسجز کے ساتھ نافذ کریں
+- [ ] ایکسٹینشن ڈیٹا کی مستقل مزاجی کے لیے chrome.storage API کا استعمال کریں
+- [ ] ایک صارف انٹرفیس بنائیں جو محفوظ کردہ صارف کی سیٹنگز پر ردعمل ظاہر کرے
+
+### 📅 **آپ کی ہفتہ بھر کی ایکسٹینشن بلڈنگ**
+- [ ] فارم کی فعالیت کے ساتھ مکمل فیچرڈ براؤزر ایکسٹینشن مکمل کریں
+- [ ] مختلف اسٹوریج آپشنز میں مہارت حاصل کریں: لوکل، سنک، اور سیشن اسٹوریج
+- [ ] فارم کی جدید خصوصیات جیسے آٹو کمپلیٹ اور ویلیڈیشن کو نافذ کریں
+- [ ] صارف کے ڈیٹا کے لیے امپورٹ/ایکسپورٹ کی فعالیت شامل کریں
+- [ ] مختلف براؤزرز میں اپنی ایکسٹینشن کو اچھی طرح سے جانچیں
+- [ ] اپنی ایکسٹینشن کے صارف کے تجربے اور ایرر ہینڈلنگ کو بہتر بنائیں
+
+### 🌟 **آپ کی مہینہ بھر کی ویب API مہارت**
+- [ ] مختلف براؤزر اسٹوریج APIs کا استعمال کرتے ہوئے پیچیدہ ایپلیکیشنز بنائیں
+- [ ] آف لائن فرسٹ ڈیولپمنٹ پیٹرنز کے بارے میں سیکھیں
+- [ ] ڈیٹا کی مستقل مزاجی سے متعلق اوپن سورس پروجیکٹس میں تعاون کریں
+- [ ] پرائیویسی پر مبنی ڈیولپمنٹ اور GDPR کمپلائنس میں مہارت حاصل کریں
+- [ ] فارم ہینڈلنگ اور ڈیٹا مینجمنٹ کے لیے دوبارہ استعمال کے قابل لائبریریاں بنائیں
+- [ ] ویب APIs اور ایکسٹینشن ڈیولپمنٹ کے بارے میں علم شیئر کریں
+
+## 🎯 آپ کی ایکسٹینشن ڈیولپمنٹ مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title API Integration & Storage Learning Progression
+    
+    section DOM Fundamentals (15 minutes)
+        Element References: querySelector mastery
+                          : Event listener setup
+                          : State management basics
+        
+    section Local Storage (20 minutes)
+        Data Persistence: Key-value storage
+                        : Session management
+                        : User preference handling
+                        : Storage inspection tools
+        
+    section Form Handling (25 minutes)
+        User Input: Form validation
+                  : Event prevention
+                  : Data extraction
+                  : UI state transitions
+        
+    section API Integration (35 minutes)
+        External Communication: HTTP requests
+                              : Authentication patterns
+                              : JSON data parsing
+                              : Response handling
+        
+    section Async Programming (40 minutes)
+        Modern JavaScript: Promise handling
+                         : Async/await patterns
+                         : Error management
+                         : Non-blocking operations
+        
+    section Error Handling (30 minutes)
+        Robust Applications: Try/catch blocks
+                           : User-friendly messages
+                           : Graceful degradation
+                           : Debugging techniques
+        
+    section Advanced Patterns (1 week)
+        Professional Development: Caching strategies
+                                : Rate limiting
+                                : Retry mechanisms
+                                : Performance optimization
+        
+    section Production Skills (1 month)
+        Enterprise Features: Security best practices
+                           : API versioning
+                           : Monitoring & logging
+                           : Scalable architecture
+```
 
-ای
-آپ نے اس سبق میں LocalStorage اور APIs کے بارے میں سیکھا، جو پیشہ ور ویب ڈویلپر کے لیے بہت مفید ہیں۔ کیا آپ سوچ سکتے ہیں کہ یہ دونوں چیزیں کیسے ایک ساتھ کام کرتی ہیں؟ تصور کریں کہ آپ ایک ویب سائٹ کیسے ڈیزائن کریں گے جو اشیاء کو محفوظ کرے تاکہ API کے ذریعے استعمال کی جا سکیں۔
+### 🛠️ آپ کے فل اسٹیک ڈیولپمنٹ ٹول کٹ کا خلاصہ
+
+اس سبق کو مکمل کرنے کے بعد، آپ کے پاس یہ مہارتیں ہیں:
+- **DOM مہارت**: عناصر کو درست طریقے سے ہدف بنانا اور ان میں تبدیلی کرنا
+- **اسٹوریج کی مہارت**: لوکل اسٹوریج کے ساتھ مستقل ڈیٹا مینجمنٹ
+- **API انٹیگریشن**: ریئل ٹائم ڈیٹا فیچنگ اور تصدیق
+- **ایسنک پروگرامنگ**: جدید جاوا اسکرپٹ کے ساتھ نان بلاکنگ آپریشنز
+- **ایرر ہینڈلنگ**: مضبوط ایپلیکیشنز جو ناکامیوں کو خوش اسلوبی سے ہینڈل کرتی ہیں
+- **صارف کا تجربہ**: لوڈنگ اسٹیٹس، ویلیڈیشن، اور ہموار انٹریکشنز
+- **جدید پیٹرنز**: fetch API، async/await، اور ES6+ خصوصیات
+
+**پیشہ ورانہ مہارتیں حاصل کیں:** آپ نے ان پیٹرنز کو نافذ کیا جو استعمال ہوتے ہیں:
+- **ویب ایپلیکیشنز**: سنگل پیج ایپس جو بیرونی ڈیٹا سورسز کے ساتھ کام کرتی ہیں
+- **موبائل ڈیولپمنٹ**: API پر مبنی ایپس جو آف لائن صلاحیتوں کے ساتھ ہیں
+- **ڈیسک ٹاپ سافٹ ویئر**: الیکٹران ایپس جو مستقل اسٹوریج کے ساتھ ہیں
+- **انٹرپرائز سسٹمز**: تصدیق، کیشنگ، اور ایرر ہینڈلنگ
+- **جدید فریم ورک**: React/Vue/Angular ڈیٹا مینجمنٹ پیٹرنز
+
+**اگلا مرحلہ:** آپ پیچیدہ موضوعات جیسے کیشنگ اسٹریٹیجیز، ریئل ٹائم WebSocket کنکشنز، یا پیچیدہ اسٹیٹ مینجمنٹ کو دریافت کرنے کے لیے تیار ہیں!
 
 ## اسائنمنٹ
 
diff --git a/translations/ur/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ur/5-browser-extension/3-background-tasks-and-performance/README.md
index 5d82833123..a28542a6f3 100644
--- a/translations/ur/5-browser-extension/3-background-tasks-and-performance/README.md
+++ b/translations/ur/5-browser-extension/3-background-tasks-and-performance/README.md
@@ -1,17 +1,34 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "eb358f3f4c2c082f9f3a4f98efa1d337",
-  "translation_date": "2025-10-22T15:12:28+00:00",
+  "original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
+  "translation_date": "2025-11-03T13:38:52+00:00",
   "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
   "language_code": "ur"
 }
 -->
-# براؤزر ایکسٹینشن پروجیکٹ حصہ 3: بیک گراؤنڈ ٹاسکس اور کارکردگی کے بارے میں سیکھیں
+# براؤزر ایکسٹینشن پروجیکٹ حصہ 3: بیک گراؤنڈ ٹاسکس اور کارکردگی کے بارے میں جانیں
+
+```mermaid
+journey
+    title Your Performance Optimization Journey
+    section Foundation
+      Learn browser tools: 3: Student
+      Understand profiling: 4: Student
+      Identify bottlenecks: 4: Student
+    section Extension Features
+      Build color system: 4: Student
+      Create background tasks: 5: Student
+      Update icons dynamically: 5: Student
+    section Optimization
+      Monitor performance: 5: Student
+      Debug issues: 4: Student
+      Polish experience: 5: Student
+```
 
-کبھی سوچا ہے کہ کچھ براؤزر ایکسٹینشنز کیوں تیز اور جوابدہ محسوس ہوتی ہیں جبکہ دیگر سست لگتی ہیں؟ راز پردے کے پیچھے چھپا ہوا ہے۔ جب صارفین آپ کے ایکسٹینشن کے انٹرفیس پر کلک کرتے ہیں، تو بیک گراؤنڈ میں ڈیٹا فچنگ، آئیکن اپڈیٹس، اور سسٹم ریسورسز کا انتظام کرنے والے عمل خاموشی سے کام کر رہے ہوتے ہیں۔
+کبھی سوچا ہے کہ کچھ براؤزر ایکسٹینشنز کیوں تیز اور جوابدہ محسوس ہوتی ہیں جبکہ کچھ سست لگتی ہیں؟ راز ان کے پس پردہ ہونے والے عمل میں چھپا ہے۔ جب صارفین آپ کے ایکسٹینشن کے انٹرفیس پر کلک کرتے ہیں، تو بیک گراؤنڈ میں ڈیٹا فچنگ، آئیکن اپڈیٹس، اور سسٹم ریسورسز کا انتظام خاموشی سے ہو رہا ہوتا ہے۔
 
-یہ براؤزر ایکسٹینشن سیریز کا آخری سبق ہے، اور ہم آپ کے کاربن فوٹ پرنٹ ٹریکر کو ہموار طریقے سے کام کرنے کے قابل بنائیں گے۔ آپ متحرک آئیکن اپڈیٹس شامل کریں گے اور کارکردگی کے مسائل کو ان کے مسائل بننے سے پہلے پہچاننا سیکھیں گے۔ یہ بالکل ریس کار کو ٹیون کرنے جیسا ہے - چھوٹی چھوٹی اصلاحات سب کچھ بہتر طریقے سے چلانے میں بڑا فرق ڈال سکتی ہیں۔
+یہ براؤزر ایکسٹینشن سیریز کا آخری سبق ہے، اور ہم آپ کے کاربن فوٹ پرنٹ ٹریکر کو ہموار طریقے سے کام کرنے کے قابل بنائیں گے۔ آپ متحرک آئیکن اپڈیٹس شامل کریں گے اور کارکردگی کے مسائل کو ان کے مسئلہ بننے سے پہلے پہچاننا سیکھیں گے۔ یہ بالکل ریس کار کو ٹیون کرنے جیسا ہے - چھوٹی چھوٹی اصلاحات سب کچھ بہتر طریقے سے چلانے میں بڑا فرق ڈال سکتی ہیں۔
 
 جب ہم ختم کریں گے، تو آپ کے پاس ایک پالش شدہ ایکسٹینشن ہوگی اور آپ ان کارکردگی کے اصولوں کو سمجھیں گے جو اچھے ویب ایپس کو بہترین بناتے ہیں۔ آئیے براؤزر کی اصلاح کی دنیا میں غوطہ لگائیں۔
 
@@ -23,79 +40,192 @@ CO_OP_TRANSLATOR_METADATA:
 
 پچھلے اسباق میں، آپ نے ایک فارم بنایا، اسے API سے جوڑا، اور غیر متزامن ڈیٹا فچنگ کا سامنا کیا۔ آپ کا ایکسٹینشن اچھی شکل اختیار کر رہا ہے۔
 
-اب ہمیں آخری ٹچز شامل کرنے کی ضرورت ہے - جیسے کہ اس ایکسٹینشن آئیکن کو کاربن ڈیٹا کی بنیاد پر رنگ تبدیل کرنے کے قابل بنانا۔ یہ مجھے یاد دلاتا ہے کہ ناسا کو اپولو اسپیس کرافٹ کے ہر سسٹم کو بہتر بنانا پڑا تھا۔ وہ کسی بھی ضائع شدہ سائیکل یا میموری کے متحمل نہیں ہو سکتے تھے کیونکہ کارکردگی پر زندگیاں منحصر تھیں۔ اگرچہ ہمارا براؤزر ایکسٹینشن اتنا اہم نہیں ہے، وہی اصول لاگو ہوتے ہیں - مؤثر کوڈ بہتر صارف تجربات تخلیق کرتا ہے۔
+اب ہمیں آخری ٹچز شامل کرنے کی ضرورت ہے - جیسے کہ آئیکن کو کاربن ڈیٹا کی بنیاد پر رنگ تبدیل کرنے کے قابل بنانا۔ یہ مجھے یاد دلاتا ہے کہ ناسا کو اپولو اسپیس کرافٹ کے ہر سسٹم کو بہتر بنانا پڑا تھا۔ وہ کسی بھی ضائع شدہ سائیکل یا میموری کے متحمل نہیں ہو سکتے تھے کیونکہ کارکردگی پر زندگیاں منحصر تھیں۔ اگرچہ ہمارا براؤزر ایکسٹینشن اتنا اہم نہیں ہے، وہی اصول لاگو ہوتے ہیں - موثر کوڈ بہتر صارف تجربات تخلیق کرتا ہے۔
+
+```mermaid
+mindmap
+  root((Performance & Background Tasks))
+    Browser Performance
+      Rendering Pipeline
+      Asset Optimization
+      DOM Manipulation
+      JavaScript Execution
+    Profiling Tools
+      Developer Tools
+      Performance Tab
+      Timeline Analysis
+      Bottleneck Detection
+    Extension Architecture
+      Background Scripts
+      Content Scripts
+      Message Passing
+      Icon Management
+    Optimization Strategies
+      Code Splitting
+      Lazy Loading
+      Caching
+      Resource Compression
+    Visual Feedback
+      Dynamic Icons
+      Color Coding
+      Real-time Updates
+      User Experience
+```
 
 ## ویب کارکردگی کی بنیادی باتیں
 
 جب آپ کا کوڈ مؤثر طریقے سے چلتا ہے، تو لوگ واقعی فرق محسوس کر سکتے ہیں۔ آپ جانتے ہیں وہ لمحہ جب کوئی صفحہ فوراً لوڈ ہوتا ہے یا کوئی اینیمیشن ہموار طریقے سے چلتی ہے؟ یہ اچھی کارکردگی کا نتیجہ ہے۔
 
-کارکردگی صرف رفتار کے بارے میں نہیں ہے - یہ ویب تجربات کو قدرتی بنانے کے بارے میں ہے، نہ کہ بھاری اور مایوس کن۔ کمپیوٹنگ کے ابتدائی دنوں میں، گریس ہوپر نے اپنے ڈیسک پر ایک نینو سیکنڈ (تقریباً ایک فٹ لمبے تار کا ٹکڑا) رکھا تھا تاکہ یہ دکھایا جا سکے کہ روشنی ایک اربویں سیکنڈ میں کتنی دور سفر کرتی ہے۔ یہ ان کا طریقہ تھا یہ سمجھانے کا کہ کمپیوٹنگ میں ہر مائیکرو سیکنڈ کیوں اہمیت رکھتا ہے۔ آئیے ان جاسوسی ٹولز کو دریافت کریں جو آپ کو یہ معلوم کرنے میں مدد دیتے ہیں کہ کیا چیز چیزوں کو سست کر رہی ہے۔
+کارکردگی صرف رفتار کے بارے میں نہیں ہے - یہ ویب تجربات کو قدرتی بنانے کے بارے میں ہے، نہ کہ بھاری اور مایوس کن۔ کمپیوٹنگ کے ابتدائی دنوں میں، گریس ہوپر نے اپنے ڈیسک پر ایک نینو سیکنڈ (تقریباً ایک فٹ لمبے تار کا ٹکڑا) رکھا تھا تاکہ یہ دکھایا جا سکے کہ روشنی ایک اربویں سیکنڈ میں کتنی دور سفر کرتی ہے۔ یہ ان کا طریقہ تھا یہ سمجھانے کا کہ کمپیوٹنگ میں ہر مائیکرو سیکنڈ کیوں اہمیت رکھتا ہے۔ آئیے ان ڈیٹیکٹو ٹولز کو دریافت کریں جو آپ کو یہ معلوم کرنے میں مدد دیتے ہیں کہ کیا چیز چیزوں کو سست کر رہی ہے۔
 
 > "ویب سائٹ کی کارکردگی دو چیزوں کے بارے میں ہے: صفحہ کتنی جلدی لوڈ ہوتا ہے، اور اس پر کوڈ کتنی جلدی چلتا ہے۔" -- [زیک گروسبرٹ](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
 
 اپنی ویب سائٹس کو ہر قسم کے آلات، ہر قسم کے صارفین، اور ہر قسم کے حالات میں انتہائی تیز بنانے کے بارے میں موضوع حیرت انگیز طور پر وسیع ہے۔ یہاں کچھ نکات ہیں جنہیں آپ کو ایک معیاری ویب پروجیکٹ یا براؤزر ایکسٹینشن بناتے وقت ذہن میں رکھنا چاہیے۔
 
-اپنی سائٹ کو بہتر بنانے کا پہلا قدم یہ سمجھنا ہے کہ پردے کے پیچھے اصل میں کیا ہو رہا ہے۔ خوش قسمتی سے، آپ کے براؤزر میں طاقتور جاسوسی ٹولز پہلے سے موجود ہیں۔
+اپنی سائٹ کو بہتر بنانے کا پہلا قدم یہ سمجھنا ہے کہ حقیقت میں پردے کے پیچھے کیا ہو رہا ہے۔ خوش قسمتی سے، آپ کے براؤزر میں طاقتور ڈیٹیکٹو ٹولز پہلے سے موجود ہیں۔
+
+```mermaid
+flowchart LR
+    A[HTML] --> B[Parse]
+    B --> C[DOM Tree]
+    D[CSS] --> E[Parse]
+    E --> F[CSSOM]
+    G[JavaScript] --> H[Execute]
+    
+    C --> I[Render Tree]
+    F --> I
+    H --> I
+    
+    I --> J[Layout]
+    J --> K[Paint]
+    K --> L[Composite]
+    L --> M[Display]
+    
+    subgraph "Critical Rendering Path"
+        N["1. Parse HTML"]
+        O["2. Parse CSS"]
+        P["3. Execute JS"]
+        Q["4. Build Render Tree"]
+        R["5. Layout Elements"]
+        S["6. Paint Pixels"]
+        T["7. Composite Layers"]
+    end
+    
+    style M fill:#e8f5e8
+    style I fill:#fff3e0
+    style H fill:#ffebee
+```
 
-ایج میں ڈیولپر ٹولز کھولنے کے لیے، اوپر دائیں کونے میں تین نقطوں پر کلک کریں، پھر مزید ٹولز > ڈیولپر ٹولز پر جائیں۔ یا کی بورڈ شارٹ کٹ استعمال کریں: ونڈوز پر `Ctrl` + `Shift` + `I` یا میک پر `Option` + `Command` + `I`۔ ایک بار جب آپ وہاں پہنچ جائیں، تو پرفارمنس ٹیب پر کلک کریں - یہ وہ جگہ ہے جہاں آپ اپنی تحقیقات کریں گے۔
+ایج میں ڈیولپر ٹولز کھولنے کے لیے، اوپر دائیں کونے میں تین نقطوں پر کلک کریں، پھر مزید ٹولز > ڈیولپر ٹولز پر جائیں۔ یا کی بورڈ شارٹ کٹ استعمال کریں: ونڈوز پر `Ctrl` + `Shift` + `I` یا میک پر `Option` + `Command` + `I`۔ ایک بار جب آپ وہاں ہوں، پرفارمنس ٹیب پر کلک کریں - یہ وہ جگہ ہے جہاں آپ اپنی تحقیقات کریں گے۔
 
-**یہاں آپ کا کارکردگی جاسوسی ٹول کٹ ہے:**
+**یہاں آپ کا کارکردگی ڈیٹیکٹو ٹول کٹ ہے:**
 - **ڈیولپر ٹولز کھولیں** (آپ انہیں بطور ڈیولپر مسلسل استعمال کریں گے!)
 - **پرفارمنس ٹیب پر جائیں** - اسے اپنے ویب ایپ کے فٹنس ٹریکر کے طور پر سوچیں
-- **ریکارڈ بٹن دبائیں** اور اپنی صفحہ کی کارروائی دیکھیں
+- **ریکارڈ بٹن دبائیں** اور اپنے صفحے کو ایکشن میں دیکھیں
 - **نتائج کا مطالعہ کریں** تاکہ معلوم ہو سکے کہ کیا چیز چیزوں کو سست کر رہی ہے
 
-آئیے اسے آزمائیں۔ ایک ویب سائٹ کھولیں (Microsoft.com اس کے لیے اچھی ہے) اور 'ریکارڈ' بٹن پر کلک کریں۔ اب صفحہ کو ریفریش کریں اور پروفائلر کو ہر وہ چیز کی گرفت کرتے ہوئے دیکھیں جو ہو رہی ہے۔ جب آپ ریکارڈنگ بند کریں گے، تو آپ کو ایک تفصیلی تجزیہ نظر آئے گا کہ براؤزر سائٹ کو 'اسکرپٹ'، 'رینڈر'، اور 'پینٹ' کیسے کرتا ہے۔ یہ بالکل مشن کنٹرول کی طرح ہے جو راکٹ لانچ کے دوران ہر سسٹم کی نگرانی کرتا ہے - آپ کو بالکل حقیقی وقت میں ڈیٹا ملتا ہے کہ کیا ہو رہا ہے اور کب۔
+آئیے اسے آزمائیں۔ ایک ویب سائٹ کھولیں (Microsoft.com اس کے لیے اچھی ہے) اور 'ریکارڈ' بٹن پر کلک کریں۔ اب صفحہ کو ریفریش کریں اور پروفائلر کو ہر وہ چیز کیپچر کرتے ہوئے دیکھیں جو ہو رہی ہے۔ جب آپ ریکارڈنگ بند کریں گے، تو آپ کو ایک تفصیلی تجزیہ نظر آئے گا کہ براؤزر سائٹ کو 'اسکرپٹ'، 'رینڈر'، اور 'پینٹ' کیسے کرتا ہے۔ یہ بالکل مشن کنٹرول کی طرح ہے جو راکٹ لانچ کے دوران ہر سسٹم کی نگرانی کرتا ہے - آپ کو بالکل معلوم ہوتا ہے کہ کیا ہو رہا ہے اور کب۔
+
+![ایج پروفائلر](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ur.png)
 
 ✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) میں مزید تفصیلات موجود ہیں اگر آپ مزید گہرائی میں جانا چاہتے ہیں۔
 
-> پرو ٹپ: ٹیسٹنگ سے پہلے اپنے براؤزر کی کیشے صاف کریں تاکہ یہ دیکھ سکیں کہ آپ کی سائٹ پہلی بار آنے والے زائرین کے لیے کیسی کارکردگی دکھاتی ہے - یہ عام طور پر بار بار آنے والے دوروں سے کافی مختلف ہوتی ہے!
+> پرو ٹپ: ٹیسٹنگ سے پہلے اپنے براؤزر کی کیشے کو صاف کریں تاکہ یہ دیکھ سکیں کہ آپ کی سائٹ پہلی بار وزیٹرز کے لیے کیسی کارکردگی دکھاتی ہے - یہ عام طور پر بار بار وزٹ سے کافی مختلف ہوتی ہے!
 
-پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان واقعات کو زوم کریں جو آپ کے صفحہ کے لوڈ ہونے کے دوران ہوتے ہیں۔
+پروفائل ٹائم لائن کے عناصر کو منتخب کریں تاکہ ان واقعات پر زوم کریں جو آپ کے صفحے کے لوڈ ہونے کے دوران ہوتے ہیں۔
 
-پروفائل ٹائم لائن کے ایک حصے کو منتخب کرکے اور خلاصہ پین کو دیکھ کر اپنے صفحہ کی کارکردگی کا اسنیپ شاٹ حاصل کریں:
+پروفائل ٹائم لائن کے ایک حصے کو منتخب کرکے اور خلاصہ پین کو دیکھ کر اپنے صفحے کی کارکردگی کا اسنیپ شاٹ حاصل کریں:
 
-![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ur.png)
+![ایج پروفائلر اسنیپ شاٹ](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ur.png)
 
 ایونٹ لاگ پین کو چیک کریں تاکہ دیکھ سکیں کہ آیا کوئی ایونٹ 15 ملی سیکنڈ سے زیادہ وقت لے رہا ہے:
 
-![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ur.png)
+![ایج ایونٹ لاگ](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ur.png)
 
 ✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈیولپر ٹولز کھولیں اور دیکھیں کہ کیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز؟
 
+```mermaid
+flowchart TD
+    A[Open DevTools] --> B[Navigate to Performance Tab]
+    B --> C[Click Record Button]
+    C --> D[Perform Actions]
+    D --> E[Stop Recording]
+    E --> F{Analyze Results}
+    
+    F --> G[Check Timeline]
+    F --> H[Review Network]
+    F --> I[Examine Scripts]
+    F --> J[Identify Paint Events]
+    
+    G --> K{Long Tasks?}
+    H --> L{Large Assets?}
+    I --> M{Render Blocking?}
+    J --> N{Expensive Paints?}
+    
+    K -->|Yes| O[Optimize JavaScript]
+    L -->|Yes| P[Compress Assets]
+    M -->|Yes| Q[Add Async/Defer]
+    N -->|Yes| R[Simplify Styles]
+    
+    O --> S[Test Again]
+    P --> S
+    Q --> S
+    R --> S
+    
+    style A fill:#e1f5fe
+    style F fill:#fff3e0
+    style S fill:#e8f5e8
+```
+
 ## پروفائلنگ کرتے وقت کیا دیکھنا ہے
 
-پروفائلر چلانا صرف شروعات ہے - اصل مہارت یہ جاننا ہے کہ وہ رنگین چارٹس آپ کو کیا بتا رہے ہیں۔ فکر نہ کریں، آپ انہیں پڑھنے کی عادت ڈال لیں گے۔ تجربہ کار ڈیولپرز نے مکمل مسائل بننے سے پہلے انتباہی علامات کو پہچاننا سیکھا ہے۔
+پروفائلر چلانا صرف شروعات ہے - اصل مہارت یہ جاننا ہے کہ وہ رنگین چارٹس آپ کو کیا بتا رہے ہیں۔ فکر نہ کریں، آپ انہیں پڑھنے کی عادت ڈال لیں گے۔ تجربہ کار ڈیولپرز نے انتباہی علامات کو مکمل مسائل بننے سے پہلے پہچاننا سیکھ لیا ہے۔
 
-آئیے عام مشتبہ افراد کے بارے میں بات کرتے ہیں - کارکردگی کے مسائل پیدا کرنے والے جو اکثر ویب پروجیکٹس میں چھپ جاتے ہیں۔ جیسے میری کیوری کو اپنی لیب میں تابکاری کی سطح کی احتیاط سے نگرانی کرنی پڑتی تھی، ہمیں ان مخصوص نمونوں پر نظر رکھنی ہوگی جو مسائل کی نشاندہی کرتے ہیں۔ انہیں جلدی پکڑنا آپ کو (اور آپ کے صارفین کو) بہت زیادہ پریشانی سے بچائے گا۔
+آئیے عام مشتبہ افراد کے بارے میں بات کرتے ہیں - وہ کارکردگی کے مسائل جو اکثر ویب پروجیکٹس میں چھپ جاتے ہیں۔ جیسے میری کیوری کو اپنے لیب میں تابکاری کی سطح کی احتیاط سے نگرانی کرنی پڑتی تھی، ہمیں ان مخصوص نمونوں کو دیکھنا ہوگا جو پریشانی کی نشاندہی کرتے ہیں۔ انہیں جلدی پکڑنا آپ کو (اور آپ کے صارفین کو) بہت زیادہ مایوسی سے بچائے گا۔
 
-**اثاثوں کے سائز**: ویب سائٹس سالوں کے دوران "بھاری" ہوتی جا رہی ہیں، اور اس اضافی وزن کا زیادہ تر حصہ تصاویر سے آتا ہے۔ یہ بالکل ایسا ہے جیسے ہم اپنے ڈیجیٹل سوٹ کیسز میں زیادہ سے زیادہ چیزیں بھر رہے ہوں۔
+**اثاثہ کے سائز**: ویب سائٹس سالوں کے دوران "بھاری" ہوتی جا رہی ہیں، اور اس اضافی وزن کا زیادہ تر حصہ تصاویر سے آتا ہے۔ یہ بالکل ایسا ہے جیسے ہم اپنے ڈیجیٹل سوٹ کیسز میں زیادہ سے زیادہ چیزیں بھر رہے ہیں۔
 
-✅ [Internet Archive](https://httparchive.org/reports/page-weight) کو چیک کریں تاکہ دیکھ سکیں کہ صفحہ کے سائز وقت کے ساتھ کیسے بڑھے ہیں - یہ کافی حیران کن ہے۔
+✅ [Internet Archive](https://httparchive.org/reports/page-weight) کو چیک کریں تاکہ دیکھ سکیں کہ صفحہ کے سائز وقت کے ساتھ کیسے بڑھے ہیں - یہ کافی انکشاف ہے۔
 
 **اپنے اثاثوں کو بہتر رکھنے کے طریقے:**
-- **تصاویر کو کمپریس کریں!** جدید فارمیٹس جیسے WebP فائل کے سائز کو نمایاں طور پر کم کر سکتے ہیں
-- **ہر ڈیوائس کے لیے صحیح تصویر کا سائز فراہم کریں** - فونز کو بڑی ڈیسک ٹاپ تصاویر بھیجنے کی ضرورت نہیں ہے
+- **تصاویر کو کمپریس کریں**! جدید فارمیٹس جیسے WebP فائل کے سائز کو نمایاں طور پر کم کر سکتے ہیں
+- **ہر ڈیوائس کے لیے صحیح تصویر کا سائز فراہم کریں** - فونز کو بڑی ڈیسک ٹاپ تصاویر بھیجنے کی ضرورت نہیں
 - **اپنے CSS اور جاوا اسکرپٹ کو منیفائی کریں** - ہر بائٹ اہم ہے
-- **لیزی لوڈنگ استعمال کریں** تاکہ تصاویر صرف اس وقت ڈاؤنلوڈ ہوں جب صارفین واقعی ان تک اسکرول کریں
+- **لیزی لوڈنگ کا استعمال کریں** تاکہ تصاویر صرف اس وقت ڈاؤن لوڈ ہوں جب صارفین واقعی ان تک اسکرول کریں
 
-**DOM ٹریورسلز**: براؤزر کو آپ کے لکھے ہوئے کوڈ کی بنیاد پر اپنا دستاویز آبجیکٹ ماڈل بنانا ہوتا ہے، اس لیے اچھی صفحہ کارکردگی کے لیے اپنے ٹیگز کو کم سے کم رکھنا ضروری ہے، صرف وہی استعمال کریں اور اسٹائل کریں جو صفحہ کو ضرورت ہو۔ اس نقطہ نظر سے، صفحہ سے وابستہ اضافی CSS کو بہتر بنایا جا سکتا ہے؛ وہ اسٹائلز جو صرف ایک صفحہ پر استعمال ہونے کی ضرورت ہے انہیں مین اسٹائل شیٹ میں شامل کرنے کی ضرورت نہیں ہے، مثال کے طور پر۔
+**DOM ٹریورسلز**: براؤزر کو آپ کے لکھے ہوئے کوڈ کی بنیاد پر اپنا دستاویز آبجیکٹ ماڈل بنانا ہوتا ہے، اس لیے اچھے صفحے کی کارکردگی کے لیے اپنے ٹیگز کو کم سے کم رکھنا ضروری ہے، صرف وہی استعمال کرنا اور اسٹائل کرنا جو صفحے کو ضرورت ہو۔ اس نقطہ پر، صفحے سے وابستہ اضافی CSS کو بہتر بنایا جا سکتا ہے؛ وہ اسٹائلز جو صرف ایک صفحے پر استعمال ہونے کی ضرورت ہے انہیں مین اسٹائل شیٹ میں شامل کرنے کی ضرورت نہیں ہے، مثال کے طور پر۔
 
-**DOM کی اصلاح کے لیے کلیدی حکمت عملی:**
+**DOM کو بہتر بنانے کے لیے کلیدی حکمت عملی:**
 - **HTML عناصر اور نیسٹنگ لیولز کی تعداد کو کم کریں**
 - **غیر استعمال شدہ CSS قواعد کو ہٹائیں اور اسٹائل شیٹس کو مؤثر طریقے سے یکجا کریں**
-- **CSS کو منظم کریں تاکہ ہر صفحہ کے لیے صرف ضروری چیزیں لوڈ ہوں**
+- **CSS کو منظم کریں تاکہ ہر صفحے کے لیے صرف ضروری چیزیں لوڈ ہوں**
 - **HTML کو بہتر براؤزر پارسنگ کے لیے سیمینٹک طور پر ترتیب دیں**
 
-**جاوا اسکرپٹ**: ہر جاوا اسکرپٹ ڈیولپر کو 'رینڈر بلاکنگ' اسکرپٹس کے لیے دیکھنا چاہیے جو DOM کو ٹریورس اور براؤزر پر پینٹ کرنے سے پہلے لوڈ ہونا ضروری ہیں۔ اپنے ان لائن اسکرپٹس کے ساتھ `defer` استعمال کرنے پر غور کریں (جیسا کہ ٹیریریم ماڈیول میں کیا گیا ہے)۔
+**جاوا اسکرپٹ**: ہر جاوا اسکرپٹ ڈیولپر کو 'رینڈر بلاکنگ' اسکرپٹس کے لیے دیکھنا چاہیے جو DOM کو ٹریورس اور براؤزر میں پینٹ کرنے سے پہلے لوڈ ہونا ضروری ہیں۔ اپنے ان لائن اسکرپٹس کے ساتھ `defer` استعمال کرنے پر غور کریں (جیسا کہ ٹیریریم ماڈیول میں کیا گیا ہے)۔
 
-**جدید جاوا اسکرپٹ کی اصلاح کی تکنیکیں:**
-- **اسکرپٹس کو DOM پارسنگ کے بعد لوڈ کرنے کے لیے `defer` ایٹریبیوٹ استعمال کریں**
-- **کوڈ اسپلٹنگ نافذ کریں تاکہ صرف ضروری جاوا اسکرپٹ لوڈ ہو**
+**جدید جاوا اسکرپٹ کو بہتر بنانے کی تکنیکیں:**
+- **اسکرپٹس کو DOM پارسنگ کے بعد لوڈ کرنے کے لیے `defer` ایٹریبیوٹ کا استعمال کریں**
+- **کوڈ اسپلٹنگ کو نافذ کریں تاکہ صرف ضروری جاوا اسکرپٹ لوڈ ہو**
 - **غیر اہم فعالیت کے لیے لیزی لوڈنگ کا اطلاق کریں**
-- **بھاری لائبریریوں اور فریم ورک کے استعمال کو کم سے کم کریں جہاں ممکن ہو**
+- **بھاری لائبریریوں اور فریم ورک کے استعمال کو ممکنہ حد تک کم کریں**
 
-✅ کچھ سائٹس کو [سائٹ اسپیڈ ٹیسٹ ویب سائٹ](https://www.webpagetest.org/) پر آزمائیں تاکہ ان عام چیکز کے بارے میں مزید جان سکیں جو سائٹ کی کارکردگی کا تعین کرنے کے لیے کیے جاتے ہیں۔
+✅ کچھ سائٹس کو [سائٹ اسپیڈ ٹیسٹ ویب سائٹ](https://www.webpagetest.org/) پر آزمائیں تاکہ ان عام چیکس کے بارے میں مزید جان سکیں جو سائٹ کی کارکردگی کا تعین کرنے کے لیے کیے جاتے ہیں۔
+
+### 🔄 **تعلیمی جائزہ**
+**کارکردگی کی سمجھ**: ایکسٹینشن فیچرز بنانے سے پہلے، یقینی بنائیں کہ آپ:
+- ✅ HTML سے پکسلز تک اہم رینڈرنگ پاتھ کی وضاحت کر سکتے ہیں
+- ✅ ویب ایپلیکیشنز میں عام کارکردگی کی رکاوٹوں کی شناخت کر سکتے ہیں
+- ✅ صفحے کی کارکردگی کو پروفائل کرنے کے لیے براؤزر ڈیولپر ٹولز استعمال کر سکتے ہیں
+- ✅ اثاثہ کے سائز اور DOM کی پیچیدگی کے اثرات کو رفتار پر سمجھ سکتے ہیں
+
+**فوری خود ٹیسٹ**: جب آپ کے پاس رینڈر بلاکنگ جاوا اسکرپٹ ہو تو کیا ہوتا ہے؟
+*جواب: براؤزر کو اسکرپٹ کو ڈاؤن لوڈ اور چلانا ضروری ہے اس سے پہلے کہ وہ HTML کو پارس کرنا اور صفحہ کو رینڈر کرنا جاری رکھ سکے*
+
+**حقیقی دنیا کی کارکردگی کا اثر**:
+- **100ms تاخیر**: صارفین سست روی کو محسوس کرتے ہیں
+- **1 سیکنڈ تاخیر**: صارفین توجہ کھونا شروع کر دیتے ہیں
+- **3+ سیکنڈ**: 40% صارفین صفحہ چھوڑ دیتے ہیں
+- **موبائل نیٹ ورکس**: کارکردگی اور بھی زیادہ اہمیت رکھتی ہے
 
 اب جب کہ آپ کو اندازہ ہو گیا ہے کہ براؤزر آپ کے بھیجے گئے اثاثوں کو کیسے رینڈر کرتا ہے، آئیے آخری چند چیزوں پر نظر ڈالیں جو آپ کو اپنے ایکسٹینشن کو مکمل کرنے کے لیے کرنے کی ضرورت ہے:
 
@@ -103,7 +233,33 @@ CO_OP_TRANSLATOR_METADATA:
 
 اب ہم ایک فنکشن بنائیں گے جو عددی ڈیٹا کو معنی خیز رنگوں میں تبدیل کرے۔ اسے ٹریفک لائٹ سسٹم کی طرح سوچیں - صاف توانائی کے لیے سبز، زیادہ کاربن شدت کے لیے سرخ۔
 
-یہ فنکشن ہمارے API سے CO2 ڈیٹا لے گا اور یہ طے کرے گا کہ ماحولیاتی اثرات کی بہترین نمائندگی کرنے والا رنگ کون سا ہے۔ یہ بالکل ویسا ہی ہے جیسے سائنسدان پیچیدہ ڈیٹا پیٹرنز کو بصری طور پر ظاہر کرنے کے لیے ہیٹ میپس میں رنگ کوڈنگ کا استعمال کرتے ہیں - سمندر کے درجہ حرارت سے لے کر ستاروں کی تشکیل تک۔ آئیے اسے `/src/index.js` میں شامل کریں، ان `const` ویریبلز کے فوراً بعد جو ہم نے پہلے سیٹ کیے تھے:
+یہ فنکشن ہمارے API سے CO2 ڈیٹا لے گا اور یہ طے کرے گا کہ ماحولیاتی اثرات کی بہترین نمائندگی کرنے کے لیے کون سا رنگ مناسب ہے۔ یہ بالکل ویسا ہی ہے جیسے سائنسدان ہیٹ میپس میں پیچیدہ ڈیٹا پیٹرنز کو بصری طور پر ظاہر کرنے کے لیے رنگ کوڈنگ کا استعمال کرتے ہیں - سمندر کے درجہ حرارت سے لے کر ستاروں کی تشکیل تک۔ آئیے اسے `/src/index.js` میں شامل کریں، ان `const` متغیرات کے فوراً بعد جو ہم نے پہلے سیٹ کیے تھے:
+
+```mermaid
+flowchart LR
+    A[CO2 Value] --> B[Find Closest Scale Point]
+    B --> C[Get Scale Index]
+    C --> D[Map to Color]
+    D --> E[Send to Background]
+    
+    subgraph "Color Scale"
+        F["0-150: Green (Clean)"]
+        G["150-600: Yellow (Moderate)"]
+        H["600-750: Orange (High)"]
+        I["750+: Brown (Very High)"]
+    end
+    
+    subgraph "Message Passing"
+        J[Content Script]
+        K[chrome.runtime.sendMessage]
+        L[Background Script]
+        M[Icon Update]
+    end
+    
+    style A fill:#e1f5fe
+    style D fill:#e8f5e8
+    style E fill:#fff3e0
+```
 
 ```javascript
 function calculateColor(value) {
@@ -131,33 +287,52 @@ function calculateColor(value) {
 }
 ```
 
-**آئیے اس ہوشیار چھوٹے فنکشن کو توڑتے ہیں:**
-- **دو arrays سیٹ کرتا ہے** - ایک CO2 لیولز کے لیے، دوسرا رنگوں کے لیے (سبز = صاف، بھورا = گندا!)
-- **ہمارے اصل CO2 ویلیو کے قریب ترین میچ تلاش کرتا ہے** کچھ زبردست array sorting کا استعمال کرتے ہوئے
-- **findIndex() طریقہ استعمال کرتے ہوئے مماثل رنگ پکڑتا ہے**
+**آئیے اس چالاک چھوٹے فنکشن کو توڑ کر دیکھتے ہیں:**
+- **دو ارے ترتیب دیتا ہے** - ایک CO2 لیولز کے لیے، دوسرا رنگوں کے لیے (سبز = صاف، بھورا = گندا!)
+- **ہمارے اصل CO2 ویلیو کے قریب ترین میچ تلاش کرتا ہے** کچھ زبردست ارے سورتنگ کا استعمال کرتے ہوئے
+- **مطلوبہ رنگ کو findIndex() طریقہ کے ذریعے پکڑتا ہے**
 - **ہمارے منتخب کردہ رنگ کے ساتھ کروم کے بیک گراؤنڈ اسکرپٹ کو پیغام بھیجتا ہے**
-- **صاف string formatting کے لیے template literals (وہ backticks) استعمال کرتا ہے**
-- **const declarations کے ساتھ سب کچھ منظم رکھتا ہے**
+- **صاف ستھری اسٹرنگ فارمیٹنگ کے لیے ٹیمپلیٹ لیٹرلز (وہ بیک ٹکس) استعمال کرتا ہے**
+- **ہر چیز کو منظم رکھتا ہے** const ڈیکلریشنز کے ساتھ
 
-`chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) آپ کے ایکسٹینشن کا اعصابی نظام کی طرح ہے - یہ پردے کے پیچھے تمام مواصلات اور کاموں کو سنبھالتا ہے:
+`chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) آپ کے ایکسٹینشن کا اعصابی نظام کی طرح ہے - یہ تمام پردے کے پیچھے کی بات چیت اور کاموں کو سنبھالتا ہے:
 
-> "chrome.runtime API کا استعمال کریں تاکہ بیک گراؤنڈ صفحہ حاصل کیا جا سکے، مینیفیسٹ کے بارے میں تفصیلات واپس کریں، اور ایپ یا ایکسٹینشن لائف سائیکل میں ہونے والے ایونٹس کے لیے سنیں اور جواب دیں۔ آپ اس API کا استعمال URLs کے رشتہ دار راستے کو مکمل طور پر اہل URLs میں تبدیل کرنے کے لیے بھی کر سکتے ہیں۔"
+> "chrome.runtime API کا استعمال کریں تاکہ بیک گراؤنڈ صفحہ حاصل کیا جا سکے، مینیفیسٹ کے بارے میں تفصیلات واپس کریں، اور ایپ یا ایکسٹینشن لائف سائیکل میں ایونٹس کے لیے سنیں اور جواب دیں۔ آپ اس API کا استعمال URLs کے رشتہ دار راستے کو مکمل طور پر اہل URLs میں تبدیل کرنے کے لیے بھی کر سکتے ہیں۔"
 
 **کروم رن ٹائم API کیوں مفید ہے:**
 - **آپ کے ایکسٹینشن کے مختلف حصوں کو ایک دوسرے سے بات کرنے دیتا ہے**
 - **بیک گراؤنڈ کاموں کو سنبھالتا ہے بغیر صارف انٹرفیس کو منجمد کیے**
-- **آپ کے ایکسٹینشن کے لائف سائیکل ایونٹس کو منظم کرتا ہے**
+- **آپ کے ایکسٹینشن کے لائف سائیکل ایونٹس کا انتظام کرتا ہے**
 - **اسکرپٹس کے درمیان پیغام رسانی کو بہت آسان بناتا ہے**
 
 ✅ اگر آپ یہ براؤزر ایکسٹینشن ایج کے لیے تیار کر رہے ہیں، تو یہ جان کر حیرت ہو سکتی ہے کہ آپ کروم API استعمال کر رہے ہیں۔ ایج براؤزر کے نئے ورژن کرومیم براؤزر انجن پر چلتے ہیں، اس لیے آپ ان ٹولز کا فائدہ اٹھا سکتے ہیں۔
 
+```mermaid
+architecture-beta
+    group browser(logos:chrome)[Browser]
+    
+    service popup(logos:html5)[Popup UI] in browser
+    service content(logos:javascript)[Content Script] in browser
+    service background(database)[Background Script] in browser
+    service api(logos:api)[External API] in browser
+    
+    popup:R -- L:content
+    content:R -- L:background
+    background:T -- B:api
+    content:T -- B:api
+    
+    junction junctionCenter in browser
+    popup:R -- L:junctionCenter
+    junctionCenter:R -- L:background
+```
+
 > **پرو ٹپ**: اگر آپ کسی براؤزر ایکسٹینشن کو پروفائل کرنا چاہتے ہیں، تو ایکسٹینشن کے اندر سے ڈیولپر ٹولز لانچ کریں، کیونکہ یہ اپنا الگ براؤزر انسٹینس ہے۔ یہ آپ کو ایکسٹینشن سے متعلق کارکردگی کے میٹرکس تک رسائی فراہم کرتا ہے۔
 
 ### ایک ڈیفالٹ آئیکن رنگ سیٹ کریں
 
-حقیقی ڈیٹا فچنگ شروع کرنے سے پہلے، آئیے اپنے ایکسٹینشن کو ایک ابتدائی نقطہ دیں۔ کوئی بھی خالی یا خراب نظر آنے والے آئیکن کو دیکھنا پسند نہیں کرتا۔ ہم سبز رنگ سے شروع کریں گے تاکہ صارفین کو معلوم ہو کہ ایکسٹینشن انسٹال کرنے کے لمحے سے کام کر رہا ہے۔
+حقیقی ڈیٹا فچنگ شروع کرنے سے پہلے، آئیے اپنے ایکسٹینشن کو ایک ابتدائی نقطہ دیں۔ کوئی بھی خالی یا خراب نظر آنے والے آئیکن کو دیکھنا پسند نہیں کرتا۔ ہم سبز رنگ سے شروع کریں گے تاکہ صارفین کو معلوم ہو کہ ایکسٹینشن انسٹال ہونے کے لمحے سے کام کر رہا ہے۔
 
-اپنے `init()` فنکشن میں، آئیے وہ ڈیفالٹ سبز آئیکن سیٹ کریں:
+اپنے `init()` فنکشن میں، آئیے اس ڈیفالٹ سبز آئیکن کو سیٹ کریں:
 
 ```javascript
 chrome.runtime.sendMessage({
@@ -168,70 +343,47 @@ chrome.runtime.sendMessage({
 });
 ```
 
-**یہ initialization کیا حاصل کرتا ہے:**
+**یہ ابتدائی سیٹ اپ کیا حاصل کرتا ہے:**
 - **ایک غیر جانبدار سبز رنگ کو ڈیفالٹ حالت کے طور پر سیٹ کرتا ہے**
 - **ایکسٹینشن لوڈ ہونے پر فوری بصری فیڈبیک فراہم کرتا ہے**
 - **بیک گراؤنڈ اسکرپٹ کے ساتھ مواصلاتی پیٹرن قائم کرتا ہے**
-- **یقینی بناتا ہے کہ صارفین ڈیٹا لوڈ ہونے سے پہلے ایک فعال ایکسٹینشن دیکھیں**
+- **یقینی بناتا ہے کہ صارف
+- ✅ کروم رن ٹائم API ایکسٹینشن آرکیٹیکچر میں کیا کردار ادا کرتا ہے؟
+- ✅ رنگ کے حساب کتاب کا الگورتھم ڈیٹا کو بصری تاثرات سے کیسے جوڑتا ہے؟
 
-### فنکشن کو کال کریں، کال کو نافذ کریں
+**کارکردگی کے پہلو**: آپ کی ایکسٹینشن اب ظاہر کرتی ہے:
+- **موثر پیغام رسانی**: اسکرپٹ کانٹیکسٹس کے درمیان صاف مواصلت
+- **بہتر رینڈرنگ**: OffscreenCanvas UI کو بلاک ہونے سے روکتا ہے
+- **حقیقی وقت کی اپڈیٹس**: لائیو ڈیٹا کی بنیاد پر آئیکن میں متحرک تبدیلیاں
+- **میموری مینجمنٹ**: مناسب صفائی اور وسائل کا انتظام
 
-اب آئیے سب کچھ ایک ساتھ جوڑیں تاکہ جب تازہ CO2 ڈیٹا آئے، آپ کا آئیکن خود بخود صحیح رنگ کے ساتھ اپڈیٹ ہو جائے۔ یہ بالکل الیکٹرانک ڈیوائس میں آخری سرکٹ کو جوڑنے جیسا ہے - اچانک تمام انفرادی اجزاء ایک نظام کے طور پر کام کرتے ہیں۔
+**اپنی ایکسٹینشن کو ٹیسٹ کرنے کا وقت:**
+- **سب کچھ بنائیں** `npm run build` کے ساتھ
+- **اپنی ایکسٹینشن کو براؤزر میں ری لوڈ کریں** (یہ قدم بھولنا نہیں)
+- **اپنی ایکسٹینشن کھولیں** اور دیکھیں کہ آئیکن کے رنگ کیسے بدلتے ہیں
+- **چیک کریں** کہ یہ دنیا بھر کے حقیقی کاربن ڈیٹا پر کیسے ردعمل دیتا ہے
 
-یہ لائن API سے CO2 ڈیٹا حاصل کرنے کے فوراً بعد شامل کریں:
+اب آپ ایک نظر میں جان سکیں گے کہ کپڑے دھونے کا وقت اچھا ہے یا صاف توانائی کے لیے انتظار کرنا بہتر ہوگا۔ آپ نے کچھ واقعی مفید بنایا اور براؤزر کی کارکردگی کے بارے میں سیکھا۔
 
-```javascript
-// After retrieving CO2 data from the API
-// let CO2 = data.data[0].intensity.actual;
-calculateColor(CO2);
-```
+## GitHub Copilot Agent Challenge 🚀
 
-**یہ انضمام کیا حاصل کرتا ہے:**
-- **API ڈیٹا فلو کو بصری اشارے کے نظام کے ساتھ جوڑتا ہے**
-- **نئے ڈیٹا کے آنے پر آئیکن اپڈیٹس کو خود بخود متحرک کرتا ہے**
-- **موجودہ کاربن شدت کی بنیاد پر حقیقی وقت میں بصری فیڈبیک فراہم کرتا ہے**
-- **ڈیٹا فچنگ اور ڈسپلے لاجک کے درمیان خدشات کی علیحدگی کو برقرار رکھتا ہے**
+Agent mode استعمال کریں اور درج ذیل چیلنج مکمل کریں:
 
-اور آخر میں، `/dist/background.js` میں، ان بیک گراؤنڈ ایکشن کالز کے لیے listener شامل کریں:
+**تفصیل:** براؤزر ایکسٹینشن کی کارکردگی کی نگرانی کی صلاحیتوں کو بہتر بنائیں اور ایک فیچر شامل کریں جو ایکسٹینشن کے مختلف اجزاء کے لوڈ ٹائمز کو ٹریک اور ظاہر کرے۔
 
-```javascript
-// Listen for messages from the content script
-chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
-	if (msg.action === 'updateIcon') {
-		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
-	}
-});
+**پرومپٹ:** براؤزر ایکسٹینشن کے لیے ایک کارکردگی کی نگرانی کا نظام بنائیں جو API سے CO2 ڈیٹا حاصل کرنے، رنگوں کا حساب لگانے، اور آئیکن کو اپڈیٹ کرنے میں لگنے والے وقت کو ماپے اور لاگ کرے۔ ایک فنکشن `performanceTracker` بنائیں جو Performance API استعمال کرے اور ان آپریشنز کے نتائج کو براؤزر کنسول میں ٹائم اسٹیمپس اور دورانیے کے میٹرکس کے ساتھ ظاہر کرے۔
 
-// Draw dynamic icon using Canvas API
-// Borrowed from energy lollipop extension - nice feature!
-function drawIcon(value) {
-	// Create an offscreen canvas for better performance
-	const canvas = new OffscreenCanvas(200, 200);
-	const context = canvas.getContext('2d');
-
-	// Draw a colored circle representing carbon intensity
-	context.beginPath();
-	context.fillStyle = value.color;
-	context.arc(100, 100, 50, 0, 2 * Math.PI);
-	context.fill();
-
-	// Return the image data for the browser icon
-	return context.getImageData(50, 50, 100, 100);
-}
-```
+Agent mode کے بارے میں مزید جانیں [یہاں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
+
+## 🚀 چیلنج
 
-**یہ بیک گراؤنڈ اسکرپٹ کیا کرتا ہے:**
-- **آپ کے مین اسکرپٹ سے پیغامات سنتا ہے (جیسے ایک ریسیپشنسٹ کالز لیتا ہے)**
-- **ان 'updateIcon' درخواستوں کو پروسیس کرتا ہے تاکہ آپ کے ٹول بار آئیکن کو تبدیل کیا جا سکے**
-- **Canvas API کا استعمال کرتے ہوئے نئے آئیکنز فوری طور پر تخلیق کرتا ہے**
-- **ایک سادہ رنگین دائرہ کھینچتا ہے جو موجودہ کاربن شدت
-یہاں ایک دلچسپ جاسوسی مشن ہے: کچھ ایسے اوپن سورس ویب سائٹس کا انتخاب کریں جو کئی سالوں سے موجود ہیں (جیسے ویکیپیڈیا، گٹ ہب، یا اسٹیک اوور فلو) اور ان کے کمیٹ ہسٹری میں جھانکیں۔ کیا آپ دیکھ سکتے ہیں کہ انہوں نے کہاں کارکردگی میں بہتری کی؟ کون سے مسائل بار بار سامنے آتے رہے؟
+یہاں ایک دلچسپ جاسوسی مشن ہے: کچھ اوپن سورس ویب سائٹس کا انتخاب کریں جو کئی سالوں سے موجود ہیں (جیسے Wikipedia، GitHub، یا Stack Overflow) اور ان کی کمیٹ ہسٹری میں جھانکیں۔ کیا آپ دیکھ سکتے ہیں کہ انہوں نے کارکردگی میں بہتری کہاں کی؟ کون سے مسائل بار بار سامنے آتے رہے؟
 
 **آپ کی تحقیق کا طریقہ:**
-- **کمیٹ میسیجز** میں ایسے الفاظ تلاش کریں جیسے "بہتر بنانا"، "کارکردگی"، یا "تیز"
-- **پیٹرنز** دیکھیں - کیا وہ بار بار ایک ہی قسم کے مسائل حل کر رہے ہیں؟
-- **عام وجوہات** کی نشاندہی کریں جو ویب سائٹس کو سست کرتی ہیں
-- **اپنی دریافتیں شیئر کریں** - دوسرے ڈیولپرز حقیقی دنیا کی مثالوں سے سیکھ سکتے ہیں
+- **تلاش کریں** کمیٹ میسیجز میں الفاظ جیسے "optimize"، "performance"، یا "faster"
+- **دیکھیں** پیٹرنز - کیا وہ بار بار ایک ہی قسم کے مسائل کو ٹھیک کرتے ہیں؟
+- **شناخت کریں** عام وجوہات جو ویب سائٹس کو سست کرتی ہیں
+- **شیئر کریں** جو آپ دریافت کرتے ہیں - دوسرے ڈویلپرز حقیقی دنیا کی مثالوں سے سیکھتے ہیں
 
 ## لیکچر کے بعد کا کوئز
 
@@ -241,13 +393,133 @@ function drawIcon(value) {
 
 ایک [کارکردگی نیوز لیٹر](https://perf.email/) کے لیے سائن اپ کرنے پر غور کریں۔
 
-براؤزرز ویب کارکردگی کو جانچنے کے کچھ طریقوں کی تحقیق کریں، ان کے ویب ٹولز کے پرفارمنس ٹیبز کو دیکھ کر۔ کیا آپ کو کوئی بڑی فرق نظر آتی ہے؟
+براؤزرز کے ویب کارکردگی کو جانچنے کے طریقوں کی تحقیق کریں اور ان کے ویب ٹولز کے کارکردگی ٹیبز کو دیکھیں۔ کیا آپ کو کوئی بڑی فرق نظر آتی ہے؟
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] براؤزر ٹاسک مینیجر کھولیں (Chrome میں Shift+Esc) اور ایکسٹینشن کے وسائل کے استعمال کو دیکھیں
+- [ ] DevTools Performance ٹیب استعمال کریں اور ویب پیج کی کارکردگی کو ریکارڈ اور تجزیہ کریں
+- [ ] براؤزر کے ایکسٹینشنز پیج پر جائیں اور دیکھیں کہ کون سی ایکسٹینشنز اسٹارٹ اپ ٹائم پر اثر ڈالتی ہیں
+- [ ] ایکسٹینشنز کو عارضی طور پر غیر فعال کریں اور کارکردگی کے فرق کو دیکھیں
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] لیکچر کے بعد کا کوئز مکمل کریں اور کارکردگی کے تصورات کو سمجھیں
+- [ ] اپنی براؤزر ایکسٹینشن کے لیے ایک بیک گراؤنڈ اسکرپٹ نافذ کریں
+- [ ] براؤزر.alarms استعمال کرنا سیکھیں تاکہ بیک گراؤنڈ ٹاسکس کو مؤثر بنایا جا سکے
+- [ ] کانٹینٹ اسکرپٹس اور بیک گراؤنڈ اسکرپٹس کے درمیان پیغام رسانی کی مشق کریں
+- [ ] اپنی ایکسٹینشن کے وسائل کے استعمال کو ماپیں اور بہتر بنائیں
+
+### 📅 **آپ کا ہفتہ بھر کا کارکردگی سفر**
+- [ ] بیک گراؤنڈ فنکشنلٹی کے ساتھ ایک اعلی کارکردگی براؤزر ایکسٹینشن مکمل کریں
+- [ ] سروس ورکرز اور جدید ایکسٹینشن آرکیٹیکچر میں مہارت حاصل کریں
+- [ ] مؤثر ڈیٹا سنکرونائزیشن اور کیشنگ حکمت عملی نافذ کریں
+- [ ] ایکسٹینشن کی کارکردگی کے لیے جدید ڈیبگنگ تکنیک سیکھیں
+- [ ] اپنی ایکسٹینشن کو فعالیت اور وسائل کی کارکردگی دونوں کے لیے بہتر بنائیں
+- [ ] ایکسٹینشن کی کارکردگی کے منظرناموں کے لیے جامع ٹیسٹس بنائیں
+
+### 🌟 **آپ کا مہینہ بھر کا آپٹیمائزیشن ماسٹری**
+- [ ] اعلی کارکردگی والے براؤزر ایکسٹینشنز بنائیں جو انٹرپرائز گریڈ ہوں
+- [ ] Web Workers، Service Workers، اور جدید ویب کارکردگی کے بارے میں سیکھیں
+- [ ] کارکردگی کی اصلاح پر مرکوز اوپن سورس پروجیکٹس میں تعاون کریں
+- [ ] براؤزر کے اندرونی کام اور جدید ڈیبگنگ تکنیک میں مہارت حاصل کریں
+- [ ] کارکردگی کی نگرانی کے ٹولز اور بہترین عمل کے گائیڈز بنائیں
+- [ ] ایک کارکردگی کے ماہر بنیں جو ویب ایپلیکیشنز کو بہتر بنانے میں مدد کرتا ہے
+
+## 🎯 آپ کی براؤزر ایکسٹینشن ماسٹری ٹائم لائن
+
+```mermaid
+timeline
+    title Complete Extension Development Progression
+    
+    section Performance Fundamentals (20 minutes)
+        Browser Profiling: DevTools mastery
+                         : Timeline analysis
+                         : Bottleneck identification
+                         : Critical rendering path
+        
+    section Background Tasks (25 minutes)
+        Extension Architecture: Message passing
+                              : Background scripts
+                              : Runtime API usage
+                              : Cross-context communication
+        
+    section Visual Feedback (30 minutes)
+        Dynamic UI: Color calculation algorithms
+                  : Canvas API integration
+                  : Icon generation
+                  : Real-time updates
+        
+    section Performance Optimization (35 minutes)
+        Efficient Code: Async operations
+                      : Memory management
+                      : Resource cleanup
+                      : Performance monitoring
+        
+    section Production Ready (45 minutes)
+        Polish & Testing: Cross-browser compatibility
+                        : Error handling
+                        : User experience
+                        : Performance validation
+        
+    section Advanced Features (1 week)
+        Extension Ecosystem: Chrome Web Store
+                           : User feedback
+                           : Analytics integration
+                           : Update management
+        
+    section Professional Development (2 weeks)
+        Enterprise Extensions: Team collaboration
+                             : Code reviews
+                             : CI/CD pipelines
+                             : Security audits
+        
+    section Expert Mastery (1 month)
+        Platform Expertise: Advanced Chrome APIs
+                          : Performance optimization
+                          : Architecture patterns
+                          : Open source contribution
+```
+
+### 🛠️ آپ کا مکمل ایکسٹینشن ڈیولپمنٹ ٹول کٹ
+
+اس ٹرائیلوجی کو مکمل کرنے کے بعد، آپ نے مہارت حاصل کر لی ہے:
+- **براؤزر آرکیٹیکچر**: براؤزر سسٹمز کے ساتھ ایکسٹینشنز کے انضمام کی گہری سمجھ
+- **کارکردگی پروفائلنگ**: ڈویلپر ٹولز استعمال کرتے ہوئے مسائل کی شناخت اور حل کرنے کی صلاحیت
+- **ایسنک پروگرامنگ**: جدید جاوا اسکرپٹ پیٹرنز برائے جوابدہ، نان بلاکنگ آپریشنز
+- **API انٹیگریشن**: بیرونی ڈیٹا حاصل کرنا، تصدیق اور غلطی کا انتظام
+- **بصری ڈیزائن**: متحرک UI اپڈیٹس اور Canvas پر مبنی گرافکس جنریشن
+- **پیغام رسانی**: ایکسٹینشن آرکیٹیکچرز میں اسکرپٹس کے درمیان مواصلت
+- **صارف کا تجربہ**: لوڈنگ اسٹیٹس، غلطی کا انتظام، اور بدیہی تعاملات
+- **پروڈکشن مہارتیں**: حقیقی دنیا میں تعیناتی کے لیے ٹیسٹنگ، ڈیبگنگ، اور آپٹیمائزیشن
+
+**حقیقی دنیا کی ایپلیکیشنز**: آپ کی ایکسٹینشن ڈیولپمنٹ کی مہارتیں براہ راست لاگو ہوتی ہیں:
+- **پروگریسو ویب ایپس**: اسی طرح کی آرکیٹیکچر اور کارکردگی کے پیٹرنز
+- **الیکٹران ڈیسک ٹاپ ایپس**: ویب ٹیکنالوجیز استعمال کرتے ہوئے کراس پلیٹ فارم ایپلیکیشنز
+- **موبائل ہائبرڈ ایپس**: Cordova/PhoneGap ڈیولپمنٹ ویب APIs استعمال کرتے ہوئے
+- **انٹرپرائز ویب ایپلیکیشنز**: پیچیدہ ڈیش بورڈ اور پروڈکٹیویٹی ٹولز
+- **Chrome DevTools ایکسٹینشنز**: جدید ڈویلپر ٹولنگ اور ڈیبگنگ
+- **ویب API انٹیگریشن**: کوئی بھی ایپلیکیشن جو بیرونی سروسز کے ساتھ مواصلت کرتی ہے
+
+**پیشہ ورانہ اثر**: آپ اب کر سکتے ہیں:
+- **بنائیں** پروڈکشن ریڈی براؤزر ایکسٹینشنز تصور سے تعیناتی تک
+- **آپٹیمائز کریں** ویب ایپلیکیشن کی کارکردگی انڈسٹری اسٹینڈرڈ پروفائلنگ ٹولز استعمال کرتے ہوئے
+- **آرکیٹیکٹ** قابل پیمائش سسٹمز مناسب علیحدگی کے ساتھ
+- **ڈیبگ کریں** پیچیدہ ایسنک آپریشنز اور کراس کانٹیکسٹ مواصلت
+- **تعاون کریں** اوپن سورس ایکسٹینشن پروجیکٹس اور براؤزر اسٹینڈرڈز میں
+
+**اگلے درجے کے مواقع**:
+- **Chrome Web Store ڈیولپر**: لاکھوں صارفین کے لیے ایکسٹینشنز شائع کریں
+- **ویب کارکردگی انجینئر**: آپٹیمائزیشن اور صارف کے تجربے میں مہارت حاصل کریں
+- **براؤزر پلیٹ فارم ڈیولپر**: براؤزر انجن ڈیولپمنٹ میں تعاون کریں
+- **ایکسٹینشن فریم ورک کریٹر**: ایسے ٹولز بنائیں جو دوسرے ڈویلپرز کی مدد کریں
+- **ڈیولپر ریلیشنز**: تعلیم اور مواد کی تخلیق کے ذریعے علم بانٹیں
+
+🌟 **کامیابی حاصل کی**: آپ نے ایک مکمل، فعال براؤزر ایکسٹینشن بنایا جو پیشہ ورانہ ڈیولپمنٹ کے طریقوں اور جدید ویب اسٹینڈرڈز کو ظاہر کرتا ہے!
 
 ## اسائنمنٹ
 
-[کسی سائٹ کا تجزیہ کریں](assignment.md)
+[سائٹ کی کارکردگی کا تجزیہ کریں](assignment.md)
 
 ---
 
-**ڈسکلیمر**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**اعلانِ لاتعلقی**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/6-space-game/1-introduction/README.md b/translations/ur/6-space-game/1-introduction/README.md
index ed56e349d8..ed31658f61 100644
--- a/translations/ur/6-space-game/1-introduction/README.md
+++ b/translations/ur/6-space-game/1-introduction/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "862f7f2ef320f6f8950fae379e6ece45",
-  "translation_date": "2025-10-22T15:11:27+00:00",
+  "original_hash": "a6332a7bb4d0be3bfd24199c83993777",
+  "translation_date": "2025-11-03T13:36:40+00:00",
   "source_file": "6-space-game/1-introduction/README.md",
   "language_code": "ur"
 }
 -->
-# اسپیس گیم بنائیں حصہ 1: تعارف
-
-![اسپیس گیم کی اینیمیشن گیم پلے دکھا رہی ہے](../../../../6-space-game/images/pewpew.gif)
-
-بالکل ناسا کے مشن کنٹرول کی طرح جو اسپیس لانچ کے دوران مختلف سسٹمز کو مربوط کرتا ہے، ہم ایک اسپیس گیم بنائیں گے جو یہ دکھائے گا کہ کس طرح ایک پروگرام کے مختلف حصے بغیر کسی رکاوٹ کے ایک ساتھ کام کر سکتے ہیں۔ کچھ ایسا بناتے ہوئے جسے آپ واقعی کھیل سکیں، آپ بنیادی پروگرامنگ تصورات سیکھیں گے جو کسی بھی سافٹ ویئر پروجیکٹ پر لاگو ہوتے ہیں۔
-
-ہم کوڈ کو منظم کرنے کے دو بنیادی طریقوں کا جائزہ لیں گے: وراثت (inheritance) اور ترکیب (composition)۔ یہ صرف تعلیمی تصورات نہیں ہیں – یہ وہی پیٹرنز ہیں جو ویڈیو گیمز سے لے کر بینکنگ سسٹمز تک سب کچھ طاقتور بناتے ہیں۔ ہم ایک کمیونیکیشن سسٹم بھی نافذ کریں گے جسے پب/سب کہا جاتا ہے، جو خلائی جہازوں میں استعمال ہونے والے کمیونیکیشن نیٹ ورکس کی طرح کام کرتا ہے، اور مختلف اجزاء کو بغیر کسی انحصار کے معلومات شیئر کرنے کی اجازت دیتا ہے۔
+# خلائی کھیل بنائیں حصہ 1: تعارف
+
+```mermaid
+journey
+    title Your Game Development Journey
+    section Foundation
+      Learn game architecture: 3: Student
+      Understand inheritance: 4: Student
+      Explore composition: 4: Student
+    section Communication
+      Build pub/sub system: 4: Student
+      Design event flow: 5: Student
+      Connect components: 5: Student
+    section Application
+      Create game objects: 5: Student
+      Implement patterns: 5: Student
+      Plan game structure: 5: Student
+```
 
-اس سیریز کے اختتام تک، آپ یہ سمجھ جائیں گے کہ ایسے ایپلیکیشنز کیسے بنائی جائیں جو بڑھ سکیں اور ترقی کر سکیں – چاہے آپ گیمز، ویب ایپلیکیشنز، یا کوئی اور سافٹ ویئر سسٹم تیار کر رہے ہوں۔
+![خلائی کھیل کی حرکت دکھا رہا ہے](../../../../6-space-game/images/pewpew.gif)
+
+جیسے ناسا کا مشن کنٹرول خلائی لانچ کے دوران مختلف نظاموں کو مربوط کرتا ہے، ہم ایک خلائی کھیل بنائیں گے جو یہ ظاہر کرے گا کہ کس طرح ایک پروگرام کے مختلف حصے بغیر کسی رکاوٹ کے ایک ساتھ کام کر سکتے ہیں۔ کچھ ایسا تخلیق کرتے ہوئے جسے آپ واقعی کھیل سکیں، آپ بنیادی پروگرامنگ تصورات سیکھیں گے جو کسی بھی سافٹ ویئر پروجیکٹ پر لاگو ہوتے ہیں۔
+
+ہم کوڈ کو منظم کرنے کے دو بنیادی طریقوں کا جائزہ لیں گے: وراثت اور ترکیب۔ یہ صرف تعلیمی تصورات نہیں ہیں – یہ وہی نمونے ہیں جو ویڈیو گیمز سے لے کر بینکنگ سسٹمز تک سب کچھ طاقت دیتے ہیں۔ ہم ایک مواصلاتی نظام بھی نافذ کریں گے جسے pub/sub کہا جاتا ہے جو خلائی جہاز میں استعمال ہونے والے مواصلاتی نیٹ ورکس کی طرح کام کرتا ہے، جس سے مختلف اجزاء کو معلومات کا اشتراک کرنے کی اجازت ملتی ہے بغیر انحصار پیدا کیے۔
+
+اس سیریز کے اختتام تک، آپ یہ سمجھ جائیں گے کہ ایسی ایپلیکیشنز کیسے بنائی جائیں جو پیمانے پر بڑھ سکیں اور ترقی کر سکیں – چاہے آپ گیمز، ویب ایپلیکیشنز، یا کوئی اور سافٹ ویئر سسٹم تیار کر رہے ہوں۔
+
+```mermaid
+mindmap
+  root((Game Architecture))
+    Object Organization
+      Inheritance
+      Composition
+      Class Hierarchies
+      Behavior Mixing
+    Communication Patterns
+      Pub/Sub System
+      Event Emitters
+      Message Passing
+      Loose Coupling
+    Game Objects
+      Properties (x, y)
+      Behaviors (move, collide)
+      Lifecycle Management
+      State Management
+    Design Patterns
+      Factory Functions
+      Observer Pattern
+      Component System
+      Event-Driven Architecture
+    Scalability
+      Modular Design
+      Maintainable Code
+      Testing Strategies
+      Performance Optimization
+```
 
 ## لیکچر سے پہلے کا کوئز
 
@@ -23,32 +70,71 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## گیم ڈیولپمنٹ میں وراثت اور ترکیب
 
-جب پروجیکٹس پیچیدہ ہوتے ہیں تو کوڈ کو منظم کرنا بہت اہم ہو جاتا ہے۔ جو ایک سادہ اسکرپٹ کے طور پر شروع ہوتا ہے وہ مناسب ساخت کے بغیر برقرار رکھنا مشکل ہو سکتا ہے – بالکل جیسے اپولو مشنز کو ہزاروں اجزاء کے درمیان محتاط ہم آہنگی کی ضرورت ہوتی ہے۔
+جیسے جیسے پروجیکٹس پیچیدگی میں بڑھتے ہیں، کوڈ کی تنظیم اہم ہو جاتی ہے۔ جو ایک سادہ اسکرپٹ کے طور پر شروع ہوتا ہے وہ مناسب ڈھانچے کے بغیر برقرار رکھنا مشکل ہو سکتا ہے – بالکل اسی طرح جیسے اپولو مشنز کو ہزاروں اجزاء کے درمیان محتاط ہم آہنگی کی ضرورت تھی۔
 
-ہم کوڈ کو منظم کرنے کے دو بنیادی طریقوں کا جائزہ لیں گے: وراثت اور ترکیب۔ ہر ایک کے اپنے الگ فوائد ہیں، اور دونوں کو سمجھنا مختلف حالات کے لیے صحیح طریقہ منتخب کرنے میں مدد کرتا ہے۔ ہم ان تصورات کو اپنے اسپیس گیم کے ذریعے ظاہر کریں گے، جہاں ہیروز، دشمن، پاور اپس، اور دیگر اشیاء کو مؤثر طریقے سے تعامل کرنا ہوگا۔
+ہم کوڈ کو منظم کرنے کے دو بنیادی طریقوں کا جائزہ لیں گے: وراثت اور ترکیب۔ ہر ایک کے الگ الگ فوائد ہیں، اور دونوں کو سمجھنا مختلف حالات کے لیے صحیح طریقہ منتخب کرنے میں مدد کرتا ہے۔ ہم ان تصورات کو اپنے خلائی کھیل کے ذریعے ظاہر کریں گے، جہاں ہیروز، دشمن، پاور اپس، اور دیگر اشیاء کو مؤثر طریقے سے بات چیت کرنی ہوگی۔
 
 ✅ سب سے مشہور پروگرامنگ کتابوں میں سے ایک [ڈیزائن پیٹرنز](https://en.wikipedia.org/wiki/Design_Patterns) کے بارے میں ہے۔
 
-کسی بھی گیم میں، آپ کے پاس `گیم آبجیکٹس` ہوتے ہیں – وہ انٹرایکٹو عناصر جو آپ کی گیم کی دنیا کو آباد کرتے ہیں۔ ہیروز، دشمن، پاور اپس، اور بصری اثرات سب گیم آبجیکٹس ہیں۔ ہر ایک مخصوص اسکرین کوآرڈینیٹس پر موجود ہوتا ہے جو `x` اور `y` ویلیوز کا استعمال کرتے ہوئے، بالکل جیسے کوآرڈینیٹ پلین پر پوائنٹس کو پلاٹ کرنا۔
+کسی بھی کھیل میں، آپ کے پاس `گیم آبجیکٹس` ہوتے ہیں – انٹرایکٹو عناصر جو آپ کی گیم کی دنیا کو آباد کرتے ہیں۔ ہیروز، دشمن، پاور اپس، اور بصری اثرات سب گیم آبجیکٹس ہیں۔ ہر ایک مخصوص اسکرین کوآرڈینیٹس پر موجود ہوتا ہے جو `x` اور `y` اقدار کا استعمال کرتے ہوئے پوائنٹس کو کوآرڈینیٹ طیارے پر پلاٹ کرنے کے مترادف ہے۔
 
-ان کے بصری اختلافات کے باوجود، یہ اشیاء اکثر بنیادی رویے شیئر کرتی ہیں:
+ان کے بصری اختلافات کے باوجود، یہ اشیاء اکثر بنیادی رویے کا اشتراک کرتی ہیں:
 
-- **یہ کہیں موجود ہیں** – ہر آبجیکٹ کے پاس x اور y کوآرڈینیٹس ہوتے ہیں تاکہ گیم جان سکے کہ اسے کہاں ڈرائنگ کرنا ہے
-- **بہت سے حرکت کر سکتے ہیں** – ہیروز دوڑتے ہیں، دشمن پیچھا کرتے ہیں، گولیاں اسکرین پر اڑتی ہیں
+- **وہ کہیں موجود ہیں** – ہر آبجیکٹ کے پاس x اور y کوآرڈینیٹس ہوتے ہیں تاکہ گیم کو معلوم ہو کہ اسے کہاں ڈرائنگ کرنا ہے
+- **بہت سے ارد گرد حرکت کر سکتے ہیں** – ہیروز دوڑتے ہیں، دشمن پیچھا کرتے ہیں، گولیاں اسکرین پر اڑتی ہیں
 - **ان کی زندگی کی مدت ہوتی ہے** – کچھ ہمیشہ کے لیے رہتے ہیں، دوسرے (جیسے دھماکے) مختصر وقت کے لیے ظاہر ہوتے ہیں اور غائب ہو جاتے ہیں
-- **یہ چیزوں پر ردعمل دیتے ہیں** – جب چیزیں ٹکراتی ہیں، پاور اپس جمع کیے جاتے ہیں، صحت کے بارز اپ ڈیٹ ہوتے ہیں
+- **وہ چیزوں پر ردعمل ظاہر کرتے ہیں** – جب چیزیں ٹکراتی ہیں، پاور اپس جمع کیے جاتے ہیں، صحت کی بارز اپ ڈیٹ ہوتی ہیں
 
-✅ Pac-Man جیسے گیم کے بارے میں سوچیں۔ کیا آپ اس گیم میں درج بالا چار آبجیکٹ اقسام کی شناخت کر سکتے ہیں؟
+✅ Pac-Man جیسے کھیل کے بارے میں سوچیں۔ کیا آپ اس کھیل میں درج بالا چار آبجیکٹ اقسام کی شناخت کر سکتے ہیں؟
+
+```mermaid
+classDiagram
+    class GameObject {
+        +x: number
+        +y: number
+        +type: string
+        +exists_somewhere()
+    }
+    
+    class MovableObject {
+        +moveTo(x, y)
+        +can_move_around()
+    }
+    
+    class TemporaryObject {
+        +lifespan: number
+        +has_lifespan()
+    }
+    
+    class InteractiveObject {
+        +onCollision()
+        +reacts_to_stuff()
+    }
+    
+    GameObject <|-- MovableObject
+    GameObject <|-- TemporaryObject
+    GameObject <|-- InteractiveObject
+    
+    MovableObject <|-- Hero
+    MovableObject <|-- Enemy
+    MovableObject <|-- Bullet
+    
+    TemporaryObject <|-- PowerUp
+    TemporaryObject <|-- Explosion
+    
+    InteractiveObject <|-- Collectible
+    InteractiveObject <|-- Obstacle
+```
 
 ### کوڈ کے ذریعے رویے کا اظہار
 
-اب جب کہ آپ سمجھ گئے ہیں کہ گیم آبجیکٹس کے مشترکہ رویے کیا ہیں، آئیے دیکھتے ہیں کہ ان رویوں کو جاوا اسکرپٹ میں کیسے نافذ کیا جائے۔ آپ آبجیکٹ کے رویے کو کلاسز یا انفرادی آبجیکٹس سے منسلک طریقوں کے ذریعے ظاہر کر سکتے ہیں، اور منتخب کرنے کے لیے کئی طریقے ہیں۔
+اب جب کہ آپ سمجھ گئے ہیں کہ گیم آبجیکٹس کے مشترکہ رویے کیا ہیں، آئیے ان رویوں کو جاوا اسکرپٹ میں نافذ کرنے کے طریقے کا جائزہ لیتے ہیں۔ آپ کلاسز یا انفرادی آبجیکٹس سے منسلک طریقوں کے ذریعے آبجیکٹ کے رویے کا اظہار کر سکتے ہیں، اور منتخب کرنے کے لیے کئی طریقے ہیں۔
 
 **کلاس پر مبنی طریقہ**
 
-کلاسز اور وراثت گیم آبجیکٹس کو منظم کرنے کے لیے ایک منظم طریقہ فراہم کرتے ہیں۔ کارل لینیئس کے تیار کردہ ٹیکسونومک کلاسیفیکیشن سسٹم کی طرح، آپ ایک بنیادی کلاس سے شروع کرتے ہیں جس میں عام خصوصیات ہوتی ہیں، پھر خصوصی کلاسز بناتے ہیں جو ان بنیادی اصولوں کو وراثت میں لے کر مخصوص صلاحیتیں شامل کرتے ہیں۔
+کلاسز اور وراثت گیم آبجیکٹس کو منظم کرنے کے لیے ایک منظم طریقہ فراہم کرتے ہیں۔ کارل لینیئس کے تیار کردہ ٹیکسونومک درجہ بندی کے نظام کی طرح، آپ عام خصوصیات پر مشتمل ایک بنیادی کلاس کے ساتھ شروع کرتے ہیں، پھر خصوصی کلاسز بناتے ہیں جو ان بنیادی اصولوں کو وراثت میں حاصل کرتے ہیں جبکہ مخصوص صلاحیتوں کو شامل کرتے ہیں۔
 
-✅ وراثت ایک اہم تصور ہے جسے سمجھنا ضروری ہے۔ [MDN کے وراثت پر مضمون](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) پر مزید جانیں۔
+✅ وراثت کو سمجھنا ایک اہم تصور ہے۔ [وراثت کے بارے میں MDN کے مضمون](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) پر مزید جانیں۔
 
 یہاں یہ ہے کہ آپ کلاسز اور وراثت کا استعمال کرتے ہوئے گیم آبجیکٹس کو کیسے نافذ کر سکتے ہیں:
 
@@ -63,10 +149,10 @@ class GameObject {
 }
 ```
 
-**آئیے اسے مرحلہ وار توڑتے ہیں:**
+**آئیے اسے قدم بہ قدم توڑتے ہیں:**
 - ہم ایک بنیادی ٹیمپلیٹ بنا رہے ہیں جسے ہر گیم آبجیکٹ استعمال کر سکتا ہے
 - کنسٹرکٹر محفوظ کرتا ہے کہ آبجیکٹ کہاں ہے (`x`, `y`) اور یہ کس قسم کی چیز ہے
-- یہ وہ بنیاد بن جاتی ہے جس پر آپ کے تمام گیم آبجیکٹس تعمیر ہوں گے
+- یہ وہ بنیاد بن جاتا ہے جس پر آپ کے تمام گیم آبجیکٹس تعمیر ہوں گے
 
 ```javascript
 // Step 2: Add movement capability through inheritance
@@ -84,8 +170,8 @@ class Movable extends GameObject {
 ```
 
 **اوپر میں، ہم نے:**
-- **گیم آبجیکٹ کلاس کو بڑھایا** تاکہ حرکت کی فعالیت شامل کی جا سکے
-- **پیرنٹ کنسٹرکٹر کو `super()` کے ذریعے کال کیا** تاکہ وراثت میں لی گئی خصوصیات کو ابتدائی بنایا جا سکے
+- **GameObject کلاس کو بڑھایا** تاکہ حرکت کی فعالیت شامل کی جا سکے
+- **پیرنٹ کنسٹرکٹر کو `super()` کا استعمال کرتے ہوئے کال کیا** تاکہ وراثت میں حاصل کردہ خصوصیات کو شروع کیا جا سکے
 - **ایک `moveTo()` طریقہ شامل کیا** جو آبجیکٹ کی پوزیشن کو اپ ڈیٹ کرتا ہے
 
 ```javascript
@@ -111,16 +197,16 @@ const tree = new Tree(10, 15);
 ```
 
 **ان تصورات کو سمجھنا:**
-- **مخصوص آبجیکٹ اقسام بناتا ہے** جو مناسب رویے وراثت میں لیتے ہیں
-- **دکھاتا ہے** کہ وراثت منتخب خصوصیات کو شامل کرنے کی اجازت دیتی ہے
+- **مخصوص آبجیکٹ اقسام تخلیق کرتا ہے** جو مناسب رویے وراثت میں حاصل کرتے ہیں
+- **دکھاتا ہے** کہ وراثت منتخب خصوصیت کو شامل کرنے کی اجازت دیتا ہے
 - **ظاہر کرتا ہے** کہ ہیروز حرکت کر سکتے ہیں جبکہ درخت ساکن رہتے ہیں
-- **وضاحت کرتا ہے** کہ کلاس ہائیرارکی نامناسب اعمال کو روکتی ہے
+- **وضاحت کرتا ہے** کہ کلاس کی درجہ بندی نامناسب اعمال کو روکتی ہے
 
-✅ چند منٹ نکال کر Pac-Man کے ہیرو (مثلاً Inky، Pinky یا Blinky) کو دوبارہ تصور کریں اور یہ کیسے جاوا اسکرپٹ میں لکھا جائے گا۔
+✅ چند منٹ نکالیں اور Pac-Man کے ہیرو (مثال کے طور پر Inky، Pinky یا Blinky) کو دوبارہ تصور کریں اور یہ جاوا اسکرپٹ میں کیسے لکھا جائے گا۔
 
 **ترکیب کا طریقہ**
 
-ترکیب ایک ماڈیولر ڈیزائن فلسفہ کی پیروی کرتی ہے، بالکل جیسے انجینئرز خلائی جہاز کو قابل تبادلہ اجزاء کے ساتھ ڈیزائن کرتے ہیں۔ پیرنٹ کلاس سے وراثت لینے کے بجائے، آپ مخصوص رویوں کو یکجا کرتے ہیں تاکہ ایسے آبجیکٹس بنائیں جن میں بالکل وہی فعالیت ہو جس کی انہیں ضرورت ہو۔ یہ طریقہ سخت درجہ بندی کی حدود کے بغیر لچک فراہم کرتا ہے۔
+ترکیب ایک ماڈیولر ڈیزائن فلسفہ کی پیروی کرتی ہے، بالکل اسی طرح جیسے انجینئرز خلائی جہاز کو قابل تبادلہ اجزاء کے ساتھ ڈیزائن کرتے ہیں۔ پیرنٹ کلاس سے وراثت حاصل کرنے کے بجائے، آپ مخصوص رویوں کو یکجا کرتے ہیں تاکہ آبجیکٹس کو بالکل وہی فعالیت فراہم کی جا سکے جس کی انہیں ضرورت ہے۔ یہ طریقہ سخت درجہ بندی کی حدود کے بغیر لچک پیش کرتا ہے۔
 
 ```javascript
 // Step 1: Create base behavior objects
@@ -140,7 +226,7 @@ const movable = {
 
 **یہ کوڈ کیا کرتا ہے:**
 - **ایک بنیادی `gameObject` کی وضاحت کرتا ہے** جس میں پوزیشن اور قسم کی خصوصیات ہیں
-- **ایک الگ `movable` رویے کا آبجیکٹ بناتا ہے** جس میں حرکت کی فعالیت ہے
+- **ایک الگ `movable` رویے کا آبجیکٹ تخلیق کرتا ہے** جس میں حرکت کی فعالیت ہے
 - **تشویشات کو الگ کرتا ہے** پوزیشن ڈیٹا اور حرکت کی منطق کو آزاد رکھ کر
 
 ```javascript
@@ -168,10 +254,10 @@ function createStatic(x, y, type) {
 ```
 
 **اوپر میں، ہم نے:**
-- **بیس آبجیکٹ کی خصوصیات کو حرکت کے رویے کے ساتھ یکجا کیا** اسپریڈ سینٹیکس کا استعمال کرتے ہوئے
-- **فیکٹری فنکشنز بنائے** جو حسب ضرورت آبجیکٹس واپس کرتے ہیں
-- **لچکدار آبجیکٹ تخلیق کو فعال کیا** بغیر سخت کلاس ہائیرارکی کے
-- **آبجیکٹس کو بالکل وہی رویے رکھنے کی اجازت دی** جس کی انہیں ضرورت ہے
+- **بیس آبجیکٹ کی خصوصیات کو حرکت کے رویے کے ساتھ یکجا کیا** اسپریڈ نحو کا استعمال کرتے ہوئے
+- **فیکٹری فنکشنز تخلیق کیے** جو حسب ضرورت آبجیکٹس واپس کرتے ہیں
+- **لچکدار آبجیکٹ تخلیق کو فعال کیا** بغیر سخت کلاس کی درجہ بندی کے
+- **آبجیکٹس کو بالکل وہی رویے فراہم کیے** جس کی انہیں ضرورت ہے
 
 ```javascript
 // Step 4: Create and use your composed objects
@@ -183,43 +269,103 @@ const tree = createStatic(0, 0, 'Tree');
 ```
 
 **یاد رکھنے کے اہم نکات:**
-- **آبجیکٹس کو ترکیب کرتا ہے** رویوں کو مکس کر کے بجائے وراثت لینے کے
-- **زیادہ لچک فراہم کرتا ہے** سخت وراثتی درجہ بندی کے مقابلے میں
-- **آبجیکٹس کو بالکل وہی خصوصیات رکھنے کی اجازت دیتا ہے** جس کی انہیں ضرورت ہے
-- **جدید جاوا اسکرپٹ اسپریڈ سینٹیکس کا استعمال کرتا ہے** صاف آبجیکٹ کے امتزاج کے لیے
+- **آبجیکٹس کو ترکیب کرتا ہے** رویے کو ملانے کے ذریعے بجائے وراثت حاصل کرنے کے
+- **سخت وراثت کی درجہ بندی کے مقابلے میں زیادہ لچک فراہم کرتا ہے**
+- **آبجیکٹس کو بالکل وہی خصوصیات فراہم کرتا ہے** جس کی انہیں ضرورت ہے
+- **صاف آبجیکٹ امتزاج کے لیے جدید جاوا اسکرپٹ اسپریڈ نحو کا استعمال کرتا ہے**
 ```
 
 **Which Pattern Should You Choose?**
 
-> 💡 **Pro Tip**: Both patterns have their place in modern JavaScript development. Classes work well for clearly defined hierarchies, while composition shines when you need maximum flexibility.
-> 
-**Here's when to use each approach:**
-- **Choose** inheritance when you have clear "is-a" relationships (a Hero *is-a* Movable object)
-- **Select** composition when you need "has-a" relationships (a Hero *has* movement abilities)
-- **Consider** your team's preferences and project requirements
-- **Remember** that you can mix both approaches in the same application
-
-## Communication Patterns: The Pub/Sub System
-
-As applications grow complex, managing communication between components becomes challenging. The publish-subscribe pattern (pub/sub) solves this problem using principles similar to radio broadcasting – one transmitter can reach multiple receivers without knowing who's listening.
+**Which Pattern Should You Choose?**
 
-Consider what happens when a hero takes damage: the health bar updates, sound effects play, visual feedback appears. Rather than coupling the hero object directly to these systems, pub/sub allows the hero to broadcast a "damage taken" message. Any system that needs to respond can subscribe to this message type and react accordingly.
+```mermaid
+quadrantChart
+    title Code Organization Patterns
+    x-axis Simple --> Complex
+    y-axis Rigid --> Flexible
+    quadrant-1 Advanced Composition
+    quadrant-2 Hybrid Approaches
+    quadrant-3 Basic Inheritance
+    quadrant-4 Modern Composition
+    
+    Class Inheritance: [0.3, 0.2]
+    Interface Implementation: [0.6, 0.4]
+    Mixin Patterns: [0.7, 0.7]
+    Pure Composition: [0.8, 0.9]
+    Factory Functions: [0.5, 0.8]
+    Prototype Chain: [0.4, 0.3]
+```
 
-✅ **Pub/Sub** stands for 'publish-subscribe'
+> 💡 **پرو ٹپ**: دونوں نمونے جدید جاوا اسکرپٹ ڈیولپمنٹ میں اپنی جگہ رکھتے ہیں۔ کلاسز واضح طور پر بیان کردہ درجہ بندی کے لیے اچھی طرح کام کرتی ہیں، جبکہ ترکیب زیادہ سے زیادہ لچک کی ضرورت کے وقت چمکتی ہے۔
+> 
+**یہاں کب ہر طریقہ استعمال کرنا ہے:**
+- **وراثت کا انتخاب کریں** جب آپ کے پاس واضح "is-a" تعلقات ہوں (ایک ہیرو *is-a* Movable آبجیکٹ)
+- **ترکیب کا انتخاب کریں** جب آپ کو "has-a" تعلقات کی ضرورت ہو (ایک ہیرو *has* حرکت کی صلاحیتیں)
+- **اپنی ٹیم کی ترجیحات اور پروجیکٹ کی ضروریات پر غور کریں**
+- **یاد رکھیں** کہ آپ ایک ہی ایپلیکیشن میں دونوں طریقوں کو ملا سکتے ہیں
+
+### 🔄 **تعلیمی جائزہ**
+**آبجیکٹ تنظیم کی سمجھ**: مواصلاتی نمونوں کی طرف بڑھنے سے پہلے، یقینی بنائیں کہ آپ:
+- ✅ وراثت اور ترکیب کے فرق کی وضاحت کر سکتے ہیں
+- ✅ کلاسز بمقابلہ فیکٹری فنکشنز کے استعمال کے وقت کی شناخت کر سکتے ہیں
+- ✅ سمجھ سکتے ہیں کہ وراثت میں `super()` کلیدی لفظ کیسے کام کرتا ہے
+- ✅ گیم ڈیولپمنٹ کے لیے ہر طریقہ کے فوائد کو پہچان سکتے ہیں
+
+**خود کا فوری ٹیسٹ**: آپ ایک ایسا اڑنے والا دشمن کیسے بنائیں گے جو حرکت کر سکتا ہے اور اڑ سکتا ہے؟
+- **وراثت کا طریقہ**: `class FlyingEnemy extends Movable`
+- **ترکیب کا طریقہ**: `{ ...movable, ...flyable, ...gameObject }`
+
+**حقیقی دنیا کا تعلق**: یہ نمونے ہر جگہ ظاہر ہوتے ہیں:
+- **React Components**: Props (ترکیب) بمقابلہ کلاس وراثت
+- **گیم انجنز**: Entity-component systems ترکیب کا استعمال کرتے ہیں
+- **موبائل ایپس**: UI فریم ورک اکثر وراثت کی درجہ بندی کا استعمال کرتے ہیں
+
+## مواصلاتی نمونے: Pub/Sub نظام
+
+جیسے جیسے ایپلیکیشنز پیچیدہ ہوتی ہیں، اجزاء کے درمیان مواصلات کا انتظام کرنا چیلنجنگ ہو جاتا ہے۔ پبلش-سبسکرائب نمونہ (pub/sub) اس مسئلے کو ریڈیو براڈکاسٹنگ کے اصولوں کا استعمال کرتے ہوئے حل کرتا ہے – ایک ٹرانسمیٹر متعدد ریسیورز تک پہنچ سکتا ہے بغیر یہ جانے کہ کون سن رہا ہے۔
+
+سوچیں کہ جب ایک ہیرو کو نقصان پہنچتا ہے تو کیا ہوتا ہے: صحت کی بار اپ ڈیٹ ہوتی ہے، صوتی اثرات چلتے ہیں، بصری تاثرات ظاہر ہوتے ہیں۔ ہیرو آبجیکٹ کو براہ راست ان سسٹمز سے جوڑنے کے بجائے، pub/sub ہیرو کو "نقصان پہنچا" پیغام نشر کرنے کی اجازت دیتا ہے۔ کوئی بھی سسٹم جسے جواب دینے کی ضرورت ہو وہ اس پیغام کی قسم کو سبسکرائب کر سکتا ہے اور اس کے مطابق ردعمل دے سکتا ہے۔
+
+✅ **Pub/Sub** کا مطلب ہے 'پبلش-سبسکرائب'
+
+```mermaid
+flowchart TD
+    A[Hero Takes Damage] --> B[Publish: HERO_DAMAGED]
+    B --> C[Event System]
+    
+    C --> D[Health Bar Subscriber]
+    C --> E[Sound System Subscriber]
+    C --> F[Visual Effects Subscriber]
+    C --> G[Achievement System Subscriber]
+    
+    D --> H[Update Health Display]
+    E --> I[Play Damage Sound]
+    F --> J[Show Red Flash]
+    G --> K[Check Survival Achievements]
+    
+    style A fill:#ffebee
+    style B fill:#e1f5fe
+    style C fill:#e8f5e8
+    style H fill:#fff3e0
+    style I fill:#fff3e0
+    style J fill:#fff3e0
+    style K fill:#fff3e0
+```
 
-### Understanding the Pub/Sub Architecture
+### Pub/Sub آرکیٹیکچر کو سمجھنا
 
-The pub/sub pattern keeps different parts of your application loosely coupled, meaning they can work together without being directly dependent on each other. This separation makes your code more maintainable, testable, and flexible to changes.
+Pub/Sub نمونہ آپ کی ایپلیکیشن کے مختلف حصوں کو ڈھیلے سے جوڑ کر رکھتا ہے، یعنی وہ ایک دوسرے پر براہ راست انحصار کیے بغیر ایک ساتھ کام کر سکتے ہیں۔ یہ علیحدگی آپ کے کوڈ کو زیادہ قابل انتظام، قابل آزمائش، اور تبدیلیوں کے لیے لچکدار بناتی ہے۔
 
-**The key players in pub/sub:**
-- **Messages** – Simple text labels like `'PLAYER_SCORED'` that describe what happened (plus any extra info)
-- **Publishers** – The objects that shout out "Something happened!" to anyone who's listening
-- **Subscribers** – The objects that say "I care about that event" and react when it happens
-- **Event System** – The middleman that makes sure messages get to the right listeners
+**Pub/Sub کے کلیدی کردار:**
+- **پیغامات** – سادہ ٹیکسٹ لیبلز جیسے `'PLAYER_SCORED'` جو بتاتے ہیں کہ کیا ہوا (پلس کوئی اضافی معلومات)
+- **پبلشرز** – وہ آبجیکٹس جو "کچھ ہوا!" کسی کو بھی جو سن رہا ہو، بتاتے ہیں
+- **سبسکرائبرز** – وہ آبجیکٹس جو کہتے ہیں "مجھے اس ایونٹ کی پرواہ ہے" اور جب یہ ہوتا ہے تو ردعمل دیتے ہیں
+- **ایونٹ سسٹم** – درمیانی شخص جو یقینی بناتا ہے کہ پیغامات صحیح سننے والوں تک پہنچیں
 
-### Building an Event System
+### ایونٹ سسٹم بنانا
 
-Let's create a simple but powerful event system that demonstrates these concepts:
+آئیے ایک سادہ لیکن طاقتور ایونٹ سسٹم بنائیں جو ان تصورات کو ظاہر کرتا ہے:
 
 ```javascript
 // Step 1: Create the EventEmitter class
@@ -247,16 +393,16 @@ class EventEmitter {
 }
 ```
 
-**یہاں کیا ہوتا ہے اسے توڑتے ہیں:**
-- **ایک مرکزی ایونٹ مینجمنٹ سسٹم بناتا ہے** ایک سادہ کلاس کا استعمال کرتے ہوئے
-- **لسنرز کو ایک آبجیکٹ میں ذخیرہ کرتا ہے** پیغام کی قسم کے لحاظ سے منظم
-- **نئے لسنرز کو رجسٹر کرتا ہے** `on()` طریقہ استعمال کرتے ہوئے
-- **پیغامات کو تمام دلچسپی رکھنے والے لسنرز تک نشر کرتا ہے** `emit()` طریقہ استعمال کرتے ہوئے
-- **اختیاری ڈیٹا پے لوڈز کی حمایت کرتا ہے** متعلقہ معلومات پاس کرنے کے لیے
+**یہاں کیا ہوتا ہے:**
+- **ایک مرکزی ایونٹ مینجمنٹ سسٹم تخلیق کرتا ہے** ایک سادہ کلاس کا استعمال کرتے ہوئے
+- **پیغام کی قسم کے لحاظ سے منظم کردہ ایک آبجیکٹ میں سننے والوں کو ذخیرہ کرتا ہے**
+- **نئے سننے والوں کو `on()` طریقہ استعمال کرتے ہوئے رجسٹر کرتا ہے**
+- **پیغامات کو تمام دلچسپی رکھنے والے سننے والوں تک نشر کرتا ہے** `emit()` کا استعمال کرتے ہوئے
+- **اختیاری ڈیٹا پے لوڈز کی حمایت کرتا ہے** متعلقہ معلومات منتقل کرنے کے لیے
 
 ### سب کچھ ایک ساتھ رکھنا: ایک عملی مثال
 
-ٹھیک ہے، آئیے اسے عملی طور پر دیکھتے ہیں! ہم ایک سادہ حرکت کا نظام بنائیں گے جو دکھائے گا کہ پب/سب کس طرح صاف اور لچکدار ہو سکتا ہے:
+ٹھیک ہے، آئیے اسے عمل میں دیکھتے ہیں! ہم ایک سادہ حرکت کا نظام بنائیں گے جو دکھائے گا کہ pub/sub کتنا صاف اور لچکدار ہو سکتا ہے:
 
 ```javascript
 // Step 1: Define your message types
@@ -272,9 +418,9 @@ const hero = createHero(0, 0);
 ```
 
 **یہ کوڈ کیا کرتا ہے:**
-- **ایک کانسٹنٹس آبجیکٹ کی وضاحت کرتا ہے** پیغام کے ناموں میں غلطیوں کو روکنے کے لیے
-- **ایک ایونٹ ایمیٹر انسٹینس بناتا ہے** تمام کمیونیکیشن کو ہینڈل کرنے کے لیے
-- **ہیرو آبجیکٹ کو ابتدائی پوزیشن پر شروع کرتا ہے**
+- **ایک کانسٹنٹس آبجیکٹ کی وضاحت کرتا ہے** پیغام کے ناموں میں ٹائپوز کو روکنے کے لیے
+- **ایک ایونٹ ایمیٹر انسٹینس تخلیق کرتا ہے** تمام مواصلات کو ہینڈل کرنے کے لیے
+- **ایک ہیرو آبجیکٹ کو ابتدائی پوزیشن پر شروع کرتا ہے**
 
 ```javascript
 // Step 3: Set up event listeners (subscribers)
@@ -290,9 +436,9 @@ eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
 ```
 
 **اوپر میں، ہم نے:**
-- **ایونٹ لسنرز رجسٹر کیے** جو حرکت کے پیغامات پر ردعمل دیتے ہیں
-- **ہیرو کی پوزیشن کو اپ ڈیٹ کیا** حرکت کی سمت کی بنیاد پر
-- **کنسول لاگنگ شامل کی** ہیرو کی پوزیشن میں تبدیلیوں کو ٹریک کرنے کے لیے
+- **ایونٹ سننے والوں کو رجسٹر کیا** جو حرکت کے پیغامات پر ردعمل دیتے ہیں
+- **ہیرو کی پوزیشن کو حرکت کی سمت کے مطابق اپ ڈیٹ کیا**
+- **ہیرو کی پوزیشن میں تبدیلیوں کو ٹریک کرنے کے لیے کنسول لاگنگ شامل کی**
 - **حرکت کی منطق کو ان پٹ ہینڈلنگ سے الگ کیا**
 
 ```javascript
@@ -311,59 +457,183 @@ window.addEventListener('keydown', (event) => {
 
 **ان تصورات کو سمجھنا:**
 - **کی بورڈ ان پٹ کو گیم ایونٹس سے جوڑتا ہے** بغیر سخت جوڑ کے
-- **ان پٹ سسٹم کو گیم آبجیکٹس کے ساتھ بالواسطہ بات چیت کرنے کی اجازت دیتا ہے**
+- **ان پٹ سسٹم کو گیم آبجیکٹس کے ساتھ بالواسطہ بات چیت کرنے کے قابل بناتا ہے**
 - **متعدد سسٹمز کو ایک ہی کی بورڈ ایونٹس پر ردعمل دینے کی اجازت دیتا ہے**
 - **کی بائنڈنگ کو تبدیل کرنا یا نئے ان پٹ طریقے شامل کرنا آسان بناتا ہے**
 
-> 💡 **پرو ٹپ**: اس پیٹرن کی خوبصورتی لچک میں ہے! آپ آسانی سے مزید ایونٹ لسنرز شامل کر کے ساؤنڈ ایفیکٹس، اسکرین شیک، یا پارٹیکل ایفیکٹس شامل کر سکتے ہیں – موجودہ کی بورڈ یا حرکت کے کوڈ کو تبدیل کرنے کی ضرورت نہیں۔
+```mermaid
+sequenceDiagram
+    participant User
+    participant Keyboard
+    participant EventEmitter
+    participant Hero
+    participant SoundSystem
+    participant Camera
+    
+    User->>Keyboard: Presses ArrowLeft
+    Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
+    EventEmitter->>Hero: Move left 5 pixels
+    EventEmitter->>SoundSystem: Play footstep sound
+    EventEmitter->>Camera: Follow hero
+    
+    Hero->>Hero: Update position
+    SoundSystem->>SoundSystem: Play audio
+    Camera->>Camera: Adjust viewport
+```
+
+> 💡 **پرو ٹپ**: اس نمونے کی خوبصورتی لچک میں ہے! آپ آسانی سے صوتی اثرات، اسکرین شیک، یا پارٹیکل اثرات شامل کر سکتے ہیں صرف مزید ایونٹ سننے والوں کو شامل کر کے – موجودہ کی بورڈ یا حرکت کے کوڈ میں ترمیم کرنے کی ضرورت نہیں۔
 > 
-**یہ طریقہ آپ کو کیوں پسند آئے گا:**
+**یہاں کیوں آپ کو یہ طریقہ پسند آئے گا:**
 - نئی خصوصیات شامل کرنا بہت آسان ہو جاتا ہے – بس ان ایونٹس کو سنیں جن کی آپ کو پرواہ ہے
-- ایک ہی ایونٹ پر متعدد چیزیں ردعمل دے سکتی ہیں بغیر ایک دوسرے پر اثر ڈالے
+- متعدد چیزیں ایک ہی ایونٹ پر ردعمل دے سکتی ہیں بغیر ایک دوسرے پر اثر ڈالے
 - ٹیسٹنگ بہت آسان ہو جاتی ہے کیونکہ ہر حصہ آزادانہ طور پر کام کرتا ہے
-- جب کچھ خراب ہوتا ہے، تو آپ کو بالکل معلوم ہوتا ہے کہ کہاں دیکھنا ہے
+- جب کچھ خراب ہوتا ہے، آپ کو بالکل معلوم ہوتا ہے کہ کہاں دیکھنا ہے
 
-### پب/سب مؤثر طریقے سے کیسے اسکیل کرتا ہے
+### Pub/Sub مؤثر طریقے سے پیمانے پر کیوں کام کرتا ہے
 
-پب/سب پیٹرن ایپلیکیشنز کے پیچیدہ ہونے کے ساتھ سادگی کو برقرار رکھتا ہے۔ چاہے درجنوں دشمنوں کا انتظام کرنا ہو، متحرک UI اپ ڈیٹس، یا ساؤنڈ سسٹمز، پیٹرن بغیر کسی آرکیٹیکچرل تبدیلی کے بڑھتی ہوئی اسکیل کو ہینڈل کرتا ہے۔ نئی خصوصیات موجودہ ایونٹ سسٹم میں بغیر کسی اثر کے ضم ہو جاتی ہیں۔
+Pub/Sub نمونہ ایپلیکیشنز کے پیچیدہ ہونے کے ساتھ سادگی کو برقرار رکھتا ہے۔ چاہے درجنوں دشمنوں کا انتظام کرنا ہو، متحرک UI اپ ڈیٹس، یا صوتی سسٹمز، نمونہ بغیر کسی آرکیٹیکچرل تبدیلی کے بڑھتے ہوئے پیمانے کو سنبھالتا ہے۔ نئی خصوصیات موجودہ ایونٹ سسٹم میں ضم ہو جاتی ہیں بغیر قائم شدہ فعالیت کو متاثر کیے۔
 
-> ⚠️ **عام غلطی**: شروع میں بہت زیادہ مخصوص پیغام کی اقسام نہ بنائیں۔ وسیع اقسام سے شروع کریں اور جیسے جیسے آپ کے گیم کی ضروریات واضح ہوں، انہیں بہتر بنائیں۔
+> ⚠️ **عام غلطی**: ابتدائی طور پر بہت زیادہ مخصوص پیغام کی اقسام نہ بنائیں۔ وسیع زمرے سے شروع کریں اور جیسے جیسے آپ کے کھیل کی ضروریات واضح ہوں انہیں بہتر بنائیں۔
 > 
-**بہترین طریقے جو اپنانے چاہئیں:**
-- **متعلقہ پیغامات کو منطقی اقسام میں گروپ کرتا ہے**
+**عمل کرنے کے بہترین طریقے:**
+- **متعلقہ پیغامات کو منطقی زمرے میں گروپ کرتا ہے**
 - **وضاحتی نام استعمال کرتا ہے** جو واضح طور پر بتاتے ہیں کہ کیا ہوا
 - **پیغام کے پے لوڈز کو سادہ اور مرکوز رکھتا ہے**
-- **اپنے پیغام کی اقسام کو دستاویزی بناتا ہے** ٹیم کے تعاون کے لیے
-
----
+- **اپنی پیغام کی اقسام کو دستاویز کرتا ہے** ٹیم کے تعاون کے لیے
 
-## GitHub Copilot ایجنٹ چیلنج 🚀
+### 🔄 **تعلیمی جائزہ**
+**ایونٹ پر مبنی آرکیٹیکچر کی سمجھ**: مکمل سسٹم کی اپنی گرفت کی تصدیق کریں:
+- ✅ Pub/Sub نمونہ اجزاء کے درمیان سخت جوڑ کو کیسے روکتا ہے؟
+- ✅ ای
+سوچیں کہ پب-سب پیٹرن گیم آرکیٹیکچر کو کیسے بہتر بنا سکتا ہے۔ ان اجزاء کی نشاندہی کریں جو ایونٹس جاری کریں اور نظام کو جواب دینے کا طریقہ طے کریں۔ ایک گیم کا تصور ڈیزائن کریں اور اس کے اجزاء کے درمیان مواصلاتی پیٹرنز کا نقشہ بنائیں۔
 
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+## لیکچر کے بعد کا کوئز
 
-**تفصیل:** وراثت اور پب/سب پیٹرن دونوں کا استعمال کرتے ہوئے ایک سادہ گیم آبجیکٹ سسٹم بنائیں۔ آپ ایک بنیادی گیم نافذ کریں گے جہاں مختلف آبجیکٹس ایونٹس کے ذریعے ایک دوسرے کے بارے میں براہ راست جانے بغیر بات چیت کر سکتے ہیں۔
+[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/30)
 
-**پرومپٹ:** درج ذیل ضروریات کے ساتھ جاوا اسکرپٹ گیم سسٹم بنائیں: 1) x, y کوآرڈینیٹس اور ایک قسم کی خصوصیت کے ساتھ ایک بنیادی GameObject کلاس بنائیں۔ 2) ایک Hero کلاس بنائیں جو GameObject کو بڑھائے اور حرکت کر سکے۔ 3) ایک Enemy کلاس بنائیں جو GameObject کو بڑھائے اور ہیرو کا پیچھا کر سکے۔ 4) پب/سب پیٹرن کے لیے ایک EventEmitter کلاس نافذ کریں۔ 5) ایونٹ لسنرز سیٹ کریں تاکہ جب ہیرو حرکت کرے، قریبی دشمن 'HERO_MOVED' ایونٹ وصول کریں اور ہیرو کی طرف حرکت کرنے کے لیے اپنی پوزیشن اپ ڈیٹ کریں۔ کنسول لاگ اسٹیٹمنٹس شامل کریں تاکہ آبجیکٹس کے درمیان کمیونیکیشن دکھائی دے۔
+## جائزہ اور خود مطالعہ
 
-[ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
+پب/سب کے بارے میں مزید جاننے کے لیے [یہ پڑھیں](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon)۔
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] کسی بھی HTML5 گیم کو آن لائن کھولیں اور اس کے کوڈ کو DevTools کے ذریعے دیکھیں
+- [ ] ایک سادہ HTML5 کینوس عنصر بنائیں اور ایک بنیادی شکل بنائیں
+- [ ] `setInterval` استعمال کرکے ایک سادہ اینیمیشن لوپ بنانے کی کوشش کریں
+- [ ] کینوس API دستاویزات کو دیکھیں اور ایک ڈرائنگ میتھڈ آزمائیں
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] لیکچر کے بعد کا کوئز مکمل کریں اور گیم ڈیولپمنٹ کے تصورات کو سمجھیں
+- [ ] اپنے گیم پروجیکٹ کا ڈھانچہ HTML، CSS، اور JavaScript فائلز کے ساتھ ترتیب دیں
+- [ ] ایک بنیادی گیم لوپ بنائیں جو مسلسل اپڈیٹ اور رینڈر کرے
+- [ ] کینوس پر اپنے پہلے گیم اسپریٹس ڈرائنگ کریں
+- [ ] تصاویر اور آوازوں کے لیے بنیادی اثاثہ لوڈنگ نافذ کریں
+
+### 📅 **آپ کی ہفتہ بھر کی گیم تخلیق**
+- [ ] تمام منصوبہ بند خصوصیات کے ساتھ مکمل اسپیس گیم بنائیں
+- [ ] گرافکس، ساؤنڈ ایفیکٹس، اور ہموار اینیمیشنز کو بہتر بنائیں
+- [ ] گیم اسٹیٹس نافذ کریں (اسٹارٹ اسکرین، گیم پلے، گیم اوور)
+- [ ] اسکورنگ سسٹم اور پلیئر کی پیشرفت کو ٹریک کریں
+- [ ] اپنی گیم کو مختلف ڈیوائسز پر ریسپانسیو اور ایکسیسبل بنائیں
+- [ ] اپنی گیم کو آن لائن شیئر کریں اور پلیئرز سے فیڈبیک حاصل کریں
+
+### 🌟 **آپ کی مہینہ بھر کی گیم ڈیولپمنٹ**
+- [ ] مختلف انواع اور میکینکس کو دریافت کرتے ہوئے متعدد گیمز بنائیں
+- [ ] Phaser یا Three.js جیسے گیم ڈیولپمنٹ فریم ورک سیکھیں
+- [ ] اوپن سورس گیم ڈیولپمنٹ پروجیکٹس میں تعاون کریں
+- [ ] جدید گیم پروگرامنگ پیٹرنز اور آپٹیمائزیشن میں مہارت حاصل کریں
+- [ ] اپنی گیم ڈیولپمنٹ مہارتوں کو ظاہر کرنے کے لیے ایک پورٹ فولیو بنائیں
+- [ ] گیم ڈیولپمنٹ اور انٹرایکٹو میڈیا میں دلچسپی رکھنے والوں کی رہنمائی کریں
+
+## 🎯 آپ کی گیم ڈیولپمنٹ مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title Game Architecture Learning Progression
+    
+    section Object Patterns (20 minutes)
+        Code Organization: Class inheritance
+                         : Composition patterns
+                         : Factory functions
+                         : Behavior mixing
+        
+    section Communication Systems (25 minutes)
+        Event Architecture: Pub/Sub implementation
+                          : Message design
+                          : Event emitters
+                          : Loose coupling
+        
+    section Game Object Design (30 minutes)
+        Entity Systems: Property management
+                      : Behavior composition
+                      : State handling
+                      : Lifecycle management
+        
+    section Architecture Patterns (35 minutes)
+        System Design: Component systems
+                     : Observer pattern
+                     : Command pattern
+                     : State machines
+        
+    section Advanced Concepts (45 minutes)
+        Scalable Architecture: Performance optimization
+                             : Memory management
+                             : Modular design
+                             : Testing strategies
+        
+    section Game Engine Concepts (1 week)
+        Professional Development: Scene graphs
+                                 : Asset management
+                                 : Rendering pipelines
+                                 : Physics integration
+        
+    section Framework Mastery (2 weeks)
+        Modern Game Development: React game patterns
+                               : Canvas optimization
+                               : WebGL basics
+                               : PWA games
+        
+    section Industry Practices (1 month)
+        Professional Skills: Team collaboration
+                           : Code reviews
+                           : Game design patterns
+                           : Performance profiling
+```
 
-## 🚀 چیلنج
+### 🛠️ آپ کی گیم آرکیٹیکچر ٹول کٹ کا خلاصہ
 
-سوچیں کہ پب-سب پیٹرن گیم آرکیٹیکچر کو کیسے بہتر بنا سکتا ہے۔ شناخت کریں کہ کون سے اجزاء ایونٹس نشر کریں اور سسٹم کو کیسے ردعمل دینا چاہیے۔ ایک گیم کا تصور کریں اور اس کے اجزاء کے درمیان کمیونیکیشن پیٹرنز کا نقشہ بنائیں۔
+اس سبق کو مکمل کرنے کے بعد، آپ کے پاس ہے:
+- **ڈیزائن پیٹرن مہارت**: وراثت بمقابلہ کمپوزیشن کے فوائد اور نقصانات کی سمجھ
+- **ایونٹ ڈرائیون آرکیٹیکچر**: پب/سب کے نفاذ کے ذریعے قابل توسیع مواصلات
+- **آبجیکٹ اورینٹڈ ڈیزائن**: کلاس ہائیرارکیز اور رویے کی کمپوزیشن
+- **جدید جاوا اسکرپٹ**: فیکٹری فنکشنز، اسپریڈ سینٹیکس، اور ES6+ پیٹرنز
+- **قابل توسیع آرکیٹیکچر**: ڈھیلا جوڑ اور ماڈیولر ڈیزائن اصول
+- **گیم ڈیولپمنٹ کی بنیاد**: اینٹیٹی سسٹمز اور کمپوننٹ پیٹرنز
+- **پروفیشنل پیٹرنز**: کوڈ آرگنائزیشن کے لیے انڈسٹری اسٹینڈرڈ طریقے
 
-## لیکچر کے بعد کا کوئز
+**حقیقی دنیا میں اطلاق**: یہ پیٹرنز براہ راست لاگو ہوتے ہیں:
+- **فرنٹ اینڈ فریم ورک**: React/Vue کمپوننٹ آرکیٹیکچر اور اسٹیٹ مینجمنٹ
+- **بیک اینڈ سروسز**: مائیکرو سروس مواصلات اور ایونٹ ڈرائیون سسٹمز
+- **موبائل ڈیولپمنٹ**: iOS/Android ایپ آرکیٹیکچر اور نوٹیفکیشن سسٹمز
+- **گیم انجنز**: Unity، Unreal، اور ویب پر مبنی گیم ڈیولپمنٹ
+- **انٹرپرائز سافٹ ویئر**: ایونٹ سورسنگ اور ڈسٹریبیوٹڈ سسٹم ڈیزائن
+- **API ڈیزائن**: RESTful سروسز اور ریئل ٹائم مواصلات
 
-[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/30)
+**حاصل کردہ پروفیشنل مہارتیں**: آپ اب کر سکتے ہیں:
+- **ڈیزائن** قابل توسیع سافٹ ویئر آرکیٹیکچرز کو ثابت شدہ پیٹرنز کے ساتھ
+- **نفاذ** ایونٹ ڈرائیون سسٹمز جو پیچیدہ تعاملات کو سنبھال سکیں
+- **انتخاب** مختلف منظرناموں کے لیے مناسب کوڈ آرگنائزیشن حکمت عملی
+- **ڈیبگ** اور ڈھیلے جوڑ والے سسٹمز کو مؤثر طریقے سے برقرار رکھیں
+- **مواصلات** تکنیکی فیصلے انڈسٹری اسٹینڈرڈ اصطلاحات کے ساتھ
 
-## جائزہ اور خود مطالعہ
+**اگلا مرحلہ**: آپ ان پیٹرنز کو حقیقی گیم میں نافذ کرنے، گیم ڈیولپمنٹ کے جدید موضوعات کو دریافت کرنے، یا ان آرکیٹیکچرل تصورات کو ویب ایپلیکیشنز پر لاگو کرنے کے لیے تیار ہیں!
 
-پب/سب کے بارے میں مزید جانیں [اسے پڑھ کر](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon)۔
+🌟 **کامیابی حاصل کی**: آپ نے بنیادی سافٹ ویئر آرکیٹیکچر پیٹرنز میں مہارت حاصل کر لی ہے جو سادہ گیمز سے لے کر پیچیدہ انٹرپرائز سسٹمز تک سب کچھ طاقتور بناتے ہیں!
 
 ## اسائنمنٹ
 
-[ایک گیم کا خاکہ بنائیں](assignment.md)
+[گیم کا خاکہ بنائیں](assignment.md)
 
 ---
 
 **اعلانِ لاتعلقی**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/6-space-game/2-drawing-to-canvas/README.md b/translations/ur/6-space-game/2-drawing-to-canvas/README.md
index 1159a227fe..9c9bcf717c 100644
--- a/translations/ur/6-space-game/2-drawing-to-canvas/README.md
+++ b/translations/ur/6-space-game/2-drawing-to-canvas/README.md
@@ -1,19 +1,66 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "84053695dca714e16ed064366503ebd5",
-  "translation_date": "2025-10-22T15:08:51+00:00",
+  "original_hash": "7994743c5b21fdcceb36307916ef249a",
+  "translation_date": "2025-11-03T13:32:20+00:00",
   "source_file": "6-space-game/2-drawing-to-canvas/README.md",
   "language_code": "ur"
 }
 -->
-# اسپیس گیم بنائیں حصہ 2: ہیرو اور مونسٹرز کو کینوس پر ڈرائنگ کریں
-
-کینوس API ویب ڈیولپمنٹ کی سب سے طاقتور خصوصیات میں سے ایک ہے جو آپ کے براؤزر میں متحرک، انٹرایکٹو گرافکس بنانے کے لیے استعمال ہوتی ہے۔ اس سبق میں، ہم اس خالی HTML `<canvas>` عنصر کو ایک گیم کی دنیا میں تبدیل کریں گے جو ہیروز اور مونسٹرز سے بھری ہوئی ہوگی۔ کینوس کو اپنے ڈیجیٹل آرٹ بورڈ کے طور پر سوچیں جہاں کوڈ بصری شکل اختیار کرتا ہے۔
-
-ہم پچھلے سبق میں سیکھے گئے مواد پر کام کر رہے ہیں، اور اب ہم بصری پہلوؤں میں گہرائی سے جائیں گے۔ آپ سیکھیں گے کہ گیم اسپریٹس کو کیسے لوڈ اور ڈسپلے کریں، عناصر کو بالکل صحیح جگہ پر کیسے رکھیں، اور اپنے اسپیس گیم کے لیے بصری بنیاد کیسے بنائیں۔ یہ جامد ویب صفحات اور متحرک، انٹرایکٹو تجربات کے درمیان خلا کو پُر کرتا ہے۔
+# خلائی کھیل بنائیں حصہ 2: ہیرو اور مونسٹرز کو کینوس پر ڈرائنگ کریں
+
+```mermaid
+journey
+    title Your Canvas Graphics Journey
+    section Foundation
+      Understand Canvas API: 3: Student
+      Learn coordinate system: 4: Student
+      Draw basic shapes: 4: Student
+    section Image Handling
+      Load game assets: 4: Student
+      Handle async loading: 5: Student
+      Position sprites: 5: Student
+    section Game Rendering
+      Create game screen: 5: Student
+      Build formations: 5: Student
+      Optimize performance: 4: Student
+```
 
-اس سبق کے اختتام تک، آپ کے پاس ایک مکمل گیم سین ہوگا جس میں آپ کا ہیرو شپ صحیح جگہ پر ہوگا اور دشمنوں کی فارمیشنز جنگ کے لیے تیار ہوں گی۔ آپ سمجھ جائیں گے کہ جدید گیمز براؤزرز میں گرافکس کیسے رینڈر کرتے ہیں اور اپنی انٹرایکٹو بصری تجربات بنانے کی مہارت حاصل کریں گے۔ آئیے کینوس گرافکس کو دریافت کریں اور اپنے اسپیس گیم کو زندگی بخشیں!
+کینوس API ویب ڈیولپمنٹ کی سب سے طاقتور خصوصیات میں سے ایک ہے جو آپ کے براؤزر میں متحرک، انٹرایکٹو گرافکس بنانے کے لیے استعمال ہوتی ہے۔ اس سبق میں، ہم اس خالی HTML `<canvas>` عنصر کو ایک کھیل کی دنیا میں تبدیل کریں گے جو ہیروز اور مونسٹرز سے بھری ہوئی ہوگی۔ کینوس کو اپنے ڈیجیٹل آرٹ بورڈ کے طور پر سوچیں جہاں کوڈ بصری شکل اختیار کرتا ہے۔
+
+ہم پچھلے سبق میں سیکھے گئے مواد پر کام کر رہے ہیں، اور اب ہم بصری پہلوؤں میں گہرائی سے جائیں گے۔ آپ سیکھیں گے کہ کھیل کے اسپریٹس کو کیسے لوڈ اور دکھایا جائے، عناصر کو بالکل درست پوزیشن میں کیسے رکھا جائے، اور اپنے خلائی کھیل کے لیے بصری بنیاد کیسے بنائی جائے۔ یہ جامد ویب صفحات اور متحرک، انٹرایکٹو تجربات کے درمیان خلا کو پُر کرتا ہے۔
+
+اس سبق کے اختتام تک، آپ کے پاس ایک مکمل کھیل کا منظر ہوگا جس میں آپ کا ہیرو شپ صحیح جگہ پر ہوگا اور دشمنوں کی تشکیل جنگ کے لیے تیار ہوگی۔ آپ سمجھ جائیں گے کہ جدید کھیل براؤزرز میں گرافکس کیسے رینڈر کرتے ہیں اور اپنے انٹرایکٹو بصری تجربات بنانے کی مہارت حاصل کریں گے۔ آئیے کینوس گرافکس کو دریافت کریں اور اپنے خلائی کھیل کو زندگی بخشیں!
+
+```mermaid
+mindmap
+  root((Canvas Graphics))
+    Canvas Element
+      HTML5 Feature
+      2D Context
+      Coordinate System
+      Pixel Control
+    Drawing Operations
+      Basic Shapes
+      Text Rendering
+      Image Display
+      Path Drawing
+    Asset Management
+      Image Loading
+      Async Operations
+      Error Handling
+      Performance
+    Game Rendering
+      Sprite Positioning
+      Formation Layout
+      Scene Composition
+      Frame Updates
+    Visual Effects
+      Colors & Styles
+      Transformations
+      Animations
+      Layering
+```
 
 ## پری لیکچر کوئز
 
@@ -21,9 +68,9 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## کینوس
 
-تو یہ `<canvas>` عنصر اصل میں کیا ہے؟ یہ HTML5 کا حل ہے جو ویب براؤزرز میں متحرک گرافکس اور اینیمیشنز بنانے کے لیے استعمال ہوتا ہے۔ عام تصاویر یا ویڈیوز کے برعکس جو جامد ہوتی ہیں، کینوس آپ کو اسکرین پر ظاہر ہونے والی ہر چیز پر پکسل لیول کنٹرول دیتا ہے۔ یہ گیمز، ڈیٹا ویژولائزیشنز، اور انٹرایکٹو آرٹ کے لیے بہترین ہے۔ اسے ایک پروگرام ایبل ڈرائنگ سطح کے طور پر سوچیں جہاں جاوا اسکرپٹ آپ کا پینٹ برش بن جاتا ہے۔
+تو یہ `<canvas>` عنصر اصل میں کیا ہے؟ یہ HTML5 کا حل ہے جو ویب براؤزرز میں متحرک گرافکس اور اینیمیشنز بنانے کے لیے استعمال ہوتا ہے۔ عام تصاویر یا ویڈیوز کے برعکس جو جامد ہوتی ہیں، کینوس آپ کو اسکرین پر ظاہر ہونے والی ہر چیز پر پکسل لیول کنٹرول دیتا ہے۔ یہ کھیلوں، ڈیٹا ویژولائزیشنز، اور انٹرایکٹو آرٹ کے لیے بہترین ہے۔ اسے ایک پروگرام ایبل ڈرائنگ سطح کے طور پر سوچیں جہاں جاوا اسکرپٹ آپ کا پینٹ برش بن جاتا ہے۔
 
-ڈیفالٹ کے طور پر، کینوس عنصر آپ کے صفحے پر ایک خالی، شفاف مستطیل کی طرح نظر آتا ہے۔ لیکن یہی وہ جگہ ہے جہاں اس کی صلاحیت چھپی ہوئی ہے! اس کی اصل طاقت اس وقت ظاہر ہوتی ہے جب آپ جاوا اسکرپٹ کا استعمال کرتے ہوئے شکلیں بناتے ہیں، تصاویر لوڈ کرتے ہیں، اینیمیشنز تخلیق کرتے ہیں، اور چیزوں کو صارف کی تعاملات کے مطابق ردعمل دیتے ہیں۔ یہ بالکل ویسا ہی ہے جیسے 1960 کی دہائی میں بیل لیبز کے ابتدائی کمپیوٹر گرافکس کے ماہرین نے ہر پکسل کو پروگرام کرنا پڑا تاکہ پہلی ڈیجیٹل اینیمیشنز بنائی جا سکیں۔
+ڈیفالٹ کے طور پر، کینوس عنصر آپ کے صفحے پر ایک خالی، شفاف مستطیل کی طرح نظر آتا ہے۔ لیکن یہی اس کی صلاحیت ہے! اس کی اصل طاقت اس وقت ظاہر ہوتی ہے جب آپ جاوا اسکرپٹ کا استعمال کرتے ہوئے شکلیں بناتے ہیں، تصاویر لوڈ کرتے ہیں، اینیمیشنز تخلیق کرتے ہیں، اور چیزوں کو صارف کی تعاملات کے مطابق بناتے ہیں۔ یہ اسی طرح ہے جیسے 1960 کی دہائی میں بیل لیبز کے ابتدائی کمپیوٹر گرافکس کے ماہرین کو پہلے ڈیجیٹل اینیمیشنز بنانے کے لیے ہر پکسل کو پروگرام کرنا پڑتا تھا۔
 
 ✅ [کینوس API کے بارے میں مزید پڑھیں](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN پر۔
 
@@ -34,22 +81,60 @@ CO_OP_TRANSLATOR_METADATA:
 ```
 
 **یہ کوڈ کیا کرتا ہے:**
-- **سیٹ کرتا ہے** `id` ایٹریبیوٹ تاکہ آپ جاوا اسکرپٹ میں اس مخصوص کینوس عنصر کو ریفرنس کر سکیں
+- **سیٹ کرتا ہے** `id` ایٹریبیوٹ تاکہ آپ جاوا اسکرپٹ میں اس مخصوص کینوس عنصر کا حوالہ دے سکیں
 - **ڈیفائن کرتا ہے** پکسلز میں چوڑائی تاکہ کینوس کے افقی سائز کو کنٹرول کیا جا سکے
-- **اسٹیبلش کرتا ہے** پکسلز میں اونچائی تاکہ کینوس کے عمودی طول و عرض کو طے کیا جا سکے
+- **قائم کرتا ہے** پکسلز میں اونچائی تاکہ کینوس کے عمودی طول و عرض کا تعین کیا جا سکے
 
 ## سادہ جیومیٹری ڈرائنگ
 
-اب جب کہ آپ جانتے ہیں کہ کینوس عنصر کیا ہے، آئیے اس پر واقعی ڈرائنگ کرنے کی تلاش کریں! کینوس ایک کوآرڈینیٹ سسٹم استعمال کرتا ہے جو شاید آپ کو ریاضی کی کلاس سے واقف لگے، لیکن کمپیوٹر گرافکس کے لیے ایک اہم موڑ ہے۔
-
-کینوس کارٹیسین کوآرڈینیٹس استعمال کرتا ہے جس میں ایک x-axis (افقی) اور y-axis (عمودی) ہوتا ہے تاکہ آپ جو کچھ بھی ڈرائنگ کرتے ہیں اسے پوزیشن میں رکھ سکیں۔ لیکن یہاں ایک اہم فرق ہے: ریاضی کی کلاس کے کوآرڈینیٹ سسٹم کے برعکس، اصل نقطہ `(0,0)` اوپر بائیں کونے سے شروع ہوتا ہے، x-ویلیوز دائیں طرف بڑھتی ہیں اور y-ویلیوز نیچے کی طرف بڑھتی ہیں۔ یہ نقطہ نظر ابتدائی کمپیوٹر ڈسپلے سے شروع ہوتا ہے جہاں الیکٹران بیم اوپر سے نیچے تک اسکین کرتے تھے، جس سے اوپر بائیں قدرتی نقطہ آغاز بن جاتا تھا۔
+اب جب کہ آپ جانتے ہیں کہ کینوس عنصر کیا ہے، آئیے اس پر واقعی ڈرائنگ کرنے کا جائزہ لیتے ہیں! کینوس ایک کوآرڈینیٹ سسٹم استعمال کرتا ہے جو شاید آپ کو ریاضی کی کلاس سے واقف لگے، لیکن کمپیوٹر گرافکس کے لیے ایک اہم موڑ ہے۔
+
+کینوس کارٹیسین کوآرڈینیٹس استعمال کرتا ہے جس میں ایک x-axis (افقی) اور y-axis (عمودی) ہوتا ہے تاکہ آپ جو کچھ بھی ڈرائنگ کرتے ہیں اسے پوزیشن میں رکھا جا سکے۔ لیکن یہاں ایک اہم فرق ہے: ریاضی کی کلاس کے کوآرڈینیٹ سسٹم کے برعکس، اصل نقطہ `(0,0)` اوپر بائیں کونے سے شروع ہوتا ہے، جہاں x-ویلیوز دائیں طرف بڑھتی ہیں اور y-ویلیوز نیچے کی طرف بڑھتی ہیں۔ یہ نقطہ نظر ابتدائی کمپیوٹر ڈسپلے سے شروع ہوتا ہے جہاں الیکٹران بیم اوپر سے نیچے تک اسکین کرتے تھے، جس سے اوپر بائیں قدرتی نقطہ آغاز بن جاتا تھا۔
+
+```mermaid
+quadrantChart
+    title Canvas Coordinate System
+    x-axis Left --> Right
+    y-axis Top --> Bottom
+    quadrant-1 Quadrant 1
+    quadrant-2 Quadrant 2  
+    quadrant-3 Quadrant 3
+    quadrant-4 Quadrant 4
+    
+    Origin Point: [0.1, 0.1]
+    Hero Center: [0.5, 0.8]
+    Enemy Formation: [0.3, 0.2]
+    Power-up: [0.7, 0.6]
+    UI Elements: [0.9, 0.1]
+```
 
 ![کینوس کا گرڈ](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ur.png)
 > تصویر [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) سے
 
-کینوس عنصر پر ڈرائنگ کرنے کے لیے، آپ وہی تین قدمی عمل کریں گے جو تمام کینوس گرافکس کی بنیاد بناتا ہے۔ ایک بار جب آپ یہ چند بار کریں گے، تو یہ آپ کے لیے آسان ہو جائے گا:
+کینوس عنصر پر ڈرائنگ کرنے کے لیے، آپ وہی تین قدمی عمل اپنائیں گے جو تمام کینوس گرافکس کی بنیاد بناتا ہے۔ ایک بار جب آپ یہ چند بار کریں گے، تو یہ آپ کے لیے آسان ہو جائے گا:
+
+```mermaid
+flowchart LR
+    A[HTML Canvas Element] --> B[Get Canvas Reference]
+    B --> C[Get 2D Context]
+    C --> D[Drawing Operations]
+    
+    D --> E[Draw Shapes]
+    D --> F[Draw Text]
+    D --> G[Draw Images]
+    D --> H[Apply Styles]
+    
+    E --> I[Render to Screen]
+    F --> I
+    G --> I
+    H --> I
+    
+    style A fill:#e1f5fe
+    style C fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
-1. **کینوس عنصر کا حوالہ حاصل کریں** DOM سے (بالکل کسی دوسرے HTML عنصر کی طرح)
+1. **اپنے کینوس عنصر کا حوالہ حاصل کریں** DOM سے (بالکل کسی دوسرے HTML عنصر کی طرح)
 2. **2D رینڈرنگ کانٹیکسٹ حاصل کریں** – یہ تمام ڈرائنگ طریقے فراہم کرتا ہے
 3. **ڈرائنگ شروع کریں!** کانٹیکسٹ کے بلٹ ان طریقوں کا استعمال کرتے ہوئے اپنے گرافکس بنائیں
 
@@ -68,7 +153,7 @@ ctx.fillRect(0, 0, 200, 200); // x, y, width, height
 ```
 
 **آئیے اسے قدم بہ قدم توڑتے ہیں:**
-- ہم **اپنے کینوس عنصر کو پکڑتے ہیں** اس کے ID کا استعمال کرتے ہوئے اور اسے ایک ویری ایبل میں اسٹور کرتے ہیں
+- ہم **اپنے کینوس عنصر کو پکڑتے ہیں** اس کے ID کا استعمال کرتے ہوئے اور اسے ایک ویریبل میں محفوظ کرتے ہیں
 - ہم **2D رینڈرنگ کانٹیکسٹ حاصل کرتے ہیں** – یہ ہمارا ٹول کٹ ہے جو ڈرائنگ کے طریقوں سے بھرا ہوا ہے
 - ہم **کینوس کو بتاتے ہیں** کہ ہم چیزوں کو سرخ رنگ سے بھرنا چاہتے ہیں `fillStyle` پراپرٹی کا استعمال کرتے ہوئے
 - ہم **ایک مستطیل ڈرائنگ کرتے ہیں** جو اوپر بائیں کونے (0,0) سے شروع ہوتی ہے اور 200 پکسلز چوڑی اور اونچی ہے
@@ -77,221 +162,180 @@ ctx.fillRect(0, 0, 200, 200); // x, y, width, height
 
 آپ کینوس API کے ساتھ بہت سی چیزیں ڈرائنگ کر سکتے ہیں جیسے:
 
-- **جیومیٹریکل شکلیں**، ہم نے پہلے ہی دکھایا کہ مستطیل کیسے ڈرائنگ کی جاتی ہے، لیکن آپ اور بھی بہت کچھ ڈرائنگ کر سکتے ہیں۔
-- **ٹیکسٹ**، آپ کسی بھی فونٹ اور رنگ کے ساتھ ٹیکسٹ ڈرائنگ کر سکتے ہیں۔
+- **جیومیٹریکل شکلیں**، ہم نے پہلے ہی دکھایا کہ مستطیل کیسے ڈرائنگ کی جاتی ہے، لیکن آپ بہت کچھ ڈرائنگ کر سکتے ہیں۔
+- **متن**، آپ کسی بھی فونٹ اور رنگ کے ساتھ متن ڈرائنگ کر سکتے ہیں۔
 - **تصاویر**، آپ کسی تصویر کے اثاثے جیسے .jpg یا .png کی بنیاد پر تصویر ڈرائنگ کر سکتے ہیں۔
 
-✅ اسے آزمائیں! آپ جانتے ہیں کہ مستطیل کیسے ڈرائنگ کی جاتی ہے، کیا آپ صفحے پر ایک دائرہ ڈرائنگ کر سکتے ہیں؟ کچھ دلچسپ کینوس ڈرائنگز کو CodePen پر دیکھیں۔ یہاں ایک [خاص طور پر متاثر کن مثال](https://codepen.io/dissimulate/pen/KrAwx) ہے۔
-
-## ایک تصویر اثاثہ لوڈ کریں اور ڈرائنگ کریں
-
-بنیادی شکلیں ڈرائنگ کرنا شروع کرنے کے لیے مفید ہے، لیکن زیادہ تر گیمز کو اصل تصاویر کی ضرورت ہوتی ہے! اسپریٹس، بیک گراؤنڈز، اور ٹیکسچرز وہ ہیں جو گیمز کو بصری کشش دیتے ہیں۔ کینوس پر تصاویر لوڈ کرنا اور ڈسپلے کرنا جیومیٹریکل شکلوں کو ڈرائنگ کرنے سے مختلف کام کرتا ہے، لیکن ایک بار جب آپ عمل کو سمجھ لیں تو یہ آسان ہے۔
+✅ اسے آزمائیں! آپ جانتے ہیں کہ مستطیل کیسے ڈرائنگ کی جاتی ہے، کیا آپ صفحے پر دائرہ ڈرائنگ کر سکتے ہیں؟ کچھ دلچسپ کینوس ڈرائنگز کو CodePen پر دیکھیں۔ یہاں ایک [خاص طور پر متاثر کن مثال](https://codepen.io/dissimulate/pen/KrAwx) ہے۔
 
-ہمیں ایک `Image` آبجیکٹ بنانا ہوگا، اپنی تصویر فائل لوڈ کرنی ہوگی (یہ غیر متزامن طور پر ہوتا ہے، مطلب "پس منظر میں")، اور پھر اسے کینوس پر ڈرائنگ کرنا ہوگا جب یہ تیار ہو جائے۔ یہ طریقہ یقینی بناتا ہے کہ آپ کی تصاویر صحیح طریقے سے ڈسپلے ہوں بغیر آپ کی ایپلیکیشن کو لوڈنگ کے دوران بلاک کیے۔
+### 🔄 **تعلیمی جائزہ**
+**کینوس کے بنیادی اصولوں کی سمجھ**: تصویر لوڈ کرنے کی طرف جانے سے پہلے، یقینی بنائیں کہ آپ:
+- ✅ وضاحت کر سکتے ہیں کہ کینوس کوآرڈینیٹ سسٹم ریاضی کے کوآرڈینیٹس سے کیسے مختلف ہے
+- ✅ کین
+- **کوآرڈینیٹ سسٹمز**: ریاضی کو اسکرین پوزیشنز میں تبدیل کرنا  
+- **اسپرائٹ مینجمنٹ**: گیم گرافکس کو لوڈ اور ڈسپلے کرنا  
+- **فارمیشن الگورتھمز**: منظم لے آؤٹس کے لیے ریاضیاتی پیٹرنز  
+- **ایسنک آپریشنز**: جدید جاوا اسکرپٹ کے ذریعے ہموار یوزر تجربہ  
 
-### بنیادی تصویر لوڈنگ
+## نتیجہ  
 
-```javascript
-const img = new Image();
-img.src = 'path/to/my/image.png';
-img.onload = () => {
-  // Image loaded and ready to be used
-  console.log('Image loaded successfully!');
-};
-```
-
-**اس کوڈ میں کیا ہو رہا ہے:**
-- ہم **ایک نیا Image آبجیکٹ بناتے ہیں** تاکہ ہمارا اسپریٹ یا ٹیکسچر رکھ سکے
-- ہم **اسے بتاتے ہیں** کہ کون سی تصویر فائل لوڈ کرنی ہے سورس پاتھ سیٹ کرکے
-- ہم **لوڈ ایونٹ کے لیے سنتے ہیں** تاکہ ہمیں بالکل معلوم ہو کہ تصویر کب استعمال کے لیے تیار ہے
+حتمی نتیجہ کچھ اس طرح نظر آنا چاہیے:  
 
-### تصاویر لوڈ کرنے کا ایک بہتر طریقہ
+![کالا اسکرین جس پر ایک ہیرو اور 5*5 مونسٹرز ہیں](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ur.png)  
 
-یہاں ایک زیادہ مضبوط طریقہ ہے جو پروفیشنل ڈیولپرز عام طور پر استعمال کرتے ہیں۔ ہم تصویر لوڈنگ کو ایک Promise-based فنکشن میں لپیٹیں گے – یہ طریقہ، جب جاوا اسکرپٹ Promises ES6 میں معیاری بنے، آپ کے کوڈ کو زیادہ منظم بناتا ہے اور غلطیوں کو خوبصورتی سے ہینڈل کرتا ہے:
-
-```javascript
-function loadAsset(path) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.src = path;
-    img.onload = () => {
-      resolve(img);
-    };
-    img.onerror = () => {
-      reject(new Error(`Failed to load image: ${path}`));
-    };
-  });
-}
-
-// Modern usage with async/await
-async function initializeGame() {
-  try {
-    const heroImg = await loadAsset('hero.png');
-    const monsterImg = await loadAsset('monster.png');
-    // Images are now ready to use
-  } catch (error) {
-    console.error('Failed to load game assets:', error);
-  }
-}
-```
+## حل  
 
-**ہم نے یہاں کیا کیا:**
-- **تمام تصویر لوڈنگ منطق کو ایک Promise میں لپیٹ دیا** تاکہ ہم اسے بہتر طریقے سے ہینڈل کر سکیں
-- **غلطی ہینڈلنگ شامل کی** جو ہمیں واقعی بتاتی ہے کہ جب کچھ غلط ہو جاتا ہے
-- **جدید async/await نحو استعمال کی** کیونکہ یہ پڑھنے میں بہت صاف ہے
-- **try/catch بلاکس شامل کیے** تاکہ لوڈنگ کے کسی بھی مسئلے کو خوبصورتی سے ہینڈل کیا جا سکے
-
-ایک بار جب آپ کی تصاویر لوڈ ہو جائیں، انہیں کینوس پر ڈرائنگ کرنا دراصل کافی سیدھا ہے:
-
-```javascript
-async function renderGameScreen() {
-  try {
-    // Load game assets
-    const heroImg = await loadAsset('hero.png');
-    const monsterImg = await loadAsset('monster.png');
-
-    // Get canvas and context
-    const canvas = document.getElementById("myCanvas");
-    const ctx = canvas.getContext("2d");
-
-    // Draw images to specific positions
-    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
-    ctx.drawImage(monsterImg, 0, 0);
-  } catch (error) {
-    console.error('Failed to render game screen:', error);
-  }
-}
-```
-
-**آئیے اسے قدم بہ قدم دیکھتے ہیں:**
-- ہم **اپنے ہیرو اور مونسٹر تصاویر کو پس منظر میں لوڈ کرتے ہیں** await کا استعمال کرتے ہوئے
-- ہم **اپنے کینوس عنصر کو پکڑتے ہیں** اور وہ 2D رینڈرنگ کانٹیکسٹ حاصل کرتے ہیں جس کی ہمیں ضرورت ہے
-- ہم **ہیرو تصویر کو بالکل مرکز میں پوزیشن دیتے ہیں** کچھ فوری کوآرڈینیٹ میتھ کا استعمال کرتے ہوئے
-- ہم **مونسٹر تصویر کو اوپر بائیں کونے پر رکھتے ہیں** تاکہ ہماری دشمن فارمیشن شروع ہو سکے
-- ہم **کسی بھی غلطی کو پکڑتے ہیں** جو لوڈنگ یا رینڈرنگ کے دوران ہو سکتی ہیں
-
-## اب وقت ہے کہ آپ اپنا گیم بنانا شروع کریں
-
-اب ہم سب کچھ ایک ساتھ رکھیں گے تاکہ آپ کے اسپیس گیم کے بصری بنیاد بنائی جا سکے۔ آپ کے پاس کینوس کی بنیادی باتوں اور تصویر لوڈنگ تکنیکوں کی ٹھوس سمجھ ہے، لہذا یہ عملی سیکشن آپ کو ایک مکمل گیم اسکرین بنانے کے لیے رہنمائی کرے گا جس میں صحیح طریقے سے پوزیشنڈ اسپریٹس ہوں۔
-
-### کیا بنانا ہے
-
-آپ ایک ویب صفحہ بنائیں گے جس میں ایک کینوس عنصر ہوگا۔ یہ ایک سیاہ اسکرین `1024*768` رینڈر کرے گا۔ ہم نے آپ کو دو تصاویر فراہم کی ہیں:
-
-- ہیرو شپ
-
-   ![ہیرو شپ](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ur.png)
-
-- 5*5 مونسٹر
-
-   ![مونسٹر شپ](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ur.png)
-
-### ترقی شروع کرنے کے لیے تجویز کردہ اقدامات
-
-اسٹارٹر فائلز کو تلاش کریں جو آپ کے لیے `your-work` سب فولڈر میں بنائی گئی ہیں۔ آپ کے پروجیکٹ کی ساخت میں شامل ہونا چاہیے:
-
-```bash
-your-work/
-├── assets/
-│   ├── enemyShip.png
-│   └── player.png
-├── index.html
-├── app.js
-└── package.json
-```
-
-**یہ ہے جس کے ساتھ آپ کام کر رہے ہیں:**
-- **گیم اسپریٹس** `assets/` فولڈر میں رہتے ہیں تاکہ سب کچھ منظم رہے
-- **آپ کی مین HTML فائل** کینوس عنصر کو سیٹ اپ کرتی ہے اور سب کچھ تیار کرتی ہے
-- **ایک جاوا اسکرپٹ فائل** جہاں آپ اپنا گیم رینڈرنگ جادو لکھیں گے
-- **ایک package.json** جو ایک ترقیاتی سرور سیٹ اپ کرتا ہے تاکہ آپ مقامی طور پر ٹیسٹ کر سکیں
-
-اس فولڈر کو Visual Studio Code میں کھولیں تاکہ ترقی شروع کی جا سکے۔ آپ کو Visual Studio Code، NPM، اور Node.js کے ساتھ ایک مقامی ترقیاتی ماحول کی ضرورت ہوگی۔ اگر آپ کے کمپیوٹر پر `npm` سیٹ اپ نہیں ہے، [یہاں اسے انسٹال کرنے کا طریقہ](https://www.npmjs.com/get-npm) ہے۔
-
-اپنے ترقیاتی سرور کو `your-work` فولڈر پر نیویگیٹ کرکے شروع کریں:
-
-```bash
-cd your-work
-npm start
-```
-
-**یہ کمانڈ کچھ بہت زبردست کام کرتی ہے:**
-- **ایک مقامی سرور شروع کرتی ہے** `http://localhost:5000` پر تاکہ آپ اپنا گیم ٹیسٹ کر سکیں
-- **آپ کی تمام فائلز کو صحیح طریقے سے سرو کرتی ہے** تاکہ آپ کا براؤزر انہیں صحیح طریقے سے لوڈ کر سکے
-- **آپ کی فائلز کے لیے تبدیلیوں کو دیکھتی ہے** تاکہ آپ آسانی سے ترقی کر سکیں
-- **آپ کو ایک پروفیشنل ترقیاتی ماحول دیتی ہے** تاکہ سب کچھ ٹیسٹ کیا جا سکے
-
-> 💡 **نوٹ**: آپ کا براؤزر ابتدائی طور پر ایک خالی صفحہ دکھائے گا – یہ متوقع ہے! جیسے جیسے آپ کوڈ شامل کریں گے، اپنے براؤزر کو ریفریش کریں تاکہ اپنی تبدیلیاں دیکھ سکیں۔ یہ ترقیاتی طریقہ NASA نے اپولو گائیڈنس کمپیوٹر بنانے کے لیے استعمال کیا تھا – ہر جزو کو بڑے نظام میں ضم کرنے سے پہلے ٹیسٹ کرنا۔
-
-### کوڈ شامل کریں
-
-`your-work/app.js` میں مطلوبہ کوڈ شامل کریں تاکہ درج ذیل کام مکمل کیے جا سکیں:
-
-1. **ایک کینوس ڈرائنگ کریں جس کا پس منظر سیاہ ہو**
-   > 💡 **یہاں کیسے**: `/app.js` میں TODO تلاش کریں اور صرف دو لائنیں شامل کریں۔ `ctx.fillStyle` کو سیاہ سیٹ کریں، پھر `ctx.fillRect()` کا استعمال کریں جو (0,0) سے شروع ہو اور آپ کے کینوس کے طول و عرض کے ساتھ ہو۔ آسان!
-
-2. **گیم ٹیکسچرز لوڈ کریں**
-   > 💡 **یہاں کیسے**: `await loadAsset()` کا استعمال کریں تاکہ اپنے پلیئر اور دشمن تصاویر لوڈ کریں۔ انہیں ویری ایبلز میں اسٹور کریں تاکہ آپ انہیں بعد میں استعمال کر سکیں۔ یاد رکھیں – وہ اس وقت تک ظاہر نہیں ہوں گی جب تک آپ انہیں واقعی ڈرائنگ نہ کریں!
-
-3. **ہیرو شپ کو مرکز-نیچے کی پوزیشن میں ڈرائنگ کریں**
-   > 💡 **یہاں کیسے**: `ctx.drawImage()` کا استعمال کریں تاکہ اپنے ہیرو کو پوزیشن دیں۔ x-کوآرڈینیٹ کے لیے، `canvas.width / 2 - 45` آزمائیں تاکہ اسے مرکز میں رکھیں، اور y-کوآرڈینیٹ کے لیے `canvas.height - canvas.height / 4` استعمال کریں تاکہ اسے نیچے کے علاقے میں رکھیں۔
-
-4. **دشمن جہازوں کی 5×5 فارمیشن ڈرائنگ کریں**
-   > 💡 **یہاں کیسے**: `createEnemies` فنکشن تلاش کریں اور ایک نیسٹڈ لوپ سیٹ اپ کریں۔ آپ کو اسپیسنگ اور پوزیشننگ کے لیے کچھ حساب کتاب کرنے کی ضرورت ہوگی، لیکن فکر نہ کریں – میں آپ کو بالکل دکھاؤں گا کہ کیسے!
-
-پہلے، دشمن فارمیشن لے آؤٹ کے لیے مناسب کانسٹینٹس قائم کریں:
-
-```javascript
-const ENEMY_TOTAL = 5;
-const ENEMY_SPACING = 98;
-const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
-const START_X = (canvas.width - FORMATION_WIDTH) / 2;
-const STOP_X = START_X + FORMATION_WIDTH;
-```
-
-**آئیے ان کانسٹینٹس کو توڑتے ہیں:**
-- ہم **پانچ دشمن فی قطار اور کالم سیٹ کرتے ہیں** (ایک خوبصورت 5×5 گرڈ)
-- ہم **تعین کرتے ہیں** کہ دشمنوں کے درمیان کتنا اسپیس رکھنا ہے تاکہ وہ تنگ نہ لگیں
-- ہم **حساب کرتے ہیں** کہ ہماری پوری فارمیشن کتنی چوڑی ہوگی
-- ہم **پتہ لگاتے ہیں** کہ کہاں سے شروع کریں اور کہاں ختم کریں تاکہ فارمیشن مرکز میں نظر آئے
-
-پھر، دشمن فارمیشن ڈرائنگ کرنے کے لیے نیسٹڈ لوپس بنائیں:
-
-```javascript
-for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
-  for (let y = 0; y < 50 * 5; y += 50) {
-    ctx.drawImage(enemyImg, x, y);
-  }
-}
-```
-
-**یہ نیسٹڈ لوپ کیا کرتا ہے:**
-- بیرونی لوپ **بائیں سے دائیں حرکت کرتا ہے** ہماری فارمیشن کے پار
-- اندرونی لوپ **اوپر سے نیچے جاتا ہے** تاکہ صاف قطاریں بنائی جا سکیں
-- ہم **ہر دشمن اسپریٹ کو ڈرائنگ کرتے ہیں** بالکل ان x,y کوآرڈینیٹس پر جو ہم نے حساب کیے ہیں
-- سب کچھ **یکساں طور پر اسپیسڈ رہتا ہے** تاکہ یہ پروفیشنل اور منظم نظر آئے
-
-## نتیجہ
-
-مکمل نتیجہ کچھ اس طرح نظر آنا چاہیے:
-
-![سیاہ اسکرین جس پر ایک ہیرو اور 5×5 مونسٹرز ہیں](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ur.png)
-
-## حل
-
-براہ کرم پہلے خود اسے حل کرنے کی کوشش کریں لیکن اگر آپ پھنس جائیں تو [حل](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) دیکھیں۔
+پہلے خود کوشش کریں حل کرنے کی، لیکن اگر آپ پھنس جائیں تو [حل](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) دیکھیں۔  
 
 ---
 
-## GitHub Copilot ایجنٹ چیلنج 🚀
-
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
-
-**تفصیل:** اپنے اسپیس گیم کینوس کو بصری اثرات اور انٹرایکٹو عناصر شامل کرکے بہتر بنائیں، کینوس API تکنیکوں کا استعمال کرتے ہوئے جو آپ نے سیکھا ہے۔
-
-**پرومپٹ:** ایک نئی فائل بنائیں جس کا نام
+## GitHub Copilot Agent Challenge 🚀  
+
+ایجنٹ موڈ استعمال کریں اور درج ذیل چیلنج مکمل کریں:  
+
+**تفصیل:** اپنے اسپیس گیم کینوس کو بہتر بنائیں اور کینوس API تکنیکوں کے ذریعے بصری اثرات اور انٹرایکٹو عناصر شامل کریں۔  
+
+**پرومپٹ:** ایک نئی فائل بنائیں جس کا نام `enhanced-canvas.html` ہو، جس میں ایک کینوس ہو جو پس منظر میں متحرک ستارے دکھائے، ہیرو شپ کے لیے ایک پلسنگ ہیلتھ بار ہو، اور دشمن شپ جو آہستہ آہستہ نیچے کی طرف حرکت کریں۔ جاوا اسکرپٹ کوڈ شامل کریں جو رینڈم پوزیشنز اور اوپیسٹی کے ذریعے چمکتے ستارے بنائے، ہیلتھ بار کو ہیلتھ لیول کے مطابق رنگ تبدیل کرنے کے قابل بنائے (سبز > پیلا > سرخ)، اور دشمن شپ کو مختلف رفتار سے اسکرین کے نیچے حرکت دینے کے لیے اینیمیٹ کرے۔  
+
+ایجنٹ موڈ کے بارے میں مزید جانیں [یہاں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔  
+
+## 🚀 چیلنج  
+
+آپ نے 2D فوکسڈ کینوس API کے ذریعے ڈرائنگ کے بارے میں سیکھا ہے؛ [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) پر ایک نظر ڈالیں اور 3D آبجیکٹ ڈرائنگ کی کوشش کریں۔  
+
+## لیکچر کے بعد کا کوئز  
+
+[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/32)  
+
+## جائزہ اور خود مطالعہ  
+
+کینوس API کے بارے میں مزید جانیں [یہ پڑھ کر](https://developer.mozilla.org/docs/Web/API/Canvas_API)۔  
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**  
+- [ ] براؤزر کنسول کھولیں اور `document.createElement('canvas')` کے ذریعے ایک کینوس عنصر بنائیں  
+- [ ] کینوس کانٹیکسٹ پر `fillRect()` استعمال کرتے ہوئے ایک مستطیل بنائیں  
+- [ ] مختلف رنگوں کے ساتھ تجربہ کریں `fillStyle` پراپرٹی استعمال کرتے ہوئے  
+- [ ] `arc()` میتھڈ استعمال کرتے ہوئے ایک سادہ دائرہ بنائیں  
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**  
+- [ ] لیکچر کے بعد کا کوئز مکمل کریں اور کینوس کے بنیادی اصول سمجھیں  
+- [ ] ایک کینوس ڈرائنگ ایپلیکیشن بنائیں جس میں مختلف شکلیں اور رنگ ہوں  
+- [ ] اپنے گیم کے لیے امیج لوڈنگ اور اسپرائٹ رینڈرنگ نافذ کریں  
+- [ ] ایک سادہ اینیمیشن بنائیں جو کینوس پر اشیاء کو حرکت دے  
+- [ ] کینوس ٹرانسفارمیشنز جیسے اسکیلنگ، روٹیشن، اور ٹرانسلیشن کی مشق کریں  
+
+### 📅 **آپ کا ہفتہ بھر کا کینوس سفر**  
+- [ ] اسپیس گیم مکمل کریں جس میں بہتر گرافکس اور اسپرائٹ اینیمیشنز ہوں  
+- [ ] کینوس کی جدید تکنیکیں جیسے گریڈینٹس، پیٹرنز، اور کمپوزٹنگ سیکھیں  
+- [ ] کینوس کا استعمال کرتے ہوئے انٹرایکٹو ویژولائزیشنز بنائیں  
+- [ ] ہموار کارکردگی کے لیے کینوس آپٹیمائزیشن تکنیکیں سیکھیں  
+- [ ] مختلف ٹولز کے ساتھ ایک ڈرائنگ یا پینٹنگ ایپلیکیشن بنائیں  
+- [ ] کینوس کے ساتھ تخلیقی کوڈنگ پیٹرنز اور جنریٹو آرٹ دریافت کریں  
+
+### 🌟 **آپ کا مہینہ بھر کا گرافکس ماسٹری سفر**  
+- [ ] کینوس 2D اور WebGL استعمال کرتے ہوئے پیچیدہ بصری ایپلیکیشنز بنائیں  
+- [ ] گرافکس پروگرامنگ کے تصورات اور شیڈر کے بنیادی اصول سیکھیں  
+- [ ] اوپن سورس گرافکس لائبریریز اور ویژولائزیشن ٹولز میں تعاون کریں  
+- [ ] گرافکس کے لیے کارکردگی کی آپٹیمائزیشن میں مہارت حاصل کریں  
+- [ ] کینوس پروگرامنگ اور کمپیوٹر گرافکس کے بارے میں تعلیمی مواد بنائیں  
+- [ ] ایک گرافکس پروگرامنگ ماہر بنیں جو دوسروں کو بصری تجربات تخلیق کرنے میں مدد دے  
+
+## 🎯 آپ کا کینوس گرافکس ماسٹری ٹائم لائن  
+
+```mermaid
+timeline
+    title Canvas API Learning Progression
+    
+    section Canvas Fundamentals (15 minutes)
+        Basic Operations: Element reference
+                        : 2D context access
+                        : Coordinate system
+                        : Simple shape drawing
+        
+    section Drawing Techniques (20 minutes)
+        Graphics Primitives: Rectangles and circles
+                           : Colors and styles
+                           : Text rendering
+                           : Path operations
+        
+    section Image Handling (25 minutes)
+        Asset Management: Image object creation
+                        : Async loading patterns
+                        : Error handling
+                        : Performance optimization
+        
+    section Game Graphics (30 minutes)
+        Sprite Rendering: Positioning algorithms
+                        : Formation calculations
+                        : Scene composition
+                        : Frame rendering
+        
+    section Advanced Techniques (40 minutes)
+        Visual Effects: Transformations
+                      : Animations
+                      : Layering
+                      : State management
+        
+    section Performance (35 minutes)
+        Optimization: Efficient drawing
+                    : Memory management
+                    : Frame rate control
+                    : Asset caching
+        
+    section Professional Skills (1 week)
+        Production Graphics: WebGL integration
+                           : Canvas libraries
+                           : Game engines
+                           : Cross-platform considerations
+        
+    section Advanced Graphics (1 month)
+        Specialized Applications: Data visualization
+                                : Interactive art
+                                : Real-time effects
+                                : 3D graphics
+```
+  
+### 🛠️ آپ کا کینوس گرافکس ٹول کٹ خلاصہ  
+
+اس سبق کو مکمل کرنے کے بعد، آپ کے پاس ہے:  
+- **کینوس API ماسٹری**: 2D گرافکس پروگرامنگ کی مکمل سمجھ  
+- **کوآرڈینیٹ ریاضی**: درست پوزیشننگ اور لے آؤٹ الگورتھمز  
+- **اثاثہ مینجمنٹ**: پروفیشنل امیج لوڈنگ اور ایرر ہینڈلنگ  
+- **رینڈرنگ پائپ لائن**: منظر کی تشکیل کے لیے منظم طریقہ  
+- **گیم گرافکس**: اسپرائٹ پوزیشننگ اور فارمیشن کیلکولیشنز  
+- **ایسنک پروگرامنگ**: ہموار کارکردگی کے لیے جدید جاوا اسکرپٹ پیٹرنز  
+- **ویژول پروگرامنگ**: ریاضیاتی تصورات کو اسکرین گرافکس میں تبدیل کرنا  
+
+**حقیقی دنیا کی ایپلیکیشنز**: آپ کی کینوس مہارتیں براہ راست لاگو ہوتی ہیں:  
+- **ڈیٹا ویژولائزیشن**: چارٹس، گرافز، اور انٹرایکٹو ڈیش بورڈز  
+- **گیم ڈیولپمنٹ**: 2D گیمز، سیمولیشنز، اور انٹرایکٹو تجربات  
+- **ڈیجیٹل آرٹ**: تخلیقی کوڈنگ اور جنریٹو آرٹ پروجیکٹس  
+- **UI/UX ڈیزائن**: کسٹم گرافکس اور انٹرایکٹو عناصر  
+- **تعلیمی سافٹ ویئر**: بصری سیکھنے کے ٹولز اور سیمولیشنز  
+- **ویب ایپلیکیشنز**: ڈائنامک گرافکس اور ریئل ٹائم ویژولائزیشنز  
+
+**حاصل کردہ پروفیشنل مہارتیں**: آپ اب کر سکتے ہیں:  
+- **بنائیں** کسٹم گرافکس حل بغیر بیرونی لائبریریز کے  
+- **آپٹیمائز کریں** رینڈرنگ کی کارکردگی ہموار یوزر تجربات کے لیے  
+- **ڈی بگ کریں** پیچیدہ بصری مسائل براؤزر ڈیولپر ٹولز استعمال کرتے ہوئے  
+- **ڈیزائن کریں** ریاضیاتی اصولوں کا استعمال کرتے ہوئے اسکیل ایبل گرافکس سسٹمز  
+- **انٹیگریٹ کریں** کینوس گرافکس کو جدید ویب ایپلیکیشن فریم ورک کے ساتھ  
+
+**کینوس API میتھڈز جنہیں آپ نے ماسٹر کیا ہے**:  
+- **عنصر مینجمنٹ**: getElementById، getContext  
+- **ڈرائنگ آپریشنز**: fillRect، drawImage، fillStyle  
+- **اثاثہ لوڈنگ**: امیج آبجیکٹس، Promise پیٹرنز  
+- **ریاضیاتی پوزیشننگ**: کوآرڈینیٹ کیلکولیشنز، فارمیشن الگورتھمز  
+
+**اگلا مرحلہ**: آپ اینیمیشن، یوزر انٹرایکشن، کولیشن ڈیٹیکشن شامل کرنے یا WebGL کے ذریعے 3D گرافکس دریافت کرنے کے لیے تیار ہیں!  
+
+🌟 **کامیابی حاصل کی**: آپ نے بنیادی کینوس API تکنیکوں کا استعمال کرتے ہوئے مکمل گیم رینڈرنگ سسٹم بنایا ہے!  
+
+## اسائنمنٹ  
+
+[کینوس API کے ساتھ کھیلیں](assignment.md)  
 
 ---
 
-**ڈسکلیمر**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**اعلانِ لاتعلقی**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/6-space-game/3-moving-elements-around/README.md b/translations/ur/6-space-game/3-moving-elements-around/README.md
index 3fbb4c8270..0802a01e1a 100644
--- a/translations/ur/6-space-game/3-moving-elements-around/README.md
+++ b/translations/ur/6-space-game/3-moving-elements-around/README.md
@@ -1,21 +1,68 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "022bbb5c869091b98f19e408e0c51d5d",
-  "translation_date": "2025-10-22T15:07:59+00:00",
+  "original_hash": "8c55a2bd4bc0ebe4c88198fd563a9e09",
+  "translation_date": "2025-11-03T13:30:35+00:00",
   "source_file": "6-space-game/3-moving-elements-around/README.md",
   "language_code": "ur"
 }
 -->
 # خلائی کھیل بنائیں حصہ 3: حرکت شامل کرنا
 
-اپنے پسندیدہ کھیلوں کے بارے میں سوچیں – جو انہیں دلچسپ بناتا ہے وہ صرف خوبصورت گرافکس نہیں ہیں، بلکہ یہ ہے کہ سب کچھ کیسے حرکت کرتا ہے اور آپ کے اعمال پر کیسے ردعمل ظاہر کرتا ہے۔ اس وقت، آپ کا خلائی کھیل ایک خوبصورت تصویر کی طرح ہے، لیکن ہم اس میں حرکت شامل کرنے والے ہیں جو اسے زندگی بخشے گی۔
-
-جب ناسا کے انجینئرز نے اپولو مشنز کے لیے گائیڈنس کمپیوٹر پروگرام کیا، تو انہیں ایک جیسا چیلنج درپیش تھا: خلائی جہاز کو پائلٹ کے ان پٹ پر کیسے ردعمل دینا ہے جبکہ خودکار طور پر کورس کی اصلاحات کو برقرار رکھنا ہے؟ آج ہم جو اصول سیکھیں گے وہ انہی تصورات کی عکاسی کرتے ہیں – کھلاڑی کے کنٹرول شدہ حرکت کو خودکار نظام کے رویوں کے ساتھ منظم کرنا۔
-
-اس سبق میں، آپ سیکھیں گے کہ خلائی جہاز کو اسکرین پر کیسے حرکت دی جائے، کھلاڑی کے احکامات پر کیسے ردعمل دیا جائے، اور ہموار حرکت کے نمونے کیسے بنائے جائیں۔ ہم ہر چیز کو قابل انتظام تصورات میں تقسیم کریں گے جو قدرتی طور پر ایک دوسرے پر تعمیر ہوتے ہیں۔
+```mermaid
+journey
+    title Your Game Animation Journey
+    section Movement Basics
+      Understand motion principles: 3: Student
+      Learn coordinate updates: 4: Student
+      Implement basic movement: 4: Student
+    section Player Controls
+      Handle keyboard events: 4: Student
+      Prevent default behaviors: 5: Student
+      Create responsive controls: 5: Student
+    section Game Systems
+      Build game loop: 5: Student
+      Manage object lifecycle: 5: Student
+      Implement pub/sub pattern: 5: Student
+```
 
-آخر میں، آپ کے کھلاڑی اپنے ہیرو جہاز کو اسکرین پر اڑائیں گے جبکہ دشمن کے جہاز اوپر گشت کریں گے۔ اس سے بھی اہم بات یہ ہے کہ آپ ان بنیادی اصولوں کو سمجھیں گے جو کھیل کی حرکت کے نظام کو طاقت دیتے ہیں۔
+اپنے پسندیدہ کھیلوں کے بارے میں سوچیں – جو چیز انہیں دلچسپ بناتی ہے وہ صرف خوبصورت گرافکس نہیں بلکہ یہ ہے کہ سب کچھ کیسے حرکت کرتا ہے اور آپ کے اعمال پر ردعمل ظاہر کرتا ہے۔ اس وقت، آپ کا خلائی کھیل ایک خوبصورت تصویر کی طرح ہے، لیکن ہم اس میں حرکت شامل کرنے والے ہیں جو اسے زندگی بخشے گی۔
+
+جب ناسا کے انجینئرز نے اپولو مشنز کے لیے گائیڈنس کمپیوٹر پروگرام کیا، تو انہیں ایک جیسا چیلنج درپیش تھا: آپ خلائی جہاز کو پائلٹ کے ان پٹ پر کیسے ردعمل دیتے ہیں جبکہ خودکار طور پر کورس کی اصلاحات کو برقرار رکھتے ہیں؟ آج ہم جو اصول سیکھیں گے وہ انہی تصورات کی بازگشت ہیں – کھلاڑی کے کنٹرول شدہ حرکت کو خودکار نظام کے رویوں کے ساتھ منظم کرنا۔
+
+اس سبق میں، آپ سیکھیں گے کہ خلائی جہاز کو اسکرین پر کیسے چلایا جائے، کھلاڑی کے احکامات کا جواب کیسے دیا جائے، اور ہموار حرکت کے نمونے کیسے بنائے جائیں۔ ہم سب کچھ قابل انتظام تصورات میں تقسیم کریں گے جو قدرتی طور پر ایک دوسرے پر تعمیر ہوتے ہیں۔
+
+آخر میں، آپ کے کھلاڑی اپنے ہیرو شپ کو اسکرین کے ارد گرد اڑائیں گے جبکہ دشمن کے جہاز اوپر گشت کریں گے۔ اس سے بھی اہم بات یہ ہے کہ آپ ان بنیادی اصولوں کو سمجھیں گے جو کھیل کی حرکت کے نظام کو طاقت دیتے ہیں۔
+
+```mermaid
+mindmap
+  root((Game Animation))
+    Movement Types
+      Player Controlled
+      Automatic Motion
+      Physics Based
+      Scripted Paths
+    Event Handling
+      Keyboard Input
+      Mouse Events
+      Touch Controls
+      Default Prevention
+    Game Loop
+      Update Logic
+      Render Frame
+      Clear Canvas
+      Frame Rate Control
+    Object Management
+      Position Updates
+      Collision Detection
+      Lifecycle Management
+      State Tracking
+    Communication
+      Pub/Sub Pattern
+      Event Emitters
+      Message Passing
+      Loose Coupling
+```
 
 ## پری لیکچر کوئز
 
@@ -23,16 +70,37 @@ CO_OP_TRANSLATOR_METADATA:
 
 ## کھیل کی حرکت کو سمجھنا
 
-کھیل اس وقت زندہ محسوس ہوتے ہیں جب چیزیں حرکت کرنا شروع کرتی ہیں، اور بنیادی طور پر دو طریقے ہیں جن سے یہ ہوتا ہے:
+کھیل اس وقت زندہ ہوتے ہیں جب چیزیں حرکت کرنا شروع کرتی ہیں، اور بنیادی طور پر یہ دو طریقوں سے ہوتا ہے:
 
-- **کھلاڑی کے کنٹرول شدہ حرکت**: جب آپ کوئی کلید دبائیں یا ماؤس پر کلک کریں، تو کچھ حرکت کرتا ہے۔ یہ آپ اور آپ کی کھیل کی دنیا کے درمیان براہ راست تعلق ہے۔
-- **خودکار حرکت**: جب کھیل خود چیزوں کو حرکت دینے کا فیصلہ کرتا ہے – جیسے وہ دشمن کے جہاز جو اسکرین پر گشت کرنے کی ضرورت ہے چاہے آپ کچھ بھی نہ کریں۔
+- **کھلاڑی کے کنٹرول کی حرکت**: جب آپ کوئی کلید دبائیں یا ماؤس پر کلک کریں، تو کچھ حرکت کرتا ہے۔ یہ آپ اور آپ کی گیم کی دنیا کے درمیان براہ راست تعلق ہے۔
+- **خودکار حرکت**: جب کھیل خود چیزوں کو حرکت دینے کا فیصلہ کرتا ہے – جیسے وہ دشمن کے جہاز جو اسکرین پر گشت کرتے ہیں چاہے آپ کچھ بھی نہ کریں۔
 
-کمپیوٹر اسکرین پر اشیاء کو حرکت دینا آپ کے خیال سے زیادہ آسان ہے۔ یاد ہے وہ x اور y کوآرڈینیٹس جو آپ نے ریاضی کی کلاس میں سیکھے تھے؟ یہی وہ چیز ہے جس کے ساتھ ہم یہاں کام کر رہے ہیں۔ جب گلیلیو نے 1610 میں مشتری کے چاندوں کا مشاہدہ کیا، تو وہ بنیادی طور پر یہی کر رہا تھا – وقت کے ساتھ پوزیشنز کو پلاٹ کر کے حرکت کے نمونوں کو سمجھنا۔
+کمپیوٹر اسکرین پر اشیاء کو حرکت دینا آپ کے خیال سے زیادہ آسان ہے۔ یاد ہے وہ x اور y کوآرڈینیٹس جو آپ نے ریاضی کی کلاس میں سیکھے تھے؟ یہی وہ چیز ہے جس کے ساتھ ہم یہاں کام کر رہے ہیں۔ جب گلیلیو نے 1610 میں مشتری کے چاندوں کا سراغ لگایا، تو وہ بنیادی طور پر یہی کر رہا تھا – وقت کے ساتھ پوزیشنوں کو پلاٹ کر کے حرکت کے نمونوں کو سمجھنا۔
 
-اسکرین پر چیزوں کو حرکت دینا ایک فلیپ بک اینیمیشن بنانے جیسا ہے – آپ کو یہ تین آسان مراحل پر عمل کرنا ہوگا:
+اسکرین پر چیزوں کو حرکت دینا فلیپ بک اینیمیشن بنانے جیسا ہے – آپ کو یہ تین آسان مراحل پر عمل کرنا ہوگا:
 
-1. **پوزیشن کو اپ ڈیٹ کریں** – اپنی چیز کو کہاں ہونا چاہیے اسے تبدیل کریں (شاید اسے 5 پکسلز دائیں طرف لے جائیں)
+```mermaid
+flowchart LR
+    A["Frame N"] --> B["Update Positions"]
+    B --> C["Clear Canvas"]
+    C --> D["Draw Objects"]
+    D --> E["Frame N+1"]
+    E --> F{Continue?}
+    F -->|Yes| B
+    F -->|No| G["Game Over"]
+    
+    subgraph "Animation Cycle"
+        H["1. Calculate new positions"]
+        I["2. Erase previous frame"]
+        J["3. Render new frame"]
+    end
+    
+    style B fill:#e1f5fe
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+```
+
+1. **پوزیشن کو اپ ڈیٹ کریں** – اپنی چیز کو کہاں ہونا چاہیے اسے تبدیل کریں (شاید اسے 5 پکسلز دائیں طرف منتقل کریں)
 2. **پرانا فریم مٹائیں** – اسکرین کو صاف کریں تاکہ آپ کو ہر جگہ بھوت نما نشان نظر نہ آئیں
 3. **نیا فریم بنائیں** – اپنی چیز کو اس کی نئی جگہ پر رکھیں
 
@@ -52,22 +120,22 @@ ctx.drawImage(heroImg, hero.x, hero.y);
 ```
 
 **یہ کوڈ کیا کرتا ہے:**
-- **ہیرو کے x-کوآرڈینیٹ کو اپ ڈیٹ کرتا ہے** تاکہ اسے افقی طور پر حرکت دی جا سکے
-- **پورے کینوس کے علاقے کو صاف کرتا ہے** تاکہ پچھلا فریم ہٹایا جا سکے
+- **ہیرو کے x کوآرڈینیٹ کو 5 پکسلز سے اپ ڈیٹ کرتا ہے** تاکہ اسے افقی طور پر منتقل کیا جا سکے
+- **پورے کینوس ایریا کو صاف کرتا ہے** تاکہ پچھلا فریم ہٹایا جا سکے
 - **کینوس کو سیاہ پس منظر کے رنگ سے بھر دیتا ہے**
 - **ہیرو کی تصویر کو اس کی نئی پوزیشن پر دوبارہ بناتا ہے**
 
-✅ کیا آپ سوچ سکتے ہیں کہ کیوں ہیرو کو کئی فریمز فی سیکنڈ دوبارہ بنانا کارکردگی کے اخراجات کو بڑھا سکتا ہے؟ [اس پیٹرن کے متبادل](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) کے بارے میں پڑھیں۔
+✅ کیا آپ اس وجہ کے بارے میں سوچ سکتے ہیں کہ کیوں ہیرو کو کئی فریمز فی سیکنڈ دوبارہ بنانا کارکردگی کے اخراجات کو بڑھا سکتا ہے؟ [اس پیٹرن کے متبادل](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) کے بارے میں پڑھیں۔
 
 ## کی بورڈ ایونٹس کو ہینڈل کریں
 
-یہ وہ جگہ ہے جہاں ہم کھلاڑی کے ان پٹ کو کھیل کی کارروائی سے جوڑتے ہیں۔ جب کوئی اسپیس بار دبائے تاکہ لیزر فائر کرے یا تیر کی کلید دبائے تاکہ ایسٹروئیڈ سے بچ سکے، آپ کے کھیل کو اس ان پٹ کا پتہ لگانا اور اس پر ردعمل دینا ہوگا۔
+یہ وہ جگہ ہے جہاں ہم کھلاڑی کے ان پٹ کو گیم ایکشن سے جوڑتے ہیں۔ جب کوئی اسپیس بار کو دبائے تاکہ لیزر فائر کرے یا تیر والے بٹن کو دبائے تاکہ ایسٹروئیڈ سے بچ سکے، آپ کے کھیل کو اس ان پٹ کا پتہ لگانا اور اس کا جواب دینا ہوگا۔
 
-کی بورڈ ایونٹس ونڈو لیول پر ہوتے ہیں، یعنی آپ کی پوری براؤزر ونڈو ان کلیدوں کے دبانے کو سن رہی ہوتی ہے۔ دوسری طرف، ماؤس کلکس مخصوص عناصر سے منسلک ہو سکتے ہیں (جیسے کسی بٹن پر کلک کرنا)۔ ہمارے خلائی کھیل کے لیے، ہم کی بورڈ کنٹرولز پر توجہ مرکوز کریں گے کیونکہ یہی کھلاڑیوں کو کلاسک آرکیڈ کا احساس دیتا ہے۔
+کی بورڈ ایونٹس ونڈو لیول پر ہوتے ہیں، یعنی آپ کی پوری براؤزر ونڈو ان کی پریسز کو سن رہی ہوتی ہے۔ دوسری طرف، ماؤس کلکس مخصوص عناصر سے منسلک ہو سکتے ہیں (جیسے بٹن پر کلک کرنا)۔ ہمارے خلائی کھیل کے لیے، ہم کی بورڈ کنٹرولز پر توجہ مرکوز کریں گے کیونکہ یہی کھلاڑیوں کو کلاسک آرکیڈ کا احساس دیتا ہے۔
 
-یہ مجھے یاد دلاتا ہے کہ 1800 کی دہائی میں ٹیلی گراف آپریٹرز کو مورز کوڈ ان پٹ کو معنی خیز پیغامات میں ترجمہ کرنا پڑتا تھا – ہم کچھ ایسا ہی کر رہے ہیں، کلیدوں کے دبانے کو کھیل کے احکامات میں ترجمہ کر رہے ہیں۔
+یہ مجھے یاد دلاتا ہے کہ 1800 کی دہائی میں ٹیلی گراف آپریٹرز کو مورز کوڈ ان پٹ کو معنی خیز پیغامات میں ترجمہ کرنا پڑتا تھا – ہم کچھ ایسا ہی کر رہے ہیں، کی پریسز کو گیم کمانڈز میں ترجمہ کر رہے ہیں۔
 
-کسی ایونٹ کو ہینڈل کرنے کے لیے آپ کو ونڈو کے `addEventListener()` طریقہ استعمال کرنے کی ضرورت ہے اور اسے دو ان پٹ پیرامیٹرز فراہم کرنے کی ضرورت ہے۔ پہلا پیرامیٹر ایونٹ کا نام ہے، مثال کے طور پر `keyup`۔ دوسرا پیرامیٹر وہ فنکشن ہے جو ایونٹ ہونے کے نتیجے میں بلایا جانا چاہیے۔
+کسی ایونٹ کو ہینڈل کرنے کے لیے آپ کو ونڈو کے `addEventListener()` طریقہ استعمال کرنے کی ضرورت ہے اور اسے دو ان پٹ پیرامیٹرز فراہم کرنے کی ضرورت ہے۔ پہلا پیرامیٹر ایونٹ کا نام ہے، مثال کے طور پر `keyup`۔ دوسرا پیرامیٹر وہ فنکشن ہے جسے ایونٹ ہونے کے نتیجے میں بلایا جانا چاہیے۔
 
 یہاں ایک مثال ہے:
 
@@ -82,22 +150,41 @@ window.addEventListener('keyup', (evt) => {
 
 **یہاں کیا ہوتا ہے:**
 - **کی بورڈ ایونٹس کو پوری ونڈو پر سنتا ہے**
-- **ایونٹ آبجیکٹ کو کیپچر کرتا ہے** جس میں معلومات ہوتی ہیں کہ کون سی کلید دبائی گئی تھی
-- **چیک کرتا ہے** کہ دبائی گئی کلید کسی مخصوص کلید سے میل کھاتی ہے (اس صورت میں، اوپر کی تیر کی کلید)
+- **ایونٹ آبجیکٹ کو کیپچر کرتا ہے** جس میں یہ معلومات ہوتی ہیں کہ کون سی کلید دبائی گئی تھی
+- **چیک کرتا ہے** کہ دبائی گئی کلید کسی مخصوص کلید سے میل کھاتی ہے (اس صورت میں، اوپر کا تیر)
 - **کوڈ کو چلاتا ہے** جب شرط پوری ہو
 
-کلید کے ایونٹس کے لیے ایونٹ پر دو پراپرٹیز ہیں جنہیں آپ دیکھ سکتے ہیں کہ کون سی کلید دبائی گئی تھی:
+کی ایونٹس کے لیے ایونٹ پر دو پراپرٹیز ہیں جنہیں آپ دیکھ سکتے ہیں کہ کون سی کلید دبائی گئی تھی:
 
 - `key` - یہ دبائی گئی کلید کی سٹرنگ نمائندگی ہے، مثال کے طور پر `'ArrowUp'`
-- `keyCode` - یہ ایک عددی نمائندگی ہے، مثال کے طور پر `37`، جو `ArrowLeft` کے مطابق ہے
+- `keyCode` - یہ نمبر کی نمائندگی ہے، مثال کے طور پر `37`، جو `ArrowLeft` کے مطابق ہے
+
+✅ کی ایونٹ میں تبدیلی گیم ڈیولپمنٹ کے علاوہ بھی مفید ہے۔ اس تکنیک کے لیے آپ اور کیا استعمال سوچ سکتے ہیں؟
 
-✅ کلید کے ایونٹ کی ہیرا پھیری کھیل کی ترقی کے علاوہ بھی مفید ہے۔ اس تکنیک کے لیے آپ اور کیا استعمال سوچ سکتے ہیں؟
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant EventSystem
+    participant GameLogic
+    participant Hero
+    
+    User->>Browser: Presses ArrowUp key
+    Browser->>EventSystem: keydown event
+    EventSystem->>EventSystem: preventDefault()
+    EventSystem->>GameLogic: emit('KEY_EVENT_UP')
+    GameLogic->>Hero: hero.y -= 5
+    Hero->>Hero: Update position
+    
+    Note over Browser,GameLogic: Event flow prevents browser defaults
+    Note over GameLogic,Hero: Pub/sub pattern enables clean communication
+```
 
 ### خاص کلیدیں: ایک انتباہ!
 
-کچھ کلیدوں کے اندرونی براؤزر رویے ہوتے ہیں جو آپ کے کھیل میں مداخلت کر سکتے ہیں۔ تیر کی کلیدیں صفحہ کو اسکرول کرتی ہیں اور اسپیس بار نیچے چھلانگ لگاتا ہے – وہ رویے جو آپ نہیں چاہتے جب کوئی اپنا خلائی جہاز چلا رہا ہو۔
+کچھ کلیدوں میں بلٹ ان براؤزر رویے ہوتے ہیں جو آپ کے کھیل میں مداخلت کر سکتے ہیں۔ تیر والے بٹن صفحہ کو اسکرول کرتے ہیں اور اسپیس بار نیچے چھلانگ لگاتا ہے – وہ رویے جو آپ نہیں چاہتے جب کوئی اپنا خلائی جہاز چلا رہا ہو۔
 
-ہم ان ڈیفالٹ رویوں کو روک سکتے ہیں اور اپنے کھیل کو ان پٹ کو سنبھالنے دے سکتے ہیں۔ یہ اسی طرح ہے جیسے ابتدائی کمپیوٹر پروگرامرز کو کسٹم رویے بنانے کے لیے سسٹم انٹرپٹس کو اووررائیڈ کرنا پڑتا تھا – ہم صرف براؤزر لیول پر ایسا کر رہے ہیں۔ یہ کیسے کریں:
+ہم ان ڈیفالٹ رویوں کو روک سکتے ہیں اور اپنے کھیل کو ان پٹ کو سنبھالنے دے سکتے ہیں۔ یہ اس طرح ہے جیسے ابتدائی کمپیوٹر پروگرامرز کو کسٹم رویے بنانے کے لیے سسٹم انٹرپٹس کو اووررائیڈ کرنا پڑتا تھا – ہم صرف براؤزر لیول پر ایسا کر رہے ہیں۔ یہ کیسے کریں:
 
 ```javascript
 const onKeyDown = function (e) {
@@ -119,16 +206,32 @@ window.addEventListener('keydown', onKeyDown);
 ```
 
 **اس روک تھام کے کوڈ کو سمجھنا:**
-- **مخصوص کلید کوڈز کے لیے چیک کرتا ہے** جو ناپسندیدہ براؤزر رویے کا سبب بن سکتے ہیں
-- **تیر کی کلیدوں اور اسپیس بار کے لیے ڈیفالٹ براؤزر ایکشن کو روکتا ہے**
+- **مخصوص کی کوڈز کے لیے چیک کرتا ہے** جو ناپسندیدہ براؤزر رویے کا سبب بن سکتے ہیں
+- **تیر والے بٹن اور اسپیس بار کے لیے ڈیفالٹ براؤزر ایکشن کو روکتا ہے**
 - **دوسری کلیدوں کو عام طور پر کام کرنے دیتا ہے**
-- **`e.preventDefault()` استعمال کرتا ہے** تاکہ براؤزر کے اندرونی رویے کو روکا جا سکے
+- **براؤزر کے بلٹ ان رویے کو روکنے کے لیے `e.preventDefault()` استعمال کرتا ہے**
+
+### 🔄 **تعلیمی چیک ان**
+**ایونٹ ہینڈلنگ کی سمجھ**: خودکار حرکت کی طرف بڑھنے سے پہلے، یقینی بنائیں کہ آپ:
+- ✅ `keydown` اور `keyup` ایونٹس کے فرق کو بیان کر سکتے ہیں
+- ✅ سمجھتے ہیں کہ ہم ڈیفالٹ براؤزر رویے کیوں روکتے ہیں
+- ✅ بیان کر سکتے ہیں کہ ایونٹ لسٹنرز صارف کے ان پٹ کو گیم لاجک سے کیسے جوڑتے ہیں
+- ✅ ان کلیدوں کی شناخت کر سکتے ہیں جو گیم کنٹرولز میں مداخلت کر سکتی ہیں
+
+**فوری خود ٹیسٹ**: اگر آپ تیر والے بٹنوں کے لیے ڈیفالٹ رویے کو نہ روکتے تو کیا ہوتا؟
+*جواب: براؤزر صفحہ کو اسکرول کرے گا، گیم کی حرکت میں مداخلت کرے گا*
+
+**ایونٹ سسٹم آرکیٹیکچر**: آپ اب سمجھتے ہیں:
+- **ونڈو لیول سننا**: براؤزر لیول پر ایونٹس کو کیپچر کرنا
+- **ایونٹ آبجیکٹ پراپرٹیز**: `key` سٹرنگز بمقابلہ `keyCode` نمبر
+- **ڈیفالٹ روک تھام**: ناپسندیدہ براؤزر رویے کو روکنا
+- **مشروط منطق**: مخصوص کلیدوں کے امتزاج پر ردعمل دینا
 
 ## کھیل کی طرف سے پیدا کردہ حرکت
 
-اب بات کرتے ہیں ان اشیاء کی جو کھلاڑی کے ان پٹ کے بغیر حرکت کرتی ہیں۔ دشمن کے جہازوں کے اسکرین پر چلنے، سیدھی لائنوں میں گولیاں چلنے، یا پس منظر میں بادلوں کے بہنے کے بارے میں سوچیں۔ یہ خود مختار حرکت آپ کے کھیل کی دنیا کو زندہ محسوس کراتی ہے چاہے کوئی کنٹرولز کو نہ چھو رہا ہو۔
+اب بات کرتے ہیں ان اشیاء کی جو کھلاڑی کے انپٹ کے بغیر حرکت کرتی ہیں۔ دشمن کے جہازوں کے اسکرین پر چلنے، سیدھی لائنوں میں گولیاں چلانے، یا پس منظر میں بادلوں کے بہنے کے بارے میں سوچیں۔ یہ خود مختار حرکت آپ کے کھیل کی دنیا کو زندہ محسوس کرتی ہے چاہے کوئی کنٹرولز کو نہ چھو رہا ہو۔
 
-ہم جاوا اسکرپٹ کے اندرونی ٹائمرز کا استعمال کرتے ہیں تاکہ پوزیشنز کو باقاعدہ وقفوں پر اپ ڈیٹ کیا جا سکے۔ یہ تصور اسی طرح ہے جیسے پینڈولم گھڑیاں کام کرتی ہیں – ایک باقاعدہ میکانزم جو مستقل، وقت شدہ اعمال کو متحرک کرتا ہے۔ یہ کتنا آسان ہو سکتا ہے:
+ہم جاوا اسکرپٹ کے بلٹ ان ٹائمرز کا استعمال کرتے ہیں تاکہ پوزیشنز کو باقاعدہ وقفوں پر اپ ڈیٹ کیا جا سکے۔ یہ تصور اس طرح ہے جیسے پینڈولم گھڑیاں کام کرتی ہیں – ایک باقاعدہ میکانزم جو مستقل، وقت شدہ اعمال کو متحرک کرتا ہے۔ یہ کتنا آسان ہو سکتا ہے:
 
 ```javascript
 const id = setInterval(() => {
@@ -138,20 +241,45 @@ const id = setInterval(() => {
 ```
 
 **یہ حرکت کا کوڈ کیا کرتا ہے:**
-- **ایک ٹimer بناتا ہے** جو ہر 100 ملی سیکنڈز پر چلتا ہے
-- **دشمن کے y-کوآرڈینیٹ کو ہر بار 10 پکسلز سے اپ ڈیٹ کرتا ہے**
+- **ایک ٹائمر بناتا ہے** جو ہر 100 ملی سیکنڈز میں چلتا ہے
+- **دشمن کے y کوآرڈینیٹ کو ہر بار 10 پکسلز سے اپ ڈیٹ کرتا ہے**
 - **وقفہ ID کو محفوظ کرتا ہے** تاکہ ہم اسے بعد میں روک سکیں اگر ضرورت ہو
-- **دشمن کو خود بخود اسکرین پر نیچے کی طرف حرکت دیتا ہے**
+- **دشمن کو خود بخود اسکرین پر نیچے کی طرف منتقل کرتا ہے**
 
-## کھیل کا لوپ
+## گیم لوپ
 
-یہ وہ تصور ہے جو سب کچھ ایک ساتھ جوڑتا ہے – کھیل کا لوپ۔ اگر آپ کا کھیل ایک فلم ہوتا، تو کھیل کا لوپ فلم پروجیکٹر ہوتا، جو فریم کے بعد فریم دکھاتا تاکہ سب کچھ ہموار حرکت کرتا ہوا نظر آئے۔
+یہ وہ تصور ہے جو سب کچھ ایک ساتھ جوڑتا ہے – گیم لوپ۔ اگر آپ کا کھیل ایک فلم ہوتا، تو گیم لوپ فلم پروجیکٹر ہوتا، فریم کے بعد فریم دکھاتا تاکہ سب کچھ ہموار حرکت میں نظر آئے۔
 
-ہر کھیل کے پیچھے ایک ایسا لوپ چل رہا ہوتا ہے۔ یہ ایک فنکشن ہے جو تمام کھیل کی اشیاء کو اپ ڈیٹ کرتا ہے، اسکرین کو دوبارہ بناتا ہے، اور اس عمل کو مسلسل دہراتا ہے۔ یہ آپ کے ہیرو، تمام دشمنوں، کسی بھی لیزر کے ارد گرد اڑنے – پورے کھیل کی حالت کو ٹریک کرتا ہے۔
+ہر کھیل کے پیچھے ایک لوپ چل رہا ہوتا ہے۔ یہ ایک فنکشن ہے جو تمام گیم آبجیکٹس کو اپ ڈیٹ کرتا ہے، اسکرین کو دوبارہ بناتا ہے، اور اس عمل کو مسلسل دہراتا ہے۔ یہ آپ کے ہیرو، تمام دشمنوں، کسی بھی لیزرز کو ٹریک کرتا ہے – پورے گیم اسٹیٹ کو۔
 
 یہ تصور مجھے یاد دلاتا ہے کہ ابتدائی فلم کے اینیمیٹرز جیسے والٹ ڈزنی کو کرداروں کو فریم بہ فریم دوبارہ بنانا پڑتا تھا تاکہ حرکت کا وہم پیدا ہو۔ ہم بھی یہی کر رہے ہیں، بس کوڈ کے ساتھ پنسل کے بجائے۔
 
-یہاں ایک کھیل کا لوپ عام طور پر کوڈ میں کیسے نظر آ سکتا ہے:
+یہاں ایک گیم لوپ عام طور پر کوڈ میں کیسا نظر آ سکتا ہے:
+
+```mermaid
+flowchart TD
+    A["Start Game Loop"] --> B["Clear Canvas"]
+    B --> C["Fill Background"]
+    C --> D["Update Game Objects"]
+    D --> E["Draw Hero"]
+    E --> F["Draw Enemies"]
+    F --> G["Draw UI Elements"]
+    G --> H["Wait for Next Frame"]
+    H --> I{Game Running?}
+    I -->|Yes| B
+    I -->|No| J["End Game"]
+    
+    subgraph "Frame Rate Control"
+        K["60 FPS = 16.67ms"]
+        L["30 FPS = 33.33ms"]
+        M["10 FPS = 100ms"]
+    end
+    
+    style B fill:#ffebee
+    style D fill:#e1f5fe
+    style E fill:#e8f5e8
+    style F fill:#e8f5e8
+```
 
 ```javascript
 const gameLoopId = setInterval(() => {
@@ -167,10 +295,10 @@ const gameLoopId = setInterval(() => {
 }, 200);
 ```
 
-**کھیل کے لوپ کی ساخت کو سمجھنا:**
+**گیم لوپ کی ساخت کو سمجھنا:**
 - **پورے کینوس کو صاف کرتا ہے** تاکہ پچھلا فریم ہٹایا جا سکے
-- **پس منظر کو ایک ٹھوس رنگ سے بھر دیتا ہے**
-- **تمام کھیل کی اشیاء کو ان کی موجودہ پوزیشنز میں دوبارہ بناتا ہے**
+- **پس منظر کو ٹھوس رنگ سے بھرتا ہے**
+- **تمام گیم آبجیکٹس کو ان کی موجودہ پوزیشنز پر دوبارہ بناتا ہے**
 - **اس عمل کو ہر 200 ملی سیکنڈز میں دہراتا ہے** تاکہ ہموار اینیمیشن بن سکے
 - **فریم ریٹ کو منظم کرتا ہے** وقفہ کے وقت کو کنٹرول کر کے
 
@@ -178,15 +306,15 @@ const gameLoopId = setInterval(() => {
 
 اب ہم اس جامد منظر میں حرکت شامل کریں گے جو آپ نے پہلے بنایا تھا۔ ہم اسے اسکرین شاٹ سے ایک انٹرایکٹو تجربے میں تبدیل کرنے جا رہے ہیں۔ ہم اس پر قدم بہ قدم کام کریں گے تاکہ ہر حصہ آخری پر تعمیر ہو۔
 
-پچھلے سبق میں جہاں ہم نے چھوڑا تھا وہاں سے کوڈ حاصل کریں (یا اگر آپ کو نئی شروعات کی ضرورت ہو تو [حصہ II- اسٹارٹر](../../../../6-space-game/3-moving-elements-around/your-work) فولڈر میں کوڈ سے شروع کریں)۔
+پچھلے سبق میں جہاں ہم نے چھوڑا تھا وہاں سے کوڈ حاصل کریں (یا اگر آپ کو نئی شروعات کی ضرورت ہو تو [Part II- starter](../../../../6-space-game/3-moving-elements-around/your-work) فولڈر میں کوڈ سے شروع کریں)۔
 
 **آج ہم کیا بنا رہے ہیں:**
-- **ہیرو کنٹرولز**: تیر کی کلیدیں آپ کے خلائی جہاز کو اسکرین پر چلائیں گی
+- **ہیرو کنٹرولز**: تیر والے بٹن آپ کے خلائی جہاز کو اسکرین کے ارد گرد چلائیں گے
 - **دشمن کی حرکت**: وہ اجنبی جہاز اپنی پیش قدمی شروع کریں گے
 
 آئیے ان خصوصیات کو نافذ کرنا شروع کریں۔
 
-## تجویز کردہ مراحل
+## تجویز کردہ اقدامات
 
 ان فائلوں کو تلاش کریں جو آپ کے لیے `your-work` سب فولڈر میں بنائی گئی ہیں۔ اس میں درج ذیل شامل ہونا چاہیے:
 
@@ -199,7 +327,7 @@ const gameLoopId = setInterval(() => {
 -| package.json
 ```
 
-آپ اپنے پروجیکٹ کو `your-work` فولڈر میں شروع کریں گے:
+آپ اپنے پروجیکٹ کو `your-work` فولڈر میں شروع کرتے ہیں:
 
 ```bash
 cd your-work
@@ -207,17 +335,17 @@ npm start
 ```
 
 **یہ کمانڈ کیا کرتی ہے:**
-- **آپ کے پروجیکٹ ڈائریکٹری میں جاتی ہے**
-- **ایچ ٹی ٹی پی سرور شروع کرتی ہے** ایڈریس `http://localhost:5000` پر
-- **آپ کے کھیل کی فائلوں کو پیش کرتی ہے** تاکہ آپ انہیں براؤزر میں ٹیسٹ کر سکیں
+- **آپ کے پروجیکٹ ڈائریکٹری میں نیویگیٹ کرتی ہے**
+- **ایچ ٹی ٹی پی سرور کو ایڈریس `http://localhost:5000` پر شروع کرتی ہے**
+- **آپ کے گیم فائلز کو براؤزر میں ٹیسٹ کرنے کے لیے پیش کرتی ہے**
 
-اوپر دی گئی کمانڈ ایڈریس `http://localhost:5000` پر ایچ ٹی ٹی پی سرور شروع کرے گی۔ براؤزر کھولیں اور اس ایڈریس کو درج کریں، اس وقت یہ ہیرو اور تمام دشمنوں کو ظاہر کرے گا؛ ابھی کچھ حرکت نہیں ہو رہی ہے!
+اوپر دی گئی کمانڈ ایڈریس `http://localhost:5000` پر ایچ ٹی ٹی پی سرور شروع کرے گی۔ براؤزر کھولیں اور اس ایڈریس کو درج کریں، اس وقت یہ ہیرو اور تمام دشمنوں کو رینڈر کرے گا؛ ابھی کچھ حرکت نہیں ہو رہی - ابھی!
 
 ### کوڈ شامل کریں
 
-1. **ہیرو، دشمن، اور کھیل کی اشیاء کے لیے مخصوص آبجیکٹس شامل کریں**، ان میں `x` اور `y` پراپرٹیز ہونی چاہئیں۔ (یاد رکھیں [وراثت یا کمپوزیشن](../README.md) کے حصے پر)
+1. **ہیرو، دشمن اور گیم آبجیکٹ کے لیے مخصوص آبجیکٹس شامل کریں**، ان میں `x` اور `y` پراپرٹیز ہونی چاہئیں۔ (یاد رکھیں [Inheritance or composition](../README.md) کے حصے کو)۔
 
-   *اشارہ* `کھیل کی اشیاء` وہ ہونی چاہیے جس میں `x` اور `y` ہوں اور خود کو کینوس پر ڈرا کرنے کی صلاحیت ہو۔
+   *اشارہ* `گیم آبجیکٹ` وہ ہونا چاہیے جس میں `x` اور `y` ہوں اور کینوس پر خود کو ڈرا کرنے کی صلاحیت ہو۔
 
    > **ٹپ**: ایک نیا `GameObject` کلاس شامل کریں جس کا کنسٹرکٹر نیچے دیے گئے طریقے سے بیان کیا گیا ہو، اور پھر اسے کینوس پر ڈرا کریں:
 
@@ -240,12 +368,49 @@ npm start
     ```
 
     **اس بنیادی کلاس کو سمجھنا:**
-    - **عام پراپرٹیز کی وضاحت کرتا ہے** جو تمام کھیل کی اشیاء میں مشترک ہیں (پوزیشن، سائز، تصویر)
+    - **عام پراپرٹیز کی وضاحت کرتا ہے** جو تمام گیم آبجیکٹس شیئر کرتے ہیں (پوزیشن، سائز، تصویر)
     - **ایک `dead` فلیگ شامل کرتا ہے** تاکہ ٹریک کیا جا سکے کہ آیا آبجیکٹ کو ہٹایا جانا چاہیے
-    - **ایک `draw()` طریقہ فراہم کرتا ہے** جو آبجیکٹ کو کینوس پر رینڈر کرتا ہے
+    - **ایک `draw()` طریقہ فراہم کرتا ہے** جو کینوس پر آبجیکٹ کو رینڈر کرتا ہے
     - **تمام پراپرٹیز کے لیے ڈیفالٹ ویلیوز سیٹ کرتا ہے** جنہیں چائلڈ کلاسز اووررائیڈ کر سکتی ہیں
 
-    اب، اس `GameObject` کو بڑھا کر `Hero` اور `Enemy` بنائیں:
+    ```mermaid
+    classDiagram
+        class GameObject {
+            +x: number
+            +y: number
+            +dead: boolean
+            +type: string
+            +width: number
+            +height: number
+            +img: Image
+            +draw(ctx)
+        }
+        
+        class Hero {
+            +speed: number
+            +type: "Hero"
+            +width: 98
+            +height: 75
+        }
+        
+        class Enemy {
+            +type: "Enemy"
+            +width: 98
+            +height: 50
+            +setInterval()
+        }
+        
+        GameObject <|-- Hero
+        GameObject <|-- Enemy
+        
+        class EventEmitter {
+            +listeners: object
+            +on(message, listener)
+            +emit(message, payload)
+        }
+    ```
+
+    اب اس `GameObject` کو بڑھا کر `Hero` اور `Enemy` بنائیں:
     
     ```javascript
     class Hero extends GameObject {
@@ -279,14 +444,14 @@ npm start
     ```
 
     **ان کلاسز میں کلیدی تصورات:**
-    - **`GameObject` سے وراثت حاصل کرتا ہے** `extends` کلیدی لفظ استعمال کر کے
+    - **`GameObject` سے وراثت حاصل کرتا ہے** `extends` کی ورڈ کا استعمال کرتے ہوئے
     - **پیرنٹ کنسٹرکٹر کو `super(x, y)` کے ساتھ کال کرتا ہے**
-    - **ہر آبجیکٹ کی قسم کے لیے مخصوص ڈائمینشنز اور پراپرٹیز سیٹ کرتا ہے**
-    - **دشمنوں کے لیے خودکار حرکت نافذ کرتا ہے** `setInterval()` استعمال کر کے
+    - **ہر آبجیکٹ کی قسم کے لیے مخصوص طول و عرض اور پراپرٹیز سیٹ کرتا ہے**
+    - **دشمنوں کے لیے خودکار حرکت کو نافذ کرتا ہے** `setInterval()` کا استعمال کرتے ہوئے
 
-2. **کلید کے ایونٹ ہینڈلرز شامل کریں** تاکہ کلید کی نیویگیشن کو ہینڈل کیا جا سکے (ہیرو کو اوپر/نیچے، بائیں/دائیں حرکت دیں)
+2. **کی ایونٹ ہینڈلرز شامل کریں** تاکہ ہیرو کو اوپر/نیچے، بائیں/دائیں منتقل کیا جا سکے
 
-   *یاد رکھیں* یہ ایک کارٹیسیئن سسٹم ہے، اوپر-بائیں `0,0` ہے۔ نیز، ڈیفالٹ رویے کو روکنے کے لیے کوڈ شامل کرنا یاد رکھیں۔
+   *یاد رکھیں* یہ ایک کارٹیزین سسٹم ہے، اوپر بائیں `0,0` ہے۔ نیز یاد رکھیں کہ ڈیفالٹ رویے کو روکنے کے لیے کوڈ شامل کریں۔
 
    > **ٹپ**: اپنا `onKeyDown` فنکشن بنائیں اور اسے ونڈو سے منسلک کریں:
 
@@ -311,84 +476,96 @@ npm start
    ```
     
    **یہ ایونٹ ہینڈلر کیا کرتا ہے:**
-   - **پوری ونڈو پر کلید کے دبانے کے ایونٹس سنتا ہے**
-   - **کلید کوڈ کو لاگ کرتا ہے** تاکہ آپ دیکھ سکیں کون سی کلیدیں دبائی جا رہی ہیں
-   - **تیر کی کلیدوں اور اسپیس بار کے لیے ڈیفالٹ براؤزر رویے کو روکتا ہے**
+   - **پوری ونڈو پر کی ڈاؤن ایونٹس سنتا ہے**
+   - **دبائی گئی کلید کو لاگ کرتا ہے** تاکہ آپ یہ دیکھ سکیں کہ کون سی کلیدیں دبائی جا رہی ہیں
+   - **تیر والے بٹنوں اور اسپیس بار کے لیے ڈیفالٹ براؤزر رویے کو روکتا ہے**
    - **دوسری کلیدوں کو عام طور پر کام کرنے دیتا ہے**
    
-   اس وقت اپنے براؤزر کنسول کو چیک کریں، اور دیکھیں کہ کلید کے دبانے لاگ ہو رہے ہیں۔
+   اس وقت اپنے براؤزر کنسول کو چیک کریں، اور دیکھیں کہ کی اسٹروکس لاگ ہو رہے ہیں۔
 
-3. **[پب سب پیٹرن](../README.md) نافذ کریں**، یہ آپ کے کوڈ کو صاف رکھے گا جیسے آپ باقی حصے پر عمل کریں گے۔
+3. **[پب سب پیٹرن](../README.md) نافذ کریں**، یہ آپ کے کوڈ کو صاف رکھے گا جیسے آپ باقی حصے پر عمل کریں۔
 
-   پبلش-سبسکرائب پیٹرن آپ کے کوڈ کو منظم کرنے میں مدد کرتا ہے ایونٹ کا پتہ لگانے کو ایونٹ ہینڈلنگ سے الگ کر کے۔ یہ آپ کے کوڈ کو زیادہ ماڈیولر اور برقرار رکھنے میں آسان بناتا ہے۔
+   پبلش-سبسکرائب پیٹرن آپ کے کوڈ کو منظم کرنے میں مدد کرتا ہے
+   - **تمام گیم آبجیکٹس کو رکھنے کے لیے** ایک آرے کو انیشیالائز کریں
 
-   اس آخری حصے کو کرنے کے لیے، آپ کر سکتے ہیں:
-
-   1. **ونڈو پر ایک ایونٹ لسٹنر شامل کریں**:
-
-       ```javascript
-       window.addEventListener("keyup", (evt) => {
-         if (evt.key === "ArrowUp") {
-           eventEmitter.emit(Messages.KEY_EVENT_UP);
-         } else if (evt.key === "ArrowDown") {
-           eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-         } else if (evt.key === "ArrowLeft") {
-           eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-         } else if (evt.key === "ArrowRight") {
-           eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-         }
-       });
-       ```
-
-   **یہ ایونٹ سسٹم کیا کرتا ہے:**
-   - **کی بورڈ ان پٹ کا پتہ لگاتا ہے** اور اسے کسٹم کھیل کے ایونٹس میں تبدیل کرتا ہے
-   - **ان پٹ کا پتہ لگانے کو کھیل کی منطق سے الگ کرتا ہے**
-   - **کنٹرولز کو بعد میں تبدیل کرنا آسان بناتا ہے** بغیر کھیل کے کوڈ کو متاثر کیے
-   - **متعدد سسٹمز کو ایک ہی ان پٹ پر ردعمل دینے کی اجازت دیتا ہے**
-
-   2. **ایک EventEmitter کلاس بنائیں** تاکہ پیغامات کو پبلش اور سبسکرائب کیا جا سکے:
+   4. **گیم کو انیشیالائز کریں**
 
        ```javascript
-       class EventEmitter {
-         constructor() {
-           this.listeners = {};
-         }
+       function initGame() {
+         gameObjects = [];
+         createEnemies();
+         createHero();
        
-         on(message, listener) {
-           if (!this.listeners[message]) {
-             this.listeners[message] = [];
-           }
-           this.listeners[message].push(listener);
-         }
+         eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+           hero.y -= 5;
+         });
        
-   3. **کانسٹینٹس شامل کریں** اور EventEmitter سیٹ کریں:
-
-       ```javascript
-       const Messages = {
-         KEY_EVENT_UP: "KEY_EVENT_UP",
-         KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-         KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-         KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-       };
+         eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+           hero.y += 5;
+         });
+       
+         eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+           hero.x -= 5;
+         });
        
-       let heroImg, 
-           enemyImg, 
-           laserImg,
-           canvas, ctx, 
-           gameObjects = [], 
-           hero, 
-           eventEmitter = new EventEmitter();
-       ```
-
-   **سیٹ اپ کو سمجھنا:**
-   - **پیغام کے کانسٹینٹس کی وضاحت کرتا ہے** تاکہ ٹائپوز سے بچا جا سکے اور ریفیکٹرنگ کو آسان بنایا جا سکے
-   - **تصاویر، کینوس کنٹیکسٹ، اور کھیل کی حالت کے
-- **بناتا ہے** دشمنوں کی ایک گرڈ nested loops کے ذریعے  
-- **تفویض کرتا ہے** دشمن کی تصویر ہر دشمن object کو  
-- **شامل کرتا ہے** ہر دشمن کو global game objects array میں  
-
-اور ایک `createHero()` فنکشن شامل کریں جو ہیرو کے لیے اسی طرح کا عمل کرے۔  
+4. **گیم لوپ سیٹ اپ کریں**
+
+   `window.onload` فنکشن کو ریفیکٹر کریں تاکہ گیم کو انیشیالائز کیا جا سکے اور ایک اچھے وقفے پر گیم لوپ سیٹ اپ کیا جا سکے۔ آپ ایک لیزر بیم بھی شامل کریں گے:
 
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      const gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100);
+    };
+    ```
+
+   **گیم سیٹ اپ کو سمجھنا:**
+   - **انتظار کرتا ہے** کہ صفحہ مکمل طور پر لوڈ ہو جائے
+   - **کینوس عنصر اور اس کے 2D رینڈرنگ کانٹیکسٹ کو حاصل کرتا ہے**
+   - **تمام امیج اثاثے غیر متزامن طور پر لوڈ کرتا ہے** `await` کا استعمال کرتے ہوئے
+   - **گیم لوپ کو 100ms وقفے (10 FPS) پر چلانا شروع کرتا ہے**
+   - **ہر فریم پر پوری اسکرین کو صاف کرتا ہے اور دوبارہ ڈرا کرتا ہے**
+
+5. **کوڈ شامل کریں** تاکہ دشمنوں کو ایک خاص وقفے پر حرکت دی جا سکے
+
+    `createEnemies()` فنکشن کو ریفیکٹر کریں تاکہ دشمنوں کو تخلیق کیا جا سکے اور انہیں نئے gameObjects کلاس میں دھکیلا جا سکے:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+
+    **دشمن تخلیق کیا کرتا ہے:**
+    - **پوزیشنز کا حساب لگاتا ہے** تاکہ دشمنوں کو اسکرین کے مرکز میں رکھا جا سکے
+    - **دشمنوں کا ایک گرڈ تخلیق کرتا ہے** نیسٹڈ لوپس کا استعمال کرتے ہوئے
+    - **ہر دشمن آبجیکٹ کو دشمن امیج تفویض کرتا ہے**
+    - **ہر دشمن کو گلوبل گیم آبجیکٹس آرے میں شامل کرتا ہے**
+    
+    اور ایک `createHero()` فنکشن شامل کریں تاکہ ہیرو کے لیے بھی اسی طرح کا عمل کیا جا سکے۔
+    
     ```javascript
     function createHero() {
       hero = new Hero(
@@ -399,28 +576,48 @@ npm start
       gameObjects.push(hero);
     }
     ```
-  
-**ہیرو کی تخلیق کیا کرتی ہے:**  
-- **پوزیشن کرتا ہے** ہیرو کو اسکرین کے نیچے مرکز میں  
-- **تفویض کرتا ہے** ہیرو کی تصویر ہیرو object کو  
-- **شامل کرتا ہے** ہیرو کو game objects array میں rendering کے لیے  
 
-اور آخر میں، ایک `drawGameObjects()` فنکشن شامل کریں تاکہ drawing شروع کی جا سکے:  
+    **ہیرو تخلیق کیا کرتا ہے:**
+    - **ہیرو کو اسکرین کے نیچے مرکز میں پوزیشن دیتا ہے**
+    - **ہیرو آبجیکٹ کو ہیرو امیج تفویض کرتا ہے**
+    - **ہیرو کو رینڈرنگ کے لیے گیم آبجیکٹس آرے میں شامل کرتا ہے**
+
+    اور آخر میں، ایک `drawGameObjects()` فنکشن شامل کریں تاکہ ڈرائنگ شروع کی جا سکے:
 
     ```javascript
     function drawGameObjects(ctx) {
       gameObjects.forEach(go => go.draw(ctx));
     }
     ```
-  
-**drawing فنکشن کو سمجھنا:**  
-- **Iterates کرتا ہے** تمام game objects array میں  
-- **Calls کرتا ہے** `draw()` method ہر object پر  
-- **پاس کرتا ہے** canvas context تاکہ objects خود کو render کر سکیں  
-
-آپ کے دشمن آپ کے ہیرو spaceship پر حملہ شروع کر دیں گے!  
-}  
-}  
+
+    **ڈرائنگ فنکشن کو سمجھنا:**
+    - **تمام گیم آبجیکٹس آرے میں سے گزرتا ہے**
+    - **ہر آبجیکٹ پر `draw()` میتھڈ کو کال کرتا ہے**
+    - **کینوس کانٹیکسٹ پاس کرتا ہے تاکہ آبجیکٹس خود کو رینڈر کر سکیں**
+
+    ### 🔄 **تعلیمی جائزہ**
+    **مکمل گیم سسٹم کی سمجھ**: اپنی پوری آرکیٹیکچر کی مہارت کی تصدیق کریں:
+    - ✅ وراثت کیسے ہیرو اور دشمن کو مشترکہ GameObject خصوصیات فراہم کرتی ہے؟
+    - ✅ پب/سب پیٹرن آپ کے کوڈ کو زیادہ قابلِ برقرار کیوں بناتا ہے؟
+    - ✅ گیم لوپ ہموار اینیمیشن بنانے میں کیا کردار ادا کرتا ہے؟
+    - ✅ ایونٹ لسٹنرز صارف کی ان پٹ کو گیم آبجیکٹ کے رویے سے کیسے جوڑتے ہیں؟
+
+    **سسٹم انٹیگریشن**: آپ کا گیم اب ظاہر کرتا ہے:
+    - **آبجیکٹ اورینٹڈ ڈیزائن**: بنیادی کلاسز کے ساتھ خصوصی وراثت
+    - **ایونٹ ڈرائیون آرکیٹیکچر**: پب/سب پیٹرن کے لیے لوز کپلنگ
+    - **اینیمیشن فریم ورک**: گیم لوپ کے ساتھ مستقل فریم اپڈیٹس
+    - **انپٹ ہینڈلنگ**: کی بورڈ ایونٹس کے ساتھ ڈیفالٹ پریوینشن
+    - **اثاثہ مینجمنٹ**: امیج لوڈنگ اور اسپرائٹ رینڈرنگ
+
+    **پروفیشنل پیٹرنز**: آپ نے نافذ کیا:
+    - **تشویشات کی علیحدگی**: انپٹ، منطق، اور رینڈرنگ الگ الگ
+    - **پولی مورفزم**: تمام گیم آبجیکٹس مشترکہ ڈرائنگ انٹرفیس شیئر کرتے ہیں
+    - **میسج پاسنگ**: اجزاء کے درمیان صاف مواصلات
+    - **وسائل کا انتظام**: مؤثر اسپرائٹ اور اینیمیشن ہینڈلنگ
+
+    آپ کے دشمن آپ کے ہیرو اسپیس شپ پر حملہ کرنا شروع کر دیں گے!
+      }
+    }
     ```
     
     and add a `createHero()` function to do a similar process for the hero.
@@ -435,68 +632,189 @@ npm start
       gameObjects.push(hero);
     }
     ```
-  
-اور آخر میں، ایک `drawGameObjects()` فنکشن شامل کریں تاکہ drawing شروع کی جا سکے:  
+
+    اور آخر میں، ایک `drawGameObjects()` فنکشن شامل کریں تاکہ ڈرائنگ شروع کی جا سکے:
 
     ```javascript
     function drawGameObjects(ctx) {
       gameObjects.forEach(go => go.draw(ctx));
     }
     ```
-  
-آپ کے دشمن آپ کے ہیرو spaceship پر حملہ شروع کر دیں گے!  
+
+    آپ کے دشمن آپ کے ہیرو اسپیس شپ پر حملہ کرنا شروع کر دیں گے!
 
 ---
 
-## GitHub Copilot Agent Challenge 🚀  
+## GitHub Copilot Agent Challenge 🚀
 
-یہاں ایک چیلنج ہے جو آپ کے گیم کی polish کو بہتر بنائے گا: boundaries اور smooth controls شامل کرنا۔ فی الحال، آپ کا ہیرو اسکرین سے باہر جا سکتا ہے، اور حرکت تھوڑی بے ترتیب محسوس ہو سکتی ہے۔  
+یہاں ایک چیلنج ہے جو آپ کے گیم کی خوبصورتی کو بہتر بنائے گا: حدود اور ہموار کنٹرولز شامل کرنا۔ فی الحال، آپ کا ہیرو اسکرین سے باہر جا سکتا ہے، اور حرکت تھوڑی جھٹک دار محسوس ہو سکتی ہے۔
 
-**آپ کا مشن:** اپنے spaceship کو زیادہ حقیقت پسندانہ بنائیں boundaries اور fluid movement کو نافذ کر کے۔ یہ بالکل ویسا ہی ہے جیسے NASA کے flight control systems spacecraft کو محفوظ operational parameters سے تجاوز کرنے سے روکتے ہیں۔  
+**آپ کا مشن:** اپنے اسپیس شپ کو زیادہ حقیقت پسندانہ بنائیں اسکرین حدود اور ہموار حرکت کو نافذ کر کے۔ یہ بالکل ویسا ہی ہے جیسے NASA کے فلائٹ کنٹرول سسٹمز خلائی جہاز کو محفوظ آپریشنل پیرامیٹرز سے تجاوز کرنے سے روکتے ہیں۔
 
-**یہ بنائیں:** ایک ایسا نظام جو آپ کے ہیرو spaceship کو اسکرین پر رکھے، اور controls کو smooth بنائے۔ جب کھلاڑی arrow key کو دبائے رکھیں، تو ship کو مسلسل glide کرنا چاہیے بجائے discrete steps میں حرکت کرنے کے۔ اسکرین boundaries پر پہنچنے پر visual feedback شامل کرنے پر غور کریں – شاید play area کے edge کو ظاہر کرنے کے لیے ایک subtle effect۔  
+**یہ بنائیں:** ایک ایسا سسٹم بنائیں جو آپ کے ہیرو اسپیس شپ کو اسکرین پر رکھے، اور کنٹرولز کو ہموار بنائے۔ جب کھلاڑی ایک تیر والے بٹن کو دبائے رکھیں، تو جہاز کو مسلسل گلائیڈ کرنا چاہیے بجائے کہ الگ الگ قدموں میں حرکت کرے۔ اسکرین حدود تک پہنچنے پر بصری تاثرات شامل کرنے پر غور کریں – شاید کھیل کے علاقے کے کنارے کی نشاندہی کرنے کے لیے ایک ہلکا اثر۔
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔  
+مزید جانیں [ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں یہاں۔
 
-## 🚀 Challenge  
+## 🚀 چیلنج
 
-جیسے جیسے پروجیکٹس بڑھتے ہیں، code organization زیادہ اہم ہو جاتی ہے۔ آپ نے محسوس کیا ہوگا کہ آپ کی فائل functions، variables، اور classes کے ساتھ بھری ہوئی ہے۔ یہ بالکل ویسا ہی ہے جیسے Apollo mission کے engineers کو code کو واضح اور قابل انتظام بنانے کے لیے systems بنانا پڑے جن پر مختلف teams ایک ساتھ کام کر سکیں۔  
+جیسے جیسے پروجیکٹس بڑھتے ہیں، کوڈ کی تنظیم زیادہ اہم ہو جاتی ہے۔ آپ نے شاید محسوس کیا ہو کہ آپ کی فائل فنکشنز، ویریبلز، اور کلاسز کے ساتھ بھری ہوئی ہے۔ یہ مجھے یاد دلاتا ہے کہ اپولو مشن کوڈ کو منظم کرنے والے انجینئرز کو واضح، قابلِ برقرار سسٹمز بنانے پڑے جن پر متعدد ٹیمیں ایک ساتھ کام کر سکیں۔
 
-**آپ کا مشن:**  
-ایک software architect کی طرح سوچیں۔ آپ اپنے code کو کیسے organize کریں گے تاکہ چھ مہینے بعد، آپ (یا کوئی teammate) سمجھ سکے کہ کیا ہو رہا ہے؟ چاہے سب کچھ ابھی ایک فائل میں رہے، آپ بہتر organization بنا سکتے ہیں:  
+**آپ کا مشن:**
+ایک سافٹ ویئر آرکیٹیکٹ کی طرح سوچیں۔ آپ اپنے کوڈ کو کیسے منظم کریں گے تاکہ چھ مہینے بعد، آپ (یا کوئی ساتھی) سمجھ سکے کہ کیا ہو رہا ہے؟ اگر سب کچھ ابھی ایک فائل میں رہتا ہے، تو بھی آپ بہتر تنظیم بنا سکتے ہیں:
 
-- **متعلقہ functions کو گروپ کرنا** واضح comment headers کے ساتھ  
-- **Concerns کو الگ کرنا** - game logic کو rendering سے الگ رکھیں  
-- **Consistent naming** conventions کا استعمال variables اور functions کے لیے  
-- **Modules یا namespaces بنانا** تاکہ گیم کے مختلف پہلوؤں کو organize کیا جا سکے  
-- **Documentation شامل کرنا** جو ہر بڑے section کے مقصد کو بیان کرے  
+- **متعلقہ فنکشنز کو گروپ کرنا** واضح تبصرہ ہیڈرز کے ساتھ
+- **تشویشات کو الگ کرنا** - گیم منطق کو رینڈرنگ سے الگ رکھیں
+- **ویریبلز اور فنکشنز کے لیے مستقل نام دینے کے اصول استعمال کرنا**
+- **ماڈیولز یا نام اسپیسز بنانا** تاکہ گیم کے مختلف پہلوؤں کو منظم کیا جا سکے
+- **دستاویزات شامل کرنا** جو ہر بڑے سیکشن کے مقصد کی وضاحت کرے
 
-**Reflection سوالات:**  
-- آپ کے code کے کون سے حصے سب سے زیادہ مشکل ہیں جب آپ ان پر واپس آتے ہیں؟  
-- آپ اپنے code کو کیسے organize کر سکتے ہیں تاکہ کسی اور کے لیے contribute کرنا آسان ہو؟  
-- اگر آپ نئے features جیسے power-ups یا مختلف دشمن types شامل کرنا چاہیں تو کیا ہوگا؟  
+**عکاسی کے سوالات:**
+- آپ کے کوڈ کے کون سے حصے سب سے زیادہ مشکل ہیں جب آپ ان پر واپس آتے ہیں؟
+- آپ اپنے کوڈ کو کیسے منظم کر سکتے ہیں تاکہ کسی اور کے لیے تعاون کرنا آسان ہو؟
+- اگر آپ پاور اپس یا مختلف دشمن اقسام جیسی نئی خصوصیات شامل کرنا چاہتے ہیں تو کیا ہوگا؟
 
-## Post-Lecture Quiz  
+## لیکچر کے بعد کوئز
 
-[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/34)  
+[لیکچر کے بعد کوئز](https://ff-quizzes.netlify.app/web/quiz/34)
 
-## Review & Self Study  
+## جائزہ اور خود مطالعہ
 
-ہم سب کچھ شروع سے بنا رہے ہیں، جو سیکھنے کے لیے شاندار ہے، لیکن یہاں ایک چھوٹا راز ہے – کچھ حیرت انگیز JavaScript frameworks موجود ہیں جو آپ کے لیے بہت سا کام آسان بنا سکتے ہیں۔ جب آپ ان بنیادی اصولوں میں آرام دہ محسوس کریں جو ہم نے cover کیے ہیں، تو یہ [دستیاب چیزوں کو explore کرنے](https://github.com/collections/javascript-game-engines) کے قابل ہے۔  
+ہم نے سب کچھ شروع سے بنایا ہے، جو سیکھنے کے لیے شاندار ہے، لیکن یہاں ایک چھوٹا راز ہے – کچھ حیرت انگیز جاوا اسکرپٹ فریم ورک موجود ہیں جو آپ کے لیے بہت سا کام سنبھال سکتے ہیں۔ ایک بار جب آپ ان بنیادی اصولوں کے ساتھ آرام دہ محسوس کریں جو ہم نے کور کیے ہیں، تو یہ [دستیاب چیزوں کو دریافت کرنے](https://github.com/collections/javascript-game-engines) کے قابل ہے۔
 
-Frameworks کو ایسے سمجھیں جیسے آپ کے پاس ایک اچھی طرح سے stocked toolbox ہو بجائے ہر tool کو خود بنانے کے۔ وہ ان code organization challenges کو حل کر سکتے ہیں جن کے بارے میں ہم نے بات کی، اور ایسے features پیش کر سکتے ہیں جنہیں خود بنانے میں ہفتے لگ جائیں گے۔  
+فریم ورک کو ایسے سمجھیں جیسے آپ کے پاس ایک اچھی طرح سے اسٹاک شدہ ٹول باکس ہو بجائے کہ ہر ٹول کو ہاتھ سے بنائیں۔ وہ ان کوڈ تنظیم کے چیلنجز کو حل کر سکتے ہیں جن کے بارے میں ہم نے بات کی، اور وہ خصوصیات پیش کرتے ہیں جنہیں بنانے میں ہفتے لگ سکتے ہیں۔
 
-**Explore کرنے کے قابل چیزیں:**  
-- گیم engines code کو کیسے organize کرتے ہیں – آپ ان کے clever patterns سے حیران ہوں گے  
-- Performance tricks تاکہ canvas games butter-smooth چلیں  
-- Modern JavaScript features جو آپ کے code کو صاف اور زیادہ maintainable بنا سکتے ہیں  
-- گیم objects اور ان کے تعلقات کو manage کرنے کے مختلف طریقے  
+**دریافت کرنے کے قابل چیزیں:**
+- گیم انجن کوڈ کو کیسے منظم کرتے ہیں – آپ ان کے استعمال کردہ ہوشیار پیٹرنز پر حیران ہوں گے
+- کینوس گیمز کو بٹر-سموٹھ چلانے کے لیے پرفارمنس ٹرکس  
+- جدید جاوا اسکرپٹ خصوصیات جو آپ کے کوڈ کو صاف اور زیادہ قابلِ برقرار بنا سکتی ہیں
+- گیم آبجیکٹس اور ان کے تعلقات کو منظم کرنے کے مختلف طریقے
 
-## Assignment  
+## 🎯 آپ کی گیم اینیمیشن مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title Game Animation & Interaction Learning Progression
+    
+    section Movement Fundamentals (20 minutes)
+        Animation Principles: Frame-based animation
+                            : Position updates
+                            : Coordinate systems
+                            : Smooth movement
+        
+    section Event Systems (25 minutes)
+        User Input: Keyboard event handling
+                  : Default behavior prevention
+                  : Event object properties
+                  : Window-level listening
+        
+    section Game Architecture (30 minutes)
+        Object Design: Inheritance patterns
+                     : Base class creation
+                     : Specialized behaviors
+                     : Polymorphic interfaces
+        
+    section Communication Patterns (35 minutes)
+        Pub/Sub Implementation: Event emitters
+                              : Message constants
+                              : Loose coupling
+                              : System integration
+        
+    section Game Loop Mastery (40 minutes)
+        Real-time Systems: Frame rate control
+                         : Update/render cycle
+                         : State management
+                         : Performance optimization
+        
+    section Advanced Techniques (45 minutes)
+        Professional Features: Collision detection
+                             : Physics simulation
+                             : State machines
+                             : Component systems
+        
+    section Game Engine Concepts (1 week)
+        Framework Understanding: Entity-component systems
+                               : Scene graphs
+                               : Asset pipelines
+                               : Performance profiling
+        
+    section Production Skills (1 month)
+        Professional Development: Code organization
+                                : Team collaboration
+                                : Testing strategies
+                                : Deployment optimization
+```
 
-[Comment your code](assignment.md)  
+### 🛠️ آپ کی گیم ڈیولپمنٹ ٹول کٹ کا خلاصہ
+
+اس سبق کو مکمل کرنے کے بعد، آپ نے مہارت حاصل کی:
+- **اینیمیشن اصول**: فریم پر مبنی حرکت اور ہموار ٹرانزیشنز
+- **ایونٹ ڈرائیون پروگرامنگ**: کی بورڈ انپٹ ہینڈلنگ کے ساتھ مناسب ایونٹ مینجمنٹ
+- **آبجیکٹ اورینٹڈ ڈیزائن**: وراثت کی درجہ بندی اور پولی مورفک انٹرفیسز
+- **مواصلاتی پیٹرنز**: پب/سب آرکیٹیکچر کے لیے قابلِ برقرار کوڈ
+- **گیم لوپ آرکیٹیکچر**: حقیقی وقت کی اپڈیٹ اور رینڈرنگ سائیکلز
+- **انپٹ سسٹمز**: صارف کنٹرول میپنگ کے ساتھ ڈیفالٹ رویے کی روک تھام
+- **اثاثہ مینجمنٹ**: اسپرائٹ لوڈنگ اور مؤثر رینڈرنگ تکنیک
+
+### ⚡ **آپ اگلے 5 منٹ میں کیا کر سکتے ہیں**
+- [ ] براؤزر کنسول کھولیں اور `addEventListener('keydown', console.log)` آزمائیں تاکہ کی بورڈ ایونٹس دیکھ سکیں
+- [ ] ایک سادہ div عنصر بنائیں اور اسے تیر والے بٹنوں کے ذریعے حرکت دیں
+- [ ] `setInterval` کے ساتھ مسلسل حرکت پیدا کرنے کا تجربہ کریں
+- [ ] `event.preventDefault()` کے ساتھ ڈیفالٹ رویے کو روکنے کی کوشش کریں
+
+### 🎯 **آپ اس گھنٹے میں کیا حاصل کر سکتے ہیں**
+- [ ] لیکچر کے بعد کوئز مکمل کریں اور ایونٹ ڈرائیون پروگرامنگ کو سمجھیں
+- [ ] مکمل کی بورڈ کنٹرولز کے ساتھ حرکت کرنے والا ہیرو اسپیس شپ بنائیں
+- [ ] دشمنوں کی ہموار حرکت کے پیٹرنز نافذ کریں
+- [ ] حدود شامل کریں تاکہ گیم آبجیکٹس اسکرین سے باہر نہ جائیں
+- [ ] گیم آبجیکٹس کے درمیان بنیادی تصادم کا پتہ لگائیں
+
+### 📅 **آپ کا ہفتہ بھر کا اینیمیشن سفر**
+- [ ] مکمل اسپیس گیم بنائیں ہموار حرکت اور تعاملات کے ساتھ
+- [ ] جدید حرکت کے پیٹرنز شامل کریں جیسے کہ منحنی خطوط، تیز رفتاری، اور فزکس
+- [ ] ہموار ٹرانزیشنز اور ایزنگ فنکشنز نافذ کریں
+- [ ] پارٹیکل ایفیکٹس اور بصری تاثرات کے سسٹمز بنائیں
+- [ ] گیم پرفارمنس کو 60fps گیم پلے کے لیے بہتر بنائیں
+- [ ] موبائل ٹچ کنٹرولز اور ریسپانسیو ڈیزائن شامل کریں
+
+### 🌟 **آپ کا مہینہ بھر کا انٹرایکٹو ڈیولپمنٹ**
+- [ ] پیچیدہ انٹرایکٹو ایپلیکیشنز بنائیں جدید اینیمیشن سسٹمز کے ساتھ
+- [ ] اینیمیشن لائبریریاں جیسے GSAP سیکھیں یا اپنا اینیمیشن انجن بنائیں
+- [ ] اوپن سورس گیم ڈیولپمنٹ اور اینیمیشن پروجیکٹس میں تعاون کریں
+- [ ] گرافکس-انٹینسیو ایپلیکیشنز کے لیے پرفارمنس آپٹیمائزیشن میں مہارت حاصل کریں
+- [ ] گیم ڈیولپمنٹ اور اینیمیشن کے بارے میں تعلیمی مواد بنائیں
+- [ ] جدید انٹرایکٹو پروگرامنگ مہارتوں کو ظاہر کرنے والا پورٹ فولیو بنائیں
+
+**حقیقی دنیا کی ایپلیکیشنز**: آپ کی گیم اینیمیشن مہارت براہ راست لاگو ہوتی ہے:
+- **انٹرایکٹو ویب ایپلیکیشنز**: متحرک ڈیش بورڈز اور حقیقی وقت کے انٹرفیسز
+- **ڈیٹا ویژولائزیشن**: متحرک چارٹس اور انٹرایکٹو گرافکس
+- **تعلیمی سافٹ ویئر**: انٹرایکٹو سیمولیشنز اور سیکھنے کے ٹولز
+- **موبائل ڈیولپمنٹ**: ٹچ پر مبنی گیمز اور اشارہ ہینڈلنگ
+- **ڈیسک ٹاپ ایپلیکیشنز**: الیکٹران ایپس ہموار اینیمیشنز کے ساتھ
+- **ویب اینیمیشنز**: CSS اور جاوا اسکرپٹ اینیمیشن لائبریریاں
+
+**حاصل کردہ پیشہ ورانہ مہارتیں**: آپ اب کر سکتے ہیں:
+- **آرکیٹیکٹ** ایونٹ ڈرائیون سسٹمز جو پیچیدگی کے ساتھ بڑھتے ہیں
+- **نافذ کریں** ہموار اینیمیشنز ریاضیاتی اصولوں کا استعمال کرتے ہوئے
+- **ڈی بگ کریں** پیچیدہ انٹرایکشن سسٹمز براؤزر ڈیولپر ٹولز کا استعمال کرتے ہوئے
+- **آپٹیمائز کریں** گیم پرفارمنس مختلف ڈیوائسز اور براؤزرز کے لیے
+- **ڈیزائن کریں** قابلِ برقرار کوڈ اسٹرکچرز ثابت شدہ پیٹرنز کا استعمال کرتے ہوئے
+
+**گیم ڈیولپمنٹ کے تصورات میں مہارت حاصل کی**:
+- **فریم ریٹ مینجمنٹ**: FPS اور ٹائمنگ کنٹرولز کو سمجھنا
+- **انپٹ ہینڈلنگ**: کراس پلیٹ فارم کی بورڈ اور ایونٹ سسٹمز
+- **آبجیکٹ لائف سائیکل**: تخلیق، اپڈیٹ، اور تباہی کے پیٹرنز
+- **اسٹیٹ سنکرونائزیشن**: گیم اسٹیٹ کو فریمز کے درمیان مستقل رکھنا
+- **ایونٹ آرکیٹیکچر**: گیم سسٹمز کے درمیان غیر مربوط مواصلات
+
+**اگلا مرحلہ**: آپ تصادم کا پتہ لگانے، اسکورنگ سسٹمز، ساؤنڈ ایفیکٹس شامل کرنے، یا جدید گیم فریم ورک جیسے Phaser یا Three.js کو دریافت کرنے کے لیے تیار ہیں!
+
+🌟 **کامیابی حاصل کی**: آپ نے ایک مکمل انٹرایکٹو گیم سسٹم پیشہ ورانہ آرکیٹیکچر پیٹرنز کے ساتھ بنایا ہے!
+
+## اسائنمنٹ
+
+[اپنے کوڈ پر تبصرہ کریں](assignment.md)
 
 ---
 
-**اعلانِ لاتعلقی**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**ڈسکلیمر**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/6-space-game/4-collision-detection/README.md b/translations/ur/6-space-game/4-collision-detection/README.md
index fff0653da9..1cc90203a2 100644
--- a/translations/ur/6-space-game/4-collision-detection/README.md
+++ b/translations/ur/6-space-game/4-collision-detection/README.md
@@ -1,35 +1,105 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "4b1d441cfd31924084956000c0fee5a5",
-  "translation_date": "2025-10-22T15:10:40+00:00",
+  "original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
+  "translation_date": "2025-11-03T13:35:53+00:00",
   "source_file": "6-space-game/4-collision-detection/README.md",
   "language_code": "ur"
 }
 -->
 # خلائی کھیل بنائیں حصہ 4: لیزر شامل کریں اور تصادم کا پتہ لگائیں
 
+```mermaid
+journey
+    title Your Collision Detection Journey
+    section Physics Foundation
+      Understand rectangles: 3: Student
+      Learn intersection math: 4: Student
+      Grasp coordinate systems: 4: Student
+    section Game Mechanics
+      Implement laser firing: 4: Student
+      Add object lifecycle: 5: Student
+      Create collision rules: 5: Student
+    section System Integration
+      Build collision detection: 5: Student
+      Optimize performance: 5: Student
+      Test interaction systems: 5: Student
+```
+
 ## لیکچر سے پہلے کا کوئز
 
 [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/35)
 
-اس لمحے کے بارے میں سوچیں جب اسٹار وارز میں لوک کے پروٹون ٹورپیڈوز نے ڈیتھ اسٹار کے ایگزاسٹ پورٹ کو نشانہ بنایا۔ اس درست تصادم کا پتہ لگانا کہکشاں کی تقدیر کو بدل دیا! کھیلوں میں، تصادم کا پتہ لگانا اسی طرح کام کرتا ہے - یہ طے کرتا ہے کہ کب اشیاء ایک دوسرے کے ساتھ تعامل کرتی ہیں اور اس کے بعد کیا ہوتا ہے۔
-
-اس سبق میں، آپ اپنے خلائی کھیل میں لیزر ہتھیار شامل کریں گے اور تصادم کا پتہ لگانے کا طریقہ نافذ کریں گے۔ بالکل اسی طرح جیسے ناسا کے مشن پلانرز خلائی جہاز کے راستے کا حساب لگاتے ہیں تاکہ ملبے سے بچا جا سکے، آپ سیکھیں گے کہ جب کھیل کی اشیاء ایک دوسرے سے ٹکرا رہی ہوں تو ان کا پتہ کیسے لگایا جائے۔ ہم اسے قابل انتظام مراحل میں تقسیم کریں گے جو ایک دوسرے پر تعمیر ہوتے ہیں۔
-
-آخر میں، آپ کے پاس ایک فعال جنگی نظام ہوگا جہاں لیزر دشمنوں کو تباہ کرتے ہیں اور تصادم کھیل کے واقعات کو متحرک کرتے ہیں۔ یہی تصادم کے اصول ہر چیز میں استعمال ہوتے ہیں، فزکس کی سیمولیشنز سے لے کر انٹرایکٹو ویب انٹرفیس تک۔
+اس لمحے کے بارے میں سوچیں جب اسٹار وارز میں لوک کے پروٹون ٹورپیڈوز نے ڈیتھ اسٹار کے ایگزاسٹ پورٹ کو نشانہ بنایا۔ وہ درست تصادم کا پتہ لگانا کہکشاں کی تقدیر کو بدل دیا! گیمز میں، تصادم کا پتہ لگانا اسی طرح کام کرتا ہے - یہ طے کرتا ہے کہ کب اشیاء ایک دوسرے کے ساتھ تعامل کرتی ہیں اور اس کے بعد کیا ہوتا ہے۔
+
+اس سبق میں، آپ اپنے خلائی کھیل میں لیزر ہتھیار شامل کریں گے اور تصادم کا پتہ لگانے کا نظام نافذ کریں گے۔ جیسے ناسا کے مشن پلانرز خلائی جہاز کے راستے کا حساب لگاتے ہیں تاکہ ملبے سے بچا جا سکے، آپ سیکھیں گے کہ گیم اشیاء کے ایک دوسرے سے ٹکرانے کا پتہ کیسے لگایا جائے۔ ہم اسے قابل انتظام مراحل میں تقسیم کریں گے جو ایک دوسرے پر تعمیر ہوتے ہیں۔
+
+آخر میں، آپ کے پاس ایک کام کرنے والا جنگی نظام ہوگا جہاں لیزر دشمنوں کو تباہ کرتے ہیں اور تصادم گیم کے واقعات کو متحرک کرتے ہیں۔ یہی تصادم کے اصول ہر چیز میں استعمال ہوتے ہیں، چاہے وہ فزکس کی سیمولیشن ہو یا انٹرایکٹو ویب انٹرفیس۔
+
+```mermaid
+mindmap
+  root((Collision Detection))
+    Physics Concepts
+      Rectangle Boundaries
+      Intersection Testing
+      Coordinate Systems
+      Separation Logic
+    Game Objects
+      Laser Projectiles
+      Enemy Ships
+      Hero Character
+      Collision Zones
+    Lifecycle Management
+      Object Creation
+      Movement Updates
+      Destruction Marking
+      Memory Cleanup
+    Event Systems
+      Keyboard Input
+      Collision Events
+      Game State Changes
+      Audio/Visual Effects
+    Performance
+      Efficient Algorithms
+      Frame Rate Optimization
+      Memory Management
+      Spatial Partitioning
+```
 
-✅ دنیا کے پہلے کمپیوٹر گیم کے بارے میں تھوڑی تحقیق کریں۔ اس کی فعالیت کیا تھی؟
+✅ دنیا کے سب سے پہلے کمپیوٹر گیم کے بارے میں تھوڑی تحقیق کریں۔ اس کی خصوصیات کیا تھیں؟
 
 ## تصادم کا پتہ لگانا
 
-تصادم کا پتہ لگانا اپولو لونر ماڈیول کے قریبیت سینسرز کی طرح کام کرتا ہے - یہ مسلسل فاصلے چیک کرتا ہے اور جب اشیاء بہت قریب ہو جاتی ہیں تو الرٹس کو متحرک کرتا ہے۔ کھیلوں میں، یہ نظام طے کرتا ہے کہ کب اشیاء ایک دوسرے کے ساتھ تعامل کرتی ہیں اور اس کے بعد کیا ہونا چاہیے۔
+تصادم کا پتہ لگانا اپولو چاند کی ماڈیول کے قربت سینسرز کی طرح کام کرتا ہے - یہ مسلسل فاصلے چیک کرتا ہے اور جب اشیاء بہت قریب آتی ہیں تو الرٹ دیتا ہے۔ گیمز میں، یہ نظام طے کرتا ہے کہ کب اشیاء ایک دوسرے کے ساتھ تعامل کرتی ہیں اور اس کے بعد کیا ہونا چاہیے۔
 
-جو طریقہ ہم استعمال کریں گے وہ ہر کھیل کی چیز کو ایک مستطیل کے طور پر برتتا ہے، بالکل اسی طرح جیسے ایئر ٹریفک کنٹرول سسٹمز ہوائی جہاز کو ٹریک کرنے کے لیے آسان جیومیٹرک شکلیں استعمال کرتے ہیں۔ یہ مستطیل طریقہ بنیادی لگ سکتا ہے، لیکن یہ کمپیوٹیشنل طور پر موثر ہے اور زیادہ تر کھیل کے منظرناموں کے لیے اچھی طرح کام کرتا ہے۔
+جو طریقہ ہم استعمال کریں گے وہ ہر گیم آبجیکٹ کو ایک مستطیل کے طور پر دیکھتا ہے، جیسے کہ ایئر ٹریفک کنٹرول سسٹمز ہوائی جہاز کو ٹریک کرنے کے لیے سادہ جیومیٹرک شکلیں استعمال کرتے ہیں۔ یہ مستطیل طریقہ شاید بنیادی لگے، لیکن یہ کمپیوٹیشنل طور پر مؤثر ہے اور زیادہ تر گیم کے منظرناموں کے لیے اچھا کام کرتا ہے۔
 
 ### مستطیل کی نمائندگی
 
-ہر کھیل کی چیز کو کوآرڈینیٹ کی حدود کی ضرورت ہوتی ہے، بالکل اسی طرح جیسے مارس پاتھ فائنڈر روور نے مریخ کی سطح پر اپنی جگہ کا نقشہ بنایا۔ یہاں ہم ان حدود کو کیسے بیان کرتے ہیں:
+ہر گیم آبجیکٹ کو کوآرڈینیٹ حدود کی ضرورت ہوتی ہے، جیسے کہ مریخ پاتھ فائنڈر روور نے مریخ کی سطح پر اپنی جگہ کا نقشہ بنایا۔ یہاں ہم ان حدود کو کیسے بیان کرتے ہیں:
+
+```mermaid
+flowchart TD
+    A["🎯 Game Object"] --> B["📍 Position (x, y)"]
+    A --> C["📏 Dimensions (width, height)"]
+    
+    B --> D["Top: y"]
+    B --> E["Left: x"]
+    
+    C --> F["Bottom: y + height"]
+    C --> G["Right: x + width"]
+    
+    D --> H["🔲 Rectangle Bounds"]
+    E --> H
+    F --> H
+    G --> H
+    
+    H --> I["Collision Detection Ready"]
+    
+    style A fill:#e3f2fd
+    style H fill:#e8f5e8
+    style I fill:#fff3e0
+```
 
 ```javascript
 rectFromGameObject() {
@@ -43,14 +113,37 @@ rectFromGameObject() {
 ```
 
 **آئیے اسے توڑتے ہیں:**
-- **اوپر کا کنارہ**: یہ وہ جگہ ہے جہاں آپ کی چیز عمودی طور پر شروع ہوتی ہے (اس کا y مقام)
-- **بائیں کنارہ**: جہاں یہ افقی طور پر شروع ہوتا ہے (اس کا x مقام)
-- **نیچے کا کنارہ**: y مقام میں اونچائی شامل کریں - اب آپ جانتے ہیں کہ یہ کہاں ختم ہوتا ہے!
-- **دائیں کنارہ**: x مقام میں چوڑائی شامل کریں - اور آپ کے پاس مکمل حد ہے
+- **اوپر کا کنارہ**: یہ وہ جگہ ہے جہاں آپ کا آبجیکٹ عمودی طور پر شروع ہوتا ہے (اس کا y پوزیشن)
+- **بائیں کنارہ**: جہاں یہ افقی طور پر شروع ہوتا ہے (اس کا x پوزیشن)
+- **نیچے کا کنارہ**: y پوزیشن میں اونچائی شامل کریں - اب آپ کو معلوم ہے کہ یہ کہاں ختم ہوتا ہے!
+- **دائیں کنارہ**: x پوزیشن میں چوڑائی شامل کریں - اور آپ کے پاس مکمل حد ہے
 
 ### انٹرسیکشن الگورتھم
 
-مستطیل کے انٹرسیکشن کا پتہ لگانا اسی منطق کا استعمال کرتا ہے جیسے ہبل اسپیس ٹیلی سکوپ یہ طے کرتا ہے کہ آیا آسمانی اشیاء اس کے فیلڈ آف ویو میں ایک دوسرے سے اوورلیپ کر رہی ہیں۔ الگورتھم علیحدگی کی جانچ کرتا ہے:
+مستطیل کے انٹرسیکشن کا پتہ لگانے کے لیے منطق استعمال کی جاتی ہے جیسے ہبل اسپیس ٹیلیسکوپ یہ طے کرتا ہے کہ آیا آسمانی اشیاء اس کے میدان نظر میں ایک دوسرے کے ساتھ اوورلیپ کر رہی ہیں۔ الگورتھم علیحدگی کی جانچ کرتا ہے:
+
+```mermaid
+flowchart LR
+    A["Rectangle 1"] --> B{"Separation Tests"}
+    C["Rectangle 2"] --> B
+    
+    B --> D["R2 left > R1 right?"]
+    B --> E["R2 right < R1 left?"]
+    B --> F["R2 top > R1 bottom?"]
+    B --> G["R2 bottom < R1 top?"]
+    
+    D --> H{"Any True?"}
+    E --> H
+    F --> H
+    G --> H
+    
+    H -->|Yes| I["❌ No Collision"]
+    H -->|No| J["✅ Collision Detected"]
+    
+    style B fill:#e3f2fd
+    style I fill:#ffebee
+    style J fill:#e8f5e8
+```
 
 ```javascript
 function intersectRect(r1, r2) {
@@ -67,13 +160,35 @@ function intersectRect(r1, r2) {
 - کیا مستطیل 2 مکمل طور پر مستطیل 1 کے نیچے ہے؟
 - کیا مستطیل 2 مکمل طور پر مستطیل 1 کے اوپر ہے؟
 
-اگر ان میں سے کوئی بھی شرط درست نہیں ہے، تو مستطیلیں لازمی طور پر اوورلیپ کر رہی ہیں۔ یہ طریقہ ریڈار آپریٹرز کے اس بات کا تعین کرنے کے طریقے کی عکاسی کرتا ہے کہ آیا دو ہوائی جہاز محفوظ فاصلے پر ہیں۔
+اگر ان میں سے کوئی بھی شرط درست نہیں ہے، تو مستطیلیں لازمی طور پر اوورلیپ کر رہی ہیں۔ یہ طریقہ ریڈار آپریٹرز کے طے کرنے کے طریقے کی عکاسی کرتا ہے کہ آیا دو ہوائی جہاز محفوظ فاصلے پر ہیں۔
 
-## اشیاء کے لائف سائیکل کا انتظام کرنا
+## آبجیکٹ لائف سائیکل کا انتظام
 
-جب لیزر دشمن کو ٹکراتا ہے، تو دونوں اشیاء کو کھیل سے ہٹانے کی ضرورت ہوتی ہے۔ تاہم، لوپ کے درمیان اشیاء کو حذف کرنا کریش کا سبب بن سکتا ہے - ایک سبق جو اپولو گائیڈنس کمپیوٹر جیسے ابتدائی کمپیوٹر سسٹمز میں سختی سے سیکھا گیا۔ اس کے بجائے، ہم "حذف کرنے کے لیے نشان زد کریں" کا طریقہ استعمال کرتے ہیں جو فریموں کے درمیان اشیاء کو محفوظ طریقے سے ہٹاتا ہے۔
+جب لیزر دشمن کو مارتا ہے، تو دونوں اشیاء کو گیم سے ہٹانے کی ضرورت ہوتی ہے۔ تاہم، لوپ کے درمیان اشیاء کو حذف کرنا کریش کا سبب بن سکتا ہے - ایک سبق جو اپولو گائیڈنس کمپیوٹر جیسے ابتدائی کمپیوٹر سسٹمز میں سختی سے سیکھا گیا۔ اس کے بجائے، ہم "حذف کرنے کے لیے نشان زد کریں" کا طریقہ استعمال کرتے ہیں جو فریموں کے درمیان اشیاء کو محفوظ طریقے سے ہٹاتا ہے۔
+
+```mermaid
+stateDiagram-v2
+    [*] --> Active: Object Created
+    Active --> Collided: Collision Detected
+    Collided --> MarkedDead: Set dead = true
+    MarkedDead --> Filtered: Next Frame
+    Filtered --> [*]: Object Removed
+    
+    Active --> OutOfBounds: Leaves Screen
+    OutOfBounds --> MarkedDead
+    
+    note right of MarkedDead
+        Safe to continue
+        current frame
+    end note
+    
+    note right of Filtered
+        Objects removed
+        between frames
+    end note
+```
 
-یہاں ہم کسی چیز کو ہٹانے کے لیے کیسے نشان زد کرتے ہیں:
+یہاں ہم کسی چیز کو ہٹانے کے لیے نشان زد کرتے ہیں:
 
 ```javascript
 // Mark object for removal
@@ -81,9 +196,9 @@ enemy.dead = true;
 ```
 
 **یہ طریقہ کیوں کام کرتا ہے:**
-- ہم چیز کو "مردہ" کے طور پر نشان زد کرتے ہیں لیکن اسے فوراً حذف نہیں کرتے
-- یہ موجودہ کھیل کے فریم کو محفوظ طریقے سے ختم کرنے دیتا ہے
-- کسی ایسی چیز کو استعمال کرنے کی کوشش سے کوئی کریش نہیں ہوتا جو پہلے ہی ختم ہو چکی ہو!
+- ہم آبجیکٹ کو "مردہ" کے طور پر نشان زد کرتے ہیں لیکن اسے فوراً حذف نہیں کرتے
+- یہ موجودہ گیم فریم کو محفوظ طریقے سے ختم کرنے دیتا ہے
+- کریشز نہیں ہوتے کیونکہ کسی ایسی چیز کو استعمال کرنے کی کوشش نہیں کی جاتی جو پہلے ہی ختم ہو چکی ہو!
 
 پھر اگلے رینڈر سائیکل سے پہلے نشان زد کردہ اشیاء کو فلٹر کریں:
 
@@ -92,28 +207,53 @@ gameObjects = gameObjects.filter(go => !go.dead);
 ```
 
 **یہ فلٹرنگ کیا کرتی ہے:**
-- صرف "زندہ" اشیاء کے ساتھ ایک تازہ فہرست بناتی ہے
-- کسی بھی چیز کو پھینک دیتی ہے جو مردہ کے طور پر نشان زد ہو
-- آپ کے کھیل کو ہموار طریقے سے چلتا رکھتی ہے
+- ایک تازہ فہرست بناتی ہے جس میں صرف "زندہ" اشیاء ہوتی ہیں
+- کسی بھی چیز کو جو مردہ کے طور پر نشان زد ہو، باہر نکال دیتی ہے
+- آپ کے گیم کو ہموار طریقے سے چلتا رکھتی ہے
 - تباہ شدہ اشیاء کے جمع ہونے سے میموری کے بوجھ کو روکتی ہے
 
-## لیزر میکینکس کو نافذ کرنا
+## لیزر میکینکس نافذ کرنا
 
-کھیلوں میں لیزر پروجیکٹائل اسٹار ٹریک کے فوٹون ٹورپیڈوز کے اصول پر کام کرتے ہیں - یہ الگ الگ اشیاء ہیں جو سیدھی لائنوں میں سفر کرتی ہیں جب تک کہ وہ کسی چیز سے ٹکرا نہ جائیں۔ ہر اسپیس بار پریس ایک نیا لیزر آبجیکٹ بناتا ہے جو اسکرین پر حرکت کرتا ہے۔
+گیمز میں لیزر پروجیکٹائلز اسٹار ٹریک کے فوٹون ٹورپیڈوز کے اصول پر کام کرتے ہیں - یہ الگ الگ اشیاء ہیں جو سیدھی لائنوں میں سفر کرتی ہیں جب تک کہ وہ کسی چیز سے ٹکرا نہ جائیں۔ ہر اسپیس بار پریس ایک نیا لیزر آبجیکٹ بناتا ہے جو اسکرین پر حرکت کرتا ہے۔
 
 اسے کام کرنے کے لیے، ہمیں چند مختلف حصوں کو مربوط کرنے کی ضرورت ہے:
 
-**عمل درآمد کے کلیدی اجزاء:**
-- **لیزر اشیاء بنائیں** جو ہیرو کی پوزیشن سے پیدا ہوتی ہیں
-- **کی بورڈ ان پٹ کو ہینڈل کریں** تاکہ لیزر تخلیق کو متحرک کیا جا سکے
-- **لیزر کی حرکت اور لائف سائیکل کا انتظام کریں**
-- **لیزر پروجیکٹائل کے لیے بصری نمائندگی نافذ کریں**
+**عمل درآمد کے لیے کلیدی اجزاء:**
+- **بنائیں** لیزر آبجیکٹس جو ہیرو کی پوزیشن سے پیدا ہوتے ہیں
+- **ہینڈل کریں** کی بورڈ ان پٹ تاکہ لیزر تخلیق کو متحرک کیا جا سکے
+- **منظم کریں** لیزر کی حرکت اور لائف سائیکل
+- **نافذ کریں** لیزر پروجیکٹائلز کے لیے بصری نمائندگی
+
+## فائرنگ کی شرح کنٹرول نافذ کرنا
 
-## فائرنگ کی شرح کنٹرول کو نافذ کرنا
+لامحدود فائرنگ کی شرح گیم انجن کو مغلوب کر دے گی اور گیم پلے کو بہت آسان بنا دے گی۔ حقیقی ہتھیاروں کے نظام کو اسی طرح کی پابندیوں کا سامنا کرنا پڑتا ہے - یہاں تک کہ یو ایس ایس انٹرپرائز کے فیزرز کو شاٹس کے درمیان ریچارج کرنے کے لیے وقت کی ضرورت ہوتی تھی۔
 
-لامحدود فائرنگ کی شرح کھیل کے انجن کو مغلوب کر دے گی اور گیم پلے کو بہت آسان بنا دے گی۔ حقیقی ہتھیاروں کے نظام کو اسی طرح کی رکاوٹوں کا سامنا کرنا پڑتا ہے - یہاں تک کہ یو ایس ایس انٹرپرائز کے فیزرز کو شاٹس کے درمیان ری چارج کرنے کے لیے وقت درکار ہوتا تھا۔
+ہم ایک کولڈاؤن سسٹم نافذ کریں گے جو اسپام فائرنگ کو روکتا ہے جبکہ کنٹرولز کو جوابدہ رکھتا ہے:
 
-ہم ایک کول ڈاؤن سسٹم نافذ کریں گے جو اسپام فائرنگ کو روکتا ہے جبکہ کنٹرولز کو جوابدہ رکھتا ہے:
+```mermaid
+sequenceDiagram
+    participant Player
+    participant Weapon
+    participant Cooldown
+    participant Game
+    
+    Player->>Weapon: Press Spacebar
+    Weapon->>Cooldown: Check if cool
+    
+    alt Weapon is Ready
+        Cooldown->>Weapon: cool = true
+        Weapon->>Game: Create Laser
+        Weapon->>Cooldown: Start new cooldown
+        Cooldown->>Cooldown: cool = false
+        
+        Note over Cooldown: Wait 500ms
+        
+        Cooldown->>Cooldown: cool = true
+    else Weapon is Cooling
+        Cooldown->>Weapon: cool = false
+        Weapon->>Player: No action
+    end
+```
 
 ```javascript
 class Cooldown {
@@ -141,33 +281,49 @@ class Weapon {
 }
 ```
 
-**کول ڈاؤن کیسے کام کرتا ہے:**
-- جب تخلیق کیا جاتا ہے، ہتھیار "گرم" شروع ہوتا ہے (ابھی فائر نہیں کر سکتا)
+**کولڈاؤن کیسے کام کرتا ہے:**
+- جب بنایا جاتا ہے، ہتھیار "گرم" شروع ہوتا ہے (ابھی فائر نہیں کر سکتا)
 - ٹائم آؤٹ مدت کے بعد، یہ "ٹھنڈا" ہو جاتا ہے (فائر کرنے کے لیے تیار)
 - فائر کرنے سے پہلے، ہم چیک کرتے ہیں: "کیا ہتھیار ٹھنڈا ہے؟"
 - یہ اسپام کلکنگ کو روکتا ہے جبکہ کنٹرولز کو جوابدہ رکھتا ہے
 
-✅ خلائی کھیل سیریز کے سبق 1 کا حوالہ دیں تاکہ کول ڈاؤنز کے بارے میں یاد دہانی حاصل ہو۔
+✅ خلائی کھیل سیریز کے سبق 1 کا حوالہ دیں تاکہ کولڈاؤنز کے بارے میں یاد دہانی حاصل کریں۔
 
-## تصادم کے نظام کی تعمیر
+## تصادم کا نظام بنانا
 
-آپ اپنے موجودہ خلائی کھیل کے کوڈ کو بڑھا دیں گے تاکہ تصادم کا پتہ لگانے کا نظام بنایا جا سکے۔ بین الاقوامی خلائی اسٹیشن کے خودکار تصادم سے بچاؤ کے نظام کی طرح، آپ کا کھیل مسلسل اشیاء کی پوزیشنوں کی نگرانی کرے گا اور انٹرسیکشنز کا جواب دے گا۔
+آپ اپنے موجودہ خلائی کھیل کے کوڈ کو بڑھا کر تصادم کا پتہ لگانے کا نظام بنائیں گے۔ جیسے انٹرنیشنل اسپیس اسٹیشن کا خودکار تصادم سے بچاؤ کا نظام، آپ کا کھیل مسلسل آبجیکٹ پوزیشنز کی نگرانی کرے گا اور انٹرسیکشنز پر ردعمل دے گا۔
 
-پچھلے سبق کے کوڈ سے شروع کرتے ہوئے، آپ تصادم کا پتہ لگانے کے لیے مخصوص اصولوں کے ساتھ اضافہ کریں گے جو اشیاء کے تعاملات کو کنٹرول کرتے ہیں۔
+پچھلے سبق کے کوڈ سے شروع کرتے ہوئے، آپ تصادم کا پتہ لگانے کے ساتھ مخصوص قواعد شامل کریں گے جو آبجیکٹ تعاملات کو کنٹرول کرتے ہیں۔
 
 > 💡 **پرو ٹپ**: لیزر اسپریٹ پہلے ہی آپ کے اثاثوں کے فولڈر میں شامل ہے اور آپ کے کوڈ میں حوالہ دیا گیا ہے، عمل درآمد کے لیے تیار ہے۔
 
-### نافذ کرنے کے لیے تصادم کے اصول
+### نافذ کرنے کے لیے تصادم کے قواعد
+
+**گیم میکینکس شامل کریں:**
+1. **لیزر دشمن کو مارتا ہے**: دشمن آبجیکٹ لیزر پروجیکٹائل کے ذریعے مارے جانے پر تباہ ہو جاتا ہے
+2. **لیزر اسکرین کی حد کو مارتا ہے**: لیزر اسکرین کے اوپر کنارے تک پہنچنے پر ہٹا دیا جاتا ہے
+3. **دشمن اور ہیرو کا تصادم**: دونوں آبجیکٹس انٹرسیکشن پر تباہ ہو جاتے ہیں
+4. **دشمن نیچے پہنچتا ہے**: گیم اوور کی حالت جب دشمن اسکرین کے نیچے پہنچتے ہیں
 
-**کھیل کے میکینکس شامل کریں:**
-1. **لیزر دشمن کو ٹکراتا ہے**: دشمن کی چیز لیزر پروجیکٹائل کے ذریعے مارے جانے پر تباہ ہو جاتی ہے
-2. **لیزر اسکرین کی حد کو ٹکراتا ہے**: لیزر اسکرین کے اوپر کے کنارے تک پہنچنے پر ہٹا دیا جاتا ہے
-3. **دشمن اور ہیرو کا تصادم**: دونوں اشیاء انٹرسیکشن پر تباہ ہو جاتی ہیں
-4. **دشمن نیچے پہنچتا ہے**: کھیل ختم ہونے کی حالت جب دشمن اسکرین کے نیچے پہنچتے ہیں
+### 🔄 **تعلیمی چیک ان**
+**تصادم کا پتہ لگانے کی بنیاد**: عمل درآمد سے پہلے، یقینی بنائیں کہ آپ سمجھتے ہیں:
+- ✅ مستطیل حدود تصادم کے زونز کو کیسے بیان کرتی ہیں
+- ✅ علیحدگی کی جانچ انٹرسیکشن کی حساب کتاب سے زیادہ مؤثر کیوں ہے
+- ✅ گیم لوپس میں آبجیکٹ لائف سائیکل مینجمنٹ کی اہمیت
+- ✅ ایونٹ ڈرائیون سسٹمز تصادم کے ردعمل کو کیسے مربوط کرتے ہیں
+
+**خود کو جلدی آزمائیں**: اگر آپ اشیاء کو فوراً حذف کر دیتے تو کیا ہوتا؟
+*جواب: لوپ کے درمیان حذف کرنے سے کریش ہو سکتا ہے یا اشیاء کو نظر انداز کر سکتا ہے*
+
+**فزکس کی سمجھ**: آپ اب سمجھتے ہیں:
+- **کوآرڈینیٹ سسٹمز**: پوزیشن اور ڈائمینشنز حدود کیسے بناتے ہیں
+- **انٹرسیکشن منطق**: تصادم کا پتہ لگانے کے پیچھے ریاضی کے اصول
+- **کارکردگی کی اصلاح**: حقیقی وقت کے سسٹمز میں مؤثر الگورتھمز کیوں اہم ہیں
+- **میموری مینجمنٹ**: استحکام کے لیے محفوظ آبجیکٹ لائف سائیکل پیٹرنز
 
 ## اپنے ترقیاتی ماحول کو ترتیب دینا
 
-اچھی خبر - ہم نے آپ کے لیے زیادہ تر بنیاد پہلے ہی تیار کر دی ہے! آپ کے تمام کھیل کے اثاثے اور بنیادی ڈھانچہ `your-work` سب فولڈر میں موجود ہیں، جو آپ کے لیے ٹھنڈی تصادم کی خصوصیات شامل کرنے کے لیے تیار ہیں۔
+اچھی خبر - ہم نے آپ کے لیے زیادہ تر بنیادی کام پہلے ہی ترتیب دے دیا ہے! آپ کے تمام گیم اثاثے اور بنیادی ڈھانچہ `your-work` سب فولڈر میں موجود ہیں، جو آپ کے لیے تصادم کی زبردست خصوصیات شامل کرنے کے لیے تیار ہیں۔
 
 ### پروجیکٹ کا ڈھانچہ
 
@@ -182,9 +338,9 @@ class Weapon {
 ```
 
 **فائل ڈھانچے کو سمجھنا:**
-- **تمام اسپریٹ تصاویر پر مشتمل ہے** جو کھیل کی اشیاء کے لیے ضروری ہیں
-- **مین HTML دستاویز اور جاوا اسکرپٹ ایپلیکیشن فائل شامل ہے**
-- **مقامی ترقیاتی سرور کے لیے پیکیج کنفیگریشن فراہم کرتا ہے**
+- **شامل کرتا ہے** گیم آبجیکٹس کے لیے تمام اسپریٹ تصاویر
+- **شامل کرتا ہے** مین HTML دستاویز اور جاوا اسکرپٹ ایپلیکیشن فائل
+- **فراہم کرتا ہے** مقامی ترقیاتی سرور کے لیے پیکج کنفیگریشن
 
 ### ترقیاتی سرور شروع کرنا
 
@@ -196,20 +352,46 @@ npm start
 ```
 
 **یہ کمانڈ ترتیب:**
-- **کام کرنے والے پروجیکٹ فولڈر میں ڈائریکٹری تبدیل کرتی ہے**
+- **ڈائریکٹری تبدیل کرتی ہے** آپ کے کام کرنے والے پروجیکٹ فولڈر میں
 - **مقامی HTTP سرور شروع کرتی ہے** `http://localhost:5000` پر
-- **آپ کے کھیل کی فائلوں کو جانچ اور ترقی کے لیے پیش کرتی ہے**
+- **آپ کے گیم فائلز پیش کرتی ہے** ٹیسٹنگ اور ترقی کے لیے
 - **لائیو ترقی کو فعال کرتی ہے** خودکار ری لوڈنگ کے ساتھ
 
-اپنے براؤزر کو کھولیں اور `http://localhost:5000` پر جائیں تاکہ اپنے موجودہ کھیل کی حالت کو دیکھ سکیں جس میں ہیرو اور دشمن اسکرین پر پیش کیے گئے ہیں۔
+اپنے براؤزر کو کھولیں اور `http://localhost:5000` پر جائیں تاکہ اپنے موجودہ گیم کی حالت کو ہیرو اور دشمنوں کے ساتھ اسکرین پر دیکھ سکیں۔
 
 ### مرحلہ وار عمل درآمد
 
-بالکل اسی طرح جیسے ناسا نے ووئجر خلائی جہاز کو پروگرام کرنے کے لیے منظم طریقہ اختیار کیا، ہم تصادم کا پتہ لگانے کو مرحلہ وار طریقے سے نافذ کریں گے، ہر جزو کو قدم بہ قدم بنائیں گے۔
+جیسے ناسا نے وویاجر اسپیس کرافٹ کو پروگرام کرنے کے لیے منظم طریقہ اختیار کیا، ہم تصادم کا پتہ لگانے کو مرحلہ وار طریقے سے نافذ کریں گے، ہر جزو کو قدم بہ قدم بناتے ہوئے۔
+
+```mermaid
+flowchart TD
+    A["1. Rectangle Bounds"] --> B["2. Intersection Detection"]
+    B --> C["3. Laser System"]
+    C --> D["4. Event Handling"]
+    D --> E["5. Collision Rules"]
+    E --> F["6. Cooldown System"]
+    
+    G["Object Boundaries"] --> A
+    H["Physics Algorithm"] --> B
+    I["Projectile Creation"] --> C
+    J["Keyboard Input"] --> D
+    K["Game Logic"] --> E
+    L["Rate Limiting"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 #### 1. مستطیل تصادم کی حدود شامل کریں
 
-سب سے پہلے، آئیے اپنے کھیل کی اشیاء کو سکھائیں کہ وہ اپنی حدود کو کیسے بیان کریں۔ اپنے `GameObject` کلاس میں یہ طریقہ شامل کریں:
+سب سے پہلے، آئیے اپنے گیم آبجیکٹس کو سکھائیں کہ وہ اپنی حدود کو کیسے بیان کریں۔ اپنے `GameObject` کلاس میں یہ طریقہ شامل کریں:
 
 ```javascript
 rectFromGameObject() {
@@ -223,12 +405,12 @@ rectFromGameObject() {
 ```
 
 **یہ طریقہ انجام دیتا ہے:**
-- **ایک مستطیل چیز بناتا ہے** جس میں درست حد کے کوآرڈینیٹس ہوتے ہیں
-- **نیچے اور دائیں کنارے کا حساب لگاتا ہے** پوزیشن اور طول و عرض کا استعمال کرتے ہوئے
-- **ایک چیز واپس کرتا ہے** جو تصادم کا پتہ لگانے والے الگورتھم کے لیے تیار ہے
-- **تمام کھیل کی اشیاء کے لیے ایک معیاری انٹرفیس فراہم کرتا ہے**
+- **بناتا ہے** ایک مستطیل آبجیکٹ جس میں درست حد کے کوآرڈینیٹس ہوتے ہیں
+- **حساب کرتا ہے** نیچے اور دائیں کنارے کو پوزیشن اور ڈائمینشنز کے ذریعے
+- **واپس کرتا ہے** ایک آبجیکٹ جو تصادم کے پتہ لگانے والے الگورتھمز کے لیے تیار ہے
+- **فراہم کرتا ہے** تمام گیم آبجیکٹس کے لیے ایک معیاری انٹرفیس
 
-#### 2. انٹرسیکشن کا پتہ لگانا نافذ کریں
+#### 2. انٹرسیکشن کا پتہ لگانے کا عمل درآمد کریں
 
 اب آئیے اپنے تصادم کے جاسوس کو بنائیں - ایک فنکشن جو بتا سکتا ہے کہ آیا دو مستطیلیں اوورلیپ کر رہی ہیں:
 
@@ -244,10 +426,10 @@ function intersectRect(r1, r2) {
 ```
 
 **یہ الگورتھم کام کرتا ہے:**
-- **چار علیحدگی کی شرائط کا ٹیسٹ کرتا ہے** مستطیلوں کے درمیان
-- **اگر کوئی علیحدگی کی شرط درست ہو تو `false` واپس کرتا ہے**
-- **تصادم کی نشاندہی کرتا ہے** جب کوئی علیحدگی موجود نہ ہو
-- **موثر انٹرسیکشن ٹیسٹنگ کے لیے نفی کی منطق استعمال کرتا ہے**
+- **چار علیحدگی کی شرائط** مستطیلوں کے درمیان جانچتا ہے
+- **واپس کرتا ہے** `false` اگر کوئی علیحدگی کی شرط درست ہو
+- **اشارہ دیتا ہے** تصادم جب کوئی علیحدگی موجود نہ ہو
+- **منفی منطق** مؤثر انٹرسیکشن ٹیسٹنگ کے لیے استعمال کرتا ہے
 
 #### 3. لیزر فائرنگ کا نظام نافذ کریں
 
@@ -255,7 +437,7 @@ function intersectRect(r1, r2) {
 
 ##### پیغام کے مستقلات
 
-سب سے پہلے، آئیے کچھ پیغام کی اقسام کی وضاحت کریں تاکہ ہمارے کھیل کے مختلف حصے ایک دوسرے سے بات کر سکیں:
+سب سے پہلے، آئیے کچھ پیغام کی اقسام کی وضاحت کریں تاکہ ہمارے گیم کے مختلف حصے ایک دوسرے سے بات کر سکیں:
 
 ```javascript
 KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
@@ -264,8 +446,8 @@ COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
 ```
 
 **یہ مستقلات فراہم کرتے ہیں:**
-- **ایپلیکیشن میں ایونٹ کے ناموں کو معیاری بناتا ہے**
-- **کھیل کے نظام کے درمیان مستقل مواصلات کو فعال کرتا ہے**
+- **ایونٹ کے ناموں کو معیاری بناتا ہے** پورے ایپلیکیشن میں
+- **مستقل مواصلات کو فعال کرتا ہے** گیم سسٹمز کے درمیان
 - **ایونٹ ہینڈلر رجسٹریشن میں ٹائپوز کو روکتا ہے**
 
 ##### کی بورڈ ان پٹ ہینڈلنگ
@@ -278,10 +460,10 @@ COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
 }
 ```
 
-**یہ ان پٹ ہینڈلر:**
+**یہ انپٹ ہینڈلر:**
 - **اسپیس کی پریسز کا پتہ لگاتا ہے** keyCode 32 کا استعمال کرتے ہوئے
-- **ایک معیاری ایونٹ پیغام خارج کرتا ہے**
-- **ڈیکپلڈ فائرنگ منطق کو فعال کرتا ہے**
+- **ایک معیاری ایونٹ پیغام بھیجتا ہے**
+- **فائرنگ کی منطق کو الگ کرتا ہے**
 
 ##### ایونٹ لسٹنر سیٹ اپ
 
@@ -297,8 +479,8 @@ eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
 
 **یہ ایونٹ لسٹنر:**
 - **اسپیس کی ایونٹس کا جواب دیتا ہے**
-- **فائرنگ کول ڈاؤن کی حیثیت کو چیک کرتا ہے**
-- **اجازت دی گئی صورت میں لیزر تخلیق کو متحرک کرتا ہے**
+- **فائرنگ کولڈاؤن کی حیثیت چیک کرتا ہے**
+- **لیزر تخلیق کو متحرک کرتا ہے جب اجازت ہو**
 
 لیزر-دشمن تعاملات کے لیے تصادم ہینڈلنگ شامل کریں:
 
@@ -341,10 +523,10 @@ class Laser extends GameObject {
 
 **یہ کلاس عمل درآمد:**
 - **GameObject کو بڑھاتا ہے** بنیادی فعالیت کو وراثت میں لینے کے لیے
-- **لیزر اسپریٹ کے لیے مناسب طول و عرض مقرر کرتا ہے**
-- **خودکار اوپر کی حرکت پیدا کرتا ہے** `setInterval()` کا استعمال کرتے ہوئے
-- **اسکرین کے اوپر پہنچنے پر خود کو تباہ کرتا ہے**
-- **اپنے اینیمیشن کے وقت اور صفائی کا انتظام کرتا ہے**
+- **مناسب ڈائمینشنز سیٹ کرتا ہے** لیزر اسپریٹ کے لیے
+- **خودکار اوپر کی طرف حرکت پیدا کرتا ہے** `setInterval()` کا استعمال کرتے ہوئے
+- **اسکرین کے اوپر پہنچنے پر خود کو ختم کرتا ہے**
+- **اپنی حرکت کی ٹائمنگ اور صفائی کا انتظام کرتا ہے**
 
 #### 5. تصادم کا پتہ لگانے کا نظام نافذ کریں
 
@@ -373,65 +555,150 @@ function updateGameObjects() {
 ```
 
 **یہ تصادم کا نظام:**
-- **کھیل کی اشیاء کو قسم کے لحاظ سے فلٹر کرتا ہے** مؤثر جانچ کے لیے
-- **ہر لیزر کو ہر دشمن کے خلاف ٹیسٹ کرتا ہے** انٹرسیکشن کے لیے
-- **تصادم کے ایونٹس خارج کرتا ہے** جب انٹرسیکشن کا پتہ چلتا ہے
-- **تصادم کی پروسیسنگ کے بعد تباہ شدہ اشیاء کو صاف کرتا ہے**
+- **گیم آبجیکٹس کو فلٹر کرتا ہے** قسم کے لحاظ سے مؤثر جانچ کے لیے
+- **ہر لیزر کو ہر دشمن کے خلاف جانچتا ہے** انٹرسیکشنز کے لیے
+- **تصادم ایونٹس بھیجتا ہے** جب انٹرسیکشنز کا پتہ لگایا جاتا ہے
+- **تباہ شدہ اشیاء کو صاف کرتا ہے** تصادم کی پروسیسنگ کے بعد
+
+> ⚠️ **اہم**: اپنے مین گیم لوپ میں `updateGameObjects()` شامل کریں `window.onload` میں تصادم کا پتہ لگانے کو فعال کرنے کے لیے
+- [ ] `console.log` بیانات شامل کریں تاکہ تصادم کے واقعات کو حقیقی وقت میں ٹریک کیا جا سکے
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] سبق کے بعد کا کوئز مکمل کریں اور تصادم کی شناخت کے الگورتھم کو سمجھیں
+- [ ] تصادم کے وقت دھماکوں جیسے بصری اثرات شامل کریں
+- [ ] مختلف خصوصیات کے ساتھ مختلف قسم کے پروجیکٹائلز نافذ کریں
+- [ ] پاور اپس بنائیں جو عارضی طور پر کھلاڑی کی صلاحیتوں کو بڑھائیں
+- [ ] تصادم کو مزید دلچسپ بنانے کے لیے صوتی اثرات شامل کریں
+
+### 📅 **آپ کا ہفتہ بھر کا فزکس پروگرامنگ**
+- [ ] مکمل اسپیس گیم کو مکمل کریں جس میں تصادم کے نظام کو بہتر بنایا گیا ہو
+- [ ] مستطیلوں سے آگے جدید تصادم کی شکلیں نافذ کریں (گول دائرے، کثیرالاضلاع)
+- [ ] حقیقت پسندانہ دھماکے کے اثرات کے لیے پارٹیکل سسٹمز شامل کریں
+- [ ] دشمن کے پیچیدہ رویے بنائیں جن میں تصادم سے بچاؤ شامل ہو
+- [ ] بہتر کارکردگی کے لیے تصادم کی شناخت کو بہتر بنائیں جب بہت سے اشیاء ہوں
+- [ ] فزکس کی نقل جیسے رفتار اور حقیقت پسندانہ حرکت شامل کریں
+
+### 🌟 **آپ کا مہینے بھر کا گیم فزکس ماسٹری**
+- [ ] جدید فزکس انجن اور حقیقت پسندانہ نقلیات کے ساتھ گیمز بنائیں
+- [ ] 3D تصادم کی شناخت اور اسپیشل پارٹیشننگ الگورتھم سیکھیں
+- [ ] اوپن سورس فزکس لائبریریوں اور گیم انجنز میں تعاون کریں
+- [ ] گرافکس کے لحاظ سے شدید ایپلیکیشنز کے لیے کارکردگی کی اصلاح میں مہارت حاصل کریں
+- [ ] گیم فزکس اور تصادم کی شناخت کے بارے میں تعلیمی مواد بنائیں
+- [ ] جدید فزکس پروگرامنگ مہارتوں کو ظاہر کرنے والا پورٹ فولیو بنائیں
+
+## 🎯 آپ کی تصادم کی شناخت کی مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title Collision Detection & Game Physics Learning Progression
+    
+    section Foundation (10 minutes)
+        Rectangle Math: Coordinate systems
+                      : Boundary calculations
+                      : Position tracking
+                      : Dimension management
+        
+    section Algorithm Design (20 minutes)
+        Intersection Logic: Separation testing
+                          : Overlap detection
+                          : Performance optimization
+                          : Edge case handling
+        
+    section Game Implementation (30 minutes)
+        Object Systems: Lifecycle management
+                      : Event coordination
+                      : State tracking
+                      : Memory cleanup
+        
+    section Interactive Features (40 minutes)
+        Combat Mechanics: Projectile systems
+                        : Weapon cooldowns
+                        : Damage calculation
+                        : Visual feedback
+        
+    section Advanced Physics (50 minutes)
+        Real-time Systems: Frame rate optimization
+                         : Spatial partitioning
+                         : Collision response
+                         : Physics simulation
+        
+    section Professional Techniques (1 week)
+        Game Engine Concepts: Component systems
+                             : Physics pipelines
+                             : Performance profiling
+                             : Cross-platform optimization
+        
+    section Industry Applications (1 month)
+        Production Skills: Large-scale optimization
+                         : Team collaboration
+                         : Engine development
+                         : Platform deployment
+```
 
-> ⚠️ **اہم**: اپنے مین گیم لوپ میں `updateGameObjects()` شامل کریں `window.onload` میں تصادم کا پتہ لگانے کو فعال کرنے کے لیے۔
+### 🛠️ آپ کا گیم فزکس ٹول کٹ کا خلاصہ
 
-#### 6. ہیرو کلاس میں کول ڈاؤن سسٹم شامل کریں
+اس سبق کو مکمل کرنے کے بعد، آپ نے درج ذیل مہارتیں حاصل کر لی ہیں:
+- **تصادم ریاضی**: مستطیل کے انٹرسیکشن الگورتھم اور کوآرڈینیٹ سسٹمز
+- **کارکردگی کی اصلاح**: حقیقی وقت کی ایپلیکیشنز کے لیے مؤثر تصادم کی شناخت
+- **آبجیکٹ لائف سائیکل مینجمنٹ**: محفوظ تخلیق، اپ ڈیٹ، اور تباہی کے نمونے
+- **ایونٹ ڈرائیون آرکیٹیکچر**: تصادم کے ردعمل کے لیے الگ الگ نظام
+- **گیم لوپ انٹیگریشن**: فریم پر مبنی فزکس اپ ڈیٹس اور رینڈرنگ کوآرڈینیشن
+- **ان پٹ سسٹمز**: ریٹ محدود اور فیڈبیک کے ساتھ جوابدہ کنٹرولز
+- **میموری مینجمنٹ**: مؤثر آبجیکٹ پولنگ اور صفائی کی حکمت عملی
 
-ہیرو کلاس کو فائرنگ میکینکس اور شرح کی حد بندی کے ساتھ بہتر بنائیں:
+**حقیقی دنیا کی ایپلیکیشنز**: آپ کی تصادم کی شناخت کی مہارت براہ راست لاگو ہوتی ہے:
+- **انٹرایکٹو نقلیات**: سائنسی ماڈلنگ اور تعلیمی ٹولز
+- **یوزر انٹرفیس ڈیزائن**: ڈریگ اینڈ ڈراپ انٹریکشنز اور ٹچ شناخت
+- **ڈیٹا ویژولائزیشن**: انٹرایکٹو چارٹس اور کلک ایبل عناصر
+- **موبائل ڈیولپمنٹ**: ٹچ اشارے کی شناخت اور تصادم کی ہینڈلنگ
+- **روبوٹکس پروگرامنگ**: راستہ منصوبہ بندی اور رکاوٹ سے بچاؤ
+- **کمپیوٹر گرافکس**: رے ٹریسنگ اور اسپیشل الگورتھم
 
-```javascript
-class Hero extends GameObject {
-  constructor(x, y) {
-    super(x, y);
-    this.width = 99;
-    this.height = 75;
-    this.type = "Hero";
-    this.speed = { x: 0, y: 0 };
-    this.cooldown = 0;
-  }
-  
-  fire() {
-    gameObjects.push(new Laser(this.x + 45, this.y - 10));
-    this.cooldown = 500;
+**حاصل کردہ پیشہ ورانہ مہارتیں**: آپ اب کر سکتے ہیں:
+- **ڈیزائن** حقیقی وقت کی تصادم کی شناخت کے لیے مؤثر الگورتھم
+- **نافذ کریں** فزکس سسٹمز جو آبجیکٹ کی پیچیدگی کے ساتھ بڑھتے ہیں
+- **ڈیبگ** پیچیدہ انٹریکشن سسٹمز ریاضی کے اصولوں کا استعمال کرتے ہوئے
+- **کارکردگی کو بہتر بنائیں** مختلف ہارڈویئر اور براؤزر کی صلاحیتوں کے لیے
+- **آرکیٹیکٹ** قابل دیکھ بھال گیم سسٹمز ثابت شدہ ڈیزائن پیٹرنز کا استعمال کرتے ہوئے
 
-    let id = setInterval(() => {
-      if (this.cooldown > 0) {
-        this.cooldown -= 100;
-      } else {
-        clearInterval(id);
-      }
-    }, 200);
-  }
-  
-  canFire() {
-    return this.cooldown === 0;
-  }
-}
-```
+**گیم ڈیولپمنٹ کے تصورات میں مہارت حاصل کی**:
+- **فزکس نقلیات**: حقیقی وقت کی تصادم کی شناخت اور ردعمل
+- **کارکردگی انجینئرنگ**: انٹرایکٹو ایپلیکیشنز کے لیے بہتر الگورتھم
+- **ایونٹ سسٹمز**: گیم کے اجزاء کے درمیان الگ الگ مواصلات
+- **آبجیکٹ مینجمنٹ**: متحرک مواد کے لیے مؤثر لائف سائیکل کے نمونے
+- **ان پٹ ہینڈلنگ**: مناسب فیڈبیک کے ساتھ جوابدہ کنٹرولز
+
+**اگلا مرحلہ**: آپ جدید فزکس انجنز جیسے Matter.js کو دریافت کرنے، 3D تصادم کی شناخت کو نافذ کرنے، یا پیچیدہ پارٹیکل سسٹمز بنانے کے لیے تیار ہیں!
+
+🌟 **کامیابی حاصل کی**: آپ نے پیشہ ورانہ معیار کی تصادم کی شناخت کے ساتھ مکمل فزکس پر مبنی انٹریکشن سسٹم بنایا ہے!
+
+## GitHub Copilot ایجنٹ چیلنج 🚀
+
+ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+
+**تفصیل:** تصادم کی شناخت کے نظام کو بہتر بنائیں تاکہ پاور اپس کو نافذ کیا جا سکے جو تصادفی طور پر پیدا ہوں اور ہیرو شپ کے ذریعے جمع کیے جانے پر عارضی صلاحیتیں فراہم کریں۔
+
+**پرومپٹ:** ایک PowerUp کلاس بنائیں جو GameObject کو بڑھائے اور ہیرو اور پاور اپس کے درمیان تصادم کی شناخت کو نافذ کرے۔ کم از کم دو قسم کے پاور اپس شامل کریں: ایک جو فائر ریٹ بڑھاتا ہے (کولڈاؤن کو کم کرتا ہے) اور دوسرا جو عارضی شیلڈ بناتا ہے۔ اسپون لاجک شامل کریں جو تصادفی وقفوں اور پوزیشنز پر پاور اپس بناتا ہے۔
+
+---
+
+## 🚀 چیلنج
+
+ایک دھماکہ شامل کریں! [اسپیس آرٹ ریپو](../../../../6-space-game/solution/spaceArt/readme.txt) میں گیم کے اثاثوں پر نظر ڈالیں اور کوشش کریں کہ جب لیزر کسی ایلین کو ہٹ کرے تو دھماکہ شامل کریں۔
+
+## سبق کے بعد کا کوئز
+
+[سبق کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/36)
 
-**بہتر ہیرو کلاس کو سمجھنا:**
-- **کول ڈاؤن ٹائمر کو صفر پر شروع کرتا ہے** (فائر کرنے کے لیے تیار)
-- **لیزر اشیاء تخلیق کرتا ہے** ہیرو شپ کے اوپر پوزیشن میں
-- **تیز فائرنگ کو روکنے کے لیے کول ڈاؤن مدت مقرر کرتا ہے**
-- **وقفہ پر مبنی اپ ڈیٹس کا استعمال کرتے ہوئے کول ڈاؤن ٹائمر کو کم کرتا ہے**
-- **`canFire()` طریقہ کے ذریعے فائرنگ کی حیثیت کی جانچ فراہم کرتا ہے**
+## جائزہ اور خود مطالعہ
 
-### اپنے عمل درآمد کی جانچ کرنا
+اپنے گیم میں وقفوں کے ساتھ تجربہ کریں جو آپ نے اب تک بنایا ہے۔ جب آپ انہیں تبدیل کرتے ہیں تو کیا ہوتا ہے؟ مزید پڑھیں [JavaScript ٹائمنگ ایونٹس](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) کے بارے میں۔
 
-آپ کے خلائی کھیل میں اب مکمل تصادم کا پتہ لگانے اور جنگی میکینکس شامل ہیں۔ 🚀 ان نئی صلاحیتوں کی جانچ کریں:
-- **ایرو کیز کے ساتھ نیویگیٹ کریں** حرکت کنٹرولز کی تصدیق کے لیے
-- **اسپیس بار کے ساتھ لیزر فائر کریں** - نوٹ کریں کہ کول ڈاؤن اسپام کلکنگ کو کیسے روکتا ہے
-- **تصادم کا مشاہدہ کریں** جب لیزر دشمنوں کو ٹکراتے ہیں، ہٹانے کو متحرک کرتے ہیں
-- **صفائی کی تصدیق کریں** جیسے تباہ شدہ اشیاء کھیل سے غائب ہو جاتی ہیں
+## اسائنمنٹ
 
-آپ نے کامیابی سے تصادم کا پتہ لگانے کا نظام نافذ کیا ہے جو خلائی جہاز کی نیویگیشن اور روبوٹکس کی رہنمائی کرنے والے انہی ری
+[تصادم کو دریافت کریں](assignment.md)
 
 ---
 
-**ڈسکلیمر**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**اعلانِ لاتعلقی**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا عدم درستگی ہو سکتی ہے۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/6-space-game/5-keeping-score/README.md b/translations/ur/6-space-game/5-keeping-score/README.md
index df9f28d721..59f500bd1a 100644
--- a/translations/ur/6-space-game/5-keeping-score/README.md
+++ b/translations/ur/6-space-game/5-keeping-score/README.md
@@ -1,25 +1,92 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "d642759cf1542f554871f74956a59af9",
-  "translation_date": "2025-10-22T15:12:10+00:00",
+  "original_hash": "2ed9145a16cf576faa2a973dff84d099",
+  "translation_date": "2025-11-03T13:37:22+00:00",
   "source_file": "6-space-game/5-keeping-score/README.md",
   "language_code": "ur"
 }
 -->
-# اسپیس گیم بنائیں حصہ 5: اسکورنگ اور زندگیاں
+# خلائی کھیل بنائیں حصہ 5: اسکورنگ اور زندگیاں
+
+```mermaid
+journey
+    title Your Game Design Journey
+    section Player Feedback
+      Understand scoring psychology: 3: Student
+      Learn visual communication: 4: Student
+      Design reward systems: 4: Student
+    section Technical Implementation
+      Canvas text rendering: 4: Student
+      State management: 5: Student
+      Event-driven updates: 5: Student
+    section Game Polish
+      User experience design: 5: Student
+      Balance challenge and reward: 5: Student
+      Create engaging gameplay: 5: Student
+```
 
 ## لیکچر سے پہلے کا کوئز
 
 [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/37)
 
-کیا آپ اپنی اسپیس گیم کو ایک حقیقی گیم کی طرح محسوس کروانے کے لیے تیار ہیں؟ آئیے اسکورنگ پوائنٹس اور زندگیاں شامل کریں - وہ بنیادی میکینکس جنہوں نے ابتدائی آرکیڈ گیمز جیسے اسپیس انویڈرز کو سادہ مظاہروں سے نشہ آور تفریح میں تبدیل کر دیا۔ یہ وہ مرحلہ ہے جہاں آپ کی گیم واقعی کھیلنے کے قابل بن جاتی ہے۔
+کیا آپ اپنے خلائی کھیل کو ایک حقیقی کھیل کی طرح محسوس کروانے کے لیے تیار ہیں؟ آئیے اسکورنگ پوائنٹس اور زندگیوں کا انتظام شامل کریں - وہ بنیادی میکینکس جنہوں نے ابتدائی آرکیڈ گیمز جیسے اسپیس انویڈرز کو سادہ مظاہروں سے نشہ آور تفریح میں تبدیل کر دیا۔ یہ وہ جگہ ہے جہاں آپ کا کھیل واقعی کھیلنے کے قابل ہو جاتا ہے۔
+
+```mermaid
+mindmap
+  root((Game Feedback Systems))
+    Visual Communication
+      Text Rendering
+      Icon Display
+      Color Psychology
+      Layout Design
+    Scoring Mechanics
+      Point Values
+      Reward Timing
+      Progress Tracking
+      Achievement Systems
+    Life Management
+      Risk vs Reward
+      Player Agency
+      Difficulty Balance
+      Recovery Mechanics
+    User Experience
+      Immediate Feedback
+      Clear Information
+      Emotional Response
+      Engagement Loops
+    Implementation
+      Canvas API
+      State Management
+      Event Systems
+      Performance
+```
+
+## اسکرین پر متن دکھانا - آپ کے کھیل کی آواز
 
-## اسکرین پر ٹیکسٹ ڈرائنگ - آپ کی گیم کی آواز
+اپنا اسکور دکھانے کے لیے، ہمیں کینوس پر متن پیش کرنے کا طریقہ سیکھنا ہوگا۔ `fillText()` طریقہ آپ کا بنیادی ٹول ہے - یہ وہی تکنیک ہے جو کلاسک آرکیڈ گیمز میں اسکورز اور اسٹیٹس کی معلومات دکھانے کے لیے استعمال ہوتی ہے۔
 
-اپنا اسکور دکھانے کے لیے، ہمیں کینوس پر ٹیکسٹ رینڈر کرنے کا طریقہ سیکھنا ہوگا۔ `fillText()` میتھڈ آپ کا بنیادی ٹول ہے - یہ وہی تکنیک ہے جو کلاسک آرکیڈ گیمز میں اسکورز اور اسٹیٹس کی معلومات دکھانے کے لیے استعمال ہوتی تھی۔
+```mermaid
+flowchart LR
+    A["📝 Text Content"] --> B["🎨 Styling"]
+    B --> C["📍 Positioning"]
+    C --> D["🖼️ Canvas Render"]
+    
+    E["Font Family"] --> B
+    F["Font Size"] --> B
+    G["Color"] --> B
+    H["Alignment"] --> B
+    
+    I["X Coordinate"] --> C
+    J["Y Coordinate"] --> C
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+```
 
-آپ کے پاس ٹیکسٹ کی ظاہری شکل پر مکمل کنٹرول ہے:
+آپ کے پاس متن کی ظاہری شکل پر مکمل کنٹرول ہے:
 
 ```javascript
 ctx.font = "30px Arial";
@@ -28,20 +95,72 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ [کینوس پر ٹیکسٹ شامل کرنے](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) پر مزید گہرائی سے غور کریں - آپ حیران ہو سکتے ہیں کہ فونٹس اور اسٹائلنگ کے ساتھ آپ کتنے تخلیقی ہو سکتے ہیں!
+✅ [کینوس میں متن شامل کرنے](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) پر مزید گہرائی سے غور کریں - آپ حیران ہو سکتے ہیں کہ آپ فونٹس اور اسٹائلنگ کے ساتھ کتنے تخلیقی ہو سکتے ہیں!
 
 ## زندگیاں - صرف ایک نمبر سے زیادہ
 
-گیم ڈیزائن میں، "زندگی" کھلاڑی کی غلطی کی گنجائش کی نمائندگی کرتی ہے۔ یہ تصور پن بال مشینوں سے شروع ہوا، جہاں آپ کو کھیلنے کے لیے متعدد گیندیں ملتی تھیں۔ ابتدائی ویڈیو گیمز جیسے ایسٹروئڈز میں، زندگیاں کھلاڑیوں کو خطرہ مول لینے اور غلطیوں سے سیکھنے کی اجازت دیتی تھیں۔
+گیم ڈیزائن میں، "زندگی" کھلاڑی کی غلطی کی گنجائش کی نمائندگی کرتی ہے۔ یہ تصور پن بال مشینوں سے شروع ہوا، جہاں آپ کو کھیلنے کے لیے متعدد گیندیں ملتی تھیں۔ ابتدائی ویڈیو گیمز جیسے ایسٹروئڈز میں، زندگیوں نے کھلاڑیوں کو خطرات مول لینے اور غلطیوں سے سیکھنے کی اجازت دی۔
+
+```mermaid
+flowchart TD
+    A["🎮 Player Action"] --> B{"Risk Assessment"}
+    
+    B --> C["High Risk, High Reward"]
+    B --> D["Safe Strategy"]
+    
+    C --> E{"Outcome"}
+    D --> F["Steady Progress"]
+    
+    E -->|Success| G["🏆 Big Points"]
+    E -->|Failure| H["💔 Lose Life"]
+    
+    H --> I{"Lives Remaining?"}
+    I -->|Yes| J["🔄 Try Again"]
+    I -->|No| K["💀 Game Over"]
+    
+    J --> B
+    G --> B
+    F --> B
+    
+    style C fill:#ffebee
+    style D fill:#e8f5e8
+    style G fill:#e3f2fd
+    style H fill:#fff3e0
+```
+
+بصری نمائندگی بہت اہمیت رکھتی ہے - صرف "زندگیاں: 3" کے بجائے جہاز کے آئیکنز دکھانا فوری بصری پہچان پیدا کرتا ہے، بالکل اسی طرح جیسے ابتدائی آرکیڈ کیبنٹس نے زبان کی رکاوٹوں کے پار بات چیت کرنے کے لیے آئیکنوگرافی کا استعمال کیا۔
 
-بصری نمائندگی بہت اہمیت رکھتی ہے - صرف "Lives: 3" کے بجائے جہاز کے آئیکنز دکھانا فوری بصری پہچان پیدا کرتا ہے، بالکل اسی طرح جیسے ابتدائی آرکیڈ کیبنٹس نے زبان کی رکاوٹوں کے پار بات چیت کرنے کے لیے آئیکنوگرافی کا استعمال کیا۔
+## اپنے کھیل کے انعامی نظام کی تعمیر
 
-## اپنی گیم کا انعامی نظام بنائیں
+اب ہم بنیادی فیڈبیک سسٹمز کو نافذ کریں گے جو کھلاڑیوں کو مشغول رکھتے ہیں:
 
-اب ہم وہ بنیادی فیڈبیک سسٹمز نافذ کریں گے جو کھلاڑیوں کو مشغول رکھتے ہیں:
+```mermaid
+sequenceDiagram
+    participant Player
+    participant GameEngine
+    participant ScoreSystem
+    participant LifeSystem
+    participant Display
+    
+    Player->>GameEngine: Shoots Enemy
+    GameEngine->>ScoreSystem: Award Points
+    ScoreSystem->>ScoreSystem: +100 points
+    ScoreSystem->>Display: Update Score
+    
+    Player->>GameEngine: Collides with Enemy
+    GameEngine->>LifeSystem: Lose Life
+    LifeSystem->>LifeSystem: -1 life
+    LifeSystem->>Display: Update Lives
+    
+    alt Lives > 0
+        LifeSystem->>Player: Continue Playing
+    else Lives = 0
+        LifeSystem->>GameEngine: Game Over
+    end
+```
 
-- **اسکورنگ سسٹم**: ہر تباہ شدہ دشمن جہاز 100 پوائنٹس دیتا ہے (گول نمبر کھلاڑیوں کے لیے ذہنی طور پر حساب لگانا آسان بناتے ہیں)۔ اسکور نیچے بائیں کونے میں دکھایا جائے گا۔
-- **زندگی کا کاؤنٹر**: آپ کا ہیرو تین زندگیاں لے کر شروع کرتا ہے - ایک معیار جو ابتدائی آرکیڈ گیمز نے چیلنج اور کھیلنے کی صلاحیت کے توازن کے لیے قائم کیا۔ دشمن کے ساتھ ہر تصادم ایک زندگی کی قیمت پر ہوتا ہے۔ باقی زندگیاں نیچے دائیں کونے میں جہاز کے آئیکنز کے ذریعے دکھائی جائیں گی ![زندگی کی تصویر](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ur.png)۔
+- **اسکورنگ سسٹم**: ہر تباہ شدہ دشمن جہاز 100 پوائنٹس دیتا ہے (گول نمبر کھلاڑیوں کے لیے ذہنی طور پر حساب لگانا آسان بناتے ہیں)۔ اسکور نیچے بائیں کونے میں دکھایا جاتا ہے۔
+- **زندگی کا کاؤنٹر**: آپ کا ہیرو تین زندگیوں کے ساتھ شروع ہوتا ہے - ابتدائی آرکیڈ گیمز کے ذریعہ چیلنج اور کھیلنے کی صلاحیت کو متوازن کرنے کے لیے قائم کردہ معیار۔ دشمن کے ساتھ ہر تصادم ایک زندگی کی قیمت پر ہوتا ہے۔ ہم نیچے دائیں کونے میں جہاز کے آئیکنز کے ذریعے باقی زندگیوں کو دکھائیں گے ![زندگی کی تصویر](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ur.png)۔
 
 ## آئیے تعمیر شروع کریں!
 
@@ -57,18 +176,44 @@ ctx.fillText("show this on the screen", 0, 0);
 -| package.json
 ```
 
-اپنی گیم کو ٹیسٹ کرنے کے لیے، `your_work` فولڈر سے ڈیولپمنٹ سرور شروع کریں:
+اپنے کھیل کو جانچنے کے لیے، `your_work` فولڈر سے ڈیولپمنٹ سرور شروع کریں:
 
 ```bash
 cd your-work
 npm start
 ```
 
-یہ ایک لوکل سرور `http://localhost:5000` پر چلاتا ہے۔ اپنے براؤزر میں اس ایڈریس کو کھولیں تاکہ اپنی گیم دیکھ سکیں۔ کنٹرولز کو ایرو کیز کے ساتھ ٹیسٹ کریں اور دشمنوں کو شوٹ کرنے کی کوشش کریں تاکہ سب کچھ ٹھیک کام کر رہا ہو۔
+یہ ایک مقامی سرور کو `http://localhost:5000` پر چلاتا ہے۔ اپنے براؤزر میں اس ایڈریس کو کھولیں تاکہ اپنا کھیل دیکھ سکیں۔ کنٹرولز کو تیر والے بٹنوں کے ساتھ آزمائیں اور دشمنوں کو شوٹ کرنے کی کوشش کریں تاکہ یہ تصدیق ہو سکے کہ سب کچھ ٹھیک کام کر رہا ہے۔
 
-### کوڈنگ کا وقت!
+```mermaid
+flowchart TD
+    A["1. Asset Loading"] --> B["2. Game Variables"]
+    B --> C["3. Collision Detection"]
+    C --> D["4. Hero Enhancement"]
+    D --> E["5. Display Functions"]
+    E --> F["6. Event Handlers"]
+    
+    G["Life Icon Image"] --> A
+    H["Score & Lives Tracking"] --> B
+    I["Hero-Enemy Intersections"] --> C
+    J["Points & Life Methods"] --> D
+    K["Text & Icon Rendering"] --> E
+    L["Reward & Penalty Logic"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
+
+### کوڈ کرنے کا وقت!
 
-1. **وہ بصری اثاثے حاصل کریں جن کی آپ کو ضرورت ہوگی**۔ `solution/assets/` فولڈر سے `life.png` اثاثہ کاپی کریں اور اسے اپنے `your-work` فولڈر میں رکھیں۔ پھر `lifeImg` کو اپنے `window.onload` فنکشن میں شامل کریں:
+1. **وہ بصری اثاثے حاصل کریں جن کی آپ کو ضرورت ہوگی**۔ `solution/assets/` فولڈر سے `life.png` اثاثہ کو اپنے `your-work` فولڈر میں کاپی کریں۔ پھر `lifeImg` کو اپنے window.onload فنکشن میں شامل کریں:
 
     ```javascript
     lifeImg = await loadTexture("assets/life.png");
@@ -84,9 +229,9 @@ npm start
     eventEmitter = new EventEmitter();
     ```
   
-2. **اپنے گیم کے ویریبلز سیٹ کریں**۔ اپنے کل اسکور (0 سے شروع) اور باقی زندگیاں (3 سے شروع) کو ٹریک کرنے کے لیے کچھ کوڈ شامل کریں۔ ہم انہیں اسکرین پر دکھائیں گے تاکہ کھلاڑی ہمیشہ جان سکیں کہ وہ کہاں کھڑے ہیں۔
+2. **اپنے کھیل کے متغیرات سیٹ کریں**۔ اپنے کل اسکور (0 سے شروع) اور باقی زندگیوں (3 سے شروع) کو ٹریک کرنے کے لیے کچھ کوڈ شامل کریں۔ ہم انہیں اسکرین پر دکھائیں گے تاکہ کھلاڑی ہمیشہ جان سکیں کہ وہ کہاں کھڑے ہیں۔
 
-3. **تصادم کا پتہ لگانا نافذ کریں**۔ اپنے `updateGameObjects()` فنکشن کو بڑھائیں تاکہ جب دشمن آپ کے ہیرو سے ٹکرا جائیں تو پتہ لگایا جا سکے:
+3. **تصادم کا پتہ لگانا نافذ کریں**۔ اپنے `updateGameObjects()` فنکشن کو بڑھائیں تاکہ یہ پتہ لگ سکے کہ کب دشمن آپ کے ہیرو سے ٹکرا رہے ہیں:
 
     ```javascript
     enemies.forEach(enemy => {
@@ -98,14 +243,14 @@ npm start
     ```
 
 4. **اپنے ہیرو میں زندگی اور پوائنٹ ٹریکنگ شامل کریں**۔ 
-   1. **کاؤنٹرز کو انیشیئلائز کریں**۔ اپنے `Hero` کلاس میں `this.cooldown = 0` کے نیچے زندگی اور پوائنٹس سیٹ کریں:
+   1. **کاؤنٹرز کو شروع کریں**۔ اپنے `Hero` کلاس میں `this.cooldown = 0` کے تحت، زندگی اور پوائنٹس سیٹ کریں:
 
         ```javascript
         this.life = 3;
         this.points = 0;
         ```
 
-   1. **یہ ویلیوز کھلاڑی کو دکھائیں**۔ اسکرین پر ان ویلیوز کو ڈرائنگ کرنے کے لیے فنکشنز بنائیں:
+   1. **یہ اقدار کھلاڑی کو دکھائیں**۔ اسکرین پر ان اقدار کو دکھانے کے لیے فنکشنز بنائیں:
 
         ```javascript
         function drawLife() {
@@ -132,18 +277,34 @@ npm start
 
         ```
 
-   1. **ان فنکشنز کو اپنے گیم لوپ میں شامل کریں**۔ ان فنکشنز کو `updateGameObjects()` کے فوراً بعد اپنے `window.onload` فنکشن میں شامل کریں:
+   1. **سب کچھ اپنے کھیل کے لوپ میں شامل کریں**۔ ان فنکشنز کو اپنے window.onload فنکشن میں `updateGameObjects()` کے فوراً بعد شامل کریں:
 
         ```javascript
         drawPoints();
         drawLife();
         ```
 
-1. **گیم کے نتائج اور انعامات نافذ کریں**۔ اب ہم وہ فیڈبیک سسٹمز شامل کریں گے جو کھلاڑی کے اعمال کو معنی دیتے ہیں:
+### 🔄 **تعلیمی چیک ان**
+**گیم ڈیزائن کی سمجھ**: نتائج نافذ کرنے سے پہلے، یہ یقینی بنائیں کہ آپ سمجھتے ہیں:
+- ✅ بصری فیڈبیک کھلاڑیوں کو کھیل کی حالت کیسے بتاتا ہے
+- ✅ UI عناصر کی مستقل جگہ کا تعین کیوں استعمال میں بہتری لاتا ہے
+- ✅ پوائنٹ ویلیوز اور زندگی کے انتظام کے پیچھے نفسیات
+- ✅ کینوس ٹیکسٹ رینڈرنگ HTML ٹیکسٹ سے کیسے مختلف ہے
 
-   1. **تصادم زندگیاں کم کرتے ہیں**۔ ہر بار جب آپ کا ہیرو دشمن سے ٹکرا جائے، آپ کو ایک زندگی کھونا چاہیے۔
+**فوری خود آزمائش**: آرکیڈ گیمز عام طور پر پوائنٹ ویلیوز کے لیے گول نمبر کیوں استعمال کرتے ہیں؟
+*جواب: گول نمبر کھلاڑیوں کے لیے ذہنی طور پر حساب لگانا آسان بناتے ہیں اور نفسیاتی طور پر اطمینان بخش انعامات پیدا کرتے ہیں*
+
+**صارف کے تجربے کے اصول**: آپ اب لاگو کر رہے ہیں:
+- **بصری درجہ بندی**: اہم معلومات کو نمایاں طور پر رکھا گیا
+- **فوری فیڈبیک**: کھلاڑی کے اعمال کے لیے حقیقی وقت کی اپ ڈیٹس
+- **علمی بوجھ**: سادہ، واضح معلومات کی پیشکش
+- **جذباتی ڈیزائن**: آئیکنز اور رنگ جو کھلاڑی کے ساتھ تعلق پیدا کرتے ہیں
+
+1. **کھیل کے نتائج اور انعامات نافذ کریں**۔ اب ہم فیڈبیک سسٹمز شامل کریں گے جو کھلاڑی کے اعمال کو معنی دیتے ہیں:
+
+   1. **تصادم زندگیوں کی قیمت پر ہوتا ہے**۔ ہر بار جب آپ کا ہیرو دشمن سے ٹکرا جائے، آپ کو ایک زندگی کھونا چاہیے۔
    
-      یہ میتھڈ اپنے `Hero` کلاس میں شامل کریں:
+      یہ طریقہ اپنے `Hero` کلاس میں شامل کریں:
 
         ```javascript
         decrementLife() {
@@ -156,7 +317,7 @@ npm start
 
    2. **دشمنوں کو شوٹ کرنے سے پوائنٹس ملتے ہیں**۔ ہر کامیاب ہٹ 100 پوائنٹس دیتی ہے، جو درست شوٹنگ کے لیے فوری مثبت فیڈبیک فراہم کرتی ہے۔
 
-      اپنے Hero کلاس میں یہ انکریمنٹ میتھڈ شامل کریں:
+      اپنے Hero کلاس میں یہ اضافہ کا طریقہ شامل کریں:
     
         ```javascript
           incrementPoints() {
@@ -164,7 +325,7 @@ npm start
           }
         ```
 
-        اب ان فنکشنز کو اپنے تصادم کے ایونٹس سے جوڑیں:
+        اب ان فنکشنز کو اپنے تصادم کے واقعات سے جوڑیں:
 
         ```javascript
         eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -179,11 +340,146 @@ npm start
         });
         ```
 
-✅ جاوا اسکرپٹ اور کینوس کے ساتھ بنائی گئی دیگر گیمز کے بارے میں جاننے کے لیے تجسس کریں - آپ حیران ہو سکتے ہیں کہ کیا ممکن ہے!
-
-ان فیچرز کو نافذ کرنے کے بعد، اپنی گیم کو ٹیسٹ کریں تاکہ مکمل فیڈبیک سسٹم کو ایکشن میں دیکھ سکیں۔ آپ کو نیچے دائیں کونے میں زندگی کے آئیکنز، نیچے بائیں کونے میں اپنا اسکور، اور دیکھنا چاہیے کہ تصادم زندگیاں کم کرتے ہیں جبکہ کامیاب شاٹس اسکور بڑھاتے ہیں۔
+✅ جاوا اسکرپٹ اور کینوس کے ساتھ بنائے گئے دیگر گیمز کے بارے میں جاننے کے لیے کچھ تحقیق کریں - آپ حیران ہوں گے کہ کیا ممکن ہے!
+
+ان خصوصیات کو نافذ کرنے کے بعد، اپنے کھیل کو جانچیں تاکہ مکمل فیڈبیک سسٹم کو عمل میں دیکھ سکیں۔ آپ کو نیچے دائیں کونے میں زندگی کے آئیکنز، نیچے بائیں کونے میں اپنا اسکور، اور دیکھنا چاہیے کہ تصادم زندگیوں کو کم کرتے ہیں جبکہ کامیاب شاٹس آپ کے اسکور کو بڑھاتے ہیں۔
+
+آپ کے کھیل میں اب وہ ضروری میکینکس موجود ہیں جنہوں نے ابتدائی آرکیڈ گیمز کو اتنا دلکش بنایا - واضح اہداف، فوری فیڈبیک، اور کھلاڑی کے اعمال کے لیے معنی خیز نتائج۔
+
+### 🔄 **تعلیمی چیک ان**
+**مکمل گیم ڈیزائن سسٹم**: کھلاڑی کے فیڈبیک سسٹمز کی مہارت کی تصدیق کریں:
+- ✅ اسکورنگ میکینکس کھلاڑی کی حوصلہ افزائی اور مشغولیت کیسے پیدا کرتے ہیں؟
+- ✅ صارف کے انٹرفیس ڈیزائن کے لیے بصری مستقل مزاجی کیوں اہم ہے؟
+- ✅ زندگی کا نظام چیلنج کو کھلاڑی کی برقرار رکھنے کے ساتھ کیسے متوازن کرتا ہے؟
+- ✅ فوری فیڈبیک اطمینان بخش گیم پلے بنانے میں کیا کردار ادا کرتا ہے؟
+
+**سسٹم انٹیگریشن**: آپ کا فیڈبیک سسٹم ظاہر کرتا ہے:
+- **صارف کے تجربے کا ڈیزائن**: واضح بصری مواصلات اور معلومات کی درجہ بندی
+- **ایونٹ ڈرائیون آرکیٹیکچر**: کھلاڑی کے اعمال کے لیے جوابدہ اپ ڈیٹس
+- **اسٹیٹ مینجمنٹ**: متحرک گیم ڈیٹا کو ٹریک کرنا اور دکھانا
+- **کینوس مہارت**: ٹیکسٹ رینڈرنگ اور اسپریٹ پوزیشننگ
+- **گیم نفسیات**: کھلاڑی کی حوصلہ افزائی اور مشغولیت کو سمجھنا
+
+**پیشہ ورانہ پیٹرنز**: آپ نے نافذ کیا:
+- **MVC آرکیٹیکچر**: گیم لاجک، ڈیٹا، اور پریزنٹیشن کی علیحدگی
+- **آبزرور پیٹرن**: گیم اسٹیٹ تبدیلیوں کے لیے ایونٹ ڈرائیون اپ ڈیٹس
+- **کمپوننٹ ڈیزائن**: رینڈرنگ اور لاجک کے لیے دوبارہ استعمال کے قابل فنکشنز
+- **کارکردگی کی اصلاح**: گیم لوپس میں موثر رینڈرنگ
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] اسکور ڈسپلے کے لیے مختلف فونٹ سائز اور رنگوں کے ساتھ تجربہ کریں
+- [ ] پوائنٹ ویلیوز کو تبدیل کرنے کی کوشش کریں اور دیکھیں کہ یہ گیم پلے کے احساس کو کیسے متاثر کرتا ہے
+- [ ] پوائنٹس اور زندگیوں میں تبدیلی کو ٹریک کرنے کے لیے console.log بیانات شامل کریں
+- [ ] زندگیوں کے ختم ہونے یا زیادہ اسکور حاصل کرنے جیسے ایج کیسز کی جانچ کریں
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] پوسٹ-لیکچر کوئز مکمل کریں اور گیم ڈیزائن کی نفسیات کو سمجھیں
+- [ ] اسکورنگ اور زندگیوں کے نقصان کے لیے صوتی اثرات شامل کریں
+- [ ] لوکل اسٹوریج کا استعمال کرتے ہوئے ایک اعلی اسکور سسٹم نافذ کریں
+- [ ] مختلف دشمن اقسام کے لیے مختلف پوائنٹ ویلیوز بنائیں
+- [ ] زندگی کے نقصان پر اسکرین شیک جیسے بصری اثرات شامل کریں
+
+### 📅 **آپ کا ہفتہ بھر کا گیم ڈیزائن سفر**
+- [ ] مکمل خلائی کھیل کے ساتھ پالش شدہ فیڈبیک سسٹمز مکمل کریں
+- [ ] ایڈوانس اسکورنگ میکینکس جیسے کومبو ملٹی پلائرز نافذ کریں
+- [ ] کامیابیاں اور انلاک ایبل مواد شامل کریں
+- [ ] مشکل کی ترقی اور توازن کے نظام بنائیں
+- [ ] مینو اور گیم اوور اسکرینز کے لیے صارف کے انٹرفیس ڈیزائن کریں
+- [ ] دیگر گیمز کا مطالعہ کریں تاکہ مشغولیت کے میکانزم کو سمجھ سکیں
+
+### 🌟 **آپ کا مہینہ بھر کا گیم ڈیولپمنٹ ماسٹری**
+- [ ] مکمل کھیل بنائیں جن میں ترقی کے پیچیدہ نظام ہوں
+- [ ] گیم تجزیات اور کھلاڑی کے رویے کی پیمائش سیکھیں
+- [ ] اوپن سورس گیم ڈیولپمنٹ پروجیکٹس میں تعاون کریں
+- [ ] ایڈوانس گیم ڈیزائن پیٹرنز اور مونیٹائزیشن میں مہارت حاصل کریں
+- [ ] گیم ڈیزائن اور صارف کے تجربے کے بارے میں تعلیمی مواد بنائیں
+- [ ] گیم ڈیزائن اور ڈیولپمنٹ کی مہارتوں کو ظاہر کرنے والا پورٹ فولیو بنائیں
+
+## 🎯 آپ کا گیم ڈیزائن ماسٹری ٹائم لائن
+
+```mermaid
+timeline
+    title Game Design & Player Feedback Learning Progression
+    
+    section Foundation (10 minutes)
+        Visual Communication: Text rendering
+                           : Icon design
+                           : Layout principles
+                           : Color psychology
+        
+    section Player Psychology (20 minutes)
+        Motivation Systems: Point values
+                          : Risk vs reward
+                          : Progress feedback
+                          : Achievement design
+        
+    section Technical Implementation (30 minutes)
+        Canvas Mastery: Text positioning
+                      : Sprite rendering
+                      : State management
+                      : Performance optimization
+        
+    section Game Balance (40 minutes)
+        Difficulty Design: Life management
+                         : Scoring curves
+                         : Player retention
+                         : Accessibility
+        
+    section User Experience (50 minutes)
+        Interface Design: Information hierarchy
+                        : Responsive feedback
+                        : Emotional design
+                        : Usability testing
+        
+    section Advanced Systems (1 week)
+        Game Mechanics: Progression systems
+                      : Analytics integration
+                      : Monetization design
+                      : Community features
+        
+    section Industry Skills (1 month)
+        Professional Development: Team collaboration
+                                : Design documentation
+                                : Player research
+                                : Platform optimization
+```
 
-آپ کی گیم میں اب وہ بنیادی میکینکس ہیں جنہوں نے ابتدائی آرکیڈ گیمز کو اتنا دلکش بنایا - واضح اہداف، فوری فیڈبیک، اور کھلاڑی کے اعمال کے لیے معنی خیز نتائج۔
+### 🛠️ آپ کے گیم ڈیزائن ٹول کٹ کا خلاصہ
+
+اس سبق کو مکمل کرنے کے بعد، آپ نے مہارت حاصل کر لی ہے:
+- **کھلاڑی کی نفسیات**: حوصلہ افزائی، خطرہ/انعام، اور مشغولیت کے لوپس کو سمجھنا
+- **بصری مواصلات**: متن، آئیکنز، اور لے آؤٹ کا استعمال کرتے ہوئے مؤثر UI ڈیزائن
+- **فیڈبیک سسٹمز**: کھلاڑی کے اعمال اور گیم ایونٹس کے لیے حقیقی وقت کا ردعمل
+- **اسٹیٹ مینجمنٹ**: متحرک گیم ڈیٹا کو مؤثر طریقے سے ٹریک کرنا اور دکھانا
+- **کینوس ٹیکسٹ رینڈرنگ**: اسٹائلنگ اور پوزیشننگ کے ساتھ پیشہ ورانہ متن کی نمائش
+- **ایونٹ انٹیگریشن**: صارف کے اعمال کو معنی خیز گیم کے نتائج سے جوڑنا
+- **گیم بیلنس**: مشکل کے منحنی خطوط اور کھلاڑی کے ترقیاتی نظام کو ڈیزائن کرنا
+
+**حقیقی دنیا کی ایپلیکیشنز**: آپ کے گیم ڈیزائن کی مہارتیں براہ راست لاگو ہوتی ہیں:
+- **صارف کے انٹرفیس ڈیزائن**: مشغول اور بدیہی انٹرفیس بنانا
+- **پروڈکٹ ڈیولپمنٹ**: صارف کی حوصلہ افزائی اور فیڈبیک لوپس کو سمجھنا
+- **تعلیمی ٹیکنالوجی**: گیمیفیکیشن اور سیکھنے کے مشغولیت کے نظام
+- **ڈیٹا ویژولائزیشن**: پیچیدہ معلومات کو قابل رسائی اور مشغول بنانا
+- **موبائل ایپ ڈیولپمنٹ**: برقرار رکھنے کے میکانزم اور صارف کے تجربے کا ڈیزائن
+- **مارکیٹنگ ٹیکنالوجی**: صارف کے رویے کو سمجھنا اور کنورژن کی اصلاح
+
+**حاصل کردہ پیشہ ورانہ مہارتیں**: آپ اب کر سکتے ہیں:
+- **ڈیزائن** صارف کے تجربات جو صارفین کو متحرک اور مشغول کرتے ہیں
+- **نافذ کریں** فیڈبیک سسٹمز جو صارف کے رویے کو مؤثر طریقے سے رہنمائی کرتے ہیں
+- **توازن** چیلنج اور انٹرایکٹو سسٹمز میں رسائی
+- **بنانا** بصری مواصلات جو مختلف صارف گروپس کے ساتھ کام کرتی ہیں
+- **تجزیہ کریں** صارف کے رویے اور ڈیزائن میں بہتری لائیں
+
+**گیم ڈیولپمنٹ کے تصورات میں مہارت حاصل کی**:
+- **کھلاڑی کی حوصلہ افزائی**: مشغولیت اور برقرار رکھنے کو چلانے والے عوامل کو سمجھنا
+- **بصری ڈیزائن**: واضح، دلکش، اور فعال انٹرفیس بنانا
+- **سسٹم انٹیگریشن**: ایک مربوط تجربے کے لیے متعدد گیم سسٹمز کو جوڑنا
+- **کارکردگی کی اصلاح**: مؤثر رینڈرنگ اور اسٹیٹ مینجمنٹ
+- **رسائی**: مختلف مہارت کی سطحوں اور کھلاڑی کی ضروریات کے لیے ڈیزائن کرنا
+
+**اگلا مرحلہ**: آپ ایڈوانس گیم ڈیزائن پیٹرنز کو دریافت کرنے، تجزیاتی نظام نافذ کرنے، یا گیم مونیٹائزیشن اور کھلاڑی کی برقرار رکھنے کی حکمت عملیوں کا مطالعہ کرنے کے لیے تیار ہیں!
+
+🌟 **کامیابی حاصل کی**: آپ نے پیشہ ورانہ گیم ڈیزائن اصولوں کے ساتھ مکمل کھلاڑی فیڈبیک سسٹم بنایا ہے!
 
 ---
 
@@ -191,13 +487,13 @@ npm start
 
 ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** اسپیس گیم کے اسکورنگ سسٹم کو ایک ہائی اسکور فیچر کے ساتھ بہتر بنائیں جو مستقل اسٹوریج اور بونس اسکورنگ میکینکس کو نافذ کرے۔
+**تفصیل:** خلائی کھیل کے اسکورنگ سسٹم کو بہتر بنائیں اور ایک اعلی اسکور فیچر کو مستقل اسٹوریج اور بونس اسکورنگ میکانکس کے ساتھ نافذ کریں۔
 
-**پرومپٹ:** ایک ہائی اسکور سسٹم بنائیں جو کھلاڑی کے بہترین اسکور کو localStorage میں محفوظ کرے۔ مسلسل دشمنوں کو مارنے کے لیے بونس پوائنٹس (کمبو سسٹم) شامل کریں اور مختلف دشمن اقسام کے لیے مختلف پوائنٹ ویلیوز نافذ کریں۔ جب کھلاڑی نیا ہائی اسکور حاصل کرے تو ایک بصری اشارہ شامل کریں اور گیم اسکرین پر موجودہ ہائی اسکور دکھائیں۔
+**پرومپٹ:** ایک اعلی اسکور سسٹم بنائیں جو کھلاڑی کے بہترین اسکور کو localStorage میں محفوظ کرے۔ مسلسل دشمنوں کو مارنے کے لیے بونس پوائنٹس شامل کریں (کومبو سسٹم) اور مختلف دشمن اقسام کے لیے مختلف پوائنٹ ویلیوز نافذ کریں۔ جب کھلاڑی نیا اعلی اسکور حاصل کرے تو بصری اشارہ شامل کریں اور کھیل کی اسکرین پر موجودہ اعلی اسکور دکھائیں۔
 
 ## 🚀 چیلنج
 
-اب آپ کے پاس اسکورنگ اور زندگیاں کے ساتھ ایک فعال گیم ہے۔ غور کریں کہ کون سی اضافی خصوصیات کھلاڑی کے تجربے کو بہتر بنا سکتی ہیں۔
+اب آپ کے پاس اسکورنگ اور زندگیوں کے ساتھ ایک فعال کھیل ہے۔ غور کریں کہ کون سی اضافی خصوصیات کھلاڑی کے تجربے کو بہتر بنا سکتی ہیں۔
 
 ## لیکچر کے بعد کا کوئز
 
@@ -205,13 +501,9 @@ npm start
 
 ## جائزہ اور خود مطالعہ
 
-مزید دریافت کرنا چاہتے ہیں؟ گیم اسکورنگ اور زندگی کے سسٹمز کے مختلف طریقوں پر تحقیق کریں۔ وہاں دلچسپ گیم انجنز موجود ہیں جیسے [PlayFab](https://playfab.com) جو اسکورنگ، لیڈر بورڈز، اور کھلاڑی کی ترقی کو سنبھالتے ہیں۔ کچھ ایسا شامل کرنے سے آپ کی گیم کس طرح اگلے درجے پر جا سکتی ہے؟
-
-## اسائنمنٹ
-
-[اسکورنگ گیم بنائیں](assignment.md)
+مزید دریافت
 
 ---
 
-**اعلانِ لاتعلقی**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**ڈسکلیمر**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/6-space-game/6-end-condition/README.md b/translations/ur/6-space-game/6-end-condition/README.md
index dd36f045cd..a6f3e4fa83 100644
--- a/translations/ur/6-space-game/6-end-condition/README.md
+++ b/translations/ur/6-space-game/6-end-condition/README.md
@@ -1,57 +1,165 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46bcdd9a0174031655a49bb062aa279c",
-  "translation_date": "2025-10-22T15:09:38+00:00",
+  "original_hash": "a4b78043f4d64bf3ee24e0689b8b391d",
+  "translation_date": "2025-11-03T13:33:58+00:00",
   "source_file": "6-space-game/6-end-condition/README.md",
   "language_code": "ur"
 }
 -->
-# خلائی کھیل بنائیں حصہ 6: اختتام اور دوبارہ شروع کریں
-
-ہر بہترین کھیل کے لیے واضح اختتامی شرائط اور ایک ہموار دوبارہ شروع کرنے کا طریقہ کار ضروری ہوتا ہے۔ آپ نے ایک متاثر کن خلائی کھیل بنایا ہے جس میں حرکت، لڑائی اور اسکورنگ شامل ہے - اب وقت ہے کہ آخری ٹکڑوں کو شامل کریں جو اسے مکمل محسوس کرائیں۔
-
-آپ کا کھیل فی الحال غیر معینہ مدت تک چلتا ہے، جیسے ناسا کے 1977 میں لانچ کیے گئے ووئجر پروبز - جو دہائیوں بعد بھی خلا میں سفر کر رہے ہیں۔ جبکہ یہ خلائی تحقیق کے لیے ٹھیک ہے، کھیلوں کو اطمینان بخش تجربات پیدا کرنے کے لیے واضح اختتامی پوائنٹس کی ضرورت ہوتی ہے۔
+# اسپیس گیم بنائیں حصہ 6: اختتام اور دوبارہ شروع کریں
+
+```mermaid
+journey
+    title Your Game Completion Journey
+    section End Conditions
+      Define win/lose states: 3: Student
+      Implement condition checking: 4: Student
+      Handle state transitions: 4: Student
+    section Player Experience
+      Design feedback systems: 4: Student
+      Create restart mechanics: 5: Student
+      Polish user interface: 5: Student
+    section System Integration
+      Manage game lifecycle: 5: Student
+      Handle memory cleanup: 5: Student
+      Create complete experience: 5: Student
+```
 
-آج، ہم مناسب جیت/ہار کی شرائط اور ایک دوبارہ شروع کرنے کا نظام نافذ کریں گے۔ اس سبق کے اختتام تک، آپ کے پاس ایک پالش شدہ کھیل ہوگا جسے کھلاڑی مکمل اور دوبارہ کھیل سکتے ہیں، بالکل کلاسک آرکیڈ گیمز کی طرح جنہوں نے اس میڈیم کو متعین کیا۔
+ہر زبردست گیم کو واضح اختتامی شرائط اور ایک ہموار دوبارہ شروع کرنے کا طریقہ کار کی ضرورت ہوتی ہے۔ آپ نے ایک متاثر کن اسپیس گیم بنایا ہے جس میں حرکت، لڑائی، اور اسکورنگ شامل ہے - اب وقت ہے کہ آخری ٹکڑوں کو شامل کریں جو اسے مکمل محسوس کرائیں۔
+
+آپ کا گیم فی الحال غیر معینہ مدت تک چلتا ہے، جیسے ناسا کے 1977 میں لانچ کیے گئے ووئجر پروبز - جو دہائیوں بعد بھی خلا میں سفر کر رہے ہیں۔ جبکہ یہ خلائی تحقیق کے لیے ٹھیک ہے، گیمز کو واضح اختتامی پوائنٹس کی ضرورت ہوتی ہے تاکہ تسلی بخش تجربات پیدا کیے جا سکیں۔
+
+آج، ہم مناسب جیت/ہار کی شرائط اور ایک دوبارہ شروع کرنے کا نظام نافذ کریں گے۔ اس سبق کے اختتام تک، آپ کے پاس ایک پالش گیم ہوگا جسے کھلاڑی مکمل اور دوبارہ کھیل سکتے ہیں، بالکل کلاسک آرکیڈ گیمز کی طرح جنہوں نے اس میڈیم کو متعین کیا۔
+
+```mermaid
+mindmap
+  root((Game Completion))
+    End Conditions
+      Victory States
+      Defeat Conditions
+      Progress Tracking
+      State Validation
+    Player Feedback
+      Visual Messages
+      Color Psychology
+      Clear Communication
+      Emotional Response
+    State Management
+      Game Loop Control
+      Memory Cleanup
+      Object Lifecycle
+      Event Handling
+    Restart Systems
+      Input Handling
+      State Reset
+      Fresh Initialization
+      User Experience
+    Polish Elements
+      Message Display
+      Smooth Transitions
+      Error Prevention
+      Accessibility
+```
 
 ## پری لیکچر کوئز
 
 [پری لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/39)
 
-## کھیل کے اختتامی شرائط کو سمجھنا
-
-آپ کا کھیل کب ختم ہونا چاہیے؟ یہ بنیادی سوال آرکیڈ کے ابتدائی دور سے گیم ڈیزائن کو تشکیل دے رہا ہے۔ پیک مین اس وقت ختم ہوتا ہے جب آپ بھوتوں کے ہاتھوں پکڑے جاتے ہیں یا تمام نقطے صاف کرتے ہیں، جبکہ اسپیس انویڈرز اس وقت ختم ہوتا ہے جب خلائی مخلوق نیچے پہنچ جاتی ہے یا آپ انہیں سب کو تباہ کر دیتے ہیں۔
-
-بطور کھیل تخلیق کار، آپ فتح اور شکست کی شرائط کو متعین کرتے ہیں۔ ہمارے خلائی کھیل کے لیے، یہاں آزمودہ طریقے ہیں جو دلچسپ گیم پلے تخلیق کرتے ہیں:
+## گیم کے اختتامی شرائط کو سمجھنا
+
+آپ کا گیم کب ختم ہونا چاہیے؟ یہ بنیادی سوال گیم ڈیزائن کو ابتدائی آرکیڈ دور سے تشکیل دیتا رہا ہے۔ پیک مین اس وقت ختم ہوتا ہے جب آپ بھوتوں کے ہاتھوں پکڑے جاتے ہیں یا تمام نقطے صاف کر لیتے ہیں، جبکہ اسپیس انویڈرز اس وقت ختم ہوتا ہے جب خلائی مخلوق نیچے پہنچ جاتی ہے یا آپ انہیں سب ختم کر دیتے ہیں۔
+
+بطور گیم تخلیق کار، آپ جیت اور شکست کی شرائط کو متعین کرتے ہیں۔ ہمارے اسپیس گیم کے لیے، یہاں آزمودہ طریقے ہیں جو دلچسپ گیم پلے تخلیق کرتے ہیں:
+
+```mermaid
+flowchart TD
+    A["🎮 Game Start"] --> B{"Check Conditions"}
+    
+    B --> C["Enemy Count"]
+    B --> D["Hero Lives"]
+    B --> E["Score Threshold"]
+    B --> F["Level Progress"]
+    
+    C --> C1{"Enemies = 0?"}
+    D --> D1{"Lives = 0?"}
+    E --> E1{"Score ≥ Target?"}
+    F --> F1{"Objectives Complete?"}
+    
+    C1 -->|Yes| G["🏆 Victory"]
+    D1 -->|Yes| H["💀 Defeat"]
+    E1 -->|Yes| G
+    F1 -->|Yes| G
+    
+    C1 -->|No| B
+    D1 -->|No| B
+    E1 -->|No| B
+    F1 -->|No| B
+    
+    G --> I["🔄 Restart Option"]
+    H --> I
+    
+    style G fill:#e8f5e8
+    style H fill:#ffebee
+    style I fill:#e3f2fd
+```
 
-- **`N` دشمن جہاز تباہ ہو چکے ہیں**: یہ کافی عام ہے اگر آپ کھیل کو مختلف سطحوں میں تقسیم کریں کہ آپ کو ایک سطح مکمل کرنے کے لیے `N` دشمن جہاز تباہ کرنے کی ضرورت ہو۔
-- **آپ کا جہاز تباہ ہو گیا ہے**: یقینی طور پر ایسے کھیل ہیں جہاں آپ کا جہاز تباہ ہونے پر آپ کھیل ہار جاتے ہیں۔ ایک اور عام طریقہ یہ ہے کہ آپ کے پاس زندگیوں کا تصور ہو۔ ہر بار جب آپ کا جہاز تباہ ہوتا ہے تو یہ ایک زندگی کم کر دیتا ہے۔ جب تمام زندگیاں ختم ہو جائیں تو آپ کھیل ہار جاتے ہیں۔
+- **`N` دشمن جہاز تباہ ہو چکے ہیں**: یہ کافی عام ہے اگر آپ گیم کو مختلف لیولز میں تقسیم کرتے ہیں کہ آپ کو ایک لیول مکمل کرنے کے لیے `N` دشمن جہاز تباہ کرنے ہوں گے۔
+- **آپ کا جہاز تباہ ہو چکا ہے**: یقینی طور پر ایسے گیمز ہیں جہاں آپ کا جہاز تباہ ہونے پر آپ گیم ہار جاتے ہیں۔ ایک اور عام طریقہ یہ ہے کہ آپ کے پاس زندگیوں کا تصور ہو۔ ہر بار جب آپ کا جہاز تباہ ہوتا ہے تو یہ ایک زندگی کم کر دیتا ہے۔ جب تمام زندگیاں ختم ہو جاتی ہیں تو آپ گیم ہار جاتے ہیں۔
 - **آپ نے `N` پوائنٹس جمع کیے ہیں**: ایک اور عام اختتامی شرط یہ ہے کہ آپ پوائنٹس جمع کریں۔ آپ پوائنٹس کیسے حاصل کرتے ہیں یہ آپ پر منحصر ہے لیکن یہ کافی عام ہے کہ مختلف سرگرمیوں جیسے دشمن جہاز کو تباہ کرنے یا شاید ان اشیاء کو جمع کرنے پر پوائنٹس دیے جائیں جو تباہ ہونے پر گرتی ہیں۔
-- **ایک سطح مکمل کریں**: اس میں کئی شرائط شامل ہو سکتی ہیں جیسے `X` دشمن جہاز تباہ، `Y` پوائنٹس جمع یا شاید ایک مخصوص آئٹم جمع کیا گیا ہو۔
-
-## کھیل کو دوبارہ شروع کرنے کی فعالیت نافذ کرنا
-
-اچھے کھیل ہموار دوبارہ شروع کرنے کے طریقہ کار کے ذریعے دوبارہ کھیلنے کی ترغیب دیتے ہیں۔ جب کھلاڑی ایک کھیل مکمل کرتے ہیں (یا شکست کا سامنا کرتے ہیں)، وہ اکثر فوراً دوبارہ کوشش کرنا چاہتے ہیں - چاہے اپنے اسکور کو شکست دینے کے لیے یا اپنی کارکردگی کو بہتر بنانے کے لیے۔
+- **ایک لیول مکمل کریں**: اس میں کئی شرائط شامل ہو سکتی ہیں جیسے `X` دشمن جہاز تباہ کیے گئے، `Y` پوائنٹس جمع کیے گئے یا شاید ایک مخصوص آئٹم جمع کیا گیا۔
+
+## گیم دوبارہ شروع کرنے کی فعالیت کو نافذ کرنا
+
+اچھے گیمز ہموار دوبارہ شروع کرنے کے طریقہ کار کے ذریعے دوبارہ کھیلنے کی حوصلہ افزائی کرتے ہیں۔ جب کھلاڑی ایک گیم مکمل کرتے ہیں (یا شکست کا سامنا کرتے ہیں)، وہ اکثر فوراً دوبارہ کوشش کرنا چاہتے ہیں - چاہے اپنے اسکور کو شکست دینے کے لیے یا اپنی کارکردگی کو بہتر بنانے کے لیے۔
+
+```mermaid
+stateDiagram-v2
+    [*] --> Playing: Game Start
+    Playing --> Victory: All enemies destroyed
+    Playing --> Defeat: Lives = 0
+    
+    Victory --> MessageDisplay: Show win message
+    Defeat --> MessageDisplay: Show lose message
+    
+    MessageDisplay --> WaitingRestart: Press Enter prompt
+    WaitingRestart --> Resetting: Enter key pressed
+    
+    Resetting --> CleanupMemory: Clear intervals
+    CleanupMemory --> ClearEvents: Remove listeners
+    ClearEvents --> InitializeGame: Fresh start
+    InitializeGame --> Playing: New game begins
+    
+    note right of MessageDisplay
+        Color-coded feedback:
+        Green = Victory
+        Red = Defeat
+    end note
+    
+    note right of Resetting
+        Complete state reset
+        prevents memory leaks
+    end note
+```
 
-ٹیٹرس اس کی بہترین مثال ہے: جب آپ کے بلاکس اوپر تک پہنچ جاتے ہیں، آپ فوراً ایک نیا کھیل شروع کر سکتے ہیں بغیر پیچیدہ مینو میں جانے کے۔ ہم ایک ایسا ہی دوبارہ شروع کرنے کا نظام بنائیں گے جو کھیل کی حالت کو صاف طور پر ری سیٹ کرے اور کھلاڑیوں کو جلدی سے دوبارہ ایکشن میں لے آئے۔
+ٹیٹرس اس کی بہترین مثال ہے: جب آپ کے بلاکس اوپر تک پہنچ جاتے ہیں، تو آپ فوراً ایک نیا گیم شروع کر سکتے ہیں بغیر پیچیدہ مینو میں جائے۔ ہم ایک ایسا ہی دوبارہ شروع کرنے کا نظام بنائیں گے جو گیم کی حالت کو صاف طور پر ری سیٹ کرے اور کھلاڑیوں کو جلدی سے ایکشن میں واپس لے جائے۔
 
-✅ **عکاسی**: ان کھیلوں کے بارے میں سوچیں جو آپ نے کھیلے ہیں۔ وہ کن شرائط پر ختم ہوتے ہیں، اور آپ کو دوبارہ شروع کرنے کے لیے کیسے اکسایا جاتا ہے؟ کیا چیز دوبارہ شروع کرنے کے تجربے کو ہموار بناتی ہے اور کیا چیز اسے مایوس کن بناتی ہے؟
+✅ **غور و فکر**: ان گیمز کے بارے میں سوچیں جو آپ نے کھیلے ہیں۔ وہ کن شرائط پر ختم ہوتے ہیں، اور آپ کو دوبارہ شروع کرنے کے لیے کیسے اکسایا جاتا ہے؟ کیا چیز ایک ہموار دوبارہ شروع کرنے کے تجربے کو پریشان کن کے مقابلے میں بہتر بناتی ہے؟
 
 ## آپ کیا بنائیں گے
 
-آپ وہ آخری خصوصیات نافذ کریں گے جو آپ کے پروجیکٹ کو مکمل کھیل کے تجربے میں تبدیل کرتی ہیں۔ یہ عناصر پالش شدہ کھیلوں کو بنیادی پروٹوٹائپس سے ممتاز کرتے ہیں۔
+آپ وہ آخری خصوصیات نافذ کریں گے جو آپ کے پروجیکٹ کو ایک مکمل گیم کے تجربے میں تبدیل کرتی ہیں۔ یہ عناصر پالش گیمز کو بنیادی پروٹوٹائپس سے ممتاز کرتے ہیں۔
 
 **آج ہم کیا شامل کر رہے ہیں:**
 
-1. **فتح کی شرط**: تمام دشمنوں کو تباہ کریں اور ایک مناسب جشن منائیں (آپ نے یہ حاصل کیا ہے!)
-2. **شکست کی شرط**: زندگیاں ختم ہو جائیں اور شکست کے اسکرین کا سامنا کریں
-3. **دوبارہ شروع کرنے کا طریقہ کار**: انٹر دبائیں اور فوراً دوبارہ کھیلنا شروع کریں - کیونکہ ایک کھیل کبھی کافی نہیں ہوتا
-4. **حالت کا انتظام**: ہر بار صاف آغاز - پچھلے کھیل سے کوئی بچا ہوا دشمن یا عجیب گڑبڑ نہیں
+1. **جیت کی شرط**: تمام دشمنوں کو ختم کریں اور ایک مناسب جشن منائیں (آپ نے یہ حاصل کیا ہے!)
+2. **شکست کی شرط**: زندگی ختم ہو جائے اور شکست کے اسکرین کا سامنا کریں
+3. **دوبارہ شروع کرنے کا طریقہ کار**: انٹر دبائیں اور فوراً دوبارہ شروع کریں - کیونکہ ایک گیم کبھی کافی نہیں ہوتا
+4. **حالت کا انتظام**: ہر بار صاف ستھرا آغاز - پچھلے گیم سے کوئی بچا ہوا دشمن یا عجیب و غریب خرابی نہیں
 
-## شروعات کرنا
+## شروع کریں
 
-آئیے آپ کے ترقیاتی ماحول کو تیار کریں۔ آپ کے پاس پچھلے اسباق سے اپنے خلائی کھیل کی تمام فائلیں تیار ہونی چاہئیں۔
+آئیے آپ کے ڈیولپمنٹ ماحول کو تیار کریں۔ آپ کے پاس پچھلے اسباق سے اپنے اسپیس گیم کی تمام فائلیں تیار ہونی چاہئیں۔
 
 **آپ کا پروجیکٹ کچھ اس طرح نظر آنا چاہیے:**
 
@@ -66,7 +174,7 @@ CO_OP_TRANSLATOR_METADATA:
 -| package.json
 ```
 
-**اپنا ترقیاتی سرور شروع کریں:**
+**اپنا ڈیولپمنٹ سرور شروع کریں:**
 
 ```bash
 cd your-work
@@ -74,19 +182,45 @@ npm start
 ```
 
 **یہ کمانڈ:**
-- `http://localhost:5000` پر ایک مقامی سرور چلاتا ہے
+- ایک مقامی سرور `http://localhost:5000` پر چلاتا ہے
 - آپ کی فائلوں کو صحیح طریقے سے پیش کرتا ہے
-- جب آپ تبدیلیاں کرتے ہیں تو خود بخود تازہ کرتا ہے
-
-اپنے براؤزر میں `http://localhost:5000` کھولیں اور تصدیق کریں کہ آپ کا کھیل چل رہا ہے۔ آپ کو حرکت کرنے، شوٹ کرنے اور دشمنوں کے ساتھ تعامل کرنے کے قابل ہونا چاہیے۔ ایک بار تصدیق ہو جانے کے بعد، ہم نفاذ کے ساتھ آگے بڑھ سکتے ہیں۔
-
-> 💡 **پرو ٹپ**: ویژول اسٹوڈیو کوڈ میں انتباہات سے بچنے کے لیے، `gameLoopId` کو اپنی فائل کے اوپر `let gameLoopId;` کے طور پر اعلان کریں بجائے اس کے کہ اسے `window.onload` فنکشن کے اندر اعلان کریں۔ یہ جدید جاوا اسکرپٹ متغیر اعلان کے بہترین طریقوں کی پیروی کرتا ہے۔
+- جب آپ تبدیلیاں کرتے ہیں تو خود بخود ریفریش ہوتا ہے
+
+اپنے براؤزر میں `http://localhost:5000` کھولیں اور تصدیق کریں کہ آپ کا گیم چل رہا ہے۔ آپ کو حرکت کرنے، شوٹ کرنے، اور دشمنوں کے ساتھ تعامل کرنے کے قابل ہونا چاہیے۔ ایک بار تصدیق ہو جائے تو ہم نفاذ کے ساتھ آگے بڑھ سکتے ہیں۔
+
+> 💡 **پرو ٹپ**: ویژول اسٹوڈیو کوڈ میں وارننگز سے بچنے کے لیے، `gameLoopId` کو اپنی فائل کے اوپر `let gameLoopId;` کے طور پر اعلان کریں بجائے اس کے کہ اسے `window.onload` فنکشن کے اندر اعلان کریں۔ یہ جدید جاوا اسکرپٹ ویریبل اعلان کے بہترین طریقوں کی پیروی کرتا ہے۔
+
+```mermaid
+flowchart TD
+    A["1. Condition Tracking"] --> B["2. Event Handlers"]
+    B --> C["3. Message Constants"]
+    C --> D["4. Restart Controls"]
+    D --> E["5. Message Display"]
+    E --> F["6. Reset System"]
+    
+    G["isHeroDead()\nisEnemiesDead()"] --> A
+    H["Collision Events\nEnd Game Events"] --> B
+    I["GAME_END_WIN\nGAME_END_LOSS"] --> C
+    J["Enter Key\nRestart Trigger"] --> D
+    K["Victory/Defeat\nColor-coded Text"] --> E
+    L["State Cleanup\nFresh Initialization"] --> F
+    
+    F --> M["🎮 Complete Game"]
+    
+    style A fill:#e3f2fd
+    style B fill:#e8f5e8
+    style C fill:#fff3e0
+    style D fill:#f3e5f5
+    style E fill:#e0f2f1
+    style F fill:#fce4ec
+    style M fill:#e1f5fe
+```
 
 ## نفاذ کے مراحل
 
 ### مرحلہ 1: اختتامی شرط کو ٹریک کرنے والے فنکشنز بنائیں
 
-ہمیں ایسے فنکشنز کی ضرورت ہے جو یہ نگرانی کریں کہ کھیل کب ختم ہونا چاہیے۔ جیسے انٹرنیشنل اسپیس اسٹیشن پر سینسرز جو مسلسل اہم نظاموں کی نگرانی کرتے ہیں، یہ فنکشنز کھیل کی حالت کو مسلسل چیک کریں گے۔
+ہمیں ایسے فنکشنز کی ضرورت ہے جو گیم کے ختم ہونے کا وقت مانیٹر کریں۔ جیسے انٹرنیشنل اسپیس اسٹیشن کے سینسرز جو مسلسل اہم نظاموں کی نگرانی کرتے ہیں، یہ فنکشنز گیم کی حالت کو مسلسل چیک کریں گے۔
 
 ```javascript
 function isHeroDead() {
@@ -99,16 +233,50 @@ function isEnemiesDead() {
 }
 ```
 
-**یہاں کیا ہو رہا ہے:**
-- **چیک کرتا ہے** کہ ہمارا ہیرو زندگیوں سے باہر ہے یا نہیں (افسوس!)
-- **گنتی کرتا ہے** کہ کتنے دشمن ابھی زندہ ہیں اور لڑ رہے ہیں
-- **سچ واپس کرتا ہے** جب میدان جنگ دشمنوں سے صاف ہو جاتا ہے
-- **سادہ سچ/جھوٹ منطق** استعمال کرتا ہے تاکہ چیزیں سیدھی رہیں
-- **فلٹر کرتا ہے** تمام کھیل کے اشیاء کے ذریعے زندہ بچ جانے والوں کو تلاش کرنے کے لیے
+**یہاں پس منظر میں کیا ہو رہا ہے:**
+- **چیک کرتا ہے** کہ آیا ہمارا ہیرو زندگیوں سے باہر ہے (افسوس!)
+- **گنتی کرتا ہے** کہ کتنے دشمن ابھی بھی زندہ ہیں
+- **سچ واپس کرتا ہے** جب میدان جنگ دشمنوں سے خالی ہو
+- **سادہ سچ/جھوٹ منطق استعمال کرتا ہے** تاکہ چیزیں سیدھی رہیں
+- **تمام گیم آبجیکٹس کو فلٹر کرتا ہے** تاکہ زندہ بچ جانے والوں کو تلاش کیا جا سکے
 
 ### مرحلہ 2: اختتامی شرائط کے لیے ایونٹ ہینڈلرز کو اپ ڈیٹ کریں
 
-اب ہم ان شرطوں کو کھیل کے ایونٹ سسٹم سے جوڑیں گے۔ جب بھی کوئی تصادم ہوتا ہے، کھیل اس کا جائزہ لے گا کہ آیا یہ کسی اختتامی شرط کو متحرک کرتا ہے۔ یہ اہم کھیل کے واقعات کے لیے فوری تاثرات پیدا کرتا ہے۔
+اب ہم ان شرطوں کو گیم کے ایونٹ سسٹم سے جوڑیں گے۔ جب بھی کوئی تصادم ہوتا ہے، گیم اس بات کا جائزہ لے گا کہ آیا یہ اختتامی شرط کو متحرک کرتا ہے۔ یہ اہم گیم ایونٹس کے لیے فوری فیڈبیک تخلیق کرتا ہے۔
+
+```mermaid
+sequenceDiagram
+    participant Collision
+    participant GameLogic
+    participant Conditions
+    participant EventSystem
+    participant Display
+    
+    Collision->>GameLogic: Laser hits enemy
+    GameLogic->>GameLogic: Destroy objects
+    GameLogic->>Conditions: Check isEnemiesDead()
+    
+    alt All enemies defeated
+        Conditions->>EventSystem: Emit GAME_END_WIN
+        EventSystem->>Display: Show victory message
+    else Enemies remain
+        Conditions->>GameLogic: Continue game
+    end
+    
+    Collision->>GameLogic: Enemy hits hero
+    GameLogic->>GameLogic: Decrease lives
+    GameLogic->>Conditions: Check isHeroDead()
+    
+    alt Lives = 0
+        Conditions->>EventSystem: Emit GAME_END_LOSS
+        EventSystem->>Display: Show defeat message
+    else Lives remain
+        GameLogic->>Conditions: Check isEnemiesDead()
+        alt All enemies defeated
+            Conditions->>EventSystem: Emit GAME_END_WIN
+        end
+    end
+```
 
 ```javascript
 eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@@ -143,14 +311,14 @@ eventEmitter.on(Messages.GAME_END_LOSS, () => {
 ```
 
 **یہاں کیا ہو رہا ہے:**
-- **لیزر دشمن کو مارتا ہے**: دونوں غائب ہو جاتے ہیں، آپ کو پوائنٹس ملتے ہیں، اور ہم چیک کرتے ہیں کہ آپ جیت گئے ہیں یا نہیں
-- **دشمن آپ کو مارتا ہے**: آپ ایک زندگی کھو دیتے ہیں، اور ہم چیک کرتے ہیں کہ آپ ابھی بھی زندہ ہیں یا نہیں
-- **سمارٹ ترتیب**: ہم پہلے شکست کے لیے چیک کرتے ہیں (کوئی بھی ایک ہی وقت میں جیتنا اور ہارنا نہیں چاہتا!)
-- **فوری ردعمل**: جیسے ہی کچھ اہم ہوتا ہے، کھیل اس کے بارے میں جانتا ہے
+- **لیزر دشمن کو لگتا ہے**: دونوں غائب ہو جاتے ہیں، آپ کو پوائنٹس ملتے ہیں، اور ہم چیک کرتے ہیں کہ آیا آپ جیت گئے ہیں
+- **دشمن آپ کو لگتا ہے**: آپ ایک زندگی کھو دیتے ہیں، اور ہم چیک کرتے ہیں کہ آیا آپ ابھی بھی زندہ ہیں
+- **سمارٹ ترتیب**: ہم پہلے شکست کے لیے چیک کرتے ہیں (کوئی بھی جیتنا اور ہارنا ایک ہی وقت میں نہیں چاہتا!)
+- **فوری ردعمل**: جیسے ہی کچھ اہم ہوتا ہے، گیم اس کے بارے میں جانتا ہے
 
-### مرحلہ 3: نئے پیغام کے مستقلات شامل کریں
+### مرحلہ 3: نئے میسج کانسٹنٹس شامل کریں
 
-آپ کو اپنے `Messages` مستقل آبجیکٹ میں نئے پیغام کی اقسام شامل کرنے کی ضرورت ہوگی۔ یہ مستقلات مستقل مزاجی برقرار رکھنے اور آپ کے ایونٹ سسٹم میں ٹائپوز کو روکنے میں مدد کرتے ہیں۔
+آپ کو اپنے `Messages` کانسٹنٹ آبجیکٹ میں نئے میسج کی اقسام شامل کرنے کی ضرورت ہوگی۔ یہ کانسٹنٹس مستقل مزاجی کو برقرار رکھنے اور آپ کے ایونٹ سسٹم میں ٹائپوز کو روکنے میں مدد کرتے ہیں۔
 
 ```javascript
 GAME_END_LOSS: "GAME_END_LOSS",
@@ -158,13 +326,13 @@ GAME_END_WIN: "GAME_END_WIN",
 ```
 
 **اوپر، ہم نے:**
-- **شامل کیے** کھیل کے اختتامی واقعات کے لیے مستقلات تاکہ مستقل مزاجی برقرار رہے
-- **استعمال کیے** وضاحتی نام جو واضح طور پر ایونٹ کے مقصد کی نشاندہی کرتے ہیں
-- **موجودہ نام دینے کے کنونشن** کی پیروی کی پیغام کی اقسام کے لیے
+- **میسج کانسٹنٹس شامل کیے** گیم کے اختتامی ایونٹس کے لیے تاکہ مستقل مزاجی برقرار رہے
+- **تفصیلی نام استعمال کیے** جو ایونٹ کے مقصد کو واضح طور پر ظاہر کرتے ہیں
+- **موجودہ نام دینے کے کنونشن کی پیروی کی** میسج کی اقسام کے لیے
 
 ### مرحلہ 4: دوبارہ شروع کرنے کے کنٹرولز نافذ کریں
 
-اب آپ کی بورڈ کنٹرولز شامل کریں گے جو کھلاڑیوں کو کھیل دوبارہ شروع کرنے کی اجازت دیتے ہیں۔ انٹر کی کلید ایک قدرتی انتخاب ہے کیونکہ یہ عام طور پر کارروائیوں کی تصدیق اور نئے کھیل شروع کرنے سے منسلک ہوتی ہے۔
+اب آپ کی بورڈ کنٹرولز شامل کریں گے جو کھلاڑیوں کو گیم دوبارہ شروع کرنے کی اجازت دیتے ہیں۔ انٹر کی کلید ایک قدرتی انتخاب ہے کیونکہ یہ عام طور پر ایکشنز کی تصدیق کرنے اور نئے گیمز شروع کرنے سے وابستہ ہے۔
 
 **اپنے موجودہ کی ڈاؤن ایونٹ لسٹنر میں انٹر کی کلید کا پتہ لگانا شامل کریں:**
 
@@ -174,7 +342,7 @@ else if(evt.key === "Enter") {
 }
 ```
 
-**نئے پیغام کے مستقل کو شامل کریں:**
+**نیا میسج کانسٹنٹ شامل کریں:**
 
 ```javascript
 KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
@@ -182,13 +350,13 @@ KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
 
 **آپ کو کیا جاننے کی ضرورت ہے:**
 - **آپ کے موجودہ کی بورڈ ایونٹ ہینڈلنگ سسٹم کو بڑھاتا ہے**
-- **انٹر کی کلید** کو دوبارہ شروع کرنے کے محرک کے طور پر استعمال کرتا ہے تاکہ صارف کے تجربے کو بدیہی بنایا جا سکے
-- **ایک حسب ضرورت ایونٹ خارج کرتا ہے** جسے آپ کے کھیل کے دیگر حصے سن سکتے ہیں
+- **انٹر کی کلید کو دوبارہ شروع کرنے کے ٹریگر کے طور پر استعمال کرتا ہے** بدیہی صارف کے تجربے کے لیے
+- **ایک کسٹم ایونٹ جاری کرتا ہے** جسے آپ کے گیم کے دیگر حصے سن سکتے ہیں
 - **آپ کے دیگر کی بورڈ کنٹرولز کے جیسے ہی پیٹرن کو برقرار رکھتا ہے**
 
-### مرحلہ 5: پیغام ڈسپلے سسٹم بنائیں
+### مرحلہ 5: میسج ڈسپلے سسٹم بنائیں
 
-آپ کے کھیل کو کھلاڑیوں کے ساتھ نتائج واضح طور پر بات چیت کرنے کی ضرورت ہے۔ ہم ایک پیغام کا نظام بنائیں گے جو فتح اور شکست کی حالتوں کو رنگین متن کے ذریعے ظاہر کرے گا، ابتدائی کمپیوٹر سسٹمز کے ٹرمینل انٹرفیس کی طرح جہاں سبز کامیابی کی نشاندہی کرتا تھا اور سرخ غلطیوں کا اشارہ کرتا تھا۔
+آپ کے گیم کو کھلاڑیوں کے ساتھ نتائج واضح طور پر بات چیت کرنے کی ضرورت ہے۔ ہم ایک میسج سسٹم بنائیں گے جو جیت اور شکست کی حالتوں کو رنگین متن کے ذریعے ظاہر کرے گا، ابتدائی کمپیوٹر سسٹمز کے ٹرمینل انٹرفیس کی طرح جہاں سبز کامیابی کی نشاندہی کرتا تھا اور سرخ غلطیوں کا اشارہ دیتا تھا۔
 
 **`displayMessage()` فنکشن بنائیں:**
 
@@ -202,11 +370,11 @@ function displayMessage(message, color = "red") {
 ```
 
 **مرحلہ وار، یہاں کیا ہو رہا ہے:**
-- **فونٹ کا سائز اور خاندان سیٹ کرتا ہے** تاکہ متن واضح اور پڑھنے کے قابل ہو
-- **رنگ پیرامیٹر** کو "سرخ" کے ڈیفالٹ کے ساتھ لاگو کرتا ہے انتباہات کے لیے
+- **فونٹ سائز اور فیملی سیٹ کرتا ہے** واضح، پڑھنے کے قابل متن کے لیے
+- **ایک رنگ پیرامیٹر لاگو کرتا ہے** "سرخ" کو انتباہات کے لیے ڈیفالٹ کے طور پر
 - **متن کو افقی اور عمودی طور پر کینوس پر مرکز کرتا ہے**
-- **جدید جاوا اسکرپٹ ڈیفالٹ پیرامیٹرز** استعمال کرتا ہے لچکدار رنگ کے اختیارات کے لیے
-- **کینوس 2D سیاق و سباق** کا فائدہ اٹھاتا ہے براہ راست متن رینڈرنگ کے لیے
+- **جدید جاوا اسکرپٹ ڈیفالٹ پیرامیٹرز استعمال کرتا ہے** لچکدار رنگ کے اختیارات کے لیے
+- **کینوس 2D کانٹیکس کا فائدہ اٹھاتا ہے** براہ راست متن رینڈرنگ کے لیے
 
 **`endGame()` فنکشن بنائیں:**
 
@@ -234,16 +402,32 @@ function endGame(win) {
 ```
 
 **یہ فنکشن کیا کرتا ہے:**
-- **سب کچھ جگہ پر منجمد کرتا ہے** - مزید حرکت کرنے والے جہاز یا لیزرز نہیں
-- **ایک چھوٹا وقفہ لیتا ہے** (200ms) تاکہ آخری فریم ڈرائنگ مکمل کر سکے
-- **اسکرین کو صاف کرتا ہے** اور ڈرامائی اثر کے لیے اسے سیاہ رنگ دیتا ہے
-- **مختلف پیغامات دکھاتا ہے** فاتحین اور ہارنے والوں کے لیے
-- **خبریں رنگین کوڈ کرتا ہے** - اچھے کے لیے سبز، اور... اچھے کے لیے نہیں، سرخ
-- **کھلاڑیوں کو بتاتا ہے** کہ دوبارہ کھیلنا کیسے شروع کریں
+- **سب کچھ جگہ پر منجمد کر دیتا ہے** - مزید حرکت کرنے والے جہاز یا لیزرز نہیں
+- **ایک چھوٹا وقفہ لیتا ہے (200ms)** آخری فریم کو مکمل طور پر ڈرائنگ کرنے دیتا ہے
+- **اسکرین کو صاف کرتا ہے اور ڈرامائی اثر کے لیے اسے سیاہ رنگ دیتا ہے**
+- **جیتنے والوں اور ہارنے والوں کے لیے مختلف میسجز دکھاتا ہے**
+- **خبریں رنگین کوڈ کرتا ہے** - اچھے کے لیے سبز، اور... ٹھیک ہے، اچھا نہیں کے لیے سرخ
+- **کھلاڑیوں کو بتاتا ہے** کہ دوبارہ کیسے شروع کریں
+
+### 🔄 **تعلیمی جائزہ**
+**گیم اسٹیٹ مینجمنٹ**: ری سیٹ کی فعالیت کو نافذ کرنے سے پہلے، یقینی بنائیں کہ آپ سمجھتے ہیں:
+- ✅ اختتامی شرائط واضح گیم پلے کے مقاصد کیسے تخلیق کرتی ہیں؟
+- ✅ بصری فیڈبیک کھلاڑی کی سمجھ کو کیوں ضروری ہے؟
+- ✅ میموری لیکس کو روکنے میں مناسب صفائی کی اہمیت؟
+- ✅ ایونٹ ڈرائیون آرکیٹیکچر صاف حالت کی منتقلی کو کیسے فعال کرتا ہے؟
+
+**فوری خود ٹیسٹ**: اگر آپ ری سیٹ کے دوران ایونٹ لسٹنرز کو صاف نہ کریں تو کیا ہوگا؟
+*جواب: میموری لیکس اور ڈپلیکیٹ ایونٹ ہینڈلرز جو غیر متوقع رویے کا سبب بنتے ہیں*
+
+**گیم ڈیزائن کے اصول**: آپ اب نافذ کر رہے ہیں:
+- **واضح مقاصد**: کھلاڑی بالکل جانتے ہیں کہ کامیابی اور ناکامی کو کیا متعین کرتا ہے
+- **فوری فیڈبیک**: گیم اسٹیٹ میں تبدیلیاں فوراً بات چیت کی جاتی ہیں
+- **صارف کا کنٹرول**: کھلاڑی جب چاہیں دوبارہ شروع کر سکتے ہیں
+- **سسٹم کی وشوسنییتا**: مناسب صفائی کیڑے اور کارکردگی کے مسائل کو روکتی ہے
 
-### مرحلہ 6: کھیل کو ری سیٹ کرنے کی فعالیت نافذ کریں
+### مرحلہ 6: گیم ری سیٹ کی فعالیت کو نافذ کریں
 
-ری سیٹ سسٹم کو موجودہ کھیل کی حالت کو مکمل طور پر صاف کرنا اور ایک نیا کھیل سیشن شروع کرنا چاہیے۔ یہ یقینی بناتا ہے کہ کھلاڑیوں کو پچھلے کھیل سے کسی بھی بچی ہوئی ڈیٹا کے بغیر صاف آغاز ملے۔
+ری سیٹ سسٹم کو موجودہ گیم اسٹیٹ کو مکمل طور پر صاف کرنے اور ایک تازہ گیم سیشن کو شروع کرنے کی ضرورت ہے۔ یہ یقینی بناتا ہے کہ کھلاڑیوں کو پچھلے گیم سے کسی بھی بچی ہوئی ڈیٹا کے بغیر ایک صاف آغاز ملے۔
 
 **`resetGame()` فنکشن بنائیں:**
 
@@ -266,13 +450,13 @@ function resetGame() {
 }
 ```
 
-**آئیے ہر حصے کو سمجھیں:**
-- **چیک کرتا ہے** کہ آیا کوئی کھیل کا لوپ فی الحال چل رہا ہے یا نہیں ری سیٹ کرنے سے پہلے
-- **موجودہ کھیل کے لوپ کو صاف کرتا ہے** تاکہ تمام موجودہ کھیل کی سرگرمی کو روک سکے
-- **تمام ایونٹ لسٹنرز کو ہٹاتا ہے** تاکہ میموری لیک کو روکا جا سکے
-- **کھیل کی حالت کو دوبارہ شروع کرتا ہے** تازہ اشیاء اور متغیرات کے ساتھ
-- **ایک نیا کھیل کا لوپ شروع کرتا ہے** تمام ضروری کھیل کے فنکشنز کے ساتھ
-- **ایک ہی 100ms وقفہ برقرار رکھتا ہے** مستقل کھیل کی کارکردگی کے لیے
+**آئیے ہر حصے کو سمجھتے ہیں:**
+- **چیک کرتا ہے** کہ آیا گیم لوپ فی الحال چل رہا ہے اس سے پہلے کہ ری سیٹ کریں
+- **موجودہ گیم لوپ کو صاف کرتا ہے** تمام موجودہ گیم سرگرمی کو روکنے کے لیے
+- **تمام ایونٹ لسٹنرز کو ہٹاتا ہے** میموری لیکس کو روکنے کے لیے
+- **گیم اسٹیٹ کو دوبارہ شروع کرتا ہے** تازہ آبجیکٹس اور ویریبلز کے ساتھ
+- **ایک نیا گیم لوپ شروع کرتا ہے** تمام ضروری گیم فنکشنز کے ساتھ
+- **ایک ہی 100ms وقفہ برقرار رکھتا ہے** مستقل گیم کارکردگی کے لیے
 
 **اپنے `initGame()` فنکشن میں انٹر کی کلید ایونٹ ہینڈلر شامل کریں:**
 
@@ -282,7 +466,7 @@ eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
 });
 ```
 
-**اپنے ایونٹ ایمیٹر کلاس میں `clear()` طریقہ شامل کریں:**
+**اپنے ایونٹ ایمیٹر کلاس میں `clear()` میتھڈ شامل کریں:**
 
 ```javascript
 clear() {
@@ -291,44 +475,150 @@ clear() {
 ```
 
 **یاد رکھنے کے اہم نکات:**
-- **انٹر کی کلید دبانے کو کھیل ری سیٹ کرنے کی فعالیت سے جوڑتا ہے**
-- **کھیل کی شروعات کے دوران اس ایونٹ لسٹنر کو رجسٹر کرتا ہے**
-- **تمام ایونٹ لسٹنرز کو ہٹانے کا صاف طریقہ فراہم کرتا ہے** کھیلوں کے درمیان
-- **کھیلوں کے درمیان ایونٹ ہینڈلرز کو صاف کرتا ہے** میموری لیک کو روکنے کے لیے
-- **لسٹنرز آبجیکٹ کو خالی حالت میں ری سیٹ کرتا ہے** تازہ شروعات کے لیے
+- **انٹر کی کلید پریس کو گیم ری سیٹ کی فعالیت سے جوڑتا ہے**
+- **گیم کی شروعات کے دوران اس ایونٹ لسٹنر کو رجسٹر کرتا ہے**
+- **تمام ایونٹ لسٹنرز کو ہٹانے کا ایک صاف طریقہ فراہم کرتا ہے** گیمز کے درمیان
+- **میموری لیکس کو روکتا ہے** گیمز کے درمیان ایونٹ ہینڈلرز کو صاف کرکے
+- **لسٹنرز آبجیکٹ کو ایک خالی حالت میں ری سیٹ کرتا ہے** تازہ شروعات کے لیے
 
 ## مبارک ہو! 🎉
 
-👽 💥 🚀 آپ نے کامیابی سے زمین سے ایک مکمل کھیل بنایا۔ جیسے 1970 کی دہائی میں پہلے ویڈیو گیمز بنانے والے پروگرامرز نے، آپ نے کوڈ کی لائنوں کو ایک انٹرایکٹو تجربے میں تبدیل کیا ہے جس میں مناسب کھیل کے میکینکس اور صارف کی رائے شامل ہے۔ 🚀 💥 👽
+👽 💥 🚀 آپ نے کامیابی سے زمین سے ایک مکمل گیم بنایا ہے۔ جیسے 1970 کی دہائی میں پہلے ویڈیو گیمز بنانے والے پروگرامرز نے، آپ نے کوڈ کی لائنوں کو ایک انٹرایکٹو تجربے میں تبدیل کیا ہے جس میں مناسب گیم میکینکس اور صارف فیڈبیک شامل ہیں۔ 🚀 💥 👽
 
 **آپ نے حاصل کیا:**
-- **مکمل جیت اور ہار کی شرائط نافذ کیں** صارف کی رائے کے ساتھ
-- **مسلسل گیم پلے کے لیے ہموار دوبارہ شروع کرنے کا نظام بنایا**
-- **کھیل کی حالتوں کے لیے واضح بصری مواصلات ڈیزائن کیے**
-- **پیچیدہ کھیل کی حالت کی منتقلی اور صفائی کا انتظام کیا**
-- **تمام اجزاء کو ایک مربوط، کھیلنے کے قابل کھیل میں جمع کیا**
+- **مکمل جیت اور ہار کی شرائط نافذ کیں** صارف فیڈبیک کے ساتھ
+- **ایک ہموار دوبارہ شروع کرنے کا نظام تخلیق کیا** مسلسل گیم پلے کے لیے
+- **گیم اسٹیٹس کے لیے واضح بصری مواصلات ڈیزائن کیے**
+- **پیچیدہ گیم اسٹیٹ کی منتقلی اور صفائی کا انتظام کیا**
+- **تمام اجزاء کو ایک مربوط، کھیلنے کے قابل گیم میں جمع کیا**
+
+### 🔄 **تعلیمی جائزہ**
+**مکمل گیم ڈیولپمنٹ سسٹم**: اپنے مکمل گیم ڈیولپمنٹ سائیکل کی مہارت کا جشن منائیں:
+- ✅ اختتامی شرائط تسلی بخش کھلاڑی کے تجربات کیسے تخلیق کرتی ہیں؟
+- ✅ گیم کی استحکام کے لیے مناسب اسٹیٹ مینجمنٹ کیوں اہم ہے؟
+- ✅ بصری فیڈبیک کھلاڑی کی سمجھ کو کیسے بڑھاتا ہے؟
+- ✅ دوبارہ شروع کرنے کا نظام کھلاڑی کی دلچسپی کو کیسے برقرار رکھتا ہے؟
+
+**سسٹم کی مہارت**: آپ کا مکمل گیم ظاہر کرتا ہے:
+- **فل اسٹیک گیم ڈیولپمنٹ**: گرافکس سے ان پٹ تک اسٹیٹ مینجمنٹ تک
+- **پروفیشنل آرکیٹیکچر**: ای
+### 🌟 **آپ کا مہینہ بھر کا گیم ڈیولپمنٹ کیریئر**
+- [ ] مختلف صنفوں اور میکینکس کو دریافت کرتے ہوئے مکمل گیمز بنائیں
+- [ ] جدید گیم ڈیولپمنٹ فریم ورک جیسے Phaser یا Three.js سیکھیں
+- [ ] اوپن سورس گیم ڈیولپمنٹ پروجیکٹس میں حصہ لیں
+- [ ] گیم ڈیزائن کے اصول اور کھلاڑیوں کی نفسیات کا مطالعہ کریں
+- [ ] اپنی گیم ڈیولپمنٹ مہارتوں کو ظاہر کرنے کے لیے ایک پورٹ فولیو بنائیں
+- [ ] گیم ڈیولپمنٹ کمیونٹی سے جڑیں اور سیکھنا جاری رکھیں
+
+## 🎯 آپ کا مکمل گیم ڈیولپمنٹ مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title Complete Game Development Learning Progression
+    
+    section Foundation (Lessons 1-2)
+        Game Architecture: Project structure
+                         : Asset management
+                         : Canvas basics
+                         : Event systems
+        
+    section Interaction Systems (Lessons 3-4)
+        Player Control: Input handling
+                      : Movement mechanics
+                      : Collision detection
+                      : Physics simulation
+        
+    section Game Mechanics (Lesson 5)
+        Feedback Systems: Scoring mechanisms
+                        : Life management
+                        : Visual communication
+                        : Player motivation
+        
+    section Game Completion (Lesson 6)
+        Polish & Flow: End conditions
+                     : State management
+                     : Restart systems
+                     : User experience
+        
+    section Advanced Features (1 week)
+        Enhancement Skills: Audio integration
+                          : Visual effects
+                          : Level progression
+                          : Performance optimization
+        
+    section Professional Development (1 month)
+        Industry Readiness: Framework mastery
+                          : Team collaboration
+                          : Portfolio development
+                          : Community engagement
+        
+    section Career Advancement (3 months)
+        Specialization: Advanced game engines
+                      : Platform deployment
+                      : Monetization strategies
+                      : Industry networking
+```
+
+### 🛠️ آپ کا مکمل گیم ڈیولپمنٹ ٹول کٹ کا خلاصہ
+
+اس پورے اسپیس گیم سیریز کو مکمل کرنے کے بعد، آپ نے درج ذیل مہارتیں حاصل کر لی ہیں:
+- **گیم آرکیٹیکچر**: ایونٹ ڈرائیون سسٹمز، گیم لوپس، اور اسٹیٹ مینجمنٹ
+- **گرافکس پروگرامنگ**: کینوس API، اسپرائٹ رینڈرنگ، اور بصری اثرات
+- **ان پٹ سسٹمز**: کی بورڈ ہینڈلنگ، تصادم کا پتہ لگانا، اور جوابدہ کنٹرولز
+- **گیم ڈیزائن**: کھلاڑی کی رائے، ترقیاتی نظام، اور مشغولیت کے میکینکس
+- **پرفارمنس آپٹیمائزیشن**: مؤثر رینڈرنگ، میموری مینجمنٹ، اور فریم ریٹ کنٹرول
+- **یوزر ایکسپیرینس**: واضح مواصلات، بدیہی کنٹرولز، اور تفصیلات کی پالش
+- **پروفیشنل پیٹرنز**: صاف کوڈ، ڈیبگنگ تکنیک، اور پروجیکٹ آرگنائزیشن
+
+**حقیقی دنیا کی ایپلیکیشنز**: آپ کی گیم ڈیولپمنٹ مہارتیں براہ راست لاگو ہوتی ہیں:
+- **انٹرایکٹو ویب ایپلیکیشنز**: متحرک انٹرفیس اور ریئل ٹائم سسٹمز
+- **ڈیٹا ویژولائزیشن**: متحرک چارٹس اور انٹرایکٹو گرافکس
+- **تعلیمی ٹیکنالوجی**: گیمیفیکیشن اور مشغول سیکھنے کے تجربات
+- **موبائل ڈیولپمنٹ**: ٹچ بیسڈ انٹریکشنز اور پرفارمنس آپٹیمائزیشن
+- **سمولیشن سافٹ ویئر**: فزکس انجنز اور ریئل ٹائم ماڈلنگ
+- **کریئیٹو انڈسٹریز**: انٹرایکٹو آرٹ، تفریح، اور ڈیجیٹل تجربات
+
+**حاصل کردہ پروفیشنل مہارتیں**: آپ اب کر سکتے ہیں:
+- **آرکیٹیکٹ** پیچیدہ انٹرایکٹو سسٹمز کو شروع سے
+- **ڈیبگ** ریئل ٹائم ایپلیکیشنز کو منظم طریقوں سے
+- **آپٹیمائز** پرفارمنس کو ہموار یوزر تجربات کے لیے
+- **ڈیزائن** مشغول یوزر انٹرفیس اور انٹریکشن پیٹرنز
+- **کولیبریٹ** تکنیکی پروجیکٹس پر مؤثر طریقے سے مناسب کوڈ آرگنائزیشن کے ساتھ
+
+**گیم ڈیولپمنٹ کے تصورات میں مہارت حاصل کی**:
+- **ریئل ٹائم سسٹمز**: گیم لوپس، فریم ریٹ مینجمنٹ، اور پرفارمنس
+- **ایونٹ ڈرائیون آرکیٹیکچر**: ڈی کپلڈ سسٹمز اور میسج پاسنگ
+- **اسٹیٹ مینجمنٹ**: پیچیدہ ڈیٹا ہینڈلنگ اور لائف سائیکل مینجمنٹ
+- **یوزر انٹرفیس پروگرامنگ**: کینوس گرافکس اور جوابدہ ڈیزائن
+- **گیم ڈیزائن تھیوری**: کھلاڑیوں کی نفسیات اور مشغولیت کے میکینکس
+
+**اگلا مرحلہ**: آپ جدید گیم فریم ورک، 3D گرافکس، ملٹی پلیئر سسٹمز، یا پروفیشنل گیم ڈیولپمنٹ رولز میں منتقلی کے لیے تیار ہیں!
+
+🌟 **کامیابی حاصل کی**: آپ نے مکمل گیم ڈیولپمنٹ کا سفر مکمل کر لیا ہے اور شروع سے ایک پروفیشنل کوالٹی انٹرایکٹو تجربہ بنایا ہے!
+
+**گیم ڈیولپمنٹ کمیونٹی میں خوش آمدید!** 🎮✨
 
-## گٹ ہب کوپائلٹ ایجنٹ چیلنج 🚀
+## GitHub Copilot Agent Challenge 🚀
 
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+Agent mode استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** خلائی کھیل کو ایک سطحی ترقیاتی نظام کے ساتھ بڑھائیں جس میں بڑھتی ہوئی مشکل اور بونس خصوصیات شامل ہوں۔
+**تفصیل:** اسپیس گیم کو بہتر بنائیں اور لیول پروگریشن سسٹم شامل کریں جس میں بڑھتی ہوئی مشکل اور اضافی خصوصیات ہوں۔
 
-**پرومپٹ:** ایک کثیر سطحی خلائی کھیل کا نظام بنائیں جہاں ہر سطح میں زیادہ دشمن جہاز ہوں جن کی رفتار اور صحت میں اضافہ ہو۔ ایک اسکورنگ ملٹی پلائر شامل کریں جو ہر سطح کے ساتھ بڑھتا ہے، اور پاور اپس (جیسے ریپڈ فائر یا شیلڈ) نافذ کریں جو دشمنوں کے تباہ ہونے پر تصادفی طور پر ظاہر ہوں۔ سطح مکمل کرنے کا بونس شامل کریں اور موجودہ سطح کو اسکور اور زندگیوں کے ساتھ اسکرین پر دکھائیں۔
+**پرومپٹ:** ایک ملٹی لیول اسپیس گیم سسٹم بنائیں جہاں ہر لیول میں زیادہ دشمن جہاز ہوں جن کی رفتار اور صحت میں اضافہ ہو۔ ایک اسکورنگ ملٹی پلائر شامل کریں جو ہر لیول کے ساتھ بڑھتا ہے، اور پاور اپس (جیسے ریپڈ فائر یا شیلڈ) شامل کریں جو دشمنوں کے تباہ ہونے پر تصادفی طور پر ظاہر ہوں۔ لیول مکمل کرنے کا بونس شامل کریں اور موجودہ لیول کو اسکور اور زندگیوں کے ساتھ اسکرین پر دکھائیں۔
 
-ایجنٹ موڈ کے بارے میں مزید جانیں [یہاں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
+Agent mode کے بارے میں مزید جانیں [یہاں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
 
-## 🚀 اختیاری اضافہ چیلنج
+## 🚀 اختیاری بہتری کا چیلنج
 
-**اپنے کھیل میں آڈیو شامل کریں**: اپنے گیم پلے کے تجربے کو بہتر بنائیں آواز کے اثرات نافذ کر کے! غور کریں کہ آڈیو شامل کریں:
+**اپنے گیم میں آڈیو شامل کریں**: اپنے گیم پلے کے تجربے کو بہتر بنائیں اور صوتی اثرات شامل کریں! درج ذیل آڈیو پر غور کریں:
 
-- **لیزر شاٹس** جب کھلاڑی فائر کرتا ہے
-- **دشمن کی تباہی** جب جہاز مارے جاتے ہیں
-- **ہیرو کو نقصان** جب کھلاڑی کو نقصان پہنچتا ہے
-- **فتح کی موسیقی** جب کھیل جیتا جاتا ہے
-- **شکست کی آواز** جب کھیل ہارا جاتا ہے
+- **لیزر شاٹس** جب کھلاڑی فائر کرے
+- **دشمن کی تباہی** جب جہازوں کو نشانہ بنایا جائے
+- **ہیرو کو نقصان** جب کھلاڑی کو ضرب لگے
+- **فتح کی موسیقی** جب گیم جیتا جائے
+- **شکست کی آواز** جب گیم ہارا جائے
 
-**آڈیو نفاذ کی مثال:**
+**آڈیو امپلیمنٹیشن کی مثال:**
 
 ```javascript
 // Create audio objects
@@ -343,26 +633,26 @@ function playLaserSound() {
 ```
 
 **آپ کو کیا جاننے کی ضرورت ہے:**
-- **مختلف آواز کے اثرات کے لیے آڈیو آبجیکٹ بناتا ہے**
-- **تیز آواز کے اثرات کی اجازت دینے کے لیے `currentTime` کو ری سیٹ کرتا ہے**
-- **براؤزر آٹو پلے پالیسیوں کو سنبھالتا ہے** صارف کی تعاملات سے آوازوں کو متحرک کر کے
-- **آڈیو حجم اور وقت کا انتظام کرتا ہے** بہتر کھیل کے تجربے کے لیے
+- **آڈیو آبجیکٹس بنائیں** مختلف صوتی اثرات کے لیے
+- **ری سیٹ کریں** `currentTime` تاکہ تیزی سے فائر ہونے والے صوتی اثرات ممکن ہوں
+- **ہینڈل کریں** براؤزر آٹو پلے پالیسیز کو یوزر انٹریکشنز سے آوازیں ٹرگر کر کے
+- **مینج کریں** آڈیو والیوم اور ٹائمنگ بہتر گیم تجربے کے لیے
 
-> 💡 **سیکھنے کا ذریعہ**: اس [آڈیو سینڈ باکس](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) کو دریافت کریں تاکہ جاوا اسکرپٹ کھیلوں میں آڈیو نافذ کرنے کے بارے میں مزید جان سکیں۔
+> 💡 **سیکھنے کا ذریعہ**: اس [آڈیو سینڈ باکس](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) کو دریافت کریں تاکہ جاوا اسکرپٹ گیمز میں آڈیو شامل کرنے کے بارے میں مزید جان سکیں۔
 
-## پوسٹ لیکچر کوئز
+## لیکچر کے بعد کا کوئز
 
-[پوسٹ لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/40)
+[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/40)
 
 ## جائزہ اور خود مطالعہ
 
-آپ کا کام ایک نیا نمونہ کھیل بنانا ہے، لہذا وہاں موجود کچھ دلچسپ کھیلوں کو دریافت کریں تاکہ دیکھ سکیں کہ آپ کس قسم کا کھیل بنا سکتے ہیں۔
+آپ کا اسائنمنٹ ایک نیا نمونہ گیم بنانا ہے، لہذا کچھ دلچسپ گیمز کو دریافت کریں تاکہ دیکھ سکیں کہ آپ کس قسم کا گیم بنا سکتے ہیں۔
 
 ## اسائنمنٹ
 
-[نمون
+[نمونہ گیم بنائیں](assignment.md)
 
 ---
 
 **اعلانِ لاتعلقی**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/7-bank-project/1-template-route/README.md b/translations/ur/7-bank-project/1-template-route/README.md
index ea4d3012f8..8efeab3701 100644
--- a/translations/ur/7-bank-project/1-template-route/README.md
+++ b/translations/ur/7-bank-project/1-template-route/README.md
@@ -1,24 +1,41 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "5d259f6962464ad91e671083aa0398f4",
-  "translation_date": "2025-10-22T15:02:13+00:00",
+  "original_hash": "351678bece18f07d9daa987a881fb062",
+  "translation_date": "2025-11-03T13:23:42+00:00",
   "source_file": "7-bank-project/1-template-route/README.md",
   "language_code": "ur"
 }
 -->
 # بینکنگ ایپ بنائیں حصہ 1: ویب ایپ میں HTML ٹیمپلیٹس اور روٹس
 
-جب اپولو 11 کا گائیڈنس کمپیوٹر 1969 میں چاند کی طرف روانہ ہوا، تو اسے مختلف پروگرامز کے درمیان سوئچ کرنا پڑا بغیر پورے سسٹم کو دوبارہ شروع کیے۔ جدید ویب ایپلیکیشنز بھی اسی طرح کام کرتی ہیں – وہ آپ کو جو کچھ دکھاتی ہیں اسے تبدیل کرتی ہیں بغیر سب کچھ دوبارہ لوڈ کیے۔ یہ وہ ہموار اور جوابدہ تجربہ پیدا کرتا ہے جس کی صارفین آج توقع کرتے ہیں۔
+```mermaid
+journey
+    title Your Banking App Development Journey
+    section SPA Fundamentals
+      Understand single-page apps: 3: Student
+      Learn template concepts: 4: Student
+      Master DOM manipulation: 4: Student
+    section Routing Systems
+      Implement client-side routing: 4: Student
+      Handle browser history: 5: Student
+      Create navigation systems: 5: Student
+    section Professional Patterns
+      Build modular architecture: 5: Student
+      Apply best practices: 5: Student
+      Create user experiences: 5: Student
+```
+
+جب اپولو 11 کا گائیڈنس کمپیوٹر 1969 میں چاند پر پہنچا، تو اسے مختلف پروگرامز کے درمیان سوئچ کرنا پڑا بغیر پورے سسٹم کو دوبارہ شروع کیے۔ جدید ویب ایپلیکیشنز بھی اسی طرح کام کرتی ہیں – وہ آپ کو وہی دکھاتی ہیں جو آپ دیکھنا چاہتے ہیں بغیر سب کچھ دوبارہ لوڈ کیے۔ یہ وہ ہموار اور جوابدہ تجربہ پیدا کرتا ہے جس کی آج صارفین توقع کرتے ہیں۔
 
-روایتی ویب سائٹس کے برعکس جو ہر تعامل کے لیے پورے صفحات کو دوبارہ لوڈ کرتی ہیں، جدید ویب ایپس صرف ان حصوں کو اپ ڈیٹ کرتی ہیں جنہیں تبدیل کرنے کی ضرورت ہوتی ہے۔ یہ طریقہ، بالکل اسی طرح جیسے مشن کنٹرول مختلف ڈسپلے کے درمیان سوئچ کرتا ہے جبکہ مستقل مواصلات کو برقرار رکھتا ہے، وہ ہموار تجربہ پیدا کرتا ہے جس کی ہم توقع کرتے ہیں۔
+روایتی ویب سائٹس کے برعکس جو ہر تعامل کے لیے پورے صفحے کو دوبارہ لوڈ کرتی ہیں، جدید ویب ایپس صرف ان حصوں کو اپ ڈیٹ کرتی ہیں جنہیں تبدیل کرنے کی ضرورت ہوتی ہے۔ یہ طریقہ، بالکل اسی طرح جیسے مشن کنٹرول مختلف ڈسپلے کے درمیان سوئچ کرتا ہے جبکہ مستقل مواصلت برقرار رکھتا ہے، وہ ہموار تجربہ پیدا کرتا ہے جس کی ہم توقع کرتے ہیں۔
 
 یہ فرق اتنا ڈرامائی کیوں ہے:
 
 | روایتی ملٹی پیج ایپس | جدید سنگل پیج ایپس |
 |----------------------------|-------------------------|
-| **نیویگیشن** | ہر اسکرین کے لیے پورے صفحے کو دوبارہ لوڈ کرنا | فوری مواد کی تبدیلی |
-| **کارکردگی** | مکمل HTML ڈاؤن لوڈز کی وجہ سے سست | جزوی اپ ڈیٹس کے ساتھ تیز |
+| **نیویگیشن** | ہر اسکرین کے لیے پورے صفحے کو دوبارہ لوڈ کریں | فوری مواد کی تبدیلی |
+| **کارکردگی** | مکمل HTML ڈاؤن لوڈ کی وجہ سے سست | جزوی اپ ڈیٹس کے ساتھ تیز |
 | **صارف کا تجربہ** | جھٹکے دار صفحے کی جھلکیاں | ہموار، ایپ جیسی منتقلی |
 | **ڈیٹا شیئرنگ** | صفحات کے درمیان مشکل | آسان اسٹیٹ مینجمنٹ |
 | **ترقی** | متعدد HTML فائلوں کو برقرار رکھنا | متحرک ٹیمپلیٹس کے ساتھ ایک HTML |
@@ -31,17 +48,47 @@ CO_OP_TRANSLATOR_METADATA:
 
 اس سبق میں، ہم ایک بینکنگ ایپ بنائیں گے جس میں متعدد اسکرینز ہوں گی جو بغیر کسی رکاوٹ کے ایک ساتھ بہتی ہیں۔ جیسے سائنسدان مختلف تجربات کے لیے دوبارہ ترتیب دینے کے قابل ماڈیولر آلات استعمال کرتے ہیں، ہم HTML ٹیمپلیٹس کو دوبارہ قابل استعمال اجزاء کے طور پر استعمال کریں گے جنہیں ضرورت کے مطابق دکھایا جا سکتا ہے۔
 
-آپ HTML ٹیمپلیٹس (مختلف اسکرینز کے لیے دوبارہ قابل استعمال بلیو پرنٹس)، جاوا اسکرپٹ روٹنگ (اسکرینز کے درمیان سوئچ کرنے کا نظام)، اور براؤزر کی ہسٹری API (جو بیک بٹن کو توقع کے مطابق کام کرتا ہے) کے ساتھ کام کریں گے۔ یہ وہی بنیادی تکنیکیں ہیں جو فریم ورک جیسے React، Vue، اور Angular استعمال کرتے ہیں۔
+آپ HTML ٹیمپلیٹس (مختلف اسکرینز کے لیے دوبارہ قابل استعمال بلیو پرنٹس)، جاوا اسکرپٹ روٹنگ (وہ نظام جو اسکرینز کے درمیان سوئچ کرتا ہے)، اور براؤزر کی ہسٹری API (جو بیک بٹن کو توقع کے مطابق کام کرتا ہے) کے ساتھ کام کریں گے۔ یہ وہی بنیادی تکنیکیں ہیں جو فریم ورک جیسے React، Vue، اور Angular استعمال کرتے ہیں۔
 
 آخر میں، آپ کے پاس ایک کام کرنے والی بینکنگ ایپ ہوگی جو پیشہ ور سنگل پیج ایپلیکیشن اصولوں کو ظاہر کرتی ہے۔
 
+```mermaid
+mindmap
+  root((Single-Page Applications))
+    Architecture
+      Template System
+      Client-side Routing
+      State Management
+      Event Handling
+    Templates
+      Reusable Components
+      Dynamic Content
+      DOM Manipulation
+      Content Switching
+    Routing
+      URL Management
+      History API
+      Navigation Logic
+      Browser Integration
+    User Experience
+      Fast Navigation
+      Smooth Transitions
+      Consistent State
+      Modern Interactions
+    Performance
+      Reduced Server Requests
+      Faster Page Transitions
+      Efficient Resource Usage
+      Better Responsiveness
+```
+
 ## پری لیکچر کوئز
 
 [پری لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/41)
 
 ### آپ کو کیا چاہیے ہوگا
 
-ہمیں اپنی بینکنگ ایپ کو ٹیسٹ کرنے کے لیے ایک مقامی ویب سرور کی ضرورت ہوگی – فکر نہ کریں، یہ اتنا مشکل نہیں ہے جتنا لگتا ہے! اگر آپ کے پاس پہلے سے کوئی سیٹ اپ نہیں ہے، تو بس [Node.js](https://nodejs.org) انسٹال کریں اور اپنے پروجیکٹ فولڈر سے `npx lite-server` چلائیں۔ یہ آسان کمانڈ ایک مقامی سرور کو چلاتا ہے اور خود بخود آپ کی ایپ کو براؤزر میں کھولتا ہے۔
+ہمیں اپنی بینکنگ ایپ کو ٹیسٹ کرنے کے لیے ایک مقامی ویب سرور کی ضرورت ہوگی – فکر نہ کریں، یہ اتنا مشکل نہیں جتنا لگتا ہے! اگر آپ کے پاس پہلے سے کوئی سیٹ اپ نہیں ہے، تو بس [Node.js](https://nodejs.org) انسٹال کریں اور اپنے پروجیکٹ فولڈر سے `npx lite-server` چلائیں۔ یہ آسان کمانڈ ایک مقامی سرور کو چلاتا ہے اور خود بخود آپ کی ایپ کو براؤزر میں کھولتا ہے۔
 
 ### تیاری
 
@@ -63,12 +110,12 @@ CO_OP_TRANSLATOR_METADATA:
 
 **یہ بوائلر پلیٹ فراہم کرتا ہے:**
 - **HTML5 دستاویز کی ساخت** کو مناسب DOCTYPE اعلان کے ساتھ قائم کرتا ہے
-- **کریکٹر انکوڈنگ** کو UTF-8 کے طور پر ترتیب دیتا ہے تاکہ بین الاقوامی متن کی حمایت ہو
+- **کریکٹر انکوڈنگ** کو UTF-8 کے طور پر ترتیب دیتا ہے تاکہ بین الاقوامی متن کی حمایت کی جا سکے
 - **ریسپانسیو ڈیزائن** کو موبائل مطابقت کے لیے ویوپورٹ میٹا ٹیگ کے ساتھ فعال کرتا ہے
-- **ایک وضاحتی عنوان** سیٹ کرتا ہے جو براؤزر ٹیب میں ظاہر ہوتا ہے
+- **ایک وضاحتی عنوان** ترتیب دیتا ہے جو براؤزر ٹیب میں ظاہر ہوتا ہے
 - **ایک صاف باڈی سیکشن** بناتا ہے جہاں ہم اپنی ایپلیکیشن بنائیں گے
 
-> 📁 **پروجیکٹ کی ساخت کا پیش نظارہ**
+> 📁 **پروجیکٹ اسٹرکچر کا پیش نظارہ**
 > 
 > **اس سبق کے آخر میں، آپ کے پروجیکٹ میں شامل ہوگا:**
 > ```
@@ -81,7 +128,7 @@ CO_OP_TRANSLATOR_METADATA:
 > **فائل کی ذمہ داریاں:**
 > - **index.html**: تمام ٹیمپلیٹس پر مشتمل ہے اور ایپ کی ساخت فراہم کرتا ہے
 > - **app.js**: روٹنگ، نیویگیشن، اور ٹیمپلیٹ مینجمنٹ کو ہینڈل کرتا ہے
-> - **Templates**: لاگ ان، ڈیش بورڈ، اور دیگر اسکرینز کے لیے UI کی وضاحت کرتا ہے
+> - **ٹیمپلیٹس**: لاگ ان، ڈیش بورڈ، اور دیگر اسکرینز کے لیے UI کی وضاحت کرتا ہے
 
 ---
 
@@ -89,12 +136,30 @@ CO_OP_TRANSLATOR_METADATA:
 
 ٹیمپلیٹس ویب ڈویلپمنٹ میں ایک بنیادی مسئلہ حل کرتے ہیں۔ جب گٹنبرگ نے 1440 کی دہائی میں مووایبل ٹائپ پرنٹنگ ایجاد کی، تو انہوں نے محسوس کیا کہ پورے صفحات کو تراشنے کے بجائے، وہ دوبارہ قابل استعمال حرفی بلاکس بنا سکتے ہیں اور انہیں ضرورت کے مطابق ترتیب دے سکتے ہیں۔ HTML ٹیمپلیٹس اسی اصول پر کام کرتے ہیں – ہر اسکرین کے لیے الگ HTML فائلیں بنانے کے بجائے، آپ دوبارہ قابل استعمال ڈھانچے کی وضاحت کرتے ہیں جنہیں ضرورت کے وقت دکھایا جا سکتا ہے۔
 
-ٹیمپلیٹس کو اپنی ایپ کے مختلف حصوں کے لیے بلیو پرنٹس کے طور پر سوچیں۔ جیسے ایک آرکیٹیکٹ ایک بلیو پرنٹ بناتا ہے اور اسے متعدد بار استعمال کرتا ہے بجائے اس کے کہ ایک جیسے کمرے دوبارہ بنائے، ہم ٹیمپلیٹس ایک بار بناتے ہیں اور ضرورت کے مطابق انہیں استعمال کرتے ہیں۔ براؤزر ان ٹیمپلیٹس کو چھپائے رکھتا ہے جب تک کہ جاوا اسکرپٹ انہیں فعال نہ کرے۔
+```mermaid
+flowchart TD
+    A["📋 Template Definition"] --> B["💬 Hidden in DOM"]
+    B --> C["🔍 JavaScript Finds Template"]
+    C --> D["📋 Clone Template Content"]
+    D --> E["🔗 Attach to Visible DOM"]
+    E --> F["👁️ User Sees Content"]
+    
+    G["Login Template"] --> A
+    H["Dashboard Template"] --> A
+    I["Future Templates"] --> A
+    
+    style A fill:#e3f2fd
+    style D fill:#e8f5e8
+    style F fill:#fff3e0
+    style B fill:#f3e5f5
+```
+
+ٹیمپلیٹس کو اپنی ایپ کے مختلف حصوں کے لیے بلیو پرنٹس کے طور پر سوچیں۔ بالکل اسی طرح جیسے ایک معمار ایک بلیو پرنٹ بناتا ہے اور اسے متعدد بار استعمال کرتا ہے بجائے اس کے کہ ایک جیسے کمروں کو دوبارہ ڈرائنگ کرے، ہم ٹیمپلیٹس کو ایک بار بناتے ہیں اور ضرورت کے مطابق ان کا استعمال کرتے ہیں۔ براؤزر ان ٹیمپلیٹس کو چھپائے رکھتا ہے جب تک کہ جاوا اسکرپٹ انہیں فعال نہ کرے۔
 
-اگر آپ کسی ویب صفحے کے لیے متعدد اسکرینز بنانا چاہتے ہیں، تو ایک حل یہ ہوگا کہ آپ ہر اسکرین کے لیے ایک HTML فائل بنائیں جسے آپ دکھانا چاہتے ہیں۔ تاہم، یہ حل کچھ مشکلات کے ساتھ آتا ہے:
+اگر آپ کسی ویب صفحے کے لیے متعدد اسکرینز بنانا چاہتے ہیں، تو ایک حل یہ ہوگا کہ آپ ہر اسکرین کے لیے ایک HTML فائل بنائیں جسے آپ دکھانا چاہتے ہیں۔ تاہم، یہ حل کچھ تکلیف کے ساتھ آتا ہے:
 
 - اسکرین سوئچ کرتے وقت آپ کو پورے HTML کو دوبارہ لوڈ کرنا پڑتا ہے، جو سست ہو سکتا ہے۔
-- مختلف اسکرینز کے درمیان ڈیٹا شیئر کرنا مشکل ہے۔
+- مختلف اسکرینز کے درمیان ڈیٹا کا اشتراک کرنا مشکل ہے۔
 
 ایک اور طریقہ یہ ہے کہ صرف ایک HTML فائل ہو، اور متعدد [HTML ٹیمپلیٹس](https://developer.mozilla.org/docs/Web/HTML/Element/template) کو `<template>` عنصر کا استعمال کرتے ہوئے بیان کریں۔ ایک ٹیمپلیٹ ایک دوبارہ قابل استعمال HTML بلاک ہے جو براؤزر کے ذریعے ظاہر نہیں کیا جاتا، اور اسے جاوا اسکرپٹ کا استعمال کرتے ہوئے رن ٹائم پر انسٹیٹیوٹ کرنا پڑتا ہے۔
 
@@ -110,11 +175,11 @@ CO_OP_TRANSLATOR_METADATA:
 - **ایک کنٹینر بناتا ہے** جس کا ID "app" ہے جہاں تمام اسکرینز دکھائی جائیں گی
 - **ایک لوڈنگ پیغام دکھاتا ہے** جب تک جاوا اسکرپٹ پہلی اسکرین کو شروع نہیں کرتا
 - **ہمارے متحرک مواد کے لیے ایک واحد ماؤنٹنگ پوائنٹ فراہم کرتا ہے**
-- **جاوا اسکرپٹ کے ذریعے آسانی سے ہدف بناتا ہے** `document.getElementById()` کا استعمال کرتے ہوئے
+- **جاوا اسکرپٹ سے آسانی سے ہدف بناتا ہے** `document.getElementById()` کا استعمال کرتے ہوئے
 
-> 💡 **پرو ٹپ**: چونکہ اس عنصر کا مواد تبدیل کیا جائے گا، ہم اس میں ایک لوڈنگ پیغام یا اشارہ ڈال سکتے ہیں جو ایپ کے لوڈ ہونے کے دوران دکھایا جائے گا۔
+> 💡 **پرو ٹپ**: چونکہ اس عنصر کا مواد تبدیل کیا جائے گا، ہم ایک لوڈنگ پیغام یا اشارے ڈال سکتے ہیں جو ایپ لوڈ ہونے کے دوران دکھایا جائے گا۔
 
-اگلا، آئیے لاگ ان صفحے کے لیے HTML ٹیمپلیٹ کو نیچے شامل کریں۔ فی الحال ہم وہاں صرف ایک عنوان اور ایک سیکشن ڈالیں گے جس میں ایک لنک ہوگا جسے ہم نیویگیشن انجام دینے کے لیے استعمال کریں گے۔
+اگلا، آئیے لاگ ان صفحہ کے لیے HTML ٹیمپلیٹ کو نیچے شامل کریں۔ فی الحال ہم وہاں صرف ایک عنوان اور ایک سیکشن ڈالیں گے جس میں ایک لنک ہوگا جسے ہم نیویگیشن انجام دینے کے لیے استعمال کریں گے۔
 
 ```html
 <template id="login">
@@ -125,17 +190,17 @@ CO_OP_TRANSLATOR_METADATA:
 </template>
 ```
 
-**اس لاگ ان ٹیمپلیٹ کو توڑ کر سمجھنا:**
-- **ایک ٹیمپلیٹ کی وضاحت کرتا ہے** جس کا منفرد شناخت کنندہ "login" ہے جاوا اسکرپٹ کے ہدف کے لیے
+**اس لاگ ان ٹیمپلیٹ کو توڑنا:**
+- **ایک ٹیمپلیٹ کی وضاحت کرتا ہے** منفرد شناخت کنندہ "login" کے ساتھ جاوا اسکرپٹ کے ہدف کے لیے
 - **ایک مرکزی عنوان شامل کرتا ہے** جو ایپ کی برانڈنگ قائم کرتا ہے
-- **ایک سیمینٹک `<section>` عنصر پر مشتمل ہے** جو متعلقہ مواد کو گروپ کرتا ہے
+- **ایک سیمینٹک `<section>` عنصر پر مشتمل ہے** متعلقہ مواد کو گروپ کرنے کے لیے
 - **ایک نیویگیشن لنک فراہم کرتا ہے** جو صارفین کو ڈیش بورڈ پر لے جائے گا
 
-پھر ہم ڈیش بورڈ صفحے کے لیے ایک اور HTML ٹیمپلیٹ شامل کریں گے۔ اس صفحے میں مختلف سیکشنز ہوں گے:
+پھر ہم ڈیش بورڈ صفحہ کے لیے ایک اور HTML ٹیمپلیٹ شامل کریں گے۔ اس صفحے میں مختلف سیکشنز ہوں گے:
 
 - ایک ہیڈر جس میں ایک عنوان اور ایک لاگ آؤٹ لنک ہوگا
 - بینک اکاؤنٹ کا موجودہ بیلنس
-- ایک ٹیبل میں دکھائی جانے والی ٹرانزیکشنز کی فہرست
+- لین دین کی فہرست، جو ایک ٹیبل میں دکھائی جائے گی
 
 ```html
 <template id="dashboard">
@@ -162,24 +227,40 @@ CO_OP_TRANSLATOR_METADATA:
 </template>
 ```
 
-**آئیے ڈیش بورڈ کے ہر حصے کو سمجھیں:**
-- **صفحے کو ایک سیمینٹک `<header>` عنصر کے ساتھ ترتیب دیتا ہے** جس میں نیویگیشن شامل ہے
+**ڈیش بورڈ کے ہر حصے کو سمجھیں:**
+- **صفحة کو ایک سیمینٹک `<header>` عنصر کے ساتھ ترتیب دیتا ہے** جس میں نیویگیشن شامل ہے
 - **ایپ کا عنوان مستقل طور پر اسکرینز کے پار دکھاتا ہے** برانڈنگ کے لیے
-- **ایک لاگ آؤٹ لنک فراہم کرتا ہے** جو لاگ ان اسکرین پر واپس جاتا ہے
+- **ایک لاگ آؤٹ لنک فراہم کرتا ہے** جو لاگ ان اسکرین پر واپس لے جاتا ہے
 - **موجودہ اکاؤنٹ بیلنس کو ایک مخصوص سیکشن میں دکھاتا ہے**
-- **ٹرانزیکشن ڈیٹا کو ایک مناسب طور پر ساختہ HTML ٹیبل کا استعمال کرتے ہوئے منظم کرتا ہے**
-- **تاریخ، اشیاء، اور رقم کے کالمز کے لیے ٹیبل ہیڈرز کی وضاحت کرتا ہے**
-- **ٹیبل باڈی کو خالی چھوڑتا ہے** تاکہ بعد میں متحرک مواد داخل کیا جا سکے
+- **لین دین کے ڈیٹا کو ایک مناسب طور پر ساختہ HTML ٹیبل کا استعمال کرتے ہوئے منظم کرتا ہے**
+- **تاریخ، آبجیکٹ، اور رقم کے کالمز کے لیے ٹیبل ہیڈرز کی وضاحت کرتا ہے**
+- **ٹیبل باڈی کو خالی چھوڑتا ہے** بعد میں متحرک مواد کے انجیکشن کے لیے
+
+> 💡 **پرو ٹپ**: جب HTML ٹیمپلیٹس بناتے ہیں، اگر آپ دیکھنا چاہتے ہیں کہ یہ کیسا نظر آئے گا، تو آپ `<template>` اور `</template>` لائنوں کو `<!-- -->` کے ساتھ تبصرہ کر سکتے ہیں۔
 
-> 💡 **پرو ٹپ**: جب HTML ٹیمپلیٹس بناتے ہیں، اگر آپ دیکھنا چاہتے ہیں کہ یہ کیسا نظر آئے گا، تو آپ `<template>` اور `</template>` لائنز کو `<!-- -->` کے ساتھ تبصرہ کر سکتے ہیں۔
+### 🔄 **تعلیمی چیک ان**
+**ٹیمپلیٹ سسٹم کو سمجھنا**: جاوا اسکرپٹ کو نافذ کرنے سے پہلے، یقینی بنائیں کہ آپ سمجھتے ہیں:
+- ✅ ٹیمپلیٹس عام HTML عناصر سے کیسے مختلف ہیں
+- ✅ ٹیمپلیٹس جاوا اسکرپٹ کے ذریعے فعال ہونے تک کیوں چھپے رہتے ہیں
+- ✅ ٹیمپلیٹس میں سیمینٹک HTML ساخت کی اہمیت
+- ✅ ٹیمپلیٹس دوبارہ قابل استعمال UI اجزاء کو کیسے فعال کرتے ہیں
 
-✅ آپ کے خیال میں ہم ٹیمپلیٹس پر `id` ایٹریبیوٹس کیوں استعمال کرتے ہیں؟ کیا ہم کچھ اور جیسے کلاسز استعمال کر سکتے ہیں؟
+**فوری خود ٹیسٹ**: اگر آپ اپنے HTML سے `<template>` ٹیگز ہٹا دیں تو کیا ہوگا؟
+*جواب: مواد فوری طور پر نظر آتا ہے اور اپنی ٹیمپلیٹ فعالیت کھو دیتا ہے*
 
-## جاوا اسکرپٹ کے ساتھ ٹیمپلیٹس کو زندہ کرنا
+**آرکیٹیکچر کے فوائد**: ٹیمپلیٹس فراہم کرتے ہیں:
+- **دوبارہ قابل استعمال**: ایک تعریف، متعدد مثالیں
+- **کارکردگی**: کوئی غیر ضروری HTML پارسنگ نہیں
+- **قابل دیکھ بھال**: مرکزی UI ساخت
+- **لچک**: متحرک مواد کی تبدیلی
 
-اب ہمیں اپنے ٹیمپلیٹس کو فعال بنانا ہوگا۔ جیسے ایک 3D پرنٹر ایک ڈیجیٹل بلیو پرنٹ لیتا ہے اور ایک جسمانی شے بناتا ہے، جاوا اسکرپٹ ہمارے چھپے ہوئے ٹیمپلیٹس لیتا ہے اور نظر آنے والے، انٹرایکٹو عناصر بناتا ہے جنہیں صارفین دیکھ اور استعمال کر سکتے ہیں۔
+✅ آپ کے خیال میں ہم ٹیمپلیٹس پر `id` صفات کیوں استعمال کرتے ہیں؟ کیا ہم کچھ اور استعمال کر سکتے ہیں جیسے کلاسز؟
 
-یہ عمل تین مستقل مراحل پر عمل کرتا ہے جو جدید ویب ڈویلپمنٹ کی بنیاد بناتے ہیں۔ ایک بار جب آپ اس پیٹرن کو سمجھ لیں، تو آپ اسے بہت سے فریم ورک اور لائبریریوں میں پہچان لیں گے۔
+## جاوا اسکرپٹ کے ساتھ ٹیمپلیٹس کو زندگی دینا
+
+اب ہمیں اپنے ٹیمپلیٹس کو فعال بنانا ہوگا۔ جیسے ایک 3D پرنٹر ایک ڈیجیٹل بلیو پرنٹ لیتا ہے اور ایک جسمانی آبجیکٹ بناتا ہے، جاوا اسکرپٹ ہمارے چھپے ہوئے ٹیمپلیٹس لیتا ہے اور نظر آنے والے، انٹرایکٹو عناصر بناتا ہے جنہیں صارفین دیکھ اور استعمال کر سکتے ہیں۔
+
+یہ عمل تین مستقل مراحل پر عمل کرتا ہے جو جدید ویب ڈویلپمنٹ کی بنیاد بناتے ہیں۔ ایک بار جب آپ اس پیٹرن کو سمجھ لیں گے، تو آپ اسے بہت سے فریم ورک اور لائبریریوں میں پہچان لیں گے۔
 
 اگر آپ اپنے موجودہ HTML فائل کو براؤزر میں آزمائیں، تو آپ دیکھیں گے کہ یہ `Loading...` دکھانے پر پھنس جاتا ہے۔ اس کی وجہ یہ ہے کہ ہمیں کچھ جاوا اسکرپٹ کوڈ شامل کرنے کی ضرورت ہے تاکہ HTML ٹیمپلیٹس کو انسٹیٹیوٹ اور ظاہر کیا جا سکے۔
 
@@ -224,9 +305,9 @@ flowchart TD
 
 **اس اسکرپٹ امپورٹ کو سمجھنا:**
 - **جاوا اسکرپٹ فائل کو ہمارے HTML دستاویز سے لنک کرتا ہے**
-- **`defer` ایٹریبیوٹ کا استعمال کرتا ہے** تاکہ اسکرپٹ HTML پارسنگ مکمل ہونے کے بعد چلے
-- **تمام DOM عناصر تک رسائی کو فعال کرتا ہے** کیونکہ وہ اسکرپٹ کے عمل سے پہلے مکمل طور پر لوڈ ہو چکے ہیں
-- **اسکرپٹ لوڈنگ اور کارکردگی کے لیے جدید بہترین طریقوں پر عمل کرتا ہے**
+- **`defer` وصف کا استعمال کرتا ہے** تاکہ اسکرپٹ HTML پارسنگ مکمل ہونے کے بعد چل سکے
+- **تمام DOM عناصر تک رسائی کو فعال کرتا ہے** کیونکہ وہ اسکرپٹ کے نفاذ سے پہلے مکمل طور پر لوڈ ہو چکے ہیں
+- **اسکرپٹ لوڈنگ اور کارکردگی کے لیے جدید بہترین طریقوں کی پیروی کرتا ہے**
 
 اب `app.js` میں، ہم ایک نیا فنکشن `updateRoute` بنائیں گے:
 
@@ -254,7 +335,7 @@ updateRoute('login');
 ```
 
 **یہ فنکشن کال کیا حاصل کرتا ہے:**
-- **لاگ ان ٹیمپلیٹ کو فعال کرتا ہے** اس کے ID کو پیرامیٹر کے طور پر پاس کر کے
+- **لاگ ان ٹیمپلیٹ کو فعال کرتا ہے** اس کا ID پیرامیٹر کے طور پر پاس کر کے
 - **مختلف ایپ اسکرینز کے درمیان پروگرام کے ذریعے سوئچ کرنے کا مظاہرہ کرتا ہے**
 - **"Loading..." پیغام کی جگہ لاگ ان اسکرین دکھاتا ہے**
 
@@ -262,9 +343,26 @@ updateRoute('login');
 
 ## روٹس بنانا
 
-روٹنگ بنیادی طور پر URLs کو صحیح مواد سے جوڑنے کے بارے میں ہے۔ غور کریں کہ ابتدائی ٹیلیفون آپریٹرز کالز کو جوڑنے کے لیے سوئچ بورڈز کا استعمال کرتے تھے – وہ ایک آنے والی درخواست لیتے اور اسے صحیح منزل پر بھیجتے۔ ویب روٹنگ اسی طرح کام کرتی ہے، ایک URL درخواست لیتا ہے اور طے کرتا ہے کہ کون سا مواد دکھانا ہے۔
+روٹنگ بنیادی طور پر URLs کو صحیح مواد سے جوڑنے کے بارے میں ہے۔ غور کریں کہ کس طرح ابتدائی ٹیلیفون آپریٹرز سوئچ بورڈز کا استعمال کرتے ہوئے کالز کو جوڑتے تھے – وہ ایک آنے والی درخواست لیتے تھے اور اسے صحیح منزل پر بھیجتے تھے۔ ویب روٹنگ اسی طرح کام کرتی ہے، ایک URL درخواست کو لے کر یہ طے کرتی ہے کہ کون سا مواد دکھایا جائے۔
+
+```mermaid
+flowchart LR
+    A["🌐 URL Path<br/>/dashboard"] --> B["🗺️ Routes Object<br/>Lookup"]
+    B --> C["🎯 Template ID<br/>'dashboard'"]
+    C --> D["📌 Find Template<br/>getElementById"]
+    D --> E["👁️ Display Screen<br/>Clone & Append"]
+    
+    F["📍 /login"] --> G["🎯 'login'"]
+    H["📍 /unknown"] --> I["❌ Not Found"]
+    I --> J["🔄 Redirect to /login"]
+    
+    style B fill:#e3f2fd
+    style E fill:#e8f5e8
+    style I fill:#ffebee
+    style J fill:#fff3e0
+```
 
-روایتی طور پر، ویب سرورز نے مختلف URLs کے لیے مختلف HTML فائلیں فراہم کر کے اس کو ہینڈل کیا۔ چونکہ ہم ایک سنگل پیج ایپ بنا رہے ہیں، ہمیں جاوا اسکرپٹ کے ساتھ اس روٹنگ کو خود ہینڈل کرنے کی ضرورت ہے۔ یہ طریقہ ہمیں صارف کے تجربے اور کارکردگی پر زیادہ کنٹرول دیتا ہے۔
+روایتی طور پر، ویب سرورز مختلف URLs کے لیے مختلف HTML فائلیں فراہم کر کے اس کو ہینڈل کرتے تھے۔ چونکہ ہم ایک سنگل پیج ایپ بنا رہے ہیں، ہمیں جاوا اسکرپٹ کے ساتھ اس روٹنگ کو خود ہینڈل کرنے کی ضرورت ہے۔ یہ طریقہ ہمیں صارف کے تجربے اور کارکردگی پر زیادہ کنٹرول دیتا ہے۔
 
 ```mermaid
 flowchart LR
@@ -285,63 +383,114 @@ flowchart LR
 
 **روٹنگ کے بہاؤ کو سمجھنا:**
 - **URL میں تبدیلیاں** ہمارے روٹس کنفیگریشن میں ایک تلاش کو متحرک کرتی ہیں
-- **درست روٹس** مخصوص ٹیمپلیٹ IDs کے لیے میپ کرتے ہیں تاکہ رینڈرنگ ہو سکے
-- **غلط روٹس** فال بیک رویے کو متحرک کرتے ہیں تاکہ خراب حالتوں کو روکا جا سکے
-- **ٹیمپلیٹ رینڈرنگ** وہی تین مرحلے کا عمل اپناتا ہے جو ہم نے پہلے سیکھا تھا
-
-جب کسی ویب ایپ کی بات کرتے ہیں، تو ہم *روٹنگ* کو URLs کو مخصوص اسکرینز سے میپ کرنے کے ارادے کے طور پر کہتے ہیں جو دکھائی جانی چاہیے۔ ایک ویب سائٹ جس میں متعدد HTML فائلیں ہوں، یہ خود بخود کیا جاتا ہے کیونکہ فائل کے راستے URL پر ظاہر ہوتے ہیں۔ مثال کے طور پر، آپ کے پروجیکٹ فولڈر میں ان فائلوں کے ساتھ:
+- **درست روٹس** مخصوص ٹیمپلیٹ IDs کے ساتھ رینڈرنگ کے لیے میپ کرتے ہیں
 
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
+اب ہم `updateRoute` فنکشن میں تھوڑی تبدیلی کرتے ہیں۔ بجائے `templateId` کو براہ راست آرگومنٹ کے طور پر پاس کرنے کے، ہم پہلے موجودہ URL کو دیکھ کر اسے حاصل کرنا چاہتے ہیں، اور پھر اپنے نقشے کا استعمال کرتے ہوئے متعلقہ template ID ویلیو حاصل کریں گے۔ ہم [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) استعمال کر سکتے ہیں تاکہ URL سے صرف path سیکشن حاصل کیا جا سکے۔
 
-اگر آپ `mywebsite` کو روٹ کے طور پر لے کر ایک ویب سرور بناتے ہیں، تو URL میپنگ ہوگی:
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
 
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
 ```
 
-تاہم، ہماری ویب ایپ کے لیے ہم ایک واحد HTML فائل استعمال کر رہے ہیں جس میں تمام اسکرینز شامل ہیں، لہذا یہ ڈیفالٹ رویہ ہماری مدد نہیں کرے گا۔ ہمیں اس میپ کو دستی طور پر بنانا ہوگا اور جاوا اسکرپٹ کا استعمال کرتے ہوئے دکھائے گئے ٹیمپلیٹ کو اپ ڈیٹ کرنا ہوگا۔
+**یہاں کیا ہو رہا ہے:**
+- **نکالتا ہے** موجودہ path کو براؤزر کے URL سے `window.location.pathname` کے ذریعے
+- **تلاش کرتا ہے** متعلقہ route کنفیگریشن کو ہمارے routes object میں
+- **حاصل کرتا ہے** template ID کو route کنفیگریشن سے
+- **پہلے کی طرح** template rendering کے عمل کو جاری رکھتا ہے
+- **بناتا ہے** ایک dynamic نظام جو URL تبدیلیوں پر ردعمل دیتا ہے
 
-### کام
+یہاں ہم نے اپنے routes کو متعلقہ template کے ساتھ mapped کیا ہے۔ آپ اسے آزما سکتے ہیں کہ یہ صحیح کام کر رہا ہے یا نہیں، براؤزر میں URL کو دستی طور پر تبدیل کر کے۔
 
-ہم ایک
-✅ اگر آپ URL میں کوئی نامعلوم راستہ درج کریں تو کیا ہوتا ہے؟ ہم اسے کیسے حل کر سکتے ہیں؟
+✅ اگر آپ URL میں کوئی نامعلوم path درج کریں تو کیا ہوتا ہے؟ ہم اس مسئلے کو کیسے حل کر سکتے ہیں؟
 
 ## نیویگیشن شامل کرنا
 
-جب روٹنگ قائم ہو جائے، تو صارفین کو ایپ کے اندر نیویگیٹ کرنے کا طریقہ چاہیے۔ روایتی ویب سائٹس لنکس پر کلک کرنے پر پورے صفحات کو دوبارہ لوڈ کرتی ہیں، لیکن ہم URL اور مواد کو بغیر صفحہ ریفریش کیے اپ ڈیٹ کرنا چاہتے ہیں۔ یہ ایک ہموار تجربہ فراہم کرتا ہے، جیسے ڈیسک ٹاپ ایپلیکیشنز مختلف ویوز کے درمیان سوئچ کرتی ہیں۔
+جب routing قائم ہو جائے، تو صارفین کو ایپ کے ذریعے نیویگیٹ کرنے کا ایک طریقہ چاہیے۔ روایتی ویب سائٹس لنکس پر کلک کرنے پر پورے صفحات کو دوبارہ لوڈ کرتی ہیں، لیکن ہم URL اور مواد کو بغیر صفحہ ریفریش کیے اپ ڈیٹ کرنا چاہتے ہیں۔ یہ ایک ہموار تجربہ پیدا کرتا ہے، جیسے کہ ڈیسک ٹاپ ایپلیکیشنز مختلف views کے درمیان سوئچ کرتی ہیں۔
 
-ہمیں دو چیزوں کو ہم آہنگ کرنے کی ضرورت ہے: براؤزر کے URL کو اپ ڈیٹ کرنا تاکہ صارفین صفحات کو بک مارک کر سکیں اور لنکس شیئر کر سکیں، اور مناسب مواد کو ظاہر کرنا۔ جب صحیح طریقے سے نافذ کیا جائے، تو یہ وہ ہموار نیویگیشن فراہم کرتا ہے جس کی توقع صارفین جدید ایپلیکیشنز سے کرتے ہیں۔
+ہمیں دو چیزوں کو ہم آہنگ کرنے کی ضرورت ہے: براؤزر کے URL کو اپ ڈیٹ کرنا تاکہ صارفین صفحات کو بک مارک کر سکیں اور لنکس شیئر کر سکیں، اور مناسب مواد کو ظاہر کرنا۔ جب صحیح طریقے سے نافذ کیا جائے، تو یہ وہ ہموار نیویگیشن پیدا کرتا ہے جس کی توقع صارفین جدید ایپلیکیشنز سے کرتے ہیں۔
 
-> 🏗️ **آرکیٹیکچر بصیرت**: نیویگیشن سسٹم کے اجزاء
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant App
+    participant Template
+    
+    User->>Browser: Clicks "Login" link
+    Browser->>App: onclick event triggered
+    App->>App: preventDefault() & navigate('/dashboard')
+    App->>Browser: history.pushState('/dashboard')
+    Browser->>Browser: URL updates to /dashboard
+    App->>App: updateRoute() called
+    App->>Template: Find & clone dashboard template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display dashboard screen
+    
+    Note over User,Template: User clicks browser back button
+    
+    User->>Browser: Clicks back button
+    Browser->>Browser: History moves back to /login
+    Browser->>App: popstate event fired
+    App->>App: updateRoute() called automatically
+    App->>Template: Find & clone login template
+    Template->>App: Return cloned content
+    App->>Browser: Replace app content with template
+    Browser->>User: Display login screen
+```
+
+### 🔄 **تعلیمی جائزہ**
+**سنگل پیج ایپلیکیشن آرکیٹیکچر**: مکمل نظام کی سمجھ کی تصدیق کریں:
+- ✅ کلائنٹ سائیڈ routing روایتی سرور سائیڈ routing سے کیسے مختلف ہے؟
+- ✅ SPA نیویگیشن کے لیے History API کیوں ضروری ہے؟
+- ✅ templates صفحہ ریفریش کے بغیر dynamic content کو کیسے فعال کرتے ہیں؟
+- ✅ نیویگیشن کو روکنے میں event handling کا کیا کردار ہے؟
+
+**نظام کا انضمام**: آپ کی SPA ظاہر کرتی ہے:
+- **Template Management**: dynamic content کے ساتھ دوبارہ استعمال ہونے والے UI components
+- **Client-side Routing**: URL مینجمنٹ بغیر سرور درخواستوں کے
+- **Event-driven Architecture**: responsive نیویگیشن اور صارف کے تعاملات
+- **Browser Integration**: صحیح history اور back/forward بٹن کی سپورٹ
+- **Performance Optimization**: تیز transitions اور کم سرور لوڈ
+
+**پیشہ ورانہ پیٹرنز**: آپ نے نافذ کیا:
+- **Model-View Separation**: templates کو ایپلیکیشن لاجک سے الگ کرنا
+- **State Management**: URL state کو ظاہر کردہ مواد کے ساتھ ہم آہنگ کرنا
+- **Progressive Enhancement**: JavaScript کے ذریعے بنیادی HTML فعالیت کو بہتر بنانا
+- **User Experience**: ہموار، ایپ جیسی نیویگیشن بغیر صفحہ ریفریش کے
+
+> � **آرکیٹیکچر بصیرت**: نیویگیشن سسٹم کے اجزاء
 >
 > **آپ کیا بنا رہے ہیں:**
-> - **🔄 URL مینجمنٹ**: صفحہ دوبارہ لوڈ کیے بغیر براؤزر ایڈریس بار کو اپ ڈیٹ کرتا ہے
-> - **📋 ٹیمپلیٹ سسٹم**: موجودہ روٹ کی بنیاد پر مواد کو متحرک طور پر تبدیل کرتا ہے  
-> - **📚 ہسٹری انٹیگریشن**: براؤزر کے بیک/فارورڈ بٹن کی فعالیت کو برقرار رکھتا ہے
-> - **🛡️ ایرر ہینڈلنگ**: غلط یا گمشدہ راستوں کے لیے شائستہ متبادل فراہم کرتا ہے
+> - **🔄 URL Management**: براؤزر ایڈریس بار کو صفحہ ریفریش کے بغیر اپ ڈیٹ کرنا
+> - **📋 Template System**: موجودہ route کی بنیاد پر مواد کو dynamic طور پر تبدیل کرنا  
+> - **📚 History Integration**: براؤزر back/forward بٹن functionality کو برقرار رکھنا
+> - **🛡️ Error Handling**: غلط یا غائب routes کے لیے graceful fallbacks
 >
-> **اجزاء کیسے مل کر کام کرتے ہیں:**
-> - نیویگیشن ایونٹس (کلکس، ہسٹری تبدیلیاں) کو **سنتا ہے**
-> - ہسٹری API کا استعمال کرتے ہوئے URL کو **اپ ڈیٹ کرتا ہے**
-> - نئے روٹ کے لیے مناسب ٹیمپلیٹ کو **رینڈر کرتا ہے**
-> - پورے تجربے کو ہموار **برقرار رکھتا ہے**
+> **اجزاء کیسے ایک ساتھ کام کرتے ہیں:**
+> - **سنتا ہے** نیویگیشن ایونٹس (کلکس، history تبدیلیاں)
+> - **اپ ڈیٹ کرتا ہے** URL کو History API کے ذریعے
+> - **ظاہر کرتا ہے** نئے route کے لیے مناسب template
+> - **برقرار رکھتا ہے** ہموار صارف تجربہ پورے وقت
 
 ہماری ایپ کے لیے اگلا قدم یہ ہے کہ صفحات کے درمیان نیویگیٹ کرنے کی صلاحیت شامل کی جائے بغیر URL کو دستی طور پر تبدیل کیے۔ اس کا مطلب دو چیزیں ہیں:
 
   1. موجودہ URL کو اپ ڈیٹ کرنا
-  2. نئے URL کی بنیاد پر ظاہر کردہ ٹیمپلیٹ کو اپ ڈیٹ کرنا
+  2. نئے URL کی بنیاد پر ظاہر کردہ template کو اپ ڈیٹ کرنا
 
 ہم نے پہلے ہی `updateRoute` فنکشن کے ساتھ دوسرے حصے کا خیال رکھا ہے، لہذا ہمیں موجودہ URL کو اپ ڈیٹ کرنے کا طریقہ معلوم کرنا ہوگا۔
 
-ہمیں جاوا اسکرپٹ اور خاص طور پر [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) کا استعمال کرنا ہوگا جو HTML کو دوبارہ لوڈ کیے بغیر URL کو اپ ڈیٹ کرنے اور براؤزنگ ہسٹری میں ایک نیا اندراج بنانے کی اجازت دیتا ہے۔
+ہمیں JavaScript اور خاص طور پر [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) استعمال کرنا ہوگا جو URL کو اپ ڈیٹ کرنے اور براؤزنگ history میں ایک نیا entry بنانے کی اجازت دیتا ہے، بغیر HTML کو ریفریش کیے۔
 
-> ⚠️ **اہم نوٹ**: جبکہ HTML اینکر عنصر [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) کو مختلف URLs کے لیے ہائپر لنکس بنانے کے لیے خود ہی استعمال کیا جا سکتا ہے، یہ براؤزر کو ڈیفالٹ کے طور پر HTML کو دوبارہ لوڈ کرنے پر مجبور کرے گا۔ جب کسٹم جاوا اسکرپٹ کے ساتھ روٹنگ کو ہینڈل کرتے ہیں تو اس رویے کو روکنا ضروری ہے، کلک ایونٹ پر `preventDefault()` فنکشن کا استعمال کرتے ہوئے۔
+> ⚠️ **اہم نوٹ**: حالانکہ HTML anchor element [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) کو خود ہی مختلف URLs کے لیے hyperlinks بنانے کے لیے استعمال کیا جا سکتا ہے، یہ براؤزر کو ڈیفالٹ کے طور پر HTML کو ریفریش کرنے پر مجبور کرے گا۔ اس رویے کو روکنا ضروری ہے جب custom JavaScript کے ساتھ routing کو ہینڈل کیا جا رہا ہو، `preventDefault()` فنکشن کو کلک ایونٹ پر استعمال کر کے۔
 
 ### کام
 
@@ -355,14 +504,14 @@ function navigate(path) {
 ```
 
 **اس نیویگیشن فنکشن کو سمجھنا:**
-- `history.pushState` کا استعمال کرتے ہوئے براؤزر کے URL کو نئے راستے پر **اپ ڈیٹ کرتا ہے**
-- براؤزر کی ہسٹری اسٹیک میں مناسب بیک/فارورڈ بٹن سپورٹ کے لیے ایک نیا اندراج **شامل کرتا ہے**
-- متعلقہ ٹیمپلیٹ کو ظاہر کرنے کے لیے `updateRoute()` فنکشن کو **ٹرگر کرتا ہے**
-- صفحہ دوبارہ لوڈ کیے بغیر سنگل پیج ایپ کا تجربہ **برقرار رکھتا ہے**
+- **اپ ڈیٹ کرتا ہے** براؤزر کے URL کو نئے path کے ساتھ `history.pushState` کے ذریعے
+- **شامل کرتا ہے** براؤزر کے history stack میں ایک نیا entry تاکہ back/forward بٹن صحیح کام کریں
+- **چلاتا ہے** `updateRoute()` فنکشن تاکہ متعلقہ template ظاہر ہو
+- **برقرار رکھتا ہے** سنگل پیج ایپلیکیشن کا تجربہ بغیر صفحہ ریفریش کے
 
-یہ طریقہ پہلے دیے گئے راستے کی بنیاد پر موجودہ URL کو اپ ڈیٹ کرتا ہے، پھر ٹیمپلیٹ کو اپ ڈیٹ کرتا ہے۔ پراپرٹی `window.location.origin` URL روٹ کو واپس کرتی ہے، جو ہمیں دیے گئے راستے سے مکمل URL دوبارہ بنانے کی اجازت دیتی ہے۔
+یہ طریقہ پہلے موجودہ URL کو دیے گئے path کی بنیاد پر اپ ڈیٹ کرتا ہے، پھر template کو اپ ڈیٹ کرتا ہے۔ پراپرٹی `window.location.origin` URL root کو واپس کرتی ہے، جو ہمیں دیے گئے path سے مکمل URL دوبارہ بنانے کی اجازت دیتی ہے۔
 
-اب جب کہ ہمارے پاس یہ فنکشن ہے، ہم اس مسئلے کا خیال رکھ سکتے ہیں جو ہمارے پاس ہے اگر کوئی راستہ کسی بھی متعین روٹ سے میل نہیں کھاتا۔ ہم `updateRoute` فنکشن میں ترمیم کریں گے تاکہ اگر ہم کوئی میچ نہ پا سکیں تو موجودہ روٹ میں سے کسی ایک پر واپس جائیں۔
+اب جب کہ ہمارے پاس یہ فنکشن ہے، ہم اس مسئلے کا خیال رکھ سکتے ہیں جو ہمیں ہوتا ہے اگر کوئی path کسی بھی مقرر کردہ route سے میل نہیں کھاتا۔ ہم `updateRoute` فنکشن میں ترمیم کریں گے تاکہ اگر کوئی match نہ ملے تو موجودہ route کو fallback کے طور پر شامل کریں۔
 
 ```js
 function updateRoute() {
@@ -382,12 +531,12 @@ function updateRoute() {
 ```
 
 **یاد رکھنے کے اہم نکات:**
-- موجودہ راستے کے لیے روٹ موجود ہے یا نہیں، اس کی **جانچ کرتا ہے**
-- جب کسی غلط راستے تک رسائی حاصل کی جائے تو لاگ ان صفحے پر **ری ڈائریکٹ کرتا ہے**
-- ایک متبادل میکانزم فراہم کرتا ہے جو خراب نیویگیشن کو روکتا ہے
+- **چیک کرتا ہے** کہ موجودہ path کے لیے کوئی route موجود ہے یا نہیں
+- **ری ڈائریکٹ کرتا ہے** login صفحے پر جب کوئی غلط route تک رسائی حاصل کی جائے
+- **فراہم کرتا ہے** ایک fallback mechanism جو خراب نیویگیشن کو روکتا ہے
 - **یقینی بناتا ہے** کہ صارفین ہمیشہ ایک درست اسکرین دیکھیں، یہاں تک کہ غلط URLs کے ساتھ
 
-اگر کوئی روٹ نہیں ملتا، تو ہم اب `login` صفحے پر ری ڈائریکٹ کریں گے۔
+اگر کوئی route نہیں ملتا، تو ہم اب `login` صفحے پر ری ڈائریکٹ کریں گے۔
 
 اب آئیے ایک فنکشن بناتے ہیں جو لنک پر کلک کرنے پر URL حاصل کرے، اور براؤزر کے ڈیفالٹ لنک رویے کو روکے:
 
@@ -398,11 +547,11 @@ function onLinkClick(event) {
 }
 ```
 
-**اس کلک ہینڈلر کو توڑنا:**
-- `preventDefault()` کا استعمال کرتے ہوئے براؤزر کے ڈیفالٹ لنک رویے کو **روکتا ہے**
-- کلک کیے گئے لنک عنصر سے منزل URL کو **نکالتا ہے**
-- صفحہ دوبارہ لوڈ کیے بغیر ہمارے کسٹم نیویگیٹ فنکشن کو **کال کرتا ہے**
-- ہموار سنگل پیج ایپلیکیشن کا تجربہ **برقرار رکھتا ہے**
+**اس کلک ہینڈلر کو سمجھنا:**
+- **روکتا ہے** براؤزر کے ڈیفالٹ لنک رویے کو `preventDefault()` کے ذریعے
+- **نکالتا ہے** منزل URL کو کلک کیے گئے لنک element سے
+- **کال کرتا ہے** ہمارے custom navigate فنکشن کو صفحہ ریفریش کیے بغیر
+- **برقرار رکھتا ہے** ہموار سنگل پیج ایپلیکیشن کا تجربہ
 
 ```html
 <a href="/dashboard" onclick="onLinkClick(event)">Login</a>
@@ -410,23 +559,23 @@ function onLinkClick(event) {
 <a href="/login" onclick="onLinkClick(event)">Logout</a>
 ```
 
-**یہ onclick بائنڈنگ کیا حاصل کرتی ہے:**
-- ہر لنک کو ہمارے کسٹم نیویگیشن سسٹم سے **جوڑتا ہے**
-- کلک ایونٹ کو پروسیسنگ کے لیے ہمارے `onLinkClick` فنکشن کو **پاس کرتا ہے**
-- صفحہ دوبارہ لوڈ کیے بغیر ہموار نیویگیشن کو **فعال کرتا ہے**
-- مناسب URL ڈھانچے کو **برقرار رکھتا ہے** جسے صارفین بک مارک یا شیئر کر سکتے ہیں
+**یہ onclick binding کیا حاصل کرتی ہے:**
+- **جوڑتا ہے** ہر لنک کو ہمارے custom نیویگیشن سسٹم کے ساتھ
+- **پاس کرتا ہے** کلک ایونٹ کو ہمارے `onLinkClick` فنکشن کے لیے پروسیسنگ کے لیے
+- **فعال کرتا ہے** ہموار نیویگیشن بغیر صفحہ ریفریش کے
+- **برقرار رکھتا ہے** صحیح URL اسٹرکچر جسے صارفین بک مارک یا شیئر کر سکتے ہیں
 
-[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ایٹریبیوٹ کلک ایونٹ کو جاوا اسکرپٹ کوڈ سے باندھتا ہے، یہاں `navigate()` فنکشن کو کال۔
+[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ایٹریبیوٹ کلک ایونٹ کو JavaScript کوڈ کے ساتھ bind کرتا ہے، یہاں `navigate()` فنکشن کو کال کرنے کے لیے۔
 
 ان لنکس پر کلک کرنے کی کوشش کریں، آپ کو اب اپنی ایپ کے مختلف اسکرینز کے درمیان نیویگیٹ کرنے کے قابل ہونا چاہیے۔
 
-✅ `history.pushState` طریقہ HTML5 معیار کا حصہ ہے اور [تمام جدید براؤزرز](https://caniuse.com/?search=pushState) میں نافذ ہے۔ اگر آپ پرانے براؤزرز کے لیے ویب ایپ بنا رہے ہیں، تو آپ اس API کی جگہ ایک چال استعمال کر سکتے ہیں: راستے سے پہلے [ہیش (`#`)](https://en.wikipedia.org/wiki/URI_fragment) کا استعمال کرتے ہوئے آپ روٹنگ کو نافذ کر سکتے ہیں جو باقاعدہ اینکر نیویگیشن کے ساتھ کام کرتا ہے اور صفحہ کو دوبارہ لوڈ نہیں کرتا، کیونکہ اس کا مقصد صفحے کے اندرونی لنکس بنانا تھا۔
+✅ `history.pushState` طریقہ HTML5 اسٹینڈرڈ کا حصہ ہے اور [تمام جدید براؤزرز](https://caniuse.com/?search=pushState) میں نافذ کیا گیا ہے۔ اگر آپ پرانے براؤزرز کے لیے ویب ایپ بنا رہے ہیں، تو آپ اس API کے بجائے ایک چال استعمال کر سکتے ہیں: path سے پہلے [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) کا استعمال کر کے آپ routing کو نافذ کر سکتے ہیں جو عام anchor نیویگیشن کے ساتھ کام کرتا ہے اور صفحہ کو ریفریش نہیں کرتا، کیونکہ اس کا مقصد صفحے کے اندرونی لنکس بنانا تھا۔
 
-## بیک اور فارورڈ بٹن کام کرنا
+## Back اور Forward بٹن کو کام کرنے کے قابل بنانا
 
-بیک اور فارورڈ بٹن ویب براؤزنگ کے لیے بنیادی ہیں، جیسے NASA مشن کنٹرولرز خلائی مشن کے دوران پچھلے سسٹم اسٹیٹس کا جائزہ لے سکتے ہیں۔ صارفین توقع کرتے ہیں کہ یہ بٹن کام کریں، اور جب وہ نہیں کرتے، تو یہ متوقع براؤزنگ تجربے کو توڑ دیتا ہے۔
+Back اور Forward بٹن ویب براؤزنگ کے لیے بنیادی ہیں، بالکل اسی طرح جیسے NASA مشن کنٹرولرز پچھلے نظام کی حالتوں کا جائزہ لے سکتے ہیں۔ صارفین توقع کرتے ہیں کہ یہ بٹن کام کریں، اور جب وہ نہیں کرتے، تو یہ متوقع براؤزنگ تجربے کو توڑ دیتا ہے۔
 
-ہماری سنگل پیج ایپ کو اس کی حمایت کے لیے اضافی کنفیگریشن کی ضرورت ہے۔ براؤزر ایک ہسٹری اسٹیک کو برقرار رکھتا ہے (جس میں ہم `history.pushState` کے ساتھ شامل کر رہے ہیں)، لیکن جب صارفین اس ہسٹری کے ذریعے نیویگیٹ کرتے ہیں، تو ہماری ایپ کو ظاہر کردہ مواد کو اپ ڈیٹ کرکے جواب دینا ہوگا۔
+ہمارے سنگل پیج ایپ کو اس کی حمایت کے لیے اضافی کنفیگریشن کی ضرورت ہے۔ براؤزر ایک history stack کو برقرار رکھتا ہے (جس میں ہم `history.pushState` کے ساتھ اضافہ کر رہے ہیں)، لیکن جب صارفین اس history کے ذریعے نیویگیٹ کرتے ہیں، تو ہماری ایپ کو مناسب مواد کو اپ ڈیٹ کر کے جواب دینا ہوگا۔
 
 ```mermaid
 sequenceDiagram
@@ -459,81 +608,190 @@ sequenceDiagram
 ```
 
 **اہم تعامل کے نکات:**
-- صارف کے اعمال کلکس یا براؤزر بٹن کے ذریعے نیویگیشن کو **ٹرگر کرتے ہیں**
-- ایپ صفحہ دوبارہ لوڈ کو روکنے کے لیے لنک کلکس کو **روکتی ہے**
-- ہسٹری API URL تبدیلیوں اور براؤزر ہسٹری اسٹیک کو **منظم کرتا ہے**
-- ٹیمپلیٹس ہر اسکرین کے لیے مواد کا ڈھانچہ **فراہم کرتے ہیں**
-- ایونٹ لسٹنرز یقینی بناتے ہیں کہ ایپ تمام نیویگیشن اقسام کا **جواب دیتی ہے**
+- **صارف کے اعمال** کلکس یا براؤزر بٹن کے ذریعے نیویگیشن کو متحرک کرتے ہیں
+- **ایپ روکتی ہے** لنک کلکس کو صفحہ ریفریش سے بچانے کے لیے
+- **History API** URL تبدیلیوں اور براؤزر history stack کو منظم کرتا ہے
+- **Templates** ہر اسکرین کے لیے مواد کا ڈھانچہ فراہم کرتے ہیں
+- **Event listeners** یقینی بناتے ہیں کہ ایپ تمام نیویگیشن اقسام کا جواب دے
 
-`history.pushState` کا استعمال براؤزر کی نیویگیشن ہسٹری میں نئے اندراجات بناتا ہے۔ آپ یہ چیک کر سکتے ہیں کہ اپنے براؤزر کے *بیک بٹن* کو تھام کر، یہ کچھ اس طرح دکھائے گا:
+`history.pushState` براؤزر کے نیویگیشن history میں نئے entries بناتا ہے۔ آپ اسے چیک کر سکتے ہیں براؤزر کے *back button* کو دبائے رکھ کر، یہ کچھ اس طرح دکھائے گا:
 
-![نیویگیشن ہسٹری کا اسکرین شاٹ](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ur.png)
+![نیویگیشن history کا اسکرین شاٹ](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ur.png)
 
-اگر آپ بیک بٹن پر چند بار کلک کرنے کی کوشش کریں، تو آپ دیکھیں گے کہ موجودہ URL تبدیل ہوتا ہے اور ہسٹری اپ ڈیٹ ہوتی ہے، لیکن وہی ٹیمپلیٹ ظاہر ہوتا رہتا ہے۔
+اگر آپ back button پر چند بار کلک کرنے کی کوشش کریں، تو آپ دیکھیں گے کہ موجودہ URL تبدیل ہوتا ہے اور history اپ ڈیٹ ہوتی ہے، لیکن وہی template ظاہر ہوتا رہتا ہے۔
 
-اس کی وجہ یہ ہے کہ ایپلیکیشن کو معلوم نہیں کہ ہمیں ہر بار ہسٹری تبدیل ہونے پر `updateRoute()` کو کال کرنے کی ضرورت ہے۔ اگر آپ [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) دستاویزات کو دیکھیں، تو آپ دیکھ سکتے ہیں کہ اگر اسٹیٹ تبدیل ہو جائے - یعنی ہم ایک مختلف URL پر چلے گئے - تو [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) ایونٹ ٹرگر ہوتا ہے۔ ہم اس مسئلے کو حل کرنے کے لیے اس کا استعمال کریں گے۔
+اس کی وجہ یہ ہے کہ ایپلیکیشن کو معلوم نہیں کہ ہمیں ہر بار history تبدیل ہونے پر `updateRoute()` کو کال کرنے کی ضرورت ہے۔ اگر آپ [`history.pushState` دستاویزات](https://developer.mozilla.org/docs/Web/API/History/pushState) کو دیکھیں، تو آپ دیکھ سکتے ہیں کہ اگر state تبدیل ہو جائے - یعنی ہم ایک مختلف URL پر چلے گئے - تو [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) ایونٹ متحرک ہوتا ہے۔ ہم اس مسئلے کو حل کرنے کے لیے اس کا استعمال کریں گے۔
 
 ### کام
 
-یہ یقینی بنانے کے لیے کہ براؤزر ہسٹری تبدیل ہونے پر ظاہر کردہ ٹیمپلیٹ اپ ڈیٹ ہو، ہم ایک نیا فنکشن منسلک کریں گے جو `updateRoute()` کو کال کرے۔ ہم یہ اپنے `app.js` فائل کے آخر میں کریں گے:
+یقینی بنانے کے لیے کہ براؤزر history تبدیل ہونے پر ظاہر کردہ template اپ ڈیٹ ہو، ہم ایک نیا فنکشن منسلک کریں گے جو `updateRoute()` کو کال کرے۔ ہم یہ اپنے `app.js` فائل کے آخر میں کریں گے:
 
 ```js
 window.onpopstate = () => updateRoute();
 updateRoute();
 ```
 
-**اس ہسٹری انٹیگریشن کو سمجھنا:**
-- `popstate` ایونٹس کے لیے **سنتا ہے** جو صارفین براؤزر بٹن کے ساتھ نیویگیٹ کرتے وقت ہوتے ہیں
-- ایونٹ ہینڈلر نحو کے لیے مختصر ایرو فنکشن کا **استعمال کرتا ہے**
-- جب بھی ہسٹری اسٹیٹ تبدیل ہوتی ہے تو خود بخود `updateRoute()` کو **کال کرتا ہے**
-- صفحہ پہلی بار لوڈ ہونے پر `updateRoute()` کو **شروع کرتا ہے**
-- اس بات کو **یقینی بناتا ہے** کہ صارفین کیسے بھی نیویگیٹ کریں، صحیح ٹیمپلیٹ ظاہر ہو
+**اس history انضمام کو سمجھنا:**
+- **سنتا ہے** `popstate` ایونٹس جو صارفین براؤزر بٹن کے ساتھ نیویگیٹ کرتے وقت ہوتے ہیں
+- **استعمال کرتا ہے** ایک arrow function کو مختصر ایونٹ ہینڈلر syntax کے لیے
+- **کال کرتا ہے** `updateRoute()` کو خود بخود جب بھی history state تبدیل ہوتی ہے
+- **ایپ کو شروع کرتا ہے** `updateRoute()` کو کال کر کے جب صفحہ پہلی بار لوڈ ہوتا ہے
+- **یقینی بناتا ہے** کہ صحیح template ظاہر ہو، چاہے صارفین کیسے بھی نیویگیٹ کریں
 
-> 💡 **پرو ٹپ**: ہم نے یہاں اپنے `popstate` ایونٹ ہینڈلر کو مختصر کرنے کے لیے ایک [ایرو فنکشن](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) استعمال کیا، لیکن ایک عام فنکشن بھی اسی طرح کام کرے گا۔
+> 💡 **پرو ٹپ**: ہم نے یہاں ایک [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) استعمال کیا ہے تاکہ اپنے `popstate` ایونٹ ہینڈلر کو مختصر طور پر اعلان کریں، لیکن ایک عام فنکشن بھی اسی طرح کام کرے گا۔
 
-ایرو فنکشنز پر ایک تازہ کاری ویڈیو یہاں ہے:
+یہاں arrow functions پر ایک refresher ویڈیو ہے:
 
-[![ایرو فنکشنز](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "ایرو فنکشنز")
+[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
 
-> 🎥 اوپر دی گئی تصویر پر کلک کریں ایرو فنکشنز کے بارے میں ویڈیو کے لیے۔
+> 🎥 اوپر دی گئی تصویر پر کلک کریں arrow functions کے بارے میں ویڈیو دیکھنے کے لیے۔
+
+اب اپنے براؤزر کے back اور forward بٹن استعمال کرنے کی کوشش کریں، اور چیک کریں کہ اس بار ظاہر کردہ route صحیح طریقے سے اپ ڈیٹ ہو رہا ہے۔
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] اپنے بینکنگ ایپ کی نیویگیشن کو براؤزر back/forward بٹن کے ذریعے ٹیسٹ کریں
+- [ ] مختلف URLs کو ایڈریس بار میں دستی طور پر ٹائپ کر کے routing کو ٹیسٹ کریں
+- [ ] براؤزر DevTools کھولیں اور دیکھیں کہ templates DOM میں کیسے کلون کیے جا رہے ہیں
+- [ ] routing flow کو ٹریک کرنے کے لیے console.log statements شامل کرنے کے ساتھ تجربہ کریں
+
+### 🎯 **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں**
+- [ ] سبق کے بعد کا کوئز مکمل کریں اور SPA آرکیٹیکچر کے تصورات کو سمجھیں
+- [ ] CSS styling شامل کریں تاکہ آپ کی بینکنگ ایپ templates پیشہ ورانہ نظر آئیں
+- [ ] 404 error page چیلنج کو مناسب error handling کے ساتھ نافذ کریں
+- [ ] credits page چیلنج کو اضافی routing functionality کے ساتھ بنائیں
+- [ ] template switches کے درمیان loading states اور transitions شامل کریں
+
+### 📅 **آپ کی ہفتہ بھر کی SPA ڈیولپمنٹ کی سفر**
+- [ ] فارم، ڈیٹا مینجمنٹ، اور persistence کے ساتھ مکمل بینکنگ ایپ بنائیں
+- [ ] route parameters اور nested routes جیسے advanced routing features شامل کریں
+- [ ] نیویگیشن guards اور authentication-based routing نافذ کریں
+- [ ] reusable template components اور ایک component library بنائیں
+- [ ] ہموار صارف تجربے کے لیے animations اور transitions شامل کریں
+- [ ] اپنی SPA کو hosting platform پر deploy کریں اور routing کو صحیح طریقے سے کنفیگر کریں
+
+### 🌟 **آپ کی مہینے بھر کی فرنٹ اینڈ آرکیٹیکچر مہارت**
+- [ ] React, Vue، یا Angular جیسے جدید frameworks کا استعمال کرتے ہوئے پیچیدہ SPAs بنائیں
+- [ ] advanced state management patterns اور libraries سیکھیں
+- [ ] SPA development کے لیے build tools اور development workflows میں مہارت حاصل کریں
+- [ ] Progressive Web App features اور offline functionality نافذ کریں
+- [ ] بڑے پیمانے پر SPAs کے لیے performance optimization techniques کا مطالعہ کریں
+- [ ] open source SPA projects میں تعاون کریں اور اپنا علم شیئر کریں
+
+## 🎯 آپ کی سنگل پیج ایپلیکیشن مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title SPA Development & Modern Web Architecture Learning Progression
+    
+    section Foundation (20 minutes)
+        Template Systems: HTML template elements
+                        : DOM manipulation
+                        : Content cloning
+                        : Dynamic rendering
+        
+    section Routing Basics (30 minutes)
+        Client-side Navigation: URL management
+                              : History API
+                              : Route mapping
+                              : Event handling
+        
+    section User Experience (40 minutes)
+        Navigation Polish: Browser integration
+                         : Back button support
+                         : Error handling
+                         : Smooth transitions
+        
+    section Architecture Patterns (50 minutes)
+        Professional SPAs: Component systems
+                         : State management
+                         : Performance optimization
+                         : Error boundaries
+        
+    section Advanced Techniques (1 week)
+        Framework Integration: React Router
+                             : Vue Router
+                             : Angular Router
+                             : State libraries
+        
+    section Production Skills (1 month)
+        Enterprise Development: Build systems
+                              : Testing strategies
+                              : Deployment pipelines
+                              : Performance monitoring
+```
 
-اب اپنے براؤزرز کے بیک اور فارورڈ بٹن استعمال کرنے کی کوشش کریں، اور چیک کریں کہ اس بار ظاہر کردہ روٹ صحیح طریقے سے اپ ڈیٹ ہو رہا ہے۔
+### 🛠️ آپ کی SPA ڈیولپمنٹ ٹول کٹ کا خلاصہ
+
+اس سبق کو مکمل کرنے کے بعد، آپ نے مہارت حاصل کر لی ہے:
+- **Template Architecture**: dynamic content rendering کے ساتھ دوبارہ استعمال ہونے والے HTML components
+- **Client-side Routing**: URL مینجمنٹ اور نیویگیشن بغیر صفحہ ریفریش کے
+- **Browser Integration**: History API کا استعمال اور back/forward بٹن کی سپورٹ
+- **Event-driven Systems**: نیویگیشن ہینڈلنگ اور صارف کے تعاملات کا انتظام
+- **DOM Manipulation**: template cloning، content switching، اور element management
+- **Error Handling**: غلط routes اور غائب مواد کے لیے graceful fallbacks
+- **Performance Patterns**: مؤثر content loading اور rendering strategies
+
+**حقیقی دنیا کی ایپلیکیشنز**: آپ کی SPA ڈیولپمنٹ کی مہارت براہ راست لاگو ہوتی ہے:
+- **جدید ویب ایپلیکیشنز**: React، Vue، Angular، اور دیگر framework development
+- **Progressive Web Apps**: آف لائن قابل ایپلیکیشنز کے ساتھ ایپ جیسا تجربہ
+- **Enterprise Dashboards**: متعدد views کے ساتھ پیچیدہ کاروباری ایپلیکیشنز
+- **E-commerce Platforms**: پروڈکٹ کیٹلاگ، shopping carts، اور checkout flows
+- **Content Management**: dynamic content creation اور editing interfaces
+- **Mobile Development**: ویب ٹیکنالوجیز کا استعمال کرتے ہوئے hybrid apps
+
+**حاصل کردہ پیشہ ورانہ مہارتیں**: آپ اب
+- **معمار** سنگل پیج ایپلیکیشنز کو مناسب تقسیم کے ساتھ بنائیں
+- **عملدرآمد کریں** کلائنٹ سائیڈ روٹنگ سسٹمز جو ایپلیکیشن کی پیچیدگی کے ساتھ بڑھ سکیں
+- **ڈیبگ کریں** پیچیدہ نیویگیشن فلو کو براؤزر ڈیولپر ٹولز کے ذریعے
+- **بہتر بنائیں** ایپلیکیشن کی کارکردگی کو مؤثر ٹیمپلیٹ مینجمنٹ کے ذریعے
+- **ڈیزائن کریں** صارف کے تجربات جو قدرتی اور جوابدہ محسوس ہوں
+
+**فرنٹ اینڈ ڈیولپمنٹ کے تصورات میں مہارت حاصل کی**:
+- **کمپوننٹ آرکیٹیکچر**: دوبارہ استعمال کے قابل UI پیٹرنز اور ٹیمپلیٹ سسٹمز
+- **اسٹیٹ سنکرونائزیشن**: URL اسٹیٹ مینجمنٹ اور براؤزر ہسٹری
+- **ایونٹ ڈرائیون پروگرامنگ**: صارف کے تعاملات کو ہینڈل کرنا اور نیویگیشن
+- **کارکردگی کی بہتری**: مؤثر DOM مینپولیشن اور مواد کی لوڈنگ
+- **صارف کے تجربے کا ڈیزائن**: ہموار ٹرانزیشنز اور آسان نیویگیشن
+
+**اگلا مرحلہ**: آپ جدید فرنٹ اینڈ فریم ورک، ایڈوانسڈ اسٹیٹ مینجمنٹ، یا پیچیدہ انٹرپرائز ایپلیکیشنز بنانے کے لیے تیار ہیں!
+
+🌟 **کامیابی حاصل کی**: آپ نے جدید ویب آرکیٹیکچر پیٹرنز کے ساتھ ایک پیشہ ور سنگل پیج ایپلیکیشن کی بنیاد بنا لی ہے!
 
 ---
 
 ## GitHub Copilot Agent چیلنج 🚀
 
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+ایجنٹ موڈ استعمال کریں اور درج ذیل چیلنج مکمل کریں:
 
-**تفصیل:** بینکنگ ایپ کو بہتر بنائیں، غلط راستوں کے لیے ایرر ہینڈلنگ اور 404 صفحہ ٹیمپلیٹ نافذ کرکے، غیر موجود صفحات پر نیویگیٹ کرتے وقت صارف کے تجربے کو بہتر بنائیں۔
+**تفصیل:** بینکنگ ایپ کو بہتر بنائیں، غلط راستوں کے لیے ایرر ہینڈلنگ اور 404 پیج ٹیمپلیٹ شامل کریں، تاکہ صارف کے تجربے کو بہتر بنایا جا سکے جب وہ غیر موجود صفحات پر جائیں۔
 
-**پرومپٹ:** ایک نیا HTML ٹیمپلیٹ بنائیں جس کا id "not-found" ہو، جو ایک صارف دوست 404 ایرر صفحہ اسٹائلنگ کے ساتھ ظاہر کرے۔ پھر جاوا اسکرپٹ روٹنگ منطق میں ترمیم کریں تاکہ صارفین کو غلط URLs پر نیویگیٹ کرنے پر یہ ٹیمپلیٹ دکھایا جائے، اور ایک "گو ہوم" بٹن شامل کریں جو لاگ ان صفحے پر واپس نیویگیٹ کرے۔
+**پرومپٹ:** ایک نیا HTML ٹیمپلیٹ بنائیں جس کا id "not-found" ہو، جو ایک صارف دوست 404 ایرر پیج دکھائے اور اسٹائلنگ کے ساتھ ہو۔ پھر جاوا اسکرپٹ روٹنگ لاجک میں ترمیم کریں تاکہ یہ ٹیمپلیٹ دکھائے جب صارفین غلط URLs پر جائیں، اور ایک "گو ہوم" بٹن شامل کریں جو لاگ ان پیج پر واپس لے جائے۔
 
-[ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
+[ایجنٹ موڈ کے بارے میں مزید جانیں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) یہاں۔
 
 ## 🚀 چیلنج
 
-اس ایپ کے کریڈٹس دکھانے کے لیے ایک تیسرے صفحے کے لیے نیا ٹیمپلیٹ اور روٹ شامل کریں۔
+ایپ کے کریڈٹس دکھانے کے لیے ایک تیسرے صفحے کے لیے نیا ٹیمپلیٹ اور راستہ شامل کریں۔
 
 **چیلنج کے اہداف:**
-- مناسب مواد کے ڈھانچے کے ساتھ ایک نیا HTML ٹیمپلیٹ **بنائیں**
-- اپنے روٹس کنفیگریشن آبجیکٹ میں نیا روٹ **شامل کریں**
-- کریڈٹس صفحے کے لیے اور اس سے نیویگیشن لنکس **شامل کریں**
-- تمام نیویگیشن کو براؤزر ہسٹری کے ساتھ صحیح طریقے سے کام کرنے کا **ٹیسٹ کریں**
+- **بنائیں** ایک نیا HTML ٹیمپلیٹ مناسب مواد کے ڈھانچے کے ساتھ
+- **شامل کریں** نیا راستہ اپنے روٹس کنفیگریشن آبجیکٹ میں
+- **شامل کریں** نیویگیشن لنکس کریڈٹس پیج کے لیے اور اس سے واپس
+- **ٹیسٹ کریں** کہ تمام نیویگیشن براؤزر ہسٹری کے ساتھ صحیح کام کر رہی ہے
 
-## لیکچر کے بعد کوئز
+## لیکچر کے بعد کا کوئز
 
-[لیکچر کے بعد کوئز](https://ff-quizzes.netlify.app/web/quiz/42)
+[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/42)
 
 ## جائزہ اور خود مطالعہ
 
-روٹنگ ویب ڈویلپمنٹ کے حیرت انگیز طور پر مشکل حصوں میں سے ایک ہے، خاص طور پر جب ویب صفحہ ریفریش رویوں سے سنگل پیج ایپلیکیشن صفحہ ریفریشز کی طرف بڑھتا ہے۔ [Azure Static Web App سروس](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) روٹنگ کو کیسے ہینڈل کرتی ہے اس کے بارے میں تھوڑا پڑھیں۔ کیا آپ وضاحت کر سکتے ہیں کہ اس دستاویز میں بیان کردہ کچھ فیصلے کیوں ضروری ہیں؟
+روٹنگ ویب ڈیولپمنٹ کے حیرت انگیز طور پر مشکل حصوں میں سے ایک ہے، خاص طور پر جب ویب صفحہ ریفریش کے رویے سے سنگل پیج ایپلیکیشن کے صفحہ ریفریشز کی طرف بڑھتی ہے۔ [Azure Static Web App سروس](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) روٹنگ کو کیسے ہینڈل کرتی ہے اس کے بارے میں تھوڑا پڑھیں۔ کیا آپ وضاحت کر سکتے ہیں کہ اس دستاویز میں بیان کردہ کچھ فیصلے کیوں ضروری ہیں؟
 
 **اضافی سیکھنے کے وسائل:**
-- **ایکسپلور کریں** کہ کس طرح مشہور فریم ورک جیسے React Router اور Vue Router کلائنٹ سائیڈ روٹنگ کو نافذ کرتے ہیں
-- **ریسرچ کریں** ہیش پر مبنی روٹنگ اور ہسٹری API روٹنگ کے درمیان فرق
+- **دریافت کریں** کہ مشہور فریم ورک جیسے React Router اور Vue Router کلائنٹ سائیڈ روٹنگ کو کیسے نافذ کرتے ہیں
+- **تحقیق کریں** ہیش بیسڈ روٹنگ اور ہسٹری API روٹنگ کے درمیان فرق
 - **سیکھیں** سرور سائیڈ رینڈرنگ (SSR) کے بارے میں اور یہ روٹنگ حکمت عملیوں کو کیسے متاثر کرتا ہے
-- **تحقیق کریں** کہ پروگریسو ویب ایپس (PWAs) روٹنگ اور نیویگیشن کو کیسے ہینڈل کرتے ہیں
+- **تحقیق کریں** کہ پروگریسو ویب ایپس (PWAs) روٹنگ اور نیویگیشن کو کیسے ہینڈل کرتی ہیں
 
 ## اسائنمنٹ
 
@@ -541,5 +799,5 @@ updateRoute();
 
 ---
 
-**ڈسکلیمر**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**اعلانِ لاتعلقی**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/7-bank-project/2-forms/README.md b/translations/ur/7-bank-project/2-forms/README.md
index cd06ccf2e5..ed1419a941 100644
--- a/translations/ur/7-bank-project/2-forms/README.md
+++ b/translations/ur/7-bank-project/2-forms/README.md
@@ -1,48 +1,95 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b24f28fc46dd473aa9080f174182adde",
-  "translation_date": "2025-10-22T15:04:21+00:00",
+  "original_hash": "7cbdbd132d39a2bb493e85bc2a9387cc",
+  "translation_date": "2025-11-03T13:26:00+00:00",
   "source_file": "7-bank-project/2-forms/README.md",
   "language_code": "ur"
 }
 -->
 # بینکنگ ایپ بنائیں حصہ 2: لاگ ان اور رجسٹریشن فارم بنائیں
 
-## پری لیکچر کوئز
+```mermaid
+journey
+    title Your Form Development Journey
+    section HTML Foundation
+      Understand form elements: 3: Student
+      Learn input types: 4: Student
+      Master accessibility: 4: Student
+    section JavaScript Integration
+      Handle form submission: 4: Student
+      Implement AJAX communication: 5: Student
+      Process server responses: 5: Student
+    section Validation Systems
+      Create multi-layer validation: 5: Student
+      Enhance user experience: 5: Student
+      Ensure data integrity: 5: Student
+```
+
+## لیکچر سے پہلے کا کوئز
 
-[پری لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/43)
+[لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/43)
 
-کیا آپ نے کبھی آن لائن فارم بھرا ہے اور آپ کا ای میل فارمیٹ مسترد ہو گیا؟ یا سب کچھ ختم ہو گیا جب آپ نے سبمٹ پر کلک کیا؟ ہم سب نے ان پریشان کن تجربات کا سامنا کیا ہے۔
+کبھی آن لائن فارم بھرنے کے بعد ای میل فارمیٹ کی غلطی کا سامنا کیا؟ یا سبمٹ پر کلک کرنے کے بعد تمام معلومات کھو دی؟ ہم سب نے ان پریشان کن تجربات کا سامنا کیا ہے۔
 
-فارمز آپ کے صارفین اور آپ کی ایپلیکیشن کی فعالیت کے درمیان پل ہیں۔ جیسے ہوائی جہاز کے کنٹرولرز کے محتاط پروٹوکول جو جہازوں کو محفوظ طریقے سے ان کی منزل تک پہنچاتے ہیں، اچھے ڈیزائن کردہ فارمز واضح فیڈبیک فراہم کرتے ہیں اور مہنگی غلطیوں کو روکتے ہیں۔ دوسری طرف، خراب فارمز صارفین کو اتنی جلدی دور کر سکتے ہیں جیسے مصروف ہوائی اڈے میں غلط فہمی۔
+فارمز آپ کے صارفین اور آپ کی ایپلیکیشن کی فعالیت کے درمیان پل کا کام کرتے ہیں۔ جیسے ہوائی جہازوں کو محفوظ طریقے سے منزل تک پہنچانے کے لیے ایئر ٹریفک کنٹرولرز کے محتاط پروٹوکول ہوتے ہیں، ویسے ہی اچھے ڈیزائن کردہ فارمز واضح فیڈبیک فراہم کرتے ہیں اور مہنگی غلطیوں کو روکتے ہیں۔ خراب فارمز، دوسری طرف، صارفین کو جلدی دور کر سکتے ہیں۔
 
-اس سبق میں، ہم آپ کی جامد بینکنگ ایپ کو ایک انٹرایکٹو ایپلیکیشن میں تبدیل کریں گے۔ آپ سیکھیں گے کہ ایسے فارمز کیسے بنائیں جو صارف کے ان پٹ کی تصدیق کریں، سرورز کے ساتھ بات چیت کریں، اور مددگار فیڈبیک فراہم کریں۔ اسے اس کنٹرول انٹرفیس کی تعمیر کے طور پر سوچیں جو صارفین کو آپ کی ایپلیکیشن کی خصوصیات کو نیویگیٹ کرنے دیتا ہے۔
+اس سبق میں، ہم آپ کی جامد بینکنگ ایپ کو ایک انٹرایکٹو ایپلیکیشن میں تبدیل کریں گے۔ آپ سیکھیں گے کہ صارف کے ان پٹ کی تصدیق کرنے، سرورز کے ساتھ بات چیت کرنے، اور مددگار فیڈبیک فراہم کرنے والے فارمز کیسے بنائیں۔ اسے ایسے سمجھیں جیسے آپ ایپلیکیشن کی خصوصیات کو نیویگیٹ کرنے کے لیے کنٹرول انٹرفیس بنا رہے ہیں۔
 
-آخر میں، آپ کے پاس ایک مکمل لاگ ان اور رجسٹریشن سسٹم ہوگا جس میں تصدیق شامل ہوگی جو صارفین کو مایوسی کے بجائے کامیابی کی طرف رہنمائی کرے گا۔
+آخر میں، آپ کے پاس ایک مکمل لاگ ان اور رجسٹریشن سسٹم ہوگا جو صارفین کو مایوسی کے بجائے کامیابی کی طرف رہنمائی کرے گا۔
+
+```mermaid
+mindmap
+  root((Form Development))
+    HTML Foundation
+      Semantic Elements
+      Input Types
+      Accessibility
+      Label Association
+    User Experience
+      Validation Feedback
+      Error Prevention
+      Loading States
+      Success Messaging
+    JavaScript Integration
+      Event Handling
+      AJAX Communication
+      Data Processing
+      Error Management
+    Validation Layers
+      HTML5 Validation
+      Client-side Logic
+      Server-side Security
+      Progressive Enhancement
+    Modern Patterns
+      Fetch API
+      Async/Await
+      Form Data API
+      Promise Handling
+```
 
-## پیشگی شرائط
+## ضروریات
 
-فارمز بنانا شروع کرنے سے پہلے، آئیے یقینی بنائیں کہ آپ نے سب کچھ صحیح طریقے سے سیٹ اپ کیا ہے۔ یہ سبق وہیں سے شروع ہوتا ہے جہاں ہم نے پچھلے سبق میں چھوڑا تھا، لہذا اگر آپ نے آگے بڑھ کر سبق چھوڑ دیا ہے، تو آپ پہلے بنیادی باتیں کام کرنے کے لیے واپس جا سکتے ہیں۔
+فارمز بنانے سے پہلے، آئیے یقینی بنائیں کہ آپ نے سب کچھ صحیح طریقے سے سیٹ اپ کیا ہے۔ یہ سبق وہیں سے شروع ہوتا ہے جہاں ہم نے پچھلے سبق میں چھوڑا تھا، لہذا اگر آپ نے آگے بڑھنے کی کوشش کی ہے، تو آپ کو پہلے بنیادی چیزیں کام کرنے کے لیے واپس جانا پڑ سکتا ہے۔
 
 ### مطلوبہ سیٹ اپ
 
 | جزو | حیثیت | تفصیل |
-|-----------|--------|-------------|
+|------|-------|--------|
 | [HTML ٹیمپلیٹس](../1-template-route/README.md) | ✅ ضروری | آپ کی بنیادی بینکنگ ایپ کی ساخت |
 | [Node.js](https://nodejs.org) | ✅ ضروری | سرور کے لیے جاوا اسکرپٹ رن ٹائم |
 | [بینک API سرور](../api/README.md) | ✅ ضروری | ڈیٹا اسٹوریج کے لیے بیک اینڈ سروس |
 
-> 💡 **ترقیاتی مشورہ**: آپ دو الگ الگ سرورز کو ایک ساتھ چلائیں گے – ایک آپ کی فرنٹ اینڈ بینکنگ ایپ کے لیے اور دوسرا بیک اینڈ API کے لیے۔ یہ سیٹ اپ حقیقی دنیا کی ترقی کی عکاسی کرتا ہے جہاں فرنٹ اینڈ اور بیک اینڈ سروسز آزادانہ طور پر کام کرتی ہیں۔
+> 💡 **ترقیاتی ٹپ**: آپ دو الگ الگ سرورز کو ایک ساتھ چلائیں گے – ایک آپ کی فرنٹ اینڈ بینکنگ ایپ کے لیے اور دوسرا بیک اینڈ API کے لیے۔ یہ سیٹ اپ حقیقی دنیا کی ترقی کی عکاسی کرتا ہے جہاں فرنٹ اینڈ اور بیک اینڈ سروسز آزادانہ طور پر کام کرتی ہیں۔
 
 ### سرور کنفیگریشن
 
 **آپ کے ترقیاتی ماحول میں شامل ہوگا:**
-- **فرنٹ اینڈ سرور**: آپ کی بینکنگ ایپ فراہم کرتا ہے (عام طور پر پورٹ `3000`)
+- **فرنٹ اینڈ سرور**: آپ کی بینکنگ ایپ کو فراہم کرتا ہے (عام طور پر پورٹ `3000`)
 - **بیک اینڈ API سرور**: ڈیٹا اسٹوریج اور بازیافت کو ہینڈل کرتا ہے (پورٹ `5000`)
 - **دونوں سرورز** بغیر کسی تنازع کے ایک ساتھ چل سکتے ہیں
 
-**اپنے API کنکشن کی جانچ کریں:**
+**اپنے API کنکشن کی جانچ:**
 ```bash
 curl http://localhost:5000/api
 # Expected response: "Bank API v1.0.0"
@@ -54,13 +101,13 @@ curl http://localhost:5000/api
 
 ## HTML فارمز اور کنٹرولز کو سمجھنا
 
-HTML فارمز وہ طریقہ ہیں جس کے ذریعے صارفین آپ کی ویب ایپلیکیشن کے ساتھ بات چیت کرتے ہیں۔ انہیں 19ویں صدی میں دور دراز جگہوں کو جوڑنے والے ٹیلی گراف سسٹم کے طور پر سوچیں – یہ صارف کے ارادے اور ایپلیکیشن کے ردعمل کے درمیان مواصلاتی پروٹوکول ہیں۔ جب سوچ سمجھ کر ڈیزائن کیا جائے تو وہ غلطیوں کو پکڑتے ہیں، ان پٹ فارمیٹنگ کی رہنمائی کرتے ہیں، اور مددگار تجاویز فراہم کرتے ہیں۔
+HTML فارمز وہ طریقہ ہیں جس کے ذریعے صارفین آپ کی ویب ایپلیکیشن کے ساتھ بات چیت کرتے ہیں۔ انہیں 19ویں صدی میں دور دراز جگہوں کو جوڑنے والے ٹیلی گراف سسٹم کے طور پر سوچیں – یہ صارف کے ارادے اور ایپلیکیشن کے جواب کے درمیان مواصلاتی پروٹوکول ہیں۔ جب سوچ سمجھ کر ڈیزائن کیا جائے، تو یہ غلطیوں کو پکڑتے ہیں، ان پٹ فارمیٹنگ کی رہنمائی کرتے ہیں، اور مددگار تجاویز فراہم کرتے ہیں۔
 
-جدید فارمز بنیادی ٹیکسٹ ان پٹ سے نمایاں طور پر زیادہ نفیس ہیں۔ HTML5 نے خصوصی ان پٹ اقسام متعارف کروائیں جو خود بخود ای میل کی تصدیق، نمبر فارمیٹنگ، اور تاریخ کا انتخاب کرتی ہیں۔ یہ بہتریاں رسائی اور موبائل صارف کے تجربات دونوں کے لیے فائدہ مند ہیں۔
+جدید فارمز بنیادی ٹیکسٹ ان پٹس سے نمایاں طور پر زیادہ نفیس ہیں۔ HTML5 نے خصوصی ان پٹ اقسام متعارف کروائیں جو ای میل کی تصدیق، نمبر فارمیٹنگ، اور تاریخ کے انتخاب کو خود بخود ہینڈل کرتی ہیں۔ یہ بہتریاں رسائی اور موبائل صارف کے تجربات دونوں کے لیے فائدہ مند ہیں۔
 
 ### ضروری فارم عناصر
 
-**ہر فارم کو جن تعمیراتی بلاکس کی ضرورت ہوتی ہے:**
+**ہر فارم کو درکار بلڈنگ بلاکس:**
 
 ```html
 <!-- Basic form structure -->
@@ -73,15 +120,15 @@ HTML فارمز وہ طریقہ ہیں جس کے ذریعے صارفین آپ ک
 ```
 
 **یہ کوڈ کیا کرتا ہے:**
-- **ایک فارم کنٹینر بناتا ہے** جس میں منفرد شناخت کنندہ ہوتا ہے
-- **ڈیٹا جمع کرانے کے لیے HTTP طریقہ کار کی وضاحت کرتا ہے**
-- **لیبلز کو ان پٹس کے ساتھ منسلک کرتا ہے تاکہ رسائی کو بہتر بنایا جا سکے**
-- **فارم کو پروسیس کرنے کے لیے ایک سبمٹ بٹن کی وضاحت کرتا ہے**
+- **ایک فارم کنٹینر** منفرد شناخت کنندہ کے ساتھ بناتا ہے
+- **ڈیٹا جمع کرانے کے لیے HTTP طریقہ** کی وضاحت کرتا ہے
+- **لیبلز کو ان پٹس کے ساتھ** رسائی کے لیے منسلک کرتا ہے
+- **فارم کو پروسیس کرنے کے لیے سبمٹ بٹن** کی وضاحت کرتا ہے
 
 ### جدید ان پٹ اقسام اور خصوصیات
 
 | ان پٹ قسم | مقصد | مثال استعمال |
-|------------|---------|---------------|
+|-----------|-------|---------------|
 | `text` | عمومی ٹیکسٹ ان پٹ | `<input type="text" name="username">` |
 | `email` | ای میل کی تصدیق | `<input type="email" name="email">` |
 | `password` | چھپے ہوئے ٹیکسٹ انٹری | `<input type="password" name="password">` |
@@ -102,13 +149,13 @@ HTML فارمز وہ طریقہ ہیں جس کے ذریعے صارفین آپ ک
 **ہر بٹن کی قسم کیا کرتی ہے:**
 - **سبمٹ بٹن**: فارم جمع کرانے کو متحرک کرتا ہے اور ڈیٹا کو مخصوص اینڈ پوائنٹ پر بھیجتا ہے
 - **ری سیٹ بٹن**: تمام فارم فیلڈز کو ان کی ابتدائی حالت میں بحال کرتا ہے
-- **عام بٹن**: کوئی ڈیفالٹ رویہ فراہم نہیں کرتا، فعالیت کے لیے کسٹم جاوا اسکرپٹ کی ضرورت ہوتی ہے
+- **عام بٹن**: کوئی ڈیفالٹ رویہ فراہم نہیں کرتا، فعالیت کے لیے حسب ضرورت جاوا اسکرپٹ کی ضرورت ہوتی ہے
 
 > ⚠️ **اہم نوٹ**: `<input>` عنصر خود بند ہونے والا ہے اور بند کرنے والے ٹیگ کی ضرورت نہیں ہے۔ جدید بہترین عمل `<input>` کو بغیر سلیش کے لکھنا ہے۔
 
 ### اپنا لاگ ان فارم بنانا
 
-اب آئیے ایک عملی لاگ ان فارم بنائیں جو جدید HTML فارم کے طریقوں کو ظاہر کرتا ہے۔ ہم بنیادی ڈھانچے سے شروع کریں گے اور اسے رسائی کی خصوصیات اور تصدیق کے ساتھ بتدریج بہتر بنائیں گے۔
+اب ہم ایک عملی لاگ ان فارم بناتے ہیں جو جدید HTML فارم کے طریقوں کو ظاہر کرتا ہے۔ ہم بنیادی ڈھانچے سے شروع کریں گے اور اسے رسائی کی خصوصیات اور تصدیق کے ساتھ بتدریج بہتر کریں گے۔
 
 ```html
 <template id="login">
@@ -128,11 +175,11 @@ HTML فارمز وہ طریقہ ہیں جس کے ذریعے صارفین آپ ک
 ```
 
 **یہاں کیا ہوتا ہے:**
-- **فارم کو** سیمینٹک HTML5 عناصر کے ساتھ ترتیب دیتا ہے
-- **متعلقہ عناصر کو** معنی خیز کلاسز کے ساتھ `div` کنٹینرز میں گروپ کرتا ہے
-- **لیبلز کو** `for` اور `id` خصوصیات کا استعمال کرتے ہوئے ان پٹس کے ساتھ منسلک کرتا ہے
+- **فارم کو** سیمینٹک HTML5 عناصر کے ساتھ تشکیل دیتا ہے
+- **متعلقہ عناصر کو** `div` کنٹینرز کے ذریعے گروپ کرتا ہے
+- **لیبلز کو ان پٹس کے ساتھ** `for` اور `id` خصوصیات کے ذریعے منسلک کرتا ہے
 - **بہتر UX کے لیے** جدید خصوصیات جیسے `autocomplete` اور `placeholder` شامل کرتا ہے
-- **تصدیق کو** براؤزر کے ڈیفالٹس کے بجائے جاوا اسکرپٹ کے ساتھ ہینڈل کرنے کے لیے `novalidate` شامل کرتا ہے
+- **تصدیق کو** براؤزر ڈیفالٹس کے بجائے جاوا اسکرپٹ کے ساتھ ہینڈل کرنے کے لیے `novalidate` شامل کرتا ہے
 
 ### مناسب لیبلز کی طاقت
 
@@ -152,13 +199,13 @@ graph TD
 ```
 
 **مناسب لیبلز کیا حاصل کرتے ہیں:**
-- **اسکرین ریڈرز کو** فارم فیلڈز کو واضح طور پر اعلان کرنے کے قابل بناتا ہے
-- **کلک ایریا کو بڑھاتا ہے** (لیبل پر کلک کرنے سے ان پٹ پر فوکس ہوتا ہے)
-- **موبائل استعمال کو بہتر بناتا ہے** بڑے ٹچ ٹارگٹس کے ساتھ
-- **فارم کی تصدیق کو** معنی خیز غلطی کے پیغامات کے ساتھ سپورٹ کرتا ہے
-- **SEO کو بہتر بناتا ہے** فارم عناصر کو سیمینٹک معنی فراہم کرکے
+- **اسکرین ریڈرز کو** فارم فیلڈز کو واضح طور پر اعلان کرنے کے قابل بناتے ہیں
+- **کلک ایریا کو** بڑھاتے ہیں (لیبل پر کلک کرنے سے ان پٹ فوکس ہوتا ہے)
+- **موبائل استعمال کو** بڑے ٹچ ٹارگٹس کے ساتھ بہتر بناتے ہیں
+- **فارم کی تصدیق کو** بامعنی غلطی کے پیغامات کے ساتھ سپورٹ کرتے ہیں
+- **SEO کو** فارم عناصر کو سیمینٹک معنی فراہم کرکے بہتر بناتے ہیں
 
-> 🎯 **رسائی کا مقصد**: ہر فارم ان پٹ کے ساتھ ایک منسلک لیبل ہونا چاہیے۔ یہ سادہ عمل آپ کے فارمز کو ہر کسی کے لیے قابل استعمال بناتا ہے، بشمول معذوری والے صارفین، اور تمام صارفین کے لیے تجربہ کو بہتر بناتا ہے۔
+> 🎯 **رسائی کا مقصد**: ہر فارم ان پٹ کے ساتھ ایک منسلک لیبل ہونا چاہیے۔ یہ سادہ عمل آپ کے فارمز کو ہر کسی کے لیے قابل استعمال بناتا ہے، بشمول معذوری والے صارفین، اور تمام صارفین کے لیے تجربہ بہتر بناتا ہے۔
 
 ### رجسٹریشن فارم بنانا
 
@@ -197,40 +244,56 @@ graph TD
 ```
 
 **اوپر، ہم نے:**
-- **ہر فیلڈ کو** بہتر اسٹائلنگ اور لے آؤٹ کے لیے کنٹینر ڈیو میں منظم کیا
-- **مناسب `autocomplete` خصوصیات شامل کیں** تاکہ براؤزر آٹو فل کی حمایت ہو
-- **مددگار پلیس ہولڈر ٹیکسٹ شامل کیا** تاکہ صارف کے ان پٹ کی رہنمائی ہو
-- **مناسب ڈیفالٹس سیٹ کیے** `value` خصوصیت کا استعمال کرتے ہوئے
-- **تصدیق کی خصوصیات شامل کیں** جیسے `required`, `maxlength`, اور `min`
-- **بیلنس فیلڈ کے لیے** `type="number"` استعمال کیا جس میں اعشاریہ کی حمایت ہو
+- **ہر فیلڈ کو** بہتر اسٹائلنگ اور لے آؤٹ کے لیے کنٹینر divs میں منظم کیا
+- **مناسب `autocomplete` خصوصیات** شامل کیں تاکہ براؤزر آٹو فل سپورٹ فراہم کرے
+- **مددگار پلیس ہولڈر ٹیکسٹ** شامل کیا تاکہ صارف کے ان پٹ کی رہنمائی ہو
+- **معقول ڈیفالٹس** `value` خصوصیت کے ذریعے سیٹ کیے
+- **تصدیق کی خصوصیات** جیسے `required`, `maxlength`, اور `min` کا اطلاق کیا
+- **بیلنس فیلڈ کے لیے `type="number"`** استعمال کیا جس میں اعشاریہ کی حمایت ہو
 
-### ان پٹ اقسام اور رویہ کو دریافت کرنا
+### ان پٹ اقسام اور رویے کو دریافت کرنا
 
 **جدید ان پٹ اقسام بہتر فعالیت فراہم کرتی ہیں:**
 
 | خصوصیت | فائدہ | مثال |
-|---------|---------|----------|
-| `type="number"` | موبائل پر عددی کیپیڈ | بیلنس انٹری کو آسان بناتا ہے |
+|--------|-------|-------|
+| `type="number"` | موبائل پر عددی کیپیڈ | بیلنس انٹری آسان بناتا ہے |
 | `step="0.01"` | اعشاریہ کی درستگی کا کنٹرول | کرنسی میں سینٹس کی اجازت دیتا ہے |
 | `autocomplete` | براؤزر آٹو فل | فارم مکمل کرنے میں تیزی |
 | `placeholder` | سیاق و سباق کے اشارے | صارف کی توقعات کی رہنمائی کرتا ہے |
 
-> 🎯 **رسائی کا چیلنج**: صرف اپنے کی بورڈ کا استعمال کرتے ہوئے فارمز کو نیویگیٹ کرنے کی کوشش کریں! `Tab` کا استعمال کریں فیلڈز کے درمیان حرکت کرنے کے لیے، `Space` چیک باکسز کو چیک کرنے کے لیے، اور `Enter` فارم جمع کرانے کے لیے۔ یہ تجربہ آپ کو سمجھنے میں مدد دیتا ہے کہ اسکرین ریڈر صارفین آپ کے فارمز کے ساتھ کیسے تعامل کرتے ہیں۔
+> 🎯 **رسائی کا چیلنج**: صرف اپنے کی بورڈ کا استعمال کرتے ہوئے فارمز کو نیویگیٹ کرنے کی کوشش کریں! `Tab` کا استعمال کریں فیلڈز کے درمیان منتقل ہونے کے لیے، `Space` چیک باکسز کو چیک کرنے کے لیے، اور `Enter` فارم جمع کرانے کے لیے۔ یہ تجربہ آپ کو سمجھنے میں مدد دیتا ہے کہ اسکرین ریڈر صارفین آپ کے فارمز کے ساتھ کیسے تعامل کرتے ہیں۔
+
+### 🔄 **تعلیمی جائزہ**
+**فارم کی بنیاد کو سمجھنا**: جاوا اسکرپٹ نافذ کرنے سے پہلے، یقینی بنائیں کہ آپ سمجھتے ہیں:
+- ✅ سیمینٹک HTML کیسے قابل رسائی فارم ڈھانچے بناتا ہے
+- ✅ موبائل کی بورڈز اور تصدیق کے لیے ان پٹ اقسام کیوں اہم ہیں
+- ✅ لیبلز اور فارم کنٹرولز کے درمیان تعلق
+- ✅ فارم کی خصوصیات براؤزر کے ڈیفالٹ رویے کو کیسے متاثر کرتی ہیں
+
+**خود سے جلدی ٹیسٹ**: اگر آپ جاوا اسکرپٹ ہینڈلنگ کے بغیر فارم جمع کراتے ہیں تو کیا ہوتا ہے؟
+*جواب: براؤزر ڈیفالٹ جمع کرانے کو انجام دیتا ہے، عام طور پر ایکشن URL پر ری ڈائریکٹ کرتا ہے*
+
+**HTML5 فارم کے فوائد**: جدید فارمز فراہم کرتے ہیں:
+- **بلٹ ان تصدیق**: ای میل اور نمبر فارمیٹ کی خودکار جانچ
+- **موبائل آپٹیمائزیشن**: مختلف ان پٹ اقسام کے لیے مناسب کی بورڈز
+- **رسائی**: اسکرین ریڈر سپورٹ اور کی بورڈ نیویگیشن
+- **پروگریسو انحانسمنٹ**: جاوا اسکرپٹ غیر فعال ہونے پر بھی کام کرتا ہے
 
 ## فارم جمع کرانے کے طریقوں کو سمجھنا
 
-جب کوئی آپ کے فارم کو بھر کر سبمٹ کرتا ہے، تو وہ ڈیٹا کہیں جانا چاہیے – عام طور پر ایک سرور پر جو اسے محفوظ کر سکتا ہے۔ یہ مختلف طریقوں سے ہو سکتا ہے، اور یہ جاننا کہ کون سا استعمال کرنا ہے آپ کو بعد میں کچھ پریشانیوں سے بچا سکتا ہے۔
+جب کوئی آپ کا فارم بھر کر سبمٹ کرتا ہے، تو وہ ڈیٹا کہیں جانا چاہیے – عام طور پر ایک سرور پر جو اسے محفوظ کر سکتا ہے۔ یہ مختلف طریقوں سے ہو سکتا ہے، اور یہ جاننا کہ کون سا استعمال کرنا ہے، آپ کو بعد میں کچھ پریشانیوں سے بچا سکتا ہے۔
 
 آئیے دیکھتے ہیں کہ جب کوئی سبمٹ بٹن پر کلک کرتا ہے تو اصل میں کیا ہوتا ہے۔
 
 ### ڈیفالٹ فارم رویہ
 
-پہلے، آئیے بنیادی فارم جمع کرانے کے ساتھ کیا ہوتا ہے دیکھیں:
+سب سے پہلے، آئیے بنیادی فارم جمع کرانے کے ساتھ کیا ہوتا ہے، اس کا مشاہدہ کریں:
 
 **اپنے موجودہ فارمز کی جانچ کریں:**
 1. اپنے فارم میں *رجسٹر* بٹن پر کلک کریں
-2. اپنے براؤزر کے ایڈریس بار میں تبدیلیاں دیکھیں
-3. نوٹ کریں کہ صفحہ کیسے ری لوڈ ہوتا ہے اور ڈیٹا URL میں ظاہر ہوتا ہے
+2. اپنے براؤزر کے ایڈریس بار میں تبدیلیوں کا مشاہدہ کریں
+3. دیکھیں کہ صفحہ کیسے ری لوڈ ہوتا ہے اور ڈیٹا URL میں ظاہر ہوتا ہے
 
 ![رجسٹر بٹن پر کلک کرنے کے بعد براؤزر کے URL میں تبدیلی کا اسکرین شاٹ](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ur.png)
 
@@ -253,18 +316,18 @@ graph TD
 
 **فرق کو سمجھنا:**
 
-| طریقہ | استعمال کا کیس | ڈیٹا کی جگہ | سیکیورٹی کی سطح | سائز کی حد |
-|--------|----------|---------------|----------------|-------------|
+| طریقہ | استعمال کا کیس | ڈیٹا کا مقام | سیکیورٹی کی سطح | سائز کی حد |
+|-------|---------------|-------------|----------------|------------|
 | `GET` | تلاش کے سوالات، فلٹرز | URL پیرامیٹرز | کم (ظاہر) | ~2000 حروف |
 | `POST` | صارف اکاؤنٹس، حساس ڈیٹا | درخواست کا جسم | زیادہ (چھپا ہوا) | کوئی عملی حد نہیں |
 
 **بنیادی فرق کو سمجھنا:**
 - **GET**: فارم ڈیٹا کو URL میں کوئری پیرامیٹرز کے طور پر شامل کرتا ہے (تلاش کے آپریشنز کے لیے موزوں)
 - **POST**: ڈیٹا کو درخواست کے جسم میں شامل کرتا ہے (حساس معلومات کے لیے ضروری)
-- **GET کی حدود**: سائز کی پابندیاں، ظاہر ڈیٹا، مستقل براؤزر کی تاریخ
-- **POST کے فوائد**: بڑے ڈیٹا کی گنجائش، پرائیویسی تحفظ، فائل اپلوڈ کی حمایت
+- **GET کی حدود**: سائز کی پابندیاں، ظاہر ڈیٹا، مستقل براؤزر ہسٹری
+- **POST کے فوائد**: بڑی ڈیٹا کی صلاحیت، پرائیویسی تحفظ، فائل اپلوڈ سپورٹ
 
-> 💡 **بہترین عمل**: تلاش کے فارمز اور فلٹرز کے لیے `GET` استعمال کریں (ڈیٹا بازیافت)، صارف رجسٹریشن، لاگ ان، اور ڈیٹا تخلیق کے لیے `POST` استعمال کریں۔
+> 💡 **بہترین عمل**: تلاش فارمز اور فلٹرز (ڈیٹا بازیافت) کے لیے `GET` استعمال کریں، صارف رجسٹریشن، لاگ ان، اور ڈیٹا تخلیق کے لیے `POST` استعمال کریں۔
 
 ### فارم جمع کرانے کی ترتیب
 
@@ -282,19 +345,19 @@ graph TD
 
 ### فارم جمع کرانے کی جانچ
 
-**اپنے فارم کی جانچ کرنے کے لیے یہ اقدامات کریں:**
+**اپنے فارم کی جانچ کے لیے ان اقدامات پر عمل کریں:**
 1. **رجسٹریشن فارم کو** اپنی معلومات کے ساتھ بھریں
 2. **"اکاؤنٹ بنائیں" بٹن پر کلک کریں**
-3. **اپنے براؤزر میں** سرور کے جواب کا مشاہدہ کریں
+3. **اپنے براؤزر میں سرور کے جواب کا مشاہدہ کریں**
 
-![ایک براؤزر ونڈو ایڈریس localhost:5000/api/accounts پر، جس میں صارف کے ڈیٹا کے ساتھ JSON سٹرنگ دکھائی دے رہی ہے](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ur.png)
+![براؤزر ونڈو ایڈریس localhost:5000/api/accounts پر، صارف کے ڈیٹا کے ساتھ JSON اسٹرنگ دکھا رہا ہے](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ur.png)
 
 **آپ کو کیا دیکھنا چاہیے:**
-- **براؤزر** API اینڈ پوائنٹ URL پر ری ڈائریکٹ ہوتا ہے
-- **JSON جواب** جس میں آپ کے نئے بنائے گئے اکاؤنٹ کا ڈیٹا شامل ہوتا ہے
+- **براؤزر ری ڈائریکٹ** API اینڈ پوائنٹ URL پر
+- **JSON جواب** جس میں آپ کے نئے بنائے گئے اکاؤنٹ کا ڈیٹا شامل ہے
 - **سرور کی تصدیق** کہ اکاؤنٹ کامیابی سے بنایا گیا ہے
 
-> 🧪 **تجربہ کا وقت**: دوبارہ اسی صارف نام کے ساتھ رجسٹریشن کرنے کی کوشش کریں۔ آپ کو کیا جواب ملتا ہے؟ یہ آپ کو سمجھنے میں مدد دیتا ہے کہ سرور ڈپلیکیٹ ڈیٹا اور غلطی کی شرائط کو کیسے ہینڈل کرتا ہے۔
+> 🧪 **تجربہ کا وقت**: دوبارہ رجسٹر کرنے کی کوشش کریں، لیکن اسی صارف نام کے ساتھ۔ آپ کو کیا جواب ملتا ہے؟ یہ آپ کو سمجھنے میں مدد دیتا ہے کہ سرور ڈپلیکیٹ ڈیٹا اور غلطی کی شرائط کو کیسے ہینڈل کرتا ہے۔
 
 ### JSON جوابات کو سمجھنا
 
@@ -310,18 +373,18 @@ graph TD
 ```
 
 **یہ جواب تصدیق کرتا ہے:**
-- **آپ کے مخصوص ڈیٹا کے ساتھ** ایک نیا اکاؤنٹ بناتا ہے
-- **مستقبل کے حوالہ کے لیے** ایک منفرد شناخت کنندہ تفویض کرتا ہے
-- **تمام اکاؤنٹ معلومات واپس کرتا ہے** تصدیق کے لیے
-- **کامیاب ڈیٹا بیس اسٹوریج کی نشاندہی کرتا ہے**
+- **آپ کے مخصوص ڈیٹا کے ساتھ** نیا اکاؤنٹ بناتا ہے
+- **مستقبل کے حوالہ کے لیے** منفرد شناخت کنندہ تفویض کرتا ہے
+- **تمام اکاؤنٹ معلومات** تصدیق کے لیے واپس کرتا ہے
+- **ڈیٹا بیس اسٹوریج کی کامیابی** کی نشاندہی کرتا ہے
 
 ## جاوا اسکرپٹ کے ساتھ جدید فارم ہینڈلنگ
 
-روایتی فارم جمع کرانے سے پورے صفحے کو ری لوڈ کرنے کی ضرورت ہوتی ہے، جیسے ابتدائی خلائی مشن کورس کی اصلاحات کے لیے مکمل سسٹم ری سیٹ کی ضرورت ہوتی تھی۔ یہ طریقہ صارف کے تجربے کو متاثر کرتا ہے اور ایپلیکیشن کی حالت کو کھو دیتا ہے۔
+روایتی فارم جمع کرانے سے پورے صفحے کی ری لوڈنگ ہوتی ہے، جیسے ابتدائی خلائی مشنوں کو کورس کی اصلاح کے لیے مکمل سسٹم ری سیٹ کی ضرورت ہوتی تھی۔ یہ طریقہ صارف کے تجربے میں خلل ڈالتا ہے اور ایپلیکیشن کی حالت کو کھو دیتا ہے۔
 
-جاوا اسکرپٹ فارم ہینڈلنگ جدید خلائی جہاز کے مسلسل رہنمائی کے نظام کی طرح کام کرتی ہے – نیویگیشن کے سیاق و سباق کو کھوئے بغیر حقیقی وقت میں ایڈجسٹمنٹ کرتی ہے۔ ہم فارم جمع کرانے کو روک سکتے ہیں، فوری فیڈبیک فراہم کر سکتے ہیں، غلطیوں کو خوش اسلوبی سے ہینڈل کر سکتے ہیں، اور صارف کی پوزیشن کو ایپلیکیشن میں برقرار رکھتے ہوئے سرور کے جوابات کی بنیاد پر انٹرفیس کو اپ ڈیٹ کر سکتے ہیں۔
+جاوا اسکرپٹ فارم ہینڈلنگ جدید خلائی جہازوں کے مسلسل رہنمائی کے نظام کی طرح کام کرتی ہے – نیویگیشن کے سیاق و سباق کو کھوئے بغیر حقیقی وقت میں ایڈجسٹمنٹ کرتی ہے۔ ہم فارم جمع کرانے کو روک سکتے ہیں، فوری فیڈبیک فراہم کر سکتے ہیں، غلطیوں کو خوش اسلوبی سے ہینڈل کر سکتے ہیں، اور صارف کی ایپلیکیشن میں پوزیشن کو برقرار رکھتے ہوئے سرور کے جوابات کی بنیاد پر انٹرفیس کو اپ ڈیٹ کر سکتے ہیں۔
 
-### صفحہ ری لوڈ سے بچنے کی وجوہات
+### صفحہ ری لوڈنگ سے بچنے کی وجوہات
 
 ```mermaid
 sequenceDiagram
@@ -339,51 +402,100 @@ sequenceDiagram
 
 **جاوا اسکرپٹ فارم ہینڈلنگ کے فوائد:**
 - **ایپلیکیشن کی حالت اور صارف کے سیاق و سباق کو برقرار رکھتا ہے**
-- **فوری فیڈبیک اور لوڈنگ اشارے فراہم کرتا ہے**
-- **متحرک غلطی کی ہینڈلنگ اور تصدیق کو فعال کرتا ہے**
-- **ہموار، ایپ جیسے صارف کے تجربات تخلیق کرتا ہے**
-- **سرور کے جوابات کی بنیاد پر مشروط منطق کی اجازت دیتا ہے**
+- **فوری فیڈبیک اور لو
+```javascript
+// Example of what FormData captures
+const formData = new FormData(registerForm);
+
+// FormData automatically captures:
+// {
+//   "user": "john_doe",
+//   "currency": "$", 
+//   "description": "Personal account",
+//   "balance": "100"
+// }
+```
+
+**FormData API کے فوائد:**
+- **جامع مجموعہ**: تمام فارم عناصر کو پکڑتا ہے، بشمول متن، فائلیں، اور پیچیدہ ان پٹ
+- **قسم کی آگاہی**: مختلف ان پٹ اقسام کو خود بخود سنبھالتا ہے بغیر کسی حسب ضرورت کوڈنگ کے
+- **موثر**: ایک ہی API کال کے ساتھ دستی فیلڈ جمع کرنے کو ختم کرتا ہے
+- **مطابقت**: فارم کی ساخت کے ارتقاء کے ساتھ فعالیت کو برقرار رکھتا ہے
 
-### روایتی سے جدید فارمز کی طرف منتقلی
+### سرور کے ساتھ مواصلت کے فنکشن کی تخلیق
+
+اب جدید جاوا اسکرپٹ پیٹرنز کا استعمال کرتے ہوئے آپ کے API سرور کے ساتھ مواصلت کے لیے ایک مضبوط فنکشن بناتے ہیں:
+
+```javascript
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: account
+    });
+    
+    // Check if the response was successful
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    return await response.json();
+  } catch (error) {
+    console.error('Account creation failed:', error);
+    return { error: error.message || 'Network error occurred' };
+  }
+}
+```
 
-**روایتی طریقہ کار کے چیلنجز:**
-- **صارفین کو** آپ کی ایپلیکیشن سے دور لے جاتا ہے
-- **موجودہ ایپلیکیشن کی حالت اور سیاق و سباق کو کھو دیتا ہے**
-- **سادہ آپریشنز کے لیے** پورے صفحے کو ری لوڈ کرنے کی ضرورت ہوتی ہے
-- **صارف کے فیڈبیک پر** محدود کنٹرول فراہم کرتا ہے
+**غیر متزامن جاوا اسکرپٹ کو سمجھنا:**
 
-**جدید جاوا اسکرپٹ طریقہ کار کے فوائد:**
-- **صارفین کو** آپ کی ایپلیکیشن کے اندر رکھتا ہے
-- **تمام ایپلیکیشن کی حالت اور ڈیٹا کو برقرار رکھتا ہے**
-- **حقیقی وقت کی تصدیق اور فیڈبیک کو فعال کرتا ہے**
-- **ترقی پسند اضافہ اور رسائی کی حمایت کرتا ہے**
+```mermaid
+sequenceDiagram
+    participant JS as JavaScript
+    participant Fetch as Fetch API
+    participant Server as Backend Server
+    
+    JS->>Fetch: fetch() request
+    Fetch->>Server: HTTP POST
+    Server-->>Fetch: JSON response
+    Fetch-->>JS: await response
+    JS->>JS: Process data
+```
 
-### جاوا اسکرپٹ فارم ہینڈلنگ کو ناف
-- **تفصیل فراہم کرتا ہے** ڈیبگنگ کے لیے تفصیلی ایرر میسیجز  
-- **واپس کرتا ہے** کامیابی اور ایرر کیسز کے لیے مستقل ڈیٹا اسٹرکچر  
+**یہ جدید نفاذ کیا حاصل کرتا ہے:**
+- **استعمال کرتا ہے** `async/await` کو قابل پڑھ غیر متزامن کوڈ کے لیے
+- **شامل کرتا ہے** مناسب خرابی ہینڈلنگ try/catch بلاکس کے ساتھ
+- **چیک کرتا ہے** جواب کی حیثیت ڈیٹا پر کارروائی کرنے سے پہلے
+- **مقرر کرتا ہے** JSON مواصلت کے لیے مناسب ہیڈرز
+- **فراہم کرتا ہے** خرابیوں کو ڈیبگ کرنے کے لیے تفصیلی پیغامات
+- **واپس کرتا ہے** کامیابی اور خرابی کے معاملات کے لیے مستقل ڈیٹا ڈھانچہ
 
-### جدید Fetch API کی طاقت  
+### جدید Fetch API کی طاقت
 
-**پرانے طریقوں کے مقابلے میں Fetch API کے فوائد:**  
+**پرانے طریقوں کے مقابلے میں Fetch API کے فوائد:**
 
-| خصوصیت | فائدہ | عمل درآمد |  
-|---------|---------|----------------|  
-| وعدہ پر مبنی | صاف ستھرا غیر ہم وقت کوڈ | `await fetch()` |  
-| درخواست کی تخصیص | مکمل HTTP کنٹرول | ہیڈرز، طریقے، باڈی |  
-| جواب کی ہینڈلنگ | لچکدار ڈیٹا پارسنگ | `.json()`, `.text()`, `.blob()` |  
-| ایرر ہینڈلنگ | جامع ایرر کیچنگ | Try/catch بلاکس |  
+| خصوصیت | فائدہ | نفاذ |
+|---------|---------|----------------|
+| وعدہ پر مبنی | صاف غیر متزامن کوڈ | `await fetch()` |
+| درخواست حسب ضرورت | مکمل HTTP کنٹرول | ہیڈرز، طریقے، باڈی |
+| جواب ہینڈلنگ | لچکدار ڈیٹا پارسنگ | `.json()`, `.text()`, `.blob()` |
+| خرابی ہینڈلنگ | جامع خرابی پکڑنا | Try/catch بلاکس |
 
-> 🎥 **مزید سیکھیں**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - جدید ویب ڈیولپمنٹ کے لیے غیر ہم وقت جاوا اسکرپٹ پیٹرنز کو سمجھنا۔  
+> 🎥 **مزید سیکھیں**: [Async/Await Tutorial](https://youtube.com/watch?v=YwmlRkrxvkk) - جدید ویب ڈویلپمنٹ کے لیے غیر متزامن جاوا اسکرپٹ پیٹرنز کو سمجھنا۔
 
-**سرور کے ساتھ مواصلات کے اہم تصورات:**  
-- **غیر ہم وقت فنکشنز** سرور کے جوابات کا انتظار کرنے کے لیے عمل کو روکنے کی اجازت دیتے ہیں  
-- **Await کلیدی لفظ** غیر ہم وقت کوڈ کو ہم وقت کوڈ کی طرح پڑھنے کے قابل بناتا ہے  
-- **Fetch API** جدید، وعدہ پر مبنی HTTP درخواستیں فراہم کرتا ہے  
-- **ایرر ہینڈلنگ** یقینی بناتا ہے کہ آپ کی ایپ نیٹ ورک کے مسائل پر خوش اسلوبی سے جواب دے  
+**سرور مواصلت کے کلیدی تصورات:**
+- **غیر متزامن فنکشنز** سرور کے جوابات کا انتظار کرنے کے لیے عمل کو روکنے کی اجازت دیتے ہیں
+- **Await کلیدی لفظ** غیر متزامن کوڈ کو ہم وقت ساز کوڈ کی طرح پڑھنے کے قابل بناتا ہے
+- **Fetch API** جدید، وعدہ پر مبنی HTTP درخواستیں فراہم کرتا ہے
+- **خرابی ہینڈلنگ** یقینی بناتی ہے کہ آپ کی ایپ نیٹ ورک کے مسائل پر خوش اسلوبی سے جواب دے
 
-### رجسٹریشن فنکشن مکمل کرنا  
+### رجسٹریشن فنکشن مکمل کرنا
 
-آئیے سب کچھ ایک مکمل، پروڈکشن کے لیے تیار رجسٹریشن فنکشن میں شامل کریں:  
+آئیے سب کچھ ایک مکمل، پروڈکشن کے لیے تیار رجسٹریشن فنکشن کے ساتھ اکٹھا کریں:
 
 ```javascript
 async function register() {
@@ -424,41 +536,61 @@ async function register() {
   }
 }
 ```
-  
-**یہ بہتر عمل درآمد شامل کرتا ہے:**  
-- **فراہم کرتا ہے** فارم جمع کرانے کے دوران بصری فیڈبیک  
-- **غیر فعال کرتا ہے** سبمٹ بٹن کو ڈپلیکیٹ سبمیشن سے روکنے کے لیے  
-- **ہینڈل کرتا ہے** متوقع اور غیر متوقع ایررز کو خوش اسلوبی سے  
-- **دکھاتا ہے** صارف دوست کامیابی اور ایرر میسیجز  
-- **ری سیٹ کرتا ہے** فارم کو کامیاب رجسٹریشن کے بعد  
-- **بحال کرتا ہے** UI کی حالت کو نتائج سے قطع نظر  
 
-### اپنے عمل درآمد کی جانچ کریں  
+**یہ بہتر نفاذ شامل کرتا ہے:**
+- **فراہم کرتا ہے** فارم جمع کرانے کے دوران بصری تاثرات
+- **غیر فعال کرتا ہے** جمع کرانے کے بٹن کو ڈپلیکیٹ جمع کرانے سے روکنے کے لیے
+- **خوش اسلوبی سے ہینڈل کرتا ہے** متوقع اور غیر متوقع خرابیوں کو
+- **دکھاتا ہے** صارف دوست کامیابی اور خرابی کے پیغامات
+- **ری سیٹ کرتا ہے** کامیاب رجسٹریشن کے بعد فارم
+- **بحال کرتا ہے** UI حالت کو قطع نظر نتیجہ کے
+
+### اپنے نفاذ کی جانچ کرنا
 
-**اپنے براؤزر ڈیولپر ٹولز کھولیں اور رجسٹریشن کی جانچ کریں:**  
+**اپنے براؤزر کے ڈویلپر ٹولز کھولیں اور رجسٹریشن کی جانچ کریں:**
 
-1. **براؤزر کنسول کھولیں** (F12 → Console ٹیب)  
-2. **رجسٹریشن فارم بھریں**  
-3. **"اکاؤنٹ بنائیں" پر کلک کریں**  
-4. **کنسول میسیجز اور صارف فیڈبیک کا مشاہدہ کریں**  
+1. **کھولیں** براؤزر کنسول (F12 → Console tab)
+2. **رجسٹریشن فارم کو پُر کریں**
+3. **"اکاؤنٹ بنائیں" پر کلک کریں**
+4. **کنسول پیغامات اور صارف تاثرات کا مشاہدہ کریں**
 
-![براؤزر کنسول میں لاگ میسیج دکھانے والا اسکرین شاٹ](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ur.png)  
+![براؤزر کنسول میں لاگ پیغام دکھانے والا اسکرین شاٹ](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ur.png)
 
-**آپ کو کیا دیکھنا چاہیے:**  
-- **لوڈنگ اسٹیٹ** سبمٹ بٹن پر ظاہر ہوتا ہے  
-- **کنسول لاگز** عمل کے بارے میں تفصیلی معلومات دکھاتے ہیں  
-- **کامیابی کا پیغام** اکاؤنٹ بنانے میں کامیابی پر ظاہر ہوتا ہے  
-- **فارم خود بخود ری سیٹ ہوتا ہے** کامیاب سبمیشن کے بعد  
+**آپ کو کیا دیکھنا چاہیے:**
+- **لوڈنگ اسٹیٹ** جمع کرانے کے بٹن پر ظاہر ہوتا ہے
+- **کنسول لاگز** عمل کے بارے میں تفصیلی معلومات دکھاتے ہیں
+- **کامیابی کا پیغام** اکاؤنٹ کی تخلیق کامیاب ہونے پر ظاہر ہوتا ہے
+- **فارم خود بخود ری سیٹ ہوتا ہے** کامیاب جمع کرانے کے بعد
+
+> 🔒 **سیکیورٹی غور و فکر**: فی الحال، ڈیٹا HTTP پر سفر کرتا ہے، جو پروڈکشن کے لیے محفوظ نہیں ہے۔ حقیقی ایپلیکیشنز میں، ہمیشہ HTTPS استعمال کریں تاکہ ڈیٹا کی ترسیل کو انکرپٹ کیا جا سکے۔ مزید جانیں [HTTPS سیکیورٹی](https://en.wikipedia.org/wiki/HTTPS) کے بارے میں اور یہ صارف کے ڈیٹا کی حفاظت کے لیے کیوں ضروری ہے۔
+
+### 🔄 **تعلیمی جائزہ**
+**جدید جاوا اسکرپٹ انضمام**: غیر متزامن فارم ہینڈلنگ کی اپنی سمجھ کی تصدیق کریں:
+- ✅ `event.preventDefault()` ڈیفالٹ فارم کے رویے کو کیسے تبدیل کرتا ہے؟
+- ✅ FormData API دستی فیلڈ جمع کرنے سے زیادہ موثر کیوں ہے؟
+- ✅ async/await پیٹرنز کوڈ کی پڑھنے کی صلاحیت کو کیسے بہتر بناتے ہیں؟
+- ✅ خرابی ہینڈلنگ صارف کے تجربے میں کیا کردار ادا کرتی ہے؟
 
-> 🔒 **سیکیورٹی غور و فکر**: فی الحال، ڈیٹا HTTP کے ذریعے سفر کرتا ہے، جو پروڈکشن کے لیے محفوظ نہیں ہے۔ حقیقی ایپلیکیشنز میں ہمیشہ HTTPS استعمال کریں تاکہ ڈیٹا ٹرانسمیشن کو انکرپٹ کیا جا سکے۔ مزید جانیں [HTTPS سیکیورٹی](https://en.wikipedia.org/wiki/HTTPS) کے بارے میں اور یہ صارف کے ڈیٹا کی حفاظت کے لیے کیوں ضروری ہے۔  
+**سسٹم آرکیٹیکچر**: آپ کا فارم ہینڈلنگ ظاہر کرتا ہے:
+- **ایونٹ پر مبنی پروگرامنگ**: فارم صفحہ دوبارہ لوڈ کیے بغیر صارف کے اعمال کا جواب دیتے ہیں
+- **غیر متزامن مواصلت**: سرور کی درخواستیں صارف کے انٹرفیس کو بلاک نہیں کرتی ہیں
+- **خرابی ہینڈلنگ**: نیٹ ورک کی درخواستیں ناکام ہونے پر خوش اسلوبی سے کمی
+- **حالت کا انتظام**: UI اپ ڈیٹس سرور کے جوابات کو مناسب طریقے سے ظاہر کرتے ہیں
+- **ترقی پسند اضافہ**: بنیادی فعالیت کام کرتی ہے، جاوا اسکرپٹ اسے بڑھاتا ہے
 
-## جامع فارم کی توثیق  
+**پیشہ ورانہ پیٹرنز**: آپ نے نافذ کیا:
+- **واحد ذمہ داری**: فنکشنز کے واضح، مرکوز مقاصد ہیں
+- **خرابی کی حدود**: Try/catch بلاکس ایپلیکیشن کریش کو روکتے ہیں
+- **صارف تاثرات**: لوڈنگ اسٹیٹس اور کامیابی/خرابی کے پیغامات
+- **ڈیٹا کی تبدیلی**: FormData سے JSON سرور مواصلت کے لیے
 
-فارم کی توثیق اس مایوس کن تجربے کو روکتی ہے کہ غلطیاں صرف جمع کرانے کے بعد دریافت ہوں۔ جیسے انٹرنیشنل اسپیس اسٹیشن پر متعدد اضافی نظام، مؤثر توثیق حفاظتی چیکز کی متعدد تہوں کو استعمال کرتی ہے۔  
+## جامع فارم کی توثیق
 
-مثالی طریقہ کار فوری فیڈبیک کے لیے براؤزر لیول کی توثیق، بہتر صارف تجربے کے لیے جاوا اسکرپٹ کی توثیق، اور سیکیورٹی اور ڈیٹا کی سالمیت کے لیے سرور سائیڈ کی توثیق کو یکجا کرتا ہے۔ یہ اضافی نظام صارف کی اطمینان اور نظام کی حفاظت دونوں کو یقینی بناتا ہے۔  
+فارم کی توثیق اس مایوس کن تجربے کو روکتی ہے کہ غلطیاں صرف جمع کرانے کے بعد دریافت ہوتی ہیں۔ جیسے انٹرنیشنل اسپیس اسٹیشن پر متعدد اضافی نظام، مؤثر توثیق حفاظتی چیکوں کی متعدد تہوں کو استعمال کرتی ہے۔
 
-### توثیق کی تہوں کو سمجھنا  
+مثالی نقطہ نظر فوری تاثرات کے لیے براؤزر کی سطح کی توثیق، بہتر صارف کے تجربے کے لیے جاوا اسکرپٹ کی توثیق، اور سیکیورٹی اور ڈیٹا کی سالمیت کے لیے سرور کی طرف کی توثیق کو یکجا کرتا ہے۔ یہ اضافی نظام صارف کی اطمینان اور نظام کے تحفظ کو یقینی بناتا ہے۔
+
+### توثیق کی تہوں کو سمجھنا
 
 ```mermaid
 graph TD
@@ -472,28 +604,28 @@ graph TD
     C -->|Invalid| H[Custom Error Display]
     E -->|Invalid| I[Server Error Response]
 ```
-  
-**کثیر پرت توثیق کی حکمت عملی:**  
-- **HTML5 توثیق**: فوری براؤزر پر مبنی چیکز  
-- **جاوا اسکرپٹ توثیق**: حسب ضرورت منطق اور صارف کا تجربہ  
-- **سرور توثیق**: حتمی سیکیورٹی اور ڈیٹا کی سالمیت کے چیکز  
-- **ترقی پسند اضافہ**: کام کرتا ہے چاہے جاوا اسکرپٹ غیر فعال ہو  
 
-### HTML5 توثیق کی خصوصیات  
+**کثیر پرت توثیق کی حکمت عملی:**
+- **HTML5 توثیق**: فوری براؤزر پر مبنی چیک
+- **جاوا اسکرپٹ توثیق**: حسب ضرورت منطق اور صارف کا تجربہ
+- **سرور توثیق**: حتمی سیکیورٹی اور ڈیٹا کی سالمیت کے چیک
+- **ترقی پسند اضافہ**: کام کرتا ہے یہاں تک کہ اگر جاوا اسکرپٹ غیر فعال ہو
+
+### HTML5 توثیق کی خصوصیات
 
-**جدید توثیق کے اوزار آپ کے اختیار میں:**  
+**جدید توثیق کے اوزار آپ کے اختیار میں:**
 
-| خصوصیت | مقصد | مثال استعمال | براؤزر کا رویہ |  
-|-----------|---------|---------------|------------------|  
-| `required` | لازمی فیلڈز | `<input required>` | خالی سبمیشن کو روکتا ہے |  
-| `minlength`/`maxlength` | ٹیکسٹ کی لمبائی کی حدود | `<input maxlength="20">` | کردار کی حدود نافذ کرتا ہے |  
-| `min`/`max` | عددی حدود | `<input min="0" max="1000">` | نمبر کی حدود کی توثیق کرتا ہے |  
-| `pattern` | حسب ضرورت regex قواعد | `<input pattern="[A-Za-z]+">` | مخصوص فارمیٹس سے میل کھاتا ہے |  
-| `type` | ڈیٹا کی قسم کی توثیق | `<input type="email">` | فارمیٹ مخصوص توثیق |  
+| خصوصیت | مقصد | مثال استعمال | براؤزر کا رویہ |
+|-----------|---------|---------------|------------------|
+| `required` | لازمی فیلڈز | `<input required>` | خالی جمع کرانے کو روکتا ہے |
+| `minlength`/`maxlength` | متن کی لمبائی کی حدود | `<input maxlength="20">` | کردار کی حدود نافذ کرتا ہے |
+| `min`/`max` | عددی حدود | `<input min="0" max="1000">` | نمبر کی حدود کی توثیق کرتا ہے |
+| `pattern` | حسب ضرورت regex قواعد | `<input pattern="[A-Za-z]+">` | مخصوص فارمیٹس سے میل کھاتا ہے |
+| `type` | ڈیٹا کی قسم کی توثیق | `<input type="email">` | فارمیٹ مخصوص توثیق |
 
-### CSS توثیق اسٹائلنگ  
+### CSS توثیق اسٹائلنگ
 
-**توثیق کی حالتوں کے لیے بصری فیڈبیک بنائیں:**  
+**توثیق کی حالتوں کے لیے بصری تاثرات بنائیں:**
 
 ```css
 /* Valid input styling */
@@ -517,18 +649,18 @@ input:focus:invalid {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
 ```
-  
-**یہ بصری اشارے کیا حاصل کرتے ہیں:**  
-- **سبز بارڈرز**: کامیاب توثیق کی نشاندہی کرتے ہیں، جیسے مشن کنٹرول میں سبز روشنی  
-- **سرخ بارڈرز**: توثیق کی غلطیوں کی نشاندہی کرتے ہیں جن پر توجہ دینے کی ضرورت ہے  
-- **فوکس ہائی لائٹس**: موجودہ ان پٹ لوکیشن کے لیے واضح بصری سیاق و سباق فراہم کرتے ہیں  
-- **مستقل اسٹائلنگ**: پیش گوئی کے قابل انٹرفیس پیٹرنز قائم کرتے ہیں جنہیں صارفین سیکھ سکتے ہیں  
 
-> 💡 **پرو ٹپ**: `:valid` اور `:invalid` CSS پیسو کلاسز کا استعمال کریں تاکہ صارفین کے ٹائپ کرتے وقت فوری بصری فیڈبیک فراہم کیا جا سکے، ایک جوابدہ اور مددگار انٹرفیس بناتے ہوئے۔  
+**یہ بصری اشارے کیا حاصل کرتے ہیں:**
+- **سبز سرحدیں**: کامیاب توثیق کی نشاندہی کرتی ہیں، جیسے مشن کنٹرول میں سبز روشنی
+- **سرخ سرحدیں**: توثیق کی غلطیوں کی نشاندہی کرتی ہیں جن پر توجہ دینے کی ضرورت ہے
+- **فوکس ہائی لائٹس**: موجودہ ان پٹ مقام کے لیے واضح بصری سیاق و سباق فراہم کرتے ہیں
+- **مستقل اسٹائلنگ**: پیش گوئی کے قابل انٹرفیس پیٹرنز قائم کریں جنہیں صارفین سیکھ سکتے ہیں
+
+> 💡 **پرو ٹپ**: فوری بصری تاثرات فراہم کرنے کے لیے `:valid` اور `:invalid` CSS پیسڈو کلاسز کا استعمال کریں جیسے صارفین ٹائپ کرتے ہیں، ایک جوابدہ اور مددگار انٹرفیس بنائیں۔
 
-### جامع توثیق کو نافذ کرنا  
+### جامع توثیق کا نفاذ
 
-آئیے آپ کے رجسٹریشن فارم کو مضبوط توثیق کے ساتھ بہتر بنائیں جو بہترین صارف تجربہ اور ڈیٹا کوالٹی فراہم کرے:  
+آئیے آپ کے رجسٹریشن فارم کو مضبوط توثیق کے ساتھ بہتر بنائیں جو بہترین صارف کے تجربے اور ڈیٹا کے معیار فراہم کرتا ہے:
 
 ```html
 <form id="registerForm" method="POST" novalidate>
@@ -570,42 +702,42 @@ input:focus:invalid {
   <button type="submit">Create Account</button>
 </form>
 ```
-  
-**بہتر توثیق کو سمجھنا:**  
-- **لازمی فیلڈ انڈیکیٹرز کو مددگار وضاحتوں کے ساتھ یکجا کرتا ہے**  
-- **فارمیٹ کی توثیق کے لیے `pattern` خصوصیات شامل کرتا ہے**  
-- **رسائی اور ٹول ٹپس کے لیے `title` خصوصیات فراہم کرتا ہے**  
-- **مددگار متن شامل کرتا ہے تاکہ صارف کی ان پٹ کی رہنمائی کی جا سکے**  
-- **بہتر رسائی کے لیے سیمینٹک HTML اسٹرکچر استعمال کرتا ہے**  
 
-### اعلی درجے کی توثیق کے قواعد  
+**بہتر توثیق کو سمجھنا:**
+- **لازمی فیلڈ اشارے کو مددگار وضاحتوں کے ساتھ یکجا کرتا ہے**
+- **فارمیٹ کی توثیق کے لیے `pattern` خصوصیات شامل کرتا ہے**
+- **رسائی اور ٹول ٹپس کے لیے `title` خصوصیات فراہم کرتا ہے**
+- **صارف کے ان پٹ کی رہنمائی کے لیے مددگار متن شامل کرتا ہے**
+- **بہتر رسائی کے لیے سیمینٹک HTML ڈھانچہ استعمال کرتا ہے**
 
-**ہر توثیق کے اصول کیا حاصل کرتے ہیں:**  
+### اعلی درجے کی توثیق کے قواعد
 
-| فیلڈ | توثیق کے قواعد | صارف کا فائدہ |  
-|-------|------------------|--------------|  
-| یوزر نیم | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | درست، منفرد شناخت کنندگان کو یقینی بناتا ہے |  
-| کرنسی | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | عام کرنسی کے نشانات قبول کرتا ہے |  
-| بیلنس | `min="0"`, `step="0.01"`, `type="number"` | منفی بیلنس کو روکتا ہے |  
-| تفصیل | `maxlength="100"` | معقول لمبائی کی حدود |  
+**ہر توثیق کے اصول کیا حاصل کرتے ہیں:**
 
-### توثیق کے رویے کی جانچ  
+| فیلڈ | توثیق کے قواعد | صارف کا فائدہ |
+|-------|------------------|--------------|
+| صارف نام | `required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"` | درست، منفرد شناخت کنندگان کو یقینی بناتا ہے |
+| کرنسی | `required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"` | عام کرنسی کے نشانات قبول کرتا ہے |
+| بیلنس | `min="0"`, `step="0.01"`, `type="number"` | منفی بیلنس کو روکتا ہے |
+| تفصیل | `maxlength="100"` | معقول لمبائی کی حدود |
 
-**ان توثیق کے منظرنامے آزمائیں:**  
-1. **فارم جمع کریں** خالی لازمی فیلڈز کے ساتھ  
-2. **یوزر نیم درج کریں** 3 کرداروں سے کم  
-3. **یوزر نیم فیلڈ میں خاص کردار آزمائیں**  
-4. **منفی بیلنس کی رقم درج کریں**  
+### توثیق کے رویے کی جانچ
 
-![فارم جمع کرانے کی کوشش کرتے وقت توثیق کی غلطی دکھانے والا اسکرین شاٹ](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ur.png)  
+**ان توثیق کے منظرناموں کو آزمائیں:**
+1. **فارم جمع کرائیں** خالی لازمی فیلڈز کے ساتھ
+2. **صارف نام درج کریں** 3 حروف سے کم
+3. **صارف نام کے فیلڈ میں خصوصی کردار آزمائیں**
+4. **منفی بیلنس کی رقم درج کریں**
 
-**آپ کیا مشاہدہ کریں گے:**  
-- **براؤزر دکھاتا ہے** مقامی توثیق کے پیغامات  
-- **اسٹائلنگ میں تبدیلی** `:valid` اور `:invalid` ریاستوں کی بنیاد پر  
-- **فارم جمع کرانے سے روکا جاتا ہے** جب تک کہ تمام توثیق پاس نہ ہوں  
-- **فوکس خود بخود** پہلے غلط فیلڈ پر منتقل ہوتا ہے  
+![فارم جمع کرانے کی کوشش کرتے وقت توثیق کی خرابی دکھانے والا اسکرین شاٹ](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ur.png)
 
-### کلائنٹ سائیڈ بمقابلہ سرور سائیڈ توثیق  
+**آپ کیا مشاہدہ کریں گے:**
+- **براؤزر دکھاتا ہے** مقامی توثیق کے پیغامات
+- **اسٹائلنگ تبدیلیاں** `:valid` اور `:invalid` ریاستوں کی بنیاد پر
+- **فارم جمع کرانا** تمام توثیق پاس ہونے تک روکا جاتا ہے
+- **فوکس خود بخود** پہلے غلط فیلڈ پر منتقل ہوتا ہے
+
+### کلائنٹ سائیڈ بمقابلہ سرور سائیڈ توثیق
 
 ```mermaid
 graph LR
@@ -620,48 +752,125 @@ graph LR
     A -.-> I[Both Required]
     E -.-> I
 ```
-  
-**آپ کو دونوں تہوں کی ضرورت کیوں ہے:**  
-- **کلائنٹ سائیڈ توثیق**: فوری فیڈبیک فراہم کرتی ہے اور صارف کے تجربے کو بہتر بناتی ہے  
-- **سرور سائیڈ توثیق**: سیکیورٹی کو یقینی بناتی ہے اور پیچیدہ کاروباری اصولوں کو ہینڈل کرتی ہے  
-- **مشترکہ نقطہ نظر**: مضبوط، صارف دوست، اور محفوظ ایپلیکیشنز بناتا ہے  
-- **ترقی پسند اضافہ**: کام کرتا ہے چاہے جاوا اسکرپٹ غیر فعال ہو  
-
-> 🛡️ **سیکیورٹی یاد دہانی**: صرف کلائنٹ سائیڈ توثیق پر کبھی بھروسہ نہ کریں! بدنیتی پر مبنی صارفین کلائنٹ سائیڈ چیکز کو نظرانداز کر سکتے ہیں، اس لیے سرور سائیڈ توثیق سیکیورٹی اور ڈیٹا کی سالمیت کے لیے ضروری ہے۔  
 
----  
+**آپ کو دونوں تہوں کی ضرورت کیوں ہے:**
+- **کلائنٹ سائیڈ توثیق**: فوری تاثرات فراہم کرتی ہے اور صارف کے تجربے کو بہتر بناتی ہے
+- **سرور سائیڈ توثیق**: سیکیورٹی کو یقینی بناتی ہے اور پیچیدہ کاروباری اصولوں کو سنبھالتی ہے
+- **مشترکہ نقطہ نظر**: مضبوط، صارف دوست، اور محفوظ ایپلیکیشنز بناتا ہے
+- **ترقی پسند اضافہ**: کام کرتا ہے یہاں تک کہ جب جاوا اسکرپٹ غیر فعال ہو
+
+> 🛡️ **سیکیورٹی یاد دہانی**: کلائنٹ سائیڈ توثیق پر کبھی بھروسہ نہ کریں! بدنیتی پر مبنی صارفین کلائنٹ سائیڈ چیکوں کو نظرانداز کر سکتے ہیں، اس لیے سیکیورٹی اور ڈیٹا کی سالمیت کے لیے سرور سائیڈ توثیق ضروری ہے۔
+
+### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں**
+- [ ] اپنے فارم کو غلط ڈیٹا کے ساتھ آزمائیں تاکہ توثیق کے پیغامات دیکھ سکیں
+- [ ] HTML5 توثیق دیکھنے کے لیے جاوا اسکرپٹ کو غیر فعال کر کے فارم جمع کرانے کی کوشش کریں
+- [ ] براؤزر DevTools کھولیں اور سرور کو بھیجے گئے فارم ڈیٹا کا معائنہ کریں
+- [ ] مختلف ان پٹ اقسام کے ساتھ تجربہ کریں تاکہ موبائل کی بورڈ میں تبدیلیاں دیکھ سکیں
+
+### 🎯 **آپ اس گھنٹے میں کیا حاصل کر سکتے ہیں**
+- [ ] سبق کے بعد کا کوئز مکمل کریں اور فارم ہینڈلنگ کے تصورات کو سمجھیں
+- [ ] حقیقی وقت کے تاثرات کے ساتھ جامع توثیق کا چیلنج نافذ کریں
+- [ ] CSS اسٹائلنگ شامل کریں تاکہ پیشہ ورانہ نظر آنے والے فارم بن سکیں
+- [ ] ڈپلیکیٹ صارف ناموں اور سرور کی خرابیوں کے لیے خرابی ہینڈلنگ بنائیں
+- [ ] پاس ورڈ کی تصدیق کے فیلڈز شامل کریں جن میں مماثلت کی توثیق ہو
+
+### 📅 **آپ کا ہفتہ بھر کا فارم مہارت کا سفر**
+- [ ] جدید فارم کی خصوصیات کے ساتھ مکمل بینکنگ ایپ مکمل کریں
+- [ ] پروفائل تصاویر یا دستاویزات کے لیے فائل اپ لوڈ کی صلاحیتیں نافذ کریں
+- [ ] ترقی کے اشارے اور حالت کے انتظام کے ساتھ ملٹی اسٹیپ فارم شامل کریں
+- [ ] متحرک فارم بنائیں جو صارف کے انتخاب کی بنیاد پر اپناتے ہیں
+- [ ] بہتر صارف کے تجربے کے لیے فارم آٹو سیو اور ریکوری شامل کریں
+- [ ] ای میل کی تصدیق اور فون نمبر فارمیٹنگ جیسے اعلی درجے کی توثیق شامل کریں
+
+### 🌟 **آپ کا مہینہ بھر کا فرنٹ اینڈ ڈویلپمنٹ ماسٹری**
+- [ ] مشروط منطق اور ورک فلو کے ساتھ پیچیدہ فارم ایپلیکیشنز بنائیں
+- [ ] تیز رفتار ترقی کے لیے فارم لائبریریاں اور فریم ورک سیکھیں
+- [ ] رسائی کے رہنما خطوط اور جامع ڈیزائن اصولوں میں مہارت حاصل کریں
+- [ ] عالمی فارم کے لیے بین الاقوامی کاری اور مقامی کاری کو نافذ کریں
+- [ ] دوبارہ استعمال کے قابل فارم جزو لائبریریاں اور ڈیزائن سسٹمز بنائیں
+- [ ] اوپن سورس فارم پروجیکٹس میں تعاون کریں اور بہترین طریقے شیئر کریں
+
+## 🎯 آپ کا فارم ڈویلپمنٹ ماسٹری ٹائم لائن
 
----
-
-## GitHub Copilot Agent چیلنج 🚀  
+```mermaid
+timeline
+    title Form Development & User Experience Learning Progression
+    
+    section HTML Foundation (15 minutes)
+        Semantic Forms: Form elements
+                      : Input types
+                      : Labels and accessibility
+                      : Progressive enhancement
+        
+    section JavaScript Integration (25 minutes)
+        Event Handling: Form submission
+                      : Data collection
+                      : AJAX communication
+                      : Async/await patterns
+        
+    section Validation Systems (35 minutes)
+        Multi-layer Security: HTML5 validation
+                            : Client-side logic
+                            : Server-side verification
+                            : Error handling
+        
+    section User Experience (45 minutes)
+        Interface Polish: Loading states
+                        : Success messaging
+                        : Error recovery
+                        : Accessibility features
+        
+    section Advanced Patterns (1 week)
+        Professional Forms: Dynamic validation
+                          : Multi-step workflows
+                          : File uploads
+                          : Real-time feedback
+        
+    section Enterprise Skills (1 month)
+        Production Applications: Form libraries
+                               : Testing strategies
+                               : Performance optimization
+                               : Security best practices
+```
 
-Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:  
+### 🛠️ آپ کے فارم ڈویلپمنٹ ٹول کٹ کا خلاصہ
 
-**تفصیل:** رجسٹریشن فارم کو جامع کلائنٹ سائیڈ توثیق اور صارف فیڈبیک کے ساتھ بہتر بنائیں۔ یہ چیلنج فارم کی توثیق، ایرر ہینڈلنگ، اور انٹرایکٹو فیڈبیک کے ساتھ صارف کے تجربے کو بہتر بنانے کی مشق کرنے میں مدد کرے گا۔  
+اس سبق کو مکمل کرنے کے بعد، آپ نے مہارت حاصل کر لی ہے:
+- **HTML5 فارم**: سیمینٹک ڈھانچہ، انپٹ اقسام، اور رسائی کی خصوصیات
+- **جاوا اسکرپٹ فارم ہینڈلنگ**: ایونٹ مینجمنٹ، ڈیٹا جمع کرنا، اور AJAX مواصلت
+- **توثیق آرکیٹیکچر**: سیکیورٹی اور صارف کے تجربے کے لیے کثیر پرت توثیق
+- **غیر متزامن پروگرامنگ**: جدید Fetch API اور async/await پیٹرنز
+- **خرابی کا انتظام**: جامع خرابی ہینڈلنگ اور صارف تاثرات کے نظام
+- **صارف کے تجربے کا ڈیزائن**: لوڈنگ اسٹیٹس، کامیابی کے پیغامات، اور خرابی کی بازیابی
+- **ترقی پسند اضافہ**: تمام براؤزرز اور صلاحیتوں میں کام کرنے والے فارم
 
-**پرومپٹ:** رجسٹریشن فارم کے لیے ایک مکمل فارم توثیق کا نظام بنائیں جس میں شامل ہو: 1) ہر فیلڈ کے لیے حقیقی وقت کی توثیق کا فیڈبیک جیسے ہی صارف ٹائپ کرے، 2) کسٹم توثیق کے پیغامات جو ہر انپٹ فیلڈ کے نیچے ظاہر ہوں، 3) پاس ورڈ کی تصدیق کا فیلڈ جس میں مماثلت کی توثیق ہو، 4) بصری اشارے (جیسے درست فیلڈز کے لیے سبز چیک مارکس اور غلط فیلڈز کے لیے سرخ انتباہات)، 5) ایک سبمٹ بٹن جو صرف اس وقت فعال ہو جب تمام توثیق پاس ہو جائیں۔ HTML5 توثیق کی خصوصیات، CSS توثیق کی حالتوں کے لیے اسٹائلنگ، اور انٹرایکٹو رویے کے لیے جاوا اسکرپٹ کا استعمال کریں۔  
+**حقیقی دنیا کی ایپلیکیشنز**: آپ کی فارم ڈویلپمنٹ کی مہارتیں براہ راست لاگو ہوتی ہیں:
+- **ای کامرس ایپلیکیشنز**: چیک آؤٹ کے عمل، اکاؤنٹ رجسٹریشن، اور ادائیگی کے فارم
+- **انٹرپرائز سافٹ ویئر**: ڈیٹا انٹری سسٹمز، رپورٹنگ انٹرفیس، اور ورک فلو ایپلیکیشنز
+- **مواد کا انتظام**: پبلشنگ پلیٹ فارمز، صارف
+**پرامپٹ:** رجسٹریشن فارم کے لیے ایک مکمل فارم ویلیڈیشن سسٹم بنائیں جس میں شامل ہو: 1) ہر فیلڈ کے لیے حقیقی وقت میں ویلیڈیشن فیڈبیک جب صارف ٹائپ کرے، 2) ہر ان پٹ فیلڈ کے نیچے کسٹم ویلیڈیشن پیغامات ظاہر ہوں، 3) پاس ورڈ کی تصدیق کا فیلڈ جس میں مماثلت کی ویلیڈیشن ہو، 4) بصری اشارے (جیسے درست فیلڈز کے لیے سبز چیک مارکس اور غلط فیلڈز کے لیے سرخ انتباہات)، 5) ایک سبمٹ بٹن جو صرف اس وقت فعال ہو جب تمام ویلیڈیشنز پاس ہوں۔ HTML5 ویلیڈیشن ایٹریبیوٹس، CSS ویلیڈیشن اسٹیٹس کے لیے اسٹائلنگ، اور انٹرایکٹو بیہیویر کے لیے جاوا اسکرپٹ استعمال کریں۔
 
-مزید جانیں [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں یہاں۔  
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
 
-## 🚀 چیلنج  
+## 🚀 چیلنج
 
-HTML میں ایرر میسیج دکھائیں اگر صارف پہلے سے موجود ہو۔  
+اگر صارف پہلے سے موجود ہو تو HTML میں ایک ایرر میسج دکھائیں۔
 
-یہاں ایک مثال ہے کہ حتمی لاگ ان صفحہ تھوڑی سی اسٹائلنگ کے بعد کیسا نظر آ سکتا ہے:  
+یہاں ایک مثال ہے کہ CSS اسٹائلز شامل کرنے کے بعد حتمی لاگ ان صفحہ کیسا نظر آ سکتا ہے:
 
-![CSS اسٹائلز شامل کرنے کے بعد لاگ ان صفحہ کا اسکرین شاٹ](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ur.png)  
+![CSS اسٹائلز شامل کرنے کے بعد لاگ ان صفحہ کا اسکرین شاٹ](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ur.png)
 
-## لیکچر کے بعد کوئز  
+## لیکچر کے بعد کا کوئز
 
-[لیکچر کے بعد کوئز](https://ff-quizzes.netlify.app/web/quiz/44)  
+[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/44)
 
-## جائزہ اور خود مطالعہ  
+## جائزہ اور خود مطالعہ
 
-ڈیولپرز اپنے فارم بنانے کی کوششوں کے بارے میں بہت تخلیقی ہو گئے ہیں، خاص طور پر توثیق کی حکمت عملیوں کے حوالے سے۔ مختلف فارم فلو کے بارے میں جاننے کے لیے [CodePen](https://codepen.com) کو دیکھیں؛ کیا آپ کچھ دلچسپ اور متاثر کن فارم تلاش کر سکتے ہیں؟  
+ڈویلپرز فارم بنانے کی کوششوں میں بہت تخلیقی ہو گئے ہیں، خاص طور پر ویلیڈیشن حکمت عملیوں کے حوالے سے۔ مختلف فارم فلو کے بارے میں جاننے کے لیے [CodePen](https://codepen.com) دیکھیں؛ کیا آپ کچھ دلچسپ اور متاثر کن فارم تلاش کر سکتے ہیں؟
 
-## اسائنمنٹ  
+## اسائنمنٹ
 
-[اپنے بینک ایپ کو اسٹائل کریں](assignment.md)  
+[اپنے بینک ایپ کو اسٹائل کریں](assignment.md)
 
 ---
 
diff --git a/translations/ur/7-bank-project/3-data/README.md b/translations/ur/7-bank-project/3-data/README.md
index 049cbc17f4..c1a378803b 100644
--- a/translations/ur/7-bank-project/3-data/README.md
+++ b/translations/ur/7-bank-project/3-data/README.md
@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "2c1164912414820c8efd699b43f64954",
-  "translation_date": "2025-10-22T14:59:46+00:00",
+  "original_hash": "86ee5069f27ea3151389d8687c95fac9",
+  "translation_date": "2025-11-03T13:21:06+00:00",
   "source_file": "7-bank-project/3-data/README.md",
   "language_code": "ur"
 }
@@ -11,9 +11,62 @@ CO_OP_TRANSLATOR_METADATA:
 
 اسٹار ٹریک میں انٹرپرائز کے کمپیوٹر کے بارے میں سوچیں - جب کیپٹن پیکارڈ جہاز کی حالت کے بارے میں پوچھتے ہیں، تو معلومات فوراً ظاہر ہوتی ہیں بغیر پورے انٹرفیس کو بند کیے اور دوبارہ تعمیر کیے۔ معلومات کا یہ ہموار بہاؤ بالکل وہی ہے جو ہم یہاں متحرک ڈیٹا حاصل کرنے کے ساتھ بنا رہے ہیں۔
 
-اس وقت، آپ کی بینکنگ ایپ ایک چھپے ہوئے اخبار کی طرح ہے - معلوماتی لیکن جامد۔ ہم اسے ناسا کے مشن کنٹرول کی طرح کچھ میں تبدیل کرنے جا رہے ہیں، جہاں ڈیٹا مسلسل بہتا ہے اور حقیقی وقت میں اپ ڈیٹ ہوتا ہے بغیر صارف کے ورک فلو میں خلل ڈالے۔
+اس وقت، آپ کی بینکنگ ایپ ایک چھپی ہوئی اخبار کی طرح ہے - معلوماتی لیکن جامد۔ ہم اسے ناسا کے مشن کنٹرول کی طرح کچھ میں تبدیل کرنے جا رہے ہیں، جہاں ڈیٹا مسلسل بہتا ہے اور حقیقی وقت میں اپ ڈیٹ ہوتا ہے بغیر صارف کے ورک فلو میں خلل ڈالے۔
 
-آپ سیکھیں گے کہ سرورز کے ساتھ غیر متزامن طور پر کیسے بات چیت کی جائے، مختلف اوقات میں آنے والے ڈیٹا کو کیسے ہینڈل کیا جائے، اور خام معلومات کو صارفین کے لیے معنی خیز چیز میں کیسے تبدیل کیا جائے۔ یہ ایک ڈیمو اور پروڈکشن کے لیے تیار سافٹ ویئر کے درمیان فرق ہے۔
+آپ سیکھیں گے کہ سرورز کے ساتھ غیر متزامن طور پر کیسے بات چیت کی جائے، مختلف وقتوں پر پہنچنے والے ڈیٹا کو کیسے ہینڈل کیا جائے، اور خام معلومات کو صارفین کے لیے معنی خیز چیز میں کیسے تبدیل کیا جائے۔ یہ ایک ڈیمو اور پروڈکشن کے لیے تیار سافٹ ویئر کے درمیان فرق ہے۔
+
+## ⚡ اگلے 5 منٹ میں آپ کیا کر سکتے ہیں؟
+
+**مصروف ڈویلپرز کے لیے فوری آغاز کا راستہ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Set up API server]
+    B --> C[Test fetch with curl]
+    C --> D[Create login function]
+    D --> E[See data in action]
+```
+
+- **منٹ 1-2**: اپنا API سرور شروع کریں (`cd api && npm start`) اور کنکشن کو ٹیسٹ کریں
+- **منٹ 3**: `getAccount()` فنکشن کو fetch کے ذریعے بنائیں
+- **منٹ 4**: لاگ ان فارم کو `action="javascript:login()"` کے ساتھ جوڑیں
+- **منٹ 5**: لاگ ان کو ٹیسٹ کریں اور اکاؤنٹ ڈیٹا کو کنسول میں ظاہر ہوتا دیکھیں
+
+**فوری ٹیسٹ کمانڈز**:
+```bash
+# Verify API is running
+curl http://localhost:5000/api
+
+# Test account data fetch
+curl http://localhost:5000/api/accounts/test
+```
+
+**یہ کیوں اہم ہے**: 5 منٹ میں، آپ غیر متزامن ڈیٹا حاصل کرنے کا جادو دیکھیں گے جو ہر جدید ویب ایپلیکیشن کو طاقت دیتا ہے۔ یہ وہ بنیاد ہے جو ایپس کو جوابدہ اور زندہ محسوس کراتی ہے۔
+
+## 🗺️ ڈیٹا سے چلنے والی ویب ایپلیکیشنز کے ذریعے آپ کا سیکھنے کا سفر
+
+```mermaid
+journey
+    title From Static Pages to Dynamic Applications
+    section Understanding the Evolution
+      Traditional page reloads: 3: You
+      Discover AJAX/SPA benefits: 5: You
+      Master Fetch API patterns: 7: You
+    section Building Authentication
+      Create login functions: 4: You
+      Handle async operations: 6: You
+      Manage user sessions: 8: You
+    section Dynamic UI Updates
+      Learn DOM manipulation: 5: You
+      Build transaction displays: 7: You
+      Create responsive dashboards: 9: You
+    section Professional Patterns
+      Template-based rendering: 6: You
+      Error handling strategies: 7: You
+      Performance optimization: 8: You
+```
+
+**آپ کے سفر کا مقصد**: اس سبق کے اختتام تک، آپ سمجھ جائیں گے کہ جدید ویب ایپلیکیشنز ڈیٹا کو متحرک طور پر کیسے حاصل کرتی ہیں، پروسیس کرتی ہیں، اور ظاہر کرتی ہیں، پیشہ ورانہ ایپلیکیشنز سے توقع کی جانے والی ہموار صارف تجربات تخلیق کرتی ہیں۔
 
 ## لیکچر سے پہلے کا کوئز
 
@@ -23,9 +76,9 @@ CO_OP_TRANSLATOR_METADATA:
 
 ڈیٹا حاصل کرنے میں غوطہ لگانے سے پہلے، یقینی بنائیں کہ آپ کے پاس یہ اجزاء تیار ہیں:
 
-- **پچھلا سبق**: [لاگ ان اور رجسٹریشن فارم](../2-forms/README.md) مکمل کریں - ہم اس بنیاد پر تعمیر کریں گے۔
-- **لوکل سرور**: [Node.js](https://nodejs.org) انسٹال کریں اور [سرور API چلائیں](../api/README.md) تاکہ اکاؤنٹ ڈیٹا فراہم کیا جا سکے۔
-- **API کنکشن**: اپنے سرور کنکشن کو اس کمانڈ کے ساتھ ٹیسٹ کریں:
+- **پچھلا سبق**: [لاگ ان اور رجسٹریشن فارم](../2-forms/README.md) مکمل کریں - ہم اس بنیاد پر تعمیر کریں گے
+- **لوکل سرور**: [Node.js](https://nodejs.org) انسٹال کریں اور [سرور API چلائیں](../api/README.md) تاکہ اکاؤنٹ ڈیٹا فراہم کیا جا سکے
+- **API کنکشن**: اس کمانڈ کے ساتھ اپنے سرور کنکشن کو ٹیسٹ کریں:
 
 ```bash
 curl http://localhost:5000/api
@@ -33,21 +86,66 @@ curl http://localhost:5000/api
 ```
 
 یہ فوری ٹیسٹ یقینی بناتا ہے کہ تمام اجزاء صحیح طریقے سے بات چیت کر رہے ہیں:
-- تصدیق کرتا ہے کہ Node.js آپ کے سسٹم پر صحیح طریقے سے چل رہا ہے۔
-- اس بات کی تصدیق کرتا ہے کہ آپ کا API سرور فعال ہے اور جواب دے رہا ہے۔
-- اس بات کی توثیق کرتا ہے کہ آپ کی ایپ سرور تک پہنچ سکتی ہے (جیسے مشن سے پہلے ریڈیو رابطہ چیک کرنا)۔
+- تصدیق کرتا ہے کہ Node.js آپ کے سسٹم پر صحیح طریقے سے چل رہا ہے
+- آپ کے API سرور کے فعال اور جواب دینے کی تصدیق کرتا ہے
+- تصدیق کرتا ہے کہ آپ کی ایپ سرور تک پہنچ سکتی ہے (جیسے مشن سے پہلے ریڈیو رابطے کی جانچ)
+
+## 🧠 ڈیٹا مینجمنٹ ایکو سسٹم کا جائزہ
+
+```mermaid
+mindmap
+  root((Data Management))
+    Authentication Flow
+      Login Process
+        Form Validation
+        Credential Verification
+        Session Management
+      User State
+        Global Account Object
+        Navigation Guards
+        Error Handling
+    API Communication
+      Fetch Patterns
+        GET Requests
+        POST Requests
+        Error Responses
+      Data Formats
+        JSON Processing
+        URL Encoding
+        Response Parsing
+    Dynamic UI Updates
+      DOM Manipulation
+        Safe Text Updates
+        Element Creation
+        Template Cloning
+      User Experience
+        Real-time Updates
+        Error Messages
+        Loading States
+    Security Considerations
+      XSS Prevention
+        textContent Usage
+        Input Sanitization
+        Safe HTML Creation
+      CORS Handling
+        Cross-Origin Requests
+        Header Configuration
+        Development Setup
+```
+
+**بنیادی اصول**: جدید ویب ایپلیکیشنز ڈیٹا آرکسٹریشن سسٹمز ہیں - وہ صارف انٹرفیس، سرور APIs، اور براؤزر سیکیورٹی ماڈلز کے درمیان ہم آہنگی پیدا کرتے ہیں تاکہ ہموار، جوابدہ تجربات تخلیق کیے جا سکیں۔
 
 ---
 
 ## جدید ویب ایپس میں ڈیٹا حاصل کرنے کو سمجھنا
 
-ویب ایپلیکیشنز کے ڈیٹا کو ہینڈل کرنے کا طریقہ پچھلے دو دہائیوں میں ڈرامائی طور پر تبدیل ہوا ہے۔ اس ارتقاء کو سمجھنا آپ کو یہ سمجھنے میں مدد دے گا کہ جدید تکنیک جیسے AJAX اور Fetch API کیوں طاقتور ہیں اور کیوں وہ ویب ڈویلپرز کے لیے ضروری ٹولز بن چکے ہیں۔
+ویب ایپلیکیشنز کے ڈیٹا کو ہینڈل کرنے کا طریقہ گزشتہ دو دہائیوں میں ڈرامائی طور پر تبدیل ہوا ہے۔ اس ارتقاء کو سمجھنا آپ کو یہ سمجھنے میں مدد دے گا کہ جدید تکنیکیں جیسے AJAX اور Fetch API کیوں اتنی طاقتور ہیں اور کیوں وہ ویب ڈویلپرز کے لیے ضروری ٹولز بن چکی ہیں۔
 
-آئیے دریافت کریں کہ روایتی ویب سائٹس کیسے کام کرتی تھیں اس کے مقابلے میں ہم آج جو متحرک، جوابدہ ایپلیکیشنز بناتے ہیں۔
+آئیے دیکھتے ہیں کہ روایتی ویب سائٹس کیسے کام کرتی تھیں اور آج ہم جو متحرک، جوابدہ ایپلیکیشنز بناتے ہیں ان کے مقابلے میں۔
 
 ### روایتی ملٹی پیج ایپلیکیشنز (MPA)
 
-ویب کے ابتدائی دنوں میں، ہر کلک پرانے ٹیلی ویژن پر چینلز تبدیل کرنے جیسا تھا - اسکرین خالی ہو جاتی، پھر آہستہ آہستہ نئے مواد میں ٹیون ہو جاتی۔ یہ ابتدائی ویب ایپلیکیشنز کی حقیقت تھی، جہاں ہر تعامل کا مطلب پورے صفحے کو شروع سے دوبارہ تعمیر کرنا تھا۔
+ویب کے ابتدائی دنوں میں، ہر کلک ایک پرانے ٹیلی ویژن پر چینلز تبدیل کرنے جیسا تھا - اسکرین خالی ہو جاتی تھی، پھر آہستہ آہستہ نئے مواد میں ٹیون کرتی تھی۔ یہ ابتدائی ویب ایپلیکیشنز کی حقیقت تھی، جہاں ہر تعامل کا مطلب پورے صفحے کو شروع سے دوبارہ تعمیر کرنا تھا۔
 
 ```mermaid
 sequenceDiagram
@@ -65,14 +163,14 @@ sequenceDiagram
 ![ملٹی پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ur.png)
 
 **یہ طریقہ کیوں بھاری محسوس ہوتا تھا:**
-- ہر کلک کا مطلب پورے صفحے کو شروع سے دوبارہ تعمیر کرنا تھا۔
-- صارفین کو ان پریشان کن صفحہ فلیشز کے ذریعے سوچ کے درمیان میں خلل پڑتا تھا۔
-- آپ کا انٹرنیٹ کنکشن بار بار وہی ہیڈر اور فوٹر ڈاؤن لوڈ کرنے میں زیادہ کام کرتا تھا۔
-- ایپس زیادہ فائلنگ کابینہ کے ذریعے کلک کرنے جیسی محسوس ہوتی تھیں بجائے سافٹ ویئر استعمال کرنے کے۔
+- ہر کلک کا مطلب پورے صفحے کو شروع سے دوبارہ تعمیر کرنا تھا
+- صارفین کو ان پریشان کن صفحہ فلیشز کے ذریعے سوچ کے درمیان میں خلل پڑتا تھا
+- آپ کا انٹرنیٹ کنکشن بار بار وہی ہیڈر اور فوٹر ڈاؤن لوڈ کرنے میں زیادہ کام کرتا تھا
+- ایپس زیادہ فائلنگ کابینہ کے ذریعے کلک کرنے جیسی محسوس ہوتی تھیں بجائے سافٹ ویئر استعمال کرنے کے
 
 ### جدید سنگل پیج ایپلیکیشنز (SPA)
 
-AJAX (Asynchronous JavaScript and XML) نے اس پیراڈائم کو مکمل طور پر تبدیل کر دیا۔ جیسے انٹرنیشنل اسپیس اسٹیشن کا ماڈیولر ڈیزائن، جہاں خلا باز پورے ڈھانچے کو دوبارہ تعمیر کیے بغیر انفرادی اجزاء کو تبدیل کر سکتے ہیں، AJAX ہمیں ویب صفحہ کے مخصوص حصوں کو اپ ڈیٹ کرنے کی اجازت دیتا ہے بغیر سب کچھ دوبارہ لوڈ کیے۔ حالانکہ نام میں XML کا ذکر ہے، ہم آج زیادہ تر JSON استعمال کرتے ہیں، لیکن بنیادی اصول وہی رہتا ہے: صرف وہی اپ ڈیٹ کریں جسے تبدیل کرنے کی ضرورت ہے۔
+AJAX (Asynchronous JavaScript and XML) نے اس پیراڈائم کو مکمل طور پر تبدیل کر دیا۔ جیسے انٹرنیشنل اسپیس اسٹیشن کے ماڈیولر ڈیزائن میں، جہاں خلا باز پورے ڈھانچے کو دوبارہ تعمیر کیے بغیر انفرادی اجزاء کو تبدیل کر سکتے ہیں، AJAX ہمیں ویب پیج کے مخصوص حصوں کو اپ ڈیٹ کرنے کی اجازت دیتا ہے بغیر سب کچھ دوبارہ لوڈ کیے۔ XML کا ذکر ہونے کے باوجود، ہم آج زیادہ تر JSON استعمال کرتے ہیں، لیکن بنیادی اصول وہی رہتا ہے: صرف وہی اپ ڈیٹ کریں جو تبدیل کرنے کی ضرورت ہے۔
 
 ```mermaid
 sequenceDiagram
@@ -91,39 +189,39 @@ sequenceDiagram
 
 ![سنگل پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ur.png)
 
-**کیوں SPAs بہت بہتر محسوس ہوتے ہیں:**
+**SPA کیوں بہتر محسوس ہوتی ہیں:**
 - صرف وہ حصے جو واقعی تبدیل ہوئے ہیں اپ ڈیٹ ہوتے ہیں (سمارٹ، ہے نا؟)
-- مزید جھٹکے دار خلل نہیں - آپ کے صارفین اپنے بہاؤ میں رہتے ہیں۔
-- تار پر کم ڈیٹا سفر کرنے کا مطلب ہے تیز لوڈنگ۔
-- سب کچھ تیز اور جوابدہ محسوس ہوتا ہے، جیسے آپ کے فون پر ایپس۔
+- مزید جھٹکے دار خلل نہیں - آپ کے صارفین اپنی روانی میں رہتے ہیں
+- تار پر کم ڈیٹا سفر کرتا ہے جس کا مطلب ہے تیز لوڈنگ
+- سب کچھ تیز اور جوابدہ محسوس ہوتا ہے، جیسے آپ کے فون پر ایپس
 
 ### جدید Fetch API کی طرف ارتقاء
 
-جدید براؤزر [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) فراہم کرتے ہیں، جو پرانے [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) کی جگہ لیتا ہے۔ جیسے ٹیلی گراف چلانے اور ای میل استعمال کرنے کے درمیان فرق، Fetch API وعدوں کا استعمال کرتا ہے صاف غیر متزامن کوڈ کے لیے اور JSON کو قدرتی طور پر ہینڈل کرتا ہے۔
+جدید براؤزر [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) فراہم کرتے ہیں، جو پرانے [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) کی جگہ لیتا ہے۔ جیسے ٹیلی گراف چلانے اور ای میل استعمال کرنے کے فرق کے درمیان، Fetch API وعدوں کا استعمال کرتا ہے صاف غیر متزامن کوڈ کے لیے اور JSON کو قدرتی طور پر ہینڈل کرتا ہے۔
 
 | خصوصیت | XMLHttpRequest | Fetch API |
 |---------|----------------|----------|
 | **سینٹیکس** | پیچیدہ کال بیک پر مبنی | صاف وعدہ پر مبنی |
-| **JSON ہینڈلنگ** | دستی تجزیہ کی ضرورت | بلٹ ان `.json()` طریقہ |
-| **غلطی ہینڈلنگ** | محدود غلطی کی معلومات | جامع غلطی کی تفصیلات |
+| **JSON ہینڈلنگ** | دستی پارسنگ کی ضرورت | بلٹ ان `.json()` طریقہ |
+| **ایرر ہینڈلنگ** | محدود ایرر معلومات | جامع ایرر تفصیلات |
 | **جدید سپورٹ** | پرانی مطابقت | ES6+ وعدے اور async/await |
 
 > 💡 **براؤزر مطابقت**: اچھی خبر - Fetch API تمام جدید براؤزرز میں کام کرتا ہے! اگر آپ مخصوص ورژنز کے بارے میں متجسس ہیں، [caniuse.com](https://caniuse.com/fetch) کے پاس مکمل مطابقت کی کہانی ہے۔
 > 
 **خلاصہ:**
 - کروم، فائر فاکس، سفاری، اور ایج میں بہترین کام کرتا ہے (بنیادی طور پر جہاں آپ کے صارفین ہیں)
-- صرف انٹرنیٹ ایکسپلورر کو اضافی مدد کی ضرورت ہے (اور ایمانداری سے، IE کو جانے دینا وقت ہے)
-- آپ کو ان خوبصورت async/await پیٹرنز کے لیے بالکل تیار کرتا ہے جنہیں ہم بعد میں استعمال کریں گے۔
+- صرف انٹرنیٹ ایکسپلورر کو اضافی مدد کی ضرورت ہے (اور ایمانداری سے، اب وقت آ گیا ہے کہ IE کو الوداع کہا جائے)
+- آپ کو بعد میں استعمال ہونے والے خوبصورت async/await پیٹرنز کے لیے بالکل تیار کرتا ہے
 
-### صارف لاگ ان اور ڈیٹا حاصل کرنے کا نفاذ
+### صارف لاگ ان اور ڈیٹا کی بازیابی کو نافذ کرنا
 
-اب آئیے لاگ ان سسٹم کو نافذ کریں جو آپ کی بینکنگ ایپ کو جامد ڈسپلے سے فعال ایپلیکیشن میں تبدیل کرتا ہے۔ جیسے محفوظ فوجی سہولیات میں استعمال ہونے والے تصدیقی پروٹوکول، ہم صارف کی اسناد کی تصدیق کریں گے اور پھر ان کے مخصوص ڈیٹا تک رسائی فراہم کریں گے۔
+اب آئیے لاگ ان سسٹم کو نافذ کریں جو آپ کی بینکنگ ایپ کو جامد ڈسپلے سے ایک فعال ایپلیکیشن میں تبدیل کرتا ہے۔ جیسے محفوظ فوجی سہولیات میں استعمال ہونے والے تصدیقی پروٹوکول، ہم صارف کی اسناد کی تصدیق کریں گے اور پھر ان کے مخصوص ڈیٹا تک رسائی فراہم کریں گے۔
 
-ہم اسے بتدریج بنائیں گے، بنیادی تصدیق سے شروع کرتے ہوئے اور پھر ڈیٹا حاصل کرنے کی صلاحیتیں شامل کریں گے۔
+ہم اسے بتدریج بنائیں گے، بنیادی تصدیق سے شروع کرتے ہوئے اور پھر ڈیٹا حاصل کرنے کی صلاحیتوں کو شامل کریں گے۔
 
 #### مرحلہ 1: لاگ ان فنکشن کی بنیاد بنائیں
 
-اپنے `app.js` فائل کو کھولیں اور ایک نیا `login` فنکشن شامل کریں۔ یہ صارف کی تصدیق کے عمل کو ہینڈل کرے گا:
+اپنی `app.js` فائل کھولیں اور ایک نیا `login` فنکشن شامل کریں۔ یہ صارف کی تصدیق کے عمل کو ہینڈل کرے گا:
 
 ```javascript
 async function login() {
@@ -132,17 +230,17 @@ async function login() {
 }
 ```
 
-**آئیے اسے توڑتے ہیں:**
+**آئیے اسے توڑ کر دیکھتے ہیں:**
 - وہ `async` کلیدی لفظ؟ یہ جاوا اسکرپٹ کو بتا رہا ہے "ارے، اس فنکشن کو چیزوں کے انتظار کی ضرورت ہو سکتی ہے"
 - ہم اپنے صفحے سے فارم کو پکڑ رہے ہیں (کچھ خاص نہیں، بس اسے اس کے ID کے ذریعے تلاش کر رہے ہیں)
-- پھر ہم جو کچھ بھی صارف نے اپنا یوزر نیم کے طور پر ٹائپ کیا ہے اسے نکال رہے ہیں۔
+- پھر ہم جو کچھ بھی صارف نے اپنا یوزر نیم کے طور پر ٹائپ کیا ہے اسے نکال رہے ہیں
 - یہاں ایک زبردست چال ہے: آپ کسی بھی فارم ان پٹ کو اس کے `name` ایٹریبیوٹ کے ذریعے رسائی حاصل کر سکتے ہیں - اضافی getElementById کالز کی ضرورت نہیں!
 
-> 💡 **فارم رسائی کا پیٹرن**: ہر فارم کنٹرول کو اس کے نام (HTML میں `name` ایٹریبیوٹ کا استعمال کرتے ہوئے سیٹ کیا گیا) کے ذریعے فارم عنصر کی پراپرٹی کے طور پر رسائی حاصل کی جا سکتی ہے۔ یہ فارم ڈیٹا حاصل کرنے کا ایک صاف، قابل پڑھنے طریقہ فراہم کرتا ہے۔
+> 💡 **فارم رسائی کا پیٹرن**: ہر فارم کنٹرول کو اس کے نام (HTML میں `name` ایٹریبیوٹ کے ذریعے سیٹ کیا گیا) کے ذریعے فارم ایلیمنٹ کی پراپرٹی کے طور پر رسائی حاصل کی جا سکتی ہے۔ یہ فارم ڈیٹا حاصل کرنے کا ایک صاف، قابل پڑھائی طریقہ فراہم کرتا ہے۔
 
 #### مرحلہ 2: اکاؤنٹ ڈیٹا حاصل کرنے کا فنکشن بنائیں
 
-اگلے، ہم سرور سے اکاؤنٹ ڈیٹا حاصل کرنے کے لیے ایک مخصوص فنکشن بنائیں گے۔ یہ آپ کے رجسٹریشن فنکشن کے اسی پیٹرن کی پیروی کرتا ہے لیکن ڈیٹا حاصل کرنے پر مرکوز ہے:
+اگلے مرحلے میں، ہم سرور سے اکاؤنٹ ڈیٹا حاصل کرنے کے لیے ایک مخصوص فنکشن بنائیں گے۔ یہ آپ کے رجسٹریشن فنکشن کے جیسے ہی پیٹرن کی پیروی کرتا ہے لیکن ڈیٹا حاصل کرنے پر توجہ مرکوز کرتا ہے:
 
 ```javascript
 async function getAccount(user) {
@@ -156,36 +254,54 @@ async function getAccount(user) {
 ```
 
 **یہ کوڈ کیا حاصل کرتا ہے:**
-- **استعمال کرتا ہے** جدید `fetch` API ڈیٹا کو غیر متزامن طور پر درخواست کرنے کے لیے۔
-- **تعمیر کرتا ہے** GET درخواست URL یوزر نیم پیرامیٹر کے ساتھ۔
-- **لاگو کرتا ہے** `encodeURIComponent()` خاص کرداروں کو URLs میں محفوظ طریقے سے ہینڈل کرنے کے لیے۔
-- **تبدیل کرتا ہے** جواب کو JSON فارمیٹ میں آسان ڈیٹا ہیرا پھیری کے لیے۔
-- **ہینڈل کرتا ہے** غلطیوں کو خوبصورتی سے غلطی کے آبجیکٹ کو واپس کرکے بجائے کریش ہونے کے۔
+- **استعمال کرتا ہے** جدید `fetch` API کو ڈیٹا کو غیر متزامن طور پر درخواست کرنے کے لیے
+- **تشکیل دیتا ہے** ایک GET درخواست URL یوزر نیم پیرامیٹر کے ساتھ
+- **لاگو کرتا ہے** `encodeURIComponent()` خاص کرداروں کو URLs میں محفوظ طریقے سے ہینڈل کرنے کے لیے
+- **تبدیل کرتا ہے** جواب کو JSON فارمیٹ میں آسان ڈیٹا ہیرا پھیری کے لیے
+- **ایررز کو ہینڈل کرتا ہے** گریس فلی طور پر ایرر آبجیکٹ واپس کر کے بجائے کریش ہونے کے
 
-> ⚠️ **سیکیورٹی نوٹ**: `encodeURIComponent()` فنکشن URLs میں خاص کرداروں کو ہینڈل کرتا ہے۔ جیسے بحری مواصلات میں استعمال ہونے والے انکوڈنگ سسٹمز، یہ یقینی بناتا ہے کہ آپ کا پیغام بالکل اسی طرح پہنچے جیسا کہ ارادہ کیا گیا تھا، جیسے "#" یا "&" جیسے کرداروں کو غلط تشریح سے روکنا۔
+> ⚠️ **سیکیورٹی نوٹ**: `encodeURIComponent()` فنکشن URLs میں خاص کرداروں کو ہینڈل کرتا ہے۔ جیسے بحری مواصلات میں استعمال ہونے والے انکوڈنگ سسٹمز، یہ یقینی بناتا ہے کہ آپ کا پیغام بالکل اسی طرح پہنچے جیسا کہ ارادہ کیا گیا تھا، "#" یا "&" جیسے کرداروں کو غلط تشریح سے روکنا۔
 > 
 **یہ کیوں اہم ہے:**
-- خاص کرداروں کو URLs کو توڑنے سے روکتا ہے۔
-- URL ہیرا پھیری کے حملوں سے بچاتا ہے۔
-- یقینی بناتا ہے کہ آپ کا سرور مطلوبہ ڈیٹا وصول کرے۔
-- محفوظ کوڈنگ کے طریقوں کی پیروی کرتا ہے۔
+- خاص کرداروں کو URLs کو توڑنے سے روکتا ہے
+- URL ہیرا پھیری کے حملوں سے بچاتا ہے
+- یقینی بناتا ہے کہ آپ کا سرور مطلوبہ ڈیٹا وصول کرے
+- محفوظ کوڈنگ کے طریقوں کی پیروی کرتا ہے
 
 #### HTTP GET درخواستوں کو سمجھنا
 
-یہ آپ کو حیران کر سکتا ہے: جب آپ `fetch` کو بغیر کسی اضافی آپشن کے استعمال کرتے ہیں، تو یہ خود بخود [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) درخواست بناتا ہے۔ یہ اس کے لیے بہترین ہے جو ہم کر رہے ہیں - سرور سے پوچھنا "ارے، کیا میں اس صارف کے اکاؤنٹ ڈیٹا کو دیکھ سکتا ہوں؟"
+یہ آپ کو حیران کر سکتا ہے: جب آپ `fetch` کو بغیر کسی اضافی آپشنز کے استعمال کرتے ہیں، تو یہ خود بخود ایک [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) درخواست بناتا ہے۔ یہ اس کے لیے بہترین ہے جو ہم کر رہے ہیں - سرور سے پوچھنا "ارے، کیا میں اس صارف کے اکاؤنٹ ڈیٹا کو دیکھ سکتا ہوں؟"
 
 GET درخواستوں کے بارے میں سوچیں جیسے لائبریری سے کتاب ادھار لینے کے لیے شائستگی سے پوچھنا - آپ موجودہ چیز کو دیکھنے کی درخواست کر رہے ہیں۔ POST درخواستیں (جو ہم نے رجسٹریشن کے لیے استعمال کیں) زیادہ نئی کتاب جمع کرانے جیسی ہیں تاکہ مجموعہ میں شامل کی جا سکے۔
 
 | GET درخواست | POST درخواست |
 |-------------|-------------|
 | **مقصد** | موجودہ ڈیٹا حاصل کریں | سرور کو نیا ڈیٹا بھیجیں |
-| **پیرامیٹرز** | URL راستہ/کوئری سٹرنگ میں | درخواست کے جسم میں |
-| **کیچنگ** | براؤزرز کے ذریعے کیچ کیا جا سکتا ہے | عام طور پر کیچ نہیں کیا جاتا |
-| **سیکیورٹی** | URL/لاگز میں نظر آتا ہے | درخواست کے جسم میں چھپا ہوا |
+| **پیرامیٹرز** | URL پاتھ/کوئری سٹرنگ میں | درخواست کے باڈی میں |
+| **کیچنگ** | براؤزرز کے ذریعے کیچ ہو سکتی ہے | عام طور پر کیچ نہیں ہوتی |
+| **سیکیورٹی** | URL/لاگز میں نظر آتی ہے | درخواست کے باڈی میں چھپی ہوتی ہے |
+
+```mermaid
+sequenceDiagram
+    participant B as Browser
+    participant S as Server
+    
+    Note over B,S: GET Request (Data Retrieval)
+    B->>S: GET /api/accounts/test
+    S-->>B: 200 OK + Account Data
+    
+    Note over B,S: POST Request (Data Submission)
+    B->>S: POST /api/accounts + New Account Data
+    S-->>B: 201 Created + Confirmation
+    
+    Note over B,S: Error Handling
+    B->>S: GET /api/accounts/nonexistent
+    S-->>B: 404 Not Found + Error Message
+```
 
 #### مرحلہ 3: سب کچھ ایک ساتھ لانا
 
-اب اطمینان بخش حصہ - آئیے آپ کے اکاؤنٹ حاصل کرنے کے فنکشن کو لاگ ان عمل سے جوڑتے ہیں۔ یہ وہ جگہ ہے جہاں سب کچھ اپنی جگہ پر آتا ہے:
+اب سب سے اطمینان بخش حصہ - آئیے اپنے اکاؤنٹ حاصل کرنے کے فنکشن کو لاگ ان کے عمل سے جوڑتے ہیں۔ یہ وہ جگہ ہے جہاں سب کچھ اپنی جگہ پر آتا ہے:
 
 ```javascript
 async function login() {
@@ -203,16 +319,16 @@ async function login() {
 ```
 
 یہ فنکشن ایک واضح ترتیب کی پیروی کرتا ہے:
-- فارم ان پٹ سے یوزر نیم نکالیں۔
-- سرور سے صارف کے اکاؤنٹ ڈیٹا کی درخواست کریں۔
-- عمل کے دوران ہونے والی کسی بھی غلطی کو ہینڈل کریں۔
-- اکاؤنٹ ڈیٹا کو اسٹور کریں اور کامیابی پر ڈیش بورڈ پر جائیں۔
+- فارم ان پٹ سے یوزر نیم نکالیں
+- سرور سے صارف کے اکاؤنٹ ڈیٹا کی درخواست کریں
+- عمل کے دوران ہونے والے کسی بھی ایرر کو ہینڈل کریں
+- اکاؤنٹ ڈیٹا کو اسٹور کریں اور کامیابی پر ڈیش بورڈ پر جائیں
 
-> 🎯 **Async/Await پیٹرن**: چونکہ `getAccount` ایک غیر متزامن فنکشن ہے، ہم `await` کلیدی لفظ استعمال کرتے ہیں تاکہ عمل کو اس وقت تک روک دیا جائے جب تک کہ سرور جواب نہ دے۔ یہ کوڈ کو غیر متعین ڈیٹا کے ساتھ جاری رکھنے سے روکتا ہے۔
+> 🎯 **Async/Await پیٹرن**: چونکہ `getAccount` ایک غیر متزامن فنکشن ہے، ہم `await` کلیدی لفظ استعمال کرتے ہیں تاکہ سرور کے جواب تک عمل کو روک سکیں۔ یہ کوڈ کو غیر متعین ڈیٹا کے ساتھ جاری رکھنے سے روکتا ہے۔
 
-#### مرحلہ 4: آپ کے ڈیٹا کے لیے ایک گھر بنانا
+#### مرحلہ 4: اپنے ڈیٹا کے لیے ایک گھر بنانا
 
-آپ کی ایپ کو کہیں نہ کہیں اکاؤنٹ کی معلومات کو یاد رکھنے کی ضرورت ہے جب یہ لوڈ ہو جائے۔ اس کے بارے میں سوچیں جیسے آپ کی ایپ کی قلیل مدتی یادداشت - موجودہ صارف کے ڈیٹا کو آسانی سے رکھنے کی جگہ۔ اپنے `app.js` فائل کے اوپر یہ لائن شامل کریں:
+آپ کی ایپ کو کہیں اکاؤنٹ کی معلومات کو یاد رکھنے کی ضرورت ہے جب یہ لوڈ ہو جائے۔ اس کے بارے میں سوچیں جیسے آپ کی ایپ کی قلیل مدتی یادداشت - موجودہ صارف کے ڈیٹا کو آسانی سے رکھنے کی جگہ۔ اپنی `app.js` فائل کے اوپر یہ لائن شامل کریں:
 
 ```javascript
 // This holds the current user's account data
@@ -220,14 +336,14 @@ let account = null;
 ```
 
 **ہمیں اس کی ضرورت کیوں ہے:**
-- اکاؤنٹ ڈیٹا کو آپ کی ایپ کے کسی بھی جگہ سے قابل رسائی رکھتا ہے۔
-- `null` کے ساتھ شروع کرنا مطلب ہے "ابھی تک کوئی لاگ ان نہیں ہوا ہے"
-- جب کوئی کامیابی سے لاگ ان یا رجسٹر کرتا ہے تو اپ ڈیٹ ہو جاتا ہے۔
-- سچائی کا واحد ذریعہ کی طرح کام کرتا ہے - اس بات پر کوئی الجھن نہیں کہ کون لاگ ان ہے۔
+- اکاؤنٹ ڈیٹا کو آپ کی ایپ کے کسی بھی جگہ سے قابل رسائی رکھتا ہے
+- `null` کے ساتھ شروع کرنا مطلب ہے "ابھی تک کوئی لاگ ان نہیں ہوا"
+- جب کوئی کامیابی سے لاگ ان یا رجسٹر کرتا ہے تو اپ ڈیٹ ہوتا ہے
+- سچائی کا واحد ذریعہ کے طور پر کام کرتا ہے - لاگ ان ہونے والے شخص کے بارے میں کوئی الجھن نہیں
 
-#### مرحلہ 5: اپنے فارم کو وائر کریں
+#### مرحلہ 5: اپنے فارم کو جوڑیں
 
-اب آئیے آپ کے چمکدار نئے لاگ ان فنکشن کو آپ کے HTML فارم سے جوڑتے ہیں۔ اپنے فارم ٹیگ کو اس طرح اپ ڈیٹ کریں:
+اب آئیے اپنے نئے چمکدار لاگ ان فنکشن کو اپنے HTML فارم سے جوڑتے ہیں۔ اپنے فارم ٹیگ کو اس طرح اپ ڈیٹ کریں:
 
 ```html
 <form id="loginForm" action="javascript:login()">
@@ -235,15 +351,15 @@ let account = null;
 </form>
 ```
 
-**یہ چھوٹی سی تبدیلی کیا کرتی ہے:**
-- فارم کو اس کے ڈیفالٹ "پورے صفحے کو دوبارہ لوڈ کریں" رویے کو روک دیتی ہے۔
-- آپ کے کسٹم جاوا اسکرپٹ فنکشن کو کال کرتی ہے۔
-- سب کچھ ہموار اور سنگل پیج ایپ جیسا رکھتی ہے۔
-- صارفین کے "لاگ ان" دبانے پر کیا ہوتا ہے اس پر آپ کو مکمل کنٹرول دیتی ہے۔
+**یہ چھوٹی تبدیلی کیا کرتی ہے:**
+- فارم کو اس کے ڈیفالٹ "پورے صفحے کو دوبارہ لوڈ کریں" رویے سے روکتی ہے
+- آپ کے کسٹم جاوا اسکرپٹ فنکشن کو کال کرتی ہے
+- سب کچھ ہموار اور سنگل پیج ایپ جیسا رکھتی ہے
+- صارفین کے "لاگ ان" دبانے پر کیا ہوتا ہے اس پر مکمل کنٹرول دیتی ہے
 
 #### مرحلہ 6: اپنے رجسٹریشن فنکشن کو بہتر بنائیں
 
-مطابقت کے لیے، اپنے `register` فنکشن کو بھی اپ ڈیٹ کریں تاکہ اکاؤنٹ ڈیٹا کو اسٹور کریں اور ڈیش بورڈ پر جائیں:
+تسلسل کے لیے، اپنے `register` فنکشن کو بھی اپ ڈیٹ کریں تاکہ اکاؤنٹ ڈیٹا کو اسٹور کرے اور ڈیش بورڈ پر جائے:
 
 ```javascript
 // Add these lines at the end of your register function
@@ -252,11 +368,11 @@ navigate('/dashboard');
 ```
 
 **یہ بہتری فراہم کرتی ہے:**
-- **ہموار** رجسٹریشن سے ڈیش بورڈ تک منتقلی۔
-- **مطابقت پذیر** صارف کے تجربے کو لاگ ان اور رجسٹریشن کے بہاؤ کے درمیان۔
-- **فوری** کامیاب رجسٹریشن کے بعد اکاؤنٹ ڈیٹا تک رسائی۔
+- **ہموار** رجسٹریشن سے ڈیش بورڈ تک منتقلی
+- **مطابقت پذیر** صارف تجربہ لاگ ان اور رجسٹریشن کے بہاؤ کے درمیان
+- **فوری** کامیاب رجسٹریشن کے بعد اکاؤنٹ ڈیٹا تک رسائی
 
-#### اپنے نفاذ کی جانچ
+#### اپنی عملدرآمد کی جانچ کرنا
 
 ```mermaid
 flowchart TD
@@ -270,33 +386,46 @@ flowchart TD
 ```
 
 **اب اسے آزمائیں:**
-1. یہ یقینی بنانے کے لیے ایک نیا اکاؤنٹ بنائیں کہ سب کچھ کام کر رہا ہے۔
-2. انہی اسناد کے ساتھ لاگ ان کرنے کی کوشش کریں۔
-3. اگر کچھ غلط لگے تو اپنے براؤزر کے کنسول (F12) پر جھانکیں۔
-4. کامیاب لاگ ان کے بعد ڈیش بورڈ پر پہنچنے کو یقینی بنائیں۔
+1. نیا اکاؤنٹ بنائیں تاکہ یہ یقینی بنایا جا سکے کہ سب کچھ کام کر رہا ہے
+2. انہی اسناد کے ساتھ لاگ ان کرنے کی کوشش کریں
+3. اگر کچھ غلط لگے تو اپنے براؤزر کے کنسول (F12) پر جھانکیں
+4. کامیاب لاگ ان کے بعد ڈیش بورڈ پر پہنچنے کو یقینی بنائیں
 
 اگر کچھ کام نہیں کر رہا ہے، تو گھبرائیں نہیں! زیادہ تر مسائل آسان اصلاحات ہیں جیسے ٹائپوز یا API سرور شروع کرنا بھول جانا۔
 
 #### کراس-اورجن جادو کے بارے میں ایک مختصر بات
 
-آپ سوچ رہے ہوں گے: "میری ویب ایپ اس API سرور سے کیسے بات کر رہی ہے جب وہ مختلف پورٹس پر چل رہے ہیں؟" زبردست سوال! یہ ایسی چیز کو چھوتا ہے جس کا ہر ویب ڈویلپر آخرکار سامنا کرتا ہے۔
+آپ سوچ رہے ہوں گے: "میری ویب ایپ اس API سرور سے کیسے بات کر رہی ہے جب وہ مختلف پورٹس پر چل رہے ہیں؟" زبرد
+ڈوم مینپولیشن وہ تکنیک ہے جو جامد ویب صفحات کو متحرک ایپلیکیشنز میں تبدیل کرتی ہے، جو صارف کی تعاملات اور سرور کے جوابات کی بنیاد پر اپنے مواد کو اپ ڈیٹ کرتی ہیں۔
 
-> 🔒 **کراس-اورجن سیکیورٹی**: براؤزرز "سیم-اورجن پالیسی" نافذ کرتے ہیں تاکہ مختلف ڈومینز کے درمیان غیر مجاز مواصلات کو روکا جا سکے۔ جیسے پینٹاگون میں چیک پوائنٹ سسٹم، وہ ڈیٹا ٹرانسفر کی اجازت دینے سے پہلے مواصلات کی تصدیق کرتے ہیں۔
-> 
-**ہمارے سیٹ اپ میں:**
-- آپ کی ویب ایپ `localhost:3000` پر چلتی ہے (ڈیولپمنٹ سرور)
-- آپ کا API سرور `localhost:5000` پر چلتا ہے (بیک اینڈ سرور)
-- API سرور میں [CORS ہیڈرز](https://developer.mozilla.org/docs/Web/HTTP/CORS) شامل ہیں جو آپ کی ویب ایپ سے مواصلات کی واضح طور پر اجازت دیتے ہیں۔
+### کام کے لیے صحیح ٹول کا انتخاب
 
-یہ ترتیب حقیقی دنیا کی ترقی کی عکاسی کرتی ہے جہاں فرنٹ اینڈ اور بیک اینڈ ایپلیکیشنز عام طور پر الگ الگ سرورز پر چلتی ہیں۔
+جب جاوا اسکرپٹ کے ذریعے اپنے HTML کو اپ ڈیٹ کرنے کی بات آتی ہے، تو آپ کے پاس کئی اختیارات ہوتے ہیں۔ ان کو ایک ٹول باکس میں مختلف ٹولز کی طرح سمجھیں - ہر ایک مخصوص کام کے لیے بہترین ہے:
 
-> 📚 **مزید سیکھیں**: APIs اور ڈیٹا حاصل کرنے کے بارے میں مزید گہرائی سے جاننے کے لیے یہ جامع [Microsoft Learn ماڈیول](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) دیکھیں۔
+| طریقہ | کس کے لیے بہترین ہے | کب استعمال کریں | حفاظت کی سطح |
+|-------|---------------------|------------------|--------------|
+| `textContent` | صارف کے ڈیٹا کو محفوظ طریقے سے دکھانا | جب بھی آپ متن دکھا رہے ہوں | ✅ بالکل محفوظ |
+| `createElement()` + `append()` | پیچیدہ لے آؤٹ بنانا | نئے سیکشنز/لسٹ بنانا | ✅ انتہائی محفوظ |
+| `innerHTML` | HTML مواد سیٹ کرنا | ⚠️ اس سے بچنے کی کوشش کریں | ❌ خطرناک کام |
 
-## آپ کے ڈیٹا کو HTML میں زندہ کرنا
+#### متن کو محفوظ طریقے سے دکھانے کا طریقہ: textContent
 
-اب ہم حاصل کردہ ڈیٹا کو DOM ہیرا پھیری کے ذریعے صارفین کے لیے مرئی بنائیں گے۔ جیسے ایک تاریک کمرے میں فوٹوگراف تیار کرنے کا عمل، ہم پوشیدہ ڈیٹا لے رہے ہیں اور اسے کچھ ایسا پیش کر رہے ہیں جسے صارفین دیکھ اور تعامل کر سکیں۔
+[`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) پراپرٹی آپ کا بہترین دوست ہے جب صارف کے ڈیٹا کو دکھانے کی بات ہو۔ یہ آپ کے ویب صفحے کے لیے ایک محافظ کی طرح ہے - کوئی نقصان دہ چیز اندر نہیں آتی:
+
+```javascript
+// The safe, reliable way to update text
+const balanceElement = document.getElementById('balance');
+balanceElement.textContent = account.balance;
+```
+
+**textContent کے فوائد:**
+- ہر چیز کو سادہ متن کے طور پر لیتا ہے (اسکرپٹ کے عمل کو روکتا ہے)
+- موجودہ مواد کو خود بخود صاف کرتا ہے
+- سادہ متن اپ ڈیٹس کے لیے مؤثر
+- نقصان دہ مواد کے خلاف بلٹ ان سیکیورٹی فراہم کرتا ہے
+
+#### متحرک HTML عناصر بنانا
 
-DOM ہیرا پھیری وہ تکنیک ہے جو جامد ویب صفحات کو متحرک ایپلیکیشنز میں تبدیل
 زیادہ پیچیدہ مواد کے لیے، [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) کو [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) کے ساتھ ملا کر استعمال کریں:
 
 ```javascript
@@ -307,13 +436,13 @@ transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
 container.append(transactionItem);
 ```
 
-**اس طریقہ کو سمجھنا:**
-- **نئے** DOM عناصر کو پروگرام کے ذریعے تخلیق کرتا ہے
+**اس طریقے کو سمجھنا:**
+- **پروگرام کے ذریعے** نئے ڈوم عناصر بناتا ہے
 - **عنصر کی خصوصیات اور مواد** پر مکمل کنٹرول برقرار رکھتا ہے
-- **پیچیدہ، nested عنصر ڈھانچے** کی اجازت دیتا ہے
-- **سیکیورٹی کو محفوظ رکھتا ہے** مواد کو ساخت سے الگ کر کے
+- **پیچیدہ، گھنے عنصر کے ڈھانچے** کی اجازت دیتا ہے
+- **سیکیورٹی کو برقرار رکھتا ہے** ساخت کو مواد سے الگ کر کے
 
-> ⚠️ **سیکیورٹی پر غور کریں**: اگرچہ [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) بہت سے ٹیوٹوریلز میں ظاہر ہوتا ہے، یہ embedded scripts کو چلا سکتا ہے۔ جیسے CERN کے سیکیورٹی پروٹوکول غیر مجاز کوڈ کے نفاذ کو روکتے ہیں، `textContent` اور `createElement` کا استعمال محفوظ متبادل فراہم کرتا ہے۔
+> ⚠️ **سیکیورٹی پر غور کریں**: حالانکہ [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) بہت سے ٹیوٹوریلز میں ظاہر ہوتا ہے، یہ شامل اسکرپٹس کو چلا سکتا ہے۔ جیسے CERN کے سیکیورٹی پروٹوکول غیر مجاز کوڈ کے عمل کو روکنے کے لیے کام کرتے ہیں، `textContent` اور `createElement` کا استعمال محفوظ متبادل فراہم کرتا ہے۔
 > 
 **innerHTML کے خطرات:**
 - صارف کے ڈیٹا میں موجود کسی بھی `<script>` ٹیگ کو چلاتا ہے
@@ -323,13 +452,13 @@ container.append(transactionItem);
 
 ### غلطیوں کو صارف کے لیے دوستانہ بنانا
 
-فی الحال، لاگ ان کی غلطیاں صرف براؤزر کنسول میں ظاہر ہوتی ہیں، جو صارفین کے لیے نظر نہیں آتی۔ جیسے ایک پائلٹ کے اندرونی تشخیصی نظام اور مسافر معلوماتی نظام کے درمیان فرق ہوتا ہے، ہمیں اہم معلومات کو مناسب چینل کے ذریعے پہنچانا ہوگا۔
+فی الحال، لاگ ان کی غلطیاں صرف براؤزر کنسول میں ظاہر ہوتی ہیں، جو صارفین کے لیے نظر نہیں آتی۔ جیسے ایک پائلٹ کے اندرونی تشخیصی نظام اور مسافروں کے معلوماتی نظام کے درمیان فرق ہوتا ہے، ہمیں اہم معلومات کو مناسب چینل کے ذریعے پہنچانے کی ضرورت ہے۔
 
-نظر آنے والے غلطی کے پیغامات کو نافذ کرنا صارفین کو فوری طور پر بتاتا ہے کہ کیا غلط ہوا اور آگے کیسے بڑھنا ہے۔
+نظر آنے والے غلطی کے پیغامات کو نافذ کرنا صارفین کو فوری طور پر یہ بتانے میں مدد فراہم کرتا ہے کہ کیا غلط ہوا اور آگے کیسے بڑھنا ہے۔
 
 #### مرحلہ 1: غلطی کے پیغامات کے لیے جگہ شامل کریں
 
-سب سے پہلے، اپنے HTML میں غلطی کے پیغامات کے لیے جگہ دیں۔ اسے اپنے لاگ ان بٹن سے پہلے شامل کریں تاکہ صارفین اسے قدرتی طور پر دیکھ سکیں:
+سب سے پہلے، اپنے HTML میں غلطی کے پیغامات کے لیے جگہ بنائیں۔ اسے اپنے لاگ ان بٹن سے پہلے شامل کریں تاکہ صارفین اسے قدرتی طور پر دیکھ سکیں:
 
 ```html
 <!-- This is where error messages will appear -->
@@ -338,14 +467,14 @@ container.append(transactionItem);
 ```
 
 **یہاں کیا ہو رہا ہے:**
-- ہم ایک خالی کنٹینر بنا رہے ہیں جو ضرورت پڑنے تک پوشیدہ رہتا ہے
+- ہم ایک خالی کنٹینر بنا رہے ہیں جو ضرورت پڑنے تک نظر نہیں آتا
 - یہ وہاں رکھا گیا ہے جہاں صارفین "لاگ ان" پر کلک کرنے کے بعد قدرتی طور پر دیکھتے ہیں
-- وہ `role="alert"` اسکرین ریڈرز کے لیے ایک اچھا اضافہ ہے - یہ معاون ٹیکنالوجی کو بتاتا ہے "یہ اہم ہے!"
-- منفرد `id` ہمارے جاوا اسکرپٹ کو آسان ہدف فراہم کرتا ہے
+- وہ `role="alert"` اسکرین ریڈرز کے لیے ایک اچھا اضافہ ہے - یہ معاون ٹیکنالوجی کو بتاتا ہے "ارے، یہ اہم ہے!"
+- منفرد `id` ہمارے جاوا اسکرپٹ کو ایک آسان ہدف فراہم کرتا ہے
 
 #### مرحلہ 2: ایک مددگار فنکشن بنائیں
 
-آئیے ایک چھوٹا سا utility function بناتے ہیں جو کسی بھی عنصر کے متن کو اپ ڈیٹ کر سکتا ہے۔ یہ ان "ایک بار لکھیں، ہر جگہ استعمال کریں" فنکشنز میں سے ایک ہوگا جو آپ کا وقت بچائے گا:
+آئیے ایک چھوٹا سا یوٹیلیٹی فنکشن بناتے ہیں جو کسی بھی عنصر کے متن کو اپ ڈیٹ کر سکتا ہے۔ یہ ان "ایک بار لکھیں، ہر جگہ استعمال کریں" فنکشنز میں سے ایک ہے جو آپ کا وقت بچائے گا:
 
 ```javascript
 function updateElement(id, text) {
@@ -355,14 +484,14 @@ function updateElement(id, text) {
 ```
 
 **فنکشن کے فوائد:**
-- صرف ایک عنصر ID اور متن کی ضرورت ہوتی ہے
-- DOM عناصر کو محفوظ طریقے سے تلاش کرتا ہے اور اپ ڈیٹ کرتا ہے
-- کوڈ کی نقل کو کم کرنے والا دوبارہ قابل استعمال پیٹرن
-- ایپلیکیشن میں مستقل اپ ڈیٹ کرنے کا رویہ برقرار رکھتا ہے
+- صرف ایک عنصر ID اور متن کے مواد کی ضرورت ہوتی ہے
+- محفوظ طریقے سے DOM عناصر کو تلاش کرتا ہے اور اپ ڈیٹ کرتا ہے
+- کوڈ کی نقل کو کم کرنے والا دوبارہ استعمال ہونے والا پیٹرن
+- ایپلیکیشن میں مستقل اپ ڈیٹنگ کے رویے کو برقرار رکھتا ہے
 
-#### مرحلہ 3: غلطیاں صارفین کے سامنے دکھائیں
+#### مرحلہ 3: غلطیاں صارفین کو دکھائیں
 
-اب اس پوشیدہ کنسول پیغام کو کسی ایسی چیز سے بدل دیں جو صارفین واقعی دیکھ سکیں۔ اپنے لاگ ان فنکشن کو اپ ڈیٹ کریں:
+اب اس چھپے ہوئے کنسول پیغام کو کسی ایسی چیز سے بدل دیں جو صارفین واقعی دیکھ سکیں۔ اپنی لاگ ان فنکشن کو اپ ڈیٹ کریں:
 
 ```javascript
 // Instead of just logging to console, show the user what's wrong
@@ -377,13 +506,13 @@ if (data.error) {
 - صارفین کو فوری، قابل عمل فیڈبیک ملتا ہے
 - آپ کی ایپ پیشہ ورانہ اور سوچ سمجھ کر محسوس ہوتی ہے
 
-اب جب آپ کسی غلط اکاؤنٹ کے ساتھ ٹیسٹ کریں گے، تو آپ کو صفحے پر ایک مددگار غلطی کا پیغام نظر آئے گا!
+اب جب آپ کسی غلط اکاؤنٹ کے ساتھ ٹیسٹ کریں گے، تو آپ صفحے پر ایک مددگار غلطی کا پیغام دیکھیں گے!
 
-![اسکرین شاٹ جو لاگ ان کے دوران ظاہر ہونے والے غلطی کے پیغام کو دکھا رہا ہے](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ur.png)
+![لاگ ان کے دوران دکھائے جانے والے غلطی کے پیغام کا اسکرین شاٹ](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ur.png)
 
 #### مرحلہ 4: رسائی کے ساتھ شامل ہونا
 
-یہاں ایک دلچسپ بات ہے جو ہم نے پہلے `role="alert"` شامل کیا تھا - یہ صرف سجاوٹ نہیں ہے! یہ چھوٹا سا attribute ایک [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) بناتا ہے جو اسکرین ریڈرز کو فوری طور پر تبدیلیوں کا اعلان کرتا ہے:
+یہاں ایک دلچسپ بات ہے جو ہم نے پہلے `role="alert"` شامل کیا تھا - یہ صرف سجاوٹ نہیں ہے! یہ چھوٹا سا ایٹریبیوٹ ایک [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) بناتا ہے جو اسکرین ریڈرز کو فوری طور پر تبدیلیوں کا اعلان کرتا ہے:
 
 ```html
 <div id="loginError" role="alert"></div>
@@ -391,43 +520,56 @@ if (data.error) {
 
 **یہ کیوں اہم ہے:**
 - اسکرین ریڈر صارفین غلطی کا پیغام سنتے ہیں جیسے ہی یہ ظاہر ہوتا ہے
-- ہر کوئی وہی اہم معلومات حاصل کرتا ہے، چاہے وہ کیسے نیویگیٹ کرے
+- ہر کوئی اہم معلومات حاصل کرتا ہے، چاہے وہ کیسے نیویگیٹ کرے
 - یہ آپ کی ایپ کو زیادہ لوگوں کے لیے کام کرنے کا ایک آسان طریقہ ہے
-- ظاہر کرتا ہے کہ آپ شامل تجربات بنانے کی پرواہ کرتے ہیں
+- یہ ظاہر کرتا ہے کہ آپ شامل تجربات بنانے کی پرواہ کرتے ہیں
 
 ایسی چھوٹی چھوٹی چیزیں اچھے ڈویلپرز کو عظیم ڈویلپرز سے الگ کرتی ہیں!
 
+### 🎯 تعلیمی جائزہ: تصدیقی پیٹرنز
+
+**رکیں اور غور کریں**: آپ نے ابھی ایک مکمل تصدیقی فلو نافذ کیا ہے۔ یہ ویب ڈویلپمنٹ میں ایک بنیادی پیٹرن ہے۔
+
+**خود تشخیص کے لیے فوری سوالات**:
+- کیا آپ وضاحت کر سکتے ہیں کہ ہم API کالز کے لیے async/await کیوں استعمال کرتے ہیں؟
+- اگر ہم `encodeURIComponent()` فنکشن کو بھول جائیں تو کیا ہوگا؟
+- ہماری غلطی کا ہینڈلنگ صارف کے تجربے کو کیسے بہتر بناتی ہے؟
+
+**حقیقی دنیا کا تعلق**: جو پیٹرنز آپ نے یہاں سیکھے ہیں (async ڈیٹا فچنگ، غلطی کا ہینڈلنگ، صارف کا فیڈبیک) ہر بڑی ویب ایپلیکیشن میں استعمال ہوتے ہیں، جیسے سوشل میڈیا پلیٹ فارمز سے لے کر ای کامرس سائٹس تک۔ آپ پروڈکشن لیول کی مہارتیں بنا رہے ہیں!
+
+**چیلنج سوال**: آپ اس تصدیقی نظام کو متعدد صارف رولز (کسٹمر، ایڈمن، ٹیلر) کو ہینڈل کرنے کے لیے کیسے تبدیل کریں گے؟ ڈیٹا اسٹرکچر اور UI میں ضروری تبدیلیوں کے بارے میں سوچیں۔
+
 #### مرحلہ 5: رجسٹریشن پر وہی پیٹرن لاگو کریں
 
-مطابقت کے لیے، اپنے رجسٹریشن فارم میں ایک جیسا غلطی ہینڈلنگ نافذ کریں:
+مطابقت کے لیے، اپنے رجسٹریشن فارم میں ایک جیسا غلطی کا ہینڈلنگ نافذ کریں:
 
 1. **شامل کریں** ایک غلطی ڈسپلے عنصر اپنے رجسٹریشن HTML میں:
 ```html
 <div id="registerError" role="alert"></div>
 ```
 
-2. **اپ ڈیٹ کریں** اپنے رجسٹر فنکشن کو وہی غلطی ڈسپلے پیٹرن استعمال کرنے کے لیے:
+2. **اپ ڈیٹ کریں** اپنی رجسٹر فنکشن کو وہی غلطی ڈسپلے پیٹرن استعمال کرنے کے لیے:
 ```javascript
 if (data.error) {
   return updateElement('registerError', data.error);
 }
 ```
 
-**مطابقت پذیر غلطی ہینڈلنگ کے فوائد:**
-- **یکساں صارف تجربہ فراہم کرتا ہے** تمام فارمز میں
-- **مانوس پیٹرن استعمال کر کے** علمی بوجھ کو کم کرتا ہے
-- **دوبارہ قابل استعمال کوڈ کے ساتھ** دیکھ بھال کو آسان بناتا ہے
-- **ایپلیکیشن میں رسائی کے معیار کو یقینی بناتا ہے**
+**مطابقت کے فوائد:**
+- **یکساں** صارف کا تجربہ تمام فارمز میں فراہم کرتا ہے
+- **ذہنی دباؤ کو کم کرتا ہے** مانوس پیٹرنز استعمال کر کے
+- **بحالی کو آسان بناتا ہے** دوبارہ استعمال ہونے والے کوڈ کے ساتھ
+- **رسائی کے معیار کو یقینی بناتا ہے** ایپ کے تمام حصوں میں
 
 ## اپنا متحرک ڈیش بورڈ بنانا
 
-اب ہم آپ کے جامد ڈیش بورڈ کو ایک متحرک انٹرفیس میں تبدیل کریں گے جو حقیقی اکاؤنٹ ڈیٹا دکھاتا ہے۔ جیسے پرنٹ شدہ فلائٹ شیڈول اور ایئرپورٹس پر لائیو روانگی بورڈز کے درمیان فرق ہوتا ہے، ہم جامد معلومات سے حقیقی وقت، جوابدہ ڈسپلے کی طرف بڑھ رہے ہیں۔
+اب ہم آپ کے جامد ڈیش بورڈ کو ایک متحرک انٹرفیس میں تبدیل کریں گے جو حقیقی اکاؤنٹ ڈیٹا دکھاتا ہے۔ جیسے ایک پرنٹ شدہ فلائٹ شیڈول اور ایئرپورٹس کے لائیو ڈیپارچر بورڈز کے درمیان فرق ہوتا ہے، ہم جامد معلومات سے حقیقی وقت کے، جوابدہ ڈسپلے کی طرف بڑھ رہے ہیں۔
 
-آپ نے جو DOM manipulation تکنیکیں سیکھی ہیں، ان کا استعمال کرتے ہوئے، ہم ایک ڈیش بورڈ بنائیں گے جو موجودہ اکاؤنٹ کی معلومات کے ساتھ خود بخود اپ ڈیٹ ہوتا ہے۔
+ڈوم مینپولیشن تکنیکوں کا استعمال کرتے ہوئے جو آپ نے سیکھا ہے، ہم ایک ایسا ڈیش بورڈ بنائیں گے جو موجودہ اکاؤنٹ کی معلومات کے ساتھ خود بخود اپ ڈیٹ ہوتا ہے۔
 
 ### اپنے ڈیٹا کو جاننا
 
-شروع کرنے سے پہلے، آئیے دیکھتے ہیں کہ آپ کے سرور کی طرف سے کس قسم کا ڈیٹا واپس بھیجا جاتا ہے۔ جب کوئی کامیابی سے لاگ ان کرتا ہے، تو یہ ہے معلومات کا خزانہ جو آپ کے ساتھ کام کرنے کے لیے دستیاب ہوتا ہے:
+شروع کرنے سے پہلے، آئیے دیکھتے ہیں کہ آپ کے سرور کی طرف سے کس قسم کا ڈیٹا واپس آتا ہے۔ جب کوئی کامیابی سے لاگ ان کرتا ہے، تو یہ معلومات کا خزانہ ہے جو آپ کے پاس کام کرنے کے لیے موجود ہوتا ہے:
 
 ```json
 {
@@ -444,29 +586,45 @@ if (data.error) {
 ```
 
 **یہ ڈیٹا اسٹرکچر فراہم کرتا ہے:**
-- **`user`**: تجربے کو ذاتی بنانے کے لیے بہترین ("واپس خوش آمدید، سارہ!")
+- **`user`**: تجربے کو ذاتی بنانے کے لیے بہترین ("خوش آمدید، سارہ!")
 - **`currency`**: یقینی بناتا ہے کہ ہم رقم کی مقدار کو صحیح طریقے سے دکھائیں
 - **`description`**: اکاؤنٹ کے لیے ایک دوستانہ نام
 - **`balance`**: سب سے اہم موجودہ بیلنس
 - **`transactions`**: مکمل ٹرانزیکشن ہسٹری تمام تفصیلات کے ساتھ
 
-پیشہ ورانہ نظر آنے والے بینکنگ ڈیش بورڈ بنانے کے لیے آپ کو ہر چیز فراہم کرتا ہے!
+پیشہ ورانہ نظر آنے والا بینکنگ ڈیش بورڈ بنانے کے لیے آپ کو ہر چیز فراہم کرتا ہے!
+
+```mermaid
+flowchart TD
+    A[User Login] --> B[Fetch Account Data]
+    B --> C{Data Valid?}
+    C -->|Yes| D[Store in Global Variable]
+    C -->|No| E[Show Error Message]
+    D --> F[Navigate to Dashboard]
+    F --> G[Update UI Elements]
+    G --> H[Display Balance]
+    G --> I[Show Description]
+    G --> J[Render Transactions]
+    J --> K[Create Table Rows]
+    K --> L[Format Currency]
+    L --> M[User Sees Live Data]
+```
 
 > 💡 **پرو ٹپ**: کیا آپ اپنا ڈیش بورڈ فوراً ایکشن میں دیکھنا چاہتے ہیں؟ لاگ ان کرتے وقت `test` یوزر نیم استعمال کریں - یہ پہلے سے لوڈ شدہ نمونہ ڈیٹا کے ساتھ آتا ہے تاکہ آپ سب کچھ کام کرتے ہوئے دیکھ سکیں بغیر پہلے ٹرانزیکشنز بنائے۔
 > 
 **ٹیسٹ اکاؤنٹ کیوں مفید ہے:**
-- پہلے سے لوڈ شدہ حقیقت پسندانہ نمونہ ڈیٹا کے ساتھ آتا ہے
-- دیکھنے کے لیے بہترین کہ ٹرانزیکشنز کیسے ظاہر ہوتی ہیں
-- آپ کے ڈیش بورڈ کی خصوصیات کو جانچنے کے لیے بہترین
-- آپ کو دستی طور پر dummy data بنانے سے بچاتا ہے
+- پہلے سے لوڈ شدہ حقیقی نمونہ ڈیٹا کے ساتھ آتا ہے
+- ٹرانزیکشنز کو دکھانے کا طریقہ دیکھنے کے لیے بہترین
+- آپ کی ڈیش بورڈ کی خصوصیات کو ٹیسٹ کرنے کے لیے بہترین
+- آپ کو دستی طور پر فرضی ڈیٹا بنانے سے بچاتا ہے
 
 ### ڈیش بورڈ ڈسپلے عناصر بنانا
 
-آئیے آپ کے ڈیش بورڈ انٹرفیس کو مرحلہ وار بناتے ہیں، اکاؤنٹ کے خلاصے کی معلومات سے شروع کرتے ہوئے اور پھر مزید پیچیدہ خصوصیات جیسے ٹرانزیکشن لسٹس کی طرف بڑھتے ہیں۔
+آئیے آپ کے ڈیش بورڈ انٹرفیس کو مرحلہ وار بناتے ہیں، اکاؤنٹ کے خلاصے کی معلومات سے شروع کرتے ہوئے اور پھر مزید پیچیدہ خصوصیات جیسے ٹرانزیکشن لسٹس کی طرف بڑھتے ہوئے۔
 
-#### مرحلہ 1: اپنے HTML ڈھانچے کو اپ ڈیٹ کریں
+#### مرحلہ 1: اپنے HTML اسٹرکچر کو اپ ڈیٹ کریں
 
-سب سے پہلے، جامد "بیلنس" سیکشن کو متحرک placeholder عناصر کے ساتھ تبدیل کریں جنہیں آپ کا جاوا اسکرپٹ بھر سکتا ہے:
+سب سے پہلے، جامد "بیلنس" سیکشن کو متحرک پلیس ہولڈر عناصر کے ساتھ تبدیل کریں جنہیں آپ کا جاوا اسکرپٹ بھر سکتا ہے:
 
 ```html
 <section>
@@ -474,23 +632,23 @@ if (data.error) {
 </section>
 ```
 
-پھر، اکاؤنٹ کی تفصیل کے لیے ایک سیکشن شامل کریں۔ چونکہ یہ ڈیش بورڈ مواد کے لیے ایک عنوان کے طور پر کام کرتا ہے، semantic HTML استعمال کریں:
+پھر، اکاؤنٹ کی تفصیل کے لیے ایک سیکشن شامل کریں۔ چونکہ یہ ڈیش بورڈ مواد کے لیے ایک عنوان کے طور پر کام کرتا ہے، اس لیے سیمینٹک HTML استعمال کریں:
 
 ```html
 <h2 id="description"></h2>
 ```
 
-**HTML ڈھانچے کو سمجھنا:**
-- **الگ الگ `<span>` عناصر استعمال کرتا ہے** بیلنس اور کرنسی کے لیے انفرادی کنٹرول کے لیے
-- **ہر عنصر کو منفرد IDs دیتا ہے** جاوا اسکرپٹ کے ہدف کے لیے
-- **semantic HTML کی پیروی کرتا ہے** اکاؤنٹ کی تفصیل کے لیے `<h2>` استعمال کر کے
-- **اسکرین ریڈرز اور SEO کے لیے منطقی درجہ بندی بناتا ہے**
+**HTML اسٹرکچر کو سمجھنا:**
+- **الگ الگ** `<span>` عناصر کا استعمال بیلنس اور کرنسی کے لیے انفرادی کنٹرول کے لیے
+- **منفرد IDs** کو ہر عنصر پر لاگو کرتا ہے تاکہ جاوا اسکرپٹ کے ذریعے ہدف بنایا جا سکے
+- **سیمینٹک HTML** کا استعمال کرتے ہوئے `<h2>` کو اکاؤنٹ کی تفصیل کے لیے استعمال کرتا ہے
+- **اسکرین ریڈرز اور SEO** کے لیے منطقی درجہ بندی بناتا ہے
 
-> ✅ **رسائی بصیرت**: اکاؤنٹ کی تفصیل ڈیش بورڈ مواد کے لیے ایک عنوان کے طور پر کام کرتی ہے، اس لیے اسے semantically ایک heading کے طور پر نشان زد کیا گیا ہے۔ مزید جانیں کہ [heading structure](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) رسائی پر کیسے اثر ڈالتی ہے۔ کیا آپ اپنے صفحے پر دیگر عناصر کی شناخت کر سکتے ہیں جو heading tags سے فائدہ اٹھا سکتے ہیں؟
+> ✅ **رسائی کی بصیرت**: اکاؤنٹ کی تفصیل ڈیش بورڈ مواد کے لیے ایک عنوان کے طور پر کام کرتی ہے، اس لیے اسے سیمینٹک طور پر ہیڈنگ کے طور پر نشان زد کیا گیا ہے۔ مزید جانیں کہ [ہیڈنگ اسٹرکچر](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) رسائی کو کیسے متاثر کرتا ہے۔ کیا آپ اپنے صفحے پر دوسرے عناصر کی شناخت کر سکتے ہیں جو ہیڈنگ ٹیگز سے فائدہ اٹھا سکتے ہیں؟
 
 #### مرحلہ 2: ڈیش بورڈ اپ ڈیٹ فنکشن بنائیں
 
-اب ایک فنکشن بنائیں جو آپ کے ڈیش بورڈ کو حقیقی اکاؤنٹ ڈیٹا کے ساتھ بھر دے:
+اب ایک فنکشن بنائیں جو حقیقی اکاؤنٹ ڈیٹا کے ساتھ آپ کے ڈیش بورڈ کو بھرے:
 
 ```javascript
 function updateDashboard() {
@@ -504,18 +662,18 @@ function updateDashboard() {
 }
 ```
 
-**مرحلہ وار، یہ فنکشن کیا کرتا ہے:**
-- **تصدیق کرتا ہے** کہ اکاؤنٹ ڈیٹا موجود ہے اس سے پہلے کہ آگے بڑھے
+**یہ فنکشن کیا کرتا ہے:**
+- **تصدیق کرتا ہے** کہ اکاؤنٹ ڈیٹا موجود ہے یا نہیں
 - **غیر تصدیق شدہ صارفین کو** لاگ ان صفحے پر واپس بھیجتا ہے
-- **اکاؤنٹ کی تفصیل کو اپ ڈیٹ کرتا ہے** دوبارہ قابل استعمال `updateElement` فنکشن کا استعمال کرتے ہوئے
+- **اکاؤنٹ کی تفصیل کو اپ ڈیٹ کرتا ہے** دوبارہ استعمال ہونے والے `updateElement` فنکشن کا استعمال کرتے ہوئے
 - **بیلنس کو فارمیٹ کرتا ہے** تاکہ ہمیشہ دو اعشاریہ مقامات دکھائے
-- **مناسب کرنسی کا نشان دکھاتا ہے**
+- **مناسب کرنسی علامت دکھاتا ہے**
 
-> 💰 **پیسوں کی فارمیٹنگ**: وہ [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) طریقہ ایک lifesaver ہے! یہ یقینی بناتا ہے کہ آپ کا بیلنس ہمیشہ حقیقی پیسوں کی طرح نظر آئے - "75.00" بجائے صرف "75"۔ آپ کے صارفین کو مانوس کرنسی فارمیٹنگ دیکھ کر خوشی ہوگی۔
+> 💰 **رقم کی فارمیٹنگ**: وہ [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) میتھڈ ایک زندگی بچانے والا ہے! یہ یقینی بناتا ہے کہ آپ کا بیلنس ہمیشہ حقیقی رقم کی طرح نظر آئے - "75.00" بجائے صرف "75"۔ آپ کے صارفین کو مانوس کرنسی فارمیٹنگ دیکھ کر خوشی ہوگی۔
 
 #### مرحلہ 3: یقینی بنائیں کہ آپ کا ڈیش بورڈ اپ ڈیٹ ہوتا ہے
 
-یہ یقینی بنانے کے لیے کہ آپ کا ڈیش بورڈ ہر بار کسی کے وزٹ کرنے پر تازہ ڈیٹا کے ساتھ ریفریش ہوتا ہے، ہمیں آپ کے navigation system میں hook کرنا ہوگا۔ اگر آپ نے [سبق 1 کا assignment](../1-template-route/assignment.md) مکمل کیا ہے، تو یہ آپ کو مانوس محسوس ہونا چاہیے۔ اگر نہیں، تو پریشان نہ ہوں - یہاں آپ کو کیا ضرورت ہے:
+یہ یقینی بنانے کے لیے کہ آپ کا ڈیش بورڈ ہر بار تازہ ڈیٹا کے ساتھ ریفریش ہوتا ہے جب کوئی اسے دیکھتا ہے، ہمیں آپ کے نیویگیشن سسٹم میں ہک کرنا ہوگا۔ اگر آپ نے [سبق 1 کا اسائنمنٹ](../1-template-route/assignment.md) مکمل کیا ہے، تو یہ مانوس محسوس ہونا چاہیے۔ اگر نہیں، تو فکر نہ کریں - آپ کو یہ چاہیے:
 
 اپنے `updateRoute()` فنکشن کے آخر میں یہ شامل کریں:
 
@@ -525,7 +683,7 @@ if (typeof route.init === 'function') {
 }
 ```
 
-پھر اپنے routes کو اپ ڈیٹ کریں تاکہ ڈیش بورڈ initialization شامل ہو:
+پھر اپنے روٹس کو ڈیش بورڈ انیشیالائزیشن شامل کرنے کے لیے اپ ڈیٹ کریں:
 
 ```javascript
 const routes = {
@@ -535,27 +693,45 @@ const routes = {
 ```
 
 **یہ ہوشیار سیٹ اپ کیا کرتا ہے:**
-- چیک کرتا ہے کہ آیا route کے پاس خاص initialization کوڈ ہے
-- وہ کوڈ خود بخود route کے لوڈ ہونے پر چلاتا ہے
+- چیک کرتا ہے کہ آیا کسی روٹ میں خاص انیشیالائزیشن کوڈ ہے
+- وہ کوڈ خود بخود چلاتا ہے جب روٹ لوڈ ہوتا ہے
 - یقینی بناتا ہے کہ آپ کا ڈیش بورڈ ہمیشہ تازہ، موجودہ ڈیٹا دکھاتا ہے
-- آپ کے routing logic کو صاف اور منظم رکھتا ہے
+- آپ کے روٹنگ لاجک کو صاف اور منظم رکھتا ہے
 
-#### اپنے ڈیش بورڈ کی جانچ کرنا
+#### اپنے ڈیش بورڈ کی جانچ
 
 ان تبدیلیوں کو نافذ کرنے کے بعد، اپنے ڈیش بورڈ کی جانچ کریں:
 
-1. **لاگ ان کریں** ایک test account کے ساتھ
+1. **لاگ ان کریں** ایک ٹیسٹ اکاؤنٹ کے ساتھ
 2. **تصدیق کریں** کہ آپ کو ڈیش بورڈ پر ری ڈائریکٹ کیا گیا ہے
-3. **چیک کریں** کہ اکاؤنٹ کی تفصیل، بیلنس، اور کرنسی صحیح طریقے سے ظاہر ہو رہے ہیں
-4. **لاگ آؤٹ کریں اور دوبارہ لاگ ان کریں** یہ یقینی بنانے کے لیے کہ ڈیٹا صحیح طریقے سے ریفریش ہو رہا ہے
+3. **چیک کریں** کہ اکاؤنٹ کی تفصیل، بیلنس، اور کرنسی صحیح طریقے سے دکھائی دے رہے ہیں
+4. **لاگ آؤٹ اور دوبارہ لاگ ان کرنے کی کوشش کریں** تاکہ ڈیٹا کو صحیح طریقے سے ریفریش کیا جا سکے
 
 آپ کا ڈیش بورڈ اب متحرک اکاؤنٹ کی معلومات دکھائے گا جو لاگ ان صارف کے ڈیٹا کی بنیاد پر اپ ڈیٹ ہوتا ہے!
 
 ## ٹیمپلیٹس کے ساتھ سمارٹ ٹرانزیکشن لسٹس بنانا
 
-ہر ٹرانزیکشن کے لیے دستی طور پر HTML بنانے کے بجائے، ہم ٹیمپلیٹس کا استعمال کریں گے تاکہ خود بخود مستقل فارمیٹنگ پیدا کی جا سکے۔ جیسے خلائی جہاز کی تیاری میں استعمال ہونے والے معیاری اجزاء، ٹیمپلیٹس اس بات کو یقینی بناتے ہیں کہ ہر ٹرانزیکشن row ایک ہی ڈھانچے اور ظاہری شکل کی پیروی کرے۔
+ہر ٹرانزیکشن کے لیے دستی طور پر HTML بنانے کے بجائے، ہم ٹیمپلیٹس کا استعمال کریں گے تاکہ خود بخود مستقل فارمیٹنگ پیدا کی جا سکے۔ جیسے خلائی جہاز کی تیاری میں استعمال ہونے والے معیاری اجزاء، ٹیمپلیٹس یقینی بناتے ہیں کہ ہر ٹرانزیکشن رو ایک ہی ساخت اور ظاہری شکل کی پیروی کرے۔
 
-یہ تکنیک چند ٹرانزیکشنز سے لے کر ہزاروں تک مؤثر طریقے سے scale کرتی ہے، مستقل کارکردگی اور پیشکش کو برقرار رکھتے ہوئے۔
+یہ تکنیک چند ٹرانزیکشنز سے لے کر ہزاروں تک مؤثر طریقے سے اسکیل کرتی ہے، مستقل کارکردگی اور پیشکش کو برقرار رکھتے ہوئے۔
+
+```mermaid
+graph LR
+    A[HTML Template] --> B[JavaScript Clone]
+    B --> C[Populate with Data]
+    C --> D[Add to Fragment]
+    D --> E[Batch Insert to DOM]
+    
+    subgraph "Performance Benefits"
+        F[Single DOM Update]
+        G[Consistent Formatting]
+        H[Reusable Pattern]
+    end
+    
+    E --> F
+    E --> G
+    E --> H
+```
 
 ```mermaid
 flowchart LR
@@ -568,7 +744,7 @@ flowchart LR
 
 ### مرحلہ 1: ٹرانزیکشن ٹیمپلیٹ بنائیں
 
-سب سے پہلے، اپنے HTML `<body>` میں ٹرانزیکشن rows کے لیے ایک reusable template شامل کریں:
+سب سے پہلے، اپنے HTML `<body>` میں ٹرانزیکشن رو کے لیے ایک دوبارہ استعمال ہونے والا ٹیمپلیٹ شامل کریں:
 
 ```html
 <template id="transaction">
@@ -581,112 +757,143 @@ flowchart LR
 ```
 
 **HTML ٹیمپلیٹس کو سمجھنا:**
-- **ایک ٹیبل row کے ڈھانچے کی وضاحت کرتا ہے**
-- **جب تک جاوا اسکرپٹ کے ذریعے کلون اور populate نہ کیا جائے، پوشیدہ رہتا ہے**
-- **تین cells شامل کرتا ہے** تاریخ، تفصیل، اور مقدار کے لیے
-- **مستقل فارمیٹنگ کے لیے ایک reusable پیٹرن فراہم کرتا ہے**
+- **ایک ٹیبل رو کے لیے ساخت کی وضاحت کرتا ہے**
+- **جب تک جاوا اسکرپٹ کے ذریعے کلون اور بھر نہ جائے، نظر نہیں آتا**
+- **تین سیلز شامل کرتا ہے** تاریخ، تفصیل، اور مقدار کے لیے
+- **مستقل فارمیٹنگ کے لیے ایک دوبارہ استعمال ہونے والا پیٹرن فراہم کرتا ہے**
 
-### مرحلہ 2: اپنے ٹیبل کو متحرک مواد کے لیے تیار کریں
+### مرحلہ
+> ⚡ **کارکرد کی بہتری**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) بوئنگ کے اسمبلی عمل کی طرح کام کرتا ہے - اجزاء مرکزی لائن سے باہر تیار کیے جاتے ہیں، پھر مکمل یونٹ کے طور پر نصب کیے جاتے ہیں۔ یہ بیچنگ طریقہ کار DOM ریفلو کو کم سے کم کرتا ہے کیونکہ یہ متعدد انفرادی آپریشنز کے بجائے ایک ہی بار داخلہ انجام دیتا ہے۔
 
-اگلا، اپنے ٹیبل body کو ایک `id` دیں تاکہ جاوا اسکرپٹ آسانی سے اسے ہدف بنا سکے:
+### مرحلہ 5: مخلوط مواد کے لیے اپڈیٹ فنکشن کو بہتر بنائیں
 
-```html
-<tbody id="transactions"></tbody>
+آپ کا `updateElement()` فنکشن فی الحال صرف ٹیکسٹ مواد کو ہینڈل کرتا ہے۔ اسے ٹیکسٹ اور DOM نوڈز دونوں کے ساتھ کام کرنے کے لیے اپڈیٹ کریں:
+
+```javascript
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
 ```
 
-**یہ کیا حاصل کرتا ہے:**
-- **ایک واضح ہدف بناتا ہے** ٹرانزیکشن rows داخل کرنے کے لیے
-- **ٹیبل ڈھانچے کو متحرک مواد سے الگ کرتا ہے**
-- **ٹرانزیکشن ڈیٹا کو صاف کرنے اور دوبارہ بھرنے کو آسان بناتا ہے**
+**اس اپڈیٹ میں اہم بہتریاں:**
+- **موجودہ مواد کو صاف کرتا ہے** نئے مواد شامل کرنے سے پہلے
+- **ٹیکسٹ اسٹرنگز یا DOM نوڈز کو بطور پیرامیٹر قبول کرتا ہے**
+- **لچک کے لیے [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) طریقہ استعمال کرتا ہے**
+- **موجودہ ٹیکسٹ پر مبنی استعمال کے ساتھ پسماندہ مطابقت برقرار رکھتا ہے**
 
-### مرحلہ 3: ٹرانزیکشن row factory فنکشن بنائیں
+### اپنے ڈیش بورڈ کو آزمائیں
 
-اب ایک فنکشن بنائیں جو ٹرانزیکشن ڈیٹا کو HTML عناصر میں تبدیل کرے:
+اب وقت ہے حقیقت کا سامنا کرنے کا! آئیے آپ کے ڈائنامک ڈیش بورڈ کو ایکشن میں دیکھتے ہیں:
 
-```javascript
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
-}
-```
+1. `test` اکاؤنٹ کے ساتھ لاگ ان کریں (اس میں نمونہ ڈیٹا پہلے سے موجود ہے)
+2. اپنے ڈیش بورڈ پر جائیں
+3. چیک کریں کہ ٹرانزیکشن کی قطاریں صحیح فارمیٹنگ کے ساتھ ظاہر ہو رہی ہیں
+4. یقینی بنائیں کہ تاریخیں، تفصیلات، اور رقمیں سب ٹھیک نظر آ رہی ہیں
 
-**اس factory فنکشن کو توڑ کر سمجھنا:**
-- **ٹیمپلیٹ عنصر کو اس کے ID کے ذریعے حاصل کرتا ہے**
-- **کلون کرتا ہے** ٹیمپلیٹ مواد کو محفوظ manipulation کے لیے
-- **ٹیبل row کو منتخب کرتا ہے** کلون شدہ مواد کے اندر
-- **ہر cell کو ٹرانزیکشن ڈیٹا کے ساتھ populate کرتا ہے**
-- **مقدار کو فارمیٹ کرتا ہے** تاکہ مناسب اعشاریہ مقامات دکھائے
-- **مکمل row واپس کرتا ہے** insertion کے لیے تیار
+اگر سب کچھ ٹھیک کام کر رہا ہے، تو آپ کو اپنے ڈیش بورڈ پر مکمل طور پر فعال ٹرانزیکشن لسٹ نظر آئے گی! 🎉
 
-### مرحلہ 4: متعدد ٹرانزیکشن rows مؤثر طریقے سے پیدا کریں
+**آپ نے کیا حاصل کیا:**
+- ایسا ڈیش بورڈ بنایا جو کسی بھی مقدار کے ڈیٹا کے ساتھ اسکیل کر سکتا ہے
+- مستقل فارمیٹنگ کے لیے دوبارہ استعمال کے قابل ٹیمپلیٹس بنائے
+- موثر DOM ہیرا پھیری کی تکنیکیں نافذ کیں
+- پروڈکشن بینکنگ ایپلیکیشنز کے برابر فعالیت تیار کی
 
-اپنے `updateDashboard()` فنکشن میں یہ کوڈ شامل کریں تاکہ تمام ٹرانزیکشنز ظاہر ہوں:
+آپ نے ایک جامد ویب صفحہ کو ایک ڈائنامک ویب ایپلیکیشن میں کامیابی سے تبدیل کر دیا ہے۔
 
-```javascript
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
-```
+### 🎯 تعلیمی جائزہ: ڈائنامک مواد کی تخلیق
 
-**اس مؤثر طریقے کو سمجھنا:**
-- **ایک document fragment بناتا ہے** تاکہ DOM operations کو batch کیا جا سکے
-- **تمام ٹرانزیکشنز کے ذریعے iterate کرتا ہے** اکاؤنٹ ڈیٹا میں
-- **ہر ٹرانزیکشن کے لیے ایک row پیدا کرتا ہے** factory فنکشن کا استعمال کرتے ہوئے
-- **تمام rows کو fragment میں جمع کرتا ہے** DOM میں شامل کرنے سے پہلے
-- **ایک واحد DOM اپ ڈیٹ انجام دیتا ہے** بجائے متعدد انفرادی insertions کے
+**آرکیٹیکچر کی سمجھ**: آپ نے ایک پیچیدہ ڈیٹا سے UI پائپ لائن نافذ کی ہے جو React، Vue، اور Angular جیسے فریم ورک میں استعمال ہونے والے پیٹرنز کی عکاسی کرتی ہے۔
 
-> ⚡ **کارکردگی کی اصلاح**: [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) بوئنگ کے اسمبلی عمل کی طرح کام کرتا ہے - components کو مین لائن سے باہر تیار کیا جاتا ہے، پھر مکمل یونٹ کے طور پر نصب کیا جاتا ہے۔ یہ batching طریقہ DOM reflows کو کم سے کم کرتا ہے ایک واحد insertion انجام دے کر بجائے متعدد انفرادی operations کے۔
+**اہم تصورات میں مہارت حاصل کی**:
+- **ٹیمپلیٹ پر مبنی رینڈرنگ**: دوبارہ استعمال کے قابل UI اجزاء بنانا
+- **ڈاکیومنٹ فریگمنٹس**: DOM کارکردگی کو بہتر بنانا
+- **محفوظ DOM ہیرا پھیری**: سیکیورٹی کے خطرات کو روکنا
+- **ڈیٹا کی تبدیلی**: سرور ڈیٹا کو یوزر انٹرفیس میں تبدیل کرنا
 
-### مرحلہ 5: مخلوط مواد کے لیے اپ ڈیٹ فنکشن کو بہتر بنائیں
+**صنعتی تعلق**: یہ تکنیکیں جدید فرنٹ اینڈ فریم ورک کی بنیاد بناتی ہیں۔ React کا ورچوئل DOM، Vue کا ٹیمپلیٹ سسٹم، اور Angular کا کمپوننٹ آرکیٹیکچر ان بنیادی تصورات پر مبنی ہیں۔
 
-آپ کا `updateElement()` فنکشن فی الحال صرف text content کو ہینڈل کرتا ہے۔ اسے text اور DOM nodes دونوں کے ساتھ کام کرنے کے لیے اپ ڈیٹ کریں:
+**عکاسی کا سوال**: آپ اس نظام کو حقیقی وقت کی اپڈیٹس (جیسے نئے ٹرانزیکشنز خود بخود ظاہر ہونا) کو ہینڈل کرنے کے لیے کیسے بڑھائیں گے؟ WebSockets یا Server-Sent Events پر غور کریں۔
 
-```javascript
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
-  element.append(textOrNode);
-}
+---
+
+## 📈 آپ کی ڈیٹا مینجمنٹ مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title Data-Driven Development Journey
+    
+    section Foundation Building
+        API Setup & Testing
+            : Understand client-server communication
+            : Master HTTP request/response cycle
+            : Learn debugging techniques
+    
+    section Authentication Mastery
+        Async Function Patterns
+            : Write clean async/await code
+            : Handle promises effectively
+            : Implement error boundaries
+        User Session Management
+            : Create global state patterns
+            : Build navigation guards
+            : Design user feedback systems
+    
+    section Dynamic UI Development
+        Safe DOM Manipulation
+            : Prevent XSS vulnerabilities
+            : Use textContent over innerHTML
+            : Create accessibility-friendly interfaces
+        Template Systems
+            : Build reusable UI components
+            : Optimize performance with fragments
+            : Scale to handle large datasets
+    
+    section Professional Patterns
+        Production-Ready Code
+            : Implement comprehensive error handling
+            : Follow security best practices
+            : Create maintainable architectures
+        Modern Web Standards
+            : Master Fetch API patterns
+            : Understand CORS configurations
+            : Build responsive, accessible UIs
 ```
 
-**اس اپ ڈیٹ میں کلیدی بہتری:**
-- **موجودہ مواد کو صاف کرتا ہے** نئے مواد شامل کرنے سے پہلے
-- **text strings یا DOM nodes کو قبول کرتا ہے** بطور parameters
-- **[`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) طریقہ استعمال کرتا ہے** لچک کے لیے
-- **موجودہ text-based استعمال کے ساتھ** backward compatibility برقرار رکھتا ہے
+**🎓 گریجویشن سنگ میل**: آپ نے جدید جاوا اسکرپٹ پیٹرنز کا استعمال کرتے ہوئے مکمل ڈیٹا سے چلنے والی ویب ایپلیکیشن کامیابی سے بنائی ہے۔ یہ مہارتیں React، Vue، یا Angular جیسے فریم ورک کے ساتھ کام کرنے کے لیے براہ راست ترجمہ کرتی ہیں۔
+
+**🔄 اگلے درجے کی صلاحیتیں**:
+- ان تصورات پر مبنی فرنٹ اینڈ فریم ورک کو دریافت کرنے کے لیے تیار
+- WebSockets کے ساتھ حقیقی وقت کی خصوصیات نافذ کرنے کے لیے تیار
+- آف لائن صلاحیتوں کے ساتھ پروگریسو ویب ایپس بنانے کے لیے تیار
+- جدید اسٹیٹ مینجمنٹ پیٹرنز سیکھنے کے لیے بنیاد تیار
+
+## GitHub Copilot Agent Challenge 🚀
 
-### اپنے ڈیش بورڈ کو ٹیسٹ ڈرائیو پر لے جانا
+Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-سچائی کا لمحہ آ گیا! آئیے آپ کے متحرک ڈیش بورڈ کو ایکشن میں دیکھتے ہیں:
+**تفصیل:** بینکنگ ایپ میں ٹرانزیکشن سرچ اور فلٹر فیچر نافذ کریں جو صارفین کو تاریخ کی حد، رقم، یا تفصیل کے کلیدی الفاظ کے ذریعے مخصوص ٹرانزیکشنز تلاش کرنے کی اجازت دیتا ہے۔
 
-1. `test` اکاؤنٹ کا استعمال کرتے ہوئے لاگ ان کریں (یہ نمونہ ڈیٹا کے ساتھ تیار
-**پرامپٹ:** بینکنگ ایپ کے لیے سرچ فنکشنلٹی بنائیں جس میں شامل ہو: 1) ایک سرچ فارم جس میں تاریخ کی حد (سے/تک)، کم سے کم/زیادہ سے زیادہ رقم، اور ٹرانزیکشن کی تفصیل کے کلیدی الفاظ کے لیے ان پٹ فیلڈز ہوں، 2) ایک `filterTransactions()` فنکشن جو اکاؤنٹ.transactions array کو سرچ کے معیار کے مطابق فلٹر کرے، 3) `updateDashboard()` فنکشن کو اپ ڈیٹ کریں تاکہ فلٹر شدہ نتائج دکھائے جا سکیں، اور 4) "Clear Filters" بٹن شامل کریں تاکہ ویو کو ری سیٹ کیا جا سکے۔ جدید جاوا اسکرپٹ array methods جیسے `filter()` استعمال کریں اور خالی سرچ معیار کے لیے edge cases کو ہینڈل کریں۔
+**پرومپٹ:** بینکنگ ایپ کے لیے سرچ فنکشنلٹی بنائیں جس میں شامل ہو: 1) تاریخ کی حد (سے/تک)، کم از کم/زیادہ سے زیادہ رقم، اور ٹرانزیکشن تفصیل کے کلیدی الفاظ کے لیے ان پٹ فیلڈز کے ساتھ ایک سرچ فارم، 2) ایک `filterTransactions()` فنکشن جو سرچ کے معیار کی بنیاد پر account.transactions array کو فلٹر کرے، 3) `updateDashboard()` فنکشن کو اپڈیٹ کریں تاکہ فلٹر شدہ نتائج دکھائے، اور 4) "Clear Filters" بٹن شامل کریں تاکہ ویو کو ری سیٹ کیا جا سکے۔ جدید جاوا اسکرپٹ array طریقے جیسے `filter()` استعمال کریں اور خالی سرچ معیار کے لیے edge cases کو ہینڈل کریں۔
 
-[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
+Agent موڈ کے بارے میں مزید جانیں [یہاں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
 
 ## 🚀 چیلنج
 
 اپنی بینکنگ ایپ کو اگلے درجے پر لے جانے کے لیے تیار ہیں؟ آئیے اسے ایسا بنائیں کہ آپ واقعی اسے استعمال کرنا چاہیں۔ یہاں کچھ خیالات ہیں جو آپ کی تخلیقی صلاحیت کو بڑھا سکتے ہیں:
 
-**خوبصورت بنائیں**: CSS اسٹائلنگ شامل کریں تاکہ آپ کے فنکشنل ڈیش بورڈ کو بصری طور پر دلکش بنایا جا سکے۔ صاف لائنیں، اچھا اسپیسنگ، اور شاید کچھ ہلکی اینیمیشنز بھی۔
+**اسے خوبصورت بنائیں**: CSS اسٹائلنگ شامل کریں تاکہ آپ کے فنکشنل ڈیش بورڈ کو بصری طور پر دلکش بنایا جا سکے۔ صاف لائنیں، اچھا اسپیسنگ، اور شاید کچھ ہلکی اینیمیشنز شامل کریں۔
 
-**ریسپانسیو بنائیں**: [میڈیا کوئریز](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) استعمال کرنے کی کوشش کریں تاکہ ایک [ریسپانسیو ڈیزائن](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) بنایا جا سکے جو فونز، ٹیبلٹس، اور ڈیسک ٹاپس پر بہترین کام کرے۔ آپ کے صارفین آپ کا شکریہ ادا کریں گے!
+**اسے ریسپانسیو بنائیں**: [میڈیا کوئریز](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) استعمال کرنے کی کوشش کریں تاکہ ایک [ریسپانسیو ڈیزائن](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) بنایا جا سکے جو فونز، ٹیبلٹس، اور ڈیسک ٹاپس پر بہترین کام کرے۔ آپ کے صارفین آپ کا شکریہ ادا کریں گے!
 
-**کچھ دلکشی شامل کریں**: ٹرانزیکشنز کو رنگوں سے کوڈ کریں (آمدنی کے لیے سبز، اخراجات کے لیے سرخ)، آئیکنز شامل کریں، یا ایسے hover effects بنائیں جو انٹرفیس کو انٹرایکٹو محسوس کرائیں۔
+**کچھ دلکشی شامل کریں**: ٹرانزیکشنز کو رنگوں سے کوڈ کریں (آمدنی کے لیے سبز، اخراجات کے لیے سرخ)، آئیکنز شامل کریں، یا ایسے ہوور ایفیکٹس بنائیں جو انٹرفیس کو انٹرایکٹو محسوس کرائیں۔
 
-ایک پالش شدہ ڈیش بورڈ ایسا دکھائی دے سکتا ہے:
+یہاں ایک پالش شدہ ڈیش بورڈ کی مثال کی طرح نظر آ سکتا ہے:
 
 ![ڈیش بورڈ کے اسٹائلنگ کے بعد کے نتیجے کی مثال کا اسکرین شاٹ](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ur.png)
 
-ایسا محسوس نہ کریں کہ آپ کو بالکل یہی میچ کرنا ہے - اسے بطور تحریک استعمال کریں اور اسے اپنا بنائیں!
+ایسا محسوس نہ کریں کہ آپ کو اسے بالکل اسی طرح سے ملانا ہے - اسے بطور تحریک استعمال کریں اور اسے اپنا بنائیں!
 
 ## لیکچر کے بعد کا کوئز
 
diff --git a/translations/ur/7-bank-project/4-state-management/README.md b/translations/ur/7-bank-project/4-state-management/README.md
index d6ea0dd6e6..48ba90cda0 100644
--- a/translations/ur/7-bank-project/4-state-management/README.md
+++ b/translations/ur/7-bank-project/4-state-management/README.md
@@ -1,40 +1,96 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "32bd800759c3e943c38ad9ae6e1f51e0",
-  "translation_date": "2025-10-22T14:57:21+00:00",
+  "original_hash": "b807b09df716dc48a2b750835bf8e933",
+  "translation_date": "2025-11-03T13:18:39+00:00",
   "source_file": "7-bank-project/4-state-management/README.md",
   "language_code": "ur"
 }
 -->
 # بینکنگ ایپ بنائیں حصہ 4: اسٹیٹ مینجمنٹ کے تصورات
 
-## لیکچر سے پہلے کا کوئز
+## ⚡ اگلے 5 منٹ میں آپ کیا کر سکتے ہیں؟
 
-[لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/47)
+**مصروف ڈویلپرز کے لیے فوری آغاز کا راستہ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Diagnose state issues]
+    B --> C[Create central state object]
+    C --> D[Add updateState function]
+    D --> E[See immediate improvements]
+```
+
+- **پہلا منٹ**: موجودہ اسٹیٹ کے مسئلے کو ٹیسٹ کریں - لاگ ان کریں، صفحہ ریفریش کریں، لاگ آؤٹ کا مشاہدہ کریں۔
+- **دوسرا منٹ**: `let account = null` کو `let state = { account: null }` سے تبدیل کریں۔
+- **تیسرا منٹ**: کنٹرولڈ اپڈیٹس کے لیے ایک سادہ `updateState()` فنکشن بنائیں۔
+- **چوتھا منٹ**: ایک فنکشن کو نئے پیٹرن کے مطابق اپڈیٹ کریں۔
+- **پانچواں منٹ**: بہتر پیش بینی اور ڈیبگنگ کی صلاحیت کا ٹیسٹ کریں۔
+
+**فوری تشخیصی ٹیسٹ**:
+```javascript
+// Before: Scattered state
+let account = null; // Lost on refresh!
+
+// After: Centralized state
+let state = Object.freeze({ account: null }); // Controlled and trackable!
+```
+
+**یہ کیوں اہم ہے**: 5 منٹ میں، آپ بے ترتیب اسٹیٹ مینجمنٹ سے پیش بینی اور ڈیبگنگ کے قابل پیٹرنز میں تبدیلی کا تجربہ کریں گے۔ یہ وہ بنیاد ہے جو پیچیدہ ایپلیکیشنز کو قابلِ انتظام بناتی ہے۔
+
+## 🗺️ اسٹیٹ مینجمنٹ کی مہارت کے ذریعے آپ کا تعلیمی سفر
+
+```mermaid
+journey
+    title From Scattered State to Professional Architecture
+    section Diagnosing Problems
+      Identify state loss issues: 3: You
+      Understand scattered updates: 4: You
+      Recognize architecture needs: 6: You
+    section Centralizing Control
+      Create unified state object: 5: You
+      Implement controlled updates: 7: You
+      Add immutable patterns: 8: You
+    section Adding Persistence
+      Implement localStorage: 6: You
+      Handle serialization: 7: You
+      Create session continuity: 9: You
+    section Balancing Freshness
+      Address data staleness: 5: You
+      Build refresh systems: 8: You
+      Achieve optimal balance: 9: You
+```
+
+**آپ کا سفر کا مقصد**: اس سبق کے اختتام تک، آپ ایک پروفیشنل گریڈ اسٹیٹ مینجمنٹ سسٹم بنا چکے ہوں گے جو پائیداری، ڈیٹا کی تازگی، اور پیش بینی اپڈیٹس کو سنبھالتا ہے - وہی پیٹرنز جو پروڈکشن ایپلیکیشنز میں استعمال ہوتے ہیں۔
+
+## پری لیکچر کوئز
+
+[پری لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/47)
 
 ## تعارف
 
-اسٹیٹ مینجمنٹ ویوئجر خلائی جہاز کے نیویگیشن سسٹم کی طرح ہے – جب سب کچھ ٹھیک کام کر رہا ہو تو آپ کو اس کی موجودگی کا احساس بھی نہیں ہوتا۔ لیکن جب کچھ غلط ہو جائے تو یہ فرق پیدا کرتا ہے کہ آپ بین النجمی خلا تک پہنچیں یا کائناتی خلا میں گم ہو جائیں۔ ویب ڈیولپمنٹ میں، اسٹیٹ وہ سب کچھ ہے جو آپ کی ایپلیکیشن کو یاد رکھنے کی ضرورت ہوتی ہے: صارف کے لاگ ان کی حیثیت، فارم ڈیٹا، نیویگیشن کی تاریخ، اور عارضی انٹرفیس کی حالتیں۔
+اسٹیٹ مینجمنٹ Voyager خلائی جہاز کے نیویگیشن سسٹم کی طرح ہے – جب سب کچھ ہموار طریقے سے کام کر رہا ہو، تو آپ کو اس کی موجودگی کا احساس بھی نہیں ہوتا۔ لیکن جب کچھ غلط ہو جائے، تو یہ انٹر اسٹیلر اسپیس تک پہنچنے اور کائناتی خلا میں کھو جانے کے درمیان فرق بن جاتا ہے۔ ویب ڈیولپمنٹ میں، اسٹیٹ وہ سب کچھ ظاہر کرتا ہے جو آپ کی ایپلیکیشن کو یاد رکھنے کی ضرورت ہے: صارف کے لاگ ان کی حیثیت، فارم ڈیٹا، نیویگیشن کی تاریخ، اور عارضی انٹرفیس اسٹیٹس۔
 
-جیسے جیسے آپ کی بینکنگ ایپ ایک سادہ لاگ ان فارم سے زیادہ پیچیدہ ایپلیکیشن میں تبدیل ہوئی ہے، آپ کو کچھ عام چیلنجز کا سامنا کرنا پڑا ہوگا۔ صفحہ ریفریش کریں اور صارفین غیر متوقع طور پر لاگ آؤٹ ہو جاتے ہیں۔ براؤزر بند کریں اور تمام پیش رفت ختم ہو جاتی ہے۔ کسی مسئلے کو ڈیبگ کریں اور آپ متعدد فنکشنز کے ذریعے شکار کر رہے ہیں جو مختلف طریقوں سے ایک ہی ڈیٹا کو تبدیل کرتے ہیں۔
+جب آپ کی بینکنگ ایپ ایک سادہ لاگ ان فارم سے زیادہ پیچیدہ ایپلیکیشن میں تبدیل ہوئی ہے، تو آپ نے ممکنہ طور پر کچھ عام چیلنجز کا سامنا کیا ہوگا۔ صفحہ ریفریش کریں اور صارفین غیر متوقع طور پر لاگ آؤٹ ہو جاتے ہیں۔ براؤزر بند کریں اور تمام پیش رفت ختم ہو جاتی ہے۔ مسئلے کو ڈیبگ کریں اور آپ متعدد فنکشنز کے ذریعے شکار کر رہے ہیں جو سب ایک ہی ڈیٹا کو مختلف طریقوں سے تبدیل کرتے ہیں۔
 
-یہ خراب کوڈنگ کی علامت نہیں ہیں – یہ قدرتی بڑھتے ہوئے مسائل ہیں جو اس وقت پیدا ہوتے ہیں جب ایپلیکیشنز ایک خاص پیچیدگی کی حد تک پہنچ جاتی ہیں۔ ہر ڈیولپر کو ان چیلنجز کا سامنا کرنا پڑتا ہے جب ان کی ایپس "پروف آف کانسیپٹ" سے "پروڈکشن ریڈی" میں منتقل ہوتی ہیں۔
+یہ خراب کوڈنگ کی علامات نہیں ہیں – یہ قدرتی بڑھتے ہوئے مسائل ہیں جو اس وقت پیدا ہوتے ہیں جب ایپلیکیشنز ایک خاص پیچیدگی کی حد تک پہنچ جاتی ہیں۔ ہر ڈویلپر ان چیلنجز کا سامنا کرتا ہے جب ان کی ایپس "پروف آف کانسیپٹ" سے "پروڈکشن ریڈی" میں تبدیل ہوتی ہیں۔
 
-اس سبق میں، ہم ایک مرکزی اسٹیٹ مینجمنٹ سسٹم نافذ کریں گے جو آپ کی بینکنگ ایپ کو ایک قابل اعتماد، پیشہ ورانہ ایپلیکیشن میں تبدیل کرے گا۔ آپ ڈیٹا کے بہاؤ کو پیش گوئی کے مطابق منظم کرنا، صارف کے سیشنز کو مناسب طریقے سے برقرار رکھنا، اور جدید ویب ایپلیکیشنز کے لیے مطلوبہ ہموار صارف تجربہ تخلیق کرنا سیکھیں گے۔
+اس سبق میں، ہم ایک مرکزی اسٹیٹ مینجمنٹ سسٹم نافذ کریں گے جو آپ کی بینکنگ ایپ کو ایک قابل اعتماد، پیشہ ورانہ ایپلیکیشن میں تبدیل کرے گا۔ آپ ڈیٹا کے بہاؤ کو پیش بینی کے ساتھ منظم کرنا، صارف سیشنز کو مناسب طریقے سے برقرار رکھنا، اور جدید ویب ایپلیکیشنز کے لیے مطلوبہ ہموار صارف تجربہ تخلیق کرنا سیکھیں گے۔
 
 ## ضروریات
 
-اسٹیٹ مینجمنٹ کے تصورات میں غوطہ لگانے سے پہلے، آپ کو اپنا ڈیولپمنٹ ماحول مناسب طریقے سے ترتیب دینا ہوگا اور اپنی بینکنگ ایپ کی بنیاد تیار کرنی ہوگی۔ یہ سبق اس سیریز کے پچھلے حصوں کے تصورات اور کوڈ پر براہ راست تعمیر کرتا ہے۔
+اسٹیٹ مینجمنٹ کے تصورات میں غوطہ لگانے سے پہلے، آپ کو اپنا ڈیولپمنٹ ماحول مناسب طریقے سے سیٹ اپ کرنا ہوگا اور اپنی بینکنگ ایپ کی بنیاد تیار کرنی ہوگی۔ یہ سبق اس سیریز کے پچھلے حصوں کے تصورات اور کوڈ پر براہ راست تعمیر کرتا ہے۔
+
+پیش رفت سے پہلے درج ذیل اجزاء کو تیار رکھیں:
 
 **ضروری سیٹ اپ:**
-- [ڈیٹا فچنگ سبق](../3-data/README.md) مکمل کریں - آپ کی ایپ کو کامیابی کے ساتھ اکاؤنٹ ڈیٹا لوڈ اور ظاہر کرنا چاہیے
-- اپنے سسٹم پر [Node.js](https://nodejs.org) انسٹال کریں تاکہ بیک اینڈ API چلایا جا سکے
-- اکاؤنٹ ڈیٹا آپریشنز کو ہینڈل کرنے کے لیے [سرور API](../api/README.md) کو مقامی طور پر شروع کریں
+- [ڈیٹا فیچنگ سبق](../3-data/README.md) مکمل کریں - آپ کی ایپ کو کامیابی سے اکاؤنٹ ڈیٹا لوڈ اور ظاہر کرنا چاہیے۔
+- اپنے سسٹم پر [Node.js](https://nodejs.org) انسٹال کریں تاکہ بیک اینڈ API چلایا جا سکے۔
+- اکاؤنٹ ڈیٹا آپریشنز کو ہینڈل کرنے کے لیے [سرور API](../api/README.md) کو مقامی طور پر شروع کریں۔
 
-**اپنے ماحول کی جانچ کریں:**
+**اپنے ماحول کی جانچ:**
 
-اپنے API سرور کے صحیح طریقے سے چلنے کی تصدیق کرنے کے لیے، ٹرمینل میں یہ کمانڈ چلائیں:
+اپنے API سرور کو درست طریقے سے چلانے کی تصدیق کریں، اس کمانڈ کو ٹرمینل میں چلائیں:
 
 ```sh
 curl http://localhost:5000/api
@@ -42,69 +98,143 @@ curl http://localhost:5000/api
 ```
 
 **یہ کمانڈ کیا کرتی ہے:**
-- **GET درخواست بھیجتی ہے** آپ کے مقامی API سرور کو
-- **کنکشن کی جانچ کرتی ہے** اور تصدیق کرتی ہے کہ سرور جواب دے رہا ہے
-- **API ورژن کی معلومات واپس کرتی ہے** اگر سب کچھ ٹھیک کام کر رہا ہو
+- **بھیجتی ہے** ایک GET درخواست آپ کے مقامی API سرور کو
+- **جانچتی ہے** کنکشن اور تصدیق کرتی ہے کہ سرور جواب دے رہا ہے
+- **واپس کرتی ہے** API ورژن کی معلومات اگر سب کچھ درست کام کر رہا ہو
+
+## 🧠 اسٹیٹ مینجمنٹ آرکیٹیکچر کا جائزہ
+
+```mermaid
+mindmap
+  root((State Management))
+    Current Problems
+      Session Loss
+        Page Refresh Issues
+        Browser Close Impact
+        Variable Reset Problems
+      Scattered Updates
+        Multiple Modification Points
+        Debugging Challenges
+        Unpredictable Behavior
+      Incomplete Cleanup
+        Logout State Issues
+        Memory Leaks
+        Security Concerns
+    Centralized Solutions
+      Unified State Object
+        Single Source of Truth
+        Predictable Structure
+        Scalable Foundation
+      Controlled Updates
+        Immutable Patterns
+        Object.freeze Usage
+        Function-Based Changes
+      State Tracking
+        History Management
+        Debug Visibility
+        Change Auditing
+    Persistence Strategies
+      localStorage Integration
+        Session Continuity
+        JSON Serialization
+        Automatic Sync
+      Data Freshness
+        Server Refresh
+        Stale Data Handling
+        Balance Optimization
+      Storage Optimization
+        Minimal Data
+        Performance Focus
+        Security Considerations
+```
+
+**بنیادی اصول**: پیشہ ورانہ اسٹیٹ مینجمنٹ پیش بینی، پائیداری، اور کارکردگی کو متوازن کرتی ہے تاکہ قابل اعتماد صارف تجربات تخلیق کیے جا سکیں جو سادہ تعاملات سے لے کر پیچیدہ ایپلیکیشن ورک فلو تک بڑھ سکیں۔
 
 ---
 
 ## موجودہ اسٹیٹ کے مسائل کی تشخیص
 
-جیسے شرلاک ہومز جرم کے منظر کا جائزہ لیتا ہے، ہمیں اپنی موجودہ عمل درآمد میں بالکل سمجھنا ہوگا کہ کیا ہو رہا ہے اس سے پہلے کہ ہم صارف کے سیشنز کے غائب ہونے کے مسئلے کو حل کر سکیں۔
+جیسے شرلاک ہومز جرم کے منظر کا معائنہ کرتا ہے، ہمیں اپنی موجودہ عمل درآمد میں بالکل سمجھنا ہوگا کہ کیا ہو رہا ہے تاکہ صارف سیشنز کے غائب ہونے کے مسئلے کو حل کیا جا سکے۔
 
-آئیے ایک سادہ تجربہ کریں جو بنیادی اسٹیٹ مینجمنٹ چیلنجز کو ظاہر کرتا ہے:
+آئیے ایک سادہ تجربہ کریں جو اسٹیٹ مینجمنٹ کے بنیادی چیلنجز کو ظاہر کرتا ہے:
 
-**🧪 یہ تشخیصی ٹیسٹ آزمائیں:**
-1. اپنی بینکنگ ایپ میں لاگ ان کریں اور ڈیش بورڈ پر جائیں
-2. براؤزر کا صفحہ ریفریش کریں
-3. مشاہدہ کریں کہ آپ کے لاگ ان کی حیثیت کے ساتھ کیا ہوتا ہے
+**🧪 یہ تشخیصی ٹیسٹ کریں:**
+1. اپنی بینکنگ ایپ میں لاگ ان کریں اور ڈیش بورڈ پر جائیں۔
+2. براؤزر کا صفحہ ریفریش کریں۔
+3. مشاہدہ کریں کہ آپ کے لاگ ان اسٹیٹس کے ساتھ کیا ہوتا ہے۔
 
-اگر آپ کو دوبارہ لاگ ان اسکرین پر بھیج دیا جاتا ہے، تو آپ نے کلاسک اسٹیٹ پرسیسٹنس کا مسئلہ دریافت کر لیا ہے۔ یہ رویہ اس لیے ہوتا ہے کیونکہ ہماری موجودہ عمل درآمد صارف کا ڈیٹا جاوا اسکرپٹ ویریبلز میں اسٹور کرتا ہے جو ہر صفحہ لوڈ کے ساتھ ری سیٹ ہو جاتے ہیں۔
+اگر آپ کو دوبارہ لاگ ان اسکرین پر بھیج دیا جاتا ہے، تو آپ نے کلاسک اسٹیٹ پائیداری کے مسئلے کو دریافت کیا ہے۔ یہ رویہ اس لیے ہوتا ہے کیونکہ ہمارا موجودہ عمل درآمد صارف کا ڈیٹا جاوا اسکرپٹ ویریبلز میں اسٹور کرتا ہے جو ہر صفحہ لوڈ کے ساتھ ری سیٹ ہو جاتے ہیں۔
 
 **موجودہ عمل درآمد کے مسائل:**
 
-ہمارے [پچھلے سبق](../3-data/README.md) سے سادہ `account` ویریبل تین اہم مسائل پیدا کرتا ہے جو صارف کے تجربے اور کوڈ کی دیکھ بھال کو متاثر کرتے ہیں:
+ہمارے [پچھلے سبق](../3-data/README.md) سے سادہ `account` ویریبل تین اہم مسائل پیدا کرتا ہے جو صارف کے تجربے اور کوڈ کی برقرار رکھنے کی صلاحیت دونوں کو متاثر کرتے ہیں:
 
 | مسئلہ | تکنیکی وجہ | صارف پر اثر |
 |---------|--------|----------------|
 | **سیشن کا نقصان** | صفحہ ریفریش جاوا اسکرپٹ ویریبلز کو صاف کرتا ہے | صارفین کو بار بار دوبارہ تصدیق کرنی پڑتی ہے |
-| **بکھری ہوئی اپ ڈیٹس** | متعدد فنکشنز اسٹیٹ کو براہ راست تبدیل کرتے ہیں | ڈیبگنگ زیادہ مشکل ہو جاتی ہے |
+| **بکھری اپڈیٹس** | متعدد فنکشنز اسٹیٹ کو براہ راست تبدیل کرتے ہیں | ڈیبگنگ زیادہ مشکل ہو جاتی ہے |
 | **نامکمل صفائی** | لاگ آؤٹ تمام اسٹیٹ حوالوں کو صاف نہیں کرتا | ممکنہ سیکیورٹی اور پرائیویسی خدشات |
 
-**معماری کا چیلنج:**
+**آرکیٹیکچرل چیلنج:**
 
-جیسے ٹائٹینک کے کمپارٹمنٹلائزڈ ڈیزائن جو مضبوط لگتا تھا جب تک کہ ایک ساتھ کئی کمپارٹمنٹس میں پانی بھر گیا، ان مسائل کو انفرادی طور پر ٹھیک کرنے سے بنیادی معماری مسئلہ حل نہیں ہوگا۔ ہمیں ایک جامع اسٹیٹ مینجمنٹ حل کی ضرورت ہے۔
+جیسے ٹائٹینک کے کمپارٹمنٹلائزڈ ڈیزائن جو مضبوط لگتا تھا جب تک کہ متعدد کمپارٹمنٹس ایک ساتھ بھر گئے، ان مسائل کو انفرادی طور پر ٹھیک کرنا بنیادی آرکیٹیکچرل مسئلے کو حل نہیں کرے گا۔ ہمیں ایک جامع اسٹیٹ مینجمنٹ حل کی ضرورت ہے۔
 
 > 💡 **ہم یہاں اصل میں کیا حاصل کرنے کی کوشش کر رہے ہیں؟**
 
-[اسٹیٹ مینجمنٹ](https://en.wikipedia.org/wiki/State_management) واقعی دو بنیادی پہیلیاں حل کرنے کے بارے میں ہے:
-
-1. **میرا ڈیٹا کہاں ہے؟**: یہ معلوم کرنا کہ ہمارے پاس کون سی معلومات ہیں اور وہ کہاں سے آ رہی ہیں
-2. **کیا سب ایک ہی صفحے پر ہیں؟**: یہ یقینی بنانا کہ صارفین جو دیکھتے ہیں وہی ہے جو اصل میں ہو رہا ہے
-
-**ہمارا منصوبہ:**
-
-اپنے پیچھے بھاگنے کے بجائے، ہم ایک **مرکزی اسٹیٹ مینجمنٹ** سسٹم بنائیں گے۔ اسے ایسے سمجھیں جیسے ایک بہت ہی منظم شخص تمام اہم چیزوں کا انچارج ہو:
-
-![HTML، صارف کے اعمال اور اسٹیٹ کے درمیان ڈیٹا کے بہاؤ کو دکھانے والا اسکیمہ](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ur.png)
+[اسٹیٹ مینجمنٹ](https://en.wikipedia.org/wiki/State_management) واقعی دو بنیادی پہیلیوں کو حل کرنے کے بارے میں ہے:
+
+1. **میرا ڈیٹا کہاں ہے؟**: یہ معلوم کرنا کہ ہمارے پاس کون سی معلومات ہیں اور وہ کہاں سے آ رہی ہیں۔
+2. **کیا سب ایک ہی صفحے پر ہیں؟**: یہ یقینی بنانا کہ صارفین جو دیکھتے ہیں وہ اصل میں ہو رہا ہے۔
+
+**ہمارا گیم پلان:**
+
+اپنے دماغ کو الجھانے کے بجائے، ہم ایک **مرکزی اسٹیٹ مینجمنٹ** سسٹم بنائیں گے۔ اسے ایسے سمجھیں جیسے ایک بہت ہی منظم شخص تمام اہم چیزوں کا انچارج ہو:
+
+![HTML، صارف کے اعمال اور اسٹیٹ کے درمیان ڈیٹا کے بہاؤ کو ظاہر کرنے والی اسکیمہ](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ur.png)
+
+```mermaid
+flowchart TD
+    A[User Action] --> B[Event Handler]
+    B --> C[updateState Function]
+    C --> D{State Validation}
+    D -->|Valid| E[Create New State]
+    D -->|Invalid| F[Error Handling]
+    E --> G[Object.freeze]
+    G --> H[Update localStorage]
+    H --> I[Trigger UI Update]
+    I --> J[User Sees Changes]
+    F --> K[User Sees Error]
+    
+    subgraph "State Management Layer"
+        C
+        E
+        G
+    end
+    
+    subgraph "Persistence Layer"
+        H
+        L[localStorage]
+        H -.-> L
+    end
+```
 
-**اس ڈیٹا کے بہاؤ کو سمجھنا:**
+**اس ڈیٹا فلو کو سمجھنا:**
 - **مرکزی بناتا ہے** تمام ایپلیکیشن اسٹیٹ کو ایک جگہ پر
-- **راستہ دیتا ہے** تمام اسٹیٹ تبدیلیوں کو کنٹرول شدہ فنکشنز کے ذریعے
+- **روٹ کرتا ہے** تمام اسٹیٹ تبدیلیوں کو کنٹرولڈ فنکشنز کے ذریعے
 - **یقینی بناتا ہے** کہ UI موجودہ اسٹیٹ کے ساتھ ہم آہنگ رہے
-- **فراہم کرتا ہے** ڈیٹا مینجمنٹ کے لیے ایک واضح، پیش گوئی کے قابل نمونہ
+- **فراہم کرتا ہے** ڈیٹا مینجمنٹ کے لیے ایک واضح، پیش بینی پیٹرن
 
-> 💡 **پیشہ ورانہ بصیرت**: یہ سبق بنیادی تصورات پر مرکوز ہے۔ پیچیدہ ایپلیکیشنز کے لیے، [Redux](https://redux.js.org) جیسی لائبریریاں زیادہ جدید اسٹیٹ مینجمنٹ خصوصیات فراہم کرتی ہیں۔ ان بنیادی اصولوں کو سمجھنا آپ کو کسی بھی اسٹیٹ مینجمنٹ لائبریری میں مہارت حاصل کرنے میں مدد دے گا۔
+> 💡 **پیشہ ورانہ بصیرت**: یہ سبق بنیادی تصورات پر مرکوز ہے۔ پیچیدہ ایپلیکیشنز کے لیے، [Redux](https://redux.js.org) جیسی لائبریریاں زیادہ جدید اسٹیٹ مینجمنٹ فیچرز فراہم کرتی ہیں۔ ان بنیادی اصولوں کو سمجھنا آپ کو کسی بھی اسٹیٹ مینجمنٹ لائبریری میں مہارت حاصل کرنے میں مدد دے گا۔
 
-> ⚠️ **اعلی درجے کا موضوع**: ہم اسٹیٹ تبدیلیوں کے ذریعے خودکار UI اپ ڈیٹس کا احاطہ نہیں کریں گے، کیونکہ اس میں [ری ایکٹیو پروگرامنگ](https://en.wikipedia.org/wiki/Reactive_programming) کے تصورات شامل ہیں۔ اسے اپنی سیکھنے کی سفر کے لیے ایک بہترین اگلا قدم سمجھیں!
+> ⚠️ **اعلی درجے کا موضوع**: ہم اس سبق میں اسٹیٹ تبدیلیوں کے ذریعے خودکار UI اپڈیٹس کا احاطہ نہیں کریں گے، کیونکہ اس میں [ری ایکٹیو پروگرامنگ](https://en.wikipedia.org/wiki/Reactive_programming) کے تصورات شامل ہیں۔ اسے اپنے تعلیمی سفر کے لیے ایک بہترین اگلا قدم سمجھیں!
 
 ### کام: اسٹیٹ اسٹرکچر کو مرکزی بنائیں
 
-آئیے اپنی بکھری ہوئی اسٹیٹ مینجمنٹ کو ایک مرکزی نظام میں تبدیل کرنا شروع کریں۔ یہ پہلا قدم ان تمام بہتریوں کے لیے بنیاد قائم کرتا ہے جو اس کے بعد آئیں گی۔
+آئیے اپنی بکھری ہوئی اسٹیٹ مینجمنٹ کو ایک مرکزی سسٹم میں تبدیل کرنا شروع کریں۔ یہ پہلا قدم ان تمام بہتریوں کے لیے بنیاد قائم کرتا ہے جو اس کے بعد آئیں گی۔
 
 **مرحلہ 1: ایک مرکزی اسٹیٹ آبجیکٹ بنائیں**
 
-سادہ `account` اعلان کو تبدیل کریں:
+سادہ `account` ڈیکلریشن کو تبدیل کریں:
 
 ```js
 let account = null;
@@ -121,12 +251,12 @@ let state = {
 **یہ تبدیلی کیوں اہم ہے:**
 - **مرکزی بناتا ہے** تمام ایپلیکیشن ڈیٹا کو ایک جگہ پر
 - **تیار کرتا ہے** اسٹرکچر کو بعد میں مزید اسٹیٹ پراپرٹیز شامل کرنے کے لیے
-- **واضح حد بناتا ہے** اسٹیٹ اور دیگر ویریبلز کے درمیان
-- **ایسا نمونہ قائم کرتا ہے** جو آپ کی ایپ کے بڑھنے کے ساتھ ساتھ اسکیل کرے
+- **تخلیق کرتا ہے** اسٹیٹ اور دیگر ویریبلز کے درمیان ایک واضح حد
+- **قائم کرتا ہے** ایک پیٹرن جو آپ کی ایپ کے بڑھنے کے ساتھ اسکیل کرتا ہے
 
-**مرحلہ 2: اسٹیٹ تک رسائی کے نمونوں کو اپ ڈیٹ کریں**
+**مرحلہ 2: اسٹیٹ تک رسائی کے پیٹرنز کو اپڈیٹ کریں**
 
-اپنے فنکشنز کو نئے اسٹیٹ اسٹرکچر استعمال کرنے کے لیے اپ ڈیٹ کریں:
+اپنے فنکشنز کو نئے اسٹیٹ اسٹرکچر استعمال کرنے کے لیے اپڈیٹ کریں:
 
 **`register()` اور `login()` فنکشنز میں**، تبدیل کریں:
 ```js
@@ -138,43 +268,56 @@ account = ...
 state.account = ...
 ```
 
-**`updateDashboard()` فنکشن میں**، یہ لائن اوپر شامل کریں:
+**`updateDashboard()` فنکشن میں**، اوپر یہ لائن شامل کریں:
 ```js
 const account = state.account;
 ```
 
-**یہ اپ ڈیٹس کیا حاصل کرتی ہیں:**
-- **موجودہ فعالیت کو برقرار رکھتی ہیں** جبکہ اسٹرکچر کو بہتر بناتی ہیں
-- **آپ کے کوڈ کو مزید پیچیدہ اسٹیٹ مینجمنٹ کے لیے تیار کرتی ہیں**
-- **اسٹیٹ ڈیٹا تک رسائی کے لیے مستقل نمونہ بناتی ہیں**
-- **مرکزی اسٹیٹ اپ ڈیٹس کے لیے بنیاد قائم کرتی ہیں**
+**یہ اپڈیٹس کیا حاصل کرتے ہیں:**
+- **موجودہ فعالیت کو برقرار رکھتا ہے** جبکہ اسٹرکچر کو بہتر بناتا ہے
+- **آپ کے کوڈ کو مزید پیچیدہ اسٹیٹ مینجمنٹ کے لیے تیار کرتا ہے**
+- **اسٹیٹ ڈیٹا تک رسائی کے لیے مستقل پیٹرنز تخلیق کرتا ہے**
+- **مرکزی اسٹیٹ اپڈیٹس کے لیے بنیاد قائم کرتا ہے**
+
+> 💡 **نوٹ**: یہ ریفیکٹرنگ فوری طور پر ہمارے مسائل کو حل نہیں کرتی، لیکن یہ طاقتور بہتریوں کے لیے ضروری بنیاد قائم کرتی ہے!
+
+### 🎯 تعلیمی جائزہ: مرکزی اصول
+
+**رکیں اور غور کریں**: آپ نے ابھی مرکزی اسٹیٹ مینجمنٹ کی بنیاد نافذ کی ہے۔ یہ ایک اہم آرکیٹیکچرل فیصلہ ہے۔
+
+**خود تشخیص**:
+- کیا آپ وضاحت کر سکتے ہیں کہ اسٹیٹ کو ایک آبجیکٹ میں مرکزی بنانا بکھرے ہوئے ویریبلز سے کیوں بہتر ہے؟
+- اگر آپ کسی فنکشن کو `state.account` استعمال کرنے کے لیے اپڈیٹ کرنا بھول جائیں تو کیا ہوگا؟
+- یہ پیٹرن آپ کے کوڈ کو مزید جدید فیچرز کے لیے کیسے تیار کرتا ہے؟
 
-> 💡 **نوٹ**: یہ ریفیکٹرنگ فوری طور پر ہمارے مسائل کو حل نہیں کرتی، لیکن یہ آنے والی طاقتور بہتریوں کے لیے ضروری بنیاد قائم کرتی ہے!
+**حقیقی دنیا کا تعلق**: آپ نے جو مرکزی پیٹرن سیکھا ہے وہ جدید فریم ورک جیسے Redux، Vuex، اور React Context کی بنیاد ہے۔ آپ وہی آرکیٹیکچرل سوچ بنا رہے ہیں جو بڑے ایپلیکیشنز میں استعمال ہوتی ہے۔
 
-## کنٹرول شدہ اسٹیٹ اپ ڈیٹس نافذ کرنا
+**چیلنج سوال**: اگر آپ کو اپنی ایپ میں صارف کی ترجیحات (تھیم، زبان) شامل کرنے کی ضرورت ہو، تو آپ انہیں اسٹیٹ اسٹرکچر میں کہاں شامل کریں گے؟ یہ کیسے اسکیل کرے گا؟
 
-ہمارے اسٹیٹ کو مرکزی بنانے کے بعد، اگلا قدم ڈیٹا میں ترمیم کے لیے کنٹرول شدہ میکانزم قائم کرنا ہے۔ یہ طریقہ اسٹیٹ تبدیلیوں کو پیش گوئی کے قابل اور ڈیبگنگ کو آسان بناتا ہے۔
+## کنٹرولڈ اسٹیٹ اپڈیٹس کا نفاذ
 
-بنیادی اصول ایئر ٹریفک کنٹرول سے مشابہت رکھتا ہے: اسٹیٹ کو آزادانہ طور پر تبدیل کرنے کے بجائے، ہم تمام تبدیلیوں کو ایک واحد، کنٹرول شدہ فنکشن کے ذریعے چینل کریں گے۔ یہ نمونہ واضح نگرانی فراہم کرتا ہے کہ کب اور کیسے ڈیٹا تبدیل ہوتا ہے۔
+ہمارے اسٹیٹ کو مرکزی بنانے کے ساتھ، اگلا قدم ڈیٹا میں ترمیم کے لیے کنٹرولڈ میکانزم قائم کرنا ہے۔ یہ طریقہ پیش بینی اسٹیٹ تبدیلیوں اور آسان ڈیبگنگ کو یقینی بناتا ہے۔
+
+بنیادی اصول ایئر ٹریفک کنٹرول سے مشابہت رکھتا ہے: متعدد فنکشنز کو اسٹیٹ کو آزادانہ طور پر تبدیل کرنے کی اجازت دینے کے بجائے، ہم تمام تبدیلیوں کو ایک واحد، کنٹرولڈ فنکشن کے ذریعے چینل کریں گے۔ یہ پیٹرن واضح نگرانی فراہم کرتا ہے کہ کب اور کیسے ڈیٹا تبدیل ہوتا ہے۔
 
 **غیر تبدیل شدہ اسٹیٹ مینجمنٹ:**
 
-ہم اپنے `state` آبجیکٹ کو [*غیر تبدیل شدہ*](https://en.wikipedia.org/wiki/Immutable_object) کے طور پر برتیں گے، یعنی ہم اسے براہ راست تبدیل نہیں کریں گے۔ اس کے بجائے، ہر تبدیلی ایک نئے اسٹیٹ آبجیکٹ کو تخلیق کرتی ہے جس میں اپ ڈیٹ شدہ ڈیٹا ہوتا ہے۔
+ہم اپنے `state` آبجیکٹ کو [*غیر تبدیل شدہ*](https://en.wikipedia.org/wiki/Immutable_object) سمجھیں گے، یعنی ہم اسے براہ راست تبدیل نہیں کریں گے۔ اس کے بجائے، ہر تبدیلی ایک نیا اسٹیٹ آبجیکٹ تخلیق کرتی ہے جس میں اپڈیٹ شدہ ڈیٹا ہوتا ہے۔
 
-یہ طریقہ براہ راست ترمیم کے مقابلے میں ابتدائی طور پر غیر مؤثر لگ سکتا ہے، لیکن یہ ڈیبگنگ، ٹیسٹنگ، اور ایپلیکیشن کی پیش گوئی کو برقرار رکھنے کے لیے اہم فوائد فراہم کرتا ہے۔
+جبکہ یہ طریقہ براہ راست ترمیم کے مقابلے میں ابتدائی طور پر غیر موثر لگ سکتا ہے، یہ ڈیبگنگ، ٹیسٹنگ، اور ایپلیکیشن کی پیش بینی کو برقرار رکھنے کے لیے اہم فوائد فراہم کرتا ہے۔
 
 **غیر تبدیل شدہ اسٹیٹ مینجمنٹ کے فوائد:**
 
 | فائدہ | وضاحت | اثر |
 |---------|-------------|--------|
-| **پیش گوئی کے قابل** | تبدیلیاں صرف کنٹرول شدہ فنکشنز کے ذریعے ہوتی ہیں | ڈیبگنگ اور ٹیسٹنگ آسان |
+| **پیش بینی** | تبدیلیاں صرف کنٹرولڈ فنکشنز کے ذریعے ہوتی ہیں | ڈیبگنگ اور ٹیسٹنگ آسان |
 | **تاریخ کا ٹریکنگ** | ہر اسٹیٹ تبدیلی ایک نیا آبجیکٹ تخلیق کرتی ہے | انڈو/ریڈو فعالیت کو فعال کرتا ہے |
 | **سائیڈ ایفیکٹ کی روک تھام** | کوئی حادثاتی ترمیم نہیں | پراسرار بگز کو روکتا ہے |
-| **کارکردگی کی اصلاح** | آسانی سے پتہ چلتا ہے کہ اسٹیٹ واقعی تبدیل ہوا | مؤثر UI اپ ڈیٹس کو فعال کرتا ہے |
+| **کارکردگی کی اصلاح** | آسانی سے پتہ چلتا ہے کہ اسٹیٹ واقعی تبدیل ہوا | موثر UI اپڈیٹس کو فعال کرتا ہے |
 
-**JavaScript میں `Object.freeze()` کے ساتھ غیر تبدیل شدہ اسٹیٹ:**
+**جاوا اسکرپٹ میں `Object.freeze()` کے ساتھ غیر تبدیل شدہ اسٹیٹ:**
 
-JavaScript [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) فراہم کرتا ہے تاکہ آبجیکٹ کی ترمیم کو روکا جا سکے:
+جاوا اسکرپٹ [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) فراہم کرتا ہے تاکہ آبجیکٹ کی ترمیم کو روکا جا سکے:
 
 ```js
 const immutableState = Object.freeze({ account: userData });
@@ -184,10 +327,30 @@ const immutableState = Object.freeze({ account: userData });
 **یہاں کیا ہوتا ہے:**
 - **روکتا ہے** براہ راست پراپرٹی اسائنمنٹس یا ڈیلیشنز
 - **استثنیٰ پھینکتا ہے** اگر ترمیم کی کوشش کی جائے
-- **یقینی بناتا ہے** کہ اسٹیٹ تبدیلیاں کنٹرول شدہ فنکشنز کے ذریعے ہونی چاہئیں
-- **ایک واضح معاہدہ تخلیق کرتا ہے** کہ اسٹیٹ کو کیسے اپ ڈیٹ کیا جا سکتا ہے
-
-> 💡 **گہرائی میں جائیں**: [MDN دستاویزات](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) میں *شالو* اور *ڈیپ* غیر تبدیل شدہ آبجیکٹس کے درمیان فرق کے بارے میں جانیں۔ پیچیدہ اسٹیٹ اسٹرکچرز کے لیے اس فرق کو سمجھنا بہت ضروری ہے۔
+- **یقینی بناتا ہے** کہ اسٹیٹ تبدیلیاں کنٹرولڈ فنکشنز کے ذریعے ہونی چاہئیں
+- **تخلیق کرتا ہے** اسٹیٹ کو اپڈیٹ کرنے کے لیے ایک واضح معاہدہ
+
+> 💡 **گہرائی میں جائیں**: [MDN دستاویزات](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) میں *شالو* اور *ڈیپ* غیر تبدیل شدہ آبجیکٹس کے درمیان فرق کے بارے میں جانیں۔ پیچیدہ اسٹیٹ اسٹرکچرز کے لیے اس فرق کو سمجھنا ضروری ہے۔
+
+```mermaid
+stateDiagram-v2
+    [*] --> StateV1: Initial State
+    StateV1 --> StateV2: updateState('account', newData)
+    StateV2 --> StateV3: updateState('account', anotherUpdate)
+    StateV3 --> StateV4: updateState('preferences', userSettings)
+    
+    note right of StateV1
+        Object.freeze()
+        Immutable
+        Debuggable
+    end note
+    
+    note right of StateV2
+        New object created
+        Previous state preserved
+        Predictable changes
+    end note
+```
 
 ### کام
 
@@ -202,75 +365,76 @@ function updateState(property, newData) {
 }
 ```
 
-اس فنکشن میں، ہم ایک نیا اسٹیٹ آبجیکٹ تخلیق کر رہے ہیں اور پچھلے اسٹیٹ سے ڈیٹا کو [*اسپریڈ (`...`) آپریٹر*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) کا استعمال کرتے ہوئے کاپی کر رہے ہیں۔ پھر ہم اسٹیٹ آبجیکٹ کی ایک خاص پراپرٹی کو نئے ڈیٹا کے ساتھ [بریکٹ نوٹیشن](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` کے ذریعے اسائن کرتے ہیں۔ آخر میں، ہم `Object.freeze()` کا استعمال کرتے ہوئے آبجیکٹ کو ترمیم سے روک دیتے ہیں۔ فی الحال ہمارے پاس اسٹیٹ میں صرف `account` پراپرٹی اسٹور ہے، لیکن اس طریقے کے ساتھ آپ اسٹیٹ میں جتنی پراپرٹیز چاہیں شامل کر سکتے ہیں۔
-
-ہم اسٹیٹ کی ابتدائی حالت کو بھی اپ ڈیٹ کریں گے تاکہ یہ یقینی بنایا جا سکے کہ ابتدائی اسٹیٹ بھی فریز ہو:
-
-```js
-let state = Object.freeze({
-  account: null
-});
-```
-
-اس کے بعد، `register` فنکشن کو اپ ڈیٹ کریں اور `state.account = result;` اسائنمنٹ کو تبدیل کریں:
+اس فنکشن میں، ہم ایک نیا اسٹیٹ آبجیکٹ تخلیق کر رہے ہیں اور پچھلے اسٹیٹ سے ڈیٹا کو [*اسپریڈ (`...`) آپریٹر*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) کا استعمال کرتے ہوئے کاپی کر رہے ہیں۔ پھر ہم اسٹیٹ آبجیکٹ کی ایک خاص پراپرٹی کو نئے ڈیٹا کے ساتھ [بریکٹ نوٹیشن](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` کے ذریعے اسائنمنٹ کے ذریعے اووررائیڈ کرتے ہیں۔ آخر میں، ہم `Object.freeze()` کا استعمال کرتے ہوئے آبجیکٹ کو لاک کرتے ہیں تاکہ ترمیم کو روکا جا سکے۔ فی الحال ہمارے پاس اسٹیٹ میں صرف `account` پراپرٹی اسٹور ہے، لیکن اس طریقے کے ساتھ آپ اسٹیٹ میں جتنی پراپرٹیز چاہیں شامل کر سکتے ہیں۔
 
-```js
-updateState('account', result);
-```
 
-`login` فنکشن کے ساتھ بھی یہی کریں، `state.account = data;` کو تبدیل کریں:
-
-```js
-updateState('account', data);
-```
-
-ہم اب موقع لیں گے کہ اس مسئلے کو ٹھیک کریں جس میں صارف کے *Logout* پر کلک کرنے پر اکاؤنٹ ڈیٹا صاف نہیں ہوتا۔
-
-ایک نیا فنکشن `logout()` بنائیں:
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-`updateDashboard()` میں، ری ڈائریکشن `return navigate('/login');` کو `return logout();` کے ساتھ تبدیل کریں۔
-
-ایک نیا اکاؤنٹ رجسٹر کرنے، لاگ آؤٹ کرنے اور دوبارہ لاگ ان کرنے کی کوشش کریں تاکہ یہ چیک کریں کہ سب کچھ اب بھی صحیح طریقے سے کام کر رہا ہے۔
+| **یہ کتنی دیر تک برقرار رہنی چاہیے؟** | لاگ ان حالت بمقابلہ عارضی UI ترجیحات | مناسب اسٹوریج کی مدت کا انتخاب کریں |
+| **کیا سرور کو اس کی ضرورت ہے؟** | تصدیقی ٹوکن بمقابلہ UI سیٹنگز | شیئرنگ کی ضروریات کا تعین کریں |
 
-> ٹپ: آپ تمام اسٹیٹ تبدیلیوں کو دیکھنے کے لیے `updateState()` کے نیچے `console.log(state)` شامل کر سکتے ہیں اور اپنے براؤزر کے ڈیولپمنٹ ٹولز میں کنسول کھول سکتے ہیں۔
+**براؤزر اسٹوریج کے اختیارات:**
 
-## ڈیٹا پرسیسٹنس نافذ کرنا
+جدید براؤزر مختلف اسٹوریج میکانزم فراہم کرتے ہیں، ہر ایک مختلف استعمال کے لیے ڈیزائن کیا گیا ہے:
 
-ہم نے پہلے جس سیشن نقصان کے مسئلے کی نشاندہی کی تھی، اس کے لیے ایک پرسیسٹنس حل کی ضرورت ہے جو صارف کی اسٹیٹ کو براؤزر سیشنز کے دوران برقرار رکھے۔ یہ ہماری ایپلیکیشن کو ایک عارضی تجربے سے ایک قابل اعتماد، پیشہ ورانہ ٹول میں تبدیل کرتا ہے۔
+**پرائمری اسٹوریج APIs:**
 
-سوچیں کہ ایٹمی گھڑیاں بجلی کی بندش کے دوران بھی درست وقت کو برقرار رکھتی ہیں کیونکہ وہ غیر مستحکم میموری میں اہم اسٹیٹ کو اسٹور کرتی ہیں۔ اسی طرح، ویب ایپلیکیشنز کو مستقل اسٹوریج میکانزم کی ضرورت ہوتی ہے تاکہ براؤزر سیشنز اور صفحہ ریفریشز کے دوران ضروری صارف ڈیٹا کو محفوظ رکھا جا سکے۔
+1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: مستقل [Key/Value storage](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
+   - **ڈیٹا** کو براؤزر سیشنز کے دوران غیر معینہ مدت تک برقرار رکھتا ہے  
+   - **براؤزر ری اسٹارٹ** اور کمپیوٹر ریبوٹس کے بعد بھی برقرار رہتا ہے
+   - **ویب سائٹ کے مخصوص ڈومین** تک محدود
+   - **صارف کی ترجیحات** اور لاگ ان حالت کے لیے بہترین
 
-**ڈیٹا پرسیسٹنس کے لیے اسٹریٹجک سوالات:**
+2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: عارضی سیشن اسٹوریج
+   - **فعال سیشنز کے دوران** localStorage کی طرح کام کرتا ہے
+   - **خودکار طور پر** براؤزر ٹیب بند ہونے پر صاف ہو جاتا ہے
+   - **عارضی ڈیٹا** کے لیے مثالی جو برقرار نہیں رہنا چاہیے
 
-پرسیسٹنس کو نافذ کرنے سے پہلے، ان اہم عوامل پر غور کریں:
+3. **[HTTP Cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: سرور کے ساتھ شیئرڈ اسٹوریج
+   - **ہر سرور درخواست کے ساتھ خودکار طور پر** بھیجا جاتا ہے
+   - **تصدیقی ٹوکنز** کے لیے بہترین
+   - **سائز میں محدود** اور کارکردگی پر اثر ڈال سکتا ہے
 
-| سوال | بینکنگ ایپ کا سیاق و سباق | فیصلہ کا اثر |
-|----------|-------------------|----------------|
-| **کیا ڈیٹا حساس ہے؟** | اکاؤنٹ بیلنس، ٹرانزیکشن ہسٹری | محفوظ اسٹوریج کے طریقے منتخب کریں |
-| **یہ کتنی دیر تک برقرار رہنا چاہیے؟** | لاگ ان اسٹیٹ بمقابلہ عارضی UI ترجیحات | مناسب اسٹوریج دورانیہ منتخب کریں |
-| **کیا سرور کو اس کی ضرورت ہے؟** | تصدیقی ٹوکن بمقابلہ UI سیٹنگز | شیئرنگ کی ضروریات کا تعین کریں |
+**ڈیٹا سیریلائزیشن کی ضرورت:**
 
-**براؤزر اسٹوریج کے اختیارات:**
+`localStorage` اور `sessionStorage` صرف [strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) کو اسٹور کرتے ہیں:
 
-جدید براؤزرز کئی اسٹوریج میکانزم فراہم کرتے ہیں، ہر ایک مختلف استعمال کے لیے ڈیزائن کیا گیا ہے:
+```js
+// Convert objects to JSON strings for storage
+const accountData = { user: 'john', balance: 150 };
+localStorage.setItem('account', JSON.stringify(accountData));
 
-**پرائمری اسٹوریج APIs:**
+// Parse JSON strings back to objects when retrieving
+const savedAccount = JSON.parse(localStorage.getItem('account'));
+```
 
-1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: مستقل [Key/Value اسٹوریج](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)
-   - **برقرار رکھتا ہے** ڈیٹا کو براؤزر سیشنز کے دوران غیر معینہ مدت تک  
-   - **براؤزر ری اسٹارٹس اور
-> 💡 **اعلیٰ آپشن**: پیچیدہ آف لائن ایپلیکیشنز کے لیے جن میں بڑے ڈیٹا سیٹس ہوں، [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) پر غور کریں۔ یہ مکمل کلائنٹ سائیڈ ڈیٹا بیس فراہم کرتا ہے لیکن اس کے لیے زیادہ پیچیدہ عمل درآمد کی ضرورت ہوتی ہے۔
+**سیریلائزیشن کو سمجھنا:**
+- **JavaScript objects کو JSON strings میں تبدیل کرتا ہے** [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) کا استعمال کرتے ہوئے
+- **JSON سے objects کو دوبارہ بناتا ہے** [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) کا استعمال کرتے ہوئے
+- **خودکار طور پر پیچیدہ nested objects اور arrays کو ہینڈل کرتا ہے**
+- **functions، undefined values، اور circular references پر ناکام ہوتا ہے**
+
+> 💡 **ایڈوانسڈ آپشن**: پیچیدہ آف لائن ایپلیکیشنز کے لیے جن میں بڑے ڈیٹا سیٹس ہوں، [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) پر غور کریں۔ یہ مکمل کلائنٹ سائیڈ ڈیٹا بیس فراہم کرتا ہے لیکن زیادہ پیچیدہ عمل درآمد کی ضرورت ہوتی ہے۔
+
+```mermaid
+quadrantChart
+    title Browser Storage Options
+    x-axis Low Complexity --> High Complexity
+    y-axis Short Duration --> Long Duration
+    
+    quadrant-1 Professional Tools
+    quadrant-2 Simple Persistence
+    quadrant-3 Temporary Storage
+    quadrant-4 Advanced Systems
+    
+    localStorage: [0.3, 0.8]
+    sessionStorage: [0.2, 0.2]
+    HTTP Cookies: [0.6, 0.7]
+    IndexedDB: [0.9, 0.9]
+    Memory Variables: [0.1, 0.1]
+```
 
-### کام: localStorage پرسسٹنس نافذ کریں
+### ٹاسک: localStorage پرسسٹنس کو نافذ کریں
 
-آئیے مستقل اسٹوریج نافذ کریں تاکہ صارفین لاگ ان رہیں جب تک کہ وہ واضح طور پر لاگ آؤٹ نہ کریں۔ ہم `localStorage` استعمال کریں گے تاکہ اکاؤنٹ ڈیٹا کو براؤزر سیشنز کے درمیان محفوظ رکھا جا سکے۔
+آئیے مستقل اسٹوریج کو نافذ کریں تاکہ صارفین لاگ آؤٹ کرنے تک لاگ ان رہیں۔ ہم `localStorage` کا استعمال کریں گے تاکہ اکاؤنٹ ڈیٹا کو براؤزر سیشنز کے دوران محفوظ رکھا جا سکے۔
 
 **مرحلہ 1: اسٹوریج کنفیگریشن کی وضاحت کریں**
 
@@ -279,10 +443,10 @@ const storageKey = 'savedAccount';
 ```
 
 **یہ مستقل کیا فراہم کرتا ہے:**
-- **ایک مستقل شناخت** ہمارے محفوظ کردہ ڈیٹا کے لیے بناتا ہے
-- **ٹائپوز کو روکتا ہے** اسٹوریج کی کلید کے حوالوں میں
-- **آسان بناتا ہے** اسٹوریج کی کلید کو تبدیل کرنا اگر ضرورت ہو
-- **بہترین طریقوں کی پیروی کرتا ہے** قابل دیکھ بھال کوڈ کے لیے
+- **ہمارے اسٹورڈ ڈیٹا کے لیے ایک مستقل شناخت کنندہ بناتا ہے**
+- **اسٹوریج کی کلید کے حوالہ جات میں ٹائپوز کو روکتا ہے**
+- **اسٹوریج کی کلید کو آسانی سے تبدیل کرنے کی اجازت دیتا ہے**
+- **قابل دیکھ بھال کوڈ کے لیے بہترین طریقوں کی پیروی کرتا ہے**
 
 **مرحلہ 2: خودکار پرسسٹنس شامل کریں**
 
@@ -293,16 +457,16 @@ localStorage.setItem(storageKey, JSON.stringify(state.account));
 ```
 
 **یہاں کیا ہوتا ہے:**
-- **اکاؤنٹ آبجیکٹ کو JSON اسٹرنگ میں تبدیل کرتا ہے** اسٹوریج کے لیے
-- **ڈیٹا محفوظ کرتا ہے** ہماری مستقل اسٹوریج کلید کا استعمال کرتے ہوئے
-- **خودکار طور پر عمل کرتا ہے** جب بھی اسٹیٹ میں تبدیلیاں ہوتی ہیں
-- **یقینی بناتا ہے** کہ محفوظ کردہ ڈیٹا ہمیشہ موجودہ اسٹیٹ کے ساتھ ہم آہنگ ہو
+- **اکاؤنٹ object کو JSON string میں تبدیل کرتا ہے** اسٹوریج کے لیے
+- **ڈیٹا کو ہماری مستقل اسٹوریج کلید کا استعمال کرتے ہوئے محفوظ کرتا ہے**
+- **خودکار طور پر** جب بھی اسٹیٹ میں تبدیلی ہوتی ہے عمل درآمد کرتا ہے
+- **یقینی بناتا ہے** کہ محفوظ شدہ ڈیٹا ہمیشہ موجودہ اسٹیٹ کے ساتھ ہم آہنگ ہوتا ہے
 
-> 💡 **آرکیٹیکچر کا فائدہ**: چونکہ ہم نے تمام اسٹیٹ اپ ڈیٹس کو `updateState()` کے ذریعے مرکزی بنایا، پرسسٹنس شامل کرنے کے لیے صرف ایک لائن کوڈ کی ضرورت تھی۔ یہ اچھے آرکیٹیکچرل فیصلوں کی طاقت کو ظاہر کرتا ہے!
+> 💡 **آرکیٹیکچر کا فائدہ**: چونکہ ہم نے تمام اسٹیٹ اپڈیٹس کو `updateState()` کے ذریعے مرکزی بنایا، پرسسٹنس شامل کرنے کے لیے صرف ایک لائن کوڈ کی ضرورت تھی۔ یہ اچھے آرکیٹیکچرل فیصلوں کی طاقت کو ظاہر کرتا ہے!
 
-**مرحلہ 3: ایپ لوڈ پر اسٹیٹ بحال کریں**
+**مرحلہ 3: ایپ لوڈ پر اسٹیٹ کو بحال کریں**
 
-محفوظ کردہ ڈیٹا کو بحال کرنے کے لیے ایک ابتدائی فنکشن بنائیں:
+محفوظ شدہ ڈیٹا کو بحال کرنے کے لیے ایک initialization فنکشن بنائیں:
 
 ```js
 function init() {
@@ -319,16 +483,16 @@ function init() {
 init();
 ```
 
-**ابتدائی عمل کو سمجھنا:**
-- **پہلے سے محفوظ کردہ اکاؤنٹ ڈیٹا کو حاصل کرتا ہے** localStorage سے
-- **JSON اسٹرنگ کو دوبارہ جاوا اسکرپٹ آبجیکٹ میں تبدیل کرتا ہے**
-- **اسٹیٹ کو اپ ڈیٹ کرتا ہے** ہماری کنٹرولڈ اپ ڈیٹ فنکشن کا استعمال کرتے ہوئے
-- **صارف کا سیشن خودکار طور پر بحال کرتا ہے** صفحہ لوڈ پر
-- **روٹ اپ ڈیٹس سے پہلے عمل کرتا ہے** تاکہ اسٹیٹ دستیاب ہو
+**initialization کے عمل کو سمجھنا:**
+- **پہلے سے محفوظ شدہ اکاؤنٹ ڈیٹا کو localStorage سے حاصل کرتا ہے**
+- **JSON string کو دوبارہ JavaScript object میں تبدیل کرتا ہے**
+- **ہمارے کنٹرولڈ اپڈیٹ فنکشن کا استعمال کرتے ہوئے اسٹیٹ کو اپڈیٹ کرتا ہے**
+- **صارف کے سیشن کو خودکار طور پر صفحہ لوڈ پر بحال کرتا ہے**
+- **روٹ اپڈیٹس سے پہلے عمل درآمد کرتا ہے تاکہ اسٹیٹ دستیاب ہو**
 
 **مرحلہ 4: ڈیفالٹ روٹ کو بہتر بنائیں**
 
-پرسسٹنس کا فائدہ اٹھانے کے لیے ڈیفالٹ روٹ کو اپ ڈیٹ کریں:
+پرسسٹنس کا فائدہ اٹھانے کے لیے ڈیفالٹ روٹ کو اپڈیٹ کریں:
 
 `updateRoute()` میں، تبدیل کریں:
 ```js
@@ -338,9 +502,9 @@ return navigate('/dashboard');
 
 **یہ تبدیلی کیوں معنی رکھتی ہے:**
 - **ہمارے نئے پرسسٹنس سسٹم کا مؤثر طریقے سے فائدہ اٹھاتا ہے**
-- **ڈیش بورڈ کو اجازت دیتا ہے** کہ وہ تصدیقی چیک سنبھالے
-- **لاگ ان پر خودکار ری ڈائریکٹ کرتا ہے** اگر کوئی محفوظ سیشن موجود نہ ہو
-- **زیادہ ہموار صارف تجربہ تخلیق کرتا ہے**
+- **ڈیش بورڈ کو تصدیقی چیکز کو ہینڈل کرنے کی اجازت دیتا ہے**
+- **اگر کوئی محفوظ شدہ سیشن موجود نہ ہو تو خودکار طور پر لاگ ان پر ری ڈائریکٹ کرتا ہے**
+- **صارف کے لیے زیادہ ہموار تجربہ تخلیق کرتا ہے**
 
 **اپنے نفاذ کی جانچ کریں:**
 
@@ -350,18 +514,32 @@ return navigate('/dashboard');
 4. اپنا براؤزر بند کریں اور دوبارہ کھولیں
 5. اپنی ایپ پر واپس جائیں اور تصدیق کریں کہ آپ اب بھی لاگ ان ہیں
 
-🎉 **کامیابی حاصل کی گئی**: آپ نے کامیابی سے مستقل اسٹیٹ مینجمنٹ نافذ کی! آپ کی ایپ اب ایک پیشہ ور ویب ایپلیکیشن کی طرح کام کرتی ہے۔
+🎉 **کامیابی حاصل کی گئی**: آپ نے کامیابی کے ساتھ مستقل اسٹیٹ مینجمنٹ کو نافذ کیا! آپ کی ایپ اب ایک پیشہ ور ویب ایپلیکیشن کی طرح کام کرتی ہے۔
 
-## پرسسٹنس کو ڈیٹا تازگی کے ساتھ متوازن کرنا
+### 🎯 تعلیمی جائزہ: پرسسٹنس آرکیٹیکچر
 
-ہمارا پرسسٹنس سسٹم کامیابی سے صارف سیشنز کو برقرار رکھتا ہے، لیکن ایک نیا چیلنج پیش کرتا ہے: ڈیٹا کی تازگی۔ جب متعدد صارفین یا ایپلیکیشنز ایک ہی سرور ڈیٹا میں ترمیم کرتے ہیں، تو مقامی کیشڈ معلومات پرانی ہو جاتی ہیں۔
+**آرکیٹیکچر کو سمجھنا**: آپ نے ایک پیچیدہ پرسسٹنس لیئر نافذ کی ہے جو صارف کے تجربے کو ڈیٹا مینجمنٹ کی پیچیدگی کے ساتھ متوازن کرتی ہے۔
 
-یہ صورتحال ان وائکنگ نیویگیٹرز کی طرح ہے جو محفوظ کردہ اسٹار چارٹس اور موجودہ آسمانی مشاہدات دونوں پر انحصار کرتے تھے۔ چارٹس مستقل مزاجی فراہم کرتے تھے، لیکن نیویگیٹرز کو بدلتے حالات کے لیے تازہ مشاہدات کی ضرورت ہوتی تھی۔ اسی طرح، ہماری ایپلیکیشن کو صارف کے مستقل اسٹیٹ اور موجودہ سرور ڈیٹا دونوں کی ضرورت ہے۔
+**کلیدی تصورات میں مہارت حاصل کی**:
+- **JSON سیریلائزیشن**: پیچیدہ objects کو اسٹور کرنے کے قابل strings میں تبدیل کرنا
+- **خودکار ہم آہنگی**: اسٹیٹ میں تبدیلیاں پرسسٹنس اسٹوریج کو متحرک کرتی ہیں
+- **سیشن کی بحالی**: ایپس انٹروپشنز کے بعد صارف کے سیاق و سباق کو بحال کر سکتی ہیں
+- **مرکزی پرسسٹنس**: ایک اپڈیٹ فنکشن تمام اسٹوریج کو ہینڈل کرتا ہے
 
-**🧪 ڈیٹا تازگی کے مسئلے کو دریافت کرنا:**
+**صنعتی تعلق**: یہ پرسسٹنس پیٹرن Progressive Web Apps (PWAs)، آف لائن فرسٹ ایپلیکیشنز، اور جدید موبائل ویب تجربات کے لیے بنیادی ہے۔ آپ پروڈکشن لیول کی صلاحیتیں بنا رہے ہیں۔
+
+**عکاسی کا سوال**: آپ اس سسٹم کو ایک ہی ڈیوائس پر متعدد صارف اکاؤنٹس کو ہینڈل کرنے کے لیے کیسے تبدیل کریں گے؟ پرائیویسی اور سیکیورٹی کے مضمرات پر غور کریں۔
+
+## پرسسٹنس کو ڈیٹا کی تازگی کے ساتھ متوازن کرنا
+
+ہمارا پرسسٹنس سسٹم کامیابی سے صارف کے سیشنز کو برقرار رکھتا ہے، لیکن ایک نیا چیلنج پیش کرتا ہے: ڈیٹا کی تازگی۔ جب متعدد صارفین یا ایپلیکیشنز ایک ہی سرور ڈیٹا کو تبدیل کرتے ہیں، تو لوکل کیشڈ معلومات پرانی ہو جاتی ہیں۔
+
+یہ صورتحال ان وائکنگ نیویگیٹرز کی طرح ہے جو محفوظ شدہ اسٹار چارٹس اور موجودہ آسمانی مشاہدات دونوں پر انحصار کرتے تھے۔ چارٹس مستقل مزاجی فراہم کرتے تھے، لیکن نیویگیٹرز کو بدلتے حالات کے لیے تازہ مشاہدات کی ضرورت ہوتی تھی۔ اسی طرح، ہماری ایپلیکیشن کو صارف کے مستقل اسٹیٹ اور موجودہ سرور ڈیٹا دونوں کی ضرورت ہے۔
+
+**🧪 ڈیٹا کی تازگی کے مسئلے کو دریافت کرنا:**
 
 1. `test` اکاؤنٹ کا استعمال کرتے ہوئے ڈیش بورڈ میں لاگ ان کریں
-2. اس کمانڈ کو ٹرمینل میں چلائیں تاکہ کسی دوسرے ذریعہ سے ٹرانزیکشن کی نقل کی جا سکے:
+2. دوسرے ذریعہ سے ٹرانزیکشن کی نقل کرنے کے لیے ٹرمینل میں یہ کمانڈ چلائیں:
 
 ```sh
 curl --request POST \
@@ -371,26 +549,43 @@ curl --request POST \
 ```
 
 3. اپنے براؤزر میں ڈیش بورڈ صفحہ کو ریفریش کریں
-4. مشاہدہ کریں کہ آیا آپ کو نیا ٹرانزیکشن نظر آتا ہے
+4. دیکھیں کہ آیا آپ کو نیا ٹرانزیکشن نظر آتا ہے
 
 **یہ ٹیسٹ کیا ظاہر کرتا ہے:**
-- **دکھاتا ہے** کہ localStorage "پرانی" (غیر تازہ) ہو سکتی ہے
+- **دکھاتا ہے** کہ لوکل اسٹوریج "پرانی" (outdated) ہو سکتی ہے
 - **حقیقی دنیا کے منظرنامے کی نقل کرتا ہے** جہاں ڈیٹا تبدیلیاں آپ کی ایپ کے باہر ہوتی ہیں
-- **پرسسٹنس اور ڈیٹا تازگی کے درمیان تناؤ کو ظاہر کرتا ہے**
+- **پرسسٹنس اور ڈیٹا کی تازگی کے درمیان تناؤ کو ظاہر کرتا ہے**
 
-**ڈیٹا تازگی کا چیلنج:**
+**ڈیٹا کی تازگی کا چیلنج:**
 
 | مسئلہ | وجہ | صارف پر اثر |
 |-------|-----|-------------|
-| **پرانی ڈیٹا** | localStorage خودکار طور پر ختم نہیں ہوتا | صارفین کو پرانی معلومات نظر آتی ہیں |
-| **سرور تبدیلیاں** | دیگر ایپس/صارفین ایک ہی ڈیٹا میں ترمیم کرتے ہیں | پلیٹ فارمز کے درمیان غیر مستقل نظارے |
-| **کیش بمقابلہ حقیقت** | مقامی کیش سرور اسٹیٹ سے میل نہیں کھاتا | خراب صارف تجربہ اور الجھن |
+| **پرانی ڈیٹا** | localStorage خودکار طور پر ختم نہیں ہوتا | صارفین پرانی معلومات دیکھتے ہیں |
+| **سرور تبدیلیاں** | دیگر ایپس/صارفین ایک ہی ڈیٹا کو تبدیل کرتے ہیں | پلیٹ فارمز کے درمیان غیر مستقل نظارے |
+| **کیش بمقابلہ حقیقت** | لوکل کیش سرور اسٹیٹ سے میل نہیں کھاتا | خراب صارف تجربہ اور الجھن |
 
 **حل کی حکمت عملی:**
 
-ہم "لوڈ پر ریفریش" پیٹرن نافذ کریں گے جو پرسسٹنس کے فوائد کو تازہ ڈیٹا کی ضرورت کے ساتھ متوازن کرتا ہے۔ یہ طریقہ ہموار صارف تجربہ برقرار رکھتا ہے جبکہ ڈیٹا کی درستگی کو یقینی بناتا ہے۔
+ہم "ریفریش آن لوڈ" پیٹرن نافذ کریں گے جو پرسسٹنس کے فوائد کو ڈیٹا کی درستگی کی ضرورت کے ساتھ متوازن کرتا ہے۔ یہ طریقہ ہموار صارف تجربہ برقرار رکھتا ہے جبکہ ڈیٹا کی درستگی کو یقینی بناتا ہے۔
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant A as App
+    participant L as localStorage
+    participant S as Server
+    
+    U->>A: Opens app
+    A->>L: Load saved state
+    L-->>A: Return cached data
+    A->>U: Show UI immediately
+    A->>S: Fetch fresh data
+    S-->>A: Return current data
+    A->>L: Update cache
+    A->>U: Update UI with fresh data
+```
 
-### کام: ڈیٹا ریفریش سسٹم نافذ کریں
+### ٹاسک: ڈیٹا ریفریش سسٹم نافذ کریں
 
 ہم ایک ایسا سسٹم بنائیں گے جو سرور سے تازہ ڈیٹا خودکار طور پر حاصل کرے جبکہ ہمارے پرسسٹنس اسٹیٹ مینجمنٹ کے فوائد کو برقرار رکھے۔
 
@@ -414,11 +609,11 @@ async function updateAccountData() {
 
 **اس فنکشن کی منطق کو سمجھنا:**
 - **چیک کرتا ہے** کہ آیا صارف فی الحال لاگ ان ہے (state.account موجود ہے)
-- **لاگ آؤٹ پر ری ڈائریکٹ کرتا ہے** اگر کوئی درست سیشن نہ پایا جائے
+- **اگر کوئی درست سیشن نہ ہو تو لاگ آؤٹ پر ری ڈائریکٹ کرتا ہے**
 - **سرور سے تازہ اکاؤنٹ ڈیٹا حاصل کرتا ہے** موجودہ `getAccount()` فنکشن کا استعمال کرتے ہوئے
-- **سرور کی غلطیوں کو خوش اسلوبی سے سنبھالتا ہے** غیر درست سیشنز کو لاگ آؤٹ کر کے
-- **اسٹیٹ کو تازہ ڈیٹا کے ساتھ اپ ڈیٹ کرتا ہے** ہماری کنٹرولڈ اپ ڈیٹ سسٹم کا استعمال کرتے ہوئے
-- **خودکار localStorage پرسسٹنس کو متحرک کرتا ہے** `updateState()` فنکشن کے ذریعے
+- **سرور کی غلطیوں کو ہینڈل کرتا ہے** غیر درست سیشنز کو لاگ آؤٹ کر کے
+- **ہمارے کنٹرولڈ اپڈیٹ سسٹم کا استعمال کرتے ہوئے اسٹیٹ کو اپڈیٹ کرتا ہے**
+- **updateState() فنکشن کے ذریعے خودکار localStorage پرسسٹنس کو متحرک کرتا ہے**
 
 **مرحلہ 2: ڈیش بورڈ ریفریش ہینڈلر بنائیں**
 
@@ -430,14 +625,14 @@ async function refresh() {
 ```
 
 **یہ ریفریش فنکشن کیا حاصل کرتا ہے:**
-- **ڈیٹا ریفریش اور UI اپ ڈیٹ عمل کو مربوط کرتا ہے**
-- **تازہ ڈیٹا لوڈ ہونے کا انتظار کرتا ہے** ڈسپلے کو اپ ڈیٹ کرنے سے پہلے
+- **ڈیٹا ریفریش اور UI اپڈیٹ کے عمل کو مربوط کرتا ہے**
+- **تازہ ڈیٹا لوڈ ہونے کا انتظار کرتا ہے** ڈسپلے کو اپڈیٹ کرنے سے پہلے
 - **یقینی بناتا ہے** کہ ڈیش بورڈ سب سے تازہ معلومات دکھاتا ہے
-- **ڈیٹا مینجمنٹ اور UI اپ ڈیٹس کے درمیان صاف علیحدگی برقرار رکھتا ہے**
+- **ڈیٹا مینجمنٹ اور UI اپڈیٹس کے درمیان صاف علیحدگی برقرار رکھتا ہے**
 
 **مرحلہ 3: روٹ سسٹم کے ساتھ انضمام کریں**
 
-اپنے روٹ کنفیگریشن کو اپ ڈیٹ کریں تاکہ ریفریش خودکار طور پر متحرک ہو:
+اپنے روٹ کنفیگریشن کو اپڈیٹ کریں تاکہ ریفریش خودکار طور پر متحرک ہو:
 
 ```js
 const routes = {
@@ -447,33 +642,87 @@ const routes = {
 ```
 
 **یہ انضمام کیسے کام کرتا ہے:**
-- **ریفریش فنکشن کو عمل میں لاتا ہے** ہر بار جب ڈیش بورڈ روٹ لوڈ ہوتا ہے
+- **ہر بار جب ڈیش بورڈ روٹ لوڈ ہوتا ہے** ریفریش فنکشن کو عمل درآمد کرتا ہے
 - **یقینی بناتا ہے** کہ تازہ ڈیٹا ہمیشہ دکھایا جاتا ہے جب صارفین ڈیش بورڈ پر جاتے ہیں
-- **موجودہ روٹ اسٹرکچر کو برقرار رکھتا ہے** جبکہ ڈیٹا تازگی شامل کرتا ہے
-- **روٹ مخصوص ابتدائی عمل کے لیے ایک مستقل پیٹرن فراہم کرتا ہے**
+- **موجودہ روٹ اسٹرکچر کو برقرار رکھتا ہے** جبکہ ڈیٹا کی تازگی شامل کرتا ہے
+- **روٹ مخصوص initialization کے لیے ایک مستقل پیٹرن فراہم کرتا ہے**
 
 **اپنے ڈیٹا ریفریش سسٹم کی جانچ کریں:**
 
 1. اپنے بینکنگ ایپ میں لاگ ان کریں
-2. پہلے چلایا گیا curl کمانڈ استعمال کریں تاکہ نیا ٹرانزیکشن بنایا جا سکے
+2. پہلے چلائی گئی curl کمانڈ کا استعمال کرتے ہوئے نیا ٹرانزیکشن بنائیں
 3. اپنے ڈیش بورڈ صفحہ کو ریفریش کریں یا کہیں اور جائیں اور واپس آئیں
 4. تصدیق کریں کہ نیا ٹرانزیکشن فوراً ظاہر ہوتا ہے
 
 🎉 **کامل توازن حاصل کیا گیا**: آپ کی ایپ اب پرسسٹنس اسٹیٹ کے ہموار تجربے کو تازہ سرور ڈیٹا کی درستگی کے ساتھ جوڑتی ہے!
 
-## GitHub Copilot ایجنٹ چیلنج 🚀
+## 📈 آپ کی اسٹیٹ مینجمنٹ مہارت کا ٹائم لائن
+
+```mermaid
+timeline
+    title Professional State Management Journey
+    
+    section Problem Recognition
+        State Issues Diagnosis
+            : Identify session loss problems
+            : Understand scattered update issues
+            : Recognize architectural needs
+    
+    section Architecture Foundation
+        Centralized State Design
+            : Create unified state objects
+            : Implement controlled update patterns
+            : Establish immutable principles
+        
+        Predictable Updates
+            : Master Object.freeze() usage
+            : Build debug-friendly systems
+            : Create scalable patterns
+    
+    section Persistence Mastery
+        localStorage Integration
+            : Handle JSON serialization
+            : Implement automatic synchronization
+            : Create session continuity
+        
+        Data Freshness Balance
+            : Address staleness challenges
+            : Build refresh mechanisms
+            : Optimize performance vs accuracy
+    
+    section Professional Patterns
+        Production-Ready Systems
+            : Implement error handling
+            : Create maintainable architectures
+            : Follow industry best practices
+        
+        Advanced Capabilities
+            : Ready for framework integration
+            : Prepared for complex state needs
+            : Foundation for real-time features
+```
+
+**🎓 گریجویشن سنگ میل**: آپ نے کامیابی کے ساتھ ایک مکمل اسٹیٹ مینجمنٹ سسٹم بنایا ہے جو وہی اصول استعمال کرتا ہے جو Redux، Vuex، اور دیگر پیشہ ورانہ اسٹیٹ لائبریریوں کو طاقت دیتا ہے۔ یہ پیٹرنز سادہ ایپس سے لے کر انٹرپرائز ایپلیکیشنز تک اسکیل کرتے ہیں۔
+
+**🔄 اگلے درجے کی صلاحیتیں**:
+- اسٹیٹ مینجمنٹ فریم ورک (Redux, Zustand, Pinia) میں مہارت حاصل کرنے کے لیے تیار
+- WebSockets کے ساتھ ریئل ٹائم فیچرز نافذ کرنے کے لیے تیار
+- آف لائن فرسٹ Progressive Web Apps بنانے کے لیے لیس
+- اسٹیٹ مشینز اور آبزرورز جیسے ایڈوانسڈ پیٹرنز کے لیے بنیاد تیار
 
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+## GitHub Copilot Agent Challenge 🚀
 
-**تفصیل:** بینکنگ ایپ کے لیے ایک جامع اسٹیٹ مینجمنٹ سسٹم نافذ کریں جس میں undo/redo فعالیت شامل ہو۔ یہ چیلنج آپ کو جدید اسٹیٹ مینجمنٹ تصورات جیسے اسٹیٹ ہسٹری ٹریکنگ، ناقابل تغیر اپ ڈیٹس، اور صارف انٹرفیس ہم آہنگی کی مشق کرنے میں مدد دے گا۔
+Agent mode کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
 
-**پرومپٹ:** ایک بہتر اسٹیٹ مینجمنٹ سسٹم بنائیں جس میں شامل ہوں: 1) ایک اسٹیٹ ہسٹری آرے جو تمام پچھلے اسٹیٹس کو ٹریک کرتا ہے، 2) undo اور redo فنکشنز جو پچھلے اسٹیٹس پر واپس جا سکتے ہیں، 3) ڈیش بورڈ پر undo/redo آپریشنز کے لیے UI بٹن، 4) میموری مسائل کو روکنے کے لیے 10 اسٹیٹس کی زیادہ سے زیادہ ہسٹری حد، اور 5) صارف کے لاگ آؤٹ ہونے پر ہسٹری کی مناسب صفائی۔ یقینی بنائیں کہ undo/redo فعالیت اکاؤنٹ بیلنس تبدیلیوں کے ساتھ کام کرتی ہے اور براؤزر ریفریشز کے دوران برقرار رہتی ہے۔
+**تفصیل:** بینکنگ ایپ کے لیے ایک جامع اسٹیٹ مینجمنٹ سسٹم نافذ کریں جس میں undo/redo فعالیت شامل ہو۔ یہ چیلنج آپ کو ایڈوانسڈ اسٹیٹ مینجمنٹ تصورات جیسے اسٹیٹ ہسٹری ٹریکنگ، غیر متغیر اپڈیٹس، اور صارف انٹرفیس ہم آہنگی کی مشق کرنے میں مدد کرے گا۔
 
-[ایجنٹ موڈ کے بارے میں مزید جانیں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) یہاں۔
+**پرومپٹ:** ایک بہتر اسٹیٹ مینجمنٹ سسٹم بنائیں جس میں شامل ہو: 1) ایک اسٹیٹ ہسٹری array جو تمام پچھلے اسٹیٹس کو ٹریک کرے، 2) undo اور redo فنکشنز جو پچھلے اسٹیٹس پر واپس جا سکیں، 3) ڈیش بورڈ پر undo/redo آپریشنز کے لیے UI بٹن، 4) میموری مسائل سے بچنے کے لیے 10 اسٹیٹس کی زیادہ سے زیادہ ہسٹری حد، اور 5) صارف کے لاگ آؤٹ ہونے پر ہسٹری کی مناسب صفائی۔ تصدیق کریں کہ undo/redo فعالیت اکاؤنٹ بیلنس تبدیلیوں کے ساتھ کام کرتی ہے اور براؤزر ریفریشز کے دوران برقرار رہتی ہے۔
+
+مزید جانیں [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں یہاں۔
 
 ## 🚀 چیلنج: اسٹوریج کی اصلاح
 
-آپ کا نفاذ اب صارف سیشنز، ڈیٹا ریفریش، اور اسٹیٹ مینجمنٹ کو مؤثر طریقے سے سنبھالتا ہے۔ تاہم، غور کریں کہ آیا ہمارا موجودہ طریقہ اسٹوریج کی کارکردگی کو فعالیت کے ساتھ بہتر طور پر متوازن کرتا ہے۔
+آپ کا نفاذ اب صارف سیشنز، ڈیٹا ریفریش، اور اسٹیٹ مینجمنٹ کو مؤثر طریقے سے ہینڈل کرتا ہے۔ تاہم، غور کریں کہ آیا ہمارا موجودہ طریقہ اسٹوریج کی کارکردگی کو فعالیت کے ساتھ بہترین طور پر متوازن کرتا ہے۔
 
 جیسے شطرنج کے ماہرین جو ضروری ٹکڑوں اور قابل قربانی پیادوں کے درمیان فرق کرتے ہیں، مؤثر اسٹیٹ مینجمنٹ کے لیے یہ شناخت کرنا ضروری ہے کہ کون سا ڈیٹا برقرار رہنا چاہیے اور کون سا ہمیشہ سرور سے تازہ ہونا چاہیے۔
 
@@ -481,34 +730,19 @@ const routes = {
 
 اپنے موجودہ localStorage نفاذ کا جائزہ لیں اور ان اسٹریٹجک سوالات پر غور کریں:
 - صارف کی تصدیق کو برقرار رکھنے کے لیے کم سے کم معلومات کیا ہیں؟
-- کون سا ڈیٹا اتنی بار تبدیل ہوتا ہے کہ مقامی کیشنگ کا فائدہ کم ہو؟
-- اسٹوریج کی اصلاح کارکردگی کو کیسے بہتر بنا سکتی ہے بغیر صارف کے تجربے کو خراب کیے؟
+- کون سا ڈیٹا اتنی بار تبدیل ہوتا ہے کہ لوکل کیشنگ کا فائدہ کم ہو؟
+- اسٹوریج کی اصلاح کارکردگی کو صارف کے تجربے کو خراب کیے بغیر کیسے بہتر بنا سکتی ہے؟
 
 **نفاذ کی حکمت عملی:**
 - **ضروری ڈیٹا کی شناخت کریں** جو برقرار رہنا چاہیے (ممکنہ طور پر صرف صارف کی شناخت)
 - **اپنے localStorage نفاذ کو تبدیل کریں** تاکہ صرف اہم سیشن ڈیٹا محفوظ ہو
-- **یقینی بنائیں** کہ تازہ ڈیٹا ہمیشہ سرور سے ڈیش بورڈ وزٹ پر لوڈ ہوتا ہے
+- **یقینی بنائیں** کہ تازہ ڈیٹا ہمیشہ ڈیش بورڈ وزٹ پر سرور سے لوڈ ہو
 - **جانچ کریں** کہ آپ کا بہتر طریقہ کار وہی صارف تجربہ برقرار رکھتا ہے
 
-**اعلیٰ غور:**
-- **موازنہ کریں** مکمل اکاؤنٹ ڈیٹا کو محفوظ کرنے اور صرف تصدیقی ٹوکنز کو محفوظ کرنے کے درمیان تجارتی فوائد
-- **اپنے فیصلے اور منطق کو دستاویز کریں** مستقبل کے ٹیم ممبران کے لیے
-
-یہ چیلنج آپ کو ایک پیشہ ور ڈویلپر کی طرح سوچنے میں مدد دے گا جو صارف کے تجربے اور ایپلیکیشن کی کارکردگی دونوں پر غور کرتا ہے۔ مختلف طریقوں کے ساتھ تجربہ کرنے کے لیے اپنا وقت لیں!
-
-## پوسٹ لیکچر کوئز
-
-[پوسٹ لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/48)
-
-## اسائنمنٹ
-
-["Add transaction" ڈائیلاگ نافذ کریں](assignment.md)
-
-یہاں ایک مثال نتیجہ ہے اسائنمنٹ مکمل کرنے کے بعد:
-
-![اسکرین شاٹ جو "Add transaction" ڈائیلاگ کی مثال دکھا رہا ہے](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ur.png)
+**ایڈوانسڈ غور و فکر:**
+-
 
 ---
 
-**اعلانِ لاتعلقی**:  
-یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کی بھرپور کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا خامیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
\ No newline at end of file
+**ڈسکلیمر**:  
+یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
\ No newline at end of file
diff --git a/translations/ur/8-code-editor/1-using-a-code-editor/README.md b/translations/ur/8-code-editor/1-using-a-code-editor/README.md
index 3411a0db36..69604ae4f8 100644
--- a/translations/ur/8-code-editor/1-using-a-code-editor/README.md
+++ b/translations/ur/8-code-editor/1-using-a-code-editor/README.md
@@ -1,28 +1,82 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "cfd4a15974168ca426d50c67682ab9d4",
-  "translation_date": "2025-10-22T14:35:27+00:00",
+  "original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
+  "translation_date": "2025-11-03T12:56:53+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/README.md",
   "language_code": "ur"
 }
 -->
 # کوڈ ایڈیٹر کا استعمال: VSCode.dev میں مہارت حاصل کریں
 
-یاد ہے *دی میٹرکس* میں جب نیو کو ڈیجیٹل دنیا تک رسائی کے لیے ایک بڑے کمپیوٹر ٹرمینل میں پلگ ان کرنا پڑتا تھا؟ آج کے ویب ڈیولپمنٹ ٹولز بالکل مختلف کہانی ہیں – انتہائی طاقتور صلاحیتیں جو کہیں بھی دستیاب ہیں۔ VSCode.dev ایک براؤزر پر مبنی کوڈ ایڈیٹر ہے جو پیشہ ورانہ ترقی کے ٹولز کو کسی بھی انٹرنیٹ کنکشن والے ڈیوائس پر لاتا ہے۔
+یاد کریں *دی میٹرکس* میں جب نیو کو ڈیجیٹل دنیا تک رسائی کے لیے ایک بڑے کمپیوٹر ٹرمینل میں پلگ ان کرنا پڑا تھا؟ آج کے ویب ڈیولپمنٹ ٹولز اس کے بالکل برعکس ہیں – ناقابل یقین حد تک طاقتور صلاحیتیں جو کہیں بھی دستیاب ہیں۔ VSCode.dev ایک براؤزر پر مبنی کوڈ ایڈیٹر ہے جو پیشہ ورانہ ترقی کے ٹولز کو کسی بھی انٹرنیٹ کنکشن والے ڈیوائس پر لے آتا ہے۔
 
-جیسے پرنٹنگ پریس نے کتابوں کو سب کے لیے قابل رسائی بنایا، نہ کہ صرف خانقاہوں میں رہنے والے لکھاریوں کے لیے، وی ایس کوڈ ڈاٹ ڈی وی کوڈنگ کو جمہوری بناتا ہے۔ آپ لائبریری کمپیوٹر، اسکول لیب، یا کہیں بھی براؤزر تک رسائی کے ساتھ پروجیکٹس پر کام کر سکتے ہیں۔ کوئی انسٹالیشن نہیں، کوئی "مجھے اپنی مخصوص سیٹ اپ کی ضرورت ہے" کی پابندیاں نہیں۔
+جیسے پرنٹنگ پریس نے کتابوں کو سب کے لیے قابل رسائی بنایا، نہ کہ صرف خانقاہوں میں لکھنے والوں کے لیے، VSCode.dev کوڈنگ کو جمہوری بناتا ہے۔ آپ لائبریری کمپیوٹر، اسکول لیب، یا کہیں بھی جہاں براؤزر تک رسائی ہو، پر پروجیکٹس پر کام کر سکتے ہیں۔ کوئی انسٹالیشن نہیں، کوئی "مجھے اپنی مخصوص سیٹ اپ کی ضرورت ہے" کی پابندیاں نہیں۔
 
 اس سبق کے اختتام تک، آپ سمجھ جائیں گے کہ VSCode.dev کو کیسے نیویگیٹ کرنا ہے، GitHub ریپوزیٹریز کو براہ راست اپنے براؤزر میں کھولنا ہے، اور Git کو ورژن کنٹرول کے لیے استعمال کرنا ہے – وہ تمام مہارتیں جن پر پیشہ ورانہ ڈویلپرز روزانہ انحصار کرتے ہیں۔
 
+## ⚡ اگلے 5 منٹ میں آپ کیا کر سکتے ہیں
+
+**مصروف ڈویلپرز کے لیے فوری آغاز کا راستہ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Visit vscode.dev]
+    B --> C[Connect GitHub account]
+    C --> D[Open any repository]
+    D --> E[Start editing immediately]
+```
+
+- **پہلا منٹ**: [vscode.dev](https://vscode.dev) پر جائیں - کوئی انسٹالیشن کی ضرورت نہیں
+- **دوسرا منٹ**: اپنے ریپوزیٹریز کو کنیکٹ کرنے کے لیے GitHub کے ساتھ سائن ان کریں
+- **تیسرا منٹ**: URL ٹرک آزمائیں: کسی بھی ریپو URL میں `github.com` کو `vscode.dev/github` میں تبدیل کریں
+- **چوتھا منٹ**: ایک نئی فائل بنائیں اور دیکھیں کہ syntax highlighting خود بخود کام کرتا ہے
+- **پانچواں منٹ**: ایک تبدیلی کریں اور اسے سورس کنٹرول پینل کے ذریعے کمیٹ کریں
+
+**فوری ٹیسٹ URL**:
+```
+# Transform this:
+github.com/microsoft/Web-Dev-For-Beginners
+
+# Into this:
+vscode.dev/github/microsoft/Web-Dev-For-Beginners
+```
+
+**یہ کیوں اہم ہے**: 5 منٹ میں، آپ پیشہ ورانہ ٹولز کے ساتھ کہیں بھی کوڈنگ کی آزادی کا تجربہ کریں گے۔ یہ ترقی کا مستقبل ہے - قابل رسائی، طاقتور، اور فوری۔
+
+## 🗺️ کلاؤڈ پر مبنی ترقی کے ذریعے آپ کا سیکھنے کا سفر
+
+```mermaid
+journey
+    title From Local Setup to Cloud Development Mastery
+    section Understanding the Platform
+      Discover web-based editing: 4: You
+      Connect to GitHub ecosystem: 6: You
+      Master interface navigation: 7: You
+    section File Management Skills
+      Create and organize files: 5: You
+      Edit with syntax highlighting: 7: You
+      Navigate project structures: 8: You
+    section Version Control Mastery
+      Understand Git integration: 6: You
+      Practice commit workflows: 8: You
+      Master collaboration patterns: 9: You
+    section Professional Customization
+      Install powerful extensions: 7: You
+      Configure development environment: 8: You
+      Build personal workflows: 9: You
+```
+
+**آپ کے سفر کا مقصد**: اس سبق کے اختتام تک، آپ کسی بھی ڈیوائس سے کام کرنے والے پیشہ ورانہ کلاؤڈ ڈیولپمنٹ ماحول میں مہارت حاصل کر لیں گے، جو آپ کو بڑے ٹیک کمپنیوں کے ڈویلپرز کے استعمال کردہ ٹولز کے ساتھ کوڈ کرنے کے قابل بنائے گا۔
+
 ## آپ کیا سیکھیں گے
 
-جب ہم اس کے ذریعے چلیں گے، آپ قابل ہوں گے:
+جب ہم اس کے ذریعے چلیں گے، آپ یہ کرنے کے قابل ہوں گے:
 
-- VSCode.dev کو ایسے نیویگیٹ کریں جیسے یہ آپ کا دوسرا گھر ہو – بغیر گم ہوئے ہر چیز تلاش کریں
+- VSCode.dev کو ایسے نیویگیٹ کریں جیسے یہ آپ کا دوسرا گھر ہو – بغیر گم ہوئے وہ سب کچھ تلاش کریں جس کی آپ کو ضرورت ہو
 - کسی بھی GitHub ریپوزیٹری کو اپنے براؤزر میں کھولیں اور فوراً ایڈیٹنگ شروع کریں (یہ واقعی جادوئی ہے!)
-- Git کا استعمال کریں تاکہ اپنی تبدیلیوں کو ٹریک کریں اور اپنی پیشرفت کو پرو کی طرح محفوظ کریں
-- اپنے ایڈیٹر کو ایکسٹینشنز کے ساتھ سپرچارج کریں جو کوڈنگ کو تیز اور مزید دلچسپ بناتے ہیں
+- Git کا استعمال کرتے ہوئے اپنی تبدیلیوں کو ٹریک کریں اور اپنی پیشرفت کو پرو کی طرح محفوظ کریں
+- اپنے ایڈیٹر کو ایکسٹینشنز کے ساتھ سپرچارج کریں جو کوڈنگ کو تیز اور مزیدار بناتے ہیں
 - پروجیکٹ فائلز کو اعتماد کے ساتھ بنائیں اور منظم کریں
 
 ## آپ کو کیا ضرورت ہوگی
@@ -33,72 +87,146 @@ CO_OP_TRANSLATOR_METADATA:
 - ویب براؤزرز کی بنیادی واقفیت
 - GitHub Basics سبق مفید پس منظر فراہم کرتا ہے، حالانکہ یہ ضروری نہیں ہے
 
-> 💡 **GitHub میں نئے ہیں؟** اکاؤنٹ بنانا مفت ہے اور چند منٹ لگتے ہیں۔ جیسے لائبریری کارڈ آپ کو دنیا بھر کی کتابوں تک رسائی دیتا ہے، GitHub اکاؤنٹ آپ کو انٹرنیٹ پر کوڈ ریپوزیٹریز کے دروازے کھولتا ہے۔
+> 💡 **GitHub میں نئے ہیں؟** اکاؤنٹ بنانا مفت ہے اور چند منٹ لگتے ہیں۔ جیسے لائبریری کارڈ آپ کو دنیا بھر کی کتابوں تک رسائی دیتا ہے، ویسے ہی GitHub اکاؤنٹ آپ کو انٹرنیٹ پر کوڈ ریپوزیٹریز کے دروازے کھول دیتا ہے۔
+
+## 🧠 کلاؤڈ ڈیولپمنٹ ایکو سسٹم کا جائزہ
+
+```mermaid
+mindmap
+  root((VSCode.dev Mastery))
+    Platform Benefits
+      Accessibility
+        Device Independence
+        No Installation Required
+        Instant Updates
+        Universal Access
+      Integration
+        GitHub Connection
+        Repository Sync
+        Settings Persistence
+        Collaboration Ready
+    Development Workflow
+      File Management
+        Project Structure
+        Syntax Highlighting
+        Multi-tab Editing
+        Auto-save Features
+      Version Control
+        Git Integration
+        Commit Workflows
+        Branch Management
+        Change Tracking
+    Customization Power
+      Extensions Ecosystem
+        Productivity Tools
+        Language Support
+        Theme Options
+        Custom Shortcuts
+      Environment Setup
+        Personal Preferences
+        Workspace Configuration
+        Tool Integration
+        Workflow Optimization
+    Professional Skills
+      Industry Standards
+        Version Control
+        Code Quality
+        Collaboration
+        Documentation
+      Career Readiness
+        Remote Work
+        Cloud Development
+        Team Projects
+        Open Source
+```
+
+**بنیادی اصول**: کلاؤڈ پر مبنی ترقی کے ماحول کوڈنگ کا مستقبل ہیں - پیشہ ورانہ گریڈ کے ٹولز فراہم کرتے ہیں جو قابل رسائی، تعاون پر مبنی، اور پلیٹ فارم سے آزاد ہیں۔
 
 ## ویب پر مبنی کوڈ ایڈیٹرز کیوں اہم ہیں
 
-انٹرنیٹ سے پہلے، مختلف یونیورسٹیوں کے سائنسدان آسانی سے تحقیق کا اشتراک نہیں کر سکتے تھے۔ پھر 1960 کی دہائی میں ARPANET آیا، جو فاصلے پر کمپیوٹرز کو جوڑتا تھا۔ ویب پر مبنی کوڈ ایڈیٹرز اسی اصول کی پیروی کرتے ہیں – طاقتور ٹولز کو قابل رسائی بنانا، چاہے آپ کی جسمانی جگہ یا ڈیوائس کچھ بھی ہو۔
+انٹرنیٹ سے پہلے، مختلف یونیورسٹیوں کے سائنسدان آسانی سے تحقیق کا تبادلہ نہیں کر سکتے تھے۔ پھر 1960 کی دہائی میں ARPANET آیا، جو فاصلے پر کمپیوٹرز کو جوڑتا تھا۔ ویب پر مبنی کوڈ ایڈیٹرز اسی اصول پر عمل کرتے ہیں – طاقتور ٹولز کو قابل رسائی بناتے ہیں چاہے آپ کی جسمانی جگہ یا ڈیوائس کچھ بھی ہو۔
 
-ایک کوڈ ایڈیٹر آپ کی ترقی کی ورک اسپیس کے طور پر کام کرتا ہے، جہاں آپ کوڈ فائلز لکھتے، ایڈٹ کرتے، اور منظم کرتے ہیں۔ سادہ ٹیکسٹ ایڈیٹرز کے برعکس، پیشہ ورانہ کوڈ ایڈیٹرز سنٹیکس ہائی لائٹنگ، ایرر ڈیٹیکشن، اور پروجیکٹ مینجمنٹ فیچرز فراہم کرتے ہیں۔
+کوڈ ایڈیٹر آپ کی ترقی کا ورک اسپیس ہے، جہاں آپ کوڈ فائلز لکھتے، ایڈٹ کرتے اور منظم کرتے ہیں۔ سادہ ٹیکسٹ ایڈیٹرز کے برعکس، پیشہ ورانہ کوڈ ایڈیٹرز syntax highlighting، error detection، اور پروجیکٹ مینجمنٹ کی خصوصیات فراہم کرتے ہیں۔
 
-VSCode.dev ان صلاحیتوں کو آپ کے براؤزر میں لاتا ہے:
+VSCode.dev یہ صلاحیتیں آپ کے براؤزر میں لاتا ہے:
 
 **ویب پر مبنی ایڈیٹنگ کے فوائد:**
 
-| فیچر | تفصیل | عملی فائدہ |
+| خصوصیت | وضاحت | عملی فائدہ |
 |---------|-------------|----------|
-| **پلیٹ فارم انڈیپینڈنس** | کسی بھی ڈیوائس پر براؤزر کے ساتھ چلتا ہے | مختلف کمپیوٹرز سے بغیر کسی رکاوٹ کے کام کریں |
-| **کوئی انسٹالیشن کی ضرورت نہیں** | ویب یو آر ایل کے ذریعے رسائی | سافٹ ویئر انسٹالیشن کی پابندیوں کو نظرانداز کریں |
-| **خودکار اپ ڈیٹس** | ہمیشہ تازہ ترین ورژن پر چلتا ہے | دستی اپ ڈیٹس کے بغیر نئے فیچرز تک رسائی |
-| **ریپوزیٹری انٹیگریشن** | GitHub کے ساتھ براہ راست کنکشن | مقامی فائل مینجمنٹ کے بغیر کوڈ ایڈٹ کریں |
+| **پلیٹ فارم کی آزادی** | کسی بھی براؤزر والے ڈیوائس پر چلتا ہے | مختلف کمپیوٹرز سے بغیر کسی رکاوٹ کے کام کریں |
+| **انسٹالیشن کی ضرورت نہیں** | ویب URL کے ذریعے رسائی | سافٹ ویئر انسٹالیشن کی پابندیوں کو نظرانداز کریں |
+| **خودکار اپڈیٹس** | ہمیشہ تازہ ترین ورژن پر چلتا ہے | دستی اپڈیٹس کے بغیر نئی خصوصیات تک رسائی |
+| **ریپوزیٹری انٹیگریشن** | GitHub سے براہ راست کنکشن | مقامی فائل مینجمنٹ کے بغیر کوڈ ایڈٹ کریں |
 
 **عملی اثرات:**
-- مختلف ماحول میں کام کی تسلسل
+- مختلف ماحول میں کام کرنے کا تسلسل
 - آپریٹنگ سسٹم سے قطع نظر مستقل انٹرفیس
 - فوری تعاون کی صلاحیتیں
 - مقامی اسٹوریج کی ضروریات میں کمی
 
 ## VSCode.dev کو دریافت کرنا
 
-جیسے میری کیوری کی لیبارٹری میں ایک نسبتاً سادہ جگہ میں نفیس آلات موجود تھے، VSCode.dev پیشہ ورانہ ترقی کے ٹولز کو ایک براؤزر انٹرفیس میں پیک کرتا ہے۔ یہ ویب ایپلیکیشن ڈیسک ٹاپ کوڈ ایڈیٹرز کی وہی بنیادی فعالیت فراہم کرتی ہے۔
+جیسے میری کیوری کی لیبارٹری میں ایک نسبتاً سادہ جگہ میں نفیس آلات موجود تھے، VSCode.dev پیشہ ورانہ ترقی کے ٹولز کو ایک براؤزر انٹرفیس میں پیک کرتا ہے۔ یہ ویب ایپلیکیشن ڈیسک ٹاپ کوڈ ایڈیٹرز کی طرح بنیادی فعالیت فراہم کرتی ہے۔
 
-شروع کریں [vscode.dev](https://vscode.dev) پر اپنے براؤزر میں نیویگیٹ کر کے۔ انٹرفیس بغیر ڈاؤن لوڈز یا سسٹم انسٹالیشنز کے لوڈ ہوتا ہے – کلاؤڈ کمپیوٹنگ اصولوں کا براہ راست اطلاق۔
+شروع کریں [vscode.dev](https://vscode.dev) پر اپنے براؤزر میں جا کر۔ انٹرفیس بغیر کسی ڈاؤن لوڈ یا سسٹم انسٹالیشن کے لوڈ ہوتا ہے – کلاؤڈ کمپیوٹنگ اصولوں کا براہ راست اطلاق۔
 
-### اپنے GitHub اکاؤنٹ کو جوڑنا
+### اپنے GitHub اکاؤنٹ کو کنیکٹ کرنا
 
-جیسے الیگزینڈر گراہم بیل کا ٹیلیفون دور دراز مقامات کو جوڑتا تھا، آپ کے GitHub اکاؤنٹ کو جوڑنا VSCode.dev کو آپ کے کوڈ ریپوزیٹریز کے ساتھ جوڑتا ہے۔ جب GitHub کے ساتھ سائن ان کرنے کا اشارہ دیا جائے، اس کنکشن کو قبول کرنا تجویز کیا جاتا ہے۔
+جیسے الیگزینڈر گراہم بیل کا ٹیلیفون دور دراز مقامات کو جوڑتا تھا، آپ کے GitHub اکاؤنٹ کو لنک کرنا VSCode.dev کو آپ کے کوڈ ریپوزیٹریز کے ساتھ جوڑتا ہے۔ جب آپ کو GitHub کے ساتھ سائن ان کرنے کا کہا جائے، تو اس کنکشن کو قبول کرنا تجویز کیا جاتا ہے۔
 
 **GitHub انٹیگریشن فراہم کرتا ہے:**
 - ایڈیٹر کے اندر آپ کے ریپوزیٹریز تک براہ راست رسائی
-- مختلف ڈیوائسز پر ہم آہنگ سیٹنگز اور ایکسٹینشنز
-- GitHub پر محفوظ کرنے کے ورک فلو کو آسان بنانا
-- ذاتی ترقیاتی ماحول
+- مختلف ڈیوائسز پر سیٹنگز اور ایکسٹینشنز کی ہم آہنگی
+- GitHub پر محفوظ کرنے کا آسان ورک فلو
+- ذاتی نوعیت کا ترقیاتی ماحول
 
 ### اپنے نئے ورک اسپیس کو جاننا
 
-جب سب کچھ لوڈ ہو جائے، آپ ایک خوبصورت صاف ورک اسپیس دیکھیں گے جو آپ کو اس پر توجہ مرکوز رکھنے کے لیے ڈیزائن کیا گیا ہے – آپ کا کوڈ!
+جب سب کچھ لوڈ ہو جائے، تو آپ ایک خوبصورت صاف ورک اسپیس دیکھیں گے جو آپ کو اس پر مرکوز رکھنے کے لیے ڈیزائن کیا گیا ہے جو اہم ہے – آپ کا کوڈ!
 
 ![ڈیفالٹ VSCode.dev انٹرفیس](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ur.png)
 
 **یہاں آپ کے علاقے کا دورہ ہے:**
-- **ایکٹیویٹی بار** (بائیں طرف کی پٹی): آپ کی مین نیویگیشن ایکسپلورر 📁، سرچ 🔍، سورس کنٹرول 🌿، ایکسٹینشنز 🧩، اور سیٹنگز ⚙️ کے ساتھ
-- **سائیڈ بار** (اس کے ساتھ والا پینل): آپ کے منتخب کردہ کے مطابق متعلقہ معلومات دکھانے کے لیے تبدیل ہوتا ہے
-- **ایڈیٹر ایریا** (درمیان میں بڑی جگہ): یہ وہ جگہ ہے جہاں جادو ہوتا ہے – آپ کا مین کوڈنگ ایریا
+- **ایکٹیویٹی بار** (بائیں طرف کی پٹی): آپ کی مرکزی نیویگیشن جس میں ایکسپلورر 📁، سرچ 🔍، سورس کنٹرول 🌿، ایکسٹینشنز 🧩، اور سیٹنگز ⚙️ شامل ہیں
+- **سائیڈبار** (اس کے ساتھ والا پینل): آپ کے منتخب کردہ کے مطابق متعلقہ معلومات دکھانے کے لیے تبدیل ہوتا ہے
+- **ایڈیٹر ایریا** (درمیان میں بڑی جگہ): یہ وہ جگہ ہے جہاں جادو ہوتا ہے – آپ کا مرکزی کوڈنگ ایریا
 
 **ایک لمحہ نکال کر دریافت کریں:**
 - ان ایکٹیویٹی بار آئیکنز پر کلک کریں اور دیکھیں کہ ہر ایک کیا کرتا ہے
-- نوٹ کریں کہ سائیڈ بار مختلف معلومات دکھانے کے لیے کیسے اپ ڈیٹ ہوتا ہے – کافی دلچسپ، ہے نا؟
-- ایکسپلورر ویو (📁) شاید وہ جگہ ہے جہاں آپ زیادہ وقت گزاریں گے، اس لیے اس کے ساتھ آرام دہ ہو جائیں
+- نوٹ کریں کہ سائیڈبار مختلف معلومات دکھانے کے لیے کیسے اپ ڈیٹ ہوتا ہے – کافی دلچسپ، ہے نا؟
+- ایکسپلورر ویو (📁) شاید وہ جگہ ہے جہاں آپ اپنا زیادہ وقت گزاریں گے، اس لیے اس کے ساتھ آرام دہ ہو جائیں
+
+```mermaid
+flowchart TB
+    subgraph "VSCode.dev Interface Architecture"
+        A[Activity Bar] --> B[Explorer 📁]
+        A --> C[Search 🔍]
+        A --> D[Source Control 🌿]
+        A --> E[Extensions 🧩]
+        A --> F[Settings ⚙️]
+        
+        B --> G[File Tree]
+        C --> H[Find & Replace]
+        D --> I[Git Status]
+        E --> J[Extension Marketplace]
+        F --> K[Configuration]
+        
+        L[Sidebar] --> M[Context Panel]
+        N[Editor Area] --> O[Code Files]
+        P[Terminal/Output] --> Q[Command Line]
+    end
+```
 
 ## GitHub ریپوزیٹریز کھولنا
 
-انٹرنیٹ سے پہلے، محققین کو دستاویزات تک رسائی کے لیے لائبریریوں کا جسمانی سفر کرنا پڑتا تھا۔ GitHub ریپوزیٹریز اسی طرح کام کرتی ہیں – یہ کوڈ کے مجموعے ہیں جو دور سے محفوظ کیے گئے ہیں۔ VSCode.dev روایتی مرحلے کو ختم کرتا ہے جس میں ریپوزیٹریز کو ایڈٹ کرنے سے پہلے آپ کی مقامی مشین پر ڈاؤن لوڈ کرنا شامل ہوتا ہے۔
+انٹرنیٹ سے پہلے، محققین کو دستاویزات تک رسائی کے لیے لائبریریوں کا جسمانی سفر کرنا پڑتا تھا۔ GitHub ریپوزیٹریز اسی طرح کام کرتے ہیں – یہ دور سے محفوظ کوڈ کے مجموعے ہیں۔ VSCode.dev روایتی مرحلے کو ختم کرتا ہے جس میں ایڈیٹنگ سے پہلے ریپوزیٹریز کو اپنے مقامی مشین پر ڈاؤن لوڈ کرنا شامل ہوتا ہے۔
 
-یہ صلاحیت کسی بھی عوامی ریپوزیٹری تک فوری رسائی کو دیکھنے، ایڈٹ کرنے، یا تعاون کرنے کے لیے فعال کرتی ہے۔ ریپوزیٹریز کھولنے کے دو طریقے ہیں:
+یہ صلاحیت کسی بھی عوامی ریپوزیٹری تک فوری رسائی کو دیکھنے، ایڈیٹنگ، یا تعاون کے لیے فعال کرتی ہے۔ ریپوزیٹریز کھولنے کے دو طریقے ہیں:
 
 ### طریقہ 1: پوائنٹ اینڈ کلک کا طریقہ
 
-یہ اس وقت بہترین ہے جب آپ VSCode.dev میں تازہ شروع کر رہے ہوں اور کسی مخصوص ریپوزیٹری کو کھولنا چاہتے ہوں۔ یہ سیدھا اور ابتدائی دوستانہ ہے:
+یہ اس وقت بہترین ہے جب آپ VSCode.dev میں تازہ آغاز کر رہے ہوں اور کسی مخصوص ریپوزیٹری کو کھولنا چاہتے ہوں۔ یہ سیدھا اور ابتدائی دوستانہ ہے:
 
 **یہ کرنے کا طریقہ:**
 
@@ -107,7 +235,7 @@ VSCode.dev ان صلاحیتوں کو آپ کے براؤزر میں لاتا ہ
 
    ![اوپن ریموٹ ریپوزیٹری](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ur.png)
 
-3. کسی بھی GitHub ریپوزیٹری یو آر ایل کو پیسٹ کریں (اسے آزمائیں: `https://github.com/microsoft/Web-Dev-For-Beginners`)
+3. کسی بھی GitHub ریپوزیٹری URL کو پیسٹ کریں (اسے آزمائیں: `https://github.com/microsoft/Web-Dev-For-Beginners`)
 4. انٹر دبائیں اور جادو دیکھیں!
 
 **پرو ٹپ - کمانڈ پیلیٹ شارٹ کٹ:**
@@ -122,43 +250,56 @@ VSCode.dev ان صلاحیتوں کو آپ کے براؤزر میں لاتا ہ
 - ایک بار جب آپ اس کے عادی ہو جائیں، تو آپ کو لگے گا کہ آپ روشنی کی رفتار سے کوڈنگ کر رہے ہیں
 - یہ بنیادی طور پر VSCode.dev کا "ہیے سری، لیکن کوڈنگ کے لیے" ورژن ہے
 
-### طریقہ 2: یو آر ایل موڈیفیکیشن تکنیک
+### طریقہ 2: URL موڈیفیکیشن تکنیک
 
-جیسے HTTP اور HTTPS مختلف پروٹوکول استعمال کرتے ہیں جبکہ ایک ہی ڈومین اسٹرکچر کو برقرار رکھتے ہیں، VSCode.dev ایک یو آر ایل پیٹرن استعمال کرتا ہے جو GitHub کے ایڈریسنگ سسٹم کی عکاسی کرتا ہے۔ کسی بھی GitHub ریپوزیٹری یو آر ایل کو براہ راست VSCode.dev میں کھولنے کے لیے تبدیل کیا جا سکتا ہے۔
+جیسے HTTP اور HTTPS مختلف پروٹوکول استعمال کرتے ہیں جبکہ ایک ہی ڈومین ڈھانچے کو برقرار رکھتے ہیں، VSCode.dev ایک URL پیٹرن استعمال کرتا ہے جو GitHub کے ایڈریسنگ سسٹم کی عکاسی کرتا ہے۔ کسی بھی GitHub ریپوزیٹری URL کو براہ راست VSCode.dev میں کھولنے کے لیے تبدیل کیا جا سکتا ہے۔
 
-**یو آر ایل ٹرانسفارمیشن پیٹرن:**
+**URL تبدیلی کا پیٹرن:**
 
-| ریپوزیٹری کی قسم | GitHub یو آر ایل | VSCode.dev یو آر ایل |
+| ریپوزیٹری کی قسم | GitHub URL | VSCode.dev URL |
 |----------------|---------------------|----------------|
-| **پبلک ریپوزیٹری** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
+| **عوامی ریپوزیٹری** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
 | **ذاتی پروجیکٹ** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
 | **کوئی بھی قابل رسائی ریپو** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
 
 **عملدرآمد:**
 - `github.com` کو `vscode.dev/github` سے تبدیل کریں
-- یو آر ایل کے تمام دیگر اجزاء کو بغیر تبدیلی کے برقرار رکھیں
+- تمام دیگر URL اجزاء کو بغیر تبدیلی کے برقرار رکھیں
 - کسی بھی عوامی طور پر قابل رسائی ریپوزیٹری کے ساتھ کام کرتا ہے
 - فوری ایڈیٹنگ تک رسائی فراہم کرتا ہے
 
-> 💡 **زندگی بدلنے والی ٹپ**: اپنے پسندیدہ ریپوزیٹریز کے VSCode.dev ورژنز کو بک مارک کریں۔ میرے پاس بک مارکس ہیں جیسے "میرا پورٹ فولیو ایڈٹ کریں" اور "دستاویزات ٹھیک کریں" جو مجھے سیدھے ایڈیٹنگ موڈ میں لے جاتے ہیں!
+> 💡 **زندگی بدلنے والی ٹپ**: اپنے پسندیدہ ریپوزیٹریز کے VSCode.dev ورژنز کو بک مارک کریں۔ میرے پاس "ایڈٹ مائی پورٹ فولیو" اور "فکس ڈاکیومینٹیشن" جیسے بک مارکس ہیں جو مجھے سیدھے ایڈیٹنگ موڈ میں لے جاتے ہیں!
 
 **آپ کو کون سا طریقہ استعمال کرنا چاہیے؟**
-- **انٹرفیس کا طریقہ**: بہترین جب آپ تلاش کر رہے ہوں یا بالکل ریپوزیٹری نام یاد نہ ہو
-- **یو آر ایل ٹرک**: جب آپ کو بالکل معلوم ہو کہ آپ کہاں جا رہے ہیں تو بجلی کی رفتار سے رسائی کے لیے بہترین
+- **انٹرفیس کا طریقہ**: جب آپ دریافت کر رہے ہوں یا ریپوزیٹری کے ناموں کو یاد نہ کر سکیں تو بہترین ہے
+- **URL ٹرک**: جب آپ کو بالکل معلوم ہو کہ آپ کہاں جا رہے ہیں تو بجلی کی رفتار سے رسائی کے لیے بہترین ہے
+
+### 🎯 تعلیمی جائزہ: کلاؤڈ ڈیولپمنٹ تک رسائی
+
+**رکیں اور غور کریں**: آپ نے ابھی ویب براؤزر کے ذریعے کوڈ ریپوزیٹریز تک رسائی کے دو طریقے سیکھے ہیں۔ یہ ترقی کے کام کرنے کے طریقے میں ایک بنیادی تبدیلی کی نمائندگی کرتا ہے۔
+
+**فوری خود تشخیص**:
+- کیا آپ وضاحت کر سکتے ہیں کہ ویب پر مبنی ایڈیٹنگ روایتی "ترقیاتی ماحول کی سیٹ اپ" کو کیوں ختم کرتی ہے؟
+- URL موڈیفیکیشن تکنیک مقامی git کلوننگ کے مقابلے میں کیا فوائد فراہم کرتی ہے؟
+- یہ نقطہ نظر آپ کو اوپن سورس پروجیکٹس میں تعاون کرنے کے طریقے کو کیسے بدل سکتا ہے؟
+
+**حقیقی دنیا کا تعلق**: GitHub، GitLab، اور Replit جیسی بڑی کمپنیاں ان کلاؤڈ فرسٹ اصولوں کے ارد گرد اپنے ترقیاتی پلیٹ فارمز بنائی ہیں۔ آپ وہی ورک فلو سیکھ رہے ہیں جو دنیا بھر کی پیشہ ورانہ ترقیاتی ٹیمیں استعمال کرتی ہیں۔
+
+**چیلنج سوال**: کلاؤڈ پر مبنی ترقی کوڈنگ کو اسکولوں میں سکھانے کے طریقے کو کیسے بدل سکتی ہے؟ ڈیوائس کی ضروریات، سافٹ ویئر مینجمنٹ، اور تعاون کے امکانات پر غور کریں۔
 
 ## فائلز اور پروجیکٹس کے ساتھ کام کرنا
 
-اب جب کہ آپ نے ایک ریپوزیٹری کھول لی ہے، آئیے تعمیر شروع کریں! VSCode.dev آپ کو وہ سب کچھ دیتا ہے جس کی آپ کو کوڈ فائلز بنانے، ایڈٹ کرنے، اور منظم کرنے کی ضرورت ہوتی ہے۔ اسے اپنے ڈیجیٹل ورکشاپ کے طور پر سوچیں – ہر ٹول وہیں ہے جہاں آپ کو اس کی ضرورت ہے۔
+اب جب کہ آپ نے ایک ریپوزیٹری کھول لی ہے، آئیے تعمیر شروع کریں! VSCode.dev آپ کو کوڈ فائلز بنانے، ایڈٹ کرنے، اور منظم کرنے کے لیے ہر چیز فراہم کرتا ہے۔ اسے اپنے ڈیجیٹل ورکشاپ کے طور پر سوچیں – ہر ٹول وہیں ہے جہاں آپ کو اس کی ضرورت ہے۔
 
 آئیے روزمرہ کے کاموں میں غوطہ لگائیں جو آپ کے کوڈنگ ورک فلو کا زیادہ تر حصہ بنائیں گے۔
 
 ### نئی فائلز بنانا
 
-جیسے کسی معمار کے دفتر میں بلیو پرنٹس کو منظم کرنا، VSCode.dev میں فائل بنانا ایک منظم طریقہ کی پیروی کرتا ہے۔ یہ سسٹم تمام معیاری ویب ڈیولپمنٹ فائل اقسام کو سپورٹ کرتا ہے۔
+جیسے کسی معمار کے دفتر میں بلیو پرنٹس کو منظم کرنا، VSCode.dev میں فائل بنانا ایک منظم طریقہ کار کی پیروی کرتا ہے۔ یہ نظام تمام معیاری ویب ڈیولپمنٹ فائل اقسام کی حمایت کرتا ہے۔
 
 **فائل بنانے کا عمل:**
 
-1. ایکسپلورر سائیڈ بار میں ہدف فولڈر پر نیویگیٹ کریں
+1. ایکسپلورر سائیڈبار میں ہدف فولڈر پر جائیں
 2. فولڈر کے نام پر ہوور کریں تاکہ "نئی فائل" آئیکن (📄+) ظاہر ہو
 3. مناسب ایکسٹینشن سمیت فائل کا نام درج کریں (`style.css`, `script.js`, `index.html`)
 4. فائل بنانے کے لیے انٹر دبائیں
@@ -167,185 +308,285 @@ VSCode.dev ان صلاحیتوں کو آپ کے براؤزر میں لاتا ہ
 
 **نام رکھنے کے اصول:**
 - وضاحتی نام استعمال کریں جو فائل کے مقصد کی نشاندہی کریں
-- مناسب سنٹیکس ہائی لائٹنگ کے لیے فائل ایکسٹینشنز شامل کریں
-- پروجیکٹس میں مستقل نام رکھنے کے نمونوں پر عمل کریں
+- مناسب syntax highlighting کے لیے فائل ایکسٹینشنز شامل کریں
+- پروجیکٹس کے دوران مستقل نام رکھنے کے نمونوں پر عمل کریں
 - اسپیسز کے بجائے چھوٹے حروف اور ہائفنز استعمال کریں
 
 ### فائلز کو ایڈٹ اور محفوظ کرنا
 
-یہ وہ جگہ ہے جہاں اصل مزہ شروع ہوتا ہے! VSCode.dev کا ایڈیٹر مددگار خصوصیات سے بھرا ہوا ہے جو کوڈنگ کو ہموار اور بدیہی بناتا ہے۔ یہ ایسا ہے جیسے آپ کے پاس کوڈ کے لیے واقعی ایک ہوشیار لکھنے والا معاون ہو۔
+یہ وہ جگہ ہے جہاں اصل مزہ شروع ہوتا ہے! VSCode.dev کا ایڈیٹر مددگار خصوصیات سے بھرا ہوا ہے جو کوڈنگ کو ہموار اور بدیہی بناتا ہے۔ یہ ایسا ہے جیسے آپ کے پاس کوڈ کے لیے ایک بہت ہی ہوشیار لکھنے والا معاون ہو۔
 
 **آپ کا ایڈیٹنگ ورک فلو:**
 
 1. ایکسپلورر میں کسی بھی فائل پر کلک کریں تاکہ اسے مین ایریا میں کھولا جا سکے
-2. ٹائپ کرنا شروع کریں اور دیکھیں کہ VSCode.dev آپ کی مدد کیسے کرتا ہے رنگوں، تجاویز، اور ایرر اسپاٹنگ کے ساتھ
-3. اپنے کام کو Ctrl+S (Windows/Linux) یا Cmd+S (Mac) کے ساتھ محفوظ کریں – حالانکہ یہ خود بخود بھی محفوظ کرتا ہے!
+2. ٹائپ کرنا شروع کریں اور دیکھیں کہ VSCode.dev آپ کی مدد کیسے کرتا ہے رنگوں، تجاویز، اور غلطیوں کی نشاندہی کے ساتھ
 
-![VSCode.dev میں فائلز ایڈٹ کرنا](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ur.png)
+- اس بات کو یقینی بنائیں کہ آپ اپنے تمام مرحلہ وار تبدیلیوں سے مطمئن ہیں  
+- ایک مختصر نوٹ لکھیں جس میں وضاحت کریں کہ آپ نے کیا کیا (یہ آپ کا "commit message" ہے)  
+- سب کچھ GitHub پر محفوظ کرنے کے لیے چیک مارک بٹن پر کلک کریں  
+- اگر آپ کسی چیز کے بارے میں اپنا ارادہ بدلتے ہیں، تو انڈو آئیکن آپ کو تبدیلیاں ختم کرنے دیتا ہے  
 
-**جب آپ کوڈ کرتے ہیں تو جو زبردست چیزیں ہوتی ہیں:**
-- آپ کا کوڈ خوبصورتی سے رنگین کوڈ کیا جاتا ہے تاکہ اسے پڑھنا آسان ہو
-- VSCode.dev آپ کے ٹائپ کرتے وقت تکمیل کی تجاویز دیتا ہے (جیسے آٹو کریکٹ، لیکن بہت زیادہ ہوشیار)
-- یہ ٹائپوز اور ایررز کو پکڑتا ہے اس سے پہلے کہ آپ محفوظ کریں
-- آپ کے پاس براؤزر کی طرح ٹیبز میں ایک ساتھ کئی فائلز کھلی ہو سکتی ہیں
-- سب کچھ پس منظر میں خود بخود محفوظ ہو جاتا ہے
+**اچھے commit messages لکھنا (یہ اتنا آسان ہے جتنا آپ سوچتے ہیں!):**  
+- بس وضاحت کریں کہ آپ نے کیا کیا، جیسے "رابطہ فارم شامل کریں" یا "خراب نیویگیشن درست کریں"  
+- اسے مختصر اور جامع رکھیں – ٹویٹ کی لمبائی سوچیں، مضمون نہیں  
+- ایکشن الفاظ سے شروع کریں جیسے "شامل کریں"، "درست کریں"، "اپ ڈیٹ کریں"، یا "ہٹائیں"  
+- **اچھے مثالیں**: "ریسپانسیو نیویگیشن مینو شامل کریں"، "موبائل لے آؤٹ کے مسائل درست کریں"، "بہتر رسائی کے لیے رنگ اپ ڈیٹ کریں"  
 
-> ⚠️ **فوری ٹپ**: حالانکہ آٹو سیو آپ کا خیال رکھتا ہے، Ctrl+S یا Cmd+S دبانا اب بھی ایک اچھا عادت ہے۔ یہ فوری طور پر سب کچھ محفوظ کرتا ہے اور کچھ اضافی مددگار خصوصیات کو متحرک کرتا ہے جیسے ایرر چیکنگ۔
+> 💡 **جلدی نیویگیشن کا مشورہ**: اوپر بائیں جانب ہیمبرگر مینو (☰) استعمال کریں تاکہ آپ اپنے GitHub ریپوزیٹری پر واپس جا سکیں اور اپنی محفوظ کردہ تبدیلیاں آن لائن دیکھ سکیں۔ یہ آپ کے ایڈیٹنگ ماحول اور آپ کے پروجیکٹ کے GitHub ہوم کے درمیان ایک پورٹل کی طرح ہے!  
 
-### Git کے ساتھ ورژن کنٹرول
+## ایکسٹینشنز کے ساتھ فعالیت کو بہتر بنانا  
 
-جیسے آثار قدیمہ کے ماہرین کھدائی کی تہوں کے تفصیلی ریکارڈ بناتے ہیں، Git وقت کے ساتھ آپ کے کوڈ میں تبدیلیوں کو ٹریک کرتا ہے۔ یہ نظام پروجیکٹ کی تاریخ کو محفوظ رکھتا ہے اور آپ کو ضرورت پڑنے پر پچھلے ورژنز پر واپس جانے کی اجازت دیتا ہے۔ VSCode.dev میں مربوط Git فعالیت شامل ہے۔
+جیسے کسی کاریگر کی ورکشاپ میں مختلف کاموں کے لیے خصوصی آلات ہوتے ہیں، VSCode.dev کو ایکسٹینشنز کے ذریعے اپنی مرضی کے مطابق بنایا جا سکتا ہے جو مخصوص صلاحیتیں شامل کرتے ہیں۔ یہ کمیونٹی کے تیار کردہ پلگ ان عام ترقیاتی ضروریات جیسے کوڈ فارمیٹنگ، لائیو پریویو، اور بہتر Git انٹیگریشن کو حل کرتے ہیں۔  
 
-**سورس کنٹرول انٹرفیس:**
+ایکسٹینشن مارکیٹ پلیس میں دنیا بھر کے ڈویلپرز کے بنائے گئے ہزاروں مفت ٹولز موجود ہیں۔ ہر ایکسٹینشن خاص ورک فلو چیلنجز کو حل کرتی ہے، جس سے آپ اپنی مخصوص ضروریات اور ترجیحات کے مطابق ایک ذاتی ترقیاتی ماحول بنا سکتے ہیں۔  
 
-1. ایکٹیویٹی بار میں 🌿 آئیکن کے ذریعے سورس کنٹرول پینل تک رسائی حاصل کریں
-2. تبدیل شدہ فائلز "چینجز" سیکشن میں ظاہر ہوتی ہیں
-3. رنگ کوڈنگ تبدیلی کی اقسام کی نشاندہی کرتی ہے: اضافے کے لیے سبز، حذف کے لیے سرخ
+```mermaid
+mindmap
+  root((Extension Ecosystem))
+    Essential Categories
+      Productivity
+        Live Server
+        Auto Rename Tag
+        Bracket Pair Colorizer
+        GitLens
+      Code Quality
+        Prettier
+        ESLint
+        Spell Checker
+        Error Lens
+      Language Support
+        HTML CSS Support
+        JavaScript ES6
+        Python Extension
+        Markdown Preview
+      Themes & UI
+        Dark+ Modern
+        Material Icon Theme
+        Peacock
+        Rainbow Brackets
+    Discovery Methods
+      Popular Rankings
+        Download Counts
+        User Ratings
+        Recent Updates
+        Community Reviews
+      Recommendations
+        Workspace Suggestions
+        Language-based
+        Workflow-specific
+        Team Standards
+```
+  
+### اپنی بہترین ایکسٹینشنز تلاش کرنا  
 
-![سورس کنٹرول میں تبدیلیاں دیکھنا](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ur.png)
+ایکسٹینشن مارکیٹ پلیس واقعی اچھی طرح سے منظم ہے، لہذا آپ کو اپنی ضرورت کی چیز تلاش کرنے میں مشکل نہیں ہوگی۔ یہ آپ کو مخصوص ٹولز اور وہ دلچسپ چیزیں دریافت کرنے میں مدد دینے کے لیے ڈیزائن کیا گیا ہے جن کے بارے میں آپ کو معلوم بھی نہیں تھا!  
 
-**اپنے کام کو محفوظ کرنا (کمیٹ ورک فلو):**
+**مارکیٹ پلیس تک پہنچنا:**  
 
-```mermaid
-flowchart TD
-    A[Make changes to files] --> B[View changes in Source Control]
-    B --> C[Stage changes by clicking +]
-    C --> D[Write descriptive commit message]
-    D --> E[Click checkmark to commit]
-    E --> F[Changes pushed to GitHub]
-```
+1. ایکٹیویٹی بار میں ایکسٹینشنز آئیکن (🧩) پر کلک کریں  
+2. ارد گرد براؤز کریں یا کسی خاص چیز کی تلاش کریں  
+3. جو دلچسپ لگے اس پر کلک کریں تاکہ اس کے بارے میں مزید جان سکیں  
 
-**یہاں آپ کا مرحلہ وار عمل ہے:**
-- ان فائلز کے ساتھ والے "+" آئیکن پر کلک کریں جنہیں آپ محفوظ کرنا چاہتے ہیں (یہ انہیں "اسٹیج" کرتا ہے)
-- اس بات کو یقینی بنائیں کہ آپ اپنی تمام اسٹیجڈ تبدیلیوں سے خوش ہیں
-- ایک مختصر نوٹ لکھیں جس میں وضاحت کریں کہ آپ نے کیا کیا (یہ آپ کا "کمیٹ میسج" ہے)
-- سب کچھ GitHub پر محفوظ کرنے کے لیے چیک مارک بٹن پر کلک کریں
-- اگر آپ کسی چیز کے بارے میں اپنا ذہن بدلتے ہیں، تو انڈو آئیکن آپ کو تبدیلیاں ختم کرنے دیتا ہے
+![ایکسٹینشن مارکیٹ پلیس انٹرفیس](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ur.png)  
 
-**اچھے کمیٹ میسجز لکھنا (یہ اتنا آسان ہے جتنا آپ سوچتے ہیں!):**
-- بس وضاحت کریں کہ آپ نے کیا کیا، جیسے "کانٹیکٹ فارم شامل کریں" یا "ٹوٹا ہوا نیویگیشن ٹھیک کریں"
+**آپ کو وہاں کیا نظر آئے گا:**  
 
-- ہر ایک ایکسٹینشن کی ریٹنگز، ڈاؤنلوڈز کی تعداد، اور حقیقی صارفین کے جائزے دکھائے جاتے ہیں۔
-- آپ کو اس کے اسکرین شاٹس اور واضح وضاحتیں ملتی ہیں کہ ہر ایکسٹینشن کیا کرتی ہے۔
-- ہر چیز کے ساتھ مطابقت کی معلومات واضح طور پر دی گئی ہیں۔
-- مشابہ ایکسٹینشنز کی تجویز دی جاتی ہے تاکہ آپ مختلف آپشنز کا موازنہ کر سکیں۔
+| سیکشن | اندر کیا ہے | کیوں مددگار ہے |  
+|----------|---------|----------|  
+| **انسٹال شدہ** | وہ ایکسٹینشنز جو آپ نے پہلے ہی شامل کی ہیں | آپ کا ذاتی کوڈنگ ٹول کٹ |  
+| **مقبول** | سب سے زیادہ پسندیدہ | وہ جو زیادہ تر ڈویلپرز پسند کرتے ہیں |  
+| **تجویز کردہ** | آپ کے پروجیکٹ کے لیے ہوشیار تجاویز | VSCode.dev کی مددگار تجاویز |  
 
-### ایکسٹینشنز انسٹال کرنا (یہ بہت آسان ہے!)
+**براؤزنگ کو آسان بنانے والی چیزیں:**  
+- ہر ایکسٹینشن ریٹنگز، ڈاؤن لوڈ کی تعداد، اور حقیقی صارف کے جائزے دکھاتی ہے  
+- آپ کو اس کے کام کرنے کی وضاحت اور اسکرین شاٹس ملتے ہیں  
+- سب کچھ مطابقت کی معلومات کے ساتھ واضح طور پر نشان زد ہوتا ہے  
+- اسی طرح کی ایکسٹینشنز تجویز کی جاتی ہیں تاکہ آپ اختیارات کا موازنہ کر سکیں  
 
-اپنے ایڈیٹر میں نئے فیچرز شامل کرنا بس ایک بٹن پر کلک کرنے جتنا آسان ہے۔ ایکسٹینشنز چند سیکنڈز میں انسٹال ہو جاتی ہیں اور فوراً کام کرنا شروع کر دیتی ہیں – نہ کوئی ری اسٹارٹ، نہ کوئی انتظار۔
+### ایکسٹینشنز انسٹال کرنا (یہ بہت آسان ہے!)  
 
-**یہ ہے جو آپ کو کرنا ہے:**
+اپنے ایڈیٹر میں نئی صلاحیتیں شامل کرنا ایک بٹن پر کلک کرنے جتنا آسان ہے۔ ایکسٹینشنز سیکنڈوں میں انسٹال ہو جاتی ہیں اور فوراً کام شروع کر دیتی ہیں – کوئی ری اسٹارٹ نہیں، کوئی انتظار نہیں۔  
 
-1. وہ تلاش کریں جو آپ چاہتے ہیں (مثال کے طور پر "live server" یا "prettier" تلاش کریں)
-2. جو اچھا لگے اس پر کلک کریں تاکہ مزید تفصیلات دیکھ سکیں
-3. پڑھیں کہ یہ کیا کرتا ہے اور ریٹنگز چیک کریں
-4. نیلے "Install" بٹن پر کلک کریں اور کام ختم!
+**یہ کرنے کے لیے آپ کو بس یہ کرنا ہے:**  
 
-![Installing extensions](../../../../8-code-editor/images/install-extension.gif)
+1. جو آپ چاہتے ہیں اس کی تلاش کریں (جیسے "لائیو سرور" یا "پریٹیر" تلاش کریں)  
+2. جو اچھا لگے اس پر کلک کریں تاکہ مزید تفصیلات دیکھ سکیں  
+3. اس کے کام کرنے کی وضاحت پڑھیں اور ریٹنگز چیک کریں  
+4. نیلے "انسٹال" بٹن پر کلک کریں اور آپ کا کام ہو گیا!  
 
-**پردے کے پیچھے کیا ہوتا ہے:**
-- ایکسٹینشن خودکار طور پر ڈاؤنلوڈ اور سیٹ اپ ہو جاتی ہے
-- نئے فیچرز فوراً آپ کے انٹرفیس میں ظاہر ہوتے ہیں
-- سب کچھ فوراً کام کرنا شروع کر دیتا ہے (واقعی، یہ اتنا ہی تیز ہے!)
-- اگر آپ سائن ان ہیں، تو ایکسٹینشن آپ کے تمام ڈیوائسز پر سنک ہو جاتی ہے
+![ایکسٹینشنز انسٹال کرنا](../../../../8-code-editor/images/install-extension.gif)  
 
-**کچھ ایکسٹینشنز جو میں شروع کرنے کے لیے تجویز کرتا ہوں:**
-- **Live Server**: جیسے ہی آپ کوڈ کریں، اپنی ویب سائٹ کو حقیقی وقت میں اپ ڈیٹ ہوتے دیکھیں (یہ جادوئی ہے!)
-- **Prettier**: آپ کے کوڈ کو خودکار طور پر صاف اور پروفیشنل بناتا ہے
-- **Auto Rename Tag**: ایک HTML ٹیگ کو تبدیل کریں اور اس کا پارٹنر بھی اپ ڈیٹ ہو جائے گا
-- **Bracket Pair Colorizer**: آپ کے بریکٹس کو رنگین کوڈ کرتا ہے تاکہ آپ کبھی گم نہ ہوں
-- **GitLens**: آپ کے Git فیچرز کو بہت ساری مددگار معلومات کے ساتھ سپرچارج کرتا ہے
+**پس پردہ کیا ہوتا ہے:**  
+- ایکسٹینشن خود بخود ڈاؤن لوڈ اور سیٹ اپ ہو جاتی ہے  
+- نئی خصوصیات فوراً آپ کے انٹرفیس میں ظاہر ہوتی ہیں  
+- سب کچھ فوراً کام کرنا شروع کر دیتا ہے (واقعی، یہ اتنا تیز ہے!)  
+- اگر آپ سائن ان ہیں، تو ایکسٹینشن آپ کے تمام ڈیوائسز پر ہم آہنگ ہو جاتی ہے  
 
-### اپنی ایکسٹینشنز کو حسب ضرورت بنانا
+**کچھ ایکسٹینشنز جو میں شروع کرنے کے لیے تجویز کروں گا:**  
+- **لائیو سرور**: اپنی ویب سائٹ کو حقیقی وقت میں اپ ڈیٹ ہوتے دیکھیں جب آپ کوڈ لکھتے ہیں (یہ جادوئی ہے!)  
+- **پریٹیر**: آپ کے کوڈ کو خود بخود صاف اور پیشہ ورانہ بناتا ہے  
+- **آٹو رینیم ٹیگ**: ایک HTML ٹیگ تبدیل کریں اور اس کا ساتھی بھی اپ ڈیٹ ہو جائے  
+- **بریکٹ پیر کلرائزر**: آپ کے بریکٹس کو رنگین کوڈ کرتا ہے تاکہ آپ کبھی نہ بھٹکیں  
+- **GitLens**: آپ کے Git خصوصیات کو بہت زیادہ معلومات کے ساتھ طاقتور بناتا ہے  
 
-زیادہ تر ایکسٹینشنز کے ساتھ سیٹنگز آتی ہیں جنہیں آپ اپنی پسند کے مطابق ایڈجسٹ کر سکتے ہیں۔ اسے ایسے سمجھیں جیسے گاڑی میں سیٹ اور آئینے کو ایڈجسٹ کرنا – ہر کسی کی اپنی ترجیحات ہوتی ہیں!
+### اپنی ایکسٹینشنز کو حسب ضرورت بنانا  
 
-**ایکسٹینشن سیٹنگز کو ایڈجسٹ کرنا:**
+زیادہ تر ایکسٹینشنز کے ساتھ سیٹنگز آتی ہیں جنہیں آپ اپنی پسند کے مطابق ایڈجسٹ کر سکتے ہیں۔ اسے ایک کار میں سیٹ اور آئینے کو ایڈجسٹ کرنے کی طرح سمجھیں – ہر کسی کی اپنی ترجیحات ہوتی ہیں!  
 
-1. اپنی انسٹال شدہ ایکسٹینشن کو Extensions پینل میں تلاش کریں
-2. اس کے نام کے ساتھ چھوٹے گیئر آئیکن (⚙️) کو دیکھیں اور اس پر کلک کریں
-3. ڈراپ ڈاؤن سے "Extension Settings" منتخب کریں
-4. چیزوں کو اپنی ورک فلو کے مطابق ایڈجسٹ کریں
+**ایکسٹینشن سیٹنگز کو ایڈجسٹ کرنا:**  
 
-![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ur.png)
+1. ایکسٹینشنز پینل میں اپنی انسٹال شدہ ایکسٹینشن تلاش کریں  
+2. اس کے نام کے ساتھ چھوٹے گیئر آئیکن (⚙️) کو دیکھیں اور اس پر کلک کریں  
+3. ڈراپ ڈاؤن سے "ایکسٹینشن سیٹنگز" منتخب کریں  
+4. چیزوں کو ایڈجسٹ کریں جب تک کہ وہ آپ کے ورک فلو کے لیے بالکل صحیح محسوس نہ ہوں  
 
-**عام چیزیں جو آپ ایڈجسٹ کرنا چاہیں گے:**
-- آپ کا کوڈ کیسے فارمیٹ ہوتا ہے (tabs vs spaces، لائن کی لمبائی وغیرہ)
-- کون سے کی بورڈ شارٹ کٹس مختلف ایکشنز کو ٹرگر کرتے ہیں
-- کون سے فائل ٹائپس پر ایکسٹینشن کام کرے
-- مخصوص فیچرز کو آن یا آف کرنا تاکہ چیزیں صاف رہیں
+![ایکسٹینشن سیٹنگز کو حسب ضرورت بنانا](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ur.png)  
 
-### اپنی ایکسٹینشنز کو منظم رکھنا
+**عام چیزیں جو آپ ایڈجسٹ کرنا چاہیں گے:**  
+- آپ کا کوڈ کیسے فارمیٹ ہوتا ہے (ٹیبز بمقابلہ اسپیسز، لائن کی لمبائی، وغیرہ)  
+- کون سے کی بورڈ شارٹ کٹس مختلف اعمال کو متحرک کرتے ہیں  
+- کون سے فائل ٹائپس کے ساتھ ایکسٹینشن کام کرے  
+- مخصوص خصوصیات کو آن یا آف کرنا تاکہ چیزیں صاف رہیں  
 
-جب آپ مزید زبردست ایکسٹینشنز دریافت کریں گے، تو آپ اپنی کلیکشن کو صاف ستھرا اور آسانی سے چلانے کے قابل بنانا چاہیں گے۔ VSCode.dev اسے منظم کرنا واقعی آسان بناتا ہے۔
+### اپنی ایکسٹینشنز کو منظم رکھنا  
 
-**آپ کی ایکسٹینشن مینجمنٹ کے آپشنز:**
+جب آپ مزید دلچسپ ایکسٹینشنز دریافت کرتے ہیں، تو آپ اپنی کلیکشن کو صاف ستھرا اور ہموار رکھنا چاہیں گے۔ VSCode.dev اسے منظم کرنے میں واقعی آسان بناتا ہے۔  
 
-| آپ کیا کر سکتے ہیں | کب یہ مددگار ہے | پرو ٹپ |
-|--------|---------|----------|
-| **Disable** | چیک کرنا کہ آیا کوئی ایکسٹینشن مسائل پیدا کر رہی ہے | اگر آپ اسے واپس چاہتے ہیں تو ان انسٹال کرنے سے بہتر ہے |
-| **Uninstall** | وہ ایکسٹینشنز مکمل طور پر ہٹانا جو آپ کو ضرورت نہیں | آپ کے ماحول کو صاف اور تیز رکھتا ہے |
-| **Update** | تازہ ترین فیچرز اور بگ فکسز حاصل کرنا | عام طور پر خودکار ہوتا ہے، لیکن چیک کرنا فائدہ مند ہے |
+**آپ کی ایکسٹینشن مینجمنٹ کے اختیارات:**  
 
-**میں اپنی ایکسٹینشنز کو کیسے منظم کرتا ہوں:**
-- ہر چند مہینے میں، میں جو انسٹال کیا ہے اس کا جائزہ لیتا ہوں اور جو استعمال نہیں کر رہا ہوں اسے ہٹا دیتا ہوں
-- میں ایکسٹینشنز کو اپ ڈیٹ رکھتا ہوں تاکہ تازہ ترین بہتری اور سیکیورٹی فکسز حاصل کر سکوں
-- اگر کچھ سست لگے، تو میں عارضی طور پر ایکسٹینشنز کو ڈس ایبل کرتا ہوں تاکہ دیکھ سکوں کہ آیا ان میں سے کوئی مسئلہ پیدا کر رہا ہے
-- جب ایکسٹینشنز کو بڑے اپ ڈیٹس ملتے ہیں تو میں اپ ڈیٹ نوٹس پڑھتا ہوں – کبھی کبھار زبردست نئے فیچرز ہوتے ہیں!
+| آپ کیا کر سکتے ہیں | کب مددگار ہے | پرو ٹپ |  
+|--------|---------|----------|  
+| **غیر فعال کریں** | جانچنا کہ آیا کوئی ایکسٹینشن مسائل پیدا کر رہی ہے | اسے ان انسٹال کرنے سے بہتر ہے اگر آپ اسے واپس چاہتے ہیں |  
+| **ان انسٹال کریں** | وہ ایکسٹینشنز مکمل طور پر ہٹانا جو آپ کو ضرورت نہیں | اپنے ماحول کو صاف اور تیز رکھتا ہے |  
+| **اپ ڈیٹ کریں** | تازہ ترین خصوصیات اور بگ فکسز حاصل کرنا | عام طور پر خود بخود ہوتا ہے، لیکن چیک کرنا اچھا ہے |  
+
+**میں اپنی ایکسٹینشنز کو کیسے منظم کرتا ہوں:**  
+- ہر چند مہینے میں، میں نے جو انسٹال کیا ہے اس کا جائزہ لیتا ہوں اور وہ ہٹا دیتا ہوں جو میں استعمال نہیں کر رہا  
+- میں ایکسٹینشنز کو اپ ڈیٹ رکھتا ہوں تاکہ مجھے تازہ ترین بہتری اور سیکیورٹی فکسز ملیں  
+- اگر کچھ سست لگتا ہے، تو میں عارضی طور پر ایکسٹینشنز کو غیر فعال کرتا ہوں تاکہ دیکھ سکوں کہ آیا ان میں سے کوئی مسئلہ پیدا کر رہا ہے  
+- جب ایکسٹینشنز کو بڑے اپ ڈیٹس ملتے ہیں، تو میں اپ ڈیٹ نوٹس پڑھتا ہوں – کبھی کبھی وہاں کچھ زبردست نئی خصوصیات ہوتی ہیں!  
+
+> ⚠️ **کارکردگی کا مشورہ**: ایکسٹینشنز زبردست ہیں، لیکن بہت زیادہ ہونے سے چیزیں سست ہو سکتی ہیں۔ ان پر توجہ مرکوز کریں جو واقعی آپ کی زندگی کو آسان بناتے ہیں اور ان انسٹال کرنے سے نہ گھبرائیں جنہیں آپ کبھی استعمال نہیں کرتے۔  
+
+### 🎯 تعلیمی جائزہ: ترقیاتی ماحول کی حسب ضرورت  
+
+**معماری کی سمجھ**: آپ نے کمیونٹی کے تیار کردہ ایکسٹینشنز کا استعمال کرتے ہوئے ایک پیشہ ور ترقیاتی ماحول کو اپنی مرضی کے مطابق بنانا سیکھا۔ یہ آئینہ دار ہے کہ کس طرح انٹرپرائز ترقیاتی ٹیمیں معیاری ٹول چینز بناتی ہیں۔  
+
+**کلیدی تصورات میں مہارت حاصل کی گئی:**  
+- **ایکسٹینشن دریافت**: ایسے ٹولز تلاش کرنا جو مخصوص ترقیاتی چیلنجز کو حل کرتے ہیں  
+- **ماحول کی ترتیب**: ذاتی یا ٹیم کی ترجیحات کے مطابق ٹولز کو اپنی مرضی کے مطابق بنانا  
+- **کارکردگی کی اصلاح**: فعالیت اور نظام کی کارکردگی کے درمیان توازن قائم کرنا  
+- **کمیونٹی تعاون**: عالمی ڈویلپر کمیونٹی کے بنائے گئے ٹولز کا فائدہ اٹھانا  
+
+**صنعتی تعلق**: ایکسٹینشن ایکوسسٹمز بڑے ترقیاتی پلیٹ فارمز جیسے VS Code، Chrome DevTools، اور جدید IDEs کو طاقت دیتے ہیں۔ ایکسٹینشنز کا جائزہ لینا، انسٹال کرنا، اور ترتیب دینا پیشہ ورانہ ترقیاتی ورک فلو کے لیے ضروری ہے۔  
+
+**عکاسی کا سوال**: آپ 10 ڈویلپرز کی ٹیم کے لیے ایک معیاری ترقیاتی ماحول قائم کرنے کے لیے کس طرح رجوع کریں گے؟ مستقل مزاجی، کارکردگی، اور انفرادی ترجیحات پر غور کریں۔  
+
+## 📈 آپ کی کلاؤڈ ترقیاتی مہارت کا ٹائم لائن  
+
+```mermaid
+timeline
+    title Professional Cloud Development Journey
+    
+    section Platform Foundations
+        Cloud Development Understanding
+            : Master web-based editing concepts
+            : Connect GitHub integration patterns
+            : Navigate professional interfaces
+    
+    section Workflow Mastery
+        File & Project Management
+            : Create organized project structures
+            : Master syntax highlighting benefits
+            : Handle multi-file editing workflows
+        
+        Version Control Integration
+            : Understand Git visualization
+            : Practice commit message standards
+            : Master change tracking workflows
+    
+    section Environment Customization
+        Extension Ecosystem
+            : Discover productivity extensions
+            : Configure development preferences
+            : Optimize performance vs functionality
+        
+        Professional Setup
+            : Build consistent workflows
+            : Create reusable configurations
+            : Establish team standards
+    
+    section Industry Readiness
+        Cloud-First Development
+            : Master remote development practices
+            : Understand collaborative workflows
+            : Build platform-independent skills
+        
+        Professional Practices
+            : Follow industry standards
+            : Create maintainable workflows
+            : Prepare for team environments
+```
+  
+**🎓 گریجویشن سنگ میل**: آپ نے کامیابی سے کلاؤڈ پر مبنی ترقی میں مہارت حاصل کر لی ہے، وہی ٹولز اور ورک فلو استعمال کرتے ہوئے جو بڑے ٹیک کمپنیوں کے پیشہ ور ڈویلپرز استعمال کرتے ہیں۔ یہ مہارتیں سافٹ ویئر ترقی کے مستقبل کی نمائندگی کرتی ہیں۔  
 
-> ⚠️ **پرفارمنس ٹپ**: ایکسٹینشنز زبردست ہیں، لیکن بہت زیادہ ہونے سے چیزیں سست ہو سکتی ہیں۔ ان پر توجہ دیں جو واقعی آپ کی زندگی کو آسان بناتے ہیں اور ان انسٹال کرنے سے نہ گھبرائیں جو آپ کبھی استعمال نہیں کرتے۔
+**🔄 اگلے درجے کی صلاحیتیں:**  
+- جدید کلاؤڈ ترقیاتی پلیٹ فارمز (Codespaces، GitPod) کو دریافت کرنے کے لیے تیار  
+- تقسیم شدہ ترقیاتی ٹیموں میں کام کرنے کے لیے تیار  
+- عالمی سطح پر اوپن سورس پروجیکٹس میں تعاون کرنے کے لیے تیار  
+- جدید DevOps اور مسلسل انٹیگریشن کے طریقوں کے لیے بنیاد قائم  
 
-## GitHub Copilot Agent Challenge 🚀
+## GitHub Copilot ایجنٹ چیلنج 🚀  
 
-جیسے ناسا خلائی مشنز کے لیے منظم طریقہ کار استعمال کرتی ہے، یہ چیلنج VSCode.dev کی مہارتوں کو مکمل ورک فلو منظرنامے میں منظم طریقے سے لاگو کرنے پر مشتمل ہے۔
+جیسے NASA خلائی مشن کے لیے منظم طریقہ کار استعمال کرتا ہے، یہ چیلنج VSCode.dev مہارتوں کو مکمل ورک فلو منظرنامے میں منظم طریقے سے لاگو کرنے پر مشتمل ہے۔  
 
-**مقصد:** VSCode.dev میں مہارت کا مظاہرہ کرتے ہوئے ایک جامع ویب ڈیولپمنٹ ورک فلو قائم کریں۔
+**مقصد:** VSCode.dev کے ساتھ مہارت کا مظاہرہ کرتے ہوئے ایک جامع ویب ترقیاتی ورک فلو قائم کریں۔  
 
-**پروجیکٹ کی ضروریات:** Agent mode کی مدد سے یہ کام مکمل کریں:
-1. موجودہ ریپوزٹری کو فورک کریں یا نیا بنائیں
-2. HTML، CSS، اور JavaScript فائلز کے ساتھ ایک فعال پروجیکٹ اسٹرکچر قائم کریں
-3. تین ڈیولپمنٹ کو بہتر بنانے والی ایکسٹینشنز انسٹال اور کنفیگر کریں
-4. ورژن کنٹرول کی مشق کریں اور وضاحتی کمیٹ میسیجز لکھیں
-5. فیچر برانچز بنانے اور ان میں ترمیم کرنے کا تجربہ کریں
-6. README.md فائل میں عمل اور سیکھنے کو دستاویز کریں
+**پروجیکٹ کی ضروریات:** ایجنٹ موڈ کی مدد سے، یہ کام مکمل کریں:  
+1. موجودہ ریپوزیٹری کو فورک کریں یا نیا بنائیں  
+2. HTML، CSS، اور JavaScript فائلوں کے ساتھ ایک فعال پروجیکٹ ڈھانچہ قائم کریں  
+3. تین ترقیاتی صلاحیتوں کو بڑھانے والی ایکسٹینشنز انسٹال اور ترتیب دیں  
+4. وضاحتی commit messages کے ساتھ ورژن کنٹرول کی مشق کریں  
+5. فیچر برانچ کی تخلیق اور ترمیم کے ساتھ تجربہ کریں  
+6. README.md فائل میں عمل اور سیکھنے کو دستاویز کریں  
 
-یہ مشق تمام VSCode.dev تصورات کو ایک عملی ورک فلو میں یکجا کرتی ہے جو مستقبل کے ڈیولپمنٹ پروجیکٹس میں لاگو کی جا سکتی ہے۔
+یہ مشق تمام VSCode.dev تصورات کو ایک عملی ورک فلو میں یکجا کرتی ہے جو مستقبل کے ترقیاتی پروجیکٹس پر لاگو کی جا سکتی ہے۔  
 
-مزید جانیں [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں۔
+مزید جانیں [ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں یہاں۔  
 
-## اسائنمنٹ
+## اسائنمنٹ  
 
-اب ان مہارتوں کو حقیقی طور پر آزمانے کا وقت ہے! میرے پاس ایک عملی پروجیکٹ ہے جو آپ کو سب کچھ آزمانے دے گا: [VSCode.dev کا استعمال کرتے ہوئے ایک ریزیوم ویب سائٹ بنائیں](./assignment.md)
+وقت آگیا ہے کہ ان مہارتوں کو حقیقی آزمائش کے لیے لے جائیں! میرے پاس ایک عملی پروجیکٹ ہے جو آپ کو سب کچھ مشق کرنے دے گا: [VSCode.dev کا استعمال کرتے ہوئے ایک ریزیومے ویب سائٹ بنائیں](./assignment.md)  
 
-یہ اسائنمنٹ آپ کو مکمل طور پر اپنے براؤزر میں ایک پروفیشنل ریزیوم ویب سائٹ بنانے کے عمل سے گزارتی ہے۔ آپ ان تمام VSCode.dev فیچرز کا استعمال کریں گے جنہیں ہم نے دریافت کیا ہے، اور آخر میں، آپ کے پاس ایک خوبصورت ویب سائٹ اور اپنے نئے ورک فلو پر مضبوط اعتماد ہوگا۔
+یہ اسائنمنٹ آپ کو مکمل طور پر اپنے براؤزر میں ایک پیشہ ورانہ ریزیومے ویب سائٹ بنانے کے عمل سے گزرتا ہے۔ آپ ان تمام VSCode.dev خصوصیات کا استعمال کریں گے جن کا ہم نے جائزہ لیا ہے، اور آخر میں، آپ کے پاس ایک شاندار نظر آنے والی ویب سائٹ اور اپنے نئے ورک فلو میں مضبوط اعتماد ہوگا۔  
 
-## اپنی مہارتوں کو مزید دریافت کریں اور بڑھائیں
+## اپنی مہارتوں کو دریافت کرتے رہیں اور بڑھائیں  
 
-آپ کے پاس اب ایک مضبوط بنیاد ہے، لیکن دریافت کرنے کے لیے بہت کچھ زبردست چیزیں ہیں! یہاں کچھ وسائل اور خیالات ہیں جو آپ کی VSCode.dev مہارتوں کو اگلے درجے تک لے جانے کے لیے ہیں:
+آپ کے پاس اب ایک مضبوط بنیاد ہے، لیکن دریافت کرنے کے لیے ابھی بہت کچھ دلچسپ چیزیں ہیں! یہاں کچھ وسائل اور خیالات ہیں جو آپ کی VSCode.dev مہارتوں کو اگلے درجے تک لے جانے کے لیے ہیں:  
 
-**بک مارک کرنے کے قابل آفیشل ڈاکس:**
-- [VSCode Web Documentation](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – براؤزر پر مبنی ایڈیٹنگ کے لیے مکمل گائیڈ
-- [GitHub Codespaces](https://docs.github.com/en/codespaces) – جب آپ کلاؤڈ میں مزید طاقت چاہتے ہیں
+**بک مارک کرنے کے قابل سرکاری دستاویزات:**  
+- [VSCode ویب دستاویزات](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – براؤزر پر مبنی ایڈیٹنگ کے لیے مکمل گائیڈ  
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) – جب آپ کلاؤڈ میں مزید طاقت چاہتے ہیں  
 
-**اگلے تجربات کے لیے زبردست فیچرز:**
-- **Keyboard Shortcuts**: وہ کی بورڈ کومبوز سیکھیں جو آپ کو کوڈنگ ننجا کی طرح محسوس کرائیں گے
-- **Workspace Settings**: مختلف قسم کے پروجیکٹس کے لیے مختلف ماحول قائم کریں
-- **Multi-root Workspaces**: ایک ہی وقت میں متعدد ریپوزٹریز پر کام کریں (بہت مفید!)
-- **Terminal Integration**: اپنے براؤزر میں کمانڈ لائن ٹولز تک رسائی حاصل کریں
+**اگلے تجربے کے لیے دلچسپ خصوصیات:**  
+- **کی بورڈ شارٹ کٹس**: وہ کلیدی کومبوز سیکھیں جو آپ کو کوڈنگ ننجا کی طرح محسوس کریں گے  
+- **ورک اسپیس سیٹنگز**: مختلف قسم کے پروجیکٹس کے لیے مختلف ماحول ترتیب دیں  
+- **ملٹی روٹ ورک اسپیسز**: ایک ہی وقت میں متعدد ریپوزیٹریز پر کام کریں (بہت مددگار!)  
+- **ٹرمینل انٹیگریشن**: اپنے براؤزر میں کمانڈ لائن ٹولز تک رسائی حاصل کریں  
 
-**پریکٹس کے لیے خیالات:**
-- کچھ اوپن سورس پروجیکٹس میں شامل ہوں اور VSCode.dev کا استعمال کرتے ہوئے تعاون کریں – یہ واپس دینے کا ایک زبردست طریقہ ہے!
-- مختلف ایکسٹینشنز آزمائیں تاکہ اپنی بہترین سیٹ اپ تلاش کریں
-- ان قسم کی سائٹس کے لیے پروجیکٹ ٹیمپلیٹس بنائیں جو آپ اکثر بناتے ہیں
-- Git ورک فلو جیسے برانچنگ اور مرجنگ کی مشق کریں – یہ مہارتیں ٹیم پروجیکٹس میں سونے کی طرح ہیں
+**مشق کے لیے خیالات:**  
+- کچھ اوپن سورس پروجیکٹس میں شامل ہوں اور VSCode.dev کا استعمال کرتے ہوئے تعاون کریں – یہ واپس دینے کا ایک بہترین طریقہ ہے!  
+- مختلف ایکسٹینشنز آزمائیں تاکہ اپنی بہترین سیٹ اپ تلاش کریں  
+- ان قسم کی سائٹس کے لیے پروجیکٹ ٹیمپلیٹس بنائیں جو آپ اکثر بناتے ہیں  
+- Git ورک فلو جیسے برانچنگ اور مرجنگ کی مشق کریں – یہ مہارتیں ٹیم پروجیکٹس میں سونے کی طرح ہیں  
 
 ---
 
-**آپ نے براؤزر پر مبنی ڈیولپمنٹ میں مہارت حاصل کر لی ہے!** 🎉 جیسے پورٹیبل آلات کی ایجاد نے سائنسدانوں کو دور دراز مقامات پر تحقیق کرنے کی اجازت دی، VSCode.dev آپ کو کسی بھی انٹرنیٹ سے جڑے ڈیوائس سے پروفیشنل کوڈنگ کرنے کی سہولت دیتا ہے۔
+**آپ نے براؤزر پر مبنی ترقی میں مہارت حاصل کر لی ہے!** 🎉 جیسے پورٹیبل آلات کی ایجاد نے سائنسدانوں کو دور دراز مقامات پر تحقیق کرنے کی اجازت دی، VSCode.dev کسی بھی انٹرنیٹ سے منسلک ڈیوائس سے پیشہ ورانہ کوڈنگ کو ممکن بناتا ہے۔  
 
-یہ مہارتیں موجودہ انڈسٹری کے طریقوں کی عکاسی کرتی ہیں – بہت سے پروفیشنل ڈیولپرز کلاؤڈ پر مبنی ڈیولپمنٹ ماحول استعمال کرتے ہیں ان کی لچک اور رسائی کے لیے۔ آپ نے ایک ایسا ورک فلو سیکھا ہے جو انفرادی پروجیکٹس سے لے کر بڑی ٹیم کے تعاون تک بڑھتا ہے۔
+یہ مہارتیں موجودہ صنعت کے طریقوں کی عکاسی کرتی ہیں – بہت سے پیشہ ور ڈویلپرز کلاؤڈ پر مبنی ترقیاتی ماحول کو ان کی لچک اور رسائی کے لیے استعمال کرتے ہیں۔ آپ نے ایک ایسا ورک فلو سیکھا ہے جو انفرادی پروجیکٹس سے لے کر بڑی ٹیم کے تعاون تک بڑھتا ہے۔  
 
-اپنے اگلے ڈیولپمنٹ پروجیکٹ میں ان تکنیکوں کو لاگو کریں! 🚀
+اپنی اگلی ترقیاتی پروجیکٹ پر ان تکنیکوں کا اطلاق کریں! 🚀  
 
 ---
 
diff --git a/translations/ur/9-chat-project/README.md b/translations/ur/9-chat-project/README.md
index a1c7fd5e36..c7323fbe0a 100644
--- a/translations/ur/9-chat-project/README.md
+++ b/translations/ur/9-chat-project/README.md
@@ -1,219 +1,559 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "46d665af66e51524598af34a42b9b663",
-  "translation_date": "2025-10-22T14:49:06+00:00",
+  "original_hash": "2066c17078e9d18b5e309f31d8e8bc24",
+  "translation_date": "2025-11-03T13:10:45+00:00",
   "source_file": "9-chat-project/README.md",
   "language_code": "ur"
 }
 -->
 # چیٹ اسسٹنٹ بنائیں AI کے ساتھ
 
-یاد کریں کہ اسٹار ٹریک میں جب عملہ جہاز کے کمپیوٹر سے آرام سے بات کرتا تھا، پیچیدہ سوالات پوچھتا تھا اور سوچ سمجھ کر جواب حاصل کرتا تھا؟ جو 1960 کی دہائی میں خالص سائنس فکشن لگتا تھا، وہ اب کچھ ایسا ہے جو آپ ویب ٹیکنالوجیز کے ذریعے بنا سکتے ہیں جو آپ پہلے ہی جانتے ہیں۔
+یاد کریں کہ اسٹار ٹریک میں جب عملہ آرام سے جہاز کے کمپیوٹر سے بات کرتا تھا، پیچیدہ سوالات پوچھتا تھا اور سوچ سمجھ کر جواب حاصل کرتا تھا؟ جو 1960 کی دہائی میں خالص سائنس فکشن لگتا تھا، وہ اب کچھ ایسا ہے جو آپ ویب ٹیکنالوجیز کے ذریعے بنا سکتے ہیں جو آپ پہلے ہی جانتے ہیں۔
 
-اس سبق میں، ہم HTML، CSS، JavaScript، اور کچھ بیک اینڈ انٹیگریشن کا استعمال کرتے ہوئے ایک AI چیٹ اسسٹنٹ بنائیں گے۔ آپ دریافت کریں گے کہ وہی مہارتیں جو آپ سیکھ رہے ہیں، طاقتور AI سروسز سے جڑ سکتی ہیں جو سیاق و سباق کو سمجھ سکتی ہیں اور معنی خیز جوابات پیدا کر سکتی ہیں۔
+اس سبق میں، ہم HTML، CSS، جاوا اسکرپٹ، اور کچھ بیک اینڈ انٹیگریشن کا استعمال کرتے ہوئے ایک AI چیٹ اسسٹنٹ بنائیں گے۔ آپ دریافت کریں گے کہ وہی مہارتیں جو آپ سیکھ رہے ہیں، کس طرح طاقتور AI سروسز سے جڑ سکتی ہیں جو سیاق و سباق کو سمجھ سکتی ہیں اور معنی خیز جوابات پیدا کر سکتی ہیں۔
 
-AI کو ایک وسیع لائبریری تک رسائی حاصل کرنے کے طور پر سوچیں جو نہ صرف معلومات تلاش کر سکتی ہے بلکہ اسے آپ کے مخصوص سوالات کے مطابق مربوط جوابات میں بھی تبدیل کر سکتی ہے۔ ہزاروں صفحات کے ذریعے تلاش کرنے کے بجائے، آپ کو براہ راست، سیاق و سباق کے مطابق جوابات ملتے ہیں۔
+AI کو ایک وسیع لائبریری تک رسائی حاصل کرنے جیسا سمجھیں جو نہ صرف معلومات تلاش کر سکتی ہے بلکہ اسے آپ کے مخصوص سوالات کے مطابق مربوط جوابات میں بھی تبدیل کر سکتی ہے۔ ہزاروں صفحات کے ذریعے تلاش کرنے کے بجائے، آپ کو براہ راست، سیاق و سباق کے مطابق جوابات ملتے ہیں۔
 
-انٹیگریشن مانوس ویب ٹیکنالوجیز کے ذریعے ہوتا ہے جو ایک ساتھ کام کرتی ہیں۔ HTML چیٹ انٹرفیس بناتا ہے، CSS بصری ڈیزائن کو سنبھالتا ہے، JavaScript صارف کے تعاملات کا انتظام کرتا ہے، اور ایک بیک اینڈ API سب کچھ AI سروسز سے جوڑتا ہے۔ یہ بالکل اسی طرح ہے جیسے آرکسٹرا کے مختلف حصے ایک سمفنی بنانے کے لیے مل کر کام کرتے ہیں۔
+یہ انٹیگریشن مانوس ویب ٹیکنالوجیز کے ذریعے ہوتی ہے جو ایک ساتھ کام کرتی ہیں۔ HTML چیٹ انٹرفیس بناتا ہے، CSS بصری ڈیزائن کو سنبھالتا ہے، جاوا اسکرپٹ صارف کے تعاملات کا انتظام کرتا ہے، اور ایک بیک اینڈ API سب کچھ AI سروسز سے جوڑتا ہے۔ یہ بالکل ویسا ہی ہے جیسے ایک آرکسٹرا کے مختلف حصے مل کر ایک سمفنی بناتے ہیں۔
 
 ہم بنیادی طور پر قدرتی انسانی مواصلات اور مشین پروسیسنگ کے درمیان ایک پل بنا رہے ہیں۔ آپ AI سروس انٹیگریشن کے تکنیکی نفاذ اور ڈیزائن پیٹرنز سیکھیں گے جو تعاملات کو بدیہی محسوس کرتے ہیں۔
 
 اس سبق کے اختتام تک، AI انٹیگریشن ایک پراسرار عمل کی طرح کم اور ایک اور API کی طرح محسوس ہوگا جس کے ساتھ آپ کام کر سکتے ہیں۔ آپ ان بنیادی پیٹرنز کو سمجھیں گے جو ChatGPT اور Claude جیسے ایپلیکیشنز کو طاقت دیتے ہیں، وہی ویب ڈویلپمنٹ اصولوں کا استعمال کرتے ہوئے جو آپ سیکھ رہے ہیں۔
 
-یہاں آپ کے مکمل پروجیکٹ کی جھلک ہے:
+## ⚡ اگلے 5 منٹ میں آپ کیا کر سکتے ہیں؟
+
+**مصروف ڈویلپرز کے لیے فوری آغاز کا راستہ**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 minutes] --> B[Get GitHub token]
+    B --> C[Test AI playground]
+    C --> D[Copy Python code]
+    D --> E[See AI responses]
+```
+
+- **پہلا منٹ**: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) پر جائیں اور ایک ذاتی رسائی ٹوکن بنائیں
+- **دوسرا منٹ**: AI تعاملات کو براہ راست پلے گراؤنڈ انٹرفیس میں آزمائیں
+- **تیسرا منٹ**: "کوڈ" ٹیب پر کلک کریں اور Python کا اسنیپٹ کاپی کریں
+- **چوتھا منٹ**: اپنے ٹوکن کے ساتھ کوڈ کو مقامی طور پر چلائیں: `GITHUB_TOKEN=your_token python test.py`
+- **پانچواں منٹ**: دیکھیں کہ آپ کا پہلا AI جواب آپ کے اپنے کوڈ سے پیدا ہوتا ہے
+
+**فوری ٹیسٹ کوڈ**:
+```python
+import os
+from openai import OpenAI
+
+client = OpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key="your_token_here"
+)
+
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Hello AI!"}],
+    model="openai/gpt-4o-mini"
+)
+
+print(response.choices[0].message.content)
+```
+
+**یہ کیوں اہم ہے**: 5 منٹ میں، آپ پروگراماتی AI تعامل کا جادو محسوس کریں گے۔ یہ وہ بنیادی تعمیراتی بلاک ہے جو ہر AI ایپلیکیشن کو طاقت دیتا ہے جسے آپ استعمال کرتے ہیں۔
+
+یہ ہے کہ آپ کا مکمل شدہ پروجیکٹ کیسا نظر آئے گا:
 
 ![چیٹ ایپ انٹرفیس جو صارف اور AI اسسٹنٹ کے درمیان گفتگو دکھا رہا ہے](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ur.png)
 
-## AI کو سمجھنا: راز سے مہارت تک
+## 🗺️ AI ایپلیکیشن ڈویلپمنٹ کے ذریعے آپ کا سیکھنے کا سفر
+
+```mermaid
+journey
+    title From Web Development to AI Integration
+    section Understanding AI Foundations
+      Discover generative AI concepts: 4: You
+      Explore GitHub Models platform: 6: You
+      Master AI parameters and prompts: 8: You
+    section Backend Integration
+      Build Python API server: 5: You
+      Implement AI function calls: 7: You
+      Handle async operations: 8: You
+    section Frontend Development
+      Create modern chat interface: 6: You
+      Master real-time interactions: 8: You
+      Build responsive user experience: 9: You
+    section Professional Application
+      Deploy complete AI system: 7: You
+      Optimize performance patterns: 8: You
+      Create production-ready app: 9: You
+```
+
+**آپ کے سفر کی منزل**: اس سبق کے اختتام تک، آپ نے ایک مکمل AI سے چلنے والی ایپلیکیشن بنائی ہوگی جو جدید AI اسسٹنٹس جیسے ChatGPT، Claude، اور Google Bard کو طاقت دینے والی وہی ٹیکنالوجیز اور پیٹرنز استعمال کرتی ہے۔
+
+## AI کو سمجھنا: پراسرار سے مہارت تک
 
 کوڈ میں غوطہ لگانے سے پہلے، آئیے سمجھتے ہیں کہ ہم کس کے ساتھ کام کر رہے ہیں۔ اگر آپ نے پہلے APIs استعمال کیے ہیں، تو آپ بنیادی پیٹرن کو جانتے ہیں: درخواست بھیجیں، جواب وصول کریں۔
 
-AI APIs ایک جیسی ساخت کی پیروی کرتے ہیں، لیکن ڈیٹا بیس سے پہلے سے ذخیرہ شدہ ڈیٹا کو بازیافت کرنے کے بجائے، وہ متن کی بڑی مقدار سے سیکھے گئے پیٹرنز کی بنیاد پر نئے جوابات تیار کرتے ہیں۔ اسے اس طرح سوچیں جیسے لائبریری کیٹلاگ سسٹم اور ایک علم رکھنے والے لائبریرین کے درمیان فرق جو متعدد ذرائع سے معلومات کو مربوط کر سکتا ہے۔
+AI APIs ایک جیسا ڈھانچہ رکھتے ہیں، لیکن ڈیٹا بیس سے پہلے سے ذخیرہ شدہ ڈیٹا کو بازیافت کرنے کے بجائے، وہ نئے جوابات پیدا کرتے ہیں جو وسیع مقدار میں متن سے سیکھے گئے پیٹرنز پر مبنی ہوتے ہیں۔ اسے اس فرق کی طرح سمجھیں جو ایک لائبریری کیٹلاگ سسٹم اور ایک جاننے والے لائبریرین کے درمیان ہوتا ہے جو متعدد ذرائع سے معلومات کو مربوط کر سکتا ہے۔
 
-### "Generative AI" اصل میں کیا ہے؟
+### "Generative AI" واقعی کیا ہے؟
 
-سوچیں کہ Rosetta Stone نے مصری ہائروگلیفس کو سمجھنے کے لیے معروف اور نامعلوم زبانوں کے درمیان پیٹرنز تلاش کرکے اسکالرز کو کیسے مدد دی۔ AI ماڈلز اسی طرح کام کرتے ہیں – وہ زبان کے کام کرنے کے طریقے کو سمجھنے کے لیے متن کی بڑی مقدار میں پیٹرنز تلاش کرتے ہیں، پھر ان پیٹرنز کا استعمال نئے سوالات کے لیے مناسب جوابات تیار کرنے کے لیے کرتے ہیں۔
+سوچیں کہ Rosetta Stone نے اسکالرز کو مصری ہائروگلیفس کو سمجھنے کی اجازت دی تھی، معلوم اور نامعلوم زبانوں کے درمیان پیٹرنز تلاش کرکے۔ AI ماڈلز اسی طرح کام کرتے ہیں – وہ زبان کو سمجھنے کے لیے متن کی وسیع مقدار میں پیٹرنز تلاش کرتے ہیں، پھر ان پیٹرنز کا استعمال کرتے ہوئے نئے سوالات کے لیے مناسب جوابات پیدا کرتے ہیں۔
 
 **آئیے اسے ایک سادہ موازنہ کے ساتھ توڑتے ہیں:**
 - **روایتی ڈیٹا بیس**: جیسے آپ کے پیدائشی سرٹیفکیٹ کے لیے پوچھنا – آپ کو ہر بار بالکل وہی دستاویز ملتی ہے
-- **سرچ انجن**: جیسے لائبریرین سے بلیوں کے بارے میں کتابیں تلاش کرنے کے لیے کہنا – وہ آپ کو دستیاب چیزیں دکھاتے ہیں
-- **Generative AI**: جیسے کسی علم رکھنے والے دوست سے بلیوں کے بارے میں پوچھنا – وہ آپ کو دلچسپ چیزیں اپنے الفاظ میں بتاتے ہیں، جو آپ جاننا چاہتے ہیں اس کے مطابق
+- **سرچ انجن**: جیسے کسی لائبریرین سے بلیوں کے بارے میں کتابیں تلاش کرنے کے لیے کہنا – وہ آپ کو دستیاب چیزیں دکھاتے ہیں
+- **Generative AI**: جیسے کسی جاننے والے دوست سے بلیوں کے بارے میں پوچھنا – وہ آپ کو دلچسپ چیزیں اپنے الفاظ میں بتاتے ہیں، جو آپ جاننا چاہتے ہیں اس کے مطابق
+
+```mermaid
+graph LR
+    A[Your Question] --> B[AI Model]
+    B --> C[Pattern Recognition]
+    C --> D[Content Generation]
+    D --> E[Contextual Response]
+    
+    F[Training Data<br/>Books, Articles, Web] --> B
+```
 
 ### AI ماڈلز کیسے سیکھتے ہیں (سادہ ورژن)
 
-AI ماڈلز کتابوں، مضامین، اور گفتگو سے متن پر مشتمل بڑے ڈیٹا سیٹس کے سامنے آنے کے ذریعے سیکھتے ہیں۔ اس عمل کے ذریعے، وہ درج ذیل میں پیٹرنز کی شناخت کرتے ہیں:
-- تحریری مواصلات میں خیالات کیسے تشکیل دیے جاتے ہیں
+AI ماڈلز کتابوں، مضامین، اور گفتگو پر مشتمل بڑے ڈیٹا سیٹس کے سامنے آنے کے ذریعے سیکھتے ہیں۔ اس عمل کے ذریعے، وہ درج ذیل میں پیٹرنز کی شناخت کرتے ہیں:
+- تحریری مواصلات میں خیالات کیسے ترتیب دیے جاتے ہیں
 - کون سے الفاظ عام طور پر ایک ساتھ ظاہر ہوتے ہیں
 - گفتگو عام طور پر کیسے بہتی ہے
 - رسمی اور غیر رسمی مواصلات کے درمیان سیاق و سباق کے فرق
 
-**یہ بالکل اسی طرح ہے جیسے آثار قدیمہ کے ماہرین قدیم زبانوں کو ڈی کوڈ کرتے ہیں**: وہ گرامر، الفاظ، اور ثقافتی سیاق و سباق کو سمجھنے کے لیے ہزاروں مثالوں کا تجزیہ کرتے ہیں، آخر کار ان سیکھے گئے پیٹرنز کا استعمال کرتے ہوئے نئے متن کی تشریح کرنے کے قابل ہو جاتے ہیں۔
+**یہ بالکل ویسا ہی ہے جیسے آثار قدیمہ کے ماہرین قدیم زبانوں کو ڈی کوڈ کرتے ہیں**: وہ گرامر، الفاظ، اور ثقافتی سیاق و سباق کو سمجھنے کے لیے ہزاروں مثالوں کا تجزیہ کرتے ہیں، آخر کار ان سیکھے گئے پیٹرنز کا استعمال کرتے ہوئے نئے متن کی تشریح کرنے کے قابل ہو جاتے ہیں۔
 
 ### GitHub Models کیوں؟
 
-ہم GitHub Models کو ایک عملی وجہ سے استعمال کر رہے ہیں – یہ ہمیں اپنی AI انفراسٹرکچر قائم کیے بغیر انٹرپرائز لیول AI تک رسائی فراہم کرتا ہے (جو، یقین کریں، آپ ابھی نہیں کرنا چاہتے!)۔ اسے موسم API استعمال کرنے کی طرح سوچیں بجائے اس کے کہ آپ خود موسم کی پیش گوئی کرنے کی کوشش کریں۔
+ہم GitHub Models استعمال کر رہے ہیں ایک عملی وجہ کے لیے – یہ ہمیں انٹرپرائز لیول AI تک رسائی فراہم کرتا ہے بغیر اپنی AI انفراسٹرکچر قائم کیے (جو، یقین کریں، آپ ابھی نہیں کرنا چاہتے!)۔ اسے موسم API استعمال کرنے جیسا سمجھیں بجائے اس کے کہ آپ خود موسم کی پیش گوئی کرنے کی کوشش کریں۔
 
-یہ بنیادی طور پر "AI-as-a-Service" ہے، اور سب سے اچھی بات؟ شروع کرنے کے لیے یہ مفت ہے، لہذا آپ بغیر کسی بڑی بل کی فکر کیے تجربہ کر سکتے ہیں۔
+یہ بنیادی طور پر "AI-as-a-Service" ہے، اور سب سے اچھی بات؟ شروع کرنے کے لیے یہ مفت ہے، لہذا آپ تجربہ کر سکتے ہیں بغیر کسی بڑے بل کی فکر کیے۔
 
-ہم GitHub Models کو اپنے بیک اینڈ انٹیگریشن کے لیے استعمال کریں گے، جو ایک ڈویلپر دوستانہ انٹرفیس کے ذریعے پیشہ ورانہ گریڈ AI صلاحیتوں تک رسائی فراہم کرتا ہے۔ [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ایک ٹیسٹنگ ماحول کے طور پر کام کرتا ہے جہاں آپ مختلف AI ماڈلز کے ساتھ تجربہ کر سکتے ہیں اور ان کی صلاحیتوں کو کوڈ میں نافذ کرنے سے پہلے سمجھ سکتے ہیں۔
+```mermaid
+graph LR
+    A[Frontend Chat UI] --> B[Your Backend API]
+    B --> C[GitHub Models API]
+    C --> D[AI Model Processing]
+    D --> C
+    C --> B
+    B --> A
+```
+
+ہم اپنے بیک اینڈ انٹیگریشن کے لیے GitHub Models استعمال کریں گے، جو ایک ڈویلپر دوستانہ انٹرفیس کے ذریعے پیشہ ورانہ گریڈ AI صلاحیتوں تک رسائی فراہم کرتا ہے۔ [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ایک ٹیسٹنگ ماحول کے طور پر کام کرتا ہے جہاں آپ مختلف AI ماڈلز کے ساتھ تجربہ کر سکتے ہیں اور ان کی صلاحیتوں کو کوڈ میں نافذ کرنے سے پہلے سمجھ سکتے ہیں۔
+
+## 🧠 AI ایپلیکیشن ڈویلپمنٹ ایکو سسٹم
+
+```mermaid
+mindmap
+  root((AI Development))
+    Understanding AI
+      Generative Models
+        Pattern Recognition
+        Content Generation
+        Context Understanding
+        Response Synthesis
+      AI Parameters
+        Temperature Control
+        Token Limits
+        Top-p Filtering
+        System Prompts
+    Backend Architecture
+      API Integration
+        GitHub Models
+        Authentication
+        Request Handling
+        Error Management
+      Python Infrastructure
+        FastAPI Framework
+        Async Operations
+        Environment Security
+        CORS Configuration
+    Frontend Experience
+      Chat Interface
+        Real-time Updates
+        Message History
+        User Feedback
+        Loading States
+      Modern Web Tech
+        ES6 Classes
+        Async/Await
+        DOM Manipulation
+        Event Handling
+    Professional Patterns
+      Security Best Practices
+        Token Management
+        Input Validation
+        XSS Prevention
+        Error Boundaries
+      Production Readiness
+        Performance Optimization
+        Responsive Design
+        Accessibility
+        Testing Strategies
+```
+
+**بنیادی اصول**: AI ایپلیکیشن ڈویلپمنٹ روایتی ویب ڈویلپمنٹ کی مہارتوں کو AI سروس انٹیگریشن کے ساتھ جوڑتا ہے، ذہین ایپلیکیشنز تخلیق کرتا ہے جو صارفین کے لیے قدرتی اور جوابدہ محسوس ہوتی ہیں۔
 
 ![GitHub Models AI Playground انٹرفیس ماڈل کے انتخاب اور ٹیسٹنگ ایریا کے ساتھ](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ur.png)
 
-**Playground کو اتنا مفید بنانے والی چیزیں:**
+**یہاں ہے کہ پلے گراؤنڈ کو اتنا مفید کیا بناتا ہے:**
 - **مختلف AI ماڈلز آزمائیں** جیسے GPT-4o-mini، Claude، اور دیگر (سب مفت!)
 - **اپنے خیالات اور پرامپٹس کو ٹیسٹ کریں** کوڈ لکھنے سے پہلے
 - **اپنی پسندیدہ پروگرامنگ زبان میں تیار کوڈ اسنیپٹس حاصل کریں**
-- **سیٹنگز کو ایڈجسٹ کریں** جیسے تخلیقی سطح اور جواب کی لمبائی تاکہ دیکھ سکیں کہ وہ آؤٹ پٹ کو کیسے متاثر کرتے ہیں
+- **تخلیقی سطح اور جواب کی لمبائی جیسی ترتیبات کو ایڈجسٹ کریں** تاکہ دیکھ سکیں کہ وہ آؤٹ پٹ کو کیسے متاثر کرتے ہیں
 
-کچھ دیر کھیلنے کے بعد، بس "Code" ٹیب پر کلک کریں اور اپنی پروگرامنگ زبان منتخب کریں تاکہ آپ کو وہ نفاذی کوڈ ملے جس کی آپ کو ضرورت ہے۔
+جب آپ تھوڑا سا کھیل چکے ہوں، تو بس "کوڈ" ٹیب پر کلک کریں اور اپنی پروگرامنگ زبان منتخب کریں تاکہ آپ کو وہ نفاذی کوڈ ملے جس کی آپ کو ضرورت ہے۔
 
-![Playground انتخاب مختلف پروگرامنگ زبانوں کے لیے کوڈ جنریشن کے اختیارات دکھا رہا ہے](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ur.png)
+![پلے گراؤنڈ کا انتخاب مختلف پروگرامنگ زبانوں کے لیے کوڈ جنریشن کے اختیارات دکھا رہا ہے](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ur.png)
 
 ## Python بیک اینڈ انٹیگریشن سیٹ اپ کرنا
 
-اب آئیے Python کا استعمال کرتے ہوئے AI انٹیگریشن کو نافذ کریں۔ Python AI ایپلیکیشنز کے لیے بہترین ہے کیونکہ اس کی سادہ نحو اور طاقتور لائبریریاں ہیں۔ ہم GitHub Models Playground سے کوڈ کے ساتھ شروع کریں گے اور پھر اسے ایک قابل استعمال، پروڈکشن ریڈی فنکشن میں ریفیکٹر کریں گے۔
+اب آئیے Python کا استعمال کرتے ہوئے AI انٹیگریشن نافذ کریں۔ AI ایپلیکیشنز کے لیے Python بہترین ہے کیونکہ اس کی سادہ نحو اور طاقتور لائبریریاں ہیں۔ ہم GitHub Models پلے گراؤنڈ سے کوڈ کے ساتھ شروع کریں گے اور پھر اسے ایک قابل استعمال، پروڈکشن ریڈی فنکشن میں ریفیکٹر کریں گے۔
 
 ### بنیادی نفاذ کو سمجھنا
 
-جب آپ Playground سے Python کوڈ حاصل کرتے ہیں، تو آپ کو کچھ ایسا ملے گا۔ اگر یہ پہلے تو بہت زیادہ لگے تو پریشان نہ ہوں – آئیے اسے ٹکڑوں میں سمجھتے ہیں:
+جب آپ پلے گراؤنڈ سے Python کوڈ حاصل کرتے ہیں، تو آپ کو کچھ ایسا ملے گا۔ اگر یہ پہلے تو بہت زیادہ لگے، تو فکر نہ کریں – آئیے اسے ٹکڑوں میں سمجھتے ہیں:
+
+```python
+"""Run this model in Python
+
+> pip install openai
+"""
+import os
+from openai import OpenAI
+
+# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. 
+# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
+client = OpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key=os.environ["GITHUB_TOKEN"],
+)
+
+response = client.chat.completions.create(
+    messages=[
+        {
+            "role": "system",
+            "content": "",
+        },
+        {
+            "role": "user",
+            "content": "What is the capital of France?",
+        }
+    ],
+    model="openai/gpt-4o-mini",
+    temperature=1,
+    max_tokens=4096,
+    top_p=1
+)
+
+print(response.choices[0].message.content)
+```
 
 **اس کوڈ میں کیا ہو رہا ہے:**
 - **ہم وہ ٹولز درآمد کرتے ہیں جن کی ہمیں ضرورت ہے**: `os` ماحول متغیرات کو پڑھنے کے لیے اور `OpenAI` AI سے بات کرنے کے لیے
 - **ہم OpenAI کلائنٹ کو سیٹ اپ کرتے ہیں** تاکہ GitHub کے AI سرورز کی طرف اشارہ کریں بجائے OpenAI کے براہ راست
-- **ہم ایک خاص GitHub ٹوکن کا استعمال کرتے ہوئے تصدیق کرتے ہیں**
-- **ہم اپنی گفتگو کو مختلف "کرداروں" کے ساتھ ترتیب دیتے ہیں** – اسے ایک ڈرامے کے منظر کے لیے ترتیب دینے کی طرح سوچیں
+- **ہم ایک خاص GitHub ٹوکن کا استعمال کرتے ہوئے تصدیق کرتے ہیں** (اس پر بعد میں مزید!)
+- **ہم اپنی گفتگو کو مختلف "کرداروں" کے ساتھ ترتیب دیتے ہیں** – اسے ایک کھیل کے منظر کے لیے ترتیب دینے جیسا سمجھیں
 - **ہم اپنی درخواست AI کو بھیجتے ہیں** کچھ فائن ٹیوننگ پیرامیٹرز کے ساتھ
 - **ہم اصل جواب کا متن نکالتے ہیں** تمام ڈیٹا سے جو واپس آتا ہے
 
 ### پیغام کے کرداروں کو سمجھنا: AI گفتگو کا فریم ورک
 
-AI گفتگو ایک مخصوص ساخت کا استعمال کرتی ہے جس میں مختلف "کردار" ہوتے ہیں جو الگ الگ مقاصد کی خدمت کرتے ہیں:
+AI گفتگو ایک مخصوص ڈھانچے کا استعمال کرتی ہے جس میں مختلف "کردار" ہوتے ہیں جو الگ الگ مقاصد کی خدمت کرتے ہیں:
+
+```python
+messages=[
+    {
+        "role": "system",
+        "content": "You are a helpful assistant who explains things simply."
+    },
+    {
+        "role": "user", 
+        "content": "What is machine learning?"
+    }
+]
+```
 
-**اسے ایک ڈرامے کی ہدایت کے طور پر سوچیں:**
-- **سسٹم کردار**: جیسے اداکار کے لیے اسٹیج کی ہدایات – یہ AI کو بتاتا ہے کہ کیسے برتاؤ کرنا ہے، کس شخصیت کا ہونا ہے، اور کیسے جواب دینا ہے
+**اسے ایک کھیل کی ہدایت کاری کی طرح سمجھیں:**
+- **سسٹم کردار**: جیسے ایک اداکار کے لیے اسٹیج کی ہدایات – یہ AI کو بتاتا ہے کہ کیسے برتاؤ کرنا ہے، کس شخصیت کا ہونا ہے، اور کیسے جواب دینا ہے
 - **صارف کردار**: ایپلیکیشن استعمال کرنے والے شخص کا اصل سوال یا پیغام
-- **اسسٹنٹ کردار**: AI کا جواب (آپ اسے نہیں بھیجتے، لیکن یہ گفتگو کی تاریخ میں ظاہر ہوتا ہے)
+- **اسسٹنٹ کردار**: AI کا جواب (آپ یہ نہیں بھیجتے، لیکن یہ گفتگو کی تاریخ میں ظاہر ہوتا ہے)
 
-**حقیقی دنیا کی مثال**: تصور کریں کہ آپ کسی پارٹی میں کسی دوست کو کسی سے متعارف کروا رہے ہیں:
-- **سسٹم پیغام**: "یہ میری دوست سارہ ہے، وہ ایک ڈاکٹر ہے جو طبی تصورات کو آسان الفاظ میں سمجھانے میں بہترین ہے"
+**حقیقی دنیا کی مثال**: تصور کریں کہ آپ کسی دوست کو پارٹی میں کسی سے متعارف کروا رہے ہیں:
+- **سسٹم پیغام**: "یہ میری دوست سارہ ہے، وہ ایک ڈاکٹر ہے جو طبی تصورات کو آسان الفاظ میں سمجھانے میں ماہر ہے"
 - **صارف پیغام**: "کیا آپ وضاحت کر سکتی ہیں کہ ویکسین کیسے کام کرتی ہیں؟"
-- **اسسٹنٹ جواب**: سارہ ایک دوستانہ ڈاکٹر کے طور پر جواب دیتی ہے، وکیل یا شیف کے طور پر نہیں
+- **اسسٹنٹ جواب**: سارہ ایک دوستانہ ڈاکٹر کے طور پر جواب دیتی ہے، نہ کہ ایک وکیل یا شیف کے طور پر
 
 ### AI پیرامیٹرز کو سمجھنا: جواب کے رویے کو بہتر بنانا
 
-AI API کالز میں عددی پیرامیٹرز کنٹرول کرتے ہیں کہ ماڈل جوابات کیسے تیار کرتا ہے۔ یہ ترتیبات آپ کو مختلف استعمال کے معاملات کے لیے AI کے رویے کو ایڈجسٹ کرنے کی اجازت دیتی ہیں:
+AI API کالز میں عددی پیرامیٹرز ماڈل کے جوابات پیدا کرنے کے طریقے کو کنٹرول کرتے ہیں۔ یہ ترتیبات آپ کو مختلف استعمال کے معاملات کے لیے AI کے رویے کو ایڈجسٹ کرنے کی اجازت دیتی ہیں:
 
 #### Temperature (0.0 سے 2.0): تخلیقی صلاحیت کا ڈائل
 
 **یہ کیا کرتا ہے**: کنٹرول کرتا ہے کہ AI کے جوابات کتنے تخلیقی یا پیش گوئی کے قابل ہوں گے۔
 
-**اسے جاز موسیقار کی بدیہی سطح کے طور پر سوچیں:**
+**اسے جاز موسیقار کے ارتجاعی سطح کی طرح سمجھیں:**
 - **Temperature = 0.1**: ہر بار بالکل وہی دھن بجانا (بہت پیش گوئی کے قابل)
 - **Temperature = 0.7**: کچھ ذائقہ دار تغیرات شامل کرنا جبکہ قابل شناخت رہنا (متوازن تخلیقی صلاحیت)
-- **Temperature = 1.5**: مکمل تجرباتی جاز غیر متوقع موڑ کے ساتھ (بہت غیر پیش گوئی کے قابل)
+- **Temperature = 1.5**: مکمل تجرباتی جاز غیر متوقع موڑ کے ساتھ (بہت غیر متوقع)
+
+```python
+# Very predictable responses (good for factual questions)
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "What is 2+2?"}],
+    temperature=0.1  # Will almost always say "4"
+)
+
+# Creative responses (good for brainstorming)
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Write a creative story opening"}],
+    temperature=1.2  # Will generate unique, unexpected stories
+)
+```
 
 #### Max Tokens (1 سے 4096+): جواب کی لمبائی کا کنٹرولر
 
 **یہ کیا کرتا ہے**: AI کے جواب کی لمبائی پر حد مقرر کرتا ہے۔
 
-**Tokens کو الفاظ کے برابر سمجھیں** (انگریزی میں تقریباً 1 ٹوکن = 0.75 الفاظ):
-- **max_tokens=50**: مختصر اور جامع (جیسے ایک ٹیکسٹ میسج)
-- **max_tokens=500**: ایک یا دو اچھے پیراگراف
-- **max_tokens=2000**: تفصیلی وضاحت مثالوں کے ساتھ
+**ٹوکنز کو الفاظ کے برابر سمجھیں** (انگریزی میں تقریباً 1 ٹوکن = 0.75 الفاظ):
+- **max_tokens=50**: مختصر اور میٹھا (جیسے ایک ٹیکسٹ میسج)
+- **max_tokens=500**: ایک اچھا پیراگراف یا دو
+- **max_tokens=2000**: مثالوں کے ساتھ تفصیلی وضاحت
+
+```python
+# Short, concise answers
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Explain JavaScript"}],
+    max_tokens=100  # Forces a brief explanation
+)
+
+# Detailed, comprehensive answers  
+response = client.chat.completions.create(
+    messages=[{"role": "user", "content": "Explain JavaScript"}],
+    max_tokens=1500  # Allows for detailed explanations with examples
+)
+```
 
 #### Top_p (0.0 سے 1.0): فوکس پیرامیٹر
 
 **یہ کیا کرتا ہے**: کنٹرول کرتا ہے کہ AI سب سے زیادہ ممکنہ جوابات پر کتنا مرکوز رہتا ہے۔
 
-**تصور کریں کہ AI کے پاس ایک بہت بڑا ذخیرہ الفاظ ہے، ہر لفظ کی درجہ بندی اس کے ممکنہ ہونے کے لحاظ سے:**
+**تصور کریں کہ AI کے پاس ایک بہت بڑا ذخیرہ الفاظ ہے، ہر لفظ کی درجہ بندی کے ساتھ کہ ہر لفظ کتنا ممکن ہے:**
 - **top_p=0.1**: صرف سب سے زیادہ ممکنہ 10% الفاظ پر غور کرتا ہے (بہت مرکوز)
 - **top_p=0.9**: ممکنہ الفاظ کے 90% پر غور کرتا ہے (زیادہ تخلیقی)
-- **top_p=1.0**: سب کچھ پر غور کرتا ہے (زیادہ سے زیادہ تنوع)
+- **top_p=1.0**: ہر چیز پر غور کرتا ہے (زیادہ سے زیادہ تنوع)
 
 **مثال کے طور پر**: اگر آپ پوچھیں "آسمان عام طور پر..."
-- **Low top_p**: تقریباً یقینی طور پر کہے گا "نیلا"
-- **High top_p**: کہہ سکتا ہے "نیلا"، "بادلوں سے بھرا ہوا"، "وسیع"، "بدلتا ہوا"، "خوبصورت"، وغیرہ۔
+- **کم top_p**: تقریباً یقینی طور پر کہے گا "نیلا"
+- **زیادہ top_p**: کہہ سکتا ہے "نیلا"، "بادلوں سے بھرا ہوا"، "وسیع"، "بدلتا ہوا"، "خوبصورت"، وغیرہ۔
 
-### سب کچھ ایک ساتھ رکھنا: مختلف استعمال کے معاملات کے لیے پیرامیٹرز کے امتزاج
+### سب کچھ ایک ساتھ رکھنا: مختلف استعمال کے معاملات کے لیے پیرامیٹر امتزاج
 
-**یہ پیرامیٹرز کیوں اہم ہیں**: مختلف ایپلیکیشنز کو مختلف قسم کے جوابات کی ضرورت ہوتی ہے۔ ایک کسٹمر سروس بوٹ کو مستقل اور حقائق پر مبنی ہونا چاہیے (کم Temperature)، جبکہ ایک تخلیقی تحریری اسسٹنٹ کو تخیلاتی اور متنوع ہونا چاہیے (زیادہ Temperature)۔ ان پیرامیٹرز کو سمجھنا آپ کو اپنے AI کی شخصیت اور جواب کے انداز پر کنٹرول دیتا ہے۔
+```python
+# For factual, consistent answers (like a documentation bot)
+factual_params = {
+    "temperature": 0.2,
+    "max_tokens": 300,
+    "top_p": 0.3
+}
 
-### سسٹم پرامپٹس کا جادو: AI شخصیت کو پروگرام کرنا
+# For creative writing assistance
+creative_params = {
+    "temperature": 1.1,
+    "max_tokens": 1000,
+    "top_p": 0.9
+}
 
-اگر پیرامیٹرز کنٹرول کرتے ہیں کہ AI کیسے سوچتا ہے، تو سسٹم پرامپٹس کنٹرول کرتے ہیں کہ AI کون سوچتا ہے کہ وہ ہے۔ یہ واقعی AI کے ساتھ کام کرنے کے سب سے دلچسپ حصوں میں سے ایک ہے – آپ بنیادی طور پر AI کو مکمل شخصیت، مہارت کی سطح، اور مواصلات کا انداز دے رہے ہیں۔
+# For conversational, helpful responses (balanced)
+conversational_params = {
+    "temperature": 0.7,
+    "max_tokens": 500,
+    "top_p": 0.8
+}
+```
 
-**سسٹم پرامپٹس کو مختلف کرداروں کے لیے مختلف اداکاروں کو کاسٹ کرنے کے طور پر سوچیں**: ایک عام اسسٹنٹ رکھنے کے بجائے، آپ مختلف حالات کے لیے ماہرین بنا سکتے ہیں۔ کیا آپ کو ایک صبر کرنے والے استاد کی ضرورت ہے؟ ایک تخلیقی خیالات کا ساتھی؟ ایک سنجیدہ کاروباری مشیر؟ بس سسٹم پرامپٹ تبدیل کریں!
+```mermaid
+quadrantChart
+    title AI Parameter Optimization Matrix
+    x-axis Low Creativity --> High Creativity
+    y-axis Short Response --> Long Response
+    
+    quadrant-1 Creative Content
+    quadrant-2 Detailed Analysis
+    quadrant-3 Quick Facts
+    quadrant-4 Conversational AI
+    
+    Documentation Bot: [0.2, 0.3]
+    Customer Service: [0.4, 0.4]
+    General Assistant: [0.7, 0.5]
+    Creative Writer: [0.9, 0.9]
+    Brainstorming Tool: [0.8, 0.8]
+```
 
-#### سسٹم پرامپٹس کیوں اتنے طاقتور ہیں
+**یہ پیرامیٹرز کیوں اہم ہیں سمجھنا**: مختلف ایپلیکیشنز کو مختلف قسم کے جوابات کی ضرورت ہوتی ہے۔ ایک کسٹمر سروس بوٹ کو مستقل اور حقیقت پسندانہ ہونا چاہیے (کم Temperature)، جبکہ ایک تخلیقی تحریری اسسٹنٹ کو تخیلاتی اور متنوع ہونا چاہیے (زیادہ Temperature)۔ ان پیرامیٹرز کو سمجھنا آپ کو اپنے AI کی شخصیت اور جواب کے انداز پر کنٹرول دیتا ہے۔
+```
 
-یہاں دلچسپ حصہ ہے: AI ماڈلز کو بے شمار گفتگو پر تربیت دی گئی ہے جہاں لوگ مختلف کرداروں اور مہارت کی سطح کو اپناتے ہیں۔ جب آپ AI کو ایک مخصوص کردار دیتے ہیں، تو یہ ایسا ہے جیسے ایک سوئچ پلٹتا ہے جو ان تمام سیکھے گئے پیٹرنز کو فعال کرتا ہے۔
+**Here's what's happening in this code:**
+- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
+- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
+- **We authenticate** using a special GitHub token (more on that in a minute!)
+- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
+- **We send** our request to the AI with some fine-tuning parameters
+- **We extract** the actual response text from all the data that comes back
 
-**یہ AI کے لیے طریقہ اداکاری کی طرح ہے**: ایک اداکار کو بتائیں "آپ ایک دانشمند بوڑھے پروفیسر ہیں" اور دیکھیں کہ وہ خود بخود اپنا انداز، الفاظ، اور انداز کیسے ایڈجسٹ کرتے ہیں۔ AI زبان کے پیٹرنز کے ساتھ کچھ حیرت انگیز طور پر اسی طرح کرتا ہے۔
+> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
 
-#### مؤثر سسٹم پرامپٹس تیار کرنا: فن اور سائنس
+### Creating a Reusable AI Function
 
-**ایک عظیم سسٹم پرامپٹ کی ساخت:**
-1. **کردار/شناخت**: AI کون ہے؟
-2. **مہارت**: وہ کیا جانتے ہیں؟
-3. **مواصلات کا انداز**: وہ کیسے بولتے ہیں؟
-4. **مخصوص ہدایات**: انہیں کس پر توجہ دینی چاہیے؟
+Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
 
-#### سسٹم پرامپٹس کے ساتھ سیاق و سباق میں مثالیں
+```python
+import asyncio
+from openai import AsyncOpenAI
 
-آئیے دیکھتے ہیں کہ مختلف سسٹم پرامپٹس مکمل طور پر مختلف AI شخصیات کیسے بناتے ہیں:
+# Use AsyncOpenAI for better performance
+client = AsyncOpenAI(
+    base_url="https://models.github.ai/inference",
+    api_key=os.environ["GITHUB_TOKEN"],
+)
 
-#### سسٹم پرامپٹس کو عمل میں دیکھنا
+async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
+    """
+    Sends a prompt to the AI model asynchronously and returns the response.
+    
+    Args:
+        prompt: The user's question or message
+        system_message: Instructions that define the AI's behavior and personality
+    
+    Returns:
+        str: The AI's response to the prompt
+    """
+    try:
+        response = await client.chat.completions.create(
+            messages=[
+                {
+                    "role": "system",
+                    "content": system_message,
+                },
+                {
+                    "role": "user",
+                    "content": prompt,
+                }
+            ],
+            model="openai/gpt-4o-mini",
+            temperature=1,
+            max_tokens=4096,
+            top_p=1
+        )
+        return response.choices[0].message.content
+    except Exception as e:
+        logger.error(f"AI API error: {str(e)}")
+        return "I'm sorry, I'm having trouble processing your request right now."
 
-آئیے ایک ہی سوال کو مختلف سسٹم پرامپٹس کے ساتھ آزمائیں تاکہ ڈرامائی فرق دیکھ سکیں:
+# Backward compatibility function for synchronous calls
+def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
+    """Synchronous wrapper for async AI calls."""
+    return asyncio.run(call_llm_async(prompt, system_message))
+```
+
+**اس بہتر فنکشن کو سمجھنا:**
+- **دو پیرامیٹرز قبول کرتا ہے**: صارف کا پرامپٹ اور ایک اختیاری سسٹم پیغام
+- **عام اسسٹنٹ رویے کے لیے ایک ڈیفالٹ سسٹم پیغام فراہم کرتا ہے**
+- **بہتر کوڈ دستاویزات کے لیے مناسب Python قسم کے اشارے استعمال کرتا ہے**
+- **فنکشن کے مقصد اور پیرامیٹرز کی وضاحت کرنے والا ایک تفصیلی ڈاکسٹرنگ شامل کرتا ہے**
+- **صرف جواب کا مواد واپس کرتا ہے**، اسے ہمارے ویب API میں استعمال کرنا آسان بناتا ہے
+- **ماڈل پیرامیٹرز کو مستقل AI رویے کے لیے برقرار رکھتا ہے**
+
+### سسٹم پرامپٹس کا جادو: AI شخصیت کو پروگرام کرنا
 
-**سوال**: "اپنی ویب ایپ میں صارف کی تصدیق کو کیسے سنبھالوں؟"
+اگر پیرامیٹرز AI کے سوچنے کے طریقے کو کنٹرول کرتے ہیں، تو سسٹم پرامپٹس کنٹرول کرتے ہیں کہ AI کون سمجھتا ہے کہ وہ ہے۔ یہ واقعی AI کے ساتھ کام کرنے کے سب سے دلچسپ حصوں میں سے ایک ہے – آپ بنیادی طور پر AI کو مکمل شخصیت، مہارت کی سطح، اور مواصلات کا انداز دے رہے ہیں۔
 
-#### سسٹم پرامپٹس کے لیے جدید تکنیکیں
+**سسٹم پرامپٹس کو مختلف کرداروں کے لیے مختلف اداکاروں کو کاسٹ کرنے جیسا سمجھیں**: ایک عام اسسٹنٹ رکھنے کے بجائے، آپ مختلف حالات کے لیے ماہرین تخلیق کر سکتے ہیں۔ ایک صبر کرنے والے استاد کی ضرورت ہے؟ ایک تخلیقی دماغی طوفان کا ساتھی؟ ایک سنجیدہ کاروباری مشیر؟ بس سسٹم پرامپٹ تبدیل کریں!
 
-**1. سیاق و سباق کی ترتیب**: AI کو پس منظر کی معلومات دیں  
+#### سسٹم پرامپٹس اتنے طاقتور کیوں ہیں؟
+
+یہاں دلچسپ حصہ ہے: AI ماڈلز کو بے شمار گفتگو پر تربیت دی گئی ہے جہاں لوگ مختلف کرداروں اور مہارت کی سطح کو اپناتے ہیں۔ جب آپ AI کو ایک مخصوص کردار دیتے ہیں، تو یہ ایک سوئچ کو پلٹنے جیسا ہے جو ان تمام سیکھے گئے پیٹرنز کو فعال کرتا ہے۔
+
+**یہ AI کے لیے طریقہ اداکاری کی طرح ہے**:
 **2. آؤٹ پٹ فارمیٹنگ**: AI کو بتائیں کہ جوابات کو کیسے ترتیب دینا ہے  
-**3. پابندی کی ترتیب**: وضاحت کریں کہ AI کو کیا نہیں کرنا چاہیے  
+```python
+system_prompt = """
+You are a technical mentor. Always structure your responses as:
+1. Quick Answer (1-2 sentences)
+2. Detailed Explanation 
+3. Code Example
+4. Common Pitfalls to Avoid
+5. Next Steps for Learning
+"""
+```
+  
+**3. پابندیاں مقرر کرنا**: وضاحت کریں کہ AI کو کیا نہیں کرنا چاہیے  
+```python
+system_prompt = """
+You are a coding tutor focused on teaching best practices. Never write complete 
+solutions for the user - instead, guide them with hints and questions so they 
+learn by doing. Always explain the 'why' behind coding decisions.
+"""
+```
+  
+
+#### آپ کے چیٹ اسسٹنٹ کے لیے یہ کیوں اہم ہے  
 
-#### آپ کے چیٹ اسسٹنٹ کے لیے اس کا مطلب کیوں ہے
+سسٹم پرامپٹس کو سمجھنا آپ کو خاص AI اسسٹنٹس بنانے کی زبردست طاقت دیتا ہے:  
+- **کسٹمر سروس بوٹ**: مددگار، صبر کرنے والا، پالیسی سے آگاہ  
+- **لرننگ ٹیوٹر**: حوصلہ افزا، مرحلہ وار، سمجھنے کی جانچ کرتا ہے  
+- **تخلیقی ساتھی**: تخیلاتی، خیالات پر کام کرتا ہے، "کیا ہوگا اگر؟" پوچھتا ہے  
+- **تکنیکی ماہر**: درست، تفصیلی، سیکیورٹی سے آگاہ  
 
-سسٹم پرامپٹس کو سمجھنا آپ کو خصوصی AI اسسٹنٹس بنانے کی ناقابل یقین طاقت دیتا ہے:
-- **کسٹمر سروس بوٹ**: مددگار، صبر کرنے والا، پالیسی سے آگاہ
-- **سیکھنے کا استاد**: حوصلہ افزا، قدم بہ قدم، سمجھنے کی جانچ کرتا ہے
-- **تخلیقی ساتھی**: تخیلاتی، خیالات پر تعمیر کرتا ہے، "کیا ہوگا اگر؟" پوچھتا ہے
-- **تکنیکی ماہر**: درست، تفصیلی، سیکیورٹی سے آگاہ
+**اہم بصیرت**: آپ صرف AI API کو کال نہیں کر رہے – آپ ایک حسب ضرورت AI شخصیت بنا رہے ہیں جو آپ کے مخصوص استعمال کے لیے کام کرتی ہے۔ یہی چیز جدید AI ایپلیکیشنز کو عام کے بجائے خاص اور مفید بناتی ہے۔  
 
-**اہم بصیرت**: آپ صرف AI API کو کال نہیں کر رہے ہیں – آپ ایک حسب ضرورت AI شخصیت بنا رہے ہیں جو آپ کے مخصوص استعمال کے معاملے کی خدمت کرتی ہے۔ یہی وہ چیز ہے جو جدید AI ایپلیکیشنز کو عام کے بجائے مخصوص اور مفید محسوس کرتی ہے۔
+### 🎯 تعلیمی جائزہ: AI شخصیت پروگرامنگ  
 
-## FastAPI کے ساتھ ویب API بنانا: آپ کا اعلیٰ کارکردگی AI مواصلاتی مرکز
+**رکیں اور غور کریں**: آپ نے ابھی سسٹم پرامپٹس کے ذریعے AI شخصیات کو پروگرام کرنا سیکھا ہے۔ یہ جدید AI ایپلیکیشن ڈیولپمنٹ میں ایک بنیادی مہارت ہے۔  
 
-اب آئیے بیک اینڈ بنائیں جو آپ کے فرنٹ اینڈ کو AI سروسز سے جوڑتا ہے۔ ہم FastAPI کا استعمال کریں گے، ایک جدید Python فریم ورک جو AI ایپلیکیشنز کے لیے APIs بنانے میں بہترین ہے۔
+**جلدی خود تشخیص**:  
+- کیا آپ وضاحت کر سکتے ہیں کہ سسٹم پرامپٹس عام صارف پیغامات سے کیسے مختلف ہیں؟  
+- temperature اور top_p پیرامیٹرز میں کیا فرق ہے؟  
+- آپ کسی خاص استعمال کے لیے (جیسے کوڈنگ ٹیوٹر) سسٹم پرامپٹ کیسے بنائیں گے؟  
 
-FastAPI اس قسم کے پروجیکٹ کے لیے کئی فوائد پیش کرتا ہے: ہم وقتی درخواستوں کو سنبھالنے کے لیے بلٹ ان async سپورٹ، خودکار API دستاویزات کی نسل، اور بہترین کارکردگی۔ آپ کا FastAPI سرور ایک ثالث کے طور پر کام کرتا ہے جو فرنٹ اینڈ سے درخواستیں وصول کرتا ہے، AI سروسز کے ساتھ بات چیت کرتا ہے، اور فارمیٹ شدہ جوابات واپس کرتا ہے
-**یہی وجہ ہے کہ FastAPI ہمارے پروجیکٹ کے لیے بہترین ہے:**
-- **پہلے سے Async**: ایک ساتھ کئی AI درخواستوں کو سنبھال سکتا ہے بغیر رکاوٹ کے
-- **خودکار دستاویزات**: `/docs` پر جائیں اور خوبصورت، انٹرایکٹو API دستاویزات کا صفحہ مفت میں حاصل کریں
-- **بلٹ ان تصدیق**: غلطیوں کو مسئلہ بننے سے پہلے پکڑ لیتا ہے
-- **بہت تیز**: Python کے سب سے تیز فریم ورک میں سے ایک
-- **جدید Python**: Python کی تمام جدید اور بہترین خصوصیات استعمال کرتا ہے
+**حقیقی دنیا کا تعلق**: سسٹم پرامپٹ تکنیکیں جو آپ نے سیکھی ہیں ہر بڑی AI ایپلیکیشن میں استعمال ہوتی ہیں - GitHub Copilot کی کوڈنگ مدد سے لے کر ChatGPT کی گفتگو انٹرفیس تک۔ آپ وہی پیٹرنز سیکھ رہے ہیں جو بڑے ٹیک کمپنیوں کی AI پروڈکٹ ٹیمیں استعمال کرتی ہیں۔  
 
-**اور یہ ہے کہ ہمیں بیک اینڈ کی ضرورت کیوں ہے:**
+**چیلنج سوال**: آپ مختلف صارف اقسام (ابتدائی بمقابلہ ماہر) کے لیے مختلف AI شخصیات کیسے ڈیزائن کریں گے؟ غور کریں کہ ایک ہی بنیادی AI ماڈل پرامپٹ انجینئرنگ کے ذریعے مختلف سامعین کی خدمت کیسے کر سکتا ہے۔  
 
-**سیکیورٹی**: آپ کی AI API کی کلید ایک پاس ورڈ کی طرح ہے – اگر آپ اسے فرنٹ اینڈ جاوا اسکرپٹ میں ڈالیں تو کوئی بھی جو آپ کی ویب سائٹ کے سورس کوڈ کو دیکھے گا اسے چرا سکتا ہے اور آپ کے AI کریڈٹس استعمال کر سکتا ہے۔ بیک اینڈ حساس اسناد کو محفوظ رکھتا ہے۔
+## FastAPI کے ساتھ ویب API بنانا: آپ کا اعلیٰ کارکردگی AI مواصلاتی مرکز  
 
-**ریٹ لمیٹنگ اور کنٹرول**: بیک اینڈ آپ کو کنٹرول کرنے دیتا ہے کہ صارفین کتنی بار درخواستیں کر سکتے ہیں، صارف کی تصدیق کو نافذ کر سکتے ہیں، اور استعمال کو ٹریک کرنے کے لیے لاگنگ شامل کر سکتے ہیں۔
+اب ہم وہ بیک اینڈ بنائیں گے جو آپ کے فرنٹ اینڈ کو AI سروسز سے جوڑتا ہے۔ ہم FastAPI استعمال کریں گے، ایک جدید Python فریم ورک جو AI ایپلیکیشنز کے لیے APIs بنانے میں بہترین ہے۔  
 
-**ڈیٹا پروسیسنگ**: آپ گفتگو کو محفوظ کرنا، نامناسب مواد کو فلٹر کرنا، یا متعدد AI سروسز کو یکجا کرنا چاہ سکتے ہیں۔ بیک اینڈ وہ جگہ ہے جہاں یہ منطق موجود ہے۔
+FastAPI اس قسم کے پروجیکٹ کے لیے کئی فوائد پیش کرتا ہے: ہم وقتی درخواستوں کو سنبھالنے کے لیے بلٹ ان async سپورٹ، خودکار API دستاویزات کی تخلیق، اور بہترین کارکردگی۔ آپ کا FastAPI سرور ایک درمیانی کردار ادا کرتا ہے جو فرنٹ اینڈ سے درخواستیں وصول کرتا ہے، AI سروسز سے بات چیت کرتا ہے، اور فارمیٹ شدہ جوابات واپس کرتا ہے۔  
 
-**آرکیٹیکچر کلائنٹ-سرور ماڈل جیسا ہے:**
-- **فرنٹ اینڈ**: صارف کے تعامل کے لیے انٹرفیس کی تہہ
-- **بیک اینڈ API**: درخواست پروسیسنگ اور روٹنگ کی تہہ
-- **AI سروس**: بیرونی حساب کتاب اور جواب کی تخلیق
-- **ماحولیاتی متغیرات**: محفوظ ترتیب اور اسناد کا ذخیرہ
+### AI ایپلیکیشنز کے لیے FastAPI کیوں؟  
 
-### درخواست-جواب کے بہاؤ کو سمجھنا
+آپ سوچ سکتے ہیں: "کیا میں AI کو براہ راست اپنے فرنٹ اینڈ جاوا اسکرپٹ سے کال نہیں کر سکتا؟" یا "Flask یا Django کے بجائے FastAPI کیوں؟" زبردست سوالات!  
 
-آئیے دیکھتے ہیں کہ جب کوئی صارف پیغام بھیجتا ہے تو کیا ہوتا ہے:
+**یہاں وجہ ہے کہ FastAPI ہمارے منصوبے کے لیے بہترین ہے:**  
+- **ڈیفالٹ async**: ایک ساتھ کئی AI درخواستوں کو سنبھال سکتا ہے بغیر پھنسے  
+- **خودکار دستاویزات**: `/docs` پر جائیں اور مفت میں ایک خوبصورت، انٹرایکٹو API دستاویزات کا صفحہ حاصل کریں  
+- **بلٹ ان توثیق**: مسائل پیدا ہونے سے پہلے غلطیوں کو پکڑتا ہے  
+- **بہت تیز**: Python کے سب سے تیز فریم ورک میں سے ایک  
+- **جدید Python**: Python کی تمام جدید خصوصیات استعمال کرتا ہے  
+
+**اور یہاں وجہ ہے کہ ہمیں بیک اینڈ کی ضرورت ہے:**  
+
+**سیکیورٹی**: آپ کی AI API کلید ایک پاس ورڈ کی طرح ہے – اگر آپ اسے فرنٹ اینڈ جاوا اسکرپٹ میں ڈالیں، تو کوئی بھی جو آپ کی ویب سائٹ کے سورس کوڈ کو دیکھے گا اسے چرا سکتا ہے اور آپ کے AI کریڈٹس استعمال کر سکتا ہے۔ بیک اینڈ حساس اسناد کو محفوظ رکھتا ہے۔  
+
+**ریٹ لمیٹنگ اور کنٹرول**: بیک اینڈ آپ کو کنٹرول کرنے دیتا ہے کہ صارفین کتنی بار درخواستیں کر سکتے ہیں، صارف کی توثیق نافذ کر سکتے ہیں، اور استعمال کو ٹریک کرنے کے لیے لاگنگ شامل کر سکتے ہیں۔  
+
+**ڈیٹا پروسیسنگ**: آپ گفتگو کو محفوظ کرنا، نامناسب مواد کو فلٹر کرنا، یا متعدد AI سروسز کو یکجا کرنا چاہ سکتے ہیں۔ بیک اینڈ وہ جگہ ہے جہاں یہ منطق رہتی ہے۔  
+
+**آرکیٹیکچر کلائنٹ-سرور ماڈل جیسا ہے:**  
+- **فرنٹ اینڈ**: تعامل کے لیے صارف انٹرفیس کی پرت  
+- **بیک اینڈ API**: درخواست پروسیسنگ اور روٹنگ کی پرت  
+- **AI سروس**: بیرونی حساب کتاب اور جواب کی تخلیق  
+- **ماحولیاتی متغیرات**: محفوظ ترتیب اور اسناد کا ذخیرہ  
+
+### درخواست-جواب کے بہاؤ کو سمجھنا  
+
+آئیے دیکھتے ہیں کہ جب کوئی صارف پیغام بھیجتا ہے تو کیا ہوتا ہے:  
 
 ```mermaid
 sequenceDiagram
@@ -231,16 +571,16 @@ sequenceDiagram
     API->>Frontend: {"response": "Hello! How can I help?"}
     Frontend->>User: Displays AI message
 ```
+  
+**ہر قدم کو سمجھنا:**  
+1. **صارف کا تعامل**: شخص چیٹ انٹرفیس میں ٹائپ کرتا ہے  
+2. **فرنٹ اینڈ پروسیسنگ**: جاوا اسکرپٹ ان پٹ کو کیپچر کرتا ہے اور اسے JSON کے طور پر فارمیٹ کرتا ہے  
+3. **API توثیق**: FastAPI درخواست کو خودکار طور پر Pydantic ماڈلز کا استعمال کرتے ہوئے توثیق کرتا ہے  
+4. **AI انضمام**: بیک اینڈ سیاق و سباق (سسٹم پرامپٹ) شامل کرتا ہے اور AI سروس کو کال کرتا ہے  
+5. **جواب کی ہینڈلنگ**: API AI جواب وصول کرتا ہے اور اگر ضرورت ہو تو اسے تبدیل کر سکتا ہے  
+6. **فرنٹ اینڈ ڈسپلے**: جاوا اسکرپٹ جواب کو چیٹ انٹرفیس میں دکھاتا ہے  
 
-**ہر قدم کو سمجھنا:**
-1. **صارف کا تعامل**: شخص چیٹ انٹرفیس میں ٹائپ کرتا ہے
-2. **فرنٹ اینڈ پروسیسنگ**: جاوا اسکرپٹ ان پٹ کو پکڑتا ہے اور اسے JSON کے طور پر فارمیٹ کرتا ہے
-3. **API کی تصدیق**: FastAPI درخواست کو خودکار طور پر Pydantic ماڈلز کے ذریعے تصدیق کرتا ہے
-4. **AI انضمام**: بیک اینڈ سیاق و سباق (سسٹم پرامپٹ) شامل کرتا ہے اور AI سروس کو کال کرتا ہے
-5. **جواب کی ہینڈلنگ**: API AI کا جواب وصول کرتا ہے اور ضرورت پڑنے پر اسے تبدیل کر سکتا ہے
-6. **فرنٹ اینڈ ڈسپلے**: جاوا اسکرپٹ چیٹ انٹرفیس میں جواب دکھاتا ہے
-
-### API آرکیٹیکچر کو سمجھنا
+### API آرکیٹیکچر کو سمجھنا  
 
 ```mermaid
 sequenceDiagram
@@ -256,10 +596,34 @@ sequenceDiagram
     AI Function->>FastAPI: response text
     FastAPI->>Frontend: {"response": "Hello! How can I help?"}
 ```
+  
+```mermaid
+flowchart TD
+    A[User Input] --> B[Frontend Validation]
+    B --> C[HTTP POST Request]
+    C --> D[FastAPI Router]
+    D --> E[Pydantic Validation]
+    E --> F[AI Function Call]
+    F --> G[GitHub Models API]
+    G --> H[Response Processing]
+    H --> I[JSON Response]
+    I --> J[Frontend Update]
+    
+    subgraph "Security Layer"
+        K[CORS Middleware]
+        L[Environment Variables]
+        M[Error Handling]
+    end
+    
+    D --> K
+    F --> L
+    H --> M
+```
+  
 
-### FastAPI ایپلیکیشن بنانا
+### FastAPI ایپلیکیشن بنانا  
 
-آئیے اپنی API کو مرحلہ وار بناتے ہیں۔ `api.py` نامی فائل بنائیں اور درج ذیل FastAPI کوڈ شامل کریں:
+آئیے اپنی API مرحلہ وار بنائیں۔ `api.py` نامی فائل بنائیں اور درج ذیل FastAPI کوڈ شامل کریں:  
 
 ```python
 # api.py
@@ -337,43 +701,43 @@ if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
 ```
+  
+**FastAPI کے نفاذ کو سمجھنا:**  
+- **درآمد کرتا ہے** FastAPI جدید ویب فریم ورک کی فعالیت کے لیے اور Pydantic ڈیٹا کی توثیق کے لیے  
+- **خودکار API دستاویزات تخلیق کرتا ہے** (جب سرور چلتا ہے تو `/docs` پر دستیاب ہوتا ہے)  
+- **CORS مڈل ویئر کو فعال کرتا ہے** تاکہ مختلف اصل سے فرنٹ اینڈ درخواستوں کی اجازت دی جا سکے  
+- **Pydantic ماڈلز کی وضاحت کرتا ہے** خودکار درخواست/جواب کی توثیق اور دستاویزات کے لیے  
+- **بہتر کارکردگی کے لیے async اینڈ پوائنٹس استعمال کرتا ہے**  
+- **مناسب HTTP اسٹیٹس کوڈز اور غلطی ہینڈلنگ نافذ کرتا ہے** HTTPException کے ساتھ  
+- **ساختی لاگنگ شامل کرتا ہے** نگرانی اور ڈیبگنگ کے لیے  
+- **سروس کی حیثیت کی نگرانی کے لیے ہیلتھ چیک اینڈ پوائنٹ فراہم کرتا ہے**  
 
-**FastAPI کے نفاذ کو سمجھنا:**
-- **درآمد کرتا ہے** FastAPI جدید ویب فریم ورک کی فعالیت کے لیے اور Pydantic ڈیٹا کی تصدیق کے لیے
-- **خودکار API دستاویزات بناتا ہے** (جب سرور چلتا ہے تو `/docs` پر دستیاب)
-- **CORS مڈل ویئر کو فعال کرتا ہے** تاکہ مختلف اصل سے فرنٹ اینڈ درخواستوں کی اجازت دی جا سکے
-- **Pydantic ماڈلز کی وضاحت کرتا ہے** خودکار درخواست/جواب کی تصدیق اور دستاویزات کے لیے
-- **async اینڈ پوائنٹس استعمال کرتا ہے** تاکہ ہم وقتی درخواستوں کے ساتھ بہتر کارکردگی حاصل ہو
-- **مناسب HTTP اسٹیٹس کوڈز اور غلطی ہینڈلنگ نافذ کرتا ہے** HTTPException کے ساتھ
-- **ساختی لاگنگ شامل کرتا ہے** نگرانی اور ڈیبگنگ کے لیے
-- **صحت کی جانچ کا اینڈ پوائنٹ فراہم کرتا ہے** سروس کی حیثیت کی نگرانی کے لیے
+**روایتی فریم ورک کے مقابلے میں FastAPI کے اہم فوائد:**  
+- **خودکار توثیق**: Pydantic ماڈلز ڈیٹا کی سالمیت کو پروسیسنگ سے پہلے یقینی بناتے ہیں  
+- **انٹرایکٹو دستاویزات**: `/docs` پر جائیں خودکار طور پر تیار کردہ، قابل آزمائش API دستاویزات کے لیے  
+- **ٹائپ سیفٹی**: Python ٹائپ ہنٹس رن ٹائم کی غلطیوں کو روکتے ہیں اور کوڈ کے معیار کو بہتر بناتے ہیں  
+- **async سپورٹ**: ایک ساتھ متعدد AI درخواستوں کو بلاک کیے بغیر سنبھالتا ہے  
+- **کارکردگی**: حقیقی وقت کی ایپلیکیشنز کے لیے درخواست پروسیسنگ نمایاں طور پر تیز  
 
-**روایتی فریم ورک کے مقابلے میں FastAPI کے اہم فوائد:**
-- **خودکار تصدیق**: Pydantic ماڈلز ڈیٹا کی سالمیت کو پروسیسنگ سے پہلے یقینی بناتے ہیں
-- **انٹرایکٹو دستاویزات**: `/docs` پر جائیں خودکار، قابل آزمائش API دستاویزات کے لیے
-- **ٹائپ سیفٹی**: Python ٹائپ ہنٹس رن ٹائم غلطیوں کو روکتے ہیں اور کوڈ کے معیار کو بہتر بناتے ہیں
-- **async سپورٹ**: ایک ساتھ کئی AI درخواستوں کو بلاک کیے بغیر سنبھالتا ہے
-- **کارکردگی**: حقیقی وقت کی ایپلیکیشنز کے لیے درخواست پروسیسنگ نمایاں طور پر تیز
+### CORS کو سمجھنا: ویب کا سیکیورٹی گارڈ  
 
-### CORS: ویب کا سیکیورٹی گارڈ سمجھنا
+CORS (Cross-Origin Resource Sharing) ایک سیکیورٹی گارڈ کی طرح ہے جو چیک کرتا ہے کہ آیا زائرین کو داخل ہونے کی اجازت ہے۔ آئیے سمجھتے ہیں کہ یہ کیوں اہم ہے اور یہ آپ کی ایپلیکیشن کو کیسے متاثر کرتا ہے۔  
 
-CORS (Cross-Origin Resource Sharing) ایک سیکیورٹی گارڈ کی طرح ہے جو چیک کرتا ہے کہ آیا زائرین کو عمارت میں داخل ہونے کی اجازت ہے۔ آئیے سمجھتے ہیں کہ یہ کیوں اہم ہے اور آپ کی ایپلیکیشن پر کیسے اثر ڈالتا ہے۔
+#### CORS کیا ہے اور یہ کیوں موجود ہے؟  
 
-#### CORS کیا ہے اور یہ کیوں موجود ہے؟
+**مسئلہ**: تصور کریں کہ اگر کوئی بھی ویب سائٹ آپ کی اجازت کے بغیر آپ کے بینک کی ویب سائٹ پر درخواستیں کر سکتی۔ یہ ایک سیکیورٹی ڈراؤنا خواب ہوگا! براؤزرز اسے "Same-Origin Policy" کے ذریعے ڈیفالٹ سے روکتے ہیں۔  
 
-**مسئلہ**: تصور کریں کہ اگر کوئی بھی ویب سائٹ آپ کی اجازت کے بغیر آپ کے بینک کی ویب سائٹ پر آپ کی طرف سے درخواستیں کر سکتی۔ یہ ایک سیکیورٹی ڈراؤنا خواب ہوگا! براؤزرز اسے "Same-Origin Policy" کے ذریعے ڈیفالٹ میں روکتے ہیں۔
+**Same-Origin Policy**: براؤزرز صرف ویب صفحات کو اسی ڈومین، پورٹ، اور پروٹوکول سے درخواستیں کرنے کی اجازت دیتے ہیں جس سے وہ لوڈ کیے گئے تھے۔  
 
-**Same-Origin Policy**: براؤزرز صرف ان ویب صفحات کو اجازت دیتے ہیں جو اسی ڈومین، پورٹ، اور پروٹوکول سے درخواستیں کریں جہاں سے وہ لوڈ ہوئے ہیں۔
+**حقیقی دنیا کی مثال**: یہ اپارٹمنٹ بلڈنگ کی سیکیورٹی کی طرح ہے – صرف رہائشی (ایک ہی اصل) کو ڈیفالٹ سے عمارت تک رسائی حاصل ہے۔ اگر آپ کسی دوست (مختلف اصل) کو مدعو کرنا چاہتے ہیں، تو آپ کو سیکیورٹی کو واضح طور پر بتانا ہوگا کہ یہ ٹھیک ہے۔  
 
-**حقیقی دنیا کی مثال**: یہ اپارٹمنٹ بلڈنگ کی سیکیورٹی کی طرح ہے – صرف رہائشی (ایک ہی اصل) کو ڈیفالٹ میں عمارت تک رسائی حاصل ہے۔ اگر آپ کسی دوست (مختلف اصل) کو مدعو کرنا چاہتے ہیں تو آپ کو سیکیورٹی کو واضح طور پر بتانا ہوگا کہ یہ ٹھیک ہے۔
+#### آپ کے ترقیاتی ماحول میں CORS  
 
-#### آپ کے ترقیاتی ماحول میں CORS
+ترقی کے دوران، آپ کا فرنٹ اینڈ اور بیک اینڈ مختلف پورٹس پر چلتا ہے:  
+- فرنٹ اینڈ: `http://localhost:3000` (یا file:// اگر HTML کو براہ راست کھول رہے ہیں)  
+- بیک اینڈ: `http://localhost:5000`  
 
-ترقی کے دوران، آپ کا فرنٹ اینڈ اور بیک اینڈ مختلف پورٹس پر چلتا ہے:
-- فرنٹ اینڈ: `http://localhost:3000` (یا file:// اگر HTML کو براہ راست کھول رہے ہیں)
-- بیک اینڈ: `http://localhost:5000`
-
-یہ "مختلف اصل" سمجھے جاتے ہیں حالانکہ وہ ایک ہی کمپیوٹر پر ہیں!
+یہ "مختلف اصل" سمجھے جاتے ہیں حالانکہ وہ ایک ہی کمپیوٹر پر ہیں!  
 
 ```python
 from fastapi.middleware.cors import CORSMiddleware
@@ -381,13 +745,13 @@ from fastapi.middleware.cors import CORSMiddleware
 app = FastAPI(__name__)
 CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"
 ```
+  
+**عملی طور پر CORS کنفیگریشن کیا کرتا ہے:**  
+- **خاص HTTP ہیڈرز شامل کرتا ہے** API جوابات میں جو براؤزرز کو بتاتے ہیں "یہ کراس-اورجن درخواست کی اجازت ہے"  
+- **"پری فلائٹ" درخواستوں کو ہینڈل کرتا ہے** (براؤزرز کبھی کبھار اصل درخواست بھیجنے سے پہلے اجازت چیک کرتے ہیں)  
+- **براؤزر کنسول میں "CORS پالیسی کے ذریعے بلاک کیا گیا" کی خرابی کو روکتا ہے**  
 
-**عملی طور پر CORS کنفیگریشن کیا کرتا ہے:**
-- **API جوابات میں خاص HTTP ہیڈرز شامل کرتا ہے** جو براؤزرز کو بتاتے ہیں "یہ کراس-اورجن درخواست کی اجازت ہے"
-- **"پری فلائٹ" درخواستوں کو ہینڈل کرتا ہے** (براؤزرز کبھی کبھار اصل درخواست بھیجنے سے پہلے اجازت چیک کرتے ہیں)
-- **براؤزر کنسول میں "CORS پالیسی کے ذریعے بلاک کیا گیا" کی خرابی کو روکتا ہے**
-
-#### CORS سیکیورٹی: ترقی بمقابلہ پیداوار
+#### CORS سیکیورٹی: ترقی بمقابلہ پروڈکشن  
 
 ```python
 # 🚨 Development: Allows ALL origins (convenient but insecure)
@@ -402,43 +766,43 @@ if app.debug:  # Development mode
 else:  # Production mode
     CORS(app, origins=["https://yourdomain.com"])
 ```
+  
+**یہ کیوں اہم ہے**: ترقی میں، `CORS(app)` آپ کے سامنے کا دروازہ کھلا چھوڑنے جیسا ہے – آسان لیکن غیر محفوظ۔ پروڈکشن میں، آپ بالکل وضاحت کرنا چاہتے ہیں کہ کون سی ویب سائٹس آپ کی API سے بات کر سکتی ہیں۔  
 
-**یہ کیوں اہم ہے**: ترقی میں، `CORS(app)` آپ کے سامنے کا دروازہ کھلا چھوڑنے کی طرح ہے – آسان لیکن محفوظ نہیں۔ پیداوار میں، آپ بالکل بتانا چاہتے ہیں کہ کون سی ویب سائٹس آپ کے API سے بات کر سکتی ہیں۔
+#### عام CORS منظرنامے اور حل  
 
-#### عام CORS منظرنامے اور حل
+| منظرنامہ | مسئلہ | حل |  
+|----------|---------|----------|  
+| **مقامی ترقی** | فرنٹ اینڈ بیک اینڈ تک نہیں پہنچ سکتا | FastAPI میں CORSMiddleware شامل کریں |  
+| **GitHub Pages + Heroku** | تعینات فرنٹ اینڈ API تک نہیں پہنچ سکتا | اپنے GitHub Pages URL کو CORS اصل میں شامل کریں |  
+| **حسب ضرورت ڈومین** | پروڈکشن میں CORS کی غلطیاں | CORS اصل کو اپنے ڈومین سے ملانے کے لیے اپ ڈیٹ کریں |  
+| **موبائل ایپ** | ایپ ویب API تک نہیں پہنچ سکتی | اپنی ایپ کے ڈومین کو شامل کریں یا احتیاط سے `*` استعمال کریں |  
 
-| منظرنامہ | مسئلہ | حل |
-|----------|---------|----------|
-| **مقامی ترقی** | فرنٹ اینڈ بیک اینڈ تک نہیں پہنچ سکتا | FastAPI میں CORSMiddleware شامل کریں |
-| **GitHub Pages + Heroku** | تعینات فرنٹ اینڈ API تک نہیں پہنچ سکتا | اپنے GitHub Pages URL کو CORS اصل میں شامل کریں |
-| **حسب ضرورت ڈومین** | پیداوار میں CORS کی غلطیاں | CORS اصل کو اپنے ڈومین سے ملانے کے لیے اپ ڈیٹ کریں |
-| **موبائل ایپ** | ایپ ویب API تک نہیں پہنچ سکتی | اپنی ایپ کے ڈومین کو شامل کریں یا `*` کو احتیاط سے استعمال کریں |
+**پرو ٹپ**: آپ اپنے براؤزر کے Developer Tools میں نیٹ ورک ٹیب کے تحت CORS ہیڈرز چیک کر سکتے ہیں۔ جواب میں `Access-Control-Allow-Origin` جیسے ہیڈرز تلاش کریں۔  
 
-**پرو ٹپ**: آپ اپنے براؤزر کے Developer Tools میں نیٹ ورک ٹیب کے تحت CORS ہیڈرز چیک کر سکتے ہیں۔ جواب میں `Access-Control-Allow-Origin` جیسے ہیڈرز تلاش کریں۔
+### غلطی ہینڈلنگ اور توثیق  
 
-### غلطی ہینڈلنگ اور تصدیق
-
-نوٹ کریں کہ ہماری API میں مناسب غلطی ہینڈلنگ شامل ہے:
+نوٹ کریں کہ ہماری API میں مناسب غلطی ہینڈلنگ شامل ہے:  
 
 ```python
 # Validate that we received a message
 if not message:
     return jsonify({"error": "Message field is required"}), 400
 ```
+  
+**اہم توثیق کے اصول:**  
+- **ضروری فیلڈز کی جانچ کرتا ہے** درخواستوں کو پروسیس کرنے سے پہلے  
+- **معنی خیز غلطی کے پیغامات واپس کرتا ہے** JSON فارمیٹ میں  
+- **مناسب HTTP اسٹیٹس کوڈز استعمال کرتا ہے** (خراب درخواستوں کے لیے 400)  
+- **واضح فیڈبیک فراہم کرتا ہے** فرنٹ اینڈ ڈیولپرز کو مسائل کو ڈیبگ کرنے میں مدد کرنے کے لیے  
 
-**کلیدی تصدیقی اصول:**
-- **ضروری فیلڈز کی جانچ کرتا ہے** درخواستوں کو پروسیس کرنے سے پہلے
-- **معنی خیز غلطی کے پیغامات واپس کرتا ہے** JSON فارمیٹ میں
-- **مناسب HTTP اسٹیٹس کوڈز استعمال کرتا ہے** (خراب درخواستوں کے لیے 400)
-- **واضح فیڈبیک فراہم کرتا ہے** فرنٹ اینڈ ڈویلپرز کو مسائل کو ڈیبگ کرنے میں مدد کے لیے
-
-## اپنا بیک اینڈ سیٹ اپ اور چلانا
+## اپنا بیک اینڈ سیٹ اپ اور چلانا  
 
-اب جب کہ ہمارے پاس AI انضمام اور FastAPI سرور تیار ہے، آئیے سب کچھ چلائیں۔ سیٹ اپ کے عمل میں Python کی dependencies انسٹال کرنا، ماحولیاتی متغیرات کو ترتیب دینا، اور اپنا ترقیاتی سرور شروع کرنا شامل ہے۔
+اب جب کہ ہمارے پاس AI انضمام اور FastAPI سرور تیار ہے، آئیے سب کچھ چلائیں۔ سیٹ اپ کے عمل میں Python کی ضروریات انسٹال کرنا، ماحولیاتی متغیرات کو ترتیب دینا، اور اپنا ترقیاتی سرور شروع کرنا شامل ہے۔  
 
-### Python ماحول کی ترتیب
+### Python ماحول سیٹ اپ  
 
-آئیے آپ کے Python ترقیاتی ماحول کو ترتیب دیتے ہیں۔ ورچوئل ماحول Manhattan Project کے compartmentalized approach کی طرح ہیں – ہر پروجیکٹ کو اپنے مخصوص ٹولز اور dependencies کے ساتھ اپنا الگ تھلگ جگہ ملتا ہے، مختلف پروجیکٹس کے درمیان تنازعات کو روکنے کے لیے۔
+آئیے آپ کا Python ترقیاتی ماحول سیٹ کریں۔ ورچوئل ماحول مین ہٹن پروجیکٹ کے کمپارٹمنٹلائزڈ اپروچ کی طرح ہیں – ہر پروجیکٹ کو اپنے مخصوص ٹولز اور ضروریات کے ساتھ اپنا الگ تھلگ جگہ ملتا ہے، مختلف پروجیکٹس کے درمیان تنازعات کو روکنے کے لیے۔  
 
 ```bash
 # Navigate to your backend directory
@@ -456,31 +820,31 @@ source ./venv/bin/activate
 # Install the good stuff
 pip install openai fastapi uvicorn python-dotenv
 ```
+  
+**ہم نے ابھی کیا کیا:**  
+- **اپنا Python کا چھوٹا سا بلبلہ بنایا** جہاں ہم پیکجز انسٹال کر سکتے ہیں بغیر کسی اور چیز کو متاثر کیے  
+- **اسے فعال کیا** تاکہ ہمارا ٹرمینل جان سکے کہ اس مخصوص ماحول کو استعمال کرنا ہے  
+- **ضروریات انسٹال کیں**: OpenAI AI جادو کے لیے، FastAPI ہمارے ویب API کے لیے، Uvicorn اسے چلانے کے لیے، اور python-dotenv محفوظ رازوں کے انتظام کے لیے  
 
-**ہم نے ابھی کیا کیا:**
-- **اپنا Python کا چھوٹا سا بلبلہ بنایا** جہاں ہم پیکجز انسٹال کر سکتے ہیں بغیر کسی اور چیز کو متاثر کیے
-- **اسے فعال کیا** تاکہ ہمارا ٹرمینل جان سکے کہ اس مخصوص ماحول کو استعمال کرنا ہے
-- **ضروریات انسٹال کیں**: OpenAI AI جادو کے لیے، FastAPI ہمارے ویب API کے لیے، Uvicorn اسے چلانے کے لیے، اور python-dotenv محفوظ رازوں کے انتظام کے لیے
+**اہم ضروریات کی وضاحت:**  
+- **FastAPI**: جدید، تیز ویب فریم ورک خودکار API دستاویزات کے ساتھ  
+- **Uvicorn**: تیز ترین ASGI سرور جو FastAPI ایپلیکیشنز چلاتا ہے  
+- **OpenAI**: GitHub ماڈلز اور OpenAI API انضمام کے لیے آفیشل لائبریری  
+- **python-dotenv**: .env فائلوں سے محفوظ ماحولیاتی متغیرات لوڈ کرنا  
 
-**کلیدی dependencies کی وضاحت:**
-- **FastAPI**: جدید، تیز ویب فریم ورک خودکار API دستاویزات کے ساتھ
-- **Uvicorn**: تیز رفتار ASGI سرور جو FastAPI ایپلیکیشنز کو چلاتا ہے
-- **OpenAI**: GitHub Models اور OpenAI API انضمام کے لیے آفیشل لائبریری
-- **python-dotenv**: .env فائلوں سے محفوظ ماحولیاتی متغیرات لوڈ کرنا
+### ماحولیاتی ترتیب: رازوں کو محفوظ رکھنا  
 
-### ماحولیاتی ترتیب: رازوں کو محفوظ رکھنا
+اس سے پہلے کہ ہم اپنی API شروع کریں، ہمیں ویب ڈیولپمنٹ میں سب سے اہم سبق کے بارے میں بات کرنی ہوگی: اپنے رازوں کو واقعی خفیہ رکھنے کا طریقہ۔ ماحولیاتی متغیرات ایک محفوظ والٹ کی طرح ہیں جسے صرف آپ کی ایپلیکیشن تک رسائی حاصل ہے۔  
 
-API شروع کرنے سے پہلے، ہمیں ویب ڈویلپمنٹ کے سب سے اہم سبق کے بارے میں بات کرنی ہوگی: اپنے رازوں کو واقعی خفیہ رکھنے کا طریقہ۔ ماحولیاتی متغیرات ایک محفوظ والٹ کی طرح ہیں جس تک صرف آپ کی ایپلیکیشن رسائی حاصل کر سکتی ہے۔
+#### ماحولیاتی متغیرات کیا ہیں؟  
 
-#### ماحولیاتی متغیرات کیا ہیں؟
+**ماحولیاتی متغیرات کو ایک محفوظ ڈپازٹ باکس کی طرح سمجھیں** – آپ اپنی قیمتی چیزیں وہاں رکھتے ہیں، اور صرف آپ (اور آپ کی ایپ) کے پاس اسے نکالنے کی چابی ہوتی ہے۔ حساس معلومات کو براہ راست اپنے کوڈ میں لکھنے کے بجائے (جہاں کوئی بھی اسے دیکھ سکتا ہے)، آپ اسے محفوظ طریقے سے ماحول میں ذخیرہ کرتے ہیں۔  
 
-**ماحولیاتی متغیرات کو ایک محفوظ ڈپازٹ باکس کی طرح سمجھیں** – آپ اپنی قیمتی چیزیں وہاں رکھتے ہیں، اور صرف آپ (اور آپ کی ایپ) کے پاس اسے حاصل کرنے کی چابی ہوتی ہے۔ حساس معلومات کو براہ راست اپنے کوڈ میں لکھنے کے بجائے (جہاں کوئی بھی اسے دیکھ سکتا ہے)، آپ اسے محفوظ طریقے سے ماحول میں ذخیرہ کرتے ہیں۔
+**یہاں فرق ہے:**  
+- **غلط طریقہ**: اپنا پاس ورڈ ایک چپچپا نوٹ پر لکھ کر اپنے مانیٹر پر رکھنا  
+- **صحیح طریقہ**: اپنا پاس ورڈ ایک محفوظ پاس ورڈ مینیجر میں رکھنا جس تک صرف آپ کو رسائی حاصل ہو  
 
-**یہاں فرق ہے:**
-- **غلط طریقہ**: اپنا پاس ورڈ ایک چپچپا نوٹ پر لکھ کر اپنے مانیٹر پر رکھنا
-- **صحیح طریقہ**: اپنا پاس ورڈ ایک محفوظ پاس ورڈ مینیجر میں رکھنا جس تک صرف آپ کو رسائی حاصل ہو
-
-#### ماحولیاتی متغیرات کیوں اہم ہیں
+#### ماحولیاتی متغیرات کیوں اہم ہیں  
 
 ```python
 # 🚨 NEVER DO THIS - API key visible to everyone
@@ -495,16 +859,16 @@ client = OpenAI(
     base_url="https://models.github.ai/inference"
 )
 ```
+  
+**جب آپ رازوں کو ہارڈ کوڈ کرتے ہیں تو کیا ہوتا ہے:**  
+1. **ورژن کنٹرول کی نمائش**: آپ کے Git ریپوزیٹری تک رسائی رکھنے والا کوئی بھی آپ کی API کلید دیکھتا ہے  
+2. **عوامی ریپوزیٹریز**: اگر آپ GitHub پر اپ لوڈ کرتے ہیں، تو آپ کی کلید پورے انٹرنیٹ کے لیے نظر آتی ہے  
+3. **ٹیم شیئرنگ**: آپ کے پروجیکٹ پر کام کرنے والے دوسرے ڈیولپرز کو آپ کی ذاتی API کلید تک رسائی حاصل ہوتی ہے  
+4. **سیکیورٹی کی خلاف ورزیاں**: اگر کوئی آپ کی API کلید چوری کرتا ہے، تو وہ آپ کے AI کریڈٹس استعمال کر سکتا ہے  
 
-**جب آپ رازوں کو ہارڈ کوڈ کرتے ہیں تو کیا ہوتا ہے:**
-1. **ورژن کنٹرول کی نمائش**: آپ کے Git ریپوزٹری تک رسائی رکھنے والا کوئی بھی آپ کی API کلید دیکھتا ہے
-2. **عوامی ریپوزٹریز**: اگر آپ GitHub پر اپ لوڈ کرتے ہیں، تو آپ کی کلید پورے انٹرنیٹ پر نظر آتی ہے
-3. **ٹیم شیئرنگ**: آپ کے پروجیکٹ پر کام کرنے والے دوسرے ڈویلپرز کو آپ کی ذاتی API کلید تک رسائی حاصل ہوتی ہے
-4. **سیکیورٹی کی خلاف ورزی**: اگر کوئی آپ کی API کلید چوری کرتا ہے، تو وہ آپ کے AI کریڈٹس استعمال کر سکتا ہے
-
-#### آپ کی ماحولیاتی فائل ترتیب دینا
+#### آپ کی ماحولیاتی فائل ترتیب دینا  
 
-اپنے بیک اینڈ ڈائریکٹری میں `.env` فائل بنائیں۔ یہ فائل آپ کے رازوں کو مقامی طور پر ذخیرہ کرتی ہے:
+اپنے بیک اینڈ ڈائریکٹری میں `.env` فائل بنائیں۔ یہ فائل آپ کے رازوں کو مقامی طور پر ذخیرہ کرتی ہے:  
 
 ```bash
 # .env file - This should NEVER be committed to Git
@@ -512,94 +876,22 @@ GITHUB_TOKEN=your_github_personal_access_token_here
 FASTAPI_DEBUG=True
 ENVIRONMENT=development
 ```
+  
+**.env فائل کو سمجھنا:**  
+- **ایک لائن میں ایک راز** `KEY=value` فارمیٹ میں  
+- **برابر کے نشان کے ارد گرد کوئی جگہ نہیں**  
+- **عام طور پر اقتباسات کی ضرورت نہیں**  
+- **تبصرے** `#` سے شروع ہوتے ہیں  
 
-**.env فائل کو سمجھنا:**
-- **ایک راز فی لائن** `KEY=value` فارمیٹ میں
-- **برابر کے نشان کے ارد گرد کوئی جگہ نہیں**
-- **عام طور پر اقتباسات کی ضرورت نہیں ہوتی** اقدار کے ارد گرد
-- **تبصرے** `#` سے شروع ہوتے ہیں
+#### اپنا GitHub پرسنل ایکسیس ٹوکن بنانا  
 
-#### آپ کا GitHub پرسنل ایکسیس ٹوکن بنانا
+آپ کا GitHub ٹوکن ایک خاص پاس ورڈ کی طرح ہے جو آپ کی ایپلیکیشن کو GitHub کی AI سروسز استعمال کرنے کی اجازت دیتا ہے:  
 
-آپ کا GitHub ٹوکن ایک خاص پاس ورڈ کی طرح ہے جو آپ کی ایپلیکیشن کو GitHub کی AI سروسز استعمال کرنے کی اجازت دیتا ہے:
+**ٹوکن تخلیق کا مرحلہ وار عمل:**  
+1. **GitHub سیٹنگز پر جائیں** →
+اب آتا ہے وہ دلچسپ لمحہ – اپنا FastAPI ڈیولپمنٹ سرور شروع کریں اور اپنی AI انٹیگریشن کو زندہ دیکھیں! FastAPI Uvicorn استعمال کرتا ہے، ایک تیز رفتار ASGI سرور جو خاص طور پر async Python ایپلیکیشنز کے لیے ڈیزائن کیا گیا ہے۔
 
-**ٹوکن تخلیق کے مرحلہ وار اقدامات:**
-1. **GitHub سیٹنگز پر جائیں** → Developer settings → Personal access tokens → Tokens (classic)
-2. **"Generate new token (classic)" پر کلک کریں**
-3. **میعاد مقرر کریں** (ٹیسٹنگ کے لیے 30 دن، پیداوار کے لیے زیادہ)
-4. **اسکوپس منتخب کریں**: "repo" اور کوئی بھی دیگر اجازتیں چیک کریں جن کی آپ کو ضرورت ہے
-5. **ٹوکن بنائیں** اور اسے فوراً کاپی کریں (آپ اسے دوبارہ نہیں دیکھ سکتے!)
-6. **اپنی .env فائل میں پیسٹ کریں**
-
-```bash
-# Example of what your token looks like (this is fake!)
-GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
-```
-
-#### Python میں ماحولیاتی متغیرات لوڈ کرنا
-
-```python
-import os
-from dotenv import load_dotenv
-
-# Load environment variables from .env file
-load_dotenv()
-
-# Now you can access them securely
-api_key = os.environ.get("GITHUB_TOKEN")
-if not api_key:
-    raise ValueError("GITHUB_TOKEN not found in environment variables!")
-
-client = OpenAI(
-    api_key=api_key,
-    base_url="https://models.github.ai/inference"
-)
-```
-
-**یہ کوڈ کیا کرتا ہے:**
-- **آپ کی .env فائل لوڈ کرتا ہے** اور متغیرات کو Python کے لیے دستیاب بناتا ہے
-- **چیک کرتا ہے** کہ مطلوبہ ٹوکن موجود ہے (اچھی غلطی ہینڈلنگ!)
-- **واضح غلطی پیدا کرتا ہے** اگر ٹوکن غائب ہو
-- **ٹوکن کو محفوظ طریقے سے استعمال کرتا ہے** بغیر کوڈ میں ظاہر کیے
-
-#### Git سیکیورٹی: .gitignore فائل
-
-آپ کی `.gitignore` فائل Git کو بتاتی ہے کہ کون سی فائلیں کبھی ٹریک یا اپ لوڈ نہ کریں:
-
-```bash
-# .gitignore - Add these lines
-.env
-*.env
-.env.local
-.env.production
-__pycache__/
-venv/
-.vscode/
-```
-
-**یہ کیوں اہم ہے**: ایک بار جب آپ `.env` کو `.gitignore` میں شامل کرتے ہیں، Git آپ کی ماحولیاتی فائل کو نظر انداز کر دے گا، آپ کو اپنے رازوں کو GitHub پر اپ لوڈ کرنے سے روک دے گا۔
-
-#### مختلف ماحول، مختلف راز
-
-پیشہ ورانہ ایپلیکیشنز مختلف ماحول کے لیے مختلف API کلیدیں استعمال کرتی ہیں:
-
-```bash
-# .env.development
-GITHUB_TOKEN=your_development_token
-DEBUG=True
-
-# .env.production  
-GITHUB_TOKEN=your_production_token
-DEBUG=False
-```
-
-**یہ کیوں اہم ہے**: آپ نہیں چاہتے کہ آپ کے ترقیاتی تجربات آپ کے پیداوار AI کے استعمال کے کوٹے کو متاثر کریں، اور آپ مختلف ماحول کے لیے مختلف سیکیورٹی سطحیں چاہتے ہیں۔
-
-### اپنا ترقیاتی سرور شروع کرنا: اپنے FastAPI کو زندہ کرنا
-
-اب دلچسپ لمحہ آتا ہے – اپنا FastAPI ترقیاتی سرور شروع کرنا اور اپنے AI انضمام کو زندہ دیکھنا! FastAPI Uvicorn استعمال کرتا ہے، ایک تیز رفتار ASGI سرور جو خاص طور پر async Python ایپلیکیشنز کے لیے ڈیزائن کیا گیا ہے۔
-
-#### FastAPI سرور اسٹارٹ اپ کے عمل کو سمجھنا
+#### FastAPI سرور اسٹارٹ اپ پروسیس کو سمجھنا
 
 ```bash
 # Method 1: Direct Python execution (includes auto-reload)
@@ -611,21 +903,21 @@ uvicorn api:app --host 0.0.0.0 --port 5000 --reload
 
 جب آپ یہ کمانڈ چلاتے ہیں، تو پردے کے پیچھے یہ ہوتا ہے:
 
-**1. Python آپ کی FastAPI ایپلیکیشن لوڈ کرتا ہے**:
-- تمام مطلوبہ لائبریریاں درآمد کرتا ہے (FastAPI، Pydantic، OpenAI، وغیرہ)
-- آپ کی `.env` فائل سے ماحولیاتی متغیرات لوڈ کرتا ہے
+**1. Python آپ کی FastAPI ایپلیکیشن کو لوڈ کرتا ہے**:
+- تمام ضروری لائبریریاں (FastAPI، Pydantic، OpenAI وغیرہ) امپورٹ کرتا ہے
+- آپ کی `.env` فائل سے ماحولیات کے متغیرات لوڈ کرتا ہے
 - خودکار دستاویزات کے ساتھ FastAPI ایپلیکیشن انسٹینس بناتا ہے
 
-**2. Uvicorn ASGI سرور کو ترتیب دیتا ہے**:
-- async درخواست ہینڈلنگ صلاحیتوں کے ساتھ پورٹ 5000 پر بائنڈ کرتا ہے
-- خودکار تصدیق کے ساتھ درخواست روٹنگ ترتیب دیتا ہے
-- ترقی کے لیے ہاٹ ری لوڈ کو فعال کرتا ہے (فائل میں تبدیلیوں پر دوبارہ شروع ہوتا ہے)
+**2. Uvicorn ASGI سرور کو کنفیگر کرتا ہے**:
+- async درخواستوں کو ہینڈل کرنے کی صلاحیت کے ساتھ پورٹ 5000 پر بائنڈ کرتا ہے
+- خودکار تصدیق کے ساتھ درخواستوں کی روٹنگ سیٹ کرتا ہے
+- ڈیولپمنٹ کے لیے ہاٹ ری لوڈ کو فعال کرتا ہے (فائل میں تبدیلیوں پر دوبارہ شروع ہوتا ہے)
 - انٹرایکٹو API دستاویزات تیار کرتا ہے
 
-**3. سرور سننا شروع کرتا ہے**:
-- آپ کے ٹرمینل میں ظاہر ہوتا ہے: `INFO: Uvicorn running on http://0.0.0.0:5000`
-- سرور کئی ہم وقتی AI درخواستوں کو سنبھال سکتا ہے
-- آپ کی API خودکار دستاویزات کے ساتھ `http://localhost:5000/docs` پر تیار ہے
+**3. سرور سننے کے لیے شروع ہوتا ہے**:
+- آپ کے ٹرمینل میں دکھائی دیتا ہے: `INFO: Uvicorn running on http://0.0.0.0:5000`
+- سرور متعدد ہم وقتی AI درخواستوں کو ہینڈل کر سکتا ہے
+- آپ کا API خودکار دستاویزات کے ساتھ `http://localhost:5000/docs` پر تیار ہے
 
 #### جب سب کچھ کام کرے تو آپ کو کیا دیکھنا چاہیے
 
@@ -639,8 +931,40 @@ INFO:     Waiting for application startup.
 INFO:     Application startup complete.
 ```
 
-**FastAPI آؤٹ پٹ کو سمجھنا:**
-- **تبدیلیوں کے لیے دیکھے گا**: ترقی کے لیے آٹو ری لوڈ فعال ہے
+**FastAPI آؤٹ پٹ کو سمجھنا**:
+- **تبدیلیوں کے لیے دیکھے گا**: ڈیولپمنٹ کے لیے آٹو ری لوڈ فعال ہے
+- **Uvicorn چل رہا ہے**: اعلی کارکردگی والا ASGI سرور فعال ہے
+- **ری لوڈر پروسیس شروع ہوا**: فائل واچر خودکار ری اسٹارٹس کے لیے
+- **ایپلیکیشن اسٹارٹ اپ مکمل**: FastAPI ایپ کامیابی سے انیشیلائز ہو گئی
+- **انٹرایکٹو دستاویزات دستیاب ہیں**: خودکار API دستاویزات کے لیے `/docs` پر جائیں
+
+#### اپنے FastAPI کی جانچ: طاقتور طریقے
+
+FastAPI آپ کے API کی جانچ کے لیے کئی آسان طریقے فراہم کرتا ہے، بشمول خودکار انٹرایکٹو دستاویزات:
+
+**طریقہ 1: انٹرایکٹو API دستاویزات (تجویز کردہ)**
+1. اپنا براؤزر کھولیں اور `http://localhost:5000/docs` پر جائیں
+2. آپ Swagger UI دیکھیں گے جس میں آپ کے تمام اینڈ پوائنٹس دستاویزی ہوں گے
+3. `/hello` پر کلک کریں → "Try it out" → ایک ٹیسٹ میسج درج کریں → "Execute"
+4. براؤزر میں مناسب فارمیٹنگ کے ساتھ جواب دیکھیں
+
+**طریقہ 2: بنیادی براؤزر ٹیسٹ**
+1. روٹ اینڈ پوائنٹ کے لیے `http://localhost:5000` پر جائیں
+2. سرور کی صحت چیک کرنے کے لیے `http://localhost:5000/health` پر جائیں
+3. یہ تصدیق کرتا ہے کہ آپ کا FastAPI سرور صحیح طریقے سے چل رہا ہے
+
+**طریقہ 2: کمانڈ لائن ٹیسٹ (ایڈوانسڈ)**
+```bash
+# Test with curl (if available)
+curl -X POST http://localhost:5000/hello \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello AI!"}'
+
+# Expected response:
+# {"response": "Hello! I'm your AI assistant. How can I help you today?"}
+```
+
+**طریقہ 3: Python ٹیسٹ اسکرپٹ**
 ```python
 # test_api.py - Create this file to test your API
 import requests
@@ -660,19 +984,19 @@ else:
 
 #### عام اسٹارٹ اپ مسائل کا حل
 
-| ایرر میسج | اس کا مطلب | حل کیسے کریں |
-|-----------|------------|-------------|
+| ایرر میسج | اس کا مطلب | حل |
+|-----------|------------|-----|
 | `ModuleNotFoundError: No module named 'fastapi'` | FastAPI انسٹال نہیں ہے | اپنی ورچوئل ماحول میں `pip install fastapi uvicorn` چلائیں |
 | `ModuleNotFoundError: No module named 'uvicorn'` | ASGI سرور انسٹال نہیں ہے | اپنی ورچوئل ماحول میں `pip install uvicorn` چلائیں |
-| `KeyError: 'GITHUB_TOKEN'` | ماحول کا متغیر نہیں ملا | اپنی `.env` فائل اور `load_dotenv()` کال چیک کریں |
-| `Address already in use` | پورٹ 5000 مصروف ہے | دوسرے پروسیسز کو ختم کریں جو پورٹ 5000 استعمال کر رہے ہیں یا پورٹ تبدیل کریں |
-| `ValidationError` | درخواست کا ڈیٹا Pydantic ماڈل سے میل نہیں کھاتا | اپنی درخواست کے فارمیٹ کو متوقع اسکیمہ سے ملائیں |
-| `HTTPException 422` | ناقابل عمل ادارہ | درخواست کی توثیق ناکام ہوئی، درست فارمیٹ کے لیے `/docs` چیک کریں |
-| `OpenAI API error` | AI سروس کی توثیق ناکام ہوئی | اپنے GitHub ٹوکن کی تصدیق کریں کہ وہ درست ہے اور مناسب اجازتیں رکھتا ہے |
+| `KeyError: 'GITHUB_TOKEN'` | ماحولیات کا متغیر نہیں ملا | اپنی `.env` فائل اور `load_dotenv()` کال چیک کریں |
+| `Address already in use` | پورٹ 5000 مصروف ہے | دیگر پروسیسز کو ختم کریں جو پورٹ 5000 استعمال کر رہے ہیں یا پورٹ تبدیل کریں |
+| `ValidationError` | درخواست کا ڈیٹا Pydantic ماڈل سے میل نہیں کھاتا | اپنی درخواست کا فارمیٹ چیک کریں کہ متوقع اسکیمہ سے میل کھاتا ہے |
+| `HTTPException 422` | ناقابل عمل ادارہ | درخواست کی تصدیق ناکام ہوئی، `/docs` پر صحیح فارمیٹ چیک کریں |
+| `OpenAI API error` | AI سروس کی تصدیق ناکام ہوئی | اپنے GitHub ٹوکن کی تصدیق کریں کہ یہ درست ہے اور مناسب اجازتیں رکھتا ہے |
 
-#### ترقی کے بہترین طریقے
+#### ڈیولپمنٹ کے بہترین طریقے
 
-**ہوٹ ری لوڈنگ**: FastAPI اور Uvicorn خودکار ری لوڈنگ فراہم کرتے ہیں جب آپ اپنی Python فائلز میں تبدیلی کرتے ہیں۔ اس کا مطلب ہے کہ آپ کوڈ میں ترمیم کر سکتے ہیں اور فوراً ٹیسٹ کر سکتے ہیں بغیر دستی طور پر دوبارہ شروع کیے۔
+**ہاٹ ری لوڈنگ**: FastAPI Uvicorn کے ساتھ خودکار ری لوڈنگ فراہم کرتا ہے جب آپ اپنی Python فائلز میں تبدیلیاں محفوظ کرتے ہیں۔ اس کا مطلب ہے کہ آپ کوڈ میں ترمیم کر سکتے ہیں اور فوری طور پر جانچ سکتے ہیں بغیر دستی طور پر دوبارہ شروع کیے۔
 
 ```python
 # Enable hot reloading explicitly
@@ -680,7 +1004,7 @@ if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True enables hot reload
 ```
 
-**ترقی کے لیے لاگنگ**: لاگنگ شامل کریں تاکہ معلوم ہو سکے کہ کیا ہو رہا ہے:
+**ڈیولپمنٹ کے لیے لاگنگ**: لاگنگ شامل کریں تاکہ معلوم ہو سکے کہ کیا ہو رہا ہے:
 
 ```python
 import logging
@@ -709,21 +1033,21 @@ def hello():
         return jsonify({"error": "AI service temporarily unavailable"}), 500
 ```
 
-**لاگنگ کیوں مددگار ہے**: ترقی کے دوران، آپ دیکھ سکتے ہیں کہ کون سی درخواستیں آ رہی ہیں، AI کیا جواب دے رہا ہے، اور کہاں غلطیاں ہو رہی ہیں۔ اس سے ڈیبگنگ بہت تیز ہو جاتی ہے۔
+**کیوں لاگنگ مددگار ہے**: ڈیولپمنٹ کے دوران، آپ دیکھ سکتے ہیں کہ کون سی درخواستیں آ رہی ہیں، AI کیا جواب دے رہا ہے، اور کہاں غلطیاں ہو رہی ہیں۔ یہ ڈیبگنگ کو بہت تیز بناتا ہے۔
 
-### GitHub Codespaces کے لیے ترتیب دینا: کلاؤڈ میں ترقی کو آسان بنائیں
+### GitHub Codespaces کے لیے کنفیگر کرنا: کلاؤڈ ڈیولپمنٹ کو آسان بنانا
 
-GitHub Codespaces ایک طاقتور ترقیاتی کمپیوٹر کی طرح ہے جو کلاؤڈ میں چلتا ہے اور آپ کسی بھی براؤزر سے اس تک رسائی حاصل کر سکتے ہیں۔ اگر آپ Codespaces میں کام کر رہے ہیں، تو اپنے بیک اینڈ کو فرنٹ اینڈ کے لیے قابل رسائی بنانے کے لیے کچھ اضافی اقدامات کی ضرورت ہوگی۔
+GitHub Codespaces ایسا ہے جیسے آپ کے پاس کلاؤڈ میں ایک طاقتور ڈیولپمنٹ کمپیوٹر ہو جسے آپ کسی بھی براؤزر سے رسائی حاصل کر سکتے ہیں۔ اگر آپ Codespaces میں کام کر رہے ہیں، تو اپنے بیک اینڈ کو فرنٹ اینڈ کے لیے قابل رسائی بنانے کے لیے کچھ اضافی اقدامات کرنے ہوں گے۔
 
 #### Codespaces نیٹ ورکنگ کو سمجھنا
 
-ایک مقامی ترقیاتی ماحول میں، سب کچھ ایک ہی کمپیوٹر پر چلتا ہے:
+ایک مقامی ڈیولپمنٹ ماحول میں، سب کچھ ایک ہی کمپیوٹر پر چلتا ہے:
 - بیک اینڈ: `http://localhost:5000`
 - فرنٹ اینڈ: `http://localhost:3000` (یا file://)
 
-Codespaces میں، آپ کا ترقیاتی ماحول GitHub کے سرورز پر چلتا ہے، لہذا "localhost" کا مطلب مختلف ہوتا ہے۔ GitHub خود بخود آپ کی سروسز کے لیے عوامی URLs بناتا ہے، لیکن آپ کو انہیں صحیح طریقے سے ترتیب دینا ہوگا۔
+Codespaces میں، آپ کا ڈیولپمنٹ ماحول GitHub کے سرورز پر چلتا ہے، لہذا "localhost" کا مطلب مختلف ہوتا ہے۔ GitHub خودکار طور پر آپ کی سروسز کے لیے عوامی URLs بناتا ہے، لیکن آپ کو انہیں صحیح طریقے سے کنفیگر کرنا ہوگا۔
 
-#### Codespaces ترتیب دینے کے مراحل
+#### Codespaces کنفیگریشن کے مرحلہ وار اقدامات
 
 **1. اپنا بیک اینڈ سرور شروع کریں**:
 ```bash
@@ -731,23 +1055,23 @@ cd backend
 python api.py
 ```
 
-آپ کو FastAPI/Uvicorn اسٹارٹ اپ میسج نظر آئے گا، لیکن نوٹ کریں کہ یہ Codespace ماحول کے اندر چل رہا ہے۔
+آپ کو مانوس FastAPI/Uvicorn اسٹارٹ اپ میسج نظر آئے گا، لیکن نوٹ کریں کہ یہ Codespace ماحول کے اندر چل رہا ہے۔
 
-**2. پورٹ کی مرئیت کو ترتیب دیں**:
-- VS Code کے نیچے والے پینل میں "Ports" ٹیب تلاش کریں
+**2. پورٹ کی مرئیت کو کنفیگر کریں**:
+- VS Code کے نیچے والے پینل میں "Ports" ٹیب دیکھیں
 - فہرست میں پورٹ 5000 تلاش کریں
 - پورٹ 5000 پر دائیں کلک کریں
 - "Port Visibility" → "Public" منتخب کریں
 
-**اسے عوامی کیوں بنائیں؟** عام طور پر، Codespace پورٹس نجی ہوتی ہیں (صرف آپ کے لیے قابل رسائی)۔ اسے عوامی بنانے سے آپ کا فرنٹ اینڈ (جو براؤزر میں چلتا ہے) آپ کے بیک اینڈ سے بات چیت کر سکتا ہے۔
+**کیوں اسے عوامی بنائیں؟** ڈیفالٹ کے طور پر، Codespace پورٹس نجی ہوتی ہیں (صرف آپ کے لیے قابل رسائی)۔ اسے عوامی بنانے سے آپ کے فرنٹ اینڈ (جو براؤزر میں چلتا ہے) کو آپ کے بیک اینڈ کے ساتھ بات چیت کرنے کی اجازت ملتی ہے۔
 
 **3. اپنا عوامی URL حاصل کریں**:
-پورٹ کو عوامی بنانے کے بعد، آپ کو ایسا URL نظر آئے گا:
+پورٹ کو عوامی بنانے کے بعد، آپ کو ایک URL نظر آئے گا:
 ```
 https://your-codespace-name-5000.app.github.dev
 ```
 
-**4. اپنی فرنٹ اینڈ کنفیگریشن کو اپ ڈیٹ کریں**:
+**4. اپنے فرنٹ اینڈ کنفیگریشن کو اپ ڈیٹ کریں**:
 ```javascript
 // In your frontend app.js, update the BASE_URL:
 this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
@@ -760,20 +1084,20 @@ Codespace URLs ایک متوقع پیٹرن کی پیروی کرتے ہیں:
 https://[codespace-name]-[port].app.github.dev
 ```
 
-**اسے توڑ کر سمجھنا**:
+**اسے توڑ کر دیکھیں**:
 - `codespace-name`: آپ کے Codespace کے لیے ایک منفرد شناخت کنندہ (عام طور پر آپ کے یوزر نیم کو شامل کرتا ہے)
 - `port`: وہ پورٹ نمبر جس پر آپ کی سروس چل رہی ہے (ہمارے FastAPI ایپ کے لیے 5000)
 - `app.github.dev`: Codespace ایپلیکیشنز کے لیے GitHub کا ڈومین
 
-#### اپنے Codespace سیٹ اپ کی جانچ کرنا
+#### اپنے Codespace سیٹ اپ کی جانچ
 
-**1. بیک اینڈ کو براہ راست ٹیسٹ کریں**:
-اپنا عوامی URL ایک نئے براؤزر ٹیب میں کھولیں۔ آپ کو یہ نظر آنا چاہیے:
+**1. بیک اینڈ کو براہ راست جانچیں**:
+اپنے عوامی URL کو ایک نئے براؤزر ٹیب میں کھولیں۔ آپ کو یہ دیکھنا چاہیے:
 ```
 Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
 ```
 
-**2. براؤزر ڈیولپر ٹولز کے ساتھ ٹیسٹ کریں**:
+**2. براؤزر ڈیولپر ٹولز کے ساتھ جانچ کریں**:
 ```javascript
 // Open browser console and test your API
 fetch('https://your-codespace-name-5000.app.github.dev/hello', {
@@ -785,21 +1109,21 @@ fetch('https://your-codespace-name-5000.app.github.dev/hello', {
 .then(data => console.log(data));
 ```
 
-#### Codespaces بمقابلہ مقامی ترقی
+#### Codespaces بمقابلہ مقامی ڈیولپمنٹ
 
-| پہلو | مقامی ترقی | GitHub Codespaces |
-|------|------------|-------------------|
-| **سیٹ اپ کا وقت** | زیادہ (Python، dependencies انسٹال کریں) | فوری (پری کنفیگرڈ ماحول) |
+| پہلو | مقامی ڈیولپمنٹ | GitHub Codespaces |
+|------|----------------|-------------------|
+| **سیٹ اپ کا وقت** | زیادہ (Python، ڈیپینڈنسیز انسٹال کریں) | فوری (پری کنفیگرڈ ماحول) |
 | **URL رسائی** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
 | **پورٹ کنفیگریشن** | خودکار | دستی (پورٹس کو عوامی بنائیں) |
 | **فائل کی مستقل مزاجی** | مقامی مشین | GitHub ریپوزیٹری |
 | **تعاون** | ماحول کو شیئر کرنا مشکل | Codespace لنک شیئر کرنا آسان |
 | **انٹرنیٹ انحصار** | صرف AI API کالز کے لیے | ہر چیز کے لیے ضروری |
 
-#### Codespace ترقی کے نکات
+#### Codespace ڈیولپمنٹ کے نکات
 
-**Codespaces میں ماحول کے متغیرات**:
-آپ کی `.env` فائل Codespaces میں اسی طرح کام کرتی ہے، لیکن آپ ماحول کے متغیرات کو براہ راست Codespace میں بھی سیٹ کر سکتے ہیں:
+**Codespaces میں ماحولیات کے متغیرات**:
+آپ کی `.env` فائل Codespaces میں اسی طرح کام کرتی ہے، لیکن آپ Codespace میں ماحولیات کے متغیرات براہ راست سیٹ کر سکتے ہیں:
 
 ```bash
 # Set environment variable for the current session
@@ -810,27 +1134,27 @@ echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
 ```
 
 **پورٹ مینجمنٹ**:
-- Codespaces خود بخود پتہ لگاتا ہے جب آپ کی ایپلیکیشن کسی پورٹ پر سننا شروع کرتی ہے
-- آپ ایک ساتھ متعدد پورٹس کو فارورڈ کر سکتے ہیں (اگر آپ بعد میں ڈیٹا بیس شامل کریں تو مفید)
-- پورٹس اس وقت تک قابل رسائی رہتے ہیں جب تک آپ کا Codespace چل رہا ہے
+- Codespaces خودکار طور پر پتہ لگاتا ہے جب آپ کی ایپلیکیشن کسی پورٹ پر سننا شروع کرتی ہے
+- آپ بیک وقت متعدد پورٹس فارورڈ کر سکتے ہیں (اگر آپ بعد میں ڈیٹا بیس شامل کریں)
+- پورٹس اس وقت تک قابل رسائی رہتی ہیں جب تک آپ کا Codespace چل رہا ہے
 
-**ترقیاتی ورک فلو**:
+**ڈیولپمنٹ ورک فلو**:
 1. VS Code میں کوڈ میں تبدیلی کریں
 2. FastAPI خودکار طور پر ری لوڈ ہوتا ہے (Uvicorn کے ری لوڈ موڈ کی بدولت)
-3. عوامی URL کے ذریعے فوراً تبدیلیوں کا ٹیسٹ کریں
-4. تیار ہونے پر کمیٹ اور پش کریں
+3. عوامی URL کے ذریعے فوری طور پر تبدیلیوں کی جانچ کریں
+4. جب تیار ہو تو کمیٹ اور پش کریں
 
-> 💡 **پرو ٹپ**: ترقی کے دوران اپنے Codespace بیک اینڈ URL کو بک مارک کریں۔ چونکہ Codespace نام مستحکم ہیں، URL اس وقت تک تبدیل نہیں ہوگا جب تک آپ ایک ہی Codespace استعمال کر رہے ہیں۔
+> 💡 **پرو ٹپ**: ڈیولپمنٹ کے دوران اپنے Codespace بیک اینڈ URL کو بک مارک کریں۔ چونکہ Codespace نام مستحکم ہیں، URL اس وقت تک نہیں بدلے گا جب تک آپ ایک ہی Codespace استعمال کر رہے ہیں۔
 
 ## فرنٹ اینڈ چیٹ انٹرفیس بنانا: جہاں انسان AI سے ملتے ہیں
 
-اب ہم یوزر انٹرفیس بنائیں گے – وہ حصہ جو یہ طے کرتا ہے کہ لوگ آپ کے AI اسسٹنٹ کے ساتھ کیسے بات چیت کرتے ہیں۔ جیسے اصل آئی فون کے انٹرفیس کا ڈیزائن، ہم پیچیدہ ٹیکنالوجی کو استعمال میں آسان اور قدرتی بنانے پر توجہ دے رہے ہیں۔
+اب ہم یوزر انٹرفیس بنائیں گے – وہ حصہ جو یہ طے کرتا ہے کہ لوگ آپ کے AI اسسٹنٹ کے ساتھ کیسے بات چیت کرتے ہیں۔ جیسے اصل آئی فون کے انٹرفیس کے ڈیزائن میں، ہم پیچیدہ ٹیکنالوجی کو استعمال میں آسان اور قدرتی بنانے پر توجہ دے رہے ہیں۔
 
 ### جدید فرنٹ اینڈ آرکیٹیکچر کو سمجھنا
 
-ہمارا چیٹ انٹرفیس وہ ہوگا جسے ہم "سنگل پیج ایپلیکیشن" یا SPA کہتے ہیں۔ پرانے طریقے کے بجائے جہاں ہر کلک ایک نیا صفحہ لوڈ کرتا ہے، ہمارا ایپ ہموار اور فوری طور پر اپ ڈیٹ ہوتا ہے:
+ہمارا چیٹ انٹرفیس وہ ہوگا جسے ہم "سنگل پیج ایپلیکیشن" یا SPA کہتے ہیں۔ پرانے طریقے کے بجائے جہاں ہر کلک پر ایک نیا صفحہ لوڈ ہوتا ہے، ہمارا ایپ ہموار اور فوری طور پر اپ ڈیٹ ہوتا ہے:
 
-**پرانے ویب سائٹس**: جیسے ایک کتاب پڑھنا – آپ مکمل طور پر نئے صفحات پر پلٹتے ہیں
+**پرانے ویب سائٹس**: جیسے ایک کتاب پڑھنا – آپ مکمل طور پر نئے صفحات پلٹتے ہیں
 **ہمارا چیٹ ایپ**: جیسے اپنے فون کا استعمال کرنا – سب کچھ بہتا ہے اور ہموار طریقے سے اپ ڈیٹ ہوتا ہے
 
 ```mermaid
@@ -844,12 +1168,36 @@ graph TD
     G --> H[Ready for Next Message]
 ```
 
+```mermaid
+classDiagram
+    class ChatApp {
+        +messages: HTMLElement
+        +form: HTMLElement
+        +input: HTMLElement
+        +sendButton: HTMLElement
+        +BASE_URL: string
+        +API_ENDPOINT: string
+        
+        +constructor()
+        +initializeEventListeners()
+        +handleSubmit(event)
+        +callAPI(message)
+        +appendMessage(text, role)
+        +escapeHtml(text)
+        +scrollToBottom()
+        +setLoading(isLoading)
+    }
+    
+    ChatApp --> DOM : manipulates
+    ChatApp --> FastAPI : sends requests
+```
+
 ### فرنٹ اینڈ ڈیولپمنٹ کے تین ستون
 
-ہر فرنٹ اینڈ ایپلیکیشن – سادہ ویب سائٹس سے لے کر پیچیدہ ایپس جیسے Discord یا Slack – تین بنیادی ٹیکنالوجیز پر مبنی ہوتی ہے۔ انہیں وہ بنیاد سمجھیں جس پر ویب پر آپ جو کچھ دیکھتے اور تعامل کرتے ہیں وہ بنایا گیا ہے:
+ہر فرنٹ اینڈ ایپلیکیشن – سادہ ویب سائٹس سے لے کر پیچیدہ ایپس جیسے Discord یا Slack – تین بنیادی ٹیکنالوجیز پر مبنی ہوتی ہے۔ انہیں وہ بنیاد سمجھیں جس پر آپ ویب پر سب کچھ دیکھتے اور تعامل کرتے ہیں:
 
 **HTML (ساخت)**: یہ آپ کی بنیاد ہے
-- طے کرتا ہے کہ کون سے عناصر موجود ہیں (بٹن، ٹیکسٹ ایریاز، کنٹینرز)
+- فیصلہ کرتا ہے کہ کون سے عناصر موجود ہیں (بٹن، ٹیکسٹ ایریاز، کنٹینرز)
 - مواد کو معنی دیتا ہے (یہ ایک ہیڈر ہے، یہ ایک فارم ہے، وغیرہ)
 - بنیادی ساخت بناتا ہے جس پر سب کچھ تعمیر ہوتا ہے
 
@@ -859,9 +1207,9 @@ graph TD
 - ہموار اینیمیشنز اور بصری تاثرات بناتا ہے
 
 **JavaScript (رویہ)**: یہ آپ کا دماغ ہے
-- صارفین کے اعمال کا جواب دیتا ہے (کلکس، ٹائپنگ، اسکرولنگ)
+- صارفین کے اعمال پر ردعمل دیتا ہے (کلکس، ٹائپنگ، اسکرولنگ)
 - آپ کے بیک اینڈ سے بات کرتا ہے اور صفحہ کو اپ ڈیٹ کرتا ہے
-- سب کچھ انٹرایکٹو اور متحرک بناتا ہے
+- سب کچھ انٹرایکٹو اور ڈائنامک بناتا ہے
 
 **اسے آرکیٹیکچرل ڈیزائن کی طرح سمجھیں:**
 - **HTML**: ساختی بلیو پرنٹ (جگہوں اور تعلقات کی وضاحت)
@@ -874,12 +1222,12 @@ graph TD
 
 **کلاس پر مبنی آرکیٹیکچر**: ہم اپنے کوڈ کو کلاسز میں منظم کریں گے، جو اشیاء کے لیے بلیو پرنٹس بنانے جیسا ہے
 **Async/Await**: وقت لینے والے آپریشنز (جیسے API کالز) کو ہینڈل کرنے کا جدید طریقہ
-**ایونٹ پر مبنی پروگرامنگ**: ہمارا ایپ صارف کے اعمال (کلکس، کی پریسز) کا جواب دیتا ہے بجائے اس کے کہ لوپ میں چلتا رہے
-**DOM Manipulation**: صارف کے تعاملات اور API جوابات کی بنیاد پر ویب پیج کے مواد کو متحرک طور پر اپ ڈیٹ کرنا
+**ایونٹ ڈرائیون پروگرامنگ**: ہمارا ایپ صارف کے اعمال (کلکس، کی پریسز) پر ردعمل دیتا ہے بجائے اس کے کہ لوپ میں چلتا رہے
+**DOM Manipulation**: صارف کے تعاملات اور API جوابات کی بنیاد پر ویب پیج کے مواد کو ڈائنامک طور پر اپ ڈیٹ کرنا
 
 ### پروجیکٹ اسٹرکچر سیٹ اپ
 
-ایک فرنٹ اینڈ ڈائریکٹری بنائیں اس منظم اسٹرکچر کے ساتھ:
+ایک فرنٹ اینڈ ڈائریکٹری بنائیں اس منظم ساخت کے ساتھ:
 
 ```text
 frontend/
@@ -888,18 +1236,18 @@ frontend/
 └── styles.css      # Visual styling
 ```
 
-**آرکیٹیکچر کو سمجھنا:**
-- **ساخت** کو HTML، JavaScript، اور CSS کے درمیان الگ کرتا ہے
-- **سادہ** فائل اسٹرکچر برقرار رکھتا ہے جو نیویگیٹ اور ترمیم کرنے میں آسان ہے
-- **ویب ڈیولپمنٹ کے بہترین طریقوں** کی پیروی کرتا ہے تنظیم اور برقرار رکھنے کے لیے
+**آرکیٹیکچر کو سمجھنا**:
+- **الگ کرتا ہے** ساخت (HTML)، رویہ (JavaScript)، اور پیشکش (CSS) کے درمیان خدشات
+- **برقرار رکھتا ہے** ایک سادہ فائل اسٹرکچر جو نیویگیٹ اور ترمیم کرنے میں آسان ہے
+- **پیروی کرتا ہے** ویب ڈیولپمنٹ کے بہترین طریقے تنظیم اور برقرار رکھنے کے لیے
 
 ### HTML بنیاد بنانا: قابل رسائی کے لیے سیمینٹک ساخت
 
-آئیے HTML ساخت سے شروع کرتے ہیں۔ جدید ویب ڈیولپمنٹ "سیمینٹک HTML" پر زور دیتا ہے – HTML عناصر کا استعمال جو واضح طور پر ان کے مقصد کو بیان کرتے ہیں، نہ کہ صرف ان کی ظاہری شکل۔ یہ آپ کی ایپلیکیشن کو اسکرین ریڈرز، سرچ انجنز، اور دیگر ٹولز کے لیے قابل رسائی بناتا ہے۔
+آئیے HTML ساخت سے شروع کریں۔ جدید ویب ڈیولپمنٹ "سیمینٹک HTML" پر زور دیتا ہے – HTML عناصر کا استعمال جو واضح طور پر ان کے مقصد کو بیان کرتے ہیں، نہ کہ صرف ان کی ظاہری شکل۔ یہ آپ کی ایپلیکیشن کو اسکرین ریڈرز، سرچ انجنز، اور دیگر ٹولز کے لیے قابل رسائی بناتا ہے۔
 
-**سیمینٹک HTML کیوں اہم ہے**: تصور کریں کہ آپ اپنے چیٹ ایپ کو کسی کو فون پر بیان کر رہے ہیں۔ آپ کہیں گے "یہاں ایک ہیڈر ہے جس میں عنوان ہے، ایک مین ایریا جہاں بات چیت ظاہر ہوتی ہے، اور نیچے ایک فارم ہے پیغامات ٹائپ کرنے کے لیے۔" سیمینٹک HTML ایسے عناصر استعمال کرتا ہے جو اس قدرتی وضاحت سے میل کھاتے ہیں۔
+**کیوں سیمینٹک HTML اہم ہے**: تصور کریں کہ آپ اپنے چیٹ ایپ کو کسی کو فون پر بیان کر رہے ہیں۔ آپ کہیں گے "یہاں ایک ہیڈر ہے جس میں عنوان ہے، ایک مین ایریا جہاں بات چیت ظاہر ہوتی ہے، اور نیچے ایک فارم ہے پیغامات ٹائپ کرنے کے لیے۔" سیمینٹک HTML ایسے عناصر استعمال کرتا ہے جو اس قدرتی وضاحت سے میل کھاتے ہیں۔
 
-`index.html` بنائیں اس سوچے سمجھے ساختی مارک اپ کے ساتھ:
+`index.html` بنائیں اس سوچے سمجھے مارک اپ کے ساتھ:
 
 ```html
 <!DOCTYPE html>
@@ -941,7 +1289,7 @@ frontend/
 </html>
 ```
 
-**ہر HTML عنصر اور اس کے مقصد کو سمجھنا:**
+**ہر HTML عنصر اور اس کے مقصد کو سمجھنا**:
 
 #### دستاویز کی ساخت
 - **`<!DOCTYPE html>`**: براؤزر کو بتاتا ہے کہ یہ جدید HTML5 ہے
@@ -950,43 +1298,25 @@ frontend/
 - **`<meta name="viewport"...>`**: صفحہ کو موبائل ریسپانسیو بناتا ہے زوم اور اسکیل کو کنٹرول کر کے
 
 #### سیمینٹک عناصر
-- **`<header>`**: واضح طور پر اوپر والے سیکشن کی شناخت کرتا ہے جس میں عنوان اور وضاحت ہوتی ہے
+- **`<header>`**: واضح طور پر اوپر والے سیکشن کی شناخت کرتا ہے جس میں عنوان اور وضاحت ہے
 - **`<main>`**: بنیادی مواد کے علاقے کو نامزد کرتا ہے (جہاں بات چیت ہوتی ہے)
 - **`<form>`**: صارف کی ان پٹ کے لیے سیمینٹک طور پر درست، مناسب کی بورڈ نیویگیشن کو فعال کرتا ہے
 
 #### قابل رسائی خصوصیات
-- **`role="log"`**: اسکرین ریڈرز کو بتاتا ہے کہ یہ علاقہ پیغامات کی زمانی لاگ پر مشتمل ہے
-- **`aria-live="polite"`**: اسکرین ریڈرز کو نئے پیغامات کو بغیر کسی مداخلت کے اعلان کرتا ہے
-- **`aria-label`**: فارم کنٹرولز کے لیے وضاحتی لیبل فراہم کرتا ہے
-- **`required`**: براؤزر کی تصدیق کرتا ہے کہ صارفین پیغام داخل کریں اس سے پہلے کہ بھیجیں
-
-#### CSS اور JavaScript انضمام
-- **`class` attributes**: CSS کے لیے اسٹائلنگ ہکس فراہم کرتا ہے (جیسے، `chat-container`, `input-group`)
-- **`id` attributes**: JavaScript کو مخصوص عناصر تلاش کرنے اور ان میں ترمیم کرنے کی اجازت دیتا ہے
-- **اسکرپٹ کی جگہ**: JavaScript فائل آخر میں لوڈ ہوتی ہے تاکہ HTML پہلے لوڈ ہو
-
-**یہ ساخت کیوں کام کرتی ہے:**
-- **منطقی بہاؤ**: ہیڈر → مین مواد → ان پٹ فارم قدرتی پڑھنے کے آرڈر سے میل کھاتا ہے
-- **کی بورڈ قابل رسائی**: صارفین تمام انٹرایکٹو عناصر کے ذریعے ٹیب کر سکتے ہیں
-- **اسکرین ریڈر دوستانہ**: بصری طور پر معذور صارفین کے لیے واضح لینڈ مارکس اور وضاحتیں
-- **موبائل ریسپانسیو**: ویوپورٹ میٹا ٹیگ ریسپانسیو ڈیزائن کو فعال کرتا ہے
-- **پروگریسو انحانسمنٹ**: کام کرتا ہے یہاں تک کہ اگر CSS یا JavaScript لوڈ ہونے میں ناکام ہو
-
-### انٹرایکٹو JavaScript شامل کرنا: جدید ویب ایپلیکیشن منطق
-
-اب آئیے JavaScript بنائیں جو ہمارے چیٹ انٹرفیس کو زندہ کرے۔ ہم جدید JavaScript پیٹرنز استعمال کریں گے جو آپ پیشہ ورانہ ویب ڈیولپمنٹ میں دیکھیں گے، بشمول ES6 کلاسز، async/await، اور ایونٹ پر مبنی پروگرامنگ۔
+- **`role="log"`**: اسکرین ریڈرز کو بتاتا ہے کہ یہ علاقہ پیغامات کی زمانی
+اب ہم جاوا اسکرپٹ تیار کرتے ہیں جو ہمارے چیٹ انٹرفیس کو زندگی بخشتا ہے۔ ہم جدید جاوا اسکرپٹ پیٹرنز استعمال کریں گے جو آپ کو پیشہ ور ویب ڈیولپمنٹ میں ملیں گے، جیسے ES6 کلاسز، async/await، اور ایونٹ ڈرائیون پروگرامنگ۔
 
-#### جدید JavaScript آرکیٹیکچر کو سمجھنا
+#### جدید جاوا اسکرپٹ آرکیٹیکچر کو سمجھنا
 
-پروسیجرل کوڈ لکھنے کے بجائے (ایک سیریز کے فنکشنز جو ترتیب وار چلتے ہیں)، ہم ایک **کلاس پر مبنی آرکیٹیکچر** بنائیں گے۔ کلاس کو اشیاء بنانے کے لیے بلیو پرنٹ کے طور پر سمجھیں – جیسے ایک آرکیٹیکٹ کا بلیو پرنٹ متعدد گھروں کی تعمیر کے لیے استعمال کیا جا سکتا ہے۔
+پروسیجرل کوڈ لکھنے کے بجائے (ایک ترتیب میں چلنے والے فنکشنز کی سیریز)، ہم **کلاس پر مبنی آرکیٹیکچر** بنائیں گے۔ کلاس کو ایک بلیو پرنٹ کے طور پر سوچیں جو آبجیکٹس بنانے کے لیے استعمال ہوتا ہے – جیسے ایک آرکیٹیکٹ کا بلیو پرنٹ کئی گھروں کی تعمیر کے لیے استعمال ہو سکتا ہے۔
 
 **ویب ایپلیکیشنز کے لیے کلاسز کیوں استعمال کریں؟**
-- **تنظیم**: تمام متعلقہ فعالیت کو ایک ساتھ گروپ کرتا ہے
-- **دوبارہ استعمال**: آپ ایک ہی صفحے پر متعدد چیٹ انسٹینسز بنا سکتے ہیں
-- **برقرار رکھنے کی صلاحیت**: مخصوص خصوصیات کو ڈیبگ اور ترمیم کرنا آسان ہے
+- **تنظیم**: تمام متعلقہ فنکشنلٹی ایک جگہ جمع ہوتی ہے
+- **دوبارہ استعمال**: آپ ایک ہی صفحے پر کئی چیٹ انسٹینسز بنا سکتے ہیں
+- **آسانی سے دیکھ بھال**: مخصوص فیچرز کو ڈیبگ اور تبدیل کرنا آسان ہوتا ہے
 - **پیشہ ورانہ معیار**: یہ پیٹرن React، Vue، اور Angular جیسے فریم ورک میں استعمال ہوتا ہے
 
-`app.js` بنائیں اس جدید، اچھی طرح سے منظم JavaScript کے ساتھ:
+`app.js` کو جدید، اچھی طرح سے منظم جاوا اسکرپٹ کے ساتھ بنائیں:
 
 ```javascript
 // app.js - Modern chat application logic
@@ -1104,9 +1434,9 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 ```
 
-#### ہر JavaScript تصور کو سمجھنا
+#### ہر جاوا اسکرپٹ تصور کو سمجھنا
 
-**ES6 کلاس ساخت**:
+**ES6 کلاس اسٹرکچر**:
 ```javascript
 class ChatApp {
     constructor() {
@@ -1139,8 +1469,8 @@ try {
 }
 ```
 
-**ایونٹ پر مبنی پروگرامنگ**:
-کسی چیز کے ہونے کا مسلسل چیک کرنے کے بجائے، ہم ایونٹس "سن" کرتے ہیں:
+**ایونٹ ڈرائیون پروگرامنگ**:
+کسی چیز کے ہونے کا مسلسل انتظار کرنے کے بجائے، ہم ایونٹس "سن" سکتے ہیں:
 ```javascript
 // When form is submitted, run handleSubmit
 this.form.addEventListener("submit", (e) => this.handleSubmit(e));
@@ -1149,7 +1479,7 @@ this.form.addEventListener("submit", (e) => this.handleSubmit(e));
 this.input.addEventListener("keypress", (e) => { /* ... */ });
 ```
 
-**DOM Manipulation**:
+**DOM مینپولیشن**:
 ```javascript
 // Create new elements
 const messageElement = document.createElement("div");
@@ -1164,7 +1494,7 @@ this.messages.appendChild(messageElement);
 
 #### سیکیورٹی اور بہترین طریقے
 
-**XSS روک تھام**:
+**XSS سے بچاؤ**:
 ```javascript
 escapeHtml(text) {
     const div = document.createElement('div');
@@ -1173,9 +1503,9 @@ escapeHtml(text) {
 }
 ```
 
-**یہ کیوں اہم ہے**: اگر کوئی صارف `<script>alert('hack')</script>` ٹائپ کرتا ہے، تو یہ فنکشن یقینی بناتا ہے کہ یہ کوڈ کے طور پر چلنے کے بجائے متن کے طور پر ظاہر ہو۔
+**یہ کیوں اہم ہے**: اگر کوئی یوزر `<script>alert('hack')</script>` ٹائپ کرتا ہے، تو یہ فنکشن یقینی بناتا ہے کہ یہ کوڈ کے طور پر چلنے کے بجائے ٹیکسٹ کے طور پر ظاہر ہو۔
 
-**غلطی سے نمٹنا**:
+**ایرر ہینڈلنگ**:
 ```javascript
 try {
     const reply = await this.callAPI(messageText);
@@ -1186,16 +1516,43 @@ try {
 }
 ```
 
-**صارف کے تجربے کے تحفظات**:
-- **پر امید UI**: صارف کا پیغام فوراً شامل کریں، سرور کے جواب کا انتظار نہ کریں
-- **لوڈنگ اسٹیٹس**
-یہ آرکیٹیکچر قابل توسیع ہے – آپ آسانی سے پیغام کی تدوین، فائل اپلوڈز، یا متعدد گفتگو کے تھریڈز جیسے فیچرز شامل کر سکتے ہیں بغیر بنیادی ڈھانچے کو دوبارہ لکھے۔
+**یوزر ایکسپیرینس کے خیالات**:
+- **آپٹیمسٹک UI**: یوزر کا میسج فوراً شامل کریں، سرور کے جواب کا انتظار نہ کریں
+- **لوڈنگ اسٹیٹس**: بٹن کو غیر فعال کریں اور "بھیج رہا ہے..." دکھائیں جب تک جواب نہ آئے
+- **آٹو اسکرول**: نئے میسجز کو نظر میں رکھیں
+- **ان پٹ ویلیڈیشن**: خالی میسجز نہ بھیجیں
+- **کی بورڈ شارٹ کٹس**: انٹر کی میسجز بھیجنے کے لیے (جیسے حقیقی چیٹ ایپس)
+
+#### ایپلیکیشن فلو کو سمجھنا
+
+1. **صفحہ لوڈ ہوتا ہے** → `DOMContentLoaded` ایونٹ فائر ہوتا ہے → `new ChatApp()` بنایا جاتا ہے
+2. **کنسٹرکٹر چلتا ہے** → DOM ایلیمنٹ ریفرنسز حاصل کرتا ہے → ایونٹ لسٹنرز سیٹ کرتا ہے
+3. **یوزر میسج ٹائپ کرتا ہے** → انٹر پریس کرتا ہے یا بھیجنے پر کلک کرتا ہے → `handleSubmit` چلتا ہے
+4. **handleSubmit** → ان پٹ ویلیڈیٹ کرتا ہے → لوڈنگ اسٹیٹ دکھاتا ہے → API کو کال کرتا ہے
+5. **API جواب دیتا ہے** → AI میسج چیٹ میں شامل کرتا ہے → انٹرفیس کو دوبارہ فعال کرتا ہے
+6. **اگلے میسج کے لیے تیار** → یوزر چیٹنگ جاری رکھ سکتا ہے
+
+یہ آرکیٹیکچر قابل توسیع ہے – آپ آسانی سے فیچرز جیسے میسج ایڈیٹنگ، فائل اپلوڈز، یا متعدد گفتگو کے تھریڈز شامل کر سکتے ہیں بغیر بنیادی اسٹرکچر کو دوبارہ لکھے۔
+
+### 🎯 تعلیمی جائزہ: جدید فرنٹ اینڈ آرکیٹیکچر
+
+**آرکیٹیکچر کی سمجھ**: آپ نے جدید جاوا اسکرپٹ پیٹرنز کا استعمال کرتے ہوئے مکمل سنگل پیج ایپلیکیشن نافذ کی ہے۔ یہ پیشہ ورانہ سطح کی فرنٹ اینڈ ڈیولپمنٹ کی نمائندگی کرتا ہے۔
+
+**کلیدی تصورات میں مہارت حاصل کی**:
+- **ES6 کلاس آرکیٹیکچر**: منظم، دیکھ بھال کے قابل کوڈ اسٹرکچر
+- **Async/Await پیٹرنز**: جدید غیر متزامن پروگرامنگ
+- **ایونٹ ڈرائیون پروگرامنگ**: جوابدہ یوزر انٹرفیس ڈیزائن
+- **سیکیورٹی بہترین طریقے**: XSS سے بچاؤ اور ان پٹ ویلیڈیشن
+
+**صنعتی تعلق**: جو پیٹرنز آپ نے سیکھے ہیں (کلاس پر مبنی آرکیٹیکچر، async آپریشنز، DOM مینپولیشن) جدید فریم ورک جیسے React، Vue، اور Angular کی بنیاد ہیں۔ آپ وہی آرکیٹیکچرل سوچ کے ساتھ بنا رہے ہیں جو پروڈکشن ایپلیکیشنز میں استعمال ہوتی ہے۔
+
+**عکاسی کا سوال**: آپ اس چیٹ ایپلیکیشن کو متعدد گفتگو یا یوزر آتھنٹیکیشن کو ہینڈل کرنے کے لیے کیسے بڑھائیں گے؟ ضروری آرکیٹیکچرل تبدیلیوں پر غور کریں اور کلاس اسٹرکچر کیسے ترقی کرے گا۔
 
 ### اپنے چیٹ انٹرفیس کو اسٹائل کرنا
 
-اب ہم CSS کے ساتھ ایک جدید، دلکش چیٹ انٹرفیس بنائیں گے۔ اچھی اسٹائلنگ آپ کی ایپلیکیشن کو پیشہ ورانہ محسوس کراتی ہے اور مجموعی صارف تجربے کو بہتر بناتی ہے۔ ہم جدید CSS خصوصیات جیسے Flexbox، CSS Grid، اور کسٹم پراپرٹیز کا استعمال کریں گے تاکہ ایک ذمہ دار اور قابل رسائی ڈیزائن بنایا جا سکے۔
+اب ہم CSS کے ساتھ ایک جدید، بصری طور پر دلکش چیٹ انٹرفیس بناتے ہیں۔ اچھی اسٹائلنگ آپ کی ایپلیکیشن کو پیشہ ورانہ محسوس کراتی ہے اور مجموعی یوزر ایکسپیرینس کو بہتر بناتی ہے۔ ہم جدید CSS فیچرز جیسے Flexbox، CSS Grid، اور کسٹم پراپرٹیز کا استعمال کریں گے تاکہ ایک جوابدہ، قابل رسائی ڈیزائن بنایا جا سکے۔
 
-`styles.css` فائل بنائیں اور ان جامع اسٹائلز کو شامل کریں:
+`styles.css` بنائیں ان جامع اسٹائلز کے ساتھ:
 
 ```css
 /* styles.css - Modern chat interface styling */
@@ -1456,16 +1813,16 @@ body {
 
 **CSS آرکیٹیکچر کو سمجھنا:**
 - **استعمال کرتا ہے** CSS کسٹم پراپرٹیز (ویریبلز) مستقل تھیمنگ اور آسان دیکھ بھال کے لیے
-- **نافذ کرتا ہے** Flexbox لے آؤٹ ذمہ دار ڈیزائن اور مناسب ترتیب کے لیے
-- **شامل کرتا ہے** ہموار اینیمیشنز پیغام کی ظاہری شکل کے لیے بغیر توجہ ہٹائے
-- **فراہم کرتا ہے** صارف پیغامات، AI جوابات، اور غلطی کی حالتوں کے درمیان بصری فرق
-- **سپورٹ کرتا ہے** ذمہ دار ڈیزائن جو ڈیسک ٹاپ اور موبائل دونوں پر کام کرتا ہے
-- **مدنظر رکھتا ہے** رسائی کو کم حرکت کی ترجیحات اور مناسب کنٹراسٹ تناسب کے ساتھ
-- **پیش کرتا ہے** ڈارک موڈ سپورٹ صارف کے سسٹم کی ترجیحات کی بنیاد پر
+- **نافذ کرتا ہے** Flexbox لے آؤٹ جوابدہ ڈیزائن اور مناسب سیدھ کے لیے
+- **شامل کرتا ہے** ہموار اینیمیشنز میسج کی ظاہری شکل کے لیے بغیر کسی خلفشار کے
+- **فراہم کرتا ہے** یوزر میسجز، AI جوابات، اور ایرر اسٹیٹس کے درمیان بصری فرق
+- **سپورٹ کرتا ہے** جوابدہ ڈیزائن جو ڈیسک ٹاپ اور موبائل دونوں پر کام کرتا ہے
+- **غور کرتا ہے** رسائی کے لیے کم حرکت کی ترجیحات اور مناسب کنٹراسٹ تناسب کے ساتھ
+- **پیش کرتا ہے** یوزر کے سسٹم کی ترجیحات پر مبنی ڈارک موڈ سپورٹ
 
-### اپنے بیک اینڈ URL کو ترتیب دینا
+### اپنے بیک اینڈ URL کو کنفیگر کرنا
 
-آخری مرحلہ یہ ہے کہ اپنے جاوا اسکرپٹ میں `BASE_URL` کو اپنے بیک اینڈ سرور سے ملانے کے لیے اپ ڈیٹ کریں:
+آخری مرحلہ آپ کے جاوا اسکرپٹ میں `BASE_URL` کو اپ ڈیٹ کرنا ہے تاکہ آپ کے بیک اینڈ سرور سے میل کھائے:
 
 ```javascript
 // For local development
@@ -1476,248 +1833,43 @@ this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
 ```
 
 **اپنے بیک اینڈ URL کا تعین کرنا:**
-- **مقامی ترقی**: اگر فرنٹ اینڈ اور بیک اینڈ دونوں کو مقامی طور پر چلایا جا رہا ہو تو `http://localhost:5000` استعمال کریں
-- **کوڈ اسپیسز**: پورٹس ٹیب میں اپنے بیک اینڈ URL کو تلاش کریں جب پورٹ 5000 کو عوامی بنایا جائے
-- **پروڈکشن**: ہوسٹنگ سروس پر تعیناتی کے وقت اپنے اصل ڈومین سے تبدیل کریں
-
-> 💡 **ٹیسٹنگ ٹپ**: آپ اپنے بیک اینڈ کو براہ راست ٹیسٹ کر سکتے ہیں اپنے براؤزر میں روٹ URL پر جا کر۔ آپ کو اپنے FastAPI سرور سے خوش آمدید پیغام نظر آنا چاہیے۔
-
-## ٹیسٹنگ اور تعیناتی
-
-اب جب کہ آپ نے فرنٹ اینڈ اور بیک اینڈ دونوں اجزاء بنا لیے ہیں، آئیے سب کچھ ایک ساتھ کام کرنے کی جانچ کریں اور اپنے چیٹ اسسٹنٹ کو دوسروں کے ساتھ شیئر کرنے کے لیے تعیناتی کے اختیارات کو دریافت کریں۔
-
-### مقامی ٹیسٹنگ ورک فلو
-
-اپنی مکمل ایپلیکیشن کی جانچ کے لیے ان مراحل پر عمل کریں:
-
-```mermaid
-graph TD
-    A[Start Backend Server] --> B[Configure Environment Variables]
-    B --> C[Test API Endpoints]
-    C --> D[Open Frontend in Browser]
-    D --> E[Test Chat Functionality]
-    E --> F[Debug Any Issues]
-```
-
-**مرحلہ وار ٹیسٹنگ کا عمل:**
-
-1. **اپنا بیک اینڈ سرور شروع کریں**:
-   ```bash
-   cd backend
-   source venv/bin/activate  # or venv\Scripts\activate on Windows
-   python api.py
-   ```
-
-2. **API کام کر رہا ہے اس کی تصدیق کریں**:
-   - اپنے براؤزر میں `http://localhost:5000` کھولیں
-   - آپ کو اپنے FastAPI سرور سے خوش آمدید پیغام نظر آنا چاہیے
-
-3. **اپنا فرنٹ اینڈ کھولیں**:
-   - اپنے فرنٹ اینڈ ڈائریکٹری پر جائیں
-   - اپنے ویب براؤزر میں `index.html` کھولیں
-   - یا بہتر ترقیاتی تجربے کے لیے VS Code کے Live Server ایکسٹینشن کا استعمال کریں
-
-4. **چیٹ کی فعالیت کی جانچ کریں**:
-   - ان پٹ فیلڈ میں ایک پیغام ٹائپ کریں
-   - "Send" پر کلک کریں یا Enter دبائیں
-   - تصدیق کریں کہ AI مناسب جواب دیتا ہے
-   - کسی بھی جاوا اسکرپٹ کی غلطیوں کے لیے براؤزر کنسول چیک کریں
+- **لوکل ڈیولپمنٹ**: `http://localhost:5000` استعمال کریں اگر فرنٹ اینڈ اور بیک اینڈ دونوں لوکل پر چل رہے ہیں
+- **Codespaces**: اپنے بیک اینڈ URL کو Ports ٹیب میں تلاش کریں جب پورٹ 5000 کو پبلک بنایا جائے
+- **پروڈکشن**: اصل ڈومین کے ساتھ تبدیل کریں جب کسی ہوسٹنگ سروس پر ڈیپلائی کریں
 
-### عام مسائل کا حل
+> 💡 **ٹیسٹنگ ٹپ**: آپ اپنے بیک اینڈ کو براہ راست ٹیسٹ کر سکتے ہیں اپنے براؤزر میں روٹ URL پر جا کر۔ آپ کو اپنے FastAPI سرور سے ویلکم میسج نظر آنا چاہیے۔
+- **بات چیت کے موضوع** کی بنیاد پر ذہین تجاویز شامل کریں  
+- **عام سوالات** کے لیے فوری جواب کے بٹن بنائیں  
 
-| مسئلہ | علامات | حل |
-|-------|--------|-----|
-| **CORS ایرر** | فرنٹ اینڈ بیک اینڈ تک نہیں پہنچ سکتا | یقینی بنائیں کہ FastAPI CORSMiddleware مناسب طریقے سے ترتیب دیا گیا ہے |
-| **API کلید ایرر** | 401 غیر مجاز جوابات | اپنے `GITHUB_TOKEN` ماحول متغیر کو چیک کریں |
-| **کنکشن ریفیوزڈ** | فرنٹ اینڈ میں نیٹ ورک کی غلطیاں | بیک اینڈ URL کی تصدیق کریں اور یہ کہ Flask سرور چل رہا ہے |
-| **کوئی AI جواب نہیں** | خالی یا غلط جوابات | API کوٹہ یا توثیق کے مسائل کے لیے بیک اینڈ لاگز چیک کریں |
+> 🎯 **سیکھنے کا مقصد**: یہ اضافی چیلنجز آپ کو جدید ویب ڈیولپمنٹ کے طریقے اور AI انضمام کی تکنیکیں سمجھنے میں مدد دیتے ہیں جو پروڈکشن ایپلیکیشنز میں استعمال ہوتی ہیں۔
 
-**عام ڈیبگنگ کے اقدامات:**
-- **چیک کریں** براؤزر ڈیولپر ٹولز کنسول میں جاوا اسکرپٹ کی غلطیاں
-- **تصدیق کریں** نیٹ ورک ٹیب کامیاب API درخواستوں اور جوابات کو دکھاتا ہے
-- **جائزہ لیں** بیک اینڈ ٹرمینل آؤٹ پٹ Python کی غلطیوں یا API مسائل کے لیے
-- **تصدیق کریں** کہ ماحول متغیرات مناسب طریقے سے لوڈ اور قابل رسائی ہیں
+## خلاصہ اور اگلے مراحل  
 
-## GitHub Copilot ایجنٹ چیلنج 🚀
+مبارک ہو! آپ نے کامیابی سے ایک مکمل AI سے چلنے والا چیٹ اسسٹنٹ شروع سے بنایا ہے۔ اس پروجیکٹ نے آپ کو جدید ویب ڈیولپمنٹ ٹیکنالوجیز اور AI انضمام کے ساتھ عملی تجربہ فراہم کیا ہے – یہ مہارتیں آج کے ٹیکنالوجی کے میدان میں بہت قیمتی ہیں۔
 
-ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
+### آپ نے کیا حاصل کیا  
 
-**تفصیل:** چیٹ اسسٹنٹ کو گفتگو کی تاریخ اور پیغام کی مستقل مزاجی شامل کر کے بہتر بنائیں۔ یہ چیلنج آپ کو چیٹ ایپلیکیشنز میں اسٹیٹ کو منظم کرنے اور ڈیٹا اسٹوریج کو بہتر صارف تجربے کے لیے نافذ کرنے کا طریقہ سمجھنے میں مدد دے گا۔
+اس سبق کے دوران، آپ نے کئی اہم ٹیکنالوجیز اور تصورات میں مہارت حاصل کی:  
 
-**پرومپٹ:** چیٹ ایپلیکیشن میں گفتگو کی تاریخ شامل کریں جو سیشنز کے درمیان برقرار رہے۔ چیٹ پیغامات کو لوکل اسٹوریج میں محفوظ کرنے، صفحہ لوڈ ہونے پر گفتگو کی تاریخ دکھانے، اور "Clear History" بٹن شامل کرنے کی فعالیت شامل کریں۔ نیز ٹائپنگ انڈیکیٹرز اور پیغام کے وقت کے نشانات نافذ کریں تاکہ چیٹ کا تجربہ زیادہ حقیقت پسندانہ ہو۔
+**بیک اینڈ ڈیولپمنٹ:**  
+- **GitHub Models API** کے ساتھ AI فعالیت کو مربوط کیا  
+- **Flask** کے ذریعے ایک RESTful API بنایا، مناسب ایرر ہینڈلنگ کے ساتھ  
+- **ماحول کے متغیرات** کا استعمال کرتے ہوئے محفوظ تصدیق نافذ کی  
+- **CORS** کو فرنٹ اینڈ اور بیک اینڈ کے درمیان کراس-اورجن درخواستوں کے لیے ترتیب دیا  
 
-[ایجنٹ موڈ کے بارے میں مزید جانیں](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)۔
+**فرنٹ اینڈ ڈیولپمنٹ:**  
+- **سمینٹک HTML** کا استعمال کرتے ہوئے ایک ذمہ دار چیٹ انٹرفیس بنایا  
+- **جدید جاوا اسکرپٹ** async/await اور کلاس پر مبنی آرکیٹیکچر کے ساتھ نافذ کیا  
+- **CSS Grid، Flexbox، اور اینیمیشنز** کے ساتھ ایک دلکش یوزر انٹرفیس ڈیزائن کیا  
+- **رسائی کی خصوصیات** اور ذمہ دار ڈیزائن اصول شامل کیے  
 
-## اسائنمنٹ: اپنا ذاتی AI اسسٹنٹ بنائیں
+**فل اسٹیک انضمام:**  
+- **HTTP API کالز** کے ذریعے فرنٹ اینڈ اور بیک اینڈ کو مربوط کیا  
+- **ریئل ٹائم یوزر انٹریکشنز** اور غیر متزامن ڈیٹا فلو کو سنبھالا  
+- **ایرر ہینڈلنگ** اور ایپلیکیشن میں یوزر فیڈبیک نافذ کیا  
+- **یوزر ان پٹ سے AI کے جواب تک** مکمل ایپلیکیشن ورک فلو کی جانچ کی  
 
-اب آپ اپنا AI اسسٹنٹ نافذ کریں گے۔ صرف ٹیوٹوریل کوڈ کو نقل کرنے کے بجائے، یہ ایک موقع ہے کہ آپ ان تصورات کو لاگو کریں اور کچھ ایسا بنائیں جو آپ کی دلچسپیوں اور استعمال کے معاملات کی عکاسی کرے۔
-
-### پروجیکٹ کی ضروریات
-
-آئیے آپ کے پروجیکٹ کو صاف، منظم ڈھانچے کے ساتھ ترتیب دیں:
-
-```text
-my-ai-assistant/
-├── backend/
-│   ├── api.py          # Your FastAPI server
-│   ├── llm.py          # AI integration functions
-│   ├── .env            # Your secrets (keep this safe!)
-│   └── requirements.txt # Python dependencies
-├── frontend/
-│   ├── index.html      # Your chat interface
-│   ├── app.js          # The JavaScript magic
-│   └── styles.css      # Make it look amazing
-└── README.md           # Tell the world about your creation
-```
-
-### بنیادی نفاذ کے کام
-
-**بیک اینڈ ترقی:**
-- **ہمارا FastAPI کوڈ لیں** اور اسے اپنا بنائیں
-- **ایک منفرد AI شخصیت بنائیں** – شاید ایک مددگار کھانے پکانے کا اسسٹنٹ، ایک تخلیقی لکھنے کا ساتھی، یا ایک مطالعہ کا ساتھی؟
-- **مضبوط ایرر ہینڈلنگ شامل کریں** تاکہ آپ کی ایپ خراب نہ ہو جب چیزیں غلط ہو جائیں
-- **واضح دستاویزات لکھیں** کسی کے لیے جو آپ کے API کو سمجھنا چاہتا ہو
-
-**فرنٹ اینڈ ترقی:**
-- **ایک چیٹ انٹرفیس بنائیں** جو بدیہی اور خوش آمدید محسوس ہو
-- **صاف، جدید جاوا اسکرپٹ لکھیں** جسے آپ دوسرے ڈویلپرز کو دکھانے پر فخر کریں گے
-- **اپنے AI کی شخصیت کی عکاسی کرنے کے لیے کسٹم اسٹائلنگ ڈیزائن کریں** – تفریحی اور رنگین؟ صاف اور کم سے کم؟ مکمل طور پر آپ پر منحصر ہے!
-- **یقینی بنائیں** کہ یہ فونز اور کمپیوٹرز دونوں پر بہترین کام کرتا ہے
-
-**ذاتی نوعیت کی ضروریات:**
-- **ایک منفرد نام اور شخصیت کا انتخاب کریں** اپنے AI اسسٹنٹ کے لیے – شاید کچھ ایسا جو آپ کی دلچسپیوں یا آپ کے حل کرنے کے مسائل کی عکاسی کرے
-- **بصری ڈیزائن کو اپنی مرضی کے مطابق بنائیں** تاکہ آپ کے اسسٹنٹ کے انداز سے میل کھائے
-- **ایک دلکش خوش آمدید پیغام لکھیں** جو لوگوں کو چیٹ شروع کرنے پر آمادہ کرے
-- **اپنے اسسٹنٹ کو مختلف قسم کے سوالات کے ساتھ ٹیسٹ کریں** تاکہ یہ دیکھ سکیں کہ یہ کیسے جواب دیتا ہے
-
-### بہتری کے خیالات (اختیاری)
-
-کیا آپ اپنے پروجیکٹ کو اگلے درجے پر لے جانا چاہتے ہیں؟ یہاں کچھ دلچسپ خیالات ہیں جنہیں آپ دریافت کر سکتے ہیں:
-
-| فیچر | تفصیل | مہارتیں جو آپ مشق کریں گے |
-|------|-------|---------------------------|
-| **پیغام کی تاریخ** | صفحہ ریفریش کے بعد بھی گفتگو کو یاد رکھیں | لوکل اسٹوریج کے ساتھ کام کرنا، JSON ہینڈلنگ |
-| **ٹائپنگ انڈیکیٹرز** | جواب کا انتظار کرتے وقت "AI ٹائپ کر رہا ہے..." دکھائیں | CSS اینیمیشنز، async پروگرامنگ |
-| **پیغام کے وقت کے نشانات** | دکھائیں کہ ہر پیغام کب بھیجا گیا | تاریخ/وقت فارمیٹنگ، UX ڈیزائن |
-| **چیٹ ایکسپورٹ کریں** | صارفین کو اپنی گفتگو ڈاؤن لوڈ کرنے دیں | فائل ہینڈلنگ، ڈیٹا ایکسپورٹ |
-| **تھیم سوئچنگ** | لائٹ/ڈارک موڈ ٹوگل | CSS ویریبلز، صارف کی ترجیحات |
-| **وائس انپٹ** | اسپیچ ٹو ٹیکسٹ فعالیت شامل کریں | ویب APIs، رسائی |
-
-### ٹیسٹنگ اور دستاویزات
-
-**کوالٹی اشورنس:**
-- **اپنی ایپلیکیشن کو مختلف ان پٹ اقسام اور ایج کیسز کے ساتھ ٹیسٹ کریں**
-- **مختلف اسکرین سائزز پر ذمہ دار ڈیزائن کی تصدیق کریں**
-- **کی بورڈ نیویگیشن اور اسکرین ریڈرز کے ساتھ رسائی کی جانچ کریں**
-- **HTML اور CSS کی معیارات کی تعمیل کے لیے توثیق کریں**
-
-**دستاویزات کی ضروریات:**
-- **README.md لکھیں** جو آپ کے پروجیکٹ اور اسے چلانے کا طریقہ بیان کرے
-- **اپنے چیٹ انٹرفیس کی کارروائی میں اسکرین شاٹس شامل کریں**
-- **کسی بھی منفرد خصوصیات یا حسب ضرورت کو دستاویز کریں** جو آپ نے شامل کی ہیں
-- **دیگر ڈویلپرز کے لیے واضح سیٹ اپ ہدایات فراہم کریں**
-
-### جمع کرانے کے رہنما اصول
-
-**پروجیکٹ کی ڈیلیوریبلز:**
-1. مکمل پروجیکٹ فولڈر تمام سورس کوڈ کے ساتھ
-2. README.md پروجیکٹ کی تفصیل اور سیٹ اپ ہدایات کے ساتھ
-3. اسکرین شاٹس جو آپ کے چیٹ اسسٹنٹ کو کارروائی میں دکھاتے ہیں
-4. مختصر عکاسی کہ آپ نے کیا سیکھا اور کن چیلنجز کا سامنا کیا
-
-**تشخیص کے معیار:**
-- **فعالیت**: کیا چیٹ اسسٹنٹ توقع کے مطابق کام کرتا ہے؟
-- **کوڈ کا معیار**: کیا کوڈ اچھی طرح سے منظم، تبصرہ شدہ، اور برقرار رکھنے کے قابل ہے؟
-- **ڈیزائن**: کیا انٹرفیس بصری طور پر دلکش اور صارف دوست ہے؟
-- **تخلیقی صلاحیت**: آپ کا نفاذ کتنا منفرد اور ذاتی نوعیت کا ہے؟
-- **دستاویزات**: کیا سیٹ اپ ہدایات واضح اور مکمل ہیں؟
-
-> 💡 **کامیابی کا مشورہ**: پہلے بنیادی ضروریات سے شروع کریں، پھر اضافی خصوصیات شامل کریں جب سب کچھ کام کر رہا ہو۔ جدید خصوصیات شامل کرنے سے پہلے ایک پالش شدہ بنیادی تجربہ بنانے پر توجہ مرکوز کریں۔
-
-## حل
-
-[حل](./solution/README.md)
-
-## اضافی چیلنجز
-
-کیا آپ اپنے AI اسسٹنٹ کو اگلے درجے پر لے جانے کے لیے تیار ہیں؟ ان اعلی درجے کے چیلنجز کو آزمائیں جو AI انضمام اور ویب ترقی کی آپ کی سمجھ کو گہرا کریں گے۔
-
-### شخصیت کی حسب ضرورت
-
-حقیقی جادو تب ہوتا ہے جب آپ اپنے AI اسسٹنٹ کو ایک منفرد شخصیت دیتے ہیں۔ مختلف سسٹم پرامپٹس کے ساتھ تجربہ کریں تاکہ خصوصی اسسٹنٹس بن سکیں:
-
-**پیشہ ورانہ اسسٹنٹ مثال:**
-```python
-call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
-```
-
-**تخلیقی لکھنے کے معاون کی مثال:**
-```python
-call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
-```
-
-**تکنیکی رہنما مثال:**
-```python
-call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
-```
-
-### فرنٹ اینڈ بہتری
-
-اپنے چیٹ انٹرفیس کو ان بصری اور فعال بہتریوں کے ساتھ تبدیل کریں:
-
-**اعلی درجے کی CSS خصوصیات:**
-- **ہموار پیغام کی حرکت اور ٹرانزیشن نافذ کریں**
-- **CSS شیپس اور گریڈینٹس کے ساتھ کسٹم چیٹ ببل ڈیزائن شامل کریں**
-- **AI کے "سوچنے" کے وقت کے لیے ٹائپنگ انڈیکیٹر اینیمیشن بنائیں**
-- **ایموجی ری ایکشنز یا پیغام کی ریٹنگ سسٹم ڈیزائن کریں**
-
-**جاوا اسکرپٹ بہتری:**
-- **کی بورڈ شارٹ کٹس شامل کریں** (Ctrl+Enter بھیجنے کے لیے، Escape ان پٹ صاف کرنے کے لیے)
-- **پیغام کی تلاش اور فلٹرنگ کی فعالیت نافذ کریں**
-- **گفتگو ایکسپورٹ فیچر بنائیں** (ٹیکسٹ یا JSON کے طور پر ڈاؤن لوڈ کریں)
-- **لوکل اسٹوریج میں آٹو سیو شامل کریں** تاکہ پیغام کا نقصان نہ ہو
-
-### اعلی درجے کی AI انضمام
-
-**متعدد AI شخصیات:**
-- **ڈراپ ڈاؤن بنائیں** مختلف AI شخصیات کے درمیان سوئچ کرنے کے لیے
-- **صارف کی پسندیدہ شخصیت کو لوکل اسٹوریج میں محفوظ کریں**
-- **سیاق و سباق کی تبدیلی نافذ کریں** جو گفتگو کے بہاؤ کو برقرار رکھے
-
-**سمارٹ جواب کی خصوصیات:**
-- **گفتگو کے سیاق و سباق کی آگاہی شامل کریں** (AI پچھلے پیغامات کو یاد رکھتا ہے)
-- **گفتگو کے موضوع کی بنیاد پر سمارٹ تجاویز نافذ کریں**
-- **عام سوالات کے لیے فوری جواب کے بٹن بنائیں**
-
-> 🎯 **سیکھنے کا مقصد**: یہ اضافی چیلنجز آپ کو جدید ویب ترقی کے نمونوں اور AI انضمام کی تکنیکوں کو سمجھنے میں مدد دیتے ہیں جو پروڈکشن ایپلیکیشنز میں استعمال ہوتے ہیں۔
-
-## خلاصہ اور اگلے مراحل
-
-مبارک ہو! آپ نے کامیابی کے ساتھ ایک مکمل AI پاورڈ چیٹ اسسٹنٹ شروع سے بنایا۔ اس پروجیکٹ نے آپ کو جدید ویب ترقی کی ٹیکنالوجیز اور AI انضمام کے ساتھ عملی تجربہ دیا ہے – وہ مہارتیں جو آج کے ٹیک منظر نامے میں انتہائی قیمتی ہیں۔
-
-### آپ نے کیا حاصل کیا
-
-اس سبق کے دوران، آپ نے کئی اہم ٹیکنالوجیز اور تصورات میں مہارت حاصل کی:
-
-**بیک اینڈ ترقی:**
-- **GitHub Models API کے ساتھ انضمام** AI فعالیت کے لیے
-- **RESTful API بنایا** Flask کا استعمال کرتے ہوئے مناسب ایرر ہینڈلنگ کے ساتھ
-- **محفوظ توثیق نافذ کی** ماحول متغیرات کا استعمال کرتے ہوئے
-- **CORS کو ترتیب دیا** فرنٹ اینڈ اور بیک اینڈ کے درمیان کراس اوریجن درخواستوں کے لیے
-
-**فرنٹ اینڈ ترقی:**
-- **ذمہ دار چیٹ انٹرفیس بنایا** سیمینٹک HTML کا استعمال کرتے ہوئے
-- **جدید جاوا اسکرپٹ نافذ کیا** async/await اور کلاس پر مبنی آرکیٹیکچر کے ساتھ
-- **دلچسپ صارف انٹرفیس ڈیزائن کیا** CSS Grid، Flexbox، اور اینیمیشنز کے ساتھ
-- **رسائی کی خصوصیات شامل کیں** اور ذمہ دار ڈیزائن کے اصول
-
-**فل اسٹیک انضمام:**
-- **فرنٹ اینڈ اور بیک اینڈ کو HTTP API کالز کے ذریعے جوڑا**
-- **ریئل ٹائم صارف تعاملات اور غیر متزامن ڈیٹا فلو کو سنبھالا**
-- **ایرر ہینڈلنگ اور صارف کی رائے کو ایپلیکیشن میں نافذ کیا**
-- **مکمل ایپلیکیشن ورک فلو کی جانچ کی** صارف انپٹ سے AI جواب تک
-
-### کلیدی سیکھنے کے نتائج
+### اہم سیکھنے کے نتائج  
 
 ```mermaid
 mindmap
@@ -1739,25 +1891,68 @@ mindmap
       Model Parameters
       Conversation Flow
 ```
+  
+اس پروجیکٹ نے آپ کو AI سے چلنے والی ایپلیکیشنز بنانے کی بنیادی باتوں سے روشناس کرایا ہے، جو ویب ڈیولپمنٹ کا مستقبل ہے۔ آپ اب سمجھتے ہیں کہ روایتی ویب ایپلیکیشنز میں AI صلاحیتوں کو کیسے شامل کیا جائے، اور ایسے یوزر تجربات تخلیق کیے جائیں جو ذہین اور جوابدہ محسوس ہوں۔
+
+### پیشہ ورانہ اطلاقات  
+
+اس سبق میں آپ نے جو مہارتیں حاصل کی ہیں وہ جدید سافٹ ویئر ڈیولپمنٹ کیریئرز میں براہ راست قابل اطلاق ہیں:  
+
+- **فل اسٹیک ویب ڈیولپمنٹ** جدید فریم ورک اور APIs کے ساتھ  
+- **AI انضمام** ویب ایپلیکیشنز اور موبائل ایپس میں  
+- **API ڈیزائن اور ڈیولپمنٹ** مائیکرو سروسز آرکیٹیکچرز کے لیے  
+- **یوزر انٹرفیس ڈیولپمنٹ** رسائی اور ذمہ دار ڈیزائن پر توجہ کے ساتھ  
+- **DevOps طریقے** بشمول ماحول کی ترتیب اور تعیناتی  
+
+### AI ڈیولپمنٹ کے سفر کو جاری رکھنا  
+
+**اگلے سیکھنے کے مراحل:**  
+- **مزید جدید AI ماڈلز اور APIs** (GPT-4، Claude، Gemini) کو دریافت کریں  
+- **بہتر AI جوابات کے لیے پرامپٹ انجینئرنگ تکنیکیں** سیکھیں  
+- **بات چیت کے ڈیزائن** اور چیٹ بوٹ یوزر تجربہ کے اصولوں کا مطالعہ کریں  
+- **AI کی حفاظت، اخلاقیات، اور ذمہ دار AI ڈیولپمنٹ** کے طریقوں کی تحقیق کریں  
+- **زیادہ پیچیدہ ایپلیکیشنز بنائیں** بات چیت کی یادداشت اور سیاق و سباق کی آگاہی کے ساتھ  
+
+**جدید پروجیکٹ آئیڈیاز:**  
+- AI ماڈریشن کے ساتھ ملٹی یوزر چیٹ رومز  
+- AI سے چلنے والے کسٹمر سروس چیٹ بوٹس  
+- ذاتی سیکھنے کے ساتھ تعلیمی ٹیوٹرنگ اسسٹنٹس  
+- مختلف AI شخصیات کے ساتھ تخلیقی تحریر کے ساتھی  
+- ڈیولپرز کے لیے تکنیکی دستاویزات کے اسسٹنٹس  
+
+## GitHub Codespaces کے ساتھ شروعات  
+
+کیا آپ اس پروجیکٹ کو کلاؤڈ ڈیولپمنٹ ماحول میں آزمانا چاہتے ہیں؟ GitHub Codespaces آپ کے براؤزر میں مکمل ڈیولپمنٹ سیٹ اپ فراہم کرتا ہے، جو AI ایپلیکیشنز کے ساتھ تجربہ کرنے کے لیے بہترین ہے بغیر مقامی سیٹ اپ کی ضرورت کے۔
+
+### اپنے ڈیولپمنٹ ماحول کو ترتیب دینا  
+
+**مرحلہ 1: ٹیمپلیٹ سے بنائیں**  
+- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) پر جائیں  
+- اوپر دائیں کونے میں "Use this template" پر کلک کریں (یقینی بنائیں کہ آپ GitHub میں لاگ ان ہیں)  
 
-اس پروجیکٹ نے آپ کو AI پاورڈ ایپلیکیشنز بنانے کے بنیادی اصولوں سے متعارف کرایا ہے، جو ویب ترقی کا مستقبل ہے۔ آپ اب سمجھتے ہیں کہ AI صلاحیتوں کو روایتی ویب ایپلیکیشنز میں کیسے ضم کیا جائے، ایسے صارف تجربات تخلیق کرتے ہوئے جو ذہین اور جوابدہ محسوس ہوں۔
+![ٹیمپلیٹ انٹرفیس دکھا رہا ہے جس میں سبز "Use this template" بٹن ہے](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ur.png)  
 
-### پیشہ ورانہ اطلاقات
+**مرحلہ 2: Codespaces لانچ کریں**  
+- اپنی نئی بنائی گئی repository کھولیں  
+- سبز "Code" بٹن پر کلک کریں اور "Codespaces" منتخب کریں  
+- "Create codespace on main" منتخب کریں تاکہ آپ کا ڈیولپمنٹ ماحول شروع ہو سکے  
 
-اس سبق میں آپ نے جو مہارتیں حاصل کی ہیں وہ جدید سافٹ ویئر ترقی کے کیریئرز میں براہ راست قابل اطلاق ہیں:
+![Codespace انٹرفیس دکھا رہا ہے جس میں کلاؤڈ ڈیولپمنٹ ماحول لانچ کرنے کے اختیارات ہیں](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ur.png)  
 
-- **فل اسٹیک ویب ترقی** جدید فریم ورک اور APIs کا استعمال کرتے ہوئے
-- **AI انضمام** ویب ایپلیکیشنز اور موبائل ایپس میں
-- **API ڈیزائن اور ترقی**
-- **ایپلیکیشنز کی جانچ کے لیے پورٹ فارورڈنگ**
+**مرحلہ 3: ماحول کی ترتیب**  
+جب آپ کا Codespace لوڈ ہو جائے، آپ کو رسائی حاصل ہوگی:  
+- **پہلے سے انسٹال شدہ** Python، Node.js، اور تمام ضروری ڈیولپمنٹ ٹولز  
+- **VS Code انٹرفیس** ویب ڈیولپمنٹ کے لیے ایکسٹینشنز کے ساتھ  
+- **ٹرمینل رسائی** بیک اینڈ اور فرنٹ اینڈ سرورز چلانے کے لیے  
+- **پورٹ فارورڈنگ** آپ کی ایپلیکیشنز کی جانچ کے لیے  
 
-**Codespaces کیا فراہم کرتا ہے:**
-- **ختم کرتا ہے** مقامی ماحول کی ترتیب اور کنفیگریشن کے مسائل
-- **فراہم کرتا ہے** مختلف ڈیوائسز پر مستقل ترقیاتی ماحول
-- **شامل کرتا ہے** ویب ڈیولپمنٹ کے لیے پہلے سے کنفیگر شدہ ٹولز اور ایکسٹینشنز
-- **پیش کرتا ہے** GitHub کے ساتھ ورژن کنٹرول اور تعاون کے لیے بے جوڑ انضمام
+**Codespaces کیا فراہم کرتا ہے:**  
+- **مقامی ماحول کی ترتیب اور کنفیگریشن کے مسائل ختم کرتا ہے**  
+- **مختلف ڈیوائسز پر مستقل ڈیولپمنٹ ماحول فراہم کرتا ہے**  
+- **ویب ڈیولپمنٹ کے لیے پہلے سے ترتیب شدہ ٹولز اور ایکسٹینشنز شامل کرتا ہے**  
+- **GitHub کے ساتھ ورژن کنٹرول اور تعاون کے لیے ہموار انضمام پیش کرتا ہے**  
 
-> 🚀 **پرو ٹپ**: Codespaces AI ایپلیکیشنز سیکھنے اور پروٹوٹائپنگ کے لیے بہترین ہے کیونکہ یہ خود بخود پیچیدہ ماحول کی ترتیب کو سنبھالتا ہے، جس سے آپ کو کنفیگریشن کے مسائل کے بجائے تعمیر اور سیکھنے پر توجہ مرکوز کرنے کا موقع ملتا ہے۔
+> 🚀 **پرو ٹپ**: Codespaces AI ایپلیکیشنز سیکھنے اور پروٹوٹائپنگ کے لیے بہترین ہے کیونکہ یہ تمام پیچیدہ ماحول کی ترتیب کو خود بخود سنبھالتا ہے، جس سے آپ کو تعمیر اور سیکھنے پر توجہ مرکوز کرنے کی اجازت ملتی ہے بجائے اس کے کہ کنفیگریشن کے مسائل میں الجھیں۔  
 
 ---
 
diff --git a/translations/ur/README.md b/translations/ur/README.md
index 23c22bc821..f0106a8281 100644
--- a/translations/ur/README.md
+++ b/translations/ur/README.md
@@ -1,132 +1,129 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "3fd21589b9bb0a90b9c9dd7d587f7e43",
-  "translation_date": "2025-10-20T20:41:50+00:00",
+  "original_hash": "8b9d0562ea649b6012d1a67acc630681",
+  "translation_date": "2025-11-03T12:50:16+00:00",
   "source_file": "README.md",
   "language_code": "ur"
 }
 -->
-[![GitHub لائسنس](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
-[![GitHub شراکت دار](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
-[![GitHub مسائل](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
-[![GitHub پل-ریکویسٹ](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
-[![PRs خوش آمدید](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
 
-[![GitHub دیکھنے والے](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
-[![GitHub فورکس](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
-[![GitHub ستارے](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
 
-[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
+[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)  
 
-# ابتدائیوں کے لیے ویب ڈیولپمنٹ - ایک نصاب
+# ویب ڈیولپمنٹ برائے ابتدائی - ایک نصاب  
 
-مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے 12 ہفتوں کے جامع کورس کے ساتھ ویب ڈیولپمنٹ کے بنیادی اصول سیکھیں۔ ہر ایک 24 اسباق جاوا اسکرپٹ، CSS، اور HTML میں عملی منصوبوں جیسے ٹیراریومز، براؤزر ایکسٹینشنز، اور اسپیس گیمز کے ذریعے گہرائی میں جاتا ہے۔ کوئزز، مباحثے، اور عملی اسائنمنٹس کے ساتھ مشغول ہوں۔ اپنی مہارت کو بہتر بنائیں اور ہمارے مؤثر پروجیکٹ پر مبنی تدریسی طریقہ کار کے ساتھ اپنے علم کو بہتر بنائیں۔ آج ہی اپنی کوڈنگ کا سفر شروع کریں!
+مائیکروسافٹ کلاؤڈ ایڈووکیٹس کے 12 ہفتوں کے جامع کورس کے ذریعے ویب ڈیولپمنٹ کے بنیادی اصول سیکھیں۔ ہر ایک 24 اسباق جاوا اسکرپٹ، سی ایس ایس، اور ایچ ٹی ایم ایل کو عملی منصوبوں جیسے کہ ٹیراریئم، براؤزر ایکسٹینشنز، اور اسپیس گیمز کے ذریعے سکھاتے ہیں۔ کوئزز، مباحثے، اور عملی اسائنمنٹس کے ذریعے مشغول ہوں۔ اپنی مہارتوں کو بہتر بنائیں اور ہمارے مؤثر پروجیکٹ پر مبنی تدریسی طریقہ کار کے ساتھ اپنے علم کو بہتر بنائیں۔ آج ہی اپنے کوڈنگ کے سفر کا آغاز کریں!  
 
-Azure AI Foundry Discord کمیونٹی میں شامل ہوں
+Azure AI Foundry Discord کمیونٹی میں شامل ہوں  
 
-[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
+[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)  
 
-ان وسائل کو استعمال کرنے کے لیے شروع کرنے کے لیے ان مراحل پر عمل کریں:
-1. **ریپوزٹری کو فورک کریں**: کلک کریں [![GitHub فورکس](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
-2. **ریپوزٹری کو کلون کریں**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
-3. [**Azure AI Foundry Discord میں شامل ہوں اور ماہرین اور ساتھی ڈیولپرز سے ملاقات کریں**](https://discord.com/invite/ByRwuEEgH4)
+ان وسائل کو استعمال کرنے کے لیے ان مراحل پر عمل کریں:  
+1. **ریپوزیٹری کو فورک کریں**: کلک کریں [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)  
+2. **ریپوزیٹری کو کلون کریں**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+3. [**Azure AI Foundry Discord میں شامل ہوں اور ماہرین اور دیگر ڈیولپرز سے ملاقات کریں**](https://discord.com/invite/ByRwuEEgH4)  
 
-### 🌐 کثیر زبان کی حمایت
+### 🌐 کثیر زبان کی حمایت  
 
-#### GitHub ایکشن کے ذریعے سپورٹ (خودکار اور ہمیشہ اپ ڈیٹ)
+#### GitHub Action کے ذریعے سپورٹ (خودکار اور ہمیشہ اپ ڈیٹ)  
 
-<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
-[عربی](../ar/README.md) | [بنگالی](../bn/README.md) | [بلغاریائی](../bg/README.md) | [برمی (میانمار)](../my/README.md) | [چینی (سادہ)](../zh/README.md) | [چینی (روایتی، ہانگ کانگ)](../hk/README.md) | [چینی (روایتی، مکاؤ)](../mo/README.md) | [چینی (روایتی، تائیوان)](../tw/README.md) | [کروشین](../hr/README.md) | [چیک](../cs/README.md) | [ڈینش](../da/README.md) | [ڈچ](../nl/README.md) | [ایسٹونین](../et/README.md) | [فینیش](../fi/README.md) | [فرانسیسی](../fr/README.md) | [جرمن](../de/README.md) | [یونانی](../el/README.md) | [عبرانی](../he/README.md) | [ہندی](../hi/README.md) | [ہنگریائی](../hu/README.md) | [انڈونیشیائی](../id/README.md) | [اطالوی](../it/README.md) | [جاپانی](../ja/README.md) | [کوریائی](../ko/README.md) | [لتھوانیائی](../lt/README.md) | [مالائی](../ms/README.md) | [مراٹھی](../mr/README.md) | [نیپالی](../ne/README.md) | [نارویجین](../no/README.md) | [فارسی](../fa/README.md) | [پولش](../pl/README.md) | [پرتگالی (برازیل)](../br/README.md) | [پرتگالی (پرتگال)](../pt/README.md) | [پنجابی (گرمکھی)](../pa/README.md) | [رومانیائی](../ro/README.md) | [روسی](../ru/README.md) | [سربیائی (سیریلک)](../sr/README.md) | [سلوواک](../sk/README.md) | [سلووینیائی](../sl/README.md) | [ہسپانوی](../es/README.md) | [سواحلی](../sw/README.md) | [سویڈش](../sv/README.md) | [ٹیگالوگ (فلپائنی)](../tl/README.md) | [تمل](../ta/README.md) | [تھائی](../th/README.md) | [ترکی](../tr/README.md) | [یوکرینی](../uk/README.md) | [اردو](./README.md) | [ویتنامی](../vi/README.md)
-<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->  
+[عربی](../ar/README.md) | [بنگالی](../bn/README.md) | [بلغاریائی](../bg/README.md) | [برمی (میانمار)](../my/README.md) | [چینی (سادہ)](../zh/README.md) | [چینی (روایتی، ہانگ کانگ)](../hk/README.md) | [چینی (روایتی، مکاؤ)](../mo/README.md) | [چینی (روایتی، تائیوان)](../tw/README.md) | [کروشیائی](../hr/README.md) | [چیک](../cs/README.md) | [ڈینش](../da/README.md) | [ڈچ](../nl/README.md) | [ایسٹونین](../et/README.md) | [فنش](../fi/README.md) | [فرانسیسی](../fr/README.md) | [جرمن](../de/README.md) | [یونانی](../el/README.md) | [عبرانی](../he/README.md) | [ہندی](../hi/README.md) | [ہنگریائی](../hu/README.md) | [انڈونیشیائی](../id/README.md) | [اطالوی](../it/README.md) | [جاپانی](../ja/README.md) | [کوریائی](../ko/README.md) | [لیتھوینین](../lt/README.md) | [ملائی](../ms/README.md) | [مراٹھی](../mr/README.md) | [نیپالی](../ne/README.md) | [نارویجین](../no/README.md) | [فارسی](../fa/README.md) | [پولش](../pl/README.md) | [پرتگالی (برازیل)](../br/README.md) | [پرتگالی (پرتگال)](../pt/README.md) | [پنجابی (گرمکھی)](../pa/README.md) | [رومانیائی](../ro/README.md) | [روسی](../ru/README.md) | [سربین (سیریلک)](../sr/README.md) | [سلوواک](../sk/README.md) | [سلووینیائی](../sl/README.md) | [ہسپانوی](../es/README.md) | [سواحلی](../sw/README.md) | [سویڈش](../sv/README.md) | [ٹیگالوگ (فلپائنی)](../tl/README.md) | [تمل](../ta/README.md) | [تھائی](../th/README.md) | [ترکی](../tr/README.md) | [یوکرینی](../uk/README.md) | [اردو](./README.md) | [ویتنامی](../vi/README.md)  
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->  
 
-**اگر آپ اضافی ترجمہ زبانوں کی حمایت چاہتے ہیں تو یہاں درج ہیں [یہاں](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
+**اگر آپ اضافی زبانوں کی ترجمہ کی حمایت چاہتے ہیں تو یہاں درج ہیں [یہاں](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**  
 
-[![Visual Studio Code میں کھولیں](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
+[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
 
-#### 🧑‍🎓 _کیا آپ طالب علم ہیں؟_
+#### 🧑‍🎓 _کیا آپ طالب علم ہیں؟_  
 
-[**اسٹوڈنٹ ہب صفحہ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) پر جائیں جہاں آپ کو ابتدائی وسائل، اسٹوڈنٹ پیک اور یہاں تک کہ مفت سرٹیفکیٹ واؤچر حاصل کرنے کے طریقے ملیں گے۔ یہ وہ صفحہ ہے جسے آپ بک مارک کرنا چاہتے ہیں اور وقتاً فوقتاً چیک کرنا چاہتے ہیں کیونکہ ہم ماہانہ مواد کو تبدیل کرتے ہیں۔
+[**Student Hub صفحہ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) پر جائیں جہاں آپ کو ابتدائی وسائل، طالب علم پیک اور مفت سرٹیفکیٹ واؤچر حاصل کرنے کے طریقے ملیں گے۔ یہ وہ صفحہ ہے جسے آپ کو بک مارک کرنا چاہیے اور وقتاً فوقتاً چیک کرنا چاہیے کیونکہ ہم ماہانہ مواد تبدیل کرتے ہیں۔  
 
-### 📣 اعلان - نئے GitHub Copilot Agent موڈ چیلنجز مکمل کرنے کے لیے!
+### 📣 اعلان - نئے GitHub Copilot Agent موڈ چیلنجز مکمل کرنے کے لیے!  
 
-نیا چیلنج شامل کیا گیا، "GitHub Copilot Agent Challenge 🚀" کو زیادہ تر ابواب میں تلاش کریں۔ یہ آپ کے لیے ایک نیا چیلنج ہے جسے GitHub Copilot اور Agent موڈ کا استعمال کرتے ہوئے مکمل کرنا ہے۔ اگر آپ نے پہلے Agent موڈ استعمال نہیں کیا ہے تو یہ نہ صرف متن تیار کرنے کی صلاحیت رکھتا ہے بلکہ فائلیں بنانے اور ترمیم کرنے، کمانڈز چلانے اور مزید بہت کچھ کرنے کی صلاحیت رکھتا ہے۔
+نیا چیلنج شامل کیا گیا، "GitHub Copilot Agent Challenge 🚀" کو زیادہ تر ابواب میں تلاش کریں۔ یہ ایک نیا چیلنج ہے جسے آپ GitHub Copilot اور Agent موڈ کا استعمال کرتے ہوئے مکمل کر سکتے ہیں۔ اگر آپ نے پہلے Agent موڈ استعمال نہیں کیا ہے تو یہ نہ صرف متن تیار کرنے کی صلاحیت رکھتا ہے بلکہ فائلیں بنانے اور ترمیم کرنے، کمانڈز چلانے اور مزید کام کرنے کی صلاحیت بھی رکھتا ہے۔  
 
-### 📣 اعلان - _نیا پروجیکٹ جنریٹو AI کا استعمال کرتے ہوئے بنانے کے لیے_ 
+### 📣 اعلان - _نیا پروجیکٹ جنریٹو AI کا استعمال کرتے ہوئے بنانے کے لیے_  
 
-نیا AI اسسٹنٹ پروجیکٹ ابھی شامل کیا گیا، اسے دیکھیں [پروجیکٹ](./09-chat-project/README.md)
+نیا AI اسسٹنٹ پروجیکٹ ابھی شامل کیا گیا، اسے دیکھیں [پروجیکٹ](./09-chat-project/README.md)  
 
-### 📣 اعلان - _نیا نصاب_ جنریٹو AI کے لیے جاوا اسکرپٹ پر ابھی جاری کیا گیا
+### 📣 اعلان - _نیا نصاب_ جنریٹو AI برائے جاوا اسکرپٹ ابھی جاری کیا گیا  
 
-ہمارا نیا جنریٹو AI نصاب مت چھوڑیں!
+ہمارا نیا جنریٹو AI نصاب مت چھوڑیں!  
 
-شروع کرنے کے لیے [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) پر جائیں!
+شروع کرنے کے لیے [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) پر جائیں!  
 
-![پس منظر](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ur.png)
+![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ur.png)  
 
-- اسباق جو بنیادی باتوں سے لے کر RAG تک سب کچھ شامل کرتے ہیں۔
-- GenAI اور ہماری ساتھی ایپ کا استعمال کرتے ہوئے تاریخی کرداروں کے ساتھ بات چیت کریں۔
-- تفریحی اور مشغول بیانیہ، آپ وقت کے سفر پر ہوں گے!
+- اسباق جو بنیادی اصولوں سے لے کر RAG تک سب کچھ شامل کرتے ہیں۔  
+- تاریخی کرداروں کے ساتھ GenAI اور ہماری ساتھی ایپ کا استعمال کرتے ہوئے بات چیت کریں۔  
+- دلچسپ اور مشغول بیانیہ، آپ وقت کے سفر پر ہوں گے!  
 
-![کردار](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ur.png)
+![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ur.png)  
 
+ہر سبق میں ایک اسائنمنٹ شامل ہے، ایک علم کی جانچ اور ایک چیلنج جو آپ کو سکھانے والے موضوعات پر رہنمائی کرتا ہے جیسے:  
+- پرامپٹنگ اور پرامپٹ انجینئرنگ  
+- متن اور تصویر ایپ جنریشن  
+- سرچ ایپس  
 
-ہر سبق میں ایک اسائنمنٹ شامل ہے جسے مکمل کرنا ہے، ایک علم کی جانچ اور ایک چیلنج جو آپ کو سیکھنے کے موضوعات پر رہنمائی کرے گا جیسے:
-- پرامپٹنگ اور پرامپٹ انجینئرنگ
-- متن اور تصویر ایپ جنریشن
-- تلاش ایپس
+شروع کرنے کے لیے [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) پر جائیں!  
 
-شروع کرنے کے لیے [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) پر جائیں!
+## 🌱 شروع کریں  
 
+> **اساتذہ**، ہم نے [کچھ تجاویز شامل کی ہیں](for-teachers.md) کہ اس نصاب کو کیسے استعمال کیا جائے۔ ہم آپ کی رائے کو [اپنے مباحثہ فورم](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) میں پسند کریں گے!  
 
+**[طالب علم](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، ہر سبق کے لیے، پہلے لیکچر کوئز سے شروع کریں اور لیکچر مواد کو پڑھنے، مختلف سرگرمیاں مکمل کرنے اور پوسٹ لیکچر کوئز کے ذریعے اپنی سمجھ کو جانچنے کے ساتھ جاری رکھیں۔  
 
-## 🌱 شروع کرنا
+اپنے سیکھنے کے تجربے کو بہتر بنانے کے لیے، اپنے ساتھیوں کے ساتھ مل کر پروجیکٹس پر کام کریں! مباحثے ہمارے [مباحثہ فورم](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) میں حوصلہ افزائی کی جاتی ہے جہاں ہمارے ماڈریٹرز کی ٹیم آپ کے سوالات کے جوابات دینے کے لیے دستیاب ہوگی۔  
 
-> **اساتذہ**, ہم نے [کچھ تجاویز شامل کی ہیں](for-teachers.md) کہ اس نصاب کو کیسے استعمال کیا جائے۔ ہمیں آپ کی رائے [ہمارے مباحثہ فورم میں](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) پسند آئے گی!
+اپنی تعلیم کو مزید آگے بڑھانے کے لیے، ہم [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) کو اضافی مطالعہ مواد کے لیے تلاش کرنے کی سختی سے سفارش کرتے ہیں۔  
 
-**[سیکھنے والے](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، ہر سبق کے لیے، ایک پری لیکچر کوئز کے ساتھ شروع کریں اور لیکچر کے مواد کو پڑھنے، مختلف سرگرمیاں مکمل کرنے اور پوسٹ لیکچر کوئز کے ساتھ اپنی سمجھ کو چیک کرنے کے ساتھ جاری رکھیں۔
+### 📋 اپنے ماحول کو ترتیب دینا  
 
-اپنے سیکھنے کے تجربے کو بڑھانے کے لیے، اپنے ساتھیوں کے ساتھ مل کر منصوبوں پر کام کریں! مباحثے کی حوصلہ افزائی کی جاتی ہے [ہمارے مباحثہ فورم میں](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) جہاں ہمارے ماڈریٹرز کی ٹیم آپ کے سوالات کے جوابات دینے کے لیے دستیاب ہوگی۔
+یہ نصاب ایک تیار شدہ ترقیاتی ماحول کے ساتھ آتا ہے! جیسے ہی آپ شروع کریں، آپ اس نصاب کو [Codespace](https://github.com/features/codespaces/) (_ایک براؤزر پر مبنی، کوئی انسٹالیشن کی ضرورت نہیں ہے_) یا اپنے کمپیوٹر پر مقامی طور پر ایک ٹیکسٹ ایڈیٹر جیسے [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کا استعمال کرتے ہوئے چلانے کا انتخاب کر سکتے ہیں۔  
 
-اپنی تعلیم کو مزید آگے بڑھانے کے لیے، ہم انتہائی مشورہ دیتے ہیں کہ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) کو اضافی مطالعہ کے مواد کے لیے تلاش کریں۔
+#### اپنی ریپوزیٹری بنائیں  
+اپنے کام کو آسانی سے محفوظ کرنے کے لیے، یہ تجویز کیا جاتا ہے کہ آپ اس ریپوزیٹری کی اپنی کاپی بنائیں۔ آپ صفحے کے اوپر **Use this template** بٹن پر کلک کرکے ایسا کر سکتے ہیں۔ یہ آپ کے GitHub اکاؤنٹ میں نصاب کی ایک کاپی کے ساتھ ایک نئی ریپوزیٹری بنائے گا۔  
 
-### 📋 اپنے ماحول کو ترتیب دینا
+ان مراحل پر عمل کریں:  
+1. **ریپوزیٹری کو فورک کریں**: اس صفحے کے اوپر دائیں کونے میں "Fork" بٹن پر کلک کریں۔  
+2. **ریپوزیٹری کو کلون کریں**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
 
-یہ نصاب ایک ترقیاتی ماحول کے ساتھ تیار ہے! جیسے ہی آپ شروع کریں گے آپ اس نصاب کو [Codespace](https://github.com/features/codespaces/) (_ایک براؤزر پر مبنی، کوئی انسٹالیشن کی ضرورت نہیں ہے_) یا اپنے کمپیوٹر پر مقامی طور پر ایک ٹیکسٹ ایڈیٹر جیسے [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کا استعمال کرتے ہوئے چلانے کا انتخاب کر سکتے ہیں۔
+#### نصاب کو Codespace میں چلانا  
 
-#### اپنی ریپوزٹری بنائیں
-اپنا کام آسانی سے محفوظ کرنے کے لیے، یہ تجویز کیا جاتا ہے کہ آپ اس ریپوزٹری کی اپنی کاپی بنائیں۔ آپ اس صفحہ کے اوپر **Use this template** بٹن پر کلک کرکے ایسا کر سکتے ہیں۔ یہ آپ کے GitHub اکاؤنٹ میں نصاب کی ایک کاپی کے ساتھ ایک نئی ریپوزٹری بنائے گا۔
+اس ریپوزیٹری کی اپنی کاپی میں جو آپ نے بنائی ہے، **Code** بٹن پر کلک کریں اور **Open with Codespaces** کو منتخب کریں۔ یہ آپ کے کام کرنے کے لیے ایک نیا Codespace بنائے گا۔  
 
-ان مراحل پر عمل کریں:
-1. **ریپوزٹری کو فورک کریں**: اس صفحہ کے اوپر دائیں کونے میں "Fork" بٹن پر کلک کریں۔
-2. **ریپوزٹری کو کلون کریں**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ur.png)  
 
-#### نصاب کو Codespace میں چلانا
+#### نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانا  
 
-اس ریپوزٹری کی اپنی کاپی میں جو آپ نے بنائی ہے، **Code** بٹن پر کلک کریں اور **Open with Codespaces** کو منتخب کریں۔ یہ آپ کے کام کرنے کے لیے ایک نیا Codespace بنائے گا۔
+اس نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانے کے لیے، آپ کو ایک ٹیکسٹ ایڈیٹر، ایک براؤزر اور ایک کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [پروگرامنگ زبانوں اور ٹولز کا تعارف](../../1-getting-started-lessons/1-intro-to-programming-languages)، آپ کو ان ٹولز کے مختلف اختیارات کے ذریعے لے جائے گا تاکہ آپ وہ منتخب کریں جو آپ کے لیے بہترین ہو۔  
 
-![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ur.png)
+ہماری سفارش ہے کہ آپ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کو اپنے ایڈیٹر کے طور پر استعمال کریں، جس میں ایک بلٹ ان [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) بھی شامل ہے۔ آپ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کو یہاں سے ڈاؤن لوڈ کر سکتے ہیں۔  
 
-#### نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانا
+1. اپنی ریپوزیٹری کو اپنے کمپیوٹر پر کلون کریں۔ آپ **Code** بٹن پر کلک کرکے اور URL کو کاپی کرکے ایسا کر سکتے ہیں:  
 
-اس نصاب کو اپنے کمپیوٹر پر مقامی طور پر چلانے کے لیے، آپ کو ایک ٹیکسٹ ایڈیٹر، ایک براؤزر اور ایک کمانڈ لائن ٹول کی ضرورت ہوگی۔ ہمارا پہلا سبق، [پروگرامنگ زبانوں اور ٹولز آف دی ٹریڈ کا تعارف](../../1-getting-started-lessons/1-intro-to-programming-languages)، آپ کو ان ٹولز میں سے ہر ایک کے لیے مختلف اختیارات کے ذریعے لے جائے گا تاکہ آپ کے لیے بہترین کام کرنے والے کو منتخب کریں۔
+    [CodeSpace](./images/createcodespace.png)  
 
-ہماری سفارش ہے کہ آپ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کو بطور ایڈیٹر استعمال کریں، جس میں ایک بلٹ ان [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) بھی ہے۔ آپ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کو یہاں سے ڈاؤن لوڈ کر سکتے ہیں۔
-
-1. اپنی ریپوزٹری کو اپنے کمپیوٹر پر کلون کریں۔ آپ یہ **Code** بٹن پر کلک کرکے اور URL کو کاپی کرکے کر سکتے ہیں:
-
-    [CodeSpace](./images/createcodespace.png)
-
-    پھر، [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کے اندر [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) کھولیں اور درج ذیل کمانڈ چلائیں، `<your-repository-url>` کو اس URL سے تبدیل کریں جو آپ نے ابھی کاپی کیا ہے:
+    پھر، [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) کے اندر [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) کھولیں اور درج ذیل کمانڈ چلائیں، `<your-repository-url>` کو اس URL سے تبدیل کریں جو آپ نے ابھی کاپی کیا ہے:  
 
     ```bash 
     git clone <your-repository-url>
     ```
+  
+2. فولڈر کو Visual Studio Code میں کھولیں۔ آپ **File** > **Open Folder** پر کلک کرکے اور وہ فولڈر منتخب کرکے ایسا کر سکتے ہیں جو آپ نے ابھی کلون کیا ہے۔  
 
-2. فولڈر کو Visual Studio Code میں کھولیں۔ آپ یہ **File** > **Open Folder** پر کلک کرکے اور فولڈر کو منتخب کرکے کر سکتے ہیں جو آپ نے ابھی کلون کیا ہے۔
-
->  تجویز کردہ Visual Studio Code ایکسٹینشنز:
->
+>  تجویز کردہ Visual Studio Code ایکسٹینشنز:  
+>  
 > * [لائیو سرور](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTML صفحات کو Visual Studio Code میں پیش کرنے کے لیے
 > * [کوپائلٹ](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - کوڈ کو تیزی سے لکھنے میں مدد کے لیے
 
@@ -143,91 +140,106 @@ Azure AI Foundry Discord کمیونٹی میں شامل ہوں
 - اسائنمنٹ
 - [سبق کے بعد کوئز](https://ff-quizzes.netlify.app/web/)
 
-> **کوئز کے بارے میں ایک نوٹ**: تمام کوئز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئز، ہر ایک میں تین سوالات۔ یہ [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں۔ کوئز ایپ کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر تعینات کیا جا سکتا ہے؛ `quiz-app` فولڈر میں دی گئی ہدایات پر عمل کریں۔
+> **کوئز کے بارے میں نوٹ**: تمام کوئز Quiz-app فولڈر میں موجود ہیں، کل 48 کوئز، ہر ایک میں تین سوالات۔ یہ [یہاں](https://ff-quizzes.netlify.app/web/) دستیاب ہیں۔ کوئز ایپ کو مقامی طور پر چلایا جا سکتا ہے یا Azure پر تعینات کیا جا سکتا ہے؛ `quiz-app` فولڈر میں دی گئی ہدایات پر عمل کریں۔
 
 ## 🗃️ اسباق
 
 |     |                       پروجیکٹ کا نام                       |                            سکھائے گئے تصورات                             | سیکھنے کے مقاصد                                                                                                                 |                                                         منسلک سبق                                                          |         مصنف          |
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
-| 01  |                     شروعات                      |           پروگرامنگ کا تعارف اور پیشہ ورانہ آلات           | زیادہ تر پروگرامنگ زبانوں کے بنیادی اصولوں اور سافٹ ویئر کے بارے میں سیکھیں جو پیشہ ورانہ ڈویلپرز کو ان کا کام کرنے میں مدد کرتا ہے | [پروگرامنگ زبانوں اور پیشہ ورانہ آلات کا تعارف](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         جیسمن         |
-| 02  |                     شروعات                      |             GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام کرنا             | اپنے پروجیکٹ میں GitHub کو استعمال کرنے کا طریقہ، کوڈ بیس پر دوسروں کے ساتھ تعاون کرنے کا طریقہ                                                    |                            [GitHub کا تعارف](./1-getting-started-lessons/2-github-basics/README.md)                             |          فلور          |
+| 01  |                     شروعات                      |           پروگرامنگ کا تعارف اور پیشہ ورانہ آلات           | زیادہ تر پروگرامنگ زبانوں کے بنیادی اصولوں اور ایسے سافٹ ویئر کے بارے میں سیکھیں جو پیشہ ورانہ ڈویلپرز کو ان کا کام کرنے میں مدد دیتے ہیں | [پروگرامنگ زبانوں اور پیشہ ورانہ آلات کا تعارف](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         جیسمن         |
+| 02  |                     شروعات                      |             GitHub کی بنیادی باتیں، ٹیم کے ساتھ کام کرنا شامل ہے             | اپنے پروجیکٹ میں GitHub کا استعمال کیسے کریں، کوڈ بیس پر دوسروں کے ساتھ تعاون کیسے کریں                                                    |                            [GitHub کا تعارف](./1-getting-started-lessons/2-github-basics/README.md)                             |          فلور          |
 | 03  |                     شروعات                      |                             رسائی                              | ویب رسائی کی بنیادی باتیں سیکھیں                                                                                               |                       [رسائی کے بنیادی اصول](./1-getting-started-lessons/3-accessibility/README.md)                       |       کرسٹوفر       |
-| 04  |                        JS بنیادی باتیں                         |                         جاوا اسکرپٹ ڈیٹا کی اقسام                          | جاوا اسکرپٹ ڈیٹا کی اقسام کی بنیادی باتیں                                                                                                 |                                       [ڈیٹا کی اقسام](./2-js-basics/1-data-types/README.md)                                        |         جیسمن         |
-| 05  |                        JS بنیادی باتیں                         |                         فنکشنز اور طریقے                          | ایپلیکیشن کے منطق کے بہاؤ کو منظم کرنے کے لیے فنکشنز اور طریقوں کے بارے میں سیکھیں                                                             |                              [فنکشنز اور طریقے](./2-js-basics/2-functions-methods/README.md)                               | جیسمن اور کرسٹوفر |
-| 06  |                        JS بنیادی باتیں                         |                        JS کے ساتھ فیصلے کرنا                        | فیصلہ سازی کے طریقوں کا استعمال کرتے ہوئے اپنے کوڈ میں شرائط بنانے کا طریقہ سیکھیں                                                           |                                 [فیصلے کرنا](./2-js-basics/3-making-decisions/README.md)                                  |         جیسمن         |
-| 07  |                        JS بنیادی باتیں                         |                            Arrays اور Loops                            | جاوا اسکرپٹ میں Arrays اور Loops کا استعمال کرتے ہوئے ڈیٹا کے ساتھ کام کریں                                                                                 |                                   [Arrays اور Loops](./2-js-basics/4-arrays-loops/README.md)                                    |         جیسمن         |
-| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML عملی طور پر                            | ایک آن لائن Terrarium بنانے کے لیے HTML بنائیں، لے آؤٹ بنانے پر توجہ مرکوز کریں                                                         |                                 [HTML کا تعارف](./3-terrarium/1-intro-to-html/README.md)                                 |           جین           |
+| 04  |                        JS کی بنیادی باتیں                         |                         جاوا اسکرپٹ ڈیٹا کی اقسام                          | جاوا اسکرپٹ ڈیٹا کی اقسام کی بنیادی باتیں                                                                                                 |                                       [ڈیٹا کی اقسام](./2-js-basics/1-data-types/README.md)                                        |         جیسمن         |
+| 05  |                        JS کی بنیادی باتیں                         |                         فنکشنز اور طریقے                          | ایپلیکیشن کے منطق کے بہاؤ کو منظم کرنے کے لیے فنکشنز اور طریقوں کے بارے میں سیکھیں                                                             |                              [فنکشنز اور طریقے](./2-js-basics/2-functions-methods/README.md)                               | جیسمن اور کرسٹوفر |
+| 06  |                        JS کی بنیادی باتیں                         |                        JS کے ساتھ فیصلے کرنا                        | فیصلہ سازی کے طریقوں کا استعمال کرتے ہوئے اپنے کوڈ میں حالات پیدا کرنے کا طریقہ سیکھیں                                                           |                                 [فیصلے کرنا](./2-js-basics/3-making-decisions/README.md)                                  |         جیسمن         |
+| 07  |                        JS کی بنیادی باتیں                         |                            Arrays اور Loops                            | جاوا اسکرپٹ میں Arrays اور Loops کا استعمال کرتے ہوئے ڈیٹا کے ساتھ کام کریں                                                                                 |                                   [Arrays اور Loops](./2-js-basics/4-arrays-loops/README.md)                                    |         جیسمن         |
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML عملی طور پر                            | آن لائن Terrarium بنانے کے لیے HTML بنائیں، لے آؤٹ بنانے پر توجہ مرکوز کریں                                                         |                                 [HTML کا تعارف](./3-terrarium/1-intro-to-html/README.md)                                 |           جین           |
 | 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS عملی طور پر                             | آن لائن Terrarium کو اسٹائل کرنے کے لیے CSS بنائیں، CSS کی بنیادی باتوں پر توجہ مرکوز کریں بشمول صفحہ کو جوابدہ بنانا                     |                                  [CSS کا تعارف](./3-terrarium/2-intro-to-css/README.md)                                  |           جین           |
-| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 جاوا اسکرپٹ Closures، DOM میں تبدیلی                  | Terrarium کو ایک drag/drop انٹرفیس کے طور پر کام کرنے کے لیے جاوا اسکرپٹ بنائیں، Closures اور DOM میں تبدیلی پر توجہ مرکوز کریں             |                  [جاوا اسکرپٹ Closures، DOM میں تبدیلی](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           جین           |
-| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          ایک Typing Game بنائیں                           | اپنے جاوا اسکرپٹ ایپ کی منطق کو چلانے کے لیے کی بورڈ ایونٹس کا استعمال کرنے کا طریقہ سیکھیں                                                          |                                [ایونٹ پر مبنی پروگرامنگ](./4-typing-game/typing-game/README.md)                                |       کرسٹوفر       |
-| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         براؤزرز کے ساتھ کام کرنا                          | براؤزرز کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے پہلے عناصر کو کیسے بنانا ہے سیکھیں                               |                               [براؤزرز کے بارے میں](./5-browser-extension/1-about-browsers/README.md)                                |           جین           |
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 جاوا اسکرپٹ Closures، DOM میں تبدیلی                  | Terrarium کو Drag/Drop انٹرفیس کے طور پر کام کرنے کے لیے جاوا اسکرپٹ بنائیں، Closures اور DOM میں تبدیلی پر توجہ مرکوز کریں             |                  [جاوا اسکرپٹ Closures، DOM میں تبدیلی](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           جین           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          ایک Typing Game بنائیں                           | اپنے جاوا اسکرپٹ ایپ کی منطق کو چلانے کے لیے کی بورڈ ایونٹس کا استعمال کیسے کریں                                                          |                                [ایونٹ پر مبنی پروگرامنگ](./4-typing-game/typing-game/README.md)                                |       کرسٹوفر       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         براؤزرز کے ساتھ کام کرنا                          | براؤزرز کیسے کام کرتے ہیں، ان کی تاریخ، اور براؤزر ایکسٹینشن کے پہلے عناصر کو کیسے تیار کریں                               |                               [براؤزرز کے بارے میں](./5-browser-extension/1-about-browsers/README.md)                                |           جین           |
 | 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | ایک فارم بنانا، API کو کال کرنا اور متغیرات کو مقامی اسٹوریج میں محفوظ کرنا | اپنے براؤزر ایکسٹینشن کے جاوا اسکرپٹ عناصر کو متغیرات کا استعمال کرتے ہوئے API کو کال کرنے کے لیے بنائیں                      |                [APIs، فارم، اور مقامی اسٹوریج](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           جین           |
-| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          براؤزر میں پس منظر کے عمل، ویب کی کارکردگی          | براؤزر کے پس منظر کے عمل کو ایکسٹینشن کے آئیکن کو منظم کرنے کے لیے استعمال کریں؛ ویب کی کارکردگی اور کچھ اصلاحات کے بارے میں سیکھیں   |             [پس منظر کے کام اور کارکردگی](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           جین           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          براؤزر میں پس منظر کے عمل، ویب کی کارکردگی          | ایکسٹینشن کے آئیکن کو منظم کرنے کے لیے براؤزر کے پس منظر کے عمل کا استعمال کریں؛ ویب کی کارکردگی اور کچھ اصلاحات کے بارے میں سیکھیں   |             [پس منظر کے کام اور کارکردگی](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           جین           |
 | 15  |           [Space Game](./6-space-game/solution/README.md)           |             جاوا اسکرپٹ کے ساتھ مزید جدید گیم ڈویلپمنٹ             | گیم بنانے کی تیاری میں Classes اور Composition اور Pub/Sub پیٹرن کا استعمال کرتے ہوئے Inheritance کے بارے میں سیکھیں              |                      [جدید گیم ڈویلپمنٹ کا تعارف](./6-space-game/1-introduction/README.md)                       |          کرس          |
 | 16  |           [Space Game](./6-space-game/solution/README.md)           |                           کینوس پر ڈرائنگ                            | کینوس API کے بارے میں سیکھیں، جو اسکرین پر عناصر کو ڈرائنگ کرنے کے لیے استعمال ہوتا ہے                                                                       |                                [کینوس پر ڈرائنگ](./6-space-game/2-drawing-to-canvas/README.md)                                |          کرس          |
 | 17  |           [Space Game](./6-space-game/solution/README.md)           |                   اسکرین پر عناصر کو حرکت دینا                    | دریافت کریں کہ عناصر کارٹیسین کوآرڈینیٹس اور کینوس API کا استعمال کرتے ہوئے حرکت کیسے حاصل کر سکتے ہیں                                            |                           [عناصر کو حرکت دینا](./6-space-game/3-moving-elements-around/README.md)                           |          کرس          |
-| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          تصادم کا پتہ لگانا                           | عناصر کو ایک دوسرے سے ٹکرانے اور ردعمل دینے کے لیے کلیدی دباؤ کا استعمال کریں اور گیم کی کارکردگی کو یقینی بنانے کے لیے کولڈاؤن فنکشن فراہم کریں    |                              [تصادم کا پتہ لگانا](./6-space-game/4-collision-detection/README.md)                              |          کرس          |
-| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             اسکور رکھنا                              | گیم کی حیثیت اور کارکردگی کی بنیاد پر ریاضی کے حساب کتاب انجام دیں                                                                |                                    [اسکور رکھنا](./6-space-game/5-keeping-score/README.md)                                    |          کرس          |
-| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     گیم ختم کرنا اور دوبارہ شروع کرنا                     | گیم کو ختم کرنے اور دوبارہ شروع کرنے کے بارے میں سیکھیں، بشمول اثاثوں کو صاف کرنا اور متغیر اقدار کو دوبارہ ترتیب دینا                              |                                [اختتامی شرط](./6-space-game/6-end-condition/README.md)                                 |          کرس          |
-| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML ٹیمپلیٹس اور ویب ایپ میں روٹس                 | روٹنگ اور HTML ٹیمپلیٹس کا استعمال کرتے ہوئے ایک ملٹی پیج ویب سائٹ کی آرکیٹیکچر کا خاکہ بنانے کا طریقہ سیکھیں                             |                            [HTML ٹیمپلیٹس اور روٹس](./7-bank-project/1-template-route/README.md)                             |          یوہان          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          تصادم کا پتہ لگانا                           | عناصر کو ایک دوسرے سے ٹکرانے اور ردعمل دینے کے لیے بنائیں، کی پریسز کا استعمال کریں اور گیم کی کارکردگی کو یقینی بنانے کے لیے کولڈاؤن فنکشن فراہم کریں    |                              [تصادم کا پتہ لگانا](./6-space-game/4-collision-detection/README.md)                              |          کرس          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             اسکور رکھنا                              | گیم کی حیثیت اور کارکردگی کی بنیاد پر ریاضی کے حسابات انجام دیں                                                                |                                    [اسکور رکھنا](./6-space-game/5-keeping-score/README.md)                                    |          کرس          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     گیم کو ختم کرنا اور دوبارہ شروع کرنا                     | گیم کو ختم کرنے اور دوبارہ شروع کرنے کے بارے میں سیکھیں، بشمول اثاثوں کو صاف کرنا اور متغیرات کی اقدار کو دوبارہ ترتیب دینا                              |                                [اختتامی شرط](./6-space-game/6-end-condition/README.md)                                 |          کرس          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 HTML ٹیمپلیٹس اور ویب ایپ میں روٹس                 | روٹنگ اور HTML ٹیمپلیٹس کا استعمال کرتے ہوئے ایک ملٹی پیج ویب سائٹ کی آرکیٹیکچر کا خاکہ کیسے تیار کریں                             |                            [HTML ٹیمپلیٹس اور روٹس](./7-bank-project/1-template-route/README.md)                             |          یوہان          |
 | 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  لاگ ان اور رجسٹریشن فارم بنائیں                   | فارم بنانے اور توثیق کے معمولات کو سنبھالنے کے بارے میں سیکھیں                                                                          |                                           [فارمز](./7-bank-project/2-forms/README.md)                                           |          یوہان          |
-| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   ڈیٹا حاصل کرنے اور استعمال کرنے کے طریقے                   | آپ کی ایپ میں ڈیٹا کیسے بہتا ہے، اسے کیسے حاصل کرنا، ذخیرہ کرنا، اور ضائع کرنا                                                 |                                            [ڈیٹا](./7-bank-project/3-data/README.md)                                            |          یوہان          |
-| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      اسٹیٹ مینجمنٹ کے تصورات                      | آپ کی ایپ اسٹیٹ کو کیسے برقرار رکھتی ہے اور اسے پروگرام کے ذریعے کیسے منظم کرنا ہے                                                              |                                [اسٹیٹ مینجمنٹ](./7-bank-project/4-state-management/README.md)                                |          یوہان          |
-| 25 | [براؤزر/VScode کوڈ](../../8-code-editor) | VScode کے ساتھ کام کرنا | کوڈ ایڈیٹر استعمال کرنے کا طریقہ سیکھیں| [VScode کوڈ ایڈیٹر استعمال کریں](./8-code-editor/1-using-a-code-editor/README.md) | کرس |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   ڈیٹا کو حاصل کرنے اور استعمال کرنے کے طریقے                   | آپ کے ایپ میں ڈیٹا کیسے بہتا ہے، اسے کیسے حاصل کریں، اسٹور کریں، اور ضائع کریں                                                 |                                            [ڈیٹا](./7-bank-project/3-data/README.md)                                            |          یوہان          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      اسٹیٹ مینجمنٹ کے تصورات                      | آپ کا ایپ اسٹیٹ کو کیسے برقرار رکھتا ہے اور اسے پروگرام کے ذریعے کیسے منظم کریں                                                              |                                [اسٹیٹ مینجمنٹ](./7-bank-project/4-state-management/README.md)                                |          یوہان          |
+| 25 | [براؤزر/VScode کوڈ](../../8-code-editor) | VScode کے ساتھ کام کرنا | کوڈ ایڈیٹر کا استعمال کیسے کریں سیکھیں| [VScode کوڈ ایڈیٹر کا استعمال کریں](./8-code-editor/1-using-a-code-editor/README.md) | کرس |
 | 26 | [AI اسسٹنٹس](./9-chat-project/README.md) | AI کے ساتھ کام کرنا | اپنا AI اسسٹنٹ بنانے کا طریقہ سیکھیں | [AI اسسٹنٹ پروجیکٹ](./9-chat-project/README.md) | کرس |
 
 ## 🏫 تدریسی اصول
 
-ہمارا نصاب دو اہم تدریسی اصولوں کے ساتھ ڈیزائن کیا گیا ہے:
+ہمارا نصاب دو اہم تدریسی اصولوں کے ساتھ تیار کیا گیا ہے:
 * پروجیکٹ پر مبنی سیکھنا
 * بار بار کوئز
 
-یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کے بنیادی اصولوں کے ساتھ ساتھ آج کے ویب ڈویلپرز کے استعمال کردہ جدید ترین آلات اور تکنیکوں کو سکھاتا ہے۔ طلباء کو ٹائپنگ گیم، ورچوئل Terrarium، ماحول دوست براؤزر ایکسٹینشن، Space Invader طرز کا گیم، اور کاروباروں کے لیے بینکنگ ایپ بنانے کے ذریعے عملی تجربہ حاصل کرنے کا موقع ملے گا۔ اس سیریز کے اختتام تک، طلباء ویب ڈویلپمنٹ کی ٹھوس سمجھ حاصل کر چکے ہوں گے۔
+یہ پروگرام جاوا اسکرپٹ، HTML، اور CSS کے بنیادی اصولوں کے ساتھ ساتھ آج کے ویب ڈویلپرز کے استعمال کردہ جدید ترین آلات اور تکنیکوں کو سکھاتا ہے۔ طلباء کو ٹائپنگ گیم، ورچوئل Terrarium، ماحول دوست براؤزر ایکسٹینشن، اسپیس انویڈر اسٹائل گیم، اور کاروباروں کے لیے بینکنگ ایپ بنانے کے ذریعے عملی تجربہ حاصل کرنے کا موقع ملے گا۔ اس سیریز کے اختتام تک، طلباء ویب ڈویلپمنٹ کی ٹھوس سمجھ حاصل کر چکے ہوں گے۔
 
-> 🎓 آپ اس نصاب کے پہلے چند اسباق کو Microsoft Learn پر ایک [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) کے طور پر لے سکتے ہیں!
+> 🎓 آپ اس نصاب کے پہلے چند اسباق کو Microsoft Learn پر [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) کے طور پر لے سکتے ہیں!
 
-پروجیکٹس کے ساتھ مواد کو ہم آہنگ کرنے کو یقینی بنا کر، طلباء کے لیے عمل کو زیادہ دلچسپ بنایا جاتا ہے اور تصورات کی یادداشت کو بڑھایا جاتا ہے۔ ہم نے جاوا اسکرپٹ کی بنیادی باتوں میں کئی ابتدائی اسباق بھی لکھے ہیں تاکہ تصورات کو متعارف کرایا جا سکے، جو "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ویڈیو ٹیوٹوریلز کے مجموعہ کے ساتھ جوڑے گئے ہیں، جن کے کچھ مصنفین نے اس نصاب میں تعاون کیا ہے۔
+پروجیکٹس کے ساتھ مواد کو ہم آہنگ کرنے کو یقینی بنا کر، طلباء کے لیے عمل کو زیادہ دلچسپ بنایا گیا ہے اور تصورات کی یادداشت کو بڑھایا جائے گا۔ ہم نے جاوا اسکرپٹ کی بنیادی باتوں میں کئی ابتدائی اسباق بھی لکھے ہیں تاکہ تصورات کو متعارف کرایا جا سکے، "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ویڈیو ٹیوٹوریلز کے مجموعہ سے ایک ویڈیو کے ساتھ جوڑا گیا، جن کے کچھ مصنفین نے اس نصاب میں تعاون کیا۔
 
-اس کے علاوہ، کلاس سے پہلے کم دباؤ والا کوئز طالب علم کے موضوع سیکھنے کے ارادے کو طے کرتا ہے، جبکہ کلاس کے بعد دوسرا کوئز مزید یادداشت کو یقینی بناتا ہے۔ یہ نصاب لچکدار اور تفریحی ہونے کے لیے ڈیزائن کیا گیا تھا اور اسے مکمل یا جزوی طور پر لیا جا سکتا ہے۔ پروجیکٹس چھوٹے شروع ہوتے ہیں اور 12 ہفتے کے دورانیے کے اختتام تک بتدریج پیچیدہ ہو جاتے ہیں۔
+اس کے علاوہ، کلاس سے پہلے ایک کم دباؤ والا کوئز طالب علم کے ارادے کو کسی موضوع کو سیکھنے کی طرف متعین کرتا ہے، جبکہ کلاس کے بعد دوسرا کوئز مزید یادداشت کو یقینی بناتا ہے۔ یہ نصاب لچکدار اور تفریحی ہونے کے لیے ڈیزائن کیا گیا تھا اور اسے مکمل یا جزوی طور پر لیا جا سکتا ہے۔ پروجیکٹس چھوٹے شروع ہوتے ہیں اور 12 ہفتے کے سائیکل کے اختتام تک بتدریج پیچیدہ ہو جاتے ہیں۔
 
-جبکہ ہم نے جاوا اسکرپٹ فریم ورک کو متعارف کرانے سے جان بوجھ کر گریز کیا ہے تاکہ ویب ڈویلپر کے طور پر فریم ورک اپنانے سے پہلے درکار بنیادی مہارتوں پر توجہ مرکوز کی جا سکے، اس نصاب کو مکمل کرنے کے بعد ایک اچھا اگلا قدم Node.js کے بارے میں سیکھنا ہوگا، ویڈیوز کے ایک اور مجموعہ کے ذریعے: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"۔
+جبکہ ہم نے جاوا اسکرپٹ فریم ورک کو متعارف کرانے سے جان بوجھ کر گریز کیا ہے تاکہ فریم ورک اپنانے سے پہلے ویب ڈویلپر کے طور پر درکار بنیادی مہارتوں پر توجہ مرکوز کی جا سکے، اس نصاب کو مکمل کرنے کے بعد اگلا اچھا قدم Node.js کے بارے میں سیکھنا ہوگا، ویڈیوز کے ایک اور مجموعہ کے ذریعے: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
 
 > ہمارے [Code of Conduct](CODE_OF_CONDUCT.md) اور [Contributing](CONTRIBUTING.md) رہنما اصول دیکھیں۔ ہم آپ کی تعمیری رائے کا خیر مقدم کرتے ہیں!
 
 
 ## 🧭 آف لائن رسائی
 
-آپ اس دستاویزات کو [Docsify](https://docsify.js.org/#/) کا استعمال کرتے ہوئے آف لائن چلا سکتے ہیں۔ اس ریپو کو فورک کریں، [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart) اپنی مقامی مشین پر، اور پھر اس ریپو کے روٹ فولڈر میں، `docsify serve` ٹائپ کریں۔ ویب سائٹ آپ کے لوکل ہوسٹ پر پورٹ 3000 پر پیش کی جائے گی: `localhost:3000`۔
+آپ اس دستاویزات کو آف لائن [Docsify](https://docsify.js.org/#/) کا استعمال کرتے ہوئے چلا سکتے ہیں۔ اس ریپو کو فورک کریں، [Docsify انسٹال کریں](https://docsify.js.org/#/quickstart) اپنی مقامی مشین پر، اور پھر اس ریپو کے روٹ فولڈر میں، `docsify serve` ٹائپ کریں۔ ویب سائٹ آپ کے لوکل ہوسٹ پر پورٹ 3000 پر پیش کی جائے گی: `localhost:3000`.
 
-## 📘 پی ڈی ایف
+## 📘 PDF
 
-تمام اسباق کی پی ڈی ایف [یہاں](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) دستیاب ہے۔
+تمام اسباق کا PDF [یہاں](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) پایا جا سکتا ہے۔
 
 
 ## 🎒 دیگر کورسز
 
 ہماری ٹیم دیگر کورسز بھی تیار کرتی ہے! دیکھیں:
 
-- [MCP for Beginners](https://aka.ms/mcp-for-beginners)
-- [Edge AI for Beginners](https://aka.ms/edgeai-for-beginners)
-- [AI Agents for Beginners](https://aka.ms/ai-agents-beginners)
-- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
-- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
-- [جاوا کے ساتھ جنریٹو اے آئی](https://github.com/microsoft/Generative-AI-for-beginners-java)  
-- [ابتدائیوں کے لیے اے آئی](https://aka.ms/ai-beginners)  
-- [ابتدائیوں کے لیے ڈیٹا سائنس](https://aka.ms/datascience-beginners)  
-- [ابتدائیوں کے لیے مشین لرننگ](https://aka.ms/ml-beginners)  
-- [ابتدائیوں کے لیے سائبر سیکیورٹی](https://github.com/microsoft/Security-101)  
-- [ابتدائیوں کے لیے ویب ڈیولپمنٹ](https://aka.ms/webdev-beginners)  
-- [ابتدائیوں کے لیے آئی او ٹی](https://aka.ms/iot-beginners)  
-- [ابتدائیوں کے لیے ایکس آر ڈیولپمنٹ](https://github.com/microsoft/xr-development-for-beginners)  
-- [ایجنٹک استعمال کے لیے گٹ ہب کوپائلٹ میں مہارت حاصل کریں](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)  
-- [C#/.NET ڈیولپرز کے لیے گٹ ہب کوپائلٹ میں مہارت حاصل کریں](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)  
-- [اپنی کوپائلٹ ایڈونچر کا انتخاب کریں](https://github.com/microsoft/CopilotAdventures)  
+### Azure / Edge / MCP / Agents
+[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![ایج اے آئی ابتدائی افراد کے لیے](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ایم سی پی ابتدائی افراد کے لیے](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![اے آئی ایجنٹس ابتدائی افراد کے لیے](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### جنریٹو اے آئی سیریز  
+[![جنریٹو اے آئی ابتدائی افراد کے لیے](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)  
+[![جنریٹو اے آئی (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)  
+[![جنریٹو اے آئی (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)  
+[![جنریٹو اے آئی (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### بنیادی تعلیم  
+[![مشین لرننگ ابتدائی افراد کے لیے](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ڈیٹا سائنس ابتدائی افراد کے لیے](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)  
+[![اے آئی ابتدائی افراد کے لیے](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)  
+[![سائبر سیکیورٹی ابتدائی افراد کے لیے](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)  
+[![ویب ڈیولپمنٹ ابتدائی افراد کے لیے](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)  
+[![آئی او ٹی ابتدائی افراد کے لیے](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)  
+[![ایکس آر ڈیولپمنٹ ابتدائی افراد کے لیے](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)  
+
+---
+
+### کوپائلٹ سیریز  
+[![کوپائلٹ اے آئی پیئرڈ پروگرامنگ کے لیے](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)  
+[![کوپائلٹ C#/.NET کے لیے](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)  
+[![کوپائلٹ ایڈونچر](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)  
 
 ## مدد حاصل کریں  
 
-اگر آپ کو کسی مسئلے کا سامنا ہو یا اے آئی ایپس بنانے کے بارے میں سوالات ہوں، تو شامل ہوں:  
+اگر آپ کو اے آئی ایپس بنانے میں کوئی مسئلہ ہو یا سوال ہو تو شامل ہوں:  
 
 [![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)